/**
 * 30 · LES PAGES — ce qui n'appartient qu'à un endroit.
 *
 * Tout ce qui se répète est déjà dans `20-motifs.css`. Ce qui arrive ici est,
 * par définition, unique : l'entête, le pied, le héros, chaque section de
 * l'accueil.
 */


/* ═══════════════════════════════════════════════════════════════════════
   LE BANDEAU D'ANNONCE
   ═══════════════════════════════════════════════════════════════════════ */

.bandeau {
  padding: var(--e-2) var(--gouttiere);
  background: var(--rouge);
  text-align: center;
}

.bandeau__texte {
  font-family: var(--titre);
  font-size: var(--t-sm);
  letter-spacing: var(--lettrage-capital);
  text-transform: uppercase;
  color: var(--blanc);
}


/* ═══════════════════════════════════════════════════════════════════════
   L'ENTÊTE
   ═══════════════════════════════════════════════════════════════════════ */

.entete {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--plan-entete);
  background: color-mix(in srgb, var(--noir) 92%, transparent);
  backdrop-filter: blur(12px);
  border-block-end: var(--filet) solid var(--acier);
}

.entete__interieur {
  display: flex;
  align-items: center;
  gap: var(--e-6);
  min-block-size: var(--hauteur-entete);
}

.entete__nav { display: none; margin-inline-start: auto; }

.entete__actions {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  margin-inline-start: auto;
}

@media (min-width: 60rem) {
  .entete__nav      { display: block; }
  .entete__actions  { margin-inline-start: 0; }
  .entete__bascule  { display: none; }
}

/* ── Le logo ────────────────────────────────────────────────────────── */

.logo {
  display: inline-flex;
  font-family: var(--titre);
  font-size: var(--t-2xl);
  letter-spacing: var(--lettrage-titre);
  text-decoration: none;
  text-transform: uppercase;
}

.logo__marque { color: var(--blanc); }
.logo__marque--accent { color: var(--rouge); }
.logo:hover .logo__marque--accent { color: var(--or); }

/* ── Le menu ────────────────────────────────────────────────────────── */

.menu { display: flex; gap: var(--e-6); }

.menu__lien,
.menu a {
  color: var(--texte);
  font-family: var(--titre);
  font-size: var(--t-lg);
  letter-spacing: var(--lettrage-titre);
  text-decoration: none;
  text-transform: uppercase;
}

.menu a:hover,
.menu .current-menu-item > a { color: var(--rouge); }

/* ── La recherche ───────────────────────────────────────────────────── */

.recherche {
  display: flex;
  align-items: stretch;
  border: var(--filet) solid var(--acier);
  background: var(--panneau-creux);
}

.recherche__champ {
  inline-size: 0;                    /* fermée par défaut sur petit écran */
  min-inline-size: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--texte);
  transition: inline-size var(--duree-action) var(--sortie), padding var(--duree-action) var(--sortie);
}

.recherche:focus-within .recherche__champ,
.recherche__champ:not(:placeholder-shown) {
  inline-size: 9rem;
  padding-inline: var(--e-3);
}

@media (min-width: 60rem) {
  .recherche__champ { inline-size: 8rem; padding-inline: var(--e-3); }
  .recherche:focus-within .recherche__champ { inline-size: 14rem; }
}

.recherche__champ::placeholder { color: var(--gris); }

.recherche__bouton,
.entete__bascule,
.panier-lien {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  background: none;
  border: 0;
  color: var(--texte);
  cursor: pointer;
  transition: color var(--duree-action) var(--sortie);
}

.recherche__bouton:hover,
.entete__bascule:hover,
.panier-lien:hover { color: var(--rouge); }

.recherche__bouton svg,
.entete__bascule svg,
.panier-lien svg { inline-size: 1.35rem; block-size: 1.35rem; }

/* ── Le panier ──────────────────────────────────────────────────────── */

.panier-lien { position: relative; text-decoration: none; }

.panier-lien__compte,
.barre__compte {
  position: absolute;
  inset-block-start: 2px;
  inset-inline-end: 2px;
  min-inline-size: 1.15rem;
  block-size: 1.15rem;
  padding-inline: .25rem;
  display: grid;
  place-items: center;
  background: var(--rouge);
  color: var(--blanc);
  border-radius: 999px;
  font-family: var(--corps);
  font-size: .68rem;
  font-weight: 700;
  line-height: 1;
}

/* ── Le menu de mobile ──────────────────────────────────────────────── */

.menu-mobile {
  position: fixed;
  inset: 0;
  z-index: var(--plan-voile);
  display: flex;
  flex-direction: column;
  background: var(--noir);
  overflow-y: auto;
}

.menu-mobile[hidden] { display: none; }

.menu-mobile__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-block-size: var(--hauteur-entete);
  border-block-end: var(--filet) solid var(--acier);
}

.menu-mobile__titre {
  font-family: var(--titre);
  font-size: var(--t-xl);
  letter-spacing: var(--lettrage-capital);
  text-transform: uppercase;
  color: var(--gris);
}

.menu-mobile__fermer {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  background: none;
  border: 0;
  color: var(--texte);
  cursor: pointer;
}

.menu-mobile__fermer svg { inline-size: 1.5rem; block-size: 1.5rem; }

.menu-mobile__nav { flex: 1; padding-block: var(--e-8); }

.menu-mobile__liste { display: flex; flex-direction: column; gap: var(--e-4); }

.menu-mobile__liste a {
  display: block;
  padding-block: var(--e-2);
  color: var(--blanc);
  font-family: var(--titre);
  font-size: var(--t-3xl);
  text-decoration: none;
  text-transform: uppercase;
}

.menu-mobile__liste a:hover { color: var(--rouge); }

.menu-mobile__pied { padding-block-end: var(--e-8); }


/* ═══════════════════════════════════════════════════════════════════════
   LE HÉROS — la composition d'origine, centrée
   ═══════════════════════════════════════════════════════════════════════
   ⚠ **Trois blocs de texte, pas cinq.** Le client : « il faut vraiment
   épurer le nombre de textes et revenir à la version de base ».

   Mesuré sur la version précédente en 390 × 844 : 344 px de texte sur 764,
   soit 45 % de l'écran — dont 143 px pour deux boutons empilés. Ici, un seul
   bouton et une seule phrase : le texte retombe sous le tiers, et le reste
   est l'image.

   Le pari : sur un manga, **le dessin est le produit**. Une illustration qui
   occupe l'écran vaut plus qu'un paragraphe qui l'explique.                 */

/*
 * ┌──────────────────────────────────────────────────────────────────┐
 * │  `place-items: center` ÉTAIT LA CAUSE, ET AUCUN VOILE NE POUVAIT LA    │
 * │  CORRIGER.                                                            │
 * │                                                                       │
 * │  Mesuré le 27 août : le bloc de texte occupait **20 % à 73 % de la       │
 * │  hauteur du héros**, soit 53 % — centré, donc posé exactement sur le    │
 * │  corbeau et sur la lune. On peut éclaircir le voile autant qu'on veut : │
 * │  tant que le texte est AU MILIEU, il faut bien le rendre lisible, donc  │
 * │  assombrir le milieu, donc cacher le personnage. Le réglage tournait en │
 * │  rond.                                                                 │
 * │                                                                       │
 * │  Le texte descend donc dans le tiers bas. Le haut de l'image — la lune, │
 * │  la tête du corbeau — n'a plus rien par-dessus.                        │
 * └──────────────────────────────────────────────────────────────────┘
 */
.heros {
  position: relative;
  display: grid;
  place-items: end center;
  min-block-size: calc(100svh - var(--hauteur-entete));
  /* ⚠ Le bas doit dégager l obi, qui occupe les 12 derniers pour cent du
     héros. Mesuré après un premier essai trop court : le bouton finissait à
     89 % et la bande commence à 87 % — ils se chevauchaient. */
  padding-block: var(--e-12) calc(var(--e-12) + 3.5rem);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}

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

.heros__image {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center 38%;
}

/* ⚠ **Un voile UNIFORME, comme dans la version d'origine.**

   Un dégradé directionnel n'a plus de sens sur un texte centré : il n'y a
   plus de côté à protéger, le texte est partout. C'est donc un aplat, plus
   un raccord au noir en bas pour que la section suivante ne commence pas par
   une coupure franche.

   72 % et pas 86 : à 86 l'image mourait, et « on ne sent pas assez
   l'univers ». À 72, le blanc du titre passe encore — vérifié sur la zone la
   plus claire de l'image, autour de la lune.                                */
.heros__voile {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /*
   * ⚠ **LE VOILE ÉTAIT UN MUR : 62 % de noir dès le haut.**
   *
   * « On ne voit pas assez le personnage de fond, il faut vraiment qu'on le
   * voie pour qu'on puisse se plonger. » Le corbeau existait, il était
   * simplement recouvert.
   *
   * Il descend à 34 % en haut, là où se trouve l'oiseau, et remonte vers le
   * bas où il doit encore porter le texte et rejoindre le noir de la section
   * suivante. Le dégradé travaille donc pour l'image en haut et pour la
   * lisibilité en bas, au lieu d'aplatir les deux.
   */
  /*
   * ⚠ **UN VOILE UNIFORME NE PEUT PAS SERVIR LES DEUX BESOINS.**
   *
   * À 62 % partout, le corbeau disparaît. À 34 % partout, il apparaît mais le
   * sur-titre rouge et le texte se posent sur la lune, qui est la zone la plus
   * CLAIRE de l'image — vu à l'écran. Les deux réglages sont mauvais parce que
   * la question est mal posée : ce n'est pas « combien de voile », c'est
   * « où ».
   *
   * Deux couches se superposent donc :
   *
   *  1. une ellipse sombre centrée sur le bloc de texte, qui lui rend un fond ;
   *  2. un dégradé vertical léger, qui laisse l'image respirer sur les bords
   *     et rejoint le noir de la section suivante en bas.
   *
   * Sous le texte, les deux se composent à ~0,82 d'opacité — soit PLUS que les
   * 0,62 d'origine, donc plus lisible qu'avant. Sur les bords, il ne reste que
   * 0,20 : le corbeau et la lune sont enfin visibles.
   */
  /*
   * ⚠ **L'ellipse centrale a disparu avec la raison qui l'imposait.**
   *
   * Elle rendait un fond au texte là où il était — au milieu. Le texte
   * descendu, c'est le BAS qu'il faut assombrir, et le haut peut rester
   * presque nu : 12 % de voile sur la lune, contre 62 % à l'origine.
   *
   * Le dégradé monte tard et vite : il ne mord sur l'image qu'à partir du
   * milieu, atteint 0,80 sous le texte et rejoint le noir de la section
   * suivante. C'est le même outil qu'avant, mais orienté par la composition
   * au lieu de la subir.
   */
  /*
   * ⚠ **LE TITRE A GRANDI, LE VOILE NE L'AVAIT PAS SUIVI.**
   *
   * Le 8 septembre 2026, le titre est passé de deux lignes courtes
   * (« HIDAYA / TOME 2 ») à trois lignes longues portant tout le
   * positionnement. Mesuré sur la capture : il occupe désormais **28 % à 58 %**
   * de la hauteur du héros, alors que la rampe du voile ne mordait qu'à
   * partir de 64 %. Les deux premières lignes se posaient donc sur la lune
   * presque nue, et l'accent doré y devenait le maillon faible.
   *
   * La rampe remonte à 34 %, c'est-à-dire là où le texte commence maintenant.
   * Le haut ne bouge pas : la tête du corbeau, entre 10 et 30 %, reste à
   * 0,14 — la correction qui l'avait rendu visible tient toujours.
   */
  background:
    linear-gradient(to bottom,
      rgba(10, 10, 12, .12) 0%,
      rgba(10, 10, 12, .14) 22%,
      rgba(10, 10, 12, .48) 34%,
      rgba(10, 10, 12, .78) 60%,
      rgba(10, 10, 12, .90) 82%,
      var(--noir) 100%);
}

.heros__interieur {
  position: relative;
  z-index: 4;
  inline-size: 100%;
  max-inline-size: 56rem;
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.heros__surtitre {
  /*
   * ⚠ **LE ROUGE NE POUVAIT PAS ATTEINDRE LE SEUIL ICI, ET C'EST ARITHMÉTIQUE.**
   *
   * Mesuré sur le fond composé (image + voile) : le sur-titre rouge tombait à
   * **2,80**, très en dessous du minimum WCAG AA de 4,5. Et ce n'était pas une
   * question de réglage du voile : le rouge #FF2F33 plafonne à **5,37** même
   * sur du noir pur, donc atteindre 4,5 aurait demandé d'éteindre l'image sous
   * lui — exactement ce qu'on venait de corriger pour rendre le corbeau visible.
   *
   * L'or au même endroit donne **6,45**. Le sur-titre suit donc le bouton, qui
   * est passé à l'or pour la même raison. Le rouge reste la couleur des accents
   * ponctuels — l'obi, les numéros de chapitre, les filets — là où il ne porte
   * pas de texte à lire.
   */
  color: var(--or);
  font-family: var(--titre);
  font-size: var(--t-xl);
  letter-spacing: var(--lettrage-capital);
  text-transform: uppercase;
  margin-block-end: var(--e-4);
}

.heros__titre {
  font-size: clamp(2.9rem, 1.4rem + 6.2vw, 6.5rem);
  line-height: .92;
  /* Deux ombres : la large pose le titre sur le fond, la serrée détache le
     contour là où le fond est le plus clair — la lune, précisément. */
  text-shadow:
    0 2px 28px rgba(10, 10, 12, .8),
    0 0 10px rgba(10, 10, 12, .55);
}

/* La partie forte en dégradé or → blanc, comme à l'origine.

   ⚠ `background-clip: text` a besoin de `color: transparent` pour se voir —
   et donc d'un repli : si la propriété n'est pas gérée, le mot devient
   invisible. `@supports` garantit qu'on ne rend le texte transparent que là
   où le dégradé le remplira vraiment. */
.heros__eclat { color: var(--or); }

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .heros__eclat {
    /* ⚠ **Le dégradé finissait sur du BLANC PUR, au-dessus de la lune.**
       Regardé à 1 440 px le 8 septembre 2026 : la fin du mot accentué
       disparaissait dans le disque lumineux du fond. Un or pâle tient le
       même effet de dégradé et reste distinct d'un blanc éclairé. */
    background-image: linear-gradient(100deg, var(--or), #ffeeb8 85%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
  }
}

.heros__ligne { display: block; }

.heros__texte {
  max-inline-size: 40rem;
  margin: var(--e-6) auto 0;
  color: var(--texte);
  font-size: var(--t-lg);
  text-shadow: 0 1px 14px rgba(10, 10, 12, .9);
}

.heros__action { margin-block-start: var(--e-8); }

/* L'obi ceinture le bas du héros et le raccorde au reste de la page. */
.heros__obi {
  position: absolute;
  inset-inline: -2%;
  inset-block-end: 1.5rem;
  z-index: 5;
  inline-size: 104%;
}

@media (max-width: 47.99rem) {
  .heros { padding-block: var(--e-12) calc(var(--e-12) + 3.5rem); }

  /* Le cadrage descend : sur un écran haut, `cover` sur une image large ne
     garde qu'une bande. On vise la lune et le corbeau, pas le ciel vide. */
  .heros__image { object-position: center 42%; }

  .heros__surtitre { font-size: var(--t-base); }
  .heros__texte    { font-size: var(--t-base); margin-block-start: var(--e-4); }
  .heros__action   { margin-block-start: var(--e-6); }
}



/* ═══════════════════════════════════════════════════════════════════════
   LES SECTIONS À DÉCOR
   ═══════════════════════════════════════════════════════════════════════ */

.section--decor { position: relative; overflow: hidden; }

.section__decor { position: absolute; inset: 0; z-index: var(--plan-fond); }

.section__decor img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  opacity: .18;
  filter: blur(2px);
}

.section__decor::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--noir), transparent 25%, transparent 75%, var(--noir));
}

.section__contenu { position: relative; z-index: var(--plan-contenu); }

.section__suite { margin-block-start: var(--e-12); text-align: center; }

.section__note {
  margin-block-start: var(--e-6);
  color: var(--gris);
  font-size: var(--t-sm);
  text-align: center;
}


/* ═══════════════════════════════════════════════════════════════════════
   LES PERSONNAGES
   ═══════════════════════════════════════════════════════════════════════ */

/*
 * ⚠ **La carte de personnage est devenue une FICHE, et son style vit dans
 * `27-tome.css`.**
 *
 * Ce qui était ici — vignette en haut, texte en dessous, encadré — est le
 * format d'une carte de site web. Le format d'un tome, c'est la fiche de fin
 * de volume : le portrait tient toute la case, l'identité se pose par-dessus.
 * L'identification au personnage est l'antécédent le mieux documenté de la
 * transportation narrative ; une vignette de 120 px n'identifie personne.
 */

.fiche { transition: transform var(--duree-action) var(--sortie); }
.fiche:hover { transform: translateY(-.35rem); }


/* ═══════════════════════════════════════════════════════════════════════
   LES TÉMOIGNAGES
   ═══════════════════════════════════════════════════════════════════════ */

.temoignage {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: var(--e-6);
  background: var(--panneau);
  border-block-start: 2px solid var(--or);
  clip-path: var(--decoupe-carte);
}

.temoignage__note { color: var(--or); letter-spacing: .1em; }
.temoignage__texte { flex: 1; color: var(--texte); }

.temoignage__auteur {
  color: var(--gris);
  font-family: var(--titre);
  font-size: var(--t-sm);
  letter-spacing: var(--lettrage-capital);
  text-transform: uppercase;
}


/* ═══════════════════════════════════════════════════════════════════════
   LES PACKS
   ═══════════════════════════════════════════════════════════════════════ */

