/* ============================================================
   ARDILA PILOT · feuille de style
   Les valeurs ci-dessous sont celles du thème Ardila ; elles
   servent de repli. Le thème actif les remplace au chargement
   (voir themes.js). La police est chargée depuis index.html.
   ============================================================ */
:root {
  color-scheme: dark;
  --blue-700:#2c3072; --blue-600:#3b3f92; --blue-500:#565ab0;
  --blue-300:#a9acda; --blue-100:#e4e5f4; --blue-50:#f2f3fa;
  --red-700:#a8241c; --red-600:#cf3026; --red-500:#e0463c;
  --green-600:#2e9e76; --green-500:#34b083;
  --amber-500:#e8a13a;
  --navy-950:#0a0e28; --navy-900:#0d1233; --navy-800:#141b45;
  --navy-700:#1c2456; --navy-600:#2a3370; --navy-500:#3a4488;

  --txt:#dfe2f5; --txt-2:#9aa2d0; --txt-3:#6a71a8;
  /* Jetons d'alerte : ils restent rouge/orange/vert quel que soit le
     thème — une action en retard ne doit jamais s'afficher en violet. */
  --danger:#cf3026; --danger-500:#e0463c;
  --danger-txt:#ff9d95; --ok-txt:#6fd7b0; --warn-txt:#f0c07a;
  --txt-fort:#cdd2f0;
  --txt-max:#ffffff;   /* titres : devient sombre en mode jour */

  --gradient-brand: linear-gradient(95deg, #cf3026 0%, #7a3a78 52%, #3b3f92 100%);
  --gradient-brand-soft: linear-gradient(95deg, #e0463c 0%, #565ab0 100%);

  --font-heading:'Poppins', sans-serif;
  --font-body:'Mulish', sans-serif;
  --font-logo:'Quicksand', sans-serif;

  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  --shadow-card: 0 1px 2px rgba(0,0,0,.28), 0 8px 24px -16px rgba(0,0,0,.6);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; }
body {
  margin: 0; background: var(--navy-900); color: var(--txt);
  font-family: var(--font-body); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
/* textarea était absent : sans lui, le texte saisi restait noir sur fond navy. */
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
input, select, textarea { color: var(--txt); }
:root[data-mode="clair"] { color-scheme: light; }
h1, h2, h3, h4 { font-family: var(--font-heading); margin: 0; font-weight: 600; }
.ico { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none;
       stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mono-num { font-variant-numeric: tabular-nums; }

/* ============================================================
   1 · ÉCRAN DE CONNEXION (démo : choix du profil)
   ============================================================ */
.login {
  min-height: 100vh; display: grid; place-items: center; padding: 32px 20px;
  background:
    radial-gradient(900px 500px at 80% -10%, color-mix(in srgb, var(--blue-600) 45%, transparent), transparent 60%),
    radial-gradient(700px 400px at 5% 110%, color-mix(in srgb, var(--red-600) 22%, transparent), transparent 60%),
    var(--navy-950);
}
.login-card {
  width: 100%; max-width: 460px; background: var(--navy-800);
  border: 1px solid var(--navy-600); border-radius: 20px;
  padding: 34px 30px 28px; box-shadow: 0 30px 70px -30px rgba(0,0,0,.9);
}
.login-card .brand { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.login-card .brand img { height: 26px; width: auto; }
.login-card .brand .name {
  font-family: var(--font-logo); font-weight: 700; font-size: 17px;
  letter-spacing: .01em; color: var(--txt-max);
}
.login-card h1 { font-size: 22px; letter-spacing: -.01em; }
.login-card .sub { color: var(--txt-2); margin: 6px 0 24px; font-size: 13.5px; }

.field { margin-bottom: 14px; }
.field label {
  display: block; font-family: var(--font-heading); font-weight: 600;
  font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--txt-3); margin-bottom: 7px;
}
.field select, .field input {
  width: 100%; background: var(--navy-900); border: 1px solid var(--navy-500);
  border-radius: var(--r-sm); padding: 11px 12px; outline: 0;
}
.field select:focus, .field input:focus { border-color: var(--blue-500); }

.role-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.role-btn {
  background: var(--navy-900); border: 1px solid var(--navy-500); color: var(--txt-2);
  border-radius: var(--r-md); padding: 14px 12px; text-align: left; cursor: pointer;
  transition: border-color .15s, background .15s, color .15s, transform .1s;
}
.role-btn:hover { transform: translateY(-1px); border-color: var(--blue-500); color: var(--txt-max); }
.role-btn .ico { margin-bottom: 8px; }
.role-btn strong { display: block; font-family: var(--font-heading); font-size: 14px; color: inherit; }
.role-btn span { font-size: 12px; color: var(--txt-3); }
.role-btn[aria-pressed="true"] {
  background: linear-gradient(180deg, color-mix(in srgb, var(--blue-500) 28%, transparent), color-mix(in srgb, var(--blue-600) 14%, transparent));
  border-color: var(--blue-500); color: var(--txt-max);
}
.role-btn[aria-pressed="true"] span { color: var(--blue-300); }

.btn-primary {
  width: 100%; border: 0; cursor: pointer; color: #fff;
  background: var(--gradient-brand); border-radius: var(--r-pill);
  font-family: var(--font-heading); font-weight: 600; font-size: 14.5px;
  padding: 13px 18px; display: inline-flex; align-items: center;
  justify-content: center; gap: 9px; transition: filter .15s, transform .1s;
}
.btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); }
.login-note {
  margin-top: 16px; font-size: 12px; color: var(--txt-3); text-align: center; line-height: 1.6;
}
.signature-editeur {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--navy-700);
  text-align: center; font-family: var(--font-heading); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--txt-3);
}

/* Sélecteur de thème (dossier maître uniquement) */
.themes { display: grid; gap: 10px; }
.theme-choix {
  display: flex; align-items: center; gap: 13px; width: 100%; cursor: pointer;
  background: var(--navy-900); border: 1px solid var(--navy-500); color: var(--txt-2);
  border-radius: var(--r-md); padding: 12px 14px; text-align: left;
  transition: border-color .15s, background .15s, transform .1s;
}
.theme-choix:hover { transform: translateY(-1px); border-color: var(--blue-500); color: var(--txt-max); }
.theme-choix.is-on { border-color: var(--blue-500); background: color-mix(in srgb, var(--blue-600) 22%, transparent); color: var(--txt-max); }
.th-pastilles { display: flex; gap: 4px; flex: none; }
.th-pastilles i { width: 15px; height: 15px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); }
.th-txt b { display: block; font-family: var(--font-heading); font-size: 13.5px; color: inherit; }
.th-txt span { font-size: 11.5px; color: var(--txt-3); }

/* ============================================================
   2 · CHÂSSIS DE L'APPLICATION
   ============================================================ */
.app { display: none; min-height: 100vh; flex-direction: column; }
.app.is-on { display: flex; }

.topbar {
  position: sticky; top: 0; z-index: 40; height: 60px; flex: none;
  background: var(--navy-950); border-bottom: 1px solid var(--navy-700);
  display: flex; align-items: center; gap: 14px; padding: 0 18px;
}
.topbar .brand { display: flex; align-items: center; gap: 9px; }
.topbar .brand img { height: 22px; width: auto; }
.topbar .brand .name {
  font-family: var(--font-logo); font-weight: 700; font-size: 15px; color: var(--txt-max);
}
.topbar .brand .name em {
  font-style: normal; color: var(--blue-300); font-weight: 600;
}
.searchbar {
  margin-left: 12px; flex: 1 1 auto; max-width: 380px;
  display: flex; align-items: center; gap: 8px;
  background: var(--navy-800); border: 1px solid var(--navy-600);
  border-radius: var(--r-pill); padding: 7px 14px;
}
.searchbar:focus-within { border-color: var(--blue-500); }
.searchbar .ico { width: 15px; height: 15px; color: var(--txt-3); }
.searchbar input { flex: 1; background: transparent; border: 0; outline: 0; font-size: 13px; }
.searchbar input::placeholder { color: var(--txt-3); }

