/* =========================================================================
   Birdflow v5, tokens : couleurs, typographie, grille, formes, mouvement
   Identité : fond neutre, sans couleur, de jour comme de nuit ;
   accents en tons de terre (terre cuite, orange brûlé, ocre, brun, sable).
   Titres, chiffres et navigation en CCS Glyke ; texte courant en DM Sans.
   Les noms de variables de la v2 sont conservés : seules leurs valeurs changent.
   (--lagune garde son nom historique mais porte désormais la terre cuite.)
   ========================================================================= */

/* ---------- Polices ---------- */
/* Glyke n'a qu'une graisse : la plage 100 à 900 évite toute graisse synthétique */
@font-face { font-family: "Glyke"; src: url("../assets/fonts/glyke.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Glyke Repli"; src: local("Century Gothic"), local("Avenir Next"), local("Arial"); size-adjust: 92%; ascent-override: 96%; descent-override: 14%; }
@font-face { font-family: "Bricolage Repli"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"); size-adjust: 103%; ascent-override: 92%; descent-override: 24%; }
@font-face { font-family: "DM Sans Repli"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"); size-adjust: 98%; ascent-override: 96%; descent-override: 26%; }

:root {
  color-scheme: light;

  /* ---------- Couleurs, édition de jour : fond neutre ---------- */
  --papier: #F6F5F2;           /* fond principal : blanc neutre */
  --papier-2: #EFEDE8;         /* surfaces : panneaux, barres d'outils, fiches */
  --papier-3: #E6E3DC;         /* surfaces appuyées : pistes de bascules, survols */
  --papier-voile: rgb(246 245 242 / 0.86);
  --encre: #171410;            /* texte et titres : 16,8:1 */
  --graphite: #5E574F;         /* texte secondaire : 6,5:1 */
  --trait: #E2DED6;            /* filets de liste et de tableau */
  --trait-fort: #8C8379;       /* bordures de champs, graduations : 3,4:1 */
  --rose: #D2662B;             /* orange brûlé : points notables, éléments actifs (graphique 3,4:1) */
  --rose-texte: #A3461A;       /* orange brûlé pour texte : 5,6:1 */
  --rose-lavis: rgb(210 102 43 / 0.08);
  --rose-pale: #F6E3D6;
  --ocre: #B07A1E;             /* données de passage : 3,4:1 */
  --bleu: #4A6880;             /* eau, hivernants : bleu ardoise, 5,4:1 */
  --lagune: #9A4326;           /* couleur de marque, terre cuite : 6,0:1, texte blanc dessus 6,6:1 */
  --lagune-vive: #B4532A;
  --lagune-pale: #F3E4D8;
  --lagune-claire: #E8875A;    /* terre cuite sur fonds sombres */
  --ambre-pale: #F5E9D2;
  --ambre-texte: #7A5110;
  --sur-photo: #FFFFFF;
  --focus: #B4532A;

  /* ---------- Tons de terre nommés (habillage v5) ---------- */
  --terre: #9A4326;
  --orange-brule: #D2662B;
  --ocre-clair: #E9B25A;
  --brun: #5B4030;
  --sable: #E9D9C4;
  --peche: #F2C9A4;

  /* ---------- Groupes de présence (calendrier, frises) ---------- */
  --g-passage: #C68A21;
  --g-nicheurs: #6E7F3A;
  --g-hivernants: #4A6880;
  --g-annee: #B4532A;

  /* ---------- Fond du chapitre Sites : neutre ---------- */
  --fond-sites: #EFEDE8;

  /* ---------- Nuit (chapitre Passage) : une nuit neutre, sans teinte ---------- */
  --nuit: #0F0E0D;
  --nuit-profonde: #0A0909;
  --nuit-encre: #EEEAE4;
  --nuit-graphite: #A69E94;
  --nuit-trait: #262320;
  --nuit-trait-fort: #6B645B;
  --nuit-rose: #EE8F5F;
  --nuit-rose-texte: #F2A27A;
  --nuit-ocre: #E9B25A;
  --nuit-bleu: #8FB1C9;

  /* ---------- Colophon : nuit neutre ---------- */
  --colophon: #12100E;
  --colophon-encre: #EEEAE4;
  --colophon-graphite: #A69E94;
  --colophon-trait: #2A2622;
  --colophon-trait-fort: #6B645B;

  /* ---------- Couleurs des espèces balisées (Passage, colophon) ---------- */
  --trace-grue: #E9A23B;
  --trace-balbuzard: #E0703F;
  --trace-busard: #EAD7B7;
  --trace-butor: #A3B465;
  --trace-goeland: #8FB1C9;
  --trace-cigogne: #F4F0E8;
  --trace-tete: #FFB27A;

  /* ---------- Étalonnage photo : couleurs naturelles ---------- */
  --photo-filtre: saturate(1.03) contrast(1.02);

  /* ---------- Ombres ---------- */
  --ombre-1: 0 1px 2px rgb(23 20 16 / 0.06), 0 4px 14px rgb(23 20 16 / 0.06);
  --ombre-2: 0 2px 6px rgb(23 20 16 / 0.08), 0 18px 48px rgb(23 20 16 / 0.14);
  --ombre-nuit: 0 2px 8px rgb(0 0 0 / 0.25), 0 24px 60px rgb(0 0 0 / 0.35);

  /* ---------- Typographie ---------- */
  --f-titre: "Glyke", "Glyke Repli", "Century Gothic", "Avenir Next", Arial, sans-serif;
  --f-affiche: var(--f-titre);
  --f-heros: "Bricolage Grotesque", "Bricolage Repli", "Helvetica Neue", Arial, sans-serif;
  --f-texte: "DM Sans", "DM Sans Repli", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: var(--f-texte);    /* pas de police à chasse fixe : les données passent en DM Sans tabulaire */

  --t-etiquette: 13px;                              /* DM Sans 500 */
  --t-mono: 14px;                                   /* DM Sans tabulaire, données en ligne */
  --t-petit: 15px;
  --t-texte: 17px;                                  /* DM Sans 400, interlignage 1,6 */
  --t-chapeau: clamp(19px, 0.9vw + 10px, 23px);     /* DM Sans 400 */
  --t-titre-3: clamp(32px, 2.2vw + 10px, 48px);     /* Glyke : petites capitales, on agrandit */
  --t-titre-2: clamp(52px, 7.4vw, 128px);           /* Glyke */
  --t-affiche: clamp(64px, 11.6vw, 200px);
  --t-chiffre: clamp(72px, 9vw, 156px);             /* Glyke */
  --t-espece-max: 11vw;

  --i-serre: 0.9;
  --i-titre: 0.98;
  --i-texte: 1.6;
  --i-mono: 1.4;
  --a-affiche: -0.035em;
  --a-titre: -0.02em;
  --a-etiquette: 0;
  --a-chapitre: 0;

  /* ---------- Grille (invisible désormais, toujours utilisée pour la mise en page) ---------- */
  --colonnes: 12;
  --marge: clamp(16px, 2.78vw, 40px);
  --largeur-utile: calc(100vw - var(--marge) * 2 - var(--barre, 0px));
  --col: calc(var(--largeur-utile) / var(--colonnes));
  --gouttiere: 12px;

  /* ---------- Espacements ---------- */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px;
  --e-7: 48px; --e-8: 64px; --e-9: 96px; --e-10: 128px; --e-11: 192px;
  --section: clamp(88px, 12vh, 168px);

  /* ---------- Rayons ---------- */
  --r-0: 0;
  --r-1: 8px;          /* petits éléments, infobulles */
  --r-2: 14px;         /* champs, lignes au survol, cartes compactes */
  --r-3: 20px;         /* cartes, panneaux, tiroir */
  --r-photo: 28px;     /* grandes photos */
  --r-puce: 999px;     /* puces, boutons, badges */
  --r-rond: 999px;

  /* ---------- Mouvement ---------- */
  --c-revelation: cubic-bezier(0.16, 1, 0.3, 1);
  --c-rideau: cubic-bezier(0.76, 0, 0.24, 1);
  --c-interface: cubic-bezier(0.33, 1, 0.68, 1);
  --d-survol: 220ms;
  --d-etat: 350ms;
  --d-langue: 250ms;

  /* ---------- Plans ---------- */
  --z-fond: 0; --z-grille: 1; --z-contenu: 2; --z-flottant: 20; --z-entete: 40;
  --z-tiroir: 60; --z-curseur: 80; --z-intro: 100;

  --entete: 72px;
}

/* ---------- Édition de nuit : préférence système ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --papier: #100F0E; --papier-2: #191715; --papier-3: #221F1C; --papier-voile: rgb(16 15 14 / 0.84);
    --encre: #EEEAE4; --graphite: #A69E94; --trait: #2A2723; --trait-fort: #6B645B;
    --rose: #EE8F5F; --rose-texte: #F2A27A; --rose-lavis: rgb(238 143 95 / 0.12); --rose-pale: #3A2418;
    --ocre: #E9B25A; --bleu: #8FB1C9;
    --lagune: #E8875A; --lagune-vive: #F09A6E; --lagune-pale: #3A2418;
    --ambre-pale: #3A2C12; --ambre-texte: #F0C47A;
    --focus: #F09A6E;
    --g-passage: #E9B25A; --g-nicheurs: #A3B465; --g-hivernants: #8FB1C9; --g-annee: #E8875A;
    --fond-sites: #151311;
    --photo-filtre: saturate(1.02) brightness(0.94);
    --ombre-1: 0 1px 2px rgb(0 0 0 / 0.3), 0 4px 14px rgb(0 0 0 / 0.25);
    --ombre-2: 0 2px 6px rgb(0 0 0 / 0.35), 0 18px 48px rgb(0 0 0 / 0.45);
  }
}
/* ---------- Édition de nuit : choix explicite ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --papier: #100F0E; --papier-2: #191715; --papier-3: #221F1C; --papier-voile: rgb(16 15 14 / 0.84);
  --encre: #EEEAE4; --graphite: #A69E94; --trait: #2A2723; --trait-fort: #6B645B;
  --rose: #EE8F5F; --rose-texte: #F2A27A; --rose-lavis: rgb(238 143 95 / 0.12); --rose-pale: #3A2418;
  --ocre: #E9B25A; --bleu: #8FB1C9;
  --lagune: #E8875A; --lagune-vive: #F09A6E; --lagune-pale: #3A2418;
  --ambre-pale: #3A2C12; --ambre-texte: #F0C47A;
  --focus: #F09A6E;
  --g-passage: #E9B25A; --g-nicheurs: #A3B465; --g-hivernants: #8FB1C9; --g-annee: #E8875A;
  --fond-sites: #151311;
  --photo-filtre: saturate(1.02) brightness(0.94);
  --ombre-1: 0 1px 2px rgb(0 0 0 / 0.3), 0 4px 14px rgb(0 0 0 / 0.25);
  --ombre-2: 0 2px 6px rgb(0 0 0 / 0.35), 0 18px 48px rgb(0 0 0 / 0.45);
}

/* ---------- Le chapitre Passage est toujours nocturne ---------- */
#passage {
  --papier: transparent; --papier-2: #1A1816; --papier-3: #24211E; --papier-voile: rgb(15 14 13 / 0.8);
  --encre: var(--nuit-encre); --graphite: var(--nuit-graphite); --trait: var(--nuit-trait);
  --trait-fort: var(--nuit-trait-fort); --rose: var(--nuit-rose); --rose-texte: var(--nuit-rose-texte);
  --ocre: var(--nuit-ocre); --bleu: var(--nuit-bleu);
  --lagune: var(--lagune-claire); --lagune-pale: rgb(232 135 90 / 0.14); --focus: var(--lagune-claire);
  color: var(--encre);
}
/* ---------- Le colophon est une nuit neutre ---------- */
.colophon {
  --papier: transparent; --papier-2: #1C1916; --papier-3: #26221E; --papier-voile: rgb(18 16 14 / 0.8);
  --encre: var(--colophon-encre); --graphite: var(--colophon-graphite); --trait: var(--colophon-trait);
  --trait-fort: var(--colophon-trait-fort); --rose: var(--nuit-rose); --rose-texte: var(--nuit-rose-texte);
  --ocre: var(--nuit-ocre); --bleu: var(--nuit-bleu);
  --lagune: var(--lagune-claire); --lagune-pale: rgb(232 135 90 / 0.14); --focus: var(--lagune-claire);
  --nuit: var(--colophon); --nuit-encre: var(--colophon-encre); --nuit-graphite: var(--colophon-graphite);
  --nuit-trait: var(--colophon-trait); --nuit-trait-fort: var(--colophon-trait-fort);
  color: var(--encre);
}

@media (max-width: 767px) {
  :root { --colonnes: 4; --t-etiquette: 13px; --t-mono: 14px; --t-texte: 16.5px; --entete: 60px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  :root { --colonnes: 8; }
}