/* ═══════════════════════════════════════════════════════════════════
   À PROPOS — en-tête, chapitres, citations, palmarès
   Dépend de : tokens.css, base.css, nav.css, theme.css

   SOMMAIRE
   01. En-tête de page
   02. Image de couverture
   03. Chapitre
   04. Citation détachée
   05. Trois volets
   06. Palmarès
   07. Responsive
   ═══════════════════════════════════════════════════════════════════ */

/* ── 01. EN-TÊTE DE PAGE ────────────────────────────────────────────*/
.page-head {
  padding-top: calc(var(--nav-h) + var(--section-py));
  padding-bottom: var(--s-9);
}

.page-head .eyebrow { margin-bottom: var(--s-5); }

.page-title {
  max-width: 18ch;
  font-size: var(--fs-h1);
  font-weight: var(--fw-normal);
  line-height: var(--lh-title);
  letter-spacing: var(--tr-title);
}
.page-title em { font-style: italic; }

.page-head .lead { margin-top: var(--s-6); }


/* ── 02. IMAGE DE COUVERTURE ────────────────────────────────────────
   Pleine largeur, sans texte par-dessus : l'image ouvre le récit,
   elle ne lui sert pas de fond.                                   */
.cover img {
  aspect-ratio: 21 / 9;
  object-fit: cover;
  object-position: center 38%;   /* cadre sur le geste, pas sur le sol */
  background: var(--c-surface);
}

.cover figcaption {
  max-width: var(--page-max);
  margin: var(--s-4) auto 0;
  padding-inline: var(--gutter);
  font-size: var(--fs-caption);
  color: var(--c-ink-soft);
}


/* ── 03. CHAPITRE ───────────────────────────────────────────────────
   Même gabarit que les étapes du Parcours : repère, récit, image.
   Les neuf chapitres se lisent donc de la même façon.             */
.chapters {
  padding-block: var(--section-py);
}

.chapter {
  display: grid;
  grid-template-columns: 20rem minmax(0, 1fr) 30rem;
  gap: var(--s-8);
  padding-block: var(--s-9);
  border-bottom: 1px solid var(--c-line);
}

.chapter:last-of-type { border-bottom: none; }

/* Variante pleine largeur : le récit occupe les colonnes 2 et 3 */
.chapter--wide .chapter-body {
  grid-column: 2 / -1;
  max-width: none;
}

/* Colonne repère */
.chapter-marker {
  position: sticky;
  top: calc(var(--nav-h) + 6rem);
  align-self: start;
}

.chapter-num {
  font-size: var(--fs-h2);
  line-height: 1;
  letter-spacing: var(--tr-title);
  color: var(--c-ink-soft);
}

.chapter-name {
  margin-top: var(--s-5);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
}

/* Colonne récit */
.chapter-body { max-width: 60rem; }

.chapter-title {
  margin-bottom: var(--s-5);
  font-size: var(--fs-h3);
  font-weight: var(--fw-normal);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-title);
}
.chapter-title em { font-style: italic; }

.chapter-text {
  max-width: 56rem;      /* ~70 caractères par ligne */
  color: var(--c-ink-soft);
}
.chapter-text + .chapter-text { margin-top: var(--s-4); }

/* Colonne image */
.chapter-figure img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--c-surface);
}


/* ── 04. CITATION DÉTACHÉE ──────────────────────────────────────────
   Un seul traitement pour toutes les citations de la page.        */
.pull {
  max-width: 76rem;
  margin-top: var(--s-7);
  padding-left: var(--s-5);
  border-left: 2px solid var(--c-ink);
}

.pull p {
  font-size: var(--fs-lead);
  font-style: italic;
  line-height: var(--lh-lead);
  color: var(--c-ink);
}

.pull footer {
  margin-top: var(--s-3);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--c-ink-soft);
}

/* Version pleine section, pour la citation centrale */
.quote-section {
  padding-block: var(--section-py);
  background: var(--c-surface);
}

.quote-section blockquote {
  max-width: 92rem;
  font-size: var(--fs-h2);
  font-weight: var(--fw-normal);
  line-height: var(--lh-title);
  letter-spacing: var(--tr-title);
}
.quote-section em { font-style: italic; }

.quote-section footer {
  margin-top: var(--s-6);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--c-ink-soft);
}


/* ── 05. TROIS VOLETS ───────────────────────────────────────────────
   Contenu parallèle : trois moments d'une même bascule, donc trois
   blocs identiques côte à côte.                                   */
.panels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
}

.panel {
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-line);
}

.panel-label {
  margin-bottom: var(--s-3);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--c-ink-soft);
}

.panel-title {
  margin-bottom: var(--s-4);
  font-size: var(--fs-h3);
  font-weight: var(--fw-normal);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-title);
}

.panel-text {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-ink-soft);
}


/* ── 06. PALMARÈS ───────────────────────────────────────────────────
   Deux listes distinctes : les titres d'un côté, les volumes de
   l'autre. Mélangés, on ne sait plus ce qu'on lit.                */
.awards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
}

.award {
  padding: var(--s-6) var(--s-5);
  background: var(--c-page);
}

.award-name {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
}

.award-detail {
  margin-top: var(--s-2);
  font-size: var(--fs-caption);
  line-height: var(--lh-heading);
  color: var(--c-ink-soft);
}

/* Compteurs de carrière */
.figures {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-7);
  margin-top: var(--s-9);
  padding-top: var(--s-7);
  border-top: 1px solid var(--c-line);
}

.figure-value {
  font-size: var(--fs-h2);
  line-height: 1;
  letter-spacing: var(--tr-title);
}

.figure-label {
  margin-top: var(--s-3);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--c-ink-soft);
}


/* ── 07. RESPONSIVE ─────────────────────────────────────────────────*/

@media (max-width: 1300px) {
  .chapter { grid-template-columns: 20rem minmax(0, 1fr); }

  .chapter-figure {
    grid-column: 2;
    max-width: 46rem;
    margin-top: var(--s-6);
  }
  .chapter-figure img { aspect-ratio: 3 / 2; }

}

@media (max-width: 1024px) {
  .chapter {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }

  .chapter-marker {
    position: static;
    display: flex;
    align-items: baseline;
    gap: var(--s-5);
  }
  .chapter-name { margin-top: 0; }

  .chapter-figure {
    grid-column: 1;
    max-width: none;
  }

  /* La grille n'a plus qu'une colonne : le récit large y revient,
     sinon il crée une colonne implicite hors gabarit. */
  .chapter--wide .chapter-body { grid-column: 1 / -1; }

  .panels { grid-template-columns: 1fr; gap: var(--s-8); }
  .cover img { aspect-ratio: 16 / 9; }
}

@media (max-width: 900px) {
  .awards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .awards  { grid-template-columns: 1fr; }
  .figures { grid-template-columns: 1fr; gap: var(--s-6); }
  .cover img { aspect-ratio: 4 / 3; }
}