/* ══════════════════════════════════════════════════════════════════════════════════════════════
   Site vitrine footKlub — www.footklub.fr

   Identité reprise des plateformes : turquoise #2BBDBD, ardoise #0F172A, et le logo officiel.
   Le site est VOLONTAIREMENT autonome : il ne charge ni eac.css ni components.js. Ce sont les
   feuilles du produit, pensées pour des tableaux de bord denses ; les y accrocher ferait qu'une
   retouche d'interface casserait la page de vente, et réciproquement.

   Les animations respectent `prefers-reduced-motion` : parallaxe et révélations au défilement
   deviennent inertes pour qui a demandé moins de mouvement.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

:root{
  --turquoise:#2BBDBD;
  --turquoise-fonce:#1E9A9A;
  --turquoise-clair:#E6F8F8;
  --ardoise:#0F172A;
  --ardoise-2:#1E293B;
  --encre:#0B1220;
  --corps:#475569;
  --doux:#64748B;
  --bord:#E2E8F0;
  --fond:#F8FAFC;
  --blanc:#FFFFFF;
  --ambre:#F59E0B;
  --r12:12px; --r16:16px; --r24:24px;
  --ombre:0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.06);
  --ombre-forte:0 20px 50px rgba(15,23,42,.14);
  --contenu:1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--blanc); color:var(--corps);
  font-family:'DM Sans','Helvetica Neue',Arial,sans-serif;
  font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:'Outfit','Helvetica Neue',Arial,sans-serif;color:var(--encre);
  margin:0; line-height:1.15; letter-spacing:-.02em; text-wrap:balance;}
p{margin:0;}
a{color:inherit;}
img{max-width:100%;display:block;}

.contenu{max-width:var(--contenu);margin:0 auto;padding:0 24px;}
.section{padding:96px 0;position:relative;}
.section.sombre{background:var(--ardoise);color:#CBD5E1;}
.section.sombre h2,.section.sombre h3{color:#fff;}
.section.douce{background:var(--fond);}

/* ── Étiquette de section ─────────────────────────────────────────────────────────────────── */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;color:var(--turquoise-fonce);
  background:var(--turquoise-clair);padding:7px 14px;border-radius:100px;margin-bottom:18px;}
