/* ==========================================================================
   VAGABON — BASE.CSS
   Styles de base : typographie, couleurs de fond/texte, éléments HTML natifs,
   focus, sélection.

   Good Times (titres, --font-display) : le fichier réel a été livré dans le
   projet ("Good Times Rg.otf", licence Typodermic Fonts fournie avec —
   Typodermic Desktop EULA 2023.pdf — vérifiée dans le zip d'origine). Il a
   été converti en WOFF2/WOFF (conversion de format uniquement, aucune
   altération du dessin de la police, aucune source tierce) et copié dans
   assets/fonts/good-times/. @font-face actif ci-dessous, une seule graisse
   400 déclarée : c'est la seule graisse réellement livrée (Regular), et une
   vérification de tout le CSS du projet confirme qu'aucune règle ne demande
   une autre graisse pour --font-display (toutes déclarent explicitement
   font-weight: 400, ou n'en déclarent aucun sur du texte qui n'est de toute
   façon jamais mis en gras) — donc aucun risque de graisse manquante.

   Stigsa Display (texte courant, --font-body) : AUCUN fichier n'a encore été
   livré dans le projet (assets/fonts/stigsa-display/ existe mais est vide) —
   le bloc @font-face correspondant reste donc commenté ci-dessous, prêt à
   être activé dès réception des fichiers. En attendant, --font-body continue
   d'utiliser son repli (Georgia, Times New Roman, serif), inchangé.
   ========================================================================== */

@font-face {
  font-family: "Good Times";
  src:
    local("Good Times"),
    url("../assets/fonts/good-times/good-times.woff2") format("woff2"),
    url("../assets/fonts/good-times/good-times.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/*
  Stigsa Display — À DÉCOMMENTER une fois les fichiers copiés dans
  assets/fonts/stigsa-display/ (adapter les noms de fichiers ci-dessous aux
  fichiers réellement livrés). Ne jamais héberger une police dont les droits
  ne sont pas détenus par Virgil Boukraa.

  @font-face {
    font-family: "Stigsa Display";
    src:
      local("Stigsa Display"),
      url("../assets/fonts/stigsa-display/stigsa-display-regular.woff2") format("woff2"),
      url("../assets/fonts/stigsa-display/stigsa-display-regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

  Ajouter une déclaration distincte par graisse réellement livrée.
  Ne jamais déclarer une graisse 700 en pointant vers un fichier Regular.

  @font-face {
    font-family: "Stigsa Display";
    src:
      local("Stigsa Display Bold"),
      url("../assets/fonts/stigsa-display/stigsa-display-bold.woff2") format("woff2"),
      url("../assets/fonts/stigsa-display/stigsa-display-bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
*/

html {
  background-color: var(--color-background);
  color-scheme: light;
}

[data-theme="dark"] {
  color-scheme: light;
}

body {
  background-color: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  transition: background-color var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard);
}

/* Empêche le scroll du fond quand le menu plein écran ou une modale est ouverte */
body.is-locked {
  overflow: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-display);
  font-weight: 400;
}

h1 { font-size: var(--font-size-h1); line-height: var(--line-height-tight); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: var(--font-size-h4); }

/* H5/H6 restent des titres au sens de la charte (section 24.1 : "les titres
   H4 à H6" utilisent Good Times) — pas de graisse 700 artificielle tant
   qu'aucun fichier Bold réel n'est fourni. */
h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--font-size-body-lg);
}

p {
  /* Largeur de ligne confortable pour Stigsa Display (charte section 24.7). */
  color: var(--color-text-muted);
  max-width: 65ch;
}

p.u-text-primary {
  color: var(--color-text);
}

a {
  transition: color var(--duration-fast) var(--ease-standard),
              opacity var(--duration-fast) var(--ease-standard);
}

strong, b {
  color: var(--color-text);
  font-weight: 700;
}

em {
  color: var(--color-accent);
  font-style: normal;
}

blockquote {
  border-left: 2px solid var(--color-accent);
  padding-left: var(--space-md);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--font-size-h4);
  line-height: var(--line-height-heading);
}

code {
  font-family: "SFMono-Regular", Consolas, monospace;
  background: var(--color-surface);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
  font-size: 0.9em;
}

hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-lg) 0;
}

/* ---- Focus visible ------------------------------------------------------
   Un focus net et cohérent partout : indispensable pour la navigation
   clavier (section 28 du brief). */
:focus {
  outline: none;
}

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

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

/* ---- Lien d'évitement -----------------------------------------------------
   Premier élément focusable de chaque page : "Aller au contenu". */
.skip-link {
  position: fixed;
  top: var(--space-sm);
  left: var(--space-sm);
  z-index: 2000;
  background: var(--color-accent);
  color: var(--color-white);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm);
  font-weight: 700;
  transform: translateY(-150%);
  transition: transform var(--duration-fast) var(--ease-standard);
}

.skip-link:focus {
  transform: translateY(0);
}

/* Classe utilitaire pour masquer visuellement un élément tout en le
   laissant disponible pour les lecteurs d'écran (labels, honeypot...). */
.u-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Masque un élément purement décoratif pour les technologies d'assistance
   sans le retirer visuellement (voir attribut aria-hidden appliqué en HTML). */
[aria-hidden="true"] {
  user-select: none;
}