/* kit v3.2 — 2026-07-14 */
/* ============================================================
   SNAPSHOT MEDIA — KIT DE DESIGN PARTAGÉ
   Univers visuel commun à toutes les apps du dashboard.
   Polices Switzer/Satoshi auto-hébergées + palette corail/neutres.
   Importer via <link rel="stylesheet" href="theme.css"> et ui.js.
   La ligne 1 porte la version du kit — bump à chaque évolution.
   ============================================================ */

/* ---- POLICES (auto-hébergées, woff2 : -52% vs otf) ---- */
@font-face{font-family:'Switzer';src:url('fonts/Switzer-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Switzer';src:url('fonts/Switzer-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Switzer';src:url('fonts/Switzer-Semibold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Switzer';src:url('fonts/Switzer-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Satoshi';src:url('fonts/Satoshi-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Satoshi';src:url('fonts/Satoshi-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Satoshi';src:url('fonts/Satoshi-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}

/* ---- TOKENS ---- */
:root{
  color-scheme:light;      /* widgets natifs (scrollbars, calendriers, selects) au thème */
  --canvas:#ECECEC;        /* off-white creusé pour faire ressortir les cartes */
  --surface:#FFFFFF;
  --surface-2:#F5F5F5;     /* fills doux, hover */
  --border:#EAEAEA;
  --border-strong:#CFCFCF;
  --ink:#0B0B0B;           /* texte principal */
  --ink-2:#4A4D54;         /* texte secondaire */
  --ink-3:#696969;         /* labels / muted — AA sur blanc (5.5:1) ET sur canvas (4.7:1) */
  --forest:#1D2026;        /* sidebar */
  --gold:#ED5847;          /* corail (accent unique de marque) */
  --gold-deep:#B82D1C;     /* corail lisible sur blanc */

  --primary:#1D2026;       /* structurel sombre */
  --primary-2:#4A4D54;     /* neutre moyen */
  --accent:#ED5847;        /* corail : bordures, focus, décor */
  --accent-strong:#BB4234; /* corail primary — corail Snapshot foncé + légèrement désaturé ; texte blanc AA 5.33:1 / canvas 4.51:1 (SDK v3) */
  --pos:#157A47;           /* vert sémantique — succès / en ligne ; AA texte : blanc 5.38:1 / canvas 4.55:1 (SDK v3) */
  --pos-soft:rgba(46,158,99,.13);
  --down:#E5484D;          /* hors-ligne / échec de statut — distinct de --neg (destructif) */
  --down-soft:rgba(229,72,77,.11);
  --neg:#B82D1C;           /* alertes / actions destructrices */
  --coral-text:var(--gold-deep);   /* corail LISIBLE sur le fond courant (adaptatif clair/sombre) */
  --coral-soft:#F6ABA2;    /* corail pâle — bordures .note.warn */
  --coral-lite:#F07E6C;    /* corail clair — dégradés de charts (déclaré : thémable) */
  --coral-deep:#B82D1C;    /* corail profond — dégradés de charts */
  --soft-hover:#EFEBE0;    /* hover .btn-soft — surchargé en sombre (règle : pas d'hex clair hors :root) */
  --skeleton-hi:#EDEDED;   /* éclat du shimmer .skeleton — surchargé en sombre */
  --field-border:#8A8A8A;  /* bordure de champ ≥3:1 (WCAG 1.4.11) — plus franche que --border-strong */
  /* alias résiduels (v3.2 : --muted/--coral/--ok/--ok-soft/--forest-2 retirés, 0 usage) —
     --muted-2 et --coral-50 encore consommés par patrimoine (migration kit en cours) :
     à retirer quand patrimoine sera 100 % kit */
  --muted-2:var(--ink-3);   /* = #696969 */
  --coral-50:#E53A26;

  /* palette dataviz canonique — attribuer dans l'ordre 1→6 (voir DESIGN.md) */
  --viz-1:#1D2026; --viz-2:#ED5847; --viz-3:#E9A23B;
  --viz-4:#9A9A9A; --viz-5:#B82D1C; --viz-6:#CFCFCF;
  --viz-grid:#E3E3E3; --viz-txt:#696969;

  --font-display:'Switzer',-apple-system,sans-serif;
  --font-body:'Satoshi',-apple-system,sans-serif;

  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:24px;
  --sh:0 1px 2px rgba(11,11,11,.05), 0 6px 18px rgba(11,11,11,.06);

  /* ---- ÉCHELLE TYPO (SDK v3) : rôle → graisse taille/lh police (raccourci `font`).
     Couleur + letter-spacing + text-transform sont posés par les classes .t-* (§TYPO).
     Règle : composer avec .t-* — ne plus coder de taille en dur. ---- */
  --t-h1:600 23px/1.15 var(--font-display);
  --t-h2:600 19px/1.25 var(--font-display);
  --t-h3:600 16px/1.3 var(--font-display);
  --t-lead:500 14px/1.55 var(--font-body);
  --t-body:400 14px/1.6 var(--font-body);
  --t-label:700 11px/1.3 var(--font-body);      /* Satoshi (comme Usine & le kit actuel) */
  --t-caption:500 12px/1.5 var(--font-body);
  --t-btn:600 13px/normal var(--font-body);    /* /normal = géométrie identique aux boutons livrés (v3.2, branché dans .btn) */
  --t-nav:600 13.5px/normal var(--font-body);  /* /normal — branché dans .nav-item et .tab (v3.2) */
  --t-data-xl:600 30px/1 var(--font-display);
  --t-data-lg:600 22px/1 var(--font-display);
  --t-data-md:600 19px/1 var(--font-display);
  --t-data-sm:600 14.5px/1 var(--font-display);

  /* ---- ÉCHELLE D'ESPACEMENT (SDK v3) : socle pour le neuf, pas de refactor forcé ---- */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:18px; --space-5:24px; --space-6:32px;
}
*{box-sizing:border-box;}
[hidden]{display:none !important;} /* sinon un display:flex/grid de composant écrase l'attribut hidden */
html,body{margin:0; height:100%;}

/* ---- SCROLLBARS (fines, thème-aware ; color-scheme règle déjà la base des widgets natifs) ---- */
html{scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent;}
::-webkit-scrollbar{width:9px; height:9px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border-strong); border-radius:99px; border:2px solid transparent; background-clip:content-box;}
::-webkit-scrollbar-thumb:hover{background:var(--ink-3); border:2px solid transparent; background-clip:content-box;}
::-webkit-scrollbar-corner{background:transparent;}
body{
  background:var(--canvas); color:var(--ink);
  font-family:var(--font-body); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{margin:0; font-family:var(--font-display); font-weight:600; letter-spacing:-.015em;}
button{font-family:inherit; cursor:pointer;}
input,select,textarea{font-family:inherit;}
a{color:var(--gold-deep);}
.num{font-variant-numeric:tabular-nums;}
::selection{background:rgba(237,88,71,.20);}

/* ---- SHELL : sidebar + main ---- */
.app{display:flex; min-height:100vh;}
.scrim{display:none;}

.sidebar{
  width:266px; flex:none; background:var(--forest); color:#D7DCD4;
  display:flex; flex-direction:column; padding:22px 16px 18px;
  position:sticky; top:0; height:100vh; height:100dvh;
}
.brand{display:flex; align-items:center; gap:12px; padding:4px 8px 20px;}
.brand-mark{
  width:36px; height:36px; border-radius:10px; flex:none;
  background:linear-gradient(150deg,#2A2E36,#1D2026); border:1px solid rgba(255,255,255,.12);
  display:grid; place-items:center; color:var(--gold);
}
.brand-name{font-family:var(--font-display); font-weight:600; font-size:15.5px; color:#fff; line-height:1;}
.brand-sub{font-size:11px; color:rgba(255,255,255,.5); margin-top:4px; letter-spacing:.04em;}

/* carte d'info optionnelle dans la sidebar */
.side-card{
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.10);
  border-radius:14px; padding:15px 15px 14px; margin-bottom:20px;
}
.side-card .sc-label{font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.60);}
.side-card .sc-name{font-size:13.5px; font-weight:600; color:#EEF0EB; margin-top:8px; line-height:1.32;}
.side-card .sc-value{font-family:var(--font-display); font-weight:600; font-size:19px; color:#fff; margin-top:11px; font-variant-numeric:tabular-nums; letter-spacing:-.01em;}

.nav{display:flex; flex-direction:column; gap:2px;}
.nav-item{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  padding:10px 12px; border:none; background:none; border-radius:10px;
  color:rgba(255,255,255,.64); font:var(--t-nav); letter-spacing:.005em;
  transition:background .16s ease, color .16s ease;
}
.nav-item:hover{background:rgba(255,255,255,.06); color:#fff;}
.nav-item.active{background:rgba(255,255,255,.10); color:#fff;}
.nav-item .ic-svg{width:18px; height:18px; opacity:.8; flex:none;}
.nav-item.active .ic-svg{color:var(--gold); opacity:1;}

.sidebar-foot{margin-top:auto; padding-top:16px; border-top:1px solid rgba(255,255,255,.09); display:flex; flex-direction:column; gap:11px;}
.sync{display:flex; align-items:center; gap:8px; font-size:12px; font-weight:600; color:rgba(255,255,255,.6);}
/* Bouton « Portail » (retour au dashboard) en pied de sidebar métier.
   Nom canonique = .portal-btn — il NE désigne PAS la déconnexion (la vraie
   déconnexion vit dans le shell OS : .os-logout).
   .logout-btn = alias déprécié (apps kit basculées en v3.2), retirer en v3.3. */
.portal-btn,.logout-btn{
  display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  background:rgba(255,255,255,.06); color:rgba(255,255,255,.8); border:1px solid rgba(255,255,255,.12);
  border-radius:9px; padding:7px 11px; font-size:12px; font-weight:600; text-decoration:none;
}
.portal-btn:hover,.logout-btn:hover{background:rgba(255,255,255,.12); color:#fff;}

.main{flex:1; min-width:0; display:flex; flex-direction:column; height:100vh; height:100dvh; overflow:hidden;}
.topbar{
  flex:none; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px clamp(20px,3vw,42px); border-bottom:1px solid var(--border); background:var(--canvas);
}
.topbar-left{display:flex; align-items:center; gap:14px;}
.crumb{font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);}
.page-title{font-size:23px; color:var(--ink); margin-top:4px;}
.topbar-actions{display:flex; gap:9px;}
.nav-toggle{display:none; background:var(--surface); border:1px solid var(--border-strong); color:var(--ink); border-radius:10px; width:40px; height:40px; align-items:center; justify-content:center;}
.content{flex:1; overflow-y:auto; padding:28px clamp(20px,3vw,42px) 64px; scroll-behavior:smooth;}

/* ---- COMPOSANTS ---- */
.grid{display:grid; gap:18px;}
.kpis{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.cols-2{grid-template-columns:1fr 1fr;}
.cols-3{grid-template-columns:repeat(3,1fr);}
@media(max-width:1080px){.cols-2,.cols-3{grid-template-columns:1fr;}}

.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); padding:22px 24px; box-shadow:var(--sh);}
.card.pad-lg{padding:26px;}
.card-head{display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:18px;}
.card-head h3{font-size:16px; color:var(--ink);}
.card-note{font-size:12px; font-weight:500; color:var(--ink-3);}

.kpi{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:20px 20px 18px; box-shadow:var(--sh); transition:transform .16s ease, border-color .16s ease;}
.kpi:hover{transform:translateY(-2px); border-color:var(--border-strong);}
.kpi-label{font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3);}
.kpi-value{font-family:var(--font-display); font-weight:600; font-size:29px; letter-spacing:-.022em; color:var(--ink); margin-top:13px; font-variant-numeric:tabular-nums; line-height:1;}
.kpi-sub{font-size:12.5px; font-weight:500; color:var(--ink-2); margin-top:9px; font-variant-numeric:tabular-nums;}
.kpi.ink .kpi-value{color:var(--primary);}
.kpi.accent .kpi-value{color:var(--gold-deep);}

/* tables */
table.data{width:100%; border-collapse:collapse; font-size:13.5px; font-weight:500;}
table.data th{text-align:left; font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); padding:0 12px 11px; border-bottom:1px solid var(--border);}
table.data td{padding:11px 12px; border-bottom:1px solid var(--border); color:var(--ink); vertical-align:middle;}
table.data tr:last-child td{border-bottom:none;}
table.data td.r,table.data th.r{text-align:right; font-variant-numeric:tabular-nums;}
table.data tr.total td{font-weight:700; border-top:1.5px solid var(--border-strong); border-bottom:none; color:var(--ink);}
table.data tr.sub td{font-weight:600; color:var(--primary);}
table.data tbody tr:hover td{background:var(--surface-2);}
table.data tr.total:hover td,table.data tr.sub:hover td{background:transparent;}
.dot{display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:9px; vertical-align:baseline;}

/* badge "à confirmer" — point corail, pas d'emoji */
.badge-est{display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--gold-deep); margin-left:8px; white-space:nowrap;}
.badge-est::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--gold); flex:none;}

/* pills — ok neutre, warn à surveiller, bad incident franc */
.pill{display:inline-block; font-size:11px; font-weight:700; letter-spacing:.02em; border-radius:7px; padding:4px 9px;}
.pill.ok{background:var(--surface-2); color:var(--ink); border:1px solid var(--border-strong);}
.pill.warn{background:#FEF1EF; color:var(--gold-deep);}
.pill.bad{background:var(--neg); color:#fff;}

/* notes éditoriales */
.note{background:var(--surface-2); border:1px solid var(--border); border-radius:14px; padding:16px 18px; font-size:13px; line-height:1.62; color:var(--ink-2);}
.note .note-tag{display:block; font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:7px;}
.note b{color:var(--ink); font-weight:700;}
.note.warn{background:#FEF6F4; border-color:var(--coral-soft);}
.note.warn .note-tag{color:var(--gold-deep);}

/* champs — états complets : focus, erreur, disabled, placeholder, unité, optionnel (v3.1) */
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:15px;}
.field label{font-size:11.5px; font-weight:600; color:var(--ink-2); display:flex; align-items:center;}
.field label .opt{margin-left:auto; font-size:10px; font-weight:500; color:var(--ink-3); text-transform:none; letter-spacing:0;} /* règle DESIGN.md : marquer l'OPTIONNEL, jamais d'astérisque */
.field input,.field select,.field textarea{border:1px solid var(--field-border); border-radius:10px; padding:9px 12px; font-size:13.5px; font-weight:500; color:var(--ink); background:var(--surface); font-variant-numeric:tabular-nums; transition:border-color .15s, box-shadow .15s;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(237,88,71,.16);}
.field .hint{font-size:11px; color:var(--ink-3);}
::placeholder{color:var(--ink-3); opacity:1;}
.field input:disabled,.field select:disabled,.field textarea:disabled{opacity:.55; cursor:not-allowed; background:var(--surface-2);}
.btn:disabled:not(.busy){opacity:.55; cursor:not-allowed;}
/* état d'erreur inline — posé/retiré par fieldError(el, msg) de ui.js (aria-invalid inclus) */
.field.err input,.field.err select,.field.err textarea{border-color:var(--neg); box-shadow:0 0 0 3px rgba(184,45,28,.13);}
.field .err-msg{font-size:11.5px; font-weight:600; color:var(--neg);}
/* suffixe d'unité (CHF, %, j…) : <div class="in-group"><input><span class="in-unit">CHF</span></div> */
.in-group{position:relative; display:flex; align-items:center;}
.in-group input{width:100%; padding-right:46px;}
.in-unit{position:absolute; right:12px; font-size:12px; font-weight:600; color:var(--ink-3); pointer-events:none; font-variant-numeric:tabular-nums;}
.fields-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:0 20px;}
.edit-table input,.edit-table select{width:100%; border:1px solid var(--border); border-radius:8px; padding:7px 8px; font-size:13px; background:var(--surface);}
.edit-table input:focus,.edit-table select:focus{outline:none; border-color:var(--accent);}
.edit-table td{padding:6px 6px;}
/* select : chevron kit (la flèche OS varie par navigateur) ; le popup suit color-scheme */
.field select,.edit-table select{appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23696969' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; background-size:14px; padding-right:32px;}
html[data-theme="dark"] .field select,html[data-theme="dark"] .edit-table select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A0A0AA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");}
/* date/heure : NATIF stylé, point (doctrine DESIGN.md — jamais de picker maison) */
.field input[type="date"],.field input[type="time"]{min-height:38px;}
::-webkit-calendar-picker-indicator{opacity:.65; cursor:pointer;}

/* boutons */
.btn{display:inline-flex; align-items:center; gap:7px; border:1px solid transparent; border-radius:10px; padding:9px 15px; font:var(--t-btn); letter-spacing:.005em; transition:transform .12s ease, background .15s ease, border-color .15s ease, color .15s ease;}
.btn:active{transform:scale(.975);}
.btn-primary{background:var(--accent-strong); color:#fff;}
.btn-primary:hover{background:var(--gold-deep);}
.btn-ghost{background:var(--surface); color:var(--ink); border-color:var(--border-strong);}
.btn-ghost:hover{background:var(--surface-2); border-color:var(--ink-3);}
.btn-soft{background:var(--surface-2); color:var(--ink); border-color:var(--border-strong);}
.btn-soft:hover{background:var(--soft-hover);}
.btn-danger{background:transparent; color:var(--neg); border-color:var(--border);}
.btn-danger:hover{background:rgba(176,83,58,.08); border-color:rgba(176,83,58,.32);}
.btn-sm{padding:6px 10px; font-size:12px; border-radius:8px; gap:5px;}
.ic-svg{width:16px; height:16px; flex:none;}
.btn-icon{padding:6px; width:30px; height:30px; justify-content:center;}

/* divers */
.section-title{font-size:11px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); margin:32px 0 16px; display:flex; align-items:center; gap:14px;}
.section-title::after{content:""; flex:1; height:1px; background:var(--border);}
.empty{padding:28px; text-align:center; color:var(--ink-3); font-size:13px;}
.muted{color:var(--ink-2);} .small{font-size:12px;}
.flex{display:flex;} .between{justify-content:space-between;} .center{align-items:center;}
.gap8{gap:8px;} .gap12{gap:12px;} .wrap{flex-wrap:wrap;}
.mt8{margin-top:10px;} .mt16{margin-top:16px;} .mb12{margin-bottom:12px;}
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;}

/* toast avec action optionnelle (undo) + variante erreur */
.toast{position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--ink); color:#F3F1EA; padding:12px 18px; border-radius:11px; font-size:13px; font-weight:500; box-shadow:0 12px 32px -8px rgba(28,36,32,.4); opacity:0; pointer-events:none; transition:all .3s ease; z-index:300; display:flex; align-items:center; gap:12px;}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto;}
.toast.err{background:var(--gold-deep); color:#fff;}
.toast-undo{background:none; border:1px solid rgba(255,255,255,.3); color:#F3F1EA; border-radius:6px; padding:3px 9px; font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap;}
.toast-undo:hover{background:rgba(255,255,255,.12);}
.toast-msg{flex:1;}

/* ---- MODALE (via openModal/confirmModal de ui.js — jamais confirm() natif) ---- */
.modal-scrim{position:fixed; inset:0; background:rgba(11,11,11,.42); display:flex; align-items:center; justify-content:center; padding:20px; z-index:400; opacity:0; transition:opacity .2s ease;}
.modal-scrim[hidden]{display:none;} /* sinon display:flex écrase l'attribut hidden et le calque capte tous les clics */
.modal-scrim.show{opacity:1;}
.modal{background:var(--surface); border-radius:var(--r-xl); box-shadow:0 24px 60px -16px rgba(11,11,11,.42); width:100%; max-width:430px; max-height:calc(100dvh - 40px); display:flex; flex-direction:column; transform:translateY(10px) scale(.985); transition:transform .22s cubic-bezier(.22,1,.36,1); overflow:hidden;}
.modal-scrim.show .modal{transform:none;}
.modal.wide{max-width:560px;} /* posé par openModal({ wide:true }) — formulaires larges */
.modal-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 22px 12px;}
.modal-head h3{font-size:17px;}
.modal-x{background:none; border:none; color:var(--ink-3); width:30px; height:30px; border-radius:8px; display:grid; place-items:center;}
.modal-x:hover{background:var(--surface-2); color:var(--ink);}
.modal-body{padding:0 22px 4px; overflow-y:auto; min-height:0;} /* scrollable : le pied reste atteignable clavier ouvert */
.modal-body .field:last-child{margin-bottom:6px;}
.modal-text{font-size:13.5px; line-height:1.62; color:var(--ink-2); margin:2px 0 10px;}
.modal-foot{display:flex; justify-content:flex-end; gap:10px; padding:16px 22px 20px;}
.btn-danger-solid{background:var(--neg); color:#fff; border-color:var(--neg);}
.btn-danger-solid:hover{background:#9b2417;}

/* ---- ÉTATS ASYNCHRONES : bouton occupé, skeleton (v3.2 : .spinner retiré, 0 usage — busy() suffit) ---- */
@keyframes spin{to{transform:rotate(360deg);}}
.btn.busy{pointer-events:none; opacity:.72; position:relative; color:transparent;}
.btn.busy::after{content:""; position:absolute; inset:0; margin:auto; width:15px; height:15px; border-radius:50%; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; animation:spin .7s linear infinite;}
.btn-ghost.busy::after,.btn-soft.busy::after,.btn-danger.busy::after{border-color:rgba(11,11,11,.2); border-top-color:var(--ink);}
.skeleton{display:inline-block; border-radius:7px; background:linear-gradient(90deg,var(--surface-2) 25%,var(--skeleton-hi) 45%,var(--surface-2) 65%); background-size:200% 100%; animation:shimmer 1.3s ease-in-out infinite; color:transparent !important; user-select:none;}
@keyframes shimmer{from{background-position:180% 0;} to{background-position:-20% 0;}}

/* ---- STEPS : progression d'un traitement long (wizard, provisionnement) ---- */
.steps{display:flex; flex-direction:column;}
.step{display:flex; align-items:center; gap:11px; padding:8px 2px; border-bottom:1px solid var(--border); font-size:13px; font-weight:500; color:var(--ink-3);}
.step:last-child{border-bottom:none;}
.step-dot{width:22px; height:22px; border-radius:50%; flex:none; display:grid; place-items:center; border:1.5px solid var(--border-strong); background:var(--surface); color:var(--ink-3);}
.step-dot .ic-svg{width:12px; height:12px;}
.step.active{color:var(--ink); font-weight:600;}
.step.active .step-dot{border-color:var(--accent); color:var(--accent);}
.step.active .step-dot::before{content:""; width:9px; height:9px; border-radius:50%; border:2px solid rgba(237,88,71,.3); border-top-color:var(--accent); animation:spin .8s linear infinite;}
.step.done{color:var(--ink-2);}
.step.done .step-dot{background:var(--forest); border-color:var(--forest); color:#fff;}
.step.fail{color:var(--neg); font-weight:600;}
.step.fail .step-dot{background:var(--neg); border-color:var(--neg); color:#fff;}
.step.skip{opacity:.55;}

/* ---- SEGMENTED CONTROL (choix exclusif compact) — style « inset » canonique (SDK v3, ex-Usine)
   Markup : .seg > button (v3.2 : variante .seg-btn retirée, 0 usage). Actif = pastille surélevée. ---- */
.seg{display:inline-flex; flex-wrap:wrap; background:var(--surface-2); border-radius:11px; padding:3px; gap:3px;}
.seg button{border:none; background:none; color:var(--ink-2); border-radius:8px; padding:8px 15px; font-size:13px; font-weight:600; font-family:var(--font-body); transition:color .15s, background .15s;}
.seg button:hover{color:var(--ink);}
.seg button.active{background:var(--surface); color:var(--ink); box-shadow:var(--sh);}

/* ---- TOGGLE SWITCH (booléen on/off) ---- */
.switch{position:relative; width:42px; height:24px; flex:none; cursor:pointer;}
.switch input{opacity:0; width:0; height:0; position:absolute;}
.switch .track{position:absolute; inset:0; background:var(--border-strong); border-radius:999px; transition:background .18s;}
.switch .knob{position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .18s; box-shadow:0 1px 2px rgba(0,0,0,.25);}
.switch input:checked + .track{background:var(--accent);}
.switch input:checked + .track + .knob{transform:translateX(18px);}
.switch input:focus-visible + .track{outline:2px solid var(--gold-deep); outline-offset:2px;}
.switch.locked{opacity:.5; pointer-events:none;}

/* ---- TAG (étiquette neutre : catégorie, nature…) ---- */
.tag{display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700; letter-spacing:.03em; padding:3px 8px; border-radius:7px; background:var(--surface-2); color:var(--ink-2); border:1px solid var(--border);}

/* ---- COUNT : badge compteur (file d'attente, notifications) — promu de duodesk ---- */
.count{display:inline-grid; place-items:center; min-width:19px; height:19px; padding:0 5px; border-radius:99px; background:var(--accent-strong); color:#fff; font-size:10.5px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1;}
.count.neg{background:var(--neg);}

/* ---- FOLD : accordéon <details> stylé — promu de duodesk (3 réinventions) ----
   <details class="fold"><summary>Titre <span class="chev">…icon chevron…</span></summary><div class="fold-body">…</div></details> */
details.fold{border:1px solid var(--border); border-radius:12px; background:var(--surface); margin-bottom:10px;}
details.fold summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; padding:13px 16px; font-size:13px; font-weight:700; color:var(--ink); border-radius:12px;}
details.fold summary::-webkit-details-marker{display:none;}
details.fold summary:hover{background:var(--surface-2);}
details.fold summary .chev{margin-left:auto; color:var(--ink-3); display:grid; place-items:center; transition:transform .18s;}
details.fold[open] summary .chev{transform:rotate(90deg);}
details.fold .fold-body{padding:2px 16px 15px;}

/* ---- SEARCH : champ de recherche avec loupe — promu de fluxio ----
   <div class="search"><span data-icon="search"></span><input type="search" …></div> */
.search{position:relative; display:flex; align-items:center;}
.search .ic-svg{position:absolute; left:11px; width:15px; height:15px; color:var(--ink-3); pointer-events:none;}
.search input{width:100%; border:1px solid var(--field-border); border-radius:10px; padding:9px 12px 9px 34px; font-size:13.5px; font-weight:500; color:var(--ink); background:var(--surface); transition:border-color .15s, box-shadow .15s;}
.search input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(237,88,71,.16);}

/* ---- DATAVIZ (SVG/CSS maison — voir DESIGN.md §Graphiques ; palette --viz-*) ---- */
/* bar-list : répartition/comparaison en barres horizontales (helper barRow() de ui.js) */
.bars{display:flex; flex-direction:column; gap:11px;}
.bar-row{display:grid; grid-template-columns:1fr 110px; gap:4px 12px; align-items:center; font-size:12.5px;}
.bar-top{display:flex; align-items:center; gap:8px; min-width:0;}
.bar-label{font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.bar-track{grid-column:1; height:8px; border-radius:99px; background:var(--surface-2); overflow:hidden;}
.bar-fill{height:100%; border-radius:99px; min-width:2%;}
.bar-amt{grid-column:2; grid-row:1 / span 2; text-align:right; font-weight:600; color:var(--ink-2); font-variant-numeric:tabular-nums; white-space:nowrap;}
/* donut : répartition d'un total (helper donutChart() de ui.js) */
.donut-wrap{display:flex; flex-direction:column; align-items:center; gap:14px;}
.donut-svg{width:100%; max-width:250px; height:auto;}
.donut-svg .dn-pct{font-size:11px; font-weight:700; fill:#fff; font-family:var(--font-display);}
.donut-svg .dn-center-l{font-size:8.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; fill:var(--ink-3);}
.donut-svg .dn-center-v{font-size:15px; font-weight:700; fill:var(--ink); font-family:var(--font-display); font-variant-numeric:tabular-nums;}
/* légende standard : pastille + libellé + valeur (unique pour tout le parc) */
.legend{display:flex; flex-direction:column; gap:7px; width:100%; max-width:290px;}
.legend-item{display:flex; align-items:center; gap:8px; font-size:12px;}
.legend-swatch{width:11px; height:11px; border-radius:3px; flex:none;}
.legend-swatch.line{height:3px; width:16px; border-radius:2px;}
.legend-swatch.dash{height:0; width:16px; border-top:3px dashed currentColor; background:none;}
.legend-label{color:var(--ink); font-weight:500; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.legend-value{margin-left:auto; color:var(--ink-2); font-weight:600; font-variant-numeric:tabular-nums; font-size:11.5px; white-space:nowrap;}

/* ---- TOOLTIP RICHE (data-tip="…" — auto-initialisé par ui.js) ---- */
.tip{position:fixed; z-index:500; background:var(--ink); color:#F3F1EA; padding:9px 12px; border-radius:10px; font-size:11.5px; line-height:1.55; max-width:250px; box-shadow:0 12px 30px -10px rgba(0,0,0,.5); pointer-events:none; opacity:0; transform:translateY(3px); transition:opacity .13s ease, transform .13s ease;}
.tip.show{opacity:1; transform:none;}
.tip b{color:#fff;} .tip .tip-num{font-variant-numeric:tabular-nums;}
[data-tip]{cursor:help;}

/* ---- INLINE-FORM : formulaire en ligne qui replie proprement (pattern budget) ---- */
.inline-form{display:grid; grid-template-columns:repeat(4,1fr); gap:10px 12px; align-items:end;}
.inline-form .field{margin-bottom:0;}
@media(max-width:860px){.inline-form{grid-template-columns:1fr 1fr;}}
@media(max-width:430px){.inline-form{grid-template-columns:1fr;}}

/* panneaux (1 par onglet) */
.panel{display:none; animation:fade .34s cubic-bezier(.22,1,.36,1);}
.panel.active{display:block;}
@keyframes fade{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}

/* ---- RESPONSIVE ---- */
@media(max-width:820px){
  /* visibility retire les items du tab-order quand le tiroir est fermé */
  .sidebar{position:fixed; left:0; top:0; z-index:200; transform:translateX(-100%); visibility:hidden; overflow-y:auto; transition:transform .26s cubic-bezier(.22,1,.36,1), visibility .26s; box-shadow:0 0 40px rgba(0,0,0,.3);}
  .app.nav-open .sidebar{transform:none; visibility:visible;}
  .app.nav-open .scrim{display:block; position:fixed; inset:0; background:rgba(11,11,11,.4); z-index:150;}
  .nav-toggle{display:inline-flex;}
  .kpis{grid-template-columns:1fr 1fr;}
  /* 16px : bloque le zoom automatique iOS au focus des champs */
  .field input,.field select,.field textarea,.edit-table input,.edit-table select{font-size:16px;}
}
/* <560px : boutons topbar en icône seule — le libellé porte class="lbl" (convention DESIGN.md) */
@media(max-width:560px){.kpis{grid-template-columns:1fr;} .topbar-actions .btn .lbl{display:none;}}
/* cibles tactiles : densité desktop préservée, minima élargis au doigt */
@media(pointer:coarse){
  .btn-icon{width:38px; height:38px;}
  .btn-sm{padding:9px 13px;}
  .modal-x{width:38px; height:38px;}
  .seg button{padding:10px 14px;}
  .toast-undo{padding:8px 12px;}
}

/* ---- ACCESSIBILITÉ ---- */
:focus-visible{outline:2px solid var(--gold-deep); outline-offset:2px; border-radius:4px;} /* gold-deep : ≥3:1 sur canvas ET surfaces */
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:none;} /* déjà gérés par :focus */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;}
}

/* ============================================================
   SHELL v2.2 — mode sombre, topbar enrichie, menu profil,
   sidebar repliable animée, onglets, case à cocher.
   (porté depuis la console usine, 2026-07-06)
   ============================================================ */

/* ---- MODE SOMBRE ----
   Activé par initTheme()/toggleTheme() (ui.js) via html[data-theme="dark"].
   Anti-FOUC : reprendre le mini-script du <head> du template. */
html[data-theme="dark"]{
  color-scheme:dark;       /* scrollbars, calendriers date/heure et popups de select natifs en sombre */
  --canvas:#131317; --surface:#1B1B21; --surface-2:#24242D;
  --border:#2C2C36; --border-strong:#3B3B47;
  --ink:#F3F1EE; --ink-2:#ABAAB3; --ink-3:#86858F;
  --forest:#1A1A20;
  --primary:#F3F1EE; --primary-2:#ABAAB3;
  --pos:#48D189; --pos-soft:rgba(72,209,137,.16);   /* vert sémantique — lisible sur sombre */
  --down:#FF5C6E; --down-soft:rgba(255,92,110,.14);
  --coral-text:#F07E6C;                             /* corail lisible sur sombre */
  --neg:#EA5A4E; --gold-deep:#F07E6C; --muted-2:#86858F;
  --coral-soft:#7A2A22; --viz-1:#F3F1EE; --viz-4:#8A8A93; --viz-grid:#2C2C36; --viz-txt:#86858F;
  --viz-5:#E0705E;                                  /* rouge éclairci : ≥3:1 sur surface sombre */
  --soft-hover:#2C2C36; --skeleton-hi:#2E2E38; --field-border:#6A6A78;
  --sh:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.32);
}
/* variables à double usage : corrections ciblées en sombre */
html[data-theme="dark"] .toast{background:#26262F; color:#F3F1EE;}
html[data-theme="dark"] .toast.err{background:#B8342A; color:#fff;}
html[data-theme="dark"] .pill.warn{background:rgba(237,88,71,.16); color:#F07E6C;}
html[data-theme="dark"] .pill.bad{background:rgba(234,90,78,.20); color:#FF8A7E;}
html[data-theme="dark"] .note.warn{background:rgba(237,88,71,.10);}
html[data-theme="dark"] .step.done .step-dot{background:var(--ink-2); border-color:var(--ink-2); color:#131317;} /* --forest sombre ≈ surface : invisible sans ça */

/* ---- TOPBAR : bouton icône + fil d'Ariane ---- */
.icon-btn{width:40px; height:40px; border-radius:10px; border:1px solid var(--border-strong); background:var(--surface); color:var(--ink-2); display:grid; place-items:center; flex:none;}
.icon-btn:hover{color:var(--ink); border-color:var(--ink-3);}
.icon-btn .ic-svg{width:17px; height:17px;}
.crumb-nav{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-3); min-width:0;}
.crumb-nav b{color:var(--ink); font-weight:600;}
.crumb-chip{padding:3px 9px; border-radius:7px; background:rgba(237,88,71,.12); color:var(--gold-deep); font-size:11px; font-weight:700; white-space:nowrap;}
.crumb-sep{color:var(--ink-3);}
.crumb-mid{color:var(--ink-2); font-weight:500;}

/* ---- MENU PROFIL (top-right) — profil PARTAGÉ (source : dashboard) ---- */
.usermenu{position:relative;}
.avatar{width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-strong)); color:#fff; font-size:12.5px; font-weight:700; border:2px solid transparent; display:grid; place-items:center; overflow:hidden;}
.avatar:hover{border-color:var(--accent);}
.avatar img{width:100%; height:100%; object-fit:cover; border-radius:50%;}
.umenu{position:absolute; top:48px; right:0; width:224px; background:var(--surface); border:1px solid var(--border); border-radius:13px; box-shadow:var(--sh); padding:6px; z-index:200;}
.um-head{padding:9px 10px 9px; border-bottom:1px solid var(--border); margin-bottom:4px;}
.um-name{font-weight:600; font-size:13.5px; color:var(--ink);}
.um-mail{font-size:11.5px; color:var(--ink-3);}
.um-item{display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:9px 10px; border:none; background:none; border-radius:9px; font-size:13px; font-weight:500; color:var(--ink-2); text-decoration:none;}
.um-item:hover{background:var(--surface-2); color:var(--ink);}
.um-item.danger:hover{color:var(--neg);}
.um-item .ic-svg{width:16px; height:16px;}

/* ---- SIDEBAR REPLIABLE ANIMÉE (.app.nav-min, persistée par toggleClass) ---- */
.sidebar{transition:width .28s cubic-bezier(.4,0,.2,1), padding .28s cubic-bezier(.4,0,.2,1); overflow-x:hidden;}
.nav-item,.brand{white-space:nowrap;}
.nav-label,.brand-name,.brand-sub{transition:opacity .16s ease .12s;}
.side-card,.sidebar-foot{transition:opacity .16s ease .12s, visibility 0s linear 0s;}
.app.nav-min .sidebar{width:76px; padding-left:14px; padding-right:14px;}
.app.nav-min .nav-label,.app.nav-min .brand-name,.app.nav-min .brand-sub{opacity:0; transition-delay:0s;}
.app.nav-min .side-card,.app.nav-min .sidebar-foot{opacity:0; visibility:hidden; transition:opacity .14s ease, visibility 0s linear .14s;}

/* ---- TOGGLE THÈME (pied de sidebar) ---- */
.side-theme{display:flex; align-items:center; justify-content:space-between; width:100%; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); border-radius:9px; padding:9px 11px; color:rgba(255,255,255,.82); font-size:12px; font-weight:600; cursor:pointer; font-family:var(--font-body);}
.side-theme:hover{background:rgba(255,255,255,.12); color:#fff;}
.side-theme .stl{display:flex; align-items:center; gap:8px;}
.side-theme .ic-svg{width:15px; height:15px;}
/* mini-interrupteur du toggle de thème — SCOPÉ pour ne pas toucher au composant .switch générique */
.side-theme .switch{width:34px; height:19px; border-radius:10px; background:rgba(255,255,255,.22); position:relative; flex:none; transition:background .18s;}
.side-theme .switch::after{content:""; position:absolute; top:2px; left:2px; width:15px; height:15px; border-radius:50%; background:#fff; transition:left .18s;}
html[data-theme="dark"] .side-theme .switch{background:var(--accent);}
html[data-theme="dark"] .side-theme .switch::after{left:17px;}

/* ---- ONGLETS (actif corail, inactifs soulignés gris = affordance) ----
   Déborde proprement en mobile : scroll horizontal sans ascenseur (pattern duodesk). */
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:24px; overflow-x:auto; scrollbar-width:none;}
.tabs::-webkit-scrollbar{display:none;}
.tab{background:none; border:none; padding:11px 16px; font:var(--t-nav); color:var(--ink-3); border-bottom:2px solid var(--border-strong); margin-bottom:-1px; transition:color .15s, border-color .15s; white-space:nowrap; flex:none;}
.tab:hover{color:var(--ink); border-bottom-color:var(--ink-3);}
.tab.active{color:var(--ink); border-bottom-color:var(--accent);}

/* ---- CASE À COCHER custom (coché = corail) ---- */
.pick{-webkit-appearance:none; appearance:none; width:18px; height:18px; flex:none; cursor:pointer; margin:0; border:1.5px solid var(--border-strong); border-radius:5px; background:var(--surface); position:relative; transition:background .15s, border-color .15s;}
.pick:hover{border-color:var(--ink-3);}
.pick:checked{background:var(--accent); border-color:var(--accent);}
.pick:checked::after{content:""; position:absolute; left:5px; top:2px; width:4px; height:8px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);}
.pick:focus-visible{outline:2px solid var(--gold-deep); outline-offset:2px;}
/* variante radio (choix exclusif) — même langage, point plein au lieu de la coche */
.pick[type="radio"]{border-radius:50%;}
.pick[type="radio"]:checked::after{left:4px; top:4px; width:8px; height:8px; border:none; border-radius:50%; background:#fff; transform:none;}

/* ============================================================
   SDK v3 — 2026-07-09
   Échelle typo (classes), composants promus d'Usine, bandeau/CTA/
   section-head, shell OS, statut vert. Ajout ADDITIF : ne remplace
   l'existant que pour .seg (canonique inset) et --pos (vert sémantique).
   Doc : voir « Échelle typographique » et « Deux shells » de DESIGN.md.
   ============================================================ */

/* ---- TYPO : classes de rôle (forme IMPOSÉE — anti-dérive) ----
   Règle SDK : uppercase = label seul ; souligné = liens seuls ; italique = aucun rôle. */
.t-h1{font:var(--t-h1); letter-spacing:-.015em; color:var(--ink); margin:0;}
.t-h2{font:var(--t-h2); letter-spacing:-.01em; color:var(--ink); margin:0;}
.t-h3{font:var(--t-h3); letter-spacing:-.015em; color:var(--ink); margin:0;}
.t-lead{font:var(--t-lead); color:var(--ink-2);}
.t-body{font:var(--t-body); color:var(--ink);}
.t-label{font:var(--t-label); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3);}
.t-caption{font:var(--t-caption); color:var(--ink-3);}
.t-data-xl{font:var(--t-data-xl); letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--ink);}
.t-data-lg{font:var(--t-data-lg); letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--ink);}
.t-data-md{font:var(--t-data-md); letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--ink);}
.t-data-sm{font:var(--t-data-sm); letter-spacing:-.015em; font-variant-numeric:tabular-nums; color:var(--ink);}
.t-link{color:var(--coral-text); font-weight:600; text-decoration:none;}
.t-link:hover{text-decoration:underline; text-underline-offset:2px;}
.t-link-muted{color:var(--ink-2); font-weight:500; text-decoration:underline; text-underline-offset:2px; text-decoration-color:var(--border-strong);}
.t-link-muted:hover{color:var(--ink); text-decoration-color:var(--ink-3);}

/* ---- SECTION-HEAD : label eyebrow + filet horizontal + lead optionnel
   (le « VUE D'ENSEMBLE ──── / Tout le parc en un coup d'œil » d'Usine).
   Variante compacte sans lead = .section-title (déjà au kit). ---- */
.section-head{margin:32px 0 16px;}
.section-head:first-child{margin-top:0;}
.section-head .eyebrow{display:flex; align-items:center; gap:14px; font:var(--t-label); letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3);}
.section-head .eyebrow::after{content:""; flex:1; height:1px; background:var(--border);}
.section-head .section-lead{font:var(--t-lead); color:var(--ink-2); margin-top:8px;}

/* ---- BOUTON CTA (dégradé corail + glow, du cockpit) — action principale forte.
   S'emploie avec la base : <button class="btn btn-cta">. ---- */
.btn-cta{background:linear-gradient(140deg,var(--gold),var(--accent-strong)); color:#fff; border-color:transparent; box-shadow:0 10px 24px -12px rgba(237,88,71,.85);}
.btn-cta:hover{filter:brightness(1.06);}
.btn-cta.block{width:100%; justify-content:center;}

/* ---- STATUT en ligne / hors-ligne — applique le VERT sémantique (--pos) ---- */
.status{display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; padding:4px 9px 4px 8px; border-radius:20px; flex:none;}
.status .dot{width:7px; height:7px; border-radius:50%;}
.status.ok{color:var(--pos); background:var(--pos-soft);} .status.ok .dot{background:var(--pos); box-shadow:0 0 0 3px var(--pos-soft);}
.status.down{color:var(--down); background:var(--down-soft);} .status.down .dot{background:var(--down); box-shadow:0 0 0 3px var(--down-soft);}
.status.checking,.status.unknown{color:var(--ink-3); background:var(--surface-2);} .status.checking .dot,.status.unknown .dot{background:var(--ink-3);}
/* pastille positive opt-in (le .pill.ok reste NEUTRE par choix) */
.pill.pos{background:var(--pos-soft); color:var(--pos);}
/* point de statut paramétrable (remplace fleet-dot / rm-dot / ov .d) */
.status-dot{width:9px; height:9px; border-radius:50%; flex:none; background:var(--pos);}
.status-dot.warn{background:var(--gold);} .status-dot.down{background:var(--down);} .status-dot.unknown{background:var(--border-strong);}
.status-dot.sm{width:8px; height:8px;}
/* ligne d'état (fusion fleet-row + rail-mini) */
.status-row{display:flex; align-items:center; gap:11px; padding:11px 0; border-bottom:1px solid var(--border);}
.status-row:last-child{border-bottom:0;}
.status-row .sr-name{flex:1; min-width:0; font-size:14px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.status-row .sr-stat{font-size:12.5px; color:var(--ink-3); white-space:nowrap;}
.status-row .sr-stat.down{color:var(--down);} .status-row .sr-stat.warn{color:var(--gold-deep);}
.status-row.dense{padding:8px 0;} .status-row.dense .sr-name{font-size:12.5px;}

/* ---- BANDEAU (dégradé sombre INVARIANT, SANS bordure) — résout le conflit de thème
   car il ne suit pas le thème. .banner = verdict passif ; .banner.command = tableau de bord. ---- */
.banner{display:flex; align-items:center; gap:16px; padding:22px 24px; border-radius:var(--r-lg); margin-bottom:22px;
  background:linear-gradient(115deg,#2A2431 0%,#5C2A25 62%,#8E3A28 100%);
  box-shadow:0 26px 60px -34px rgba(0,0,0,.55);}
.banner-ic{width:48px; height:48px; border-radius:13px; background:rgba(255,255,255,.10); color:#fff; display:grid; place-items:center; flex:none;}
.banner-h{font-family:var(--font-display); font-size:17.5px; font-weight:600; color:#fff; letter-spacing:-.01em;}
.banner-s{font-size:13px; color:rgba(255,255,255,.62); margin-top:3px;}
.banner.warn .banner-ic{background:rgba(240,128,110,.22); color:#F0806E;}
.banner.bad .banner-ic{background:rgba(234,90,78,.24); color:#F0806E;}
.banner.command{display:grid; grid-template-columns:auto 1px 1fr; gap:26px; padding:22px 26px;}
.banner .gauge{display:flex; align-items:center; gap:18px;}
.banner .ring{width:86px; height:86px; border-radius:50%; flex:none; display:grid; place-items:center; position:relative; background:conic-gradient(rgba(255,255,255,.14) 0 360deg);}
.banner .ring::after{content:""; position:absolute; inset:9px; border-radius:50%; background:#241C22; border:1px solid rgba(255,255,255,.1);}
.banner .ring b{position:relative; z-index:1; font-family:var(--font-display); font-size:22px; font-weight:600; color:#fff; font-variant-numeric:tabular-nums;}
.banner .ring b small{font-size:12px; color:rgba(255,255,255,.6); font-weight:500;}
.banner .lab .t{font-family:var(--font-display); font-size:19px; font-weight:600; color:#fff;}
.banner .lab .s{font-size:12.5px; color:rgba(255,255,255,.78); margin-top:3px; display:flex; align-items:center; gap:7px;}
.banner .divsep{width:1px; align-self:stretch; background:rgba(255,255,255,.16);}
.banner .metrics{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.banner .metric .m-lab{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.6); display:flex; align-items:center; gap:7px;}
.banner .metric .m-val{font-family:var(--font-display); font-size:20px; font-weight:600; margin-top:6px; color:#fff; font-variant-numeric:tabular-nums;}
.banner .metric .m-sub{font-size:11.5px; color:rgba(255,255,255,.62); margin-top:2px;}
@media(max-width:720px){.banner.command{grid-template-columns:1fr; gap:20px;} .banner .divsep{display:none;}}
@media(max-width:460px){.banner .metrics{grid-template-columns:1fr; gap:14px;}}

/* ---- CARTE-HÉROS KPI (vitrine chiffrée avec icône + états hot-*) ---- */
.hero-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px;}
@media(max-width:900px){.hero-grid{grid-template-columns:repeat(2,1fr);}}
.hero-card{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:18px 18px 16px; box-shadow:var(--sh);}
.hero-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.hero-ic{width:38px; height:38px; border-radius:11px; background:var(--surface-2); color:var(--accent); display:grid; place-items:center; flex:none;}
.hero-ic .ic-svg{width:19px; height:19px;}
.hero-val{font-family:var(--font-display); font-size:30px; font-weight:600; letter-spacing:-.02em; color:var(--ink); line-height:1; font-variant-numeric:tabular-nums;}
.hero-lbl{font-size:12.5px; color:var(--ink-3); font-weight:600; margin-top:7px;}
.hero-sub{font-size:11.5px; color:var(--ink-3); margin-top:8px;}
.hero-bar{height:6px; border-radius:4px; background:var(--surface-2); overflow:hidden; margin-top:11px;}
.hero-fill{height:100%; border-radius:4px; background:var(--accent);}
.hero-card.hot-accent{background:rgba(237,88,71,.09); border-color:var(--coral-soft);}
.hero-card.hot-accent .hero-ic{background:rgba(237,88,71,.16); color:var(--gold-deep);}
.hero-card.hot-accent .hero-val{color:var(--gold-deep);}
.hero-card.hot-warn .hero-ic{color:var(--gold-deep);}
.hero-card.hot-bad{border-color:var(--coral-soft);}
.hero-card.hot-bad .hero-ic{background:rgba(234,90,78,.16); color:var(--neg);}
.hero-card.hot-bad .hero-val{color:var(--neg);}

/* ---- CARTE D'ACTION À TRAITER (todo) ---- */
.todo-card{display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); box-shadow:var(--sh); margin-bottom:10px;}
.todo-ic{width:38px; height:38px; border-radius:10px; flex:none; display:grid; place-items:center; background:#FBE4DF; color:var(--gold-deep);}
.todo-ic.down{background:#F7D9D4; color:var(--neg);}
.todo-body{flex:1; min-width:0;}
.todo-title{font-size:14px; font-weight:700; color:var(--ink);}
.todo-desc{font-size:12.5px; color:var(--ink-2); line-height:1.5; margin-top:2px;}
.todo-act{flex:none;}
@media(max-width:640px){.todo-card{flex-wrap:wrap;} .todo-act{width:100%;}}

/* ---- CARTE ENTITÉ cliquable (liste clients / projets) ----
   Nom canonique = .entity-card ; .client-card = alias déprécié (usine basculée en v3.2), retirer en v3.3. */
.entity-card,.client-card{cursor:pointer; transition:border-color .15s, box-shadow .15s; padding:28px;}
.entity-card:hover,.client-card:hover{border-color:var(--border-strong);}
.entity-card h3,.client-card h3{font-size:16.5px; line-height:1.3;}
.cc-metrics{display:flex; gap:36px; flex-wrap:wrap; margin:24px 0 8px;}
.cc-m{display:flex; flex-direction:column; gap:6px; min-width:0;}
.cc-k{font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); font-weight:700;}
.cc-v{font-size:14.5px; color:var(--ink); font-weight:600;}
.cc-open{margin-left:auto; font-size:12.5px; font-weight:600; color:var(--ink-2); text-decoration:underline; text-underline-offset:2px; text-decoration-color:var(--border-strong);}
.cc-open:hover{color:var(--ink); text-decoration-color:var(--ink-3);}
.detail-actions{display:flex; flex-wrap:wrap; gap:9px; padding:8px 0 14px;}

/* ---- TUILE DE CHOIX exclusif (choice) ---- */
.choice-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:22px;}
@media(max-width:640px){.choice-grid{grid-template-columns:1fr;}}
.choice{text-align:left; background:var(--surface); border:1.5px solid var(--border); border-radius:14px; padding:16px 18px; cursor:pointer; display:flex; flex-direction:column; gap:6px; transition:border-color .15s, background .15s; font-family:var(--font-body);}
.choice:hover{border-color:var(--border-strong);}
.choice.active{border-color:var(--accent); background:rgba(237,88,71,.06);}
.choice-ic{width:36px; height:36px; border-radius:10px; background:var(--surface-2); color:var(--accent); display:grid; place-items:center; margin-bottom:4px;}
.choice.active .choice-ic{background:rgba(237,88,71,.16);}
.choice-ic .ic-svg{width:19px; height:19px;}
.choice-t{font-size:14px; font-weight:600; color:var(--ink);}
.choice-d{font-size:12px; color:var(--ink-3); line-height:1.45;}

/* ---- TUILE DE COMMANDE / action rapide (cmd-tile) ---- */
.cmd-grid{display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:6px;}
.cmd-tile{display:flex; flex-direction:column; align-items:flex-start; gap:8px; background:var(--surface-2); border:1px solid var(--border); border-radius:13px; padding:14px 14px 12px; cursor:pointer; font-family:var(--font-body); text-align:left; transition:border-color .15s;}
.cmd-tile:hover{border-color:var(--accent);}
.cmd-tile.wide{grid-column:1/-1;}
.cmd-ic{width:34px; height:34px; border-radius:9px; background:var(--surface); border:1px solid var(--border); color:var(--accent); display:grid; place-items:center;}
.cmd-t{font-size:13px; font-weight:700; color:var(--ink); line-height:1.2;}
.cmd-d{font-size:11px; color:var(--ink-3); line-height:1.35;}

/* ---- LIEN VERS UNE APP DE L'ÉCOSYSTÈME (eco) ---- */
.eco{display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:12px; text-decoration:none; color:var(--ink);}
.eco:hover{background:var(--surface-2);}
.eco-ic{width:36px; height:36px; border-radius:10px; background:var(--surface-2); color:var(--accent); display:grid; place-items:center; flex:none;}
.eco-ic .ic-svg{width:18px; height:18px;}
.eco-n{font-size:13px; font-weight:600; color:var(--ink);}
.eco-d{font-size:11px; color:var(--ink-3);}
.eco-x{margin-left:auto; color:var(--ink-3); display:grid; place-items:center;}
.eco-x .ic-svg{width:14px; height:14px;}

/* ---- PASTILLE DE SUIVI LIVE d'action async (run-chip) ---- */
.run-strip{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px;}
.run-chip{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:5px 11px; border-radius:9px; background:var(--surface-2); color:var(--ink-2); border:1px solid var(--border);}
.run-chip.ok{color:var(--ink); border-color:var(--border-strong);}
.run-chip.fail{background:#FEF1EF; color:var(--neg); border-color:var(--coral-soft);}
.run-chip.fail a{color:var(--neg); text-decoration:underline; margin-left:2px;}
.run-chip.running .ic-svg{animation:spin 1s linear infinite;}

/* ---- OVERLAY plein-écran (tiroir de détail / réglages) — 2e primitive de dialogue,
   distincte de la modale de confirmation (.modal). ---- */
.overlay{position:fixed; inset:0; background:rgba(8,8,10,.55); z-index:390; display:flex; align-items:flex-start; justify-content:center; padding:5vh 20px; overflow-y:auto;}
.overlay[hidden]{display:none;}
.overlay-panel{background:var(--surface); border:1px solid var(--border); border-radius:18px; box-shadow:0 24px 70px rgba(0,0,0,.45); width:100%; max-width:860px; min-height:72vh; display:flex; flex-direction:column;}
.overlay-head{display:flex; align-items:center; justify-content:space-between; padding:22px 26px; border-bottom:1px solid var(--border); flex:none;}
.overlay-head h2{font-size:20px; font-weight:600; color:var(--ink);}
.overlay-body{padding:24px 26px 30px; overflow-y:auto;}
.ov-block{border:1px solid var(--border); border-radius:12px; padding:4px 16px; margin-bottom:14px;}
.ov-block-h{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:700; padding:13px 0 3px;}
.ov-row{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 0;}
.ov-row + .ov-row{border-top:1px solid var(--border);}
.ov-k{font-size:13.5px; font-weight:600; color:var(--ink);}
.ov-v{font-size:13px; color:var(--ink-2);}
.ov-hint{font-size:11.5px; color:var(--ink-3); margin-top:3px; max-width:52ch;}
.pf-input{width:190px; padding:8px 11px; border:1px solid var(--border-strong); border-radius:9px; font-family:var(--font-body); font-size:13px; color:var(--ink); background:var(--surface);}
.pf-input:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent);}

/* ---- BARRE D'ACTIONS GROUPÉES flottante (bulk-bar) ---- */
.bulk-bar{position:fixed; bottom:22px; left:50%; transform:translateX(-50%); background:var(--surface); border:1px solid var(--border-strong); border-radius:14px; box-shadow:0 14px 44px rgba(0,0,0,.32); padding:10px 12px 10px 18px; display:flex; align-items:center; gap:9px; z-index:350; flex-wrap:wrap; justify-content:center; max-width:calc(100vw - 32px);}
.bulk-count{font-size:13px; font-weight:600; color:var(--ink); margin-right:4px;}

/* ============================================================
   SHELL OS / PORTAIL (topbar-seule, contenu borné) — 2e coque canonique.
   App métier = .app + .sidebar (plus haut) ; OS/portail = ce bloc.
   ============================================================ */
/* logo de marque : carré corail + cercle blanc (favicon Snapshot) */
.mark{width:40px; height:40px; border-radius:12px; flex:none; position:relative; background:linear-gradient(150deg,#FF6B54,#ED5847); box-shadow:0 8px 22px -10px rgba(237,88,71,.8), inset 0 1px 0 rgba(255,255,255,.25);}
.mark::after{content:""; position:absolute; inset:0; margin:auto; width:15px; height:15px; border-radius:50%; background:#fff;}
.mark.sm{width:32px; height:32px; border-radius:10px;} .mark.sm::after{width:12px; height:12px;}
/* topbar OS */
.os-topbar{position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px clamp(18px,4vw,48px); border-bottom:1px solid var(--border);}
.os-topbar .brand{display:flex; align-items:center; gap:13px; min-width:0; padding:0;}
.os-topbar .brand-name{font-family:var(--font-display); font-weight:600; font-size:16px; color:var(--ink); line-height:1;}
.os-topbar .brand-sub{font-size:11px; color:var(--ink-3); margin-top:5px; letter-spacing:.14em; text-transform:uppercase;}
/* profil OS (top-right) : pilule nom+email + avatar + déconnexion */
.user-box{display:flex; align-items:center; gap:9px; min-width:0;}
.user-chip{display:flex; align-items:center; gap:11px; min-width:0; background:var(--surface-2); border:1px solid var(--border); border-radius:40px; padding:5px 6px 5px 12px; color:var(--ink); cursor:pointer;}
.user-chip:hover{border-color:var(--border-strong);}
.user-id{display:flex; flex-direction:column; line-height:1.25; min-width:0; text-align:right;}
.user-name{font-weight:600; font-size:13px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.user-email{font-size:11px; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.user-avatar{width:34px; height:34px; border-radius:50%; background:linear-gradient(140deg,var(--gold),var(--accent-strong)); color:#fff; font-size:12px; font-weight:700; display:grid; place-items:center; overflow:hidden; flex:none;}
.user-avatar img{width:100%; height:100%; object-fit:cover;}
.os-logout{display:inline-flex; align-items:center; gap:7px; background:var(--surface-2); color:var(--ink-2); border:1px solid var(--border-strong); border-radius:11px; padding:9px 13px; font-size:13px; font-weight:600; flex:none;}
.os-logout:hover{color:var(--ink); border-color:var(--ink-3);}
@media(max-width:560px){.user-email{display:none;} .user-name{max-width:88px;} .os-logout span:last-child{display:none;}}
/* contenu OS borné + kicker de page */
.os-wrap{position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:30px clamp(18px,4vw,48px) 72px;}
.page-kicker{font:var(--t-label); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);}
/* décor ambiant optionnel : halo + logo tournant (gris désaturé en clair, corail en sombre) */
.amb{position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:0;}
.amb::before{content:""; position:absolute; top:-28%; left:50%; width:1150px; height:1000px; transform:translateX(-50%); background:radial-gradient(closest-side, rgba(120,120,120,.13), transparent 70%);}
.amb-ap{position:absolute; top:-380px; left:50%; width:860px; height:860px; margin-left:-430px; color:#9A9A9A; opacity:.11; animation:spin 140s linear infinite;}
html[data-theme="dark"] .amb::before{background:radial-gradient(closest-side, rgba(237,88,71,.14), rgba(237,88,71,.03) 46%, transparent 72%);}
html[data-theme="dark"] .amb-ap{color:var(--accent); opacity:.06;}

/* ---- Variantes SOMBRES des composants promus (icônes teintées corail, portées d'Usine) ---- */
html[data-theme="dark"] .todo-ic{background:rgba(237,88,71,.16); color:#F07E6C;}
html[data-theme="dark"] .todo-ic.down{background:rgba(234,90,78,.18); color:#EA5A4E;}
html[data-theme="dark"] .run-chip.fail{background:rgba(234,90,78,.14);}
html[data-theme="dark"] .hero-card.hot-accent{background:rgba(237,88,71,.10);}
html[data-theme="dark"] .choice.active{background:rgba(237,88,71,.10);}

/* ---- CHARTS (helpers ui.js : areaChart/sparkline/multiLine/donutGapped/ringChart/gaugeArc/barsH/barsV/progressBars) ---- */
.chart{display:block; width:100%; overflow:visible;}
.chart-tip{position:fixed; z-index:60; pointer-events:none; background:var(--ink); color:var(--canvas); padding:7px 11px; border-radius:9px; font-size:12px; box-shadow:0 12px 30px -10px rgba(0,0,0,.5); opacity:0; transform:translateY(3px); transition:opacity .12s, transform .12s; white-space:nowrap;}
.chart-tip.show{opacity:1; transform:none;}
.chart-tip b{color:var(--coral-text);}
.chart-legend{display:flex; gap:16px; flex-wrap:wrap; margin-top:12px;}
.chart-legend .lg{display:flex; align-items:center; gap:7px; font-size:12px; color:var(--ink-2);}
.chart-legend .lg i{width:10px; height:10px; border-radius:3px; display:inline-block; flex:none;}

/* chip-nav : mini-boutons de section (fond doux, icône corail, actif surélevé) — ex-Patrimoine */
.chip-nav{display:flex; flex-wrap:wrap; gap:8px;}
.chip{display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:11px; border:1px solid var(--border); background:var(--surface-2); color:var(--ink-2); font-family:var(--font-body); font-size:13px; font-weight:600; cursor:pointer; transition:border-color .15s, color .15s, background .15s;}
.chip:hover{color:var(--ink); border-color:var(--border-strong);}
.chip.active{background:var(--surface); color:var(--ink); border-color:var(--border-strong); box-shadow:var(--sh);}
.chip .ic-svg{width:15px; height:15px; color:var(--coral-text);}

/* kcard : KPI compacte (icône + valeur + delta vert/rose + mini-sparkline) */
.kcard{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:16px 18px; box-shadow:var(--sh); display:flex; flex-direction:column; gap:2px;}
.kcard-top{display:flex; align-items:center; gap:10px; margin-bottom:8px;}
.kcard-ic{width:32px; height:32px; border-radius:9px; background:var(--surface-2); color:var(--coral-text); display:grid; place-items:center; flex:none;}
.kcard-lbl{font-size:12px; color:var(--ink-3); font-weight:600;}
.kcard-v{font-family:var(--font-display); font-size:23px; font-weight:600; letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1.1;}
.kcard .delta{display:inline-flex; align-items:center; gap:3px; font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; margin-top:4px;}
.kcard .delta.up{color:var(--pos);} .kcard .delta.down{color:var(--down);}

/* ============================================================
   IMPRESSION (v3.1, promu de Patrimoine) — « exporter en PDF » propre
   via window.print() : chrome applicatif masqué, thème forcé clair,
   cartes non coupées. Marche pour toute app kit sans rien ajouter.
   ============================================================ */
@media print{
  html[data-theme="dark"]{
    color-scheme:light;
    --canvas:#fff; --surface:#fff; --surface-2:#F5F5F5;
    --border:#DDDDDD; --border-strong:#CFCFCF; --field-border:#8A8A8A;
    --ink:#0B0B0B; --ink-2:#4A4D54; --ink-3:#696969;
    --sh:none;
  }
  body{background:#fff;}
  .sidebar,.topbar-actions,.nav-toggle,.toast,.scrim,.modal-scrim,.overlay,.bulk-bar,.usermenu,.side-theme,.chip-nav,.bar-actions{display:none !important;}
  .app{display:block;}
  .main,.content{overflow:visible; height:auto;}
  .card,.kpi,.kcard,.hero-card,.todo-card,table{break-inside:avoid;}
  *{print-color-adjust:exact; -webkit-print-color-adjust:exact;}
}