/* ==========================================================================
   Système de design de l'outil (22/10/2026) — bleu et blanc validés par Thomas.
   Chargé APRÈS les styles de Mon bureau : il redéfinit les jetons (variables) et
   harmonise les composants communs. Aucune fonction n'en dépend : le retirer
   (supprimer la ligne <link href="/design.css">) rend l'ancien aspect.
   Inspirations : Linear (densité calme, Inter), Attio / Folk (CRM clair),
   Stripe (grille de 4 px, chiffres alignés, contrastes AA), Material 3 (barre du bas).
   Police auto-hébergée (licence SIL OFL, /fonts) : aucun appel à Google Fonts (RGPD).
   ========================================================================== */
@font-face{font-family:"Inter Variable";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-latin-opsz-normal.woff2) format("woff2-variations"),url(/fonts/inter-latin-opsz-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter Variable";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-latin-ext-opsz-normal.woff2) format("woff2-variations"),url(/fonts/inter-latin-ext-opsz-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* --- Bleus (une seule teinte, 10 niveaux) --- */
  --blue-25:#f7f9fe; --blue-50:#eef3fd; --blue-100:#dde7fb; --blue-200:#bccff5; --blue-300:#8eaeea;
  --blue-500:#3b66c4; --blue-600:#2550ad; --blue-700:#1b408f; --blue-800:#143272; --blue-900:#0c2a63; --blue-950:#081d46;
  /* --- Gris légèrement bleutés --- */
  --gray-25:#fbfcfe; --gray-50:#f5f7fa; --gray-100:#eef1f6; --gray-200:#e2e7ef; --gray-300:#cdd4e0; --gray-500:#69758b; --gray-600:#526078; --gray-700:#3b475d; --gray-900:#111a2e;

  /* --- Rôles (ce que les écrans utilisent) --- */
  --side:var(--blue-900); --side-2:rgb(255 255 255 / .10); --side-fg:#ffffff; --side-muted:#c3d0ee;
  --brand:var(--blue-900); --accent:var(--blue-700); --accent-soft:var(--blue-50); --sky:#2b8de0;
  --bg:var(--gray-50); --surface:#ffffff; --sunk:var(--gray-50); --line:var(--gray-200); --line-strong:var(--gray-300);
  --fg:var(--gray-900); --muted:var(--gray-600); --subtle:var(--gray-500); --on-accent:#ffffff;
  /* couleurs d'état : texte foncé sur fond très clair, toutes au-dessus de 4,5:1 */
  --late:#b42318; --late-soft:#fdeceb; --warn:#8a4b00; --warn-soft:#fdf1dc; --ok:#0b6b45; --ok-soft:#e3f5ec; --info:var(--blue-700); --info-soft:var(--blue-50);

  /* --- Typographie : Inter partout (titres en optique « Display » automatique) --- */
  --display:"Inter Variable","Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  --body:"Inter Variable","Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  --fs-xs:12px; --fs-sm:13px; --fs-md:14px; --fs-lg:16px; --fs-xl:20px; --fs-2xl:24px; --fs-3xl:30px;
  --lh-tight:1.25; --lh:1.5;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600;

  /* --- Espacements : grille de 4 px --- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px;

  /* --- Formes --- */
  --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-full:999px; --r:var(--r-lg);
  --sh-1:0 1px 2px rgb(16 24 40 / .05);
  --sh-2:0 1px 3px rgb(16 24 40 / .08),0 1px 2px rgb(16 24 40 / .04);
  --sh-3:0 12px 32px -4px rgb(12 42 99 / .16),0 4px 8px -2px rgb(12 42 99 / .06);
  --focus:0 0 0 3px rgb(59 102 196 / .35);
  --t-fast:.12s ease; --tap:44px;
}
/* sombre (si le téléphone est réglé ainsi) : mêmes rôles, valeurs inversées */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --side:#0a1631; --side-2:rgb(255 255 255 / .08); --side-muted:#a9b8db; --accent:#8fb0ff; --accent-soft:#17264a; --bg:#0b1324; --surface:#111c32; --sunk:#0e182c; --line:#24334f; --line-strong:#33446a;
  --fg:#e8edf8; --muted:#a3b0c9; --subtle:#8d9ab5; --on-accent:#0b1324; --late:#ff9c8c; --late-soft:#3a1f1c; --warn:#f3c56b; --warn-soft:#382c14; --ok:#7bdcac; --ok-soft:#163326}}
