/* ============================================================
   Coach XI — feuille de style unique.

   Registre : instrument, pas brochure. Ce qui le tient :

   1. Une seule famille, Archivo, à axes variables. Les titres
      sont élargis (108 %) et très resserrés en approche
      (-0,038 em) ; le texte courant reste en largeur normale,
      dense, à 16 px. Le contraste entre les deux fait la voix.
   2. Les étiquettes de section sont fines — 11 px, interlettrage
      0,14 em — posées sous un tiret vert de 2 rem, et sur grand
      écran rejetées dans une colonne de gauche. Une échelle
      typographique large lit « professionnel » ; une échelle
      plate lit « gabarit ».
   3. Des filets d’un pixel et des changements de bandeau. Aucune
      boîte, aucune ombre sauf sous les téléphones.
   4. Le vert structure : étiquettes, numéros, chevrons, points
      finaux, sélection. Jamais le texte courant.

   Contrastes (WCAG 2.2 AA) : le vert de marque #178A5C plafonne
   à 4,04:1 sur le fond clair — sous le seuil de 4,5:1. Il reste
   donc aux éléments graphiques (seuil 3:1) ; --accent-fort
   (#12764E, 4,6 à 6,5:1 selon le bandeau) prend le texte et les
   boutons. En thème sombre le vert clair passe partout.
   ============================================================ */

