/* Pourquoi il y a des saisons ? — Petit labo d'astronomie.
   Thème sombre « espace » de la série, rond et joueur (public : 5 ans).
   Zéro dépendance. Compat mobiles anciens : pas d'inset, repli @supports
   pour aspect-ratio. Seuil mobile UNIQUE de l'épisode : 880 px (la grille,
   le médaillon et la boîte repliée lisent le même chiffre). */

/* la rondeur des titres de la famille : Baloo 2 auto-hébergée (charte du
   portail — assets/fonts/, licence OFL) ; le corps du texte reste en pile
   système, choix assumé de la charte */
@font-face {
  font-family: "Baloo 2";
  src: url("../assets/fonts/baloo2-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --titres: "Baloo 2", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --corps: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bg: #0b1020;
  --bg2: #0e1530;
  --surface: #121a33;
  --surface-2: #1c2540;
  --border: #26304f;
  --text: #e9edf8;
  --muted: #9aa5c3;
  --sun: #ffcf5c;
  --sun-deep: #ff9f1c;
  --rose: #ff6b9d;
  --teal: #46c2a5;
  --violet: #a98bff;
  --radius: 14px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* le site se manipule, il ne se sélectionne pas : un double-tap d'enfant ne
   doit ni surligner un mot ni « attraper » un canvas, et l'appui long ne doit
   pas ouvrir le menu copier/coller d'iOS. */
body {
  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
input {
  -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;
}

/* pan-x pan-y : le doigt fait défiler la page, mais ni le pincement ni le
   double-tap ne zooment la page elle-même (Safari iOS ignore user-scalable=no ;
   main.js ajoute le filet gesturestart). Les canvas des vues gardent leurs
   règles touch-action: none, plus spécifiques, qui gagnent. */
* { touch-action: pan-x pan-y; }

body {
  margin: 0;
  background-color: var(--bg);
  background-image:
    radial-gradient(1100px 700px at 72% -8%, #182450 0%, rgba(11, 16, 32, 0) 60%),
    radial-gradient(900px 600px at 8% 108%, rgba(169, 139, 255, 0.10) 0%, rgba(11, 16, 32, 0) 55%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--corps);
  line-height: 1.55;
}

/* ---------- entête ---------- */

.entete { max-width: 900px; margin: 0 auto; padding: 38px 20px 22px; text-align: center; }
.kicker {
  margin: 0; color: var(--sun); font-size: .8rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  display: flex; align-items: center; justify-content: center; gap: 9px;
}
.kicker-fiole { width: 24px; height: 24px; flex: none; }
.entete h1 { margin: .22em 0 .3em; font-size: clamp(2.1rem, 5.5vw, 3.1rem); line-height: 1.1; }
.tagline { margin: 0 auto; max-width: 62ch; color: var(--muted); }
.tagline strong { color: var(--sun); }

main { max-width: 1180px; margin: 0 auto; padding: 0 20px 60px; }

/* LE BLOC DE LA SCÈNE TIENT DANS L'ÉCRAN D'UN PORTABLE AUSSI (règle de la
   famille, née sur la-lune-change-de-forme : sur un 13", la page
   dimensionnée par la largeur seule montrait les vues et rien d'autre — la
   même vue qu'un téléphone). La largeur se plafonne par la HAUTEUR visible :
   en-tête + scène doivent tenir en 100vh. Constantes MESURÉES sur cet
   épisode (script Playwright, 960 et 1140 px utiles, +4 px de garde) : la
   scène fait 301 px de fixe + 0.433 × la largeur utile ; --entete-px est le
   bas de l'en-tête (= haut de la scène, main n'a pas de marge haute). Les
   40 px sont le padding latéral de main (sa max-width les comprend).
   Plancher 880 px utiles : la vue qu'on manipule ne se sacrifie pas.
   Sans clamp() (vieux navigateurs), la ligne est ignorée : 1180 comme
   avant. Rien sous 880 px : le mobile a son propre budget. */
@media (min-width: 880px) {
  :root { --entete-px: 239px; }
  main, .pied-serie, .site-footer {
    max-width: clamp(920px, calc((100vh - 301px - var(--entete-px)) / 0.433 + 40px), 1180px);
  }
}

/* L'EN-TÊTE SE SERRE SUR LES ÉCRANS LARGES MAIS BAS (le portable — règle de
   la famille, née sur la-lune-change-de-forme) : 239 px avant la première
   image, c'est un tiers d'un 13" pour un kicker, un titre et trois lignes
   d'accroche. Rien n'est retiré (le H1 reste le H1, l'accroche reste lue),
   tout se resserre : titre à 2,4 rem, accroche à 0,95 rem sur deux lignes
   (toute la largeur de l'en-tête), respirations réduites. Mesuré :
   239 → 151 px, et --entete-px suit pour le plafond de largeur (le bloc ci-dessus doit rester AVANT celui-ci : même sélecteur :root, le dernier gagne).
   Une règle sur la HAUTEUR : un 24" ou un téléphone gardent l'en-tête de
   la charte. */
@media (min-width: 880px) and (max-height: 849px) {
  :root { --entete-px: 151px; }
  .entete { padding: 8px 20px 14px; }
  .entete h1 { font-size: 2.4rem; margin: .18em 0 .22em; }
  .tagline { font-size: .95rem; max-width: none; }
}

.panneau {
  background: linear-gradient(180deg, var(--surface), var(--bg2));
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.hint { color: var(--muted); font-weight: 400; font-size: .78em; }

/* la voix des titres : Baloo 2 sur tout ce qui titre la page — jamais sur le
   corps du texte ni sur les boutons (leur font: inherit doit rester la pile
   système, taille partagée par toute la famille) */
.entete h1, .kicker, .titre-scene, .entete-vue, .titre-scenarios > span,
.entete-explication h2, .resume-explication h2, .entete-jeu h2, .defi-jeu,
.parents summary { font-family: var(--titres); }
/* la ligne de titre d'une vue (.entete-vue) porte aussi le ⏸/▶ et l'aide
   « la maison : chez nous… » : ni un titre ni l'autre — bouton et aide
   reviennent à la pile système (le font: inherit du bouton attraperait
   Baloo 2, l'aide est du texte explicatif) */
.entete-vue button, .entete-vue .hint { font-family: var(--corps); }

/* ---------- la scène : les deux vues synchronisées ---------- */

.panneau-scene { padding: 12px; }
.entete-scene {
  display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap;
  font-size: .92rem; color: var(--muted); margin: 2px 4px 6px;
}
.titre-scene { flex: 1 1 auto; font-weight: 700; }
.bouton-lecture { padding: 5px 12px; font-size: .8rem; border-radius: 999px; }
/* le ⏸/▶ est écrit dans la ligne « Depuis l'espace » (là où on regarde
   tourner la Terre — c'est sa place sur téléphone) ; sur grand écran il
   remonte en haut à droite du panneau, dans la rangée du titre : un seul
   bouton, deux places */
.panneau-scene { position: relative; }
@media (min-width: 880px) {
  .bouton-lecture { position: absolute; top: 10px; right: 12px; }
  /* l'aide de la ligne « Depuis l'espace » ne passe JAMAIS sur deux lignes
     sur grand écran : les deux en-têtes gardent la même hauteur, donc les
     deux images le même haut (au plancher, la colonne de l'espace fait
     446 px ; l'aide raccourcie en tient 433, filet ellipse au cas où) */
  .entete-vue .hint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
}

/* boutons à deux libellés (⏸/▶ et 🔇/🔊) : superposés dans une grille 1×1,
   le bouton garde en permanence la largeur du plus long — basculer ne décale
   jamais la ligne de titre */
.bouton-voix, .bouton-lecture {
  display: inline-grid; align-items: center; justify-items: center;
  /* écrits dans des lignes de titre en gras (800 / 700) : ces boutons
     d'état reviennent à la graisse normale, comme leur jumeau du jeu */
  font-weight: 400;
}
.bouton-voix > span, .bouton-lecture > span { grid-row: 1; grid-column: 1; white-space: nowrap; }
.bouton-voix[aria-pressed="false"] .voix-on,
.bouton-voix[aria-pressed="true"] .voix-off,
.bouton-lecture[aria-pressed="true"] .lecture-off,
.bouton-lecture[aria-pressed="false"] .lecture-on { visibility: hidden; }

/* la surbrillance verte de la famille : l'état actif se voit */
.bouton-lecture[aria-pressed="true"], .bouton-voix[aria-pressed="true"] {
  border-color: var(--teal); box-shadow: 0 0 0 2px rgba(70, 194, 165, 0.35);
}

.grille-vues {
  display: grid;
  /* 8fr / 9fr = le rapport des ratios des deux cadres (8/7 et 9/7), comme
     les deux vues du jeu : les deux images ont la MÊME hauteur, bas et
     phrases alignés (retour utilisateur : avec 1fr / 1,25fr, le jardin
     finissait 36 px plus haut que l'espace). Coût mesuré au plancher :
     l'espace passe de 468 × 364 à 446 × 347 px (−4,7 %). */
  grid-template-columns: minmax(0, 8fr) minmax(0, 9fr);
  gap: 12px;
  align-items: start;
}

.bloc-vue { min-width: 0; }
.entete-vue {
  font-weight: 800; font-size: 1.02rem; margin: 0 2px 7px;
  display: flex; align-items: center; gap: 6px;
}
.entete-vue-fenetre { color: var(--teal); }
.entete-vue-espace { color: var(--violet); }

.cadre-canvas { position: relative; border-radius: 12px; overflow: hidden; background: #070b17; border: 1px solid var(--border); }
.ratio-fenetre { aspect-ratio: 8 / 7; }
.ratio-espace { aspect-ratio: 9 / 7; }
/* repli pour navigateurs sans aspect-ratio (Safari iOS < 15) : hauteurs fixes */
@supports not (aspect-ratio: 1 / 1) {
  .ratio-fenetre { height: min(38vw, 460px); }
  .ratio-espace { height: min(42vw, 480px); }
}
.cadre-canvas canvas { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; display: block; }

/* le geste posé sur une vue appartient TOUJOURS au glisser de la Terre — un
   doigt un peu de travers ne part jamais en défilement de page */
.cadre-canvas, .vues-jeu { touch-action: none; }
/* la fenêtre ne se manipule pas : le doigt posé dessus fait défiler la
   page (retour utilisateur : on tirait la barre du jour, rien ne bougeait,
   pas même la page — « c'est cassé ») */
.cadre-canvas.ratio-fenetre { touch-action: pan-x pan-y; }
#canvas-orbite, #canvas-orbite-jeu { touch-action: none; cursor: grab; }
#canvas-orbite.attrape, #canvas-orbite-jeu.attrape { cursor: grabbing; }

/* la petite phrase sous chaque vue : le même jour, raconté deux fois.
   La place du PIRE cas est réservée — les phrases changent de longueur au
   fil de l'année, rien ne doit sauter en plein glisser : deux lignes pour
   l'espace, QUATRE pour la fenêtre (titre + commentaire ; mesurées au
   script sur l'année entière, au plancher de 880 px utiles la colonne du
   jardin fait 374 px et 55 jours par an — jour 68, la bande de transition
   en tête — tiennent sur quatre lignes : 87,3 px = 5,93 em, la réserve de
   trois lignes laissait la frise sauter de 8 px, retour utilisateur). */
.phrase-vue {
  margin: 8px 2px 0; font-size: .92rem; color: var(--text);
  line-height: 1.45;
  min-height: 2.9em;
}
#phrase-moment { min-height: 6em; }
/* le titre (mois + saison) en blanc gras, le commentaire en clair : deux
   lignes qui se distinguent d'un coup d'œil (retour test : tout en un bloc
   doré, ça se lisait mal) */
#phrase-moment .phrase-titre { display: block; font-weight: 800; color: var(--text); }
#phrase-moment .phrase-texte { display: block; font-weight: 400; color: var(--text); margin-top: 2px; }
/* le mot de la saison prend la teinte de SON bouton : la phrase et les
   boutons parlent la même couleur */
.phrase-saison-rose { color: #ffb3cd; }
.phrase-saison-or { color: var(--sun); }
.phrase-saison-violet { color: #cabcff; }
.phrase-saison-bleu { color: #bcd9ff; }

/* la bulle « attrape-moi », SOUS la vue de l'espace (transitoire) : rien ne
   recouvre jamais les canvas — elle s'efface ET se replie ensemble */
.bulle-geste {
  margin: 8px 0 0; text-align: center; overflow: hidden;
  pointer-events: none; opacity: 1; max-height: 90px;
  font-size: .85rem;
  transition: opacity .3s, max-height .35s ease .05s, margin .35s ease .05s;
}
.bulle-geste-pilule {
  display: inline-block; max-width: 100%;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 6px 14px; color: var(--rose); font-weight: 600;
}
.bulle-geste.cachee { opacity: 0; max-height: 0; margin-top: 0; }

/* ---------- le grand curseur de l'année ---------- */

.commande-annee { margin-top: 12px; padding: 0 4px 2px; }

/* chaque repère est calé sur SON jour de l'année (jour / 365 en %) —
   avant, space-between les répartissait en 0/25/50/75/100 %, à côté des
   vraies dates des solstices et équinoxes */
.piste-emojis {
  position: relative;
  height: 1.5em;
  font-size: 1.25rem;
  padding: 0 2px;
}
.piste-emojis span { position: absolute; top: 0; transform: translateX(-50%); }
.repere-janvier { left: 0; transform: none; }        /* le 1er janvier, plein hiver */
.repere-printemps { left: 21.85%; }                  /* équinoxe, jour ~80  */
.repere-ete { left: 46.85%; }                        /* solstice, jour 171  */
.repere-automne { left: 72%; }                       /* équinoxe, jour ~263 */
.repere-hiver { left: 96.85%; }                      /* solstice, jour ~354 */

#curseur-jours {
  -webkit-appearance: none;
  appearance: none;
  display: block; width: 100%; height: 44px; margin: 0;
  background: transparent; cursor: pointer;
}
/* la piste raconte l'année : hiver bleu nuit, printemps vert tendre, été
   doré, automne roux, retour à l'hiver */
#curseur-jours::-webkit-slider-runnable-track {
  height: 16px; border-radius: 9px; border: 1px solid var(--border);
  background: linear-gradient(90deg, #33507e, #33507e 14%, #4f9c68 30%, var(--sun) 47%, #e0a24f 66%, #b06a3a 80%, #33507e 96%, #33507e);
}
#curseur-jours::-moz-range-track {
  height: 16px; border-radius: 9px; border: 1px solid var(--border);
  background: linear-gradient(90deg, #33507e, #33507e 14%, #4f9c68 30%, var(--sun) 47%, #e0a24f 66%, #b06a3a 80%, #33507e 96%, #33507e);
}
#curseur-jours::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 34px; height: 34px; margin-top: -10px; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #d6f2ff, #5aa7ff 55%, #2f6fb5);
  border: 3px solid rgba(255, 255, 255, .9);
  box-shadow: 0 0 16px rgba(90, 167, 255, .6), 0 2px 6px rgba(0, 0, 0, .5);
}
#curseur-jours::-moz-range-thumb {
  width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #d6f2ff, #5aa7ff 55%, #2f6fb5);
  border: 3px solid rgba(255, 255, 255, .9);
  box-shadow: 0 0 16px rgba(90, 167, 255, .6), 0 2px 6px rgba(0, 0, 0, .5);
}
/* les initiales des mois, sous la frise (janvier à gauche, décembre à droite) */
.piste-mois { display: flex; margin: 2px 4px 0; }
.piste-mois span { flex: 1; text-align: center; font-size: .72rem; font-weight: 700; color: var(--muted); }

.legende-curseur { margin: 4px 0 0; color: var(--muted); font-size: .82rem; text-align: center; }

/* ---------- boutons-scénarios + histoire ---------- */

.panneau-scenarios { margin-top: 16px; padding: 14px 16px 16px; }
.titre-scenarios {
  font-weight: 700; font-size: 1.05rem; margin: 2px 2px 10px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px 12px; flex-wrap: wrap;
}
.bouton-voix { padding: 5px 12px; font-size: .8rem; border-radius: 999px; margin-left: auto; }
/* grid-auto-rows: 1fr → en 2 × 2 (mobile), les deux rangées partagent la
   même hauteur : les quatre boutons restent identiques, quel que soit le
   nombre de lignes de leurs libellés */
.boutons-scenarios { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 10px; }

.scn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 72px; padding: 10px 8px; border-radius: 16px; cursor: pointer;
  font: inherit; font-weight: 700; font-size: .95rem; text-align: center; line-height: 1.25;
  color: var(--text); background: var(--surface-2); border: 1px solid var(--border);
  transition: filter .15s, transform .05s, box-shadow .15s;
}
.scn:hover { filter: brightness(1.2); }
.scn:active { transform: translateY(1px); }
.scn.actif { box-shadow: 0 0 0 3px rgba(255, 207, 92, .55); }
.scn-emoji { font-size: 1.6rem; line-height: 1; }
.scn-sub { font-weight: 400; font-size: .76rem; opacity: .8; }
/* les 4 dégradés communs de la famille, attribués au sens du moment :
   printemps rose, été or, automne violet, hiver bleu */
.scn-rose { background: linear-gradient(180deg, #4a1d33, #2d1122); border-color: var(--rose); color: #ffb3cd; }
.scn-bleu { background: linear-gradient(180deg, #1c3a63, #132644); border-color: #3f6db3; color: #bcd9ff; }
.scn-or { background: linear-gradient(180deg, #4a3a0d, #332807); border-color: var(--sun-deep); color: var(--sun); }
.scn-violet { background: linear-gradient(180deg, #2b1e52, #1c1433); border-color: #5f43b3; color: #cabcff; }

.histoire-scn { margin-top: 12px; }
.invite-scn { margin: 4px 2px; color: var(--muted); }
.ligne-histoire { display: flex; gap: 10px; align-items: flex-start; margin: 9px 0; font-size: 1.03rem; }
.puce-histoire {
  flex: none; padding: 3px 11px; border-radius: 999px; font-weight: 700; font-size: .85rem;
  white-space: nowrap;
  /* largeur commune aux deux pastilles (la plus longue : « vu de l'espace »),
     pour que les deux textes commencent sur la même colonne */
  min-width: 11.6em; text-align: center; box-sizing: border-box;
}
.puce-histoire-fenetre { background: rgba(70, 194, 165, .14); color: var(--teal); border: 1px solid rgba(70, 194, 165, .5); }
.puce-histoire-espace { background: rgba(169, 139, 255, .14); color: var(--violet); border: 1px solid rgba(169, 139, 255, .5); }
.texte-histoire { margin: 2px 0 0; }

/* ---------- la boîte d'explication (à lire… ou à écouter) ---------- */

.panneau-explication { margin-top: 16px; padding: 16px 20px 18px; }
.entete-explication { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 8px; }
.entete-explication h2 { margin: 0; font-size: 1.15rem; color: var(--sun); }
/* le résumé repliable ne sert que sur mobile : sur ordinateur il est masqué
   et main.js garde la boîte ouverte (le titre reste celui de l'entête) */
.resume-explication { display: none; }
.bouton-ecouter {
  margin-left: auto; border-radius: 999px; padding: 8px 16px; font-weight: 700;
  background: linear-gradient(180deg, #4a3a0d, #332807); border: 1px solid var(--sun-deep);
  color: var(--sun);
}
.bouton-ecouter[aria-pressed="true"] { background: #243158; border-color: #3b4c86; color: var(--text); }
.conseil-voix { margin: 0 0 8px; font-size: .82rem; color: var(--muted); }
.texte-explication p { margin: .55em 0; color: #c9d2ea; font-size: 1.02rem; line-height: 1.7; }
.texte-explication strong { color: var(--text); }

/* ---------- le jeu « Fabrique la saison ! » ---------- */

.panneau-jeu { margin-top: 16px; padding: 14px 16px 16px; }
.entete-jeu {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px 12px; flex-wrap: wrap;
}
.entete-jeu h2 { margin: 0; font-size: 1.15rem; color: var(--teal); }
.actions-jeu { display: flex; gap: 8px; margin-left: auto; flex: none; align-items: center; }
.actions-jeu .bouton-voix { margin-left: 0; }
.bouton-jeu {
  border-radius: 999px; padding: 8px 18px; font-weight: 700;
  background: linear-gradient(180deg, #14434a, #0d2f35);
  border: 1px solid var(--teal); color: #8fe0cb;
}
.consigne-jeu { margin: 12px 2px 2px; color: var(--muted); }
.defi-jeu { margin: 2px 2px 12px; font-size: 1.25rem; font-weight: 800; color: var(--sun); }
.vues-jeu {
  display: grid;
  /* 9fr / 8fr = le rapport des ratios des deux cadres (9/7 et 8/7) :
     les deux vues du jeu tombent PILE à la même hauteur */
  grid-template-columns: minmax(0, 9fr) minmax(0, 8fr);
  gap: 10px; align-items: start;
  max-width: 980px;
}
.bravo-jeu {
  margin: 12px 2px 4px; padding: 10px 14px; border-radius: 12px;
  background: rgba(255, 207, 92, .12); border: 1px solid rgba(255, 207, 92, .55);
  color: var(--sun); font-weight: 700; font-size: 1.05rem;
}
/* le médaillon ancré dans l'en-tête du jeu (mobile, jeu ouvert — voir le
   bloc mobile) : sur grand écran il reste caché, où qu'il soit */
.entete-jeu .medaillon-fenetre { display: none; }

/* ---------- note aux parents (repliée) ---------- */

.parents { margin-top: 22px; }
.parents summary {
  cursor: pointer; padding: 14px 20px; font-weight: 700; color: var(--sun);
  list-style: none;
}
.parents summary::-webkit-details-marker { display: none; }
.parents summary::before { content: '▸ '; }
.parents[open] summary::before { content: '▾ '; }
.parents h3 {
  margin: 6px 24px 2px; font-family: var(--titres); font-size: 1rem;
  font-weight: 700; color: var(--teal);
}
.parents ul { margin: 0; padding: 0 24px 14px 2.6em; }
.parents li { margin: 8px 0; color: #c9d2ea; font-size: .93rem; }
.parents strong { color: var(--text); }
.parents a { color: var(--violet); }
/* le mot de la fin, hors listes : ce qu'un parent retient s'il ne lit qu'une ligne */
.parents-mot {
  margin: 2px 24px 18px; padding-top: 12px; border-top: 1px solid var(--border);
  color: #c9d2ea; font-size: .93rem;
}

/* ---------- le médaillon flottant (mobile) ---------- */

.medaillon-fenetre {
  position: fixed;
  right: 14px;
  top: 14px;
  width: 72px;
  height: 72px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--violet);
  background: #070b17;
  box-shadow: 0 6px 18px rgba(2, 5, 15, 0.65);
  cursor: pointer;
  z-index: 10;
  overflow: hidden;
}
.medaillon-fenetre canvas {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
/* jamais sur ordinateur : la fenêtre y est toujours à portée d'œil (seuil
   unique de l'épisode : 880 px) */
@media (min-width: 880px) {
  .medaillon-fenetre { display: none !important; }
}

/* ---------- boutons génériques ---------- */

button {
  font: inherit; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 12px; padding: 8px 14px; cursor: pointer;
  transition: filter .15s, transform .05s;
}
button:hover { filter: brightness(1.25); }
button:active { transform: translateY(1px); }

button:focus-visible, input:focus-visible, a:focus-visible {
  outline: 3px solid var(--sun); outline-offset: 2px;
}

/* ---------- pied de page ---------- */

.pied-site {
  max-width: 1180px; margin: 40px auto 0; padding: 22px 20px 34px;
  border-top: 1px solid var(--border); color: var(--muted); font-size: .88rem;
  text-align: center;
}
.pied-site a { color: var(--sun); }
.pied-serie { margin: 0 0 10px; }
.episodes-pied {
  list-style: none; margin: 0 0 16px; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center;
}
/* les liens d'épisodes portent leur médaillon (le soulignement reste sur le
   titre seul, pas sur la vignette) */
.episodes-pied a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.episodes-pied .ep-titre { text-decoration: underline; }
.ep-medaillon {
  flex: none; width: 30px; height: 30px; border-radius: 9px;
  background: #070b17; border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
}
.ep-medaillon svg { width: 26px; height: 26px; display: block; }
.menu-pied { margin: 0; }
.bouton-menu-labo {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: 999px;
  border: 1px solid var(--sun-deep); color: var(--sun); text-decoration: none;
  font-weight: 700; background: linear-gradient(180deg, #4a3a0d, #332807);
}
.fiole-labo { width: 22px; height: 22px; flex: none; }
.bouton-menu-labo:focus-visible { outline: 2px solid var(--sun-deep); }
/* la dernière ligne du pied : le lien « Mentions légales » du portail (une
   seule page pour toute la famille), en petit et un peu effacé — gris
   `--muted` plutôt que l'or des liens : obligatoire, mais il s'adresse à
   qui vérifie qui édite le labo, jamais au parent qui vient jouer */
.mentions-pied { margin: 14px 0 0; font-size: .8rem; }
.mentions-pied a { color: var(--muted); }


/* ---------- petits écrans (le seuil unique : 880 px) ---------- */

@media (max-width: 879px) {
  .entete { padding: 18px 16px 10px; }
  .entete h1 { font-size: clamp(1.65rem, 7.5vw, 2.2rem); }
  .tagline { font-size: .92rem; }
  main { padding: 0 12px 48px; }
  /* le fond fixe force des repeints à chaque défilement sur Android */
  body { background-attachment: scroll; }

  .grille-vues { grid-template-columns: 1fr; }
  /* les deux vues empilées, plafonnées en hauteur d'écran : après un
     appui-saison, fenêtre ET espace se partagent le viewport du téléphone.
     Hauteurs EXPLICITES, jamais aspect-ratio + max-height (WebKit réduirait
     la largeur de la boîte). */
  /* les DEUX vues, leurs deux phrases ET la frise de l'année tiennent dans
     un écran de téléphone (~715 px visibles) : hauteurs, marges et
     interlignes serrés, mesurés au script (pire cas balayé sur l'année :
     713 px) */
  .grille-vues { gap: 6px; }
  /* la frise se paie sur le jardin, pas sur l'espace (la vue qu'on
     manipule) : espace revenu à 31vh, fenêtre à 22,5vh */
  .grille-vues .ratio-fenetre { aspect-ratio: auto; height: min(50vw, 22.5vh); }
  .grille-vues .ratio-espace { aspect-ratio: auto; height: min(58vw, 31vh); }
  .entete-vue { margin-bottom: 2px; }
  .phrase-vue { margin-top: 3px; line-height: 1.38; font-size: .88rem; }

  /* la place du PIRE cas est réservée : le nombre de lignes de la phrase ne
     fait plus jamais sauter la page (retour test iPhone). À ce corps, la
     phrase la plus haute se recoupe sur QUATRE lignes (jour 68, la bande de
     transition) — 5,66 em mesurés, 5,75 em réservés. Toujours re-mesurer au
     script avant de toucher au corps ou aux textes. */
  #phrase-moment { min-height: 5.75em; }

  .boutons-scenarios { grid-template-columns: 1fr 1fr; }
  .scn { min-height: 64px; }

  /* LA FRISE DE L'ANNÉE TIENT DANS L'ÉCRAN, elle aussi : la carte de
     l'année reste sous les yeux pendant qu'on tire la Terre (retour
     utilisateur). Les économies qui ne coûtent rien aux vues — la légende
     du curseur s'en va (la bulle « attrape la Terre » enseigne déjà le
     geste), la bulle tient sur une ligne, et la rangée des repères de
     saison se serre AU-DESSUS du ruban : plus petite, et descendue dans
     le vide que le curseur garde au-dessus de sa piste (les 44 px de la
     cible tactile, piste de 16 px au milieu) — jamais SUR le ruban, où
     ils se lisaient comme un bug (retour utilisateur, iPhone). */
  .legende-curseur { display: none; }
  .commande-annee { margin-top: 0; }
  .piste-emojis {
    height: 1.2em; font-size: 1rem; margin-bottom: -8px;
    position: relative; z-index: 1; pointer-events: none;
  }
  .bulle-geste { margin-top: 2px; font-size: .78rem; }
  .bulle-geste-pilule { padding: 4px 12px; }

  /* LE MÉDAILLON EST ANCRÉ DANS L'EN-TÊTE DU JEU pendant le jeu (main.js
     l'y déplace à l'ouverture, le rend à sa place au rangement) : il
     devient un élément de la mise en page — à droite du titre, 60 px —
     et la rangée des actions prend toute la largeur dessous. Avant, il
     flottait par-dessus les boutons, qu'on serrait et empilait pour le
     fuir (retour utilisateur : « posés n'importe comment »). Hors du jeu
     il redevient flottant. */
  .panneau-jeu.jeu-ouvert .entete-jeu {
    display: grid; grid-template-columns: 1fr auto;
    grid-template-areas: "titre medaillon" "actions actions";
    gap: 8px 12px; align-items: center;
  }
  .panneau-jeu.jeu-ouvert .entete-jeu h2 { grid-area: titre; }
  .entete-jeu .medaillon-fenetre {
    display: block; grid-area: medaillon; position: static;
    width: 60px; height: 60px; box-shadow: none;
  }
  .panneau-jeu.jeu-ouvert .actions-jeu { grid-area: actions; margin: 0; }
  /* la rangée des actions du jeu : [🔇] [Ranger le jeu] [Encore une !] —
     la voix en icône seule (son libellé vit dans le jumeau des scénarios),
     les deux autres se partagent le reste, sur UNE ligne, texte jamais
     coupé */
  /* la rangée prend toute la largeur sous le titre, jeu fermé aussi :
     « 🎮 Jouer » s'étire comme « Ranger le jeu » (patron d'ou-va-le-soleil,
     décision utilisateur) */
  .actions-jeu { display: flex; gap: 8px; flex: 1 1 100%; margin-left: 0; max-width: 100%; }
  .actions-jeu .bouton-voix { flex: none; padding-left: 12px; padding-right: 12px; }
  .actions-jeu .bouton-voix .libelle { display: none; }
  .actions-jeu .bouton-jeu { flex: 1 1 0; padding-left: 8px; padding-right: 8px; font-size: .9rem; white-space: nowrap; }

  /* le jeu sur mobile : une seule vue (l'espace, qu'on manipule) — c'est le
     médaillon flottant qui montre la fenêtre, il reste visible pendant le jeu */
  .vues-jeu { grid-template-columns: 1fr; }
  .cadre-jeu-fenetre { display: none; }

  /* la boîte d'explication se replie (le résumé n'apparaît qu'ici) */
  .panneau-explication { padding: 4px 16px 6px; }
  .panneau-explication[open] { padding-bottom: 16px; }
  .resume-explication { display: block; cursor: pointer; padding: 12px 4px; list-style: none; }
  .resume-explication::-webkit-details-marker { display: none; }
  .resume-explication::before { content: '▸ '; color: var(--sun); font-weight: 700; }
  .panneau-explication[open] .resume-explication::before { content: '▾ '; }
  .resume-explication h2 { display: inline; margin: 0; font-size: 1.15rem; color: var(--sun); }
  .resume-explication .hint { display: block; margin: 3px 0 0 1.35em; font-size: .8rem; }
  /* sur mobile, le titre vit dans le résumé : celui de la rangée disparaît */
  .entete-explication h2 { display: none; }

  /* les histoires : la pastille au-dessus du texte, qui garde toute la largeur */
  .ligne-histoire { display: block; }
  .puce-histoire { display: inline-block; }
  .texte-histoire { margin: 4px 0 0; }

  /* des cibles tactiles d'au moins ~44 px pour les petits doigts */
  .bouton-lecture, .bouton-voix, .bouton-ecouter, .bouton-jeu { min-height: 44px; padding-top: 8px; padding-bottom: 8px; }

  .entete-scene { font-size: .82rem; }
  /* la légende maison/kangourou passe sous le titre de vue, sans le casser */
  .entete-vue { flex-wrap: wrap; }
  .entete-vue .hint { flex-basis: 100%; font-size: .72rem; }
  /* le ⏸/▶ à droite du titre « Depuis l’espace », au format des autres
     boutons (corps .9rem, marges 12 px) mais 36 px de haut, pas 44 : la
     rangée du titre grandirait de 16 px (retour utilisateur : même format ;
     compromis validé) */
  .entete-vue-espace .bouton-lecture { margin-left: auto; min-height: 36px; padding: 4px 12px; font-size: .9rem; }
  .defi-jeu { font-size: 1.15rem; }
  .bravo-jeu { font-size: 1rem; }
}

/* ---------- accessibilité : mouvement réduit ---------- */

@media (prefers-reduced-motion: reduce) {
  .bulle-geste { transition: none; }
  .scn, button { transition: none; }
  html { scroll-behavior: auto; }
}

[hidden] { display: none !important; }