/* Feuille de style du cockpit Hub.
   Extraite telle quelle du <style> inline de index.html le 06/09/2026 (audit qualité,
   niveau 2 « les quatre fichiers ») : aucune règle modifiée, seule l'indentation de bloc
   a été retirée. Chargée en chemin RELATIF depuis index.html — rien à changer dans
   Program.cs, UseStaticFiles sert déjà tout wwwroot/. */
/* ============================================================
   Maestro Hub — thème « Cockpit clair » (direction B)
   Clair, aéré, cartes blanches, accent corail + touches jaunes,
   jauges & gros chiffres arrondis. Sélecteurs d'origine conservés.
   ============================================================ */
@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/poppins-300.woff2) format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/poppins-400.woff2) format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/poppins-500.woff2) format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/poppins-600.woff2) format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/poppins-700.woff2) format('woff2');}
:root{
  /* --- Tokens « verre » (spec §3) --- */
  --ink:#212a36; --ink-2:#5e6876; --ink-3:#8e97a5;
  --glass:rgba(255,255,255,.58); --glass-line:rgba(255,255,255,.8);
  --dark-glass:rgba(24,30,44,.62); --dark-line:rgba(255,255,255,.14);
  /* Corail = accent FONCTIONNEL (boutons, focus, alertes). --coral porte la VALEUR,
     --hot est le SEUL nom employé dans les règles (voir plus bas). Les deux étaient
     mélangés dans la feuille avant le 06/09/2026 : on ne savait plus lequel citer. */
  --coral:#f1593c;
  /* Or MyStro — identité seulement, jamais l'action. Assombri par rapport à la charte
     (#a8871a) pour tenir le contraste sur fond clair : 6,3:1 au lieu de 4,6:1. */
  --gold:#8f7215;
  --green:#0f9d63; --green-vif:#31d28c; --amber:#c07a10; --blue:#3e7bb6;
  --r:26px; --r-sm:14px;
  --ease:cubic-bezier(.22,1,.36,1);
  --sh:0 20px 48px -26px rgba(31,45,70,.4);

  /* --- Alias de compatibilité : les vues re-skinnées aux tâches 3-5
         (users/settings/drivers/cockpit) référencent encore ces noms.
         Ils pointent vers les nouvelles valeurs pour rester cohérents. --- */
  --ink-4:#b7bfca;
  --card:#ffffff;
  --line:#e7ebf1; --line-2:#dce2ea; --inset:#f3f5f9;
  /* --hot : nom d'usage du corail dans TOUTES les règles de cette feuille. */
  --hot:var(--coral); --hot-2:#ff7a52; --hot-soft:#fdeae4; --hot-deep:#d9472c;
  --green-soft:#e3f7ee; --green-fg:#0c8a4e;
  --red-soft:#fdeaea; --red-fg:#c0392b;
  --amber-fg:#b45309;
  --sh-sm:0 1px 2px rgba(20,30,55,.05);
  --sh-lg:0 26px 60px -26px rgba(31,45,70,.45);
  --rounded:"Poppins",ui-rounded,-apple-system,sans-serif;
  --t:.2s var(--ease);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
html{background:#eef2f8;}
body{
  font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  /* transparent (pas #e3e9f2) : un fond opaque sur body peint PAR-DESSUS
     .bg (z-index négatif) et masque le fond animé adaptatif. */
  background:transparent;
  color:var(--ink);min-height:100vh;line-height:1.5;-webkit-font-smoothing:antialiased;
  letter-spacing:-.011em;
}
/* ============ fond « beams » adaptatif (spec §3) ============
   Deux calques teinte en crossfade opacité (ok ⇄ alert, 900 ms) +
   4 faisceaux flous inclinés qui oscillent lentement (transform only).
   L'état est piloté par body.alert (posé par hubSetMood). */
.bg{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none;}
.bg .tint{position:absolute;inset:0;transition:opacity .9s var(--ease);}
.bg .tint.ok{opacity:1;background:linear-gradient(165deg,#e9f1fb 0%,#dbe9f4 45%,#d5ece2 100%);}
.bg .tint.alert{opacity:0;background:linear-gradient(165deg,#faeee7 0%,#f6e0d5 45%,#f3d4c8 100%);}
body.alert .bg .tint.ok{opacity:0;}
body.alert .bg .tint.alert{opacity:1;}
/* Halos flous qui dérivent lentement (même famille que la vitrine), transform only. */
.beam{position:absolute;border-radius:50%;filter:blur(70px);will-change:transform;
  transition:background .9s var(--ease);animation:orbitBgA 18s ease-in-out infinite alternate;}
.beam.b1{width:520px;height:520px;left:-8%;top:-16%;background:rgba(159,198,242,.75);}
.beam.b2{width:440px;height:440px;left:36%;top:-10%;background:rgba(150,205,235,.7);animation:orbitBgB 24s ease-in-out infinite alternate;}
.beam.b3{width:560px;height:560px;right:-10%;top:24%;background:rgba(140,200,220,.65);animation-duration:16s;}
.beam.b4{width:480px;height:480px;left:14%;bottom:-26%;background:rgba(196,207,245,.7);animation:orbitBgB 28s ease-in-out infinite alternate-reverse;}
body.alert .beam.b1{background:rgba(255,176,150,.75);}
body.alert .beam.b2{background:rgba(255,207,135,.7);}
body.alert .beam.b3{background:rgba(245,154,131,.65);}
body.alert .beam.b4{background:rgba(238,195,214,.7);}
@keyframes orbitBgA{from{transform:translate(0,0) scale(1);}to{transform:translate(20%,16%) scale(1.22);}}
@keyframes orbitBgB{from{transform:translate(0,0) scale(1.1);}to{transform:translate(-22%,18%) scale(.9);}}
h1,h2,h3{font-family:var(--rounded);}
::selection{background:rgba(241,89,60,.18);}
*{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;}
*::-webkit-scrollbar{width:9px;height:9px;}
*::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:9px;border:2px solid transparent;background-clip:content-box;}
:focus-visible{outline:2px solid var(--hot);outline-offset:2px;border-radius:6px;}
button,input,select{font-family:inherit;}

/* ---------- Header flottant : logo + nav pilules + userbar + loupe ---------- */
header{display:flex;align-items:center;gap:16px;padding:22px 28px 6px;flex-wrap:wrap;}
.logo{display:flex;align-items:center;gap:10px;font-weight:600;font-size:1.02rem;color:var(--ink);}
/* Monogramme MyStro — signature permanente du header. Le mot affiché reste « Maestro ». */
/* viewBox recadré sur le tracé (15 21 70 62) : sans ça le monogramme n'occupe
   que la moitié de sa boîte et paraît minuscule à côté du mot. */
.logo .mark{width:27px;height:24px;flex-shrink:0;display:block;}
/* Pied de marque : dit la relation éditeur/produit une fois, discrètement. */
.brand-foot{text-align:center;padding:26px 20px 34px;font-size:.7rem;color:var(--ink-3);letter-spacing:.04em;}
.brand-foot b{font-weight:600;letter-spacing:.24em;color:var(--gold);}
header nav{display:flex;gap:4px;flex-wrap:wrap;}
header nav button{font:inherit;font-size:.82rem;font-weight:500;color:var(--ink-2);border:none;background:none;
  cursor:pointer;padding:7px 15px;border-radius:99px;transition:background .15s var(--ease),color .15s var(--ease);}
header nav button.on{color:var(--ink);background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px var(--glass-line);}
header nav button:hover{color:var(--ink);}

/* Loupe dépliable (l'input est #dashSearch, filtre dashFilter inchangé) */
.search{display:flex;align-items:center;height:40px;border-radius:99px;background:var(--glass);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px var(--glass-line);
  overflow:hidden;width:40px;flex:none;margin-left:auto;transition:width .22s var(--ease);}
.search.open{width:250px;}
.search.hidden{display:none !important;}
.search button{flex:none;width:40px;height:40px;border:none;background:none;cursor:pointer;display:grid;place-items:center;color:var(--ink-2);}
.search input{border:none;background:none;outline:none;font:inherit;font-size:.84rem;color:var(--ink);width:100%;
  opacity:0;transition:opacity .18s var(--ease) .06s;}
.search.open input{opacity:1;}

/* ============ Tableau de bord : mosaïque de widgets verre (spec §5) ============
   Portage de la maquette G (.bento/.w/.kpi/.attn-item/.tag/.bars/.client-w/.site-row).
   Les classes fonctionnelles (client-section, collapsed, data-search) sont conservées
   pour dashFilter/dashToggleClient. */
#dashboardView{max-width:1140px;margin:0 auto;padding:0 28px 60px;}

/* Ligne d'état sous le header */
.statusline{display:flex;align-items:baseline;gap:18px;margin:30px 0 22px;flex-wrap:wrap;}
.statusline h1{font-size:1.55rem;font-weight:600;letter-spacing:-.015em;color:var(--ink);}
.statusline h1 .ok-line{display:inline;} .statusline h1 .alert-line{display:none;color:var(--hot);}
body.alert .statusline h1 .ok-line{display:none;} body.alert .statusline h1 .alert-line{display:inline;}
.statusline .date{font-size:.78rem;color:var(--ink-3);}

/* Grille 12 colonnes + widget verre */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;}
.w{background:var(--glass);backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%);
  border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--glass-line), inset 0 1.5px 0 rgba(255,255,255,.95), var(--sh);
  padding:22px 24px;transition:transform .15s var(--ease);}
.w:hover{transform:translateY(-2px);}
.w>h2{font-size:.8rem;font-weight:600;color:var(--ink-2);margin-bottom:12px;font-family:inherit;letter-spacing:0;text-transform:none;}
.c3{grid-column:span 3;}.c4{grid-column:span 4;}.c5{grid-column:span 5;}.c7{grid-column:span 7;}

/* KPI */
.kpi b{display:block;font-size:2.7rem;font-weight:300;line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.kpi b small{font-size:1.1rem;color:var(--ink-3);font-weight:300;}
.kpi b.kpi-ver{font-size:2.1rem;padding-top:6px;}
.kpi .trend{display:inline-block;margin-top:8px;font-size:.68rem;font-weight:600;padding:3px 10px;border-radius:99px;background:rgba(255,255,255,.7);color:var(--ink-2);}
.trend.up{color:var(--green);} .trend.warn{color:var(--amber);} .trend.bad{color:var(--hot);}

/* File d'attention */
.attn-item{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid rgba(255,255,255,.65);font-size:.84rem;color:var(--ink);}
.attn-item:first-of-type{border-top:none;padding-top:2px;}
.attn-item .tag{flex:none;font-size:.63rem;font-weight:600;padding:4px 10px;border-radius:99px;background:rgba(255,255,255,.75);}
.tag.off{color:var(--hot);} .tag.new{color:var(--blue);} .tag.maj{color:var(--amber);}
.attn-item .txt{min-width:0;}
.attn-item b{font-weight:600;}
.attn-item small{color:var(--ink-3);font-size:.73rem;}
.attn-item .go{margin-left:auto;flex:none;font-size:.75rem;font-weight:600;color:var(--ink);background:rgba(255,255,255,.8);
  border:none;border-radius:99px;padding:7px 14px;cursor:pointer;font-family:inherit;transition:transform .15s var(--ease);}
.attn-item .go:hover{transform:translateY(-1px);}
.attn-empty{font-size:.84rem;color:var(--green);}

/* Versions du parc : une barre horizontale statique par version */
.verbar{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid rgba(255,255,255,.65);font-size:.8rem;}
.verbar:first-of-type{border-top:none;}
.verbar .vl{flex:none;width:58px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink);}
.verbar .track{flex:1;height:12px;border-radius:99px;background:rgba(255,255,255,.55);overflow:hidden;}
.verbar .fill{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,rgba(33,42,54,.72),rgba(33,42,54,.42));}
.verbar.old .fill{background:linear-gradient(90deg,var(--amber),#e0a53a);}
.verbar .vn{flex:none;font-size:.7rem;color:var(--ink-2);font-variant-numeric:tabular-nums;}
.ver-empty{font-size:.8rem;color:var(--ink-3);padding-top:4px;}

/* Carte client (widget verre) + rangées de site */
.client-w>h2{display:flex;align-items:center;gap:10px;cursor:pointer;}
.client-w>h2 .ttl{font-size:.8rem;font-weight:600;color:var(--ink-2);}
.client-w>h2 .n{font-weight:400;color:var(--ink-3);font-size:.72rem;margin-left:auto;}
.client-w>h2 .ch-caret{color:var(--ink-3);font-size:.7rem;transition:transform var(--t);}
.client-section.collapsed .ch-caret{transform:rotate(-90deg);}
.client-section.collapsed .client-grid,.client-section.collapsed .client-lines{display:none;}
.site-row{display:flex;align-items:center;gap:11px;padding:10px 8px;border-top:1px solid rgba(255,255,255,.65);
  font-size:.85rem;cursor:pointer;border-radius:12px;transition:background .15s var(--ease);}
.site-row:hover{background:rgba(255,255,255,.55);}
.site-row:first-of-type{border-top:none;}
.site-row .dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--green);}
.site-row.down .dot{background:var(--hot);}
.site-row b{font-weight:500;}
.site-row .meta{margin-left:auto;display:flex;gap:12px;font-size:.7rem;color:var(--ink-2);font-variant-numeric:tabular-nums;}
.site-row .meta .old{color:var(--amber);font-weight:600;}
.site-row .meta .down{color:var(--hot);font-weight:600;}
.site-row .meta .repl{color:var(--ink-3);font-weight:600;}
/* Mode dense : rangées plus compactes */
.client-lines .site-row{padding:7px 8px;font-size:.8rem;}

/* ================================================================
   PANNEAU COCKPIT « vitrine » dépliable (spec §6, portage maquette G)
   ================================================================ */
.backdrop{position:fixed;inset:0;z-index:20;background:rgba(24,32,46,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease);}
body.panel-open .backdrop{opacity:1;pointer-events:auto;}

.panel{position:fixed;top:10px;right:10px;bottom:10px;z-index:21;width:min(1040px,calc(100vw - 20px));
  border-radius:30px;overflow:hidden;box-shadow:0 40px 90px -30px rgba(15,25,45,.6);
  background:#f0f4f9;display:grid;grid-template-columns:minmax(330px,.92fr) minmax(0,1.08fr);
  transform:translateX(calc(100% + 20px));transition:transform .38s var(--ease);}
body.panel-open .panel{transform:none;}

/* --- Colonne vitrine (fond vivant) --- */
.scene{position:relative;padding:28px;display:flex;flex-direction:column;color:#fff;overflow:hidden;}
.scene-bg{position:absolute;inset:0;background:linear-gradient(165deg,#2c4a6b,#1d3350 60%,#16283e);transition:background .9s var(--ease);}
.panel.down .scene-bg{background:linear-gradient(165deg,#6b3a2c,#502a1d 60%,#3e2016);}
.scene-bg i{position:absolute;border-radius:50%;filter:blur(56px);will-change:transform;}
.scene-bg .h1{width:360px;height:360px;left:-14%;top:-12%;background:rgba(111,179,232,.5);animation:orbitA 17s ease-in-out infinite alternate;}
.scene-bg .h2{width:300px;height:300px;right:-16%;top:26%;background:rgba(255,217,138,.34);animation:orbitB 22s ease-in-out infinite alternate;}
.scene-bg .h3{width:400px;height:400px;left:16%;bottom:-24%;background:rgba(63,143,116,.5);animation:orbitA 27s ease-in-out infinite alternate-reverse;}
.panel.down .scene-bg .h1{background:rgba(232,138,111,.75);}
.panel.down .scene-bg .h2{background:rgba(255,194,122,.55);}
.panel.down .scene-bg .h3{background:rgba(160,74,53,.75);}
@keyframes orbitA{from{transform:translate(0,0) scale(1);}to{transform:translate(18%,14%) scale(1.22);}}
@keyframes orbitB{from{transform:translate(0,0) scale(1.1);}to{transform:translate(-17%,17%) scale(.9);}}
.scene::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,16,28,.22),rgba(10,16,28,.52) 90%);}
.scene>*{position:relative;z-index:1;}
.scene .crumb{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:4px;}
.scene h1{font-size:1.8rem;font-weight:600;letter-spacing:-.015em;line-height:1.2;color:#fff;}
.scene .sub{font-size:.78rem;color:rgba(255,255,255,.75);}
.kv-ring{margin:auto 0;display:flex;align-items:center;gap:24px;padding:22px 0;}
.ring{width:132px;height:132px;border-radius:50%;flex:none;position:relative;display:grid;place-items:center;
  background:conic-gradient(var(--green-vif) calc(var(--ring,100)*1%), rgba(255,255,255,.18) 0);}
.ring::before{content:"";position:absolute;inset:9px;border-radius:50%;background:rgba(16,24,38,.72);}
.ring .in{position:relative;text-align:center;}
.ring .in b{display:block;font-size:2.3rem;font-weight:300;line-height:1;font-variant-numeric:tabular-nums;}
.ring .in span{font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.65);}
.panel.down .ring{background:conic-gradient(#ff8a70 calc(var(--ring,100)*1%), rgba(255,255,255,.18) 0);}
.kv-ring .facts .f{margin-bottom:12px;}
.kv-ring .facts .f b{display:block;font-size:1.2rem;font-weight:400;font-variant-numeric:tabular-nums;}
.kv-ring .facts .f span{font-size:.68rem;color:rgba(255,255,255,.65);}
.status-card{background:var(--dark-glass);backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);
  border-radius:20px;box-shadow:inset 0 0 0 1px var(--dark-line);padding:18px 20px;}
.status-card .sc-head{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.status-card .sc-head h3{font-size:.86rem;font-weight:600;color:#fff;}
.status-card .badge{font-size:.64rem;font-weight:700;padding:4px 12px;border-radius:99px;background:var(--green-vif);color:#0c2b1d;}
.panel.down .status-card .badge{background:var(--hot);color:#fff;}
.status-card .sc-row{display:flex;justify-content:space-between;gap:12px;font-size:.76rem;padding:6px 0;
  border-top:1px solid rgba(255,255,255,.09);color:rgba(255,255,255,.65);}
.status-card .sc-row b{color:#fff;font-weight:500;text-align:right;}
.scene .pager{display:flex;align-items:center;gap:12px;margin-top:18px;}
.pager button{width:34px;height:34px;border-radius:50%;border:none;cursor:pointer;font-size:.85rem;
  background:rgba(255,255,255,.16);color:#fff;transition:background .15s var(--ease);font-family:inherit;}
.pager button:hover{background:rgba(255,255,255,.28);}
.pager span{font-size:.7rem;color:rgba(255,255,255,.65);}

/* --- Colonne cockpit (verre clair, scrollable) --- */
.ck{padding:20px 24px 28px;overflow-y:auto;display:flex;flex-direction:column;gap:14px;}
.ck-head{display:flex;align-items:center;gap:12px;}
/* Condensé du site dans la barre cockpit — visible seulement en mobile (≤920px, cf. media query). */
.ck-mini{display:none;align-items:center;gap:8px;min-width:0;font-size:.82rem;color:var(--ink);}
.ck-mini .dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--green-vif);}
.ck-mini.off .dot{background:var(--hot);}
.ck-mini b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ck-close{margin-left:auto;width:36px;height:36px;border-radius:50%;border:none;cursor:pointer;font-size:1rem;
  background:rgba(33,42,54,.07);color:var(--ink-2);transition:background .15s var(--ease);}
.ck-close:hover{background:rgba(33,42,54,.14);color:var(--ink);}
#ckShell{display:flex;flex-direction:column;gap:14px;}
.ck-chip{align-self:flex-start;font-size:.66rem;font-weight:650;padding:4px 11px;border-radius:999px;background:var(--green-soft);color:var(--green-fg);
  font-family:ui-monospace,monospace;}
.ck-chip.off{background:var(--red-soft);color:var(--red-fg);}
/* Synthèse compacte, façon statusline : chiffres légers, libellés discrets, pas de carte lourde. */
.ck-sum{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;font-size:.74rem;padding:2px 4px 4px;}
.ck-sum span{display:inline-flex;align-items:baseline;gap:6px;color:var(--ink-2);font-variant-numeric:tabular-nums;}
.ck-sum span b{font-size:1.5rem;font-weight:300;line-height:1;color:var(--ink);letter-spacing:-.01em;}
.ck-sum .alert{color:var(--hot);font-weight:500;}
.ck-sum .alert b{color:var(--hot);}
.ck-switch{display:inline-flex;background:rgba(33,42,54,.07);border-radius:99px;padding:4px;}
.ck-switch span{font-size:.76rem;padding:6px 16px;border-radius:99px;cursor:pointer;color:var(--ink-2);font-weight:600;transition:all var(--t);}
.ck-switch span.active{background:#fff;color:var(--ink);box-shadow:0 2px 8px -3px rgba(31,45,70,.3);}
/* Intertitres de la vue Configuration : groupes par moment de vie de la box
   (Programmation / Entretien / Machine / Mise en service). Discrets — de l'organisation,
   pas de la décoration. */
/* Sous-titres pédagogiques de la page Comptes (deux notions de « client » : l'accès et le
   regroupement — on explique sur place plutôt que de laisser deviner). */
.acct-sub{font-size:.78rem;color:var(--ink-2);margin:0 0 14px;max-width:640px;line-height:1.45;}
/* Annuaire en accordeon : un volet par rattachement (Notre organisation, chaque client,
   et « A rattacher » pour les comptes client orphelins). */
details.acct-group{background:var(--glass);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);
  border:1px solid var(--glass-line);border-radius:var(--r-sm);overflow:hidden;box-shadow:var(--sh-sm);margin-bottom:10px;}
details.acct-group>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:13px 18px;transition:background var(--t);}
details.acct-group>summary:hover{background:rgba(255,255,255,.35);}
details.acct-group>summary::-webkit-details-marker{display:none;}
.acct-title{font-size:.9rem;font-weight:600;color:var(--ink);}
.acct-count{font-size:.72rem;color:var(--ink-3);}
.acct-caret{margin-left:auto;font-size:.72rem;color:var(--ink-3);transition:transform var(--t);}
details.acct-group[open]>summary .acct-caret{transform:rotate(180deg);}
.acct-body{padding:2px 14px 14px;}
.acct-empty{font-size:.78rem;color:var(--ink-3);padding:8px 4px 10px;}
.acct-bell{font-size:.85rem;line-height:1;}
.acct-pick{font-size:.76rem;padding:6px 9px;background:var(--inset);border:1px solid var(--line-2);border-radius:9px;color:var(--ink);}
/* Badge de sourdine (tableau de bord) : une sourdine oubliée doit se voir. */
.sup-mute{font-size:.66rem;color:var(--ink-2);border:1px solid var(--line-2);border-radius:999px;padding:1px 7px;background:var(--inset);}
.sup-mute.forever{color:var(--hot-deep);border-color:var(--hot);background:var(--hot-soft);}
.sup-row{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:9px 0;border-top:1px solid rgba(255,255,255,.65);}
.sup-row:first-child{border-top:none;}
.sup-row .t{font-size:.82rem;color:var(--ink);font-weight:550;}
.sup-row .s{font-size:.74rem;}
.ck-group{font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin:18px 2px 6px;}
.ck-group:first-of-type{margin-top:4px;}
.ck-danger{background:rgba(253,234,228,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(241,89,60,.35);border-radius:var(--r-sm);padding:16px 18px;box-shadow:var(--sh-sm);}
.ck-danger .ckd-title{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--hot-deep);font-weight:680;margin-bottom:12px;}
.ck-danger .btn{border-radius:99px;background:rgba(255,255,255,.72);border:1px solid rgba(241,89,60,.4);color:var(--hot-deep);}
.ck-danger .btn:hover{background:#fff;border-color:var(--hot);color:var(--hot-deep);}
/* Écran post-mortem d'une box révoquée/remplacée */
.pm-banner{background:rgba(253,234,228,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(241,89,60,.35);border-radius:var(--r-sm);padding:16px 18px;box-shadow:var(--sh-sm);margin-bottom:14px;}
.pm-banner-title{font-size:1.02rem;font-weight:650;color:var(--hot-deep);font-family:var(--rounded);letter-spacing:-.01em;}
.pm-banner-sub{font-size:.78rem;color:var(--ink-2);margin-top:4px;}

/* Bloc Équipements : widget verre unique (comme un .w de la mosaïque) qui regroupe les zones. */
#ck-devices{background:rgba(255,255,255,.6);backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%);
  border:1px solid rgba(255,255,255,.8);border-radius:var(--r-sm);box-shadow:var(--sh);padding:6px 16px;}
#ck-devices:empty{display:none;}
details.zone{border-top:1px solid rgba(255,255,255,.75);}
details.zone:first-child{border-top:none;}
details.zone>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:12px 2px;border-radius:9px;transition:background var(--t);}
details.zone>summary:hover{background:rgba(255,255,255,.4);}
details.zone>summary::-webkit-details-marker{display:none;}
.zone .caret{color:var(--ink-3);font-size:.7rem;transition:transform var(--t);}
details.zone[open] .caret{transform:rotate(90deg);}
.zone .znm{font-size:.8rem;font-weight:600;color:var(--ink-2);letter-spacing:0;text-transform:none;}
.zone .zct{margin-left:auto;font-size:.68rem;color:var(--ink-3);font-variant-numeric:tabular-nums;}
.zone>div{padding-bottom:6px;}

/* Équipement : rangée propre à séparateur hairline (façon .zone-row/.site-row de la maquette). */
.dev{border-top:1px solid rgba(255,255,255,.7);border-radius:12px;overflow:hidden;transition:background var(--t);}
.dev:first-child{border-top:none;}
.dev:hover{background:rgba(255,255,255,.5);}
.dev.expanded{background:rgba(255,255,255,.55);}
.dev-row{display:flex;align-items:center;gap:11px;padding:9px 8px;}
.dev-lamp{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.dev-lamp.on{background:radial-gradient(circle at 35% 30%,#ffd23f,var(--hot));box-shadow:0 0 0 3px var(--hot-soft);}
.dev-lamp.off{background:#dfe4ec;box-shadow:0 0 0 3px rgba(223,228,236,.5);}
.dev-lamp.measure{background:radial-gradient(circle at 35% 30%,#8fbbe0,var(--blue));box-shadow:0 0 0 3px #e7eff6;}
.dev-name{font-size:.85rem;font-weight:500;color:var(--ink);}
.dev-tag{font-size:.6rem;color:var(--ink-3);border:1px solid var(--line-2);border-radius:6px;padding:2px 7px;text-transform:uppercase;letter-spacing:.06em;}
.dev-state{margin-left:auto;font-size:.7rem;font-weight:600;color:var(--ink-2);letter-spacing:.02em;font-variant-numeric:tabular-nums;}
.dev-val{margin-left:auto;font-weight:400;color:var(--ink);font-size:1.05rem;font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
.dev-val .u{font-size:.68rem;color:var(--ink-3);font-weight:400;}
.spark{display:inline-flex;align-items:center;margin-left:8px;flex-shrink:0;}
.dev-hist{width:100%;font-size:.68rem;color:var(--ink-2);}
.dev-hist .hist-title{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding:4px 0 3px;}
.dev-hist .hist-line{display:flex;justify-content:space-between;gap:10px;padding:3px 0;border-top:1px solid var(--line);font-variant-numeric:tabular-nums;}
/* Courbe d'historique dépliable (volet d'un équipement numérique). */
.dev-arrow{font-size:.6rem;color:var(--ink-3);margin-left:6px;flex-shrink:0;transition:transform var(--t);}
.dev.expanded .dev-arrow{transform:rotate(180deg);}
.dev-graph{width:100%;}
.dev-graph .g-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding:4px 0 8px;font-size:.68rem;color:var(--ink-3);}
.dev-graph .g-head b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;}
.dev-graph .g-ranges{margin-left:auto;display:flex;gap:4px;}
.dev-graph .g-ranges span{font-size:.64rem;color:var(--ink-2);border:1px solid var(--line-2);border-radius:99px;padding:3px 10px;cursor:pointer;}
.dev-graph .g-ranges span.active{color:var(--hot);border-color:var(--hot);}
.dev-graph svg{width:100%;height:auto;display:block;}
.dev-graph .g-msg{font-size:.7rem;color:var(--ink-3);padding:6px 0;}
.ro-badge{font-size:.66rem;color:var(--hot);border:1px solid rgba(241,89,60,.3);border-radius:999px;padding:3px 9px;background:var(--hot-soft);}
.role-tag{font-size:.62rem;color:var(--ink-3);border:1px solid var(--line-2);border-radius:6px;padding:2px 7px;margin-left:8px;}
.role-tag.viewer{color:var(--blue);}
.role-tag.client{color:var(--hot-deep);border-color:var(--hot);}
.u-sites-count{font-size:.68rem;color:var(--ink-3);margin-left:6px;}
.nu-sites{display:flex;flex-wrap:wrap;gap:8px;}
.nu-site{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;color:var(--ink);background:var(--inset);border:1px solid var(--line-2);border-radius:9px;padding:6px 10px;cursor:pointer;}
.nu-site input{margin:0;}
.usites-ed{margin-top:12px;padding:12px;background:var(--inset);border:1px solid var(--line-2);border-radius:11px;}
.hint{font-size:.76rem;color:var(--ink-3);line-height:1.5;}
/* Bouton Tester/Historique : pilule verre secondaire. */
.dev-test{font-family:inherit;font-size:.66rem;font-weight:600;color:var(--ink-2);border:none;border-radius:99px;padding:6px 13px;
  background:rgba(255,255,255,.8);box-shadow:inset 0 0 0 1px rgba(255,255,255,.9), 0 5px 12px -8px rgba(31,45,70,.4);
  cursor:pointer;transition:transform var(--t),color var(--t);}
.dev-test:hover{transform:translateY(-1px);color:var(--ink);}
.dev-panel{padding:0 8px 12px;display:none;flex-wrap:wrap;gap:8px;align-items:center;}
.dev.expanded .dev-panel{display:flex;}
/* Commande : pilule verre secondaire ; hover discret. */
.cmd{font-family:inherit;font-size:.74rem;font-weight:600;padding:8px 16px;border-radius:99px;border:none;color:var(--ink);
  background:rgba(255,255,255,.85);box-shadow:inset 0 0 0 1px rgba(255,255,255,.9), 0 6px 14px -9px rgba(31,45,70,.4);
  cursor:pointer;transition:transform var(--t);}
.cmd:hover{transform:translateY(-1px);}
.seg{display:inline-flex;background:rgba(33,42,54,.07);border-radius:99px;padding:3px;}
.seg span{font-size:.72rem;padding:6px 14px;border-radius:99px;cursor:pointer;color:var(--ink-2);font-weight:600;transition:all var(--t);}
.seg span.active{background:#fff;color:var(--ink);box-shadow:0 2px 8px -3px rgba(31,45,70,.3);}
/* Séquences : pilules blanches « ▸ Nom » (▸ corail), comme .seq de la maquette. */
.scn-row{display:flex;gap:10px;flex-wrap:wrap;margin:10px 2px 12px;}
.scn{font-family:inherit;font-size:.76rem;font-weight:600;padding:9px 18px;border-radius:99px;border:none;color:var(--ink);
  background:rgba(255,255,255,.85);box-shadow:inset 0 0 0 1px rgba(255,255,255,.9), 0 6px 14px -8px rgba(31,45,70,.4);
  cursor:pointer;transition:transform var(--t);}
.scn::before{content:"▸ ";color:var(--hot);}
.scn:hover{transform:translateY(-1px);}
.flat-list{padding:0 2px;}

/* Sections dépliables (Journal / Assistant / Configuration) : widgets verre cohérents avec la mosaïque. */
details.journal{background:var(--glass);backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%);
  border:1px solid var(--glass-line);border-radius:var(--r-sm);overflow:hidden;box-shadow:var(--sh);}
details.journal>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:14px 18px;transition:background var(--t);}
details.journal>summary:hover{background:rgba(255,255,255,.35);}
details.journal>summary::-webkit-details-marker{display:none;}
.journal .jlbl, .settings .jlbl{font-size:.82rem;letter-spacing:0;text-transform:none;color:var(--ink-2);font-weight:600;}
.journal .jbadge{font-size:.68rem;font-weight:600;color:var(--hot);}
.journal .jcaret, .settings .jcaret{margin-left:auto;color:var(--ink-3);font-size:.68rem;transition:transform var(--t);}
details.journal[open] .jcaret, details.settings[open] .jcaret{transform:rotate(180deg);}
.jbody{padding:0 18px 13px;max-height:230px;overflow-y:auto;}
/* Ligne de journal façon .jr de la maquette : heure discrète, message en encre douce. */
.jline{display:flex;gap:12px;align-items:baseline;font-size:.8rem;padding:7px 0;border-top:1px solid rgba(255,255,255,.65);}
.jline:first-child{border-top:none;}
.jline .jt{flex:none;width:46px;font-size:.7rem;color:var(--ink-3);font-variant-numeric:tabular-nums;}
.jline .ji{color:var(--ink-2);}
.jline .ji b{color:var(--ink);font-weight:500;}
.jline.warn .ji, .settings-body .warn{color:var(--hot);}
.jline.ok .ji, .settings-body .ok{color:var(--green-fg);}
/* ---------- Assistant de diagnostic (chat) — composant modulaire (1C) ---------- */
details.assistant{background:var(--glass);backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%);
  border:1px solid var(--glass-line);border-radius:var(--r-sm);overflow:hidden;box-shadow:var(--sh);}
details.assistant>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:14px 18px;transition:background var(--t);}
details.assistant>summary:hover{background:rgba(255,255,255,.35);}
details.assistant>summary::-webkit-details-marker{display:none;}
.assistant .jlbl{font-size:.82rem;letter-spacing:0;text-transform:none;color:var(--ink-2);font-weight:600;}
.assistant .jcaret{margin-left:auto;color:var(--ink-3);font-size:.68rem;transition:transform var(--t);}
details.assistant[open] .jcaret{transform:rotate(180deg);}
.asst-body{padding:2px 16px 16px;}
.asst-msgs{max-height:340px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:12px 0;}
.asst-empty{font-size:.76rem;color:var(--ink-3);line-height:1.5;padding:8px 0;}
.asst-msg{display:flex;flex-direction:column;gap:5px;max-width:88%;}
.asst-msg.user{align-self:flex-end;align-items:flex-end;}
.asst-msg.assistant{align-self:flex-start;align-items:flex-start;}
.asst-bubble{padding:9px 14px;border-radius:15px;font-size:.82rem;line-height:1.45;white-space:pre-wrap;word-break:break-word;}
.asst-msg.user .asst-bubble{background:var(--ink);color:#fff;border-bottom-right-radius:5px;}
.asst-msg.assistant .asst-bubble{background:rgba(255,255,255,.72);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(255,255,255,.85);border-bottom-left-radius:5px;}
.asst-msg.error .asst-bubble{background:var(--hot-soft);color:var(--hot);box-shadow:inset 0 0 0 1px rgba(241,89,60,.4);}
.asst-trace{display:flex;flex-wrap:wrap;gap:5px;}
.asst-tool{font-family:ui-monospace,monospace;font-size:.64rem;color:var(--ink-3);background:var(--inset);border:1px solid var(--line);border-radius:6px;padding:2px 7px;}
.asst-tool.ko{color:var(--hot);border-color:var(--hot);}
.asst-think{font-size:.74rem;color:var(--ink-3);font-style:italic;padding:2px 0;}
.asst-input-row{display:flex;gap:8px;align-items:flex-end;margin-top:8px;}
.asst-input-row textarea{flex:1;background:rgba(255,255,255,.8);border:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.9);border-radius:20px;color:var(--ink);padding:11px 16px;font-size:.82rem;font-family:inherit;resize:none;min-height:42px;max-height:120px;transition:box-shadow var(--t);}
.asst-input-row textarea:focus{outline:none;box-shadow:inset 0 0 0 1px var(--hot), 0 0 0 3px var(--hot-soft);}
.asst-input-row textarea:disabled{opacity:.6;}
/* Bouton Envoyer : pilule encre comme .asst de la maquette. */
#asstSend{align-self:stretch;background:var(--ink);color:#fff;border:none;border-radius:99px;padding:0 20px;font-weight:600;font-size:.8rem;box-shadow:none;}
#asstSend:hover{background:var(--ink);color:#fff;transform:translateY(-1px);box-shadow:0 8px 18px -8px rgba(31,45,70,.5);}
.asst-hint{font-size:.66rem;color:var(--ink-3);margin-top:6px;}
.asst-consent{align-self:stretch;background:var(--hot-soft);border:1px solid var(--hot);border-radius:11px;padding:11px 13px;font-size:.8rem;color:var(--ink);line-height:1.45;}
.asst-consent-btns{display:flex;gap:8px;margin-top:9px;}
.asst-action{align-self:stretch;background:var(--inset);border:1px solid var(--line-2);border-radius:11px;padding:11px 13px;font-size:.8rem;color:var(--ink);line-height:1.45;}
.asst-action.risky{background:var(--hot-soft);border-color:var(--hot);}
.asst-action-lbl{margin-bottom:4px;}
.asst-act-warn{color:var(--hot);font-size:.76rem;margin:4px 0;}
.asst-act-conseq{color:var(--ink-2);font-size:.74rem;margin:4px 0;}
.asst-action-detail{margin:6px 0;}
.asst-action-detail>summary{cursor:pointer;font-size:.72rem;color:var(--ink-3);}
.asst-action-detail pre{white-space:pre-wrap;font-size:.7rem;background:var(--inset);border-radius:8px;padding:8px;margin-top:6px;max-height:220px;overflow:auto;}
.btn.small.ghost{background:transparent;border:1px solid var(--line-2);color:var(--ink-2);}
.asst-ro{margin-top:8px;}
.asst-ro-lbl{display:flex;align-items:center;gap:7px;font-size:.72rem;color:var(--ink-2);cursor:pointer;}
.asst-ro-lbl input{accent-color:var(--hot);}
.empty{text-align:center;padding:64px 20px;color:var(--ink-4);font-size:.9rem;}
.hidden{display:none !important;}

details.settings{background:var(--glass);backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%);
  border:1px solid var(--glass-line);border-radius:var(--r-sm);overflow:hidden;box-shadow:var(--sh);}
details.settings>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:14px 18px;transition:background var(--t);}
details.settings>summary:hover{background:rgba(255,255,255,.35);}
details.settings>summary::-webkit-details-marker{display:none;}
.settings-body{padding:2px 18px 16px;}
.settings-body .kv{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 0;border-top:1px solid rgba(255,255,255,.65);}
.settings-body .kv:first-child{border-top:none;}
.settings-body .kv>span{font-size:.74rem;color:var(--ink-2);min-width:160px;}
.settings-body input{background:rgba(255,255,255,.8);border:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.9);border-radius:99px;color:var(--ink);padding:8px 14px;font-size:.78rem;transition:box-shadow var(--t);}
.settings-body input:focus{outline:none;box-shadow:inset 0 0 0 1px var(--hot), 0 0 0 3px var(--hot-soft);}
.settings-body input[type=file]{background:none;box-shadow:none;padding:4px 0;border-radius:0;}
.settings-body .row{display:flex;gap:8px;flex-wrap:wrap;}
.settings-body .muted{font-size:.72rem;color:var(--ink-3);margin-top:6px;}

/* Spinner sobre partagé (volets Système/Réseau ; sans emoji). */
.spin{display:inline-block;width:14px;height:14px;border:2px solid var(--ink-3);
  border-top-color:transparent;border-radius:50%;animation:spin .7s linear infinite;
  vertical-align:middle;}
@keyframes spin{to{transform:rotate(360deg);}}
.settings-loading{display:flex;align-items:center;gap:8px;color:var(--ink-2);font-size:.8rem;padding:4px 0;}
.btn.busy{opacity:.6;pointer-events:none;}
/* Volet Étiquette : QR Wi-Fi sur fond blanc (contraste garanti, imprimable). */
.label-card{display:flex;flex-direction:column;gap:8px;}
.label-qr{display:flex;justify-content:center;padding:12px;margin:4px auto 0;background:#fff;
  border-radius:12px;width:fit-content;}
/* La mise à l'échelle n'opère que parce que le SVG porte un viewBox (LabelQr.EnsureViewBox). */
.label-qr svg{width:180px;height:180px;display:block;}
/* Box sans radio Wi-Fi : le hotspot annoncé juste en dessous est inémettable. Corail (alerte
   fonctionnelle) et non or — l'or reste réservé à l'identité. */
.label-noradio{background:rgba(241,89,60,.09);border-left:3px solid var(--hot);
  border-radius:0 10px 10px 0;padding:9px 12px;font-size:.79rem;line-height:1.45;color:var(--ink-2);}
.label-noradio strong{display:block;color:var(--ink);font-weight:650;margin-bottom:2px;}
/* Pas de règle @media print ici : « Imprimer » construit son propre document (labelPrint),
   ce qui évite le masquage-par-visibility qui laissait des blancs sur la feuille. */
.ca-switch{display:flex;align-items:center;gap:9px;font-size:.86rem;color:var(--ink);cursor:pointer;}
.ca-switch input{width:16px;height:16px;cursor:pointer;}
.ca-switch input:disabled{cursor:not-allowed;opacity:.5;}
.net-banner{border-radius:10px;padding:10px 12px;margin:8px 0;font-size:.82rem;}
.net-banner.armed{background:rgba(255,176,32,.14);color:var(--hot);}
.net-banner.ok{background:rgba(60,200,120,.14);color:var(--green-fg);}
.net-banner.reverted{background:rgba(255,80,80,.14);color:var(--hot);}

/* ---------- Authentification ---------- */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;}
.auth-card{width:100%;max-width:392px;background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.9);
  border-radius:26px;padding:38px 32px 32px;text-align:center;
  backdrop-filter:blur(26px) saturate(170%);-webkit-backdrop-filter:blur(26px) saturate(170%);
  box-shadow:var(--sh-lg), inset 0 1px 0 rgba(255,255,255,.8);animation:auth-in .35s var(--ease);}
@keyframes auth-in{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
/* Signature de marque MyStro : monogramme + mot-symbole, au-dessus du titre.
   Posée en pseudo-élément pour que TOUS les écrans d'authentification en héritent
   (connexion, création du premier compte) sans dupliquer de balisage.
   Le logo signe, il ne nomme pas : le titre et le sous-titre disent « Maestro ».
   L'or (--gold) ne sert QUE là — l'action reste corail. */
.auth-card::before{content:"MYSTRO";display:block;margin:0 auto 20px;padding:44px 0 16px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='15 21 70 62'%3E%3Cpath d='M22 76 V28 M78 76 V28' stroke='%235e6876' stroke-width='10' stroke-linecap='round' fill='none'/%3E%3Cpath d='M22 28 A 28.5 28.5 0 0 0 78 28' stroke='%238f7215' stroke-width='10' stroke-linecap='round' fill='none'/%3E%3Ccircle cx='50' cy='63' r='6' fill='%238f7215'/%3E%3C/svg%3E") no-repeat top center;
  background-size:32px 28px;
  font-size:.66rem;font-weight:600;letter-spacing:.26em;text-indent:.26em;color:var(--ink-2);
  border-bottom:1px solid rgba(143,114,21,.22);}
.auth-card h2{font-size:1.55rem;color:var(--ink);margin-bottom:5px;font-weight:730;letter-spacing:-.02em;font-family:var(--rounded);}
.auth-card p.sub{font-size:.88rem;color:var(--ink-2);margin-bottom:22px;}
.auth-card label{display:block;font-size:.74rem;color:var(--ink-2);margin:14px 0 7px;font-weight:600;text-align:left;}
.auth-card input{width:100%;padding:13px 14px;background:rgba(255,255,255,.9);border:1px solid var(--line-2);border-radius:13px;
  color:var(--ink);font-size:.94rem;transition:border-color var(--t),box-shadow var(--t);}
.auth-card input:focus{outline:none;border-color:var(--hot);box-shadow:0 0 0 4px var(--hot-soft);}
.auth-btn{width:100%;margin-top:22px;padding:14px;border:none;border-radius:14px;color:#fff;font-weight:680;font-size:.94rem;cursor:pointer;
  background:linear-gradient(135deg,var(--hot-2),var(--hot) 60%,var(--hot-deep));
  box-shadow:0 14px 28px -12px rgba(241,89,60,.8), inset 0 1px 0 rgba(255,255,255,.35);
  position:relative;overflow:hidden;isolation:isolate;transition:transform var(--t),box-shadow var(--t),filter var(--t);}
.auth-btn::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(110deg,transparent 18%,rgba(255,255,255,.5) 50%,transparent 82%);
  transform:translateX(-160%);transition:transform .7s var(--ease);}
.auth-btn:hover{transform:translateY(-2px);filter:brightness(1.03);box-shadow:0 18px 34px -12px rgba(241,89,60,.9);}
.auth-btn:hover::after{transform:translateX(160%);}
.auth-btn:active{transform:translateY(0);}
.auth-btn:disabled{opacity:.5;cursor:default;box-shadow:none;}
.auth-err{margin-top:13px;font-size:.8rem;color:var(--red-fg);min-height:1.1em;}

/* ---------- Barre utilisateur (regroupée à droite du header) ---------- */
.userbar{display:flex;align-items:center;gap:10px;margin-left:auto;font-size:.82rem;color:var(--ink-2);min-width:0;}
.userbar .ue{max-width:38vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.userbar .av{width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-weight:600;color:#fff;font-size:.8rem;background:linear-gradient(135deg,var(--blue),#7fb0dd);
  box-shadow:var(--sh);flex-shrink:0;}
.userbar button{font:inherit;background:none;border:none;color:var(--ink-2);border-radius:99px;
  padding:7px 15px;font-size:.82rem;font-weight:500;cursor:pointer;transition:background .15s var(--ease),color .15s var(--ease);}
.userbar button:hover{background:var(--glass);color:var(--ink);box-shadow:inset 0 0 0 1px var(--glass-line);}

/* Bouton « ← Retour » (vues Utilisateurs / Paramètres / Drivers). */
.ck-back{background:none;border:none;color:var(--ink-2);font-size:.84rem;cursor:pointer;padding:7px 0;margin-bottom:10px;
  display:inline-flex;align-items:center;gap:6px;transition:color var(--t),transform var(--t);}
.ck-back:hover{color:var(--ink);transform:translateX(-3px);}

/* ---------- Utilisateurs ---------- */
.users-list{max-width:560px;margin:0 auto;padding:24px 20px;}
.u-row{display:flex;align-items:center;flex-wrap:wrap;gap:11px;background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:13px 15px;margin-bottom:8px;box-shadow:var(--sh-sm);transition:border-color var(--t),box-shadow var(--t);}
.u-row:hover{border-color:var(--line-2);box-shadow:var(--sh);}
.u-name{font-size:.92rem;font-weight:550;min-width:0;overflow-wrap:anywhere;}
.u-row .right{margin-left:auto;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px;}
.u-row button{font-size:.74rem;white-space:nowrap;flex:0 0 auto;border-radius:9px;padding:6px 11px;border:1px solid var(--line-2);background:var(--inset);color:var(--ink);cursor:pointer;font-weight:550;transition:background var(--t);}
.u-row button:hover{background:#fff;border-color:var(--hot);color:var(--hot-deep);transform:translateY(-1px);box-shadow:0 8px 16px -8px rgba(241,89,60,.4);}
.u-row button.danger{color:var(--red-fg);border-color:rgba(239,68,68,.3);background:var(--red-soft);}
.u-row button.danger:hover{background:#fbdada;}

/* ---------- Paramètres / sections ---------- */
.settings-view{max-width:660px;margin:0 auto;padding:24px 20px 44px;}
.settings-section{background:rgba(255,255,255,.66);backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);border:1px solid rgba(255,255,255,.65);border-radius:var(--r);padding:22px;margin-bottom:16px;box-shadow:var(--sh-sm);}
.settings-section h3{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin-bottom:15px;font-weight:650;font-family:inherit;}
/* --- Bibliothèque de drivers : recherche + facettes + cartes par catégorie --- */
.dl-toolbar{display:flex;flex-direction:column;gap:12px;margin-bottom:6px;}
.dl-search{display:flex;align-items:center;gap:9px;background:var(--inset);border:1px solid var(--line-2);border-radius:12px;padding:10px 13px;transition:border-color var(--t),box-shadow var(--t);}
.dl-search:focus-within{border-color:var(--hot);box-shadow:0 0 0 3px rgba(241,89,60,.13);}
.dl-search svg{flex:none;color:var(--ink-3);}
.dl-search input{border:none;background:none;outline:none;font:inherit;font-size:.86rem;color:var(--ink);width:100%;}
/* Résumé par catégorie (vue au repos, sans filtre ni recherche) : tuiles cliquables nom + compteur. */
.dl-summary{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-top:16px;}
.dl-cat-tile{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:13px 15px;cursor:pointer;text-align:left;font:inherit;color:var(--ink);transition:border-color var(--t),box-shadow var(--t),transform var(--t);}
.dl-cat-tile:hover{border-color:var(--hot);box-shadow:var(--sh-sm);transform:translateY(-1px);}
.dl-cat-tile .nm{font-size:.9rem;font-weight:600;font-family:var(--rounded);letter-spacing:-.01em;min-width:0;overflow-wrap:anywhere;}
.dl-cat-tile .n{font-size:.78rem;color:var(--ink-3);font-variant-numeric:tabular-nums;font-weight:600;flex:none;}
.dl-summary-hint{font-size:.8rem;color:var(--ink-3);margin:2px 0;}
/* Raccourci-filtre « À tester » + « Réinitialiser les filtres » (rangée au-dessus des résultats). */
.dl-shortcut-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.dl-shortcut{font-size:.78rem;font-weight:600;padding:6px 13px;border-radius:99px;cursor:pointer;background:#faf0dc;color:var(--amber-fg);border:1px solid transparent;transition:filter var(--t);white-space:nowrap;}
.dl-shortcut:hover{filter:brightness(.97);}
.dl-shortcut.on{background:var(--amber-fg);color:#fff;}
.dl-reset{font-size:.78rem;font-weight:600;padding:6px 13px;border-radius:99px;cursor:pointer;background:var(--inset);border:1px solid var(--line-2);color:var(--ink-2);white-space:nowrap;}
.dl-reset:hover{color:var(--ink);border-color:var(--ink-4);}
/* Bouton « Afficher plus » de la vue incrémentale (plafond de cartes). */
.dl-more-wrap{text-align:center;margin-top:18px;}
.dl-more{font-size:.82rem;font-weight:600;padding:9px 20px;border-radius:11px;cursor:pointer;background:var(--card);border:1px solid var(--line-2);color:var(--ink);box-shadow:var(--sh-sm);transition:border-color var(--t),color var(--t),transform var(--t);}
.dl-more:hover{border-color:var(--hot);color:var(--hot-deep);transform:translateY(-1px);}
.dl-selects{display:flex;flex-wrap:wrap;gap:8px;}
.dl-selects select{background:var(--inset);border:1px solid var(--line-2);border-radius:9px;color:var(--ink);padding:8px 12px;font-size:.8rem;cursor:pointer;transition:border-color var(--t);}
.dl-selects select:focus{outline:none;border-color:var(--hot);}
.dl-count{font-size:.78rem;color:var(--ink-3);font-weight:500;font-variant-numeric:tabular-nums;}
.dl-group{margin-top:20px;}
.dl-group-h{display:flex;align-items:center;gap:8px;width:100%;background:none;border:none;cursor:pointer;text-align:left;font:inherit;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);font-weight:650;margin-bottom:11px;padding:4px 0;transition:color var(--t);}
.dl-group-h:hover{color:var(--ink);}
.dl-group-h .dl-caret{flex:none;font-size:.6rem;letter-spacing:0;color:var(--ink-3);transition:transform var(--t);display:inline-block;}
.dl-group.collapsed .dl-caret{transform:rotate(-90deg);}
.dl-group-h .n{color:var(--ink-3);font-weight:500;letter-spacing:0;text-transform:none;}
.dl-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:11px;}
.dl-group.collapsed .dl-cards{display:none;}
.dl-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 15px;cursor:pointer;transition:border-color var(--t),box-shadow var(--t);}
.dl-card:hover{border-color:var(--line-2);box-shadow:var(--sh-sm);}
.dl-card:focus-visible{outline:2px solid var(--hot);outline-offset:2px;}
/* Détail dépliable d'une carte (au clic) : id technique, signature, modèles, prérequis. */
.dl-card .dl-detail{margin-top:11px;padding-top:11px;border-top:1px solid var(--line);}
.dl-card .dl-detail .id{margin-top:0;}
/* Volet repliable « Contributeurs du mois » (en bas de page). */
.dl-group.collapsed .dl-lb-panel{display:none;}
.dl-card .lbl{font-size:.92rem;font-weight:600;color:var(--ink);font-family:var(--rounded);letter-spacing:-.01em;line-height:1.25;}
.dl-card .fab{font-size:.76rem;color:var(--ink-3);margin-top:3px;}
/* Modèles couverts par la fiche : ligne grise compacte, dépliable (une fiche dédupliquée peut
   en couvrir des centaines) — même esprit neutre que le dépliant Prérequis. */
.dl-card .models{font-size:.72rem;color:var(--ink-3);margin-top:5px;line-height:1.4;}
.dl-card .models .lead{color:var(--ink-4);}
.dl-card .models .more{cursor:pointer;color:var(--ink-2);font-weight:600;white-space:nowrap;}
.dl-card .models .more:hover{color:var(--ink);text-decoration:underline;}
.dl-card .id{font-family:ui-monospace,monospace;font-size:.68rem;color:var(--ink-4);margin-top:3px;word-break:break-all;}
.dl-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px;align-items:center;}
.dl-badge{font-size:.68rem;font-weight:600;padding:3px 9px;border-radius:99px;background:var(--inset);color:var(--ink-2);border:1px solid var(--line-2);white-space:nowrap;}
.dl-badge.off{background:var(--green-soft);color:var(--green-fg);border-color:transparent;}
/* Statut de test : « À tester » (brouillon, jamais vérifié sur matériel) en ambre doux ;
   « Testé » en vert doux. L'officiel n'affiche rien (le badge Officiel suffit). */
.dl-badge.atester{background:#faf0dc;color:var(--amber-fg);border-color:transparent;}
.dl-badge.teste{background:var(--green-soft);color:var(--green-fg);border-color:transparent;}
.dl-badge.ver{font-family:ui-monospace,monospace;font-weight:500;}
/* Prérequis = information neutre (réglages à connaître), jamais une alerte : gris/encre secondaire + icône « i ». */
.dl-badge.prereq{cursor:pointer;background:var(--inset);color:var(--ink-2);border-color:var(--line-2);}
.dl-badge.prereq:hover{background:var(--line);color:var(--ink);}
.dl-prereq-body{font-size:.78rem;color:var(--ink-2);white-space:pre-wrap;background:var(--inset);border-radius:9px;padding:10px 12px;margin-top:10px;line-height:1.5;}
.dl-empty{font-size:.82rem;color:var(--ink-2);padding:18px 0;text-align:center;}
/* Signature (attribution) sur une carte de driver — discrète ; « non signé » encore plus estompé. */
.dl-card .sig{font-size:.72rem;color:var(--ink-3);margin-top:8px;font-style:normal;}
.dl-card .sig.unsigned{color:var(--ink-4);font-style:italic;}
/* Panneau pseudo + jeton d'API drivers. */
.dl-token{background:var(--inset);border:1px solid var(--line-2);border-radius:14px;padding:15px 17px;margin-bottom:18px;}
.dl-token .st{font-size:.82rem;color:var(--ink-3);margin-bottom:12px;}
.dl-token .st b{color:var(--ink);}
.dl-pseudo{margin-bottom:12px;}
.dl-pseudo label{display:block;font-size:.78rem;font-weight:600;color:var(--ink-2);margin-bottom:5px;}
.dl-pseudo .note{font-size:.76rem;color:var(--ink-3);line-height:1.5;margin-bottom:9px;}
.dl-pseudo .edit{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.dl-pseudo input{flex:1;min-width:160px;background:var(--card);border:1px solid var(--line-2);border-radius:9px;color:var(--ink);padding:8px 11px;font-size:.84rem;}
.dl-pseudo input:focus{outline:none;border-color:var(--hot);}
.dl-token-actions{display:flex;gap:8px;flex-wrap:wrap;}
/* Classement « Contributeurs du mois » — podium + liste, visible de tous, sobre. */
.dl-lb{background:var(--inset);border:1px solid var(--line-2);border-radius:14px;padding:16px 18px;margin-bottom:20px;}
.dl-lb-head{display:flex;align-items:baseline;justify-content:flex-end;gap:10px;margin-bottom:14px;}
.dl-lb-head h3{font-size:.95rem;font-weight:650;color:var(--ink);font-family:var(--rounded);margin:0;letter-spacing:-.01em;}
.dl-lb-month{font-size:.74rem;color:var(--ink-3);text-transform:capitalize;white-space:nowrap;}
.dl-lb-empty{font-size:.82rem;color:var(--ink-3);text-align:center;padding:16px 0;}
.dl-podium{display:flex;align-items:flex-end;justify-content:center;gap:10px;margin-bottom:4px;}
.dl-podium .col{flex:1;max-width:150px;display:flex;flex-direction:column;align-items:center;gap:5px;}
.dl-podium .who{font-size:.8rem;font-weight:600;color:var(--ink);text-align:center;line-height:1.2;word-break:break-word;}
.dl-podium .pts{font-size:.72rem;color:var(--ink-2);font-variant-numeric:tabular-nums;}
.dl-podium .stand{width:100%;border-radius:11px 11px 0 0;display:flex;align-items:flex-start;justify-content:center;padding-top:7px;font-weight:700;font-size:1rem;color:#fff;}
.dl-podium .r1 .stand{height:74px;background:linear-gradient(180deg,#e8b923,#d29e12);}
.dl-podium .r2 .stand{height:56px;background:linear-gradient(180deg,#bcc3ce,#98a1af);}
.dl-podium .r3 .stand{height:42px;background:linear-gradient(180deg,#cf9668,#b57748);}
.dl-lb-list{display:flex;flex-direction:column;margin-top:10px;}
.dl-lb-row{display:flex;align-items:center;gap:10px;font-size:.82rem;padding:7px 2px;border-top:1px solid var(--line);}
.dl-lb-row .rk{flex:none;width:22px;color:var(--ink-3);font-variant-numeric:tabular-nums;text-align:right;font-weight:600;}
.dl-lb-row .nm{color:var(--ink);font-weight:600;}
.dl-lb-row .dt{color:var(--ink-3);font-size:.72rem;margin-left:auto;text-align:right;}
.dl-lb-row .pt{flex:none;font-variant-numeric:tabular-nums;color:var(--ink-2);font-weight:600;min-width:46px;text-align:right;}
/* Colonne pseudo (page Utilisateurs). */
.u-pseudo{font-size:.74rem;color:var(--ink-3);}
.u-pseudo b{color:var(--ink-2);font-weight:600;}
.key-box{font-family:ui-monospace,monospace;font-size:.88rem;background:var(--inset);border:1px solid var(--line-2);border-radius:10px;padding:11px 14px;color:var(--hot-deep);word-break:break-all;margin:10px 0;}
.key-notice{font-size:.76rem;color:var(--amber-fg);margin:6px 0 12px;}
.btn{font-size:.8rem;padding:8px 15px;border-radius:10px;background:var(--card);border:1px solid var(--line-2);color:var(--ink);
  cursor:pointer;font-weight:550;box-shadow:var(--sh-sm);transition:all var(--t);}
.btn:hover{background:#fff;border-color:var(--hot);color:var(--hot-deep);transform:translateY(-2px);box-shadow:0 11px 22px -10px rgba(241,89,60,.5);}
.btn:active{transform:translateY(0);}
.btn.primary{background:linear-gradient(135deg,var(--hot-2),var(--hot) 60%,var(--hot-deep));border:none;color:#fff;font-weight:680;
  box-shadow:0 10px 22px -10px rgba(241,89,60,.7);position:relative;overflow:hidden;isolation:isolate;}
.btn.primary::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 18%,rgba(255,255,255,.5) 50%,transparent 82%);transform:translateX(-160%);transition:transform .7s var(--ease);}
.btn.primary:hover{filter:brightness(1.06);transform:translateY(-2px);box-shadow:0 16px 30px -10px rgba(241,89,60,.9);}
.btn.primary:hover::after{transform:translateX(160%);}
.btn.danger{color:var(--red-fg);border-color:rgba(239,68,68,.3);background:var(--red-soft);}
.btn.danger:hover{background:#fbdada;}
.btn.small{font-size:.72rem;padding:6px 11px;}

/* ---------- Console opérateur ---------- */
.op-table{width:100%;border-collapse:collapse;font-size:.82rem;margin-top:12px;}
.op-table th{text-align:left;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);padding:9px 11px;border-bottom:1px solid var(--line-2);font-weight:650;}
.op-table td{padding:12px 11px;border-bottom:1px solid var(--line);vertical-align:middle;}
.op-table tr:last-child td{border-bottom:none;}
.op-table tbody tr{transition:background var(--t);}
.op-table tr:hover td{background:var(--inset);}
.op-status{font-family:ui-monospace,monospace;font-size:.7rem;padding:3px 10px;border-radius:999px;font-weight:650;}
.op-status.active{background:var(--green-soft);color:var(--green-fg);}
.op-status.suspended{background:var(--red-soft);color:var(--red-fg);}
.op-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:13px;}
.op-form input,.op-form select{background:var(--inset);border:1px solid var(--line-2);border-radius:9px;color:var(--ink);padding:8px 11px;font-size:.82rem;width:100%;transition:border-color var(--t),box-shadow var(--t);}
.op-form input:focus,.op-form select:focus{outline:none;border-color:var(--hot);box-shadow:0 0 0 3px var(--hot-soft);}
.op-form label{font-size:.7rem;color:var(--ink-2);display:block;margin-bottom:5px;font-weight:600;}
.op-form .full{grid-column:1/-1;}
.op-confirm{background:var(--green-soft);border:1px solid #bfe9d2;border-radius:12px;padding:14px 16px;font-size:.84rem;color:var(--green-fg);margin-top:12px;}
.op-confirm .op-tenant-id{font-family:ui-monospace,monospace;font-size:.88rem;color:var(--hot-deep);background:var(--card);border:1px solid var(--line-2);border-radius:8px;padding:4px 11px;margin:6px 0;display:inline-block;}
.op-inline-form{display:flex;gap:6px;align-items:center;}
.op-inline-form input{background:var(--inset);border:1px solid var(--line-2);border-radius:8px;color:var(--ink);padding:6px 9px;font-size:.76rem;width:72px;}

/* ---------- File d'attente : carte d'approbation (widget verre) ---------- */
.pending-card{margin-bottom:12px;border-radius:var(--r-sm);background:rgba(255,255,255,.5);
  box-shadow:inset 0 0 0 1px rgba(192,122,16,.28);padding:14px 16px;}
.pending-card:last-child{margin-bottom:2px;}
.pending-card .pc-host{font-size:.9rem;font-weight:600;color:var(--ink);}
.pending-card .pc-id{font-family:ui-monospace,monospace;font-size:.7rem;color:var(--ink-3);margin:3px 0 10px;}
.pending-card .pc-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px;}
.pending-card select,.pending-card input[type=text]{font-size:.78rem;padding:8px 12px;background:rgba(255,255,255,.85);border:none;
  box-shadow:inset 0 0 0 1px var(--glass-line);border-radius:99px;color:var(--ink);transition:box-shadow var(--t);font-family:inherit;}
.pending-card select:focus,.pending-card input[type=text]:focus{outline:none;box-shadow:inset 0 0 0 1px var(--hot),0 0 0 3px rgba(241,89,60,.15);}
.pending-card .pc-err{font-size:.72rem;color:var(--red-fg);margin-top:6px;}

/* ---------- Section client : conteneur logique (dashFilter/dashToggleClient) ---------- */
.client-section{grid-column:span 4;}

/* ---------- Petit dialogue (secrets) ----------
   Remplace prompt()/alert() pour tout ce qui touche à un mot de passe ou à un jeton :
   ces boîtes natives ne se stylent pas, ne se traduisent pas, affichent le secret en clair
   dans un champ que le navigateur peut mémoriser, et confondent « annuler » et « champ vide ».
   Deux usages : demander un mot de passe (deux saisies) et montrer un jeton une seule fois. */
#dlgScrim{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:20px;
  background:rgba(18,24,34,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  animation:dlg-in .18s var(--ease);}
#dlgScrim[hidden]{display:none;}
.dlg{width:min(420px,100%);background:var(--card);border-radius:var(--r-sm);box-shadow:var(--sh-lg);
  padding:22px 24px 18px;display:flex;flex-direction:column;gap:12px;}
.dlg h3{font-family:var(--rounded);font-size:1rem;font-weight:650;color:var(--ink);letter-spacing:-.01em;}
.dlg .dlg-hint{font-size:.78rem;color:var(--ink-2);line-height:1.5;}
.dlg label{display:flex;flex-direction:column;gap:5px;font-size:.72rem;font-weight:600;color:var(--ink-2);}
.dlg input{font:inherit;font-size:.86rem;color:var(--ink);padding:9px 12px;border:1px solid var(--line-2);
  border-radius:10px;background:var(--inset);}
.dlg input[readonly]{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem;}
.dlg .dlg-err{font-size:.76rem;color:var(--red-fg);}
.dlg .dlg-err[hidden]{display:none;}
.dlg .dlg-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:4px;}
.dlg .dlg-actions button{font:inherit;font-size:.8rem;font-weight:600;padding:8px 16px;border-radius:99px;
  border:1px solid var(--line-2);background:#fff;color:var(--ink-2);cursor:pointer;transition:background var(--t);}
.dlg .dlg-actions button:hover{background:var(--inset);}
.dlg .dlg-actions button.primary{border-color:transparent;background:var(--hot);color:#fff;}
.dlg .dlg-actions button.primary:hover{background:var(--hot-deep);}
@keyframes dlg-in{from{opacity:0;}to{opacity:1;}}

/* ---------- Toasts ---------- */
#toasts{position:fixed;bottom:18px;right:18px;display:flex;flex-direction:column;gap:9px;z-index:9999;max-width:340px;}
.toast{background:var(--dark-glass);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);
  box-shadow:inset 0 0 0 1px var(--dark-line), var(--sh-lg);border-left:3px solid rgba(255,255,255,.5);border-radius:var(--r-sm);
  padding:12px 16px;font-size:.8rem;color:#fff;animation:toast-in .24s var(--ease);word-break:break-word;}
.toast.error{border-left-color:var(--hot);}
.toast.success{border-left-color:var(--green-vif);}
.toast.fade{opacity:0;transform:translateX(8px);transition:opacity .3s ease,transform .3s ease;}
@keyframes toast-in{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

/* ---------- Responsive ---------- */
@media (max-width:680px){
  header{padding:16px;gap:10px;flex-wrap:wrap;}
  .userbar{gap:7px;}
  #dashboardView{padding-left:16px;padding-right:16px;}
  /* Mosaïque : 12 → 6 colonnes */
  .bento{grid-template-columns:repeat(6,1fr);}
  .c3,.c4,.c5{grid-column:span 3;}
  .c7{grid-column:span 6;}
  .client-section{grid-column:span 3;}
  .settings-view,.users-list{padding-left:14px;padding-right:14px;}
  .op-form{grid-template-columns:1fr;}
  .op-table{display:block;overflow-x:auto;}
}
/* Palier « vrai téléphone » : évite tout débordement horizontal */
@media (max-width:480px){
  header{padding:11px 14px;gap:8px;}
  header h1{font-size:.95rem;}
  body{overflow-x:hidden;}
  /* Header en 2 rangées : logo + loupe + compte, puis nav défilante sur une ligne. */
  header{flex-wrap:wrap;row-gap:6px;}
  #hubNav{order:5;flex:1 1 100%;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;}
  #hubNav::-webkit-scrollbar{display:none;}
  header nav button{white-space:nowrap;padding:6px 12px;font-size:.78rem;}
  .userbar{margin-left:auto;gap:6px;font-size:.78rem;}
  .userbar .ue{display:none;}
  .userbar button{padding:6px 9px;}
  #dashboardView{padding:0 14px 40px;}
  /* Mosaïque : 2 colonnes — les 4 KPI se compactent en 2×2 pour que les box
     (cartes clients) restent visibles sans défiler ; le reste prend la largeur. */
  .bento{grid-template-columns:repeat(2,1fr);gap:12px;}
  .c3{grid-column:span 1;}
  .c4,.c5,.c7,.client-section{grid-column:span 2;}
  .kpi{padding:14px 16px;}
  .kpi b{font-size:1.7rem;}
  .kpi b small{font-size:.85rem;}
  .kpi .trend{margin-top:4px;font-size:.62rem;padding:2px 8px;}
  .kpi b.kpi-ver{font-size:1.35rem;}
  .kpi h2{margin-bottom:6px;font-size:.72rem;}
  /* Ligne d'état compacte : les box arrivent plus vite à l'écran. */
  .statusline{margin:14px 0 14px;gap:8px;}
  .statusline h1{font-size:1.15rem;}
  .statusline .date{font-size:.7rem;}
  .ck{padding:16px 16px 24px;}
  .ck-head{gap:8px;}
  .settings-body .kv{gap:8px;}
  .settings-body .kv>span{min-width:0;flex:1 1 100%;}
  .settings-body input{flex:1 1 auto;}
  /* Rangées équipements resserrées + widget à padding réduit (évite le double bord). */
  #ck-devices{padding:4px 12px;}
  .dev-row{gap:9px;padding:9px 6px;}
  .dev-name{font-size:.82rem;}
  .cmd{padding:7px 14px;font-size:.72rem;}
  .scn{padding:8px 15px;font-size:.72rem;}
  .users-list{overflow-x:auto;}
}
/* Panneau cockpit : sous 920 px, une seule colonne empilée, pleine largeur.
   Un SEUL contexte de défilement (.panel) : la vitrine s'efface au scroll, la barre
   cockpit reste collée en haut avec le condensé du site. */
@media (max-width:920px){
  /* display:block (pas grid) : en grid, la hauteur fixe du panneau (inset 0) répartissait les
     rangées et ÉCRASAIT la scène (overflow:hidden ⇒ contribution min 0) → vitrine coupée à ~46px
     et plus rien à défiler. En block, scène + cockpit s'empilent à leur hauteur de contenu et
     le panneau défile son contenu réel. */
  .panel{display:block;overflow-y:auto;top:0;right:0;bottom:0;width:100vw;border-radius:0;
    transform:translateX(100%);}
  /* Le cockpit défile avec le reste (plus de scroll interne) */
  .ck{overflow:visible;padding:0 16px 24px;}
  /* Scène compacte : elle défile avec le contenu (pas sticky) */
  .scene{min-height:auto;padding:18px 18px 14px;}
  .scene .crumb{margin-bottom:2px;}
  .scene h1{font-size:1.4rem;}
  .kv-ring{gap:16px;padding:12px 0;margin:14px 0;}
  .ring{width:96px;height:96px;}
  .ring::before{inset:7px;}
  .ring .in b{font-size:1.7rem;}
  .ring .in span{font-size:.5rem;letter-spacing:.08em;}
  .kv-ring .facts .f{margin-bottom:8px;}
  .status-card{padding:14px 16px;}
  .scene .pager{margin-top:12px;}
  /* Barre cockpit collée en haut du panneau au scroll (fond verre lisible) */
  .ck-head{position:sticky;top:0;z-index:5;margin:0 -16px;padding:12px 16px;
    background:rgba(240,244,249,.86);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
    border-bottom:1px solid var(--line);}
  .ck-mini{display:flex;}
  #ckShell{padding-top:14px;}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
  .beam{animation:none !important;}
  .scene-bg i{animation:none !important;}
}