/* duodesk-theme v2 « Encre & Archive » — 2026-07-13
   ============================================================
   DUODESK — thème white-label DUO GUARDIANS (détectives privés)
   Fork dédié (ne PAS synchroniser avec le kit Snapshot).
   v2 : direction éditoriale « dossier confidentiel » — Instrument
   Serif en display (la police du vrai site duoguardians.ch),
   surfaces DÉ-FILETÉES (profondeur par contraste de fond + ombre
   large, plus de filet 1px sur chaque boîte), échelle typo élargie
   (body 14, héros 44-64), cachet d'intégrité, transitions 200 ms.
   SOMBRE PAR DÉFAUT. Clé de thème : localStorage 'duodesk-theme'.
   ============================================================ */

/* ---- POLICES ---- */
@font-face{font-family:'Instrument Serif';src:url('fonts/InstrumentSerif-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Instrument Serif';src:url('fonts/InstrumentSerif-Italic.woff2') format('woff2');font-weight:400;font-style:italic;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 (défaut = SOMBRE) ---- */
:root{
  --canvas:#0A0A0B;        /* fond de page : le plus profond */
  --surface:#151415;       /* cartes : un cran au-dessus */
  --surface-2:#1E1D1F;     /* hover / fills / inputs */
  --border:#262528;        /* filets résiduels (tables, inputs) */
  --border-strong:#3A383C;
  --ink:#F2EFE7;
  --ink-2:#B9B3A6;
  --ink-3:#8B857A;

  --carmin:#8E0D0F;
  --carmin-bright:#C22B2E;
  --carmin-text:#E0605F;

  /* alias legacy du kit (mêmes noms → ui.js intact) */
  --navy:#E0605F; --navy-strong:#EB7A76; --navy-deep:#1B1A1C;
  --red:#C22B2E; --red-strong:#A31518;
  --gold:#D2A337;
  --forest:#55524A; --forest-2:#464339;
  --primary:#F2EFE7; --primary-2:#B9B3A6;
  --accent:#E0605F; --accent-strong:#A31518;
  --gold-deep:#D2A337; --neg:#C22B2E;
  --pos:#4E9B6F; --down:#C22B2E;
  --muted:#B9B3A6; --muted-2:#8B857A;
  --coral:#C22B2E; --coral-soft:#4A2020; --coral-50:#C22B2E;
  --coral-lite:#E0605F; --coral-deep:#8E0D0F;

  --viz-1:#D0524D; --viz-2:#8B857A; --viz-3:#D2A337;
  --viz-4:#55524A; --viz-5:#8E0D0F; --viz-6:#3A383C;
  --viz-grid:#262528; --viz-txt:#8B857A;

  --font-display:'Instrument Serif',Georgia,'Times New Roman',serif;
  --font-body:'Satoshi',-apple-system,'Segoe UI',sans-serif;
  --font-mono:ui-monospace,'Cascadia Mono',Consolas,'SF Mono',monospace;

  --r-sm:6px; --r-md:8px; --r-lg:10px; --r-xl:14px;
  --sh:0 10px 34px -16px rgba(0,0,0,.55);
  --sh-soft:0 4px 18px -10px rgba(0,0,0,.4);
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ---- THÈME CLAIR (papier ivoire, secondaire) ---- */
html[data-theme="light"]{
  --canvas:#EFECE3; --surface:#FBFAF6; --surface-2:#F0EDE4;
  --border:#E2DED2; --border-strong:#C9C3B4;
  --ink:#1D1B18; --ink-2:#545047; --ink-3:#807A6E;
  --carmin-text:#8E0D0F;
  --navy:#8E0D0F; --navy-strong:#7C0B0D; --navy-deep:#161514;
  --red:#8E0D0F; --red-strong:#6E0B0D; --gold:#8A6100;
  --forest:#3A3833; --forest-2:#2C2A26;
  --primary:#1D1B18; --primary-2:#545047;
  --accent:#8E0D0F; --accent-strong:#8E0D0F;
  --gold-deep:#8A6100; --neg:#8E0D0F; --pos:#2E6B45; --down:#8E0D0F;
  --coral:#8E0D0F; --coral-soft:#EBC9C9; --coral-lite:#B4423C; --coral-deep:#6E0B0D;
  --viz-1:#8E0D0F; --viz-2:#807A6E; --viz-3:#8A6100;
  --viz-4:#C9C3B4; --viz-5:#5E1D1E; --viz-6:#DDD8CA;
  --viz-grid:#E6E2D6; --viz-txt:#807A6E;
  --sh:0 10px 30px -18px rgba(29,27,24,.22);
  --sh-soft:0 3px 14px -8px rgba(29,27,24,.14);
}

/* ---- THÈME DUO : pages claires + sidebar sombre ----
   Mêmes tokens que le clair au niveau racine ; la sidebar (app et portail)
   redéclare localement les tokens sombres — les custom properties cascadent. */
html[data-theme="duo"]{
  --canvas:#EFECE3; --surface:#FBFAF6; --surface-2:#F0EDE4;
  --border:#E2DED2; --border-strong:#C9C3B4;
  --ink:#1D1B18; --ink-2:#545047; --ink-3:#807A6E;
  --carmin-text:#8E0D0F;
  --navy:#8E0D0F; --navy-strong:#7C0B0D; --navy-deep:#161514;
  --red:#8E0D0F; --red-strong:#6E0B0D; --gold:#8A6100;
  --forest:#3A3833; --forest-2:#2C2A26;
  --primary:#1D1B18; --primary-2:#545047;
  --accent:#8E0D0F; --accent-strong:#8E0D0F;
  --gold-deep:#8A6100; --neg:#8E0D0F; --pos:#2E6B45; --down:#8E0D0F;
  --coral:#8E0D0F; --coral-soft:#EBC9C9; --coral-lite:#B4423C; --coral-deep:#6E0B0D;
  --viz-1:#8E0D0F; --viz-2:#807A6E; --viz-3:#8A6100;
  --viz-4:#C9C3B4; --viz-5:#5E1D1E; --viz-6:#DDD8CA;
  --viz-grid:#E6E2D6; --viz-txt:#807A6E;
  --sh:0 10px 30px -18px rgba(29,27,24,.22);
  --sh-soft:0 3px 14px -8px rgba(29,27,24,.14);
}
html[data-theme="duo"] .sidebar,
html[data-theme="duo"] .pside{
  --canvas:#0A0A0B; --surface:#151415; --surface-2:#1E1D1F;
  --border:#262528; --border-strong:#3A383C;
  --ink:#F2EFE7; --ink-2:#B9B3A6; --ink-3:#8B857A;
  --carmin-text:#E0605F; --accent-strong:#A31518; --red:#C22B2E;
  --sh-soft:0 4px 18px -10px rgba(0,0,0,.4);
  background:#0F0E10;
  border-right-color:#262528;
}
html[data-theme="duo"] .side-theme .switch{background:var(--accent-strong);}
html[data-theme="duo"] .side-theme .switch::after{left:16px;}

*{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:14px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{margin:0; font-family:var(--font-display); font-weight:400; letter-spacing:.005em; color:var(--ink);}
button{font-family:inherit; cursor:pointer;}
input,select,textarea{font-family:inherit;}
a{color:var(--carmin-text); text-decoration-thickness:1px; text-underline-offset:3px; transition:text-decoration-thickness .2s var(--ease);}
a:hover{text-decoration-thickness:2px;}
.num,.mono{font-variant-numeric:tabular-nums;}
.mono{font-family:var(--font-mono); font-size:.9em;}
::selection{background:rgba(194,43,46,.3);}

/* utilitaires responsive : rendu double table/cartes */
.m-only{display:none !important;}
@media(max-width:560px){ .m-only{display:block !important;} .d-only{display:none !important;} }

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

.sidebar{
  width:240px; flex:none; background:transparent; color:var(--ink-2);
  display:flex; flex-direction:column; padding:20px 14px 16px;
  position:sticky; top:0; height:100vh; height:100dvh;
  border-right:1px solid var(--border);
}
.brand{display:flex; align-items:center; gap:11px; padding:8px 8px 20px; margin-bottom:10px;}
.brand-mark{width:32px; height:38px; flex:none; display:grid; place-items:center; color:var(--carmin-bright);}
.brand-name{font-family:var(--font-display); font-size:17px; color:var(--ink); line-height:1; letter-spacing:.1em;}
.brand-sub{font-family:var(--font-mono); font-size:8.5px; color:var(--ink-3); margin-top:5px; letter-spacing:.2em; text-transform:uppercase;}

.side-card{background:var(--surface); border-radius:var(--r-lg); padding:12px 13px; margin-bottom:16px; box-shadow:var(--sh-soft);}
.side-card .sc-label{font-family:var(--font-mono); font-size:9px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);}
.side-card select{width:100%; margin-top:9px; background:var(--surface-2); border:none; color:var(--ink); border-radius:var(--r-sm); padding:9px 10px; font-size:13px; font-weight:600; cursor:pointer;}
.side-card select:focus{outline:2px solid var(--carmin-bright); outline-offset:1px;}

.nav{display:flex; flex-direction:column; gap:2px;}
.nav-item{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  padding:10px 12px; border:none; background:none; border-radius:var(--r-md);
  color:var(--ink-2); font-size:13.5px; font-weight:600; letter-spacing:.005em;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.nav-item:hover{background:var(--surface); color:var(--ink);}
.nav-item.active{background:var(--surface); color:var(--ink); box-shadow:inset 2px 0 0 var(--red), var(--sh-soft);}
.nav-item .ic-svg{width:17px; height:17px; opacity:.65; flex:none;}
.nav-item.active .ic-svg{color:var(--carmin-text); opacity:1;}
.nav-item.soon{opacity:.38; cursor:not-allowed;}
.nav-item.soon .soon-tag{margin-left:auto; font-family:var(--font-mono); font-size:8.5px; letter-spacing:.08em; text-transform:uppercase; border:1px solid var(--border-strong); border-radius:3px; padding:1px 5px; color:var(--ink-3);}
.nav-sep{font-family:var(--font-mono); font-size:8.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); padding:16px 12px 6px;}

.sidebar-foot{margin-top:auto; padding-top:12px; 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);}
/* lien discret Documentation (pied de sidebar) */
.doc-link{display:flex; align-items:center; gap:8px; background:none; border:none; color:var(--ink-3); font-size:11.5px; font-weight:600; padding:8px 12px; border-radius:var(--r-md); font-family:var(--font-body); transition:color .2s var(--ease), background .2s var(--ease); width:100%; text-align:left;}
.doc-link:hover{color:var(--ink); background:var(--surface);}
.doc-link .ic-svg{width:14px; height:14px; opacity:.7;}

.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:14px clamp(18px,3vw,40px) 0; background:transparent;
}
.topbar-left{display:flex; align-items:center; gap:12px; min-width:0;}
.topbar-actions{display:flex; gap:8px; align-items:center;}
.nav-toggle{display:none; background:var(--surface); border:none; color:var(--ink); border-radius:var(--r-md); width:38px; height:38px; align-items:center; justify-content:center; box-shadow:var(--sh-soft);}
.content{flex:1; overflow-y:auto; padding:18px clamp(18px,3vw,40px) 64px; scroll-behavior:smooth;}

/* fil d'Ariane v2 : le titre de page EST le héros typographique */
.crumb-nav{display:flex; align-items:baseline; gap:10px; min-width:0; overflow:hidden; white-space:nowrap;}
.crumb-nav b{color:var(--ink); font-weight:400; font-size:clamp(22px,2.6vw,30px); letter-spacing:.005em; font-family:var(--font-display); overflow:hidden; text-overflow:ellipsis; min-width:0;}

/* ---- COMPOSANTS ---- */
.grid{display:grid; gap:14px;}
.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;}}

