/* =========================================================================
   Birdflow v4, habillage : surcouche visuelle chargée après les feuilles v2.
   Les composants, la mise en page et les animations de la v2 restent en place ;
   cette feuille change la typographie, la couleur, les formes et les icônes.
   ========================================================================= */

/* ===================================================================== JETONS COMPLÉMENTAIRES */
:root {
  --sur-lagune: #FFFFFF;
  --bande-chiffres: #9A4326;
  --bande-chiffres-icone: #F2C9A4;
  --carte-verre: rgb(255 255 255 / 0.92);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --sur-lagune: #1A0F09; --bande-chiffres: #1C1916; --carte-verre: rgb(25 23 21 / 0.9); }
}
:root[data-theme="dark"] { --sur-lagune: #1A0F09; --bande-chiffres: #1C1916; --carte-verre: rgb(25 23 21 / 0.9); }
#passage, .colophon { --sur-lagune: #1A0F09; }

/* ===================================================================== ICÔNES */
/* Sprite inline : <svg class="ico"><use href="#i-nom"/></svg> */
.ico { display: inline-block; width: 1.15em; height: 1.15em; flex: none; fill: currentColor; vertical-align: -0.18em; }
.fleche { width: 16px; height: 16px; flex: none; fill: currentColor; stroke: none; }
.lien .fleche, .bouton .fleche { width: 16px; height: 16px; }
.puce__x { width: 12px; height: 12px; margin-left: 8px; fill: currentColor; stroke: none; }

/* Icônes posées en CSS (pseudo-éléments) : masque sur la couleur du texte */
.tete__num::before,
.ouverture__releve::before,
.fiche-saison__lieu::before,
.chiffres__titre::before,
.chiffres__liste > div::before,
.registre__jour::before,
.annotations dt::before,
.double__avoir h4::before,
.double__pratique h4::before,
.double__liens .lien::before,
.double__coord::before,
.colophon__col h3::before,
.tiroir__fermer::before,
.passage__panneau [data-fermer]::before,
.sommaire__fermer::before,
.telescripteur__pause::before,
.scene__commandes [data-dir]::before,
.classement__ligne:first-child .classement__nom::before,
.tableau summary::before,
.instantanes__titre::before,
.une__pourquoi > .etiquette::before,
.registre__compte::before {
  content: "";
  display: inline-block;
  flex: none;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}

/* ===================================================================== BASE */
body {
  font-family: var(--f-texte);
  font-variation-settings: normal;
  font-optical-sizing: auto;
  letter-spacing: -0.003em;
}
::selection { background: var(--lagune); color: var(--sur-lagune); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.sur-photo :focus-visible, [data-focus="photo"]:focus-visible { outline-color: #FFFFFF; box-shadow: 0 0 0 5px rgb(23 20 16 / 0.45); }

h1, h2, h3 { font-family: var(--f-affiche); font-weight: 600; font-optical-sizing: auto; }
.etiquette {
  font-family: var(--f-texte);
  font-weight: 500;
  font-size: var(--t-etiquette);
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--graphite);
}
.donnee { font-family: var(--f-texte); font-size: var(--t-mono); font-weight: 400; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.latin, i[lang="la"], .planche__latin { font-family: var(--f-texte); font-style: italic; }
.chapeau {
  font-family: var(--f-texte);
  font-weight: 400;
  font-variation-settings: normal;
  line-height: 1.42;
  letter-spacing: -0.01em;
  max-width: 36ch;
  color: var(--graphite);
}
.texte { font-family: var(--f-texte); }
.titre-2 { font-family: var(--f-affiche); font-weight: 600; letter-spacing: var(--a-titre); line-height: var(--i-titre); }
.titre-3 { font-family: var(--f-affiche); font-weight: 600; letter-spacing: -0.025em; line-height: 1.04; }
.chiffre { font-family: var(--f-affiche); font-weight: 500; letter-spacing: -0.035em; line-height: 0.92; }
.l { padding-bottom: 0.14em; margin-bottom: -0.14em; }
.lettre-masque { padding-top: 0.16em; margin-top: -0.16em; padding-bottom: 0.14em; margin-bottom: -0.14em; }

.evitement {
  border-radius: 999px;
  padding: 12px 18px;
  font: 600 14px/1 var(--f-texte);
  letter-spacing: 0;
  box-shadow: var(--ombre-2);
}
.sans-js, noscript .sans-js, .indisponible { font-family: var(--f-texte); font-size: 15px; }

/* La grille reste mesurée par le JavaScript (largeurs de colonnes), mais elle n'est plus dessinée */
.grille__filets i { opacity: 0 !important; background: transparent !important; }
.grille__lon { display: none !important; }

/* ===================================================================== EN-TÊTE */
.entete { height: var(--entete); }
.entete::after { background: var(--trait); }
.entete[data-etat="sur-photo"] {
  color: var(--encre);
  mix-blend-mode: normal;
  background: var(--papier-voile);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
}
.entete[data-etat="sur-photo"] .nav__num { color: var(--graphite); opacity: 1; }
.entete[data-etat="sur-photo"] .nav a::after { background: var(--lagune); }
.entete[data-etat="sur-photo"] .bascule button { color: var(--graphite); }
.entete[data-etat="sur-photo"] .bascule button[aria-pressed="true"] { color: var(--encre); }
.entete[data-etat="papier"] {
  background: var(--papier-voile);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
}
.entete[data-etat="nuit"] {
  background: rgb(15 14 13 / 0.78);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  --papier: #0F0E0D; --papier-3: rgb(255 255 255 / 0.08); --lagune: var(--lagune-claire); --sur-lagune: #1A0F09;
}

.logo { align-items: center; gap: 10px; }
.logo::before {
  content: "";
  width: 30px; height: 30px;
  flex: none;
  border-radius: 9px;
  background: var(--lagune) url("../assets/icons/logo-oiseau.svg") center / 18px no-repeat;
}
.entete[data-etat="nuit"] .logo::before { background-color: #0E7C72; }
.logo__mot { font-family: var(--f-affiche); font-weight: 700; font-style: normal; font-size: 22px; letter-spacing: -0.03em; line-height: 1; }
.logo__pays {
  font-family: var(--f-texte);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 1;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--lagune-pale);
  color: var(--lagune);
}
.entete[data-etat="nuit"] .logo__pays { background: rgb(255 255 255 / 0.08); color: var(--nuit-encre); }

.nav ol { justify-content: center; gap: clamp(14px, 2.2vw, 34px); }
.nav a {
  font-family: var(--f-texte);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.005em;
  color: var(--encre);
  opacity: 0.74;
  transition: opacity var(--d-survol) var(--c-interface);
}
.nav a:hover, .nav a[aria-current="true"] { opacity: 1; }
.nav__num { display: none; }
.nav a::after { bottom: 9px; height: 2px; border-radius: 2px; background: var(--lagune); }

.reglages { gap: 10px; }
.bascule { gap: 2px; padding: 4px; border-radius: 999px; background: var(--papier-3); }
.bascule__trait { display: none !important; }
.bascule button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  min-width: 40px;
  padding: 0 12px;
  border-radius: 999px;
  font-family: var(--f-texte);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0;
  color: var(--graphite);
  transition: background-color var(--d-survol) var(--c-interface), color var(--d-survol) var(--c-interface), box-shadow var(--d-survol) var(--c-interface);
}
.bascule button .ico { width: 17px; height: 17px; }
.bascule button[aria-pressed="true"] { background: var(--papier); color: var(--encre); box-shadow: var(--ombre-1); }
.entete[data-etat="nuit"] .bascule { background: rgb(255 255 255 / 0.08); }
.entete[data-etat="nuit"] .bascule button { color: var(--nuit-graphite); }
.entete[data-etat="nuit"] .bascule button[aria-pressed="true"] { background: rgb(255 255 255 / 0.16); color: #FFFFFF; box-shadow: none; }

.son-global {
  width: 44px; height: 44px;
  margin: 0;
  border-radius: 999px;
  background: var(--papier-3);
  color: var(--encre);
  transition: background-color var(--d-survol) var(--c-interface), color var(--d-survol) var(--c-interface);
}
.son-global:hover { background: var(--trait); }
.son-global[aria-pressed="true"] { background: var(--lagune); color: var(--sur-lagune); }
.son-global__barres i { border-radius: 2px; }
.entete[data-etat="nuit"] .son-global { background: rgb(255 255 255 / 0.08); color: var(--nuit-encre); }

.sommaire-bouton {
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--encre);
  color: var(--papier);
  font-family: var(--f-texte);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0;
}
.sommaire-bouton .ico { width: 18px; height: 18px; }
.entete[data-etat="nuit"] .sommaire-bouton { background: var(--nuit-encre); color: var(--nuit); }

/* Sommaire plein écran */
.sommaire { background: var(--papier); }
.sommaire ol { border-top: 1px solid var(--trait); }
.sommaire li { border-bottom: 1px solid var(--trait); }
.sommaire a { font-family: var(--f-affiche); font-weight: 600; font-size: 34px; letter-spacing: -0.03em; padding: 16px 0; align-items: center; }
.sommaire a span:first-child { font-family: var(--f-texte); font-weight: 600; font-size: 13px; letter-spacing: 0; color: var(--lagune); }
.sommaire__fermer::before { --ico: url("../assets/icons/regular/x.svg"); width: 16px; height: 16px; }

/* ===================================================================== BOUTONS, LIENS, PUCES */
.bouton {
  min-height: 44px;
  padding: 0 20px;
  gap: 8px;
  border: 1px solid var(--trait-fort);
  border-radius: 999px;
  background: transparent;
  color: var(--encre);
  font-family: var(--f-texte);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0;
}
.bouton:hover { background: var(--encre); color: var(--papier); border-color: var(--encre); }
#passage .bouton:hover { background: var(--nuit-encre); color: var(--nuit); border-color: var(--nuit-encre); }
.bouton::before { flex: none; }

.lien {
  gap: 7px;
  font-family: var(--f-texte);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: -0.005em;
  color: var(--lagune);
}
.lien::after { bottom: 10px; opacity: 0.28; }
.lien .fleche { transition: transform var(--d-survol) var(--c-interface); }
.lien:hover .fleche { transform: translateX(3px); }

.puce {
  height: 36px;
  margin-block: 4px;
  padding: 0 14px;
  border: 1px solid var(--trait);
  border-radius: 999px;
  background: var(--papier);
  font-family: var(--f-texte);
  font-weight: 500;
  font-size: 13.5px;
  letter-spacing: 0;
  color: var(--encre);
}
.puce::before { inset: -1px; border-radius: inherit; background: var(--lagune); }
.puce::after { inset: -4px 0; }
.puce:hover { border-color: var(--trait-fort); }
.puce[aria-pressed="true"] { color: var(--sur-lagune); border-color: var(--lagune); }
#passage .puce { background: rgb(255 255 255 / 0.04); border-color: rgb(255 255 255 / 0.14); }
#passage .puce[aria-pressed="true"] { color: #1A0F09; border-color: var(--lagune); }
.puce--fixe { height: 30px; padding: 0 12px; font-size: 13px; background: var(--papier-2); border-color: transparent; color: var(--encre); }

/* Badge "Exemple" : données d'exemple, en ambre */
.exemple {
  padding: 4px 9px;
  border: 0;
  border-radius: 999px;
  background: var(--ambre-pale);
  color: var(--ambre-texte);
  font-family: var(--f-texte);
  font-weight: 600;
  font-size: 11.5px;
  line-height: 1.1;
  letter-spacing: 0.01em;
}
#passage .exemple, .colophon .exemple { background: rgb(242 177 76 / 0.16); color: #F6CB7A; }

/* Pastille UICN */
.uicn { font-family: var(--f-texte); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; }
.uicn__face { padding: 5px 10px; border: 0; border-radius: 999px; background: var(--lagune-pale); color: var(--lagune); }
.uicn[data-code="VU"] .uicn__face { background: var(--ambre-pale); color: var(--ambre-texte); border: 0; }
.uicn[data-code="EN"] .uicn__face,
.uicn[data-code="CR"] .uicn__face { background: var(--rose-pale); color: var(--rose-texte); border: 0; }

/* Appels de note */
.appel {
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  margin-left: 3px;
  border-radius: 999px;
  background: var(--lagune-pale);
  color: var(--lagune);
  font-family: var(--f-texte);
  font-weight: 700;
  font-size: 11px;
}
.note {
  border: 0;
  border-radius: var(--r-2);
  background: var(--papier);
  box-shadow: var(--ombre-2);
  font-family: var(--f-texte);
  font-size: 13.5px;
  line-height: 1.55;
  padding: 14px 16px;
}
.note__num { display: inline-flex; align-items: center; justify-content: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--lagune-pale); color: var(--lagune); font-weight: 700; font-size: 11px; }

/* Curseur */
.curseur__anneau { border-width: 1.5px; }
.curseur__libelle, .curseur__coord { font-family: var(--f-texte); font-weight: 600; font-size: 12px; letter-spacing: 0; }

/* Infobulle */
.infobulle, .courbe__info {
  padding: 7px 10px;
  border-radius: var(--r-1);
  font-family: var(--f-texte);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0;
  box-shadow: var(--ombre-2);
}

/* ===================================================================== TIROIR */
.tiroir-voile { background: rgb(10 9 8 / 0.4); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.tiroir {
  border: 0;
  border-radius: var(--r-3) 0 0 var(--r-3);
  background: var(--papier);
  box-shadow: var(--ombre-2);
  padding: 20px 30px 40px;
}
.tiroir__fermer { gap: 8px; }
.tiroir__fermer::before, .passage__panneau [data-fermer]::before { --ico: url("../assets/icons/regular/x.svg"); width: 15px; height: 15px; }
.tiroir__fiche { border-top: 1px solid var(--trait); }
.tiroir__fiche > div { border-bottom: 1px solid var(--trait); padding: 13px 0; }
.tiroir__fiche dt { font-family: var(--f-texte); font-weight: 500; font-size: 13px; letter-spacing: 0; color: var(--graphite); }
.tiroir__fiche dd { font-size: 16px; }
.tiroir__carte p { font-family: var(--f-texte); font-size: 13px; }
.tiroir__carte svg .mc-tunisie { fill: var(--lagune-pale) !important; stroke: var(--lagune) !important; }
.copier { font-family: var(--f-texte); font-weight: 500; font-size: 14px; border-bottom: 1px dashed var(--trait-fort); }
.copier__ok { font-family: var(--f-texte); font-weight: 600; font-size: 12.5px; color: var(--lagune); }
@media (max-width: 767px) {
  .tiroir { border-radius: 24px 24px 0 0; border-top: 0; }
  .tiroir__poignee { width: 44px; height: 5px; border-radius: 999px; background: var(--trait-fort); }
}

/* ===================================================================== TÉLÉSCRIPTEUR */
.telescripteur {
  height: 52px;
  border-top: 1px solid var(--trait);
  background: var(--papier);
  font-family: var(--f-texte);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0;
}
.telescripteur__liste li::after { width: 4px; height: 4px; margin: 0 18px; border-radius: 50%; rotate: 0deg; background: var(--trait-fort); }
.telescripteur__liste a:hover { color: var(--lagune); }
.telescripteur__liste time { color: var(--graphite); font-variant-numeric: tabular-nums; font-weight: 600; }
.telescripteur__liste b { font-weight: 600; color: var(--encre); }
.telescripteur__liste a:hover b { color: inherit; }
.telescripteur__pause {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-texte);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0;
  color: var(--encre);
  border-left: 1px solid var(--trait);
}
.telescripteur__pause::before { --ico: url("../assets/icons/regular/pause.svg"); width: 15px; height: 15px; }
.telescripteur__pause[aria-pressed="true"]::before { --ico: url("../assets/icons/regular/play.svg"); }

/* ===================================================================== EN-TÊTE DE CHAPITRE */
.tete__num {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  width: max-content;
  height: 34px;
  margin-left: var(--gouttiere);
  margin-bottom: 26px;
  padding: 0 15px 0 11px;
  border-radius: 999px;
  background: var(--lagune-pale);
  color: var(--lagune);
  font-family: var(--f-texte);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0;
}
.tete__num { padding-left: 11px; }
.tete__chiffre { font-variant-numeric: tabular-nums; opacity: 0.62; }
#releves .tete__num::before { --ico: url("../assets/icons/duotone/binoculars.svg"); }
#planches .tete__num::before { --ico: url("../assets/icons/duotone/bird.svg"); }
#passage .tete__num::before { --ico: url("../assets/icons/duotone/path.svg"); }
#sites .tete__num::before { --ico: url("../assets/icons/duotone/map-trifold.svg"); }
#calendrier .tete__num::before { --ico: url("../assets/icons/duotone/calendar-dots.svg"); }
#observateurs .tete__num::before { --ico: url("../assets/icons/duotone/users-three.svg"); }
#passage .tete__num { background: rgb(255 255 255 / 0.08); color: var(--lagune-claire); }
.tete__titre { font-weight: 600; letter-spacing: var(--a-titre); }
.tete__chapeau { color: var(--graphite); }
@media (max-width: 767px) {
  .tete__num { margin-left: 0; }
}

/* ===================================================================== LECTEUR DE CHANT */
.lecteur { border-top: 1px solid var(--trait); padding-top: 18px; }
.lecteur__bouton {
  width: 54px; height: 54px;
  border: 0;
  background: var(--encre);
  color: var(--papier);
  box-shadow: var(--ombre-1);
  transition: background-color var(--d-survol) var(--c-interface), color var(--d-survol) var(--c-interface), transform var(--d-survol) var(--c-interface);
}
.lecteur__bouton:hover { background: var(--lagune); color: var(--sur-lagune); transform: scale(1.04); }
.lecteur__duree { font-family: var(--f-texte); font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums; }
.lecteur__desc { font-size: 14.5px; line-height: 1.5; }
.lecteur__credit { font-family: var(--f-texte); font-size: 12px; }
.lecteur--vide .lecteur__bouton { background: transparent; border: 1.5px dashed var(--trait-fort); box-shadow: none; }

/* ===================================================================== CARTES */
.carte__zoom { gap: 6px; }
.carte__zoom button {
  width: 38px; height: 38px;
  border: 0;
  border-radius: 999px;
  background: var(--papier);
  color: var(--encre);
  box-shadow: var(--ombre-1);
  font-family: var(--f-texte);
  font-weight: 600;
  font-size: 18px;
}
.carte__zoom button + button { border-top: 0; }
.carte__etiquettes span { font-family: var(--f-texte); font-weight: 600; font-size: 12px; letter-spacing: 0.04em; }
.carte__attribution { font-family: var(--f-texte); font-size: 11.5px; }
.carte__echec { font-family: var(--f-texte); font-size: 14px; }

/* ===================================================================== TABLEAUX */
.tableau { border-top: 1px solid var(--trait); }
.tableau summary { gap: 10px; min-height: 52px; font-family: var(--f-texte); font-weight: 600; font-size: 14.5px; letter-spacing: 0; }
.tableau summary::before {
  --ico: url("../assets/icons/regular/caret-right.svg");
  width: 16px; height: 16px;
  border: 0;
  rotate: 0deg;
  transition: rotate var(--d-survol) var(--c-interface);
}
.tableau[open] summary::before { rotate: 90deg; }
.tableau caption { font-family: var(--f-texte); font-size: 13px; }
.tableau th { font-family: var(--f-texte); font-weight: 600; font-size: 12.5px; letter-spacing: 0; color: var(--graphite); }
.tableau td.n { font-family: var(--f-texte); font-weight: 500; font-size: 14px; }

/* ===================================================================== INTRO */
.intro__stores i { background: var(--papier); }
.intro__filets { display: none; }
.intro__cotes path { stroke: var(--encre); stroke-width: 1.2; }
.intro__trajet-pointille { stroke: var(--rose); stroke-width: 1.6; opacity: 0.45; }
.intro__trajet-plein { stroke: var(--rose); stroke-width: 2.2; stroke-linecap: round; }
.intro__oiseau path { fill: var(--lagune); }
.intro__point { fill: var(--rose); }
.intro__km-milieu, .intro__ville { font-family: var(--f-texte); font-weight: 700; font-size: 12.5px; letter-spacing: 0.06em; }
.intro__km-milieu { fill: var(--rose-texte); }
.intro__coord {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--lagune-pale);
  color: var(--lagune);
  font-weight: 600;
}
.intro__decompte { font-family: var(--f-affiche); font-weight: 600; letter-spacing: -0.055em; color: var(--encre); }
.intro__unite { font-family: var(--f-texte); font-weight: 700; font-size: 16px; letter-spacing: 0.04em; color: var(--lagune); margin-top: 0.5em; }
.intro__legende { color: var(--graphite); font-size: 14px; }
.intro__passer { background: var(--papier); }

