/* ==========================================================================
   HotelDelta V0.33 — Premium operational UI
   Pure CSS motion: no external image dependency.
   ========================================================================== */
:root{
  --hd-bg:#08111f;
  --hd-bg2:#0d1c32;
  --hd-card:#14233b;
  --hd-card2:#1b3153;
  --hd-line:rgba(148,183,229,.18);
  --hd-blue:#6cb7ff;
  --hd-blue2:#278cff;
  --hd-orange:#ff9f43;
  --hd-text:#f5f8fc;
  --hd-muted:#96a8c2;
  --hd-footer-h:58px;
}

/* ---------- Boot / ouverture ---------- */
#hd-boot{
  position:fixed;
  inset:0;
  z-index:99999;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 18%,rgba(39,140,255,.26),transparent 34%),
    radial-gradient(circle at 82% 74%,rgba(255,159,67,.19),transparent 32%),
    linear-gradient(150deg,#06101f 0%,#0b1a30 48%,#071120 100%);
  color:#fff;
  transition:opacity .26s ease,visibility .26s ease,transform .36s cubic-bezier(.2,.8,.2,1);
}
#hd-boot::before{
  content:"";
  position:absolute;
  inset:-34%;
  border-radius:50%;
  background:
    radial-gradient(circle at 22% 28%,rgba(74,158,255,.12) 0 8%,rgba(74,158,255,.045) 16%,transparent 31%),
    radial-gradient(circle at 78% 72%,rgba(255,167,73,.09) 0 7%,rgba(255,167,73,.03) 16%,transparent 30%);
  filter:blur(12px);
  transform-origin:50% 50%;
  animation:hdBootRotate 15s linear infinite;
  will-change:transform;
}
#hd-boot::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.18;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,transparent 0,#000 28%,#000 76%,transparent 100%);
}
#hd-boot.hd-boot-done{
  opacity:0;
  visibility:hidden;
  transform:scale(1.035);
  pointer-events:none;
}
.hd-boot-core{
  position:relative;
  z-index:2;
  width:min(82vw,360px);
  text-align:center;
  transform:translateY(-2vh);
}
.hd-boot-mark{
  width:92px;height:92px;
  margin:0 auto 18px;
  border-radius:28px;
  display:grid;place-items:center;
  background:linear-gradient(145deg,rgba(39,140,255,.2),rgba(255,159,67,.10));
  border:1px solid rgba(137,190,255,.26);
  box-shadow:0 20px 70px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.08);
  animation:hdBootFloat 3s ease-in-out infinite;
}
.hd-boot-mark svg{width:58px;height:58px;overflow:visible}
.hd-boot-route{
  fill:none;stroke:#62b0ff;stroke-width:4;stroke-linecap:round;
  stroke-dasharray:100;stroke-dashoffset:100;
  animation:hdBootRoute 1.25s .15s ease forwards;
}
.hd-boot-target{fill:#ff9f43;stroke:#fff;stroke-width:2;animation:hdBootPulse 1.8s ease-in-out infinite}
.hd-boot-compass{fill:#8ec5ff;opacity:.88;transform-origin:32px 20px;animation:hdBootCompass 4.5s ease-in-out infinite}
.hd-boot-kicker{
  font-size:10px;font-weight:800;letter-spacing:2.8px;
  color:#92a9c7;margin-bottom:7px;
}
.hd-boot-title{
  font-size:43px;line-height:1;font-weight:850;letter-spacing:-1.9px;
  background:linear-gradient(90deg,#fff 0%,#7fc1ff 45%,#ffbd72 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 20px rgba(71,158,255,.22));
}
.hd-boot-subtitle{margin-top:9px;font-size:12px;color:#9db0ca;letter-spacing:.25px}
.hd-boot-progress{
  height:3px;border-radius:99px;overflow:hidden;
  margin:31px auto 10px;width:76%;
  background:rgba(255,255,255,.09);
}
#hd-boot-progress-bar{
  display:block;height:100%;width:13%;
  border-radius:inherit;
  background:linear-gradient(90deg,#258cff,#68bdff,#ff9f43);
  box-shadow:0 0 16px rgba(82,173,255,.6);
  transition:width .38s cubic-bezier(.2,.8,.2,1);
}
.hd-boot-status{font-size:10px;color:#788eac;letter-spacing:.15px}
.hd-boot-orbit{
  position:absolute;border:1px solid rgba(106,179,255,.12);border-radius:50%;
  transform:translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.hd-boot-orbit-a{width:66vw;height:66vw;max-width:520px;max-height:520px;animation:hdBootRotate 22s linear infinite}
.hd-boot-orbit-b{width:94vw;height:94vw;max-width:760px;max-height:760px;animation:hdBootRotate 31s linear reverse infinite}
.hd-boot-grid{position:absolute;inset:0;pointer-events:none}

/* ---------- Accueil vivant ---------- */
#ecran-accueil{
  isolation:isolate;
  background:linear-gradient(155deg,#08111f,#0b172a 57%,#091321)!important;
}
#ecran-accueil::before,
#ecran-accueil::after{
  content:"";
  position:fixed;
  z-index:-1;
  pointer-events:none;
  border-radius:50%;
  filter:blur(2px);
}
#ecran-accueil::before{
  width:68vw;height:68vw;max-width:520px;max-height:520px;
  left:-25vw;top:4vh;
  background:radial-gradient(circle,rgba(35,133,255,.22),rgba(35,133,255,.04) 50%,transparent 72%);
  animation:hdHomeOrbA 13s ease-in-out infinite alternate;
}
#ecran-accueil::after{
  width:72vw;height:72vw;max-width:560px;max-height:560px;
  right:-32vw;top:32vh;
  background:radial-gradient(circle,rgba(255,137,54,.13),rgba(255,137,54,.025) 56%,transparent 72%);
  animation:hdHomeOrbB 16s ease-in-out infinite alternate;
}
.hd-home-shell{position:relative;z-index:1}
.hd-home-shell::before{
  content:"";
  position:absolute;inset:-20px -14px auto;
  height:220px;z-index:-1;pointer-events:none;opacity:.22;
  background:
    repeating-radial-gradient(ellipse at 35% 25%,transparent 0 17px,rgba(106,177,255,.16) 18px 19px,transparent 20px 31px);
  mask-image:linear-gradient(to bottom,#000,transparent 92%);
}
.hd-home-top{
  position:relative;
  padding:4px 2px 6px;
}
.hd-home-eyebrow{
  color:#8ca6c9!important;
  letter-spacing:2.3px!important;
  font-weight:850!important;
  animation:hdHomeReveal .65s .25s both;
}
.hd-home-top h1{
  font-size:31px!important;
  letter-spacing:-1.45px!important;
  background:linear-gradient(94deg,#f5f9ff 0%,#79baff 46%,#a8d6ff 66%,#ffb765 100%);
  background-size:190% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent!important;
  animation:hdTitleReveal .9s .32s cubic-bezier(.15,.8,.2,1) both,hdTitleShimmer 7s 1.5s ease-in-out infinite;
}
.hd-settings-btn{
  background:linear-gradient(145deg,rgba(33,57,92,.92),rgba(18,33,56,.92))!important;
  box-shadow:0 12px 30px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.06)!important;
  transition:transform .18s ease,box-shadow .18s ease!important;
}
.hd-settings-btn:active{transform:scale(.94)!important}

/* Main position/weather card */
#accueil-statut{
  position:relative;overflow:hidden;
  border:1px solid rgba(102,159,231,.18)!important;
  background:
    linear-gradient(135deg,rgba(31,60,108,.95),rgba(23,43,77,.96) 62%,rgba(25,55,93,.96))!important;
  box-shadow:0 17px 38px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.045)!important;
}
#accueil-statut::before{
  content:"";
  position:absolute;inset:-65% 45% -65% -40%;
  background:linear-gradient(110deg,transparent 32%,rgba(116,189,255,.1),transparent 68%);
  transform:translateX(-35%);
  animation:hdCardSweep 8s 1s ease-in-out infinite;
  pointer-events:none;
}
.accueil-meteo-item b{letter-spacing:-.35px}
.hd-home-card{
  border:1px solid rgba(111,153,211,.2)!important;
  background:linear-gradient(145deg,rgba(24,40,67,.94),rgba(20,35,59,.96))!important;
  box-shadow:0 9px 24px rgba(0,0,0,.13),inset 0 1px rgba(255,255,255,.035)!important;
  transition:transform .18s ease,border-color .18s ease,background .18s ease!important;
}
.hd-home-card:active{
  transform:scale(.975);
  border-color:rgba(99,177,255,.45)!important;
}
.hd-icon-badge{
  background:linear-gradient(145deg,rgba(39,97,171,.25),rgba(40,73,124,.18))!important;
  border:1px solid rgba(78,144,228,.08);
}
.hd-home-card svg{filter:drop-shadow(0 4px 8px rgba(23,125,255,.15))}

/* Risk + CODIS gain subtle depth */
.accueil-risque{
  background:linear-gradient(145deg,rgba(25,39,62,.97),rgba(18,32,54,.97))!important;
}
.hd-codis-action{
  background:linear-gradient(105deg,#a9202a,#cf303b 72%,#c52e36)!important;
  box-shadow:0 15px 32px rgba(180,31,43,.17)!important;
}

/* ---------- Navigation principale ---------- */
#tab-bar{
  overflow:visible!important;
  background:
    linear-gradient(180deg,rgba(19,38,69,.985),rgba(8,20,39,.995))!important;
  border-top:1px solid rgba(111,163,231,.18)!important;
  box-shadow:0 -14px 36px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.025)!important;
}
#tab-bar::before{
  content:"";
  position:absolute;left:0;right:0;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(81,167,255,.5),rgba(255,161,69,.35),transparent);
  opacity:.72;
}
.tab-item{
  position:relative!important;
  overflow:hidden;
  transition:color .24s ease,transform .22s cubic-bezier(.2,.8,.2,1),background .25s ease!important;
}
.tab-item::before{
  content:"";
  position:absolute;
  width:42px;height:42px;left:50%;top:5px;
  transform:translateX(-50%) scale(.65);
  border-radius:15px;
  background:radial-gradient(circle,rgba(61,162,255,.22),transparent 70%);
  opacity:0;
  transition:opacity .25s ease,transform .28s cubic-bezier(.15,.8,.2,1);
}
.tab-item.actif::before{opacity:1;transform:translateX(-50%) scale(1)}
.tab-item.actif{
  background:
    radial-gradient(circle at 50% -10%,rgba(54,150,255,.26),transparent 63%),
    linear-gradient(120deg,rgba(29,89,157,.23),rgba(255,151,59,.08))!important;
  color:#fff!important;
}
.tab-item.actif::after{
  content:"";
  position:absolute;left:26%;right:26%;top:0;height:3px;
  border-radius:0 0 5px 5px;
  background:linear-gradient(90deg,#4dacff,#83d1ff,#ffad61);
  box-shadow:0 0 14px rgba(74,169,255,.7);
}
.tab-item.actif svg{filter:drop-shadow(0 0 7px rgba(80,172,255,.34));transform:translateY(-1px)}
.tab-item:active{transform:scale(.96)}

.tab-item[data-tab="accueil"].actif{
  background:linear-gradient(135deg,rgba(33,83,145,.62),rgba(20,48,88,.78) 64%,rgba(255,155,67,.15))!important;
}
.tab-item[data-tab="carte"].actif{
  background:linear-gradient(145deg,rgba(18,83,154,.78),rgba(26,113,189,.72))!important;
}
.tab-item[data-tab="surface"].actif{
  background:linear-gradient(145deg,rgba(18,66,105,.82),rgba(19,117,122,.65))!important;
}
.tab-item[data-tab="meteo"].actif{
  background:linear-gradient(135deg,rgba(24,48,91,.88),rgba(50,80,122,.72) 60%,rgba(224,132,63,.32))!important;
}
.tab-item[data-tab="surface"].actif::after{background:linear-gradient(90deg,#61c8ff,#6ce0c7)!important}
.tab-item[data-tab="meteo"].actif::after{background:linear-gradient(90deg,#77c6ff,#ffad61)!important}
.tab-item[data-tab="accueil"].actif::after{background:linear-gradient(90deg,#6ebcff,#ffad61)!important}

/* ---------- Panels / referentiel ---------- */
.panel-header{
  background:linear-gradient(180deg,rgba(22,39,67,.98),rgba(17,31,53,.96))!important;
  border-bottom:1px solid rgba(103,157,226,.16)!important;
}
.hd-ref-tabs{
  padding:5px!important;
  border-radius:14px!important;
  background:#0d192b!important;
  border:1px solid rgba(104,151,211,.15)!important;
}
.hd-ref-tabs button{
  border-radius:10px!important;
  transition:background .2s ease,color .2s ease,transform .16s ease!important;
}
.hd-ref-tabs button.active{
  background:linear-gradient(135deg,#1e70bf,#27599a)!important;
  box-shadow:0 6px 16px rgba(22,103,194,.22)!important;
}
.hd-ref-tabs button:active{transform:scale(.98)}

/* ---------- Layer health & toggle status ---------- */
.hd-layer-health{
  display:flex;align-items:center;gap:8px;cursor:pointer;
  margin:8px 0 14px;padding:8px 10px;border-radius:11px;
  background:rgba(31,52,82,.65);border:1px solid rgba(107,159,222,.12);
  color:#9eb1ca;font-size:10px;
}
.hd-layer-health-dot{
  width:8px;height:8px;border-radius:50%;background:#f0aa42;
  box-shadow:0 0 0 4px rgba(240,170,66,.1);
}
.hd-layer-health.ready .hd-layer-health-dot{background:#54c88b;box-shadow:0 0 0 4px rgba(84,200,139,.11)}
.hd-layer-health.error .hd-layer-health-dot{background:#ef5b62;box-shadow:0 0 0 4px rgba(239,91,98,.11)}
.toggle[data-layer-state="loading"]::after,
.toggle[data-layer-state="ready"]::after,
.toggle[data-layer-state="error"]::after{
  content:"";
  width:6px;height:6px;border-radius:50%;margin-left:auto;flex:0 0 auto;
}
.toggle[data-layer-state="loading"]::after{background:#f0aa42;animation:hdMiniPulse 1s ease infinite}
.toggle[data-layer-state="ready"]::after{background:#58c98a}
.toggle[data-layer-state="error"]::after{background:#ef5b62}

/* ---------- Map controls ---------- */
#maplibre-map .hd-quick-toggle,
#maplibre-map .hd-quick-action{
  box-shadow:0 9px 24px rgba(4,13,27,.24)!important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
#maplibre-map .hd-quick-control.open .hd-quick-actions{
  animation:hdQuickOpen .25s cubic-bezier(.2,.8,.2,1) both;
}

/* ---------- Global polish ---------- */
button{-webkit-tap-highlight-color:transparent}
@keyframes hdBootRotate{to{transform:rotate(360deg)}}
@keyframes hdBootFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes hdBootRoute{to{stroke-dashoffset:0}}
@keyframes hdBootPulse{0%,100%{transform:scale(.92);opacity:.75}50%{transform:scale(1.13);opacity:1}}
@keyframes hdBootCompass{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(10deg)}}
@keyframes hdHomeOrbA{to{transform:translate(14vw,9vh) scale(1.12)}}
@keyframes hdHomeOrbB{to{transform:translate(-11vw,-6vh) scale(.9)}}
@keyframes hdHomeReveal{from{opacity:0;transform:translateY(-7px);letter-spacing:4px}to{opacity:1;transform:none}}
@keyframes hdTitleReveal{from{opacity:0;transform:translateY(16px) scale(.97);filter:blur(7px)}to{opacity:1;transform:none;filter:none}}
@keyframes hdTitleShimmer{0%,60%,100%{background-position:0% 50%}78%{background-position:100% 50%}}
@keyframes hdCardSweep{0%,67%,100%{transform:translateX(-35%);opacity:0}76%{opacity:1}88%{transform:translateX(155%);opacity:0}}
@keyframes hdMiniPulse{50%{opacity:.25;transform:scale(.72)}}
@keyframes hdQuickOpen{from{opacity:0;transform:translateY(10px) scale(.95)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  #hd-boot::before,.hd-boot-mark,.hd-boot-route,.hd-boot-target,.hd-boot-compass,
  #ecran-accueil::before,#ecran-accueil::after,.hd-home-eyebrow,.hd-home-top h1,
  #accueil-statut::before,.toggle[data-layer-state="loading"]::after{
    animation:none!important;
  }
}

/* ---------- Weather & reference premium surfaces ---------- */
#meteo-panel,
#doctrine-panel,
#glossaire-panel,
#layers-panel,
#parametres-panel,
#legende-panel{
  background:linear-gradient(165deg,#0b1526 0%,#0d182a 58%,#091321 100%)!important;
}
.meteo-case,
.meteo-jour-carte,
.meteo-jour-detail,
.hd-sun-card,
.glossaire-terme,
.doctrine-section,
.doctrine-resultat-doc{
  border-color:rgba(113,162,225,.14)!important;
  box-shadow:0 9px 25px rgba(0,0,0,.10),inset 0 1px rgba(255,255,255,.025)!important;
}
.meteo-case,
.meteo-jour-carte,
.meteo-jour-detail,
.hd-sun-card{
  background:linear-gradient(145deg,rgba(31,52,85,.88),rgba(25,43,72,.92))!important;
}
.meteo-jour-carte[open],
.meteo-jour-detail[open]{
  border-color:rgba(95,173,255,.34)!important;
  box-shadow:0 14px 34px rgba(0,0,0,.17),0 0 0 1px rgba(66,152,255,.08)!important;
}
#meteo-panel .panel-header{
  box-shadow:0 10px 24px rgba(0,0,0,.12)!important;
}
.glossaire-terme{
  background:linear-gradient(145deg,rgba(27,46,76,.92),rgba(20,36,61,.95))!important;
  border-radius:14px!important;
}
.doctrine-onglets{
  scrollbar-width:none;
}
.doctrine-onglets::-webkit-scrollbar{display:none}


/* ==========================================================================
   V0.34 — thème clair accueil + motion renforcé + météo premium
   ========================================================================== */

/* Titre : effet plus court, plus fréquent et mieux perceptible. */
.hd-home-top h1{
  animation:
    hdTitleReveal .58s .16s cubic-bezier(.12,.82,.18,1) both,
    hdTitleShimmer 3.2s .75s ease-in-out infinite!important;
  background-size:230% 100%!important;
  filter:drop-shadow(0 5px 15px rgba(73,160,255,.18));
}
@keyframes hdTitleShimmer{
  0%,18%,100%{background-position:0% 50%;filter:drop-shadow(0 5px 15px rgba(73,160,255,.14))}
  45%{background-position:100% 50%;filter:drop-shadow(0 5px 22px rgba(87,178,255,.34))}
  70%{background-position:35% 50%}
}

/* -------- Accueil en vrai thème clair ------------------------------------ */
html[data-theme="light"] #ecran-accueil{
  background:
    radial-gradient(circle at 10% 10%,rgba(91,167,255,.18),transparent 34%),
    radial-gradient(circle at 88% 45%,rgba(255,170,91,.12),transparent 30%),
    linear-gradient(155deg,#f8fbff 0%,#eef4fb 52%,#f6f8fb 100%)!important;
  color:#182438!important;
}
html[data-theme="light"] #ecran-accueil::before{
  background:radial-gradient(circle,rgba(71,151,246,.16),rgba(71,151,246,.025) 53%,transparent 72%)!important;
}
html[data-theme="light"] #ecran-accueil::after{
  background:radial-gradient(circle,rgba(255,158,73,.12),rgba(255,158,73,.02) 56%,transparent 73%)!important;
}
html[data-theme="light"] .hd-home-shell::before{
  opacity:.13!important;
  background:repeating-radial-gradient(ellipse at 35% 25%,transparent 0 17px,rgba(57,132,226,.16) 18px 19px,transparent 20px 31px)!important;
}
html[data-theme="light"] .hd-home-eyebrow{color:#59718f!important}
html[data-theme="light"] .hd-home-top h1{
  background:linear-gradient(94deg,#123a68 0%,#157ed4 42%,#4ca8ed 64%,#e9873e 100%)!important;
  background-size:230% 100%!important;
  -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;
}
html[data-theme="light"] .hd-settings-btn{
  background:rgba(255,255,255,.8)!important;
  color:#274462!important;
  border-color:rgba(79,119,167,.24)!important;
  box-shadow:0 10px 28px rgba(57,83,113,.12),inset 0 1px #fff!important;
}
html[data-theme="light"] #accueil-statut{
  color:#17243a!important;
  border-color:rgba(69,119,183,.17)!important;
  background:
    linear-gradient(135deg,rgba(235,244,255,.98),rgba(222,235,252,.98) 64%,rgba(235,243,253,.98))!important;
  box-shadow:0 16px 32px rgba(52,78,110,.13),inset 0 1px #fff!important;
}
html[data-theme="light"] #accueil-statut::before{
  background:linear-gradient(110deg,transparent 32%,rgba(255,255,255,.58),transparent 68%)!important;
}
html[data-theme="light"] #accueil-code,
html[data-theme="light"] #accueil-commune,
html[data-theme="light"] .accueil-meteo-item b{color:#182b45!important}
html[data-theme="light"] #accueil-coords,
html[data-theme="light"] .accueil-meteo-item span{color:#63748a!important}
html[data-theme="light"] .hd-home-card{
  color:#17243a!important;
  border-color:rgba(76,117,166,.18)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(240,246,253,.97))!important;
  box-shadow:0 10px 24px rgba(55,77,104,.105),inset 0 1px #fff!important;
}
html[data-theme="light"] .hd-home-card-copy b{color:#245b91!important}
html[data-theme="light"] .hd-home-card-copy small{color:#64768d!important}
html[data-theme="light"] .hd-icon-badge{
  background:linear-gradient(145deg,#edf5ff,#e1edfb)!important;
  border-color:rgba(43,118,199,.1)!important;
}
html[data-theme="light"] .accueil-risque{
  color:#182438!important;
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(244,248,253,.98))!important;
  border-color:rgba(78,118,166,.2)!important;
  box-shadow:0 12px 28px rgba(72,90,115,.11),0 8px 22px rgba(220,74,56,.09)!important;
}
html[data-theme="light"] .accueil-risque b{color:#24344b!important}
html[data-theme="light"] .accueil-risque small{color:#68788d!important}
html[data-theme="light"] .hd-home-memo{
  background:rgba(255,255,255,.96)!important;
  color:#26374c!important;
  border-color:rgba(83,116,158,.17)!important;
  box-shadow:0 10px 28px rgba(56,75,99,.1)!important;
}
html[data-theme="light"] .hd-home-memo-title{color:#4d6178!important}
html[data-theme="light"] .accueil-memo-radio{
  background:#eef3f9!important;
  border-color:#dce4ee!important;
  color:#4d5e73!important;
}

/* Auto = clair lorsque le système est clair. */
@media (prefers-color-scheme: light) and (min-width: 99999px){
  html[data-theme="auto"] #ecran-accueil{
    background:
      radial-gradient(circle at 10% 10%,rgba(91,167,255,.18),transparent 34%),
      radial-gradient(circle at 88% 45%,rgba(255,170,91,.12),transparent 30%),
      linear-gradient(155deg,#f8fbff 0%,#eef4fb 52%,#f6f8fb 100%)!important;
    color:#182438!important;
  }
  html[data-theme="auto"] #ecran-accueil::before{
    background:radial-gradient(circle,rgba(71,151,246,.16),rgba(71,151,246,.025) 53%,transparent 72%)!important;
  }
  html[data-theme="auto"] #ecran-accueil::after{
    background:radial-gradient(circle,rgba(255,158,73,.12),rgba(255,158,73,.02) 56%,transparent 73%)!important;
  }
  html[data-theme="auto"] .hd-home-shell::before{opacity:.13!important}
  html[data-theme="auto"] .hd-home-eyebrow{color:#59718f!important}
  html[data-theme="auto"] .hd-home-top h1{
    background:linear-gradient(94deg,#123a68 0%,#157ed4 42%,#4ca8ed 64%,#e9873e 100%)!important;
    background-size:230% 100%!important;
    -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;
  }
  html[data-theme="auto"] .hd-settings-btn{
    background:rgba(255,255,255,.8)!important;color:#274462!important;
    border-color:rgba(79,119,167,.24)!important;
  }
  html[data-theme="auto"] #accueil-statut{
    color:#17243a!important;
    border-color:rgba(69,119,183,.17)!important;
    background:linear-gradient(135deg,rgba(235,244,255,.98),rgba(222,235,252,.98) 64%,rgba(235,243,253,.98))!important;
    box-shadow:0 16px 32px rgba(52,78,110,.13),inset 0 1px #fff!important;
  }
  html[data-theme="auto"] #accueil-code,
  html[data-theme="auto"] #accueil-commune,
  html[data-theme="auto"] .accueil-meteo-item b{color:#182b45!important}
  html[data-theme="auto"] #accueil-coords,
  html[data-theme="auto"] .accueil-meteo-item span{color:#63748a!important}
  html[data-theme="auto"] .hd-home-card{
    color:#17243a!important;
    border-color:rgba(76,117,166,.18)!important;
    background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(240,246,253,.97))!important;
    box-shadow:0 10px 24px rgba(55,77,104,.105),inset 0 1px #fff!important;
  }
  html[data-theme="auto"] .hd-home-card-copy b{color:#245b91!important}
  html[data-theme="auto"] .hd-home-card-copy small{color:#64768d!important}
  html[data-theme="auto"] .hd-icon-badge{background:linear-gradient(145deg,#edf5ff,#e1edfb)!important}
  html[data-theme="auto"] .accueil-risque{
    color:#182438!important;
    background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(244,248,253,.98))!important;
    border-color:rgba(78,118,166,.2)!important;
  }
  html[data-theme="auto"] .accueil-risque b{color:#24344b!important}
  html[data-theme="auto"] .accueil-risque small{color:#68788d!important}
  html[data-theme="auto"] .hd-home-memo{
    background:rgba(255,255,255,.96)!important;color:#26374c!important;
    border-color:rgba(83,116,158,.17)!important;
  }
}

/* -------- Météo : scènes plus grandes, douces et volumétriques ----------- */
.meteo-entete{
  min-height:112px!important;
  align-items:center!important;
  gap:16px!important;
}
.meteo-icone-anim{
  width:104px!important;
  height:104px!important;
  transform:none!important;
  margin:-8px 2px -8px -3px;
  overflow:visible!important;
}
.meteo-temp{font-size:32px!important;letter-spacing:-1px}
.meteo-ciel{font-size:13px!important;margin-top:3px}

.wx-scene{
  position:relative;
  width:100%;height:100%;
  overflow:visible;
  filter:drop-shadow(0 9px 13px rgba(4,20,40,.18));
}
.wx-sun{
  position:absolute;
  width:72%;height:72%;
  left:14%;top:12%;
  animation:wxSunFloat 4.6s ease-in-out infinite;
}
.wx-sun-small{width:57%;height:57%;left:5%;top:2%}
.wx-sun-core{
  position:absolute;inset:24%;
  border-radius:50%;
  background:radial-gradient(circle at 35% 32%,#fff8b4 0 8%,#ffd653 28%,#ffad32 68%,#f98a22 100%);
  box-shadow:
    0 0 12px rgba(255,193,60,.68),
    0 0 28px rgba(255,166,34,.34),
    inset -4px -5px 9px rgba(225,106,18,.16);
  z-index:2;
}
.wx-sun-rays{
  position:absolute;inset:7%;
  border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(255,190,54,.0) 0 7deg,rgba(255,190,54,.72) 8deg 10deg,rgba(255,190,54,0) 11deg 22deg);
  mask:radial-gradient(circle,transparent 0 48%,#000 50% 68%,transparent 70%);
  animation:wxRotate 14s linear infinite;
  opacity:.78;
}
.wx-sun-glow{
  position:absolute;inset:9%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,198,70,.35),rgba(255,173,49,.12) 48%,transparent 72%);
  animation:wxGlow 3.2s ease-in-out infinite;
}
.wx-cloud{
  position:absolute;
  left:12%;bottom:24%;
  width:75%;height:34%;
  border-radius:42px;
  background:linear-gradient(180deg,#fbfdff 0%,#e4edf7 67%,#cad8e8 100%);
  box-shadow:
    inset 0 5px 10px rgba(255,255,255,.65),
    inset 0 -5px 9px rgba(110,137,169,.12),
    0 8px 13px rgba(39,65,93,.17);
  animation:wxCloudFloat 5.2s ease-in-out infinite;
  z-index:4;
}
.wx-cloud i{position:absolute;display:block;border-radius:50%;background:inherit}
.wx-cloud-a{width:46%;height:118%;left:12%;top:-58%}
.wx-cloud-b{width:38%;height:102%;left:43%;top:-43%}
.wx-cloud-c{width:29%;height:76%;right:5%;top:-21%}
.wx-cloud-back{
  transform:scale(.72);left:1%;bottom:43%;opacity:.63;
  filter:brightness(.94);animation-delay:-2s;
}
.wx-cloud-front{bottom:18%}
.wx-cloud-rain,.wx-cloud-snow{bottom:44%}
.wx-cloud-storm{
  bottom:45%;
  background:linear-gradient(180deg,#9aabc0,#657991 70%,#50657d)!important;
  box-shadow:inset 0 4px 8px rgba(255,255,255,.16),0 8px 14px rgba(18,31,49,.25)!important;
}
.wx-cloud-storm i{background:inherit!important}
.wx-cloud-fog{bottom:50%;opacity:.92}
.wx-rain-drops,.wx-snowflakes{
  position:absolute;left:17%;right:12%;top:58%;height:42%;z-index:2;
}
.wx-rain-drops i{
  position:absolute;top:0;width:3px;height:15px;border-radius:5px;
  background:linear-gradient(#77c9ff,#238ce3);
  transform:rotate(9deg);
  animation:wxRain 1.15s linear infinite;
  box-shadow:0 3px 5px rgba(38,145,226,.15);
}
.wx-rain-drops i:nth-child(1){left:7%;animation-delay:-.15s}
.wx-rain-drops i:nth-child(2){left:28%;animation-delay:-.72s}
.wx-rain-drops i:nth-child(3){left:50%;animation-delay:-.34s}
.wx-rain-drops i:nth-child(4){left:70%;animation-delay:-.92s}
.wx-rain-drops i:nth-child(5){left:88%;animation-delay:-.52s}
.wx-rain-drops-storm{top:64%;left:25%;right:20%}
.wx-snowflakes i{
  position:absolute;top:0;color:#eaf7ff;font-size:13px;font-style:normal;
  text-shadow:0 0 6px #fff;
  animation:wxSnow 2.4s ease-in-out infinite;
}
.wx-snowflakes i:nth-child(1){left:8%;animation-delay:-.4s}
.wx-snowflakes i:nth-child(2){left:36%;animation-delay:-1.3s}
.wx-snowflakes i:nth-child(3){left:62%;animation-delay:-.8s}
.wx-snowflakes i:nth-child(4){left:86%;animation-delay:-1.9s}
.wx-lightning{
  position:absolute;z-index:7;left:43%;top:54%;width:24%;height:40%;
  animation:wxLightningFlash 3s ease-in-out infinite;
}
.wx-lightning i{
  display:block;width:100%;height:100%;
  background:linear-gradient(165deg,#fff9a9,#ffd633 60%,#ffb420);
  clip-path:polygon(52% 0,100% 0,66% 40%,91% 40%,22% 100%,39% 55%,8% 55%);
  filter:drop-shadow(0 0 7px rgba(255,219,64,.7));
}
.wx-fog-lines{
  position:absolute;left:10%;right:8%;top:54%;height:40%;z-index:5;
}
.wx-fog-lines i{
  position:absolute;height:5px;border-radius:8px;
  background:linear-gradient(90deg,transparent,#aabacb 20%,#d7e0e9 68%,transparent);
  animation:wxFog 4s ease-in-out infinite;
}
.wx-fog-lines i:nth-child(1){top:2%;left:0;width:88%}
.wx-fog-lines i:nth-child(2){top:31%;left:17%;width:75%;animation-delay:-1.6s}
.wx-fog-lines i:nth-child(3){top:61%;left:3%;width:82%;animation-delay:-2.7s}
.wx-wind-lines{position:absolute;inset:20% 4%}
.wx-wind-lines i{
  position:absolute;left:0;height:5px;border-radius:6px;
  background:linear-gradient(90deg,transparent,#83b9df 20%,#d2e9f8 68%,transparent);
  animation:wxWind 2.6s ease-in-out infinite;
}
.wx-wind-lines i:nth-child(1){top:15%;width:82%}
.wx-wind-lines i:nth-child(2){top:45%;width:62%;left:18%;animation-delay:-.8s}
.wx-wind-lines i:nth-child(3){top:74%;width:90%;animation-delay:-1.5s}

/* Prévisions : pictos plus généreux mais cartes encore compactes. */
.meteo-jour-carte{min-width:82px!important;padding:11px 9px 12px!important}
.meteo-jour-icone-boite{width:50px!important;height:50px!important;margin:2px auto 5px!important}
.meteo-jour-icone{
  width:76px!important;height:76px!important;
  transform:translate(-50%,-50%) scale(.64)!important;
}
.meteo-jour-nom{font-size:11px!important}
.meteo-jour-temps{font-size:14px!important}

/* Scènes météo de l'accueil un peu plus présentes sans agrandir la carte. */
#accueil-meteo-anim .wx-scene{
  transform:scale(1.04);
  transform-origin:center;
}

@keyframes wxSunFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.025)}}
@keyframes wxRotate{to{transform:rotate(360deg)}}
@keyframes wxGlow{0%,100%{transform:scale(.92);opacity:.45}50%{transform:scale(1.12);opacity:.9}}
@keyframes wxCloudFloat{0%,100%{transform:translateX(-1.5px) translateY(1px)}50%{transform:translateX(2px) translateY(-2px)}}
@keyframes wxRain{0%{transform:translateY(-5px) rotate(9deg);opacity:0}18%{opacity:1}100%{transform:translateY(34px) rotate(9deg);opacity:0}}
@keyframes wxSnow{0%{transform:translate(0,-5px) rotate(0);opacity:0}18%{opacity:1}55%{transform:translate(5px,14px) rotate(80deg)}100%{transform:translate(-3px,33px) rotate(160deg);opacity:0}}
@keyframes wxLightningFlash{0%,76%,100%{opacity:0;transform:scale(.94)}78%,82%{opacity:1;transform:scale(1.05)}84%{opacity:.1}87%{opacity:1}90%{opacity:0}}
@keyframes wxFog{0%,100%{transform:translateX(-5px);opacity:.38}50%{transform:translateX(8px);opacity:.9}}
@keyframes wxWind{0%{transform:translateX(-15px);opacity:.1}45%{opacity:.9}100%{transform:translateX(15px);opacity:.1}}

@media(prefers-reduced-motion:reduce){
  .wx-sun,.wx-sun-rays,.wx-sun-glow,.wx-cloud,.wx-rain-drops i,
  .wx-snowflakes i,.wx-lightning,.wx-fog-lines i,.wx-wind-lines i{
    animation:none!important;
  }
}

/* ==========================================================================
   V0.35 — Dock opérationnel 3D
   ========================================================================== */
:root{
  --hd-footer-h:72px;
  --hd-footer-content-h:72px;
}

#tab-bar,
html.hd-standalone #tab-bar{
  --hd-dock-index:0;
  position:fixed!important;
  left:10px!important;
  right:10px!important;
  bottom:max(8px,env(safe-area-inset-bottom,0px))!important;
  width:auto!important;
  height:72px!important;
  min-height:72px!important;
  padding:0!important;
  margin:0!important;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  align-items:stretch!important;
  border:1px solid rgba(124,173,231,.19)!important;
  border-radius:23px!important;
  overflow:visible!important;
  isolation:isolate;
  background:
    linear-gradient(180deg,rgba(20,41,73,.97),rgba(10,24,45,.985) 72%,rgba(7,18,35,.99))!important;
  box-shadow:
    0 17px 35px rgba(0,0,0,.30),
    0 -7px 28px rgba(29,103,188,.08),
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -12px 26px rgba(0,0,0,.14)!important;
  -webkit-backdrop-filter:blur(22px)!important;
  backdrop-filter:blur(22px)!important;
  transform:none!important;
}
#tab-bar::before,
.tab-item::before,
.tab-item::after{content:none!important}
.tab-item[data-tab].actif{background:transparent!important}

/* Relief global du dock */
#tab-bar::after{
  content:"";
  position:absolute;
  z-index:-2;
  inset:7px 15px;
  border-radius:18px;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.025),transparent 30% 74%,rgba(0,0,0,.14));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),inset 0 -1px 0 rgba(0,0,0,.25);
}

/* Halo unique commun aux 4 onglets */
.hd-dock-energy{
  position:absolute;
  z-index:-1;
  left:0;top:-8px;
  width:25%;height:84px;
  pointer-events:none;
  transform:translateX(calc(var(--hd-dock-index) * 100%));
  transition:transform .34s cubic-bezier(.2,.88,.2,1);
}
.hd-dock-energy::before{
  content:"";
  position:absolute;
  left:50%;top:2px;
  width:72px;height:61px;
  transform:translateX(-50%);
  border-radius:24px;
  background:radial-gradient(circle at 48% 35%,rgba(111,194,255,.35),rgba(42,134,233,.18) 38%,rgba(35,91,171,.055) 61%,transparent 74%);
  box-shadow:0 0 27px rgba(61,151,247,.12),inset 0 1px rgba(255,255,255,.05);
  animation:hdDockBreath 3.8s ease-in-out infinite;
}
.hd-dock-energy::after{
  content:"";
  position:absolute;
  left:50%;bottom:5px;
  width:46px;height:3px;
  transform:translateX(-50%);
  border-radius:99px;
  background:linear-gradient(90deg,transparent,#59b0ff 16%,#a0d9ff 51%,#ffac60 87%,transparent);
  box-shadow:0 0 12px rgba(72,166,255,.62),0 0 19px rgba(255,156,73,.18);
}
.hd-dock-energy i{
  position:absolute;
  left:20%;right:20%;top:1px;height:1px;overflow:hidden;
}
.hd-dock-energy i::after{
  content:"";
  position:absolute;top:0;bottom:0;width:38%;
  background:linear-gradient(90deg,transparent,#9bd8ff,transparent);
  animation:hdDockScan 2.8s ease-in-out infinite;
}

/* Boutons sans rectangles */
#tab-bar .tab-item,
html.hd-standalone #tab-bar .tab-item{
  position:relative!important;
  z-index:2;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:2px!important;
  width:auto!important;
  min-width:0!important;
  height:72px!important;
  min-height:72px!important;
  padding:4px 1px 5px!important;
  border:0!important;
  border-radius:19px!important;
  overflow:visible!important;
  background:transparent!important;
  color:rgba(180,194,214,.62)!important;
  box-shadow:none!important;
  transition:color .24s ease,transform .25s cubic-bezier(.2,.82,.2,1),filter .24s ease!important;
}
#tab-bar .tab-item:active{transform:translateY(2px) scale(.94)!important}
#tab-bar .tab-item.actif{
  color:#f8fbff!important;
  transform:translateY(-5px)!important;
}
#tab-bar .tab-item.actif:active{transform:translateY(-2px) scale(.95)!important}

.hd-tab-icon{
  position:relative;
  width:43px;height:43px;
  display:grid;place-items:center;
  border-radius:16px;
  transition:transform .28s cubic-bezier(.2,.9,.2,1),filter .28s ease,background .28s ease,box-shadow .28s ease;
}
.tab-item.actif .hd-tab-icon{
  transform:perspective(90px) rotateX(-5deg) translateY(-1px) scale(1.10);
  background:linear-gradient(145deg,rgba(104,184,255,.13),rgba(51,107,182,.052) 58%,rgba(255,158,71,.035));
  box-shadow:0 9px 18px rgba(1,12,28,.24),inset 0 1px 0 rgba(255,255,255,.075),inset 0 -5px 9px rgba(7,23,47,.12);
  filter:drop-shadow(0 0 9px rgba(71,169,255,.16));
}
.hd-tab-icon::after{
  content:"";
  position:absolute;z-index:-1;
  left:8px;right:8px;bottom:0;height:7px;
  border-radius:50%;
  background:rgba(1,8,19,.38);
  filter:blur(5px);opacity:.18;
  transition:opacity .25s,transform .25s;
}
.tab-item.actif .hd-tab-icon::after{opacity:.72;transform:translateY(6px) scaleX(.94)}

.hd-tab-icon svg{
  width:35px!important;height:35px!important;
  overflow:visible;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.72!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  transform:none!important;
  transition:transform .3s cubic-bezier(.2,.9,.2,1),filter .25s ease!important;
}
.tab-item:not(.actif) .hd-tab-icon svg{filter:saturate(.55)}
.tab-item.actif .hd-tab-icon svg{
  filter:drop-shadow(0 0 5px rgba(107,191,255,.42)) drop-shadow(0 3px 4px rgba(0,0,0,.22))!important;
}
.hd-icon-accent,.hd-icon-node,.hd-icon-spark,.hd-weather-sun-ring{stroke:#71bcff!important}
.hd-icon-area{fill:rgba(93,178,255,.07)!important;stroke:none!important}
.hd-icon-spark,.hd-icon-node{fill:#8bd0ff!important}
.hd-tab-label{
  position:relative;
  font-size:10.5px!important;
  line-height:1!important;
  font-weight:670!important;
  letter-spacing:.12px!important;
  color:inherit!important;
  transition:transform .25s ease,text-shadow .25s ease,color .25s ease;
}
.tab-item.actif .hd-tab-label{
  transform:translateY(-1px);
  text-shadow:0 2px 9px rgba(75,164,255,.28);
}

/* Micro-animations propres aux pictos */
.tab-item.actif .hd-icon-home .hd-icon-spark{animation:hdHomeSpark 1.8s ease-in-out infinite}
.tab-item.actif .hd-icon-map .hd-map-left{animation:hdMapFoldL .42s cubic-bezier(.2,.9,.2,1)}
.tab-item.actif .hd-icon-map .hd-map-right{animation:hdMapFoldR .42s cubic-bezier(.2,.9,.2,1)}
.tab-item.actif .hd-icon-map .hd-icon-spark{animation:hdPinPulse 1.9s ease-in-out infinite}
.tab-item.actif .hd-icon-surface .hd-icon-node{animation:hdNodePulse 2s ease-in-out infinite}
.tab-item.actif .hd-icon-surface .node-b{animation-delay:-.45s}
.tab-item.actif .hd-icon-surface .node-c{animation-delay:-.9s}
.tab-item.actif .hd-icon-surface .node-d{animation-delay:-1.35s}
.tab-item.actif .hd-icon-weather .hd-weather-sun-ring{animation:hdWeatherSun 2.7s ease-in-out infinite;transform-origin:22.4px 9.1px}
.tab-item.actif .hd-icon-weather .hd-weather-cloud{animation:hdWeatherCloud 3.2s ease-in-out infinite}

/* Mode clair : même design, matériau plus clair, pas 4 couleurs différentes */
html[data-theme="light"] #tab-bar,
html.hd-standalone[data-theme="light"] #tab-bar{
  background:linear-gradient(180deg,rgba(247,251,255,.96),rgba(225,235,247,.98))!important;
  border-color:rgba(68,111,163,.18)!important;
  box-shadow:0 16px 34px rgba(48,70,97,.18),0 -5px 24px rgba(43,128,221,.08),inset 0 1px #fff!important;
}
html[data-theme="light"] #tab-bar .tab-item{color:rgba(65,83,106,.53)!important}
html[data-theme="light"] #tab-bar .tab-item.actif{color:#163c69!important}
html[data-theme="light"] .hd-tab-icon::after{background:rgba(54,74,99,.23)}
html[data-theme="light"] .hd-dock-energy::before{
  background:radial-gradient(circle at 48% 35%,rgba(59,158,244,.22),rgba(49,127,220,.10) 40%,transparent 73%);
}

@media (prefers-color-scheme: light) and (min-width: 99999px){
  html[data-theme="auto"] #tab-bar{
    background:linear-gradient(180deg,rgba(247,251,255,.96),rgba(225,235,247,.98))!important;
    border-color:rgba(68,111,163,.18)!important;
    box-shadow:0 16px 34px rgba(48,70,97,.18),0 -5px 24px rgba(43,128,221,.08),inset 0 1px #fff!important;
  }
  html[data-theme="auto"] #tab-bar .tab-item{color:rgba(65,83,106,.53)!important}
  html[data-theme="auto"] #tab-bar .tab-item.actif{color:#163c69!important}
}

/* Les écrans s'arrêtent juste au-dessus du dock flottant */
#ecran-carte,#ecran-accueil{
  padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))!important;
}
#layers-panel,#doctrine-panel,#parametres-panel,#legende-panel,#glossaire-panel,
#info-journaliere-panel,#meteo-panel,#feux-liste-panel{
  bottom:calc(88px + env(safe-area-inset-bottom,0px))!important;
}

/* PWA : annule l'ancienne géométrie rectangulaire du footer */
html.hd-standalone #ecran-accueil,
html.hd-standalone #ecran-carte{
  bottom:calc(88px + env(safe-area-inset-bottom,0px))!important;
}
html.hd-standalone #tab-bar{
  padding:0!important;
  overflow:visible!important;
}

/* Barre itinéraire : reste juste au-dessus du nouveau dock */
html.hd-standalone #route-resume{
  bottom:10px!important;
}

@keyframes hdDockBreath{0%,100%{opacity:.72;transform:translateX(-50%) scale(.94)}50%{opacity:1;transform:translateX(-50%) scale(1.07)}}
@keyframes hdDockScan{0%{left:-30%;opacity:0}20%{opacity:.9}65%{opacity:.7}100%{left:110%;opacity:0}}
@keyframes hdHomeSpark{0%,100%{opacity:.45;transform:scale(.8)}50%{opacity:1;transform:scale(1.25)}}
@keyframes hdMapFoldL{0%{transform:skewY(7deg) translateX(1px)}100%{transform:none}}
@keyframes hdMapFoldR{0%{transform:skewY(-7deg) translateX(-1px)}100%{transform:none}}
@keyframes hdPinPulse{0%,100%{opacity:.55;transform:scale(.8)}50%{opacity:1;transform:scale(1.28)}}
@keyframes hdNodePulse{0%,100%{opacity:.55;transform:scale(.82)}50%{opacity:1;transform:scale(1.18)}}
@keyframes hdWeatherSun{0%,100%{transform:scale(.93);opacity:.76}50%{transform:scale(1.08);opacity:1}}
@keyframes hdWeatherCloud{0%,100%{transform:translateX(-.7px)}50%{transform:translateX(1.2px)}}

@media(prefers-reduced-motion:reduce){
  .hd-dock-energy::before,.hd-dock-energy i::after,
  .tab-item.actif .hd-icon-spark,.tab-item.actif .hd-icon-node,
  .tab-item.actif .hd-weather-sun-ring,.tab-item.actif .hd-weather-cloud{
    animation:none!important;
  }
}


/* ==========================================================================
   V0.36 — Commandes carte opérationnelles / inspiration ergonomique terrain
   ========================================================================== */
.hd-map-tools{
  position:absolute;
  z-index:520;
  right:12px;
  top:calc(74px + env(safe-area-inset-top,0px));
  width:54px;
  padding:5px 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  border-radius:20px;
  overflow:hidden;
  border:1px solid rgba(105,165,226,.22);
  background:linear-gradient(180deg,rgba(16,38,70,.97),rgba(7,24,48,.985));
  box-shadow:0 14px 30px rgba(2,12,28,.28),inset 0 1px rgba(255,255,255,.055);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
}
.hd-map-tool{
  position:relative!important;inset:auto!important;
  width:54px!important;height:53px!important;
  min-width:54px!important;min-height:53px!important;
  margin:0!important;padding:0!important;
  display:grid!important;place-items:center!important;
  border:0!important;border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;color:#e9f1fb!important;
  transition:background .2s ease,color .2s ease,transform .16s ease!important;
}
.hd-map-tool+ .hd-map-tool::before{
  content:"";position:absolute;left:13px;right:13px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(134,173,219,.18),transparent);
}
.hd-map-tool svg{width:27px!important;height:27px!important;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.hd-map-tool .fill{fill:currentColor!important;stroke:none!important}
.hd-map-tool:hover,.hd-map-tool:focus-visible{background:rgba(67,151,236,.09)!important}
.hd-map-tool:active{transform:scale(.91)!important}
.hd-map-tool.hd-tool-active,#btn-locate-me.hd-tool-active{color:#60c5ff!important;background:radial-gradient(circle,rgba(50,166,241,.16),transparent 72%)!important}

/* Neutralise les anciennes positions individuelles : ils vivent désormais dans la capsule. */
#btn-chercher-icone,#btn-locate-me,#btn-layers{position:relative!important;right:auto!important;top:auto!important;bottom:auto!important}

/* Recherche terrain */
.hd-search-modes{
  display:grid;grid-template-columns:repeat(3,1fr);gap:5px;
  margin:8px 12px 8px;padding:5px;
  border-radius:16px;
  background:rgba(4,18,38,.35);
  border:1px solid rgba(103,151,209,.11);
}
.hd-search-modes button{
  min-height:50px;padding:6px 3px;border:0;border-radius:12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:transparent;color:#8e9eb3;font:inherit;font-size:11px;font-weight:700;
  transition:.2s ease;
}
.hd-search-modes button span{font-size:20px;line-height:1;color:#6c819c}
.hd-search-modes button.active{
  color:#07182c;background:linear-gradient(145deg,#75d3ff,#49b6ee);
  box-shadow:0 8px 17px rgba(36,153,222,.24),inset 0 1px rgba(255,255,255,.45);
}
.hd-search-modes button.active span{color:#0a4162}

/* Sélecteur de fond : Plan / SCAN25 / Satellite */
.hd-basemap-block{margin:10px 0 14px}
.hd-basemap-title{
  margin:0 0 8px;font-size:11px;font-weight:800;letter-spacing:.8px;
  text-transform:uppercase;color:#91a6c2;
}
.hd-basemap-segment{
  display:grid;grid-template-columns:repeat(3,1fr);gap:7px;
}
.hd-basemap-segment button{
  min-width:0;min-height:72px;padding:8px 3px 7px;
  border-radius:14px;border:1px solid rgba(99,147,203,.13);
  background:linear-gradient(145deg,rgba(35,59,93,.75),rgba(19,39,69,.86));
  color:#9aabc1;font:inherit;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  box-shadow:inset 0 1px rgba(255,255,255,.025);
}
.hd-basemap-segment button.active{
  color:#f8fcff;border-color:rgba(91,190,255,.45);
  background:linear-gradient(145deg,rgba(36,123,199,.82),rgba(22,74,140,.92));
  box-shadow:0 8px 18px rgba(27,126,207,.18),inset 0 1px rgba(255,255,255,.12);
}
.hd-basemap-segment button[data-hd-basemap="scan25"].hd-basemap-locked{opacity:.72}
.hd-base-icon{font-size:22px;line-height:1;color:#62c5ff}
.hd-basemap-segment b{font-size:11px;white-space:nowrap}
.hd-basemap-segment small{font-size:8px;font-weight:650;color:#f2ad67}
.hd-basemap-note{
  margin-top:7px;padding:8px 10px;border-radius:10px;
  background:rgba(55,104,158,.09);color:#8194ad;font-size:10px;line-height:1.35;
}
.hd-legacy-basemap-toggle{display:none!important}

/* Le panneau des couches devient un panneau flottant, la carte reste visible. */
#layers-panel:not(.hidden){
  width:min(420px,calc(100vw - 28px))!important;
  max-height:min(72vh,620px)!important;
  left:auto!important;right:12px!important;
  top:calc(72px + env(safe-area-inset-top,0px))!important;
  bottom:auto!important;
  border-radius:22px!important;
  border:1px solid rgba(93,166,230,.22)!important;
  box-shadow:0 22px 48px rgba(1,10,24,.36)!important;
  overflow:auto!important;
}

/* Thème clair */
html[data-theme="light"] .hd-map-tools{
  background:linear-gradient(180deg,rgba(251,253,255,.97),rgba(231,240,250,.985));
  border-color:rgba(67,111,164,.19);box-shadow:0 14px 30px rgba(49,73,102,.16),inset 0 1px #fff;
}
html[data-theme="light"] .hd-map-tool{color:#38506c!important}
html[data-theme="light"] .hd-map-tool.hd-tool-active{color:#0879c7!important}
html[data-theme="light"] .hd-search-modes{background:#e9f1fa;border-color:#d9e5f1}
html[data-theme="light"] .hd-basemap-title{color:#52677f}
html[data-theme="light"] .hd-basemap-segment button{
  background:linear-gradient(145deg,#fff,#edf4fb);color:#52657c;border-color:#d7e3ef;
}
html[data-theme="light"] .hd-basemap-segment button.active{color:#fff;background:linear-gradient(145deg,#298ed6,#176ab7)}
html[data-theme="light"] .hd-basemap-note{background:#edf4fb;color:#61758c}

@media(max-width:430px){
  .hd-map-tools{right:9px;width:52px}
  .hd-map-tool{width:52px!important;height:51px!important;min-width:52px!important;min-height:51px!important}
  #layers-panel:not(.hidden){right:9px;width:calc(100vw - 18px)!important}
}


/* ==========================================================================
   V0.36 FIX1 — correction commandes carte / panneau couches
   ========================================================================== */

/* Les IDs historiques étaient masqués dans l'ancien CSS MapLibre.
   La capsule est désormais la SEULE présentation visible de ces relais. */
.hd-map-tools #btn-chercher-icone,
.hd-map-tools #btn-locate-me,
.hd-map-tools #btn-layers{
  display:grid!important;
  position:relative!important;
  inset:auto!important;
  right:auto!important;left:auto!important;top:auto!important;bottom:auto!important;
  opacity:1!important;visibility:visible!important;pointer-events:auto!important;
}

/* La capsule se place sous + / - / boussole, sans collision.
   IMPORTANT : top/right ne sont PAS !important ici — ce sont uniquement des
   valeurs de repli avant que map-tools-v038.js calcule la vraie position
   (alignTools()). Un !important sur top/right empêcherait JS de jamais
   pouvoir corriger la position réelle, ce qui était le bug d'alignement. */
.hd-map-tools{
  top:calc(138px + env(safe-area-inset-top,0px));
  right:12px;
  width:54px!important;
  z-index:1450!important;
}

/* Le bouton GPS MapLibre natif n'est jamais visible : un seul bouton localisation. */
#maplibre-map .hd-native-geolocate-helper{
  display:none!important;
}

/* Ancien menu rapide supprimé côté JS ; sécurité CSS au cas où un vieux cache
   conserverait encore un fragment du contrôle. */
#maplibre-map .hd-quick-control,
#maplibre-map .hd-quick-toggle,
#maplibre-map .hd-quick-actions{
  display:none!important;
}

/* Panneau Carte & couches : compact, flottant, jamais derrière le dock. */
#layers-panel:not(.hidden),
html.hd-standalone #layers-panel:not(.hidden){
  position:fixed!important;
  z-index:1600!important;
  left:12px!important;
  right:12px!important;
  top:auto!important;
  bottom:calc(96px + env(safe-area-inset-bottom,0px))!important;
  width:auto!important;
  height:auto!important;
  min-height:0!important;
  max-height:min(58dvh,520px)!important;
  padding-bottom:12px!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  border-radius:22px!important;
}

/* Header reste visible pendant le défilement du panneau. */
#layers-panel:not(.hidden) .panel-header{
  position:sticky!important;
  top:0!important;
  z-index:3!important;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

/* Backdrop très léger : la carte reste volontairement lisible. */
#panel-backdrop:not(.hidden){
  background:rgba(4,12,24,.12)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

/* Sur petits écrans, priorité à la carte : panneau encore un peu plus court. */
@media(max-height:760px){
  #layers-panel:not(.hidden),
  html.hd-standalone #layers-panel:not(.hidden){
    max-height:54dvh!important;
  }
}
@media(max-width:430px){
  .hd-map-tools{right:9px}
  #layers-panel:not(.hidden),
  html.hd-standalone #layers-panel:not(.hidden){
    left:9px!important;right:9px!important;
  }
}


/* ==========================================================================
   V0.36 FIX2 — alignement + recherche + panneau couches
   ========================================================================== */

/* La capsule est positionnée précisément en JS sur l'axe du contrôle +/−.
   Ces valeurs ne sont qu'un fallback avant le premier alignement — donc pas
   de !important sur top/right, sinon le calcul JS (alignTools) est ignoré. */
.hd-map-tools{
  width:48px!important;
  right:12px;
  top:calc(138px + env(safe-area-inset-top,0px));
  border-radius:17px!important;
  padding:3px 0!important;
}
.hd-map-tool{
  width:48px!important;height:47px!important;
  min-width:48px!important;min-height:47px!important;
}
.hd-map-tool svg{width:25px!important;height:25px!important}

/* RECHERCHE : panneau plus léger et réellement justifié avec la carte.
   Il laisse volontairement libre l'axe des commandes à droite. */
#topbar{
  left:10px!important;
  right:76px!important;
  top:max(10px,env(safe-area-inset-top,0px))!important;
  padding:8px!important;
  border-radius:19px!important;
  background:linear-gradient(155deg,rgba(16,34,59,.965),rgba(10,25,47,.975))!important;
  border:1px solid rgba(106,159,218,.18)!important;
  box-shadow:0 16px 32px rgba(1,11,26,.28),inset 0 1px rgba(255,255,255,.04)!important;
}
#topbar .hd-search-head{
  min-height:34px!important;
  padding:0 1px 5px 4px!important;
  display:flex!important;align-items:center!important;
}
#topbar .hd-search-head h1{
  font-size:14px!important;
  font-weight:760!important;
  letter-spacing:.15px!important;
}
#topbar h1:before{
  width:3px!important;height:17px!important;
  background:linear-gradient(#60c6ff,#4bd29c)!important;
  box-shadow:0 0 8px rgba(77,192,255,.32);
}
#btn-search-close{
  width:34px!important;height:34px!important;
  min-width:34px!important;border-radius:12px!important;
  background:rgba(67,100,145,.16)!important;
  border:0!important;
}

/* Tabs moins "gros bouton bleu", davantage barre segmentée premium. */
.hd-search-modes{
  margin:2px 0 7px!important;
  padding:3px!important;
  gap:3px!important;
  border-radius:13px!important;
  background:rgba(4,16,33,.46)!important;
  border:1px solid rgba(105,150,201,.09)!important;
}
.hd-search-modes button{
  min-height:39px!important;
  padding:5px 3px!important;
  gap:1px!important;
  border-radius:10px!important;
  font-size:10px!important;
  font-weight:700!important;
}
.hd-search-modes button span{
  font-size:15px!important;
  line-height:13px!important;
}
.hd-search-modes button.active{
  color:#eaf8ff!important;
  background:linear-gradient(145deg,rgba(37,126,199,.64),rgba(26,91,157,.68))!important;
  border:1px solid rgba(99,195,255,.23)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.08),0 5px 12px rgba(8,71,129,.16)!important;
}
.hd-search-modes button.active span{color:#73d0ff!important}

#search-row{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 42px!important;
  align-items:center!important;
  gap:6px!important;
  margin:0!important;
}
#search-field{
  min-height:44px!important;
  border-radius:13px!important;
  background:rgba(234,240,247,.97)!important;
  border:1px solid rgba(255,255,255,.6)!important;
  box-shadow:inset 0 1px 3px rgba(20,42,67,.07)!important;
}
#dfci-input{
  height:44px!important;
  min-height:44px!important;
  padding:0 12px!important;
  color:#24364c!important;
  font-size:13px!important;
  background:transparent!important;
}
#dfci-input::placeholder{color:#8390a1!important}
#btn-locate{
  width:42px!important;height:42px!important;
  min-width:42px!important;
  border-radius:12px!important;
  background:linear-gradient(145deg,#1e78bd,#155d9e)!important;
  color:#fff!important;
  border:1px solid rgba(102,190,255,.24)!important;
  box-shadow:0 6px 13px rgba(13,83,143,.19)!important;
}
#btn-locate svg{width:19px!important;height:19px!important}

/* CARTE & COUCHES : une vraie sheet compacte et hiérarchisée. */
#layers-panel:not(.hidden),
html.hd-standalone #layers-panel:not(.hidden){
  left:12px!important;right:12px!important;
  bottom:calc(96px + env(safe-area-inset-bottom,0px))!important;
  max-height:min(62dvh,560px)!important;
  padding:0 14px 13px!important;
  background:
    linear-gradient(165deg,rgba(9,26,51,.985),rgba(8,20,40,.99))!important;
  border:1px solid rgba(93,157,221,.18)!important;
}
#layers-panel .panel-header{
  margin:0 -14px 8px!important;
  padding:10px 14px 9px!important;
  min-height:48px!important;
  display:grid!important;
  grid-template-columns:auto 1fr auto!important;
  align-items:center!important;
  column-gap:8px!important;
}
#layers-panel .panel-header>span{
  font-size:17px!important;font-weight:780!important;letter-spacing:-.2px!important;
}
.hd-panel-subtitle{
  font-size:9px!important;color:#748ba8!important;font-weight:650!important;
  text-transform:uppercase;letter-spacing:.65px;
}
#layers-panel .panel-header .btn-close-panel{
  width:34px!important;height:34px!important;min-width:34px!important;
  border-radius:12px!important;
}

/* Secteur : une ligne compacte au lieu d'un gros bloc. */
#layers-panel .secteur-bloc{
  margin:0 0 6px!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:64px minmax(0,1fr)!important;
  align-items:center!important;
  gap:8px!important;
}
#layers-panel .secteur-bloc>label{
  margin:0!important;font-size:9px!important;letter-spacing:.8px!important;color:#7e92ae!important;
}
#layers-panel #select-secteur{
  height:40px!important;min-height:40px!important;
  padding:0 10px!important;border-radius:11px!important;
  font-size:13px!important;
}
#layers-panel #note-secteur{
  display:none!important;
}

