/* HotelDelta UX terrain — V0.20 */
:root{
  --hd-footer-h:58px;
  --hd-radius:16px;
}

/* ---- Navigation permanente ------------------------------------------------ */
#tab-bar{
  position:fixed !important;
  left:0; right:0; bottom:0;
  z-index:2200 !important;
  min-height:var(--hd-footer-h);
  display:flex !important;
  border-top:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
body:has(#ecran-accueil.actif) #tab-bar{display:flex !important}
.tab-item{min-height:54px;padding:7px 0 5px !important}
.tab-item svg{width:21px;height:21px;stroke-width:1.9}
.tab-item span{font-size:10px;letter-spacing:.1px}
.tab-item.actif{background:rgba(255,255,255,.06)}
.tab-item.actif svg{stroke:#75b9ff !important}
#ecran-carte,#ecran-accueil{padding-bottom:calc(var(--hd-footer-h) + env(safe-area-inset-bottom,0px))}

/* Les écrans plein format couvrent tout l'écran jusqu'en bas (le dock,
   z-index bien supérieur, flotte par-dessus) : un padding interne évite
   que le contenu ne soit caché par le dock, sans laisser de vide derrière
   par lequel la carte apparaissait. */
#layers-panel,#doctrine-panel,#parametres-panel,#legende-panel,#glossaire-panel,
#info-journaliere-panel,#meteo-panel,#feux-liste-panel{
  bottom:0 !important;
  height:auto !important;
  padding-bottom:calc(var(--hd-footer-h) + 16px + env(safe-area-inset-bottom,0px)) !important;
}

/* ---- Accueil compact ------------------------------------------------------ */
#ecran-accueil{
  overflow-y:auto;
  padding:max(12px,env(safe-area-inset-top,0px)) 14px calc(68px + env(safe-area-inset-bottom,0px)) !important;
}
.hd-home-shell{max-width:720px;margin:0 auto}
.hd-home-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.hd-home-eyebrow{font-size:9.5px;letter-spacing:1.35px;font-weight:800;color:var(--text-dim);margin-bottom:1px}
.hd-home-top h1{font-size:23px;line-height:1.05;margin:0;color:var(--heading);letter-spacing:-.4px}
.hd-settings-btn{
  width:42px !important;height:42px !important;min-width:42px;
  padding:0 !important;border-radius:13px !important;display:flex !important;
  background:var(--surface) !important;
}
.hd-settings-btn svg{width:20px!important;height:20px!important;stroke:var(--text)!important}

#ecran-accueil .accueil-statut{
  width:100%;box-sizing:border-box;margin:0 0 11px !important;padding:11px 13px !important;
  border-radius:15px !important;min-height:104px;
  background:linear-gradient(145deg,#1c2b54,#182440) !important;
  box-shadow:0 5px 18px rgba(18,32,63,.18);
}
#ecran-accueil .accueil-statut-corps{display:flex;align-items:center;gap:8px}
#ecran-accueil .accueil-statut-texte{min-width:0;flex:1}
#ecran-accueil .accueil-statut-ligne1{font-size:14px}
#ecran-accueil #accueil-commune{font-size:11.5px;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#ecran-accueil .accueil-coords{font-size:10.5px;margin-top:1px}
#ecran-accueil .accueil-meteo{gap:12px;margin-top:7px;padding-top:7px;flex-wrap:nowrap}
#ecran-accueil .accueil-meteo-item b{font-size:14px}
#ecran-accueil .accueil-meteo-item span{font-size:8.5px}
#ecran-accueil .accueil-meteo-anim{width:66px;min-width:66px;height:66px;transform:scale(.86);transform-origin:center}

