/* ═══════════════════════════════════════════════════════════════
   CRÉDIT MUTUEL NAFA — Maquette v2
   Direction : le système des affiches de campagne.
   Bleu profond dégradé, jaune vif, illustration vectorielle plate,
   bulles et pastilles, géométrique lourde.
   Couleurs relevées sur NAFA_Affiche_Credit_Instantane_v2.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --navy-900:#081538;
  --navy-800:#0C1F4F;
  --blue-700:#0B3977;      /* bleu dominant des affiches */
  --blue-600:#0F4A96;
  --blue-500:#0A5FB0;      /* bleu charte RVB 10/95/176 */
  --yellow:#FFD21F;        /* jaune campagne */
  --yellow-600:#F0B400;
  --ink:#0B1B3A;           /* texte sur jaune et blanc */
  --white:#fff;
  --soft:rgba(255,255,255,.86);
  --softer:rgba(255,255,255,.72);

  --f:'Plus Jakarta Sans',system-ui,sans-serif;   /* police des visuels */
  --rail:5vw;
  /* Largeur utile commune — texte ET illustration vivent dedans,
     le couple est donc centré dans l'écran, comme sur l'affiche. */
  --shell:min(1320px, 92vw);
  --gut:calc((100vw - var(--shell)) / 2);
  --disc:min(calc(var(--shell) * .46), 72vh);          /* diamètre du disque */
  --discX:calc(var(--gut) + var(--shell) * .54);       /* bord gauche du disque */
  --lift:0px;        /* les deux blocs du héros partagent le centre exact de l'écran */
  --e:cubic-bezier(.19,1,.22,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ -webkit-text-size-adjust:100% }
body{
  background:var(--navy-900); color:var(--white);
  font-family:var(--f); font-size:17px; line-height:1.6; font-weight:500;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block }

/* Surfaces fournies par le navigateur : elles portent aussi la charte. */
::selection{ background:var(--yellow); color:var(--ink) }
:root{ scrollbar-color:var(--yellow) var(--navy-900); scrollbar-width:thin }
::-webkit-scrollbar{ width:10px; height:10px }
::-webkit-scrollbar-track{ background:var(--navy-900) }
::-webkit-scrollbar-thumb{ background:var(--blue-600); border-radius:10px;
  border:2px solid var(--navy-900) }
::-webkit-scrollbar-thumb:hover{ background:var(--yellow) }
input,textarea{ caret-color:var(--yellow) }
.cond b,.cond-list b,.stat,.faq-count,.tem-count{ font-variant-numeric:tabular-nums }
a{ color:inherit; text-decoration:none }
em{ font-style:normal; color:var(--yellow) }

/* ─────────────────────────── LOADER ── */
#loader{
  position:fixed; inset:0; z-index:9000; background:var(--navy-900);
  display:grid; place-items:center; gap:26px; grid-auto-flow:row;
  transition:opacity .8s var(--e), visibility .8s;
}
#loader.off{ opacity:0; visibility:hidden }
.loader-mark{ width:84px; border-radius:50%; background:#fff; padding:4px; animation:bob 2.4s var(--e) infinite }
@keyframes bob{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.08) } }
.loader-track{ width:min(240px,55vw); height:4px; border-radius:4px; background:rgba(255,255,255,.14); overflow:hidden }
#loader-bar{ display:block; height:100%; width:0; background:var(--yellow); transition:width .3s linear }

/* ─────────────────────────── EN-TÊTE ── */
.hdr{
  position:fixed; inset:0 0 auto; z-index:200;
  display:flex; align-items:center; gap:22px; padding:16px var(--rail);
  transition:background .45s var(--e), padding .45s var(--e);
}
/* `backdrop-filter` force le compositeur a relire et reflouter la bande de
   l'en-tete a chaque image, et dessous TOUT bouge. Actif sur 98,5 % de la
   page. L'opacite passe de .82 a .95 : le fond devient plus dense, donc le
   contraste du texte blanc augmente. */
.hdr.stuck{ background:rgba(8,21,56,.95); padding:10px var(--rail) }
.brand-chip{ display:block; width:42px; height:42px; border-radius:50%; background:#fff; padding:2px }
.brand-chip img{ border-radius:50% }
.nav{ display:flex; gap:26px; margin-left:auto }
.nav a{
  position:relative; padding:7px 1px;
  font-size:.82rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--softer); transition:color .3s var(--e);
}
/* Soulignement qui se trace depuis la gauche au survol,
   et se rétracte vers la droite en sortant. */
.nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px; border-radius:2px;
  background:var(--yellow); transform:scaleX(0); transform-origin:right;
  transition:transform .42s var(--e);
}
.nav a:hover{ color:#fff }
.nav a:hover::after{ transform:scaleX(1); transform-origin:left }

/* Rubrique en cours de lecture */
.nav a.on{ color:var(--yellow) }
.nav a.on::after{ transform:scaleX(1); transform-origin:left }
.nav a.on::before{
  content:''; position:absolute; left:50%; top:-5px; width:4px; height:4px; margin-left:-2px;
  border-radius:50%; background:var(--yellow);
  animation:navdot .5s var(--e);
}
@keyframes navdot{ from{ transform:scale(0); opacity:0 } to{ transform:scale(1); opacity:1 } }

/* Focus clavier — visible partout, il était absent */
:where(a, button, input, select, textarea, summary):focus-visible{
  outline:2px solid var(--yellow); outline-offset:3px; border-radius:8px;
}
.nav a:focus-visible{ color:#fff }
.nav a:focus-visible::after{ transform:scaleX(1); transform-origin:left }

/* Jauge de progression de lecture, sous l'en-tête */
.hdr-prog{
  position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:linear-gradient(90deg, var(--yellow), #8FD3FF);
  transform:scaleX(0); transform-origin:left;
  opacity:0; transition:opacity .45s var(--e); pointer-events:none;
}
.hdr.stuck .hdr-prog{ opacity:1 }

/* ── Menu mobile : panneau plein écran, typo en grand, bleu NAFA ──
   Sous 1024 px la nav était simplement masquée : aucun accès au menu.
   Un déroulant classique aurait cassé le parti pris épuré. */
/* Barres positionnées en absolu : la croix se referme exactement sur
   le même axe, quelles que soient les métriques du bouton. */
.burger{
  display:none; margin-left:auto; width:46px; height:46px; padding:0;
  border:0; background:transparent; cursor:pointer; position:relative;
}
.burger span{
  position:absolute; left:11px; width:24px; height:2.5px; border-radius:2px;
  background:#fff; transition:top .3s var(--e), transform .35s var(--e), opacity .2s;
}
.burger span:nth-child(1){ top:15px }
.burger span:nth-child(2){ top:22px }
.burger span:nth-child(3){ top:29px }
body.menu-open .burger span:nth-child(1){ top:22px; transform:rotate(45deg) }
body.menu-open .burger span:nth-child(2){ opacity:0 }
body.menu-open .burger span:nth-child(3){ top:22px; transform:rotate(-45deg) }

.menu{
  position:fixed; inset:0; z-index:190;
  background:
    radial-gradient(80% 60% at 70% 30%, var(--blue-600), var(--blue-700) 55%, var(--navy-800) 100%);
  display:flex; flex-direction:column; justify-content:center; gap:2px;
  padding:0 var(--rail);
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity .4s var(--e), visibility .4s, transform .55s var(--e);
}
.menu::before{                       /* texture pointillée des affiches */
  content:''; position:absolute; inset:0; opacity:.45; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.14) 1.6px, transparent 1.7px);
  background-size:34px 34px;
}
body.menu-open .menu{ opacity:1; visibility:visible; transform:none }
body.menu-open{ overflow:hidden }
.menu a{
  position:relative; font-size:clamp(1.9rem,9vw,2.7rem); font-weight:800;
  letter-spacing:-.025em; line-height:1.25; padding:9px 0; color:#fff;
  opacity:0; transform:translateY(16px);
  transition:opacity .45s var(--e), transform .45s var(--e), color .25s;
}
body.menu-open .menu a{ opacity:1; transform:none }
body.menu-open .menu a:nth-child(1){ transition-delay:.10s }
body.menu-open .menu a:nth-child(2){ transition-delay:.16s }
body.menu-open .menu a:nth-child(3){ transition-delay:.22s }
body.menu-open .menu a:nth-child(4){ transition-delay:.28s }
body.menu-open .menu a:nth-child(5){ transition-delay:.28s }
body.menu-open .menu a:nth-child(6){ transition-delay:.34s }
body.menu-open .menu a:nth-child(7){ transition-delay:.40s }
body.menu-open .menu a:nth-child(8){ transition-delay:.48s }
.menu a:active,.menu a.on{ color:var(--yellow) }
.menu a.on::after{
  content:''; display:inline-block; width:10px; height:10px; margin-left:14px;
  border-radius:50%; background:var(--yellow); vertical-align:middle;
}
.menu .menu-cta{
  align-self:flex-start; margin-top:30px; color:var(--ink);
  font-size:.82rem; font-weight:800; letter-spacing:.01em; line-height:1; padding:0 10px 0 28px;
}

/* ─────────────────────────── PASTILLES ── */
/* `transform` retire de la transition : la pastille est enfant DIRECT de
   .act-in dans 7 actes, GSAP lui ecrit donc un transform a chaque image
   pendant l'entree, et chaque ecriture relancait une transition de 0,35 s.
   Mesure : 62 px de retard, elle n'atteignait jamais sa position. Le relief
   au survol passe sur `translate`, que GSAP ne touche pas. */
.pill{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  font-family:var(--f); font-size:.82rem; font-weight:800; letter-spacing:.01em;
  line-height:1; min-height:56px; padding:0 10px 0 28px;
  border-radius:999px; border:2px solid transparent; white-space:nowrap;
  transition:translate .35s var(--e), background .35s, color .35s, border-color .35s;
}
.pill.sm{ min-height:48px; font-size:.82rem; padding:0 8px 0 22px }
.pill-arrow{
  display:grid; place-items:center; width:38px; height:38px; flex:none;
  border-radius:50%; background:var(--ink); color:var(--yellow);
  font-style:normal; font-size:1rem; transition:transform .35s var(--e);
}
.pill.sm .pill-arrow{ width:32px; height:32px; font-size:.9rem }
.pill-yellow{ background:var(--yellow); color:var(--ink) }
.pill-yellow:hover{ translate:0 -3px }
.pill-yellow:hover .pill-arrow{ transform:translateX(3px) }
.pill-ghost{ border-color:rgba(255,255,255,.38); color:#fff; padding:0 28px }
.pill-ghost:hover{ translate:0 -3px; background:rgba(255,255,255,.1) }
.hdr-cta{ min-height:44px; font-size:.81rem; padding:0 6px 0 20px }
.hdr-cta .pill-arrow{ width:32px; height:32px; font-size:.85rem }

/* ─────────────────────── SCÈNE VECTORIELLE ── */
#stage{ position:fixed; inset:0; z-index:10; overflow:hidden; pointer-events:none }
#stage::before{                                   /* dégradé bleu des affiches */
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(90% 70% at 72% 38%, var(--blue-600) 0%, var(--blue-700) 42%, var(--navy-800) 72%, var(--navy-900) 100%);
}
.dots-tex{                                        /* texture pointillée */
  position:absolute; inset:0; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.14) 1.6px, transparent 1.7px);
  background-size:34px 34px;
}
.glow{
  position:absolute; inset:0;
  background:radial-gradient(42% 42% at 50% 50%, rgba(255,210,31,.14), transparent 70%);
  opacity:0;
}
.prop{ position:absolute; will-change:transform,opacity; opacity:0 }
.motif{ position:absolute; will-change:transform,opacity; opacity:0; pointer-events:none }

