/* ═══ POLICE ENTREPRISE — Antenna (Charte JP Facilities) ═══
   Fichiers .otf dans public/fonts/ (format opentype, pas de conversion requise).
   Antenna n'existe qu'en ExtraLight/Light/Regular/Medium : le gras (600-900)
   est mappé sur Medium (synthèse navigateur au besoin), pas de monospace dédié. */
@font-face{font-family:'Antenna';src:url('../fonts/Antenna-ExtraLight.otf') format('opentype');font-weight:200;font-style:normal;font-display:swap;}
@font-face{font-family:'Antenna';src:url('../fonts/Antenna-Light.otf') format('opentype');font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:'Antenna';src:url('../fonts/Antenna-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Antenna';src:url('../fonts/Antenna-Medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Antenna';src:url('../fonts/Antenna-Medium.otf') format('opentype');font-weight:600 900;font-style:normal;font-display:swap;}
/* COMPAT — l'ancienne police « DM Mono » a été retirée. De nombreux rendus JS
   (tableaux, réfs, SVG d'analyse) utilisent encore font-family:'DM Mono'. On
   ALIASE ce nom vers Antenna pour qu'ils s'affichent aussi en Antenna sans avoir
   à éditer ~126 occurrences. (À terme, remplacer ces littéraux par 'Antenna'.) */
@font-face{font-family:'DM Mono';src:url('../fonts/Antenna-Regular.otf') format('opentype');font-weight:100 400;font-style:normal;font-display:swap;}
@font-face{font-family:'DM Mono';src:url('../fonts/Antenna-Medium.otf') format('opentype');font-weight:500 900;font-style:normal;font-display:swap;}

/* ═══ THEME — Charte JP Facilities (#ed6707) ═══ */
:root{
  --bg:#0f1117;--bg2:#161b27;--bg3:#1e2535;--bg4:#252d3d;
  --rapport-bg:#151a26;   /* fond du tableau Rapports — suit le thème (cf. [data-theme=light]) */
  --border:rgba(255,255,255,0.10);--border2:rgba(255,255,255,0.18);
  /* Lisibilité renforcée : text2/3 plus clairs en dark mode */
  --text:#f1f3f8;--text2:#b4bcd0;--text3:#8790a5;
  /* Accent = couleur de marque JP Facilities */
  --brand:#ed6707;--brand-dark:#c04f00;--brand-light:#ff8a2f;
  --accent:#ed6707;--accent2:#c04f00;
  --accent-bg:rgba(237,103,7,0.14);
  --notif-unread-bg:#2c3650;   /* notif NON LUE = fond clair/élevé (dark mode) */
  --green:#22c55e;--green-bg:rgba(34,197,94,0.14);
  --yellow:#eab308;--yellow-bg:rgba(234,179,8,0.14);
  --red:#ef4444;--red-bg:rgba(239,68,68,0.14);
  --orange:#f97316;--orange-bg:rgba(249,115,22,0.14);
  /* Alias historique conservé pour compat — maintenant teinté marque */
  --blue-bg:rgba(237,103,7,0.14);
  --purple:#8b5cf6;--purple-bg:rgba(139,92,246,0.14);
  --radius:10px;--radius-lg:14px;--shadow:0 4px 24px rgba(0,0,0,0.4);
  --glow-blue:0 0 20px rgba(237,103,7,0.28);
  --glow-brand:0 0 20px rgba(237,103,7,0.28);
  --glow-red:0 0 20px rgba(239,68,68,0.25);
  --glow-green:0 0 20px rgba(34,197,94,0.25);
  --glow-yellow:0 0 16px rgba(234,179,8,0.2);
}
[data-theme="light"]{
  --bg:#f5f6f9;--bg2:#ffffff;--bg3:#fafbfd;--bg4:#eef1f6;
  --rapport-bg:#ffffff;   /* fond du tableau Rapports en thème clair */
  --border:rgba(0,0,0,0.10);--border2:rgba(0,0,0,0.18);
  /* Lisibilité renforcée : text2/3 plus sombres en light mode */
  --text:#12172a;--text2:#374151;--text3:#6b7380;
  --shadow:0 4px 24px rgba(0,0,0,0.08);
  --notif-unread-bg:#fff7ef;   /* notif NON LUE = blanc chaud (light mode) */
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Antenna',sans-serif;background:var(--bg);color:var(--text);font-size:14px;overflow:hidden;height:100vh;transition:background .3s,color .3s;}
/* ═══ SCROLLBARS globales — VISIBLES (orange JP Facilities) sur TOUS les modules ═══ */
/* NB : scrollbar-width DOIT rester 'thin' (pas 'auto') — sur Chromium récent, une valeur
   'auto' fait IGNORER le ::-webkit-scrollbar personnalisé (retour à la barre grise de l'OS).
   Avec 'thin', le style webkit 10px orange ci-dessous s'applique bien. */
*{scrollbar-width:thin;scrollbar-color:var(--accent) var(--bg3);}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:var(--bg3);border-radius:5px;}
::-webkit-scrollbar-thumb{background:var(--accent);border-radius:5px;border:2px solid var(--bg3);min-height:40px;min-width:40px;}
::-webkit-scrollbar-thumb:hover{background:#ff8833;}
::-webkit-scrollbar-corner{background:var(--bg3);}

/* ═══ SCROLLBAR du tableau : visible (orange JP Facilities), fine ═══ */
.table-wrap{scrollbar-width:thin;scrollbar-color:var(--accent) var(--bg3);}
.table-wrap::-webkit-scrollbar{width:8px;height:8px;}
.table-wrap::-webkit-scrollbar-track{background:var(--bg3);border-radius:4px;}
.table-wrap::-webkit-scrollbar-thumb{background:var(--accent);border-radius:4px;min-height:40px;min-width:40px;}
.table-wrap::-webkit-scrollbar-thumb:hover{background:#ff8833;}
.table-wrap::-webkit-scrollbar-corner{background:var(--bg3);}

/* ─── Scrollbars orange épais ET TOUJOURS visibles pour le module Interventions ─── */
#page-interventions,
#page-interventions * {
  scrollbar-width: thin;                                /* 'thin' → laisse le ::-webkit-scrollbar 12px orange s'appliquer ('auto' le désactiverait sur Chromium) */
  scrollbar-color: var(--accent) var(--bg3);            /* thumb orange / track gris */
}
#page-interventions ::-webkit-scrollbar,
#page-interventions::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
#page-interventions ::-webkit-scrollbar-track,
#page-interventions::-webkit-scrollbar-track {
  background: var(--bg3);
  border-radius: 6px;
}
#page-interventions ::-webkit-scrollbar-thumb,
#page-interventions::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 6px;
  border: 2px solid var(--bg3);                         /* anneau pour épaississement visuel */
  min-height: 50px;
  min-width: 50px;
}
#page-interventions ::-webkit-scrollbar-thumb:hover,
#page-interventions::-webkit-scrollbar-thumb:hover {
  background: #ff8833;
}
#page-interventions ::-webkit-scrollbar-corner,
#page-interventions::-webkit-scrollbar-corner {
  background: var(--bg3);
}
.app{display:flex;height:100vh;}

/* ═══ SIDEBAR ═══ */
.sidebar{width:230px;background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;transition:background .3s;}
.logo{padding:20px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:14px;background:var(--bg2);}
[data-theme="light"] .logo{background:#1e2535;}
.logo-img{width:48px;height:48px;border-radius:10px;object-fit:contain;padding:4px;flex-shrink:0;}
.logo-name{font-size:16px;font-weight:700;letter-spacing:-.3px;line-height:1.2;color:#ffffff;}
.logo-ver{font-size:10px;color:var(--text3);font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}
.nav{padding:10px 8px;flex:1;overflow-y:auto;}
.nav-group{font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:1px;padding:10px 10px 4px;display:flex;align-items:center;cursor:pointer;user-select:none;transition:color .15s;}
.nav-group:hover{color:var(--text2);}
/* Chevron pliable du groupe : « v » (déplié) → « ‹ » (replié). */
.nav-group-chev{margin-left:auto;width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s;opacity:.7;flex:0 0 auto;margin-bottom:2px;}
.nav-group.ng-collapsed .nav-group-chev{transform:rotate(135deg);margin-bottom:0;}
/* Item masqué car son groupe est replié. PAS de !important : le sélecteur
   `.nav-item.ng-hidden` (specificité 0,2,0) l'emporte déjà sur `.nav-item`
   (0,1,0) pour cacher, tandis qu'un display:none INLINE de RBAC (auth.js)
   reste prioritaire — un module interdit n'est donc jamais révélé. */
.nav-item.ng-hidden{display:none;}
.nav-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:13px;color:var(--text2);margin-bottom:1px;transition:all .15s;}
.nav-item:hover{background:var(--bg3);color:var(--text);transform:translateX(2px);}
.nav-item.active{background:var(--blue-bg);color:var(--accent);font-weight:500;}
.nav-item svg{width:15px;height:15px;flex-shrink:0;}
.nav-badge{margin-left:auto;background:var(--red);color:white;font-size:10px;font-weight:600;padding:1px 6px;border-radius:20px;font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;transition:all .2s;}
.nav-badge.warn{background:var(--yellow);color:#000;}
/* .hidden ET badge vide (sans chiffre) → totalement invisible (pas de pastille fantôme) */
.nav-badge.hidden,
.nav-badge:empty{display:none !important;}
.sidebar-bottom{padding:12px 8px;border-top:1px solid var(--border);}
.user-card{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;cursor:pointer;}
.user-card:hover{background:var(--bg3);}
.avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#ed6707,#c04f00);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:white;flex-shrink:0;}
.u-name{font-size:13px;font-weight:500;}
.u-role{font-size:12px;color:var(--text2);}

/* ═══ MAIN ═══ */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--bg);transition:background .3s;}
.topbar{height:54px;border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 22px;gap:10px;flex-shrink:0;background:var(--bg2);transition:background .3s;}
.topbar-title-wrap{display:flex;align-items:center;gap:10px;}
.topbar-title-icon{
  width:30px;height:30px;border-radius:8px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  box-shadow:0 2px 6px rgba(237,103,7,0.30);
}
.topbar-title-icon svg{width:16px;height:16px;}
.topbar-title{font-size:16px;font-weight:600;letter-spacing:-.3px;}
.topbar .search-box{margin-left:auto;}
.search-box{display:flex;align-items:center;gap:8px;background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:0 12px;height:34px;width:230px;transition:border .2s;}
.search-box:focus-within{border-color:var(--accent);}
.search-box input{background:none;border:none;outline:none;color:var(--text);font-size:13px;font-family:inherit;width:100%;}
.search-box input::placeholder{color:var(--text3);}
.search-box svg{width:14px;height:14px;color:var(--text3);flex-shrink:0;}

/* THEME TOGGLE */
.theme-toggle{width:34px;height:34px;border-radius:50%;border:1px solid var(--border2);background:var(--bg3);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s;}
.theme-toggle:hover{background:var(--bg4);box-shadow:0 0 10px rgba(234,179,8,.3);}
.theme-toggle svg{width:16px;height:16px;stroke:var(--text2);}

/* ═══ BUTTONS ═══ */
.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:8px;font-size:13px;cursor:pointer;border:1px solid var(--border2);background:var(--bg3);color:var(--text);font-family:inherit;transition:all .2s;position:relative;overflow:hidden;}
.btn:hover{background:var(--bg4);transform:translateY(-1px);box-shadow:0 3px 10px rgba(0,0,0,.25);}
.btn:active{transform:translateY(0);}
.btn-primary{background:var(--accent);color:white;border-color:var(--accent);}
.btn-primary:hover{background:var(--accent2);border-color:var(--accent2);box-shadow:var(--glow-blue);}
.btn svg{width:13px;height:13px;}
.btn-ai{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:white;border:none;}
.btn-ai:hover{opacity:.9;box-shadow:0 4px 14px rgba(139,92,246,.4);}
.btn-sm{padding:5px 10px;font-size:12px;}
.btn-icon{width:34px;height:34px;padding:0;justify-content:center;}
.pbi-btn{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:8px;font-size:12px;cursor:pointer;border:1px solid rgba(243,156,18,.4);background:rgba(243,156,18,.1);color:#f39c12;font-family:inherit;transition:all .2s;}
.pbi-btn:hover{background:rgba(243,156,18,.2);box-shadow:0 0 12px rgba(243,156,18,.3);}

/* ═══ CONTENT ═══ */
.content{flex:1;overflow-y:auto;padding:20px 22px;}
.page{display:none;}.page.active{display:block;}

/* ═══ KPI CARDS ═══ */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px;}
.kpi{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px 18px;position:relative;overflow:hidden;cursor:pointer;transition:all .25s;}
.kpi:hover{transform:translateY(-3px);}
.kpi.blue:hover{box-shadow:var(--glow-blue);border-color:rgba(237,103,7,.4);}
.kpi.red:hover{box-shadow:var(--glow-red);border-color:rgba(239,68,68,.4);}
.kpi.green:hover{box-shadow:var(--glow-green);border-color:rgba(34,197,94,.4);}
.kpi.yellow:hover{box-shadow:var(--glow-yellow);border-color:rgba(234,179,8,.4);}
.kpi.orange:hover{box-shadow:0 0 0 1px rgba(249,115,22,.35),0 8px 24px rgba(249,115,22,.15);border-color:rgba(249,115,22,.4);}
.kpi::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;}
.kpi.blue::before{background:var(--accent);}
.kpi.green::before{background:var(--green);}
.kpi.red::before{background:var(--red);}
.kpi.yellow::before{background:var(--yellow);}
.kpi.orange::before{background:var(--orange);}
.kpi-label{font-size:12px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.6px;margin-bottom:8px;}
.kpi-value{font-size:30px;font-weight:600;font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;letter-spacing:-1px;}
.kpi-value.blue{color:var(--accent);}
.kpi-value.green{color:var(--green);}
.kpi-value.red{color:var(--red);}
.kpi-value.yellow{color:var(--yellow);}
.kpi-value.orange{color:var(--orange);}
.kpi-delta{font-size:12px;color:var(--text2);margin-top:4px;}
.kpi-arrow{position:absolute;bottom:14px;right:14px;font-size:16px;opacity:.3;transition:all .2s;}
.kpi:hover .kpi-arrow{opacity:.9;right:10px;}

/* ═══ TOOLTIP ═══ */
.tip{position:relative;}
.tip .tipbox{display:none;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--bg4);border:1px solid var(--border2);color:var(--text);font-size:11px;padding:7px 11px;border-radius:8px;white-space:nowrap;z-index:500;line-height:1.5;box-shadow:var(--shadow);pointer-events:none;min-width:140px;text-align:center;}
.tip .tipbox::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--bg4);}
.tip:hover .tipbox{display:block;}

/* ═══ HELP TOOLTIP (info-bulles explicatives génériques — help-tooltips.js) ═══ */
/* Bulle unique flottante, positionnée en JS (position:fixed → coords viewport). */
.help-tip-box{
  position:fixed; z-index:9000; max-width:280px;
  background:var(--bg4); color:var(--text); border:1px solid var(--border2);
  font-size:12px; line-height:1.5; padding:9px 12px; border-radius:9px;
  box-shadow:var(--shadow); pointer-events:none;
  opacity:0; transform:translateY(2px); transition:opacity .12s ease, transform .12s ease;
}
.help-tip-box.visible{opacity:1; transform:translateY(0);}

/* ═══ GUIDE — Manuel & bonnes pratiques (guide.js) ═══ */
/* ═══ DOCUMENTATION (module Guide, rendu par guide.js) ═══ */
/* Fond de page : simple aplat plein selon le thème — noir (sombre) / blanc (clair).
   Scopé au conteneur défilant .content quand SEUL le guide est affiché. */
.content:has(> #page-guide.active){background:#0f1117;}
[data-theme="light"] .content:has(> #page-guide.active){background:#ffffff;}
.doc{display:flex; flex-direction:column; gap:18px; max-width:1200px; margin:0 auto;}

/* En-tête (hero) */
.doc-hero{margin-bottom:0;}
.doc-hero .card-body{padding:24px 26px;}
.doc-hero-top{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.doc-hero-kicker{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:var(--accent); margin-bottom:6px;}
.doc-hero-title{font-size:26px; font-weight:700; line-height:1.2; margin:0; letter-spacing:-.3px;}
.doc-hero-owner{font-weight:400; color:var(--text3); font-size:18px;}
.doc-hero-ai{flex:0 0 auto;}
.doc-hero-pitch{color:var(--text2); font-size:14px; line-height:1.6; margin:12px 0 0; max-width:820px;}
.doc-hero-meta{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px;}
.doc-badge{display:inline-flex; align-items:center; padding:3px 10px; border-radius:20px; background:var(--accent-bg); color:var(--accent); font-size:12px; font-weight:700;}
.doc-meta-item{font-size:12px; color:var(--text3);}
.doc-meta-item + .doc-meta-item::before{content:"·"; margin-right:10px; color:var(--border2);}

/* Recherche */
.doc-search-wrap{position:relative; margin-top:18px;}
.doc-search-icon{position:absolute; left:14px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--text3); pointer-events:none;}
.doc-search{width:100%; padding:11px 40px; border-radius:10px; border:1px solid var(--border2); background:var(--bg3); color:var(--text); font-family:inherit; font-size:14px; transition:border-color .2s, box-shadow .2s;}
.doc-search:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-bg);}
.doc-search-clear{position:absolute; right:10px; top:50%; transform:translateY(-50%); border:none; background:var(--bg4); color:var(--text2); width:22px; height:22px; border-radius:50%; cursor:pointer; font-size:12px; line-height:1;}
.doc-search-empty{margin-top:12px; color:var(--text3); font-size:13px;}

/* Mise en page : sommaire + contenu */
.doc-layout{display:grid; grid-template-columns:236px 1fr; gap:28px; align-items:start;}
.doc-toc{position:sticky; top:8px; align-self:start; max-height:calc(100vh - 40px); overflow-y:auto; padding-right:6px;}
.doc-toc-title{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--text3); margin:4px 0 10px 10px;}
.doc-toc-nav{display:flex; flex-direction:column; gap:1px;}
.doc-toc-link{display:block; padding:6px 10px; border-radius:7px; font-size:13px; font-weight:600; color:var(--text2); cursor:pointer; border-left:2px solid transparent; text-decoration:none; transition:color .15s, background .15s;}
.doc-toc-link:hover{color:var(--text); background:var(--bg3);}
.doc-toc-sublist{display:flex; flex-direction:column; gap:1px; margin:1px 0 6px;}
.doc-toc-sub{display:block; padding:4px 10px 4px 20px; border-radius:7px; font-size:12.5px; color:var(--text3); cursor:pointer; border-left:2px solid transparent; text-decoration:none; transition:color .15s, background .15s;}
.doc-toc-sub:hover{color:var(--text2); background:var(--bg3);}
.doc-toc-link.active, .doc-toc-sub.active{color:var(--accent); border-left-color:var(--accent); background:var(--accent-bg);}

/* Contenu principal */
.doc-main{min-width:0;}
.doc-section{scroll-margin-top:14px; padding-bottom:12px; margin-bottom:22px; border-bottom:1px solid var(--border);}
.doc-section:last-child{border-bottom:none; margin-bottom:0;}
.doc-section-head{margin-bottom:14px;}
.doc-h2{font-size:20px; font-weight:700; margin:0; letter-spacing:-.2px;}
.doc-section-sub{font-size:13px; color:var(--text3); margin-top:3px;}
.doc-p{color:var(--text2); font-size:14px; line-height:1.7; margin:0 0 12px; max-width:820px;}

/* Glossaire (concepts) */
.doc-glossary{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px;}
.doc-term{background:var(--bg3); border:1px solid var(--border); border-radius:10px; padding:13px 15px;}
.doc-term-name{font-weight:700; font-size:13px; color:var(--text); margin-bottom:4px;}
.doc-term-def{font-size:12.5px; line-height:1.55; color:var(--text2);}

/* Réflexes essentiels (checklist) */
.doc-checklist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px;}
.doc-checklist li{position:relative; padding-left:28px; font-size:13.5px; line-height:1.6; color:var(--text2);}
.doc-checklist li::before{content:"✓"; position:absolute; left:0; top:1px; width:19px; height:19px; border-radius:50%; background:var(--accent-bg); color:var(--accent); font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center;}

/* Articles (module / transversal / parcours) */
.doc-article{background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px 18px; margin-bottom:14px; scroll-margin-top:14px;}
.doc-article-head{display:flex; align-items:center; gap:11px; margin-bottom:10px;}
.doc-article-icon{display:inline-flex; width:32px; height:32px; align-items:center; justify-content:center; border-radius:9px; background:var(--bg3); color:var(--accent); flex:0 0 auto;}
.doc-article-icon svg{width:18px; height:18px;}
.doc-h3{font-size:15px; font-weight:700; flex:1; min-width:0; margin:0;}
.doc-open-btn{flex:0 0 auto;}
.doc-access{font-size:12px; color:var(--text2); background:var(--bg3); border-radius:7px; padding:6px 10px; margin-bottom:10px;}
.doc-lead{margin:0 0 12px; font-size:13.5px; line-height:1.65; color:var(--text2);}
.doc-h4{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--text3); margin:0 0 6px;}
.doc-ul{margin:0; padding-left:18px;}
.doc-ul li{margin:5px 0; font-size:13px; line-height:1.6; color:var(--text2);}
.doc-article-foot{margin-top:14px;}

/* Étapes (parcours pas à pas) */
.doc-steps{list-style:none; counter-reset:docstep; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:11px;}
.doc-step{counter-increment:docstep; position:relative; padding:2px 0 2px 40px;}
.doc-step::before{content:counter(docstep); position:absolute; left:0; top:0; width:27px; height:27px; border-radius:50%; background:var(--accent); color:#fff; font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center;}
.doc-step-t{font-weight:600; font-size:13.5px; color:var(--text); margin-bottom:2px;}
.doc-step-d{font-size:13px; line-height:1.6; color:var(--text2);}

/* Filtre de recherche */
.doc-hidden{display:none !important;}

/* Responsive documentation */
@media (max-width:900px){
  .doc-layout{grid-template-columns:1fr;}
  .doc-toc{position:static; max-height:none; overflow:visible; border-bottom:1px solid var(--border); padding:0 0 12px;}
  .doc-toc-nav{flex-direction:row; flex-wrap:wrap; gap:5px;}
  .doc-toc-sublist{display:none;}
  .doc-toc-link{border-left:none; border:1px solid var(--border);}
  .doc-toc-link.active{border-color:var(--accent);}
}
@media (max-width:640px){
  .doc-hero-title{font-size:22px;}
  .doc-glossary{grid-template-columns:1fr;}
}
/* Parcours guidés (tutoriels pas à pas) */
.guide-tuto-intro{margin:0 0 14px; font-size:13px; line-height:1.6; color:var(--text2); max-width:820px;}
.guide-tuto-steps{list-style:none; counter-reset:tuto; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
.guide-tuto-step{counter-increment:tuto; position:relative; padding:2px 0 2px 40px;}
.guide-tuto-step::before{content:counter(tuto); position:absolute; left:0; top:0;
  width:26px; height:26px; border-radius:50%; background:var(--bg3); color:var(--accent);
  font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center;}
.guide-tuto-step-t{font-weight:600; font-size:13px; color:var(--text); margin-bottom:2px;}
.guide-tuto-step-d{font-size:13px; line-height:1.6; color:var(--text2);}
@media (max-width:640px){ .guide-grid{grid-template-columns:1fr;} }

/* ═══ SHORTCUTS BAR ═══ */
.shortcuts-bar{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap;}
.sc-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:20px;font-size:12px;cursor:pointer;border:1px solid var(--border2);background:var(--bg2);color:var(--text2);font-family:inherit;transition:all .2s;white-space:nowrap;}
.sc-btn:hover{transform:translateY(-2px);box-shadow:0 3px 12px rgba(0,0,0,.2);}
.sc-btn.sc-red:hover{border-color:var(--red);color:var(--red);box-shadow:var(--glow-red);}
.sc-btn.sc-orange:hover{border-color:var(--orange);color:var(--orange);}
.sc-btn.sc-blue:hover{border-color:var(--accent);color:var(--accent);box-shadow:var(--glow-blue);}
.sc-btn.sc-green:hover{border-color:var(--green);color:var(--green);box-shadow:var(--glow-green);}
.sc-btn.sc-yellow:hover{border-color:var(--yellow);color:var(--yellow);}
.sc-btn.sc-purple:hover{border-color:var(--purple);color:var(--purple);}

/* ═══ CARDS ═══ */
.card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:16px;transition:background .3s;}
/* ═══ Tuiles KPI — design unifié (cadre gris + liseré haut coloré via --kpc) ═══
   Utilisé par toutes les barres KPI de l'app. Cliquable = attribut onclick :
   curseur main + survol renforcé + état .active (liseré pleine couleur). */
.kpi-tile{background:var(--bg2);border:1px solid var(--border);border-top:3px solid color-mix(in srgb, var(--kpc,var(--accent)) 45%, var(--border));border-radius:10px;padding:10px 14px;cursor:default;transition:border-top-color .2s ease, box-shadow .2s ease, border-color .2s ease;}
.kpi-tile[onclick]{cursor:pointer;}
.kpi-tile[onclick]:hover{border-top-color:color-mix(in srgb, var(--kpc,var(--accent)) 72%, var(--border));}
.kpi-tile.active{border-top-color:var(--kpc,var(--accent));box-shadow:inset 0 3px 0 -1px var(--kpc,var(--accent));}
.kpi-tile .kpi-tile-lbl{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;}
.kpi-tile .kpi-tile-val{font-size:22px;font-weight:700;line-height:1.1;color:var(--kpc,var(--text));font-variant-numeric:tabular-nums;}
.card-header{padding:14px 18px 0;display:flex;align-items:center;justify-content:space-between;}
.card-title{font-size:14px;font-weight:600;}
.card-body{padding:16px 18px;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
.grid-3c{display:grid;grid-template-columns:3fr 2fr;gap:16px;margin-bottom:16px;}

/* ═══ BADGES ═══ */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:12px;font-weight:600;white-space:nowrap;}
.b-green{background:var(--green-bg);color:var(--green);}
.b-red{background:var(--red-bg);color:var(--red);}
.b-yellow{background:var(--yellow-bg);color:var(--yellow);}
.b-blue{background:var(--blue-bg);color:var(--accent);}
.b-orange{background:var(--orange-bg);color:var(--orange);}
.b-gray{background:var(--bg4);color:var(--text2);}
.b-purple{background:var(--purple-bg);color:var(--purple);}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor;}