/* Status couche : petite ligne discrète. */
#layers-panel .hd-layer-health{
  margin:4px 0 10px!important;
  padding:6px 9px!important;
  min-height:30px!important;
  border-radius:10px!important;
  font-size:9.5px!important;
  background:rgba(42,82,126,.13)!important;
}

/* Fond carto plus compact et net. */
#layers-panel .hd-basemap-block{margin:6px 0 11px!important}
#layers-panel .hd-basemap-title{
  margin-bottom:6px!important;
  font-size:9px!important;letter-spacing:.75px!important;
}
#layers-panel .hd-basemap-segment{gap:5px!important}
#layers-panel .hd-basemap-segment button{
  min-height:55px!important;
  padding:6px 2px!important;
  border-radius:12px!important;
}
#layers-panel .hd-base-icon{font-size:17px!important}
#layers-panel .hd-basemap-segment b{font-size:10px!important}
#layers-panel .hd-basemap-segment small{font-size:7px!important}
#layers-panel .hd-basemap-note{
  margin-top:5px!important;
  padding:6px 8px!important;
  border-radius:9px!important;
  font-size:8.5px!important;
  line-height:1.25!important;
}

/* Couches opérationnelles : vrais switches de réglages mobile. */
.hd-layer-section{
  margin-top:8px!important;
  padding-top:8px!important;
  border-top:1px solid rgba(105,149,201,.12);
}
.hd-layer-section-title{
  display:flex;align-items:center;justify-content:space-between;
  margin:0 2px 4px;
}
.hd-layer-section-title span{
  font-size:10px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:#8fa3bf;
}
.hd-layer-section-title small{font-size:8px;color:#60748f}
.hd-layer-list{
  border-radius:14px;
  overflow:hidden;
  background:rgba(21,44,75,.42);
  border:1px solid rgba(94,142,198,.09);
}
#layers-panel .hd-layer-list .toggle{
  position:relative!important;
  min-height:42px!important;
  margin:0!important;
  padding:0 44px 0 12px!important;
  border-radius:0!important;
  display:flex!important;
  align-items:center!important;
  font-size:12px!important;
  color:#d7e1ed!important;
  background:transparent!important;
  border:0!important;
  border-bottom:1px solid rgba(98,139,187,.075)!important;
}
#layers-panel .hd-layer-list .toggle:last-of-type{border-bottom:0!important}
#layers-panel .hd-layer-list .toggle.sub{
  min-height:35px!important;
  padding-left:28px!important;
  font-size:10.5px!important;
  color:#8799b0!important;
  background:rgba(3,15,31,.12)!important;
}
#layers-panel .hd-layer-list .toggle input[type="checkbox"]{
  position:absolute!important;
  right:10px!important;left:auto!important;
  top:50%!important;transform:translateY(-50%)!important;
  width:34px!important;height:20px!important;
  min-width:34px!important;
  margin:0!important;
  appearance:none!important;-webkit-appearance:none!important;
  border:0!important;border-radius:999px!important;
  background:#31425a!important;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.24)!important;
  transition:background .2s ease!important;
}
#layers-panel .hd-layer-list .toggle input[type="checkbox"]::after{
  content:""!important;
  position:absolute!important;
  width:16px!important;height:16px!important;
  left:2px!important;top:2px!important;
  border-radius:50%!important;
  background:#f8fbff!important;
  box-shadow:0 1px 4px rgba(0,0,0,.26)!important;
  transform:none!important;
  transition:transform .2s cubic-bezier(.2,.8,.2,1)!important;
}
#layers-panel .hd-layer-list .toggle input[type="checkbox"]:checked{
  background:linear-gradient(90deg,#2388c9,#31c795)!important;
}
#layers-panel .hd-layer-list .toggle input[type="checkbox"]:checked::after{
  transform:translateX(14px)!important;
}
#layers-panel .hd-layer-list .toggle[data-layer-state]::after{
  display:none!important;
}
#layers-panel .hd-layer-list .note-secteur{
  margin:0!important;
  padding:5px 12px 8px!important;
  border-radius:0!important;
  font-size:8px!important;
  color:#657a94!important;
  background:rgba(4,17,34,.18)!important;
}