.topbar .spacer { flex: 1 1 auto; }
.icon-btn {
  position: relative; background: transparent; border: 1px solid transparent;
  color: var(--txt-2); border-radius: var(--r-pill); padding: 8px; cursor: pointer;
  display: inline-flex; transition: background .15s, color .15s;
}
.icon-btn:hover { background: var(--navy-800); color: var(--txt-max); }
.icon-btn .dot {
  position: absolute; top: 6px; right: 6px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--danger-500); border: 2px solid var(--navy-950);
}
/* Bascule jour / nuit : une seule des deux icônes est visible à la fois. */
.btn-mode .ico-soleil { display: none; }
:root[data-mode="clair"] .btn-mode .ico-lune { display: none; }
:root[data-mode="clair"] .btn-mode .ico-soleil { display: block; }

.who { display: flex; align-items: center; gap: 10px; padding-left: 6px; }
.who .meta { text-align: right; line-height: 1.25; }
.who .meta b { display: block; font-family: var(--font-heading); font-size: 13px; font-weight: 600; }
.who .meta span { font-size: 11.5px; color: var(--txt-3); }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: #fff;
  font-family: var(--font-heading); font-weight: 600; font-size: 12.5px;
  background: var(--gradient-brand-soft);
}
.avatar.sm { width: 28px; height: 28px; font-size: 11px; }
.avatar.lg { width: 46px; height: 46px; font-size: 16px; }

.shell { flex: 1 1 auto; display: flex; align-items: flex-start; }

.sidenav {
  position: sticky; top: 60px; align-self: stretch; flex: none; width: 216px;
  background: var(--navy-950); border-right: 1px solid var(--navy-700);
  padding: 16px 12px; display: flex; flex-direction: column; gap: 3px;
  min-height: calc(100vh - 60px);
}
.sidenav .group {
  font-family: var(--font-heading); font-size: 10.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--txt-3);
  padding: 14px 10px 6px;
}
.navlink {
  display: flex; align-items: center; gap: 11px; padding: 9px 11px;
  border-radius: var(--r-sm); color: var(--txt-2); cursor: pointer;
  border: 0; background: transparent; width: 100%; text-align: left;
  font-family: var(--font-heading); font-weight: 500; font-size: 13.5px;
  transition: background .14s, color .14s;
}
.navlink:hover { background: var(--navy-800); color: var(--txt-max); }
.navlink.is-active {
  background: linear-gradient(90deg, color-mix(in srgb, var(--blue-500) 30%, transparent), color-mix(in srgb, var(--blue-600) 10%, transparent));
  color: var(--txt-max); box-shadow: inset 2px 0 0 var(--red-600);
}
.navlink .count {
  margin-left: auto; font-family: var(--font-body); font-size: 11px; font-weight: 700;
  background: var(--navy-600); color: var(--blue-300);
  border-radius: var(--r-pill); padding: 1px 8px; min-width: 22px; text-align: center;
}
.navlink .count.alert { background: color-mix(in srgb, var(--danger) 22%, transparent); color: var(--danger-txt); }
.sidenav .foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--navy-800); }

.main { flex: 1 1 auto; min-width: 0; padding: 22px 26px 60px; }
.page-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head h1 { font-size: 24px; letter-spacing: -.02em; }
.page-head .sub { color: var(--txt-2); font-size: 13.5px; margin-top: 3px; }
.page-head .right { margin-left: auto; display: flex; align-items: center; gap: 9px; }

.chip-select {
  background: var(--navy-800); border: 1px solid var(--navy-600); color: var(--txt);
  border-radius: var(--r-pill); padding: 8px 14px; font-size: 13px; outline: 0; cursor: pointer;
}
.chip-select:focus { border-color: var(--blue-500); }
.btn {
  /* line-height explicite : sinon un <a class="btn"> et un <button class="btn">
     n'ont pas la même hauteur (défaut UA vs hérité du body). */
  line-height: 1.25;
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: var(--navy-800); border: 1px solid var(--navy-600); color: var(--txt);
  border-radius: var(--r-pill); padding: 8px 15px;
  font-family: var(--font-heading); font-weight: 600; font-size: 12.5px;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
}
.btn:hover { background: var(--navy-700); border-color: var(--blue-500); color: var(--txt-max); transform: translateY(-1px); }
.btn .ico { width: 15px; height: 15px; }
.btn.accent { background: var(--gradient-brand); border-color: transparent; color: #fff; }
.btn.accent:hover { filter: brightness(1.1); }
.btn.ghost { background: transparent; }
/* min-height : une icône dans le bouton le rend 1 px plus haut que son voisin. */
.btn.tiny { padding: 5px 11px; font-size: 11.5px; min-height: 28px; }

/* ============================================================
   3 · CARTES & GRILLES
   ============================================================ */
.card {
  background: var(--navy-800); border: 1px solid var(--navy-600);
  border-radius: var(--r-lg); box-shadow: var(--shadow-card);
}
.card > header {
  display: flex; align-items: center; gap: 10px;
  padding: 15px 18px; border-bottom: 1px solid var(--navy-700);
}
.card > header h2 { font-size: 14.5px; font-weight: 600; }
.card > header .right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.card > .body { padding: 16px 18px; }
.card > .body.flush { padding: 0; }

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-bottom: 18px; }
.kpi { position: relative; overflow: hidden; padding: 16px 18px; }
.kpi::after {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--accent, var(--blue-500));
}
.kpi .lbl {
  display: flex; align-items: center; gap: 7px; color: var(--txt-2);
  font-family: var(--font-heading); font-size: 12px; font-weight: 500;
}
.kpi .lbl .ico { width: 15px; height: 15px; color: var(--accent, var(--blue-300)); }
.kpi .val {
  font-family: var(--font-heading); font-weight: 700; font-size: 27px;
  letter-spacing: -.02em; margin: 8px 0 4px; color: var(--txt-max);
}
.kpi .delta { font-size: 12px; color: var(--txt-3); display: flex; align-items: center; gap: 5px; }
.kpi .delta b { font-weight: 700; }
.kpi .delta.up b { color: var(--green-500); }
.kpi .delta.down b { color: var(--danger-500); }

.grid-2 { display: grid; grid-template-columns: 1.55fr 1fr; gap: 16px; align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; align-items: start; }
.stack { display: grid; gap: 16px; }

/* ============================================================
   4 · TABLEAUX
   ============================================================ */
table.tbl { width: 100%; border-collapse: collapse; }
table.tbl th {
  text-align: left; font-family: var(--font-heading); font-weight: 600;
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--txt-3);
  padding: 11px 18px; border-bottom: 1px solid var(--navy-700); white-space: nowrap;
}
table.tbl td { padding: 12px 18px; border-bottom: 1px solid color-mix(in srgb, var(--navy-600) 55%, transparent); vertical-align: middle; }
table.tbl tbody tr:last-child td { border-bottom: 0; }
table.tbl tbody tr.clickable { cursor: pointer; }
table.tbl tbody tr.clickable:hover { background: color-mix(in srgb, var(--navy-600) 35%, transparent); }
.cell-person { display: flex; align-items: center; gap: 10px; }
.cell-person b { font-family: var(--font-heading); font-weight: 600; font-size: 13.5px; color: var(--txt-max); white-space: nowrap; }
.cell-person span { display: block; font-size: 11.5px; color: var(--txt-3); white-space: nowrap; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Boutons d'action en fin de ligne : un conteneur flex, sinon les boutons
   s'alignent sur la ligne de base et se décalent les uns par rapport aux autres. */
.cell-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: nowrap; }
.cell-actions .btn { flex: none; }

