/* PlanetFinance : feuille de style commune aux pages FR et EN. */
body{margin:0}img{max-width:100%}[hidden]{display:none!important}
:root{
  --paper:#F3F5F8; --surface:#FFFFFF; --ink:#0F1E2D; --muted:#52606D; --line:#D6DDE5;
  --accent:#075694; --accent-soft:#E3EEF7; --cyan:#1AACE3; --maple:#B5402A; --warn-bg:#FBF1E6; --warn-ink:#7A4A12; --logo-light:block; --logo-dark:none;
  --display:"Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --body:"Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#0C1722; --surface:#132232; --ink:#E6EDF3; --muted:#98A8B8; --line:#25384A;
    --accent:#3DB5E6; --accent-soft:#12304A; --cyan:#1AACE3; --maple:#E27A62; --warn-bg:#2B2217; --warn-ink:#F0C48A; --logo-light:none; --logo-dark:block;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#0C1722; --surface:#132232; --ink:#E6EDF3; --muted:#98A8B8; --line:#25384A;
  --accent:#3DB5E6; --accent-soft:#12304A; --cyan:#1AACE3; --maple:#E27A62; --warn-bg:#2B2217; --warn-ink:#F0C48A; --logo-light:none; --logo-dark:block;
}
*{box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;padding-inline:16px}
.wrap{max-width:1080px;margin-inline:auto}
h1,h2,h3{font-family:var(--display);text-wrap:balance;line-height:1.15;margin:0}
h2{font-size:clamp(1.6rem,3.2vw,2.2rem);font-weight:800;letter-spacing:-.01em}
h3{font-size:1.1rem;font-weight:700}
p{margin:0}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.eyebrow{font-family:var(--mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
header.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--paper);border-bottom:1px solid var(--line);margin-inline:-16px;padding-inline:16px}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px;flex-wrap:wrap}
.logo{display:flex;align-items:center;text-decoration:none}
.logo img{height:48px;width:auto}
.logo-l{display:var(--logo-light)} .logo-d{display:var(--logo-dark)}

