/* Charte Arbor — forêt & feu (voir arbor.css). Clair = crème façade, sombre = forêt. */
:root{
  color-scheme:light dark;
  --ink:#16241D; --ink2:#3a4a40; --muted:#5B6B60; --faible:#8a978c;
  --pane:#FBF8F1; --pane2:#EFE8D8; --line:#E1D9C6; --bg:#F4EFE3;
  --feu:#D7301F; --feu2:#ef6548; --tiede:#E8A33D; --froid:#8c96a3;
  --fum:#8ba0b4; --ok:#2C6E4B; --warn:#8a5a00; --warnbg:#EEE4C9;
  --ombre:0 1px 2px rgba(20,30,24,.05), 0 8px 24px -12px rgba(20,30,24,.20);
  --r:14px;
}
@media (prefers-color-scheme:dark){
  :root{
    --ink:#F1ECE0; --ink2:#CBD8CD; --muted:#9DB1A4; --faible:#7d8a7f;
    --pane:#1B3B2E; --pane2:#244F3F; --line:#2C4638; --bg:#12241C;
    --ok:#9CC4AE; --warnbg:#2A331E; --warn:#E8C98A;
    --ombre:0 1px 2px rgba(0,0,0,.5), 0 10px 30px -14px rgba(0,0,0,.7);
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* min-height en dvh : garantit une hauteur même si la chaîne height:100% se
   résout à 0 pendant le layout initial (sinon la carte Leaflet mesure 0×0
   et reste bloquée au zoom monde). */
body{margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.55 ui-sans-serif,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;display:flex;flex-direction:column;min-height:100dvh}
h1{font-size:1.02rem;margin:0;letter-spacing:-.021em;font-weight:750}
a{color:inherit}

/* Bandeau d'avertissement */
.avert-entree{padding:7px 18px;background:var(--warnbg);color:var(--warn);
  font-size:.79rem;line-height:1.4;text-align:center;border-bottom:1px solid var(--line)}
.avert-entree b{font-weight:750}
@media (max-width:640px){ .avert-entree{padding:6px 12px;font-size:.74rem} }

/* Carte — min-height:70vh sert de plancher fiable pour le conteneur Leaflet */
.enveloppe{position:relative;flex:1 0 auto;min-height:70vh}
#map{position:absolute;inset:0;background:var(--pane2)}
.leaflet-container{font:inherit}

/* Filigrane fraîcheur */
.frais{position:absolute;left:12px;bottom:12px;z-index:600;
  display:flex;align-items:center;gap:7px;
  background:var(--pane);color:var(--ink2);border:1px solid var(--line);
  border-radius:999px;padding:5px 11px;font-size:.76rem;box-shadow:var(--ombre)}
.frais .pastille{width:8px;height:8px;border-radius:50%;background:var(--froid)}
.frais.vif .pastille{background:var(--ok)}
.frais.vieux .pastille{background:var(--tiede)}

/* Panneau — borné à la hauteur de la carte (100% = enveloppe), défilement interne.
   On ne se base PAS sur dvh : le header + le bandeau au-dessus fausseraient le calcul. */
.panneau{position:absolute;top:12px;right:12px;z-index:600;width:250px;
  max-width:calc(100vw - 24px);max-height:calc(100% - 24px);
  background:var(--pane);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--ombre);overflow:hidden;
  display:flex;flex-direction:column}
.tt{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:11px 14px;border-bottom:1px solid var(--line);background:var(--pane2);cursor:pointer;
  user-select:none}
.tt:hover{background:color-mix(in srgb,var(--pane2) 70%,var(--line))}
.plier{border:0;background:transparent;color:var(--muted);font-size:1.3rem;font-weight:400;
  line-height:1;cursor:pointer;padding:0;width:24px;height:24px;display:grid;place-items:center;
  border-radius:7px;flex:none}
.tt:hover .plier{color:var(--ink)}
.corps{flex:1 1 auto;min-height:0;padding:12px 14px;display:flex;flex-direction:column;
  gap:14px;overflow-y:auto;overscroll-behavior:contain}
.panneau.replie .corps{display:none}

/* Curseurs de projection */
.curseur{display:grid;grid-template-columns:1fr auto;align-items:center;
  gap:2px 8px;font-size:.82rem;color:var(--ink2);cursor:pointer}
.curseur input{grid-column:1 / -1;accent-color:var(--feu);width:100%}
.curseur b{color:var(--ink);font-variant-numeric:tabular-nums}
.grp{display:flex;flex-direction:column;gap:7px}
.grp-tt{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--faible);font-weight:700}
.ligne{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;font-size:.9rem}
.tete{display:flex;align-items:center;gap:8px;cursor:pointer}   /* case + libellé solidaires */
.tete input{accent-color:var(--feu);width:15px;height:15px;flex:none}
/* Bouton (i) et texte d'aide déroulant */
.info{flex:none;width:17px;height:17px;border-radius:50%;border:1px solid var(--line);
  background:var(--pane2);color:var(--muted);font:italic 700 .7rem/1 Georgia,serif;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.info:hover{color:var(--ink);border-color:var(--muted)}
.info[aria-expanded=true]{background:var(--feu);color:#fff;border-color:var(--feu)}
.aide{font-size:.75rem;line-height:1.45;color:var(--ink2);background:var(--pane2);
  border:1px solid var(--line);border-radius:8px;padding:7px 9px;margin-top:-4px}
.aide[hidden]{display:none}
/* Badges mesuré / estimation (repris de l'esprit du site d'origine) */
.bg{font-style:normal;font-size:.62rem;font-weight:700;letter-spacing:.02em;
  text-transform:uppercase;padding:1px 6px;border-radius:999px;white-space:nowrap}
.bg.mes{background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ok)}
.bg.est{background:color-mix(in srgb,var(--tiede) 26%,transparent);color:var(--warn)}
.src{margin:0;font-size:.72rem;color:var(--muted);line-height:1.4}

/* Légende */
.leg-l{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--ink2)}
.dot{width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 2px var(--pane)}
.dot.feu{background:var(--feu)} .dot.tiede{background:var(--tiede)} .dot.froid{background:var(--froid)}
.fleche{color:var(--fum);font-weight:700}
/* Pictos cône (fumée) et front, en triangle via clip-path */
.cone{width:15px;height:12px;clip-path:polygon(0 50%,100% 0,100% 100%);
  background:color-mix(in srgb,#8fb0cc 55%,transparent);border:1px solid #eef4fa}
.cone.front{background:color-mix(in srgb,#f0894f 60%,transparent);border-color:#e8663a}
.carre{width:12px;height:12px;border-radius:2px;border:1.4px solid var(--feu);
  background:color-mix(in srgb,var(--feu) 22%,transparent)}
.carre.effis{border-color:#7a3b12;background:color-mix(in srgb,#7a3b12 35%,transparent)}
.degrade{width:34px;height:10px;border-radius:2px;
  background:linear-gradient(90deg,#1d7a4a,#7fbf5a,#fdae61,#ef6548,#d7301f)}

/* Fiche foyer */
.fiche{position:absolute;left:12px;top:12px;z-index:650;width:290px;max-width:calc(100vw - 24px);
  background:var(--pane);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--ombre);overflow:hidden}
.fh{display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;border-bottom:1px solid var(--line);background:var(--pane2)}
.fh .s{font-weight:750;font-size:.92rem}
.fx{border:0;background:transparent;color:var(--muted);font-size:1.3rem;line-height:1;cursor:pointer}
.fb{padding:12px 14px;font-size:.86rem;display:flex;flex-direction:column;gap:9px}
.fb .rang{display:flex;justify-content:space-between;gap:12px}
.fb .rang .k{color:var(--muted)} .fb .rang .v{color:var(--ink);font-weight:600;text-align:right}
.fb .cap{font-size:.78rem;color:var(--muted);border-top:1px solid var(--line);padding-top:9px;line-height:1.4}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:.74rem;font-weight:700}
.badge.feu{background:color-mix(in srgb,var(--feu) 16%,transparent);color:var(--feu)}
.badge.tiede{background:color-mix(in srgb,var(--tiede) 22%,transparent);color:var(--warn)}
.badge.froid{background:color-mix(in srgb,var(--froid) 20%,transparent);color:var(--muted)}

/* Marqueurs foyers (divIcon) */
.foyer{border-radius:50%;box-shadow:0 0 0 2px var(--pane),0 1px 4px rgba(0,0,0,.4)}
.foyer.actif{animation:pulse 2s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 2px var(--pane),0 0 0 0 color-mix(in srgb,var(--feu) 55%,transparent)}
  70%{box-shadow:0 0 0 2px var(--pane),0 0 0 12px transparent}
  100%{box-shadow:0 0 0 2px var(--pane),0 0 0 0 transparent}}

/* Lecteur de rejeu */
.player{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:600;
  display:flex;align-items:center;gap:10px;max-width:calc(100vw - 24px);
  background:var(--pane);border:1px solid var(--line);border-radius:999px;
  padding:6px 12px;box-shadow:var(--ombre);font-size:.8rem}
.player button{border:1px solid transparent;background:transparent;color:var(--ink2);
  cursor:pointer;border-radius:999px;padding:3px 9px;font-size:.8rem;font-weight:600}
.player button:hover{background:var(--pane2)}
.player #plPlay{font-size:.9rem;width:30px;height:30px;padding:0;
  border:1px solid var(--line);background:var(--pane2)}
.player #plSlider{width:190px;max-width:38vw;accent-color:var(--feu);cursor:pointer}
.pl-t{color:var(--muted);min-width:104px;text-align:center;font-variant-numeric:tabular-nums}
.pl-v{display:flex;gap:2px}
.player button.actif{background:var(--feu);color:#fff}
.player #plLive.actif{background:var(--ok);color:#fff}
@media (max-width:640px){
  .player{gap:6px;padding:5px 9px}
  .pl-v{display:none}
  .player #plSlider{width:120px}
  .pl-t{min-width:0}
}

/* Pied de page */
.pied{padding:14px 18px;border-top:1px solid var(--line);background:var(--pane2);
  font-size:.8rem;color:var(--muted);line-height:1.5}
.pied strong{color:var(--ink2)}

@media (max-width:640px){
  .panneau{width:230px;max-height:calc(100% - 84px)}  /* laisse la place au lecteur en bas */
  .fiche{width:calc(100vw - 24px)}
  /* En bas : lecteur puis filigrane empilés au centre, sans se chevaucher */
  .player{bottom:8px}
  .frais{left:50%;transform:translateX(-50%);bottom:54px}
}