/* =========================================================
   TOKENS — police, variables de charte, base & reset
   Charte AdriaFlow : teal #288d98 · navy #153e64 · fond #f5f7fa
   (Ne pas modifier ces valeurs — cohérence inter-outils.)
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#f5f7fa;
  --bg-soft:#eef2f6;
  --panel:#ffffff;
  --panel-edge:#dde3ea;
  --amber:#288d98;
  --amber-soft:#21747e;
  --teal:#153e64;
  --violet:#8b76b8;
  --violet-soft:#6b5a90;
  --stone:#7c8a9a;
  --ink:#15263a;
  --ink-dim:#55677c;
  --ink-faint:#5f6e82;
  --ok:#3f8361;
  --warn:#c15b45;
  --serif:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{overflow-x:hidden;} /* garde-fou : aucun défilement horizontal parasite (mobile) */
body{
  background:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(40,141,152,.06), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 10%, rgba(21,62,100,.05), transparent 55%),
    var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  min-height:100vh;
  padding:32px 20px 60px;
}
.wrap{max-width:1080px;margin:0 auto;}

/* accessibilité — helpers globaux (focus visible, texte masqué, reduced-motion) */
.visually-hidden{
  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{outline:2px solid var(--amber);outline-offset:2px;}
.switch:focus-visible{outline-offset:3px;}
.layer-chip:focus-visible{outline-offset:1px;}
button.switch{
  padding:0;font:inherit;text-align:left;-webkit-appearance:none;appearance:none;
}
button.layer-chip{
  padding:10px 12px;font:inherit;text-align:left;width:100%;-webkit-appearance:none;appearance:none;
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}