.nav ul{display:flex;gap:20px;list-style:none;margin:0;padding:0;flex-wrap:wrap;font-size:.92rem}
.nav ul a{color:var(--muted);text-decoration:none}
.nav ul a:hover{color:var(--ink)}
.lang{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;font-family:var(--mono);font-size:.75rem}
.lang a,.lang span{padding:4px 10px;text-decoration:none;color:var(--muted)}
.lang span{background:var(--accent);color:var(--surface)}
.mail{font-family:var(--mono);color:var(--ink);user-select:all}
.langbar{margin-inline:-16px;padding:10px 16px;background:var(--accent-soft);color:var(--ink);font-size:.9rem;display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap}
.langbar a,.langbar button{font:inherit;font-weight:600;color:var(--accent);background:none;border:0;cursor:pointer;text-decoration:underline;padding:0}
.btn{display:inline-block;font-weight:600;text-decoration:none;border-radius:6px;padding:12px 20px;border:1px solid transparent;font-size:.95rem}
.btn.primary{background:var(--accent);color:var(--surface)}
.btn.ghost{border-color:var(--line);color:var(--ink)}
section{padding-block:72px;border-bottom:1px solid var(--line);scroll-margin-top:64px}
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center;padding-block:64px 72px}
.hero h1{font-size:clamp(2.1rem,5vw,3.4rem);font-weight:800;letter-spacing:-.02em;margin-block:14px 18px}
.hero .lead{font-size:1.12rem;color:var(--muted);max-width:52ch}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.risk{margin-top:22px;font-size:.82rem;color:var(--muted);max-width:56ch}
.pairs{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:22px;display:grid;gap:14px}
.pair{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:baseline;padding-bottom:14px;border-bottom:1px dashed var(--line)}
.pair:last-of-type{border-bottom:0;padding-bottom:0}
.pair .code{font-family:var(--mono);font-weight:600;font-size:1.5rem;letter-spacing:.02em;grid-row:span 2}
.pair .code b{color:var(--accent);font-weight:600}
.pair .code s{text-decoration:none;color:var(--maple)}
.pair .name{font-weight:600}
.pair .sess{font-size:.85rem;color:var(--muted);font-family:var(--mono)}
.pairs .foot{font-size:.82rem;color:var(--muted)}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-block:1px solid var(--line);margin-top:0}
.fact{padding:22px 18px;border-right:1px solid var(--line)}
.fact:last-child{border-right:0}
.fact .v{font-family:var(--display);font-weight:800;font-size:1.7rem;font-variant-numeric:tabular-nums}
.fact .l{font-size:.85rem;color:var(--muted)}
.two{display:grid;grid-template-columns:1fr 1.3fr;gap:48px;align-items:start}
.stack{display:grid;gap:16px}
.muted{color:var(--muted)}
.todo{background:var(--warn-bg);color:var(--warn-ink);border-radius:4px;padding:1px 6px;font-size:.85em;font-family:var(--mono)}
.chart-ph{border:1.5px dashed var(--line);border-radius:10px;min-height:260px;display:grid;place-items:center;text-align:center;padding:24px;color:var(--muted);background:var(--surface)}
.chart-ph svg{width:100%;max-width:520px;height:auto;margin-bottom:12px}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}
.kpi{border-top:2px solid var(--ink);padding-top:10px}
.kpi .v{font-family:var(--mono);font-size:1.2rem}
.steps{list-style:none;padding:0;margin:32px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:s}
.steps li{counter-increment:s;display:grid;gap:8px;align-content:start}
.steps li::before{content:counter(s);font-family:var(--mono);font-weight:600;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.steps p{color:var(--muted);font-size:.95rem}
.faq{display:grid;gap:0;margin-top:28px;border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line);padding-block:16px}
summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--mono);color:var(--accent)}
details[open] summary::after{content:"–"}
details p{margin-top:10px;color:var(--muted);max-width:68ch}
.about{display:grid;grid-template-columns:160px 1fr;gap:32px;align-items:start}
.avatar{width:160px;max-width:100%;aspect-ratio:1;border-radius:50%;background:var(--accent-soft);display:grid;place-items:center;align-content:center;gap:10px;color:var(--accent);font-family:var(--mono);font-size:.7rem;text-align:center;padding:12px}
.avatar img{width:62%;height:auto}
.about .lede{font-family:var(--display);font-size:1.3rem;font-weight:700;line-height:1.35;max-width:36ch}
form{display:grid;gap:14px;max-width:520px}
.form-note{font-size:.85rem;color:var(--muted);margin:0}
.form-note .mail{user-select:auto}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{margin:0;font-size:.95rem;color:var(--muted)}
.form-status.ok{color:var(--accent)}
.form-status.err{color:var(--maple)}
label{font-size:.85rem;font-weight:600;display:grid;gap:6px}
input,textarea{font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink)}
.sent{color:var(--accent);font-size:.9rem}
footer{padding-block:40px 48px;font-size:.85rem;color:var(--muted)}
footer .warn{background:var(--warn-bg);color:var(--warn-ink);border-radius:8px;padding:16px 18px;margin-bottom:24px;line-height:1.5}
footer .links{display:flex;gap:20px;flex-wrap:wrap}
footer .links a{color:var(--muted)}
.kpis4{grid-template-columns:repeat(4,1fr);margin-block:28px 8px}
.perf{margin:24px 0 0}
.perf-plot{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 8px 4px}
#perf-svg{display:block;width:100%;height:auto;overflow:visible}
#perf-svg text,#months-svg text{fill:var(--muted);font-family:var(--mono);font-size:11px}
#months-svg{display:block;width:100%;height:auto;overflow:visible;touch-action:pan-y}
#months-svg .grid{stroke:var(--line);stroke-width:1}
#months-svg .axis{stroke:var(--muted);stroke-width:1}
#months-svg .bar{fill:var(--accent);transition:transform .6s cubic-bezier(.2,.7,.2,1),fill .15s}
#months-svg .bar.neg{fill:var(--maple)}
#months-svg .bar.hot{fill:var(--cyan)}
#months-svg.pre .bar{transform:scaleY(0)}
.months-title{margin:40px 0 0}
#perf-svg .grid{stroke:var(--line);stroke-width:1}
#perf-svg .line{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round}
#perf-svg .area{fill:var(--accent);opacity:.12}
#perf-svg .cross{stroke:var(--muted);stroke-width:1;stroke-dasharray:3 3}
#perf-svg .dot{fill:var(--accent);stroke:var(--surface);stroke-width:2}
.perf figcaption{font-size:.82rem;margin-top:10px;max-width:72ch}
.tip{position:absolute;pointer-events:none;background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:.78rem;padding:6px 9px;border-radius:6px;white-space:nowrap;transform:translate(-50%,-120%)}
.years{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:20px;border-top:1px solid var(--line)}
.years div{display:grid;gap:2px;padding:12px 10px;border-right:1px solid var(--line)}
.years div:last-child{border-right:0}
.years span{font-size:.85rem;color:var(--muted)} .years small{font-size:.75rem}
.years b{font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums;color:var(--accent)}
@media (max-width:820px){.kpis4{grid-template-columns:repeat(2,1fr)}.years{grid-template-columns:repeat(2,1fr)}.years div{border-right:0;border-bottom:1px solid var(--line)}}
/* --- animations --- */
.pairs{background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.sessions{display:grid;gap:8px;margin:0;padding:12px 0 0;border-top:1px solid var(--line);list-style:none}
.sessions li{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;font-size:.88rem}
.sessions .clock{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--muted)}
.pill{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted);display:inline-flex;align-items:center;gap:6px;min-width:84px;justify-content:center}
.pill.on{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.pill.on::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.tape{margin-inline:-16px;overflow:hidden;border-block:1px solid var(--line);background:var(--surface);white-space:nowrap}
.tape .track{display:inline-flex;gap:40px;padding-block:12px;animation:tape 40s linear infinite;font-family:var(--mono);font-size:.82rem;color:var(--muted)}
.tape b{color:var(--ink);font-weight:600}
.tape .up{color:var(--accent)} .tape .dn{color:var(--maple)}
@keyframes tape{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.hero h1 .hl{background:linear-gradient(90deg,var(--accent),var(--cyan),var(--accent));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 8s linear infinite}
@keyframes sheen{to{background-position:-200% 0}}
.btn{transition:transform .15s ease,box-shadow .15s ease,background .15s}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 18px -8px var(--accent)}
.rv{transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1),filter .8s;transition-delay:var(--d,0s)}
.rv.pre{opacity:0;transform:translateY(36px);filter:blur(4px)}
.rv.pre.from-left{transform:translateX(-48px)}
.rv.pre.from-right{transform:translateX(48px)}
.rv.pre.zoom{transform:scale(.92)}
.fact .v{display:inline-block}
.steps{position:relative}
.steps::before{content:"";position:absolute;top:18px;left:18px;right:18px;height:2px;background:var(--line);z-index:0}
.steps::after{content:"";position:absolute;top:18px;left:18px;height:2px;width:0;background:var(--accent);z-index:0;transition:width 1.6s ease}
.steps.go::after{width:calc(100% - 36px)}
.steps li::before{position:relative;z-index:1;transition:background .3s,color .3s}
.steps.go li::before{background:var(--accent);color:var(--surface)}
.steps.go li:nth-child(1)::before{transition-delay:.1s}.steps.go li:nth-child(2)::before{transition-delay:.5s}
.steps.go li:nth-child(3)::before{transition-delay:.9s}.steps.go li:nth-child(4)::before{transition-delay:1.3s}
@media (max-width:820px){
  .steps::before,.steps::after{display:none}

  .hero,.two{grid-template-columns:1fr;gap:32px}
  .facts{grid-template-columns:repeat(2,1fr)}
  .fact:nth-child(2){border-right:0}
  .fact:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .about{grid-template-columns:1fr}
  .nav ul{gap:14px;font-size:.85rem}
}
/* Menu mobile : bouton à trois barres, liens en liste déroulante */
.menu-btn{display:none;width:44px;height:44px;padding:11px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);cursor:pointer;flex-direction:column;justify-content:space-between}
.menu-btn span{display:block;height:2px;border-radius:2px;background:var(--ink);transition:transform .2s,opacity .2s}
.nav.open .menu-btn span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav.open .menu-btn span:nth-child(2){opacity:0}
.nav.open .menu-btn span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
@media (max-width:820px){
  .nav .wrap{flex-wrap:nowrap;padding-block:10px}
  .logo img{height:38px}
  .menu-btn{display:flex}
  .nav nav{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 12px 24px -16px rgba(0,0,0,.35);display:none}
  .nav.open nav{display:block}
  .nav ul{flex-direction:column;gap:0;padding:4px 16px 16px;font-size:1rem}
  .nav ul li{border-bottom:1px solid var(--line)}
  .nav ul li:last-child{border-bottom:0;padding-top:14px}
  .nav ul a{display:block;padding:13px 0;color:var(--ink)}
  .nav ul .lang a,.nav ul .lang span{display:inline-block;padding:6px 16px}
  section{padding-block:56px;scroll-margin-top:60px}
  .hero{padding-block:36px 48px}
  }
