/*
 * L'accueil — version 5 (D-93 → D-108).
 *
 * Portée telle quelle de maquettes/nouvel-accueil/accueil.css le 23 septembre
 * 2026. Chargée sur l'accueil seulement (inc/ressources.php), après 30-pages.
 * Désormais, c'est ICI qu'on retouche ; la maquette suit.
 */

/**
 * NOUVEL ACCUEIL — proposition du 22 septembre 2026.
 *
 * L'accueil s'adresse à TOUT le public — lecteurs de manga, parents,
 * enfants (D-100) ; les pages ciblées par la publicité parlent chacune à un
 * public. L'ordre : ouvrir le monde (entrée, plongée), le peupler (les
 * personnages), le faire lire (la lecture guidée, le tome 1), puis l'offre,
 * les questions, et la dernière page. Chaque écran est composé comme une
 * planche : des cases, des cartouches, des personnages qui débordent.
 *
 * Tout vient des jetons du thème (`00-jetons.css`, chargé avant). Ce fichier
 * n'ajoute que les tempos de ses quatre moments et deux mesures reprises du
 * thème, nommées une fois ici.
 */

:root {
  --duree-debordement: 900ms;   /* Wira et Hiba sortent de la case */
  --duree-eclosion:    650ms;   /* une pensée s'ouvre */
  --decalage-eclosion: 260ms;   /* entre deux pensées : on les lit une à une */
  --duree-couleur:    1400ms;   /* la couleur revient, là où animation-timeline manque */
  --duree-camera:      850ms;   /* la caméra passe d'une case à la suivante */
  --duree-coup-d-oeil: 900ms;   /* une nouvelle page, vue en entier, avant sa 1re case */
  --duree-page:        240ms;   /* on tourne la page : la double s'en va, la suivante arrive */
  --camera: cubic-bezier(.65, 0, .35, 1);

  --trait-case: 2px;            /* le bord d'encre d'une case — celui de `.case` */
  --barre-mobile: 5.5rem;       /* la barre fixe du téléphone — `.barre__interieur` */
}


/* ═══ L'ÉCRAN ════════════════════════════════════════════════════════════
   Une section tient dans un écran, et son sujet y est centré (principe 3 du
   brief). Sur téléphone, la barre fixe mange le bas : on la réserve dans la
   marge interne, sinon le sujet est centré sur une zone qu'on ne voit pas. */

.ecran {
  position: relative;
  display: grid;
  align-items: center;
  min-block-size: calc(100svh - var(--hauteur-entete));
  padding-block: var(--e-12);
}

@media (max-width: 47.99rem) {
  .ecran { padding-block: var(--e-8) calc(var(--e-8) + var(--barre-mobile)); }
}

.surtitre {
  font-family: var(--titre);
  font-size: var(--t-lg);
  letter-spacing: var(--lettrage-capital);
  text-transform: uppercase;
  color: var(--or);
}

/* Le lien secondaire : souligné rouge, flèche vers le bas — il descend dans
   la page, il n'en sort pas. */
.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-block-size: 44px;
  color: var(--texte);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--rouge);
  text-decoration-thickness: 2px;
  text-underline-offset: .35em;
  transition: color var(--duree-action) var(--sortie),
              text-decoration-color var(--duree-action) var(--sortie);
}

.lien-fleche::after {
  content: '\2193';
  color: var(--rouge);
  transition: translate var(--duree-action) var(--shonen);
}

.lien-fleche:hover { color: var(--or); text-decoration-color: var(--or); }
.lien-fleche:hover::after { translate: 0 3px; }

/* Vers une autre page : la flèche regarde devant, pas en bas. */
.lien-fleche--page::after { content: '\2192'; }
.lien-fleche--page:hover::after { translate: 3px 0; }


/* ═══ 1 · L'ENTRÉE — le monde de Hidaya ══════════════════════════════════
   Retour d'Ismail, le 22 septembre : « plus épique, dès le début, avec de
   belles images, de belles animations — qu'on puisse se plonger dans le
   monde de Hidaya », et une ouverture centrée, « surtout sur mobile ».
   L'accueil parle à tout le public (D-100) : il ne commence pas par une
   douleur, il ouvre un monde.

   Composée comme une couverture de tome, en quatre plans : le Monde des
   cœurs, les lignes de concentration, le nom, puis Wira et Hiba devant lui —
   côte à côte, à la même hauteur, arrivés au même instant (ils portent
   l'histoire à égalité). Trois mouvements, un par source : l'arrivée (au
   chargement), le départ (au défilement), la profondeur (au pointeur). */

.entree {
  --nom-taille: min(22vw, 32svh);
  --duo-hauteur: min(47svh, 31rem);

  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--noir);
  text-align: center;
  view-timeline: --entree block;
}

.entree__fond {
  position: absolute;
  inset: 0;
  z-index: -3;
}

.entree__image {
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: cover;
  object-position: 50% 45%;
}

/* Sombre en bas pour le texte, ouvert au centre pour le monde. */
.entree__fond::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 55% at 50% 40%, transparent 0%, var(--voile-leger) 60%, var(--voile-moyen) 100%),
    linear-gradient(to top, var(--noir) 0%, var(--voile-fort) 16%, transparent 50%);
}

/* Les lignes de concentration : le gros plan du manga. Elles tournent très
   lentement — un calque qu'on fait pivoter, pas un dégradé qu'on repeint. */
.entree__lignes {
  position: absolute;
  inset: -45%;
  z-index: -2;
  pointer-events: none;
  opacity: .55;
  background: repeating-conic-gradient(from 0deg at 50% 50%,
    color-mix(in srgb, var(--blanc) 16%, transparent) 0deg .5deg,
    transparent .5deg 4.5deg);
  mask-image: radial-gradient(circle at 50% 50%, transparent 12%, #000 30%, transparent 58%);
}

.entree__braises { z-index: 3; }

.entree__scene {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto;
  justify-items: center;
  align-content: center;
  min-block-size: calc(100svh - var(--hauteur-entete));
  padding: var(--e-8) var(--gouttiere) var(--e-12);
}

.entree__couche--nom { z-index: 0; }

/* ⚠ **Le titre est le logo HIDAYA, et le logo se lit en entier** (demande de
   Karama, 2 octobre 2026). Le mot en capitales était recouvert sur 46 % de sa
   hauteur par les héros : sur le logo, cela cachait le D et l'emblème du I.
   Les héros ne mordent plus que sa lisière basse (5 % de sa largeur, un quart
   de sa hauteur — le logo fait 4,88 fois sa hauteur), comme le titre d'une
   couverture de tome. À 2,8 fois `--nom-taille`, le bouton de l'entrée tient
   au-dessus de la ligne de flottaison à 1 440 × 900 (bas à 892 px ; 957 avec
   l'ancien titre). La largeur suit `--nom-taille`, que les écrans étroits
   redéfinissent déjà, et ne dépasse jamais l'écran moins ses marges. */
.entree { --logo-largeur: min(var(--nom-taille) * 2.8, 100vw - 2 * var(--gouttiere)); }
.entree__couche--duo { z-index: 1; margin-block-start: calc(var(--logo-largeur) * -.05); }

.entree__logo {
  display: block;
  inline-size: var(--logo-largeur);
  max-inline-size: none;
  block-size: auto;
  filter: drop-shadow(0 0 2.5rem color-mix(in srgb, var(--blanc) 35%, transparent));
}

.entree__nom {
  margin: 0;
  font-size: var(--nom-taille);
  line-height: .8;
  letter-spacing: .02em;
  color: var(--blanc);
  text-shadow: 0 0 2.5rem color-mix(in srgb, var(--blanc) 35%, transparent);
  transition: transform 700ms var(--sortie);
  transform: translate(calc(var(--px, 0) * -10px), calc(var(--py, 0) * -6px));
}

.entree__duo {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--e-2);
  block-size: var(--duo-hauteur);
  transition: transform 700ms var(--sortie);
  transform: translate(calc(var(--px, 0) * 16px), calc(var(--py, 0) * 8px));
}

.entree__heros {
  block-size: 100%;
  inline-size: auto;
  max-inline-size: none;
  filter:
    drop-shadow(0 1.2rem 1.6rem var(--voile-fort))
    drop-shadow(0 0 1.4rem color-mix(in srgb, var(--blanc) 16%, transparent));
}

.entree__texte {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: var(--e-6);
  margin-block-start: var(--e-4);
}

.entree__promesse {
  max-inline-size: 30ch;
  font-family: var(--titre);
  font-size: var(--t-2xl);
  line-height: 1.05;
  letter-spacing: var(--lettrage-titre);
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--blanc);
  text-shadow: 0 .15rem 1rem var(--noir);
}

.entree__promesse span { display: block; color: var(--or); }

.entree__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--e-3) var(--e-8);
}

/* ── L'arrivée ─────────────────────────────────────────────────────────
   ⚠ L'état final est l'état par défaut : sans animation (mouvement réduit),
   tout est là. Chaque propriété n'a qu'une source — l'arrivée anime
   `opacity`, `translate`, `letter-spacing`, `filter` ; le pointeur,
   `transform` ; le départ, les couches qui les enveloppent. */
@media (prefers-reduced-motion: no-preference) {
  .entree__image { animation: entree-fond 2600ms var(--sortie) both; }
  .entree__lignes { animation: entree-lignes-apparait 1400ms var(--sortie) 300ms both, entree-lignes-tourne 140s linear infinite; }
  .entree__nom { animation: entree-nom 1300ms var(--sortie) 150ms both; }
  .entree__heros { animation: entree-heros var(--duree-debordement) var(--shonen) 550ms both; }
  .entree__texte { animation: entree-texte 700ms var(--sortie) 1000ms both; }

  /* ── Le départ, piloté par le défilement ─────────────────────────────
     En quittant l'écran, les plans se séparent : le nom monte plus vite
     que les héros, le monde s'approche. Là où `animation-timeline` manque,
     rien ne bouge — et rien ne manque. */
  @supports (animation-timeline: view()) {
    .entree__couche--nom { animation: entree-part-nom linear both; animation-timeline: --entree; animation-range: exit 0% exit 100%; }
    .entree__couche--duo { animation: entree-part-duo linear both; animation-timeline: --entree; animation-range: exit 0% exit 100%; }
    .entree__fond { animation: entree-part-fond linear both; animation-timeline: --entree; animation-range: exit 0% exit 100%; }
  }
}

@keyframes entree-fond {
  from { opacity: 0; scale: 1.14; }
  to   { opacity: 1; scale: 1; }
}

@keyframes entree-lignes-apparait {
  from { opacity: 0; }
  to   { opacity: .55; }
}

@keyframes entree-lignes-tourne {
  to { rotate: 360deg; }
}

@keyframes entree-nom {
  from { opacity: 0; letter-spacing: .5em; filter: blur(12px); }
  to   { opacity: 1; letter-spacing: .02em; filter: blur(0); }
}

