/* =============================================================
   Identité « carnet de chantier » : graphite chaud + AMBRE DOUX.
   L'accent est volontairement désaturé pour rester confortable à
   l'œil ; vert/ambre/rouge restent réservés aux états (stock OK /
   seuil / rupture). Mode sombre = noir véritable (écrans AMOLED).
   ============================================================= */
:root{
  --bg:#EDEBE6; --card:#FBFAF8; --ink:#1C1B18; --muted:#6E6A61; --line:#DCD8CF; --soft:#F3F1EC;
  /* Menu latéral : IDENTIQUE de jour comme de nuit (noir total) */
  --sidebar:#000000; --sidebar-ink:#8F8B80; --sidebar-hover:#191813; --side-accent:#D9B45C;
  --accent:#D08700; --accent-ink:#1C1B18;
  --ok:#2E7D43; --ok-bg:#E3F0E6; --warn:#B4690E; --warn-bg:#F7ECD9; --danger:#B3362B; --danger-bg:#F8E6E3;
  --in-bg:#E3F0E6; --in-ink:#2E6B3C; --out-bg:#F7ECD9; --out-ink:#9A5D10;
  --shadow:0 1px 2px rgba(28,27,24,.05),0 8px 24px rgba(28,27,24,.07);
  --shadow-lg:0 24px 60px rgba(28,27,24,.26);
  --radius:10px; --radius-sm:7px;
  /* Liseré signature : dégradé discret de l'accent (plus de rayures) */
  --hazard:linear-gradient(90deg,var(--accent),rgba(208,135,0,.15));
}
body.dark{
  /* Noir véritable : sur AMOLED les pixels noirs sont éteints
     (économie de batterie, contraste maximal, confort de nuit). */
  --bg:#000000; --card:#131211; --ink:#F2F0EB; --muted:#98938A; --line:#2B2925; --soft:#1B1A18;
  --sidebar:#000000; --sidebar-ink:#8F8B80; --sidebar-hover:#191813; --side-accent:#D9B45C;
  --accent:#D9B45C; --accent-ink:#141311;
  --ok:#66B57E; --ok-bg:#14211A; --warn:#D99A44; --warn-bg:#241E12; --danger:#DB7367; --danger-bg:#271512;
  --in-bg:#14211A; --in-ink:#8FCB9F; --out-bg:#241E12; --out-ink:#D99A44;
  --shadow:0 1px 2px rgba(0,0,0,.55),0 8px 24px rgba(0,0,0,.45);
  --shadow-lg:0 24px 60px rgba(0,0,0,.7);
  --hazard:linear-gradient(90deg,var(--accent),rgba(217,180,92,.12));
}
/* En sombre, cartes et panneaux se détachent du noir par un liseré net */
body.dark .panel,body.dark .kpi,body.dark .modal,body.dark .hero{border-color:#2B2925}
body.dark .sidebar{border-right:1px solid #1E1C19}

/* Barre « Total général » du Compte principal : toujours sombre, texte toujours clair */
.gl-total{padding:18px 24px;background:#1C1B18;color:#fff;border-top:2px solid #1C1B18;display:flex;justify-content:space-between;align-items:center;gap:24px}
body.dark .gl-total{background:#000000;color:#F2F0EB;border-top:2px solid #2B2925}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:'Bahnschrift','Barlow',"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",sans-serif;background:var(--bg);color:var(--ink);display:flex;height:100vh;height:100dvh;overflow:hidden;-webkit-font-smoothing:antialiased;transition:background .25s,color .25s;font-size:14px;line-height:1.5}
html{height:100%}
@supports(padding:max(0px)){
  .sidebar{padding-bottom:env(safe-area-inset-bottom,0px)}
}
.hidden{display:none !important}
::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px}::-webkit-scrollbar-thumb:hover{background:var(--muted)}

/* ===== Login ===== */
#loginScreen{position:fixed;inset:0;background:#141311;background-image:radial-gradient(ellipse 62% 46% at 70% 0%,rgba(208,135,0,.05),transparent);display:flex;align-items:center;justify-content:center;z-index:100;flex-direction:column;padding:22px}
.login-brand{color:#fff;font-size:22px;font-weight:800;letter-spacing:.4px;margin-bottom:20px;display:flex;align-items:center;gap:11px}
.login-brand .mark{width:42px;height:42px;border-radius:9px;background:var(--side-accent);color:#141311;display:grid;place-items:center;font-size:19px;font-weight:800}
.login-box{background:var(--card);padding:34px 30px 32px;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.5);width:100%;max-width:380px;position:relative;overflow:hidden}
.login-box::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--hazard)}
.login-box h2{margin-bottom:5px;font-size:20px;font-weight:800}
.login-box .sub{color:var(--muted);font-size:13px;margin-bottom:22px}
.login-err{background:#fdecea;border:1px solid #f3b4ab;color:#b3261e;padding:11px 14px;border-radius:10px;font-size:13px;font-weight:600;margin-bottom:16px;line-height:1.45}
.ph-italic::placeholder{font-style:italic;color:var(--muted);opacity:.85}
.pwd-wrap{position:relative}
.pwd-wrap input{padding-right:62px;width:100%}
.pwd-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:11.5px;font-weight:700;padding:5px 7px;opacity:.7;line-height:1;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
.pwd-eye:hover{opacity:1}

/* ===== Layout ===== */
#appScreen{display:flex;width:100%;flex:1;height:100vh;height:100dvh;overflow:hidden}
.scrim{position:fixed;inset:0;background:rgba(9,9,11,.5);z-index:49;display:none}
.scrim.show{display:block}
.sidebar{width:236px;background:var(--sidebar);color:var(--sidebar-ink);flex-shrink:0;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;overflow:hidden;z-index:40}
.brand{padding:18px 20px;font-weight:800;font-size:16px;color:#fff;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:10px;letter-spacing:.3px;flex-shrink:0}
.brand .mark{width:32px;height:32px;border-radius:7px;background:var(--side-accent);color:#141311;display:grid;place-items:center;font-size:14px;font-weight:800;flex-shrink:0}
.nav{padding:12px 11px;flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden}
.nav .grp{font-size:10.5px;text-transform:uppercase;letter-spacing:.8px;color:#6b7280;padding:14px 12px 6px}
.nav button{position:relative;width:100%;display:flex;align-items:center;gap:12px;padding:10px 13px;background:none;border:none;color:var(--sidebar-ink);border-radius:7px;cursor:pointer;font-size:13.5px;font-weight:500;text-align:left;margin-bottom:2px;transition:background .15s,color .15s;font-family:inherit}
.nav button:hover{background:var(--sidebar-hover);color:#fff}
.nav button.active{background:rgba(217,180,92,.14);color:#fff;font-weight:700}
.nav button.active::before{content:"";position:absolute;left:-6px;top:7px;bottom:7px;width:3px;background:var(--side-accent);border-radius:2px}
.nav .ic{width:20px;text-align:center;font-size:15px;flex-shrink:0}
.side-foot{padding:14px 16px;border-top:1px solid rgba(255,255,255,.08);flex-shrink:0}
.side-foot .logout{margin-bottom:12px;display:flex;align-items:center;justify-content:center;gap:7px;width:100%;color:var(--sidebar-ink);font-size:13px;cursor:pointer;background:rgba(255,255,255,.06);border:none;padding:9px;border-radius:8px;font-family:inherit;transition:.15s}
.side-foot .logout:hover{background:rgba(255,255,255,.12);color:#fff}
.side-foot .av{display:flex;align-items:center;gap:10px}
.side-foot .avi{width:36px;height:36px;border-radius:50%;background:var(--side-accent);color:#141311;display:grid;place-items:center;font-weight:800;font-size:14px;flex-shrink:0}
.side-foot .name{color:#fff;font-weight:700;font-size:13.5px;line-height:1.2}
.side-foot .role{color:#9ca3af;font-size:11px;text-transform:uppercase;letter-spacing:.5px;margin-top:1px}

.main{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;height:100vh;height:100dvh;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
.topbar{
  background:var(--card);border-bottom:1px solid var(--line);
  padding:8px 14px 11px;
  position:sticky;top:0;z-index:30;
}
/* Signature visuelle : fine bande de balisage sous la barre du haut */
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--hazard);opacity:.8}
/* Rangée 1 : menu + titre + icônes */
.tb-line1{display:flex;align-items:center;gap:8px}
/* Rangée 2 : serveur + chantier */
.tb-line2{display:flex;align-items:center;gap:8px}
.page-title{
  font-size:16px;font-weight:800;
  flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:flex;align-items:center;gap:7px;
}
.page-ic{font-size:15px;flex-shrink:0;display:inline-flex;align-items:center}
.page-ic .nav-ic{width:18px;height:18px;object-fit:contain;vertical-align:middle;margin-right:2px}
.nav button .nav-ic{width:17px;height:17px;object-fit:contain;vertical-align:middle;flex-shrink:0}
.menu-btn{display:none;flex-shrink:0}
#chantierPick{flex:1;min-width:0}
.chantier-pick select{
  padding:7px 11px;border:1.5px solid var(--line);border-radius:9px;
  font-size:13px;background:var(--card);color:var(--ink);
  font-weight:600;font-family:inherit;width:100%;max-width:240px;
}
.chantier-fixed{
  background:var(--soft);padding:7px 11px;border-radius:9px;
  font-weight:600;font-size:13px;border:1px solid var(--line);
  max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;
}
.icon-btn{position:relative;width:38px;height:38px;border:1.5px solid var(--line);background:var(--card);border-radius:10px;cursor:pointer;font-size:16px;display:grid;place-items:center;color:var(--ink);transition:.15s;flex-shrink:0}
.icon-btn:hover{background:var(--soft)}

/* ===== Toggle Entrée / Sortie (formulaire mouvement) ===== */
.mt-toggle{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:4px}
.mt-btn{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:14px 10px;border-radius:12px;
  border:2px solid var(--line);background:var(--card);
  cursor:pointer;font-family:inherit;transition:.15s;
}
.mt-btn .mt-ic{font-size:20px;font-weight:900;width:34px;height:34px;border-radius:50%;display:grid;place-items:center}
.mt-btn .mt-lbl{font-size:13.5px;font-weight:700;color:var(--ink)}
.mt-btn .mt-lbl small{display:block;font-size:10.5px;font-weight:500;color:var(--muted);margin-top:2px}
.mt-btn.mt-in .mt-ic{background:var(--in-bg);color:var(--in-ink)}
.mt-btn.mt-out .mt-ic{background:var(--out-bg);color:var(--out-ink)}
.mt-btn:hover{border-color:var(--muted)}
.mt-btn.mt-in.active{border-color:var(--in-ink);background:var(--in-bg)}
.mt-btn.mt-out.active{border-color:var(--out-ink);background:var(--out-bg)}

/* ===== DESKTOP (>= 720px) : tout sur une seule ligne ===== */
@media(min-width:720px){
  .topbar{display:flex;align-items:center;gap:10px;padding:10px 18px}
  .tb-line1{flex:1;min-width:0;gap:10px}
  .tb-line2{flex-shrink:0;gap:10px}
  .menu-btn{display:none!important}
  .sidebar-chantier{display:none!important}
}
/* ===== MOBILE (< 720px) : 2 rangées empilées ===== */
@media(max-width:719px){
  .tb-line1{width:100%}
  .tb-line2{width:100%;margin-top:7px;padding-top:7px;border-top:1px solid var(--line)}
  .menu-btn{display:grid!important}
  .page-title{font-size:17px;font-weight:900}
  /* srv-status compact : point + heure seulement */
  .srv-status{padding:4px 9px;font-size:12px;gap:5px;flex-shrink:0}
  .srv-status .lbl-srv,.srv-status .sep{display:none}
  #chantierPick select,.chantier-fixed{max-width:100%!important;width:100%}
  .sidebar-chantier{display:none!important}
}
@media(max-width:380px){
  .page-title{font-size:15px}
  .icon-btn{width:34px;height:34px;font-size:14px}
  .srv-status{font-size:11px;padding:3px 7px}
}
/* ===== Bandeau connexion serveur IJS + horloge ===== */
.srv-status{display:flex;align-items:center;gap:8px;background:var(--soft);border:1px solid var(--line);padding:6px 12px;border-radius:20px;font-size:12.5px;font-weight:600;color:var(--muted);white-space:nowrap;flex-shrink:0}
.srv-status .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px var(--ok-bg);animation:pulse 2.2s infinite;flex-shrink:0}
.srv-status.off .dot{background:var(--danger);box-shadow:0 0 0 3px var(--danger-bg);animation:none}
.srv-status .lbl-srv{color:var(--muted)}
.srv-status .clock{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:800;letter-spacing:.3px}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
@media(max-width:760px){.srv-status .lbl-srv{display:none}.srv-status{padding:6px 10px}}
@media(max-width:480px){.srv-status .sep{display:none}}
tr.row-click{cursor:pointer;transition:background .12s}
tr.row-click:hover{background:var(--soft)}
tr.row-click:active{background:var(--line)}
tr.row-click td:first-child b{text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}
.modal-actions{display:flex;gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.bell-count{position:absolute;top:-6px;right:-6px;background:var(--danger);color:#fff;font-size:10px;font-weight:800;min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;padding:0 4px;border:2px solid var(--card)}
.content{padding:22px;flex:1;max-width:1280px;width:100%;margin:0 auto}

/* ===== Panels / cards ===== */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:18px;overflow:hidden;box-shadow:var(--shadow)}
.panel-head{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--soft)}
.panel-head h2{font-size:14px;font-weight:800;display:flex;align-items:center;gap:8px;color:var(--ink)}
.panel-body{padding:18px}
.head-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* ===== Table ===== */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;padding:7px 12px;background:var(--soft);color:var(--muted);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:7px 12px;border-bottom:1px solid var(--line);font-size:13px}
tbody tr{transition:.1s}
tbody tr:hover{background:var(--soft)}
tbody tr:nth-child(even){background:rgba(0,0,0,.012)}
body.dark tbody tr:nth-child(even){background:rgba(255,255,255,.018)}
tr:last-child td{border-bottom:none}
tfoot td,tfoot th{background:var(--soft);font-weight:800;border-top:2px solid var(--line);font-variant-numeric:tabular-nums}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.mvt-link{color:var(--ink);font-weight:700;cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}
.mvt-link:hover{opacity:.7}
.mvt-row:hover{background:var(--soft)}
.mvt-row:active{background:var(--line)}

/* ===== Badges + buttons ===== */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:99px;font-size:11px;font-weight:700;white-space:nowrap;letter-spacing:.1px}
.b-in{background:var(--in-bg);color:var(--in-ink)}.b-out{background:var(--out-bg);color:var(--out-ink)}
.b-alert{background:var(--danger-bg);color:var(--danger)}.b-ok{background:var(--ok-bg);color:var(--ok)}
.b-mod{background:var(--warn-bg);color:var(--warn)}.b-sup{background:var(--danger-bg);color:var(--danger)}
.b-actif{background:var(--ok-bg);color:var(--ok)}.b-susp{background:var(--warn-bg);color:var(--warn)}.b-clot{background:var(--soft);color:var(--muted)}
.b-role{background:var(--soft);color:var(--ink);border:1px solid var(--line)}
.btn{padding:9px 16px;border:none;border-radius:9px;font-size:13px;font-weight:600;cursor:pointer;transition:.15s;font-family:inherit;display:inline-flex;align-items:center;gap:6px;line-height:1;letter-spacing:.1px}
.btn:active{transform:translateY(1px);opacity:.9}
.btn-primary{background:var(--accent);color:var(--accent-ink);font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,.12)}.btn-primary:hover{filter:brightness(1.06);box-shadow:0 3px 10px rgba(208,135,0,.3)}
.btn-sm{padding:6px 11px;font-size:12px;border-radius:7px}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}.btn-ghost:hover{background:var(--soft)}
.btn-danger{background:var(--danger-bg);color:var(--danger);border:1px solid transparent}.btn-danger:hover{border-color:var(--danger)}
.btn-out{background:var(--card);border:1.5px solid var(--line);color:var(--muted)}.btn-out:hover{color:var(--ink);background:var(--soft)}
.btn-block{width:100%;justify-content:center}
.ra{display:flex;gap:6px;flex-wrap:wrap}
.search{padding:7px 12px;border:1.5px solid var(--line);border-radius:8px;font-size:13px;background:var(--soft);color:var(--ink);min-width:160px;font-family:inherit;transition:.15s}
.search:focus{background:var(--card)}
.search:focus,.f input:focus,.f select:focus,.f textarea:focus,.chantier-pick select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(208,135,0,.16)}
.empty{padding:40px 20px;text-align:center;color:var(--muted);font-size:14px}
.empty .big{font-size:34px;display:block;margin-bottom:8px;opacity:.6}

/* ===== KPI + dashboard — Linear style ===== */
.hero{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;margin-bottom:18px;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.hero .hi{font-size:21px;font-weight:800}
.hero .hi span{color:var(--muted);font-weight:600}
.hero .meta{color:var(--muted);font-size:13px;margin-top:3px}
.hero .pill{background:var(--soft);border:1px solid var(--line);padding:8px 14px;border-radius:10px;font-size:12.5px;font-weight:600;color:var(--muted)}
.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:13px;margin-bottom:18px}
/* KPI redesign : fond coloré très doux + valeur grande */
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);overflow:hidden;transition:.2s}
.kpi:hover{box-shadow:var(--shadow-lg);transform:translateY(-1px)}
/* Cartes KPI neutres : la couleur est réservée aux données et aux états */
.kpi.k-mat,.kpi.k-dep,.kpi.k-tot,.kpi.k-stk{background:var(--card);border-color:var(--line)}
.kpi.alrt{border-color:var(--danger)}
.kpi-ic{font-size:18px;margin-bottom:10px;opacity:.8}
.kpi .lbl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;font-weight:700}
.kpi .val{font-size:22px;font-weight:900;margin-top:4px;font-variant-numeric:tabular-nums;line-height:1.15}
.kpi.alrt .val{color:var(--danger)}

/* ===== Tableau de bord — redesign "Material sobre" (scopé à .dash-v2) ===== */
.dash-v2{display:block}
.dash-v2 .hero{
  background:var(--card);border:1px solid rgba(0,0,0,.05);border-radius:12px;
  padding:22px 24px;margin-bottom:16px;
  box-shadow:0 1px 2px rgba(0,0,0,.03),0 8px 22px rgba(0,0,0,.05);
}
body.dark .dash-v2 .hero{border-color:rgba(255,255,255,.06);box-shadow:0 1px 2px rgba(0,0,0,.2),0 8px 22px rgba(0,0,0,.25)}
.dash-v2 .hero .pill{background:var(--soft);border-radius:14px}

.dash-v2 .kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:16px}
.dash-v2 .kpi{
  position:relative;background:var(--card);border:1px solid rgba(0,0,0,.05);
  border-radius:10px;padding:14px 15px 12px;overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.03),0 6px 16px rgba(0,0,0,.045);
  transition:.18s ease;
  min-height:96px;display:flex;flex-direction:column;
}
body.dark .dash-v2 .kpi{border-color:rgba(255,255,255,.06);box-shadow:0 1px 2px rgba(0,0,0,.2),0 6px 16px rgba(0,0,0,.3)}
.dash-v2 .kpi:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(0,0,0,.04),0 10px 22px rgba(0,0,0,.07)}
.dash-v2 .kpi-top{display:flex;align-items:center;gap:9px;margin-bottom:9px;min-width:0}
.dash-v2 .kpi-tx{min-width:0;flex:1;overflow:hidden}
.dash-v2 .kpi-ic{
  width:30px;height:30px;border-radius:10px;flex-shrink:0;
  background:var(--soft);display:grid;place-items:center;
  font-size:14px;margin:0;opacity:1;
}
.dash-v2 .kpi.alrt .kpi-ic{background:var(--danger-bg)}
.dash-v2 .kpi .lbl{font-size:10px;font-weight:700;letter-spacing:.3px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-v2 .kpi .val{font-size:16px;font-weight:800;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.dash-v2 .kpi-spark-svg{width:100%;height:26px;display:block;margin-top:auto;overflow:visible}
.dash-v2 .kpi-spark-empty{height:26px;margin-top:auto}
/* Mini-jauge pour les KPI sans série temporelle (stock / alertes) */
.dash-v2 .kpi-gauge{margin-top:auto;height:5px;border-radius:99px;background:var(--soft);overflow:hidden}
.dash-v2 .kpi-gauge-fill{height:100%;border-radius:99px;background:var(--accent);transition:width .6s ease}
.dash-v2 .kpi-gauge-lbl{font-size:9.5px;color:var(--muted);margin-top:4px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-v2 .kpi-dots{display:flex;gap:4px;margin-top:auto;align-items:center;flex-wrap:wrap}
.dash-v2 .kpi-dot{width:7px;height:7px;border-radius:50%;background:var(--soft);border:1px solid var(--line);flex-shrink:0}
.dash-v2 .kpi-dot.on{background:var(--danger);border-color:var(--danger)}
.dash-v2 .kpi-dots-lbl{font-size:9.5px;color:var(--muted);margin-left:3px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.dash-v2 .panel{
  border-radius:12px;border:1px solid rgba(0,0,0,.05);
  box-shadow:0 1px 2px rgba(0,0,0,.03),0 8px 20px rgba(0,0,0,.045);
}
body.dark .dash-v2 .panel{border-color:rgba(255,255,255,.06);box-shadow:0 1px 2px rgba(0,0,0,.2),0 8px 20px rgba(0,0,0,.28)}
.dash-v2 .panel-head{background:transparent;border-bottom:1px solid var(--line);padding:16px 18px 12px}
.dash-v2 .panel-head h2{font-size:13px;font-weight:700;color:var(--ink)}
.dash-v2 .panel-body{padding:14px 16px 16px}
.dash-v2 .charts2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:760px){.dash-v2 .charts2{grid-template-columns:1fr}.dash-v2 .kpis{grid-template-columns:repeat(2,1fr)}}

.charts{display:grid;grid-template-columns:1.5fr 1fr;gap:14px;margin-bottom:14px}
.charts2{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* ===== Assistant Chantier IJS ===== */
.ai-card{background:linear-gradient(135deg,var(--card),var(--soft));border:1px solid var(--line);border-radius:var(--radius);margin-bottom:18px;overflow:hidden;box-shadow:var(--shadow)}
.ai-head{padding:16px 18px;display:flex;align-items:center;gap:11px;border-bottom:1px solid var(--line)}
.ai-orb{width:36px;height:36px;border-radius:10px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-size:18px;flex-shrink:0}
.ai-head .t{font-weight:800;font-size:14.5px}.ai-head .s{font-size:12px;color:var(--muted)}
.ai-body{padding:16px 18px}
.ai-input{display:flex;gap:9px;flex-wrap:wrap}
.ai-input input{flex:1;min-width:200px;padding:11px 14px;border:1.5px solid var(--line);border-radius:10px;font-size:14px;background:var(--card);color:var(--ink);font-family:inherit}
.ai-chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.chip{background:var(--card);border:1px solid var(--line);color:var(--muted);font-size:12px;font-weight:600;padding:6px 12px;border-radius:20px;cursor:pointer;transition:.15s;font-family:inherit}
.chip:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.ai-res{margin-top:16px;padding:15px 16px;background:var(--card);border:1px solid var(--line);border-radius:11px;font-size:13.5px;white-space:pre-wrap;line-height:1.6}
.ai-res .akpis{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 4px}
.ai-res .akpi{background:var(--soft);border:1px solid var(--line);border-radius:9px;padding:9px 13px;flex:1;min-width:130px}
.ai-res .akpi .l{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px;font-weight:700}
.ai-res .akpi .v{font-size:16px;font-weight:800;margin-top:3px}

/* ===== Banner / quick ===== */
.abanner{background:var(--warn-bg);border:1px solid var(--warn);color:var(--warn);padding:11px 15px;border-radius:11px;margin-bottom:16px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:9px}
.quick-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
.quick-btn{background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);padding:16px 18px;cursor:pointer;display:flex;align-items:center;gap:14px;transition:.18s;box-shadow:var(--shadow);font-family:inherit;text-align:left}
.quick-btn:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.quick-btn .qic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:20px;flex-shrink:0}
.qi-in{background:var(--in-bg);color:var(--in-ink)}.qi-out{background:var(--out-bg);color:var(--out-ink)}
.quick-btn .qt{font-weight:800;font-size:14.5px}.quick-btn .qs{font-size:12px;color:var(--muted);margin-top:3px}

/* ===== Modal ===== */
.overlay{position:fixed;inset:0;background:rgba(9,9,11,.55);display:none;align-items:center;justify-content:center;z-index:60;padding:18px;backdrop-filter:blur(2px)}
.overlay.show{display:flex}
.modal{background:var(--card);border-radius:12px;width:100%;max-width:460px;box-shadow:0 32px 80px rgba(0,0,0,.25),0 0 0 1px rgba(0,0,0,.06);max-height:92vh;display:flex;flex-direction:column;animation:pop .2s cubic-bezier(.34,1.56,.64,1)}
.modal.wide{max-width:680px}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
.modal-head{padding:17px 22px;border-bottom:1px solid var(--line);font-weight:800;font-size:15.5px;display:flex;align-items:center;gap:9px}
.modal-body{padding:20px 22px;overflow:auto}
.modal-foot{padding:14px 22px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:9px;flex-wrap:wrap}
.f{margin-bottom:14px;text-align:left}
.f:last-child{margin-bottom:0}
.f label{display:block;font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:6px}
.f .hint{font-size:11.5px;color:var(--muted);font-weight:500;margin-top:5px}
.f input,.f select,.f textarea{width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:9px;font-size:14px;background:var(--card);color:var(--ink);font-family:inherit}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.f-check{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600}
.f-check input{width:auto}
.dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:13.5px}
.dl dt{color:var(--muted);font-weight:600}.dl dd{font-weight:700;text-align:right}
/* ===== Panneau « stock restant » (sortie) ===== */
.stock-restant{background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.stock-restant>div{display:flex;align-items:center;justify-content:space-between;gap:12px}
.stock-restant span{font-size:12px;color:var(--muted);font-weight:600}
.stock-restant b{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
.stock-restant.bad{border-color:var(--danger);background:var(--danger-bg)}
.stock-restant.bad b{color:var(--danger)}
.art-add-row{display:flex;gap:8px;align-items:stretch}
.art-add-row select{flex:1}
.art-add-row .btn{flex-shrink:0;white-space:nowrap}

/* ===== Notifications / detail trail ===== */
.notif-item{display:flex;gap:11px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.notif-item:last-child{border-bottom:none}
.notif-ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex-shrink:0;font-size:14px}
.ni-seuil{background:var(--out-bg)}.ni-rupture{background:var(--danger-bg)}.ni-anomalie{background:var(--warn-bg)}
.trail{position:relative;padding-left:18px;margin-top:6px}
.trail::before{content:'';position:absolute;left:5px;top:4px;bottom:4px;width:2px;background:var(--line)}
.trail-item{position:relative;padding:8px 0 8px 4px;font-size:12.5px}
.trail-item::before{content:'';position:absolute;left:-16px;top:13px;width:9px;height:9px;border-radius:50%;background:var(--accent);border:2px solid var(--card)}

/* ===== Toast ===== */
.toast{position:fixed;bottom:calc(24px + env(safe-area-inset-bottom, 0px));left:50%;transform:translateX(-50%) translateY(12px);background:var(--ink);color:var(--card);padding:12px 20px;border-radius:40px;z-index:9999;opacity:0;transition:.22s cubic-bezier(.34,1.56,.64,1);font-size:13px;font-weight:600;pointer-events:none;box-shadow:0 8px 32px rgba(0,0,0,.25);max-width:90vw;display:flex;align-items:center;gap:9px;letter-spacing:.1px}
@media(max-width:719px){
  .toast{bottom:calc(64px + env(safe-area-inset-bottom, 0px))}  /* remonté au-dessus de la barre de navigation système du téléphone */
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{background:var(--danger);color:#fff}
.toast.ok{background:var(--ok);color:#fff}
/* ===== Spinner (déconnexion) ===== */
.spinner{width:34px;height:34px;border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;margin:0 auto;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===== Responsive ===== */
@media(max-width:980px){
  .kpis{grid-template-columns:repeat(3,1fr)}
  .charts,.charts2{grid-template-columns:1fr}
}
@media(max-width:860px){
  .sidebar{position:fixed;left:-260px;top:0;height:100vh;height:100dvh;transition:left .25s ease;box-shadow:var(--shadow-lg);z-index:50}
  .sidebar.open{left:0}
  .content{padding:16px}
}
@media(max-width:640px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .quick-row{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr}
  .c-prix,.c-total,.c-tiers,.c-auteur,.c-act,.c-cat{display:none}
  .hero{padding:16px}
  .hero .hi{font-size:18px}
  .panel-head{align-items:flex-start}
  .chantier-pick select{max-width:140px}
  .modal-foot{flex-direction:column-reverse}
  .modal-foot .btn{width:100%;justify-content:center}
}
@media print{body *{visibility:hidden}.toast,.overlay{display:none!important}}

/* ===== Tableaux en cartes sur petit écran (lecture mobile facile) ===== */
@media(max-width:560px){
  .tbl-cards thead{display:none}
  .tbl-cards table{font-size:13.5px}
  .tbl-cards tbody,.tbl-cards tr,.tbl-cards td{display:block;width:100%}
  .tbl-cards tr{border:1px solid var(--line);border-radius:12px;margin:10px;padding:4px 12px;background:var(--card);box-shadow:var(--shadow)}
  .tbl-cards tbody tr:hover{background:var(--card)}
  .tbl-cards td{border:none;border-bottom:1px solid var(--line);padding:9px 0;display:flex;justify-content:space-between;align-items:center;gap:14px;text-align:right;white-space:normal}
  .tbl-cards tr td:last-child{border-bottom:none}
  .tbl-cards td::before{content:attr(data-label);color:var(--muted);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.3px;text-align:left;flex-shrink:0}
  .tbl-cards td:empty,.tbl-cards td[data-label=""]:empty{display:none}
  /* en mode carte, on réaffiche les colonnes masquées (l'espace n'est plus contraint) */
  .tbl-cards .c-prix,.tbl-cards .c-total,.tbl-cards .c-tiers,.tbl-cards .c-auteur,.tbl-cards .c-cat{display:flex!important}
  body.force-phone .tbl-cards .c-prix,body.force-phone .tbl-cards .c-total,body.force-phone .tbl-cards .c-tiers,body.force-phone .tbl-cards .c-auteur,body.force-phone .tbl-cards .c-cat{display:flex!important}
}
body.force-phone .tbl-cards thead{display:none}
body.force-phone .tbl-cards tbody,body.force-phone .tbl-cards tr,body.force-phone .tbl-cards td{display:block;width:100%}
body.force-phone .tbl-cards tr{border:1px solid var(--line);border-radius:12px;margin:10px;padding:4px 12px;background:var(--card);box-shadow:var(--shadow)}
body.force-phone .tbl-cards td{border:none;border-bottom:1px solid var(--line);padding:9px 0;display:flex;justify-content:space-between;align-items:center;gap:14px;text-align:right;white-space:normal}
body.force-phone .tbl-cards tr td:last-child{border-bottom:none}
body.force-phone .tbl-cards td::before{content:attr(data-label);color:var(--muted);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.3px;text-align:left;flex-shrink:0}
body.force-phone .tbl-cards td:empty{display:none}

/* ===== Mode appareil forcé ===== */
body.force-phone .menu-btn,body.force-tablet .menu-btn{display:grid}
body.force-phone .sidebar,body.force-tablet .sidebar{position:fixed;left:-280px;top:0;height:100vh;height:100dvh;transition:left .25s ease;box-shadow:var(--shadow-lg);z-index:60}
body.force-phone .sidebar.open,body.force-tablet .sidebar.open{left:0}
body.force-phone .kpis{grid-template-columns:1fr 1fr}
body.force-phone .charts,body.force-phone .charts2,body.force-tablet .charts,body.force-tablet .charts2{grid-template-columns:1fr}
body.force-phone .quick-row,body.force-phone .f-grid{grid-template-columns:1fr}
body.force-phone .btn{padding:11px 15px;font-size:14px}
body.force-phone .btn-sm{padding:9px 13px;font-size:13.5px}
body.force-phone .c-prix,body.force-phone .c-total,body.force-phone .c-tiers,body.force-phone .c-auteur,body.force-phone .c-act,body.force-phone .c-cat{display:none}
body.force-tablet .kpis{grid-template-columns:repeat(3,1fr)}
body.force-pc .menu-btn{display:none!important}
body.force-pc .sidebar{position:sticky;left:0;top:0}
body.force-pc .kpis{grid-template-columns:repeat(5,1fr)}
.dev-opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:14px;border:1.5px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);cursor:pointer;transition:.15s}
.dev-opt:hover,.dev-opt.on{border-color:var(--accent);background:var(--soft)}
.dev-ic{font-size:24px;width:34px;text-align:center;flex-shrink:0}
.dev-chk{color:var(--accent);font-weight:800;font-size:18px}
/* ===== Interrupteur activer/désactiver (page Alertes e-mail) ===== */
.switch{display:inline-flex;align-items:center;gap:9px;cursor:pointer;user-select:none}
.switch input{display:none}
.sw-track{width:42px;height:23px;border-radius:99px;background:var(--line);position:relative;transition:.2s;flex-shrink:0}
.sw-track::after{content:'';position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;background:var(--card);box-shadow:0 1px 3px rgba(0,0,0,.25);transition:.2s}
.switch input:checked+.sw-track{background:var(--ok)}
.switch input:checked+.sw-track::after{left:22px}
.sw-lbl{font-size:12.5px;font-weight:700;min-width:64px}
/* Ligne d'adresse e-mail configurée */
.mail-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;background:var(--soft)}
.mail-row .addr{flex:1;font-weight:600;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail-row .dot-mail{width:30px;height:30px;border-radius:8px;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;font-weight:800;font-size:13px;color:var(--muted);flex-shrink:0;text-transform:uppercase}

/* ===== Animations « carnet de chantier » =====
   Entrée en cascade des cartes et panneaux à chaque changement de page.
   Tout est purement CSS ; prefers-reduced-motion fige l'ensemble. */
@keyframes ijs-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.content>*{animation:ijs-in .3s ease both}
.kpis .kpi{animation:ijs-in .45s ease both}
.kpis .kpi:nth-child(1){animation-delay:.04s}
.kpis .kpi:nth-child(2){animation-delay:.1s}
.kpis .kpi:nth-child(3){animation-delay:.16s}
.kpis .kpi:nth-child(4){animation-delay:.22s}
.kpis .kpi:nth-child(5){animation-delay:.28s}
.quick-row .quick-btn{animation:ijs-in .4s ease both}
.quick-row .quick-btn:nth-child(2){animation-delay:.08s}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ===== Confort tactile (téléphones & tablettes uniquement — pointer:coarse) =====
   Le PC (souris) garde les tailles compactes actuelles : ce bloc ne s'applique
   qu'aux écrans dont le pointeur principal est le doigt.
   1) Champs de saisie à 16 px minimum : en dessous, Safari (iPhone/iPad) zoome
      automatiquement la page à chaque prise de focus — l'écran « saute » à la
      saisie. Le !important couvre aussi les champs stylés en ligne.
   2) Cibles d'appui rapprochées des 44 px recommandés : boutons, icônes,
      lignes de tableau, menu latéral, cases à cocher, interrupteurs. */
@media (pointer:coarse){
  input,select,textarea{font-size:16px!important}
  .f input,.f select,.f textarea{padding:12px 13px}
  .search{padding:10px 13px}
  .chantier-pick select,.chantier-fixed{padding:9px 12px}
  .btn{padding:12px 18px;font-size:14px}
  .btn-sm{padding:9px 14px;font-size:13px}
  .icon-btn{width:44px;height:44px;border-radius:11px}
  .nav button{padding:13px 14px;font-size:14.5px}
  .side-foot .logout{padding:12px}
  td{padding:11px 12px}
  th{padding:9px 12px}
  .chip{padding:9px 15px;font-size:13px}
  .pwd-eye{font-size:13px;padding:9px 10px}
  .modal-foot .btn,.modal-actions .btn{padding:13px 18px}
  /* Cases à cocher et boutons radio assez grands pour le doigt */
  input[type=checkbox],input[type=radio]{width:20px;height:20px;accent-color:var(--accent);flex-shrink:0}
  /* Interrupteur Activé/Désactivé agrandi (pages Alertes e-mail, Mouvements) */
  .sw-track{width:50px;height:28px}
  .sw-track::after{width:22px;height:22px}
  .switch input:checked+.sw-track::after{left:25px}
  /* Ligne d'adresse e-mail : bouton « Retirer » facile à toucher */
  .mail-row{padding:12px 14px}
}

/* ===== Page « Envoi des comptes » (Admin) — design soigné ===== */
.ce-hero{display:flex;align-items:center;gap:16px;padding:22px 24px;border-bottom:1px solid var(--line);background:linear-gradient(135deg,var(--card),var(--soft))}
.ce-hero-ic{width:52px;height:52px;border-radius:14px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;flex-shrink:0;box-shadow:0 6px 18px rgba(208,135,0,.28)}
.ce-hero-t{font-size:20px;font-weight:900;letter-spacing:-.3px;color:var(--ink)}
.ce-hero-s{font-size:12.5px;color:var(--muted);margin-top:3px}
.ce-hero-from{margin-left:auto;text-align:right;background:var(--card);border:1px solid var(--line);border-radius:11px;padding:10px 14px;flex-shrink:0}
.ce-hero-from span{display:block;font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.ce-hero-from b{font-size:13px;color:var(--ink);word-break:break-all}
.ce-body{padding:22px 24px}
.ce-sec{margin-bottom:22px}
.ce-sec:last-child{margin-bottom:0}
.ce-sec-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.ce-sec-num{width:26px;height:26px;border-radius:8px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-weight:800;font-size:13px;flex-shrink:0}
.ce-sec-t{font-size:13px;font-weight:800;color:var(--ink);text-transform:uppercase;letter-spacing:.6px}
.ce-sec-hint{font-size:11.5px;color:var(--muted);margin:-4px 0 12px 36px;font-weight:500}
.ce-types{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:11px}
.ce-type{position:relative;display:flex;align-items:flex-start;gap:11px;padding:14px 15px;border:1.5px solid var(--line);border-radius:13px;background:var(--card);cursor:pointer;transition:.16s;text-align:left;font-family:inherit;color:var(--ink)}
.ce-type:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.ce-type .ic{width:36px;height:36px;border-radius:10px;background:var(--soft);border:1px solid var(--line);display:grid;place-items:center;flex-shrink:0;color:var(--accent)}
.ce-type .tx{flex:1;min-width:0}
.ce-type .tx b{display:block;font-size:13.5px;font-weight:800;line-height:1.25}
.ce-type .tx small{display:block;font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.45}
.ce-type .ck{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;color:transparent;font-size:12px;font-weight:800;flex-shrink:0;margin-top:2px;transition:.15s}
.ce-type.on{border-color:var(--accent);background:var(--soft);box-shadow:0 0 0 3px rgba(208,135,0,.12)}
.ce-type.on .ck{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.ce-toolbar{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.ce-count{font-size:12px;font-weight:700;color:var(--muted);background:var(--soft);border:1px solid var(--line);padding:5px 11px;border-radius:99px}
.ce-chan-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.ce-chan{display:flex;align-items:center;gap:9px;padding:11px 13px;border:1.5px solid var(--line);border-radius:11px;background:var(--card);cursor:pointer;transition:.14s;font-family:inherit;color:var(--ink);text-align:left;font-size:13px}
.ce-chan:hover{border-color:var(--accent)}
.ce-chan .ck{width:20px;height:20px;border-radius:6px;border:2px solid var(--line);display:grid;place-items:center;color:transparent;font-size:12px;font-weight:800;flex-shrink:0;transition:.14s}
.ce-chan .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.ce-chan.on{border-color:var(--accent);background:var(--soft)}
.ce-chan.on .ck{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.ce-mail-add{display:flex;gap:8px}
.ce-mail-add input{flex:1;padding:11px 13px;border:1.5px solid var(--line);border-radius:10px;font-size:14px;background:var(--card);color:var(--ink);font-family:inherit}
.ce-mail-add input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(208,135,0,.16)}
.ce-mail-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}
.ce-mail-tag{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;background:var(--soft);border:1px solid var(--line);border-radius:99px;font-size:13px;font-weight:600}
.ce-mail-tag .del{width:20px;height:20px;border-radius:50%;border:none;background:var(--card);color:var(--muted);cursor:pointer;display:grid;place-items:center;font-size:14px;line-height:1;transition:.14s;font-family:inherit}
.ce-mail-tag .del:hover{background:var(--danger);color:#fff}
.ce-summary{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 16px;background:var(--soft);border:1px solid var(--line);border-radius:12px;margin-top:4px}
.ce-summary .it{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);font-weight:600}
.ce-summary .it b{color:var(--ink);font-weight:800}
.ce-summary .dot{width:6px;height:6px;border-radius:50%;background:var(--line);flex-shrink:0}
.ce-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
@media(max-width:640px){
  .ce-hero{flex-wrap:wrap}
  .ce-hero-from{margin-left:0;text-align:left;width:100%}
  .ce-types{grid-template-columns:1fr}
}