/* Thème clair équivalent. */
html[data-theme="light"] #topbar{
  background:linear-gradient(155deg,rgba(249,252,255,.975),rgba(232,241,251,.985))!important;
  border-color:rgba(72,112,160,.17)!important;
}
html[data-theme="light"] #topbar .hd-search-head h1{color:#223b57!important}
html[data-theme="light"] .hd-search-modes{background:#e7eff8!important}
html[data-theme="light"] .hd-search-modes button{color:#5e7188!important}
html[data-theme="light"] .hd-search-modes button.active{color:#fff!important}
html[data-theme="light"] #layers-panel:not(.hidden){
  background:linear-gradient(165deg,rgba(249,252,255,.985),rgba(234,242,251,.99))!important;
}
html[data-theme="light"] #layers-panel .hd-layer-list{
  background:rgba(255,255,255,.7);border-color:#dce7f1;
}
html[data-theme="light"] #layers-panel .hd-layer-list .toggle{
  color:#334a64!important;border-color:#e4ebf2!important;
}
html[data-theme="light"] #layers-panel .hd-layer-list .toggle.sub{color:#718399!important}

@media(max-width:430px){
  #topbar{left:8px!important;right:68px!important}
  #layers-panel:not(.hidden),html.hd-standalone #layers-panel:not(.hidden){
    left:9px!important;right:9px!important;
  }
}