@keyframes entree-heros {
  from { opacity: 0; translate: 0 14%; }
  55%  { opacity: 1; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes entree-texte {
  from { opacity: 0; translate: 0 1rem; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes entree-part-nom  { to { translate: 0 -40%; opacity: 0; } }
@keyframes entree-part-duo  { to { translate: 0 12%; } }
@keyframes entree-part-fond { to { scale: 1.12; } }

@media (max-width: 47.99rem) {
  .entree {
    --nom-taille: 35vw;
    /* Les deux héros côte à côte tiennent dans la largeur : 0,51 de leur
       hauteur chacun (mesuré sur les fichiers), plus l'écart. */
    --duo-hauteur: min(52svh, calc((100vw - 2 * var(--gouttiere)) / 1.06));
  }
  /* Le rond du panier flotte en bas à droite : le texte s'arrête avant. */
  .entree__scene { padding-block: var(--e-4) calc(var(--e-8) + 3.5rem); }
  .entree__texte { gap: var(--e-4); margin-block-start: var(--e-3); }
  .entree__promesse { font-size: var(--t-xl); }
  .entree__actions { flex-direction: column; gap: var(--e-3); }
  /* Le second appel, à contour, plus bas que le premier : la lecture reste devant. */
  .entree__achat { padding: var(--e-3) var(--e-4); font-size: var(--t-base); letter-spacing: .06em; }
}


/* ═══ 2 · LA PLONGÉE — l'histoire, en trois décors ══════════════════════
   Le résumé du site en trois cartouches, sur trois décors en pleine page :
   on descend du village vers le monde intérieur. Chaque décor avance vers
   le lecteur au défilement (travelling), le cartouche arrive, la carte du
   lieu se pose. Défilement natif : rien n'est épinglé, rien n'est retenu
   (D-95). */

.plongee {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: grid;
  min-block-size: calc(100svh - var(--hauteur-entete));
  padding-block: var(--e-12);
  background: var(--noir);
}

.plongee__image {
  position: absolute;
  inset: 0;
  z-index: -2;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: cover;
  object-position: var(--cadrage, 50% 50%);
}

/* Lisible en haut (le cartouche) et en bas (la carte), ouvert au milieu. */
.plongee::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    var(--voile-moyen) 0%, transparent 28%, transparent 60%, var(--voile-fort) 100%);
}

.plongee--village { --cadrage: 50% 74%; }
.plongee--malik   { --cadrage: 50% 58%; padding-block-end: calc(var(--e-12) + clamp(2.5rem, 8vw, 7rem)); }
.plongee--bascule { --cadrage: 50% 16%; }

.plongee__interieur {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  align-items: start;
}

.plongee__chapitre {
  font-family: var(--titre);
  font-size: var(--t-lg);
  letter-spacing: var(--lettrage-capital);
  text-transform: uppercase;
  color: var(--or);
  text-shadow: 0 0 .6rem var(--noir);
  margin-block-end: var(--e-3);
}

/* Le cartouche : l'encadré de narration d'un manga — papier blanc, trait
   d'encre, capitales. C'est lui qui raconte, pas un paragraphe. */
.plongee__cartouche {
  grid-row: 2;
  justify-self: start;
  max-inline-size: 15ch;
  padding: var(--e-4) var(--e-6);
  background: var(--blanc);
  color: var(--noir);
  border: var(--trait-case) solid var(--noir);
  box-shadow: .5rem .5rem 0 var(--noir);
  font-size: var(--t-4xl);
  line-height: .95;
  rotate: -1.5deg;
}

.plongee__faits {
  grid-row: 3;
  justify-self: start;
  align-self: start;
  margin-block-start: var(--e-6);
  padding: var(--e-2) var(--e-4);
  background: var(--voile-fort);
  border-inline-start: 3px solid var(--or);
  font-weight: 600;
  color: var(--blanc);
}

/* La carte du lieu, avec son nom et sa légende tels qu'imprimés. */
.plongee__lieu {
  grid-row: 4;
  justify-self: end;
  display: flex;
  align-items: flex-end;
  gap: var(--e-4);
  max-inline-size: 30rem;
  margin: 0;
}

.plongee__carte {
  flex: none;
  inline-size: 7rem;
  border-radius: 5px;
  rotate: 6deg;
  box-shadow: 0 .8rem 1.4rem var(--voile-fort);
  transition: rotate var(--duree-action) var(--shonen), scale var(--duree-action) var(--shonen);
}

.plongee__lieu:hover .plongee__carte { rotate: 0deg; scale: 1.06; }

.plongee__lieu figcaption {
  display: grid;
  gap: var(--e-1);
  padding: var(--e-3) var(--e-4);
  background: var(--voile-fort);
  border: var(--filet) solid var(--blanc-filet);
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--texte);
}

.plongee__lieu strong {
  font-family: var(--titre);
  font-size: var(--t-xl);
  font-weight: 400;
  letter-spacing: var(--lettrage-titre);
  text-transform: uppercase;
  color: var(--blanc);
}

.plongee__lieu span {
  font-family: var(--titre);
  font-size: var(--t-xs);
  letter-spacing: var(--lettrage-capital);
  text-transform: uppercase;
  color: var(--or);
}

/* Les personnages qui entrent dans le décor : l'oncle arrive à moto, la
   sagesse flotte devant son palais. Un seul par décor.

   ⚠ **Chacun dans sa propre case de la grille, plus en absolu sur la section.**
   Posés en pourcentage de la section, Malik passait la tête sous le cartouche
   dès que l'écran était large (vu à 1440 × 900, le 8 octobre 2026 — Hamid :
   « la tête de l'oncle Malik invisible derrière le cadre de texte »), et Hikmah
   sortait du bord à droite sur téléphone. La scène commence maintenant APRÈS
   le cartouche (et après la ligne de faits pour Hikmah) : le personnage prend
   la hauteur qui reste, entière, quel que soit l'écran ou la longueur du texte. */
.plongee__scene {
  position: relative;
  z-index: 0;
  align-self: stretch;
  min-block-size: 0;
  pointer-events: none;
}

.plongee__lieu { position: relative; z-index: 1; }

/* Une seule colonne, explicite pour TOUS : la scène occupe des rangées déjà
   prises par le texte, et sans colonne fixée la grille poussait le cartouche
   dans une colonne implicite, à droite (vu le 08/10 sur « … et tout bascule »). */
.plongee__interieur > * { grid-column: 1; }

.plongee__personnage {
  position: absolute;
  z-index: 1;
  inset-block-end: 0;
  block-size: 100%;
  inline-size: auto;
  max-inline-size: none;
  pointer-events: none;
  filter: drop-shadow(0 1rem 1.4rem var(--voile-fort));
}

/* Malik : sous le cartouche, à gauche, jusqu'au bas du décor — derrière la
   carte du lieu. Sa rangée descend dans la marge du bas, moins la part que la
   case penchée suivante recouvre à cet endroit (elle mord peu à gauche). */
.plongee__scene--malik {
  grid-row: 3 / 5;
  grid-column: 1;
  justify-self: start;
  inline-size: 50%;
  margin-block: var(--e-6) calc(-1 * (var(--e-12) + .55 * clamp(2.5rem, 8vw, 7rem)));
}

.plongee__personnage--malik { inset-inline-start: 0; }

/* Hikmah : à droite, au-dessus de la carte, la marge de lévitation comprise
   (il monte de 1,2 rem) — il ne touche ni le haut ni la carte. */
.plongee--bascule .plongee__interieur { grid-template-rows: auto auto auto 1fr auto auto; }
.plongee--bascule .plongee__lieu { grid-row: 5; }
.plongee--bascule .plongee__suite { grid-row: 6; }

.plongee__scene--hikmah {
  grid-row: 1 / 5;
  grid-column: 1;
  justify-self: end;
  inline-size: 42%;
  margin-block: calc(-1 * var(--e-6)) var(--e-4);
}

.plongee__personnage--hikmah {
  inset-inline-end: 0;
  block-size: calc(100% - 1.6rem);
  filter:
    drop-shadow(0 1rem 1.4rem var(--voile-fort))
    drop-shadow(0 0 1.6rem color-mix(in srgb, #E879F9 55%, transparent));
}

/* Sous 64 rem (tablette, téléphone), le texte prend toute la largeur : côte à
   côte, la tête d'Hikmah repassait sous le cartouche (6 %, mesuré à 768 × 1024).
   Chaque personnage prend alors la rangée libre entre le texte et la carte, et
   descend de 3 rem derrière la carte — ses pieds s'y cachent, sa tête jamais :
   sur un petit écran (375 × 667) il gardait sinon 118 px de haut. */
@media (max-width: 63.99rem) {
  .plongee__scene--malik { grid-row: 3; inline-size: 100%; margin-block: var(--e-4) -3rem; }
  .plongee__personnage--malik { inset-inline-start: -4%; }
  .plongee__scene--hikmah { grid-row: 4; inline-size: 100%; margin-block: var(--e-3) -3rem; }
}

/* L'entrée dans le monde intérieur : la seule case penchée de la page — dans
   un manga, la case oblique signale la rupture (« … et tout bascule »). */
.plongee--bascule {
  --biais: clamp(2.5rem, 8vw, 7rem);
  margin-block-start: calc(-1 * var(--biais));
  padding-block-start: calc(var(--e-12) + var(--biais));
  clip-path: polygon(0 var(--biais), 100% 0, 100% 100%, 0 100%);
}

.plongee__biais {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  z-index: 3;
  inline-size: 100%;
  block-size: var(--biais);
  overflow: visible;
  pointer-events: none;
}

.plongee__biais polyline {
  fill: none;
  stroke: var(--blanc);
  stroke-width: 3px;
  vector-effect: non-scaling-stroke;
}

.plongee--bascule .braises { z-index: 1; }

@media (prefers-reduced-motion: no-preference) {
  .plongee__personnage--hikmah { animation: plongee-flotte 7s ease-in-out infinite; }

  @supports (animation-timeline: view()) {
    .plongee__image    { animation: plongee-travelling linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    .plongee__cartouche { animation: plongee-cartouche linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
    .plongee__lieu     { animation: plongee-carte linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
    .plongee__personnage--malik { animation: plongee-moto linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
  }
}

@keyframes plongee-travelling {
  from { scale: 1.18; translate: 0 -4%; }
  to   { scale: 1.02; translate: 0 4%; }
}

@keyframes plongee-cartouche {
  from { opacity: 0; translate: -3rem 0; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes plongee-carte {
  from { opacity: 0; translate: 0 2.5rem; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes plongee-moto {
  from { translate: -70vw 0; }
  to   { translate: 0 0; }
}

@keyframes plongee-flotte {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -1.2rem; }
}

@media (max-width: 47.99rem) {
  .plongee { padding-block: var(--e-8) calc(var(--e-6) + var(--barre-mobile)); }
  .plongee--village { --cadrage: 42% 62%; }
  .plongee--bascule { --cadrage: 50% 24%; }
  .plongee__chapitre { font-size: var(--t-base); }
  .plongee--malik { padding-block-end: calc(var(--e-6) + var(--barre-mobile) + 2.5rem); }
  .plongee__cartouche { font-size: var(--t-3xl); max-inline-size: 17ch; padding: var(--e-3) var(--e-4); }
  .plongee__faits { font-size: var(--t-sm); margin-block-start: var(--e-4); }
  .plongee__lieu { gap: var(--e-3); }
  .plongee__carte { inline-size: 4.75rem; }
  .plongee__lieu figcaption { padding: var(--e-2) var(--e-3); font-size: var(--t-xs); }
  .plongee__lieu strong { font-size: var(--t-lg); }
}


/* ═══ LES DÉCORS DES SECTIONS SOMBRES ════════════════════════════════════
   Retour d'Ismail, le 22 septembre : « sur un fond noir, il n'y a rien ».
   Chaque section qui n'a pas d'image à elle reçoit un lieu du manga, voilé :
   la jungle de Rashmad derrière le tome 1 (sa deuxième page s'y passe), la
   maison de Wira et Hiba derrière les questions. */

.lecture,
.bonus { isolation: isolate; }

.decor {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.decor__image {
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: cover;
  object-position: 50% 40%;
  opacity: .34;
}

.decor::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 70% at 70% 50%, transparent 0%, var(--voile-moyen) 70%),
    linear-gradient(to right, var(--noir) 0%, var(--voile-fort) 30%, transparent 70%);
}

.decor--bonus .decor__image { object-position: 50% 30%; opacity: .28; }

@media (max-width: 47.99rem) {
  .decor__image { opacity: .5; }
  .decor--bonus .decor__image { opacity: .42; }
  .decor::after {
    background: linear-gradient(to bottom, var(--voile-fort) 0%, var(--voile-moyen) 50%, var(--voile-fort) 100%);
  }
}


/* ═══ 3 · LES PERSONNAGES — l'écran de sélection du thème ══════════
   Le composant est celui du thème, à l'identique : balisage, feuille
   (`30-pages.css`) et script (`poseLaSelection`). Ce bloc ne change que sa
   mise en page, pour qu'il tienne dans un écran.

   ⚠ Sur téléphone, le thème range les douze tuiles dans un rail vertical à
   côté de la scène (1 164 px de haut, relevé le 22 septembre) : le nom et le
   texte tombaient sous le portrait, hors de l'écran, et un appui sur une
   tuile du bas changeait une scène qu'on ne voyait plus. Ici, la scène en
   haut (texte à gauche, portrait à droite), les douze visages dessous, en
   deux rangées de six — tous visibles, et la scène reste à l'écran quand on
   touche une tuile. */

.casting {
  background:
    radial-gradient(45% 55% at 20% 40%, var(--rouge-voile), transparent 70%),
    var(--panneau-creux);
}

.casting__interieur { display: grid; gap: var(--e-6); }

.casting__entete {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--e-8);
  align-items: end;
}

.casting__titre { grid-column: 1 / span 6; font-size: var(--t-4xl); }

.casting__chapeau { grid-column: 7 / -1; max-inline-size: 48ch; }

.casting .selection[data-selection] { margin-block-start: 0; }

/* Houta n'est pas un personnage debout : c'est une créature ronde dont l'œil
   et la bouche sont EN BAS de l'image. Posé au sol comme les autres, son
   visage tombait au ras du cadre (Hamid, 08/10/2026 : « regarder Houta »). On
   le soulève : il flotte au milieu de la scène, le visage dégagé. Le sélecteur
   change le `src`, la règle suit sans script. */
.selection__portrait img[src*="/houta."] { block-size: 80%; align-self: center; }

/* Le personnage entier, centré dans son cadre (Hamid, 09/10/2026 : « parfois mal centrés »). La ligne
   de la grille du portrait était en hauteur automatique : l'image y prenait sa hauteur naturelle
   (577 px dans un cadre de 480 pour Wira), débordait, et la scène lui coupait les jambes. */
.casting .selection__portrait { grid-template-rows: minmax(0, 1fr); justify-items: center; }

/* Le prénom ne s'écrit plus en géant derrière le personnage : il était à moitié caché par lui
   (Hamid, 09/10/2026). Il reste une fois, en titre, à côté du portrait (Ismail). */
.casting .geant { display: none; }

/* Les lueurs du thème, sur les protagonistes seulement : Wira et Hiba. Le
   script du thème pose `selection__scene--protagoniste` selon le rôle. */
.casting .selection__scene:not(.selection__scene--protagoniste) .braises { display: none; }

@media (min-width: 60rem) {
  /* Quatre tuiles par rangée au lieu de trois : trois rangées au lieu de
     quatre, et la section tient dans l'écran avec son titre. */
  .casting .selection__grille { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-2); }
  .casting .selection__tuile { aspect-ratio: 4 / 5; }
  .casting .selection__portrait { block-size: min(30rem, calc(100svh - var(--hauteur-entete) - 17rem)); }
  .casting .selection__scene { min-block-size: 0; }
}

@media (max-width: 47.99rem) {
  .casting__interieur { gap: var(--e-4); }
  .casting__entete { grid-template-columns: minmax(0, 1fr); row-gap: var(--e-2); }
  .casting__titre,
  .casting__chapeau { grid-column: 1; }
  .casting__titre { font-size: var(--t-3xl); }
  .casting__chapeau { font-size: var(--t-sm); }

  .casting .selection[data-selection] { grid-template-columns: minmax(0, 1fr); gap: var(--e-3); }

  .casting .selection__scene {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: end;
    min-block-size: 18.5rem;
    padding: var(--e-4);
    --foyer-x: 74%;
    --foyer-y: 56%;
  }

  .casting .selection__portrait { grid-column: 2; grid-row: 1; block-size: 16rem; }

  /* Le texte à côté du portrait, pas par-dessus : le voile du thème, fait
     pour un texte posé SUR le personnage, n'a plus de raison d'être. */
  .casting .selection__texte {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    padding: 0;
    background: none;
  }

  /* Le prénom géant derrière le portrait seulement. En pleine largeur, il
     passait sous les flèches et brouillait « 1 / 12 » (vu à 390). Sa taille
     suit la longueur du nom, comme dans le thème (chasse de Bebas Neue
     ~0,44 em par signe) : « Rashmad » doit tenir là où « Wira » tient. */
  .casting .geant {
    inset-inline: 50% 0;
    inset-block-start: 30%;
    font-size: min(20cqw, calc(100cqw / var(--lettres, 7)));
  }

  .casting .selection__nom { font-size: var(--t-2xl); }
  .casting .selection__description { font-size: var(--t-xs); line-height: 1.5; }
  .casting .selection__pas { gap: var(--e-2); margin-block: 0; }

  .casting .selection__grille {
    order: 0;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--e-1);
    block-size: auto;
    min-block-size: 0;
    overflow: visible;
    mask-image: none;
  }

  .casting .selection__case { display: contents; }
  .casting .selection__tuile { aspect-ratio: 4 / 5; }
  .casting .selection__tuile-nom { padding: .6rem .1rem .15rem; font-size: .55rem; letter-spacing: .02em; }
}


/* ═══ 4 · LA LECTURE — un extrait, deux volumes ══════════════
   L'élément signature. Retour d'Ismail, le 22 septembre : le défilement
   imposé obligeait à lire ceux qui ne le voulaient pas — ceux qui
   connaissent déjà le site, d'abord. La section tient maintenant dans un
   écran : on avance en touchant la planche (ou ←, ou le bouton), on recule
   d'un glissement (ou →). Qui ne veut pas lire fait défiler la page, rien
   ne le retient. Même caméra, même projecteur, même carte : seul le
   déclencheur a changé.

   Sans script, les quatre planches se posent côte à côte, dans le sens du
   manga : l'état guidé n'existe que si le script l'a posé. */

.lecture { background: var(--noir); }

.lecture__interieur {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "entete" "scene" "commandes";
  gap: var(--e-4);
}

.lecture__entete { grid-area: entete; }
.lecture__scene { grid-area: scene; position: relative; }
.lecture__commandes { grid-area: commandes; }

.lecture__titre { font-size: var(--t-4xl); }

/* Deux volumes, deux publics : celui qui découvre, celui qui a lu le tome 1.
   Les onglets n'existent qu'avec le script — sans lui, toutes les pages se
   posent côte à côte. */
.lecture__tomes { display: none; }

.lecture--guidee .lecture__tomes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-2);
  margin-block-start: var(--e-4);
}

.lecture__tome {
  display: grid;
  justify-items: start;
  gap: var(--e-1);
  padding: var(--e-2) var(--e-4);
  background: var(--panneau);
  border: var(--filet) solid var(--acier);
  color: var(--texte);
  text-align: start;
  cursor: pointer;
  transition: border-color var(--duree-action) var(--sortie), background-color var(--duree-action) var(--sortie);
}

.lecture__tome-nom {
  font-family: var(--titre);
  font-size: var(--t-xl);
  line-height: 1;
  letter-spacing: var(--lettrage-titre);
  text-transform: uppercase;
  color: var(--blanc);
}

.lecture__tome-pour { font-size: var(--t-xs); color: var(--gris); }

.lecture__tome:hover { border-color: var(--or-filet); }
.lecture__tome:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }

.lecture__tome[aria-pressed="true"] {
  border-color: var(--or);
  background: color-mix(in srgb, var(--or) 12%, var(--panneau));
}

.lecture__tome[aria-pressed="true"] .lecture__tome-pour { color: var(--or); }

.lecture__resume {
  margin-block-start: var(--e-3);
  max-inline-size: 40ch;
  font-size: var(--t-sm);
}

.lecture__toile {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  direction: rtl;
  gap: var(--e-4);
}

.lecture:not(.lecture--guidee) .lecture__page {
  inline-size: 100%;
  filter: drop-shadow(0 1.4rem 2rem var(--voile-fort));
}

/* ⚠ Le script du lecteur arrive en différé : avant lui, les 16 planches du
   tome 1 étaient toutes posées, et le navigateur les chargeait toutes dès que
   la section était proche — 5,5 Mo au téléphone sur chaque fiche produit et sur
   « Lire le début » (mesuré le 9 octobre 2026). Une image masquée n'est pas
   chargée : on n'en montre que la première double page en attendant le script,
   qui charge ensuite la double courante et la suivante, pas plus. */
.lecture:not(.lecture--guidee) .lecture__page:nth-child(n+3) { display: none; }

.lecture__projecteur,
.lecture__bandeau,
.lecture__commandes { display: none; }

@media (min-width: 60rem) {
  .lecture__interieur {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    grid-template-areas:
      "entete    scene"
      ".         scene"
      "commandes scene";
    column-gap: var(--e-12);
  }
}

/* ── L'état guidé ─────────────────────────────────────────────────────── */

/* La hauteur est posée, pas déduite : c'est elle qui donne à la rangée
   `1fr` de la scène une taille à remplir. */
.lecture--guidee .lecture__interieur {
  block-size: calc(100svh - var(--hauteur-entete) - 2 * var(--e-12));
}

/* `touch-action: pan-y` : le glissement vertical fait défiler la page comme
   partout ailleurs ; seul le geste horizontal appartient à la planche. */
.lecture--guidee .lecture__scene {
  min-block-size: 0;
  overflow: hidden;
  border: var(--filet) solid var(--acier);
  background: radial-gradient(70% 60% at 50% 45%, var(--panneau), var(--noir) 75%);
  cursor: pointer;
  touch-action: pan-y;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.lecture--guidee .lecture__scene:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }

/* La toile est posée à la taille réelle des fichiers : une échelle de 1 est
   le pixel du dessin, jamais au-delà (même borne que le lecteur du thème). */
.lecture--guidee .lecture__toile {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 1;
  display: flex;
  flex-direction: row-reverse;
  gap: 0;
  inline-size: max-content;
  direction: ltr;
  transform-origin: 0 0;
  transform: translate(var(--camera-x, 0px), var(--camera-y, 0px)) scale(var(--camera-echelle, .25));
  transition:
    transform var(--duree-camera) var(--camera),
    translate var(--duree-page) var(--sortie),
    opacity   var(--duree-page) var(--sortie);
}

.lecture--guidee .lecture__page {
  flex: none;
  max-inline-size: none;
  background: var(--blanc);
  pointer-events: none;
}

/* Deux doubles pages : 22 | 21, puis 24 | 23. Le pli entre deux pages d'une
   même double, une vraie gouttière entre deux doubles. */
/* Une seule double page à la fois : les autres ne sont ni posées, ni
   décodées. Le pli entre ses deux pages suffit à dire « livre ouvert ». */
.lecture--guidee .lecture__page:not(.est-montree) { display: none; }

/* On tourne la page : la double s'en va vers la droite quand on avance — on
   lit vers la gauche —, la suivante arrive de la gauche. */
.lecture--guidee .lecture__toile--avance,
.lecture--guidee .lecture__toile--revient-arriere { translate: 3rem 0; opacity: 0; }

.lecture--guidee .lecture__toile--recule,
.lecture--guidee .lecture__toile--revient { translate: -3rem 0; opacity: 0; }

/* Le projecteur : une fenêtre, et tout le reste dans l'ombre. Il suit la
   caméra au même tempo, sinon la lumière arrive avant la case.
   ⚠ À 80 %, les bulles voisines se lisaient encore : il faut 92 %. */
.lecture--guidee .lecture__projecteur {
  display: block;
  position: absolute;
  z-index: 2;
  inset-inline-start: var(--projecteur-x, 0px);
  inset-block-start: var(--projecteur-y, 0px);
  inline-size: var(--projecteur-l, 100%);
  block-size: var(--projecteur-h, 100%);
  box-shadow:
    0 0 0 var(--filet) var(--blanc-filet),
    0 0 0 100vmax color-mix(in srgb, var(--noir) 92%, transparent);
  pointer-events: none;
  transition:
    inset-inline-start var(--duree-camera) var(--camera),
    inset-block-start  var(--duree-camera) var(--camera),
    inline-size        var(--duree-camera) var(--camera),
    block-size         var(--duree-camera) var(--camera);
}

/* ── Le bandeau du haut : l'invite au départ, puis le sens de lecture ──── */

.lecture--guidee .lecture__bandeau {
  display: grid;
  justify-items: center;
  position: absolute;
  z-index: 3;
  inset-block-start: var(--e-3);
  inset-inline: var(--e-3);
  pointer-events: none;
}

.lecture__invite,
.lecture__sens,
.lecture__dernier {
  grid-area: 1 / 1;
  align-self: start;
  padding: var(--e-2) var(--e-4);
  background: var(--noir);
  border: var(--filet) solid var(--acier);
  font-size: var(--t-sm);
  font-weight: 600;
  text-align: center;
  color: var(--blanc);
  opacity: 0;
  transition: opacity var(--duree-entree) var(--sortie);
}

/* Le sens de lecture est dit une fois, au moment exact où la caméra part vers
   la gauche — là où la question se pose, pas en tête de page (brief, § 0). */
.lecture__sens::before,
.lecture__invite::before,
.lecture__dernier::before { content: '\2190\00a0'; color: var(--rouge); }

/* La dernière case se signale : sans elle, rien ne disait qu'on était au
   bout de l'extrait (Ismail, 22 septembre). */
.lecture__dernier { border-color: var(--or); }

.lecture--sens .lecture__sens,
.lecture--debut .lecture__invite,
.lecture--dernier .lecture__dernier { opacity: 1; }

/* Le mot juste pour le bon geste : « touchez » au doigt, « cliquez » à la
   souris. */
.lecture__souris { display: none; }

@media (hover: hover) and (pointer: fine) {
  .lecture__doigt { display: none; }
  .lecture__souris { display: inline; }
}

/* ── La fin de l'extrait : la suite est dans le tome ──────────────────────
   Le même geste que la dernière page du lecteur du thème : le volume posé
   au moment exact où le lecteur se demande « et le reste ? » — c'est là, et
   seulement là, que la couverture du tome 2 sert. Un seul bouton plein. */

.lecture__fin {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--e-3);
  padding: var(--e-6);
  background: color-mix(in srgb, var(--noir) 86%, transparent);
  text-align: center;
  cursor: default;
  animation: lecture-fin var(--duree-entree) var(--sortie) both;
}

.lecture__fin[hidden] { display: none; }

@keyframes lecture-fin {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.lecture__fin-volume {
  inline-size: min(70%, 17rem);
  margin-block-end: var(--e-2);
  filter: drop-shadow(0 1.2rem 1.6rem var(--voile-fort));
  animation: lecture-fin-volume var(--duree-debordement) var(--shonen) both;
}

@keyframes lecture-fin-volume {
  from { opacity: 0; translate: 0 12%; scale: .92; }
  to   { opacity: 1; translate: 0 0; scale: 1; }
}

.lecture__fin-mention {
  font-family: var(--titre);
  font-size: var(--t-lg);
  letter-spacing: var(--lettrage-capital);
  text-transform: uppercase;
  color: var(--rouge);
}

.lecture__fin-titre {
  font-family: var(--titre);
  font-size: var(--t-3xl);
  line-height: 1;
  letter-spacing: var(--lettrage-titre);
  text-transform: uppercase;
  color: var(--blanc);
}

.lecture__fin-texte { max-inline-size: 34ch; font-size: var(--t-sm); }

.lecture__fin-action { margin-block-start: var(--e-2); }

.lecture__fin-autres {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 var(--e-6);
}

.lecture__reprendre {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.lecture__reprendre::after { content: '\21BA'; }

.lecture__vers {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.lecture__vers::after { content: '\2190'; }
.lecture__vers:hover::after { translate: -3px 0; }
.lecture__reprendre:hover::after { translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  .lecture__fin,
  .lecture__fin-volume { animation: none; }
}

/* ── Les commandes : avancer, reculer, et où l'on en est ──────────────── */

.lecture--guidee .lecture__commandes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
}

/* Comme dans le lecteur du thème : « suivante » à gauche, avec sa flèche vers
   la gauche — on lit de droite à gauche. */
.lecture__aller {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-block-size: 44px;
  min-inline-size: 44px;
  padding: var(--e-2) var(--e-4);
  border: var(--filet) solid var(--acier);
  background: var(--panneau);
  color: var(--blanc);
  font-family: var(--titre);
  font-size: var(--t-lg);
  letter-spacing: var(--lettrage-capital);
  text-transform: uppercase;
  cursor: pointer;
  transition:
    border-color var(--duree-action) var(--sortie),
    color        var(--duree-action) var(--sortie),
    opacity      var(--duree-action) var(--sortie);
}

.lecture__aller--suivante { border-color: var(--rouge); }

.lecture__aller .lecture__fleche { color: var(--rouge); }

.lecture__aller:hover:not(:disabled),
.lecture__aller:focus-visible { border-color: var(--or); color: var(--or); }

.lecture__aller:disabled { opacity: .35; cursor: default; }

.lecture__repere {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  column-gap: var(--e-3);
  row-gap: var(--e-1);
}

/* Où l'on en est dans l'extrait : seize pages, c'est long — la barre le dit
   sans un chiffre de plus. */
.lecture__progres {
  grid-column: 1 / -1;
  display: block;
  block-size: 3px;
  background: var(--acier);
}

.lecture__progres > span {
  display: block;
  block-size: 100%;
  inline-size: calc(var(--progres, 0) * 100%);
  background: var(--rouge);
  transition: inline-size var(--duree-action) var(--sortie);
}

.lecture__compte {
  font-family: var(--titre);
  font-size: var(--t-lg);
  letter-spacing: var(--lettrage-capital);
  color: var(--texte);
  font-variant-numeric: tabular-nums;
}

/* La carte : les quatre planches en miniature, dans l'ordre du manga, et la
   case lue qui s'allume. C'est elle qui montre qu'on lit de droite à gauche. */
.lecture__carte {
  display: flex;
  flex-direction: row-reverse;
  gap: var(--e-1);
}

.lecture__miniature {
  position: relative;
  inline-size: 2.25rem;
  opacity: .45;
  transition: opacity var(--duree-action) var(--sortie);
}

.lecture__miniature img { inline-size: 100%; }

.lecture--guidee .lecture__miniature:not(.est-montree) { display: none; }

.lecture__miniature.est-lue { opacity: 1; }

.lecture__miniature-cadre {
  position: absolute;
  inset-inline-start: var(--cadre-x, 0%);
  inset-block-start: var(--cadre-y, 0%);
  inline-size: var(--cadre-l, 100%);
  block-size: var(--cadre-h, 100%);
  outline: var(--trait-case) solid var(--rouge);
  outline-offset: -1px;
  transition:
    inset-inline-start var(--duree-camera) var(--camera),
    inset-block-start  var(--duree-camera) var(--camera),
    inline-size        var(--duree-camera) var(--camera),
    block-size         var(--duree-camera) var(--camera);
}

/* Sur grand écran, les commandes vivent dans la colonne de gauche : le
   repère sur sa ligne, les deux boutons dessous. */
@media (min-width: 60rem) {
  .lecture--guidee .lecture__repere { order: -1; flex-basis: 100%; justify-content: start; }
  .lecture__miniature { inline-size: 3rem; }
}

.lecture--instant .lecture__toile,
.lecture--instant .lecture__projecteur,
.lecture--instant .lecture__miniature-cadre { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .lecture--guidee .lecture__toile,
  .lecture--guidee .lecture__projecteur,
  .lecture__miniature-cadre { transition: none; }
}

@media (max-width: 47.99rem) {
  .lecture__interieur { gap: var(--e-3); }
  .lecture__titre { font-size: var(--t-3xl); }
  .lecture__resume { margin-block-start: var(--e-2); font-size: var(--t-xs); }
  .lecture:not(.lecture--guidee) .lecture__toile { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .lecture--guidee .lecture__interieur {
    block-size: calc(100svh - var(--hauteur-entete) - 2 * var(--e-8) - var(--barre-mobile));
  }

  /* Au pouce, les flèches suffisent : leur nom reste pour les lecteurs
     d'écran, et la place va à la carte. */
  .lecture__aller-mot {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .lecture__aller { padding: 0; }
  .lecture__miniature { inline-size: 1.75rem; }
  .lecture__compte { font-size: var(--t-base); }
}


/* ═══ 5 · L'OFFRE — « ce qui l'accompagne, seulement ici » ══════════════
   Le tome se trouve en librairie ; les packs, non (D-01). Chaque pack montre
   ce qu'il contient avec les vrais objets — les visuels `pack-*` disent
   encore « précommandez » (D-05) et restent à l'écart. L'image grossit avec
   le contenu : la différence de prix se VOIT. Un seul bouton plein (D-09). */

.offre {
  background:
    radial-gradient(50% 60% at 30% 70%, var(--or-voile), transparent 70%),
    var(--panneau-creux);
}

.offre__interieur { display: grid; gap: var(--e-6); }

.offre__entete {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--e-8);
  align-items: end;
}

.offre__titre { grid-column: 1 / span 7; font-size: var(--t-3xl); }

.offre__chapeau { grid-column: 8 / -1; max-inline-size: 44ch; }

.offre__choix { display: none; }

.offre__packs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--e-6);
  align-items: stretch;
}

.coffret {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: var(--e-2);
  padding: var(--e-4) var(--e-6) var(--e-6);
  background: var(--panneau);
  border: var(--filet) solid var(--acier);
  clip-path: var(--decoupe-carte);
  transition: border-color var(--duree-action) var(--sortie), translate var(--duree-action) var(--shonen);
}

.coffret:hover { border-color: var(--or-filet); translate: 0 -4px; }

.coffret--vedette {
  border: var(--trait-case) solid var(--or);
  background: color-mix(in srgb, var(--or) 7%, var(--panneau));
}

.coffret__mention {
  position: absolute;
  inset-block-start: var(--e-4);
  inset-inline-end: var(--e-4);
  z-index: 2;
  padding: var(--e-1) var(--e-3);
  background: var(--or);
  color: var(--noir);
  font-family: var(--titre);
  letter-spacing: var(--lettrage-capital);
  text-transform: uppercase;
  transform: skewX(var(--cisaille));
}

.coffret__mention > span { display: block; transform: skewX(var(--contre-cisaille)); }

.coffret__mention--rouge { background: var(--rouge-surface); color: var(--blanc); }

/* La table : les objets du pack, posés. Les positions sont des pourcentages
   de la table, pour que la composition tienne à toutes les largeurs. */
.coffret__objets {
  position: relative;
  aspect-ratio: 16 / 11;
  margin: calc(-1 * var(--e-2)) calc(-1 * var(--e-2)) 0;
}

.objet {
  position: absolute;
  block-size: auto;
  filter: drop-shadow(0 .6rem .8rem var(--voile-fort));
  transform-origin: 50% 100%;
  transition: rotate var(--duree-action) var(--shonen), translate var(--duree-action) var(--shonen);
}

.objet--carte { border-radius: 4px; }

.coffret:hover .objet--carte { translate: 0 -6px; }

/* Les volumes : le tome 2 dans chaque pack, le tome 1 derrière lui quand il y
   est. Les cartes Sagesse sont les vraies (SP 22/30, SP 12/30). */
.objet--t2 { inset-inline-start: 0; inset-block-end: 4%; inline-size: 74%; }
.objet--t1 { inset-inline-start: 0; inset-block-start: 0; inline-size: 56%; rotate: -5deg; }

.coffret--plus .objet--t2,
.coffret--ultime .objet--t2 { inset-inline-start: 10%; inset-block-end: 0; inline-size: 64%; }

.objet--sagesse { inset-inline-end: 4%; inset-block-end: 14%; inline-size: 25%; rotate: 8deg; }
.objet--sagesse + .objet--sagesse { inset-inline-end: 0; inset-block-end: 26%; rotate: 17deg; }

/* L'éventail des cinq cartes Jumbo pivote sur son pied. Wira et Hiba y sont
   symétriques, de part et d'autre du maître : aucun des deux ne couvre
   l'autre. */
.objet--jumbo {
  inset-inline-end: 9%;
  inset-block-end: 16%;
  inline-size: 23%;
  rotate: var(--eventail, 0deg);
}

.coffret:hover .objet--jumbo { rotate: calc(var(--eventail, 0deg) * 1.25); }

/* Le paquet des trente cartes Collector, vu de dos : trois dos décalés. */
.objet--paquet {
  inset-inline-end: 1%;
  inset-block-end: 0;
  inline-size: 19%;
  translate: calc(var(--pile, 0) * 3px) calc(var(--pile, 0) * -3px);
}

/* Les marque-pages, glissés derrière les tomes : on n'en voit que le haut, qui
   dépasse du volume — comme dans un livre. Le second penche de l'autre côté.
   Le t-shirt du Collector Ultime est au fond de la table, derrière tout le
   reste (Hamid, 08/10/2026 : « mettre tous les articles »). */
.objet--marque {
  inset-inline-start: 42%;
  inset-block-end: 62%;
  inline-size: 9%;
  rotate: -6deg;
}

.objet--marque-2 { inset-inline-start: 50%; inset-block-end: 59%; rotate: 9deg; }

/* Deux tomes : les marque-pages sortent du tome 2, à droite du tome 1. */
.coffret--plus .objet--marque,
.coffret--ultime .objet--marque { inset-inline-start: 55%; inset-block-end: 50%; }
.coffret--plus .objet--marque-2,
.coffret--ultime .objet--marque-2 { inset-inline-start: 62%; inset-block-end: 47%; }

.coffret:hover .objet--marque { translate: 0 -5px; }

/* Les deux posters A3 (Gold, Ultime) : les couvertures des tomes 1 et 2 à plat, au fond de la table,
   derrière l'éventail — on en voit le haut, assez pour reconnaître les deux couvertures. */
.objet--poster { inline-size: 23%; border-radius: 2px; }
.coffret--gold .objet--poster-1 { inset-inline-end: 23%; inset-block-start: -3%; rotate: -8deg; }
.coffret--gold .objet--poster-2 { inset-inline-end: 3%; inset-block-start: -1%; rotate: 7deg; }
.coffret--ultime .objet--poster-1 { inset-inline-start: 36%; inset-block-start: 0; inline-size: 19%; rotate: -8deg; }
.coffret--ultime .objet--poster-2 { inset-inline-start: 50%; inset-block-start: 2%; inline-size: 19%; rotate: 6deg; }

/* Le marque-page jaune glisse sous le bleu, comme sur le visuel officiel : son pied, caché par le bleu
   sur la photo d'origine, l'est aussi ici (le bleu devant, le tome 2 dessous). */
.coffret--plus .objet--marque-jaune,
.coffret--ultime .objet--marque-jaune { inset-inline-start: 58%; inset-block-end: 50%; rotate: 7deg; }

/* Le t-shirt, au fond, en haut à droite : son haut dépasse de l'éventail. */
.objet--tshirt {
  inset-inline-end: -4%;
  inset-block-start: 6%;
  inline-size: 52%;
  rotate: 8deg;
  /* Bleu nuit sur fond sombre : un liseré clair dessine sa silhouette. */
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, .6)) drop-shadow(0 .6rem .8rem var(--voile-fort));
}

.coffret__nom {
  font-family: var(--titre);
  font-size: var(--t-xl);
  line-height: 1;
  letter-spacing: var(--lettrage-titre);
  text-transform: uppercase;
  color: var(--blanc);
}

.coffret__prix { display: block; margin-block-start: var(--e-1); color: var(--or); font-size: var(--t-2xl); }

.coffret__contenu {
  display: grid;
  align-content: start;
  gap: var(--e-1);
  font-size: var(--t-sm);
}

.coffret__contenu li { padding-inline-start: var(--e-4); position: relative; }

.coffret__contenu li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .6em;
  inline-size: .45rem;
  block-size: .45rem;
  background: var(--rouge);
  transform: skewX(var(--cisaille));
}

