/*
  Direction artistique — noir et blanc dominants, contraste brutal.

  Trois couleurs dans toute la feuille. Aucun gris n'est déclaré : les valeurs
  intermédiaires visibles à l'écran sont exclusivement de l'antialiasing de
  glyphes, jamais des surfaces.

  LE ROUGE — il n'est jamais posé sur du mobilier de page. Il ne marque que des
  états, ce qui le rend rare par construction : un état n'existe que lorsqu'il
  se produit.
    1. nav [aria-current]      — la section où le lecteur se trouve. Une
                                 occurrence par écran, à une place qui change
                                 selon la page.
    2. :target                 — le texte où le lecteur vient d'arriver. Zéro
                                 ou une occurrence, selon qu'il a cliqué ou non.
    3. :hover / :focus-visible — le seuil qu'il s'apprête à franchir. Une seule
                                 à la fois, et seulement sur son action.
    4. .progression__a-venir   — le roman, seule étape sans texte à lire. Le
                                 rouge marque ici ce qui n'existe pas encore.
    5. .chute                  — la fin d'un texte lu seul. Jamais dans le
                                 même écran que le reste du rouge.
    6. .ruban__interieur::after — la position du lecteur dans un texte long.
                                 Un état qui change en permanence : il ne peut
                                 pas se banaliser, et il ramène le régime noir
                                 dans un défilement qui en était dépourvu sur
                                 97,8 % de sa hauteur.

  Ce qui a été retiré : le filet rouge sous chaque H1. Toujours au même endroit
  sur toutes les pages, il n'apprenait plus rien au lecteur au-delà de la
  deuxième page. Un signal parfaitement prévisible ne porte aucune information.

  DEUX RÉGIMES DE FOND
  - blanc / noir pour la lecture : le confort appartient au texte ;
  - noir / blanc pour les seuils : la brutalité appartient aux transitions.

  L'AXE ET LA MESURE sont le même objet. La mesure de ligne est exprimée en
  multiples du corps de lecture (--mesure), donc le nombre de signes par ligne
  reste constant à toutes les largeurs. L'axe (--axe) en est dérivé, et titres,
  chapeaux et texte partagent exactement les mêmes bords.
*/

/* -------------------------------------------------------------------- */
/* Réinitialisation minimale                                            */
/* -------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--blanc);
  color: var(--noir);
}

ul { list-style: none; margin: 0; padding: 0; }
a { color: inherit; }
img { max-width: 100%; display: block; }

@media (prefers-reduced-motion: reduce) {
  /* Une animation pilotee par le defilement n'est pas du mouvement autonome :
     la jauge de lecture reste, seules les transitions tombent. */
  * { transition: none !important; }
}

/* -------------------------------------------------------------------- */
/* Palette, polices, échelle                                             */
/* -------------------------------------------------------------------- */

:root {
  --noir: #000000;
  --blanc: #ffffff;
  /* Calibre pour passer AA texte sur les DEUX fonds : 4,55:1 sur noir,
     4,62:1 sur blanc. La fenetre est etroite (l'ancien #e3131f tombait a
     4,38 sur noir), la plupart des rouges echouent d'un cote. */
  --rouge: #e61b26;

  /* Empilements système : aucune dépendance réseau. */
  --police-lecture: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", serif;
  --police-graphique: "Helvetica Neue", Helvetica, Arial, "Segoe UI", sans-serif;
  --police-mono: "Courier New", Courier, monospace;

  /* Corps de lecture, échelonné par largeur d'écran. */
  --corps: 1.15rem;

  /* Mesure de ligne, en multiples du corps. Georgia cadre un signe de prose
     française à environ 0,42 em : 29 em vise ~65 signes. Calibré par
     mesure instrumentée, jamais par l'unité `ch` — qui vaut l'avance du
     chiffre 0, soit 1,45 signe réel, d'où les 88 signes du premier jet. */
  --mesure: 29;
  --axe: calc(var(--mesure) * var(--corps));

  /* La ligne de base. Tous les blancs verticaux de la zone de lecture en sont
     des multiples, sinon le rythme est regulier sans etre coherent. */
  --ligne: calc(1.75 * var(--corps));

  --gouttiere: 1.5rem;

  /* Un élément qui porte lui-même la gouttière en padding doit être plus large
     d'autant pour que son CONTENU tombe encore sur l'axe. Sans quoi le texte
     décroche de son titre de la largeur exacte du padding. */
  --axe-boite: calc(var(--axe) + 2 * var(--gouttiere));
}

@media (min-width: 768px)  { :root { --corps: 1.2rem; --gouttiere: 2rem; } }
@media (min-width: 1440px) { :root { --corps: 1.3rem; } }
@media (max-width: 480px)  { :root { --corps: 1.05rem; --gouttiere: 1.25rem; } }

/* -------------------------------------------------------------------- */
/* Accessibilité                                                         */
/* -------------------------------------------------------------------- */

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

.lien-evitement {
  position: absolute;
  left: 0.5rem;
  top: -3rem;
  z-index: 10;
  background: var(--noir);
  color: var(--blanc);
  padding: 0.75rem 1.25rem;
  font-family: var(--police-graphique);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.lien-evitement:focus { top: 0.5rem; }

/* Le focus est un état : il a droit au rouge. */
:focus-visible {
  outline: 3px solid var(--rouge);
  outline-offset: 3px;
}

/* -------------------------------------------------------------------- */
/* Axe partagé : tout s'aligne sur les mêmes bords                       */
/* -------------------------------------------------------------------- */

.axe {
  max-width: var(--axe);
  margin-inline: auto;
}

/* Tout le site tient sur un seul axe : titres, texte, panneaux et
   bandeaux partagent exactement les memes bords. */

/* -------------------------------------------------------------------- */
/* Bandeaux de tête et de pied                                           */
/* -------------------------------------------------------------------- */

.bandeau {
  background: var(--noir);
  color: var(--blanc);
}

.bandeau__interieur {
  max-width: var(--axe-boite);
  margin: 0 auto;
  padding: 1.25rem var(--gouttiere);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.marque {
  font-family: var(--police-graphique);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 1.15rem;
  margin: 0;
}
.marque a { text-decoration: none; }

.nav-principale ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.nav-principale a {
  font-family: var(--police-graphique);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.95rem;
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 3px solid transparent;
}

/* État 1 — la section où le lecteur se trouve. Une occurrence par écran, à une
   place qui change d'une page à l'autre. */
.nav-principale a[aria-current="page"] { border-bottom-color: var(--rouge); }

/* État 3 — le seuil qu'on s'apprête à franchir. */
.nav-principale a:hover { border-bottom-color: var(--blanc); }

.bandeau--pied .bandeau__interieur {
  font-family: var(--police-graphique);
  font-size: 0.9rem;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.bandeau--pied p { margin: 0; }

/* Un lien doit se voir sans avoir à le survoler. */
.bandeau--pied a { text-decoration: underline; text-underline-offset: 0.25em; }
.bandeau--pied a:hover { color: var(--rouge); }

.pagination .bandeau__interieur { justify-content: space-between; }
.pagination__precedent, .pagination__suivant { flex: 1 1 12rem; margin: 0; }
.pagination__milieu { margin: 0; text-align: center; flex: 1 1 12rem; }
.pagination a { text-decoration: underline; text-underline-offset: 0.25em; }
.pagination a:hover { color: var(--rouge); }

/* -------------------------------------------------------------------- */
/* Couvertures : fond noir, typographie graphique, même axe que le texte */
/* -------------------------------------------------------------------- */

.couverture {
  background: var(--noir);
  color: var(--blanc);
  padding: 3.5rem var(--gouttiere);
}

.couverture--accueil { padding: 5rem var(--gouttiere); }

.couverture h1 {
  font-family: var(--police-graphique);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: clamp(2rem, 4.5vw + 0.75rem, 3.5rem);
  line-height: 1.1;
  margin: 0;
  /* Evite qu'une ligne commence par un signe de ponctuation isole. */
  text-wrap: balance;
}

.signature {
  font-family: var(--police-graphique);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: 0.8rem;
  margin: 0 0 1.25rem;
}

.fil-ariane {
  font-family: var(--police-graphique);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 1.25rem;
}
.fil-ariane a { text-decoration: underline; text-underline-offset: 0.25em; }
.fil-ariane a:hover { color: var(--rouge); }

/* Le filet sous le titre reste, mais en blanc : l'architecture de la page
   survit sans dépenser du rouge sur du mobilier. */
.filet {
  background: var(--blanc);
  height: 4px;
  width: 4.5rem;
  margin: 1.5rem 0;
}

.chapeau {
  font-family: var(--police-graphique);
  font-size: 1.02rem;
  line-height: 1.55;
  margin: 0;
}

/* -------------------------------------------------------------------- */
/* La progression de l'accueil : quatre étapes, dont une sans texte       */
/* -------------------------------------------------------------------- */

.progression {
  font-family: var(--police-graphique);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.9rem;
  margin: 2.5rem 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}
.progression a {
  text-decoration: none;
  border-bottom: 3px solid var(--blanc);
  padding-bottom: 3px;
}
.progression a:hover { border-bottom-color: var(--rouge); }
.progression__fleche { font-weight: 400; }

/* État 4 — le roman est la seule étape sans texte à lire. Le rouge marque ici
   ce qui n'existe pas encore. Une occurrence, sur une seule page du site. */
.progression__a-venir {
  color: var(--rouge);
  border-bottom: 3px solid var(--rouge);
  padding-bottom: 3px;
}

/* -------------------------------------------------------------------- */
/* Grilles de panneaux : noirs, séparés par de vrais liserés blancs       */
/* -------------------------------------------------------------------- */

.section-cartes { padding: 0 var(--gouttiere) 4rem; }

/* Sur les index de collection, la grille suit directement la couverture : deux
   surfaces noires qui, sans intervalle, se soudent en un seul pave et font
   perdre au chapeau son statut de chapeau. Le blanc qui passe entre les
   panneaux passe donc aussi entre le seuil et la grille. */
.couverture + .section-cartes { padding-top: 3rem; }

.grille-cartes {
  max-width: var(--axe);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  /* Les liserés blancs sont le fond de page qui traverse les interstices :
     pas de fond ni de cadre sur la grille, sinon la dernière cellule vide se
     lirait comme un panneau manquant. */
  gap: 2px;
}

.carte {
  background: var(--noir);
  color: var(--blanc);
  text-decoration: none;
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* État 3 — le panneau s'inverse au survol. Brutal, et sans rouge : le rouge
   est réservé à la flèche, qui dit où l'on va. */
.carte:hover, .carte:focus-visible {
  background: var(--blanc);
  color: var(--noir);
}
.carte:hover .carte__lien { color: var(--rouge); }

.carte h3 {
  font-family: var(--police-graphique);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: 1.25rem;
  margin: 0;
}

.carte__detail {
  font-family: var(--police-graphique);
  font-size: 0.88rem;
  margin: 0;
}

.carte__lien {
  font-family: var(--police-graphique);
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0.75rem 0 0;
}

/* -------------------------------------------------------------------- */
/* Ruban de lecture : ramene le regime noir dans le defilement et donne    */
/* au lecteur sa position. Aucun mot ajoute au texte, aucun decoupage      */
/* invente : le titre existe deja, la position est un fait mesurable.      */
/* -------------------------------------------------------------------- */

.ruban {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--noir);
  color: var(--blanc);
  padding: 0 var(--gouttiere);
}

.ruban__interieur {
  position: relative;
  max-width: var(--axe);
  /* margin verticale a zero : c'est un <p>, et sa marge par defaut de 1em
     s'echappait du ruban par collapsing (le ruban n'a aucun padding vertical)
     pour ouvrir un liseré blanc entre la couverture et lui. */
  margin: 0 auto;
  padding: 0.55rem 0 0.7rem;
  font-family: var(--police-graphique);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
}

/* La jauge : le rouge marque la position reelle dans le texte. C'est un etat,
   il change en permanence, il ne peut pas se banaliser. La ou le navigateur
   ignore les animations de defilement, la jauge reste simplement absente. */
@supports (animation-timeline: scroll()) {
  .ruban__interieur::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: var(--rouge);
    transform: scaleX(0);
    transform-origin: left center;
    animation: avancee-lecture linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes avancee-lecture { to { transform: scaleX(1); } }
}

/* -------------------------------------------------------------------- */
/* Colonnes de lecture                                                   */
/* -------------------------------------------------------------------- */

.conteneur-texte {
  max-width: var(--axe-boite);
  margin-inline: auto;
  padding: 4rem var(--gouttiere);
  font-family: var(--police-lecture);
  font-size: var(--corps);
  line-height: 1.75;
}

.conteneur-texte p { margin: 0 0 1.75em; }  /* une ligne pleine */
.conteneur-texte p:last-child { margin-bottom: 0; }

/* La page d'accueil est de la prose d'autrice, pas de la fiction : ses titres
   de section ont droit à la typographie graphique. */
.conteneur-texte--page h2 {
  font-family: var(--police-graphique);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: 1.35rem;
  line-height: 1.15;
  margin: calc(2 * var(--ligne)) 0 var(--ligne);
}

/* Les liens dans la zone de lecture : lisibles au repos, rouges à l'action. */
.conteneur-texte a { text-decoration: underline; text-underline-offset: 0.2em; }
.conteneur-texte a:hover { color: var(--rouge); }

/* -------------------------------------------------------------------- */
/* Lecture continue d'un thème                                           */
/* -------------------------------------------------------------------- */

.fiction {
  margin-bottom: 3rem;
  /* La marque de position deborde dans la gouttiere par marge negative : sans
     elle, padding + bordure poussaient le texte 24 px a droite de l'axe ou se
     trouve son propre titre. */
  margin-left: calc(-1 * (1.25rem + 4px));
  padding-left: 1.25rem;
  border-left: 4px solid transparent;
  scroll-margin-top: 3.5rem;
}

/* État 2 — le texte où le lecteur vient d'arriver. Zéro ou une occurrence par
   page : elle n'existe que s'il a cliqué pour venir ici. */
.fiction:target { border-left-color: var(--rouge); }

/* Le numéro porte lui-même le lien : plus de mention répétée sous chaque
   texte, qui hachait la lecture au fil toutes les quatre lignes. */
.fiction .numero {
  margin: 0 0 1em;
  font-size: 1rem;
}

.fiction .numero a {
  display: inline-block;
  font-family: var(--police-mono);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  border: 2px solid var(--noir);
  padding: 0.25em 0.7em;
  text-decoration: none;
}

.fiction .numero a:hover {
  background: var(--noir);
  color: var(--blanc);
}

.separateur {
  border: none;
  border-top: 3px solid var(--noir);
  margin: 0 0 3rem;
}

/* -------------------------------------------------------------------- */
/* Texte lu seul                                                         */
/* -------------------------------------------------------------------- */

.numero-seul {
  font-family: var(--police-mono);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  margin: 0 0 2rem;
}

/* État 5 — la fin d'un texte lu seul. Toujours après la dernière ligne, donc
   jamais dans le même écran que le reste du rouge. */
.chute {
  color: var(--rouge);
  font-size: 0.8rem;
  margin: 2.5rem 0 0;
  letter-spacing: 0.3em;
}

/* -------------------------------------------------------------------- */
/* Réactif                                                               */
/* -------------------------------------------------------------------- */

@media (max-width: 480px) {
  .couverture { padding: 2.75rem var(--gouttiere); }
  .couverture--accueil { padding: 3.5rem var(--gouttiere); }
  /* Pas de surcharge d'interligne ici : elle sortirait le rythme de la grille. */
  .conteneur-texte { padding: 2.5rem var(--gouttiere); }
  .section-cartes { padding: 0 var(--gouttiere) 3rem; }
  .couverture + .section-cartes { padding-top: 2rem; }
  .bandeau__interieur { padding: 1rem var(--gouttiere); }
  .nav-principale ul { gap: 1rem; }
  .fiction { margin-left: calc(-1 * (0.9rem + 4px)); padding-left: 0.9rem; }
  .separateur { margin-left: 0; }
}

/* -------------------------------------------------------------------- */
/* Impression                                                            */
/* -------------------------------------------------------------------- */

@media print {
  .bandeau, .filet, .chute, .lien-evitement, .progression, .ruban { display: none; }
  .couverture { background: none; color: var(--noir); padding: 1rem 0; }
  .conteneur-texte { max-width: none; padding: 0; }
}