/* Anneau pâle derrière le disque — présent sur l'affiche */
/* Anneau pâle concentrique au disque — présent sur l'affiche */
.ring{
  --rw:calc(var(--disc) * 1.26);
  width:var(--rw); aspect-ratio:1; border-radius:50%;
  border:2px solid rgba(175,205,245,.18);
  left:calc(var(--discX) + var(--disc) / 2 - var(--rw) / 2);
  top:50%; margin-top:calc(var(--rw) / -2 - var(--lift));
}
/* Lignes de vitesse à gauche du disque */
.streaks{
  left:calc(var(--discX) - var(--shell) * .14); top:calc(50% - var(--lift) - 14vh);
  display:flex; flex-direction:column; gap:clamp(18px,3vh,34px);
}
.streaks i{ display:block; height:7px; border-radius:7px; background:rgba(190,215,245,.16) }
.streaks i:nth-child(1){ width:clamp(70px,9vw,150px) }
.streaks i:nth-child(2){ width:clamp(45px,6vw,100px) }
.streaks i:nth-child(3){ width:clamp(90px,11vw,185px) }
.streaks i:nth-child(4){ width:clamp(55px,7vw,120px) }
/* Courbe pointillée en bas à droite */
.curve{ width:calc(var(--shell) * .46); right:-4%; bottom:4% }
/* Halo sombre légèrement décalé derrière le disque : il le décolle du fond */
.disc-shadow{
  width:calc(var(--disc) * 1.04); aspect-ratio:1; border-radius:50%;
  left:calc(var(--discX) + var(--disc) * .03);
  top:50%; margin-top:calc(var(--disc) * 1.04 / -2 - var(--lift) + 18px);
  background:radial-gradient(closest-side, rgba(3,14,38,.55), rgba(3,14,38,0) 74%);
}


.orb{
  width:62vmin; height:62vmin; border-radius:50%;
  /* Un aplat jaune a faible opacite virait au kaki sur le bleu.
     En degrade radial flou, il redevient un halo chaud. */
  /* Le flou de 6 px etait invisible : la rampe du degrade fait deja 34 %
     du rayon. On la redouble d'un palier — meme bord doux, sans filtre a
     reappliquer a chaque image. Mesure A/B : -6 % de temps d'image avec
     l'en-tete, pour 0,7/255 d'ecart visuel. */
  background:radial-gradient(circle,
    rgba(255,210,31,.95) 26%, rgba(255,210,31,.44) 50%, rgba(255,210,31,0) 76%);
  left:50%; top:50%; margin:-31vmin 0 0 -31vmin;
  box-shadow:0 0 0 3vmin rgba(255,255,255,.05);
}
/* Composition du héros : disque + personnage montent du bas de l'écran.
   Aucun transform en CSS — GSAP pilote seul xPercent/yPercent. */
/* Les deux blocs partagent le même centre vertical (50 % − --lift),
   comme sur l'affiche : colonne de texte à gauche, disque à droite. */
/* Le disque jaune est désormais un élément à part : la nouvelle
   illustration est une silhouette haute, plus un disque peint.
   Sa boîte reprend EXACTEMENT celle de la v2, donc rien ne bouge. */
.hero-disc{
  width:var(--disc); aspect-ratio:1; border-radius:50%;
  background:var(--yellow); left:var(--discX);
  top:50%; margin-top:calc(var(--disc) / -2 - var(--lift));
}
/* La personne se place DANS cette boîte, ajustée par la hauteur et
   calée en bas : elle déborde légèrement du disque, comme sur l'affiche. */
/* Agrandie : la silhouette est etroite, `contain` l'ajustait par la
   hauteur et elle paraissait maigre dans le disque. 1.14 → 1.34 lui rend
   ~17 % de largeur, et elle deborde legerement du cercle comme sur l'affiche. */
/* --hup : la silhouette est remontée d'un cheveu pour que son socle
   ne pende pas trop bas sous le cercle. */
.heroine{
  --hup:calc(var(--disc) * .05);
  width:var(--disc); height:calc(var(--disc) * 1.34);
  left:var(--discX); right:auto;
  top:50%; bottom:auto; margin-top:calc(var(--disc) * 1.34 / -2 - var(--lift) - var(--hup));
  object-fit:contain; object-position:center bottom;
}
/* Chrono et arc à droite, comme sur l'affiche : ils ne passent plus
   derrière le bloc de texte centré. */
.arc{ width:calc(var(--shell) * .30); left:calc(var(--discX) - var(--shell) * .02); top:calc(50% - var(--lift) - 30vh) }
.chrono{ width:calc(var(--shell) * .11); left:calc(var(--discX) + var(--disc) * .80); top:calc(50% - var(--lift) - 34vh) }
.pin{ width:20vmin; left:50%; top:50%; margin:-14vmin 0 0 -10vmin }
.coins{ width:30vmin; left:50%; top:50%; margin:-10vmin 0 0 -15vmin }
/* Centre a 50 %, cette liaison s'etendait de x=459 a x=981 alors que la
   colonne de texte de `.align-right` commence a 52vw = 748 px : 233 px de
   recouvrement, et son cercle jaune plein passait SOUS les glyphes blancs.
   Mesure : 1,37:1, avec 116 px de coeur de glyphe sous 3:1. On la cale
   dans la moitie gauche, qui est libre sur cet acte. */