/* ═══ ALERT STRIPS ═══ */
.alert-strip{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:8px;margin-bottom:10px;font-size:13px;transition:all .2s;}
.alert-strip:hover{transform:translateX(3px);}
.alert-strip.red{background:var(--red-bg);border:1px solid rgba(239,68,68,.2);color:var(--red);}
.alert-strip.yellow{background:var(--yellow-bg);border:1px solid rgba(234,179,8,.2);color:var(--yellow);}
.alert-strip svg{width:15px;height:15px;flex-shrink:0;}

/* ═══ DASHBOARD SUMMARY CARDS ═══ */
.summary-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;}
.sum-card{background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:12px 14px;text-align:center;cursor:pointer;transition:all .2s;position:relative;}
.sum-card:hover{background:var(--bg4);transform:translateY(-2px);border-color:var(--border2);}
.sum-card:hover .sum-tooltip{display:block;}
.sum-tooltip{display:none;position:absolute;bottom:calc(100%+8px);left:50%;transform:translateX(-50%);background:var(--bg4);border:1px solid var(--border2);color:var(--text);font-size:11px;padding:7px 11px;border-radius:8px;white-space:nowrap;z-index:500;box-shadow:var(--shadow);text-align:left;line-height:1.6;}
.sum-tooltip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--bg4);}
.sum-val{font-size:24px;font-weight:700;font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}
.sum-lbl{font-size:11px;color:var(--text2);margin-top:3px;font-weight:500;}

/* ═══ TABLE ═══ */
.table-wrap{overflow-x:auto;overflow-y:auto;max-height:calc(100vh - 260px);}
table.erp{width:100%;border-collapse:collapse;font-size:13px;min-width:1100px;}
table.erp th{padding:10px 12px;text-align:left;font-size:11px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.6px;border-bottom:2px solid var(--accent);white-space:nowrap;background:var(--bg2);position:sticky;top:0;z-index:5;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.3);}
table.erp th:hover{color:var(--text);}
table.erp td{padding:10px 12px;border-bottom:1px solid var(--border);color:var(--text);vertical-align:middle;}
table.erp tr:last-child td{border-bottom:none;}
table.erp tr:hover td{background:var(--bg3);}

/* Surbrillance des lignes en doublon — fond rouge translucide + barre latérale */
table.erp tr.duplicate-row td{background:rgba(239,68,68,0.07);border-bottom-color:rgba(239,68,68,0.18);}
table.erp tr.duplicate-row:hover td{background:rgba(239,68,68,0.13);}
table.erp tr.duplicate-row td:first-child{box-shadow:inset 3px 0 0 var(--red);}

/* Flash animé quand on clique "📍 Localiser" sur un doublon dans la modale */
/* Animation rotation 360° (utilisée par hardRefresh + spinners) */
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

@keyframes dupFlash{
  0%, 100%{background:rgba(237,103,7,0);}
  20%, 60%{background:rgba(237,103,7,0.40);box-shadow:0 0 0 2px var(--accent) inset;}
}
table.erp tr.dup-flash td{animation:dupFlash 0.6s ease-in-out 3;}

/* ═══ Surbrillance « intervention nouvellement créée » — repérage immédiat ═══ */
/* Fond orangé (opacité 75%) appliqué dans les 3 vues (tableau/grille/détail),
   posé à la création puis retiré automatiquement après ~6s côté JS
   (markNewInterventions / isNewIntervention dans interventions.js). */
@keyframes newIntvIn{ from{background:rgba(237,103,7,0.15);} to{background:rgba(237,103,7,0.75);} }
table.erp tr.intervention-new td{background:rgba(237,103,7,0.75);border-bottom-color:rgba(237,103,7,0.55);animation:newIntvIn .45s ease-out;}
table.erp tr.intervention-new:hover td{background:rgba(237,103,7,0.82);}
table.erp tr.intervention-new td:first-child{box-shadow:inset 4px 0 0 var(--accent2);}
.int-grid-card.intervention-new{background:rgba(237,103,7,0.75);border-color:var(--accent);box-shadow:var(--glow-brand);animation:newIntvIn .45s ease-out;}
.int-detail-row.intervention-new{background:rgba(237,103,7,0.75);border-color:var(--accent);box-shadow:var(--glow-brand);animation:newIntvIn .45s ease-out;}

/* ═══ MODALE LOCALISATION DOUBLONS ═══ */
.dup-group{background:var(--bg3);border:1px solid var(--border);border-left:3px solid var(--red);border-radius:8px;margin-bottom:12px;overflow:hidden;}
.dup-group-head{display:flex;align-items:center;gap:10px;padding:9px 14px;background:rgba(239,68,68,0.08);border-bottom:1px solid var(--border);font-size:12.5px;flex-wrap:wrap;}
.dup-group-num{font-weight:700;color:var(--red);font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;font-size:12px;}
.dup-group-key{flex:1;color:var(--text2);min-width:0;overflow:hidden;text-overflow:ellipsis;}
.dup-group-key strong{color:var(--text);}
.dup-group-cnt{font-size:11px;color:var(--text3);font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;padding:2px 8px;background:var(--bg2);border-radius:10px;white-space:nowrap;}
.dup-group-rows{display:flex;flex-direction:column;}
.dup-row{display:grid;grid-template-columns:120px 130px 1fr auto;gap:10px;align-items:center;padding:9px 14px;border-bottom:1px solid var(--border);transition:background .15s;}
.dup-row:last-child{border-bottom:none;}
.dup-row:hover{background:var(--bg4);}
.dup-row.keep{background:rgba(34,197,94,0.04);}
.dup-row.duplicate{background:rgba(239,68,68,0.04);}
.dup-row-tag{display:inline-block;padding:2px 8px;border-radius:4px;font-size:10px;font-weight:700;letter-spacing:.4px;text-align:center;}
.dup-row-id{font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;font-size:11px;color:var(--text3);}
.dup-row-meta{font-size:12px;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dup-row-actions{display:flex;gap:4px;justify-content:flex-end;}
.dup-row-actions .btn{padding:3px 8px;font-size:11px;}
.j-minus{font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;font-size:12.5px;font-weight:600;padding:3px 8px;border-radius:6px;text-align:center;}
.j-red{background:var(--red-bg);color:var(--red);}
.j-orange{background:var(--orange-bg);color:var(--orange);}
.j-yellow{background:var(--yellow-bg);color:var(--yellow);}
.j-green{background:var(--green-bg);color:var(--green);}

.rapport-view-btn{background:transparent;color:var(--text2);}
.rapport-view-btn.active{background:var(--accent);color:white;}

/* ═══ GRID VIEW ═══ */
.int-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;}
.int-grid-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;cursor:pointer;transition:all .2s;}
.int-grid-card:hover{transform:translateY(-2px);border-color:var(--border2);box-shadow:var(--shadow);}
.int-grid-card-meta{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px;}
.igc-field-lbl{font-size:11px;color:var(--text2);text-transform:uppercase;letter-spacing:.4px;font-weight:500;}
.igc-field-val{font-size:13px;font-weight:500;color:var(--text);margin-top:2px;}

/* ═══ DETAIL VIEW ═══ */
.int-detail-row{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;margin-bottom:10px;transition:all .15s;}
.int-detail-row:hover{border-color:var(--border2);}

/* ═══ AI SUMMARY ═══ */
.ai-tag{display:inline-flex;align-items:center;gap:3px;font-size:10px;background:linear-gradient(135deg,rgba(99,102,241,.2),rgba(139,92,246,.2));color:#a78bfa;border-radius:4px;padding:2px 6px;margin-bottom:4px;}

/* ═══ CHART BARS ═══ */
.mini-bar-chart{display:flex;gap:8px;align-items:flex-end;height:100px;padding:8px 0;}
.bar-wrap{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;cursor:pointer;}
.bar-wrap:hover .bar-body{filter:brightness(1.3);}
.bar-body{width:100%;border-radius:4px 4px 0 0;transition:all .3s;}
.bar-lbl{font-size:10px;color:var(--text3);}
.bar-val{font-size:10px;font-weight:600;color:var(--text2);}

/* Dashboard — chart hebdomadaire dynamique */
.dash-week-chart{display:flex;gap:8px;align-items:flex-end;height:130px;padding:6px 0 4px;}
.dash-week-col{display:flex;flex-direction:column;align-items:center;gap:3px;flex:1;cursor:default;min-width:0;border-radius:6px;padding:4px 2px;transition:background .15s;position:relative;}
.dash-week-col:hover{background:var(--bg3);}
.dash-week-col.today{background:linear-gradient(180deg,rgba(237,103,7,.08),transparent);border:1px solid rgba(237,103,7,.25);}
.dash-week-col.today .dash-week-day,.dash-week-col.today .dash-week-date{color:var(--accent);font-weight:700;}
.dash-week-col.past{opacity:0.6;}
.dash-week-val{font-size:11px;font-weight:700;color:var(--text2);font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;min-height:14px;}
.dash-week-bar-wrap{position:relative;width:100%;height:80px;display:flex;align-items:flex-end;justify-content:center;gap:2px;}
.dash-week-bar{width:50%;border-radius:3px 3px 0 0;transition:height .4s ease;min-height:2px;}
.dash-week-bar.realized{background:var(--green);width:30%;opacity:0.85;}
.dash-week-day{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.4px;font-weight:600;margin-top:2px;}
.dash-week-date{font-size:11px;color:var(--text2);font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}
.donut-wrap{display:flex;align-items:center;gap:20px;}
.donut-legend{display:flex;flex-direction:column;gap:8px;}
.legend-item{display:flex;align-items:center;gap:8px;font-size:12px;cursor:pointer;border-radius:6px;padding:3px 6px;transition:background .15s;}
.legend-item:hover{background:var(--bg3);}
.legend-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}

/* ═══ ALERT STRIP TIMELINE ═══ */
.tl{padding:4px 0;}
.tl-item{display:flex;gap:12px;margin-bottom:14px;cursor:pointer;border-radius:8px;padding:5px;transition:background .15s;}
.tl-item:hover{background:var(--bg3);}
.tl-spine{display:flex;flex-direction:column;align-items:center;width:20px;}
.tl-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;margin-top:4px;}
.tl-line{width:1px;flex:1;background:var(--border);margin-top:3px;}
.tl-body{flex:1;}
.tl-title{font-size:13px;font-weight:500;}
.tl-sub{font-size:11px;color:var(--text3);margin-top:2px;}

/* ═══ RAPPORTS ═══ */
.rapport-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;}
.rapport-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;cursor:pointer;transition:all .15s;}
.rapport-card:hover{border-color:var(--accent);background:var(--bg4);transform:translateY(-1px);}
.rapport-card.unread{border-left:3px solid var(--accent);}
.r-title{font-size:13px;font-weight:600;margin-bottom:4px;}
.r-meta{font-size:11px;color:var(--text3);margin-bottom:10px;}
.r-ai-preview{font-size:11px;color:var(--text2);line-height:1.6;background:var(--bg4);border-radius:6px;padding:8px 10px;margin-top:8px;}
.r-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.r-btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:5px 10px;border-radius:6px;font-size:11px;cursor:pointer;border:1px solid var(--border2);background:var(--bg2);color:var(--text2);font-family:inherit;white-space:nowrap;transition:all .15s;}
/* En grille, les boutons d'action se répartissent et passent à la ligne plutôt que de déborder de la carte. */
.r-actions .r-btn{flex:1 1 auto;min-width:0;}
.r-btn:hover{background:var(--bg4);color:var(--text);}

/* ═══ KANBAN ═══ */
.kanban-board{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:start;}
.kanban-col-header{padding:8px 12px;border-radius:8px 8px 0 0;display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;}
.kanban-col-body{border:1px solid var(--border);border-top:none;border-radius:0 0 8px 8px;min-height:300px;padding:8px;display:flex;flex-direction:column;gap:6px;background:var(--bg2);transition:all .2s;}
.kanban-col-body.drag-over{background:var(--bg4);border-color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent);}
.kanban-card{background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:10px 12px;cursor:grab;transition:all .15s;user-select:none;}
.kanban-card:active{cursor:grabbing;}
.kanban-card:hover{border-color:var(--border2);transform:translateY(-1px);box-shadow:0 3px 10px rgba(0,0,0,.3);}
.kanban-card.dragging{opacity:.4;transform:scale(.98);}

/* ═══ CHAT ═══ */
.chat-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;}
.msg{max-width:80%;}
.msg.user{align-self:flex-end;}
.msg.ai{align-self:flex-start;}
.msg-bubble{padding:10px 14px;border-radius:12px;font-size:13px;line-height:1.6;}
.msg.user .msg-bubble{background:var(--accent);color:white;border-radius:12px 12px 2px 12px;}
.msg.ai .msg-bubble{background:var(--bg3);border:1px solid var(--border);color:var(--text);border-radius:12px 12px 12px 2px;}
.msg-time{font-size:10px;color:var(--text3);margin-top:3px;text-align:right;}
.ai-indicator{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--text3);margin-bottom:4px;}

/* ═════ ACTIONS sous chaque message (Page IA) — Retry / Edit / Copy ═════ */
.msg-actions{display:flex;gap:4px;margin-top:5px;opacity:0;transition:opacity .15s;}
.msg-actions.user{justify-content:flex-end;}
.msg-actions.ai{justify-content:flex-start;}
.msg:hover .msg-actions,.msg-actions:focus-within{opacity:1;}
.msg-action{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border:1px solid var(--border);background:var(--bg3);color:var(--text3);border-radius:6px;cursor:pointer;transition:all .15s;padding:0;}
.msg-action:hover{background:var(--bg4);color:var(--text);border-color:var(--border2);transform:translateY(-1px);}
.msg-action:active{transform:translateY(0);}
.msg-action svg{width:13px;height:13px;}
.msg-action.copied{background:rgba(34,197,94,0.18);color:var(--green);border-color:rgba(34,197,94,0.4);}
.msg-action.copied::after{content:"✓";font-size:14px;}
.msg-action.copied svg{display:none;}
.msg-action.danger:hover{background:rgba(239,68,68,0.15);color:var(--red);border-color:rgba(239,68,68,0.4);}
.chat-input-row{padding:14px 16px;border-top:1px solid var(--border);display:flex;gap:8px;}
.chat-input{flex:1;background:var(--bg3);border:1px solid var(--border2);border-radius:10px;padding:10px 14px;color:var(--text);font-size:13px;font-family:inherit;outline:none;resize:none;}
.chat-input:focus{border-color:var(--accent);}
.typing-dots span{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--text3);animation:blink 1.2s infinite;margin:0 1px;}
.typing-dots span:nth-child(2){animation-delay:.2s;}
.typing-dots span:nth-child(3){animation-delay:.4s;}

/* ═══ MODAL ═══ */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.7);display:none;align-items:center;justify-content:center;z-index:200;backdrop-filter:blur(4px);}
.modal-bg.open{display:flex;}
.modal{background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius-lg);width:580px;max-width:95vw;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow);}
.modal-hdr{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--bg2);z-index:1;}
.modal-hdr-title{font-size:15px;font-weight:600;}
.modal-close{cursor:pointer;color:var(--text3);font-size:20px;line-height:1;}
.modal-close:hover{color:var(--text);}
.modal-body{padding:20px 22px;}
.modal-footer{padding:14px 22px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end;}

/* ═══ FORMS ═══ */
.form-row{margin-bottom:14px;}
.form-label{font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px;display:block;}
.form-input,.form-select,.form-textarea{width:100%;padding:9px 12px;background:var(--bg3);border:1px solid var(--border2);border-radius:8px;color:var(--text);font-size:13px;font-family:inherit;outline:none;transition:border-color .15s;}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--accent);}
.form-select option{background:var(--bg3);}
/* Icône calendrier : blanche (invert) sur thème SOMBRE pour ressortir sur fond foncé.
   opacity:1 → bien visible (le défaut navigateur est parfois grisé). */
input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(1);opacity:1;cursor:pointer;}
/* Thème CLAIR : on RETIRE l'inversion (sinon icône blanche invisible sur fond blanc) →
   icône sombre, bien visible. Accent au survol. */
[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator{filter:none;opacity:.85;cursor:pointer;}
[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator:hover{opacity:1;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.form-textarea{resize:vertical;min-height:80px;}

/* ═══ CONTRATS ═══ */
.contrat-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px 18px;margin-bottom:12px;transition:all .15s;}
.contrat-card:hover{border-color:var(--border2);}
.contrat-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:12px;}
.contrat-name{font-size:14px;font-weight:600;}
.contrat-ref{font-size:11px;color:var(--text3);font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;margin-top:2px;}
.contrat-meta{display:flex;gap:16px;flex-wrap:wrap;}
.cm-item{font-size:12px;color:var(--text3);}
.cm-val{font-size:13px;font-weight:500;color:var(--text);}
.progress-bar{height:5px;background:var(--bg4);border-radius:3px;overflow:hidden;margin-top:10px;}
.progress-fill{height:100%;border-radius:3px;background:var(--accent);transition:width .5s;}

/* ═══ MODULE CONTRATS — VUES GRILLE/TABLEAU ═══ */
/* ═══ LIAISONS CONTRATS ═══ */
.liaisons-panel{background:var(--bg);border-top:2px solid var(--accent);margin-top:16px;animation:fadeIn .2s;}
.liaisons-hdr{display:flex;align-items:center;gap:10px;padding:14px 0 12px;flex-wrap:wrap;}
.liaisons-title{font-size:15px;font-weight:700;flex-shrink:0;}
.liaisons-toolbar{display:flex;gap:8px;flex-wrap:wrap;flex:1;}
.lv-tab{padding:5px 14px;border-radius:20px;font-size:12px;font-weight:500;cursor:pointer;border:1px solid var(--border);background:var(--bg2);color:var(--text2);transition:all .15s;}
.lv-tab.active{background:var(--accent);color:#fff;border-color:var(--accent);}
table.erp-liaisons{width:100%;border-collapse:collapse;font-size:12.5px;}
table.erp-liaisons th{padding:9px 12px;text-align:left;font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.6px;border-bottom:1px solid var(--border);background:var(--bg2);position:sticky;top:0;white-space:nowrap;cursor:pointer;}
table.erp-liaisons th:hover{color:var(--text);}
table.erp-liaisons td{padding:9px 12px;border-bottom:1px solid var(--border);color:var(--text);font-size:12.5px;vertical-align:middle;}
table.erp-liaisons tr:last-child td{border-bottom:none;}
table.erp-liaisons tr:hover td{background:var(--bg3);}

.lst-group-hdr{background:var(--bg3) !important;font-weight:700 !important;font-size:12px !important;color:var(--text) !important;padding:10px 12px !important;border-top:1px solid var(--border2) !important;}
.lst-group-hdr td{color:var(--text) !important;font-weight:700 !important;padding:10px 12px !important;}
.lst-group-row td:first-child{padding-left:26px !important;color:var(--text2);}
.liaisons-empty{text-align:center;padding:40px 20px;font-size:13px;color:var(--text3);}

/* Vue grille contrats : cartes 2 colonnes style Dynamics */
.contrats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px;}
.cg-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:0;overflow:hidden;cursor:pointer;transition:all .2s;}
.cg-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--border2);}
.cg-card-top{padding:14px 16px 10px;border-bottom:1px solid var(--border);}
.cg-card-body{padding:12px 16px;}
.cg-card-footer{padding:10px 16px;border-top:1px solid var(--border);background:var(--bg3);display:flex;align-items:center;gap:8px;}
.cg-meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;}

.cg-meta-item .cg-lbl{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.4px;margin-bottom:2px;}
.cg-meta-item .cg-val{font-size:12px;font-weight:500;color:var(--text);}

/* Vue tableau contrats */
table.erp-contrats{width:100%;border-collapse:collapse;font-size:12.5px;}
table.erp-contrats th{padding:9px 12px;text-align:left;font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.6px;border-bottom:1px solid var(--border);background:var(--bg2);position:sticky;top:0;cursor:pointer;white-space:nowrap;}
table.erp-contrats th:hover{color:var(--text);}
table.erp-contrats td{padding:10px 12px;border-bottom:1px solid var(--border);color:var(--text);vertical-align:middle;}
table.erp-contrats tr:last-child td{border-bottom:none;}
table.erp-contrats tr:hover td{background:var(--bg3);}
.prog-cell{display:flex;align-items:center;gap:8px;}
.prog-mini{flex:1;height:5px;background:var(--bg4);border-radius:3px;overflow:hidden;min-width:60px;}
.prog-mini-fill{height:100%;border-radius:3px;transition:width .5s;}

/* ═══ MODULE UTILISATEURS — VUES GRILLE/TABLEAU ═══ */
/* Vue grille utilisateurs */
.users-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;}
.ug-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px 16px;cursor:pointer;transition:all .2s;text-align:center;}
.ug-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--border2);}
.ug-avatar{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#ed6707,#c04f00);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;color:white;margin:0 auto 10px;}
.ug-name{font-size:14px;font-weight:600;margin-bottom:3px;}
.ug-role{font-size:11px;color:var(--text3);margin-bottom:10px;}
.ug-tags{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin-bottom:10px;}
.ug-meta{font-size:11px;color:var(--text3);line-height:1.6;}
.ug-actions{display:flex;gap:6px;justify-content:center;padding-top:10px;border-top:1px solid var(--border);margin-top:8px;}

/* Vue tableau utilisateurs */
table.erp-users{width:100%;border-collapse:collapse;font-size:12.5px;}
table.erp-users th{padding:9px 12px;text-align:left;font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.6px;border-bottom:1px solid var(--border);background:var(--bg2);position:sticky;top:0;cursor:pointer;white-space:nowrap;}
table.erp-users th:hover{color:var(--text);}
table.erp-users td{padding:10px 12px;border-bottom:1px solid var(--border);color:var(--text);vertical-align:middle;}
table.erp-users tr:last-child td{border-bottom:none;}
table.erp-users tr:hover td{background:var(--bg3);}

/* Switcher de vue commun (réutilisé pour contrats + users) */
.view-switcher{display:flex;background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:2px;gap:1px;}
.vs-btn{padding:5px 10px;border:none;border-radius:6px;background:transparent;color:var(--text3);cursor:pointer;font-size:12px;font-family:inherit;transition:all .15s;}
.vs-btn.active{background:var(--accent);color:white;}
.vs-btn:hover:not(.active){background:var(--bg4);color:var(--text);}

/* ═══ ANALYSE ═══ */
.analyse-kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px;}

/* ─── COCKPIT EXÉCUTIF ─── */
.analyse-cockpit{padding:0;overflow:hidden;}
.cockpit-grid{display:grid;grid-template-columns:200px 1fr 280px;gap:0;align-items:stretch;}
.cockpit-grid > div{padding:18px 20px;}

/* Colonne 1 : Score */
.cockpit-score{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:linear-gradient(180deg,var(--bg3),var(--bg2));border-right:1px solid var(--border);}
.cockpit-score-label{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;margin-top:4px;}
.cockpit-delta{font-size:11px;color:var(--text2);margin-top:6px;font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}
.cockpit-delta.trend-up{color:var(--green);}
.cockpit-delta.trend-down{color:var(--red);}

/* Colonne 2 : Verdict + breakdown */
.cockpit-main{display:flex;flex-direction:column;gap:12px;}
.cockpit-verdict{padding:10px 14px;background:var(--bg3);border-radius:8px;border-left:4px solid var(--accent);}
.cockpit-verdict-title{font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--text3);font-weight:700;margin-bottom:4px;}
.cockpit-verdict-text{font-size:14px;color:var(--text);font-weight:500;line-height:1.45;}
.cockpit-breakdown{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.cockpit-sub{display:flex;flex-direction:column;gap:5px;}
.cockpit-sub-head{display:flex;justify-content:space-between;align-items:baseline;}
.cockpit-sub-lbl{font-size:10.5px;color:var(--text3);text-transform:uppercase;letter-spacing:.4px;font-weight:600;}
.cockpit-sub-val{font-size:15px;font-weight:700;font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}
.cockpit-sub-bar{height:4px;background:var(--bg4);border-radius:2px;overflow:hidden;}
.cockpit-sub-bar > div{height:100%;border-radius:2px;transition:width .6s ease;}
.cockpit-projection{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--bg4);border-radius:6px;font-size:12px;color:var(--text2);}
.cockpit-projection-icon{font-size:18px;font-weight:700;}

/* Colonne 3 : Statut compact */
.cockpit-side{background:var(--bg3);border-left:1px solid var(--border);display:flex;flex-direction:column;gap:10px;}
.cockpit-side-title{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--text3);font-weight:700;}
.cockpit-side-meta{font-size:10.5px;color:var(--text3);margin-top:-6px;}
.cockpit-statut-row{display:flex;flex-direction:column;gap:6px;}
.cockpit-statut-pill{display:flex;align-items:center;gap:8px;padding:7px 10px;background:var(--bg2);border:1px solid var(--border);border-radius:6px;font-size:12px;color:var(--text2);}
.cockpit-statut-pill .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.cockpit-statut-pill .dot.green{background:var(--green);}
.cockpit-statut-pill .dot.orange{background:var(--orange);}
.cockpit-statut-pill .dot.red{background:var(--red);}
.cockpit-statut-pill strong{color:var(--text);font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;font-size:13px;}
.cockpit-statut-pill .pct{margin-left:auto;color:var(--text3);font-size:11px;font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}
.cockpit-statut-bar{display:flex;height:6px;border-radius:3px;overflow:hidden;background:var(--bg4);margin-top:4px;}
.cockpit-statut-bar > div{transition:flex .6s ease;}
.cockpit-statut-bar > div.green{background:var(--green);}
.cockpit-statut-bar > div.orange{background:var(--orange);}
.cockpit-statut-bar > div.red{background:var(--red);}

@media (max-width:1100px){
  .cockpit-grid{grid-template-columns:1fr;}
  .cockpit-score,.cockpit-side{border:none;border-bottom:1px solid var(--border);}
  .cockpit-breakdown{grid-template-columns:repeat(2,1fr);}
}

/* ─── DÉCISIONS À PRENDRE ─── */
.decisions-card .card-title-pulse{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 0 rgba(249,115,22,0.6);animation:pulseDot 1.8s infinite;}
@keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(249,115,22,0.5);}70%{box-shadow:0 0 0 8px rgba(249,115,22,0);}100%{box-shadow:0 0 0 0 rgba(249,115,22,0);}}
.decisions-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.decision-card{display:flex;gap:12px;padding:14px 16px;background:var(--bg3);border:1px solid var(--border);border-radius:10px;position:relative;overflow:hidden;transition:transform .15s,border-color .15s;}
.decision-card:hover{transform:translateY(-2px);}
.decision-card.red{border-color:rgba(239,68,68,.25);background:linear-gradient(135deg,var(--bg3),rgba(239,68,68,.04));}
.decision-card.orange{border-color:rgba(249,115,22,.25);background:linear-gradient(135deg,var(--bg3),rgba(249,115,22,.04));}
.decision-card.green{border-color:rgba(34,197,94,.25);background:linear-gradient(135deg,var(--bg3),rgba(34,197,94,.04));}
.decision-priority{flex-shrink:0;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px;font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;align-self:flex-start;}
.decision-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;}
.decision-head{display:flex;align-items:center;gap:8px;}
.decision-icon{font-size:14px;}
.decision-title{font-size:13.5px;font-weight:600;color:var(--text);line-height:1.3;}
.decision-context{font-size:11.5px;color:var(--text2);line-height:1.5;}
.decision-impact{font-size:11px;color:var(--text2);padding:6px 8px;background:var(--bg4);border-radius:5px;line-height:1.4;}
.decision-impact-lbl{display:inline-block;font-size:9px;text-transform:uppercase;letter-spacing:.5px;font-weight:700;color:var(--text3);margin-right:4px;}

@media (max-width:1100px){
  .decisions-grid{grid-template-columns:1fr;}
}

/* Projection trajectoire */
.trajectory-projection{font-weight:600;}


/* Hero "Santé du parc" : 3 statuts (vert/orange/rouge) + barre composite */
.analyse-status-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px;}
.analyse-status-card{position:relative;border-radius:var(--radius-lg);padding:18px 20px;border:1px solid var(--border);background:var(--bg3);overflow:hidden;cursor:default;transition:transform .2s,box-shadow .2s;}
.analyse-status-card:hover{transform:translateY(-2px);}
.analyse-status-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:4px 0 0 4px;}
.analyse-status-card.green::before{background:var(--green);}
.analyse-status-card.orange::before{background:var(--orange);}
.analyse-status-card.red::before{background:var(--red);}
.analyse-status-card.green:hover{box-shadow:var(--glow-green);}
.analyse-status-card.orange:hover{box-shadow:0 0 0 1px var(--orange),0 4px 18px rgba(237,103,7,.18);}
.analyse-status-card.red:hover{box-shadow:var(--glow-red);}
.analyse-status-head{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.analyse-status-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.analyse-status-dot.green{background:var(--green);box-shadow:0 0 0 3px rgba(34,197,94,.15);}
.analyse-status-dot.orange{background:var(--orange);box-shadow:0 0 0 3px rgba(237,103,7,.15);}
.analyse-status-dot.red{background:var(--red);box-shadow:0 0 0 3px rgba(239,68,68,.15);}
.analyse-status-lbl{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;font-weight:600;}
.analyse-status-val{font-size:32px;font-weight:700;font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;line-height:1.1;margin-top:4px;}
.analyse-status-val.green{color:var(--green);}
.analyse-status-val.orange{color:var(--orange);}
.analyse-status-val.red{color:var(--red);}
.analyse-status-sub{font-size:11px;color:var(--text3);margin-top:6px;}
.status-insight{font-size:11px;color:var(--text2);margin-top:10px;padding-top:10px;border-top:1px dashed var(--border);line-height:1.5;}
.status-insight strong{color:var(--text);font-weight:600;}
.status-insight-label{display:inline-block;font-size:9.5px;text-transform:uppercase;letter-spacing:.4px;font-weight:700;color:var(--text3);margin-right:6px;padding:1px 6px;border-radius:3px;background:var(--bg4);}
.status-insight-label.red{color:var(--red);background:rgba(239,68,68,.12);}
.analyse-status-card.green .status-insight{border-top-color:rgba(34,197,94,.25);}
.analyse-status-card.orange .status-insight{border-top-color:rgba(249,115,22,.25);}
.analyse-status-card.red .status-insight{border-top-color:rgba(239,68,68,.25);}
.analyse-status-bar{display:flex;height:14px;border-radius:8px;overflow:hidden;background:var(--bg4);box-shadow:inset 0 1px 2px rgba(0,0,0,.08);}
.analyse-status-bar > div{display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;transition:flex .8s cubic-bezier(.4,0,.2,1);min-width:0;}
.analyse-status-bar > div.green{background:var(--green);}
.analyse-status-bar > div.orange{background:var(--orange);}
.analyse-status-bar > div.red{background:var(--red);}
@media (max-width:760px){
  .analyse-status-grid{grid-template-columns:1fr;}
  .analyse-kpi-grid{grid-template-columns:1fr;}
}

/* Scorecards sous-traitants (grille de cartes) */
.tech-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.tech-card{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--bg3);border:1px solid var(--border);border-radius:10px;transition:transform .15s,box-shadow .15s;cursor:default;}
.tech-card:hover{transform:translateY(-1px);box-shadow:var(--shadow);}
.tech-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#ed6707,#c04f00);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0;}
.tech-body{flex:1;min-width:0;}
.tech-name{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tech-meta{font-size:10px;color:var(--text3);margin-top:2px;display:flex;gap:8px;flex-wrap:wrap;}
.tech-meta .pill{padding:1px 6px;border-radius:6px;background:var(--bg4);}
.tech-meta .pill.red{color:var(--red);background:var(--red-bg);}
.tech-donut{width:46px;height:46px;flex-shrink:0;position:relative;}
.tech-donut .pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}

/* Donut générique (équipements/types) */
.donut-wrap{display:flex;align-items:center;gap:18px;padding:6px 0;}
.donut-wrap svg{flex-shrink:0;}
.donut-legend{flex:1;display:flex;flex-direction:column;gap:7px;min-width:0;}
.donut-legend-row{display:flex;align-items:center;gap:8px;font-size:12px;}
.donut-legend-row .swatch{width:10px;height:10px;border-radius:3px;flex-shrink:0;}
.donut-legend-row .name{flex:1;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.donut-legend-row .nb{color:var(--text);font-weight:600;font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}
.donut-legend-row .pct{color:var(--text3);font-size:11px;width:38px;text-align:right;font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}

/* Area chart pour évolution mensuelle */
.area-chart-wrap{position:relative;}
.area-chart-wrap svg{width:100%;height:200px;display:block;}
.area-tooltip{position:absolute;background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:6px 9px;font-size:11px;pointer-events:none;opacity:0;transition:opacity .15s;box-shadow:var(--shadow);white-space:nowrap;z-index:5;}
.area-summary{display:flex;gap:18px;flex-wrap:wrap;align-items:center;font-size:12.5px;color:var(--text3);margin-top:12px;padding-top:12px;border-top:1px solid var(--border);}
.area-summary strong{color:var(--text);font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;font-weight:700;}

/* Site cards (top sites) */
.site-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
.site-card{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;border:1px solid var(--border);background:var(--bg3);transition:transform .15s;}
.site-card:hover{transform:translateY(-1px);}
.site-rank{width:24px;height:24px;border-radius:6px;background:var(--bg4);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--text2);flex-shrink:0;}
.site-name{flex:1;font-size:12px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.site-nb{font-size:14px;font-weight:700;font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}

/* Sites à risque — cartes compactes avec mini-donut */
.risk-cards-grid{display:flex;flex-direction:column;gap:8px;}
.risk-card{display:flex;align-items:center;gap:12px;padding:11px 14px;background:var(--bg3);border:1px solid var(--border);border-radius:10px;position:relative;overflow:hidden;transition:transform .15s,border-color .15s;}
.risk-card:hover{transform:translateX(2px);border-color:var(--border2);}
.risk-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;}
.risk-card.critical::before{background:var(--red);}
.risk-card.warning::before{background:var(--orange);}
.risk-card.healthy::before{background:var(--green);}

.risk-card-rank{width:22px;height:22px;border-radius:6px;background:var(--bg4);display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;color:var(--text2);flex-shrink:0;font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}
.risk-card.critical .risk-card-rank{background:var(--red);color:#fff;}

.risk-card-donut-wrap{position:relative;flex-shrink:0;}
.risk-dot{position:absolute;top:-2px;right:-2px;width:8px;height:8px;border-radius:50%;border:1.5px solid var(--bg3);box-shadow:0 0 6px rgba(0,0,0,.4);}
.risk-dot.red{background:var(--red);}
.risk-dot.orange{background:var(--orange);}

.risk-card-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;}
.risk-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.risk-card-name{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0;}
.risk-card-badge{font-size:9.5px;text-transform:uppercase;letter-spacing:.5px;font-weight:700;padding:2px 8px;border-radius:4px;flex-shrink:0;}

.risk-card-stats{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--text2);flex-wrap:wrap;}
.risk-stat{display:inline-flex;align-items:center;gap:4px;font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;font-weight:600;color:var(--text);}
.risk-stat small{font-family:inherit;font-size:10px;font-weight:400;color:var(--text3);text-transform:lowercase;}
.risk-stat.mute{color:var(--text3);}
.risk-stat.red{color:var(--red);}
.risk-stat.orange{color:var(--orange);}
.risk-stat.green{color:var(--green);}
.risk-stat-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.risk-stat-dot.red{background:var(--red);}
.risk-stat-dot.orange{background:var(--orange);}
.risk-stat-dot.green{background:var(--green);}
.risk-stat-total{margin-left:auto;color:var(--text3);font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;font-size:10.5px;}

.risk-card-score{width:46px;height:46px;border-radius:50%;border:2px solid var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;line-height:1;}
.risk-card-score-val{font-size:14px;font-weight:700;font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}
.risk-card-score-lbl{font-size:8px;color:var(--text3);font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;margin-top:1px;}

/* Trajectoire de réalisation — version avec zones colorées et points par mois */
.trajectory-wrap-v2{display:flex;flex-direction:column;gap:12px;}
.trajectory-head-v2{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.trajectory-head-left{display:flex;align-items:baseline;gap:10px;}
.trajectory-val{font-size:42px;font-weight:700;font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;line-height:1;letter-spacing:-1px;}
.trajectory-label{font-size:12px;color:var(--text3);}
.trajectory-verdict{padding:7px 14px;border-radius:8px;font-size:12.5px;font-weight:600;white-space:nowrap;align-self:flex-start;}
.trajectory-svg-v2{width:100%;}
.trajectory-svg-v2 svg{width:100%;height:auto;}

/* ═════ Toggle entre les 3 vues de la trajectoire ═════ */
.traj-view-toggle{display:flex;background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:3px;gap:2px;width:fit-content;box-shadow:inset 0 1px 2px rgba(0,0,0,.08);}
.traj-tab{padding:7px 16px;border:none;background:transparent;color:var(--text3);font-size:12px;font-weight:500;cursor:pointer;border-radius:7px;font-family:inherit;transition:all .18s;display:inline-flex;align-items:center;gap:5px;}
.traj-tab:hover{background:var(--bg4);color:var(--text);}
.traj-tab.active{background:var(--accent);color:#fff;font-weight:600;box-shadow:0 2px 6px rgba(237,103,7,.3);}

/* Animation d'apparition de la zone graphique */
@keyframes trajFadeIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}
.traj-bars-wrap,.traj-heat-grid,.traj-cards-grid{animation:trajFadeIn .25s ease-out;}

/* ═════ VUE 1 — BARRES HORIZONTALES (optimisée) ═════ */
.traj-bars-wrap{display:flex;flex-direction:column;gap:8px;padding:6px 2px;}
.traj-bars-head{display:grid;grid-template-columns:90px 1fr 58px 50px 64px;gap:10px;align-items:center;height:18px;position:relative;font-size:9.5px;color:var(--text3);font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding-bottom:4px;border-bottom:1px solid var(--border);margin-bottom:4px;}
.traj-bars-head-lbl{text-align:right;}
.traj-bars-head-lbl:first-child{text-align:left;}
.traj-bars-head-track{height:14px;}
.traj-bars-axis-zero,.traj-bars-axis-100{position:absolute;top:0;color:var(--text3);font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;font-size:9px;font-weight:500;}
.traj-bars-axis-zero{left:0;}
.traj-bars-axis-100{right:0;}
.traj-bars-axis-tgt{position:absolute;top:0;transform:translateX(-50%);color:var(--green);font-weight:700;font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;font-size:10px;white-space:nowrap;}

@keyframes trajBarFill{from{width:0;}to{width:var(--w);}}
.traj-bar-row{display:grid;grid-template-columns:90px 1fr 58px 50px 64px;gap:10px;align-items:center;font-size:12px;padding:5px 6px;border-radius:6px;transition:background .15s;}
.traj-bar-row:hover{background:var(--bg3);}
.traj-bar-row:hover .traj-bar-fill{filter:brightness(1.18);}
.traj-bar-row.current{background:linear-gradient(90deg,rgba(237,103,7,.10),rgba(237,103,7,.02));box-shadow:inset 3px 0 0 var(--accent);}
.traj-bar-month{font-weight:600;color:var(--text2);text-transform:capitalize;display:flex;align-items:center;gap:5px;font-size:12.5px;}
.traj-bar-month em{font-style:normal;font-size:10px;color:var(--accent);font-weight:600;}
.traj-bar-badge{font-size:13px;line-height:1;}
.traj-bar-badge.best{filter:drop-shadow(0 0 4px rgba(34,197,94,.6));}
.traj-bar-badge.worst{filter:drop-shadow(0 0 4px rgba(239,68,68,.5));}
.traj-bar-track{position:relative;height:20px;background:var(--bg3);border-radius:5px;overflow:hidden;border:1px solid var(--border);}
.traj-bar-fill{height:100%;border-radius:5px 0 0 5px;width:var(--w);animation:trajBarFill .8s cubic-bezier(.4,0,.2,1);transition:filter .15s;box-shadow:0 0 10px rgba(255,255,255,.05) inset;}
.traj-bar-target{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--green);box-shadow:0 0 0 1.5px rgba(34,197,94,.3),0 0 6px rgba(34,197,94,.4);transform:translateX(-50%);pointer-events:none;}
.traj-bar-target::before{content:"";position:absolute;top:-4px;left:-3px;width:0;height:0;border:4px solid transparent;border-top-color:var(--green);}
.traj-bar-val{font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;font-weight:700;font-size:14px;text-align:right;}
.traj-bar-sub{font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;font-size:11px;color:var(--text3);text-align:right;}
.traj-bar-trend{font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;font-size:11px;font-weight:600;text-align:right;}
.traj-bar-trend.up{color:var(--green);}
.traj-bar-trend.down{color:var(--red);}
.traj-bar-trend.mute{color:var(--text3);font-weight:400;}

/* ═════ VUE 2 — HEATMAP CALENDRIER (optimisée) ═════ */
.traj-heat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:8px;padding:6px 2px;}
.traj-heat-cell{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:14px 8px 10px;border-radius:10px;border:1.5px solid;transition:transform .18s,box-shadow .18s,border-color .15s;cursor:default;text-align:center;overflow:hidden;}
.traj-heat-cell::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(255,255,255,0.08),transparent 70%);pointer-events:none;}
.traj-heat-cell:hover{transform:translateY(-3px);box-shadow:0 6px 16px rgba(0,0,0,0.22);}
.traj-heat-cell.current{border-width:3px;transform:scale(1.04);box-shadow:0 0 0 2px rgba(237,103,7,.25),0 6px 18px rgba(0,0,0,0.28);z-index:2;}
.traj-heat-cell.current:hover{transform:scale(1.04) translateY(-3px);}
.traj-heat-cell.best{box-shadow:0 0 0 1px rgba(34,197,94,.35);}
.traj-heat-cell.worst{box-shadow:0 0 0 1px rgba(239,68,68,.35);}
.traj-heat-badge{position:absolute;top:5px;right:6px;font-size:12px;line-height:1;}
.traj-heat-month{font-size:11px;font-weight:600;color:var(--text2);text-transform:capitalize;}
.traj-heat-month em{font-style:normal;color:var(--accent);font-weight:700;}
.traj-heat-val{font-size:22px;font-weight:700;font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;line-height:1.1;letter-spacing:-0.5px;}
.traj-heat-footer{display:flex;align-items:center;gap:6px;justify-content:center;font-size:10px;}
.traj-heat-sub{color:var(--text3);font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}
.traj-heat-trend{font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;font-weight:700;font-size:10px;padding:1px 5px;border-radius:8px;}
.traj-heat-trend.up{color:var(--green);background:rgba(34,197,94,0.15);}
.traj-heat-trend.down{color:var(--red);background:rgba(239,68,68,0.15);}
.traj-heat-trend.mute{color:var(--text3);background:var(--bg4);font-weight:500;}

/* ═════ VUE 3 — CARTES (optimisée) ═════ */
.traj-cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:11px;padding:6px 2px;}
.traj-card{position:relative;display:flex;flex-direction:column;gap:6px;padding:13px 14px 12px;background:var(--bg3);border:1px solid var(--border);border-top:3px solid;border-radius:9px;transition:transform .18s,box-shadow .18s;}
.traj-card:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,0.22);}
.traj-card.current{background:linear-gradient(180deg,rgba(237,103,7,.08),var(--bg3) 60%);box-shadow:0 0 0 1.5px var(--accent),0 4px 14px rgba(237,103,7,.12);}
.traj-card-header{display:flex;align-items:center;justify-content:space-between;gap:6px;}
.traj-card-month{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;font-weight:700;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.traj-card.current .traj-card-month{color:var(--accent);}
.traj-card-badge{font-size:10px;font-weight:700;padding:2px 7px;border-radius:10px;white-space:nowrap;}
.traj-card-badge.best{color:var(--green);background:rgba(34,197,94,.14);border:1px solid rgba(34,197,94,.3);}
.traj-card-badge.worst{color:var(--red);background:rgba(239,68,68,.14);border:1px solid rgba(239,68,68,.3);}
.traj-card-val{font-size:30px;font-weight:700;font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;line-height:1;letter-spacing:-1px;margin:2px 0;}
.traj-card-mini-bar{position:relative;height:6px;background:var(--bg4);border-radius:3px;overflow:visible;margin:2px 0 4px;}
.traj-card-mini-fill{height:100%;border-radius:3px;box-shadow:0 0 6px rgba(255,255,255,.05);}
.traj-card-mini-target{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--green);transform:translateX(-50%);box-shadow:0 0 4px rgba(34,197,94,.5);}
.traj-card-detail{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:11.5px;color:var(--text2);font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}
.traj-card-detail strong{color:var(--text);font-weight:700;}
.traj-card-trend{font-weight:700;font-size:11px;font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}
.traj-card-trend.up{color:var(--green);}
.traj-card-trend.down{color:var(--red);}
.traj-card-trend.mute{color:var(--text3);font-weight:500;}

.traj-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding-top:12px;border-top:1px solid var(--border);}
.traj-stat{display:flex;flex-direction:column;gap:4px;padding:12px 14px;background:var(--bg3);border-radius:8px;border:1px solid var(--border);}
.traj-stat-lbl{font-size:10.5px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;font-weight:600;}
.traj-stat-val{font-size:22px;font-weight:700;font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;line-height:1.1;}
.traj-stat-sub{font-size:11px;color:var(--text3);font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}
.traj-stat-sub.trend-up{color:var(--green);font-weight:600;}
.traj-stat-sub.trend-down{color:var(--red);font-weight:600;}
@media (max-width:700px){
  .traj-stats{grid-template-columns:1fr;}
}

/* Familles d'équipements — donut + cartes par famille */
.famille-wrap{display:flex;flex-direction:column;gap:14px;}
.famille-donut-block{display:flex;align-items:center;gap:24px;padding:8px 4px;}
.famille-donut-meta{display:flex;flex-direction:column;gap:8px;flex:1;}
.famille-donut-meta-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:6px 10px;background:var(--bg3);border-radius:6px;}
.famille-donut-meta-lbl{font-size:10.5px;color:var(--text3);text-transform:uppercase;letter-spacing:.4px;font-weight:600;}
.famille-donut-meta-val{font-size:13px;font-weight:600;color:var(--text);text-align:right;}
.famille-cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;}
.famille-card{display:flex;background:var(--bg3);border:1px solid var(--border);border-radius:8px;overflow:hidden;transition:transform .15s,border-color .15s;}
.famille-card:hover{transform:translateY(-1px);border-color:var(--border2);}
.famille-stripe{width:4px;flex-shrink:0;}
.famille-body{flex:1;padding:8px 11px;display:flex;flex-direction:column;gap:5px;min-width:0;}
.famille-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
.famille-name{font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0;}
.famille-nb{font-size:15px;font-weight:700;font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;color:var(--text);flex-shrink:0;}
.famille-bar{height:4px;background:var(--bg4);border-radius:2px;overflow:hidden;}
.famille-fill{height:100%;border-radius:2px;transition:width .6s ease;}
.famille-foot{display:flex;align-items:baseline;gap:4px;}
.famille-pct{font-size:11px;font-weight:700;font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;color:var(--text2);}
.famille-detail{font-size:10px;color:var(--text3);}
.famille-insight{font-size:11.5px;color:var(--text2);padding:8px 10px;background:var(--bg3);border-left:3px solid var(--accent);border-radius:0 6px 6px 0;line-height:1.5;}
@media (max-width:600px){
  .famille-donut-block{flex-direction:column;align-items:center;text-align:center;}
}

/* Pareto 80/20 — modèle d'origine avec lisibilité améliorée */
.pareto-chart-wrap{display:flex;flex-direction:column;gap:12px;}
.pareto-chart-wrap svg{cursor:default;}
.pareto-chart-wrap rect[data-tooltip]{transition:opacity .15s,filter .15s;}
.pareto-chart-wrap rect[data-tooltip]:hover{opacity:1 !important;filter:brightness(1.15);}

/* Bandeau VITAL FEW — au-dessus du graphe (au lieu de chevaucher les barres) */
.pareto-vital-banner{display:flex;align-items:center;gap:10px;padding:8px 14px;background:rgba(239,68,68,0.08);border:1px solid rgba(239,68,68,0.25);border-radius:8px;}
.pareto-vital-banner .pareto-vital-dot{width:10px;height:10px;border-radius:50%;background:var(--red);box-shadow:0 0 0 3px rgba(239,68,68,0.18);flex-shrink:0;}
.pareto-vital-text{font-size:12px;font-weight:700;color:var(--red);letter-spacing:0.8px;text-transform:uppercase;}

.pareto-legend{display:flex;flex-wrap:wrap;gap:18px;font-size:12px;color:var(--text2);justify-content:center;padding:6px 4px 0;}
.pareto-legend > span{display:inline-flex;align-items:center;gap:7px;}
.pareto-legend-swatch{display:inline-block;width:12px;height:12px;border-radius:3px;}
.pareto-legend-line{display:inline-block;width:22px;height:2.5px;background:var(--accent);border-radius:1px;position:relative;}
.pareto-legend-line::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:7px;height:7px;border:2px solid var(--accent);border-radius:50%;background:var(--bg2);}
.pareto-insight{font-size:12.5px;color:var(--text2);padding:10px 12px;background:var(--bg3);border-left:3px solid var(--accent);border-radius:0 6px 6px 0;line-height:1.5;}

/* Stat cards fréquences */
.freq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;}
.freq-card{padding:14px 16px;border-radius:10px;border:1px solid var(--border);background:var(--bg3);position:relative;overflow:hidden;}
.freq-card::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;}
.freq-card .freq-lbl{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;font-weight:600;}
.freq-card .freq-val{font-size:26px;font-weight:700;font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;line-height:1.1;margin-top:4px;}
.freq-card .freq-sub{font-size:11px;color:var(--text3);margin-top:4px;}

@media (max-width:760px){
  .tech-grid,.site-grid{grid-template-columns:1fr;}
}

/* Bandeau d'alertes actionnables */
.analyse-alertes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px;margin-bottom:14px;}
/* Variante inline (sous les KPI dans le bloc unifié) */
.analyse-alertes-inline{display:flex;flex-direction:column;gap:6px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border);}
.analyse-alertes-inline:empty{display:none;}
.analyse-alertes-inline .alerte-card{padding:8px 11px;}
.analyse-alertes-inline .alerte-icon{width:26px;height:26px;font-size:13px;border-radius:6px;}
.analyse-alertes-inline .alerte-title{font-size:12px;}
.analyse-alertes-inline .alerte-detail{font-size:10.5px;}
.analyse-alertes-inline .alerte-action{font-size:10px;}

/* Pipeline ribbon (compact horizontal) */
.pipeline-ribbon{display:flex;align-items:center;gap:0;padding:8px 0;flex-wrap:wrap;font-size:12px;}
.pipeline-step{display:flex;align-items:baseline;gap:6px;padding:4px 10px;background:var(--bg3);border:1px solid var(--border);border-radius:6px;}
.pipeline-step .v{font-size:18px;font-weight:700;font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;line-height:1;}
.pipeline-step .l{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.4px;}
.pipeline-step.green .v{color:var(--green);}
.pipeline-step.orange .v{color:var(--orange);}
.pipeline-step.red .v{color:var(--red);}
.pipeline-arrow{display:flex;align-items:center;gap:4px;padding:0 8px;color:var(--text3);font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;font-size:11px;}
.pipeline-arrow strong{color:var(--text2);}
.kpi-action{font-size:10.5px;color:var(--text3);font-style:italic;margin-top:6px;display:flex;align-items:center;gap:4px;line-height:1.3;}
.kpi-action::before{content:"→";font-style:normal;color:var(--orange);}
.kpi-action.red::before{color:var(--red);}
.kpi-action.green::before{color:var(--green);content:"✓";}
.alerte-card{display:flex;gap:10px;padding:11px 13px;border-radius:10px;background:var(--bg3);border:1px solid var(--border);position:relative;overflow:hidden;transition:transform .15s;}
.alerte-card:hover{transform:translateY(-1px);}
.alerte-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;}
.alerte-card.red::before{background:var(--red);}
.alerte-card.orange::before{background:var(--orange);}
.alerte-card.green::before{background:var(--green);}
.alerte-card.blue::before{background:var(--accent);}
.alerte-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.alerte-icon.red{background:var(--red-bg);color:var(--red);}
.alerte-icon.orange{background:var(--orange-bg);color:var(--orange);}
.alerte-icon.green{background:var(--green-bg);color:var(--green);}
.alerte-icon.blue{background:rgba(237,103,7,.12);color:var(--accent);}
.alerte-body{flex:1;min-width:0;}
.alerte-title{font-size:12.5px;font-weight:600;color:var(--text);margin-bottom:2px;line-height:1.3;}
.alerte-detail{font-size:11px;color:var(--text2);line-height:1.4;}
.alerte-action{font-size:10.5px;color:var(--text3);margin-top:4px;font-style:italic;display:flex;align-items:center;gap:4px;}
.alerte-action::before{content:"→";font-style:normal;}

/* Bullet charts (KPI avec objectif) */
.analyse-kpi{display:flex;flex-direction:column;gap:6px;}
.bullet-track{position:relative;height:8px;background:var(--bg4);border-radius:4px;overflow:visible;margin-top:6px;}
.bullet-fill{height:100%;border-radius:4px;transition:width .8s cubic-bezier(.4,0,.2,1);}
.bullet-target{position:absolute;top:-3px;width:2px;height:14px;background:var(--text);border-radius:1px;z-index:2;}
.bullet-target::after{content:attr(data-label);position:absolute;top:-14px;left:50%;transform:translateX(-50%);font-size:9px;color:var(--text3);white-space:nowrap;font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}
.bullet-zones{position:absolute;inset:0;display:flex;border-radius:4px;overflow:hidden;opacity:.18;}
.bullet-zones > div{height:100%;}

/* Funnel pipeline */
.funnel{display:flex;align-items:stretch;gap:0;padding:8px 0;flex-wrap:wrap;}
.funnel-step{flex:1;display:flex;flex-direction:column;justify-content:center;padding:14px 18px;background:var(--bg3);border:1px solid var(--border);position:relative;min-width:0;transition:transform .15s;}
.funnel-step:first-child{border-radius:10px 0 0 10px;}
.funnel-step:last-child{border-radius:0 10px 10px 0;}
.funnel-step:hover{transform:translateY(-1px);z-index:2;}
.funnel-step::after{content:"";position:absolute;right:-10px;top:50%;transform:translateY(-50%) rotate(45deg);width:18px;height:18px;background:inherit;border-top:1px solid var(--border);border-right:1px solid var(--border);z-index:1;}
.funnel-step:last-child::after{display:none;}
.funnel-step .lbl{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--text3);font-weight:600;margin-bottom:4px;}
.funnel-step .val{font-size:26px;font-weight:700;font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;line-height:1;}
.funnel-step .sub{font-size:11px;color:var(--text3);margin-top:4px;}
.funnel-step.green .val{color:var(--green);}
.funnel-step.orange .val{color:var(--orange);}
.funnel-step.red .val{color:var(--red);}
.funnel-arrow{display:flex;align-items:center;justify-content:center;width:48px;flex-shrink:0;font-size:11px;color:var(--text3);font-weight:600;font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}
@media (max-width:760px){
  .funnel{flex-direction:column;}
  .funnel-step{border-radius:10px !important;}
  .funnel-step::after{display:none;}
  .funnel-arrow{transform:rotate(90deg);width:auto;height:24px;}
}
.analyse-kpi{background:var(--bg3);border-radius:var(--radius-lg);padding:14px 16px;border:1px solid var(--border);cursor:pointer;transition:all .2s;position:relative;}
.analyse-kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow);}
.analyse-kpi.blue:hover{box-shadow:var(--glow-blue);}
.analyse-kpi.green:hover{box-shadow:var(--glow-green);}
.analyse-kpi.yellow:hover{box-shadow:var(--glow-yellow);}
.analyse-kpi.red:hover{box-shadow:var(--glow-red);}
.analyse-kpi-label{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;}
.analyse-kpi-val{font-size:24px;font-weight:700;font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}
.analyse-kpi-trend{font-size:11px;margin-top:3px;}
.trend-up{color:var(--green);}
.trend-down{color:var(--red);}

/* ═══ HBAR (horizontal bar for analyse) ═══ */
.hbar-row{display:flex;align-items:center;gap:10px;padding:8px;border-radius:8px;cursor:pointer;transition:background .15s;border-bottom:1px solid var(--border);}
.hbar-row:last-child{border-bottom:none;}
.hbar-row:hover{background:var(--bg3);}
.hbar-lbl{width:130px;font-size:13px;color:var(--text2);flex-shrink:0;}
.hbar-track{flex:1;height:8px;background:var(--bg4);border-radius:4px;overflow:hidden;}
.hbar-fill{height:100%;border-radius:4px;transition:width .8s cubic-bezier(.4,0,.2,1);}
.hbar-val{width:48px;text-align:right;font-size:13px;font-weight:600;font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}

/* ═══ DASHBOARD : Suggestions (cards cliquables + modal détaillée) ═══ */
.sug-row{display:flex;align-items:center;gap:11px;padding:10px 12px;background:var(--bg3);border-radius:8px;cursor:pointer;transition:transform .15s,background .15s;}
.sug-row:hover{transform:translateX(3px);background:var(--bg4);}
.sug-icon{font-size:18px;flex-shrink:0;width:24px;text-align:center;}
.sug-body{flex:1;min-width:0;}
.sug-title{font-size:13px;font-weight:600;margin-bottom:2px;}
.sug-summary{font-size:12px;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.45;}
.sug-count{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:22px;border-radius:11px;font-size:12px;font-weight:700;font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;padding:0 8px;flex-shrink:0;}
.sug-arrow{color:var(--text3);font-size:14px;flex-shrink:0;transition:transform .15s;}
.sug-row:hover .sug-arrow{transform:translateX(3px);color:var(--text);}

/* Tableau dans la modal de détails des suggestions */
.sug-table{width:100%;border-collapse:collapse;font-size:12.5px;}
.sug-table th{padding:9px 10px;text-align:left;font-size:10.5px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;border-bottom:1.5px solid var(--border);background:var(--bg2);position:sticky;top:0;z-index:2;}
.sug-table td{padding:10px;border-bottom:1px solid var(--border);color:var(--text2);vertical-align:middle;}
.sug-table tr:hover td{background:var(--bg3);}
.sug-table strong{color:var(--text);font-weight:600;}
.sug-table a.btn{display:inline-flex;align-items:center;gap:4px;}

/* ═══ PREDICT ENGINE — Maintenance prédictive ═══ */

/* État vide commun aux 3 sections */
.pred-empty{padding:24px 18px;text-align:center;color:var(--text3);font-size:13px;background:var(--bg3);border-radius:8px;border:1px dashed var(--border);line-height:1.6;}
.pred-empty-success{color:var(--green);background:rgba(34,197,94,0.08);border-color:rgba(34,197,94,0.25);font-weight:500;}

/* ─── Section 1 : VITAL SIGNS ─── */
.vital-signs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.vital-sign{background:var(--bg3);border:1px solid var(--border);border-top:3px solid var(--accent);border-radius:10px;padding:14px 16px;display:flex;flex-direction:column;gap:6px;transition:transform .15s,box-shadow .15s;}
.vital-sign:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.15);}
.vital-lbl{font-size:10.5px;color:var(--text3);text-transform:uppercase;letter-spacing:.6px;font-weight:700;}
.vital-val{font-size:34px;font-weight:700;font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;line-height:1;letter-spacing:-1px;}
.vital-unit{font-size:14px;color:var(--text3);font-weight:500;margin-left:3px;letter-spacing:0;}
.vital-bar{height:5px;background:var(--bg4);border-radius:3px;overflow:hidden;margin-top:2px;}
.vital-bar-fill{height:100%;border-radius:3px;transition:width .6s cubic-bezier(.4,0,.2,1);}
.vital-sub{font-size:11px;color:var(--text3);line-height:1.4;}
@media (max-width:920px){.vital-signs-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.vital-signs-grid{grid-template-columns:1fr;}}

/* ─── Section 2 : CRYSTAL BALL ─── */
.cb-cards-grid{display:flex;flex-direction:column;gap:12px;}
.cb-cards-inner{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;}

/* ═ LÉGENDE EXPLICATIVE ═ */
.cb-legend{background:linear-gradient(135deg,rgba(99,102,241,0.06),rgba(139,92,246,0.04));border:1px solid rgba(139,92,246,0.18);border-radius:10px;padding:12px 14px;animation:cbFadeIn .3s ease-out;}
.cb-legend.collapsed{padding:0;background:transparent;border:none;}
.cb-legend-toggle{width:100%;display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:var(--bg3);border:1px dashed var(--border2);border-radius:8px;color:var(--text2);font-size:12px;cursor:pointer;font-family:inherit;transition:all .15s;}
.cb-legend-toggle:hover{background:var(--bg4);color:var(--text);border-color:var(--accent);}
.cb-legend-arrow{font-size:10px;color:var(--text3);}
.cb-legend-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.cb-legend-title{font-size:12.5px;font-weight:700;color:var(--text);}
.cb-legend-close{background:transparent;border:none;color:var(--text3);font-size:11px;cursor:pointer;padding:3px 8px;border-radius:5px;font-family:inherit;transition:all .15s;}
.cb-legend-close:hover{background:var(--bg3);color:var(--text);}
.cb-legend-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-bottom:10px;}
.cb-legend-item{display:flex;align-items:flex-start;gap:10px;padding:8px 10px;background:var(--bg2);border-radius:6px;}
.cb-legend-icon{display:flex;align-items:center;justify-content:center;width:38px;height:38px;background:var(--bg3);border-radius:7px;font-size:11px;font-weight:700;font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;flex-shrink:0;line-height:1;text-align:center;letter-spacing:-1px;}
.cb-legend-lbl{font-size:11.5px;font-weight:700;color:var(--text);margin-bottom:2px;}
.cb-legend-desc{font-size:11px;color:var(--text2);line-height:1.45;}
.cb-legend-desc strong{color:var(--text);font-weight:600;}
.cb-legend-colors{display:flex;flex-wrap:wrap;gap:12px;padding-top:8px;border-top:1px solid var(--border);font-size:11px;color:var(--text2);}
.cb-legend-colors > span{display:inline-flex;align-items:center;gap:5px;}
.cb-legend-dot{width:9px;height:9px;border-radius:50%;display:inline-block;}

/* ═ BARRE DE FILTRES ═ */
.cb-filterbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 12px;background:var(--bg3);border:1px solid var(--border);border-radius:10px;}
.cb-search{display:flex;align-items:center;gap:6px;background:var(--bg2);border:1px solid var(--border2);border-radius:8px;padding:0 10px;height:32px;flex:1;min-width:180px;color:var(--text3);}
.cb-search input{flex:1;background:transparent;border:none;outline:none;color:var(--text);font-size:12.5px;font-family:inherit;height:100%;}
.cb-search input::placeholder{color:var(--text3);}
.cb-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 2px rgba(237,103,7,0.15);}
.cb-level-tabs{display:flex;gap:4px;flex-wrap:wrap;}
.cb-level-tab{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border:1px solid var(--border);background:var(--bg2);color:var(--text2);font-size:11.5px;font-weight:500;border-radius:7px;cursor:pointer;transition:all .15s;font-family:inherit;}
.cb-level-tab:hover{background:var(--bg4);color:var(--text);}
.cb-level-tab.active{background:var(--bg4);border-color:var(--lvl-c, var(--accent));color:var(--lvl-c, var(--accent));font-weight:600;}
.cb-cnt{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:16px;padding:0 5px;background:var(--bg3);border-radius:10px;font-size:10px;font-weight:700;font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}
.cb-level-tab.active .cb-cnt{background:var(--lvl-c, var(--accent));color:#fff;}
.cb-sort-sel{height:32px;padding:0 10px;background:var(--bg2);border:1px solid var(--border2);border-radius:7px;color:var(--text);font-size:12px;font-family:inherit;cursor:pointer;}
.cb-sort-sel:focus{outline:none;border-color:var(--accent);}

/* ═ CARTES PRÉDICTIONS — design aéré ═ */
.cb-card{background:var(--bg3);border:1px solid var(--border);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:11px;transition:transform .15s,box-shadow .15s;animation:cbFadeIn .25s ease-out;}
.cb-card:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,0.22);}

/* 1. Identité */
.cb-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;}
.cb-card-target{flex:1;min-width:0;}
.cb-card-name{font-size:14.5px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:3px;}
.cb-card-site{font-size:11.5px;color:var(--text3);}
.cb-card-level{font-size:10px;font-weight:700;padding:4px 10px;border-radius:10px;text-transform:uppercase;letter-spacing:.6px;white-space:nowrap;flex-shrink:0;}

/* 2. HERO : grand chiffre proba30 + tendance + sparkline */
.cb-card-hero{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;background:var(--bg2);border-radius:10px;}
.cb-hero-left{display:flex;flex-direction:column;}
.cb-hero-val{font-size:42px;font-weight:700;font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;line-height:0.95;letter-spacing:-2px;}
.cb-hero-pct{font-size:20px;font-weight:600;letter-spacing:0;margin-left:1px;}
.cb-hero-lbl{font-size:10.5px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;font-weight:600;margin-top:4px;}
.cb-hero-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;}
.cb-trend{display:inline-flex;align-items:center;gap:4px;font-weight:600;font-size:11px;padding:3px 8px;border-radius:10px;white-space:nowrap;}
.cb-trend.worsening{color:var(--red);background:rgba(239,68,68,0.12);}
.cb-trend.improving{color:var(--green);background:rgba(34,197,94,0.12);}
.cb-trend.stable{color:var(--text3);background:var(--bg3);}
.cb-spark{width:80px;height:22px;flex-shrink:0;}

/* 3. HORIZONS COMPACTS — 1 ligne avec 3 pills */
.cb-card-horizons{display:flex;gap:6px;justify-content:space-between;}
.cb-h-inline{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;padding:5px 8px;background:var(--bg2);border:1px solid var(--border);border-radius:6px;font-size:11px;color:var(--text3);transition:all .15s;}
.cb-h-inline:hover{background:var(--bg4);}
.cb-h-inline.cb-h-active{border-width:1.5px;font-weight:600;}
.cb-h-name{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.4px;font-weight:600;}
.cb-h-inline strong{font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;font-size:13px;font-weight:700;}

/* 4. SIGNAUX compacts (max 2 visibles, +N autres) */
.cb-signals-mini{display:flex;flex-direction:column;gap:4px;}
.cb-signal-more{font-size:11px;color:var(--text3);font-style:italic;padding:2px 4px;}

/* 5. DÉTAILS EXPANDABLES (collapsed par défaut) */
.cb-card-details{display:none;flex-direction:column;gap:6px;padding:10px 12px;background:var(--bg2);border-radius:8px;border-left:2px solid var(--border2);animation:cbFadeIn .2s;}
.cb-card.expanded .cb-card-details{display:flex;}
.cb-detail-signals{margin-top:6px;padding-top:6px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:4px;}
.cb-detail-signals-title{font-size:10.5px;color:var(--text3);text-transform:uppercase;letter-spacing:.4px;font-weight:700;margin-bottom:2px;}
.cb-date-note{font-size:10.5px;color:var(--text3);font-style:italic;margin-left:4px;}
.cb-date-late{color:var(--red);font-weight:600;font-style:normal;}

/* 6. FOOTER : expand + IA */
.cb-card-footer{display:flex;gap:6px;align-items:center;justify-content:space-between;margin-top:auto;}
.cb-expand-btn{background:transparent;border:none;color:var(--text3);font-size:11px;cursor:pointer;padding:4px 8px;border-radius:5px;font-family:inherit;transition:all .15s;}
.cb-expand-btn:hover{background:var(--bg2);color:var(--text);}
.cb-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;}
.cb-card-target{flex:1;min-width:0;}
.cb-card-name{font-size:14px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:2px;}
.cb-card-site{font-size:11.5px;color:var(--text3);}
.cb-card-level{font-size:10px;font-weight:700;padding:3px 8px;border-radius:10px;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;flex-shrink:0;}
.cb-card-proba{display:flex;align-items:baseline;gap:10px;padding:8px 12px;background:var(--bg2);border-radius:8px;}
.cb-proba-val{font-size:38px;font-weight:700;font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;line-height:1;letter-spacing:-1.5px;}
.cb-proba-pct{font-size:20px;font-weight:600;margin-left:1px;}
.cb-proba-lbl{font-size:10.5px;color:var(--text3);line-height:1.3;text-transform:uppercase;letter-spacing:.4px;font-weight:600;}
.cb-confidence{display:flex;flex-direction:column;gap:4px;}
.cb-conf-head{display:flex;justify-content:space-between;align-items:center;}
.cb-conf-lbl{font-size:10.5px;color:var(--text3);text-transform:uppercase;letter-spacing:.4px;font-weight:600;}
.cb-conf-tag{font-size:11px;font-weight:700;font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}
.cb-conf-bar{height:5px;background:var(--bg4);border-radius:3px;overflow:hidden;}
.cb-conf-fill{height:100%;border-radius:3px;transition:width .6s cubic-bezier(.4,0,.2,1);}
.cb-conf-sub{font-size:10px;color:var(--text3);font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}
.cb-detail{display:flex;flex-direction:column;gap:4px;padding:8px 10px;background:var(--bg2);border-radius:6px;border-left:2px solid var(--border2);}
.cb-detail-row{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;color:var(--text2);}
.cb-detail-lbl{color:var(--text3);font-weight:500;}
.cb-detail-row strong{color:var(--text);font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}
.cb-detail-row em{font-style:normal;color:var(--text3);font-size:10.5px;}
.cb-signals{display:flex;flex-direction:column;gap:4px;padding:8px 10px;background:rgba(239,68,68,0.04);border-radius:6px;border:1px solid rgba(239,68,68,0.15);}
.cb-signals-empty{padding:6px 10px;font-size:11px;color:var(--green);background:rgba(34,197,94,0.06);border-radius:6px;border:1px solid rgba(34,197,94,0.2);}
.cb-signals-title{font-size:10.5px;color:var(--text2);text-transform:uppercase;letter-spacing:.4px;font-weight:700;margin-bottom:2px;}
.cb-signal{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text2);line-height:1.4;}
.cb-signal-icon{font-size:13px;flex-shrink:0;}
.cb-signal-red{color:var(--red);font-weight:600;}
.cb-signal-orange{color:var(--orange);font-weight:600;}
.cb-card-btn{flex:1;justify-content:center;font-size:11.5px;}

/* ─── Section 3 : SMART ACTIONS ─── */
.sa-list{display:flex;flex-direction:column;gap:8px;}
.sa-row{display:grid;grid-template-columns:36px 1fr auto;gap:12px;align-items:center;padding:12px 14px;background:var(--bg3);border:1px solid var(--border);border-left:4px solid var(--orange);border-radius:8px;transition:transform .15s,box-shadow .15s;}
.sa-row:hover{transform:translateX(2px);box-shadow:0 4px 12px rgba(0,0,0,0.15);}
.sa-num{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;font-weight:700;font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;font-size:14px;flex-shrink:0;}
.sa-body{min-width:0;display:flex;flex-direction:column;gap:3px;}
.sa-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.sa-tag{font-size:10px;font-weight:700;padding:2px 8px;border-radius:10px;letter-spacing:.5px;white-space:nowrap;}
.sa-target{font-size:13px;font-weight:600;color:var(--text);}
.sa-deadline{font-size:11px;color:var(--text3);font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;margin-left:auto;}
.sa-action{font-size:13px;font-weight:500;color:var(--text);}
.sa-reason{font-size:11.5px;color:var(--text3);line-height:1.4;}
.sa-cta{flex-shrink:0;}
@media (max-width:680px){
  .sa-row{grid-template-columns:36px 1fr;gap:10px;}
  .sa-cta{grid-column:1 / -1;display:flex;justify-content:flex-end;}
  .sa-deadline{margin-left:0;}
}

/* Conservé pour compat ancien design */
.pred-card{background:var(--bg3);border-radius:10px;padding:16px;cursor:pointer;transition:all .2s;border:1px solid var(--border);}
.pred-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);}

/* ═══ STAT ROW ═══ */
.stat-row{display:flex;align-items:center;gap:10px;padding:9px 8px;border-bottom:1px solid var(--border);border-radius:6px;cursor:pointer;transition:background .15s;}
.stat-row:hover{background:var(--bg3);}
.stat-row:last-child{border-bottom:none;}
.stat-label{flex:1;font-size:13px;color:var(--text2);}
.stat-bar{flex:2;height:6px;background:var(--bg4);border-radius:3px;overflow:hidden;}
.stat-fill{height:100%;border-radius:3px;}
.stat-val{width:50px;text-align:right;font-size:13px;font-weight:600;font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}

/* ═══ SWITCH (toggle) ═══ */
.switch{position:relative;display:inline-block;width:42px;height:22px;flex-shrink:0;}
.switch input{opacity:0;width:0;height:0;}
.switch .slider{position:absolute;cursor:pointer;inset:0;background:var(--bg4);border-radius:22px;transition:.25s;}
.switch .slider:before{content:"";position:absolute;height:16px;width:16px;left:3px;bottom:3px;background:white;border-radius:50%;transition:.25s;}
.switch input:checked + .slider{background:var(--accent);}
.switch input:checked + .slider:before{transform:translateX(20px);}

/* ═══ PLANNING ═══ */
.planning-tab{padding:6px 16px;border-radius:8px;cursor:pointer;font-size:13px;border:1px solid var(--border);background:transparent;color:var(--text2);transition:all .15s;}
.planning-tab.active,.planning-tab:hover{background:var(--bg3);color:var(--text);border-color:var(--border2);}
.planning-tab.active{font-weight:500;}
.planning-event{border-radius:6px;padding:7px 10px;font-size:12.5px;cursor:pointer;transition:all .15s;font-weight:600;line-height:1.35;box-shadow:0 1px 3px rgba(0,0,0,.15);}
.planning-event:hover{filter:brightness(1.15);transform:translateY(-1px);box-shadow:0 3px 8px rgba(0,0,0,.25);}
.planning-header-cell{text-align:center;padding:6px;background:var(--bg3);border-radius:6px;font-weight:600;font-size:12px;}
/* (Anciennes règles de sticky par cellule supprimées — remplacées par le bloc
   .planning-sticky-block dans la section "PLANNING — BLOC STICKY UNIFIÉ".) */
.plan-event-badge{display:block;padding:4px 8px;border-radius:4px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;transition:all 0.15s;box-shadow:0 1px 2px rgba(0,0,0,.12);}
.plan-event-badge:hover{filter:brightness(1.15);box-shadow:0 2px 6px rgba(0,0,0,0.2);}
#planning-content{animation:fadeInPlan 0.3s ease-out;}
@keyframes fadeInPlan{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}
.planning-month-cell{animation:slideInPlan 0.3s ease-out;}
@keyframes slideInPlan{from{opacity:0;transform:scale(0.95);}to{opacity:1;transform:scale(1);}}

/* ═══ USERS ═══ */
.user-list-item{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:10px;transition:all .15s;}
.user-list-item:hover{border-color:var(--border2);transform:translateX(2px);}
.user-avatar-lg{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#ed6707,#c04f00);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:white;flex-shrink:0;}

/* ═══ NOTIFS ═══ */
/* Règle : la distinction LU/NON-LU porte sur le TEXTE (« l'écriture »).
   NON LU = TEXTE CLAIR/VIF (titre blanc gras + sous-titre clair) sur fond élevé
   + liseré accent. LU = TEXTE SOMBRE/ATTÉNUÉ (gris) + item effacé (opacité).
   Le survol n'éclaire QUE le fond — il ne ré-éclaire pas le texte d'un item lu
   (sinon lu et non-lu deviendraient indistinguables au passage de la souris). */
.notif-item{display:flex;gap:12px;padding:12px;border-bottom:1px solid var(--border);cursor:pointer;border-radius:8px;transition:background .15s;background:transparent;}
.notif-item.unread{opacity:1;background:var(--notif-unread-bg);border-left:3px solid var(--accent);padding-left:9px;box-shadow:0 1px 4px rgba(0,0,0,.22);}
/* TEXTE — non lu = clair/vif */
.notif-item.unread .notif-title{color:var(--text);font-weight:700;}
.notif-item.unread .notif-sub{color:var(--text2);}
.notif-item.unread .notif-num{color:var(--accent);}
.notif-item:hover{background:var(--bg3);}
.notif-item:last-child{border-bottom:none;}
/* Numéro de notification (séquentiel, le plus récent = 1) */
.notif-num{flex:0 0 auto;align-self:center;min-width:24px;text-align:right;font-size:12px;font-weight:700;color:var(--text3);font-variant-numeric:tabular-nums;}
.notif-icon{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px;}
/* TEXTE — état de base (= lu) = atténué mais LISIBLE (contraste AA conservé :
   on ne descend plus l'opacité de l'item, la distinction passe par la couleur,
   le fond élevé + liseré + gras de l'état .unread). */
.notif-title{font-size:13px;font-weight:500;margin-bottom:2px;color:var(--text2);}
.notif-sub{font-size:11px;color:var(--text3);}
.notif-time{font-size:11px;color:var(--text3);white-space:nowrap;}
/* Séparateur « Plus anciennes » : ligne fine bien visible (pas pâle). */
.notif-sep{display:flex;align-items:center;gap:8px;margin:12px 2px 8px;font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--text3);}
.notif-sep::before,.notif-sep::after{content:"";flex:1;height:1px;background:var(--border2);}

/* ═══ MESSAGES ═══ */
.msg-layout{display:grid;grid-template-columns:300px 1fr;gap:16px;height:calc(100vh - 160px);min-height:520px;}
.msg-panel{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;}
.msg-panel-hdr{padding:12px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;gap:8px;}
.msg-panel-title{font-size:13px;font-weight:600;}
.msg-list{overflow-y:auto;flex:1;}
.msg-item{display:flex;gap:10px;padding:11px 14px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s;border-left:3px solid transparent;}
.msg-item:hover{background:var(--bg3);}
.msg-item.active{background:var(--blue-bg);border-left-color:var(--accent);}
.msg-item-av{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:white;flex-shrink:0;background:linear-gradient(135deg,var(--accent),#c04f00);}
.msg-item-body{flex:1;min-width:0;}
.msg-item-r1{display:flex;align-items:baseline;justify-content:space-between;gap:4px;margin-bottom:2px;}
.msg-item-from{font-size:12px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px;}
.msg-item.unread .msg-item-from{font-weight:700;color:var(--text);}
.msg-item-dt{font-size:10px;color:var(--text3);flex-shrink:0;}
.msg-item-sub{font-size:12px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px;}
.msg-item.unread .msg-item-sub{font-weight:600;color:var(--text);}
.msg-item-prev{font-size:11px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.msg-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex-shrink:0;margin-top:5px;}
.msg-right{display:flex;flex-direction:column;gap:0;}
.msg-compose,.msg-read-view{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);flex:1;display:flex;flex-direction:column;overflow:hidden;}
.msg-compose-hdr,.msg-read-hdr{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.msg-fields{padding:0;flex-shrink:0;}
.msg-field-row{display:flex;align-items:center;gap:0;border-bottom:1px solid var(--border);}
.msg-field-lbl{width:64px;font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.4px;padding:10px 14px;flex-shrink:0;}
.msg-field-inp{flex:1;background:transparent;border:none;outline:none;color:var(--text);font-size:13px;padding:10px 14px 10px 0;font-family:inherit;}
.msg-body-wrap{flex:1;padding:14px 16px;overflow-y:auto;}
.msg-body-ta{width:100%;height:100%;min-height:120px;resize:none;background:transparent;border:none;outline:none;color:var(--text);font-size:13px;font-family:inherit;line-height:1.6;}
.msg-footer{padding:12px 16px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;gap:8px;}
.msg-conn-note{font-size:11px;color:var(--text3);display:flex;align-items:center;gap:6px;}
.msg-conn-dot{width:7px;height:7px;border-radius:50%;background:var(--yellow);flex-shrink:0;}
.msg-read-body{flex:1;padding:16px;overflow-y:auto;font-size:13px;line-height:1.7;color:var(--text2);white-space:pre-wrap;}
.msg-read-meta{font-size:11px;color:var(--text3);margin-bottom:4px;}
.msg-read-subject{font-size:15px;font-weight:600;margin-bottom:10px;}
@media(max-width:700px){.msg-layout{grid-template-columns:1fr;height:auto;}}

/* ═══ IMPORT STEPS ═══ */
.import-step{background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:14px;margin-bottom:10px;}
.import-step-hdr{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-weight:500;font-size:13px;}
.step-num{width:22px;height:22px;border-radius:50%;background:var(--accent);color:white;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;}
.sheet-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:6px;cursor:pointer;border:1px solid var(--border);margin-bottom:4px;transition:all .15s;font-size:13px;}
.sheet-item:hover{background:var(--bg4);}
.sheet-item.selected{border-color:var(--accent);background:var(--blue-bg);}
.col-map-row{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:12px;}
.col-map-lbl{width:120px;color:var(--text2);flex-shrink:0;}
.col-map-select{flex:1;padding:5px 8px;background:var(--bg3);border:1px solid var(--border2);border-radius:6px;color:var(--text);font-size:12px;font-family:inherit;outline:none;}
.col-map-select:focus{border-color:var(--accent);}

/* ═══ TOGGLE SWITCH ═══ */
.toggle-input{display:none;}
.toggle-label{display:inline-block;width:50px;height:26px;background:var(--bg4);border:1px solid var(--border2);border-radius:13px;cursor:pointer;position:relative;transition:all .3s;}
.toggle-input:checked+.toggle-label{background:var(--green);border-color:var(--green);}
.toggle-label::after{content:'';position:absolute;width:20px;height:20px;border-radius:50%;background:white;top:2px;left:2px;transition:all .3s;}
.toggle-input:checked+.toggle-label::after{left:28px;}

/* ═══ BUTTON SMALL ═══ */
.btn-small{padding:5px 10px;font-size:11px;}

/* ═══ EXPORT FMT ═══ */
.export-fmt-btn{background:var(--bg3);border:1px solid var(--border2);border-radius:8px;padding:12px 8px;text-align:center;cursor:pointer;transition:all .15s;}
.export-fmt-btn:hover{border-color:var(--accent);transform:translateY(-1px);}

/* ═══ SELECTION BAR ═══ */
#selection-bar{background:var(--bg3);border:1px solid var(--border2);border-radius:8px;padding:8px 14px;margin-bottom:10px;align-items:center;gap:10px;}

/* ═══ BARRE D'ACTIONS GROUPÉES PARTAGÉE (fixée en bas, tous modules) ═══ */
#bulk-bar{
  display:none;                 /* flex quand une sélection est active (géré par bulk-bar.js) */
  position:fixed; left:0; right:0; bottom:0; z-index:150;
  align-items:center; gap:10px;
  padding:12px 22px;
  background:var(--bg2);
  border-top:1px solid var(--border2);
  box-shadow:0 -6px 20px rgba(0,0,0,.28);
  animation:bulkBarUp .18s ease-out;
}
#bulk-bar-count{font-size:14px;font-weight:700;color:var(--accent);}
#bulk-bar .bulk-bar-actions{display:flex;gap:8px;margin-left:auto;}
@keyframes bulkBarUp{from{transform:translateY(100%);opacity:.4}to{transform:translateY(0);opacity:1}}
#filter-banner{background:var(--blue-bg);border:1px solid rgba(237,103,7,.3);border-radius:8px;padding:8px 14px;margin-bottom:10px;font-size:12px;color:var(--accent);align-items:center;gap:10px;}

/* ═══ ANIMATIONS ═══ */
@keyframes blink{0%,80%,100%{opacity:.2}40%{opacity:1}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.pulse{animation:pulse 1.5s infinite;}

/* ═══ RESPONSIVE ═══ */
@media (max-width:900px){
  .kpi-grid,.analyse-kpi-grid,.summary-grid{grid-template-columns:1fr 1fr;}
  .grid-2,.grid-3c{grid-template-columns:1fr;}
}
/* ═══ CONTRAT DOC ═══ */
.doc-drop-zone{border:2px dashed rgba(237,103,7,.3);border-radius:10px;padding:20px;text-align:center;cursor:pointer;transition:all .2s;}
.doc-drop-zone:hover,.doc-drop-zone.dragover{border-color:var(--accent);background:var(--blue-bg);}
.doc-card{background:var(--bg3);border:1px solid var(--border2);border-radius:10px;padding:14px;display:flex;align-items:center;gap:12px;}
.doc-preview-frame{width:100%;height:70vh;border:none;border-radius:0 0 14px 14px;}

/* ═══════════════════════════════════════════════════════════════
   CHATBOT LOCAL (Jan / LLM hors-ligne) — bulle flottante + panneau
   ═══════════════════════════════════════════════════════════════ */

/* Bouton flottant FAB */
.cb-fab{position:fixed;bottom:22px;right:22px;width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 24px rgba(99,102,241,.45),0 2px 6px rgba(0,0,0,.3);z-index:9998;transition:transform .2s,box-shadow .2s;border:2px solid rgba(255,255,255,.1);}
.cb-fab:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 12px 28px rgba(99,102,241,.55),0 4px 8px rgba(0,0,0,.4);}
.cb-fab svg{width:26px;height:26px;}
.cb-fab.hidden{transform:scale(0);opacity:0;pointer-events:none;}
/* Mode peek-through : après 2s de survol sans clic, devient quasi-transparent
   et click-through pour laisser interagir avec ce qui est derrière. */
.cb-fab.cb-peek{opacity:0.15;transform:scale(0.7);pointer-events:none;filter:blur(0.5px);box-shadow:0 4px 12px rgba(99,102,241,.2);}
.cb-fab.cb-peek::after{animation:none;opacity:0.3;}
.cb-fab{transition:transform .25s,box-shadow .25s,opacity .25s,filter .25s;}
.cb-fab::after{content:"";position:absolute;top:6px;right:6px;width:10px;height:10px;border-radius:50%;background:var(--green);border:2px solid var(--bg1);box-shadow:0 0 0 0 rgba(34,197,94,.5);animation:cbPulse 2s infinite;}
@keyframes cbPulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.5);}70%{box-shadow:0 0 0 8px rgba(34,197,94,0);}100%{box-shadow:0 0 0 0 rgba(34,197,94,0);}}

/* Panneau de chat */
.cb-panel{position:fixed;bottom:22px;right:22px;width:380px;max-width:calc(100vw - 44px);height:560px;max-height:calc(100vh - 44px);background:var(--bg2);border:1px solid var(--border);border-radius:16px;display:flex;flex-direction:column;z-index:9999;box-shadow:0 24px 48px rgba(0,0,0,.45),0 8px 16px rgba(0,0,0,.25);transform:translateY(20px) scale(0.96);opacity:0;pointer-events:none;transition:transform .25s cubic-bezier(.4,0,.2,1),opacity .25s;overflow:hidden;}
.cb-panel.open{transform:translateY(0) scale(1);opacity:1;pointer-events:auto;}

/* Header */
.cb-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:linear-gradient(135deg,rgba(99,102,241,.15),rgba(139,92,246,.1));border-bottom:1px solid var(--border);}
.cb-header-info{flex:1;min-width:0;}
.cb-header-title{font-size:14px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px;}
.cb-header-sub{font-size:11px;color:var(--text3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cb-status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.cb-status-dot.checking{background:var(--text3);animation:cbBlink 1s infinite;}
.cb-status-dot.connected{background:var(--green);box-shadow:0 0 6px rgba(34,197,94,.6);}
.cb-status-dot.disconnected{background:var(--red);}
@keyframes cbBlink{50%{opacity:0.3;}}
.cb-header-actions{display:flex;gap:4px;flex-shrink:0;}
.cb-icon-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid transparent;border-radius:6px;color:var(--text2);cursor:pointer;font-size:14px;transition:all .15s;}
.cb-icon-btn:hover{background:var(--bg3);color:var(--text);border-color:var(--border);}

/* Zone messages */
.cb-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth;}
.cb-msg{display:flex;gap:8px;animation:cbFadeIn .25s ease-out;}
.cb-msg.user{justify-content:flex-end;}
.cb-msg.assistant{justify-content:flex-start;}
.cb-msg-wrap{display:flex;flex-direction:column;max-width:78%;}
.cb-msg-wrap.user{align-items:flex-end;}
.cb-msg-wrap.assistant{align-items:flex-start;}
@keyframes cbFadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
.cb-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#8b5cf6);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;}
.cb-bubble{padding:9px 12px;border-radius:14px;font-size:13px;line-height:1.5;word-wrap:break-word;white-space:pre-wrap;}
.cb-bubble.user{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;border-bottom-right-radius:4px;}
.cb-bubble.assistant{background:var(--bg3);color:var(--text);border:1px solid var(--border);border-bottom-left-radius:4px;}

/* Actions sous chaque message (chatbot bulle) — Retry / Edit / Copy */
.cb-msg-actions{display:flex;gap:3px;margin-top:4px;opacity:0;transition:opacity .15s;}
.cb-msg-actions.user{justify-content:flex-end;}
.cb-msg-actions.assistant{justify-content:flex-start;}
.cb-msg:hover .cb-msg-actions,.cb-msg-actions:focus-within{opacity:1;}
.cb-msg-action{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid var(--border);background:var(--bg2);color:var(--text3);border-radius:5px;cursor:pointer;transition:all .15s;padding:0;}
.cb-msg-action:hover{background:var(--bg3);color:var(--text);border-color:var(--border2);}
.cb-msg-action:active{transform:scale(0.92);}
.cb-msg-action svg{width:12px;height:12px;}
.cb-msg-action.copied{background:rgba(34,197,94,0.18);color:var(--green);border-color:rgba(34,197,94,0.4);}
.cb-msg-action.copied::after{content:"✓";font-size:13px;font-weight:700;}
.cb-msg-action.copied svg{display:none;}
.cb-msg-action.danger:hover{background:rgba(239,68,68,0.15);color:var(--red);border-color:rgba(239,68,68,0.4);}

/* ═══ HISTORIQUE DES CONVERSATIONS (Assistant IA — panneau latéral) ═══ */
.ia-conv-item{display:flex;align-items:center;gap:8px;padding:7px 9px;background:var(--bg3);border:1px solid var(--border);border-radius:6px;cursor:pointer;transition:all .15s;}
.ia-conv-item:hover{background:var(--bg4);border-color:var(--border2);}
.ia-conv-item.active{background:var(--accent-bg);border-color:var(--accent);}
.ia-conv-info{flex:1;min-width:0;}
.ia-conv-title{font-size:12px;font-weight:500;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ia-conv-item.active .ia-conv-title{color:var(--accent);font-weight:600;}
.ia-conv-meta{font-size:10px;color:var(--text3);font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;margin-top:2px;}
.ia-conv-actions{display:flex;gap:2px;opacity:0;transition:opacity .15s;}
.ia-conv-item:hover .ia-conv-actions{opacity:1;}
.ia-conv-actions button{background:none;border:none;color:var(--text3);font-size:12px;cursor:pointer;padding:2px 5px;border-radius:4px;}
.ia-conv-actions button:hover{background:var(--bg2);color:var(--text);}

/* Indicateur "réponse IA en cours" sur une conversation (visible quand on a switché et qu'une requête tourne en arrière-plan) */
.ia-conv-pending{display:inline-block;margin-right:5px;animation:iaConvPending 1.4s ease-in-out infinite;}
@keyframes iaConvPending{0%,100%{opacity:0.4;transform:scale(0.92);}50%{opacity:1;transform:scale(1.08);}}

/* ═══ MODAL RAPPORT — splitter draggable + presets + plein écran ═══ */
/* Boutons preset layout */
.rapport-layout-btn{padding:5px 9px;font-size:14px;background:transparent;border:none;border-radius:5px;color:var(--text2);cursor:pointer;transition:all .15s;font-family:inherit;line-height:1;}
.rapport-layout-btn:hover{background:var(--bg4);color:var(--text);}
.rapport-layout-btn.active{background:var(--accent);color:#fff;}

/* Splitter draggable */
.rapport-splitter{position:relative;width:6px;background:var(--border);cursor:col-resize;align-self:stretch;min-height:300px;transition:background .15s;}
.rapport-splitter::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:2px;height:32px;background:var(--text3);border-radius:2px;opacity:0.4;}
.rapport-splitter:hover{background:var(--accent);}
.rapport-splitter:hover::before{background:#fff;opacity:1;}
.rapport-splitter.dragging{background:var(--accent);}
.rapport-splitter.dragging::before{background:#fff;opacity:1;}
/* Sélection désactivée pendant le drag */
body.rapport-splitter-dragging{cursor:col-resize;user-select:none;}
body.rapport-splitter-dragging iframe{pointer-events:none;}

/* Mode plein écran : modal couvre tout */
.modal#modal-rapport-content.fullscreen,
#modal-rapport .modal.fullscreen{width:98vw!important;max-width:98vw!important;height:96vh;display:flex;flex-direction:column;}
#modal-rapport .modal.fullscreen .modal-body{flex:1;overflow:auto;}
#modal-rapport .modal.fullscreen #rapport-pdf-frame{height:calc(96vh - 280px)!important;min-height:400px;}

/* Bouton Stop (rouge) — pendant la génération IA */
#ia-stop-btn{animation:iaStopPulse 1.5s ease-in-out infinite;}
@keyframes iaStopPulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,0.4);}50%{box-shadow:0 0 0 6px rgba(239,68,68,0);}}

/* ═══ TRACE DES OUTILS IA — diagnostic des sources BDD utilisées ═══ */
.cb-trace{margin-top:6px;padding:6px 10px;border-radius:6px;font-size:11px;display:flex;align-items:center;gap:6px;cursor:default;}
.cb-trace.ok{background:rgba(34,197,94,0.08);border:1px solid rgba(34,197,94,0.22);color:var(--green);}
.cb-trace.ok summary{cursor:pointer;display:flex;align-items:center;gap:6px;list-style:none;}
.cb-trace.ok summary::-webkit-details-marker{display:none;}
.cb-trace.warning{background:rgba(249,115,22,0.10);border:1px solid rgba(249,115,22,0.30);color:var(--orange);}
.cb-trace-icon{font-size:13px;flex-shrink:0;}
.cb-trace-text{font-weight:600;flex:1;}
.cb-trace-chev{font-size:10px;opacity:0.7;transition:transform .15s;}
.cb-trace[open] .cb-trace-chev{transform:rotate(180deg);}
.cb-trace-detail{padding-top:8px;border-top:1px solid rgba(34,197,94,0.18);margin-top:6px;color:var(--text2);}
.cb-trace-summary{font-size:10.5px;color:var(--text3);margin-bottom:6px;}
.cb-trace-table{width:100%;border-collapse:collapse;font-size:10.5px;}
.cb-trace-table th{padding:3px 6px;text-align:left;color:var(--text3);text-transform:uppercase;letter-spacing:.4px;font-size:9px;font-weight:700;border-bottom:1px solid var(--border);}
.cb-trace-table td{padding:4px 6px;color:var(--text2);border-bottom:1px solid rgba(255,255,255,0.04);}
.cb-trace-table tr.err td{background:rgba(239,68,68,0.06);}
.cb-trace-table code{background:var(--bg3);padding:1px 5px;border-radius:3px;font-size:10px;font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;color:var(--text);}
.cb-bubble.error{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.35);color:var(--red);}

/* Welcome / suggestions */
.cb-welcome{text-align:center;padding:24px 16px;color:var(--text2);}
.cb-welcome-icon{font-size:48px;margin-bottom:8px;}
.cb-welcome-title{font-size:16px;font-weight:700;color:var(--text);margin-bottom:6px;}
.cb-welcome-text{font-size:12px;color:var(--text3);line-height:1.5;margin-bottom:14px;}
.cb-suggestions{display:flex;flex-direction:column;gap:6px;margin-top:14px;}
.cb-suggestion{padding:9px 12px;background:var(--bg3);border:1px solid var(--border);border-radius:8px;color:var(--text2);font-size:12px;cursor:pointer;text-align:left;transition:all .15s;}
.cb-suggestion:hover{background:var(--bg4);color:var(--text);border-color:var(--border2);transform:translateX(2px);}

/* Indicateur typing */
.cb-typing{display:flex;gap:8px;padding:0 16px 8px;animation:cbFadeIn .2s;}
.cb-typing .cb-bubble{padding:11px 14px;display:flex;gap:4px;align-items:center;}
.cb-typing-status{margin-left:6px;font-size:11px;color:var(--text3);white-space:nowrap;}
.cb-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--text3);animation:cbBounce 1.4s infinite both;}
.cb-dot:nth-child(2){animation-delay:.2s;}
.cb-dot:nth-child(3){animation-delay:.4s;}
@keyframes cbBounce{0%,80%,100%{transform:translateY(0);opacity:0.5;}40%{transform:translateY(-5px);opacity:1;}}

/* Zone input */
.cb-input-wrap{display:flex;align-items:flex-end;gap:8px;padding:10px 12px;border-top:1px solid var(--border);background:var(--bg3);}
.cb-input{flex:1;min-height:36px;max-height:120px;padding:8px 12px;background:var(--bg2);border:1px solid var(--border);border-radius:18px;color:var(--text);font-size:13px;font-family:inherit;resize:none;line-height:1.4;transition:border-color .15s;}
.cb-input:focus{outline:none;border-color:var(--accent);}
.cb-send-btn{width:36px;height:36px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#6366f1,#8b5cf6);border:none;border-radius:50%;color:#fff;cursor:pointer;transition:transform .15s;}
.cb-send-btn:hover{transform:scale(1.06);}
.cb-send-btn svg{width:16px;height:16px;}
.cb-footer{padding:6px 12px;text-align:center;font-size:10px;color:var(--text3);border-top:1px solid var(--border);background:var(--bg3);}

/* Mobile */
@media (max-width:520px){
  .cb-panel{bottom:0;right:0;width:100%;height:100%;max-height:100%;border-radius:0;}
  .cb-fab{bottom:16px;right:16px;}
}

/* ═══════════════════════════════════════════════════════════════
   UNDO / REDO — flèches minimalistes dans la topbar (Ctrl+Z / Ctrl+Y)
   ═══════════════════════════════════════════════════════════════ */
.undo-pill{display:inline-flex;align-items:center;gap:2px;margin-left:4px;}
.undo-pill-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;background:transparent;border:none;color:var(--text3);cursor:pointer;transition:color .15s,transform .12s;padding:0;outline:none;}
.undo-pill-btn:hover:not(:disabled){color:var(--accent);}
.undo-pill-btn:active:not(:disabled){transform:scale(0.88);}
.undo-pill-btn:disabled{opacity:0.25;cursor:not-allowed;}
.undo-pill-btn svg{width:17px;height:17px;}
.undo-pill-divider{display:none;}
.undo-pill-btn .undo-count{display:none;}

/* ═══════════════════════════════════════════════════════════════
   CONTRATS — bloc sous-traitants intervenants
   ═══════════════════════════════════════════════════════════════ */
.ct-st-block{margin-top:14px;padding-top:12px;border-top:1px dashed var(--border);}
.ct-st-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.ct-st-title{font-size:12px;color:var(--text);font-weight:600;display:flex;align-items:center;gap:6px;}
.ct-st-count{font-size:11px;font-weight:700;color:var(--accent);font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;background:rgba(237,103,7,.12);border-radius:5px;padding:2px 8px;}
.ct-st-count.empty{color:var(--text3);background:var(--bg3);}
.ct-st-empty{font-size:11.5px;color:var(--text3);font-style:italic;padding:14px;text-align:center;background:var(--bg3);border-radius:6px;}

/* Tableau qui-fait-quoi */
.ct-st-table{background:var(--bg3);border:1px solid var(--border);border-radius:8px;overflow:hidden;}
.ct-st-thead{display:grid;grid-template-columns:160px 1fr 70px;gap:10px;padding:7px 12px;background:var(--bg4);border-bottom:1px solid var(--border);font-size:9.5px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;font-weight:700;}
.ct-st-row{display:grid;grid-template-columns:160px 1fr 70px;gap:10px;padding:9px 12px;align-items:center;border-bottom:1px solid var(--border);transition:background .15s;}
.ct-st-row:last-child{border-bottom:none;}
.ct-st-row:hover{background:var(--bg4);}

/* Colonne 1 : sous-traitant (avatar + nom + statut) */
.ct-st-cell-st{display:flex;align-items:center;gap:9px;min-width:0;}
.ct-st-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#ed6707,#c04f00);display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;color:#fff;flex-shrink:0;}
.ct-st-name-block{min-width:0;flex:1;}
.ct-st-name-main{font-size:12.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ct-st-name-sub{margin-top:2px;}
.ct-st-status{display:inline-block;font-size:9.5px;font-weight:600;padding:1px 6px;border-radius:3px;font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}
.ct-st-status.green{color:var(--green);background:rgba(34,197,94,.12);}
.ct-st-status.orange{color:var(--orange);background:rgba(249,115,22,.12);}
.ct-st-status.red{color:var(--red);background:rgba(239,68,68,.12);}
.ct-st-status.gray{color:var(--text3);background:var(--bg4);}

/* Colonne 2 : équipements */
.ct-st-cell-equip{display:flex;flex-wrap:wrap;gap:4px;min-width:0;}
.ct-st-equip-tag{display:inline-block;font-size:10.5px;color:var(--text2);background:var(--bg2);border:1px solid var(--border);border-radius:4px;padding:2px 7px;line-height:1.3;}

/* Colonne 3 : volume */
.ct-st-cell-nb{text-align:center;}
.ct-st-nb-big{font-size:18px;font-weight:700;font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;color:var(--accent);line-height:1;}
.ct-st-nb-lbl{font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:.4px;margin-top:2px;}

@media (max-width:600px){
  .ct-st-thead,.ct-st-row{grid-template-columns:1fr;}
  .ct-st-thead{display:none;}
  .ct-st-row{padding:10px;}
  .ct-st-cell-nb{text-align:left;}
}

/* ═══════════════════════════════════════════════════════════════
   CONTRATS — vue par sous-traitant (chantier × sous-traitant)
   ═══════════════════════════════════════════════════════════════ */
.bystrt-table{display:flex;flex-direction:column;}
.bystrt-thead{
  display:grid;
  grid-template-columns: 36px 44px 220px 130px 1.4fr 130px 110px 80px 24px;
  gap:10px;padding:10px 14px;background:var(--bg2);border-bottom:1px solid var(--border);
  font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.6px;font-weight:600;
  position:sticky;top:0;z-index:1;
}

.bystrt-row-wrap{border-bottom:1px solid var(--border);transition:background .15s;}
.bystrt-row-wrap:last-child{border-bottom:none;}
.bystrt-row-wrap.open{background:var(--bg3);}
.bystrt-row{
  display:grid;
  grid-template-columns: 36px 44px 220px 130px 1.4fr 130px 110px 80px 24px;
  gap:10px;padding:10px 14px;align-items:center;cursor:pointer;
}
.bystrt-row:hover{background:var(--bg3);}
.bystrt-row-wrap.open .bystrt-row{background:var(--bg3);}
.bystrt-row-wrap.selected{background:rgba(237,103,7,.06);}
.bystrt-row-wrap.selected .bystrt-row{background:rgba(237,103,7,.06);}

/* Checkbox + N° (uniformes avec le module Interventions) */
.bystrt-cb-cell{display:flex;align-items:center;justify-content:center;}
.bystrt-num{text-align:center;font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;font-size:12px;color:var(--text3);font-weight:500;}

/* Cellule sous-traitant (avatar + nom + statut) */
.bystrt-cell-st{display:flex;align-items:center;gap:10px;min-width:0;}
.bystrt-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#ed6707,#c04f00);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0;}
.bystrt-name{font-size:13.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px;}
.bystrt-status{display:inline-block;font-size:10px;font-weight:600;padding:1px 7px;border-radius:3px;font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;margin-top:2px;}
.bystrt-status.green{color:var(--green);background:rgba(34,197,94,.12);}
.bystrt-status.orange{color:var(--orange);background:rgba(249,115,22,.12);}
.bystrt-status.red{color:var(--red);background:rgba(239,68,68,.12);}
.bystrt-status.gray{color:var(--text3);background:var(--bg4);}

/* Cellules génériques (gros chiffre + sous-texte) */
.bystrt-cell{display:flex;flex-direction:column;justify-content:center;min-width:0;}
.bystrt-big{font-size:18px;font-weight:700;font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;color:var(--text);line-height:1.1;}
.bystrt-small{font-size:10.5px;color:var(--text3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px;}

/* Cellule équipements (chips) */
.bystrt-cell-tags{display:flex;flex-wrap:wrap;gap:4px;align-items:flex-start;align-content:flex-start;min-width:0;}
.bystrt-tag{display:inline-block;font-size:10.5px;color:var(--text2);background:var(--bg4);border:1px solid var(--border);border-radius:4px;padding:2px 7px;line-height:1.3;white-space:nowrap;}
.bystrt-tag.more{color:var(--text3);font-style:italic;}

/* Période */
.bystrt-cell-period{display:flex;flex-direction:column;justify-content:center;line-height:1.4;}

/* Valeurs */
.bystrt-cell-val{font-size:13px;font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;line-height:1.2;}
.bystrt-cell-vol{display:flex;flex-direction:column;justify-content:center;}

/* Chevron */
.bystrt-chev{font-size:14px;color:var(--text3);text-align:center;transition:transform .2s;}

/* Détail expandable */
.bystrt-detail{padding:6px 14px 14px 124px;background:var(--bg2);border-top:1px dashed var(--border);}
.bystrt-detail-row{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr)) auto;
  gap:14px 18px;padding:14px 16px;background:var(--bg3);border:1px solid var(--border);border-radius:8px;margin-bottom:8px;
}
.bystrt-detail-num{
  display:inline-block;
  font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;font-size:10.5px;color:var(--text3);font-weight:600;
  background:var(--bg4);border:1px solid var(--border);border-radius:5px;padding:1px 7px;
  letter-spacing:.3px;margin-right:8px;vertical-align:middle;
}
.bystrt-detail-row:last-child{margin-bottom:0;}
.bystrt-detail-row.selected{background:rgba(237,103,7,.08);border-color:var(--accent);}
.bystrt-detail-cell{min-width:0;}
.bystrt-detail-ref{font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;font-size:12px;font-weight:600;color:var(--accent);}
.bystrt-detail-nom{font-size:12.5px;color:var(--text);font-weight:500;margin-top:2px;}
.bystrt-detail-lbl{font-size:9.5px;color:var(--text3);text-transform:uppercase;letter-spacing:.4px;font-weight:600;margin-bottom:3px;}
.bystrt-detail-val{font-size:12px;color:var(--text);line-height:1.4;}