.hd-home-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
#ecran-accueil .hd-home-card{
  min-height:76px;padding:11px 10px !important;border-radius:15px !important;
  flex-direction:row !important;justify-content:flex-start !important;gap:10px!important;text-align:left;
}
.hd-icon-badge{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--surface-2);flex:0 0 auto}
.hd-icon-badge svg{width:21px!important;height:21px!important;stroke:var(--info)!important}
.hd-home-card-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.hd-home-card-copy b{font-size:13.5px;color:var(--heading)}
.hd-home-card-copy small{font-size:9.5px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.hd-home-actions{display:flex;flex-direction:column;gap:7px;margin-top:10px}
.hd-home-action{
  width:100%;min-height:52px;border:1px solid var(--border);border-radius:14px;background:var(--surface);
  color:var(--text);display:grid;grid-template-columns:34px 1fr 18px;align-items:center;gap:9px;padding:7px 10px;text-align:left;
}
.hd-home-action>span:nth-child(2){display:flex;flex-direction:column;min-width:0}
.hd-home-action b{font-size:12.5px}
.hd-home-action small{font-size:9.5px;color:var(--text-dim);margin-top:1px}
.hd-home-action>svg{width:17px;height:17px;stroke:var(--text-dim);fill:none;stroke-width:2}
.hd-action-icon{width:31px;height:31px;border-radius:10px;background:var(--surface-2);display:flex;align-items:center;justify-content:center}
.hd-action-icon svg{width:18px;height:18px;stroke:var(--info);fill:none;stroke-width:1.8}
.hd-action-icon.fire{font-size:17px;background:#fff1ef}
.hd-legacy-memo{display:none}

/* ---- Headers/panneaux ----------------------------------------------------- */
.panel-header{
  min-height:52px;
}
.hd-meteo-header{
  display:grid!important;
  grid-template-columns:1fr 40px 0px;
  gap:8px;
  align-items:center;
  padding:max(10px,env(safe-area-inset-top,0px)) 14px 10px!important;
}
.hd-panel-title{display:flex;align-items:center;gap:9px;min-width:0}
.hd-panel-title>span:last-child{display:flex;flex-direction:column;line-height:1.1}
.hd-panel-title b{font-size:17px}
.hd-panel-title small{font-size:9.5px;color:#ffffffa8;margin-top:3px;font-weight:500}
.hd-panel-icon{width:34px;height:34px;border-radius:10px;background:#ffffff18;display:flex;align-items:center;justify-content:center}
.hd-panel-icon svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:1.8}
.hd-icon-button{
  width:36px!important;height:36px!important;border-radius:11px!important;margin:0!important;padding:0!important;
  background:#ffffff18!important;color:#fff!important;
}
.hd-icon-button svg{width:18px!important;height:18px!important}
.hd-meteo-close{display:none!important}

/* ---- Météo --------------------------------------------------------------- */
#meteo-panel{padding-bottom:10px}
#meteo-panel>#meteo-contenu{margin-top:10px!important}
#meteo-onglets{
  display:grid!important;grid-template-columns:1fr 1fr;gap:4px;padding:3px!important;
  border-radius:13px!important;position:sticky;top:0;z-index:3;background:var(--surface-2);
}
#meteo-onglets button{
  display:flex;align-items:center;justify-content:center;gap:6px;min-height:38px;
  font-size:11.5px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hd-tab-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:0 0 auto}
.hd-tab-dot.position{background:#3488e5}
.hd-tab-dot.destination{background:#e34b4b}
.meteo-entete{margin-top:11px!important}
.meteo-icone-anim{transform:scale(.95)}
.hd-sun-grid{
  display:grid!important;grid-template-columns:1fr 1fr;gap:8px!important;
  font-size:inherit!important;color:inherit!important;margin:9px 0 12px!important;
}
.hd-sun-card{
  position:relative;background:var(--surface-2);border-radius:13px;padding:10px 11px 9px 39px;min-height:46px;
  display:flex;flex-direction:column;justify-content:center;
}
.hd-sun-card small{font-size:9.5px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.3px}
.hd-sun-card b{font-size:18px;color:var(--heading);margin-top:1px}
.hd-sun-icon{
  position:absolute;left:11px;top:50%;transform:translateY(-50%);
  width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:800;
}
.hd-sun-card.lever .hd-sun-icon{background:#fff2c6;color:#c78300}
.hd-sun-card.coucher .hd-sun-icon{background:#ffe0d4;color:#d45d2d}
.meteo-jour-restant{
  grid-column:1/-1;background:transparent;text-align:center;color:var(--text-dim);font-size:10.5px;font-weight:700;
  margin-top:-2px;
}
.meteo-grille-complete{gap:7px!important;margin:10px 0 14px!important}
.meteo-case{padding:9px 11px!important;border-radius:11px!important}
.meteo-case span{font-size:9.5px!important}
.meteo-case b{font-size:14.5px!important}

/* ---- Destination / itinéraire : bottom sheet ----------------------------- */
#info-panel{
  position:fixed!important;
  left:10px!important;right:10px!important;
  bottom:calc(var(--hd-footer-h) + 10px + env(safe-area-inset-bottom,0px))!important;
  max-height:min(62vh,520px)!important;
  border-radius:18px!important;
  padding:7px 14px 13px!important;
  z-index:1800!important;
  transition:max-height .2s ease,transform .2s ease;
}
.hd-sheet-handle{width:38px;height:4px;border-radius:6px;background:var(--border);margin:1px auto 8px}
.hd-sheet-headrow{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding-right:32px}
#info-commune{font-size:16px;font-weight:800;color:var(--heading);line-height:1.2;text-transform:none}
#info-code{font-size:13px!important;color:var(--info)!important;margin-top:2px}
#hd-sheet-toggle{
  flex:0 0 auto;border:0;border-radius:9px;background:var(--surface-2);color:var(--text-dim);
  font-size:10.5px;font-weight:700;padding:7px 9px;
}
#info-coords{font-size:10.5px!important;margin-top:4px!important}
#btn-close-info{top:7px!important;right:7px!important}
#info-panel.hd-sheet-collapsed #info-formats,
#info-panel.hd-sheet-collapsed #info-pistes,
#info-panel.hd-sheet-collapsed .info-actions{display:none!important}
#info-panel.hd-sheet-collapsed #info-route{margin-top:6px}
#info-panel.hd-sheet-collapsed #route-terre{font-size:11px}
#info-panel.hd-sheet-collapsed .route-actions{margin-top:6px}
#info-panel.hd-sheet-collapsed .route-actions button{padding:8px;font-size:11.5px}
#info-panel.hd-sheet-collapsed .route-actions a{font-size:11.5px}
#info-panel:not(.hd-sheet-collapsed){padding-bottom:15px!important}
#info-panel:not(.hd-sheet-collapsed) #hd-sheet-toggle{background:var(--navy);color:#fff}

/* ---- Paramètres comme hub ------------------------------------------------ */
.hd-settings-links{display:grid;grid-template-columns:1fr;gap:7px;margin-top:13px!important;margin-bottom:16px}
.hd-settings-links button{
  border:1px solid var(--border);background:var(--surface);color:var(--text);
  border-radius:13px;display:grid;grid-template-columns:34px 1fr;align-items:center;gap:9px;padding:9px 10px;text-align:left;
}
.hd-settings-links svg{width:19px;height:19px;stroke:var(--info);fill:none;stroke-width:1.8}
.hd-settings-links span{display:flex;flex-direction:column}
.hd-settings-links b{font-size:12.5px}
.hd-settings-links small{font-size:9.5px;color:var(--text-dim)}
.hd-settings-memo{margin:14px 16px 20px;border:1px solid var(--border);border-radius:13px;background:var(--surface)}
.hd-settings-memo summary{padding:11px 13px;font-size:12px;font-weight:800;cursor:pointer}
.hd-settings-memo .accueil-memo{padding:0 10px 10px}

/* ---- Référentiel --------------------------------------------------------- */
.hd-ref-tabs{
  display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:3px;background:var(--surface-2);
  border-radius:12px;margin-top:13px!important;margin-bottom:10px!important;
}
.hd-ref-tabs button{border:0;border-radius:9px;background:transparent;color:var(--text-dim);padding:8px;font-size:12px;font-weight:700}
.hd-ref-tabs button.active{background:var(--navy);color:#fff}

/* petits écrans : priorité à l'absence de scroll sur l'accueil */
@media (max-height:720px){
  #ecran-accueil .accueil-statut{min-height:92px;padding:9px 11px!important}
  #ecran-accueil .accueil-meteo{margin-top:5px;padding-top:5px}
  #ecran-accueil .accueil-meteo-anim{width:56px;min-width:56px;height:56px;transform:scale(.76)}
  #ecran-accueil .hd-home-card{min-height:67px;padding:8px!important}
  .hd-home-actions{margin-top:8px;gap:5px}
  .hd-home-action{min-height:45px;padding:5px 9px}
}

/* --------------------------------------------------------------------------
   V0.21 — corrections terrain
   -------------------------------------------------------------------------- */

/* Accueil : CODIS et mémo réellement visibles, un seul accès Réglages */
.hd-home-top{grid-template-columns:1fr!important}
.hd-codis-action{
  text-decoration:none!important;
  background:linear-gradient(135deg,#8e1f26,#bd3138)!important;
  border-color:transparent!important;
  color:#fff!important;
}
.hd-codis-action b,.hd-codis-action small{color:#fff!important}
.hd-codis-action small{opacity:.78}
.hd-codis-action>svg{stroke:#fff!important;opacity:.8}
.hd-action-icon.phone{background:#ffffff20!important}
.hd-action-icon.phone svg{stroke:#fff!important}

.hd-home-memo{
  margin-top:9px;background:var(--surface);border:1px solid var(--border);
  border-radius:15px;padding:9px 10px 10px;
}
.hd-home-memo-title{
  display:flex;align-items:center;justify-content:space-between;
  font-size:10px;text-transform:uppercase;letter-spacing:.65px;font-weight:800;
  color:var(--text-dim);margin-bottom:7px;
}
.hd-home-settings-link{
  width:31px!important;height:31px!important;min-width:31px!important;
  padding:0!important;border-radius:9px!important;background:var(--surface-2)!important;
}
.hd-home-settings-link svg{width:16px!important;height:16px!important;stroke:var(--text)!important}
.hd-home-radio-grid{
  display:grid!important;grid-template-columns:1fr 1.2fr 1fr;gap:6px!important;
  margin:0!important;
}
.hd-home-radio-grid .accueil-memo-radio{
  background:var(--surface-2);border-radius:10px;padding:7px 7px!important;
  min-width:0;display:flex;flex-direction:column;gap:3px;
}
.hd-home-radio-grid .accueil-memo-radio-nom{
  font-size:8.5px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-transform:uppercase;letter-spacing:.25px;
}
.hd-home-radio-grid .accueil-memo-radio-valeur{
  width:100%!important;box-sizing:border-box!important;min-width:0;
  font-size:15px!important;font-weight:800;text-align:center;padding:4px!important;
  border-radius:7px!important;
}

/* Footer : icônes plus modernes + état actif impossible à manquer */
#tab-bar{
  background:linear-gradient(180deg,#182747,#0e1930)!important;
  overflow:hidden;
}
.tab-item{
  position:relative;transition:background .18s ease,color .18s ease,transform .12s ease;
  color:#ffffff83!important;
}
.tab-item svg{transition:stroke .18s ease,fill .18s ease,transform .18s ease}
.tab-item .tab-fill{fill:transparent;stroke:currentColor;transition:fill .18s ease,stroke .18s ease}
.tab-item.actif{color:#fff!important}
.tab-item.actif:before{
  content:"";position:absolute;left:18%;right:18%;top:0;height:3px;
  border-radius:0 0 5px 5px;background:#fff;opacity:.9;
}
.tab-item.actif svg{transform:translateY(-1px) scale(1.05)}
.tab-item.actif .tab-fill{fill:currentColor;stroke:currentColor}

.tab-item[data-tab="accueil"].actif{
  background:linear-gradient(145deg,#223c6a,#172948)!important;
}
.tab-item[data-tab="carte"].actif{
  background:linear-gradient(145deg,#174b87,#1b67ad)!important;
}
.tab-item[data-tab="surface"].actif{
  background:linear-gradient(145deg,#153d63,#167c83)!important;
}
.tab-item[data-tab="meteo"].actif{
  background:linear-gradient(135deg,#16294d 12%,#36537a 54%,#d7803d 130%)!important;
}
.tab-item[data-tab="meteo"].actif:before{background:#f5a65e}
.tab-item[data-tab="surface"].actif:before{background:#68d1ce}
.tab-item[data-tab="carte"].actif:before{background:#76baff}

/* Destination : Détails et fermeture toujours visibles et cohérents */
#info-panel .hd-sheet-headrow{padding-right:88px!important;min-height:43px}
#hd-sheet-toggle{
  position:absolute!important;right:49px!important;top:9px!important;
  width:36px!important;height:36px!important;padding:0!important;border-radius:50%!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  background:#1d5796!important;color:#fff!important;box-shadow:0 2px 8px rgba(0,0,0,.18);
}
#hd-sheet-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#btn-close-info{
  display:flex!important;align-items:center!important;justify-content:center!important;
  width:36px!important;height:36px!important;border-radius:50%!important;
  background:#b52d35!important;color:#fff!important;border:none!important;
  box-shadow:0 2px 8px rgba(0,0,0,.18)!important;
}
#btn-close-info svg{width:17px!important;height:17px!important;stroke:#fff!important}
#info-panel:not(.hd-sheet-collapsed) #hd-sheet-toggle{background:#153d63!important}
#info-panel:not(.hd-sheet-collapsed){max-height:min(66vh,560px)!important}

/* Pistes : noms lisibles, MapLibre gère le placement le long des lignes */
.maplibregl-map{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}

/* Réglages : plus de troisième entrée Glossaire en doublon */
#parametres-panel .hd-settings-links{grid-template-columns:1fr 1fr!important}
#parametres-panel .hd-settings-links button{min-width:0}

/* Petits écrans : accueil reste utilisable sans masquer CODIS/mémo */
@media(max-height:720px){
  #ecran-accueil .accueil-statut{min-height:84px!important}
  #ecran-accueil .hd-home-card{min-height:61px!important}
  .hd-home-actions{gap:4px!important;margin-top:6px!important}
  .hd-home-action{min-height:42px!important}
  .hd-home-memo{margin-top:5px!important;padding:6px 8px 7px!important}
  .hd-home-memo-title{margin-bottom:4px!important}
  .hd-home-radio-grid .accueil-memo-radio{padding:5px!important}
}

/* V0.22 — correctif anneaux d'appui long iOS */
#maplibre-map .hd-longpress-ring{
  pointer-events:none!important;
  will-change:transform,opacity;
}

/* V0.23 — mode Intervention DFCI */
.hd-route-mode{
  display:inline-flex;align-items:center;gap:5px;
  background:#fff1dc;color:#a45408;border-radius:8px;
  padding:4px 7px;margin-bottom:4px;font-size:10px;font-weight:800;
  text-transform:uppercase;letter-spacing:.35px;
}
.hd-route-mode.standard{background:var(--surface-2);color:var(--text-dim)}
.hd-route-dfci{color:#c66712}
#info-route .hd-route-dfci b{color:#c66712}

/* --------------------------------------------------------------------------
   V0.24 — accueil, menu carte, météo détaillée, Surface MapLibre
   -------------------------------------------------------------------------- */

/* Réglages en haut à droite du titre */
.hd-home-top{display:flex!important;align-items:center!important;justify-content:space-between!important}
.hd-settings-btn{
  display:flex!important;width:42px!important;height:42px!important;min-width:42px!important;
  padding:0!important;border-radius:13px!important;background:var(--surface)!important;
  border:1px solid var(--border)!important;
}
.hd-settings-btn svg{width:19px!important;height:19px!important;stroke:var(--text)!important}
.hd-home-memo-title{justify-content:flex-start!important}

/* Accueil : météo et CODIS plus visibles */
#ecran-accueil .accueil-statut{
  min-height:124px!important;
  padding:15px 16px!important;
  border-radius:18px!important;
}
#ecran-accueil .accueil-statut-ligne1{font-size:15.5px!important}
#ecran-accueil .accueil-coords{font-size:11.5px!important}
#ecran-accueil .accueil-meteo{margin-top:10px!important;padding-top:10px!important;gap:18px!important}
#ecran-accueil .accueil-meteo-item b{font-size:17px!important}
#ecran-accueil .accueil-meteo-item span{font-size:9.5px!important}
#ecran-accueil .accueil-meteo-anim{width:78px!important;min-width:78px!important;height:78px!important;transform:scale(.96)!important}
.hd-codis-action{min-height:58px!important;padding:9px 12px!important;border-radius:15px!important}
.hd-codis-action .hd-action-icon{width:36px!important;height:36px!important}
.hd-codis-action b{font-size:14px!important}
.hd-codis-action small{font-size:10.5px!important}

/* Accueil et Météo : dégradés symétriques dans le footer */
.tab-item[data-tab="accueil"].actif{
  background:linear-gradient(225deg,#16294d 12%,#36537a 54%,#d7803d 130%)!important;
}
.tab-item[data-tab="accueil"].actif:before{background:#f5a65e!important}

/* GPS de nouveau toujours visible sous + / - / boussole */
#maplibre-map .hd-native-geolocate-helper{display:block!important}
#maplibre-map .maplibregl-ctrl-geolocate{
  width:38px!important;height:38px!important;
  border-radius:9px!important;
  background:#fff!important;color:#2f343a!important;
}
#maplibre-map .maplibregl-ctrl-geolocate span{filter:none!important}

/* Menu rond placé en bas à droite et déploiement vers le haut */
#maplibre-map .maplibregl-ctrl-bottom-right .hd-quick-control{
  flex-direction:column-reverse!important;
  align-items:center!important;
  margin:0 12px 16px 0!important;
  gap:8px!important;
}
#maplibre-map .hd-quick-control .hd-quick-toggle{
  width:46px!important;height:46px!important;
}
#maplibre-map .hd-quick-control .hd-quick-actions{
  transform:translateY(8px) scale(.96)!important;
}
#maplibre-map .hd-quick-control.open .hd-quick-actions{
  transform:translateY(0) scale(1)!important;
}

/* Destination sélectionnée : point rouge visible immédiatement */
#maplibre-map canvas{outline:none}

/* Surface */
#surface-panel{z-index:1900!important}
#surface-panel .surface-mesure{font-weight:700}
#surface-panel .segmented button.actif,
#surface-panel .segmente button.actif{
  background:var(--navy)!important;color:#fff!important;
}

/* Prochains jours météo cliquables */
.meteo-jours-titre{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
}
.meteo-jours-titre span{font-size:9.5px;color:var(--text-dim);font-weight:500;text-transform:none;letter-spacing:0}
.meteo-jours-liste{align-items:flex-start!important}
.meteo-jour-detail{
  flex:0 0 132px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
}
.meteo-jour-detail[open]{flex-basis:260px}
.meteo-jour-detail summary{list-style:none}
.meteo-jour-detail summary::-webkit-details-marker{display:none}
.meteo-jour-detail .meteo-jour-carte{
  width:100%!important;box-sizing:border-box;
  border:0!important;border-radius:0!important;
  cursor:pointer;
}
.meteo-jour-more{
  font-size:9px;color:var(--info);font-weight:700;margin-top:4px;
}
.meteo-jour-detail[open] .meteo-jour-more:after{content:" · fermer"}
.meteo-jour-expanded{
  border-top:1px solid var(--border);
  padding:10px 11px 12px;
  background:var(--surface-2);
}
.meteo-day-title{font-size:12px;font-weight:800;color:var(--heading);margin-bottom:8px}
.meteo-day-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px 10px}
.meteo-day-grid div{display:flex;flex-direction:column;gap:1px;min-width:0}
.meteo-day-grid span{font-size:8.5px;text-transform:uppercase;letter-spacing:.3px;color:var(--text-dim)}
.meteo-day-grid b{font-size:11.5px;color:var(--text);white-space:nowrap}

/* petits écrans : on accepte un très léger scroll plutôt que réduire les infos utiles */
@media(max-height:720px){
  #ecran-accueil .accueil-statut{min-height:108px!important}
  #ecran-accueil .accueil-meteo-anim{width:66px!important;min-width:66px!important;height:66px!important}
  .hd-codis-action{min-height:52px!important}
}

/* V0.24 — finition accueil & placement commandes carte */
.hd-home-top{display:flex!important;align-items:center!important;justify-content:space-between!important}
.hd-settings-btn{
  width:42px!important;height:42px!important;min-width:42px!important;
  padding:0!important;border-radius:13px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
}
.hd-home-memo-title{justify-content:flex-start!important}

/* Brique météo plus lisible */
#ecran-accueil .accueil-statut{
  min-height:124px!important;
  padding:14px 15px!important;
}
#ecran-accueil .accueil-statut-ligne1{font-size:15px!important}
#ecran-accueil .accueil-coords{font-size:11.5px!important}
#ecran-accueil .accueil-meteo{margin-top:10px!important;padding-top:9px!important;gap:16px!important}
#ecran-accueil .accueil-meteo-item b{font-size:16px!important}
#ecran-accueil .accueil-meteo-item span{font-size:9.5px!important}
#ecran-accueil .accueil-meteo-anim{
  width:82px!important;min-width:82px!important;height:82px!important;
  transform:scale(1)!important;
}

/* CODIS encore plus évident */
.hd-codis-action{
  min-height:64px!important;
  padding:11px 13px!important;
  box-shadow:0 5px 16px rgba(142,31,38,.18);
}
.hd-codis-action .hd-action-icon{width:39px!important;height:39px!important}
.hd-codis-action b{font-size:15px!important}
.hd-codis-action small{font-size:11px!important}

/* Menu trois-points : aligné à droite, juste au-dessus du footer, ouverture vers le haut */
#maplibre-map .maplibregl-ctrl-bottom-right .hd-quick-control{
  margin:0 12px calc(72px + env(safe-area-inset-bottom,0px)) 0!important;
}
#maplibre-map .hd-quick-control .hd-quick-actions{
  flex-direction:column-reverse!important;
}

/* Surface : le panneau reste compact et la carte tactile autour */
#surface-panel{
  bottom:calc(72px + env(safe-area-inset-bottom,0px))!important;
  right:12px!important;
  left:12px!important;
  pointer-events:auto!important;
}
#maplibre-map .maplibregl-canvas{touch-action:pan-x pan-y}

/* Détails météo journaliers : ouverture horizontale sans casser le scroll */
.meteo-jour-detail[open]{
  flex-basis:272px!important;
}

/* Le menu flottant reste accessible sans recouvrir la fiche destination */
body:has(#info-panel:not(.hidden)) #maplibre-map .maplibregl-ctrl-bottom-right .hd-quick-control{
  margin-bottom:calc(182px + env(safe-area-inset-bottom,0px))!important;
}

/* V0.25 — prévisions recentrées, recherche directe, choix route/DFCI */
.hd-search-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:0 0 8px;
}
#topbar .hd-search-head h1{
  margin:0!important;font-size:15px!important;color:var(--heading)!important;
}
#btn-search-close{
  width:32px;height:32px;border:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface-2);color:var(--text);flex:0 0 auto;
}
#btn-search-close svg{
  width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;
}
.meteo-jours-liste{
  scroll-snap-type:x proximity;
  scroll-padding-inline:calc(50% - 136px);
}
.meteo-jour-detail{scroll-snap-align:center}
.meteo-jour-nom{font-size:12px!important;white-space:nowrap}
.hd-route-compare{
  display:inline-block;margin-top:4px;font-size:9.5px;color:var(--text-dim);
}

