/* ============ Le livre ============
 *
 * Illusion d'impression : le livre est un conteneur CSS (container-type) et TOUT
 * ce qui est dans le livre est dimensionné en cqw (% de la largeur du conteneur).
 * 1 page = 50cqw de large. Le texte garde exactement la même mise en page et les
 * mêmes retours à la ligne à toutes les tailles d'écran — comme de l'encre imprimée.
 *
 * Modèle 3D : une .sheet = une feuille physique (recto .face.front / verso .face.back).
 * La feuille pivote sur la tranche (transform-origin au dos) : rotateY(0 → -180deg).
 * Au repos toutes les feuilles vivent dans le MÊME plan (ordre tenu par z-index,
 * comme le site 2021) — gouttière nue garantie propre, aucune épaisseur simulée.
 * --a (angle) et --lift (0→1→0, force de l'ombre portée) sont pilotés par js/book.js.
 */

.book-stage {
  /* La double page (ratio 2:1) tient TOUJOURS entièrement dans l'écran, avec de
     la respiration : ~10% en largeur. La marge basse remonte un peu le livre
     pour dégager de la place au menu (réglage validé par Rasa). */
  width: min(80vw, 160vh);
  aspect-ratio: 2 / 1;
  container-type: inline-size;
  margin-bottom: 5cqh;
  /* Bloc conteneur du calque .book-shadow (position:absolute) : container-type
     inline-size NE crée PAS de bloc conteneur pour les descendants absolus (seul
     `size` ou `contain:layout` le fait) → sans ça l'ombre se cale sur .book-region
     et prend toute sa hauteur. */
  position: relative;
}

/* Conteneur de mise en page autour du livre. Desktop : simple boîte de centrage
   (le livre garde sa taille viewport, min(90vw, 170vh)). Mobile : devient la
   cellule flex qui prend l'espace restant + le conteneur de taille du livre
   (overrides dans menu.css → blocs mobiles). */
.book-region {
  display: flex;
  align-items: center;
  justify-content: center;
}

.book {
  position: relative;
  width: 100%;
  height: 100%;
  /* 281cqw = la perspective du site 2021 (400vh à 16:9, soit 5,625× la largeur
     de page) — mais désormais constante quel que soit l'écran. */
  perspective: 281cqw;
  transform-style: preserve-3d;
  transform: translateX(var(--shift, 0%));
  transition: transform 0.8s ease;
  /* .book est transparent aux clics : sous preserve-3d, les feuilles en Z négatif
     passent DERRIÈRE le plan de .book pour le hit-test, qui avalerait tout. */
  pointer-events: none;
}

/* Couverture fermée : seule la moitié droite (la couve) est visible → on recentre. */
.book.is-closed {
  --shift: -25%;
}

/* ---- Feuilles ---- */

.sheet {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  transform-origin: 0% 50%;
  /* Au repos les feuilles restent dans le même plan (gouttière nue préservée) ;
     l'ordre est tenu par z-index. MAIS sous preserve-3d, deux faces EXACTEMENT
     coplanaires se disputent le tri de profondeur du GPU malgré le z-index
     (page 3 qui flashe par-dessus la 1 en fermant ; textes qui bavent pendant la
     cascade). On donne donc un cheveu de profondeur, piloté par js/book.js via --z :
     la feuille EN VOL se soulève (sort du plan, n'entre plus en conflit avec ses
     voisines), et la SEULE feuille du dessus de chaque côté prend une avance.
     Un seul niveau, pas d'escalier de profondeur → la gouttière reste nue.
     (L'éventail d'angles depuis le dos avait été essayé puis abandonné : Z-fight
     du tri Chromium sur la ligne du dos.) */
  transform: rotateY(var(--a, 0deg)) translateZ(var(--z, 0cqw));
  transform-style: preserve-3d;
  cursor: grab;
  user-select: none;
  pointer-events: auto;
  /* Le glisser horizontal appartient au livre, pas au défilement de la page. */
  touch-action: none;
  /* Rayon des coins des faces. */
  --r: 1.875cqw;
}

