/* =========================================================================
   Birdflow v2, base : reset, typographie, utilitaires, focus,
   couleurs forcées, mouvement réduit
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;
  scrollbar-gutter: stable;
  background: var(--papier);
  scroll-padding-top: calc(var(--entete) + 8px);
}
html:not(.lenis) { scroll-behavior: smooth; }
html[data-motion="reduced"] { scroll-behavior: auto; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  min-height: 100svh;
  overflow-x: clip;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--f-texte);
  font-size: var(--t-texte);
  line-height: var(--i-texte);
  font-weight: 400;
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 16;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
svg { overflow: visible; }
figure, p, h1, h2, h3, h4, dl, dd, ol, ul, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
button:disabled { cursor: default; }
table { border-collapse: collapse; }
hr { border: 0; border-top: 1px solid var(--trait); margin: 0; }
abbr[title] { text-decoration: none; }
[hidden] { display: none !important; }
::selection { background: var(--encre); color: var(--papier); }

h1, h2, h3 { font-weight: 300; font-family: var(--f-affiche); }

/* ---------- Focus ---------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--rose-texte);
  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.6);
}

/* ---------- Typographie : classes ---------- */
.etiquette {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: var(--t-etiquette);
  line-height: 1.35;
  letter-spacing: var(--a-etiquette);
  text-transform: none;
  color: var(--graphite);
  font-variant-numeric: tabular-nums;
}
.donnee {
  font-family: var(--f-mono);
  font-weight: 400;
  font-size: var(--t-mono);
  line-height: var(--i-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.latin {
  font-family: var(--f-texte);
  font-style: normal;
  font-size: 0.92em;
  color: var(--graphite);
}
.chapeau {
  font-family: var(--f-texte);
  font-size: var(--t-chapeau);
  font-weight: 350;
  font-variation-settings: "opsz" 36;
  line-height: 1.3;
  max-width: 34ch;
  text-wrap: pretty;
}
.texte {
  font-family: var(--f-texte);
  font-size: var(--t-texte);
  line-height: var(--i-texte);
  max-width: 62ch;
  text-wrap: pretty;
}
html[lang="fr"] .texte, html[lang="fr"] .chapeau { hyphens: auto; }
.titre-2 {
  font-family: var(--f-affiche);
  font-weight: 300;
  font-size: var(--t-titre-2);
  line-height: var(--i-titre);
  letter-spacing: var(--a-titre);
}
.titre-3 {
  font-family: var(--f-affiche);
  font-weight: 300;
  font-size: var(--t-titre-3);
  line-height: 1;
  letter-spacing: -0.015em;
}
.chiffre {
  font-family: var(--f-affiche);
  font-weight: 200;
  font-size: var(--t-chiffre);
  line-height: 0.9;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums tabular-nums;
}

.visuellement-masque {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Coupes de lignes imposées selon la langue */
html[lang="fr"] .coupe-en,
html[lang="en"] .coupe-fr { display: none; }
.coupe-mobile { display: none; }
@media (max-width: 767px) { .coupe-mobile { display: inline; } }

/* Découpage en lignes et en lettres (decoupe.js) */
.l { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.l__in { display: block; will-change: auto; }
.lettre-masque { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; margin-bottom: -0.12em; padding-top: 0.08em; margin-top: -0.08em; }
.lettre { display: inline-block; }

/* Lien d'évitement */
.evitement {
  position: fixed;
  top: 8px; left: 8px;
  z-index: calc(var(--z-intro) + 1);
  padding: 12px 16px;
  background: var(--encre);
  color: var(--papier);
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: var(--a-etiquette);
  text-transform: none;
  transform: translateY(-160%);
  transition: transform var(--d-survol) var(--c-interface);
}
.evitement:focus, .evitement:focus-visible { transform: none; }
.evitement + .evitement { left: 200px; }

noscript .sans-js,
.sans-js {
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--graphite);
  padding: 16px var(--gouttiere);
  border-top: 1px solid var(--trait);
}

/* ---------- Écran papier avant l'intro (retiré par main.js, ou au bout de 4 s) ---------- */
.intro-attente body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--papier);
}

/* ---------- Sans JavaScript : les modules dynamiques se retirent proprement ---------- */
.no-js .telescripteur,
.no-js .registre__outils,
.no-js .registre__pied,
.no-js .registre__compte,
.no-js .mini-carte,
.no-js .vignettes,
.no-js .scene,
.no-js .passage__cadre,
.no-js .aube__soleil,
.no-js .atlas__carte,
.no-js .bascule-mobile,
.no-js .classement__mois,
.no-js .classement__tout,
.no-js .instantanes,
.no-js .sommaire-bouton,
.no-js .son-global,
.no-js .reglages .bascule,
.no-js .colophon__reglages,
.no-js .regle-sites { display: none !important; }
.no-js .passage__etapes { margin-top: 0; }

/* ---------- Mouvement réduit : rien ne doit rester masqué ---------- */
html[data-motion="reduced"] *,
html[data-motion="reduced"] *::before,
html[data-motion="reduced"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="normal"]) *,
  html:not([data-motion="normal"]) *::before,
  html:not([data-motion="normal"]) *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- Couleurs forcées ---------- */
@media (forced-colors: active) {
  .grille, .calque-nuit, .curseur, .tiroir-voile { display: none !important; }
  *, *::before, *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    mix-blend-mode: normal !important;
  }
  .entete { mix-blend-mode: normal !important; background: Canvas !important; border-bottom: 1px solid CanvasText; }
  .bouton, .puce, .uicn, .exemple, .fiche-saison, .tiroir, .lecteur__bouton { border-color: CanvasText !important; }
  .ouverture__titre-copie, .planche__nom-copie { display: none !important; }
  .ouverture__lignes { color: CanvasText !important; }
  .planche__nom { color: CanvasText !important; }
}