.coffret .bouton { justify-self: start; margin-block-start: var(--e-2); }

.offre__gages {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-8);
  font-size: var(--t-sm);
  color: var(--gris);
}

.offre__gages strong { color: var(--blanc); font-weight: 600; }

/* La livraison offerte, en tête de l'offre (Hamid, 08/10/2026) : une bande à
   filet d'or, lue avant les prix — c'est elle qui fait passer de 25 à 35 €. */
.offre__livraison {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e-1) var(--e-4);
  padding: var(--e-3) var(--e-4);
  border: var(--filet) solid var(--or-filet);
  border-inline-start: 4px solid var(--or);
  background: var(--or-voile);
}

.offre__livraison strong {
  font-family: var(--titre);
  font-size: var(--t-xl);
  font-weight: 400;
  letter-spacing: var(--lettrage-titre);
  text-transform: uppercase;
  color: var(--or);
}

.offre__livraison span { font-size: var(--t-sm); color: var(--texte); }

/* Les tomes seuls, sous les packs (Hamid, 08/10/2026) : visibles sans geste,
   plus petits que les packs — un choix de plus, pas un concurrent. */
.offre__tomes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--e-4) var(--e-8);
  align-items: center;
  padding-block-start: var(--e-6);
  border-block-start: var(--filet) solid var(--acier);
}

.offre__tomes-titre {
  font-family: var(--titre);
  font-size: var(--t-2xl);
  font-weight: 400;
  letter-spacing: var(--lettrage-titre);
  text-transform: uppercase;
  color: var(--blanc);
}

.offre__tomes-chapeau { margin-block-start: var(--e-1); font-size: var(--t-sm); color: var(--gris); }

.offre__tomes-liste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-4);
}

.tome-seul {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  column-gap: var(--e-4);
  row-gap: var(--e-1);
  padding: var(--e-3) var(--e-4);
  background: var(--panneau);
  border: var(--filet) solid var(--acier);
  transition: border-color var(--duree-action) var(--sortie);
}

.tome-seul:hover { border-color: var(--or-filet); }

.tome-seul__image { grid-row: 1 / -1; align-self: center; }
.tome-seul__image img { inline-size: 100%; block-size: auto; filter: drop-shadow(0 .5rem .7rem var(--voile-fort)); }

.tome-seul__nom {
  font-family: var(--titre);
  font-size: var(--t-xl);
  font-weight: 400;
  letter-spacing: var(--lettrage-titre);
  text-transform: uppercase;
  line-height: 1;
}

.tome-seul__nom a { color: var(--blanc); text-decoration: none; }
.tome-seul__nom a:hover { color: var(--or); }

.tome-seul__prix { margin-inline-start: var(--e-2); color: var(--or); }

.tome-seul__phrase { font-size: var(--t-sm); color: var(--gris); }

.tome-seul__bouton { justify-self: start; padding: var(--e-2) var(--e-4); font-size: var(--t-sm); }

@media (max-width: 71.99rem) {
  .offre__tomes { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 47.99rem) {
  .offre__livraison { padding: var(--e-2) var(--e-3); }
  .offre__livraison strong { font-size: var(--t-lg); }
  .offre__livraison span { font-size: var(--t-xs); }

  .offre__tomes { padding-block-start: var(--e-4); gap: var(--e-3); }
  .offre__tomes-titre { font-size: var(--t-xl); }
  .offre__tomes-chapeau { font-size: var(--t-xs); }
  .offre__tomes-liste { gap: var(--e-2); }

  /* Deux colonnes étroites : le volume en haut, puis le nom, le prix, le bouton. */
  .tome-seul { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; padding: var(--e-3); }
  .tome-seul__image { grid-row: auto; justify-self: center; inline-size: 70%; }
  .tome-seul__nom { font-size: var(--t-lg); }
  .tome-seul__prix { display: block; margin: var(--e-1) 0 0; }
  .tome-seul__phrase { font-size: var(--t-xs); }
  .tome-seul__bouton { justify-self: stretch; text-align: center; padding-inline: var(--e-2); font-size: var(--t-xs); }
}

@media (max-width: 71.99rem) and (min-width: 48rem) {
  .offre__packs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Sur téléphone, les quatre packs l'un sous l'autre, tous ouverts : plus d'onglets à toucher pour
   voir le suivant (Hamid, 09/10/2026 : « les articles sur une seule page »). Les onglets et la fourche
   (« je découvre / j'ai lu le tome 1 », alignée sur eux) se retirent. */
@media (max-width: 47.99rem) {
  .offre__fourche { display: none; }
  .offre__interieur { gap: var(--e-4); }
  .offre__entete { grid-template-columns: minmax(0, 1fr); row-gap: var(--e-2); }
  .offre__titre,
  .offre__chapeau { grid-column: 1; }
  .offre__titre { font-size: var(--t-2xl); }
  .offre__chapeau { font-size: var(--t-sm); }

  .offre__choix {
    display: none;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--e-1);
    margin: 0;
    padding: 0;
    border: 0;
  }

  .offre__choix label {
    display: grid;
    place-items: center;
    min-block-size: 3.5rem;
    padding: var(--e-1);
    background: var(--panneau);
    border: var(--filet) solid var(--acier);
    font-family: var(--titre);
    font-size: var(--t-sm);
    line-height: 1.05;
    letter-spacing: .04em;
    text-align: center;
    text-transform: uppercase;
    color: var(--texte);
    cursor: pointer;
    transition: border-color var(--duree-action) var(--sortie), background-color var(--duree-action) var(--sortie);
  }

  .offre__choix label span { color: var(--or); font-size: var(--t-base); }

  .offre__choix input:checked + label { border-color: var(--or); background: color-mix(in srgb, var(--or) 12%, var(--panneau)); color: var(--blanc); }
  .offre__choix input:focus-visible + label { outline: 2px solid var(--or); outline-offset: 2px; }

  .offre__packs { grid-template-columns: minmax(0, 1fr); }

  .coffret { display: grid; grid-template-columns: 44% minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: var(--e-4); padding: var(--e-4); }
  .coffret__objets { grid-row: 1 / span 2; margin: 0; align-self: center; }
  .coffret__nom { font-size: var(--t-xl); }
  .coffret__prix { font-size: var(--t-2xl); }
  .coffret .bouton { grid-column: 1 / -1; justify-self: stretch; }
  .coffret__mention { inset-block-start: var(--e-2); inset-inline-start: var(--e-2); inset-inline-end: auto; font-size: var(--t-xs); }

  .offre:has(#vu-decouverte:checked) .coffret--decouverte,
  .offre:has(#vu-plus:checked) .coffret--plus,
  .offre:has(#vu-gold:checked) .coffret--gold,
  .offre:has(#vu-ultime:checked) .coffret--ultime { display: grid; }

  .offre__gages { gap: var(--e-1) var(--e-4); font-size: var(--t-xs); }
}


/* ─── La fourche et la preuve (V5) ───────────────────────────────────────
   La même question que la lecture — « je découvre » ou « j'ai lu le tome 1 » —
   reposée au-dessus des packs : chaque moitié couvre les deux packs de son
   chemin. Même gouttière que la grille qu'elle coiffe, donc alignée au pixel.
   Entre 48 et 72 rem, les packs passent en 2 × 2 : la fourche mentirait, le
   chapeau porte seul l'information. La preuve est collée à la demande. */

.offre__titre > span { display: block; }

.offre__fourche {
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-6);
  margin-block-end: calc(var(--e-2) - var(--e-6));
}

.offre__fourche p {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--e-2);
  margin: 0;
  padding-block-start: var(--e-2);
  border-block-start: var(--trait-case) solid var(--acier);
  font-size: var(--t-sm);
  line-height: 1.2;
  color: var(--gris);
}

.offre__fourche p:first-child { border-block-start-color: var(--or); }

.offre__fourche strong {
  font-family: var(--titre);
  font-size: var(--t-xl);
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--blanc);
}

.offre__preuve {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e-2) var(--e-8);
  margin: 0;
  font-size: var(--t-sm);
  color: var(--texte);
}

.offre__preuve strong { color: var(--or); font-weight: 600; }

@media (min-width: 72rem) {
  .offre__fourche { display: grid; }
}

/* L'offre tient dans un écran : marges resserrées, et la preuve colle aux
   gages — elles forment un seul bloc sous les boutons. */
@media (min-width: 48rem) {
  .offre.ecran { padding-block: var(--e-8); }
  .offre__interieur { gap: var(--e-4); }
  .offre__fourche { margin-block-end: calc(var(--e-2) - var(--e-4)); }
  .offre__preuve { margin-block-start: calc(var(--e-3) - var(--e-4)); }
  /* Les gages lisent les réglages de livraison (thème) : un peu plus longs
     que la maquette, ils passaient sur deux lignes à 1440. */
  .offre__gages { column-gap: var(--e-6); }
}

.offre__gages { margin-block-start: calc(var(--e-2) - var(--e-4)); }

@media (max-width: 47.99rem) {
  .offre__fourche { display: none; } /* les packs sont empilés : la fourche des onglets n'a plus d'objet */
  .offre__fourche p { flex-direction: column; gap: 0; padding-block-start: var(--e-1); font-size: var(--t-xs); line-height: 1.25; }
  .offre__fourche strong { font-size: var(--t-base); }
  .offre__preuve { flex-direction: column; gap: var(--e-1); font-size: var(--t-xs); }
  /* Ici la barre se replie (un bouton du contenu est à l'écran) : sa
     réserve ne servirait qu'à pousser l'offre hors de l'écran. */
  .offre.ecran { padding-block-end: var(--e-8); }
  .offre__interieur { gap: var(--e-3); }
  .offre__gages { margin-block-start: calc(var(--e-1) - var(--e-3)); }
  .coffret__mention { letter-spacing: .08em; }
  .offre__gages { row-gap: 0; }
}

/* Petit écran (360 × 780) : « Je découvre » et « J'ai lu le tome 1 » se
   suffisent — ce sont les mots des onglets de la lecture. */
@media (max-width: 47.99rem) and (max-height: 50rem) {
  .offre__fourche span { display: none; }
}


/* ═══ 6 · LES QUESTIONS — « le coin des questions » ════════════════════
   Les pages bonus de fin de volume : le sens de lecture, l'âge, la violence
   sont des objections, traitées ici — là où la question se pose, jamais en
   tête de page. Un `<details>` natif : zéro script, rien qui casse. */

.bonus {
  background:
    radial-gradient(40% 50% at 12% 80%, var(--rouge-voile), transparent 70%),
    var(--noir);
}

.bonus__interieur {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--e-8);
  align-items: center;
}

.bonus__entete {
  grid-column: 1 / span 4;
  position: relative;
  display: grid;
  gap: var(--e-4);
  justify-items: start;
}

.bonus__entete .sceau { margin-block-end: var(--e-2); }

.bonus__titre { font-size: var(--t-4xl); }

.bonus__hote {
  inline-size: min(100%, 12rem);
  margin-block-start: var(--e-4);
  filter: drop-shadow(0 1rem 1.4rem var(--voile-fort));
}

.bonus__liste {
  grid-column: 5 / -1;
  display: grid;
  border-block-start: var(--filet) solid var(--acier);
}

.question { border-block-end: var(--filet) solid var(--acier); }

.question summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  min-block-size: 3.5rem;
  padding-block: var(--e-3);
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--blanc);
  cursor: pointer;
  list-style: none;
  transition: color var(--duree-action) var(--sortie);
}

