/* ═══════════════════════════════════════════════════════════════════════════
   Marly's Stories — feuille de style unique

   Parti pris, et chaque point se justifie :

   · SOMBRE PAR DÉFAUT. On lit un roman le soir, au lit, dans le noir. Le mode
     clair existe et se choisit ; il n'est pas l'état naturel de ce produit.
   · UNE SERIF POUR LE TEXTE DES CHAPITRES. C'est ce qui sépare une page web
     d'un livre. Les polices sont celles du système : aucune n'est téléchargée,
     donc rien ne part chez Google et rien ne retarde l'affichage.
   · UN SEUL ACCENT, le doré de Marly's Concept, réservé aux ACTIONS. Un lien
     doré est cliquable ; rien de doré n'est décoratif.
   · AUCUN DÉGRADÉ, aucune ombre portée molle, aucune animation d'apparition.
     Ce sont les couvertures des romans qui apportent la couleur.
   · UNE SEULE ÉCHELLE d'espacement (4 → 64) et une seule échelle de tailles.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Espacement — rien en dehors de cette liste */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px;

  /* Typographie */
  --ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --t-xs: 0.8125rem; --t-sm: 0.9375rem; --t-base: 1rem;
  --t-lg: 1.125rem; --t-xl: 1.375rem; --t-2xl: 1.75rem; --t-3xl: 2.25rem;

  --rayon: 10px;
  --largeur: 1120px;
  --lecture: 34em;          /* ≈ 65 caractères : la longueur de ligne qui se lit */

  /* Palette sombre (défaut) */
  --fond: #0E0D0B;
  --surface: #17151230;
  --surface-plein: #1A1714;
  --bord: #2B2621;
  --texte: #E9E3D8;
  --texte-doux: #A79E90;
  --accent: #C9A84C;
  --accent-fort: #E0BE5E;
  --accent-sourd: rgba(201, 168, 76, 0.12);
  --danger: #E4796B;
  --succes: #7FB069;
  --sur-accent: #12100D;   /* ce qui s'écrit SUR la couleur d'action */
}

[data-theme="light"] {
  --fond: #FAF7F1;
  --surface: #FFFFFF;
  --surface-plein: #FFFFFF;
  --bord: #E2DACB;
  --texte: #1E1B16;
  --texte-doux: #6B6153;
  /* 🔴 Mesuré, pas choisi à l'œil : le doré du mode sombre tombe à 3,76:1 sur
     un fond clair — sous le seuil de 4,5:1, donc illisible pour une partie des
     lecteurs. Assombri jusqu'à 5,33:1. Un accent qu'on ne lit pas n'est pas
     un accent, c'est une décoration. */
  --accent: #7E6316;
  --accent-fort: #5F4A10;
  --accent-sourd: rgba(126, 99, 22, 0.10);
  /* 🔴 L'accent clair est sombre : un texte noir dessus tomberait à 2,0:1.
     Sur fond d'action, on écrit en blanc — 5,70:1. */
  --sur-accent: #FFFFFF;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--ui);
  font-size: var(--t-base);
  line-height: 1.6;
  /* 🔴 Sans cette ligne, un titre long ou une URL collée dans un résumé
     déborde en largeur sur un téléphone de 320 px. */
  overflow-wrap: break-word;
}

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

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-fort); text-decoration: underline; }

/* 🔴 Un lien AU MILIEU D'UNE PHRASE doit se distinguer autrement que par sa
   couleur : un lecteur daltonien (8 % des hommes) ne voit alors aucun lien.
   Les liens de navigation et les boutons n'ont pas ce problème — leur forme et
   leur place suffisent — d'où la règle limitée aux paragraphes. */
p a:not([class*="bouton"]):not(.etiquette) {
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
}

/* Le focus se VOIT. Il n'est jamais retiré : c'est la seule façon de naviguer
   au clavier, et le retirer rend le site inutilisable pour qui n'a pas de souris. */
:focus-visible {
  outline: 2px solid var(--accent-fort);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Lien d'évitement : invisible tant qu'on ne l'atteint pas au clavier. */
.evitement {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: var(--sur-accent);
  padding: var(--e3) var(--e4); z-index: 100; font-weight: 600;
}
.evitement:focus { left: var(--e4); top: var(--e4); }

.enveloppe { width: 100%; max-width: var(--largeur); margin: 0 auto; padding: 0 var(--e4); }

/* ── En-tête ─────────────────────────────────────────────────────────────── */
.entete {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--fond) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bord);
}
.entete__inner { display: flex; align-items: center; gap: var(--e2); height: 56px; }
@media (min-width: 560px) { .entete__inner { gap: var(--e4); } }
/* À 375 px, chaque pixel de la barre est disputé : la gouttière passe de
   16 à 12 px et le logo de 22 à 20 px de haut. En dessous, le compte ou la
   langue repartait hors de l'écran. */
.entete .enveloppe { padding: 0 var(--e3); }
@media (min-width: 560px) { .entete .enveloppe { padding: 0 var(--e4); } }
/* 🔴 L'en-tête d'administration déborde à 375 px : cinq entrées de menu font
   490 px de large sur un écran qui en fait 375. Le lecteur du site public ne
   voit jamais ce défaut — l'administrateur, lui, travaille parfois debout dans
   un couloir. La barre défile horizontalement plutôt que de pousser la page. */
.entete__inner nav {
  display: flex; align-items: center; gap: var(--e4);
  flex: 1 1 auto; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; -ms-overflow-style: none;
  padding-bottom: 2px;
}
.entete__inner nav::-webkit-scrollbar { display: none; }
.entete__inner nav > * { flex: 0 0 auto; white-space: nowrap; }
/* ⭐ 02/10/2026 — Sur téléphone, les liens passent sur une seconde ligne.
   À 375 px, la barre ne laissait que 68 px aux liens, qui en demandent 212 :
   « Trouvez un roman » était coupé net et « Histoires » invisible (il fallait
   faire glisser la barre, ce que personne ne fait). Le logo et les outils
   gardent la première ligne ; les liens ont la leur, centrés, cible de 40 px.
   ⚠ Pas pendant la lecture (body.en-lecture) : là, tout ce qui n'est pas le
   texte s'efface, et la barre reste sur une seule ligne. */
/* ⭐ 12/10/2026 — 719 → 899 px : avec « Histoires courtes », le 3e lien était coupé à 768 px. */
@media (max-width: 899px) {
  body:not(.en-lecture) .entete__inner { flex-wrap: wrap; height: auto; min-height: 56px; row-gap: 0; }
  body:not(.en-lecture) .entete__inner > .marque { height: 56px; align-items: center; }
  body:not(.en-lecture) .entete__inner .entete__outils { margin-left: auto; height: 56px; }
  body:not(.en-lecture) .entete__inner nav {
    order: 3; flex: 1 0 100%; margin: 0; justify-content: center; gap: var(--e5);
    height: 40px; border-top: 1px solid var(--bord); padding-bottom: 0; overflow: visible;
  }
  body:not(.en-lecture) .entete__inner nav a { display: inline-flex; align-items: center; min-height: 40px; }
  /* Pendant la lecture, les liens coupés disparaissent : le logo ramène au site. */
  body.en-lecture .entete__inner nav { visibility: hidden; }
}
/* La marque est une image : le logo est une écriture dessinée, pas une police
   que le navigateur saurait rendre. Deux fichiers, un par thème — le doré
   #F5C44E tombe à 1,56:1 sur fond clair, on ne le lirait plus. */
.marque { display: inline-flex; align-items: baseline; gap: var(--e2); flex: 0 0 auto;
  font-weight: 700; letter-spacing: -0.01em; color: var(--texte); }
/* ⚠ L'administration garde une marque en TEXTE : elle n'a pas besoin du logo et
   ces deux classes servent encore. Les avoir retirées avec le logo du site
   public a collé « Marly'sAdmin » en un seul mot pendant une journée. */
.marque__m { font-family: var(--serif); font-size: var(--t-lg); color: var(--accent); font-style: italic; }
.marque__s { font-size: var(--t-sm); text-transform: uppercase; letter-spacing: 0.12em; }
.marque:hover { text-decoration: none; }
.marque__logo { display: block; width: auto; height: 20px; }
/* 🔴 Sans cette ligne, les DEUX logos s'affichent en mode sombre : « display:block »
   posé par nous écrase le « [hidden] { display:none } » du navigateur, qui est une
   règle d'agent utilisateur et perd toujours contre une règle d'auteur. Vu en
   production sur un téléphone, jamais sur nos captures — parce qu'on n'avait
   regardé que le mode clair. On regarde les deux, maintenant. */
.marque__logo[hidden] { display: none; }
[data-theme="light"] .marque__logo--sombre { display: none; }
[data-theme="light"] .marque__logo--clair  { display: block; }
@media (min-width: 560px) { .marque__logo { height: 30px; } }
.pied__logo { display: block; width: auto; height: 26px; opacity: .55; margin-bottom: var(--e4); }
[data-theme="light"] .pied__logo { opacity: .7; filter: saturate(.8) brightness(.6); }
.entete nav { margin-left: auto; display: flex; align-items: center; gap: var(--e3); }
/* 🔴 Vu à 375 px : « Se connecter » passait sur deux lignes et déséquilibrait
   toute la barre. Un libellé de navigation ne se coupe jamais. */
.entete nav a { color: var(--texte-doux); font-size: var(--t-sm); white-space: nowrap; }
@media (min-width: 480px) { .entete nav { gap: var(--e4); } }
.entete nav a:hover, .entete nav a[aria-current="page"] { color: var(--texte); text-decoration: none; }

/* ── Outils de l'en-tête : langue et thème ────────────────────────────────
   🔴 Ils vivaient DANS la barre de navigation, qui défile horizontalement.
   Résultat à 375 px : « NL », « EN » et le bouton de thème étaient coupés au
   bord droit de l'écran, et rien ne laissait deviner qu'il fallait faire
   glisser la barre pour les atteindre. Sortis du défilement, ancrés à droite :
   ce sont les LIENS qui se comprimeront, jamais les outils. */
.entete__outils {
  display: flex; align-items: center; gap: var(--e1);
  flex: 0 0 auto; margin-left: auto; padding-left: var(--e1);
}
@media (min-width: 560px) { .entete__outils { gap: var(--e2); padding-left: var(--e3); } }
/* La cible tactile de la maison : 44 px, même pour un caractère de 12 px. */
.entete__outils .bouton--texte { min-width: 44px; display: inline-flex;
  align-items: center; justify-content: center; }

/* Le compte : une silhouette sur téléphone, le mot entier dès 560 px. */
.entete__compte {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: 40px; min-width: 44px; padding: 0 var(--e2);
  border-radius: var(--rayon); color: var(--texte-doux);
  font-size: var(--t-sm); white-space: nowrap;
}
.entete__compte:hover, .entete__compte[aria-current="page"] { color: var(--texte); text-decoration: none; }
.entete__compte-mot { display: none; }
@media (min-width: 560px) {
  .entete__compte-ico { display: none; }
  .entete__compte-mot { display: inline; }
  .entete__compte { padding: 0 var(--e2); }
}

/* ── Sélecteur de langue ──────────────────────────────────────────────────
   UN composant, deux présentations. Les trois liens sont toujours écrits dans
   la page — ils s'indexent et se partagent, c'était la raison de ne pas faire
   un menu déroulant, et elle reste vraie. À partir de 560 px ils s'affichent
   en ligne comme avant (FR NL EN). En dessous, app.js les replie derrière un
   bouton qui porte la langue en cours, parce qu'il n'y a pas la place de trois
   codes ET d'un menu sur un téléphone.
   ⭐ Si app.js ne se charge pas — TigerProtect l'a déjà rendu en 429 — le
   bouton reste caché et l'affichage en ligne subsiste : jamais moins qu'avant. */
.langues { position: relative; display: inline-flex; align-items: center; flex: 0 0 auto; }
.langues__liste { display: flex; align-items: center; gap: var(--e2); }
.langues__liste a,
.langues__actuelle {
  font-size: 12px; letter-spacing: .06em; line-height: 1;
  padding: 5px 6px; border-radius: 4px;
}
.langues__liste a { color: var(--texte-doux); }
.langues__liste a:hover { color: var(--texte); text-decoration: none; background: var(--surface-plein); }
/* La langue en cours n'est pas un lien : cliquer sur la page où l'on est
   déjà est la manière la plus simple de faire douter quelqu'un. */
