/* sf-typography.css — LES POLICES DU JEU POUR ENFANTS (26/08, sur demande du fondateur : « on
 * change les polices »).
 *
 * CE QUI ÉTAIT EN PLACE, et pourquoi ça ne pouvait pas convenir :
 *   · `--display` valait **Cinzel** — une capitale romaine, gravée, façon péplum. C'est elle qui
 *     écrivait « MON HÉROS », « CARTE », « DUEL GAGNÉ ! » en petites capitales sérifées. Elle vient
 *     de l'identité dark fantasy d'avant le pivot éducatif, et elle a deux défauts pour un CE1 : le
 *     français accentué EN CAPITALES se lit mal (les accents s'écrasent sur la hauteur des
 *     majuscules), et une romaine gravée n'a rien à voir avec le chibi manga de la charte ;
 *   · `--body` valait Inter — irréprochable, mais neutre et adulte ;
 *   · trois surfaces enfant (Académie, exercices, film d'ouverture, Artefacts) ne suivaient AUCUNE
 *     variable : elles écrivaient `system-ui`, donc la police changeait d'un téléphone à l'autre ;
 *   · la phrase finale du film était en Georgia serif.
 *
 * CE QUI EST EN PLACE MAINTENANT :
 *   · **Baloo 2** pour les titres, les boutons et les noms (`--display`) : une sans arrondie,
 *     charnue, dessinée pour les gros titres — le pendant typographique du chibi. Elle a des
 *     minuscules, donc plus besoin d'écrire en capitales ;
 *   · **Nunito** pour tout ce qui se lit (`--body`) : arrondie elle aussi, très ouverte, avec une
 *     grande hauteur d'x — ce qui compte quand on apprend à lire. Ses métriques sont proches
 *     d'Inter, ce qui évite de casser les mises en page mesurées (budget vertical des exercices,
 *     boutons au-dessus de la barre) ;
 *   · les deux sont EMBARQUÉES (woff2, latin + latin-ext) : le jeu tourne hors ligne dans une
 *     WebView, aucune police ne peut venir du réseau.
 *
 * ⚠️ POURQUOI UN FICHIER SÉPARÉ, chargé APRÈS `sf-styles.css` : les variables `--display` / `--body`
 * y sont déclarées sur `:root` (L177), et `sf-styles.css` est FIGÉ par un golden d'extraction
 * (`tools/test/lot1-extraction-golden.cjs` : empreinte sha256 + séquence des sélecteurs). On
 * superpose donc au lieu d'éditer. Les deux `:root` ont le MÊME poids — c'est l'ORDRE qui tranche,
 * et c'est exactement le piège payé deux fois (PASSE E, puis PASSE H) : ce fichier doit rester le
 * DERNIER <link> du <head>. Si les polices « ne prennent pas », vérifier l'ordre avant tout le reste.
 */

/* ---- Baloo 2 (titres) — fichier variable, la graisse se demande de 400 à 800 ------------------ */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/Baloo2-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/Baloo2-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Nunito (lecture) ------------------------------------------------------------------------- */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/Nunito-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/Nunito-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Les deux variables du projet ------------------------------------------------------------- */
:root {
  --display: 'Baloo 2', 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --body: 'Nunito', system-ui, -apple-system, 'Roboto', 'Segoe UI', sans-serif;
  /* Les nombres gardent leur famille tabulaire (écrans adultes uniquement : le mode enfant n'affiche
     aucun chiffre de jugement). */
}

/* ---- Baloo 2 a des minuscules : plus une seule capitale forcée dans l'écran enfant -------------
   Les petites capitales sérifées venaient de Cinzel, qui n'existe qu'en majuscules. Avec une police
   qui a une casse basse, `text-transform:uppercase` ne sert plus à rien — et il nuit : « ÉTAPE 2 SUR
   10 » se lit moins bien que « Étape 2 sur 10 », surtout à sept ans. La graisse et la taille portent
   la hiérarchie, comme partout ailleurs dans le jeu. */
.education-shell .nav button,
.education-shell .world-title .wn,
.education-shell .map-continue b,
.education-shell #cv2 .cv2-turn,
#cv2.cv2-child .cv2-turn,
.sfintro,
.sfintro-phrase {
  text-transform: none;
  letter-spacing: normal;
}

/* ---- Les surfaces qui n'écoutaient aucune variable --------------------------------------------
   Elles étaient en `system-ui` (donc en Roboto sur son téléphone, en autre chose ailleurs) ou en
   Georgia. Elles passent sous la même famille que le reste : c'est la moitié du sentiment de
   « polices moches » — trois polices différentes dans le même écran. */
.sfedu,
.sfedu.sfedu-exercise-active,
.sfintro,
.equipment-child {
  font-family: var(--body);
}
.sfedu h1, .sfedu h2, .sfedu h3,
.sfedu-main-choice,
.sfedu-next-answer,
.sfintro-phrase,
.equipment-child h2,
.campaign-stop .cs-name {
  font-family: var(--display);
}
/* Le numéro de plan du film : il n'a plus lieu d'apparaître (les cinq illustrations existent), mais
   la règle reste — un repli doit rester présentable. */
.sfintro-numero { font-family: var(--display); }

/* ---- Le combat : les bandeaux et les propositions du duel ------------------------------------
   `#cv2` est en `font-family:inherit` et hérite donc du corps de page ; les titres du duel prennent
   la display. Aplats et graisses inchangés (PASSE H). */