.famille { margin-block-end: var(--e-24); }
.famille:last-of-type { margin-block-end: var(--e-12); }

.famille__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e-3);
  margin-block-end: var(--e-8);
  padding-block-end: var(--e-3);
  border-block-end: var(--filet) solid var(--acier);
}

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

.famille__pour { color: var(--gris); font-size: var(--t-base); }

/* Les badges dépassent en haut : il faut leur laisser la place. */
.famille__grille { padding-block-start: var(--e-4); }

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

.contenu-pack__ligne {
  display: flex;
  gap: var(--e-2);
  font-size: var(--t-sm);
  color: var(--texte);
}

.contenu-pack__coche { color: var(--or); flex: 0 0 auto; }

/* ── Le tableau de comparaison ──────────────────────────────────────── */

.comparaison { margin-block-start: var(--e-8); }

.comparaison__table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
}

.comparaison__table th,
.comparaison__table td {
  padding: var(--e-3);
  border-block-end: var(--filet) solid var(--acier);
  text-align: start;
}

.comparaison__table thead th {
  background: var(--panneau-creux);
  color: var(--blanc);
  font-family: var(--titre);
  font-size: var(--t-base);
  letter-spacing: var(--lettrage-titre);
  text-transform: uppercase;
  vertical-align: bottom;
}

.comparaison__nom  { display: block; }
.comparaison__prix { display: block; color: var(--or); }

.comparaison__table tbody th {
  font-family: var(--corps);
  font-weight: 400;
  color: var(--texte);
  text-transform: none;
}

.comparaison__case { text-align: center; }
.comparaison__oui  { color: var(--or); font-size: var(--t-lg); }
.comparaison__non  { color: var(--acier); }


/* ═══════════════════════════════════════════════════════════════════════
   LES QUESTIONS
   ═══════════════════════════════════════════════════════════════════════ */

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

.faq__element {
  background: var(--panneau);
  border-inline-start: 2px solid var(--acier);
  transition: border-color var(--duree-action) var(--sortie);
}

.faq__element[open] { border-inline-start-color: var(--rouge); }

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding: var(--e-4);
  min-block-size: 44px;
  cursor: pointer;
  font-family: var(--titre);
  font-size: var(--t-xl);
  letter-spacing: var(--lettrage-titre);
  text-transform: uppercase;
  color: var(--blanc);
  list-style: none;
}

.faq__question::-webkit-details-marker { display: none; }

/* Le chevron, dessiné en CSS : pas d'icône à charger, et il tourne. */
.faq__question::after {
  content: '';
  flex: 0 0 auto;
  inline-size: .6rem;
  block-size: .6rem;
  border-inline-end: 2px solid var(--rouge);
  border-block-end: 2px solid var(--rouge);
  rotate: 45deg;
  transition: rotate var(--duree-action) var(--sortie);
}

.faq__element[open] .faq__question::after { rotate: 225deg; }

.faq__reponse {
  padding: 0 var(--e-4) var(--e-4);
  color: var(--gris);
}


/* ═══════════════════════════════════════════════════════════════════════
   LA DERNIÈRE PORTE
   ═══════════════════════════════════════════════════════════════════════ */

/* Le bloc n'a plus de fond propre : la SECTION porte l'accent. Deux dégradés
   superposés se salissent l'un l'autre. */
.final__bloc {
  padding: var(--e-12) var(--e-8);
  text-align: center;
}

.final__titre { font-size: var(--t-4xl); margin-block: var(--e-2) var(--e-4); }

.final__texte {
  max-inline-size: var(--mesure);
  margin: 0 auto var(--e-8);
  color: var(--gris);
  font-size: var(--t-lg);
}

.final__gages {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e-4);
  margin-block-start: var(--e-8);
}

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

.final__gage::before { content: '✓ '; color: var(--or); }


/* ═══════════════════════════════════════════════════════════════════════
   LE BANDEAU DE PAGE
   ═══════════════════════════════════════════════════════════════════════ */

.banniere {
  padding-block: var(--e-12);
  background: linear-gradient(to bottom, var(--panneau-creux), var(--noir));
  border-block-end: var(--filet) solid var(--acier);
}

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


/* ═══════════════════════════════════════════════════════════════════════
   LE PIED
   ═══════════════════════════════════════════════════════════════════════ */

.pied {
  margin-block-start: var(--e-24);
  border-block-start: var(--filet) solid var(--acier);
  background: var(--panneau-creux);
}

.pied__interieur {
  display: grid;
  gap: var(--e-8);
  padding-block: var(--e-16);
}

@media (min-width: 48rem) {
  .pied__interieur { grid-template-columns: 1.5fr 1fr 1fr 1.5fr; }
}

.pied__signature { margin-block: var(--e-3); color: var(--gris); font-size: var(--t-sm); }

.pied__titre {
  font-size: var(--t-base);
  letter-spacing: var(--lettrage-capital);
  color: var(--or);
  margin-block-end: var(--e-3);
}

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

.pied__liste a,
.pied__adresse a { color: var(--gris); text-decoration: none; }

.pied__liste a:hover,
.pied__adresse a:hover { color: var(--rouge); }

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

.pied__adresse { font-style: normal; display: grid; gap: var(--e-2); }

.pied__legal {
  border-block-start: var(--filet) solid var(--acier);
  padding-block: var(--e-4);
}

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

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

.pied__liste--enligne { display: flex; flex-wrap: wrap; gap: var(--e-4); }
.pied__liste--enligne a { font-size: var(--t-xs); }

.reseaux { display: flex; gap: var(--e-2); }

.reseaux__lien {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  color: var(--gris);
}

.reseaux__lien:hover { color: var(--rouge); }
.reseaux__icone { inline-size: 1.25rem; block-size: 1.25rem; }


/* ═══════════════════════════════════════════════════════════════════════
   LA BARRE FIXE DE MOBILE
   ═══════════════════════════════════════════════════════════════════════
   ⚠ **La réserve de hauteur est une COPIE dans le flux, pas un padding.**
   Un `padding-bottom` fixe posé sur le contenu creuse un trou dès que la
   barre change de hauteur — police plus grande, deux lignes, encoche. La
   copie se mesure elle-même.                                                */

.barre { display: none; }

@media (max-width: 47.99rem) {
  .barre { display: block; }

  .barre--reserve { visibility: hidden; }

  .barre--fixe {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: var(--plan-barre);
    background: color-mix(in srgb, var(--noir) 92%, transparent);
    backdrop-filter: blur(12px);
    border-block-start: var(--filet) solid var(--acier);
    transition: background-color var(--duree-action) var(--sortie),
                border-color var(--duree-action) var(--sortie);
  }

  .barre__interieur {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;   /* panier seul : il reste à sa place */
    gap: var(--e-2);
    padding: var(--e-4) var(--gouttiere);
    padding-block-end: calc(var(--e-4) + env(safe-area-inset-bottom));
  }

  .barre__action { flex: 1 1 auto; min-inline-size: 0; }

  .barre__panier {
    flex: 0 0 4.25rem;
    position: relative;
    display: grid;
    place-items: center;
    color: var(--blanc);
    background: rgba(255, 255, 255, .06);
    border: var(--filet) solid var(--acier);
    transform: skewX(var(--cisaille));
    transition: background-color var(--duree-action) var(--sortie),
                border-color var(--duree-action) var(--sortie);
  }

  .barre__panier > * { transform: skewX(var(--contre-cisaille)); }

  .barre__panier:hover,
  .barre__panier:focus-visible {
    background: var(--rouge-voile);
    border-color: var(--rouge);
  }

  .barre__panier svg { inline-size: 1.4rem; block-size: 1.4rem; }

  /*
   * ⚠ **Repliée : le bouton s'en va, le panier RESTE.**
   *
   * Demande explicite du client : « faudrait laisser le panier, qu'il
   * disparaisse jamais s'ils en ont besoin ». Un seul objet panier sur tout
   * le site mobile, toujours le même carré, toujours à la même place.
   *
   * `pointer-events: none` sur la bande, `auto` sur le panier : une fois le
   * fond retiré, les trois quarts gauche restent une surface invisible en
   * travers du bas de l'écran, qui intercepterait les touches destinées au
   * contenu qu'on voit dessous.
   */
  .barre--repliee {
    background: transparent;
    border-color: transparent;
    backdrop-filter: none;
    pointer-events: none;
  }

  .barre--repliee .barre__action {
    opacity: 0;
    visibility: hidden;
    translate: 0 150%;
    transition: opacity var(--duree-action) var(--sortie),
                translate var(--duree-action) var(--sortie),
                visibility 0s linear var(--duree-action);
  }

  .barre--repliee .barre__panier { pointer-events: auto; }
}


/* ═══════════════════════════════════════════════════════════════════════
   DIVERS
   ═══════════════════════════════════════════════════════════════════════ */

.erreur-404__issues {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-4);
  margin-block-start: var(--e-8);
}

.liste-articles { display: grid; gap: var(--e-8); margin-block-start: var(--e-8); }

.prose > * + * { margin-block-start: var(--e-4); }
.prose h2 { margin-block-start: var(--e-12); font-size: var(--t-2xl); }
.prose h3 { margin-block-start: var(--e-8); }
.prose ul { list-style: disc; padding-inline-start: var(--e-6); }
.prose li { margin-block-start: var(--e-2); }


/* ═══════════════════════════════════════════════════════════════════════
   L'HISTOIRE — de quoi ça parle
   ═══════════════════════════════════════════════════════════════════════ */

.histoire__grille {
  position: relative;

  display: grid;
  gap: var(--e-12);
  align-items: start;
}

@media (min-width: 60rem) {
  .histoire__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }

  /* ⚠ **Le récit sans ses planches n'est pas le récit amputé d'une colonne.**
     Sur `/le-manga/`, les planches sont retirées d'ici parce que le chapitre
     04 de la même page les montre en grand. Laisser la grille à deux colonnes
     aurait donné une colonne de texte étroite et 700 px de vide à droite —
     exactement le défaut corrigé sur « À propos » la veille. Les trois actes
     prennent la largeur et se lisent côte à côte, ce qu'ils sont. */
  .histoire--recit .histoire__grille { grid-template-columns: minmax(0, 1fr); }
  .histoire--recit .arcs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--e-8);
  }
  /* ⚠ **Étalée sur toute la largeur, l'aura rendait une barre rouge verticale
     au milieu des trois actes** — un artefact, pas une atmosphère. Elle avait
     été réglée pour une colonne étroite (`inset: -6% 20% -6% -14%`) ; ses deux
     masses floutées, remises au centre d'un bloc large et court, se
     superposaient. Rabattue vers le bas, elle redevient ce qu'elle doit être :
     une lueur d'horizon sous le texte. */
  .histoire--recit .histoire__aura { inset: 38% -16% -34% -16%; }
}

/* ⚠ **L'aura débordait de 18 px de chaque côté** dès que le décor était
   retiré. Le confinement venait de `.section--decor { overflow: hidden }`,
   pas de la section elle-même : en enlevant le décor sur « Le manga », on a
   enlevé le filet sans le savoir. Mesuré à 1 475 px de large dans un cadre de
   1 440. Le glissement latéral ne se voyait pas — `overflow-x: clip` sur le
   corps le rattrapait — mais la capture pleine page, elle, le voyait.        */
.histoire--recit {
  position: relative;
  overflow: hidden;
}

/* L'aura de l'histoire se pose derrière la colonne des arcs. Rouge, parce que
   c'est la couleur du récit dans ce thème, et déphasée des autres par son rang
   pour ne pas battre à l'unisson avec celles de l'équipe. */
.histoire__aura {
  --accent: var(--rouge);
  --rang: 4;
  inset: -6% 20% -6% -14%;
}

.arcs {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--e-6);
}

.arc {
  position: relative;
  padding-inline-start: var(--e-12);
}

/* Le numéro en gros, très effacé : il rythme sans crier. */
.arc__numero {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: -.15em;
  font-family: var(--titre);
  font-size: var(--t-4xl);
  line-height: 1;
  color: var(--rouge);
  opacity: .35;
}

.arc__titre { font-size: var(--t-2xl); color: var(--or); }
.arc__texte { margin-block-start: var(--e-2); color: var(--gris); }

/* Les trois planches d'aperçu : la première grande, les deux autres en
   dessous. Le dessin est l'argument, il a droit à la place. */
.histoire__apercu {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-2);
}

.histoire__planche {
  overflow: hidden;
  border: var(--filet) solid var(--acier);
  background: var(--noir);
}

.histoire__planche:first-child { grid-column: 1 / -1; }

.histoire__image {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  aspect-ratio: 3 / 2;
}

.histoire__legende {
  grid-column: 1 / -1;
  color: var(--gris);
  font-size: var(--t-xs);
  text-align: end;
}


/* ═══════════════════════════════════════════════════════════════════════
   LA PREUVE
   ═══════════════════════════════════════════════════════════════════════ */

/* La bande de chiffres. Le filet vient de l'ÉCART entre les cases, pas d'un
   `border-right` : en pile sur mobile, un trait vertical se retrouverait
   collé au bord droit comme un cadre cassé. Ici il devient horizontal tout
   seul, sans qu'aucune règle ait à connaître le nombre de colonnes. */
.chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
  gap: var(--filet);
  background: var(--acier);
  border-block: var(--filet) solid var(--acier);
}

.chiffre {
  display: grid;
  gap: var(--e-1);
  padding: var(--e-6) var(--e-4);
  background: var(--noir);
  text-align: center;
}

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

.chiffre--note .chiffre__valeur { color: var(--or); }

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

.preuve__equipe { margin-block-start: var(--e-16); }
.preuve__entete { max-inline-size: var(--mesure); margin-block-end: var(--e-8); }
.preuve__titre  { font-size: var(--t-3xl); margin-block: var(--e-2) var(--e-3); }
.preuve__texte  { color: var(--gris); font-size: var(--t-lg); }

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

/*
 * ┌──────────────────────────────────────────────────────────────────┐
 * │  LA CARTE DE MÉTIER PARLE LA LANGUE DES FICHES.                       │
 * │                                                                       │
 * │  Elle valait quatre déclarations : un fond, un filet doré, trois       │
 * │  lignes de texte. Relevé du 27 août : `personnages` portait 16 décors  │
 * │  et 7 animations, les neuf autres sections RÉUNIES en portaient 3 et 2.│
 * │                                                                       │
 * │  Elle reçoit donc exactement les mêmes motifs : l'aura qui respire, le │
 * │  mot en géant derrière, l'étiquette verticale, la bande d'accent, la  │
 * │  trame et la lueur au curseur. Rien d'inventé pour l'occasion.         │
 * └──────────────────────────────────────────────────────────────────┘
 */
.metier {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* 18 rem : le mot geant occupe le haut, le texte le bas, et il reste de
     l air entre les deux. A 13 rem ils se chevauchaient — mesure : geant
     y 42-102, titre y 39-92. */
  min-block-size: 18rem;

  /*
   * ⚠ **Le texte descend au bas de la carte**, comme le bloc d'identité d'une
   * fiche de personnage. Sans ça, le mot géant et le titre occupent la même
   * bande et se chevauchent — mesuré : le géant à y 100-160, le titre à
   * y 117-170. Sur une fiche, c'est le portrait qui les sépare ; ici il n'y a
   * pas de portrait, il faut donc le dire.
   */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  padding: var(--e-6) var(--e-8) var(--e-4) var(--e-6);
  border-block-start: 2px solid var(--accent, var(--or));

  /* La trame, dans la couleur de la carte — même pas de 7 px que les fiches. */
  background-color: var(--panneau-creux);
  background-image: radial-gradient(
    circle at center,
    color-mix(in srgb, var(--accent, var(--or)) 20%, transparent) 1px,
    transparent 1px
  );
  background-size: 7px 7px;
}

/* La bande d'accent verticale, comme le liséré d'une fiche. */
.metier::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 4px;
  z-index: 3;
  background: var(--accent, var(--or));
}

/*
 * Le texte passe devant l'aura et le mot géant.
 *
 * ⚠ **`:not()` sur l'étiquette, et ça m'a coûté une passe.** Écrite
 * `.metier > p`, cette règle pèse (0,1,1) et écrasait
 * `.fiche__role, .metier__fonction { position: absolute }` — qui ne pèse que
 * (0,1,0). L'étiquette verticale retombait dans le flux et se collait en haut à
 * gauche au lieu de courir le long du bord. Une règle générale écrite APRÈS
 * une règle précise la défait, même quand les deux sont de moi.
 */
.metier > p:not(.metier__fonction) { position: relative; z-index: 2; }

/* ⚠ Sur une fiche, le mot geant est centre derriere le PORTRAIT. Sur une
   carte de metier il n y a pas de portrait : il se cale en haut, et le texte
   reste en bas. Deux ancrages differents pour un meme motif, parce que le
   contenu qu il habille n est pas le meme. */
.metier .geant {
  inset-block-start: var(--e-4);
  translate: none;
}

.metier__role {
  font-family: var(--titre);
  font-size: var(--t-2xl);
  text-transform: uppercase;
  color: var(--blanc);
  margin-block: var(--e-1) var(--e-2);
}

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

/* Le numéro d'entreprise : petit, mais c'est une preuve vérifiable. */
.preuve__bce {
  margin-block-start: var(--e-6);
  color: var(--gris);
  font-size: var(--t-xs);
  letter-spacing: .04em;
}


/* ═══════════════════════════════════════════════════════════════════════
   LA CAPTURE D'ADRESSE
   ═══════════════════════════════════════════════════════════════════════ */

.capture__bloc {
  padding: var(--e-12) var(--e-8);
  background: var(--panneau);
  border-block-start: 2px solid var(--or);
  clip-path: var(--decoupe-carte);
  text-align: center;
}

.capture__titre { font-size: var(--t-3xl); margin-block: var(--e-2) var(--e-3); }

.capture__texte {
  max-inline-size: var(--mesure);
  margin: 0 auto var(--e-6);
  color: var(--gris);
}

.capture__form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  justify-content: center;
  max-inline-size: 32rem;
  margin-inline: auto;
}

.capture__champ {
  flex: 1 1 16rem;
  min-inline-size: 0;
  min-block-size: 44px;
  padding: var(--e-3) var(--e-4);
  background: var(--panneau-creux);
  border: var(--filet) solid var(--acier);
  color: var(--texte);
}

.capture__champ::placeholder { color: var(--gris); }

.capture__champ:focus-visible { border-color: var(--or); }

.capture__mention {
  margin-block-start: var(--e-4);
  color: var(--gris);
  font-size: var(--t-xs);
}


/* ═══════════════════════════════════════════════════════════════════════
   LA DENSITÉ SUR MOBILE — ce qui décide de la longueur de la page
   ═══════════════════════════════════════════════════════════════════════
   Mesuré : 22,9 écrans au total, dont 6,1 pour les packs et 5,3 pour les
   personnages. Ces deux sections faisaient à elles seules la moitié de la
   page. Un visiteur ne « scrolle » pas onze écrans par curiosité.

   ⚠ On ne retire AUCUN contenu : on change sa densité. Retirer des
   personnages sur mobile, c'est décider qu'un visiteur mobile mérite moins
   d'univers — alors que c'est la majorité du trafic.                        */

@media (max-width: 47.99rem) {

  /* ⚠ **CE `display: none` A ÉTÉ RETIRÉ, ET C'EST UNE LEÇON.**

     Je masquais ici le texte de campagne parce qu'il faisait doublon avec la
     promesse. Quand la promesse a été supprimée à l'épuration, la règle est
     restée : le héros mobile s'est retrouvé SANS AUCUNE phrase — un
     sur-titre, un titre, un bouton. Mesuré : 16 px pour ce paragraphe, soit
     sa seule marge.

     Une règle qui masque quelque chose survit toujours à la raison qui l'a
     fait écrire. Elle doit disparaître avec elle.                          */

  .heros__actions { flex-direction: column; align-items: stretch; }
  .heros__actions .bouton { inline-size: 100%; }

  /* ⚠ **L'aplatissement horizontal a été RETIRÉ ici.**

     J'avais mis les cartes de personnage à l'horizontale sur mobile pour
     gagner 3,5 écrans. Ça marchait, et c'était la mauvaise réponse : un
     portrait de 120 px de haut ne plonge personne dans un univers. Le
     carrousel à aimantation règle les deux — même gain de hauteur, image
     grande. Voir `.personnages__piste`.                                    */

  .grille--cartes { gap: var(--e-3); }
}

/* Le tableau de comparaison, repliable.

   ⚠ **Ouvert par défaut, refermé par le script sur petit écran.** L'inverse
   — fermé dans le HTML — priverait du tableau quiconque n'a pas de
   JavaScript, et surtout les moteurs de recherche qui lisent le contenu
   replié comme moins important. Ici, l'état sûr est l'état visible. */
.comparaison__resume {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  min-block-size: 44px;
  padding: var(--e-3) 0;
  cursor: pointer;
  color: var(--or);
  font-family: var(--titre);
  font-size: var(--t-base);
  letter-spacing: var(--lettrage-capital);
  text-transform: uppercase;
  list-style: none;
}

.comparaison__resume::-webkit-details-marker { display: none; }

.comparaison__resume::after {
  content: '';
  inline-size: .5rem;
  block-size: .5rem;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  rotate: 45deg;
  transition: rotate var(--duree-action) var(--sortie);
}

.comparaison[open] .comparaison__resume::after { rotate: 225deg; }

/* Sur grand écran, le tableau se lit d'un coup d'œil : le résumé ne sert à
   rien et le script ne referme rien. */
/*
 * ⚠ **Le résumé reste visible À TOUTES LES TAILLES.**
 *
 * Il était masqué à partir de 48 rem, parce que le tableau y était ouvert en
 * permanence et qu'un résumé sans rôle est du bruit. Maintenant que le tableau
 * part replié, ce même masquage le rendrait **impossible à ouvrir** : le
 * `<summary>` est la seule poignée d'un `<details>`.
 *
 * C'est le genre de règle qui ne casse rien le jour où on l'écrit et qui casse
 * tout le jour où l'on change l'état par défaut, trois cents lignes plus loin.
 */



/* ════════════════════════════════════════════════════════════════════════
   LE RYTHME VERTICAL — le défaut le plus coûteux de la page
   ════════════════════════════════════════════════════════════════════════
   Dix sections sur le même fond noir : l'œil décroche à la troisième et le
   visiteur conclut qu'il n'y a rien. Ce n'était pas un manque de contenu,
   c'était un manque de VARIATION.

   Trois traitements tournent, jamais deux identiques à la suite :

     · --profond   le noir nu, le repos, la lecture
     · --sourd     un panneau creux plus une lueur à 10 % — la respiration
     · --decor     une image voilée — l'accent, deux fois par page au plus

   L'ordre de la page : décor, profond, sourd, décor, profond, sourd, profond,
   sourd, profond, accent.                                                   */

.section--profond { background: var(--noir); }

.section--sourd {
  background-color: var(--panneau-creux);
  border-block: var(--filet) solid var(--acier);
}

/* La lueur se pose PAR-DESSUS la couleur de fond : `background-image` et
   `background-color` sont deux propriétés distinctes, elles ne se
   surchargent pas. C'est ce qui permet de composer `--sourd` et `lueur--or`
   sans que l'une efface l'autre. */

/* ⚠ **Alterner les DENSITÉS, pas seulement les fonds.** Une section dense
   (grille, chiffres) doit être suivie d'une section aérée. Si toutes font
   700 px, le défilement devient métronomique. */
/* ⚠ **L'accent, UNE fois par page.** C'est ce qui ferme la lecture : la
   dernière section ne ressemble à aucune autre, et on sait qu'on est arrivé
   au bout. Deux fois, et ça ne veut plus rien dire.

   Relevé : « questions » et « final » se suivaient sur le même fond profond —
   la page se terminait sans qu'on s'en aperçoive. */
.section--accent {
  background-color: var(--panneau);
  background-image:
    radial-gradient(120% 90% at 50% 120%, rgba(255, 47, 51, .22), transparent 62%),
    radial-gradient(80% 60% at 10% -10%, rgba(242, 200, 68, .08), transparent 58%);
  border-block-start: 2px solid var(--rouge);
}

.section--serree { padding-block: var(--e-12); }
.section--ample  { padding-block: calc(var(--e-24) * 1.5); }


/* ════════════════════════════════════════════════════════════════════════
   LES PERSONNAGES — un carrousel qui plonge, pas six cartes à faire défiler
   ════════════════════════════════════════════════════════════════════════
   ⚠ **Le client : « sur mobile ils doivent scroller les six et ça ne les
   plonge pas dans l'univers ».** Il a raison, et ma correction précédente
   était pire : j'avais aplati les cartes à l'horizontale pour gagner de la
   place. C'est efficace et ça tue exactement ce qu'on cherchait — un
   personnage de 120 px de haut ne plonge personne.

   Ici, un carrousel à aimantation : un personnage à la fois, presque plein
   écran, qu'on fait glisser au pouce. Même place occupée qu'une carte, six
   fois moins de hauteur, et l'image redevient grande.

   ⚠ **Zéro JavaScript.** `scroll-snap` est natif : ça marche au doigt, à la
   molette, au clavier (flèches), et ça ne casse pas si un script échoue.   */

.personnages__piste {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 82%;

  /* ⚠ Sans ça, toutes les fiches s'étirent à la hauteur de la plus haute et le
     héros perd la sienne — la hiérarchie disparaît au moment où on la pose. */
  align-items: start;
  gap: var(--e-3);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gouttiere);
  padding-inline: var(--gouttiere);
  padding-block-end: var(--e-4);
  /* La barre de défilement n'apporte rien ici : l'aimantation dit déjà qu'on
     peut glisser, et l'indicateur sous la piste le confirme. */
  scrollbar-width: none;
}

.personnages__piste::-webkit-scrollbar { display: none; }

.personnages__piste > .fiche { scroll-snap-align: start; }

/* L'indice : sans lui, rien ne dit qu'il y a autre chose à droite. C'est la
   faute la plus fréquente des carrousels — on croit voir toute la série. */
.personnages__indice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  margin-block-start: var(--e-4);
  color: var(--gris);
  font-family: var(--titre);
  font-size: var(--t-sm);
  letter-spacing: var(--lettrage-capital);
  text-transform: uppercase;
}

.personnages__indice::after {
  content: '\2192';
  animation: hidaya-glisse 2.4s var(--sortie) infinite;
}

@keyframes hidaya-glisse {
  0%, 100% { translate: 0 0; opacity: .5; }
  50%      { translate: .4rem 0; opacity: 1; }
}

/*
 * ⚠ **SIX CASES DE MÊME TAILLE, C'EST UNE GRILLE — PAS UNE PAGE DE MANGA.**
 *
 * Le décalage vertical d'une colonne sur deux était un pansement : ça dérange
 * l'alignement sans rien dire du contenu. Ici la composition PORTE une
 * information : le héros occupe quatre cases, les antagonistes deux, les
 * autres une. La hiérarchie se voit avant qu'on ait lu un seul nom — exactement
 * comme sur une planche, où la taille d'une case dit son importance.
 *
 * ⚠ **Le fond perdu s'arrête ici.** À fond perdu, une PISTE se comprend : elle
 * sort du cadre parce qu'on la fait glisser. Une GRILLE à fond perdu, non :
 * elle colle aux deux bords, la première fiche semble coupée, et elle passe
 * sous le compteur de page. Et il faut annuler les DEUX propriétés de
 * `.pleine-largeur` — `inline-size: 100vw` autant que la marge négative :
 * mesuré à 1440 px, annuler la marge seule laissait une grille de 1440 dans
 * une page de 1280.
 */
@media (min-width: 48rem) {
  /*
   * ┌──────────────────────────────────────────────────────────────────┐
   * │  DOUZE COLONNES, ET CHAQUE FICHE SAIT SA PLACE.                       │
   * │                                                                       │
   * │  Ce n'est plus la grille qui range : c'est le PHP qui décide du rythme │
   * │  des rangées (2 / 3 / 2 pour sept personnages) et qui pose sur chaque   │
   * │  fiche le nombre de colonnes et de lignes qu'elle occupe. Le CSS ne    │
   * │  fait plus que lire ces deux nombres.                                  │
   * │                                                                       │
   * │  ⚠ **Douze, pas six.** Douze se divise par 1, 2, 3, 4 et 6 : une       │
   * │  rangée de deux, de trois ou de quatre tombe toujours juste. Avec six, │
   * │  une rangée de quatre laissait un demi-espace.                         │
   * │                                                                       │
   * │  ⚠ **`row`, surtout pas `row dense`.** Le remplissage dense réordonne  │
   * │  pour boucher les trous : il déferait exactement le rythme qu'on vient │
   * │  d'écrire.                                                             │
   * └──────────────────────────────────────────────────────────────────┘
   */
  .personnages__piste {
    grid-auto-flow: row;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: clamp(6.5rem, 9.5vw, 8.5rem);
    grid-auto-columns: auto;
    overflow: visible;
    padding-inline: 0;
    scroll-snap-type: none;
    inline-size: auto;
    margin-inline: 0;
  }

  .personnages__piste > .fiche {
    grid-column: span var(--colonnes, 4);
    grid-row: span var(--lignes, 2);
    block-size: auto;
    align-self: stretch;
  }

  /*
   * ⚠ **Le résumé disparaît des fiches secondaires.**
   *
   * Dans une petite case, trois lignes de texte prennent la place qui revient
   * au dessin, et c'est le dessin qu'on est venu voir. Le nom et le rôle
   * suffisent à présenter un second rôle ; le récit appartient à ceux qui le
   * portent.
   */
  .fiche:not(.fiche--large) .fiche__texte { display: none; }
  .fiche:not(.fiche--large) .fiche__identite { padding-block-start: var(--e-12); }
}


/* ════════════════════════════════════════════════════════════════════════
   LES AJUSTEMENTS DE COMPOSITION
   ════════════════════════════════════════════════════════════════════════ */

/* L'entête de section n'est plus toujours centrée : le centrage systématique
   est le tic le plus reconnaissable d'une page fabriquée à la chaîne. */
.entete-section--gauche { text-align: start; }
.entete-section--gauche .entete-section__chapeau { margin-inline: 0; }

/* La bande de chiffres sort du conteneur : elle traverse l'écran. */
.chiffres { position: relative; }

/* Le rappel de fin de section : discret, mais il existe. Quatre sections
   n'offraient RIEN à faire — or ce sont celles où l'on convainc. */
.suite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-4);
  margin-block-start: var(--e-8);
}

.suite--centre { justify-content: center; }

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



/* ═══════════════════════════════════════════════════════════════════════
   L'EXTRAIT — feuilleter, pas regarder
   ═══════════════════════════════════════════════════════════════════════
   ⚠ **Une piste à aimantation, et c'est un choix fondé.**

   Le format interactif produit plus d'absorption narrative que le format
   passif — c'est un des antécédents relevés dans la revue systématique. Une
   grille de quatre vignettes se REGARDE ; une piste qu'on fait glisser se
   FEUILLETTE. La seconde met le lecteur dans la position du lecteur.

   Et la planche est grande : le dessin est le premier facteur de décision
   d'un lecteur devant une nouvelle série. Le montrer en vignette, c'est le
   montrer pour rien.                                                        */

/*
 * ⚠ **LA PISTE DE PLANCHES A DISPARU, ET SON STYLE AVEC ELLE.**
 *
 * Elle est remplacée par le tome ouvert (`.tome-ouvert`) et le lecteur plein
 * écran (`.lecteur`), tous deux dans `27-tome.css`. Trois tentatives avaient
 * échoué ici avant qu'on comprenne que le problème n'était pas la mise en page
 * de la piste, mais la piste elle-même : une grille de quatre vignettes se
 * REGARDE, un volume s'OUVRE — et c'est le second geste qui produit
 * l'absorption.
 *
 * Le style mort est retiré plutôt que laissé « au cas où » : une règle qui ne
 * s'applique plus à rien est une règle qu'on relira un jour en croyant qu'elle
 * compte.
 */

.extrait__pied {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-4);
  margin-block-start: var(--e-4);
}

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



/* ═══════════════════════════════════════════════════════════════════════
   LE RYTHME — l'antidote à la peur de l'abandon
   ═══════════════════════════════════════════════════════════════════════ */

.rythme__grille {
  display: grid;
  gap: var(--e-12);
  align-items: center;
}

@media (min-width: 60rem) {
  /* 7/5 plutôt que 6/6 : une grille déséquilibrée crée une tension que la
     moitié-moitié ne crée jamais. */
  .rythme__grille { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}

.rythme__titre { font-size: var(--t-3xl); margin-block: var(--e-2) var(--e-4); }

.rythme__texte {
  max-inline-size: var(--mesure);
  color: var(--texte);
  font-size: var(--t-lg);
}

/* Ce que chaque palier améliore, concrètement. Ce n'est pas une liste
   d'avantages : c'est ce qui fait dépasser un objectif. */
.rythme__effets {
  display: grid;
  gap: var(--e-3);
  margin-block-start: var(--e-6);
}

.rythme__effet {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  color: var(--texte);
}

.rythme__effet::before {
  content: '\2192';
  flex: 0 0 auto;
  color: var(--or);
  font-weight: 700;
}

/* Les chiffres en colonne à droite, pas en bande pleine largeur : ils
   appuient le propos au lieu de le couper. */
.rythme__chiffres {
  display: grid;
  gap: var(--filet);
  background: var(--acier);
  border: var(--filet) solid var(--acier);
}

/* ══════════════════════════════════════════════════════════════════════
   LA CARTE DE PACK, À L'HORIZONTALE SUR TÉLÉPHONE
   ══════════════════════════════════════════════════════════════════════
   Relevé du 27 août : la section `packs` fait **4,6 écrans sur téléphone**, dont
   **2 435 px pour les quatre cartes** — 62 % de la section. Et dans chaque carte,
   le visuel produit occupe **231 px, soit 41 % de sa hauteur**.

   ⚠ **Ce n'est PAS le même arbitrage que pour les personnages.**

   On avait tenté d'aplatir les fiches de personnage à l'horizontale, et c'était
   une faute : un portrait de 120 px n'identifie personne, et l'identification
   est le mécanisme même de l'absorption. Une photo produit ne fait pas ce
   travail-là : elle montre ce qu'on reçoit. La réduire ne coûte rien.

   ⚠ **Un flottant, et c'est délibéré.** Le texte doit s'écouler à côté de
   l'image puis reprendre toute la largeur dessous : c'est littéralement la
   définition du flottant, et ça ne demande AUCUN changement de balisage. Une
   grille aurait exigé d'envelopper les quatre éléments de texte dans un
   conteneur — donc de toucher au rendu des cartes partout ailleurs, boutique
   comprise, pour un gain de mise en page sur une seule section.                */

@media (max-width: 47.99rem) {
  /* Le flottant d'avant n'agissait pas : `.carte__panneau` est un conteneur
     flex, et un flottant n'a aucun effet sur un enfant flex. Vu à 390 px :
     le visuel seul en haut à gauche, 200 px de vide à sa droite, le titre
     dessous. Une grille à zones fait ce que le flottant promettait, sans
     toucher au balisage : visuel à gauche, titre et prix à sa droite, la
     liste et le bouton sur toute la largeur. */
  .famille__grille .carte__panneau {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    grid-template-areas:
      'visuel titre'
      'visuel prix'
      'corps  corps'
      'pied   pied';
    align-content: start;
    column-gap: var(--e-4);
    padding: var(--e-4);
  }
  .famille__grille .carte__visuel { grid-area: visuel; aspect-ratio: 1; margin: 0; }
  .famille__grille .carte__titre  { grid-area: titre; align-self: end; margin: 0; font-size: var(--t-xl); }
  .famille__grille .carte__prix   { grid-area: prix; margin-block: var(--e-1) 0; }
  .famille__grille .carte__corps  { grid-area: corps; flex: none; margin-block: var(--e-4); }
  .famille__grille .carte__pied   { grid-area: pied; margin: 0; }
}


/* ══════════════════════════════════════════════════════════════════
   LA PAGE « À PROPOS » — qui fabrique HIDAYA, et pourquoi
   ══════════════════════════════════════════════════════════════════

   ⚠ **Presque rien de neuf ici, et c'est le but.** Les cartes d'artisan
   portent la classe `.metier` : le filet d'accent, la trame de points, l'aura,
   le mot géant et la lueur qui suit le curseur viennent tels quels de
   l'accueil. Ce qui suit n'ajoute que ce que l'accueil n'avait pas — un
   portrait, parce qu'il n'y en avait aucun à montrer.                        */

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

/* ────────────────────────────────────────────────
   L'origine */

.origine__corps {
  display: grid;
  gap: var(--e-6);
  max-inline-size: var(--mesure-large, 46rem);
  margin-block-start: var(--e-8);
}

/*
 * ⚠ **Deux colonnes au-delà de 60 rem.** La section occupait 46 rem au milieu
 * d'un écran de 1440 et laissait 700 px de vide à sa droite : la citation et
 * le récit s'empilaient alors qu'ils se répondent. Côte à côte, la citation
 * porte et le récit explique — c'est leur rapport, autant qu'il se voie.
 */
@media (min-width: 60rem) {
  .origine__corps {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--e-12);
    max-inline-size: none;
    align-items: start;
  }

  .origine__texte { padding-block-start: var(--e-2); }
}