.link{ width:44vmin; left:var(--gut); top:50%; margin:-8vmin 0 0 2vw }
.mark{ width:min(30vmin,40vh); height:auto; left:50%; top:50%; margin:-15vmin 0 0 -15vmin }
.mark img{ width:100%; border-radius:50%; background:#fff; padding:3%; }
.steps{ width:min(46vmin,58vh); height:auto; left:50%; top:50%; margin:-7vmin 0 0 -23vmin }
.quote{ width:min(26vmin,34vh); height:auto; left:50%; top:50%; margin:-10vmin 0 0 -13vmin }
.book{ width:min(34vmin,44vh); height:auto; left:50%; top:50%; margin:-12vmin 0 0 -17vmin }
.phone{ width:min(20vmin,34vh); height:auto; left:50%; top:50%; margin:-17vmin 0 0 -10vmin }
/* Acte final : l'illustration des billets prend la place exacte de la
   personne du héros — même colonne, même centre. Seule l'image change. */
/* L'illustration est large (bras écartés) : contenue à 78 % du disque,
   elle tient dedans au lieu de déborder de part et d'autre. */
.ctafemme{
  --cw:calc(var(--disc) * .78);
  width:var(--cw); height:var(--cw);
  left:calc(var(--discX) + (var(--disc) - var(--cw)) / 2); right:auto;
  top:50%; margin-top:calc(var(--cw) / -2 - var(--lift) + var(--disc) * .06);
  object-fit:contain; object-position:center bottom;
}
.membre{ width:min(24vmin,36vh); height:auto; left:calc(var(--gut) + var(--shell) * .01); bottom:6% }
.conseiller{ width:min(24vmin,36vh); height:auto; left:calc(var(--gut) + var(--shell) * .79); bottom:6% }


/* ─────────────────────────── BANDEAU ── */
.mq{ position:fixed; top:20%; left:0; right:0; z-index:16; opacity:0; overflow:hidden; white-space:nowrap; pointer-events:none }
.mq-low{ top:auto; bottom:12% }
.mq-txt{
  display:inline-block; font-weight:800; font-size:13vw; line-height:1;
  letter-spacing:-.02em; text-transform:uppercase; color:rgba(255,255,255,.06);
}
.mq-txt.ghost{ color:transparent; -webkit-text-stroke:1.5px rgba(255,210,31,.26) }

/* ─────────────────────────── ACTES ── */
/* overflow-x:clip borne les translations horizontales des actes hors écran
   (x:±90 des entrées GSAP) sans créer de conteneur de défilement. */
/* La hauteur est écrite par le JS (poids des actes). Pas de valeur ici :
   une déclaration CSS serait silencieusement écrasée. */
#acts{ position:relative; z-index:40; overflow-x:clip }
/* Les actes sont FIXÉS au centre de l'écran : ils ne défilent pas, ils se
   succèdent. Avant, chaque acte était calé sur le MILIEU de sa plage et
   démarrait donc très bas — l'acte FAQ (20 % de course) commençait à
   1500 px sous la fenêtre, d'où la première question « qui n'apparaît pas ».
   Le mouvement vient désormais du décor, des motifs et des bandeaux. */
.act{ position:fixed; top:50%; left:0; right:0; transform:translateY(-50%);
      opacity:0; visibility:hidden }
/* Promu sur .live SEULEMENT : promouvoir les 14 actes couterait 14 couches
   plein ecran. Mesure : +1,7 % APRES retrait des flous, -6 % avant. */
.act.live{ visibility:visible; will-change:opacity }
.align-left { padding-left:var(--rail); padding-right:52vw }
.align-right{ padding-left:52vw; padding-right:var(--rail); text-align:right }
.align-left .act-in, .align-right .act-in{ max-width:43vw }
.act-in.c{ text-align:center; max-width:980px; margin:0 auto }
/* HÉROS DESKTOP — deux colonnes, reprise de l'affiche Crédit instantané :
   texte à gauche, illustration à droite. Les deux colonnes sont disjointes,
   le nombre ne peut donc plus passer sous le disque jaune. */
/* Le héros ET l'appel final partagent la même grille : colonne de texte à
   gauche, disque à droite, les deux centrés sur le même axe vertical. */
.act-hero, .act-cta, .act-app{ padding-left:var(--gut); padding-right:calc(var(--gut) + var(--shell) * .48) }
.act-hero .act-in, .act-cta .act-in, .act-app .act-in{ max-width:calc(var(--shell) * .50); margin:0; text-align:left }
.act-hero .l3, .act-hero .acts-row, .act-cta .acts-row{ justify-content:flex-start }

.eyebrow{
  display:block; font-size:.78rem; font-weight:800; letter-spacing:.18em;
  text-transform:uppercase; color:var(--yellow); margin-bottom:18px;
}
.eyebrow.c{ text-align:center }
.kicker{ font-size:clamp(1.05rem,2vw,1.6rem); font-weight:800; color:var(--yellow); margin-bottom:14px }

.h-hero{ font-weight:800; line-height:.95; letter-spacing:-.03em }
.h-hero .l{ display:block; overflow:hidden }
.l1{ font-size:clamp(1.6rem,3.4vw,2.9rem) }
/* Le nombre reste jaune SUR LE BLEU. Avant, il débordait sous le disque
   jaune de l'illustration : jaune sur jaune, le « 0 » disparaissait. */
.big{ font-size:min(9vw,10rem,16vh); color:var(--yellow); letter-spacing:-.045em; display:inline-block }
.l3{ display:flex; align-items:center; gap:16px; margin-top:6px; flex-wrap:wrap }
.align-right .l3{ justify-content:flex-end }
.chip{
  font-style:normal; background:#fff; color:var(--ink);
  font-size:clamp(1.1rem,2.3vw,2rem); font-weight:800;
  padding:.18em .6em; border-radius:.36em; display:inline-block;
}
.thin{ font-size:clamp(1.1rem,2.1vw,1.9rem); font-weight:700; color:#fff }

.h-act{ font-weight:800; font-size:clamp(2.1rem,4.6vw,4.4rem); line-height:1.02; letter-spacing:-.03em }
.h-act.xl{ font-size:min(5.2vw, 4.8rem, 9vh) }
.p-act{ margin-top:20px; max-width:30rem; color:var(--soft); font-weight:500 }
.align-right .p-act{ margin-left:auto }
.act-in.c .p-act{ margin-inline:auto }
.acts-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:30px }
/* Un bouton seul, enfant direct du bloc de texte, recoit la meme respiration
   qu'une rangee de boutons : sans cela il collait au paragraphe au-dessus. */
.act-in > .pill{ margin-top:30px }
.align-right .acts-row{ justify-content:flex-end }
.acts-row.c{ justify-content:center }
.fine{ margin-top:20px; font-size:.76rem; color:var(--softer) }
.fine.c{ text-align:center; margin-top:34px }

.scroll-hint{ position:absolute; left:var(--rail); bottom:-12vh; display:flex; align-items:center; gap:12px }
.scroll-hint i{ display:block; width:46px; height:2px; background:var(--yellow); transform-origin:left }
/* `visibility:hidden` n'arrete PAS une animation CSS, seul `display:none`
   le fait : le balayage tournait sur les 12 400 px de la page alors que le
   repere n'est lisible que sur les 554 premiers. Mesure : +6 % de budget. */
.act.live .scroll-hint i{ animation:sweep 2.2s var(--e) infinite }
@keyframes sweep{ 0%{ transform:scaleX(0) } 55%{ transform:scaleX(1) } 100%{ transform:scaleX(0); transform-origin:right } }
.scroll-hint span{ font-size:.74rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--softer) }

