@charset "UTF-8";
/* ==================================================================
   Peggy & Freddy — feuille de style principale
   Direction artistique reprise du carton d'invitation : papier crème,
   encre chaude, filets fins, typographie de galerie.
   ================================================================== */

/* ------------------------------------------------------------------
   1. Jetons de design
   ------------------------------------------------------------------ */

:root {
  /* Papier et encre — couleurs relevées sur le flyer original */
  --papier:        #f9f6f0;
  --papier-clair:  #fdfbf7;
  --papier-fonce:  #f1ece2;
  --papier-ombre:  #e7e0d3;
  --encre:         #17140f;
  --encre-doux:    #4b443a;
  --encre-tenue:   #8b8175;
  --filet:         #dcd5c8;
  --or:            #a8823c;
  --nuit:          #0e0d0c;
  --nuit-texte:    #ece6dc;
  --nuit-tenue:    #8d857a;
  --alerte:        #a4442f;

  /* Familles */
  --f-titre: 'Playfair Display', 'Times New Roman', serif;
  --f-texte: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --f-ui:    'Jost', 'Helvetica Neue', Arial, sans-serif;

  /* Échelle typographique */
  --t-mega: clamp(3.4rem, 13vw, 11rem);
  --t-xxl:  clamp(2.4rem, 7.2vw, 5.4rem);
  --t-xl:   clamp(1.9rem, 4.4vw, 3.4rem);
  --t-l:    clamp(1.45rem, 2.6vw, 2.1rem);
  --t-m:    clamp(1.08rem, 0.62vw + 0.95rem, 1.32rem);
  --t-s:    0.95rem;
  --t-xs:   0.76rem;

  /* Rythme vertical */
  --e1: 0.5rem;
  --e2: 1rem;
  --e3: 1.75rem;
  --e4: 3rem;
  --e5: clamp(3.5rem, 7vw, 7rem);
  --e6: clamp(5rem, 12vw, 12rem);
  --e7: clamp(7rem, 18vw, 18rem);

  /* Gouttières */
  --marge:  clamp(1.25rem, 5vw, 5.5rem);
  --colonne: 64ch;

  /* Mouvement */
  --duree:  0.7s;
  --sortie: cubic-bezier(0.16, 1, 0.3, 1);
  --doux:   cubic-bezier(0.4, 0, 0.2, 1);

  --entete-h: 4.5rem;
}

/* ------------------------------------------------------------------
   2. Remise à zéro
   ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* Surtout PAS de scroll-behavior: smooth ici : ScrollTrigger mesure la
     page en la ramenant brièvement en haut, et un défilement animé fausse
     toutes ses mesures. Le défilement doux des ancres est géré en JS. */
  scroll-padding-top: calc(var(--entete-h) + 1rem);
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--f-texte);
  font-size: var(--t-m);
  line-height: 1.72;
  font-feature-settings: 'kern' 1, 'liga' 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.verrouille { overflow: hidden; }

/* Une déclaration `display` en CSS l'emporte sur l'attribut hidden :
   sans ce garde-fou, tout élément masqué en HTML resterait visible. */
[hidden] { display: none !important; }

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, video, svg { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }
:focus-visible {
  outline: 2px solid var(--or);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Grain de papier — une seule texture SVG, aucune requête réseau */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  opacity: 0.32;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.42'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------
   3. Éléments typographiques communs
   ------------------------------------------------------------------ */

.surtitre {
  font-family: var(--f-ui);
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--encre-tenue);
  line-height: 1.4;
}
.surtitre--or { color: var(--or); }

.filet {
  height: 1px;
  background: var(--filet);
  border: 0;
  width: 100%;
}
.filet--court { width: 3.5rem; margin-inline: auto; background: var(--encre); opacity: 0.5; }

.titre-section {
  font-family: var(--f-titre);
  font-weight: 400;
  font-size: var(--t-xl);
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.italique { font-style: italic; }

.section { position: relative; padding-inline: var(--marge); }
.centre  { max-width: 78rem; margin-inline: auto; }
.colonne { max-width: var(--colonne); margin-inline: auto; }

/* Révélations au défilement. L'état initial n'est posé que si le
   JavaScript a pris la main (classe .anim sur <body>) : sans lui,
   ou en mouvement réduit, tout s'affiche normalement. */
.anim .reveal      { opacity: 0; transform: translateY(1.6rem); }
.anim .reveal-doux { opacity: 0; }
.anim .reveal.vue, .anim .reveal-doux.vue {
  opacity: 1;
  transform: none;
  transition: opacity 0.95s var(--sortie), transform 0.95s var(--sortie);
}

/* ------------------------------------------------------------------
   4. Écran de chargement
   ------------------------------------------------------------------ */

#chargement {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--papier);
  display: grid;
  place-content: center;
  gap: var(--e3);
  justify-items: center;
  transition: opacity 0.8s var(--doux), visibility 0.8s;
}
#chargement.parti { opacity: 0; visibility: hidden; }
#chargement .marque {
  font-family: var(--f-titre);
  font-size: clamp(1.5rem, 4vw, 2.4rem);
  letter-spacing: 0.06em;
}
#chargement .barre {
  width: min(42vw, 18rem);
  height: 1px;
  background: var(--papier-ombre);
  position: relative;
  overflow: hidden;
}
#chargement .barre i {
  position: absolute;
  inset: 0 100% 0 0;
  background: var(--encre);
  transition: right 0.35s var(--doux);
}
#chargement .pourcentage {
  font-family: var(--f-ui);
  font-size: var(--t-xs);
  letter-spacing: 0.3em;
  color: var(--encre-tenue);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------
   5. Barre haute
   ------------------------------------------------------------------ */

.entete {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  height: var(--entete-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--marge);
  mix-blend-mode: normal;
  transition: background 0.4s var(--doux), border-color 0.4s;
  border-bottom: 1px solid transparent;
}
.entete.posee {
  background: color-mix(in srgb, var(--papier) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom-color: var(--filet);
}
.entete.sur-nuit { color: var(--nuit-texte); }
.entete.sur-nuit.posee {
  background: color-mix(in srgb, var(--nuit) 80%, transparent);
  border-bottom-color: rgba(255, 255, 255, 0.09);
}

.monogramme {
  font-family: var(--f-titre);
  font-size: 1.05rem;
  letter-spacing: 0.22em;
  white-space: nowrap;
}
.monogramme .et { font-style: italic; color: var(--or); padding-inline: 0.42em; }

.entete-outils { display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 1.75rem); }

.lien-nav {
  font-family: var(--f-ui);
  font-size: var(--t-xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.72;
  position: relative;
  padding-block: 0.4rem;
  transition: opacity 0.3s;
}
.lien-nav::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0.15rem;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--sortie);
}
.lien-nav:hover { opacity: 1; }
.lien-nav:hover::after { transform: scaleX(1); transform-origin: left; }
@media (max-width: 720px) { .lien-nav { display: none; } }

/* Bouton son — une pastille, sans mot */
.son {
  position: relative;
  display: grid;
  place-content: center;
  width: 44px;
  height: 44px;
  color: inherit;
}
.son-cercle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid currentColor;
  display: grid;
  place-items: center;
  opacity: 0.45;
  transition: opacity 0.35s var(--doux), border-color 0.35s, color 0.35s, transform 0.35s var(--sortie);
}
.son:hover .son-cercle { opacity: 1; transform: scale(1.06); }
.son.joue .son-cercle { opacity: 1; border-color: var(--or); color: var(--or); }

/* Les trois états se superposent dans le cercle :
   ▶ à l'arrêt · l'égaliseur pendant la lecture · ❚❚ au survol. */
.son-cercle > * {
  grid-area: 1 / 1;
  transition: opacity 0.25s var(--doux);
}
.son-icone { width: 13px; height: 13px; fill: currentColor; }
.son-icone--lecture { margin-left: 1.5px; }      /* recentrage optique du triangle */
.son-icone--pause, .son-barres { opacity: 0; }

