/* =====================================================================
   DELEXAN — Design system (refonte 2026-10)
   Bandeau marine, cartes blanches arrondies, ombres douces, accents
   jaune Delexan. Toutes les couleurs passent par des variables : la
   personnalisation super admin (--brand-*) reste prioritaire.
   ===================================================================== */
:root {
  --ink: #0f1b33;
  --ink-soft: #3b4863;
  --muted: #7a869c;
  --line: #e8edf5;
  --line-strong: #d9e1ec;
  --surface: #ffffff;
  --surface-2: #f7f9fd;
  --bg: #f3f6fb;
  --side-bg: #0a2254;
  --accent: #0A2557;      /* bleu marine Delexan — couleur principale */
  --accent-soft: #e8effb;
  --gold: #FEE512;        /* jaune Delexan — mises en avant, actions */
  --gold-ink: #e3a008;
  --navy: #0A2557;
  --link: #2563eb;
  --ok: #16a34a;
  --ok-soft: #e7f7ee;
  --warn: #d97706;
  --warn-soft: #fff4e0;
  --bad: #dc2626;
  --bad-soft: #fdecec;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(15,27,51,.04), 0 6px 24px rgba(15,27,51,.06);
  --shadow-lg: 0 24px 60px rgba(15,27,51,.18);
  /* Graphiques (palettes validees daltonisme) */
  --viz-1: #3B82F6; --viz-2: #22B07D; --viz-3: #8B5CF6;
  --don-1: #3B82F6; --don-2: #38BDF8; --don-3: #3B4FB8; --don-4: #F59E0B;
  /* Pastilles d'icones des cartes */
  --ic-blue: #3b82f6; --ic-purple: #8b5cf6; --ic-green: #16a34a; --ic-orange: #f59e0b; --ic-indigo: #6366f1;
  font-synthesis: none;
  color-scheme: light;
}

[data-theme="dark"] {
  --ink: #e8eef8;
  --ink-soft: #b6c2d6;
  --muted: #8794ab;
  --line: #243049;
  --line-strong: #2e3b57;
  --surface: #141c2e;
  --surface-2: #19223a;
  --bg: #0c1322;
  --side-bg: #070f22;
  --accent: #6f9be0;
  --accent-soft: #1a2743;
  --gold: #FEE512;
  --navy: #6f9be0;
  --link: #7aa7f5;
  --ok: #34c27a; --ok-soft: #12301f;
  --warn: #e3a33f; --warn-soft: #33270f;
  --bad: #ee6b5e; --bad-soft: #3a1717;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --viz-1: #4B8DF0; --viz-2: #1FA874; --viz-3: #8C6CF0;
  --don-1: #4B8DF0; --don-2: #1AA39A; --don-3: #8C6CF0; --don-4: #C47A0E;
  color-scheme: dark;
}
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea {
  background: var(--surface-2); color: var(--ink); border-color: var(--line-strong);
}
[data-theme="dark"] .pipe-card { background: var(--surface-2); border-color: var(--line-strong); color: var(--ink); }
[data-theme="dark"] .pipe-card .meta { color: #9fb0c2; }
[data-theme="dark"] tbody tr:hover { background: var(--surface-2); }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--ink);
  background: var(--brand-bg, var(--bg));
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.015em; }
a { color: var(--link); }
button { font-family: inherit; cursor: pointer; }
svg.i { width: 18px; height: 18px; flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
input, select, textarea {
  font-family: inherit; font-size: 14px; width: 100%;
  padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--accent); }