/*
 * ⚠ **La citation porte la page, donc elle en a la taille.**
 *
 * C'est la seule phrase qui répond à « pourquoi ce projet existe ». La poser
 * en corps de texte ordinaire la ferait lire comme une transition ; le filet
 * d'accent à sa gauche la rattache à la grammaire des cartes du site.
 */
.origine__citation {
  margin: 0;
  padding-inline-start: var(--e-6);
  border-inline-start: 3px solid var(--rouge);
  color: var(--blanc);
  font-family: var(--titre);
  font-size: clamp(1.25rem, 1rem + 1.3vw, 1.9rem);
  line-height: 1.35;
}

.origine__citation p { margin: 0; }

.origine__texte {
  color: var(--gris);
  font-size: var(--t-lg);
  line-height: 1.65;
}

/* ────────────────────────────────────────────────
   Les artisans */

.artisans__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: var(--e-4);
  margin-block-start: var(--e-8);
}

/* Une carte à portrait respire plus qu'une carte de métier : il faut la place
   du visage AU-DESSUS du texte, pas derrière. */
.artisan--portrait { min-block-size: 26rem; }

/*
 * ┌──────────────────────────────────────────────────────────────┐
 * │  LE PORTRAIT PASSE PAR LE MÊME FILTRE QUE LE RESTE DU MONDE.           │
 * │                                                                       │
 * │  Une photo posée telle quelle au milieu d'un site de manga se voit      │
 * │  comme une pièce rapportée : sa lumière, ses couleurs et son grain      │
 * │  n'ont rien à voir avec le dessin qui l'entoure.                       │
 * │                                                                       │
 * │  La désaturation puis la teinte d'accent la ramènent dans la palette   │
 * │  du thème. Et c'est surtout ce qui rend la page ROBUSTE à ce qu'on      │
 * │  recevra : un portrait de studio et une photo de téléphone prise dans   │
 * │  un salon n'ont rien en commun — passées au même filtre, si.           │
 * │                                                                       │
 * │  ⚠ `object-position` vise le tiers HAUT : sur un portrait, le visage    │
 * │  y est presque toujours, et c'est le bas qu'on peut rogner sans perte.  │
 * └──────────────────────────────────────────────────────────────┘
 */
.artisan__portrait {
  position: absolute;
  inset: 0;
  z-index: 0;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  object-fit: cover;
  object-position: center 22%;
  filter: grayscale(1) contrast(1.08) brightness(.82);
}

/* La couche de teinte et le voile qui porte le texte, en une seule passe : un
   dégradé qui part de l'accent en haut et rejoint le noir sous les mots. */
.artisan--portrait .artisan__dire::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      color-mix(in srgb, var(--accent, var(--or)) 26%, transparent) 0%,
      rgba(10, 10, 12, .10) 34%,
      rgba(10, 10, 12, .72) 68%,
      rgba(10, 10, 12, .94) 100%);
}

/* ⚠ **Le mot géant disparaît quand il y a un visage.** Il n'existait que
   PARCE QU'il n'y avait pas de portrait — c'est écrit dans la section
   `preuve` de l'accueil. Garder les deux ferait un nom en grand par-dessus le
   visage de la personne qui le porte. */
.artisan--portrait .geant { display: none; }

/*
 * ⚠ **La carte EN ATTENTE de photo n'est pas une carte à portrait.**
 *
 * Le gabarit « photo à faire » porte son propre texte centré. Posé en plein
 * cadre sous le dégradé, il se superposait au nom et au rôle : les trois
 * cartes de la page « À propos » étaient illisibles. Ici il redevient ce
 * qu'il est — une vignette qui dit ce qu'on attend — dans le coin haut, à la
 * même place que sur l'accueil.
 */
.artisan--attente { min-block-size: 20rem; }

.artisan__attente {
  position: absolute;
  inset-block-start: var(--e-4);
  inset-inline-end: var(--e-4);
  z-index: 3;
  display: block;
  inline-size: 6rem;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 2px dashed color-mix(in srgb, var(--or) 55%, transparent);
  background: var(--panneau-creux);
}

.artisan__attente img { inline-size: 100%; block-size: 100%; object-fit: cover; }

/*
 * Le nom géant revient : sans visage à protéger, il n'y a plus de raison de
 * le cacher, et il tient la carte.
 *
 * ⚠ Mais il doit s'arrêter AVANT la vignette. Mesuré : « SCÉNARISTE » fait
 * 301 px de large dans une carte de 395, et la vignette en occupe 96 dans le
 * même coin — le mot passait derrière et se lisait « SCÉNARIS ». On lui
 * réserve la place à gauche, et on réduit le corps pour qu'il y tienne :
 * 20 cqw au plafond, sinon le mot court (« ÉDITEUR ») déborde là où le long
 * rentre.
 */
.artisan--attente .geant {
  display: block;
  inset-inline-end: 7.5rem;
  font-size: min(20cqw, 195cqw / var(--lettres, 7));
}

@media (max-width: 47.99rem) {
  .artisan--attente .geant { inset-inline-end: 5.5rem; }
}

/* Le texte s'arrête avant la vignette, sinon il passe dessous. */
.artisan--attente .artisan__dire { padding-inline-end: 7rem; }

@media (max-width: 47.99rem) {
  .artisan__attente { inline-size: 4.5rem; }
  .artisan--attente .artisan__dire { padding-inline-end: 5.5rem; }
}

.artisan__dire {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--e-1);
}

.artisan__badge {
  justify-self: start;
  padding: var(--e-1) var(--e-2);
  border: var(--filet) solid color-mix(in srgb, var(--accent, var(--or)) 45%, transparent);
  color: var(--accent, var(--or));
  font-family: var(--titre);
  font-size: var(--t-xs);
  letter-spacing: var(--lettrage-capital);
  text-transform: uppercase;
  margin-block-end: var(--e-2);
}

.artisan__nom {
  color: var(--blanc);
  font-family: var(--titre);
  font-size: var(--t-2xl);
  line-height: 1.1;
  text-transform: uppercase;
}

.artisan__role {
  color: var(--gris);
  font-family: var(--titre);
  font-size: var(--t-sm);
  letter-spacing: var(--lettrage-capital);
  text-transform: uppercase;
}

.artisan__texte {
  margin-block-start: var(--e-2);
  color: var(--gris);
  font-size: var(--t-sm);
  line-height: 1.55;
}

/* ────────────────────────────────────────────────
   Les chiffres, et la fin */

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

.apropos-final__corps {
  display: grid;
  gap: var(--e-4);
  max-inline-size: var(--mesure, 38rem);
  margin-block-start: var(--e-8);
  color: var(--gris);
  font-size: var(--t-lg);
  line-height: 1.6;
}

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

.apropos-final__action { margin-block-start: var(--e-2); }


/* ══════════════════════════════════════════════════════════════════
   LA PAGE « LE MANGA »
   ══════════════════════════════════════════════════════════════════ */

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

.manga-intro__titre {
  max-inline-size: 18ch;
  margin-block: var(--e-3) var(--e-4);
  font-size: var(--t-4xl);
  line-height: 1.02;
  text-wrap: balance;
}

.manga-intro__eclat { color: var(--rouge); }

/* La troisième partie passe à la ligne : c'est le rythme du titre du héros,
   et il tient la promesse que la page fait la même chose en plus profond. */
.manga-intro__ligne { display: block; }

.manga-intro__texte {
  max-inline-size: var(--mesure);
  color: var(--gris);
  font-size: var(--t-lg);
  line-height: 1.6;
}

.manga-intro__action { margin-block-start: var(--e-6); }

.manga-final__corps {
  display: grid;
  gap: var(--e-4);
  max-inline-size: var(--mesure);
  margin-block-start: var(--e-8);
  color: var(--gris);
  font-size: var(--t-lg);
  line-height: 1.6;
}

.manga-final__action { margin-block-start: var(--e-2); }


/* ══════════════════════════════════════════════════════════════════
   LA PAGE « FAQ »
   ══════════════════════════════════════════════════════════════════ */

/*
 * ═══════════════════════════════════════════════════════════════════════
 *  LA PAGE FAQ — deux colonnes au lieu d'une colonne centrée
 * ═══════════════════════════════════════════════════════════════════════
 * Relevé du 6 septembre 2026 : la page servait une colonne étroite au milieu
 * de deux bandes vides de 300 px sur un écran de 1440. L'aparté de droite
 * comble ce vide avec ce qui manquait, et le bloc « pas trouvé ? » y remonte
 * depuis le bas de page où personne n'allait.
 */
.faq-page__grille {
  display: grid;
  gap: var(--e-8);
  margin-block-start: var(--e-8);
}

@media (min-width: 60rem) {
  .faq-page__grille {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: var(--e-12);
    align-items: start;
  }

  /* L'aparté suit la lecture : dix questions ouvertes font défiler longtemps,
     et le moyen d'écrire ne doit pas disparaître en route. */
  .faq-page__aparte {
    position: sticky;
    inset-block-start: calc(var(--hauteur-entete) + var(--e-4));
  }
}

.faq-page__liste { min-inline-size: 0; }

.faq-page__aparte { display: grid; gap: var(--e-6); align-content: start; }

.faq-page__carte {
  display: grid;
  gap: var(--e-3);
  padding: var(--e-6);
  background: var(--panneau);
  border: var(--filet) solid var(--acier);
  border-block-start: 3px solid var(--or);
}

.faq-page__carte-titre {
  font-family: var(--titre);
  font-size: var(--t-xl);
  text-transform: uppercase;
  letter-spacing: .02em;
}

.faq-page__carte-texte { color: var(--gris); font-size: var(--t-sm); line-height: 1.55; }

.faq-page__courriel a {
  color: var(--or);
  font-family: var(--titre);
  font-size: var(--t-sm);
  letter-spacing: .02em;
  text-decoration: none;
  border-block-end: var(--filet) solid color-mix(in srgb, var(--or) 45%, transparent);
}

.faq-page__courriel a:hover,
.faq-page__courriel a:focus-visible { color: var(--blanc); border-color: var(--blanc); }

.faq-page__action { margin-block-start: var(--e-2); }

/* Le titre de groupe : il donne où regarder dans une liste qui, sinon, se
   balaye sans se lire. Le premier ne prend pas de marge haute. */
.faq__groupe {
  margin-block: var(--e-8) var(--e-2);
  color: var(--or);
  font-size: var(--t-lg);
  letter-spacing: var(--lettrage-capital);
  text-transform: uppercase;
}

.faq__groupe:first-child { margin-block-start: 0; }

.faq-reste__corps {
  display: grid;
  gap: var(--e-4);
  max-inline-size: var(--mesure);
  margin-block-start: var(--e-6);
  color: var(--gris);
  font-size: var(--t-lg);
  line-height: 1.6;
}

.faq-reste__action { margin-block-start: var(--e-2); }


/* ══════════════════════════════════════════════════════════════════
   LA PAGE « CONTACT », ET LE FORMULAIRE
   ══════════════════════════════════════════════════════════════════ */

.contact__grille {
  display: grid;
  gap: var(--e-8);
  margin-block-start: var(--e-8);
}

/* Les coordonnées passent à côté dès qu'il y a la place, et JAMAIS avant :
   sur téléphone, une colonne de 12 rem à côté d'un formulaire rend les deux
   illisibles. */
@media (min-width: 56rem) {
  .contact__grille { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}

.contact__coordonnees {
  display: grid;

  /* ⚠ `align-content` range le CONTENU en haut ; `align-self` empêche la
     BOÎTE de s'étirer sur la hauteur du formulaire. Sans le second, le
     panneau descendait jusqu'en bas avec 300 px de vide bordé sous les
     réseaux sociaux. Vu à l'écran. */
  align-self: start;
  align-content: start;
  gap: var(--e-4);
  padding: var(--e-6);
  border-block-start: 2px solid var(--or);
  background: var(--panneau-creux);
}

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

.contact__ligne {
  display: grid;
  gap: var(--e-1);
  color: var(--blanc);
  overflow-wrap: anywhere;
}

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

/* ⚠ Le décor est plus discret ici qu'ailleurs : la section est courte, donc
   le dégradé du haut et du bas ne l'éteint pas au milieu — or c'est là que
   se trouvent les champs du formulaire. Un fond qui se lit derrière une
   étiquette de saisie n'est plus une atmosphère, c'est du bruit. */
.contact .section__decor img { opacity: .10; }

/* Le titre de groupe de la boutique : « Les packs », puis « À l'unité ». */
.boutique__groupe {
  margin-block: var(--e-12) var(--e-4);
  color: var(--or);
  font-size: var(--t-2xl);
  letter-spacing: .02em;
  text-transform: uppercase;
}

.boutique__groupe:first-of-type { margin-block-start: var(--e-6); }

/* Le renvoi vers les réponses déjà écrites, sous les coordonnées. */
.contact__avant {
  margin-block-start: var(--e-8);
  padding-block-start: var(--e-6);
  border-block-start: var(--filet) solid var(--acier);
  display: grid;
  gap: var(--e-3);
}

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

.contact__avant-liste { display: grid; gap: var(--e-2); margin: 0; padding: 0; list-style: none; }

.contact__avant-liste a {
  color: var(--gris);
  font-size: var(--t-sm);
  line-height: 1.5;
  text-decoration: none;
  border-block-end: var(--filet) solid transparent;
}

.contact__avant-liste a:hover,
.contact__avant-liste a:focus-visible { color: var(--blanc); border-block-end-color: var(--acier); }

.contact__avant-suite { margin-block-start: var(--e-1); }

.contact__reseaux-mention {
  margin-block-start: var(--e-2);
  color: var(--gris);
  font-size: var(--t-sm);
}

/* ────────────────────────────────────────────────
   Le formulaire */

.formulaire {
  display: grid;
  gap: var(--e-4);
}

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

.formulaire__champ label {
  display: flex;
  align-items: baseline;
  gap: var(--e-2);
  color: var(--blanc);
  font-family: var(--titre);
  font-size: var(--t-sm);
  letter-spacing: var(--lettrage-capital);
  text-transform: uppercase;
}

.formulaire__facultatif {
  color: var(--gris);
  font-size: var(--t-xs);
  letter-spacing: .04em;
  text-transform: lowercase;
}

/*
 * ⚠ **16 px de police, pas moins, et ce n'est pas une question de goût.**
 *
 * Sous 16 px, Safari sur iPhone ZOOME la page au moment où le champ reçoit le
 * focus, et ne dézoome pas ensuite : le visiteur se retrouve dans un formulaire
 * trop grand pour son écran, à faire défiler latéralement pour lire ce qu'il
 * tape. `--t-base` vaut exactement 1 rem.
 */
.formulaire__champ input,
.formulaire__champ textarea {
  inline-size: 100%;
  padding: var(--e-3);
  border: var(--filet) solid var(--acier);
  background: var(--noir);
  color: var(--blanc);
  font-family: inherit;
  font-size: var(--t-base);
  line-height: 1.5;
  transition: border-color var(--duree-action) var(--sortie);
}

.formulaire__champ textarea { resize: vertical; }

.formulaire__champ input:focus-visible,
.formulaire__champ textarea:focus-visible {
  border-color: var(--or);
  outline: var(--filet) solid var(--or);
  outline-offset: 2px;
}

.formulaire__consentement {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-3);
  align-items: start;
  color: var(--gris);
  font-size: var(--t-sm);
  line-height: 1.5;
}

.formulaire__consentement input {
  inline-size: 1.05rem;
  block-size: 1.05rem;
  margin-block-start: .2rem;
  accent-color: var(--rouge);
}

.formulaire__consentement a { color: var(--rouge); }

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

/* ────────────────────────────────────────────────
   Ce que le formulaire répond */

.formulaire__etat {
  padding: var(--e-3) var(--e-4);
  border-inline-start: 3px solid currentColor;
  font-family: var(--titre);
  font-size: var(--t-base);
  line-height: 1.45;
}

.formulaire__etat--succes {
  color: var(--or);
  background: color-mix(in srgb, var(--or) 8%, transparent);
}

.formulaire__etat--erreur {
  color: var(--rouge);
  background: color-mix(in srgb, var(--rouge) 8%, transparent);
}

/*
 * ┌──────────────────────────────────────────────────────────────┐
 * │  LE PIÈGE À ROBOTS — ET IL SE CACHE PAR POSITION, PAS PAR `display`.  │
 * │                                                                       │
 * │  Un champ que les automates remplissent et que personne ne voit.       │
 * │  `display: none` serait plus simple et moins efficace : beaucoup de    │
 * │  robots ignorent les champs masqués ainsi, mais suivent le DOM.        │
 * │                                                                       │
 * │  ⚠ **Sans cette règle, le piège est VISIBLE** — une étiquette          │
 * │  « Laissez ce champ vide » au milieu du formulaire. La règle vit dans  │
 * │  une feuille, le champ dans un fichier PHP : rien ne les relie, et     │
 * │  c'est exactement le genre d'oubli qu'un portage produit.              │
 * │                                                                       │
 * │  `aria-hidden` et `tabindex="-1"` sont posés côté PHP : le champ est    │
 * │  donc hors du parcours clavier et des lecteurs d'écran. Il n'est       │
 * │  invisible pour personne d'autre que pour les robots.                  │
 * └──────────────────────────────────────────────────────────────┘
 */
.hidaya-piege {
  position: absolute;
  left: -9999px;
  top: auto;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
}


/* ═══════════════════════════════════════════════════════════════════════
   LES CARTES À COLLECTIONNER — une rangée qui glisse, des cartes qui vivent
   ═══════════════════════════════════════════════════════════════════════
   La rangée déborde de la page des deux côtés : la carte suivante dépasse,
   ce qui dit « ça continue » sans flèche. `scroll-snap` cale une carte au
   centre à chaque geste. La première s'aligne sur la colonne de la page par
   un `padding-inline` calculé, pas par une marge devinée.                 */

.cartes__piste {
  display: flex;
  gap: var(--e-4);

  /* ⚠ Positionné pour que les cartes le prennent comme repère : `offsetLeft`
     doit se compter depuis la piste elle-même, sinon il inclut la scène et
     le calcul de calage se décale. */
  position: relative;
  padding-block: var(--e-6) var(--e-4);
  padding-inline: max(var(--gouttiere), calc((100vw - 72rem) / 2 + var(--gouttiere)));
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(var(--gouttiere), calc((100vw - 72rem) / 2 + var(--gouttiere)));
  scrollbar-width: none;
}

.cartes__piste::-webkit-scrollbar { display: none; }

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

.carte-jeu {
  flex: 0 0 auto;
  inline-size: clamp(11rem, 24vw, 15rem);
  scroll-snap-align: center;
  perspective: 1200px;
}

/* Le corps est un bouton : un clic retourne la carte. `preserve-3d` fait
   tenir les deux faces dans le même volume ; sans lui le dos passe devant. */
.carte-jeu__corps {
  position: relative;
  display: block;
  inline-size: 100%;
  aspect-ratio: 600 / 851;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform var(--duree-action) var(--shonen);
}

.carte-jeu__corps.est-retournee { transform: rotateX(var(--rx, 0deg)) rotateY(calc(180deg + var(--ry, 0deg))); }

.carte-jeu__corps:focus-visible { outline: 2px solid var(--or); outline-offset: 4px; border-radius: 4%; }

.carte-jeu__face {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  border-radius: 4%;
  box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, .55);
  backface-visibility: hidden;
}

.carte-jeu__face--verso { transform: rotateY(180deg); }

/* Le reflet : une lumière qui suit le pointeur, et une bande irisée or → bleu
   qui traverse en diagonale. `color-dodge` l'ajoute à l'image au lieu de la
   couvrir — c'est ce qui fait « carte brillante » et non « carte sale ». */
.carte-jeu__reflet {
  position: absolute;
  inset: 0;
  border-radius: 4%;
  background:
    radial-gradient(circle at var(--souris-x, 50%) var(--souris-y, 50%), rgba(255, 255, 255, .34), transparent 42%),
    linear-gradient(115deg, transparent 32%, rgba(242, 200, 68, .28) 46%, rgba(56, 189, 248, .22) 56%, transparent 70%);
  mix-blend-mode: color-dodge;
  opacity: 0;
  transition: opacity var(--duree-action) var(--sortie);
  backface-visibility: hidden;
  pointer-events: none;
}

.carte-jeu:hover .carte-jeu__reflet,
.carte-jeu__corps:focus-visible .carte-jeu__reflet { opacity: 1; }

.carte-jeu__nom {
  margin-block-start: var(--e-3);
  color: var(--gris);
  font-family: var(--titre);
  font-size: var(--t-xs);
  letter-spacing: var(--lettrage-capital);
  text-align: center;
  text-transform: uppercase;
}

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

.cartes__pied {
  display: grid;
  justify-items: center;
  gap: var(--e-4);
  margin-block-start: var(--e-2);
}

.cartes__commandes {
  display: flex;
  align-items: center;
  gap: var(--e-3);
}

.cartes__aller {
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border: var(--filet) solid var(--acier);
  background: transparent;
  color: var(--blanc);
  font-size: var(--t-lg);
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--duree-action) var(--sortie), color var(--duree-action) var(--sortie);
}

.cartes__aller:hover,
.cartes__aller:focus-visible { border-color: var(--rouge); color: var(--rouge); }

.cartes__compte {
  min-inline-size: 5rem;
  color: var(--gris);
  font-family: var(--titre);
  font-size: var(--t-sm);
  letter-spacing: var(--lettrage-capital);
  text-align: center;
  font-variant-numeric: tabular-nums;
}


/* ═══════════════════════════════════════════════════════════════════════
   CEUX QUI FONT HIDAYA — trois portraits, un lien vers la page
   ═══════════════════════════════════════════════════════════════════════ */

.createurs__liste {
  display: grid;
  gap: var(--e-6);
  margin-block-start: var(--e-8);
  padding: 0;
  list-style: none;
}

@media (min-width: 40rem) {
  .createurs__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.createur__lien {
  display: grid;
  gap: var(--e-2);
  color: inherit;
  text-decoration: none;
}

.createur__portrait {
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: var(--filet) solid var(--acier);
  background: var(--panneau-creux);
  transition: border-color var(--duree-action) var(--sortie);
}

.createur__portrait img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: scale var(--duree-entree) var(--sortie);
}

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

.createur__lien:hover .createur__portrait img { scale: 1.03; }

/* Un gabarit n'est pas une photo : il le dit par un cadre pointillé or. */
.createur__portrait--provisoire { border: 2px dashed color-mix(in srgb, var(--or) 55%, transparent); }

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

.createur__nom {
  font-family: var(--titre);
  font-size: var(--t-lg);
  text-transform: uppercase;
}

.createur__nom--fonction { color: var(--gris); font-size: var(--t-sm); text-transform: none; }

.createurs__action { margin-block-start: var(--e-6); }

/* Sur téléphone, trois portraits 3:4 en pleine largeur faisaient 1 500 px de
   gabarits « photo à faire » (vu à 390). On les contient. */
@media (max-width: 40rem) {
  .createur__portrait { max-inline-size: 16rem; margin-inline: auto; }
  .createur__lien { justify-items: center; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════════════
   LE VOLET PANIER ET LE BOUTON FLOTTANT — sur TOUTES les pages
   ═══════════════════════════════════════════════════════════════════════
   ⚠ Ces règles vivaient dans 40-boutique.css, chargée seulement là où l'on
   vend : sur l'accueil le volet s'ouvrait sans aucun style. Vu par Ismail
   le 5 septembre 2026. Elles sont ici, dans la feuille commune.

   Le dessin est celui de la maquette (prototype/index.html, « Cart Drawer »
   et « Floating Cart »), repris valeur par valeur : c'est le référentiel.  */

.volet {
  position: fixed;
  inset: 0;
  inline-size: 100%;
  max-inline-size: 100%;
  block-size: 100%;
  max-block-size: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--blanc);
  overflow: visible;
}

.volet[open] { display: block; }

.volet::backdrop { background: rgba(0, 0, 0, .70); backdrop-filter: blur(4px); }

.volet__panneau {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  display: flex;
  flex-direction: column;
  inline-size: min(100%, 28rem);
  background: linear-gradient(180deg, #0E0E12 0%, var(--noir) 100%);
  border-inline-start: 1px solid rgba(255, 255, 255, .04);
  box-shadow: -20px 0 60px rgba(0, 0, 0, .5);
  animation: hidaya-volet-glisse .3s ease;
}

@keyframes hidaya-volet-glisse { from { translate: 100% 0; } }

/* ── L'entête : icône encadrée, titre, pastille, croix, puis le filet rouge ── */

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

.volet__entete::after {
  content: '';
  flex-basis: 100%;
  block-size: 2px;
  background: linear-gradient(90deg, var(--rouge) 0%, var(--rouge) 40%, transparent 100%);
}

.volet__titrage { display: flex; align-items: center; gap: var(--e-3); }

.volet__icone {
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  border: 1px solid rgba(255, 47, 51, .3);
  border-radius: 2px;
  color: var(--rouge);
}

.volet__icone svg { inline-size: 1rem; block-size: 1rem; }

.volet__titre {
  font-family: var(--titre);
  font-size: var(--t-2xl);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.volet__badge {
  padding: .1rem .5rem;
  border-radius: 2px;
  background: rgba(255, 47, 51, .1);
  color: var(--rouge);
  font-size: var(--t-xs);
  font-weight: 700;
}

.volet__badge[data-nombre="0"] { display: none; }

.volet__fermer {
  padding: .25rem;
  border: 0;
  background: none;
  color: var(--gris);
  font-size: var(--t-2xl);
  line-height: 1;
  cursor: pointer;
  transition: color .2s ease;
}

.volet__fermer:hover,
.volet__fermer:focus-visible { color: var(--blanc); }

/* ── Le bandeau d'échec et l'annulation ─────────────────────────────── */

.volet__echec {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  margin: var(--e-3) var(--e-6) 0;
  padding: var(--e-2) var(--e-3);
  border: 1px solid rgba(255, 47, 51, .4);
  background: rgba(255, 47, 51, .1);
  font-size: var(--t-sm);
  line-height: 1.45;
}

.volet__echec[hidden] { display: none; }

.volet__echec-action {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--or);
  font: inherit;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.volet__annuler {
  display: block;
  margin: var(--e-3) var(--e-6) 0;
  padding: .6rem .9rem;
  border: 1px solid rgba(242, 200, 68, .45);
  border-radius: 2px;
  background: rgba(242, 200, 68, .08);
  color: var(--or);
  font-size: var(--t-sm);
  text-align: center;
  text-decoration: none;
}

.volet__annuler:hover,
.volet__annuler:focus-visible { background: rgba(242, 200, 68, .16); }

/* ── Les lignes : la carte d'article de la maquette, entrée en cascade ── */

.volet__lignes {
  flex: 1 1 auto;
  display: grid;
  align-content: start;
  gap: var(--e-3);
  padding: var(--e-2) var(--e-6);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 47, 51, .2) transparent;
}

.volet__ligne {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3);
  overflow: hidden;
  background: #111116;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 4px;
  transition: border-color .2s ease, transform .15s ease;
  animation: hidaya-ligne-entre .3s ease both;
  animation-delay: calc(var(--rang, 0) * 60ms);
}

@keyframes hidaya-ligne-entre { from { opacity: 0; transform: translateX(20px); } }

.volet__ligne::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 3px;
  background: linear-gradient(180deg, var(--rouge), transparent);
  opacity: 0;
  transition: opacity .2s ease;
}

.volet__ligne:hover { border-color: rgba(255, 47, 51, .2); transform: translateX(-2px); }
.volet__ligne:hover::before { opacity: 1; }

.volet__visuel {
  display: grid;
  place-items: center;
  inline-size: 56px;
  block-size: 72px;
  padding: 3px;
  background: var(--noir);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 2px;
}

.volet__visuel img { max-inline-size: 100%; max-block-size: 100%; inline-size: auto; block-size: auto; object-fit: contain; }

.volet__nom {
  font-family: var(--titre);
  font-size: var(--t-base);
  line-height: 1.15;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.volet__prix { margin-block-start: .125rem; color: var(--or); font-size: var(--t-sm); }

.volet__quantite { display: flex; align-items: center; gap: var(--e-2); margin-block-start: var(--e-2); }

.volet__pas {
  display: grid;
  place-items: center;
  inline-size: 28px;
  block-size: 28px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 2px;
  background: transparent;
  color: var(--gris);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.volet__pas:hover,
.volet__pas:focus-visible { border-color: var(--rouge); color: var(--rouge); background: rgba(255, 47, 51, .06); }

.volet__pas[aria-disabled="true"] { border-color: rgba(255, 255, 255, .1); background: transparent; color: var(--gris); cursor: not-allowed; }

.volet__nombre { min-inline-size: 1.5rem; text-align: center; font-size: var(--t-sm); font-variant-numeric: tabular-nums; }

.volet__retirer {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  margin: 0 -8px;
  color: var(--gris);
  transition: color .2s ease;
}

.volet__retirer svg { inline-size: 1rem; block-size: 1rem; }
.volet__retirer:hover,
.volet__retirer:focus-visible { color: var(--rouge); }

/* ── L'état vide ─────────────────────────────────────────────────────── */

.volet__vide { display: grid; gap: var(--e-2); padding: var(--e-12) var(--e-2); text-align: center; }
.volet__vide-titre { font-family: var(--titre); font-size: var(--t-lg); letter-spacing: var(--lettrage-capital); text-transform: uppercase; }
.volet__vide-texte { color: var(--gris); font-size: var(--t-sm); }

/* ── Le pied : sous-total, mention, le bouton du site, « continuer » ──── */

.volet__pied {
  padding: var(--e-4) var(--e-6) var(--e-6);
  background: linear-gradient(180deg, rgba(255, 47, 51, .03) 0%, rgba(10, 10, 12, 0) 100%);
}

.volet__pied::before {
  content: '';
  display: block;
  block-size: 2px;
  margin-block-end: var(--e-4);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .06), transparent);
}

.volet__sous-total { display: flex; align-items: baseline; justify-content: space-between; margin-block-end: .25rem; }
.volet__etiquette { color: var(--gris); font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; }
.volet__total { font-family: var(--titre); font-size: var(--t-3xl); font-variant-numeric: tabular-nums; }
.volet__mention { margin-block-end: var(--e-4); color: var(--gris); font-size: var(--t-xs); }

.volet__plein .bouton,
.volet__videpied .bouton { inline-size: 100%; box-shadow: 0 10px 20px -5px rgba(255, 47, 51, .4); }

.volet__continuer {
  display: block;
  inline-size: 100%;
  margin-block-start: var(--e-3);
  padding: var(--e-2);
  border: 0;
  background: none;
  color: var(--gris);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .2s ease;
}

.volet__continuer:hover,
.volet__continuer:focus-visible { color: var(--blanc); }

/* Le pied « plein » par défaut ; sans ligne affichée, le pied « vide ». */
.volet__videpied { display: none; }
.volet:not(:has(.volet__ligne)) .volet__videpied { display: block; }
.volet:not(:has(.volet__ligne)) .volet__plein    { display: none; }

/* ── Le bouton flottant : rond rouge en bas à droite, comme la maquette ── */

.panier-flottant {
  position: fixed;
  inset-block-end: 6rem;      /* au-dessus de la barre fixe mobile */
  inset-inline-end: 1rem;
  z-index: var(--plan-flottant);
  display: grid;
  place-items: center;
  inline-size: 3.75rem;
  block-size: 3.75rem;
  border: 2px solid transparent;
  border-radius: 50%;
  background: var(--rouge);
  color: var(--blanc);
  box-shadow: 0 10px 20px -5px rgba(255, 47, 51, .4);
  text-decoration: none;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

@media (min-width: 48rem) {
  .panier-flottant { inset-block-end: 2rem; inset-inline-end: 2rem; }
}

.panier-flottant:hover,
.panier-flottant:focus-visible { background: var(--blanc); color: var(--rouge); border-color: var(--rouge); }

.panier-flottant svg { inline-size: 1.75rem; block-size: 1.75rem; }

.panier-flottant__compte {
  position: absolute;
  inset-block-start: -.75rem;
  inset-inline-end: -.75rem;
  display: grid;
  place-items: center;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  border: 2px solid var(--rouge);
  border-radius: 50%;
  background: var(--blanc);
  color: var(--rouge);
  font-size: var(--t-xs);
  font-weight: 700;
  transition: scale .2s ease;
}

.panier-flottant:hover .panier-flottant__compte { scale: 1.1; }

/* Sur téléphone aussi (demande d'Ismail, 5 sept. au soir), au-dessus de la
   barre fixe, comme dans la maquette (`bottom-24`). Il recouvrait le bout de
   « COMMANDER LE TOME 2 » (mesuré à 390) : il rétrécit un peu, et le bouton
   du héros lui laisse la place à droite. */
@media (max-width: 47.99rem) {
  .panier-flottant {
    inline-size: 3.25rem;
    block-size: 3.25rem;
    inset-block-end: calc(6.25rem + env(safe-area-inset-bottom));   /* barre 5.5 rem + .75 rem d'air, mesuré */
    inset-inline-end: .75rem;
  }

  /* Deux paniers dans le même coin (le rond flottant et le carré de la
     barre), deux pastilles « 0 » l'une sur l'autre — vu à 390 px. Le rond
     reste, demandé par Ismail ; le carré s'efface, et la barre n'est plus
     qu'un bouton pleine largeur. */
  .barre__panier { display: none; }
  .panier-flottant svg { inline-size: 1.5rem; block-size: 1.5rem; }
  .heros__action { padding-inline-end: 4.5rem; }
  /* Centré et plus large que sa zone, le bouton débordait dessus quand même :
     il prend la largeur qu'on lui laisse, son bord droit s'arrête avant le rond. */
  .heros__action .bouton { inline-size: 100%; padding-inline: var(--e-4); }
}

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


/* Le portrait d'un artisan, en haut à droite de sa carte — photo ou gabarit. */
.metier__portrait {
  position: absolute;
  inset-block-start: var(--e-4);
  inset-inline-end: var(--e-4);
  z-index: 3;
  display: block;
  inline-size: 5.5rem;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: var(--filet) solid var(--acier);
  background: var(--panneau-creux);
  transition: border-color var(--duree-action) var(--sortie), scale var(--duree-action) var(--sortie);
}
.metier__portrait img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.metier__portrait--provisoire { border: 2px dashed color-mix(in srgb, var(--or) 55%, transparent); }
.metier__portrait:hover, .metier__portrait:focus-visible { border-color: var(--or); scale: 1.04; }


/* ═══════════════════════════════════════════════════════════════════════
   LES PERSONNAGES — l'écran de sélection
   ═══════════════════════════════════════════════════════════════════════
   Un personnage en scène (l'aura, le nom géant, le texte complet), les
   douze en tuiles. Sur grand écran, scène et tuiles côte à côte ; sur
   téléphone, la scène puis trois rangées de quatre tuiles : douze
   personnages en un écran et demi, contre douze écrans avant.               */

.selection {
  display: grid;
  gap: var(--e-4);
  margin-block-start: var(--e-8);
}

@media (min-width: 60rem) {
  .selection {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--e-6);
    align-items: stretch;
  }
}

/* ── La scène ─────────────────────────────────────────────────────────── */

.selection__scene {
  position: relative;
  container-type: inline-size;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-4);
  min-block-size: 24rem;
  padding: var(--e-6);
  overflow: hidden;

  /* Un lavis de la couleur du personnage tombe du haut du panneau : c'est
     ce qui rattache le cadre à celui qui l'occupe, au lieu de le poser sur
     un fond neutre. Il change avec `--accent`, donc à chaque personnage. */
  /* ⚠ **Le foyer, c'est le personnage.** Les trois couches convergent sur ce
     point, et il n'est pas au milieu du cadre : sur téléphone le portrait est
     centré, sur grand écran il occupe la colonne de gauche. Un seul couple de
     valeurs à changer, les couches suivent. */
  --foyer-x: 50%;
  --foyer-y: 38%;

  background:
    radial-gradient(130% 78% at var(--foyer-x) 0%, color-mix(in srgb, var(--accent, var(--rouge)) 14%, transparent), transparent 72%),
    var(--panneau-creux);
  border: var(--filet) solid var(--acier);
  border-inline-start: 3px solid var(--accent, var(--rouge));
}

/*
 * ═══════════════════════════════════════════════════════════════════════
 *  LES COUCHES DERRIÈRE LE PERSONNAGE
 * ═══════════════════════════════════════════════════════════════════════
 * Ismail, 6 septembre 2026 : « il peut y avoir des couches qui se
 * superposent, comme avant c'était bien, avec les motifs en fond qui
 * donnaient un genre d'aura au personnage ».
 *
 * Cinq plans, du fond vers l'avant : le lavis du panneau · la trame · les
 * lignes de concentration · les deux masses de l'aura (`.aura`, déjà là) ·
 * le nom géant · le personnage · le texte qui remonte sur lui.
 *
 * ⚠ **L'ordre ne tient pas à des `z-index` en cascade** mais à l'ordre de
 * peinture : à `z-index` égal, un `::before` passe avant les enfants et un
 * `::after` après. La trame est donc sous l'aura, les lignes au-dessus
 * d'elle, et le nom géant (`z-index: 1`) au-dessus des deux. Rien à
 * renuméroter.
 */

/* Couche 1 — la trame, le screentone d'une page de profil, dans SA couleur. */
.selection__scene::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .55;
  background-image: radial-gradient(
    circle at center,
    color-mix(in srgb, var(--accent, var(--rouge)) 42%, transparent) 1px,
    transparent 1.1px
  );
  background-size: 7px 7px;

  /* Concentrée derrière le personnage, éteinte sur les bords : une case
     entièrement tramée redevient un fond, et l'effet disparaît. */
  mask-image: radial-gradient(ellipse 72% 58% at var(--foyer-x) var(--foyer-y), #000 6%, transparent 76%);
}

/* Couche 2 — les lignes de concentration, la signature du gros plan. */
.selection__scene::after {
  content: '';
  position: absolute;
  inset: -30%;
  z-index: 0;
  pointer-events: none;
  opacity: .35;
  background: repeating-conic-gradient(
    from -6deg at var(--foyer-x) var(--foyer-y),
    color-mix(in srgb, var(--blanc) 16%, transparent) 0deg 1.1deg,
    transparent 1.1deg 6.4deg
  );

  /* Le vide au centre est ce qui fait converger le regard : des rayons qui
     traversent le personnage le hachent au lieu de le désigner. */
  mask-image: radial-gradient(circle at var(--foyer-x) var(--foyer-y), transparent 26%, #000 58%, transparent 88%);
}

@media (min-width: 40rem) {
  .selection__scene {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: end;
    min-block-size: 32rem;

    /* Le portrait passe à gauche : le foyer le suit. */
    --foyer-x: 26%;
    --foyer-y: 52%;
  }
}

/* Le portrait : découpé, ancré en bas, avec son ombre portée. */
.selection__portrait {
  position: relative;
  z-index: 2;
  align-self: end;
  block-size: 16rem;

  /*
   * ⚠ **Deux images empilées dans la même case, jamais une seule.**
   *
   * Changer le `src` d'une image laisse l'ancienne à l'écran jusqu'à ce que
   * la nouvelle soit décodée : c'est le personnage qui « reste un peu »
   * signalé par Ismail. Ici la suivante se charge dans l'image cachée, et
   * les deux échangent leur opacité une fois qu'elle est prête. On ne voit
   * jamais de trou, et le fondu masque ce qui reste d'attente.
   */
  display: grid;
}

.selection__portrait img { grid-area: 1 / 1; }

/*
 * ⚠ **Une transition DIRIGÉE, pas un fondu.**
 *
 * Le fondu d'opacité seul « ne se voyait pas » (Ismail, 6 septembre 2026), et
 * pour cause : deux personnages de même taille au même endroit qui échangent
 * leur opacité en 280 ms, l'œil ne le lit pas comme un mouvement.
 *
 * Ici le nouveau arrive du côté d'où on va — de la droite quand on avance,
 * de la gauche quand on recule — pendant que l'ancien s'efface de l'autre
 * côté. `--sens` porte la direction, posée par le script juste avant.
 * Le geste correspond à celui du doigt : on tire vers la gauche, le suivant
 * entre par la droite.
 */
.selection__image--efface { opacity: 0; }

.selection__image--entre {
  animation: hidaya-perso-entre 460ms var(--shonen) both;
}

.selection__image--sort {
  animation: hidaya-perso-sort 300ms var(--sortie) both;
}

@keyframes hidaya-perso-entre {
  from { opacity: 0; transform: translateX(calc(var(--sens, 1) * 10%)) scale(.92); }
  55%  { opacity: 1; }
  to   { opacity: 1; transform: none; }
}

@keyframes hidaya-perso-sort {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateX(calc(var(--sens, 1) * -8%)) scale(.96); }
}

/* Le texte s'arrêtant au premier paragraphe, la hauteur libérée revient au
   personnage ici aussi : c'est lui qu'on est venu voir. */
@media (min-width: 40rem) { .selection__portrait { block-size: 30rem; } }

.selection__portrait img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  object-position: bottom center;

  /* Deux ombres portées : l'une noire, qui le décolle du fond ; l'autre dans
     sa couleur, qui suit son contour. C'est cette seconde qui fait l'aura —
     un halo rond derrière lui n'aurait pas sa forme. */
  filter:
    drop-shadow(0 1rem 2rem rgba(0, 0, 0, .7))
    drop-shadow(0 0 1.5rem color-mix(in srgb, var(--accent, var(--rouge)) 48%, transparent));
}

.selection__texte {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--e-2);
  align-self: end;
}

.selection__role {
  color: var(--accent, var(--rouge));
  font-family: var(--titre);
  font-size: var(--t-sm);
  letter-spacing: var(--lettrage-capital);
  text-transform: uppercase;
}

.selection__nom {
  font-size: var(--t-3xl);
  line-height: 1;
  text-transform: uppercase;
}

.selection__description {
  display: grid;
  gap: .5rem;
  max-inline-size: 36ch;
  color: var(--gris);
  font-size: var(--t-sm);
  line-height: 1.55;
}

/* Le renvoi vers la présentation entière, sur « Le manga ». */
.selection__suite {
  justify-self: start;
  margin-block-start: var(--e-1);
  padding-block-end: .15rem;
  color: var(--or);
  font-family: var(--titre);
  font-size: var(--t-xs);
  letter-spacing: var(--lettrage-capital);
  text-transform: uppercase;
  text-decoration: none;
  border-block-end: var(--filet) solid color-mix(in srgb, var(--or) 45%, transparent);
  transition: color var(--duree-action) var(--sortie), border-color var(--duree-action) var(--sortie);
}

.selection__suite:hover,
.selection__suite:focus-visible { color: var(--blanc); border-color: var(--blanc); }

/* La barre de passage : deux flèches, le rang, et le rappel du geste. */
.selection__pas {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  margin-block: var(--e-1) var(--e-2);
}

.selection__fleche {
  inline-size: 2.75rem;
  block-size: 2.75rem;
  flex: 0 0 auto;
  border: var(--filet) solid var(--acier);
  background: transparent;
  color: var(--blanc);
  font-size: var(--t-lg);
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--duree-action) var(--sortie), color var(--duree-action) var(--sortie);
}

.selection__fleche:hover,
.selection__fleche:focus-visible { border-color: var(--accent, var(--rouge)); color: var(--accent, var(--rouge)); }

.selection__compte {
  font-family: var(--titre);
  font-size: var(--t-sm);
  letter-spacing: var(--lettrage-capital);
  color: var(--gris);
  font-variant-numeric: tabular-nums;
}

/* Le rappel du geste ne s'affiche que là où le geste existe. */
.selection__geste { display: none; }

@media (hover: none) {
  .selection__geste {
    color: var(--gris);
    font-family: var(--titre);
    font-size: var(--t-xs);
    letter-spacing: var(--lettrage-capital);
    text-transform: uppercase;
    display: inline;
  }
}

/* Le changement de personnage : le portrait et le texte arrivent, pas la
   scène entière — le cadre reste, seul l'occupant change. */
/* Le portrait est exclu : son fondu enchaîné remplace cette entrée, et les
   deux ensemble donnaient un double mouvement. */
/* Le texte entre après le dessin, du même côté : c'est ce décalage qui fait
   lire une SUITE — le personnage d'abord, sa fiche ensuite — au lieu de deux
   choses qui bougent en même temps. */
.selection__scene.est-change .selection__texte { animation: hidaya-selection-entre .34s var(--sortie) 90ms both; }

@keyframes hidaya-selection-entre {
  from { opacity: 0; translate: calc(var(--sens, 1) * .9rem) .4rem; }
}

/* Le nom géant du fond accompagne, un peu plus lentement et plus large :
   deux plans qui bougent à des vitesses différentes font la profondeur. */
.selection__scene.est-change .geant { animation: hidaya-geant-entre .58s var(--shonen) both; }

@keyframes hidaya-geant-entre {
  from { opacity: 0; transform: translateX(calc(var(--sens, 1) * 7%)) scale(1.07); }
}

/*
 * Le souffle : au moment du changement, les lignes de concentration se
 * dilatent et se rétractent, la trame s'allume une fraction de seconde.
 * C'est l'impact d'une case de manga — sans lui, le personnage change mais
 * la scène, elle, ne se passe rien.
 */
.selection__scene.est-change::after { animation: hidaya-lignes-souffle .6s var(--sortie) both; }
.selection__scene.est-change::before { animation: hidaya-trame-souffle .5s var(--sortie) both; }

@keyframes hidaya-lignes-souffle {
  from { opacity: .8; transform: scale(1.14) rotate(calc(var(--sens, 1) * -2deg)); }
  to   { opacity: .35; transform: none; }
}

@keyframes hidaya-trame-souffle {
  from { opacity: .9; }
  to   { opacity: .55; }
}

/* ── Les tuiles ─────────────────────────────────────────────────────── */

.selection__grille {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--e-2);
  margin: 0;
  padding: 0;
  list-style: none;
  align-content: start;
}

@media (min-width: 60rem) {
  .selection__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-3); }
}

.selection__case { display: contents; }

.selection__tuile {
  position: relative;
  display: block;
  inline-size: 100%;
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  border: var(--filet) solid var(--acier);
  background: var(--panneau);
  color: var(--blanc);
  cursor: pointer;
  transition: border-color var(--duree-action) var(--sortie), box-shadow var(--duree-action) var(--sortie);
}

/* Le haut du dessin : c'est là qu'est le visage d'un personnage en pied. */
.selection__tuile img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: top center;
  transition: scale var(--duree-action) var(--sortie);
}

