@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════════════
   aaronkern.fr — LA COLLECTION
   ───────────────────────────────────────────────────────────────────────────
   Le site est l'appareil éditorial d'une collection française de poche :
   un bandeau, un numéro de volume, un catalogue, un bulletin d'abonnement.
   Contrat complet dans DESIGN.md.

   ⛔ CE QUI EST INTERDIT ICI, ET CE N'EST PAS UNE PRÉFÉRENCE :
      · le ROUGE, sous toutes ses formes — tranché par Kevin le 29/07/2026,
        « le rouge dans l'image est écarté » ;
      · le NACRÉ et les dégradés irisés — c'est le code de la romantasy, et ce
        livre n'en est pas une ;
      · le fond SOMBRE — la couverture a fait l'inversion des valeurs le
        12/08/2026, mesurée : 42,8 % de pixels clairs contre 0,8 %, et son
        titre est remonté dans la grille Amazon. Un site sombre l'annulerait.

   ⭐ LES COULEURS SONT MESURÉES SUR LA COUVERTURE LIVRÉE, pas choisies :
      l'or #D8BE8D est la teinte dominante du titre, la cendre #EDE9E6 est le
      décile clair du sol, l'encre #111112 est la silhouette d'Elior.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. LES POLICES ─────────────────────────────────────────────────────────
   Auto-hébergées, sans exception. Un appel à un CDN tiers transmettrait l'IP
   du lecteur sans son consentement, sur des pages qui collectent des adresses
   e-mail — et il mettrait une dépendance qu'on ne contrôle pas entre le QR
   imprimé et le lecteur. Fabriquées par `outils/polices.py`. */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cinzel";
  src: url("../fonts/cinzel-var.woff2") format("woff2-variations");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cinzel Decorative";
  src: url("../fonts/cinzel-decorative-black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/ebgaramond-var.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/ebgaramond-italic-var.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
}

/* ── 2. LES JETONS ──────────────────────────────────────────────────────── */

:root {
  /* Les fonds. La cendre est minérale : elle n'a pas le jaune du papier. */
  /* ⭐⭐ ÉCLAIRCIS LE 01/09/2026, SUR RETOUR DE KEVIN : « les couleurs sont
     sombres, je ne trouve pas le site élégant ». ⚠️ Le fond était le premier
     coupable — un gris à 91 % de clarté, sans UNE seule variation sur toute la
     page. La cendre reste froide et minérale (ce n'est ni du crème ni du blanc),
     mais elle monte, et `--cendre-1` devient une VRAIE seconde surface : de la
     profondeur sans un dégradé, que la direction interdit à juste titre.
     Contrastes recalculés, tous en hausse : encre 16,3:1 · encre-70 7,8:1 ·
     or 5,2:1 sur le fond de page. */
  --cendre-0: #f1efeb;   /* le sol de la couverture — fond de page */
  --cendre-1: #fbfaf8;   /* panneau clair, encarts — la seconde surface */
  --cendre-2: #dedad4;   /* filets doux, séparateurs de second rang */
  --cendre-3: #b9b5af;   /* bord des champs de saisie */

  /* L'encre. C'est la silhouette d'Elior, mesurée. */
  --encre:    #121214;
  --encre-70: #4a4a46;   /* 7,28:1 sur la cendre — texte secondaire */
  --encre-40: #86837d;   /* décoratif seulement, jamais du texte à lire */

  /* ⭐ L'OR EST LE SEUL SIGNAL DE COULEUR, ET IL EST RATIONNÉ AUX NOMBRES.
     Deux valeurs, parce qu'un seul or ne peut pas être lisible sur les deux
     fonds : le clair est l'or MESURÉ du titre (10,40:1 sur l'encre), le
     sombre est le même ton assombri pour tenir 4,88:1 sur la cendre. */
  --or:        #7c5f22;  /* or sur fond clair */
  --or-clair:  #d8be8d;  /* or sur bandeau noir — la teinte du titre */

  --focus: #1f4fd8;      /* l'anneau de focus. Il n'obéit pas à la charte :
                            il obéit au clavier, et il doit se voir. */

  /* La mesure typographique du roman : 65 à 75 signes. */
  --mesure: 34rem;
  --page:   72rem;

  /* Un seul rythme d'espacement sur tout le site. */
  --e1: 0.25rem;  --e2: 0.5rem;   --e3: 0.75rem;  --e4: 1rem;
  --e5: 1.5rem;   --e6: 2rem;     --e7: 3rem;     --e8: 4.5rem;
  --e9: 7rem;

  --bandeau-h: 3.5rem;
}

/* ── 3. LE SOCLE ────────────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--cendre-0);
  color: var(--encre);
  font-family: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-variation-settings: "wght" 420, "wdth" 100;
  font-size: 1rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Le lien d'évitement — il n'apparaît qu'au clavier, et il est réel. */
.evitement {
  position: absolute; left: var(--e4); top: -6rem; z-index: 40;
  background: var(--encre); color: var(--cendre-0);
  padding: var(--e3) var(--e5);
  font: 600 0.8125rem/1 "Archivo", sans-serif;
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  transition: top 140ms ease-out;
}
.evitement:focus { top: var(--e4); }

/* ── 4. L'APPAREIL DE COLLECTION ────────────────────────────────────────────
   Il parle en grotesque étroit capitalisé. Il ne parle jamais en Garamond. */

.appareil,
.bandeau,
.etiquette,
.cartouche,
.pave,
.champ label { font-family: "Archivo", system-ui, sans-serif; }