/* V0.26 — météo 24h moderne et interactive */
.hd-weather24{
  margin-top:18px;border:1px solid #ffffff12;border-radius:18px;
  background:linear-gradient(160deg,#172844,#21385e 70%,#1b2d4c);
  box-shadow:0 10px 28px rgba(0,0,0,.16);overflow:hidden;
}
.hd-weather24-head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:8px;
  padding:13px 14px 7px;
}
.hd-weather24-head>div:first-child{display:flex;flex-direction:column}
.hd-weather24-kicker{font-size:8px;letter-spacing:1.1px;color:#7fa9dd;font-weight:800}
.hd-weather24-head b{font-size:15px;color:#f4f7fb}
.hd-weather24-legend{display:flex;gap:7px;font-size:8px;color:#aebbd0}
.hd-weather24-legend span{display:flex;align-items:center;gap:3px}
.hd-weather24-legend i{width:7px;height:7px;border-radius:50%}
.risk-high{background:#e53935}.risk-mid{background:#ffa726}.risk-low{background:#66bb6a}
.hd-weather24-readout{
  margin:0 12px 4px;padding:8px 10px;border-radius:11px;
  display:flex;align-items:center;gap:9px;overflow:hidden;
  background:#0c1729aa;border:1px solid #ffffff0d;color:#b7c5d9;
  font-size:9px;white-space:nowrap;
}
.hd-weather24-readout strong{font-size:12px;color:#fff}
.hd-weather24-readout .hd-r-temp{font-size:16px;font-weight:850;color:#ffad38}
.hd-weather24-chart{height:155px;padding:0 4px}
.hd-weather24-chart svg{width:100%;height:100%;overflow:visible}
.hd-weather24-chart text{font-size:8px;fill:#91a1b9}
.hd-temp-line{
  fill:none;stroke:#ffa726;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;animation:hdDrawWeather 1.05s cubic-bezier(.2,.7,.2,1) forwards;
}
.hd-temp-area{opacity:0;animation:hdWeatherFade .7s .25s ease forwards}
.hd-rain-bar{fill:#4fa3f5;opacity:.82;transform-box:fill-box;transform-origin:center bottom;animation:hdRainGrow .65s ease both}
.hd-weather-cursor{stroke:#ffffff;stroke-width:.8;stroke-dasharray:2 2;opacity:.42;transition:x1 .12s,x2 .12s}
.hd-weather-dot{fill:#ffad38;stroke:#fff;stroke-width:1.2;transition:cx .12s,cy .12s}
.hd-weather-dot-pulse{fill:#ffad38;opacity:.16;transform-box:fill-box;transform-origin:center;animation:hdWeatherPulse 2s ease-out infinite;transition:cx .12s,cy .12s}
.hd-weather-hit{fill:transparent;pointer-events:all;touch-action:pan-y}
.hd-weather24-foot{
  display:flex;align-items:center;gap:5px;padding:3px 13px 11px;
  color:#91a1b9;font-size:8px;
}
.hd-weather24-foot em{margin-left:auto;font-style:normal;color:#7891b4}
.hd-temp-key{width:12px;height:2px;border-radius:2px;background:#ffa726}
.hd-rain-key{width:6px;height:8px;border-radius:3px;background:#4fa3f5;margin-left:5px}
@keyframes hdDrawWeather{to{stroke-dashoffset:0}}
@keyframes hdWeatherFade{to{opacity:1}}
@keyframes hdRainGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes hdWeatherPulse{0%{transform:scale(.65);opacity:.28}70%,100%{transform:scale(1.8);opacity:0}}
@media(prefers-reduced-motion:reduce){
  .hd-temp-line,.hd-temp-area,.hd-rain-bar,.hd-weather-dot-pulse{animation:none!important}
  .hd-temp-line{stroke-dashoffset:0}.hd-temp-area{opacity:1}
}

/* V0.27 — PWA installée iOS + Android -------------------------------------- */
html,body{
  background:#0b1322!important;
  min-height:100%;
}
@media (display-mode:standalone){
  html,body{background:#0b1322!important}
  #ecran-accueil{
    padding-top:calc(env(safe-area-inset-top,0px) + 6px)!important;
  }
  .hd-home-top{
    margin-top:0!important;
    filter:none!important;
    -webkit-filter:none!important;
    opacity:1!important;
  }
  .hd-home-eyebrow{
    filter:none!important;
    -webkit-filter:none!important;
    text-shadow:none!important;
    opacity:1!important;
  }
}
/* Safari/Chrome normal : petite respiration, sans réserver deux fois la status bar */
@media not all and (display-mode:standalone){
  #ecran-accueil{
    padding-top:max(10px,env(safe-area-inset-top,0px))!important;
  }
}
.hd-home-top h1{font-size:27px!important}
.hd-home-eyebrow{font-size:10px!important;letter-spacing:1.5px!important}

/* Navigation intervention --------------------------------------------------- */
#resume-naviguer{
  border:0;border-radius:10px;background:#1670c9;color:#fff;
  min-height:38px;padding:7px 10px;display:flex;align-items:center;gap:5px;
  font-size:10.5px;font-weight:800;
}
#resume-naviguer.hidden{display:none!important}
#resume-naviguer svg{
  width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}

#hd-navigation-hud{
  position:fixed;left:10px;right:10px;
  bottom:calc(var(--hd-footer-h) + 10px + env(safe-area-inset-bottom,0px));
  z-index:2100;background:linear-gradient(145deg,#132440,#1c365e);
  color:#fff;border:1px solid #ffffff1a;border-radius:17px;
  box-shadow:0 8px 28px rgba(0,0,0,.34);
  padding:10px 11px;display:grid;
  grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;
}
#hd-navigation-hud.hidden{display:none!important}
.hd-nav-main{display:flex;align-items:center;gap:8px;min-width:0}
.hd-nav-main>div{display:flex;flex-direction:column;min-width:0}
.hd-nav-main b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hd-nav-main small{font-size:9px;color:#b5c4d8;margin-top:2px}
.hd-nav-badge{
  width:34px;height:34px;border-radius:10px;background:#1769c2;
  display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:900;letter-spacing:.5px;
}
.hd-nav-stats{display:flex;align-items:center;gap:13px}
.hd-nav-stats div{display:flex;flex-direction:column;align-items:flex-end}
.hd-nav-stats b{font-size:13px}
.hd-nav-stats span{font-size:7.5px;text-transform:uppercase;color:#9fafc6;letter-spacing:.3px}
.hd-nav-actions{
  grid-column:1/-1;display:flex;justify-content:flex-end;gap:7px;
  border-top:1px solid #ffffff12;padding-top:7px;
}
.hd-nav-actions button{
  border:0;border-radius:9px;padding:7px 10px;font-size:9.5px;font-weight:800;
}
#hd-nav-recenter{background:#ffffff15;color:#fff;display:flex;align-items:center;gap:5px}
#hd-nav-recenter.hidden{display:none!important}
#hd-nav-recenter svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
#hd-nav-stop{background:#a92e35;color:#fff}
body.hd-navigation-active #route-resume{display:none!important}
body.hd-navigation-active #info-panel{display:none!important}
body.hd-navigation-active #maplibre-map .hd-quick-control{opacity:.55}
body.hd-navigation-active #maplibre-map .maplibregl-ctrl-bottom-right .hd-quick-control{
  margin-bottom:calc(150px + var(--hd-footer-h) + env(safe-area-inset-bottom,0px))!important;
}

@media(max-width:380px){
  #hd-navigation-hud{grid-template-columns:1fr}
  .hd-nav-stats{grid-row:2;justify-content:flex-start}
  .hd-nav-stats div{align-items:flex-start}
  .hd-nav-actions{grid-row:3}
}

@media(max-width:430px){
  #resume-naviguer{
    width:38px;height:38px;min-width:38px;padding:0;justify-content:center;border-radius:10px;
  }
  #resume-naviguer span{display:none}
}

@media (display-mode:standalone){
  .hd-home-eyebrow{color:#91a9ca!important;font-weight:850!important}
}

/* V0.28 — Référentiel cohérent Doctrine / Glossaire */
#doctrine-panel .hd-ref-tabs,
#glossaire-panel .hd-ref-tabs{
  position:sticky;
  top:0;
  z-index:2;
  margin-top:12px!important;
}
#glossaire-panel #glossaire-content{
  margin-top:10px!important;
}

/* V0.28 — Référentiel unifié */
#doctrine-panel .hd-ref-tabs,
#glossaire-panel .hd-ref-tabs{
  position:sticky;
  top:0;
  z-index:3;
  margin-top:12px!important;
  margin-bottom:10px!important;
}
#glossaire-panel #glossaire-content{margin-top:8px!important}

/* ==========================================================================
   V0.29 — PWA viewport propre iPhone + Android
   Corrige :
   - effet de matière/flou iOS sous la barre d'état ;
   - espace vide sous la navigation ;
   - double comptage des safe areas.
   ========================================================================== */

:root{
  --hd-app-height:100dvh;
  --hd-footer-content-h:58px;
}

/* Le footer HotelDelta est opaque : pas de backdrop-filter susceptible de
   créer un halo/matériau dans une capture PWA. */
#tab-bar{
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  background:linear-gradient(180deg,#172746,#0d1930)!important;
}

/* Mode installé détecté également par JS pour Safari iOS. */
html.hd-standalone,
html.hd-standalone body{
  width:100%!important;
  height:var(--hd-app-height)!important;
  min-height:var(--hd-app-height)!important;
  max-height:var(--hd-app-height)!important;
  overflow:hidden!important;
  background:#0b1322!important;
}



html.hd-standalone body{
  position:fixed!important;
  top:0!important;
  left:0!important;
  right:0!important;
  bottom:auto!important;
}
/* Un aplat opaque derrière la zone système. Il empêche tout contenu,
   pseudo-effet ou compositing GPU d'apparaître derrière la status bar. */
html.hd-standalone body::before{
  content:"";
  position:fixed;
  z-index:4000;
  top:0;left:0;right:0;
  height:env(safe-area-inset-top,0px);
  background:#0b1322;
  pointer-events:none;
}

/* Les écrans occupent uniquement la hauteur réellement disponible AU-DESSUS
   de la barre de navigation. On ne réserve plus le footer deux fois. */
html.hd-standalone #ecran-accueil,
html.hd-standalone #ecran-carte{
  position:absolute!important;
  top:0!important;
  left:0!important;
  right:0!important;
  bottom:calc(var(--hd-footer-content-h) + env(safe-area-inset-bottom,0px))!important;
  width:auto!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  box-sizing:border-box!important;
}

/* Accueil : safe area une seule fois en haut, aucune fausse marge de footer
   en bas. */
html.hd-standalone #ecran-accueil{
  padding:
    calc(env(safe-area-inset-top,0px) + 8px)
    14px
    12px!important;
  overflow-y:auto!important;
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
}

/* Header totalement opaque/net. */
html.hd-standalone .hd-home-shell,
html.hd-standalone .hd-home-top,
html.hd-standalone .hd-home-top *,
html.hd-standalone .hd-home-eyebrow{
  -webkit-filter:none!important;
  filter:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  text-shadow:none!important;
}
html.hd-standalone .hd-home-eyebrow{
  opacity:1!important;
  color:#91a9ca!important;
}

/* Footer réellement collé au bord inférieur de la PWA. La safe area est
   À L'INTÉRIEUR du footer, jamais après lui. */
html.hd-standalone #tab-bar{
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  height:calc(var(--hd-footer-content-h) + env(safe-area-inset-bottom,0px))!important;
  min-height:0!important;
  box-sizing:border-box!important;
  padding:0 0 env(safe-area-inset-bottom,0px)!important;
  margin:0!important;
  overflow:hidden!important;
  transform:none!important;
}
html.hd-standalone #tab-bar .tab-item{
  height:var(--hd-footer-content-h)!important;
  min-height:var(--hd-footer-content-h)!important;
  box-sizing:border-box!important;
}

/* Les panneaux plein écran utilisent la même géométrie que les écrans. */
html.hd-standalone #layers-panel,
html.hd-standalone #doctrine-panel,
html.hd-standalone #parametres-panel,
html.hd-standalone #legende-panel,
html.hd-standalone #glossaire-panel,
html.hd-standalone #info-journaliere-panel,
html.hd-standalone #meteo-panel,
html.hd-standalone #feux-liste-panel{
  bottom:0!important;
  padding-bottom:calc(var(--hd-footer-content-h) + 16px + env(safe-area-inset-bottom,0px))!important;
}

/* Fallback navigateurs récents si JS est momentanément retardé. */
@media (display-mode:standalone){
  html,body{
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
    overflow:hidden!important;
  }
}

/* V0.30 — barre itinéraire en PWA
   #ecran-carte s'arrête déjà au-dessus du footer en mode standalone.
   Il ne faut donc PAS ajouter une seconde fois ~72px + safe-area. */
html.hd-standalone #route-resume{
  bottom:10px!important;
  left:12px!important;
  right:70px!important;
  padding:8px 10px!important;
  min-height:54px;
  box-sizing:border-box;
}
html.hd-standalone #resume-texte{
  font-size:12.5px!important;
  line-height:1.22!important;
}
html.hd-standalone #resume-texte b{
  font-size:15px!important;
}
html.hd-standalone .resume-cible{
  font-size:10.5px!important;
  margin-top:2px;
}
html.hd-standalone #resume-details{
  padding:7px 10px!important;
  min-height:38px;
}
html.hd-standalone #resume-effacer{
  width:36px!important;
  height:36px!important;
}
@media(max-width:430px){
  html.hd-standalone #route-resume{
    gap:7px!important;
    border-radius:14px!important;
  }
}