/* ═══ RAFINEX360 · THÈME « NOCTURNE » (1.22.0, par défaut) ═══
   Chargé après theme.css à la place de light.css + apple.css (thème clair, au choix dans Plus › Apparence).
   Fond #0B0F19, surfaces en verre dépoli, bordures fines, accent violet → cyan, police Inter embarquée.
   Mouvement : entrée échelonnée des écrans, halo qui suit le doigt ou la souris sur les cartes, lueur des boutons,
   aurore de fond très lente. Tout est coupé si le téléphone demande moins d'animations (sauf « Animations : Toujours »).
   Aucune animation ne simule une opération : la vague d'un bac reste figée tant qu'aucune opération active ne le confirme. */
:root{
  color-scheme:dark;
  --ink-0:#0b0f19;
  --bg-abyss:#070a12;--bg-base:#0b0f19;--bg-surface:rgba(255,255,255,.045);--bg-elevated:rgba(255,255,255,.07);--bg-raised:rgba(255,255,255,.10);--bg-overlay:rgba(255,255,255,.14);
  --solid-1:#121726;--solid-2:#171d2e;--solid-3:#1e2538;
  --fill:rgba(255,255,255,.08);--fill-2:rgba(255,255,255,.05);--sep:rgba(255,255,255,.08);
  --border-subtle:rgba(255,255,255,.06);--border:rgba(255,255,255,.10);--border-strong:rgba(255,255,255,.18);--border-focus:#8b5cf6;
  --text:#eef1f8;--text-soft:#c9cfdd;--text-dim:#959eb3;--text-mute:#6f7890;--text-ghost:#545c72;
  --cyan:#22d3ee;--cyan-dark:#06b6d4;--cyan-glow:rgba(34,211,238,.3);
  --violet:#8b5cf6;--violet-2:#a78bfa;
  --green:#34d399;--amber:#fbbf24;--red:#f87171;--purple:#a78bfa;--teal:#5eead4;--gray-st:#7c8599;
  --grad:linear-gradient(120deg,#8b5cf6 0%,#6366f1 45%,#22d3ee 100%);
  --iris:var(--grad);--iris-soft:rgba(139,92,246,.14);
  --font:'Inter',-apple-system,BlinkMacSystemFont,system-ui,'Segoe UI',Roboto,sans-serif;
  --font-display:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --mono:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --radius-lg:18px;
  --shadow-sm:0 1px 0 rgba(255,255,255,.04) inset,0 10px 30px -18px rgba(0,0,0,.9);
  --shadow:0 30px 60px -24px rgba(0,0,0,.9);
  --ease:cubic-bezier(.16,1,.3,1);--ios:var(--ease);--out:var(--ease);--spring:cubic-bezier(.34,1.36,.64,1);
  --navy:#121726;--navy-2:#171d2e;--sky:#22d3ee;--sky-soft:rgba(34,211,238,.10);--white:#eef1f8;
}
html{background:var(--ink-0)}
/* 1.47 : même photo que l'écran de connexion, en fond de toute l'application (.app est transparent ci-dessous,
   avec un flou pour que les surfaces translucides du thème restent lisibles par-dessus) ; absente du thème clair
   (.app y reste opaque, css/apple.css), sans rien à coder en plus pour ça. */
body{background:
    linear-gradient(180deg,rgba(8,9,12,.78) 0%,rgba(6,8,12,.82) 50%,rgba(4,6,11,.88) 100%),
    url(/img/login-bg.jpg) center 55%/cover no-repeat fixed,
    var(--ink-0)}
body{font-family:var(--font);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;letter-spacing:-.011em;color:var(--text)}
::selection{background:rgba(139,92,246,.45);color:#fff}
/* 1.47 : plusieurs surfaces du thème (cartes, champs…) utilisent un fond translucide (voir --bg-surface/--bg-elevated
   plus haut) — sans ce flou, la photo de fond resterait visible en détail au travers et nuirait à la lisibilité des
   chiffres. Un seul flou ici, sur tout le cadre de l'appli, plutôt que de corriger chaque surface une par une. */
.app{background:transparent;backdrop-filter:blur(34px) saturate(140%);-webkit-backdrop-filter:blur(34px) saturate(140%)}
.app::after{display:none}
/* Aurore de fond : deux nappes violet / cyan qui dérivent très lentement derrière l'interface */
.app::before{content:'';display:block;position:fixed;inset:-20vmax;z-index:-1;pointer-events:none;
  background:radial-gradient(38vmax 30vmax at 18% 12%,rgba(139,92,246,.20),transparent 62%),
             radial-gradient(34vmax 28vmax at 86% 78%,rgba(34,211,238,.13),transparent 62%),
             radial-gradient(26vmax 22vmax at 70% 10%,rgba(99,102,241,.10),transparent 60%);
  animation:nxAurora 26s var(--ease) infinite alternate}
@keyframes nxAurora{0%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(3vmax,2vmax,0) rotate(4deg)}100%{transform:translate3d(-2vmax,3vmax,0) rotate(-3deg)}}
body::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:22px 22px;
  -webkit-mask:radial-gradient(ellipse at 50% 0%,#000 0,transparent 75%);mask:radial-gradient(ellipse at 50% 0%,#000 0,transparent 75%)}

/* ─── Barre du haut : verre dépoli ─── */
.appbar{background:rgba(11,15,25,.62);border-bottom:1px solid var(--sep);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);box-shadow:none}
.appbar::before{display:none}
.appbar::after{content:'';display:block;position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(139,92,246,.6),rgba(34,211,238,.6),transparent);opacity:.7}
.brand-name{font-family:var(--font-display);font-size:17px;font-weight:700;letter-spacing:-.02em}
.brand-name em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.view-title{font-size:12.5px;color:var(--text-dim);font-weight:500;letter-spacing:0}
.icon-btn{background:var(--fill);border:1px solid var(--border-subtle);border-radius:50%;box-shadow:none;color:var(--text);transition:transform .3s var(--ease),background .25s,box-shadow .3s}
.icon-btn:hover{background:var(--bg-raised);box-shadow:0 0 18px -4px rgba(139,92,246,.6)}
.icon-btn:active{transform:scale(.92)}
.icon-btn.asst-top{color:var(--violet-2)}
.icon-btn.asst-top svg{width:20px;height:20px}
.icon-btn.asst-top span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.me-init{background:none;color:var(--text);font-weight:600}
.clock{background:var(--fill-2);border:1px solid var(--border-subtle);color:var(--text-soft)}