/* Couverture : même épaisseur de plan que les pages (un volume plus épais
   recouvrirait la page voisine à la gouttière, où tout converge) ; le carton
   se distingue par son débord, son biseau et sa tranche sombre. Elle déborde
   un peu des pages, comme un vrai livre relié. */
.sheet.cover {
  --r: 1.5cqw;
  width: 50.5%;
  height: 101%;
  top: -0.5%;
}

.sheet.is-grabbing {
  cursor: grabbing;
}

/* Anti Z-fight au dos. Épaisseur retirée → la couverture et la page voisine
   vivent dans le même plan ; le tri de profondeur du GPU devient ambigu au pli
   et laisse percer un liseré blanc en ouvrant/fermant le livre. On sépare les
   plans d'un cheveu, CONSTANT (pas piloté par --lift) : la couverture ne décolle
   donc JAMAIS du livre, et l'écart en Z reste invisible (~0,2 % d'échelle à
   cette perspective) mais tranche le combat de profondeur. La 1ère de couv.
   (1er enfant) passe devant le bloc de pages ; la 4e (dernier enfant) passe
   derrière — signes opposés car la feuille du dos est retournée (son axe +Z
   pointe alors vers le lecteur). */
.sheet.cover:first-child {
  transform: rotateY(var(--a, 0deg)) translateZ(0.5cqw);
}

.sheet.cover:last-child {
  transform: rotateY(var(--a, 0deg)) translateZ(-0.5cqw);
}

/* ---- Faces (pages) ---- */

.face {
  position: absolute;
  /* Léger débord côté reliure : deux bords posés exactement au même pixel
     laissent passer un liseré de fond (antialiasing) — on fait se CHEVAUCHER
     les pages au pli au lieu de les juxtaposer. */
  inset: 0 0 0 -0.06cqw;
  overflow: hidden;
  backface-visibility: hidden;
  border-radius: 0 var(--r) var(--r) 0;
  background-color: #fbfbfb;
  background-size: cover;
  background-position: center;
  /* Une seule ombre : le balayage du virage, qui n'existe QUE en vol (--lift,
     nul au repos). Au repos, AUCUNE ombre par page — elles s'accumulaient dans
     la gouttière ; l'assise du livre est assurée par .book-shadow. */
  box-shadow: calc(var(--lift, 0) * 2.75cqw) 0 calc(var(--lift, 0) * 2.5cqw) rgba(0, 0, 0, 0.13);
}

/* Le verso est mécaniquement en miroir : arrondi et débord de reliure sur SON
   bord droit, et offset d'ombre NÉGATIF pour qu'une fois projetée, l'ombre du
   virage tombe sur la page du dessous à GAUCHE — symétrique des pages de droite. */
.face.back {
  transform: rotateY(180deg);
  inset: 0 -0.06cqw 0 0;
  border-radius: var(--r) 0 0 var(--r);
  box-shadow: calc(var(--lift, 0) * -2.75cqw) 0 calc(var(--lift, 0) * 2.5cqw) rgba(0, 0, 0, 0.13);
}

/* La couverture enveloppe le dos : léger débord côté reliure (marge de pixel
   livre fermé). Le vrai correctif du liseré blanc est la séparation en Z
   constante des couvertures (voir .sheet.cover ci-dessus). */
.cover .face {
  inset: 0 0 0 -0.3cqw;
}

.cover .face.back {
  inset: 0 -0.3cqw 0 0;
}

/* Livre fermé (devant ou derrière) : les pages sont entièrement cachées par la
   couverture, mais aux DPR fractionnaires leurs bords BLANCS peuvent franger
   d'un pixel au ras du carton (antialiasing de calques GPU). On les rétracte
   de quelques pixels, hors de portée des bords de la couverture. */
.book.is-closed .sheet:not(.cover) .face,
.book.is-closed-back .sheet:not(.cover) .face {
  clip-path: inset(0.5% 0.4% 0.5% 0.4%);
}

/* Épaisseur du papier : RETIRÉE (décision Rasa 2026-06-12). Les trois modèles
   essayés (translateZ, éventail, volume en vol + lamelles 2D) sont documentés
   dans le vault — Docs/Tech/build_flip-engine.md — si l'envie revient. */