/* ─────────────────────────── CHIFFRES ── */
.act-in.wide{ max-width:1200px; margin:0 auto }

/* ─────────────────────────── FAQ IMMERSIVE ── */
.act-faq{ padding:0 var(--rail); text-align:center }
.faq-head{ display:flex; align-items:baseline; justify-content:center; gap:18px; margin-bottom:34px }
.faq-count{ font-size:.80rem; font-weight:800; letter-spacing:.18em; color:var(--softer) }
.faq-count b{ color:var(--yellow) }
.faq-stage{ position:relative; max-width:860px; margin:0 auto; min-height:min(46vh,340px) }
.qa{ position:absolute; inset:0; display:flex; flex-direction:column; gap:20px; opacity:0 }
.bubble{
  position:relative; padding:20px 26px; border-radius:22px;
  font-weight:800; line-height:1.35; text-align:left; max-width:82%;
}
.bq{ background:#fff; color:var(--ink); align-self:flex-start; font-size:clamp(1rem,2vw,1.6rem) }
.bq::after{ content:''; position:absolute; left:26px; bottom:-14px; border:9px solid transparent; border-top-color:#fff; border-right-width:16px }
.ba{ background:var(--yellow); color:var(--ink); align-self:flex-end; font-size:clamp(.92rem,1.5vw,1.18rem); font-weight:700 }
.ba::after{ content:''; position:absolute; right:26px; bottom:-14px; border:9px solid transparent; border-top-color:var(--yellow); border-left-width:16px }

/* ─── Listes des nouveaux actes (valeurs, étapes, articles) ─── */
.valeurs,.etapes,.articles{ list-style:none; margin-top:24px; display:grid; gap:0 }
.valeurs li,.etapes li,.articles li{
  padding:14px 0; border-top:1px solid rgba(255,255,255,.18);
  font-size:.92rem; color:var(--soft);
}
.valeurs li:last-child,.etapes li:last-child,.articles li:last-child{ border-bottom:1px solid rgba(255,255,255,.18) }
.valeurs b,.etapes b,.articles b{
  display:block; font-size:.72rem; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--yellow); margin-bottom:3px;
}
.etapes,.articles{ counter-reset:n }
.etapes li,.articles li{ counter-increment:n; position:relative; padding-left:42px }
.align-right .etapes li,.align-right .articles li{ padding-left:0; padding-right:42px }
.etapes li::before,.articles li::before{
  content:counter(n,decimal-leading-zero); position:absolute; left:0; top:15px;
  font-weight:800; font-size:.88rem; color:var(--yellow); opacity:.6;
}
.align-right .etapes li::before,.align-right .articles li::before{ left:auto; right:0 }
.etapes span,.articles span{ display:block }

/* ─── Témoignages ─── */
.act-temoins{ padding:0 var(--rail); text-align:center }
.tem-head{ display:flex; align-items:baseline; justify-content:center; gap:16px; margin-bottom:28px }
.tem-count{ font-size:.80rem; font-weight:800; letter-spacing:.18em; color:var(--softer) }
.tem-count b{ color:var(--yellow) }
.tem-stage{ position:relative; max-width:880px; margin:0 auto; min-height:min(40vh,300px) }
.tem{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
      justify-content:center; gap:26px; opacity:0 }
.tem blockquote{
  font-size:clamp(1.15rem,2.5vw,2rem); font-weight:800; line-height:1.3;
  letter-spacing:-.02em; color:#fff; max-width:22ch;
}
.tem blockquote::before{ content:'« ' } .tem blockquote::after{ content:' »' }
.tem figcaption{ display:flex; align-items:center; gap:14px }
.tem-av{
  width:52px; height:52px; flex:none; border-radius:50%; background:var(--av);
  display:grid; place-items:center; font-weight:800; font-size:1.1rem; color:#fff;
}
.tem figcaption b{ display:block; font-size:.80rem; font-weight:800; letter-spacing:.16em;
                   text-transform:uppercase; color:var(--yellow) }
.tem figcaption i{ font-style:normal; font-size:.86rem; color:var(--soft) }

/* ─── Formulaire de rappel (§ 3.7) ─── */
.form{ position:relative; z-index:2; display:grid; gap:14px; align-content:start }
.form-t{ font-size:1.3rem; font-weight:800; letter-spacing:-.01em; margin-bottom:4px }
.f-row{ display:grid; gap:6px }
.f-row label{ font-size:.82rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--yellow) }
.f-row label i{ font-style:normal; font-weight:600; letter-spacing:0; text-transform:none; opacity:.75 }
.form input,.form select,.form textarea{
  width:100%; font:inherit; font-size:.95rem; font-weight:600; color:#fff;
  background:rgba(255,255,255,.10); border:1.5px solid rgba(255,255,255,.46);
  border-radius:12px; padding:12px 14px; transition:border-color .25s, background .25s;
}
.form textarea{ resize:vertical; min-height:84px }
.form select option{ color:var(--ink) }
/* Le gris par defaut du navigateur tombait a 2,97:1 sur ce fond. Un
   placeholder est du texte : il doit tenir le meme seuil que le reste. */
