/* =========================================================================
   home.css — page d accueil, version 2
   -------------------------------------------------------------------------
   Chargée APRÈS style.css et theme-nature.css : elle ne concerne que
   index.html et surcharge ce qui doit l être. Les autres pages sont
   inchangées.

   Principes :
     - une seule idée forte par écran, beaucoup de vide autour
     - la typographie fait le travail, pas les effets
     - tout est piloté par les variables existantes (thème clair et sombre)
   ========================================================================= */

/* -------------------------------------------------------------------------
   0. Réglages propres à cette page
   ------------------------------------------------------------------------- */
body.home {
  /* Serif système pour les mots mis en avant : élégance, zéro téléchargement */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
           "Times New Roman", serif;
  --rythme: clamp(72px, 11vw, 168px);   /* respiration entre les sections */
}

body.home .section { padding-block: var(--rythme); }

/* L en-tête est collante : sans cela, une ancre amène la section
   pile SOUS la barre, qui en masque le titre. La valeur réelle est
   remesurée par home.js et posée dans --header-h. */
html { scroll-padding-top: calc(var(--header-h, 62px) + 6px); }
body.home [id] { scroll-margin-top: calc(var(--header-h, 62px) + 6px); }
body.home .hero { margin-top: 0; }

/* Barre de progression de lecture, tout en haut */
.progress {
  position: fixed; inset: 0 auto auto 0;
  height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: var(--accent-grad);
  z-index: 60; pointer-events: none;
}

/* =========================================================================
   1. HÉRO
   ========================================================================= */
body.home .hero {
  /* Plus de centrage vertical : le contenu se cale en haut, juste sous
     l en-tête. C est ce centrage qui creusait l espace au-dessus du titre. */
  min-height: 0;
  align-content: start;
  align-items: center;
  padding-block: 0 clamp(44px, 7vh, 92px);
  grid-template-columns: 1.15fr .85fr;
}
/* le titre porte déjà sa propre marge : on annule celle du bloc */
body.home .hero-copy > :first-child { margin-top: 0; }

/* L arbre : 20 % plus petit qu à l origine (480px -> 384px).
   Sa scène suit désormais la hauteur réelle du dessin, sans carré imposé. */
body.home .tree-svg { width: min(100%, 384px); }
body.home .tree-stage { aspect-ratio: auto; }

/* --- Aurores : trois masses colorées qui dérivent lentement ------------- */
.aurora {
  position: absolute;
  /* Pleine largeur de la fenêtre, et non plus bornée au conteneur centré :
     sinon, sur grand écran, le halo se retrouve enfermé dans un rectangle
     centré — le « cadre » qu on voyait autour du titre et de l arbre. */
  top: -20%; bottom: -20%;
  left: 50%; width: 100vw; transform: translateX(-50%);
  z-index: -2; overflow: hidden; pointer-events: none;
  /* Les bords haut et bas se fondent au lieu d être coupés net. */
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 82%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 14%, #000 82%, transparent);
}
.aurora span {
  position: absolute; display: block;
  border-radius: 50%;
  filter: blur(72px);
  opacity: .55;
  will-change: transform;
}
.aurora span:nth-child(1) {
  width: 46vw; height: 46vw; left: -6vw; top: -6vw;
  background: radial-gradient(circle, rgba(132, 204, 22, .55), transparent 68%);
  animation: derive-1 34s ease-in-out infinite alternate;
}
.aurora span:nth-child(2) {
  width: 40vw; height: 40vw; right: -4vw; top: 4vw;
  background: radial-gradient(circle, rgba(16, 185, 129, .50), transparent 68%);
  animation: derive-2 41s ease-in-out infinite alternate;
}
.aurora span:nth-child(3) {
  width: 38vw; height: 38vw; left: 32vw; bottom: -14vw;
  background: radial-gradient(circle, rgba(56, 189, 248, .34), transparent 70%);
  animation: derive-3 47s ease-in-out infinite alternate;
}
@keyframes derive-1 { to { transform: translate3d(7vw, 5vh, 0) scale(1.18); } }
@keyframes derive-2 { to { transform: translate3d(-6vw, 7vh, 0) scale(1.10); } }
@keyframes derive-3 { to { transform: translate3d(4vw, -6vh, 0) scale(1.22); } }