/* ─── Contenu ─── */
.content{padding-left:16px;padding-right:16px}
.section-label{font-family:var(--font-display);font-size:20px;font-weight:700;letter-spacing:-.025em;color:var(--text);text-transform:none;margin-top:16px}
.section-label span:first-child::before{content:'';display:inline-block;width:14px;height:3px;border-radius:2px;background:var(--grad);margin-right:8px;vertical-align:middle}
.section-label span:last-child{font-family:var(--font);font-size:13px;font-weight:500;color:var(--text-dim);letter-spacing:0}
.section-label.sm{font-size:17px}

/* ─── Cartes de verre : bord lumineux + projecteur qui suit le pointeur ─── */
.card{position:relative;
  background:radial-gradient(360px circle at var(--mx,-999px) var(--my,-999px),rgba(139,92,246,.13),transparent 60%),var(--bg-surface);
  border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
  transition:transform .45s var(--ease),border-color .3s,box-shadow .45s var(--ease),background-color .3s}
.card::before{content:'';display:block;position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;z-index:0;
  background:radial-gradient(240px circle at var(--mx,-999px) var(--my,-999px),rgba(167,139,250,.9),rgba(34,211,238,.45) 40%,transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  opacity:0;transition:opacity .35s}
.card::after{display:none}
.card:hover::before,.card.nx-lit::before{opacity:1}
@media (hover:hover){
  button.card:hover,.card.unit:hover,.card[data-go]:hover,.card.tank:hover{transform:translateY(-2px);border-color:var(--border-strong);box-shadow:0 22px 44px -22px rgba(0,0,0,.95),0 0 0 1px rgba(139,92,246,.18)}}
button.card:active,.card[data-go]:active,.card.tank:active{transform:scale(.97)}
.card-title{font-family:var(--font-display);font-weight:700;letter-spacing:-.01em;color:var(--text);text-transform:none;font-size:15px}
.card-p,.kpi-sub{color:var(--text-dim)}

.kpi{background:radial-gradient(360px circle at var(--mx,-999px) var(--my,-999px),rgba(139,92,246,.13),transparent 60%),radial-gradient(160px 100px at 0 0,color-mix(in srgb,var(--c,var(--violet)) 16%,transparent),transparent 70%),var(--bg-surface)}
.kpi::after{width:2px;top:14px;bottom:14px;border-radius:2px;background:linear-gradient(180deg,var(--c,var(--violet)),transparent);box-shadow:0 0 14px var(--c,var(--violet))}
.kpi-label{font-size:12.5px;letter-spacing:0;text-transform:none;font-weight:600;color:var(--text-dim)}
.kpi-value{font-family:var(--font-display);font-weight:700;font-size:32px;letter-spacing:-.035em}
.kpi-sub{font-size:12.5px}

/* ─── Boutons : dégradé lumineux, pression ─── */
.btn{position:relative;overflow:hidden;border:1px solid var(--border);border-radius:12px;background:var(--fill);color:var(--text);font-family:var(--font);font-weight:600;font-size:15px;letter-spacing:-.01em;box-shadow:none;
  transition:transform .3s var(--ease),background .25s,box-shadow .35s var(--ease),border-color .25s,opacity .2s}
.btn::before,.btn::after{display:none!important}
.btn:hover{border-color:var(--border-strong);background:var(--bg-raised)}
.btn:active{transform:scale(.95)}
.btn.sm{font-size:14px;border-radius:10px;min-height:36px;padding:7px 12px}
.btn.primary{background:var(--grad);background-size:160% 100%;background-position:0 0;border-color:transparent;color:#fff;font-weight:600;
  box-shadow:0 10px 28px -12px rgba(139,92,246,.85),inset 0 1px 0 rgba(255,255,255,.25)}
.btn.primary:hover{background-position:100% 0;box-shadow:0 14px 36px -10px rgba(139,92,246,1),0 0 22px -6px rgba(34,211,238,.7),inset 0 1px 0 rgba(255,255,255,.3)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--violet-2)}
.btn.ghost:hover{background:var(--fill-2)}
.btn.danger{background:rgba(248,113,113,.12);border-color:rgba(248,113,113,.3);color:var(--red)}
.btn.danger:hover{box-shadow:0 0 22px -8px rgba(248,113,113,.8)}
.btn[disabled],.btn[aria-busy="true"]{opacity:.45}
.link,a{color:var(--cyan)}
.rx-ripple{background:radial-gradient(circle,rgba(167,139,250,.45),rgba(34,211,238,0) 70%)}

.chip{background:var(--fill);border:1px solid var(--border-subtle);border-radius:999px;color:var(--text);font-weight:500;font-size:13.5px;padding:7px 14px;box-shadow:none}
.chip.active,.chip[aria-pressed="true"]{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 6px 18px -8px rgba(139,92,246,.9)}
.chip.active small{color:rgba(255,255,255,.75)}
.chip small{color:var(--text-dim)}

.seg{background:var(--fill-2);border:1px solid var(--border-subtle);border-radius:12px;padding:3px;gap:3px}
.seg button{border-radius:9px;font-weight:600;font-size:13px;color:var(--text-dim);min-height:36px;padding:6px 4px;transition:background .35s var(--ease),color .25s,box-shadow .35s}
.seg button.active{background:rgba(139,92,246,.22);color:#fff;box-shadow:inset 0 0 0 1px rgba(167,139,250,.45),0 6px 18px -10px rgba(139,92,246,.9)}
.seg button small{color:var(--text-dim);font-family:var(--font)}

/* ─── Champs ─── */
.field label{font-size:13px;font-weight:600;color:var(--text-dim);letter-spacing:0;text-transform:none}
.field input,.field select,.field textarea,input[type=search],textarea,select{font-family:var(--font)}
.field input,.field select{height:44px;background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:10px;font-size:16px;font-weight:500;color:var(--text);transition:border-color .2s,box-shadow .3s var(--ease),background .2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--violet);background:rgba(255,255,255,.07);box-shadow:0 0 0 3px rgba(139,92,246,.22),0 0 22px -6px rgba(34,211,238,.45)}
.field input::placeholder{color:var(--text-mute)}
select option,select optgroup{background:var(--solid-2);color:var(--text)}
.form-err{font-size:14px}
.form-err.ok{color:var(--green)}

.tag{border:none;border-radius:999px;font-weight:600;font-size:12px;padding:3px 9px;transition:background-color .3s,color .3s}
.tag.ok{background:rgba(52,211,153,.14);color:var(--green)}
.tag.warn{background:rgba(251,191,36,.14);color:var(--amber)}
.tag.danger{background:rgba(248,113,113,.14);color:var(--red)}
.tag.info{background:rgba(34,211,238,.12);color:var(--cyan)}
.tag.gray{background:var(--fill);color:var(--text-dim)}
details.more>summary,details>summary{font-weight:600}

/* ─── Barre d'onglets flottante ─── */
.tabbar{background:rgba(15,19,31,.72);border:1px solid var(--border);border-radius:26px;
  backdrop-filter:blur(26px) saturate(170%);-webkit-backdrop-filter:blur(26px) saturate(170%);box-shadow:0 18px 50px -12px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.05)}