.form input::placeholder,.form textarea::placeholder{
  color:rgba(255,255,255,.62); font-weight:500; opacity:1;
}
.form input:focus,.form select:focus,.form textarea:focus{
  outline:none; border-color:var(--yellow); background:rgba(255,255,255,.16);
}
.form input[aria-invalid="true"],.form select[aria-invalid="true"]{ border-color:#FF9A8B }
.f-check{ display:flex; gap:11px; align-items:flex-start; font-size:.92rem; color:#fff; cursor:pointer }
.f-check input{ width:22px; height:22px; flex:none; accent-color:var(--yellow); margin-top:1px }
/* La case est obligatoire pour envoyer, et c'était le seul contrôle du
   formulaire sans aucun repère de focus : au clavier on s'y arrêtait
   sans le savoir. */
.f-check input:focus-visible{ outline:2px solid var(--yellow); outline-offset:3px }
.f-check:focus-within{ color:var(--yellow) }
.form button{ justify-self:start; margin-top:4px; cursor:pointer }
.f-note{ font-size:.84rem; font-weight:700; min-height:1.2em }
.f-note.ok{ color:var(--yellow) } .f-note.ko{ color:#FFC9C0 }

/* ─── Section Télécharger ─── */
.act-app .dl{ display:flex; align-items:center; gap:30px; flex-wrap:wrap; margin-top:28px }
.dl-qr{ display:flex; flex-direction:column; align-items:center; gap:10px }
.qr{
  width:156px; height:156px; border-radius:18px; background:#fff; padding:11px;
  box-shadow:0 16px 40px -18px rgba(0,0,0,.65);
}
.qr svg{ width:100%; height:100%; display:block; shape-rendering:crispEdges }
.qr.qr-ko{                                   /* repli lisible si le QR n'a pu être généré */
  display:grid; place-items:center; text-align:center; padding:16px;
  font-size:.78rem; font-weight:800; color:var(--ink); word-break:break-all;
}
.dl-qr{ margin:0 }
.dl-qr figcaption{ font-size:.78rem; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--softer); margin-top:10px }
.dl-btn{ display:none }

/* ─── Blocs conditions ─── */
.cond{ display:grid; grid-template-columns:1fr 1fr; gap:34px; margin-top:28px; text-align:left }
.cond-col h3{
  font-size:.72rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--yellow); margin-bottom:12px;
}
.cond-col ul,.cond-list{ list-style:none; display:grid; gap:0 }
.cond-col li,.cond-list li{
  padding:11px 0 11px 26px; position:relative;
  border-top:1px solid rgba(255,255,255,.16); font-size:.94rem; color:var(--soft);
}
.cond-col li:last-child,.cond-list li:last-child{ border-bottom:1px solid rgba(255,255,255,.16) }
.cond-col li::before,.cond-list li::before{
  content:''; position:absolute; left:0; top:19px; width:9px; height:9px;
  border-radius:50%; background:var(--yellow);
}
.cond-col b,.cond-list b{ color:#fff; font-weight:800 }
.cond-list{ margin-top:26px; text-align:left; max-width:600px; margin-inline:auto }
.act-cond{ padding:0 var(--rail); text-align:center }
.act-cond .pill{ margin-top:28px }

/* ─── Réseaux sociaux ─── */
.social{ display:flex; gap:12px; margin-top:22px }
.social a{
  width:46px; height:46px; display:grid; place-items:center; border-radius:50%;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
  transition:transform .3s var(--e), background .3s, border-color .3s;
}
.social a:hover{ transform:translateY(-3px); background:var(--yellow); border-color:var(--yellow) }
.social svg{ width:19px; height:19px; fill:#fff; transition:fill .3s }
.social a:hover svg{ fill:var(--ink) }

/* ─────────────────────── CONTACT + PIED ── */
.contact{
  position:relative; z-index:50; background:var(--blue-700); color:#fff;
  display:grid; grid-template-columns:1fr 1fr .8fr; gap:4vw; padding:120px var(--rail);
  overflow:hidden;
}
.contact::after{
  content:''; position:absolute; right:-8vw; top:50%; transform:translateY(-50%);
  width:40vw; height:40vw; border-radius:50%; border:2px solid rgba(255,255,255,.14);
}
.ct-l,.ct-r{ position:relative; z-index:2 }
.ct-r{ align-self:center }
.ct-r>div{ padding:16px 0; border-top:1px solid rgba(255,255,255,.22) }
.ct-r>div:last-child{ border-bottom:1px solid rgba(255,255,255,.22) }
.ct-r dt{ font-size:.78rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--yellow); margin-bottom:4px }
.ct-r dd{ font-size:1.15rem; font-weight:700; line-height:1.35 }
.ct-r .todo{ font-size:.88rem; font-weight:500; color:rgba(255,255,255,.88) }

.ftr{ position:relative; z-index:50; background:var(--navy-900); padding:96px var(--rail) 36px }
.sig{ font-size:clamp(1.3rem,2.4vw,2rem); font-weight:800; line-height:1.25; max-width:22ch; margin-bottom:56px }
.ftr-cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:34px; padding-bottom:52px }
.ftr-cols h4{ font-size:.78rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--yellow); margin-bottom:12px }
.ftr-cols p{ font-size:.86rem; line-height:1.85; color:var(--soft) }
/* Cibles tactiles : les liens de colonne faisaient 17 px de haut.
   Portée restreinte aux liens de texte (dans un <p>) : à égalité de
   spécificité cette règle passait APRÈS `.social a` et écrasait son
   `display:grid; place-items:center` — les icônes se retrouvaient
   décalées de 12,5 px à gauche et 5,5 px en haut dans leur cercle. */
