/* ==========================================================================
   tokens.css — charte MEO « Bleu petrole & orange », socle premium-tech
   Palette alignee sur meosafety.eu (theme-color #18323C).
   ========================================================================== */
:root{
  --ink:#16303A;          /* bleu petrole MEO */
  --ink-deep:#0B1E25;
  --ink-soft:#5A727C;
  --accent:#E07A3F;       /* orange MEO */
  --accent-warm:#F0955C;
  --accent-deep:#C4632C;
  --plum:#6E5367;
  --sea:#2E8C8C;

  --paper:#F4F6F6;        /* fond general, neutre froid tres clair */
  --paper-2:#EDF1F1;      /* alternance de section */
  --surface:#FFFFFF;
  --line:#E4EAEB;         /* filet discret */
  --line-soft:#EEF2F2;
  --ok:#2E8C6A;
  --warn:#C4562F;

  /* Surfaces "marque" foncees (footer, boutons, bandeaux) — restent sombres dans les 2 themes */
  --brand-surface:#16303A; --brand-surface-2:#0B1E25;
  color-scheme:light;

  /* Coque du robot (repeinte en direct par le selecteur de coloris) */
  --shell:#F1EFE9; --shell-shade:#D6D2C8;

  /* Rayons — un peu plus contenus qu'avant (rendu plus pro) */
  --r-s:10px; --r-m:16px; --r-l:22px; --r-xl:30px;

  /* Ombres portees douces, en couches (signature premium) */
  --shadow-xs:0 1px 2px rgba(11,30,37,.05);
  --shadow-s:0 2px 6px rgba(11,30,37,.06), 0 1px 2px rgba(11,30,37,.05);
  --shadow-m:0 10px 30px -12px rgba(11,30,37,.22), 0 2px 8px rgba(11,30,37,.05);
  --shadow-l:0 30px 70px -30px rgba(11,30,37,.38), 0 8px 22px -14px rgba(11,30,37,.22);

  --measure:64ch;
  --pad:clamp(20px,5vw,68px);
  --ease:cubic-bezier(.22,.8,.28,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:"Bricolage Grotesque","Figtree",sans-serif;font-weight:700;letter-spacing:-.025em;line-height:1.04;margin:0}
h1{font-size:clamp(2.6rem,6.4vw,4.9rem)}
h2{font-size:clamp(1.95rem,3.8vw,3.15rem)}
h3{font-size:clamp(1.14rem,2vw,1.5rem);letter-spacing:-.015em}
h4{font-size:1.02rem}
p{margin:0 0 1em;max-width:var(--measure)}
a{color:inherit}
img,svg{max-width:100%}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.wrap{width:min(1200px,100%);margin:0 auto;padding-inline:var(--pad)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:10px 16px;border-radius:8px;z-index:200}
.skip-link:focus{left:12px}

/* ---------- reveal on scroll (micro-animation premium) ---------- */
html.reveal [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease);will-change:opacity,transform}
html.reveal [data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.reveal [data-reveal]{opacity:1;transform:none}}

/* ---------- Theme sombre (toggle jour/nuit) ---------- */
@media (prefers-color-scheme: dark){
  html:not(.light){
    color-scheme:dark;
    --ink:#E7F0F2; --ink-deep:#F4FAFB; --ink-soft:#9FB6BC;
    --paper:#0C1A20; --paper-2:#102A32; --surface:#152C35;
    --line:#26454F; --line-soft:#1E3A43;
    --brand-surface:#1A3A45; --brand-surface-2:#0E242C;
    --shadow-xs:0 1px 2px rgba(0,0,0,.4);
    --shadow-s:0 2px 6px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.4);
    --shadow-m:0 12px 34px -12px rgba(0,0,0,.7),0 2px 8px rgba(0,0,0,.4);
    --shadow-l:0 34px 70px -30px rgba(0,0,0,.8),0 10px 24px -14px rgba(0,0,0,.6);
  }
}
html.dark{
  color-scheme:dark;
  --ink:#E7F0F2; --ink-deep:#F4FAFB; --ink-soft:#9FB6BC;
  --paper:#0C1A20; --paper-2:#102A32; --surface:#152C35;
  --line:#26454F; --line-soft:#1E3A43;
  --brand-surface:#1A3A45; --brand-surface-2:#0E242C;
  --shadow-xs:0 1px 2px rgba(0,0,0,.4);
  --shadow-s:0 2px 6px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.4);
  --shadow-m:0 12px 34px -12px rgba(0,0,0,.7),0 2px 8px rgba(0,0,0,.4);
  --shadow-l:0 34px 70px -30px rgba(0,0,0,.8),0 10px 24px -14px rgba(0,0,0,.6);
}