/* =========================================================================
   Birdflow v2, composants transverses
   grille, calque de nuit, en-tête, boutons, puces, fiches, lecteur,
   tiroir, curseur, téléscripteur, cartes
   ========================================================================= */

/* ---------- Conteneur de grille ---------- */
.g {
  display: grid;
  grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
  margin-inline: var(--marge);
}

main, .colophon { position: relative; z-index: var(--z-contenu); }

/* ---------- Grille visible ---------- */
.grille {
  position: fixed;
  inset: 0;
  z-index: var(--z-grille);
  pointer-events: none;
}
.grille__filets {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--marge);
  right: var(--marge);
}
.grille__filets i {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  left: calc(100% / var(--colonnes) * var(--i));
  margin-left: -0.5px;
  background: var(--trait);
  opacity: 0.7;
  transform-origin: 50% 0;
  transition: background-color 600ms var(--c-interface), opacity 600ms var(--c-interface);
}
.grille__filets i:last-child { margin-left: -1px; }
:root[data-theme="dark"] .grille__filets i { opacity: 1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .grille__filets i { opacity: 1; } }
@media (min-width: 768px) and (max-width: 1023px) {
  .grille__filets i:nth-child(n+10) { display: none; }
  .grille__lon:nth-of-type(n+10) { display: none; }
}
@media (max-width: 767px) {
  .grille__filets i:nth-child(n+6) { display: none; }
  .grille__filets i { opacity: 0.45 !important; }
  .grille__lon { display: none; }
}
body.fond-nuit .grille__filets i { background: var(--nuit-trait-fort); opacity: 0.6; }

.grille__lon {
  position: absolute;
  top: calc(var(--entete) + 12px);
  left: calc(var(--marge) + (100% - var(--marge) * 2) / var(--colonnes) * var(--i));
  padding-left: 6px;
  font-family: var(--f-mono);
  font-size: 12.5px;
  letter-spacing: 0;
  color: var(--nuit-graphite);
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--d-etat) var(--c-interface);
  font-variant-numeric: tabular-nums;
}
body.mode-passage .grille__lon { opacity: 1; }

/* ---------- Règle de latitude (Passage, Atlas) ---------- */
.regle-latitude {
  position: fixed;
  right: 8px;
  top: 20vh;
  bottom: 20vh;
  width: calc(var(--marge) - 12px);
  min-width: 26px;
  z-index: var(--z-flottant);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--d-etat) var(--c-interface);
  color: var(--nuit-graphite);
  font-family: var(--f-mono);
  font-size: 13px;
}
body.mode-passage .regle-latitude { opacity: 1; }
.regle-latitude__grad {
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 1px;
  background: currentColor;
}
.regle-latitude__grad span {
  position: absolute;
  right: 12px;
  top: -6px;
  white-space: nowrap;
  writing-mode: horizontal-tb;
}
.regle-latitude__repere {
  position: absolute;
  right: 0;
  top: 0;
  width: 7px; height: 7px;
  margin-top: -3.5px;
  background: var(--nuit-rose);
  transform-origin: 50% 50%;
  rotate: 45deg;
}
.regle-latitude__valeur {
  position: absolute;
  right: 14px;
  top: 0;
  margin-top: -7px;
  white-space: nowrap;
  color: var(--nuit-rose-texte);
}
@media (max-width: 1023px) { .regle-latitude { display: none; } }

/* ---------- Calque de nuit ---------- */
.calque-nuit {
  position: fixed;
  inset: 0;
  z-index: var(--z-fond);
  background: var(--nuit);
  opacity: 0;
  pointer-events: none;
}
:root[data-theme="dark"] .calque-nuit { background: var(--nuit-profonde); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .calque-nuit { background: var(--nuit-profonde); } }

