/**
 * assets/css/feux.css — Styles du widget « carte des feux ».
 *
 * Partagé par DEUX hôtes, d'où le préfixe `.fl-app` plutôt que `body.fl` :
 *   - la page /feux/ (src/pages/feux/index.html)
 *   - l'article de blog, où blog/router.php injecte cette feuille
 * Ce qui est propre à la page (fond, en-tête, gouttières) reste dans la page.
 */

.fl-app { --fl-line: #e2e8ec; --fl-mute: #6b7280; --fl-ink: #0E2E45; }

/* Bandeau d'état : la seule information à saisir sans lire */
.fl-app .fl-bandeau{display:flex;align-items:center;gap:14px;border-radius:16px;padding:16px 18px;border:1px solid;margin:0 0 12px}
.fl-app .fl-calme{background:#f3fbf6;border-color:#c6e8d3;color:#166534}
.fl-app .fl-actif{background:#fff5f2;border-color:#f6c7b6;color:#9a3412}
.fl-app .fl-b-ico{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:20px;flex:none;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.fl-app .fl-b-txt b{display:block;font-size:20px;font-weight:700;line-height:1.2;letter-spacing:-.01em}
.fl-app .fl-b-txt span{display:block;font-size:13.5px;opacity:.85;margin-top:3px}

/* Indicateurs */
.fl-app .fl-stats{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px}
.fl-app .fl-stat{background:#fff;border:1px solid var(--fl-line);border-radius:12px;padding:9px 14px;min-width:130px}
.fl-app .fl-s-lab{display:block;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--fl-mute);font-weight:700}
.fl-app .fl-s-val{display:block;font-size:19px;font-weight:700;color:var(--fl-ink);margin-top:2px}

/* Barre de calques */
.fl-app .fl-barre{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:#fff;border:1px solid var(--fl-line);border-radius:14px;padding:10px 12px;margin:0 0 12px}
.fl-app .fl-lab{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--fl-mute);font-weight:700;margin-right:2px}
.fl-app .fl-chk{display:inline-flex;align-items:center;gap:7px;background:#f6f9fb;border:1px solid var(--fl-line);border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:600;color:#475569;cursor:pointer;user-select:none;transition:.18s}
.fl-app .fl-chk:hover{border-color:#1FA8E0}
.fl-app .fl-chk input{accent-color:#1FA8E0;width:14px;height:14px;cursor:pointer;margin:0}
.fl-app .fl-chk i{width:11px;height:11px;border-radius:3px;flex:none}
.fl-app .fl-sep{width:1px;height:22px;background:var(--fl-line);margin:0 4px}
.fl-app .fl-tog{border:1px solid var(--fl-line);background:#f6f9fb;border-radius:999px;padding:6px 14px;font-size:12.5px;font-weight:700;color:#475569;cursor:pointer;font-family:inherit;transition:.18s}
.fl-app .fl-tog:hover{border-color:#1FA8E0}
.fl-app .fl-tog.active{background:#1FA8E0;border-color:#1FA8E0;color:#fff}

/* Carte */
.fl-app #feux-map{height:min(68vh,660px);border-radius:16px;overflow:hidden;border:1px solid var(--fl-line);background:#eef3f6}
.fl-app .fl-maj{font-size:11.5px;color:var(--fl-mute);margin:8px 0 0}

/* Panneaux */
.fl-app .fl-cols{display:grid;grid-template-columns:1.4fr 1fr;gap:22px;margin:22px 0 0;align-items:start}
@media(max-width:900px){.fl-app .fl-cols{grid-template-columns:1fr}}
.fl-app .fl-carte-info{background:#fff;border:1px solid var(--fl-line);border-radius:16px;padding:18px 20px}
.fl-app .fl-p-t{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--fl-mute);font-weight:700;margin:0 0 8px}
.fl-app .fl-liste{list-style:none;margin:0 0 10px;padding:0}
.fl-app .fl-liste li{display:flex;align-items:baseline;gap:10px;font-size:13.5px;color:#475569;padding:8px 0;border-bottom:1px solid var(--fl-line)}
.fl-app .fl-liste li:last-child{border-bottom:0}
.fl-app .fl-liste b{color:var(--fl-ink);font-weight:600}
.fl-app .fl-ha{font-size:11.5px;font-weight:700;color:#9a3412;background:#fff1ea;border:1px solid #f6c7b6;border-radius:999px;padding:2px 9px}
.fl-app .fl-liste em{font-style:normal;margin-left:auto;font-size:11.5px;color:var(--fl-mute);white-space:nowrap}
.fl-app .fl-note{font-size:11.5px;line-height:1.55;color:var(--fl-mute);margin:0}

/* Sécurité : toujours visible, jamais repliée */
.fl-app .fl-secu{background:#fff7ed;border:1px solid #fbdca8;border-radius:14px;padding:14px 16px;margin:0 0 14px}
.fl-app .fl-secu b{color:#7c3d09}
.fl-app .fl-secu p{font-size:13px;line-height:1.6;color:#6b4a2a;margin:0}
.fl-app .fl-src{font-size:11.5px;line-height:1.6;color:var(--fl-mute);margin:14px 0 0}
.fl-app .fl-src a{color:#1D6FA3;font-weight:600}
.fl-app .fl-cta{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-size:13.5px;font-weight:700;color:#1D6FA3;text-decoration:none}
.fl-app .fl-cta:hover{text-decoration:underline}

@media(max-width:640px){
  .fl-app #feux-map{height:min(60vh,420px)}
  .fl-app .fl-b-txt b{font-size:17px}
}