/* Page parcours : une seule colonne, faite pour lire. L'année en repère collé sous l'en-tête,
   puis chaque entrée : la date en mono, le titre en capitales fines (le soleil marque les
   entrées fortes), le texte, l'image ou la vidéo en couleur. Les variables, les LED, les
   prises et les en-têtes de section viennent de site.css. */

.parcours__intro { margin-bottom: var(--e-6); }

/* Filtre par type : une rangée de libellés cochables, la LED dit lequel est choisi.
   Caché tant que parcours.js ne l'a pas activé. */
.filtre { display: grid; gap: var(--e-2); margin-bottom: var(--e-4); }
.filtre[hidden] { display: none; }
.filtre__nom { margin: 0; }
.filtre__liste { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.filtre__bouton {
  display: inline-flex; align-items: center; gap: var(--e-2);
  min-height: 2.75rem;
  padding: 0.2em var(--e-4) 0;
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  background: transparent;
  color: var(--pierre);
  font-family: var(--titre);
  font-size: var(--taille-s);
  letter-spacing: var(--chasse-libelle);
  text-transform: uppercase;
  cursor: pointer;
}
.filtre__bouton:hover { color: var(--ivoire); border-color: var(--bronze); }
.filtre__bouton[aria-pressed="true"] { color: var(--ivoire); border-color: var(--bronze); }
.filtre__bouton[aria-pressed="true"] .led { background: var(--soleil); border-color: var(--soleil); }

/* Raccourcis vers les années : une rangée qui défile sur le côté */
.annees {
  display: flex; gap: var(--e-1);
  margin-bottom: var(--e-7);
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--filet);
}
.annees a {
  flex: none;
  display: inline-flex; align-items: center;
  min-height: 2.75rem;
  padding-inline: var(--e-2);
  color: var(--pierre);
  font-family: var(--mono);
  font-size: var(--taille-xs);
  text-decoration: none;
}
.annees a:first-child { padding-left: 0; }
.annees a:hover { color: var(--soleil-clair); }
.annees a[hidden] { display: none; }

/* Une année : son repère reste collé sous l'en-tête du site */
.parcours { max-width: 44rem; }
.annee[hidden] { display: none; }
.annee + .annee { margin-top: var(--e-7); }
.annee__titre {
  position: sticky;
  top: var(--h-entete, 6.5rem);
  z-index: 5;
  margin: 0;
  padding-block: var(--e-3);
  background: var(--nuit);
  scroll-margin-top: var(--h-entete, 6.5rem);
}
.annee__titre .tete__nom { font-size: var(--taille-xl); letter-spacing: 0.2em; }
.annee__liste { list-style: none; margin: 0; padding: 0; }
.annee__item { padding-block: var(--e-6); border-bottom: 1px solid var(--filet); }
.annee__item:last-child { border-bottom: 0; }
.annee__item[hidden] { display: none; }

/* Une entrée */
.etape { display: grid; gap: var(--e-4); scroll-margin-top: calc(var(--h-entete, 6.5rem) + 4rem); }
.etape:target .etape__titre { color: var(--soleil-clair); }
.etape__meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-1) var(--e-4);
  margin: 0;
  font-family: var(--mono);
  font-size: var(--taille-xs);
  letter-spacing: 0.04em;
  color: var(--pierre);
}
.etape__date { color: var(--bronze); }
.etape__type, .etape__lieu { text-transform: uppercase; }
.etape__titre {
  margin: 0;
  font-size: var(--taille-l);
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-transform: uppercase;
}
.etape__titre .led { width: 0.6875rem; height: 0.6875rem; vertical-align: 0.15em; }
.etape-fort .etape__titre { font-size: var(--taille-xl); font-weight: 300; }
.etape__soustitre { margin: 0; color: var(--pierre); }
.etape__media { margin-block: var(--e-2); }
.etape__image { max-width: 28rem; }
.etape__image img { width: 100%; height: auto; border-radius: var(--rayon); }
.etape__texte { max-width: var(--largeur-texte); }
.etape__texte p { margin: 0 0 var(--e-4); }
.etape__texte p:last-child { margin-bottom: 0; }

/* Mentions de presse sous une entrée */
.etape__presse { display: grid; gap: var(--e-3); padding-left: var(--e-4); border-left: 1px solid var(--bronze); }
.etape__presse-titre { margin: 0; }
.etape__presse .mention__meta { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-3); margin: 0; font-family: var(--mono); font-size: var(--taille-xs); color: var(--pierre); text-transform: uppercase; }
.etape__presse .mention__source { color: var(--ivoire); font-weight: 400; }
.etape__presse .mention__titre { margin: 0; font-size: var(--taille-s); }