/* ══ Reset ══ */
/* ─── Reset ─────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; margin:0; padding:0; }
/* L'échelle de texte (A− / A+) agit ici : tout ce qui est en rem suit.
   Le bandeau de titre reste en px, sinon A+ le fait grandir et casse
   l'effet de hauteur. */
html { font-size:calc(16px * var(--text-scale)); scroll-behavior:smooth; }
body {
  font-family:var(--sans); background:var(--bg); color:var(--text);
  min-height:100vh; overflow-x:hidden;
  /* PIÈGE : sans overflow-anchor:none, le navigateur compense le
     raccourcissement de la page quand le bandeau se réduit et peut ramener
     le défilement à 0 en laissant le bandeau compact. */
  overflow-anchor:none;
}
/* height:auto est INDISPENSABLE : les attributs width/height du HTML sont
   traduits en hauteur CSS par le navigateur. Sans cette ligne, une image
   portant height="3000" est étirée sur 3000 px, puis rognée par son
   conteneur — elle apparaît comme un zoom sur un fragment de la photo.
   Les règles qui ont besoin d'une hauteur imposée (vignettes carrées,
   logos) la redéfinissent avec une classe, plus spécifique. */
img  { display:block; max-width:100%; height:auto; }
a    { color:inherit; text-decoration:none; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
button { cursor:pointer; border:none; background:none; font-family:inherit; color:inherit; }
input, select, textarea {
  font-family:var(--sans); background:var(--bg3); border:1px solid var(--border2);
  color:var(--text); padding:.6em .9em; border-radius:var(--r); outline:none; width:100%;
  transition:border-color var(--t);
}
input:focus, select:focus, textarea:focus { border-color:var(--accent); }
input::placeholder, textarea::placeholder { color:var(--text-dim); }
select option { background:var(--bg2); }

/* ══ Utilitaires ══ */
/* ─── Utilities ──────────────────────────────────────────── */
.hidden  { display:none !important; }
.fade-in { animation:fadeIn .4s ease; }
@keyframes fadeIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes spin   { to { transform:rotate(360deg); } }
.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;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important;
                            transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* ══ Boutons ══ */
/* ─── Buttons ───────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.55em 1.3em; border-radius:var(--r);
  font-size:.78rem; font-weight:400; letter-spacing:.1em; text-transform:uppercase;
  transition:all var(--t); cursor:pointer;
}
.btn-primary  { background:var(--accent); color:var(--on-accent); }
.btn-primary:hover { background:var(--accent2); }
.btn-outline  { border:1px solid var(--border2); color:var(--text-mid); }
.btn-outline:hover { border-color:var(--accent); color:var(--accent); }
.btn-danger   { background:var(--error); color:var(--on-error); }
.btn-danger:hover { opacity:.85; }
.btn-ghost    { color:var(--text-dim); padding:.4em .8em; }
.btn-ghost:hover { color:var(--text); }
.btn-sm       { padding:.38em .85em; font-size:.72rem; }