/* ==========================================================================
   Direction artistique — Agnesa Mirabel
   --------------------------------------------------------------------------
   « Le livre comme objet, la nuit comme scène. »

   Trois principes, tirés de ses propres couvertures :
   1. LA LUMIÈRE EST LE SUJET. Chaque bloc a une source chaude ponctuelle dans
      une ambiance froide. Jamais d'aplat uniforme.
   2. LE LIVRE EST UN OBJET. On ne montre pas une vignette de couverture : on
      montre un volume, avec un dos, une épaisseur et une ombre portée.
   3. RIEN N'EST LISSE. Grain de papier partout, filets dorés, ornements
      d'angle. Son univers est peint, pas vectoriel.
   ========================================================================== */

/* ==========================================================================
   Header sur scène nocturne
   Une barre crème posée sur une illustration de nuit casse l'immersion. Sur
   ces pages le header prend la palette de nuit, dans les DEUX thèmes, et ne
   révèle sa surface qu'une fois qu'on a décollé du haut.
   ========================================================================== */
body.has-night-hero .c-header {
  --text: var(--cream-100);
  --text-strong: #FFFBF0;
  --text-muted: #C3CEDF;
  --accent: var(--gold-500);
  --accent-hover: var(--gold-300);
  --border: rgba(217, 174, 95, .22);
  --border-strong: rgba(217, 174, 95, .48);
  --border-subtle: rgba(242, 236, 220, .10);
  --glow-soft: rgba(253, 223, 150, .16);
  color: var(--cream-100);
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.has-night-hero .c-header .c-brand,
body.has-night-hero .c-header .c-brand__name { color: var(--text-strong); }
body.has-night-hero .c-header .c-nav__link { color: var(--cream-100); }

/* Au scroll, la barre se matérialise en verre sombre. */
body.has-night-hero .c-header.is-scrolled {
  background: color-mix(in srgb, #0A1526 84%, transparent);
  backdrop-filter: saturate(150%) blur(16px);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  border-bottom-color: var(--border);
}

/* Le header se superpose au hero au lieu de le pousser : la scène commence
   en haut de l'écran, comme sur la couverture. */
body.has-night-hero .c-header { position: fixed; top: 0; left: 0; right: 0; }
body.has-night-hero .c-stage { padding-top: 4.5rem; }

/* ==========================================================================
   SECTION NUIT — le rythme du site
   En mode clair, trois bandes crème successives donnaient une page plate et
   sans respiration. Ces sections restent nocturnes dans les DEUX thèmes : la
   page alterne alors nuit / crème / nuit, ce qui raconte le voyage du train
   au lieu de simplement empiler des blocs.
   ========================================================================== */
.s-night {
  --bg: var(--ink-900);
  --surface: var(--ink-800);
  --surface-2: var(--ink-700);
  --text: var(--cream-100);
  --text-strong: #FFFBF0;
  --text-muted: #B9C4D6;
  --accent: var(--gold-500);          /* 6,58:1 sur --surface ✓ AA */
  --accent-hover: var(--gold-300);
  --accent-deco: var(--gold-500);
  --accent-contrast: var(--ink-900);
  --glow: var(--lantern);
  --glow-soft: rgba(253, 223, 150, .16);
  --glow-strong: rgba(253, 223, 150, .40);
  --border: rgba(217, 174, 95, .26);
  --border-strong: rgba(217, 174, 95, .52);
  --border-subtle: rgba(242, 236, 220, .10);
  --shadow-md: 0 6px 20px -6px rgba(5, 12, 24, .66);
  --shadow-lg: 0 22px 50px -14px rgba(5, 12, 24, .78);

  background-color: var(--bg);
  color: var(--text);
  border-block: 1px solid var(--border);
}

/* ==========================================================================
   Grain & vignette — appliqués en ::after pour ne jamais gêner le contenu
   ========================================================================== */
.u-grain { position: relative; isolation: isolate; }
.u-grain::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--grain);
  background-size: 140px 140px;
  opacity: .32;
  mix-blend-mode: overlay;
  pointer-events: none;
}
:root[data-theme='light'] .u-grain::after { opacity: .5; mix-blend-mode: multiply; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .u-grain::after { opacity: .5; mix-blend-mode: multiply; }
}

/* Halo chaud posé derrière un bloc : la « lanterne » de la section. */
.u-glow-tl,
.u-glow-c {
  position: relative;
  isolation: isolate;
}
.u-glow-tl::before,
.u-glow-c::before {
  content: '';
  position: absolute;
  z-index: -2;
  width: 70rem; height: 70rem;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle closest-side, var(--glow-soft), transparent 70%);
}
.u-glow-tl::before { top: -26rem; left: -22rem; }
.u-glow-c::before  { top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* ==========================================================================
   Cadre à volutes — le motif de bordure de ses couvertures.
   Reconstruit en CSS pur : 4 angles en dégradés coniques, aucune image.
   ========================================================================== */
.u-frame {
  position: relative;
  padding: clamp(1.4rem, 3.4vw, 2.6rem);
}
.u-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  pointer-events: none;
}
/* Les quatre équerres dorées, plus marquées que le filet. */
.u-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  --c: var(--accent-deco);
  --t: 1.5px;
  --l: 20px;
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / var(--l) var(--t) no-repeat,
    linear-gradient(var(--c), var(--c)) 0 0 / var(--t) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 0 / var(--l) var(--t) no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 0 / var(--t) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) 0 100% / var(--l) var(--t) no-repeat,
    linear-gradient(var(--c), var(--c)) 0 100% / var(--t) var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 100% / var(--l) var(--t) no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 100% / var(--t) var(--l) no-repeat;
}

/* ==========================================================================
   Titrage éditorial — le lettrage de ses couvertures.
   Petites capitales, tracking large, capitale initiale surdimensionnée.
   ========================================================================== */
.u-title-plate {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: var(--ls-title);
  font-variant: small-caps;
  text-transform: lowercase;   /* combiné aux small-caps : rendu « gravé » de ses titres */
  text-wrap: balance;
  margin: 0;
}
/* Lettrine : la grande capitale initiale, comme le « T » de THE LUMINOUS TRAIN.
   Via ::first-letter et NON via un <span> : découper le titre en
   `<span>T</span>he journey` le rendait intraduisible (la lettrine ukrainienne
   n'est pas un T). Un titre est désormais une seule chaîne. */
.u-title-plate::first-letter {
  font-variant: normal;
  text-transform: uppercase;
  font-size: 1.22em;
}
/* Conservé pour les rares cas où la lettrine doit être posée à la main. */
.u-title-plate > .u-cap {
  font-variant: normal;
  text-transform: uppercase;
  font-size: 1.22em;
  line-height: 0;
}

/* Le kicker en capitales espacées, encadré de fleurons — comme « BOOK 1 ❦ ». */
.u-kicker {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-md);
}
.u-kicker::before,
.u-kicker::after {
  content: '';
  height: 1px;
  flex: 0 0 clamp(1.5rem, 4vw, 3.25rem);
  background: linear-gradient(90deg, transparent, var(--accent-deco));
}
.u-kicker::after { background: linear-gradient(90deg, var(--accent-deco), transparent); }
.u-kicker--start::before { display: none; }

/* Citation en italique display : son ton confessionnel. */
.u-pull {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-xl);
  line-height: 1.3;
  color: var(--text-strong);
  text-wrap: balance;
  margin: 0;
}

/* ==========================================================================
   LE LIVRE COMME OBJET
   Volume à trois faces : tranche, dos, couverture. Ombre longue et chaude.
   ========================================================================== */
/* ⚠️ PAS d'aspect-ratio fixe : ses couvertures n'ont pas le même format
   (tome 1 = 3:4, tome 2 = 9:16). Un ratio imposé + object-fit:cover rognait
   le tome 2 au tiers. On pilote par la HAUTEUR et l'image impose sa largeur :
   chaque livre garde ses vraies proportions. */
.c-vol {
  --vol-h: clamp(17rem, 32vw, 27rem);
  position: relative;
  flex: 0 0 auto;
  perspective: 1600px;
  line-height: 0;
}
.c-vol__inner {
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(-13deg) rotateX(1.5deg);
  transition: transform var(--d-slow) var(--ease-warm);
}
.c-vol__face {
  position: relative;
  border-radius: 3px 7px 7px 3px;
  overflow: hidden;
  box-shadow:
    0 34px 60px -22px rgba(5, 12, 24, .72),
    0 10px 18px -10px rgba(5, 12, 24, .5);
}
.c-vol__face img {
  display: block;
  height: var(--vol-h);
  width: auto;
  max-width: none;
}
/* Le dos : bande sombre à gauche, c'est ce qui donne l'épaisseur. */
.c-vol__spine {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 15px;
  transform: translateX(-100%) rotateY(-78deg);
  transform-origin: right center;
  background: linear-gradient(90deg, #0B1B31, #1B2E4D 62%, #0E2039);
  border-radius: 2px 0 0 2px;
}
/* Reflet de lumière chaude sur la couverture — la lanterne éclaire l'objet. */
.c-vol__face::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(112deg,
    rgba(253, 223, 150, .20) 0%,
    rgba(253, 223, 150, .05) 22%,
    transparent 48%);
}
/* Ombre au sol, séparée de l'objet pour rester douce. */
.c-vol::after {
  content: '';
  position: absolute;
  left: 6%; right: -6%;
  bottom: -5%;
  height: 12%;
  z-index: -1;
  filter: blur(22px);
  background: radial-gradient(ellipse at center, rgba(5, 12, 24, .7), transparent 72%);
}
:root[data-theme='light'] .c-vol__face {
  box-shadow: 0 34px 58px -24px rgba(90, 66, 30, .48), 0 10px 16px -10px rgba(90, 66, 30, .32);
}
:root[data-theme='light'] .c-vol::after {
  background: radial-gradient(ellipse at center, rgba(120, 92, 48, .42), transparent 72%);
}

@media (hover: hover) and (pointer: fine) {
  a:hover > .c-vol .c-vol__inner,
  .c-vol:hover .c-vol__inner { transform: rotateY(-5deg) rotateX(0.5deg) translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .c-vol__inner { transform: none; }
  .c-vol__spine { display: none; }
}

/* ==========================================================================
   HERO éditorial — texte à gauche, le livre posé à droite.
   L'illustration passe en fond d'ambiance : assombrie et floutée, elle ne
   concurrence plus le titre ni la couverture.
   ========================================================================== */
.c-stage {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--border);

  /* Scène nocturne dans les deux thèmes : l'illustration EST une nuit. */
  --text: var(--cream-100);
  --text-strong: #FFFBF0;
  --text-muted: #C3CEDF;
  --accent: var(--gold-500);
  --accent-hover: var(--gold-300);
  --accent-deco: var(--gold-500);
  --accent-contrast: var(--ink-900);
  --border: rgba(217, 174, 95, .24);
  --border-strong: rgba(217, 174, 95, .50);
  --glow-soft: rgba(253, 223, 150, .18);
  color: var(--text);
  background: var(--ink-900);
}
.c-stage__bg {
  position: absolute;
  inset: -6%;
  z-index: -3;
}
.c-stage__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 38%;
  /* Flou + désaturation : ça devient une atmosphère, plus une illustration
     qu'on essaie de lire. C'était l'erreur du premier jet. */
  filter: blur(3px) saturate(.82) brightness(.62);
  transform: scale(1.04);
}
.c-stage__veil {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(60% 70% at 78% 42%, rgba(253, 223, 150, .16), transparent 62%),
    linear-gradient(96deg, rgba(8, 18, 33, .95) 0%, rgba(8, 18, 33, .86) 42%, rgba(8, 18, 33, .58) 100%),
    linear-gradient(to bottom, rgba(8, 18, 33, .72) 0%, transparent 34%, rgba(8, 18, 33, .82) 100%);
}
.c-stage__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) auto;
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
  padding-block: clamp(3.5rem, 10vw, 7.5rem);
  min-height: min(86svh, 820px);
}
.c-stage__title {
  font-size: clamp(2.6rem, 1.7rem + 4.4vw, 5.4rem);
  margin-bottom: var(--space-lg);
  max-width: 20ch;
}
.c-stage__title em {
  font-style: italic;
  font-variant: normal;
  text-transform: none;
  color: var(--accent);
}
.c-stage__text {
  font-size: var(--t-md);
  line-height: 1.6;
  max-width: 44ch;
  color: var(--text-muted);
  margin-bottom: var(--space-xl);
}
.c-stage__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }

/* Sous 900px le livre passe au-dessus du texte, centré : il reste l'accroche. */
@media (max-width: 900px) {
  .c-stage__inner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    min-height: 0;
  }
  .c-stage__body { order: 2; }
  .c-stage__object { order: 1; margin-bottom: var(--space-lg); }
  .c-stage__title, .c-stage__text { margin-inline: auto; }
  .c-stage__actions { justify-content: center; }
  .u-kicker { justify-content: center; }
}

/* ==========================================================================
   PANNEAU DE GARE — les « stations » d'Agnesa, rendues comme les panneaux
   suspendus de ses illustrations : filet doré, small caps, chevrons.
   ========================================================================== */
.c-signs {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
  list-style: none;
  margin: 0; padding: 0;
}
/* Quatre panneaux courts (un par tome) : en auto-fit à 17.5rem ils tombaient
   en 3 + 1, et le tome quatre restait seul sur sa ligne. Ces cartes-là ne
   portent qu'un nom et une phrase — 12.5rem leur suffit pour tenir à quatre. */
.c-signs--quad { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); }

/* La plaque de gare : bois patiné + laiton, pas une carte plate.
   En crème sur crème (mode clair) elle disparaissait ; le dégradé sable
   + le liseré clair supérieur lui rendent son volume dans les deux thèmes. */
.c-sign {
  position: relative;
  padding: var(--space-lg) var(--space-lg) var(--space-lg) calc(var(--space-lg) + 1.6rem);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 92%, transparent) 0%, var(--surface) 62%),
    var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--glow) 22%, transparent),
    var(--shadow-md);
}
/* La potence du panneau. */
.c-sign::before {
  content: '';
  position: absolute;
  top: var(--space-lg); bottom: var(--space-lg);
  left: var(--space-md);
  width: 2px;
  background: linear-gradient(to bottom, transparent, var(--accent-deco) 22%, var(--accent-deco) 78%, transparent);
  opacity: .8;
}
/* Le chevron « ➤ » gravé de ses panneaux, en CSS. */
.c-sign__name {
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 700;
  font-variant: small-caps;
  letter-spacing: .04em;
  color: var(--text-strong);
  margin: 0 0 var(--space-xs);
  padding-right: var(--space-lg);   /* place réservée au chevron ancré */
}
/* Chevron ancré en haut à droite de la plaque : sur un titre qui passe à la
   ligne, un `margin-left:auto` le décrochait au milieu de nulle part. */
.c-sign__name::after {
  content: '\00BB';           /* » — le chevron gravé de ses panneaux de gare */
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  color: var(--accent);
  font-size: 1em;
  line-height: 1;
}
.c-sign__text {
  font-size: var(--t-sm);
  line-height: 1.62;
  color: var(--text-muted);
  margin: 0;
}

/* ==========================================================================
   Carte livre — le volume, puis le texte. Plus de « carte » générique.
   ========================================================================== */
.c-shelf {
  display: grid;
  gap: clamp(2.5rem, 7vw, 5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  align-items: start;
}
.c-title-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: start;
  text-decoration: none;
  color: inherit;
}
/* Le volume est piloté par sa HAUTEUR (voir .c-vol) : un `--vol-w` résiduel
   ici laissait la couverture à sa taille de hero et écrasait la colonne de
   texte à cinq mots par ligne. */
