/* ==========================================================================
   CAP FUTURE MAROC — Composants
   ========================================================================== */
section[id], .hero[id] { scroll-margin-top: 80px; }

/* ---------------------------- NAVIGATION ---------------------------- */
/* Barre flottante : détachée du bord, arrondie, avec un fond qui se densifie
   au scroll. Le lien actif est suivi par un curseur qui glisse. */
.nav {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  width: calc(100% - 28px); max-width: 1180px; z-index: 100;
  border-radius: var(--r-pill);
  background: rgba(12, 37, 71, .82);
  backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 34px rgba(6,22,45,.28);
  transition: background var(--d-mid) var(--ez), box-shadow var(--d-mid) var(--ez), top var(--d-mid) var(--ez), border-color var(--d-mid) var(--ez);
  overflow: hidden;
}
.nav.on {
  top: 8px;
  background: rgba(12, 37, 71, .93);
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 14px 44px rgba(6,22,45,.5);
}
.nav__in { display: flex; align-items: center; justify-content: space-between; height: 62px; padding-left: 20px; padding-right: 12px; }
.nav__logo { display: flex; align-items: center; gap: 11px; font-weight: 800; font-size: 15px; letter-spacing: -.01em; }
.nav__logo img { border-radius: 9px; transition: transform var(--d-mid) var(--ez-spring); }
.nav__logo:hover img { transform: rotate(-8deg) scale(1.08); }
.nav__logo em { font-style: normal; color: var(--or-400); }

.nav__links { display: none; align-items: center; gap: 2px; position: relative; }
.nav__links a:not(.btn) {
  position: relative; padding: 9px 16px; font-size: 13.8px; font-weight: 500;
  color: rgba(255,255,255,.6); border-radius: var(--r-pill);
  transition: color var(--d-fast);
}
.nav__links a:not(.btn):hover { color: #fff; }
/* Curseur qui glisse derrière le lien survolé */
.nav__cursor {
  position: absolute; top: 0; left: 0; height: 100%; width: 0;
  border-radius: var(--r-pill); background: rgba(255,255,255,.1);
  opacity: 0; pointer-events: none;
  transition: transform .42s var(--ez), width .42s var(--ez), opacity .3s var(--ez);
}
.nav__links:hover .nav__cursor { opacity: 1; }
.nav__links .btn { margin-left: 10px; }

.nav__burger { display: flex; padding: 10px; color: #fff; }
.nav__burger .i { width: 23px; height: 23px; }
.nav__progress { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--or-500); transition: width .1s linear; }

.navmob {
  position: fixed; inset: 84px 14px auto; z-index: 95;
  max-height: calc(100vh - 100px); overflow-y: auto;
  background: rgba(12, 37, 71, .97); backdrop-filter: blur(22px);
  border: 1px solid rgba(255,255,255,.13); border-radius: var(--r-xl);
  display: flex; flex-direction: column; padding: 18px;
  opacity: 0; pointer-events: none; transform: translateY(-14px) scale(.97);
  transition: opacity var(--d-mid) var(--ez), transform var(--d-mid) var(--ez);
  box-shadow: 0 24px 60px rgba(6,22,45,.55);
}
.navmob.open { opacity: 1; pointer-events: auto; transform: none; }
.navmob a:not(.btn) {
  padding: 15px 14px; font-size: 15.5px; font-weight: 600; color: rgba(255,255,255,.75);
  border-radius: var(--r-md); transition: background var(--d-fast), color var(--d-fast), transform var(--d-fast);
}
.navmob a:not(.btn):hover { background: rgba(255,255,255,.07); color: #fff; transform: translateX(5px); }
.navmob .btn { margin-top: 14px; }
/* Les liens du menu mobile arrivent en cascade à l'ouverture */
.navmob a { opacity: 0; transform: translateY(10px); transition: opacity .4s var(--ez-out), transform .4s var(--ez-out), background var(--d-fast), color var(--d-fast); }
.navmob.open a { opacity: 1; transform: none; }
.navmob.open a:nth-child(1) { transition-delay: .06s; }
.navmob.open a:nth-child(2) { transition-delay: .11s; }
.navmob.open a:nth-child(3) { transition-delay: .16s; }
.navmob.open a:nth-child(4) { transition-delay: .21s; }
.navmob.open a:nth-child(5) { transition-delay: .26s; }
.navmob.open a:nth-child(6) { transition-delay: .31s; }
.navmob.open a:nth-child(7) { transition-delay: .36s; }
.navmob.open a:nth-child(8) { transition-delay: .41s; }

@media (min-width: 1040px) { .nav__links { display: flex; } .nav__burger, .navmob { display: none; } }

/* ---------------------------- LUEURS DE SECTION ---------------------------- */
.glow { position: absolute; border-radius: 50%; filter: blur(120px); pointer-events: none; }
.glow--a { width: 560px; height: 560px; top: -140px; right: -160px; background: radial-gradient(circle, rgba(234,135,25,.16), transparent 70%); }
.glow--b { width: 520px; height: 520px; bottom: -180px; left: -160px; background: radial-gradient(circle, rgba(15,174,116,.13), transparent 70%); }
.glow--c { width: 620px; height: 620px; top: 10%; left: 50%; transform: translateX(-50%); background: radial-gradient(circle, rgba(234,135,25,.14), transparent 70%); }

/* ---------------------------- MISE EN PAGE SPLIT ---------------------------- */
.split { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: start; }
@media (min-width: 940px) {
  .split { grid-template-columns: .84fr 1.16fr; gap: 70px; }
  .split--rev { grid-template-columns: 1fr 1fr; }
  .split__l { position: sticky; top: 110px; }
}

/* ---------------------------- QUIZ ---------------------------- */
.quiz {
  margin-top: 52px; background: #fff; border: 1px solid var(--line-cream);
  border-radius: var(--r-xl); padding: 42px 34px; box-shadow: var(--sh-deep-hi);
}
.quiz__dots { display: flex; justify-content: center; gap: 8px; margin-bottom: 30px; }
.quiz__dot { width: 26px; height: 4px; border-radius: 99px; background: var(--line-cream); transition: background var(--d-mid), width var(--d-mid); }
.quiz__dot.on { background: var(--or-500); width: 40px; }
.quiz__dot.done { background: var(--or-300); }
.quiz__step { display: none; text-align: center; }
.quiz__step.on { display: block; animation: qin .45s var(--ez-out); }
@keyframes qin { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
.quiz__q { font-size: var(--t-h3); color: var(--ink); margin-bottom: 24px; }
.quiz__opts { display: flex; flex-direction: column; gap: 11px; }
.opt {
  position: relative; overflow: hidden; text-align: left;
  padding: 17px 22px; border-radius: var(--r-md);
  border: 1.5px solid var(--line-mist); background: #F7FAFE; color: var(--ink);
  transition: border-color var(--d-fast), background var(--d-fast), transform var(--d-fast);
}
.opt:hover { border-color: var(--or-500); background: var(--or-200); transform: translateX(5px); }
.opt__k { display: block; font-weight: 700; font-size: 15px; }
.opt__s { display: block; font-size: 12.5px; color: var(--ink-35); margin-top: 2px; }
.quiz__back { display: inline-flex; align-items: center; gap: 7px; margin-top: 22px; font-size: 13px; font-weight: 600; color: var(--ink-35); }
.quiz__back .i { width: 14px; height: 14px; transform: rotate(180deg); }
.quiz__back:hover { color: var(--or-600); }
.quiz__ic { width: 58px; height: 58px; border-radius: 50%; background: var(--or-200); color: var(--or-600); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.quiz__ic .i { width: 26px; height: 26px; }
.quiz__lab { display: block; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--or-600); margin-bottom: 10px; }
.quiz__title { font-size: 24px; color: var(--ink); margin-bottom: 12px; }
.quiz__txt { font-size: 15px; line-height: 1.7; color: var(--ink-50); max-width: 44ch; margin: 0 auto 14px; }
.quiz__warn { font-size: 12.5px; line-height: 1.6; color: var(--ink-35); max-width: 44ch; margin: 0 auto 26px; }
@media (min-width: 620px) { .quiz__opts--2 { display: grid; grid-template-columns: 1fr 1fr; } }

/* ---------------------------- PIÈGES ----------------------------
   Liste numérotée plutôt que cartes : le numéro porte la hiérarchie, le
   filet horizontal sépare sans encadrer. Chaque entrée respire le même
   espace, ce qui n'était pas le cas avant. */
.errs { display: flex; flex-direction: column; }
.err {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s4);
  padding: var(--s5) 0;
  border-top: 1px solid var(--line-mist);
  transition: background var(--d-mid) var(--ez);
}
.err:last-child { border-bottom: 1px solid var(--line-mist); }
.err:hover { background: linear-gradient(90deg, rgba(224,80,56,.05), transparent 62%); }
.err__n {
  font-family: var(--f-display); font-size: 40px; font-weight: 600; line-height: .9;
  color: var(--co-100);
  transition: color var(--d-mid) var(--ez), transform var(--d-mid) var(--ez);
}
.err:hover .err__n { color: var(--co-500); transform: translateY(-3px); }
.err h3 { font-size: 19px; color: var(--ink); margin-bottom: var(--s2); }
.err p { font-size: 14.5px; line-height: 1.75; color: var(--ink-50); }
.err p em { font-style: italic; color: var(--co-600); font-weight: 600; }
@media (min-width: 620px) {
  .err { grid-template-columns: 96px 1fr; gap: var(--s5); padding: var(--s6) 0; }
  .err__n { font-size: 56px; }
  .err h3 { font-size: 21px; }
}

/* ---------------------------- VS (deux trajectoires) ---------------------------- */
.vs { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: center; margin-top: 62px; }
.vs__c { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: 34px 30px; border: 1px solid var(--line-night); box-shadow: var(--sh-deep-dark); }
.vs__c--bad { background: rgba(224,75,56,.06); border-color: rgba(224,75,56,.2); filter: saturate(.62); opacity: .86; }
.vs__c--bad:hover { opacity: 1; filter: none; }
.vs__c--good {
  background: rgba(240,138,23,.12);
  border-color: rgba(234,135,25,.4); box-shadow: 0 22px 62px rgba(234,135,25,.18);
}
.vs__c--good:hover { box-shadow: 0 30px 78px rgba(234,135,25,.3), var(--sh-deep-dark); }
.vs__crown {
  position: absolute; top: -13px; left: 30px;
  background: var(--or-500); color: #fff; font-size: 10px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; padding: 6px 14px; border-radius: var(--r-pill);
  box-shadow: 0 6px 18px rgba(234,135,25,.5);
}
.vs__tag { display: block; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--co-400); margin-bottom: 24px; }
.vs__tag--good { color: var(--or-400); }
.vs__c ul { display: flex; flex-direction: column; gap: 17px; }
.vs__c li { display: flex; align-items: flex-start; gap: 13px; }
.vs__c li .i { width: 18px; height: 18px; padding: 4px; border-radius: 50%; box-sizing: content-box; margin-top: 1px; stroke-width: 2.6; }
.vs__c--bad li .i { color: var(--co-400); background: rgba(224,75,56,.16); }
.vs__c--good li .i { color: var(--em-400); background: rgba(15,174,116,.18); }
.vs__c b { display: block; font-size: 14.5px; color: #fff; margin-bottom: 2px; }
.vs__c--bad b { color: rgba(255,255,255,.8); }
.vs__c span { font-size: 12.8px; line-height: 1.55; color: var(--pale-45); }
.vs__end { display: flex; align-items: center; gap: 14px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line-night); }
.vs__end .i { width: 26px; height: 26px; padding: 7px; border-radius: 50%; box-sizing: content-box; stroke-width: 2.6; }
.vs__end b { font-family: var(--f-display); font-size: 18px; }
.vs__end--bad .i { color: var(--co-400); background: rgba(224,75,56,.17); }
.vs__end--bad b { color: var(--co-400); }
.vs__end--good .i { color: var(--em-400); background: rgba(15,174,116,.2); }
.vs__end--good b { color: var(--em-400); }
/* Flèche de bascule : un vrai jeton lumineux avec anneau pulsant, pas un
   simple glyphe posé entre deux colonnes. */
.vs__mid { display: flex; align-items: center; justify-content: center; }
.vs__mid span {
  position: relative; width: 62px; height: 62px; border-radius: 50%;
  background: var(--or-500);
  display: flex; align-items: center; justify-content: center; color: #fff;
  box-shadow: 0 10px 30px rgba(234,135,25,.5), inset 0 1px 0 rgba(255,255,255,.4);
}
.vs__mid span::before, .vs__mid span::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid rgba(234,135,25,.55);
  animation: vsRing 2.8s cubic-bezier(.3,0,.4,1) infinite;
}
.vs__mid span::after { animation-delay: 1.4s; }
@keyframes vsRing {
  0% { transform: scale(1); opacity: .85; }
  100% { transform: scale(1.85); opacity: 0; }
}
.vs__mid .i {
  width: 26px; height: 26px; stroke-width: 2.2;
  transform: rotate(90deg); animation: vsGo 2.1s var(--ez) infinite;
}
@keyframes vsGo {
  0%, 100% { transform: rotate(90deg) translateX(0); }
  50% { transform: rotate(90deg) translateX(6px); }
}
.vs__note { text-align: center; margin-top: var(--s6); font-family: var(--f-display); font-style: italic; font-size: 19px; color: var(--pale-70); }
@media (min-width: 900px) {
  .vs { grid-template-columns: 1fr auto 1.1fr; gap: 24px; }
  .vs__mid .i { transform: none; animation-name: vsGoH; }
  @keyframes vsGoH { 0%,100%{transform:translateX(0);} 50%{transform:translateX(6px);} }
}

/* ---------------------------- MÉTHODE ----------------------------
   Le zigzag desktop obligeait à lire en diagonale et laissait la moitié de la
   largeur vide à chaque étape. Colonne unique alignée : le rail à gauche
   marque la progression, les étapes se lisent d'un seul mouvement. */
.steps { position: relative; max-width: 760px; margin: var(--gap-head) auto 0; display: flex; flex-direction: column; gap: var(--s4); }
.steps__rail { position: absolute; left: 27px; top: 12px; bottom: 12px; width: 2px; background: var(--line-mist); }
.steps__fill { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: var(--or-500); transition: height .25s linear; }

.step { display: flex; align-items: flex-start; gap: var(--s4); }
.step__badge {
  order: -1; flex-shrink: 0; position: relative; z-index: 1;
  width: 56px; height: 56px; border-radius: var(--r-md);
  background: #fff; border: 1.5px solid var(--line-mist);
  display: flex; align-items: center; justify-content: center; color: var(--az-600);
  transition: border-color var(--d-mid), transform var(--d-mid), box-shadow var(--d-mid);
}
.step__badge .i { width: 23px; height: 23px; }
.step__badge b {
  position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--or-500); color: #fff; font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; font-family: var(--f-body);
}
.step:hover .step__badge { border-color: var(--az-500); transform: scale(1.06); box-shadow: 0 8px 24px rgba(53,128,240,.2); }

.step__b {
  flex: 1; min-width: 0;
  background: #fff; border: 1px solid var(--line-mist); border-radius: var(--r-lg);
  padding: var(--s4) var(--s5); box-shadow: var(--sh-deep);
  transition: box-shadow var(--d-mid), transform var(--d-mid);
}
.step:hover .step__b { box-shadow: var(--sh-deep-hi); transform: translateY(-3px); }
.step__b h3 { font-size: 18px; color: var(--ink); margin-bottom: var(--s2); }
.step__b p { font-size: 14.3px; line-height: 1.72; color: var(--ink-50); }

.pledge {
  max-width: 760px; margin: var(--s6) auto 0; text-align: center;
  background: #fff; border: 1px solid var(--line-mist); border-radius: var(--r-xl);
  padding: var(--s6) var(--s5); box-shadow: var(--sh-deep-hi); position: relative;
}
.pledge__ic { width: 56px; height: 56px; border-radius: 50%; background: var(--az-100); color: var(--az-600); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--s3); }
.pledge__ic .i { width: 25px; height: 25px; }
.pledge h3 { font-size: 21px; color: var(--ink); margin-bottom: var(--s2); }
.pledge p { font-size: 14.5px; line-height: 1.78; color: var(--ink-50); max-width: 54ch; margin: 0 auto; }

/* ---------------------------- FORMATIONS ----------------------------
   Deux niveaux de lecture assumés : les deux voies principales occupent une
   vraie surface, les quatre passerelles se lisent en bandeau compact. Avant,
   six cartes de tailles proches se disputaient l'attention sans hiérarchie
   claire. */
.dom-hero { display: grid; grid-template-columns: 1fr; gap: var(--gap-block); margin: var(--gap-head) 0 var(--gap-block); }
.dom-grid { display: grid; grid-template-columns: 1fr; gap: var(--s3); }
@media (min-width: 760px) { .dom-hero { grid-template-columns: 1fr 1fr; } .dom-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .dom-grid { grid-template-columns: repeat(4, 1fr); } }

.dom {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--line-mist); border-radius: var(--r-lg);
  padding: var(--s5) var(--s4); box-shadow: var(--sh-deep);
  transition: box-shadow var(--d-mid), border-color var(--d-mid);
}
.dom:hover { box-shadow: var(--sh-deep-hi); }

.dom__ic {
  width: 44px; height: 44px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--s3);
  transition: transform var(--d-mid) var(--ez-spring), background var(--d-mid), color var(--d-mid);
}
.dom__ic .i { width: 21px; height: 21px; }
.dom:hover .dom__ic { transform: scale(1.12) rotate(-7deg); }

.dom h3 { font-size: 16.5px; color: var(--ink); margin-bottom: var(--s2); }
.dom p { font-size: 13px; line-height: 1.62; color: var(--ink-50); }

/* Cartes principales : plus de surface, titre nettement plus fort */
.dom--big { padding: var(--s6) var(--s5); border-color: rgba(240,138,23,.3); }
.dom--big:hover { border-color: rgba(240,138,23,.6); box-shadow: 0 22px 56px rgba(240,138,23,.16); }
.dom--big h3 { font-size: 25px; margin-bottom: var(--s3); }
.dom--big p { font-size: 14.2px; line-height: 1.7; }
.dom__ic--big {
  width: 62px; height: 62px; border-radius: 18px; margin-bottom: var(--s4);
  color: #fff;
}
.dom__ic--big .i { width: 28px; height: 28px; }
.dom__halo { position: absolute; top: -70px; right: -70px; width: 190px; height: 190px; border-radius: 50%; background: radial-gradient(circle, rgba(240,138,23,.20), transparent 70%); opacity: 0; transition: opacity var(--d-mid); }
.dom--big:hover .dom__halo { opacity: 1; }

.mini-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--s4); margin-top: var(--s6); text-align: center;
}
.mini-cta p { font-family: var(--f-display); font-style: italic; font-size: 17.5px; color: var(--ink-50); }
.sec--night .mini-cta p, .sec--navy .mini-cta p { color: var(--pale-45); }

/* ---------------------------- POURQUOI (gains) ---------------------------- */
.gains { display: grid; grid-template-columns: 1fr; gap: 13px; }
@media (min-width: 620px) { .gains { grid-template-columns: 1fr 1fr; } }
.gains li {
  display: flex; align-items: flex-start; gap: 14px;
  background: rgba(255,255,255,.04); border: 1px solid var(--line-night);
  border-radius: var(--r-md); padding: 19px 20px;
  transition: background var(--d-mid), border-color var(--d-mid), transform var(--d-mid);
}
.gains li:hover { background: rgba(255,255,255,.075); border-color: rgba(234,135,25,.32); transform: translateY(-3px); }
.gains__ic { width: 36px; height: 36px; border-radius: 11px; background: rgba(234,135,25,.14); color: var(--or-400); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.gains__ic .i { width: 18px; height: 18px; }
.gains b { display: block; font-size: 14.5px; color: #fff; margin-bottom: 2px; }
.gains span { font-size: 12.6px; line-height: 1.5; color: var(--pale-45); }

/* ---------------------------- VIDÉO ---------------------------- */
.vid-sec { padding-top: clamp(60px, 7vw, 100px); }
.vid { position: relative; max-width: 350px; margin: 46px auto 0; aspect-ratio: 9/16; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line-night); box-shadow: 0 30px 80px rgba(0,0,0,.55); background: #000; }
.vid video { width: 100%; height: 100%; object-fit: cover; }
.vid__play { position: absolute; inset: 0; margin: auto; width: 74px; height: 74px; border-radius: 50%; background: rgba(234,135,25,.94); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 34px rgba(0,0,0,.45); transition: transform var(--d-fast) var(--ez-spring), background var(--d-fast); }
.vid__play .i { width: 28px; height: 28px; margin-left: 3px; }
.vid__play:hover { transform: scale(1.09); background: var(--or-400); }
.vid__play.gone { display: none; }
.vid__snd { position: absolute; top: 14px; right: 14px; display: flex; align-items: center; gap: 7px; background: rgba(0,0,0,.62); backdrop-filter: blur(8px); border: 1px solid var(--line-night); color: #fff; font-size: 12px; font-weight: 600; padding: 8px 14px; border-radius: var(--r-pill); }
.vid__snd .i { width: 15px; height: 15px; color: var(--or-400); }

/* ---------------------------- TÉMOIGNAGES ----------------------------
   L'en-tête n'est plus centré seul : il partage la ligne avec une note
   globale, ce qui remplit la largeur et donne une raison d'être au vide.
   Chaque carte porte un badge qui chevauche son bord supérieur — le résultat
   obtenu, qui est la seule chose que le lecteur cherche vraiment. */
.avis-head {
  display: grid; gap: var(--s5);
  margin-bottom: var(--gap-head);
}
@media (min-width: 900px) {
  .avis-head { grid-template-columns: 1.4fr auto; align-items: end; gap: var(--s7); }
}
.avis-score {
  display: flex; flex-direction: column; gap: var(--s1);
  padding: var(--s4) var(--s5);
  background: #fff; border: 1px solid var(--line-cream);
  border-radius: var(--r-lg); box-shadow: var(--sh-deep);
}
.avis-score b { font-family: var(--f-display); font-size: 34px; line-height: 1; color: var(--ink); }
.avis-score span { font-size: 12px; color: var(--ink-35); max-width: 24ch; }

.avis { display: grid; grid-template-columns: 1fr; gap: var(--gap-block); margin-bottom: var(--gap-head); }
/* Tablette : trois témoignages empilés font une colonne interminable.
   Deux colonnes dès 640 px, trois seulement quand la largeur le permet. */
@media (min-width: 640px) { .avis { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .avis { grid-template-columns: repeat(3, 1fr); } }

.av {
  position: relative; margin: 0;
  background: #fff; border: 1px solid var(--line-cream);
  border-radius: var(--r-lg); padding: var(--s6) var(--s5) var(--s5);
  box-shadow: var(--sh-deep);
  display: flex; flex-direction: column;
}
.av:hover { box-shadow: var(--sh-deep-hi); }

/* Badge chevauchant : c'est ce décalage qui crée la profondeur */
.av__badge {
  position: absolute; top: -13px; left: var(--s5);
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: var(--r-pill);
  background: var(--em-600); color: #fff;
  font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
  box-shadow: 0 6px 16px rgba(7,138,92,.34);
  white-space: nowrap;
}
.av__badge .i { width: 12px; height: 12px; stroke-width: 3; }

.av__stars { display: flex; gap: 3px; color: var(--gd-500); margin-bottom: var(--s3); }
.av__stars .i { width: 15px; height: 15px; }

.av blockquote { margin: 0 0 var(--s5); font-size: 14.5px; line-height: 1.78; color: var(--ink-70); flex: 1; }
.av blockquote::before { content: '“'; font-family: var(--f-display); font-size: 34px; color: var(--or-300); line-height: 0; vertical-align: -12px; margin-right: 3px; }

.av figcaption { display: flex; align-items: center; gap: var(--s3); padding-top: var(--s4); border-top: 1px solid var(--line-cream); }
.av__av { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 12.5px; flex-shrink: 0; }
.av__av--nv { background: var(--nv-850); }
.av__av--or { background: var(--or-500); }
.av figcaption b { display: block; font-size: 13.8px; color: var(--ink); }
.av figcaption > div > span { font-size: 12.2px; color: var(--ink-35); }

.band {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5);
  background: var(--nv-950); border-radius: var(--r-xl); padding: var(--s6) var(--s5);
}
@media (min-width: 760px) { .band { grid-template-columns: repeat(4, 1fr); } }
.band div { text-align: center; }
.band b { display: block; font-family: var(--f-display); font-size: 32px; font-weight: 600; color: var(--or-400); margin-bottom: var(--s1); }
.band span { font-size: 11.8px; color: var(--pale-45); }

/* ---------------------------- FAQ ----------------------------
   Composition en deux colonnes : l'intention à gauche (qui reste en place au
   scroll), les réponses à droite. Les questions sont numérotées — le numéro
   sert de repère visuel et donne du rythme à une liste qui, sinon, serait
   une suite de barres identiques. */
.split--faq { gap: var(--s6); }
@media (min-width: 940px) { .split--faq { grid-template-columns: .8fr 1.2fr; gap: var(--s7); } }

.faq { display: flex; flex-direction: column; gap: var(--s2); }

.fq {
  background: #fff; border: 1px solid var(--line-mist);
  border-radius: var(--r-md); overflow: hidden;
  transition: border-color var(--d-mid), box-shadow var(--d-mid);
}
.fq:hover { border-color: rgba(240,138,23,.34); }
.fq.open { border-color: rgba(240,138,23,.45); box-shadow: var(--sh-deep); }

.fq__q {
  width: 100%; display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: var(--s3);
  padding: var(--s4); text-align: left;
}
.fq__n {
  font-family: var(--f-mono); font-size: 12px; font-weight: 500;
  color: var(--or-500); letter-spacing: .04em;
  transition: color var(--d-fast);
}
.fq__t { font-weight: 600; font-size: 15px; line-height: 1.4; color: var(--ink); transition: color var(--d-fast); }
.fq__c { width: 18px; height: 18px; color: var(--ink-35); transition: transform var(--d-mid) var(--ez), color var(--d-mid); }
.fq.open .fq__t { color: var(--or-600); }
.fq.open .fq__c { transform: rotate(180deg); color: var(--or-500); }

.fq__a { max-height: 0; overflow: hidden; transition: max-height var(--d-mid) var(--ez); }
.fq__a p {
  padding: 0 var(--s4) var(--s4) calc(var(--s4) + 26px + var(--s3));
  font-size: 14.3px; line-height: 1.75; color: var(--ink-50);
}
@media (max-width: 560px) {
  .fq__a p { padding-left: var(--s4); }
}

/* ---------------------------- FORMULAIRE ----------------------------
   Sur desktop, l'argument reste à gauche pendant qu'on remplit à droite :
   le visiteur ne perd jamais de vue pourquoi il donne ses coordonnées.
   Sur mobile, tout s'empile, l'argument d'abord. */
.form-wrap { display: grid; gap: var(--s6); }
@media (min-width: 1000px) {
  .form-wrap { grid-template-columns: .82fr 1.18fr; gap: var(--s7); align-items: start; }
  .form-wrap__l { position: sticky; top: 110px; }
}
.form-why { display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s4); }
.form-why li { display: flex; align-items: flex-start; gap: var(--s3); font-size: 14px; color: var(--pale-70); }
.form-why .i { width: 18px; height: 18px; padding: 4px; border-radius: 50%; box-sizing: content-box; background: rgba(46,216,154,.16); color: var(--em-400); stroke-width: 2.6; flex-shrink: 0; }

.form-card {
  position: relative; overflow: hidden;
  background: rgba(255,255,255,.05); border: 1px solid var(--line-night);
  border-radius: var(--r-xl); padding: var(--s5) var(--s4);
  backdrop-filter: blur(10px);
}
@media (min-width: 620px) { .form-card { padding: var(--s6) var(--s6); } }
.form-card__top { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--or-500); }
.hp { position: absolute; left: -9999px; top: -9999px; }

.fgroup__h { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s4); }
.fgroup__h .i { width: 18px; height: 18px; color: var(--em-400); }
.fgroup__h h3 { font-family: var(--f-body); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--pale-70); }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.fld { margin-bottom: var(--s3); }
.fld label { display: block; font-size: 13.5px; font-weight: 600; color: var(--pale-70); margin-bottom: var(--s1); }
.fld input, .fld select {
  width: 100%; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-sm); padding: 14px 16px; font-size: 16px; color: #fff;
  transition: border-color var(--d-fast), box-shadow var(--d-fast), background var(--d-fast);
}
.fld input::placeholder { color: rgba(255,255,255,.26); }
.fld input:hover, .fld select:hover { border-color: rgba(255,255,255,.2); }
.fld input:focus, .fld select:focus { outline: none; border-color: var(--or-500); box-shadow: 0 0 0 3px rgba(240,138,23,.16); background: rgba(255,255,255,.075); }
.fld select {
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.42)' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.fld select:disabled { opacity: .45; cursor: not-allowed; }
.fld select option { background: var(--nv-800); color: #fff; }
.fsep { height: 1px; background: var(--line-night); margin: var(--s5) 0; }
.ferr { background: rgba(224,80,56,.12); border: 1px solid rgba(224,80,56,.3); color: #F5907D; font-size: 13.5px; padding: 13px 16px; border-radius: var(--r-sm); margin-bottom: var(--s3); }
.spin { display: none; animation: sp .85s linear infinite; }
.spin.on { display: inline-block; }
@keyframes sp { to { transform: rotate(360deg); } }
.fmini { margin-top: var(--s3); text-align: center; font-size: 12.5px; line-height: 1.6; color: var(--pale-45); }

.ftrust { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line-night); }
@media (min-width: 620px) { .ftrust { grid-template-columns: repeat(4, 1fr); } }
.ftrust span { display: flex; flex-direction: column; align-items: center; gap: var(--s1); text-align: center; font-size: 11px; color: var(--pale-45); }
.ftrust .i { width: 17px; height: 17px; color: rgba(46,216,154,.72); }

.fok { text-align: center; padding: var(--s5) 0; }
.fok__ic { width: 64px; height: 64px; border-radius: 50%; background: rgba(46,216,154,.16); color: var(--em-400); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--s4); animation: pop .6s var(--ez-spring); }
.fok__ic .i { width: 28px; height: 28px; stroke-width: 2.6; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.fok h3 { font-size: 25px; margin-bottom: var(--s2); }
.fok p { font-size: 14.8px; color: var(--pale-70); max-width: 42ch; margin: 0 auto; line-height: 1.7; }
.fok strong { color: #fff; }
.fok__again { margin-top: var(--s4); font-size: 13.5px; font-weight: 700; color: var(--or-400); }
.fok__again:hover { text-decoration: underline; }

/* ---------------------------- CTA FINAL ----------------------------
   Analyse : un aplat orange plein largeur ne peut pas fonctionner ici.
   L'orange est la couleur de l'action ; s'il occupe tout l'écran, il ne
   signale plus rien et le bouton principal ne peut même plus être orange.
   Il devient donc un BLOC compact posé sur fond clair — l'orange redevient
   rare, et c'est justement ce qui lui rend sa force.
   Le motif blanc à faible opacité (proposition retenue) évite l'aplat mort
   sans introduire le moindre dégradé d'orange. */
/* Ce bandeau reste HORS de l'empilement : plus court qu'un écran, il serait
   figé puis entièrement recouvert par la section suivante — donc jamais vu.
   Il défile normalement, et la section contact vient ensuite le recouvrir. */
.cta-sec { padding: clamp(52px, 6vw, 88px) 0; position: relative; z-index: 17; }

.cta-band {
  position: relative; overflow: hidden;
  background: var(--or-500);
  border-radius: var(--r-xl);
  padding: 34px 30px;
  box-shadow: 0 20px 50px rgba(240,138,23,.30);
  display: grid; gap: 24px;
}

/* Motif : fines diagonales blanches + une trame de points, très discrets.
   Rien de tout cela n'est un dégradé : ce sont des lignes et des points. */
.cta-band__pattern {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(122deg, rgba(255,255,255,.10) 0 1px, transparent 1px 13px),
    radial-gradient(rgba(255,255,255,.16) 1px, transparent 1px);
  background-size: auto, 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 90% 120% at 15% 10%, #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 90% 120% at 15% 10%, #000 20%, transparent 78%);
  opacity: .85;
}

.cta-band__txt { position: relative; z-index: 1; }
.cta-band__h {
  font-family: var(--f-display); font-size: clamp(23px, 3vw, 33px);
  line-height: 1.12; letter-spacing: -.02em; color: #fff;
}
.cta-band__h em { display: block; font-style: italic; font-weight: 500; color: #08243F; }
.cta-band__txt p { margin-top: 12px; font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.92); max-width: 52ch; }

.cta-band__acts { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }

/* Bouton posé SUR l'orange : blanc, texte orange. Contraste maximal, et
   l'orange reste la couleur du message porté par le bouton. */
.btn--onOrange {
  background: #fff; color: var(--or-600);
  padding: 15px 28px; font-size: 15px;
  box-shadow: 0 8px 22px rgba(20,10,0,.18);
}
.btn--onOrange:hover { background: #fff; color: var(--or-700); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(20,10,0,.26); }

.cta-band__wa {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 700; color: #fff;
  padding: 13px 22px; border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.5);
  transition: background var(--d-fast), border-color var(--d-fast);
}
.cta-band__wa .i { width: 17px; height: 17px; }
.cta-band__wa:hover { background: rgba(255,255,255,.16); border-color: #fff; }

@media (min-width: 900px) {
  .cta-band {
    grid-template-columns: 1.35fr auto; align-items: center;
    padding: 42px 46px; gap: 40px;
  }
}

/* ---------------------------- CONTACT ----------------------------
   Avant : trois cartes centrées identiques, avec l'information réduite au
   numéro. Maintenant deux colonnes — l'intention et les informations
   pratiques à gauche, les canaux à droite en lignes cliquables qui disent
   chacune à quoi elles servent. */
.ct-wrap { display: grid; gap: var(--s6); }
@media (min-width: 940px) { .ct-wrap { grid-template-columns: .9fr 1.1fr; gap: var(--s7); align-items: start; } }

.ct-meta { display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s4); }
.ct-meta li { display: flex; align-items: flex-start; gap: var(--s3); }
.ct-meta .i { width: 18px; height: 18px; padding: 5px; border-radius: 50%; box-sizing: content-box; background: var(--em-100); color: var(--em-600); flex-shrink: 0; }
.ct-meta b { display: block; font-size: 13.8px; color: var(--ink); }
.ct-meta span { font-size: 12.5px; color: var(--ink-35); }

.ct-right { display: flex; flex-direction: column; gap: var(--s3); }
.ct {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s4);
  background: #fff; border: 1px solid var(--line-mist); border-radius: var(--r-lg);
  padding: var(--s4); box-shadow: var(--sh-deep);
  transition: box-shadow var(--d-mid), border-color var(--d-mid), transform var(--d-mid);
}
.ct:hover { box-shadow: var(--sh-deep-hi); transform: translateX(4px); }
.ct--wa:hover { border-color: rgba(18,168,116,.4); }
.ct__ic { width: 50px; height: 50px; border-radius: 15px; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; transition: transform var(--d-mid) var(--ez-spring); }
.ct:hover .ct__ic { transform: scale(1.08) rotate(-6deg); }
.ct__ic .i { width: 22px; height: 22px; }
.ct__ic--wa { background: #12A874; }
.ct__ic--or { background: var(--or-500); }
.ct__ic--nv { background: var(--nv-850); }
.ct__b b { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-35); margin-bottom: 3px; }
.ct__v { display: block; font-size: 15px; font-weight: 700; color: var(--ink); word-break: break-word; }
.ct__note { display: block; font-size: 12px; color: var(--ink-35); margin-top: 2px; }
.ct__go { width: 18px; height: 18px; color: var(--or-500); transition: transform var(--d-fast); }
.ct:hover .ct__go { transform: translateX(4px); }

/* ---------------------------- PIED DE PAGE ---------------------------- */
.foot { background: var(--nv-950); padding: 54px 0 0; }
.foot__in { display: flex; flex-direction: column; gap: 28px; padding-bottom: 34px; border-bottom: 1px solid var(--line-night); }
@media (min-width: 760px) { .foot__in { flex-direction: row; align-items: center; justify-content: space-between; } }
.foot__brand { display: flex; align-items: center; gap: 14px; }
.foot__brand img { border-radius: 11px; }
.foot__brand b { display: block; font-size: 15px; font-weight: 800; }
.foot__brand em { font-style: normal; color: var(--or-500); }
.foot__brand > div > span { font-size: 12.5px; color: var(--pale-45); font-family: var(--f-display); font-style: italic; }
.foot__nav { display: flex; flex-wrap: wrap; gap: 12px 26px; }
.foot__nav a { font-size: 13.5px; color: var(--pale-45); transition: color var(--d-fast); }
.foot__nav a:hover { color: #fff; }
.foot__bar { display: flex; flex-direction: column; gap: 12px; padding: 22px 24px 30px; font-size: 12.5px; color: var(--pale-28); text-align: center; }
@media (min-width: 760px) { .foot__bar { flex-direction: row; justify-content: space-between; text-align: left; } }
.foot__bar div { display: flex; gap: 10px; justify-content: center; }
.foot__bar a:hover { color: var(--pale-70); }

/* ---------------------------- FLOTTANTS ---------------------------- */
.fab { position: fixed; right: 20px; bottom: 20px; z-index: 80; width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(140deg, #25D366, #14893D); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0,0,0,.34); transition: transform var(--d-fast) var(--ez-spring); }
.fab .i { width: 26px; height: 26px; }
.fab::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: rgba(37,211,102,.45); animation: ring 2.6s ease-out infinite; }
.fab:hover { transform: scale(1.1); }
@keyframes ring { 0%{transform:scale(1);opacity:.6;} 100%{transform:scale(1.8);opacity:0;} }

.sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 79; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(5,15,31,.96); backdrop-filter: blur(14px); border-top: 1px solid var(--line-night); transform: translateY(130%); transition: transform var(--d-mid) var(--ez); }
.sticky.show { transform: none; }
@media (min-width: 760px) { .sticky { display: none; } }

/* ---------------------------- SONDAGE DE SORTIE ---------------------------- */
.exit { position: fixed; inset: 0; z-index: 150; background: rgba(5,15,31,.62); backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity var(--d-mid) var(--ez); }
.exit.open { opacity: 1; pointer-events: auto; }
.exit__card { position: relative; background: #fff; color: var(--ink); border-radius: var(--r-xl); padding: 40px 32px; width: 100%; max-width: 460px; box-shadow: 0 34px 90px rgba(0,0,0,.4); transform: translateY(20px) scale(.97); transition: transform var(--d-mid) var(--ez); }
.exit.open .exit__card { transform: none; }
.exit__x { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 10px; background: var(--bg-mist); color: var(--ink-35); display: flex; align-items: center; justify-content: center; }
.exit__x .i { width: 16px; height: 16px; }
.exit__step { display: none; }
.exit__step.on { display: block; animation: qin .4s var(--ez-out); }
.exit__step h3 { font-size: 20px; color: var(--ink); margin: 4px 0 22px; line-height: 1.3; }
.exit__opts { display: flex; flex-direction: column; gap: 9px; }
.exit__opt { text-align: left; padding: 14px 18px; border-radius: var(--r-md); border: 1.5px solid var(--line-mist); background: var(--bg-mist); color: var(--ink); font-weight: 600; font-size: 14px; line-height: 1.4; transition: border-color var(--d-fast), background var(--d-fast), transform var(--d-fast); }
.exit__opt:hover { border-color: var(--or-500); background: var(--or-200); transform: translateX(4px); }
.exit__ok { text-align: center; }
.exit__okic { width: 56px; height: 56px; border-radius: 50%; background: var(--em-100); color: var(--em-600); display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
.exit__okic .i { width: 25px; height: 25px; stroke-width: 2.6; }
.exit__ok p { font-size: 14px; color: var(--ink-50); margin-bottom: 24px; }
@media (max-width: 620px) {
  .exit { align-items: flex-end; padding: 0; }
  .exit__card { max-width: 100%; border-radius: 26px 26px 0 0; padding: 32px 24px calc(32px + env(safe-area-inset-bottom)); transform: translateY(100%); }
  .exit.open .exit__card { transform: none; }
}

/* ==========================================================================
   ACCENT PAR SECTION
   Chaque section porte une troisième couleur qui lui est propre, en plus du
   bleu marine et de l'orange. Elle n'apparaît que par touches — une icône,
   un mot, un liseré — pour donner vie sans jamais brouiller la marque.
   ========================================================================== */

/* --- Diagnostic : émeraude (le repère, la réponse trouvée) --- */
#diagnostic .kicker { color: var(--em-600); }
#diagnostic .quiz__dot.on { background: var(--em-500); }
#diagnostic .quiz__dot.done { background: var(--em-400); }
#diagnostic .opt:hover { border-color: var(--em-500); background: rgba(15,174,116,.07); }
#diagnostic .quiz__ic { background: var(--em-100); color: var(--em-600); }
#diagnostic .quiz__lab { color: var(--em-600); }
#diagnostic .quiz::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 3px;
  background: var(--or-500);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}
#diagnostic .quiz { position: relative; overflow: hidden; }

/* --- Pièges : corail (le risque) --- */
#pieges .kicker { color: var(--co-500); }
#pieges .err:hover { background: linear-gradient(90deg, rgba(224,75,56,.045), transparent 60%); }
#pieges .tag { background: var(--co-100); color: var(--co-600); }

/* --- Trajectoires : émeraude déjà porté par la colonne gagnante --- */
#trajectoires .kicker { color: var(--em-400); }

/* --- Méthode : azur (l'analyse, la rigueur) --- */
#methode .kicker { color: var(--az-600); }
#methode .step__badge { color: var(--az-600); }
#methode .step:hover .step__badge { border-color: var(--az-500); box-shadow: 0 8px 24px rgba(53,128,240,.22); }
#methode .steps__fill { background: var(--or-500); }
#methode .pledge__ic { background: var(--az-100); color: var(--az-600); }

/* --- Formations : hiérarchie par le TRAITEMENT, pas par une couleur
   étrangère à la marque. Le violine a été retiré : il ne signifie rien ici
   et se dispute l'attention avec l'orange.
   Les couleurs qui accompagnent l'orange sans le contrarier sont ses
   voisines chaudes (cuivre, ambre) et son complémentaire froid profond
   (le bleu marine de la marque). On s'en tient à ces deux familles :
   - cartes vedettes : orange plein, dégradé cuivre → ambre
   - cartes secondaires : bleu marine sur fond ambre très pâle */
#formations .kicker { color: var(--or-600); }

#formations .dom--big .dom__ic {
  background: var(--or-500);
  box-shadow: 0 10px 26px rgba(240,138,23,.34), inset 0 1px 0 rgba(255,255,255,.5);
}
#formations .dom--big { border-color: rgba(240,138,23,.3); }
#formations .dom--big:hover { border-color: rgba(240,138,23,.6); }

#formations .dom:not(.dom--big) .dom__ic {
  background: var(--or-100);
  color: var(--or-600);
  box-shadow: inset 0 0 0 1px rgba(240,138,23,.22);
}
#formations .dom:not(.dom--big):hover { border-color: rgba(240,138,23,.4); }
#formations .dom:not(.dom--big):hover .dom__ic { background: var(--or-200); color: var(--or-700); }

/* --- Pourquoi nous : émeraude (ce qui est acquis) --- */
#pourquoi .kicker { color: var(--em-400); }
#pourquoi .gains li:nth-child(odd) .gains__ic { background: rgba(46,216,154,.15); color: var(--em-400); }
#pourquoi .gains li:hover { border-color: rgba(46,216,154,.34); }

/* --- Témoignages : or (la distinction) --- */
#avis .kicker { color: #B7861F; }
#avis .av--hi { background: linear-gradient(160deg, #fff, #FFFBF1); border-color: rgba(217,164,60,.32); }
#avis .av blockquote::before { color: var(--gd-500); }

/* --- FAQ : azur (l'information claire) --- */
#faq .kicker { color: var(--az-600); }
#faq .fq.open { border-color: rgba(53,128,240,.4); }
#faq .fq.open .fq__q { color: var(--az-600); }
#faq .fq.open .fq__q .i { color: var(--az-500); }

/* --- Formulaire : émeraude (la validation, la confiance) --- */
#reserver .kicker { color: var(--em-400); }
#reserver .fgroup__h .i { color: var(--em-400); }
#reserver .ftrust .i { color: rgba(46,216,154,.72); }

/* --- Contact : chaque canal garde sa couleur propre --- */
#contact .kicker { color: var(--em-600); }

/* ==========================================================================
   DÉCOR DE SECTION
   Formes qui débordent derrière les blocs. C'est la superposition qui crée la
   richesse visuelle — pas un dégradé de plus. Elles ne portent jamais
   d'information et sont retirées de l'arbre d'accessibilité.
   Chaque section est déjà en overflow:hidden : les formes se rognent
   proprement sur ses bords, ce qui accentue l'impression de débordement.
   ========================================================================== */
.deco { position: absolute; pointer-events: none; z-index: 0; line-height: 0; }
.deco svg { width: 100%; height: 100%; display: block; }
.sec > .pin__inner > .hold,
.sec > .pin__inner > .mid { position: relative; z-index: 1; }

/* Anneaux concentriques */
.deco--rings { width: clamp(280px, 34vw, 520px); aspect-ratio: 1; }
.deco--rings circle { fill: none; stroke: currentColor; stroke-width: 1; }

/* Trame de points */
.deco--dots { width: clamp(150px, 18vw, 250px); aspect-ratio: 1; }
.deco--dots circle { fill: currentColor; }

/* Vagues */
.deco--wave { width: clamp(340px, 46vw, 720px); height: auto; }
.deco--wave path { fill: none; stroke: currentColor; stroke-width: 1.2; }

/* Arc large */
.deco--arc { width: clamp(300px, 40vw, 620px); aspect-ratio: 1; }
.deco--arc path { fill: none; stroke: currentColor; stroke-width: 1.2; }

/* Positions */
.deco--tr { top: -6%; right: -8%; }
.deco--tl { top: -8%; left: -10%; }
.deco--br { bottom: -10%; right: -6%; }
.deco--bl { bottom: -8%; left: -9%; }
.deco--rm { top: 50%; right: -12%; transform: translateY(-50%); }
.deco--lm { top: 46%; left: -12%; transform: translateY(-50%); }

/* Teintes : discrètes sur clair, un peu plus présentes sur sombre */
.sec--white .deco, .sec--cream .sec--mist .deco { color: rgba(11,33,64,.07); }
.sec--white .deco { color: rgba(11,33,64,.07); }
.sec--cream .deco { color: rgba(11,33,64,.06); }
.sec--night .deco, .sec--navy .deco, .sec--grad-navy .deco { color: rgba(255,255,255,.09); }
.deco--warm { color: rgba(240,138,23,.16) !important; }

/* Rotation très lente sur certains anneaux */
.deco--spin svg { animation: decoSpin 120s linear infinite; transform-origin: 50% 50%; }
@keyframes decoSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .deco--spin svg { animation: none; } }

/* ==========================================================================
   AJUSTEMENTS MOBILE
   Relevé sur un écran de 390 px : 34 textes sous 11,5 px et 10 zones
   tactiles sous 40 px de haut. Sur un site dont l'essentiel du trafic vient
   du téléphone, ce sont deux vrais problèmes d'usage, pas des détails.
   ========================================================================== */
@media (max-width: 640px) {

  /* --- Lisibilité : plancher de taille de texte --- */
  .hero__eyebrow,
  .kicker,
  .dossier__id,
  .dossier__state,
  .vs__tag,
  .file__who,
  .ct__b b,
  .ftrust span,
  .band span,
  .av figcaption > div > span,
  .ct-meta span,
  .ct__note,
  .fmini,
  .foot__bar { font-size: 12px; }

  .hero__stat span,
  .dossier__lines b,
  .dossier__foot > span,
  .float b,
  .float span,
  .tag { font-size: 12px; }

  .dossier__lines li,
  .dossier__who > div > span,
  .vs__c span,
  .dom p,
  .step__b p,
  .err p,
  .gains span { font-size: 13.5px; line-height: 1.6; }

  /* --- Zones tactiles : 44 px minimum, recommandation d'accessibilité --- */
  .hero__link,
  .foot__nav a,
  .foot__bar a,
  .navmob a:not(.btn),
  .quiz__back,
  .fok__again {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .foot__nav { gap: var(--s1) var(--s5); }
  .foot__bar div { gap: var(--s4); }

  /* --- Densité : les sections les plus longues étaient à trois écrans --- */
  .sec { padding: clamp(48px, 11vw, 68px) 0; }
  .dom { padding: var(--s4); }
  .dom--big { padding: var(--s5) var(--s4); }
  .dom--big h3 { font-size: 21px; }
  .dom__ic--big { width: 52px; height: 52px; border-radius: 15px; margin-bottom: var(--s3); }
  .dom__ic--big .i { width: 24px; height: 24px; }
  .avis { gap: var(--s3); }
  .av { padding: var(--s5) var(--s4) var(--s4); }
  .av blockquote { font-size: 14px; margin-bottom: var(--s4); }
  .steps { gap: var(--s3); }
  .step__b { padding: var(--s4); }
  .step__badge { width: 48px; height: 48px; }
  .step__badge .i { width: 20px; height: 20px; }
  .pledge { padding: var(--s5) var(--s4); margin-top: var(--s6); }
  .band { padding: var(--s5) var(--s4); gap: var(--s4); }
  .vs__c { padding: var(--s5) var(--s4); }
  .vs__c ul { gap: var(--s4); }
  .err { padding: var(--s4) 0; gap: var(--s3); }
  .form-card { padding: var(--s5) var(--s4); }
  .cta-band { padding: var(--s5) var(--s4); }

  /* --- Le bouton WhatsApp flottant chevauchait la barre CTA --- */
  .fab { bottom: 86px; right: 16px; width: 48px; height: 48px; }
  .fab .i { width: 23px; height: 23px; }
}

@media (max-width: 640px) {
  /* Bouton de fermeture du sondage : 32 px, trop petit pour un doigt */
  .exit__x { width: 44px; height: 44px; }
  .exit__x .i { width: 18px; height: 18px; }
  /* Le logo doit rester confortablement cliquable */
  .nav__logo { min-height: 44px; }
}

@media (max-width: 640px) {
  /* Badge des témoignages : il porte le résultat obtenu, c'est l'information
     que le lecteur cherche — elle ne doit pas être la plus petite du site. */
  .av__badge { font-size: 11.5px; padding: 6px 12px; top: -14px; }
}


/* Titres dans une colonne étroite : à 44 px un titre en deux temps casse en
   cinq lignes et déséquilibre la colonne. On le ramène d'un cran. */
.split__l .h-sec,
.form-wrap__l .h-sec,
.ct-left .h-sec { font-size: clamp(25px, 2.9vw, 38px); }