/* screens/cahier.css — « Le cahier de vacances ».  TOKENS ONLY (Seam 3 : aucune couleur ici,
   tout vient de tokens.css). Rendu natif famille : rien du châssis pro. 2026-08-13.

   Le sélecteur de niveau réutilise .explore-picks/.explore-sel (apprendre.css) — les deux
   fichiers sont toujours chargés, une classe CSS s'applique par nom, pas par fichier. */

.cahier { padding: 4px 20px 24px; }

/* Le bandeau — la mascotte, le thème, la progression du voyage. */
.cahier-hero {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 16px 18px; box-shadow: var(--shadow-card);
}
.cahier-mascot { font-size: 40px; line-height: 1; flex: none; }
.cahier-htx { min-width: 0; flex: 1; }
.cahier-htx strong { font-size: 15.5px; font-weight: 600; color: var(--ink); }
.cahier-track { height: 7px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; margin-top: 8px; }
.cahier-track > i { display: block; height: 100%; background: var(--sport); border-radius: var(--r-pill); transition: width .5s ease; }

.cahier-acts { display: flex; gap: 8px; margin: 12px 0 2px; flex-wrap: wrap; }

/* U4.4 — ce que « Imprimer le cahier » coûte, sous le bouton qui le fait. Une seule règle, et
   elle est là pour être LUE avant le geste : ni la taille ni la teinte d'une mention légale
   (11 px en --ink-faint se saute), ni celles d'une phrase du produit (elle n'est pas le sujet
   de l'écran). C'est la taille et l'encre du sous-titre du bandeau, `.cahier-htx .sub`.
   `flex-wrap` sur la rangée au-dessus est l'autre moitié : à 390 px, deux boutons dont l'un dit
   « Imprimer le cahier » ne tiennent pas sur une ligne, et sans le retour ils se serraient. */
.cahier-printline { font-size: 12.5px; line-height: 1.45; color: var(--ink-muted); margin: 8px 2px 0; }

.cahier-maptitle {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 1.4px;
  color: var(--ink-muted); margin: 16px 2px 10px;
}

/* ── U4.1 · LES ESCALES — des cartes, plus une grille de vignettes ────────────────────────
   La grille 3×n (.cahier-map / .cahier-esc / .cahier-escn / .cahier-escname / .cahier-escok)
   est SUPPRIMÉE, pas laissée en place : une vignette de 100 px de large ne peut pas porter les
   trois actions que la boucle 4 lui demande (ouvrir, imprimer, envoyer sur la télé), et deux
   listes des mêmes escales seraient exactement le « menu de menus » que ce plan démonte.
   `.cahier-scene` RESTE : l'album, le mot de fin d'escale et l'intro s'en servent tous les
   trois (ils n'en changent que la taille — c'est ici que vit leur interligne).

   Ce qui les remplace, c'est `.card.seq` — la carte de séquence de l'atelier, telle quelle.
   Les deux feuilles sont toujours chargées et une classe s'applique par NOM, pas par fichier :
   le cahier hérite donc de la mise en page, de la ligne d'état et de la règle anti-débordement
   de `.seq .meta` sans en recopier une ligne. Les quatre règles ci-dessous sont tout ce que la
   feuille de l'atelier ne pouvait pas savoir. */
.cahier-scene { font-size: 26px; line-height: 1.1; }

/* La pile reprend `.list` de base.css (l'apparition en cascade ET sa garde « mouvement
   réduit », qui visent toutes deux `.list > .card`) ; il ne reste qu'à annuler son retrait
   latéral, `.cahier` portant déjà le sien. Même spécificité que `.list`, et cette feuille est
   chargée après base.css : c'est l'ordre des fichiers qui tranche, comme pour `.explore-picks`. */
.cahier-escs { padding: 0; }

/* Le pictogramme de l'île, dans le titre. `.seq strong` est en `display: block` ; ici le titre
   porte deux enfants et redevient une ligne, l'image calée sur la première ligne du texte pour
   qu'un titre sur deux lignes ne fasse pas flotter l'île au milieu. */
.cahier-card strong { display: flex; align-items: baseline; gap: 8px; }
.cahier-cardsc { font-size: 18px; line-height: 1; flex: none; }

/* Le MOT de l'état. `.seq .meta .st` le peint en --school parce que l'atelier est la lumière
   école ; la carte d'escale, elle, est ambre. Et --voice ne peut PAS servir d'encre : l'ambre
   de tokens.css:85 mesure ~1,9:1 sur le fond clair, très en dessous de la barre, et la palette
   n'a pas de --voice-ink (--sport a le sien, --sport-ink, pour exactement cette raison —
   tokens.css:89 l'écrit noir sur blanc).
   Le mot passe donc en encre pleine, et l'ambre reste là où elle porte sans rien à lire : le
   fond, le trait et la barre de `.card.litV`. D7 est intact — l'information EST le mot. */
.cahier-card .meta .st { color: var(--ink); }
.cahier-card .meta .st.todo { color: var(--ink-muted); }