.section.sombre .eyebrow{background:rgba(43,189,189,.14);color:#5FD6D6;}

.titre-section{font-size:clamp(30px,4vw,46px);font-weight:800;margin-bottom:16px;}
.sous-section{font-size:17px;max-width:620px;}
.centre{text-align:center;}
.centre .sous-section{margin-left:auto;margin-right:auto;}

/* ── Boutons ──────────────────────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:'Outfit',sans-serif;font-size:15.5px;font-weight:700;
  padding:15px 28px;border-radius:100px;border:2px solid transparent;
  text-decoration:none;cursor:pointer;transition:transform .18s ease, box-shadow .18s ease,
  background .18s ease, color .18s ease, border-color .18s ease;white-space:nowrap;}
.btn:hover{transform:translateY(-2px);}
.btn-primaire{background:var(--turquoise);color:#04292A;box-shadow:0 8px 22px rgba(43,189,189,.36);}
.btn-primaire:hover{background:var(--turquoise-fonce);color:#fff;box-shadow:0 14px 32px rgba(43,189,189,.44);}
.btn-fantome{background:transparent;color:var(--encre);border-color:var(--bord);}
.btn-fantome:hover{border-color:var(--turquoise);color:var(--turquoise-fonce);}
/* Sur fond sombre, un bouton « fantôme » bordé de blanc à 28 % disparaissait : on ne le voyait
   qu'au survol, donc jamais au téléphone. Il devient une surface translucide bordée de turquoise —
   lisible d'emblée, sans concurrencer l'appel à l'action principal. */
.section.sombre .btn-fantome,.heros .btn-fantome{color:#fff;border-color:rgba(43,189,189,.55);
  background:rgba(43,189,189,.10);}
.section.sombre .btn-fantome:hover,.heros .btn-fantome:hover{border-color:var(--turquoise);
  background:rgba(43,189,189,.2);color:#fff;}
.btn-blanc{background:#fff;color:var(--encre);}
.btn-blanc:hover{background:var(--turquoise-clair);}
.btn-lg{padding:18px 34px;font-size:17px;}
.btn-sm{padding:11px 20px;font-size:14px;}

/* ── En-tête ──────────────────────────────────────────────────────────────────────────────── */
.entete{position:fixed;inset:0 0 auto 0;z-index:100;padding:18px 0;
  transition:padding .25s ease, background .25s ease, box-shadow .25s ease;}
/* Au défilement, le bandeau se resserre mais GARDE son fond ardoise : le basculement en blanc
   faisait changer le logo, la couleur des liens et celle du bouton d'un coup, et donnait
   l'impression de changer de site en descendant d'un cran. */
.entete.reduit{padding:10px 0;background:rgba(15,23,42,.94);
  backdrop-filter:saturate(180%) blur(14px);box-shadow:0 1px 0 rgba(255,255,255,.08);}
.entete-inner{display:flex;align-items:center;gap:32px;}
/* Le lien qui porte le logo est un ÉLÉMENT FLEX : sans `flex-shrink:0` sur LUI, c'est lui qui se
   comprime quand la barre manque de place — sur mobile, il tombait à 91 px. L'image, capée par le
   `max-width:100%` global, suivait cette largeur tout en gardant ses 34 px de haut : un logo de
   ratio 5,04 affiché en 2,67, c'est-à-dire écrasé. Le `flex-shrink:0` était posé sur l'image, qui
   n'est pas l'élément flex — il ne servait à rien. */
.entete-inner > a:first-child{flex-shrink:0;display:flex;align-items:center;}
.entete .logo{height:34px;width:auto;max-width:none;flex-shrink:0;object-fit:contain;
  transition:height .25s ease;}
.entete.reduit .logo{height:30px;}
.nav{display:flex;gap:28px;margin-left:auto;}
.nav a{font-size:15px;font-weight:600;color:#fff;text-decoration:none;opacity:.9;
  transition:opacity .15s, color .15s;position:relative;}
.nav a::after{content:'';position:absolute;left:0;right:100%;bottom:-6px;height:2px;
  background:var(--turquoise);transition:right .25s ease;}
.nav a:hover::after{right:0;}
.entete-actions{display:flex;gap:10px;align-items:center;flex-shrink:0;}
.burger{display:none;background:none;border:none;color:#fff;font-size:22px;cursor:pointer;padding:6px;}

/* ── Héros ────────────────────────────────────────────────────────────────────────────────── */
.heros{position:relative;background:var(--ardoise);color:#CBD5E1;overflow:hidden;
  padding:170px 0 110px;}
.heros::before{content:'';position:absolute;inset:0;
  background:radial-gradient(900px 500px at 78% 18%, rgba(43,189,189,.22), transparent 62%),
             radial-gradient(700px 420px at 8% 88%, rgba(43,189,189,.12), transparent 60%);
  pointer-events:none;}
.heros-grille{position:absolute;inset:0;opacity:.35;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:64px 64px;}
/* Le visuel prend la main sur le texte : c'est lui qui montre le produit, et il était à l'étroit.
   `overflow:visible` sur la colonne de droite lui permet de déborder un peu de la grille, comme
   sur les captures d'écran de produit qu'on voit ailleurs. */
.heros-inner{position:relative;display:grid;grid-template-columns:.92fr 1.08fr;gap:48px;align-items:center;}
.heros-visuel{width:114%;max-width:none;}
.heros h1{font-size:clamp(38px,5.4vw,64px);font-weight:800;color:#fff;margin-bottom:22px;}
.heros h1 em{font-style:normal;color:var(--turquoise);position:relative;white-space:nowrap;}
.heros-sous{font-size:19px;line-height:1.65;color:#94A3B8;max-width:540px;margin-bottom:34px;}
.heros-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:26px;}
.heros-note{font-size:13.5px;color:#64748B;display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.heros-note i{color:var(--turquoise);}

/* Cadre du visuel produit : l'image fournie s'y insère, un repère s'affiche tant qu'elle manque. */
/* Les visuels sont livrés DÉJÀ détourés, avec leur propre ombre portée et leurs coins arrondis.
   Le cadre que je leur avais ajouté doublait la bordure et écrasait le rendu. */
.cadre-visuel{position:relative;}
.cadre-visuel img{width:100%;height:auto;display:block;}
.visuel-attente{aspect-ratio:16/10;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:10px;color:#475569;text-align:center;padding:26px;
  background:repeating-linear-gradient(45deg,#182235,#182235 12px,#1B2740 12px,#1B2740 24px);}
.visuel-attente i{font-size:28px;color:#334155;}
.visuel-attente b{color:#64748B;font-size:13px;font-weight:700;}
.visuel-attente span{font-size:11.5px;color:#475569;max-width:280px;line-height:1.5;}

/* ── Bandeau de preuve ────────────────────────────────────────────────────────────────────── */
.bandeau-preuve{background:var(--ardoise-2);padding:34px 0;position:relative;z-index:2;}
.preuves{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center;}
.preuve-n{font-family:'Outfit',sans-serif;font-size:38px;font-weight:800;color:#fff;line-height:1;}
.preuve-l{font-size:13px;color:#94A3B8;margin-top:6px;}

/* ── Cartes ───────────────────────────────────────────────────────────────────────────────── */
.grille-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.grille-2{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;align-items:center;}
.carte{background:#fff;border:1px solid var(--bord);border-radius:var(--r16);padding:28px;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;}
.carte:hover{transform:translateY(-6px);box-shadow:var(--ombre-forte);border-color:transparent;}
.carte-ic{width:50px;height:50px;border-radius:14px;background:var(--turquoise-clair);
  display:flex;align-items:center;justify-content:center;color:var(--turquoise-fonce);
  font-size:20px;margin-bottom:18px;}
.carte h3{font-size:19px;font-weight:700;margin-bottom:9px;}
.carte p{font-size:15px;}

/* ── Espaces ──────────────────────────────────────────────────────────────────────────────── */
.espace{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-bottom:96px;}
.espace:last-child{margin-bottom:0;}
.espace.inverse .espace-texte{order:2;}
.espace h3{font-size:clamp(25px,3vw,34px);font-weight:800;margin-bottom:14px;}
.liste-check{list-style:none;padding:0;margin:20px 0 26px;display:flex;flex-direction:column;gap:11px;}
.liste-check li{display:flex;gap:11px;font-size:15.5px;align-items:flex-start;}
.liste-check i{color:var(--turquoise);margin-top:5px;flex-shrink:0;font-size:13px;}

/* ── Tarifs ───────────────────────────────────────────────────────────────────────────────── */
.tarifs{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch;}
.tarif{background:#fff;border:1.5px solid var(--bord);border-radius:var(--r24);padding:34px 28px;
  display:flex;flex-direction:column;transition:transform .22s ease, box-shadow .22s ease;}
.tarif:hover{transform:translateY(-6px);box-shadow:var(--ombre-forte);}
.tarif.vedette{border-color:var(--turquoise);box-shadow:0 18px 44px rgba(43,189,189,.2);position:relative;}
.tarif.vedette::before{content:'Le plus choisi';position:absolute;top:-13px;left:50%;
  transform:translateX(-50%);background:var(--turquoise);color:#04292A;font-size:11.5px;
  font-weight:800;padding:5px 15px;border-radius:100px;letter-spacing:.04em;white-space:nowrap;}
.tarif-nom{font-family:'Outfit',sans-serif;font-size:20px;font-weight:800;color:var(--encre);}
.tarif-prix{font-family:'Outfit',sans-serif;font-size:44px;font-weight:800;color:var(--encre);
  line-height:1;margin:14px 0 4px;}
.tarif-prix small{font-size:15px;font-weight:600;color:var(--doux);}
.tarif-ht{font-size:13px;color:var(--doux);margin-bottom:22px;}
.tarif .liste-check{flex:1;margin-top:0;}
.tarif .btn{width:100%;margin-top:8px;}

/* ── FAQ ──────────────────────────────────────────────────────────────────────────────────── */
.faq{max-width:820px;margin:0 auto;}
.q{border-bottom:1px solid var(--bord);}
.q-btn{width:100%;background:none;border:none;text-align:left;cursor:pointer;
  padding:22px 40px 22px 0;position:relative;font-family:'Outfit',sans-serif;
  font-size:17.5px;font-weight:700;color:var(--encre);line-height:1.4;}
.q-btn::after{content:'+';position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-size:22px;color:var(--turquoise);transition:transform .25s ease;font-weight:400;}
.q.ouvert .q-btn::after{transform:translateY(-50%) rotate(45deg);}
.q-corps{max-height:0;overflow:hidden;transition:max-height .32s ease;}
.q-corps p{padding:0 40px 24px 0;font-size:15.5px;}

/* ── Contact ──────────────────────────────────────────────────────────────────────────────── */
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:720px;margin:0 auto;}
.champ{display:flex;flex-direction:column;gap:7px;}
.champ.large{grid-column:1/-1;}
.champ label{font-size:13px;font-weight:700;color:var(--encre);}
.champ input,.champ textarea{width:100%;font-family:inherit;font-size:15px;color:var(--encre);
  background:#fff;border:1.5px solid var(--bord);border-radius:var(--r12);padding:13px 15px;
  outline:none;transition:border-color .15s, box-shadow .15s;}
.champ input:focus,.champ textarea:focus{border-color:var(--turquoise);
  box-shadow:0 0 0 4px rgba(43,189,189,.14);}
.champ input.err,.champ textarea.err{border-color:#DC2626;}
.champ textarea{resize:vertical;min-height:138px;}
.form-pied{grid-column:1/-1;display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.form-msg{font-size:14px;font-weight:600;}
.form-msg.ok{color:#059669;}
.form-msg.ko{color:#DC2626;}

/* ── Pied de page ─────────────────────────────────────────────────────────────────────────── */
.pied{background:var(--ardoise);color:#94A3B8;padding:54px 0 30px;font-size:14px;}
.pied-haut{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:34px;
  border-bottom:1px solid rgba(255,255,255,.08);}
.pied img{height:32px;margin-bottom:14px;}
.pied h4{color:#fff;font-size:14px;font-weight:700;margin-bottom:14px;letter-spacing:.02em;}
.pied ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px;}
.pied a{color:#94A3B8;text-decoration:none;transition:color .15s;}
.pied a:hover{color:var(--turquoise);}
.pied-bas{padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:12.5px;color:#64748B;}

/* ── Révélation au défilement ─────────────────────────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity .65s cubic-bezier(.2,.7,.3,1), transform .65s cubic-bezier(.2,.7,.3,1);}
.reveal.vu{opacity:1;transform:none;}

/* ── Responsive ───────────────────────────────────────────────────────────────────────────── */
@media (max-width:980px){
  .heros-inner,.grille-2,.espace{grid-template-columns:1fr;gap:38px;}
  .espace.inverse .espace-texte{order:0;}
  .grille-3,.tarifs{grid-template-columns:1fr;}
  .preuves{grid-template-columns:repeat(2,1fr);gap:26px;}
  .pied-haut{grid-template-columns:1fr;gap:28px;}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;
    flex-direction:column;gap:0;padding:8px 24px 18px;box-shadow:var(--ombre);}
  .nav.ouvert{display:flex;}
  .nav a{color:var(--encre);padding:13px 0;border-bottom:1px solid var(--bord);}
  .nav a::after{display:none;}
  .burger{display:block;margin-left:auto;}
  .entete-actions .btn-fantome{display:none;}
  .form{grid-template-columns:1fr;}
  .section{padding:68px 0;}
  .heros{padding:140px 0 80px;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;transition:none;}
  .btn:hover,.carte:hover,.tarif:hover{transform:none;}
  [data-parallaxe]{transform:none !important;}
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   REFONTE ONEPAGE — 15/09/2026
   Sections ajoutées : problème, saisie unique, pour qui, univers de fonctionnalités, bandes
   panoramiques, réassurance, conversion finale.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* Décalage d'ancre : l'en-tête est fixe, une ancre non compensée place le titre SOUS le bandeau. */
section[id]{scroll-margin-top:86px;}

/* ── Bande panoramique pleine largeur ─────────────────────────────────────────────────────────
   Les visuels font 3:1 : les enfermer dans la colonne de contenu les réduirait à une frise. Ils
   occupent donc toute la largeur de la fenêtre, y compris sur un écran plus large que la page. */
.panorama{width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;line-height:0;}
.panorama img{width:100%;height:auto;display:block;}
.panorama.bordee{border-top:1px solid var(--bord);border-bottom:1px solid var(--bord);}

/* ── Héros refondu ────────────────────────────────────────────────────────────────────────── */
.heros-texte{max-width:760px;}
.surtitre{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#5FD6D6;background:rgba(43,189,189,.12);
  border:1px solid rgba(43,189,189,.3);padding:8px 16px;border-radius:100px;margin-bottom:22px;}
.heros-reassurance{display:flex;gap:10px 26px;flex-wrap:wrap;margin-top:28px;
  font-size:13.5px;color:#94A3B8;}
.heros-reassurance span{display:inline-flex;align-items:center;gap:8px;}
.heros-reassurance i{color:var(--turquoise);font-size:12px;}

/* ── Problème : la pile d'outils d'avant ──────────────────────────────────────────────────── */
.outils{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin:34px 0 30px;}
.outil{background:#fff;border:1px solid var(--bord);border-radius:var(--r12);padding:18px 20px;
  display:flex;align-items:flex-start;gap:13px;}
.outil i{font-size:17px;color:var(--doux);margin-top:2px;flex-shrink:0;width:20px;text-align:center;}
.outil b{display:block;font-size:14.5px;color:var(--encre);font-family:'Outfit',sans-serif;}
.outil span{font-size:13px;color:var(--doux);}
.verdict{font-family:'Outfit',sans-serif;font-size:clamp(21px,2.6vw,29px);font-weight:800;
  color:var(--encre);line-height:1.35;}
.verdict em{font-style:normal;color:var(--turquoise-fonce);}

/* ── Une information saisie une fois ──────────────────────────────────────────────────────── */
.saisie{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center;}
.saisie-source{background:var(--turquoise);color:#04292A;border-radius:var(--r16);
  padding:26px 30px;text-align:center;flex-shrink:0;}
.saisie-source b{display:block;font-family:'Outfit',sans-serif;font-size:19px;font-weight:800;}
.saisie-source span{font-size:12.5px;opacity:.75;}
.saisie-vers{display:flex;flex-wrap:wrap;gap:9px;}
.jeton{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--bord);
  border-radius:100px;padding:9px 16px;font-size:14px;font-weight:600;color:var(--encre);}
.jeton i{color:var(--turquoise-fonce);font-size:12px;}
.section.sombre .jeton{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:#fff;}
.section.sombre .outil{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1);}
.section.sombre .outil b{color:#fff;}
.section.sombre .verdict{color:#fff;}

/* ── Pour qui ─────────────────────────────────────────────────────────────────────────────── */
.profils{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;}
.profil{background:#fff;border:1px solid var(--bord);border-radius:var(--r16);padding:26px;
  transition:transform .22s ease, box-shadow .22s ease;}
.profil:hover{transform:translateY(-5px);box-shadow:var(--ombre-forte);}
.profil-ic{width:46px;height:46px;border-radius:13px;background:var(--turquoise-clair);
  display:flex;align-items:center;justify-content:center;color:var(--turquoise-fonce);
  font-size:18px;margin-bottom:16px;}
.profil h3{font-size:17px;font-weight:800;margin-bottom:8px;}
.profil p{font-size:14.5px;}

/* ── Univers de fonctionnalités ───────────────────────────────────────────────────────────── */
.univers{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:22px;}
.u-carte{background:#fff;border:1px solid var(--bord);border-radius:var(--r16);padding:26px;}
.u-carte h3{font-size:17px;font-weight:800;margin-bottom:6px;display:flex;align-items:center;gap:10px;}
.u-carte h3 i{color:var(--turquoise-fonce);font-size:16px;}
.u-carte p{font-size:14px;margin-bottom:14px;}
.u-liste{display:flex;flex-wrap:wrap;gap:7px;list-style:none;padding:0;margin:0;}
.u-liste li{font-size:13px;font-weight:600;color:var(--corps);background:var(--fond);
  border-radius:100px;padding:6px 13px;}

/* ── Réassurance ──────────────────────────────────────────────────────────────────────────── */
.rassure{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;}
.r-carte{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r16);padding:24px;}
.r-carte h3{font-size:16.5px;font-weight:800;margin-bottom:8px;display:flex;align-items:center;gap:10px;}
.r-carte h3 i{color:var(--turquoise);font-size:15px;}
.r-carte p{font-size:14px;color:#94A3B8;}

/* ── Chiffres ─────────────────────────────────────────────────────────────────────────────── */
.chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:24px;text-align:center;}

/* ── Conversion finale ────────────────────────────────────────────────────────────────────── */
.final{text-align:center;max-width:780px;margin:0 auto;}
.final h2{font-size:clamp(27px,3.6vw,42px);font-weight:800;margin-bottom:18px;}
.final p{font-size:17.5px;color:#94A3B8;margin-bottom:30px;}

@media (max-width:980px){
  .saisie{grid-template-columns:1fr;gap:24px;}
  section[id]{scroll-margin-top:72px;}
}

/* ── Corrections de cascade issues de la refonte ───────────────────────────────────────────────
   Les sections « espace » portent désormais un h2 (et non un h3) : le titre de section passe
   avant le titre de bloc dans la hiérarchie du document, une fois la page devenue la seule page
   du site. La règle de taille les vise donc tous les deux. */
.espace h2,.espace h3{font-size:clamp(25px,3vw,34px);font-weight:800;margin-bottom:14px;}

/* Le formulaire de contact vit maintenant dans une section sombre : ses étiquettes, encrées en
   ardoise, y devenaient illisibles. */
.section.sombre .champ label{color:#E2E8F0;}

/* L'accent du H1 n'est plus un mot isolé mais une proposition entière : le `white-space:nowrap`
   hérité du premier héros la poussait hors de l'écran au téléphone, sans barre de défilement pour
   la rattraper (`overflow-x:hidden` sur le corps). Elle se coupe donc normalement. */
.heros h1 em{white-space:normal;}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   MOUVEMENT — 15/09/2026

   La première version bougeait si peu qu'on ne la voyait pas : la trame du héros se déplaçait de
   quatre pixels, et les visuels, protégés par une marge de sécurité trop étroite, ne recevaient
   jamais leur transformation. Une page de vente qui ne réagit pas au défilement paraît figée.

   Tout ce qui suit est piloté par UNE seule boucle `requestAnimationFrame` qui lit `scrollY` une
   fois par image (cf. `surImage()` dans la page). Chaque effet s'annule sous
   `prefers-reduced-motion` : le mouvement n'est pas neutre pour qui souffre de vertiges.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Barre de progression de lecture ──────────────────────────────────────────────────────────
   Trois pixels en haut de l'écran qui disent où l'on en est. Sur une page unique et longue, c'est
   la seule indication de profondeur dont dispose le visiteur. */
.progression{position:fixed;top:0;left:0;right:0;height:3px;z-index:120;
  background:linear-gradient(90deg,var(--turquoise),#5FD6D6);
  transform:scaleX(0);transform-origin:0 50%;will-change:transform;}

/* ── Révélation au défilement ─────────────────────────────────────────────────────────────────
   Plus franche qu'avant : 34 px de montée au lieu de 26, et une courbe qui décélère longuement.
   Un mouvement trop discret se lit comme un défaut de chargement, pas comme une intention. */
.reveal{opacity:0;transform:translate3d(0,34px,0);
  transition:opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);}
.reveal.vu{opacity:1;transform:none;}

/* Cascade : les enfants entrent l'un après l'autre. `--rang` est posé par la page, une fois, à
   l'initialisation — pas à chaque image. */
.cascade > *{opacity:0;transform:translate3d(0,30px,0);
  transition:opacity .62s cubic-bezier(.22,.61,.36,1), transform .62s cubic-bezier(.22,.61,.36,1);
  transition-delay:calc(var(--rang,0) * 75ms);}
.cascade.vu > *{opacity:1;transform:none;}

/* ── Entrée du héros ──────────────────────────────────────────────────────────────────────────
   Au chargement, le bloc se construit ligne à ligne. C'est la seule animation de la page qui ne
   dépende pas du défilement : elle se joue avant que le visiteur ait touché sa molette. */
@keyframes fk-monte{to{opacity:1;transform:none;}}
.heros-texte > *{opacity:0;transform:translate3d(0,28px,0);
  animation:fk-monte .85s cubic-bezier(.22,.61,.36,1) forwards;}
.heros-texte > *:nth-child(1){animation-delay:.08s;}
.heros-texte > *:nth-child(2){animation-delay:.18s;}
.heros-texte > *:nth-child(3){animation-delay:.30s;}
.heros-texte > *:nth-child(4){animation-delay:.42s;}
.heros-texte > *:nth-child(5){animation-delay:.54s;}

/* Le contenu du héros s'efface en montant quand on le quitte : le défilement devient une sortie,
   pas un simple glissement. Piloté par `--sortie` (0 → 1). */
.heros .contenu{will-change:transform,opacity;
  transform:translate3d(0,calc(var(--sortie,0) * -60px),0);
  opacity:calc(1 - var(--sortie,0) * .85);}

/* ── Bandes panoramiques : dévoilement ────────────────────────────────────────────────────────
   Ces visuels portent du texte jusqu'au bord haut (« UN CLUB PLUS FORT ») : les recadrer pour une
   parallaxe classique en couperait une partie. Ils sont donc DÉVOILÉS — un volet qui s'ouvre du
   centre vers les bords, avec une échelle qui revient exactement à 1. Au repos, rien n'est rogné.
   `--p` va de 0 (la bande entre par le bas) à 1 (elle est installée). */
.panorama img{will-change:clip-path,transform;
  clip-path:inset(calc((1 - var(--p,1)) * 11%) 0);
  transform:scale(calc(1 + (1 - var(--p,1)) * .06));}

/* ── Cadres visuels : la vraie parallaxe ──────────────────────────────────────────────────────
   Le cadre entier glisse à contre-sens du texte qui l'accompagne. Rien n'est rogné puisque c'est
   le bloc qui bouge, pas l'image dans son cadre. L'amplitude est passée de 0,04 à 0,12 : sur la
   hauteur d'un écran, cela fait une centaine de pixels d'écart avec la colonne de texte. */
.cadre-visuel{will-change:transform;}

/* ── Ruban de modules ─────────────────────────────────────────────────────────────────────────
   Bande qui défile lentement sous le héros. Elle se met en pause au survol, pour qu'on puisse
   lire ce qui passe. La liste est écrite deux fois dans la page : l'animation translate d'exactement
   la moitié de la piste, ce qui rend la boucle invisible. */
.ruban{background:var(--fond);border-top:1px solid var(--bord);border-bottom:1px solid var(--bord);
  overflow:hidden;padding:15px 0;width:100vw;margin-left:calc(50% - 50vw);}
.ruban-piste{display:flex;width:max-content;animation:fk-ruban 46s linear infinite;}
.ruban:hover .ruban-piste{animation-play-state:paused;}
.ruban span{display:inline-flex;align-items:center;gap:12px;padding:0 20px;
  font-family:'Outfit',sans-serif;font-size:14px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--doux);white-space:nowrap;}
.ruban span::after{content:'';width:5px;height:5px;border-radius:50%;background:var(--turquoise);}
@keyframes fk-ruban{from{transform:translate3d(0,0,0);} to{transform:translate3d(-50%,0,0);}}

/* ── Jetons de la saisie unique ───────────────────────────────────────────────────────────────
   Ils s'allument un par un à mesure que la section traverse l'écran : la démonstration se fait
   sous les yeux du visiteur au lieu d'être affirmée en une phrase. */
.jeton{opacity:.25;transform:translate3d(0,10px,0);
  transition:opacity .45s ease, transform .45s ease, border-color .45s ease, background .45s ease;}
.jeton.allume{opacity:1;transform:none;}
.section.sombre .jeton.allume{border-color:rgba(43,189,189,.45);background:rgba(43,189,189,.12);}
/* La carte source bat doucement tant que la section est à l'écran. */
.saisie-source{animation:fk-souffle 3.4s ease-in-out infinite;}
@keyframes fk-souffle{
  0%,100%{box-shadow:0 0 0 0 rgba(43,189,189,.36);}
  50%{box-shadow:0 0 0 16px rgba(43,189,189,0);}
}

/* ── Survols ──────────────────────────────────────────────────────────────────────────────────
   Tout ce qui ressemble à une carte réagit au pointeur. Sans cela, une grille de six blocs a l'air
   d'une image plate. */
.u-carte,.outil,.r-carte{transition:transform .22s ease, box-shadow .22s ease,
  border-color .22s ease, background .22s ease;}
.u-carte:hover{transform:translateY(-6px);box-shadow:var(--ombre-forte);border-color:var(--turquoise);}
.outil:hover{transform:translateY(-4px);box-shadow:var(--ombre);border-color:var(--turquoise);}
.section.sombre .outil:hover{background:rgba(255,255,255,.08);border-color:rgba(43,189,189,.4);}
.r-carte:hover{transform:translateY(-6px);background:rgba(255,255,255,.09);
  border-color:rgba(43,189,189,.45);}
.profil-ic{transition:transform .25s ease, background .25s ease;}
.profil:hover .profil-ic{transform:scale(1.08) rotate(-4deg);background:var(--turquoise);color:#fff;}
/* La bande panoramique répond au pointeur elle aussi, très légèrement. */
.panorama{transition:none;}
.q-btn:hover{color:var(--turquoise-fonce);}

/* ── Chiffres ─────────────────────────────────────────────────────────────────────────────── */
.preuve-n{transition:color .3s ease;}

/* ── Mouvement réduit ─────────────────────────────────────────────────────────────────────────
   Un seul bloc qui désarme TOUT ce qui précède. Il doit rester le dernier de la feuille : ajouter
   un effet après lui, c'est le rendre inévitable pour qui a demandé le contraire. */
@media (prefers-reduced-motion:reduce){
  .reveal,.cascade > *{opacity:1 !important;transform:none !important;transition:none !important;}
  .heros-texte > *{opacity:1;transform:none;animation:none;}
  .heros .contenu{transform:none;opacity:1;}
  .panorama img{clip-path:none;transform:none;}
  .ruban-piste{animation:none;}
  .jeton{opacity:1;transform:none;}
  .saisie-source{animation:none;}
  .u-carte:hover,.outil:hover,.r-carte:hover,.profil:hover .profil-ic{transform:none;}
  .progression{display:none;}
  [data-parallaxe]{transform:none !important;}
}