.selection__tuile-nom {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: .9rem .3rem .3rem;
  background: linear-gradient(to top, rgba(10, 10, 12, .92), transparent);
  font-family: var(--titre);
  font-size: var(--t-xs);
  letter-spacing: .06em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.selection__tuile:hover,
.selection__tuile:focus-visible { border-color: var(--accent, var(--rouge)); outline: none; }
.selection__tuile:hover img { scale: 1.06; }
.selection__tuile:focus-visible { box-shadow: 0 0 0 2px var(--noir), 0 0 0 4px var(--or); }

.selection__tuile.est-active {
  border-color: var(--accent, var(--rouge));
  box-shadow: 0 0 0 1px var(--accent, var(--rouge)), 0 0 1.5rem color-mix(in srgb, var(--accent, var(--rouge)) 45%, transparent);
}

.selection__tuile.est-active::after {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 3px;
  background: var(--accent, var(--rouge));
}

@media (prefers-reduced-motion: reduce) {
  .selection__scene.est-change .selection__portrait,
  .selection__scene.est-change .selection__texte { animation: none; }
  .selection__tuile img { transition: none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   LES CARTES — le cover-flow, piloté par le défilement
   ═══════════════════════════════════════════════════════════════════════
   La rangée plate « faisait un bon début » (Ismail, 5 sept.). Ici la carte
   au centre est droite, pleine, un peu plus grande ; ses voisines sont
   tournées vers elle et assombries ; un halo doré la désigne. Tout est
   calculé par le navigateur à partir de la position de chaque carte dans
   le rail (`animation-timeline: view(inline)`) : zéro script, zéro saccade.
   Sans cette API (Firefox), la rangée d'avant reste, intacte.               */

/*
 * ═══════════════════════════════════════════════════════════════════════
 *  LES COUCHES DERRIÈRE LES CARTES
 * ═══════════════════════════════════════════════════════════════════════
 * Le même traitement que la scène des personnages, demandé par Ismail le
 * 6 septembre 2026 : le halo qui désigne la carte calée, la trame de manga,
 * les lignes de concentration, et un souffle au moment où la carte du centre
 * change.
 *
 * ⚠ `isolation: isolate` n'est pas décoratif : sans lui, `position: relative`
 * seul ne crée pas de contexte d'empilement, et le `::after` des lignes
 * passerait PAR-DESSUS les cartes au lieu de rester derrière.
 */
.cartes__scene {
  position: relative;
  isolation: isolate;
}

.cartes__scene > * { position: relative; z-index: 1; }

/* Couche 2 — la trame, dorée comme le jeu. */
.cartes__trame {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .45;
  background-image: radial-gradient(
    circle at center,
    color-mix(in srgb, var(--or) 26%, transparent) 1px,
    transparent 1.1px
  );
  background-size: 7px 7px;
  mask-image: radial-gradient(ellipse 46% 62% at 50% 50%, #000 8%, transparent 74%);
}

/* Couche 3 — les lignes de concentration, sur la carte calée. */
.cartes__scene::after {
  content: '';
  position: absolute;
  inset: -30%;
  z-index: 0;
  pointer-events: none;
  opacity: .3;
  background: repeating-conic-gradient(
    from -6deg at 50% 50%,
    color-mix(in srgb, var(--blanc) 15%, transparent) 0deg 1.1deg,
    transparent 1.1deg 6.4deg
  );
  mask-image: radial-gradient(circle at 50% 50%, transparent 22%, #000 52%, transparent 86%);
}

/*
 * Le souffle : quand la carte du centre change, les lignes se dilatent, le
 * halo enfle, la trame s'allume. Le compteur entre du côté d'où l'on va.
 *
 * ⚠ Il ne se déclenche pas à chaque carte traversée mais **une fois le
 * mouvement posé** : sur un glissement rapide à travers dix cartes, dix
 * souffles enchaînés feraient un stroboscope. Le script attend 140 ms sans
 * changement avant de le lancer — c'est l'atterrissage qui est un impact,
 * pas le trajet.
 */
.cartes.est-change .cartes__scene::after { animation: hidaya-cartes-lignes .55s var(--sortie) both; }
.cartes.est-change .cartes__scene::before { animation: hidaya-cartes-halo .55s var(--sortie) both; }
.cartes.est-change .cartes__trame { animation: hidaya-cartes-trame .5s var(--sortie) both; }
.cartes.est-change .cartes__compte { animation: hidaya-cartes-compte .34s var(--sortie) both; }

@keyframes hidaya-cartes-lignes {
  from { opacity: .72; transform: scale(1.13) rotate(calc(var(--sens, 1) * -2deg)); }
  to   { opacity: .3; transform: none; }
}

/* ⚠ Le souffle du halo anime `scale`, PAS `transform`. Le halo est centré
   par `translate: -50%`, et une image clé sur `transform` ne l'écraserait
   pas — mais `transform: scale()` s'applique autour du centre de la boîte
   DÉJÀ déplacée, ce qui le fait glisser. Les propriétés individuelles
   `translate` et `scale` se composent proprement, dans cet ordre. */
@keyframes hidaya-cartes-halo {
  from { scale: 1.16; opacity: 1; }
  to   { scale: 1; opacity: 1; }
}

@keyframes hidaya-cartes-trame {
  from { opacity: .8; }
  to   { opacity: .45; }
}

@keyframes hidaya-cartes-compte {
  from { opacity: 0; translate: calc(var(--sens, 1) * .6rem) 0; }
}

/* Le halo, au centre du rail, derrière la carte calée. */
.cartes__scene::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 50%;
  /* En pourcentage de la scène, jamais en `vw` : mesuré, un `90vw` se
     recalcule sur une fenêtre déjà élargie par un débordement et
     l'amplifie — 28 rem de halo pour un écran de 390 px. */
  inline-size: min(28rem, 90%);
  translate: -50% 0;
  background: radial-gradient(ellipse 50% 42% at 50% 52%, rgba(242, 200, 68, .20), rgba(255, 47, 51, .06) 55%, transparent 72%);
  pointer-events: none;
}

/* La première et la dernière carte peuvent atteindre le centre : le rail
   commence et finit par une demi-largeur d'écran de vide. */
.cartes__piste {
  padding-inline: calc(50% - clamp(11rem, 24vw, 15rem) / 2);
  scroll-padding-inline: 0;

  /*
   * ⚠ **Le calage natif est débranché, et c'est la seule issue.**
   *
   * `scroll-snap` cale sur la boîte **transformée** de chaque carte. Or le
   * cover-flow les fait tourner et reculer en 3D à partir de leur position
   * dans le rail : les points de calage bougent donc avec le défilement, qui
   * bouge à son tour les transformations. Mesuré : une flèche visait 242 px,
   * le navigateur recalait à 184 — 58 px à côté, et parfois sur la carte
   * d'avant. C'est le « ça ne passe pas de carte en carte naturellement »
   * d'Ismail.
   *
   * Le script cale à la place, en coordonnées de mise en page, et repose la
   * carte la plus proche dès que le doigt lâche.
   */
  scroll-snap-type: none;
}

@supports (animation-timeline: view()) {
  .cartes__piste { perspective: 1400px; perspective-origin: 50% 45%; }

  .carte-jeu {
    transform-style: preserve-3d;
    animation: hidaya-carte-flux linear both;
    animation-timeline: view(inline);
    animation-range: entry 0% exit 100%;
  }

  /* Une zone plate de 44 à 56 % : la carte calée par le snap n'est jamais
     exactement au milieu au pixel près (mesuré : 10° d'inclinaison au repos).
     Dans cette zone elle est droite, quoi qu'il arrive. */
  @keyframes hidaya-carte-flux {
    0%   { transform: rotateY(42deg) translateZ(-180px) scale(.84); opacity: .45; }
    34%  { transform: rotateY(22deg) translateZ(-80px)  scale(.94); opacity: .75; }
    44%, 56% { transform: rotateY(0deg) translateZ(0) scale(1.08); opacity: 1; }
    66%  { transform: rotateY(-22deg) translateZ(-80px) scale(.94); opacity: .75; }
    100% { transform: rotateY(-42deg) translateZ(-180px) scale(.84); opacity: .45; }
  }

  /* Le nom ne suit pas la rotation : il reste lisible sous chaque carte. */
  .carte-jeu__nom { transform: translateZ(0); }

  @media (prefers-reduced-motion: reduce) {
    .carte-jeu { animation: none; }
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   TÉLÉPHONE — ce que les captures à 390 px ont montré (5 septembre 2026)
   ═══════════════════════════════════════════════════════════════════════
   Dix-huit écrans lus un par un. Ce qui suit corrige ce qui s'y voyait :
   un entête de 80 px, des sections à 96 px de marge, trois chiffres empilés
   sur un écran et demi, un mot géant coupé, un libellé vertical collé au
   portrait, des cartes 3D qui se chevauchaient, un menu de pied en colonne. */
@media (max-width: 47.99rem) {
  :root { --hauteur-entete: 4rem; }

  /* 3 rem de marge intérieure de chaque côté plus une étiquette qui ne se
     coupe pas : 343 px, plus large que l'écran d'un téléphone de 360. */
  .bouton--grand { padding-inline: var(--e-6); font-size: var(--t-lg); }

  /* ⚠ **`nowrap` était ce qui tirait la page sur le côté.** Un bouton
     insécable a une largeur minimale égale à son étiquette entière ; posé
     dans une grille centrée, il impose cette largeur à sa case, et la case
     déborde de l'écran (« Voir les packs avec cartes » : 330 px à 320).
     L'étiquette passe donc à la ligne plutôt que la page ne glisse — elle
     ne le fait que lorsqu'elle ne tient pas, la largeur d'affichage reste
     celle du texte tant qu'il rentre. */
  .bouton { white-space: normal; }

  .section { padding-block: var(--e-16); }
  .section--serree { padding-block: var(--e-8); }

  /* Les chiffres : trois cases sur une ligne, pas trois cases empilées. */
  .rythme__chiffres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chiffre { padding: var(--e-4) var(--e-1); }
  .chiffre__valeur { font-size: var(--t-3xl); }

  /* La carte de métier : la fonction devient un surtitre au-dessus du rôle
     (verticale, elle se collait au portrait) ; le mot géant se rétrécit
     pour tenir dans la case (« SCÉNARIS » était coupé). */
  .metier__fonction {
    position: static;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    max-height: none;
    margin-block-end: var(--e-1);
  }
  .metier .geant { font-size: min(24cqw, calc(180cqw / var(--lettres, 7))); }

  /* Les cartes à collectionner : une carte lisible au centre. À 176 px de
     large, les voisines se chevauchaient. */
  .carte-jeu { inline-size: min(58vw, 15rem); }
  .cartes__piste { padding-inline: calc(50% - min(58vw, 15rem) / 2); }

  /*
   * ⚠ **Un défilé vertical sur le côté, le personnage à côté.**
   *
   * Demandé par Ismail le 6 septembre 2026. Les douze vignettes forment une
   * colonne étroite qui défile toute seule, collée sous l'entête ; la scène
   * occupe tout le reste de la largeur et défile avec la page. Où qu'on en
   * soit dans le texte, la galerie est là, à portée de pouce, et le portrait
   * change à côté d'elle sans qu'on ait rien à remonter.
   *
   * ⚠ **`block-size: 0` puis `min-block-size: 100%` : le seul couple qui
   * donne au rail la hauteur du cadre.** Demandé par Ismail le 6 septembre :
   * « ça serait bien que la barre verticale ait la même hauteur que le
   * cadre, ça rend les choses uniformes ».
   *
   * Une hauteur nulle ne pèse rien quand le navigateur calcule la rangée :
   * c'est donc le personnage, et lui seul, qui en décide. La hauteur minimale
   * en pourcentage, elle, se résout APRÈS, sur la rangée une fois connue — le
   * rail la remplit exactement.
   *
   * Les deux essais ratés valent d'être écrits, ils se reproduiraient.
   * Simplement étiré, le rail imposait la hauteur de ses douze vignettes,
   * 1 176 px, à la scène : la section passait à 1 622 px. Plafonné à 30 rem,
   * il tombait 190 px trop court sous le cadre.
   */
  .selection {
    grid-template-columns: 4.25rem minmax(0, 1fr);
    gap: var(--e-3);
    align-items: stretch;
  }

  .selection__grille {
    order: -1;                       /* le rail passe en première colonne */
    display: flex;
    flex-direction: column;
    gap: var(--e-2);
    block-size: 0;
    min-block-size: 100%;
    overflow-y: auto;
    scrollbar-width: none;

    /* Le dégradé aux deux bouts dit qu'il y en a d'autres au-dessus et en
       dessous — c'est ce qui remplace une barre de défilement masquée. */
    mask-image: linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
  }

  .selection__grille::-webkit-scrollbar { display: none; }

  .selection__case { display: block; flex: 0 0 auto; }

  /* En colonne étroite, un portrait 3:4 se reconnaît mieux qu'un carré. */
  .selection__tuile { aspect-ratio: 3 / 4; }
  .selection__tuile-nom { padding: .7rem .15rem .2rem; font-size: .55rem; letter-spacing: .02em; }

  /*
   * ⚠ **Le portrait est ce qu'on est venu voir.**
   *
   * Il faisait 11 rem, soit un personnage rendu à 90 px de large : une
   * vignette, pas une vedette. Le texte coupé au premier paragraphe libère
   * la hauteur qu'il lui fallait — 26 rem, plus du double.
   */
  .selection__scene { min-block-size: 0; padding: var(--e-3); }

  /*
   * Le texte ne se pose pas SOUS le personnage, il remonte SUR lui : le
   * voile s'éteint vers le haut, donc les pieds se lisent encore à travers.
   * C'est ce chevauchement qui fait la profondeur — deux blocs empilés bord
   * à bord restent deux blocs.
   */
  .selection__texte {
    z-index: 3;
    margin-block-start: -3.5rem;
    margin-inline: calc(var(--e-3) * -1);
    padding: 3.5rem var(--e-3) 0;
    background: linear-gradient(
      to top,
      color-mix(in srgb, var(--noir) 94%, transparent) 38%,
      color-mix(in srgb, var(--noir) 62%, transparent) 70%,
      transparent
    );
  }
  /* 24 rem et pas davantage : au-delà, le lien « toute son histoire »
     passait sous la barre d'achat (mesuré : la barre commence à 755). */
  .selection__portrait { block-size: min(46svh, 24rem); }
  .selection__nom { font-size: var(--t-2xl); }
  .selection__description { font-size: .82rem; }

  /* La barre de passage tient dans la colonne étroite : le rappel du geste
     passe à la ligne plutôt que de pousser les flèches dehors. */
  .selection__pas { flex-wrap: wrap; gap: var(--e-2); }
  .selection__fleche { inline-size: 2.5rem; block-size: 2.5rem; }

  /* Le pied : le menu sur deux colonnes, moins d'air entre les blocs. */
  .pied__interieur { padding-block: var(--e-12); gap: var(--e-6); }
  .pied__liste:not(.pied__liste--enligne) { grid-template-columns: 1fr 1fr; }
}

@supports (animation-timeline: view()) {
  @media (max-width: 47.99rem) {
    .carte-jeu { animation-name: hidaya-carte-flux-etroit; }
  }

  /* La version étroite : les voisines s'écartent (translateX) et passent
     derrière la carte centrale (z-index), qui ne grossit pas. */
  @keyframes hidaya-carte-flux-etroit {
    0%   { transform: translateX(16%) rotateY(38deg) translateZ(-160px) scale(.82); opacity: .4; z-index: 0; }
    34%  { transform: translateX(7%) rotateY(20deg) translateZ(-70px) scale(.9); opacity: .7; z-index: 0; }
    44%, 56% { transform: none; opacity: 1; z-index: 2; }
    66%  { transform: translateX(-7%) rotateY(-20deg) translateZ(-70px) scale(.9); opacity: .7; z-index: 0; }
    100% { transform: translateX(-16%) rotateY(-38deg) translateZ(-160px) scale(.82); opacity: .4; z-index: 0; }
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   CE QUI PORTE LE POURQUOI — audit du 6 septembre 2026
   ═══════════════════════════════════════════════════════════════════════
   La raison d'acheter tenait dans une seule section, la plus petite de la
   page. Ces quatre objets la répartissent : la mission dans le premier
   écran, un rappel à chaque couture, un lien qui cesse de concurrencer les
   boutons d'achat, et la jauge du Tome 3 — muette tant qu'elle n'a pas de
   vrais chiffres.                                                          */

/* La mission, sous le texte du hero. Discrète : elle informe, elle ne crie
   pas. Le bouton reste le seul objet fort du premier écran. */
.heros__mission {
  margin-block-start: var(--e-3);
  color: var(--gris);
  font-family: var(--titre);
  font-size: var(--t-sm);
  letter-spacing: .03em;
  text-wrap: balance;
}

/* Le rappel de couture : un filet dans la couleur d'accent, puis la phrase.
   Le filet suffit à le détacher du corps de texte sans en faire un encadré,
   qui aurait le poids d'une publicité au milieu du récit. */
.rappel {
  margin-block-start: var(--e-6);
  padding-inline-start: var(--e-4);
  border-inline-start: 2px solid var(--or);
  color: var(--gris);
  font-size: var(--t-sm);
  line-height: 1.55;
  max-inline-size: var(--mesure);
}

.rappel--centre {
  margin-inline: auto;
  margin-block-end: var(--e-4);
  border-inline-start: 0;
  padding-inline: 0;
  border-block-start: 2px solid var(--or);
  padding-block-start: var(--e-3);
  text-align: center;
}

/*
 * ⚠ **Un lien, pas un bouton, et c'est tout le propos.**
 *
 * Trois appels à l'action envoyaient le visiteur hors de la page avec le
 * même poids visuel que « Commander ». Ils gardent leur destination et
 * perdent leur poids : sur une page dont le travail est de mener aux packs,
 * un seul objet doit avoir l'air d'un bouton.
 */
.lien-discret {
  display: inline-block;
  padding-block-end: .15rem;
  color: var(--or);
  font-family: var(--titre);
  font-size: var(--t-sm);
  letter-spacing: var(--lettrage-capital);
  text-transform: uppercase;
  text-decoration: none;
  border-block-end: var(--filet) solid color-mix(in srgb, var(--or) 45%, transparent);
  transition: color var(--duree-action) var(--sortie), border-color var(--duree-action) var(--sortie);
}

.lien-discret:hover,
.lien-discret:focus-visible { color: var(--blanc); border-color: var(--blanc); }

/* La jauge du Tome 3. Elle ne se rend que si les deux chiffres existent ;
   voir le garde-fou dans `parties/section/rythme.php`. */
.jauge { margin-block-start: var(--e-6); display: grid; gap: var(--e-3); }

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

.jauge__titre strong {
  color: var(--or);
  font-family: var(--titre);
  font-size: var(--t-xl);
  letter-spacing: .02em;
}

.jauge__piste {
  position: relative;
  block-size: .6rem;
  overflow: hidden;
  background: var(--panneau);
  border: var(--filet) solid var(--acier);
}

.jauge__part {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: var(--part, 0%);
  background: linear-gradient(90deg, var(--rouge), var(--or));
  box-shadow: 0 0 1rem color-mix(in srgb, var(--or) 55%, transparent);
}

@media (max-width: 47.99rem) {
  .rappel { margin-block-start: var(--e-4); font-size: .82rem; }
  .heros__mission { font-size: var(--t-xs); }
}



/* ═══════════════════════════════════════════════════════════════════════
   L'ATLAS — LES LIEUX DU MONDE
   ═══════════════════════════════════════════════════════════════════════

   ⚠ **AUCUNE OPACITÉ, AUCUN FLOU. C'EST TOUT LE PROPOS.**

   Les décors du site passaient jusqu'ici par `.section__decor` : 18 %
   d'opacité, 2 px de flou. Le raisonnement d'origine se défendait — un fond
   ne doit pas concurrencer le texte posé dessus. Mais appliqué aux SEPT
   illustrations d'environnement, il revenait à posséder un monde dessiné et
   à ne jamais le montrer. Relevé du 6 septembre 2026 : sur la page « Le
   manga », le village d'Hamid rendait une fumée rouge.

   Ici le rapport est inversé. Le texte n'est plus PAR-DESSUS l'image : il est
   sur une plaque, dans l'angle bas, comme sur les cartes imprimées. L'image
   n'a donc plus rien à céder, et le noir du site lui sert de passe-partout.
   Une illustration saturée sur du noir se détache plus que sur du blanc.     */

/* ─── L'étiquette de strate ─────────────────────────────────────────────
   Elle dit dans quel monde on est. Pas un intertitre décoratif : sans elle,
   le château sur la mer passe pour une île de plus alors que sa légende
   imprimée précise qu'il est DANS le monde intérieur de Rashmad.            */

.lieux__strate {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  margin-block: var(--e-16) var(--e-8);
  color: var(--or);
  font-family: var(--titre);
  font-size: var(--t-xl);
  letter-spacing: var(--lettrage-capital);
  text-transform: uppercase;
}

/* Le filet court jusqu'au bord : c'est la même grammaire que l'en-tête de
   chapitre, donc la strate se lit comme une subdivision et non comme un
   nouveau chapitre. */
.lieux__strate::after {
  content: '';
  flex: 1;
  block-size: var(--filet);
  background: linear-gradient(to right, var(--or-filet), transparent);
}

/* La première strate suit l'en-tête de chapitre, qui a déjà sa marge basse.
   Sans ça, l'écart entre le chapeau et « Le monde visible » vaut deux fois
   celui d'ailleurs — le genre de défaut qu'on ne voit pas sur une capture
   mais qui casse le rythme quand on descend la page. */
.lieux .chapitre + .lieux__strate { margin-block-start: var(--e-12); }


/* ─── LE PANNEAU ────────────────────────────────────────────────────────
   Un lieu est un panneau de planche : une découpe d'angle, un filet d'acier,
   et une plaque de légende dans le bas. La découpe est celle des cartes du
   thème (`--decoupe-carte`), pas une nouvelle forme.                        */

.lieu {
  position: relative;
  margin: 0;
  background: var(--panneau-creux);
  clip-path: var(--decoupe-carte);
  isolation: isolate;
}

/* ⚠ Le filet passe par une ombre INTÉRIEURE, pas par `border`.
   Une bordure posée sur un élément découpé au `clip-path` disparaît le long
   de la diagonale et laisse un bord nu qui ne ressemble à rien. L'ombre
   intérieure, elle, est découpée avec le reste. */
.lieu__cadre {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: inset 0 0 0 var(--filet) var(--acier);
}

.lieu__cadre img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: scale var(--duree-action) var(--sortie);
}

/* Les trois formats. Ils ne sont pas décidés au hasard : ils suivent le
   format naturel de chaque illustration, à un recadrage près vérifié image
   par image avant d'écrire cette ligne. */
.lieu--haut .lieu__cadre { aspect-ratio: 3 / 4; }

/* ⚠ **62 %, pas 50 %.** La rue du village est une illustration verticale
   recadrée en bandeau. Centré, le recadrage coupe la roue du vélo et donne
   trois quarts de toiture ; à 62 % de hauteur, il garde le tuk-tuk, Wira en
   selle et le ciel. Mesuré sur recadrage avant d'être écrit ici. */
.lieu--ouverture .lieu__cadre { aspect-ratio: 4 / 3; }
.lieu--ouverture .lieu__cadre img { object-position: 50% 62%; }

.lieu--seuil .lieu__cadre { aspect-ratio: 4 / 3; }


/* ─── LA PLAQUE DE LÉGENDE ──────────────────────────────────────────────
   Reprise des cartes imprimées : le nom, la phrase, le numéro de carte. Le
   dégradé monte du bas — le texte est sur du noir à 86 %, l'image reste
   entière au-dessus.                                                        */

.lieu__plaque {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  display: grid;
  gap: var(--e-1);
  padding: var(--e-16) var(--e-4) var(--e-4);
  background: linear-gradient(
    to top,
    var(--voile-fort) 0%,
    var(--voile-fort) 45%,
    rgba(10, 10, 12, .55) 72%,
    transparent 100%
  );
  pointer-events: none;
}

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

.lieu__mot {
  max-inline-size: 52ch;
  color: var(--texte);
  font-size: var(--t-sm);
  line-height: 1.5;
}

/* Le numéro de carte : la seule mention du produit dans toute la section, et
   elle ne vend rien — elle dit que ce lieu existe aussi sur du carton. Un
   bouton « Voir les packs » ici aurait ramené la page de vente que cette
   section est censée remplacer. */
.lieu__jeton {
  justify-self: start;
  margin-block-start: var(--e-2);
  padding-inline-start: var(--e-3);
  border-inline-start: 2px solid var(--or);
  color: var(--or);
  font-family: var(--titre);
  font-size: var(--t-xs);
  letter-spacing: var(--lettrage-capital);
  transition: border-color var(--duree-action) var(--sortie);
}


/* ─── LES TROIS COMPOSITIONS ────────────────────────────────────────────  */

.lieux__ouverture { margin-block-end: var(--e-12); }

/* Trois maisons, trois disciplines : le foyer, le pencak silat, la boxe thaï.
   La grille de trois est le tic par défaut des pages fabriquées — elle n'a le
   droit d'exister que quand le contenu EST trois choses parallèles. C'est le
   seul endroit de la section où c'est le cas. */
.lieux__trio {
  display: grid;
  gap: var(--e-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lieux__paire {
  display: grid;
  gap: var(--e-8);
  margin-block-start: var(--e-12);
}

/* La parole : deux des trente-six cartes ne montrent pas un lieu mais une
   phrase. Elles tiennent compagnie aux deux demeures — celle de la jungle, et
   celle qui est à l'intérieur d'un homme. */
/* ⚠ **Centrée, la parole flottait au milieu de 500 px de noir.**
   Le panneau haut fait 640 px, la citation trois lignes : verticalement
   centrée, elle laissait autant de vide au-dessus qu'en dessous et le bloc
   avait l'air inachevé. Alignée en tête, elle devient l'épigraphe du lieu —
   le vide passe alors sous le texte, où il se lit comme une marge et non
   comme un trou. */
.lieux__parole {
  margin: 0;
  padding-inline-start: var(--e-6);
  border-inline-start: var(--filet) solid var(--rouge-filet);
  align-self: start;
  max-inline-size: 34rem;
}

/* ⚠ **La parole était plus grosse que le lieu, et c'est l'inverse du propos.**
   Relevé sur la première capture : la citation en `--t-3xl` sur trois lignes
   pesait visuellement plus que la demeure de Rashmad à 352 px de large. Dans
   une section dont le sujet EST le décor, le texte qui l'accompagne passe
   après. Un cran en dessous, et le panneau élargi de 22 à 30 rem. */
.lieux__parole p {
  margin: 0;
  color: var(--blanc);
  font-family: var(--titre);
  font-size: var(--t-2xl);
  line-height: 1.2;
  letter-spacing: var(--lettrage-titre);
  text-wrap: balance;
}

.lieux__parole-source {
  margin-block-start: var(--e-4);
  color: var(--gris);
  font-size: var(--t-xs);
  letter-spacing: var(--lettrage-capital);
  text-transform: uppercase;
}

/* ─── LE SEUIL ──────────────────────────────────────────────────────────
   Le Monde des cœurs est la seule des sept images qui soit sombre : elle a la
   couleur du fond du site. En pleine largeur, elle cesse d'être une
   illustration POSÉE sur la page et devient un passage À TRAVERS elle —
   ce que dit exactement sa légende imprimée.                                */

.lieux__seuil { margin-block: var(--e-16); }

.lieux__seuil .lieu {
  clip-path: none;
  background: transparent;
}

.lieux__seuil .lieu__cadre { box-shadow: none; }

/* Les bords se fondent dans le noir de la section : sans ça, une bande
   turquoise s'arrête net contre le fond et on voit une image collée. */
.lieux__seuil .lieu__cadre::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--noir), transparent 22%, transparent 78%, var(--noir));
}

.lieux__seuil .lieu__plaque {
  inline-size: 100%;
  max-inline-size: var(--largeur-page);
  inset-inline: 0;
  margin-inline: auto;
  padding-inline: var(--gouttiere);
  background: linear-gradient(to top, var(--voile-fort) 0%, rgba(10, 10, 12, .70) 55%, transparent 100%);
}

.lieux__note {
  margin-block-start: var(--e-12);
  color: var(--gris);
  font-size: var(--t-sm);
  text-align: center;
}


/* ─── LES POINTS D'ARRÊT ────────────────────────────────────────────────  */

@media (min-width: 40rem) {
  .lieu--ouverture .lieu__cadre { aspect-ratio: 16 / 9; }
  .lieu--seuil .lieu__cadre     { aspect-ratio: 16 / 9; }
  .lieux__trio                  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lieu__plaque                 { padding-inline: var(--e-6); }
}

@media (min-width: 60rem) {
  /* La demeure et le palais se lisent avec leur parole en regard. Le second
     bloc est le miroir du premier : ce n'est pas une répétition, c'est l'écho
     qui dit que la demeure de la jungle et le palais intérieur sont la même
     maison à deux étages du monde. */
  .lieux__paire {
    grid-template-columns: minmax(0, 30rem) minmax(0, 1fr);
    gap: var(--e-12);
    align-items: start;
  }

  /* La citation démarre un cran sous le haut du panneau : alignée pile, elle
     donnerait deux lignes de tête qui se disputent le regard. */
  .lieux__paire .lieux__parole { padding-block-start: var(--e-8); }

  .lieux__paire--miroir { grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); }
  .lieux__paire--miroir .lieu { order: 2; }

  .lieux__paire--miroir .lieux__parole {
    order: 1;
    justify-self: end;
    padding-inline: 0 var(--e-6);
    border-inline-start: 0;
    border-inline-end: var(--filet) solid var(--rouge-filet);
    text-align: end;
  }
}

@media (min-width: 75rem) {
  /* Le seuil s'allonge : à cette largeur, un 16/9 fait 810 px de haut et
     occupe l'écran entier — le passage devient un mur. */
  .lieu--seuil .lieu__cadre { aspect-ratio: 12 / 5; }
}


/* ─── LES TROIS MOMENTS ─────────────────────────────────────────────────
   Nommés avant d'être écrits, et ciblés : aucun effet ne s'applique aux sept
   panneaux à la fois. Un mouvement identique répété sept fois n'est pas une
   animation, c'est un tic.                                                  */

/* 1 · LE SURVOL — sur les panneaux de grille seulement. L'image avance d'un
   demi-pas dans son cadre, et le filet du numéro de carte passe au blanc. */
@media (hover: hover) {
  .lieu:not(.lieu--seuil):hover .lieu__cadre img { scale: 1.04; }
  .lieu:not(.lieu--seuil):hover .lieu__jeton { border-inline-start-color: var(--blanc); }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* 2 · L'OUVERTURE SE POSE — un seul panneau. L'image entre légèrement
       trop grande et se pose à sa taille pendant qu'on descend : la caméra
       se stabilise sur le village. */
    .lieu--ouverture .lieu__cadre img {
      animation: hidaya-lieu-pose linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 55%;
    }

    /* 3 · LE SEUIL TRAVERSE — un seul panneau. Le cadrage dérive
       horizontalement au passage : on ne regarde pas la galaxie, on la
       traverse. `object-position` est animable, donc aucun script. */
    .lieu--seuil .lieu__cadre img {
      animation: hidaya-lieu-derive linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}

@keyframes hidaya-lieu-pose {
  from { scale: 1.08; }
  to   { scale: 1; }
}

@keyframes hidaya-lieu-derive {
  from { object-position: 38% 50%; }
  to   { object-position: 62% 50%; }
}


/* ═══════════════════════════════════════════════════════════════════════
   LES COMPAGNONS — une illustration détourée par page
   ═══════════════════════════════════════════════════════════════════════

   Six illustrations d'Hamid ont un fond transparent. Sur un site noir, elles
   se posent sans cadre : le détourage EST le cadrage. Une aura derrière, et
   la page cesse d'être un mur de texte sans qu'on ait ajouté un fond de plus.

   ⚠ **Une illustration par page, jamais la même deux fois.** C'est ce qui
   empêche la FAQ, le contact et « À propos » de se ressembler — le reproche
   d'origine. L'atlas de « Le manga » a les sept lieux ; ces trois pages ont
   chacune un personnage qu'on ne voit en grand nulle part ailleurs.          */

.compagnon {
  position: relative;
  display: grid;
  justify-items: center;
  margin: 0;
  isolation: isolate;
}

/* L'aura déborde du sujet : c'est elle qui donne l'impression que le
   personnage éclaire le noir au lieu d'y être posé. */
/* ⚠ **L'aura sortait de l'écran sur téléphone.** Mesuré sur /faq/ à 390 px :
   -18 % de chaque côté d'une colonne pleine largeur passent sous le bord.
   Le glissement ne se voyait pas — `overflow-x: clip` sur le corps le
   rattrapait — mais c'est le filet qui travaillait, pas la règle. Sur petit
   écran l'aura reste dans sa boîte ; elle ne déborde qu'à partir de 60 rem,
   là où la page a 80 px de marge de chaque côté pour l'absorber. */
.compagnon__aura {
  inset: 4% 0 12%;
  z-index: 0;
}

@media (min-width: 60rem) {
  .compagnon__aura { inset: 4% -14% 12%; }
}

.compagnon__image {
  position: relative;
  z-index: 1;
  inline-size: 100%;
  max-inline-size: 15rem;
  block-size: auto;
}

.compagnon__nom {
  position: relative;
  z-index: 1;
  margin-block-start: var(--e-4);
  color: var(--or);
  font-family: var(--titre);
  font-size: var(--t-sm);
  letter-spacing: var(--lettrage-capital);
  text-transform: uppercase;
}

/* La planche libre : une case entière, pas un personnage. Elle sert de
   respiration entre deux sections de texte, et elle montre ce que les
   artisans fabriquent — ce qui, sur la page qui les présente, vaut mieux
   qu'un paragraphe de plus. */
.compagnon--planche .compagnon__image { max-inline-size: 46rem; }
.compagnon--planche .compagnon__aura  { inset: 10% 4% 16%; }

.compagnon--haut .compagnon__image { max-inline-size: 13rem; }

@media (min-width: 60rem) {
  .compagnon__image          { max-inline-size: 17rem; }
  .compagnon--haut .compagnon__image { max-inline-size: 15rem; }
}


/* ═══════════════════════════════════════════════════════════════════════
   « VOUS NE LISEZ PAS DE MANGA ? » — et « CE QUE D'AUTRES EN DISENT »
   ═══════════════════════════════════════════════════════════════════════

   Deux sections nées le 8 septembre 2026, après que le client a précisé qui
   achète : **un parent**, dont une partie ne connaît pas le médium. Le site
   ne disait nulle part ce qu'est un manga — ni l'âge, ni le format, ni le
   sens de lecture — et n'affichait aucune des preuves qui existaient
   pourtant, dehors, depuis des mois.                                        */

/* ─── Les quatre points du médium ───────────────────────────────────────
   Le même langage que les arcs du récit : un numéro en contour, très
   effacé, qui rythme sans crier. Ce n'est pas une décoration reprise pour
   elle-même — ce sont bien quatre choses à lire dans l'ordre, de la plus
   déroutante (le sens de lecture) à la plus rassurante (deux tomes).       */

.medium__grille {
  display: grid;
  gap: var(--e-8);
  margin: var(--e-12) 0 0;
  padding: 0;
  list-style: none;
}

.medium__point {
  position: relative;
  padding-inline-start: var(--e-12);
}

.medium__numero {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: -.15em;
  color: var(--or);
  font-family: var(--titre);
  font-size: var(--t-3xl);
  line-height: 1;
  opacity: .35;
}

.medium__titre {
  color: var(--blanc);
  font-size: var(--t-lg);
  line-height: 1.25;
}

.medium__texte {
  margin-block-start: var(--e-2);
  color: var(--gris);
  font-size: var(--t-sm);
}

@media (min-width: 40rem) {
  .medium__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  /* Quatre colonnes, et c'est le contenu qui le justifie : quatre faits de
     même rang, aucun plus important qu'un autre. Une hiérarchie inventée
     entre eux ferait croire qu'il y en a un à retenir. */
  .medium__grille { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-6); }
}


/* ─── La parole, sous les chiffres ──────────────────────────────────────
   Une seule, parce qu'il n'en existe qu'une : celle d'un acheteur vérifié
   qui a offert le livre. Elle est centrée et large — c'est la phrase qui
   répond à la seule peur du parent, elle a droit à la place.              */

.credits__parole {
  max-inline-size: 44rem;
  margin: var(--e-12) auto 0;
  padding-block-start: var(--e-8);
  border-block-start: var(--filet) solid var(--or-filet);
  text-align: center;
}

.credits__parole p {
  margin: 0;
  color: var(--blanc);
  font-family: var(--titre);
  font-size: var(--t-2xl);
  line-height: 1.2;
  letter-spacing: var(--lettrage-titre);
  text-wrap: balance;
}

.credits__source {
  margin-block-start: var(--e-4);
  color: var(--gris);
  font-size: var(--t-xs);
  letter-spacing: var(--lettrage-capital);
  text-transform: uppercase;
}


/* ─── Le premier écran porte désormais DEUX boutons ─────────────────────
   Un plein, un en contour.

   ⚠ **La classe `.heros__actions` existait déjà, orpheline.** Sa règle
   d'empilement mobile est écrite plus haut (sous 48 rem), héritée d'une
   version où le héros portait deux boutons ; aucun gabarit ne l'utilisait
   plus. On la ranime plutôt que d'en écrire une seconde — et surtout on ne
   redouble pas son point d'arrêt, sinon deux règles décideraient de la même
   chose à deux largeurs différentes.                                       */

.heros__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-4);
  align-items: center;
}


/* ─── L'appel permanent de l'entête, sur grand écran ────────────────────
   ⚠ **Il n'y en avait aucun.** Relevé à mi-page le 8 septembre 2026 : sur
   téléphone une barre fixe suit le défilement, sur ordinateur il ne restait
   qu'un panier flottant de 60 px. Un panier n'est pas un appel à l'action.

   Il est caché sous 60 rem : en dessous, c'est la barre basse qui fait le
   travail, et deux appels permanents à l'écran s'annulent l'un l'autre.    */

.entete__cta { display: none; }

@media (min-width: 60rem) {
  .entete__cta {
    display: inline-flex;
    /* Un cran sous le bouton courant : dans une entête, l'appel doit être
       disponible, pas dominant. C'est le héros qui crie, pas la barre. */
    padding-block: var(--e-2);
    padding-inline: var(--e-4);
    font-size: var(--t-xs);
  }
}


/* ─── « Où nous trouver » ────────────────────────────────────────────────
   Onze revendeurs, en étiquettes. Ni logos (on n'a pas les droits, et un mur
   de logos mal cadrés fait plus de mal que de bien), ni liens sortants : la
   page ne pousse pas dehors, elle prouve qu'on existe dehors.              */

.apropos-ou__liste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin: var(--e-8) 0 0;
  padding: 0;
  list-style: none;
}

.apropos-ou__liste li {
  padding: var(--e-2) var(--e-4);
  border: var(--filet) solid var(--acier);
  background: var(--panneau);
  color: var(--texte);
  font-family: var(--titre);
  font-size: var(--t-sm);
  letter-spacing: var(--lettrage-capital);
  text-transform: uppercase;
}

.apropos-ou__fin {
  max-inline-size: var(--mesure);
  margin-block-start: var(--e-8);
  padding-inline-start: var(--e-6);
  border-inline-start: 2px solid var(--or);
  color: var(--blanc);
  font-size: var(--t-lg);
}