/* ==========================================================================
   V0.36 FIX4 — correction propre après régression FIX3
   ========================================================================== */

/* 1) Secteur masqué VISUELLEMENT uniquement.
   On ne touche pas au DOM : toute la logique existante reste intacte. */
#layers-panel .secteur-bloc{
  display:none!important;
}

/* 2) Supprime l'impression de double épaisseur sans casser la hiérarchie. */
#layers-panel:not(.hidden),
html.hd-standalone #layers-panel:not(.hidden){
  background:linear-gradient(168deg,rgba(8,24,47,.992),rgba(7,19,38,.995))!important;
  border:1px solid rgba(91,151,213,.16)!important;
  box-shadow:0 18px 40px rgba(1,10,24,.30)!important;
}
#layers-panel .panel-header{
  background:transparent!important;
  border-bottom:1px solid rgba(98,147,204,.10)!important;
  box-shadow:none!important;
}
#layers-panel .hd-layer-health{
  border:0!important;
  box-shadow:none!important;
  background:rgba(42,82,126,.10)!important;
  margin-top:4px!important;
}
#layers-panel .hd-layer-list{
  border:0!important;
  box-shadow:none!important;
  background:rgba(17,38,67,.38)!important;
}
#layers-panel .hd-basemap-segment button{
  box-shadow:none!important;
}
#layers-panel .hd-basemap-segment button.active{
  box-shadow:0 5px 13px rgba(27,126,207,.15),inset 0 1px rgba(255,255,255,.10)!important;
}

/* Le panneau reste bien borné au-dessus du dock. */
#layers-panel:not(.hidden),
html.hd-standalone #layers-panel:not(.hidden){
  bottom:calc(96px + env(safe-area-inset-bottom,0px))!important;
  max-height:min(62dvh,560px)!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
}

/* Thème clair cohérent. */
html[data-theme="light"] #layers-panel:not(.hidden),
html.hd-standalone[data-theme="light"] #layers-panel:not(.hidden){
  background:linear-gradient(168deg,rgba(249,252,255,.992),rgba(236,244,252,.995))!important;
  border-color:rgba(74,116,164,.15)!important;
}
html[data-theme="light"] #layers-panel .hd-layer-list{
  background:rgba(255,255,255,.56)!important;
}


/* ==========================================================================
   V0.37 — passe qualité / géométrie finale
   ========================================================================== */

/* --- Contrôles carte : un seul axe, une seule largeur -------------------- */
#maplibre-map .maplibregl-ctrl-top-right{
  right:12px!important;
  align-items:center!important;
}
#maplibre-map .maplibregl-ctrl-top-right > .maplibregl-ctrl-group:not(.hd-native-geolocate-helper){
  width:48px!important;
  border-radius:17px!important;
  overflow:hidden!important;
  box-shadow:0 8px 20px rgba(0,0,0,.22)!important;
}
#maplibre-map .maplibregl-ctrl-top-right > .maplibregl-ctrl-group:not(.hd-native-geolocate-helper) button{
  width:48px!important;
  height:48px!important;
}
.hd-map-tools{
  width:48px!important;
  border-radius:17px!important;
  z-index:1700!important; /* reste utilisable quand Carte & couches est ouvert */
}
.hd-map-tool{
  width:48px!important;height:48px!important;
  min-width:48px!important;min-height:48px!important;
}

/* --- Recherche : plus aucune croix de fermeture redondante -------------- */
#topbar{
  left:12px!important;
  right:72px!important;
}
#topbar .hd-search-head{
  display:block!important;
  min-height:30px!important;
  padding:2px 4px 5px!important;
}
#topbar .hd-search-head h1{
  margin:0!important;
  line-height:24px!important;
}
#btn-search-close{display:none!important}

/* --- Carte & couches : bouton Réglages devient X ; rail droite préservé --- */
#layers-panel:not(.hidden),
html.hd-standalone #layers-panel:not(.hidden){
  left:12px!important;
  right:72px!important;
  width:auto!important;
  max-width:none!important;
  bottom:calc(96px + env(safe-area-inset-bottom,0px))!important;
  max-height:min(62dvh,560px)!important;
}
#layers-panel .panel-header{
  display:block!important;
  min-height:45px!important;
  padding:11px 2px 9px!important;
  margin:0 0 8px!important;
}
#layers-panel .panel-header>span{
  display:block!important;
  line-height:25px!important;
}
#layers-panel .panel-header .btn-close-panel{display:none!important}

/* Les deux anciens toggles de fond ne doivent jamais réapparaître dans la
   liste opérationnelle : le sélecteur Plan / SCAN25 / Satellite les remplace. */
#layers-panel .hd-layer-list .toggle.hd-legacy-basemap-toggle{
  display:none!important;
}

/* Switchs parfaitement alignés, textes sur une seule colonne. */
#layers-panel .hd-layer-list .toggle{
  padding-right:54px!important;
}
#layers-panel .hd-layer-list .toggle input[type="checkbox"]{
  right:12px!important;
}

/* --- Hors-ligne : état explicite et progression, pas de bouton gris ------ */
#btn-offline{
  min-height:46px!important;
  border-radius:13px!important;
  background:linear-gradient(135deg,#176fc0,#1a8dc9)!important;
  box-shadow:0 8px 18px rgba(18,106,179,.18)!important;
  transition:transform .15s ease,filter .2s ease!important;
}
#btn-offline:active{transform:scale(.985)}
#btn-offline:disabled{
  opacity:1!important;
  filter:saturate(.72) brightness(.9)!important;
}
#offline-status{
  position:relative!important;
  overflow:hidden!important;
  min-height:24px!important;
  padding:6px 8px!important;
  border-radius:9px!important;
}
#offline-status.downloading{
  background:rgba(43,91,143,.12)!important;
}
#offline-status.downloading::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  height:2px;
  width:calc(var(--offline-pct,0) * 1%);
  border-radius:99px;
  background:linear-gradient(90deg,#2c9cff,#62caff,#ffab5b);
  box-shadow:0 0 8px rgba(57,163,255,.4);
  transition:width .2s linear;
}