.c-title-item .c-vol { --vol-h: clamp(11rem, 19vw, 15rem); }
.c-title-item__meta {
  display: block;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-xs);
}
.c-title-item__name {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-variant: small-caps;
  letter-spacing: .03em;
  margin: 0 0 var(--space-sm);
}
.c-title-item__text {
  font-size: var(--t-sm);
  line-height: 1.66;
  color: var(--text-muted);
  margin: 0 0 var(--space-md);
}
@media (max-width: 520px) {
  .c-title-item { grid-template-columns: 1fr; justify-items: start; }
}

/* ==========================================================================
   Bouton — verre doré plutôt que pilule plate. Le primaire porte un liseré
   clair en haut : la lumière tombe d'en haut, comme sur ses illustrations.
   ========================================================================== */
.c-btn {
  border-radius: var(--r-full);
  box-shadow: inset 0 1px 0 rgba(255, 251, 240, .34), var(--shadow-sm);
}
.c-btn--ghost { box-shadow: none; backdrop-filter: blur(6px); }
.c-btn--quiet { box-shadow: none; }

/* Lien texte à filet doré animé — pour les actions tertiaires. */
.c-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--accent);
  text-decoration: none;
  padding-block: 4px;
  position: relative;
}
.c-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform var(--d-base) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .c-link:hover::after { transform: scaleX(1); }
}

/* ==========================================================================
   GALERIE D'ILLUSTRATIONS
   Toutes ses images sont en PORTRAIT (vérifié : pas un seul carré ni paysage
   sur le compte). Une grille en colonnes de hauteurs alternées épouse ce
   format au lieu de le recadrer, et donne le rythme d'une planche d'album.
   ========================================================================== */
.c-plates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(.75rem, 1.6vw, 1.15rem);
  list-style: none;
  margin: 0; padding: 0;
}
.c-plate {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface-2);
  box-shadow: var(--shadow-md);
}
/* Décalage vertical : la planche respire, comme un album maquetté à la main. */
.c-plates > .c-plate:nth-child(even) { transform: translateY(clamp(.75rem, 2.4vw, 2.25rem)); }

.c-plate img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 3 / 4;
  transition: transform 900ms var(--ease-warm);
}
/* --------------------------------------------------------------------------
   Le coffret : ses deux planches sont panoramiques (les quatre volumes, puis
   les quatre marque-pages). Le rythme 3/4 d'une planche d'album les coupait
   en deux — ici on suit le format de l'image, comme partout ailleurs.
   -------------------------------------------------------------------------- */
.c-plates--wide {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  gap: clamp(1rem, 2.4vw, 1.75rem);
}
.c-plates--wide .c-plate img { aspect-ratio: 16 / 9; }
/* Pas de décalage vertical : deux panoramiques désalignées font accident. */
.c-plates--wide > .c-plate:nth-child(even) { transform: none; }

/* Légende révélée au survol, sur un dégradé — jamais posée en dur sur l'image. */
.c-plate figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-lg) var(--space-md) var(--space-md);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--cream-100);
  background: linear-gradient(to top, rgba(8, 18, 33, .92), rgba(8, 18, 33, .55) 55%, transparent);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--d-base) ease, transform var(--d-base) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .c-plate:hover img { transform: scale(1.06); }
  .c-plate:hover figcaption { opacity: 1; transform: none; }
  .c-plate:hover { border-color: var(--border-strong); }
}
/* Au doigt, pas de survol : la légende reste visible en permanence. */
@media (hover: none) {
  .c-plate figcaption { opacity: 1; transform: none; }
}

/* ==========================================================================
   Bandeau boutique — encadré doré + halo, pas un simple bloc coloré
   ========================================================================== */