/* Gouttière NUE (décision Rasa 2026-06-12, après essais d'ombre/lumière au pli) :
   aucun modelé au centre — les jpg des pages portent seuls la matière du papier.
   Le ::before ne garde que le liseré de lumière du bord HAUT, en inset pour
   qu'il ÉPOUSE la courbe des coins arrondis (un dégradé droit la traverserait). */
.face::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0.12cqw 0.18cqw -0.06cqw rgba(255, 255, 255, 0.2);
}

/* Extérieur des couvertures : biseau de carton discret (vignettage + coins),
   SANS reflet (gradients retirés à la demande de Rasa). Le verso (couve-4)
   est en miroir : signes des coins inversés. */
.face.face-couve-1::before,
.face.face-couve-4::before {
  /* Liseré haut + vignettage + assise sombre. PAS de reflet clair latéral :
     l'inset blanc de coin dessinait une ligne claire le long du dos (bug
     signalé deux fois par Rasa). */
  box-shadow:
    inset 0 0.14cqw 0.22cqw -0.06cqw rgba(255, 255, 255, 0.20),
    inset 0 0 3cqw rgba(0, 0, 0, 0.22),
    inset -0.18cqw -0.18cqw 0.35cqw rgba(0, 0, 0, 0.4);
}

.face.back.face-couve-4::before {
  box-shadow:
    inset 0 0.14cqw 0.22cqw -0.06cqw rgba(255, 255, 255, 0.20),
    inset 0 0 3cqw rgba(0, 0, 0, 0.22),
    inset 0.18cqw -0.18cqw 0.35cqw rgba(0, 0, 0, 0.4);
}

/* Pas d'assombrissement de la page en vol : dans la référence webm, la page
   tournante reste claire — seule son OMBRE PORTÉE (box-shadow ci-dessus,
   pilotée par --lift) balaie la page du dessous. */

/* ---- Fonds de pages ---- */

.face-couve-1 { background-image: url(../images/dessin-couve-1ere.jpg); }
.face-couve-2 { background-image: url(../images/dessin-couve-2em.jpg); }
.face-couve-3 { background-image: url(../images/dessin-couve-3em.jpg); }
.face-couve-4 { background-image: url(../images/dessin-couve-4em.jpg); }
.paper-right  { background-image: url(../images/blankpage_right.jpg); }
.paper-left   { background-image: url(../images/blankpage_left.jpg); }

/* L'illustration remplit la face en fond ; absolue pour que le titre de chapitre
   (.txt.ttl) et le folio puissent se poser PAR-DESSUS sur les pages-titres. */
.page-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* Titre de chapitre posé au-dessus de l'illustration (le folio, déjà en absolu
   et après l'image dans le DOM, passe naturellement au-dessus). */
.face > .txt {
  position: relative;
  z-index: 1;
}

/* ============ Typographie du livre (tout en cqw — encre imprimée) ============ */

.book p {
  color: #505050;
  text-align: left;
  font-size: 1.25cqw;
  line-height: 2cqw;
  font-weight: 200;
  letter-spacing: 0.0875cqw;
  padding-bottom: 1.25cqw;
}

.book h2 {
  font-size: 1.625cqw;
  line-height: 2.25cqw;
  font-weight: 200;
  letter-spacing: 0.0875cqw;
  padding-bottom: 1.25cqw;
}

.book h3 {
  font-size: 1.25cqw;
  line-height: 1.75cqw;
  font-weight: 200;
  letter-spacing: 0.0875cqw;
  padding-top: 1.25cqw;
  padding-bottom: 0.625cqw;
}

.txt {
  position: relative;
  margin: 3.75cqw;
  width: 42.5cqw;
  text-align: left;
}

/* Indications de jeu dans le texte (« Musette chante ♬ ») — en italique. */
.note {
  font-style: italic;
}

/* Pages-titres de chapitre : le titre se pose bas sur l'illustration
   (texte par-dessus l'image grâce au z-index de .face > .txt). */
.txt.ttl {
  padding-top: 18.75cqw;
}

.txt.ttl h2 {
  font-size: 2.125cqw;
  line-height: 3.125cqw;
}