.tab{color:rgba(238,241,248,.5);font-size:10px;font-weight:500;letter-spacing:0;transition:color .3s}
.tab.active{color:#fff}
.tab.active svg{color:var(--violet-2);filter:drop-shadow(0 0 8px rgba(139,92,246,.8));transform:scale(1.08)}
.tab-ind{background:linear-gradient(180deg,rgba(139,92,246,.22),rgba(34,211,238,.10));box-shadow:inset 0 0 0 1px rgba(167,139,250,.3);border-radius:20px;transition:transform .5s var(--ease),width .5s var(--ease),height .5s var(--ease)}
.tab .badge{box-shadow:0 0 0 2px var(--ink-0)}
@media (min-width:1024px){.tabbar{background:rgba(11,15,25,.78);border:none;border-right:1px solid var(--sep);border-radius:0}}

/* ─── Dialogues, messages, assistant ─── */
dialog#confirmDlg,dialog.rx-dlg{background:rgba(18,23,38,.92);border:1px solid var(--border);border-radius:18px;color:var(--text);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);box-shadow:var(--shadow)}
dialog::backdrop{background:rgba(5,7,12,.6);backdrop-filter:blur(4px)}
dialog[open]{animation:nxPop .45s var(--ease)}
@keyframes nxPop{from{opacity:0;transform:translateY(12px) scale(.97);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
.toast{background:rgba(18,23,38,.92);border:1px solid var(--border);border-radius:14px;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);color:#fff;box-shadow:0 14px 34px rgba(0,0,0,.55)}
.asst-sheet{background:var(--solid-1);border:1px solid var(--border);border-radius:16px 16px 0 0}
.asst-sheet::before{content:'';display:block;width:36px;height:5px;border-radius:3px;background:rgba(255,255,255,.25);margin:-6px auto 10px;flex:none}
@media (min-width:760px){.asst-sheet{border-radius:18px}.asst-sheet::before{display:none}}
.asst-sec{background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:12px}
.asst-sec.s-verifier{box-shadow:inset 3px 0 0 var(--amber)}
.asst-sec.s-limites{background:transparent;box-shadow:inset 0 0 0 1px var(--border-subtle)}
.asst-sec.s-ai{box-shadow:inset 3px 0 0 var(--violet)}
.asst-ref{background:var(--bg-raised);border:none}
.asst-ask input,.asst-need select,.asst-need input{background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--text)}

/* ─── Mon poste ─── */
.mp-kc{background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:14px}
.mp-kc b{font-weight:700;font-size:26px}
.mp-kc.hot{box-shadow:inset 0 0 0 1px rgba(251,191,36,.45)}
.mp-kc.hot b{color:var(--amber)}
.mp-a{background:var(--bg-elevated);border:none;border-left:3px solid var(--amber)}
.mp-a.lv-critique{background:rgba(248,113,113,.10);border-left-color:var(--red);animation:nxAttn 1.6s var(--ease) 1}
@keyframes nxAttn{0%{box-shadow:0 0 0 0 rgba(248,113,113,.5)}100%{box-shadow:0 0 0 12px rgba(248,113,113,0)}}

/* ─── Alertes ─── */
.alert{background:var(--bg-surface);border:1px solid var(--border);border-left-width:3px;border-radius:14px;color:var(--text)}
.alert.danger{border-left-color:var(--red);background:linear-gradient(90deg,rgba(248,113,113,.08),transparent 60%),var(--bg-surface)}
.alert.warn{border-left-color:var(--amber);background:linear-gradient(90deg,rgba(251,191,36,.07),transparent 60%),var(--bg-surface)}
.alert.info{border-left-color:var(--cyan)}
.alert.ok{border-left-color:var(--green)}
.alert.danger::after{box-shadow:none}
.alert .alert-meta,.alert .al-why,.alert .al-why summary{color:var(--text-dim)}
.lv-tag{border:none}

/* ─── Plusieurs opérations dans une saisie ─── */
.fx-lines{display:block;margin-top:12px;padding:12px;border-radius:14px;background:var(--bg-elevated);border:1px solid var(--border-subtle)}
.fx-lines-h b{display:block;font-size:15px;font-weight:600}
.fx-lines-h small{display:block;font-size:12.5px;color:var(--text-dim);margin-top:2px}
#nLines{display:grid;gap:8px;margin:10px 0}
#nLines:empty{margin:6px 0}
.fx-line{display:grid;grid-template-columns:24px minmax(0,1fr) 84px 36px;gap:8px;align-items:center;animation:nxLineIn .4s var(--ease)}
.fx-line-n{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--fill);font-size:12px;font-weight:700;color:var(--text-dim)}
.fx-line input,.fx-line select{height:42px;min-width:0;width:100%;padding:0 10px;border-radius:10px;border:1px solid var(--border);background:rgba(255,255,255,.05);color:var(--text);font:inherit;font-size:16px}
.fx-line input:focus,.fx-line select:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(139,92,246,.22)}
.fx-line-x{width:36px;height:36px;border-radius:50%;border:none;background:rgba(248,113,113,.14);color:var(--red);font-size:14px;cursor:pointer}
.fx-line-x:active{transform:scale(.9)}
@keyframes nxLineIn{from{opacity:0;transform:translateY(-6px);filter:blur(3px)}}

/* ─── Rapports des quarts rangés ─── */
.qz-replink{display:flex;justify-content:space-between;align-items:center;width:100%;margin-top:12px;padding:12px 14px;min-height:46px;border:1px solid var(--border-subtle);border-radius:12px;background:var(--bg-elevated);color:var(--text);font:inherit;font-size:15px;font-weight:500;cursor:pointer}
.qz-replink b{font-weight:500;color:var(--text-dim)}
.qz-replink b::after{content:'›';margin-left:8px;font-size:18px;color:var(--text-mute)}
.qz-replink:active{background:var(--bg-raised)}
.qz-rep>summary,.pm-panel>summary{display:flex;justify-content:space-between;align-items:center;cursor:pointer;list-style:none;font-family:var(--font-display);font-size:17px;font-weight:700;min-height:28px}
.qz-rep>summary::-webkit-details-marker,.pm-panel>summary::-webkit-details-marker{display:none}
.qz-rep>summary small,.pm-panel>summary small{font-family:var(--font);font-size:13px;font-weight:500;color:var(--text-dim);display:flex;align-items:center;gap:8px}
.qz-rep>summary small::after,.pm-panel>summary small::after{content:'›';font-size:20px;line-height:1;transition:transform .35s var(--ease)}
.qz-rep[open]>summary small::after,.pm-panel[open]>summary small::after{transform:rotate(90deg)}
.qz-rep[open] #qzRepList,.pm-panel[open] .pm-grid{animation:nxLineIn .4s var(--ease)}
.qz-rep .qz-hist{margin-top:10px}