.question summary::-webkit-details-marker { display: none; }

.question summary::after {
  content: '+';
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  border: var(--filet) solid var(--acier);
  font-family: var(--titre);
  font-size: var(--t-xl);
  color: var(--rouge);
  transform: skewX(var(--cisaille));
  transition: rotate var(--duree-action) var(--shonen), border-color var(--duree-action) var(--sortie);
}

.question summary:hover { color: var(--or); }
.question summary:hover::after { border-color: var(--rouge); }
.question[open] summary::after { content: '\2212'; }

.question p {
  max-inline-size: 60ch;
  padding-block-end: var(--e-4);
}

.a-valider {
  display: inline-block;
  margin-inline-start: var(--e-1);
  padding: 0 var(--e-2);
  background: var(--alerte);
  color: var(--noir);
  font-size: var(--t-xs);
  font-weight: 600;
  text-transform: uppercase;
}

.bonus__suite { margin-block-start: var(--e-4); }

@media (max-width: 47.99rem) {
  .bonus__interieur { grid-template-columns: minmax(0, 1fr); row-gap: var(--e-6); }
  .bonus__entete,
  .bonus__liste { grid-column: 1; }
  .bonus__entete { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--e-4); }
  .bonus__entete > :not(.bonus__hote) { grid-column: 1; }
  .bonus__entete .sceau { inline-size: 3.5rem; block-size: 3.5rem; font-size: var(--t-xs); }
  .bonus__titre { font-size: var(--t-2xl); }
  .bonus__chapeau { font-size: var(--t-sm); }
  .bonus__hote { grid-column: 2; grid-row: 1 / span 3; inline-size: 5.5rem; margin: 0; }
  .question summary { min-block-size: 2.75rem; padding-block: var(--e-2); font-size: var(--t-base); }
  .bonus__suite { margin-block-start: var(--e-2); }
}


/* ═══ 7 · LA DERNIÈRE PAGE — « À suivre » ════════════════════════════════
   La dernière page d'un tome : l'antagoniste sous la lune, la promesse qu'il
   y a une suite, l'appel. Et ce qu'on met au dos d'un volume : ce qu'on en
   dit, et qui l'a fait — seulement les preuves qu'on possède (D-19). */

.fin {
  isolation: isolate;
  overflow: clip;
  align-items: end;
}

.fin__fond {
  position: absolute;
  inset: 0;
  z-index: -2;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 50% 28%;
}

.fin__voile {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, var(--voile-fort) 0%, var(--voile-moyen) 36%, transparent 60%),
    linear-gradient(0deg, var(--noir) 0%, transparent 38%);
}

.fin .braises { z-index: -1; }

.fin__interieur { display: grid; gap: var(--e-6); justify-items: start; }

.fin__titre {
  font-size: var(--t-enorme);
  line-height: .85;
  color: transparent;
  -webkit-text-stroke: var(--trait-case) var(--blanc);
}

.fin__texte {
  max-inline-size: 22ch;
  font-family: var(--titre);
  font-size: var(--t-3xl);
  line-height: 1.02;
  letter-spacing: var(--lettrage-titre);
  text-transform: uppercase;
  color: var(--blanc);
}

.fin__avis {
  display: grid;
  gap: var(--e-1);
  max-inline-size: 34rem;
  margin: var(--e-2) 0 0;
  padding-inline-start: var(--e-4);
  border-inline-start: 3px solid var(--or);
}

.fin__avis p {
  font-family: var(--titre);
  font-size: var(--t-xl);
  line-height: 1.1;
  letter-spacing: var(--lettrage-titre);
  text-transform: uppercase;
  color: var(--blanc);
}

.fin__avis figcaption { font-size: var(--t-xs); color: var(--gris); }
.fin__avis figcaption strong { color: var(--or); font-weight: 600; }

.fin__preuves {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-6);
  max-inline-size: 44rem;
  font-size: var(--t-sm);
  color: var(--texte);
}

.fin__preuves strong {
  font-family: var(--titre);
  font-size: var(--t-lg);
  font-weight: 400;
  letter-spacing: var(--lettrage-titre);
  color: var(--blanc);
}

.fin__credits {
  max-inline-size: 48rem;
  padding-block-start: var(--e-3);
  border-block-start: var(--filet) solid var(--blanc-filet);
  font-size: var(--t-xs);
  color: var(--gris);
}

.fin__credits strong { color: var(--texte); font-weight: 600; }
.fin__credits a { color: var(--or); }

@media (max-width: 47.99rem) {
  .fin__fond { object-position: 50% 20%; }
  .fin__voile { background: linear-gradient(0deg, var(--noir) 0%, var(--voile-fort) 36%, transparent 70%); }
  .fin__texte { font-size: var(--t-2xl); text-shadow: 0 0 1rem var(--noir), 0 0 .25rem var(--noir); }
  .fin__interieur { gap: var(--e-4); }
  .fin__titre {
    font-size: var(--t-5xl);
    color: var(--blanc);
    -webkit-text-stroke: 0;
    text-shadow: 0 0 1.2rem var(--noir), 0 0 .3rem var(--noir);
  }
  .fin__avis p { font-size: var(--t-lg); }
  .fin__preuves { gap: var(--e-1) var(--e-4); font-size: var(--t-xs); }
  .fin__preuves strong { font-size: var(--t-base); }
}


/* ═══ LES PETITS TÉLÉPHONES ══════════════════════════════════════════════
   90 % des visiteurs arrivent au téléphone (Ismail, 22 septembre). À 390 ×
   844, 414 × 896 et 430 × 932, chaque section tient dans un écran ; à 360 ×
   780 — le format Android le plus courant — sept dépassaient de 17 à 99 px
   (mesuré). Sous 800 px de haut, on resserre les marges et les tailles,
   jamais le contenu : rien n'est retiré, tout est plus serré. */

@media (max-width: 47.99rem) and (max-height: 50rem) {
  .ecran { padding-block: var(--e-6) calc(var(--e-4) + var(--barre-mobile)); }

  .casting__interieur { gap: var(--e-3); }
  .casting__titre { font-size: var(--t-2xl); }
  .casting .selection__scene { min-block-size: 16rem; padding: var(--e-3); }
  .casting .selection__portrait { block-size: 13rem; }
  .casting .selection__tuile { aspect-ratio: 1; }

  .lecture--guidee .lecture__interieur {
    block-size: calc(100svh - var(--hauteur-entete) - var(--e-6) - var(--e-4) - var(--barre-mobile));
  }


  .offre__interieur { gap: var(--e-3); }
  .offre__titre { font-size: var(--t-xl); }
  .offre__chapeau { font-size: var(--t-xs); }
  .offre__choix label { min-block-size: 3rem; }
  .coffret { padding: var(--e-3); }

  .bonus__interieur { row-gap: var(--e-4); }
  .bonus__titre { font-size: var(--t-xl); }
  .bonus__hote { inline-size: 4.5rem; }
  .question summary { padding-block: var(--e-1); }

  .fin__texte { font-size: var(--t-xl); }
  .fin__credits { padding-block-start: var(--e-2); }
}

/* Le second cran : sous 672 px de haut (iPhone SE, 375 × 667). La zone
   utile n'y fait que 474 px une fois la barre réservée. */
@media (max-width: 47.99rem) and (max-height: 42rem) {

  .casting__chapeau { font-size: var(--t-xs); }
  .casting .selection__scene { min-block-size: 13.5rem; }
  .casting .selection__portrait { block-size: 11rem; }
  .casting .selection__description { line-height: 1.4; }


  .entree { --nom-taille: 31vw; --duo-hauteur: min(40svh, calc((100vw - 2 * var(--gouttiere)) / 1.06)); }
  .entree__promesse { font-size: var(--t-lg); }

  .coffret { grid-template-columns: 36% minmax(0, 1fr); }
  .coffret__contenu { font-size: var(--t-xs); }
  .coffret__prix { font-size: var(--t-xl); }
  .offre__gages { font-size: var(--t-xs); }

  .bonus__chapeau { font-size: var(--t-xs); }
  .bonus__entete .sceau { inline-size: 3rem; block-size: 3rem; }
  .bonus__hote { inline-size: 3.5rem; }
  .question summary { font-size: var(--t-sm); }
}


/* ═══ 4 bis · LA LECTURE EN PLEIN ÉCRAN — au téléphone ═══════════════════
   « Quitte à ce que ça prenne tout l'écran » (Ismail, 22 septembre). Au
   premier geste, la scène et ses commandes passent dans ce `<dialog>` :
   la case se cadre sur toute la hauteur du téléphone au lieu de la moitié.
   ⚠ `[open]`, comme `.lecteur[open]` du thème : la feuille du navigateur
   pose `dialog:not([open]) { display: none }`, qu'un `display` nu écraserait. */

.lecture__plein {
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  max-block-size: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--noir);
  color: var(--texte);
}

.lecture__plein[open] {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}

.lecture__plein::backdrop { background: var(--noir); }

/* Dans le plein écran, tout geste appartient à la planche : il n'y a plus de
   page à faire défiler derrière. */
.lecture__plein .lecture__scene {
  grid-area: auto;
  grid-row: 1;
  min-block-size: 0;
  border: 0;
  touch-action: none;
}

.lecture__plein .lecture__commandes {
  grid-area: auto;
  grid-row: 2;
  padding: var(--e-2) var(--e-4) calc(var(--e-2) + env(safe-area-inset-bottom));
  background: var(--noir);
  border-block-start: var(--filet) solid var(--acier);
}

/* Le bandeau laisse la place de la croix. */
.lecture__plein .lecture__bandeau { inset-inline: var(--e-3) calc(44px + var(--e-4)); }

.lecture__fermer {
  position: absolute;
  z-index: 5;
  inset-block-start: calc(var(--e-2) + env(safe-area-inset-top));
  inset-inline-end: var(--e-2);
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  background: color-mix(in srgb, var(--noir) 75%, transparent);
  border: var(--filet) solid var(--acier);
  color: var(--blanc);
  font-size: var(--t-2xl);
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--duree-action) var(--sortie), color var(--duree-action) var(--sortie);
}

.lecture__fermer:hover,
.lecture__fermer:focus-visible { border-color: var(--or); color: var(--or); }

/* Au bout de l'extrait, en plein écran : on dit qu'un simple défilement rend
   la page (Ismail, 22 septembre — « plutôt que de cliquer sur la flèche »).
   Hors plein écran, la page défile déjà : la phrase n'aurait rien à dire. */
.lecture__fin-geste { display: none; }

.lecture__plein .lecture__fin-geste {
  display: block;
  font-size: var(--t-xs);
  color: var(--gris);
}

.lecture__plein .lecture__fin-geste::before { content: '\2195\00a0'; color: var(--rouge); }


/* ═══ V5 · LES APPELS ═══════════════════════════════════════════════════
   Un verbe par moment (PLAN-V5 § 2) : entrer, lire, rencontrer, choisir.
   Les appels ajoutés sont des LIENS : le bouton plein reste seul à l'écran,
   la barre du thème se repliant d'elle-même devant un bouton du contenu. */

/* Le dernier décor mène à la lecture — sous la carte du lieu. */
.plongee__suite {
  grid-row: 5;
  justify-self: end;
  margin-block-start: var(--e-3);
  padding-inline: var(--e-3);
  background: color-mix(in srgb, var(--noir) 72%, transparent);
}

/* Sous la planche, sur ordinateur : la suite, sans attendre la dernière case
   (≈ 107 appuis pour le tome 1). Au téléphone, c'est la barre qui la propose ;
   à la fin de l'extrait, c'est le bouton de la fin. */
.lecture__suite { display: none; grid-area: suite; margin: 0; }
.lecture__suite [hidden] { display: none; }   /* sinon `.lien-fleche` (inline-flex) bat l'attribut */
.lecture:has(.lecture__fin:not([hidden])) .lecture__suite { visibility: hidden; }

@media (min-width: 48rem) {
  .lecture__suite { display: block; }
  .lecture__interieur {
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    grid-template-areas: "entete" "scene" "commandes" "suite";
  }
}

@media (min-width: 60rem) {
  .lecture__interieur {
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "entete    scene"
      ".         scene"
      "commandes scene"
      "suite     scene";
  }
}

/* Au téléphone, la barre dit déjà « Lire un extrait » : pas deux fois le même
   appel dans le même écran. */
@media (max-width: 47.99rem) {
  .plongee__suite { display: none; }
}

/* L'en-tête s'efface devant un bouton du contenu — même règle que la barre du
   téléphone (`principal.js`, poseLaBarre). Sa place reste : la navigation ne
   bouge pas. */
.entete__cta { transition: opacity var(--duree-action) var(--sortie), visibility var(--duree-action) var(--sortie); }
.entete__cta.est-replie { opacity: 0; visibility: hidden; }

/* ═══ V5 · L'HISTOIRE ═══════════════════════════════════════════════════
   Wira et Hiba à égalité stricte, dès le premier décor : un second cartouche,
   plus petit, décalé, penché de l'autre côté — deux encadrés de narration qui
   se répondent, comme dans une case de manga. */
.plongee__cartouche--second {
  grid-row: 3;
  font-family: var(--titre);
  font-weight: 400;
  letter-spacing: var(--lettrage-titre);
  text-transform: uppercase;
  text-wrap: balance;
  max-inline-size: 22ch;
  align-self: start;
  margin-block-start: var(--e-4);
  margin-inline-start: clamp(var(--e-4), 6vw, var(--e-16));
  font-size: var(--t-3xl);
  rotate: 1deg;
}

@media (max-width: 47.99rem) {
  .plongee__cartouche--second { max-inline-size: 22ch; margin-block-start: var(--e-3); font-size: var(--t-2xl); }
}

/* À la fin, pour qui n'achète pas aujourd'hui. */
.fin__abonnes { margin-inline-start: var(--e-2); white-space: nowrap; }
.fin__abonnes strong { color: var(--blanc); font-weight: 600; }

.fin__suivre { margin: 0; font-size: var(--t-sm); color: var(--gris); }
.fin__suivre .lien-fleche { margin-inline-start: var(--e-1); }

/* La barre change de libellé : un fondu, pas un saut. */
.barre__action .bouton__texte { transition: opacity var(--duree-action) var(--sortie); }
.barre__action.est-en-change .bouton__texte { opacity: 0; }


/* ═══ V5 · LA PRÉSENTATION ══════════════════════════════════════════════ */

/* Un seul panier : le rond, qui « ne disparaît jamais » (demande d'Ismail,
   `30-pages.css`). Celui de l'en-tête faisait doublon à toutes les tailles. */
.entete .panier-lien { display: none; }

/* ⚠ Défaut du thème : `30-pages.css` cache le menu à ≥ 60 rem, puis une règle
   générale de même poids, plus bas, le réaffiche (display: grid). Le menu en
   trois traits restait donc à côté du menu complet. À corriger aussi dans le
   thème : placer la règle de la media query après la règle générale. */
@media (min-width: 60rem) {
  .entete__bascule { display: none; }
}

@media (max-width: 47.99rem) {
  /* Les prénoms passent de 8,8 à 12 px, dans les mêmes deux rangées de six
     (D-96) : Bebas Neue est étroite, « RASHMAD » tient en ~35 px dans une
     case de 56. Trois rangées de quatre auraient coûté 124 px — la section
     ne tenait plus dans l'écran. */
  .casting .selection__tuile-nom { padding: .5rem .1rem .15rem; font-size: .75rem; letter-spacing: .02em; }

  /* À la fin, le Corbeau garde son visage : le texte descend sous lui. La
     barre est repliée ici (le bouton de la fin est à l'écran), sa réserve
     ne servirait qu'à remonter le texte sur lui. */
  .fin.ecran { align-items: end; padding-block-end: var(--e-8); }

  /* « Pas pour aujourd'hui ? », le lien, le nombre d'abonnés : trois lignes
     alignées au même bord (les marges prévues pour une seule ligne créaient
     un retrait une fois passées à la ligne). */
  .fin__suivre { display: grid; justify-items: start; }
  .fin__suivre .lien-fleche,
  .fin__abonnes { margin-inline-start: 0; }
}