.son.joue .son-icone--lecture { opacity: 0; }
.son.joue .son-barres { opacity: 1; }

@media (hover: hover) {
  .son.joue:hover .son-barres { opacity: 0; }
  .son.joue:hover .son-icone--pause { opacity: 1; }
}
@media (hover: none) {
  /* Sans survol possible, l'icône de pause remplace l'égaliseur. */
  .son.joue .son-barres { opacity: 0; }
  .son.joue .son-icone--pause { opacity: 1; }
}

/* Infobulle discrète, uniquement à la souris */
.son::after {
  content: attr(data-info);
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  white-space: nowrap;
  font-family: var(--f-ui);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--encre-tenue);
  opacity: 0;
  transform: translateY(-0.25rem);
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
}
.entete.sur-nuit .son::after { color: var(--nuit-tenue); }
@media (hover: hover) {
  .son:hover::after, .son:focus-visible::after { opacity: 1; transform: none; }
}

.son-barres {
  display: flex;
  align-items: flex-end;
  gap: 2.5px;
  height: 14px;
  width: 17px;
  flex: 0 0 auto;
}
.son-barres i {
  display: block;
  width: 2px;
  background: currentColor;
  transform-origin: bottom;
}
/* Au repos, l'icône dessine un petit égaliseur lisible. */
.son-barres i:nth-child(1) { height: 42%; }
.son-barres i:nth-child(2) { height: 88%; }
.son-barres i:nth-child(3) { height: 62%; }
.son-barres i:nth-child(4) { height: 100%; }
.son.joue .son-barres i { animation: pulse 1.05s ease-in-out infinite; }
.son.joue .son-barres i:nth-child(2) { animation-delay: 0.18s; }
.son.joue .son-barres i:nth-child(3) { animation-delay: 0.36s; }
.son.joue .son-barres i:nth-child(4) { animation-delay: 0.1s; }
@keyframes pulse { 0%, 100% { height: 22%; } 50% { height: 100%; } }

/* Barre de progression de lecture */
.progression {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  z-index: 41;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--or);
  opacity: 0.85;
}

/* ------------------------------------------------------------------
   6. Ouverture
   ------------------------------------------------------------------ */

.hero {
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding-block: calc(var(--entete-h) + var(--e4)) var(--e4);
  position: relative;
}
.hero-centre {
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  gap: var(--e3);
}
.hero-noms {
  font-family: var(--f-titre);
  font-weight: 400;
  font-size: var(--t-mega);
  line-height: 0.9;
  letter-spacing: -0.03em;
  display: grid;
  justify-items: center;
}
/* L'esperluette italique penche à droite : son centre géométrique n'est pas
   son centre optique. On la décale légèrement et on lui donne de l'air,
   sinon les jambages de « Peggy » viennent la toucher. */
.hero-noms .et {
  font-style: italic;
  font-size: 0.3em;
  color: var(--or);
  display: block;
  letter-spacing: 0;
  overflow: visible;
  padding-bottom: 0.12em;
  margin: 0.3em 0 0.2em;
  transform: translateX(-0.06em);
}
/* Le débord caché sert de masque à l'animation lettre par lettre ;
   le rembourrage laisse la place aux jambages (les « gg » de Peggy). */
.hero-noms > span {
  display: block;
  overflow: hidden;
  padding-bottom: 0.2em;
  margin-bottom: -0.11em;
}
.hero-noms .lettre { display: inline-block; will-change: transform; }
.acte-titre .ligne { display: block; }
.hero-accroche {
  font-size: var(--t-l);
  font-style: italic;
  color: var(--encre-doux);
  max-width: 26ch;
  line-height: 1.35;
}
.hero-date {
  font-family: var(--f-ui);
  font-size: var(--t-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--encre-tenue);
}

.defilement {
  display: grid;
  justify-items: center;
  gap: var(--e2);
  font-family: var(--f-ui);
  font-size: var(--t-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--encre-tenue);
}
.defilement .trait {
  width: 1px;
  height: 3.5rem;
  background: linear-gradient(var(--filet), var(--encre));
  transform-origin: top;
  animation: descend 2.4s var(--doux) infinite;
}
@keyframes descend {
  0%   { transform: scaleY(0); opacity: 0; }
  35%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(3.5rem); opacity: 0; }
}

/* ------------------------------------------------------------------
   7. Prologue
   ------------------------------------------------------------------ */

.prologue { padding-block: var(--e7); }
.prologue-texte {
  font-family: var(--f-titre);
  font-size: clamp(1.35rem, 2.6vw, 2.15rem);
  line-height: 1.45;
  letter-spacing: -0.01em;
  max-width: 30ch;
}
.prologue-texte em { font-style: italic; color: var(--or); }
.prologue-grille {
  display: grid;
  gap: var(--e5);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) {
  .prologue-grille { grid-template-columns: 1.15fr 1fr; gap: var(--e6); }
}
.prologue-notes { display: grid; gap: var(--e3); max-width: 44ch; }
.prologue-notes p { color: var(--encre-doux); }

/* ------------------------------------------------------------------
   8. Actes — ouverture de chapitre
   ------------------------------------------------------------------ */

.acte { position: relative; }
.acte-ouverture {
  min-height: 82svh;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  gap: var(--e3);
  padding-block: var(--e6);
  border-top: 1px solid var(--filet);
}
.acte-numero {
  font-family: var(--f-ui);
  font-size: var(--t-xs);
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--or);
  padding-left: 0.5em;
}
.acte-titre {
  font-family: var(--f-titre);
  font-weight: 400;
  font-size: var(--t-xxl);
  line-height: 1.02;
  letter-spacing: -0.025em;
  max-width: 16ch;
}
.acte-sous-titre {
  font-style: italic;
  font-size: var(--t-l);
  color: var(--encre-doux);
  max-width: 44ch;
  line-height: 1.4;
}

/* ------------------------------------------------------------------
   9. Corps du récit
   ------------------------------------------------------------------ */

.recit {
  --gouttiere: 0rem;
  position: relative;
  padding-bottom: var(--e6);
}
.scene { position: relative; padding-block: var(--e4); }

.scene-entete {
  max-width: var(--colonne);
  margin: var(--e6) auto var(--e5);
  text-align: center;
  display: grid;
  gap: var(--e2);
  justify-items: center;
}
.scene-date {
  font-family: var(--f-ui);
  font-size: var(--t-xs);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--or);
}
.scene-titre {
  font-family: var(--f-titre);
  font-size: var(--t-l);
  font-weight: 400;
  line-height: 1.2;
  max-width: 22ch;
}
.scene-entete .filet--court { margin-top: var(--e1); }

/* Blocs de texte */
.bloc {
  max-width: var(--colonne);
  margin-inline: auto;
  margin-block: 1.05em;
  position: relative;
}
.bloc.souffle {
  font-size: 1.08em;
  color: var(--encre-doux);
  margin-block: 1.25em;
  line-height: 1.5;
}
.bloc.ellipse {
  text-align: center;
  color: var(--encre-tenue);
  letter-spacing: 0.5em;
  margin-block: var(--e4);
  font-size: 1.3em;
}
.bloc.dialogue {
  font-family: var(--f-titre);
  font-style: italic;
  font-size: clamp(1.25rem, 2.1vw, 1.72rem);
  line-height: 1.42;
  color: var(--encre);
  padding-left: clamp(1rem, 3vw, 2.2rem);
  border-left: 1px solid var(--or);
  margin-block: var(--e4);
  max-width: 46ch;
}
.bloc.saillant {
  font-family: var(--f-titre);
  font-style: italic;
  font-size: clamp(1.3rem, 2.3vw, 1.85rem);
  line-height: 1.35;
  color: var(--or);
  text-align: center;
  margin-block: var(--e5);
  max-width: 34ch;
}
.bloc.presage {
  font-family: var(--f-titre);
  font-style: italic;
  font-size: clamp(1.3rem, 2.4vw, 1.95rem);
  line-height: 1.4;
  text-align: center;
  max-width: 30ch;
  margin-block: var(--e5);
  padding-block: var(--e3);
  border-block: 1px solid var(--filet);
  color: var(--encre);
  border-left: 0;
  padding-left: 0;
  text-shadow: 0 0 26px color-mix(in srgb, var(--or) 22%, transparent);
}

