/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════
   Rafinex360 1.65.0 — « Liquid Glass » : système de design inspiré d'iOS 26 / iPadOS 26.
   Couche purement visuelle chargée en dernier : aucune donnée, aucun calcul, aucune page n'est modifiée.
   Thèmes : html.rx-nuit (sombre) et html.rx-clair (clair). Densité : css/density.css (Compact | Standard | Confortable).

   Performance (Android) :
   - le flou (backdrop-filter) n'est posé que sur 4 surfaces flottantes : barre du haut, barre d'onglets, dialogues,
     bouton Danger. Les cartes n'ont pas de flou : remplissage translucide + reflet en dégradé (coût GPU quasi nul) ;
   - l'ancien flou plein écran de .app (34 px, thème Nuit) est supprimé : c'était la surface la plus coûteuse ;
   - html.lg-lite (Plus › Apparence › Effets de verre : Allégés, ou appareil modeste détecté par js/look.js,
     ou « réduire la transparence » du système) : aucun flou, surfaces opaques ;
   - animations : transform/opacity seulement, 160–320 ms, coupées par html.rx-still (réduire les animations).
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ───────────── 1. Jetons ───────────── */
html.rx-nuit{
  --lg-bg:#070a13;
  --lg-aura-1:rgba(99,102,241,.28);--lg-aura-2:rgba(34,211,238,.16);--lg-aura-3:rgba(168,85,247,.16);
  --lg-fill:rgba(255,255,255,.055);--lg-fill-2:rgba(255,255,255,.085);--lg-fill-3:rgba(255,255,255,.12);
  --lg-card:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
  --lg-stroke:rgba(255,255,255,.10);--lg-stroke-hi:rgba(255,255,255,.18);
  --lg-hi:inset 0 1px 0 rgba(255,255,255,.10),inset 0 0 0 1px rgba(255,255,255,.04);
  --lg-shadow:0 1px 1px rgba(0,0,0,.25),0 12px 32px -16px rgba(0,0,0,.75);
  --lg-shadow-float:0 18px 48px -12px rgba(0,0,0,.7),0 2px 8px rgba(0,0,0,.35);
  --lg-glass:rgba(22,26,40,.58);--lg-glass-strong:rgba(22,26,40,.80);--lg-glass-solid:#161a28;
  --lg-accent:#7c83ff;--lg-accent-2:#22d3ee;
  --lg-primary:linear-gradient(180deg,#8b8ffe 0%,#6366f1 55%,#5457e6 100%);
  --lg-primary-txt:#fff;
  --lg-on:rgba(124,131,255,.22);
  --lg-input:rgba(255,255,255,.06);
  --lg-focus:0 0 0 3px rgba(124,131,255,.38);
}
html.rx-clair{
  --lg-bg:#eef1f7;
  --lg-aura-1:rgba(99,140,255,.22);--lg-aura-2:rgba(56,214,236,.18);--lg-aura-3:rgba(196,140,255,.16);
  --lg-fill:rgba(255,255,255,.62);--lg-fill-2:rgba(255,255,255,.78);--lg-fill-3:rgba(255,255,255,.92);
  --lg-card:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.66));
  --lg-stroke:rgba(15,23,42,.08);--lg-stroke-hi:rgba(255,255,255,.95);
  --lg-hi:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.35);
  --lg-shadow:0 1px 2px rgba(15,23,42,.05),0 10px 28px -16px rgba(15,23,42,.22);
  --lg-shadow-float:0 18px 44px -14px rgba(15,23,42,.30),0 2px 8px rgba(15,23,42,.08);
  --lg-glass:rgba(250,251,255,.66);--lg-glass-strong:rgba(250,251,255,.86);--lg-glass-solid:#f8f9fc;
  --lg-accent:#2563eb;--lg-accent-2:#0891b2;
  --lg-primary:linear-gradient(180deg,#3b82f6 0%,#2563eb 60%,#1d4ed8 100%);
  --lg-primary-txt:#fff;
  --lg-on:rgba(37,99,235,.12);
  --lg-input:rgba(255,255,255,.75);
  --lg-focus:0 0 0 3px rgba(37,99,235,.25);
}
html{--lg-blur:saturate(180%) blur(20px);--lg-blur-soft:saturate(160%) blur(14px);
  --lg-r-xl:24px;--lg-r-lg:20px;--lg-r:14px;--lg-r-sm:11px;
  --lg-ease:cubic-bezier(.32,.72,0,1);--lg-spring:cubic-bezier(.34,1.32,.64,1);--lg-fast:160ms;--lg-mid:240ms}