@media (max-width:480px){
  .steps{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr}
  .kpis.kpis4{grid-template-columns:repeat(2,1fr);gap:20px 16px}
  .kpi .muted{font-size:.85rem}
  section{padding-block:44px}
  .pair{grid-template-columns:1fr}
  .pair .code{grid-row:auto}
  .years div:last-child:nth-child(odd){grid-column:1/-1}
  .langbar{font-size:.85rem;gap:6px 14px}
  .ctas .btn{flex:1 1 100%;text-align:center}
}
#perf-svg{touch-action:pan-y}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}.rv.pre{opacity:1;transform:none;filter:none}}
html{scroll-behavior:smooth}

.page{padding-block:56px 72px;display:grid;gap:18px;max-width:780px}
.page h1{font-size:clamp(1.9rem,4vw,2.6rem);font-weight:800;letter-spacing:-.02em}
.page .lead{font-size:1.08rem;color:var(--muted)}
.guide{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:0;counter-reset:g;border-top:1px solid var(--line)}
.guide li{counter-increment:g;display:grid;grid-template-columns:44px 1fr;gap:4px 16px;padding-block:18px;border-bottom:1px solid var(--line)}
.guide li > *{grid-column:2}
.guide li::before{content:counter(g);grid-row:span 2;font-family:var(--mono);font-weight:600;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--surface)}
.guide p{color:var(--muted)}
.note{background:var(--accent-soft);border-radius:8px;padding:14px 16px;font-size:.92rem}
.page h2{font-size:1.5rem;margin-top:28px}
.page .faq{margin-top:4px}
.legal h2{font-size:1.2rem;margin-top:20px}
.legal address{font-style:normal;color:var(--muted);line-height:1.7}
.back{margin-top:40px}
.back .btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px 10px 14px;border-radius:999px;background:var(--surface);color:var(--accent);border-color:var(--line)}
.back .btn svg{transition:transform .15s ease}
.back .btn:hover{border-color:var(--accent)}
.back .btn:hover svg{transform:translateX(-3px)}
.rules{margin:0;padding-left:1.2em;display:grid;gap:10px}
.rules li{padding-left:4px}
main{overflow-x:clip}
.to-top{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:6;width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--accent);box-shadow:0 4px 14px rgba(15,30,45,.15);cursor:pointer}
.to-top:hover{background:var(--accent-soft)}
.to-top:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.guide .shot{grid-column:2;margin:14px 0 4px;max-width:240px}
.guide .shot.wide{max-width:360px}
.guide .shot img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--line)}
.guide .shot figcaption{margin-top:6px;font-size:.85rem;color:var(--muted)}
.fee-note{font-size:.8rem;margin:10px 0 0;max-width:68ch}
.kpi-note{display:block;margin-top:4px;font-size:.75rem;line-height:1.35}

