/**
 * 25 · LE LANGAGE DU MANGA
 *
 * ┌───────────────────────────────────────────────────────────────────────┐
 * │  POURQUOI CE FICHIER EXISTE                                           │
 * │                                                                       │
 * │  Le rendu précédent était correct et n'avait aucun point de vue : du   │
 * │  vocabulaire « carte web » — panneaux, grilles régulières, ombres —   │
 * │  posé sur un site de manga. Ça marche partout, donc ça ne dit rien     │
 * │  nulle part.                                                          │
 * │                                                                       │
 * │  Le médium a son propre langage graphique, vieux d'un siècle et        │
 * │  immédiatement lisible par le public visé :                            │
 * │                                                                       │
 * │    · la CASE et la GOUTTIÈRE — des panneaux inégaux séparés par du     │
 * │      vide franc, jamais une grille régulière ;                         │
 * │    · la TRAME — les points d'impression, la texture du manga ;        │
 * │    · les LIGNES DE VITESSE — le rayonnement qui dit l'action ;         │
 * │    · le DÉTOURAGE — un personnage qui sort de sa case ;                │
 * │    · l'OBI — la bande de papier autour d'un livre japonais.           │
 * │                                                                       │
 * │  Rien ici n'est décoratif : chaque motif remplace une convention web  │
 * │  générique par son équivalent du médium.                               │
 * └───────────────────────────────────────────────────────────────────────┘
 *
 * ⚠ Ce fichier se charge APRÈS `20-motifs.css` et AVANT `30-pages.css` :
 * il peut donc préciser un motif, et une page peut le préciser à son tour.
 */


/* ═══════════════════════════════════════════════════════════════════════
   LA TRAME — la texture d'impression du manga
   ═══════════════════════════════════════════════════════════════════════
   Le « screentone » : la feuille de points que les auteurs collaient sur
   leurs planches pour faire les gris. C'est LA texture du médium, et elle
   ne ressemble à rien d'autre sur le web.

   ⚠ Deux radiales superposées à des pas différents, pas une image : ça pèse
   zéro octet, ça se met à l'échelle sans flou, et la densité se règle par
   une variable. */

.trame { position: relative; isolation: isolate; }

.trame > * { position: relative; z-index: 2; }

.trame::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: var(--trame-force, .5);
  background-image: radial-gradient(
    circle at center,
    var(--trame-teinte, rgba(255, 255, 255, .16)) var(--trame-point, 1px),
    transparent var(--trame-point, 1px)
  );
  background-size: var(--trame-pas, 6px) var(--trame-pas, 6px);
}

/* La trame qui s'éteint en dégradé — c'est ainsi qu'on ombre une case. */
.trame--fondu::before {
  mask-image: linear-gradient(to bottom, #000, transparent 85%);
}

.trame--rouge { --trame-teinte: rgba(255, 47, 51, .32); }
.trame--or    { --trame-teinte: rgba(242, 200, 68, .28); }
.trame--dense { --trame-pas: 4px; --trame-force: .7; }
.trame--large { --trame-pas: 10px; --trame-point: 1.5px; }


/* ═══════════════════════════════════════════════════════════════════════
   LES LIGNES DE VITESSE — le rayonnement de l'action
   ═══════════════════════════════════════════════════════════════════════
   Le motif que tout lecteur de manga reconnaît sans savoir le nommer : les
   traits qui convergent vers le point d'impact.

   ⚠ `repeating-conic-gradient`, pas une image ni un SVG : le rayonnement
   part d'un point réglable, il est net à toutes les tailles, et il coûte une
   déclaration. Le masque radial le fait disparaître au centre — sinon les
   traits se percutent en une bouillie au point de convergence. */

.vitesse { position: relative; isolation: isolate; }

.vitesse > * { position: relative; z-index: 2; }

.vitesse::before {
  content: '';
  position: absolute;
  inset: -20%;
  z-index: 1;
  pointer-events: none;
  opacity: var(--vitesse-force, .16);
  background: repeating-conic-gradient(
    from 0deg at var(--vitesse-x, 70%) var(--vitesse-y, 42%),
    var(--vitesse-teinte, #fff) 0deg 0.35deg,
    transparent 0.35deg 2.4deg
  );
  mask-image: radial-gradient(
    circle at var(--vitesse-x, 70%) var(--vitesse-y, 42%),
    transparent 12%,
    #000 46%,
    #000 100%
  );
}

.vitesse--rouge { --vitesse-teinte: var(--rouge); --vitesse-force: .22; }


/* ═══════════════════════════════════════════════════════════════════════
   LA PLANCHE — des cases inégales séparées par des gouttières
   ═══════════════════════════════════════════════════════════════════════
   ⚠ **C'est le remplacement du « héros image de fond + texte par-dessus ».**

   Une planche de manga n'est jamais une grille régulière : les cases sont de
   tailles différentes, séparées par du vide franc, et une case peut déborder.
   C'est ce déséquilibre qui raconte — la grande case pose la scène, la petite
   accélère.

   La gouttière est le fond de la page qui traverse : on ne dessine pas de
   trait, on laisse passer le noir. */

.planche {
  display: grid;
  gap: var(--gouttiere-case, 6px);
  background: var(--noir);
  padding: var(--gouttiere-case, 6px);
}

.case {
  position: relative;
  overflow: hidden;
  background: var(--panneau-creux);
  border: 2px solid var(--blanc);
  min-block-size: 0;
  min-inline-size: 0;
}

/* La case penchée — une seule par planche. Dans un manga, la case oblique
   signale la rupture ; répétée, elle ne signale plus rien. */
.case--oblique {
  clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
}

.case--sansbord { border: 0; }

/* Une case qui laisse le fond de page passer : le « fondu au noir ». */
.case--ouverte { background: transparent; border-color: var(--acier); }


/* ═══════════════════════════════════════════════════════════════════════
   LE DÉTOURAGE QUI SORT DE SA CASE
   ═══════════════════════════════════════════════════════════════════════
   ⚠ **Les huit portraits sont de VRAIS détourages avec couche alpha.**
   Je les rendais dans des cadres rectangulaires en `object-fit: cover` : le
   recadrage détruisait précisément ce qui fait leur valeur. Un personnage
   détouré doit déborder, pas être rogné.

   `object-fit: contain` et un fond transparent : la silhouette reste entière,
   et l'ombre portée la décolle du fond. */

.detoure {
  position: relative;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .55));
  transition: scale var(--duree-entree) var(--sortie),
              filter var(--duree-entree) var(--sortie);
}

