/* =====================================================================
   mon-risque.com  ::  feuille de style de base (reskinnable)
   Esthetique data-journalisme : sobre, lisible, palette mesuree.
   Les niveaux d'exposition utilisent une echelle factuelle, non alarmiste.
   ===================================================================== */

:root {
  --c-bg: #f6f7f5;
  --c-surface: #ffffff;
  --c-ink: #15211c;
  --c-muted: #5b6b63;
  --c-line: #e2e6e2;
  --c-primary: #15497d;
  --c-primary-2: #1f6fb2;
  --c-accent: #0e6ba8;

  /* niveaux factuels */
  --lvl-faible-bg: #e7f4ec;   --lvl-faible-fg: #1b6b46;
  --lvl-modere-bg: #fdf3da;   --lvl-modere-fg: #8a6300;
  --lvl-notable-bg: #fde8d4;  --lvl-notable-fg: #a65411;
  --lvl-eleve-bg: #fce4e1;    --lvl-eleve-fg: #b23121;
  --lvl-na-bg: #eef0ee;       --lvl-na-fg: #5b6b63;

  --radius: 12px;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.05);
  --container: 1080px;
  --gap: 20px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--c-ink);
  background: var(--c-bg);
  line-height: 1.6;
  font-size: 17px;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--c-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.25; color: var(--c-primary); }
h1 { font-size: 1.9rem; margin: .2em 0 .4em; }
h2 { font-size: 1.4rem; margin: 1.6em 0 .5em; }
h3 { font-size: 1.12rem; margin: 1.2em 0 .4em; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 18px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--c-primary); color: #fff;
  padding: 10px 16px; z-index: 100; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ---------- En-tete ---------- */
.site-header {
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-line);
  position: sticky; top: 0; z-index: 1100;
}
/* Confine les cartes Leaflet dans leur propre contexte d'empilement :
   leurs controles internes (z-index jusqu'a 1000) ne doivent jamais passer
   au-dessus de l'en-tete sticky ni du menu burger ouvert. */
.leaflet-container { position: relative; z-index: 0; }
.header-inner { display: flex; align-items: center; gap: var(--gap); padding: 12px 18px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--c-primary); }
.brand:hover { text-decoration: none; }
.brand-mark {
  display: inline-grid; place-items: center; width: 34px; height: 34px;
  background: var(--c-primary); color: #fff; border-radius: 9px; font-size: .85rem; letter-spacing: .5px;
}
.brand-name { font-size: 1.12rem; }
.brand-dot { color: var(--c-primary-2); }
.brand-logo { height: 44px; width: auto; display: block; }

.search { display: flex; flex: 1 1 320px; min-width: 220px; }
.search input {
  flex: 1; padding: 10px 14px; border: 1px solid var(--c-line); border-right: 0;
  border-radius: 10px 0 0 10px; font-size: 1rem; background: #fff;
}
.search input:focus { outline: 2px solid var(--c-primary-2); outline-offset: -1px; }
.search button {
  padding: 10px 18px; border: 0; background: var(--c-primary); color: #fff;
  border-radius: 0 10px 10px 0; cursor: pointer; font-size: 1rem;
}
.search button:hover { background: var(--c-primary-2); }
/* Barre de navigation principale (2e rangee) : bande pleine largeur,
   contenu aligne sur le conteneur (meme largeur que logo/recherche/contenu). */