#cv2.cv2-child .cv2-ask-q,
#cv2.cv2-child .cv2-ask-next,
#cv2.cv2-child .cv2-ask-verdict b,
#cv2.cv2-child .cv2-float.narration,
#cv2.cv2-child .cv2-callout,
#cv2.cv2-child .cv2-result h2 {
  font-family: var(--display);
}

/* ---- Les boutons n'héritent PAS de la police, en HTML ----------------------------------------
   Un <button> utilise la police du navigateur (Arial sur Android) si personne ne lui en donne : le
   relevé a trouvé trois boutons enfant en Arial (« Va en gagner un ! », la fiche de la Soul, le
   choix de classe) alors que TOUTES les règles autour supposaient l'inverse. On n'hérite que la
   FAMILLE : hériter la taille avec le raccourci `font:inherit` ferait grossir d'un coup tous les
   boutons qui comptent sur la taille par défaut du navigateur. */
button, input, select, textarea, optgroup { font-family: inherit; }
/* Les actions de l'Académie sont des titres d'action : elles prennent la display (leur raccourci
   `font:800 16px/1.2 system-ui` gagnait sinon sur toute règle de famille). */
.sfedu-btn { font-family: var(--display); }

/* ==================================================================================================
   PASSE J — PLUS UN BANDEAU SOUS LA BARRE DU BAS
   Capture du fondateur : « il y a un souci avec le placement des bandeaux, ils se recouvrent les uns
   les autres » — le geste « ▶ Continuer » du chapitre était coupé en deux par la barre de navigation.
   La marge basse des écrans était écrite en dur (108 px) alors que la barre, sur son téléphone,
   ajoute la safe-area ET la barre système d'Android. `--sfedu-nav` est désormais MESURÉE au
   démarrage (sf-education-v1-ui.js) : toutes les marges basses en découlent.
   ================================================================================================== */
.education-shell .screen { padding-bottom: calc(var(--sfedu-nav, 108px) + 22px); }
/* Le geste du chapitre reste collé au-dessus de la barre : sur un grand écran le plateau pousse le
   bouton hors de vue, et le seul geste de l'écran ne doit jamais demander de faire défiler. */
/* Le conteneur de carte se termine au-dessus de la navigation (sf-art-direction.css).
   `bottom:0` colle donc le geste dans cette zone utile, sans compter la barre deux fois. */
.education-shell .map-continue-host { position: sticky; bottom: 0; z-index: 6; }
.education-shell .map-continue { box-shadow: 0 10px 26px rgba(0, 0, 0, .55); }
/* Le sous-titre du geste suivait encore Inter en dur : une seule famille par écran. */
.map-continue small { font-family: var(--body); }

/* Le plateau ne pousse plus le geste hors de l'écran. Il gardait `aspect-ratio:3/4` avec un plafond
   à 80vh : sur un téléphone haut, cela suffit à faire déborder l'écran, donc à faire glisser le
   bouton sous la barre — et, une fois le bouton collé, à le faire flotter PAR-DESSUS le plateau.
   On borne donc le plateau à la place réellement disponible : titre + retour au grand plateau +
   plateau + geste tiennent alors dans un écran, sans défilement et sans recouvrement.
   `dvh` (et non `vh`) parce que la barre d'URL d'un navigateur mobile change la hauteur utile. */
.education-shell .map-stage { max-height: calc(100dvh - var(--sfedu-nav, 108px) - 292px); }

/* ---- Les étiquettes du grand plateau restent en police de lecture ----------------------------
   Baloo 2 est ronde et large : sur les pastilles de région (« pz-copy », 64 à 80 px de large), le
   même texte prend une ligne de plus, et la preuve `run-responsive.sh` l'a vu tout de suite — le
   paysage visible de la worldmap est tombé de 88,6 % à 79,8 % à 320 px, sous le minimum de 80 %.
   Ce sont des ÉTIQUETTES, pas des titres : elles prennent la police de lecture, plus étroite. */
.pz-copy b, .pz-copy small, .ps-copy b, .ps-copy small { font-family: var(--body); }

/* ---- L'ÉCRAN D'EXERCICE GARDE UNE SEULE FAMILLE ----------------------------------------------
   Règle antérieure du projet, portée par `.sfedu-exercise-active *{font-family:inherit}` et gardée
   par `run-responsive.sh` (« plusieurs familles de contenu » = échec) : pendant un exercice, l'énoncé
   et les propositions se lisent dans la MÊME police, sinon la hiérarchie se joue sur la forme des
   lettres au lieu de la taille. Mon `.sfedu-btn{font-family:var(--display)}` la cassait — même poids,
   déclaré plus tard. On la rétablit ici, plus spécifique, sur la seule surface concernée : les
   propositions redeviennent de la lecture, la police de titre reste pour l'accueil de l'Académie. */
.sfedu.sfedu-exercise-active,
.sfedu.sfedu-exercise-active .sfedu-btn,
.sfedu.sfedu-exercise-active .sfedu-question,
.sfedu.sfedu-exercise-active * { font-family: var(--body); }

/* ---- Baloo 2 a un corps plus haut : on serre l'interligne des titres ------------------------
   Une police ronde et charnue occupe plus de hauteur à taille égale. Mesuré : le bouton d'entrée de
   l'Académie est passé 23 px SOUS la barre à 360×800 (`run-responsive.sh`) — le budget vertical de
   cet écran était calculé au pixel avec l'ancienne police. On resserre l'interligne des titres, ce
   qui rend la place sans rien rapetisser. */
.education-shell h1, .education-shell h2, .education-shell h3,
.sfedu-carousel-title, .sfedu-hero-title, .map-continue b, .world-title .wn {
  line-height: 1.14;
}