/* infinis-theme v1 — 2026-07-07
   ============================================================
   COCKPIT INFINIS — thème « logiciel métier institutionnel »
   Fork dédié (ne PAS synchroniser avec le kit Snapshot).
   Reprend les mêmes noms de classes/variables que le kit pour que
   ui.js / app.js / charts.js continuent de fonctionner, mais réinvente
   l'univers : marine / rouge / or, filets fins, densité, sobriété.
   Polices Switzer / Satoshi conservées (auto-hébergées).
   ============================================================ */

/* ---- POLICES ---- */
@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{
  --canvas:#EDEFF3;        /* gris-bleu clair : fait ressortir les surfaces blanches */
  --surface:#FFFFFF;
  --surface-2:#F2F4F8;     /* hover / fills doux */
  --border:#E2E5EC;        /* filet fin */
  --border-strong:#C9CEDA;
  --ink:#1A1D28;           /* encre principale, teintée marine */
  --ink-2:#4B5162;
  --ink-3:#7E8496;

  /* couleurs de marque Infinis */
  --navy:#2E3B7E; --navy-strong:#26326B; --navy-deep:#1E2858;
  --red:#B4282D; --red-strong:#9C2126;
  --gold:#B0842B;

  /* alias legacy (utilisés par ui.js / styles hypo) recolorés Infinis */
  --forest:#1E2858;        /* « sombre structurel » → marine profond (étapes faites, actifs pleins) */
  --forest-2:#182047;
  --primary:#2E3B7E; --primary-2:#4B5162;
  --accent:#2E3B7E;        /* accent primaire : focus, bordures actives, sliders */
  --accent-strong:#2E3B7E; /* boutons pleins */
  --gold-deep:#B4282D;     /* liens, alertes, « warn » → rouge Infinis */
  --neg:#B4282D;           /* suppression / erreur */
  --pos:#4B5162;           /* positif reste neutre (pas de vert) */
  --muted:#4B5162; --muted-2:#7E8496;
  --coral:#B4282D; --coral-soft:#EBC3C4; --coral-50:#B4282D;

  /* dataviz — palette Infinis (marine / rouge / or / gris-bleu / bordeaux / clair) */
  --viz-1:#2E3B7E; --viz-2:#B4282D; --viz-3:#B0842B;
  --viz-4:#8890A6; --viz-5:#7A1E22; --viz-6:#D3D7E2;
  --viz-grid:#E6E8EF; --viz-txt:#7E8496;

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

  /* rayons resserrés + ombre quasi nulle : on structure au filet, pas à l'élévation */
  --r-sm:4px; --r-md:5px; --r-lg:6px; --r-xl:8px;
  --sh:0 1px 2px rgba(26,29,40,.05);
}
*{box-sizing:border-box;}
[hidden]{display:none !important;}
html,body{margin:0; height:100%;}
body{
  background:var(--canvas); color:var(--ink);
  font-family:var(--font-body); font-size:13px; 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:-.01em; color:var(--ink);}
button{font-family:inherit; cursor:pointer;}
input,select,textarea{font-family:inherit;}
a{color:var(--navy);}
.num{font-variant-numeric:tabular-nums;}
::selection{background:rgba(46,59,126,.16);}

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

.sidebar{
  width:236px; flex:none; background:var(--surface); color:var(--ink-2);
  display:flex; flex-direction:column; padding:16px 12px 14px;
  position:sticky; top:0; height:100vh; height:100dvh;
  border-right:1px solid var(--border);
}
.brand{display:flex; align-items:center; gap:10px; padding:6px 8px 16px; margin-bottom:6px; border-bottom:1px solid var(--border);}
.brand-logo{height:30px; width:auto; display:block;}
.brand-mark{
  width:32px; height:32px; border-radius:6px; flex:none;
  background:var(--navy-deep); display:grid; place-items:center; color:#fff;
}
.brand-name{font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--ink); line-height:1; letter-spacing:.02em;}
.brand-sub{font-size:9.5px; color:var(--ink-3); margin-top:4px; letter-spacing:.14em; text-transform:uppercase;}

.side-card{background:var(--surface-2); border:1px solid var(--border); border-radius:6px; padding:12px; margin-bottom:14px;}
.side-card .sc-label{font-size:9.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);}
.side-card .sc-name{font-size:13px; font-weight:600; color:var(--ink); margin-top:7px; line-height:1.3;}
.side-card .sc-value{font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--navy); margin-top:9px; font-variant-numeric:tabular-nums;}

