/* ============================================================
   SpiLi — La Frise du temps
   Dispositif autonome. Ne dépend que de css/tokens.css.
   Aucune valeur de couleur en dur : tout passe par les jetons.
   ============================================================ */

.frise-wrap {
  background: var(--spili-fond-eleve);
  border: 1px solid var(--spili-trait-faible);
  border-radius: var(--spili-rayon-lg);
  overflow: hidden;
}

/* ---------- Barre d'outils ---------- */

.frise-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spili-pas) * 2);
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--spili-pas) * 2);
  border-bottom: 1px solid var(--spili-trait-faible);
}

.frise-groupe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spili-pas);
  align-items: center;
}

.frise-groupe > .frise-legende-titre {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--spili-texte-faible);
  margin-right: calc(var(--spili-pas) / 2);
}

.frise-toolbar button {
  font: inherit;
  font-size: 0.84rem;
  color: var(--spili-texte-doux);
  background: transparent;
  border: 1px solid var(--spili-trait);
  border-radius: var(--spili-rayon);
  padding: 6px 12px;
  cursor: pointer;
  transition: color var(--spili-transition), background var(--spili-transition), border-color var(--spili-transition);
}

.frise-toolbar button:hover {
  color: var(--spili-texte);
  border-color: var(--spili-accent);
}

.frise-toolbar button[aria-pressed="true"] {
  color: var(--spili-fond);
  background: var(--spili-texte);
  border-color: var(--spili-texte);
}

.frise-toolbar button:focus-visible,
.frise-jalon:focus-visible {
  outline: 2px solid var(--spili-accent);
  outline-offset: 2px;
}

/* ---------- Piste ---------- */

/* La piste défile dans les deux sens à l'intérieur de sa propre
   fenêtre : le panneau de détail reste ainsi toujours visible
   sous la frise, sans avoir à faire défiler la page entière. */
.frise-piste {
  position: relative;
  overflow: auto;
  max-height: min(62vh, 520px);
  padding: calc(var(--spili-pas) * 3) 0 calc(var(--spili-pas) * 2);
  scrollbar-color: var(--spili-trait) transparent;
}

.frise-rail {
  position: relative;
  min-width: 100%;
  padding: 0 calc(var(--spili-pas) * 3);
}

/* Bandes d'ère : largeur égale par ère, pour que le Moyen Âge
   ne soit pas écrasé par le XXe siècle. L'échelle est donc
   volontairement non linéaire — c'est indiqué à l'utilisateur. */
.frise-eres {
  position: sticky;
  /* Le décalage négatif est voulu — la bande d'ères glisse partiellement hors
     champ en se collant —, mais il se comptait depuis le haut de la fenêtre,
     donc derrière l'en-tête. Il se compte désormais depuis le bas de
     l'en-tête, et le geste reste le même. */
  top: calc(var(--spili-entete) - var(--spili-pas) * 3);
  z-index: 2;
  display: flex;
  gap: 2px;
  margin-bottom: calc(var(--spili-pas) * 2);
  background: var(--spili-fond-eleve);
}

.frise-ere {
  flex: 1 0 260px;
  padding: 6px 10px;
  background: var(--spili-fond-carte);
  border-top: 2px solid var(--spili-trait);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--spili-texte-doux);
  white-space: nowrap;
}

.frise-lignes {
  display: flex;
  gap: 2px;
}

.frise-colonne {
  flex: 1 0 260px;
  display: flex;
  flex-direction: column;
  gap: var(--spili-pas);
  padding: var(--spili-pas) 0;
  border-left: 1px solid var(--spili-trait-faible);
  padding-left: var(--spili-pas);
}

/* ---------- Jalon ---------- */

.frise-jalon {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  color: var(--spili-texte);
  background: var(--spili-fond-carte);
  border: 1px solid var(--spili-trait-faible);
  border-left: var(--spili-notation) solid var(--spili-texte);
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color var(--spili-transition), background var(--spili-transition);
}

.frise-jalon:hover {
  background: var(--spili-fond-eleve);
  border-color: var(--spili-trait);
  border-left-color: var(--spili-accent);
}

.frise-jalon[aria-current="true"] {
  border-color: var(--spili-accent);
  border-left-color: var(--spili-accent);
  background: var(--spili-accent-voile);
}

/* Le degré de certitude est porté par le style du filet, pas par sa
   couleur : lisible en monochrome, et conforme à WCAG 1.4.1. */
.frise-jalon[data-certitude="probable"]  { border-left-style: dashed; }
.frise-jalon[data-certitude="tradition"] { border-left-style: dotted; }

.frise-jalon.is-masque { display: none; }

.frise-annee {
  display: block;
  font-family: var(--spili-data);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--spili-texte);
  margin-bottom: 3px;
}

.frise-titre {
  display: block;
  font-size: 0.92rem;
  line-height: 1.35;
}

.frise-axe {
  display: block;
  margin-top: 5px;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--spili-texte-faible);
}

/* ---------- Pastilles de certitude ---------- */

.pastille {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--spili-texte-doux);
}

.pastille::before {
  content: "";
  width: 22px;
  height: var(--spili-notation);
  background: var(--spili-trame-atteste);
}

.pastille[data-certitude="probable"]::before  { background: var(--spili-trame-probable); }
.pastille[data-certitude="tradition"]::before { background: var(--spili-trame-rapporte); }

/* ---------- Panneau de détail ---------- */

.frise-detail {
  border-top: 1px solid var(--spili-trait-faible);
  padding: calc(var(--spili-pas) * 3);
  min-height: 150px;
}

.frise-detail h3 {
  font-family: var(--spili-titre);
  font-size: 1.35rem;
  margin: 6px 0 4px;
  color: var(--spili-texte);
}

.frise-detail .detail-annee {
  font-family: var(--spili-data);
  color: var(--spili-texte);
  font-size: 0.88rem;
  letter-spacing: 0.04em;
}

.frise-detail p { color: var(--spili-texte-doux); line-height: 1.65; max-width: 62ch; }

.frise-meta {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spili-pas) * 2);
  margin-top: calc(var(--spili-pas) * 2);
  padding-top: calc(var(--spili-pas) * 2);
  border-top: 1px dashed var(--spili-trait-faible);
  font-size: 0.8rem;
  color: var(--spili-texte-faible);
}

.frise-meta strong {
  display: block;
  font-weight: normal;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--spili-texte-faible);
  margin-bottom: 3px;
}

.frise-meta span { color: var(--spili-texte-doux); }

/* Mise au point : correction d'une affirmation répandue.
   C'est le marqueur éditorial différenciant du SpiLi. */
.mise-au-point {
  margin-top: calc(var(--spili-pas) * 2);
  padding: 12px 14px;
  background: var(--spili-fond-carte);
  border-top: var(--spili-notation) solid var(--spili-texte);
  max-width: 62ch;
}

.mise-au-point strong {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--spili-texte-faible);
  font-family: var(--spili-data);
  margin-bottom: 5px;
}

.mise-au-point p { margin: 0; font-size: 0.9rem; }

.frise-vide {
  color: var(--spili-texte-faible);
}

/* ---------- Bandeau de statut du corpus ---------- */

.frise-statut {
  display: flex;
  gap: var(--spili-pas);
  align-items: baseline;
  padding: 12px calc(var(--spili-pas) * 2);
  background: var(--spili-fond-carte);
  border-bottom: 1px solid var(--spili-trait-faible);
  font-size: 0.82rem;
  color: var(--spili-texte-doux);
}

.frise-statut b {
  color: var(--spili-texte);
  font-weight: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.72rem;
  white-space: nowrap;
}

/* ---------- Petits écrans ---------- */

@media (max-width: 760px) {
  .frise-toolbar { justify-content: flex-start; }
  .frise-ere,
  .frise-colonne { flex-basis: 220px; }
  .frise-detail { padding: calc(var(--spili-pas) * 2); }
}

/* ============================================================
   Le corpus peint et le raccordement à l'Atlas (lot 6)
   ------------------------------------------------------------
   Les trente jalons vivent désormais dans le document. Sans
   script, ils se lisent à la suite ; avec, `frise.js` masque ce
   bloc et recopie le jalon choisi dans le panneau de détail.
   Les deux régimes affichent le même texte, parce que c'est
   littéralement le même.
   ============================================================ */

.frise-corpus {
  margin-top: 40px;
}
.frise-corpus[hidden] {
  display: none;
}

.frise-corpus-titre {
  font-family: var(--spili-data);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--spili-texte-faible);
  margin: 0 0 20px;
}

.frise-fiche {
  padding: 26px 0 26px 20px;
  border-top: 1px solid var(--spili-trait);
  border-left: var(--spili-notation) solid var(--spili-trait);
}
.frise-fiche:last-child {
  border-bottom: 1px solid var(--spili-trait);
}
.frise-fiche h3 {
  margin: 8px 0 12px;
}
/* La trame de la notation, la même que sur le rail et que sur les fiches de
   l'Atlas : pleine, tiretée, pointillée. Elle survit au monochrome. */
.frise-fiche .detail-annee + h3 {
  margin-top: 6px;
}

/* Le raccordement du §6 : le lien qui remplace le curseur temporel. */
.frise-raccord {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  margin: 16px 0 0;
  padding: 12px 16px;
  background: var(--spili-accent-trace);
  border-left: var(--spili-notation) solid var(--spili-accent);
  max-width: 62ch;
}
.frise-raccord > strong {
  font-family: var(--spili-data);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--spili-texte-faible);
  flex: 0 0 100%;
}
.frise-raccord-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  font-family: var(--spili-data);
  font-size: 12.5px;
}
.frise-raccord-item a {
  color: var(--spili-accent);
}
.frise-raccord-item a:hover,
.frise-raccord-item a:focus-visible {
  color: var(--spili-accent-fort);
}
.frise-raccord-station {
  color: var(--spili-texte-faible) !important;
  font-size: 11.5px;
}
.frise-raccord-station:hover,
.frise-raccord-station:focus-visible {
  color: var(--spili-accent-fort) !important;
}

/* Le rail : ses jalons sont des ancres depuis le lot 6, plus des boutons.
   Le lien ne doit rien changer à leur allure. */
a.frise-jalon {
  text-decoration: none;
  color: inherit;
  display: block;
}

.frise-toolbar[hidden],
.frise-detail[hidden] {
  display: none;
}