.nav-bar { border-top: 1px solid var(--c-line); background: var(--c-surface); }
.main-nav {
  display: flex; flex-wrap: wrap; gap: 2px 6px;
  padding: 4px 18px; font-size: .95rem;
}
.nav-group { position: relative; }
.nav-group-t {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; color: var(--c-ink); font-weight: 600;
  background: none; border: 0; cursor: pointer; padding: 9px 12px; border-radius: 8px;
}
.nav-group-t::after { content: "\25BE"; font-size: .7em; color: var(--c-muted, #5a6b7b); }
.nav-group-t:hover { background: #f1f5f9; color: var(--c-primary); }
.nav-drop {
  position: absolute; left: 0; top: 100%; min-width: 230px; z-index: 60;
  display: none; flex-direction: column; padding: 6px;
  background: #fff; border: 1px solid var(--c-line); border-radius: 10px;
  box-shadow: var(--shadow);
}
.nav-group:hover .nav-drop,
.nav-group:focus-within .nav-drop,
.nav-group.open .nav-drop { display: flex; }
.nav-group.open .nav-group-t::after,
.nav-group:hover .nav-group-t::after { transform: rotate(180deg); }
.nav-drop a { color: var(--c-ink); padding: 8px 12px; border-radius: 6px; white-space: nowrap; }
.nav-drop a:hover { background: #f1f5f9; color: var(--c-primary); text-decoration: none; }

/* Bouton burger (mobile uniquement) */
.nav-burger {
  display: none; margin-left: auto; width: 42px; height: 38px;
  border: 1px solid var(--c-line); border-radius: 9px; background: #fff;
  cursor: pointer; padding: 0; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav-burger span { display: block; width: 20px; height: 2px; background: var(--c-primary); border-radius: 2px; transition: transform .2s, opacity .2s; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-burger { display: flex; }
  .nav-bar { border-top: 0; background: transparent; }
  .main-nav { display: none; flex-direction: column; gap: 2px; padding: 6px 18px 12px; max-height: 78vh; overflow-y: auto; }
  .main-nav.open { display: flex; background: var(--c-surface); border-top: 1px solid var(--c-line); }
  /* sur mobile : tout est deplie, pas de dropdown flottant */
  .nav-group { border-bottom: 1px solid var(--c-line); padding: 4px 0; }
  .nav-group-t { width: 100%; justify-content: space-between; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--c-muted, #5a6b7b); cursor: default; }
  .nav-group-t::after { content: ""; }
  .nav-drop { position: static; display: flex; min-width: 0; border: 0; box-shadow: none; padding: 0 0 6px; }
  .nav-drop a { padding: 9px 8px; }
}

/* ---------- Hero ---------- */
.hero { padding: 48px 0 24px; }
.hero h1 { font-size: 2.2rem; max-width: 18ch; }
.hero-2col { display: grid; grid-template-columns: 1.05fr .95fr; gap: 36px; align-items: center; }
.hero-2col .hero-left { min-width: 0; }
.hero-2col .carte-fr { height: 460px; }
@media (max-width: 900px) {
  .hero-2col { grid-template-columns: 1fr; gap: 18px; }
  .hero-2col .carte-fr { height: 340px; }
}
.hero p.lead { font-size: 1.18rem; color: var(--c-muted); max-width: 60ch; }
.hero .search-big { margin: 24px 0; max-width: 560px; }
.hero .search-big .search input { border-radius: 12px 0 0 12px; padding: 14px 16px; }
.hero .search-big .search button { border-radius: 0 12px 12px 0; padding: 14px 22px; }

/* ---------- Grilles de cartes ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--gap); margin: 16px 0 32px; }
.section-title { margin: 36px 0 4px; font-size: 1.5rem; }
.card-imglink { display: block; }
.card-img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; margin-bottom: 12px; }
.article-hero { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); margin: 0 0 18px; }
.tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; align-items: center; }
.btn-tool { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border: 1px solid var(--c-line); border-radius: 999px; background: var(--c-surface); color: var(--c-ink); font-size: .85rem; cursor: pointer; text-decoration: none; transition: border-color .12s, color .12s, background .12s; }
.btn-tool:hover { border-color: var(--c-primary); color: var(--c-primary); text-decoration: none; }
.btn-tool.is-fav { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.btn-tool svg, .quick-links svg { width: 15px; height: 15px; flex: 0 0 auto; }
.tools-label { font-size: .82rem; color: var(--c-muted, #5a6b7b); margin-left: 4px; align-self: center; }
.tools-sep { flex-basis: 100%; height: 0; }
@media (min-width: 620px) { .tools-sep { flex-basis: auto; width: 1px; height: 20px; background: var(--c-line); margin: 0 4px; } }

/* liens thematiques rapides (sous le titre commune) */
.quick-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 18px; }
.quick-links a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border: 1px solid var(--c-line); border-radius: 999px; background: var(--c-surface); color: var(--c-ink); font-size: .9rem; font-weight: 500; text-decoration: none; transition: border-color .12s, color .12s; }
.quick-links a:hover { border-color: var(--c-primary); color: var(--c-primary); }
@media print {
  .site-header, .site-footer, .main-nav, form, .tools, .no-print, .ac-box,
  #carte, .map-2col, #air-box, #vigieau-box, .breadcrumbs, .btn { display: none !important; }
  body { background: #fff; }
  a { color: inherit; text-decoration: none; }
  .table-wrap { overflow: visible; }
}
.map-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 8px 0 6px; }
.map-2col .map-fig { margin: 0; }
.map-2col .map-box { height: 320px; border-radius: 12px; overflow: hidden; border: 1px solid var(--c-line); background: var(--bg); }
.map-2col figcaption { margin-top: 6px; }
@media (max-width: 720px) { .map-2col { grid-template-columns: 1fr; } }
.card {
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: 18px; box-shadow: var(--shadow);
}
.card h3 { margin-top: 0; }
/* carte entierement cliquable (lien etire, sans JS) */
.card-link { position: relative; transition: border-color .12s, box-shadow .12s; }
.card-link h3 a { text-decoration: none; }
.card-link h3 a::after { content: ""; position: absolute; inset: 0; }
.card-link:hover { border-color: var(--c-primary); }
.card-link:hover h3 a { color: var(--c-primary); }
.card-cta { color: var(--c-primary) !important; font-weight: 600; }
.card .cat { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--c-muted); }
.card p { margin: .4em 0 0; color: var(--c-muted); font-size: .95rem; }

/* ---------- Resultats de recherche ---------- */
.results { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 10px; }
.results li { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 10px; }
.results a { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; color: var(--c-ink); }
.results a:hover { background: #f0f4f1; text-decoration: none; }
.results .meta { color: var(--c-muted); font-size: .9rem; }

/* ---------- Fil d'Ariane ---------- */
.breadcrumb { font-size: .9rem; color: var(--c-muted); margin: 18px 0 6px; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; }
.breadcrumb li + li::before { content: "›"; margin-right: 6px; color: var(--c-line); }

/* ---------- Fiche commune ---------- */
.page-head { margin: 8px 0 24px; }
.page-head .sub { color: var(--c-muted); font-size: 1.05rem; }

.synthese { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin: 18px 0 30px; }
.risk {
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: 16px; box-shadow: var(--shadow);
}
.risk .risk-name { font-weight: 600; color: var(--c-primary); }
.risk .risk-val { margin-top: 6px; font-size: .96rem; }
a.risk { text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s; }
a.risk:hover { border-color: var(--c-primary-2); box-shadow: 0 6px 18px rgba(0,0,0,.10); }
a.risk:focus-visible { outline: 2px solid var(--c-primary-2); outline-offset: 2px; }
a.risk::after { content: "Voir le detail \203A"; display: block; margin-top: 10px; font-size: .8rem; font-weight: 600; color: var(--c-primary-2); }

/* chips de niveau factuel */
.chip {
  display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .82rem; font-weight: 600;
  background: var(--lvl-na-bg); color: var(--lvl-na-fg);
}
.chip.faible  { background: var(--lvl-faible-bg);  color: var(--lvl-faible-fg); }
.chip.modere  { background: var(--lvl-modere-bg);  color: var(--lvl-modere-fg); }
.chip.notable { background: var(--lvl-notable-bg); color: var(--lvl-notable-fg); }
.chip.eleve   { background: var(--lvl-eleve-bg);   color: var(--lvl-eleve-fg); }
.chip.na      { background: var(--lvl-na-bg);      color: var(--lvl-na-fg); }
.chip.oui     { background: var(--lvl-notable-bg); color: var(--lvl-notable-fg); }
.chip.non     { background: var(--lvl-faible-bg);  color: var(--lvl-faible-fg); }

/* tableaux */
.table-wrap { overflow-x: auto; margin: 14px 0 26px; }
table.data { width: 100%; border-collapse: collapse; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; }
table.data th, table.data td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--c-line); font-size: .95rem; }
table.data th { background: #f0f4f1; color: var(--c-primary); font-weight: 600; }
table.data tr:last-child td { border-bottom: 0; }

/* encarts */
.callout {
  background: #fff8e6; border: 1px solid #f0dca0; border-left: 4px solid #d9a400;
  border-radius: 10px; padding: 14px 18px; margin: 22px 0;
}
.callout.info { background: #eaf3fb; border-color: #b9d6ee; border-left-color: var(--c-accent); }
.callout .callout-title { font-weight: 700; display: block; margin-bottom: 4px; }

.btn {
  display: inline-block; background: var(--c-primary); color: #fff; padding: 11px 20px;
  border-radius: 10px; font-weight: 600;
}
.btn:hover { background: var(--c-primary-2); text-decoration: none; }
.btn.secondary { background: #fff; color: var(--c-primary); border: 1px solid var(--c-line); }

.sources-note { font-size: .88rem; color: var(--c-muted); margin: 24px 0; }

/* ---------- Pied de page ---------- */
.site-footer { margin-top: 56px; background: #0d2233; color: #cdd8e4; padding: 32px 0; }
.site-footer a { color: #9fc7e6; }
.disclaimer { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 16px 18px; }
.disclaimer-title { color: #fff; display: block; margin-bottom: 6px; }
.disclaimer p { margin: 6px 0; font-size: .92rem; }
.official-links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-nav { display: flex; gap: 18px; flex-wrap: wrap; margin: 18px 0 0; }
.footer-nav a { color: #9fc7e6; }
.copyright { font-size: .85rem; color: #8aa298; margin-top: 18px; }

/* ---------- Index de communes / stats ---------- */
.commune-index { columns: 4 210px; column-gap: 24px; list-style: none; padding: 0; margin: 16px 0 30px; }
.commune-index li { break-inside: avoid; margin: 0 0 6px; display: flex; justify-content: space-between; gap: 8px; }
.commune-index .lvl { font-size: .72rem; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin: 18px 0 28px; }
.stat { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 10px; padding: 12px 14px; }
.stat b { display: block; font-size: 1.5rem; color: var(--c-primary); line-height: 1.2; }
.stat span { color: var(--c-muted); font-size: .85rem; }

/* ---------- Autocompletion ---------- */
.ac-box { position: absolute; top: 100%; left: 0; right: 0; z-index: 60; background: #fff; border: 1px solid var(--c-line); border-top: 0; border-radius: 0 0 10px 10px; box-shadow: var(--shadow); max-height: 340px; overflow-y: auto; display: none; }
.ac-item { padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--c-line); font-size: .95rem; color: var(--c-ink); }
.ac-item:last-child { border-bottom: 0; }
.ac-item:hover, .ac-item.active { background: #eef4fb; }
.ac-meta { color: var(--c-muted); font-size: .85rem; }

/* ---------- Carte de France (accueil) ---------- */
.carte-fr { height: 540px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--c-line); background: #eef2f6; }
.carte-fr-wrap { margin: 8px 0 10px; }
@media (max-width: 720px) { .carte-fr { height: 380px; } }

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .header-inner { flex-wrap: wrap; }
  .search { order: 3; flex-basis: 100%; }
  .hero h1 { font-size: 1.7rem; }
  body { font-size: 16px; }
}

/* ---------- Rappels de produits ---------- */
.rappels-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; margin: 14px 0 8px; }
.rappel-card { border: 1px solid var(--c-line); border-radius: var(--radius); padding: 12px 14px; background: #fff; }
.rappel-card.has-img { display: flex; gap: 12px; align-items: flex-start; }
.rappel-img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; border: 1px solid var(--c-line); background: #f4f6f8; flex: 0 0 auto; }
.rappel-body { min-width: 0; flex: 1; }
.rappel-meta { font-size: 12px; color: var(--c-muted, #5a6b7b); margin-bottom: 4px; }
.rappel-titre { margin-bottom: 6px; }
.rappel-motif { font-size: 14px; margin-bottom: 6px; }
.rappel-risque { font-size: 13px; color: #b23121; margin-bottom: 6px; font-weight: 600; }
.rappel-conduite { font-size: 13px; margin-bottom: 6px; }
.rappel-distrib { font-size: 12px; color: var(--c-muted, #5a6b7b); margin-bottom: 6px; }
.rappel-links { font-size: 13px; }
.rappel-titre a { text-decoration: none; }
.rappel-titre a:hover { text-decoration: underline; }
.rappel-imglink { flex: 0 0 auto; }

/* fiche detaillee d'un rappel / d'une alerte */
.fiche-rappel { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; margin: 16px 0 8px; }
.fiche-img { width: 220px; max-width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--c-line); background: #f4f6f8; flex: 0 0 auto; }
.fiche-dl { margin: 0; flex: 1; min-width: 260px; display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; align-items: baseline; }
.fiche-dl dt { font-weight: 600; color: var(--c-muted, #5a6b7b); font-size: 13px; }
.fiche-dl dd { margin: 0; }
.fiche-dl dd.fiche-risque { color: #b23121; font-weight: 600; }
.fiche-links { margin: 14px 0; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
@media (max-width: 560px) { .fiche-dl { grid-template-columns: 1fr; gap: 2px 0; } .fiche-dl dt { margin-top: 8px; } }

/* pagination */
.pagination { margin: 18px 0 6px; }
.pagination ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; align-items: center; }
.pagination li { margin: 0; }
.pagination a, .pagination .pg-cur { display: inline-block; min-width: 38px; text-align: center; padding: 7px 11px; border: 1px solid var(--c-line); border-radius: 8px; text-decoration: none; color: var(--c-ink); background: #fff; font-size: .95rem; }
.pagination a:hover { border-color: var(--c-primary); color: var(--c-primary); }
.pagination .pg-cur { background: var(--c-primary); color: #fff; border-color: var(--c-primary); font-weight: 600; }
.pagination .pg-prev a, .pagination .pg-next a { font-weight: 600; }
.pagination .pg-gap { padding: 7px 4px; color: var(--c-muted, #5a6b7b); }
.pagination .pg-info { margin: 8px 0 0; font-size: 13px; color: var(--c-muted, #5a6b7b); }
.page-num { font-weight: 400; font-size: .7em; color: var(--c-muted, #5a6b7b); }

/* Lexique : index A-Z + definitions */
.lex-index { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 18px; }
.lex-index a, .lex-index span { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 6px; font-weight: 600; font-size: .9rem; text-decoration: none; }
.lex-index a { border: 1px solid var(--c-line); background: #fff; color: var(--c-primary); }
.lex-index a:hover { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.lex-index span { color: #c2ccd6; }
dl.lexique dt { margin-top: 12px; scroll-margin-top: 90px; }
dl.lexique dd { margin: 2px 0 0; color: var(--c-ink); }

/* DPE : barres colorees proportionnelles */
.dpe-chart { margin: 12px 0 6px; }
.dpe-row { display: flex; align-items: center; gap: 8px; margin: 5px 0; }
.dpe-badge { flex: 0 0 auto; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 5px; font-weight: 700; color: #1c1c1c; font-size: .9rem; }
.dpe-track { flex: 1; min-width: 60px; height: 18px; background: #eef2f5; border-radius: 4px; overflow: hidden; }
.dpe-fill { display: block; height: 100%; border-radius: 4px; min-width: 2px; }
.dpe-num { flex: 0 0 auto; width: 132px; font-size: 13px; color: var(--c-ink); }
.dpe-pct { color: var(--c-muted, #5a6b7b); }
@media (max-width: 520px) { .dpe-num { width: 100px; font-size: 12px; } }

/* graphiques SVG */
.chart-fig { margin: 10px 0 18px; }
.chart { width: 100%; height: auto; display: block; }
.chart-fig figcaption { font-size: 12px; color: var(--c-muted, #5a6b7b); margin-top: 4px; }
/* ---------- Hygiene alimentaire (Alim'confiance) ---------- */
.alim-list { margin: 12px 0; }
.alim-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--c-line); }
.alim-note { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; font-weight: 700; color: #fff; }
.alim-note.n1 { background: #b23121; } /* a corriger d'urgence */
.alim-note.n2 { background: #e08a1e; } /* a ameliorer */
.alim-note.n3 { background: #2ea35d; } /* satisfaisant */
.alim-note.n4 { background: #1c7c43; } /* tres satisfaisant */

/* ---------- Sommaire + sections repliables (fiche commune) ---------- */
.commune-toc { border: 1px solid var(--c-line); border-radius: var(--radius); padding: 12px 16px; margin: 4px 0 22px; background: #f7f9fb; }
.commune-toc strong { display: block; margin-bottom: 8px; font-size: 14px; color: var(--c-muted, #5a6b7b); text-transform: uppercase; letter-spacing: .03em; }
.commune-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.commune-toc li { margin: 0; }
.commune-toc a { display: inline-block; font-size: 13px; padding: 4px 11px; border: 1px solid var(--c-line); border-radius: 999px; background: #fff; color: var(--c-ink); text-decoration: none; transition: border-color .12s, color .12s, background .12s; }
.commune-toc a:hover { border-color: var(--c-primary); color: var(--c-primary); text-decoration: none; }
.commune-toc a.active { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
h2.sec-h2 { cursor: pointer; position: relative; padding-right: 24px; }
h2.sec-h2::after { content: "\25BC"; position: absolute; right: 2px; font-size: .6em; color: var(--c-muted, #8a99a8); top: 50%; transform: translateY(-50%); transition: transform .15s; }
h2.sec-h2.collapsed::after { transform: translateY(-50%) rotate(-90deg); }

/* ---------- Liste data.gouv (page sources) ---------- */
.datagouv-list { columns: 2; column-gap: 28px; margin: 12px 0; }
.datagouv-list li { break-inside: avoid; margin-bottom: 6px; }
.datagouv-list .dg-org { color: var(--c-muted, #5a6b7b); font-size: 13px; }
@media (max-width: 720px) { .datagouv-list { columns: 1; } }

/* Ligne de temps de la carte des incendies (/incendie) */

/* Legende de la carte des incendies (/incendie) */
.carte-legende{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:16px;margin:14px 0 22px}
.carte-legende .leg-bloc{border:1px solid var(--c-line);border-radius:10px;padding:12px 14px}
.carte-legende h3{margin:0 0 8px;font-size:14.5px}
.carte-legende ul{list-style:none;margin:0 0 6px;padding:0}
.carte-legende li{display:flex;align-items:center;gap:9px;margin:5px 0;font-size:13.5px;line-height:1.35}
.carte-legende li strong{font-weight:600}
.carte-legende .leg-note{margin:6px 0 0;font-size:12px;color:var(--c-muted,#5a6b7b);line-height:1.45}
.leg-rond{display:inline-block;width:14px;height:14px;border-radius:50%;flex:0 0 auto}
.leg-carre{display:inline-block;width:16px;height:14px;border-radius:3px;flex:0 0 auto}
.leg-pluie{background:rgba(44,127,184,.45);border:1px solid #2c7fb8}
.leg-cone{display:inline-block;width:0;height:0;flex:0 0 auto;
  border-left:20px solid rgba(61,61,61,.32);border-top:7px solid transparent;border-bottom:7px solid transparent}
.leg-trait{display:inline-block;width:22px;height:0;flex:0 0 auto;
  border-top:2px dashed #6b7684}
.leg-barre{height:13px;border-radius:7px;margin:2px 0 4px}
.leg-barre-vent{background:linear-gradient(90deg,#4a86c5,#5ba3c9,#7fbf7b,#d9c34a,#e8851a,#d84a2a,#8c1d13)}
.leg-echelle{display:flex;justify-content:space-between;font-size:11px;color:var(--c-muted,#5a6b7b);
  font-variant-numeric:tabular-nums}
.leg-aqi li{margin:4px 0}

/* Legende repliable posee SUR la carte des incendies */
.ml-emprise{display:inline-block;width:16px;height:12px;flex:0 0 auto;
  border:2px solid #e8512a;background:rgba(232,81,42,.16);border-radius:2px}
.map-legende{background:rgba(255,255,255,.94);border-radius:8px;box-shadow:0 1px 5px rgba(0,0,0,.3);overflow:hidden}
.map-legende .ml-titre{display:block;width:100%;border:0;background:var(--c-primary);color:#fff;
  padding:6px 12px;font-size:12px;font-weight:600;cursor:pointer;text-align:left}
.map-legende .ml-titre:hover{filter:brightness(1.1)}
.map-legende .ml-corps{padding:8px 11px;max-height:290px;overflow-y:auto;font-size:11.5px;line-height:1.45}
.map-legende .ml-corps[hidden]{display:none}
.map-legende .ml-sec{margin-bottom:9px}
.map-legende .ml-sec:last-child{margin-bottom:0}
.map-legende .ml-sec b{display:block;margin-bottom:3px;font-size:11.5px}
.map-legende .ml-sec > div{display:flex;align-items:center;gap:6px;margin:2px 0}
.map-legende .ml-rond{display:inline-block;width:11px;height:11px;border-radius:50%;flex:0 0 auto}
.map-legende .ml-cone{display:inline-block;width:0;height:0;flex:0 0 auto;
  border-left:15px solid rgba(61,61,61,.4);border-top:5px solid transparent;border-bottom:5px solid transparent}
.map-legende .ml-trait{display:inline-block;width:16px;height:0;flex:0 0 auto;border-top:2px dashed #6b7684}
.map-legende .ml-barre{display:block;width:100%;height:10px;border-radius:5px;
  background:linear-gradient(90deg,#276fbd,#167997,#237f4c,#96690f,#bb5203,#ca1d10,#730d05)}
.map-legende .ml-ech{display:flex;justify-content:space-between;font-size:10px;color:#5a6b7b}
.map-legende .ml-note{display:block;color:#5a6b7b;font-size:10.5px;margin-top:2px}

/* Heures de passage par satellite (/incendie) */
.sat-status{display:flex;flex-wrap:wrap;gap:6px 16px;margin:8px 0 2px;font-size:12.5px;
  color:var(--c-ink);font-variant-numeric:tabular-nums}
.sat-status:empty{display:none}
.sat-status .sat-item{display:inline-flex;align-items:center;gap:6px}
.sat-status .sat-pt{display:inline-block;width:10px;height:10px;border-radius:50%;flex:0 0 auto}
/* le controle de calques s'allonge avec les couches par satellite */
/* Le panneau deplie ne doit jamais depasser la carte : sur un ecran etroit il la
   recouvrait entierement. Il se limite a la hauteur disponible et defile. */
#fire-map .leaflet-control-layers-expanded{max-height:min(330px,60vh);overflow-y:auto}
#fire-map .leaflet-control-layers-toggle{cursor:pointer}

/* Panneau de controle de la carte des incendies (/incendie) : filtres + ligne de temps
   reunis dans UNE seule surface, pour ne pas donner l'impression de trois bandes
   empilees sans rapport. */
/* --ff-teinte suit la periode selectionnee : tout le panneau change de couleur
   avec elle, ce qui rappelle en permanence ce qui est affiche. */
.fire-panneau{--ff-teinte:#4a5b6b;margin:10px 0 4px;border:1px solid var(--c-line);
  border-radius:12px;background:var(--c-bg,#fff);overflow:hidden}
.fire-panneau::before{content:"";display:block;height:3px;
  background:linear-gradient(90deg,#c0392b,#ca4a1c,#ad6211,#8f6c04,#3c7ba3)}
.fire-panneau[hidden]{display:none}

.fire-filtres{display:flex;flex-direction:column;gap:10px;padding:12px 14px}
.fire-filtres .ff-ligne{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
.fire-filtres .ff-titre{flex:0 0 78px;font-size:12.5px;font-weight:600;color:var(--c-muted,#5a6b7b)}
.fire-filtres .ff-titre label{font-weight:inherit;color:inherit;cursor:pointer}

/* Puces de periode : libelle au-dessus, effectif en dessous. Sur une seule ligne,
   "1 h 5" se lisait comme un nombre unique.
   La couleur n'est pas decorative : elle suit la fraicheur, du plus chaud (le plus
   recent) au plus froid, comme l'estompage des vieilles detections sur la carte.
   Chaque puce porte sa propre teinte via --c (fond actif), --ct (texte) et --cl
   (fond au survol). Le trio a ete calcule pour passer le seuil AA de 4,5 dans les
   trois etats : blanc sur --c, --ct sur le fond du site, --ct sur --cl. */
.fire-filtres .ff-chip[data-h="1"]{--c:#c0392b;--ct:#b83729;--cl:#f8e4e2}
.fire-filtres .ff-chip[data-h="3"]{--c:#ca4a1c;--ct:#b34219;--cl:#fbe7e0}
.fire-filtres .ff-chip[data-h="6"]{--c:#ad6211;--ct:#9f5b10;--cl:#fceedf}
.fire-filtres .ff-chip[data-h="12"]{--c:#8f6c04;--ct:#8b6904;--cl:#fef6dc}
.fire-filtres .ff-chip[data-h="24"]{--c:#3c7ba3;--ct:#366f92;--cl:#e5eff5}
/* 2 j et 3 j : la rampe s arretait a 24 h, ces deux puces n avaient aucune
   couleur. Actives, le fond var(--c) etait invalide donc transparent, et le
   texte blanc devenait illisible. Teintes interpolees entre le bleu de 24 h
   et l ardoise de 7 j, verifiees comme les autres. */
.fire-filtres .ff-chip[data-h="48"]{--c:#437191;--ct:#426f8e;--cl:#e7eef4}
.fire-filtres .ff-chip[data-h="72"]{--c:#47657e;--ct:#47657e;--cl:#e8eef2}
.fire-filtres .ff-chip[data-h="0"]{--c:#4a5b6b;--ct:#4a5b6b;--cl:#eaedf0}
.fire-filtres .ff-chips{display:flex;flex-wrap:wrap;gap:6px}
.fire-filtres .ff-chip{position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:1px;min-width:58px;padding:6px 10px 5px;font-family:inherit;
  line-height:1.15;cursor:pointer;color:var(--c-ink);background:var(--c-bg,#fff);
  border:1px solid color-mix(in srgb,var(--c,#4a5b6b) 40%,transparent);border-radius:9px;overflow:hidden;
  transition:background .12s,border-color .12s,color .12s,box-shadow .12s}
.fire-filtres .ff-chip::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:var(--c,#4a5b6b);opacity:.75}
.fire-filtres .ff-chip span{font-size:13px;font-weight:600}
.fire-filtres .ff-chip b{font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;
  color:var(--ct,#4a5b6b)}
.fire-filtres .ff-chip:hover{background:var(--cl);border-color:var(--c)}
/* La valeur de repli protege d'un oubli : sans elle, une puce ajoutee sans sa
   teinte affiche du texte blanc sur fond transparent, donc invisible. */
.fire-filtres .ff-chip.is-actif{color:#fff;background:var(--c,#4a5b6b);
  border-color:var(--c,#4a5b6b);
  box-shadow:0 1px 4px color-mix(in srgb,var(--c) 45%,transparent)}
.fire-filtres .ff-chip.is-actif::before{opacity:0}
.fire-filtres .ff-chip.is-actif b{color:rgba(255,255,255,.88)}
.fire-filtres .ff-chip.is-vide:not(.is-actif){opacity:.42}
/* La puce compte la France entiere. Quand son total est ailleurs que dans la vue,
   elle le signale par un pointille plutot que de laisser croire a une panne. */
.fire-filtres .ff-chip.is-ailleurs{border-style:dashed}
.fire-filtres .ff-chip.is-ailleurs b{opacity:.55}
/* Puce SELECTIONNEE mais sans rien a montrer sur la zone regardee. Le cas est
   normal : les satellites passent par salves, la fenetre d'une heure est vide la
   moitie du temps. La puce reste selectionnee, mais son remplissage s'efface au
   profit d'un simple contour : on voit qu'elle est cochee ET qu'elle est sans
   effet, ce que ni .is-vide ni l'etat actif ne disaient. */
.fire-filtres .ff-chip.is-sec.is-actif{background:var(--c-bg,#fff);color:var(--c,#6b7a72);
  border:2px dashed var(--c,#6b7a72);padding:5px 9px 4px;box-shadow:none}
.fire-filtres .ff-chip.is-sec.is-actif b{color:var(--ct,#4a5b6b);opacity:1}
/* le bandeau de teinte reste efface, comme sur une puce active : c'est bien une
   puce cochee, pas une puce qu'on aurait oublie de cocher */
.fire-filtres .ff-chip.is-sec.is-actif::before{opacity:0}
/* PAS de variante .fire-zone-sombre ici. Cette classe est portee par toute la
   zone carte, barre de filtres comprise, et non par un fond sombre : la barre de
   filtres, elle, est sur fond clair. Une premiere version peignait donc le texte
   en --cl, la teinte tres pale, sur du blanc. Mesure : 1,1 a 1,2 de contraste, la
   ou WCAG demande 4,5 pour du petit texte. Le texte etait litteralement
   invisible.
   Le fond teinte --cl a ete essaye puis abandonne : il ramenait trois puces sur
   quatre entre 3,9 et 4,5. Le fond reste donc clair, ou --c tient 4,6 a 5,4, et
   la distinction passe par le CONTOUR, un pointille de 2 px. Trois etats se
   lisent alors sans ambiguite : puce active et pleine, fond colore et texte
   blanc ; puce active mais sans rien a montrer, contour pointille epais et texte
   colore ; puce non cochee, filet fin et bandeau de teinte en haut. */
/* Marque d'identite non confirmee. Discrete mais lisible : elle ne doit pas
   crier a l'erreur, seulement dire que le nom vient d'un faisceau d'indices et
   non d'un registre. */
.av-pres{display:inline-block;margin-left:5px;padding:0 5px;border-radius:8px;font-size:9.5px;
  font-weight:600;text-transform:uppercase;letter-spacing:.03em;vertical-align:1px;
  color:#8a5a10;background:rgba(224,150,32,.18);border:1px solid rgba(184,121,26,.45)}
.fire-zone-sombre .av-pres{color:#f5c073;background:rgba(240,160,40,.18);border-color:rgba(240,160,40,.5)}
.fire-filtres .ff-chip:focus-visible{outline:2px solid var(--c);outline-offset:2px}

/* Navigation entre mises a jour : fleches accolees, pastille DANS le champ */
.fire-filtres .ff-nav{display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0}
.fire-filtres .ff-fleches{display:inline-flex;flex:0 0 auto}
.fire-filtres .ff-fleche{width:30px;height:30px;padding:0;font-size:16px;line-height:1;cursor:pointer;
  color:var(--c-ink);background:transparent;border:1px solid var(--c-line)}
.fire-filtres .ff-fleche:first-child{border-radius:8px 0 0 8px}
.fire-filtres .ff-fleche:last-child{border-radius:0 8px 8px 0;border-left:0}
.fire-filtres .ff-fleche:hover:not(:disabled){background:var(--c-line)}
.fire-filtres .ff-fleche:disabled{opacity:.3;cursor:default}
.fire-filtres .ff-champ{display:inline-flex;align-items:center;gap:7px;flex:0 1 420px;min-width:0;
  padding:0 9px;border:1px solid var(--c-line);border-radius:8px;background:var(--c-bg,#fff)}
.fire-filtres .ff-champ:focus-within{border-color:var(--ff-teinte,#c0392b)}
.fire-filtres .ff-pt{flex:0 0 auto;width:11px;height:11px;border-radius:50%;
  border:1px solid var(--c-line);background:transparent;transition:background .15s}
.fire-filtres select{flex:1 1 auto;min-width:0;height:28px;padding:0;font-size:13px;font-family:inherit;
  color:var(--c-ink);background:transparent;border:0;outline:0}

/* Ligne de temps, dans le meme panneau, separee par un simple filet */
.fire-timeline{display:flex;align-items:center;gap:12px;padding:10px 14px;
  border-top:1px solid var(--c-line);background:rgba(0,0,0,.015)}
.fire-timeline button{flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:0;
  background:var(--ff-teinte,#c0392b);color:#fff;font-size:12px;line-height:1;cursor:pointer;
  transition:background .15s}
.fire-timeline button:hover{filter:brightness(1.08)}
.fire-timeline input[type=range]{flex:1 1 auto;min-width:110px;height:16px;
  accent-color:var(--ff-teinte,#c0392b)}
.fire-timeline span{flex:0 0 auto;font-size:12.5px;color:var(--c-muted,#5a6b7b);
  font-variant-numeric:tabular-nums}

@media(max-width:560px){
  .fire-filtres .ff-titre{flex:1 0 100%}
  .fire-filtres .ff-chip{flex:1 1 0;min-width:0;padding:5px 4px 4px}
  .fire-filtres .ff-nav{flex-wrap:nowrap}
  .fire-filtres .ff-champ{flex:1 1 auto}
  .fire-timeline{flex-wrap:wrap}
  .fire-timeline span{width:100%;text-align:center}
}


/* Plein ecran de la carte des incendies : on bascule TOUTE la zone (carte,
   panneau de reglages, statuts), pas seulement la carte, car en plein ecran on a
   encore plus besoin des filtres. Le prefixe -webkit- reste necessaire pour Safari. */
/* SPECIFICITE. Leaflet injecte sa feuille de style A L'EXECUTION, donc APRES
   celle du site. A specificite egale, c'est la derniere chargee qui gagne :
   .leaflet-bar a (0,1,1) ecrasait .map-plein a (0,1,1), et les boutons
   restaient des carres blancs de 26 px malgre les regles ci-dessous. Le prefixe
   #fire-map porte la specificite a (1,1,1) et rend l'ordre indifferent.

   Le plein ecran etait une icone de 30 px, du meme poids visuel que les boutons
   de zoom, et AJOUTEE EN DERNIER dans le coin superieur droit : Leaflet empilant
   les commandes dans l'ordre d'ajout, elle se retrouvait sous un panneau de
   560 px des que celui-ci etait ouvert. Elle devient une pastille libellee, aux
   couleurs de l'accent, et le coin passe en colonne pour qu'un simple ordre la
   place toujours en tete. */
#fire-map .leaflet-top.leaflet-right{display:flex;flex-direction:column;align-items:flex-end}
#fire-map .map-plein{order:-1}
/* =====================================================================
   INVITATION AU PLEIN ECRAN.
   Le plein ecran automatique est IMPOSSIBLE : requestFullscreen exige un
   geste de l'utilisateur, tout navigateur refuse un appel spontane. Le
   plus contraignant qui reste honnete est donc une invitation franche,
   posee sur la carte, avec un voile qui dit "passe par ici d'abord" sans
   rien bloquer. Deux sorties, dont une discrete : on invite, on ne
   sequestre pas. Elle ne revient jamais une fois traitee.
   Elle est frere de la carte et non dedans : Leaflet applique z-index:0 a
   son conteneur, rien de ce qui y vit ne peut passer au-dessus du reste.
   ===================================================================== */
#fire-zone{position:relative}
.fire-invite{position:absolute;inset:0;z-index:1150;display:flex;
  align-items:center;justify-content:center;padding:16px;
  background:rgba(9,15,13,.52);backdrop-filter:blur(1.5px);border-radius:12px}
.fire-invite[hidden]{display:none}
#fire-zone.est-plein .fire-invite{display:none}
.fire-invite .fi-carte{max-width:400px;padding:20px 22px;border-radius:14px;text-align:center;
  background:var(--c-bg,#fff);color:var(--c-ink,#1d2b25);
  box-shadow:0 14px 44px rgba(0,0,0,.42)}
.fire-invite .fi-titre{margin:0 0 7px;font-size:16.5px;font-weight:700;line-height:1.25}
.fire-invite .fi-txt{margin:0 0 15px;font-size:13px;line-height:1.45;color:var(--c-ink2,#5b6b63)}
.fire-invite .fi-act{display:flex;flex-direction:column;gap:8px;align-items:stretch}
/* PAS var(--p-accent) ICI. L'accent du site vaut #e07a1a : du blanc dessus ne
   donne que 3,0:1, alors qu'un texte de 14 px gras n'est pas du "grand texte" au
   sens WCAG et reclame 4,5:1. En assombrissant a teinte et saturation constantes,
   #b26115 est la premiere valeur qui passe, a 4,6:1. La teinte reste celle du
   site, seule la clarte descend de 49 a 39 %. */
.fire-invite .fi-oui{padding:11px 18px;font-family:inherit;font-size:14px;font-weight:700;
  color:#fff;background:#b26115;border:0;border-radius:999px;cursor:pointer;
  box-shadow:0 3px 12px rgba(178,97,21,.42)}
.fire-invite .fi-oui:hover{filter:brightness(1.07)}
.fire-invite .fi-oui:focus-visible{outline:3px solid #1c6fd0;outline-offset:2px}
.fire-invite .fi-non{padding:6px;font-family:inherit;font-size:12.5px;
  color:var(--c-ink2,#5b6b63);background:transparent;border:0;cursor:pointer;
  text-decoration:underline;text-underline-offset:2px}
.fire-invite .fi-non:hover{color:var(--c-ink,#1d2b25)}
.fire-invite .fi-non:focus-visible{outline:2px solid #1c6fd0;outline-offset:2px}
@media(max-width:560px){
  .fire-invite .fi-carte{padding:16px 15px}
  .fire-invite .fi-titre{font-size:15px}
  .fire-invite .fi-txt{font-size:12.5px}
}
#fire-map .map-plein{border:0 !important;box-shadow:0 3px 12px rgba(0,0,0,.34) !important;
  border-radius:999px !important;overflow:hidden}
#fire-map .map-plein a{display:flex;align-items:center;gap:7px;width:auto;height:34px;
  padding:0 13px 0 11px;font-size:12.5px;font-weight:600;white-space:nowrap;
  color:#151d1b;background:var(--p-accent,#f0913a);cursor:pointer;
  border-radius:999px;transition:filter .14s}
#fire-map .map-plein a:hover{background:var(--p-accent,#f0913a);filter:brightness(1.08)}
#fire-map .map-plein a span{line-height:1}
@media(max-width:560px){#fire-map .map-plein a span{display:none}
  #fire-map .map-plein a{width:34px;padding:0;justify-content:center}}

/* En plein ecran : une colonne de reperes a gauche, la carte a droite, les
   reglages en dessous. La grille nomme les zones, si bien que l'ordre du DOM
   (colonne, carte, panneau, statuts) n'impose pas la disposition. */
#fire-zone.est-plein{display:grid;height:100%;overflow:hidden;
  background:var(--c-bg,#fff);
  grid-template-columns:302px 1fr;
  grid-template-rows:1fr auto auto;
  grid-template-areas:"marge carte" "panneau panneau" "statuts statuts"}
/* Garde-fou : tout enfant direct sans zone assignee serait auto-place par la
   grille dans une rangee implicite de la colonne de gauche, ce qui ecrase la
   carte. C'est exactement ce qui est arrive au paragraphe d'aide. On masque donc
   en plein ecran tout ce qui n'est pas l'un des quatre blocs attendus, sans
   toucher a leur propre display (le panneau porte un attribut hidden pilote en JS). */
#fire-zone.est-plein > *:not(#fire-marge):not(#fire-map):not(#fire-panneau):not(.fire-statuts){
  display:none}
#fire-zone.est-plein .fire-marge{grid-area:marge}
#fire-zone.est-plein #fire-map{grid-area:carte;height:auto !important;min-height:0;
  border:0;border-radius:0}
#fire-zone.est-plein .fire-panneau{grid-area:panneau;margin:0;border-radius:0;
  border-left:0;border-right:0;border-bottom:0}
#fire-zone.est-plein .fire-statuts{grid-area:statuts}

/* La colonne accueille des controles Leaflet arraches a leurs coins : il faut
   neutraliser le positionnement flottant qu'ils portent, sinon ils se
   superposent et gardent une largeur de vignette. */
.fire-marge{display:none}
#fire-zone.est-plein .fire-marge{display:block;overflow:auto;padding:12px;
  background:var(--c-bg,#fff);border-right:1px solid var(--c-line)}
#fire-zone.est-plein .fire-marge .leaflet-control,
#fire-zone.est-plein .fire-marge .carte-panneau,
#fire-zone.est-plein .fire-marge .map-legende,
#fire-zone.est-plein .fire-marge .cams-leg{position:static;float:none;clear:none;
  width:auto;max-width:none;max-height:none;margin:0 0 12px;box-shadow:none;
  border:1px solid var(--c-line);border-radius:9px}
/* le selecteur de couches reste deplie : dans une colonne, un panneau qui ne
   s'ouvre qu'au survol n'a aucun sens */
/* dans la colonne, le panneau est toujours deplie et prend la largeur */
#fire-zone.est-plein .fire-marge .map-plein{display:none}   /* le bouton reste sur la carte */
#fire-zone.est-plein .fire-marge .carte-panneau{display:block !important;width:auto;
  max-height:none;box-shadow:none;padding:12px}
#fire-zone.est-plein .fire-marge .map-legende{background:var(--c-bg,#fff)}
#fire-zone.est-plein .fire-marge .cams-leg img{max-width:100%}
#fire-zone.est-plein .fire-marge .leaflet-control-velocity,
#fire-zone.est-plein .fire-marge .velocity-control{padding:7px 9px;font-size:12px}

/* Sur un ecran etroit, une colonne de 300 px mangerait la moitie de la carte. Tout
   passe donc en une seule pile, ET LA ZONE DEFILE : en plein ecran l'interdiction
   de defiler est correcte tant que tout tient a l'ecran, ce qui est faux ici. Sans
   defilement, la carte, les reglages et les legendes se retrouvaient comprimes
   sans aucun moyen d'atteindre le reste.
   L'ordre change aussi : la carte d'abord, puis ses reglages, les legendes
   ensuite. Sur un telephone, faire defiler dix-huit couches avant de voir la
   carte n'aurait aucun sens. */
@media(max-width:760px){
  #fire-zone.est-plein{grid-template-columns:1fr;
    grid-template-rows:auto auto auto auto;
    grid-template-areas:"carte" "panneau" "marge" "statuts";
    overflow:auto;-webkit-overflow-scrolling:touch}
  #fire-zone.est-plein #fire-map{height:56vh !important;min-height:240px}
  #fire-zone.est-plein .fire-marge{max-height:none;border-right:0;
    border-top:1px solid var(--c-line)}
  #fire-zone.est-plein .fire-statuts{max-height:none}
}
#fire-zone.est-plein .fire-panneau::before{display:none}
/* les lignes de statut deviennent un bandeau compact et defilable, borne en
   hauteur pour ne pas rogner la carte */
#fire-zone.est-plein .fire-statuts{flex:0 0 auto;max-height:86px;overflow:auto;
  padding:5px 14px 7px;border-top:1px solid var(--c-line)}
#fire-zone.est-plein .fire-statuts .sources-note,
#fire-zone.est-plein .fire-statuts .sat-status{margin:0 0 3px;font-size:11.5px;line-height:1.35}
:fullscreen #fire-zone,#fire-zone:fullscreen{width:100%;height:100%}
#fire-zone:-webkit-full-screen{width:100%;height:100%}

/* =====================================================================
   COMMANDES DE LA CARTE DES INCENDIES, EN SOMBRE
   Une carte de feux se lit mieux sur fond sombre : les foyers orange et rouges
   ressortent, et l'oeil n'a pas a passer d'un fond clair a des points vifs. Les
   panneaux adoptent donc le meme registre. Contrastes verifies sur le fond
   #151d1b : texte principal 15,2, secondaire 7,6, accent 7,2, qualificatifs de
   9,4 a 10,5, tous au-dessus du seuil AA de 4,5.
   ===================================================================== */
/* La carte occupait 520 px fixes, quelle que soit la taille de l'ecran : sur un
   grand moniteur elle laissait les deux tiers de la hauteur inutilises, alors
   qu'une carte se lit d'autant mieux qu'elle est grande. Elle prend desormais
   les trois quarts de la fenetre, entre un plancher qui garde la lisibilite sur
   petit ecran et un plafond qui evite qu'elle ne pousse tout le texte hors de
   vue sur un ecran tres haut. */
#fire-map{height:clamp(430px,76vh,880px);border-radius:12px;overflow:hidden;
  border:1px solid var(--c-line)}
@media(max-width:760px){#fire-map{height:clamp(340px,64vh,560px)}}

.fire-zone-sombre{
  --p-fond:#151d1b; --p-fond2:#1d2724; --p-trait:#2a3633;
  --p-txt:#eef2f0; --p-txt2:#9fb0aa; --p-accent:#f0913a;
  /* VERRE DEPOLI pour les cartouches poses SUR la carte. Distinct de --p-fond,
     qui reste opaque : la feuille de reglages mobile defile, et un fond
     translucide y laisserait voir le contenu passer dessous.
     L'opacite de 0,86 n'est pas choisie a l'oeil. Sur un fond de carte blanc,
     le pire cas, le cartouche s'eclaircit jusqu'a #363d3b et le texte
     secondaire y tient encore 4,9:1, au-dessus des 4,5 exiges. Mesure sur
     quatre fonds : blanc 4,9, plan 5,2, foret 6,7, satellite 7,4. */
  --p-verre:rgba(21,29,27,.86);
  --p-filet:rgba(255,255,255,.09)}

/* =====================================================================
   PANNEAU DE COUCHES DE LA CARTE DES INCENDIES
   Le selecteur natif de Leaflet est une liste de cases a cocher sans
   hierarchie : dix-huit lignes equivalentes, ou rien ne distingue une mesure
   satellitaire d'une sortie de modele. Il est remplace par une carte flottante
   ou chaque couche porte son QUALIFICATIF (mesure, estime, modelise). Ce n'est
   pas decoratif : la ligne editoriale du site impose de ne jamais laisser
   confondre une observation et une simulation.
   ===================================================================== */
.carte-panneau{width:296px;max-height:min(72vh,560px);overflow-y:auto;
  padding:14px 15px 12px;border-radius:14px;
  background:var(--p-verre,var(--p-fond,#fff));color:var(--p-txt,var(--c-ink));
  border:1px solid var(--p-filet,transparent);
  -webkit-backdrop-filter:blur(10px) saturate(1.15);backdrop-filter:blur(10px) saturate(1.15);
  box-shadow:0 12px 34px rgba(0,0,0,.42),0 2px 6px rgba(0,0,0,.28);
  font-size:13.5px;line-height:1.3}
/* La feuille mobile DEFILE : un fond translucide y laisserait voir le contenu
   passer sous l'en-tete colle. Elle reste donc opaque. */
.carte-panneau.cp-feuille{background:var(--p-fond,#fff);
  -webkit-backdrop-filter:none;backdrop-filter:none}
.carte-panneau[hidden]{display:none}

/* =====================================================================
   LE PANNEAU SUR TELEPHONE. Pose dans un coin de la carte, il mesurait
   296 px de large sur 72 vh de haut : sur un ecran de 360 px il recouvrait
   la carte entiere et debordait sous son bord bas, si bien que les
   dernieres couches n'etaient plus atteignables. Or c'est justement sur
   telephone qu'il compte le plus, puisque la carte y est petite et que
   choisir ce qu'on affiche devient le principal moyen de la lire.
   Il devient donc une FEUILLE ancree en bas de l'ecran, pleine largeur,
   avec son propre defilement et un en-tete qui reste visible. On assume
   qu'elle couvre la carte : on vient y regler des options, pas regarder
   le fond de carte en meme temps. La sortie est immediate et toujours au
   meme endroit.
   Le panneau est SORTI DE LA CARTE le temps de son affichage, et la classe
   cp-feuille le signale. Leaflet pose en effet z-index:0 sur .leaflet-container :
   tout ce qui vit dans la carte est enferme dans un contexte d'empilement de
   niveau 0, et aucune valeur de z-index ne l'en fait sortir. La premiere version
   passait ainsi sous la barre d'attribution, sous le bouton Legende et sous la
   rangee des puces de periode. Le z-index de 1200 se compare desormais a celui
   de l'en-tete du site, qui vaut 1100.
   Exclu du plein ecran, ou le panneau part dans la colonne laterale et n'a plus
   rien d'un panneau flottant.
   ===================================================================== */
@media (max-width:640px){
  .carte-panneau.cp-feuille{
    position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;
    max-height:min(84vh,640px);margin:0;z-index:1200;
    padding:0 14px calc(14px + env(safe-area-inset-bottom,0px));
    border-radius:16px 16px 0 0;
    box-shadow:0 -6px 34px rgba(0,0,0,.42);
    pointer-events:auto;                  /* le coin Leaflet le laisse passer sinon */
    overscroll-behavior:contain}          /* ne pas entrainer la page derriere */
  /* l'en-tete ne defile pas : la sortie doit rester sous le pouce */
  .carte-panneau.cp-feuille .cp-entete{
    position:sticky;top:0;z-index:2;margin:0 -14px 8px;padding:13px 14px 10px;
    background:var(--p-fond,#fff)}
  .carte-panneau.cp-feuille .cp-etiquette{font-size:12.5px}
  /* cibles tactiles : 26 px de croix et 5 px de marge de ligne, c'est sous les
     44 px recommandes pour le doigt. On elargit sans changer la mise en page. */
  .carte-panneau.cp-feuille .cp-fermer{width:40px;height:40px;
    margin:-7px -8px -7px 0;font-size:24px}
  .carte-panneau.cp-feuille .cp-ligne{padding:9px 0}
  .carte-panneau.cp-feuille .cp-inter{width:46px;height:27px}
  .carte-panneau.cp-feuille .cp-inter i{width:23px;height:23px}
  .carte-panneau.cp-feuille .cp-inter[aria-checked="true"] i{transform:translateX(19px)}
  .carte-panneau.cp-feuille .cp-sats{margin-left:0}
  .carte-panneau.cp-feuille .cp-sat{padding:6px 10px}
  .carte-panneau.cp-feuille .cp-seg{padding:9px 6px}
  .carte-panneau.cp-feuille .cp-titre{margin:16px 0 6px}
}
/* En-tete fixe : il ne fait pas partie du corps rafraichi, sinon la croix de
   fermeture disparaitrait au premier changement de couche. */
.carte-panneau .cp-entete{display:flex;align-items:center;gap:10px;
  margin:-2px -3px 8px;padding-bottom:9px;border-bottom:1px solid var(--p-trait,#e2e6e2)}
.carte-panneau .cp-etiquette{flex:1 1 auto;font-size:11px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--p-txt2,#5b6b63)}
.carte-panneau .cp-fermer{flex:0 0 auto;width:26px;height:26px;padding:0;font-size:19px;
  line-height:1;cursor:pointer;color:var(--p-txt2,#5b6b63);background:transparent;
  border:1px solid transparent;border-radius:7px}
.carte-panneau .cp-fermer:hover{color:var(--p-txt,var(--c-ink));
  background:var(--p-fond2,#f2f4f3);border-color:var(--p-trait,#e2e6e2)}
.carte-panneau .cp-fermer:focus-visible{outline:2px solid var(--p-accent,#1c6fd0);outline-offset:1px}
.carte-panneau .cp-corps .cp-titre:first-child{margin-top:0}
.carte-panneau .cp-titre{margin:14px 0 7px;font-size:10.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--p-txt2,#5b6b63)}
.carte-panneau .cp-titre:first-child{margin-top:0}
.carte-panneau .cp-ligne{display:flex;align-items:center;gap:10px;padding:5px 0}
.carte-panneau .cp-nom{flex:1 1 auto;min-width:0}
.carte-panneau .cp-nom small{display:block;font-size:11.5px;color:var(--p-txt2,#5b6b63)}

/* Interrupteur : plus lisible qu'une case a cocher a distance de lecture */
.carte-panneau .cp-inter{flex:0 0 auto;width:38px;height:22px;padding:0;border:0;
  border-radius:999px;background:var(--p-trait,#d3d8d5);cursor:pointer;position:relative;
  transition:background .16s}
.carte-panneau .cp-inter i{position:absolute;top:2px;left:2px;width:18px;height:18px;
  border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.28);
  transition:transform .16s}
.carte-panneau .cp-inter[aria-checked="true"]{background:var(--p-accent,#1c6fd0)}
.carte-panneau .cp-inter[aria-checked="true"] i{transform:translateX(16px)}
.carte-panneau .cp-inter:focus-visible{outline:2px solid var(--p-accent,#1c6fd0);outline-offset:2px}

/* Qualificatif de la donnee */
.carte-panneau .cp-tag{flex:0 0 auto;font-size:9.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:2px 6px;border-radius:5px;white-space:nowrap}
.carte-panneau .t-mesure{color:#6fd39b;background:rgba(111,211,155,.13)}
.carte-panneau .t-estime{color:#f2c45e;background:rgba(242,196,94,.13)}
.carte-panneau .t-modele{color:#a9b8c4;background:rgba(169,184,196,.13)}

/* Pastilles par satellite, sous la ligne des foyers */
.carte-panneau .cp-sats{display:flex;flex-wrap:wrap;gap:5px;margin:2px 0 6px 48px}
.carte-panneau .cp-sat{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;
  font-size:11.5px;font-family:inherit;line-height:1.2;cursor:pointer;color:inherit;
  background:transparent;border:1px solid var(--p-trait,var(--c-line));border-radius:999px;opacity:.5;
  transition:opacity .14s,border-color .14s,background .14s}
.carte-panneau .cp-sat::before{content:"";width:8px;height:8px;border-radius:50%;
  background:var(--sc,#888);flex:0 0 auto}
.carte-panneau .cp-sat.is-on{opacity:1;border-color:var(--sc,#888);
  background:color-mix(in srgb,var(--sc,#888) 10%,transparent)}

/* Fond de carte : trois pastilles exclusives */
.carte-panneau .cp-segs{display:flex;gap:5px;flex-wrap:wrap}
.carte-panneau .cp-seg{flex:1 1 auto;padding:6px 4px;font-size:12px;font-family:inherit;
  cursor:pointer;color:inherit;background:transparent;border:1px solid var(--p-trait,var(--c-line));
  border-radius:9px;transition:background .14s,color .14s,border-color .14s}
.carte-panneau .cp-seg:hover{border-color:var(--p-accent,#1c6fd0)}
.carte-panneau .cp-seg.is-actif{color:#151d1b;background:var(--p-accent,#1c6fd0);
  border-color:var(--p-accent,#1c6fd0);font-weight:600}

/* Bouton d'ouverture, aux couleurs des autres commandes Leaflet */
#fire-map .cp-bouton a{display:flex;align-items:center;justify-content:center;width:34px;height:34px;
  color:var(--p-txt,var(--c-ink));background:var(--p-fond,#fff);cursor:pointer}
#fire-map .cp-bouton a:hover{background:var(--p-fond2,#f2f4f3)}
@media(max-width:560px){.carte-panneau{width:min(88vw,296px)}}


/* Carte d'etat, en haut a gauche : ce que la page sait, en un coup d'oeil */
/* CARTOUCHES DE LA CARTE. Verre depoli plutot que bloc opaque : ils reposent sur
   une carte, autant qu'elle continue d'exister derriere eux. Un filet clair leur
   donne un bord au lieu de les laisser flotter, une ombre a deux couches les
   decolle sans les alourdir, et un liseré de teinte en tete dit de quoi parle le
   cartouche avant meme qu'on lise son titre. */
.etat-carte{position:relative;min-width:222px;max-width:262px;padding:13px 14px 12px;
  border-radius:14px;overflow:hidden;
  background:var(--p-verre,var(--p-fond,#fff));color:var(--p-txt,var(--c-ink));
  border:1px solid var(--p-filet,transparent);
  -webkit-backdrop-filter:blur(10px) saturate(1.15);backdrop-filter:blur(10px) saturate(1.15);
  box-shadow:0 12px 34px rgba(0,0,0,.42),0 2px 6px rgba(0,0,0,.28);
  font-size:12.5px;line-height:1.35}
/* liseré de teinte : chaud pour les feux, froid pour l'ADS-B */
.etat-carte::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;
  background:linear-gradient(90deg,#f0913a,#d84a2a)}
.av-carte::before{background:linear-gradient(90deg,#37e637,#6eeded)}
.etat-carte .ec-tete{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.etat-carte .ec-titre{font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--p-txt2,#5b6b63)}
.etat-carte .ec-vif{display:inline-flex;align-items:center;gap:5px;margin-left:auto;
  padding:2px 7px;border-radius:999px;font-size:10px;font-weight:700;
  color:#6fd39b;background:rgba(111,211,155,.14)}
.etat-carte .ec-vif::before{content:"";width:6px;height:6px;border-radius:50%;background:#6fd39b}
.etat-carte .ec-gros{font-size:20px;font-weight:700;line-height:1.08;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums}
.etat-carte .ec-gros span{font-size:12.5px;font-weight:400;color:var(--p-txt2,#5b6b63)}
.etat-carte .ec-ligne{margin-top:6px;color:var(--p-txt2,#5b6b63);font-size:11.5px}
.etat-carte .ec-ligne b{color:var(--p-accent,#c0392b);font-weight:600}
/* Le cas ou la carte parait en panne alors qu'elle dit vrai : des detections
   existent en France mais aucune dans la vue. Un liseré ambre, pas rouge : ce
   n'est pas une erreur, c'est une absence, et la nuance compte. */
.etat-carte .ec-alerte{margin-top:7px;padding:6px 8px;border-radius:6px;font-size:11.5px;
  line-height:1.35;color:var(--p-txt,#1d2b25);background:rgba(224,150,32,.14);
  border-left:3px solid #b8791a}
.etat-carte .ec-alerte b{color:#8a5a10;font-weight:600}
.fire-zone-sombre .etat-carte .ec-alerte{color:#e8eee9;background:rgba(240,160,40,.16);
  border-left-color:#f0a028}
.fire-zone-sombre .etat-carte .ec-alerte b{color:#f5c073}

/* Echelle d'intensite, reprise de la taille des points */
.etat-carte .ec-echelle{margin-top:12px;padding-top:11px;
  border-top:1px solid var(--p-filet,var(--p-trait,#e2e6e2))}
.etat-carte .ec-barre{height:6px;border-radius:3px;margin:6px 0 4px;
  background:linear-gradient(90deg,#f6d365,#f0913a,#d84a2a,#8c1d13)}
.etat-carte .ec-bornes{display:flex;justify-content:space-between;font-size:10px;
  color:var(--p-txt2,#5b6b63);font-variant-numeric:tabular-nums}
@media(max-width:560px){.etat-carte{display:none}}

/* Panneau des moyens aeriens, sous la carte d'etat */
/* Les deux panneaux se suivent dans le meme coin : sans plafond, celui des
   moyens aeriens repoussait la carte d'etat hors de la vue des qu'une dizaine
   d'appareils volaient. */
/* LE PANNEAU NE DEFILE PLUS EN ENTIER. Il defilait auparavant d'un bloc : a sept
   appareils en vol, la liste occupait toute la hauteur et la legende des couleurs
   comme les notes passaient sous le pli, invisibles sans un defilement que rien
   ne suggerait. Le titre et le pied restent donc fixes, seule la LISTE defile, et
   la hauteur disponible monte de 38 a 46 vh puisqu'elle porte maintenant trois
   parties et non plus une. */
.av-carte{margin-top:9px;max-height:min(46vh,360px);display:flex;flex-direction:column;
  overflow:hidden}
.av-carte .av-liste{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
/* un lisere en haut et en bas dit qu'il reste quelque chose a faire defiler */
.av-carte .av-liste{scrollbar-width:thin}
.av-carte .ec-tete,.av-carte .av-leg,.av-carte .ec-ligne{flex:0 0 auto}
.av-carte .av-reste{margin-top:5px;font-size:11.5px;font-style:italic;
  color:var(--p-txt2,#5b6b63)}
.av-carte .av-ligne{display:flex;align-items:center;gap:8px;padding:4px 0;
  border-top:1px solid var(--p-trait,#e2e6e2)}
.av-carte .av-pt{flex:0 0 auto;width:8px;height:8px;border-radius:50%}
/* La pastille du panneau reprend la distinction de la carte : un disque pour un
   avion, un losange pour un giratoire. Sans cela, le panneau et la carte
   racontaient deux choses differentes sur le meme appareil. */
.av-carte .av-pt.av-gir{border-radius:2px;transform:rotate(45deg);width:9px;height:9px}
/* Legende des familles d'appareil. Elle ne liste que ce qui vole : une legende
   exhaustive serait plus longue que la liste des appareils et decrirait surtout
   des types absents. */
.av-carte .av-leg{display:flex;flex-wrap:wrap;gap:4px 10px;margin:7px 0 2px;
  padding-top:7px;border-top:1px solid var(--p-trait,#e2e6e2)}
.av-carte .av-lg{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;
  color:var(--p-txt2,#5b6b63);white-space:nowrap}
.av-carte .av-lg i{width:12px;height:3px;border-radius:2px;flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(16,26,23,.55)}
.av-carte .av-nom{flex:1 1 auto;min-width:0;font-size:12.5px;font-weight:600}
.av-carte .av-nom small{display:block;font-size:11px;font-weight:400;
  color:var(--p-txt2,#5b6b63);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.av-carte .av-chif{flex:0 0 auto;text-align:right;font-size:12px;
  font-variant-numeric:tabular-nums}
.av-carte .av-chif small{display:block;font-size:11px;color:var(--p-txt2,#5b6b63)}
#fire-map .avion-marq{background:none;border:0}
@media(max-width:560px){.av-carte{display:none}}