/* --- Le texte ---------------------------------------------------------- */
body.home .hero-copy { position: relative; z-index: 2; }

body.home .hero-kicker {
  backdrop-filter: blur(8px);
  font-size: 11.5px;
}

body.home .hero h1 {
  font-size: clamp(34px, 5.0vw, 68px);
  line-height: 1.02;
  letter-spacing: -.035em;
  font-weight: 800;
  margin: 22px 0 0;
  text-wrap: balance;
}
/* Le mot mis en valeur : serif italique, dégradé animé */
body.home .hero h1 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.015em;
  background: linear-gradient(100deg, #a3e635, #34d399, #22d3ee, #a3e635);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: teinte 14s linear infinite;
}
@keyframes teinte { to { background-position: 300% 0; } }

body.home .hero .subtitle {
  font-size: clamp(15px, 1.15vw, 17px);
  max-width: 48ch;
  margin-top: 22px;
  color: var(--ink-soft);
}
body.home .hero-actions { margin-top: 38px; gap: 14px; }

/* Bouton principal : halo qui respire au survol */
body.home .btn-primary { position: relative; overflow: hidden; }
body.home .btn-primary::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35), transparent 70%);
  transform: translateX(-120%);
  transition: transform .8s var(--ease);
}
body.home .btn-primary:hover::after { transform: translateX(120%); }

/* --- Entrée en scène : chaque bloc monte, l un après l autre ----------- */
@media (prefers-reduced-motion: no-preference) {
  body.home .hero-copy > * {
    opacity: 0;
    transform: translateY(26px);
    animation: monte .9s var(--ease) forwards;
  }
  body.home .hero-copy > *:nth-child(1) { animation-delay: .10s; }
  body.home .hero-copy > *:nth-child(2) { animation-delay: .22s; }
  body.home .hero-copy > *:nth-child(3) { animation-delay: .34s; }
  body.home .hero-copy > *:nth-child(4) { animation-delay: .46s; }
  body.home .tree-stage { opacity: 0; animation: monte 1.4s var(--ease) .35s forwards; }
}
@keyframes monte { to { opacity: 1; transform: none; } }

/* --- Indice de défilement ---------------------------------------------- */
.scroll-cue {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-dim); pointer-events: none;
}
.scroll-cue i {
  display: block; width: 1px; height: 44px;
  background: linear-gradient(var(--ink-dim), transparent);
  animation: filet 2.4s ease-in-out infinite;
  transform-origin: top;
}
@keyframes filet { 0%,100% { transform: scaleY(.35); opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }

/* =========================================================================
   2. BANDEAU DÉFILANT — les notions couvertes, en continu
   ========================================================================= */
.ribbon {
  position: relative;
  overflow: hidden;
  padding: 20px 0;
  border-block: 1px solid var(--stroke);
  background: var(--glass);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ribbon-track {
  display: flex; width: max-content;
  animation: ruban 46s linear infinite;
}
.ribbon:hover .ribbon-track { animation-play-state: paused; }
.ribbon-track span {
  padding: 0 30px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(19px, 2.4vw, 31px);
  color: var(--ink-dim);
  white-space: nowrap;
}
@keyframes ruban { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ribbon-track { animation: none; } }

/* =========================================================================
   3. SECTION « POURQUOI » — trois arguments, gros chiffres
   ========================================================================= */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3.5vw, 54px);
  margin-top: clamp(40px, 5vw, 72px);
}
.why-item { position: relative; padding-top: 26px; border-top: 1px solid var(--stroke); }
.why-item .num {
  font-family: var(--serif);
  font-size: 15px; font-style: italic;
  color: var(--accent);
  margin-bottom: 14px;
}
.why-item h3 {
  font-size: clamp(19px, 1.9vw, 25px);
  letter-spacing: -.02em;
  margin: 0 0 10px;
}
.why-item p { color: var(--ink-soft); font-size: 15.5px; margin: 0; }

/* =========================================================================
   4. TITRES DE SECTION
   ========================================================================= */
body.home .section-head { max-width: 780px; }
body.home .section-head .eyebrow {
  font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent); font-weight: 700;
}
body.home .section-head h2 {
  font-size: clamp(32px, 4.6vw, 62px);
  line-height: 1.02; letter-spacing: -.032em;
  margin: 14px 0 0; text-wrap: balance;
}
body.home .section-head p {
  color: var(--ink-soft); font-size: clamp(16px, 1.4vw, 18.5px);
  margin-top: 16px; max-width: 52ch;
}

/* =========================================================================
   5. CATALOGUE — grille éditoriale asymétrique
   -------------------------------------------------------------------------
   Quatre colonnes : les deux premières fiches (les logiciels disponibles)
   occupent deux colonnes chacune, les quatre suivantes une seule.
   Le mode Liste du bouton d en-tête reste intact.
   ========================================================================= */
body.home .catalogue:not(.is-list) {
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 2vw, 30px);
  margin-top: clamp(27px, 3.8vw, 57px);   /* 15 px de moins qu avant */
}
body.home .catalogue:not(.is-list) > .card:nth-child(1),
body.home .catalogue:not(.is-list) > .card:nth-child(2) { grid-column: span 2; }

/* -20 % sur les cartes : on resserre la grille elle-même plutôt que de
   rogner encore le format de l image. Largeur et hauteur diminuent
   ensemble, le cadrage des captures reste donc intact — et le
   soulèvement au survol devient plus perceptible sur une carte plus
   petite, le même déplacement paraissant plus ample. */
@media (min-width: 1101px) {
  body.home .catalogue:not(.is-list) { max-width: 80%; margin-inline: auto; }
}

@media (max-width: 1100px) {
  body.home .catalogue:not(.is-list) { grid-template-columns: repeat(2, 1fr); }
  body.home .catalogue:not(.is-list) > .card:nth-child(1),
  body.home .catalogue:not(.is-list) > .card:nth-child(2) { grid-column: span 2; }
}
@media (max-width: 640px) {
  body.home .catalogue:not(.is-list) { grid-template-columns: 1fr; }
  body.home .catalogue:not(.is-list) > .card:nth-child(1),
  body.home .catalogue:not(.is-list) > .card:nth-child(2) { grid-column: span 1; }
}

/* --- La carte ----------------------------------------------------------- */
/* La grille donne la profondeur : sans perspective, une rotation 3D
   reste plate et ne se voit pas. */
body.home .catalogue { perspective: 900px; }
/* Bandeaux larges : une perspective plus lointaine adoucit la bascule. */
body.home .catalogue.is-list { perspective: 1500px; }

body.home .card {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: var(--glass);
  border: 1px solid var(--stroke);
  /* La carte s incline vers le centre de la grille. L angle propre à
     chaque carte est posé par home.js dans --ry-hover ; il n est appliqué
     qu au survol, via --ry. */
  transform: translateY(var(--lift, 0px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--zoom, 1));
  transform-style: preserve-3d;
  /* court sur l inclinaison pour qu elle colle au curseur,
     l ombre et la bordure gardent leur douceur */
  transition: transform .38s var(--ease), border-color .35s var(--ease), box-shadow .55s var(--ease);
}
body.home .card:hover {
  --lift: -10px;
  --ry: var(--ry-hover, 0deg);
  --rx: var(--rx-hover, 0deg);
  border-color: color-mix(in srgb, var(--accent) 65%, transparent);
  /* Le liseré gagne 1 px, mais par une ombre intérieure et non par la
     bordure : épaissir un bord déplacerait le contenu d un pixel à chaque
     survol. Ici la carte ne bouge pas, le trait paraît simplement plus franc. */
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent),
    0 30px 70px -34px color-mix(in srgb, var(--accent) 60%, transparent),
    var(--shadow);
}

/* Liseré lumineux qui suit le curseur (position posée par home.js) */
body.home .card::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(340px circle at 50% -6%,
              color-mix(in srgb, var(--accent) 26%, transparent), transparent 62%);
  opacity: 0;
  transition: opacity .4s var(--ease);
  pointer-events: none; z-index: 1;
}
body.home .card:hover::before { opacity: 1; }

/* Mode grille : cartes 25 % plus basses. L essentiel vient de l image,
   qui gouverne la hauteur ; le corps de texte suit dans la même proportion. */
body.home .card-media { aspect-ratio: 16 / 6.75; overflow: hidden; }
body.home .card-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease), filter .5s var(--ease);
}
body.home .card:hover .card-media img { transform: scale(1.06); }

/* Voile dégradé pour que le badge reste lisible sur toute image */
body.home .card-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.30) 0%, transparent 34%);
  pointer-events: none;
}

body.home .card-body { position: relative; z-index: 2; padding: 17px 18px 19px; gap: 10px; }

/* Le titre est un <h3> et l accroche un <p> : tous deux gardaient les
   marges par défaut du navigateur, soit environ 19 px au-dessus et
   au-dessous du titre, qui s ajoutaient à l espacement de la grille.
   On les remet à zéro : le seul espacement est désormais le gap ci-dessus. */
body.home .card-body > * { margin: 0; }
body.home .card-index {
  font-family: var(--serif); font-style: italic;
  font-size: 11px; color: var(--accent); opacity: .9;
}
body.home .card-title {
  font-size: clamp(15.5px, 1.3vw, 19px);
  letter-spacing: -.025em; line-height: 1.16;
}
body.home .catalogue:not(.is-list) > .card:nth-child(-n+2) .card-title {
  font-size: clamp(18px, 1.7vw, 23px);
}
body.home .card-tagline { color: var(--ink-soft); font-size: 12.5px; line-height: 1.45; }

/* L accroche portait flex:1 : elle absorbait toute la hauteur restante
   de la carte et repoussait le bouton tout en bas. Sur des cartes courtes
   et de tailles inégales, cela creusait un grand vide sous le texte.
   Le bouton suit désormais le texte de près. */
body.home .catalogue:not(.is-list) .card-tagline { flex: 0 0 auto; }
body.home .catalogue:not(.is-list) .card-actions { margin-top: 2px; }

/* Les fiches à venir : discrètes, mais pas mortes */
body.home .card.is-soon { opacity: .92; }
body.home .card.is-soon .card-media img { filter: grayscale(.85) contrast(.95); }
body.home .card.is-soon:hover .card-media img { filter: grayscale(.35); }

/* =========================================================================
   6. BANDEAU DE CONTACT
   ========================================================================= */
.cta-band {
  position: relative;
  /* Le cadre épouse son contenu : le formulaire fait 620 px, inutile
     d étaler la boîte sur toute la largeur de la page. */
  max-width: 664px;   /* 620 px de formulaire + 22 px de marge de chaque côté */
  margin-inline: auto;
  border-radius: 22px;
  /* marge haute réduite : c est elle qui repoussait le titre vers le bas
     quand on arrivait par l ancre. Les côtés et le bas ne changent pas. */
  /* Deux valeurs seulement : haut-bas, puis côtés. Le haut et le bas
     partagent ainsi la même expression et ne peuvent plus diverger,
     quelle que soit la largeur de la fenêtre. */
  padding: clamp(12px, 1.5vw, 17px) clamp(16px, 1.9vw, 22px);
  text-align: center;
  overflow: hidden;
  border: 1px solid var(--stroke);
  background:
    radial-gradient(700px 320px at 50% -30%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 70%),
    var(--glass);
}
.cta-band h2 {
  /* même taille que le titre du cadre « À propos » (.panel h2) */
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -.02em; line-height: 1.14;
  margin: 0 auto; max-width: 24ch; text-wrap: balance;
}
.cta-band p {
  color: var(--ink-soft); margin: 12px auto 0; max-width: 54ch;
  font-size: clamp(15px, 1.2vw, 16.5px);
}

/* =========================================================================
   7. Apparitions au défilement (la classe .in est posée par app.js)
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {
  body.home .reveal {
    opacity: 0; transform: translateY(34px);
    transition: opacity .8s var(--ease), transform .8s var(--ease);
  }
  body.home .reveal.in { opacity: 1; transform: none; }
  body.home .reveal[data-delay="1"] { transition-delay: .06s; }
  body.home .reveal[data-delay="2"] { transition-delay: .14s; }
  body.home .reveal[data-delay="3"] { transition-delay: .22s; }
}

/* =========================================================================
   8. Adaptations mobiles
   ========================================================================= */
@media (max-width: 900px) {
  body.home .hero { grid-template-columns: 1fr; min-height: auto; }
  body.home .tree-stage { max-width: 380px; margin-inline: auto; }
  .why-grid { grid-template-columns: 1fr; gap: 34px; }
  .scroll-cue { display: none; }
}
@media (max-width: 560px) {
  body.home .hero h1 { font-size: clamp(29px, 8.4vw, 41px); }
  .aurora span { filter: blur(52px); }
}