/* ───────────── 2. Fond : aurore fixe (un seul calque peint une fois, aucun flou) ───────────── */
html body{background:var(--lg-bg)}
html .app{background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60vmax 50vmax at 8% -10%,var(--lg-aura-1),transparent 62%),
             radial-gradient(55vmax 45vmax at 105% 15%,var(--lg-aura-2),transparent 60%),
             radial-gradient(60vmax 50vmax at 50% 115%,var(--lg-aura-3),transparent 62%),var(--lg-bg)}

/* ───────────── 3. Barre du haut : verre ───────────── */
html .app .appbar{background:var(--lg-glass)!important;backdrop-filter:var(--lg-blur);-webkit-backdrop-filter:var(--lg-blur);
  border-bottom:.5px solid var(--lg-stroke)!important;box-shadow:inset 0 -1px 0 rgba(255,255,255,.03)}
html .app .appbar .brand-name{letter-spacing:-.02em}
html .app .appbar .view-title{opacity:.75}
html .app .appbar .icon-btn,html .app .appbar .clock{background:var(--lg-fill)!important;border:.5px solid var(--lg-stroke)!important;box-shadow:var(--lg-hi);
  transition:transform var(--lg-fast) var(--lg-ease),background var(--lg-fast)}
html .app .appbar .icon-btn:active{transform:scale(.92)}

/* ───────────── 4. Barre d'onglets flottante (téléphone, tablette portrait) ───────────── */
@media (max-width:1023px) and (orientation:portrait),(max-width:1023px) and (min-height:521px){
  html .app .tabbar{left:10px!important;right:10px!important;bottom:calc(8px + var(--rx-sab,0px))!important;
    border-radius:28px!important;border:.5px solid var(--lg-stroke-hi)!important;
    background:var(--lg-glass)!important;backdrop-filter:var(--lg-blur);-webkit-backdrop-filter:var(--lg-blur);
    box-shadow:var(--lg-shadow-float),var(--lg-hi)!important;padding:5px 6px!important;
    transition:transform var(--lg-mid) var(--lg-ease),padding var(--lg-mid) var(--lg-ease),bottom var(--lg-mid) var(--lg-ease)}
  html .app .tabbar .tab{border-radius:22px;transition:transform var(--lg-fast) var(--lg-ease),color var(--lg-fast)}
  html .app .tabbar .tab:active{transform:scale(.9)}
  html .app .tabbar .tab svg{transition:transform var(--lg-mid) var(--lg-spring)}
  html .app .tabbar .tab.active svg{transform:translateY(-1px) scale(1.08)}
  /* Accueil épinglé (1.47.2) : fond assorti au verre */
  html .app .tabbar .tab[data-v="dash"]{background:var(--lg-glass-solid)!important;box-shadow:8px 0 12px -10px rgba(0,0,0,.5)!important;border-radius:22px}
  html .app .tabbar .tab[data-v="dash"].active{background:linear-gradient(var(--lg-on),var(--lg-on)),var(--lg-glass-solid)!important}
  /* Barre réduite au défilement vers le bas (js : html.lg-min) : icônes seules, plus basse et plus étroite */
  html.lg-min .app .tabbar{padding:3px 6px!important;bottom:calc(4px + var(--rx-sab,0px))!important}
  html.lg-min .app .tabbar .tab{min-height:40px!important;font-size:0!important;gap:0}
  html.lg-min .app .tabbar .tab .badge{font-size:9px}
  html .app .content{padding-bottom:calc(var(--tabbar-h) + 30px + var(--rx-sab,0px))!important}
  html .hse-sos{bottom:calc(var(--tabbar-h) + 22px + var(--rx-sab,0px))!important}
}
/* Indicateur d'onglet actif : capsule de verre teintée */
html .app .tab-ind{background:var(--lg-on)!important;border-radius:22px!important;box-shadow:inset 0 0 0 .5px var(--lg-stroke-hi),inset 0 1px 0 rgba(255,255,255,.12)!important}
html .app .tab.active{color:var(--lg-accent)!important}

/* Rail latéral (tablette paysage, bureau) : colonne de verre flottante */
@media (min-width:1024px),(max-height:520px) and (orientation:landscape){
  html .app .tabbar{background:var(--lg-glass)!important;backdrop-filter:var(--lg-blur);-webkit-backdrop-filter:var(--lg-blur);
    border:.5px solid var(--lg-stroke-hi)!important;border-radius:26px!important;box-shadow:var(--lg-shadow-float),var(--lg-hi)!important;
    top:calc(10px + env(safe-area-inset-top,0px))!important;bottom:10px!important;left:calc(8px + env(safe-area-inset-left,0px))!important}
  html .app .tabbar .tab{border-radius:16px}
  html .app .tabbar .tab:active{transform:scale(.92)}
}