/* U1.3 (famille-faisabilité) · « dont 1 sur la feuille » — ET IL N'Y A RIEN À ÉCRIRE ICI.
   La ligne porte `.seq-pap`, la carte porte déjà `.seq` : la règle `.seq .seq-pap` d'atelier.css
   s'applique telle quelle, exactement comme `.card.seq` plus haut et comme `.rep-txt` plus bas.
   C'est ce qui garantit que les deux cartes de l'app — la séquence et l'escale — disent la même
   phrase dans la même encre ; une règle écrite ici finirait par en dire une autre.
   Mesuré à l'écran (verif-negatif-ecran.js §3) : 500 12,5 px / 1,35, `--ink-muted`, chiffres
   tabulaires, 3 px sous `.meta`, une seule ligne, aucun débordement (scrollWidth 390). Aucune
   valeur de couleur n'entre donc dans cette feuille, et la mention coûte 20 px de hauteur. */

/* La phrase d'échec (« Rien à jouer sur la télé dans cette escale. ») vit DANS la carte : la
   marge latérale de 20 px de `.note`, faite pour une note posée dans le flot de l'écran, l'y
   décalerait de ses propres bords. */
.cahier-card > .note { margin: 10px 0 0; }

/* ── U4.2 · LA BANDE « REPRENDRE » ────────────────────────────────────────────────────────
   Presque rien à écrire : la bande est une `.card.litV` (base.css) habillée par `.rep-top` /
   `.rep-txt` (atelier.css) — la MÊME forme que celle de l'atelier, pas une seconde. Les deux
   feuilles sont toujours chargées et une classe s'applique par NOM, pas par fichier ; c'est la
   règle qui fait déjà hériter `.card.seq` à la carte d'escale, et elle vaut ici mot pour mot.
   L'œilleton y est même déjà en ambre (`.rep-txt small`, --voice) : la lumière du voyage.

   Restent les deux choses que la feuille de l'atelier ne pouvait pas savoir. */

/* 1. La bande s'ouvre SOUS le bandeau, qui n'est pas une carte et ne porte pas de gouttière :
      sans cette marge les deux blocs se toucheraient. `.list` aurait donné l'écart (12px) et
      l'apparition en cascade, mais elle donnerait aussi son retrait latéral de 20px à une bande
      posée dans `.cahier`, qui a déjà le sien — et une cascade sur une carte unique n'anime
      rien. La valeur est celle de `.list` : un seul écart entre blocs sur cet écran. */
.cahier-rep { margin-top: 12px; }

/* 2. Le pictogramme de l'île dans le titre — la même règle que `.cahier-card strong`, pour la
      même raison : `.rep-txt b` est en `display: block` ; ici le titre porte deux enfants et
      redevient une ligne, l'image calée sur la première ligne du texte pour qu'un titre sur deux
      lignes ne fasse pas flotter l'île au milieu. `.cahier-cardsc` porte déjà sa taille. */
.cahier-rep .rep-txt b { display: flex; align-items: baseline; gap: 8px; }

/* Une escale — l'intro (histoire), puis exPlayer. */
.cahier-top { margin-bottom: 8px; }
.cahier-intro { text-align: center; max-width: 460px; margin: 4px auto 10px; }
.cahier-scene.big { font-size: 64px; line-height: 1; display: block; margin-bottom: 6px; }
.cahier-kicker {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 1.6px;
  color: var(--sport-ink); font-weight: 600;
}
.cahier-title { font-size: 22px; font-weight: 700; color: var(--ink); margin: 2px 0 0; }
.cahier-story { font-size: 14.5px; line-height: 1.55; color: var(--ink-muted); margin: 10px auto 0; max-width: 400px; }
.cahier-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 14px; }
.cahier-chip {
  font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: var(--r-pill);
  background: var(--chip-bg); color: var(--chip-ink);
}

/* Le mot de fin d'escale — l'autocollant rejoint l'album. */
.cahier-reward {
  text-align: center; margin-top: 16px; padding: 16px;
  background: var(--sport-soft); border: 1px solid var(--sport-line); border-radius: var(--r-lg);
}
.cahier-reward .cahier-scene { font-size: 40px; }
.cahier-reward p { font-size: 14px; color: var(--ink); margin: 6px 0 10px; }
.cahier-reward .acts { justify-content: center; }

/* L'album — la collection. */
.cahier-albumhead { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 4px 2px 14px; }
.cahier-albumhead strong { font-size: 17px; font-weight: 700; color: var(--ink); }
.cahier-album { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (min-width: 520px) { .cahier-album { grid-template-columns: repeat(5, 1fr); } }
.cahier-stick {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 14px 6px; text-align: center;
  border: 1px dashed var(--line-dashed); border-radius: var(--r-md);
  background: var(--surface); opacity: .5;
}
.cahier-stick.has { opacity: 1; border-style: solid; border-color: var(--sport-line); background: var(--sport-soft); }
.cahier-stick .cahier-scene { font-size: 30px; }
.cahier-sticklab { font-size: 11px; color: var(--ink-muted); line-height: 1.2; }
.cahier-stick.has .cahier-sticklab { color: var(--ink); font-weight: 600; }

.cahier .acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }