/* ══════════════════════════════════════════════════════════════════════════
   ARCHIVO — auto-heberge, sous-ensemble latin seul (2026-09-07)

   Quatre fichiers, 56 Ko au total, mis en cache definitivement par Caddy.
   Le sous-ensemble latin suffit : sur les 2 770 valeurs de ville, nom, prenom
   et titre de la base, cinq caracteres en sortent (un c accent aigu, un N
   caron, trois ideogrammes dans un pseudo) — ils tombent sur la police
   systeme, invisible sur cinq lignes.

   Aucune dependance externe ajoutee : IBM Plex Sans et Mono continuent de
   venir de Google, comme aujourd'hui, pour les ecrans qui n'ont pas encore
   bascule. Le lien disparaitra au retrait de l'ancien tableau de bord.
   ══════════════════════════════════════════════════════════════════════════ */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('/static/fonts/archivo-400-latin.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500;
  font-display: swap; src: url('/static/fonts/archivo-500-latin.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 600;
  font-display: swap; src: url('/static/fonts/archivo-600-latin.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 700;
  font-display: swap; src: url('/static/fonts/archivo-700-latin.woff2') format('woff2'); }

/* ═══ Société Générale-style institutional UI ═══ */
:root {
 --white: #FFFFFF;
 --grey-50: #F7F8FA;
 --grey-100: #EEF1F5;
 --grey-150: #E1E5EC;
 --grey-200: #CDD3DC;
 --grey-300: #A6ADBA;
 --grey-400: #6F7785;
 --grey-500: #4A515E;
 --grey-700: #2A2F3A;
 --ink: #0F1320;
 --ink-2: #1B2030;
 --red: #E60028;
 --red-2: #B8001F;
 --red-soft: #FDE6EA;
 --green: #007A5E;
 --green-soft: #DCEFE7;
 --orange: #D67900;
 --orange-soft: #FBEED4;
 --blue: #0050B5;
 --blue-soft: #DCE8F6;

 --sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
 --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

 --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
 --s6:24px; --s8:32px; --s10:40px; --s12:48px;

 --radius: 0px;
 --t-fast: 100ms ease-out;

 /* Les trois bandeaux ont disparu au profit du rail (2026-09-07). Les
    hauteurs restent DÉCLARÉES à zéro plutôt que supprimées : douze règles
    calculent `calc(100vh - var(--topbar-h) - var(--tabs-h))`, et les mettre
    à zéro les laisse justes sans réécrire douze endroits — dont trois dans
    des gabarits. */
 --topbar-h: 0px;
 --tabs-h: 0px;
 --rail-w: 200px;
 --sidebar-w: 248px;

 /* Alias --sg-* : les templates admin_*.html appellent ces noms mais aucune
    regle ne les declarait jusqu'ici (var() invalide => transparent/herite).
    Chaque alias pointe vers une variable existante ci-dessus, sans nouvelle
    couleur — --sg-purple excepte, la charte n'a pas de violet et le badge
    coupon/plan "founder" a besoin d'un accent distinct du reste. */
 --sg-blue: var(--blue);
 --sg-red: var(--red);
 --sg-green: var(--green);
 --sg-orange: var(--orange);
 --sg-gray: var(--grey-400);
 --sg-purple: var(--ink-2);
 --sg-text: var(--ink);
 --sg-text-2: var(--grey-500);
 --sg-text-muted: var(--grey-400);
 --sg-border: var(--grey-150);
 --sg-bg-2: var(--grey-50);
 --sg-bg-3: var(--grey-100);

 /* ── Les jetons appelés par les gabarits, enfin déclarés (2026-09-08) ────
    Même famille que les alias --sg-* ci-dessus, en beaucoup plus gros.
    Les écrans de réglages, d'administration, la fiche annonce et Ventes
    comparables appellent depuis toujours ces noms-là, TOUJOURS avec une
    valeur de repli : `var(--text-2, #6e7280)`. Aucun n'était déclaré, donc
    le repli gagnait à chaque fois. Résultat : 197 déclarations que le
    système ne gouvernait pas — redéfinir la charte n'avait aucun effet sur
    elles.

    Ils sont déclarés ici À LEUR VALEUR ACTUELLE, volontairement. Le but de
    ce lot est de rendre ces 197 déclarations pilotables depuis un seul
    endroit, PAS de changer un pixel en production. Les aligner sur la
    charte est le geste suivant, et il se décide avec les chiffres ci-dessous
    sous les yeux.

    Pourquoi chacun n'est PAS un alias de la charte, mesuré le 2026-09-08 :

    --text-2  84 appels. `var(--grey-400)` (#6F7785) est à 1,6 % — invisible,
              MAIS le contraste tombe de 4,79:1 à 4,51:1 sur blanc, et
              surtout de 4,59:1 à 4,32:1 sur #fafafa et de 4,51:1 à 4,25:1
              sur --grey-50, deux fonds très employés. L'alias ferait passer
              le texte secondaire SOUS le seuil AA de 4,5:1 sur ces fonds.
              À trancher en corrigeant --grey-400, pas en aliasant ici.

    --text-3  22 appels. AUCUN équivalent dans la charte : elle saute de
              --grey-400 (#6F7785) à --grey-300 (#A6ADBA), et #9097a0 tombe
              entre les deux. L'aliaser sur --grey-300 le déplace de 9,2 % et
              fait chuter le contraste de 2,95:1 à 2,26:1. C'est le seul
              jeton d'ici qui introduit une couleur : soit la charte gagne un
              gris à ce niveau, soit le troisième niveau de texte disparaît.
              Décision de design, pas de normalisation.

    --line    78 appels. `var(--grey-150)` (#E1E5EC) est à 1,45 % : aliasable
              sans risque le jour voulu. Il ne l'est pas encore parce que le
              même nom portait TROIS niveaux de filet dans
              ventes_comparables.html (cadre, filet interne, bordure de
              champ) ; ces trois-là ont été nommés séparément le même jour,
              voir ce fichier.

    --muted   11 appels, tous dans ventes_comparables.html. Doublon de
              --text-2 à 0,7 %. Aliasé sur lui : c'est le seul de la liste
              où la consolidation ne coûte rien.

    --hover   4 appels. `var(--grey-50)` est à 0,85 %. Aliasable ; laissé à
              sa valeur pour que ce lot ne déplace rien.
    --fg      3 appels. `var(--ink)` est à 2,0 %. Idem.
    --card    2 appels. Strictement #fff : aliasé sur --white, coût nul.

    --bg      DÉLIBÉRÉMENT ABSENT. Deux gabarits l'emploient avec des
              intentions contradictoires : login.html en fait un fond de page
              (#f7f7f8), ventes_comparables.html un fond de champ (#fff). Le
              déclarer casse forcément l'un des deux. Il faut d'abord donner
              deux noms à ces deux choses — dans les gabarits, pas ici. */
 --text-2: #6e7280;
 --text-3: #9097a0;
 --line:   #e7e7eb;
 --muted:  var(--text-2);
 --hover:  #f4f6f9;
 --fg:     #111827;
 --card:   var(--white);

 /* ── Direction visuelle de l'ecran de travail (2026-09-07) ──────────────
    Sept couleurs a ROLE NOMME, issues du livrable. Elles ne s'ajoutent pas
    a cote de la charte : les trois qui existaient deja y pointent, et les
    quatre gris tres proches remplacent leurs equivalents plus haut — deux
    points d'ecart sur un gris sont invisibles a l'oeil et couteux a tenir.

    Regle qui les gouverne : UN SEUL objet rouge par ecran. Le rouge est
    l'action a faire, jamais un etat, jamais une alerte, jamais un libelle.
    Les six couleurs d'action codees en dur dans le rendu disparaissent au
    profit de ces tokens. */
 --flu-navy:        var(--ink);        /* #0F1320 — texte, barre de mode, ligne selectionnee */
 --flu-red:         var(--red);        /* #E60028 — l'action, une seule par ecran */
 --flu-white:       var(--white);      /* les blocs de contenu */
 --flu-surface:     #F4F5F8;           /* le fond qui separe les blocs sans bordure */
 --flu-ink:         var(--ink);
 --flu-ink-body:    #2A2F42;           /* corps du message uniquement */
 --flu-ink-muted:   #545B72;           /* libelles, metadonnees, raccourcis */
 --flu-ink-on-navy: #AEB4C6;           /* UNIQUEMENT sur fond bleu nuit */
 --flu-mute-on-navy:#4A5170;           /* sur fond bleu nuit, ce qui n'appelle PAS a agir */
 --flu-rule:        #E1E4EC;           /* un filet par zone, et rien d'autre */
 --flu-fill:        #E8EAF0;           /* remplissage de progression */

 --flu-font-ui:   'Archivo', system-ui, -apple-system, sans-serif;
 --flu-font-data: 'IBM Plex Mono', ui-monospace, Menlo, monospace;

 /* Base 4, avec les paliers du livrable */
 --flu-space-1: 4px;  --flu-space-2: 8px;  --flu-space-3: 12px; --flu-space-4: 16px;
 --flu-space-5: 22px; --flu-space-6: 30px; --flu-space-7: 44px; --flu-space-8: 64px;
 --flu-radius: 0;

 /* Mesures FIXES : rien ne s'etire sur toute la largeur, quel que soit l'ecran */
 --flu-measure-work: 1160px;
 --flu-measure-list: 860px;
 --flu-panel:        480px;
 --flu-context:      340px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow-x: hidden; }
body {
 font-family: var(--sans);
 font-size: 13px;
 line-height: 1.45;
 color: var(--ink);
 background: var(--grey-50);
 -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; color: inherit; background: none; border: none; padding: 0; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
.tnum { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-feature-settings:'tnum' 1; }
::selection { background: var(--ink); color: #fff; }

/* .badge : classe referencee par les templates admin_*.html, absente de
   fluvoria.css (jamais chargee par base-sg.html). Sert de base neutre pour
   les usages sans style inline ; les usages avec background/color inline
   (statuts, plans) l'ecrasent normalement en cascade. */
.badge {
 display: inline-block;
 padding: 0.2rem 0.65rem;
 border-radius: 1rem;
 background: var(--grey-100);
 color: var(--ink);
 font-size: 0.8rem;
 font-weight: 600;
 line-height: 1.4;
}

/* ═══ Top bar institutionnel ═══ */
.topbar {
 height: var(--topbar-h);
 background: var(--ink);
 color: #fff;
 display: flex; align-items: center;
 padding: 0 var(--s5);
 gap: var(--s5);
 border-bottom: 3px solid var(--red);
 position: sticky; top: 0; z-index: 50;
}
.tb-logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.tb-logo-mark {
 width: 24px; height: 24px;
 background: var(--ink);
 position: relative; display: inline-block; flex-shrink: 0;
}
.tb-logo-mark::before {
 content: ""; position: absolute; inset: 5px; background: var(--red);
}
.tb-logo-mark::after {
 content: ""; position: absolute; left: 5px; top: 5px;
 width: 5px; height: 5px; background: #fff;
}
.tb-divider { width: 1px; height: 22px; background: rgba(255,255,255,0.15); }
.tb-context { font-size: 12px; color: rgba(255,255,255,0.7); display: flex; align-items: center; gap: 8px; }
.tb-context b { color: #fff; font-weight: 500; }
.tb-search { margin-left: auto; display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); font-size: 12px; color: rgba(255,255,255,0.75); width: 320px; cursor: pointer; transition: background var(--t-fast); }
.tb-search:hover { background: rgba(255,255,255,0.13); }
.tb-search svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.tb-search .kbd { margin-left: auto; font-family: var(--mono); font-size: 10.5px; padding: 1px 5px; background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.65); }
.tb-actions { display: flex; align-items: center; gap: 4px; }
.tb-icon-btn { width: 30px; height: 30px; display: grid; place-items: center; color: rgba(255,255,255,0.65); position: relative; transition: color var(--t-fast), background var(--t-fast); }
.tb-icon-btn:hover { color:#fff; background: rgba(255,255,255,0.06); }
.tb-icon-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.tb-badge { position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; background: var(--red); border-radius: 50%; }
.tb-user { display: flex; align-items: center; gap: 8px; padding: 0 8px; font-size: 12px; color: rgba(255,255,255,0.85); }
.tb-user-avatar { width: 26px; height: 26px; background: var(--grey-150); color: var(--ink); display: grid; place-items: center; font-weight: 600; font-size: 11px; }

/* ═══ Tabs primaires ═══ */
.tabs { height: var(--tabs-h); background: #fff; border-bottom: 1px solid var(--grey-150); display: flex; align-items: stretch; padding: 0 var(--s5); position: sticky; top: var(--topbar-h); z-index: 49; }
.tab { display: flex; align-items: center; gap: 8px; padding: 0 14px; font-size: 12.5px; font-weight: 500; color: var(--grey-500); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--t-fast), border-color var(--t-fast); white-space: nowrap; }
.tab:hover { color: var(--ink); }
.tab.active { color: var(--ink); border-bottom-color: var(--red); }
.tab svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.tab-count { font-family: var(--mono); font-size: 11px; padding: 1px 6px; background: var(--grey-100); color: var(--grey-500); }
.tab.active .tab-count { background: var(--ink); color: #fff; }
.tab-count.alert { background: var(--red-soft); color: var(--red-2); }

/* ═══ App body ═══ */
.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: calc(100vh - var(--topbar-h) - var(--tabs-h)); }

/* ═══ Sidebar ═══ */
.sidebar { background: #fff; border-right: 1px solid var(--grey-150); padding: var(--s4) 0; position: sticky; top: calc(var(--topbar-h) + var(--tabs-h)); height: calc(100vh - var(--topbar-h) - var(--tabs-h)); overflow-y: auto; }
.sb-section { padding: var(--s3) var(--s4) 0; }
.sb-section-title { font-size: 10.5px; font-weight: 600; color: var(--grey-400); letter-spacing: 0.06em; text-transform: uppercase; padding: 0 8px var(--s2); display: flex; align-items: center; justify-content: space-between; }
.sb-section-title button { color: var(--grey-300); }
.sb-section-title button:hover { color: var(--ink); }
.sb-link { display: flex; align-items: center; gap: 10px; padding: 7px 10px; font-size: 13px; color: var(--grey-700); border-left: 2px solid transparent; transition: background var(--t-fast), border-color var(--t-fast); }
.sb-link:hover { background: var(--grey-50); }
.sb-link.active { background: var(--grey-50); border-left-color: var(--red); color: var(--ink); font-weight: 500; }
.sb-link-active { background: var(--grey-50) !important; border-left-color: var(--red) !important; color: var(--ink) !important; font-weight: 500 !important; }
.sb-link svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.7; flex-shrink: 0; }
.sb-count { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--grey-400); }
.sb-count.alert { color: var(--red); font-weight: 600; }
.sb-stage-row { display: grid; grid-template-columns: 10px 1fr auto; gap: 10px; align-items: center; padding: 5px 10px 5px 12px; font-size: 12.5px; color: var(--grey-700); transition: background var(--t-fast); cursor: pointer; }
.sb-stage-row:hover { background: var(--grey-50); }
.sb-stage-mark { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.sb-stage-row .mono { font-size: 11px; color: var(--grey-400); }

/* ═══ Main content ═══ */
.main { min-width: 0; }

/* ═══ Page header ═══ */
.page-head { background: #fff; border-bottom: 1px solid var(--grey-150); padding: var(--s5) var(--s6); }
.crumb { font-size: 11.5px; color: var(--grey-400); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.crumb a:hover { color: var(--ink); }
.crumb-sep { color: var(--grey-300); }
.page-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s5); margin-bottom: var(--s4); }
.page-title { font-size: 22px; font-weight: 600; letter-spacing: -0.012em; }
.page-actions { display: flex; gap: 8px; align-items: center; }

/* KPI strip */
.kpis { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--grey-150); }
.kpi { padding: var(--s4) var(--s5); border-right: 1px solid var(--grey-150); }
.kpi:last-child { border-right: none; }
.kpi .l { font-size: 11px; color: var(--grey-400); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 500; margin-bottom: 6px; }
.kpi .v { font-size: 22px; font-weight: 600; color: var(--ink); font-feature-settings: 'tnum' 1; letter-spacing: -0.015em; display: flex; align-items: baseline; gap: 6px; }
.kpi .v small { font-size: 12px; color: var(--grey-400); font-weight: 400; }
.kpi .delta { font-size: 11px; font-family: var(--mono); margin-top: 4px; }
.kpi .delta.up { color: var(--green); }
.kpi .delta.down { color: var(--red); }

/* ═══ Buttons ═══ */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 12px; font-weight: 500; border: 1px solid transparent; transition: all var(--t-fast); white-space: nowrap; letter-spacing: 0.005em; }
.btn-line { background: #fff; color: var(--ink); border-color: var(--grey-200); }
.btn-line:hover { background: var(--grey-50); border-color: var(--grey-400); }
.btn-fill { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-fill:hover { background: var(--ink-2); }
.btn-red { background: var(--red); color: #fff; border-color: var(--red); }
.btn-red:hover { background: var(--red-2); border-color: var(--red-2); }
.btn-ghost { color: var(--grey-500); }
.btn-ghost:hover { background: var(--grey-100); color: var(--ink); }
.btn-icon { width: 28px; height: 28px; padding: 0; justify-content: center; }
.btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.7; flex-shrink: 0; }
.btn-icon svg { width: 14px; height: 14px; }
.kbd { font-family: var(--mono); font-size: 10.5px; padding: 1px 5px; background: rgba(0,0,0,0.07); color: var(--grey-500); margin-left: 4px; }
.btn-fill .kbd, .btn-red .kbd { background: rgba(255,255,255,0.18); color: rgba(255,255,255,0.8); }

/* ═══ Catalogue split ═══ */
.cat-split { display: grid; grid-template-columns: minmax(480px, 0.95fr) minmax(0, 1.05fr); height: calc(100vh - var(--topbar-h) - var(--tabs-h)); }
.cat-left { background: #fff; border-right: 1px solid var(--grey-150); display: flex; flex-direction: column; overflow: hidden; }
.cat-toolbar { padding: var(--s3) var(--s5); border-bottom: 1px solid var(--grey-150); display: flex; align-items: center; gap: var(--s3); background: var(--grey-50); }
.cat-filters { display: flex; gap: 0; flex-wrap: wrap; overflow-x: auto; }
.cat-filter { padding: 5px 10px; font-size: 11.5px; color: var(--grey-500); border: 1px solid var(--grey-200); border-right: none; background: #fff; font-weight: 500; white-space: nowrap; }
.cat-filter:last-child { border-right: 1px solid var(--grey-200); }
.cat-filter:hover { background: var(--grey-50); }
.cat-filter.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.cat-toolbar-meta { margin-left: auto; font-size: 11.5px; color: var(--grey-400); font-family: var(--mono); }
.cat-toolbar-meta b { color: var(--ink); font-weight: 600; }
.cat-thead { display: grid; grid-template-columns: 24px 1fr 90px 90px 70px; gap: var(--s3); padding: 8px var(--s5); border-bottom: 1px solid var(--grey-200); background: var(--grey-50); font-size: 10.5px; font-weight: 600; color: var(--grey-500); text-transform: uppercase; letter-spacing: 0.05em; position: sticky; top: 0; }
.cat-thead .right { text-align: right; }
.cat-list { flex: 1; overflow-y: auto; }
/* L'action a sa PROPRE colonne, largeur fixe : elle vivait dans celle du
   statut (90px) avec un texte sans retour à la ligne, et « Relancer 2/3 —
   due depuis 92 j » débordait sur le prix. La puce ne porte plus de durée :
   le retard est dans la colonne de temps. */
.cat-row { display: grid; grid-template-columns: 24px minmax(0,1fr) 112px 78px 56px; gap: var(--s3); padding: 10px var(--s5); border-bottom: 1px solid var(--grey-100); cursor: pointer; transition: background var(--t-fast); align-items: center; }
.cat-row:hover { background: var(--grey-50); }
.cat-row.selected { background: var(--blue-soft); border-left: 3px solid var(--blue); padding-left: calc(var(--s5) - 3px); }
.cat-row-stage { width: 8px; height: 8px; border-radius: 50%; margin-left: 8px; display: inline-block; }
.cat-row-mid { min-width: 0; }
.cat-row-loc { font-size: 13px; font-weight: 500; color: var(--ink); margin-bottom: 2px; display: flex; align-items: center; gap: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Une ligne de méta qui passe sur deux lignes décale la hauteur des lignes
   voisines et casse le balayage vertical. Elle tient sur UNE ligne ; la
   ville est le premier élément à être tronqué, jamais le canal ni le badge. */
.cat-row-meta { display: flex; align-items: center; gap: 7px; white-space: nowrap;
                overflow: hidden; }
.cat-row-meta > * { flex-shrink: 0; }
.cat-row-meta .ville { overflow: hidden; text-overflow: ellipsis; min-width: 0; flex-shrink: 1; }
.cat-row-action { display: block; width: 100%; text-align: center; }
.cat-thead { grid-template-columns: 24px minmax(0,1fr) 112px 78px 56px; }
.cat-row-loc .id { font-family: var(--mono); font-size: 10.5px; color: var(--grey-300); font-weight: 400; }
.cat-row-meta { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--grey-500); }
.cat-row-meta .sep { color: var(--grey-300); }
.cat-row-stage-pill { font-size: 10.5px; font-weight: 500; color: var(--grey-500); white-space: nowrap; text-align: right; }
.cat-row-price { font-family: var(--mono); font-size: 12.5px; font-weight: 600; text-align: right; color: var(--ink); }
.cat-row-aging { font-family: var(--mono); font-size: 11px; text-align: right; color: var(--grey-400); }
.cat-row-aging.warm { color: var(--orange); }
.cat-row-aging.hot { color: var(--red); font-weight: 600; }
.src-mark { font-family: var(--mono); font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--grey-500); padding: 1px 5px; border: 1px solid var(--grey-200); background: #fff; display: inline-block; }

/* Stage colors */
.s-detecte { background: var(--blue); }
.s-prepare { background: var(--blue); }
.s-envoye { background: var(--grey-300); }
.s-rappele { background: var(--orange); }
.s-reponse { background: #6E5BBF; }
.s-rdv { background: var(--green); }
.s-negociation { background: #f59e0b; }
.s-mandat { background: var(--green); }
.s-signe { background: var(--red); }
.s-inactive { background: var(--grey-400); }
.s-archived { background: var(--grey-300); opacity: 0.5; }

/* ═══ Fiche right pane ═══ */
.cat-right { background: var(--grey-50); overflow-y: auto; height: calc(100vh - var(--topbar-h) - var(--tabs-h)); }

/* Le composant de liste dans une carte (tableau de bord) : mêmes proportions
   que le Catalogue — la liste ne descend pas sous 480px, le panneau prend le
   reste — mais une hauteur bornée, car il vit DANS la page et non à sa place.
   Sans cette variante, la grille prendrait toute la fenêtre à l'intérieur
   d'une carte, et la page ne défilerait plus. */
.cat-split-encadre { height: auto; max-height: 72vh; }
.cat-split-encadre > .cat-left,
.cat-split-encadre > .cat-right { height: auto; max-height: 72vh; overflow-y: auto; }
.cat-split-encadre > .cat-left { border-right: 1px solid var(--grey-150); }
.fiche-head { background: #fff; padding: var(--s5) var(--s6); border-bottom: 1px solid var(--grey-150); }
.fiche-head-eyebrow { display: flex; align-items: center; gap: var(--s3); font-size: 11px; color: var(--grey-400); margin-bottom: 8px; flex-wrap: wrap; }
.fiche-head-eyebrow .stage-badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; font-weight: 600; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; }
.fiche-head-eyebrow .stage-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; }
.stage-badge.s-detecte-badge { background: var(--blue-soft); color: var(--blue); } .stage-badge.s-detecte-badge::before { background: var(--blue); }
.stage-badge.s-prepare-badge { background: var(--blue-soft); color: var(--blue); } .stage-badge.s-prepare-badge::before { background: var(--blue); }
.stage-badge.s-envoye-badge { background: var(--grey-100); color: var(--grey-500); } .stage-badge.s-envoye-badge::before { background: var(--grey-300); }
.stage-badge.s-rappele-badge { background: var(--orange-soft); color: var(--orange); }.stage-badge.s-rappele-badge::before { background: var(--orange); }
.stage-badge.s-reponse-badge { background: #EEE9FF; color: #6E5BBF; } .stage-badge.s-reponse-badge::before { background: #6E5BBF; }
.stage-badge.s-rdv-badge { background: var(--green-soft); color: var(--green); } .stage-badge.s-rdv-badge::before { background: var(--green); }
.stage-badge.s-negociation-badge { background: #fef3c7; color: #b45309; } .stage-badge.s-negociation-badge::before { background: #f59e0b; }
.stage-badge.s-mandat-badge { background: var(--green-soft); color: var(--green); } .stage-badge.s-mandat-badge::before { background: var(--green); }
.stage-badge.s-signe-badge { background: var(--red-soft); color: var(--red); } .stage-badge.s-signe-badge::before { background: var(--red); }
.fiche-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s5); }
.fiche-title-block { min-width: 0; }
.fiche-title { font-size: 24px; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 4px; }
.fiche-subtitle { font-size: 13.5px; color: var(--grey-500); font-family: var(--mono); font-feature-settings: 'tnum' 1; }
.fiche-actions { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
.fiche-kpis { display: grid; grid-template-columns: repeat(6, 1fr); background: #fff; border-bottom: 1px solid var(--grey-150); }
.fiche-kpi { padding: 12px var(--s4); border-right: 1px solid var(--grey-100); }
.fiche-kpi:last-child { border-right: none; }
.fiche-kpi .l { font-size: 10px; color: var(--grey-400); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; margin-bottom: 4px; }
.fiche-kpi .v { font-size: 15px; font-weight: 600; color: var(--ink); font-feature-settings: 'tnum' 1; letter-spacing: -0.01em; }
.fiche-kpi .v small { font-size: 11px; color: var(--grey-400); font-weight: 400; margin-left: 2px; }
.fiche-kpi.warn .v { color: var(--orange); }
.fiche-kpi.pos .v { color: var(--green); }
.fiche-body { padding: var(--s5) var(--s6) var(--s10); display: flex; flex-direction: column; gap: var(--s4); }

/* ═══ Cards ═══ */
.card { background: #fff; border: 1px solid var(--grey-150); }
.card-head { padding: 10px var(--s4); border-bottom: 1px solid var(--grey-150); display: flex; align-items: center; justify-content: space-between; background: var(--grey-50); }
.card-title { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.card-title svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.7; color: var(--grey-400); }
.card-meta { font-size: 11px; color: var(--grey-400); font-family: var(--mono); }
.card-body { padding: var(--s4); }

/* ═══ Action chips & interactions ═══ */
.actions-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--s4); }
.action-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--grey-200); background: #fff; font-size: 12px; color: var(--grey-700); font-weight: 500; }
.action-chip:hover { border-color: var(--ink); background: var(--grey-50); }
.action-chip svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.note-input { width: 100%; padding: 8px 10px; border: 1px solid var(--grey-200); background: var(--grey-50); font-size: 12.5px; resize: none; outline: none; transition: border-color var(--t-fast), background var(--t-fast); }
.note-input:focus { border-color: var(--ink); background: #fff; }
.note-input::placeholder { color: var(--grey-400); }

/* ═══ Timeline ═══ */
.timeline { display: flex; flex-direction: column; }
.tl-item { display: grid; grid-template-columns: 110px 24px 1fr; gap: var(--s3); padding: 10px 0; border-bottom: 1px solid var(--grey-100); align-items: flex-start; }
.tl-item:last-child { border-bottom: none; }
.tl-date { font-family: var(--mono); font-size: 11px; color: var(--grey-400); padding-top: 3px; }
.tl-icon { width: 24px; height: 24px; background: var(--grey-100); display: grid; place-items: center; color: var(--grey-500); }
.tl-icon svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.tl-icon.pos { background: var(--green-soft); color: var(--green); }
.tl-icon.neu { background: var(--blue-soft); color: var(--blue); }
.tl-icon.alert { background: var(--red-soft); color: var(--red); }
.tl-body .h { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 2px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tl-body .h .author { color: var(--grey-400); font-weight: 400; font-size: 11.5px; }
.tl-body .b { font-size: 12.5px; color: var(--grey-500); line-height: 1.55; }
.tag { display: inline-block; padding: 1px 7px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.tag-pos { background: var(--green-soft); color: var(--green); }
.tag-neu { background: var(--grey-100); color: var(--grey-500); }
.tag-warn { background: var(--orange-soft); color: var(--orange); }

/* ═══ Two col & definition table ═══ */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.def-table { width: 100%; border-collapse: collapse; }
.def-table tr { border-bottom: 1px solid var(--grey-100); }
.def-table tr:last-child { border-bottom: none; }
.def-table td { padding: 7px 0; font-size: 12.5px; vertical-align: top; }
.def-table td:first-child { color: var(--grey-400); width: 130px; padding-right: var(--s3); font-weight: 500; }
.def-table td:last-child { color: var(--ink); }
.def-table .mono { font-family: var(--mono); font-size: 12px; }

/* ═══ Pipeline ═══ */
.pipeline-wrap { padding: var(--s5) var(--s6) var(--s10); display: flex; flex-direction: column; gap: var(--s4); }
.funnel-card { background: #fff; border: 1px solid var(--grey-150); padding: var(--s5); }
.funnel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s4); }
.funnel-head h3 { font-size: 14px; font-weight: 600; }
.funnel-bars { display: grid; grid-template-columns: repeat(8, 1fr); gap: 1px; align-items: end; height: 110px; padding: 28px 0; background: var(--grey-50); border: 1px solid var(--grey-100); position: relative; }
.funnel-bar { background: var(--ink); position: relative; min-height: 4px; margin: 0 8px; }
.funnel-bar:last-child { background: var(--red); }
.funnel-bar:hover { opacity: 0.85; }
.funnel-bar .v { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--ink); }
.funnel-bar .l { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); font-size: 10.5px; color: var(--grey-500); white-space: nowrap; font-weight: 500; }
.pipeline-table-card { background: #fff; border: 1px solid var(--grey-150); }
.pipeline-thead { display: grid; grid-template-columns: 230px 90px 90px 1fr 90px; gap: var(--s4); padding: 10px var(--s4); border-bottom: 1px solid var(--grey-200); background: var(--grey-50); font-size: 10.5px; font-weight: 600; color: var(--grey-500); text-transform: uppercase; letter-spacing: 0.05em; }
.pipeline-thead .right { text-align: right; }
.pipeline-row { display: grid; grid-template-columns: 230px 90px 90px 1fr 90px; gap: var(--s4); padding: 14px var(--s4); border-bottom: 1px solid var(--grey-100); align-items: center; }
.pipeline-row:last-child { border-bottom: none; }
.pipeline-row:hover { background: var(--grey-50); }
.pipeline-stage-name { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; }
.pipeline-stage-mark { width: 10px; height: 10px; flex-shrink: 0; border-radius: 50%; display: inline-block; }
.pipeline-stage-meta { font-size: 11px; color: var(--grey-400); font-weight: 400; margin-top: 2px; }
.pipeline-count { font-family: var(--mono); font-size: 18px; font-weight: 600; text-align: right; color: var(--ink); font-feature-settings: 'tnum' 1; }
.pipeline-conv { font-family: var(--mono); font-size: 12px; text-align: right; color: var(--grey-500); }
.mini-cards-row { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0; }
.mini-card { flex-shrink: 0; min-width: 160px; padding: 7px 9px; border: 1px solid var(--grey-150); background: #fff; cursor: pointer; }
.mini-card:hover { border-color: var(--grey-400); background: var(--grey-50); }
.mini-card-loc { font-size: 12px; font-weight: 500; color: var(--ink); margin-bottom: 2px; line-height: 1.2; }
.mini-card-meta { font-family: var(--mono); font-size: 10.5px; color: var(--grey-400); }
.mini-card-more { flex-shrink: 0; min-width: 70px; display: grid; place-items: center; font-size: 11px; color: var(--grey-400); font-weight: 500; border: 1px dashed var(--grey-200); }
.pipeline-trend { text-align: right; font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: var(--grey-400); }
.pipeline-trend.up { color: var(--green); }
.pipeline-trend.down { color: var(--red); }

/* ═══ Briefing ═══ */
.briefing-wrap { padding: var(--s5) var(--s6) var(--s10); display: flex; flex-direction: column; gap: var(--s4); max-width: 1280px; }
.brief-hero { background: #fff; border: 1px solid var(--grey-150); padding: var(--s5) var(--s6); }
.brief-date { font-size: 11px; color: var(--grey-400); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; margin-bottom: 8px; }
.brief-greeting { font-size: 26px; font-weight: 600; letter-spacing: -0.018em; margin-bottom: 4px; }
.brief-lede { font-size: 14px; color: var(--grey-500); max-width: 760px; line-height: 1.55; }
.brief-lede b { color: var(--ink); font-weight: 600; }
.brief-lede .alert { color: var(--red); font-weight: 600; }
.brief-grid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--s4); }
.task-row { display: grid; grid-template-columns: 16px 1fr 80px; gap: var(--s3); padding: 9px 0; border-bottom: 1px solid var(--grey-100); align-items: center; }
.task-row:last-child { border-bottom: none; }
.task-check { width: 14px; height: 14px; border: 1.5px solid var(--grey-300); background: #fff; cursor: pointer; -webkit-appearance: none; appearance: none; }
.task-check:hover { border-color: var(--ink); }
.task-check:checked { background: var(--ink); border-color: var(--ink); }
.task-row .who { font-size: 13px; color: var(--ink); font-weight: 500; }
.task-row .who small { display: block; color: var(--grey-400); font-size: 11.5px; font-weight: 400; margin-top: 1px; }
.task-row .when { font-family: var(--mono); font-size: 11px; color: var(--grey-400); text-align: right; }
.task-row.overdue .when { color: var(--red); font-weight: 600; }
.feed-item { padding: 10px 0; border-bottom: 1px solid var(--grey-100); font-size: 12.5px; line-height: 1.55; }
.feed-item:last-child { border-bottom: none; }
.feed-item .t { font-family: var(--mono); font-size: 10.5px; color: var(--grey-400); display: block; margin-bottom: 3px; }
.feed-item b { font-weight: 600; }

/* ═══ Tâches ═══ */
.taches-wrap { padding: var(--s5) var(--s6) var(--s10); display: flex; flex-direction: column; gap: var(--s6); }
.taches-section { display: flex; flex-direction: column; }
.taches-section-title { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey-400); padding-bottom: var(--s3); border-bottom: 1px solid var(--grey-150); margin-bottom: var(--s3); display: flex; align-items: center; justify-content: space-between; }
.taches-section-title.overdue-title { color: var(--red); }

/* ═══ Statistiques placeholder ═══ */
.stats-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 400px; gap: var(--s4); color: var(--grey-400); text-align: center; padding: var(--s10); }
.stats-placeholder h2 { font-size: 18px; font-weight: 600; color: var(--grey-500); }
.stats-placeholder p { font-size: 13px; max-width: 400px; line-height: 1.6; }

/* ═══ Empty state ═══ */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--s10); text-align: center; color: var(--grey-400); gap: var(--s3); }
.empty-state h3 { font-size: 14px; font-weight: 600; color: var(--grey-500); }
.empty-state p { font-size: 12.5px; }

/* ═══ Command palette ═══ */
.cmdk-overlay { position: fixed; inset: 0; background: rgba(15,19,32,0.55); display: none; align-items: flex-start; justify-content: center; padding-top: 12vh; z-index: 200; }
.cmdk-overlay.open { display: flex; }
.cmdk { background: #fff; width: 560px; max-width: 92vw; box-shadow: 0 30px 80px rgba(0,0,0,0.25); border: 1px solid var(--grey-200); }
.cmdk-input-wrap { display: flex; align-items: center; gap: var(--s3); padding: var(--s4); border-bottom: 1px solid var(--grey-150); }
.cmdk-input-wrap svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; color: var(--grey-400); }
.cmdk-input { flex: 1; font-size: 14px; outline: none; }
.cmdk-input::placeholder { color: var(--grey-400); }
.cmdk-section-title { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--grey-400); padding: var(--s3) var(--s4) 4px; }
.cmdk-item { display: flex; align-items: center; gap: var(--s3); padding: 8px var(--s4); font-size: 13px; cursor: pointer; }
.cmdk-item svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.7; color: var(--grey-400); }
.cmdk-item:hover, .cmdk-item.sel { background: var(--blue-soft); }
.cmdk-item .meta { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--grey-400); }
.cmdk-foot { padding: 8px var(--s4); border-top: 1px solid var(--grey-150); background: var(--grey-50); font-size: 11px; color: var(--grey-400); display: flex; gap: var(--s4); }
.cmdk-foot b { color: var(--grey-700); font-weight: 600; }

/* ═══ Scrollbar ═══ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--grey-50); }
::-webkit-scrollbar-thumb { background: var(--grey-200); }
::-webkit-scrollbar-thumb:hover { background: var(--grey-300); }

/* ═══ Toast notifications ═══ */
#sg-toasts { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; }
.sg-toast { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 500; min-width: 240px; box-shadow: 0 4px 16px rgba(0,0,0,0.18); border-left: 3px solid var(--grey-300); animation: sg-toast-in 120ms ease-out forwards; }
.sg-toast.success { border-left-color: var(--green); }
.sg-toast.error { border-left-color: var(--red); }
.sg-toast.info { border-left-color: var(--blue); }
.sg-toast.warning { border-left-color: var(--orange); }
.sg-toast.out { animation: sg-toast-out 180ms ease-out forwards; }
@keyframes sg-toast-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes sg-toast-out { from { opacity:1; } to { opacity:0; transform:translateY(8px); } }

/* ═══ Skeleton pulse ═══ */
@keyframes pulse {
 0%, 100% { opacity: 1; }
 50% { opacity: 0.5; }
}

/* ═══ Sidebar drawer (mobile) ═══ */
.sidebar-overlay {
 display: none;
 position: fixed; inset: 0;
 background: rgba(15,19,32,0.45);
 z-index: 60;
}
.sidebar-overlay.open { display: block; }

/* Burger caché sur desktop */
.tb-burger {
 display: none;
 width: 30px; height: 30px;
 align-items: center; justify-content: center;
 color: rgba(255,255,255,0.7);
 cursor: pointer;
}
.tb-burger:hover { color: #fff; }
.tb-burger svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }

/* Bouton retour fiche (mobile) */
.fiche-back-btn {
 display: none;
 align-items: center; gap: 8px;
 padding: var(--s3) var(--s6);
 background: #fff;
 border-bottom: 1px solid var(--grey-150);
 font-size: 12px;
 color: var(--grey-500);
 cursor: pointer;
}
.fiche-back-btn:hover { color: var(--ink); }
.fiche-back-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.7; }

/* ═══ Responsive ═══ */
@media (max-width: 1180px) {
 .cat-split { grid-template-columns: 420px 1fr; }
 .fiche-kpis { grid-template-columns: repeat(3, 1fr); }
 .fiche-kpi:nth-child(3n) { border-right: none; }
 .kpis { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
 .app { grid-template-columns: 1fr; }
 .sidebar {
 display: block !important;
 position: fixed;
 top: 0; left: 0;
 height: 100vh;
 z-index: 61;
 transform: translateX(-100%);
 transition: transform 200ms ease-out;
 box-shadow: 4px 0 24px rgba(0,0,0,0.15);
 }
 .sidebar.open {
 transform: translateX(0);
 }
 .tb-burger {
 display: flex !important;
 }
 .cat-split {
 grid-template-columns: 1fr;
 height: auto;
 }
 .cat-right {
 display: none;
 position: fixed; inset: 0;
 z-index: 55;
 overflow-y: auto;
 background: var(--grey-50);
 height: auto;
 }
 .cat-right.active {
 display: block;
 }
 .fiche-back-btn {
 display: flex !important;
 }
 .brief-grid { grid-template-columns: 1fr; }
 .two-col { grid-template-columns: 1fr; }
 .pipeline-thead, .pipeline-row { grid-template-columns: 1fr 60px 60px; }
 .pipeline-row > *:nth-child(4), .pipeline-thead > *:nth-child(4) { display: none; }
 .pipeline-row > *:nth-child(5), .pipeline-thead > *:nth-child(5) { display: none; }
}

@media (max-width: 640px) {
 /* Anti-zoom iOS : inputs 16px minimum */
 input, select, textarea { font-size: 16px !important; }
 .topbar { padding: 0 var(--s3); gap: var(--s3); }
 .tb-search { display: none; }
 .tb-context { display: none; }
 .fiche-kpis { grid-template-columns: repeat(2, 1fr); }
 .pipeline-wrap { padding: var(--s4) var(--s4) var(--s8); }
 .briefing-wrap { padding: var(--s4) var(--s4) var(--s8); }
 .taches-wrap { padding: var(--s4) var(--s4) var(--s8); }
 .page-head { padding: var(--s4); }
 .kpis { grid-template-columns: repeat(2, 1fr); }
 .kpi:nth-child(2n) { border-right: none; }
 .brief-grid { grid-template-columns: 1fr; }
 .page-title { font-size: 18px; }
 .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
 .tab { padding: 0 10px; font-size: 11.5px; }
 .funnel-bars { height: 80px; }
}

/* ═══ Responsive additionnels ═══ */

/* Catalogue toolbar — selects wrappent sur mobile */
@media (max-width: 760px) {
 .cat-toolbar { flex-wrap: wrap; gap: var(--s2); }
 .cat-toolbar select, .cat-toolbar .btn { font-size: 11px; padding: 4px 7px; }
 .cat-toolbar-meta { display: none; }
 #rapid-chip { font-size: 10px; padding: 3px 6px; }
}

/* Page actions — wrap sur mobile */
@media (max-width: 640px) {
 .page-title-row { flex-direction: column; align-items: flex-start; gap: var(--s3); }
 .page-actions { flex-wrap: wrap; }
 .page-actions .btn { font-size: 11px; padding: 5px 10px; }
 .cat-thead { display: none; }

 /* Catalogue toolbar stack */
 .cat-toolbar { flex-direction: column; align-items: stretch; }
 .cat-toolbar select { width: 100%; }

 /* Find page — filtres stack */
 #search-filters-row { flex-direction: column; }
 #search-filters-row select { width: 100%; }

 /* RDV page — task-row simplifié */
 .rdv-upcoming-row { grid-template-columns: 80px 1fr 80px !important; }
 .rdv-upcoming-row > *:nth-child(3) { display: none; }

 /* Pipeline funnel scroll */
 .funnel-bars { overflow-x: auto; min-width: 480px; }
 .funnel-card { overflow-x: auto; }

 /* Modals — plein écran sur mobile */
 .cmdk { width: 95vw !important; max-width: 95vw !important; margin: 0 auto; }

 /* Tabs — hide count sur très petit écran */
 .tab-count { display: none; }

 /* Briefing task-row */
 .task-row { grid-template-columns: 16px 1fr 60px !important; }
 .task-row .when { font-size: 10px; }
}

/* Tablette (760-900px) */
@media (min-width: 641px) and (max-width: 900px) {
 .page-title { font-size: 19px; }
 .kpis { grid-template-columns: repeat(3, 1fr); }
 .cat-toolbar { gap: var(--s2); }
 .fiche-kpis { grid-template-columns: repeat(3, 1fr); }
 .fiche-kpi:nth-child(3n) { border-right: none; }
}

/* ═══ FIXES MOBILES CRITIQUES ═══ */

/* 1. Supprimer border-radius natif iOS sur les selects */
select {
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
 border-radius: 0 !important;
 -webkit-border-radius: 0 !important;
}

/* 2. Topbar — masquer le nom user sur mobile, garder avatar */
@media (max-width: 640px) {
 .tb-user span:first-child { display: none; }
 .tb-context { display: none; }
 .tb-divider { display: none; }
 .tb-search { display: none; }
 .tb-actions { gap: 2px; }
 .tb-icon-btn { width: 26px; height: 26px; }
 .topbar { padding: 0 var(--s3); gap: var(--s2); overflow: hidden; }
 .tb-logo span { font-size: 13px; }
}

/* 3. Cat-row — layout 2 colonnes sur mobile */
@media (max-width: 640px) {
 .cat-row {
 grid-template-columns: 16px 1fr 55px !important;
 gap: var(--s2) !important;
 padding: 10px var(--s3) !important;
 }
 .cat-row-stage { margin-left: 0; }
 /* Masquer colonnes prix et âge — garder dot, contenu, stage-pill */
 .cat-row > *:nth-child(4),
 .cat-row > *:nth-child(5) { display: none; }
 /* Stage pill à droite */
 .cat-row-stage-pill {
 font-size: 10px;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 }
 /* Contenu compact */
 .cat-row-loc { font-size: 12px; }
 .cat-row-meta { font-size: 11px; gap: 4px; flex-wrap: nowrap; overflow: hidden; }
 .src-mark { font-size: 8.5px; padding: 1px 3px; flex-shrink: 0; max-width: 70px; overflow: hidden; text-overflow: ellipsis; }

 /* KPIs catalogue : 2 colonnes strict */
 .kpis { grid-template-columns: 1fr 1fr; }
 .kpi:nth-child(2n) { border-right: none; }
 .kpi:nth-child(5) { border-right: none; grid-column: span 2; }
 .kpi .v { font-size: 18px; }
 .kpi .l { font-size: 10px; }
}

/* ═══ FICHE DETAIL — MOBILE ═══ */
@media (max-width: 640px) {
 /* Head de la fiche */
 .fiche-head { padding: var(--s3) var(--s4); }
 .fiche-head-eyebrow { font-size: 10px; gap: 6px; flex-wrap: wrap; }

 /* Titre + sous-titre */
 .fiche-title { font-size: 17px; letter-spacing: -0.01em; }
 .fiche-subtitle {
 font-size: 12px;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 }

 /* Actions fiche — scroll horizontal plutôt que débordement */
 .fiche-actions {
 display: flex;
 flex-wrap: nowrap;
 overflow-x: auto;
 -webkit-overflow-scrolling: touch;
 gap: 6px;
 padding-bottom: 4px;
 max-width: 100%;
 }
 .fiche-actions .btn {
 flex-shrink: 0;
 font-size: 11px;
 padding: 5px 8px;
 white-space: nowrap;
 }
 .fiche-actions .btn .kbd { display: none; } /* masquer kbd sur mobile */
 .fiche-title-row { flex-direction: column; gap: var(--s3); }
 .fiche-title-block { min-width: 0; width: 100%; }

 /* KPIs fiche — 2 colonnes */
 .fiche-kpis { grid-template-columns: repeat(2, 1fr); }
 .fiche-kpi:nth-child(2n) { border-right: none; }
 .fiche-kpi .v { font-size: 13px; }
 .fiche-kpi .l { font-size: 9px; }

 /* Body fiche */
 .fiche-body { padding: var(--s3) var(--s4) var(--s8); gap: var(--s3); }

 /* Card head — meta date tronquée */
 .card-head { flex-wrap: wrap; gap: 4px; }
 .card-meta {
 font-size: 10px;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 max-width: 100%;
 }

 /* Action chips — scroll horizontal */
 .actions-row {
 flex-wrap: nowrap;
 overflow-x: auto;
 -webkit-overflow-scrolling: touch;
 padding-bottom: 4px;
 }
 .action-chip { flex-shrink: 0; font-size: 11px; padding: 5px 8px; }

 /* Timeline */
 .tl-item { grid-template-columns: 80px 20px 1fr; gap: 6px; }
 .tl-date { font-size: 10px; }
 .tl-body .h { font-size: 12px; }
 .tl-body .b { font-size: 11.5px; }

 /* Def table */
 .def-table td { font-size: 11.5px; padding: 5px 0; }
 .def-table td:first-child { width: 90px; font-size: 11px; }
 .two-col { grid-template-columns: 1fr; gap: var(--s3); }

 /* Stage badge */
 .stage-badge { font-size: 9.5px; padding: 2px 6px; }
}

/* ═══ MODAL RDV — MOBILE ═══ */
@media (max-width: 640px) {
 /* Toutes les grilles 2col dans les modals passent en 1col */
 .cmdk [style*="grid-template-columns: 1fr 1fr"],
 .cmdk div[style*="display:grid"],
 .cmdk div[style*="display: grid"] {
 display: flex !important;
 flex-direction: column !important;
 }

 /* Boutons du modal — pleine largeur */
 .cmdk div[style*="justify-content:flex-end"],
 .cmdk div[style*="justify-content: flex-end"] {
 flex-direction: column !important;
 gap: 8px !important;
 }
 .cmdk div[style*="justify-content:flex-end"] .btn,
 .cmdk div[style*="justify-content: flex-end"] .btn {
 width: 100% !important;
 justify-content: center !important;
 }

 /* Padding modal réduit */
 .cmdk > div { padding: var(--s3) !important; }
 .cmdk-input-wrap { padding: var(--s3) var(--s4) !important; }
}

/* ═══ MODAL RDV — SCROLL MOBILE ═══ */
@media (max-width: 768px) {
 .cmdk-overlay {
 align-items: flex-start !important;
 padding-top: 0 !important;
 overflow-y: auto;
 }
 .cmdk {
 margin: 0 auto;
 max-height: 100dvh !important;
 display: flex;
 flex-direction: column;
 border-radius: 0 !important;
 }
 .cmdk > div:last-of-type {
 overflow-y: auto;
 flex: 1;
 -webkit-overflow-scrolling: touch;
 }
}

/* Desktop — limiter la hauteur aussi */
@media (min-width: 769px) {
 .cmdk-overlay {
 padding-top: 5vh;
 align-items: flex-start;
 }
 .cmdk {
 max-height: 90vh;
 display: flex;
 flex-direction: column;
 }
 .cmdk > div:last-of-type {
 overflow-y: auto;
 flex: 1;
 }
}

/* ═══ RDV PAGE — MOBILE ═══ */
@media (max-width: 640px) {
 /* Row RDV — simplifier la grille */
 .rdv-upcoming-row {
 grid-template-columns: auto 1fr auto !important;
 gap: var(--s2) !important;
 }
 /* Date en une ligne */
 .rdv-upcoming-row > *:first-child {
 white-space: nowrap;
 font-size: 11px !important;
 color: var(--grey-500);
 }
 /* Masquer la colonne notes (3ème enfant) */
 .rdv-upcoming-row > *:nth-child(3) {
 display: none;
 }
 /* Boutons sur même ligne */
 .rdv-upcoming-row > *:nth-child(4) {
 flex-direction: row !important;
 gap: 4px !important;
 }

 /* Topbar — nom user sur une ligne */
 .tb-user {
 max-width: 80px;
 overflow: hidden;
 }
 .tb-user span:first-child {
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 max-width: 60px;
 font-size: 11px;
 }
}


/* ═══ Mobile touch targets (min 44px) ═══ */
@media (max-width: 768px) {
 .btn { min-height: 44px; }
 .btn-sm, .cat-toolbar .btn { min-height: 36px; }
 /* Annonce cards — plus aérées pour le touch */
 .ann-row { padding: var(--s3) var(--s4); min-height: 64px; }
 /* Tâches checkbox plus grande */
 .task-check { width: 22px; height: 22px; }
 /* Quick actions dans detail */
 .qa-btn { min-height: 40px; padding: 10px 14px; font-size: 13px; }
 /* Boutons résultat relance */
 .det-result-btn { min-height: 44px; padding: 10px 16px; font-size: 13px; }
 /* Bouton principal relance */
 #btn-relance-done { min-height: 52px; font-size: 15px; }
}

/* ══════════════════════════════════════════════════════════════════════════
 Étiquettes recherche — Feature 2026-06-22
 ══════════════════════════════════════════════════════════════════════════ */

.search-tag {
 display: inline-block;
 background: var(--blue-soft); /* #DCE8F6 — charte design system */
 color: var(--blue); /* #0050B5 — contraste suffisant */
 border: 1px solid rgba(0, 80, 181, 0.18);
 font-size: 10px;
 font-weight: 600;
 padding: 2px 7px;
 border-radius: 4px;
 white-space: nowrap;
 text-overflow: ellipsis;
 overflow: hidden;
 max-width: 180px;
 vertical-align: middle;
}

.search-tag small {
 font-weight: 400;
 opacity: 0.8;
}

.search-tag-more {
 display: inline-block;
 background: #e2e8f0;
 color: #475569;
 font-size: 10px;
 font-weight: 600;
 padding: 3px 8px;
 border-radius: 10px;
 white-space: nowrap;
 vertical-align: middle;
}

/* ── Aperçu du message dans la fiche (2026-09-07) ──────────────────────────
   Voir le texte exact avant de l'envoyer. Il est rendu par la même dérivation
   de palier que l'envoi : un aperçu qui montre autre chose ferait valider un
   message pour un autre. */
.fiche-apercu { margin: var(--s4) 0; border: 1px solid var(--grey-150); border-radius: 6px;
                background: #fff; overflow: hidden; }
.fiche-apercu-tete { display: flex; align-items: baseline; justify-content: space-between;
                     gap: 10px; padding: 8px 12px; background: var(--grey-50);
                     border-bottom: 1px solid var(--grey-150);
                     font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
                     color: var(--grey-400); font-weight: 600; }
.fiche-apercu-tag { font-family: var(--mono); font-size: 10px; letter-spacing: .03em;
                    text-transform: none; color: var(--grey-500); }
.fiche-apercu-texte { margin: 0; padding: 11px 13px; font-family: var(--mono);
                      font-size: 11.5px; line-height: 1.7; white-space: pre-wrap;
                      color: var(--ink); overflow-y: auto;
                      /* 8 lignes PLUS le rembourrage : sans lui, la coupe tombe
                         au milieu de la 8e ligne et le texte a l'air cassé. */
                      max-height: calc(1.7em * 8 + 22px); }
.fiche-apercu-texte.vide { color: var(--grey-400); font-style: italic; }

/* ── Les blocs de la journée (2026-09-07) ──────────────────────────────────
   Prospection et suivi sont deux métiers : chacun son en-tête, son compteur
   (le VRAI total) et sa règle de tri, affichée pour qu'on sache pourquoi une
   ligne est en haut. */
.bloc-head { display: flex; align-items: baseline; justify-content: space-between;
             gap: 12px; padding: 12px var(--s5) 10px; background: #fff;
             border-bottom: 1px solid var(--grey-150); position: sticky; top: 0; z-index: 2; }
.bloc-head + .bloc-head { border-top: 1px solid var(--grey-150); }
.cat-list + .bloc-head, .bloc-plus + .bloc-head { border-top: 1px solid var(--grey-150); }
.bloc-titre { font-weight: 600; font-size: 14px; display: flex; align-items: baseline; gap: 9px; }
.bloc-n { font-family: var(--mono); font-size: 12px; color: #fff; background: var(--ink);
          border-radius: 9px; padding: 1px 8px; font-weight: 500; }
.bloc-tri { font-family: var(--mono); font-size: 10.5px; color: var(--grey-400);
            letter-spacing: .02em; }
.bloc-plus { padding: 9px var(--s5); font-size: 12px; color: var(--grey-500);
             background: var(--grey-50); border-bottom: 1px solid var(--grey-150);
             font-family: var(--mono); }
.bloc-plus a { color: var(--red); text-decoration: none; border-bottom: 1px solid currentColor; }

/* La cellule d'action : largeur fixe, contenu centré, jamais de débordement
   sur le prix. C'est ce qui permet de balayer la colonne sans lire. */
.cat-row-action-cell { min-width: 0; }
.cat-row-action { display: block; width: 100%; text-align: center;
                  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── L'action, en liste (2026-09-07) ───────────────────────────────────────
   Six pastels codes en dur tenaient lieu de hierarchie et n'en donnaient
   aucune : de loin ils se ressemblaient tous. L'etat se dit desormais en
   mono capitales, encre attenuee, sans cadre ni pastille — regle 3 du
   livrable : « aucun badge ». Ce qui est ACTIONNABLE est en encre pleine,
   ce qui attend est attenue. Aucun rouge en liste : il est reserve au
   bouton d'envoi de l'ecran de travail. */
.cat-row-action { font-family: var(--flu-font-data); font-size: 11.5px;
                  font-weight: 500; letter-spacing: .04em; color: var(--flu-ink);
                  display: block; width: 100%; white-space: nowrap;
                  overflow: hidden; text-overflow: ellipsis; }
.cat-row-action[data-action="attendre"],
.cat-row-action[data-action="aucune"] { color: var(--flu-ink-muted); font-weight: 400; }

/* L'ecran de travail occupe toute la largeur : sa barre de mode remplace la
   barre laterale, et la mesure fixe de 1160 px se centre sur la fenetre. */
.app.app-sans-barre { grid-template-columns: 1fr; }

/* ═══════════════════════════════════════════════════════════════════════════
   LE RAIL (200 px, pleine hauteur)
   ═══════════════════════════════════════════════════════════════════════════ */
.rail { position: fixed; top: 0; left: 0; width: var(--rail-w); height: 100vh;
        background: var(--flu-navy); display: flex; flex-direction: column;
        padding: 30px 0 22px; z-index: 60; }
.rail-marque { display: flex; align-items: center; gap: 8px;
               font-family: var(--flu-font-ui); font-weight: 700; font-size: 13px;
               letter-spacing: .2em; color: #fff; padding: 0 22px; margin-bottom: 38px; }
.rail-marque-carre { width: 12px; height: 12px; background: var(--flu-red); flex: none; }

.rail-nav { display: flex; flex-direction: column; }
/* Aucun fond de survol, aucun rectangle : l'état actif se dit par le trait
   rouge et par le poids du libellé. */
.rail-item { display: flex; align-items: baseline; justify-content: space-between;
             gap: 12px; padding: 14px 22px; text-decoration: none;
             font-family: var(--flu-font-ui); font-weight: 400; font-size: 15px;
             color: var(--flu-ink-on-navy); }
.rail-item:hover { color: #fff; }
.rail-item.on { color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 var(--flu-red); }
.rail-n { font-family: var(--flu-font-data); font-weight: 400; font-size: 13px;
          color: var(--flu-ink-on-navy); }
.rail-item.on .rail-n { color: #fff; }

.rail-compte { margin-top: auto; padding: 0 22px; position: relative; }
.rail-compte-btn { display: block; width: 100%; text-align: left; background: none;
                   border: 0; padding: 0; cursor: pointer; }
.rail-compte-nom { display: block; font-family: var(--flu-font-data); font-size: 12px;
                   line-height: 1.6; color: var(--flu-ink-on-navy); }
.rail-compte-role { display: block; font-family: var(--flu-font-data); font-size: 11px;
                    line-height: 1.6; color: var(--flu-ink-on-navy); }
.rail-menu { position: absolute; bottom: 100%; left: 22px; right: 22px;
             margin-bottom: 12px; background: var(--flu-white);
             border: 1px solid var(--flu-rule); padding: 4px 0; }
.rail-menu[hidden] { display: none; }
.rail-menu a, .rail-menu button { display: block; width: 100%; text-align: left;
             padding: 8px 16px; font-family: var(--flu-font-ui); font-size: 14px;
             color: var(--flu-ink); text-decoration: none; background: none;
             border: 0; cursor: pointer; }
.rail-menu a:hover, .rail-menu button:hover { background: var(--flu-surface); }

/* Tout le reste de la page vit à droite du rail. */
body { padding-left: var(--rail-w); }
.app { min-height: 100vh; }