/* ───────────── 5. Cartes et tuiles (sans flou) ───────────── */
/* bordure en spécificité minimale (:where) : les liserés de couleur des modules (gravité d'incident, état de pompe…) restent prioritaires */
:where(.app) :where(.card,.db-panel,.mm-today,.fab-cur,.fab-sum,.kpi,.metric,.mm-k,.db-kpi){border:.5px solid var(--lg-stroke)}
html .app .card,html .app .db-panel,html .app .mm-today,html .app .fab-cur,html .app .fab-sum{
  background:var(--lg-card)!important;border-radius:var(--lg-r-lg);box-shadow:var(--lg-shadow),var(--lg-hi)!important}
html .app .kpi,html .app .metric,html .app .mm-k,html .app .db-kpi,html .app .pm-card{
  background:var(--lg-fill)!important;border-radius:var(--lg-r);box-shadow:var(--lg-hi)!important}
html .app .card .card{box-shadow:var(--lg-hi)!important;background:var(--lg-fill)!important}
html .app .section-label{letter-spacing:-.01em}
html .app .card-title{letter-spacing:-.01em}
html .app details.more,html .app details.mm-dbox,html .app details.cs-add{border-radius:var(--lg-r)}
html .app details>summary{border-radius:var(--lg-r);transition:background var(--lg-fast)}
html .app .alert{border-radius:var(--lg-r)!important;background:var(--lg-fill)!important}

/* ───────────── 6. Boutons ───────────── */
html .app .btn{border-radius:14px;border:.5px solid var(--lg-stroke)!important;background:var(--lg-fill-2)!important;color:var(--text);
  box-shadow:var(--lg-hi),0 1px 2px rgba(0,0,0,.08)!important;
  transition:transform var(--lg-fast) var(--lg-ease),background var(--lg-fast),box-shadow var(--lg-fast),opacity var(--lg-fast);
  -webkit-tap-highlight-color:transparent}
html .app .btn:hover{background:var(--lg-fill-3)!important}
html .app .btn:active:not(:disabled){transform:scale(.965)}
html .app .btn.primary{background:var(--lg-primary)!important;color:var(--lg-primary-txt)!important;border-color:rgba(255,255,255,.22)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 20px -8px var(--lg-accent)!important;text-shadow:0 1px 1px rgba(0,0,0,.15)}
html .app .btn.danger{color:#fff!important;background:linear-gradient(180deg,#ff6b7f,#e5374f)!important;border-color:rgba(255,255,255,.2)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 20px -10px #e5374f!important}
html .app .btn.ghost{background:transparent!important;box-shadow:none!important;border-color:transparent!important;color:var(--lg-accent)}
html .app .btn:disabled{opacity:.5}
html .app .btn:focus-visible,html .app .tab:focus-visible,html .app .icon-btn:focus-visible{outline:none;box-shadow:var(--lg-focus)!important}
html .app .lnk,html .app .link-btn,html .app .db-link{color:var(--lg-accent)}

/* ───────────── 7. Segments (choix), puces, étiquettes ───────────── */
html .app .seg{background:var(--lg-fill)!important;border:.5px solid var(--lg-stroke)!important;border-radius:14px;padding:3px;gap:3px;box-shadow:inset 0 1px 2px rgba(0,0,0,.08)}
html .app .seg button{border-radius:11px;transition:background var(--lg-mid) var(--lg-ease),color var(--lg-fast),transform var(--lg-fast) var(--lg-ease)}
html .app .seg button:active{transform:scale(.97)}
html .app .seg button.active,html .app .seg button[aria-selected="true"],html .app .seg button[aria-pressed="true"]{
  background:var(--lg-fill-3)!important;color:var(--text)!important;box-shadow:0 2px 8px -2px rgba(0,0,0,.25),inset 0 0 0 .5px var(--lg-stroke-hi)!important}
html .app .chip{border-radius:999px;background:var(--lg-fill)!important;border:.5px solid var(--lg-stroke)!important}
html .app .tag{border-radius:999px}
/* puces et boutons sélectionnés : teinte d'accent (le fond de verre ne doit pas masquer l'état actif) */
html .app .chip.active,html .app .chip[aria-pressed="true"],html .app .btn.active,html .app .btn[aria-pressed="true"]:not(.seg button){
  background:var(--lg-primary)!important;color:var(--lg-primary-txt)!important;border-color:rgba(255,255,255,.22)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 6px 16px -8px var(--lg-accent)!important}

/* ───────────── 8. Champs de saisie ───────────── */
html .app input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),html .app select,html .app textarea{
  background:var(--lg-input)!important;border:.5px solid var(--lg-stroke)!important;border-radius:12px!important;
  transition:box-shadow var(--lg-fast),border-color var(--lg-fast)}