/* La réplique de la bijouterie, encadrée comme un appel entrant */
.bloc.appel {
  font-family: var(--f-ui);
  font-style: normal;
  font-weight: 300;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.55;
  max-width: 30rem;
  margin-inline: auto;
  margin-block: var(--e5);
  padding: var(--e3) clamp(1.25rem, 3vw, 2rem) var(--e3);
  border: 1px solid var(--filet);
  border-radius: 1.4rem;
  background: var(--papier-clair);
  box-shadow: 0 22px 50px -34px rgba(23, 20, 15, 0.5);
  text-align: center;
  color: var(--encre-doux);
}
.bloc.appel::before {
  content: 'Appel entrant';
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: var(--e2);
}
.bloc.appel::after {
  content: '';
  display: block;
  width: 2.5rem;
  height: 3px;
  border-radius: 3px;
  background: var(--filet);
  margin: var(--e3) auto 0;
}

/* Verdicts d'enquête, tamponnés */
.bloc.verdict {
  text-align: center;
  margin-block: 0.5em var(--e3);
}
.bloc.verdict > span {
  display: inline-block;
  font-family: var(--f-ui);
  font-size: 0.68rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--alerte);
  border: 1px solid color-mix(in srgb, var(--alerte) 40%, transparent);
  padding: 0.45em 1.1em 0.4em;
  border-radius: 2px;
  transform: rotate(-1.4deg);
}

/* ------------------------------------------------------------------
   11. Décors de récit
   ------------------------------------------------------------------ */

.decor { margin-block: var(--e6); }

/* La date de rencontre */
.decor-date {
  text-align: center;
  display: grid;
  gap: var(--e2);
  justify-items: center;
}
.decor-date .jour {
  font-family: var(--f-titre);
  font-size: clamp(3rem, 11vw, 8rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
}
.decor-date .jour em { font-style: italic; color: var(--or); }

/* Le coffret */
.decor-coffret {
  display: grid;
  justify-items: center;
  gap: var(--e3);
  text-align: center;
}
.decor-coffret svg { width: clamp(7rem, 16vw, 10rem); height: auto; }
/* Sur une page entière du livre, le coffret a droit à sa vraie taille. */
.page--pleine .decor-coffret svg { width: clamp(9rem, 30vw, 15rem); }
.decor-coffret .legende {
  font-family: var(--f-ui);
  font-size: var(--t-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--encre-tenue);
  max-width: 26ch;
  line-height: 1.7;
}

/* Le registre des trois flops */
.decor-flops { max-width: 74rem; margin-inline: auto; }
.flops-titre {
  text-align: center;
  margin-bottom: var(--e4);
  display: grid;
  gap: var(--e1);
  justify-items: center;
}
.flops-grille {
  display: grid;
  gap: 1px;
  background: var(--filet);
  border: 1px solid var(--filet);
}
@media (min-width: 800px) { .flops-grille { grid-template-columns: repeat(3, 1fr); } }
.flop {
  background: var(--papier-clair);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  display: grid;
  gap: 0.65rem;
  align-content: start;
  position: relative;
  overflow: hidden;
}
.flop .num {
  font-family: var(--f-titre);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--papier-ombre);
  position: absolute;
  top: 0.6rem; right: 1rem;
}
.flop .date {
  font-family: var(--f-ui);
  font-size: var(--t-xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--or);
}
.flop .occasion {
  font-family: var(--f-titre);
  font-size: 1.3rem;
  line-height: 1.2;
}
.flop .lieu { font-size: 0.92rem; color: var(--encre-tenue); font-style: italic; }
.flop .indice { font-size: 0.98rem; color: var(--encre-doux); line-height: 1.55; }
.flop .tampon {
  margin-top: 0.5rem;
  justify-self: start;
  font-family: var(--f-ui);
  font-size: 0.64rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--alerte);
  border: 1px solid color-mix(in srgb, var(--alerte) 38%, transparent);
  padding: 0.4em 0.9em 0.35em;
  transform: rotate(-1.2deg);
}

/* ------------------------------------------------------------------
   12. Le carton d'invitation
   ------------------------------------------------------------------ */

.invitation {
  background: var(--papier-fonce);
  padding-block: var(--e7);
  border-block: 1px solid var(--filet);
}
.invitation-grille {
  display: grid;
  gap: var(--e5);
  align-items: center;
}
@media (min-width: 950px) {
  .invitation-grille { grid-template-columns: 0.92fr 1fr; gap: var(--e6); }
}
.carton {
  perspective: 1400px;
  justify-self: center;
  width: min(28rem, 82vw);
}
.carton-inner {
  transform-style: preserve-3d;
  transition: transform 0.5s var(--doux);
  will-change: transform;
}
.carton img {
  width: 100%;
  background-size: cover;
  box-shadow:
    0 2px 4px rgba(23, 20, 15, 0.06),
    0 40px 80px -40px rgba(23, 20, 15, 0.55);
}
.invitation-texte { display: grid; gap: var(--e3); max-width: 46ch; }
.invitation-titre {
  font-family: var(--f-titre);
  font-size: var(--t-xl);
  font-style: italic;
  line-height: 1.15;
}
.invitation-faits {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--filet);
  margin-top: var(--e2);
}
.fait {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: var(--e2);
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--filet);
  align-items: baseline;
}
@media (max-width: 520px) { .fait { grid-template-columns: 1fr; gap: 0.15rem; } }
.fait dt {
  font-family: var(--f-ui);
  font-size: var(--t-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--encre-tenue);
}
.fait dd { margin: 0; }
.chute {
  font-family: var(--f-titre);
  font-style: italic;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  line-height: 1.35;
  color: var(--or);
  padding-top: var(--e2);
}

/* ------------------------------------------------------------------
   13. Salle 1 — l'accrochage
   ------------------------------------------------------------------ */

.salle-entete {
  display: grid;
  gap: var(--e2);
  justify-items: center;
  text-align: center;
  padding-block: var(--e6) var(--e5);
}
.salle-entete .titre-section { max-width: 20ch; }
.salle-entete p { max-width: 48ch; color: var(--encre-doux); }

.accrochage { position: relative; }
/* Le cadre borne le défilement horizontal : rien ne déborde de la page. */
.piste-cadre { overflow: hidden; }
.piste {
  display: flex;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
  padding-inline: var(--marge);
  will-change: transform;
}

.oeuvre {
  flex: 0 0 auto;
  display: grid;
  gap: 1.1rem;
  width: min(72vw, 42rem);
}
.oeuvre--portrait { width: min(56vw, 27rem); }

.cadre {
  background: var(--papier-clair);
  padding: clamp(0.75rem, 1.8vw, 1.5rem);
  border: 1px solid var(--papier-ombre);
  box-shadow:
    0 1px 2px rgba(23, 20, 15, 0.07),
    0 42px 70px -46px rgba(23, 20, 15, 0.55);
  position: relative;
}
.cadre::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(23, 20, 15, 0.1);
  pointer-events: none;
}
.cadre img {
  width: 100%;
  background-size: cover;
  background-position: center;
  filter: saturate(0.94) contrast(1.02);
}

.cartel {
  display: grid;
  gap: 0.22rem;
  font-family: var(--f-ui);
  font-size: 0.74rem;
  letter-spacing: 0.13em;
  color: var(--encre-tenue);
  line-height: 1.6;
  padding-left: 0.1rem;
}
.cartel .cartel-titre {
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--encre);
}
.cartel .cartel-num { color: var(--or); }