/* ═══ V5 · LE SOUTIEN — les créateurs et la vidéo (D-108) ════════════════
   Entre la lecture (on a donné) et l'offre (on demande) : la raison d'acheter
   ICI. Trois pièces : le texte, le duo détouré, la vidéo verticale — chargée
   au clic seulement (`principal.js`, poseLaVideo : 7,5 Mo que personne ne
   paie sans l'avoir demandé). Aucun bouton plein : la barre reste l'appel. */

.soutien {
  background:
    radial-gradient(38% 55% at 52% 72%, var(--or-voile), transparent 70%),
    var(--panneau-creux);
}

.soutien__interieur {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr);
  grid-template-rows: 1fr auto auto 1fr;
  grid-template-areas:
    ".     duo video"
    "texte duo video"
    "lien  duo video"
    ".     duo video";
  column-gap: var(--e-8);
  row-gap: var(--e-4);
}

.soutien__texte { grid-area: texte; display: grid; gap: var(--e-4); }
.soutien__titre { font-size: var(--t-4xl); }
.soutien__chapeau { max-inline-size: 40ch; margin: 0; }
.soutien__packs { grid-area: lien; justify-self: start; }

.soutien__duo {
  grid-area: duo;
  align-self: center;
  display: grid;
  gap: var(--e-2);
  margin: 0;
}

/* Le bas de la photo est coupé net : il s'efface au lieu de trancher. */
.soutien__duo img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent);
          mask-image: linear-gradient(to bottom, #000 78%, transparent);
  filter: drop-shadow(0 1.25rem 2rem var(--voile-fort));
}


.soutien__video { grid-area: video; align-self: center; display: grid; gap: var(--e-2); margin: 0; }

.soutien__cadre {
  position: relative;
  aspect-ratio: var(--rapport, 478 / 850);
  overflow: hidden;
  background: var(--noir);
  border: var(--trait-case) solid var(--noir);
  box-shadow: .5rem .5rem 0 var(--noir);
}

.soutien__cadre img,
.soutien__cadre video {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Toute l'affiche lance la vidéo : la cible est la carte entière. */
.soutien__lire {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: var(--e-3);
  background: none;
  border: 0;
  color: var(--blanc);
  font: inherit;
  cursor: pointer;
}

.soutien__lire:focus-visible { outline: 2px solid var(--or); outline-offset: -4px; }

.soutien__pastille {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  inline-size: 100%;
  min-block-size: 44px;
  padding: var(--e-2) var(--e-3);
  background: color-mix(in srgb, var(--noir) 80%, transparent);
  border: var(--filet) solid color-mix(in srgb, var(--blanc) 25%, transparent);
  font-weight: 600;
  text-align: start;
  transition: border-color var(--duree-action) var(--sortie);
}

.soutien__lire:hover .soutien__pastille { border-color: var(--or); }

.soutien__lire-icone {
  flex: none;
  position: relative;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: 50%;
  background: var(--rouge);
}

.soutien__lire-icone::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  inline-size: .7rem;
  block-size: .8rem;
  translate: 2px 0;
  background: var(--blanc);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.soutien__video figcaption { font-size: var(--t-xs); color: var(--gris); }

/* Tablette et téléphone : le texte en haut, puis le duo et la vidéo côte à
   côte ; le lien sous le duo. La vidéo est verticale : elle tient dans la
   colonne étroite. */
@media (max-width: 59.99rem) {
  .soutien__interieur {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "texte texte"
      "duo   video"
      "lien  video";
    column-gap: var(--e-3);
  }
  .soutien__duo { align-self: end; }
  .soutien__video { align-self: start; }
  .soutien__packs { align-self: start; }
}

@media (max-width: 47.99rem) {
  .soutien__texte { gap: var(--e-2); }
  .soutien__titre { font-size: var(--t-2xl); }
  .soutien__chapeau { font-size: var(--t-sm); }
  /* La barre dit déjà « Choisir mon pack » dans cet écran. */
  .soutien__packs { display: none; }
  .soutien__duo { align-self: center; }
  /* Le lien est masqué : le duo et la vidéo se font face sur une rangée. */
  .soutien__interieur { grid-template-rows: auto auto; grid-template-areas: "texte texte" "duo video"; }
  /* Au téléphone, un rond de lecture au centre ; le mot reste lu à voix haute. */
  .soutien__lire { align-items: center; justify-content: center; padding: 0; }
  .soutien__pastille { inline-size: auto; min-block-size: 0; padding: 0; background: none; border: 0; }
  .soutien__lire-icone { inline-size: 3.25rem; block-size: 3.25rem; box-shadow: 0 0 0 .4rem color-mix(in srgb, var(--noir) 40%, transparent); }
  .soutien__lire-icone::after { inline-size: .95rem; block-size: 1.1rem; }
  .soutien__lire-mot { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}


/* ═══ V5 · LES PIÈCES DE LA PAGE PARENTS (lot 1) ═══════════════════════════
   Pensées et bascule : les blocs retirés de l'accueil le 22 septembre (D-100),
   repris tels quels de maquettes/nouvel-accueil/pour-la-page-parents/blocs.css. */

/* Styles des blocs parents, tirés d'accueil.css le 22 septembre 2026 (D-100). */

/* ═══ 2 · LE PROBLÈME — « les pensées qui éclosent » ═════════════════════
   Les douleurs du parent, dans ses mots, en bulles de pensée. Dans un manga,
   la bulle noire au trait blanc est le monologue intérieur : c'est
   exactement ce qu'elles sont. Aucune n'est présentée comme une citation —
   aucune n'a été entendue d'un parent (brief, § 0). */

.pensees { background: var(--panneau-creux); }

.pensees__interieur {
  display: grid;
  gap: var(--e-8);
}

.pensees__titre {
  font-size: var(--t-3xl);
  color: var(--gris);
}

.pensees__liste {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--e-6);
  row-gap: var(--e-12);
}

/* La bulle prend la largeur de son texte, bornée : une bulle trop large
   devient une pilule plate, une bulle qui serre son texte reste ronde. */
.bulle {
  position: relative;
  align-self: start;
  justify-self: start;
  max-inline-size: min(100%, 27rem);
}

.bulle--1 { grid-column: 1 / span 6; rotate: -2deg; }
.bulle--2 { grid-column: 7 / span 6; justify-self: center; margin-block-start: var(--e-12); rotate: 1.5deg; }
.bulle--3 { grid-column: 2 / span 6; justify-self: end; rotate: 1deg; }
.bulle--4 { grid-column: 8 / span 5; justify-self: end; margin-block-start: var(--e-6); rotate: -1.5deg; }

.bulle p {
  position: relative;
  padding: var(--e-12) var(--e-12);
  background: var(--panneau);
  border: var(--trait-case) solid var(--blanc);
  border-radius: 50% / 50%;
  color: var(--blanc);
  font-size: var(--t-xl);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .02em;
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
}

/* La queue d'une bulle de pensée : deux ronds qui descendent vers celui qui
   pense — ici, le lecteur de la page. */
.bulle::before,
.bulle::after {
  content: '';
  position: absolute;
  z-index: 1;
  background: var(--panneau);
  border: var(--trait-case) solid var(--blanc);
  border-radius: 50%;
}

.bulle::before { inline-size: 1.25rem; block-size: 1.25rem; inset-block-end: -1.4rem; inset-inline-start: 22%; }
.bulle::after  { inline-size: .7rem;   block-size: .7rem;   inset-block-end: -2.5rem; inset-inline-start: 18%; }

.bulle--2::before { inset-inline-start: auto; inset-inline-end: 24%; }
.bulle--2::after  { inset-inline-start: auto; inset-inline-end: 20%; }
.bulle--4::before { inset-inline-start: auto; inset-inline-end: 26%; }
.bulle--4::after  { inset-inline-start: auto; inset-inline-end: 22%; }

.pensees__sortie {
  justify-self: end;
  max-inline-size: 30ch;
  font-family: var(--titre);
  font-size: var(--t-2xl);
  line-height: 1.1;
  letter-spacing: var(--lettrage-titre);
  text-align: end;
  text-transform: uppercase;
  color: var(--blanc);
}

/* L'état masqué n'existe que si le script est là pour le lever. */
.pensees--anime .bulle {
  opacity: 0;
  scale: .6;
  transition:
    opacity var(--duree-eclosion) var(--sortie),
    scale   var(--duree-eclosion) var(--shonen);
  transition-delay: calc(var(--rang, 0) * var(--decalage-eclosion));
}

.pensees--anime.est-vu .bulle { opacity: 1; scale: 1; }

@media (max-width: 47.99rem) {
  .pensees__interieur { gap: var(--e-6); }
  .pensees__titre { font-size: var(--t-2xl); }
  .pensees__liste { grid-template-columns: minmax(0, 1fr); row-gap: var(--e-8); padding-block-end: var(--e-8); }
  .bulle { max-inline-size: 88%; }
  .bulle--1, .bulle--3 { grid-column: 1; justify-self: start; margin-block-start: 0; }
  .bulle--2, .bulle--4 { grid-column: 1; justify-self: end; margin-block-start: 0; }
  .bulle p { padding: var(--e-4) var(--e-8); font-size: var(--t-sm); }
  .pensees__sortie { font-size: var(--t-xl); }
}


/* ═══ 3 · L'AGITATION — « ce qui baisse, ce qui monte » ═════════════════
   Deux cases séparées par une gouttière oblique — la seule case penchée de
   la page, là où la page bascule. À gauche ce qui baisse, en gris et en
   creux ; à droite ce qui monte, en rouge, avec les lignes de vitesse du
   thème. On ne cultive pas la peur : le chiffre dit « ce n'est pas votre
   faute », la case d'à côté dit ce qui marche (contenu/02-offrir.md). */

.bascule { background: var(--noir); }

.bascule__interieur { display: grid; gap: var(--e-8); }

.bascule__titre { font-size: var(--t-4xl); }

.bascule__planche {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.bascule__case {
  position: relative;
  display: grid;
  align-content: center;
  gap: var(--e-2);
  padding: var(--e-12) var(--e-12);
}

.bascule__case--baisse {
  background: var(--panneau);
  clip-path: polygon(0 0, 100% 0, calc(100% - 4rem) 100%, 0 100%);
  padding-inline-end: var(--e-16);
}

.bascule__case--monte {
  margin-inline-start: calc(-4rem + var(--e-3));
  padding-inline-start: var(--e-16);
  padding-inline-end: 34%;
  background: color-mix(in srgb, var(--rouge) 14%, var(--panneau));
  clip-path: polygon(4rem 0, 100% 0, 100% 100%, 0 100%);
}

.bascule__chiffre {
  font-family: var(--titre);
  font-size: var(--t-enorme);
  line-height: .9;
  letter-spacing: var(--lettrage-titre);
  text-transform: uppercase;
}

.bascule__chiffre--second { font-size: var(--t-4xl); }

.bascule__case--baisse { gap: var(--e-6); }

.bascule__bloc { display: grid; gap: var(--e-2); }

/* L'unité se lit à part : « +7 » d'un bloc, sans que « POINTS » file sous
   Taiyou. */
.bascule__unite { font-size: var(--t-3xl); }

/* Ce qui baisse n'a plus de matière : un chiffre en creux, au trait gris. */
.bascule__case--baisse .bascule__chiffre {
  color: transparent;
  -webkit-text-stroke: var(--trait-case) var(--gris);
}

.bascule__case--monte .bascule__chiffre { color: var(--rouge); }

.bascule__legende {
  max-inline-size: 30ch;
  color: var(--gris);
}

.bascule__case--monte .bascule__legende { color: var(--texte); }

.bascule__legende--forte {
  margin-block-start: var(--e-4);
  font-weight: 600;
  color: var(--blanc);
}

/* Taiyou sort de sa case par le haut. Posé hors de la case — le `clip-path`
   le rognerait — et on le retrouve deux écrans plus bas, dans la lecture. */
.bascule__taiyou {
  position: absolute;
  inset-inline-end: 1%;
  inset-block-end: 0;
  z-index: 2;
  block-size: 122%;
  inline-size: auto;
  max-inline-size: none;
  pointer-events: none;
  filter: drop-shadow(0 1rem 1.4rem var(--voile-fort));
}

.bascule__pivot {
  font-family: var(--titre);
  font-size: var(--t-3xl);
  line-height: 1;
  letter-spacing: var(--lettrage-titre);
  text-transform: uppercase;
  color: var(--blanc);
}

.bascule__pivot em { font-style: normal; color: var(--or); }

.bascule__source { font-size: var(--t-xs); color: var(--gris); }

@media (max-width: 47.99rem) {
  .bascule__interieur { gap: var(--e-6); }
  .bascule__titre { font-size: var(--t-3xl); }
  .bascule__planche { grid-template-columns: minmax(0, 1fr); }
  .bascule__case { padding: var(--e-6); }
  .bascule__case--baisse {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2rem), 0 100%);
    padding-block-end: var(--e-12);
    padding-inline-end: var(--e-6);
  }
  .bascule__case--monte {
    margin-inline-start: 0;
    margin-block-start: calc(-2rem + var(--e-2));
    padding: var(--e-12) 40% var(--e-6) var(--e-6);
    clip-path: polygon(0 2rem, 100% 0, 100% 100%, 0 100%);
  }
  /* Les deux chiffres gris côte à côte : c'est ce qui fait tenir l'écran. */
  .bascule__case--baisse { grid-template-columns: 1fr 1fr; column-gap: var(--e-4); }
  .bascule__chiffre,
  .bascule__chiffre--second { font-size: var(--t-3xl); }
  .bascule__case--monte .bascule__chiffre { font-size: var(--t-4xl); }
  .bascule__unite { font-size: var(--t-2xl); }
  .bascule__legende { font-size: var(--t-xs); }
  .bascule__legende--forte { margin-block-start: var(--e-2); }
  .bascule__taiyou { block-size: 46%; inset-inline-end: -1%; }
  .bascule__pivot { font-size: var(--t-xl); }
}

/* Les bulles ont enfin une image derrière : une maison du village, celle de Malik. */
.pensees { overflow: hidden; isolation: isolate; }
.decor--pensees .decor__image { object-position: 50% 45%; opacity: .3; }

/* La queue de la quatrième bulle descend à droite, là où la sortie s'aligne. */
@media (min-width: 48rem) { .pensees__sortie { margin-block-start: var(--e-6); } }

.bascule__suite { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-2) var(--e-4); }
.bascule__sortie { margin: 0; font-size: var(--t-lg); color: var(--texte); }

@media (max-width: 47.99rem) {
  .bascule__interieur { gap: var(--e-4); }
  .bascule__titre { font-size: var(--t-2xl); }
  .bascule__pivot { font-size: var(--t-lg); }
  .bascule__sortie { font-size: var(--t-sm); }
  .bascule__lien { display: none; }
  .bascule__case--baisse { padding-block-start: var(--e-4); }
  .bascule__legende--forte { margin-block-start: 0; }
  .bascule__case--monte { padding-block-end: var(--e-4); }
}


/* ═══ V5 · LA TÊTE D'UNE PAGE ══════════════════════════════════════════════
   Un cartouche pour titre (le même encadré de narration que la plongée), une
   promesse, un bouton plein et un lien, les gages ; à droite, l'objet. */

.tete { overflow: hidden; isolation: isolate; }
.decor--tete .decor__image { object-position: 50% 45%; opacity: .3; }

.tete__interieur {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  align-items: center;
  gap: var(--e-6) var(--e-12);
}

.tete__texte { display: grid; gap: var(--e-4); justify-items: start; }

.tete__surtitre {
  margin: 0;
  font-family: var(--titre);
  font-size: var(--t-lg);
  letter-spacing: var(--lettrage-capital);
  text-transform: uppercase;
  color: var(--or);
  text-shadow: 0 0 .6rem var(--noir);
}

.tete__titre {
  max-inline-size: 16ch;
  padding: var(--e-4) var(--e-6);
  background: var(--blanc);
  color: var(--noir);
  border: var(--trait-case) solid var(--noir);
  box-shadow: .5rem .5rem 0 var(--noir);
  font-size: var(--t-4xl);
  line-height: .95;
  rotate: -1.5deg;
}

.tete__chapeau { max-inline-size: 44ch; margin: 0; font-size: var(--t-lg); color: var(--texte); text-shadow: 0 0 .8rem var(--noir); }
.tete__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-6); margin-block-start: var(--e-2); }
.tete__gages { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-6); margin: 0; font-size: var(--t-sm); color: var(--gris); }
.tete__objet { position: relative; }
.tete__objet .coffret__objets { margin: 0; }
.tete__objet .objet--t2 { inset-inline-start: 10%; inset-block-end: 0; inline-size: 64%; }

@media (max-width: 47.99rem) {
  .tete__interieur { grid-template-columns: minmax(0, 1fr); gap: var(--e-3); }
  .tete__texte { gap: var(--e-3); }
  .tete__objet { order: -1; inline-size: 56%; justify-self: center; }
  .tete__surtitre { font-size: var(--t-xs); line-height: 1.4; letter-spacing: .12em; }
  .tete__titre { font-size: var(--t-3xl); padding: var(--e-3) var(--e-4); }
  .tete__chapeau { font-size: var(--t-sm); }
  .tete__actions { flex-direction: column; align-items: stretch; inline-size: 100%; gap: var(--e-1); }
  .tete__actions .lien-fleche { justify-content: center; }
  .tete__gages { gap: 0 var(--e-4); font-size: var(--t-xs); }
}


/* ═══ V5 · LES FAITS ═══════════════════════════════════════════════════════
   Une liste de deux colonnes — le fait, sa précision — tirée à l'encre : la
   table du dossier (contenu/02-offrir.md, bloc 3), pas une grille de cartes. */

.faits__interieur {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  align-items: start;
  gap: var(--e-6) var(--e-12);
}

.faits { overflow: hidden; isolation: isolate; }
.decor--faits .decor__image { object-position: 50% 62%; opacity: .26; }
.faits--trame { background: var(--panneau-creux); }

.faits__entete { display: grid; gap: var(--e-6); justify-items: start; align-self: end; }
.faits__titre { font-size: var(--t-4xl); }

.faits__hote {
  inline-size: 9rem;
  block-size: auto;
  filter: drop-shadow(0 1rem 1.4rem var(--voile-fort));
}

.faits__liste { grid-row: span 2; margin: 0; border-block-start: var(--trait-case) solid var(--acier); }

.faits__fait {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: baseline;
  gap: var(--e-6);
  padding-block: var(--e-4);
  border-block-end: var(--filet) solid var(--acier);
}

.faits__fait dt { font-family: var(--titre); font-size: var(--t-2xl); line-height: 1; text-transform: uppercase; color: var(--blanc); }
.faits__fait dd { margin: 0; color: var(--gris); }
.faits__lien { align-self: start; justify-self: start; }

@media (max-width: 59.99rem) {
  .faits__interieur { grid-template-columns: minmax(0, 1fr); gap: var(--e-4); }
  .faits__liste { grid-row: auto; }
}

@media (max-width: 47.99rem) {
  .faits__entete { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--e-4); }
  .faits__titre { font-size: var(--t-2xl); }
  .faits__hote { inline-size: 3.5rem; }
  .faits__fait { grid-template-columns: minmax(0, 1fr); gap: 0; padding-block: var(--e-2); }
  .faits__fait dt { font-size: var(--t-lg); }
  .faits__fait dd { font-size: var(--t-xs); }
}


/* ═══ V5 · LA LECTURE QUAND ELLE EST LA PAGE (lot 2, /lire-le-debut/) ══════
   Un surtitre et un chapeau au-dessus des onglets : le cadrage tient dans
   l'en-tête de la lecture, sans bouton (contenu/03, bloc 1). */

.lecture__surtitre { margin: 0 0 var(--e-2); }
.lecture__chapeau { margin: var(--e-3) 0 0; max-inline-size: 34ch; font-size: var(--t-lg); color: var(--texte); }

/* Le tome seul, en lien de texte, en tête de la ligne de preuve de l'offre :
   un lien dans une phrase, pas une cible de 44 px qui grandirait la ligne. */