@media (max-width:1280px){
  .bystrt-thead,.bystrt-row{
    grid-template-columns: 32px 36px 200px 90px 1fr 90px 100px 90px 60px 20px;
    font-size:11px;
  }
  .bystrt-detail{padding-left:14px;}
  .bystrt-detail-row{grid-template-columns:repeat(2,1fr) auto;}
}
@media (max-width:900px){
  .bystrt-thead{display:none;}
  .bystrt-row{grid-template-columns:1fr auto;}
  .bystrt-cell,.bystrt-cell-tags,.bystrt-cell-period,.bystrt-cell-val,.bystrt-cell-vol{display:none;}
  .bystrt-detail-row{grid-template-columns:1fr;}
}

/* ═══════════════════════════════════════════════════════════════
   CONTRATS CLIENTS — vue arborescence par équipement
   ═══════════════════════════════════════════════════════════════ */
.byequip-table{display:flex;flex-direction:column;}
.byequip-thead{
  display:grid;
  grid-template-columns:36px 44px 36px 1.3fr 1.5fr 1.2fr 120px 120px 120px 130px 1fr 90px;
  gap:10px;padding:8px 14px;
  font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;
  color:var(--text3);border-bottom:2px solid var(--border);
}
.byequip-row-wrap{border-bottom:1px solid var(--border);transition:background .15s;}
.byequip-row-wrap:last-child{border-bottom:none;}
.byequip-row-wrap.open{background:var(--bg3);}
.byequip-row{
  display:grid;
  grid-template-columns:36px 44px 36px 1.3fr 1.5fr 1.2fr 120px 120px 120px 130px 1fr 90px;
  gap:10px;padding:10px 14px;align-items:center;cursor:pointer;
}
.byequip-row:hover{background:var(--bg3);}
.byequip-row-wrap.open .byequip-row{background:var(--bg3);}

.byequip-chev{font-size:13px;color:var(--text3);text-align:center;transition:transform .2s;user-select:none;}

.byequip-cell-equip{display:flex;align-items:center;gap:10px;min-width:0;}
.byequip-icon{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,var(--accent),#c04f00);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0;letter-spacing:-.5px;}
.byequip-name{font-size:13.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.byequip-count-badge{display:inline-block;font-size:10px;font-weight:700;font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;padding:1px 6px;border-radius:3px;color:var(--text2);background:var(--bg4);border:1px solid var(--border);margin-top:2px;}

.byequip-cell{display:flex;flex-direction:column;justify-content:center;min-width:0;}
.byequip-big{font-size:18px;font-weight:700;font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;color:var(--text);line-height:1.1;}
.byequip-small{font-size:10.5px;color:var(--text3);margin-top:2px;}
.byequip-val{font-size:13px;font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;line-height:1.2;}
.byequip-clients{font-size:12px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.byequip-site{display:flex;align-items:center;gap:4px;margin-top:4px;font-size:11.5px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.byequip-site-ico{opacity:.7;flex-shrink:0;font-size:10px;}
/* Colonne « Site » dédiée (liste Contrats clients) : autorise le retour à la ligne
   quand un contrat couvre plusieurs sites (ex. contrats CCI multi-CCID). */
.byequip-site-val{display:flex;align-items:flex-start;gap:4px;font-size:12px;color:var(--text2);line-height:1.35;overflow-wrap:anywhere;}
.byequip-cell-tags{display:flex;flex-wrap:wrap;gap:4px;align-items:flex-start;align-content:flex-start;min-width:0;}

.byequip-detail{padding:6px 14px 14px 50px;background:var(--bg2);border-top:1px dashed var(--border);}

/* ─── Tableau d'équipements éditables dans l'arborescence CC ─── */
.cc-eq-table{border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--bg3);}
.cc-eq-head,.cc-eq-row{
  display:grid;
  grid-template-columns:32px 36px 1.5fr 1.1fr 1.3fr 100px 100px 100px 118px 88px 54px;
  gap:8px 14px;padding:8px 12px;align-items:center;
}
.cc-eq-head{
  font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;
  color:var(--text3);background:var(--bg2);border-bottom:1px solid var(--border);
}
.cc-eq-row{border-bottom:1px solid var(--border);font-size:12.5px;}
.cc-eq-row:last-child{border-bottom:none;}
.cc-eq-row:hover{background:rgba(237,103,7,.05);}
@media(max-width:900px){
  .cc-eq-head{display:none;}
  .cc-eq-row{grid-template-columns:32px 36px 1fr 1fr;gap:4px 10px;}
}
.byequip-detail-row{
  display:grid;
  grid-template-columns:2fr 160px 200px;
  gap:10px 18px;padding:10px 14px;
  background:var(--bg3);border:1px solid var(--border);border-radius:8px;margin-bottom:6px;
  align-items:center;transition:background .12s;
}
.byequip-detail-row:last-child{margin-bottom:0;}
.byequip-detail-row:hover{background:rgba(237,103,7,.05);}
.byequip-detail-equip{font-size:13px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.byequip-detail-val{font-size:12px;color:var(--text);line-height:1.4;}

@media(max-width:1280px){
  .byequip-thead,.byequip-row{grid-template-columns:32px 40px 32px 1.2fr 1.3fr 1.1fr 105px 105px 105px 110px 1fr 80px;font-size:11px;}
  .byequip-detail{padding-left:14px;}
  .byequip-detail-row{grid-template-columns:1.5fr 140px 170px;}
}
@media(max-width:900px){
  .byequip-thead{display:none;}
  .byequip-row{grid-template-columns:32px 36px 36px 1fr 1fr;}
  .byequip-detail-row{grid-template-columns:1fr;}
}

/* ═══ IMPORTS QUEUE — Dropzone & cartes ═══ */
.iq-dropzone {
  position: relative;
  border: 2px dashed var(--border);
  border-radius: 10px;
  background: var(--bg2);
  padding: 28px 16px;
  margin-bottom: 14px;
  text-align: center;
  cursor: pointer;
  transition: all 0.18s ease;
}
.iq-dropzone:hover {
  border-color: var(--primary, #3b82f6);
  background: var(--bg);
}
.iq-dropzone.iq-drag-active {
  border-color: var(--primary, #3b82f6);
  background: rgba(59, 130, 246, 0.08);
  transform: scale(1.005);
}
.iq-dropzone .iq-dropzone-content {
  pointer-events: none;
}
.iq-dropzone .iq-uploading-overlay {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  color: #fff;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 5;
}
.iq-dropzone.iq-uploading .iq-uploading-overlay {
  display: flex;
}
.iq-dropzone.iq-uploading .iq-dropzone-content {
  opacity: 0.3;
}
.iq-dropzone .iq-uploading-overlay > div:first-child {
  animation: iq-spin 1s linear infinite;
  font-size: 28px;
}
@keyframes iq-spin {
  to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — Adaptation à tous les terminaux
   Breakpoints :
     ≤ 480px  : mobile portrait
     ≤ 768px  : mobile landscape / tablette portrait
     ≤ 1024px : tablette landscape / petit laptop
     ≤ 1280px : laptop
     > 1280px : desktop standard (défaut)

   Techniques utilisées :
     - Dynamic Viewport Units (dvh, svh, lvh) pour corriger les sauts iOS
     - Safe-area-inset pour iPhone encoche / Dynamic Island
     - Fluid typography avec clamp() pour transitions douces
     - Container queries pour widgets adaptatifs
     - prefers-reduced-motion pour accessibilité
   ═══════════════════════════════════════════════════════════════ */

/* ─── FONDATIONS MODERNES ─── */

/* Variables CSS de typographie fluide (s'adapte continûment entre mobile et desktop) */
:root {
  /* clamp(min, fluid, max) — fluid bascule entre min et max selon la largeur */
  --fs-xs:   clamp(10px,  0.65vw + 8px,  11px);
  --fs-sm:   clamp(11px,  0.7vw + 9px,   12.5px);
  --fs-base: clamp(12.5px, 0.8vw + 10px, 14px);
  --fs-md:   clamp(13px,  0.9vw + 11px,  15px);
  --fs-lg:   clamp(15px,  1.2vw + 12px,  18px);
  --fs-xl:   clamp(18px,  1.6vw + 14px,  24px);
  --fs-2xl:  clamp(22px,  2.2vw + 16px,  32px);

  /* Safe-area-insets pour iPhone (encoche/dynamic island) */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
}

/* Hauteur viewport dynamique : utilise dvh quand disponible (≠ vh qui ne prend pas en compte
   la barre URL sur mobile → fait sauter le layout au scroll). */
@supports (height: 100dvh) {
  .app { height: 100dvh; }
}

/* Padding interne respectant l'encoche iPhone */
.topbar { padding-top: var(--safe-top); }
.cb-panel { padding-bottom: var(--safe-bottom); }
.cb-fab { bottom: max(22px, var(--safe-bottom)); }

/* Accessibilité : si l'utilisateur a demandé moins d'animations, on les coupe */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Fluid typography appliquée aux éléments clés (s'adapte sans breakpoints saccadés) */
.topbar-title       { font-size: var(--fs-lg); }
.card-title         { font-size: var(--fs-md); }
.kpi-value          { font-size: var(--fs-2xl); }
.kpi-label          { font-size: var(--fs-sm); }
.modal-hdr-title    { font-size: var(--fs-md); }

/* ─── CONTAINER QUERIES (mobile uniquement pour éviter d'affecter desktop) ─── */
@media (max-width: 1024px) {
  @supports (container-type: inline-size) {
    .card { container-type: inline-size; container-name: card; }
    @container card (max-width: 380px) {
      .kpi-grid { grid-template-columns: 1fr !important; }
      .summary-grid { grid-template-columns: 1fr !important; }
    }
  }
}

/* Bouton hamburger : caché en desktop, visible en mobile/tablette */
.sidebar-toggle{display:none;align-items:center;justify-content:center;width:36px;height:36px;background:transparent;border:1px solid var(--border);border-radius:8px;cursor:pointer;color:var(--text2);flex-shrink:0;transition:all .15s;}
.sidebar-toggle:hover{background:var(--bg3);color:var(--text);}
.sidebar-toggle svg{width:18px;height:18px;}

/* Overlay sidebar mobile (par défaut caché) */
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.55);backdrop-filter:blur(2px);z-index:99;animation:sidebarFadeIn .2s;}
@keyframes sidebarFadeIn{from{opacity:0;}to{opacity:1;}}
.sidebar-overlay.visible{display:block;}

/* ═══ TABLETTE — 769px à 1024px : sidebar OFF-CANVAS avec hamburger ═══
   Comportement identique au mobile : sidebar cachée par défaut, ouverte
   via le bouton ☰ dans la topbar. Plus de rail mode (jugé peu lisible). */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Bouton hamburger VISIBLE */
  .sidebar-toggle{display:inline-flex;}
  /* Sidebar cachée par défaut, glisse depuis la gauche au clic */
  .sidebar{
    position:fixed;
    left:0;top:0;bottom:0;
    width:280px;
    transform:translateX(-100%);
    transition:transform .25s cubic-bezier(.4,0,.2,1);
    z-index:100;
    box-shadow:4px 0 24px rgba(0,0,0,0.35);
  }
  .sidebar.open{transform:translateX(0);}
  body.sidebar-open{overflow:hidden;}
  /* Reset des rules rail mode (au cas où) */
  .sidebar .logo{justify-content:flex-start;padding:20px 18px;gap:14px;}
  .sidebar .logo-name,
  .sidebar .logo-ver{display:block;}
  .sidebar .nav-group{visibility:visible;height:auto;}
  .sidebar .nav-item{justify-content:flex-start;padding:8px 10px;overflow:visible;}
  .sidebar .nav-item > *:not(svg){display:inline;}
  .sidebar .user-card{justify-content:flex-start;padding:8px 10px;}
  .sidebar .user-card > div:not(.avatar){display:block;}
}

/* ═══ TABLETTE & MOBILE LANDSCAPE — ≤ 1024px ═══ */
@media (max-width: 1024px) {
  /* NB : on garde .app en row sur tablette pour que la sidebar reste à gauche
     en mode rail (72px). On ne passe en column QUE sur mobile (≤768px). */
  .content{padding:14px;}
  /* Topbar adaptée : title réduit, éléments en ligne */
  .topbar{padding:0 12px;gap:8px;}
  .topbar-title{font-size:15px;}
  .search-box{width:auto;flex:1;min-width:140px;max-width:280px;}
  /* Bouton "Assistant IA" : icône seule */
  .topbar .btn-ai{padding:7px 10px;}
  .topbar .btn-ai svg{margin-right:0;}

  /* Grids responsive */
  .grid-2{grid-template-columns:1fr;gap:12px;}
  .kpi-grid{grid-template-columns:repeat(2,1fr)!important;}
  .summary-grid{grid-template-columns:repeat(3,1fr);}
  .vital-signs-grid{grid-template-columns:repeat(2,1fr);}

  /* Modals : largeur adaptative */
  .modal{width:auto!important;max-width:92vw!important;margin:14px;}
  .modal-body{max-height:75vh;overflow-y:auto;}
}

/* ═══ MOBILE — ≤ 768px ═══ */
@media (max-width: 768px) {
  /* Sidebar OFF-CANVAS : cachée par défaut, ouverte via hamburger */
  .sidebar-toggle{display:inline-flex;}
  .sidebar{
    position:fixed;
    left:0;top:0;bottom:0;
    width:260px;
    transform:translateX(-100%);
    transition:transform .25s cubic-bezier(.4,0,.2,1);
    z-index:100;
    box-shadow:4px 0 24px rgba(0,0,0,0.3);
  }
  .sidebar.open{transform:translateX(0);}
  body.sidebar-open{overflow:hidden;}

  /* Topbar plus compacte */
  .topbar{height:50px;padding:0 10px;}
  .topbar-title{font-size:14px;flex:0 0 auto;}
  /* On masque certains éléments secondaires sur mobile */
  .undo-pill{display:none;}
  /* Search box : icône uniquement, dépliable */
  .search-box{width:36px;height:36px;padding:0;justify-content:center;transition:width .2s;}
  .search-box input{display:none;}
  .search-box:focus-within{width:200px;padding:0 12px;}
  .search-box:focus-within input{display:block;}
  /* Sélecteur "current-user" : masqué (admin uniquement) */
  #current-user-selector{display:none;}
  /* Bouton Assistant IA : juste l'icône */
  .topbar .btn-ai span,.topbar .btn-ai{font-size:0;}
  .topbar .btn-ai svg{width:16px!important;height:16px!important;}

  /* Content : padding réduit */
  .content{padding:10px;}

  /* Cards : padding réduit */
  .card{margin-bottom:10px;}
  .card-header{padding:10px 12px;flex-wrap:wrap;gap:6px;}
  .card-body{padding:12px;}

  /* Grids : tous en 1 colonne */
  .grid-2{grid-template-columns:1fr;}
  .kpi-grid{grid-template-columns:repeat(2,1fr)!important;gap:8px;}
  .summary-grid{grid-template-columns:repeat(2,1fr);}
  .vital-signs-grid{grid-template-columns:1fr;}
  .cb-cards-inner,.traj-cards-grid,.traj-heat-grid{grid-template-columns:1fr!important;}

  /* KPI : version compacte */
  .kpi{padding:12px;}
  .kpi-value{font-size:22px;}

  /* Tableaux : scroll horizontal avec ombre indicatrice */
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-height:none;}
  table.erp{min-width:auto;font-size:12px;}
  table.erp th,table.erp td{padding:7px 6px;}

  /* Modals : presque fullscreen */
  .modal{width:96vw!important;max-width:96vw!important;margin:8px;}
  .modal-body{max-height:78vh;}
  .modal-hdr{padding:11px 14px;}
  .modal-hdr-title{font-size:14px;}
  .modal-footer{padding:10px 14px;gap:6px;flex-wrap:wrap;}
  .modal-footer .btn{flex:1;min-width:0;}

  /* Forms : 1 colonne */
  .form-grid{grid-template-columns:1fr!important;}

  /* Chatbot bulle : panel presque fullscreen sur mobile */
  .cb-panel{width:calc(100vw - 16px)!important;height:calc(100vh - 90px)!important;right:8px!important;bottom:72px!important;}
  .cb-fab{bottom:14px;right:14px;width:50px;height:50px;}

  /* Assistant IA : layout vertical (chat en haut, panneau dessous) */
  #page-ia > div{grid-template-columns:1fr!important;height:auto!important;}
  #page-ia .card{height:auto;}

  /* Boutons "touch-friendly" : taille min 40px */
  .btn{min-height:38px;padding:8px 14px;}
  .btn-sm{min-height:32px;padding:6px 10px;}
  .r-btn{min-height:32px;}

  /* Onglets et toggles : wrap si nécessaire */
  .planning-tab,.traj-tab,.cb-level-tab{padding:7px 12px;font-size:12px;}

  /* Tableaux Crystal Ball, planning, etc. */
  .cb-filterbar{flex-direction:column;align-items:stretch;}
  .cb-search{width:100%;max-width:none;}

  /* Suggestions IA panel sur la droite → en-dessous sur mobile */
  #page-ia .card-header{padding:10px;}

  /* Toaster : centré en bas */
  .toast-container{left:50%;right:auto!important;transform:translateX(-50%);bottom:90px!important;max-width:calc(100vw - 20px);}

  /* Notifications */
  .nav-item{padding:10px 12px;font-size:14px;}
  .nav-item svg{width:17px;height:17px;}

  /* Tooltips désactivés sur touch (pas pertinents) */
  .tipbox{display:none!important;}
}

/* ═══ MOBILE SMALL — ≤ 480px ═══ */
@media (max-width: 480px) {
  .topbar-title{font-size:13px;}
  .topbar{padding:0 8px;gap:6px;}
  /* Avatar profil plus petit */
  .topbar-avatar{width:32px!important;height:32px!important;font-size:11px!important;}
  /* Sidebar plus large pour mieux toucher */
  .sidebar{width:80vw;}

  .content{padding:8px;}

  /* Tous les KPIs en 1 colonne sur très petit écran */
  .kpi-grid,.summary-grid{grid-template-columns:1fr!important;}

  /* Tableaux : police minimale */
  table.erp{font-size:11.5px;}
  table.erp th{font-size:10px;letter-spacing:.3px;}

  /* Modals : fullscreen total */
  .modal{width:100vw!important;max-width:100vw!important;margin:0!important;height:100vh;max-height:100vh;border-radius:0;display:flex;flex-direction:column;}
  .modal-body{flex:1;max-height:none;}

  /* Modal Rapport : layout en colonne (PDF puis Infos) */
  #modal-rapport #rapport-split-container{grid-template-columns:1fr!important;}
  #rapport-splitter{display:none;}

  /* Modal Suggestion details : tables plus compactes */
  .sug-table{font-size:11px;}
  .sug-table th,.sug-table td{padding:6px 7px;}

  /* Chatbot bulle : encore plus petit */
  .cb-fab{width:46px;height:46px;}
  .cb-fab svg{width:22px;height:22px;}

  /* Cards très tassées */
  .card-header{padding:8px 10px;}
  .card-title{font-size:13px;}
  .card-body{padding:10px;}

  /* Forms : labels plus petits */
  .form-label{font-size:11px;}
  .form-input,.form-select,.form-textarea{font-size:14px;padding:9px 10px;}

  /* Filtres interventions : empilés */
  #page-interventions .form-select{width:100%!important;max-width:none;}

  /* Conversations IA : taille adaptée */
  .ia-conv-item{padding:9px;}
  .ia-conv-title{font-size:13px;}
}

/* ═══ GRAND ÉCRAN — > 1600px ═══ */
@media (min-width: 1600px) {
  .content{padding:24px 32px;max-width:1800px;margin:0 auto;}
  .kpi-grid{gap:18px;}
  .grid-2{gap:18px;}
}

/* ═══ ORIENTATION LANDSCAPE MOBILE (paysage) ═══ */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .topbar{height:42px;}
  .content{padding:8px;}
  .card-body{padding:10px;}
  .modal{max-height:92vh;}
}

/* ═══ ACCESSIBILITÉ TOUCH ═══ */
@media (pointer: coarse) {
  /* Désactiver les hover effects sur touch — pas pertinents */
  .nav-item:hover{transform:none;}
  .kpi:hover{transform:none;}
  /* Tap zones agrandies */
  .btn,.btn-sm,.r-btn{min-height:36px;}
  /* Tooltips natifs sur touch ne fonctionnent pas — masque les .tip */
  .tip .tipbox{display:none;}
}

/* ═══════════════════════════════════════════════════════════════
   STICKY HEADERS — l'en-tête reste visible au scroll
   NB : table.erp th a déjà position:sticky + box-shadow définis
   ligne 190 (CSS original). On ne dédouble PAS ici pour éviter
   les conflits visuels (décalage / clipping du texte).
   On garde uniquement le wrapper scrollable.
   ═══════════════════════════════════════════════════════════════ */
.table-wrap {
  overflow-y: auto;
  position: relative;
}

/* ═══════════════════════════════════════════════════════════
   .page-top-block — Ensemble 1 statique (KPIs + filtres)
   ───────────────────────────────────────────────────────────
   Bloc visuellement bordé qui englobe KPIs + toolbar + filtres
   et reste figé en haut quand l'utilisateur scrolle.

   Pendant ce temps, le tableau (Ensemble 2) reste dans son
   propre .card avec son scroll interne et son thead sticky.
   ═══════════════════════════════════════════════════════════ */
.page-top-block {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0 0 14px;
}
/* Le dernier élément à l'intérieur ne doit pas avoir de margin-bottom (pas de gap inutile) */
.page-top-block > :last-child {
  margin-bottom: 0;
}
@media (max-width: 768px) {
  .page-top-block {
    padding: 10px 12px;
    margin-bottom: 10px;
    border-radius: 10px;
  }
}

/* Alias rétro-compatibilité : .page-fixed-top → reste fonctionnel mais pointe
   désormais sur le même style (au cas où il reste des références) */
.page-fixed-top { /* utilise les mêmes règles que .page-top-block */
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0 0 14px;
}
.page-fixed-top > :last-child { margin-bottom: 0; }
@media (max-width: 768px) {
  .page-fixed-top { padding: 10px 12px; margin-bottom: 10px; border-radius: 10px; }
}

/* ═══════════════════════════════════════════════════════════
   SCROLL INTERNE AU TABLEAU — pages avec .page-top-block
   ───────────────────────────────────────────────────────────
   Quand une page contient un .page-top-block (Interventions,
   Rapports, Clients, Sous-traitants, Contrats, Utilisateurs),
   la PAGE entière devient un flex column de hauteur fixe :
     ► .page-top-block reste en haut (flex:0 0 auto)
     ► les bandeaux transients gardent leur hauteur naturelle
     ► .card / view-* prend le reste (flex:1) et son .table-wrap
       interne scrolle.
   Résultat : on ne fait plus défiler la PAGE entière, seul le
   tableau scrolle dans son cadre — identique au pattern Planning.
   Les pages SANS .page-top-block (Dashboard, Prédictions,
   Imports, Profil, Paramètres IA, Analyse) conservent leur
   comportement scroll-de-page classique.
   ═══════════════════════════════════════════════════════════ */
.content:has(> .page.active > .page-top-block) {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.page.active:has(> .page-top-block) {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* Le bloc statique du haut garde sa hauteur naturelle */
.page.active:has(> .page-top-block) > .page-top-block {
  flex: 0 0 auto;
}

/* Bandeaux transients (filter-banner, dup-banner, ai-search-result, selection-bar)
   ne grandissent pas — gardent leur hauteur naturelle */
.page.active:has(> .page-top-block) > div[id$="-banner"],
.page.active:has(> .page-top-block) > #ai-search-result,
.page.active:has(> .page-top-block) > #selection-bar {
  flex: 0 0 auto;
}

/* Containers de résultats — prennent le reste de l'espace dispo */
.page.active:has(> .page-top-block) > .card,
.page.active:has(> .page-top-block) > [id^="view-"],
.page.active:has(> .page-top-block) > [id^="rapport-section-"] {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin-bottom: 0;
}

/* Vues "grille" (tuiles en CSS Grid : sous-traitants, utilisateurs, rapports).
   Override de la règle `display:flex` ci-dessus : on REMET display:grid pour
   conserver la mise en page en tuiles auto-fill, tout en gardant flex:1 +
   overflow-y:auto pour le scroll interne au mode "page-top-block".
   PAS de !important : un inline `style="display:none"` (vue masquée par le
   view-switcher) doit garder la priorité, sinon la grille vide prend de l'espace
   en mode tableau. */
.page.active:has(> .page-top-block) > .users-grid,
.page.active:has(> .page-top-block) > [id$="-grid"] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  align-content: start;        /* évite que les lignes s'étirent verticalement */
  overflow-y: auto;
}

.page.active:has(> .page-top-block) > .card > .card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
}

/* Le .table-wrap occupe TOUT l'espace restant et scrolle en interne */
.page.active:has(> .page-top-block) .table-wrap {
  flex: 1;
  overflow-y: auto;
  max-height: none;
}

/* ─── INTERVENTIONS : thead figé au scroll (renfort, desktop ≥769px) ──────────
   Le pattern générique ci-dessus repose sur :has(). On le RÉ-AFFIRME ici en ciblant
   directement #page-interventions (sans :has) : la page devient un flex column de
   hauteur bornée → le tableau prend l'espace restant et défile EN INTERNE → son
   thead (table.erp th : position:sticky;top:0) reste visible au défilement vertical.
   Limité au desktop : sur mobile la liste passe en cartes (pas de thead figé). */
@media (min-width: 769px) {
  #page-interventions.page.active {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
  }
  #page-interventions.page.active > #view-table {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  #page-interventions.page.active > #view-table > .table-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    max-height: none;
  }
}

/* Contrats Sous-traitants — .bystrt-table est injecté directement dans .card
   sans .card-body ni .table-wrap intermédiaire. On lui applique le même
   traitement scroll que .table-wrap, sinon les lignes sont coupées. */
.page.active:has(> .page-top-block) > .card > .bystrt-table,
.page.active:has(> .page-top-block) > .card > .byequip-table {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

/* Contrats Clients (#cc-list) — même scroll que ci-dessus.
   Grille de colonnes propre au module (7 en-têtes + 8 colonnes avec chevron) */
#cc-list .bystrt-thead {
  grid-template-columns: 32px 1.6fr 70px 1fr 150px 120px 175px;
}
#cc-list .bystrt-row {
  grid-template-columns: 32px 1.6fr 70px 1fr 150px 120px 175px 24px;
}

/* Vue grille (Rapports) — même traitement que le tableau : scroll interne */
.page.active:has(> .page-top-block) .rapport-grid:not([style*="display:none"]):not([style*="display: none"]) {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

/* Vue grille (Interventions) — même règle pour bénéficier du scroll interne
   et garantir que la grille occupe toute la largeur disponible.
   Ajouté le 2026-05-28 lors du remplacement de la vue Kanban par la vue Grille. */
.page.active:has(> .page-top-block) .int-grid:not([style*="display:none"]):not([style*="display: none"]) {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  width: 100%;
}

/* Compteurs/lignes d'info à l'intérieur d'une section de résultats — hauteur naturelle */
.page.active:has(> .page-top-block) #rapport-count,
.page.active:has(> .page-top-block) #suivi-count {
  flex: 0 0 auto;
}

