/* tome-proto.css — complement au theme Player's Handbook V3.
 *
 * Le theme (phb-v3.css, compile depuis homebrewery/themes/V3) gere tout
 * l'habillage : couvertures, notes, pieds de page, masques aquarelle,
 * colonnes, typographie. Ce fichier ne fait que trois choses qu'il ne peut
 * pas faire, parce qu'elles dependent du site qui l'accueille :
 *
 *   1. couper l'heritage du theme sombre du site,
 *   2. disposer les pages dans la fenetre,
 *   3. proposer un mode Flux responsive.
 */

/* ------------------------------------------------------- barriere d'heritage
 *
 * Le theme suppose un document neutre : il ne redefinit pas ce qu'il croit
 * deja par defaut. Scope dans un site au theme sombre, la couleur de texte
 * (#f9edd9) et l'interlettrage des titres s'infiltrent par heritage et rendent
 * le corps illisible sur parchemin.
 */
.phb-tome {
  color: #000;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  letter-spacing: normal;
  text-shadow: none;
  text-transform: none;
  word-spacing: normal;
}

/* Le preflight de Tailwind applique `img { max-width: 100% }` a tout le
 * document. Ce n'est pas de l'heritage — c'est une regle qui vise directement
 * les images — donc la barriere ci-dessus ne l'arretait pas.
 *
 * Consequence mesuree : une illustration declaree `width:110%` (898px) etait
 * plafonnee a 816px ; combinee a son `right:-40px`, elle laissait exactement
 * 40px de parchemin sur le bord oppose. Le theme, lui, ne fixe aucun
 * max-width : il compte sur les valeurs du markdown. */
.phb-tome img {
  max-width: none;
}

/* ------------------------------------------------------------- mode Page */

.phb-tome .tome-pages {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem 0 4rem;
}

.phb-tome .tome-pages > .page {
  flex-shrink: 0;
  box-shadow: 0 10px 40px rgb(0 0 0 / 60%), 0 0 0 1px rgb(0 0 0 / 30%);
}

/* ------------------------------------------------------------- illustrations
 *
 * Aucune regle de dimensionnement ici, volontairement.
 *
 * Le decalage des illustrations (une bande de parchemin apparaissant d'un cote)
 * venait entierement du plafonnement `max-width` de Tailwind, neutralise plus
 * haut. Les tailles du markdown font donc foi :
 *
 *   - `width:675px` sur les planches de la galerie finale : l'illustration
 *     occupe la largeur de la zone de texte, pas la page. C'est voulu.
 *   - `width:110%` sur les couvertures : debordement volontaire, desormais
 *     rendu tel quel.
 *
 * Toute regle ajoutee ici (largeur minimale, `object-fit`, page pleine)
 * ecraserait ces intentions de mise en page.
 */

/* ----------------------------------------------------------------- mode Flux
 *
 * Le mode Page reproduit la gazette imprimee : canevas fixe de 215.9 x 279.4mm,
 * deux colonnes, aucun reflow — illisible sur telephone sans reduction extreme.
 *
 * Le mode Flux part du MEME HTML et neutralise ces contraintes : une colonne,
 * largeur fluide, hauteur libre. C'est ce qu'un PDF ne peut pas offrir.
 *
 * Les surcharges sont volontairement peu nombreuses : on laisse le theme
 * habiller le contenu, on ne touche qu'a la geometrie.
 */

.phb-tome.mode-flux .tome-pages {
  gap: 1rem;
  padding: 0 0 1rem;
}

/* Chaque feuille retrouve son fond et une séparation sans marge latérale. */
.phb-tome.mode-flux .page {
  box-shadow: 0 2px 8px rgb(0 0 0 / 25%);
}

/* Deux familles de pages, traitees differemment.
 *
 * 1. Les pages de TEXTE se reformatent : une colonne, largeur fluide.
 * 2. Les pages a COMPOSITION FIGEE — marquees `.figee` par le build : leur
 *    titre est superpose a l'illustration en positionnement absolu. Les
 *    remettre en flux les desassemble : le titre se detache de son image et le
 *    sous-titre disparait. On les reduit donc a la largeur de l'ecran, sans
 *    toucher a leur mise en page.
 */