/* ---------- En-tête ---------- */
.entete {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: var(--z-entete);
  height: var(--entete);
  display: grid;
  grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
  align-items: center;
  padding-inline: var(--marge);
  color: var(--encre);
  transition: transform var(--d-etat) var(--c-interface), background-color var(--d-etat) var(--c-interface), color var(--d-etat) var(--c-interface);
}
.entete::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--trait);
  opacity: 0;
  transition: opacity var(--d-etat) var(--c-interface), background-color var(--d-etat) var(--c-interface);
}
.entete[data-etat="sur-photo"] {
  color: #FFFFFF;
  mix-blend-mode: difference;
}
.entete[data-etat="sur-photo"] .nav__num { color: #FFFFFF; opacity: 0.72; }
.entete[data-etat="papier"] {
  background: var(--papier-voile);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.entete[data-etat="papier"]::after { opacity: 1; }
.entete[data-etat="nuit"] {
  background: rgb(15 14 13 / 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--nuit-encre);
  --graphite: var(--nuit-graphite);
  --encre: var(--nuit-encre);
  --rose: var(--nuit-rose);
  --rose-texte: var(--nuit-rose-texte);
  --trait: var(--nuit-trait);
}
.entete[data-etat="nuit"]::after { opacity: 1; background: var(--nuit-trait); }
.entete.est-masque { transform: translateY(-100%); }

.logo {
  grid-column: 1 / span 3;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding-left: var(--gouttiere);
  min-height: 44px;
  align-self: center;
  line-height: 44px;
  white-space: nowrap;
}
.logo__mot {
  font-family: var(--f-affiche);
  font-weight: 300;
  font-style: normal;
  font-size: 28px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.logo__pays {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: var(--a-chapitre);
  text-transform: none;
  line-height: 1;
}

.nav { grid-column: 4 / span 6; }
.nav ol { display: flex; justify-content: space-between; align-items: center; }
.nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: var(--a-etiquette);
  text-transform: none;
}
.nav__num { color: var(--graphite); }
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 10px;
  height: 1px;
  background: var(--rose-texte);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--d-survol) var(--c-interface);
}
.entete[data-etat="sur-photo"] .nav a::after { background: #FFFFFF; }
.nav a[aria-current="true"]::after,
.nav a:hover::after { transform: scaleX(1); }

.reglages {
  grid-column: 10 / span 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 14px;
  padding-right: var(--gouttiere);
}

.bascule { position: relative; display: inline-flex; align-items: center; }
.bascule button {
  position: relative;
  min-height: 44px;
  min-width: 32px;
  padding: 0 4px;
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: var(--a-etiquette);
  text-transform: none;
  color: var(--graphite);
  transition: color var(--d-etat) var(--c-interface);
  text-align: center;
}
.entete[data-etat="sur-photo"] .bascule button { color: rgb(255 255 255 / 0.62); }
.bascule button[aria-pressed="true"] { color: var(--encre); }
.entete[data-etat="sur-photo"] .bascule button[aria-pressed="true"] { color: #FFFFFF; }
.bascule__trait {
  position: absolute;
  left: 0;
  bottom: 10px;
  width: 100px;
  height: 2px;
  background: var(--rose);
  transform-origin: 0 50%;
  transform: translateX(0) scaleX(0.3);
  transition: transform var(--d-etat) var(--c-interface);
  pointer-events: none;
}
.entete[data-etat="sur-photo"] .bascule__trait { background: #FFFFFF; }

.son-global {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin: 0 -10px;
}
.son-global__barres { display: inline-flex; align-items: center; gap: 2px; height: 14px; }
.son-global__barres i {
  display: block;
  width: 2px;
  background: currentColor;
  transform: scaleY(0.14);
  transform-origin: 50% 50%;
  transition: transform var(--d-etat) var(--c-interface);
}
.son-global__barres i:nth-child(1) { height: 6px; }
.son-global__barres i:nth-child(2) { height: 12px; }
.son-global__barres i:nth-child(3) { height: 9px; }
.son-global__barres i:nth-child(4) { height: 14px; }
.son-global[aria-pressed="true"] .son-global__barres i { transform: scaleY(1); animation: barre-son 1s ease-in-out infinite alternate; }
.son-global[aria-pressed="true"] .son-global__barres i:nth-child(1) { animation-duration: 0.9s; }
.son-global[aria-pressed="true"] .son-global__barres i:nth-child(2) { animation-duration: 1.1s; }
.son-global[aria-pressed="true"] .son-global__barres i:nth-child(3) { animation-duration: 0.8s; }
.son-global[aria-pressed="true"] .son-global__barres i:nth-child(4) { animation-duration: 1.3s; }
@keyframes barre-son { from { transform: scaleY(0.3); } to { transform: scaleY(1); } }
html[data-motion="reduced"] .son-global[aria-pressed="true"] .son-global__barres i { animation: none; transform: scaleY(1); }

.sommaire-bouton {
  display: none;
  min-height: 44px;
  padding: 0 0 0 8px;
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: var(--a-etiquette);
  text-transform: none;
}

@media (max-width: 1023px) {
  .nav { display: none; }
  .logo { grid-column: 1 / span 4; }
  .reglages { grid-column: 5 / -1; }
  .reglages .bascule { display: none; }
  .sommaire-bouton { display: inline-flex; align-items: center; }
}
@media (max-width: 767px) {
  .logo { grid-column: 1 / span 2; padding-left: 0; }
  .logo__mot { font-size: 24px; }
  .reglages { grid-column: 3 / -1; padding-right: 0; gap: 4px; }
}

/* ---------- Sommaire (mobile et tablette) ---------- */
.sommaire {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-tiroir) + 2);
  background: var(--papier);
  color: var(--encre);
  overflow-y: auto;
  padding: calc(var(--entete) + 24px) var(--marge) 32px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.sommaire__fermer { position: absolute; top: 6px; right: var(--marge); }
.sommaire ol { display: flex; flex-direction: column; border-top: 1px solid var(--trait); }
.sommaire li { border-bottom: 1px solid var(--trait); }
.sommaire a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  font-family: var(--f-affiche);
  font-weight: 300;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.sommaire a span:first-child {
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--a-etiquette);
  color: var(--graphite);
  min-width: 2.5ch;
}
.sommaire__reglages { display: flex; flex-wrap: wrap; gap: 24px; }

/* ---------- Boutons ---------- */
.bouton {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--encre);
  border-radius: var(--r-0);
  background: transparent;
  color: var(--encre);
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: var(--a-etiquette);
  text-transform: none;
  white-space: nowrap;
  transition: background-color var(--d-survol) var(--c-interface), color var(--d-survol) var(--c-interface), border-color var(--d-survol) var(--c-interface);
}
.bouton:hover { background: var(--encre); color: var(--papier); }
#passage .bouton:hover, .colophon .bouton:hover { color: var(--nuit); }
.bouton:disabled { opacity: 0.45; pointer-events: none; }
.bouton svg { width: 14px; height: 14px; flex: none; }