.folio {
  position: absolute;
  bottom: 1.9cqw;
  right: 2.5cqw;
  font-size: 0.6875cqw;
  letter-spacing: 0.0875cqw;
  color: #505050;
}

/* Page "Quatre petits boutons" (texte aligné à droite) : bloc calé EN BAS.
   Auparavant via padding-top: 21.25cqw, qui débordait dès l'ajout du 4e bouton.
   Flex bottom-align → s'adapte à la hauteur du contenu (même modèle que couve-3). */
.txt.int {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  width: auto;
  margin: 0;
  padding: 0 3.75cqw 3.75cqw;
}

.txt.int h2 {
  text-align: right;
  font-size: 1.125cqw;
  margin-bottom: 1.25cqw;
  letter-spacing: 0.25cqw;
  text-transform: uppercase;
}

.txt.int p {
  font-size: 1cqw;
  line-height: 1.5cqw;
  letter-spacing: 0.05cqw;
  text-align: right;
}

.but-int {
  display: inline;
  height: 1cqw;
  width: 1cqw;
  margin-right: 0.25cqw;
}

/* Pages de texte serré (petite note, trois indices) */
.txt.sml p {
  font-size: 1.125cqw;
  line-height: 1.875cqw;
  letter-spacing: 0.05cqw;
}

.txt.sml h3 {
  font-size: 1.25cqw;
}

/* Lien « Les 13 lunes » (page 7) — gris légèrement plus foncé. */
.lien-13lunes {
  color: #464646;
}

/* Crédits 2e de couverture (texte blanc sur fond sombre).
   line-height en cqw OBLIGATOIRE : ce bloc empile des <span> EN LIGNE (dont un
   « Composition musicale<br>et violoncelle »). Sans line-height sur la div, celle-ci
   hérite de `normal` calculé sur la taille par défaut (16px, NON cqw) → un « strut »
   FIXE d'environ 19px par ligne. Au bureau les line-height cqw sont plus grandes et
   l'emportent ; sur mobile elles sont minuscules (~5px) donc le strut fixe domine →
   espaces énormes (le <br> faisait 16px au lieu de 1,25cqw) et le bloc déborde de la
   page. La poser en cqw fait redescendre le strut à l'échelle du livre → illusion
   d'impression préservée à toutes les tailles. */
.txt.eqp {
  padding-top: 0.625cqw;
  padding-left: 0.625cqw;
  line-height: 1.25cqw;
}

.txt.eqp p {
  font-size: 1cqw;
  font-weight: 200;
  line-height: 2cqw;
  color: #fff;
}

.txt.eqp span {
  font-size: 0.75cqw;
  line-height: 1.25cqw;
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: 0.25cqw;
  color: #bbbbbb;
}

.eqp-link {
  color: #fff;
  font-weight: 200;
}

/* Logos éditeurs dans les crédits (2e de couv.) — remplacent les liens texte
   « Script édition / Les 13 lunes ». La 2e de couv. est NOIRE : le logo C13L est
   noir → on l'inverse pour qu'il s'y lise (le logo Script est déjà blanc). */
.editeurs-eqp {
  display: flex;
  align-items: center;
  gap: 1.25cqw;
  padding-top: 0.5cqw;
}

.logo-eqp { display: block; }
.logo-eqp-script { height: 2cqw; }
.logo-eqp-c13l { height: 3.2cqw; }

/* « Tous droits réservés © 2021 » sous les logos. */
.txt.eqp .eqp-rights {
  font-size: 0.75cqw;
  line-height: 1.25cqw;
  color: #bbbbbb;
  padding-top: 1.25cqw;
}

/* Soulignement « coup de crayon » qui se trace au survol (réutilisable :
   crédits, sommaire…). Le trait est un MASQUE coloré en currentColor → il prend
   la couleur du texte, donc lisible sur fond clair comme sur fond sombre. La
   largeur du masque s'anime de 0 → 100 % : le trait se dessine de gauche à droite.
   Remplace le soulignement statique (évite la page « lourde » de liens soulignés). */
.ink-link {
  position: relative;
  display: inline-block;
  text-decoration: none;
}