@font-face {
  font-family: 'Archivo';
  src: url('polices/archivo-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --vert: #178A5C;
  --vert-clair: #3FBF89;
  --vert-fonce: #0B2E1F;
  --vert-bloc: #0F6B46;   /* aplat de marque : blanc 6,54:1, blanc adouci 4,81:1 */

  --encre: #0A0D0C;
  --encre-2: #465150;
  --encre-3: #6B7674;

  --fond: #F4F7F6;
  --surface: #FFFFFF;
  --tendre: #E0EBE4;

  --accent: var(--vert);
  --accent-fort: #12764E;
  --sur-accent: #FFFFFF;

  --filet: rgba(10, 13, 12, 0.10);
  --filet-fort: rgba(10, 13, 12, 0.17);
  --teinte: rgba(23, 138, 92, 0.07);

  --ombre-appareil: 0 1px 2px rgba(10, 13, 12, 0.04), 0 32px 64px -20px rgba(10, 13, 12, 0.28);

  --r: 6px;
  --largeur: 78rem;
  --rail: 13rem;   /* assez large pour « COMMENT ÇA FONCTIONNE » sur une ligne */
}

@media (prefers-color-scheme: dark) {
  :root {
    --encre: #F2F6F4;
    --encre-2: #A6B1AE;
    --encre-3: #7C8783;

    --fond: #070A09;
    --surface: #0D1211;
    --tendre: #0C1512;

    --accent: var(--vert-clair);
    --accent-fort: var(--vert-clair);
    --sur-accent: #06231A;

    --filet: rgba(242, 246, 244, 0.11);
    --filet-fort: rgba(242, 246, 244, 0.2);
    --teinte: rgba(63, 191, 137, 0.08);

    --ombre-appareil: 0 1px 2px rgba(0, 0, 0, 0.4), 0 32px 64px -20px rgba(0, 0, 0, 0.7);
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* « clip » et non « hidden » : hidden force overflow-y à « auto »,
   ce qui crée un conteneur de défilement — et la barre d’en-tête en
   position sticky s’ancre alors sur lui au lieu de la fenêtre, donc
   elle ne suit plus. « clip » coupe sans créer de conteneur.
   Là où clip n’est pas connu, la règle est ignorée : la page ne
   déborde de toute façon à aucune largeur testée. */
html, body { max-width: 100%; overflow-x: clip; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (min-width: 56rem) { body { font-size: 1.0625rem; } }

img, svg { max-width: 100%; }

/* ---------- Trame ---------- */

.contenu {
  width: 100%;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 1.5rem;
}

@media (min-width: 48rem) { .contenu { padding: 0 3rem; } }

.section { padding: 4.5rem 0; }
@media (min-width: 56rem) { .section { padding: 7.5rem 0; } }

.ton-blanc  { background: var(--surface); border-top: 1px solid var(--filet); }
.ton-clair  { background: var(--fond);    border-top: 1px solid var(--filet); }
.ton-tendre { background: var(--tendre);  border-top: 1px solid var(--filet); }

/* ---------- Aplats verts ----------
   Deux surfaces pleines : le vert de marque (--vert-bloc) porte le
   héros, les étapes et l’essai ; le vert grave (--vert-fonce) est
   réservé à la section des clubs, où le propos demande du poids.
   Sur les deux, le texte courant est blanc à 80 % (4,8:1 et plus) ;
   le vert clair n’y a pas sa place, il n’atteint que 2,8:1. */

.bloc-vert { background: var(--vert-bloc); color: rgba(255, 255, 255, 0.88); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13); }
.section-sombre { background: var(--vert-fonce); color: #E7F0EB; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); }

.bloc-vert h2, .bloc-vert h3 { color: #FFFFFF; }
.bloc-vert p { color: rgba(255, 255, 255, 0.88); max-width: 36rem; }
.bloc-vert .avance { color: rgba(255, 255, 255, 0.92); }
.bloc-vert a { color: #FFFFFF; }
.bloc-vert .etiquette { color: rgba(255, 255, 255, 0.88); }
.bloc-vert .etiquette::before { background: rgba(255, 255, 255, 0.75); }
.bloc-vert .pt { color: rgba(255, 255, 255, 0.5); }
.bloc-vert :focus-visible { outline-color: #FFFFFF; }

.hero .etiquette { color: rgba(255, 255, 255, 0.88); }
.hero .etiquette::before { background: rgba(255, 255, 255, 0.75); }
.hero .pt { color: rgba(255, 255, 255, 0.5); }

/* Sur un aplat vert, le bouton principal est blanc : c’est le seul
   contraste qui tienne (14,7:1) — le vert clair n’y ressort pas. */
.bloc-vert .bouton-clair, .hero .bouton-clair {
  background: #FFFFFF; border-color: #FFFFFF; color: var(--vert-fonce);
}
.bloc-vert .bouton-clair:hover, .hero .bouton-clair:hover { background: rgba(255, 255, 255, 0.86); border-color: rgba(255, 255, 255, 0.86); }
.bloc-vert .bouton-trait, .hero .bouton-trait { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.38); }
.bloc-vert .bouton-trait:hover, .hero .bouton-trait:hover { border-color: #FFFFFF; color: #FFFFFF; }

/* Étapes posées sur l’aplat. */
.bloc-vert .etape { border-top-color: rgba(255, 255, 255, 0.22); }
.bloc-vert .etape:last-child { border-bottom-color: rgba(255, 255, 255, 0.22); }
.bloc-vert .etape .n { background: #FFFFFF; color: var(--vert-bloc); }

/* Formulaire posé sur l’aplat. */
.bloc-vert label { color: rgba(255, 255, 255, 0.9); }
.bloc-vert input[type="email"] { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.42); color: #FFFFFF; }
.bloc-vert input[type="email"]::placeholder { color: rgba(255, 255, 255, 0.62); }
.bloc-vert input[type="email"]:focus-visible { outline-color: #FFFFFF; }
.bloc-vert .appui { color: rgba(255, 255, 255, 0.88); }
.bloc-vert .inscription .avance { color: rgba(255, 255, 255, 0.92); }
.section-sombre h2, .section-sombre h3 { color: #FFFFFF; }
.section-sombre p { color: rgba(231, 240, 235, 0.72); }
.section-sombre a { color: var(--vert-clair); }
.section-sombre :focus-visible { outline-color: var(--vert-clair); }

/* ---------- Typographie ---------- */

h1, h2, h3 { color: var(--encre); margin: 0; text-wrap: balance; }

h1 {
  font-size: clamp(2.4rem, 4.9vw, 4.1rem);
  font-weight: 700;
  font-stretch: 108%;
  line-height: 1.015;
  letter-spacing: -0.043em;
}

h2 {
  font-size: clamp(1.7rem, 3.1vw, 2.5rem);
  font-weight: 650;
  font-stretch: 106%;
  line-height: 1.06;
  letter-spacing: -0.034em;
}

h3 {
  font-size: 1.1rem;
  font-weight: 600;
  font-stretch: 103%;
  line-height: 1.3;
  letter-spacing: -0.014em;
}

p { margin: 0; color: var(--encre-2); max-width: 36rem; }
p + p { margin-top: 0.9rem; }

.avance {
  font-size: clamp(1.02rem, 1.6vw, 1.16rem);
  line-height: 1.55;
  color: var(--encre-2);
  max-width: 33rem;
  letter-spacing: -0.008em;
}

/* Étiquette : un tiret vert, puis le numéro et le mot, très fins. */
.etiquette {
  display: block;
  margin: 0 0 1.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  font-stretch: 104%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-fort);
}

.etiquette::before {
  content: "";
  display: block;
  width: 2rem;
  height: 2px;
  margin-bottom: 0.85rem;
  background: var(--accent);
}

.etiquette .n { opacity: 0.55; }

.hero .etiquette, .section-sombre .etiquette { color: var(--vert-clair); }
.hero .etiquette::before, .section-sombre .etiquette::before { background: var(--vert-clair); }

.pt { color: var(--accent-fort); }
.hero .pt, .section-sombre .pt { color: var(--vert-clair); }

a { color: var(--accent-fort); text-underline-offset: 3px; }

::selection { background: var(--accent-fort); color: #FFFFFF; }
@media (prefers-color-scheme: dark) { ::selection { background: var(--vert-clair); color: var(--vert-fonce); } }

/* En-tête de section : sur grand écran, l’étiquette part dans une
   colonne de gauche et le titre s’aligne sur son premier interligne. */
.tete { max-width: 46rem; margin-bottom: 3.25rem; }
.tete p { margin-top: 1.15rem; font-size: 1.02rem; }

@media (min-width: 64rem) {
  .tete {
    display: grid;
    grid-template-columns: var(--rail) 1fr;
    column-gap: 3.5rem;
    max-width: none;
    align-items: start;
  }
  .tete .etiquette { grid-column: 1; margin-bottom: 0; padding-top: 0.5rem; }
  /* Dans le rail, le numéro prend sa propre ligne : sinon les
     étiquettes longues cassaient à un endroit arbitraire
     (« 01 CE QUE ÇA / RÈGLE »). */
  .tete .etiquette .n { display: block; margin-bottom: 0.3rem; }
  .tete h2, .tete p { grid-column: 2; max-width: 40rem; }
}

/* ---------- En-tête ---------- */

.entete {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--fond);
  background: color-mix(in srgb, var(--fond) 86%, transparent);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid var(--filet);
}

.entete.sur-sombre {
  background: #0F6B46;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}

.entete.sur-sombre .marque, .entete.sur-sombre .nav-lien { color: #FFFFFF; }
.entete.sur-sombre .nav-lien:hover { color: rgba(255, 255, 255, 0.75); }
.entete.sur-sombre .bouton-plein { background: #FFFFFF; border-color: #FFFFFF; color: var(--vert-fonce); }

/* Restaurée : cette règle avait été emportée par une réparation trop
   large lors de la pose de l’emblème, et sans elle l’en-tête empilait
   le logo au-dessus de la navigation.

   La barre occupe toute la largeur de la fenêtre — pas la colonne de
   contenu — pour que le logo se tienne au bord gauche même sur un
   très grand écran. */
.entete .contenu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 4.5rem;
  max-width: none;
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  flex-shrink: 0;
  font-size: 1.12rem;
  font-weight: 640;
  font-stretch: 106%;
  letter-spacing: -0.026em;
  color: var(--encre);
  text-decoration: none;
}

.entete-nav { display: flex; align-items: center; gap: 2.25rem; }

.nav-lien {
  display: none;
  color: var(--encre-2);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
}

.nav-lien:hover { color: var(--accent-fort); }
@media (min-width: 58rem) { .nav-lien { display: inline; } }

.court { display: inline; }
.long { display: none; }
@media (min-width: 30rem) { .court { display: none; } .long { display: inline; } }

/* ---------- Boutons ---------- */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.875rem;
  padding: 0 1.25rem;
  border-radius: var(--r);
  border: 1px solid transparent;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  font-stretch: 102%;
  letter-spacing: -0.006em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.bouton-plein { background: var(--accent-fort); border-color: var(--accent-fort); color: var(--sur-accent); }
.bouton-plein:hover { background: var(--vert-fonce); border-color: var(--vert-fonce); color: #FFFFFF; }

.bouton-clair { background: var(--vert-clair); border-color: var(--vert-clair); color: var(--vert-fonce); }
.bouton-clair:hover { background: #FFFFFF; border-color: #FFFFFF; }

.bouton-trait { background: transparent; border-color: var(--filet-fort); color: var(--encre); }
.bouton-trait:hover { border-color: var(--encre); }
.hero .bouton-trait, .section-sombre .bouton-trait { color: #E7F0EB; border-color: rgba(231, 240, 235, 0.26); }
.hero .bouton-trait:hover, .section-sombre .bouton-trait:hover { border-color: var(--vert-clair); color: var(--vert-clair); }

.bouton-menu { min-height: 2.25rem; padding: 0 0.95rem; font-size: 0.875rem; }

/* ---------- Héros ---------- */

.hero {
  position: relative;
  background: var(--vert-bloc);
  color: #FFFFFF;
  /* Le héros remonte sous la barre d’en-tête, qui est transparente
     au-dessus de lui : sans ça, la photo commençait sous la barre et
     laissait une bande du fond de page en haut. Le rembourrage rend
     la hauteur au contenu. */
  margin-top: -4.5rem;
  padding: 9.5rem 0 4rem;
  overflow: hidden;
}

/* Le titre garde sa mesure : au-delà de 15 mots par ligne il se
   disperse, et la colonne du héros est plus large que lui. */
.hero h1 { color: #FFFFFF; margin-bottom: 1.5rem; max-width: 13ch; }

@media (min-width: 56rem) { .hero h1 { max-width: 15ch; } }
.hero .avance { color: rgba(255, 255, 255, 0.9); }

.hero-grille { display: grid; gap: 2rem; align-items: end; }
.hero-texte { padding-bottom: 0; }

.actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 2rem; }

.mention {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.4rem;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.88);
}

.mention svg { color: #FFFFFF; flex: none; }

.hero-visuel { position: relative; display: flex; justify-content: center; margin-bottom: 0; }

@media (min-width: 56rem) {
  .hero { padding-top: 5rem; }
  .hero-grille { grid-template-columns: 1.08fr 0.92fr; gap: 4.5rem; }
  .hero-texte { padding-bottom: 5.5rem; }
  .hero-visuel { margin-bottom: 0; justify-content: flex-end; }
}

/* ---------- Bande de faits ---------- */

.faits-bande { background: var(--tendre); border-bottom: 1px solid var(--filet); }

.faits-bande ul { display: grid; grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; }

.faits-bande li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.95rem 0;
  font-size: 0.875rem;
  font-weight: 550;
  letter-spacing: -0.004em;
  color: var(--encre);
  border-bottom: 1px solid var(--filet);
}

.faits-bande li:last-child { border-bottom: 0; }
.faits-bande svg { width: 1rem; height: 1rem; flex: none; color: var(--accent-fort); }

@media (min-width: 44rem) {
  .faits-bande ul { grid-template-columns: repeat(2, 1fr); column-gap: 2rem; }
  .faits-bande li:nth-last-child(-n+2) { border-bottom: 0; }
}

@media (min-width: 68rem) {
  .faits-bande ul { grid-template-columns: repeat(4, 1fr); column-gap: 1.5rem; }
  .faits-bande li { border-bottom: 0; padding: 1.05rem 0; white-space: nowrap; }
}

/* ---------- Constats ---------- */

.constat {
  display: grid;
  gap: 0.4rem 3.5rem;
  padding: 1.9rem 0;
  border-top: 1px solid var(--filet);
  align-content: start;
}

.constat:last-child { border-bottom: 1px solid var(--filet); }

.constat .n {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--accent-fort);
}

@media (min-width: 52rem) {
  .constat { grid-template-columns: var(--rail) 17rem 1fr; align-items: baseline; padding: 2.1rem 0; }
  .constat p { max-width: 30rem; }
}

/* ---------- Rangées ---------- */

.rangee { display: grid; gap: 2.5rem; align-items: center; padding: 3rem 0; }
.rangee + .rangee { border-top: 1px solid var(--filet); }
.rangee-visuel { display: flex; justify-content: center; }

.rangee-texte .etiquette { margin-bottom: 1.15rem; }
.rangee-texte h3 { margin-bottom: 0.9rem; font-size: 1.38rem; font-stretch: 105%; letter-spacing: -0.024em; }
.rangee-texte p { font-size: 0.98rem; }

@media (min-width: 56rem) {
  .rangee { grid-template-columns: 1fr 1fr; gap: 5.5rem; padding: 4.5rem 0; }
  .rangee-inv .rangee-texte { order: 2; }
  .rangee-inv .rangee-visuel { order: 1; }
  .rangee-texte h3 { font-size: 1.62rem; }
}

/* ---------- Appareil et schémas ---------- */

.capture {
  position: relative;
  width: 100%;
  max-width: 23rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Le héros ne porte plus de légende : les onglets nomment l’écran.
   La légende numérotée reste un dispositif de rangée, où elle se lit
   comme la légende d’une figure. */

.appareil {
  width: 100%;
  max-width: 292px;
  padding: 8px;
  border: 0;
  border-radius: 36px;
  background: #0A0D0C;
  /* Un liseré intérieur clair fait la tranche de l'appareil, l'ombre
     longue le décolle de la page. Aucun dégradé : deux ombres suffisent. */
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    0 1px 2px rgba(10, 13, 12, 0.16),
    0 44px 80px -28px rgba(10, 13, 12, 0.5);
}

.hero .appareil { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 1px 2px rgba(0, 0, 0, 0.3), 0 44px 90px -28px rgba(0, 0, 0, 0.6); }

.appareil img, .appareil picture { display: block; width: 100%; height: auto; border-radius: 28px; }

.capture-hero { max-width: 26rem; padding: 0 1.25rem; }
.capture-hero .appareil { max-width: 332px; }

/* Sur grand écran, les onglets s’alignent à droite de la colonne
   tandis que la capture, avec son « margin: 0 auto », se recentrait :
   82 px d’écart entre le bord des onglets et celui du téléphone.
   On ramène la capture à la largeur exacte de l’appareil et on lui
   retire son centrage, pour que les deux partagent le même bord. */
@media (min-width: 56rem) {
  .hero-visuel .capture-hero { max-width: 332px; padding: 0; margin: 0; }
}

.graphique { width: 100%; max-width: 27rem; margin: 0 auto; }
.graphique svg { display: block; width: 100%; height: auto; }
@media (min-width: 56rem) { .graphique { max-width: 30rem; } }

.hero .etape:last-child { border-bottom: 1px solid var(--filet); }

.etape .n {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 5px;
  background: var(--accent-fort);
  color: var(--sur-accent);
  font-size: 0.75rem;
  font-weight: 700;
}

.etape p { font-size: 0.96rem; }

@media (min-width: 52rem) {
  .etapes { grid-template-columns: repeat(3, 1fr); gap: 0 3.5rem; }
  .etape { border-bottom: 0 !important; padding: 1.75rem 0 0; }
}

/* ---------- Clubs ---------- */

.duo { display: grid; gap: 2.5rem; }
@media (min-width: 52rem) { .duo { grid-template-columns: 1fr 1fr; gap: 4.5rem; } }
.duo h3 { margin-bottom: 0.75rem; }
.duo p { font-size: 0.98rem; }

/* ---------- FAQ ---------- */

.faq { max-width: 46rem; }
.faq details { border-top: 1px solid var(--filet); }
.faq details:last-of-type { border-bottom: 1px solid var(--filet); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.2rem 0;
  font-size: 1rem;
  font-weight: 550;
  font-stretch: 103%;
  letter-spacing: -0.014em;
  color: var(--encre);
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "";
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 1.2px solid var(--accent-fort);
  border-bottom: 1.2px solid var(--accent-fort);
  rotate: 45deg;
  margin-top: -0.28rem;
}

.faq details[open] summary { color: var(--accent-fort); }
.faq details[open] summary::after { rotate: -135deg; margin-top: 0.18rem; }
.faq summary:hover { color: var(--accent-fort); }
.faq .reponse { padding: 0 0 1.4rem; max-width: 38rem; }
.faq .reponse p { font-size: 0.96rem; }

/* ---------- Inscription ---------- */

.inscription { max-width: 38rem; }
.inscription .avance { color: rgba(231, 240, 235, 0.76); margin-top: 1.4rem; }

form { margin-top: 2rem; }

label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
  color: rgba(231, 240, 235, 0.55);
}

.champs { display: flex; flex-direction: column; gap: 0.5rem; }

input[type="email"] {
  width: 100%;
  min-height: 3rem;
  padding: 0 0.95rem;
  font: inherit;
  font-size: 16px;
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(231, 240, 235, 0.3);
  border-radius: var(--r);
}

input[type="email"]::placeholder { color: rgba(231, 240, 235, 0.38); }
input[type="email"]:focus-visible { outline: 2px solid var(--vert-clair); outline-offset: 2px; border-color: transparent; }

.champs .bouton { min-height: 3rem; }
.appui { margin-top: 1.15rem; font-size: 0.875rem; color: rgba(231, 240, 235, 0.5); }

@media (min-width: 38rem) {
  .champs { flex-direction: row; }
  .champs input[type="email"] { flex: 1; }
}

/* ---------- Pied ---------- */

.pied { border-top: 1px solid var(--filet); padding: 3.5rem 0 2.25rem; font-size: 0.9rem; }
.pied-grille { display: grid; gap: 2.5rem; margin-bottom: 3rem; }
@media (min-width: 48rem) { .pied-grille { grid-template-columns: 1.8fr 1fr 1fr 1fr; gap: 3rem; } }

.pied h3 {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-fort);
  margin-bottom: 1rem;
}

.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: 0.55rem; }
.pied a { color: var(--encre-2); text-decoration: none; }
.pied a:hover { color: var(--encre); }
.pied p { color: var(--encre-3); font-size: 0.9rem; }
.pied-bas { border-top: 1px solid var(--filet); padding-top: 1.4rem; color: var(--encre-3); }

/* ---------- Page longue ---------- */

.prose { max-width: 42rem; }
.prose h1 { margin-bottom: 1rem; }
.prose h2 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); margin-bottom: 0.9rem; }
.prose p { max-width: 40rem; font-size: 1rem; }

.encart {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  border-left: 2px solid var(--accent);
  padding: 0.2rem 0 0.2rem 1.15rem;
  margin: 0 0 3rem;
  color: var(--encre-2);
  font-size: 1rem;
}

.encart svg { width: 1.1rem; height: 1.1rem; flex: none; margin-top: 0.26rem; color: var(--accent); }

.sommaire { border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); padding: 1.75rem 0; margin-bottom: 3.5rem; }
.sommaire .titre-sommaire { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-fort); margin-bottom: 1rem; }
.sommaire ol { margin: 0; padding: 0; list-style: none; counter-reset: s; columns: 2; column-gap: 2rem; }
.sommaire li { counter-increment: s; margin-bottom: 0.5rem; break-inside: avoid; font-size: 0.95rem; }
.sommaire li::before { content: counter(s, decimal-leading-zero) "  "; color: var(--accent-fort); opacity: 0.55; font-size: 0.78rem; }
.sommaire a { color: var(--encre-2); text-decoration: none; }
.sommaire a:hover { color: var(--accent-fort); }

.bloc-article { padding: 2.25rem 0; border-top: 1px solid var(--filet); }
.bloc-article:last-child { border-bottom: 1px solid var(--filet); }

/* ---------- Mouvement ---------- */

@keyframes monte { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes surgit { from { opacity: 0; transform: translateY(5px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes battement { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.75); } }

.js [data-anim] { opacity: 0; }
.js [data-anim].vu { animation: monte 640ms cubic-bezier(0.16, 0.84, 0.32, 1) both; animation-delay: var(--d, 0ms); }
.js [data-anim="surgit"].vu { animation: surgit 380ms cubic-bezier(0.16, 0.84, 0.32, 1) both; animation-delay: var(--d, 0ms); }

@media (prefers-reduced-motion: no-preference) {
  .pastille-vive { animation: battement 2s ease-in-out infinite; }
  a, .bouton, summary, .nav-lien, input {
    transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, opacity 160ms ease;
  }
  .bouton { transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 120ms ease; }
  .bouton:active { transform: translateY(1px); }
  .faq summary::after { transition: rotate 240ms ease, margin 240ms ease; }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-anim] { opacity: 1; }
  .js [data-anim].vu { animation: none; }
  html { scroll-behavior: auto; }
}

:focus-visible { outline: 2px solid var(--accent-fort); outline-offset: 3px; border-radius: 3px; }

/* ============================================================
   DÉMOS
   Les deux schémas se manipulent. Ce ne sont plus des images :
   l’import d’horaire se rejoue, le hors-ligne bascule entre les
   deux moments du match. Chacun fonctionne sans JavaScript —
   dans ce cas il s’affiche simplement dans son état final.
   ============================================================ */

.demo { width: 100%; max-width: 27rem; margin: 0 auto; }
.demo svg { display: block; width: 100%; height: auto; }
@media (min-width: 56rem) { .demo { max-width: 30rem; } }

.demo-barre {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.25rem;
  min-height: 2.25rem;
}

.demo-etat {
  font-size: 0.8rem;
  font-weight: 550;
  color: var(--encre-3);
}

/* ---------- Import d’horaire ---------- */

/* Sans script, la classe « pret » n’est jamais posée : les cases
   restent visibles et le schéma se lit comme avant. */
.js .demo-import.pret .cel {
  opacity: 0;
  transform: scale(0.55);
  transform-box: fill-box;
  transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
  .js .demo-import.pret .cel {
    transition: opacity 240ms ease, transform 300ms cubic-bezier(0.2, 0.85, 0.3, 1);
    transition-delay: calc(var(--i) * 42ms);
  }
}

.js .demo-import.pret.joue .cel { opacity: 1; transform: none; }

.demo-import .fleche, .demo-import .pointe { opacity: 0.35; }

@media (prefers-reduced-motion: no-preference) {
  .demo-import .fleche, .demo-import .pointe { transition: opacity 260ms ease; }
}

.demo-import.joue .fleche, .demo-import.joue .pointe { opacity: 1; }

/* ---------- Bascule réseau ---------- */

.demo-reseau .b-hors, .demo-reseau .b-reseau,
.demo-reseau .l-sync, .demo-reseau .n-sync, .demo-reseau .coche,
.demo-reseau .t-attente, .demo-reseau .t-sync,
.demo-reseau .etiq-droite, .demo-reseau .tirets-droite {
  transition: opacity 260ms ease, fill 260ms ease, stroke-dashoffset 700ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .demo-reseau * { transition: none !important; }
}

.demo-reseau .n-sync { fill: var(--surface); stroke: var(--accent); stroke-width: 2.5px; }

/* Sur le terrain : la moitié droite est en attente. */
.demo-reseau[data-etat="hors"] .b-reseau,
.demo-reseau[data-etat="hors"] .etiq-droite,
.demo-reseau[data-etat="hors"] .tirets-droite { opacity: 0.3; }
.demo-reseau[data-etat="hors"] .l-sync { opacity: 0.28; }
.demo-reseau[data-etat="hors"] .coche { opacity: 0; }
.demo-reseau[data-etat="hors"] .t-sync { opacity: 0; }
.demo-reseau[data-etat="hors"] .t-attente { opacity: 1; }

/* Réseau retrouvé : la synchronisation s’est faite. */
.demo-reseau[data-etat="reseau"] .b-hors { opacity: 0.35; }
.demo-reseau[data-etat="reseau"] .l-sync { opacity: 1; stroke-dasharray: none; }
.demo-reseau[data-etat="reseau"] .n-sync { fill: var(--accent); stroke: var(--accent); }
.demo-reseau[data-etat="reseau"] .coche { opacity: 1; }
.demo-reseau[data-etat="reseau"] .t-attente { opacity: 0; }
.demo-reseau[data-etat="reseau"] .t-sync { opacity: 1; }

/* ---------- Contrôle segmenté ---------- */

.seg {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 550;
  color: var(--encre-2);
  background: transparent;
  border: 1px solid var(--filet-fort);
  padding: 0.45rem 0.85rem;
  cursor: pointer;
  border-radius: var(--r);
}

.seg + .seg { margin-left: -1px; }
.seg:hover { color: var(--encre); border-color: var(--encre-3); }

.seg.actif {
  background: var(--accent-fort);
  border-color: var(--accent-fort);
  color: var(--sur-accent);
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .seg { transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease; }
}

/* ---------- Chronomètre vivant du héros ---------- */

.chrono { font-variant-numeric: tabular-nums; }

/* ============================================================
   LISTES DE FONCTIONNALITÉS ET FICHE TECHNIQUE
   La page est un inventaire : ce qui compte est que chaque
   capacité se lise seule, sans phrase de liaison.
   ============================================================ */

.points { list-style: none; margin: 1.25rem 0 0; padding: 0; }

.points li {
  position: relative;
  padding-left: 1.35rem;
  margin-bottom: 0.6rem;
  font-size: 0.96rem;
  line-height: 1.5;
  color: var(--encre-2);
}

.points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.63em;
  width: 0.5rem;
  height: 1px;
  background: var(--accent);
}

/* Le bloc final n’a pas de capture : son texte occupe toute la largeur
   et ses deux listes se placent côte à côte. */
.rangee-pleine { grid-template-columns: 1fr !important; gap: 1.5rem; }
.rangee-pleine .rangee-texte { order: 0 !important; }

.duo-points { display: grid; gap: 0 3.5rem; grid-template-columns: 1fr; }
.duo-points .points { margin-top: 0; }

@media (min-width: 52rem) {
  .duo-points { grid-template-columns: 1fr 1fr; }
}

/* --- Fiche technique --- */

.fiche { margin: 0; display: grid; gap: 0; }

.fiche > div {
  display: grid;
  gap: 0.2rem 2.5rem;
  padding: 1.05rem 0;
  border-top: 1px solid var(--filet);
  align-items: baseline;
}

.fiche > div:last-child { border-bottom: 1px solid var(--filet); }

.fiche dt {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-fort);
}

.fiche dd { margin: 0; color: var(--encre-2); font-size: 0.99rem; }

@media (min-width: 52rem) {
  .fiche > div { grid-template-columns: var(--rail) 1fr; }
  .fiche dd { max-width: 34rem; }
}

/* ============================================================
   COUCHE ACADÉMIE
   Le vocabulaire visuel d’un club : un écusson plutôt qu’une
   tuile, des numéros de section portés comme des numéros de
   maillot, les tracés d’une surface de réparation en filigrane
   sur les aplats verts, et une bande de faits découpée comme la
   feuille d’un programme de match.

   Rien d’inventé : aucune date de fondation, aucune devise,
   aucun blason imité d’un club existant. L’écusson ne fait que
   redécouper le sigle qui existe déjà.
   ============================================================ */


/* --- Numéros de section, portés comme des numéros de maillot --- */

.etiquette .n {
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  width: 1.55rem;
  height: 1.75rem;
  padding-top: 0.26rem;
  margin-right: 0.5rem;
  clip-path: polygon(0 0, 100% 0, 100% 56%, 50% 100%, 0 56%);
  background: var(--accent-fort);
  color: var(--sur-accent);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  opacity: 1;
  vertical-align: -0.45rem;
}

.hero .etiquette .n,
.section-sombre .etiquette .n,
.bloc-vert .etiquette .n {
  background: #FFFFFF;
  color: var(--vert-bloc);
}

@media (min-width: 64rem) {
  /* Dans le rail, le numéro passe au-dessus du mot : il se lit alors
     comme le numéro d’un chapitre, pas comme une puce. */
  .tete .etiquette .n { margin-right: 0; margin-bottom: 0.55rem; vertical-align: baseline; }
}

/* --- Tracés de terrain sur les aplats verts --- */

.hero, .bloc-vert, .section-sombre { position: relative; overflow: hidden; }

.hero::before,
.bloc-vert::before,
.section-sombre::before {
  content: "";
  position: absolute;
  bottom: -3rem;
  left: -7rem;
  width: 38rem;
  height: 27rem;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20420%20300%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222%22%3E%3Crect%20x%3D%22-4%22%20y%3D%2234%22%20width%3D%22188%22%20height%3D%22232%22%20rx%3D%222%22%2F%3E%3Crect%20x%3D%22-4%22%20y%3D%2296%22%20width%3D%2274%22%20height%3D%22108%22%20rx%3D%222%22%2F%3E%3Ccircle%20cx%3D%22184%22%20cy%3D%22150%22%20r%3D%2266%22%2F%3E%3Ccircle%20cx%3D%22120%22%20cy%3D%22150%22%20r%3D%223.5%22%20fill%3D%22%23ffffff%22%20stroke%3D%22none%22%2F%3E%3Cpath%20d%3D%22M-4%206%20H420%22%2F%3E%3C%2Fsvg%3E") no-repeat left center / contain;
  /* 0,06 et pas davantage : à 0,09, un trait passant sous le texte
     courant éclaircissait assez le vert pour faire tomber le contraste
     à 4,08:1, sous le seuil. Mesuré, pas estimé. */
  opacity: 0.06;
  pointer-events: none;
}

/* Sur l’aplat d’inscription, la surface arrive par la droite : le
   texte occupe la gauche. */
.bloc-vert::before { left: auto; right: -7rem; transform: scaleX(-1); }

.hero .contenu,
.bloc-vert .contenu,
.section-sombre .contenu { position: relative; z-index: 1; }

/* --- Bande de faits découpée comme une feuille de match --- */

@media (min-width: 68rem) {
  .faits-bande li { padding-left: 1.75rem; }
  .faits-bande li:first-child { padding-left: 0; }
  .faits-bande li + li { border-left: 1px solid var(--filet); }
  .faits-bande ul { column-gap: 0; }
}

/* --- Rubrique de programme : un filet sous le titre de section --- */

.tete h2 { padding-bottom: 1.1rem; border-bottom: 1px solid var(--filet); }
.section-sombre .tete h2,
.bloc-vert .tete h2,
.hero .tete h2 { border-bottom-color: rgba(255, 255, 255, 0.22); }
.tete p { margin-top: 1.15rem; }


/* ============================================================
   MOTS-CLÉS DE FONCTION
   Sous le texte de chaque fonction : trois pictogrammes, trois
   mots. Rien ne se pose plus sur les captures — elles se montrent
   telles quelles, et le repérage se lit dans la colonne de texte,
   là où on est déjà en train de lire.
   ============================================================ */

.mots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem 1rem;
  list-style: none;
  margin: 2rem 0 0;
  padding: 1.75rem 0 0;
  border-top: 1px solid var(--filet);
}

.mots li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
}

.mots svg {
  width: 1.55rem;
  height: 1.55rem;
  color: var(--accent);
  flex: none;
}

.mots span {
  font-size: 0.72rem;
  font-weight: 700;
  font-stretch: 104%;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--encre);
}

/* Sur les aplats verts, le vert de marque n’a pas assez de contraste :
   pictogramme et mot passent au blanc. */
.section-sombre .mots svg, .bloc-vert .mots svg { color: var(--vert-clair); }
.section-sombre .mots span, .bloc-vert .mots span { color: #FFFFFF; }
.section-sombre .mots, .bloc-vert .mots { border-top-color: rgba(255, 255, 255, 0.22); }

@media (max-width: 30rem) {
  .mots { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   PHOTO DE FOND DU HÉROS
   Un terrain au coucher de soleil, posé entre l’aplat vert et le
   contenu. L’opacité est plafonnée à 15 % : le point le plus clair
   de la photo est un blanc pur (le soleil), et au-delà de 16 % le
   titre blanc tombe sous 4,5:1. Mesuré, pas estimé.

   Corollaire : tout le texte du héros passe en blanc plein. À 88 %
   il ne tenait plus, même à 10 % d’opacité de photo.
   ============================================================ */

.hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("/img/terrain-1800.jpg");
  background-image: image-set(url("/img/terrain-1800.webp") type("image/webp"),
                              url("/img/terrain-1800.jpg")  type("image/jpeg"));
  background-size: cover;
  background-position: 50% 62%;
  /* Pleine opacité : le vert n’est plus posé par-dessus, il est
     cuit dans l’image. La photo est convertie en bichromie sur le
     vert de marque, avec un plafond de luminosité calculé — son
     point le plus clair donne 4,75:1 sous du texte blanc. */
  opacity: 1;
  pointer-events: none;
}

/* Le tracé de surface dessiné disparaît du héros : la photo porte
   déjà les vraies lignes du terrain, deux jeux se contrariaient.
   Il reste sur les autres aplats verts, qui n’ont pas de photo. */
.hero::before { display: none; }
.hero .contenu { z-index: 2; }

/* L’en-tête devient transparent au-dessus du héros : la photo monte
   jusqu’au bord haut de la page au lieu d’être coupée par une barre
   verte pleine. */
.entete.sur-sombre { background: transparent; }

/* Texte du héros en blanc plein : c’est ce qui rend la photo possible. */
.hero .avance,
.hero .mention,
.hero .boutiques-mention { color: #FFFFFF; }
.hero .etiquette { color: #FFFFFF; }
.hero .etiquette::before { background: #FFFFFF; }
.hero .mention svg { color: #FFFFFF; }

/* ============================================================
   DEUX TÉLÉPHONES DANS LE HÉROS
   Plus de diaporama : les deux écrans qui comptent — le match et
   la séance — sont là dès l’arrivée. Le second est décalé vers le
   bas, ce qui évite l’alignement raide de deux rectangles jumeaux
   et laisse le premier passer devant.
   ============================================================ */

.duo-tel {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
}

.duo-tel .appareil { max-width: 250px; flex: 0 0 auto; }
.duo-tel picture, .duo-tel img { display: block; width: 100%; height: auto; border-radius: 28px; }

/* Les deux appareils basculent du même angle et se chevauchent en
   diagonale : le second descend et passe devant. Une paire droite
   et alignée lit comme un catalogue ; inclinée, elle lit comme une
   photo de produit. */
.duo-tel .tel-a { rotate: -7deg; z-index: 1; }

.duo-tel .tel-b {
  rotate: -7deg;
  z-index: 2;
  margin-top: 4.5rem;
  margin-left: -3rem;
}

@media (min-width: 56rem) {
  .duo-tel { justify-content: flex-end; padding-right: 0.5rem; }
  .duo-tel .appareil { max-width: 268px; }
}

@media (max-width: 30rem) {
  .duo-tel .appareil { max-width: 44vw; }
  .duo-tel .tel-b { margin-top: 3rem; margin-left: -2rem; }
}

/* ============================================================
   GRILLE DE FONCTIONNALITÉS
   Une pastille ronde teintée, un titre gras, une phrase. Le
   lecteur voit l’étendue d’un coup d’œil et saute au bloc qui
   l’intéresse ; le détail reste plus bas, dans les rangées.

   Trois teintes seulement, en rotation : au-delà, une grille
   multicolore cesse d’appartenir à une marque.
   ============================================================ */

.grille-fonctions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.25rem 2.5rem;
  list-style: none;
  margin: 0 0 4.5rem;
  padding: 0;
}

@media (min-width: 34rem) { .grille-fonctions { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 58rem) { .grille-fonctions { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 78rem) { .grille-fonctions { grid-template-columns: repeat(4, 1fr); } }

.grille-fonctions a {
  display: grid;
  gap: 0.55rem;
  text-decoration: none;
  color: inherit;
  max-width: 17rem;
}

.pastille-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  margin-bottom: 0.35rem;
  color: var(--accent-fort);
}

.pastille-icone svg { width: 1.35rem; height: 1.35rem; }

.pastille-icone.t0 { background: #DCEFE4; }
.pastille-icone.t1 { background: #EDE7DA; }
.pastille-icone.t2 { background: #E1E9EC; }

.grille-fonctions .titre {
  font-size: 1.02rem;
  font-weight: 680;
  font-stretch: 103%;
  letter-spacing: -0.018em;
  color: var(--encre);
}

.grille-fonctions .quoi {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--encre-2);
}

@media (prefers-reduced-motion: no-preference) {
  .grille-fonctions a { transition: transform 160ms ease; }
  .grille-fonctions a:hover { transform: translateY(-3px); }
}

.grille-fonctions a:hover .titre { color: var(--accent-fort); }

/* ---------- Emblème ----------
   Deux fichiers plutôt qu’un : le vert de l’écusson ne donne que
   1,31:1 sur l’aplat vert de l’en-tête — invisible. La variante
   inversée prend le relais sur les fonds verts. */

.embleme { display: block; width: 3.12rem; height: auto; flex: none; }
.embleme-inv { display: none; }

.entete.sur-sombre .embleme { display: none; }
.entete.sur-sombre .embleme-inv { display: block; }

/* ---------- Badges de boutique ----------
   Fichiers d’Apple et de Google repris tels quels. Le PNG de Google
   inclut sa zone de dégagement, pas le SVG d’Apple : d’où deux
   hauteurs de boîte pour une même hauteur visuelle. */

.boutiques {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2rem;
}

.boutiques-mention {
  width: 100%;
  margin: 0 0 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.badge { display: inline-flex; align-items: center; }
.badge img { display: block; width: auto; }
.badge-apple img { height: 40px; }
.badge-google img { height: 52px; }

/* Tant que l’application n’est pas publiée, c’est la mention qui
   porte le sens — les chartes interdisent de modifier le badge. */
.boutiques.bientot .badge { cursor: default; }

a.badge { transition: opacity 150ms ease, transform 150ms ease; }
a.badge:hover { opacity: 1; transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) { a.badge { transition: none; } }

/* ---------- Lien d’évitement ----------
   Premier élément atteignable au clavier, invisible tant qu’il n’a
   pas le focus. */

.evitement {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.7rem 1.1rem;
  border-radius: var(--r);
  background: #FFFFFF;
  color: var(--vert-fonce);
  font-size: 0.95rem;
  font-weight: 650;
  text-decoration: none;
  box-shadow: 0 8px 24px -8px rgba(10, 13, 12, 0.4);
}

.evitement:focus { top: 1rem; }

/* ============================================================
   APPELS À L’ACTION
   Un seul geste est demandé sur toute la page — laisser un
   courriel — et il est rappelé une fois au milieu, là où la
   section des fonctionnalités s’achève. La bande reste basse,
   sans grand titre ni promesse : elle constate un fait et offre
   un bouton.
   ============================================================ */

.bande-appel { padding: 3.5rem 0; }
@media (min-width: 56rem) { .bande-appel { padding: 4.5rem 0; } }

.appel-grille { display: grid; gap: 1.75rem; align-items: center; }

@media (min-width: 56rem) {
  .appel-grille { grid-template-columns: 1.4fr auto; gap: 3.5rem; }
}

.bande-appel h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  letter-spacing: -0.028em;
  margin-bottom: 0.6rem;
}

.bande-appel p { font-size: 1rem; max-width: 32rem; }
.bande-appel .etiquette { margin-bottom: 1rem; }

.appel-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; }

/* Clôture de la FAQ : un rappel discret plutôt qu’un bouton de plus. */
.faq-fin {
  margin-top: 1.75rem;
  font-size: 0.98rem;
  color: var(--encre-2);
}