/* Sur mobile : on revient au scroll classique de page (UX plus confortable) */
@media (max-width: 768px) {
  .content:has(> .page.active > .page-top-block) {
    overflow-y: auto;
    display: block;
  }
  .page.active:has(> .page-top-block) {
    display: block;
    height: auto;
    min-height: 0;
  }
  .page.active:has(> .page-top-block) > .card,
  .page.active:has(> .page-top-block) > [id^="view-"],
  .page.active:has(> .page-top-block) > [id^="rapport-section-"] {
    display: block;
    flex: none;
    min-height: 0;
  }
  .page.active:has(> .page-top-block) > .card > .card-body {
    display: block;
    flex: none;
    padding: 16px 18px;
  }
  .page.active:has(> .page-top-block) .table-wrap {
    flex: none;
    overflow-y: visible;
    max-height: none;
  }
}

/* ═══════════════════════════════════════════════════════════
   PLANNING — Pattern flex column + scroll interne
   Comme dans Clients/Sous-traitants : la PAGE devient un flex column
   de hauteur fixe (= hauteur du .content), avec :
     - .planning-sticky-block en haut (flex:0 0 auto, ne bouge JAMAIS)
     - .planning-scroll-area en bas (flex:1, overflow-y:auto)
   Aucun position:sticky requis : le header est juste en haut du flex.
   ═══════════════════════════════════════════════════════════ */
.page#page-planning.active {
  display: flex;
  flex-direction: column;
  /* La page occupe toute la hauteur disponible dans .content */
  height: 100%;
  /* Annule le padding standard de .content pour s'étendre pleine zone */
  margin: -20px -22px;
  padding: 0;
}
.planning-sticky-block {
  flex: 0 0 auto;       /* Ne grandit, ne rétrécit, ne scrolle pas */
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.30), 0 2px 0 var(--accent);
  position: relative;
  z-index: 10;
}
.planning-scroll-area {
  flex: 1 1 auto;       /* Prend tout l'espace restant */
  overflow-y: auto;     /* Scroll interne uniquement ici */
  overflow-x: auto;
  padding: 14px 22px 22px;
  min-height: 0;        /* Astuce flexbox pour que overflow fonctionne */
}

/* Ligne 1 : Filtres + Navigation (le titre est dans la topbar globale) */
.planning-filters-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 22px;
  border-bottom: 1px solid var(--border);
}

/* Si l'élément day-headers est vide (vue Année), pas d'espace fantôme */
#planning-day-headers:empty    { display: none; }
#planning-retards-anchor:empty { display: none; }

/* ─── Bandeau retards (DANS le scroll-area, scrolle avec le contenu) ─── */
.planning-scroll-area > #planning-retards-anchor > .planning-retards-banner {
  position: relative;
  top: auto;
  z-index: auto;
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(239, 68, 68, 0.3);
  background: var(--red-bg);
  box-shadow: none;
  backdrop-filter: none;
}
.planning-scroll-area > #planning-retards-anchor > .planning-retards-banner[open] {
  margin: 0 0 14px;
}

/* Ligne 3 : En-têtes jours (vue Semaine) */
.planning-day-headers-grid {
  display: grid;
  grid-template-columns: 160px repeat(7, 1fr);
  gap: 6px;
  padding: 8px 22px;
  background: var(--bg3);
  min-width: 920px;
}
/* En vue Mois : 7 colonnes égales (pas de colonne ST) */
.planning-day-headers-grid.is-month-mode {
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  min-width: 0;
  padding: 8px 22px;
}
.pd-cell {
  text-align: center;
  padding: 6px 4px;
  background: var(--bg4);
  border-radius: 4px;
  font-weight: 600;
  font-size: 12px;
  color: var(--text);
}
.pd-cell-st {
  text-align: left;
  padding: 6px 10px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text3);
  background: var(--bg4);
}
.pd-cell-today {
  /* Repère « aujourd'hui » en orange TRANSPARENT (fond translucide + texte orange)
     pour le distinguer de l'orange PLEIN des RDV/planification (var(--brand)). */
  background: rgba(237, 103, 7, .15);
  color: var(--accent);
  border: 1px solid rgba(237, 103, 7, .45);
  font-weight: 700;
}
.pd-cell-weekend {
  color: var(--text3);
  background: var(--bg3);
}

/* Corps du planning : mêmes colonnes que les en-têtes pour alignement parfait
   Note : pas de padding latéral (le .planning-scroll-area s'en charge) */
.planning-body-grid {
  display: grid;
  grid-template-columns: 160px repeat(7, 1fr);
  gap: 6px;
  min-width: 920px;
  font-size: 12px;
}
.planning-body-grid.is-month-mode {
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  min-width: 0;
}

/* Adaptation mobile (≤768px) : marges et paddings réduits */
@media (max-width: 768px) {
  .page#page-planning.active {
    margin: -10px;
  }
  .planning-filters-row {
    padding: 8px 12px;
    gap: 6px;
  }
  .planning-day-headers-grid {
    padding: 6px 12px;
    gap: 4px;
  }
  .planning-day-headers-grid.is-month-mode {
    padding: 6px 12px;
  }
  .planning-body-grid {
    gap: 4px;
  }
  .planning-scroll-area {
    padding: 12px;
  }
  .planning-scroll-area > #planning-retards-anchor > .planning-retards-banner {
    padding: 8px 12px;
  }
}

/* Card headers : sticky par défaut dans les listes scrollables verticalement */
.card-body[id*="list"],
.card-body[id*="grid"],
#dash-echeances,
#dash-ai-suggestions,
#analyse-tech-perf,
#analyse-sites {
  position: relative;
}

/* Topbar elle-même est déjà sticky (position fixed côté JS dans certaines pages) */
.topbar {
  position: sticky;
  top: 0;
  z-index: 80;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
}

/* Interventions : max-height géré désormais par le mode flex column
   (voir règle .page.active:has(> .page-top-block) .table-wrap). On garde
   uniquement les overrides mobile pour désactiver le sticky thead. */
@media (max-width: 768px) {
  /* Sur mobile, le sticky thead peut être désactivé (cards layout) */
  #page-interventions table.erp thead { position: static; }
}

/* Modal body scrollable : sticky header conservé */
.modal-body table.erp thead {
  top: 0;
}

/* ═══════════════════════════════════════════════════════════════
   PULL-TO-REFRESH — indicateur visuel
   ═══════════════════════════════════════════════════════════════ */
.ptr-indicator {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%, -60px);
  z-index: 150;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 24px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  font-size: 12.5px;
  color: var(--text);
  opacity: 0;
  transition: opacity .15s;
  pointer-events: none;
}
.ptr-icon {
  width: 18px;
  height: 18px;
  color: var(--accent);
  transition: transform 0.05s linear;
}
.ptr-icon svg { width: 18px; height: 18px; }
.ptr-indicator.ready .ptr-icon { color: var(--green); }
.ptr-indicator.refreshing .ptr-icon {
  animation: ptrSpin 0.8s linear infinite;
}
.ptr-indicator.refreshing .ptr-icon { color: var(--accent); }
@keyframes ptrSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.ptr-label { font-weight: 500; white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════
   FLOATING ACTION BUTTON (FAB) par page — action principale
   Visible uniquement sur mobile, au-dessus de la bottom-nav
   ═══════════════════════════════════════════════════════════════ */
.page-fab {
  position: fixed;
  right: 18px;
  bottom: calc(82px + var(--safe-bottom));   /* au-dessus de la bottom-nav */
  z-index: 85;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
  border: 2px solid rgba(255,255,255,0.15);
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(237,103,7,0.45), 0 2px 6px rgba(0,0,0,0.3);
  transition: transform .2s, box-shadow .2s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  padding: 0;
}
.page-fab:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 12px 28px rgba(237,103,7,0.55), 0 4px 8px rgba(0,0,0,0.4);
}
.page-fab:active { transform: translateY(0) scale(0.98); }
.page-fab svg { width: 24px; height: 24px; }
.page-fab span { display: none; }  /* label caché — accessible via aria-label */

/* Animation d'apparition quand on change de page */
.page-fab.appearing {
  animation: fabAppear .35s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes fabAppear {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* Caché en desktop par défaut */
@media (min-width: 769px) {
  .page-fab { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   PWA — Banner d'installation et de mise à jour
   ═══════════════════════════════════════════════════════════════ */
.pwa-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, var(--bg2), var(--bg3));
  border: 1px solid var(--accent);
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.5), 0 0 0 1px rgba(237,103,7,0.2);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .25s, transform .25s;
  pointer-events: none;
}
.pwa-banner.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.pwa-banner-icon {
  font-size: 28px;
  flex-shrink: 0;
}
.pwa-banner-text { flex: 1; min-width: 0; }
.pwa-banner-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.pwa-banner-desc {
  font-size: 11.5px;
  color: var(--text2);
  line-height: 1.4;
}
.pwa-banner-install {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background .15s;
}
.pwa-banner-install:hover { background: var(--accent2); }
.pwa-banner-close {
  background: transparent;
  border: none;
  color: var(--text3);
  font-size: 22px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  border-radius: 50%;
  flex-shrink: 0;
}
.pwa-banner-close:hover { background: var(--bg4); color: var(--text); }

/* Sur très petit écran, banner en colonne */
@media (max-width: 480px) {
  .pwa-banner {
    flex-wrap: wrap;
    bottom: calc(78px + var(--safe-bottom));  /* au-dessus de la bottom-nav */
  }
  .pwa-banner-install { order: 3; width: 100%; }
  .pwa-banner-close { order: 2; }
}

/* ═══ PRINT (impression) ═══ */
@media print {
  .sidebar,.topbar,.cb-fab,.cb-panel,.btn,.modal-bg,.bottom-nav,.pwa-banner,.ptr-indicator,.page-fab{display:none!important;}
  .content{padding:0;}
  .card{break-inside:avoid;border:1px solid #ccc;box-shadow:none;}
}

/* ═══════════════════════════════════════════════════════════════
   CLASSES UTILITAIRES — visibilité par device
   ═══════════════════════════════════════════════════════════════ */
.show-on-mobile { display: none !important; }
@media (max-width: 768px) {
  .hide-on-mobile { display: none !important; }
  .show-on-mobile { display: flex !important; }
}

/* ═══════════════════════════════════════════════════════════════
   MENU "..." GÉNÉRIQUE (More menu) — pour les toolbars surchargées
   ═══════════════════════════════════════════════════════════════ */
.more-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  z-index: 150;
  padding: 5px;
  opacity: 0;
  transform: translateY(-6px) scale(0.96);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity .15s, transform .15s;
}
.more-menu.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.more-menu button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  border-radius: 6px;
  font-family: inherit;
}
.more-menu button:hover { background: var(--bg3); }
.more-menu button svg { flex-shrink: 0; color: var(--text2); }
.more-menu button[style*="color:var(--red)"] svg { color: var(--red); }

/* Bouton « + » (menu d'actions Interventions) : survol + effet de clic (press).
   Combine couleur/ombre (toujours visibles) ET transform (léger lift/press). */
.int-plus-btn {
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .1s;
  cursor: pointer;
}
.int-plus-btn:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: var(--glow-brand, 0 4px 14px rgba(237,103,7,.35));
  transform: translateY(-1px);
}
.int-plus-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.int-plus-btn:active {
  transform: translateY(0) scale(.92);
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.25);
  filter: brightness(.95);
}

/* ═══════════════════════════════════════════════════════════════
   MENU PROFIL DROPDOWN — Accessible partout, riche en options
   ═══════════════════════════════════════════════════════════════ */
.profile-menu-wrap { position: relative; }

/* Petit point vert "en ligne" sur l'avatar */
.profile-status-dot {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
  border: 2px solid var(--bg2);
  pointer-events: none;
}

/* Dropdown menu */
.profile-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.2);
  z-index: 200;
  opacity: 0;
  transform: translateY(-8px) scale(0.96);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity 0.18s, transform 0.18s;
  padding: 6px;
}
.profile-menu.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Header du menu : avatar + nom + role */
.profile-menu-header {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
}
.profile-menu-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ed6707, #c04f00);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.profile-menu-info { min-width: 0; flex: 1; }
.profile-menu-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-menu-role {
  font-size: 11px;
  color: var(--text3);
  margin-top: 2px;
}
.profile-menu-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 6px;
}

/* Items du menu */
.profile-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  border-radius: 7px;
  font-family: inherit;
  transition: background 0.12s;
}
.profile-menu-item:hover { background: var(--bg3); }
.profile-menu-item:active { background: var(--bg4); }
.profile-menu-item svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--text2); }
.profile-menu-item.profile-menu-danger { color: var(--red); }
.profile-menu-item.profile-menu-danger svg { color: var(--red); }
.profile-menu-item.profile-menu-danger:hover { background: rgba(239, 68, 68, 0.1); }

/* Badge dans le menu (notifications, etc.) */
.profile-menu-badge {
  margin-left: auto;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  font-family: 'DM Mono', monospace;
  min-width: 20px;
  text-align: center;
}

/* Sur mobile, le menu prend plus de place et est centré */
@media (max-width: 480px) {
  .profile-menu {
    position: fixed;
    top: auto;
    bottom: calc(80px + var(--safe-bottom));
    right: 8px;
    left: 8px;
    min-width: auto;
    max-width: none;
    transform-origin: bottom right;
  }
}

/* ═══════════════════════════════════════════════════════════════
   BOTTOM NAVIGATION MOBILE
   ═══════════════════════════════════════════════════════════════ */
/* Caché en desktop, visible uniquement ≤ 768px */
.bottom-nav{
  display:none;
  position:fixed;
  bottom:0;left:0;right:0;
  z-index:90;
  background:var(--bg2);
  border-top:1px solid var(--border);
  padding:6px 4px calc(6px + var(--safe-bottom));
  gap:2px;
  box-shadow:0 -4px 16px rgba(0,0,0,0.18);
}
.bn-item{
  flex:1;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:7px 4px;
  background:transparent;border:none;cursor:pointer;
  color:var(--text3);font-size:10px;font-weight:500;font-family:inherit;
  border-radius:8px;
  transition:color .15s,background .15s;
  position:relative;
  min-height:48px;
}
.bn-item:active{background:var(--bg3);}
.bn-item svg{width:22px;height:22px;flex-shrink:0;}
.bn-item.active{color:var(--accent);}
.bn-item.active svg{transform:scale(1.08);}
/* Bouton FAB central (IA) — légèrement surélevé */
.bn-item.bn-fab{
  background:linear-gradient(135deg,#6366f1,#8b5cf6);
  color:#fff;
  margin-top:-12px;
  border-radius:50%;
  width:56px;height:56px;
  flex:0 0 56px;
  align-self:center;
  box-shadow:0 4px 14px rgba(99,102,241,.4);
}
.bn-item.bn-fab svg{width:26px;height:26px;}
.bn-item.bn-fab span{display:none;}
/* Badge notification */
.bn-badge{
  position:absolute;top:4px;right:14px;
  min-width:18px;height:18px;padding:0 5px;
  background:var(--red);color:#fff;
  font-size:10px;font-weight:700;font-family:'Antenna',sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
  border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--bg2);
}

@media (max-width:768px) {
  .bottom-nav{display:flex;}
  /* Padding bas du content pour ne pas que la bottom-nav cache le contenu */
  .content{padding-bottom:calc(80px + var(--safe-bottom));}
  /* Chatbot FAB remonté + à GAUCHE pour ne pas chevaucher le FAB de page (à droite) */
  .cb-fab{
    bottom:calc(82px + var(--safe-bottom));
    right:auto;
    left:14px;
    width:48px;
    height:48px;
  }
  .cb-fab svg{width:22px;height:22px;}
  /* Panneau chatbot ouvert : reste à droite, full largeur */
  .cb-panel{left:8px!important;right:8px!important;width:auto!important;}
}

/* ═══════════════════════════════════════════════════════════════
   TABLEAU INTERVENTIONS → VUE CARTES sur mobile
   Au lieu d'un tableau imbattable horizontalement, on transforme
   chaque ligne en carte verticale lisible
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:640px) {
  /* On masque les en-têtes et on transforme les tr en cards */
  #page-interventions table.erp thead{display:none;}
  #page-interventions table.erp,
  #page-interventions table.erp tbody{display:block;width:100%;}
  #page-interventions table.erp tr{
    display:block;
    background:var(--bg2);
    border:1px solid var(--border);
    border-radius:10px;
    padding:12px;
    margin-bottom:10px;
    cursor:pointer;
    transition:transform .15s,box-shadow .15s;
  }
  #page-interventions table.erp tr:hover{transform:translateY(-1px);box-shadow:var(--shadow);}
  #page-interventions table.erp tr.duplicate-row td:first-child{box-shadow:none;}
  #page-interventions table.erp tr.duplicate-row{border-left:3px solid var(--red);background:rgba(239,68,68,0.05);}
  #page-interventions table.erp td{
    display:flex;
    align-items:center;
    justify-content:space-between;
    border:none;
    padding:4px 0;
    font-size:13px;
    text-align:right;
  }
  /* Pseudo-label "data-label" à gauche de chaque cellule */
  #page-interventions table.erp td::before{
    content:attr(data-label);
    font-size:11px;
    color:var(--text3);
    text-transform:uppercase;
    letter-spacing:.4px;
    font-weight:600;
    text-align:left;
    margin-right:auto;
  }
  /* Cellules importantes mises en avant (site, équipement) — pleine largeur */
  #page-interventions table.erp td:nth-child(4),
  #page-interventions table.erp td:nth-child(5){
    flex-direction:column;
    align-items:flex-start;
    border-bottom:1px solid var(--border);
    padding:8px 0;
    margin-bottom:6px;
    text-align:left;
  }
  #page-interventions table.erp td:nth-child(4)::before,
  #page-interventions table.erp td:nth-child(5)::before{
    margin-bottom:4px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   DENSITY MODES — utilisateur peut switcher entre compact/cozy
   Ajouter class="density-compact" sur body pour activer le mode dense
   ═══════════════════════════════════════════════════════════════ */
body.density-compact .card-body{padding:8px;}
body.density-compact .form-row{margin-bottom:6px;}
body.density-compact table.erp th,
body.density-compact table.erp td{padding:6px 8px;font-size:12px;}
body.density-compact .kpi{padding:10px;}
body.density-compact .nav-item{padding:6px 10px;}

/* ═══════════════════════════════════════════════════════════════
   DESKTOP RESET (≥ 1025px) — Restitution stricte de l'affichage
   ordinateur d'avant le refactor responsive.
   Place tout en fin de fichier pour annuler les règles globales
   ajoutées plus haut qui pourraient impacter le rendu desktop.
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {
  /* ─── TOPBAR : retour au comportement original ─── */
  /* Comportement original : flex item de .main, non-sticky */
  .topbar {
    position: relative;
    top: auto;
    z-index: auto;
    padding-top: 0;
    height: 54px;
    padding: 0 22px;
  }
  /* Bordure conservée (inchangée) */

  /* ─── CONTENT : padding original sans max-width ─── */
  .content {
    padding: 20px 22px;
    padding-bottom: 20px;
    max-width: none;
    margin: 0;
  }

  /* ─── TYPOGRAPHIE FIXE EN DESKTOP ─── */
  /* On retire les clamp() fluides pour avoir les tailles d'origine */
  .topbar-title       { font-size: 16px; }
  .card-title         { font-size: 14px; }
  .kpi-value          { font-size: 30px; }
  .kpi-label          { font-size: 12px; }
  .modal-hdr-title    { font-size: 14px; }

  /* ─── MOBILE-ONLY ÉLÉMENTS : forcer cachés ─── */
  .sidebar-toggle,
  .sidebar-overlay,
  .bottom-nav,
  .page-fab,
  .ptr-indicator {
    display: none !important;
  }

  /* ─── SIDEBAR : largeur fixe, pas de rail mode ─── */
  .sidebar {
    width: 230px;
    transform: none;
    transition: background .3s;
    position: relative;
    box-shadow: none;
  }
  .sidebar:hover { width: 230px; box-shadow: none; z-index: auto; }
  .sidebar .logo { justify-content: flex-start; padding: 20px 18px; gap: 14px; }
  .sidebar .logo-name,
  .sidebar .logo-ver { display: block; }
  .sidebar .nav-group { visibility: visible; height: auto; }
  .sidebar .nav-item { justify-content: flex-start; padding: 8px 10px; overflow: visible; }
  .sidebar .nav-item > *:not(svg) { display: inline; }
  .sidebar .user-card { justify-content: flex-start; padding: 8px 10px; }
  .sidebar .user-card > div:not(.avatar) { display: block; }

  /* ─── KPI-GRID : retour 4 colonnes ─── */
  .kpi-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .grid-2   { grid-template-columns: 1fr 1fr; gap: 16px; }

  /* ─── CARDS : pas de container query sur desktop ─── */
  .card { container-type: normal; container-name: none; }

  /* ─── TABLEAUX : retour au layout normal (pas de card view) ─── */
  /* NB : on ne touche PAS au sticky des th — table.erp th a déjà
     position:sticky+top:0 ligne 190, suffisant pour le sticky thead.
     IMPORTANT : tbody doit être table-row-group (pas table !), sinon
     tbody devient un tableau séparé et ses colonnes ne s'alignent plus
     avec celles du thead → décalage visuel. */
  #page-interventions table.erp        { display: table; }
  #page-interventions table.erp thead  { display: table-header-group; }
  #page-interventions table.erp tbody  { display: table-row-group; }
  #page-interventions table.erp tr     { display: table-row; padding: 0; margin: 0; background: transparent; border: none; border-radius: 0; }
  #page-interventions table.erp td     { display: table-cell; text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); }
  #page-interventions table.erp td::before { content: none; }
  #page-interventions .table-wrap { max-height: none; }

  /* ─── CHATBOT FAB : bas-droite, comportement original ─── */
  .cb-fab {
    bottom: 22px;
    right: 22px;
    left: auto;
    width: 56px;
    height: 56px;
  }
  .cb-fab svg { width: 26px; height: 26px; }

  /* ─── APP HEIGHT : 100vh (le @supports dvh ne casse pas le desktop) ─── */
  .app { display: flex; }
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR COLLAPSE — Bouton de réduction (desktop ≥ 1025px)
   Toggle la classe .collapsed sur .sidebar pour passer en rail icônes.
   ═══════════════════════════════════════════════════════════════ */

/* Bouton lui-même : icône + label "Réduire" */
.sidebar-collapse-btn {
  display: none;  /* caché par défaut, montré en desktop uniquement */
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px;
  margin-bottom: 6px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text2);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.sidebar-collapse-btn:hover {
  background: var(--bg3);
  color: var(--text);
  border-color: var(--accent);
}
.sidebar-collapse-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform .25s ease;
}
.sidebar-collapse-lbl { white-space: nowrap; }

/* Visible uniquement en desktop */
@media (min-width: 1025px) {
  .sidebar-collapse-btn { display: inline-flex; }

  /* ─── État collapsed : taille adaptative selon écran ─── */
  /* Base (desktop standard 1025-1439px) : confortable mais sans scroll */
  .sidebar.collapsed {
    width: 64px;
    transition: width .22s ease;
  }
  .sidebar:not(.collapsed) {
    transition: width .22s ease;
  }
  /* Nav container : AUCUN scroll en mode collapsed (décision UI : tout doit tenir).
     overflow:hidden empêche aussi l'apparition de pastilles parasites en bord d'écran. */
  .sidebar.collapsed .nav {
    padding: 6px 4px;
    overflow: hidden;
  }
  /* Logo : compact mais reste visible */
  .sidebar.collapsed .logo {
    justify-content: center;
    padding: 10px 6px;
    gap: 0;
    font-size: 0;
  }
  /* Cache le div wrapper qui contient logo-name */
  .sidebar.collapsed .logo > div { display: none; }
  .sidebar.collapsed .logo-name,
  .sidebar.collapsed .logo-ver { display: none; }
  .sidebar.collapsed .logo-img { width: 36px; height: 36px; padding: 2px; }
  /* Titres de groupe : entièrement supprimés (gain ~30px) */
  .sidebar.collapsed .nav-group { display: none; }
  /* En mode rail (icônes), les libellés de groupe disparaissent : on ne peut
     donc plus déplier. On IGNORE le repli par groupe et on ré-affiche toutes
     les icônes (specificité 0,3,0 > .nav-item.ng-hidden 0,2,0). Un module
     interdit RBAC reste caché (son display:none est INLINE, donc prioritaire). */
  .sidebar.collapsed .nav-item.ng-hidden { display: flex; }
  /* Nav items : confortable avec un léger espacement vertical */
  .sidebar.collapsed .nav-item {
    justify-content: center;
    padding: 8px 4px;
    margin-bottom: 3px;      /* ← léger espace entre les icônes (ergonomie) */
    white-space: nowrap;
    position: relative;
    font-size: 0;
    line-height: 0;
    gap: 0;
    overflow: visible;
    border-radius: 8px;
  }
  .sidebar.collapsed .nav-item:hover { transform: none; }
  .sidebar.collapsed .nav-item > svg {
    width: 20px;
    height: 20px;
    margin: 0;
    display: block;
  }
  /* Cache aussi les éventuels span/div libellés enfants */
  .sidebar.collapsed .nav-item > *:not(svg):not(.nav-badge) { display: none; }
  /* Badge sur icône en mode collapsed : pastille ronde en haut-droite */
  .sidebar.collapsed .nav-badge {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 2px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 10px;
    line-height: 1;
    margin: 0;
    border-radius: 9px;
    border: 2px solid var(--bg2);
    box-sizing: content-box;
    font-family: 'DM Mono', monospace;
    font-weight: 700;
    z-index: 1;
  }
  .sidebar.collapsed .nav-badge.hidden,
  .sidebar.collapsed .nav-badge[data-count="0"],
  .sidebar.collapsed .nav-badge:empty {
    display: none !important;
  }
  /* User card : juste l'avatar, compact */
  .sidebar.collapsed .user-card {
    justify-content: center;
    padding: 4px;
    gap: 0;
    font-size: 0;
  }
  .sidebar.collapsed .user-card > div:not(.avatar) { display: none; }
  .sidebar.collapsed .user-card .avatar { font-size: 11px; width: 30px; height: 30px; }
  .sidebar.collapsed .sidebar-bottom { padding: 6px 4px; }
  /* Bouton collapse : icône seule, pivotée à 180° */
  .sidebar.collapsed .sidebar-collapse-btn {
    justify-content: center;
    padding: 8px;
  }
  .sidebar.collapsed .sidebar-collapse-lbl { display: none; }
  .sidebar.collapsed .sidebar-collapse-icon { transform: rotate(180deg); }

  /* ═══ TOOLTIPS de navigation (visibles en mode collapsed uniquement) ═══
     Affiche le libellé du module à droite de l'icône au survol.
     Le label est injecté dans data-tooltip="..." par JS (_setupSidebarTooltips). */
  .sidebar.collapsed .nav-item[data-tooltip]::after,
  .sidebar.collapsed .sidebar-collapse-btn[data-tooltip]::after,
  .sidebar.collapsed .user-card[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--bg4);
    color: var(--text);
    font-size: 12.5px;
    font-weight: 500;
    font-family: inherit;
    line-height: 1.3;
    padding: 7px 12px;
    border-radius: 6px;
    border: 1px solid var(--border2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-50%) translateX(-6px);
    transition: opacity .15s ease, transform .15s ease;
    z-index: 200;
    /* Optionnel : limiter la largeur pour les tooltips longs */
    max-width: 280px;
  }
  /* Petite flèche pointant vers l'icône (côté gauche du tooltip) */
  .sidebar.collapsed .nav-item[data-tooltip]::before,
  .sidebar.collapsed .sidebar-collapse-btn[data-tooltip]::before,
  .sidebar.collapsed .user-card[data-tooltip]::before {
    content: "";
    position: absolute;
    left: calc(100% + 4px);
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 6px 6px 0;
    border-color: transparent var(--bg4) transparent transparent;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease;
    z-index: 201;
  }
  /* Apparition au hover */
  .sidebar.collapsed .nav-item[data-tooltip]:hover::after,
  .sidebar.collapsed .sidebar-collapse-btn[data-tooltip]:hover::after,
  .sidebar.collapsed .user-card[data-tooltip]:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
  .sidebar.collapsed .nav-item[data-tooltip]:hover::before,
  .sidebar.collapsed .sidebar-collapse-btn[data-tooltip]:hover::before,
  .sidebar.collapsed .user-card[data-tooltip]:hover::before {
    opacity: 1;
  }
}