.lien {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: var(--a-etiquette);
  text-transform: none;
  color: var(--encre);
}
.lien::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 10px;
  height: 1px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: 100% 50%;
  opacity: 0.35;
  transition: transform 240ms var(--c-interface), opacity 240ms var(--c-interface);
}
.lien:hover::after { animation: trait-lien 480ms var(--c-interface) forwards; opacity: 1; }
@keyframes trait-lien {
  0% { transform: scaleX(1); transform-origin: 100% 50%; }
  49% { transform: scaleX(0); transform-origin: 100% 50%; }
  50% { transform: scaleX(0); transform-origin: 0 50%; }
  100% { transform: scaleX(1); transform-origin: 0 50%; }
}
.lien svg { width: 14px; height: 14px; flex: none; }
.fleche { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.25; }

/* ---------- Puces ---------- */
.puce {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 32px;
  margin-block: 6px;
  padding: 0 12px;
  border: 1px solid var(--trait-fort);
  border-radius: var(--r-puce);
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: var(--a-etiquette);
  text-transform: none;
  color: var(--encre);
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--d-survol) var(--c-interface), border-color var(--d-survol) var(--c-interface);
}
.puce::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  background: var(--encre);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform var(--d-survol) var(--c-interface);
}
.puce::after { content: ""; position: absolute; inset: -7px 0; }
.puce:hover { border-color: var(--encre); }
.puce[aria-pressed="true"] { color: var(--papier); border-color: var(--encre); }
#passage .puce[aria-pressed="true"] { color: var(--nuit); }
.puce[aria-pressed="true"]::before { transform: scaleY(1); }
.puce--fixe { pointer-events: none; font-size: 12.5px; height: 26px; margin: 0; }
.puce__x { width: 10px; height: 10px; margin-left: 8px; stroke: currentColor; stroke-width: 1.25; fill: none; }