/* Le bandeau : aplat noir pleine largeur, type blanc. Jamais translucide. */
.bandeau {
  background: var(--encre);
  color: var(--cendre-0);
  position: sticky; top: 0; z-index: 30;
}
/* ⛔⛔ IL Y AVAIT DEUX BANDES NOIRES EMPILÉES — ~90 px d'aplat noir pleine
   largeur avant le moindre contenu, là où la direction en prévoyait UNE, à
   ~72 px. C'est la seconde cause du « c'est sombre », et la plus visible sur
   grand écran.
   ⭐ La bande de collection RESTE — elle est la thèse même du site (« ce n'est
   pas la vitrine d'un livre, c'est une collection ») — mais elle passe sur le
   papier : un filet plein de 2 px au lieu d'un aplat. La grammaire est intacte,
   le poids est divisé par deux. */
.bandeau--collection {
  position: static;
  background: transparent;
  color: var(--encre);
  border-bottom: 2px solid var(--encre);
}
.bandeau--collection .bandeau__marque:hover { color: var(--or); }

.bandeau__rang {
  max-width: var(--page);
  margin-inline: auto;
  min-height: var(--bandeau-h);
  padding-inline: var(--e4);
  display: flex; align-items: center; gap: var(--e5);
}
.bandeau__marque {
  font-variation-settings: "wght" 700, "wdth" 78;
  font-size: clamp(0.75rem, 2.4vw, 0.9375rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.bandeau__marque:hover { color: var(--or-clair); }

.bandeau__nav {
  margin-left: auto;
  display: flex; align-items: center; gap: clamp(var(--e3), 2.5vw, var(--e5));
}
.bandeau__nav a {
  font-variation-settings: "wght" 500, "wdth" 88;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding-block: var(--e3);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.bandeau__nav a:hover { border-bottom-color: var(--or-clair); }
.bandeau__nav a[aria-current="page"] { border-bottom-color: var(--cendre-0); }

/* Le cartouche de numéro. C'est la grammaire de la collection : un volume a
   un numéro, et le numéro est or parce que c'est un nombre. */
.cartouche {
  display: inline-flex; align-items: baseline; gap: 0.4em;
  border: 2px solid currentColor;
  padding: 0.15em 0.55em;
  font-variation-settings: "wght" 600, "wdth" 84;
  font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
  line-height: 1.35;
}
.cartouche b {
  font-variation-settings: "wght" 800, "wdth" 100;
  font-size: 1.05em; letter-spacing: 0.02em;
  color: var(--or-clair);
}
.cartouche--clair { color: var(--encre); }
.cartouche--clair b { color: var(--or); }

/* L'étiquette de section : le nom d'une rubrique du catalogue.
   ⚠ Employée avec parcimonie — une étiquette au-dessus de chaque section
   serait une grammaire subie, pas choisie. */
.etiquette {
  font-variation-settings: "wght" 600, "wdth" 82;
  font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--encre-70);
  margin: 0 0 var(--e4);
}

/* ── 5. LA VOIX DU LIVRE ────────────────────────────────────────────────────
   Cinzel Decorative au titre d'ouvrage, Cinzel à la série et au nom d'auteur,
   EB Garamond à toute prose de roman. Ce sont les polices IMPRIMÉES. */

.ouvrage {
  font-family: "Cinzel Decorative", "Cinzel", Georgia, serif;
  font-weight: 900;
  /* ⛔ 0,95 faisait SE TOUCHER les deux lignes du titre : Cinzel Decorative a
     des hampes hautes et des jambages à swash, et « LE SÉRAPHIN » mordait sur
     « DE CENDRES ». Vu à la capture, aux deux tailles. La police a besoin d'un
     interligne supérieur à 1 — c'est le prix d'une display ornée. */
  line-height: 1.08;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
}
.serie {
  font-family: "Cinzel", Georgia, serif;
  font-variation-settings: "wght" 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.prose {
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  font-variation-settings: "wght" 430;
  font-size: 1.1875rem;
  line-height: 1.62;
  max-width: var(--mesure);
}
.prose p { margin: 0 0 var(--e4); }
.prose__lead {
  font-variation-settings: "wght" 560;
  font-size: 1.3em;
  line-height: 1.35;
  margin-bottom: var(--e5) !important;
  text-wrap: balance;
}
.prose em { font-style: italic; }
.prose strong { font-variation-settings: "wght" 650; font-weight: 400; }

/* ── 6. LA CHARPENTE ────────────────────────────────────────────────────── */

.page { max-width: var(--page); margin-inline: auto; padding-inline: var(--e4); }

.bloc { padding-block: clamp(var(--e7), 8vw, var(--e9)); }
.bloc + .bloc { border-top: 2px solid var(--encre); }

/* Plus d'espace au-dessus d'un titre qu'en dessous. */
.titre-bloc {
  font-family: "Archivo", sans-serif;
  font-variation-settings: "wght" 700, "wdth" 80;
  font-size: clamp(1.375rem, 4vw, 1.875rem);
  letter-spacing: 0.06em; text-transform: uppercase;
  margin: 0 0 var(--e5);
  text-wrap: balance;
}

/* ── 7. LE FRONTISPICE ──────────────────────────────────────────────────────
   Premier viewport de l'accueil : la couverture encadrée à gauche, le titre et
   les chiffres à droite, l'action juste dessous. */

.frontispice {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--e6), 5vw, var(--e8));
  align-items: start;
  padding-block: clamp(var(--e6), 7vw, var(--e8));
}
/* ⛔ La colonne de droite laissait ~320 px de vide à sa droite : le filet des
   chiffres allait au bout, la prose s'arrêtait bien avant. Un bord ragged qui
   fait « inachevé ». ⭐ Tout le bloc partage maintenant UNE mesure, donc deux
   bords nets. */
.frontispice__corps { max-width: 32rem; }
.frontispice__corps .quatrieme { max-width: none; }

@media (min-width: 56rem) {
  .frontispice { grid-template-columns: minmax(0, 34%) minmax(0, 1fr); }
  /* ⛔ 22/09/2026 — L'ACCUEIL HÉRITAIT DE LA GRILLE D'UNE FICHE DE VOLUME, où
     la colonne étroite tient UNE couverture et la large tient le texte. Sur
     l'accueil l'ordre est inverse, et surtout il y a CINQ plats à montrer, pas
     un. Dans 46 % de la page, le cinquième passait à la ligne tout seul.
     ⭐ L'accueil ne se met donc pas en deux colonnes : le titre commande sur
     toute la largeur, et la série se déploie dessous, d'un seul rang. */
  .frontispice--serie { grid-template-columns: minmax(0, 1fr); }
  .frontispice__plat {
    position: sticky;
    top: calc(var(--bandeau-h) + var(--e5));
  }
}

/* Une couverture est un objet plat : un filet, pas d'ombre, pas de reflet,
   pas de perspective. */
.couverture {
  border: 2px solid var(--encre);
  background: var(--cendre-1);
  width: 100%;
}
.couverture--vignette { max-width: 13rem; }

/* ── LA VITRINE — 22/09/2026 ─────────────────────────────────────────────────
   L'accueil ouvrait sur le seul tome 1 : bandeau « Volume N° 1 », <h1> portant
   un titre de roman, et la quatrième de couverture d'UN livre sur la moitié de
   la page, alors que trois sont en vente. Les deux autres n'étaient qu'une
   ligne de liste, plus bas, SANS LIEN.
   ⭐ Sur un site d'auteur, l'objet est l'argument : trois couvertures alignées
   disent « série » mieux qu'une phrase. Le tome 1 garde l'action primaire —
   c'est par lui qu'on entre — mais il ne confisque plus la page.
   ⚠️ Aucune image neuve : ce sont les mêmes dérivés que les pages de volume. */
.frontispice--serie { align-items: center; }

.vitrine {
  display: grid;
  /* Cinq volumes sur UNE ligne, en bande compacte et centrée : ce sont des
     vignettes de collection, pas cinq affiches. */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  max-width: 58rem;
  margin-inline: auto;
  margin-top: clamp(var(--e6), 4vw, var(--e7));
  margin-top: clamp(var(--e5), 4vw, var(--e7));
  gap: clamp(var(--e4), 3vw, var(--e6));
  align-items: start;
}

.plat {
  display: block;
  color: inherit;
  text-decoration: none;
  /* ⭐ Le seul mouvement de la page, et il est sur son sujet. Une élévation
     courte à la sortie : l'objet se soulève, il ne rebondit pas. */
  transition: transform 180ms cubic-bezier(0.2, 0.8, 0.3, 1),
              filter 180ms cubic-bezier(0.2, 0.8, 0.3, 1);
}
.plat .couverture { display: block; }
.plat:hover, .plat:focus-visible {
  transform: translateY(-4px);
  /* ⚠️ Une ombre PORTÉE, avec décalage et flou : un halo sans décalage est un
     ornement, pas de la profondeur. Elle suit le contour du plat, pas sa boîte. */
  filter: drop-shadow(0 10px 18px rgb(18 18 20 / 0.22));
}

.plat__rang {
  display: block;
  margin-top: var(--e2, 0.35rem);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre-70);
}
/* ⭐ Les tomes sans page : la couverture existe, le livre n'est pas achetable.
   Ils ne sont pas cliquables — un lien qui ne mène nulle part est pire qu'une
   absence de lien — et ils disent leur état sous le titre. ⛔ Pas d'opacité
   réduite : ça se lit comme un défaut d'affichage, pas comme une information. */
