/* Ancelotti Production, feuille de style. Palette et typographie : voir design-package. */

/* Polices auto-hébergées (ex-Google Fonts) : aucune requête vers un serveur tiers. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:500 800;font-stretch:125%;font-display:swap;
  src:url('fonts/archivo-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500 800;font-stretch:125%;font-display:swap;
  src:url('fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('fonts/manrope-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/plexmono-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/plexmono-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/plexmono-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/plexmono-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --canvas:#0B1224;
  --panel:#16223E;
  --accent:#EFE3D0;
  --accent-hover:#FBF4E8;
  --accent-muted:rgba(239,227,208,.14);
  --text-secondary:#BFC9DC;
  --text-primary:#F7F2E8;
  --hairline:rgba(170,190,225,.18);
  --hairline-strong:rgba(170,190,225,.42);
  --tshadow:0 1px 2px rgba(5,5,10,.95),0 3px 12px rgba(5,5,10,.78),0 10px 44px rgba(5,5,10,.8);
  --ease:cubic-bezier(.22,.9,.24,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --ease-jesko:cubic-bezier(.25,1,.5,1);
  --display:"Archivo",sans-serif;
  --body:"Manrope",sans-serif;
  --mono:"IBM Plex Mono",monospace;
}

*{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--canvas);color:var(--text-primary);
  font-family:var(--body);font-size:17px;line-height:1.6;
  opacity:0;transition:opacity .8s var(--ease-soft);
}
body.ready{opacity:1}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}

h1,h2,h3{font-family:var(--display);font-stretch:125%;line-height:1.18;margin:0}
.nav-brand span,.foot-brand span,.band-line,.slogan,.faqi summary,.gstat-num{font-stretch:125%}
.nav-logo{width:34px;height:34px;border-radius:9px;display:block}
p{margin:0}
a{color:inherit}
.mono{font-family:var(--mono);font-size:.78rem;letter-spacing:.04em}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent);color:#0D1526;padding:.6em 1em;border-radius:0 0 8px 0;font-weight:600}
.skip:focus{left:0}

.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

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

/* ENVIRONNEMENT : une seule couche fixe derrière tout, dérive très lente */
.env{position:fixed;inset:-12%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 45% at 78% 8%,rgba(239,227,208,.06) 0%,rgba(239,227,208,0) 60%),
    radial-gradient(ellipse 70% 60% at 22% 92%,rgba(34,53,92,.30) 0%,rgba(34,53,92,0) 65%),
    var(--canvas);
}
.anim-ok .env{animation:envdrift 90s var(--ease-soft) -20s infinite alternate}
@keyframes envdrift{from{transform:translate3d(-1.2%,-.8%,0)}to{transform:translate3d(1.2%,.8%,0)}}

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:14px 28px;background:linear-gradient(rgba(8,12,24,.85),rgba(8,12,24,0));backdrop-filter:blur(2px)}
.nav-brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--display);font-weight:700;letter-spacing:.02em}
.nav-mark{width:30px;height:30px;color:var(--text-primary)}
.nav-links{display:flex;align-items:baseline;gap:22px}
.nav-links a:not(.btn){text-decoration:none;font-family:var(--display);font-stretch:125%;font-weight:700;
  font-size:1rem;letter-spacing:.01em;color:var(--text-primary);transition:color .3s var(--ease)}
.nav-links a:not(.btn):hover{color:var(--accent)}
.lang-sw{display:inline-flex;align-items:center;gap:4px;padding:3px;border:1px solid rgba(247,242,232,.3);border-radius:100px;align-self:center}
.nav-links .lang-sw a:not(.btn){display:grid;place-items:center;width:42px;height:32px;padding:0;border-radius:100px;opacity:.55;filter:saturate(.6);transition:opacity .2s,filter .2s,background .2s}
.lang-sw a .flag{width:30px;height:20px;border-radius:4px;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.nav-links .lang-sw a:not(.btn):hover{opacity:1;filter:none}
.nav-links .lang-sw a.active{opacity:1;filter:none;background:rgba(247,242,232,.14)}
.nav-links .lang-sw a.active .flag{box-shadow:0 0 0 2px var(--canvas),0 0 0 3px var(--text-primary)}
.page-form .lang-sw{border-color:rgba(13,21,38,.3)}
.page-form .nav-links .lang-sw a.active{background:rgba(13,21,38,.08)}
.page-form .nav-links .lang-sw a.active .flag{box-shadow:0 0 0 2px #FBF7F0,0 0 0 3px #111C36}

/* Thème du menu inversé quand la bande claire passe dessous (façon Jesko) */
.nav.on-light{background:linear-gradient(rgba(244,238,227,.92),rgba(244,238,227,0))}
.nav.on-light .nav-brand span{color:#111C36}
.nav.on-light .nav-links a:not(.btn){color:#5A6B8C}
.nav.on-light .nav-links a:not(.btn):hover{color:#111C36}
.nav.on-light .btn-nav{background:linear-gradient(140deg,#22355C 0%,#101E3A 100%);color:#F7F2E8}
.nav.on-light .btn-nav:hover{filter:brightness(1.22)}

/* Pastille façon Jesko : un fond arrondi glisse depuis le bas derrière le lien.
   Padding compensé par des marges négatives : la position du texte ne bouge pas. */
@media (hover:hover) and (pointer:fine){
  .nav-links a:not(.btn){
    position:relative;display:inline-block;isolation:isolate;overflow:hidden;
    border-radius:999px;padding:.38em .85em;margin:-.38em -.45em;
  }
  .nav-links a:not(.btn)::before{
    content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
    background:var(--accent-muted);transform:translateY(101%);
    transition:transform .6s var(--ease-jesko);
  }
  .nav-links a:not(.btn):hover::before{transform:translateY(0)}
}
@media (prefers-reduced-motion: reduce){
  .nav-links a:not(.btn)::before{transition:none}
}

.btn{display:inline-block;font-family:var(--body);font-weight:600;text-decoration:none;border:none;cursor:pointer;
  border-radius:10px;transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.btn-primary{position:relative;background:linear-gradient(140deg,#22355C 0%,#101E3A 100%);color:#F7F2E8;
  padding:.95em 1.9em;font-size:1.04rem;font-weight:700;border-radius:14px;
  border:1px solid rgba(130,160,220,.28);
  box-shadow:0 14px 36px rgba(8,14,30,.45)}
.btn-primary::after{content:"";position:absolute;inset:-2px;border-radius:16px;box-shadow:0 0 40px rgba(90,130,210,.4);opacity:0;pointer-events:none}
.anim-ok .btn-primary::after{animation:ctaglow 4.5s var(--ease-soft) -1.2s infinite alternate}
@keyframes ctaglow{from{opacity:.25}to{opacity:.7}}
.btn-primary:hover{filter:brightness(1.22);transform:translateY(-2px)}
.btn-nav{background:linear-gradient(140deg,#22355C 0%,#101E3A 100%);color:#F7F2E8;border:1px solid rgba(130,160,220,.28);
  padding:.5em 1.1em;font-size:.9rem;white-space:nowrap;text-decoration:none;border-radius:11px}
.btn-nav:hover{filter:brightness(1.22)}
.band .btn,.nav .btn{text-shadow:none}

/* HERO */
.hero{position:relative;height:200vh}
.stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--canvas)}
/* La couche de zoom : la Terre de nuit plein écran, le scroll plonge
   vers l'Europe illuminée (origine du zoom = le foyer de lumière sur Paris). */
.poster{position:absolute;inset:0;background-size:cover;background-position:center;
  will-change:transform;transform-origin:51.98% 45.83%;transform:translateZ(0)}
/* Atmosphère qui respire, au dessus de la Terre */
.atmo{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 58% at 50% 10%,rgba(96,150,230,.16) 0%,rgba(96,150,230,0) 62%)}
.anim-ok .atmo{animation:atmopulse 9s var(--ease-soft) infinite alternate}
@keyframes atmopulse{from{opacity:.5}to{opacity:1}}
/* Voile nuageux qui dérive très lentement, DANS le poster (suit le zoom) */
.haze{position:absolute;inset:-8%;pointer-events:none;mix-blend-mode:screen;opacity:.6;
  background:
    radial-gradient(42% 30% at 22% 60%,rgba(150,175,215,.10) 0%,rgba(150,175,215,0) 70%),
    radial-gradient(34% 24% at 58% 80%,rgba(140,165,205,.07) 0%,rgba(140,165,205,0) 70%),
    radial-gradient(28% 20% at 8% 36%,rgba(160,185,220,.09) 0%,rgba(160,185,220,0) 70%)}
.anim-ok .haze{animation:hazedrift 46s var(--ease-soft) infinite alternate}
@keyframes hazedrift{from{transform:translate3d(-1.4%,.5%,0) scale(1.02)}to{transform:translate3d(1.6%,-.7%,0) scale(1.06)}}
/* Lumières de villes qui s'éteignent et se rallument doucement, sur l'Europe */
.villes{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(38% 42% at 52% 52%,#000 0%,transparent 78%);
  mask-image:radial-gradient(38% 42% at 52% 52%,#000 0%,transparent 78%)}
.villes::before,.villes::after{content:"";position:absolute;inset:0}
.villes::before{background-image:
    radial-gradient(1.6px 1.6px at 40px 70px,rgba(255,205,120,.8),transparent 60%),
    radial-gradient(1.2px 1.2px at 150px 160px,rgba(255,190,100,.65),transparent 60%),
    radial-gradient(1.4px 1.4px at 250px 40px,rgba(255,215,140,.7),transparent 60%),
    radial-gradient(1px 1px at 90px 230px,rgba(255,200,110,.6),transparent 60%);
  background-size:310px 310px}
.villes::after{background-image:
    radial-gradient(1.3px 1.3px at 200px 120px,rgba(255,205,120,.75),transparent 60%),
    radial-gradient(1px 1px at 60px 30px,rgba(255,190,100,.55),transparent 60%),
    radial-gradient(1.5px 1.5px at 300px 220px,rgba(255,215,140,.65),transparent 60%);
  background-size:360px 360px}
.anim-ok .villes::before{animation:villes-off 11s ease-in-out infinite alternate}
.anim-ok .villes::after{animation:villes-off 15s ease-in-out -6s infinite alternate-reverse}
@keyframes villes-off{0%{opacity:.85}45%{opacity:.5}100%{opacity:.1}}
/* Étoiles qui scintillent, seulement dans le ciel (masque vers le bas) */
.stars{position:absolute;inset:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 32%,transparent 60%);
  mask-image:linear-gradient(180deg,#000 0%,#000 32%,transparent 60%)}
.stars::before,.stars::after{content:"";position:absolute;inset:0}
.stars::before{background-image:
    radial-gradient(1.4px 1.4px at 22px 34px,rgba(255,255,255,.9),transparent 60%),
    radial-gradient(1px 1px at 130px 88px,rgba(255,255,255,.7),transparent 60%),
    radial-gradient(1.2px 1.2px at 250px 150px,rgba(214,228,255,.8),transparent 60%),
    radial-gradient(.9px .9px at 78px 210px,rgba(255,255,255,.6),transparent 60%),
    radial-gradient(1.1px 1.1px at 196px 260px,rgba(255,244,224,.75),transparent 60%);
  background-size:290px 290px}
.stars::after{background-image:
    radial-gradient(1px 1px at 60px 60px,rgba(255,255,255,.75),transparent 60%),
    radial-gradient(1.3px 1.3px at 180px 30px,rgba(214,228,255,.85),transparent 60%),
    radial-gradient(.8px .8px at 320px 140px,rgba(255,255,255,.55),transparent 60%),
    radial-gradient(1px 1px at 40px 190px,rgba(255,244,224,.7),transparent 60%);
  background-size:380px 380px}
.anim-ok .stars::before{animation:twinkle 5.5s ease-in-out infinite alternate}
.anim-ok .stars::after{animation:twinkle 8s ease-in-out -3s infinite alternate-reverse}
@keyframes twinkle{from{opacity:.35}to{opacity:1}}
.stage .shooting-star{z-index:1}
.scrim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(10,10,18,0) 35%,rgba(10,10,18,.62) 100%)}
/* Fin de plongée : un espace profond bleu nuit, chaleur dorée au centre, SOUS les textes */
.stage::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--sk,0);z-index:2;
  background:
    radial-gradient(ellipse 52% 36% at 50% 34%,rgba(244,222,182,.15) 0%,rgba(244,222,182,0) 72%),
    radial-gradient(ellipse 90% 55% at 50% 0%,rgba(74,120,190,.38) 0%,rgba(74,120,190,0) 62%),
    radial-gradient(ellipse 130% 110% at 50% 42%,#26365C 0%,#131E38 52%,#060A14 100%)}
.cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:4;
  background:#EFE3D0 !important;border:none !important;color:#111C36 !important;
  font-family:var(--display) !important;font-stretch:125%;font-weight:700;font-size:.85rem !important;
  letter-spacing:.06em;padding:.75em 1.5em !important;border-radius:999px;
  box-shadow:0 12px 32px rgba(10,6,3,.45);text-shadow:none !important;backdrop-filter:none}
.cue::after{content:"↓";display:inline-block;margin-left:.6em}
.anim-ok .cue::after{animation:cuebob 1.6s var(--ease-soft) infinite alternate}
@keyframes cuebob{from{transform:translateY(-1px)}to{transform:translateY(3px)}}

.chip{background:rgba(8,8,15,.55);border:1px solid rgba(96,96,126,.3);border-radius:10px;backdrop-filter:blur(10px);
  text-shadow:0 1px 3px rgba(5,5,10,.85);font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;padding:.45em .9em;color:var(--text-secondary)}

/* BANDES : tiers bas, scrim local à deux niveaux, ombre 3 couches */
.band{position:absolute;left:0;right:0;opacity:0;text-shadow:var(--tshadow);pointer-events:none;z-index:3}
.band-lower{bottom:11vh;text-align:center;padding:0 6vw}
.band-line{font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,3.6vw,2.7rem);line-height:1.24;color:var(--text-primary)}

/* Le slogan d'ouverture, affiché d'un coup, façon Jesko : deux lignes qui flanquent l'écran */
.band-hero{top:0;bottom:0}
.slogan{position:absolute;font-family:var(--display);font-weight:800;
  font-size:clamp(2.1rem,4.8vw,4.4rem);line-height:1.06;color:var(--text-primary);
  transform:translateY(calc((1 - var(--k,0))*30px))}
.slogan-l{left:6vw;top:15vh;text-align:left}
.slogan-r{right:6vw;bottom:17vh;text-align:right}

.band-settle{top:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.1rem;text-align:center;padding:0 6vw}
.band-settle .btn{pointer-events:auto}
.settle-logo{width:clamp(64px,7vw,92px);height:auto;border-radius:22px;
  box-shadow:0 18px 44px rgba(6,10,22,.5), 0 0 0 1px rgba(130,160,220,.2)}
[data-entrance="settle"] .settle-logo{
  --kl:clamp(0,calc(var(--k,0)*4),1);
  opacity:var(--kl);transform:translateY(calc((1 - var(--kl))*18px))}
.settle-title{font-weight:800;font-size:clamp(2.4rem,6.4vw,4.8rem);letter-spacing:.01em;text-shadow:none}
.settle-title .w{background:linear-gradient(168deg,#FFFBF2 30%,#EBD3A4 95%);-webkit-background-clip:text;background-clip:text;color:transparent}
.settle-sub{font-size:clamp(1.06rem,2.1vw,1.35rem);color:#E4D6C2;max-width:36ch}

/* Chorégraphie : tout en transform et opacity, pilotée par --k */
.c,.w{display:inline-block;will-change:transform,opacity}
.w{white-space:nowrap}

/* blur-to-sharp : deux copies empilées, le flou est STATIQUE */
.blur-stack{position:relative;display:inline-block}
.blur-stack .soft{position:absolute;inset:0;filter:blur(10px);opacity:calc(1 - var(--k,0))}
.blur-stack .sharp{opacity:var(--k,0)}

/* approach-from-depth */
[data-entrance="depth"] .band-line{transform:scale(calc(.84 + .16*var(--k,0)))}

/* word-punch */
[data-entrance="punch"] .w{
  --kc:clamp(0,calc((var(--k,0) - var(--th,0))*3),1);
  --ks:clamp(0,calc((var(--k,0) - var(--th,0) - var(--sd,.1))*var(--ss,3.2)),1);
  opacity:var(--kc);
  transform:scale(calc(0.6 + (0.4 + var(--ov,.12))*var(--kc) - var(--ov,.12)*var(--ks)))}
[data-entrance="punch"] .w.em{--ov:.24;--sd:.16;--ss:2.6;color:#E2C9A4}

/* settle : montée mot à mot puis sous-ligne puis CTA */
[data-entrance="settle"] .w{
  --kc:clamp(0,calc((var(--k,0) - var(--th,0))*3.6),1);
  opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*22px))}
[data-entrance="settle"] .settle-sub{
  --ks:clamp(0,calc((var(--k,0) - .45)*4.5),1);
  opacity:var(--ks);transform:translateY(calc((1 - var(--ks))*14px))}
[data-entrance="settle"] .settle-cta{
  --kb:clamp(0,calc((var(--k,0) - .6)*5),1);
  opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*10px))}

/* SECTIONS */
.sec{position:relative;max-width:1100px;margin:0 auto;padding:16vh 6vw 10vh}
.kicker{font-family:var(--display);font-stretch:125%;font-weight:700;
  font-size:1.02rem;letter-spacing:.2em;color:var(--accent);margin-bottom:1.1rem}
.sec-title{font-weight:800;font-size:clamp(1.8rem,4.4vw,3rem);max-width:22ch}

/* Entrées de section : chorégraphie via IntersectionObserver */
.sec .kicker,.sec .sec-title{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.sec.in .kicker{opacity:1;transform:none}
.sec.in .sec-title{opacity:1;transform:none;transition-delay:.08s}

/* Le globe : la croissance en orbite, jalons autour, étoiles filantes */
.sec-chiffres{padding-top:10vh;padding-bottom:4vh}
.chiffres-lede{margin-top:1.4rem;max-width:52ch;font-size:1.15rem;line-height:1.6;color:var(--text-secondary);
  opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease) .1s,transform .8s var(--ease) .1s}
.sec.in .chiffres-lede{opacity:1;transform:none}
.chiffres-lede strong{font-weight:700;color:#E9C388}
.globe-wrap{position:relative;margin-top:3rem;display:grid;place-items:center;min-height:min(82vh,760px);overflow:hidden}
.globe{width:min(60vmin,560px);display:block}
.graticule{will-change:transform}
.latitudes line,.latitudes ellipse{fill:none;stroke:rgba(239,227,208,.10);stroke-width:1}
.garc{fill:none;stroke:url(#arcg);stroke-width:1.6;stroke-linecap:round;
  stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--gp,0)*100)}
.garc-2{stroke-dashoffset:calc(100 - max(0, (var(--gp,0) - .25)*1.33)*100)}
.gstat{position:absolute;display:flex;flex-direction:column;gap:.15rem;max-width:270px;
  opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.sec.in .gstat-1{opacity:1;transform:none;transition-delay:.1s}
.sec.in .gstat-2{opacity:1;transform:none;transition-delay:.28s}
.sec.in .gstat-3{opacity:1;transform:none;transition-delay:.46s}
.gstat-1{left:2%;top:9%}
.gstat-2{right:0;top:32%;text-align:right;align-items:flex-end;max-width:180px}
.gstat-3{left:5%;bottom:8%}
.gstat-num{font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,6vw,5rem);line-height:1.02;
  background:linear-gradient(160deg,#FFF6E4 20%,#E9C388 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
.gstat-num .eur{background:none;-webkit-background-clip:border-box;background-clip:border-box;
  color:#ECCE97;-webkit-text-fill-color:#ECCE97}
.gstat-label{color:#D9CBB8;font-size:1.05rem;line-height:1.45;font-weight:600}
.shooting-star{position:absolute;width:120px;height:1.5px;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,rgba(240,201,138,0),rgba(240,201,138,.85) 60%,rgba(255,244,224,.95));
  border-radius:2px;transform:rotate(-24deg)}
.anim-ok .shooting-star{animation:shoot 7s linear infinite}
.ss-1{top:12%;left:-10%}
.ss-2{top:38%;left:-14%;width:90px;animation-delay:-2.6s !important;animation-duration:8.5s !important}
.ss-3{top:66%;left:-8%;width:70px;animation-delay:-5s !important;animation-duration:6s !important}
@keyframes shoot{
  0%{transform:translate3d(0,0,0) rotate(-24deg);opacity:0}
  6%{opacity:.9}
  16%{opacity:.9}
  26%{transform:translate3d(120vw,-32vh,0) rotate(-24deg);opacity:0}
  100%{transform:translate3d(120vw,-32vh,0) rotate(-24deg);opacity:0}
}

/* Les plaques de preuve (images 3D) */
.stills-row{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:4rem}
.still-tile{margin:0;opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.sec.in .still-tile{opacity:1;transform:none}
.sec.in .still-tile:nth-child(2){transition-delay:.14s}
.still-tile img{display:block;width:100%;height:auto;border-radius:16px;border:1px solid var(--hairline)}
.still-tile figcaption{margin-top:.8rem;color:var(--text-secondary);font-size:.95rem}
.reseaux-visual{margin:16px 0 0;opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease) .1s,transform .9s var(--ease) .1s}
.sec.in .reseaux-visual{opacity:1;transform:none}
.reseaux-visual img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid rgba(52,74,120,.22)}
.reseaux-visual figcaption{margin-top:.7rem;color:#5A6B8C;font-size:.92rem}

/* Bandes de fond pleine largeur avec fondus d'entrée et de sortie */
.band-light,.band-white,.band-beige{
  max-width:none;width:100vw;margin-left:calc(50% - 50vw);
  padding-left:max(6vw,calc(50vw - 550px));padding-right:max(6vw,calc(50vw - 550px));
  padding-top:13vh;padding-bottom:13vh}
.band-light{color:#1E2C4E;
  background:linear-gradient(180deg,var(--canvas) 0%,#F4EEE3 8%,#F4EEE3 93%,var(--canvas) 100%)}
.band-light .sec-title{color:#111C36}
.band-light .kicker{color:#B4702E}
.band-white{color:#3D4E70;
  background:linear-gradient(180deg,var(--canvas) 0%,#FBF7F0 11%,#FBF7F0 100%)}
.band-white .sec-title{color:#111C36}
.band-white .kicker{color:#B4702E}
.band-beige{color:#1E2C4E;
  background:linear-gradient(180deg,#FBF7F0 0%,#EDE1CB 12%,#EDE1CB 100%)}
.band-beige .sec-title{color:#111C36}
.band-beige .kicker{color:#B4702E}

/* Réseaux : tête à gauche, cartes à droite */
.sec-reseaux{display:grid;grid-template-columns:1fr 1.2fr;gap:6vw;align-items:start}
.reseaux-col{display:flex;flex-direction:column}
.card-head{display:flex;align-items:center;gap:12px;margin-bottom:.35rem}
.net-ico{display:block;height:30px;width:auto}
.hold-wrap{margin-top:3rem;display:flex;flex-direction:column;gap:.9rem;align-items:flex-start;
  opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease) .15s,transform .8s var(--ease) .15s}
.sec-reseaux.in .hold-wrap{opacity:1;transform:none}
.hold{position:relative;width:152px;height:152px;border-radius:50%;border:none;
  background:linear-gradient(160deg,#FFFDF7 0%,#F3E8D2 55%,#E4D2B4 100%);
  color:#111C36;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--display);font-stretch:125%;font-size:.86rem;letter-spacing:.02em;line-height:1.4;text-align:center;font-weight:700;
  box-shadow:0 18px 44px rgba(30,44,78,.28), inset 0 1px 0 rgba(255,255,255,.8);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);user-select:none;-webkit-user-select:none;touch-action:none}
.hold:hover{transform:translateY(-3px);box-shadow:0 26px 54px rgba(30,44,78,.34), inset 0 1px 0 rgba(255,255,255,.8)}
.hold:active{transform:scale(.97)}
.hold-ring{position:absolute;inset:-4px;color:#B4702E;transform:rotate(-90deg)}
.hold-ring circle{transition:stroke-dashoffset .12s linear}
.hold.done{background:#111C36;color:#F7F2E8;box-shadow:0 14px 36px rgba(10,16,32,.4)}
.hold-hint{font-family:var(--body);font-size:.98rem;font-weight:600;letter-spacing:0;color:#3D4E70}
.cards{display:flex;flex-direction:column;gap:16px;margin-top:1rem}
.card{border-radius:16px;padding:22px 26px;border:1px solid rgba(52,74,120,.18);
  box-shadow:0 10px 26px rgba(34,53,92,.10);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(34,53,92,.18)}
.card[data-net="tiktok"]{background:linear-gradient(140deg,#FFEFF4 0%,#FCE0E9 100%);border-left:5px solid #17181C}
.card[data-net="youtube"]{background:linear-gradient(140deg,#FFEDE6 0%,#FFDCD0 100%);border-left:5px solid #E43A2E}
.card[data-net="instagram"]{background:linear-gradient(140deg,#FFEEDC 0%,#F7DCEC 60%,#E8DCF9 100%);border-left:5px solid #C13584}
.card.lit{box-shadow:0 20px 48px rgba(180,112,46,.28)}
.card h3{font-size:1.24rem;color:#111C36}
.card p{color:#3D4E70}

/* Le système : liste compacte, une ligne par étage, fil qui se remplit */
.sys-intro{margin-top:1.2rem;color:var(--text-secondary);max-width:52ch}
.sys-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:5vw;align-items:center}
.sys-visual{margin:0;width:min(100%,430px);justify-self:center;
  opacity:0;transform:translateY(20px);transition:opacity .9s var(--ease) .2s,transform .9s var(--ease) .2s}
.sec.in .sys-visual{opacity:1;transform:none}
.sys-visual img{display:block;width:100%;height:auto;border-radius:18px;border:1px solid var(--hairline);
  box-shadow:0 24px 60px rgba(8,5,2,.5)}
.sys-list{list-style:none;margin:2.6rem 0 0;padding:0 0 0 1.8rem;position:relative;
  display:flex;flex-direction:column;gap:1.15rem;max-width:640px}
.sys-list::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;
  background:var(--accent-muted);border-radius:2px}
.sys-list::after{content:"";position:absolute;left:0;top:6px;width:2px;border-radius:2px;
  height:calc(var(--fp,0)*(100% - 12px));background:var(--accent);transition:height .2s linear}
.fstep{display:flex;align-items:baseline;gap:.9rem;
  opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.fstep.lit{opacity:1;transform:none}
.sys-n{color:#C99B62;flex:0 0 auto}
.fstep p{color:var(--text-secondary);line-height:1.5}
.fstep strong{color:var(--text-primary);font-weight:600}

/* Méthode : trois panneaux vivants, numéro géant en fond, barre qui se dessine */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:3.4rem}
.step{position:relative;background:linear-gradient(165deg,#1C2B4D 0%,#121D36 70%);border:1px solid var(--hairline);border-radius:18px;
  padding:1.5rem 1.5rem 1.6rem;overflow:hidden;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease)}
.step-ico{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;
  background:var(--accent-muted);color:var(--accent);margin-bottom:1.1rem}
.step-ico svg{width:24px;height:24px}
.anim-ok .sec-methode.in .step-ico{animation:icoPulse 4.5s var(--ease-soft) -1.4s infinite alternate}
@keyframes icoPulse{from{box-shadow:0 0 0 0 rgba(240,120,42,.0)}to{box-shadow:0 0 0 9px rgba(240,120,42,.12)}}
.step:hover{transform:translateY(-6px);border-color:rgba(240,120,42,.35);box-shadow:0 22px 48px rgba(8,5,2,.45)}
.step::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;border-radius:0 3px 3px 0;
  background:linear-gradient(90deg,var(--accent),#F0C98A);transition:width 1s var(--ease) .3s}
.sec-methode.in .step::before{width:52%}
.sec-methode .step{opacity:0;transform:translateY(18px)}
.sec-methode.in .step{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease)}
.sec-methode.in .step:nth-child(2){transition-delay:.12s}
.sec-methode.in .step:nth-child(3){transition-delay:.24s}
.sec-methode.entrance-done .step:nth-child(2),
.sec-methode.entrance-done .step:nth-child(3){transition-delay:0s}
.step-n{color:var(--accent)}
.step h3{font-size:1.28rem;margin:.5rem 0 .3rem}
.step p{color:var(--text-secondary)}

/* FAQ : accordéon fluide sur bande blanche + carte de contact */
.faq-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:5vw;align-items:start;margin-top:3rem}
.faqs{max-width:760px}
.faq-aside{position:sticky;top:110px;background:#F2E9D8;border:1px solid rgba(52,74,120,.2);border-radius:20px;
  padding:2rem 1.9rem;display:flex;flex-direction:column;gap:1rem;align-items:flex-start;
  box-shadow:0 18px 44px rgba(34,53,92,.12)}
.faq-aside h3{font-size:1.35rem;color:#111C36}
.faq-aside p{color:#3D4E70;line-height:1.55}
.faq-aside-mail a{color:#B4702E;font-weight:700;text-decoration:none}
.faq-aside-mail a:hover{text-decoration:underline}
.faqi{border-bottom:1px solid rgba(52,74,120,.25)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:none;border:none;cursor:pointer;padding:1.2rem 0;text-align:left;
  font-family:var(--display);font-stretch:125%;font-weight:700;font-size:1.1rem;line-height:1.35;color:#111C36;
  transition:color .3s var(--ease)}
.faq-q:hover{color:#B4702E}
.faq-x{flex:0 0 auto;font-family:var(--body);font-weight:600;font-size:1.5rem;line-height:1;color:#B4702E;
  transition:transform .45s var(--ease)}
.faqi.open .faq-x{transform:rotate(45deg)}
.faq-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.faq-body>p{overflow:hidden;margin:0;max-width:64ch;color:#3D4E70;transition:margin .55s var(--ease)}
.faqi.open .faq-body{grid-template-rows:1fr}
.faqi.open .faq-body>p{margin:0 0 1.3rem}

/* Rejoindre */
.sec-join{padding-bottom:14vh}
.join-form{margin-top:3rem;display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:760px}
.field{display:flex;flex-direction:column;gap:.45rem}
.field-wide{grid-column:1 / -1}
.field label{font-size:.9rem;color:var(--text-secondary)}
.field input,.field select,.field textarea{
  background:var(--panel);border:1px solid var(--hairline-strong);border-radius:10px;color:var(--text-primary);
  font-family:var(--body);font-size:1rem;padding:.75em .9em;transition:border-color .3s var(--ease)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);outline:none}

/* Formulaire sur bande beige : contrôles blancs mis en avant, épurés, façon Apple */
.band-beige .field label,.band-beige .chips-field legend{color:#121D36;font-weight:700;font-size:1.28rem;line-height:1.35;margin-bottom:.3rem}
.band-beige .field input,.band-beige .field textarea{
  background:#FFFDF8;border:1px solid rgba(52,74,120,.25);color:#111C36;border-radius:14px;padding:.95em 1.05em;
  box-shadow:0 8px 22px rgba(34,53,92,.10)}
.band-beige .field input::placeholder,.band-beige .field textarea::placeholder{color:#7E8BA3}
.band-beige .field input:focus,.band-beige .field textarea:focus{border-color:#B4702E;outline:none;
  box-shadow:0 0 0 3px rgba(180,112,46,.22), 0 8px 22px rgba(34,53,92,.10)}
.band-beige .chip-opt span{border-color:rgba(52,74,120,.4);color:#3D4E70;background:#FFFDF8}
.band-beige .chip-opt:hover span{border-color:#22355C;color:#101E3A}
.band-beige .chip-opt input:checked + span{background:linear-gradient(140deg,#22355C 0%,#101E3A 100%);border-color:#22355C;color:#F7F2E8}
.band-beige .form-note{color:#B4702E}
.seg{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:9px}
.seg-opt{position:relative;cursor:pointer}
.seg-opt input{position:absolute;opacity:0;pointer-events:none}
.seg-opt span{display:flex;align-items:center;justify-content:center;padding:.85em .4em;border-radius:13px;
  background:#FFFDF8;border:1px solid rgba(52,74,120,.3);color:#3D4E70;font-size:.98rem;
  transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease)}
.seg-opt:hover span{border-color:#22355C;color:#101E3A}
.seg-opt input:checked + span{background:linear-gradient(140deg,#22355C 0%,#101E3A 100%);border-color:#22355C;color:#F7F2E8;font-weight:700;
  box-shadow:0 10px 24px rgba(14,24,48,.3);transform:translateY(-1px)}
.seg-opt input:focus-visible + span{outline:2px solid #B4702E;outline-offset:3px}
.field textarea{resize:vertical;min-height:120px}
.form-note{margin-top:.9rem;color:var(--accent);min-height:1.2em}
.chips-field{border:none;padding:0;margin:0}
.chips-field legend{font-size:.9rem;color:var(--text-secondary);padding:0;margin-bottom:.6rem}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip-opt{position:relative;cursor:pointer}
.chip-opt input{position:absolute;opacity:0;pointer-events:none}
.chip-opt span{display:inline-flex;align-items:center;border:1px solid var(--hairline-strong);border-radius:999px;
  padding:.5em 1.15em;font-size:.95rem;color:var(--text-secondary);
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.chip-opt:hover span{border-color:var(--accent);color:var(--text-primary)}
.chip-opt input:checked + span{background:var(--accent);border-color:var(--accent);color:#111C36;font-weight:600}
.chip-opt input:focus-visible + span{outline:2px solid var(--accent);outline-offset:3px}

/* La section rejoindre : une invitation, le formulaire vit sur sa page */
.join-lede{margin-top:1.2rem;color:#3D4E70;max-width:52ch;line-height:1.6;font-size:1.08rem}
.btn-big{display:inline-block;margin-top:2rem;font-size:1.15rem;padding:1.1em 2.4em}
.sec-join .form-note{margin-top:1.4rem}

/* FOOTER */
.footer{border-top:1px solid var(--hairline);padding:44px 6vw 54px;display:flex;flex-wrap:wrap;gap:1.4rem 3rem;align-items:baseline;justify-content:space-between;max-width:1100px;margin:0 auto}
.foot-brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700}
.foot-links{display:flex;gap:20px}
.foot-links a{text-decoration:none;color:var(--text-secondary);font-size:.92rem}
.foot-links a:hover{color:var(--text-primary)}
.foot-mail a{color:var(--text-secondary);text-decoration:none}
.foot-mail a:hover{color:var(--accent)}
.foot-copy{color:var(--text-secondary);font-size:.85rem;width:100%}

/* CIBLES TACTILES */
@media (pointer:coarse){
  .btn,.nav-links a,.faqi summary{min-height:44px}
  .btn{display:inline-flex;align-items:center;justify-content:center}
}

/* ÉCRANS COURTS : le scrub reste, les petits overlays disparaissent */
@media (max-height:560px){.cue{display:none}}

/* LES 5 GATES DU HÉROS STATIQUE : identiques au JS, caractère pour caractère */
@media (max-width: 720px),
       (orientation: portrait) and (max-width: 1024px),
       (orientation: portrait) and (pointer: coarse),
       (orientation: landscape) and (pointer: coarse) and (max-height: 560px),
       (prefers-reduced-motion: reduce){
  .hero{height:100vh}
  .stage{background:var(--canvas) url('hero-earth-static.jpg') center/cover no-repeat}
  /* La Terre reste visible en haut, le texte se pose sur un voile bleu nuit en bas */
  .stage::after{opacity:1;background:linear-gradient(180deg,
    rgba(9,14,28,.10) 0%,rgba(9,14,28,.30) 30%,
    rgba(13,20,40,.72) 52%,rgba(9,14,28,.94) 74%,#070B15 100%)}
  .poster,.cue{display:none}
  .band{opacity:0}
  .band-settle{opacity:1;--k:1}
  .band-settle .settle-sub,.band-settle .settle-cta,.band-settle .settle-logo{opacity:1;transform:none}
  .band-settle .w{opacity:1;transform:none}
  .settle-sub{--ks:1}
  .settle-cta{--kb:1}
}

/* PETITS ÉCRANS : mise en page */
@media (max-width:880px){
  .sec-reseaux{grid-template-columns:1fr}
  .sys-grid{grid-template-columns:1fr}
  .faq-grid{grid-template-columns:1fr}
  .faq-aside{position:static}
  .steps{grid-template-columns:1fr;gap:22px}
  .join-form{grid-template-columns:1fr}
  .globe-wrap{min-height:0;display:flex;flex-direction:column;align-items:center;gap:1.6rem;overflow:visible}
  .gstat{position:static;max-width:none;text-align:left;align-items:flex-start}
  .slogan{font-size:clamp(1.7rem,7vw,2.4rem)}
  .slogan-l{top:12vh}
  .slogan-r{bottom:14vh}
  .nav-links a:not(.btn){display:none}
  .nav{padding:12px 16px}
  .nav-brand{gap:8px}
  .nav-brand span{font-size:.9rem}
}

/* EFFETS BULLE (extraits de jeskojets.com, recréés en vanilla)
   1. Échange de texte lettre par lettre sur les boutons : deux copies
      du label ; au survol la première sort par le haut, la seconde
      monte du bas, en cascade. Construit par app.js sur pointeur fin.
   2. Bouton magnétique : app.js pilote transform ; on retire ici la
      transition CSS de transform pour ne pas lutter contre le JS. */
.swap{position:relative;display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom}
.swap-copy{display:block}
.swap-copy.is-b{position:absolute;inset:0}
.swap-ch{display:inline-block;transition:transform .55s var(--ease-jesko),opacity .55s var(--ease-jesko);
  transition-delay:calc(var(--i) * 14ms)}
.swap-copy.is-b .swap-ch{transform:translateY(115%);opacity:0}
@media (hover:hover) and (pointer:fine){
  .btn:hover .swap-copy.is-a .swap-ch,.btn:focus-visible .swap-copy.is-a .swap-ch{transform:translateY(-115%);opacity:0}
  .btn:hover .swap-copy.is-b .swap-ch,.btn:focus-visible .swap-copy.is-b .swap-ch{transform:translateY(0);opacity:1}
}
.has-magnet{transition-property:background,color,box-shadow;will-change:transform}
.has-magnet:hover{transform:none}

/* REDUCED MOTION : tout est honoré, états finaux affichés */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;transition-delay:0s !important}
  html{scroll-behavior:auto}
  body{opacity:1}
  .sec .kicker,.sec .sec-title,.hold-wrap,.fstep,.gstat,.sec-methode .step,.reseaux-visual{opacity:1;transform:none}
  .card{opacity:1;transform:none;filter:none}
  .garc{stroke-dashoffset:0}
  .sys-list::after{height:calc(100% - 12px)}
  .sec-methode .step::before{width:52%}
  .shooting-star{display:none}
  .hold-ring circle{stroke-dashoffset:0}
  .band-settle{opacity:1}
  .swap-copy.is-b{visibility:hidden}
  .swap-copy.is-a .swap-ch{transform:none !important;opacity:1 !important}
}