/* ---------- Badge EXEMPLE ---------- */
.exemple {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border: 1px solid var(--trait-fort);
  border-radius: var(--r-puce);
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: var(--a-etiquette);
  text-transform: none;
  color: var(--graphite);
  vertical-align: middle;
  white-space: nowrap;
  cursor: help;
  font-style: normal;
}

/* ---------- Pastille UICN ---------- */
.uicn {
  position: relative;
  display: inline-block;
  min-height: 24px;
  perspective: 400px;
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: var(--a-etiquette);
  text-transform: none;
  vertical-align: middle;
}
.uicn::after { content: ""; position: absolute; inset: -10px -6px; }
.uicn__in {
  position: relative;
  display: inline-block;
  transform-style: preserve-3d;
  transition: transform 420ms var(--c-interface);
}
.uicn__face {
  display: inline-block;
  padding: 3px 8px;
  border: 1px solid var(--encre);
  border-radius: var(--r-puce);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: var(--papier-2);
  color: var(--encre);
  white-space: nowrap;
}
.uicn__face--dos {
  position: absolute;
  left: auto; right: 0; top: 0;
  transform: rotateY(180deg);
}
.uicn[data-code="VU"] .uicn__face,
.uicn[data-code="EN"] .uicn__face,
.uicn[data-code="CR"] .uicn__face { background: var(--rose-texte); border-color: var(--rose-texte); color: var(--papier-2); }
.uicn:hover .uicn__in, .uicn:focus-visible .uicn__in { transform: rotateY(180deg); }

/* ---------- Appels de note ---------- */
.appel {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  vertical-align: super;
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 12.5px;
  line-height: 1;
  letter-spacing: 0;
  color: var(--rose-texte);
  font-style: normal;
}
.appel::after { content: ""; position: absolute; inset: -10px; }
.note {
  position: absolute;
  z-index: var(--z-flottant);
  width: min(calc(var(--col) * 3), 320px);
  min-width: 240px;
  padding: 14px 16px;
  background: var(--papier-2);
  border: 1px solid var(--encre);
  color: var(--encre);
  font-family: var(--f-mono);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  text-align: left;
}
.note__num { color: var(--rose-texte); margin-right: 6px; }