/* ─── Réservoirs : verre sombre, origine de la donnée, vague seulement sur un bac en mouvement ─── */
.view.enter .tank-liquid{animation:none}
.tank-liquid{transition:height 1s var(--ease)}
.tank:not(.moving) .tank-liquid::after{animation:none}
.tank.moving{border-color:rgba(34,211,238,.45);box-shadow:0 0 0 1px rgba(34,211,238,.25),0 0 28px -10px rgba(34,211,238,.7)}
.tank.tk-none .tank-liquid{visibility:hidden}
.tank.tk-none .tank-vessel{background:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 6px,rgba(255,255,255,.07) 6px 12px);border-style:dashed}
.tk-unk{color:var(--text-dim);font-weight:600}
.tank .tk-meas{display:block;margin-top:4px;font-size:10.5px;line-height:1.3;color:var(--text-mute)}
.tank .tk-m-none{color:var(--amber)}
.tank .tk-m-estimation{color:var(--cyan)}
.tank .tk-m-historique,.tank .tk-m-fiche{color:var(--text-dim)}
.tank .tk-conf{display:inline-block;margin-top:4px;padding:1px 7px;border-radius:999px;font-size:10.5px;font-weight:600}
.conf-haute{color:var(--green);background:rgba(52,211,153,.12)}.conf-moy{color:var(--cyan);background:rgba(34,211,238,.12)}
.conf-faible{color:var(--amber);background:rgba(251,191,36,.12)}.conf-none{color:var(--text-dim);background:var(--fill)}
.org-box{border:1px solid var(--border);border-radius:12px;padding:8px 10px;background:var(--bg-elevated)}
.org-box>summary{display:flex;justify-content:space-between;align-items:center;gap:8px;cursor:pointer;font-size:13.5px;font-weight:600;list-style:none}
.org-box>summary::-webkit-details-marker{display:none}
.org-box>summary b{font-size:11.5px;padding:2px 8px;border-radius:999px}
.org-dl{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;margin:8px 0 2px;font-size:12.5px}
.org-dl dt{color:var(--text-dim)}.org-dl dd{margin:0;overflow-wrap:anywhere}
.bar-fill{background:var(--grad)}.bar-fill.warn{background:var(--amber)}.bar-fill.danger{background:var(--red)}.bar-fill.success{background:var(--green)}
.note-sup{background:var(--bg-elevated);color:var(--text-soft)}

/* ─── Réservoirs en mouvement : seulement quand une opération active enregistrée les alimente ou les vide ───
   Entrée (mv-in) : filet qui tombe dans la cuve, bulles qui montent, surface agitée, halo vert.
   Sortie (mv-out) : aspiration au fond, remous qui descendent, halo ambre. Les deux (mv-both) : halo cyan.
   Un bac immobile garde une surface plane ; seul le reflet du verre passe, sans toucher au niveau. */
.tank-vessel{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border-color:rgba(255,255,255,.16)}
.tank-vessel.vs-sphere{border-color:rgba(255,255,255,.18);background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.14) 0,rgba(255,255,255,.04) 45%,rgba(0,0,0,.25) 100%);box-shadow:inset -5px -7px 12px rgba(0,0,0,.35)}
.tank-vessel.vs-cigar{border-color:rgba(255,255,255,.18);background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.03) 55%,rgba(0,0,0,.25))}
.tank-vessel.vs-sphere .tank-liquid,.tank-vessel.vs-cigar .tank-liquid{mix-blend-mode:normal;opacity:.9}
.tank-sphere .sph-legs{background:linear-gradient(90deg,transparent 6px,#4a5370 6px 9px,transparent 9px 20px,#4a5370 20px 23px,transparent 23px 27px,#4a5370 27px 30px,transparent 30px 41px,#4a5370 41px 44px,transparent 44px)}
/* reflet du verre : passe lentement sur toutes les cuves (ce n'est pas le liquide) */
.tank-vessel{--sheen:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.10) 48%,transparent 60%)}
.tank .tank-vessel>.tank-liquid~*,.tank-vessel::before{pointer-events:none}
.tank .tank-vessel::before{content:'';position:absolute;inset:0;z-index:3;background:var(--sheen);background-size:250% 100%;background-position:120% 0;animation:nxSheen 7s var(--ease) infinite}
.tank:nth-child(3n+2) .tank-vessel::before{animation-delay:-2.3s}.tank:nth-child(3n) .tank-vessel::before{animation-delay:-4.6s}
@keyframes nxSheen{0%,70%{background-position:120% 0}100%{background-position:-120% 0}}
/* surface du liquide : plane au repos, vague seulement en mouvement */
.tank.moving .tank-liquid::after{animation:rxWave 1.6s linear infinite}
.tank.moving .tank-liquid{box-shadow:0 0 26px -2px var(--tc)}
/* bulles (entrée) ou remous (sortie) dans le liquide */
.tank.moving .tk-flow{background:
   radial-gradient(circle at 20% 70%,rgba(255,255,255,.55) 0 1.6px,transparent 2.2px),
   radial-gradient(circle at 62% 40%,rgba(255,255,255,.45) 0 1.3px,transparent 1.9px),
   radial-gradient(circle at 82% 85%,rgba(255,255,255,.5) 0 1.1px,transparent 1.7px),
   radial-gradient(circle at 40% 15%,rgba(255,255,255,.4) 0 1.4px,transparent 2px),
   repeating-linear-gradient(0deg,rgba(255,255,255,0) 0 7px,rgba(255,255,255,.10) 7px 8px);
  background-size:100% 34px,100% 46px,100% 28px,100% 40px,100% 16px;animation:nxBubbles 2.4s linear infinite}
