/* panneau.css : le panneau de controle de la carte (Couches, En direct, Reglages). Charge apres styles.css.
   Les cases restent les <input data-lay> / <input data-poi> que main.js cable : ici on ne fait que les habiller.
   Les !important repondent a ceux de styles.css sur .lay-row (sinon ils gagnent). */
.zp{
  --zp-muted:#6B6B65; --zp-tuile:#F4F3EF; --zp-creux:#F1F0EC; --zp-seg:#FFFFFF; --zp-off:#8F8C85;
  --zp-btn:#5A45D6; --zp-lien:#5A45D6; --zp-segombre:0 1px 2px rgba(20,20,26,.16);
  position:fixed; top:12px; right:12px; bottom:12px; z-index:40;
  width:380px; max-width:calc(100vw - 24px);
  display:flex; flex-direction:column; box-sizing:border-box; overflow:hidden;
  background:var(--card); color:var(--fg); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; font-size:14px; line-height:1.4;
  text-align:left;
}
:root[data-theme=dark] .zp{
  --zp-muted:#9EA1A6; --zp-tuile:#2A2C30; --zp-creux:#26282C; --zp-seg:#3A3D42; --zp-off:#6A6E75;
  --zp-btn:#6B5CE7; --zp-lien:#A79DF7; --zp-segombre:0 1px 2px rgba(0,0,0,.5);
}
.zp[hidden]{display:none !important}
.zp *{box-sizing:border-box}
.zp button{font-family:inherit}
.zp button:focus-visible,.zp a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* tete : titre, compte, fermer */
.zp-poignee{display:none}
.zp-tete{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:12px 10px 10px 18px}
.zp-titre{flex:1 1 auto;min-width:0;margin:0;font-family:inherit;font-size:17px;font-weight:650;line-height:1.25;letter-spacing:-.01em;color:var(--fg)}
.zp-connexion{flex:0 0 auto;min-height:40px;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--zp-lien);font-size:14px;font-weight:600;cursor:pointer}
.zp-connexion:hover{background:var(--zp-creux)}
.zp-avatar{flex:0 0 auto;width:44px;height:44px;padding:0;border:0;border-radius:999px;background:transparent;display:grid;place-items:center;cursor:pointer}
.zp-connexion[hidden],.zp-avatar[hidden],.zp-horsligne[hidden],.zp-btn[hidden]{display:none}
.zp-horsligne{flex:0 0 auto;padding:6px 10px;border-radius:999px;background:var(--zp-creux);color:var(--zp-muted);font-size:13px;font-weight:600}
.zp-avatar span,.zp-av{width:34px;height:34px;border-radius:999px;background:var(--zp-btn);color:#FFFFFF;font-size:15px;font-weight:650;display:grid;place-items:center;line-height:1}
.zp .lay-close{flex:0 0 auto;width:44px;height:44px;padding:0;border:0;border-radius:10px;background:transparent;color:var(--zp-muted);display:grid;place-items:center;cursor:pointer;font-size:0;line-height:0}
.zp .lay-close:hover{background:var(--zp-creux);color:var(--fg)}
.zp-ico{width:20px;height:20px}

/* onglets */
.zp-onglets{flex:0 0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:0 16px 2px;padding:4px;border-radius:12px;background:var(--zp-creux)}
.zp-onglet{min-height:42px;padding:0 6px;border:0;border-radius:9px;background:transparent;color:var(--zp-muted);font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;white-space:nowrap}
.zp-onglet[aria-selected=true]{background:var(--zp-seg);color:var(--fg);box-shadow:var(--zp-segombre)}
.zp-compte{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--line);color:var(--fg);font-size:12px;font-weight:650;display:inline-grid;place-items:center;line-height:1}
.zp-compte:empty{display:none}
.zp-onglet[aria-selected=true] .zp-compte{background:var(--zp-btn);color:#FFFFFF}

/* corps */
.zp-corps{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 18px 18px}
.zp-page[hidden]{display:none}
.zp .lay-group{margin:0 !important;padding:0}
.zp .lay-title{display:flex !important;align-items:baseline;justify-content:space-between;gap:12px;margin:0 !important;padding:18px 0 6px;font-family:inherit !important;font-size:13px !important;font-weight:650 !important;line-height:1.3;color:var(--fg) !important;text-transform:none !important;letter-spacing:0 !important}
.zp .lay-warn{font-size:12px;font-weight:400;color:var(--zp-muted) !important;text-align:right;text-transform:none;letter-spacing:0}

/* une couche : icone dans sa tuile, nom (+ precision), interrupteur a droite */
.zp .lay-row{display:flex !important;align-items:center !important;gap:12px !important;min-height:52px;margin:0;padding:4px 0 !important;
  font-family:inherit !important;font-size:14px !important;font-weight:500 !important;line-height:1.3 !important;color:var(--fg) !important;
  cursor:pointer !important;border-radius:0 !important;background:transparent !important}
.zp .lay-row:hover{background:transparent !important}
.zp .lay-row .lay-ic{order:-1;flex:0 0 32px;width:32px !important;height:32px !important;padding:7px;border-radius:9px;background:var(--zp-tuile);color:var(--fg);font-size:0}
.zp .zp-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.zp .zp-sous{font-size:12px;font-weight:400;line-height:1.35;color:var(--zp-muted)}
.zp .lay-row input[type="checkbox"]{order:1;flex:0 0 auto;margin:0 0 0 auto !important;width:46px !important;height:28px !important;
  appearance:none !important;-webkit-appearance:none !important;position:static !important;opacity:1 !important;pointer-events:auto !important;
  border:0;border-radius:999px;cursor:pointer !important;accent-color:auto !important;
  background:radial-gradient(circle at 14px 14px,#FFFFFF 0,#FFFFFF 10.5px,rgba(255,255,255,0) 11.5px) 0 0/100% 100% no-repeat var(--zp-off);
  transition:background-color .18s ease,background-position .18s ease}
.zp .lay-row input[type="checkbox"]:checked{background-color:var(--accent);background-position:18px 0}
.zp .lay-row input[type="checkbox"]:disabled{opacity:.45 !important;cursor:default !important}
.zp .lay-row input[type="checkbox"]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.zp .lay-row.zp-cache{display:none !important}

/* fond de carte : deux vignettes */
.zp-fonds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:2px 0 4px}
.zp-fond{display:flex;flex-direction:column;gap:8px;padding:6px;border:0;border-radius:12px;background:var(--card);box-shadow:0 0 0 1px var(--line);color:var(--fg);font-size:14px;font-weight:600;text-align:left;cursor:pointer}
.zp-fond[aria-checked=true]{box-shadow:0 0 0 2px var(--accent)}
.zp-vignette{display:block;height:64px;border-radius:8px;background-size:cover;background-position:center}
.zp-v-plan{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 72' preserveAspectRatio='xMidYMid slice'%3E%3Crect width='160' height='72' fill='%23F4F2ED'/%3E%3Cpath d='M18 12C30 6 48 8 52 18S40 34 26 30 10 18 18 12Z' fill='%23C8E6BC'/%3E%3Cpath d='M0 54C40 46 80 38 160 16V34C90 52 50 62 0 72Z' fill='%23A5D0DE'/%3E%3Cpath d='M0 30L160 4M60 0L84 72M110 0L120 30' fill='none' stroke='%23FFFFFF' stroke-width='3'/%3E%3Cpath d='M0 22C30 18 50 12 76 6' fill='none' stroke='%23EE8A1E' stroke-width='2'/%3E%3C/svg%3E")}
.zp-v-sat{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 72' preserveAspectRatio='xMidYMid slice'%3E%3Crect width='160' height='72' fill='%234B5A3C'/%3E%3Cpath d='M0 0H70L56 30H0Z' fill='%235E6E46'/%3E%3Cpath d='M70 0H160V14L96 34L56 30Z' fill='%236B7650'/%3E%3Cpath d='M0 30H56L40 56H0Z' fill='%233F4E34'/%3E%3Cpath d='M0 54C40 46 80 38 160 16V34C90 52 50 62 0 72Z' fill='%231F3A4A'/%3E%3Cpath d='M0 30L160 4M60 0L84 72' fill='none' stroke='%23B8B09E' stroke-width='1.6'/%3E%3C/svg%3E")}
.zp-fond-nom{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:20px;padding:0 4px 2px}
.zp-fond[aria-checked=true] .zp-fond-nom::after{content:"";flex:0 0 auto;width:18px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%235A45D6' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
:root[data-theme=dark] .zp-fond[aria-checked=true] .zp-fond-nom::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23A79DF7' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* points d'interet : pastilles */
.zp-puces{display:flex;flex-wrap:wrap;gap:8px;padding:2px 0 4px}
.zp-puce{position:relative;display:inline-flex;cursor:pointer}
.zp-puce input{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.zp-puce-in{min-height:42px;padding:0 14px 0 12px;border:1px solid var(--line);border-radius:999px;display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--fg);background:transparent}
.zp-puce input:checked + .zp-puce-in{background:var(--accent-weak);border-color:var(--accent)}
.zp-puce input:focus-visible + .zp-puce-in{outline:2px solid var(--accent);outline-offset:2px}
.zp-pt{flex:0 0 auto;width:10px;height:10px;border-radius:999px}
.zp-pt-toilets{background:#2E86DE}
.zp-pt-drinking_water{background:#26C281}
.zp-pt-pharmacy{background:#E74C3C}
.zp-pt-charging_station{background:#8E44AD}
.zp-pt-fuel{background:#E67E22}
.zp-pt-atm{background:#16A085}
.zp-pt-clinic{background:#E84393}

/* reglages */
.zp-ligne{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px;min-height:56px;padding:4px 0}
.zp-ligne-nom{font-size:14px;font-weight:500}
.zp-seg{display:inline-grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:2px;padding:3px;border-radius:11px;background:var(--zp-creux)}
.zp-seg button{min-height:40px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:var(--zp-muted);font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.zp-seg button[aria-checked=true]{background:var(--zp-seg);color:var(--fg);box-shadow:var(--zp-segombre)}
.zp-carte{display:flex;flex-direction:column;gap:12px;padding:14px;border:1px solid var(--line);border-radius:12px}
.zp-carte[hidden]{display:none}
.zp-p{margin:0;font-size:13px;line-height:1.5;color:var(--zp-muted)}
.zp-p[hidden]{display:none}
.zp-hs{padding-top:8px}
.zp-btn{align-self:flex-start;min-height:44px;padding:0 16px;border:0;border-radius:10px;background:var(--zp-btn);color:#FFFFFF;font-size:14px;font-weight:600;cursor:pointer}
.zp-btn:disabled{opacity:.6;cursor:default}
.zp-btn.zp-second{background:transparent;color:var(--fg);border:1px solid var(--line)}
.zp-btn2{min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--fg);font-size:14px;font-weight:600;display:inline-flex;align-items:center;text-decoration:none;cursor:pointer}
.zp-btn2:hover,.zp-btn.zp-second:hover{background:var(--zp-creux)}
.zp-actions{display:flex;flex-wrap:wrap;gap:8px}
.zp-qui{display:flex;align-items:center;gap:12px}
.zp-qui .zp-av{flex:0 0 44px;width:44px;height:44px;font-size:18px}
.zp-nom{font-size:15px;font-weight:600;color:var(--fg);overflow-wrap:anywhere}
.zp-coffre-tete{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14px;font-weight:600}
.zp-pastille{flex:0 0 auto;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;background:var(--zp-creux);color:var(--fg)}
.zp-pastille.zp-ouvert{background:var(--accent-weak);color:var(--zp-lien)}

/* pied */
.zp-pied{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 10px 6px 18px;border-top:1px solid var(--line)}
.zp-resume{font-size:13px;color:var(--zp-muted)}
.zp-lien{min-height:44px;padding:0 8px;border:0;border-radius:10px;background:transparent;color:var(--zp-lien);font-size:14px;font-weight:600;cursor:pointer}
.zp-lien:hover{background:var(--zp-creux)}

/* les messages (toasts) de main.js restent visibles par-dessus le panneau (feuille du bas sur telephone) ;
   ils ne prennent pas les clics (pointer-events:none dans styles.css) */
.toast{z-index:41}
/* styles.css colore l'icone au survol (.lay-row:hover svg.lay-ic) : on garde la couleur du panneau */
.zp .lay-row:hover svg.lay-ic{color:var(--fg)}
/* contraste force (Windows) : les interrupteurs dessines perdraient leur etat ; on rend les vraies cases */
@media (forced-colors:active){
  .zp .lay-row input[type="checkbox"]{appearance:auto !important;-webkit-appearance:checkbox !important;width:20px !important;height:20px !important;background:none}
  .zp-puce input{opacity:1;position:static;width:auto;height:auto}
}

/* le compteur du GPS (navhud.js) : replie, une petite pastille de verre fondue dans la carte, toujours la ; deplie,
   le meme verre sans grosse ombre. Ses positions restent celles de styles.css. */
#navhud.replie{height:auto;padding:3px;gap:0;box-shadow:none;background:rgba(255,255,255,.45);
  background:color-mix(in srgb,var(--card) 45%,transparent);border:1px solid rgba(231,230,226,.6);
  border-color:color-mix(in srgb,var(--line) 60%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
:root[data-theme=dark] #navhud.replie{background:rgba(29,31,34,.45);background:color-mix(in srgb,var(--card) 45%,transparent)}
#navhud.replie .navhud-t{width:30px;height:30px;border:0;background:transparent;color:var(--muted)}
#navhud.replie .navhud-t svg{width:14px;height:14px}
#navhud.replie .nav-coord{display:none}
#navhud:not(.replie){box-shadow:0 2px 10px rgba(20,20,26,.10)}
.zp-raison{color:var(--fg)}
.zp-raison[hidden]{display:none}

/* ce qui est passe dans le panneau : theme, langue, coffre, temps reel (gardes dans la page pour main.js, caches) */
#btn-live[hidden],#btn-theme[hidden]{display:none !important}
#zk-btn-coffre{display:none !important}
.search #btn-lang{display:none !important}
.controls #btn-compass{border-bottom:0}

/* telephone : feuille du bas. Elle s'arrete sous le ☰ (76 + 44 px) : sur un petit ecran (320 x 568), 82 % de la
   hauteur coupait le ☰ en deux. */
@media (max-width:520px){
  .zp{top:auto;left:0;right:0;bottom:0;width:auto;max-width:none;
    max-height:82vh;max-height:min(82vh,calc(100vh - 128px));max-height:min(82dvh,calc(100dvh - 128px));
    border-width:1px 0 0;border-radius:20px 20px 0 0;padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -8px 24px rgba(20,20,26,.16)}
  :root[data-theme=dark] .zp{box-shadow:0 -10px 30px rgba(0,0,0,.45)}
  .zp-poignee{display:block;flex:0 0 auto;align-self:center;width:40px;height:5px;margin-top:8px;border-radius:999px;background:var(--line)}
  .zp-tete{padding-top:6px}
  .zp-pied{padding-bottom:10px}
}
/* telephone etroit (375 px) : le titre, « Se connecter » et la croix tiennent sur une ligne */
@media (max-width:400px){
  .zp-tete{gap:6px;padding-left:16px}
  .zp-titre{font-size:16px}
  .zp-connexion{padding:0 11px;font-size:13px}
}

/* ecran bas (telephone couche, fenetre basse) : les boutons de la carte partaient de 190 px et sortaient de l'ecran
   sous 404 px de haut, sur le texte des credits. Le ☰ monte sur la ligne de la recherche et les boutons le suivent,
   alignes sur la pastille du GPS. Hors navigation seulement : en navigation, le bandeau du haut occupe cette ligne. */
@media (max-height:500px){
  body:not(.navmode) #btn-layers{top:14px !important}
  body:not(.navmode) .controls{top:76px !important}
}
@media (max-height:340px){
  body:not(.navmode) .controls{gap:6px}
  body:not(.navmode) .controls .ctrl{width:40px;height:40px}
}
/* ecran bas : tete, onglets et pied plus serres pour laisser la place aux couches ; a droite, le panneau prend toute
   la hauteur ; en feuille du bas (ecran bas et etroit), elle prend tout l'ecran, sans poignee */
@media (max-height:500px){
  .zp-poignee{display:none}
  .zp-tete{padding:6px 6px 4px 16px}
  .zp-titre{font-size:16px}
  .zp-connexion{min-height:36px}
  .zp .lay-close{width:40px;height:40px}
  .zp-onglet{min-height:34px}
  .zp-pied{padding:0 8px 0 16px}
  .zp-lien{min-height:36px}
  .zp-vignette{height:44px}
  .zp .lay-title{padding-top:12px}
}
@media (min-width:521px) and (max-height:500px){
  .zp{top:8px;bottom:8px}
}
@media (max-width:520px) and (max-height:500px){
  .zp{max-height:calc(100vh - 8px);max-height:calc(100dvh - 8px)}
}
/* tablette debout, fenetre etroite : le panneau commence sous la barre de recherche au lieu de la couper en deux */
@media (min-width:521px) and (max-width:839px) and (min-height:501px){
  .zp{top:72px}
}
/* ecran bas et etroit (telephone couche) : le panneau garde toute la hauteur ; la recherche se resserre a sa gauche
   tant qu'il est ouvert, au lieu de passer dessous a moitie */
@media (min-width:521px) and (max-width:839px) and (max-height:500px){
  body:has(#layers-panel:not([hidden])) .search{max-width:calc(100vw - 416px)}
}
@media (prefers-reduced-motion:reduce){.zp *{transition:none !important}}
.zp .lay-row:has(input[data-lay="power"]) .lay-ic{color:#B7860B}
:root[data-theme=dark] .zp .lay-row:has(input[data-lay="power"]) .lay-ic{color:#E8B93A}
.zp .lay-row:has(input[data-lay="transit"]) .lay-ic{color:#D2700A}
:root[data-theme=dark] .zp .lay-row:has(input[data-lay="transit"]) .lay-ic{color:#F5A040}
.zp .lay-row:has(input[data-lay="rail"]) .lay-ic{color:#6E6A62}
:root[data-theme=dark] .zp .lay-row:has(input[data-lay="rail"]) .lay-ic{color:#B8B3A9}
.zp .lay-row:has(input[data-lay="landuse"]) .lay-ic{color:#3F7A2E}
:root[data-theme=dark] .zp .lay-row:has(input[data-lay="landuse"]) .lay-ic{color:#86C06A}
.zp .lay-row:has(input[data-lay="avions"]) .lay-ic{color:#1B5E9E}
:root[data-theme=dark] .zp .lay-row:has(input[data-lay="avions"]) .lay-ic{color:#7DB3EA}
.zp .lay-row:has(input[data-lay="bateaux"]) .lay-ic{color:#0E6B5E}
:root[data-theme=dark] .zp .lay-row:has(input[data-lay="bateaux"]) .lay-ic{color:#5CC2B2}
.zp .lay-row:has(input[data-lay="bus_stm"]) .lay-ic{color:#1565A0}
:root[data-theme=dark] .zp .lay-row:has(input[data-lay="bus_stm"]) .lay-ic{color:#6FB0E6}
.zp .lay-row:has(input[data-lay="transit_fr"]) .lay-ic{color:#2E7D32}
:root[data-theme=dark] .zp .lay-row:has(input[data-lay="transit_fr"]) .lay-ic{color:#76C67A}
.zp .lay-row:has(input[data-lay="chantiers"]) .lay-ic{color:#C2410C}
:root[data-theme=dark] .zp .lay-row:has(input[data-lay="chantiers"]) .lay-ic{color:#FB923C}
.zp .lay-row:has(input[data-lay="evenements"]) .lay-ic{color:#D21F1F}
:root[data-theme=dark] .zp .lay-row:has(input[data-lay="evenements"]) .lay-ic{color:#F87171}
.zp .lay-row:has(input[data-lay="feux"]) .lay-ic{color:#C2410C}
:root[data-theme=dark] .zp .lay-row:has(input[data-lay="feux"]) .lay-ic{color:#FB923C}