.nav{display:flex; flex-direction:column; gap:1px;}
.nav-item{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  padding:9px 11px; border:none; background:none; border-radius:5px;
  color:var(--ink-2); font-size:13px; font-weight:600; letter-spacing:.005em;
  box-shadow:inset 2px 0 0 transparent; transition:background .14s, color .14s, box-shadow .14s;
}
.nav-item:hover{background:var(--surface-2); color:var(--ink);}
.nav-item.active{background:var(--surface-2); color:var(--navy); box-shadow:inset 2px 0 0 var(--red);}
.nav-item .ic-svg{width:17px; height:17px; opacity:.7; flex:none;}
.nav-item.active .ic-svg{color:var(--navy); opacity:1;}

.sidebar-foot{margin-top:auto; padding-top:12px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:9px;}
.sync{display:flex; align-items:center; gap:7px; font-size:11px; font-weight:600; color:var(--ink-3);}
.logout-btn{
  display:inline-flex; align-items:center; gap:7px; align-self:flex-start;
  background:var(--surface-2); color:var(--ink-2); border:1px solid var(--border);
  border-radius:5px; padding:6px 10px; font-size:11.5px; font-weight:600; text-decoration:none;
}
.logout-btn:hover{background:var(--surface); border-color:var(--border-strong); color:var(--ink);}

.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:11px clamp(16px,2.4vw,32px); border-bottom:1px solid var(--border); background:var(--surface);
}
.topbar-left{display:flex; align-items:center; gap:12px;}
.crumb{font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);}
.page-title{font-size:19px; color:var(--ink); margin-top:3px;}
.topbar-actions{display:flex; gap:8px; align-items:center;}
.nav-toggle{display:none; background:var(--surface); border:1px solid var(--border-strong); color:var(--ink); border-radius:5px; width:36px; height:36px; align-items:center; justify-content:center;}
.content{flex:1; overflow-y:auto; padding:20px clamp(16px,2.4vw,32px) 56px; scroll-behavior:smooth;}

/* ---- COMPOSANTS ---- */
.grid{display:grid; gap:12px;}
.kpis{grid-template-columns:repeat(auto-fit,minmax(200px,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:16px 18px; box-shadow:var(--sh);}
.card.pad-lg{padding:20px;}
.card-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:13px;}
.card-head h3{font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--navy);}
.card-note{font-size:11.5px; font-weight:500; color:var(--ink-3);}

.kpi{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:14px 15px; box-shadow:var(--sh); position:relative;}
.kpi-label{font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3);}
.kpi-value{font-family:var(--font-display); font-weight:700; font-size:25px; letter-spacing:-.02em; color:var(--ink); margin-top:9px; font-variant-numeric:tabular-nums; line-height:1;}
.kpi-sub{font-size:11.5px; font-weight:500; color:var(--ink-2); margin-top:7px; font-variant-numeric:tabular-nums;}
.kpi.ink .kpi-value{color:var(--navy);}
.kpi.accent{border-top:2px solid var(--red);}
.kpi.accent .kpi-value{color:var(--red);}

/* tables — denses, filets fins, en-têtes capitales */
table.data{width:100%; border-collapse:collapse; font-size:12.5px; font-weight:500;}
table.data th{text-align:left; font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); padding:0 10px 9px; border-bottom:1px solid var(--border-strong);}
table.data td{padding:8px 10px; 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(--navy);}
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:8px; vertical-align:baseline;}

.badge-est{display:inline-flex; align-items:center; gap:5px; font-size:9.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--gold); margin-left:8px; white-space:nowrap;}
.badge-est::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--gold); flex:none;}