.offre__unite {
  margin-inline-end: var(--e-4);
  color: var(--texte);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--rouge);
  text-decoration-thickness: 2px;
  text-underline-offset: .3em;
  transition: color var(--duree-action) var(--sortie), text-decoration-color var(--duree-action) var(--sortie);
}

.offre__unite:hover { color: var(--or); text-decoration-color: var(--or); }

/* Tant que la lecture est à l'écran, rien ne vend (page de lecture). */
.lecture-sans-appel .entete__cta { opacity: 0; visibility: hidden; }

@media (max-width: 47.99rem) {
  .lecture-sans-appel .barre--fixe { background: transparent; border-color: transparent; backdrop-filter: none; pointer-events: none; }
  .lecture-sans-appel .barre--fixe .barre__action { opacity: 0; visibility: hidden; translate: 0 150%; }
  .lecture-sans-appel .barre--fixe .barre__panier { pointer-events: auto; }
}

@media (max-width: 47.99rem) {
  .lecture__surtitre { margin: 0; font-size: var(--t-xs); }
  .lecture__chapeau { margin-block-start: var(--e-1); font-size: var(--t-xs); }
}


/* ═══ V5 · LE MONDE EN TÊTE (lot 3, /le-manga/) ════════════════════════════
   Quand le lieu est le sujet, le décor se montre davantage. */

.tete--monde .decor__image { opacity: .62; object-position: 50% 50%; }

@media (max-width: 47.99rem) {
  .tete--monde .decor__image { opacity: .7; }
  .tete--monde .tete__interieur { align-self: end; }
}


/* ═══ V5 · L'ATLAS ═════════════════════════════════════════════════════════
   Un écran de sélection : l'index des sept lieux à gauche, le décor choisi à
   droite, et la légende de sa carte en cartouche. Des radios et des voisins,
   aucun script ; le premier lieu est montré tant que rien n'est coché. */

.atlas__interieur {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas: "entete scenes" "choix scenes";
  grid-template-rows: auto 1fr;
  align-items: start;
  gap: var(--e-6) var(--e-12);
}

.atlas__entete { grid-area: entete; display: grid; gap: var(--e-3); }
.atlas__entete .surtitre { margin: 0; }
.atlas__titre { font-size: var(--t-4xl); }
.atlas__chapeau { margin: 0; max-inline-size: 40ch; color: var(--gris); }

.atlas__choix { grid-area: choix; display: grid; gap: var(--e-2); }

.atlas__strate {
  margin: var(--e-2) 0 0;
  font-family: var(--titre);
  font-size: var(--t-sm);
  letter-spacing: var(--lettrage-capital);
  text-transform: uppercase;
  color: var(--or);
}

.atlas__liste { display: grid; gap: var(--e-1); margin: 0; padding: 0; list-style: none; }

.atlas__etiquette {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-1) var(--e-3) var(--e-1) var(--e-1);
  border: var(--filet) solid var(--acier);
  background: var(--panneau);
  color: var(--texte);
  font-family: var(--titre);
  font-size: var(--t-lg);
  line-height: 1.1;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--duree-action) var(--sortie), color var(--duree-action) var(--sortie), translate var(--duree-action) var(--shonen);
}

.atlas__etiquette img {
  inline-size: 3.25rem;
  block-size: 2.25rem;
  max-inline-size: none;
  object-fit: cover;
}

.atlas__etiquette:hover { border-color: var(--or); color: var(--blanc); translate: .25rem 0; }

#atlas-rue:checked ~ .atlas__choix [for="atlas-rue"],
#atlas-wira:checked ~ .atlas__choix [for="atlas-wira"],
#atlas-malik:checked ~ .atlas__choix [for="atlas-malik"],
#atlas-pongpo:checked ~ .atlas__choix [for="atlas-pongpo"],
#atlas-rashmad:checked ~ .atlas__choix [for="atlas-rashmad"],
#atlas-coeurs:checked ~ .atlas__choix [for="atlas-coeurs"],
#atlas-chateau:checked ~ .atlas__choix [for="atlas-chateau"] {
  border-color: var(--or);
  background: color-mix(in srgb, var(--or) 14%, var(--panneau));
  color: var(--blanc);
}

#atlas-rue:focus-visible ~ .atlas__choix [for="atlas-rue"],
#atlas-wira:focus-visible ~ .atlas__choix [for="atlas-wira"],
#atlas-malik:focus-visible ~ .atlas__choix [for="atlas-malik"],
#atlas-pongpo:focus-visible ~ .atlas__choix [for="atlas-pongpo"],
#atlas-rashmad:focus-visible ~ .atlas__choix [for="atlas-rashmad"],
#atlas-coeurs:focus-visible ~ .atlas__choix [for="atlas-coeurs"],
#atlas-chateau:focus-visible ~ .atlas__choix [for="atlas-chateau"] {
  outline: 2px solid var(--or);
  outline-offset: 3px;
}

.atlas__scenes {
  grid-area: scenes;
  display: grid;
  align-self: center;
}

.atlas__scene {
  grid-area: 1 / 1;
  position: relative;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duree-action) var(--sortie), visibility 0s linear var(--duree-action);
}

/* Le lieu coché prend le cadre (le premier l'est au rendu). */
#atlas-rue:checked ~ .atlas__scenes .atlas__scene--rue,
#atlas-wira:checked ~ .atlas__scenes .atlas__scene--wira,
#atlas-malik:checked ~ .atlas__scenes .atlas__scene--malik,
#atlas-pongpo:checked ~ .atlas__scenes .atlas__scene--pongpo,
#atlas-rashmad:checked ~ .atlas__scenes .atlas__scene--rashmad,
#atlas-coeurs:checked ~ .atlas__scenes .atlas__scene--coeurs,
#atlas-chateau:checked ~ .atlas__scenes .atlas__scene--chateau {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--duree-action) var(--sortie);
}

.atlas__image {
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  max-inline-size: none;
  object-fit: cover;
  border: var(--trait-case) solid var(--noir);
  box-shadow: 0 0 0 var(--filet) var(--acier), 0 1.5rem 3rem var(--voile-fort);
}

/* La légende de la carte, en cartouche : l'encadré de narration du manga. */
.atlas__plaque {
  position: absolute;
  inset-inline-start: calc(-1 * var(--e-6));
  inset-block-end: calc(-1 * var(--e-4));
  display: grid;
  gap: var(--e-1);
  max-inline-size: min(26rem, 80%);
  padding: var(--e-3) var(--e-4);
  background: var(--blanc);
  color: var(--noir);
  border: var(--trait-case) solid var(--noir);
  box-shadow: .4rem .4rem 0 var(--noir);
  rotate: -1deg;
}

.atlas__nom { font-family: var(--titre); font-size: var(--t-xl); line-height: 1; text-transform: uppercase; }
.atlas__mot { font-size: var(--t-sm); line-height: 1.4; }
.atlas__jeton { font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--noir) 60%, var(--blanc)); }

@media (max-width: 47.99rem) {
  .atlas__interieur {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "entete" "scenes" "choix";
    grid-template-rows: auto;
    gap: var(--e-3);
  }
  .atlas__entete { gap: var(--e-1); }
  .atlas__entete .surtitre { font-size: var(--t-xs); }
  .atlas__titre { font-size: var(--t-2xl); }
  .atlas__chapeau { display: none; }
  .atlas__image { aspect-ratio: 16 / 10; }
  .atlas__plaque { position: relative; inset: auto; margin: calc(-1 * var(--e-6)) var(--e-2) 0; max-inline-size: none; padding: var(--e-2) var(--e-3); }
  .atlas__nom { font-size: var(--t-lg); }
  .atlas__mot { font-size: var(--t-xs); }
  .atlas__choix { gap: var(--e-1); }
  .atlas__strate { margin: 0; font-size: var(--t-xs); }
  .atlas__liste { display: flex; flex-wrap: wrap; gap: var(--e-1); }
  .atlas__etiquette { gap: var(--e-2); padding: 0 var(--e-2) 0 0; min-block-size: 2.75rem; font-size: var(--t-sm); }
  .atlas__etiquette img { inline-size: 2.5rem; block-size: 2.75rem; }
  .atlas__etiquette:hover { translate: none; }
}


/* ═══ V5 · LE RÉCIT — UNE PLANCHE DE TROIS CASES ═══════════════════════════
   Chaque arc dans sa case : un personnage détouré qui en sort, un cartouche
   blanc pour le texte du studio. Des cases de largeurs inégales, séparées par
   des gouttières noires — une planche, pas trois cartes égales. */

.recit__interieur { display: grid; gap: var(--e-6); }
.recit__entete { display: grid; gap: var(--e-2); }
.recit__entete .surtitre { margin: 0; }
.recit__titre { font-size: var(--t-4xl); }

.recit__planche {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 5fr);
  gap: var(--e-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.recit__case {
  position: relative;
  display: grid;
  align-content: start;
  min-block-size: 30rem;
  padding: var(--e-4);
  overflow: hidden;
  background: var(--panneau);
  border: var(--trait-case) solid var(--blanc);
}

.recit__perso {
  position: absolute;
  z-index: 1;
  inset-inline-end: -4%;
  inset-block-end: -6%;
  block-size: 88%;
  inline-size: auto;
  max-inline-size: none;
  filter: drop-shadow(0 1rem 1.4rem var(--voile-fort));
  pointer-events: none;
}

/* La case du milieu inverse : Ghorab en haut, son cartouche en bas — sinon le
   cartouche lui couvre la tête. */
.recit__case--2 { align-content: end; }
.recit__case--2 .recit__perso { inset-block-end: auto; inset-block-start: -2%; inset-inline-end: -8%; block-size: 80%; }

.recit__cartouche {
  position: relative;
  z-index: 3;
  display: grid;
  gap: var(--e-1);
  max-inline-size: 17rem;
  padding: var(--e-3) var(--e-4);
  background: var(--blanc);
  color: var(--noir);
  border: var(--trait-case) solid var(--noir);
  box-shadow: .35rem .35rem 0 var(--noir);
}


.recit__numero { margin: 0; font-family: var(--titre); font-size: var(--t-sm); letter-spacing: var(--lettrage-capital); color: var(--rouge); }
.recit__nom { font-size: var(--t-2xl); line-height: 1; color: var(--noir); }
.recit__texte { margin: 0; font-size: var(--t-sm); line-height: 1.45; }

@media (max-width: 59.99rem) {
  .recit__planche { grid-template-columns: minmax(0, 1fr); gap: var(--e-2); }
  .recit__case { min-block-size: 0; padding: var(--e-3); padding-inline-end: 34%; }
  .recit__case { padding-inline-end: 24%; }
  .recit__perso,
  .recit__case--2 .recit__perso { block-size: 118%; inset-block-start: auto; inset-block-end: -30%; inset-inline-end: -8%; }
  .recit__case--2 { align-content: start; }
  .recit__cartouche { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: var(--e-2); max-inline-size: none; padding: var(--e-2) var(--e-3); box-shadow: .25rem .25rem 0 var(--noir); }
  .recit__texte { grid-column: 1 / -1; }
}

@media (max-width: 47.99rem) {
  .recit__interieur { gap: var(--e-3); }
  .recit__titre { font-size: var(--t-2xl); }
  .recit__nom { font-size: var(--t-lg); }
  .recit__texte { font-size: var(--t-xs); line-height: 1.4; }
}


/* ═══ V5 · LES DOUZE, TEXTES ENTIERS (lot 3) ═══════════════════════════════ */

.casting--entier .selection__description p + p { margin-block-start: var(--e-2); }

/* Le grand nom en filigrane passe sous un texte long : il s'efface davantage. */
.casting--entier .geant { opacity: .35; }

.selection__plus {
  display: none;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.casting--entier.est-deplie .selection__plus::after { rotate: 180deg; }

@media (max-width: 47.99rem) {
  .casting--entier .casting__titre { font-size: var(--t-xl); }
  .casting--entier .selection__description p + p { display: none; }
  .casting--entier.est-deplie .selection__description p + p { display: block; }
  .casting--entier .selection__plus { display: inline-flex; min-block-size: 2.25rem; font-size: var(--t-sm); }
}


/* ═══ V5 · LA FIN QUI NE POUSSE PAS (lot 4, /a-propos/) ═════════════════ */

.fin__liens { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-8); margin: 0; font-size: var(--t-lg); }


/* ═══ V5 · OÙ NOUS TROUVER ═════════════════════════════════════════════════
   La distribution, les chiffres, ce qu'on ne trouve qu'ici ; à droite,
   l'éventail des cinq cartes Jumbo, qui pivote sur son pied. */

.preuves { overflow: hidden; }

.preuves__interieur {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: var(--e-8) var(--e-12);
}

.preuves__texte { display: grid; gap: var(--e-4); justify-items: start; }
.preuves__texte .surtitre { margin: 0; }
.preuves__titre { font-size: var(--t-4xl); }
.preuves__chapeau { margin: 0; max-inline-size: 52ch; color: var(--texte); }

.preuves__chiffres {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--e-4);
  inline-size: 100%;
  margin: var(--e-2) 0;
  padding-block: var(--e-4);
  border-block: var(--filet) solid var(--acier);
}

.preuves__chiffres dt {
  font-family: var(--titre);
  font-size: var(--t-4xl);
  line-height: 1;
  color: var(--or);
}

.preuves__chiffres dd { margin: var(--e-1) 0 0; font-size: var(--t-sm); color: var(--gris); }

.preuves__ici { margin: 0; max-inline-size: 48ch; font-size: var(--t-lg); font-weight: 600; color: var(--blanc); }

.eventail {
  position: relative;
  aspect-ratio: 1 / 1;
  inline-size: 100%;
}

.eventail img {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: 4%;
  inline-size: 38%;
  max-inline-size: none;
  block-size: auto;
  border-radius: 6px;
  transform-origin: 50% 100%;
  translate: -50% 0;
  rotate: var(--eventail, 0deg);
  filter: drop-shadow(0 .8rem 1.2rem var(--voile-fort));
  transition: rotate var(--duree-action) var(--shonen);
}

.eventail:hover img { rotate: calc(var(--eventail, 0deg) * 1.3); }

@media (max-width: 47.99rem) {
  .preuves__interieur { grid-template-columns: minmax(0, 1fr); gap: var(--e-3); }
  .eventail { order: -1; inline-size: 62%; justify-self: center; aspect-ratio: 5 / 3; }
  .eventail img { inline-size: 30%; }
  .preuves__texte { gap: var(--e-2); }
  .preuves__texte .surtitre { font-size: var(--t-xs); }
  .preuves__titre { font-size: var(--t-2xl); }
  .preuves__chapeau { font-size: var(--t-xs); }
  .preuves__chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-2) var(--e-4); margin: 0; padding-block: var(--e-2); }
  .preuves__chiffres dt { font-size: var(--t-2xl); }
  .preuves__chiffres dd { font-size: var(--t-xs); }
  .preuves__ici { font-size: var(--t-sm); }
}


/* ═══ V5 · LE CONTACT ══════════════════════════════════════════════════════
   Premier écran : qui répond et en combien de temps, les chemins, les trois
   réponses. Second écran : le formulaire, sous l'œil de Taiyou. */

.contact5 { overflow: hidden; isolation: isolate; }
.decor--contact .decor__image { object-position: 50% 30%; opacity: .26; }

.contact5__interieur {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  align-items: center;
  gap: var(--e-8) var(--e-12);
}

.contact5__tete { display: grid; gap: var(--e-4); justify-items: start; }
.contact5__tete .surtitre { margin: 0; }

.contact5__titre {
  max-inline-size: 14ch;
  padding: var(--e-4) var(--e-6);
  background: var(--blanc);
  color: var(--noir);
  border: var(--trait-case) solid var(--noir);
  box-shadow: .5rem .5rem 0 var(--noir);
  font-size: var(--t-4xl);
  line-height: .95;
  rotate: -1.5deg;
}

.contact5__engagement {
  margin: 0;
  font-family: var(--titre);
  font-size: var(--t-xl);
  letter-spacing: var(--lettrage-capital);
  text-transform: uppercase;
  color: var(--or);
}

.contact5__chemins { display: grid; gap: var(--e-1); margin: var(--e-2) 0 0; padding: 0; list-style: none; font-size: var(--t-sm); color: var(--gris); }
.contact5__chemins li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); align-items: baseline; }
.contact5__chemins span { font-family: var(--titre); letter-spacing: .06em; text-transform: uppercase; color: var(--texte); }
.contact5__chemins a { justify-self: start; }
.contact5__chemins a { color: var(--blanc); text-decoration: underline; text-decoration-color: var(--rouge); text-underline-offset: .25em; }
.contact5__chemins a:hover { color: var(--or); text-decoration-color: var(--or); }

.contact5__avant {
  display: grid;
  gap: var(--e-4);
  justify-items: start;
  padding: var(--e-6);
  background: color-mix(in srgb, var(--panneau) 88%, transparent);
  border: var(--filet) solid var(--acier);
}

.contact5__sous-titre { font-size: var(--t-2xl); }
.contact5__reponses { display: grid; gap: var(--e-3); margin: 0; }
.contact5__reponses dt { font-weight: 700; color: var(--blanc); }
.contact5__reponses dd { margin: var(--e-1) 0 0; color: var(--gris); }

.ecrire__interieur {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  align-items: end;
  gap: var(--e-8);
}

.ecrire__hote {
  justify-self: center;
  inline-size: min(100%, 17rem);
  block-size: auto;
  filter: drop-shadow(0 1.2rem 1.6rem var(--voile-fort));
}

.ecrire__cadre {
  display: grid;
  gap: var(--e-4);
  align-self: center;
  padding: var(--e-6) var(--e-8);
  background: var(--panneau);
  border: var(--trait-case) solid var(--blanc);
  box-shadow: .6rem .6rem 0 var(--noir);
}

.ecrire__titre { font-size: var(--t-3xl); }

/* Le formulaire du thème, resserré dans son cadre : 16 px de police gardés
   (sous 16 px, Safari zoome au focus), des marges et un message plus courts. */
.ecrire .formulaire { gap: var(--e-3); }
.ecrire .formulaire__champ { gap: var(--e-1); }
.ecrire .formulaire__champ input { padding-block: var(--e-2); }
.ecrire .formulaire__champ textarea { block-size: 8.5rem; padding-block: var(--e-2); }
.ecrire .formulaire__action { margin-block-start: 0; }

@media (max-width: 47.99rem) {
  .contact5__interieur { grid-template-columns: minmax(0, 1fr); gap: var(--e-4); }
  .contact5__tete { gap: var(--e-2); }
  .contact5__tete .surtitre { font-size: var(--t-xs); }
  .contact5__titre { max-inline-size: none; font-size: var(--t-2xl); padding: var(--e-3) var(--e-4); }
  .contact5__engagement { font-size: var(--t-sm); }
  .contact5__tete .bouton { inline-size: 100%; }
  .contact5__chemins { font-size: var(--t-xs); }
  .contact5__chemins li { grid-template-columns: 5.5rem minmax(0, 1fr); }
  .contact5__avant { gap: var(--e-2); padding: var(--e-3) var(--e-4); }
  .contact5__sous-titre { font-size: var(--t-lg); }
  .contact5__reponses { gap: var(--e-2); font-size: var(--t-xs); }
  .ecrire__interieur { grid-template-columns: minmax(0, 1fr); }
  .ecrire__hote { display: none; }
  .ecrire__cadre { padding: var(--e-4); box-shadow: .35rem .35rem 0 var(--noir); }
  .ecrire__titre { font-size: var(--t-xl); }
  .ecrire .formulaire { gap: var(--e-2); }
  .ecrire .formulaire__champ label { font-size: var(--t-xs); }
  .ecrire .formulaire__champ textarea { block-size: 6rem; }
  .ecrire .formulaire__consentement { font-size: var(--t-xs); }

  /* Le premier écran du contact porte son bouton (« Écrire un message ») : la
     barre est repliée, sa réserve ne servirait qu'à pousser les réponses dehors. */
  .contact5.ecran { padding-block-end: var(--e-8); }

  /* Une fin sans bouton : la barre du téléphone reste là, sa réserve aussi. */
  .fin--sans-bouton.ecran { padding-block-end: calc(var(--e-8) + var(--barre-mobile)); }
}