/* cartes DÉ-FILETÉES : fond + rayon + ombre, zéro bordure */
.card{background:var(--surface); border:none; border-radius:var(--r-xl); padding:20px 22px; box-shadow:var(--sh-soft);}
.card.pad-lg{padding:24px;}
.card.feature{box-shadow:inset 0 2px 0 var(--carmin-bright), var(--sh-soft);}
.card-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:15px; flex-wrap:wrap;}
.card-head h3{font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);}
.card-note{font-size:11.5px; font-weight:500; color:var(--ink-3);}

/* KPI v2 : cliquables, sobres ; variante héros pour LE chiffre de l'écran */
.kpi{background:var(--surface); border:none; border-radius:var(--r-lg); padding:16px 18px; box-shadow:var(--sh-soft); position:relative; text-align:left; width:100%; font-family:var(--font-body); transition:transform .2s var(--ease), box-shadow .2s var(--ease);}
button.kpi:hover, a.kpi:hover{transform:translateY(-2px); box-shadow:var(--sh);}
.kpi-label{font-family:var(--font-mono); font-size:9.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);}
.kpi-value{font-family:var(--font-display); font-size:34px; letter-spacing:0; color:var(--ink); margin-top:8px; font-variant-numeric:tabular-nums; line-height:1;}
.kpi.hero{grid-column:1 / -1; padding:24px 26px; display:flex; align-items:baseline; gap:20px; flex-wrap:wrap;}
.kpi.hero .kpi-value{font-size:clamp(48px,6vw,64px); color:var(--ink); margin-top:0;}
.kpi.hero .kpi-label{font-size:10px;}
.kpi.hero .kpi-lead{font-size:13.5px; color:var(--ink-2); flex:1; min-width:200px;}
.kpi.accent .kpi-value{color:var(--carmin-text);}
.kpi-sub{font-size:11.5px; color:var(--ink-2); margin-top:6px;}

/* tables : filets horizontaux fins UNIQUEMENT (le seul filet conservé) */
table.data{width:100%; border-collapse:collapse; font-size:13px; font-weight:500;}
table.data th{text-align:left; font-family:var(--font-mono); font-size:9.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); padding:0 10px 10px; border-bottom:1px solid var(--border-strong);}
table.data td{padding: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 tbody tr:hover td{background:var(--surface-2);}
.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 */
.pill{display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.02em; border-radius:99px; padding:3px 10px;}
.pill.ok{background:rgba(78,155,111,.16); color:var(--pos);}
.pill.warn{background:rgba(210,163,55,.15); color:var(--gold);}
.pill.bad{background:var(--red); color:#F5EFE6;}
.pill.neutral{background:var(--surface-2); color:var(--ink-2);}
.pill.carmin{background:rgba(194,43,46,.15); color:var(--carmin-text);}

/* notes (rares en v2 : la pédagogie vit dans les tooltips) */
.note{background:var(--surface-2); border-radius:var(--r-md); padding:13px 15px; font-size:12.5px; line-height:1.6; color:var(--ink-2); box-shadow:inset 2px 0 0 var(--carmin-bright);}
.note .note-tag{display:block; font-family:var(--font-mono); font-size:9px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--carmin-text); margin-bottom:6px;}
.note b{color:var(--ink); font-weight:700;}
.note.warn{box-shadow:inset 2px 0 0 var(--gold);} .note.warn .note-tag{color:var(--gold);}
.note.pos{box-shadow:inset 2px 0 0 var(--pos);} .note.pos .note-tag{color:var(--pos);}

/* champs */
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px;}
.field label{font-size:11.5px; font-weight:600; color:var(--ink-2);}
.field input,.field select,.field textarea{border:none; border-radius:var(--r-md); padding:10px 12px; font-size:14px; font-weight:500; color:var(--ink); background:var(--surface-2); font-variant-numeric:tabular-nums; transition:box-shadow .2s var(--ease);}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; box-shadow:0 0 0 2px var(--carmin-bright);}
.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;}