/* --- Détails de cohérence ------------------------------------------------ */
#layers-panel .hd-layer-section-title,
#layers-panel .hd-basemap-title,
#layers-panel .hd-layer-health{
  margin-left:0!important;
  margin-right:0!important;
}
#panel-backdrop:not(.hidden){
  cursor:pointer;
}

/* Thème clair */
html[data-theme="light"] #maplibre-map .maplibregl-ctrl-top-right > .maplibregl-ctrl-group:not(.hd-native-geolocate-helper){
  box-shadow:0 8px 20px rgba(48,72,100,.16)!important;
}
html[data-theme="light"] #offline-status.downloading{
  background:rgba(38,124,193,.08)!important;
}

/* Mobile étroit : on conserve toujours le rail de commande. */
@media(max-width:430px){
  #topbar{left:9px!important;right:66px!important}
  #layers-panel:not(.hidden),
  html.hd-standalone #layers-panel:not(.hidden){
    left:9px!important;right:66px!important;
  }
  #maplibre-map .maplibregl-ctrl-top-right{right:9px!important}
}


/* ==========================================================================
   V0.38 — corrections captures terrain
   ========================================================================== */

/* 1) Rail carte : plus de chevauchement avec + / - / boussole */
#maplibre-map .maplibregl-ctrl-top-right{
  right:12px!important;
}
.hd-map-tools{
  margin-top:0!important;
  box-sizing:border-box!important;
}
.hd-map-tools .hd-map-tool{
  box-sizing:border-box!important;
}

/* Le bouton Feux revient dans la capsule, avec un état OFF clairement grisé. */
.hd-map-tools #btn-feux-carte{
  display:grid!important;
  position:relative!important;
  inset:auto!important;
  width:48px!important;height:48px!important;
  min-width:48px!important;min-height:48px!important;
  margin:0!important;padding:0!important;
  border:0!important;border-radius:0!important;
  background:transparent!important;
  color:#7f8da1!important;
  box-shadow:none!important;
  opacity:.72!important;
}
.hd-map-tools #btn-feux-carte[aria-pressed="true"]{
  color:#ff8a42!important;
  opacity:1!important;
  background:radial-gradient(circle,rgba(238,77,50,.18),transparent 72%)!important;
}
.hd-map-tools #btn-feux-carte svg{
  width:26px!important;height:26px!important;
  fill:none!important;stroke:currentColor!important;
  stroke-width:1.7!important;
  stroke-linecap:round!important;stroke-linejoin:round!important;
}
.hd-map-tools #btn-feux-carte .hd-fire-core{
  fill:currentColor!important;
  stroke:none!important;
  opacity:.72;
}
.hd-map-tools #btn-feux-carte[aria-pressed="true"] svg{
  filter:drop-shadow(0 0 7px rgba(255,107,56,.42));
}

/* 2) Référentiel : Doctrine et Glossaire doivent être strictement identiques
   en haut, quelle que soit la vue active. */
#doctrine-panel,
#glossaire-panel{
  box-sizing:border-box!important;
  padding:0 16px calc(96px + env(safe-area-inset-bottom,0px))!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
}
#doctrine-panel .panel-header,
#glossaire-panel .panel-header{
  position:sticky!important;
  top:0!important;
  z-index:20!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  min-height:62px!important;
  margin:0 -16px 12px!important;
  padding:10px 16px!important;
  box-sizing:border-box!important;
  background:linear-gradient(180deg,rgba(17,40,75,.98),rgba(15,34,65,.965))!important;
  border-bottom:1px solid rgba(110,158,214,.16)!important;
  box-shadow:none!important;
}
#doctrine-panel .panel-header>span,
#glossaire-panel .panel-header>span{
  font-size:18px!important;
  line-height:1.15!important;
  font-weight:780!important;
  letter-spacing:-.2px!important;
}
#doctrine-panel .panel-header .btn-close-panel,
#glossaire-panel .panel-header .btn-close-panel{
  width:38px!important;height:38px!important;min-width:38px!important;
  border-radius:13px!important;
  margin:0!important;
  flex:0 0 auto!important;
}
#doctrine-panel .hd-ref-tabs,
#glossaire-panel .hd-ref-tabs{
  position:relative!important;
  top:auto!important;
  width:100%!important;
  box-sizing:border-box!important;
  margin:0 0 12px!important;
  padding:4px!important;
  min-height:52px!important;
  border-radius:16px!important;
}
#doctrine-panel .hd-ref-tabs button,
#glossaire-panel .hd-ref-tabs button{
  min-height:44px!important;
  font-size:13px!important;
}
#glossaire-panel #glossaire-content{
  margin-top:0!important;
}

/* 3) Destination : aucun style rouge hérité ne doit la faire ressembler
   aux points d'eau. Le rendu réel est maintenant un losange/cible bleu. */
.maplibregl-map .maplibregl-canvas-container{
  -webkit-tap-highlight-color:transparent;
}

/* Ajustements petits écrans */
@media(max-width:430px){
  #maplibre-map .maplibregl-ctrl-top-right{right:9px!important}
  #doctrine-panel,#glossaire-panel{
    padding-left:14px!important;padding-right:14px!important;
  }
  #doctrine-panel .panel-header,
  #glossaire-panel .panel-header{
    margin-left:-14px!important;margin-right:-14px!important;
    padding-left:14px!important;padding-right:14px!important;
  }
}


/* ==========================================================================
   V0.40 — Libellés texte sous les icônes de la capsule
   Bloc placé en toute fin de fichier pour l'emporter sur les 5 blocs
   .hd-map-tools / .hd-map-tool précédents (accumulés au fil des versions).
   ========================================================================== */
.hd-map-tools{
  width:84px!important;
  border-radius:20px!important;
  padding:6px 0!important;
}
.hd-map-tool{
  width:84px!important;height:74px!important;
  min-width:84px!important;min-height:74px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
}
.hd-map-tool svg{width:23px!important;height:23px!important}
.hd-map-tool-label{
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.1px;
  line-height:1;
  color:inherit;
  white-space:nowrap;
}
@media(max-width:430px){
  .hd-map-tools{width:78px!important}
  .hd-map-tool{width:78px!important;min-width:78px!important}
  .hd-map-tool-label{font-size:10px}
}

/* Capsule repliable : fermée par défaut (un seul bouton visible), le clic
   sur la bascule déplie recherche / ma position / feux / couches. */
#hd-map-tools .hd-tools-actions{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  max-height:0!important;
  opacity:0!important;
  overflow:hidden!important;
  pointer-events:none!important;
  transform:translateY(-6px) scale(.97);
  transition:max-height .22s ease,opacity .16s ease,transform .2s ease;
}
#hd-map-tools.open .hd-tools-actions{
  max-height:340px!important;
  opacity:1!important;
  pointer-events:auto!important;
  transform:translateY(0) scale(1);
}
#hd-map-tools .hd-tools-toggle svg{transition:transform .2s ease}
#hd-map-tools.open .hd-tools-toggle svg{transform:rotate(180deg)}
#hd-map-tools .hd-tools-toggle.hd-tool-active{color:#e9f1fb!important;background:transparent!important}

/* Capsule fine, icônes seules, quelle que soit la variante .hd-map-tool
   (label+icône empilés, 84x74px) accumulée plus haut dans ce fichier au fil
   des versions. Sélecteurs #id pour gagner face aux !important en classe,
   sans toucher aux autres usages de .hd-map-tool ailleurs dans l'appli. */
#hd-map-tools{
  width:46px!important;
  padding:4px 0!important;
  border-radius:16px!important;
}
#hd-map-tools .hd-map-tool{
  width:46px!important;height:44px!important;
  min-width:46px!important;min-height:44px!important;
  flex-direction:row!important;
  gap:0!important;
}
#hd-map-tools .hd-map-tool-label{
  display:none!important;
}
#hd-map-tools .hd-map-tool svg{
  width:22px!important;height:22px!important;
}
#hd-map-tools .hd-tools-toggle svg{
  width:19px!important;height:19px!important;
}
@media(max-width:430px){
  #hd-map-tools{width:46px!important}
  #hd-map-tools .hd-map-tool{width:46px!important;min-width:46px!important}
}

/* La croix qui remplace loupe/couches quand le panneau est ouvert doit
   rester bleue comme le reste des états actifs (ex. Ma position), pas
   blanche : on force la couleur directement sur le trait du SVG. */
#hd-map-tools #btn-chercher-icone.hd-tool-active,
#hd-map-tools #btn-layers.hd-tool-active{
  color:#60c5ff!important;
}
#hd-map-tools #btn-chercher-icone.hd-tool-active svg,
#hd-map-tools #btn-layers.hd-tool-active svg{
  stroke:#60c5ff!important;
}


/* ==========================================================================
   V0.40 FAST — navigateur web : correction du vide sous le dock
   Le mode raccourci/PWA n'est volontairement pas modifié.
   ========================================================================== */
html:not(.hd-standalone) #tab-bar{
  bottom:0!important;
}

/* La carte et l'accueil réservent seulement la hauteur réelle du dock
   dans le navigateur : pas de seconde marge artificielle sous le dock. */
html:not(.hd-standalone) #ecran-carte,
html:not(.hd-standalone) #ecran-accueil{
  padding-bottom:78px!important;
}

/* Les panneaux flottants restent juste au-dessus du dock web. */
html:not(.hd-standalone) #layers-panel,
html:not(.hd-standalone) #doctrine-panel,
html:not(.hd-standalone) #parametres-panel,
html:not(.hd-standalone) #legende-panel,
html:not(.hd-standalone) #glossaire-panel,
html:not(.hd-standalone) #info-journaliere-panel,
html:not(.hd-standalone) #meteo-panel,
html:not(.hd-standalone) #feux-liste-panel{
  bottom:78px!important;
}


/* ==========================================================================
   V0.40 FAST W1 — Météo plein fond en navigateur
   ========================================================================== */

/* Le panneau Météo doit couvrir le viewport jusqu'au bas de l'écran.
   Le dock flotte PAR-DESSUS le panneau, jamais au-dessus de la carte. */
html:not(.hd-standalone) #meteo-panel{
  bottom:0!important;
  min-height:100dvh!important;
  box-sizing:border-box!important;
  padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))!important;
  background:var(--bg)!important;
}

/* Le dernier contenu météo reste scrollable et visible au-dessus du dock. */
html:not(.hd-standalone) #meteo-panel>#meteo-contenu{
  padding-bottom:12px!important;
  box-sizing:border-box!important;
}

/* V0.41 AUDIT — fonds cartographiques sans doublon dans les couches opérationnelles */
#layers-panel .hd-basemap-segment{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
}
#layers-panel .hd-basemap-segment>button{
  min-width:0!important;
  min-height:78px!important;
}


/* ==========================================================================
   V0.45 — Légende cartographique restaurée et remise à jour
   ========================================================================== */
.hd-legend-entry{
  width:100%!important;
  min-height:56px!important;
  margin:10px 0 2px!important;
  padding:9px 10px!important;
  display:grid!important;
  grid-template-columns:30px 1fr 18px!important;
  align-items:center!important;
  gap:9px!important;
  border:1px solid rgba(93,157,221,.14)!important;
  border-radius:14px!important;
  background:linear-gradient(145deg,rgba(28,56,91,.62),rgba(15,36,66,.72))!important;
  color:#eaf4ff!important;
  text-align:left!important;
}
.hd-legend-entry>svg:first-child{width:24px;height:24px;fill:none;stroke:#67c9ff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hd-legend-entry span{display:flex;flex-direction:column;gap:2px}
.hd-legend-entry b{font-size:12px;line-height:1.2}
.hd-legend-entry small{font-size:9px;color:#8398b2}
.hd-legend-entry .hd-chevron{width:17px;height:17px;fill:none;stroke:#7188a5;stroke-width:2}
.hd-legend-entry:active{transform:scale(.985)}

#legende-panel #legend-content{padding-bottom:18px}
.hd-legend-group{
  margin:0 0 13px!important;
  padding:0!important;
}
.hd-legend-group h3{
  margin:0 0 6px!important;
  font-size:10px!important;
  letter-spacing:.7px!important;
  text-transform:uppercase!important;
  color:#8da5c3!important;
}
.hd-legend-rows{
  overflow:hidden;
  border-radius:14px;
  background:rgba(18,40,69,.48);
  border:1px solid rgba(91,143,201,.10);
}
#legende-panel .legend-row{
  min-height:42px!important;
  padding:7px 10px!important;
  display:flex!important;
  align-items:center!important;
  gap:11px!important;
  border-bottom:1px solid rgba(100,145,196,.08)!important;
  color:#d7e3f0!important;
  font-size:11.5px!important;
}
#legende-panel .legend-row:last-child{border-bottom:0!important}
.legend-line{
  display:inline-block;flex:0 0 auto;
  width:34px;height:0;
  border-top:5px solid currentColor;
  border-radius:99px;
  box-shadow:0 0 0 2px #071b33;
}
.hd-leg-dfci{color:#32cfff}
.hd-leg-dfci-project{color:#7890a8;border-top-style:dashed;box-shadow:none}
.hd-leg-zal{color:#ff5964}
.hd-leg-lutte{color:#ff9f43}
.hd-leg-route{color:#1769c2;box-shadow:0 0 0 2px #fff}
.hd-leg-route-dfci{color:#42dcff;box-shadow:0 0 0 2px #06192f}
.hd-leg-approach{color:#ffbd59;border-top-style:dashed;box-shadow:none}
.hd-leg-rte{color:#f1c40f;box-shadow:none;border-top-width:3px}
.legend-code,.legend-grid{
  min-width:52px;padding:3px 6px;border-radius:7px;
  background:#071b33;color:#dff8ff;font-weight:800;font-size:10px;text-align:center;
}
.legend-dot{width:13px!important;height:13px!important;border-radius:50%!important;flex:0 0 auto}
.hd-leg-pei{background:#1677d2!important;border:2px solid #fff!important}
.hd-leg-water-dfci{background:#18bfe8!important;border:2px solid #dffbff!important}
.legend-target{font-size:24px;line-height:1;color:#1597f2;text-shadow:0 0 0 #fff,0 0 7px rgba(21,151,242,.45)}
.legend-arrow{font-size:28px;line-height:1;color:#62d8ff;font-weight:800}
.legend-tower{font-size:18px;color:#b9c8da}
.legend-fire{font-size:19px;line-height:1}
.legend-area{width:24px;height:16px;border-radius:4px;display:inline-block;flex:0 0 auto}
.hd-leg-forest{background:#40916c;border:1px solid #74a892}
.hd-leg-risk{background:#e67e22;border:1px solid #ffcf70}

html[data-theme="light"] .hd-legend-entry{
  background:linear-gradient(145deg,#fff,#edf4fb)!important;
  color:#29445f!important;border-color:#d8e4ef!important;
}
html[data-theme="light"] .hd-legend-rows{background:rgba(255,255,255,.72);border-color:#dce7f1}
html[data-theme="light"] #legende-panel .legend-row{color:#344b64!important;border-color:#e4ebf2!important}

/* V0.46 — convention couleur eau opérationnelle
   Rouge = PEI réseau / Vert = point d'eau DFCI / Bleu réservé navigation */
.hd-leg-pei{
  background:#e5484d!important;
  border:2px solid #fff!important;
  box-shadow:0 0 5px rgba(229,72,77,.28)!important;
}
.hd-leg-water-dfci{
  background:#35d36f!important;
  border:2px solid #fff!important;
  box-shadow:0 0 5px rgba(53,211,111,.28)!important;
}


/* ==========================================================================
   V0.95 — CARTE = même logique plein écran que SURFACE
   Le dock est un overlay masqué : il ne réserve AUCUNE hauteur à la carte.
   Applicable Safari, PWA iPhone, portrait et paysage.
   ========================================================================== */

body.hd-map-focus #ecran-carte{
  position:absolute!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  left:0!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  padding:0!important;
  margin:0!important;
  box-sizing:border-box!important;
}

body.hd-map-focus #map-zone{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
}

/* En PWA, annule explicitement la réserve footer des règles historiques. */
html.hd-standalone body.hd-map-focus #ecran-carte{
  top:0!important;
  right:0!important;
  bottom:0!important;
  left:0!important;
  height:var(--hd-app-height)!important;
  min-height:var(--hd-app-height)!important;
  max-height:var(--hd-app-height)!important;
  padding-bottom:0!important;
}

html.hd-standalone body.hd-map-focus #map-zone{
  top:0!important;
  right:0!important;
  bottom:0!important;
  left:0!important;
  height:100%!important;
  min-height:100%!important;
}

/* Le dock reste caché comme en Surface ; la Maison flotte sur la carte. */
body.hd-map-focus #tab-bar{
  transform:translateY(calc(100% + 40px))!important;
  opacity:0!important;
  pointer-events:none!important;
}

body.hd-map-focus.hd-map-menu-open #tab-bar{
  transform:none!important;
  opacity:1!important;
  pointer-events:auto!important;
}

body.hd-map-focus #hd-map-home{
  position:fixed!important;
  z-index:9700!important;
}

/* Paysage PWA : aucun bandeau/footer résiduel. */
@media (orientation:landscape){
  html.hd-standalone body.hd-map-focus #ecran-carte{
    bottom:0!important;
    height:var(--hd-app-height)!important;
    padding-bottom:0!important;
  }

  html.hd-standalone body.hd-map-focus #map-zone{
    bottom:0!important;
    height:100%!important;
  }
}


/* ==========================================================================
   V0.96 — NAVIGATION : même plein écran que CARTE
   Aucun bandeau/footer réservé en bas. Maison + Arrêter flottent sur la carte.
   ========================================================================== */

body.hd-drive-mode #ecran-carte{
  position:absolute!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  left:0!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  padding:0!important;
  margin:0!important;
  box-sizing:border-box!important;
}

body.hd-drive-mode #map-zone{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
}

/* PWA iPhone : la navigation occupe tout le viewport, portrait et paysage. */
html.hd-standalone body.hd-drive-mode #ecran-carte{
  top:0!important;
  right:0!important;
  bottom:0!important;
  left:0!important;
  height:var(--hd-app-height)!important;
  min-height:var(--hd-app-height)!important;
  max-height:var(--hd-app-height)!important;
  padding-bottom:0!important;
}

html.hd-standalone body.hd-drive-mode #map-zone{
  top:0!important;
  right:0!important;
  bottom:0!important;
  left:0!important;
  height:100%!important;
  min-height:100%!important;
}

/* Le dock principal ne réserve aucune place en navigation. */
body.hd-drive-mode #tab-bar{
  transform:translateY(calc(100% + 40px))!important;
  opacity:0!important;
  pointer-events:none!important;
}

/* Maison et Arrêter = overlays sur la carte */
body.hd-drive-mode #hd-drive-home{
  position:fixed!important;
  z-index:9700!important;
}

body.hd-drive-mode #hd-drive-stop{
  position:fixed!important;
  z-index:9700!important;
}

/* Paysage PWA : aucun bandeau bas résiduel */
@media (orientation:landscape){
  html.hd-standalone body.hd-drive-mode #ecran-carte{
    bottom:0!important;
    height:var(--hd-app-height)!important;
    padding-bottom:0!important;
  }

  html.hd-standalone body.hd-drive-mode #map-zone{
    bottom:0!important;
    height:100%!important;
  }
}


/* ==========================================================================
   V0.97 — ACCUEIL PRO / CARTE FIRST
   Même ADN HotelDelta : bleu nuit, halos dynamiques, profondeur, mouvements.
   ========================================================================== */

.hd-home-v097{
  display:flex;
  flex-direction:column;
  gap:11px;
  padding-bottom:8px;
}

.hd-home-v097 .hd-home-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:2px 1px 0;
}