.c-offer {
  position: relative;
  display: grid;
  gap: clamp(1.75rem, 5vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  padding: clamp(1.75rem, 5vw, 3.25rem);
  border-radius: var(--r-lg);
  background:
    radial-gradient(90% 130% at 8% 0%, var(--glow-soft), transparent 58%),
    var(--surface);
  border: 1px solid var(--border-strong);
}
.c-offer h2, .c-offer h3 { font-variant: small-caps; letter-spacing: .03em; }

/* ==========================================================================
   CITATION DU LIVRE
   Une phrase tirée du manuscrit, posée comme une page ouverte : filet doré à
   gauche, italique display, guillemet ouvrant en ornement.
   ========================================================================== */
.c-excerpt {
  position: relative;
  margin: 0;
  padding: var(--space-lg) var(--space-lg) var(--space-lg) clamp(2rem, 5vw, 3.25rem);
  border-left: 2px solid var(--accent-deco);
}
.c-excerpt::before {
  content: '\201C';                 /* “ */
  position: absolute;
  top: -.08em;
  left: clamp(.6rem, 1.8vw, 1.1rem);
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 4.5rem);
  line-height: 1;
  color: var(--accent-deco);
  opacity: .45;
  pointer-events: none;
}
.c-excerpt p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-md);
  line-height: 1.5;
  color: var(--text-strong);
  margin: 0;
  max-width: 46ch;
}
.c-excerpt footer {
  margin-top: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-style: normal;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--accent);
}

/* Citation et objet-souvenir dans un panneau de gare. */
.c-sign__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--text);
  margin: var(--space-sm) 0 0;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border-subtle);
}
/* L'objet que l'enfant emporte de chaque station : empreintes, pierre, clé.
   C'est le fil rouge du livre, il mérite d'être signalé. */
.c-sign__keep {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  font-size: var(--t-xs);
  letter-spacing: .02em;
  color: var(--accent);
  margin: var(--space-sm) 0 0;
}
.c-sign__keep::before {
  content: '';
  flex: none;
  width: 5px; height: 5px;
  background: currentColor;
  transform: rotate(45deg);
  translate: 0 -2px;
}

/* ==========================================================================
   CE QUE LE LIVRE APPORTE — la liste de bénéfices, telle qu'elle l'écrit
   ========================================================================== */
.c-helps {
  display: grid;
  gap: var(--space-sm);
  list-style: none;
  margin: 0; padding: 0;
}
.c-helps li {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--text);
  max-width: 46ch;
}
/* Une petite lanterne allumée devant chaque ligne, pas une puce générique. */
.c-helps li::before {
  content: '';
  flex: none;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--glow);
  box-shadow: 0 0 8px 1px var(--glow-strong);
  translate: 0 -2px;
}

/* ==========================================================================
   FICHE TECHNIQUE — âge, pages, langue
   ========================================================================== */
.c-specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  padding: var(--space-md) 0;
  margin: var(--space-lg) 0;
  border-block: 1px solid var(--border);
  list-style: none;
}
.c-specs li { display: grid; gap: 2px; }
.c-specs dt, .c-specs .c-specs__k {
  font-size: var(--t-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
.c-specs .c-specs__v {
  font-family: var(--font-display);
  font-size: var(--t-md);
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   BLOCS DE PROSE (FAQ, notes aux parents, pratique)
   Le h3 par défaut vaut --t-xl, soit la même taille que le h2 de section :
   les questions du FAQ paraissaient donc PLUS GROSSES que le titre qui les
   coiffe (inversion de hiérarchie relevée au screenshot de /shop/).
   Tous ces blocs passent par .u-container--narrow, on les cible là.
   ========================================================================== */
.u-container--narrow h3 {
  font-size: var(--t-md);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-xs);
}
.u-container--narrow h3:first-of-type { margin-top: var(--space-lg); }
/* Un filet doré discret devant chaque question : on reste dans l'univers. */
.u-container--narrow h3::before {
  content: '';
  display: inline-block;
  width: 14px; height: 1px;
  margin-right: var(--space-sm);
  vertical-align: 0.32em;
  background: var(--accent-deco);
}
.u-container--narrow h3 + p { color: var(--text-muted); }