*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--top-h) + 130px)}
html.lock{overflow:hidden}
body{margin:0;min-height:100dvh;font:400 1rem/1.45 var(--font);color:var(--text);background:
  radial-gradient(900px 520px at 85% -8%,#16413f66,transparent 70%),
  radial-gradient(700px 480px at -5% 12%,#1b3a5a40,transparent 70%),var(--bg);background-attachment:fixed}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.ic{flex:none;display:block}              /* garde-fou : une icône n'est jamais plus grande que ses attributs width/height */
svg{max-width:100%;max-height:100%}
:where(a,button,input,select,summary,[tabindex]):focus-visible{outline:2px solid var(--lime);outline-offset:2px;border-radius:8px}
.skip{position:absolute;left:-999px;top:8px;background:var(--lime);color:#13321f;padding:8px 12px;border-radius:8px;z-index:100}
.skip:focus{left:8px}
[hidden]{display:none!important}

/* Barre supérieure */
.top{position:sticky;top:0;z-index:40;height:var(--top-h);background:#0a171ff0;backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top-in{height:100%;max-width:1680px;margin:0 auto;padding:0 var(--gut);display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.logo{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(145deg,var(--lime),#7fd9a2);color:#12301f;font:700 1.15rem var(--display);box-shadow:0 2px 0 #3d7a55}
.brand-t{display:grid;line-height:1.1}
.brand-t b{font:700 .95rem var(--display);letter-spacing:.07em;text-transform:uppercase}
.brand-t small{font-size:.7rem;color:var(--muted)}
.brand-t em{font-style:normal;color:var(--mint)}
.tabs{display:flex;gap:2px;margin-left:8px;min-width:0;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 13px;border-radius:999px;color:var(--muted);font-weight:600;font-size:.86rem;white-space:nowrap;transition:background-color var(--ease),color var(--ease)}
.tab:hover{color:var(--text);background:#ffffff0d}
.tab.on{color:#12301f;background:var(--lime)}
.tab.ext{opacity:.8}
.top-r{margin-left:auto;display:flex;align-items:center;gap:10px}
.lang{display:inline-flex;padding:3px;border-radius:999px;background:#ffffff0d;border:1px solid var(--line)}
.lang button{height:26px;padding:0 10px;border-radius:999px;font-size:.74rem;font-weight:700;color:var(--muted)}
.lang button.on{background:var(--surface-2);color:var(--text)}
.old{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px;border-radius:999px;border:1px solid var(--line-2);font-size:.8rem;font-weight:600;color:var(--muted);white-space:nowrap}
.old:hover{color:var(--text);border-color:var(--mint)}

.page{max-width:1680px;margin:0 auto;padding:0 var(--gut) 60px}
.intro{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:26px 0 16px}
.intro h1{margin:0;font:700 clamp(1.7rem,3.4vw,2.4rem)/1.05 var(--display);letter-spacing:-.01em}
.lead{margin:6px 0 0;color:var(--muted)}
.stats{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.stats span{padding:6px 12px;border-radius:999px;background:#ffffff0a;border:1px solid var(--line);font-size:.78rem;color:var(--muted)}
.stats b{font:700 .98rem var(--display);color:var(--lime);margin-right:3px}
.note{margin:34px 0 0;text-align:center;color:var(--dim);font-size:.78rem}
.btn{height:40px;padding:0 18px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line-2);font-weight:600}
.btn:hover{border-color:var(--mint)}

@media(max-width:900px){
  .top-in{gap:10px}.brand-t small{display:none}.old span{display:none}
  .tabs{order:3;position:absolute;left:0;right:0;top:100%;height:46px;margin:0;padding:6px var(--gut);background:#0a171ff0;border-bottom:1px solid var(--line);align-items:center}
  html{scroll-padding-top:calc(var(--top-h) + 46px + 120px)}
  .page{padding-top:46px}
  .stats{display:none}
  .intro{padding:16px 0 10px}
}
@media(max-width:520px){.old{display:none}.lead{font-size:.88rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}