/* ---------- Curseur ---------- */
.curseur {
  position: fixed;
  left: 0; top: 0;
  z-index: var(--z-curseur);
  pointer-events: none;
  color: #FFFFFF;
  mix-blend-mode: difference;
  opacity: 0;
  transition: opacity 180ms linear;
}
.curseur.est-visible { opacity: 1; }
.curseur__anneau {
  position: absolute;
  left: -14px; top: -14px;
  width: 28px; height: 28px;
  border: 1px solid currentColor;
  border-radius: 50%;
  transition: transform 260ms var(--c-interface);
}
.curseur__croix {
  position: absolute;
  left: -3px; top: -3px;
  width: 6px; height: 6px;
  transition: transform 260ms var(--c-interface);
}
.curseur__croix::before, .curseur__croix::after {
  content: "";
  position: absolute;
  background: currentColor;
}
.curseur__croix::before { left: 0; right: 0; top: 50%; height: 1px; margin-top: -0.5px; }
.curseur__croix::after { top: 0; bottom: 0; left: 50%; width: 1px; margin-left: -0.5px; }
.curseur__libelle {
  position: absolute;
  left: 22px; top: -7px;
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: var(--a-etiquette);
  text-transform: none;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 180ms linear, transform 260ms var(--c-interface);
}
.curseur__coord {
  position: absolute;
  left: 0; top: 46px;
  transform: translateX(-50%);
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: 0;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 180ms linear;
}
.curseur.a-libelle .curseur__libelle { opacity: 1; }
.curseur.en-visee .curseur__anneau { transform: scale(2.5714); }
.curseur.en-visee .curseur__croix { transform: scale(2); }
.curseur.en-visee .curseur__coord { opacity: 1; }
.curseur.en-visee .curseur__libelle { transform: translateX(26px); }

/* ---------- Tiroir ---------- */
.tiroir-voile {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-tiroir) - 1);
  background: rgb(23 20 16 / 0.32);
  opacity: 0;
  transition: opacity var(--d-etat) var(--c-interface);
}
.tiroir-voile.est-visible { opacity: 1; }
.tiroir {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: var(--z-tiroir);
  width: min(480px, 100vw);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--papier-2);
  border-left: 1px solid var(--encre);
  color: var(--encre);
  padding: 24px 32px 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tiroir__fermer { align-self: flex-end; margin-bottom: 12px; }
.tiroir__poignee { display: none; }
.tiroir .titre-3 { margin-top: 8px; }
.tiroir__fiche { margin-top: 16px; border-top: 1px solid var(--trait); }
.tiroir__fiche > div {
  display: grid;
  grid-template-columns: 9.5em 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--trait);
}
.tiroir__fiche dt {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: var(--a-etiquette);
  text-transform: none;
  color: var(--graphite);
}
.tiroir__fiche dd { font-size: 17px; line-height: 1.4; }
.tiroir__carte { margin-top: 16px; }
.tiroir__carte svg { width: 100%; height: auto; }
.tiroir__carte p { font-family: var(--f-mono); font-size: 13px; color: var(--graphite); }
.tiroir__liens { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 8px; }
.copier {
  position: relative;
  min-height: 44px;
  font-family: var(--f-mono);
  font-size: 13px;
  border-bottom: 1px dotted var(--trait-fort);
}
.copier__ok {
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-family: var(--f-mono);
  font-size: 12.5px;
  color: var(--rose-texte);
  pointer-events: none;
}
@media (max-width: 767px) {
  .tiroir {
    top: auto;
    left: 0;
    width: 100%;
    height: 86svh;
    border-left: 0;
    border-top: 1px solid var(--encre);
    padding: 12px var(--marge) 32px;
  }
  .tiroir__poignee {
    display: block;
    align-self: center;
    width: 40px; height: 3px;
    background: var(--trait-fort);
    margin: 4px 0 4px;
  }
  .tiroir__fiche > div { grid-template-columns: 8em 1fr; }
}