/* Le personnage dépasse du haut de sa case : c'est le geste qui fait qu'une
   page cesse d'être un tableau. */
.detoure--deborde {
  margin-block-start: -12%;
  block-size: 112%;
}

.case:hover .detoure,
.personnage:hover .detoure {
  scale: 1.04;
  filter: drop-shadow(0 22px 34px rgba(255, 47, 51, .35));
}


/* ═══════════════════════════════════════════════════════════════════════
   L'OBI — la bande de papier autour d'un livre japonais
   ═══════════════════════════════════════════════════════════════════════
   Le bandeau qui ceinture un tome en librairie et qui porte l'accroche. Ici,
   un défilement continu qui traverse la page d'un bord à l'autre.

   ⚠ **La piste est dupliquée dans le balisage** — deux séries identiques.
   Sans ça, la translation de -50 % fait sauter le raccord à chaque boucle,
   et le saut se voit.

   ⚠ Mis en pause au survol ET au focus : une animation infinie qu'on ne peut
   pas arrêter est un manquement WCAG 2.2.2 dès qu'elle dure plus de 5 s. */

/*
 * ⚠ **Un rouge à elle, plus sourd que celui du thème.**
 *
 * Le rouge vif reste la couleur des accents ponctuels — un numéro de
 * chapitre, une bande de fiche, un filet. Étalé sur une bande pleine de
 * 102 px qui traverse l'écran, il agresse. Un rouge mélangé au noir du
 * thème garde l'identité sans la crier, et il améliore au passage le
 * contraste du texte clair qu'il porte.
 */
:root { --rouge-obi: color-mix(in srgb, var(--rouge) 62%, var(--noir)); }

.obi {
  overflow: hidden;
  padding-block: var(--e-3);
  background: var(--rouge-obi);
  border-block: 2px solid var(--noir);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  transform: rotate(-1.2deg) scale(1.03);
}

.obi__piste {
  display: flex;
  gap: var(--e-8);
  inline-size: max-content;
  animation: hidaya-obi 34s linear infinite;
}

.obi:hover .obi__piste,
.obi:focus-within .obi__piste { animation-play-state: paused; }

.obi__mot {
  display: inline-flex;
  align-items: center;
  gap: var(--e-8);
  color: var(--blanc);
  font-family: var(--titre);
  font-size: var(--t-xl);
  letter-spacing: var(--lettrage-capital);
  text-transform: uppercase;
  white-space: nowrap;
}

.obi__mot::after {
  content: '\25C6';
  color: var(--noir);
  font-size: .7em;
}

@keyframes hidaya-obi {
  from { translate: 0 0; }
  to   { translate: -50% 0; }
}


/* ═══════════════════════════════════════════════════════════════════════
   L'ONOMATOPÉE — le titre qui déborde du cadre
   ═══════════════════════════════════════════════════════════════════════
   Dans un manga, le gros mot sonore n'est jamais contenu : il traverse les
   cases. Un titre rogné par le bord de l'écran dit la même chose. */

.onomatopee {
  font-family: var(--titre);
  line-height: .82;
  letter-spacing: -.01em;
  text-transform: uppercase;
  text-wrap: balance;
}

.onomatopee__contour {
  -webkit-text-stroke: 2px var(--rouge);
  color: transparent;
  paint-order: stroke fill;
}


/* ═══════════════════════════════════════════════════════════════════════
   LE SCEAU — le tampon d'édition
   ═══════════════════════════════════════════════════════════════════════
   Le hanko rouge apposé sur une couverture. Remplace le badge web arrondi. */