.phb-tome.mode-flux .page:not(.figee) {
  width: 100%;
  max-width: 46rem;
  height: auto;
  min-height: 0;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  overflow: visible;
  columns: 1;
  column-count: 1;
  box-shadow: none;

  /* `contain: strict` fige les dimensions declarees : sans neutralisation, la
     page garderait sa hauteur fixe et le contenu serait coupe. */
  contain: none;
  content-visibility: visible;
}

/* Compositions figees : on garde le canevas du theme et on le met a l'echelle.
 * `--tome-zoom` est fourni par le composant, qui connait la largeur disponible. */
.phb-tome.mode-flux .page.figee {
  zoom: var(--tome-zoom, 1);
  margin: 0 auto;
}

/* Sur les pages de texte, une illustration sortie du flux se superposerait au
 * texte reformate : on la remet dans le flux. Les pages figees sont epargnees —
 * leur positionnement absolu est justement ce qui fait leur composition. */
.phb-tome.mode-flux
  .page:not(.figee):not(:has(.darklysander))
  :is(img[style*="absolute"]:not([style*="height:100%"]), [class*="imageMask"]) {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  inset: auto !important;
}

/* Exception : les pages {{darklysander}} tirent leur lisibilite de leur fond
 * sombre — leur texte est volontairement clair. Remettre l'illustration dans le
 * flux laisserait ce texte clair sur le parchemin, donc illisible.
 *
 * On garde l'illustration en fond, etiree sur toute la hauteur de la page
 * reformatee (qui n'est plus fixe en mode Flux), et on remonte le texte
 * au-dessus. */
/* Le style {{darklysander}} fait volontairement deborder ses titres de 30px de
 * chaque cote (`width: calc(100% + 60px)`) : sur le canevas fixe, ils mordent
 * dans la marge de page. En Flux cette marge n'existe plus, et le titre sort de
 * l'ecran. On le ramene dans la largeur disponible. */
.phb-tome.mode-flux .page:has(.darklysander) h1 {
  width: auto;
  margin-left: 0;
  overflow-wrap: break-word;
}

.phb-tome.mode-flux .page:has(.darklysander) img[style*="absolute"] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;

  /* Pas de z-index ici : le theme pose deja `.page img { z-index: -1 }`, ce qui
     place l'illustration derriere le texte. En fixer un la ramenerait devant. */
}

.phb-tome.mode-flux .page:not(.figee) img {
  max-width: 100%;
  height: auto;
}

/* Les tailles du theme sont en centimetres, calibrees pour l'impression : a
 * l'ecran elles donnent un texte minuscule. On les repasse en unites relatives
 * — mais seulement sur les pages reformatees. Les compositions figees gardent
 * les leurs, sans quoi leurs titres deborderaient de l'illustration.
 */
.phb-tome.mode-flux .page:not(.figee) {
  font-size: 1.05rem;
  line-height: 1.6;
}

.phb-tome.mode-flux .page:not(.figee) h1 { font-size: 2.1rem; }
.phb-tome.mode-flux .page:not(.figee) h2 { font-size: 1.7rem; }
.phb-tome.mode-flux .page:not(.figee) h3 { font-size: 1.35rem; }
.phb-tome.mode-flux .page:not(.figee) h4 { font-size: 1.15rem; }
.phb-tome.mode-flux .page:not(.figee) p  { font-size: 1.05rem; }

/* Le Flux ne garde que le numéro et le liseré décoratif. Sur la couverture,
 * Homebrewery utilise aussi .footnote pour le titre : on le préserve. */
.phb-tome.mode-flux .page:not(:has(.frontCover)) .footnote {
  display: none;
}

.phb-tome.mode-flux .page .pageNumber {
  /* Le paragraphe qui contient le numéro peut être indenté. On ancre le
   * numéro à la feuille, comme le liseré, plutôt qu'à ce paragraphe. */
  position: absolute;
  inset: auto 0 30px;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  float: none;
  text-indent: 0;
  text-align: center;
  z-index: 150;
}

.phb-tome.mode-flux .page:not(.figee) .pageNumber {
  font-size: 0.75rem;
  line-height: 1.5;
}

/* Réserver une vraie marge avant le footer et sous le liseré. Le numéro et
 * l'ornement remontent ensemble pour conserver leur espacement. */