.hd-home-v097 .hd-settings-btn{
  width:48px!important;
  height:48px!important;
  min-width:48px!important;
  padding:0!important;
  border-radius:16px!important;
}
.hd-home-v097 .hd-settings-btn svg{width:25px;height:25px}

/* Météo toujours présente, mais secondaire et compacte. */
.hd-home-v097 #accueil-statut{
  min-height:78px!important;
  padding:10px 13px!important;
  border-radius:19px!important;
}
.hd-home-v097 #accueil-statut .accueil-statut-corps{
  min-height:56px!important;
}
.hd-home-v097 #accueil-statut .accueil-meteo-anim{
  width:74px!important;
  min-width:74px!important;
  transform:scale(.82);
  transform-origin:center right;
}
.hd-home-v097 #accueil-statut .accueil-statut-ligne1{
  margin-bottom:2px!important;
}
.hd-home-v097 #accueil-statut #accueil-code{
  font-size:16px!important;
  letter-spacing:.1px;
}
.hd-home-v097 #accueil-statut #accueil-commune,
.hd-home-v097 #accueil-statut #accueil-coords{
  font-size:11px!important;
}
.hd-home-v097 #accueil-statut .accueil-meteo{
  margin-top:5px!important;
  gap:8px!important;
}
.hd-home-v097 #accueil-statut .accueil-meteo-item{
  min-width:0!important;
}
.hd-home-v097 #accueil-statut .accueil-meteo-item b{
  font-size:13px!important;
}
.hd-home-v097 #accueil-statut .accueil-meteo-item span{
  font-size:9px!important;
}

/* Carte : élément principal de l'accueil, sans devenir une énorme carte. */
.hd-home-map-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  width:100%;
  min-height:150px;
  padding:18px 18px;
  border:1px solid rgba(106,166,238,.24);
  border-radius:24px;
  color:#f7fbff;
  text-align:left;
  background:
    linear-gradient(115deg,rgba(11,35,67,.98),rgba(17,48,84,.95) 57%,rgba(14,39,70,.97));
  box-shadow:
    0 18px 38px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -22px 42px rgba(2,12,28,.16);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.hd-home-map-hero:active{
  transform:scale(.985);
  border-color:rgba(116,190,255,.48);
}
.hd-map-hero-bg{
  position:absolute;
  z-index:-1;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}
.hd-map-grid{
  position:absolute;
  inset:-20%;
  opacity:.24;
  background-image:
    linear-gradient(rgba(102,168,234,.20) 1px,transparent 1px),
    linear-gradient(90deg,rgba(102,168,234,.20) 1px,transparent 1px);
  background-size:34px 34px;
  transform:perspective(260px) rotateX(48deg) rotateZ(-8deg) translateY(8%);
  animation:hdMapGridDrift 14s ease-in-out infinite alternate;
}
.hd-map-contours{
  position:absolute;
  inset:-32% -8% -25% 34%;
  opacity:.37;
  background:
    repeating-radial-gradient(ellipse at 58% 48%,
      transparent 0 17px,
      rgba(100,177,255,.24) 18px 19px,
      transparent 20px 31px);
  transform:rotate(-11deg);
  animation:hdMapContoursFloat 12s ease-in-out infinite alternate;
}
.hd-map-route{
  position:absolute;
  left:38%;top:64%;
  width:43%;height:3px;
  border-radius:99px;
  background:linear-gradient(90deg,rgba(67,165,255,.08),#56acff 35%,#94d2ff 68%,rgba(255,176,91,.85));
  box-shadow:0 0 16px rgba(66,165,255,.42);
  transform:rotate(-17deg);
}
.hd-map-route::before,
.hd-map-route::after{
  content:"";
  position:absolute;
  top:50%;
  width:8px;height:8px;
  margin-top:-4px;
  border-radius:50%;
}
.hd-map-route::before{
  left:-2px;background:#59b1ff;box-shadow:0 0 13px rgba(79,171,255,.75);
}
.hd-map-route::after{
  right:-2px;background:#ffa85b;box-shadow:0 0 14px rgba(255,157,73,.7);
}
.hd-map-pulse{
  position:absolute;
  right:17%;top:25%;
  width:9px;height:9px;border-radius:50%;
  background:#72c0ff;
  box-shadow:0 0 0 0 rgba(83,177,255,.34);
  animation:hdMapPulse 2.4s ease-out infinite;
}

.hd-map-hero-copy{
  display:flex;
  flex-direction:column;
  max-width:76%;
}
.hd-map-hero-copy small{
  color:#78baff;
  font-size:10px;
  font-weight:900;
  letter-spacing:1.7px;
}
.hd-map-hero-copy b{
  margin-top:7px;
  font-size:23px;
  line-height:1.05;
  letter-spacing:-.65px;
}
.hd-map-hero-copy em{
  margin-top:8px;
  color:#9fb4cf;
  font-size:12px;
  font-style:normal;
  line-height:1.25;
}
.hd-map-hero-open{
  position:absolute;
  right:16px;
  bottom:15px;
  width:42px;height:42px;
  display:grid;place-items:center;
  border-radius:14px;
  color:#a9dcff;
  border:1px solid rgba(106,178,244,.19);
  background:linear-gradient(145deg,rgba(40,99,166,.42),rgba(22,54,96,.55));
  box-shadow:inset 0 1px rgba(255,255,255,.06),0 8px 18px rgba(0,0,0,.16);
}
.hd-map-hero-open svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2}

/* Trois accès secondaires, très lisibles, sans surcharger. */
.hd-home-quick{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
.hd-home-quick-card{
  min-height:82px!important;
  padding:10px 7px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  border-radius:18px!important;
  border:1px solid rgba(105,153,214,.16)!important;
  background:linear-gradient(145deg,rgba(24,41,68,.88),rgba(17,32,55,.94))!important;
}
.hd-home-quick-card .hd-icon-badge{
  width:34px!important;height:34px!important;
  border-radius:11px!important;
}
.hd-home-quick-card .hd-icon-badge svg{
  width:20px!important;height:20px!important;
}
.hd-home-quick-card > span:last-child{
  display:flex;flex-direction:column;align-items:center;gap:1px;
}
.hd-home-quick-card b{
  font-size:12px;color:#eef7ff;
}
.hd-home-quick-card small{
  font-size:9px;color:#8499b5;
}

/* Actions plus compactes pour garder le mémo visible. */
.hd-home-v097 .hd-home-actions{
  gap:8px!important;
}
.hd-home-v097 .hd-home-action{
  min-height:58px!important;
  border-radius:18px!important;
}
.hd-home-v097 .hd-home-memo{
  margin-top:0!important;
  border-radius:19px!important;
}
.hd-home-v097 .hd-home-memo-title{
  padding-bottom:8px!important;
}

/* Dock : halo OBLIGATOIREMENT contenu dans le bandeau. */
#tab-bar,
html.hd-standalone #tab-bar{
  overflow:hidden!important;
}
#tab-bar .hd-dock-energy{
  top:0!important;
  height:100%!important;
  overflow:hidden!important;
}
#tab-bar .hd-dock-energy::before{
  top:2px!important;
  height:56px!important;
}
#tab-bar .hd-dock-energy::after{
  bottom:5px!important;
}
#tab-bar .tab-item,
html.hd-standalone #tab-bar .tab-item{
  overflow:hidden!important;
}

/* Responsive compact pour petits écrans iPhone. */
@media (max-height:760px){
  .hd-home-v097{gap:8px}
  .hd-home-map-hero{min-height:132px;padding:15px}
  .hd-map-hero-copy b{font-size:21px}
  .hd-home-quick-card{min-height:72px!important}
  .hd-home-v097 .hd-home-action{min-height:54px!important}
}

/* Paysage : l'accueil devient large, sans toucher aux pages métier. */
@media (orientation:landscape){
  .hd-home-v097{
    display:grid;
    grid-template-columns:minmax(260px,.9fr) minmax(320px,1.1fr);
    grid-template-areas:
      "top map"
      "status map"
      "quick actions"
      "memo memo";
    align-items:start;
    gap:10px 12px;
  }
  .hd-home-v097 .hd-home-top{grid-area:top}
  .hd-home-v097 #accueil-statut{grid-area:status}
  .hd-home-v097 .hd-home-map-hero{grid-area:map;min-height:166px;height:100%}
  .hd-home-v097 .hd-home-quick{grid-area:quick}
  .hd-home-v097 .hd-home-actions{grid-area:actions}
  .hd-home-v097 .hd-home-memo{grid-area:memo}
}

@keyframes hdMapGridDrift{
  0%{transform:perspective(260px) rotateX(48deg) rotateZ(-8deg) translate3d(-2%,8%,0)}
  100%{transform:perspective(260px) rotateX(48deg) rotateZ(-8deg) translate3d(3%,3%,0)}
}
@keyframes hdMapContoursFloat{
  0%{transform:rotate(-11deg) translate3d(-2%,1%,0)}
  100%{transform:rotate(-8deg) translate3d(3%,-2%,0)}
}
@keyframes hdMapPulse{
  0%{box-shadow:0 0 0 0 rgba(83,177,255,.34)}
  70%,100%{box-shadow:0 0 0 16px rgba(83,177,255,0)}
}

/* Réduction de mouvement : aucune perte fonctionnelle. */
@media (prefers-reduced-motion:reduce){
  .hd-map-grid,.hd-map-contours,.hd-map-pulse{animation:none!important}
}


/* ==========================================================================
   V0.98 — CARTE D'ACCUEIL RÉELLE + POSITION
   ========================================================================== */
.hd-home-map-hero{
  cursor:pointer;
  min-height:166px!important;
  background:#0b2039!important;
}
.hd-home-map-hero:focus-visible{
  outline:2px solid rgba(111,190,255,.9);
  outline-offset:2px;
}
.hd-home-mini-map{
  position:absolute!important;
  inset:0!important;
  z-index:-3!important;
  width:100%!important;
  height:100%!important;
  background:#102844;
  pointer-events:none!important;
}
.hd-home-mini-map .maplibregl-canvas-container,
.hd-home-mini-map canvas{
  pointer-events:none!important;
}
.hd-home-map-shade{
  position:absolute;
  z-index:-2;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(4,18,36,.91) 0%,rgba(5,21,40,.70) 46%,rgba(5,19,36,.18) 78%,rgba(5,17,32,.28) 100%),
    linear-gradient(0deg,rgba(4,17,32,.28),rgba(4,17,32,.04) 58%);
}
.hd-home-map-hero::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -24px 50px rgba(1,12,25,.18);
}
.hd-home-user-marker{
  position:relative;
  width:18px;height:18px;
  border-radius:50%;
  background:#52adff;
  border:3px solid #f5fbff;
  box-shadow:
    0 0 0 6px rgba(51,153,255,.18),
    0 0 24px rgba(54,162,255,.78);
}
.hd-home-user-marker::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:34px;height:34px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:1px solid rgba(91,182,255,.58);
  animation:hdHomeLocationPulse 2.1s ease-out infinite;
}
@keyframes hdHomeLocationPulse{
  0%{opacity:.9;transform:translate(-50%,-50%) scale(.45)}
  80%,100%{opacity:0;transform:translate(-50%,-50%) scale(1.25)}
}
@media (prefers-reduced-motion:reduce){
  .hd-home-user-marker::after{animation:none!important}
}


/* ==========================================================================
   V0.99 — CARTE & COUCHES / PAYSAGE COMPACT
   IMPORTANT : portrait volontairement inchangé.
   Objectif paysage : panneau moins envahissant + davantage d'options visibles.
   ========================================================================== */
@media (orientation:landscape) and (min-width:640px){

  /* Panneau moins large et moins haut : la carte reste vraiment visible. */
  #layers-panel:not(.hidden),
  html.hd-standalone #layers-panel:not(.hidden){
    left:clamp(96px,8vw,132px)!important;
    right:auto!important;
    width:min(64vw,760px)!important;
    max-width:760px!important;
    bottom:clamp(54px,8vh,78px)!important;
    max-height:min(56dvh,430px)!important;
    padding:0 11px 10px!important;
    border-radius:22px!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
  }

  /* En-tête plus dense. */
  #layers-panel .panel-header{
    min-height:38px!important;
    margin:0 -11px 5px!important;
    padding:7px 11px 6px!important;
  }
  #layers-panel .panel-header>span{
    font-size:15px!important;
    line-height:21px!important;
  }

  /* Ligne de synchronisation réduite. */
  #layers-panel .hd-layer-health{
    min-height:24px!important;
    margin:3px 0 6px!important;
    padding:4px 8px!important;
    font-size:8.5px!important;
    border-radius:8px!important;
  }

  /* Les 4 fonds tiennent sur UNE ligne en paysage. */
  #layers-panel .hd-basemap-block{
    margin:3px 0 7px!important;
  }
  #layers-panel .hd-basemap-title{
    margin-bottom:4px!important;
    font-size:8px!important;
  }
  #layers-panel .hd-basemap-segment{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:5px!important;
  }
  #layers-panel .hd-basemap-segment>button{
    min-height:48px!important;
    padding:4px 2px!important;
    border-radius:10px!important;
  }
  #layers-panel .hd-base-icon{
    font-size:14px!important;
    line-height:15px!important;
  }
  #layers-panel .hd-basemap-segment b{
    font-size:9px!important;
  }
  #layers-panel .hd-basemap-segment small{
    font-size:6.5px!important;
  }
  #layers-panel .hd-basemap-note{
    margin-top:3px!important;
    padding:4px 6px!important;
    font-size:7.5px!important;
  }

  /* La partie opérationnelle passe sur 2 colonnes.
     On gagne beaucoup de hauteur sans réduire la lisibilité tactile. */
  #layers-panel .hd-layer-section{
    margin-top:5px!important;
    padding-top:5px!important;
  }
  #layers-panel .hd-layer-section-title{
    margin:0 1px 3px!important;
  }
  #layers-panel .hd-layer-section-title span{
    font-size:8.5px!important;
  }
  #layers-panel .hd-layer-section-title small{
    font-size:7px!important;
  }
  #layers-panel .hd-layer-list{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:1px!important;
    overflow:visible!important;
    border-radius:12px!important;
    background:rgba(17,38,67,.32)!important;
  }
  #layers-panel .hd-layer-list .toggle{
    min-height:34px!important;
    padding:0 40px 0 9px!important;
    font-size:10.5px!important;
    border-bottom:1px solid rgba(98,139,187,.065)!important;
  }
  #layers-panel .hd-layer-list .toggle.sub{
    min-height:30px!important;
    padding-left:20px!important;
    font-size:9.3px!important;
  }
  #layers-panel .hd-layer-list .toggle input[type="checkbox"]{
    right:8px!important;
    width:30px!important;
    height:18px!important;
    min-width:30px!important;
  }
  #layers-panel .hd-layer-list .toggle input[type="checkbox"]::after{
    width:14px!important;
    height:14px!important;
  }
  #layers-panel .hd-layer-list .toggle input[type="checkbox"]:checked::after{
    transform:translateX(12px)!important;
  }

  /* Notes Forêt / Aléa prennent toute la largeur sous leur ligne. */
  #layers-panel .hd-layer-list .note-secteur{
    grid-column:1 / -1!important;
    padding:3px 9px 5px!important;
    font-size:7.2px!important;
    line-height:1.15!important;
  }

  /* Légende plus compacte en bas. */
  #layers-panel .hd-legend-entry{
    min-height:42px!important;
    margin:6px 0 0!important;
    padding:5px 8px!important;
    grid-template-columns:24px 1fr 16px!important;
    border-radius:11px!important;
  }
  #layers-panel .hd-legend-entry>svg:first-child{
    width:18px!important;
    height:18px!important;
  }
  #layers-panel .hd-legend-entry b{
    font-size:10.5px!important;
  }
  #layers-panel .hd-legend-entry small{
    font-size:7.5px!important;
  }

  /* En navigation, le rail droit et le HUD restent prioritaires et libres. */
  body.hd-drive-mode #layers-panel:not(.hidden),
  html.hd-standalone body.hd-drive-mode #layers-panel:not(.hidden){
    width:min(62vw,720px)!important;
    max-height:min(54dvh,405px)!important;
  }
}


/* ==========================================================================
   V1.00 — GARDE-FOU PLEIN ÉCRAN CARTE / SURFACE / NAVIGATION
   Une seule géométrie de carte pour les 3 modes.
   Corrige notamment le bandeau vide sous Surface en paysage.
   ========================================================================== */

/* Le conteneur carte ne réserve JAMAIS la hauteur du dock dans les modes terrain. */
body:is(.hd-map-focus,.hd-surface-focus,.hd-drive-mode) #ecran-carte{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  padding-bottom:0!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}

body:is(.hd-map-focus,.hd-surface-focus,.hd-drive-mode) #map-zone{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}

/* Le canvas suit toujours exactement son conteneur. */
body:is(.hd-map-focus,.hd-surface-focus,.hd-drive-mode) #maplibre-map,
body:is(.hd-map-focus,.hd-surface-focus,.hd-drive-mode) #maplibre-map .maplibregl-map,
body:is(.hd-map-focus,.hd-surface-focus,.hd-drive-mode) #maplibre-map .maplibregl-canvas-container,
body:is(.hd-map-focus,.hd-surface-focus,.hd-drive-mode) #maplibre-map canvas{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
}