html .app input:focus,html .app select:focus,html .app textarea:focus{outline:none;border-color:var(--lg-accent)!important;box-shadow:var(--lg-focus)!important}
html .app input[type=checkbox],html .app input[type=radio]{accent-color:var(--lg-accent)}

/* ───────────── 9. Dialogues et feuilles : verre + ouverture douce ───────────── */
html dialog[open]{background:var(--lg-glass-strong)!important;backdrop-filter:var(--lg-blur);-webkit-backdrop-filter:var(--lg-blur);
  border:.5px solid var(--lg-stroke-hi)!important;border-radius:var(--lg-r-xl)!important;box-shadow:var(--lg-shadow-float),var(--lg-hi)!important;
  animation:lgDlgIn var(--lg-mid) var(--lg-spring) both}
html dialog::backdrop{background:rgba(5,8,16,.45);animation:lgFade var(--lg-mid) ease both}
html.rx-clair dialog::backdrop{background:rgba(15,23,42,.28)}
@keyframes lgDlgIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@keyframes lgFade{from{opacity:0}to{opacity:1}}
/* menus et volets repliables : ouverture douce du contenu */
html .app :is(details.more,details.mm-dbox,details.cs-add,details.add-fold)[open]>summary~*{animation:lgDrop var(--lg-mid) var(--lg-ease) both}
@keyframes lgDrop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ───────────── 10. Transitions entre pages ───────────── */
html .app .view.active{animation:lgView .28s var(--lg-ease) both}
@keyframes lgView{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ───────────── 11. Bouton Danger, bandeaux, toasts ───────────── */
html .hse-sos{background:linear-gradient(180deg,rgba(255,99,120,.92),rgba(220,38,64,.92))!important;backdrop-filter:var(--lg-blur-soft);-webkit-backdrop-filter:var(--lg-blur-soft);
  border:.5px solid rgba(255,255,255,.35)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 12px 28px -8px rgba(220,38,64,.7)!important;
  transition:transform var(--lg-fast) var(--lg-ease)}
html .hse-sos:active{transform:scale(.92)}
html .toast,html .web-upd{background:var(--lg-glass-strong)!important;backdrop-filter:var(--lg-blur);-webkit-backdrop-filter:var(--lg-blur);
  border:.5px solid var(--lg-stroke-hi)!important;border-radius:18px!important;box-shadow:var(--lg-shadow-float)!important;color:var(--text)!important}

/* ───────────── 12. Effets allégés (GPU) et accessibilité ───────────── */
html.lg-lite .app .appbar,html.lg-lite .app .tabbar,html.lg-lite dialog[open],html.lg-lite .hse-sos,html.lg-lite .toast,html.lg-lite .web-upd{
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html.lg-lite{--lg-glass:var(--lg-glass-solid);--lg-glass-strong:var(--lg-glass-solid)}
html.lg-lite .app .card{box-shadow:var(--lg-hi)!important}
@media (prefers-reduced-transparency:reduce){
  html .app .appbar,html .app .tabbar,html dialog[open],html .hse-sos{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  html{--lg-glass:var(--lg-glass-solid);--lg-glass-strong:var(--lg-glass-solid)}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html{--lg-glass:var(--lg-glass-solid);--lg-glass-strong:var(--lg-glass-solid)}
}
html.rx-still .app .view.active,html.rx-still dialog[open],html.rx-still dialog::backdrop,html.rx-still .app details[open]>summary~*{animation:none!important}
html.rx-still .app .tabbar,html.rx-still .app .btn,html.rx-still .app .tab{transition:none!important}

/* ───────────── 13. 1.67.0 : bassins 3D (js/basin3d.js) ───────────── */
.b3d{display:block;width:100%;height:auto;overflow:visible}
.b3d .b3-c1{stop-color:#5b6476}.b3d .b3-c2{stop-color:#3a4252}
.b3d .b3-c3{stop-color:#4a5263}.b3d .b3-c4{stop-color:#2c3340}
.b3d .b3-i1{stop-color:#1f2633}.b3d .b3-i2{stop-color:#121823}
html.rx-clair .b3d .b3-c1{stop-color:#d9dee7}html.rx-clair .b3d .b3-c2{stop-color:#b9c1ce}
html.rx-clair .b3d .b3-c3{stop-color:#c7cdd8}html.rx-clair .b3d .b3-c4{stop-color:#a9b1bf}
html.rx-clair .b3d .b3-i1{stop-color:#8d96a6}html.rx-clair .b3d .b3-i2{stop-color:#6b7484}
.b3d .b3-shadow{fill:rgba(0,0,0,.35);filter:blur(0)}
html.rx-clair .b3d .b3-shadow{fill:rgba(15,23,42,.12)}
.b3d .b3-edge{stroke:rgba(255,255,255,.18)}
html.rx-clair .b3d .b3-edge{stroke:rgba(255,255,255,.8)}
.b3d .b3-ticks line{stroke:rgba(255,255,255,.35);stroke-width:1}
.b3d .b3-water{transition:transform .8s cubic-bezier(.32,.72,0,1)}
.b3d.unk .b3-water{opacity:0}
.b3d .b3-shine{animation:b3Shine 6s ease-in-out infinite;transform-box:fill-box}
@keyframes b3Shine{0%,100%{transform:translateX(-18px);opacity:.6}50%{transform:translateX(18px);opacity:1}}
.b3d .b3-waves{opacity:.45;animation:b3Wave 3.2s ease-in-out infinite}
@keyframes b3Wave{0%,100%{transform:translate(0,0)}50%{transform:translate(6px,-1.5px)}}
.b3d .b3-oil{opacity:.42;mix-blend-mode:screen;animation:b3Oil 9s linear infinite;transform-box:fill-box}
@keyframes b3Oil{0%,100%{opacity:.32}50%{opacity:.55}}
.b3d .b3-rip ellipse{fill:none;stroke:#fff;stroke-width:1;opacity:0;transform-box:fill-box;transform-origin:center;animation:b3Rip 2s ease-out infinite}
@keyframes b3Rip{0%{opacity:.7;transform:scale(.3)}100%{opacity:0;transform:scale(1.6)}}
.b3d .b3-pipe{stroke:#6b7280}
.b3d .b3-flow{stroke:#38bdf8;opacity:0}
.b3d.pump-on .b3-flow{opacity:1;animation:b3Flow .9s linear infinite}
@keyframes b3Flow{to{stroke-dashoffset:-20}}
.b3d .b3-pbody{fill:#334155;stroke:#94a3b8;stroke-width:1.4}
.b3d .b3-imp path{fill:#cbd5e1}
.b3d.pump-on .b3-pbody{stroke:#34d399;fill:#064e3b}
.b3d.pump-on .b3-imp{animation:b3Spin 1.1s linear infinite;transform-origin:0 0}
@keyframes b3Spin{to{transform:rotate(360deg)}}
.b3d .b3-pct{font:800 22px var(--font,system-ui);fill:#fff;letter-spacing:-.02em;paint-order:stroke;stroke:rgba(0,0,0,.25);stroke-width:2px}
.b3d.lg .b3-pct{font-size:24px}
.b3d .b3-sub{font:600 11px var(--font,system-ui);fill:rgba(255,255,255,.85)}
html.rx-clair .b3d .b3-pct{fill:#1e293b;stroke:rgba(255,255,255,.6)}
html.rx-clair .b3d .b3-sub{fill:#334155}
html.rx-still .b3d *{animation:none!important;transition:none!important}
/* carte de bassin (synthèse Terrain) : bassin 3D en tête de carte */
.bas-card .bc-3d{margin:-2px -4px 0}
.bas-card .bc-body.has3d{display:block}
.bas-card .bc-body.has3d .bc-info{margin-top:4px}
.bh-viz .b3d{width:min(320px,100%)}

/* ───────────── 14. 1.67.0 : icônes vectorielles (js/icons.js remplace les emoji de couleur) ───────────── */
.rx-ic{width:1.15em;height:1.15em;display:inline-block;margin-inline-end:.28em;vertical-align:-.2em;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rx-ic.ic-warn{color:var(--amber,#fbbf24)}
.rx-ic.ic-danger{color:var(--red,#f87171)}
.rx-ic.ic-ok{color:var(--green,#34d399)}
.hse-sos .rx-ic{width:22px;height:22px;color:#fff}

/* ───────────── 15. 1.67.0 : bouton Retour de la barre du haut ───────────── */
html .app .appbar .nav-back{width:38px;height:38px;flex:none;margin-right:-4px;display:inline-flex;align-items:center;justify-content:center;animation:lgFade .18s ease both}
html .app .appbar .nav-back[hidden]{display:none!important}
html .app .appbar .nav-back svg{width:22px;height:22px}
html.rx-can-back .app .appbar .brand-logo{display:none}