.bar { height: 6px; border-radius: var(--r-pill); background: var(--navy-600); overflow: hidden; min-width: 90px; }
.bar > i { display: block; height: 100%; border-radius: inherit; background: var(--gradient-brand-soft); }
.bar > i.ok { background: linear-gradient(90deg, var(--green-600), var(--green-500)); }
.bar > i.warn { background: linear-gradient(90deg, var(--danger), var(--amber-500)); }
.bar-wrap { display: flex; align-items: center; gap: 10px; }
.bar-wrap b { font-family: var(--font-heading); font-size: 12.5px; min-width: 38px; text-align: right; }

.badge {
  display: inline-flex; align-items: center; gap: 5px; border-radius: var(--r-pill);
  padding: 3px 10px; font-family: var(--font-heading); font-weight: 600; font-size: 11.5px;
  background: var(--navy-600); color: var(--blue-300); white-space: nowrap;
}
.badge.ok    { background: color-mix(in srgb, var(--green-600) 18%, transparent); color: var(--ok-txt); }
.badge.warn  { background: color-mix(in srgb, var(--amber-500) 18%, transparent); color: var(--warn-txt); }
.badge.dang  { background: color-mix(in srgb, var(--danger) 20%, transparent);  color: var(--danger-txt); }
.badge.neutral { background: var(--navy-700); color: var(--txt-2); }

/* ============================================================
   5 · ENTONNOIR DE CONVERSION
   ============================================================ */