:root[data-theme="dark"]{--side:#0a1631; --accent:#8fb0ff; --accent-soft:#17264a; --bg:#0b1324; --surface:#111c32; --sunk:#0e182c; --line:#24334f; --fg:#e8edf8; --muted:#a3b0c9; --on-accent:#0b1324}

/* ---------- Base ---------- */
body{font-family:var(--body);font-size:var(--fs-md);line-height:var(--lh);font-optical-sizing:auto;font-feature-settings:"cv11" 1,"ss03" 1,"calt" 1;letter-spacing:-.003em}
h1,h2,h3,.ttl b{font-family:var(--display);letter-spacing:-.018em}
h1{font-size:var(--fs-2xl);font-weight:var(--fw-semibold);line-height:var(--lh-tight)}
h2{font-size:var(--fs-lg);font-weight:var(--fw-semibold)}
h3{font-size:var(--fs-md);font-weight:var(--fw-semibold)}
.ttl b{font-size:var(--fs-xl);font-weight:var(--fw-semibold)}
.ttl span,.sub{color:var(--muted);font-size:var(--fs-sm)}
.meta,.note,.muted{color:var(--muted)}
td,th,.num,.n,.tile b,.kpi b,time{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--blue-500);outline-offset:2px}
::selection{background:var(--blue-100)}