.phb-tome.mode-flux .page:not(.figee):not(.illustration) {
  /* Une feuille courte occupe un écran, hors repère de lecture (32 px).
   * svh évite de redimensionner les pages quand la barre du navigateur mobile
   * apparaît ou disparaît. height:auto laisse les textes longs s'étendre. */
  min-height: calc(100vh - 32px);
  min-height: calc(100svh - 32px);
  padding-top: 3rem;
  padding-bottom: 7.5rem;
}

.phb-tome.mode-flux .page:not(.figee):not(.illustration) .pageNumber {
  bottom: calc(30px + 1.5rem);
}

.phb-tome.mode-flux .page:not(.figee):not(.illustration)::after {
  bottom: 1.5rem;
}

@media (max-width: 640px) {
  .phb-tome.mode-flux .page:not(.figee) {
    padding-inline: 1rem;
    font-size: 1rem;
  }

  .phb-tome.mode-flux .page:not(.figee):not(.illustration) {
    padding-top: 2.5rem;
  }

  /* Sur mobile, l'espace entre paragraphes remplace l'alinéa imprimé.
   * Les compositions et illustrations pleine page gardent leur géométrie. */
  .phb-tome.mode-flux .page:not(.figee):not(.illustration) p {
    text-indent: 0;
  }

  .phb-tome.mode-flux .page:not(.figee):not(.illustration) p + p {
    margin-top: 0.8em;
  }
}

/* Une page reduite a une illustration touche les bords : le padding de page
 * l'encadrerait d'une bande de parchemin sans raison. La classe est posee au
 * build sur les pages sans aucun texte propre. */
.phb-tome.mode-flux .page.illustration {
  padding: 0;
}

/* Une illustration declaree `height:100%` dans le markdown est concue pour
 * couvrir la page entiere — c'est ce que rend le PDF. Le format de l'image
 * n'entre pas en compte : une image carree y est etiree pour remplir la feuille.
 *
 * En Flux la page n'a plus de hauteur fixe, et `height: auto` rendait a l'image
 * ses proportions, donc une page plus courte. On lui rend donc le format d'une
 * page et on laisse l'illustration la remplir, comme sur le canevas. */
.phb-tome.mode-flux .page.illustration:has(img[style*="height:100%"]) {
  aspect-ratio: 816 / 1056;
}

.phb-tome.mode-flux .page.illustration img[style*="height:100%"] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* Une image reste un element de ligne : elle repose sur la ligne de base, ce
 * qui laisse dessous la place des jambages. Sur une illustration pleine
 * largeur, cela se voit comme une fine bande de parchemin. Les marges des
 * blocs qui la portent produisent le meme effet. */
.phb-tome.mode-flux .page.illustration img {
  display: block;
}

.phb-tome.mode-flux .page.illustration :is(p, .columnWrapper) {
  margin: 0;
  padding: 0;
}

/* Chaque page se termine par une rupture de colonne artificielle encadree de
 * deux paragraphes vides — le procede de Homebrewery pour emuler
 * `column-fill: auto`. En mode Flux il n'y a plus de colonnes a equilibrer, et
 * ces trois blocs ne font qu'ajouter une bande vide en bas de page, tres
 * visible sous une illustration pleine largeur. */
.phb-tome.mode-flux .page p:has(+ .columnSplit),
.phb-tome.mode-flux .page .columnSplit,
.phb-tome.mode-flux .page .columnSplit + p {
  display: none;
}

/* Les couvertures etant reduites en bloc, leurs textes suivent. Mesure sur un
 * ecran de 390px (reduction a 48%) :
 *   titre principal ... 84.9px -> 40.6px   confortable
 *   sous-titres ....... 32.1px -> 15.4px   sous le seuil de lisibilite
 *
 * On agrandit donc les seconds, pas le premier : il occupe deja presque toute
 * la largeur et deborderait de son illustration.
 *
 * `zoom` et non `font-size` : le facteur s'applique a la taille rendue, quelle
 * qu'elle soit. Un `font-size: 1.3em` serait relatif au parent (12.85px) et
 * REDUIRAIT ces titres au lieu de les agrandir. */
.phb-tome.mode-flux
  .page:has(.frontCover, .insideCover, .backCover, .partCover)
  :is(h2, h3, h4) {
  zoom: 1.3;
}

/* La quatrieme de couverture porte le resume du tome en corps de texte : sur le
 * canevas il se lit a 20cm, reduit a 48% sur un telephone il devient illisible.
 * Il lui faut donc un facteur plus fort qu'aux titres. */