/* boutons */
.btn{display:inline-flex; align-items:center; gap:7px; border:none; border-radius:var(--r-md); padding:10px 15px; font-size:13px; font-weight:600; letter-spacing:.005em; transition:background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); text-decoration:none;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--accent-strong); color:#F5EFE6; box-shadow:0 6px 18px -8px rgba(163,21,24,.55);}
.btn-primary:hover{background:var(--red-strong); box-shadow:0 8px 22px -8px rgba(163,21,24,.7);}
html[data-theme="light"] .btn-primary:hover{background:#7C0B0D;}
.btn-ghost{background:var(--surface-2); color:var(--ink);}
.btn-ghost:hover{background:var(--border);}
html[data-theme="light"] .btn-ghost:hover{background:var(--border);}
.btn-soft{background:var(--surface-2); color:var(--ink);}
.btn-soft:hover{background:var(--border);}
.btn-danger{background:transparent; color:var(--carmin-text); box-shadow:inset 0 0 0 1px var(--border-strong);}
.btn-danger:hover{background:rgba(194,43,46,.1); box-shadow:inset 0 0 0 1px rgba(194,43,46,.4);}
.btn-sm{padding:6px 11px; font-size:12px; border-radius:var(--r-sm); 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-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin:28px 0 14px; display:flex; align-items:center; gap:12px;}
.section-title::after{content:""; flex:1; height:1px; background:var(--border);}
.empty{padding:26px; text-align:center; color:var(--ink-3); font-size:13px;}
.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 v2 : icône par type + entrée à léger ressort, sortie douce */
.toast{position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(26px) scale(.96); background:#26241F; color:#F2EFE7; padding:12px 17px 12px 12px; border-radius:var(--r-lg); font-size:13px; font-weight:500; box-shadow:var(--sh); opacity:0; pointer-events:none; transition:opacity .22s ease, transform .38s cubic-bezier(.34,1.45,.64,1); z-index:300; display:flex; align-items:center; gap:11px; max-width:min(92vw,480px);}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0) scale(1); pointer-events:auto;}
.toast-ic{flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:rgba(78,155,111,.22); color:#7BC79B;}
.toast-ic .ic-svg{width:13px; height:13px;}
.toast.err{background:var(--red-strong); color:#fff;}
.toast.err .toast-ic{background:rgba(255,255,255,.16); color:#fff;}
.toast-undo{background:none; border:1px solid rgba(255,255,255,.3); color:#F2EFE7; border-radius:var(--r-sm); padding:6px 12px; 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 */
.modal-scrim{position:fixed; inset:0; background:rgba(5,5,6,.66); display:flex; align-items:center; justify-content:center; padding:20px; z-index:400; opacity:0; transition:opacity .2s ease; backdrop-filter:blur(3px);}
.modal-scrim[hidden]{display:none;}
.modal-scrim.show{opacity:1;}
.modal{background:var(--surface); border:none; border-radius:var(--r-xl); box-shadow:var(--sh); width:100%; max-width:460px; max-height:calc(100dvh - 40px); display:flex; flex-direction:column; transform:translateY(10px) scale(.985); transition:transform .24s var(--ease); overflow:hidden;}
.modal-scrim.show .modal{transform:none;}
.modal.wide{max-width:620px;}
.modal-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 22px 10px;}
.modal-head h3{font-size:20px;}
.modal-x{background:none; border:none; color:var(--ink-3); width:30px; height:30px; border-radius:var(--r-sm); display:grid; place-items:center;}
.modal-x:hover{background:var(--surface-2); color:var(--ink);}
.modal-body{padding:0 22px 6px; overflow-y:auto; min-height:0;}
.modal-body .field:last-child{margin-bottom:6px;}
.modal-text{font-size:13.5px; line-height:1.6; color:var(--ink-2); margin:2px 0 10px;}
.modal-foot{display:flex; justify-content:flex-end; gap:9px; padding:14px 22px 20px; flex-wrap:wrap;}
.btn-danger-solid{background:var(--red); color:#fff;}
.btn-danger-solid:hover{background:var(--red-strong);}
@media(max-width:560px){
  .modal-scrim{align-items:flex-end; padding:0;}
  .modal{max-width:none; border-radius:var(--r-xl) var(--r-xl) 0 0; max-height:92dvh;}
  .modal-foot .btn{flex:1 1 auto; justify-content:center;}
}

/* é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(140,135,125,.3); border-top-color:var(--ink);}
.skeleton{display:inline-block; border-radius:4px; background:linear-gradient(90deg,var(--surface-2) 25%,var(--border) 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(--carmin-bright); color:var(--carmin-text);}
.step.done{color:var(--ink-2);}
.step.done .step-dot{background:var(--forest); border-color:var(--forest); color:#F2EFE7;}
.step.fail{color:var(--carmin-text); font-weight:600;}
.step.fail .step-dot{background:var(--red); border-color:var(--red); color:#fff;}

/* segmented / switch / tag / pick — inchangés fonctionnellement */
.seg{display:flex; flex-wrap:wrap; gap:5px;}
.seg button{border:none; background:var(--surface-2); color:var(--ink-2); border-radius:var(--r-sm); padding:8px 13px; font-size:12.5px; font-weight:600; transition:background .2s var(--ease), color .2s var(--ease);}
.seg button:hover{color:var(--ink);}
.seg button.active{background:var(--accent-strong); color:#F5EFE6;}
.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,.35);}
.switch input:checked + .track{background:var(--accent-strong);}
.switch input:checked + .track + .knob{transform:translateX(18px);}
.tag{display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:700; letter-spacing:.03em; padding:3px 8px; border-radius:99px; background:var(--surface-2); color:var(--ink-2);}
.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-strong); border-color:var(--accent-strong);}
.pick:checked::after{content:""; position:absolute; left:5px; top:2px; width:4px; height:9px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);}

/* bar-list / donut / legend (contrat charts, inchangé) */
.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-body);}
.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; 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-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,.chart-tip{position:fixed; z-index:500; background:#26241F; color:#F2EFE7; padding:10px 13px; border-radius:var(--r-md); font-size:12px; line-height:1.55; max-width:270px; box-shadow:var(--sh); pointer-events:none; opacity:0; transform:translateY(3px); transition:opacity .15s ease, transform .15s ease;}
.tip.show,.chart-tip.show{opacity:1; transform:none;}
.tip b,.chart-tip b{color:#fff;}
[data-tip]{cursor:help;}

/* panneaux */
.panel{display:none; max-width:1180px; margin-inline:auto; animation:fade .32s var(--ease);}
.panel.active{display:block;}
@keyframes fade{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}

/* ── couche d'animations légères ─────────────────────────────
   Entrée en cascade des éléments de liste au rendu d'une vue.
   `backwards` = l'état initial s'applique pendant le délai ;
   cap à 9 éléments (au-delà, tout arrive ensemble — pas d'attente). */
@keyframes rise{from{opacity:0; transform:translateY(9px);} to{opacity:1; transform:none;}}
.kpis .kpi, .alist li, .feed li, .drow, .egrid .ecard, .vrow, .rcard,
.jfeed li, .cal-cell:not(.off), .agrow, .charge .ch-item,
.pgridp .ecard, .ptiles .ptile, .track .tstep{
  animation:rise .38s var(--ease) backwards;
}
.kpis .kpi:nth-child(1), .alist li:nth-child(1), .feed li:nth-child(1), .drow:nth-child(1), .egrid .ecard:nth-child(1), .vrow:nth-child(1), .rcard:nth-child(1), .jfeed li:nth-child(1), .agrow:nth-child(1), .charge .ch-item:nth-child(1), .pgridp .ecard:nth-child(1), .ptiles .ptile:nth-child(1), .track .tstep:nth-child(1){animation-delay:.02s;}
.kpis .kpi:nth-child(2), .alist li:nth-child(2), .feed li:nth-child(2), .drow:nth-child(2), .egrid .ecard:nth-child(2), .vrow:nth-child(2), .rcard:nth-child(2), .jfeed li:nth-child(2), .agrow:nth-child(2), .charge .ch-item:nth-child(2), .pgridp .ecard:nth-child(2), .ptiles .ptile:nth-child(2), .track .tstep:nth-child(2){animation-delay:.06s;}
.kpis .kpi:nth-child(3), .alist li:nth-child(3), .feed li:nth-child(3), .drow:nth-child(3), .egrid .ecard:nth-child(3), .vrow:nth-child(3), .rcard:nth-child(3), .jfeed li:nth-child(3), .agrow:nth-child(3), .charge .ch-item:nth-child(3), .pgridp .ecard:nth-child(3), .ptiles .ptile:nth-child(3), .track .tstep:nth-child(3){animation-delay:.1s;}
.alist li:nth-child(4), .feed li:nth-child(4), .drow:nth-child(4), .egrid .ecard:nth-child(4), .jfeed li:nth-child(4), .agrow:nth-child(4), .pgridp .ecard:nth-child(4), .track .tstep:nth-child(4){animation-delay:.14s;}
.alist li:nth-child(5), .feed li:nth-child(5), .drow:nth-child(5), .egrid .ecard:nth-child(5), .jfeed li:nth-child(5), .agrow:nth-child(5), .pgridp .ecard:nth-child(5){animation-delay:.18s;}
.alist li:nth-child(6), .feed li:nth-child(6), .drow:nth-child(6), .egrid .ecard:nth-child(6), .jfeed li:nth-child(6), .agrow:nth-child(6), .pgridp .ecard:nth-child(6){animation-delay:.22s;}
.drow:nth-child(n+7), .feed li:nth-child(n+7), .jfeed li:nth-child(n+7), .egrid .ecard:nth-child(n+7), .agrow:nth-child(n+7), .pgridp .ecard:nth-child(n+7){animation-delay:.25s;}
/* la grille du calendrier arrive d'un bloc léger, pas en vague de 31 */
.cal-cell:not(.off){animation-duration:.3s; animation-delay:.04s;}

/* jauges animables : rendues à 0, remplies via data-w après insertion */
.lp-bar > span[data-w]{width:0;}

/* responsive shell */
@media(max-width:820px){
  .sidebar{position:fixed; left:0; top:0; z-index:200; background:var(--canvas); transform:translateX(-100%); visibility:hidden; overflow-y:auto; transition:transform .26s var(--ease), visibility .26s; box-shadow:0 0 60px rgba(0,0,0,.6); width:264px;}
  .app.nav-open .sidebar{transform:none; visibility:visible;}
  .app.nav-open .scrim{display:block; position:fixed; inset:0; background:rgba(5,5,6,.55); z-index:150;}
  .nav-toggle{display:inline-flex;}
  .icon-btn.fold{display:none;} /* replier n'a pas de sens quand la sidebar est un drawer */
  .kpis{grid-template-columns:1fr 1fr;}
  input,select,textarea{font-size:16px !important;} /* anti-zoom iOS, TOUS les champs */
}
@media(max-width:560px){
  .topbar-actions .btn .lbl{display:none;}
  .kpi-value{font-size:26px;}
  .kpi.hero .kpi-value{font-size:44px;}
  /* le toast ne doit chevaucher ni le composer terrain ni la tab bar portail */
  .toast{bottom:calc(100px + env(safe-area-inset-bottom));}
}
@media(pointer:coarse){
  .btn-icon{width:40px; height:40px;}
  .btn-sm{padding:9px 13px;}
  .modal-x{width:40px; height:40px;}
  .seg button{padding:10px 14px;}
  .toast-undo{padding:9px 14px;}
  .fchip{min-height:40px; display:inline-flex; align-items:center;}
  .night-toggle{min-height:40px;}
  .pick{width:22px; height:22px;}
  .pick:checked::after{left:7px; top:3px; width:5px; height:11px;}
}

/* accessibilité */
:focus-visible{outline:2px solid var(--carmin-bright); 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 */
.icon-btn{width:38px; height:38px; border-radius:var(--r-md); border:none; background:var(--surface); color:var(--ink-2); display:grid; place-items:center; flex:none; box-shadow:var(--sh-soft); transition:color .2s var(--ease);}
.icon-btn:hover{color:var(--ink);}
.icon-btn .ic-svg{width:17px; height:17px;}

/* onglets : soulignement qui s'épaissit (signature Encre & Archive) */
.tabs{display:flex; gap:2px; border-bottom:1px solid var(--border); margin-bottom:22px; overflow-x:auto; scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);}
.tabs::-webkit-scrollbar{display:none;}
.tab{background:none; border:none; padding:10px 14px; font-size:13.5px; font-weight:600; color:var(--ink-3); border-bottom:2px solid transparent; margin-bottom:-1px; font-family:var(--font-body); transition:color .2s var(--ease), border-color .2s var(--ease); white-space:nowrap;}
.tab:hover{color:var(--ink); border-bottom-color:var(--border-strong);}
.tab.active{color:var(--ink); border-bottom-color:var(--red);}

/* thème (pied de sidebar) */
.side-theme{display:flex; align-items:center; justify-content:space-between; width:100%; background:var(--surface); border:none; border-radius:var(--r-md); padding:9px 11px; color:var(--ink-2); font-size:11.5px; font-weight:600; cursor:pointer; font-family:var(--font-body); box-shadow:var(--sh-soft);}
.side-theme:hover{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(--accent-strong); position:relative; flex:none; transition:background .18s;}
.side-theme .switch::after{content:""; position:absolute; top:2px; left:16px; width:14px; height:14px; border-radius:50%; background:#fff; transition:left .18s; box-shadow:0 1px 2px rgba(0,0,0,.3);}
html[data-theme="light"] .side-theme .switch{background:var(--border-strong);}
html[data-theme="light"] .side-theme .switch::after{left:2px;}

/* sidebar repliable */
.sidebar{transition:width .28s var(--ease), padding .28s var(--ease), transform .26s var(--ease), visibility .26s; overflow-x:hidden;}
.nav-item,.brand{white-space:nowrap;}
.nav-label,.brand-name,.brand-sub{transition:opacity .16s ease .12s;}
.side-card,.sidebar-foot,.nav-sep{transition:opacity .16s ease .12s;}
.app.nav-min .sidebar{width:66px; padding-left:12px; padding-right:12px;}
.app.nav-min .nav-label,.app.nav-min .brand-name,.app.nav-min .brand-sub,.app.nav-min .soon-tag{opacity:0;}
.app.nav-min .side-card,.app.nav-min .sidebar-foot,.app.nav-min .nav-sep{opacity:0; visibility:hidden;}

/* ============================================================
   DUODESK — composants métier v2
   ============================================================ */

/* liste des dossiers */
.pgroup{margin-bottom:26px;}
.pgroup-head{display:flex; align-items:center; gap:10px; margin-bottom:10px;}
.pgroup-head .pg-title{font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2);}
.pgroup-head .pg-count{font-family:var(--font-mono); font-size:10px; color:var(--ink-3);}
.pgroup-head::after{content:""; flex:1; height:1px; background:var(--border);}
.drow{display:flex; align-items:center; gap:14px; padding:14px 17px; background:var(--surface); border:none; border-radius:var(--r-lg); margin-bottom:8px; cursor:pointer; box-shadow:var(--sh-soft); transition:transform .2s var(--ease), box-shadow .2s var(--ease);}
.drow:hover{transform:translateY(-1px); box-shadow:var(--sh);}
.drow .dref{font-family:var(--font-mono); font-size:11.5px; color:var(--carmin-text); flex:none; width:88px;}
.drow .dtitre{flex:1; min-width:0; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.drow .dtitre .dsub{display:block; font-weight:500; font-size:11.5px; color:var(--ink-3); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.drow .dwho{flex:none; display:flex; gap:5px;}
.drow .dtype{flex:none;}
@media(max-width:560px){
  .drow{flex-wrap:wrap; gap:6px 10px; padding:13px 15px;}
  .drow .dref{width:auto; order:1;}
  .drow .dpill{order:2; margin-left:auto;}
  .drow .dtitre{order:3; flex-basis:100%; white-space:normal;}
  .drow .dwho,.drow .dtype{display:none;}
}

.who{width:27px; height:27px; border-radius:50%; background:var(--surface-2); color:var(--ink-2); font-size:9.5px; font-weight:700; display:grid; place-items:center;}

/* fiche dossier */
.dhead{display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:16px; flex-wrap:wrap;}
.dhead .dh-ref{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--carmin-text);}
.dhead h2{font-size:clamp(24px,3vw,32px); margin-top:6px; line-height:1.15; text-wrap:balance;}
.dhead .dh-sub{font-size:12.5px; color:var(--ink-2); margin-top:7px;}
.dhead .dh-actions{display:flex; gap:8px; flex-wrap:wrap;}

/* stepper : complet en desktop, ligne compacte en mobile */
.dsteps{display:flex; gap:0; margin:4px 0 20px;}
.dstep{flex:1; min-width:0; text-align:center; position:relative; padding-top:20px; font-size:11px; color:var(--ink-3); border:none; background:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.dstep::before{content:""; position:absolute; top:7px; left:0; right:0; height:2px; background:var(--border-strong);}
.dstep::after{content:""; position:absolute; top:1px; left:calc(50% - 7px); width:14px; height:14px; border-radius:50%; background:var(--surface); border:2px solid var(--border-strong);}
.dstep.done::before{background:var(--forest);}
.dstep.done::after{background:var(--forest); border-color:var(--forest);}
.dstep.now::after{background:var(--red); border-color:var(--red);}
.dstep.now{color:var(--ink); font-weight:600;}
.stepline{margin:4px 0 20px;}
.stepline .sl-txt{font-size:13px; color:var(--ink); font-weight:600; margin-bottom:8px;}
.stepline .sl-txt .mono{color:var(--carmin-text); margin-right:8px;}
@media(max-width:560px){ .dsteps{display:none;} }
@media(min-width:561px){ .stepline{display:none;} }

/* jalons du mandat (progressive disclosure) */
.jalons{display:flex; flex-direction:column;}
.jalon{display:flex; align-items:center; gap:11px; padding:9px 0; border-bottom:1px solid var(--border); font-size:13px;}
.jalon:last-child{border-bottom:none;}
.jalon .ic-svg{width:15px; height:15px; flex:none;}
.jalon.done{color:var(--ink);} .jalon.done .ic-svg{color:var(--pos);}
.jalon.next{color:var(--ink-2);} .jalon.next .ic-svg{color:var(--gold);}
.jalon .jd{margin-left:auto; font-variant-numeric:tabular-nums; color:var(--ink-3); font-size:12px; white-space:nowrap;}

/* gate replié une fois tranché */
.gate{border-radius:var(--r-xl); padding:18px 20px; background:var(--surface); box-shadow:inset 2px 0 0 var(--gold), var(--sh-soft);}
.gate.ok{box-shadow:inset 2px 0 0 var(--pos), var(--sh-soft);}
.gate.refuse{box-shadow:inset 2px 0 0 var(--red), var(--sh-soft);}
.gate .g-title{font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:10px; font-weight:600;}
.gcheck{display:flex; gap:9px; align-items:center; padding:6px 0; font-size:13px; color:var(--ink);}
details.gate-fold summary{cursor:pointer; list-style:none; display:flex; align-items:center; gap:9px; font-size:13px; font-weight:600;}
details.gate-fold summary::-webkit-details-marker{display:none;}
details.gate-fold summary .chev{margin-left:auto; transition:transform .2s var(--ease); color:var(--ink-3);}
details.gate-fold[open] summary .chev{transform:rotate(90deg);}
details.gate-fold .gate-body{margin-top:10px; font-size:12.5px; color:var(--ink-2); line-height:1.6;}

/* compteur LPGA — pièce maîtresse de la fiche assurance */
.lpga{display:flex; align-items:center; gap:24px; flex-wrap:wrap;}
.lpga .lp-num{font-family:var(--font-display); font-size:clamp(48px,5vw,64px); color:var(--ink); font-variant-numeric:tabular-nums; line-height:1;}
.lpga .lp-num small{font-size:22px; color:var(--ink-3); font-style:italic;}
.lpga .lp-bar{flex:1; min-width:170px; height:14px; border-radius:99px; background:var(--surface-2); overflow:hidden; position:relative;}
.lpga .lp-bar>span{position:absolute; inset:0 auto 0 0; border-radius:99px; background:var(--pos); transition:width .6s var(--ease);}
.lpga.warn .lp-bar>span{background:var(--gold);}
.lpga.bad .lp-bar>span{background:var(--red);}
.lpga .lp-meta{font-size:11.5px; color:var(--ink-3); width:100%;}

/* journal */
.jfeed{list-style:none; margin:0; padding:0;}
.jfeed li{display:flex; gap:14px; padding:12px 0; border-bottom:1px solid var(--border); font-size:13.5px;}
.jfeed li:last-child{border-bottom:none;}
.jfeed time{flex:none; width:52px; font-family:var(--font-mono); font-size:11.5px; color:var(--carmin-text); padding-top:2px;}
.jfeed .jt{flex:1; min-width:0; color:var(--ink); line-height:1.55;}
.jfeed .jmeta{font-size:11px; color:var(--ink-3); margin-top:4px;}
.jfeed .jmeta button{background:none; border:none; color:var(--ink-3); font-size:11px; padding:0; text-decoration:underline; text-underline-offset:2px; cursor:pointer;}
.jfeed .jmeta button:hover{color:var(--ink);}
.jfeed .jdetail{font-size:11px; color:var(--ink-3); margin-top:6px; padding:8px 10px; background:var(--surface-2); border-radius:var(--r-sm); line-height:1.6;}
.jfeed .jrect{color:var(--gold); font-family:var(--font-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; border:1px solid var(--gold); border-radius:3px; padding:0 4px; margin-right:6px;}
.jfeed .jphoto{margin-top:8px; display:flex; gap:8px; flex-wrap:wrap;}
.jfeed .jphoto img{width:110px; height:70px; object-fit:cover; border-radius:var(--r-sm); cursor:pointer; transition:transform .2s var(--ease);}
.jfeed .jphoto img:hover{transform:scale(1.03);}

/* coffre à preuves */
.egrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px;}
.ecard{background:var(--surface); border:none; border-radius:var(--r-lg); overflow:hidden; cursor:pointer; box-shadow:var(--sh-soft); transition:transform .2s var(--ease), box-shadow .2s var(--ease); text-decoration:none; color:inherit; display:block;}
.ecard:hover{transform:translateY(-2px); box-shadow:var(--sh);}
.ecard .eimg{aspect-ratio:16/10; background:var(--surface-2); display:grid; place-items:center; color:var(--ink-3); overflow:hidden;}
.ecard .eimg img{width:100%; height:100%; object-fit:cover; display:block;}
.ecard .ebody{padding:11px 13px;}
.ecard .eleg{font-size:12.5px; font-weight:600; color:var(--ink); line-height:1.4; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.ecard .ehash{font-family:var(--font-mono); font-size:10px; color:var(--ink-3); margin-top:6px;}
.ecard .etags{display:flex; gap:5px; margin-top:8px; flex-wrap:wrap;}

/* cachet d'intégrité : le hash devient un objet de design */
.seal{background:var(--surface-2); border-radius:var(--r-md); padding:11px 13px; margin:6px 0; cursor:pointer; transition:background .2s var(--ease);}
.seal:hover{background:var(--border);}
.seal .seal-top{display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px;}
.seal .seal-top .pill{margin-left:auto;}
.seal .seal-hash{font-family:var(--font-mono); font-size:11px; color:var(--ink); word-spacing:2px; word-break:break-all; line-height:1.7;}
.seal.broken .seal-hash{color:var(--carmin-text);}

/* chaîne de custody */
.custody{list-style:none; margin:0; padding:0;}
.custody li{display:flex; gap:10px; padding:8px 0; border-bottom:1px dashed var(--border); font-size:12px;}
.custody li:last-child{border-bottom:none;}
.custody .cseq{flex:none; width:20px; height:20px; border-radius:50%; background:var(--surface-2); font-family:var(--font-mono); font-size:9px; display:grid; place-items:center; color:var(--ink-2);}
.custody .cbody{flex:1; min-width:0;}
.custody .chash{font-family:var(--font-mono); font-size:9px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px;}
.custody li.broken .cseq{background:var(--red); color:#fff;}
.custody li.broken .cbody{color:var(--carmin-text);}
details.fold{margin-top:10px;}
details.fold summary{cursor:pointer; list-style:none; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); padding:6px 0; display:flex; align-items:center; gap:8px;}
details.fold summary::-webkit-details-marker{display:none;}
details.fold summary:hover{color:var(--ink);}
details.fold summary .chev{transition:transform .2s var(--ease);}
details.fold[open] summary .chev{transform:rotate(90deg);}

/* verdict d'intégrité */
.verd{border-radius:var(--r-lg); padding:15px 17px; display:flex; gap:12px; align-items:flex-start; margin-bottom:14px;}
.verd .ic-svg{width:22px; height:22px; flex:none; margin-top:1px;}
.verd.ok{background:rgba(78,155,111,.12); color:var(--pos);}
.verd.fail{background:rgba(194,43,46,.12); color:var(--carmin-text);}
.verd .vt{font-family:var(--font-display); font-size:19px;}
.verd .vd{font-size:12px; margin-top:4px; color:var(--ink-2);}

/* mode terrain */
.terrain{max-width:560px; margin-inline:auto;}
.terrain .t-vac{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px;}
.terrain .t-actions{position:sticky; bottom:0; background:linear-gradient(transparent, var(--canvas) 26%); padding:12px 0 calc(10px + env(safe-area-inset-bottom)); }
.terrain textarea{width:100%; min-height:76px; resize:vertical;}
.terrain .t-btn{flex:1; padding:14px; font-size:14.5px; justify-content:center; border-radius:var(--r-lg);}
.tphoto-btn{position:relative; overflow:hidden;}
.tphoto-btn input{position:absolute; inset:0; opacity:0; cursor:pointer;}
/* composer replié par défaut : une barre, se déplie au focus */
.composer .c-full{display:none;}
.composer.open .c-full{display:block;}
.composer .c-bar{display:flex; gap:9px;}
.composer .c-bar input{flex:1; border:none; border-radius:var(--r-lg); padding:13px 15px; background:var(--surface); color:var(--ink); box-shadow:var(--sh-soft);}
.composer .c-bar input:focus{outline:none; box-shadow:0 0 0 2px var(--carmin-bright);}
.composer.open .c-bar{display:none;}
.night-toggle{border:none; background:var(--surface); color:var(--ink-2); border-radius:var(--r-md); padding:8px 12px; font-size:11.5px; font-weight:600; display:inline-flex; gap:6px; align-items:center; box-shadow:var(--sh-soft);}
body.night{--canvas:#000; --surface:#0A0A0B; --surface-2:#101011; --border:#1A191B; --border-strong:#28262A; --ink:#B7B1A4; --ink-2:#7E796F; --ink-3:#5C574F;}
body.night img{filter:brightness(.55);}
body.night .night-toggle{color:var(--carmin-text); box-shadow:inset 0 0 0 1px var(--carmin-bright);}

.draft-dot{display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold);}
.draft-dot::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--gold);}

/* vacations du terrain (hub) */
.vrow{display:flex; align-items:center; gap:12px; padding:14px 16px; background:var(--surface); border-radius:var(--r-lg); margin-bottom:8px; box-shadow:var(--sh-soft);}
.vrow .vinfo{flex:1; min-width:0;}
.vrow .vinfo b{display:block; font-size:14px;}
.vrow .vinfo span{font-size:11.5px; color:var(--ink-3);}

/* lightbox pièce */
.modal .evbig{width:100%; border-radius:var(--r-md); display:block; margin-bottom:12px;}

/* messagerie */
.mfeed{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
.mfeed li{max-width:82%; border-radius:var(--r-lg); padding:10px 13px; font-size:13px; line-height:1.55;}
.mfeed li.client{align-self:flex-start; background:var(--surface-2);}
.mfeed li.agency{align-self:flex-end; background:rgba(194,43,46,.13);}
.mfeed .mwho{font-family:var(--font-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-bottom:4px;}

/* feed activité */
.feed{list-style:none; margin:0; padding:0;}
.feed li{display:flex; gap:10px; padding:9px 0; border-bottom:1px solid var(--border); font-size:12.5px; align-items:baseline; cursor:pointer;}
.feed li:last-child{border-bottom:none;}
.feed time{flex:0 0 74px; color:var(--ink-3); font-family:var(--font-mono); font-size:10.5px;}
.feed li:hover .ft{color:var(--carmin-text);}

/* alertes / à traiter */
.alist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px;}
.alist li{display:flex; gap:11px; align-items:flex-start; border-radius:var(--r-lg); padding:12px 15px; font-size:13px; background:var(--surface); cursor:pointer; box-shadow:var(--sh-soft); transition:transform .2s var(--ease), box-shadow .2s var(--ease);}
.alist li:hover{transform:translateY(-1px); box-shadow:var(--sh);}
.alist .ic-svg{width:16px; height:16px; flex:none; margin-top:1px;}
.alist li.danger{box-shadow:inset 2px 0 0 var(--red), var(--sh-soft);} .alist li.danger .ic-svg{color:var(--carmin-text);}
.alist li.warn{box-shadow:inset 2px 0 0 var(--gold), var(--sh-soft);} .alist li.warn .ic-svg{color:var(--gold);}
.alist li.info{box-shadow:var(--sh-soft);} .alist li.info .ic-svg{color:var(--ink-3);}

/* filtres */
.fchip{font-size:12.5px; font-weight:600; border:none; border-radius:99px; padding:7px 14px; background:var(--surface); color:var(--ink-2); cursor:pointer; box-shadow:var(--sh-soft); transition:background .2s var(--ease), color .2s var(--ease);}
.fchip.on{background:var(--accent-strong); color:#F5EFE6;}
.filters{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px;}

.immut{font-family:var(--font-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); display:inline-flex; align-items:center; gap:6px;}
.live-dot{display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:9px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);}

/* ============================================================
   PLANIFICATION — calendrier mensuel (admin)
   ============================================================ */
.cal-top{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap;}
.cal-top .cal-mois{font-family:var(--font-display); font-size:clamp(22px,2.4vw,28px); text-transform:capitalize;}
.cal-top .cal-navi{display:flex; gap:6px;}
.cal{display:grid; grid-template-columns:repeat(7,1fr); gap:6px;}
.cal .cal-dow{font-family:var(--font-mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); text-align:center; padding:4px 0;}
.cal-cell{min-height:96px; background:var(--surface); border-radius:var(--r-md); padding:7px 8px; cursor:pointer; box-shadow:var(--sh-soft); transition:transform .2s var(--ease), box-shadow .2s var(--ease); display:flex; flex-direction:column; gap:4px; overflow:hidden;}
.cal-cell:hover{transform:translateY(-1px); box-shadow:var(--sh);}
.cal-cell.off{background:transparent; box-shadow:none; cursor:default; opacity:.35;}
.cal-cell.off:hover{transform:none;}
.cal-cell .cd{font-family:var(--font-mono); font-size:10.5px; color:var(--ink-3); font-variant-numeric:tabular-nums;}
.cal-cell.today .cd{color:var(--carmin-text); font-weight:700;}
.cal-cell.today{box-shadow:inset 0 2px 0 var(--carmin-bright), var(--sh-soft);}
.cal-chip{font-size:10px; font-weight:600; border-radius:5px; padding:2px 6px; background:var(--surface-2); color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; box-shadow:inset 2px 0 0 var(--border-strong);}
.cal-chip.PLANIFIEE{box-shadow:inset 2px 0 0 var(--gold);}
.cal-chip.EN_COURS{box-shadow:inset 2px 0 0 var(--red); color:var(--ink);}
.cal-chip.TERMINEE{box-shadow:inset 2px 0 0 var(--pos); opacity:.7;}
.cal-more{font-family:var(--font-mono); font-size:9px; color:var(--ink-3);}
/* charge du mois par détective */
.charge{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px;}
.charge .ch-item{display:flex; align-items:center; gap:9px; background:var(--surface); border-radius:99px; padding:6px 13px 6px 7px; box-shadow:var(--sh-soft); font-size:12px; color:var(--ink-2);}
.charge .ch-item b{color:var(--ink); font-variant-numeric:tabular-nums;}
/* agenda mobile */
.agrow{display:flex; gap:12px; padding:11px 0; border-bottom:1px solid var(--border); align-items:flex-start;}
.agrow:last-child{border-bottom:none;}
.agrow .ad{flex:none; width:44px; text-align:center;}
.agrow .ad b{display:block; font-family:var(--font-display); font-size:22px; line-height:1;}
.agrow .ad span{font-family:var(--font-mono); font-size:9px; text-transform:uppercase; color:var(--ink-3);}
.agrow .av{flex:1; min-width:0; display:flex; flex-direction:column; gap:5px;}

/* ============================================================
   RÉGLAGES — sélecteur d'apparence à mini-aperçus
   ============================================================ */
.theme-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px;}
.theme-pick{background:var(--surface); border:none; border-radius:var(--r-lg); padding:12px; cursor:pointer; box-shadow:var(--sh-soft); text-align:left; font-family:var(--font-body); color:var(--ink); transition:transform .2s var(--ease), box-shadow .2s var(--ease);}
.theme-pick:hover{transform:translateY(-2px); box-shadow:var(--sh);}
.theme-pick.on{box-shadow:0 0 0 2px var(--carmin-bright), var(--sh-soft);}
.theme-pick .tp-prev{display:flex; height:74px; border-radius:var(--r-sm); overflow:hidden; margin-bottom:10px; border:1px solid var(--border);}
.theme-pick .tp-side{width:26%;}
.theme-pick .tp-page{flex:1; display:flex; flex-direction:column; gap:5px; padding:8px;}
.theme-pick .tp-page i{display:block; height:8px; border-radius:3px;}
.theme-pick .tp-name{font-size:13px; font-weight:600;}
.theme-pick .tp-sub{font-size:11px; color:var(--ink-3); margin-top:2px;}

/* rangée-carte mobile (remplace les tables ≤560px) */
.rcard{background:var(--surface); border-radius:var(--r-lg); padding:13px 15px; margin-bottom:9px; box-shadow:var(--sh-soft);}
.rcard .rc-top{display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:6px;}
.rcard .rc-top b{font-size:13.5px;}
.rcard .rc-kv{display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--ink-2); font-variant-numeric:tabular-nums;}
.rcard .rc-act{margin-top:10px;}
.rcard .rc-act .btn{width:100%; justify-content:center;}

/* ============================================================
   MODE PRÉSENTATION (rendez-vous client, projetable)
   ============================================================ */
.present{position:fixed; inset:0; z-index:600; background:#0A0A0B; color:#F2EFE7; display:flex; flex-direction:column; animation:prIn .35s var(--ease);}
@keyframes prIn{from{opacity:0;} to{opacity:1;}}
.present .pr-top{display:flex; justify-content:space-between; align-items:center; padding:22px clamp(20px,4vw,54px); font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:#8B857A;}
.present .pr-top button{background:none; border:1px solid #3A383C; color:#B9B3A6; border-radius:8px; padding:8px 14px; font-size:11px; letter-spacing:.08em;}
.present .pr-top button:hover{color:#F2EFE7; border-color:#8B857A;}
.present .pr-body{flex:1; display:flex; flex-direction:column; justify-content:center; padding:0 clamp(20px,6vw,90px); overflow:hidden;}
.present .pr-kicker{font-family:var(--font-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:#E0605F; margin-bottom:18px;}
.present h1{font-family:var(--font-display); font-weight:400; font-size:clamp(34px,5.5vw,64px); line-height:1.08; max-width:20ch; text-wrap:balance;}
.present .pr-sub{font-size:clamp(14px,1.6vw,18px); color:#B9B3A6; margin-top:16px; max-width:52ch;}
.present .pr-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:clamp(16px,3vw,40px); margin-top:8px;}
.present .pr-stat .v{font-family:var(--font-display); font-size:clamp(44px,6vw,84px); line-height:1; font-variant-numeric:tabular-nums;}
.present .pr-stat .l{font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:#8B857A; margin-top:10px;}
.present .pr-steps{display:flex; flex-direction:column; gap:18px; margin-top:6px;}
.present .pr-step{display:flex; gap:18px; align-items:center; font-size:clamp(17px,2vw,24px); color:#8B857A; transition:color .4s var(--ease);}
.present .pr-step .pd{width:15px; height:15px; border-radius:50%; border:2px solid #3A383C; flex:none; transition:all .4s var(--ease);}
.present .pr-step.done{color:#B9B3A6;} .present .pr-step.done .pd{background:#55524A; border-color:#55524A;}
.present .pr-step.now{color:#F2EFE7; font-family:var(--font-display); font-size:clamp(22px,2.6vw,30px);} .present .pr-step.now .pd{background:#C22B2E; border-color:#C22B2E; box-shadow:0 0 0 6px rgba(194,43,46,.18);}
.present .pr-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; margin-top:8px; max-height:52vh; overflow:auto;}
.present .pr-grid img{width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:10px;}
.present .pr-grid .cap{font-size:12px; color:#B9B3A6; margin-top:7px;}
.present .pr-foot{display:flex; justify-content:space-between; align-items:center; padding:20px clamp(20px,4vw,54px); color:#8B857A; font-size:12px;}
.present .pr-foot .pr-navbtns{display:flex; gap:8px;}
.present .pr-foot button{background:#151415; border:none; color:#F2EFE7; border-radius:10px; width:46px; height:46px; display:grid; place-items:center; cursor:pointer; transition:background .2s var(--ease);}
.present .pr-foot button:hover{background:#1E1D1F;}
.present .pr-dots{display:flex; gap:7px;}
.present .pr-dots span{width:7px; height:7px; border-radius:50%; background:#3A383C; transition:background .3s;}
.present .pr-dots span.on{background:#C22B2E;}

/* ============================================================
   PORTAIL CLIENT v2 — dashboard sidebar (coquille Infinis)
   ============================================================ */
.papp{display:flex; min-height:100vh; min-height:100dvh;}
.pside{width:272px; flex:none; display:flex; flex-direction:column; padding:24px 16px 18px; border-right:1px solid var(--border); position:sticky; top:0; height:100vh; height:100dvh;}
.pside .pclient{background:var(--surface); border-radius:var(--r-lg); padding:13px 14px; margin:18px 0; box-shadow:var(--sh-soft);}
.pside .pclient .pc-l{font-family:var(--font-mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);}
.pside .pclient .pc-n{font-size:14px; font-weight:700; color:var(--ink); margin-top:6px;}
.pside .pclient .pc-d{font-family:var(--font-mono); font-size:10.5px; color:var(--carmin-text); margin-top:3px;}
.pnav{display:flex; flex-direction:column; gap:2px;}
.pnav button{display:flex; align-items:center; gap:11px; width:100%; text-align:left; padding:11px 12px; border:none; background:none; border-radius:var(--r-md); color:var(--ink-2); font-size:13.5px; font-weight:600; transition:background .2s var(--ease), color .2s var(--ease);}
.pnav button:hover{background:var(--surface); color:var(--ink);}
.pnav button.active{background:var(--surface); color:var(--ink); box-shadow:inset 2px 0 0 var(--red), var(--sh-soft);}
.pnav button .ic-svg{width:17px; height:17px; opacity:.65;}
.pnav button.active .ic-svg{color:var(--carmin-text); opacity:1;}
.pn-badge{margin-left:auto; background:var(--red); color:#fff; font-size:10px; font-weight:700; border-radius:99px; min-width:19px; height:19px; display:grid; place-items:center; padding:0 5px;}
.pcontact{margin-top:auto; background:var(--surface); border-radius:var(--r-lg); padding:14px; box-shadow:var(--sh-soft); font-size:12px; color:var(--ink-2);}
.pcontact .pc-t{font-family:var(--font-mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:8px;}
.pcontact b{color:var(--ink); display:block; margin-bottom:2px;}
.pcontact a{display:inline-flex; margin-top:8px; font-size:12px;}
.pmain{flex:1; min-width:0; display:flex; flex-direction:column; height:100vh; height:100dvh; overflow:hidden;}
.ptop{display:flex; align-items:center; gap:12px; padding:18px clamp(18px,3vw,40px) 0;}
.ptop h1{font-size:clamp(22px,2.6vw,30px);}
.pburger{display:none;}
.pcontent{flex:1; overflow-y:auto; padding:16px clamp(18px,3vw,40px) 90px;}
.psec{display:none; max-width:860px; animation:fade .32s var(--ease);}
.psec.active{display:block;}
.p-hello{font-family:var(--font-display); font-size:clamp(26px,3.4vw,38px); line-height:1.12; margin-bottom:6px; text-wrap:balance;}
.p-hello em{color:var(--carmin-text); font-style:italic;}
.p-lead{color:var(--ink-2); font-size:14px; margin:0 0 22px;}
/* tracker d'étapes client (grand format) */
.track{display:flex; flex-direction:column; gap:0; margin:6px 0 2px;}
.tstep{display:flex; gap:16px; align-items:flex-start; position:relative; padding-bottom:22px;}
.tstep::before{content:""; position:absolute; left:9px; top:22px; bottom:0; width:2px; background:var(--border);}
.tstep:last-child{padding-bottom:0;} .tstep:last-child::before{display:none;}
.tstep .td{width:20px; height:20px; border-radius:50%; border:2px solid var(--border-strong); background:var(--surface); flex:none; z-index:1; transition:all .3s var(--ease);}
.tstep.done .td{background:var(--forest); border-color:var(--forest);}
.tstep.now .td{background:var(--red); border-color:var(--red); box-shadow:0 0 0 5px rgba(194,43,46,.16);}
.tstep .tl{font-size:14.5px; font-weight:600; color:var(--ink-3); padding-top:0;}
.tstep.done .tl{color:var(--ink-2);}
.tstep.now .tl{color:var(--ink); font-size:16px;}
.tstep .ts{font-size:12px; color:var(--ink-3); margin-top:3px; max-width:46ch;}
.next-box{background:var(--surface-2); border-radius:var(--r-lg); padding:14px 16px; margin-top:16px; box-shadow:inset 2px 0 0 var(--carmin-bright);}
.next-box .nb-t{font-family:var(--font-mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--carmin-text); margin-bottom:6px;}
.next-box p{margin:0; font-size:13.5px; color:var(--ink);}
.ptiles{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px;}
.ptile{background:var(--surface); border:none; border-radius:var(--r-lg); padding:15px 16px; text-align:left; cursor:pointer; box-shadow:var(--sh-soft); transition:transform .2s var(--ease), box-shadow .2s var(--ease); font-family:var(--font-body); color:var(--ink);}
.ptile:hover{transform:translateY(-2px); box-shadow:var(--sh);}
.ptile .pt-n{font-size:22px; font-family:var(--font-display); color:var(--carmin-text);}
.ptile .pt-l{font-size:12.5px; color:var(--ink-2); margin-top:4px;}
.dgroup-t{font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin:20px 0 10px;}
.pgridp{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:13px;}
/* remise du rapport, mise en scène */
.rhero{display:flex; gap:18px; align-items:flex-start; padding:6px 0;}
.rhero .ric{flex:none; width:54px; height:62px; color:var(--carmin-bright);}
.rhero h3{font-family:var(--font-display); font-size:24px; margin-bottom:4px;}
.rhero .rd{font-size:12.5px; color:var(--ink-2);}
.rseal{display:inline-flex; align-items:center; gap:8px; margin-top:10px; background:rgba(78,155,111,.12); color:var(--pos); border-radius:99px; padding:5px 12px; font-size:11.5px; font-weight:700;}
.rex{font-size:11px; color:var(--ink-3); margin-top:8px; max-width:52ch;}
/* bottom tab bar mobile */
.ptabs{display:none;}
@media(max-width:820px){
  .pside{position:fixed; left:0; top:0; z-index:200; background:var(--canvas); transform:translateX(-100%); visibility:hidden; transition:transform .26s var(--ease), visibility .26s; box-shadow:0 0 60px rgba(0,0,0,.6);}
  .papp.nav-open .pside{transform:none; visibility:visible;}
  .papp.nav-open .pscrim{display:block; position:fixed; inset:0; background:rgba(5,5,6,.55); z-index:150;}
  .pburger{display:grid;}
  .pcontent{padding-bottom:calc(86px + env(safe-area-inset-bottom));}
  .ptabs{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:180; background:var(--surface); box-shadow:0 -8px 30px rgba(0,0,0,.35); padding:6px 4px calc(6px + env(safe-area-inset-bottom));}
  .ptabs button{flex:1; background:none; border:none; color:var(--ink-3); font-size:9.5px; font-weight:600; display:flex; flex-direction:column; align-items:center; gap:4px; padding:7px 2px; border-radius:var(--r-md); position:relative;}
  .ptabs button.active{color:var(--carmin-text);}
  .ptabs button .ic-svg{width:20px; height:20px;}
  .ptabs .pn-badge{position:absolute; top:2px; right:calc(50% - 20px); margin:0;}
  .ptiles{grid-template-columns:1fr;}
}
.pscrim{display:none;}