/* Kelgramme — site vitrine (refonte du 10 novembre 2026). Aucune ressource externe.
   Principes appliqués : lisibilité (taille 17 px, 60 caractères par ligne, pas de majuscules
   forcées dans les titres), contrastes AA, cibles de 44 px, une seule action principale,
   animations réduites et désactivables, contenu toujours visible sans JavaScript. */
@font-face{font-family:Barlow;font-weight:400;font-display:swap;src:url(fonts/barlow-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:Barlow;font-weight:500;font-display:swap;src:url(fonts/barlow-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:Barlow;font-weight:600;font-display:swap;src:url(fonts/barlow-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:Barlow;font-weight:700;font-display:swap;src:url(fonts/barlow-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:600;font-display:swap;src:url(fonts/barlow-condensed-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:700;font-display:swap;src:url(fonts/barlow-condensed-latin-700-normal.woff2) format('woff2')}

:root{
  /* Refonte v2 (10 novembre 2026, après-midi), dans l'esprit des sites de Rick Waalders :
     fond quasi noir neutre, une seule couleur d'accent, titres courts et massifs, textes
     secondaires gris, beaucoup d'air, un seul objet 3D en héros, liens soulignés en pointillés. */
  --bg:#0E0E10;--bg2:#121214;--surf:#151518;--surf2:#1B1B1F;--surf3:#232328;--line:#26262B;
  --tx:#F5F5F6;--tx2:#A1A1AA;--tx3:#71717A;
  --or:#FF8A1F;--or2:#FFA64D;--on-or:#140B03;--gr:#3DBE74;--rd:#E5484D;
  --glow:rgba(255,138,31,.18);
  --ui:Barlow,system-ui,-apple-system,"Segoe UI",sans-serif;
  --disp:Barlow,system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:20px;--max:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:80px}
body{margin:0;background:var(--bg);color:var(--tx);font:400 17px/1.6 var(--ui);overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(900px 600px at 78% 0%,rgba(255,138,31,.07),transparent 60%)}
img,svg{max-width:100%;display:block}
a{color:var(--or2)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--or2);outline-offset:3px;border-radius:6px}
.wrap{position:relative;z-index:1;max-width:var(--max);margin:0 auto;padding:0 16px}
@media(min-width:720px){.wrap{padding:0 28px}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--or);color:var(--on-or);padding:10px 14px;border-radius:10px;font-weight:700}
.skip:focus{left:8px}
main,section,footer{position:relative;z-index:1}

/* En-tête */
header.top{position:sticky;top:0;z-index:50;background:rgba(16,12,10,.86);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid rgba(56,43,34,.6)}
.top .wrap{display:flex;align-items:center;gap:10px;min-height:64px}
.logo{display:flex;align-items:center;gap:10px;color:var(--tx);text-decoration:none;font:700 22px/1 var(--disp);letter-spacing:.04em;text-transform:uppercase;flex-shrink:0}
.logo img{width:34px;height:34px;border-radius:9px}
.langues{display:flex;flex-shrink:0;border:1px solid rgba(255,255,255,.18);border-radius:9px;overflow:hidden}
.langues a{display:flex;align-items:center;min-height:32px;padding:0 9px;font:600 13px/1 var(--disp);letter-spacing:.06em;color:var(--tx2);text-decoration:none}
.langues a:hover,.langues a[aria-current]{color:var(--tx);background:var(--surf)}
nav.menu{display:none;gap:4px;margin-left:auto}
nav.menu a{color:var(--tx2);text-decoration:none;font-weight:500;font-size:15px;padding:10px 12px;border-radius:10px;min-height:44px;display:flex;align-items:center;white-space:nowrap}
nav.menu a:hover,nav.menu a:focus-visible{color:var(--tx);background:var(--surf)}
.menu-btn{display:inline-flex;align-items:center;justify-content:center;margin-left:auto;width:44px;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:transparent;color:var(--tx);cursor:pointer;padding:0}
.menu-btn svg{width:22px;height:22px}
.menu-btn .fermer{display:none}
.menu-open .menu-btn .ouvrir{display:none}.menu-open .menu-btn .fermer{display:block}
.menu-open nav.menu{display:flex;flex-direction:column;gap:2px;position:absolute;left:0;right:0;top:100%;padding:10px 16px 16px;background:var(--bg);border-bottom:1px solid var(--line);margin:0;box-shadow:0 30px 60px rgba(0,0,0,.6)}
.menu-open nav.menu a{font-size:17px;min-height:48px}
@media(min-width:960px){nav.menu{display:flex}.menu-btn{display:none}.menu-open nav.menu{position:static;flex-direction:row;padding:0;background:none;border:0;box-shadow:none}}
@media(min-width:960px) and (max-width:1240px){nav.menu{gap:0}nav.menu a{padding:10px 8px;font-size:14px}.top .cta-long{display:none}.top .cta-court{display:inline}}
.top .btn{min-height:42px;padding:0 16px;font-size:14px;white-space:nowrap}
.cta-court{display:none}
@media(max-width:520px){.top .cta-long{display:none}.top .cta-court{display:inline}.logo{font-size:18px;gap:8px}.logo img{width:30px;height:30px}.top .btn{padding:0 12px;font-size:13px}}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:14px;border:0;cursor:pointer;
  font:700 16px/1.2 var(--ui);text-decoration:none;transition:transform .15s ease,background .2s,box-shadow .2s;text-align:center}
.btn:active{transform:scale(.98)}
.btn.pri{background:var(--or);color:var(--on-or);box-shadow:0 8px 28px -8px var(--glow)}
.btn.pri:hover{background:var(--or2)}
.btn.sec{background:var(--surf2);color:var(--tx);border:1px solid var(--line)}
.btn.sec:hover{background:var(--surf3)}
.btn.lg{min-height:56px;padding:0 28px;font-size:18px}

/* Typographie */
.eyebrow{font:700 13px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--or);margin:0 0 14px}
h1,h2,h3{font-family:var(--disp);font-weight:700;letter-spacing:.005em;line-height:1.02;margin:0}
h1{font-size:clamp(38px,6.2vw,66px)}
h2{font-size:clamp(30px,4.6vw,50px)}
h3{font-size:clamp(22px,2.4vw,27px);line-height:1.1}
h1 em,h2 em{font-style:normal;color:var(--or)}
.lead{font-size:clamp(17px,1.5vw,19.5px);color:var(--tx2);max-width:60ch;margin:16px 0 0}
p{max-width:70ch}
section{padding:clamp(56px,9vw,104px) 0}
.sec-head{max-width:720px;margin-bottom:clamp(28px,4.5vw,48px)}
.sec-head.centre{margin-left:auto;margin-right:auto;text-align:center}
.sec-head.centre .lead,.sec-head.centre p{margin-left:auto;margin-right:auto}
.cartes-3{display:grid;gap:16px}@media(min-width:760px){.cartes-3{grid-template-columns:repeat(3,1fr)}}
.cartes-2{display:grid;gap:16px}@media(min-width:760px){.cartes-2{grid-template-columns:1fr 1fr}}
.cartes-4{display:grid;gap:16px}@media(min-width:640px){.cartes-4{grid-template-columns:1fr 1fr}}@media(min-width:1000px){.cartes-4{grid-template-columns:repeat(4,1fr)}}
.card{background:linear-gradient(180deg,var(--surf),rgba(27,21,18,.7));border:1px solid var(--line);border-radius:var(--r);padding:26px}
.card h3{margin-bottom:10px}
.card p{margin:0;color:var(--tx2)}
.card p+p{margin-top:10px}
.a-3d .card{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

/* Héro */
.hero{padding-top:clamp(32px,6vw,72px);padding-bottom:clamp(40px,6vw,72px)}
.hero .wrap{display:grid;gap:44px;align-items:center}
@media(min-width:960px){.hero .wrap{grid-template-columns:1.1fr .9fr}}
.hero h1{margin:0 0 18px}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;align-items:center}
.reassure{margin:14px 0 0;color:var(--tx2);font-size:15px;line-height:1.5}
.reassure b{color:var(--tx)}
.store-note{margin:10px 0 0;color:var(--tx3);font-size:14px}
.preuves{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}
.preuves li{display:flex;gap:10px;align-items:flex-start;color:var(--tx2);font-size:15px;line-height:1.4}
.preuves svg{width:20px;height:20px;flex:none;color:var(--or);margin-top:2px}

/* Téléphone (démonstration animée) */
.phone-stage{position:relative;display:flex;justify-content:center}
.phone-stage::before{content:"";position:absolute;width:78%;aspect-ratio:1;border-radius:50%;top:8%;background:radial-gradient(circle,var(--glow),transparent 65%);filter:blur(10px)}
.phone{position:relative;z-index:2;width:min(300px,78vw);aspect-ratio:9/19.2;border-radius:44px;background:#0b0907;padding:12px;
  box-shadow:0 0 0 2px #2a211b,0 0 0 9px #18120f,0 40px 80px -30px rgba(0,0,0,.9),0 0 60px -20px var(--glow)}
.phone::after{content:"";position:absolute;top:20px;left:50%;transform:translateX(-50%);width:90px;height:24px;background:#000;border-radius:14px}
.screen{position:relative;height:100%;border-radius:34px;overflow:hidden;background:var(--bg);font-family:var(--ui)}
.scr{position:absolute;inset:0;padding:54px 16px 16px;opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease;display:flex;flex-direction:column;gap:10px}
.scr.on{opacity:1;transform:none}
.scr .bar{display:flex;justify-content:space-between;align-items:center;font:700 15px/1 var(--disp);text-transform:uppercase;letter-spacing:.04em}
.scr .bar span{color:var(--tx3);font:600 11px/1 var(--ui);letter-spacing:.05em}
.prog{height:4px;border-radius:4px;background:var(--surf2);overflow:hidden}.prog i{display:block;height:100%;background:var(--or);width:40%}
.ex{background:var(--surf);border:1px solid var(--line);border-radius:16px;padding:14px}
.ex .t{font:700 22px/1 var(--disp);text-transform:uppercase}
.ex .m{color:var(--tx3);font-size:12px;margin-top:4px}
.steps{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-top:12px}
.steps div{background:var(--surf2);border-radius:10px;padding:8px 4px;text-align:center}
.steps small{display:block;font-size:9.5px;color:var(--tx3);text-transform:uppercase;letter-spacing:.08em}
.steps b{font:700 24px/1.1 var(--disp)}
.okb{margin-top:10px;background:var(--gr);color:#08210F;border-radius:12px;text-align:center;font:700 15px/44px var(--ui)}
.timer{display:flex;flex-direction:column;align-items:center;gap:8px;margin:auto 0}
.ring{width:160px;height:160px}
.ring circle{fill:none;stroke-width:10}
.ring .bg{stroke:var(--surf2)}.ring .fg{stroke:var(--or);stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;stroke-dasharray:440;stroke-dashoffset:0;transition:stroke-dashoffset 1s linear}
.timer .num{font:700 44px/1 var(--disp);margin-top:-110px;margin-bottom:70px}
.timer p{margin:0;color:var(--tx2);font-size:12px;text-align:center}
.rec{margin:auto 0;text-align:center}
.rec .medal{width:96px;height:96px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;background:var(--or);color:var(--on-or);font:700 34px/1 var(--disp);box-shadow:0 0 40px -6px var(--glow)}
.rec h4{margin:0;font:700 26px/1 var(--disp);text-transform:uppercase}
.rec p{margin:8px 0 0;color:var(--tx2);font-size:12.5px}
.chipline{display:flex;gap:6px;flex-wrap:wrap}
.chipline span{font-size:10.5px;background:var(--surf2);border-radius:999px;padding:5px 9px;color:var(--tx2)}
.chipline span.on{background:var(--or);color:var(--on-or);font-weight:700}

/* Bandeau de confiance */
.trust{padding:0}
.trust ul{list-style:none;margin:0;padding:18px 0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media(min-width:720px){.trust ul{grid-template-columns:repeat(4,1fr)}}
.trust li{display:flex;align-items:center;gap:10px;color:var(--tx2);font-weight:600;font-size:15px;line-height:1.35}
.trust svg{width:22px;height:22px;flex:none;color:var(--or)}

/* Comment ça marche */
.etape{position:relative;padding-top:30px}
.etape .num{position:absolute;top:-16px;left:22px;width:40px;height:40px;border-radius:12px;background:var(--or);color:var(--on-or);display:grid;place-items:center;font:700 20px/1 var(--disp)}
.etape ul{margin:12px 0 0;padding-left:18px;color:var(--tx2)}
.etape li{margin:4px 0}

/* Simulateur */
.simu .box{display:grid;gap:22px;align-items:stretch}
@media(min-width:900px){.simu .box{grid-template-columns:1.1fr .9fr}}
.slider{margin-bottom:22px}
.slider label{display:flex;justify-content:space-between;font-weight:600;margin-bottom:10px;gap:10px}
.slider output{font:700 22px/1 var(--disp);color:var(--or)}
.slider .ends{display:flex;justify-content:space-between;color:var(--tx3);font-size:13px;margin-top:6px}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:8px;background:linear-gradient(90deg,var(--or) var(--p,50%),var(--surf3) var(--p,50%))}
input[type=range]::-moz-range-track{height:8px;border-radius:8px;background:var(--surf3)}
input[type=range]::-moz-range-progress{height:8px;border-radius:8px;background:var(--or)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:var(--tx);margin-top:-10px;box-shadow:0 0 0 6px rgba(255,138,31,.35)}
input[type=range]::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:var(--tx);border:0;box-shadow:0 0 0 6px rgba(255,138,31,.35)}
.result{display:flex;flex-direction:column;justify-content:center;text-align:center;position:relative;overflow:hidden}
.result .plan{color:var(--tx3);font-size:14px;text-transform:uppercase;letter-spacing:.08em}
.result .kg{font:700 clamp(64px,9vw,104px)/.9 var(--disp);margin:14px 0 6px}
.result .kg small{font-size:.4em;color:var(--tx2)}
.result .pct{display:inline-block;margin:0 auto;font:700 18px/1 var(--ui);padding:8px 14px;border-radius:999px;background:var(--surf3)}
.result .pct.up{background:rgba(61,190,116,.18);color:#7BE0A6}.result .pct.dn{background:rgba(255,138,31,.16);color:var(--or2)}
.result .msg{color:var(--tx2);margin:18px auto 0;max-width:38ch;min-height:4.8em}
.result .note{color:var(--tx3);font-size:13px;margin-top:10px}

/* Programmes */
.prog-card{display:flex;flex-direction:column}
.prog-card ul{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:9px}
.prog-card li{display:flex;gap:10px;color:var(--tx2);line-height:1.45}
.prog-card li::before{content:"";flex:none;width:8px;height:8px;border-radius:2px;background:var(--or);margin-top:9px;transform:rotate(45deg)}
.prog-card .chiffre{margin-top:auto;padding-top:18px;display:flex;align-items:baseline;gap:10px;color:var(--tx2)}
.prog-card .chiffre b{font:700 44px/1 var(--disp);color:var(--or)}

/* Fonctionnalités */
.feat .ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:rgba(255,138,31,.12);color:var(--or);margin-bottom:16px}
.feat .ic svg{width:26px;height:26px}
.feat h3{font-size:23px}

/* Science */
.bstats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(min-width:900px){.bstats{grid-template-columns:repeat(4,1fr)}}
.bstats li{display:flex;flex-direction:column;gap:8px}
.bstats b{font:700 clamp(40px,5.5vw,64px)/.9 var(--disp);color:var(--or)}
.bstats span{color:var(--tx2);font-size:15px;line-height:1.4}
.biblio{background:linear-gradient(180deg,var(--surf),rgba(27,21,18,.7));border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,4vw,40px)}
.biblio h3{margin:0 0 22px}
.themes{margin:22px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.themes li{background:var(--surf2);border:1px solid var(--line);border-radius:999px;padding:8px 13px;font-size:14px;color:var(--tx2)}
.themes[style] li{border-radius:12px;line-height:1.45}.themes li b{color:var(--tx)}
.bsrc{color:var(--tx2);margin:22px 0 0}
.bmore{margin:22px 0 0}

/* Vie privée */
.donnees .card{display:grid;gap:26px;align-items:center;background:radial-gradient(600px 300px at 90% 10%,rgba(255,138,31,.12),transparent 70%),var(--surf)}
@media(min-width:900px){.donnees .card{grid-template-columns:1.2fr .8fr;padding:44px}}
.lockgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:420px){.lockgrid{grid-template-columns:1fr}}
.lockgrid div{background:var(--surf2);border-radius:14px;padding:16px;font-weight:600;display:flex;gap:10px;align-items:center;line-height:1.3}
.lockgrid svg{width:22px;height:22px;color:var(--or);flex:none}

/* Fondateur */
.kelly .wrap{display:grid;gap:30px;align-items:center}
@media(min-width:900px){.kelly .wrap{grid-template-columns:.7fr 1.3fr}}
.parcours{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px;font-size:.95rem}
.parcours li{padding:0 0 0 16px;border-left:2px solid var(--or);line-height:1.5;opacity:.92}
.parcours b{display:block;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.parcours li:first-child{grid-column:1/-1}
@media(min-width:1100px){.parcours{grid-template-columns:1fr 1fr;gap:10px 22px}}
.parcours-fin{margin-top:16px;opacity:.85}
.parcours-fin a{color:inherit;text-decoration:underline}
.portrait{position:relative;margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;border:1px solid var(--line);background:var(--surf)}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.portrait figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 18px 16px;background:linear-gradient(transparent,rgba(16,12,10,.88));color:var(--tx);font:600 15px/1.35 var(--ui)}
@media(max-width:899px){.portrait{width:100%;max-width:300px;margin:0 auto}}
.creds{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px}
@media(min-width:640px){.creds{grid-template-columns:repeat(2,1fr)}}
.creds li{background:var(--surf2);border:1px solid var(--line);border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.creds b{font:700 24px/1.05 var(--disp);color:var(--or)}
.creds span{color:var(--tx2);font-size:15px;line-height:1.4}

/* Tarifs */
.toggle{display:inline-flex;background:var(--surf);border:1px solid var(--line);border-radius:999px;padding:4px;margin-bottom:24px;flex-wrap:wrap}
.toggle button{border:0;background:none;color:var(--tx2);font:700 15px/1 var(--ui);padding:12px 20px;border-radius:999px;cursor:pointer;min-height:44px}
.toggle button[aria-pressed=true]{background:var(--or);color:var(--on-or)}
.prices{display:grid;gap:16px}@media(min-width:820px){.prices{grid-template-columns:1fr 1fr}}
.price h3{font-size:28px}
.price .amt{font:700 56px/1 var(--disp);margin:14px 0 4px}
.price .amt small{font:500 16px/1 var(--ui);color:var(--tx2);letter-spacing:0;word-spacing:normal;margin-left:6px;white-space:nowrap}
.price .sub{color:var(--tx3);font-size:14.5px;min-height:1.6em;line-height:1.45}
.price ul{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:10px;color:var(--tx2)}
.price li{display:flex;gap:10px;line-height:1.45}
.price li svg{width:20px;height:20px;color:var(--gr);flex:none;margin-top:3px}
.price.prem{border-color:rgba(255,138,31,.6);box-shadow:0 0 0 1px rgba(255,138,31,.25),0 30px 60px -40px var(--glow)}
.badge{display:inline-block;background:var(--or);color:var(--on-or);font:700 12px/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;padding:7px 10px;border-radius:8px;margin-bottom:12px}
.price .btn{margin-top:22px;width:100%}
.fineprint{color:var(--tx3);font-size:13.5px;margin-top:18px;max-width:80ch}

/* FAQ */
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;padding:20px 0;font:600 18px/1.35 var(--ui);min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:700 28px/1 var(--disp);color:var(--or);transition:transform .2s;flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 22px;color:var(--tx2);max-width:75ch}

/* Appel final et liste d'attente */
.final .card{text-align:center;padding:clamp(36px,6vw,72px) 20px;background:radial-gradient(700px 300px at 50% 0%,rgba(255,138,31,.18),transparent 70%),var(--surf)}
.final .lead,.final p{margin-left:auto;margin-right:auto}
.final .cta{justify-content:center}
.waitlist{max-width:540px;margin:34px auto 0;text-align:left;background:var(--surf2);border-radius:14px;padding:20px}
.waitlist b{display:block;margin-bottom:6px;font-size:18px}
.waitlist p{margin:0;color:var(--tx2);font-size:14.5px}
.wl-ligne{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.wl-ligne input{flex:1 1 200px;min-height:48px;border-radius:12px;border:1px solid var(--line);background:var(--surf);color:var(--tx);padding:0 14px;font:inherit;font-size:16px}
.wl-ligne input:focus{outline:2px solid var(--or);outline-offset:1px}
.wl-ok{display:flex;gap:10px;align-items:flex-start;margin-top:12px;font-size:13.5px;color:var(--tx2);line-height:1.45}
.wl-ok input{margin-top:3px;accent-color:var(--or);flex:none;width:20px;height:20px}
.wl-ok a{color:var(--or)}
.wl-piege{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.wl-msg{min-height:1.4em;margin-top:10px!important;font-weight:600}
.wl-msg.ok{color:var(--gr)}.wl-msg.err{color:#ff8a7a}

/* Pied de page */
footer{border-top:1px solid var(--line);padding:40px 0 60px;color:var(--tx3);font-size:14px}
footer .wrap{display:grid;gap:20px}
@media(min-width:820px){footer .wrap{grid-template-columns:1fr auto}}
footer nav{display:flex;flex-wrap:wrap;gap:6px 18px}
footer a{color:var(--tx2);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}footer a:hover{color:var(--tx)}
footer .legal{grid-column:1/-1;font-size:12.5px;line-height:1.6;max-width:none}

/* Pages intérieures */
.page{padding:clamp(40px,7vw,80px) 0}
.page h1{font-size:clamp(34px,5.5vw,60px);margin-bottom:20px}
.prose{max-width:760px}
.prose h2{font-size:clamp(24px,3.2vw,34px);margin:44px 0 12px}
.prose h3{margin:28px 0 8px}
.prose p,.prose li{color:var(--tx2)}
.prose .maj{color:var(--tx3)}
.prose .biblio ol{padding-left:1.4em;margin:0}
.prose .biblio li{margin:0 0 10px;font-size:15px}
.prose .biblio{margin-top:22px}
.note-fr{border-left:3px solid var(--tx3);padding:10px 14px;background:var(--surf);border-radius:8px;color:var(--tx2);font-size:15px}
.sommaire{margin:0 0 28px;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.sommaire a{display:inline-flex;align-items:center;min-height:40px;padding:0 13px;border-radius:999px;background:var(--surf2);border:1px solid var(--line);color:var(--tx2);text-decoration:none;font-size:14px}
.sommaire a:hover{color:var(--tx)}

/* Formulaire de réclamation */
.reclam{display:grid;gap:14px;margin:22px 0;padding:20px;background:var(--surf);border:1px solid rgba(255,255,255,.1);border-radius:16px}
.rc-ligne{display:grid;gap:6px}
.rc-ligne label{font-weight:600;font-size:15px;color:var(--tx)}
.rc-ligne label small{font-weight:400;color:var(--tx3)}
.reclam input[type=text],.reclam input[type=email],.reclam select,.reclam textarea{width:100%;box-sizing:border-box;padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.25);color:var(--tx);font:inherit;font-size:16px;min-height:48px}
.reclam textarea{resize:vertical;min-height:150px}
.reclam select option{color:#111}
.rc-compte{color:var(--tx3);font-size:12.5px;justify-self:end}
.reclam .btn.pri{justify-self:start}

/* Apparition douce au défilement (seule animation de défilement conservée) */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
.reveal.in,.no-js .reveal{opacity:1;transform:none}

/* Décor : halo statique, scène 3D en arrière-plan sur ordinateur seulement */
.halo{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;filter:blur(60px)}
.halo i{position:absolute;border-radius:50%;opacity:.45}
.halo i:nth-child(1){width:46vw;height:46vw;left:-10vw;top:-12vw;background:radial-gradient(circle,rgba(255,138,31,.45),transparent 65%)}
.halo i:nth-child(2){width:40vw;height:40vw;right:-8vw;top:20vh;background:radial-gradient(circle,rgba(74,108,255,.3),transparent 65%)}
#scene3d{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.2s ease}
.a-3d #scene3d{opacity:1}
@media(max-width:899px){#scene3d{display:none}}

@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important;animation:none!important}
  .reveal{opacity:1;transform:none}.scr{transition:none}
}
.note-vp{margin:14px 0 0;color:var(--tx3);font-size:14px;line-height:1.5}.note-vp a{color:var(--or)}


/* ============================================================================
   Refonte v2 — « esprit Waalders » : les règles ci-dessous priment sur celles du dessus.
   ============================================================================ */
body{font-size:16px;line-height:1.65}
p,li{color:var(--tx2)}
p b,li b{color:var(--tx)}
h1,h2,h3{font-family:var(--ui);font-weight:700;letter-spacing:-.025em;line-height:1.02;color:var(--tx)}
h1{font-size:clamp(38px,5.4vw,70px);max-width:16ch}
h2{font-size:clamp(30px,4.4vw,54px);max-width:18ch}
h3{font-size:clamp(20px,2vw,24px);letter-spacing:-.015em;line-height:1.15}
h1 em,h2 em{color:var(--tx2)}
.eyebrow{font:500 12.5px/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--tx3);margin:0 0 18px;display:flex;align-items:center;gap:12px}
main{counter-reset:sec}
section:not(.hero) .eyebrow::before{counter-increment:sec;content:counter(sec,decimal-leading-zero);color:var(--or);font-weight:700;letter-spacing:0}
.lead{font-size:clamp(16px,1.3vw,18px);color:var(--tx2);max-width:56ch;margin:18px 0 0}
section{padding:clamp(56px,7vw,96px) 0}   /* 11/11 : moins de vide entre les rubriques (défilement par rubrique) */
.sec-head{max-width:680px;margin-bottom:clamp(32px,5vw,60px)}
.lien{color:var(--tx);text-decoration:underline dotted;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:var(--tx3)}
.lien:hover{text-decoration-color:var(--tx)}

/* En-tête : discret, logo en bas de casse, trois entrées, une action */
header.top{background:rgba(14,14,16,.72);border-bottom:1px solid rgba(38,38,43,.7)}
.top .wrap{min-height:68px;gap:14px}
.logo{font:700 19px/1 var(--ui);letter-spacing:-.02em;text-transform:none}
.logo img{width:30px;height:30px;border-radius:8px}
.langues{border-color:var(--line);border-radius:999px}
.langues a{font:600 12px/1 var(--ui);letter-spacing:.08em;color:var(--tx3)}
.langues a:hover,.langues a[aria-current]{color:var(--tx);background:var(--surf2)}
nav.menu a{color:var(--tx2);font-weight:500;font-size:14.5px;letter-spacing:-.005em}
nav.menu a:hover,nav.menu a:focus-visible{color:var(--tx);background:transparent;text-decoration:underline dotted;text-underline-offset:6px;text-decoration-color:var(--tx3)}
.menu-btn{border-color:var(--line)}
.menu-open nav.menu{border-bottom-color:var(--line)}

/* Boutons : une pastille d'accent, une pastille fantôme */
.btn{border-radius:999px;font:600 15.5px/1.2 var(--ui);letter-spacing:-.005em;min-height:50px;padding:0 24px;transition:transform .15s ease,background .2s,border-color .2s,color .2s}
.btn.pri{box-shadow:none}
.btn.pri:hover{background:var(--or2)}
.btn.sec{background:transparent;color:var(--tx);border:1px solid var(--line)}
.btn.sec:hover{background:var(--surf2);border-color:var(--tx3)}
.btn.lg{min-height:58px;padding:0 30px;font-size:17px}
.top .btn{min-height:40px;padding:0 16px;font-size:14px}

/* Cartes plates, filet fin, sans dégradé ni flou */
.card,.biblio,.donnees .card,.final .card{background:var(--surf);border:1px solid var(--line);border-radius:var(--r);box-shadow:none}
.a-3d .card{backdrop-filter:none;-webkit-backdrop-filter:none}
.card{padding:30px 28px}
.card p{color:var(--tx2)}
.etape .num{background:transparent;color:var(--or);border:1px solid var(--line);border-radius:999px;font:700 16px/1 var(--ui);top:-18px}
.prog-card li::before{background:var(--tx3);width:6px;height:6px;margin-top:10px}
.prog-card .chiffre b{font:700 44px/1 var(--ui);letter-spacing:-.03em;color:var(--tx)}
.feat .ic{background:var(--surf2);color:var(--tx);border:1px solid var(--line);border-radius:999px}
.bstats b{font:700 clamp(40px,5.5vw,64px)/.9 var(--ui);letter-spacing:-.035em;color:var(--tx)}
.creds b{font:700 24px/1.05 var(--ui);letter-spacing:-.02em;color:var(--tx)}
.themes li{background:transparent;border-color:var(--line);color:var(--tx2)}
.badge{border-radius:999px;background:var(--surf3);color:var(--tx)}
.price .amt{font:700 56px/1 var(--ui);letter-spacing:-.035em;background:none}
.price .amt span{background:none}
.price.prem{border-color:var(--tx3);box-shadow:none}
.toggle{background:var(--surf);border-color:var(--line)}
.toggle button[aria-pressed=true]{background:var(--tx);color:var(--bg)}
.slider output{font:700 22px/1 var(--ui);color:var(--tx)}
.result .kg{font:700 clamp(64px,9vw,104px)/.9 var(--ui);letter-spacing:-.04em}
.rec .medal{box-shadow:none}
.trust ul{border-color:var(--line)}
.trust li{color:var(--tx3);font-weight:500;font-size:14px}
.trust svg{color:var(--tx2)}
.faq summary{font:600 17px/1.35 var(--ui)}
.faq summary::after{font:400 26px/1 var(--ui);color:var(--tx3)}
footer{border-top-color:var(--line);color:var(--tx3)}
footer a{color:var(--tx2)}footer a:hover{color:var(--tx);text-decoration:underline dotted;text-underline-offset:5px}
.halo{display:none}

/* Héros plein écran : un titre, une action, la mascotte à droite (3D sur ordinateur, image sinon) */
.hero{min-height:calc(100svh - 68px);display:flex;align-items:center;padding-top:clamp(24px,5vw,56px);padding-bottom:clamp(40px,6vw,72px)}
.hero .wrap{width:100%;gap:28px}
@media(min-width:960px){.hero .wrap{grid-template-columns:1.05fr .95fr}}
.hero h1{margin:0 0 22px}
.hero .lead{max-width:50ch}
.cta{margin-top:32px;gap:22px}
.reassure{color:var(--tx3);font-size:14px}.reassure b{color:var(--tx2)}
.store-note{color:var(--tx3);font-size:13.5px}
.hero-mascotte{display:block;width:auto;height:min(300px,36svh);margin:0 auto;filter:drop-shadow(0 30px 50px rgba(0,0,0,.6))}
@media(min-width:960px){.hero-mascotte{height:min(560px,62vh);margin-left:auto;margin-right:10%}}
.a-3d .hero-mascotte{opacity:0}            /* la scène 3D prend le relais, au même endroit */
.hero-droite{position:relative;display:flex;justify-content:center;align-items:center;min-height:300px}
@media(max-width:959px){.hero-droite{order:-1;min-height:0}}

/* Comment ça marche : trois étapes à gauche, la démonstration du téléphone à droite */
.etapes .duo{display:grid;gap:28px;align-items:center}
@media(min-width:900px){.etapes .duo{grid-template-columns:1fr .8fr}.etapes .duo .cartes-3{grid-template-columns:1fr}}
.phone{box-shadow:0 0 0 2px #26262B,0 0 0 9px #141416,0 40px 80px -30px rgba(0,0,0,.9)}
.phone-stage::before{display:none}

/* Pour les hommes, pour les femmes : les deux avatars de l'appli */
.publics .duo-pub{display:grid;gap:18px}
@media(min-width:820px){.publics .duo-pub{grid-template-columns:1fr 1fr}}
.pub{display:grid;grid-template-columns:150px 1fr;gap:22px;align-items:center;padding:24px}
@media(max-width:480px){.pub{grid-template-columns:1fr;text-align:center}.pub img{margin:0 auto}}
.pub img{width:150px;height:auto;filter:drop-shadow(0 20px 30px rgba(0,0,0,.55))}
.pub h3{margin:0 0 10px}
.pub ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.pub li{display:flex;gap:10px;line-height:1.45;font-size:15px}
.pub li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--or);margin-top:9px}
.pub .note{margin:12px 0 0;font-size:13.5px;color:var(--tx3)}

/* Scène 3D : seulement derrière le héros, s'efface au défilement */
#scene3d{opacity:0;transition:opacity 1.2s ease}
.a-3d #scene3d{opacity:var(--s3d,1)}


/* ============================================================================
   v3 — héros cinématique (référence : capture envoyée par Kelly, esprit atmospherik / peachweb) :
   scène plein écran, titre massif et léger, légende mono, menu flottant en bas, écran de chargement.
   ============================================================================ */
.topchrome{position:absolute;top:0;left:0;right:0;z-index:40;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px clamp(16px,3vw,36px)}
.topchrome .logo{font:700 18px/1 var(--ui);letter-spacing:-.02em;color:var(--tx);text-decoration:none;display:flex;align-items:center;gap:10px}
.tagbox{margin-left:auto;border:1px solid rgba(255,255,255,.18);padding:10px 14px;font:500 10.5px/1.5 var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);letter-spacing:.14em;color:var(--tx2);text-align:center;background:rgba(14,14,16,.35);backdrop-filter:blur(8px)}
.topchrome .langues{border-color:rgba(255,255,255,.18);background:rgba(14,14,16,.35)}
@media(max-width:720px){.tagbox{display:none}}
:root{--mono:ui-monospace,"SF Mono","Roboto Mono","DejaVu Sans Mono",Menlo,monospace}

/* Menu flottant en bas, à portée de pouce */
.dock{position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:4px;padding:6px;border-radius:999px;
  background:rgba(20,20,24,.72);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);box-shadow:0 20px 60px -20px rgba(0,0,0,.9)}
.dock a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border-radius:999px;color:var(--tx2);text-decoration:none;font:500 14px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.dock a:hover,.dock a:focus-visible{color:var(--tx);background:rgba(255,255,255,.06)}
.dock .dock-logo{padding:0 10px}
.dock .dock-logo img{width:28px;height:28px;border-radius:8px;display:block}
.dock .dock-cta{background:var(--or);color:var(--on-or);font-weight:700}
.dock .dock-cta:hover{background:var(--or2);color:var(--on-or)}
.dock .cta-court{display:none}
@media(max-width:560px){.dock a{padding:0 11px;font-size:12px}.dock .cta-long{display:none}.dock .cta-court{display:inline}}
body{padding-bottom:90px}
footer{padding-bottom:110px}
.souris{position:fixed;right:clamp(16px,3vw,36px);bottom:max(22px,env(safe-area-inset-bottom));z-index:55;width:22px;height:36px;border:1.5px solid rgba(255,255,255,.4);border-radius:12px;display:none}
.souris i{position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:var(--tx);animation:souris 1.6s ease-in-out infinite}
@keyframes souris{0%{transform:translateY(0);opacity:1}70%{transform:translateY(12px);opacity:0}100%{opacity:0}}
@media(min-width:960px){.souris{display:block}}
.scrolled .souris{display:none}

/* Héros : titre massif et léger, légende mono, mascotte à droite */
.hero{min-height:100svh;padding-top:104px;padding-bottom:140px;align-items:flex-start}
.hero .eyebrow{display:none}
.hero h1{font-weight:400;letter-spacing:-.035em;line-height:.98;font-size:clamp(34px,min(4.4vw,7vh),64px);max-width:18ch;margin-bottom:16px}
.hero h1 em{display:block;color:var(--tx);opacity:.92}
.hero .lead{font-size:clamp(15px,min(1.25vw,2vh),18px);max-width:38ch;color:var(--tx);opacity:.85}
.hero .cta{margin-top:30px}
.hero .reassure,.hero .store-note{display:none}
.hero-cap{position:static;margin:48px 0 0;font:500 10.5px/1.7 var(--mono);letter-spacing:.14em;color:var(--tx3);max-width:44ch}
@media(max-width:959px){.hero-cap{display:none}.hero{padding-top:84px}.hero h1{font-size:clamp(40px,11vw,64px)}}
.hero{position:relative}
.hero .wrap{position:relative;z-index:2}
.hero-droite{min-height:0}
@media(min-width:960px){.hero-mascotte{height:min(640px,72vh);margin-right:4%}}
.a-3d .hero-mascotte{opacity:0}

/* Fond : lumières floues façon bokeh, teinte pétrole */
.bokeh{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:radial-gradient(1200px 700px at 72% 40%,rgba(28,74,78,.55),transparent 65%),radial-gradient(900px 600px at 15% 80%,rgba(20,40,60,.5),transparent 65%),linear-gradient(180deg,#0A1114 0%,#0E0E10 60%)}
.bokeh i{position:absolute;border-radius:50%;filter:blur(18px);opacity:.55;will-change:transform;background:radial-gradient(circle,rgba(190,235,230,.9),rgba(120,200,200,.25) 45%,transparent 70%)}
.bokeh i:nth-child(1){width:140px;height:140px;left:6%;top:18%}
.bokeh i:nth-child(2){width:90px;height:90px;left:22%;top:62%;opacity:.35}
.bokeh i:nth-child(3){width:200px;height:200px;left:48%;top:8%;opacity:.3}
.bokeh i:nth-child(4){width:120px;height:120px;left:80%;top:70%;opacity:.4}
.bokeh i:nth-child(5){width:70px;height:70px;left:36%;top:84%;opacity:.45}
.bokeh i:nth-child(6){width:160px;height:160px;left:90%;top:20%;opacity:.3}
.scrolled .bokeh{opacity:.5;transition:opacity .8s}
section:not(.hero) .wrap{position:relative}
section:not(.hero){background:rgba(14,14,16,.6)}
.a-3d #scene3d{opacity:var(--s3d,1)}

/* Écran de chargement : seulement quand la scène 3D se prépare */
.chargeur{position:fixed;inset:0;z-index:200;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#0A0F12;color:var(--tx);transition:opacity .7s ease}
.chargeur.on{display:flex}.chargeur.fin{opacity:0;pointer-events:none}
.chargeur img{width:40px;height:40px;border-radius:10px}
.chargeur b{font:700 22px/1 var(--ui);letter-spacing:-.02em}
.chargeur span{font:500 11px/1 var(--mono);letter-spacing:.14em;color:var(--tx3);text-transform:uppercase;min-height:1em}
.chargeur svg{width:60px;height:60px;margin-top:22px;transform:rotate(-90deg)}
.chargeur circle{fill:none;stroke-width:2}
.chargeur circle:first-child{stroke:rgba(255,255,255,.12)}
#chargeur-arc{stroke:var(--tx);stroke-dasharray:163.4;stroke-dashoffset:163.4;transition:stroke-dashoffset .3s}

/* ordre des couches : lumières floues (0) < scène 3D (1) < contenu (2) < chrome (40+) */
.bokeh{z-index:0}
#scene3d{z-index:1}
main,section,footer{z-index:2}
.hero .wrap{z-index:3}

/* Badge Google Play dans le héros (image officielle, lien vers la fiche de l'appli) */
.badge-play{display:inline-flex;align-items:center}.badge-play img{height:56px;width:auto;display:block}
.cta{align-items:center}
.hero .sous{margin:0 0 14px;font:600 clamp(17px,min(1.4vw,2.4vh),21px)/1.35 var(--ui);color:var(--tx);letter-spacing:-.01em;max-width:40ch}
.hero .lead{max-width:46ch}

/* v6 — page refaite d'après le déroulé de Kelly (10 novembre, soir) */
.hero .preuves{grid-template-columns:1fr;gap:10px;margin-top:26px;max-width:46ch}
.hero .preuves li{align-items:center;gap:12px;color:var(--tx2);font-size:15px}
.hero .preuves .ic{width:38px;height:38px;border-radius:999px;background:var(--surf2);border:1px solid var(--line);color:var(--tx);display:grid;place-items:center;flex:none;margin:0}
.hero .preuves .ic svg{width:19px;height:19px}
.hero .preuves b{color:var(--tx)}
.hero .reassure{margin-top:14px;color:var(--tx2);font-size:14px;letter-spacing:.02em}
.constat .sec-head{max-width:760px}
.constat .lead.accent{color:var(--tx);font-weight:600;margin-top:14px}
.prog-card .ic{width:44px;height:44px;border-radius:999px;background:var(--surf2);border:1px solid var(--line);color:var(--tx);display:grid;place-items:center;margin-bottom:14px}
.prog-card .ic svg{width:22px;height:22px}
.prog-card .note{margin-top:12px;font-size:14px;color:var(--tx3)}
.lockgrid{grid-template-columns:1fr}
.lockgrid div{align-items:flex-start;font-weight:500;line-height:1.5}
.lockgrid .ic{width:36px;height:36px;border-radius:999px;background:var(--surf3);color:var(--tx);display:grid;place-items:center;flex:none;margin:0}
.lockgrid .ic svg{width:18px;height:18px}
.lockgrid b{color:var(--tx)}
.faq .sec-head{margin-bottom:10px}
.faq .bmore{margin-top:18px}
@media(max-width:720px){.dock .dock-long{display:none}}

/* Barre flottante des tarifs (mobile) */
.tarif-bar{position:fixed;left:12px;right:12px;bottom:calc(max(14px,env(safe-area-inset-bottom)) + 64px);z-index:59;display:none;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 10px 16px;border-radius:16px;background:rgba(18,20,26,.94);border:1px solid var(--line);box-shadow:0 18px 40px rgba(0,0,0,.5);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transform:translateY(12px);opacity:0;transition:opacity .25s,transform .25s}
.tarif-bar.on{display:flex;opacity:1;transform:none}
.tarif-bar .tb-prix b{font:700 22px/1 var(--ui);letter-spacing:-.02em;color:var(--tx)}
.tarif-bar .tb-prix small{font:500 13px/1 var(--ui);color:var(--tx2);margin-left:4px;white-space:nowrap}
.tarif-bar .btn{min-height:42px;padding:0 14px;font-size:13.5px;white-space:nowrap}
@media(min-width:900px){.tarif-bar{display:none!important}}
/* Cartes de programme : la carte survolée pilote la mascotte */
.prog-card[data-exo]{cursor:pointer;transition:border-color .25s,transform .25s,box-shadow .25s}
.prog-card.on,.prog-card[data-exo]:hover{border-color:rgba(255,138,31,.55);transform:translateY(-3px);box-shadow:0 20px 50px -30px var(--glow)}

/* Lien vers le fondateur dans le héros */
.lien-fondateur{display:inline-flex;align-items:center;gap:8px;margin-top:18px;color:var(--tx2);text-decoration:none;font:500 14px/1 var(--ui);border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.lien-fondateur:hover,.lien-fondateur:focus-visible{color:var(--tx);border-color:var(--or)}
/* Défilement par rubrique (demande de Kelly, 11/11) : un cran de molette amène au début de la section
   suivante, en douceur ; les sections plus hautes que l'écran se parcourent librement (proximity) ;
   rien sur mobile ni quand l'utilisateur demande moins d'animations. */
/* (le défilement par rubrique est géré par site.js, sans scroll-snap CSS : les deux se gênaient) */

/* Points forts (section « La différence Kelgramme », 11/11) */
.forces{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.forces li{display:flex;flex-direction:column;gap:8px;padding:20px 22px;border-radius:18px;background:var(--surf);border:1px solid var(--line)}
.forces li b{font:600 17px/1.3 var(--ui);color:var(--tx)}
.forces li span{font-size:14.5px;line-height:1.55;color:var(--tx2)}
.forces li::before{content:"";width:28px;height:3px;border-radius:3px;background:var(--or)}

/* ================= Couche « futuriste » (12 novembre 2026) =================
   Fond en profondeur (halos + grille en perspective), cartes en verre à liseré lumineux,
   titres en dégradé, boutons à reflet, apparition avec mise au point. Tout est coupé
   quand la personne demande moins d'animations. */
:root{--cy:#38E1FF;--vi:#7C5CFF}
html::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(55% 45% at 80% 12%,rgba(124,92,255,.20),transparent 70%),
             radial-gradient(48% 42% at 8% 78%,rgba(56,225,255,.12),transparent 70%),
             radial-gradient(40% 34% at 52% 52%,rgba(255,138,31,.07),transparent 70%)}
body::after{content:"";position:fixed;left:-25%;right:-25%;bottom:0;height:56vh;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(56,225,255,.26) 1px,transparent 1px),linear-gradient(90deg,rgba(56,225,255,.26) 1px,transparent 1px);
  background-size:60px 60px;transform:perspective(620px) rotateX(57deg);transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(to top,#000 5%,transparent 88%);mask-image:linear-gradient(to top,#000 5%,transparent 88%);
  animation:fx-grille 8s linear infinite;opacity:.75}
@keyframes fx-grille{to{background-position:0 60px,0 0}}

h1 em,h2 em,.hero h1 em{background:linear-gradient(92deg,var(--or) 0%,#FFD9A0 38%,var(--cy) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:1}
.eyebrow{color:var(--cy);letter-spacing:.2em;text-shadow:0 0 18px rgba(56,225,255,.35)}

.card,.forces li,.faq details{border:1px solid transparent;
  background:linear-gradient(180deg,rgba(24,24,30,.74),rgba(14,14,18,.66)) padding-box,
             linear-gradient(135deg,rgba(56,225,255,.55),rgba(255,255,255,.07) 28%,rgba(255,255,255,.05) 72%,rgba(255,138,31,.55)) border-box;
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease}
.card:hover,.forces li:hover{transform:translateY(-4px);box-shadow:0 22px 60px -26px rgba(56,225,255,.55),0 0 0 1px rgba(56,225,255,.10) inset}
.card{background-image:radial-gradient(420px circle at var(--mx,50%) var(--my,-40%),rgba(56,225,255,.10),transparent 60%),
             linear-gradient(180deg,rgba(24,24,30,.74),rgba(14,14,18,.66)),
             linear-gradient(135deg,rgba(56,225,255,.55),rgba(255,255,255,.07) 28%,rgba(255,255,255,.05) 72%,rgba(255,138,31,.55));
  background-origin:padding-box,padding-box,border-box;background-clip:padding-box,padding-box,border-box}
.card.prem{box-shadow:0 0 0 1px rgba(255,138,31,.35),0 30px 80px -40px rgba(255,138,31,.6)}

.btn.pri{position:relative;overflow:hidden;background:linear-gradient(92deg,var(--or),var(--or2));
  box-shadow:0 0 0 1px rgba(255,166,77,.5),0 10px 34px -10px rgba(255,138,31,.75)}
.btn.pri::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:fx-reflet 4.5s ease-in-out infinite}
@keyframes fx-reflet{0%,62%{left:-60%}100%{left:130%}}
.btn.sec{border-color:rgba(56,225,255,.35);box-shadow:0 0 22px -10px rgba(56,225,255,.6) inset}

.dock{border:1px solid rgba(56,225,255,.22);box-shadow:0 18px 50px -18px rgba(0,0,0,.9),0 0 30px -14px rgba(56,225,255,.55);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3)}

.reveal{filter:blur(8px);transform:translateY(22px) scale(.985);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1),filter .7s ease}
.reveal.in,.no-js .reveal{filter:none;transform:none}

#fx-prog{position:fixed;top:0;left:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);z-index:80;pointer-events:none;
  background:linear-gradient(90deg,var(--or),var(--cy));box-shadow:0 0 12px rgba(56,225,255,.8)}

@media(prefers-reduced-motion:reduce){body::after,.btn.pri::after{animation:none}.reveal{filter:none;transform:none;transition:opacity .3s}.card:hover,.forces li:hover{transform:none}}
/* Cadre de visée et socle holographique derrière le personnage 3D */
.fx-hud .fx-cadre{position:absolute;inset:3% 7%;pointer-events:none;opacity:.75;
  background:
    linear-gradient(var(--cy),var(--cy)) 0 0/28px 1px no-repeat,linear-gradient(var(--cy),var(--cy)) 0 0/1px 28px no-repeat,
    linear-gradient(var(--cy),var(--cy)) 100% 0/28px 1px no-repeat,linear-gradient(var(--cy),var(--cy)) 100% 0/1px 28px no-repeat,
    linear-gradient(var(--or),var(--or)) 0 100%/28px 1px no-repeat,linear-gradient(var(--or),var(--or)) 0 100%/1px 28px no-repeat,
    linear-gradient(var(--or),var(--or)) 100% 100%/28px 1px no-repeat,linear-gradient(var(--or),var(--or)) 100% 100%/1px 28px no-repeat,
    linear-gradient(rgba(56,225,255,.05) 1px,transparent 1px) 0 0/100% 34px}
.fx-hud .fx-socle{position:absolute;left:50%;bottom:1%;width:78%;aspect-ratio:3.4/1;transform:translateX(-50%);border-radius:50%;pointer-events:none;
  border:1px solid rgba(56,225,255,.6);background:radial-gradient(closest-side,rgba(56,225,255,.20),rgba(124,92,255,.08) 60%,transparent 72%);
  box-shadow:0 0 46px rgba(56,225,255,.40),inset 0 0 36px rgba(56,225,255,.28);animation:fx-socle 3.4s ease-in-out infinite}
@keyframes fx-socle{0%,100%{opacity:.65;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.05)}}
@media(prefers-reduced-motion:reduce){.fx-hud .fx-socle{animation:none}}
@media(max-width:899px){body::after{height:38vh;opacity:.5}.fx-hud .fx-cadre{inset:2% 3%}}

/* ================= Couche futuriste, 2e passe (12 novembre 2026) : néon, mouvement, repères ================= */
@property --fx-a{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes fx-tour{to{--fx-a:360deg}}
@keyframes fx-degrade{to{background-position:200% 0}}
@keyframes fx-balaye{0%{top:3%;opacity:0}8%,92%{opacity:.9}100%{top:96%;opacity:0}}
@keyframes fx-defile{to{transform:translateX(-50%)}}
@keyframes fx-entree{from{opacity:0;transform:translateY(26px);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
@keyframes fx-pouls{0%,100%{box-shadow:0 0 0 1px rgba(255,166,77,.55),0 0 26px -4px rgba(255,138,31,.85)}50%{box-shadow:0 0 0 1px rgba(255,166,77,.8),0 0 46px 2px rgba(255,138,31,.95)}}

/* Titres : dégradé qui circule, halo néon */
h1 em,h2 em,.hero h1 em{background-image:linear-gradient(92deg,var(--or),#FFD9A0 25%,var(--cy) 50%,var(--vi) 75%,var(--or));background-size:200% 100%;animation:fx-degrade 9s linear infinite}
.hero h1 em{filter:drop-shadow(0 0 16px rgba(56,225,255,.45)) drop-shadow(0 0 34px rgba(255,138,31,.28))}
h2 em{filter:drop-shadow(0 0 12px rgba(56,225,255,.30))}
.hero h1{animation:fx-entree .9s cubic-bezier(.2,.7,.2,1) both}
.hero .lead{animation:fx-entree .9s .15s cubic-bezier(.2,.7,.2,1) both}
.hero .cta{animation:fx-entree .9s .3s cubic-bezier(.2,.7,.2,1) both}
.hero .cta .btn.pri{animation:fx-pouls 2.8s ease-in-out infinite}

/* Grille de fond plus présente */
body::after{opacity:1;background-image:linear-gradient(rgba(56,225,255,.34) 1px,transparent 1px),linear-gradient(90deg,rgba(56,225,255,.34) 1px,transparent 1px)}

/* Grand numéro de section en contour néon, et filet lumineux entre les sections */
.sec-head{position:relative}
section:not(.hero) .sec-head::after{content:counter(sec,decimal-leading-zero);position:absolute;right:-4%;top:-.42em;z-index:-1;pointer-events:none;
  font:800 clamp(96px,15vw,210px)/1 var(--ui);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px rgba(56,225,255,.26);text-shadow:0 0 34px rgba(56,225,255,.16)}
section:not(.hero)::before{content:"";display:block;height:1px;width:min(1100px,86%);margin:0 auto;
  background:linear-gradient(90deg,transparent,var(--cy) 30%,var(--or) 70%,transparent);box-shadow:0 0 16px rgba(56,225,255,.7);opacity:.6}

/* Liseré néon qui tourne : carte Premium en permanence, autres cartes au survol */
.card.prem,.card:hover{background-image:radial-gradient(420px circle at var(--mx,50%) var(--my,-40%),rgba(56,225,255,.14),transparent 60%),
    linear-gradient(180deg,rgba(24,24,30,.78),rgba(14,14,18,.70)),
    conic-gradient(from var(--fx-a),var(--cy),rgba(255,255,255,.05) 18%,var(--or) 50%,rgba(255,255,255,.05) 68%,var(--cy));
  animation:fx-tour 5s linear infinite}
.forces li:hover{background:linear-gradient(180deg,rgba(24,24,30,.78),rgba(14,14,18,.70)) padding-box,
    conic-gradient(from var(--fx-a),var(--cy),rgba(255,255,255,.05) 18%,var(--or) 50%,rgba(255,255,255,.05) 68%,var(--cy)) border-box;animation:fx-tour 5s linear infinite}
.card{transform-style:preserve-3d;will-change:transform}
.card:hover{box-shadow:0 26px 70px -26px rgba(56,225,255,.7),0 0 34px -12px rgba(255,138,31,.5)}

/* Points forts en mosaïque */
@media(min-width:900px){.forces{grid-template-columns:repeat(3,1fr)}
  .forces li:nth-child(1),.forces li:nth-child(4),.forces li:nth-child(6){grid-column:span 2}
  .forces li:nth-child(1) b{font-size:1.5rem}}
.forces li b{color:var(--tx);text-shadow:0 0 22px rgba(56,225,255,.28)}

/* Cadre du personnage : ligne de balayage et étiquettes de visée */
.fx-scan{position:absolute;left:7%;right:7%;height:2px;top:3%;pointer-events:none;background:linear-gradient(90deg,transparent,var(--cy),transparent);box-shadow:0 0 18px 2px rgba(56,225,255,.7);animation:fx-balaye 4.2s ease-in-out infinite}
.fx-tag{position:absolute;font:600 10px/1 var(--mono);letter-spacing:.18em;color:var(--cy);text-shadow:0 0 12px rgba(56,225,255,.7);pointer-events:none;white-space:nowrap}
.fx-tag.t1{left:9%;top:5%}.fx-tag.t2{right:9%;top:5%;color:var(--or);text-shadow:0 0 12px rgba(255,138,31,.7)}.fx-tag.t3{left:9%;bottom:5%;color:var(--or);text-shadow:0 0 12px rgba(255,138,31,.7)}
/* Le cadre est placé avant le calque 3D dans la page, au même niveau (z-index 1) : le personnage passe devant. */
.fx-hud{position:absolute;z-index:1;pointer-events:none}
html:not(.a-3d) .fx-hud{display:none}

/* Bandeau défilant sous le héros */
.fx-ticker{overflow:hidden;border-block:1px solid rgba(56,225,255,.28);background:linear-gradient(90deg,rgba(56,225,255,.07),rgba(255,138,31,.07));box-shadow:0 0 30px -10px rgba(56,225,255,.6);margin:0 0 clamp(28px,5vw,56px)}
.fx-ticker div{display:inline-flex;gap:44px;padding:12px 22px;white-space:nowrap;animation:fx-defile 38s linear infinite;font:600 12px/1 var(--mono);letter-spacing:.2em;color:var(--tx2)}
.fx-ticker span::before{content:"◆";margin-right:44px;color:var(--cy);text-shadow:0 0 10px rgba(56,225,255,.9)}

/* Rail de navigation latéral (grand écran) */
.fx-rail{position:fixed;left:18px;top:50%;transform:translateY(-50%);z-index:55;display:none;flex-direction:column;gap:14px}
@media(min-width:1280px){.fx-rail{display:flex}}
.fx-rail a{display:flex;align-items:center;gap:10px;font:600 10px/1 var(--mono);letter-spacing:.16em;color:var(--tx3);text-decoration:none}
.fx-rail a i{width:8px;height:8px;border-radius:50%;border:1px solid var(--tx3);transition:all .3s}
.fx-rail a span{opacity:0;transform:translateX(-6px);transition:all .3s}
.fx-rail a:hover span{opacity:1;transform:none}
.fx-rail a span{padding:6px 9px;border-radius:8px;background:rgba(10,12,16,.92);border:1px solid rgba(56,225,255,.3);pointer-events:none}
.fx-rail a.on{color:var(--cy)}.fx-rail a.on i{background:var(--cy);border-color:var(--cy);box-shadow:0 0 14px 2px rgba(56,225,255,.8);transform:scale(1.25)}

@media(prefers-reduced-motion:reduce){h1 em,h2 em,.hero h1 em,.hero h1,.hero .lead,.hero .cta,.hero .cta .btn.pri,.card.prem,.card:hover,.forces li:hover,.fx-scan,.fx-ticker div{animation:none}.fx-scan{display:none}}

/* Héros : le genre de l'appli et ses programmes, lisibles d'emblée (13 novembre 2026) */
.hero-genre{display:inline-flex;align-items:center;gap:10px;margin:0 0 16px;padding:7px 14px;border-radius:999px;border:1px solid rgba(56,225,255,.4);
  font:600 12px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--cy);background:rgba(56,225,255,.07);box-shadow:0 0 24px -8px rgba(56,225,255,.7);animation:fx-entree .9s cubic-bezier(.2,.7,.2,1) both}
.hero-genre::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cy);box-shadow:0 0 10px 2px rgba(56,225,255,.9)}
.hero-progs{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;padding:0;animation:fx-entree .9s .22s cubic-bezier(.2,.7,.2,1) both}
.hero-progs a{display:block;padding:8px 13px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:var(--tx);font-size:13.5px;font-weight:600;text-decoration:none;transition:border-color .25s,box-shadow .25s,transform .25s}
.hero-progs a:hover{border-color:var(--or);box-shadow:0 0 20px -6px rgba(255,138,31,.8);transform:translateY(-2px)}
.hero h1{font-size:clamp(30px,min(3.5vw,5.6vh),52px);max-width:22ch;margin-bottom:14px}
.hero .lead{margin-bottom:14px}
.hero-progs{margin-bottom:18px}
@media(prefers-reduced-motion:reduce){.hero-genre,.hero-progs{animation:none}}

/* Ajustements du 13 novembre 2026 après retour de Kelly : couleurs de texte plus douces, numéro de section
   dégagé du filet et du titre, liseré tournant limité au bord des cartes. */
h1 em,h2 em,.hero h1 em{background-image:linear-gradient(92deg,#FFB56B,#FFE3BF 55%,#BFEAF2);background-size:100% 100%;animation:none;filter:none}
.eyebrow{color:#8FD3E0;text-shadow:none}
.hero-genre{color:#A9DDE8;border-color:rgba(143,211,224,.35);box-shadow:none}
.hero-genre::before{background:#8FD3E0;box-shadow:0 0 8px rgba(143,211,224,.7)}
.forces li b{text-shadow:none}
section:not(.hero) .sec-head::after{right:auto;left:calc(100% + 48px);top:.08em;-webkit-text-stroke:1px rgba(143,211,224,.16);text-shadow:none}
@media(max-width:1180px){section:not(.hero) .sec-head::after{display:none}}
section:not(.hero)::before{opacity:.35;box-shadow:none}
.card.prem,.card:hover{background-image:radial-gradient(420px circle at var(--mx,50%) var(--my,-40%),rgba(56,225,255,.08),transparent 60%),
    linear-gradient(180deg,#17181d,#111216),
    conic-gradient(from var(--fx-a),var(--cy),rgba(255,255,255,.05) 18%,var(--or) 50%,rgba(255,255,255,.05) 68%,var(--cy))}
.forces li:hover{background:linear-gradient(180deg,#17181d,#111216) padding-box,
    conic-gradient(from var(--fx-a),var(--cy),rgba(255,255,255,.05) 18%,var(--or) 50%,rgba(255,255,255,.05) 68%,var(--cy)) border-box}
section:not(.hero){position:relative}
section:not(.hero)::before{position:absolute;top:0;left:50%;transform:translateX(-50%);margin:0}

/* Retour à la sobriété (13 novembre 2026, demande de Kelly) : plus de liseré tournant ni d'effet à l'intérieur des cartes,
   plus de pulsation, grille et halos discrets. On garde : verre, liseré fin fixe, titres en dégradé doux, cadre du personnage. */
.card,.card.prem,.card:hover{animation:none;transform:none;
  background-image:linear-gradient(180deg,#17181d,#111216),
    linear-gradient(135deg,rgba(143,211,224,.38),rgba(255,255,255,.07) 30%,rgba(255,255,255,.05) 70%,rgba(255,138,31,.38));
  background-origin:padding-box,border-box;background-clip:padding-box,border-box}
.card:hover{transform:translateY(-3px);box-shadow:0 18px 44px -26px rgba(143,211,224,.45)}
.card.prem{box-shadow:0 0 0 1px rgba(255,138,31,.30),0 22px 60px -42px rgba(255,138,31,.55)}
.forces li,.forces li:hover{animation:none;background:linear-gradient(180deg,#17181d,#111216) padding-box,
    linear-gradient(135deg,rgba(143,211,224,.34),rgba(255,255,255,.07) 30%,rgba(255,255,255,.05) 70%,rgba(255,138,31,.34)) border-box}
.forces li:hover{transform:translateY(-3px);box-shadow:0 18px 44px -26px rgba(143,211,224,.4)}
.hero .cta .btn.pri{animation:fx-entree .9s .3s cubic-bezier(.2,.7,.2,1) both}
.hero .cta .btn.pri,.btn.pri{box-shadow:0 10px 26px -14px rgba(255,138,31,.7)}
.btn.pri::after{display:none}
.btn.sec{box-shadow:none;border-color:rgba(255,255,255,.18)}
body::after{opacity:.45}
.fx-hud .fx-socle{animation:none;opacity:.7;box-shadow:0 0 30px rgba(56,225,255,.22),inset 0 0 26px rgba(56,225,255,.16)}
.fx-hud .fx-cadre{opacity:.5}
.dock{box-shadow:0 18px 50px -18px rgba(0,0,0,.9)}
.lockgrid .ic{padding:0}

/* Héros recomposé (13 novembre 2026, pôle marketing) : un message, une preuve chiffrée, une démonstration. */
.hero h1{max-width:24ch;text-wrap:balance}
.hero-faits{margin-top:18px}.hero .lead{max-width:52ch}
.hero-choix{margin:0 0 8px;font:600 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--tx3)}
.hero .cta{align-items:center;gap:16px}
.hero-bientot{font:600 12px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tx2)}
.hero-faits{list-style:none;display:flex;flex-wrap:wrap;gap:10px 30px;margin:22px 0 14px;padding:16px 0 0;border-top:1px solid var(--line);max-width:520px}
.hero-faits li{display:flex;flex-direction:column;gap:4px}
.hero-faits b{font:700 26px/1 var(--ui);letter-spacing:-.02em;color:var(--tx)}
.hero-faits span{font-size:12.5px;color:var(--tx2)}
.lien-fondateur{max-width:46ch;display:inline-block;line-height:1.45}
.hero-droite{position:relative}
.hero-demo{position:absolute;left:-4%;bottom:16%;z-index:2;display:none;flex-direction:column;gap:6px;padding:12px 14px;border-radius:14px;max-width:230px;
  background:rgba(17,18,22,.86);border:1px solid rgba(143,211,224,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:fx-entree .9s .6s cubic-bezier(.2,.7,.2,1) both}
.a-3d .hero-demo{display:flex}
.hero-demo small{font:600 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tx3)}
.hero-demo span{font-size:12.5px;color:var(--tx2)}
.hero-demo b{font-size:13.5px;color:#FFB56B}
.fx-hud .fx-socle{display:none}
@media(max-width:1099px){.hero-demo{display:none!important}}
@media(prefers-reduced-motion:reduce){.hero-demo{animation:none}}

/* « Bientôt sur Google Play » en pastille lisible (sans le logo de Google : son badge officiel n'est permis qu'une fois l'appli en ligne ou en préinscription) */
.hero-bientot{display:inline-flex;align-items:center;gap:12px;height:56px;padding:0 18px 0 16px;border-radius:12px;border:1px solid rgba(255,255,255,.28);background:#0b0c0f;letter-spacing:0;text-transform:none}
.hero-bientot i{width:0;height:0;border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #8FD3E0}
.hero-bientot span{display:flex;flex-direction:column;gap:3px}
.hero-bientot small{font:600 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tx2)}
.hero-bientot b{font:700 19px/1 var(--ui);color:var(--tx);letter-spacing:-.01em}

/* Étapes et téléphone synchronisés : la carte de l'étape affichée dans le téléphone est mise en évidence */
.card.etape{cursor:pointer;transition:box-shadow .35s ease,opacity .35s ease,transform .35s ease;opacity:.72}
.card.etape.actif{opacity:1;box-shadow:0 0 0 1px rgba(255,138,31,.6),0 18px 44px -28px rgba(255,138,31,.6)}
.etape.actif .num{background:var(--or);color:var(--on-or);border-color:var(--or)}
.scr .okb{margin-top:auto}
.scr .chipline{flex-wrap:wrap}
.final h2{margin-left:auto;margin-right:auto;max-width:none;text-wrap:balance}
.final .lead{margin-bottom:22px}