/* ═══════════════════════════════════════════════════════════════════
   PARCOURS — en-tête de page, frise des étapes
   Dépend de : tokens.css, base.css, nav.css, theme.css

   La couleur ne décore pas cette page : elle la découpe. La carrière
   se lit en trois chapitres — la Côte d'Ivoire, l'Italie, les sommets
   — et chacun porte une couleur. On la retrouve à trois endroits et
   trois seulement : la légende sous le chiffre, le carré posé devant
   l'année de l'étape, et le trait sous l'année courante dans la barre.
   Tout le reste de la page est inchangé.

   SOMMAIRE
   01. En-tête de page
   02. Chapitres — la légende des trois couleurs
   03. Barre des années
   04. Étape
   05. Faits marquants
   06. Responsive
   ═══════════════════════════════════════════════════════════════════ */

/* ── 01. EN-TÊTE DE PAGE ────────────────────────────────────────────
   Une page de lecture n'a pas besoin d'un hero plein écran : le titre,
   une phrase, un repère chiffré, et on entre dans le contenu.      */
.page-head {
  padding-top: calc(var(--nav-h) + var(--section-py));
  padding-bottom: var(--section-py);
}

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

.page-title {
  max-width: 20ch;
  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); }

/* Repère chiffré — la seule donnée mise en avant de la page */
.stat {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid var(--c-line);
}

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

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


/* ── 02. CHAPITRES ──────────────────────────────────────────────────
   Trois périodes, trois couleurs. Cette ligne est posée sous le
   repère chiffré : elle donne la clé de lecture avant que la couleur
   n'apparaisse plus bas, et c'est la seule fois où les trois se
   voient ensemble.                                                 */
.chapitres {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-7);
  margin-top: var(--s-5);
}

.chapitre {
  display: inline-flex;
  align-items: center;
  gap: 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);
}

.chapitre::before {
  content: '';
  flex: none;
  width: var(--s-2);
  height: var(--s-2);
  background: var(--chapitre-c);
}

/* La couleur du chapitre, portée par la légende, par l'étape et par
   le bouton d'année. Un seul jeu de règles pour les trois.        */
.chapitre--vert,  .step--vert,  .year-btn--vert  { --chapitre-c: var(--c-art-vert); }
.chapitre--rouge, .step--rouge, .year-btn--rouge { --chapitre-c: var(--c-art-rouge); }
.chapitre--bleu,  .step--bleu,  .year-btn--bleu  { --chapitre-c: var(--c-art-bleu); }


/* ── 03. BARRE DES ANNÉES ───────────────────────────────────────────
   Une seule navigation dans la page, discrète, collée sous la nav.
   Seule l'année courante prend une couleur, celle de son chapitre :
   la barre devient la légende de l'endroit où l'on se trouve.     */
.years {
  position: sticky;
  top: var(--nav-h);
  z-index: var(--z-sticky);
  background: var(--c-page);
  border-block: 1px solid var(--c-line);
}

.years-inner {
  display: flex;
  gap: var(--s-7);
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: var(--s-4);
}
.years-inner::-webkit-scrollbar { display: none; }

.year-btn {
  flex-shrink: 0;
  padding: var(--s-2) 0;
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-label);
  color: var(--c-ink-soft);
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color var(--t);
}
.year-btn:hover        { color: var(--c-ink); }
.year-btn[aria-current='true'] {
  color: var(--c-ink);
  border-bottom-color: var(--chapitre-c, var(--c-ink));
}


/* ── 04. ÉTAPE ──────────────────────────────────────────────────────
   Trois colonnes : le repère, le récit, l'image. Dans cet ordre, parce
   que c'est l'ordre de lecture — l'année situe, le titre annonce, la
   photo illustre. Même gabarit pour les neuf étapes.              */
.steps {
  padding-bottom: var(--section-py);
}

.step {
  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);
}

.step:last-child { border-bottom: none; }

/* Décalage d'ancre : nav (72px) + barre des années (~58px) + air */
.step { scroll-margin-top: calc(var(--nav-h) + 10rem); }

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

/* Le carré du chapitre, posé devant l'année. La colonne repère étant
   collante, il accompagne toute la lecture de l'étape.           */
.step-year {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  font-size: var(--fs-h2);
  line-height: 1;
  letter-spacing: var(--tr-title);
}

.step-year::before {
  content: '';
  flex: none;
  width: var(--s-3);
  height: var(--s-3);
  background: var(--chapitre-c);
}

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

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

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

/* Colonne image — en appui, jamais en tête */
.step-figure img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  /* Les visages sont dans le haut du cadre : on ancre le recadrage en haut */
  object-position: 50% 18%;
  background: var(--c-surface);
}

.step-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);
}

.step-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);
}
.step-title em { font-style: italic; }

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


/* ── 05. FAITS MARQUANTS ────────────────────────────────────────────
   Sous le récit, les faits datés. Deux colonnes : la date, le fait. */
.facts {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-line);
}

.fact {
  display: grid;
  grid-template-columns: 14rem 1fr;
  gap: var(--s-5);
  padding-block: var(--s-4);
}
.fact + .fact { border-top: 1px solid var(--c-line-soft); }

.fact-date {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--c-ink-soft);
  padding-top: 0.3rem;
}

.fact-text {
  max-width: 52rem;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}


/* ── 06. RESPONSIVE ─────────────────────────────────────────────────*/

/* Sous 1300px l'image passe sous le récit, la lecture ne change pas */
@media (max-width: 1300px) {
  .step {
    grid-template-columns: 20rem minmax(0, 1fr);
  }

  .step-figure {
    grid-column: 2;
    max-width: 46rem;
    margin-top: var(--s-6);
  }

  .step-figure img { aspect-ratio: 3 / 2; }   /* recadrage ancré en haut, cf. règle de base */
}

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

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

  /* Tablette / téléphone : le 3/2 rognait trop les photos verticales
     (les têtes sortaient du cadre). On revient à un format portrait doux. */
  .step-figure img { aspect-ratio: 4 / 5; }

  .step-marker {
    position: static;
    display: flex;
    align-items: baseline;
    gap: var(--s-5);
    flex-wrap: wrap;
  }

  .step-club { margin-top: 0; }
  .step-role { flex-basis: 100%; margin-top: 0; }
}

@media (max-width: 560px) {
  .fact { grid-template-columns: 1fr; gap: var(--s-2); }
  .years-inner { gap: var(--s-6); }
}