.piste-indice {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-inline: var(--marge);
  margin-top: var(--e4);
  font-family: var(--f-ui);
  font-size: var(--t-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--encre-tenue);
}
.piste-jauge { flex: 1; height: 1px; background: var(--filet); position: relative; max-width: 20rem; }
.piste-jauge i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: var(--encre);
  transition: width 0.15s linear;
}

/* Version verticale sur petits écrans */
@media (max-width: 900px) {
  /* La marge est conservée : les cadres doivent respirer, pas toucher le bord. */
  .piste { flex-direction: column; gap: var(--e5); }
  .oeuvre, .oeuvre--portrait { width: 100%; }
  .piste-indice { display: none; }
}

/* ------------------------------------------------------------------
   14. Salle 2 — la projection
   ------------------------------------------------------------------ */

.projection {
  background: var(--nuit);
  color: var(--nuit-texte);
  padding-block: var(--e7);
  position: relative;
}
.projection .surtitre { color: var(--nuit-tenue); }
.projection .salle-entete p { color: var(--nuit-tenue); }
.projection .filet--court { background: var(--nuit-texte); }
.ecran {
  max-width: 62rem;
  margin-inline: auto;
  position: relative;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 140px -30px rgba(255, 240, 210, 0.16);
}
.ecran video { width: 100%; display: block; }
.ecran .plaque {
  aspect-ratio: 16 / 9;
  display: grid;
  place-content: center;
  gap: var(--e2);
  text-align: center;
  padding: var(--e4);
  color: var(--nuit-tenue);
}
.ecran .plaque .titre-section { color: var(--nuit-texte); font-size: var(--t-l); }
.projection .cartel { color: var(--nuit-tenue); margin-top: 1.1rem; max-width: 62rem; margin-inline: auto; }
.projection .cartel .cartel-titre { color: var(--nuit-texte); }

/* ------------------------------------------------------------------
   15. Salle 3 — la chanson
   ------------------------------------------------------------------ */

.chanson { padding-block: var(--e7); border-top: 1px solid var(--filet); }
.platine {
  max-width: 46rem;
  margin-inline: auto;
  display: grid;
  gap: var(--e3);
  background: var(--papier-clair);
  border: 1px solid var(--filet);
  padding: clamp(1.5rem, 4vw, 3rem);
}
.platine-haut {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
}
.lecture {
  flex: 0 0 auto;
  width: clamp(3.4rem, 8vw, 4.4rem);
  aspect-ratio: 1;
  border: 1px solid var(--encre);
  border-radius: 50%;
  display: grid;
  place-content: center;
  transition: background 0.4s var(--doux), color 0.4s;
}
.lecture:hover { background: var(--encre); color: var(--papier); }
.lecture svg { width: 1.05rem; height: 1.05rem; fill: currentColor; }
.lecture .icone-pause { display: none; }
.lecture.joue .icone-play { display: none; }
.lecture.joue .icone-pause { display: block; }

.platine-infos { display: grid; gap: 0.2rem; min-width: 0; }
.platine-titre { font-family: var(--f-titre); font-size: var(--t-l); line-height: 1.15; }
.platine-auteur {
  font-family: var(--f-ui);
  font-size: var(--t-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--encre-tenue);
}
.platine-temps {
  margin-left: auto;
  font-family: var(--f-ui);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  color: var(--encre-tenue);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (max-width: 560px) { .platine-temps { display: none; } }

.onde {
  display: flex;
  align-items: center;
  gap: 2px;
  height: clamp(3.5rem, 9vw, 5.5rem);
  cursor: pointer;
  touch-action: none;
}
.onde i {
  flex: 1;
  min-width: 1px;
  background: color-mix(in srgb, var(--encre-tenue) 42%, transparent);
  border-radius: 1px;
  transition: background 0.18s linear;
}
.onde i.lue { background: var(--encre); }

/* ------------------------------------------------------------------
   16. L'œuvre finale
   ------------------------------------------------------------------ */

.finale {
  padding-block: var(--e7);
  border-top: 1px solid var(--filet);
  text-align: center;
}
.finale-cadre {
  width: min(34rem, 84vw);
  margin-inline: auto;
  background: var(--papier-clair);
  padding: clamp(1rem, 2.5vw, 2rem);
  border: 1px solid var(--papier-ombre);
  box-shadow:
    0 2px 4px rgba(23, 20, 15, 0.07),
    0 60px 90px -55px rgba(23, 20, 15, 0.7);
  position: relative;
}
.finale-cadre img { width: 100%; background-size: cover; }
.finale .cartel { justify-items: center; text-align: center; margin-top: var(--e3); }
.finale-reponse {
  font-family: var(--f-titre);
  font-size: clamp(2.6rem, 9vw, 7rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin-top: var(--e7);
}
.finale-reponse em { font-style: italic; color: var(--or); }
.finale-note {
  font-family: var(--f-ui);
  font-size: var(--t-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--encre-tenue);
  margin-top: var(--e3);
}

/* ------------------------------------------------------------------
   16 bis. La coda — la bague
   ------------------------------------------------------------------ */

.coda {
  padding-block: var(--e6) var(--e7);
  text-align: center;
}
.coda-centre {
  display: grid;
  justify-items: center;
  gap: var(--e3);
}
.coda-bague {
  display: grid;
  justify-items: center;
  gap: var(--e2);
  margin-top: var(--e2);
}
/* Le visuel est détouré sur le crème du papier : ni cadre, ni ombre portée,
   juste un très léger halo pour l'asseoir sur la page. */
.coda-bague img {
  width: min(20rem, 62vw);
  height: auto;
  filter: drop-shadow(0 22px 26px rgba(23, 20, 15, 0.09));
}
.coda .cartel { justify-items: center; text-align: center; }
.coda-chute {
  font-family: var(--f-titre);
  font-style: italic;
  font-size: clamp(1.5rem, 4vw, 2.6rem);
  line-height: 1.25;
  color: var(--encre);
  margin-top: var(--e3);
  max-width: 20ch;
}

/* ------------------------------------------------------------------
   17. Le grand jour + formulaire
   ------------------------------------------------------------------ */

.grand-jour {
  background: var(--papier-fonce);
  border-top: 1px solid var(--filet);
  padding-block: var(--e7);
}
.jour-entete {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--e2);
  margin-bottom: var(--e5);
}
.jour-date {
  font-family: var(--f-titre);
  font-size: var(--t-xxl);
  line-height: 1.02;
  letter-spacing: -0.025em;
  max-width: 18ch;
}
.a-completer {
  font-style: italic;
  color: var(--encre-tenue);
  font-size: 0.72em;
  letter-spacing: 0;
}

.programme {
  display: grid;
  gap: 1px;
  background: var(--filet);
  border: 1px solid var(--filet);
  max-width: 62rem;
  margin: 0 auto var(--e6);
}
@media (min-width: 760px) { .programme { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } }
.moment {
  background: var(--papier);
  padding: clamp(1.5rem, 3vw, 2.4rem);
  display: grid;
  gap: 0.5rem;
  text-align: center;
  justify-items: center;
}
.moment .heure {
  font-family: var(--f-titre);
  font-size: 2rem;
  line-height: 1;
}
.moment .quoi {
  font-family: var(--f-ui);
  font-size: var(--t-xs);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--or);
}
.moment .ou { font-size: 0.95rem; color: var(--encre-doux); line-height: 1.5; }

/* Formulaire */
.rsvp { max-width: 46rem; margin-inline: auto; }
.rsvp-entete { text-align: center; display: grid; gap: var(--e2); justify-items: center; margin-bottom: var(--e5); }
.rsvp-entete p { color: var(--encre-doux); max-width: 46ch; }

.formulaire { display: grid; gap: var(--e4); }
.champ { display: grid; gap: 0.4rem; position: relative; }
.champ > label, .legende {
  font-family: var(--f-ui);
  font-size: var(--t-xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--encre-tenue);
  transition: color 0.3s;
}
.champ:focus-within > label { color: var(--or); }
.obligatoire { color: var(--or); }