/* ---------- Téléscripteur ---------- */
.telescripteur {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 44px;
  border-top: 1px solid var(--trait);
  background: var(--papier);
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  overflow: hidden;
}
.telescripteur > .exemple { flex: none; margin-left: var(--gouttiere); }
.telescripteur__piste {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  display: flex;
  mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 48px), transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 48px), transparent);
}
.telescripteur__defile { display: flex; flex: none; will-change: transform; }
.telescripteur__liste { display: flex; flex: none; align-items: center; }
.telescripteur__liste li { display: flex; align-items: center; white-space: nowrap; }
.telescripteur__liste li::after {
  content: "";
  width: 4px; height: 4px;
  margin: 0 18px;
  background: var(--graphite);
  rotate: 45deg;
}
.telescripteur__liste a { display: inline-flex; align-items: center; min-height: 44px; gap: 10px; }
.telescripteur__liste a:hover { color: var(--rose-texte); }
/* Conteneurs en overflow hidden : l'anneau de focus passe à l'intérieur pour ne pas être rogné */
.telescripteur__liste a:focus-visible, .index__entree:focus-visible { outline-offset: -2px; }
.telescripteur__liste time { color: var(--graphite); }
.telescripteur__pause {
  flex: none;
  min-height: 44px;
  padding: 0 var(--gouttiere) 0 12px;
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: var(--a-etiquette);
  text-transform: none;
  color: var(--graphite);
  border-left: 1px solid var(--trait);
}
.telescripteur__pause:hover { color: var(--encre); }
.telescripteur.est-statique .telescripteur__piste { mask-image: none; -webkit-mask-image: none; overflow-x: auto; }
.telescripteur.est-statique .telescripteur__liste[aria-hidden="true"] { display: none; }

/* ---------- En-tête commun de chapitre ---------- */
.tete {
  display: grid;
  grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
  margin-inline: var(--marge);
  padding-top: var(--section);
  margin-bottom: 64px;
  row-gap: 0;
}
.tete__num { grid-column: 1 / span 4; padding-left: var(--gouttiere); margin-bottom: 20px; }
.tete__titre { grid-column: 1 / span 10; padding-left: var(--gouttiere); text-wrap: balance; }
.tete__chapeau { grid-column: 7 / span 5; padding-left: var(--gouttiere); margin-top: 24px; }
@media (max-width: 1023px) {
  .tete__titre { grid-column: 1 / -1; }
  .tete__chapeau { grid-column: 3 / -1; }
}
@media (max-width: 767px) {
  .tete { margin-bottom: 40px; }
  .tete__num { grid-column: 1 / -1; padding-left: 0; }
  .tete__titre { padding-left: 0; }
  .tete__chapeau { grid-column: 1 / -1; padding-left: 0; }
}

/* ---------- Lecteur de chant ---------- */
.lecteur {
  display: grid;
  grid-template-columns: 56px 1fr;
  grid-template-areas:
    "bouton onde"
    "bouton duree"
    "desc desc"
    "credit credit";
  column-gap: 16px;
  row-gap: 6px;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid var(--trait);
}
.lecteur__bouton {
  grid-area: bouton;
  position: relative;
  width: 56px; height: 56px;
  border: 1px solid var(--encre);
  border-radius: var(--r-rond);
  display: grid;
  place-items: center;
  transition: background-color var(--d-survol) var(--c-interface), color var(--d-survol) var(--c-interface);
}
.lecteur__bouton:hover { background: var(--encre); color: var(--papier-2); }
.lecteur__bouton svg { width: 18px; height: 18px; fill: currentColor; overflow: visible; }
.lecteur__bouton polygon { transition: all 300ms var(--c-interface); }
.lecteur__onde { grid-area: onde; position: relative; height: 40px; }
.lecteur__onde canvas { width: 100%; height: 40px; }
.lecteur__curseur {
  grid-area: onde;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 40px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.lecteur__curseur:focus-visible { outline: none; }
.lecteur:has(.lecteur__curseur:focus-visible) .lecteur__onde { outline: 2px solid var(--rose-texte); outline-offset: 3px; }
.lecteur__duree { grid-area: duree; color: var(--graphite); }
.lecteur__desc { grid-area: desc; font-size: 15px; line-height: 1.45; margin-top: 6px; color: var(--encre); }
.lecteur__credit { grid-area: credit; font-size: 12.5px; color: var(--graphite); }
.lecteur--vide .lecteur__bouton { border-style: dashed; border-color: var(--trait-fort); cursor: default; }
.lecteur--vide .lecteur__bouton:hover { background: none; color: inherit; }
.lecteur--vide .lecteur__onde::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  border-top: 1px dashed var(--trait-fort);
}

