/* ============================================================
   CARA · Socle (sidebar + layout) — charte graphique
   Restyle les classes existantes sans toucher au HTML ni à la logique.
   Jour ET nuit. Variables issues de la charte CARA.
   ============================================================ */
:root{
  --cara-p:#0E4D5C; --cara-pp:#08323D; --cara-an:#1B2326; --cara-ar:#5E6D72;
  --cara-br:#D5E3E6; --cara-po:#F3F7F7; --cara-veille:#1FA971; --cara-ambre:#E0A120; --cara-alerte:#D1343F;
}

/* ---------- SIDEBAR (jour) : pétrole profond uniforme ---------- */
.side{
  background:#0C3D49 !important;   /* pétrole profond doux (entre petrole et petrole-profond) */
  color:rgba(255,255,255,.72) !important;
  border-right:0 !important;
  width:248px !important;
}
.main{ margin-left:248px !important; }
.brand{ padding:26px 20px 22px !important; }
.brand-logo{ width:96px; height:auto; display:block; }
.nav{ padding:2px 0 !important; }
.nav a{
  color:rgba(255,255,255,.72) !important;
  border-radius:0 !important;
  border-left:0 !important;
  padding:13px 20px !important; margin:0 !important;
  font-family:'Archivo',system-ui,sans-serif !important; font-size:14.5px !important;
  font-weight:400 !important; letter-spacing:.005em;
  position:relative;
}
.nav a.on{ font-weight:400 !important; }
.nav a svg{ opacity:.7; stroke-width:1.5 !important; }
.nav a:hover{ background:rgba(255,255,255,.04) !important; color:#fff !important; }
.nav a:hover svg{ opacity:.95; }
/* onglet actif : surbrillance douce pleine largeur + fin filet clair, comme la maquette */
.nav a.on{
  background:rgba(255,255,255,.07) !important; color:#fff !important;
}
.nav a.on svg{ opacity:1; }
.nav a.on::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:#fff;
}
.nav a svg{ opacity:.82; }
.navsec{
  font-family:'Jost',system-ui,sans-serif !important;
  color:rgba(255,255,255,.45) !important;
  font-weight:500 !important; letter-spacing:.2em !important;
  font-size:10.5px !important; padding:16px 16px 7px !important;
}
/* badge compteur (alertes) : rond rouge propre, façon charte */
.nav a .navbadge{
  margin-left:auto;
  min-width:20px; height:20px; padding:0 6px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--cara-alerte); color:#fff;
  font-family:'Jost',system-ui,sans-serif; font-size:11px; font-weight:500; line-height:1;
  border-radius:999px;
}

