/* ==========================================================================
   OPTIMIZ BTP — Base
   Reset, éléments natifs, typographie. Aucune valeur brute : tout vient
   de tokens.css.
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
  scroll-behavior: smooth;
}

/* Le défilement animé est une préférence, pas un acquis. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* Filet de sécurité contre le débordement horizontal. Ce n'est pas un
     substitut à la mesure : le balayage 320→1920px reste obligatoire. */
  overflow-x: hidden;
}

/* Verrou de défilement quand le panneau mobile est ouvert. */
body[data-scroll-locked] {
  overflow: hidden;
}

/* ---- Titres ------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-semi);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p {
  margin: 0;
  text-wrap: pretty;
}

p + p { margin-top: var(--space-4); }

/* ---- Liens -------------------------------------------------------------- */

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
  transition: color var(--motion-fast) var(--ease),
              opacity var(--motion-fast) var(--ease);
}

a:hover { color: var(--accent); }

/* ⛔ En thème clair, l'or ne tient pas le contraste sur blanc (1,84:1).
   Le survol y passe donc par l'opacité, jamais par la couleur d'accent. */
[data-theme="light"] a:hover {
  color: inherit;
  opacity: .62;
}

/* ---- Focus --------------------------------------------------------------
   Toujours visible, jamais supprimé. Le token --focus change avec le thème
   précisément pour tenir le contraste dans les deux cas.                  */

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

:focus:not(:focus-visible) { outline: none; }

/* ---- Médias ------------------------------------------------------------- */

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* height:auto est obligatoire dès que l'<img> porte width/height en HTML,
   sinon le ratio natif est écrasé. */
img, video { height: auto; }

/* ---- Formulaires -------------------------------------------------------- */

input, textarea, select, button {
  font: inherit;
  color: inherit;
}

/* Sous 16px, iOS zoome automatiquement au focus d'un champ. */
input, textarea, select { font-size: max(1rem, var(--text-base)); }

button { cursor: pointer; }

textarea { resize: vertical; }

/* ---- Listes ------------------------------------------------------------- */

ul, ol {
  margin: 0;
  padding: 0;
}

ul[class], ol[class] { list-style: none; }

/* ---- Adresse ------------------------------------------------------------ */

address {
  font-style: normal;
}

/* ---- hidden --------------------------------------------------------------
   Le style par défaut du navigateur (`[hidden] { display: none }`) a la même
   spécificité que n'importe quelle règle de classe. Dès qu'un composant pose
   un `display` (grid, flex…), il l'écrase silencieusement et l'élément
   « masqué » reste affiché.
   Bug réel constaté sur le questionnaire de diagnostic : les cinq questions
   s'affichaient simultanément alors que l'attribut hidden était bien posé.
   Le !important est ici légitime : `hidden` doit toujours l'emporter.        */

[hidden] { display: none !important; }

/* ---- Utilitaires d'accessibilité ---------------------------------------- */

/* Masquage visuel sans retrait de l'arbre d'accessibilité.
   clip-path plutôt que display:none — un lecteur d'écran doit pouvoir lire. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Premier élément focusable du document. Sort de l'écran jusqu'au focus. */
.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: var(--z-modal);
  padding: var(--space-3) var(--space-5);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  text-decoration: none;
  border-radius: var(--radius);
  transform: translateY(-200%);
  transition: transform var(--motion-fast) var(--ease);
}

.skip-link:focus {
  transform: translateY(0);
  color: var(--accent-ink);
}

/* ---- Sélection ---------------------------------------------------------- */

::selection {
  background: var(--accent);
  color: var(--accent-ink);
}