/* Page components. First pass: the definitive treatments are frozen in the
 * Claude Design session (plan, Task 4). Every rule here is written to hold in
 * both themes through the tokens, never through a hard-coded colour.
 */

/* La largeur n'est plus bornée ici : le bandeau d'édition s'étend d'un bord à
 * l'autre, et au-delà de 78rem c'est la grille qui centre la colonne de lecture
 * dans la fenêtre entière plutôt que dans une boîte de 68rem. En deçà, la
 * borne est reposée sur `.edition__colonnes` — sans quoi le sommaire, qui n'a
 * pas de mesure propre, s'étalerait sur toute la largeur. */
.edition {
  max-width: none;
  margin: 0 auto;
  counter-reset: chapitre;
}

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

/* Banners run wide; running text keeps to the reading measure. */
.edition__corps > *,
.chapitre > * {
  max-width: var(--mesure);
  margin-inline: auto;
}

.edition__bandeau,
.chapitre__bandeau {
  max-width: 100%;
  margin: 0 0 2rem;
}

/* Le bandeau d'édition sort de la colonne et occupe la largeur de la fenêtre,
 * sur le même nuit que le chrome : la bande ne fait plus qu'un avec l'en-tête
 * au lieu de flotter sous lui. L'image est `contain` et non `cover` — elle
 * porte le titre gravé, qu'un recadrage amputerait. */
.edition__bandeau {
  position: relative;
  width: 100vw;
  max-width: none;
  margin-inline: calc(50% - 50vw);
  margin-bottom: 3.5rem;
  padding: 0;
  overflow: hidden;
  background: var(--nuit-profonde);
}

.edition__bandeau img {
  display: block;
  max-width: min(72rem, 100%);
  max-height: 76vh;
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  border-radius: 0;
}

.chapitre__bandeau img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 4px;
}

/* Masquage visuel, deux usages, une seule règle.
 *
 * Le bandeau d'édition porte déjà le titre gravé : le h1 reste dans le document
 * pour les lecteurs d'écran et le référencement, mais ne s'affiche pas. Le
 * titre visible et la baseline ont disparu de l'en-tête avec leurs règles.
 *
 * Même parti pour le h2 d'un chapitre précédé de son bandeau : le numéro et le
 * titre court y sont gravés, les réafficher juste en dessous les répète. Le h2
 * reste dans le document — structure, sommaire, ancres, référencement. */
.visuellement-masque,
.chapitre__bandeau + h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Table of contents */
.sommaire {
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
  padding: 1.5rem 0;
  margin-bottom: 4rem;
}

.sommaire__titre {
  font-family: var(--font-titre);
  font-size: 1.125rem;
  margin: 0 0 0.75rem;
}

.sommaire ol {
  margin: 0;
  padding-left: 1.5rem;
}

.sommaire li {
  margin-bottom: 0.4rem;
}

.sommaire a {
  color: var(--texte);
  /* --filet is too pale against the page to read as a link at all. */
  text-decoration-color: var(--texte-doux);
}

/* Spells out the convention rather than leaving the reader to infer it from
 * 21 bold runs. */
.sommaire__note {
  margin: 1.25rem 0 0;
  color: var(--texte-doux);
  font-size: 0.875rem;
  line-height: 1.5;
}

.sommaire__note strong {
  color: var(--texte);
}

.sommaire a:hover {
  color: var(--accent);
}

/* Direction B retenue : sur une page de quelque 53 000 pixels, le sommaire doit
 * dire où l'on se trouve. Un observateur d'intersection côté site pose
 * aria-current sur l'entrée du chapitre en cours ; toute la mise en avant tient
 * dans ces règles. */
.sommaire li[aria-current] > a {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}

.sommaire li[aria-current]::marker {
  color: var(--accent);
}

/* Once there is room in the margin, the table of contents moves there and stays
 * visible while the body scrolls — the point being to jump between chapters
 * while proofreading, without scrolling back to the top each time. */