.saisie {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--filet);
  background: transparent;
  padding: 0.65rem 0 0.55rem;
  font-family: var(--f-texte);
  font-size: 1.15rem;
  line-height: 1.5;
  transition: border-color 0.35s var(--doux);
  border-radius: 0;
}
.saisie::placeholder { color: color-mix(in srgb, var(--encre-tenue) 65%, transparent); }
.saisie:focus { outline: none; border-bottom-color: var(--encre); }
textarea.saisie { resize: vertical; min-height: 6.5rem; }
.champ .compteur-car {
  position: absolute;
  right: 0; bottom: -1.35rem;
  font-family: var(--f-ui);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--encre-tenue);
}

.erreur-champ {
  font-family: var(--f-ui);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--alerte);
  min-height: 1em;
  opacity: 0;
  transform: translateY(-0.25rem);
  transition: opacity 0.25s, transform 0.25s;
}
.champ.invalide .saisie { border-bottom-color: var(--alerte); }
.champ.invalide .erreur-champ { opacity: 1; transform: none; }

/* Bascule Oui / Non */
.bascule {
  display: inline-grid;
  grid-auto-flow: column;
  position: relative;
  border: 1px solid var(--filet);
  background: var(--papier-clair);
  isolation: isolate;
}
.bascule input { position: absolute; opacity: 0; pointer-events: none; }
.bascule label {
  padding: 0.7rem clamp(1.2rem, 3vw, 2.1rem);
  font-family: var(--f-ui);
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--encre-tenue);
  cursor: pointer;
  transition: color 0.35s var(--doux);
  user-select: none;
  text-align: center;
  min-width: 6.5rem;
}
.bascule input:checked + label { color: var(--papier); }
.bascule .curseur {
  position: absolute;
  z-index: -1;
  top: 0; bottom: 0;
  left: 0;
  width: 50%;
  background: var(--encre);
  transition: transform 0.42s var(--sortie);
}
.bascule.sur-non .curseur { transform: translateX(100%); }
.bascule.vierge .curseur { opacity: 0; }

.ligne-presence {
  display: grid;
  gap: var(--e3);
}
@media (min-width: 640px) {
  .ligne-presence { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e4); }
}

/* Compteurs */
.compteurs { display: grid; gap: var(--e3); }
@media (min-width: 640px) { .compteurs { grid-template-columns: repeat(2, 1fr); gap: var(--e4); } }
.compteur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2);
  border-bottom: 1px solid var(--filet);
  padding-bottom: 0.5rem;
}
.compteur-boutons { display: flex; align-items: center; gap: 0.9rem; }
.compteur-btn {
  width: 2.4rem; height: 2.4rem;
  border: 1px solid var(--filet);
  border-radius: 50%;
  display: grid;
  place-content: center;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--encre-doux);
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.compteur-btn:hover:not(:disabled) { background: var(--encre); color: var(--papier); border-color: var(--encre); }
.compteur-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.compteur-valeur {
  font-family: var(--f-titre);
  font-size: 1.8rem;
  line-height: 1;
  min-width: 1.6ch;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Absence */
.absence {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: var(--e3);
  border: 1px solid var(--filet);
  background: var(--papier-clair);
  cursor: pointer;
  transition: border-color 0.3s, background 0.3s;
}
.absence:hover { border-color: var(--encre-tenue); }
.absence input { position: absolute; opacity: 0; pointer-events: none; }
.case {
  flex: 0 0 auto;
  width: 1.15rem; height: 1.15rem;
  border: 1px solid var(--encre-tenue);
  margin-top: 0.28rem;
  display: grid;
  place-content: center;
  transition: background 0.3s, border-color 0.3s;
}
.case svg { width: 0.7rem; height: 0.7rem; stroke: var(--papier); stroke-width: 2.4; fill: none; opacity: 0; transition: opacity 0.2s; }
.absence input:checked ~ .case { background: var(--encre); border-color: var(--encre); }
.absence input:checked ~ .case svg { opacity: 1; }
.absence .texte-absence { font-size: 1.02rem; line-height: 1.5; }

/* Le repli du bloc « présence » : grid-template-rows 1fr → 0fr,
   la seule façon d'animer une hauteur automatique sans JavaScript. */
.details-presence {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.55s var(--doux), opacity 0.4s var(--doux);
}
.details-inner {
  min-height: 0;
  overflow: hidden;
  display: grid;
  gap: var(--e4);
}
.formulaire.absent .details-presence {
  grid-template-rows: 0fr;
  opacity: 0;
  pointer-events: none;
}

.envoyer {
  justify-self: center;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--encre);
  padding: 1.05rem clamp(2rem, 6vw, 4rem);
  font-family: var(--f-ui);
  font-size: 0.78rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--encre);
  background: transparent;
  transition: color 0.4s var(--doux);
  min-width: 15rem;
}
.envoyer span { position: relative; z-index: 1; }
.envoyer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--encre);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.45s var(--sortie);
}
.envoyer:hover:not(:disabled) { color: var(--papier); }
.envoyer:hover:not(:disabled)::before { transform: scaleY(1); }
.envoyer:disabled { opacity: 0.45; cursor: wait; }

.pot-de-miel {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.message-formulaire {
  text-align: center;
  font-family: var(--f-ui);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: var(--alerte);
  min-height: 1.4em;
}

/* Confirmation */
.merci {
  text-align: center;
  display: grid;
  gap: var(--e3);
  justify-items: center;
  padding: var(--e5) var(--e3);
  border: 1px solid var(--filet);
  background: var(--papier-clair);
}
.merci .titre-section { font-style: italic; }
.merci-recap {
  display: grid;
  gap: 0.5rem;
  font-family: var(--f-ui);
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--encre-tenue);
  line-height: 1.8;
}
.lien-discret {
  font-family: var(--f-ui);
  font-size: var(--t-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--encre-tenue);
  border-bottom: 1px solid var(--filet);
  padding-bottom: 0.2rem;
  transition: color 0.3s, border-color 0.3s;
}
.lien-discret:hover { color: var(--encre); border-color: var(--encre); }

.rsvp-ferme {
  text-align: center;
  padding: var(--e5);
  border: 1px solid var(--filet);
  display: grid;
  gap: var(--e2);
  justify-items: center;
}

/* ------------------------------------------------------------------
   18. Pied de page
   ------------------------------------------------------------------ */

.pied {
  padding: var(--e6) var(--marge) var(--e4);
  text-align: center;
  display: grid;
  gap: var(--e3);
  justify-items: center;
  border-top: 1px solid var(--filet);
}
.pied .signature {
  font-family: var(--f-titre);
  font-style: italic;
  font-size: var(--t-l);
  color: var(--encre-doux);
  max-width: 34ch;
  line-height: 1.4;
}
/* L'anagramme — « Grégory Puydefes-Zaphaud » redevient deux vrais noms */
.anagramme-bloc {
  display: grid;
  gap: var(--e2);
  justify-items: center;
  margin-block: var(--e2) var(--e3);
}
.anagramme-bloc .surtitre { transition: opacity 0.4s; }

.anagramme {
  font-family: var(--f-titre);
  font-weight: 400;
  line-height: 1.24;
  color: inherit;
  cursor: pointer;
  padding: 0.35em 0.2em 0.5em;
  position: relative;
  text-align: center;
  transition: color 0.5s var(--doux);
}
/* En pied de page : c'est le nom qui porte le bloc. */
.anagramme--titre {
  font-size: clamp(1.05rem, 5.4vw, 2.6rem);
  color: var(--encre);
}
/* Au fil du texte : même jeu, à la taille de la ligne. */
.anagramme--ligne {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  text-align: left;
  padding: 0.05em 0 0.25em;
}
.anagramme--ligne::after { left: 0; right: 0; bottom: 0.05em; }
.anagramme--ligne:hover::after { left: 0; right: 0; }
.anagramme--ligne .anagramme-ligne { white-space: normal; }
.anagramme::after {
  content: '';
  position: absolute;
  left: 15%; right: 15%; bottom: 0.2em;
  height: 1px;
  background: var(--filet);
  transition: background 0.4s, left 0.5s var(--sortie), right 0.5s var(--sortie);
}
.anagramme:hover::after { background: var(--or); left: 4%; right: 4%; }
.anagramme.devoile { color: var(--or); }
.anagramme.devoile::after { background: color-mix(in srgb, var(--or) 45%, transparent); }

