/* =====================================================================
   Panorisk — barre de navigation générale.

   Chargée par index.html (après style.css) et par les pages PHP
   (après ville.css). Les deux feuilles définissent déjà les mêmes
   variables de couleur : rien n'est redéfini ici, la barre a donc
   exactement la même allure partout.

   Deux contextes, deux comportements :
     · body.pk-map  → la carte occupe tout l'écran, la barre flotte
                      par-dessus et les panneaux sont décalés vers le bas ;
     · body.pk-doc  → page de contenu classique, on ajoute simplement
                      la hauteur de la barre au haut de la page.
   ===================================================================== */

.pk-nav{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;gap:8px;
  height:52px;padding:0 14px;
  background:rgba(12,10,9,.88);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  font-family:'Switzer',system-ui,-apple-system,sans-serif;
}

/* ---------- marque ---------- */
.pk-nav-brand{
  flex:none;display:flex;align-items:center;gap:9px;margin-right:6px;
  color:var(--bone);text-decoration:none;
  font-size:16px;font-weight:600;letter-spacing:.07em;
}
.pk-nav-brand:hover{text-decoration:none}
.pk-nav-brand b{
  font-weight:600;background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.pk-nav-mark{
  flex:none;width:29px;height:29px;border-radius:9px;
  display:grid;place-items:center;font-size:15px;
  background:linear-gradient(140deg,rgba(255,107,44,.28),rgba(255,107,44,.06));
  border:1px solid var(--line-2);
}

/* ---------- conteneur liens + recherche ---------- */
.pk-nav-menu{display:flex;align-items:center;gap:8px;flex:1;min-width:0}

.pk-nav-links{display:flex;align-items:center;gap:2px}
.pk-nav-links a{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 10px;border-radius:9px;border:1px solid transparent;
  font-size:13.5px;line-height:1;color:var(--ash);
  text-decoration:none;white-space:nowrap;
}
.pk-nav-links a:hover{color:var(--bone);background:rgba(255,140,60,.09);text-decoration:none}
.pk-nav-links a[aria-current]{
  color:var(--bone);background:rgba(255,140,60,.13);border-color:var(--line-2);
}
/* pastille « N feux en cours » : remplie par nav.js, masquée tant qu'on ne sait pas */
.pk-nav-badge{
  display:none;min-width:19px;padding:1px 6px;border-radius:20px;text-align:center;
  font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:10.5px;font-weight:600;
  color:#1a0d05;background:var(--grad);
}
.pk-nav-badge.on{display:inline-block}

/* ---------- recherche de commune ---------- */
.pk-nav-search{position:relative;flex:1;max-width:240px;margin-left:auto;min-width:0}
.pk-nav-search input{
  width:100%;height:32px;padding:0 11px;border-radius:9px;
  background:rgba(0,0,0,.38);border:1px solid var(--line);
  color:var(--bone);font-family:inherit;font-size:13px;outline:none;
}
.pk-nav-search input::placeholder{color:var(--ash)}
.pk-nav-search input:focus{border-color:var(--line-2);background:rgba(0,0,0,.55)}
.pk-nav-res{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:41;
  max-height:min(58vh,340px);overflow-y:auto;padding:5px;
  background:rgba(20,16,14,.98);border:1px solid var(--line-2);border-radius:11px;
  box-shadow:0 18px 44px rgba(0,0,0,.6);
  scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;
}
.pk-nav-res[hidden]{display:none}
.pk-nav-res a{
  display:flex;align-items:baseline;gap:8px;padding:7px 9px;border-radius:8px;
  color:var(--bone);text-decoration:none;font-size:13px;
}
.pk-nav-res a:hover,.pk-nav-res a.on{background:rgba(255,140,60,.14);text-decoration:none}
.pk-nav-res a small{color:var(--ash);font-size:11px;margin-left:auto;white-space:nowrap}
.pk-nav-res .pk-nav-empty{padding:9px;font-size:12px;color:var(--ash);font-style:italic}

/* ---------- repli mobile ---------- */
.pk-nav-toggle{
  display:none;flex:none;margin-left:auto;
  width:34px;height:32px;border-radius:9px;cursor:pointer;
  background:transparent;border:1px solid var(--line);
  color:var(--bone);font-size:15px;line-height:1;
}
.pk-nav-toggle:hover{border-color:var(--line-2)}

@media (max-width:1000px){
  .pk-nav-toggle{display:block}
  .pk-nav-menu{
    display:none;
    position:absolute;top:52px;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:8px;
    padding:9px 12px 13px;
    /* Fond opaque et surtout PAS de backdrop-filter ici : imbriquer un
       backdrop-filter dans un autre (celui de .pk-nav) fait que Chromium
       peint le menu comme s'il était transparent — le contenu de la page
       traversait le menu déroulant. */
    background:#100c0b;
    border-bottom:1px solid var(--line);
    box-shadow:0 18px 40px rgba(0,0,0,.55);
  }
  .pk-nav.open .pk-nav-menu{display:flex}
  .pk-nav-links{flex-direction:column;align-items:stretch;gap:2px}
  .pk-nav-links a{padding:11px 12px;font-size:14.5px}
  .pk-nav-search{max-width:none;margin-left:0}
}

/* ---------- lien d'évitement (accessibilité) ---------- */
.pk-skip{
  position:absolute;left:-9999px;top:0;z-index:60;
  padding:10px 16px;background:var(--flame);color:#1a0d05;
  font-weight:600;border-radius:0 0 10px 0;text-decoration:none;
}
.pk-skip:focus{left:0}

/* =====================================================================
   Contexte 1 — page de contenu (ville.php, feu.php, article.php)
   ===================================================================== */
body.pk-doc{padding-top:80px}
@media (max-width:1000px){body.pk-doc{padding-top:72px}}

/* =====================================================================
   Contexte 2 — carte plein écran (index.html)
   Les panneaux flottants sont ancrés en haut : on les décale sous la barre.
   ===================================================================== */
body.pk-map .panel{top:64px;max-height:calc(100vh - 82px)}
body.pk-map #newsTicker{top:60px}
body.pk-map #incidentPanel{top:62px}
body.pk-map #newRepHint{top:60px}

@media (max-width:640px){
  body.pk-map .panel{top:auto;max-height:52vh}
  body.pk-map #newsTicker{top:58px}
  body.pk-map #incidentPanel{top:58px}
}

/* =====================================================================
   Liste « Incidents en cours » — enrichie par app.js avec les données
   des fiches événement (nom de commune réel, hectares, pompiers).
   ===================================================================== */
.inc-go{
  display:block;margin:-3px 0 8px;padding:4px 10px 5px 12px;
  font-size:11.5px;color:var(--flame);text-decoration:none;
  border-left:2px solid var(--line-2);
}
.inc-go:hover{color:var(--hot,#ffe45c);text-decoration:underline}
.inc-facts{color:var(--flame)}

/* boutons d'accès aux fiches, dans le panneau latéral d'un incident */
.inc-links{display:flex;flex-wrap:wrap;gap:7px;padding:0 16px 13px}
.inc-links[hidden]{display:none}
.inc-links a{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 12px;border-radius:9px;
  font-size:12.5px;text-decoration:none;
  border:1px solid var(--line-2);color:var(--bone);background:rgba(255,140,60,.08);
}
.inc-links a:hover{background:rgba(255,140,60,.16);text-decoration:none}
.inc-links a.primary{background:var(--grad);color:#1a0d05;border-color:transparent;font-weight:600}
.inc-official{
  flex-basis:100%;margin:0 0 2px;padding:8px 11px;border-radius:9px;
  font-size:12.5px;font-weight:600;color:var(--flame);
  background:rgba(255,140,60,.09);border:1px solid var(--line);
}

/* La barre porte déjà la marque : le gros logo du panneau faisait doublon
   juste en dessous. On garde le titre (c'est le h1 de la page d'accueil),
   on retire seulement la pastille répétée. */
body.pk-map .brand-mark{display:none}
body.pk-map .brand{padding-top:13px;padding-bottom:10px}

/* La marque a quitté la balise h1 (voir index.html) : on lui redonne
   exactement l'allure qu'elle avait, et on rend au h1 la discrétion de
   l'ancienne ligne de sous-titre. Rien ne bouge à l'écran. */
.brand .brand-name{
  font-family:var(--disp);font-size:21px;letter-spacing:.04em;line-height:1;color:var(--bone);
}
.brand .brand-name span{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
h1.tagline{
  font-size:11.5px;font-weight:400;line-height:1.35;
  color:var(--ash);letter-spacing:.05em;margin-top:4px;
}

/* =====================================================================
   Mode « carte intégrée » — /?embed=1, utilisé par /carte-incendies.
   La page parente porte déjà la navigation et le bandeau cookies :
   dans l'iframe on ne garde que la carte et ses réglages.
   ===================================================================== */
.pk-embed .pk-nav,
.pk-embed .pk-skip,
.pk-embed .account-bar,
.pk-embed .install-cta{display:none}
.pk-embed body.pk-map .panel{top:12px;max-height:calc(100vh - 24px)}
.pk-embed body.pk-map #newsTicker{top:10px}
.pk-embed body.pk-map #incidentPanel{top:12px}
.pk-embed body.pk-map #newRepHint{top:10px}
@media (max-width:640px){
  /* Le panneau reprend sa place basse. On le replie au chargement (voir
     nav.js) : sur un téléphone, la carte intégrée fait 78 vh, un panneau
     déplié n'en laisserait presque rien. */
  .pk-embed body.pk-map .panel{top:auto;max-height:52vh}
  .pk-embed body.pk-map #newsTicker{top:8px}
  .pk-embed body.pk-map #incidentPanel{top:8px}
}

/* =====================================================================
   Accès à /carte-incendies depuis le panneau de la carte.
   Placé haut dans le panneau : le pied de page du panneau demande de
   faire défiler une quarantaine de réglages, personne n'y arrive.
   ===================================================================== */
.pk-page-link{
  display:flex;align-items:center;gap:11px;margin:0 0 11px;
  padding:10px 12px;border-radius:12px;text-decoration:none;
  background:linear-gradient(120deg,rgba(255,107,44,.16),rgba(255,179,71,.09));
  border:1px solid rgba(255,140,60,.42);
  transition:all .16s;
}
.pk-page-link:hover{
  background:linear-gradient(120deg,rgba(255,107,44,.26),rgba(255,179,71,.16));
  border-color:rgba(255,140,60,.7);text-decoration:none;
}
.pk-page-link .ppl-ic{font-size:19px;flex:none}
.pk-page-link .ppl-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.pk-page-link b{font-size:12.5px;color:var(--bone);font-weight:600}
.pk-page-link small{font-size:10.5px;color:var(--ash);margin-top:2px}
.pk-page-link .ppl-go{flex:none;color:var(--flame);font-size:19px;line-height:1}