/* ═══ V5 · LA FAQ (lot 5) ══════════════════════════════════════════════════
   Deux écrans de questions, les réponses viennent de la base : leurs liens et
   leurs paragraphes gardent la voix de la réponse. */

.bonus__haut { justify-self: start; }
.question__reponse { color: var(--gris); }
.question__reponse p { margin: 0 0 var(--e-2); }
.question__reponse p:last-child { margin-block-end: 0; }
.question__reponse a { color: var(--blanc); text-decoration: underline; text-decoration-color: var(--rouge); text-underline-offset: .25em; }
.question__reponse a:hover { color: var(--or); text-decoration-color: var(--or); }


/* ═══ V5 · LES PAGES DE DROIT ══════════════════════════════════════════════
   Un cartouche pour titre, la date de mise à jour, une colonne de 70 signes. */

.droit { display: grid; gap: var(--e-3); justify-items: start; padding-block: var(--e-16) var(--e-8); }
.droit .surtitre { margin: 0; }

.droit__titre {
  max-inline-size: 22ch;
  padding: var(--e-4) var(--e-6);
  background: var(--blanc);
  color: var(--noir);
  border: var(--trait-case) solid var(--noir);
  box-shadow: .5rem .5rem 0 var(--noir);
  font-size: var(--t-3xl);
  line-height: 1;
  rotate: -1deg;
}

.droit__maj { margin: 0; font-size: var(--t-sm); color: var(--gris); }
.droit__texte { max-inline-size: 70ch; padding-block-end: var(--e-16); }

@media (max-width: 47.99rem) {
  .droit { padding-block: var(--e-8) var(--e-6); }
  .droit__titre { font-size: var(--t-2xl); padding: var(--e-3) var(--e-4); }
}


/* ═══ V5 · LA PAGE INTROUVABLE ═════════════════════════════════════════════ */

.erreur { overflow: hidden; isolation: isolate; }
.decor--erreur .decor__image { opacity: .5; }

.erreur__interieur {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  align-items: center;
  gap: var(--e-8);
}

.erreur__texte { display: grid; gap: var(--e-4); justify-items: start; }
.erreur__texte .surtitre { margin: 0; }

.erreur__titre {
  padding: var(--e-4) var(--e-6);
  background: var(--blanc);
  color: var(--noir);
  border: var(--trait-case) solid var(--noir);
  box-shadow: .5rem .5rem 0 var(--noir);
  font-size: var(--t-4xl);
  line-height: .95;
  rotate: -1.5deg;
}

.erreur__chapeau { margin: 0; max-inline-size: 46ch; color: var(--texte); }
.erreur__texte .recherche { inline-size: min(100%, 28rem); }
.erreur__liens { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-6); margin: 0; }
.erreur__hote { justify-self: center; inline-size: min(100%, 20rem); block-size: auto; rotate: 8deg; filter: drop-shadow(0 1.2rem 1.6rem var(--voile-fort)); }

@media (max-width: 47.99rem) {
  .erreur__interieur { grid-template-columns: minmax(0, 1fr); gap: var(--e-3); }
  .erreur__hote { order: -1; inline-size: 7rem; }
  .erreur__titre { font-size: var(--t-2xl); padding: var(--e-3) var(--e-4); }
  .erreur__chapeau { font-size: var(--t-sm); }
  .erreur__texte { gap: var(--e-3); }
  .erreur__texte .bouton { inline-size: 100%; }
}


/* ═══ V5 · LA RECHERCHE ════════════════════════════════════════════════════ */

.recherche5 .surtitre { margin: 0 0 var(--e-2); }
.recherche5 .entete-section__titre {
  display: inline-block;
  padding: var(--e-3) var(--e-4);
  background: var(--blanc);
  color: var(--noir);
  border: var(--trait-case) solid var(--noir);
  box-shadow: .4rem .4rem 0 var(--noir);
  rotate: -1deg;
}

/* Relecture du lot 5. La tête des pages de droit prend la largeur de leur
   colonne de lecture : le titre et le texte partent du même bord. */
.droit { max-inline-size: 70ch; }

/* La recherche : des titres de résultat à la taille d'une réponse, pas d'une
   affiche — blancs, soulignés de rouge comme les autres liens V5. */
.recherche5 .liste-articles h2 { font-size: var(--t-2xl); }
.recherche5 .liste-articles h2 a { color: var(--blanc); text-decoration-color: var(--rouge); }
.recherche5 .liste-articles h2 a:hover { color: var(--or); }

/* La FAQ au téléphone : huit questions tiennent si le sceau et le chapeau
   laissent la place ; le lien « Les questions des parents » dit l'essentiel. */
@media (max-width: 47.99rem) {
  #manga.bonus .sceau,
  #manga.bonus .bonus__chapeau,
  #commande.bonus .sceau { display: none; }
}


/* ═══ V5 · LES TOMES SEULS, ET LE RESTE (lot 6, /boutique/) ═══════════════
   Quatre fiches de même poids : ce ne sont pas des choix à départager, ce
   sont les pièces détachées. Pas de bouton plein ; le lien mène à la fiche. */

.unite__interieur { display: grid; gap: var(--e-6); }
.unite__entete { display: grid; gap: var(--e-2); }
.unite__entete .surtitre { margin: 0; }
.unite__titre { font-size: var(--t-4xl); }

.unite__liste {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--e-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.article {
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
  gap: var(--e-2);
  align-content: start;
  padding: var(--e-4);
  background: var(--panneau);
  border: var(--filet) solid var(--acier);
  transition: border-color var(--duree-action) var(--sortie), translate var(--duree-action) var(--shonen);
}

.article:hover { border-color: var(--or); translate: 0 -4px; }

.article__image { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--noir); }
.article__image img { inline-size: 100%; block-size: 100%; max-inline-size: none; object-fit: contain; }

.article__nom { font-size: var(--t-xl); line-height: 1.05; }
.article__nom a { color: var(--blanc); text-decoration: none; }
.article__nom a:hover { color: var(--or); }
.article__phrase { margin: 0; font-size: var(--t-sm); color: var(--gris); }
.article__prix { margin: 0; font-family: var(--titre); font-size: var(--t-2xl); line-height: 1; color: var(--or); }
.article__lien { justify-self: start; }

.unite__note { margin: 0; color: var(--gris); }

@media (max-width: 59.99rem) {
  .unite__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); }
}

@media (max-width: 47.99rem) {
  .unite__interieur { gap: var(--e-3); }
  .unite__entete .surtitre { font-size: var(--t-xs); }
  .unite__titre { font-size: var(--t-2xl); }
  .article { gap: var(--e-1); padding: var(--e-2); }
  .article__image { aspect-ratio: 4 / 3; }
  .article__nom { font-size: var(--t-base); }
  .article__phrase { display: none; }
  .article__prix { font-size: var(--t-lg); }
  .article__lien { min-block-size: 2.25rem; font-size: var(--t-xs); }
  .unite__note { font-size: var(--t-xs); }
}

/* Le paquet de cartes, en vignette : trois vraies cartes qui pivotent sur leur pied. */
.article__eventail { position: relative; display: block; inline-size: 100%; block-size: 100%; background: color-mix(in srgb, var(--or) 18%, var(--panneau)); }
.article__eventail img {
  position: absolute;
  inset-block-end: 6%;
  inset-inline-start: 50%;
  inline-size: 40%;
  block-size: auto;
  max-inline-size: none;
  border-radius: 4px;
  transform-origin: 50% 100%;
  translate: -50% 0;
  rotate: var(--eventail, 0deg);
  filter: drop-shadow(0 .5rem .8rem var(--voile-fort));
  transition: rotate var(--duree-action) var(--shonen);
}
.article:hover .article__eventail img { rotate: calc(var(--eventail, 0deg) * 1.4); }


/* ═══ V5 · LES FICHES PRODUIT (24 septembre 2026) ══════════════════════════
   L'objet dans une case, la commande à côté ; puis l'extrait, « pour aller
   plus loin », les questions et les avis. Les règles de la fiche d'avant
   (40-boutique.css, `#contenu > .product` en deux colonnes) ne s'appliquent
   pas à la fiche V5 : `#contenu > .product.fiche-v5` les neutralise. */

/* 40-boutique.css borne `#contenu > .product` à 72 rem : la fiche V5 prend toute la largeur, comme les autres pages. */
#contenu > .product.fiche-v5 { display: block; max-inline-size: none; margin: 0; padding: 0; }

.vitrine { overflow: clip; isolation: isolate; }
@media (min-width: 48rem) { .vitrine.ecran { padding-block: var(--e-8); } }

.vitrine__interieur {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: var(--e-8) var(--e-12);
}

/* La colonne du visuel porte le conteneur (la pastille se règle sur sa largeur) :
   une case en `fit-content` ne peut pas être elle-même un conteneur de taille. */
.vitrine__visuel { position: relative; display: grid; place-items: center; container-type: inline-size; }
.vitrine__visuel .braises { z-index: 0; }

/* La case : l'image dans un cadre de planche, jamais recadrée. */
.vitrine__case {
  position: relative;
  z-index: 1;
  inline-size: fit-content;
  max-inline-size: 100%;
  margin: 0;
  background: var(--panneau-creux);
  border: var(--trait-case) solid var(--noir);
  box-shadow: 0 0 0 var(--filet) var(--acier), 0 1.5rem 3rem var(--voile-fort);
}

.vitrine__case img {
  display: block;
  inline-size: auto;
  max-inline-size: 100%;
  block-size: auto;
  max-block-size: calc(100svh - var(--hauteur-entete) - 7rem);
}

.vitrine__case--clair { background: var(--blanc); }

/* La pastille : couvre sur l'étal de Karama ce que le site ne dit pas du pack. */
.vitrine__pastille {
  position: absolute;
  display: grid;
  place-items: center;
  background: var(--or);
  color: var(--noir);
  font-family: var(--titre);
  font-size: clamp(.55rem, 2.3cqi, 1.35rem);
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: skewX(var(--cisaille));
  box-shadow: .25rem .25rem 0 var(--noir);
}

.vitrine__pastille > span { transform: skewX(var(--contre-cisaille)); }

/* Le paquet de cartes : quatre vraies cartes qui pivotent sur leur pied. */
.vitrine__eventail { position: relative; z-index: 1; inline-size: min(100%, 34rem); aspect-ratio: 5 / 4; }

.vitrine__eventail img {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: 4%;
  inline-size: 40%;
  block-size: auto;
  max-inline-size: none;
  border-radius: 6px;
  transform-origin: 50% 100%;
  translate: -50% 0;
  rotate: var(--eventail, 0deg);
  filter: drop-shadow(0 .8rem 1.2rem var(--voile-fort));
  transition: rotate var(--duree-action) var(--shonen);
}

.vitrine__eventail:hover img { rotate: calc(var(--eventail, 0deg) * 1.5); }

.vitrine__objets { position: relative; z-index: 1; inline-size: min(100%, 36rem); }
.vitrine__objets .coffret__objets { margin: 0; }

/* La colonne de la commande. */
.vitrine__colonne { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-3); }
.vitrine__surtitre { margin: 0; }

.vitrine__titre {
  display: grid;
  gap: var(--e-1);
  max-inline-size: 100%;
  margin: 0;
  padding: var(--e-3) var(--e-6) var(--e-4);
  background: var(--blanc);
  color: var(--noir);
  border: var(--trait-case) solid var(--noir);
  box-shadow: .5rem .5rem 0 var(--noir);
  rotate: -1.5deg;
}

.vitrine__nom { font-family: var(--titre); font-size: var(--t-3xl); line-height: .95; text-transform: uppercase; }
.vitrine__sous-titre { font-family: var(--corps); font-size: var(--t-lg); font-weight: 600; line-height: 1.25; text-transform: none; }

.vitrine__note { margin: 0; font-size: var(--t-sm); }
.vitrine__note a { color: var(--texte); text-decoration: none; }
.vitrine__note a:hover { color: var(--or); }
.vitrine__etoiles { color: var(--or); }

#contenu .fiche-v5.product .summary .price { margin: var(--e-1) 0 0; font-size: var(--t-4xl); line-height: 1; }
#contenu .fiche-v5.product .summary .price .woocommerce-Price-currencySymbol { font-size: .7em; }

.vitrine__resume { margin: 0; max-inline-size: 42ch; font-size: var(--t-lg); color: var(--texte); }

.vitrine__faits { display: grid; gap: var(--e-1); inline-size: 100%; margin: 0; padding-block: var(--e-2); border-block: var(--filet) solid var(--acier); }
.vitrine__faits > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); align-items: baseline; gap: var(--e-3); }
.vitrine__faits dt { font-family: var(--titre); font-size: var(--t-sm); letter-spacing: var(--lettrage-capital); text-transform: uppercase; color: var(--or); }
.vitrine__faits dd { margin: 0; font-size: var(--t-sm); color: var(--texte); }
.vitrine__faits > .vitrine__contenu { grid-template-columns: minmax(0, 1fr); gap: var(--e-1); }
.vitrine__contenu ul { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: .15rem var(--e-6); margin: 0; padding: 0; list-style: none; }
.vitrine__contenu li { position: relative; padding-inline-start: .9rem; }
.vitrine__contenu li::before { content: ''; position: absolute; inset-inline-start: 0; inset-block-start: .55em; inline-size: .4rem; block-size: .4rem; background: var(--rouge); }

/* Le formulaire de WooCommerce, dans la colonne. */
.vitrine__commande { inline-size: 100%; }
#contenu .fiche-v5.product .summary form.cart { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--e-2); margin: 0; }
#contenu .fiche-v5.product .summary form.variations_form { display: block; }
#contenu .fiche-v5.product .summary table.variations { inline-size: 100%; margin: 0 0 var(--e-3); border: 0; }
#contenu .fiche-v5.product .summary table.variations tbody,
#contenu .fiche-v5.product .summary table.variations tr { display: grid; gap: var(--e-2); }
#contenu .fiche-v5.product .summary table.variations th,
#contenu .fiche-v5.product .summary table.variations td { display: block; padding: 0; border: 0; text-align: start; line-height: 1.2; }
#contenu .fiche-v5.product .summary table.variations th label,
#contenu .fiche-v5.product .summary .pack-taille__libelle { color: var(--or); font-family: var(--titre); font-size: var(--t-sm); font-weight: 400; letter-spacing: var(--lettrage-capital); text-transform: uppercase; }
#contenu .fiche-v5.product .summary table.variations td { position: relative; }
#contenu .fiche-v5.product .summary .reset_variations { display: none !important; }
#contenu .fiche-v5.product .summary .single_variation .woocommerce-variation-price,
#contenu .fiche-v5.product .summary .single_variation .woocommerce-variation-availability { display: none; }
#contenu .fiche-v5.product .summary .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--e-2); }
#contenu .fiche-v5.product .summary .pack-taille { flex: 1 1 100%; position: relative; margin: 0 0 var(--e-1); }
#contenu .fiche-v5.product .summary .quantity .qty { block-size: 100%; min-block-size: 3.25rem; }
#contenu .fiche-v5.product .summary .single_add_to_cart_button { flex: 1 1 14rem; min-block-size: 3.25rem; font-size: var(--t-lg); box-shadow: 0 0 1.4rem var(--halo-rouge); }
#contenu .fiche-v5.product .summary .single_add_to_cart_button.loading { opacity: .6; }

/* Les pastilles : chaque choix est un bouton, le <select> de WooCommerce reste la source. */
.vitrine__select-cache { position: absolute !important; inset: 0 auto auto 0; inline-size: 1px !important; block-size: 1px !important; opacity: 0; pointer-events: none; }
.vitrine__puces { display: flex; flex-wrap: wrap; gap: var(--e-2); }

.vitrine__puce {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  align-items: baseline;
  gap: .1rem var(--e-2);
  min-block-size: 2.75rem;
  padding: var(--e-2) var(--e-3);
  background: var(--panneau);
  border: var(--filet) solid var(--acier);
  color: var(--texte);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: border-color var(--duree-action) var(--sortie), background-color var(--duree-action) var(--sortie), color var(--duree-action) var(--sortie);
}

.vitrine__puce:hover { border-color: var(--or-filet); color: var(--blanc); }
.vitrine__puce:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
.vitrine__puce[aria-pressed="true"] { border-color: var(--or); background: color-mix(in srgb, var(--or) 14%, var(--panneau)); color: var(--blanc); }
.vitrine__puce-nom { font-family: var(--titre); font-size: var(--t-lg); letter-spacing: .04em; text-transform: uppercase; line-height: 1; }
.vitrine__puce-prix { font-family: var(--titre); font-size: var(--t-lg); color: var(--or); line-height: 1; }
.vitrine__puce-detail { grid-column: 1 / -1; max-inline-size: 26ch; font-size: var(--t-xs); color: var(--gris); line-height: 1.35; }
.vitrine__puce[aria-pressed="true"] .vitrine__puce-detail { color: var(--texte); }

/* Une taille manque : les pastilles le disent, et la phrase aussi. */
.vitrine--a-choisir .pack-taille .vitrine__puce { border-color: var(--rouge); }
.vitrine__annonce { flex: 1 1 100%; margin: 0; color: var(--or); font-size: var(--t-sm); }
.vitrine__annonce:empty { display: none; }

/* Les gages : une ligne serrée sous le bouton, la preuve collée à la demande. */
#contenu .fiche-v5.product .summary .fiche-gages { display: flex; flex-wrap: wrap; gap: .2rem var(--e-4); inline-size: 100%; margin: 0; padding: 0; border: 0; }
#contenu .fiche-v5.product .summary .fiche-gages__ligne { font-size: var(--t-xs); line-height: 1.4; }

/* Pour aller plus loin : deux cases, une question chacune. */
.suite-fiche__interieur { display: grid; gap: var(--e-6); }
.suite-fiche__titre { font-size: var(--t-4xl); }
.suite-fiche__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-6); margin: 0; padding: 0; list-style: none; }

.suite-fiche__carte {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: var(--e-4);
  padding: var(--e-4);
  background: var(--panneau);
  border: var(--filet) solid var(--acier);
  transition: border-color var(--duree-action) var(--sortie), translate var(--duree-action) var(--shonen);
}

.suite-fiche__carte:hover { border-color: var(--or-filet); translate: 0 -4px; }
.suite-fiche__visuel { display: block; }
.suite-fiche__visuel > img { display: block; inline-size: 100%; block-size: auto; }
.suite-fiche__clair { background: var(--blanc); }
.suite-fiche__objets { display: block; }
.suite-fiche__objets .coffret__objets { margin: 0; }
.suite-fiche__eventail { position: relative; display: block; aspect-ratio: 5 / 4; }
.suite-fiche__eventail img { position: absolute; inset-inline-start: 50%; inset-block-end: 4%; inline-size: 42%; block-size: auto; max-inline-size: none; border-radius: 4px; transform-origin: 50% 100%; translate: -50% 0; rotate: var(--eventail, 0deg); filter: drop-shadow(0 .5rem .8rem var(--voile-fort)); }
.suite-fiche__texte { display: grid; gap: var(--e-2); justify-items: start; }
.suite-fiche__question { margin: 0; font-family: var(--titre); font-size: var(--t-lg); letter-spacing: .04em; text-transform: uppercase; color: var(--or); }
.suite-fiche__nom { font-size: var(--t-2xl); line-height: 1; }
.suite-fiche__nom a { color: var(--blanc); text-decoration: none; }
.suite-fiche__nom a:hover { color: var(--or); }
.suite-fiche__prix { color: var(--or); white-space: nowrap; }
.suite-fiche__phrase { margin: 0; font-size: var(--t-sm); color: var(--gris); }

/* Les cartes, en grand. */
.cartes-fiche__interieur { display: grid; gap: var(--e-6); }
.cartes-fiche__entete { display: grid; gap: var(--e-2); }
.cartes-fiche__titre { max-inline-size: 24ch; font-size: var(--t-4xl); }
.cartes-fiche__chapeau { margin: 0; color: var(--gris); }
.cartes-fiche__liste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-6); margin: 0; padding: 0; list-style: none; }
.cartes-fiche__liste img { display: block; inline-size: 100%; block-size: auto; border-radius: 8px; rotate: calc((var(--rang) - 1.5) * 1.5deg); filter: drop-shadow(0 1rem 1.4rem var(--voile-fort)); transition: rotate var(--duree-action) var(--shonen), scale var(--duree-action) var(--shonen); }
.cartes-fiche__liste img:hover { rotate: 0deg; scale: 1.04; }

/* Les avis : la section de WooCommerce, sans son titre ni son « pas encore d'avis ». */
.avis-fiche { padding-block: var(--e-12) var(--e-16); }
.avis-fiche__interieur { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--e-6) var(--e-12); align-items: start; }
.avis-fiche__entete { display: grid; gap: var(--e-2); }
.avis-fiche__titre { font-size: var(--t-3xl); }
.avis-fiche__chapeau { margin: 0; color: var(--gris); }
.avis-fiche__moyenne { margin: 0; color: var(--or); font-family: var(--titre); font-size: var(--t-xl); letter-spacing: var(--lettrage-capital); }
.avis-fiche .woocommerce-Reviews-title,
.avis-fiche .woocommerce-noreviews,
.avis-fiche--vide #reply-title { display: none; }
.avis-fiche #reviews { margin: 0; }
.avis-fiche .commentlist { margin: 0 0 var(--e-6); padding: 0; list-style: none; display: grid; gap: var(--e-4); }

/* Le formulaire, au style du formulaire de contact (30-pages.css, `.formulaire`) :
   libellés en capitales, case et barre de défilement sombres, note manquante dite
   en or. Trois identifiants : woocommerce.css et 40-boutique.css en portent deux ou trois. */
#contenu .fiche-v5 #reviews #respond { color-scheme: dark; }
#contenu .fiche-v5 #reviews #reply-title { display: block; margin-block-end: var(--e-4); color: var(--blanc); font-family: var(--titre); font-size: var(--t-xl); letter-spacing: var(--lettrage-capital); text-transform: uppercase; }
/* Sans avis, l'en-tête de la section invite déjà : le titre de WooCommerce reste masqué (trois identifiants, comme la règle du dessus). */
#contenu .fiche-v5 .avis-fiche--vide #reviews #reply-title { display: none; }
#contenu .fiche-v5 #reviews #respond .comment-form-rating { margin-block-end: var(--e-4); }
#contenu .fiche-v5 #reviews #respond .comment-notes { color: var(--gris); font-size: var(--t-xs); }
#contenu .fiche-v5 #reviews #respond label { color: var(--blanc); font-family: var(--titre); font-size: var(--t-sm); letter-spacing: var(--lettrage-capital); text-transform: uppercase; }
#contenu .fiche-v5 #reviews #respond .required { color: var(--or); }
#contenu .fiche-v5 #reviews #respond #comment { block-size: 8.5rem; resize: vertical; }
#contenu .fiche-v5 #reviews #respond p.stars { margin: 0; font-size: var(--t-2xl); line-height: 1; }
#contenu .fiche-v5 #reviews #respond p.stars a { margin-inline-end: .3em; }
#contenu .fiche-v5 #reviews #respond .comment-form-cookies-consent label { margin: 0; color: var(--gris); font-family: inherit; font-size: var(--t-sm); letter-spacing: normal; text-transform: none; }
#contenu .fiche-v5 #reviews #respond .comment-form-cookies-consent input { inline-size: 1.05rem; block-size: 1.05rem; margin-block-start: .2rem; accent-color: var(--rouge); }
.avis-fiche__annonce { margin: var(--e-2) 0 0; color: var(--or); font-size: var(--t-sm); }
.avis-fiche__annonce:empty { display: none; }

/* Les avis publiés : des bulles de parole, blanches, comme les répliques du manga
   (la bulle noire est la pensée, section des parents) ; la note et le nom dessous,
   comme celui qui parle sous sa réplique. Pas de portrait (parties/v5/fiche-avis.php). */
#contenu .fiche-v5 #reviews #comments .commentlist { gap: var(--e-6); }
#contenu .fiche-v5 #reviews #comments .commentlist li { margin: 0; padding: 0; }
#contenu .fiche-v5 #reviews #comments .commentlist .comment-text {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "bulle bulle" "note qui";
  align-items: center;
  gap: var(--e-4) var(--e-3);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
}
#contenu .fiche-v5 #reviews #comments .commentlist .description {
  grid-area: bulle;
  position: relative;
  padding: var(--e-4) var(--e-6);
  background: var(--blanc);
  color: var(--noir);
  border-radius: 1.75rem;
}
/* La queue de la bulle, vers celui qui parle. */
#contenu .fiche-v5 #reviews #comments .commentlist .description::after {
  content: '';
  position: absolute;
  inset-block-end: -.85rem;
  inset-inline-start: 2rem;
  inline-size: 1.4rem;
  block-size: .9rem;
  background: var(--blanc);
  clip-path: polygon(0 0, 100% 0, 15% 100%);
}
#contenu .fiche-v5 #reviews #comments .commentlist .description p { margin: 0; line-height: 1.55; }
#contenu .fiche-v5 #reviews #comments .commentlist .description p + p { margin-block-start: var(--e-2); }
#contenu .fiche-v5 #reviews #comments .commentlist .star-rating { grid-area: note; float: none; margin: 0 0 0 var(--e-4); }
#contenu .fiche-v5 #reviews #comments .commentlist .star-rating::before { color: var(--acier); }
#contenu .fiche-v5 #reviews #comments .commentlist .meta { grid-area: qui; margin: 0; color: var(--gris); font-size: var(--t-xs); }
#contenu .fiche-v5 #reviews #comments .commentlist .woocommerce-review__author { color: var(--blanc); font-family: var(--titre); font-size: var(--t-base); font-weight: 400; letter-spacing: var(--lettrage-capital); text-transform: uppercase; }
#contenu .fiche-v5 #reviews #comments .commentlist .woocommerce-review__verified { color: var(--or); font-style: normal; }

@media (max-width: 59.99rem) {
  .suite-fiche__liste { grid-template-columns: minmax(0, 1fr); gap: var(--e-3); }
  .avis-fiche__interieur { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 47.99rem) {
  .vitrine__interieur { grid-template-columns: minmax(0, 1fr); gap: var(--e-4); }
  .vitrine__case img { max-block-size: 36svh; }
  .vitrine__eventail { inline-size: min(100%, 17rem); }
  /* Toute la largeur du contenu (Hamid regarde les packs sur téléphone, 09/10/2026) ; pas jusqu'aux bords :
     les cartes qui débordent un peu de la table restent visibles dans la gouttière. */
  .vitrine__objets { inline-size: 100%; }
  .vitrine__colonne { gap: var(--e-2); }
  /* Au téléphone, le bouton passe avant le détail : l'étal de Karama montre déjà le contenu. */
  .vitrine__faits { order: 1; }
  .vitrine__puce { min-block-size: 2.5rem; }
  .vitrine__puce-nom, .vitrine__puce-prix { font-size: var(--t-base); }
  .vitrine__surtitre { font-size: var(--t-xs); }
  .vitrine__titre { padding: var(--e-2) var(--e-4) var(--e-3); }
  .vitrine__nom { font-size: var(--t-3xl); }
  .vitrine__sous-titre { font-size: var(--t-sm); }
  #contenu .fiche-v5.product .summary .price { font-size: var(--t-3xl); }
  .vitrine__resume { font-size: var(--t-sm); }
  .vitrine__faits > div { grid-template-columns: 6rem minmax(0, 1fr); }
  .vitrine__faits dd, .vitrine__contenu li { font-size: var(--t-xs); }
  .vitrine__contenu ul { gap: 0 var(--e-4); }
  .vitrine__puce { padding: var(--e-1) var(--e-3); }
  .vitrine__puce-detail { max-inline-size: 22ch; }
  #contenu .fiche-v5.product .summary .fiche-gages__ligne { font-size: var(--t-xs); }
  .suite-fiche__titre, .cartes-fiche__titre { font-size: var(--t-2xl); }
  .suite-fiche__carte { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); padding: var(--e-3); gap: var(--e-3); }
  .suite-fiche__question { font-size: var(--t-sm); }
  .suite-fiche__nom { font-size: var(--t-lg); }
  .suite-fiche__phrase { font-size: var(--t-xs); }
  .cartes-fiche__interieur { gap: var(--e-3); }
  .cartes-fiche__chapeau { font-size: var(--t-sm); }
  .cartes-fiche__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-2) var(--e-4); inline-size: min(100%, 17rem); justify-self: center; }
  .avis-fiche { padding-block: var(--e-8) calc(var(--e-8) + var(--barre-mobile)); }
  .avis-fiche__titre { font-size: var(--t-2xl); }
  #contenu .fiche-v5 #reviews #comments .commentlist .description { padding: var(--e-3) var(--e-4); font-size: var(--t-sm); }
  #contenu .fiche-v5 #reviews #comments .commentlist .comment-text { grid-template-areas: "bulle bulle" "note note" "qui qui"; gap: var(--e-2); }
  #contenu .fiche-v5 #reviews #comments .commentlist .star-rating { margin-block-start: var(--e-2); }
}

/* La lecture d'un seul tome (fiche d'un produit à un tome) : sans l'autre onglet. */
.lecture--un-tome .lecture__tomes,
.lecture--un-tome .lecture__vers { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════
   LES CARTES À COLLECTIONNER (accueil, entre le soutien et l'offre)
   ═══════════════════════════════════════════════════════════════════════
   Demande d'Hamid (29/08/2026), revenue le 01/10/2026 (D-122). La rangée,
   le cover-flow, l'inclinaison et le retournement sont ceux de 30-pages.css
   (« LES CARTES À COLLECTIONNER ») ; ici, seulement ce qui l'accorde à la V5 :
   un fond rouge sourd qui la distingue du soutien (or) et de l'offre (or),
   l'en-tête en deux colonnes comme celui de l'offre, et une section qui tient
   dans un écran. La rangée, elle, reste pleine largeur : c'est elle qui
   déborde de la page et dit « ça continue ».                              */

.cartes5 {
  /* ⚠ Une colonne BORNÉE : sans `minmax(0, 1fr)`, la rangée de 36 cartes impose
     sa largeur naturelle (des milliers de pixels) à la grille de `.ecran`, et
     tout le contenu se retrouve centré hors de l'écran (vu le 01/10/2026). */
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: var(--e-4);
  background:
    radial-gradient(45% 60% at 50% 58%, var(--rouge-voile), transparent 70%),
    var(--panneau-creux);
  /* `clip` et non `hidden` : une boîte `hidden` peut encore défiler par script
     (un focus, un scrollIntoView), et la section glissait de côté. */
  overflow-x: clip;
}

.cartes5 > * { min-inline-size: 0; }

.cartes5__entete {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--e-8);
  row-gap: var(--e-2);
  align-items: end;
}

.cartes5__entete .surtitre { grid-column: 1 / -1; margin: 0; }
.cartes5__titre { grid-column: 1 / span 7; margin: 0; font-size: var(--t-3xl); }
.cartes5__chapeau { grid-column: 8 / -1; max-inline-size: 44ch; margin: 0; }

.cartes5__pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
}

.cartes5 .cartes__commandes { margin: 0; }

/* La rangée perd un peu de hauteur ici : la section doit tenir dans un écran,
   en-tête et pied compris. */
.cartes5 { --carte5: clamp(10rem, 20vw, 14rem); }
.cartes5 .carte-jeu { inline-size: var(--carte5); }

/* ⚠ Le rail commence et finit par une demi-largeur de vide, calculée sur la
   largeur d'UNE carte (30-pages.css) : la largeur change ici, le vide aussi,
   sinon la première et la dernière carte n'atteignent plus le centre. */
.cartes5 .cartes__piste {
  padding-block: var(--e-4) var(--e-2);
  padding-inline: calc(50% - var(--carte5) / 2);
}

@media (max-width: 47.99rem) {
  .cartes5__entete { grid-template-columns: minmax(0, 1fr); }
  .cartes5__titre,
  .cartes5__chapeau { grid-column: 1 / -1; }
  .cartes5__pied { flex-direction: column; justify-content: center; }
  .cartes5__packs { text-align: center; }
  .cartes5 { --carte5: clamp(9rem, 44vw, 10.5rem); }
}


/* ═══ LE RETOUR D'HAMID (8 octobre 2026) ═════════════════════════════════
   Deux sections nouvelles sur l'accueil : « pour qui, et ce que ça
   transmet » (après la lecture), et les avis (avant l'offre, vide tant
   qu'il n'y a pas de vrais avis). */

/* ─── Pour qui, et ce que ça transmet ─────────────────────────────────── */
.pourqui {
  isolation: isolate;
  overflow: clip;
  background: var(--panneau-creux);
}

.decor--pourqui .decor__image { object-position: 50% 60%; opacity: .3; }

.pourqui__interieur {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) minmax(0, 4fr);
  gap: var(--e-8);
  align-items: center;
}

.pourqui__age { display: grid; gap: var(--e-3); align-content: center; }

.pourqui__titre {
  font-size: var(--t-5xl);
  line-height: .9;
  color: var(--or);
}

.pourqui__texte { max-inline-size: 30ch; font-size: var(--t-lg); color: var(--texte); }

.pourqui__transmet {
  display: grid;
  gap: var(--e-4);
  padding-inline-start: var(--e-8);
  border-inline-start: var(--filet) solid var(--acier);
}

.pourqui__sous-titre {
  font-family: var(--titre);
  font-size: var(--t-lg);
  font-weight: 400;
  letter-spacing: var(--lettrage-capital);
  text-transform: uppercase;
  color: var(--or);
}

.pourqui__valeurs { display: grid; gap: var(--e-1); }

.pourqui__valeurs li {
  position: relative;
  padding-inline-start: var(--e-6);
  font-family: var(--titre);
  font-size: var(--t-3xl);
  line-height: 1.05;
  letter-spacing: var(--lettrage-titre);
  text-transform: uppercase;
  color: var(--blanc);
}

.pourqui__valeurs li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .38em;
  inline-size: .55rem;
  block-size: .55rem;
  background: var(--rouge);
  transform: skewX(var(--cisaille));
}

/* La maxime dans un cartouche de narration, comme ceux de la plongée. */
.pourqui__maxime {
  justify-self: start;
  margin-block-start: var(--e-2);
  padding: var(--e-2) var(--e-4);
  background: var(--blanc);
  color: var(--noir);
  border: var(--trait-case) solid var(--noir);
  box-shadow: .35rem .35rem 0 var(--noir);
  font-family: var(--titre);
  font-size: var(--t-xl);
  letter-spacing: var(--lettrage-titre);
  text-transform: uppercase;
  rotate: -1.2deg;
}

.pourqui__hote {
  justify-self: center;
  inline-size: 100%;
  max-inline-size: 20rem;
  block-size: auto;
  filter: drop-shadow(0 1rem 1.6rem var(--voile-fort));
}

@media (prefers-reduced-motion: no-preference) {
  .pourqui__hote { animation: plongee-flotte 8s ease-in-out infinite; }
}

@media (max-width: 63.99rem) {
  .pourqui__interieur { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pourqui__hote { display: none; }
}

@media (max-width: 47.99rem) {
  .pourqui__interieur { grid-template-columns: minmax(0, 1fr); gap: var(--e-6); }
  .pourqui__titre { font-size: var(--t-4xl); }
  .pourqui__texte { font-size: var(--t-base); }
  .pourqui__transmet { padding-inline-start: 0; padding-block-start: var(--e-6); border-inline-start: 0; border-block-start: var(--filet) solid var(--acier); }
  .pourqui__valeurs li { font-size: var(--t-2xl); }
  .pourqui__maxime { font-size: var(--t-lg); }
}

/* ─── Les avis ─────────────────────────────────────────────────────────── */
.avis5 { background: var(--panneau-creux); }

.avis5__interieur { display: grid; gap: var(--e-6); }

.avis5__titre { font-size: var(--t-4xl); }

.avis5__chapeau { max-inline-size: 48ch; margin-block-start: var(--e-2); color: var(--texte); }

.avis5__liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--e-6);
}

/* Une bulle de manga : papier blanc, trait d'encre, la queue vers l'auteur. */
.avis5__bulle {
  position: relative;
  display: grid;
  gap: var(--e-3);
  block-size: 100%;
  margin: 0;
  padding: var(--e-4) var(--e-6) var(--e-6);
  background: var(--blanc);
  color: var(--noir);
  border: var(--trait-case) solid var(--noir);
  border-radius: 1.4rem;
  box-shadow: .4rem .4rem 0 var(--noir);
}

.avis5__note { color: var(--or-fonce, #B8860B); letter-spacing: .12em; }

.avis5__texte { margin: 0; font-size: var(--t-base); line-height: 1.5; }

.avis5__texte p::before { content: '« '; }
.avis5__texte p::after { content: ' »'; }

.avis5__auteur { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-3); align-self: end; font-size: var(--t-sm); color: #3F3F46; }
.avis5__auteur strong { color: var(--noir); }

.avis5__verifie {
  padding: 0 var(--e-2);
  border: var(--filet) solid currentColor;
  border-radius: 999px;
  font-size: var(--t-xs);
}

@media (max-width: 47.99rem) {
  .avis5__titre { font-size: var(--t-3xl); }
  .avis5__liste { gap: var(--e-4); }
  .avis5__bulle { padding: var(--e-3) var(--e-4) var(--e-4); }
}

/* ─── Le bandeau de la livraison offerte, et l'entrée qui lui fait place ──
   Le bandeau (rallumé le 08/10/2026) prend une ligne au-dessus de l'entête.
   Sans correction, il poussait les deux boutons de l'entrée sous le premier
   écran (bas à 914 px pour 900, mesuré à 1440 × 900) : l'entrée rend cette
   ligne sur le logo et le duo. Au téléphone, le texte tient sur UNE ligne
   (il en prenait deux, 66 px). */
@media (min-width: 48rem) {
  body:has(.bandeau) .entree {
    --nom-taille: min(22vw, calc(32svh - 1.5rem));
    --duo-hauteur: min(calc(47svh - 2rem), 31rem);
  }
  body:has(.bandeau) .entree__scene { min-block-size: calc(100svh - var(--hauteur-entete) - 2.5rem); }
}

@media (max-width: 47.99rem) {
  .bandeau { padding-block: var(--e-2); padding-inline: var(--e-2); }
  .bandeau__texte { font-size: var(--t-xs); letter-spacing: .06em; }

  body:has(.bandeau) .entree { --duo-hauteur: min(calc(52svh - 2.25rem), calc((100vw - 2 * var(--gouttiere)) / 1.06)); }
  body:has(.bandeau) .entree__scene { min-block-size: calc(100svh - var(--hauteur-entete) - 2.25rem); }
}

@media (max-width: 47.99rem) and (max-height: 42rem) {
  body:has(.bandeau) .entree { --duo-hauteur: min(calc(40svh - 2.25rem), calc((100vw - 2 * var(--gouttiere)) / 1.06)); }
}