.ftr-cols p a, .ftr-bot a, .credit{ display:inline-block; padding:6px 0; min-height:24px }
.ct-r dd a{ display:inline-block; padding:4px 0; min-height:30px }
.ftr-cols p a:hover{ color:var(--yellow) }
.ftr-bot{ display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap; padding-top:26px; border-top:1px solid rgba(255,255,255,.1) }
.ftr-logo{ width:230px; background:#fff; padding:11px 16px; border-radius:8px }
.ftr-bot p{ font-size:.80rem; color:var(--softer) }
.ftr-bot a:hover{ color:var(--yellow) }
.credit{ color:var(--soft); font-weight:700; border-bottom:1px solid rgba(255,210,31,.45);
         transition:color .3s, border-color .3s }
.credit:hover{ color:var(--yellow); border-color:var(--yellow) }

.rv{ opacity:0 }

/* WhatsApp flottant — mobile (cf. plan du site § 2) */
.wa{
  position:fixed; right:18px; z-index:180; bottom:calc(92px + env(safe-area-inset-bottom,0px));
  width:56px; height:56px; border-radius:50%; background:#25D366; color:#fff;
  display:none; place-items:center; box-shadow:0 10px 28px -8px rgba(0,0,0,.55);
  transition:opacity .3s var(--e), transform .3s var(--e);
}
.wa:hover{ transform:scale(1.08) }
.wa svg{ width:30px; height:30px }

/* ── Écrans peu hauts ──
   Les actes sont en position:fixed : ce qui dépasse est inaccessible.
   Mesuré en 360×640 : l'acte « Ouvrir un compte » faisait 743 px pour
   640 px utiles — titre masqué par l'en-tête, bouton hors écran. */
@media (max-height:720px){
  .h-act{ font-size:clamp(1.5rem,3vw,2.3rem) }
  .h-act.xl{ font-size:clamp(1.8rem,3.6vw,2.8rem) }
  .h-act.small{ font-size:clamp(1.35rem,2.4vw,1.9rem) }
  .p-act{ margin-top:14px; font-size:.92rem }
  .valeurs li,.articles li,.etapes li,.cond-col li,.cond-list li{ padding:8px 0 }
  .valeurs li,.articles li,.etapes li{ padding-left:36px }
  .cond{ gap:22px; margin-top:18px }
  .acts-row, .act-in > .pill{ margin-top:20px }
  .eyebrow{ margin-bottom:12px }
}
@media (max-height:680px){
  /* Filet de sécurité : si un acte dépasse malgré tout, son contenu
     devient défilable plutôt que tronqué. */
  .act-in{ max-height:calc(100dvh - 88px); overflow-y:auto;
           overscroll-behavior:contain; scrollbar-width:none }
  .act-in::-webkit-scrollbar{ display:none }
  .cond{ gap:14px; margin-top:14px }
  .cond-col li,.cond-list li{ padding:7px 0 7px 22px; font-size:.86rem }
  .cond-col li::before,.cond-list li::before{ top:15px; width:7px; height:7px }
  .cond-col h3{ margin-bottom:8px }
  .act-cond .act-in > .pill{ margin-top:16px }
  .h-act.small{ font-size:clamp(1.2rem,2.2vw,1.6rem) }
  .eyebrow{ margin-bottom:9px }
}

/* ═══════════════════════════ RESPONSIVE ═══════════════════════════ */
@media (max-width:1024px){
  .nav{ display:none }
  .burger{ display:block }
  .contact{ grid-template-columns:1fr; gap:46px }
  .tem-stage{ min-height:46vh }
  .ftr-cols{ grid-template-columns:repeat(2,1fr) }
  }
@media (max-width:768px){
  :root{ --rail:22px }
  body{ font-size:16px }
  .hdr-cta{ display:none } .wa{ display:grid }
  .align-left,.align-right{ padding:0 var(--rail); text-align:left }
  .align-left .act-in,.align-right .act-in{ max-width:100% }
  .align-right .p-act{ margin-left:0 }
  .align-right .acts-row,.align-right .l3{ justify-content:flex-start }
  .act::before{                                   /* voile de lisibilité */
    content:''; position:absolute; inset:-16vh 0; z-index:-1;
    background:linear-gradient(180deg,transparent,rgba(8,21,56,.88) 16%,rgba(8,21,56,.88) 84%,transparent);
  }
  .orb{ width:84vmin; height:84vmin; margin:-42vmin 0 0 -42vmin }
  /* Le voile de lisibilité (.act::before) passe au-dessus de la scène et
     ternissait le chrono : sur mobile on ne garde que le disque, qui lui
     reste sous le voile. Plus net, et plus épuré. */
  .chrono, .arc, .streaks, .curve{ display:none }
  .ring{ --rw:86vmin; left:50%; margin-left:-43vmin; top:74%; margin-top:-43vmin }
  .disc-shadow{ display:none }

  /* HÉROS MOBILE — on repasse en colonne centrée, le disque monte du bas.
     (Le desktop, lui, reste en deux colonnes comme l'affiche.) */
  .act-hero, .act-cta, .act-app{ padding:0 var(--rail) }
  .cond{ grid-template-columns:1fr; gap:24px }
  .qr, .dl-qr{ display:none }           /* mobile : pas de QR, un bouton suffit */
  .dl-btn{ display:inline-flex }
  .social{ justify-content:flex-start }
  /* Décalages distincts : le bloc final est plus court que celui du héros,
     une valeur commune laissait 189 px de vide au lieu de 114. */
  .act-hero{ margin-top:-13vh }
  .act-cta{ margin-top:-4vh }
  .act-hero .act-in, .act-cta .act-in, .act-app .act-in{ max-width:100%; margin:0 auto; text-align:center }
  .act-app .dl{ justify-content:center }
  .ctafemme{ --cw:min(46vmin,30vh); width:var(--cw); height:var(--cw);
             left:50%; right:auto; top:auto; bottom:2vh; margin-top:0; margin-left:calc(var(--cw) / -2) }
  .act-hero .l3, .act-hero .acts-row, .act-cta .acts-row{ justify-content:center }
  .h-act.xl{ font-size:clamp(2.2rem,9vw,3.4rem) }
  .big{ font-size:min(17vw,10rem,16vh) }
  /* Disque plus grand et remonté : il était à 245 px du texte, c'était trop.
     Même réglage pour le héros et pour l'appel final. */
  .hero-disc{ --d:min(60vmin,38vh); width:var(--d); left:50%; top:auto; bottom:-6vh;
              margin-top:0; margin-left:calc(var(--d) / -2) }
  .heroine{ --d:min(60vmin,38vh); width:var(--d); height:calc(var(--d) * 1.30);
            left:50%; right:auto; top:auto; bottom:-6vh;
            margin-top:0; margin-left:calc(var(--d) / -2) }
  .scroll-hint{ left:50%; transform:translateX(-50%) }
  .membre{ width:27vmin; left:2% }
  .conseiller{ width:27vmin; left:auto; right:2% }
  /* 3 % placait la conseillere juste sous le bouton WhatsApp flottant
     (bas 92 px) : la pastille verte lui couvrait le visage sur les six
     questions. On remonte le duo au-dessus de la zone du bouton. */
  .membre,.conseiller{ bottom:calc(92px + 56px + 14px) }
  .mq-txt{ font-size:22vw }
  .bubble{ max-width:100% }
  .ftr-cols{ grid-template-columns:1fr }
  .ftr-logo{ width:190px }
}
@media (min-width:1025px){ .menu{ display:none } }
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important }
  /* Les actes étaient rendus visibles SANS être sortis de position:fixed :
     les 14 se superposaient au même endroit, page illisible. On repasse
     en flux normal et on retire la scène, qui n'a plus de sens sans
     mouvement. Tout le contenu reste présent et accessible. */
  #acts{ height:auto !important }
  #stage, .mq, .scroll-hint, .hdr-prog{ display:none !important }
  .act{
    position:relative !important; top:auto !important; transform:none !important;
    opacity:1 !important; visibility:visible !important;
    /* Plancher a 92 px : l'en-tete fixe fait 64 px (66 en mobile) et
       scrollIntoView() ne le compense pas — le sur-titre des ancres
       passait entierement dessous. */
    padding-top:max(9vh, 92px); padding-bottom:9vh; margin-top:0 !important;
  }
  .act-in, .act-cond .act-in, .act-hero .act-in, .act-cta .act-in, .act-app .act-in{
    max-width:min(68ch, 92vw) !important; margin:0 auto !important;
  }
  /* `padding:0` ecrasait le padding-top ci-dessus sur ces seuls actes :
     3 ancres sur 7 atterrissaient sous l'en-tete. On ne touche qu'a l'axe
     horizontal. */
  .align-left, .align-right{ padding-left:var(--rail) !important;
                             padding-right:var(--rail) !important; text-align:left }
  .qa, .tem{ position:relative; inset:auto; opacity:1 !important; margin-bottom:26px }
  .faq-stage, .tem-stage{ min-height:0 }
  .rv,.prop,.qa,.motif{ opacity:1 !important }
  .menu a{ opacity:1 !important; transform:none !important }
}

/* Dans la section Contact le flottant se posait sur les champs du
   formulaire : taper dans le coin droit ouvrait WhatsApp. Il s'efface,
   la section porte deja son propre bouton WhatsApp. */
body.au-contact .wa{ opacity:0; transform:scale(.6); pointer-events:none }

/* Piège à robots : sorti du flux sans `display:none`, que certains
   robots détectent et contournent. */
.appat{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }
/* États du bouton d'envoi : sans cela, un réseau lent laissait croire
   que le clic n'avait rien déclenché. */
.form button[disabled]{ opacity:.55; cursor:wait; transform:none }
.f-note a{ color:var(--yellow); font-weight:800; border-bottom:1px solid rgba(255,210,31,.5) }
.f-note:focus-visible{ outline:2px solid var(--yellow); outline-offset:4px; border-radius:6px }