/* ---------- Cartes ---------- */
/* Spécificité supérieure à .maplibregl-map (position: relative) pour garder la carte plein cadre */
.carte,
.passage__cadre > .carte,
.atlas__carte > .carte { position: absolute; inset: 0; width: 100%; height: 100%; }
.carte__affiche {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transition: opacity 600ms var(--c-interface);
}
.carte__affiche path { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }
.carte.est-prete ~ .carte__affiche { opacity: 0; }
.carte__etiquettes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.carte__etiquettes span {
  position: absolute;
  left: 0; top: 0;
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: var(--a-etiquette);
  text-transform: none;
  color: var(--nuit-graphite);
  white-space: nowrap;
  transform: translate(-50%, -50%);
  transition: opacity 300ms linear;
}
.carte__attribution {
  position: absolute;
  right: 8px; bottom: 6px;
  z-index: 3;
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--graphite);
}
.carte__attribution a { text-decoration: underline; text-underline-offset: 2px; }
.carte__zoom { position: absolute; right: 12px; top: 64px; z-index: 3; display: flex; flex-direction: column; }
.carte__zoom button {
  width: 32px; height: 32px;
  border: 1px solid var(--trait-fort);
  background: var(--papier-2);
  color: var(--encre);
  font-family: var(--f-mono);
  font-size: 16px;
  line-height: 1;
  display: grid;
  place-items: center;
}
.carte__zoom button + button { border-top: 0; }
.carte__echec {
  position: absolute;
  left: 16px; bottom: 16px;
  max-width: 34ch;
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--graphite);
}
.maplibregl-canvas:focus-visible { outline: 2px solid var(--rose-texte); outline-offset: -2px; }

/* ---------- Tables accessibles ---------- */
.tableau {
  margin-top: 32px;
  border-top: 1px solid var(--trait);
}
.tableau summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  cursor: pointer;
  list-style: none;
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: var(--a-etiquette);
  text-transform: none;
}
.tableau summary::-webkit-details-marker { display: none; }
.tableau summary::before {
  content: "";
  width: 8px; height: 8px;
  border-right: 1.25px solid currentColor;
  border-bottom: 1.25px solid currentColor;
  rotate: -45deg;
  transition: rotate var(--d-survol) var(--c-interface);
}
.tableau[open] summary::before { rotate: 45deg; }
.tableau__defile { overflow-x: auto; padding-bottom: 16px; }
.tableau table { width: 100%; min-width: 640px; font-size: 15px; }
.tableau caption {
  text-align: left;
  padding: 12px 0;
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--graphite);
}
.tableau th, .tableau td {
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--trait);
  text-align: left;
  vertical-align: top;
}
.tableau th {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: var(--a-etiquette);
  text-transform: none;
  color: var(--graphite);
}
.tableau td.n { font-family: var(--f-mono); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Bandeau d'annonces ---------- */
.annonce { position: fixed; }

/* ---------- Infobulle commune ---------- */
.infobulle {
  position: fixed;
  left: 0; top: 0;
  z-index: var(--z-flottant);
  pointer-events: none;
  padding: 6px 8px;
  background: var(--encre);
  color: var(--papier);
  font-family: var(--f-mono);
  font-size: 12.5px;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 150ms linear;
}
.infobulle.est-visible { opacity: 1; }

/* ---------- Point vivant ---------- */
.point-vivant {
  position: relative;
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--rose);
  vertical-align: 1px;
}
.point-vivant::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--rose);
  animation: pulse 2.4s var(--c-interface) infinite;
}
@keyframes pulse { 0% { transform: scale(0.4); opacity: 1; } 80%, 100% { transform: scale(1.6); opacity: 0; } }

/* ---------- Données indisponibles ---------- */
.indisponible { font-family: var(--f-mono); font-size: 13px; color: var(--graphite); padding: 24px var(--gouttiere); }