.langues__actuelle { color: var(--accent); font-weight: 700; cursor: default; }
/* En ligne on montre les codes ; dépliés, les noms entiers — « Nederlands »
   se reconnaît d'un coup d'œil, « NL » se devine. */
.langues__nom { display: none; }

.langues__bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-height: 40px; min-width: 46px; padding: 0 var(--e2);
  background: none; border: 1px solid var(--bord); border-radius: var(--rayon);
  color: var(--texte-doux); font: inherit; font-size: 12px; font-weight: 700;
  letter-spacing: .06em; cursor: pointer;
}
.langues__bouton:hover { color: var(--texte); border-color: var(--accent); }
/* 🔴 Sans cette ligne, le bouton s'affiche AVANT que app.js ne replie quoi que
   ce soit : notre « display » d'auteur écrase le « [hidden] { display:none } »
   du navigateur, qui est une règle d'agent utilisateur et perd toujours. Le
   site a déjà montré ses DEUX logos côte à côte pour cette raison exacte. */
.langues__bouton[hidden] { display: none; }
.langues__globe { flex: 0 0 auto; opacity: .85; }
.langues[data-ouvert] .langues__bouton { color: var(--texte); border-color: var(--accent); }

/* Replié : le panneau tombe sous la barre, aligné à droite.
   🔴 « fixed » et non « absolute » : la barre de navigation voisine défile en
   largeur, et un panneau posé dans ce flux serait rogné par son débordement. */
.langues[data-repliable] .langues__liste {
  display: none; position: fixed; top: 56px; right: var(--e3);
  flex-direction: column; align-items: stretch; gap: 2px; min-width: 196px;
  padding: var(--e2); background: var(--surface-plein);
  border: 1px solid var(--bord); border-radius: var(--rayon);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .42); z-index: 60;
}
.langues[data-repliable][data-ouvert] .langues__liste { display: flex; }
.langues[data-repliable] .langues__liste a,
.langues[data-repliable] .langues__actuelle {
  display: flex; align-items: center; gap: var(--e3);
  min-height: 44px; padding: 0 var(--e3);
  font-size: var(--t-sm); letter-spacing: 0;
}
.langues[data-repliable] .langues__code {
  min-width: 2.2em; font-size: 12px; font-weight: 700; letter-spacing: .06em; opacity: .7;
}
.langues[data-repliable] .langues__nom { display: inline; }

@media (min-width: 560px) {
  .langues[data-repliable] .langues__bouton { display: none; }
  .langues[data-repliable] .langues__liste {
    display: flex; position: static; flex-direction: row; align-items: center;
    gap: var(--e2); min-width: 0; padding: 0;
    background: none; border: 0; box-shadow: none;
  }
  .langues[data-repliable] .langues__liste a,
  .langues[data-repliable] .langues__actuelle {
    display: inline-flex; min-height: 0; padding: 5px 6px;
    font-size: 12px; letter-spacing: .06em;
  }
  .langues[data-repliable] .langues__code { min-width: 0; opacity: 1; }
  .langues[data-repliable] .langues__nom { display: none; }
}

/* ── Boutons ─────────────────────────────────────────────────────────────── */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: 48px;                 /* la cible tactile confortable */
  padding: var(--e3) var(--e5);
  border: 1px solid transparent; border-radius: var(--rayon);
  font: inherit; font-weight: 600; line-height: 1.2;
  cursor: pointer; text-align: center;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.bouton--principal { background: var(--accent); color: var(--sur-accent); }
.bouton--principal:hover { background: var(--accent-fort); color: var(--sur-accent); text-decoration: none; }
.bouton--fantome { background: transparent; color: var(--texte); border-color: var(--bord); }
.bouton--fantome:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.bouton--texte { background: none; border: none; color: var(--texte-doux); min-height: 40px; padding: var(--e2) var(--e3); }
.bouton--texte:hover { color: var(--texte); }
.bouton[disabled] { opacity: .5; cursor: not-allowed; }
.bouton--large { width: 100%; }

/* ── Mise en avant ───────────────────────────────────────────────────────── */
.une { padding: var(--e6) 0 var(--e5); }
@media (min-width: 700px) { .une { padding: var(--e7) 0 var(--e6); } }
.une__grille { display: grid; gap: var(--e5); }
/* ⚠ Sur téléphone, la couverture occupait un tiers de l'écran AVANT le titre.
   Quand elle est vide — cas le plus courant au lancement — c'est un grand
   rectangle creux qui repousse la seule chose qui donne envie de lire :
   l'accroche. Elle est donc plus petite tant qu'on n'a pas la place. */
.une__couverture {
  width: 132px; aspect-ratio: 2 / 3; border-radius: var(--rayon);
  object-fit: cover; border: 1px solid var(--bord); background: var(--surface-plein);
}
@media (min-width: 480px) { .une__couverture { width: 168px; } }
.une__etiquette { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .14em; color: var(--accent); font-weight: 700; }
.une__titre { font-family: var(--serif); font-size: var(--t-3xl); line-height: 1.12; margin: var(--e3) 0 var(--e4); }
.une__accroche {
  font-family: var(--serif); font-size: var(--t-lg); line-height: 1.5;
  color: var(--texte); margin: 0 0 var(--e5); max-width: 30em;
}
.une__meta { display: flex; flex-wrap: wrap; gap: var(--e3); color: var(--texte-doux); font-size: var(--t-sm); margin-bottom: var(--e5); }

/* ── Rythme de parution ───────────────────────────────────────────────────
   La promesse du feuilleton, tout en haut et sur chaque visite. Une ligne,
   pas un encadré : elle informe, elle ne réclame pas l'attention avant le
   roman lui-même. Les jours portent l'accent — c'est la seule chose que le
   lecteur a besoin de retenir. */
.rythme {
  margin: 0; padding: var(--e4) 0 0;
  font-size: var(--t-sm); color: var(--texte-doux);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e2);
}
.rythme strong { color: var(--accent); font-weight: 700; }
/* ⚠ À 375 px la ligne passe en deux : le point de séparation restait
   orphelin en fin de première ligne. Il n'apparaît que s'il sépare
   vraiment quelque chose. */
.rythme__pt { display: none; }
@media (min-width: 700px) { .rythme__pt { display: inline; color: var(--bord); } }

/* ── Prochaine sortie ─────────────────────────────────────────────────────
   L'encadré d'annonce, tout en haut de l'accueil, AU-DESSUS du bloc « à la
   une ». Il ne doit pas lui faire concurrence : couverture plus petite
   (96 px contre 132), titre au calibre d'une section et non d'un héros.
   ⚠ Aucun lien, aucune zone cliquable : un roman programmé n'est pas encore
   lisible. Un encadré qui appelle le clic promet une page qui n'existe pas.
   🔴 Aucune couleur en dur : tout passe par les jetons, donc le thème clair
   suit sans une ligne de plus. */
.sortie { padding: var(--e5) 0 0; }

.sortie__grille {
  display: grid; grid-template-columns: auto 1fr;
  gap: var(--e4); align-items: start;
  background: var(--surface-plein);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: var(--e4);
}
@media (min-width: 700px) { .sortie__grille { gap: var(--e5); padding: var(--e5); } }

.sortie__couv img,
.sortie__couv .couv-vide {
  display: block; width: 96px; aspect-ratio: 2 / 3;
  border-radius: calc(var(--rayon) - 4px);
  object-fit: cover; border: 1px solid var(--bord);
  background: var(--surface-plein);
}
@media (min-width: 480px) { .sortie__couv img, .sortie__couv .couv-vide { width: 120px; } }

/* ⚠ Vu à 375 px : la couverture fixe la hauteur de la rangée, et la date —
   reléguée à la rangée suivante — décrochait du texte avec un trou de 40 px.
   La couverture court donc sur les deux rangées tant que la date est dessous. */
.sortie__couv { grid-row: 1 / span 2; }

/* ⚠ Sans min-width:0, un titre long refuse de se couper et pousse la grille :
   débordement horizontal à 375 px, vu à la capture. */
.sortie__texte { min-width: 0; }

.sortie__kicker {
  margin: 0 0 var(--e2); font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--accent); font-weight: 700;
}
.sortie__titre {
  font-family: var(--serif); font-size: var(--t-xl); line-height: 1.15;
  margin: 0; overflow-wrap: break-word;
}
@media (min-width: 700px) { .sortie__titre { font-size: var(--t-2xl); } }

.sortie__auteur { margin: var(--e2) 0 0; color: var(--texte-doux); font-size: var(--t-sm); }

/* ⚠ Vu à 1920 px : le bandeau tenait toute la largeur avec son contenu tassé
   à gauche sur 40 % — il sonnait creux. La date prend donc sa propre colonne
   à droite dès qu'il y a la place : deux ancres au lieu d'une, et l'espace
   sert à quelque chose. En dessous, elle repasse sous le texte. */
.sortie__quand {
  grid-column: 2; margin: var(--e3) 0 0;
  font-size: var(--t-sm); color: var(--texte);
  display: flex; flex-wrap: wrap; gap: var(--e1) var(--e3);
}
@media (min-width: 700px) {
  .sortie__grille { grid-template-columns: auto 1fr auto; align-items: center; }
  .sortie__couv { grid-row: auto; }
  .sortie__quand {
    grid-column: 3; margin: 0; justify-self: end; text-align: right;
    flex-direction: column; align-items: flex-end; gap: var(--e1);
  }
}
.sortie__quand p { margin: 0; }
.sortie__lien { font-size: var(--t-sm); }

/* ── Compte à rebours ─────────────────────────────────────────────────────
   Deux tailles, un seul composant. En grand sur la page des sorties, en ligne
   partout ailleurs. Les chiffres sont en chasse fixe (`tabular-nums`) : sans
   cela la ligne tremble à chaque seconde, parce qu'un « 1 » est plus étroit
   qu'un « 8 » et que toute la ligne se recale. */
.rebours { display: flex; flex-wrap: wrap; gap: var(--e2); margin-top: var(--e4); }
.rebours__bloc {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 52px; padding: var(--e2) var(--e2) 5px;
  background: var(--fond); border: 1px solid var(--bord);
  border-radius: calc(var(--rayon) - 4px);
}
.rebours__n {
  font-size: var(--t-lg); font-weight: 700; line-height: 1.05;
  font-variant-numeric: tabular-nums; color: var(--accent);
}
.rebours__u {
  margin-top: 2px; font-size: 10px; line-height: 1.2;
  text-transform: uppercase; letter-spacing: .1em; color: var(--texte-doux);
}
.rebours__abr { display: none; }

/* En ligne : les libellés entiers prendraient trois lignes sur un téléphone. */
.rebours--compact { gap: var(--e3); margin-top: var(--e2); }
.rebours--compact .rebours__bloc {
  flex-direction: row; align-items: baseline; gap: 2px;
  min-width: 0; padding: 0; background: none; border: 0;
}
.rebours--compact .rebours__n { font-size: var(--t-sm); }
.rebours--compact .rebours__u { display: none; }
.rebours--compact .rebours__abr {
  display: inline; font-size: var(--t-xs); color: var(--texte-doux);
}
/* L'heure dite, le décompte s'efface et laisse la place au lien. */
.rebours--fini { display: none; }
.rebours-sorti {
  display: inline-flex; align-items: center; gap: var(--e2);
  margin-top: var(--e3); font-size: var(--t-sm); font-weight: 600; color: var(--accent);
}

/* ── Les sorties à venir ──────────────────────────────────────────────────
   Des cartes larges, pas une grille de couvertures : ce qu'on vient chercher
   ici, c'est une DATE. La couverture n'est qu'un repère. */
.avenir { display: grid; gap: var(--e4); }
@media (min-width: 860px) { .avenir { grid-template-columns: 1fr 1fr; gap: var(--e5); } }
.avenir__carte {
  display: grid; grid-template-columns: auto 1fr; gap: var(--e4);
  align-items: start; padding: var(--e4);
  background: var(--surface-plein); border: 1px solid var(--bord);
  border-radius: var(--rayon);
}
.avenir__couv img, .avenir__couv .couv-vide {
  display: block; width: 84px; aspect-ratio: 2 / 3; object-fit: cover;
  border: 1px solid var(--bord); border-radius: calc(var(--rayon) - 4px);
  background: var(--fond);
}
@media (min-width: 480px) { .avenir__couv img, .avenir__couv .couv-vide { width: 104px; } }
/* Sans min-width:0, un titre long pousse la grille hors de l'écran à 375 px. */
.avenir__corps { min-width: 0; }
.avenir__quand {
  margin: 0 0 var(--e2); font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: .1em; color: var(--texte-doux);
}
/* ⚠ Vu à 375 px : « 20 h » se coupait entre le nombre et l'unité, et le « h »
   se retrouvait seul sur sa ligne. Une heure ne se coupe jamais. */
/* ⚠ Le point médian appartient à l'HEURE, pas à la date : écrit dans le HTML,
   il restait suspendu en fin de ligne quand l'heure passait à la suivante —
   visible en néerlandais, où « dinsdag 22 september » est plus long. Porté par
   le ::before du strong, il s'en va avec elle. */
.avenir__quand strong { color: var(--accent); white-space: nowrap; margin-left: .4em; }
.avenir__quand strong::before { content: "· "; color: var(--texte-doux); }
/* ⚠ À 375 px il reste 219 px à droite de la couverture : « MARDI 22 SEPTEMBRE
   · 20 H » en capitales espacées y tenait sur deux lignes, le point médian
   suspendu en fin de première. En bas de casse, la ligne entière passe. */
@media (max-width: 479px) {
  .avenir__quand { text-transform: none; letter-spacing: .01em; font-size: var(--t-sm); }
  /* Deux lignes ASSUMÉES plutôt qu'une ligne qui se coupe où elle peut : la
     date, puis l'heure en dessous. Le point médian n'a plus lieu d'être — un
     séparateur en début de ligne ne sépare plus rien. */
  .avenir__quand strong { display: block; margin-left: 0; }
  .avenir__quand strong::before { content: none; }
}
.avenir__nom {
  font-family: var(--serif); font-size: var(--t-lg); line-height: 1.2;
  margin: 0; overflow-wrap: break-word;
}
.avenir__nom a { color: inherit; }
.avenir__auteur { margin: var(--e2) 0 0; font-size: var(--t-sm); color: var(--texte-doux); }
.avenir__accroche {
  margin: var(--e3) 0 0; font-size: var(--t-sm); line-height: 1.55; color: var(--texte-doux);
}
.avenir__detail { margin: var(--e2) 0 0; font-size: var(--t-xs); color: var(--texte-doux); }
/* Le décompte court sous la couverture ET le texte : à 375 px il ne reste que
   190 px à droite de la couverture, où les quatre pastilles tombaient sur deux
   lignes. Sur toute la largeur, elles tiennent en une. */
.avenir__carte > .rebours { grid-column: 1 / -1; margin-top: var(--e2); }


/* ── Sections et rangées ─────────────────────────────────────────────────── */
.section { padding: var(--e6) 0; border-top: 1px solid var(--bord); }
.section__entete { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e4); margin-bottom: var(--e5); }
.section__titre { font-size: var(--t-xl); margin: 0; letter-spacing: -0.01em; }
.section__lien { font-size: var(--t-sm); color: var(--texte-doux); white-space: nowrap; }

/* 🔴 Vu à 1280 px : avec « 1fr », les trois cartes d'une rangée se partageaient
   toute la largeur — des couvertures de 340 × 510 px, absurdes. Une rangée qui
   DÉFILE garde des cartes de taille fixe ; c'est le nombre de cartes visibles
   qui change avec l'écran, pas leur taille. */
.rangee {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: 132px;
  gap: var(--e4); overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: var(--e3);
  /* La barre de défilement reste discrète mais existe : sans elle, personne
     ne devine qu'il y a d'autres romans à droite. */
  scrollbar-width: thin;
}
.rangee > * { scroll-snap-align: start; }
.grille { display: grid; gap: var(--e5); grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

/* ── Carte roman ─────────────────────────────────────────────────────────── */
.carte { display: block; color: inherit; }
.carte:hover { text-decoration: none; }
.carte__couverture {
  width: 100%; aspect-ratio: 2 / 3; border-radius: var(--rayon); object-fit: cover;
  border: 1px solid var(--bord); background: var(--surface-plein);
  transition: border-color .15s ease;
}
.carte:hover .carte__couverture, .carte:focus-visible .carte__couverture { border-color: var(--accent); }
.carte__titre { font-family: var(--serif); font-size: var(--t-base); line-height: 1.3; margin: var(--e3) 0 var(--e1); }
.carte__sous { font-size: var(--t-xs); color: var(--texte-doux); }

/* ── La pastille « ce roman s'écoute » ───────────────────────────────────
   Une couverture porte déjà un titre, un nom d'auteur et souvent une image
   chargée : le repère audio doit se lire d'un coup d'œil sans entrer en
   concurrence avec elle. D'où un disque doré posé dans le coin, à la couleur
   d'action du site — le même doré que les boutons, pour qu'on comprenne tout de
   suite qu'il s'agit d'une possibilité offerte, pas d'une décoration. */
.vignette { position: relative; display: block; }
.vignette > img, .vignette > div { display: block; }

.vignette__audio {
  position: absolute; top: 8px; right: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 999px;
  background: var(--accent); color: var(--sur-accent);
  /* ⭐ Le halo de la couleur du FOND détache la pastille de n'importe quelle
     couverture — claire, sombre ou chargée. Sans lui, elle disparaissait sur
     les couvertures dorées. */
  box-shadow: 0 0 0 2px var(--fond), 0 2px 10px rgba(0, 0, 0, .35);
  /* ⚠ La pastille est POSÉE sur un lien : sans ceci, elle avale le clic au
     milieu de la couverture, là où le doigt vise naturellement. */
  pointer-events: none;
}
.ico-casque { width: 18px; height: 18px; display: block; }

/* Sur une grande couverture (fiche, à la une), le pictogramme seul se lit
   comme un ornement : on écrit le mot. */
.vignette__audio--texte {
  width: auto; height: auto; gap: 6px;
  top: 10px; right: 10px; padding: 6px 12px 6px 10px;
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .02em;
}
.vignette__audio--texte .ico-casque { width: 16px; height: 16px; }

/* Couverture de secours : une plaque sobre, pas un carré gris cassé. */
.couv-vide {
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: var(--e4); font-family: var(--serif); font-size: var(--t-sm);
  color: var(--texte-doux); background: var(--surface-plein);
}

/* ── Progression ─────────────────────────────────────────────────────────── */
.jauge { height: 3px; background: var(--bord); border-radius: 2px; overflow: hidden; margin-top: var(--e2); }
.jauge__barre { height: 100%; background: var(--accent); }

/* ── Fiche roman ─────────────────────────────────────────────────────────── */
.fiche { padding: var(--e6) 0; }
.fiche__grille { display: grid; gap: var(--e5); }
.fiche__couverture { width: 180px; aspect-ratio: 2/3; border-radius: var(--rayon); object-fit: cover; border: 1px solid var(--bord); }
.fiche__titre { font-family: var(--serif); font-size: var(--t-2xl); line-height: 1.15; margin: 0 0 var(--e2); }
.fiche__auteur { color: var(--texte-doux); font-size: var(--t-sm); margin: 0 0 var(--e4); }
.fiche__resume { font-size: var(--t-base); line-height: 1.65; max-width: var(--lecture); }
.etiquettes { display: flex; flex-wrap: wrap; gap: var(--e2); margin: var(--e4) 0; }
.etiquette {
  font-size: var(--t-xs); padding: var(--e2) var(--e3); border-radius: 999px;
  border: 1px solid var(--bord); color: var(--texte-doux);
}
.etiquette:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

.sommaire { list-style: none; margin: var(--e5) 0 0; padding: 0; }
.sommaire li { border-bottom: 1px solid var(--bord); }
.sommaire a { display: flex; align-items: center; gap: var(--e3); padding: var(--e3) 0; color: var(--texte); }
.sommaire a:hover { color: var(--accent); text-decoration: none; }
.sommaire__num { font-variant-numeric: tabular-nums; color: var(--texte-doux); font-size: var(--t-sm); min-width: 2.5em; }
.sommaire__titre { flex: 1; }
.sommaire__cadenas { color: var(--texte-doux); font-size: var(--t-xs); }

/* ── LECTURE ─────────────────────────────────────────────────────────────
   Ici, tout ce qui n'est pas le texte doit s'effacer.                      */
.lecture { padding: var(--e5) 0 var(--e8); }
.lecture__entete { text-align: center; margin-bottom: var(--e6); }
.lecture__roman { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .14em; color: var(--texte-doux); }
.lecture__roman:hover { color: var(--accent); }
.lecture__num { font-size: var(--t-sm); color: var(--accent); margin-top: var(--e3); font-variant-numeric: tabular-nums; }
.lecture__titre { font-family: var(--serif); font-size: var(--t-2xl); line-height: 1.2; margin: var(--e2) 0 0; }

/* ── Les formules ────────────────────────────────────────────────────────
   Deux colonnes sur écran, deux blocs empilés au téléphone. La vedette passe
   EN PREMIER sur mobile : c'est le premier bloc qui se lit, pas celui de droite. */
.formules {
  /* `stretch` et non `start` : sans ça les deux cartes ont des hauteurs
     différentes et les boutons ne s'alignent pas — l'œil lit ce décalage comme
     un défaut de fabrication avant même de lire les prix. */
  display: grid; gap: var(--e4); align-items: stretch;
  max-width: 860px; margin: 0 auto var(--e5);
}
@media (min-width: 760px) { .formules { grid-template-columns: 1fr 1fr; } }
/* ⭐ 11/10/2026 — une seule formule (Écoute retirée de la vente) : centrée, pas collée à gauche. */
@media (min-width: 760px) { .formules--une { grid-template-columns: minmax(0, 420px); justify-content: center; } }

.formule {
  position: relative; display: flex; flex-direction: column;
  padding: var(--e5) var(--e4); border: 1px solid var(--bord);
  border-radius: var(--rayon); background: var(--surface-plein);
}
.formule--vedette { border-color: var(--accent); border-width: 2px; order: -1; }
@media (min-width: 760px) { .formule--vedette { order: 0; } }

.formule__ruban {
  position: absolute; top: calc(-1 * var(--e3)); left: var(--e4);
  margin: 0; padding: 2px var(--e3); border-radius: 999px;
  background: var(--accent); color: var(--sur-accent);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.formule__nom {
  margin: 0 0 var(--e2); font-family: var(--serif); font-size: var(--t-lg);
}
/* ⚠ `.mur__prix` n'a pas de marge déclarée : un <p> en --t-3xl hérite donc de
   1em, soit près de 50 px en haut ET en bas. Le prix flottait au milieu d'un
   trou. On la reprend ici, sans toucher aux autres usages du prix. */
.formule .mur__prix { margin: var(--e3) 0 var(--e2); }
/* « 12,99 € / mois » ne tient pas dans une carte étroite : « / mois » passait à
   la ligne avec la hauteur de ligne du GRAND chiffre, et laissait un trou de
   70 px sous le prix. Hauteur resserrée, et « / mois » ne se coupe plus. */
.formule .mur__prix { line-height: 1.15; }
.formule .mur__prix small { white-space: nowrap; }
.formule .mur__liste { margin: var(--e4) 0; }
.formule .mur__liste { flex: 1 1 auto; }
.formule__deja {
  margin: 0; padding: var(--e3); text-align: center;
  font-size: var(--t-sm); color: var(--texte-doux);
  border: 1px dashed var(--bord); border-radius: var(--rayon);
}

/* ── Écoute ──────────────────────────────────────────────────────────────
   Posé sur la même colonne que le roman (voir la note sur --lecture plus bas :
   34em se mesure sur la police de l'élément, pas sur celle du texte). */
.ecoute {
  max-width: calc(34 * var(--taille-lecture, 1.15rem));
  margin: 0 auto var(--e5); padding: var(--e4);
  border: 1px solid var(--bord); border-radius: var(--rayon);
  background: var(--surface-plein);
}
.ecoute__haut { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e3); }
.ecoute__titre { font-weight: 600; font-size: var(--t-sm); }
.ecoute__duree { font-size: var(--t-xs); color: var(--texte-doux); white-space: nowrap; }
.ecoute__voix {
  display: block; margin-top: 2px; font-weight: 400; font-size: var(--t-xs); color: var(--texte-doux);
}
.ecoute__lecteur { width: 100%; margin-top: var(--e3); }
.ecoute__bas {
  /* ⚠ `wrap` obligatoire : à 375 px, « Vitesse », les trois pastilles et la case
     d'enchaînement ne tiennent pas sur une ligne — sans lui, la case sortait du
     cadre au lieu de passer dessous. */
  display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap;
  margin-top: var(--e3); font-size: var(--t-xs); color: var(--texte-doux);
}

/* ── Enchaîner les chapitres ─────────────────────────────────────────────
   Un roman s'écoute comme un disque : la case est cochée d'office, et son
   libellé est cliquable (le <label> enveloppe la case) pour une cible large
   au doigt. */
.ecoute__enchainer {
  display: inline-flex; align-items: center; gap: var(--e2);
  margin-left: auto; min-height: 44px; cursor: pointer; user-select: none;
}
.ecoute__enchainer input { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; }
@media (max-width: 480px) {
  /* Sur téléphone la case passe à la ligne : collée à droite sous les pastilles,
     elle aurait l'air d'appartenir à la vitesse. */
  .ecoute__enchainer { margin-left: 0; width: 100%; }
}

/* ── Reprendre à la seconde près ─────────────────────────────────────────
   Le bouton porte l'heure exacte : « Reprendre l'écoute à 12:34 » dit à
   l'auditeur ce qui va se passer, là où « Reprendre » le laisse craindre de
   repartir du début. */
.ecoute__reprise {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--e3);
  margin-top: var(--e3);
}
.ecoute__reprise[hidden] { display: none; }
.ecoute__reprendre { font-variant-numeric: tabular-nums; }
.ecoute__depuis-debut { font-size: var(--t-xs); min-height: 44px; }

/* L'état de l'enchaînement : « Chapitre suivant… », un échec, le mur, la fin.
   Discret mais jamais muet — un enchaînement silencieux qui s'arrête passe
   pour une panne du site. */
.ecoute__etat {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--e2);
  margin: var(--e3) 0 0; font-size: var(--t-xs); color: var(--texte-doux);
}
.ecoute__etat[hidden] { display: none; }
.ecoute__etat-action { font-size: var(--t-xs); }
.ecoute__etat-action[hidden] { display: none; }
.ecoute__vitesses { display: flex; gap: var(--e1); }
.ecoute__vitesse {
  border: 1px solid var(--bord); background: none; color: var(--texte-doux);
  border-radius: 999px; padding: 2px var(--e2); font: inherit; cursor: pointer;
  /* ⚠ 44 px de haut au doigt : en dessous, on rate la cible une fois sur trois. */
  min-height: 32px; min-width: 44px;
}
.ecoute__vitesse.est-actif { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.ecoute__vitesses { flex-wrap: wrap; }
@media (max-width: 480px) {
  /* Six vitesses depuis le 22/09 : à 375 px la pastille « 2× » sortait du
     cadre. Pastilles resserrées, sur toute la largeur. */
  .ecoute__vitesses { gap: 4px; width: 100%; justify-content: space-between; }
  .ecoute__vitesse { min-width: 40px; padding: 2px 6px; }
}
.ecoute__erreur { margin: var(--e3) 0 0; font-size: var(--t-xs); color: #D8654F; }
.ecoute__erreur[hidden] { display: none; }

/* ── Le lecteur au repos (27/09/2026) ────────────────────────────────────
   🔴 Mesuré sur la pub : 489 des 765 arrivés au ch.1 repartaient en moins de
   30 s. Sur iPhone, TOUT le premier écran était le lecteur (vitesses, arrêt
   automatique, mode écoute) et la première phrase du roman restait sous le
   bandeau cookies. Au repos, le bloc tient sur une ligne — ▶, « Écouter ce
   chapitre », la durée — et le texte commence juste dessous. Les réglages
   reviennent au premier « play » (app.js retire la classe). */
.ecoute--repos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e4); padding: var(--e3) var(--e4); }
.ecoute--repos .commandes { order: -1; margin-top: 0; }
.ecoute--repos .commandes__saut,
.ecoute--repos .piste,
.ecoute--repos .ecoute__bas { display: none; }
.ecoute--repos .commandes__lecture { width: 52px; height: 52px; }
.ecoute--repos .commandes__lecture .ico { width: 24px; height: 24px; }
.ecoute--repos .ecoute__haut { flex: 1 1 0; min-width: 0; align-items: center; }
.ecoute--repos .ecoute__reprise,
.ecoute--repos .ecoute__etat,
.ecoute--repos .ecoute__erreur { flex-basis: 100%; }

/* Le paragraphe en cours de lecture. Un fond très léger et un filet doré :
   assez pour suivre du coin de l'œil, jamais assez pour gêner la lecture —
   un surlignage franc fatigue au bout de deux minutes. */
.texte p.est-dit {
  background: var(--accent-sourd);
  box-shadow: -3px 0 0 var(--accent);
  border-radius: 0 3px 3px 0;
  /* Le texte touchait le bord du fond : on lui donne de l'air sans décaler la
     colonne, sinon chaque paragraphe lu ferait sauter la mise en page. */
  padding: var(--e2) var(--e3);
  margin-left: calc(-1 * var(--e3));
  margin-right: calc(-1 * var(--e3));
  transition: background .25s ease;
}
@media (prefers-reduced-motion: reduce) { .texte p.est-dit { transition: none; } }
.texte p.est-cliquable { cursor: pointer; }

.reprendre-suivi {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--e5) + env(safe-area-inset-bottom, 0px));
  z-index: 40; border: 0; border-radius: 999px;
  padding: var(--e3) var(--e5); min-height: 44px;
  background: var(--accent); color: var(--sur-accent);
  font: inherit; font-size: var(--t-sm); font-weight: 600; cursor: pointer;
  /* Une pilule qui passe sur deux lignes n'a plus l'air d'un bouton. */
  white-space: nowrap; max-width: calc(100vw - var(--e6));
  box-shadow: 0 4px 16px rgba(0,0,0,.28);
}
.reprendre-suivi[hidden] { display: none; }


/* ── Les commandes d'écoute (22/09/2026) ─────────────────────────────────
   Elles remplacent le lecteur du navigateur — une barre blanche au milieu
   d'une page sombre, différente sur chaque téléphone. Les mêmes commandes
   servent au bloc, à la barre du bas et au mode écoute. */
.ico { width: 24px; height: 24px; display: block; flex: none; }
.commandes { margin-top: var(--e4); }
.commandes[hidden] { display: none; }
.commandes__boutons {
  display: flex; align-items: center; justify-content: center; gap: var(--e5);
}
.commandes__saut, .commandes__lecture, .barre-ecoute__bouton, .scene-ecoute__fermer {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; color: var(--texte); cursor: pointer;
  border-radius: 999px; padding: 0; font: inherit;
  transition: background-color .15s ease, color .15s ease;
}
.commandes__saut { width: 48px; height: 48px; color: var(--texte-doux); }
.commandes__saut:hover { color: var(--texte); background: var(--accent-sourd); }
.commandes__saut .ico { width: 28px; height: 28px; }
.commandes__lecture {
  width: 60px; height: 60px; background: var(--accent); color: var(--sur-accent);
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.commandes__lecture:hover { background: var(--accent-fort); }
.commandes__lecture .ico { width: 28px; height: 28px; }
/* Le triangle de lecture est optiquement décalé : on le recentre à l'œil. */
.commandes__lecture .ico--lecture, .barre-ecoute__lecture .ico--lecture { transform: translateX(2px); }
[data-ec="lecture"] .ico--pause { display: none; }
[data-ec="lecture"].est-en-lecture .ico--pause { display: block; }
[data-ec="lecture"].est-en-lecture .ico--lecture { display: none; }

/* L'invitation, quand on arrive de la fiche par « Écouter » : un halo, pas
   une animation sans fin — il s'éteint dès que le son part. */
.est-invite { box-shadow: 0 0 0 4px var(--accent-sourd), 0 0 0 7px var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .commandes__lecture.est-invite { animation: invite 1.6s ease-in-out 3; }
  @keyframes invite { 50% { box-shadow: 0 0 0 8px var(--accent-sourd), 0 0 0 11px var(--accent); } }
}

.piste {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--e3);
  margin-top: var(--e3); font-size: var(--t-xs); color: var(--texte-doux);
  font-variant-numeric: tabular-nums;
}
.piste__temps { min-width: 3.2em; }
.piste__temps--total { text-align: right; }

/* Le curseur de position. La partie écoutée est peinte par --avance, posée
   par le JavaScript : aucun navigateur ne colore seul la partie parcourue. */
.piste__barre, .barre-ecoute__piste {
  -webkit-appearance: none; appearance: none; width: 100%; margin: 0;
  height: 28px; background: transparent; cursor: pointer; --avance: 0%;
}
.piste__barre::-webkit-slider-runnable-track, .barre-ecoute__piste::-webkit-slider-runnable-track {
  height: 4px; border-radius: 4px;
  background: linear-gradient(to right, var(--accent) var(--avance), var(--bord) var(--avance));
}
.piste__barre::-moz-range-track, .barre-ecoute__piste::-moz-range-track {
  height: 4px; border-radius: 4px;
  background: linear-gradient(to right, var(--accent) var(--avance), var(--bord) var(--avance));
}
.piste__barre::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px;
  border-radius: 50%; background: var(--accent); border: 2px solid var(--surface-plein);
}
.piste__barre::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface-plein);
}
.piste__barre:focus-visible, .barre-ecoute__piste:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.ecoute__options {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: var(--e2) var(--e4); width: 100%;
}
.ecoute__options[hidden] { display: none; }
.ecoute__scene {
  display: inline-flex; align-items: center; gap: var(--e2); min-height: 44px; font-size: var(--t-xs);
  padding-left: 0; padding-right: 0;   /* aligné sur « Arrêt automatique », pas en retrait */
}
.ecoute__scene .ico { width: 18px; height: 18px; }

/* L'arrêt automatique : un <select> natif — au doigt, c'est la liste du
   téléphone qui s'ouvre, la plus facile à manier. */
.minuterie { display: inline-flex; align-items: center; gap: var(--e2); }
.minuterie__lib { font-size: var(--t-xs); color: var(--texte-doux); }
.minuterie__choix {
  /* ⚠ 16 px minimum : en dessous, iOS zoome la page au toucher. */
  font: inherit; font-size: 1rem; min-height: 40px; padding: 0 var(--e3);
  border: 1px solid var(--bord); border-radius: 999px;
  background: var(--surface-plein); color: var(--texte); cursor: pointer;
}
.minuterie-etat[hidden] { display: none; }

/* ── La barre d'écoute ───────────────────────────────────────────────────
   Collée en bas, à la largeur du texte sur grand écran. Elle réserve sa
   place (padding du body) : le pied de page ne passe jamais dessous. */
.barre-ecoute {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  background: var(--surface-plein); border-top: 1px solid var(--bord);
  box-shadow: 0 -6px 20px rgba(0,0,0,.22);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.barre-ecoute[hidden] { display: none; }
.barre-ecoute__piste {
  display: block; height: 16px; margin-top: -8px;
  position: relative;
}
.barre-ecoute__piste::-webkit-slider-thumb {
  -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4px; border-radius: 50%;
  background: var(--accent); opacity: 0; transition: opacity .15s;
}
.barre-ecoute__piste:hover::-webkit-slider-thumb, .barre-ecoute__piste:focus-visible::-webkit-slider-thumb { opacity: 1; }
.barre-ecoute__piste::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--accent); }
.barre-ecoute__corps {
  display: flex; align-items: center; gap: var(--e1);
  max-width: calc(34 * var(--taille-lecture, 1.15rem) + 2 * var(--e4));
  margin: 0 auto; padding: 0 var(--e3) var(--e2);
}
.barre-ecoute__info {
  flex: 1 1 auto; min-width: 0; min-height: 48px; text-align: left;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  border: 0; background: none; color: var(--texte); font: inherit; cursor: pointer;
  padding: 0 var(--e2) 0 0;
}
.barre-ecoute__ligne { display: flex; align-items: baseline; gap: var(--e2); min-width: 0; }
.barre-ecoute__num {
  flex: none; color: var(--accent); font-size: var(--t-sm); font-weight: 700; font-variant-numeric: tabular-nums;
}
.barre-ecoute__num::after { content: " ·"; color: var(--texte-doux); font-weight: 400; }
.barre-ecoute__titre {
  font-size: var(--t-sm); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.barre-ecoute__temps {
  font-size: var(--t-xs); color: var(--texte-doux); font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.barre-ecoute__temps .minuterie-etat { margin-left: var(--e2); color: var(--accent); }
.barre-ecoute__temps .minuterie-etat::before { content: "· "; color: var(--texte-doux); }
.barre-ecoute__bouton { width: 44px; height: 44px; flex: none; color: var(--texte-doux); }
.barre-ecoute__bouton:hover { color: var(--texte); background: var(--accent-sourd); }
.barre-ecoute__lecture { width: 48px; height: 48px; background: var(--accent); color: var(--sur-accent); }
.barre-ecoute__lecture:hover { background: var(--accent-fort); color: var(--sur-accent); }
.barre-ecoute__vitesse { font-size: var(--t-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 420px) {
  /* À 375 px, six boutons ne laissent plus rien au titre : la vitesse reste
     réglable dans le bloc et dans le mode écoute. */
  .barre-ecoute__vitesse { display: none; }
}
body.a-barre-ecoute { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
body.a-barre-ecoute .reprendre-suivi { bottom: calc(72px + var(--e3) + env(safe-area-inset-bottom, 0px)); }

/* ── Le mode écoute ──────────────────────────────────────────────────────
   Plein écran, sur le fond de la page. Le passage lu en grand caractère
   serif : on le lit de loin, téléphone posé sur la table. */
.scene-ecoute {
  position: fixed; inset: 0; z-index: 60; overflow-y: auto;
  background: var(--fond); color: var(--texte);
  padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
}
.scene-ecoute[hidden] { display: none; }
body.scene-ouverte { overflow: hidden; }
.scene-ecoute__cadre {
  position: relative; max-width: 560px; min-height: 100%; margin: 0 auto;
  padding: var(--e7) var(--e4) var(--e6);
  display: flex; flex-direction: column; gap: var(--e5);
}
.scene-ecoute__fermer {
  position: absolute; top: var(--e2); right: var(--e2); width: 48px; height: 48px; color: var(--texte-doux);
}
.scene-ecoute__fermer:hover { color: var(--texte); background: var(--accent-sourd); }
.scene-ecoute__tete { display: flex; align-items: center; gap: var(--e4); }
.scene-ecoute__couv {
  width: 88px; height: auto; aspect-ratio: 2 / 3; object-fit: cover; flex: none;
  border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.scene-ecoute__roman {
  margin: 0 0 var(--e1); font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase;
  color: var(--texte-doux);
}
.scene-ecoute__num {
  margin: 0 0 var(--e1); font-size: var(--t-sm); color: var(--accent); font-variant-numeric: tabular-nums;
}
.scene-ecoute__num[hidden] { display: none; }
.scene-ecoute__titre { margin: 0; font-family: var(--serif); font-size: var(--t-xl); line-height: 1.2; }
.scene-ecoute__passage {
  /* ⚠ Pas de flex: 1 — le filet doré suivrait la hauteur de l'écran au lieu
     de celle du passage. C'est la marge automatique des commandes qui les
     pousse en bas. */
  margin: auto 0; padding-left: var(--e4); border-left: 3px solid var(--accent);
  font-family: var(--serif); font-size: clamp(1.25rem, 1rem + 1.4vw, 1.625rem); line-height: 1.5;
}
.scene-ecoute__passage[hidden] { display: none; }
.scene-ecoute__commandes { margin-top: auto; }
/* Le passage prend la marge automatique du haut ET du bas : il se centre dans
   l'espace libre au lieu de coller à l'en-tête sur un grand écran. */
.scene-ecoute__passage + .scene-ecoute__commandes { margin-top: 0; }
.commandes__boutons--grand { gap: var(--e6); margin-top: var(--e4); }
.commandes__boutons--grand .commandes__lecture { width: 76px; height: 76px; }
.commandes__boutons--grand .commandes__lecture .ico { width: 34px; height: 34px; }
.commandes__boutons--grand .commandes__saut { width: 56px; height: 56px; }
.commandes__boutons--grand .commandes__saut .ico { width: 32px; height: 32px; }
.scene-ecoute__reglages {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: var(--e3); margin-top: var(--e5); font-size: var(--t-xs); color: var(--texte-doux);
}
.scene-ecoute__reglages .ecoute__vitesse { min-height: 40px; padding: 0 var(--e3); }
.scene-ecoute__minuterie { margin: var(--e3) 0 0; text-align: center; font-size: var(--t-xs); color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .commandes__saut, .commandes__lecture, .barre-ecoute__bouton { transition: none; }
}

.ecoute--verrou { border-style: dashed; background: var(--accent-sourd); }
.ecoute__vente { margin: var(--e3) 0; font-size: var(--t-sm); color: var(--texte-doux); }
.ecoute__action { display: inline-flex; }

/* ── Reprise de lecture ──────────────────────────────────────────────────
   Un fil doré à gauche plutôt qu'un encadré : le bandeau doit se voir sans
   couper la page en deux ni faire concurrence au texte du roman. Il disparaît
   de lui-même au bout de neuf secondes. */
.reprise {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e2) var(--e3);
  /* ⚠ Il doit tenir dans la MÊME colonne que le roman : posé sur la largeur de
     l'article, il partait 200 px à gauche du premier mot et cassait l'alignement
     — bien visible à partir de 1280 px. */
  /* 🔴 `--lecture` vaut 34em : sa largeur RÉELLE dépend de la taille de police
     de l'élément. Le bandeau écrit plus petit que le roman, il tombait 115 px
     trop étroit. On la recalcule sur la taille du TEXTE, ce qui la fait aussi
     suivre le réglage « Petit → Très grand » choisi par le lecteur. */
  max-width: calc(34 * var(--taille-lecture, 1.15rem));
  margin: 0 auto var(--e5); padding: var(--e3) var(--e4);
  border-left: 3px solid var(--accent);
  background: var(--accent-sourd);
  border-radius: 0 var(--rayon) var(--rayon) 0;
  font-size: var(--t-sm); color: var(--texte-doux);
  animation: reprise-entree .45s ease-out both;
}
/* 🔴 Une règle d'auteur bat celle du navigateur : sans cette ligne, le
   display:flex ci-dessus écraserait [hidden] et le bandeau s'afficherait
   toujours. Le même défaut nous avait déjà valu deux logos en en-tête. */
.reprise[hidden] { display: none; }
.reprise__texte { flex: 1 1 auto; }
.reprise__lien {
  flex: 0 0 auto; background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--accent); text-decoration: underline;
}
.reprise__lien:hover { color: var(--accent-fort); }

@keyframes reprise-entree { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .reprise { animation: none; } }

.texte {
  font-family: var(--serif);
  font-size: var(--taille-lecture, 1.15rem);
  line-height: var(--interligne-lecture, 1.75);
  max-width: var(--lecture);
  margin: 0 auto;
  hyphens: auto;
}
.texte p { margin: 0 0 1.35em; }
.texte p:first-of-type::first-letter { /* rien : pas de lettrine, ça gêne la lecture sur mobile */ }
.texte hr { border: 0; text-align: center; margin: 2em 0; }
.texte hr::before { content: "\2042"; color: var(--texte-doux); font-size: 1.2em; }
.texte h2, .texte h3 { font-size: 1.1em; margin: 1.8em 0 .8em; }
.texte blockquote { margin: 1.4em 0; padding-left: var(--e4); border-left: 2px solid var(--bord); color: var(--texte-doux); font-style: italic; }

.lecture__pied { max-width: var(--lecture); margin: var(--e8) auto 0; }
.lecture__nav { display: flex; gap: var(--e3); align-items: center; }
.lecture__nav .bouton--principal { flex: 1; }
/* 🔴 27/09/2026 — `.bouton { display: inline-flex }` écrasait l'attribut
   [hidden] : « Fin de l'histoire » s'affichait à côté de « Chapitre suivant »
   sur CHAQUE chapitre (et, au téléphone, élargissait la page à 417 px, ce qui
   poussait « Accepter » du bandeau cookies hors de l'écran). */
.bouton[hidden] { display: none; }
/* ⭐ 27/09/2026 — le bouton de suite est le geste principal de la page : plus
   haut, et il annonce la durée du chapitre suivant. */
.lecture__nav #lien-suivant { min-height: 56px; font-size: var(--t-base); }
.lecture__duree { font-weight: 400; opacity: .85; margin: 0 .15em; }
.a-suivre { text-align: center; margin-bottom: var(--e4); }
.a-suivre[hidden] { display: none; }
.a-suivre__num { margin: 0; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .14em; color: var(--accent); }
.a-suivre__titre { margin: var(--e2) 0 0; font-family: var(--serif); font-size: var(--t-xl, 1.5rem); line-height: 1.25; }

/* Réglages de confort : un tiroir, pas une barre permanente. */
.confort { border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--surface-plein); padding: var(--e4); margin-top: var(--e5); }
.confort__ligne { display: flex; align-items: center; gap: var(--e3); margin-bottom: var(--e3); }
.confort__ligne:last-child { margin-bottom: 0; }
.confort__etiq { font-size: var(--t-sm); color: var(--texte-doux); min-width: 7em; }
.confort__boutons { display: flex; gap: var(--e2); flex-wrap: wrap; }
.puce {
  min-height: 40px; padding: var(--e2) var(--e4); border-radius: var(--rayon);
  border: 1px solid var(--bord); background: transparent; color: var(--texte);
  font: inherit; font-size: var(--t-sm); cursor: pointer;
 white-space: nowrap; }
.puce[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-sourd); }

/* ── Paywall ─────────────────────────────────────────────────────────────── */
.mur { max-width: 32em; margin: var(--e7) auto; text-align: center; padding: 0 var(--e4); }
.mur__filet { height: 1px; background: linear-gradient(to right, transparent, var(--bord), transparent); margin-bottom: var(--e7); }
.mur__phrase { font-family: var(--serif); font-size: var(--t-2xl); line-height: 1.25; margin: 0 0 var(--e4); }
.mur__texte { color: var(--texte-doux); margin: 0 0 var(--e6); }
.mur__accroche { font-family: var(--serif); font-size: var(--t-lg); line-height: 1.35;
  color: var(--accent); margin: 0 0 var(--e4); max-width: 34ch; }
.mur__reste { color: var(--texte-doux); margin: 0 0 var(--e5); }
.mur__reste strong { color: var(--texte); }
/* ── Les deux formules du paywall ─────────────────────────────────────────
   Empilées sur téléphone, côte à côte dès qu'il y a la place. La formule mise
   en avant est bordée d'or ; l'autre reste sobre, sans jamais avoir l'air
   dégradée — un lecteur qui prend la moins chère est un abonné, pas un échec.
   ⚠ La largeur du mur passe de 32em à 46em quand il y a deux cartes : à 32em,
     deux colonnes donnaient des cartes de 15em où les libellés cassaient. */
.mur__catalogue { color: var(--texte-doux); margin: 0 0 var(--e6); font-size: var(--t-sm); }
.mur__catalogue strong { color: var(--texte); }
.mur__offres { display: grid; gap: var(--e4); }
@media (min-width: 720px) {
  .mur:has(.mur__offres--deux) { max-width: 46em; }
  .mur__offres--deux { grid-template-columns: 1fr 1fr; align-items: start; }
}
.mur__offre { border: 1px solid var(--bord); border-radius: var(--rayon); padding: var(--e5); background: var(--surface-plein); margin-bottom: 0; display: flex; flex-direction: column; }
.mur__offre--vedette { border-color: var(--accent); background: var(--accent-sourd); }
.mur__offre-nom { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .14em; color: var(--accent); font-weight: 700; margin: 0 0 var(--e2); }
/* Le bouton tombe au même niveau dans les deux cartes, même si l'une a une
   ligne d'avantage de plus : sinon les deux colonnes se décalent. */
.mur__offre .mur__liste { flex: 1 1 auto; }
/* ⭐ 31/10/2026 — « ou seulement ce roman » : un second choix, visible mais en retrait de l'abonnement. */
.mur__roman { margin-top: var(--e5); padding: var(--e5); border: 1px dashed var(--bord); border-radius: var(--rayon); text-align: left; }
.mur__roman-titre { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .14em; color: var(--accent); font-weight: 700; margin: 0 0 var(--e2); }
.mur__roman-detail { margin: 0 0 var(--e4); }
.mur__roman .champ__aide { margin-bottom: 0; }
.mur__roman .champ + .bouton { margin-top: var(--e3); }
.mur__form { margin: 0; }
.mur__prix { font-size: var(--t-3xl); font-family: var(--serif); }
.mur__prix small { font-size: var(--t-base); color: var(--texte-doux); font-family: var(--ui); }
.mur__liste { list-style: none; padding: 0; margin: var(--e4) 0 var(--e5); text-align: left; font-size: var(--t-sm); }
.mur__liste li { padding: var(--e2) 0; padding-left: var(--e5); position: relative; }
.mur__liste li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }

/* ── Formulaires ─────────────────────────────────────────────────────────── */
.form { max-width: 26em; margin: var(--e7) auto; padding: 0 var(--e4); }
.form h1 { font-family: var(--serif); font-size: var(--t-2xl); margin: 0 0 var(--e2); }
.form__intro { color: var(--texte-doux); margin: 0 0 var(--e6); }
.champ { margin-bottom: var(--e5); }
.champ label { display: block; font-size: var(--t-sm); font-weight: 600; margin-bottom: var(--e2); }
.champ input, .champ select, .champ textarea {
  width: 100%; min-height: 48px; padding: var(--e3) var(--e4);
  background: var(--surface-plein); color: var(--texte);
  border: 1px solid var(--bord); border-radius: var(--rayon);
  font: inherit; font-size: 16px;   /* 🔴 16px : en dessous, iOS zoome au focus */
}
.champ textarea { min-height: 140px; line-height: 1.6; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--accent); }
/* Un <label class="champ"> enveloppant son champ : le libellé porte sa propre
   classe, sinon il hérite du style de paragraphe et se confond avec l'aide. */
.champ__label { display: block; font-size: var(--t-sm); font-weight: 600; margin-bottom: var(--e2); }
.champ__aide { font-size: var(--t-xs); color: var(--texte-doux); margin-top: var(--e2); }
/* ── Créer son compte et choisir sa formule, d'un seul geste ──────────────
   Les cartes deviennent des <label> cliquables : tout le bloc coche son bouton
   radio. La cible fait plusieurs centaines de pixels — on ne demande à personne
   de viser un cercle de 16 px sur un téléphone. */
.abo-compte { max-width: 34em; margin: 0 auto; text-align: left; }
.abo-compte .champ { margin-bottom: var(--e4); }
.formule--choix { cursor: pointer; position: relative; }
.formule__radio {
  position: absolute; top: var(--e4); right: var(--e4);
  width: 20px; height: 20px; accent-color: var(--accent); cursor: pointer;
}
/* La formule cochée se voit sans avoir à chercher le petit rond. */
.formule--choix:has(.formule__radio:checked) { border-color: var(--accent); }
/* 🔴 Le contour de focus doit rester visible : il se pose sur la CARTE, pas sur
   le rond, sinon un utilisateur au clavier ne sait plus où il est. */
.formule--choix:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.champ--erreur input, .champ--erreur textarea, .champ--erreur select { border-color: var(--danger); }
.champ__erreur { font-size: var(--t-sm); color: var(--danger); margin-top: var(--e2); }

.avis { padding: var(--e4); border-radius: var(--rayon); margin-bottom: var(--e5); border: 1px solid; font-size: var(--t-sm); }
.avis--erreur { border-color: var(--danger); color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.avis--succes { border-color: var(--succes); color: var(--succes); background: color-mix(in srgb, var(--succes) 10%, transparent); }
.avis--info { border-color: var(--bord); color: var(--texte-doux); }

/* ── États vides ─────────────────────────────────────────────────────────── */
.vide { text-align: center; padding: var(--e8) var(--e4); color: var(--texte-doux); }
.vide h2 { font-family: var(--serif); color: var(--texte); font-size: var(--t-xl); margin: 0 0 var(--e3); }

/* ── Pied ────────────────────────────────────────────────────────────────── */
.pied { border-top: 1px solid var(--bord); margin-top: var(--e8); padding: var(--e6) 0; color: var(--texte-doux); font-size: var(--t-sm); }
.pied__liens { display: flex; flex-wrap: wrap; gap: var(--e4); margin-bottom: var(--e4); }
.pied a { color: var(--texte-doux); }
.pied a:hover { color: var(--texte); }

/* ── Partage ─────────────────────────────────────────────────────────────── */
.partage { display: flex; gap: var(--e2); flex-wrap: wrap; margin-top: var(--e5); }
.partage .puce { min-height: 44px; }
.partage + .fiche__resume { margin-top: var(--e5); }
/* ⭐ 08/10/2026 — offre de bienvenue : une étiquette sobre au-dessus du prix,
   et le prix normal écrit en clair juste dessous (rien de caché). */
.offre-bienvenue { display: inline-block; align-self: flex-start; width: fit-content; margin: 0 0 var(--e2); padding: .2em .65em; border: 1px solid var(--accent); border-radius: 999px; color: var(--accent); font-size: var(--t-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.offre-puis { margin: calc(-1 * var(--e2)) 0 var(--e3); color: var(--texte-doux); font-size: var(--t-sm); }
/* ⭐ 08/10/2026 — « Suivez-nous sur Facebook » : une ligne, pas un bandeau. */
.suivre { margin: var(--e5) 0 0; color: var(--texte-doux); font-size: var(--t-sm); text-align: center; line-height: 1.5; }
.suivre a { display: inline-flex; align-items: center; gap: .4em; min-height: 44px; padding: 0 .25em; }
.suivre a span { text-decoration: underline; text-underline-offset: .2em; }
.suivre__ico { flex: none; width: 1.15em; height: 1.15em; }

/* ⭐ 11/10/2026 — « Pas le temps maintenant ? » (partials/suite-email.php) : sous le bouton
   du chapitre suivant, jamais à sa place. Bouton fantôme : l'action principale reste « Lire ». */
.suite-email { margin: var(--e5) auto 0; max-width: 34em; padding: var(--e4); border: 1px solid var(--bord);
  border-radius: var(--rayon); background: var(--surface-plein); text-align: left; scroll-margin-top: 90px; }
.suite-email__titre { margin: 0; font-family: var(--serif); font-size: var(--t-lg, 1.2rem); line-height: 1.3; }
.suite-email__texte { margin: var(--e2) 0 var(--e3); color: var(--texte-doux); font-size: var(--t-sm); line-height: 1.5; }
.suite-email .champ { margin: 0; }
.suite-email__ligne { display: flex; flex-wrap: wrap; gap: var(--e2); }
.suite-email__ligne input { flex: 1 1 14em; min-width: 0; min-height: 48px; }
.suite-email__ligne .bouton { flex: 0 0 auto; min-height: 48px; }
.suite-email__garanties { margin: var(--e2) 0 0; font-size: var(--t-xs); color: var(--texte-doux); }
.suite-email__ok { margin: 0; font-size: var(--t-sm); line-height: 1.5; }
.suite-email__ok strong { color: var(--accent); }
@media (max-width: 420px) { .suite-email__ligne .bouton { flex: 1 1 100%; } }
.partage-fin { margin-top: var(--e6); padding-top: var(--e5); border-top: 1px solid var(--bord); }
.partage-fin__titre { font-family: var(--serif); font-size: var(--t-xl); margin: 0 0 var(--e2); }
.partage-fin__texte { color: var(--texte-doux); margin: 0; }
.partage-fin .partage { margin-top: var(--e4); }

/* ── Tableaux d'administration ───────────────────────────────────────────── */
.tableau-enveloppe { overflow-x: auto; margin: var(--e5) 0; }
table.donnees { width: 100%; border-collapse: collapse; font-size: var(--t-sm); min-width: 640px; }
table.donnees th, table.donnees td { padding: var(--e3); text-align: left; border-bottom: 1px solid var(--bord); }
table.donnees th { color: var(--texte-doux); font-weight: 600; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; }
table.donnees tr:hover td { background: var(--accent-sourd); }

/* L'introduction d'une catégorie : lisible, pas un pavé. Même largeur de ligne
   confortable que le reste du site — au-delà, l'œil perd la ligne suivante. */
.categorie__intro {
  max-width: 58ch; margin: 0 0 var(--e5);
  color: var(--texte-doux); font-size: var(--t-base); line-height: 1.7;
}

/* ── « Ce site existe aussi en… » ────────────────────────────────────────
   Posé sous l'en-tête, dans la couleur d'action mais sans fond plein : il
   propose, il ne réclame pas. Il ne réapparaît jamais une fois écarté. */
.bandeau-langue {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: var(--e3);
  padding: var(--e3) var(--e4);
  font-size: var(--t-sm); color: var(--texte-doux);
  background: var(--surface-plein); border-bottom: 1px solid var(--bord);
}
.bandeau-langue[hidden] { display: none; }

/* ── Gestion des lecteurs (back-office) ──────────────────────────────────
   Des formulaires POSÉS DANS un tableau : sans mise en ligne explicite, chaque
   <form> prend toute la largeur de sa cellule et la colonne triple de hauteur. */
.offrir { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 4px; flex-wrap: wrap; }
.saisie-mini { padding: 4px 8px; font-size: var(--t-xs); min-height: 32px; width: auto; }
.bouton-mini { padding: 4px 10px; font-size: var(--t-xs); min-height: 32px; }
.barre-filtres { display: flex; align-items: flex-end; gap: var(--e3); flex-wrap: wrap; margin: var(--e5) 0 var(--e3); }
.champ-inline { flex: 1 1 260px; margin: 0; }
/* Une échéance à moins d'une semaine : c'est la ligne sur laquelle on agit. */
.donnees .urgent { color: var(--accent); font-weight: 600; }

.stats { display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: var(--e5) 0; }
.stat { border: 1px solid var(--bord); border-radius: var(--rayon); padding: var(--e4); }
.stat__valeur { font-size: var(--t-2xl); font-family: var(--serif); line-height: 1.1; }
.stat__nom { font-size: var(--t-xs); color: var(--texte-doux); text-transform: uppercase; letter-spacing: .08em; margin-top: var(--e2); }

/* L'entonnoir : des barres, pas un graphique à charger. */
.entonnoir { margin: var(--e5) 0; }
.entonnoir__ligne { display: grid; grid-template-columns: 5.5em 1fr 4.5em; gap: var(--e3); align-items: center; margin-bottom: var(--e2); font-size: var(--t-sm); }
.entonnoir__barre { height: 22px; background: var(--accent-sourd); border-radius: 4px; overflow: hidden; }
.entonnoir__plein { height: 100%; background: var(--accent); }
.entonnoir__val { text-align: right; font-variant-numeric: tabular-nums; color: var(--texte-doux); }

/* ── À partir de la tablette ─────────────────────────────────────────────── */
@media (min-width: 700px) {
  :root { --t-3xl: 2.75rem; }
  .une__grille { grid-template-columns: 200px 1fr; align-items: center; gap: var(--e7); }
  .une__couverture { width: 200px; }
  .fiche__grille { grid-template-columns: 180px 1fr; gap: var(--e7); align-items: start; }
  .rangee { grid-auto-columns: 158px; }
  .grille { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .texte { font-size: var(--taille-lecture, 1.2rem); }
}

@media (min-width: 1024px) {
  .rangee { grid-auto-columns: 176px; }
  .grille { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); }
  .une { padding: var(--e8) 0 var(--e7); }
  .enveloppe { padding: 0 var(--e5); }
}

/* ── Impression : le texte, rien d'autre ─────────────────────────────────── */
@media print {
  .entete, .pied, .lecture__pied, .confort, .partage { display: none !important; }
  body { background: #fff; color: #000; }
  .texte { max-width: none; font-size: 12pt; }
}

/* ── Consentement à la mesure publicitaire ──────────────────────────────────
   Ne s'affiche que si un pixel est configuré ET que le visiteur n'a pas
   répondu. Les deux boutons ont le même poids : un refus plus difficile
   qu'une acceptation invalide le consentement.                              */
/* ── Bandeau cookies (refait le 22/09/2026) ─────────────────────────────
   Une bande basse, discrète, qui ne recouvre pas la page : sur téléphone
   l'ancienne boîte prenait 240 px de haut. Les deux réponses ont exactement
   le même bouton — un « Accepter » plus voyant que « Refuser » rendrait le
   consentement invalide. */
.consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--surface-plein); border-top: 1px solid var(--bord);
  padding: var(--e3) var(--e4) calc(var(--e3) + env(safe-area-inset-bottom, 0px));
}
.consent[hidden] { display: none; }
.consent__boite {
  max-width: var(--largeur); margin: 0 auto;
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--e2) var(--e4);
}
.consent__texte {
  flex: 1 1 18em; min-width: 0; margin: 0;
  font-size: var(--t-xs); line-height: 1.5; color: var(--texte-doux);
}
.consent__texte a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.consent__actions { display: flex; gap: var(--e2); margin-left: auto; }
.consent__choix {
  min-height: 40px; padding: 0 var(--e4); border: 1px solid var(--bord); border-radius: 999px;
  background: none; color: var(--texte); font: inherit; font-size: var(--t-sm); cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.consent__choix:hover { border-color: var(--accent); background: var(--accent-sourd); }
.consent__choix:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* ⭐ 27/09/2026 — au téléphone, une phrase courte et les deux boutons sur la
   MÊME ligne : l'ancienne bande faisait 120 px et cachait la première phrase
   du roman. Les deux boutons restent identiques (exigence du consentement). */
.consent__court { display: none; }
@media (max-width: 560px) {
  .consent { padding-top: var(--e2); padding-bottom: calc(var(--e2) + env(safe-area-inset-bottom, 0px)); }
  .consent__boite { flex-wrap: nowrap; gap: var(--e3); }
  .consent__texte { flex: 1 1 0; }
  .consent__long { display: none; }
  .consent__court { display: inline; }
  .consent__actions { margin-left: 0; flex: 0 0 auto; }
  .consent__choix { padding: 0 var(--e3); min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .consent__choix { transition: none; } }

/* ── Après un roman ───────────────────────────────────────────────────────
   Le lecteur vient de terminer une histoire. Le bloc reste sobre : trois
   propositions, pas une vitrine. Il est séparé du texte par un vrai blanc —
   on ne colle pas une offre à la dernière phrase d'un roman. */
.apres { margin: var(--e7) 0 var(--e6); padding-top: var(--e6); border-top: 1px solid var(--bord); }
.apres__titre { font-family: var(--serif); font-size: var(--t-lg); margin: 0 0 var(--e5); text-align: center; }
.apres__grille { display: grid; gap: var(--e4); }
@media (min-width: 640px) { .apres__grille { grid-template-columns: repeat(3, 1fr); gap: var(--e5); } }
.apres__carte { display: grid; grid-template-columns: auto 1fr; gap: var(--e4); align-items: start; }
@media (min-width: 640px) { .apres__carte { display: block; } }
.apres__couv { display: block; width: 84px; flex: 0 0 auto; }
@media (min-width: 640px) { .apres__couv { width: auto; } }
.apres__couv img, .apres__couv .couv-vide { width: 100%; display: block; }
.apres__corps { min-width: 0; }
@media (min-width: 640px) { .apres__corps { margin-top: var(--e3); } }
.apres__nom { font-family: var(--serif); font-size: var(--t-base); line-height: 1.25; margin: 0 0 var(--e2); }
.apres__nom a { color: inherit; }
.apres__accroche { font-size: var(--t-xs); color: var(--texte-doux); line-height: 1.5; margin: 0 0 var(--e3); }
.apres__cta { width: 100%; min-height: 44px; }

/* ── « Écouter » sur la fiche du roman ─────────────────────────────────── */
.fiche__ecouter { display: inline-flex; align-items: center; gap: var(--e2); }
.fiche__ecouter .ico-casque { width: 18px; height: 18px; }
.fiche__ecouter-duree { color: var(--texte-doux); font-weight: 400; font-variant-numeric: tabular-nums; }
.fiche__ecouter-duree::before { content: "· "; }
.fiche__ecouter, .fiche__ecouter-duree { white-space: nowrap; }
.fiche__actions { flex-wrap: wrap; }
@media (max-width: 480px) {
  /* Sur téléphone, Lire et Écouter côte à côte ne tiennent pas : « Lire
     gratuitement » passait sur deux lignes et la durée sur trois. Chacun
     prend toute la largeur, Lire au-dessus. */
  .fiche__actions > .bouton { flex: 1 1 100%; justify-content: center; }
}

/* ── L'annuel (22/09/2026) ─────────────────────────────────────────────── */
.formule__an { margin: calc(-1 * var(--e1)) 0 var(--e3); font-size: var(--t-xs); color: var(--accent); }
/* Un lien qui se voit comme un lien : en gris sans soulignement, la ligne
   passait pour une mention légale et personne ne cliquait. */
.mur__annuel { display: block; margin-top: var(--e3); text-align: center; font-size: var(--t-sm); }
a.mur__annuel, .mur__annuel .bouton--texte {
  font-size: var(--t-sm); color: var(--accent); text-decoration: underline; text-underline-offset: 3px;
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
}
a.mur__annuel { display: flex; }
a.mur__annuel:hover, .mur__annuel .bouton--texte:hover { color: var(--accent-fort); }
.periode { border: 0; margin: var(--e5) 0 var(--e4); padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); }
.periode legend { grid-column: 1 / -1; margin-bottom: var(--e2); padding: 0; }
.periode__choix {
  position: relative; display: flex; flex-direction: column; gap: 2px; cursor: pointer;
  padding: var(--e3) var(--e4) var(--e3) calc(var(--e4) + 26px); min-height: 56px;
  border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--surface-plein);
}
.periode__choix input { position: absolute; left: var(--e4); top: calc(var(--e3) + 2px); width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.periode__choix:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.periode__choix:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.periode__nom { font-weight: 600; }
.periode__detail { font-size: var(--t-xs); color: var(--texte-doux); }
.periode__gain { color: var(--accent); font-weight: 600; }

/* ── Administration : nouveau lecteur (22/09/2026) ─────────────────────── */
.nouveau-lecteur { margin: var(--e5) 0; }
.nouveau-lecteur > summary { list-style: none; display: inline-flex; cursor: pointer; }
.nouveau-lecteur > summary::-webkit-details-marker { display: none; }
.nouveau-lecteur[open] > summary { margin-bottom: var(--e4); }
.nouveau-lecteur__form {
  padding: var(--e5); border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--surface-plein);
}
.nouveau-lecteur__grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 var(--e5); }
.nouveau-lecteur__offre { display: flex; flex-wrap: wrap; gap: var(--e2); }
/* ⚠ Pas de min-width: 0 : dans une colonne étroite la formule se lisait
   « Lecture + Écou… ». Chaque liste garde sa largeur, quitte à passer dessous. */
