/* =====================================================================
   summit-inku.css — Summit repeint au « Registre » de l'ERP (13 oct. 2026)
   Source de verite : ../ERP/admin-inku.css. Maquette validee :
   ../_erp-refonte/02_Harmonisation_Summit_Create.html (Summit · tableau / demandes actives).

   Chargee APRES le <style> d'index.html : elle redefinit les variables de Summit
   (tout ce qui s'en sert, styles en ligne compris, suit) puis habille les composants.
   Aucun ID ni classe interroge par le JS ne change. Bumper ?v= dans index.html a
   chaque modification.

   Regles : papier / encre / UN vermillon (rush, action principale au survol, page
   ouverte, ce qui bloque). Zero rayon, zero ombre, zero degrade (seule exception : la
   trame de points des donnees). Statuts par la FORME (tampons). L'orange disparait,
   SAUF pour « prioritaire » (--prio, retabli le 14 oct. 2026 a la demande de Maxime).
   ===================================================================== */

:root {
  --paper: #FFF9F7; --paper-2: #F2ECE4; --ink: #14110F; --ink-2: #1E1B19;
  --lavis: #6B625B; --lavis-ink: #A79E96; --tert: #978D85;
  --rule: #C9BEB3; --rule2: #E4DBD2;
  --seal: #E52A20; --seal-hover: #C9231B; --seal-soft: #F8E1DE;
  --ok: #2E7D4F; --warning: #9A6B00;
  --c-summit: #00A3D9;
  --card: #FFFFFF;
  --ink-mid: #4A423D;      /* 2e ton d'encre des graphiques (expediee) */
  --ink-k: #14110F;        /* canal K des niveaux d'encre */
  --d-new: #C9BEB3; --d-dead: #E4DBD2;   /* tranches « a faire » / « rejetee » */
  /* PRIORITAIRE = orange (14 oct. 2026, demande de Maxime) : rush = vermillon (--seal, teinte 3°),
     prioritaire = orange (teinte 27°), distincts d'un coup d'oeil. Base : l'ancien orange de Summit
     (#e07b1a), pousse plus vif. --prio = aplats/filets (3,1:1 sur papier), --prio-text = texte
     (4,6:1 sur papier), --prio-on = texte pose SUR un aplat orange. */
  --prio: #EA6A00; --prio-text: #B85500; --prio-on: #14110F;

  --f-display: "Dela Gothic One", "Yu Gothic", system-ui, sans-serif;
  --f-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --f-jp: "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", "Noto Sans JP", "Meiryo", sans-serif;

  /* variables historiques de Summit, remappees */
  --bg: var(--paper); --surface: var(--paper); --surface2: #FFFFFF; --border: var(--rule);
  --text: var(--ink); --text2: var(--lavis); --accent: var(--ink); --accent-soft: var(--paper-2);
  --gold: var(--ink); --green: var(--ok); --red: var(--seal); --warn: var(--warning); --orange: var(--prio);
  --radius: 0; --shadow: none;
}
/* Mode sombre : l'encre devient la matiere, le papier le texte (meme mecanisme summit_theme). */
:root[data-theme="dark"] {
  --bg: var(--ink); --surface: var(--ink); --surface2: var(--ink-2); --card: #1A1715;
  --border: #3A3430; --rule: #3A3430; --rule2: #2C2825;
  --text: var(--paper); --text2: var(--lavis-ink); --tert: #7C736C;
  --accent: var(--paper); --accent-soft: var(--ink-2);
  --seal: #F0473D; --seal-hover: #D93A31; --seal-soft: #3A1B18; --ok: #5DAA78; --warning: #D0A43A;
  --gold: var(--paper); --green: var(--ok); --red: var(--seal); --warn: var(--warning); --orange: var(--prio);
  --prio: #FF8A1F; --prio-text: #FF8A1F; --prio-on: #14110F;   /* 7,6:1 sur l'encre */
  --ink-mid: #D9D0C7; --ink-k: #050404; --d-new: #5A524C; --d-dead: #3A3430;
  color-scheme: dark;
}