/* PWA iPhone : utiliser la hauteur calculée par HotelDelta, sans footer résiduel. */
html.hd-standalone body:is(.hd-map-focus,.hd-surface-focus,.hd-drive-mode) #ecran-carte{
  top:0!important;
  right:0!important;
  bottom:0!important;
  left:0!important;
  height:var(--hd-app-height)!important;
  min-height:var(--hd-app-height)!important;
  max-height:var(--hd-app-height)!important;
  padding-bottom:0!important;
}

html.hd-standalone body:is(.hd-map-focus,.hd-surface-focus,.hd-drive-mode) #map-zone{
  inset:0!important;
  height:100%!important;
  min-height:100%!important;
  max-height:100%!important;
}

/* Surface : panneau = overlay. Il ne doit jamais repousser/réduire la carte. */
body.hd-surface-focus #surface-panel{
  position:fixed!important;
  z-index:9700!important;
  left:50%!important;
  right:auto!important;
  top:auto!important;
  transform:translateX(-50%)!important;
  margin:0!important;
  box-sizing:border-box!important;
}

/* Portrait : rendu existant conservé. */
@media (orientation:portrait){
  body.hd-surface-focus #surface-panel{
    width:min(calc(100% - 28px),680px)!important;
    bottom:calc(12px + env(safe-area-inset-bottom,0px))!important;
  }
}

/* Paysage : panneau compact centré, carte visible jusque sous le panneau. */
@media (orientation:landscape){
  body.hd-surface-focus #ecran-carte,
  body.hd-map-focus #ecran-carte,
  body.hd-drive-mode #ecran-carte{
    inset:0!important;
    height:100%!important;
    padding-bottom:0!important;
  }

  html.hd-standalone body:is(.hd-map-focus,.hd-surface-focus,.hd-drive-mode) #ecran-carte{
    height:var(--hd-app-height)!important;
  }

  body.hd-surface-focus #surface-panel{
    width:min(49vw,620px)!important;
    max-width:620px!important;
    bottom:calc(10px + env(safe-area-inset-bottom,0px))!important;
  }
}

/* Dock masqué = overlay uniquement, aucune influence sur le layout. */
body.hd-map-focus #tab-bar,
body.hd-surface-focus #tab-bar,
body.hd-drive-mode #tab-bar{
  position:fixed!important;
}

/* Évite les anciens padding/footer historiques qui pourraient réapparaître
   après rotation ou réouverture d'un panneau. */
body:is(.hd-map-focus,.hd-surface-focus,.hd-drive-mode){
  --hd-map-bottom-reserve:0px!important;
}


/* ==========================================================================
   V1.01 — SURFACE : MAISON SEULE / AUCUN DOCK
   Règles finales et autoritaires pour éviter les régressions d'état.
   ========================================================================== */

/* Surface ne montre JAMAIS le dock, même si une vieille classe menu subsiste. */
body.hd-surface-focus #tab-bar,
body.hd-surface-focus.hd-map-menu-open #tab-bar,
body.hd-surface-focus.hd-drive-menu-open #tab-bar,
html.hd-standalone body.hd-surface-focus #tab-bar,
html.hd-standalone body.hd-surface-focus.hd-map-menu-open #tab-bar,
html.hd-standalone body.hd-surface-focus.hd-drive-menu-open #tab-bar{
  transform:translateY(calc(100% + 44px))!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

/* La Maison dédiée est visible en Surface. */
body.hd-surface-focus:not(.hd-drive-mode) #hd-map-home{
  display:flex!important;
  z-index:9850!important;
  left:calc(14px + env(safe-area-inset-left))!important;
  right:auto!important;
  top:calc(14px + env(safe-area-inset-top))!important;
  bottom:auto!important;
  transform:none!important;
}

/* Le panneau Surface reste seul en bas, posé sur la carte plein écran. */
body.hd-surface-focus #surface-panel{
  z-index:9700!important;
}

/* Surface : aucun espace n'est réservé au dock, quelle que soit l'orientation. */
body.hd-surface-focus #ecran-carte,
body.hd-surface-focus #map-zone{
  bottom:0!important;
  padding-bottom:0!important;
  margin-bottom:0!important;
}

/* Carte : on conserve sa logique actuelle (Maison => dock temporaire).
   On neutralise uniquement d'éventuelles classes Surface résiduelles. */
body.hd-map-focus:not(.hd-surface-focus) #hd-map-home{
  display:flex!important;
}

/* En paysage la Maison Surface respecte l'encoche / Dynamic Island. */
@media (orientation:landscape){
  body.hd-surface-focus:not(.hd-drive-mode) #hd-map-home{
    left:calc(12px + env(safe-area-inset-left))!important;
    top:calc(12px + env(safe-area-inset-top))!important;
  }
}

/* En portrait idem : Maison en haut, donc aucune collision avec le panneau Surface. */
@media (orientation:portrait){
  body.hd-surface-focus:not(.hd-drive-mode) #hd-map-home{
    left:calc(12px + env(safe-area-inset-left))!important;
    top:calc(12px + env(safe-area-inset-top))!important;
  }
}


/* ==========================================================================
   V1.02 — NAVIGATION SANS DOCK
   Accueil = hub. Maison UNIQUEMENT Carte + Surface, toujours présente.
   ========================================================================== */

/* Aucun dock n'existe plus dans le DOM. Cette règle protège aussi un ancien cache HTML. */
#tab-bar{display:none!important}

/* Maison : cachée par défaut, visible exclusivement en Carte / Surface. */
#hd-map-home{
  display:none!important;
  position:fixed!important;
  z-index:9900!important;
  width:52px!important;
  height:52px!important;
  min-width:52px!important;
  min-height:52px!important;
  border-radius:17px!important;
  color:#eaf7ff!important;
  border:1px solid rgba(113,178,239,.30)!important;
  background:linear-gradient(145deg,rgba(19,57,96,.96),rgba(11,34,65,.98))!important;
  box-shadow:
    0 10px 24px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 18px rgba(47,143,236,.14)!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0!important;
}

/* Position unique : bas-droite, safe-area incluse. */
body.hd-map-focus:not(.hd-drive-mode) #hd-map-home,
body.hd-surface-focus:not(.hd-drive-mode) #hd-map-home{
  display:flex!important;
  right:calc(14px + env(safe-area-inset-right,0px))!important;
  bottom:calc(14px + env(safe-area-inset-bottom,0px))!important;
  left:auto!important;
  top:auto!important;
  transform:none!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}

#hd-map-home svg{
  width:27px!important;
  height:27px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.9!important;
}

/* Surface : le panneau se décale si nécessaire pour garantir zéro recouvrement
   avec la Maison, tout en laissant la carte plein écran dessous. */
@media (orientation:portrait){
  body.hd-surface-focus #surface-panel{
    bottom:calc(78px + env(safe-area-inset-bottom,0px))!important;
  }
}
@media (orientation:landscape){
  body.hd-surface-focus #surface-panel{
    bottom:calc(12px + env(safe-area-inset-bottom,0px))!important;
  }
  body.hd-surface-focus:not(.hd-drive-mode) #hd-map-home{
    right:calc(12px + env(safe-area-inset-right,0px))!important;
    bottom:calc(12px + env(safe-area-inset-bottom,0px))!important;
  }
}

/* Navigation active : pas de Maison, uniquement ses commandes métier. */
body.hd-drive-mode #hd-map-home,
#hd-drive-home{
  display:none!important;
}


/* ==========================================================================
   V1.03 — NAVIGATION SIMPLE / AUDIT PORTRAIT + PAYSAGE
   Règles finales : aucun dock fantôme, Carte plein écran, Surface outil Carte.
   ========================================================================== */

/* Plus aucun espace n'est réservé à l'ancien dock, navigateur compris. */
html:not(.hd-standalone) #ecran-accueil,
html:not(.hd-standalone) #ecran-carte{
  padding-bottom:0!important;
}
html:not(.hd-standalone) #layers-panel,
html:not(.hd-standalone) #doctrine-panel,
html:not(.hd-standalone) #parametres-panel,
html:not(.hd-standalone) #legende-panel,
html:not(.hd-standalone) #glossaire-panel,
html:not(.hd-standalone) #info-journaliere-panel,
html:not(.hd-standalone) #meteo-panel,
html:not(.hd-standalone) #feux-liste-panel{
  bottom:0!important;
}
html:not(.hd-standalone) #meteo-panel{
  padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))!important;
}

/* Carte et Surface : la vraie carte occupe toujours 100 % du viewport. */
body:is(.hd-map-focus,.hd-surface-focus,.hd-drive-mode) #ecran-carte,
body:is(.hd-map-focus,.hd-surface-focus,.hd-drive-mode) #map-zone{
  position:fixed!important;
  inset:0!important;
  width:100%!important;
  height:100dvh!important;
  min-height:100dvh!important;
  max-height:100dvh!important;
  margin:0!important;
  padding:0!important;
}
html.hd-standalone body:is(.hd-map-focus,.hd-surface-focus,.hd-drive-mode) #ecran-carte,
html.hd-standalone body:is(.hd-map-focus,.hd-surface-focus,.hd-drive-mode) #map-zone{
  height:var(--hd-app-height)!important;
  min-height:var(--hd-app-height)!important;
  max-height:var(--hd-app-height)!important;
}

/* Maison : SEULEMENT Carte + Surface, systématique, bas-gauche. */
body.hd-map-focus:not(.hd-drive-mode) #hd-map-home,
body.hd-surface-focus:not(.hd-drive-mode) #hd-map-home{
  display:flex!important;
  left:calc(14px + env(safe-area-inset-left,0px))!important;
  right:auto!important;
  top:auto!important;
  bottom:calc(14px + env(safe-area-inset-bottom,0px))!important;
  z-index:9950!important;
  transform:none!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
body:not(.hd-map-focus):not(.hd-surface-focus) #hd-map-home,
body.hd-drive-mode #hd-map-home{
  display:none!important;
}

/* En Surface portrait, le panneau reste un overlay et remonte juste assez
   pour ne jamais recouvrir la Maison. La carte reste plein écran dessous. */
@media (orientation:portrait){
  body.hd-surface-focus #surface-panel{
    bottom:calc(78px + env(safe-area-inset-bottom,0px))!important;
    width:min(calc(100% - 28px),680px)!important;
  }
}
@media (orientation:landscape){
  body.hd-map-focus:not(.hd-drive-mode) #hd-map-home,
  body.hd-surface-focus:not(.hd-drive-mode) #hd-map-home{
    left:calc(12px + env(safe-area-inset-left,0px))!important;
    bottom:calc(12px + env(safe-area-inset-bottom,0px))!important;
  }
  body.hd-surface-focus #surface-panel{
    width:min(49vw,620px)!important;
    max-width:620px!important;
    bottom:calc(10px + env(safe-area-inset-bottom,0px))!important;
  }
}

/* Couches : Surface devient explicitement un outil terrain, pas une couche. */
#layers-panel .hd-layer-tools-block{
  margin:8px 0 11px!important;
}
#layers-panel .hd-surface-entry{
  width:100%!important;
  min-height:58px!important;
  display:grid!important;
  grid-template-columns:40px minmax(0,1fr) 20px!important;
  align-items:center!important;
  gap:10px!important;
  padding:9px 11px!important;
  border:1px solid rgba(104,170,236,.18)!important;
  border-radius:15px!important;
  background:linear-gradient(145deg,rgba(26,54,89,.88),rgba(18,39,68,.94))!important;
  color:var(--text)!important;
  text-align:left!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
}
#layers-panel .hd-surface-entry:active{transform:scale(.988)!important}
#layers-panel .hd-surface-entry-icon{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  color:#8bc9ff;background:rgba(49,132,218,.14);border:1px solid rgba(85,161,235,.16);
}
#layers-panel .hd-surface-entry-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8}
#layers-panel .hd-surface-entry>span:nth-child(2){display:flex;flex-direction:column;min-width:0;gap:2px}
#layers-panel .hd-surface-entry b{font-size:13px!important;color:#eef7ff!important}
#layers-panel .hd-surface-entry small{font-size:10px!important;color:#91a7c2!important}
#layers-panel .hd-surface-entry .hd-chevron{width:18px!important;height:18px!important;color:#7693b3!important}

/* Accueil : après retrait de Surface, deux raccourcis équilibrés. */
.hd-home-v097 .hd-home-quick{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}

/* Météo : vrai bouton Retour à gauche, Actualiser à droite. */
#meteo-panel .hd-meteo-header{
  display:grid!important;
  grid-template-columns:42px minmax(0,1fr) 42px!important;
  align-items:center!important;
  gap:8px!important;
  min-height:62px!important;
  position:sticky!important;
  top:0!important;
  z-index:30!important;
  box-sizing:border-box!important;
  padding-left:max(12px,env(safe-area-inset-left,0px))!important;
  padding-right:max(12px,env(safe-area-inset-right,0px))!important;
}
#meteo-panel .hd-meteo-back{
  width:38px!important;height:38px!important;min-width:38px!important;
  border-radius:13px!important;margin:0!important;
}
#meteo-panel .hd-meteo-back svg{width:19px!important;height:19px!important}
#meteo-panel .hd-panel-title{min-width:0!important}
#meteo-panel #meteo-actualiser{
  width:38px!important;height:38px!important;min-width:38px!important;
  margin:0!important;padding:0!important;border-radius:13px!important;
}

/* Accueil paysage : vrai layout horizontal, compact et sans chevauchement.
   Tout reste accessible; si un très petit écran exige plus de hauteur,
   le scroll vertical reste possible plutôt que de couper du contenu. */
@media (orientation:landscape){
  #ecran-accueil{
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch;
  }
  .hd-home-v097{
    min-height:100%!important;
    box-sizing:border-box!important;
    display:grid!important;
    grid-template-columns:minmax(210px,.86fr) minmax(300px,1.2fr) minmax(250px,1fr)!important;
    grid-template-areas:
      "top map quick"
      "status map actions"
      "memo memo memo"!important;
    grid-template-rows:auto minmax(92px,auto) auto!important;
    align-items:stretch!important;
    gap:8px 10px!important;
    padding-left:max(12px,env(safe-area-inset-left,0px))!important;
    padding-right:max(12px,env(safe-area-inset-right,0px))!important;
    padding-top:max(8px,env(safe-area-inset-top,0px))!important;
    padding-bottom:max(8px,env(safe-area-inset-bottom,0px))!important;
  }
  .hd-home-v097 .hd-home-top{grid-area:top!important;min-height:50px!important}
  .hd-home-v097 #accueil-statut{grid-area:status!important;min-height:70px!important;height:100%!important}
  .hd-home-v097 .hd-home-map-hero{grid-area:map!important;min-height:150px!important;height:100%!important}
  .hd-home-v097 .hd-home-quick{grid-area:quick!important;align-self:start!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .hd-home-v097 .hd-home-quick-card{min-height:66px!important;padding:7px 6px!important}
  .hd-home-v097 .hd-home-actions{grid-area:actions!important;display:grid!important;grid-template-columns:1fr!important;gap:7px!important;align-self:stretch!important}
  .hd-home-v097 .hd-home-action{min-height:48px!important;padding-top:7px!important;padding-bottom:7px!important}
  .hd-home-v097 .hd-home-memo{grid-area:memo!important;margin:0!important;padding:8px 10px!important}
  .hd-home-v097 .hd-home-memo-title{padding-bottom:5px!important}
  .hd-home-v097 .accueil-memo-radio{min-height:38px!important}
  .hd-home-v097 .hd-settings-btn{width:44px!important;height:44px!important;min-width:44px!important}
  .hd-home-v097 .hd-home-top h1{font-size:27px!important}
}

/* Très petit paysage (anciens iPhone / split viewport) : encore plus compact. */
@media (orientation:landscape) and (max-height:430px){
  .hd-home-v097{gap:6px 8px!important}
  .hd-home-v097 .hd-home-top{min-height:44px!important}
  .hd-home-v097 #accueil-statut{min-height:62px!important;padding:7px 10px!important}
  .hd-home-v097 .hd-home-map-hero{min-height:132px!important;padding:12px!important}
  .hd-home-v097 .hd-home-quick-card{min-height:58px!important}
  .hd-home-v097 .hd-home-action{min-height:43px!important}
  .hd-home-v097 .hd-home-memo{padding:6px 9px!important}
  .hd-home-v097 .hd-home-memo-title{font-size:10px!important}
  .hd-home-v097 .accueil-memo-radio{min-height:34px!important}
}

/* Panneaux plein écran en paysage : safe areas latérales, en-têtes toujours lisibles. */
@media (orientation:landscape){
  #meteo-panel,#doctrine-panel,#glossaire-panel,#parametres-panel,#info-journaliere-panel,#feux-liste-panel{
    box-sizing:border-box!important;
  }
  #doctrine-panel .panel-header,#glossaire-panel .panel-header,#parametres-panel .panel-header,
  #info-journaliere-panel .panel-header,#feux-liste-panel .panel-header{
    padding-left:max(14px,env(safe-area-inset-left,0px))!important;
    padding-right:max(14px,env(safe-area-inset-right,0px))!important;
  }
}

/* ========================================================================== 
   V1.04 — PWA PAYSAGE / ACCUEIL PLEIN VIEWPORT
   Corrige le lancement depuis le raccourci iOS : aucune ancienne réserve de
   dock, largeur réelle disponible et aucun élément coupé horizontalement.
   ========================================================================== */

/* L'ancien footer n'existe plus : en PWA l'Accueil doit utiliser TOUT le viewport. */
html.hd-standalone #ecran-accueil{
  position:fixed!important;
  inset:0!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  left:0!important;
  width:100%!important;
  height:100dvh!important;
  min-height:100dvh!important;
  max-height:100dvh!important;
  box-sizing:border-box!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding-bottom:max(10px,env(safe-area-inset-bottom,0px))!important;
}

/* Fallback iOS : si dvh n'est pas fiable, la variable synchronisée reste disponible. */
@supports not (height:100dvh){
  html.hd-standalone #ecran-accueil{
    height:var(--hd-app-height,100vh)!important;
    min-height:var(--hd-app-height,100vh)!important;
    max-height:var(--hd-app-height,100vh)!important;
  }
}