input[type="color"] { padding: 2px; height: 38px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.18); }
label { display: block; font-size: 12.5px; color: var(--ink-soft); margin: 0 0 5px; font-weight: 600; }
.field { margin-bottom: 14px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--navy); background: var(--navy); color: #fff;
  padding: 9px 16px; border-radius: var(--radius-sm); font-weight: 600; font-size: 13px;
  line-height: 1.3; transition: background .15s, border-color .15s, box-shadow .15s, transform .05s;
  text-decoration: none;
}
.btn:hover { background: #13336f; border-color: #13336f; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.ghost { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn.ghost:hover { background: var(--surface-2); border-color: var(--line-strong); }
.btn.accent { background: var(--gold); border-color: var(--gold); color: #0A2557; font-weight: 700; }
.btn.accent:hover { background: #f5da00; border-color: #f5da00; }
.btn.danger { background: var(--surface); border-color: var(--line-strong); color: var(--bad); }
.btn.danger:hover { background: var(--bad-soft); }
.btn.sm { padding: 6px 11px; font-size: 12px; border-radius: 8px; }
[data-theme="dark"] .btn:not(.ghost):not(.accent):not(.danger) { background: #2d5bb0; border-color: #2d5bb0; }

/* ---------- Auth ---------- */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(1200px 600px at 10% 110%, rgba(254,229,18,.35), transparent 60%), linear-gradient(160deg, #0b2a66 0%, #0a2254 55%, #0d2f6e 100%); }
.auth-card {
  width: 100%; max-width: 400px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 18px; padding: 32px; box-shadow: var(--shadow-lg);
}
.brand { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.brand .dot { width: 26px; height: 26px; border-radius: 8px; background: var(--gold); position: relative; flex: 0 0 auto; }
.brand .dot::after { content: ''; position: absolute; inset: 7px; border-radius: 50%; border: 3px solid #0A2557; }
.brand b { font-size: 18px; letter-spacing: -.02em; }
.auth-logo { width: 34px; height: 34px; border-radius: 10px; background: #0A2557; color: var(--gold); display: grid; place-items: center; flex: 0 0 auto; }
.auth-logo svg.i { width: 22px; height: 22px; }
.auth-card p.sub { color: var(--muted); margin: 4px 0 22px; font-size: 13.5px; }
.auth-switch { text-align: center; margin-top: 14px; font-size: 13px; color: var(--muted); }
.auth-switch a { cursor: pointer; font-weight: 600; }
.err { background: var(--bad-soft); color: var(--bad); padding: 10px 12px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 12px; }

/* ---------- App shell ---------- */
.shell { display: grid; grid-template-columns: 250px 1fr; height: 100vh; overflow: hidden; }
.side {
  background: var(--brand-side, linear-gradient(180deg, #0c2b68 0%, #0a2254 45%, #0b2560 82%, #213f74 92%, #8a8a3a 97%, #FEE512 100%));
  color: #cfd8e8; padding: 18px 14px 14px; display: flex; flex-direction: column;
  height: 100vh; position: sticky; top: 0; align-self: start; z-index: 1000; overflow: hidden;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent;
}
.side .brand { padding: 0 6px; margin-bottom: 14px; }
.side .brand b { color: #fff; font-size: 18px; font-weight: 700; }
.side .brand .sub { font-size: 11px; color: #8493a6; letter-spacing: .04em; text-transform: uppercase; }
.side-logo { width: 26px; height: 26px; color: #fff; flex: 0 0 auto; }
.side-search { position: relative; padding: 0 2px 6px; }
.side-search svg.i { position: absolute; left: 13px; top: 10px; width: 15px; height: 15px; color: #9fb0cc; pointer-events: none; }
.side-search input { width: 100%; padding: 9px 12px 9px 36px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(255,255,255,.08); color: #fff; font-size: 13px; }
.side-search input::placeholder { color: #9fb0cc; }
.side-search input:focus { border-color: rgba(255,255,255,.3); box-shadow: none; background: rgba(255,255,255,.12); }
.nav { margin: 18px -14px 0; padding: 0 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
.nav a, .grp-head {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 10px;
  color: #dfe6f3; text-decoration: none; font-size: 14.5px; font-weight: 500; cursor: pointer; user-select: none;
  transition: background .15s, color .15s;
}
.nav a:hover, .grp-head:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav a.active, .nav > a.navlink.active { background: linear-gradient(90deg, rgba(255,255,255,.14), rgba(255,255,255,.06)); color: #fff; font-weight: 700; }
.nav > a.navlink.active::before { content: ''; position: absolute; left: -14px; top: 6px; bottom: 6px; width: 4px; border-radius: 0 4px 4px 0; background: var(--gold); }
.nav > a.navlink.active .ic { color: var(--gold); }
.nav a .ic, .grp-head .ic { width: 20px; display: inline-flex; justify-content: center; color: #c6d1e4; font-size: 15px; }
.nav a .ic svg.i, .grp-head .ic svg.i { width: 19px; height: 19px; }

/* Groupes de navigation (menus depliants) */
.nav-group { position: relative; }
.grp-head.active { color: #fff; }
.grp-head.active .ic { color: var(--gold); }
.grp-head .caret { margin-left: auto; display: inline-flex; opacity: .7; transition: transform .18s; }
.grp-head .caret svg.i { width: 15px; height: 15px; }
.grp-head .grp-badge { margin-left: auto; }
.grp-head .grp-badge + .caret { margin-left: 8px; }
.flyout { display: none; padding: 2px 0 4px 18px; margin-left: 14px; border-left: 1px solid rgba(255,255,255,.12); }
.nav-group.open > .flyout { display: block; }
.nav-group.open > .grp-head .caret { transform: rotate(90deg); }
.flyout a { padding: 8px 12px; font-size: 13.5px; color: #c9d3e5; border-radius: 8px; gap: 10px; }
.flyout a .ic { width: 18px; }
.flyout a .ic svg.i { width: 16px; height: 16px; }
.flyout a.active { background: rgba(255,255,255,.12); color: #fff; font-weight: 600; }
.flyout a.active::before { content: ''; position: absolute; left: -19px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--gold); }
.flyout a.active .ic { color: var(--gold); }

.side .me {
  font-size: 12px; color: #cdd6e0; margin-top: 16px; background: rgba(8,24,60,.78); border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px; padding: 14px; overflow-wrap: anywhere; word-break: break-word; backdrop-filter: blur(4px);
}
.side .me b { color: #fff; display: block; overflow-wrap: anywhere; font-size: 14.5px; }
.side .me .role-pill { display: inline-block; margin: 4px 0 6px; padding: 1px 9px; border-radius: 20px; background: #fff; color: #0A2557; font-size: 11px; font-weight: 700; }
.side .me .me-mail { overflow-wrap: anywhere; font-size: 11.5px; color: #cdd6e8; line-height: 1.35; }
.side .me a { color: var(--gold); cursor: pointer; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; margin-top: 4px; }
.side .me a svg.i { width: 15px; height: 15px; }
.side .me select { width: 100%; }

/* Interrupteur glissant */
.switch { position: relative; display: inline-block; width: 46px; height: 26px; flex: 0 0 auto; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; cursor: pointer; inset: 0; background: var(--line-strong); border-radius: 26px; transition: .2s; }
.switch .slider:before { content: ""; position: absolute; height: 20px; width: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.switch input:checked + .slider { background: var(--accent); }
.switch input:checked + .slider:before { transform: translateX(20px); }

.main { padding: 26px 30px 34px; overflow-y: auto; overflow-x: hidden; height: 100vh; box-sizing: border-box; }
.main > * { max-width: var(--content-max, 100%); margin-left: auto; margin-right: auto; }
.cw-large { --content-max: 1560px; }
.cw-normal { --content-max: 1180px; }
.cw-full { --content-max: 100%; }
.modal.wide { max-width: 940px; }
.fiche-grid { display: grid; grid-template-columns: 1fr 320px; gap: 18px; align-items: start; }
@media (max-width: 720px) { .fiche-grid { grid-template-columns: 1fr; } }
.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; gap: 16px; flex-wrap: wrap; }
.page-head h1 { font-size: 24px; font-weight: 700; color: var(--ink); }
.page-head .desc { color: var(--muted); font-size: 14px; margin-top: 4px; }
.page-head > div:last-child { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ---------- Cards / grid ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.kpi .label { font-size: 13px; color: var(--brand-card-text, var(--ink-soft)); font-weight: 600; }
.kpi .val { font-size: 26px; font-weight: 750; margin-top: 4px; letter-spacing: -.02em; color: var(--brand-card-text, var(--ink)); }
.kpi.value .val { color: var(--brand-card-text, var(--ink)); }
/* Cartes KPI : blanches par defaut (maquette), degrade personnalisable par le super admin. */
.card.kpi { background: linear-gradient(135deg, var(--brand-card-from, var(--surface)) 0%, var(--brand-card-to, var(--surface)) 100%); }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.panel + .panel { margin-top: 18px; }
.panel-head { padding: 16px 20px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.panel-head h2 { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.panel-head a { color: var(--link); text-decoration: none; font-weight: 600; font-size: 12.5px; cursor: pointer; }
.panel-body { padding: 18px 20px; }

/* ---------- Tables ---------- */
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 650; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
td { padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tbody tr { transition: background .12s; }
tbody tr:hover { background: var(--surface-2); }
td .name { font-weight: 600; }
td .meta { color: var(--muted); font-size: 12px; }
.meta { color: var(--muted); font-size: 12.5px; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Badges / pipeline ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 650; background: var(--accent-soft); color: var(--ink-soft); line-height: 1.4; }
.badge.signe { background: var(--ok-soft); color: var(--ok); }
.badge.perdu { background: var(--bad-soft); color: var(--bad); }
.badge.negociation, .badge.rdv { background: var(--accent-soft); color: #2563eb; }
.badge.a_qualifier, .badge.a_contacter { background: var(--surface-2); color: var(--ink-soft); }

.pipeline { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.pipe-col { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px; min-height: 60px; }
.pipe-col h4 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 10px; display: flex; justify-content: space-between; }
.pipe-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px; margin-bottom: 8px; font-size: 12.5px; cursor: pointer; box-shadow: 0 1px 2px rgba(15,27,51,.04); transition: border-color .15s, box-shadow .15s; }
.pipe-card:hover { border-color: #93b4ef; box-shadow: 0 4px 14px rgba(15,27,51,.08); }
.pipe-card .c { color: #2563eb; font-weight: 700; font-size: 11.5px; }

/* ---------- Misc ---------- */
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin-bottom: 16px; }
.toolbar .field { margin: 0; }
.empty { text-align: center; color: var(--muted); padding: 36px 16px; }
.empty b { color: var(--ink-soft); display: block; margin-bottom: 4px; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.muted { color: var(--muted); }
.hint { background: var(--accent-soft); border: 1px solid #d6e4f7; color: #24436d; padding: 11px 13px; border-radius: var(--radius-sm); font-size: 12.5px; margin-bottom: 14px; }
[data-theme="dark"] .hint { border-color: var(--line-strong); color: var(--ink-soft); }
code { background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 5px; font-size: 12.5px; }

/* Modal */
.modal-bg { position: fixed; inset: 0; background: rgba(10,20,45,.5); backdrop-filter: blur(2px); display: grid; place-items: center; padding: 20px; z-index: 2000; }
.modal { background: var(--surface); border-radius: 18px; width: 100%; max-width: 540px; max-height: 90vh; overflow: auto; box-shadow: var(--shadow-lg); border: 1px solid var(--line); }
.modal-head { padding: 18px 22px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.modal-head h2, .modal-head h3, .modal-head b { font-size: 16px; }
.modal-body { padding: 20px 22px; }
.modal-foot { padding: 14px 22px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 10px; }
.x { background: none; border: none; font-size: 22px; color: var(--muted); line-height: 1; border-radius: 8px; padding: 2px 6px; }
.x:hover { background: var(--surface-2); color: var(--ink); }

/* Chat */
.chat { display: flex; flex-direction: column; height: calc(100vh - 130px); }
.chat-stream { flex: 1; overflow-y: auto; padding: 8px 4px; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 70%; }
.msg .who { font-size: 11px; color: var(--muted); margin-bottom: 2px; }
.msg .bubble { background: var(--surface); border: 1px solid var(--line); padding: 10px 13px; border-radius: 14px 14px 14px 4px; box-shadow: 0 1px 2px rgba(15,27,51,.04); }
.msg.mine { align-self: flex-end; text-align: right; }
.msg.mine .bubble { background: var(--navy); color: #fff; border-color: var(--navy); border-radius: 14px 14px 4px 14px; }
.chat-input { display: flex; gap: 10px; margin-top: 12px; }

/* --- Barre mobile + menu coulissant (caches sur grand ecran) --- */
.topbar { display: none; }
.iconbtn { background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--ink); padding: 4px 8px; }
.backdrop { display: none; }

.subtabs { display: inline-flex; gap: 4px; margin-bottom: 16px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 4px; box-shadow: var(--shadow); }
.subtab { padding: 7px 14px; border: none; background: transparent; border-radius: 9px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.subtab:hover { background: var(--surface-2); color: var(--ink); }
.subtab.active { background: var(--navy); color: #fff; }
[data-theme="dark"] .subtab.active { background: #2d5bb0; }
.dropmenu { position: fixed; z-index: 3000; min-width: 190px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; display: flex; flex-direction: column; }
.dropmenu button, .dropmenu a { display: block; width: 100%; text-align: left; background: none; border: none; padding: 9px 11px; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--ink); text-decoration: none; }
.dropmenu button:hover, .dropmenu a:hover { background: var(--surface-2); }
.dropmenu button.danger { color: var(--bad); }

@media (max-width: 800px) {
  .shell { display: block; height: auto; overflow: visible; }
  .main { height: auto; overflow: visible; }
  .topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 9px 12px; background: var(--side-bg); color: #fff; position: sticky; top: 0; z-index: 50;
  }
  .topbar-brand { display: flex; align-items: center; gap: 8px; font-size: 15px; }
  .topbar-brand b { color: #fff; }
  .topbar .iconbtn, .topbar .bell { color: #fff; }
  .side {
    position: fixed; top: 0; left: 0; bottom: 0; width: 280px; height: 100vh; max-width: 84vw;
    transform: translateX(-100%); transition: transform .25s ease; z-index: 60;
    flex-direction: column; align-items: stretch; gap: 0; overflow-y: auto;
  }
  .shell.menu-open .side { transform: translateX(0); }
  .side .me, .side .brand .sub { display: block; }
  .shell.menu-open .backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 55; }
  .main { padding: 16px 14px; }
  .pipeline { grid-template-columns: 1fr; }
  .row-2 { grid-template-columns: 1fr; }
  .chat-layout { grid-template-columns: 1fr !important; }
  .stats-grid { grid-template-columns: 1fr !important; }
  table { display: block; overflow-x: auto; white-space: nowrap; max-width: 100%; }
  .page-head > div:last-child { display: flex; flex-wrap: wrap; gap: 8px; }
}

/* Pastilles de notification dans la navigation */
.navbadge {
  margin-left: auto; background: #ef4444; color: #fff;
  font-size: 11px; font-weight: 700; min-width: 19px; height: 19px;
  border-radius: 10px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center;
}

/* Cloche de notifications */
.bell { background: none; border: none; cursor: pointer; font-size: 16px; position: relative; padding: 5px; line-height: 1; border-radius: 9px; display: inline-flex; }
.bell svg.i { width: 20px; height: 20px; }
.side .bell { color: #dbe3f1; }
.side .bell:hover { color: #fff; background: rgba(255,255,255,.08); }
.bell .navbadge { position: absolute; top: -3px; right: -4px; min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px; }
.bellpanel { position: fixed; z-index: 3000; width: 320px; max-height: 70vh; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); }
.bellhead { display: flex; justify-content: space-between; align-items: center; padding: 13px 15px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); }
.bellrow { padding: 12px 15px; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 13.5px; color: var(--ink); }
.bellrow:hover { background: var(--surface-2); }
.bellrow.unr { background: var(--accent-soft); }

/* --- Banniere licence (edition WELCOME : grace / lecture seule) --- */
.licence-banner{padding:9px 16px;font-size:13px;font-weight:600;text-align:center;line-height:1.35}
.licence-banner.warn{background:#fff6e5;color:#8a5a00;border-bottom:1px solid #f1d9a8}
.licence-banner.danger{background:#fdecec;color:#a11;border-bottom:1px solid #f3b6b6}
@media (prefers-color-scheme: dark){
  .licence-banner.warn{background:#3a2e12;color:#ffd27a;border-bottom-color:#5a4715}
  .licence-banner.danger{background:#3a1717;color:#ff9c9c;border-bottom-color:#5a1f1f}
}

/* Options du selecteur de statut lisibles (fond clair, texte sombre) */
#my-status option { color: #111; background: #fff; }

/* =====================================================================
   TABLEAU DE BORD
   ===================================================================== */
.dash-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 22px; flex-wrap: wrap; }
.dash-top h1 { font-size: 25px; font-weight: 750; }
.dash-top .desc { color: var(--muted); font-size: 14.5px; margin-top: 6px; }
.dash-info { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; font-size: 13px; color: var(--ink-soft); font-weight: 500; }
.dash-info span { display: inline-flex; align-items: center; gap: 7px; }
.dash-info svg.i { width: 17px; height: 17px; color: var(--ink); }
.dash-info .temp { font-weight: 700; color: var(--ink); font-size: 14px; }
.dash-info .temp svg.i { color: #f59e0b; }
.dash-search { position: relative; width: 250px; }
.dash-search svg.i { position: absolute; left: 13px; top: 11px; width: 15px; height: 15px; color: var(--muted); pointer-events: none; }
.dash-search input { padding: 10px 14px 10px 36px; border-radius: 12px; border-color: var(--line); background: var(--surface); box-shadow: var(--shadow); font-size: 13px; }

.kpi-row { display: grid; grid-template-columns: repeat(var(--kn, 5), minmax(0, 1fr)); gap: 18px; margin-bottom: 20px; }
.kcard { position: relative; display: grid; grid-template-columns: 46px 1fr; gap: 14px; padding: 20px 18px 16px; min-height: 124px; overflow: hidden; cursor: pointer; transition: box-shadow .15s, transform .15s; }
.kcard:hover { box-shadow: 0 10px 30px rgba(15,27,51,.10); transform: translateY(-1px); }
.kcard .kic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.kcard .kic svg.i { width: 21px; height: 21px; stroke-width: 2; }
.kcard .label { font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.kcard .val { font-size: 22px; margin-top: 8px; line-height: 1.15; white-space: nowrap; }
.kcard .delta { padding-right: 92px; margin-top: 7px; font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 4px; }
.kcard .delta.up { color: var(--ok); } .kcard .delta.down { color: var(--bad); } .kcard .delta.flat { color: var(--muted); }
.kcard .sub2 { margin-top: 7px; font-size: 11.5px; color: var(--muted); }
.kcard .spark { position: absolute; right: 12px; top: 60px; width: 86px; height: 38px; pointer-events: none; }

.dash-grid { position: relative; display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)) minmax(280px, 340px); gap: 18px; align-items: stretch; }
.dash-grid > .dash-block > .panel { height: 100%; display: flex; flex-direction: column; }
.dash-grid > .dash-block > .panel > .panel-body { flex: 1; }
.dash-grid [data-block="evolution"]  { grid-column: 1 / 14; grid-row: 1; }
.dash-grid [data-block="repartition"] { grid-column: 14 / 21; grid-row: 1; }
.dash-grid [data-block="rdv"]        { grid-column: 21 / 22; grid-row: 1; }
.dash-grid [data-block="geo"]        { grid-column: 1 / 10; grid-row: 2; }
.dash-grid [data-block="priorites"]  { grid-column: 10 / 21; grid-row: 2; }
.dash-grid [data-block="recente"]    { grid-column: 21 / 22; grid-row: 2 / 4; }
.dash-grid [data-block="objectif"]   { grid-column: 1 / 21; grid-row: 3; }
.dash-grid .panel-head, .dash-free .panel-head { border-bottom: none; padding: 18px 20px 6px; }
.dash-grid .panel-body, .dash-free .panel-body { padding: 10px 20px 18px; }
[data-block="repartition"] .panel-body { padding-left: 14px !important; padding-right: 16px !important; }
.dash-block { border-radius: var(--radius); min-width: 0; }
.dash-free { position: relative; }
.dash-free .dash-block { position: absolute; }
.dash-free .dash-block > .panel { height: 100%; }
.dash-block.dragging { opacity: .45; }
.ph-ic { width: 22px; height: 22px; display: inline-grid; place-items: center; color: #3b82f6; }
.ph-ic svg.i { width: 20px; height: 20px; stroke-width: 2; }
.see-all { display: inline-flex; align-items: center; gap: 4px; }
.see-all svg.i { width: 14px; height: 14px; }

.legend { display: flex; gap: 16px; font-size: 12px; color: var(--ink-soft); flex-wrap: wrap; }
.legend button { background: none; border: none; padding: 0; font: inherit; color: inherit; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.legend button.off { opacity: .4; }
.legend i, .lg-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.chart-wrap { position: relative; width: 100%; flex: 1; min-height: 200px; }
#evo-chart-body { display: flex; flex-direction: column; }
.chart-wrap svg { display: block; width: 100%; overflow: visible; }
.chart-wrap text { fill: var(--muted); font-size: 11px; font-family: inherit; }
.chart-tip { position: absolute; pointer-events: none; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(15,27,51,.14); padding: 8px 11px; font-size: 12px; color: var(--ink); min-width: 140px; z-index: 5; display: none; white-space: nowrap; }
.chart-tip b { display: block; margin-bottom: 4px; font-size: 12.5px; }
.chart-tip div { display: flex; align-items: center; gap: 7px; line-height: 1.6; }

.donut-wrap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; height: 100%; }
.donut-wrap svg { width: 136px; height: 136px; flex: 0 0 auto; }
.donut-center { font-weight: 750; fill: var(--ink); font-size: 17px; }
.donut-center-sub { fill: var(--muted); font-size: 11px; }
.donut-leg { flex: 1; min-width: 190px; display: flex; flex-direction: column; gap: 16px; font-size: 12.5px; }
.donut-leg .r { display: grid; grid-template-columns: 10px minmax(0,1fr) auto auto; gap: 7px; align-items: center; white-space: nowrap; }
.donut-leg .r > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; }
.donut-leg .pct { color: var(--ink-soft); font-weight: 600; min-width: 32px; text-align: right; }
.donut-leg .amt { font-weight: 650; text-align: right; min-width: 58px; font-variant-numeric: tabular-nums; }

.rdv-item { display: grid; grid-template-columns: 48px 1fr 14px; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.rdv-item:last-child { border-bottom: none; }
.rdv-item:hover .rdv-t { color: #2563eb; }
.rdv-date { background: var(--accent-soft); border-radius: 10px; text-align: center; padding: 5px 0; line-height: 1.1; }
.rdv-date b { display: block; font-size: 18px; color: var(--ink); }
.rdv-date span { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--ink-soft); }
.rdv-t { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rdv-m { color: var(--muted); font-size: 12px; display: flex; gap: 12px; margin-top: 3px; flex-wrap: wrap; }
.rdv-m span { display: inline-flex; align-items: center; gap: 4px; }
.rdv-m svg.i, .chev svg.i { width: 13px; height: 13px; }
.chev { color: var(--muted); display: inline-flex; }

.geo-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: center; height: 100%; }
.geo-map { background: linear-gradient(180deg, #eaf1fb, #dfe9f7); border-radius: 12px; position: relative; overflow: hidden; min-height: 196px; }
[data-theme="dark"] .geo-map { background: linear-gradient(180deg, #172238, #131d31); }
.geo-map svg { display: block; width: 100%; height: 100%; }
.geo-land { fill: #f8fafd; stroke: #c7d4e6; stroke-width: 1; }
[data-theme="dark"] .geo-land { fill: #22304b; stroke: #33425f; }
.geo-dot { fill: #3b82f6; stroke: #fff; stroke-width: 2; }
.geo-dot.top { fill: #0A2557; }
[data-theme="dark"] .geo-dot.top { fill: #FEE512; stroke: #0c1322; }
.geo-tag { position: absolute; background: #0A2557; color: #fff; border-radius: 8px; padding: 4px 9px; font-size: 11px; line-height: 1.25; pointer-events: none; box-shadow: 0 6px 16px rgba(10,37,87,.3); white-space: nowrap; transform: translate(-50%, calc(-100% - 12px)); }
.geo-tag b { display: block; font-size: 11.5px; }
.geo-list { display: flex; flex-direction: column; gap: 13px; }
.geo-row { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; font-size: 12.5px; }
.geo-rank { width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: #2563eb; display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.geo-row .nm { font-weight: 600; line-height: 1.2; }
.geo-row .sb { font-size: 11px; color: var(--muted); }
.geo-bar { height: 4px; border-radius: 4px; background: var(--line); margin-top: 4px; overflow: hidden; }
.geo-bar i { display: block; height: 100%; border-radius: 4px; background: #3b82f6; }
.geo-row .pc { font-weight: 650; color: #2563eb; font-size: 12px; }

.prio-row { display: grid; grid-template-columns: 92px 1fr auto 14px; gap: 14px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 13.5px; }
.prio-row:last-child { border-bottom: none; }
.prio-row:hover .pt { color: #2563eb; }
.prio-row .pt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.prio-row .pd { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ppill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 700; width: max-content; }
.ppill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ppill.haute { background: var(--bad-soft); color: var(--bad); }
.ppill.moyenne { background: var(--warn-soft); color: var(--warn); }
.ppill.basse { background: var(--ok-soft); color: var(--ok); }

.act-item { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 9px 0; }
.act-av { position: relative; width: 32px; height: 32px; }
.act-av .a { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px; }
.act-av .on { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--ok); border: 2px solid var(--surface); }
.act-t { font-size: 13px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-t em { font-style: normal; color: #2563eb; }
.act-s { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-w { font-size: 11.5px; color: var(--muted); white-space: nowrap; }

.goal-banner { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 72px; color: #fff; box-shadow: var(--shadow); background: #0b2a66; display: flex; align-items: center; }
.goal-banner > svg.bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.goal-in { position: relative; display: flex; align-items: center; gap: 18px; padding: 13px 26px; width: 100%; flex-wrap: wrap; }
.goal-ic { width: 46px; height: 46px; color: #fff; flex: 0 0 auto; }
.goal-ic svg.i { width: 44px; height: 44px; stroke-width: 1.6; }
.goal-txt { flex: 1; min-width: 220px; max-width: 470px; }
.goal-txt b { font-size: 16px; display: block; margin-bottom: 8px; }
.goal-bar a { font-size: 11.5px; margin-left: 4px; }
.goal-bar { display: flex; align-items: center; gap: 12px; font-size: 12px; }
.goal-bar .tr { flex: 1; height: 7px; background: rgba(255,255,255,.28); border-radius: 6px; overflow: hidden; }
.goal-bar .tr i { display: block; height: 100%; background: var(--gold); border-radius: 6px; }
.goal-quote { margin-left: auto; text-align: right; font-size: 15px; font-weight: 650; text-shadow: 0 1px 6px rgba(0,0,0,.35); }
.goal-quote small { display: block; font-size: 11.5px; font-weight: 500; opacity: .85; margin-top: 2px; }
.goal-banner a { color: var(--gold); cursor: pointer; font-weight: 600; }

.dash-tools { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 14px; font-size: 12px; }
.dash-tools a { color: var(--muted); cursor: pointer; text-decoration: none; }
.dash-tools a:hover { color: var(--link); }
.empty-mini { color: var(--muted); font-size: 13px; padding: 18px 0; text-align: center; }

@media (max-width: 1560px) {
  .kcard .spark { display: none; }
  .kcard .delta { padding-right: 0; }
  .kpi-row { gap: 14px; }
  .kcard { grid-template-columns: 42px 1fr; gap: 12px; padding: 18px 14px 14px; }
  .kcard .kic { width: 42px; height: 42px; }
}
@media (max-width: 1180px) {
  .kpi-row { display: flex; flex-wrap: wrap; }
  .kpi-row > .kcard { flex: 1 1 220px; }
}
@media (max-width: 1440px) {
  .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-grid [data-block] { grid-column: auto !important; grid-row: auto !important; }
  .dash-grid [data-block="evolution"], .dash-grid [data-block="objectif"], .dash-grid [data-block="recente"] { grid-column: 1 / -1 !important; }
}
@media (max-width: 820px) {
  .kpi-row { grid-template-columns: 1fr 1fr; gap: 12px; }
  .dash-grid { grid-template-columns: 1fr; }
  .dash-grid [data-block] { grid-column: 1 / -1 !important; }
  .geo-wrap { grid-template-columns: 1fr; }
  .dash-search { width: 100%; }
  .goal-quote { margin-left: 0; text-align: left; }
}
@media (max-width: 480px) { .kpi-row { grid-template-columns: 1fr; } }

/* Mise en evidence d'une section (ex : arrivee depuis \u00ab Configurer ma boite \u00bb) */
@keyframes focusPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(254,229,18,0); } 30%, 70% { box-shadow: 0 0 0 4px rgba(254,229,18,.85); } }
.focus-pulse { animation: focusPulse 1.4s ease-in-out 3; border-color: #f5d000 !important; }

/* Accueil personnalise : grille automatique (3 colonnes) quand la selection differe de la maquette */
.dash-grid.dash-auto { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row dense; }
.dash-grid.dash-auto [data-block] { grid-column: auto !important; grid-row: auto !important; }
.dash-grid.dash-auto [data-block="evolution"] { grid-column: span 2 !important; }
.dash-grid.dash-auto [data-block="pipeline"], .dash-grid.dash-auto [data-block="objectif"] { grid-column: 1 / -1 !important; }
.dash-grid.dash-auto [data-block="pipeline"] .pipeline { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1440px) {
  .dash-grid.dash-auto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-grid.dash-auto [data-block="evolution"] { grid-column: 1 / -1 !important; }
  .dash-grid.dash-auto [data-block="pipeline"] .pipeline { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .dash-grid.dash-auto { grid-template-columns: 1fr; }
  .dash-grid.dash-auto [data-block] { grid-column: 1 / -1 !important; }
  .dash-grid.dash-auto [data-block="pipeline"] .pipeline { grid-template-columns: 1fr; }
}
.dash-tools .btn { margin-left: 4px; }

/* Fenetre « Personnaliser l'accueil » */
.pz-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 720px) { .pz-cols { grid-template-columns: 1fr; } }
.pz-h { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.pz-list { display: flex; flex-direction: column; gap: 6px; }
.pz-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.pz-row label { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 13px; font-weight: 500; color: var(--ink); cursor: pointer; }
.pz-row input:disabled + * , .pz-row label:has(input:disabled) { opacity: .55; }
.pz-ord { display: inline-flex; gap: 4px; }
.pz-ord button { border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-soft); border-radius: 7px; width: 26px; height: 24px; font-size: 12px; line-height: 1; }
.pz-ord button:hover { background: var(--accent-soft); color: var(--ink); }
@media (max-width: 1440px) and (min-width: 1181px) { .kpi-row[style*="--kn:6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.kpi-row[style*="--kn:6"] .kcard .spark { display: none; }
.kpi-row[style*="--kn:6"] .kcard .delta { padding-right: 0; }
.dash-perso-top { height: 40px; border-radius: 12px; box-shadow: var(--shadow); border-color: var(--line); }