/* =========================================================================
   9. LA TERRE — l arbre est planté, pas suspendu
   -------------------------------------------------------------------------
   Les racines sont toujours générées et animées : elles poussent sous la
   motte, qui est dessinée après elles et les recouvre donc naturellement.
   ========================================================================= */
body.home {
  --soil:       #3d2b1c;   /* terre en pleine lumière */
  --soil-deep:  #26190f;   /* profondeur, sous la surface */
  --soil-crest: #5c422a;   /* liseré éclairé de la surface */
  --soil-grain: #17100933; /* cailloux et mottes */
  --grass:      #3f8a19;
}

.tree-soil .soil-body  { fill: url(#soilFade); }
.tree-soil .soil-shade { fill: url(#soilFadeDeep); }

#soilFade stop  { stop-color: var(--soil); }
#soilFade .sf-2,
#soilFade .sf-3 { stop-color: var(--soil-deep); }
#soilFadeDeep stop { stop-color: var(--soil-deep); }
.tree-soil .soil-crest {
  fill: none;
  stroke: var(--soil-crest);
  stroke-width: 3;
  stroke-linecap: round;
}
/* Les cailloux les plus bas s effacent avec la terre qui les porte. */
.tree-soil .soil-grain { fill: var(--soil-grain); }
.tree-soil .soil-grain:nth-of-type(3) { opacity: .35; }
.tree-soil .soil-grain:nth-of-type(5) { opacity: .55; }
.tree-soil .soil-grass {
  fill: none;
  stroke: var(--grass);
  stroke-width: 2.4;
  stroke-linecap: round;
}

/* La motte apparaît en premier : on plante, puis ça pousse. */
@media (prefers-reduced-motion: no-preference) {
  .tree-soil { opacity: 0; animation: monte .8s var(--ease) .15s forwards; }
}

/* L ombre portée d origine passait par-dessus la terre : on la retire. */
body.home .tree-svg .ground { display: none; }


/* =========================================================================
   10. MODE LISTE — bandeaux 30 % plus compacts
   -------------------------------------------------------------------------
   La hauteur d une ligne vient de deux choses : la largeur de l image
   (qui impose sa hauteur par le ratio) et la hauteur du corps de texte.
   On réduit les deux dans la même proportion, sinon la ligne ne maigrit pas.
   ========================================================================= */
body.home .catalogue.is-list {
  gap: clamp(12px, 1.4vw, 20px);
  max-width: 80%;          /* 20 % plus étroit que la pleine largeur */
  margin-inline: auto;
}

body.home .catalogue.is-list .card { border-radius: 16px; }

/* L image gouverne la hauteur : 42 % -> 30 % de la largeur, et un plafond
   ferme pour que les lignes restent égales quelle que soit la capture. */
body.home .catalogue.is-list .card-media {
  flex: 0 0 30%;
  max-height: 168px;
}

body.home .catalogue.is-list .card-body {
  padding: 17px 22px 18px;
  gap: 7px;
}
body.home .catalogue.is-list .card-index { font-size: 12px; }
body.home .catalogue.is-list .card-title {
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.15;
}
body.home .catalogue.is-list .card-tagline {
  font-size: 14px;
  line-height: 1.45;
}
body.home .catalogue.is-list .card-actions { margin-top: 4px; }
body.home .catalogue.is-list .card-actions .btn {
  padding: .42rem .9rem;
  font-size: 13.5px;
}
/* le survol soulève moins : sur des lignes basses, 8 px paraissent énormes */
/* Le bandeau se redresse, se soulève et s avance légèrement : le zoom
   complète la bascule sans avoir à forcer sur l angle. */
body.home .catalogue.is-list .card:hover { --lift: -4px; --zoom: 1.025; }

@media (max-width: 640px) {
  body.home .catalogue.is-list .card-media { flex-basis: 38%; max-height: 130px; }
  body.home .catalogue.is-list .card-body { padding: 14px 16px 15px; }
}

/* =========================================================================
   11. DERNIÈRE SECTION — de quoi remonter jusqu en haut
   -------------------------------------------------------------------------
   « Contact » est la dernière section : le navigateur ne peut pas défiler
   au-delà du bas du document, donc la cible n atteignait jamais le haut de
   l écran, quel que soit le calcul. Il ne manquait pas un réglage : il
   manquait de la place. On donne à la section la hauteur d un écran.
   ========================================================================= */
/* ATTENTION : cette règle vise la SECTION, pas le bandeau.
   L identifiant #contact a été déplacé sur le bandeau en cours de route ;
   la règle s est alors appliquée à lui et lui imposait 48 px de marge
   basse, par-dessus la sienne. D où le bas du cadre qui refusait de
   maigrir malgré tous les réglages. */
body.home #contact-section {
  min-height: calc(100svh - var(--header-h, 62px));
  align-content: start;
  padding-bottom: clamp(48px, 8vh, 96px);
}


/* =========================================================================
   12. LOGO
   ========================================================================= */
.brand .logo img { width: 56px; height: 56px; display: block; border-radius: inherit; }
.brand .logo {
  background: none; padding: 0; overflow: hidden;
  width: 56px; height: 56px; flex: none; box-shadow: none;
}

/* =========================================================================
   13. FORMULAIRE DE CONTACT
   -------------------------------------------------------------------------
   Aucune adresse e-mail dans le HTML : voir assets/js/contact.js.
   ========================================================================= */
/* En flux normal, le bouton (inline-flex) est posé dans une ligne de texte :
   le navigateur réserve sous lui la moitié de l interligne, une dizaine de
   pixels fantômes qui s ajoutaient à la marge basse du cadre. En passant le
   formulaire en colonne flex, il n y a plus de ligne de texte, donc plus
   d espace parasite : la marge du cadre est la seule qui compte. */
.contact-form {
  max-width: 620px; margin: 24px auto 0; text-align: left;
  display: flex; flex-direction: column; align-items: stretch;
}
.contact-form > :last-child { margin-bottom: 0; }

.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
@media (max-width: 560px) { .cf-row { grid-template-columns: 1fr; } }

.cf-field { display: block; margin-bottom: 11px; }
.cf-field > span {
  display: block; margin-bottom: 5px;
  font-size: 11px; font-weight: 650;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-dim);
}
.cf-field input,
.cf-field textarea {
  width: 100%; padding: 9px 12px;
  font: inherit; font-size: 13.5px; color: var(--ink);
  background: var(--glass-strong);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.cf-field textarea { resize: vertical; min-height: 90px; }
.cf-field input:focus,
.cf-field textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.cf-field input::placeholder,
.cf-field textarea::placeholder { color: var(--ink-dim); }

/* Le piège à robots ne doit être ni vu, ni lu, ni atteignable au clavier */
.cf-trap {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

.contact-form button[type="submit"] { margin-top: 4px; align-self: center; }
.contact-form button[disabled] { opacity: .6; cursor: progress; }

.form-state { margin: 12px 0 0; font-size: 14px; }
.form-state.is-ok    { color: var(--green); }
.form-state.is-error { color: var(--coral); }
.form-state.is-wait  { color: var(--ink-dim); }

.cf-note { margin: 8px 0 0; font-size: 12px; color: var(--ink-dim); }

/* Le bandeau accueille maintenant un formulaire : on aère un peu moins. */
body.home #contact .cta-band h2 { max-width: 20ch; }
body.home #contact .cta-band > p { margin-bottom: 4px; }



/* Le formulaire n a plus de mention sous le bouton : on resserre le bas. */
body.home #contact .contact-form { margin-bottom: 0; }


/* =========================================================================
   14. DRAPEAUX DU SÉLECTEUR DE LANGUE
   ========================================================================= */
.flag {
  display: inline-block;
  width: 23px;
  flex: none;
  line-height: 0;
  vertical-align: -3px;
  margin-right: 7px;
}
.flag svg {
  width: 100%; height: auto; display: block;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .22);
}
.lang-cur { display: inline-flex; align-items: center; }
/* Le bouton n affiche plus que le drapeau : on retire la marge de droite. */
.lang-cur .flag { margin-right: 0; }
.lang-menu .flag { margin-right: 9px; }

/* =========================================================================
   Encart « Découvrir » : vidéo de présentation (24 oct. 2026)
   ========================================================================= */
#decouvrir { scroll-margin-top: 92px; }
.decouvrir h2 { margin-top: 6px; }
.decouvrir-video {
  margin: 8px 0 18px; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--stroke); background: #000; box-shadow: var(--shadow);
}
.decouvrir-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }
.panel .decouvrir-programme { margin: 0; font-size: 15px; }