/* ===================================================================== OUVERTURE */
.ouverture__photo { border-radius: var(--r-photo); background: #E6E3DC; isolation: isolate; }
.ouverture__photo::after { display: none; }
.ouverture__lignes,
.ouverture__titre-copie {
  font-family: var(--f-affiche);
  font-weight: 600;
  letter-spacing: var(--a-affiche);
  line-height: var(--i-serre);
}
.o-l--2 { font-weight: 300; font-style: normal; }
.ouverture__lignes .o-l--2 { color: var(--lagune); }
.ouverture__legende { font-family: var(--f-texte); font-weight: 500; font-size: 11.5px; color: rgb(255 255 255 / 0.86); }
.ouverture__legende i { font-family: var(--f-texte); }

.ouverture__releve {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  width: max-content;
  padding: 0 15px 0 11px;
  border-radius: 999px;
  background: var(--lagune-pale);
  color: var(--lagune);
  font-weight: 600;
  font-size: 13.5px;
}
.ouverture__releve::before { --ico: url("../assets/icons/duotone/calendar-dots.svg"); }
.ouverture__chapeau { color: var(--encre); }

.fiche-saison {
  border: 0;
  border-radius: var(--r-3);
  background: var(--carte-verre);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: var(--ombre-2);
  padding: 22px 24px 18px;
}
.fiche-saison:hover { transform: translateY(-3px); border-color: transparent; }
.fiche-saison > .etiquette:first-child { display: flex; align-items: center; color: var(--rose-texte); font-weight: 600; }
.fiche-saison__titre { margin-top: 12px; font-family: var(--f-affiche); font-weight: 600; font-size: 24px; line-height: 1.08; letter-spacing: -0.025em; }
.fiche-saison__texte { font-size: 15px; line-height: 1.5; color: var(--graphite); }
.fiche-saison hr { border-top-color: var(--trait); margin: 16px 0 12px; }
.fiche-saison__notable > .etiquette { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fiche-saison__espece { font-family: var(--f-affiche); font-weight: 600; font-size: 21px; letter-spacing: -0.02em; }
.fiche-saison__espece .donnee { font-family: var(--f-texte); font-weight: 600; font-size: 15px; color: var(--rose-texte); }
.fiche-saison__lieu { display: flex; align-items: center; gap: 6px; font-size: 13.5px; }
.fiche-saison__lieu::before { --ico: url("../assets/icons/regular/map-pin.svg"); width: 15px; height: 15px; color: var(--lagune); }

.ouverture__descendre { gap: 12px; font-family: var(--f-texte); font-weight: 600; font-size: 13.5px; letter-spacing: 0; }
.ouverture__fil { width: 2px; border-radius: 2px; }

@media (min-width: 1024px) {
  .ouverture__photo {
    top: calc(var(--entete) + 8px);
    right: var(--marge);
    left: calc(var(--marge) + var(--col) * 4);
    height: calc(88svh - var(--entete) - 8px);
  }
  .ouverture__releve { top: calc(var(--entete) + 26px); }
  .ouverture__chapeau { top: calc(var(--entete) + 84px); }
  .fiche-saison { top: calc(var(--entete) + 32px); width: calc(var(--col) * 4 - 44px); }
  .ouverture__descendre { bottom: 72px; }
  .ouverture .telescripteur { left: var(--marge); right: var(--marge); border-top: 0; }
}
@media (min-width: 1280px) {
  .fiche-saison { width: calc(var(--col) * 3 - 36px); }
}
@media (max-width: 1023px) {
  .ouverture__photo { border-radius: 24px; }
  .fiche-saison { background: var(--papier-2); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ===================================================================== ÉTAT DU CARNET */
.chiffres > .g {
  --encre: #FFFFFF;
  --graphite: rgb(255 255 255 / 0.76);
  background: var(--bande-chiffres);
  color: #FFFFFF;
  border-radius: 32px;
  padding: 38px clamp(24px, 3vw, 48px) 42px;
}
.chiffres__titre { display: flex; align-items: center; gap: 10px; padding-left: 0; color: rgb(255 255 255 / 0.8); font-weight: 600; }
.chiffres__titre::before { --ico: url("../assets/icons/duotone/list-checks.svg"); color: var(--bande-chiffres-icone); }
.chiffres__filet { display: none; }
.chiffres__liste { margin-top: 30px; row-gap: 32px; }
.chiffres__liste > div {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  padding: 2px 24px 0;
  border-left: 1px solid rgb(255 255 255 / 0.16);
}
.chiffres__liste > div:first-child { border-left: 0; padding-left: 0; }
.chiffres__liste > div::before { order: 0; width: 28px; height: 28px; margin-bottom: 18px; color: var(--bande-chiffres-icone); }
.chiffres__liste > div:nth-child(1)::before { --ico: url("../assets/icons/duotone/bird.svg"); }
.chiffres__liste > div:nth-child(2)::before { --ico: url("../assets/icons/duotone/map-pin.svg"); }
.chiffres__liste > div:nth-child(3)::before { --ico: url("../assets/icons/duotone/users-three.svg"); }
.chiffres__liste > div:nth-child(4)::before { --ico: url("../assets/icons/duotone/binoculars.svg"); }
.chiffres__liste dd { order: 1; }
.chiffres__liste dt { order: 2; margin-top: 10px; max-width: 17em; font-size: 15px; line-height: 1.4; color: rgb(255 255 255 / 0.8); }
.chiffres__liste .chiffre { color: #FFFFFF; font-size: clamp(48px, 5.4vw, 92px); }
.chiffre__anime { text-align: left; }
.chiffres .appel { background: rgb(255 255 255 / 0.16); color: #FFFFFF; }
@media (max-width: 1023px) {
  .chiffres__liste > div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .chiffres__liste .chiffre { font-size: clamp(44px, 11vw, 80px); }
}
@media (max-width: 767px) {
  .chiffres > .g { border-radius: 24px; padding: 26px 20px 30px; }
  .chiffres__liste > div { padding: 0 0 0 14px; }
  .chiffres__liste > div::before { margin-bottom: 12px; width: 24px; height: 24px; }
}

/* ===================================================================== CH. 01 RELEVÉS */
.une > .etiquette { color: var(--encre); font-weight: 600; }
.une__cadre { border-radius: var(--r-3); background: var(--papier-2); }
.une__credit { font-family: var(--f-texte); font-size: 12px; }
.une__donnee { font-family: var(--f-texte); font-weight: 500; color: var(--graphite); }
.une__pourquoi { margin-top: 10px; padding: 14px 16px; border-radius: var(--r-2); background: var(--rose-pale); font-size: 15px; line-height: 1.5; }
.une__pourquoi > .etiquette { display: flex; align-items: center; gap: 6px; color: var(--rose-texte); font-weight: 700; }
.une__pourquoi > .etiquette::before { --ico: url("../assets/icons/duotone/sparkle.svg"); width: 16px; height: 16px; }

.mini-carte__svg .mc-tunisie { fill: var(--lagune-pale); stroke: var(--lagune); }
.mini-carte__svg .mc-voisin { stroke: var(--trait-fort); opacity: 0.6; }
.mini-carte__svg .mc-point { fill: var(--lagune); opacity: 0.55; }
.mini-carte__svg .mc-point.est-actif { fill: var(--rose); opacity: 1; }
.mini-carte__svg .mc-nom { font-family: var(--f-texte); font-weight: 700; letter-spacing: 0; fill: var(--encre); }
.mini-carte__legende { font-family: var(--f-texte); font-size: 12px; }
.mini-carte__sans { font-weight: 600; }

.registre__outils {
  padding: 18px 6px 18px;
  border-bottom: 0;
  border-radius: var(--r-3);
  background: var(--papier-2);
  row-gap: 16px;
}
.onglets {
  gap: 4px;
  padding: 4px;
  margin-left: var(--gouttiere);
  width: max-content;
  align-self: center;
  border-radius: 999px;
  background: var(--papier-3);
}
.onglets button {
  min-height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  font-family: var(--f-texte);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0;
  color: var(--graphite);
  transition: background-color var(--d-etat) var(--c-interface), color var(--d-etat) var(--c-interface), box-shadow var(--d-etat) var(--c-interface);
}
.onglets button[aria-selected="true"] { background: var(--papier); color: var(--encre); box-shadow: var(--ombre-1); }
.onglets button .donnee {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 21px;
  margin-left: 6px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--trait);
  font-weight: 700;
  font-size: 12px;
  color: var(--encre);
}
#onglet-toutes[aria-selected="true"] .donnee { background: var(--lagune); color: var(--sur-lagune); }
#onglet-notables[aria-selected="true"] .donnee { background: var(--rose); color: #FFFFFF; }
.onglets__trait { display: none; }
.recherche label, .atlas__index > label { font-weight: 600; color: var(--encre); }
.recherche__loupe { left: 14px; width: 18px; height: 18px; margin-top: -9px; fill: var(--graphite); stroke: none; }
.recherche__champ input {
  height: 46px;
  padding: 0 16px 0 42px;
  border: 1px solid var(--trait);
  border-radius: var(--r-2);
  background: var(--papier);
  font-family: var(--f-texte);
  font-size: 16px;
  transition: border-color var(--d-survol) var(--c-interface), box-shadow var(--d-survol) var(--c-interface);
}
.recherche__champ input:hover { border-color: var(--trait-fort); }
.recherche__champ input:focus-visible { border-color: var(--focus); box-shadow: 0 0 0 4px rgb(180 83 42 / 0.16); }
.suggestions {
  top: calc(100% + 6px);
  padding: 6px;
  border: 0;
  border-radius: var(--r-2);
  background: var(--papier);
  box-shadow: var(--ombre-2);
}
.suggestions li { border-radius: 10px; font-size: 15.5px; }
.suggestions li[aria-selected="true"], .suggestions li:hover { background: var(--lagune-pale); color: var(--encre); }
.suggestions li[aria-selected="true"] .latin, .suggestions li:hover .latin { color: var(--graphite); }
.suggestions mark { text-decoration-color: var(--lagune); text-decoration-thickness: 2px; }
.registre__filtres > div { gap: 4px 8px; }
.registre__filtres > div::before { width: 7.5em; font-family: var(--f-texte); font-weight: 600; font-size: 13px; letter-spacing: 0; color: var(--graphite); }
.registre__compte { display: flex; align-items: center; gap: 8px; padding-top: 24px; font-weight: 600; color: var(--encre); }
.registre__compte::before { --ico: url("../assets/icons/regular/list-checks.svg"); width: 17px; height: 17px; color: var(--lagune); }

.registre__jour {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 30px var(--gouttiere) 10px;
  border-bottom: 1px solid var(--trait);
  font-family: var(--f-texte);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0;
  color: var(--encre);
}
.registre__jour::before { --ico: url("../assets/icons/regular/calendar-blank.svg"); width: 16px; height: 16px; color: var(--lagune); }
.ligne__bouton {
  min-height: 78px;
  border-bottom: 1px solid var(--trait);
  transition: transform 260ms var(--c-interface), background-color var(--d-survol) var(--c-interface);
}
@media (hover: hover) and (pointer: fine) {
  .ligne__bouton:hover { transform: translateX(4px); background: var(--papier-2); }
}
.ligne__bouton:focus-visible { transform: translateX(4px); background: var(--papier-2); }
.ligne__heure { font-family: var(--f-texte); font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; }
.ligne__notable { width: 8px; height: 8px; border-radius: 50%; rotate: 0deg; background: var(--rose); box-shadow: 0 0 0 4px var(--rose-lavis); margin-left: -16px; }
.ligne__fr { font-family: var(--f-texte); font-weight: 600; font-size: 18px; letter-spacing: -0.01em; }
.ligne__badge {
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--rose-pale);
  color: var(--rose-texte);
  font-family: var(--f-texte);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.01em;
  vertical-align: 2px;
}
.ligne__latin { font-size: 14px; }
.ligne__lieu .donnee { font-family: var(--f-texte); font-weight: 500; font-size: 14.5px; line-height: 1.3; letter-spacing: 0; color: var(--encre); }
.ligne__region { font-size: 13px; }
.ligne__batons { color: var(--lagune); }
.ligne__effectif { font-family: var(--f-affiche); font-weight: 500; font-size: 32px; letter-spacing: -0.03em; }
.registre__vide { border-radius: var(--r-3); }
.registre__suivants { background: var(--encre); color: var(--papier); border-color: var(--encre); }
.registre__suivants:hover { background: var(--lagune); color: var(--sur-lagune); border-color: var(--lagune); }
.vignette-flottante { border-radius: var(--r-3); box-shadow: var(--ombre-2); }
@media (max-width: 767px) {
  .registre__outils { padding: 14px; border-radius: 18px; }
  .onglets { margin-left: 0; }
  .ligne__fr { font-size: 17px; }
  .ligne__lieu .donnee { font-size: 13.5px; color: var(--graphite); }
  .ligne__effectif { font-size: 28px; }
}

/* ===================================================================== CH. 02 PLANCHES : COULEURS D'AMBIANCE */
/* Chaque espèce apporte un fond profond tiré de sa photo et un accent tiré de son plumage. */
.scene { --amb: #102236; --acc: #FF6F96; --acc-sur: #1A0B12; }
.scene[data-espece="flamant"], #planche-flamant { --amb: #102236; --acc: #FF6F96; --acc-sur: #1A0B12; }
.scene[data-espece="huppe"], #planche-huppe { --amb: #1C261A; --acc: #F2A35E; --acc-sur: #24140A; }
.scene[data-espece="guepier"], #planche-guepier { --amb: #0D2B2A; --acc: #F4C542; --acc-sur: #231A02; }
.scene[data-espece="chevalier"], #planche-chevalier { --amb: #15212C; --acc: #9ED7C5; --acc-sur: #0C1A15; }
.scene[data-espece="courvite"], #planche-courvite { --amb: #2B1F14; --acc: #E8B27A; --acc-sur: #24170B; }
.scene[data-espece="bondree"], #planche-bondree { --amb: #10213A; --acc: #F0B13C; --acc-sur: #241703; }
.scene[data-espece="cigogne"], #planche-cigogne { --amb: #0D2347; --acc: #FF6A4D; --acc-sur: #2A0B04; }
.scene[data-espece="faucon"], #planche-faucon { --amb: #0D2430; --acc: #7FC8F2; --acc-sur: #071822; }
.scene[data-espece="rollier"], #planche-rollier { --amb: #0B2140; --acc: #F0A060; --acc-sur: #2A1505; }
.scene[data-espece="taleve"], #planche-taleve { --amb: #1B1838; --acc: #9AA4FF; --acc-sur: #0E0F2E; }
.scene[data-espece="erismature"], #planche-erismature { --amb: #24170F; --acc: #7FB2F0; --acc-sur: #0B1626; }
.scene[data-espece="goeland"], #planche-goeland { --amb: #142231; --acc: #FF6B5E; --acc-sur: #2A0A07; }

/* Les jetons de couleur sont recalculés sur la scène et sur chaque planche (chacune garde sa propre espèce) */
.scene, .planche {
  --amb-encre: #F2F5F4;
  --amb-doux: rgb(238 234 228 / 0.7);
  --amb-trait: rgb(255 255 255 / 0.12);
  --encre: var(--amb-encre);
  --graphite: var(--amb-doux);
  --trait: var(--amb-trait);
  --trait-fort: rgb(255 255 255 / 0.32);
  --papier: var(--amb);
  --papier-2: transparent;
  --papier-3: rgb(255 255 255 / 0.08);
  --rose: var(--acc);
  --rose-texte: var(--acc);
  --rose-lavis: rgb(255 255 255 / 0.08);
  --lagune: var(--acc);
  --lagune-pale: rgb(255 255 255 / 0.1);
  --sur-lagune: var(--acc-sur);
  --focus: var(--acc);
  --ambre-pale: rgb(242 177 76 / 0.18);
  --ambre-texte: #F6CB7A;
  color: var(--encre);
}
.scene { background: var(--amb); transition: background-color 900ms var(--c-rideau); }

.vignettes { padding-bottom: 26px; }
.vignettes ol { gap: 10px 6px; }
.vignettes button { gap: 8px; font-family: var(--f-texte); font-weight: 600; font-size: 12px; letter-spacing: 0; color: var(--graphite); }
.vignettes img { width: 52px; height: 52px; filter: none; opacity: 0.72; outline: 2px solid transparent; outline-offset: 3px; transition: opacity var(--d-survol) var(--c-interface), outline-color var(--d-survol) var(--c-interface); }
.vignettes button:hover img { opacity: 1; filter: none; }
.vignettes button[aria-current="true"] { color: var(--encre); }
.vignettes button[aria-current="true"] img { opacity: 1; filter: none; outline-color: var(--lagune); }

.planche { color: var(--encre); }
.planche__photo { background: rgb(255 255 255 / 0.06); }
.planche__photo::after { background: linear-gradient(to top, rgb(0 0 0 / 0.5), transparent 42%); }
.planche__filets { display: none; }
.planche__nom, .planche__nom-copie { font-family: var(--f-affiche); font-weight: 600; letter-spacing: -0.045em; line-height: 0.92; }
.planche__nom { color: var(--acc); }
.planche__nom-copie { color: #FFFFFF; }
.planche__latin { font-size: 22px; color: #FFFFFF; }
.planche__en { font-family: var(--f-texte); font-weight: 500; font-size: 13.5px; letter-spacing: 0; color: rgb(255 255 255 / 0.82); }
.planche__num { font-family: var(--f-affiche); font-weight: 600; font-size: 46px; letter-spacing: -0.04em; }
.planche__total { font-family: var(--f-texte); font-weight: 600; font-size: 14px; color: rgb(255 255 255 / 0.75); }
.planche__credit { font-family: var(--f-texte); font-size: 11.5px; letter-spacing: 0; color: rgb(255 255 255 / 0.8); }
.planche__video-pause { border-radius: 999px; background: rgb(0 0 0 / 0.38); font-family: var(--f-texte); font-weight: 600; font-size: 12.5px; letter-spacing: 0; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.planche__medaillon .planche__medaillon-cadre { border: 0; border-radius: 18px; box-shadow: 0 12px 32px rgb(0 0 0 / 0.35); }
.planche__medaillon figcaption { font-family: var(--f-texte); font-size: 12px; color: rgb(255 255 255 / 0.82); }

.planche__fiche { background: transparent; color: var(--encre); }
.annotations { border-top: 1px solid var(--trait); }
.annotations > div { grid-template-columns: minmax(8.5em, 40%) 1fr; padding: 11px 0; border-bottom: 1px solid var(--trait); }
.annotations dt { display: flex; align-items: center; gap: 8px; font-family: var(--f-texte); font-weight: 500; font-size: 13px; letter-spacing: 0; color: var(--graphite); }
.annotations dt::before { width: 16px; height: 16px; background: var(--acc); }
.annotations > div:nth-child(1) dt::before { --ico: url("../assets/icons/regular/tree-structure.svg"); }
.annotations > div:nth-child(2) dt::before { --ico: url("../assets/icons/regular/ruler.svg"); }
.annotations > div:nth-child(3) dt::before { --ico: url("../assets/icons/regular/arrows-horizontal.svg"); }
.annotations > div:nth-child(4) dt::before { --ico: url("../assets/icons/regular/shield-check.svg"); }
.annotations > div:nth-child(5) dt::before { --ico: url("../assets/icons/regular/map-pin.svg"); }
.annotations > div:nth-child(6) dt::before { --ico: url("../assets/icons/regular/binoculars.svg"); }
.annotations > div:nth-child(7) dt::before { --ico: url("../assets/icons/regular/database.svg"); }
.annotations dd { font-size: 15.5px; }
.annotations .gbif-source { font-family: var(--f-texte); font-weight: 500; font-size: 12px; letter-spacing: 0; }
.planche__texte { font-size: 16px; line-height: 1.62; color: rgb(238 234 228 / 0.86); }
.planche .uicn__face { background: rgb(255 255 255 / 0.12); color: #FFFFFF; }
.planche .uicn[data-code="VU"] .uicn__face { background: #F2B14C; color: #241703; }
.planche .uicn[data-code="EN"] .uicn__face,
.planche .uicn[data-code="CR"] .uicn__face { background: #FF7A9C; color: #2A0712; }
.planche .appel { background: rgb(255 255 255 / 0.14); color: #FFFFFF; }

.frise-mois__grille { border-bottom: 1px solid var(--trait-fort); }
.fm-case.fm-courant { background: rgb(255 255 255 / 0.08); border-radius: 6px 6px 0 0; }
.fm-case::after { background: var(--trait-fort); }
.planche .fm-pheno { background: var(--acc); border-radius: 3px; }
.fm-gbif { background: rgb(255 255 255 / 0.4); border-radius: 1px; }
.frise-mois__initiales { font-family: var(--f-texte); font-weight: 600; font-size: 11.5px; }
.frise-mois__initiales .fm-courant-t { color: var(--acc); }
.frise-mois figcaption { font-family: var(--f-texte); font-weight: 500; font-size: 12px; letter-spacing: 0; }
.planche .frise-mois .fm-l-pheno::before { background: var(--acc); border-radius: 2px; }
.frise-mois .fm-l-gbif::before { background: rgb(255 255 255 / 0.4); }

.planche .lecteur__bouton { background: var(--acc); color: var(--acc-sur); }
.planche .lecteur__bouton:hover { background: #FFFFFF; color: var(--amb); }
.planche .lecteur--vide .lecteur__bouton { background: transparent; }
.planche .lien { color: var(--acc); }

.scene__progression { gap: 6px; }
.scene__progression i { height: 3px; border-radius: 3px; background: rgb(255 255 255 / 0.28); }
.scene__progression i.est-courant { background: #FFFFFF; }
.scene__apercu { background: rgb(0 0 0 / 0.2); }
.scene__apercu img { filter: saturate(0.9) brightness(0.62); }
.scene__apercu:hover img { filter: saturate(1) brightness(0.8); }
.scene__languette { width: 54px; height: 54px; border-radius: 999px; background: var(--acc); color: var(--acc-sur); box-shadow: 0 10px 30px rgb(0 0 0 / 0.3); }
.scene__languette .fleche { width: 18px; height: 18px; }
.scene__suivante-nom { font-family: var(--f-texte); font-weight: 600; font-size: 13px; letter-spacing: 0.02em; color: #FFFFFF; }
.scene__commandes .bouton { border-color: rgb(255 255 255 / 0.3); color: #FFFFFF; }
.scene__commandes .bouton:hover { background: #FFFFFF; border-color: #FFFFFF; color: var(--amb); }
.scene__commandes [data-dir]::before { width: 16px; height: 16px; }
.scene__commandes [data-dir="-1"]::before { --ico: url("../assets/icons/regular/arrow-left.svg"); }
.scene__commandes [data-dir="1"] { flex-direction: row-reverse; }
.scene__commandes [data-dir="1"]::before { --ico: url("../assets/icons/regular/arrow-right.svg"); }

@media (min-width: 768px) {
  .planche__photo {
    top: 16px;
    bottom: 16px;
    left: var(--marge);
    border-radius: var(--r-photo);
  }
  .planche__compteur { top: calc(16px + 22px); left: calc(var(--marge) + var(--gouttiere) + 12px); }
  .planche__tete { left: calc(var(--marge) + var(--gouttiere) + 12px); }
  .planche__sous { left: calc(var(--marge) + var(--gouttiere) + 12px); }
  .planche__defile { padding-left: 32px; padding-right: 20px; }
  .scene__progression { bottom: 34px; left: calc(var(--marge) + var(--gouttiere) + 12px); }
  .scene__apercu {
    top: 16px;
    bottom: 16px;
    right: var(--marge);
    left: calc(var(--marge) + var(--col) * 11 + 12px);
    overflow: hidden;
    border-radius: 22px;
  }
  .planche__credit { right: 18px; bottom: 30px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .scene__apercu { top: auto; left: auto; bottom: 64px; right: calc(var(--marge) + var(--col) * 3 + 16px); width: 56px; height: 56px; background: none; border-radius: 999px; overflow: visible; }
}
@media (max-width: 767px) {
  .scene { background: var(--papier-mobile, #FFFFFF); }
  :root[data-theme="dark"] .scene { --papier-mobile: #100F0E; }
  .vignettes { background: var(--papier); border-bottom: 1px solid var(--trait); }
  .planche { background: var(--amb); border-radius: 24px; overflow: hidden; padding-bottom: 20px; }
  .planche__photo { border-radius: 0; }
  .planche__tete { left: 14px; }
  .planche__fiche { padding-inline: 16px; }
}
@media (max-width: 767px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .scene { --papier-mobile: #100F0E; }
}

/* ===================================================================== CH. 03 PASSAGE */
.calque-nuit { background: var(--nuit); }
.passage__vignette img { border-radius: var(--r-3); }
.passage__vignette figcaption { font-family: var(--f-texte); font-size: 12px; }
.passage__cadre { background: #0F0E0D; }
.etape__carte {
  padding: 26px 26px 24px;
  border: 1px solid rgb(255 255 255 / 0.08);
  border-radius: var(--r-3);
  background: rgb(15 14 13 / 0.8);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: var(--ombre-nuit);
}
.etape__photo { margin: -26px -26px 20px; overflow: hidden; border-radius: var(--r-3) var(--r-3) 0 0; }
.etape__photo figcaption { padding: 8px 26px 0; font-family: var(--f-texte); font-size: 12px; }
.etape__num {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.08);
  color: var(--nuit-encre);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.etape__titre { font-family: var(--f-affiche); font-weight: 600; font-size: 34px; line-height: 1.02; letter-spacing: -0.03em; }
.etape__texte { font-size: 16px; line-height: 1.6; color: rgb(238 234 228 / 0.86); }
.etape__donnees { font-family: var(--f-texte); font-weight: 600; font-size: 12.5px; letter-spacing: 0.01em; color: var(--nuit-graphite); }
.etape__encart { border-top: 1px solid rgb(255 255 255 / 0.12); }
.passage__infobulle { border: 0; border-radius: var(--r-1); background: rgb(15 14 13 / 0.94); box-shadow: var(--ombre-nuit); font-family: var(--f-texte); font-weight: 600; font-size: 12.5px; letter-spacing: 0; }
.passage__date { font-family: var(--f-affiche); font-weight: 600; letter-spacing: -0.035em; }
.legende-balises { border: 1px solid rgb(255 255 255 / 0.08); border-radius: var(--r-3); background: rgb(15 14 13 / 0.82); }
.legende-balises legend { font-weight: 600; }
.legende-balises label { font-size: 14.5px; }
.legende-balises input { accent-color: var(--lagune-claire); }
.legende-balises .donnee { font-weight: 600; font-size: 12.5px; }
.pastille { width: 18px; height: 4px; border-radius: 2px; }
.lecture { border: 1px solid rgb(255 255 255 / 0.08); border-radius: var(--r-3); background: rgb(15 14 13 / 0.84); padding: 10px 16px; }
.lecture__bouton { background: var(--nuit-encre); color: var(--nuit); border-color: var(--nuit-encre); }
.lecture__bouton:hover { background: var(--lagune-claire); border-color: var(--lagune-claire); color: #1A0F09; }
.lecture__icone { width: 15px; height: 15px; fill: currentColor; }
.frise__graduations text { font-family: var(--f-texte); font-weight: 600; font-size: 12px; }
.frise__tete { width: 2px; border-radius: 1px; }
.frise__tete::after { left: -4px; top: -5px; width: 10px; height: 10px; border-radius: 50%; rotate: 0deg; box-shadow: 0 0 0 4px rgb(255 178 122 / 0.25); }
.passage__panneau { border: 1px solid rgb(255 255 255 / 0.1); border-radius: var(--r-3); background: rgb(15 14 13 / 0.94); box-shadow: var(--ombre-nuit); }
.passage__panneau h3 { font-family: var(--f-affiche); font-weight: 600; font-size: 28px; letter-spacing: -0.025em; }
.passage__panneau dt { font-family: var(--f-texte); font-weight: 600; font-size: 12px; letter-spacing: 0; }
.passage__panneau [data-fermer] { gap: 6px; }
.passage__explorer { background: rgb(15 14 13 / 0.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.passage__cadre .carte__zoom button { background: rgb(15 14 13 / 0.9); color: var(--nuit-encre); box-shadow: var(--ombre-nuit); }
.passage__sources li { font-family: var(--f-texte); font-size: 13.5px; line-height: 1.6; }
.passage__tableau td { font-size: 15px; }
.regle-latitude { font-family: var(--f-texte); font-weight: 600; font-size: 11.5px; }
.regle-latitude__repere { width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; rotate: 0deg; }
@media (max-width: 767px) {
  .etape__carte { border-radius: var(--r-3); margin-inline: 10px; width: auto; }
  .etape__photo { margin: -20px calc(var(--marge) * -1) 16px; }
  .etape__titre { font-size: 30px; }
}

/* ===================================================================== AUBE */
.aube__titre { font-weight: 600; }
.aube__chapeau { color: #171410; }
.aube__photo figcaption { font-family: var(--f-texte); font-size: 12px; color: rgb(255 255 255 / 0.9); }

/* ===================================================================== CH. 04 SITES */
.sites { background: var(--fond-sites); }
.atlas__carte { border: 0; border-radius: var(--r-photo); background: var(--papier-2); box-shadow: var(--ombre-1); }
.atlas__carte .carte__affiche circle { fill: var(--lagune); }
.atlas__explorer { background: var(--papier); border-color: transparent; box-shadow: var(--ombre-1); }
.atlas__panneau { border: 0; border-radius: var(--r-3); background: var(--papier); box-shadow: var(--ombre-2); }
.atlas__panneau h3 { font-family: var(--f-affiche); font-weight: 600; font-size: 26px; letter-spacing: -0.025em; }
.atlas__panneau .panneau__fermer { border-radius: 999px; background: var(--papier-2); width: 40px; height: 40px; }
.atlas__panneau .panneau__fermer svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.panneau__meta { font-family: var(--f-texte); font-weight: 500; font-size: 13px; letter-spacing: 0; }
.panneau__especes small { font-family: var(--f-texte); font-size: 12px; }
.panneau__releves li { border-bottom-color: var(--trait); }
.panneau__releves li .donnee { font-weight: 600; font-size: 12.5px; }
.atlas__index { padding: 18px 18px 8px; border-radius: var(--r-3); background: var(--papier); box-shadow: var(--ombre-1); }
.index { border-top: 1px solid var(--trait); background: transparent; }
.index__lettre { font-family: var(--f-affiche); font-weight: 600; font-size: 22px; color: var(--lagune); border-bottom-color: var(--trait); }
.index__nom { font-size: 15px; font-weight: 500; }
.index__n { font-family: var(--f-texte); font-weight: 600; font-size: 13px; color: var(--graphite); }
.index__milieu { font-family: var(--f-texte); font-weight: 500; font-size: 12px; letter-spacing: 0; }
.index__entree { border-bottom-color: var(--trait); }
.index__entree:hover, .index__entree.est-actif { color: var(--lagune); }
.index__entree.est-actif .index__points { border-bottom-color: var(--lagune); }
.milieux .puce { font-size: 13px; padding: 0 12px; }
.atlas__compte { font-weight: 600; }
@media (max-width: 1023px) {
  .atlas__index { padding: 16px; }
}

.double__cadre { border-radius: var(--r-photo); background: var(--papier-3); }
.double--gauche .double__photo { margin-left: 0; }
.double--droite .double__photo { margin-right: 0; }
.double__legende { font-family: var(--f-texte); font-size: 12.5px; }
.double--gauche .double__legende { padding-left: 4px; }
.double--droite .double__legende { padding-right: 4px; }
.double__medaillon-cadre { border: 4px solid var(--fond-sites); border-radius: 22px; box-shadow: var(--ombre-2); }
.double__medaillon figcaption { font-family: var(--f-texte); font-size: 12px; }
.double__num { font-family: var(--f-affiche); font-weight: 600; font-size: 72px; letter-spacing: -0.05em; color: var(--lagune); }
.double__coord { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-texte); font-weight: 600; font-size: 13px; color: var(--graphite); }
.double__coord::before { --ico: url("../assets/icons/regular/crosshair.svg"); width: 15px; height: 15px; color: var(--lagune); }
.double__nom { font-family: var(--f-affiche); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.double__etiquettes .puce--fixe { background: var(--papier); border: 1px solid var(--trait); }
.double__recit { font-size: 17px; line-height: 1.62; }
.double__recit::first-letter { float: none; font: inherit; margin: 0; color: inherit; line-height: inherit; }
.double__chiffres { gap: 20px; border-top: 1px solid var(--trait); }
.double__chiffres dd { font-family: var(--f-affiche); font-weight: 600; font-size: 40px; letter-spacing: -0.035em; color: var(--lagune); }
.double__chiffres dt { font-family: var(--f-texte); font-weight: 500; font-size: 13px; }
.double__avoir h4, .double__pratique h4 { display: flex; align-items: center; gap: 8px; font-family: var(--f-texte); font-weight: 600; font-size: 14.5px; letter-spacing: 0; color: var(--encre); }
.double__avoir h4::before { --ico: url("../assets/icons/duotone/binoculars.svg"); color: var(--lagune); }
.double__pratique h4::before { --ico: url("../assets/icons/duotone/info.svg"); color: var(--lagune); }
.double__avoir li { border-bottom-color: var(--trait); }
.double__espece { font-weight: 500; }
.double__avoir .donnee { font-family: var(--f-texte); font-weight: 600; font-size: 12.5px; letter-spacing: 0; }
.double__liens .lien::before { width: 16px; height: 16px; }
.double__liens [data-voir-carte]::before { --ico: url("../assets/icons/regular/map-pin.svg"); }
.double__liens [data-releves-site]::before { --ico: url("../assets/icons/regular/binoculars.svg"); }
.planche-carto__cote path { stroke: var(--encre); }
.planche-carto__points circle { fill: var(--rose); }
.planche-carto__grad text, .planche-carto__points text { font-family: var(--f-texte); font-weight: 600; font-size: 12px; letter-spacing: 0; }
@media (max-width: 1023px) {
  .double--gauche .double__photo, .double--droite .double__photo { margin-inline: 0; }
}

.regle-sites { font-family: var(--f-texte); font-weight: 600; font-size: 11.5px; }
.regle-sites__repere { font-family: var(--f-texte); font-weight: 600; font-size: 12px; }
.regle-sites__repere:hover, .regle-sites__repere[aria-current="true"] { color: var(--lagune); }
.regle-sites__curseur::before { border-radius: 50%; rotate: 0deg; background: var(--rose); }
.regle-sites__etiquette { letter-spacing: 0; font-weight: 700; color: var(--rose-texte); }

/* ===================================================================== CH. 05 CALENDRIER */
.frise-ciel__mois { background: var(--papier); border-bottom: 1px solid var(--trait); }
.frise-ciel__mois button { height: 52px; font-family: var(--f-texte); font-weight: 600; font-size: 13.5px; letter-spacing: 0; color: var(--graphite); }
.frise-ciel__mois button[aria-pressed="true"] { color: var(--lagune); box-shadow: inset 0 -3px 0 var(--lagune); }
.frise-ciel__mois button.est-aujourdhui::before { width: 7px; height: 7px; border-radius: 50%; rotate: 0deg; background: var(--rose); vertical-align: 1px; }
.frise-ciel__colonne-choisie { background: var(--lagune-pale); opacity: 0.7; }
.frise-ciel__aujourdhui { width: 2px; background: var(--rose); }
.frise-ciel__aujourdhui-etiquette { font-family: var(--f-texte); font-weight: 700; font-size: 12.5px; color: var(--rose-texte); border-left-color: var(--rose); }
.frise-ciel__aujourdhui-etiquette--gauche { border-right-color: var(--rose); }
.frise-ciel__titre-groupe { font-family: var(--f-affiche); font-weight: 600; font-size: 26px; letter-spacing: -0.025em; }
.frise-ciel__titre-groupe::before { width: 14px; height: 14px; border-radius: 4px; background: var(--c); }
.frise-ciel__sous { font-family: var(--f-texte); font-weight: 500; font-size: 13.5px; }
.frise-ciel__nom { font-family: var(--f-texte); font-weight: 500; font-size: 15px; }
.frise-ciel__nom .fc-planche { padding: 2px 7px; border-radius: 999px; background: var(--lagune-pale); color: var(--lagune); font-family: var(--f-texte); font-weight: 700; font-size: 11px; letter-spacing: 0; }
.frise-ciel__barres i { margin: 0 2px; border-radius: 999px; }
.frise-ciel__gbif i { border-radius: 1px; }
.frise-ciel__detail { font-family: var(--f-texte); font-weight: 500; font-size: 14.5px; }
.a-voir__liste { gap: 14px; }
.a-voir__carte { gap: 8px; padding: 20px 20px 14px; border-top: 0; border-radius: var(--r-3); background: var(--papier-2); }
.a-voir__nom { font-family: var(--f-affiche); font-weight: 600; font-size: 20px; letter-spacing: -0.02em; }
.a-voir__abondance i { width: 8px; height: 8px; border-color: var(--lagune); }
.a-voir__abondance i.est-plein { background: var(--lagune); }
.a-voir__sites { font-family: var(--f-texte); font-weight: 500; font-size: 13px; letter-spacing: 0; }
.calendrier__tableau { background: transparent; }
.tableau__groupe th { font-family: var(--f-affiche); font-weight: 600; font-size: 18px; letter-spacing: -0.015em; }
.calendrier__source { font-family: var(--f-texte); font-size: 13px; line-height: 1.6; }
.calendrier__gbif { font-family: var(--f-texte); font-size: 12px; letter-spacing: 0; }
@media (max-width: 767px) {
  .frise-ciel__mois button { height: 36px; border: 1px solid var(--trait); border-radius: 999px; box-shadow: none; }
  .frise-ciel__mois button[aria-pressed="true"] { background: var(--lagune); color: var(--sur-lagune); border-color: var(--lagune); box-shadow: none; }
  .fcm__groupe h3 { font-family: var(--f-affiche); font-weight: 600; font-size: 26px; letter-spacing: -0.02em; }
  .fcm__groupe h3::before { width: 14px; height: 14px; border-radius: 4px; }
  .fcm__ab { font-family: var(--f-texte); font-weight: 600; font-size: 12.5px; letter-spacing: 0; }
  .a-voir__carte { padding: 18px; }
}

/* ===================================================================== CH. 06 OBSERVATEURS */
.observateurs__nombre { font-weight: 600; color: var(--lagune); }
.observateurs__legende { font-weight: 500; font-size: 19px; }
.classement__mois { border-bottom: 1px solid var(--trait); }
.classement__fleche { border: 1px solid var(--trait); border-radius: 999px; transition: border-color var(--d-survol) var(--c-interface), background-color var(--d-survol) var(--c-interface); }
.classement__fleche:not(:disabled):hover { border-color: var(--trait-fort); background: var(--papier-2); }
.classement__libelle { font-family: var(--f-texte); font-weight: 600; font-size: 14.5px; }
.classement__titre { font-weight: 600; color: var(--encre); }
.classement__ligne { height: 70px; border-bottom-color: var(--trait); }
.classement__rang { font-family: var(--f-affiche); font-weight: 600; font-size: 36px; letter-spacing: -0.04em; color: var(--graphite); }
.classement__ligne:first-child .classement__rang { color: var(--rose); }
.classement__nom { font-family: var(--f-texte); font-weight: 600; font-size: 18px; }
.classement__ligne:first-child .classement__nom { display: flex; align-items: center; gap: 8px; }
.classement__ligne:first-child .classement__nom::before { --ico: url("../assets/icons/duotone/trophy.svg"); color: #D18A10; }
.classement__especes { font-family: var(--f-texte); font-weight: 700; font-size: 14px; }
.classement__listes { font-family: var(--f-texte); font-weight: 500; font-size: 13px; }
.classement__barre { bottom: 0; height: 4px; }
.classement__barre i { height: 4px; border-radius: 4px; background: var(--lagune); opacity: 0.85; }
.classement__ligne:first-child .classement__barre i { background: var(--rose); opacity: 1; }
.instantanes__titre { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--encre); }
.instantanes__titre::before { --ico: url("../assets/icons/duotone/eye.svg"); color: var(--lagune); }
.courbe h4 { font-family: var(--f-texte); font-weight: 600; font-size: 14px; letter-spacing: 0; }
.courbe .c-fond { fill: var(--lagune-pale); }
.courbe .c-axe { stroke: var(--trait); }
.courbe .c-ligne { stroke: var(--lagune); stroke-width: 2; }
.courbe__points button::before { background: var(--lagune); }
.courbe__jours { font-family: var(--f-texte); font-weight: 500; font-size: 12px; }

/* ===================================================================== COLOPHON */
.colophon { background: var(--colophon); }
:root[data-theme="dark"] .colophon { background: #0A0909; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .colophon { background: #0A0909; } }
.colophon__fond img { border-radius: var(--r-photo); }
.colophon__svg .cr-cote { stroke: var(--colophon-trait-fort); }
.colophon__svg .cr-ville { font-family: var(--f-texte); font-weight: 700; font-size: 12px; letter-spacing: 0.06em; }
.colophon__espece { font-family: var(--f-texte); font-weight: 500; font-size: 13.5px; letter-spacing: 0; }
.colophon__espece i { height: 3px; border-radius: 2px; }
.colophon__routes figcaption { font-weight: 500; }
.colophon__col { font-family: var(--f-texte); font-size: 14px; line-height: 1.65; }
.colophon__col h3 { display: flex; align-items: center; gap: 10px; font-family: var(--f-texte); font-weight: 600; font-size: 15px; letter-spacing: 0; color: var(--colophon-encre); }
.colophon__col h3::before { color: var(--lagune-claire); }
#col-sources::before { --ico: url("../assets/icons/duotone/books.svg"); }
#col-credits::before { --ico: url("../assets/icons/duotone/camera.svg"); }
#col-methode::before { --ico: url("../assets/icons/duotone/flask.svg"); }
#col-reglages::before { --ico: url("../assets/icons/duotone/sliders-horizontal.svg"); }
.colophon__notes .note__num { background: rgb(255 255 255 / 0.1); color: var(--colophon-encre); }
.colophon .bascule { background: rgb(255 255 255 / 0.08); }
.colophon .bascule button { color: var(--colophon-graphite); }
.colophon .bascule button[aria-pressed="true"] { background: rgb(255 255 255 / 0.16); color: #FFFFFF; box-shadow: none; }
.interrupteur { font-family: var(--f-texte); font-weight: 600; font-size: 14px; letter-spacing: 0; }
.interrupteur__piste { width: 42px; height: 24px; border: 0; background: rgb(255 255 255 / 0.16); transition: background-color var(--d-etat) var(--c-interface); }
.interrupteur__bille { top: 4px; left: 4px; width: 16px; height: 16px; background: #FFFFFF; }
.interrupteur[aria-checked="true"] .interrupteur__piste { background: var(--lagune-claire); border-color: transparent; }
.interrupteur[aria-checked="true"] .interrupteur__bille { transform: translateX(18px); background: #1A0F09; }
.colophon__ligne { font-family: var(--f-texte); font-weight: 500; font-size: 13px; letter-spacing: 0.01em; }
.colophon__haut { border-color: rgb(255 255 255 / 0.3); color: #FFFFFF; }
.colophon__haut:hover { background: #FFFFFF; color: var(--colophon); border-color: #FFFFFF; }
.colophon__mot {
  font-family: var(--f-affiche);
  font-weight: 700;
  font-style: normal;
  font-size: 24vw;
  line-height: 0.8;
  letter-spacing: -0.06em;
  color: rgb(238 234 228 / 0.94);
  margin-bottom: -0.17em;
}