.anagramme-scene {
  display: block;
  transition: letter-spacing 0.5s var(--doux);
}
.anagramme:hover .anagramme-scene { letter-spacing: 0.055em; }

.anagramme-ligne { display: block; white-space: nowrap; }

.anagramme-lettre {
  display: inline-block;
  will-change: transform;
}
.anagramme-lettre.est-espace { width: 0.34em; }


.pied .colophon {
  font-family: var(--f-ui);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--encre-tenue);
  line-height: 2;
}

/* ------------------------------------------------------------------
   19. Chargement des images
   ------------------------------------------------------------------ */

img.media {
  opacity: 0;
  transition: opacity 0.9s var(--doux);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
img.media.chargee, .no-js img.media { opacity: 1; }

/* ------------------------------------------------------------------
   20. Accessibilité et impression
   ------------------------------------------------------------------ */

.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--encre);
  color: var(--papier);
  padding: 0.85rem 1.4rem;
  font-family: var(--f-ui);
  font-size: var(--t-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.saut-contenu:focus { left: 1rem; top: 1rem; }

.lecteur-seul {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .anim .reveal, .anim .reveal-doux { opacity: 1 !important; transform: none !important; }
  .defilement .trait { animation: none; }
}

@media print {
  body::before, .entete, .progression, #chargement, .defilement, .piste-indice { display: none !important; }
  .projection { background: #fff; color: #000; }
  .bloc, .planche, .interlude { break-inside: avoid; }
}

/* ==================================================================
   21. Transitions de vue entre l'accueil et un chapitre
   API native : le navigateur fait le fondu lui-même, sans JavaScript.
   ================================================================== */

@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vt-sortie 0.32s var(--doux) both; }
  ::view-transition-new(root) { animation: vt-entree 0.42s var(--sortie) both; }
}
@keyframes vt-sortie { to { opacity: 0; transform: translateY(-0.6rem); } }
@keyframes vt-entree { from { opacity: 0; transform: translateY(0.9rem); } }

/* ==================================================================
   22. Le sommaire
   ================================================================== */

.bouton-sommaire {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 44px;
  padding-inline: 0.2rem;
  font-family: var(--f-ui);
  font-size: var(--t-xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.78;
  transition: opacity 0.3s;
}
.bouton-sommaire:hover { opacity: 1; }
@media (max-width: 480px) { .sommaire-mot { display: none; } }

.sommaire-mark { display: grid; gap: 4px; width: 20px; }
.sommaire-mark i {
  display: block;
  height: 1px;
  background: currentColor;
  transition: transform 0.45s var(--sortie);
}
.sommaire-mark i:first-child { width: 100%; }
.sommaire-mark i:last-child  { width: 62%; margin-left: auto; }
.bouton-sommaire:hover .sommaire-mark i:last-child { transform: translateX(-38%); }

/* Le panneau, dans le calque supérieur natif du navigateur */
.sommaire {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--papier);
  color: var(--encre);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sommaire::backdrop { background: color-mix(in srgb, var(--encre) 55%, transparent); }

@media (prefers-reduced-motion: no-preference) {
  .sommaire {
    opacity: 0;
    transform: translateY(-1.2rem);
    transition: opacity 0.4s var(--doux), transform 0.5s var(--sortie),
                overlay 0.5s allow-discrete, display 0.5s allow-discrete;
  }
  .sommaire:popover-open { opacity: 1; transform: none; }
  @starting-style { .sommaire:popover-open { opacity: 0; transform: translateY(-1.2rem); } }
}

.sommaire-barre {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--entete-h);
  padding-inline: var(--marge);
  background: var(--papier);
  border-bottom: 1px solid var(--filet);
}
.sommaire-fermer {
  width: 44px; height: 44px;
  display: grid; place-content: center;
  color: var(--encre-tenue);
  transition: color 0.3s, transform 0.4s var(--sortie);
}
.sommaire-fermer:hover { color: var(--encre); transform: rotate(90deg); }
.sommaire-fermer svg { width: 20px; height: 20px; }

.sommaire-corps {
  display: grid;
  gap: var(--e5);
  padding: var(--e5) var(--marge) var(--e6);
  max-width: 80rem;
  margin-inline: auto;
}
@media (min-width: 940px) {
  .sommaire-corps { grid-template-columns: 1.35fr 1fr; gap: var(--e6); align-items: start; }
}

.sommaire-liste { display: grid; }
.sommaire-liste li { border-bottom: 1px solid var(--filet); }
.sommaire-liste li:first-child { border-top: 1px solid var(--filet); }
.sommaire-liste a {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  align-items: baseline;
  gap: var(--e2);
  padding-block: clamp(0.85rem, 2vw, 1.35rem);
  transition: padding-left 0.45s var(--sortie), color 0.3s;
}
.sommaire-liste a:hover { padding-left: 0.9rem; color: var(--or); }
.sommaire-num {
  font-family: var(--f-ui);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  color: var(--encre-tenue);
  font-variant-numeric: tabular-nums;
}
.sommaire-titre {
  font-family: var(--f-titre);
  font-size: clamp(1.4rem, 3.4vw, 2.2rem);
  line-height: 1.1;
}
.sommaire-note {
  font-family: var(--f-ui);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--encre-tenue);
  text-align: right;
}
@media (max-width: 620px) {
  .sommaire-liste a { grid-template-columns: 2.2rem 1fr; }
  .sommaire-note { grid-column: 2; text-align: left; }
}

.sommaire-chapitres { display: grid; gap: var(--e2); align-content: start; }
.sommaire-chapitre {
  display: grid;
  gap: 0.35rem;
  padding: var(--e3);
  border: 1px solid var(--filet);
  background: var(--papier-clair);
  transition: border-color 0.35s, transform 0.45s var(--sortie);
}
.sommaire-chapitre:hover { border-color: var(--or); transform: translateY(-3px); }
.sommaire-acte {
  font-family: var(--f-ui);
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--or);
}
.sommaire-chapitre-titre {
  font-family: var(--f-titre);
  font-size: 1.25rem;
  line-height: 1.2;
}
.sommaire-chapitre .sommaire-note { text-align: left; }

/* ==================================================================
   23. Les cartes de chapitre, sur l'accueil
   ================================================================== */

.actes { padding-block: var(--e6) var(--e7); }

.cartes-actes {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  max-width: 76rem;
  margin-inline: auto;
}
@media (min-width: 860px) { .cartes-actes { grid-template-columns: 1fr 1fr; } }

.carte-acte {
  position: relative;
  display: block;
  overflow: hidden;
  min-height: clamp(24rem, 46vw, 34rem);
  background: var(--encre);
  color: var(--nuit-texte);
  isolation: isolate;
  view-transition-name: var(--vt, none);
}
.carte-fond { position: absolute; inset: 0; z-index: -2; }
.carte-fond img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.32) contrast(1.05);
  transform: scale(1.02);
  transition: transform 1.1s var(--doux), filter 0.7s;
}
.carte-acte::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--nuit) 88%, transparent) 0%,
    color-mix(in srgb, var(--nuit) 62%, transparent) 45%,
    color-mix(in srgb, var(--nuit) 22%, transparent) 100%);
  transition: opacity 0.6s;
}
.carte-acte:hover .carte-fond img { transform: scale(1.07); filter: grayscale(0.1) contrast(1.05); }

