/* /css/theme.css — source unique des tokens du thème chalkboard/blueprint
   (couleurs, typo, espacement) + utilitaires de zone de frappe ≥44px.

   Avant ce fichier, les tokens de couleur étaient dupliqués (et parfois
   dérivés, avec de légers écarts) dans chaque page HTML sous deux
   vocabulaires différents :
     - vocabulaire "ardoise" (lecon.html, jouer.html, parcours.html,
       quiz-jour.html, quiz-rush.html) : --ardoise, --craie, --craie-doree...
     - vocabulaire "lime" (index.html, quiz.html, filieres.html,
       filiere.html, examens.html...) : --black, --cream, --lime...
   Les deux vocabulaires sont conservés ici : le vocabulaire "ardoise" est
   désormais la référence canonique (celle documentée dans CLAUDE.md), et
   le vocabulaire "lime" est gardé comme ALIAS pointant vers les mêmes
   valeurs — pour ne pas avoir à réécrire tous les var(--lime) déjà en
   place dans les pages existantes. Toute nouvelle page doit utiliser le
   vocabulaire canonique, jamais les alias.

   Une page peut toujours surcharger un token dans son propre <style> après
   ce <link> si son contexte l'exige réellement (ex. --card-border plus
   opaque sur les boutons de réponse d'un quiz) — la centralisation porte
   sur les valeurs qui doivent être identiques partout, pas sur l'interdiction
   de nuancer un composant qui a un besoin réel et documenté. */

:root {
  /* ---------- Surfaces (ardoise) ---------- */
  --ardoise: #091a09;
  --ardoise-2: #0c2010;
  --ardoise-3: #132813;
  --ardoise-teinte: #0a1f0a;   /* fonds de gradient/accent radial */
  --ardoise-teinte-2: #0d2410;

  /* ---------- Craie (contenu pédagogique) ---------- */
  --craie: #E8F5E8;
  --craie-pale: rgba(232, 245, 232, 0.4);        /* texte secondaire (leçons, jeu, parcours) */
  --craie-pale-vive: rgba(232, 245, 232, 0.6);   /* texte secondaire moins atténué (pages marketing) */
  --craie-pale-2: rgba(232, 245, 232, 0.35);     /* texte tertiaire / légendes (pages marketing) */
  --gris-verrou: rgba(232, 245, 232, 0.68);      /* titres de case verrouillée */

  /* ---------- Accent chalk-gold (UI/structure/données) ---------- */
  --craie-doree: #D9A857;
  --craie-doree-dim: rgba(217, 168, 87, 0.12);
  --craie-doree-border: rgba(217, 168, 87, 0.25);

  /* ---------- Second accent (streak/gamification) ---------- */
  --rouge-craie: #FF8200;

  /* ---------- Sémantique — réservée, jamais utilisée comme accent générique ---------- */
  --correct: #22c55e; --correct-dim: rgba(34, 197, 94, 0.12); --correct-border: rgba(34, 197, 94, 0.3);
  --wrong: #ef4444; --wrong-dim: rgba(239, 68, 68, 0.12); --wrong-border: rgba(239, 68, 68, 0.3);
  --bleu-info: #60a5fa; --bleu-info-dim: rgba(96, 165, 250, 0.1); --bleu-info-border: rgba(96, 165, 250, 0.25);
  --orange-alerte: #fb923c; --orange-alerte-dim: rgba(251, 146, 60, 0.08); --orange-alerte-border: rgba(251, 146, 60, 0.2);

  /* ---------- Cartes / bordures neutres ---------- */
  --card-bg: rgba(255, 255, 255, 0.06);
  --card-border: rgba(255, 255, 255, 0.14);

  /* ---------- Typo ---------- */
  --font-head: 'Syne', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-arabic: 'Cairo', sans-serif;

  /* Échelle typo — mobile-first, alignée sur les tailles déjà en usage */
  --text-xs: 11px;    /* tags, micro-labels */
  --text-sm: 12.5px;  /* texte secondaire, légendes */
  --text-base: 14px;  /* corps de texte par défaut */
  --text-md: 15px;    /* nav, texte mis en avant */
  --text-lg: 16px;    /* boutons, sous-titres */
  --text-xl: 19px;    /* titres de carte */
  --text-2xl: 22px;   /* titres de section */
  --text-3xl: 26px;   /* scores, gros nombres */
  --text-4xl: 34px;   /* titre de page (mobile) */
  --text-5xl: clamp(32px, 8vw, 64px); /* hero de landing */

  /* ---------- Échelle d'espacement — grille de 4px ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;

  /* ---------- Rayons / transition ---------- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --radius: var(--radius-md); /* alias historique (index.html, quiz.html...) */
  --transition: 0.2s ease;

  /* ---------- Alias — vocabulaire "lime" historique (index.html, quiz.html,
     filieres.html, filiere.html, examens.html...). Ne pas utiliser dans du
     code neuf : préférer directement les tokens canoniques ci-dessus. ---------- */
  --black: var(--ardoise);
  --black-2: var(--ardoise-2);
  --black-3: var(--ardoise-3);
  --green-dark: var(--ardoise-teinte);
  --green-mid: var(--ardoise-teinte-2);
  --lime: var(--craie-doree);
  --lime-dim: var(--craie-doree-dim);
  --lime-border: var(--craie-doree-border);
  --cream: var(--craie);
  --cream-2: var(--craie-pale-vive);
  --cream-3: var(--craie-pale-2);
  --blue: var(--bleu-info);
  --blue-dim: var(--bleu-info-dim);
  --blue-border: var(--bleu-info-border);
  --orange: var(--orange-alerte);
  --orange-dim: var(--orange-alerte-dim);
  --orange-border: var(--orange-alerte-border);
}

