/* Vigifeu — feuille de style unique, sobre, lisible en mobilité (Spec 04 §8).
   Contrastes AA, une seule colonne fluide, budget serré (Spec 04 §5). */

:root {
  /* Palette de marque Sentifeu (logo) : marine + flamme orange→rouge. */
  --marine: #1b2a4a;     /* bleu marine — titres, liens, forêt du logo */
  --marine-clair: #33507f;
  --orange: #f2711c;
  --rouge: #e01e1e;      /* AA sur blanc */
  --vert: #2f7d4f;       /* vert forêt — état « rien à signaler / pas de feu » */
  --vert-doux: #eaf5ee;
  --flamme-a: #f7941d;   /* haut de flamme (orange) */
  --flamme-b: #e01e1e;   /* bas de flamme (rouge) */

  --encre: #17202e;      /* encre légèrement bleutée (cohérence marine) */
  --papier: #ffffff;
  --gris: #566072;
  --trait: #d9dfe8;
  --fond-doux: #f5f7fa;
  --front: var(--rouge);   /* front_actif — rouge, doublé par la forme/intensité */
  --recent: var(--orange); /* recent — orange */
  --ancien: #8a93a3;       /* plus_detecte — gris bleuté */
  --lien: var(--marine);
  --largeur: 44rem;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 1rem/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--encre);
  background: var(--papier);
}

main, header.site, footer.pied { max-width: var(--largeur); margin: 0 auto; padding: 0 1rem; }

/* Liseré flamme en haut de chaque page (identité de marque). */
body::before { content: ""; display: block; height: 4px; background: linear-gradient(90deg, var(--flamme-a), var(--flamme-b)); }

/* En-tête : logo cliquable vers l'accueil. */
.marque-logo { display: inline-flex; align-items: center; margin: .7rem 0 .1rem; }
.marque-logo img { height: 2.9rem; width: auto; display: block; max-width: 100%; }

a { color: var(--lien); text-underline-offset: .15em; }
a:hover { color: var(--orange); }
a:focus, .skip:focus { outline: 3px solid var(--orange); outline-offset: 2px; }

.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--papier); padding: .5rem 1rem; z-index: 10; }

.fil ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: .6rem 0; margin: 0; font-size: .85rem; color: var(--gris); }
.fil li + li::before { content: "›"; margin-right: .4rem; color: var(--trait); }

h1 { font-size: 1.7rem; line-height: 1.2; margin: .4rem 0; color: var(--marine); }
h2 { font-size: 1.15rem; margin: 1.6rem 0 .5rem; color: var(--marine); border-bottom: 2px solid var(--trait); padding-bottom: .25rem; }

.badges { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0; }
.badge { display: inline-block; padding: .12rem .6rem; border-radius: 1rem; font-size: .8rem; font-weight: 600; background: var(--fond-doux); border: 1px solid var(--trait); color: var(--marine); }
.badge.actif { background: #fdecea; border-color: var(--rouge); color: var(--rouge); }
.badge.plus_detecte, .badge.archive { background: var(--fond-doux); color: var(--gris); }

.bandeau { background: var(--fond-doux); border-left: 4px solid var(--orange); padding: .7rem 1rem; margin: 1rem 0; }

.synthese p { margin: .5rem 0; }
.synthese { font-size: 1.05rem; }

table { border-collapse: collapse; width: 100%; font-size: .9rem; margin: .5rem 0; display: block; overflow-x: auto; }
th, td { text-align: left; padding: .35rem .6rem; border-bottom: 1px solid var(--trait); white-space: nowrap; }

.communes ul, .attributions ul { padding-left: 1.1rem; }
.groupe-rel { margin: .6rem 0; }
.groupe-rel h3 { font-size: 1rem; margin: .3rem 0; }

.indispo { color: var(--gris); font-style: italic; }
/* État « tout va bien » (pas de feu, pas d'alerte) — vert forêt rassurant. */
.calme { color: var(--vert); background: var(--vert-doux); border-left: 3px solid var(--vert); padding: .5rem .8rem; border-radius: .3rem; }

/* Carte (enrichissement) — hauteur fixe, la légende contractuelle est en HTML */
.carte { width: 100%; height: 22rem; border: 1px solid var(--trait); border-radius: .3rem; margin: .5rem 0; background: var(--fond-doux); }
.carte[hidden] { display: none; }
.legende-carte { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .85rem; margin: .3rem 0 .8rem; }
.legende-carte span { display: inline-flex; align-items: center; gap: .35rem; }
.pastille { width: .8rem; height: .8rem; border-radius: .2rem; display: inline-block; }
.pastille.front_actif { background: var(--front); }
.pastille.recent { background: var(--recent); }
.pastille.plus_detecte { background: var(--ancien); }
.legende-cone { font-size: .8rem; color: var(--gris); font-style: italic; }

ul.colonnes { columns: 2 12rem; gap: 1.2rem; padding-left: 1.1rem; }

details { margin: .6rem 0; }
summary { cursor: pointer; font-weight: 600; }

footer.pied { margin-top: 2.5rem; border-top: 3px solid transparent; border-image: linear-gradient(90deg, var(--flamme-a), var(--flamme-b)) 1; padding-top: 1rem; font-size: .85rem; color: var(--gris); }
footer.pied h2 { font-size: 1rem; border: 0; color: var(--marine); }
.latence { background: var(--fond-doux); border-left: 3px solid var(--orange); padding: .6rem .8rem; border-radius: .3rem; }
.note-heure { font-size: .8rem; color: var(--gris); margin: .4rem 0; }
.pied-nav { margin: .2rem 0 .8rem; line-height: 2; }
.code-dept { color: var(--gris); font-weight: 400; }

@media (prefers-color-scheme: dark) {
  :root {
    --marine: #9fb6e6; --marine-clair: #c2d2ee;   /* bleu clair lisible sur fond sombre */
    --encre: #e7ebf2; --papier: #141821; --gris: #9aa4b4; --trait: #2c3444; --fond-doux: #1c2230;
    --ancien: #7f8aa0; --vert: #6fca90; --vert-doux: #17251c;
  }
}