/* ---------- Barre latérale : deux espaces (Direction / Commercial) ---------- */
.side{gap:var(--s-3);padding:var(--s-3) var(--s-2)}
.nav{gap:var(--s-3)}
.nav-g{display:flex;flex-direction:column;gap:2px}
.nav-g+.nav-g{padding-top:var(--s-3);border-top:1px solid rgb(255 255 255 / .12)}
.nav-t{font-size:10.5px;font-weight:var(--fw-semibold);letter-spacing:.06em;text-transform:uppercase;color:var(--side-muted);padding:2px var(--s-2) var(--s-1);text-align:center}
.nav button{border-radius:var(--r-md);color:var(--side-muted);font-size:11px;font-weight:var(--fw-medium)}
.nav button:hover{background:var(--side-2);color:var(--side-fg)}
.nav button[aria-current="page"]{background:rgb(255 255 255 / .16);color:#fff;font-weight:var(--fw-semibold);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .14)}
.nav button[aria-current="page"] .n{background:#fff;color:var(--blue-900)}
.nav .n{background:var(--blue-500);color:#fff}
.nav .deco,.side .deco{color:var(--side-muted)!important}
/* grand écran : barre latérale avec libellés à côté des icônes (Linear, Attio) */
@media (min-width:1440px){
  .app{grid-template-columns:224px minmax(0,1fr)}
  .side{padding:var(--s-4) var(--s-3)}
  .logo{justify-content:flex-start;gap:10px;padding:0 var(--s-2) var(--s-2)}
  .logo div{display:block;font-family:var(--display);font-weight:var(--fw-semibold);font-size:15px;line-height:1.2;color:var(--side-fg)}
  .logo small{color:var(--side-muted)}
  .nav-t{text-align:left;padding:2px var(--s-3) var(--s-1)}
  .nav button{flex-direction:row;justify-content:flex-start;gap:10px;padding:7px var(--s-3);font-size:var(--fs-md);text-align:left;min-height:36px}
  .nav button .lbl{flex:1}
  .nav .n{position:static;font-size:11px}
}

/* ---------- Barre du haut et sous-onglets ---------- */
.top{padding:var(--s-2) var(--s-6);min-height:56px;box-shadow:none}
.search{border-radius:var(--r-md);background:var(--gray-50);border-color:var(--line)}
.search:focus-within{border-color:var(--blue-500);box-shadow:var(--focus);background:var(--surface)}
.sres{border-radius:var(--r-lg);box-shadow:var(--sh-3)}
.new{border-radius:var(--r-md);padding:8px 14px;box-shadow:var(--sh-1)}
.sous{display:flex;gap:var(--s-1);padding:var(--s-2) var(--s-6) 0;background:var(--bg);overflow-x:auto;scrollbar-width:none}
.sous::-webkit-scrollbar{display:none}
.sous button{padding:6px var(--s-3);border-radius:var(--r-full);font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--muted);white-space:nowrap;border:1px solid transparent}
.sous button:hover{color:var(--fg);background:var(--surface);border-color:var(--line)}
.sous button[aria-current="page"]{background:var(--surface);color:var(--accent);border-color:var(--line);box-shadow:var(--sh-1);font-weight:var(--fw-semibold)}
.view{padding:var(--s-4) var(--s-6)}

/* ---------- Cartes, tuiles ---------- */
.card{border-radius:var(--r-lg);border-color:var(--line);box-shadow:var(--sh-1);padding:var(--s-5)}
.tile{border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:var(--s-4) var(--s-5)}
.tile b{font-weight:var(--fw-semibold);font-size:30px;letter-spacing:-.02em}
.tile:hover{border-color:var(--blue-300);box-shadow:var(--sh-2)}
.tile.hot{background:var(--blue-900);border-color:var(--blue-900)}
.tile.hot span{opacity:1;color:#dfe7fb}
.mt-t{border-radius:var(--r-lg)!important;box-shadow:var(--sh-1)}
.mt-t small{opacity:1}
.empty{border-radius:var(--r-lg);color:var(--muted)}

/* ---------- Boutons ---------- */
.btn,.amel{border-radius:var(--r-md);font-weight:var(--fw-medium);min-height:36px;box-shadow:var(--sh-1)}
.btn:hover{border-color:var(--blue-300);color:var(--accent);background:var(--blue-25)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.pri:hover{background:var(--blue-800);border-color:var(--blue-800);filter:none;color:#fff}
.btn.ghost{box-shadow:none}
.btn.danger{color:var(--late);border-color:#f4b7b0}
.btn.danger:hover{background:var(--late-soft)}
.btn:active,.new:active{transform:translateY(.5px)}

/* ---------- Pastilles, segments ---------- */
.pill{border-radius:var(--r-full);font-weight:var(--fw-medium);font-size:var(--fs-xs);padding:2px 8px;background:var(--gray-100);color:var(--gray-700);border-color:transparent}
.pill.late{background:var(--late-soft);color:var(--late)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.blue{background:var(--blue-50);color:var(--blue-700)}
.seg{border-radius:var(--r-md);background:var(--gray-100);border-color:transparent;padding:3px}
.seg button{border-radius:var(--r-sm);color:var(--gray-700);font-size:var(--fs-sm);padding:6px 12px}
.seg button:hover{color:var(--fg);background:rgb(255 255 255 / .6)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--accent);box-shadow:var(--sh-2);font-weight:var(--fw-semibold)}
.seg .c{opacity:1;color:inherit}

/* ---------- Champs ---------- */
.field label,.zone>label{font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--gray-700);letter-spacing:0}
.field input,.field select,.field textarea,.zone textarea{border-radius:var(--r-md);background:var(--surface);border-color:var(--line-strong);min-height:36px}
.field input:focus,.field select:focus,.field textarea:focus,.zone textarea:focus{border-color:var(--blue-500);box-shadow:var(--focus)}
input::placeholder,textarea::placeholder{color:var(--subtle);opacity:1}

/* ---------- Tableaux denses (Stripe, Attio) ---------- */
th{font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--muted);text-transform:none;background:var(--gray-25)}
th,td{padding:8px 10px;border-bottom-color:var(--gray-100)}
tbody tr:hover td{background:var(--blue-25)}
.row{padding:10px 2px;border-top-color:var(--gray-100)}

/* ---------- Panneaux, menus, messages ---------- */
.scrim{background:rgb(8 29 70 / .38);backdrop-filter:blur(2px)}
.drawer{box-shadow:var(--sh-3);border-left:1px solid var(--line)}
.toast{border-radius:var(--r-md);box-shadow:var(--sh-3);background:var(--gray-900);color:#fff}
.toast button{color:#fff}

/* ---------- Contrastes (relevés par l'audit AA du 22/10) ---------- */
.hors{opacity:1!important;color:var(--subtle)!important}
.vt-score,.vt-ech{font-weight:var(--fw-semibold)}

/* ---------- Téléphone ---------- */
@media (max-width:760px){
  body{font-size:15px}
  .field input,.field select,.field textarea,.zone textarea,.search input{font-size:16px}  /* pas de zoom automatique sur iPhone */
  .top{padding:var(--s-2) var(--s-4);min-height:52px}
  .sous{padding:var(--s-2) var(--s-4) 0}
  .view{padding:var(--s-4) var(--s-4) 104px}
  h1{font-size:22px}
  .mobtabs{background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -4px 16px rgb(12 42 99 / .06);padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px))}
  .mobtabs button{color:var(--gray-600);font-size:11px;font-weight:var(--fw-medium);min-height:52px;justify-content:center;gap:3px;border-radius:var(--r-md)}
  .mobtabs button svg.i{width:22px;height:22px;padding:2px 14px;box-sizing:content-box;border-radius:var(--r-full)}
  .mobtabs button[aria-current="page"]{color:var(--blue-900);font-weight:var(--fw-semibold)}
  .mobtabs button[aria-current="page"] svg.i{background:var(--blue-100)}
  .mobtabs .n{background:var(--late);color:#fff;top:2px;right:18%}
  .mobtabs .lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .mob-plus{border-radius:var(--r-lg);box-shadow:var(--sh-3);bottom:calc(76px + env(safe-area-inset-bottom,0px));min-width:220px;max-height:70vh;overflow-y:auto}
  .mob-plus .nav-t{text-align:left;color:var(--muted);padding:8px 12px 2px}
  .mob-plus button{min-height:var(--tap)}
  .card{padding:var(--s-4)}
}
@media (prefers-reduced-motion:no-preference){.btn,.tile,.seg button,.sous button,.nav button,.mobtabs button{transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast),box-shadow var(--t-fast)}}

/* ---------- Marché : chiffres par commune (ancien onglet Communes) ---------- */
.mb-communes{margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--line)}
.mb-communes>div>.head{display:none!important}
.mb-communes-h{display:flex;flex-direction:column;gap:2px}
.view>section.mb-communes{display:flex;flex-direction:column;gap:var(--s-3)}

/* ---------- Sans débordement (audit au clic du 22/10) ---------- */
/* barre latérale large seulement à partir de 1440 px (au-dessous : rail d'icônes, plus de place pour le travail) */
/* kanban : colonnes plus étroites (les 7 colonnes tiennent dès 1680 px) ; au-dessous, la planche défile dans son cadre, comme Pipedrive */
@media (min-width:761px){.vt-kan{grid-auto-columns:minmax(208px,1fr)!important;gap:var(--s-2)!important;overscroll-behavior-x:contain}}
/* panneau élargi quand il contient un large tableau */
@media (min-width:761px){
  .drawer.large{width:min(1180px,calc(100vw - 72px))!important}
  .drawer table th{white-space:normal!important;vertical-align:bottom;line-height:1.25}
  .drawer table td{padding:6px 8px}
  .drawer .pc-tab,.drawer .scroll{overflow-x:visible}
  .drawer.large table{font-size:var(--fs-sm)}
}
/* textes longs (adresses, mails) : coupés proprement au lieu de pousser la mise en page */
.drawer,.card,.view>section{overflow-wrap:anywhere;min-width:0}
.drawer img,.drawer iframe,.drawer pre{max-width:100%}
.drawer pre{white-space:pre-wrap}
/* téléphone : un tableau devient une liste de fiches (nom de colonne + valeur), plus de défilement horizontal */
@media (max-width:760px){
  table.t-fiches,table.t-fiches tbody{display:block;width:100%}
  table.t-fiches thead{display:none}
  table.t-fiches{min-width:0!important;width:100%!important;table-layout:auto}
  table.t-fiches td>*{max-width:100%;min-width:0!important}
  table.t-fiches tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 12px;padding:10px 12px;margin:0 0 8px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
  table.t-fiches td{display:flex;flex-direction:column;gap:0;padding:2px 0!important;border:0!important;white-space:normal!important;text-align:left!important;min-width:0}
  table.t-fiches td::before{content:attr(data-label);font-size:11px;font-weight:var(--fw-medium);color:var(--muted)}
  table.t-fiches td:first-child,table.t-fiches td:nth-child(2){grid-column:auto}
  .pc-tab,.scroll,.eq-scroll{overflow-x:visible!important}
  tbody tr:hover td{background:none}
}
/* tuile « Nouveaux leads » de l'écran du matin : sa classe « new » héritait du style du bouton Action (fond bleu, chiffre vert illisible) */
.mt-t.new{background:var(--surface);color:var(--fg);display:grid;gap:0;margin-left:0;padding:10px 12px;font-weight:inherit;border:1px solid var(--line)}
.mt-t.new::after{content:none!important}
.mt-t.new b{color:var(--ok)}
.mt-t.new:hover{filter:none;border-color:var(--blue-300)}

/* rail d'icônes : les titres d'espace ne doivent pas élargir la barre */
.side{overflow-x:hidden}
@media (max-width:1439px){.nav-t{font-size:9px;letter-spacing:.03em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}