.nouveau-lecteur__offre select { flex: 1 1 170px; }
.nouveau-lecteur__case { display: flex; align-items: flex-start; gap: var(--e2); margin: 0 0 var(--e4); cursor: pointer; font-size: var(--t-sm); }
.nouveau-lecteur__case input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); flex: none; }

/* ── Liste des chapitres dans le mode écoute (22/09/2026) ──────────────── */
.scene-chapitres { margin-top: var(--e5); border-top: 1px solid var(--bord); padding-top: var(--e3); }
.scene-chapitres__titre {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
  min-height: 44px; cursor: pointer; list-style: none; font-weight: 600;
}
.scene-chapitres__titre::-webkit-details-marker { display: none; }
.scene-chapitres__titre::after { content: "▾"; color: var(--texte-doux); transition: transform .2s; }
.scene-chapitres[open] .scene-chapitres__titre::after { transform: rotate(180deg); }
.scene-chapitres__reste { margin-left: auto; font-weight: 400; font-size: var(--t-xs); color: var(--texte-doux); font-variant-numeric: tabular-nums; }
.scene-chapitres__liste { list-style: none; margin: var(--e2) 0 0; padding: 0; max-height: 45vh; overflow-y: auto; }
.scene-chapitres__chap {
  display: grid; grid-template-columns: 2.2em 1fr auto; align-items: center; gap: var(--e3);
  width: 100%; min-height: 48px; padding: var(--e2) var(--e2); border: 0; border-radius: 8px;
  background: none; color: var(--texte); font: inherit; font-size: var(--t-sm); text-align: left;
  text-decoration: none; cursor: pointer;
}
.scene-chapitres__chap:hover { background: var(--accent-sourd); }
.scene-chapitres__chap:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.scene-chapitres__num { color: var(--texte-doux); font-variant-numeric: tabular-nums; }
.scene-chapitres__nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scene-chapitres__duree { color: var(--texte-doux); font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
.scene-chapitres__duree .ico { width: 16px; height: 16px; }
.scene-chapitres__chap.est-passe .scene-chapitres__nom { color: var(--texte-doux); }
.scene-chapitres__chap.est-courant { background: var(--accent-sourd); box-shadow: inset 3px 0 0 var(--accent); }
.scene-chapitres__chap.est-courant .scene-chapitres__num,
.scene-chapitres__chap.est-courant .scene-chapitres__nom { color: var(--accent); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .scene-chapitres__titre::after { transition: none; } }
@media (max-width: 480px) {
  /* Dans le mode écoute, la règle plus précise (padding 12 px) l'emportait :
     « 2× » passait seul à la ligne à 375 px. */
  .scene-ecoute__reglages .ecoute__vitesses { width: 100%; justify-content: space-between; gap: 4px; }
  .scene-ecoute__reglages .ecoute__vitesse { padding: 0 6px; min-width: 40px; }
}

/* ── Extrait audio de la fiche (22/09/2026) ────────────────────────────── */
.extrait { flex: 1 1 100%; display: flex; align-items: center; flex-wrap: wrap; gap: var(--e2) var(--e4); }
.extrait[hidden] { display: none; }
.extrait__bouton {
  display: inline-flex; align-items: center; gap: var(--e3); min-height: 48px; padding: 0 var(--e4) 0 0;
  border: 0; background: none; color: var(--texte); font: inherit; font-size: var(--t-sm); cursor: pointer;
}
.extrait__rond {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none;
  border-radius: 50%; border: 1px solid var(--accent); color: var(--accent); transition: background-color .15s;
}
.extrait__rond .ico { width: 18px; height: 18px; }
.extrait__rond .ico--lecture { transform: translateX(1px); }
.extrait__bouton .ico--pause { display: none; }
.extrait__bouton.est-en-lecture .ico--pause { display: block; }
.extrait__bouton.est-en-lecture .ico--lecture { display: none; }
.extrait__bouton:hover .extrait__rond, .extrait__bouton.est-en-lecture .extrait__rond { background: var(--accent-sourd); }
.extrait__bouton:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 999px; }
.extrait__temps { color: var(--texte-doux); font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
.extrait__suite { color: var(--accent); font-size: var(--t-sm); font-weight: 600; }
.extrait__suite[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .extrait__rond { transition: none; } }

/* ── Tableau des cookies (page Confidentialité) ────────────────────────── */
/* ⚠ `.donnees` (tableaux d'administration) impose min-width: 640px : sur un
   téléphone le tableau sortait de 281 px hors de l'écran. */
table.donnees--cookies { width: 100%; min-width: 0; border-collapse: collapse; margin: var(--e4) 0; font-size: var(--t-sm); }
table.donnees--cookies th, table.donnees--cookies td {
  text-align: left; vertical-align: top; padding: var(--e3) var(--e3) var(--e3) 0;
  border-bottom: 1px solid var(--bord);
}
table.donnees--cookies th { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--texte-doux); }
table.donnees--cookies code { font-size: .9em; color: var(--accent); overflow-wrap: anywhere; }
@media (max-width: 560px) {
  /* Un tableau à trois colonnes ne tient pas à 375 px : une ligne = un bloc. */
  table.donnees--cookies, table.donnees--cookies tbody, table.donnees--cookies tr, table.donnees--cookies td { display: block; width: 100%; }
  table.donnees--cookies thead { display: none; }
  table.donnees--cookies tr { padding: var(--e3) 0; border-bottom: 1px solid var(--bord); }
  table.donnees--cookies td { border: 0; padding: 0 0 var(--e1); }
  table.donnees--cookies td:last-child { color: var(--texte-doux); font-size: var(--t-xs); }
}

/* ── Mur d'inscription (22/09/2026) ────────────────────────────────────── */
.mur--compte .mur__offres { justify-content: center; }
.mur--compte .mur__offre { max-width: 26em; margin: 0 auto; text-align: left; }
.mur--compte .mur__liste { margin-bottom: var(--e5); }
.mur--compte .champ { margin-bottom: var(--e4); }
.mur--compte .champ input { width: 100%; }

/* ── Administration : courriels (23/09/2026) ───────────────────────────── */
.mail-romans { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--e2) var(--e4); margin: var(--e3) 0 var(--e5); }
.mail-romans__item { display: flex; align-items: flex-start; gap: var(--e2); font-size: var(--t-sm); cursor: pointer; }
.mail-romans__item input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); flex: none; }
.mail-langue { margin-bottom: var(--e4); }
.mail-langue > summary { display: inline-flex; cursor: pointer; list-style: none; }
.mail-langue > summary::-webkit-details-marker { display: none; }
.mail-langue[open] > summary { margin-bottom: var(--e4); }

/* ── Le mur d'inscription AU MILIEU du chapitre (23/09/2026) ─────────────────
   L'amorce du chapitre s'efface vers le mur : le lecteur voit que l'histoire
   continue juste en dessous. Le voile est un masque (pas une couleur posée
   par-dessus) : il suit le thème clair comme le sombre sans rien recalculer. */
.lecture--mur { padding-bottom: var(--e6); }
.mur__extrait {
  max-height: 22em; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
  user-select: none;
}
.lecture--mur .mur { margin-top: calc(-1 * var(--e4)); position: relative; }
.lecture--mur .mur__offre { text-align: left; }
.lecture--mur .mur__phrase { text-align: center; margin-bottom: var(--e2); }
.lecture--mur .mur__texte { text-align: center; margin-bottom: var(--e5); }
.lecture--mur .champ { margin-bottom: var(--e4); }
.mur__garanties { font-size: var(--t-xs); color: var(--texte-doux); text-align: center; margin: var(--e3) 0 0; }
.mur__connexion { text-align: center; margin-top: var(--e4); }
.champ__erreur a { color: inherit; text-decoration: underline; margin-left: .3em; }
/* Au premier passage, le bandeau cookies ne doit JAMAIS couvrir le seul champ
   de la page : sur le mur, il se range en bas du contenu au lieu de flotter. */
body:has(.lecture--mur) .consent { position: static; }

/* Mot d'accueil en tête du chapitre, juste après l'inscription au mur. */
.bienvenue {
  max-width: var(--lecture); margin: 0 auto var(--e5); padding: var(--e4);
  border: 1px solid var(--accent); border-radius: var(--rayon); background: var(--accent-sourd);
  font-size: var(--t-sm);
}
.bienvenue strong { display: block; font-family: var(--serif); font-size: var(--t-base); margin-bottom: var(--e1, 4px); }

/* Un bouton d'envoi qui a l'air d'un lien (déconnexion en tête de page) :
   POST obligatoire — une déconnexion par simple lien serait déclenchable
   depuis n'importe quel autre site. Cible de 44 px au doigt. */
.section__actions { display: flex; align-items: baseline; gap: var(--e4); flex-wrap: wrap; justify-content: flex-end; }
.form-lien { margin: 0; display: inline; }
.lien-bouton {
  background: none; border: 0; padding: var(--e3) 0; min-height: 44px; cursor: pointer;
  font: inherit; font-size: var(--t-sm); color: var(--texte-doux); text-decoration: underline; text-underline-offset: 3px;
}
.lien-bouton:hover { color: var(--accent); }
.lien-bouton:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Index des auteurs et des styles (pages /auteurs, /auteur, /styles) ──────
   Cartes de parcours : même grammaire que le reste (surface, bord, accent au
   survol), pas une nouvelle identité. Clic sur toute la carte, cible ≥ 44 px. */
.auteurs, .styles { list-style: none; margin: var(--e5) 0 0; padding: 0;
  display: grid; gap: var(--e4); grid-template-columns: 1fr; }
.auteur-carte__lien, .style-carte__lien {
  display: block; height: 100%; color: inherit;
  background: var(--surface-plein); border: 1px solid var(--bord);
  border-radius: var(--rayon); padding: var(--e4) var(--e5);
}
.auteur-carte__lien:hover, .style-carte__lien:hover,
.auteur-carte__lien:focus-visible, .style-carte__lien:focus-visible {
  border-color: var(--accent); text-decoration: none;
}
.auteur-carte__nom, .style-carte__nom {
  font-family: var(--serif); font-size: var(--t-lg); margin: 0; line-height: 1.25;
}
.auteur-carte__style { color: var(--accent); font-size: var(--t-sm); margin: var(--e2) 0 var(--e3); }
.auteur-carte__nb { color: var(--texte-doux); font-size: var(--t-xs); margin: 0; }
.style-carte__tete { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e3); }
.style-carte__nb {
  font-variant-numeric: tabular-nums; font-size: var(--t-sm); color: var(--texte-doux);
  border: 1px solid var(--bord); border-radius: 999px; padding: 2px var(--e2); min-width: 2em; text-align: center;
}
.style-carte__intro { color: var(--texte-doux); font-size: var(--t-sm); line-height: 1.6; margin: var(--e2) 0 0; }

/* La signature de style, sous le nom de l'auteur : une ligne, en couleur d'accent. */
.auteur__tagline { color: var(--accent); font-size: var(--t-base); font-style: italic; margin: 0 0 var(--e4); }
.fil { margin: 0 0 var(--e4); font-size: var(--t-sm); }
.fil a { color: var(--texte-doux); }
.fil a:hover { color: var(--accent); text-decoration: none; }

@media (min-width: 600px) {
  .auteurs { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .styles  { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}

/* Page « Trouvez votre roman » : aides sous les titres + chip d'accent « voir tout ». */
.trouver__aide { color: var(--texte-doux); font-size: var(--t-sm); margin: 0 0 var(--e3); }
.etiquette--plus { border-color: var(--accent); color: var(--accent); }

/* ── ⭐ 12/10/2026 — Histoires courtes : une liste qu'on choisit à l'accroche ── */
.courtes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e4); }
.courte {
  display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--e4); align-items: start;
  padding: var(--e4); border: 1px solid var(--bord); border-radius: var(--rayon);
  background: var(--surface); color: inherit; transition: border-color .15s ease;
}
.courte:hover { text-decoration: none; border-color: var(--accent); }
.courte:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.courte .vignette { width: 88px; }
.courte__couverture {
  width: 100%; aspect-ratio: 2 / 3; border-radius: calc(var(--rayon) - 4px); object-fit: cover;
  border: 1px solid var(--bord); background: var(--surface-plein); display: block;
}
.courte__corps { display: flex; flex-direction: column; gap: var(--e1); min-width: 0; }
.courte__meta { font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.courte__titre { font-family: var(--serif); font-size: var(--t-lg); line-height: 1.25; color: var(--texte); }
.courte__accroche { font-size: var(--t-sm); line-height: 1.5; color: var(--texte-doux); }
.courte__lire { margin-top: var(--e2); font-size: var(--t-sm); font-weight: 600; color: var(--accent); }
@media (min-width: 760px) {
  .courtes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e5); }
  .courte { grid-template-columns: 112px minmax(0, 1fr); padding: var(--e5); }
  .courte .vignette { width: 112px; }
  .courte__titre { font-size: var(--t-xl); }
}

/* ⭐ 12/10/2026 — trois liens à 375 px : un écart un peu plus court pour qu'ils tiennent sans glisser. */
@media (max-width: 419px) { body:not(.en-lecture) .entete__inner nav { gap: var(--e4); } }

/* ── ⭐ 15/10/2026 — « Continuer la visite » et bouton « remonter » ─────────
   🔴 Tout en bas d'une histoire, au téléphone, il ne restait qu'un autre roman :
   les liens de l'en-tête sont masqués pendant la lecture et le pied de page
   n'a que de petits liens gris. Trois portes au pouce, et un retour en haut. */
.apres__tout { text-align: center; margin: var(--e5) 0 0; }
.apres__tout a { display: inline-flex; align-items: center; gap: var(--e2); min-height: 44px;
  font-size: var(--t-sm); font-weight: 600; }

.explorer {
  margin: var(--e7) 0 var(--e6); padding: var(--e5) var(--e4) var(--e3);
  background: var(--surface-plein); border: 1px solid var(--bord); border-radius: 14px;
}
@media (min-width: 640px) { .explorer { padding: var(--e6) var(--e6) var(--e4); } }
.explorer__titre {
  margin: 0 0 var(--e4); text-align: center;
  font-family: var(--serif); font-size: var(--t-lg); font-weight: 700; color: var(--texte);
}
.explorer__portes {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e2);
}
@media (min-width: 640px) { .explorer__portes { gap: var(--e3); } }
.explorer__porte {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--e2); min-height: 84px; height: 100%; padding: var(--e3) var(--e2);
  border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--fond);
  color: var(--texte); font-size: var(--t-sm); font-weight: 600; line-height: 1.25;
  text-align: center; transition: border-color .2s, background-color .2s, color .2s;
}
.explorer__porte:hover { text-decoration: none; border-color: var(--accent); background: var(--accent-sourd); }
.explorer__porte:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.explorer__ico { width: 26px; height: 26px; color: var(--accent); flex: 0 0 auto; }
.explorer__haut {
  display: flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: 44px; margin-top: var(--e3);
  color: var(--texte-doux); font-size: var(--t-sm);
}
.explorer__haut:hover { color: var(--texte); }

.remonter {
  position: fixed; right: var(--e4); z-index: 44;
  bottom: calc(var(--remonter-bas, 0px) + var(--e4) + env(safe-area-inset-bottom, 0px));
  width: 48px; height: 48px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-plein); color: var(--accent);
  border: 1px solid var(--bord); box-shadow: 0 6px 18px rgba(0,0,0,.28);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .2s, transform .2s, border-color .2s;
}
.remonter.est-visible { opacity: 1; transform: none; pointer-events: auto; }
.remonter[hidden] { display: none; }
.remonter:hover { border-color: var(--accent); text-decoration: none; }
.remonter:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.remonter svg { width: 22px; height: 22px; }
@media (prefers-reduced-motion: reduce) { .remonter, .explorer__porte { transition: none; } }
@media print { .explorer, .remonter { display: none !important; } }

/* ⭐ 19/10/2026 — annonce de l'essai gratuit sans carte (partials/offre-essai.php). */
.offre-essai { margin: var(--e3) 0 var(--e4); color: var(--texte-doux); font-size: var(--t-sm); line-height: 1.6; }
.offre-essai__pastille { display: inline-block; margin-right: .4em; padding: .1em .6em; border: 1px solid var(--accent); border-radius: 999px; color: var(--accent); font-size: var(--t-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.mur--compte .offre-essai { text-align: center; }