.funnel { display: grid; gap: 9px; }
.funnel .step { display: grid; grid-template-columns: 108px 1fr auto; align-items: center; gap: 12px; }
.funnel .step .name { font-family: var(--font-heading); font-size: 12.5px; color: var(--txt-2); }
.funnel .step .track { height: 30px; background: var(--navy-900); border-radius: var(--r-sm); overflow: hidden; }
.funnel .step .fill {
  height: 100%; border-radius: var(--r-sm); display: flex; align-items: center;
  padding: 0 10px; font-family: var(--font-heading); font-weight: 600; font-size: 12px;
  color: #fff; min-width: 44px; transition: width .5s cubic-bezier(.2,.7,.3,1);
}
.funnel .step .vide {
  display: inline-flex; align-items: center; height: 100%; padding: 0 11px;
  font-family: var(--font-heading); font-size: 12px; color: var(--txt-3);
}
.funnel .step .amount { font-size: 12px; color: var(--txt-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ============================================================
   6 · KANBAN PIPELINE
   ============================================================ */
.kanban { display: grid; grid-template-columns: repeat(5, minmax(190px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.kcol { background: var(--navy-800); border: 1px solid var(--navy-600); border-radius: var(--r-md); display: flex; flex-direction: column; min-height: 160px; }
.kcol > header {
  display: flex; align-items: center; gap: 8px; padding: 11px 13px;
  border-bottom: 1px solid var(--navy-700);
}
.kcol > header .dotc { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.kcol > header h3 { font-size: 12.5px; font-weight: 600; }
.kcol > header .n { margin-left: auto; font-size: 11.5px; color: var(--txt-3); font-weight: 700; }
.kcol .list { padding: 10px; display: grid; gap: 9px; }
.kcol .total { padding: 9px 13px; border-top: 1px solid var(--navy-700); font-size: 11.5px; color: var(--txt-3); }
.opp {
  background: var(--navy-700); border: 1px solid var(--navy-600); border-radius: var(--r-sm);
  padding: 11px; cursor: pointer; transition: border-color .15s, transform .1s;
}
.opp:hover { border-color: var(--blue-500); transform: translateY(-1px); }
.opp .cli { font-family: var(--font-heading); font-weight: 600; font-size: 12.5px; color: var(--txt-max); }
.opp .lib { font-size: 12px; color: var(--txt-2); margin: 2px 0 8px; }
.opp .row { display: flex; align-items: center; gap: 8px; }
.opp .montant { font-family: var(--font-heading); font-weight: 700; font-size: 13px; color: var(--blue-300); }
.opp .who2 { margin-left: auto; }

/* ============================================================
   7 · TÂCHES (vue commercial + relances responsable)
   ============================================================ */
.tasks { display: grid; }
.task {
  display: grid; grid-template-columns: auto 1fr auto; gap: 13px; align-items: flex-start;
  padding: 13px 18px; border-bottom: 1px solid color-mix(in srgb, var(--navy-600) 55%, transparent);
}
.task:last-child { border-bottom: 0; }
.task.done { opacity: .45; }
.task.done .t-title { text-decoration: line-through; }
.tick {
  width: 22px; height: 22px; margin-top: 1px; border-radius: 7px; flex: none; cursor: pointer;
  border: 1.5px solid var(--navy-500); background: var(--navy-900);
  display: grid; place-items: center; color: transparent; transition: all .15s;
}
.tick:hover { border-color: var(--green-500); color: color-mix(in srgb, var(--green-500) 50%, transparent); }
.tick .ico { width: 14px; height: 14px; stroke-width: 2.6; }
.task.done .tick { background: var(--green-600); border-color: var(--green-600); color: #fff; }
.t-main { min-width: 0; }
.t-title { font-family: var(--font-heading); font-weight: 600; font-size: 13.5px; color: var(--txt-max); }
.t-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 5px; font-size: 12px; color: var(--txt-3); }
.t-meta .sep { color: var(--txt-3); opacity: .55; }
.t-note { margin-top: 6px; font-size: 12.5px; color: var(--txt-2); font-style: italic; }
.t-actions { display: flex; align-items: center; gap: 6px; }
.tag-type {
  display: inline-flex; align-items: center; gap: 5px; border-radius: var(--r-pill);
  padding: 2px 9px; font-family: var(--font-heading); font-weight: 600; font-size: 11px;
}
.tag-type .ico { width: 12px; height: 12px; }
.tag-appel   { background: color-mix(in srgb, var(--blue-500) 22%, transparent);  color: #a9acda; }
.tag-relance { background: color-mix(in srgb, var(--danger) 20%, transparent);  color: var(--danger-txt); }
.tag-rdv     { background: color-mix(in srgb, var(--green-600) 18%, transparent); color: var(--ok-txt); }
.tag-devis   { background: color-mix(in srgb, var(--amber-500) 18%, transparent); color: var(--warn-txt); }
.tag-email   { background: var(--navy-600);      color: var(--blue-300); }

/* ============================================================
   8 · BANDEAU « MA JOURNÉE » (commercial)
   ============================================================ */
.hello {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  border: 1px solid var(--navy-600); padding: 22px 24px; margin-bottom: 18px;
  background:
    radial-gradient(600px 240px at 92% -40%, color-mix(in srgb, var(--red-600) 28%, transparent), transparent 65%),
    linear-gradient(100deg, var(--navy-700), var(--navy-800));
}
.hello h1 { font-size: 25px; letter-spacing: -.02em; }
.hello p { color: var(--txt-2); margin: 6px 0 0; font-size: 13.5px; }
.hello .quick { display: flex; gap: 22px; margin-top: 18px; flex-wrap: wrap; }
.hello .quick .q { display: flex; align-items: center; gap: 10px; }
.hello .quick .q .ico { width: 17px; height: 17px; color: var(--blue-300); }
.hello .quick .q b { display: block; font-family: var(--font-heading); font-size: 19px; font-weight: 700; color: var(--txt-max); line-height: 1.2; }
.hello .quick .q span { display: block; font-size: 12px; color: var(--txt-2); }

.gauge { display: flex; align-items: center; gap: 14px; }
.gauge .ring { --p: 0; width: 76px; height: 76px; flex: none; border-radius: 50%;
  background: conic-gradient(var(--green-500) calc(var(--p) * 1%), var(--navy-600) 0);
  display: grid; place-items: center; }
.gauge .ring::after {
  content: attr(data-p); width: 58px; height: 58px; border-radius: 50%;
  background: var(--navy-800); display: grid; place-items: center;
  font-family: var(--font-heading); font-weight: 700; font-size: 15px; color: var(--txt-max);
}
.gauge .txt b { display: block; font-family: var(--font-heading); font-size: 17px; color: var(--txt-max); }
.gauge .txt span { font-size: 12.5px; color: var(--txt-2); }

/* ============================================================
   9 · AGENDA & ALERTES
   ============================================================ */
.slot { display: flex; gap: 13px; padding: 11px 18px; border-bottom: 1px solid color-mix(in srgb, var(--navy-600) 55%, transparent); align-items: center; }
.slot:last-child { border-bottom: 0; }
.slot .h {
  font-family: var(--font-heading); font-weight: 700; font-size: 12.5px;
  color: var(--blue-300); min-width: 42px; font-variant-numeric: tabular-nums;
}
.slot .d b { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 13px; color: var(--txt-max); }
.slot .d span { font-size: 11.5px; color: var(--txt-3); }

.alert-row {
  display: flex; gap: 12px; align-items: flex-start; padding: 13px 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--navy-600) 55%, transparent);
}
.alert-row:last-child { border-bottom: 0; }
.alert-row .ico { color: var(--amber-500); margin-top: 2px; }
.alert-row.crit .ico { color: var(--danger-500); }
.alert-row .d b { font-family: var(--font-heading); font-weight: 600; font-size: 13px; color: var(--txt-max); }
.alert-row .d p { margin: 3px 0 0; font-size: 12.5px; color: var(--txt-2); }
.alert-row .go { margin-left: auto; }

.empty { padding: 34px 18px; text-align: center; color: var(--txt-3); }
.empty .ico { width: 30px; height: 30px; margin: 0 auto 10px; color: var(--green-500); }
.empty b { display: block; font-family: var(--font-heading); color: var(--txt-2); font-size: 14px; }

/* ============================================================
   10 · PANNEAU LATÉRAL (fiche commercial / opportunité)
   ============================================================ */
/* ============================================================
   MODE JOUR — les quelques endroits où le sombre était supposé
   ============================================================ */
:root[data-mode="clair"] .topbar,
:root[data-mode="clair"] .sidenav { border-color: var(--navy-600); }
:root[data-mode="clair"] .sidenav { background: var(--navy-950); }
:root[data-mode="clair"] .navlink:hover,
:root[data-mode="clair"] .icon-btn:hover,
:root[data-mode="clair"] .navlink-action:hover { background: var(--blue-50); }
:root[data-mode="clair"] .btn:hover { background: var(--blue-50); }
:root[data-mode="clair"] .searchbar { background: var(--navy-900); }
:root[data-mode="clair"] .tick { background: var(--navy-950); }
:root[data-mode="clair"] .cell-input,
:root[data-mode="clair"] .field input,
:root[data-mode="clair"] .field select,
:root[data-mode="clair"] .field textarea,
:root[data-mode="clair"] .mini-input { background: var(--navy-950); }
:root[data-mode="clair"] .chip-select { background: var(--navy-950); }
:root[data-mode="clair"] table.tbl tbody tr.clickable:hover { background: var(--blue-50); }
:root[data-mode="clair"] table.tc thead th { background: var(--blue-50); }
:root[data-mode="clair"] .apercu-zone { background: var(--navy-600); }
:root[data-mode="clair"] .kcol .list .empty { color: var(--txt-3); }
:root[data-mode="clair"] .graph .g-lbl { fill: var(--txt-3); }
:root[data-mode="clair"] .graph .g-val { fill: var(--txt-2); }
:root[data-mode="clair"] .br-c,
:root[data-mode="clair"] .br-l,
:root[data-mode="clair"] .br-piste,
:root[data-mode="clair"] .br-att { background: var(--navy-800); }
:root[data-mode="clair"] .drawer-bg,
:root[data-mode="clair"] .modal-bg { background: rgba(28,23,57,.42); }
:root[data-mode="clair"] .pi { box-shadow: 0 8px 18px -12px rgba(28,23,57,.5); }
:root[data-mode="clair"] .login-card,
:root[data-mode="clair"] .modal { box-shadow: 0 30px 70px -34px rgba(28,23,57,.45); }
:root[data-mode="clair"] .avatar,
:root[data-mode="clair"] .btn.accent,
:root[data-mode="clair"] .btn-primary { color: #fff; }

.drawer-bg {
  position: fixed; inset: 0; background: rgba(4,6,18,.62); z-index: 60;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.drawer-bg.is-on { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 92vw); z-index: 61;
  background: var(--navy-800); border-left: 1px solid var(--navy-600);
  transform: translateX(100%); transition: transform .25s cubic-bezier(.2,.7,.3,1);
  display: flex; flex-direction: column;
}
.drawer.is-on { transform: none; }
.drawer > header {
  display: flex; align-items: center; gap: 12px; padding: 18px;
  border-bottom: 1px solid var(--navy-700); flex: none;
}
.drawer > header h2 { font-size: 16px; }
.drawer > header .sub { font-size: 12.5px; color: var(--txt-3); }
.drawer > .body { padding: 18px; overflow-y: auto; flex: 1 1 auto; display: grid; gap: 16px; }
.drawer .close { margin-left: auto; }
.mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mini-stat { background: var(--navy-900); border: 1px solid var(--navy-600); border-radius: var(--r-md); padding: 12px; }
.mini-stat b { display: block; font-family: var(--font-heading); font-weight: 700; font-size: 18px; color: var(--txt-max); }
.mini-stat span { font-size: 11.5px; color: var(--txt-3); }
.sec-title {
  font-family: var(--font-heading); font-weight: 600; font-size: 11.5px;
  letter-spacing: .07em; text-transform: uppercase; color: var(--txt-3); margin-bottom: 9px;
}
.drawer .card { background: var(--navy-900); }

/* ============================================================
   11 · TOAST
   ============================================================ */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px);
  background: var(--navy-700); border: 1px solid var(--navy-500);
  border-radius: var(--r-pill); padding: 11px 20px; z-index: 80;
  font-family: var(--font-heading); font-weight: 600; font-size: 13px;
  display: flex; align-items: center; gap: 9px;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  box-shadow: 0 20px 40px -20px rgba(0,0,0,.9);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.toast .ico { color: var(--green-500); }

/* ============================================================
   12 · FENÊTRE MODALE
   ============================================================ */
.modal-bg {
  position: fixed; inset: 0; background: rgba(4,6,18,.68); z-index: 70;
  opacity: 0; pointer-events: none; transition: opacity .18s;
}
.modal-bg.is-on { opacity: 1; pointer-events: auto; }
.modal {
  position: fixed; z-index: 71; top: 50%; left: 50%;
  width: min(var(--largeur, 520px), calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  transform: translate(-50%, -46%) scale(.98); opacity: 0; pointer-events: none;
  background: var(--navy-800); border: 1px solid var(--navy-600);
  border-radius: 18px; box-shadow: 0 40px 90px -40px rgba(0,0,0,.95);
  display: flex; flex-direction: column;
  transition: opacity .18s, transform .18s cubic-bezier(.2,.7,.3,1);
}
.modal.is-on { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.modal > header {
  display: flex; align-items: flex-start; gap: 12px; flex: none;
  padding: 18px 20px; border-bottom: 1px solid var(--navy-700);
}
.modal > header h2 { font-size: 16px; }
.modal > header .sub { font-size: 12.5px; color: var(--txt-3); margin-top: 3px; }
.modal > header .icon-btn { margin-left: auto; }
.modal > .body { padding: 18px 20px; overflow-y: auto; flex: 1 1 auto; }
.modal > footer {
  display: flex; justify-content: flex-end; gap: 9px; flex: none;
  padding: 14px 20px; border-top: 1px solid var(--navy-700);
}

/* ============================================================
   13 · FORMULAIRES
   ============================================================ */
.grid-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.field textarea {
  width: 100%; background: var(--navy-900); border: 1px solid var(--navy-500);
  border-radius: var(--r-sm); padding: 11px 12px; outline: 0; resize: vertical;
  font-family: var(--font-body); font-size: 13.5px; line-height: 1.55;
}
.field textarea:focus { border-color: var(--blue-500); }
.field textarea::placeholder, .field input::placeholder { color: var(--txt-3); }
.field .aide { font-size: 11.5px; color: var(--txt-3); margin-top: 5px; line-height: 1.5; }
.field.mini { margin-bottom: 0; }
.field.mini label { font-size: 10.5px; margin-bottom: 4px; }
.field.mini select { padding: 7px 10px; font-size: 12.5px; }
.aide { font-size: 11.5px; color: var(--txt-3); margin-top: 10px; line-height: 1.55; }
.champ-couleur { display: flex; align-items: center; gap: 10px; }
.champ-couleur input[type="color"] {
  width: 46px; height: 34px; padding: 2px; border-radius: var(--r-sm);
  border: 1px solid var(--navy-500); background: var(--navy-900); cursor: pointer;
}
.champ-couleur code { font-size: 12px; color: var(--txt-2); }
.mini-input {
  width: 58px; background: var(--navy-900); border: 1px solid var(--navy-500);
  border-radius: 6px; padding: 2px 6px; font-size: 12px; text-align: right;
}
.bandeau-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 16px; }
.sep-h { height: 1px; background: var(--navy-700); margin: 4px 0; }
.txt-alerte { color: var(--danger-txt); }
.tiny-badge { font-size: 9.5px; padding: 1px 6px; vertical-align: middle; }
.flip { transform: rotate(180deg); }

/* ============================================================
   14 · TABLEAU DE L'ÉQUIPE (agrandi)
   ============================================================ */
.carte-equipe { margin-bottom: 16px; }
.tbl-equipe td { padding: 15px 18px; }
.tbl-equipe td.gros { font-family: var(--font-heading); font-weight: 600; font-size: 16px; color: var(--txt-max); }
.tbl-equipe .sous { font-family: var(--font-body); font-weight: 400; font-size: 11px; color: var(--txt-3); margin-top: 3px; }
.tbl-equipe .sous.up { color: var(--ok-txt); }
.tbl-equipe .sous.down { color: var(--danger-txt); }
th.triable { cursor: pointer; user-select: none; }
th.triable:hover { color: var(--blue-300); }
th.tri-actif { color: var(--txt-max); }
th.tri-actif::after { content: ' ↓'; color: var(--red-500); }
.carte-com { cursor: pointer; transition: border-color .15s, transform .1s; }
.carte-com:hover { border-color: var(--blue-500); transform: translateY(-2px); }

/* ============================================================
   15 · PISTES STRATÉGIQUES
   ============================================================ */
.piste { padding: 15px 18px; border-bottom: 1px solid color-mix(in srgb, var(--navy-600) 55%, transparent); border-left: 3px solid transparent; }
.piste:last-child { border-bottom: 0; }
.piste-critique { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger) 5%, transparent); }
.piste-attention { border-left-color: var(--amber-500); }
.piste-info { border-left-color: var(--blue-500); }
.piste-bon { border-left-color: var(--green-600); }
.p-tete { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.p-tete b { font-family: var(--font-heading); font-size: 13.5px; color: var(--txt-max); flex: 1; min-width: 200px; }
.p-tete .ico { color: var(--txt-2); }
.piste-critique .p-tete .ico { color: var(--danger-500); }
.piste-bon .p-tete .ico { color: var(--green-500); }
.p-constat { margin: 7px 0 0; font-size: 12.5px; color: var(--txt-2); line-height: 1.55; }
.p-action { display: flex; gap: 8px; margin: 9px 0 0; font-size: 12.5px; color: var(--txt-fort); line-height: 1.55; }
.p-action .ico { width: 14px; height: 14px; margin-top: 3px; flex: none; color: var(--blue-300); }
.p-impact { margin-top: 8px; font-size: 11.5px; color: var(--txt-3); }
.p-impact b { color: var(--blue-300); font-family: var(--font-heading); }

/* ============================================================
   16 · POST-IT
   ============================================================ */
.pi-mur { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.pi {
  position: relative; border-radius: 3px 3px 10px 3px; padding: 14px 14px 12px;
  color: #2a2410; box-shadow: 0 10px 22px -14px rgba(0,0,0,.9);
  display: flex; flex-direction: column; gap: 8px; min-height: 140px;
  transform: rotate(-.4deg);
}
.pi:nth-child(even) { transform: rotate(.5deg); }
.pi-jaune { background: linear-gradient(160deg, #ffe9a3, #f7d365); }
.pi-rose  { background: linear-gradient(160deg, #ffc9d4, #f79bad); }
.pi-bleu  { background: linear-gradient(160deg, #bfe0ff, #8fc4f7); }
.pi-vert  { background: linear-gradient(160deg, #c6f0d2, #93dcaa); }
.pi-close { opacity: .55; filter: saturate(.5); }
.pi-tete { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; }
.pi-qui { display: flex; align-items: center; gap: 6px; font-family: var(--font-heading); }
.pi-qui .avatar { width: 20px; height: 20px; font-size: 9px; }
.pi-date { margin-left: auto; opacity: .7; white-space: nowrap; }
.pi-date.pi-retard { color: #a8241c; opacity: 1; }
.pi-texte { margin: 0; font-size: 13px; line-height: 1.5; font-weight: 500; flex: 1; }
.pi-client { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; opacity: .75; }
.pi-client .ico { width: 13px; height: 13px; }
.pi-reponse {
  display: flex; gap: 6px; font-size: 11.5px; font-style: italic;
  background: rgba(255,255,255,.45); border-radius: 6px; padding: 6px 8px;
}
.pi-reponse .ico { width: 13px; height: 13px; flex: none; margin-top: 2px; }
.pi-pied { display: flex; align-items: center; gap: 6px; }
.pi-pied .btn {
  background: rgba(0,0,0,.12); border-color: rgba(0,0,0,.18); color: #2a2410;
}
.pi-pied .btn:hover { background: rgba(0,0,0,.2); color: #000; }
.pi-fini { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; opacity: .7; }
.pi-fini .ico { width: 14px; height: 14px; }

/* ============================================================
   17 · ANALYSE
   ============================================================ */
.periode-switch { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.kpis-8 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.kpis-8 .kpi .val { font-size: 22px; }
.graph { width: 100%; height: auto; display: block; }
.graph .g-val { font-size: 13px; fill: var(--txt-fort); font-family: 'Poppins', sans-serif; font-weight: 600; }
.graph .g-lbl { font-size: 12px; fill: #6a71a8; font-family: 'Mulish', sans-serif; }
.graph-note { font-size: 12px; color: var(--txt-2); margin-top: 10px; line-height: 1.6; }
.graph-note b { color: var(--txt-max); }
.barres-obj { display: grid; gap: 13px; }
.bo-l { display: grid; grid-template-columns: 86px 1fr 62px 42px; align-items: center; gap: 10px; }
.bo-nom { font-family: var(--font-heading); font-size: 12.5px; color: var(--txt-2); }
.bo-val { font-family: var(--font-heading); font-size: 12.5px; color: var(--txt-max); text-align: right; }
.bo-pct { font-size: 12px; color: var(--txt-3); text-align: right; }

.croise-barre {
  display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 12px; margin-bottom: 16px;
}
.tc-wrap { overflow-x: auto; border: 1px solid var(--navy-600); border-radius: var(--r-md); }
table.tc { min-width: 620px; }
table.tc th, table.tc td { padding: 9px 13px; font-size: 12.5px; }
table.tc thead th { background: var(--navy-900); }
table.tc .tc-l { text-align: left; font-family: var(--font-heading); font-weight: 600; color: var(--txt-max);
  font-size: 12.5px; text-transform: none; letter-spacing: 0; white-space: nowrap; }
table.tc .tc-tot { background: color-mix(in srgb, var(--red-600) 12%, transparent); color: var(--txt-max); font-weight: 700; }
table.tc tfoot td, table.tc tfoot th { border-top: 1px solid var(--navy-500); }

/* ============================================================
   18 · CHARTE CLIENT (paramètres)
   ============================================================ */
.logo-zone { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 18px; flex-wrap: wrap; }
.logo-box {
  width: 168px; height: 92px; flex: none; border-radius: var(--r-md);
  border: 1px dashed var(--navy-500); background: #fff;
  display: grid; place-items: center; overflow: hidden; padding: 10px;
}
.logo-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-box span { color: #9aa1b4; font-size: 12px; }
.logo-zone .btn { margin-right: 8px; }

.brand-preview { background: #fff; border-radius: var(--r-md); overflow: hidden; color: #1a1a1a; }
.bp-bandeau {
  background: var(--c1); padding: 14px 18px; display: flex; align-items: center; gap: 12px;
}
.bp-bandeau img { max-height: 34px; max-width: 160px; object-fit: contain; }
.bp-nom { color: #fff; font-weight: 700; font-size: 17px; letter-spacing: .02em; }
.bp-tag {
  margin-left: auto; color: #fff; opacity: .85; font-size: 12px;
  letter-spacing: .22em; text-transform: uppercase;
}
.bp-corps { padding: 18px; }
.bp-titre { color: var(--c2); font-size: 19px; font-weight: 700; }
.bp-sous { color: #555; font-size: 13px; margin-top: 2px; }
.bp-ligne { height: 3px; width: 54px; background: var(--c1); margin: 12px 0; border-radius: 2px; }
.bp-txt { color: #777; font-size: 12.5px; }

/* ============================================================
   19 · ÉDITEUR DE DEVIS
   ============================================================ */
.devis-edit { display: grid; grid-template-columns: 1.7fr 1fr; gap: 16px; align-items: start; }
.scroll-x { overflow-x: auto; }
.devis-lignes { min-width: 720px; }
.devis-lignes td { padding: 9px 10px; vertical-align: middle; }
.devis-lignes th { padding: 10px 10px; }
.devis-lignes td.num b { white-space: nowrap; }
.devis-lignes input[type="number"] { -moz-appearance: textfield; }
.devis-lignes input[type="number"]::-webkit-outer-spin-button,
.devis-lignes input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.devis-lignes select.cell-input { padding-right: 22px; }
.cell-input {
  width: 100%; background: var(--navy-900); border: 1px solid var(--navy-600);
  border-radius: 7px; padding: 7px 9px; font-size: 13px; outline: 0;
}
.cell-input:focus { border-color: var(--blue-500); }
.cell-input.fort { font-family: var(--font-heading); font-weight: 600; color: var(--txt-max); }
.cell-input.petit { margin-top: 5px; font-size: 12px; color: var(--txt-2); }
.cell-input.num { text-align: right; font-variant-numeric: tabular-nums; }
.tot-l {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px dashed var(--navy-600); font-size: 13px; color: var(--txt-2);
}
.tot-l:last-child { border-bottom: 0; }
.tot-l b { font-family: var(--font-heading); color: var(--txt-max); font-variant-numeric: tabular-nums; }
.tot-l.grand { border-bottom: 0; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--navy-500); }
.tot-l.grand span, .tot-l.grand b { font-size: 16px; color: var(--txt-max); font-family: var(--font-heading); font-weight: 700; }
.actions-devis { display: grid; gap: 9px; }
.actions-devis .btn { width: 100%; justify-content: center; }
.actions-devis .btn[disabled] { opacity: .45; pointer-events: none; }

/* ============================================================
   20 · DOCUMENT A4
   ============================================================ */
.apercu-zone {
  background: #6b7185; padding: 14px; border-radius: var(--r-md); overflow-x: auto; margin-bottom: 14px;
}
.devis-a4 {
  width: 794px; min-height: 700px; background: #fff; color: #24242c;
  padding: 42px 46px 34px; font-size: 12px; line-height: 1.5;
  transform-origin: top left;
}
.apercu-zone .devis-a4 { transform: scale(.49); width: 794px; margin-bottom: -46%; }
.devis-a4 .d-tete { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; }
.devis-a4 .d-logo { max-height: 62px; max-width: 240px; object-fit: contain; }
.devis-a4 .d-nom { font-size: 26px; font-weight: 700; color: var(--c2); letter-spacing: -.01em; }
.devis-a4 .d-baseline { color: #6b7185; font-size: 11.5px; margin-top: 4px; }
.devis-a4 .d-coord { text-align: right; font-size: 11px; color: #4b5165; line-height: 1.65; }
.devis-a4 .d-coord b { color: var(--c2); }
.devis-a4 .d-bandeau {
  margin: 26px 0 22px; background: var(--c1); color: #fff;
  padding: 11px 18px; display: flex; align-items: baseline; gap: 14px; border-radius: 4px;
}
.devis-a4 .d-type { font-size: 15px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.devis-a4 .d-num { font-size: 15px; font-weight: 700; }
.devis-a4 .d-date { margin-left: auto; font-size: 11.5px; opacity: .9; }
.devis-a4 .d-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.devis-a4 .d-bloc { border: 1px solid #e1e4ec; border-radius: 5px; padding: 13px 15px; font-size: 11.5px; line-height: 1.65; }
.devis-a4 .d-client { border-color: var(--c1); }
.devis-a4 .d-eti {
  font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--c1); font-weight: 700; margin-bottom: 6px;
}
.devis-a4 .d-suivi { display: block; margin-top: 7px; color: #6b7185; font-size: 10.5px; }
.devis-a4 .d-objet {
  margin: 18px 0 14px; padding: 10px 14px; background: #f4f5fa;
  border-left: 3px solid var(--c1); border-radius: 3px; font-size: 12.5px;
}
.devis-a4 .d-objet span {
  font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--c1); font-weight: 700; margin-right: 8px;
}
.devis-a4 .d-table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.devis-a4 .d-table th {
  background: var(--c2); color: #fff; font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; padding: 9px 10px; text-align: left; font-weight: 600;
}
.devis-a4 .d-table td { padding: 10px; border-bottom: 1px solid #e8eaf1; vertical-align: top; font-size: 11.5px; }
.devis-a4 .d-table tr:nth-child(even) td { background: #fafbfd; }
.devis-a4 .d-detail { color: #6b7185; font-size: 10.5px; margin-top: 3px; }
.devis-a4 .c { text-align: center; }
.devis-a4 .r { text-align: right; white-space: nowrap; }
.devis-a4 .d-bas { display: grid; grid-template-columns: 1.25fr 1fr; gap: 22px; margin-top: 22px; }
.devis-a4 .d-conditions { font-size: 11px; color: #4b5165; line-height: 1.6; }
.devis-a4 .d-conditions p { margin: 0 0 7px; }
.devis-a4 .d-rib { margin-top: 10px; padding: 8px 10px; background: #f4f5fa; border-radius: 4px; font-size: 10.5px; }
.devis-a4 .d-totaux { width: 100%; border-collapse: collapse; font-size: 12px; }
.devis-a4 .d-totaux td { padding: 7px 10px; border-bottom: 1px solid #e8eaf1; }
.devis-a4 .d-totaux .d-ttc td {
  background: var(--c1); color: #fff; font-weight: 700; font-size: 14px; border: 0;
}
.devis-a4 .d-signature { margin-top: 26px; }
.devis-a4 .d-sign-zone {
  border: 1px dashed #b9bfd0; border-radius: 5px; height: 92px;
  padding: 9px 12px; color: #9aa1b4; font-size: 10.5px;
}
.devis-a4 .d-mentions { margin-top: 20px; font-size: 9.5px; color: #8189a0; line-height: 1.6; }
.devis-a4 .d-pied {
  margin-top: 14px; padding-top: 10px; border-top: 1px solid #e1e4ec;
  text-align: center; font-size: 9px; color: #9aa1b4;
}

#print-area { display: none; }
@media print {
  body.mode-impression > *:not(#print-area) { display: none !important; }
  body.mode-impression { background: #fff; }
  #print-area { display: block !important; }
  .devis-a4 { width: 100%; padding: 0; }
  @page { size: A4; margin: 14mm; }
}

/* ============================================================
   21 · MAIL DE RELANCE
   ============================================================ */
.mail-ctx { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.mail-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 4px; }

/* ============================================================
   22 · RELANCE PRÉ-RÉDIGÉE
   ============================================================ */
.relance-prete {
  margin-top: 10px; padding: 11px 13px; border-radius: var(--r-md);
  background: linear-gradient(140deg, color-mix(in srgb, var(--blue-500) 20%, transparent), color-mix(in srgb, var(--blue-600) 8%, transparent));
  border: 1px solid var(--navy-500);
}
.rp-tete { display: flex; align-items: center; gap: 8px; }
.rp-tete .ico { width: 15px; height: 15px; color: var(--blue-300); }
.rp-tete b { font-family: var(--font-heading); font-size: 12.5px; color: var(--txt-max); }
.rp-objet {
  margin-top: 7px; font-family: var(--font-heading); font-weight: 600;
  font-size: 12.5px; color: var(--blue-300);
}
.rp-extrait { margin: 4px 0 0; font-size: 12.5px; color: var(--txt-2); line-height: 1.55; }
.rp-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }

.navlink-action { color: var(--blue-300); }
.navlink-action:hover { background: var(--navy-800); color: var(--txt-max); }
.topbtn-terrain { flex: none; }
.sans-defilement { overflow: hidden; }

/* ============================================================
   23 · BRIEF DU LUNDI
   ============================================================ */
.brief {
  position: fixed; inset: 0; z-index: 90; display: none; flex-direction: column;
  background:
    radial-gradient(1100px 600px at 85% -10%, color-mix(in srgb, var(--blue-600) 50%, transparent), transparent 62%),
    radial-gradient(800px 500px at 0% 110%, color-mix(in srgb, var(--red-600) 22%, transparent), transparent 60%),
    var(--navy-950);
}
.brief.is-on { display: flex; }
.br-tete {
  display: flex; align-items: center; gap: 14px; flex: none;
  padding: 16px 26px; border-bottom: 1px solid var(--navy-700);
}
.br-tete .brand { display: flex; align-items: center; gap: 9px; }
.br-tete .brand img { height: 22px; }
.br-tete .brand .name { font-family: var(--font-logo); font-weight: 700; font-size: 15px; color: var(--txt-max); }
.br-pos {
  font-family: var(--font-heading); font-size: 12.5px; color: var(--txt-3);
  border: 1px solid var(--navy-600); border-radius: var(--r-pill); padding: 3px 11px;
}
.br-scene { flex: 1 1 auto; overflow-y: auto; display: flex; align-items: center; justify-content: center; padding: 26px; }
.br-slide { width: 100%; max-width: 1180px; animation: br-entree .28s ease both; }
@keyframes br-entree { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.br-eyebrow {
  font-family: var(--font-heading); font-size: 12.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--blue-300); margin-bottom: 14px;
}
.br-h1 { font-size: clamp(38px, 6vw, 68px); line-height: 1.05; letter-spacing: -.03em; color: var(--txt-max); font-weight: 700; }
.br-h2 {
  font-size: clamp(24px, 3.4vw, 36px); letter-spacing: -.02em; color: var(--txt-max);
  margin-bottom: 24px; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
}
.br-h2 .br-sous { font-size: 15px; font-weight: 500; color: var(--blue-300); font-family: var(--font-body); }
.br-chapo { font-size: 17px; color: var(--txt-2); margin: 14px 0 34px; }
.br-chiffres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.br-c {
  background: color-mix(in srgb, var(--navy-800) 72%, transparent); border: 1px solid var(--navy-600);
  border-radius: var(--r-lg); padding: 20px;
}
.br-c b { display: block; font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(24px, 2.6vw, 34px); color: var(--txt-max); letter-spacing: -.02em; }
.br-c span { display: block; font-size: 13px; color: var(--txt-2); margin-top: 5px; }
.br-c i { display: block; font-style: normal; font-size: 12px; color: var(--txt-3); margin-top: 9px; }
.br-c i.up { color: var(--ok-txt); } .br-c i.down { color: var(--danger-txt); }
.br-c.br-rouge { border-color: color-mix(in srgb, var(--danger) 55%, transparent); }
.br-c.br-rouge b { color: var(--danger-txt); }

.br-classement { display: grid; gap: 12px; }
.br-l {
  display: grid; grid-template-columns: 44px 46px 1fr 2fr auto 72px;
  align-items: center; gap: 16px; padding: 14px 18px;
  background: color-mix(in srgb, var(--navy-800) 68%, transparent); border: 1px solid var(--navy-600); border-radius: var(--r-lg);
}
.br-premier { border-color: var(--blue-500); background: color-mix(in srgb, var(--blue-600) 30%, transparent); }
.br-rang { font-family: var(--font-heading); font-weight: 700; font-size: 26px; color: var(--txt-3); text-align: center; }
.br-premier .br-rang { color: var(--red-500); }
.br-nom b { display: block; font-family: var(--font-heading); font-size: 16px; color: var(--txt-max); }
.br-nom span { font-size: 12.5px; color: var(--txt-3); }
.br-jauge .bar { height: 10px; }
.br-ca { text-align: right; }
.br-ca b { display: block; font-family: var(--font-heading); font-size: 17px; color: var(--txt-max); }
.br-ca span { font-size: 12px; color: var(--txt-3); }
.br-pct { font-family: var(--font-heading); font-weight: 700; font-size: 21px; text-align: right; color: var(--blue-300); }
.br-pct.ok { color: var(--ok-txt); } .br-pct.warn { color: var(--danger-txt); }

.br-pistes { display: grid; gap: 16px; }
.br-piste {
  display: grid; grid-template-columns: 56px 1fr; gap: 18px; align-items: start;
  background: color-mix(in srgb, var(--navy-800) 68%, transparent); border: 1px solid var(--navy-600);
  border-left-width: 4px; border-radius: var(--r-lg); padding: 20px 22px;
}
.br-piste.br-critique { border-left-color: var(--danger); }
.br-piste.br-attention { border-left-color: var(--amber-500); }
.br-piste.br-info { border-left-color: var(--blue-500); }
.br-piste.br-bon { border-left-color: var(--green-600); }
.br-num { font-family: var(--font-heading); font-weight: 700; font-size: 34px; color: var(--navy-500); line-height: 1; }
.br-piste-tete { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.br-piste-tete b { font-family: var(--font-heading); font-size: 19px; color: var(--txt-max); }
.br-piste-tete .ico { color: var(--txt-2); }
.br-constat { margin: 9px 0 0; font-size: 15px; color: var(--txt-2); line-height: 1.55; }
.br-todo { display: flex; gap: 10px; margin: 12px 0 0; font-size: 15px; color: var(--txt-fort); line-height: 1.55; }
.br-todo .ico { width: 16px; height: 16px; margin-top: 4px; flex: none; color: var(--blue-300); }
.br-impact { margin-top: 10px; font-size: 13px; color: var(--txt-3); }
.br-impact b { color: var(--blue-300); font-family: var(--font-heading); }

.br-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.br-table th {
  text-align: left; font-family: var(--font-heading); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--txt-3); padding: 10px 14px; border-bottom: 1px solid var(--navy-600);
}
.br-table td { padding: 14px; border-bottom: 1px solid color-mix(in srgb, var(--navy-600) 60%, transparent); color: var(--txt-2); }
.br-table td b { color: var(--txt-max); font-family: var(--font-heading); }
.br-decision { color: var(--blue-300); font-size: 13.5px; }

.br-attentes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.br-att {
  background: color-mix(in srgb, var(--navy-800) 68%, transparent); border: 1px solid var(--navy-600);
  border-radius: var(--r-lg); padding: 18px 20px;
}
.br-att ul { margin: 14px 0 0; padding-left: 18px; display: grid; gap: 7px; }
.br-att li { font-size: 14px; color: var(--txt-2); line-height: 1.5; }
.br-rouge-txt { color: var(--danger-txt) !important; }

.br-pied {
  display: flex; align-items: center; gap: 16px; flex: none;
  padding: 14px 26px; border-top: 1px solid var(--navy-700);
}
.br-pied .btn[disabled] { opacity: .35; pointer-events: none; }
.br-points { flex: 1; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.br-point {
  background: transparent; border: 1px solid var(--navy-600); color: var(--txt-3);
  border-radius: var(--r-pill); padding: 5px 13px; cursor: pointer;
  font-family: var(--font-heading); font-size: 11.5px; transition: all .15s;
}
.br-point:hover { border-color: var(--blue-500); color: var(--txt-max); }
.br-point.is-on { background: var(--gradient-brand); border-color: transparent; color: #fff; }

/* ============================================================
   24 · MODE TERRAIN
   ============================================================ */
.terrain {
  position: fixed; inset: 0; z-index: 92; display: none; flex-direction: column;
  background:
    radial-gradient(900px 500px at 50% -20%, color-mix(in srgb, var(--blue-600) 55%, transparent), transparent 62%),
    var(--navy-950);
}
.terrain.is-on { display: flex; }
.tr-tete {
  display: flex; align-items: center; gap: 12px; flex: none;
  padding: 14px 20px; border-bottom: 1px solid var(--navy-700);
}
.tr-tete .brand { display: flex; align-items: center; gap: 9px; }
.tr-tete .brand img { height: 20px; }
.tr-tete .brand .name { font-family: var(--font-logo); font-weight: 700; font-size: 15px; color: var(--txt-max); }
.tr-tete .icon-btn { margin-left: auto; }
.tr-scene {
  flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column;
  gap: 20px; padding: 22px 20px 28px; max-width: 560px; width: 100%; margin-inline: auto;
}

.tr-compteur { display: flex; flex-direction: column; gap: 9px; }
.tr-compteur span { font-family: var(--font-heading); font-size: 13px; color: var(--txt-3); }
.tr-progression { height: 5px; border-radius: var(--r-pill); background: var(--navy-700); overflow: hidden; }
.tr-progression i { display: block; height: 100%; background: var(--gradient-brand-soft); transition: width .3s; }

.tr-carte {
  background: var(--navy-800); border: 1px solid var(--navy-600);
  border-radius: 20px; padding: 24px 22px; text-align: center;
}
.tr-etiquette {
  display: inline-block; border-radius: var(--r-pill); padding: 5px 14px;
  font-family: var(--font-heading); font-weight: 700; font-size: 12.5px; margin-bottom: 16px;
}
.tr-chaud { background: color-mix(in srgb, var(--danger) 22%, transparent); color: var(--danger-txt); }
.tr-jour { background: color-mix(in srgb, var(--amber-500) 20%, transparent); color: var(--warn-txt); }
.tr-tiede { background: var(--navy-600); color: var(--blue-300); }
.tr-client { font-size: clamp(26px, 7vw, 34px); line-height: 1.15; color: var(--txt-max); letter-spacing: -.02em; }
.tr-contact { font-size: 15px; color: var(--txt-2); margin-top: 7px; }

.tr-numero {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 22px 0 18px; padding: 20px 16px; border-radius: 16px;
  background: var(--gradient-brand); color: #fff;
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(24px, 6.5vw, 32px); letter-spacing: .02em;
  box-shadow: 0 18px 34px -18px color-mix(in srgb, var(--red-600) 80%, transparent);
}
.tr-numero .ico { width: 26px; height: 26px; stroke-width: 2; flex: none; }
.tr-numero:active { transform: scale(.985); }

.tr-motif { text-align: left; background: var(--navy-900); border-radius: var(--r-md); padding: 14px 16px; }
.tr-motif-t { font-family: var(--font-heading); font-weight: 600; font-size: 15px; color: var(--txt-max); }
.tr-motif p { margin: 6px 0 0; font-size: 13.5px; color: var(--txt-2); line-height: 1.55; }

.tr-boutons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tr-b {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  padding: 18px 8px; border-radius: 16px; cursor: pointer;
  background: var(--navy-800); border: 1px solid var(--navy-600); color: var(--txt-2);
  font-family: var(--font-heading); font-weight: 600; font-size: 13px;
  transition: transform .1s, border-color .15s, color .15s;
}
.tr-b .ico { width: 24px; height: 24px; }
.tr-b:active { transform: scale(.97); }
.tr-ok { border-color: color-mix(in srgb, var(--green-600) 50%, transparent); color: var(--ok-txt); }
.tr-ok:hover { background: color-mix(in srgb, var(--green-600) 16%, transparent); }
.tr-repousser:hover { border-color: var(--amber-500); color: var(--warn-txt); }
.tr-passer:hover { border-color: var(--blue-500); color: var(--txt-max); }

.tr-fin { text-align: center; padding: 50px 20px; }
.tr-fin .ico { width: 54px; height: 54px; color: var(--green-500); margin: 0 auto 18px; }
.tr-fin h2 { font-size: 24px; color: var(--txt-max); }
.tr-fin p { color: var(--txt-2); margin: 10px 0 24px; }

/* Impression du brief : une page par écran */
.impression-brief .br-page { page-break-after: always; padding: 0 0 24px; }
.impression-brief .br-page:last-child { page-break-after: auto; }

/* ============================================================
   25 · RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .br-chiffres { grid-template-columns: repeat(2, 1fr); }
  .br-l { grid-template-columns: 34px 40px 1fr auto 62px; }
  .br-l .br-jauge { display: none; }
}
@media (max-width: 860px) {
  .topbtn-terrain span { display: none; }
  .br-tete, .br-pied { padding: 12px 14px; }
  .br-points { display: none; }
  .br-piste { grid-template-columns: 1fr; gap: 8px; }
  .br-num { font-size: 22px; }
  .br-table { font-size: 13px; }
  .br-table th:nth-child(3), .br-table td:nth-child(3) { display: none; }
}
@media (max-width: 1400px) {
  .kpis-8 { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (max-width: 1180px) {
  .kpis, .kpis-8 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .devis-edit { grid-template-columns: 1fr; }
  .croise-barre { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .grid-champs { grid-template-columns: 1fr; }
  .croise-barre { grid-template-columns: 1fr; }
  .modal > .body { padding: 14px; }
  .apercu-zone .devis-a4 { transform: scale(.36); margin-bottom: -64%; }
}
@media (max-width: 860px) {
  .sidenav {
    position: static; width: 100%; min-height: 0; flex-direction: row;
    overflow-x: auto; padding: 10px; border-right: 0; border-bottom: 1px solid var(--navy-700);
  }
  .sidenav .group, .sidenav .foot { display: none; }
  .navlink { width: auto; white-space: nowrap; }
  .shell { flex-direction: column; }
  .main { padding: 16px 14px 50px; }
  .searchbar { display: none; }
  .who .meta { display: none; }
  .kpis { grid-template-columns: 1fr; }
  .role-pick { grid-template-columns: 1fr; }
}