@media (orientation:landscape){
  /* Le vieux max-width:720px était incompatible avec le nouveau layout 3 colonnes. */
  html.hd-standalone #ecran-accueil .hd-home-shell,
  #ecran-accueil .hd-home-v097{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    margin:0!important;
  }

  #ecran-accueil .hd-home-v097{
    grid-template-columns:minmax(180px,.82fr) minmax(260px,1.18fr) minmax(210px,.95fr)!important;
    box-sizing:border-box!important;
    overflow:visible!important;
  }

  #ecran-accueil .hd-home-v097 > *,
  #ecran-accueil .hd-home-quick,
  #ecran-accueil .hd-home-actions,
  #ecran-accueil .hd-home-map-hero,
  #ecran-accueil #accueil-statut{
    min-width:0!important;
    max-width:100%!important;
  }

  /* Le mémo reste dans le flux et ne peut plus être masqué sous un ancien footer. */
  #ecran-accueil .hd-home-memo{
    position:relative!important;
    left:auto!important;right:auto!important;bottom:auto!important;
    width:auto!important;
  }
}

/* Très faible hauteur : compact mais jamais coupé ; le scroll reste le dernier recours. */
@media (orientation:landscape) and (max-height:430px){
  html.hd-standalone #ecran-accueil{
    overflow-y:auto!important;
  }
  #ecran-accueil .hd-home-v097{
    grid-template-rows:auto minmax(72px,auto) auto!important;
    padding-bottom:max(6px,env(safe-area-inset-bottom,0px))!important;
  }
}

/* ========================================================================== 
   V1.05 — VIEWPORT UNIVERSEL / PORTRAIT + PAYSAGE / iOS + ANDROID
   Règles finales autoritaires. Aucun écran métier ne réserve d'espace fantôme.
   ========================================================================== */

/* 1. Accueil : le couple fixed + inset remplit le viewport réel.
   Ne jamais cumuler inset:0 avec une hauteur dvh/variable qui peut être plus
   courte sur iOS standalone (barre d'état / visualViewport). */
#ecran-accueil,
html.hd-standalone #ecran-accueil,
html:not(.hd-standalone) #ecran-accueil{
  position:fixed!important;
  inset:0!important;
  top:0!important;right:0!important;bottom:0!important;left:0!important;
  width:auto!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  box-sizing:border-box!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior-y:contain!important;
  -webkit-overflow-scrolling:touch!important;
  padding-bottom:max(12px,env(safe-area-inset-bottom,0px))!important;
  background-color:var(--bg)!important;
}

/* Le contenu peut dépasser : on scrolle. Il ne doit jamais être plafonné à
   une ancienne hauteur calculée ni laisser une zone morte en bas. */
#ecran-accueil .hd-home-shell,
#ecran-accueil .hd-home-v097{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  height:auto!important;
  min-height:100%!important;
  max-height:none!important;
}

/* 2. Carte / Surface / Navigation : même principe, carte réellement bord à bord
   sur Safari, PWA iOS, Chrome Android et PWA Android. */
body:is(.hd-map-focus,.hd-surface-focus,.hd-drive-mode) #ecran-carte,
body:is(.hd-map-focus,.hd-surface-focus,.hd-drive-mode) #map-zone,
html.hd-standalone body:is(.hd-map-focus,.hd-surface-focus,.hd-drive-mode) #ecran-carte,
html.hd-standalone body:is(.hd-map-focus,.hd-surface-focus,.hd-drive-mode) #map-zone{
  position:fixed!important;
  inset:0!important;
  top:0!important;right:0!important;bottom:0!important;left:0!important;
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  box-sizing:border-box!important;
}
#maplibre-map,.maplibregl-map,.maplibregl-canvas-container,.maplibregl-canvas{
  max-width:none!important;
  max-height:none!important;
}

/* 3. Tous les panneaux plein écran suivent eux aussi le viewport par inset,
   jamais une hauteur calculée. */
#meteo-panel,#doctrine-panel,#glossaire-panel,#parametres-panel,#about-panel,
#legende-panel,#info-journaliere-panel,#feux-liste-panel{
  position:fixed!important;
  inset:0!important;
  width:auto!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  box-sizing:border-box!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
}

/* 4. Portrait : disposition verticale naturelle, scroll intégral jusqu'au
   dernier bloc, y compris sur petits Android/iPhone. */
@media (orientation:portrait){
  #ecran-accueil .hd-home-v097{
    display:flex!important;
    flex-direction:column!important;
    gap:11px!important;
    padding-left:max(14px,env(safe-area-inset-left,0px))!important;
    padding-right:max(14px,env(safe-area-inset-right,0px))!important;
    padding-top:max(8px,env(safe-area-inset-top,0px))!important;
    padding-bottom:max(14px,env(safe-area-inset-bottom,0px))!important;
  }
  #ecran-accueil .hd-home-memo{
    flex:0 0 auto!important;
    margin-bottom:0!important;
  }
}

/* 5. Paysage large : 3 zones équilibrées sans min-width qui force un débordement. */
@media (orientation:landscape) and (min-width:801px){
  #ecran-accueil .hd-home-v097{
    display:grid!important;
    grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr) minmax(0,.95fr)!important;
    grid-template-areas:
      "top map quick"
      "status map actions"
      "memo memo memo"!important;
    grid-template-rows:auto minmax(0,1fr) auto!important;
    align-items:stretch!important;
    gap:8px 10px!important;
    padding-left:max(12px,env(safe-area-inset-left,0px))!important;
    padding-right:max(12px,env(safe-area-inset-right,0px))!important;
    padding-top:max(8px,env(safe-area-inset-top,0px))!important;
    padding-bottom:max(10px,env(safe-area-inset-bottom,0px))!important;
  }
}

/* 6. Paysage étroit : deux colonnes. Plus fiable sur anciens iPhone et petits
   Android que de comprimer artificiellement trois colonnes. */
@media (orientation:landscape) and (max-width:800px){
  #ecran-accueil .hd-home-v097{
    display:grid!important;
    grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)!important;
    grid-template-areas:
      "top map"
      "status map"
      "quick actions"
      "memo memo"!important;
    grid-template-rows:auto auto auto auto!important;
    align-items:stretch!important;
    gap:7px 9px!important;
    padding-left:max(10px,env(safe-area-inset-left,0px))!important;
    padding-right:max(10px,env(safe-area-inset-right,0px))!important;
    padding-top:max(7px,env(safe-area-inset-top,0px))!important;
    padding-bottom:max(9px,env(safe-area-inset-bottom,0px))!important;
  }
  #ecran-accueil .hd-home-map-hero{min-height:138px!important}
  #ecran-accueil .hd-home-quick-card{min-height:58px!important}
  #ecran-accueil .hd-home-action{min-height:44px!important}
}

/* 7. Très faible hauteur : le contenu reste utilisable par scroll, jamais coupé. */
@media (orientation:landscape) and (max-height:430px){
  #ecran-accueil{overflow-y:auto!important}
  #ecran-accueil .hd-home-v097{
    min-height:max-content!important;
    align-content:start!important;
  }
  #ecran-accueil .hd-home-top{min-height:40px!important}
  #ecran-accueil #accueil-statut{min-height:60px!important}
  #ecran-accueil .hd-home-map-hero{min-height:126px!important}
  #ecran-accueil .hd-home-quick-card{min-height:54px!important}
  #ecran-accueil .hd-home-action{min-height:42px!important}
}

/* 8. Référentiel + Paramètres en paysage : typographie de lecture normale.
   Pas de titres/cartes surdimensionnés simplement parce que le téléphone tourne. */
@media (orientation:landscape){
  #doctrine-panel,#glossaire-panel,#parametres-panel{
    font-size:13.5px!important;
    line-height:1.42!important;
  }
  #doctrine-panel .panel-header,
  #glossaire-panel .panel-header,
  #parametres-panel .panel-header{
    min-height:52px!important;
    padding-top:max(7px,env(safe-area-inset-top,0px))!important;
    padding-bottom:7px!important;
  }
  #doctrine-panel .panel-header>span,
  #glossaire-panel .panel-header>span,
  #parametres-panel>.panel-header>span{
    font-size:16px!important;
    line-height:1.15!important;
    font-weight:700!important;
  }
  #doctrine-panel .hd-ref-tabs,
  #glossaire-panel .hd-ref-tabs{
    min-height:42px!important;
    margin-bottom:8px!important;
    padding:3px!important;
  }
  #doctrine-panel .hd-ref-tabs button,
  #glossaire-panel .hd-ref-tabs button{
    min-height:36px!important;
    padding:6px 9px!important;
    font-size:12px!important;
  }
  #doctrine-panel .doctrine-section-titre b{font-size:14px!important}
  #doctrine-panel .doctrine-section-corps{font-size:13px!important;line-height:1.45!important}
  #doctrine-panel .doctrine-section-corps h3{font-size:13px!important}
  #doctrine-panel .doctrine-section-corps table{font-size:11.5px!important}
  #glossaire-panel .glossaire-terme{font-size:13px!important;line-height:1.42!important}
  #parametres-panel .panel-section-title,
  #parametres-panel label,
  #parametres-panel .secteur-bloc label{font-size:12.5px!important}
  #parametres-panel select,
  #parametres-panel button,
  #parametres-panel .note-secteur{font-size:12px!important}
  #parametres-panel .hd-settings-links b{font-size:12.5px!important}
  #parametres-panel .hd-settings-links small{font-size:10px!important}
}

/* 9. Les boutons flottants respectent toujours les safe areas et ne se
   superposent pas aux outils de droite. Maison = Carte + Surface uniquement. */
body.hd-map-focus:not(.hd-drive-mode) #hd-map-home,
body.hd-surface-focus:not(.hd-drive-mode) #hd-map-home{
  left:max(14px,calc(env(safe-area-inset-left,0px) + 10px))!important;
  right:auto!important;
  bottom:max(14px,calc(env(safe-area-inset-bottom,0px) + 10px))!important;
  top:auto!important;
}

/* Le panneau Surface reste au-dessus de la carte sans pousser celle-ci. */
body.hd-surface-focus #surface-panel{
  position:fixed!important;
  z-index:9700!important;
  box-sizing:border-box!important;
}

/* 10. Aucun reliquat de dock ne doit influencer le layout, même avec un HTML
   provenant d'un ancien cache de service worker. */
#tab-bar,.bottom-nav,#bottom-nav,.app-dock,#dock,#main-nav{
  display:none!important;
  height:0!important;
  min-height:0!important;
  max-height:0!important;
  margin:0!important;
  padding:0!important;
}


/* ==========================================================================
   V1.06 — GARDE-F0U CARTE PLEIN ÉCRAN UNIVERSEL
   La visibilité de l'écran Carte est la source de vérité.
   Aucun résumé d'itinéraire / panneau / footer ne peut réduire MapLibre.
   ========================================================================== */
#ecran-carte:not(.masque){
  display:block!important;
  position:fixed!important;
  inset:0!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  left:0!important;
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
  flex:none!important;
}
#ecran-carte:not(.masque) #map-zone{
  position:absolute!important;
  inset:0!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  left:0!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  box-sizing:border-box!important;
}
#ecran-carte:not(.masque) #maplibre-map,
#ecran-carte:not(.masque) .maplibregl-map,
#ecran-carte:not(.masque) .maplibregl-canvas-container,
#ecran-carte:not(.masque) .maplibregl-canvas{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
}

/* Résumé itinéraire = overlay pur. Il ne participe jamais à la géométrie carte. */
#ecran-carte:not(.masque) #route-resume{
  position:absolute!important;
  left:max(12px,env(safe-area-inset-left,0px))!important;
  right:max(70px,env(safe-area-inset-right,0px))!important;
  bottom:max(10px,env(safe-area-inset-bottom,0px))!important;
  z-index:9600!important;
  margin:0!important;
}

/* En paysage, garder le résumé compact et dans le viewport. */
@media (orientation:landscape){
  #ecran-carte:not(.masque) #route-resume{
    left:max(12px,calc(env(safe-area-inset-left,0px) + 8px))!important;
    right:max(70px,calc(env(safe-area-inset-right,0px) + 8px))!important;
    bottom:max(10px,calc(env(safe-area-inset-bottom,0px) + 6px))!important;
    max-height:min(30dvh,118px)!important;
  }
}

/* Même si un ancien cache réinjecte une hauteur de footer, elle vaut zéro. */
:root{
  --hd-footer-h:0px!important;
  --hd-footer-content-h:0px!important;
}


/* ==========================================================================
   V1.07 — NAVIGATION PAYSAGE : COMMANDES STABLES
   Ouvrir/fermer la palette Cartes & couches ne doit jamais déplacer Arrêter.
   ========================================================================== */
@media (orientation:landscape){
  body.hd-drive-mode #hd-drive-stop,
  body.hd-drive-mode.hd-tools-expanded #hd-drive-stop,
  body.hd-drive-mode:has(#hd-map-tools.open) #hd-drive-stop{
    position:fixed!important;
    left:auto!important;
    right:calc(14px + env(safe-area-inset-right,0px))!important;
    bottom:calc(12px + env(safe-area-inset-bottom,0px))!important;
    width:124px!important;
    min-width:124px!important;
    max-width:124px!important;
    height:42px!important;
    margin:0!important;
    transform:none!important;
  }

  /* La palette reste dans son rail droit et n'influence aucun autre overlay. */
  body.hd-drive-mode #hd-map-tools,
  body.hd-drive-mode #hd-map-tools.open{
    position:fixed!important;
    right:calc(10px + env(safe-area-inset-right,0px))!important;
    left:auto!important;
    margin:0!important;
    transform:none!important;
  }
}


/* ==========================================================================
   V1.08 — GARDE D'ÉTAT NAVIGATION + MÉTÉO ACCUEIL RESPONSIVE
   ========================================================================== */

/* Commandes de conduite : invisibles hors navigation, sans exception.
   Cela neutralise les anciennes règles qui forçaient #hd-drive-stop en flex. */
#hd-drive-ui,
#hd-drive-stop,
#hd-drive-hud,
#hd-drive-vehicle{
  display:none!important;
}
body.hd-drive-mode #hd-drive-ui{
  display:block!important;
  pointer-events:none!important;
}
body.hd-drive-mode #hd-drive-hud{
  display:grid!important;
  pointer-events:auto!important;
}
body.hd-drive-mode #hd-drive-stop{
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
  z-index:9950!important;
}

/* En conduite paysage, Arrêter reste visible et stable même si une ancienne
   classe Carte/Surface est brièvement présente pendant une transition. */
@media (orientation:landscape){
  body.hd-drive-mode #hd-drive-stop,
  body.hd-drive-mode.hd-map-focus #hd-drive-stop,
  body.hd-drive-mode.hd-surface-focus #hd-drive-stop,
  body.hd-drive-mode.hd-tools-expanded #hd-drive-stop,
  body.hd-drive-mode:has(#hd-map-tools.open) #hd-drive-stop{
    display:flex!important;
    position:fixed!important;
    visibility:visible!important;
    opacity:1!important;
    left:auto!important;
    right:calc(14px + env(safe-area-inset-right,0px))!important;
    bottom:calc(12px + env(safe-area-inset-bottom,0px))!important;
    width:124px!important;
    min-width:124px!important;
    max-width:124px!important;
    height:42px!important;
    transform:none!important;
    margin:0!important;
  }
}

/* Accueil météo : ne jamais tronquer la commune, ne jamais laisser le vent
   chevaucher température/humidité. */
.hd-home-v097 #accueil-statut .accueil-statut-texte{
  min-width:0!important;
  width:100%!important;
}
.hd-home-v097 #accueil-statut .accueil-statut-ligne1{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:baseline!important;
  column-gap:10px!important;
  row-gap:2px!important;
  min-width:0!important;
}
.hd-home-v097 #accueil-statut #accueil-code{
  min-width:0!important;
}
.hd-home-v097 #accueil-statut #accueil-commune{
  min-width:0!important;
  max-width:none!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  text-align:right!important;
  line-height:1.15!important;
}
.hd-home-v097 #accueil-statut .accueil-meteo{
  display:grid!important;
  grid-template-columns:minmax(54px,.8fr) minmax(64px,.9fr) minmax(112px,1.45fr)!important;
  width:100%!important;
  min-width:0!important;
  align-items:start!important;
  column-gap:10px!important;
  row-gap:3px!important;
}
.hd-home-v097 #accueil-statut .accueil-meteo-item{
  min-width:0!important;
  width:auto!important;
  overflow:hidden!important;
}
.hd-home-v097 #accueil-statut .accueil-meteo-item b,
.hd-home-v097 #accueil-statut .accueil-meteo-item span{
  display:block!important;
  max-width:100%!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  overflow-wrap:normal!important;
  line-height:1.12!important;
}
.hd-home-v097 #accueil-statut .accueil-meteo-item:nth-child(3) b{
  font-size:12px!important;
  letter-spacing:-.25px!important;
}

/* Portrait étroit : commune passe proprement sous le code si nécessaire,
   météo garde trois colonnes sans collision. */
@media (orientation:portrait) and (max-width:430px){
  .hd-home-v097 #accueil-statut .accueil-statut-ligne1{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .hd-home-v097 #accueil-statut #accueil-commune{
    text-align:left!important;
    font-size:10px!important;
  }
  .hd-home-v097 #accueil-statut .accueil-meteo{
    grid-template-columns:minmax(50px,.72fr) minmax(58px,.8fr) minmax(108px,1.35fr)!important;
    column-gap:7px!important;
  }
  .hd-home-v097 #accueil-statut .accueil-meteo-item:nth-child(3) b{
    font-size:11.5px!important;
  }
}

/* Paysage : la carte météo de l'Accueil est étroite ; présentation verticale
   compacte pour préserver les noms de communes longs et les valeurs de vent. */
@media (orientation:landscape){
  .hd-home-v097 #accueil-statut{
    min-width:0!important;
    overflow:hidden!important;
  }
  .hd-home-v097 #accueil-statut .accueil-statut-ligne1{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .hd-home-v097 #accueil-statut #accueil-commune{
    text-align:left!important;
    font-size:10px!important;
  }
  .hd-home-v097 #accueil-statut .accueil-meteo{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    column-gap:6px!important;
  }
  .hd-home-v097 #accueil-statut .accueil-meteo-item b{
    font-size:11.5px!important;
  }
  .hd-home-v097 #accueil-statut .accueil-meteo-item:nth-child(3) b{
    font-size:10.5px!important;
  }
  .hd-home-v097 #accueil-statut .accueil-meteo-item span{
    font-size:8px!important;
  }
  .hd-home-v097 #accueil-statut .accueil-meteo-anim{
    width:58px!important;
    min-width:58px!important;
    transform:scale(.7)!important;
  }
}