.ink-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0.15em;
  width: 100%;
  height: 0.6em;
  background-color: currentColor;
  -webkit-mask: url(../images/pencil-underline-v2.svg) no-repeat left bottom;
  mask: url(../images/pencil-underline-v2.svg) no-repeat left bottom;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  /* Le trait se DESSINE du début à la fin du lien : le tracé est à sa taille
     réelle (mask-size 100%), révélé progressivement par un clip qui s'ouvre
     depuis la droite — comme un coup de crayon posé de gauche à droite. */
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.4s ease;
  pointer-events: none;
}

.ink-link:hover::after,
.ink-link:focus-visible::after {
  clip-path: inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
  .ink-link::after {
    transition: none;
  }
}

/* Les liens du sommaire ont une interligne SERRÉE (flex items, `line-height:normal`)
   alors que les autres liens ink-link ont une grande interligne. Le ::after est calé
   sur le BAS de la boîte du lien → avec une interligne serrée la boîte colle au texte
   et le trait remonterait dedans. On rabaisse donc l'ancrage pour ces liens-là. */
.tdm-link::after,
.tdm-folio::after {
  bottom: -0.3em;
}

/* Mention spectacle, bas de page 2 */
.txt-low {
  position: absolute;
  bottom: 0;
  left: 0;
}

.txt-low p {
  font-size: 0.875cqw;
  line-height: 1.25cqw;
  margin: 3.75cqw;
}

.txt-low-link {
  color: #505050;
  font-weight: 100;
  line-height: 1.75cqw;
  margin-top: 0.25cqw;
}

/* Icône + lien YouTube alignés verticalement par un conteneur inline-flex
   (un `float` ne peut pas centrer verticalement avec le texte voisin). */
.yt-line {
  display: inline-flex;
  align-items: center;
}

.yt-icon {
  width: 1.25cqw;
  margin-right: 0.625cqw;
}

/* Sommaire */
.txt.tdm h2 {
  font-size: 1.125cqw;
  letter-spacing: 0.25cqw;
  text-transform: uppercase;
  padding-top: 1.25cqw;
  padding-bottom: 0.625cqw;
}

.tdm-list {
  list-style: none;
  width: 37.5cqw;
}

.tdm-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  min-height: 2.75cqw;
}

.tdm-list a {
  text-decoration: none;
  font-weight: 200;
  letter-spacing: 0.05cqw;
}

/* Survol / focus : soulignement « crayon » géré par .ink-link (les liens du
   sommaire portent la classe .ink-link dans le HTML). */

.tdm-link {
  font-size: 1.25cqw;
}

.tdm-folio {
  font-size: 0.875cqw;
  font-style: italic;
}

/* 3e de couverture : mêmes styles que les crédits de la 2e de couv. (.txt.eqp) —
   bloc calé EN HAUT (placement de .txt), libellés gris clair, valeurs blanches.
   p.smalline-ttl est en (0,2,1) pour passer DEVANT .book p (0,1,1), qui sinon
   écrasait sa taille et son interlettrage (bug latent). */
.face-couve-3 p.smalline-ttl {
  font-size: 0.75cqw;
  line-height: 1.25cqw;
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: 0.25cqw;
  color: #bbbbbb;
  padding-bottom: 0.625cqw;
}

.face-couve-3 p.smalline {
  font-size: 0.75cqw;
  line-height: 1.25cqw;
  color: #fff;
}

/* Placement aligné sur .txt.eqp : .txt donne déjà margin 3.75cqw + width 42.5cqw
   (bloc en haut) ; on ajoute juste le retrait fin et l'interligne de l'eqp. */
.face-couve-3 .txt {
  padding-top: 0.625cqw;
  padding-left: 0.625cqw;
  line-height: 1.25cqw;
}

/* 4e de couverture : logos éditeurs (plus bas). */

.editeurs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.25cqw;
  padding-top: 35cqw;
}

.logo-editeurs-1 { height: 3.125cqw; }
.logo-editeurs-2 { height: 5cqw; }

/* ============ Mouvement réduit ============ */

@media (prefers-reduced-motion: reduce) {
  .book {
    transition: none;
  }
}