@media (min-width: 78rem) {
  /* Trois colonnes plutôt que deux : la colonne de lecture occupe celle du
   * milieu, donc elle est centrée dans la fenêtre. À deux colonnes, le sommaire
   * poussait le texte vers la droite et l'axe de lecture n'était centré nulle
   * part. Les deux marges sont libres et symétriques ; le sommaire se range au
   * bord intérieur de celle de gauche. */
  .edition__colonnes {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--mesure) minmax(0, 1fr);
    gap: 0 3rem;
    align-items: start;
    max-width: none;
  }

  .edition__corps {
    grid-column: 2;
  }

  /* Dans la colonne, la mesure est déjà celle de la piste : la reposer sur
   * chaque bloc rétrécirait une deuxième fois, et les bandeaux de chapitre
   * avec. */
  .edition__corps > *,
  .chapitre > *,
  .chapitre__bandeau {
    max-width: 100%;
  }

  .sommaire {
    grid-column: 1;
    justify-self: end;
    width: 15rem;
    position: sticky;
    top: 2rem;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    margin: 0;
    padding: 0 0 0 1.25rem;
    border: 0;
    border-left: 1px solid var(--filet);
    font-size: 0.9375rem;
    line-height: 1.45;
  }

  .sommaire ol {
    padding-left: 1.2rem;
  }

  .sommaire li {
    margin-bottom: 0.7rem;
  }

  /* Dans la marge, le filet gris de gauche devient le repère : le segment doré
   * se pose exactement dessus, à hauteur du chapitre courant. Le décalage suit
   * le padding-left du sommaire (1.25rem) plus le retrait de la liste (1.2rem),
   * moins l'épaisseur du filet. */
  .sommaire li[aria-current] {
    position: relative;
  }

  .sommaire li[aria-current]::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(-2.45rem - 1px);
    width: 2px;
    background: var(--or);
  }
}

/* Chapters */
.chapitre {
  counter-increment: chapitre;
  padding-top: 3rem;
  margin-bottom: 5rem;
  /* Un saut de chapitre ne colle pas le bandeau au bord haut de la fenêtre. */
  scroll-margin-top: 1.5rem;
}

/* Sans bandeau, le surtitre reste nécessaire pour situer le chapitre. */
.chapitre h2::before {
  content: 'Chapitre ' counter(chapitre);
  display: block;
  font-family: var(--font-texte);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.6rem;
}

/* Callouts. "À retenir" is the assertive one; the other two stay quieter. */
.callout {
  margin: 2.25rem auto;
  padding: 1.4rem 1.6rem;
  border-radius: 4px;
}

.callout p:last-child {
  margin-bottom: 0;
}

.callout__titre {
  font-family: var(--font-titre);
  font-size: 1.125rem;
  margin: 0 0 0.6rem;
}

/* « À retenir » et « Remarque » partagent leur géométrie — filets horizontaux,
 * pas de fond — et la forme de leur étiquette. Seules les deux couleurs les
 * distinguent, et c'est le propos : l'ancre cognitive parle en or, l'aparté
 * technique en bleu, sans qu'aucun des deux ne pose de masse colorée. */
.callout--a-retenir,
.callout--info {
  padding: 1.5rem 0 1.7rem;
  border-radius: 0;
  margin: 2.75rem auto;
}

/* Dans les deux cas l'étiquette est la partie discrète : l'accent vit dans le
 * corps pour l'« À retenir », et la « Remarque » ne doit pas peser autant. */
.callout--a-retenir .callout__titre,
.callout--info .callout__titre {
  font-family: var(--font-texte);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 0.7rem;
}

.callout--a-retenir {
  border-top: 1px solid var(--retenir-filet);
  border-bottom: 1px solid var(--retenir-filet-bas);
}

.callout--a-retenir .callout__titre {
  color: var(--retenir-filet);
}