.carte-contenu {
  position: relative;
  display: grid;
  align-content: end;
  gap: 0.85rem;
  height: 100%;
  min-height: inherit;
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
}
.carte-numero {
  font-family: var(--f-ui);
  font-size: 0.68rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--or);
}
.carte-titre {
  font-family: var(--f-titre);
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.carte-extrait {
  display: grid;
  gap: 0.15rem;
  color: color-mix(in srgb, var(--nuit-texte) 78%, transparent);
  font-size: 1rem;
  line-height: 1.5;
  max-width: 34ch;
}
.carte-extrait em { font-style: italic; }
.carte-pied {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e2);
  margin-top: 0.6rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-family: var(--f-ui);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.carte-lire { position: relative; }
.carte-lire::after {
  content: '';
  position: absolute;
  left: 0; bottom: -0.3rem;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--sortie);
}
.carte-acte:hover .carte-lire::after { transform: scaleX(1); }
.carte-duree { color: color-mix(in srgb, var(--nuit-texte) 60%, transparent); }

/* ==================================================================
   24. Le livre
   ================================================================== */

.entete--livre { background: var(--papier); border-bottom-color: var(--filet); }

.livre { position: relative; }

/* Sans JavaScript, le flux se lit simplement de haut en bas. */
.livre-source {
  max-width: var(--colonne);
  margin-inline: auto;
  padding: calc(var(--entete-h) + var(--e5)) var(--marge) var(--e6);
}
/* Une fois la pagination faite, la page ne défile plus : c'est le livre qui tourne. */
body.vue-chapitre:has(.livre--pagine) { overflow: hidden; }

.livre-rail {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  height: calc(100svh - var(--entete-h) - 4.5rem);
  margin-top: var(--entete-h);
  overscroll-behavior-x: contain;
}
.livre-rail::-webkit-scrollbar { display: none; }
.livre:not(.livre--pagine) .livre-rail { display: none; }

.page {
  flex: 0 0 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.25rem, 3vw, 2.5rem) var(--marge);
  scroll-snap-stop: always;
}
.page--accroche { scroll-snap-align: start; }
.page > * { max-width: 46ch; margin-inline: auto; width: 100%; }

/* Double page sur grand écran, séparée par un pli discret */
@media (min-width: 1024px) {
  .page { flex-basis: 50%; padding-inline: clamp(2rem, 4vw, 4.5rem); }
  .page:nth-child(even) { box-shadow: inset 1px 0 0 var(--filet); }
}

/* Dans le livre, le texte se resserre : comme sur une page imprimée. */
.livre--pagine .bloc {
  margin-block: 0.75em;
  max-width: none;
  hyphens: auto;
}
.livre--pagine .bloc.souffle { margin-block: 0.9em; }
.livre--pagine .bloc.dialogue { margin-block: 1.4em; max-width: none; }
.livre--pagine .bloc.saillant,
.livre--pagine .bloc.presage { margin-block: 1.5em; }
.livre--pagine .scene-entete { margin-block: 0 var(--e3); }
.livre--pagine .decor { margin-block: 0; }

.page--pleine { justify-content: center; align-items: center; text-align: center; }
.page--pleine > * { max-width: min(100%, 34rem); }
.page--large > * { max-width: min(100%, 62rem); }
@media (min-width: 1024px) {
  /* Une page « large » occupe les deux feuillets. */
  .page--large { flex-basis: 100%; box-shadow: none; }
}

.page-titre { display: grid; gap: var(--e2); justify-items: center; }
.page-titre .acte-titre {
  font-family: var(--f-titre);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
  max-width: 16ch;
}
.acte-duree {
  font-family: var(--f-ui);
  font-size: var(--t-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--encre-tenue);
}

/* Les planches illustrées */
.planche { display: grid; gap: 0.9rem; justify-items: center; width: 100%; }
/* Hauteur fixe + object-fit : la place est réservée avant même que
   l'image soit chargée, ce dont la pagination a besoin pour mesurer juste. */
.planche img {
  height: min(54vh, 26rem);
  width: 100%;
  object-fit: contain;
  background-size: contain;
  background-position: center;
  filter: drop-shadow(0 24px 34px rgba(23, 20, 15, 0.28));
}
.planche figcaption {
  font-family: var(--f-ui);
  font-size: var(--t-xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--encre-tenue);
}

/* La dernière page */
.page-fin { display: grid; gap: var(--e2); justify-items: center; }
.fin-titre {
  font-family: var(--f-titre);
  font-style: italic;
  font-size: clamp(1.5rem, 3.6vw, 2.4rem);
  line-height: 1.25;
  max-width: 20ch;
}
.fin-note { color: var(--encre-tenue); font-style: italic; }
.fin-lien, .fin-retour {
  font-family: var(--f-ui);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--filet);
  padding-bottom: 0.25rem;
  transition: color 0.3s, border-color 0.3s;
}
.fin-lien { margin-top: var(--e2); color: var(--or); border-color: color-mix(in srgb, var(--or) 40%, transparent); }
.fin-lien:hover { border-color: var(--or); }
.fin-retour { margin-top: var(--e3); color: var(--encre-tenue); }
.fin-retour:hover { color: var(--encre); border-color: var(--encre); }

/* La barre de navigation du livre */
.livre-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 30;
  height: 4.5rem;
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  padding-inline: var(--marge);
  background: color-mix(in srgb, var(--papier) 92%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--filet);
}
.livre-fleche {
  width: 44px; height: 44px;
  flex: 0 0 auto;
  display: grid; place-content: center;
  border: 1px solid var(--filet);
  border-radius: 50%;
  color: var(--encre-doux);
  transition: background 0.3s, color 0.3s, border-color 0.3s, opacity 0.3s;
}
.livre-fleche svg { width: 18px; height: 18px; }
.livre-fleche:hover:not(:disabled) { background: var(--encre); color: var(--papier); border-color: var(--encre); }
.livre-fleche:disabled { opacity: 0.28; cursor: default; }

.livre-jauge {
  flex: 1;
  height: 1px;
  background: var(--filet);
  position: relative;
  min-width: 3rem;
}
.livre-jauge i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--encre);
  transition: width 0.45s var(--sortie);
}
.livre-compte {
  font-family: var(--f-ui);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--encre-tenue);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ==================================================================
   25. La façade du lecteur vidéo
   ================================================================== */

.ecran { max-width: 62rem; margin-inline: auto; }
.ecran-boite {
  position: relative;
  margin-inline: auto;
  width: min(30rem, 86vw);
  aspect-ratio: var(--format, 16 / 9);
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 140px -30px rgba(255, 240, 210, 0.16);
  overflow: hidden;
}
.ecran-boite > iframe,
.ecran-boite > video { width: 100%; height: 100%; border: 0; display: block; }

.ecran-facade {
  position: absolute;
  inset: 0;
  width: 100%;
  display: grid;
  place-items: center;
  padding: 0;
}
.ecran-facade img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--doux), filter 0.6s;
}
.ecran-facade:hover img { transform: scale(1.03); filter: brightness(0.82); }

.ecran-play {
  position: relative;
  width: clamp(3.6rem, 9vw, 5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.75);
  background: color-mix(in srgb, var(--nuit) 30%, transparent);
  backdrop-filter: blur(3px);
  display: grid;
  place-content: center;
  color: #fff;
  transition: background 0.4s, transform 0.5s var(--sortie);
}
.ecran-facade:hover .ecran-play { background: color-mix(in srgb, var(--nuit) 55%, transparent); transform: scale(1.08); }
.ecran-play svg { width: 40%; height: 40%; margin-left: 8%; }

.ecran-note {
  margin-top: var(--e2);
  text-align: center;
  font-family: var(--f-ui);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  color: var(--nuit-tenue);
}
.cartel--centre { justify-items: center; text-align: center; margin-top: var(--e3); }

/* ==================================================================
   26. L'interprète de la chanson
   ================================================================== */

.interprete {
  max-width: 46rem;
  margin: var(--e3) auto 0;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 1.75rem);
  padding: clamp(1rem, 2.5vw, 1.5rem) clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--filet);
  background: var(--papier-clair);
}
.interprete-photo {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  filter: grayscale(0.15);
}
.interprete-texte { display: grid; gap: 0.2rem; min-width: 0; }
.interprete-nom {
  font-family: var(--f-titre);
  font-size: 1.3rem;
  line-height: 1.2;
}
.interprete-lieu { color: var(--encre-tenue); font-size: 0.86em; }
.interprete-bio { font-size: 0.98rem; color: var(--encre-doux); line-height: 1.5; }
@media (max-width: 520px) {
  .interprete { flex-direction: column; text-align: center; }
  .interprete-texte { justify-items: center; }
}

/* Sur une page entière, le registre des trois flops se resserre pour tenir. */
.page--pleine .flops-titre { margin-bottom: var(--e2); }
.page--pleine .flop { padding: clamp(0.8rem, 2.2vw, 1.5rem); gap: 0.3rem; }
.page--pleine .flop .num { font-size: 1.9rem; top: 0.3rem; right: 0.7rem; }
.page--pleine .flop .occasion { font-size: 1.08rem; }
.page--pleine .flop .lieu { font-size: 0.86rem; }
.page--pleine .flop .indice { font-size: 0.9rem; line-height: 1.4; }
.page--pleine .flop .tampon { margin-top: 0.25rem; }

/* Filet de sécurité : si une page entière déborde malgré tout, on la
   réduit très légèrement plutôt que d'en couper le haut et le bas. */
.page--pleine > * {
  transform: scale(var(--echelle, 1));
  transform-origin: center;
}

/* ==================================================================
   27. La vitrine — l'image en grand
   ================================================================== */

/* Les vignettes cliquables. Le bouton ne doit rien changer à la mise en
   page : `.cadre` garde intégralement son cartel et son passe-partout. */
.loupe {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: inherit;
}
.loupe, .cadre { cursor: zoom-in; }
.loupe img, .cadre img { pointer-events: none; }

/* Au survol, l'ombre s'approfondit : il y a plus grand derrière. */
.cadre { transition: box-shadow 0.45s var(--doux); }
.cadre:hover {
  box-shadow:
    0 1px 2px rgba(23, 20, 15, 0.07),
    0 48px 78px -44px rgba(23, 20, 15, 0.62);
}
.planche .loupe img { transition: filter 0.45s var(--doux); }
.planche .loupe:hover img { filter: drop-shadow(0 26px 40px rgba(23, 20, 15, 0.36)); }
.finale-cadre .loupe:hover img { filter: brightness(1.03); }

.vitrine {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  border: 0;
  background: var(--nuit);
  color: var(--nuit-texte);
  overflow: hidden;
  /* Les flèches se posent PAR-DESSUS l'image : elle garde toute la largeur. */
  display: grid;
  place-items: stretch;
  padding: clamp(3.25rem, 7vh, 4.5rem) clamp(0.75rem, 3vw, 2.5rem) clamp(1rem, 3vh, 2rem);
}
.vitrine::backdrop { background: var(--nuit); }
.vitrine:not([open]) { display: none; }

.vitrine-scene {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: clamp(0.9rem, 2.5vh, 1.6rem);
  height: 100%;
  width: 100%;
  min-height: 0;
  min-width: 0;
}
.vitrine-scene img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  margin: auto;
  object-fit: contain;
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.9);
}

.vitrine-cartel {
  display: grid;
  gap: 0.3rem;
  justify-items: center;
  text-align: center;
  font-family: var(--f-ui);
  color: var(--nuit-tenue);
}
.vitrine-titre {
  font-size: 0.82rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--nuit-texte);
}
.vitrine-sous { font-size: 0.74rem; letter-spacing: 0.14em; }
.vitrine-compte {
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--nuit-tenue) 75%, transparent);
}
.vitrine-cartel:empty { display: none; }

.vitrine-fleche {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
.vitrine-fleche--avant { left: clamp(0.5rem, 2vw, 1.75rem); }
.vitrine-fleche--apres { right: clamp(0.5rem, 2vw, 1.75rem); }

.vitrine-fleche, .vitrine-fermer {
  width: 46px;
  height: 46px;
  display: grid;
  place-content: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  color: #fff;
  /* Un fond sombre translucide : les flèches restent lisibles
     même posées sur une photo très claire. */
  background: color-mix(in srgb, var(--nuit) 55%, transparent);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  opacity: 0.82;
  transition: opacity 0.3s, background 0.3s, border-color 0.3s;
}
.vitrine-fleche:hover, .vitrine-fermer:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--nuit) 82%, transparent);
  border-color: rgba(255, 255, 255, 0.6);
}
.vitrine-fleche svg, .vitrine-fermer svg { width: 18px; height: 18px; }

.vitrine-fermer {
  position: absolute;
  top: clamp(0.75rem, 2vh, 1.5rem);
  right: clamp(0.75rem, 3vw, 2rem);
  z-index: 2;
}

@media (max-width: 640px) {
  /* Sur téléphone, on feuillette au doigt : les flèches encombreraient. */
  .vitrine-fleche { display: none; }
}

/* Le morphing vignette → grande image */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(vitrine-image),
  ::view-transition-new(vitrine-image) {
    animation-duration: 0.42s;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
  ::view-transition-group(vitrine-image) { animation-duration: 0.42s; }
}

/* ==================================================================
   28. Le cartel du vernissage
   Reproduction fidèle de l'étiquette imprimée le 21 août 2026 :
   plaque noire 85 × 45 mm, filet blanc, nom de l'artiste en petites
   capitales grises, titre de l'œuvre en capitales claires.
   ================================================================== */

.plaque-cartel {
  display: block;
  width: min(100%, 22rem);
  aspect-ratio: 85 / 45;
  background: #151515;
  color: #fdfdfd;
  padding: 0.5rem;
  box-shadow: 0 18px 32px -24px rgba(23, 20, 15, 0.75);
}
.plaque-cartel--seule { margin: var(--e3) auto 0; }

.plaque-inner {
  height: 100%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.55rem;
  padding: 0.6rem clamp(0.75rem, 3vw, 1.5rem);
  text-align: center;
  position: relative;
}

.plaque-artiste {
  font-family: var(--f-ui);
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #a0a0a0;
  line-height: 1.4;
}
.plaque-titre {
  font-family: var(--f-titre);
  font-size: clamp(0.92rem, 1.5vw, 1.12rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.3;
  color: #fdfdfd;
  text-wrap: balance;
}
.plaque-numero {
  position: absolute;
  bottom: 0.45rem;
  right: 0.7rem;
  font-family: var(--f-ui);
  font-size: 0.56rem;
  letter-spacing: 0.2em;
  color: rgba(253, 253, 253, 0.35);
}

/* L'anagramme, sur la plaque : mêmes lettres, mêmes couleurs. */
.anagramme--plaque {
  font-family: var(--f-ui);
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: uppercase;
  line-height: inherit;
  color: #a0a0a0;
  padding: 0.1em 0 0.3em;
  text-align: center;
}
.anagramme--plaque::after {
  left: 8%; right: 8%;
  bottom: 0.05em;
  background: rgba(255, 255, 255, 0.22);
}
.anagramme--plaque:hover { color: #fdfdfd; }
.anagramme--plaque:hover::after { background: rgba(255, 255, 255, 0.55); left: 0; right: 0; }
.anagramme--plaque.devoile { color: var(--or); }
.anagramme--plaque.devoile::after { background: color-mix(in srgb, var(--or) 55%, transparent); }
.anagramme--plaque .anagramme-ligne { white-space: nowrap; }

/* La plaque de la salle 1 se pose sous son œuvre. */
.oeuvre .plaque-cartel { margin-top: 0.35rem; }