/* ==========================================================================
   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){
  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){
  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;
}