.tank.moving.mv-out .tk-flow{animation:nxBubbles 2.4s linear infinite reverse}
@keyframes nxBubbles{from{background-position:0 0,0 0,0 0,0 0,0 0}to{background-position:0 -68px,0 -92px,0 -56px,0 -80px,0 -32px}}
/* filet d'entrée qui tombe du haut de la cuve */
.tank.moving.mv-in .tank-vessel::after,.tank.moving.mv-both .tank-vessel::after{display:block;content:'';position:absolute;top:0;bottom:auto;left:50%;width:3px;height:100%;margin-left:-1.5px;border-radius:2px;z-index:1;
  background:repeating-linear-gradient(180deg,var(--tcv,#34d399) 0 6px,transparent 6px 10px);background-size:100% 20px;opacity:.75;animation:nxPour .6s linear infinite}
@keyframes nxPour{from{background-position:0 0}to{background-position:0 20px}}
/* aspiration au fond de la cuve */
.tank.moving.mv-out .tank-vessel::after,.tank.moving.mv-both .tank-liquid::before{display:block;content:'';position:absolute;left:50%;bottom:-6px;top:auto;width:26px;height:12px;margin-left:-13px;border-radius:50%;z-index:2;
  background:radial-gradient(ellipse,rgba(251,191,36,.85),rgba(251,191,36,0) 70%);animation:nxDrain 1.2s var(--ease) infinite}
@keyframes nxDrain{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.5);opacity:0}}
/* halo de la carte selon le sens */
.tank.moving{animation:nxTankGlow 2.4s ease-in-out infinite}
.tank.moving.mv-in{--gc:52,211,153}.tank.moving.mv-out{--gc:251,191,36}.tank.moving.mv-both{--gc:34,211,238}
.tank.moving{border-color:rgba(var(--gc,34,211,238),.45)}
@keyframes nxTankGlow{0%,100%{box-shadow:0 0 0 1px rgba(var(--gc,34,211,238),.25),0 0 18px -10px rgba(var(--gc,34,211,238),.6)}50%{box-shadow:0 0 0 1px rgba(var(--gc,34,211,238),.5),0 0 34px -8px rgba(var(--gc,34,211,238),.9)}}
.tk-mv{background:rgba(11,15,25,.85);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
/* niveau qui change (nouveau relevé, estimation d'une opération en cours) : glisse avec un léger rebond de surface */
.tank-liquid{transition:height 1.2s var(--ease)}
html.rx-still .tank .tank-vessel::before,html.rx-still .tank.moving,html.rx-still .tank.moving .tk-flow,html.rx-still .tank.moving .tank-vessel::after,html.rx-still .tank.moving .tank-liquid::before,html.rx-still .tank.moving .tank-liquid::after{animation:none!important}

/* ─── Terrain ─── */
.syn-meta,.bas-card{background:var(--bg-surface);border:1px solid var(--border);color:var(--text)}
.syn-meta span{color:var(--text-dim)}
.bc-gauge{background:var(--fill-2);border-color:var(--border-strong)}
.bc-gauge i{background:linear-gradient(180deg,#22d3ee,#6366f1)}
.c-plein .bc-gauge i{background:var(--red)}.c-haut .bc-gauge i{background:var(--amber)}

/* ─── « Réglages ouverts » : dans le flux, sous l'en-tête ─── */
.cfg-bar{position:relative;top:auto;left:auto;transform:none;z-index:2;flex:none;align-self:center;margin:8px auto 0;background:rgba(251,191,36,.10);border:1px solid rgba(251,191,36,.4);color:var(--amber);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}

/* ─── Pompes : état déclaré par les opérations (aucun capteur) ─── */
.pm-src{margin:8px 0 10px;font-size:12.5px;color:var(--text-dim)}
.pm-grid{display:grid;grid-template-columns:1fr;gap:8px}
@media (min-width:620px){.pm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.pm-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pm-card{--pc:var(--gray-st);border:1px solid var(--border);border-left:3px solid var(--pc);border-radius:12px;padding:10px 12px;background:var(--bg-elevated);display:flex;flex-direction:column;gap:4px;min-width:0}
.pm-card.pm-run{--pc:var(--green);box-shadow:0 0 26px -14px var(--green)}.pm-card.pm-sus{--pc:var(--amber)}.pm-card.pm-def{--pc:var(--red)}
.pm-h{display:flex;justify-content:space-between;align-items:center;gap:8px}
.pm-h b{font-size:15px}
.pm-st{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600;color:var(--pc);background:color-mix(in srgb,var(--pc) 14%,transparent)}
.pm-st i{width:8px;height:8px;border-radius:50%;background:var(--pc)}
.pm-run .pm-st i{animation:nxRun 2s ease-in-out infinite}
@keyframes nxRun{0%,100%{box-shadow:0 0 0 0 rgba(52,211,153,.55)}50%{box-shadow:0 0 0 5px rgba(52,211,153,0)}}
.pm-why{font-size:12px;color:var(--text-dim)}
.pm-dl{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin:4px 0 0;font-size:13px}
.pm-dl dt{color:var(--text-dim)}.pm-dl dd{margin:0;min-width:0;overflow-wrap:anywhere}.pm-dl small{color:var(--text-mute)}
.pm-al{font-size:12.5px;color:var(--red);background:rgba(248,113,113,.12);border-radius:8px;padding:5px 8px}
.pm-f{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:2px}
.pm-f small{font-size:11.5px;color:var(--text-mute)}
.pm-f .lnk{font-size:13px}

/* ─── Tableau des opérations (Accueil, Quart) ─── */
#v-dash,#v-shift{--ink:#eef1f8;--ink2:#a7afc2;--ink3:#7c859b;--line:rgba(255,255,255,.09);--paper:rgba(255,255,255,.04);--card:rgba(255,255,255,.06)}
.tm-sheet{background:var(--paper);color:var(--ink);box-shadow:none;border:1px solid var(--border)}
.db-op{background:var(--card);border-color:var(--border-subtle);box-shadow:none;transition:transform .4s var(--ease),border-color .3s,box-shadow .4s var(--ease)}
@media (hover:hover){.db-op:hover{border-color:rgba(167,139,250,.35);box-shadow:0 0 0 1px rgba(139,92,246,.15),0 18px 40px -22px rgba(0,0,0,.9)}}
.db-op[data-st="ANOMALIE"]{border-color:rgba(248,113,113,.55);box-shadow:0 0 0 1px rgba(248,113,113,.35),0 0 24px -12px rgba(248,113,113,.8)}
.db-op[data-st="À SURVEILLER"]{border-color:rgba(251,191,36,.5)}
.db-op.sc-row.bad{border-color:rgba(248,113,113,.55)}
.db-shi,.db-nxb .db-ri{color:var(--teal)}
.db-link,.db-det>summary{color:var(--cyan)}
.db-search,.db-tools select,.db-upd,#dbNxP{background:var(--card);border-color:var(--border-subtle);color:var(--ink)}
.db-search input{color:var(--ink)}
.db-kpi{position:relative;overflow:hidden;background:var(--bg-surface);color:var(--text);border:1px solid var(--border);box-shadow:none;transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s}
.db-kpi::after{display:none}
.db-kpi::before{content:'';position:absolute;inset:auto -30% -60% auto;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--kc) 30%,transparent),transparent 70%);pointer-events:none}
.db-kpi .db-ki{width:30px;height:30px;padding:6px;box-sizing:border-box;border-radius:9px;color:var(--kc);background:color-mix(in srgb,var(--kc) 16%,transparent)}
.db-kpi span{color:var(--text-soft)}
.db-kpi b{color:color-mix(in srgb,var(--kc) 70%,#fff)}
.db-kpi em{color:var(--text-dim);opacity:1}
.db-kpi .db-kc{color:var(--text-ghost);opacity:1}
.db-kpi.zero b{color:var(--text-mute)}
@media (hover:hover){.db-kpi:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--kc) 45%,transparent);box-shadow:0 0 26px -12px var(--kc)}}
.db-kpi:active{transform:scale(.96)}
.db-kpi.on{box-shadow:0 0 0 1px var(--kc),0 0 26px -10px var(--kc)}
.db-rz.ok,.db-stp.ok{background:rgba(52,211,153,.16);color:var(--green)}
.db-rz.w{background:rgba(251,191,36,.16);color:var(--amber)}
.db-stp.wait{background:var(--fill);color:var(--ink2)}
.db-r.crit .db-rv,.db-chip.crit b,.db-chip.crit span{color:var(--red)}
.db-r.warn .db-rv,.db-chip.warn b{color:var(--amber)}
.db-r.ok .db-rv,.db-r.up .db-rv,.db-chip.up b{color:var(--green)}
.db-r.down .db-rv,.db-chip.dn b{color:var(--teal)}
.db-ex .db-r{border-bottom-color:var(--line)}
.db-warn,.db-op .sc-al:has(.danger){background:rgba(248,113,113,.12);color:var(--red)}
.db-op .sc-al{background:rgba(251,191,36,.10)}
.db-bar,.tkd-pipe{background:rgba(255,255,255,.10)}
.db-go,.db-tkr .btn,.db-op .sc-act .btn.sm{background:rgba(139,92,246,.16);border-color:transparent;color:var(--violet-2)}
.db-op .sc-act .btn.sm.ghost{background:transparent;color:var(--violet-2)}
.db-op .sc-act .btn.sm.ghost:hover{background:var(--fill-2)}
.db-op .sc-act .btn.sm.primary{background:var(--grad);color:#fff}
.db-more{background:transparent;border-color:var(--line);color:var(--violet-2)}
.db-ph em{background:rgba(251,191,36,.16);color:var(--amber)}
.db-ack{background:var(--card);border-color:var(--line);color:var(--green)}
.db-ack:hover{background:rgba(52,211,153,.16)}
.db-nxd summary{background:var(--bg-raised)}
.db-cr:hover,.db-gr:hover{background:rgba(255,255,255,.04)}
.db-tkr .tkd,.tm-op{background:var(--card);border-color:var(--line);color:var(--ink)}
.db-tkr .tkr-tank .tk-sh{fill:var(--solid-3);stroke:#3a4258}
.db-view{background:var(--fill-2)}
.db-view button.on{background:rgba(139,92,246,.25);color:#fff;box-shadow:inset 0 0 0 1px rgba(167,139,250,.4)}
.db-flow{background:var(--solid-1);border-color:var(--border-subtle)}
.db-g,.db-nic{background:var(--solid-1);border-color:#3a4258}
.db-pipe{background:var(--solid-3)}
.db-pipe.on i{background:repeating-linear-gradient(90deg,var(--cc) 0 10px,color-mix(in srgb,var(--cc) 35%,#000) 10px 20px);background-size:40px 100%}
.db-ring{background:conic-gradient(var(--cc) calc(var(--p)*1%),var(--solid-3) 0)}
.db-ring::before{background:var(--solid-2)}
.db-chip{background:var(--solid-1);border-color:var(--border-subtle)}
.db-chip.warn{background:rgba(251,191,36,.10);border-color:rgba(251,191,36,.35)}
.db-chip.crit{background:rgba(248,113,113,.10);border-color:rgba(248,113,113,.4)}
.db-chip small,.db-chip span{color:var(--ink2)}
.db-lr[data-st="ANOMALIE"]{background:rgba(248,113,113,.07)}
.db-lri{background:color-mix(in srgb,var(--cc) 22%,var(--solid-1))}
.db-grb{background:color-mix(in srgb,var(--cc) 40%,var(--solid-1));border-color:color-mix(in srgb,var(--cc) 70%,var(--solid-1))}
.db-grb.plan{background:repeating-linear-gradient(135deg,var(--solid-2) 0 6px,var(--solid-3) 6px 12px)}
.tm-h em{background:var(--fill);color:var(--ink2)}
.db-pill{background:rgba(52,211,153,.18);color:var(--green)}
.org-logo-box{background:#fff}

/* ─── Mouvement : entrée échelonnée (opacité + montée + flou), pression ─── */
.view.active{animation:nxView .5s var(--ease)}
@keyframes nxView{from{opacity:0}to{opacity:1}}
.view.enter>*{animation:nxRise .7s var(--ease) both;animation-delay:calc(var(--i,0) * 55ms)}
@keyframes nxRise{from{opacity:0;transform:translateY(18px) scale(.985);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.view.enter .bar-fill{animation:none}
.mp-kc,.mp-a,.asst-ref,.qz-replink,.chip,.pm-card,.org-box{transition:transform .3s var(--ease),background .25s,border-color .25s,box-shadow .3s}
.mp-kc:active,.mp-a:active,.asst-ref:active,.chip:active,.qz-replink:active{transform:scale(.95)}
.card.nx-tap{animation:nxTap .6s var(--ease)}
@keyframes nxTap{0%{box-shadow:0 0 0 0 rgba(139,92,246,.45)}100%{box-shadow:0 0 0 14px rgba(139,92,246,0)}}

/* Tablette : toute la largeur (le rail latéral prend le relais à partir de 900 px) */
@media (min-width:700px) and (max-width:899px){.app{max-width:none}#content{padding-left:24px;padding-right:24px}}

/* ─── Moins d'animations : demandé par le téléphone (sauf « Toujours ») ou pendant les tests ─── */
html.rx-still .app::before,html.rx-still .view.active,html.rx-still .view.enter>*,html.rx-still .fx-line,html.rx-still dialog[open],
html.rx-still .mp-a.lv-critique,html.rx-still .pm-run .pm-st i,html.rx-still .card.nx-tap,html.rx-still .qz-rep[open] #qzRepList,html.rx-still .pm-panel[open] .pm-grid{animation:none!important}
html.rx-still .tank-liquid{transition:none!important}
html.rx-still .card,html.rx-still .btn,html.rx-still .db-kpi,html.rx-still .db-op{transition:none!important}