/* ── L'ENTRÉE — 22/09/2026 ───────────────────────────────────────────────────
   L'ordre a été trouvé en trois passes, et les deux premières étaient fausses.
   ⛔ ① Titre à gauche, couvertures à droite : les cinq plats tombaient SOUS la
      ligne de flottaison, avec 170 px de vide au-dessus.
   ⛔ ② Couvertures EN PREMIER, avant le titre. Erreur d'un autre genre, et
      c'est Kevin qui l'a relevée : une bande de vignettes à 160 px n'est pas
      une image d'accueil. Elle ne présente RIEN à qui arrive — le visiteur voit
      cinq petits objets sans savoir ce qu'il regarde, et le nom de la série
      arrive après. Une galerie ne mène une page que si l'image est le sujet et
      qu'elle est grande ; ici ce sont des vignettes de collection.
   ✅ ③ L'ordre qui tient, et c'est le plus simple : le NOM oriente, la PROMESSE
      accroche, les COUVERTURES rendent concret, le BOUTON convertit. */
/* ⚠️ Resserré après mesure : à 1440 × 900, le pavé « Commencer par le tome 1 »
   tombait SOUS la ligne de flottaison. C'est l'action qui convertit — elle se
   voit sans faire défiler. */
/* ⚠️ Le haut avait été resserré quand les couvertures ouvraient la page : une
   bande d'images supporte d'être près du bandeau, un TITRE non. Depuis que le
   nom de la série est revenu en tête, il se retrouvait collé sous l'aplat noir
   — c'est ce que Kevin a vu. Il lui faut sa respiration au-dessus. */
.accueil { padding-block: clamp(var(--e6), 6vw, var(--e8)) clamp(var(--e5), 4vw, var(--e7)); }

.entree {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}
/* Le bloc d'action, sous les couvertures : c'est le dernier pas avant l'achat. */
.entree--pied { margin-top: clamp(var(--e5), 3vw, var(--e6)); }
.entree__titre {
  font-size: clamp(2.25rem, 7vw, 4rem);
  line-height: 0.95;
  text-wrap: balance;
  margin: 0;
}
.entree__accroche {
  /* ⚠️ La police du ROMAN, pas celle de l'appareil. `var(--serif)` n'existe pas
     dans cette feuille : la déclaration retombait en silence sur le sans-serif,
     et l'accroche perdait la voix du livre. */
  font-family: "EB Garamond", Georgia, serif;
  font-variation-settings: "wght" 430;
  font-size: clamp(1.0625rem, 2.4vw, 1.375rem);
  line-height: 1.5;
  text-wrap: pretty;
  margin-block: var(--e5) var(--e6);
  color: var(--encre);
}
.entree__actions { justify-content: center; }
/* ⭐ La mesure passe APRÈS l'action et en une seule ligne discrète : « 304 821
   mots » est une fiche technique, pas un désir. Elle rassure celui qui hésite
   déjà, elle ne doit pas peser plus que les couvertures. */
.entree__mesure {
  margin-top: var(--e5);
  font-size: 0.875rem;
  color: var(--encre-70);
}
.entree__mesure b {
  font-variation-settings: "wght" 700;
  color: var(--or);
  font-variant-numeric: tabular-nums;
}

.plat--attente { cursor: default; }
.plat__etat {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-70);
}
.plat__etat::before {
  content: "";
  display: inline-block;
  width: 0.4em; height: 0.4em;
  margin-right: 0.45em;
  vertical-align: 0.08em;
  border: 1px solid var(--encre-70);
  border-radius: 50%;
}

.plat__titre {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.875rem;
  font-variation-settings: "wght" 640;
  line-height: 1.2;
  text-wrap: balance;
}
.plat:hover .plat__titre, .plat:focus-visible .plat__titre {
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 2px;
}

@media (max-width: 34rem) {
  /* Trois plats côte à côte sous 34rem donneraient des vignettes illisibles :
     on en met deux, et le troisième passe dessous, au même rang de lecture. */
  /* Deux lignes sur téléphone : trois puis deux. */
  .vitrine { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }

}

.frontispice__titre {
  font-size: clamp(2.5rem, 9vw, 4.25rem);
  margin-block: var(--e4) var(--e5);
}
.frontispice__serie {
  font-size: clamp(0.75rem, 2.6vw, 0.875rem);
  color: var(--encre-70);
  display: block;
}
.frontispice__accroche {
  font-family: "EB Garamond", Georgia, serif;
  font-variation-settings: "wght" 430;
  font-size: clamp(1.125rem, 3vw, 1.375rem);
  line-height: 1.5;
  max-width: 30rem;
  margin: 0 0 var(--e6);
}

/* ── 8. LE RANG CHIFFRÉ ─────────────────────────────────────────────────────
   Les trois chiffres du livre. C'est le seul endroit de la page où l'or
   apparaît sur la cendre, et c'est la règle : l'or ne touche que des nombres.
   ⚠ Ce n'est PAS un gabarit à métriques : les trois nombres sont le sujet du
   roman — un compte, des combats, une taille — et le lectorat de progression
   fantasy les cherche avant l'intrigue. */
.rang-chiffre {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e4);
  border-block: 2px solid var(--encre);
  padding-block: var(--e5);
  margin-block: var(--e6);
  max-width: 32rem;
}
.rang-chiffre > div { min-width: 0; align-self: start; }
.rang-chiffre b {
  display: block;
  font-variation-settings: "wght" 800, "wdth" 92;
  font-size: clamp(1.75rem, 6vw, 2.5rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--or);
  letter-spacing: -0.02em;
}
.rang-chiffre span {
  display: block;
  margin-top: var(--e2);
  font-variation-settings: "wght" 500, "wdth" 88;
  font-size: 0.75rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--encre-70);
  line-height: 1.3;
}

/* ── 9. LES ACTIONS ─────────────────────────────────────────────────────────
   Un aplat noir plein, jamais un dégradé, jamais un coin rond. */

.pave {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--e3);
  background: var(--encre); color: var(--cendre-0);
  border: 2px solid var(--encre);
  padding: 0.85rem 1.6rem;
  min-height: 3rem;
  font-variation-settings: "wght" 650, "wdth" 88;
  font-size: 0.875rem; letter-spacing: 0.11em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background-color 140ms ease-out, color 140ms ease-out;
}
.pave:hover { background: transparent; color: var(--encre); }
.pave--vide { background: transparent; color: var(--encre); }
.pave--vide:hover { background: var(--encre); color: var(--cendre-0); }
.pave--clair { background: var(--cendre-0); color: var(--encre); border-color: var(--cendre-0); }
.pave--clair:hover { background: transparent; color: var(--cendre-0); }
.pave[disabled], .pave[aria-disabled="true"] {
  opacity: 0.45; cursor: not-allowed; pointer-events: none;
}
.pave--large { width: 100%; }

.actions { display: flex; flex-wrap: wrap; gap: var(--e3) var(--e4); align-items: center; }

/* Le lien de texte : souligné à l'encre, il s'épaissit au survol. */
.lien {
  color: var(--encre);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.lien:hover { text-decoration-thickness: 3px; }

/* ── 10. LE CATALOGUE DE LA COLLECTION ──────────────────────────────────────
   « Dans la même collection » : la page numérotée que porte le dos de tout
   poche français, promue en navigation du site.
   ⭐ Les volumes qui n'existent pas y figurent quand même, à leur numéro, avec
   « À paraître. » et AUCUNE DATE — c'est ce que dit déjà la page « La suite »
   du livre imprimé. */

.catalogue { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--encre); }
.catalogue > li { border-bottom: 2px solid var(--encre); }

.volume {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: var(--e4) var(--e5);
  align-items: baseline;
  padding-block: var(--e5);
  text-decoration: none;
  color: inherit;
}
@media (min-width: 44rem) {
  .volume { grid-template-columns: 4.5rem minmax(0, 1fr); align-items: start; }
}
a.volume:hover { background: var(--cendre-1); }
a.volume:hover .volume__titre { text-decoration: underline; text-underline-offset: 0.15em; }

.volume__n {
  font-variation-settings: "wght" 800, "wdth" 96;
  font-size: clamp(1.5rem, 5vw, 2rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--or);
  letter-spacing: -0.02em;
}
.volume__titre {
  font-family: "Cinzel", Georgia, serif;
  font-variation-settings: "wght" 600;
  font-size: clamp(1.0625rem, 3.2vw, 1.375rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.25;
}
.volume__note {
  margin: var(--e2) 0 0;
  font-size: 0.875rem;
  color: var(--encre-70);
  /* ⚠ 42ch venait d'une rangée étroite : dans un catalogue large de 1 100 px,
     la note cassait en deux lignes courtes et ça se lisait comme un défaut. */
  max-width: 62ch;
}
/* ⛔ L'état vivait dans une troisième colonne, collée au bord droit : sur un
   grand écran il se retrouvait à près de mille pixels de son titre, et l'œil ne
   reliait plus les deux. ⭐ Il descend sur la ligne de la mesure, sous le titre —
   l'état et sa preuve chiffrée se lisent ensemble. */
.volume__ligne {
  margin: var(--e2) 0 0;
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.5rem 0.9rem;
}
.volume__etat {
  font-variation-settings: "wght" 600, "wdth" 84;
  font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--encre-70);
  white-space: nowrap;
}

/* ⭐ La mesure sous le titre : c'est la PREUVE de l'état, pas un adjectif.
   Elle est lue dans le dépôt (chapitres comptés, mots comptés) et elle n'existe
   que pour un tome qui porte au moins une ligne. */