.sceau {
  display: inline-grid;
  place-items: center;
  inline-size: 5.5rem;
  block-size: 5.5rem;
  padding: var(--e-2);
  background: var(--rouge);
  color: var(--blanc);
  border: 2px solid var(--blanc);
  border-radius: 50%;
  font-family: var(--titre);
  font-size: var(--t-sm);
  line-height: 1;
  letter-spacing: .06em;
  text-align: center;
  text-transform: uppercase;
  rotate: -8deg;
  box-shadow: var(--halo-rouge);
  transition: rotate var(--duree-action) var(--shonen);
}

.sceau:hover { rotate: 0deg; }


/* ═══════════════════════════════════════════════════════════════════════
   LA CASE QUI SE DÉVOILE — la révélation en diagonale
   ═══════════════════════════════════════════════════════════════════════
   Une case de manga se découvre d'un coup, pas en fondu. Le masque diagonal
   remplace le `fade-up` générique appliqué partout.

   ⚠ Comme `.apparait`, l'état masqué est conditionné à `.js` : sans script,
   tout est visible. Un contenu qui dépend du JavaScript pour exister est un
   contenu perdu. */

.js .devoile {
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  transition: clip-path var(--duree-entree) var(--sortie);
}

.js .devoile.est-vu {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

@media (prefers-reduced-motion: reduce) {
  .js .devoile { clip-path: none; }
}


/* ════════════════════════════════════════════════════════════════════════
   LES BRAISES — les lueurs qui remontent
   ════════════════════════════════════════════════════════════════════════
   ⚠ **Ces valeurs sont reprises à l'identique du thème précédent.** Le client
   les a validées et les réclame explicitement : « les petites lueurs qu'on
   avait mises ». Ce ne sont pas des réglages à refaire au jugé — le grain de
   l'ambiance tient au rapport entre la durée de montée, la respiration du halo
   et la dérive latérale. Les toucher séparément casse l'ensemble.

   Trois animations COMPOSÉES sur le même élément, et c'est ce qui fait la
   différence avec une simple montée :

     · `braise-monte`   la trajectoire et l'extinction
     · `braise-derive`  le balancement latéral, sur un autre tempo
     · `braise-respire` le halo qui enfle et se rétracte

   Les trois ont des durées premières entre elles : la boucle complète ne se
   referme jamais au même endroit, donc l'œil ne repère pas de motif.        */

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

.braise {
  position: absolute;
  pointer-events: none;
  border-radius: 45% 45% 35% 35%;
  background: linear-gradient(
    to bottom,
    var(--braise-teinte) 0%,
    var(--braise-teinte) 40%,
    transparent 100%
  );
  animation:
    braise-monte   var(--braise-duree) var(--braise-retard) linear infinite,
    braise-derive  var(--braise-derive-duree) var(--braise-retard) ease-in-out infinite,
    braise-respire var(--braise-souffle) ease-in-out infinite;
  /* ⚠ `will-change` sur `translate` et `opacity` seulement. L'ajouter sur
     `box-shadow` ferait promouvoir trente calques — la carte graphique tient,
     un téléphone d'entrée de gamme non. */
  will-change: translate, opacity;
}

@keyframes braise-monte {
  0%   { translate: 0 0; scale: 1; opacity: 0; }
  5%   { opacity: var(--braise-opacite); }
  40%  { opacity: var(--braise-opacite); scale: .85; }
  70%  { opacity: calc(var(--braise-opacite) * .35); scale: .5; }
  100% { translate: 0 var(--braise-course); scale: .2; opacity: 0; }
}

@keyframes braise-derive {
  0%   { margin-left: 0; }
  25%  { margin-left: var(--braise-amplitude); }
  50%  { margin-left: 0; }
  75%  { margin-left: calc(var(--braise-amplitude) * -.7); }
  100% { margin-left: 0; }
}

@keyframes braise-respire {
  0%, 100% { box-shadow: 0 0 var(--braise-halo) var(--braise-halo-flou) var(--braise-halo-teinte); }
  50%      { box-shadow: 0 0 calc(var(--braise-halo) * 2) calc(var(--braise-halo-flou) * 1.8) var(--braise-halo-teinte); }
}

/* ⚠ **Sous 768 px, une braise sur deux s'éteint — et c'est le CSS qui décide.**

   Le gabarit en rend toujours 26. Faire trancher le PHP par `wp_is_mobile()`
   était un piège : cette fonction lit l'agent utilisateur, pas l'écran, et une
   mise en cache de page figerait le choix de la première visite pour tout le
   monde. Ici, la décision revient à la seule chose qui connaisse vraiment la
   taille de l'écran.

   Vingt-six éléments animés en continu, c'est de la batterie dépensée pour un
   décor. Treize suffisent à l'ambiance sur une surface deux fois plus petite. */
@media (max-width: 47.99rem) {
  .braise:nth-child(even) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  /* Les braises ne sont pas figées : elles DISPARAISSENT. Une braise arrêtée
     en plein vol est une tache lumineuse inexplicable au milieu du ciel. */
  .braises { display: none; }
}