/* Principe commun aux trois utilitaires ci-dessous : agrandir la zone
   CLIQUABLE/TOUCHABLE sans agrandir l'élément VISIBLE d'un seul pixel —
   par pseudo-élément transparent (boutons, cases à cocher) ou par un
   agrandissement de la boîte de l'input compensé par une marge négative
   (curseurs), jamais en changeant la taille ou l'apparence réelle de
   l'élément visible. */

/* ---------- Boutons, cases à cocher isolées ---------- */
/* Zone de frappe ≥44px, centrée sur l'élément visible. Par défaut 44px ;
   si un voisin est trop proche pour que 44px tienne sans le chevaucher,
   réduire explicitement via --vgl-tap-h (ex. style="--vgl-tap-h:26px"),
   calculé à partir de l'écart RÉEL mesuré avec ce voisin (voir les
   commentaires dans chaque widget concerné) plutôt que deviné. */
.vgl-tap-target { position: relative; }
.vgl-tap-target::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max(100%, 44px);
  height: var(--vgl-tap-h, max(100%, 44px));
}

/* ---------- Lignes empilées serrées (ex. cases à cocher à 8px d'écart) ---------- */
/* Zone de frappe pleine largeur (≥44px), mais hauteur limitée à
   « hauteur de la ligne + l'écart disponible avec les voisines » pour ne
   JAMAIS chevaucher la zone de frappe d'une ligne adjacente. Quand
   l'écart entre lignes est inférieur à ce qu'il faudrait pour atteindre
   44px de hauteur, la zone reste volontairement sous 44px : mieux vaut
   une zone honnête et non chevauchante qu'une fausse conformité qui
   chevauche la ligne voisine. Définir --vgl-tap-gap sur l'élément
   (= le gap CSS entre les lignes) pour que l'agrandissement s'arrête
   pile au milieu de l'écart.  */
.vgl-tap-target-row { position: relative; }
.vgl-tap-target-row::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max(100%, 44px);
  height: calc(100% + var(--vgl-tap-gap, 0px));
}

/* ---------- Curseurs (input[type=range]) ---------- */
/* Les curseurs du site ont tous une piste visuelle de 4px de haut. On ne
   peut pas leur ajouter un ::before (un ::before sur un input ne capte
   pas le geste de glissement natif du curseur) : on agrandit donc la
   boîte de l'input lui-même pour le hit-testing tactile, et une marge
   négative compense exactement ce surplus pour que la mise en page (la
   place occupée parmi les éléments voisins) ne bouge pas d'un pixel.
   Sélecteur avec type d'élément (spécificité plus élevée qu'une simple
   classe) pour gagner face au height:4px propre à chaque widget, quel
   que soit l'ordre d'injection des styles.

   DEUX PIÈGES trouvés empiriquement (vérifiés par capture d'écran +
   comparaison pixel avant/après, pas seulement en théorie) :
   1. Les curseurs du site ne stylent PAS ::-webkit-slider-runnable-track
      — ils peignent leur couleur de piste directement en `background`
      sur l'INPUT lui-même (ça suffit tant que l'input fait 4px de haut).
      Agrandir la boîte de l'input peint donc ce fond sur toute la
      nouvelle hauteur (un pavé plein, pas une fine piste). Correction :
      neutraliser ce fond sur l'input agrandi et le reporter sur
      ::-webkit-slider-runnable-track / ::-moz-range-track (fixées à 4px).
   2. Une fois (1) corrigé, le curseur (::-webkit-slider-thumb) reste
      décalé vers le bas d'une valeur CONSTANTE (~7-8px, indépendante de
      la hauteur de l'input une fois celle-ci dépasse ~20px) : Chrome ne
      centre pas le curseur sur la piste réellement affichée quand la
      boîte de l'input est nettement plus haute que la piste. Un
      margin-top de -8px sur le curseur (= moitié de la différence entre
      la hauteur historique de l'input, 4px, et la hauteur du curseur,
      20px — la formule margin-top classique pour les inputs range
      stylés, qui n'était simplement jamais nécessaire tant que l'input
      faisait déjà 4px) neutralise ce décalage pour toutes les hauteurs
      utilisées ici.

   --vgl-tap-h contrôle la hauteur de la zone tactile : 44px par défaut,
   mais à RÉDUIRE explicitement (ex. style="--vgl-tap-h:26px") quand un
   contrôle voisin (case à cocher, bouton) est trop proche pour que 44px
   tienne sans le chevaucher — mesurer l'écart réel disponible plutôt que
   de deviner. Une zone plus petite mais non chevauchante vaut mieux
   qu'une fausse conformité à 44px qui empiète sur le contrôle voisin. */
input.vgl-slider-tap {
  height: var(--vgl-tap-h, 44px);
  margin-block: calc((4px - var(--vgl-tap-h, 44px)) / 2);
  background: transparent;
}
input.vgl-slider-tap::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: var(--vgl-tap-track-bg, var(--card-border, rgba(255, 255, 255, 0.18)));
}
input.vgl-slider-tap::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: var(--vgl-tap-track-bg, var(--card-border, rgba(255, 255, 255, 0.18)));
}
input.vgl-slider-tap::-webkit-slider-thumb {
  margin-top: -8px;
}