/* ═══ GRAND ÉCRAN (≥ 1440px) — icônes plus grandes, plus d'espace ═══ */
@media (min-width: 1440px) {
  .sidebar.collapsed { width: 70px; }
  .sidebar.collapsed .logo { padding: 12px 6px; }
  .sidebar.collapsed .logo-img { width: 40px; height: 40px; }
  .sidebar.collapsed .nav-item {
    padding: 10px 4px;
    margin-bottom: 4px;
  }
  .sidebar.collapsed .nav-item > svg { width: 22px; height: 22px; }
  .sidebar.collapsed .user-card .avatar { width: 34px; height: 34px; font-size: 13px; }
  .sidebar.collapsed .nav-badge { min-width: 19px; height: 19px; font-size: 10.5px; }
}

/* ═══ ÉCRANS COMPACTS (laptops courts) — desktop ≥1025px ET hauteur ≤800px ═══ */
@media (min-width: 1025px) and (max-height: 800px) {
  .sidebar.collapsed { width: 58px; }
  .sidebar.collapsed .logo { padding: 6px 4px; }
  .sidebar.collapsed .logo-img { width: 30px; height: 30px; }
  .sidebar.collapsed .nav { padding: 3px 3px; }
  .sidebar.collapsed .nav-item {
    padding: 5px 4px;
    margin-bottom: 1px;
    border-radius: 6px;
  }
  .sidebar.collapsed .nav-item > svg { width: 18px; height: 18px; }
  .sidebar.collapsed .user-card { padding: 3px; }
  .sidebar.collapsed .user-card .avatar { width: 28px; height: 28px; font-size: 11px; }
  .sidebar.collapsed .sidebar-collapse-btn { padding: 5px; margin-bottom: 3px; }
  .sidebar.collapsed .sidebar-collapse-icon { width: 16px; height: 16px; }
  .sidebar.collapsed .sidebar-bottom { padding: 4px; }
  .sidebar.collapsed .nav-badge { min-width: 16px; height: 16px; font-size: 9px; padding: 0 4px; }
}

/* ═══════════════════════════════════════════════════════════════
   OPTIMISATION MOBILE TÉLÉPHONE
   Améliorations dédiées aux écrans ≤ 768px (téléphone portrait/paysage).
   Toutes les règles ici sont en fin de fichier pour avoir la priorité
   maximale sur les règles génériques définies plus haut.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. ANTI-ZOOM iOS ──────────────────────────────────────────
   iOS zoome automatiquement sur tout input avec font-size < 16px.
   On force 16px sur mobile pour supprimer ce comportement intrusif
   qui désaligne tout l'écran à chaque saisie.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .form-input,
  .form-select,
  .form-textarea,
  .chat-input,
  .search-box input {
    font-size: 16px !important;
  }
  /* Inputs inline (non-class) dans les toolbars */
  #int-search-text,
  #int-ai-search,
  #iq-search,
  #cc-search,
  #cli-search,
  #st-search {
    font-size: 16px !important;
  }
}

/* ── 2. TOPBAR — Titre tronqué, pas de débordement ─────────────
   Sans overflow:hidden sur le wrap, un titre long pousse la
   search-box et l'avatar hors écran.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .topbar-title-wrap {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
  }
  .topbar-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1 1 0;
  }
  /* La search-box n'a plus besoin du margin-left:auto
     puisque le wrap prend déjà tout l'espace restant */
  .topbar .search-box {
    margin-left: 0;
    flex-shrink: 0;
  }
}

/* ── 3. FILTRES DANS LES PAGE-TOP-BLOCK ────────────────────────
   Les sélects de filtre ont des largeurs fixes en inline-style
   (ex: width:145px). Sur téléphone ils débordent ou restent trop
   petits. On les rend flexibles pour remplir la largeur disponible
   en grille 2 colonnes.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Tous les contrôles de filtre dans un page-top-block */
  .page-top-block .form-select,
  .page-top-block input.form-input[type="date"],
  .page-top-block input[type="date"].form-input {
    flex: 1 1 calc(50% - 6px) !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 40px !important;
    padding: 6px 10px !important;
    font-size: 14px !important;  /* lisible sans zoomer */
  }
  /* Les champs texte / recherche : pleine largeur */
  .page-top-block input.form-input[type="text"],
  .page-top-block input.form-input[type="search"],
  .page-top-block input.form-input:not([type="date"]) {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 40px !important;
  }
  /* Bouton reset filtre : taille fixe, ne s'étire pas */
  .page-top-block .btn.btn-sm[onclick*="reset"],
  .page-top-block .btn.btn-sm[onclick*="Reset"] {
    flex: 0 0 auto !important;
    white-space: nowrap;
  }
}

/* ── 4. CIBLES DE TAP ≥ 44px (Apple HIG / WCAG 2.5.5) ─────────
   Les boutons et contrôles interactifs doivent avoir une zone
   de tap d'au moins 44 × 44px pour être confortables au doigt.
   ─────────────────────────────────────────────────────────────── */
@media (pointer: coarse) {
  .btn         { min-height: 42px; }
  .btn-sm      { min-height: 38px; }
  .vs-btn      { min-height: 36px; }
  .r-btn       { min-height: 38px; }
  .lv-tab      { min-height: 38px; padding: 8px 16px; }
  .planning-tab { min-height: 38px; }
  .form-select { min-height: 42px; }
  .form-input  { min-height: 42px; }
  .nav-item    { min-height: 44px; }
  /* Suppression du tap highlight natif bleu/gris du navigateur */
  .btn, .nav-item, .bn-item, .kpi, .card,
  .contrat-card, .cg-card, .ug-card,
  .topbar-avatar, .sidebar-toggle,
  .sc-btn, .vs-btn, .lv-tab, .planning-tab {
    -webkit-tap-highlight-color: transparent;
  }
}

/* ── 5. SCROLL NATIF IOS (momentum scrolling) ──────────────────
   Activer le défilement inertiel fluide sur les conteneurs
   scrollables (utile surtout sur iOS < 13 et certains Android).
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .content,
  .table-wrap,
  .modal-body,
  .nav,
  .planning-scroll-area,
  .cb-messages {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
}

/* ── 6. BOTTOM NAV — Feedback tactile amélioré ─────────────────
   Animation d'enfoncement rapide pour confirmer l'appui.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .bn-item {
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.1s ease, color 0.15s;
  }
  .bn-item:active {
    transform: scale(0.86);
  }
  /* Le bouton FAB central suit le même retour */
  .bn-item.bn-fab:active {
    transform: scale(0.88);
  }
  /* Label visible seulement sur l'item actif (économie de place) */
  .bn-item:not(.active):not(.bn-fab) span {
    opacity: 0.75;
  }
}

/* ── 7. CARTES — Retour tactile sur press ──────────────────────
   Remplace l'effet hover (inutile sur touch) par un retour visuel
   au moment de l'appui.
   ─────────────────────────────────────────────────────────────── */
@media (pointer: coarse) {
  .contrat-card:active,
  .cg-card:active,
  .ug-card:active,
  .decision-card:active,
  .kpi:active,
  .sc-btn:active,
  .alert-strip:active {
    transform: scale(0.985) !important;
    transition: transform 0.08s ease !important;
    box-shadow: none !important;
  }
  /* Annule les effets hover sur coarse (ils ne s'appliquent pas mais
     certains navigateurs les déclenchent sur le premier tap) */
  .kpi:hover       { transform: none; box-shadow: none; }
  .cg-card:hover   { transform: none; box-shadow: none; }
  .ug-card:hover   { transform: none; box-shadow: none; }
  .contrat-card:hover { transform: none; }
  .sc-btn:hover    { transform: none; box-shadow: none; }
  .btn:hover       { transform: none; box-shadow: none; }
  .nav-item:hover  { transform: none; }
}

/* ── 8. VIEW SWITCHER — Compact sur petits écrans ───────────────
   Les boutons "📋 Tableau / ▦ Kanban / ≡ Détails" sont trop larges
   sur un téléphone 360px. On réduit le padding et la taille.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .view-switcher .vs-btn {
    padding: 5px 8px;
    font-size: 11px;
    gap: 3px;
  }
  /* View switcher dans les toolbars des page-top-block */
  .page-top-block .view-switcher {
    flex-shrink: 0;
  }
}

/* ── 9. MODALS — Footer boutons empilés sur mobile ──────────────
   Sur téléphone, les boutons du footer s'empilent verticalement
   (action principale en haut, secondaire en bas) pour être plus
   facilement atteignables avec le pouce.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .modal-footer {
    flex-direction: column-reverse;
    padding: 12px 14px calc(12px + var(--safe-bottom));
  }
  .modal-footer .btn {
    width: 100% !important;
    justify-content: center;
    min-height: 46px;
    text-align: center;
  }
}

/* ── 10. KPI STRIP DANS LES PAGE-TOP-BLOCK ─────────────────────
   Les strips de 4-5 KPIs en grille passent en 2-3 colonnes
   sur les petits écrans.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* Strip 5 colonnes → 3 colonnes (interventions) */
  #int-kpis {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 5px !important;
  }
  /* Strip 4 colonnes → 2 colonnes (rapports) */
  #rapport-kpi-strip {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }
}
@media (max-width: 360px) {
  /* Très petits téléphones (≤360px) : 2 colonnes pour tout */
  #int-kpis {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── 11. SIDEBAR MOBILE — Défilement si trop d'items ───────────
   Si la liste de nav est longue, la sidebar doit pouvoir défiler
   sans bloquer l'interface.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sidebar {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── 12. SEARCH-BOX ÉTENDUE — Ne dépasse pas l'écran ───────────
   Quand l'utilisateur clique sur la loupe, la search-box s'étend.
   On la limite pour ne pas pousser l'avatar hors de la topbar.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .search-box:focus-within {
    width: min(210px, calc(100vw - 150px)) !important;
  }
}

/* ── 13. PLANNING FILTRES MOBILE ────────────────────────────────
   Les filtres de vue du planning doivent s'adapter en flex-wrap.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .planning-filters-row .form-select {
    flex: 1 1 130px;
    height: 38px;
    font-size: 14px;
  }
  .planning-filters-row input[type="date"] {
    flex: 1 1 130px;
    height: 38px;
    font-size: 16px; /* anti-zoom iOS */
  }
}


/* ── 15. TABLES SUPPLÉMENTAIRES — Compactes sur mobile ──────────
   Les tables secondaires (contrats, users, liaisons) reçoivent
   une taille de police légèrement réduite pour afficher plus de
   colonnes sans scroll horizontal excessif.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  table.erp-contrats,
  table.erp-users,
  table.erp-liaisons {
    font-size: 12px;
  }
  table.erp-contrats td,
  table.erp-contrats th,
  table.erp-users td,
  table.erp-users th,
  table.erp-liaisons td,
  table.erp-liaisons th {
    padding: 7px 8px;
  }
}

/* ── 16. TOAST — Position au-dessus de la bottom-nav ────────────
   Le toast container est déjà repositionné, on renforce son
   positionnement et s'assure qu'il n'est pas coupé par la notch.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .toast-container {
    bottom: calc(88px + var(--safe-bottom)) !important;
    max-width: calc(100vw - 24px);
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }
}

/* ── 17. TYPOGRAPHIE FLUIDE MOBILE ─────────────────────────────
   Réduction légère des titres de section sur très petit écran
   pour libérer de l'espace vertical.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 390px) {
  .card-title        { font-size: 12.5px; }
  .kpi-label         { font-size: 10px; }
  .kpi-value         { font-size: 20px; }
  .badge             { font-size: 11px; padding: 2px 7px; }
  .nav-group         { font-size: 9px; }
  .content           { padding: 6px; }
}

/* ── 19. PWA BANNER — Toujours visible au-dessus de la nav ──────
   Déjà géré partiellement ; on s'assure que le banner ne soit
   jamais caché derrière la bottom-nav sur tous les appareils.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .pwa-banner {
    bottom: calc(76px + var(--safe-bottom)) !important;
    left: 10px !important;
    right: 10px !important;
  }
}

/* ── 20. ORIENTATION PAYSAGE COURTE ─────────────────────────────
   Quand le téléphone est en paysage avec peu de hauteur (≤500px),
   on compacte encore plus l'interface.
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .bottom-nav   { padding: 3px 4px; }
  .bn-item      { min-height: 40px; padding: 4px 4px; }
  .bn-item span { display: none !important; }  /* icônes seules */
  .content      { padding: 6px; }
  .page-top-block { padding: 6px 10px; }
  .kpi-grid     { grid-template-columns: repeat(4, 1fr) !important; gap: 6px; }
}

/* ── 21. ÉCRAN DE CONNEXION (gate d'authentification) ────────────
   Overlay plein écran affiché tant que l'utilisateur n'est pas connecté.
   ─────────────────────────────────────────────────────────────── */
.login-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(237,103,7,0.12), transparent 60%),
    var(--bg);
}
body.login-active { overflow: hidden; }

.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 26px 26px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.login-brand { text-align: center; margin-bottom: 22px; }
.login-logo  { max-height: 48px; margin-bottom: 12px; }
.login-title { font-size: 20px; font-weight: 700; color: var(--text); }
.login-sub   { font-size: 12.5px; color: var(--text2); margin-top: 4px; }

.login-form { display: flex; flex-direction: column; }
.login-form .form-label { margin-bottom: 6px; }
.login-btn  { width: 100%; margin-top: 18px; justify-content: center; }

.login-error {
  margin-top: 12px;
  padding: 9px 12px;
  border-radius: 8px;
  background: rgba(220,53,69,0.12);
  border: 1px solid rgba(220,53,69,0.35);
  color: #ff6b78;
  font-size: 12.5px;
}
.login-fl-note {
  font-size: 12.5px;
  color: var(--text2);
  margin-bottom: 14px;
  line-height: 1.45;
}
.login-checking {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 18px 0 8px;
  color: var(--text2);
  font-size: 13px;
}
.login-spinner {
  width: 28px; height: 28px;
  border: 3px solid var(--border);
  border-top-color: var(--accent, #ed6707);
  border-radius: 50%;
  animation: login-spin 0.8s linear infinite;
}
@keyframes login-spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════
   ANALYSE — Tableau de bord maintenance · refonte « Papier & Signal »
   ───────────────────────────────────────────────────────────
   HERO de synthèse (verdict + répartition + 4 chiffres d'action)
   + barre d'onglets (Synthèse / Priorités / Sous-traitants /
   Sites / Coûts). Cartes unifiées sur les tokens de l'app ;
   l'orange = ACTION uniquement (onglet actif, boutons, liens).
   Fonctionne en thème clair ET sombre.
   ═══════════════════════════════════════════════════════════ */

/* ── Barre d'outils figée (titre + filtres) ── */
.adash-toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.adash-title{display:flex;flex-direction:column;gap:2px;}
.adash-title-main{font-size:17px;font-weight:750;color:var(--text);letter-spacing:-.2px;}
.adash-title-sub{font-size:11.5px;color:var(--text3);}
.adash-title-sub strong{color:var(--text2);font-family:'DM Mono',monospace;}
.adash-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.adash-filters .form-select{height:34px;font-size:12px;min-width:150px;width:auto;}
.adash-filters .form-input{height:34px;font-size:12px;}
@media (max-width:680px){.adash-filters .form-select{min-width:120px;}}

/* ── Conteneur scrollable (le parent .page fournit la hauteur bornée) ── */
#adash-tab-content{flex:1;min-height:0;display:flex;flex-direction:column;}
.adash-scroll{flex:1;overflow-y:auto;min-height:0;padding:6px 0 34px;}
.adash-scroll .table-wrap{overflow-y:visible;}
.adash-empty{text-align:center;padding:40px 20px;color:var(--text3);font-size:13px;}
.adash-section-title{font-size:11.5px;font-weight:750;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin:26px 0 13px;}
.adash-hint{font-size:12px;color:var(--text3);background:var(--bg3);border:1px solid var(--border);border-radius:9px;padding:11px 13px;margin-top:14px;line-height:1.6;}
.adash-hint strong,.adash-hint b{color:var(--text2);}

/* ── HERO ── */
.adash-hero{display:grid;grid-template-columns:1.45fr 1fr;gap:16px;margin-bottom:6px;}
@media (max-width:920px){.adash-hero{grid-template-columns:1fr;}}
.adash-health{background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:20px 22px;display:flex;flex-direction:column;gap:15px;}
.adash-health-head{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.adash-eyebrow{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text3);}
.adash-hbadge{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;padding:5px 12px;border-radius:999px;}
.adash-hbadge .dot{width:8px;height:8px;border-radius:50%;background:currentColor;}
.adash-hbadge.v-bon{color:var(--green);background:var(--green-bg);}
.adash-hbadge.v-warn{color:var(--yellow);background:var(--yellow-bg);}
.adash-hbadge.v-crit{color:var(--red);background:var(--red-bg);}
.adash-hverdict{font-size:15px;line-height:1.55;color:var(--text2);}
.adash-hverdict b{color:var(--text);font-weight:750;}
.adash-dist{display:flex;height:12px;border-radius:999px;overflow:hidden;background:var(--bg4);gap:2px;}
.adash-dist>span{display:block;min-width:3px;transition:flex .5s ease;}
.adash-dist-leg{display:flex;flex-wrap:wrap;gap:9px 20px;margin-top:13px;}
.adash-dl{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text3);}
.adash-dl-sw{width:10px;height:10px;border-radius:3px;}
.adash-dl b{color:var(--text);font-weight:700;font-family:'DM Mono',monospace;}
.adash-dl-pc{color:var(--text3);font-family:'DM Mono',monospace;}
.adash-hkpis{background:var(--bg2);border:1px solid var(--border);border-top:3px solid var(--accent);border-radius:14px;padding:20px 22px;display:grid;grid-template-columns:1fr 1fr;gap:20px 24px;align-content:center;}
.adash-hkpi-l{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text3);}
.adash-hkpi-v{font-size:34px;font-weight:700;line-height:1.03;margin-top:6px;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;letter-spacing:-.5px;}
.adash-hkpi-v.ink{color:var(--text);}
.adash-hkpi-v.red{color:var(--red);}
.adash-hkpi-v.orange{color:var(--orange);}
.adash-hkpi-v.warn{color:var(--yellow);}
.adash-hkpi-v.good{color:var(--green);}
.adash-hkpi-v.neutral{color:var(--text2);}
.adash-hkpi-s{font-size:11.5px;color:var(--text3);margin-top:4px;}

/* ── Onglets (soulignage accent, collés en haut au scroll) ── */
.adash-tabs{position:sticky;top:0;z-index:6;display:flex;gap:3px;background:var(--bg);border-bottom:1px solid var(--border);margin:20px 0;overflow-x:auto;}
.adash-tab{border:none;background:transparent;color:var(--text3);font-family:inherit;font-size:13.5px;font-weight:600;padding:11px 17px;cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px;display:inline-flex;align-items:center;gap:8px;transition:color .12s;}
.adash-tab:hover{color:var(--text);}
.adash-tab.active{color:var(--text);border-bottom-color:var(--accent);font-weight:750;}
.adash-tab-chip{font-size:11px;font-weight:800;font-family:'DM Mono',monospace;padding:1px 8px;border-radius:999px;background:var(--red-bg);color:var(--red);}

/* ── Panneau actif ── */
.adash-panel{animation:adashFade .22s ease;}
@keyframes adashFade{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.adash-panel{animation:none;}}
.adash-panel > .adash-section-title:first-child{margin-top:2px;}

/* ── Synthèse : 2 donuts côte à côte ── */
.adash-compare{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:6px;}
.adash-compare-card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:18px 20px;}
.adash-compare-head{margin-bottom:12px;}
.adash-compare-title{font-size:14.5px;font-weight:700;color:var(--text);}
.adash-compare-sub{font-size:12px;color:var(--text3);margin-top:2px;}
.adash-summary-grid{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
.adash-donut{flex:0 0 auto;}
.adash-legend{flex:1;display:flex;flex-direction:column;gap:9px;min-width:180px;}
.adash-legend-row{display:flex;align-items:center;gap:10px;font-size:12.5px;}
.adash-legend-sw{width:11px;height:11px;border-radius:3px;flex:0 0 auto;}
.adash-legend-l{color:var(--text2);flex:1;}
.adash-legend-v{font-family:'DM Mono',monospace;font-weight:700;color:var(--text);min-width:34px;text-align:right;}
.adash-legend-p{font-size:11.5px;color:var(--text3);min-width:42px;text-align:right;font-family:'DM Mono',monospace;}
@media (max-width:760px){.adash-compare{grid-template-columns:1fr;}}

/* ── Synthèse : indicateurs clés (« l'essentiel ») ── */
.adash-insights{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;}
.adash-insight{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:15px 16px;transition:transform .14s,border-color .14s;}
.adash-insight[onclick]{cursor:pointer;}
.adash-insight[onclick]:hover{transform:translateY(-2px);border-color:var(--border2);}
.adash-insight-top{display:flex;align-items:center;gap:6px;margin-bottom:5px;}
.adash-insight-ico{font-size:13px;}
.adash-insight-lbl{font-size:10.5px;color:var(--text3);font-weight:700;text-transform:uppercase;letter-spacing:.04em;line-height:1.2;}
.adash-insight-val{font-size:25px;font-weight:700;line-height:1.05;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}
.adash-insight-sub{font-size:11px;color:var(--text3);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ── Cartes de stats (échéancier / criticité / finances) ── */
.adash-statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;}
.adash-stat{background:var(--bg2);border:1px solid var(--border);border-left:3px solid var(--text3);border-radius:12px;padding:15px 16px;}
.adash-stat .l{font-size:10.5px;color:var(--text3);text-transform:uppercase;letter-spacing:.04em;font-weight:700;line-height:1.25;}
.adash-stat .v{font-size:28px;font-weight:700;line-height:1.1;margin-top:5px;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;letter-spacing:-.5px;}
.adash-stat .s{font-size:11px;color:var(--text3);margin-top:2px;}

/* ── Mini-barre (score ST / composition site) ── */
.adash-minibar{height:8px;border-radius:5px;background:var(--bg4);overflow:hidden;display:flex;gap:1px;}
.adash-minibar > div{height:100%;}

/* ── Scorecards sous-traitants ── */
.adash-scorecards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;}
.adash-scorecard{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:16px 18px;cursor:pointer;transition:transform .14s,border-color .14s;}
.adash-scorecard:hover{transform:translateY(-2px);border-color:var(--border2);}
.adash-sc-head{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.adash-sc-name{font-size:14px;font-weight:750;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.adash-sc-score{font-size:16px;font-weight:800;border:2px solid;border-radius:9px;padding:3px 10px;flex:0 0 auto;font-variant-numeric:tabular-nums;}
.adash-sc-score small{font-size:10px;opacity:.7;font-weight:600;}
.adash-sc-sub{font-size:11.5px;color:var(--text3);margin:5px 0 14px;}
.adash-sc-metric{margin-bottom:10px;}
.adash-sc-metric-head{display:flex;justify-content:space-between;font-size:11.5px;color:var(--text2);margin-bottom:5px;}
.adash-sc-foot{font-size:11.5px;color:var(--text3);margin-top:10px;padding-top:9px;border-top:1px solid var(--border);}

/* ── Lignes de classement (priorités / sites / rentabilité) ── */
.adash-rank{display:flex;align-items:center;gap:13px;background:var(--bg2);border:1px solid var(--border);border-radius:11px;padding:13px 15px;margin-bottom:9px;cursor:pointer;transition:transform .14s,border-color .14s;}
.adash-rank:hover{transform:translateX(3px);border-color:var(--border2);}
.adash-rank-pos{flex:0 0 auto;width:32px;height:32px;border-radius:9px;background:var(--bg4);color:var(--text2);font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;}
.adash-rank-body{flex:1;min-width:0;}
.adash-rank-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.adash-rank-name{font-size:14px;font-weight:700;color:var(--text);}
.adash-rank-val{font-size:13px;font-weight:800;font-family:'DM Mono',monospace;flex:0 0 auto;margin-left:auto;}
.adash-rank-sub{font-size:11.5px;color:var(--text3);margin-top:5px;}

/* ── Badges (statut / criticité / retard) — couleurs posées en inline par le JS ── */
.adash-badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:10.5px;font-weight:700;white-space:nowrap;}
.adash-crit{display:inline-block;padding:2px 9px;border-radius:6px;font-size:10px;font-weight:750;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;}
.adash-retard{display:inline-block;padding:2px 9px;border-radius:6px;font-size:11.5px;font-weight:700;font-family:'DM Mono',monospace;white-space:nowrap;}
.adash-retard.late{color:var(--red);background:var(--red-bg);}
.adash-retard.ok{color:var(--green);background:var(--green-bg);}
.adash-retard.soon{color:var(--text2);background:var(--bg4);}