/* ===== Version 2 : accueil « espace », cartes, reflets et compteurs ===== */
/* Le bandeau d'accueil reste sombre dans les deux thèmes : ses couleurs sont fixes. */
:root{--space:#061423;--space-2:#0B2C4C;--on-space:#E8F1F8;--on-space-muted:#A3B8CA;--space-line:rgba(154,196,230,.16);--sky:#7FD3F2;--glow:color-mix(in srgb,var(--cyan) 45%,transparent);interpolate-size:allow-keywords}
@keyframes rise{from{opacity:0;transform:translateY(22px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes aurora{to{transform:translate(6%,-5%) rotate(10deg) scale(1.1)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes ping{from{transform:scale(1);opacity:.55}to{transform:scale(3.4);opacity:0}}

/* Barre de progression de lecture */
.progress{position:fixed;left:0;right:0;top:env(safe-area-inset-top,0px);height:3px;z-index:8;background:linear-gradient(90deg,var(--accent),var(--cyan));transform-origin:0 50%;transform:scaleX(var(--p,0));pointer-events:none}

/* Navigation en verre dépoli, lien de la section en cours souligné */
header.nav{background:color-mix(in srgb,var(--paper) 74%,transparent);-webkit-backdrop-filter:saturate(1.5) blur(14px);backdrop-filter:saturate(1.5) blur(14px);transition:box-shadow .3s,border-color .3s}
header.nav.scrolled{box-shadow:0 10px 30px -20px rgba(6,20,35,.45)}
.nav ul a{position:relative;transition:color .2s}
.nav ul a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--accent),var(--cyan));transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.nav ul a:hover::after,.nav ul a.active::after{transform:scaleX(1)}
.nav ul a.active{color:var(--ink)}
.nav ul .lang a::after{display:none}

/* Boutons : pilule, lueur, reflet qui passe au survol */
.btn{border-radius:999px;padding:13px 24px;position:relative;overflow:hidden;isolation:isolate}
.btn.primary{box-shadow:0 10px 28px -14px var(--glow)}
.btn.primary::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.38) 50%,transparent 70%);transform:translateX(-120%);transition:transform .75s ease}
.btn.primary:hover::after{transform:translateX(120%)}
.btn.primary:hover{box-shadow:0 14px 34px -12px var(--glow)}

/* Accueil */
.hero{overflow:hidden;margin-top:18px;border-radius:28px;padding:56px 48px 48px;gap:24px;grid-template-columns:1.1fr 1fr;color:var(--on-space);border:1px solid var(--space-line);
  background:radial-gradient(110% 90% at 88% 8%,#0E3A63 0%,transparent 55%),radial-gradient(80% 70% at 0% 100%,#08304F 0%,transparent 62%),var(--space);position:relative;isolation:isolate}
.hero::before{content:"";position:absolute;inset:-30%;z-index:-1;pointer-events:none;filter:blur(30px);
  background:radial-gradient(closest-side,rgba(26,172,227,.30),transparent) 18% 28%/46% 46% no-repeat,radial-gradient(closest-side,rgba(7,86,148,.6),transparent) 82% 72%/56% 56% no-repeat;animation:aurora 24s ease-in-out infinite alternate}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.55;
  background-image:linear-gradient(var(--space-line) 1px,transparent 1px),linear-gradient(90deg,var(--space-line) 1px,transparent 1px);background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse at 30% 30%,#000,transparent 70%);mask-image:radial-gradient(ellipse at 30% 30%,#000,transparent 70%)}
.hero .eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--space-line);border-radius:999px;background:rgba(255,255,255,.04);color:var(--sky)}
.hero .eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 4px rgba(26,172,227,.18)}
.hero h1{color:#fff;font-size:clamp(2.2rem,4.6vw,3.3rem);letter-spacing:-.03em;line-height:1.05}
.hero h1 .hl{background-image:linear-gradient(90deg,#5CCBF2,#B6ECFF,#1AACE3,#5CCBF2)}
.hero .lead{color:var(--on-space-muted)}
.hero .risk{color:#8EA5B9}
.hero .btn.primary{background:linear-gradient(135deg,#0F7DC0,#075694);color:#fff;box-shadow:0 12px 34px -12px rgba(26,172,227,.7)}
.hero .btn.ghost{border-color:rgba(255,255,255,.22);color:#fff;background:rgba(255,255,255,.05)}
.hero .btn.ghost:hover{background:rgba(255,255,255,.1)}
.hero-copy > *{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.hero-copy > :nth-child(2){animation-delay:.12s}.hero-copy > :nth-child(3){animation-delay:.26s}
.hero-copy > :nth-child(4){animation-delay:.38s}.hero-copy > :nth-child(5){animation-delay:.5s}
.orbit{position:relative;display:grid;justify-items:center;animation:rise 1.2s .2s cubic-bezier(.2,.7,.2,1) both}
#globe{display:block;width:100%;max-width:460px;height:auto;aspect-ratio:1;touch-action:pan-y;cursor:grab}
#globe:active{cursor:grabbing}
.hero .pairs{margin-top:-64px;width:min(100%,420px);padding:18px 20px;gap:10px;font-size:.92rem;background:rgba(9,30,51,.62);border-color:var(--space-line);border-radius:18px;color:var(--on-space);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 24px 60px -24px rgba(0,0,0,.7)}
.hero .pairs .eyebrow{padding:0;border:0;background:none}.hero .pairs .eyebrow::before{display:none}
.hero .pair{border-bottom-color:var(--space-line)}
.hero .pair .code b{color:#5CCBF2}.hero .pair .code s{color:#F29A82}
.hero .pair .sess,.hero .pairs .foot,.hero .sessions .clock{color:var(--on-space-muted)}
.hero .sessions{border-top-color:var(--space-line)}
.hero .pill{border-color:var(--space-line);color:var(--on-space-muted)}
.hero .pill.on{border-color:var(--cyan);color:var(--sky);background:rgba(26,172,227,.14)}
.hero .pill.on::before{background:var(--cyan)}
section.hero{border-bottom:1px solid var(--space-line)}

/* Défilé sous l'accueil */
.tape{margin-top:28px;background:transparent;border-color:var(--line);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}

/* Cartes : reflet qui suit la souris */
.spot{position:relative;overflow:hidden;isolation:isolate}
.spot::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--cyan) 18%,transparent),transparent 65%)}
.spot:hover::after{opacity:1}

/* Chiffres clés en cartes */
.facts{border:0;gap:14px;margin-top:22px}
.facts .fact:nth-child(n){border:1px solid var(--line);border-radius:18px;background:var(--surface);padding:22px 20px;transition:transform .3s,border-color .3s}
.facts .fact:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
.fact .v{font-size:clamp(1.7rem,3vw,2.3rem);letter-spacing:-.02em;background:linear-gradient(120deg,var(--ink) 20%,var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}

/* Performances */
.kpis4{gap:14px}
.kpis4 .kpi{border:1px solid var(--line);border-radius:18px;background:var(--surface);padding:20px}
.kpis4 .kpi .v{font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:-.02em;color:var(--accent);font-variant-numeric:tabular-nums;line-height:1.1;margin-bottom:6px}
.kpis4 .kpi:first-child{background:radial-gradient(120% 120% at 100% 0%,#0E3A63,transparent 60%),var(--space);border-color:var(--space-line)}
.kpis4 .kpi:first-child .v{color:var(--sky)}
.kpis4 .kpi:first-child .muted{color:var(--on-space-muted)}
.perf-plot{border-radius:18px;padding:16px 10px 6px}
#perf-svg .line{stroke:url(#pf-line);stroke-width:2.5;filter:drop-shadow(0 6px 10px var(--glow))}
#perf-svg .area{fill:url(#pf-area);opacity:1}
#perf-svg .s1{stop-color:var(--accent)}#perf-svg .s2{stop-color:var(--cyan)}
#perf-svg .a1{stop-color:var(--cyan);stop-opacity:.28}#perf-svg .a2{stop-color:var(--cyan);stop-opacity:0}
#perf-svg .ping{fill:var(--cyan);transform-box:fill-box;transform-origin:center;animation:ping 2.2s ease-out infinite}
#perf-svg .end{fill:var(--accent);font-family:var(--display);font-weight:800;font-size:13px}
#months-svg .bar{fill:url(#pf-bar)}
#months-svg .b1{stop-color:var(--cyan)}#months-svg .b2{stop-color:var(--accent)}
#months-svg .bar.hot{fill:var(--cyan)}
.years{border:0;gap:10px}
.years > div:nth-child(n){border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:12px 14px}

/* Étapes en cartes, reliées par un trait qui se remplit */
.steps li{z-index:1;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px;transition:transform .3s,box-shadow .3s,border-color .3s}
.steps li:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 40%,var(--line));box-shadow:0 18px 40px -26px var(--glow)}
.steps::before,.steps::after{top:38px;left:38px}
.steps::before{right:38px}
.steps.go::after{width:calc(100% - 76px)}

/* FAQ en cartes, ouverture en douceur */
.faq{border-top:0;gap:10px}
.faq details{border:1px solid var(--line);border-radius:14px;padding:16px 20px;background:var(--surface);transition:border-color .3s}
.faq details[open]{border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.faq summary::after{content:"+";flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);transition:transform .3s}
.faq details[open] summary::after{content:"+";transform:rotate(45deg)}
details::details-content{block-size:0;overflow:hidden;transition:block-size .35s ease,content-visibility .35s allow-discrete}
details[open]::details-content{block-size:auto}

/* Qui sommes-nous : anneau et satellite autour du logo */
.avatar{position:relative;overflow:visible}
.avatar::before,.avatar::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none}
.avatar::before{background:conic-gradient(from 0deg,var(--cyan),transparent 30%,var(--accent) 60%,transparent 85%,var(--cyan));
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));animation:spin 14s linear infinite}
.avatar::after{background:radial-gradient(circle at 50% 2px,var(--cyan) 0 5px,transparent 6px);animation:spin 7s linear infinite reverse}

/* Formulaire en carte */
#contact form{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:24px}
input,textarea{border-radius:12px;transition:border-color .2s,box-shadow .2s}
input:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent)}

@media (max-width:820px){
  .hero{grid-template-columns:1fr;margin-inline:-6px;padding:36px 22px 30px;border-radius:22px;gap:12px}
  .orbit{margin-top:4px}
  #globe{max-width:340px}
  .hero .pairs{margin-top:-48px}
  .nav ul a::after{display:none}
  .facts .fact:nth-child(n){padding:18px 16px}
}
@media (max-width:480px){
  .hero{padding:30px 18px 24px}
  .kpis4 .kpi{padding:16px}
}
.hero .pair{padding-bottom:10px}
.hero .pair .code{font-size:1.3rem}
.hero .pairs .foot{font-size:.78rem}