.volume__mesure {
  margin: var(--e2) 0 0;
  font-size: 0.8125rem;
  color: var(--encre-70);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* ⛔ CE BLOC N'AVAIT QU'UN ÉTAT — `.volume--paru` — et il était posé sur le
   tome 1 PARCE QU'IL PORTAIT LE NUMÉRO 1. Le site annonçait « Paru » un livre
   qu'on ne peut pas acheter, sur la même page que « en attente de publication ».
   ⭐ Trois états réels, maintenant, et ils se lisent dans le dépôt :
   `vente` (l'ASIN existe) · `ecrit` (les chapitres et l'EPUB existent) ·
   `attendu` (rien n'est écrit). `ecriture` est prévu et n'a pas encore servi. */
.volume--vente .volume__etat,
.volume--ecrit .volume__etat { color: var(--encre); }

/* La pastille : pleine quand le livre existe, creuse quand il est annoncé.
   ⚠ Elle double l'information portée par la couleur — un écart de teinte seul
   ne se voit pas de tout le monde. */
.volume__etat::before {
  content: "";
  display: inline-block;
  inline-size: 0.4375rem; block-size: 0.4375rem;
  margin-inline-end: 0.5em;
  border-radius: 50%;
  vertical-align: 0.05em;
  border: 1px solid currentColor;
}
.volume--vente .volume__etat::before,
.volume--ecrit .volume__etat::before { background: var(--or); border-color: var(--or); }

/* Un tome qui n'existe pas ne doit pas peser autant qu'un tome écrit. */
.volume--attendu .volume__titre { font-variation-settings: "wght" 500; color: var(--encre-70); }
.volume--attendu .volume__n { color: var(--encre-40); }

/* ── 11. L'ORNEMENT ─────────────────────────────────────────────────────────
   La plume du livre. C'est le séparateur de scène du roman imprimé ; il fait
   ici le même travail, et nulle part ailleurs. */
.ornement {
  border: 0;
  height: 2.25rem;
  margin: var(--e6) auto;
  width: min(18rem, 60%);
  background: center / contain no-repeat url("../img/ornement.png");
  opacity: 1;
}

/* ── 12. LE BULLETIN D'ABONNEMENT ───────────────────────────────────────────
   La carte-réponse encartée dans les poches français. C'est le moment
   mémorable du site, et c'est aussi sa page critique : l'adresse
   aaronkern.fr/lettre est imprimée dans un QR page 345 du broché. */

.bulletin {
  background: var(--cendre-1);
  border: 2px solid var(--encre);
  max-width: 44rem;
  margin-inline: auto;
}
.bulletin__tete {
  background: var(--encre); color: var(--cendre-0);
  padding: var(--e4) var(--e5);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3) var(--e5);
}
.bulletin__tete h2 {
  margin: 0;
  font-variation-settings: "wght" 700, "wdth" 80;
  font-size: clamp(0.9375rem, 3vw, 1.125rem);
  letter-spacing: 0.14em; text-transform: uppercase;
}
.bulletin__corps { padding: clamp(var(--e5), 5vw, var(--e7)); }

/* La perforation. Deux rangs de trous poinçonnés, comme sur une carte-réponse
   détachable. C'est de la géométrie, pas une image. */
.perforation {
  height: 0.5rem;
  border: 0;
  margin: var(--e6) calc(-1 * clamp(var(--e5), 5vw, var(--e7)));
  background:
    radial-gradient(circle at 50% 50%,
      var(--cendre-0) 0.19rem, transparent 0.2rem)
    0 0 / 0.75rem 0.5rem repeat-x;
  position: relative;
}
/* Les deux encoches de bord : ce qui fait lire « détachable » et non
   « pointillé ». Elles mordent sur le filet du cadre. */
.perforation::before,
.perforation::after {
  content: "";
  position: absolute; top: 50%;
  width: 0.6rem; height: 0.6rem;
  background: var(--cendre-0);
  border: 2px solid var(--encre);
  transform: translateY(-50%) rotate(45deg);
}
.perforation::before { left: -0.3rem; border-width: 0 0 2px 2px; }
.perforation::after { right: -0.3rem; border-width: 2px 2px 0 0; }

.champ { display: block; margin-bottom: var(--e5); }
.champ label {
  display: block;
  margin-bottom: var(--e2);
  font-variation-settings: "wght" 600, "wdth" 86;
  font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
}
.champ input[type="email"],
.champ input[type="text"] {
  width: 100%;
  font: inherit;
  font-size: 1.0625rem;
  padding: 0.8rem 0.9rem;
  min-height: 3rem;
  color: var(--encre);
  background: #fff;
  border: 2px solid var(--encre);
  border-radius: 0;
  appearance: none;
}
.champ input::placeholder { color: var(--encre-70); opacity: 1; }
.champ input:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.champ input[aria-invalid="true"] { border-color: var(--encre); box-shadow: inset 0 0 0 2px var(--cendre-3); }

.aide {
  margin: var(--e2) 0 0;
  font-size: 0.8125rem; line-height: 1.45;
  color: var(--encre-70);
}

/* Le pot de miel : invisible pour tout le monde sauf les robots. */
.pot-de-miel {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}

/* Les états du bulletin. Chacun est réel, aucun n'est décoratif. */
.message {
  border: 2px solid var(--encre);
  padding: var(--e4) var(--e5);
  margin-bottom: var(--e5);
  font-size: 0.9375rem; line-height: 1.5;
}
.message--erreur { background: var(--cendre-0); }
.message--erreur strong { display: block; margin-bottom: var(--e1); }
.message--ok { background: var(--encre); color: var(--cendre-0); }
.message[hidden] { display: none; }

/* ⭐ LE MOMENT AUTHORISÉ, ET IL EST UNIQUE : à l'envoi, le talon du bulletin
   se détache sur sa perforation. La carte part vers le haut, le reste tient.
   Un seul mouvement orchestré sur tout le site — pas des effets dispersés. */
.bulletin--parti .bulletin__talon {
  animation: detachement 620ms cubic-bezier(0.16, 0.84, 0.28, 1) forwards;
}
@keyframes detachement {
  0%   { transform: translateY(0) rotate(0); opacity: 1; }
  22%  { transform: translateY(0.35rem) rotate(-0.35deg); opacity: 1; }
  100% { transform: translateY(-1.75rem) rotate(0.6deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bulletin--parti .bulletin__talon { animation: none; opacity: 0; }
  .pave, .bandeau__nav a, .lien, .plat { transition: none; }
  .plat:hover, .plat:focus-visible { transform: none; }
}

/* ── 13. L'EXTRAIT ──────────────────────────────────────────────────────────
   Le chapitre 1 composé comme dans le livre : justifié, retrait de première
   ligne, AUCUN espace vertical entre les paragraphes, césure française.
   ⚠ Le premier paragraphe du chapitre et celui qui suit un séparateur de
   scène n'ont pas de retrait — c'est la norme du roman français, et le PDF
   la respecte déjà. */

.chapitre {
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  font-variation-settings: "wght" 430;
  font-size: clamp(1.125rem, 2.6vw, 1.25rem);
  line-height: 1.62;
  max-width: 68ch;
  margin-inline: auto;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
}
.chapitre p {
  margin: 0;
  text-indent: 1.4em;
  text-align: justify;
  text-wrap: pretty;
}
.chapitre p:first-of-type,
.chapitre .separateur + p { text-indent: 0; }
.chapitre p:first-of-type::first-line {
  font-variant-caps: small-caps;
  letter-spacing: 0.04em;
}
.chapitre .separateur {
  border: 0;
  height: 1.6rem;
  margin: var(--e5) auto;
  width: 11rem;
  background: center / contain no-repeat url("../img/ornement.png");
  opacity: 0.9;
}
.chapitre__tete {
  text-align: center;
  margin-bottom: var(--e7);
  padding-bottom: var(--e5);
  border-bottom: 2px solid var(--encre);
}
.chapitre__n {
  font-family: "Archivo", sans-serif;
  font-variation-settings: "wght" 800, "wdth" 96;
  font-size: clamp(2rem, 7vw, 3rem);
  line-height: 1;
  color: var(--or);
  font-variant-numeric: tabular-nums;
  display: block;
}
.chapitre__titre {
  font-family: "Cinzel", Georgia, serif;
  font-variation-settings: "wght" 600;
  font-size: clamp(1.125rem, 3.6vw, 1.625rem);
  letter-spacing: 0.14em; text-transform: uppercase;
  margin: var(--e3) 0 0;
}

/* ── 14. LES ENCARTS ────────────────────────────────────────────────────── */

.encart {
  background: var(--cendre-1);
  border: 2px solid var(--encre);
  padding: clamp(var(--e5), 4vw, var(--e6));
}
.encart--noir { background: var(--encre); color: var(--cendre-0); border-color: var(--encre); }
.encart--noir .lien { color: var(--cendre-0); }

/* Le pavé de caractéristiques — l'ours d'un volume de collection. */
.ours { margin: 0; border-top: 2px solid var(--encre); }
.ours > div {
  display: grid;
  grid-template-columns: minmax(7rem, 34%) minmax(0, 1fr);
  gap: var(--e4);
  padding-block: var(--e3);
  border-bottom: 1px solid var(--cendre-2);
}
.ours dt {
  font-variation-settings: "wght" 600, "wdth" 86;
  font-size: 0.75rem; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--encre-70);
  padding-top: 0.15em;
}
.ours dd { margin: 0; font-size: 0.9375rem; }
.ours dd b {
  font-variant-numeric: tabular-nums;
  font-variation-settings: "wght" 700;
  color: var(--or);
}

/* ⭐ LE CARTOUCHE D'ATTENTE. Il remplace un fait qui n'existe pas encore.
   C'est la mécanique de `outils/liens.py`, reprise telle quelle : « un blanc
   s'oublie, pas une ligne qui crie au milieu d'une page ». */
.attente {
  display: block;
  border: 2px dashed var(--encre);
  background: repeating-linear-gradient(
    -45deg, transparent 0 0.7rem, rgb(18 18 20 / 0.045) 0.7rem 1.4rem);
  padding: var(--e4) var(--e5);
  font-variation-settings: "wght" 700, "wdth" 82;
  font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
  line-height: 1.5;
}

/* ── 15. LA CARTE ───────────────────────────────────────────────────────── */
.carte { border: 2px solid var(--encre); width: 100%; background: var(--cendre-1); }

/* ── 16. LE PIED ────────────────────────────────────────────────────────── */

.pied {
  background: var(--encre);
  color: var(--cendre-0);
  padding-block: var(--e7) var(--e6);
  margin-top: var(--e8);
}
.pied__rang {
  max-width: var(--page); margin-inline: auto; padding-inline: var(--e4);
  display: grid; gap: var(--e6);
}
@media (min-width: 48rem) {
  .pied__rang { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
}
.pied a { color: var(--cendre-0); }
/* ⛔ Sans cette ligne, `.pied a` gagne en spécificité sur `.pave--clair` et le
   bouton du pied s'affiche en cendre sur cendre — invisible sur TOUTES les
   pages. Trouvé à la capture, pas au code. */
.pied a.pave--clair { color: var(--encre); }
.pied a.pave--clair:hover { color: var(--cendre-0); }
.pied__liens {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--e3) var(--e5);
  font-size: 0.8125rem; letter-spacing: 0.06em;
}
.pied__mention {
  margin: var(--e5) 0 0;
  font-size: 0.75rem; line-height: 1.5;
  color: #a8a49c;
  max-width: 46ch;
}
.pied__marque {
  font-family: "Cinzel", Georgia, serif;
  font-variation-settings: "wght" 600;
  font-size: 1.125rem; letter-spacing: 0.2em; text-transform: uppercase;
  margin: 0 0 var(--e3);
}

/* ── 17. PAGES DE TEXTE (mentions, confidentialité) ─────────────────────── */

.texte { max-width: 42rem; }
.texte h2 {
  font-variation-settings: "wght" 700, "wdth" 84;
  font-size: 1.125rem; letter-spacing: 0.09em; text-transform: uppercase;
  margin: var(--e7) 0 var(--e3);
}
.texte h2:first-child { margin-top: 0; }
.texte h3 {
  font-variation-settings: "wght" 650;
  font-size: 1rem; margin: var(--e5) 0 var(--e2);
}
.texte p { margin: 0 0 var(--e4); max-width: 68ch; }
.texte ul { margin: 0 0 var(--e4); padding-left: 1.2rem; max-width: 68ch; }
.texte li { margin-bottom: var(--e2); }

/* ── 17bis. LES CLASSES DE COMPOSITION ──────────────────────────────────────
   ⛔⛔ ELLES REMPLACENT 45 ATTRIBUTS `style=""`, ET CE N'EST PAS DU RANGEMENT :
   la CSP du serveur dit `style-src 'self'` SANS `'unsafe-inline'`, ce qui
   bloque aussi les attributs de style. **Le site se serait effondré au
   déploiement, et jamais en local** — nginx pose l'en-tête, pas
   `python3 -m http.server`.
   ⭐ On ne relâche pas la CSP : on retire ce qu'elle interdit. Une politique
   qu'on affaiblit pour faire passer son propre code ne protège plus rien. */

.col-etroite   { max-width: 38rem; }
.col-centree   { margin-inline: auto; }
.col-lecture   { max-width: 34rem; margin-inline: auto; text-align: center; }
.col-large     { max-width: 44rem; display: grid; gap: var(--e5); }
.pleine-mesure { max-width: none; }

.apres         { margin-top: var(--e6); }
.avant         { margin-bottom: var(--e7); }
.serre         { margin: 0; }
.apres-serre   { margin: 0 0 var(--e5); }
.centre        { justify-content: center; }

/* Le chapeau : la ligne qui suit un titre de section et qui le situe.
   Marge négative en tête pour se coller au titre — plus d'espace AU-DESSUS
   d'un titre qu'en dessous, la règle vaut aussi pour ce qui le suit. */
.chapeau {
  /* Même correction que `.volume__note` : la mesure suit la largeur réelle. */
  max-width: 64ch;
  margin: calc(-1 * var(--e2)) 0 var(--e6);
  color: var(--encre-70);
}

.titre-bloc--page { font-size: clamp(1.5rem, 5vw, 2.25rem); }
.bloc--haut { padding-top: var(--e7); }
.bloc--aere { padding-block: clamp(var(--e6), 6vw, var(--e8)); }
.page--erreur { min-height: 40vh; }

/* L'étiquette sur fond noir : le gris clair du pied, seul ton qui tienne
   4,5:1 sur l'encre sans crier aussi fort que le blanc. */
.etiquette--sombre { color: #a8a49c; }

/* La quatrième de couverture, dans la colonne du frontispice : un filet la
   sépare de l'action, elle n'est pas une suite du bloc de vente. */
.quatrieme {
  max-width: 38ch;
  border-top: 2px solid var(--encre);
  padding-top: var(--e6);
}

.encart--noir p { margin: 0 0 var(--e5); max-width: 46ch; }
.bulletin__oeuvre { margin: 0 0 var(--e4); }
.bulletin__talon .prose { font-size: 1.125rem; }
.volume__titre .volume__n { font-size: 1.5rem; }

/* ── 17 bis. REPRISE UI DU 28/09/2026 ──────────────────────────────────────── */

/* ⛔ Sur téléphone, la fiche d'un volume ouvrait sur la couverture en pleine
   largeur : titre et pavé d'achat tombaient vers 1 200 px, sous la ligne de
   flottaison. ⭐ La couverture passe en vignette à côté du titre, et l'action
   remonte AVANT la fiche technique — c'est ce que vient faire ce visiteur. */
@media (max-width: 55.98rem) {
  .frontispice--volume {
    grid-template-columns: clamp(7.5rem, 32%, 13rem) minmax(0, 1fr);
    grid-template-rows: auto 1fr auto auto;
    grid-template-areas:
      "couv    serie"
      "couv    titre"
      "actions actions"
      "ours    ours";
    gap: var(--e3) var(--e5);
    align-items: start;
  }
  .frontispice--volume .frontispice__corps { display: contents; }
  .frontispice--volume .frontispice__couv  { grid-area: couv; }
  .frontispice--volume .frontispice__serie { grid-area: serie; }
  .frontispice--volume .frontispice__titre {
    grid-area: titre;
    font-size: clamp(1.625rem, 7vw, 2.75rem);
    margin: 0;
  }
  .frontispice--volume .actions { grid-area: actions; margin-top: var(--e4); }
  .frontispice--volume .ours    { grid-area: ours; margin-top: var(--e4); }
}

/* ⛔ Deux pavés empilés de largeurs différentes : sur téléphone ils prennent
   toute la mesure, et la colonne d'actions a un bord net. */
@media (max-width: 34rem) {
  .actions > .pave { flex: 1 1 100%; }
}

/* Un groupe « nombre + unité » ne se coupe pas : « mots » seul sur sa ligne. */
.insecable { white-space: nowrap; }

/* ⭐ La vignette du catalogue : absente sur téléphone (les plats sont juste
   au-dessus), elle occupe la moitié droite qui restait vide sur grand écran. */
.volume__plat { display: none; }
@media (min-width: 44rem) {
  .volume { grid-template-columns: 4.5rem minmax(0, 1fr) 5.5rem; }
  .volume__plat { display: block; }
  .volume__plat img {
    display: block; width: 100%; height: auto;
    border: 2px solid var(--encre);
    background: var(--cendre-1);
  }
}

/* La prose des notes est celle du livre : Garamond, pas la grotesque de
   l'appareil (Règle 3 de DESIGN.md). */
.volume__note {
  font-family: "EB Garamond", Georgia, serif;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--encre-70);
}
.volume__suite { margin: var(--e2) 0 0; font-size: 0.9375rem; }

/* ⛔ « L'auteur » tenait dans une colonne étroite collée à gauche : la moitié
   droite de l'écran restait vide. ⭐ Le titre passe en marge, la prose à sa
   droite — la mise en page d'une notice biographique en fin de volume. */
@media (min-width: 56rem) {
  .bloc--lateral {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 0 var(--e8);
    align-items: start;
  }
}

/* /lettre, « Et ensuite » : la couverture du tome 2 à côté de son titre. */
.suite-tome {
  display: grid;
  grid-template-columns: clamp(6rem, 28%, 9rem) minmax(0, 1fr);
  gap: var(--e4) var(--e5);
  align-items: center;
}
.suite-tome__plat { display: block; }
.suite-tome__plat img { display: block; }
.suite-tome .chapeau { margin-top: var(--e3); }
.suite-tome .actions { grid-column: 1 / -1; }
@media (min-width: 34rem) {
  .suite-tome { align-items: start; }
  .suite-tome .actions { grid-column: 2; }
}

/* ── 18. IMPRESSION ─────────────────────────────────────────────────────────
   Quelqu'un imprimera le chapitre 1. Autant que ce soit lisible. */
@media print {
  .bandeau, .pied, .bulletin, .evitement, .actions { display: none; }
  body { background: #fff; color: #000; }
  .chapitre { max-width: none; font-size: 11.5pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}