/* bloc utilisateur */
.suser{ border-top:1px solid rgba(255,255,255,.1) !important; }
.suser b{ color:#fff !important; font-family:'Archivo',system-ui,sans-serif; }
.suser .uav{ background:rgba(255,255,255,.12) !important; color:#fff !important; }
.suser .mut2{ color:rgba(255,255,255,.55) !important; }
.suser .out{ color:rgba(255,255,255,.55) !important; }
.suser .out:hover{ color:#fff !important; }

/* bouton thème dans la sidebar pétrole */
.theme-btn{ color:rgba(255,255,255,.72) !important; }
.theme-btn:hover{ background:rgba(255,255,255,.05) !important; color:#fff !important; }

/* marqueur de version */
.app-version{
  font-family:'Jost',system-ui,sans-serif; font-size:10.5px; letter-spacing:.14em;
  color:rgba(255,255,255,.34); text-align:center; padding:8px 0 14px; text-transform:uppercase;
}

/* barre supérieure mobile (topbar) reprend le pétrole */
.topbar{ background:var(--cara-pp) !important; }
.topbar .bname{ font-family:'Jost',system-ui,sans-serif; letter-spacing:.24em; text-transform:uppercase; }
.topbar .bmark{ display:none !important; }
.burger{ color:#fff !important; }

/* fond de page porcelaine (jour) */
html:not([data-theme="dark"]) .main{ background:var(--cara-po); }

/* ---------- NUIT : PÉTROLE TRÈS SOMBRE ET CONTRASTÉ ----------
   Fond quasi noir teinté pétrole, surfaces nettement plus claires (contraste fort),
   textes francs, accent vert veille et pétrole clair qui claquent. */
html[data-theme="dark"]{
  --cara-night-bg:#0A2A32;        /* fond de page : pétrole sombre */
  --cara-night-side:#08262E;      /* sidebar : à peine plus foncée que le fond -> harmonie */
  --cara-night-surface:#0F343E;   /* cartes : un cran plus clair -> ressortent en douceur */
  --cara-night-surface2:#134049;
  --cara-night-line:#23545F;      /* filets visibles mais pas durs */
  --cara-night-text:#EAF4F4;      /* texte principal */
  --cara-night-text2:#9DB6BC;     /* texte secondaire */
}
html[data-theme="dark"] body{ background:var(--cara-night-bg) !important; }
html[data-theme="dark"] .side{
  background:var(--cara-night-side) !important;
  border-right:1px solid rgba(255,255,255,.05) !important;
}
html[data-theme="dark"] .main{ background:var(--cara-night-bg) !important; color:var(--cara-night-text); }
html[data-theme="dark"] .nav a{ color:rgba(234,244,244,.70) !important; }
html[data-theme="dark"] .nav a:hover{ background:rgba(255,255,255,.05) !important; color:#fff !important; }
html[data-theme="dark"] .nav a.on{ background:rgba(255,255,255,.08) !important; color:#fff !important; }
html[data-theme="dark"] .nav a.on::before{ background:#fff !important; }
html[data-theme="dark"] .navsec{ color:rgba(234,244,244,.42) !important; }
html[data-theme="dark"] .app-version{ color:rgba(234,244,244,.32) !important; }
html[data-theme="dark"] .suser b{ color:#fff !important; }
html[data-theme="dark"] .suser .uav{ background:rgba(255,255,255,.12) !important; color:#fff !important; }

/* surfaces de contenu : contraste net avec le fond */
html[data-theme="dark"] .card,
html[data-theme="dark"] .met,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .notice{
  background:var(--cara-night-surface) !important;
  border:1px solid var(--cara-night-line) !important;
  color:var(--cara-night-text) !important;
  box-shadow:0 1px 0 rgba(0,0,0,.25);
}
html[data-theme="dark"] .htitle,
html[data-theme="dark"] h1, html[data-theme="dark"] h2{ color:var(--cara-night-text) !important; }
html[data-theme="dark"] .hsub,
html[data-theme="dark"] .mut2,
html[data-theme="dark"] .mlab{ color:var(--cara-night-text2) !important; }
/* les chiffres clés en blanc porcelaine (sobre, sans vert) */
html[data-theme="dark"] .mval,
html[data-theme="dark"] .kpi b,
html[data-theme="dark"] .hval{ color:#F2F8F8 !important; }
/* champs de saisie lisibles */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
  background:#08202880 !important; border-color:var(--cara-night-line) !important; color:var(--cara-night-text) !important;
}

/* ---------- POLICES DE LA CHARTE (jour + nuit) ----------
   Archivo pour le corps, Jost pour les titres et les chiffres.
   On applique largement pour écraser les 'Helvetica Neue' et 'inherit' existants. */
body, .app, .main, .side, .nav, .nav a, .card, .met, .panel,
p, span, div, td, th, label, input, select, textarea, button, a{
  font-family:'Archivo',system-ui,-apple-system,sans-serif;
}
.mono, .fb-ref, .doc-ref, .token{ font-family:'IBM Plex Mono','SF Mono',Menlo,Consolas,monospace !important; }
/* Titres en Jost (léger) */
.htitle, h1, h2, .ctitle, .cli-modal-name, .sav-modal-title,
.hval, .mval, .kpi b, .sante-num, .met .mval, .modal-title{
  font-family:'Jost',system-ui,sans-serif !important;
}
.htitle{ font-weight:300 !important; letter-spacing:.005em; }
.mval, .kpi b, .hval{ font-weight:300 !important; }

/* ---------- Graphiques Site internet (charte CARA) ---------- */
.wchart-title{ font-family:'Jost',system-ui,sans-serif; font-size:12.5px; font-weight:500;
  letter-spacing:.06em; text-transform:uppercase; color:#5E6D72; margin-bottom:10px; }
.wchart-grid{ stroke:#E7EEF0; stroke-width:1; }
.wchart-axis{ font-family:'Archivo',sans-serif; font-size:10px; fill:#9DB1B6; }
html[data-theme="dark"] .wchart-title{ color:#9DB6BC; }
html[data-theme="dark"] .wchart-grid{ stroke:#1C3A42; }
html[data-theme="dark"] .wchart-axis{ fill:#7E969C; }
/* la courbe et les barres passent en pétrole clair lisible sur fond sombre */
html[data-theme="dark"] .wchart polyline{ stroke:#3BA7B8 !important; }
html[data-theme="dark"] .wchart circle{ stroke:#3BA7B8 !important; fill:#0F343E !important; }

/* barres d'heures d'affluence aux couleurs CARA */
.hours-bar{ background:linear-gradient(180deg,#14707F,#0E4D5C) !important; border-radius:3px 3px 0 0; }
html[data-theme="dark"] .hours-bar{ background:linear-gradient(180deg,#3BA7B8,#14707F) !important; }

/* ---------- Site internet : onglets de période + sections (charte CARA) ---------- */
.period-opt.on{ background:#0E4D5C !important; border-color:#0E4D5C !important; color:#fff !important; }
html[data-theme="dark"] .period-opt.on{ background:#14707F !important; border-color:#14707F !important; }
.wsec > summary{ font-family:'Jost',system-ui,sans-serif !important; font-weight:500 !important;
  letter-spacing:.01em; }
.wsec > summary::before{ color:#14707F !important; }
html[data-theme="dark"] .wsec{ background:#0F343E !important; border-color:#1C3A42 !important; }
html[data-theme="dark"] .wsec > summary{ color:#EAF4F4 !important; }

/* boutons monter/descendre des sections : hover pétrole CARA */
.wsec-move button:hover{ background:#0E4D5C !important; border-color:#0E4D5C !important; color:#fff !important; }

/* ---------- Conteneur des graphiques Chart.js ---------- */
.cara-chart-box{ position:relative; width:100%; height:260px; }
.cara-chart-box canvas{ max-width:100%; }
.cara-donut-wrap{ display:flex; justify-content:center; padding:8px 0; }

/* ============ CRM · board Kanban à la charte CARA ============ */
.kb{ gap:14px !important; }
.kb-col{ background:#EAF1F2 !important; border:0 !important; border-radius:14px !important; padding:10px !important; }
.kb-col.over{ border:0 !important; background:#DCF0EC !important; box-shadow:0 0 0 2px #9BD9C9 inset !important; }
.kb-head{ padding:6px 8px 12px !important; }
.kb-head b{ font-family:'Jost',sans-serif !important; font-weight:600 !important; font-size:13.5px !important; color:#14242A; }
.kb-mrr{ font-size:11px !important; color:#8FA6AB !important; }
.kb-n{ font-family:'Jost',sans-serif !important; font-size:13px !important; font-weight:400 !important;
  color:#5E6D72 !important; background:#fff !important; border:0 !important; border-radius:999px !important;
  min-width:24px; text-align:center; padding:2px 9px !important; }
.kb-card{ background:#fff !important; border:1px solid #E7EEF0 !important; border-radius:12px !important;
  padding:13px !important; box-shadow:0 1px 2px rgba(14,36,42,.04); transition:box-shadow .15s, transform .1s; }
.kb-card:hover{ box-shadow:0 8px 22px rgba(14,36,42,.1) !important; transform:translateY(-1px); }
.kb-card.hot{ background:linear-gradient(180deg,#FFFCF8,#fff) !important; }
html[data-theme="dark"] .kb-card.hot{ background:#14323A !important; }
.kb-card.sel{ border-color:#0E7080 !important; box-shadow:0 0 0 2px rgba(14,112,127,.18) !important; }
.kb-card > b{ font-family:'Jost',sans-serif !important; font-size:14.5px !important; font-weight:500 !important; }
.kb-who{ font-size:12px !important; color:#5E6D72 !important; }
.kb-val{ font-family:'Jost',sans-serif !important; font-weight:400 !important; font-size:15px !important; color:#122A30; }
.kb-val small{ color:#8FA6AB !important; }
.kb-inst{ color:#5E6D72 !important; }
/* pastilles source en teintes douces */
.src{ font-size:10.5px !important; border-radius:6px !important; padding:3px 9px !important; font-weight:600; }
.src-site{ background:#E0F2FE !important; color:#0369A1 !important; }
.src-prospection{ background:#EEF2FF !important; color:#4338CA !important; }
.src-recommandation{ background:#DCFCE7 !important; color:#15803D !important; }
.src-salon{ background:#FEF3C7 !important; color:#B45309 !important; }
.src-autre{ background:#EEF3F4 !important; color:#5E6D72 !important; }
.kb-next .d{ background:#1FA971 !important; }
.kb-next.late{ color:#D1343F !important; }
.kb-next.late .d{ background:#D1343F !important; }
.kb-more{ color:#14707F !important; font-weight:500; }
/* mode nuit */
html[data-theme="dark"] .kb-col{ background:#0C2830 !important; }
html[data-theme="dark"] .kb-card{ background:#113640 !important; border-color:#1C3A42 !important; }
html[data-theme="dark"] .kb-n{ background:#0A2A32 !important; color:#9DB6BC !important; }

/* ============ Correctif modales : centrage avec sidebar + overlay ============ */
/* la sidebar fait 248px : on centre la modale dans la zone de contenu */
@media (min-width:981px){
  .modal{ left:calc(248px + (100vw - 248px)/2) !important; }
}
/* overlay bien visible en jour comme en nuit */
.drawer-bg{ background:rgba(8,38,46,.45) !important; backdrop-filter:blur(2px); }
html[data-theme="dark"] .drawer-bg{ background:rgba(0,0,0,.6) !important; }
/* modale : fond net, ombre charte */
.modal{ box-shadow:0 30px 90px rgba(8,38,46,.35) !important; }
html[data-theme="dark"] .modal{ background:#0F343E !important; }
html[data-theme="dark"] .cli-modal-head{ background:#0F343E !important; }

/* ============ Responsive ============ */
/* board CRM : scroll horizontal sur petit écran plutôt que colonnes écrasées */
@media (max-width:1100px){
  .kb{ grid-template-columns:repeat(5,minmax(240px,1fr)) !important; overflow-x:auto; padding-bottom:8px;
    scroll-snap-type:x proximity; }
  .kb-col{ scroll-snap-align:start; }
}
/* modale : plein écran sous 980px (cohérent avec le correctif de centrage) */
@media (max-width:980px){
  .modal{ left:0 !important; top:0 !important; transform:none !important;
    width:100vw !important; max-height:100vh !important; border-radius:0 !important; }
}
/* KPI : 2 colonnes puis 1 sur mobile */
@media (max-width:900px){ .grid{ gap:10px; } }

/* ============ CRM · panneau latéral de détail (étape 2) ============ */
/* quand une carte est sélectionnée, le board rétrécit et le panneau s'affiche à droite */
.kb-layout{ position:relative; }
/* overlay sombre derrière la fenêtre */
.crm-win-overlay{ position:fixed; inset:0; background:rgba(8,38,46,.45); backdrop-filter:blur(2px); z-index:199; }
/* la fenêtre : centrée, redimensionnable, déplaçable */
.kb-detail-panel{
  position:fixed; top:9vh; left:50%; transform:translateX(-50%); z-index:200;
  width:1000px; max-width:96vw; height:82vh; max-height:94vh; min-width:360px; min-height:300px;
  background:#F6FAFA; border:1px solid #D5E3E6; border-radius:16px;
  box-shadow:0 40px 100px rgba(8,38,46,.4); display:flex; flex-direction:column; overflow:hidden;
}
/* poignées de redimensionnement sur les 4 bords + 4 coins */
.crm-rz{ position:absolute; z-index:5; }
.crm-rz-n{ top:-3px; left:10px; right:10px; height:7px; cursor:ns-resize; }
.crm-rz-s{ bottom:-3px; left:10px; right:10px; height:7px; cursor:ns-resize; }
.crm-rz-e{ right:-3px; top:10px; bottom:10px; width:7px; cursor:ew-resize; }
.crm-rz-w{ left:-3px; top:10px; bottom:10px; width:7px; cursor:ew-resize; }
.crm-rz-ne{ top:-4px; right:-4px; width:14px; height:14px; cursor:nesw-resize; }
.crm-rz-nw{ top:-4px; left:-4px; width:14px; height:14px; cursor:nwse-resize; }
.crm-rz-se{ bottom:-4px; right:-4px; width:14px; height:14px; cursor:nwse-resize; }
.crm-rz-sw{ bottom:-4px; left:-4px; width:14px; height:14px; cursor:nesw-resize; }
.kb-detail-panel.full .crm-rz{ display:none; }
.kb-detail-panel.narrow{ width:460px !important; }
/* le plein écran doit l'emporter sur la taille/position mémorisées (styles posés en ligne par le redimensionnement) */
.kb-detail-panel.full{ top:0 !important; left:0 !important; right:auto !important; bottom:auto !important; transform:none !important; width:100vw !important; max-width:100vw !important; height:100vh !important; max-height:100vh !important; border-radius:0 !important; }
/* barre de titre facon fenêtre */
.crm-win-bar{ display:flex; align-items:center; gap:12px; padding:11px 15px; background:#fff;
  border-bottom:1px solid #E7EEF0; cursor:move; flex-shrink:0; }
.crm-win-dots{ display:flex; gap:7px; align-items:center; }
.cwd{ width:12px; height:12px; border-radius:50%; cursor:pointer; display:block; text-decoration:none; }
.cwd-close{ background:#FF5F57; } .cwd-min{ background:#FEBC2E; } .cwd-max{ background:#28C840; }
.crm-win-title{ font-size:13px; color:#44595F; display:flex; align-items:center; gap:9px; font-weight:500;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.cwt-badge{ font-size:10px; font-weight:700; padding:2px 8px; border-radius:5px; text-transform:uppercase; letter-spacing:.03em; }
.cwt-siege{ background:#EEF2FF; color:#4338CA; } .cwt-sites{ background:#E0F2FE; color:#0369A1; } .cwt-independant{ background:#F0FDF4; color:#15803D; }
.crm-win-tools{ margin-left:auto; display:flex; gap:6px; align-items:center; }
.crm-win-tools button, .crm-win-tools a{ width:30px; height:28px; border:1px solid #E2E8EA; background:#fff;
  border-radius:7px; cursor:pointer; color:#5E6D72; font-size:13px; display:flex; align-items:center; justify-content:center; text-decoration:none; }
.crm-win-tools button:hover, .crm-win-tools a:hover{ background:#F1F5F6; }
.kb-card.sel{ transform:none !important; }
.kb-card.sel:hover{ transform:none !important; }
/* le corps scrolle, la barre reste fixe */
.kb-detail-panel .kb-detail{ flex:1; overflow-y:auto; padding:20px 24px; }
html[data-theme="dark"] .crm-win-bar{ background:#0C2830; border-color:#1C3A42; }
html[data-theme="dark"] .crm-win-title{ color:#9DB6BC; }
html[data-theme="dark"] .crm-win-tools button, html[data-theme="dark"] .crm-win-tools a{ background:#113640; border-color:#1C3A42; color:#9DB6BC; }
@keyframes panelIn{ from{ transform:translateX(30px); opacity:0 } to{ transform:none; opacity:1 } }
.kb-detail-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:20px 22px 16px; border-bottom:1px solid #EEF3F4;
  background:linear-gradient(180deg,#F8FBFB,#fff);
}
.kb-detail-co{ font-family:'Jost',sans-serif; font-weight:500; font-size:19px; color:#122A30; }
.kb-detail-sub{ font-size:12.5px; color:#5E6D72; margin-top:3px; }
.kb-detail-close{ width:30px; height:30px; border-radius:8px; background:#F1F5F6; color:#5E6D72;
  display:flex; align-items:center; justify-content:center; text-decoration:none; font-size:14px; flex-shrink:0; }
.kb-detail-close:hover{ background:#E2E8EA; }
.kb-detail-panel .kb-detail{
  flex:1; overflow-y:auto; padding:18px 22px; margin:0; border:0; font-size:13.5px;
}
/* le panneau pousse au-dessus de tout sans casser le drag du board */
.kb-detail-panel .kb-contact-card{ margin-bottom:12px; }
/* nuit */
html[data-theme="dark"] .kb-detail-panel{ background:#0F343E; border-left-color:#1C3A42; }
html[data-theme="dark"] .kb-detail-head{ background:#0C2830; border-color:#1C3A42; }
html[data-theme="dark"] .kb-detail-co{ color:#EAF4F4; }
html[data-theme="dark"] .kb-detail-close{ background:#1C2530; color:#9DB6BC; }
/* responsive : panneau plein écran sous 980px */
@media (max-width:980px){
  .kb-layout.has-panel{ padding-right:0; }
  .kb-detail-panel{ width:100vw; }
}

/* ============ CRM · cartes enrichies (types) ============ */
.kb-card .kc-top{ display:flex; align-items:center; gap:7px; margin-bottom:7px; }
.kc-type{ font-size:9.5px; font-weight:700; padding:2px 8px; border-radius:5px; letter-spacing:.03em; text-transform:uppercase; }
.kc-siege{ background:#EEF2FF; color:#4338CA; }
.kc-sites{ background:#E0F2FE; color:#0369A1; }   /* type "site rattaché" */
.kc-independant{ background:#F0FDF4; color:#15803D; }
.kc-hot{ margin-left:auto; font-size:12px; }
.kb-card .kb-sec{ font-size:11.5px; color:#5E6D72; margin-top:2px; }
.kb-card .kb-sites{ font-size:11px; color:#5E6D72; background:#F1F5F6; border-radius:5px; padding:2px 8px; }
html[data-theme="dark"] .kc-siege{ background:#1E2550; color:#A5B4FC; }
html[data-theme="dark"] .kc-sites{ background:#0C2A3E; color:#7DD3FC; }
html[data-theme="dark"] .kc-independant{ background:#14321F; color:#86EFAC; }
html[data-theme="dark"] .kb-card .kb-sites{ background:#0A2A32; color:#9DB6BC; }

/* ============ CRM · fiche opportunité 2 colonnes (maquette) ============ */
.kb-detail{ background:#F6FAFA; }
html[data-theme="dark"] .kb-detail{ background:#0A2A32; }
/* barre d'étapes cliquables */
.cf-stages{ display:flex; background:#fff; border:1px solid #E7EEF0; border-radius:12px; padding:5px; gap:3px; margin-bottom:14px; }
.cf-stg-f{ flex:1; margin:0; display:flex; }
.cf-stg{ flex:1; width:100%; text-align:center; padding:10px 6px; border-radius:9px; font-size:12.5px; font-weight:600; color:#5E6D72; cursor:pointer; background:none; border:0; font-family:'Archivo',sans-serif; }
.cf-stg:hover{ background:#F1F5F6; }
.cf-stg.done{ color:#0E7080; }
.cf-stg.on{ background:#0E4D5C; color:#fff; }
html[data-theme="dark"] .cf-stages{ background:#113640; border-color:#1C3A42; }
html[data-theme="dark"] .cf-stg.on{ background:#14707F; }
/* bandeau actions */
.cf-head-actions{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.cf-meta{ font-size:12px; color:#8FA6AB; }
.cf-win{ border-color:#86EFAC !important; color:#15803D !important; background:#F0FDF4 !important; }
/* grille */
.cf-grid{ display:grid; grid-template-columns:1fr 320px; gap:14px; align-items:start; }
.cf-card, .cf-sc, .cf-na{ background:#fff; border:1px solid #E7EEF0; border-radius:14px; padding:17px 19px; margin-bottom:14px; }
.cf-card h3{ font-family:'Jost',sans-serif; font-weight:500; font-size:14.5px; margin-bottom:14px; display:flex; align-items:center; justify-content:space-between; color:#122A30; }
.cf-edit{ font-size:12px; color:#14707F; font-weight:500; cursor:pointer; background:none; border:0; }
html[data-theme="dark"] .cf-card, html[data-theme="dark"] .cf-sc, html[data-theme="dark"] .cf-na{ background:#113640; border-color:#1C3A42; }
html[data-theme="dark"] .cf-card h3{ color:#EAF4F4; }
/* totaux */
.cf-tot{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px; }
.cf-tot .m{ background:#F6F9FA; border-radius:10px; padding:12px 14px; }
.cf-tot .ml{ font-size:11.5px; color:#5E6D72; }
.cf-tot .mv{ font-family:'Jost',sans-serif; font-size:20px; margin-top:3px; color:#122A30; }
.cf-tot .mv small{ font-size:12px; color:#8FA6AB; }
html[data-theme="dark"] .cf-tot .m{ background:#0A2A32; }
html[data-theme="dark"] .cf-tot .mv{ color:#EAF4F4; }
/* tableau sites */
.cf-sites{ width:100%; border-collapse:collapse; font-size:13px; }
.cf-sites th{ text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:#8FA6AB; font-weight:600; padding:7px 9px; border-bottom:1px solid #EEF3F4; }
.cf-sites td{ padding:10px 9px; border-bottom:1px solid #F4F8F8; }
.cf-sites tr:last-child td{ border-bottom:0; }
.cf-sb{ font-size:10px; font-weight:600; padding:2px 7px; border-radius:5px; background:#E0F2FE; color:#0369A1; }
.cf-x{ background:none; border:0; color:#C7CFD2; cursor:pointer; font-size:12px; }
.cf-x:hover{ color:#D1343F; }
html[data-theme="dark"] .cf-sites th, html[data-theme="dark"] .cf-sites td{ border-color:#1C3A42; }
/* formulaire ajout site */
.cf-addsite{ margin-top:10px; }
.cf-site-form{ display:grid; gap:7px; margin-top:8px; }
.cf-site-nums{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.cf-dim-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:10px; }
.cf-dim-grid label{ font-size:11.5px; color:#5E6D72; display:block; margin-bottom:4px; }
/* infos kv */
.cf-kv{ display:grid; grid-template-columns:130px 1fr; font-size:13.5px; }
.cf-kv dt{ color:#5E6D72; padding:9px 0; border-bottom:1px solid #F4F8F8; }
.cf-kv dd{ padding:9px 0; font-weight:500; border-bottom:1px solid #F4F8F8; }
html[data-theme="dark"] .cf-kv dt, html[data-theme="dark"] .cf-kv dd{ border-color:#1C3A42; }
/* colonne droite */
.cf-na{ background:#FFF8E9; border-color:#F3D9A4; }
.cf-na .l{ font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:#B45309; margin-bottom:5px; }
.cf-na .a{ font-weight:600; font-size:14px; color:#14242A; }
.cf-na .d{ font-size:12px; color:#92722A; margin-top:3px; }
html[data-theme="dark"] .cf-na{ background:#2A2412; border-color:#5A4A1A; }
html[data-theme="dark"] .cf-na .a{ color:#FDE68A; }
.cf-sc h4{ font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:#8FA6AB; margin-bottom:12px; }
.cf-contact{ display:flex; align-items:center; gap:11px; padding:9px 0; border-bottom:1px solid #F4F8F8; }
.cf-contact:last-of-type{ border-bottom:0; }
.cf-cav{ width:36px; height:36px; border-radius:50%; background:#EAF1F2; color:#0E4D5C; font-family:'Jost',sans-serif; font-weight:500; font-size:12px; display:flex; align-items:center; justify-content:center; flex:none; }
.cf-cnm{ font-weight:600; font-size:13px; }
.cf-crl{ font-size:11.5px; color:#5E6D72; }
html[data-theme="dark"] .cf-contact{ border-color:#1C3A42; }
html[data-theme="dark"] .cf-cav{ background:#0A2A32; color:#5EC4D4; }
/* lien client */
.cf-link{ display:flex; align-items:center; gap:11px; background:#F0FDF4; border:1px solid #BBF7D0; border-radius:11px; padding:12px 14px; text-decoration:none; }
.cf-link .ic{ width:34px; height:34px; border-radius:8px; background:#DCFCE7; color:#15803D; display:flex; align-items:center; justify-content:center; flex:none; font-family:'Jost',sans-serif; font-weight:500; font-size:12px; }
.cf-link .t1{ font-size:13px; font-weight:600; color:#14242A; }
.cf-link .t2{ font-size:11.5px; color:#5E6D72; }
.cf-link .go{ margin-left:auto; color:#15803D; }
html[data-theme="dark"] .cf-link{ background:#14321F; border-color:#1C6A3F; }
html[data-theme="dark"] .cf-link .t1{ color:#EAF4F4; }
.cf-na-edit summary, .cf-addsite summary{ margin-top:6px; }
@media (max-width:860px){ .cf-grid{ grid-template-columns:1fr; } }

/* ============ CRM · en-tête riche de la fiche ============ */
.cf-topcard{ display:flex; align-items:flex-start; gap:16px; padding:4px 2px 16px; margin-bottom:14px; border-bottom:1px solid #E7EEF0; }
.cf-av{ width:52px; height:52px; border-radius:14px; background:linear-gradient(135deg,#0E4D5C,#3BA7B8); color:#fff; font-family:'Jost',sans-serif; font-weight:500; font-size:20px; display:flex; align-items:center; justify-content:center; flex:none; }
.cf-topmain{ flex:1; min-width:0; }
.cf-topname{ font-family:'Jost',sans-serif; font-weight:400; font-size:23px; color:#122A30; line-height:1.1; }
.cf-topbadges{ display:flex; align-items:center; gap:8px; margin-top:8px; flex-wrap:wrap; }
.cf-tbadge{ font-size:11.5px; font-weight:700; padding:4px 11px; border-radius:999px; display:inline-flex; align-items:center; gap:6px; text-transform:uppercase; letter-spacing:.02em; }
.cf-tb-siege{ background:#EEF2FF; color:#4338CA; } .cf-tb-sites{ background:#E0F2FE; color:#0369A1; } .cf-tb-independant{ background:#F0FDF4; color:#15803D; }
.cf-tsites{ font-size:12px; color:#5E6D72; }
.cf-thot{ font-size:11.5px; color:#C62F3A; font-weight:600; }
.cf-topsub{ font-size:12.5px; color:#8FA6AB; margin-top:9px; }
html[data-theme="dark"] .cf-topcard{ border-color:#1C3A42; }
html[data-theme="dark"] .cf-topname{ color:#EAF4F4; }
html[data-theme="dark"] .cf-tb-siege{ background:#1E2550; color:#A5B4FC; } html[data-theme="dark"] .cf-tb-sites{ background:#0C2A3E; color:#7DD3FC; } html[data-theme="dark"] .cf-tb-independant{ background:#14321F; color:#86EFAC; }

/* ============ CRM · cartes pipeline peaufinées ============ */
.kb-card{ border-radius:13px !important; padding:14px !important; box-shadow:0 1px 3px rgba(14,36,42,.05) !important;
  transition:box-shadow .16s, transform .12s, border-color .16s !important; }
.kb-card:hover{ box-shadow:0 10px 26px rgba(14,36,42,.12) !important; transform:translateY(-2px) !important; border-color:#CBDDE0 !important; }
.kb-card > b{ font-size:15px !important; color:#122A30; letter-spacing:-.01em; }
.kb-card .kb-sec{ margin-top:3px !important; }
.kb-card .kb-row{ margin-top:11px !important; padding-top:11px !important; border-top:1px solid #F1F5F6; }
html[data-theme="dark"] .kb-card .kb-row{ border-color:#1C3A42; }
.kb-card .kb-val{ font-size:15px !important; }
/* la pastille prochaine action plus douce */
.kb-next{ margin-top:10px !important; font-size:12px !important; }

/* ============ Bouton de repli de la barre latérale ============ */
.brand{ position:relative; display:flex; align-items:center; justify-content:space-between; }
.brand-logo-icon{ display:none; font-family:'Jost',sans-serif; font-weight:500; font-size:26px; color:#fff; letter-spacing:.05em; }
.side-toggle{ background:rgba(255,255,255,.08); border:0; color:rgba(255,255,255,.7); cursor:pointer;
  width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  transition:background .15s, transform .2s; flex-shrink:0; }
.side-toggle:hover{ background:rgba(255,255,255,.16); color:#fff; }
/* état replié */
.side.collapsed{ width:72px !important; }
.side.collapsed + .main, .main.side-collapsed{ margin-left:72px !important; }
.side.collapsed .brand-logo-full{ display:none; }
.side.collapsed .brand-logo-icon{ display:block; margin:0 auto; }
.side.collapsed .brand{ justify-content:center; flex-direction:column; gap:10px; }
.side.collapsed .side-toggle svg{ transform:rotate(180deg); }
.side.collapsed .nav a{ justify-content:center; padding:13px 0 !important; }
.side.collapsed .nav a span{ display:none; }          /* masque le libellé */
.side.collapsed .nav a .navbadge{ position:absolute; top:6px; right:14px; }
.side.collapsed .navsec{ text-align:center; font-size:0 !important; padding:14px 0 6px !important; }
.side.collapsed .navsec::after{ content:"•••"; font-size:11px; color:rgba(255,255,255,.3); }
.side.collapsed .suser{ padding:12px 6px !important; justify-content:center; }
.side.collapsed .suser > div, .side.collapsed .suser .mut2, .side.collapsed .suser .out{ display:none; }
.side.collapsed .app-version{ font-size:0 !important; }
.side.collapsed .theme-btn span{ display:none; }
.side.collapsed .theme-btn{ justify-content:center; }
/* transition douce */
.side{ transition:width .2s ease; }
.main{ transition:margin-left .2s ease; }
/* sur mobile le repli ne s'applique pas (menu burger déjà géré) */
@media (max-width:980px){ .side.collapsed{ width:auto !important; } .side.collapsed + .main{ margin-left:0 !important; } }

/* ============ Fiche client refaite ============ */
/* en-tête riche */
.clih{ display:flex; align-items:flex-start; gap:16px; padding:22px 24px; background:linear-gradient(180deg,#F8FBFB,#fff); border-bottom:1px solid #EEF3F4; }
.clih-av{ width:56px; height:56px; border-radius:15px; background:linear-gradient(135deg,#15803D,#22C55E); color:#fff; font-family:'Jost',sans-serif; font-weight:500; font-size:22px; display:flex; align-items:center; justify-content:center; flex:none; }
.clih-main{ flex:1; min-width:0; }
.clih-top{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.clih-name{ font-family:'Jost',sans-serif; font-weight:400; font-size:24px; color:#122A30; }
.clih-num{ font-size:12px; font-weight:600; color:#475569; background:#F1F5F9; border:1px solid #E2E8EA; border-radius:6px; padding:2px 9px; }
.clih-badge{ font-size:11px; font-weight:700; padding:3px 10px; border-radius:999px; text-transform:uppercase; letter-spacing:.03em; }
.clih-ok{ background:#DCFCE7; color:#15803D; } .clih-prospect{ background:#FEF3C7; color:#B45309; }
.clih-sub{ font-size:13px; color:#5E6D72; margin-top:6px; }
.clih-x{ width:34px; height:34px; border-radius:9px; background:#F1F5F6; color:#5E6D72; display:flex; align-items:center; justify-content:center; text-decoration:none; flex:none; }
.clih-x:hover{ background:#E2E8EA; }
html[data-theme="dark"] .clih{ background:#0C2830; border-color:#1C3A42; }
html[data-theme="dark"] .clih-name{ color:#EAF4F4; }
html[data-theme="dark"] .clih-x{ background:#1C2530; color:#9DB6BC; }
/* vue d'ensemble 2 colonnes */
.cliov{ display:grid; grid-template-columns:1fr 300px; gap:20px; align-items:start; }
.cliov-sum{ background:#0E4D5C; border-radius:14px; padding:18px 20px; color:#fff; margin-bottom:14px; }
.cliov-sum .sl{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; opacity:.7; margin-bottom:5px; }
.cliov-sum .sv{ font-family:'Jost',sans-serif; font-size:28px; font-weight:300; }
.cliov-sum .sv small{ font-size:14px; opacity:.7; }
.cliov-sum .row{ display:flex; justify-content:space-between; padding:8px 0; border-top:1px solid rgba(255,255,255,.12); font-size:13px; margin-top:8px; }
.cliov-sc{ background:#F8FBFB; border:1px solid #EEF3F4; border-radius:14px; padding:16px 18px; margin-bottom:14px; }
.cliov-sc h4{ font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:#8FA6AB; margin-bottom:12px; }
html[data-theme="dark"] .cliov-sc{ background:#0F343E; border-color:#1C3A42; }
@media (max-width:820px){ .cliov{ grid-template-columns:1fr; } }

/* ============ Fiches client & site : onglets et éléments à la charte ============ */
/* onglets : pétrole au lieu de rouge */
.cli-tab{ font-family:'Archivo',sans-serif !important; font-size:14px !important; color:#5E6D72 !important;
  padding:13px 16px !important; border-radius:0 !important; }
.cli-tab:hover{ color:#122A30 !important; background:transparent !important; }
.cli-tab.on{ color:#0E4D5C !important; border-bottom:2px solid #0E4D5C !important; background:transparent !important; }
.cli-tabs{ border-bottom:1px solid #EEF3F4; padding:0 22px !important; gap:2px !important; }
html[data-theme="dark"] .cli-tab.on{ color:#5EC4D4 !important; border-bottom-color:#5EC4D4 !important; }
html[data-theme="dark"] .cli-tab{ color:#9DB6BC !important; }
/* KPI : plus doux, charte */
.cli-kpi{ background:#F8FBFB !important; border:1px solid #EEF3F4; border-radius:11px !important; padding:13px 15px !important; }
.cli-kpi .klab{ font-size:11px; color:#8FA6AB; display:block; margin-bottom:4px; text-transform:uppercase; letter-spacing:.04em; }
.cli-kpi a{ color:#0E4D5C; }
html[data-theme="dark"] .cli-kpi{ background:#0F343E !important; border-color:#1C3A42; }
/* avatar site en pétrole clair */
.sitemodal .cli-modal-avatar{ background:#E0F2FE !important; color:#0369A1 !important; }
/* chevrons : pétrole */
.site-row:hover .sr-chev{ color:#14707F !important; }
.sr-chev{ color:#CBD5E1; }
/* liste des sites de la fiche client : plus aérée */
.cli-siteline{ border-radius:11px !important; transition:border-color .14s, background .14s; }
.cli-siteline:hover{ border-color:#14707F !important; background:#F8FBFB !important; }
/* nom de fiche en Jost */
.cli-modal-name{ font-family:'Jost',sans-serif !important; font-weight:400 !important; font-size:21px !important; }

/* ============ Fiche site : matériel (Jetson + caméras RTSP) ============ */
.mat-card{ background:#F8FBFB; border:1px solid #EEF3F4; border-radius:12px; padding:14px 16px; margin-bottom:10px; }
.mat-card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.mat-token{ margin-top:12px; padding-top:12px; border-top:1px dashed #D5E3E6; }
.mat-token-code{ display:block; background:#0E2A32; color:#5EE0C0; font-family:'SF Mono',Menlo,monospace;
  font-size:13px; padding:9px 12px; border-radius:8px; letter-spacing:.05em; word-break:break-all; }
html[data-theme="dark"] .mat-card{ background:#0F343E; border-color:#1C3A42; }
html[data-theme="dark"] .mat-token{ border-color:#1C3A42; }

/* ============ Page Finance & compta ============ */
.fin-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:18px 0 20px; }
.fin-kpi{ background:#fff; border:1px solid #D5E3E6; border-radius:14px; padding:17px 19px; }
.fin-kpi > span{ display:block; font-size:12.5px; color:#5E6D72; margin-bottom:9px; }
.fin-kpi > b{ display:block; font-family:'Jost',sans-serif; font-weight:300; font-size:30px; color:#122A30; line-height:1; }
.fin-kpi > b small{ font-size:14px; color:#8FA6AB; }
.fin-kpi .sub{ display:block; font-size:11.5px; color:#8FA6AB; margin-top:8px; }
.fin-kpi.accent{ border-top:3px solid #0E4D5C; }
.fin-kpi.accent > b{ color:#0E4D5C; }
.fin-kpi.warn{ border-top:3px solid #E0A120; }
html[data-theme="dark"] .fin-kpi{ background:#0F343E; border-color:#1C3A42; }
html[data-theme="dark"] .fin-kpi > b{ color:#EAF4F4; }
.fin-controls{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.fin-seg{ display:inline-flex; background:#EAF1F2; border-radius:10px; padding:3px; }
.fin-seg button{ border:0; background:none; font-family:'Archivo',sans-serif; font-size:13px; font-weight:600; color:#5E6D72; padding:7px 16px; border-radius:8px; cursor:pointer; }
.fin-seg button.on{ background:#fff; color:#0E4D5C; box-shadow:0 1px 3px rgba(14,36,42,.1); }
.fin-legend{ display:flex; gap:18px; font-size:12.5px; color:#5E6D72; }
.fin-legend i{ display:inline-block; width:14px; height:3px; border-radius:2px; vertical-align:middle; margin-right:6px; }
.fin-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.fin-chart-card{ padding:18px 20px; }
.fin-chart-card .ctitle{ font-family:'Jost',sans-serif; font-weight:500; font-size:14.5px; margin-bottom:14px; }
html[data-theme="dark"] .fin-seg{ background:#0C2830; }
html[data-theme="dark"] .fin-seg button.on{ background:#14707F; color:#fff; }
@media (max-width:1000px){ .fin-kpis{ grid-template-columns:repeat(2,1fr); } .fin-grid{ grid-template-columns:1fr; } }
@media (max-width:600px){ .fin-kpis{ grid-template-columns:1fr; } }

/* ============ CRM · barre de vue (collaborateur / secteur) ============ */
.crm-viewbar{ display:flex; align-items:center; gap:10px; background:#fff; border:1px solid #D5E3E6; border-radius:12px; padding:10px 14px; margin-bottom:16px; flex-wrap:wrap; }
.crm-view-lbl{ font-size:12px; font-weight:600; color:#8FA6AB; text-transform:uppercase; letter-spacing:.05em; }
.crm-view-seg{ display:inline-flex; background:#EAF1F2; border-radius:9px; padding:3px; }
.crm-view-seg button{ border:0; background:none; font-family:'Archivo',sans-serif; font-size:13px; font-weight:600; color:#5E6D72; padding:6px 14px; border-radius:7px; cursor:pointer; }
.crm-view-seg button.on{ background:#0E4D5C; color:#fff; }
.crm-view-sel{ font-family:'Archivo',sans-serif; font-size:13px; border:1px solid #E2E8EA; border-radius:8px; padding:7px 11px; background:#fff; color:#14242A; cursor:pointer; }
.crm-view-reset{ font-size:12.5px; color:#14707F; text-decoration:none; margin-left:auto; }
.crm-view-reset:hover{ text-decoration:underline; }
html[data-theme="dark"] .crm-viewbar{ background:#0F343E; border-color:#1C3A42; }
html[data-theme="dark"] .crm-view-seg{ background:#0C2830; }
html[data-theme="dark"] .crm-view-seg button.on{ background:#14707F; }
html[data-theme="dark"] .crm-view-sel{ background:#113640; border-color:#1C3A42; color:#EAF4F4; }
@media (max-width:700px){ .crm-viewbar{ gap:8px; } .crm-view-reset{ margin-left:0; } }

/* ============ Liste des clients · plus pro ============ */
.cli-org{ background:#fff; border:1px solid #E7EEF0; border-radius:14px; margin-bottom:12px; overflow:hidden;
  transition:box-shadow .15s, border-color .15s; }
.cli-org:hover{ box-shadow:0 8px 24px rgba(14,36,42,.08); border-color:#CBDDE0; }
.cli-head{ display:flex; align-items:center; gap:15px; padding:16px 20px; text-decoration:none; }
.cli-avatar{ width:46px; height:46px; border-radius:13px; background:linear-gradient(135deg,#0E4D5C,#3BA7B8); color:#fff;
  font-family:'Jost',sans-serif; font-weight:500; font-size:17px; display:flex; align-items:center; justify-content:center; flex:none; }
.cli-main{ flex:1; min-width:0; }
.cli-main b{ font-family:'Jost',sans-serif; font-weight:500; font-size:16.5px; color:#122A30; display:block; }
.cli-sub{ font-size:12.5px; color:#5E6D72; margin-top:2px; display:block; }
.cli-sub .mut2{ color:#9DB1B6; }
.cli-head .badge{ flex-shrink:0; }
.cli-head .sr-chev{ color:#CBD5E1; font-size:20px; flex:none; }
.cli-head:hover .sr-chev{ color:#14707F; }
/* puces de sites */
.cli-sites{ display:flex; flex-wrap:wrap; gap:8px; padding:0 20px 16px 81px; }
.cli-site{ display:inline-flex; align-items:center; gap:7px; background:#F6F9FA; border:1px solid #EEF3F4; border-radius:999px;
  padding:5px 13px; font-size:12.5px; color:#44595F; text-decoration:none; transition:border-color .14s; }
.cli-site:hover{ border-color:#14707F; }
.cli-site .sdot{ width:7px; height:7px; border-radius:50%; flex:none; }
/* badge "Client" / statut en vert doux */
.cli-head .b-grn{ background:#DCFCE7; color:#15803D; font-weight:600; }
html[data-theme="dark"] .cli-org{ background:#0F343E; border-color:#1C3A42; }
html[data-theme="dark"] .cli-main b{ color:#EAF4F4; }
html[data-theme="dark"] .cli-site{ background:#0A2A32; border-color:#1C3A42; color:#9DB6BC; }
/* KPI du haut (met) en Jost */
.cli-list-kpis .mval, .met .mval{ font-family:'Jost',sans-serif; }
@media (max-width:640px){ .cli-sites{ padding-left:20px; } .cli-head{ flex-wrap:wrap; } }

/* ============ Page Santé du parc · design D (jauges et tuiles) ============ */
.met .mval{ font-family:'Jost',sans-serif !important; font-weight:300; }
.sante-modal .mval{ font-family:'Jost',sans-serif !important; }
.sante-modal .mtitle, .sante-modal h3{ font-family:'Jost',sans-serif !important; font-weight:500 !important; }
.badge.b-grn{ background:#DCFCE7; color:#15803D; } .badge.b-amb{ background:#FEF3C7; color:#B45309; } .badge.b-red{ background:#FEE2E2; color:#B91C1C; }
/* barre segmentée : 1 segment = 1 site */
.sp-seg{ display:flex; gap:3px; height:8px; }
.sp-seg i{ flex:1; border-radius:3px; background:#8FD3B3; }
.sp-seg i.w{ background:#E0A120; } .sp-seg i.k{ background:#D1343F; }
/* jauges : neutres tant qu'aucun seuil n'est atteint */
.sp-g{ display:grid; grid-template-columns:44px 1fr 46px; align-items:center; gap:8px; font-size:12px; color:#5E6D72; margin-top:7px; }
.sp-gt{ height:6px; background:#EAF0F1; border-radius:3px; overflow:hidden; }
.sp-gt i{ display:block; height:100%; border-radius:3px; background:#14707F; }
.sp-gt i.w{ background:#E0A120; } .sp-gt i.k{ background:#D1343F; }
.sp-g b{ font-family:'Jost',sans-serif; font-weight:500; font-size:13px; color:#122A30; text-align:right; }
.sp-g b.w{ color:#B45309; } .sp-g b.k{ color:#B91C1C; }
.sp-g.off{ opacity:.45; }
/* pastilles de caméras */
.sp-pips{ display:inline-flex; gap:3px; vertical-align:middle; }
.sp-pips i{ width:6px; height:15px; border-radius:2px; background:#14707F; }
.sp-pips i.off{ background:#D1343F; }
.sp-chip{ font-size:10.5px; font-weight:700; padding:2px 9px; border-radius:999px; text-transform:uppercase; letter-spacing:.03em; white-space:nowrap; }
.sp-chip.ok{ background:#F0FDF4; color:#15803D; } .sp-chip.warn{ background:#FEF6E7; color:#B45309; } .sp-chip.ko{ background:#FEF2F2; color:#B91C1C; }
.sp-dot{ width:10px; height:10px; border-radius:50%; flex:none; display:inline-block; }
.sp-dot.ok{ background:#1FA971; } .sp-dot.warn{ background:#E0A120; } .sp-dot.ko{ background:#D1343F; }
/* bandeau du haut */
.sp-top{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:6px 0 18px; }
.sp-k{ background:#fff; border:1px solid #E7EEF0; border-radius:14px; padding:16px 20px; }
.sp-k small{ font-size:12px; color:#5E6D72; display:block; margin-bottom:8px; }
.sp-k b{ font-family:'Jost',sans-serif; font-weight:300; font-size:32px; line-height:1; display:block; margin-bottom:11px; color:#122A30; }
.sp-k b span{ font-size:16px; color:#8FA6AB; } .sp-k b.w{ color:#B45309; }
/* groupe */
.grp-card{ padding:0 !important; overflow:hidden; border-radius:16px !important; }
.grp-card.grp-warn{ border-color:#F3DFA9 !important; } .grp-card.grp-ko{ border-color:#F3C1C1 !important; }
.sp-sum{ cursor:pointer; list-style:none; display:block; }
.sp-sum::-webkit-details-marker{ display:none; }
.sp-gh{ display:flex; align-items:center; gap:12px; padding:16px 20px 12px; }
.sp-nm{ font-family:'Jost',sans-serif; font-weight:500; font-size:18px; flex:1; color:#122A30; }
.sp-cnt{ font-size:12.5px; color:#5E6D72; }
.sp-gseg{ padding:0 20px 14px; }
.sp-gm{ display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid #F1F5F6; background:#FAFCFC; }
.sp-gm > div{ padding:12px 20px; border-right:1px solid #F1F5F6; }
.sp-gm > div:last-child{ border-right:0; }
.sp-gm small{ font-size:11px; color:#8FA6AB; text-transform:uppercase; letter-spacing:.05em; display:block; margin-bottom:5px; }
.sp-gm .v{ font-family:'Jost',sans-serif; font-weight:400; font-size:22px; color:#122A30; }
.sp-gm .v span{ font-size:13px; color:#8FA6AB; }
.sp-gm .v.k{ color:#D1343F; } .sp-gm .v.w{ color:#B45309; }
.sp-gm .sp-gt{ height:5px; margin-top:7px; }
/* tuiles de sites */
.sp-tiles{ display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:12px; padding:16px 20px 20px; border-top:1px solid #F1F5F6; }
.sp-tile{ display:block; border:1px solid #E7EEF0; border-radius:13px; padding:14px 16px; background:#fff; text-decoration:none; color:inherit; transition:box-shadow .15s, transform .1s, border-color .15s; }
a.sp-tile:hover{ box-shadow:0 8px 20px rgba(14,36,42,.1); transform:translateY(-1px); border-color:#CBDDE0; }
.sp-tile.warn{ border-color:#F3DFA9; background:#FFFEFA; } .sp-tile.ko{ border-color:#F3C1C1; background:#FFFBFB; }
.sp-tile.sel{ box-shadow:0 0 0 2px rgba(14,112,127,.25); border-color:#14707F; }
.sp-t1{ display:flex; align-items:center; gap:9px; }
.sp-t1 b{ font-family:'Jost',sans-serif; font-weight:500; font-size:15px; flex:1; color:#122A30; }
.sp-sub{ font-weight:400; color:#8FA6AB; font-size:12px; }
.sp-t2{ display:flex; align-items:center; gap:9px; margin:9px 0 4px; font-size:12px; color:#5E6D72; }
.sp-ft{ display:flex; justify-content:space-between; gap:8px; margin-top:11px; padding-top:10px; border-top:1px solid #F1F5F6; font-size:11.5px; color:#8FA6AB; }
.sp-why{ font-size:12.5px; color:#B45309; margin-top:9px; }
/* nuit */
html[data-theme="dark"] .sp-k, html[data-theme="dark"] .sp-tile{ background:#113640; border-color:#1C3A42; }
html[data-theme="dark"] .sp-tile.warn{ background:#1E2A24; border-color:#5A4A1A; } html[data-theme="dark"] .sp-tile.ko{ background:#2A1A1D; border-color:#5A2A30; }
html[data-theme="dark"] .sp-nm, html[data-theme="dark"] .sp-t1 b, html[data-theme="dark"] .sp-k b, html[data-theme="dark"] .sp-gm .v, html[data-theme="dark"] .sp-g b{ color:#EAF4F4; }
html[data-theme="dark"] .sp-gm{ background:#0C2830; border-color:#1C3A42; } html[data-theme="dark"] .sp-gm > div, html[data-theme="dark"] .sp-tiles, html[data-theme="dark"] .sp-ft{ border-color:#1C3A42; }
html[data-theme="dark"] .sp-gt{ background:#0A2A32; }
@media (max-width:900px){ .sp-top{ grid-template-columns:1fr; } .sp-gm{ grid-template-columns:repeat(2,1fr); } .sp-gm > div{ border-bottom:1px solid #F1F5F6; } }
@media (max-width:640px){ .sp-tiles{ grid-template-columns:1fr; padding:12px; } .sp-gh{ flex-wrap:wrap; } }

/* ============ Mode TV · mur de supervision (jour, regroupé par client) ============ */
.tv-wall{ background:#F3F7F7 !important; color:#14242A !important; }
.tv-bar{ background:#fff !important; border-bottom:1px solid #E7EEF0 !important; }
.tv-title{ font-family:'Jost',sans-serif !important; font-weight:400 !important; letter-spacing:.08em; }
.tv-logo{ color:#0E4D5C !important; font-family:'Jost',sans-serif; font-weight:500; letter-spacing:.2em; }
.tv-clock{ font-family:'Jost',sans-serif !important; font-weight:300 !important; color:#0E4D5C !important; }
.tv-daynight{ border-color:#CBDDE0 !important; color:#5E6D72 !important; }
.tv-close{ background:#EAF1F2 !important; color:#14242A !important; }
/* le conteneur devient une pile de sections (une par client / groupement) */
.tv-grid{ display:block !important; padding:2vh 3vw !important; overflow-y:auto; }
.tv-grp{ margin-bottom:3.2vh; }
.tv-grp-head{ display:flex; align-items:center; gap:1.2vw; margin-bottom:1.3vh; }
.tv-grp-dot{ width:1.5vh; height:1.5vh; border-radius:50%; background:#1FA971; flex:none; }
.tv-grp-warn .tv-grp-dot{ background:#E0A120; }
.tv-grp-ko .tv-grp-dot{ background:#D1343F; }
.tv-grp-name{ font-family:'Jost',sans-serif; font-weight:500; font-size:2.9vh; color:#122A30; }
.tv-grp-count{ font-size:1.9vh; color:#5E6D72; }
.tv-grp-flag{ font-size:1.5vh; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:.4vh 1vh; border-radius:6px; background:#FEF6E7; color:#B45309; }
.tv-grp-ko .tv-grp-flag{ background:#FEF2F2; color:#B91C1C; }
.tv-grp-tiles{ display:grid; gap:1.4vh; grid-template-columns:repeat(auto-fill,minmax(min(260px,28vw),1fr)); }
/* tuiles : neutres quand tout va bien, la couleur n'apparaît que sur une anomalie */
.tv-tile{ background:#fff !important; border:1px solid #E2EAEC !important; border-left:5px solid #CFE3DA !important;
  border-radius:1.4vh !important; padding:2vh 1.6vw !important; min-height:14vh !important; animation:none !important; }
.tv-tile.warn{ background:#FFFCF5 !important; border-left-color:#E0A120 !important; }
.tv-tile.ko{ background:#FEF6F6 !important; border-left-color:#D1343F !important; }
.tv-tile-name{ font-family:'Jost',sans-serif !important; font-weight:500 !important; font-size:2.6vh !important; color:#122A30; }
.tv-tile-state{ font-size:1.8vh !important; font-weight:600 !important; color:#5E6D72 !important; }
.tv-tile.warn .tv-tile-state{ color:#B45309 !important; }
.tv-tile.ko .tv-tile-state{ color:#B91C1C !important; }
.tv-tile-metrics{ color:#5E6D72; font-size:1.7vh; }
.tv-metric{ background:#F1F5F6; border-radius:6px; padding:.3vh 1vh; }
/* bascule nuit du mur */
.tv-wall.tv-night{ background:#0A2A32 !important; }
.tv-wall.tv-night .tv-bar{ background:#08222A !important; border-bottom-color:#1C3A42 !important; }
.tv-wall.tv-night .tv-grp-name, .tv-wall.tv-night .tv-tile-name, .tv-wall.tv-night .tv-title{ color:#EAF4F4 !important; }
.tv-wall.tv-night .tv-tile{ background:#0F343E !important; border-color:#1C3A42 !important; }
.tv-wall.tv-night .tv-tile.warn{ border-left-color:#E0A120 !important; }
.tv-wall.tv-night .tv-tile.ko{ border-left-color:#D1343F !important; }
.tv-wall.tv-night .tv-metric{ background:#0A2A32; color:#9DB6BC; }
.cf-addr{ font-size:11.5px; color:#8FA6AB; margin:3px 0 0 38px; font-weight:400; }

/* CRM · liste de sites défilante (groupements de nombreux sites) */
.cf-sites-scroll{ max-height:380px; overflow-y:auto; border:1px solid #EEF3F4; border-radius:11px; }
.cf-sites-scroll .cf-sites th{ position:sticky; top:0; background:#F8FBFB; z-index:1; }
html[data-theme="dark"] .cf-sites-scroll{ border-color:#1C3A42; }
html[data-theme="dark"] .cf-sites-scroll .cf-sites th{ background:#0F343E; }

/* CRM · édition d'un site dans le tableau */
.cf-edit-row{ display:none; }
.cf-edit-row.open{ display:table-row; }
.cf-edit-row td{ background:#F8FBFB; padding:12px 14px; }
.cf-edit-row .cf-site-nums label{ font-size:11px; color:#8FA6AB; display:block; }
.cf-edit-row .cf-site-nums input{ margin-top:3px; }
.cf-edit-actions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:12px; }
.cf-act{ white-space:nowrap; text-align:right; }
.cf-ed{ color:#14707F !important; margin-right:4px; }
html[data-theme="dark"] .cf-edit-row td{ background:#0A2A32; }

/* CRM · barre de vue (boutons cliquables + secteurs multiples) */
.crm-viewbar{ flex-direction:column; align-items:stretch !important; gap:10px !important; }
.crm-vrow{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.crm-view-seg a{ border:0; background:none; font-family:'Archivo',sans-serif; font-size:13px; font-weight:600; color:#5E6D72;
  padding:6px 14px; border-radius:7px; cursor:pointer; text-decoration:none; display:inline-block; }
.crm-view-seg a:hover{ color:#0E4D5C; }
.crm-view-seg a.on{ background:#0E4D5C; color:#fff; }
html[data-theme="dark"] .crm-view-seg a{ color:#9DB6BC; } html[data-theme="dark"] .crm-view-seg a.on{ background:#14707F; color:#fff; }
.crm-chips{ display:flex; flex-wrap:wrap; gap:7px; }
.crm-chip{ font-size:12.5px; font-weight:600; padding:5px 13px; border-radius:999px; border:1px solid #D5E3E6; color:#44595F;
  text-decoration:none; background:#fff; transition:background .12s, border-color .12s; }
.crm-chip:hover{ border-color:#14707F; }
.crm-chip.on{ background:#0E4D5C; border-color:#0E4D5C; color:#fff; }
html[data-theme="dark"] .crm-chip{ background:#113640; border-color:#1C3A42; color:#9DB6BC; } html[data-theme="dark"] .crm-chip.on{ background:#14707F; border-color:#14707F; color:#fff; }

/* Fiche site : bloc contrat */
.site-contract{ background:#F8FBFB; border:1px solid #EEF3F4; border-radius:12px; padding:12px 14px; margin:4px 0 12px; }
.fgrid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
html[data-theme="dark"] .site-contract{ background:#0F343E; border-color:#1C3A42; }
@media (max-width:640px){ .fgrid3{ grid-template-columns:1fr; } }

/* Clients · prospects perdus (discret) */
.lost-box{ margin:26px 2px 8px; font-size:13px; color:#8FA6AB; }
.lost-box summary{ cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:8px; padding:6px 2px; }
.lost-box summary::-webkit-details-marker{ display:none; }
.lost-box summary::before{ content:"›"; transition:transform .15s; display:inline-block; }
.lost-box[open] summary::before{ transform:rotate(90deg); }
.lost-n{ background:#EEF3F4; color:#8FA6AB; border-radius:999px; padding:0 8px; font-size:11.5px; }
.lost-list{ margin-top:6px; border-top:1px solid #EEF3F4; }
.lost-row{ display:flex; align-items:center; gap:14px; padding:9px 2px; border-bottom:1px solid #F4F8F8; color:#5E6D72; }
.lost-row b{ font-weight:600; color:#44595F; min-width:150px; }
.lost-why{ flex:1; font-style:italic; }
.lost-date{ font-size:12px; color:#9DB1B6; }
.lost-btn{ background:none; border:1px solid #D5E3E6; border-radius:7px; padding:3px 10px; font-size:12px; color:#14707F; cursor:pointer; font-family:inherit; }
.lost-btn:hover{ background:#F1F5F6; }
html[data-theme="dark"] .lost-n{ background:#0A2A32; } html[data-theme="dark"] .lost-list, html[data-theme="dark"] .lost-row{ border-color:#1C3A42; }
html[data-theme="dark"] .lost-row b{ color:#9DB6BC; }
@media (max-width:640px){ .lost-row{ flex-wrap:wrap; gap:6px 12px; } .lost-row b{ min-width:100%; } }

/* Comptes · accès rapides */
.ql-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.ql{ position:relative; display:flex; flex-direction:column; gap:3px; padding:11px 13px; border:1px solid #E2EAEC; border-radius:11px; text-decoration:none; background:#F8FBFB; transition:border-color .14s, background .14s; }
.ql:hover{ border-color:#14707F; background:#fff; }
.ql-name{ font-family:'Jost',sans-serif; font-weight:500; font-size:14px; color:#122A30; }
.ql-desc{ font-size:11.5px; color:#8FA6AB; }
.ql-go{ position:absolute; top:9px; right:11px; color:#B8C8CC; font-size:12px; }
.ql:hover .ql-go{ color:#14707F; }
html[data-theme="dark"] .ql{ background:#0F343E; border-color:#1C3A42; } html[data-theme="dark"] .ql:hover{ background:#113640; }
html[data-theme="dark"] .ql-name{ color:#EAF4F4; }

/* Accueil · planning */
.plan-panel{ margin-bottom:16px; }
.plan-tools{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.plan-who{ font-family:'Archivo',sans-serif; font-size:13px; border:1px solid #E2E8EA; border-radius:8px; padding:7px 11px; background:#fff; color:#14242A; }
.plan-form{ display:none; flex-wrap:wrap; gap:8px; padding:12px 16px; background:#F8FBFB; border-top:1px solid #EEF3F4; border-bottom:1px solid #EEF3F4; }
.plan-form.open{ display:flex; }
.plan-form input, .plan-form select{ font-family:'Archivo',sans-serif; font-size:13px; border:1px solid #E2E8EA; border-radius:8px; padding:8px 10px; background:#fff; }
.plan-f-title{ flex:1 1 260px; }
.plan-day{ padding:8px 16px 4px; border-top:1px solid #F1F5F6; }
.plan-day.is-today{ background:linear-gradient(90deg,rgba(20,112,127,.05),transparent 40%); }
.plan-day-h{ font-family:'Jost',sans-serif; font-weight:500; font-size:13px; color:#44595F; margin-bottom:4px; }
.plan-day.is-today .plan-day-h{ color:#0E4D5C; }
.plan-day-h span{ background:#EEF3F4; color:#5E6D72; border-radius:999px; padding:0 7px; font-size:11px; margin-left:4px; }
.plan-day-h.late{ color:#B45309; } .plan-day-h.late span{ background:#FEF3C7; color:#B45309; }
.plan-overdue{ padding:8px 16px 4px; background:#FFFBF2; border-top:1px solid #F3E7CC; }
.plan-item{ display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid #F4F8F8; font-size:13px; }
.plan-item:last-child{ border-bottom:0; }
.plan-time{ font-family:'Jost',sans-serif; font-size:13px; color:#5E6D72; width:42px; flex:none; }
.plan-kind{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:2px 8px; border-radius:6px; background:#EEF3F4; color:#5E6D72; flex:none; width:74px; text-align:center; }
.plan-item.rdv .plan-kind{ background:#E0F2FE; color:#0369A1; } .plan-item.install .plan-kind{ background:#DCFCE7; color:#15803D; } .plan-item.action .plan-kind{ background:#EEF2FF; color:#4338CA; }
.plan-main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.plan-title{ color:#122A30; text-decoration:none; font-weight:600; }
a.plan-title:hover{ color:#14707F; }
.plan-sub{ font-size:11.5px; color:#8FA6AB; }
.plan-who-tag{ font-size:11.5px; color:#5E6D72; background:#F1F5F6; border-radius:6px; padding:2px 8px; flex:none; }
.plan-btn{ background:none; border:1px solid #E2E8EA; border-radius:6px; width:26px; height:24px; cursor:pointer; color:#8FA6AB; font-size:12px; }
.plan-btn:hover{ color:#14707F; border-color:#14707F; }
.plan-empty{ font-size:12px; color:#B0C0C4; padding:4px 0 8px; }
html[data-theme="dark"] .plan-form{ background:#0C2830; border-color:#1C3A42; }
html[data-theme="dark"] .plan-form input, html[data-theme="dark"] .plan-form select, html[data-theme="dark"] .plan-who{ background:#113640; border-color:#1C3A42; color:#EAF4F4; }
html[data-theme="dark"] .plan-title{ color:#EAF4F4; } html[data-theme="dark"] .plan-day, html[data-theme="dark"] .plan-item{ border-color:#1C3A42; }
html[data-theme="dark"] .plan-overdue{ background:#2A2412; border-color:#5A4A1A; }
@media (max-width:700px){ .plan-kind{ display:none; } .plan-time{ width:38px; } }