/* ---------------- socle ---------------- */
* { box-shadow: none !important; }
*, *::before, *::after { border-radius: 0 !important; }
body { font-family: var(--f-body); background: var(--bg); color: var(--text); font-variant-emoji: text; }
::selection { background: var(--seal); color: #fff; }
.nums, .reqno { font-family: var(--f-mono); font-feature-settings: 'tnum' 1; }
button:focus-visible, a:focus-visible, .card:focus-visible { outline: 2px solid var(--seal); outline-offset: 2px; }
input, select, textarea { font-family: var(--f-body); }
input:focus, select:focus, textarea:focus,
.field input:focus, .field select:focus, .field textarea:focus, .fsel:focus { outline: 2px solid var(--seal) !important; outline-offset: 0; border-color: var(--text) !important; }

/* tampons (hanko) generiques */
.hk { display: inline-flex; align-items: center; gap: .45em; font-family: var(--f-mono); font-size: .64rem; font-weight: 700;
      letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.hk::before { content: ""; width: .8em; height: .8em; flex: none; border: 1.5px solid var(--text); }
.hk.done::before { background: var(--text); }

/* ---------------- connexion ---------------- */
#login { background: var(--ink); }
.login-card { background: var(--paper); border: 0; padding: 36px 34px 30px; width: min(380px, 100%); color: var(--ink); }
.login-logo { display: block; width: min(240px, 78%); height: auto; margin: 0 auto 18px; }
.login-logo.logo-dark { display: none; }
.login-card .brand { font-family: var(--f-display); font-weight: 400; font-size: 1rem; letter-spacing: .02em; line-height: 1; text-transform: uppercase; }
.login-card .brand .s { color: inherit; margin-left: .3em; }
.login-card .brand .kj { font-family: var(--f-jp); color: var(--seal); font-weight: 700; margin-left: .45em; font-size: .9em; }
.login-card .sub { color: var(--lavis); font-family: var(--f-mono); font-weight: 500; font-size: .64rem; letter-spacing: .12em; margin: 8px 0 24px; }
.login-card .field input { background: #fff; color: var(--ink); border-color: #C9BEB3; }
.login-card .field label { color: var(--lavis); }
.login-card .btn { background: var(--ink); border-color: var(--ink); color: var(--paper); margin-top: 4px; }
.login-card .btn:hover { background: var(--seal); border-color: var(--seal); color: #fff; }
:root[data-theme="dark"] #login { background: #0B0A09; }
:root[data-theme="dark"] .login-card { background: var(--ink-2); color: var(--paper); border: 1px solid #3A3430; }
:root[data-theme="dark"] .login-logo.logo-light { display: none; }
:root[data-theme="dark"] .login-logo.logo-dark { display: block; }
:root[data-theme="dark"] .login-card .field input { background: var(--ink); color: var(--paper); border-color: #3A3430; }
:root[data-theme="dark"] .login-card .field label, :root[data-theme="dark"] .login-card .sub { color: var(--lavis-ink); }
:root[data-theme="dark"] .login-card .btn { background: var(--paper); border-color: var(--paper); color: var(--ink); }
:root[data-theme="dark"] .login-card .btn:hover { background: var(--seal); border-color: var(--seal); color: #fff; }
.err { color: var(--seal); font-family: var(--f-mono); font-size: .72rem; font-weight: 500; letter-spacing: .03em; }

/* ======================= LE SOMMAIRE (barre laterale) ======================= */
.layout { min-height: 100vh; }
.sidebar { width: 236px; background: var(--bg); border-right: 1px solid var(--border); padding: 0; gap: 0;
           position: sticky; top: 0; height: 100vh; align-self: flex-start; overflow-y: auto; }
.brandblock { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; align-items: center;
              padding: 18px 16px 14px; cursor: pointer; line-height: 1; }
.brandblock .brand-img { width: 38px; height: 38px; object-fit: contain; display: block; }
.brandblock .brand-dark { display: none; }
:root[data-theme="dark"] .brandblock .brand-light { display: none; }
:root[data-theme="dark"] .brandblock .brand-dark { display: block; }
.brandblock .brand { font-family: var(--f-display); font-weight: 400; font-size: 1.05rem; line-height: .92; letter-spacing: 0; text-transform: uppercase; }
.brandblock .brand .s { color: inherit; }
.brandblock .brandsub { font-family: var(--f-mono); font-weight: 500; font-size: .56rem; letter-spacing: .1em; color: var(--text2); margin-top: 5px; text-transform: uppercase; }
.brandblock .brandkj { font-family: var(--f-jp); color: var(--seal); font-weight: 700; font-size: .85rem; writing-mode: vertical-rl; align-self: start; }

.sidebar > button[id^="nav"] {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) 20px; align-items: baseline; gap: 6px;
  padding: 9px 16px; margin: 0; border: 0; border-top: 1px solid var(--rule2); background: transparent;
  color: var(--text); font-family: var(--f-body); font-size: .95rem; font-weight: 500; text-transform: none;
  letter-spacing: 0; text-align: left; width: 100%; transition: background .15s, color .15s;
}
.sidebar > button#navFinance { border-bottom: 1px solid var(--rule2); }
.sidebar > button[id^="nav"] .no { font-family: var(--f-mono); font-size: .68rem; color: var(--text2); }
.sidebar > button[id^="nav"] .k { font-family: var(--f-jp); font-weight: 500; font-size: .8rem; color: var(--tert); text-align: right; }
.sidebar > button[id^="nav"]:hover { background: var(--paper-2); border-color: var(--rule2); }
:root[data-theme="dark"] .sidebar > button[id^="nav"]:hover { background: var(--ink-2); }
.sidebar > button[id^="nav"].on { background: var(--ink); color: var(--paper); }
.sidebar > button[id^="nav"].on .no, .sidebar > button[id^="nav"].on .k { color: var(--seal); }
:root[data-theme="dark"] .sidebar > button[id^="nav"].on { background: var(--paper); color: var(--ink); }
:root[data-theme="dark"] .sidebar > button[id^="nav"].on .no,
:root[data-theme="dark"] .sidebar > button[id^="nav"].on .k { color: #E52A20; }

/* pied : utilisateur + theme + quitter */
.sidebar .who { margin-top: auto; border-top: 1px solid var(--border); padding: 12px 16px; display: flex; flex-wrap: wrap;
                gap: 8px; align-items: center; color: var(--text); font-size: .82rem; font-weight: 400; }
.sidebar .who .who-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin-right: auto; }
#whoName { font-weight: 600; }
.role-pill { background: transparent; border: 0; padding: 0; color: var(--text2); font-family: var(--f-mono); font-size: .6rem;
             font-weight: 500; letter-spacing: .07em; }
  :root .sidebar .who button.btn {
  width: auto; padding: 3px 7px; font-family: var(--f-mono); font-size: .6rem !important; font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase; border: 1px solid var(--rule); background: transparent; color: var(--text2); gap: 0; display: inline-block;
}
:root .sidebar .who button.btn:hover { border-color: var(--text); color: var(--text); background: transparent; }

/* ---------------- contenu ---------------- */
.layout main { padding: 18px 28px 48px; }
.inku-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: baseline; padding: 0 0 12px; margin-bottom: 16px;
             border-bottom: 1px solid var(--border); font-family: var(--f-mono); font-size: .68rem; letter-spacing: .07em;
             text-transform: uppercase; color: var(--text2); }
.inku-meta:empty { display: none; }
.inku-meta .alert { color: var(--seal); font-weight: 700; }
.inku-meta .prio { color: var(--prio-text); font-weight: 700; }
.inku-meta .now { margin-left: auto; }

/* fil d'Ariane : etiquettes mono, la page ouverte devient le titre (Dela) */
.crumb { gap: 4px 8px; margin-bottom: 18px; font-family: var(--f-mono); font-size: .68rem; font-weight: 500; letter-spacing: .07em;
         text-transform: uppercase; color: var(--text2); align-items: baseline; }
.crumb a { color: var(--text); font-weight: 500; border-bottom: 1px solid var(--rule); text-decoration: none; }
.crumb a:hover { color: var(--seal); border-color: var(--seal); }
.crumb span.sep { color: var(--tert); }
.crumb > span:last-child { flex-basis: 100%; font-family: var(--f-display); font-weight: 400; font-size: 1.9rem; line-height: .95;
                           letter-spacing: 0; color: var(--text); margin-top: 6px; overflow-wrap: anywhere; }

/* ---------------- boutons ---------------- */
.btn { font-family: var(--f-mono); font-size: .72rem !important; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
       background: var(--ink); color: var(--paper); border: 1px solid var(--ink); padding: 10px 14px; transition: background .15s, color .15s, border-color .15s; }
.btn:hover { background: var(--seal); border-color: var(--seal); color: #fff; }
:root[data-theme="dark"] .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }
:root[data-theme="dark"] .btn:hover { background: var(--seal); border-color: var(--seal); color: #fff; }
.btn.secondary, .btn.gold, :root[data-theme="dark"] .btn.secondary, :root[data-theme="dark"] .btn.gold {
  background: transparent; color: var(--text); border: 1px solid var(--text); }
.btn.secondary:hover, .btn.gold:hover, :root[data-theme="dark"] .btn.secondary:hover { background: var(--text); color: var(--bg); border-color: var(--text); }
.btn:disabled, .btn:disabled:hover { opacity: .4; background: var(--ink); border-color: var(--ink); color: var(--paper); }
:root[data-theme="dark"] .btn:disabled { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.actions { gap: 8px; }
.modal .row { align-items: flex-end; }
.mono-act { font-family: var(--f-mono); font-size: .58rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
            color: var(--text2); border: 1px solid var(--rule); background: var(--card); padding: 2px 5px; line-height: 1.3; cursor: pointer; }
.mono-act:hover { color: var(--seal); border-color: var(--seal); }
.topnav button { border: 1px solid var(--border); background: transparent; font-family: var(--f-mono); font-size: .66rem; text-transform: uppercase; }
.topnav button.on { background: var(--text); color: var(--bg); }

/* ---------------- champs ---------------- */
.field label, .flabel { font-family: var(--f-mono); font-size: .64rem; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--text2); }
.field input, .field select, .field textarea, .fsel {
  border: 1px solid var(--border); background: var(--surface2); color: var(--text); font-family: var(--f-body); font-size: .9rem; font-weight: 400; }
.field input, .field select, .field textarea { padding: 9px 11px; }
.fsel { padding: 7px 10px; }
.field label.chk { font-family: var(--f-body); font-size: .9rem; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text);
                   border: 1px solid var(--border); background: var(--surface2); }
.field label.chk input { accent-color: var(--ink); }
:root[data-theme="dark"] .field label.chk input { accent-color: var(--paper); }
.field label.chk:hover { background: var(--accent-soft); }
.toolbar { gap: 12px; }
.meta { color: var(--text2); }
.empty { border: 1px dashed var(--border); color: var(--text2); font-family: var(--f-mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; padding: 34px 20px; }
.pill { background: transparent; border: 1px solid var(--border); font-family: var(--f-mono); font-size: .64rem; font-weight: 500; }
.section-title { font-family: var(--f-mono); font-size: .66rem; font-weight: 500; letter-spacing: .08em; color: var(--text2); }
.section-title .btn { font-size: .62rem !important; }

/* vue grille / liste */
.viewtog { border: 0; gap: 0; }
.viewtog button { background: transparent; color: var(--text); border: 1px solid var(--border); margin-right: -1px; padding: 7px 10px;
                  font-family: var(--f-mono); font-size: .64rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.viewtog button.on { background: var(--text); color: var(--bg); border-color: var(--text); position: relative; }

/* ---------------- cartes ---------------- */
.grid { gap: 14px; }
.card { background: var(--card); border: 1px solid var(--border); padding: 14px 16px; transition: border-color .15s; }
.card:hover { transform: none; border-color: var(--text); }
.card h3 { font-family: var(--f-body); font-size: 1rem; font-weight: 600; letter-spacing: 0; }
.card .meta { font-family: var(--f-mono); font-size: .64rem; letter-spacing: .06em; }
.card.add { border-style: dashed; color: var(--text); font-family: var(--f-mono); font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.card.add:hover { background: var(--accent-soft); border-color: var(--text); }
/* rush / prioritaire : pas de contour rouge (maquette), la pastille et le numero portent l'urgence */
.card.rush, .card.prioritaire, .card.rush:hover, .card.prioritaire:hover { border-color: var(--border); }
.card.rush:hover, .card.prioritaire:hover { border-color: var(--text); }
.card.rush { border-top: 3px solid var(--seal); }
.card.rush .reqno, .req-row.rush .reqno { color: var(--seal); font-weight: 700; }
.card.prioritaire { border-top: 3px solid var(--prio); }
.card.prioritaire .reqno, .req-row.prioritaire .reqno { color: var(--prio-text); font-weight: 700; }
.reqno { font-size: .72rem; font-weight: 500; color: var(--text2); }
/* detail d'une demande : titre au Dela */
#content > .card:only-child h3 { font-family: var(--f-display); font-weight: 400; font-size: 1.45rem !important; line-height: 1.05; text-transform: uppercase;
                                  display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
#content > .card:only-child { background: var(--bg); border: 0; border-top: 2px solid var(--text); padding: 14px 0 0; }
#content > .card:only-child.rush { border-top-color: var(--seal); }
#content > .card:only-child.prioritaire { border-top-color: var(--prio); }

/* ---------------- statuts : un tampon + un libelle ---------------- */
.stbadge, :root[data-theme="dark"] .stbadge {
  display: inline-flex; align-items: center; gap: .45em; background: transparent !important; border: 0; padding: 0; color: var(--text);
  font-family: var(--f-mono); font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.stbadge::before { content: ""; width: .8em; height: .8em; flex: none; display: inline-block; border: 1.5px solid var(--text); }
.st-nouvelle::before { }                                                     /* carre vide = a faire */
.st-en_montage::before { background: var(--text); border-radius: 50% !important; }   /* rond plein = en cours */
.st-epreuve_envoyee::before { border-color: var(--seal); }                   /* carre filet sceau = epreuve */
.st-approuvee::before { border-radius: 50% !important; }                     /* rond vide = approuvee */
.st-imprimee::before, .st-expediee::before, .st-payee::before { background: var(--text); }  /* carre plein = fini */
.st-rejetee, :root[data-theme="dark"] .st-rejetee { color: var(--tert); }
.st-rejetee::before { border: 1px dashed var(--tert); }                      /* pointille = mort */
div.stbadge { white-space: normal; align-self: center; margin-right: 6px; }

.rush-pill, .prio-pill {
  display: inline-flex; align-items: center; gap: .45em; background: transparent; padding: 0; color: var(--seal);
  font-family: var(--f-mono); font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.rush-pill::before, .prio-pill::before { content: ""; width: .8em; height: .8em; flex: none; background: var(--seal); }
.prio-pill { color: var(--prio-text); }
.prio-pill::before { background: var(--prio); }
.tl-pill, .or-pill {
  background: transparent; color: var(--text2); border: 1px solid var(--border); padding: 1px 6px;
  font-family: var(--f-mono); font-size: .6rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.ft .ftno { font-family: var(--f-mono); font-size: .64rem; font-weight: 500; background: var(--bg); border: 1px solid var(--border); color: var(--text); }

/* ---------------- demandes : liste filetee ---------------- */
.req-list { gap: 0; border-bottom: 1px solid var(--rule2); }
.req-row { background: transparent; border: 0; border-top: 1px solid var(--rule2); padding: 9px 6px; gap: 12px; font-size: .88rem; transition: background .12s; }
.req-row:hover { transform: none; background: var(--accent-soft); }
.req-row.rush, .req-row.prioritaire { border-color: var(--rule2); }
.req-row.rush { box-shadow: inset 3px 0 0 var(--seal) !important; }
.req-row.prioritaire { box-shadow: inset 3px 0 0 var(--prio) !important; }
.req-row .rtitle { font-weight: 600; }
.req-row .rmeta { font-family: var(--f-mono); font-size: .68rem; font-weight: 400; color: var(--text2); }
.req-row .rthumb { width: 54px; height: 40px; background: var(--ink); border: 0; }
.reqthumb { background: var(--ink); border: 0; }
:root[data-theme="dark"] .req-row .rthumb, :root[data-theme="dark"] .reqthumb { background: #0B0A09; }

/* ---------------- catalogue ---------------- */
.cat-acc { background: transparent; border: 0; border-top: 2px solid var(--text); margin-bottom: 0; overflow: visible; }
.cat-acc:last-child { border-bottom: 1px solid var(--border); }
.cat-head { padding: 14px 2px; }
.cat-head:hover h2 { color: var(--seal); }
.cat-head h2 { font-family: var(--f-display); font-weight: 400; font-size: 1.35rem; letter-spacing: 0; text-transform: uppercase; }
.cat-head .chev { color: var(--text2); font-size: .7rem; }
.cat-body { padding: 0 0 20px; }
.frame-thumbs .ft { background: var(--card); border: 1px solid var(--border); }
.frame-thumbs .ft img { background: var(--ink); }
:root[data-theme="dark"] .frame-thumbs .ft img { background: #0B0A09; }
.frame-thumbs .ft .cap { font-size: .8rem; font-weight: 500; color: var(--text2); }
.frame-thumbs .ft .cap:first-of-type { color: var(--text); font-weight: 600; }
.ft .acts { gap: 6px; }
.ft .acts button { font-family: var(--f-mono); font-size: .64rem; font-weight: 700; letter-spacing: .06em; border: 1px solid var(--text);
                   background: transparent; color: var(--text); padding: 7px 6px; }
.ft .acts button:hover { background: var(--text); color: var(--bg); }
.ft .acts button.rep { border-color: var(--seal); color: var(--seal); }
.ft .acts button.rep:hover { background: var(--seal); color: #fff; }
.noimg { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; }
.photos img { border: 1px solid var(--border); }

/* ---------------- modales ---------------- */
.modal-bg { background: rgba(20, 17, 15, .62); }
.modal { background: var(--bg); border: 1px solid var(--text); padding: 22px 24px; }
.modal h3 { font-family: var(--f-display); font-weight: 400; font-size: 1.3rem; letter-spacing: 0; text-transform: uppercase; line-height: 1.05; }
.modal p.meta, .modal .meta { font-size: .84rem; }
:root[data-theme="dark"] .modal-bg { background: rgba(0, 0, 0, .7); }

/* ======================= TABLEAU DE BORD ======================= */
/* chiffres : une rangee filetee, gros chiffres Dela */
.stats-grid { gap: 0; border-top: 1px solid var(--text); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 28px; }
.stat { background: transparent; border: 0; border-right: 1px solid var(--rule2); border-bottom: 1px solid var(--rule2); padding: 12px 14px 14px; }
.stat .l { font-family: var(--f-mono); font-size: .64rem; font-weight: 500; letter-spacing: .07em; color: var(--text2); }
.stat .v { font-family: var(--f-display); font-weight: 400; font-size: 1.9rem; letter-spacing: -.01em; line-height: 1; margin-top: 10px; white-space: nowrap; }
.stat { min-width: 0; }
.stat.money .v { font-size: clamp(1.1rem, 1.55vw, 1.6rem); }
.stat.hot .v, .stat.hot .l { color: var(--seal); }
.stat.ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.stat.ink .l { color: var(--lavis-ink); }
:root[data-theme="dark"] .stat.ink { background: var(--paper); color: var(--ink); border-color: var(--paper); }
:root[data-theme="dark"] .stat.ink .l { color: var(--lavis); }

.panels { gap: 30px 28px; }
.panel { background: transparent; border: 0; border-top: 2px solid var(--text); padding: 10px 0 0; }
.panel h4 { font-family: var(--f-display); font-weight: 400; font-size: 1.05rem; letter-spacing: 0; text-transform: uppercase; margin-bottom: 14px; color: var(--text); }
.chart-legend { font-family: var(--f-mono); font-size: .62rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--text2); gap: 16px; }
.chart-legend .dot, .legend .dot { border: 0; width: 12px; height: 12px; }
.chart-legend .dot.trame-c { background: radial-gradient(circle, var(--c-summit) 42%, transparent 44%) 0 0 / 5px 5px; box-shadow: inset 0 2px 0 var(--c-summit) !important; }
.chart-legend .dot.dash-i { height: 2px; vertical-align: middle; background: repeating-linear-gradient(90deg, var(--text) 0 4px, transparent 4px 7px); }
.legend { font-size: .86rem; font-weight: 500; gap: 7px; }
.legend .lgrow { border-bottom: 1px solid var(--rule2); padding-bottom: 5px; }
.legend b { font-family: var(--f-mono); font-weight: 700; font-size: .8rem; }
.hbar-track { height: 10px; background: transparent; border-bottom: 1px solid var(--rule2); }
.hbar-fill { height: 100%; background: radial-gradient(circle, var(--c-summit) 42%, transparent 44%) 0 0 / 5px 5px; border-left: 2px solid var(--c-summit); }

/* niveaux d'encre */
.ink-grid { gap: 28px; margin-bottom: 30px; }
.ink-grid .panel h4 { align-items: baseline !important; }
.ink-bar { border: 1px solid var(--border); background: var(--surface2); }
:root[data-theme="dark"] .ink-bar { background: #2C2825; }
.ink-pct { font-family: var(--f-mono); font-size: .6rem; font-weight: 700; color: var(--text); left: 50% !important; right: auto !important;
           transform: translateX(-50%); background: var(--surface2); padding: 0 2px; line-height: 1.3; }
.ink-grid .panel > .meta { font-family: var(--f-mono); font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; }
.ink-letter { font-family: var(--f-mono); font-weight: 700; font-size: .8rem; }
.ink-res { font-family: var(--f-mono); font-size: .62rem; font-weight: 500; letter-spacing: .04em; color: var(--text2); text-transform: uppercase; }
.ink-res b { color: var(--text); }

/* ======================= FINANCE (05 金, 14 oct. 2026) ======================= */
.fin-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 6px 0 16px; padding-top: 10px;
         border-top: 2px solid var(--text); font-family: var(--f-display); font-weight: 400; font-size: 1.25rem; text-transform: uppercase; line-height: 1.05; }
.fin-h .no { font-family: var(--f-mono); font-size: .68rem; color: var(--seal); letter-spacing: .07em; }
.fin-h .fin-sub { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .07em; color: var(--text2); margin-left: auto; }
#finDash { margin-bottom: 34px; }
.fin-net { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding: 12px 14px; margin-bottom: 22px;
           background: var(--ink); color: var(--paper); }
:root[data-theme="dark"] .fin-net { background: var(--paper); color: var(--ink); }
.fin-net .l { font-family: var(--f-mono); font-size: .64rem; letter-spacing: .07em; text-transform: uppercase; opacity: .75; }
.fin-net .v { font-family: var(--f-display); font-size: clamp(1.05rem, 2.2vw, 1.5rem); line-height: 1.1; }
.fin-net .ro-tag { margin-left: auto; font-family: var(--f-mono); font-size: .6rem; letter-spacing: .07em; text-transform: uppercase;
                   border: 1px solid currentColor; padding: 2px 6px; }
.fin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-bottom: 28px; }
.fin-acct, .fin-bal, .fin-hist { border-top: 2px solid var(--text); padding-top: 10px; min-width: 0; }
.fin-acct h4, .fin-bal h4, .fin-hist h4 { font-family: var(--f-display); font-weight: 400; font-size: 1.05rem; text-transform: uppercase; margin-bottom: 6px; }
.fin-acct > .meta, .fin-bal .meta { font-size: .82rem; margin-bottom: 12px; line-height: 1.45; }
.fin-lines > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--rule2); font-size: .9rem; }
.fin-lines .sol { border-bottom: 1px solid var(--text); }
.fin-lines .sol b { font-family: var(--f-display); font-weight: 400; font-size: 1.25rem; }
.owe { color: var(--seal); } .credit { color: var(--ok); } .zero { color: var(--text2); }
.fin-net .v.owe, .fin-net .v.credit, .fin-net .v.zero { color: inherit; }
.fin-form { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; }
.fin-form input { border: 1px solid var(--border); background: var(--surface2); color: var(--text); padding: 8px 10px; font-size: .88rem; min-width: 0; }
.fin-form input[type="date"] { flex: 0 1 150px; }
.fin-form input[type="number"] { flex: 1 1 120px; }
.fin-form input[type="text"] { flex: 2 1 160px; }
.fin-form .btn { flex: 0 0 auto; }
.fin-amt { display: flex; flex: 1 1 170px; gap: 0; min-width: 0; }
.fin-amt input { flex: 1 1 auto; }
.fin-amt .btn { padding: 8px 10px; }
.fin-tt { font-family: var(--f-mono); font-size: .64rem; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--text2); margin: 18px 0 6px; }
.fin-scroll { overflow-x: auto; }
.fin-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.fin-table th { font-family: var(--f-mono); font-size: .6rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--text2);
                text-align: right; padding: 5px 6px; border-bottom: 1px solid var(--text); white-space: nowrap; }
.fin-table td { text-align: right; padding: 6px; border-bottom: 1px solid var(--rule2); white-space: nowrap; }
.fin-table th:first-child, .fin-table td:first-child { text-align: left; white-space: normal; }
.fin-table td.nums:first-child { white-space: nowrap; }
.fin-table td .sub { display: block; font-family: var(--f-mono); font-size: .62rem; color: var(--text2); text-transform: uppercase; letter-spacing: .05em; }
.fin-table tr.tot td { font-weight: 700; border-bottom: 1px solid var(--text); }
.fin-bal { margin-bottom: 28px; }
.fin-prev { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 10px; border-top: 1px solid var(--rule2); }
.fin-prev > div { padding: 8px 10px 8px 0; display: flex; flex-direction: column; gap: 4px; }
.fin-prev span { font-family: var(--f-mono); font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text2); }
.fin-prev b { font-size: 1rem; }
.fin-warn { margin-top: 8px; color: var(--seal); font-family: var(--f-mono); font-size: .7rem; }
.fin-move { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto auto; gap: 10px; align-items: baseline; padding: 7px 0;
            border-bottom: 1px solid var(--rule2); font-size: .86rem; }
.fin-move .d { font-size: .74rem; color: var(--text2); }
.fin-move .a { font-weight: 700; }
.fin-move .a.in { color: var(--ok); } .fin-move .a.out { color: var(--seal); } .fin-move .a.bal { color: var(--text); }

/* ======================= TELEPHONE (<= 680 px) =======================
   Meme comportement qu'avant : la barre passe en haut, les entrees en rangee (5 depuis Finance). */
@media (max-width: 680px) {
  .layout { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; overflow: visible; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
             border-right: 0; border-bottom: 1px solid var(--text); }
  .brandblock { grid-column: 1 / 3; grid-row: 1; padding: 12px 12px 10px; }
  .sidebar .who { grid-column: 3 / 6; grid-row: 1; margin: 0; border-top: 0; padding: 10px 12px; justify-content: flex-end; gap: 6px; }
  .sidebar .who .who-id { margin-right: 0; align-items: flex-end; width: 100%; text-align: right; }
  .sidebar .who { align-content: center; min-width: 0; padding: 10px 10px 8px 4px; }
  .sidebar > button[id^="nav"] { grid-row: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 8px 9px;
                                 font-size: .78rem; line-height: 1.15; border-top: 1px solid var(--rule2); border-bottom: 0; border-right: 1px solid var(--rule2); }
  .sidebar > button#navFinance { border-right: 0; border-bottom: 0; }
  .sidebar > button[id^="nav"] { font-size: .72rem; padding: 8px 6px 9px; overflow-wrap: anywhere; }
  .sidebar > button[id^="nav"] .k { display: none; }
  .fin-grid { grid-template-columns: minmax(0, 1fr); }
  .fin-prev { grid-template-columns: minmax(0, 1fr); }
  .fin-prev > div { flex-direction: row; justify-content: space-between; border-bottom: 1px solid var(--rule2); }
  .fin-move { grid-template-columns: minmax(0, 1fr) auto auto; }
  .fin-move .d { grid-column: 1 / -1; }
  .fin-h .fin-sub { margin-left: 0; flex-basis: 100%; }
  .layout main { padding: 14px 16px 40px; }
  .crumb > span:last-child { font-size: 1.5rem; }
  .inku-meta { gap: 4px 14px; font-size: .62rem; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ink-row { gap: 4px; }
  .stat .v { font-size: 1.5rem; }
  .stat.money .v { font-size: 1.15rem; }
  .panels, .ink-grid { grid-template-columns: minmax(0, 1fr); }
  .frame-thumbs.big { grid-template-columns: minmax(0, 1fr); }
  .toolbar > div { min-width: 0; }
  .toolbar > div[style*="margin-left:auto"] { margin-left: 0 !important; }
  .modal { padding: 18px 16px; }
  .row { flex-wrap: wrap; }
  .row > .field { min-width: 130px; }
  .req-row { gap: 8px; flex-wrap: wrap; }
  .req-row .rtitle { flex-basis: 100%; order: 10; }
  #content > .card:only-child h3 { font-size: 1.2rem !important; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }