/* ───────────────── Base & tokens ───────────────── */
:root{
  /* Palette - War Sails maritime theme */
  --bg:#0a0e14;
  --elev:#15202b;
  --panel:#0f1419;
  --chip:#1a2632;
  --text:#e8f0f7;
  --muted:#8b99a6;
  --brand:#4a9eff;
  --brand-hover:#6bb3ff;

  --max:1100px;
  --radius:12px;
  --shadow:0 2px 8px rgba(0,0,0,0.2);

  /* typo fluide */
  --step--1: clamp(.9rem, .85rem + .2vw, 1rem);
  --step-0 : clamp(1rem, .95rem + .5vw, 1.125rem);
  --step-1 : clamp(1.25rem, 1.05rem + 1vw, 1.6rem);
  --step-2 : clamp(1.6rem, 1.3rem + 1.8vw, 2.2rem);
  --step-3 : clamp(2.2rem, 1.8rem + 2.6vw, 3rem);

  /* Accents FR plus nets (optionnel) */
  font-variant-ligatures: contextual common-ligatures;
  font-feature-settings: "kern","liga","clig","calt";
}

*{box-sizing:border-box}
html,body{height:100%}
html{color-scheme:dark}

body{
  margin:0;
  font-family:'Segoe UI', Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%; height:auto; display:block}
.container{max-width:var(--max); margin:0 auto; padding:0 1rem}

/* Visually hidden (accessibility) */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Focus visible */
:focus-visible{outline:2px solid var(--brand); outline-offset:2px}

/* Body lock (piloté par JS quand menu ouvert) */
html.nav-open, body.nav-open{overflow:hidden}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}