.phb-tome.mode-flux .page:has(.backCover) p {
  zoom: 1.6;
}

/* Ce grossissement a un prix. Le bloc de texte est precede d'un bandeau vide —
 * une douzaine de `div.blank` qui, sur le canevas, le descendent au milieu de la
 * bande sombre. Mesure : 13 blancs de 18px, soit 234px avant le titre, sur une
 * colonne haute de 895px.
 *
 * A 160% le resume ne tient alors plus dans la colonne : sur le Tome 4 (681
 * caracteres contre 429 pour le Tome 5), la fin passe dans la seconde colonne,
 * donc PAR-DESSUS l'illustration. Le Tome 5 y echappait de 61px.
 *
 * On resserre donc le bandeau : le bloc remonte de ~170px et le resume tient
 * d'une piece. Le titre reste dans la bande sombre, simplement plus haut.
 *
 * `:has(~ h1)` ne vise que les blancs situes AVANT le titre — la page n'a qu'un
 * h1. Ceux qui separent les paragraphes gardent leur hauteur : c'est le bandeau
 * qu'on supprime, pas la respiration du texte.
 *
 * Uniquement en Flux : sur le canevas, le bandeau place le bloc comme voulu. */
.phb-tome.mode-flux .page:has(.backCover) .blank:has(~ h1) {
  height: 4px;
}

/* ---------------------------------------------------------- Codex illustré */
.phb-tome .codexPlate,
.phb-tome .codexOpening {
  display: none;
}

.phb-tome .page.codex-planche,
.phb-tome .page.codex-ouverture {
  columns: 1;
}

.phb-tome .codex-figure {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 850px;
  margin: 0;
}

.phb-tome .codex-figure > a {
  display: flex;
  flex: 1;
  min-height: 0;
  justify-content: center;
  cursor: zoom-in;
}

.phb-tome .codex-figure > a:focus-visible {
  outline: 3px solid #38bdf8;
  outline-offset: 4px;
}

.phb-tome .page .codex-figure img {
  position: static;
  z-index: auto;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.phb-tome .codex-figure figcaption {
  flex-shrink: 0;
  text-align: center;
  font-family: MrEavesRemake, serif;
  font-size: 1.2rem;
  line-height: 1.3;
  color: #58180d;
}

.phb-tome .page.codex-ouverture {
  padding-top: 8cm;
  text-align: center;
}

/* La grille reste un seul DOM : mêmes planches, repères et liens dans les
 * deux modes. Les autres pages continuent d'occuper toute la largeur. */
.phb-tome.mode-flux .tome-pages:has(.codex-planche) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-items: start;
}

.phb-tome.mode-flux .tome-pages:has(.codex-planche) > .page {
  grid-column: 1 / -1;
}

.phb-tome.mode-flux .page.codex-planche:not(.figee),
.phb-tome.mode-flux .page.codex-ouverture:not(.figee) {
  min-height: 0;
  max-width: none;
  padding: 1.5rem 1rem 6rem;
}

.phb-tome.mode-flux .page.codex-ouverture:not(.figee) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100svh - 32px);
  padding: 4rem 1.5rem;
}

.phb-tome.mode-flux .page.codex-ouverture h1 {
  margin: 0;
  font-size: clamp(2.5rem, 6vw, 4rem);
  line-height: 1.15;
}

.phb-tome.mode-flux .codex-figure {
  height: auto;
}

.phb-tome.mode-flux .page.codex-planche .codex-figure img {
  height: auto;
}

@media (min-width: 768px) {
  .phb-tome.mode-flux .tome-pages:has(.codex-planche) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .phb-tome.mode-flux .tome-pages > .page.codex-planche {
    grid-column: auto;
  }
}

@media (min-width: 1200px) {
  .phb-tome.mode-flux .tome-pages:has(.codex-planche) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------- annotations
 *
 * Les annotations du lecteur HTML sont ancrees sur le texte, pas sur des
 * coordonnees : un `<mark>` est pose autour du passage cite
 * (cf. components/tomes/ancrage.ts). Le theme n'habille pas `mark`, mais le
 * navigateur si — jaune sur noir par defaut — d'ou ces regles.
 *
 * La couleur vient du joueur, passee en variable par le composant. Un fond
 * translucide seul ne suffit pas : le blanc du MJ disparaitrait sur le
 * parchemin. Le filet inferieur garantit que le passage se voit quelle que
 * soit la couleur.
 */
.phb-tome mark.tome-annot {
  background-color: var(--annot-fond, rgba(56, 189, 248, 0.32));
  border-bottom: 2px solid var(--annot-trait, rgba(56, 189, 248, 0.85));
  border-radius: 2px;
  color: inherit;
  cursor: pointer;
  padding: 0 1px;

  /* Un passage cite court sur plusieurs lignes : sans cela, le fond et le filet
   * ne seraient dessines qu'une fois, sur la boite entiere. */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.phb-tome mark.tome-annot:hover {
  filter: brightness(1.12);
}

/* Le passage vise depuis la liste, le temps de le retrouver des yeux.
 *
 * Une scintillance dans la couleur de l'annotation, et non plus un encadre
 * bleu : le cadre designait bien le passage, mais n'appartenait a personne. La
 * teinte du joueur dit du meme geste OU l'on arrive et QUI a annote.
 *
 * Deux mouvements superposes : une bande dense qui traverse le passage, et un
 * halo qui respire autour. Le halo compte autant que la bande — il tient la
 * seconde ou celle-ci est sortie du cadre, et sauve le blanc du MJ, dont la
 * bande seule se verrait a peine sur le parchemin.
 */
@keyframes tome-annot-scintille {
  /* Positions en pourcentage sur une image large de 200 % du bloc. La bande,
   * placee au milieu de l'image, se retrouve alors a `largeur x (1 - position)`
   * du bord gauche : elle est hors cadre a gauche au-dela de 100 %, hors cadre
   * a droite en dessous de 0 %.
   *
   * La course va donc de 140 % a -20 % : juste ce qu'il faut de marge de part
   * et d'autre. Mesure faite : avec une course de 200 % a -30 %, la bande
   * passait la moitie du cycle hors cadre et ne se voyait presque pas. */
  from {
    background-position: 140% 0;
  }
  to {
    background-position: -20% 0;
  }
}

@keyframes tome-annot-halo {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
  50% {
    box-shadow: 0 0 0.7em 0.12em var(--annot-halo, rgba(56, 189, 248, 0.55));
  }
}

.phb-tome mark.tome-annot.tome-annot-cible {
  /* L'image de fond se peint au-dessus de la couleur de fond : la teinte de
   * base du surlignage reste visible sous la bande, sans la redeclarer. */
  /* La bande porte la couleur de l'annotation, avec un coeur clair en son
   * milieu : passer de 0,32 a 0,8 d'opacite sur la meme teinte se mesurait mais
   * ne se voyait guere. Le coeur donne l'eclat, les flancs colores donnent
   * l'identite. */
  background-image: linear-gradient(
    105deg,
    transparent 38%,
    var(--annot-eclat, rgba(56, 189, 248, 0.8)) 46%,
    rgba(255, 255, 255, 0.55) 50%,
    var(--annot-eclat, rgba(56, 189, 248, 0.8)) 54%,
    transparent 62%
  );
  background-repeat: no-repeat;
  background-size: 200% 100%;
  animation:
    tome-annot-scintille 1s ease-in-out 2,
    tome-annot-halo 1s ease-in-out 2;
}

/* Quand le texte cite n'a pas ete retrouve, la cible est la page entiere : pas
 * de bande a faire courir sur une feuille, seulement le halo. */
.phb-tome .tome-annot-cible:not(mark) {
  animation: tome-annot-halo 1s ease-in-out 2;
}

/* Reglage systeme « moins d'animations » : on garde un repere, on retire le
 * mouvement. Le passage s'eclaire puis s'eteint, sans rien qui se deplace. */
@media (prefers-reduced-motion: reduce) {
  .phb-tome mark.tome-annot.tome-annot-cible,
  .phb-tome .tome-annot-cible:not(mark) {
    animation: none;
    background-image: none;
    box-shadow: 0 0 0.7em 0.12em var(--annot-halo, rgba(56, 189, 248, 0.55));
  }
}

/* La selection de texte est la porte d'entree de l'annotation : on l'autorise
 * explicitement plutot que de compter sur le defaut, qu'une regle du site ou du
 * theme pourrait retirer. */
.phb-tome .page {
  -webkit-user-select: text;
  user-select: text;
}