/* ============================================================
   DESIGN SYSTEM — jetons uniques, remplis depuis DESIGN.md.
   Regle : AUCUNE couleur/taille en dur dans le reste du CSS.
   Concept : « la table de tri ». Deux matieres, encre et papier,
   et une couleur rationnee qui ne sert qu'a porter un signal.
   ============================================================ */

/* ---------- Polices self-hosted (assets, pas dependances) ----------
   Sous-ensemble latin, fichiers variables. Licences dans fonts/LICENCES.md. */
@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-variable.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/geist-mono-variable.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("../fonts/literata-variable.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("../fonts/literata-variable-italic.woff2") format("woff2");
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- Surface papier (mode par defaut) ----------
     Contrastes calcules le 22/08/2026, tous AA ou AAA. */
  --couleur-papier: #f4f6f3;             /* fond de la zone de travail */
  --couleur-surface: #ffffff;            /* les « feuilles » posees dessus */
  --couleur-encre: #12181a;              /* texte principal, 16.5 sur papier */
  --couleur-encre-douce: #55605c;        /* texte secondaire, 6.0 sur papier */
  --couleur-bordure: #dde2dc;            /* filet 1px, separateur par defaut */

  /* ---------- Couleur rationnee : elle porte un sens, jamais un decor ---------- */
  --couleur-signal: #1d4d3b;             /* vert foret, 9.7 sur blanc */
  --couleur-signal-contraste: #ffffff;
  --couleur-signal-clair: #4e9e7c;       /* la seule qui se voit sur l'encre, 5.6 */
  --couleur-alerte: #9e3b2c;             /* UNIQUEMENT le danger, 6.7 sur blanc */
  --couleur-attention: #8a6212;          /* avertissement, 5.5 sur blanc */

  /* ---------- Matiere encre (rail de navigation, ecran de connexion) ---------- */
  --couleur-encre-fond: #12181a;
  --couleur-encre-surface: #1b2325;      /* survol, groupe ouvert */
  --couleur-encre-filet: #333e41;        /* separateur, purement decoratif */
  --couleur-sur-encre: #f4f6f3;          /* 16.5 sur l'encre */
  --couleur-sur-encre-douce: #9aa7a2;    /* 7.2 sur l'encre */

  /* ---------- Typographie : voix editoriale, voix d'interface, chiffres ---------- */
  --police-editoriale: "Literata", Georgia, "Times New Roman", serif;
  --police-interface: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --police-donnees: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --taille-base: 1rem;
  --txt-display: 2rem;
  --txt-h1: 1.5rem;
  --txt-h2: 1.25rem;
  --txt-h3: 1rem;
  --txt-lecture: 1.0625rem;
  --txt-corps: 0.9375rem;
  --txt-dense: 0.875rem;
  --txt-libelle: 0.8125rem;
  --txt-donnee: 0.8125rem;

  /* ---------- Espacements ---------- */
  --espace-xs: 0.25rem;
  --espace-s: 0.5rem;
  --espace-m: 1rem;
  --espace-l: 2rem;
  --espace-xl: 4rem;

  /* ---------- Divers ---------- */
  --rayon: 0.375rem;                     /* une seule echelle d'arrondi */
  --largeur-max: 72rem;
  --largeur-lecture: 68ch;               /* contenus de formation uniquement */
  --largeur-rail: 15rem;
  --hauteur-ligne-dense: 2.25rem;

  /* ---------- Motion : liste fermee, voir DESIGN.md §7 ---------- */
  --duree-survol: 120ms;
  --duree-appui: 80ms;
  --duree-ouverture: 180ms;
  --duree-fermeture: 120ms;
  --courbe-sortie: ease-out;
  --courbe-entree: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---------- Compatibilite : anciens noms du gabarit ----------
     Le HTML de depart s'en sert encore. Ils disparaissent avec la feature 3,
     quand le shell applicatif remplace la coquille vitrine. */
  --couleur-fond: var(--couleur-papier);
  --couleur-texte: var(--couleur-encre);
  --couleur-texte-secondaire: var(--couleur-encre-douce);
  --couleur-primaire: var(--couleur-signal);
  --couleur-primaire-contraste: var(--couleur-signal-contraste);
  --police-titres: var(--police-editoriale);
  --police-texte: var(--police-interface);
  --echelle: 1.25;
}

@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;
  }
}

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

/* L'attribut `hidden` pilote les états d'une application (écran affiché, bouton
   disponible…). Sans cette règle, la moindre classe qui fixe `display` l'emporte sur
   la feuille du navigateur et l'élément « caché » reste visible — voir PIEGES.md E1.
   C'est la seule justification acceptable d'un `!important` dans nos feuilles. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  font-family: var(--police-texte);
  font-size: var(--taille-base);
  color: var(--couleur-texte);
  background: var(--couleur-fond);
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: var(--police-titres);
  line-height: 1.2;
}

img {
  max-width: 100%;
  height: auto;
}

/* ---------- Header / navigation ---------- */
.site-header {
  border-bottom: 1px solid var(--couleur-bordure);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--espace-m);
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: var(--espace-m) var(--espace-l);
}

.nav-logo {
  font-family: var(--police-titres);
  font-weight: 700;
  font-size: calc(var(--taille-base) * var(--echelle));
  color: var(--couleur-texte);
  text-decoration: none;
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  font-size: 1.5rem;
  padding: var(--espace-xs) var(--espace-s);
  cursor: pointer;
}

.nav-menu {
  display: flex;
  gap: var(--espace-l);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu a {
  color: var(--couleur-texte);
  text-decoration: none;
}

.nav-menu a:hover,
.nav-menu a:focus-visible {
  color: var(--couleur-primaire);
}

/* ---------- Sections ---------- */
.hero {
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: var(--espace-xl) var(--espace-l);
  text-align: center;
}

.hero h1 {
  font-size: calc(var(--taille-base) * var(--echelle) * var(--echelle) * var(--echelle));
  margin: 0 0 var(--espace-m);
}

.hero p {
  color: var(--couleur-texte-secondaire);
  max-width: 40rem;
  margin: 0 auto;
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--couleur-bordure);
  text-align: center;
  padding: var(--espace-l);
  color: var(--couleur-texte-secondaire);
  font-size: 0.875rem;
}

/* ---------- Mobile ---------- */
@media (max-width: 48rem) {
  .nav-toggle {
    display: block;
  }

  .nav-menu {
    display: none;
    flex-direction: column;
    gap: var(--espace-m);
    width: 100%;
    padding: var(--espace-m) 0;
  }

  .nav-menu.ouvert {
    display: flex;
  }
}