/* pills — carrées, sobres */
.pill{display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.02em; border-radius:4px; padding:3px 8px;}
.pill.ok{background:var(--surface-2); color:var(--navy); border:1px solid var(--border-strong);}
.pill.warn{background:#FBEFE6; color:#8A5A15; border:1px solid #EAD3B6;}
.pill.bad{background:var(--red); color:#fff;}

/* notes éditoriales */
.note{background:var(--surface-2); border:1px solid var(--border); border-left:2px solid var(--navy); border-radius:5px; padding:13px 15px; font-size:12.5px; line-height:1.6; color:var(--ink-2);}
.note .note-tag{display:block; font-size:9.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--navy); margin-bottom:6px;}
.note b{color:var(--ink); font-weight:700;}
.note.warn{background:#FBF4F4; border-left-color:var(--red);}
.note.warn .note-tag{color:var(--red);}

/* champs */
.field{display:flex; flex-direction:column; gap:5px; margin-bottom:13px;}
.field label{font-size:11px; font-weight:600; color:var(--ink-2); display:flex; align-items:center;}
.field input,.field select,.field textarea{border:1px solid var(--border-strong); border-radius:5px; padding:8px 10px; font-size:13px; 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(--navy); box-shadow:0 0 0 3px rgba(46,59,126,.14);}
.field .hint{font-size:10.5px; color:var(--ink-3);}
.fields-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:0 18px;}
.edit-table input,.edit-table select{width:100%; border:1px solid var(--border); border-radius:4px; padding:6px 7px; font-size:12.5px; background:var(--surface);}
.edit-table input:focus,.edit-table select:focus{outline:none; border-color:var(--navy);}
.edit-table td{padding:5px 5px;}

/* boutons — rectangulaires, marine primaire */
.btn{display:inline-flex; align-items:center; gap:6px; border:1px solid transparent; border-radius:5px; padding:8px 13px; font-size:12.5px; font-weight:600; letter-spacing:.005em; transition:background .14s, border-color .14s, color .14s;}
.btn:active{transform:translateY(.5px);}
.btn-primary{background:var(--navy); color:#fff;}
.btn-primary:hover{background:var(--navy-strong);}
.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);}
.btn-soft:hover{background:#E8EBF1; border-color:var(--border-strong);}
.btn-danger{background:transparent; color:var(--red); border-color:var(--border);}
.btn-danger:hover{background:rgba(180,40,45,.07); border-color:rgba(180,40,45,.3);}
.btn-sm{padding:5px 9px; font-size:11.5px; border-radius:4px; gap:5px;}
.ic-svg{width:16px; height:16px; flex:none;}
.btn-icon{padding:6px; width:28px; height:28px; justify-content:center;}

/* divers */
.section-title{font-size:10.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--navy); margin:26px 0 13px; display:flex; align-items:center; gap:12px;}
.section-title::after{content:""; flex:1; height:1px; background:var(--border);}
.empty{padding:22px; text-align:center; color:var(--ink-3); font-size:12.5px;}
.muted{color:var(--ink-2);} .small{font-size:11.5px;}
.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 */
.toast{position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--navy-deep); color:#EEF0F6; padding:11px 16px; border-radius:6px; font-size:12.5px; font-weight:500; box-shadow:0 12px 30px -10px rgba(26,29,40,.5); opacity:0; pointer-events:none; transition:all .28s 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(--red-strong); color:#fff;}
.toast-undo{background:none; border:1px solid rgba(255,255,255,.3); color:#EEF0F6; border-radius:4px; padding:3px 9px; font-size:11.5px; font-weight:600; cursor:pointer; white-space:nowrap;}
.toast-undo:hover{background:rgba(255,255,255,.12);}
.toast-msg{flex:1;}

/* ---- MODALE ---- */
.modal-scrim{position:fixed; inset:0; background:rgba(26,29,40,.44); display:flex; align-items:center; justify-content:center; padding:20px; z-index:400; opacity:0; transition:opacity .2s ease;}
.modal-scrim[hidden]{display:none;}
.modal-scrim.show{opacity:1;}
.modal{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:0 24px 60px -18px rgba(26,29,40,.4); width:100%; max-width:440px; 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:580px;}
.modal-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px 10px;}
.modal-head h3{font-size:15px; font-weight:700;}
.modal-x{background:none; border:none; color:var(--ink-3); width:28px; height:28px; border-radius:5px; display:grid; place-items:center;}
.modal-x:hover{background:var(--surface-2); color:var(--ink);}
.modal-body{padding:0 20px 4px; overflow-y:auto; min-height:0;}
.modal-body .field:last-child{margin-bottom:6px;}
.modal-text{font-size:13px; line-height:1.6; color:var(--ink-2); margin:2px 0 10px;}
.modal-foot{display:flex; justify-content:flex-end; gap:9px; padding:14px 20px 18px;}
.btn-danger-solid{background:var(--red); color:#fff; border-color:var(--red);}
.btn-danger-solid:hover{background:var(--red-strong);}

/* ---- ÉTATS ASYNCHRONES ---- */
.spinner{width:15px; height:15px; border-radius:50%; border:2px solid rgba(255,255,255,.35); border-top-color:currentColor; animation:spin .7s linear infinite; flex:none;}
@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(26,29,40,.2); border-top-color:var(--ink);}
.skeleton{display:inline-block; border-radius:4px; background:linear-gradient(90deg,var(--surface-2) 25%,#E6E9F0 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 (traitement long) ---- */
.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:12.5px; 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(--navy); color:var(--navy);}
.step.active .step-dot::before{content:""; width:9px; height:9px; border-radius:50%; border:2px solid rgba(46,59,126,.3); border-top-color:var(--navy); animation:spin .8s linear infinite;}
.step.done{color:var(--ink-2);}
.step.done .step-dot{background:var(--navy); border-color:var(--navy); color:#fff;}
.step.fail{color:var(--red); font-weight:600;}
.step.fail .step-dot{background:var(--red); border-color:var(--red); color:#fff;}
.step.skip{opacity:.55;}

/* ---- SEGMENTED CONTROL ---- */
.seg{display:flex; flex-wrap:wrap; gap:5px;}
.seg button{border:1px solid var(--border-strong); background:var(--surface); color:var(--ink-2); border-radius:5px; padding:6px 11px; font-size:12px; font-weight:600;}
.seg button:hover{border-color:var(--ink-3); color:var(--ink);}
.seg button.active{background:var(--navy); color:#fff; border-color:var(--navy);}

/* ---- TOGGLE SWITCH ---- */
.switch{position:relative; width:40px; height:22px; 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:16px; height:16px; border-radius:50%; background:#fff; transition:transform .18s; box-shadow:0 1px 2px rgba(0,0,0,.25);}
.switch input:checked + .track{background:var(--navy);}
.switch input:checked + .track + .knob{transform:translateX(18px);}
.switch input:focus-visible + .track{outline:2px solid var(--navy); outline-offset:2px;}
.switch.locked{opacity:.5; pointer-events:none;}

/* ---- TAG ---- */
.tag{display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:700; letter-spacing:.03em; padding:3px 7px; border-radius:4px; background:var(--surface-2); color:var(--ink-2); border:1px solid var(--border);}

/* ---- DATAVIZ (kit : bar-list, donut, légende) ---- */
.bars{display:flex; flex-direction:column; gap:10px;}
.bar-row{display:grid; grid-template-columns:1fr 110px; gap:4px 12px; align-items:center; font-size:12px;}
.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:700; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap;}
.donut-wrap{display:flex; flex-direction:column; align-items:center; gap:12px;}
.donut-svg{width:100%; max-width:230px; 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;}
.legend{display:flex; flex-direction:column; gap:6px; width:100%; max-width:290px;}
.legend-item{display:flex; align-items:center; gap:8px; font-size:11.5px;}
.legend-swatch{width:10px; height:10px; border-radius:2px; 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:700; font-variant-numeric:tabular-nums; font-size:11.5px; white-space:nowrap;}

/* ---- TOOLTIP ---- */
.tip{position:fixed; z-index:500; background:var(--navy-deep); color:#EEF0F6; padding:9px 12px; border-radius:6px; 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 ---- */
.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 */
.panel{display:none; animation:fade .3s cubic-bezier(.22,1,.36,1);}
.panel.active{display:block;}
@keyframes fade{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}

/* ---- RESPONSIVE ---- */
@media(max-width:820px){
  .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,.2);}
  .app.nav-open .sidebar{transform:none; visibility:visible;}
  .app.nav-open .scrim{display:block; position:fixed; inset:0; background:rgba(26,29,40,.4); z-index:150;}
  .nav-toggle{display:inline-flex;}
  .kpis{grid-template-columns:1fr 1fr;}
  .field input,.field select,.field textarea,.edit-table input,.edit-table select{font-size:16px;}
}
@media(max-width:560px){.kpis{grid-template-columns:1fr;} .topbar-actions .btn .lbl{display:none;}}
@media(pointer:coarse){
  .btn-icon{width:36px; height:36px;}
  .btn-sm{padding:8px 12px;}
  .modal-x{width:36px; height:36px;}
  .seg button{padding:9px 13px;}
  .toast-undo{padding:8px 12px;}
}

/* ---- ACCESSIBILITÉ ---- */
:focus-visible{outline:2px solid var(--navy); outline-offset:2px; border-radius:3px;}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:none;}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;}
}