.callout--a-retenir p:not(.callout__titre) {
  font-family: var(--font-titre);
  /* Romain et non italique : l'italique tenait la formule à distance du texte,
   * mais la faisait aussi lire comme une citation. En romain, Playfair n'est
   * servi qu'en 400 et 700 — le 500 retomberait sur le 400 et la formule
   * s'affadirait. D'où 700, avec un corps très légèrement réduit. */
  font-style: normal;
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.62;
  text-align: left;
  hyphens: none;
}

/* Le filet vertical qui portait la remarque jusqu'ici la rangeait visuellement
 * avec l'anecdote, dont elle n'a ni la voix ni la fonction. */
.callout--info {
  border-top: 1px solid var(--bleu);
  border-bottom: 1px solid rgba(92, 138, 230, 0.3);
}

.callout--info .callout__titre {
  color: var(--bleu-texte);
}

.callout--anecdote {
  border-left: 3px solid var(--filet);
  padding-left: 1.4rem;
  font-style: italic;
  color: var(--texte-doux);
}

/* Lexicon: a discreet marker on the term, definition on demand. */
.footnote-ref {
  font-size: 0.75em;
  vertical-align: super;
  line-height: 0;
  position: relative;
}

.footnote-ref a {
  color: var(--accent);
  text-decoration: none;
  padding: 0 0.15em;
}

.lexique__bulle {
  position: absolute;
  left: 50%;
  bottom: 1.6em;
  z-index: 10;
  width: max-content;
  max-width: min(22rem, 80vw);
  transform: translateX(-50%);
  background: var(--surface);
  color: var(--texte);
  border: 1px solid var(--filet);
  border-top: 2px solid var(--accent);
  border-radius: 4px;
  box-shadow: 0 6px 24px rgb(0 0 0 / 22%);
  font-size: 0.9375rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5;
  padding: 0.7rem 0.9rem;
  text-align: left;
  vertical-align: baseline;
}

/* Glossary: the h1 that closes the edition, plus the footnote section.
 * Scoped to the body — matching `.edition > h1` also caught the edition title
 * and gave it a stray rule above it. */
.edition__corps > h1 {
  max-width: var(--mesure);
  font-size: 1.75rem;
  padding-top: 2rem;
  border-top: 1px solid var(--filet);
}

.footnotes {
  max-width: var(--mesure);
  margin: 0 auto;
  color: var(--texte-doux);
  font-size: 0.9375rem;
}

.footnotes ol {
  padding-left: 1.5rem;
}

.footnotes li {
  margin-bottom: 1rem;
}

.footnotes li:target {
  background: var(--surface);
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}

.footnote-backref {
  text-decoration: none;
}

/* Reading navigation — progress bar and floating chapter controls.
 *
 * Une édition fait quelque 53 000 pixels : sans repère, on ne sait ni où l'on
 * en est ni comment atteindre le chapitre suivant sans remonter au sommaire.
 * Les deux éléments sont posés par le gabarit et restent inertes sans
 * JavaScript — la barre à zéro, ce qui ne trompe personne. */
.progression {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--or);
  z-index: 60;
  transition: width 0.12s linear;
}

.nav-lecture {
  position: fixed;
  right: clamp(0.75rem, 2vw, 1.75rem);
  bottom: clamp(0.75rem, 2vw, 1.75rem);
  z-index: 55;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1px;
  background: var(--filet);
  border: 1px solid var(--filet);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgb(0 0 0 / 18%);
  font-family: var(--font-texte);
}

/* 44 px : la cible tactile minimale recommandée. Le fond du bloc est le filet,
 * l'interstice de 1px entre boutons le laisse voir — c'est lui qui sépare, pas
 * une bordure par bouton. */
.nav-lecture button,
.nav-lecture a {
  appearance: none;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  background: var(--surface);
  color: var(--texte);
  font: inherit;
  font-size: 0.8125rem;
  line-height: 1;
  min-height: 44px;
  min-width: 44px;
  padding: 0 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.nav-lecture button:hover,
.nav-lecture a:hover {
  background: var(--fond);
  color: var(--accent);
}

.nav-lecture button[disabled] {
  opacity: 0.35;
  cursor: default;
}

.nav-lecture__position {
  margin: 0;
  background: var(--surface);
  color: var(--texte-doux);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-lecture__glyphe {
  font-size: 1rem;
}

/* Sur petit écran le bloc se réduit aux glyphes : cinq libellés empilés dans le
 * coin mangeraient le texte qu'ils servent à parcourir. Il se couche aussi en
 * rangée — en colonne, il masquait la fin de plusieurs lignes sur une hauteur
 * de 230 px, alors qu'une bande basse se dépasse d'un coup de défilement. */
.nav-lecture__libelle {
  display: none;
}

@media (max-width: 47.9375rem) {
  .nav-lecture {
    flex-direction: row;
    align-items: stretch;
  }

  .nav-lecture__position {
    padding: 0 0.5rem;
    min-height: 0;
  }
}

@media (min-width: 48rem) {
  .nav-lecture__libelle {
    display: block;
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
  }

  .nav-lecture button,
  .nav-lecture a {
    justify-content: flex-start;
  }
}

/* The home page has its own stylesheet, loaded only there: it composes
 * edge-to-edge bands that nothing else on the site uses. */

/* Legal notice */
.page {
  max-width: var(--mesure);
  margin: 0 auto;
}

/* Le titre se posait juste sous l'en-tête, sans respiration : la page paraissait
 * commencer avant d'avoir commencé. Le filet ferme le bloc de titre et ouvre le
 * corps du texte, sur le même vocabulaire doré que l'édition. */
.page__titre {
  margin-top: 4.5rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--accent);
}

.page__titre + h2 {
  margin-top: 2.5rem;
}

@media (max-width: 40rem) {
  .page__titre {
    margin-top: 2.75rem;
  }
}

/* Une ancre atteinte ne colle pas au bord haut de la fenêtre. Le défilement
 * doux, lui, est posé sur `html` dans base.css et neutralisé sous
 * `prefers-reduced-motion` — ce commentaire affirmait auparavant le contraire,
 * hérité d'un état où le doux n'était pas encore adopté. */
:target {
  scroll-margin-top: 1.5rem;
}

/* Coupure de fin de chapitre : sans elle, la dernière ligne d'un chapitre et le
 * bandeau du suivant se touchent, et la séquence se lit comme un seul bloc.
 * Vaguelette dorée centrée — le trait reprend celui de l'anneau. */
.separateur-vague {
  display: flex;
  justify-content: center;
  width: min(var(--mesure), 100%);
  margin: 4rem auto 0;
  color: var(--accent);
}

.separateur-vague svg {
  display: block;
  width: clamp(9rem, 26vw, 15rem);
  height: auto;
}

@media (max-width: 40rem) {
  .separateur-vague {
    margin: 2.75rem auto 0;
  }
}

/* Respiration entre l'annonce de l'édition (bandeau 16:9 pleine largeur) et le
 * premier bandeau de chapitre : sans elle, deux images se succèdent et le
 * lecteur les prend pour une seule séquence. Filet doré qui s'estompe aux deux
 * extrémités ; la vaguelette, elle, est réservée aux fins de chapitre. */
.separateur-filet {
  width: min(var(--mesure), 100%);
  height: 1px;
  margin: 4.5rem auto 5rem;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.45;
}

@media (max-width: 40rem) {
  .separateur-filet {
    margin: 3rem auto 3.25rem;
  }
}

/* Titre posé au milieu d'un filet : la même coupure dorée que sous le bandeau
 * d'édition, ouverte pour laisser passer le mot. Les filets élastiques centrent
 * le texte d'eux-mêmes ; le 400 lui retire le gras du h1, trop appuyé une fois
 * la ligne dorée posée de part et d'autre. */
.titre-filet,
.edition__corps > h1.titre-filet {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-weight: 400;
  border-top: 0;
}

.titre-filet::before,
.titre-filet::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent));
  opacity: 0.45;
}

.titre-filet::after {
  background: linear-gradient(90deg, var(--accent), transparent);
}