/* ---- TOPBAR : bouton icône + fil d'Ariane ---- */
.icon-btn{width:36px; height:36px; border-radius:5px; 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:7px; font-size:12.5px; color:var(--ink-3); min-width:0;}
.crumb-nav b{color:var(--ink); font-weight:700;}
.crumb-chip{padding:3px 8px; border-radius:4px; background:rgba(46,59,126,.10); color:var(--navy); font-size:10.5px; font-weight:700; white-space:nowrap;}
.crumb-sep{color:var(--ink-3);}
.crumb-mid{color:var(--ink-2); font-weight:500;}

/* ---- MENU PROFIL ---- */
.usermenu{position:relative;}
.avatar{width:34px; height:34px; border-radius:6px; background:var(--navy); color:#fff; font-size:12px; font-weight:700; border:1px solid transparent; display:grid; place-items:center; overflow:hidden;}
.avatar:hover{border-color:var(--navy-strong);}
.avatar img{width:100%; height:100%; object-fit:cover; border-radius:5px;}
.umenu{position:absolute; top:44px; right:0; width:224px; background:var(--surface); border:1px solid var(--border); border-radius:6px; box-shadow:0 12px 30px -12px rgba(26,29,40,.3); padding:5px; z-index:200;}
.um-head{padding:9px 10px; border-bottom:1px solid var(--border); margin-bottom:4px;}
.um-name{font-weight:700; font-size:13px; color:var(--ink);}
.um-mail{font-size:11px; color:var(--ink-3);}
.um-item{display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:8px 10px; border:none; background:none; border-radius:5px; font-size:12.5px; 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(--red);}
.um-item .ic-svg{width:16px; height:16px;}

/* ---- SIDEBAR REPLIABLE ---- */
.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:64px; padding-left:11px; padding-right:11px;}
.app.nav-min .brand-logo{height:26px; object-fit:cover; object-position:left; width:26px;}
.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 clair) ---- */
.side-theme{display:flex; align-items:center; justify-content:space-between; width:100%; background:var(--surface-2); border:1px solid var(--border); border-radius:5px; padding:8px 10px; color:var(--ink-2); font-size:11.5px; font-weight:600; cursor:pointer; font-family:var(--font-body);}
.side-theme:hover{background:var(--surface); border-color:var(--border-strong); color:var(--ink);}
.side-theme .stl{display:flex; align-items:center; gap:8px;}
.side-theme .ic-svg{width:15px; height:15px;}
.side-theme .switch{width:32px; height:18px; border-radius:10px; background:var(--border-strong); position:relative; flex:none; transition:background .18s;}
.side-theme .switch::after{content:""; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:#fff; transition:left .18s; box-shadow:0 1px 2px rgba(0,0,0,.2);}
html[data-theme="dark"] .side-theme .switch{background:var(--navy);}
html[data-theme="dark"] .side-theme .switch::after{left:16px;}

/* ---- ONGLETS ---- */
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:20px;}
.tab{background:none; border:none; padding:10px 15px; font-size:13px; font-weight:600; color:var(--ink-3); border-bottom:2px solid transparent; margin-bottom:-1px; font-family:var(--font-body); transition:color .15s, border-color .15s;}
.tab:hover{color:var(--ink); border-bottom-color:var(--border-strong);}
.tab.active{color:var(--navy); border-bottom-color:var(--red);}

/* ---- CASE À COCHER ---- */
.pick{-webkit-appearance:none; appearance:none; width:17px; height:17px; flex:none; cursor:pointer; margin:0; border:1.5px solid var(--border-strong); border-radius:4px; background:var(--surface); position:relative; transition:background .15s, border-color .15s;}
.pick:hover{border-color:var(--ink-3);}
.pick:checked{background:var(--navy); border-color:var(--navy);}
.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(--navy); outline-offset:2px;}

/* ---- MODE SOMBRE (navy-dark, secondaire) ---- */
html[data-theme="dark"]{
  --canvas:#141722; --surface:#1B1F2E; --surface-2:#232838;
  --border:#2C3242; --border-strong:#3B4256;
  --ink:#EEF0F6; --ink-2:#AEB4C6; --ink-3:#828AA0;
  --navy:#6B7BD6; --navy-strong:#8290DE; --navy-deep:#0F1424;
  --red:#E06A6E; --red-strong:#D2545A; --gold:#D6A94E;
  --forest:#0F1424; --forest-2:#0A0E1C;
  --primary:#EEF0F6; --primary-2:#AEB4C6; --pos:#AEB4C6;
  --accent:#6B7BD6; --accent-strong:#6B7BD6; --gold-deep:#E06A6E; --neg:#E06A6E;
  --coral-soft:#5A2A2C;
  --viz-1:#7C8AD8; --viz-2:#E06A6E; --viz-3:#D6A94E; --viz-4:#828AA0; --viz-5:#C25258; --viz-6:#3B4256;
  --viz-grid:#2C3242; --viz-txt:#828AA0;
  --sh:0 1px 2px rgba(0,0,0,.4);
}
html[data-theme="dark"] .toast{background:#232838; color:#EEF0F6;}
html[data-theme="dark"] .toast.err{background:#B23A40; color:#fff;}
html[data-theme="dark"] .pill.warn{background:rgba(214,169,78,.16); color:#D6A94E; border-color:transparent;}
html[data-theme="dark"] .note.warn{background:rgba(224,106,110,.10);}
html[data-theme="dark"] .btn-primary{color:#0F1424;}