/* =====================================================================
   Identité — Private Leads
   =====================================================================

   INTER, HÉBERGÉE ICI. La feuille la déclarait depuis toujours sans jamais
   la charger : tout l'outil s'affichait donc dans la police système, et
   différemment sur chaque poste. Elle est servie depuis nos assets et non
   depuis Google : aucun appel sortant, donc aucune adresse IP de visiteur
   transmise à un tiers — ce qu'il aurait fallu déclarer dans la notice de
   confidentialité, pour une police.

   Sous-ensemble latin uniquement (47 Ko + 50 Ko) : le cyrillique, le grec et
   le vietnamien tripleraient le poids sans servir à un outil belge.

   font-display: swap — le texte s'affiche tout de suite dans la police de
   repli et bascule à l'arrivée d'Inter. Sur un outil de travail, lire vite
   compte plus qu'éviter un reflow.

   PLAFOND À 700 — l'axe de graisse du fichier s'arrête là. La feuille
   demandait 800, 900 et même 950 à vingt-cinq endroits : le navigateur
   rendait les trois à l'identique. Un titre de page, l'intitulé d'une
   puce d'état et un en-tête de tableau tombaient donc exactement au même
   poids, et la hiérarchie annoncée n'existait sur aucun écran.

   La hiérarchie tient maintenant dans 400 / 500 / 600 / 700, et se
   complète par la TAILLE, la COULEUR et l'APPROCHE — pas par une graisse
   que la police ne sait pas dessiner. Ne pas réécrire de valeur au-dessus
   de 700 : elle n'aurait aucun effet visible.
   ===================================================================== */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/assets/fonts/inter-latin.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 400 700;
    font-display: swap;
    src: url('/assets/fonts/inter-latin-italic.woff2') format('woff2');
}

:root {
    /* --- Échelles ------------------------------------------------------
       Avant : 14 tailles de police, 10 rayons, des espacements au jugé —
       dont un « 12.5px ». Rien ne s'accordait parce que rien n'était
       décidé. Ces trois échelles sont la décision ; tout s'y rapporte.

       La base est à 13px : c'est un outil dense, qu'on lit à la journée
       sur des tableaux, pas une page de lecture. */
    --text-xs: 11px;
    --text-sm: 12px;
    --text-base: 14px;
    --text-md: 15px;
    --text-lg: 18px;
    --text-xl: 22px;
    --text-2xl: 28px;
    /* Les grands nombres du tableau de bord. Un rôle, pas une taille de
       circonstance — ils étaient à 34 et 40px sans raison de différer. */
    --text-display: 32px;

    /* Pas de 4 : tout espacement est un multiple, sans exception. */
    /* Deux demi-marches sous le pas de 4 : l'écart entre deux puces posées
       sur une même ligne se règle au pixel, pas au quart de ligne. */
    --space-05: 2px;
    --space-1: 4px;
    --space-1-5: 6px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-10: 40px;

    /* RAYONS — resserrés le 26/09/2026.
       
       L'outil comptait 23 éléments en pilule et des cartes à 22 px : la
       signature d'une application grand public. Un instrument de travail
       tient ses angles. Les valeurs sont divisées par deux environ ; la
       pilule est réservée aux étiquettes d'état, où la forme DIT « ceci
       est un statut, pas un bouton ». */
    --radius-sm: 6px;
    --radius: 8px;
    --radius-lg: 10px;
    --radius-xl: 14px;
    /* Le panneau d'accueil, seule surface qui s'autorise un peu plus. */
    --radius-2xl: 16px;
    --radius-pill: 999px;

    /* --- Couleurs ------------------------------------------------------ */
    --bg: #f4f6f9;
    --bg-soft: #eef2ff;
    --bg-blue: #eaf0ff;
    --input: #ffffff;
    --panel: #ffffff;
    --border: #e2e7ef;
    /* Filet INTÉRIEUR : la séparation entre deux blocs d'un même panneau doit
       être plus discrète que le bord du panneau lui-même, sinon la carte
       paraît découpée en morceaux.

       Le jeton était déjà employé dans le gabarit du tableau de bord — deux
       fois — mais n'avait jamais été défini. `var(--border-light)` sans
       valeur ni repli est une déclaration invalide : le navigateur la jette,
       et les deux filets ne s'affichaient tout simplement pas. Ça ne casse
       rien, ça ne prévient pas, et ça ne se voit que si on cherche le trait
       qui manque. */
    --border-light: #eef1f6;
    --text: #0e1a2f;
    /* Trois couleurs assombries le 26/09/2026 pour passer le seuil AA (4,5:1).
       Teinte et saturation inchangées : la palette garde son caractère, les
       couleurs foncent seulement de ce qu'il faut.

       --muted portait TOUT le texte secondaire — libellés de champ, méta des
       cartes, notes d'écran — et tombait à 4,45 sur le fond crème et 4,20
       dans un champ de saisie. C'est la couleur la plus répandue de l'outil,
       donc celle dont le défaut se paie le plus souvent.

       --good et --warning servent aux pastilles d'état : 3,75 et 3,63. Une
       pastille qu'on ne lit pas ne signale rien. */
    --muted: #5a6478;
    --primary: #2f54eb;
    --primary-dark: #1c38b0;
    --accent: #1fb980;
    --good: #0e7c57;
    --bad: #c13d35;
    --warning: #9f6a10;
    /* ENCRES SUR TEINTE.

       Les trois couleurs d'état ci-dessus ont été calées pour passer le
       contraste SUR BLANC, et elles y passent de justesse. Or elles ne
       s'écrivent presque jamais sur du blanc : elles s'écrivent dans des
       puces, sur un fond de leur propre teinte — et là, les trois
       échouaient (4,25, 4,37 et 4,07 pour un minimum de 4,5). Personne
       n'avait vérifié cette combinaison-là, parce que la teinte de fond
       était écrite en hexadécimal ailleurs dans la feuille.

       Une couleur d'état a donc deux valeurs : celle du texte sur blanc,
       et celle du texte sur sa propre teinte. Ces encres-ci tiennent
       5,5 au minimum, sur fond blanc comme sur fond crème. */
    /* Le gris secondaire souffre du même écart : #626e81 passait de justesse
       sur du blanc et échouait dès qu'il s'écrivait sur une puce beige
       (4,31) ou sur un rond d'avatar (3,93) — soit, sur l'écran de suivi,
       soixante-deux libellés sous le seuil. */
    --muted-ink: #4a5468;
    --good-ink: #0d684b;
    --bad-ink: #a4342d;
    --warning-ink: #7e540d;
    --primary-ink: #2443c9;
    /* ÉLÉVATION — refondue le 26/09/2026.

       Les ombres portaient jusqu'à 60 px de diffusion, et les boutons un
       halo bleu. Tout flottait, donc plus rien ne se détachait : quand
       chaque surface est en lévitation, l'élévation ne veut plus rien dire.

       Ce sont les FILETS qui séparent désormais. L'ombre ne fait que poser
       la surface sur le papier — un pixel de contact, une diffusion courte.
       La grande ombre est gardée pour ce qui flotte vraiment : un menu, une
       fenêtre au-dessus du contenu. */
    --shadow-flat: 0 1px 1px color-mix(in srgb, var(--text) 4%, transparent);
    --shadow: 0 1px 2px color-mix(in srgb, var(--text) 5%, transparent), 0 6px 16px -10px color-mix(in srgb, var(--text) 20%, transparent);
    --shadow-soft: 0 1px 2px color-mix(in srgb, var(--text) 5%, transparent);
    /* DA d'octobre 2026 : la navigation passe en encre sombre. Elle tient
       l'identité de l'outil et laisse au contenu tout le blanc. */
    --ink: #0d1628;
    --ink-2: #16223a;
    --ink-text: rgba(226, 232, 245, .74);
    --ink-muted: rgba(226, 232, 245, .42);
    --ink-line: rgba(255, 255, 255, .07);
    --primary-light: #8aa2ff;
    --ring: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
    --shadow-raised: 0 8px 28px -8px color-mix(in srgb, var(--text) 22%, transparent);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--text);
    background: var(--bg);
}

a {
    color: var(--primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.shell {
    min-height: 100vh;
}

.app-header {
    position: sticky;
    top: 0;
    z-index: 20;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(18px);
}

.app-strip {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    min-height: 32px;
    padding: 0 28px;
    color: var(--muted);
    font-size: var(--text-base);
    font-weight: 700;
}

.app-strip span + span::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    margin: 0 18px 2px 0;
    border-radius: 50%;
    background: #c8cfdb;
}

.app-nav-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-7);
    min-height: 78px;
    padding: 14px 28px;
}

.brand {
    color: var(--text);
    font-size: var(--text-2xl);
    font-weight: 700;
    letter-spacing: -.02em;
    text-decoration: none;
    white-space: nowrap;
}

.brand span {
    color: var(--primary);
}

.brand:hover {
    text-decoration: none;
}

.nav {
    display: flex;
    align-items: center;
    flex: 1 1 520px;
    flex-wrap: wrap;
    gap: var(--space-1-5);
    overflow: visible;
}

.nav a,
.nav button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--radius);
    padding: 9px 12px;
    color: var(--muted-ink);
    background: transparent;
    text-align: center;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.logout-form {
    margin-left: auto;
}

.nav a:hover,
.nav button:hover {
    background: color-mix(in srgb, var(--primary) 8%, white);
    color: var(--primary);
    text-decoration: none;
}

.logout-form button {
    display: inline-flex;
    border: 0;
    border-radius: var(--radius);
    padding: 12px 18px;
    background: var(--text);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.logout-form button:hover {
    background: var(--primary);
}

.main {
    min-width: 0;
    width: min(1440px, 100%);
    margin: 0 auto;
    padding: 34px 28px 56px;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

h1 {
    margin: 0;
    font-size: var(--text-display);
    font-weight: 700;
    /* L'approche d'Inter est dessinée pour du texte courant. À 36 px elle
       laisse bâiller les titres ; on la resserre, puisque c'est elle qui
       porte désormais l'autorité que la graisse ne peut plus donner. */
    letter-spacing: -.022em;
}

h2 {
    margin: 0 0 14px;
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: -.012em;
}

h3 {
    margin: 0;
    font-size: var(--text-md);
    line-height: 1.25;
    letter-spacing: 0;
}

/* ---------------------------------------------------------------------
   Bandeaux d'information.

   Le bandeau n'avait qu'un seul ton, bleu, écrit en hexadécimal hors
   palette. L'avertissement de collecte en panne — le message le plus
   important de l'outil — se peignait donc à la main dans le gabarit,
   avec six couleurs Tailwind par défaut qui n'existaient nulle part
   ailleurs. Trois états, déclarés ici, sur les couleurs de la maison.

   Le filet de gauche porte la gravité : on la voit avant de lire.
   --------------------------------------------------------------------- */
.flash {
    border: 1px solid color-mix(in srgb, var(--primary) 28%, transparent);
    border-left: 3px solid var(--primary);
    background: color-mix(in srgb, var(--primary) 6%, transparent);
    color: var(--primary-dark);
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-5);
}

.flash.is-warn {
    border-color: color-mix(in srgb, var(--warning) 30%, transparent);
    border-left-color: var(--warning);
    background: color-mix(in srgb, var(--warning) 7%, transparent);
    color: #7a4f0b;
}

.flash.is-error {
    border-color: color-mix(in srgb, var(--bad) 30%, transparent);
    border-left-color: var(--bad);
    background: color-mix(in srgb, var(--bad) 6%, transparent);
    color: #8f2a23;
}

/* Un lien ou un texte secondaire dans un bandeau rouge ne repart pas en
   bleu de marque ni en gris : ils appartiennent au message, en gardent la
   couleur, et le lien se signale par le soulignement. */
.flash .muted,
.flash small,
.flash p {
    color: inherit;
    opacity: .9;
}

.flash a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.grid {
    display: grid;
    gap: var(--space-4);
}

.stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: var(--space-5);
}

.stat,
.panel {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-flat);
}

.stat {
    padding: 22px 22px 24px;
}

.stat strong {
    display: block;
    color: var(--text);
    font-size: var(--text-display);
    font-weight: 700;
    margin-top: var(--space-1);
}

.stat strong.stat-date {
    font-size: var(--text-md);
    line-height: 1.25;
    word-break: break-word;
}

.stat span {
    color: var(--muted);
}

.panel {
    padding: var(--space-6);
    margin-bottom: var(--space-5);
    min-width: 0;
}

.hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    min-height: 170px;
    margin-bottom: var(--space-5);
    padding: var(--space-6);
    border: 1px solid #c8d1c2;
    border-radius: var(--radius-sm);
    color: #ffffff;
    background:
        linear-gradient(90deg, rgba(24, 35, 29, .94), rgba(31, 122, 90, .78)),
        url("https://images.unsplash.com/photo-1518005020951-eccb494ad742?auto=format&fit=crop&w=1600&q=75");
    background-size: cover;
    background-position: center;
}

.hero h2 {
    margin: 4px 0 8px;
    font-size: var(--text-2xl);
}

.hero p {
    max-width: 720px;
    margin: 0;
    color: rgba(255, 255, 255, .86);
}

.dashboard-overview {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    min-height: 220px;
    margin-bottom: var(--space-6);
    padding: 42px 48px;
    border: 0;
    border-radius: var(--radius-2xl);
    background:
        radial-gradient(circle at 88% 20%, rgba(91, 128, 220, .26) 0 120px, transparent 121px),
        radial-gradient(circle at 74% 82%, rgba(91, 128, 220, .18) 0 60px, transparent 61px),
        var(--bg-blue);
    box-shadow: var(--shadow-soft);
}

.dashboard-overview::after {
    content: "";
    position: absolute;
    right: -80px;
    top: -80px;
    width: 280px;
    height: 280px;
    border-radius: 50px;
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    transform: rotate(22deg);
}

.dashboard-overview > div {
    position: relative;
    z-index: 1;
}

.dashboard-overview h2 {
    margin: 3px 0 6px;
    max-width: 720px;
    font-size: clamp(38px, 5vw, 72px);
    line-height: .98;
    font-weight: 700;
    letter-spacing: 0;
}

.dashboard-overview p {
    max-width: 680px;
    margin: 0;
    color: var(--muted);
    font-size: var(--text-lg);
    font-weight: 500;
    line-height: 1.45;
}

.dashboard-overview .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
    padding: 10px 18px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, .72);
    color: var(--text);
    box-shadow: var(--shadow-soft);
}

.dashboard-overview .eyebrow::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
}

.overview-actions {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* ---------------------------------------------------------------------
   Bascule Location / Vente — un SÉLECTEUR SEGMENTÉ.

   C'étaient deux pilules géantes de 48 px, larges comme des boutons
   d'appel à l'action, l'une entièrement bleue. Deux choix mutuellement
   exclusifs ne sont pas deux actions : ils forment un seul objet à deux
   positions, et la forme doit le dire. Un cadre unique, une cloison au
   milieu, le segment actif enfoncé. On lit « où je suis », plus
   « que puis-je cliquer ».
   --------------------------------------------------------------------- */
/* ---------------------------------------------------------------------
   SÉLECTEUR SEGMENTÉ — un seul composant, trois usages.

   C'étaient trois objets différents pour un même geste : la bascule
   Location / Vente en deux pilules de 48 px dont une entièrement bleue,
   les angles d'Opportunités en pilules à 999 px, et le choix d'agence en
   une rangée de boutons pleins et bordés — six appels à l'action là où il
   n'y a qu'une seule question posée.

   Un choix unique parmi plusieurs n'est pas une suite d'actions : c'est un
   objet à plusieurs positions. Un rail, une position enfoncée. Le bleu
   plein reste réservé à ce qui fait avancer le travail.
   --------------------------------------------------------------------- */
.segmented,
.market-tabs,
.opp-tabs {
    display: inline-flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 0;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--input);
}

.market-tabs {
    margin: 0 0 var(--space-6);
}

.segmented a,
.market-tabs a,
.opp-tabs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 34px;
    padding: 0 var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: transparent;
    color: var(--muted);
    font-size: var(--text-base);
    font-weight: 600;
    cursor: pointer;
}

.segmented a:hover,
.market-tabs a:hover,
.opp-tabs a:hover {
    color: var(--text);
    text-decoration: none;
}

/* Le segment actif est POSÉ sur le rail, pas coloré en bleu : c'est un
   état, pas une action. Le bleu reste pour ce qui se clique. */
.segmented a.active,
.market-tabs a.active,
.opp-tabs a.is-on {
    background: var(--panel);
    border-color: var(--border);
    color: var(--text);
    box-shadow: var(--shadow-flat);
}

/* Le compte porté par un segment. */
.segmented .count,
.market-tabs strong,
.opp-n {
    min-width: 22px;
    border-radius: var(--radius-sm);
    padding: 1px var(--space-1-5);
    background: color-mix(in srgb, var(--text) 7%, transparent);
    color: var(--muted-ink);
    font-size: var(--text-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.segmented a.active .count,
.market-tabs a.active strong,
.opp-tabs a.is-on .opp-n {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary);
}

/* Le choix de marché dans les formulaires garde sa forme de case, mais
   suit les mêmes angles. */
.market-choice {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.market-choice label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 38px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-2) var(--space-4);
    background: var(--panel);
    color: var(--text);
    font-weight: 600;
    cursor: pointer;
}

.market-choice label:hover {
    border-color: color-mix(in srgb, var(--primary) 36%, transparent);
    color: var(--primary);
}

.market-choice label:has(input:checked) {
    border-color: var(--primary);
    background: var(--bg-soft);
    color: var(--primary);
}

.market-choice input {
    width: auto;
    margin: 0;
    accent-color: var(--primary);
}

.eyebrow {
    display: inline-block;
    color: var(--primary);
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr);
    gap: var(--space-5);
    align-items: start;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.section-header h2 {
    margin: 0;
}

.table-wrap {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    border-bottom: 1px solid var(--border);
    padding: 13px 10px;
    text-align: left;
    vertical-align: top;
}

th {
    color: var(--muted);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.muted {
    color: var(--muted);
}

/* La puce garde sa forme de pilule : ici, l'arrondi complet DIT « ceci
   est un état, pas un bouton » — c'est la seule famille d'objets à qui
   la forme reste réservée. Les teintes, elles, dérivent des couleurs de
   la maison au lieu d'être quatre hexadécimaux isolés. */
.badge {
    display: inline-block;
    border-radius: var(--radius-pill);
    padding: 3px var(--space-3);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.4;
    background: color-mix(in srgb, var(--text) 6%, transparent);
    color: #344054;
}

/* Puce compacte : les listes serrées descendaient à 10px en style en
   ligne, sous le plancher de l'échelle. 11px est le plancher, et il se
   demande par une classe. */
.badge.sm {
    padding: 2px var(--space-2);
    font-size: var(--text-xs);
}

.badge.good {
    background: color-mix(in srgb, var(--good) 10%, transparent);
    color: var(--good-ink);
}

.badge.bad {
    background: color-mix(in srgb, var(--bad) 10%, transparent);
    color: var(--bad-ink);
}

.badge.warn {
    background: color-mix(in srgb, var(--warning) 10%, transparent);
    color: var(--warning-ink);
}

.badge.info {
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary-ink);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.filter-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.full {
    grid-column: 1 / -1;
}

label {
    display: grid;
    gap: var(--space-1-5);
    color: var(--muted);
    font-size: var(--text-base);
}

input,
select,
textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 13px 16px;
    font: inherit;
    color: var(--text);
    background: var(--input);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 14%, transparent);
    outline: none;
}

textarea {
    min-height: 120px;
    resize: vertical;
}

.checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text);
}

.checkbox input {
    width: auto;
}

.filter-block {
    display: grid;
    gap: var(--space-2);
    color: var(--muted);
    font-size: var(--text-base);
}

.commune-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--space-2);
}

.check-tile,
.check-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 42px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: #fff;
    color: var(--text);
}

.check-tile {
    padding: 9px 10px;
}

.check-row {
    justify-content: flex-start;
    padding: 10px 12px;
}

.check-tile input,
.check-row input {
    width: auto;
    margin: 0;
}

.check-tile span,
.check-row span {
    min-width: 0;
}

.check-row strong,
.check-row small {
    display: block;
}

.check-row small {
    margin-top: 2px;
    color: var(--muted);
    font-size: var(--text-sm);
}

.commune-settings {
    display: grid;
    gap: var(--space-3);
}

.criteria-form {
    display: grid;
    gap: var(--space-4);
    align-items: end;
}

.criteria-layout {
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
}

.criteria-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.option-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-2);
}

.criteria-summary {
    display: grid;
    gap: var(--space-3);
}

.criteria-summary div {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: #fff;
}

.criteria-summary span {
    color: var(--muted);
    font-size: var(--text-sm);
}

.criteria-summary strong {
    font-size: var(--text-md);
    line-height: 1.3;
}

.import-status {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.import-status p {
    margin: 0;
    color: var(--muted);
    line-height: 1.35;
}

.advanced-source summary {
    cursor: pointer;
    color: var(--primary);
    font-weight: 700;
}

.advanced-source:not([open]) .advanced-stack {
    display: none;
}

.advanced-stack {
    display: grid;
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.subsection {
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
}

.source-run {
    margin-top: var(--space-3);
}

.actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* ---------------------------------------------------------------------
   Boutons.

   Ils étaient en graisse 900 — le Black d'Inter, dessiné pour des titres
   d'affiche. Sur un bouton de 13px, ça crie. 600 tient la même lisibilité
   sans hausser le ton, et laisse le 700 aux prix et aux grands nombres.

   Le padding était de 13px : la seule valeur impaire de la feuille.

   Ni anneau de focus ni état désactivé n'existaient : on ne pouvait pas
   naviguer au clavier en voyant où l'on était, et un bouton désactivé
   ressemblait à un bouton actif.
   --------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    border: 1px solid var(--primary);
    /* Plus de pilule. Un bouton rectangulaire à angles tenus se lit comme
       une commande ; une pilule se lit comme une étiquette ou une réclame.
       C'est le seul changement qui, à lui seul, fait passer l'ensemble
       d'une application grand public à un instrument de travail. */
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-5);
    background: var(--primary);
    color: #fff;
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: var(--shadow-flat);
    transition: background .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease;
}

.btn:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    text-decoration: none;
}

/* L'anneau se pose SUR le bouton, pas autour : un contour extérieur sur une
   pilule posée dans un tableau déborde de sa cellule. */
.btn:focus-visible {
    outline: 2px solid var(--primary-dark);
    outline-offset: 2px;
}

.btn[disabled],
.btn:disabled {
    opacity: .5;
    cursor: not-allowed;
    box-shadow: none;
}

.btn.secondary {
    background: #fff;
    color: var(--primary);
    box-shadow: none;
}

.btn.secondary:hover {
    background: color-mix(in srgb, var(--primary) 8%, white);
}

/* Rouge réservé à ce qui détruit : supprimer une agence, retirer un accès.
   Il ne se colore qu'au survol — un écran plein de boutons rouges ne
   signale plus rien. */
.btn.danger {
    border-color: #e6c9c6;
    color: var(--bad);
}

.btn.danger:hover {
    background: #fdf1f0;
    border-color: var(--bad);
    color: var(--bad);
}

/* Une puce DANS un bouton plein : elle prend le blanc et rend le bleu au
   libellé, au lieu de laisser le fond du bouton remonter derrière elle. */
.btn:not(.secondary):not(.ghost):not(.danger) .badge {
    background: #fff;
    color: var(--primary-ink);
}

.btn.secondary .badge,
.btn.ghost .badge,
.btn.danger .badge {
    background: color-mix(in srgb, var(--text) 7%, transparent);
}

/* Taille réduite, pour les gestes secondaires posés dans une liste. */
.btn.sm {
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-sm);
}

/* La connexion porte désormais .public-page, qui gère le centrage. Garder ici
   un `display: grid` faisait dépendre le résultat de l'ordre des règles. */
.login-page {
    padding: var(--space-6);
}

.login-card {
    width: min(420px, 100%);
    margin: 0 auto;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--space-8) var(--space-6) var(--space-6);
    box-shadow: var(--shadow);
}

.login-card h1 {
    margin: 0;
    font-size: var(--text-2xl);
    letter-spacing: -.02em;
}

/* Ce que fait l'outil, sous le titre : un prospect arrive parfois sur la
   connexion avant d'avoir rien vu d'autre. */
.login-baseline {
    margin: var(--space-2) 0 var(--space-6);
    color: var(--muted);
    font-size: var(--text-base);
    line-height: 1.5;
}

.login-card label {
    font-size: var(--text-sm);
    color: var(--muted);
}

.login-card .btn {
    margin-top: var(--space-2);
}

.phone-list {
    display: grid;
    gap: var(--space-1);
}

.task-list {
    display: grid;
    gap: var(--space-3);
}

.task {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: #fff;
}

.task p {
    margin: 6px 0;
    color: var(--muted);
}

.task .result {
    color: var(--primary-dark);
    font-size: var(--text-base);
}

.search-panel,
.communes-panel {
    align-self: stretch;
}

.quick-search {
    display: grid;
    gap: var(--space-3);
}

.followup-list {
    display: grid;
    gap: var(--space-3);
}

.followup-list article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: #fff;
}

.followup-list strong,
.followup-list span {
    display: block;
}

.empty-state {
    display: grid;
    min-height: 120px;
    place-items: center;
    border: 1px dashed var(--border);
    border-radius: var(--radius-xl);
    color: var(--muted);
    background: #fff;
    text-align: center;
}

.empty-state.small {
    min-height: 76px;
    padding: var(--space-3);
}

.empty-state-action {
    justify-items: start;
    min-height: 220px;
    padding: var(--space-7);
    text-align: left;
}

.empty-state-action strong {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--text);
    font-size: var(--text-lg);
}

.empty-state-action p {
    max-width: 720px;
    margin: 0 0 18px;
    color: var(--muted);
    line-height: 1.45;
}

.workflow-schema {
    display: grid;
    grid-template-columns: repeat(9, auto);
    align-items: center;
    justify-content: start;
    gap: var(--space-3);
    overflow-x: auto;
}

.workflow-schema div {
    min-width: 120px;
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: #fff;
    font-weight: 700;
    text-align: center;
}

.workflow-schema span {
    color: var(--muted);
}

.lead-board {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.lead-column {
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--panel);
    padding: var(--space-3);
}

.lead-column-head,
.lead-card-top,
.lead-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.lead-column-head {
    margin-bottom: var(--space-3);
}

.lead-column-head h2 {
    margin: 0;
    font-size: var(--text-md);
}

.lead-card {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: #fff;
    margin-bottom: var(--space-3);
}

.lead-card p,
.event-list p,
.job-list p {
    margin: 0;
    color: var(--muted);
    line-height: 1.35;
}

.lead-meta strong {
    font-size: var(--text-md);
}

.followup-date {
    padding: 7px 8px;
    border-radius: var(--radius-pill);
    background: #fef0c7;
    color: var(--warning);
    font-size: var(--text-sm);
    font-weight: 700;
}

.lead-form,
.lead-detail-form,
.template-picker,
.template-list,
.event-list,
.job-list {
    display: grid;
    gap: var(--space-3);
}

.template-picker {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    margin-bottom: var(--space-3);
}

.message-workspace {
    display: grid;
    gap: var(--space-4);
}

.message-preview-card {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: #fff;
}

.message-preview-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}

.message-preview-head .eyebrow {
    color: var(--primary);
}

.message-metrics {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-1-5);
}

.message-metrics span {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 4px 8px;
    background: #fff;
    color: var(--muted);
    font-size: var(--text-sm);
}

.message-metrics strong {
    color: var(--text);
}

.template-item {
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--space-3);
    background: #fff;
}

.template-item summary {
    cursor: pointer;
    font-weight: 700;
}

.template-item form {
    margin-top: var(--space-3);
}

.template-config {
    margin-top: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: #fff;
}

.template-config summary {
    cursor: pointer;
    padding: var(--space-3);
    font-weight: 700;
}

.template-config[open] summary {
    border-bottom: 1px solid var(--border);
}

.template-editor {
    padding: var(--space-3);
}

.template-editor textarea[name="body"] {
    min-height: 220px;
}

.template-editor textarea[name="signature"] {
    min-height: 96px;
}

.messages-layout {
    grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
}

.variable-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1-5);
}

.variable-list span,
.variable-chip {
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 4px 8px;
    background: #fff;
    color: var(--muted);
    font-size: var(--text-sm);
}

.variable-palette,
.variable-reference {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.variable-chip {
    display: inline-grid;
    gap: var(--space-05);
    border-radius: var(--radius-lg);
    padding: 8px 10px;
    cursor: pointer;
    text-align: left;
}

.variable-chip:hover {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, white);
}

.variable-chip strong,
.variable-chip span {
    display: block;
}

.variable-chip strong {
    color: var(--text);
    font-size: var(--text-sm);
}

.variable-chip span {
    color: var(--muted);
    font-size: var(--text-xs);
}

.qualification-score {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: #fff;
}

.qualification-score strong {
    font-size: var(--text-2xl);
}

.signal-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1-5);
    margin: 8px 0 14px;
}

.event-list article,
.job-list article {
    display: grid;
    gap: var(--space-1-5);
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: #fff;
}

.relance-overview p {
    max-width: 720px;
}

.relance-stats {
    margin-bottom: var(--space-5);
}

.campaign-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    align-items: end;
}

.autopilot-board {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr));
}

.job-card {
    align-content: start;
}

.job-head,
.job-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.job-actions {
    display: grid;
    grid-template-columns: minmax(120px, .7fr) minmax(170px, 1fr);
    align-items: end;
}

.job-actions button {
    width: fit-content;
}

.result {
    color: var(--primary-dark);
    font-weight: 600;
}

.contact-list a {
    display: inline-flex;
    width: fit-content;
}

.listing-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
    gap: var(--space-4);
}

.listing-card {
    display: grid;
    grid-template-columns: 150px 1fr;
    min-height: 220px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: #fff;
    box-shadow: var(--shadow-flat);
}

.listing-card.compact-card {
    min-height: 190px;
}

.listing-card.compact-card .listing-image,
.listing-card.compact-card .listing-image img {
    min-height: 190px;
}

.listing-image {
    display: grid;
    place-items: center;
    min-height: 220px;
    background: color-mix(in srgb, var(--primary) 8%, white);
    color: var(--muted);
    font-size: var(--text-base);
    text-align: center;
}

.listing-image img {
    width: 100%;
    height: 100%;
    min-height: 220px;
    object-fit: cover;
    display: block;
}

.listing-body {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
}

.listing-topline,
.listing-meta,
.date-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.listing-body p {
    margin: 0;
    color: var(--muted);
    line-height: 1.35;
}

.listing-meta {
    padding-top: var(--space-1);
}

.listing-meta strong {
    font-size: var(--text-lg);
}

.date-grid {
    align-items: stretch;
}

.date-grid span {
    flex: 1;
    min-width: 0;
    padding: var(--space-2);
    border-radius: var(--radius-lg);
    background: var(--input);
    color: var(--muted);
    font-size: var(--text-sm);
}

.date-grid strong {
    color: var(--text);
    font-size: var(--text-sm);
    word-break: break-word;
}

.image-path {
    padding: 7px 8px;
    border-radius: var(--radius-lg);
    background: var(--input);
    color: var(--muted);
    font-size: var(--text-xs);
    word-break: break-all;
}

.mini-path {
    display: inline-block;
    max-width: 220px;
    color: #715019;
    font-size: var(--text-xs);
    word-break: break-all;
}

.thumb {
    width: 96px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    display: block;
}

.detail-media {
    display: grid;
    grid-template-columns: minmax(220px, 360px) 1fr;
    gap: var(--space-4);
    align-items: start;
    margin-bottom: var(--space-5);
}

.detail-media img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
}

.run-list {
    display: grid;
    gap: var(--space-3);
}

.run-list article {
    display: grid;
    grid-template-columns: auto minmax(150px, .8fr) auto auto;
    align-items: start;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: #fff;
}

.run-list p {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--muted);
}

@media (max-width: 1180px) {
    .app-header {
        position: static;
    }

    .app-nav-row {
        column-gap: var(--space-5);
    }

    .nav {
        order: 3;
        flex-basis: 100%;
    }
}

@media (max-width: 900px) {
    .app-strip {
        display: none;
    }

    .app-nav-row {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--space-4);
        padding: var(--space-5);
    }

    .brand {
        font-size: var(--text-xl);
    }

    .nav {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-2);
        padding-bottom: 0;
    }

    .nav a,
    .nav button {
        min-width: 0;
        padding: 9px 8px;
        border: 1px solid var(--border);
        background: #fff;
        font-size: var(--text-base);
    }

    .logout-form {
        order: 4;
        margin-left: 0;
        width: 100%;
    }

    .logout-form button {
        width: 100%;
        padding: 10px 14px;
        font-size: var(--text-md);
    }

    .form-grid,
    .filter-form,
    .criteria-split,
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-3);
    }

    .stat {
        padding: 14px 16px 16px;
    }

    .stat strong {
        font-size: var(--text-2xl);
    }

    .hero {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-overview {
        align-items: stretch;
        flex-direction: column;
        min-height: 0;
        padding: var(--space-7);
        border-radius: var(--radius-2xl);
    }

    .dashboard-overview h2 {
        font-size: var(--text-2xl);
    }

    .dashboard-overview p {
        font-size: var(--text-md);
    }

    .overview-actions {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
    }

    .overview-actions form {
        display: flex;
        width: 100%;
    }

    .overview-actions .btn {
        flex: 1 1 auto;
        width: 100%;
        white-space: normal;
    }

    .market-tabs,
    .market-choice {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .market-tabs a,
    .market-choice label {
        width: 100%;
        padding-inline: 12px;
    }

    .listing-card {
        grid-template-columns: 1fr;
    }

    .run-list article {
        grid-template-columns: 1fr;
    }

    .followup-list article,
    .template-picker,
    .campaign-form,
    .job-actions,
    .messages-layout {
        grid-template-columns: 1fr;
    }

    .message-preview-head {
        display: grid;
    }

    .message-metrics {
        justify-content: flex-start;
    }

    .detail-media {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 360px) {
    .nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.sequence-steps {
    display: grid;
    gap: var(--space-3);
    margin: 10px 0 16px;
}

.sequence-step {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg);
}

.sequence-step-form {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(120px, .6fr) auto;
    gap: var(--space-3);
    align-items: end;
}

@media (max-width: 720px) {
    .sequence-step-form {
        grid-template-columns: 1fr;
    }
}

.owner-card {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    margin-top: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg);
}

.owner-card.compact {
    padding: var(--space-3);
    gap: var(--space-3);
}

.owner-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e4e0d9;
    color: #9aa3b5;
}

.owner-card.compact .owner-avatar {
    width: 32px;
    height: 32px;
}

.owner-avatar svg {
    width: 55%;
    height: 55%;
}

.owner-info {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
}

.owner-topline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.owner-name {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--muted);
}

.owner-flag {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-pill);
    padding: 2px 9px;
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: .01em;
}

.owner-flag.no-agency {
    color: #fff;
    background: var(--bad);
}

.owner-flag.direct {
    color: var(--good-ink);
    background: color-mix(in srgb, var(--good) 10%, transparent);
}

.owner-contacts {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.owner-contacts a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    font-size: var(--text-base);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.owner-contacts svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    color: var(--muted);
}

.owner-form-only {
    font-size: var(--text-sm);
    font-weight: 600;
    /* Écrit sur le fond crème, pas sur du blanc : encre teintée. */
    color: var(--warning-ink);
}

@media (max-width: 640px) {
    .main {
        padding: 20px 14px 44px;
    }

    h1 {
        font-size: var(--text-2xl);
    }

    .app-nav-row {
        padding: var(--space-4);
    }

    .panel {
        padding: 16px 14px;
        border-radius: var(--radius-lg);
    }

    .dashboard-overview {
        padding: 22px 18px;
        border-radius: var(--radius-xl);
    }

    .dashboard-overview h2 {
        font-size: var(--text-2xl);
    }

    .dashboard-overview::after {
        display: none;
    }

    .panel-header {
        align-items: stretch;
        flex-direction: column;
    }

    .panel-header .actions,
    .panel-header > .btn {
        width: 100%;
    }

    .section-header {
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .btn {
        padding: 12px 16px;
    }

    table {
        font-size: var(--text-base);
    }

    table th,
    table td {
        padding: 8px 10px;
    }

    .workflow-schema div {
        min-width: 96px;
        padding: 9px 10px;
        font-size: var(--text-base);
    }

    .job-actions button {
        width: 100%;
    }

    .listing-image,
    .listing-image img {
        min-height: 180px;
    }

    .market-tabs a,
    .market-choice label {
        min-height: 42px;
        font-size: var(--text-md);
    }

    .owner-contacts a {
        font-size: var(--text-sm);
    }
}

/* Tuiles de statistiques cliquables du dashboard */
.stat-link {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: transform .12s ease, box-shadow .12s ease;
}

.stat-link:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    text-decoration: none;
}

.stat em {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: var(--text-sm);
    font-style: normal;
    font-weight: 600;
}

.stat.accent-good strong { color: var(--good); }
.stat.accent-warn strong { color: var(--warning); }

/* Barre de filtre compacte */
.filter-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: end;
    gap: var(--space-3);
}

.filter-bar .actions { justify-content: flex-end; }

.header-meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.footnote {
    margin: 16px 0 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
    font-size: var(--text-base);
}

@media (max-width: 900px) {
    .filter-bar {
        grid-template-columns: 1fr;
    }

    .filter-bar .actions { justify-content: flex-start; }
}

/* Kanban commercial */
.board-toolbar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.board-filters { min-width: 220px; }

.board-toolbar-meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.assignee {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-pill);
    padding: 3px 10px;
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary-dark);
    font-size: var(--text-sm);
    font-weight: 600;
}

.assignee.unassigned {
    background: #efeae2;
    color: var(--muted);
}

.lead-flag {
    border-radius: var(--radius);
    padding: 6px 9px;
    background: var(--bg);
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 700;
}

/* Le drapeau « relance due » était un bloc rouge plein, pleine largeur :
   l'objet le plus lourd de la colonne, plus lourd que le bouton qui fait
   avancer le travail. Le plein reste réservé à l'action ; l'urgence se dit
   par la teinte et par un filet, comme partout ailleurs. Le vert, lui,
   était un TROISIÈME vert (rgba(20,150,107)) absent de la palette. */
.lead-flag.good {
    color: var(--good-ink);
    background: color-mix(in srgb, var(--good) 10%, transparent);
    border-left: 3px solid var(--good);
}

.lead-flag.due {
    color: var(--bad-ink);
    background: color-mix(in srgb, var(--bad) 10%, transparent);
    border-left: 3px solid var(--bad);
}

.lead-note {
    margin: 0;
    padding: 8px 10px;
    border-left: 3px solid var(--border);
    color: var(--muted);
    font-size: var(--text-base);
    white-space: pre-line;
}

.lead-edit > summary {
    cursor: pointer;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--primary);
    list-style: none;
}

.lead-edit > summary::-webkit-details-marker { display: none; }
.lead-edit > summary::before { content: "✎ "; }
.lead-edit[open] > summary::before { content: "▾ "; }
.lead-edit .lead-form { margin-top: var(--space-3); }

@media (max-width: 900px) {
    .board-toolbar { flex-direction: column; align-items: stretch; }
}

/* Bandeau d'alerte relances dues */
.alert-banner {
    display: flex;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
    padding: 16px 18px;
    border: 1px solid color-mix(in srgb, var(--bad) 28%, transparent);
    border-left: 5px solid var(--bad);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--bad) 6%, transparent);
}

/* Le bandeau est teinté : ses textes prennent les encres « sur teinte ».
   Le gris secondaire y tombait tout juste sous le seuil (4,50 arrondi). */
.alert-banner strong { color: var(--bad-ink); }
.alert-banner p { margin: 4px 0 0; color: var(--muted-ink); font-size: var(--text-base); }

/* Boutons de relance rapide */
.quick-followup {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1-5);
    font-size: var(--text-sm);
    color: var(--muted);
}

.quick-followup span { font-weight: 700; }

.quick-followup button {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 4px 10px;
    background: #fff;
    color: var(--primary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.quick-followup button:hover {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

/* Graphique en barres */
.bar-chart {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    align-items: end;
    gap: var(--space-2);
    height: 190px;
    padding-top: var(--space-3);
}

.bar-col {
    display: grid;
    grid-template-rows: auto 1fr auto;
    align-items: end;
    justify-items: center;
    gap: var(--space-1-5);
    height: 100%;
}

.bar-col .bar {
    width: 100%;
    max-width: 46px;
    border-radius: 8px 8px 3px 3px;
    background: linear-gradient(180deg, var(--primary), #6f92ea);
}

.bar-value { font-size: var(--text-sm); font-weight: 700; }
.bar-label { color: var(--muted); font-size: var(--text-xs); font-weight: 700; }

/* Barre de part de marché */
.share-bar {
    height: 6px;
    width: 100%;
    min-width: 60px;
    border-radius: var(--radius-pill);
    background: #ece7df;
    overflow: hidden;
}

.share-bar span {
    display: block;
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--primary);
}

@media (max-width: 640px) {
    .bar-chart { height: 150px; gap: var(--space-1); }
    .bar-value { display: none; }
}

/* ---- Agents ---- */
.agent-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    overflow: hidden;
    border-radius: 50%;
    background: #e4e0d9;
    color: var(--muted-ink);
    font-weight: 700;
}

.agent-avatar img { width: 100%; height: 100%; object-fit: cover; }
.agent-avatar.small { width: 22px; height: 22px; font-size: var(--text-xs); }

.agent-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    border-radius: var(--radius-pill);
    padding: 3px 10px 3px 3px;
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary-dark);
    font-size: var(--text-sm);
    font-weight: 600;
}

.agent-chip.unassigned { background: #efeae2; color: var(--muted-ink); }

.agent-list { display: grid; gap: var(--space-3); }

.agent-item {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 12px 14px;
    background: var(--bg);
}

.agent-item > summary {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
    list-style: none;
}

.agent-item > summary::-webkit-details-marker { display: none; }
.agent-identity { display: grid; }
.agent-identity small { color: var(--muted); font-weight: 700; }
.agent-item form { margin-top: var(--space-4); }

/* ---- Page d'un bien ---- */
.detail-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-5);
    margin-bottom: var(--space-5);
    padding: 24px 26px;
    border-radius: var(--radius-xl);
    background: var(--bg-blue);
    box-shadow: var(--shadow-soft);
}

.detail-hero-main { min-width: 0; flex: 1 1 340px; }
.detail-hero h2 { margin: 10px 0 4px; font-size: var(--text-2xl); line-height: 1.2; }
.detail-badges { display: flex; flex-wrap: wrap; gap: var(--space-1-5); }
.detail-address { margin: 0 0 12px; color: var(--muted); font-weight: 600; }

.detail-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.detail-price strong { font-size: var(--text-2xl); font-weight: 700; }
.detail-price span { color: var(--muted); font-weight: 700; }

.detail-hero-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 0 0 auto;
}

.detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
    align-items: start;
    gap: var(--space-5);
}

.detail-col { min-width: 0; }
.detail-side { position: sticky; top: 18px; }

.detail-photo-panel { padding: 0; overflow: hidden; }

.detail-photo {
    display: block;
    width: 100%;
    max-height: 420px;
    object-fit: cover;
}

.detail-photo.placeholder {
    display: grid;
    place-items: center;
    min-height: 220px;
    background: color-mix(in srgb, var(--primary) 8%, white);
    color: var(--muted);
    font-weight: 700;
}

.fact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    gap: var(--space-3);
}

.fact {
    display: grid;
    gap: var(--space-05);
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
}

.fact span { color: var(--muted); font-size: var(--text-sm); font-weight: 700; }
.fact strong { font-size: var(--text-md); overflow-wrap: anywhere; }

.detail-description {
    margin: 0;
    color: #33415c;
    line-height: 1.6;
    white-space: pre-line;
}

@media (max-width: 1024px) {
    .detail-layout { grid-template-columns: 1fr; }
    .detail-side { position: static; }
    /* Les colonnes s'empilent : le numéro du propriétaire passait sous la
       photo, la description et les caractéristiques. Or un agent ouvre cette
       fiche pour appeler — le contact remonte au-dessus. */
    .detail-side { order: -1; }
}

@media (max-width: 640px) {
    .detail-hero { padding: var(--space-5); border-radius: var(--radius-lg); }
    .detail-hero h2 { font-size: var(--text-xl); }
    .detail-price strong { font-size: var(--text-xl); }
    .detail-hero-actions { width: 100%; }
}

/* Colonnes de kanban étroites : les badges et boutons ne doivent pas se couper */
.lead-card-top .badge,
.lead-meta .agent-chip {
    white-space: nowrap;
}

.lead-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-1-5);
}

.lead-card-top .badge {
    font-size: var(--text-xs);
    padding: 3px 8px;
}

.lead-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-1-5);
}

.lead-card .quick-followup {
    gap: var(--space-1);
    font-size: var(--text-xs);
}

.lead-card .quick-followup span {
    flex-basis: 100%;
    margin-bottom: 2px;
}

.lead-card .quick-followup button {
    flex: 1 1 auto;
    padding: 3px 6px;
    font-size: var(--text-xs);
}

/* Pas d'avatar fantôme quand personne n'est attribué */
.agent-chip.unassigned .agent-avatar {
    display: none;
}

.agent-chip.unassigned {
    padding: 3px 10px;
}

/* Identité du compte connecté */
.me-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    margin-right: var(--space-3);
    padding: 5px 12px 5px 5px;
    border-radius: var(--radius-pill);
    background: #fff;
    border: 1px solid var(--border);
    font-size: var(--text-base);
    font-weight: 600;
}

.logout-form {
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
}

/* Bouton d'appropriation d'un lead */
.quick-followup button.claim {
    flex-basis: 100%;
    border-color: color-mix(in srgb, var(--good) 40%, transparent);
    background: color-mix(in srgb, var(--good) 10%, transparent);
    color: var(--good-ink);
}

.quick-followup button.claim:hover {
    /* --accent est un vert clair : en aplat, le blanc n'y tient que 2,34.
       Le survol prend le vert foncé, où il tient 6,78. */
    background: var(--good-ink);
    border-color: var(--good-ink);
    color: #fff;
}

/* Actions en bout de ligne du tableau */
.row-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1-5);
    min-width: 110px;
}

.row-actions .btn {
    padding: 6px 10px;
    font-size: var(--text-sm);
}

.howto {
    margin: 0;
    padding-left: var(--space-5);
    color: var(--muted);
    line-height: 1.9;
}

.access-block {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px dashed var(--border);
}

.access-block h3 { margin-bottom: var(--space-1); font-size: var(--text-md); }

.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
}

/* Bloc personnel du dashboard */
.my-panel {
    margin-bottom: var(--space-5);
    padding: 20px 22px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--panel);
    box-shadow: var(--shadow-flat);
}

.my-panel.has-due {
    border-left: 5px solid var(--bad);
    background: color-mix(in srgb, var(--bad) 4%, transparent);
}

.my-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.my-head h2 { margin: 6px 0 4px; font-size: var(--text-xl); }
.my-panel.has-due .my-head h2 { color: var(--bad); }
.my-head p { margin: 0; color: var(--muted); font-weight: 600; }

.my-due-list {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.my-due-list article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: #fff;
}

.my-due-list article > div { display: grid; min-width: 0; }
.my-due-list .muted { font-size: var(--text-sm); }

/* rgba(184,121,16) était un QUATRIÈME ambre, absent de la palette : la
   variante douce du bandeau ne portait donc pas la couleur d'avertissement
   de la maison, elle en portait une qui lui ressemblait. */
.alert-banner.soft {
    border-color: color-mix(in srgb, var(--warning) 30%, transparent);
    border-left-color: var(--warning);
    background: color-mix(in srgb, var(--warning) 7%, transparent);
}

.alert-banner.soft strong { color: var(--warning-ink); }

/* Badge de variation de prix */
.badge.drop {
    background: color-mix(in srgb, var(--good) 10%, transparent);
    color: var(--good-ink);
}

/* ---- Mode appel ---- */
.call-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.call-header h2 { margin: 6px 0 2px; font-size: var(--text-xl); }
.call-header p { margin: 0; color: var(--muted); font-weight: 600; }

.call-card {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
    gap: 0;
    overflow: hidden;
    margin-bottom: var(--space-5);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--panel);
    box-shadow: var(--shadow);
}

.call-main { padding: 24px 26px; }
.call-main h3 { margin: 12px 0 4px; font-size: var(--text-xl); line-height: 1.25; }
.call-address { margin: 0 0 14px; color: var(--muted); font-weight: 600; }

.call-facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
    color: var(--muted);
    font-weight: 700;
}

.call-facts strong { color: var(--text); font-size: var(--text-lg); }

.call-number {
    display: inline-block;
    padding: 14px 24px;
    border-radius: var(--radius-lg);
    background: var(--primary);
    color: #fff;
    font-size: var(--text-2xl);
    font-weight: 700;
    letter-spacing: .02em;
}

.call-number:hover { background: var(--primary-dark); text-decoration: none; }

.call-note {
    margin: 16px 0 0;
    padding: 10px 14px;
    border-radius: var(--radius);
    background: var(--input);
    font-size: var(--text-md);
}

.call-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-4);
    font-size: var(--text-base);
    font-weight: 700;
}

.call-outcomes {
    padding: 24px 26px;
    background: var(--bg);
    border-left: 1px solid var(--border);
}

.call-outcomes h3 { margin-bottom: var(--space-4); }
.outcome-form { display: grid; gap: var(--space-4); }

.outcome-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.outcome-group > span {
    width: 100%;
    color: var(--muted);
    font-size: var(--text-base);
    font-weight: 700;
}

.outcome-group .btn { flex: 1 1 auto; }
.btn.secondary.danger { border-color: color-mix(in srgb, var(--bad) 40%, transparent); color: var(--bad); }
.btn.secondary.danger:hover { background: var(--bad); border-color: var(--bad); color: #fff; }

.next-list { display: grid; gap: var(--space-2); }

.next-list article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.next-list article > div { display: grid; min-width: 0; }
.next-list .muted { font-size: var(--text-sm); }

@media (max-width: 900px) {
    .call-card { grid-template-columns: 1fr; }
    .call-outcomes { border-left: 0; border-top: 1px solid var(--border); }
}

@media (max-width: 640px) {
    .call-main, .call-outcomes { padding: var(--space-5); }
    .call-number { display: block; text-align: center; font-size: var(--text-xl); }
}

/* Photo du bien en mode appel */
.call-photo {
    display: block;
    margin: -24px -26px 18px;
    overflow: hidden;
    background: color-mix(in srgb, var(--primary) 8%, white);
}

.call-photo img {
    display: block;
    width: 100%;
    height: 260px;
    object-fit: cover;
}

.call-photo.placeholder {
    display: grid;
    place-items: center;
    height: 130px;
    color: var(--muted);
    font-weight: 700;
}

.next-list article { align-items: center; }

.next-thumb {
    flex: 0 0 auto;
    width: 54px;
    height: 40px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--primary) 8%, white);
}

.next-thumb.placeholder { display: inline-block; }

@media (max-width: 640px) {
    .call-photo { margin: -18px -18px 14px; }
    .call-photo img { height: 190px; }
}

/* ---- Agenda ---- */
.day-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--space-1-5);
    overflow-x: auto;
}

.day-cell {
    display: grid;
    justify-items: center;
    gap: var(--space-05);
    padding: 10px 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
}

.day-cell.has-items { border-color: color-mix(in srgb, var(--primary) 35%, transparent); }

.day-cell.today {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

.day-name { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; color: var(--muted); }
/* La case du jour est bleue : le gris secondaire y tombe à 1,11. Sur fond
   plein, le texte secondaire reprend la couleur de la case. */
.day-cell.today .day-name { color: inherit; }
.day-cell strong { font-size: var(--text-lg); }

.day-count {
    min-width: 20px;
    border-radius: var(--radius-pill);
    padding: 1px 6px;
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    color: var(--primary-dark);
    font-size: var(--text-xs);
    font-weight: 600;
    text-align: center;
}

/* Un blanc à 28 % d'opacité sur du bleu donne un fond à peine plus clair
   que le bleu : blanc sur blanc translucide, le compte tombait à 3,32.
   La pastille devient pleine, et le chiffre reprend le bleu. */
.day-cell.today .day-count { background: #fff; color: var(--primary); }

.agenda-list { display: grid; gap: var(--space-2); }

.agenda-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: #fff;
}

.agenda-row.late {
    border-left: 4px solid var(--bad);
    background: color-mix(in srgb, var(--bad) 4%, transparent);
}

.agenda-main { display: grid; gap: var(--space-05); min-width: 0; flex: 1 1 320px; }
.agenda-main .muted { font-size: var(--text-sm); }
.agenda-note { font-style: italic; }
.late-flag { color: var(--bad); font-weight: 700; }

.agenda-side {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.agenda-side .btn { padding: 8px 16px; }
.agenda-late .section-header h2 { color: var(--bad); }

@media (max-width: 640px) {
    .day-strip { grid-auto-columns: 46px; }
    .agenda-side { width: 100%; justify-content: space-between; }
}

.column-more {
    padding: 8px 10px;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    color: var(--muted);
    font-size: var(--text-sm);
    text-align: center;
}

/* Fraîcheur des données dans le bandeau */
.app-strip .strip-item strong {
    color: var(--text);
    font-weight: 700;
}

.app-strip .strip-item.stale,
.app-strip .strip-item.stale strong {
    color: var(--bad);
}

.fact em {
    color: var(--muted);
    font-size: var(--text-xs);
    font-style: normal;
    font-weight: 700;
}

/* Composition du message à coller */
.message-panel { display: grid; gap: var(--space-3); }

.send-warning {
    margin: 0;
    padding: 10px 12px;
    border-radius: var(--radius);
    border-left: 3px solid var(--accent);
    background: color-mix(in srgb, var(--good) 7%, transparent);
    font-size: var(--text-base);
}

.message-panel textarea[readonly],
.message-panel input[readonly] {
    background: #fff;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--text-base);
    line-height: 1.5;
}

.sent-form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1-5);
    padding-top: var(--space-3);
    border-top: 1px dashed var(--border);
    font-size: var(--text-sm);
    color: var(--muted);
}

.sent-form > span { flex-basis: 100%; font-weight: 700; }

.sent-form button {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 5px 12px;
    background: #fff;
    color: var(--primary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.sent-form button:hover { background: var(--primary); border-color: var(--primary); color: #fff; }

.variable-chip {
    display: inline-flex;
    flex-direction: column;
    gap: var(--space-05);
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    font-size: var(--text-xs);
}

.variable-chip strong { font-family: ui-monospace, Menlo, monospace; color: var(--primary-dark); }
.variable-chip span { color: var(--muted); }
.variable-palette { display: flex; flex-wrap: wrap; gap: var(--space-1-5); }

.dismiss-panel .dismiss-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.dismiss-panel .btn { flex: 1 1 auto; }

/* ===== REDESIGN SIDEBAR + COMPONENTS ===== */

/* Layout */
.shell {
    display: flex;
    min-height: 100vh;
}

.app-sidebar {
    width: 240px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border);
    background: var(--panel);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    z-index: 30;
}

.sidebar-brand {
    display: block;
    padding: 24px 20px 16px;
    color: var(--text);
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: -.02em;
    text-decoration: none;
    white-space: nowrap;
}

.sidebar-brand span {
    color: var(--primary);
}

.sidebar-brand:hover {
    text-decoration: none;
}

.sidebar-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-05);
    padding: 0 12px;
}

.sidebar-section {
    padding: 16px 8px 8px;
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 9px 12px;
    border-radius: var(--radius);
    color: var(--muted-ink);
    font-size: var(--text-md);
    font-weight: 700;
    text-decoration: none;
    transition: background .15s, color .15s;
}

.sidebar-nav a svg {
    flex-shrink: 0;
    opacity: .7;
}

.sidebar-nav a:hover {
    background: color-mix(in srgb, var(--primary) 8%, white);
    color: var(--primary);
    text-decoration: none;
}

/* L'entrée active était un pavé bleu plein — la même valeur que le bouton
   d'action principal de la page. Deux choses de poids égal, dont une seule
   se clique pour avancer : « Commencer les appels » se retrouvait en
   concurrence avec un simple repère de position.

   Le plein est réservé à l'action. La position se marque par un fond teinté,
   une couleur d'accent et un filet à gauche — plus discret, et plus juste :
   on voit où l'on est sans croire qu'il faut cliquer. */
.sidebar-nav a.active {
    position: relative;
    background: var(--bg-soft);
    color: var(--primary);
}

.sidebar-nav a.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 2px;
    border-radius: 0 2px 2px 0;
    background: var(--primary);
}

.sidebar-nav a.active svg {
    opacity: 1;
}

.sidebar-footer {
    padding: 16px 12px 20px;
    border-top: 1px solid var(--border);
    margin-top: auto;
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: var(--text-md);
    font-weight: 600;
    flex-shrink: 0;
    overflow: hidden;
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sidebar-user-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-05);
    min-width: 0;
}

.sidebar-user-info strong {
    font-size: var(--text-base);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-info span {
    font-size: var(--text-sm);
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.main-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.main-wrap .main {
    width: auto;
    margin: 0;
}

.top-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: 18px 28px;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(18px);
}

.top-header h1 {
    font-size: var(--text-2xl);
}

.top-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.import-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    background: #fff;
    border: 1px solid var(--border);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text);
    box-shadow: var(--shadow-flat);
    white-space: nowrap;
}

.import-pill.stale {
    border-color: #fecaca;
    background: #fef2f2;
    color: #991b1b;
}

.import-pill .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
}

.import-pill.stale .dot {
    background: var(--bad);
}

/* Buttons extensions */
.btn.ghost {
    background: transparent;
    color: var(--primary);
    border-color: transparent;
    box-shadow: none;
}

.btn.ghost:hover {
    background: color-mix(in srgb, var(--primary) 8%, white);
}

.btn.sm {
    padding: 8px 14px;
    font-size: var(--text-base);
}

/* Stats cards (dashboard) */
.stat-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-1-5);
    padding: 22px 22px 24px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-flat);
    text-decoration: none;
    color: inherit;
    transition: transform .12s, box-shadow .12s;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    text-decoration: none;
}

.stat-label {
    color: var(--muted);
    font-size: var(--text-base);
    font-weight: 700;
}

.stat-value {
    display: block;
    color: var(--text);
    font-size: var(--text-display);
    font-weight: 700;
    line-height: 1;
    margin-top: var(--space-1);
}

/* Panel header */
/* L'en-tête de panneau ne se repliait pas : sur un téléphone, le texte et
   le bouton se partageaient les 375 px et la phrase tombait à un mot par
   ligne, sur treize lignes, à côté d'un bouton intact. Le mobile est le
   poste de l'agent — l'action y passe SOUS le texte, pleine largeur. */
.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.panel-header h2 {
    margin: 0;
}

/* Filter bar */
.filter-bar {
    display: flex;
    align-items: flex-end;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* Listing grid + card */
.listing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-5);
}

.listing-card {
    display: flex;
    flex-direction: column;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-flat);
    transition: transform .12s, box-shadow .12s;
}

.listing-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.listing-card-img {
    position: relative;
    aspect-ratio: 16/10;
    background: #f3f0ea;
    display: block;
    overflow: hidden;
}

.listing-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s;
}

.listing-card:hover .listing-card-img img {
    transform: scale(1.03);
}

.listing-card-img .no-img {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: var(--muted);
    font-size: var(--text-base);
    font-weight: 700;
}

.listing-card-badges {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1-5);
}

.listing-card-body {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1;
}

.listing-card-body h3 {
    font-size: var(--text-md);
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}

.listing-card-body h3 a {
    color: var(--text);
    text-decoration: none;
}

.listing-card-body h3 a:hover {
    color: var(--primary);
}

.listing-card-body .address {
    margin: 0;
    color: var(--muted);
    font-size: var(--text-base);
    line-height: 1.35;
}

.listing-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-top: auto;
    padding-top: var(--space-2);
}

.listing-card-price {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text);
}

.listing-card-specs {
    color: var(--muted);
    font-size: var(--text-base);
    font-weight: 700;
}

.listing-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1-5);
    padding-top: var(--space-1);
}

/* Badges extensions */
.badge.info {
    background: color-mix(in srgb, var(--primary) 8%, white);
    color: #1e40af;
}

.badge.ghost {
    background: #f3f0ea;
    color: var(--muted);
    border: 1px solid var(--border);
}

/* Duplicates */
.duplicate-group {
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--panel);
    margin-bottom: var(--space-4);
    overflow: hidden;
    box-shadow: var(--shadow-flat);
}

.duplicate-group summary {
    list-style: none;
    cursor: pointer;
    padding: 16px 20px;
}

.duplicate-group summary::-webkit-details-marker {
    display: none;
}

.group-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.phone-note-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: 12px 20px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: #faf9f6;
}

.phone-note-bar form {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.phone-note-bar input[type="text"] {
    width: 220px;
    padding: 8px 12px;
    font-size: var(--text-base);
}

.row-actions {
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
    white-space: nowrap;
}

/* ---------------------------------------------------------------------
   MENU SUR TÉLÉPHONE.

   Sous 980 px, la colonne de gauche passait en display:none et rien ne
   la remplaçait. Un agent sur le terrain — le poste où cet outil sert le
   plus — n'avait donc AUCUNE navigation : ni Appeler, ni l'Agenda, ni ses
   relances, sauf à tomber sur un lien dans la page courante.

   Un <details> : pas une ligne de JavaScript, ouvrable au clavier, et il
   affiche le menu ENTIER plutôt qu'une barre de quatre raccourcis — ce
   qui n'est pas dans le menu n'existe pas.
   --------------------------------------------------------------------- */
.menu-mobile {
    display: none;
    /* Le tiroir se pose AU-DESSUS de la page : ouvert en flux, il poussait
       le titre et tout le contenu vers le bas, et refermer le menu faisait
       remonter l'écran sous le doigt. */
    position: relative;
}

.menu-mobile > summary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    /* La cible tient les 44 px recommandés au doigt. */
    min-height: 44px;
    padding: 0 var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--panel);
    color: var(--text);
    font-size: var(--text-base);
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

.menu-mobile > summary::-webkit-details-marker { display: none; }

.menu-mobile[open] > summary {
    border-color: var(--primary);
    color: var(--primary);
}

.menu-mobile[open] .sidebar-nav {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    z-index: 30;
    min-width: 240px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* Le menu complet dépasse la hauteur d'un téléphone : il défile dans
       le tiroir plutôt que de pousser la page. */
    max-height: 60vh;
    overflow-y: auto;
    padding: var(--space-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--panel);
    box-shadow: var(--shadow-raised);
}

@media (max-width: 980px) {
    .menu-mobile { display: block; }

    /* Le tiroir occupe toute la largeur de l'entête et se pose au-dessus
       du titre, là où le pouce le cherche. */
    .top-header { align-items: stretch; }
}

/* Responsive sidebar */
@media (max-width: 980px) {
    .app-sidebar {
        display: none;
    }
    .main-wrap {
        width: 100%;
    }
    .stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .listing-grid {
        grid-template-columns: 1fr;
    }
    .filter-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .top-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }
}

/* ── Mes communes : deux colonnes, un marché chacune ── */
.follow-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-6); flex-wrap: wrap; }
.follow-head h2 { margin-bottom: 6px; }
.follow-summary { display: flex; align-items: center; gap: var(--space-3); white-space: nowrap; }
.follow-count { font-size: var(--text-display); font-weight: 700; color: var(--text); line-height: 1; }
.follow-columns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-top: var(--space-5); }
.follow-col { display: flex; flex-direction: column; min-width: 0; }
.follow-col-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.follow-col-head h2 { margin-bottom: 2px; }
/* Sans `wrap`, une barre de filtres débordait de l'écran sur un téléphone :
   les boutons de droite étaient coupés et inatteignables. */
.follow-tools { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 14px 0 10px; }
.follow-tools input[type=search] { flex: 1 1 auto; min-width: 0; }
.follow-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1-5); }
.follow-row label { display: grid; grid-template-columns: auto 1fr minmax(60px, 34%) 3ch; align-items: center; gap: var(--space-3); padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-soft); cursor: pointer; transition: background .12s, border-color .12s; }
.follow-row label:hover { border-color: var(--primary); }
.follow-row.is-on label { background: var(--bg-blue); border-color: var(--primary); }
.follow-row input { margin: 0; accent-color: var(--primary); }
.follow-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.follow-bar { height: 6px; border-radius: var(--radius-sm); background: var(--border); overflow: hidden; }
.follow-bar i { display: block; height: 100%; background: var(--primary); border-radius: var(--radius-sm); }
.follow-n { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 600; }
.follow-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-5); }
@media (max-width: 820px) { .follow-columns { grid-template-columns: 1fr; } .follow-row label { grid-template-columns: auto 1fr 3ch; } .follow-bar { display: none; } }

/* ── Communes (périmètre de collecte) : mêmes colonnes que Mes communes ── */
.follow-row { display: flex; flex-direction: column; }
.follow-meta { font-size: var(--text-sm); color: var(--muted); padding: 4px 12px 0 40px; line-height: 1.4; }
.follow-row.is-off label { opacity: .72; }

.follow-dirty { display: none; color: var(--warning); font-weight: 600; font-size: var(--text-base); }
.is-dirty .follow-dirty { display: inline; }
.quick-add { margin-top: var(--space-5); }
.quick-add .row { display: grid; grid-template-columns: 2fr 1fr auto auto auto; gap: var(--space-3); align-items: end; }
.quick-add .markets { display: flex; gap: var(--space-4); align-items: center; padding-bottom: var(--space-3); }
@media (max-width: 820px) { .quick-add .row { grid-template-columns: 1fr 1fr; } }

/* ── Baisses de prix ── */
.pill-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); }
.pill { padding: 6px 12px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--bg-soft); color: var(--text); text-decoration: none; font-size: var(--text-base); font-weight: 600; }
.pill.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.pill-sep { width: 1px; height: 22px; background: var(--border); margin: 0 6px; }
.price-old { color: var(--muted); text-decoration: line-through; white-space: nowrap; }
.price-new { font-weight: 700; white-space: nowrap; }
.leaders { display: flex; gap: var(--space-2); align-items: center; white-space: nowrap; }
.leader { display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-05); }
.leader img { width: 34px; height: 34px; border-radius: var(--radius-sm); object-fit: contain; background: #fff; border: 1px solid var(--border); }
.leader small { font-size: var(--text-xs); color: var(--muted); }
.inline-name { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.inline-name input[name=name] { min-width: 200px; }
.inline-name input[name=notes] { min-width: 220px; flex: 1; }
tr.row-todo td:first-child { box-shadow: inset 3px 0 0 var(--warning); }
.agency-cell { display: flex; align-items: center; gap: var(--space-3); white-space: nowrap; }
.logo-void { display:inline-block; width:28px; height:28px; border-radius:6px; background:var(--bg-soft); border:1px dashed var(--border); }
.shared-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.shared-item { border:1px solid var(--border); border-radius:12px; padding:14px 16px; background:var(--panel); }
.shared-head { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.shared-head .muted { margin-left:10px; }
.shared-offers { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.shared-offers li { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:8px 10px; border-radius:8px; background:var(--bg-soft); }
.shared-offers img { border-radius:6px; object-fit:contain; background:#fff; border:1px solid var(--border); }
.offer-price { font-weight:700; }
.offer-links { margin-left:auto; display:flex; gap:10px; align-items:center; }
.shared-flags { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.offer-phone { font-weight:700; text-decoration:none; padding:3px 10px; border-radius:999px; background:var(--sign-soft,#e3f0ea); color:inherit; }
.offer-thumb { width:64px; height:42px; border-radius:6px; object-fit:cover; border:1px solid var(--border); }
.shared-item.match-strong { border-color: var(--sign,#2f7d5b); box-shadow: inset 4px 0 0 var(--sign,#2f7d5b); }
.shared-item.match-weak { opacity: .78; }
.offer-age { font-size:12.5px; color:var(--muted); }
.shared-verdict { margin:0 0 10px; padding:8px 12px; border-radius:8px; background:var(--sign-soft,#e3f0ea); font-size:14px; }
.new-matches { border-left:4px solid var(--sign,#2f7d5b); }
.new-match-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.new-match-list li { display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:8px 10px; border-radius:8px; background:var(--bg-soft); }
.match-card.match-strong { border-left:4px solid var(--sign,#2f7d5b); }
.match-head { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
.match-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.match-side h3 { margin:0 0 10px; font-size:14px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.match-side dl { display:grid; grid-template-columns:auto 1fr; gap:6px 14px; margin:0 0 12px; font-size:14px; }
.match-side dt { color:var(--muted); }
.match-side dd { margin:0; }
.match-photo { width:100%; max-width:220px; border-radius:8px; margin-bottom:10px; }
@media (max-width:820px){ .match-grid { grid-template-columns:1fr; } }
.timeline { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.timeline li { display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:9px 12px; border-radius:8px; background:var(--bg-soft); font-size:14px; }
.tl-date { font-variant-numeric:tabular-nums; color:var(--muted); min-width:135px; }
.match-card.is-certain { border-left: 4px solid var(--sign, #2f7d5b); }
.match-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.match-head h2 { margin: 0; }
.match-head .muted { margin-left: var(--space-2); }
.match-doubt { margin: 0 0 14px; padding: 9px 12px; border-radius: var(--radius-sm); background: var(--bg-soft); font-size: var(--text-md); color: var(--muted); }
.match-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.match-side h3 { font-size: var(--text-base); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 10px; }
.match-item { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-soft); margin-bottom: var(--space-3); }
.match-body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.match-photo { width: 96px; height: 68px; border-radius: var(--radius-sm); object-fit: cover; flex: none; border: 1px solid var(--border); }
.match-photo.placeholder { background: var(--border); display: block; }
.match-actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin-top: var(--space-1); }
.match-ref code { font-size: var(--text-base); }
@media (max-width: 900px) { .match-cols { grid-template-columns: 1fr; } }

/* Opportunités : une carte par lot, l'angle d'attaque lisible au premier coup d'œil. */
/* ---------------------------------------------------------------------
   Filtres d'Opportunités.

   Écrits plus tard que le reste, ils n'avaient jamais rejoint le système :
   des pilules à 999 px, des tailles en pixels crus dont un « 12.5px »
   hors échelle, et l'onglet actif en bleu plein — alors que c'est un choix
   unique parmi cinq, exactement ce que le sélecteur segmenté de Location /
   Vente représente ailleurs. Deux composants pour un même geste.

   Même objet, donc même forme. Et le compte de l'onglet actif passait du
   blanc sur un blanc à 22 % posé sur du bleu : 3,74. Une pastille pleine.
   --------------------------------------------------------------------- */
.opp-filters { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; }

.opp-form { display: flex; gap: var(--space-4); align-items: flex-end; flex-wrap: wrap; }
.opp-form label { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-base); color: var(--muted); }

/* LE RAIL DIT LA FORCE DE L'ANGLE.
   Les cartes sont triées par score, mais rien ne le montrait : une carte à 30
   points ressemblait trait pour trait à une carte à 100. Le rail donne au
   balayage de l'œil l'information que le tri contient déjà. */
.opp-card { border-left:4px solid var(--border); }
.opp-card.opp-proprio_connu { border-left-color:var(--good); }
/* Ajouté le 30/09/2026 avec l'angle « retrouvé au CRM » : sans cette règle il
   retombait sur le gris de la bordure, c'est-à-dire sur « aucun angle ». */
.opp-card.opp-proprio_verifie { border-left-color:var(--accent); }
.opp-card.opp-proprio_direct { border-left-color:var(--warning); }
.opp-card.opp-multi_enseignes { border-left-color:var(--primary); }
.opp-card.is-doubt { border-left-style:dashed; }
.opp-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; margin-bottom:8px; }
.opp-head h2 { margin:0; }
.opp-head .muted { margin-left:8px; }
.opp-tags { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }

/* LA RAISON D'APPELER, EN TÊTE ET LISIBLE.
   Elle vivait en gris clair au milieu de la carte, après les photos. C'est la
   seule phrase qui décide si l'agent décroche : elle passe juste sous
   l'adresse, à la taille du texte courant et dans l'encre pleine. */
.opp-why {
    margin: 0 0 var(--space-4);
    font-size: var(--text-md);
    line-height: 1.45;
    color: var(--text);
    max-width: 78ch;
}

/* La fraîcheur : une pastille, pas du texte gris perdu dans la méta. Un bien
   vu il y a dix jours peut avoir quitté le marché — l'archivage se fait
   commune par commune et une commune tronquée n'archive jamais. */
.opp-vu {
    display:inline-block; font-size:var(--text-xs); font-weight:700;
    letter-spacing:.04em; text-transform:uppercase;
    padding:2px 8px; border-radius:var(--radius-pill); margin-left:var(--space-2);
}
.opp-vu.frais { background:color-mix(in srgb, var(--good) 12%, transparent); color:var(--good-ink); }
.opp-vu.tiede { background:color-mix(in srgb, var(--warning) 14%, transparent); color:var(--warning-ink); }
.opp-vu.vieux { background:color-mix(in srgb, var(--bad) 13%, transparent); color:var(--bad-ink); }

/* DEPUIS QUAND LE BIEN EST EN LIGNE — à ne pas confondre avec « vu il y a ».
   L'une dit la fraîcheur de NOTRE collecte, l'autre l'ancienneté de l'annonce
   sur le marché. Un bien qui traîne depuis trois mois est un propriétaire qui
   doute : la couleur chaude n'est donc pas une alerte, c'est un signal d'appel. */
.opp-age {
    display:inline-block; font-size:var(--text-xs); font-weight:700;
    letter-spacing:.04em; text-transform:uppercase;
    padding:2px 8px; border-radius:var(--radius-pill); margin-left:var(--space-1-5);
    border:1px solid transparent;
}
.opp-age.court { background:var(--input); color:var(--muted-ink); }
.opp-age.moyen { background:color-mix(in srgb, var(--warning) 12%, transparent); color:var(--warning-ink); }
.opp-age.long  { background:color-mix(in srgb, var(--warning) 20%, transparent); color:var(--warning-ink); border-color:color-mix(in srgb, var(--warning) 35%, transparent); }

/* LES DEUX COLONNES NE DOIVENT PAS SE RESSEMBLER.
   À gauche la concurrence, à droite votre maison. Elles étaient rendues à
   l'identique, alors que l'écran entier repose sur ce contraste. */
.match-side.is-rivals h3 { color:var(--bad-ink); }
.match-side.is-mine h3 { color:var(--good-ink); }
.match-side.is-rivals h3::before,
.match-side.is-mine h3::before {
    content:''; display:inline-block; width:8px; height:8px; border-radius:2px;
    margin-right:var(--space-2); vertical-align:middle; background:currentColor;
}
.match-side.is-mine .match-item { background:color-mix(in srgb, var(--good) 6%, transparent); border-color:color-mix(in srgb, var(--good) 25%, transparent); }

/* Le repli d'explication : présent pour qui en a besoin, invisible pour les
   autres. Un écran ouvert tous les matins n'a pas à se réexpliquer. */
.opp-aide { margin-top:var(--space-2); font-size:var(--text-base); color:var(--muted); }
.opp-aide summary { cursor:pointer; color:var(--primary-ink); font-weight:600; }
.opp-aide p { margin:var(--space-2) 0 0; max-width:78ch; }
.match-cols.is-single { grid-template-columns:1fr; }
.match-item.is-owner { border-color:var(--good); box-shadow:inset 3px 0 0 var(--good); }
.opp-group { padding-top:14px; padding-bottom:14px; }
.opp-group h2 { margin:0 0 4px; display:flex; align-items:center; gap:10px; }
.opp-group p { margin:0; }
.opp-proof { margin:0 0 14px; padding:9px 12px; border-radius:8px; background:var(--sign-soft,#e3f0ea); font-size:14px; }

/* Opportunités : bouton copier (par carte + globale), header aligné. */
.opp-head-right { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.opp-copy-one, .opp-copy-all { font: inherit; font-size:13px; font-weight:600; padding:5px 12px; border-radius:999px; border:1px solid var(--border); background:var(--panel); color:var(--text); cursor:pointer; white-space:nowrap; }
.opp-copy-one:hover, .opp-copy-all:hover { border-color:var(--primary); color:var(--primary); }
.opp-copy-one:disabled, .opp-copy-all:disabled { opacity:.7; cursor:default; }
.follow-summary .opp-copy-all { margin-left:auto; }
@media (max-width: 620px) { .follow-summary { white-space:normal; } .follow-summary .opp-copy-all { margin-left:0; } }

/* File de vérification Whise ------------------------------------------- */
/* Le verdict se donne sur une seule ligne, sans quitter le tableau : c'est
   un geste répété des centaines de fois. */
/* Verdict d'une adresse : deux boutons à l'origine, six gestes depuis qu'on
   peut reporter et écarter. En nowrap, la colonne débordait du tableau et
   « Trouvé », « Reporter » et « Écarter » étaient coupés au bord droit.
   Ils s'enroulent maintenant dans la cellule, sur deux rangées si besoin. */
.verdict-form {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-wrap: wrap;
    min-width: 210px;
}

.verdict-form .btn {
    padding: 3px 9px;
    font-size: var(--text-sm);
}
.input-mini {
    width: 56px;
    padding: 4px 6px;
    text-align: center;
}
.btn-copy {
    white-space: nowrap;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 820px) {
    .verdict-form { flex-wrap: wrap; }
    .btn-copy { max-width: 100%; }
}

/* Pages publiques (politique de confidentialité) ------------------------ */
/* Lecture longue hors console : colonne étroite, pas de barre latérale. */
.public-page {
    max-width: 760px;
    margin: 0 auto;
    padding: 48px 24px 96px;
}
.legal h1 { margin: 0 0 12px; line-height: 1.15; }
.legal h2 { margin: 36px 0 10px; font-size: var(--text-lg); }
.legal p, .legal li { max-width: 68ch; line-height: 1.65; }
.legal ul { padding-left: var(--space-5); }
.legal li { margin-bottom: 6px; }
/* ---------------------------------------------------------------------
   L'OPACITÉ N'EST PAS UNE COULEUR DE TEXTE.

   Ces mentions s'atténuaient par opacité : .55 pour le lien vers la
   politique de confidentialité dans la barre latérale, soit un rapport de
   contraste de 2,41 là où il en faut 4,5. Un réglage d'opacité ne figure
   sur aucune palette et ne se vérifie donc jamais — c'est exactement pour
   ça qu'il avait dérivé aussi loin, et sur le lien que le RGPD demande de
   rendre facile à trouver.

   Le texte secondaire prend la couleur du texte secondaire. L'opacité
   reste pour ce qu'elle sait faire : estomper un objet ENTIER (une carte
   retirée, un bouton désactivé), pas éclaircir des lettres.
   --------------------------------------------------------------------- */
.legal-kicker {
    margin: 0 0 6px;
    font-size: var(--text-base);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}
.legal-lead { font-size: var(--text-lg); color: var(--muted); }
.legal-updated { margin-top: var(--space-10); padding-top: var(--space-4); border-top: 1px solid var(--border); font-size: var(--text-md); color: var(--muted); }
.login-legal { margin-top: var(--space-5); text-align: center; font-size: var(--text-base); color: var(--muted); }
.sidebar-legal { display: block; margin-top: var(--space-2); text-align: center; font-size: var(--text-xs); color: var(--muted); text-decoration: none; }
.sidebar-legal:hover { color: var(--primary); text-decoration: underline; }

/* Lecture investisseur ------------------------------------------------- */
/* Chaque signal porte son chiffre : le ton colore la lecture, il ne la
   remplace pas. Un investisseur doit pouvoir contester la ligne. */
.signals { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.signal {
    padding: 10px 14px;
    border-left: 3px solid var(--rule, #d8dde5);
    background: rgba(127, 140, 160, .07);
    font-size: var(--text-md);
    line-height: 1.5;
}
.signal.is-fort { border-left-color: #1f7a4d; }
.signal.is-contre { border-left-color: #b4632a; }
.signal.is-neutre { border-left-color: #98a2b3; }
.stat em { display: block; font-style: normal; font-size: var(--text-sm); margin-top: 2px; }
.signal-note { font-size: var(--text-base); margin-top: var(--space-4); }

/* Permis d'urbanisme voisins ------------------------------------------- */
.permits-title { font-size: var(--text-base); text-transform: uppercase; letter-spacing: .08em; margin: 26px 0 10px; }
.permits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.permit { border: 1px solid var(--rule, #dde2ea); border-radius: 3px; padding: 11px 14px; }
.permit-head { display: flex; justify-content: space-between; gap: var(--space-3); align-items: baseline; }
.permit-dist { font-size: var(--text-sm); color: #7b869c; white-space: nowrap; font-variant-numeric: tabular-nums; }
.permit-objet { margin: 4px 0 6px; font-size: var(--text-md); line-height: 1.45; }
.permit-meta { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-1-5); }
.permit-meta span { font-size: var(--text-xs); padding: 2px 7px; border: 1px solid var(--rule, #dde2ea); border-radius: 2px; color: #4a5670; }
.permit-ref { font-family: ui-monospace, Menlo, monospace; }
.permit-note { font-size: var(--text-sm); margin-top: var(--space-3); }

/* Classement des biens négociables ------------------------------------- */
.negoc { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.negoc-item { display: flex; gap: var(--space-4); align-items: flex-start; }
.negoc-rank {
    flex: 0 0 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(127,140,160,.12); font-size: var(--text-base); font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.negoc-body { flex: 1 1 auto; min-width: 0; }
.negoc-head { display: flex; justify-content: space-between; gap: var(--space-4); align-items: baseline; flex-wrap: wrap; }
/* ---------------------------------------------------------------------
   Carte d'un bien du marché.

   Toutes les méta se ressemblaient : la commune, le type, la surface et le
   RENDEMENT portaient le même cadre gris. L'investisseur cherchait donc du
   regard le seul chiffre qui décide, au milieu de cinq qui n'en sont pas.

   Deux familles désormais. Ce qui IDENTIFIE le bien — commune, type,
   surface — s'efface : pas de cadre, juste du texte séparé par des points.
   Ce qui le JUGE — prix au m² et son écart, rendement — reste encadré et
   lisible. On ne lit plus une liste, on lit deux niveaux.
   --------------------------------------------------------------------- */
.negoc-titre {
    font-weight: 600;
    font-size: var(--text-md);
    text-decoration: none;
    letter-spacing: -.01em;
}

.negoc-prix {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-weight: 700;
    font-size: var(--text-lg);
    letter-spacing: -.02em;
}

.negoc-meta {
    margin: var(--space-2) 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-2);
    font-size: var(--text-sm);
    color: var(--muted);
}

/* Identité : du texte, séparé par des points médians. */
.negoc-meta > span {
    position: relative;
}

.negoc-meta > span + span::before {
    content: '·';
    margin-right: var(--space-2);
    color: var(--border);
}

/* Jugement : encadré, plus sombre, chiffres alignés.

   La classe s'appelle « chiffre » et non « quartier ». J'avais d'abord
   détourné .negoc-quartier — qui désignait le NOM d'un quartier, une
   identité — pour encadrer le prix au m². Résultat sur Biens négociables,
   où cette classe existait déjà à sa place d'origine : le nom du quartier
   se retrouvait encadré comme un chiffre, et le prix au m² passait en
   texte discret. Les deux familles y étaient inversées. */
.negoc-meta span.negoc-chiffre,
.negoc-meta span.negoc-rendement {
    padding: 1px var(--space-2);
    border: 1px solid #cbd5e4;
    border-radius: var(--radius-sm);
    color: #24365c;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.negoc-meta span.negoc-rendement {
    border-color: #b9c8de;
    background: color-mix(in srgb, var(--primary) 8%, white);
}

/* Le point médian n'a pas à précéder un encadré : il collerait au cadre. */
.negoc-meta span.negoc-chiffre + span::before,
.negoc-meta span.negoc-rendement + span::before,
.negoc-meta span.negoc-chiffre::before,
.negoc-meta span.negoc-rendement::before {
    content: none;
    margin: 0;
}

/* Le nom d'un quartier reste une identité : pas de cadre, juste un peu
   plus present que la commune qui le contient. */
.negoc-meta span.negoc-quartier {
    color: var(--text);
    font-weight: 600;
}
.negoc-form { align-items: flex-end; gap: var(--space-3); }
.negoc-form label { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-sm); }
.input-budget { width: 130px; max-width: 100%; }

@media (max-width: 720px) {
    /* Sur un téléphone, les deux bornes de budget tiennent côte à côte, et le
       bouton prend toute la largeur : on le vise au pouce. */
    .negoc-form label { flex: 1 1 140px; }
    .input-budget { width: 100%; }
    .negoc-form > .btn { flex: 1 1 100%; }
    .negoc-photo { flex-basis: 64px; width: 64px; }
    .favori-photo { flex: 0 0 96px; width: 96px; }
    .favori-photo img { height: 72px; }
}

/* Annonce sortie de la circulation : le bandeau doit se voir avant le titre. */
.detail-archived {
    border-left: 4px solid var(--warning);
    margin-bottom: var(--space-4);
}

.detail-archived strong {
    color: var(--warning);
}

.detail-archived p {
    margin: 4px 0 0;
}

/* Recherche investisseur : les communes se cochent, elles ne se cliquent plus
   une par une — on cherche dans un secteur, pas dans une commune. */
.negoc-communes {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px 12px 10px;
    margin: 0;
    flex: 1 1 100%;
    min-width: 0;
}

.negoc-communes legend {
    font-size: var(--text-sm);
    font-weight: 600;
    padding: 0 4px;
}

.negoc-communes .check {
    /* `.negoc-form label` empile en colonne : sans redresser la direction ici,
       la case à cocher se retrouvait AU-DESSUS du nom de la commune. */
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-1);
    margin: 2px 12px 2px 0;
    font-size: var(--text-base);
    white-space: nowrap;
}

.negoc-communes .check input {
    margin: 0;
}

/* « De quelle agence parle cet écran » : la question doit se lire avant les
   données, pas se déduire d'un badge perdu dans un titre. */
.agence-switch {
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
}

.agence-switch > .muted:first-child {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    margin-bottom: 6px;
}

.agence-switch p {
    margin: 8px 0 0;
    font-size: var(--text-sm);
}

/* Recherche d'achat : une photo et une étoile. On ne juge pas un bien sur une
   ligne de texte, et on veut pouvoir le garder de côté sans le perdre. */
.negoc-photo {
    flex: 0 0 96px;
    width: 96px;
}

.negoc-photo img,
.favori-photo img {
    width: 100%;
    height: 72px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    display: block;
}

.negoc-fav {
    display: inline-flex;
    margin-left: var(--space-2);
}

/* L'étoile est une commande, pas un caractère posé là : elle a une cible
   cliquable carrée et réagit au survol comme un bouton. */
.fav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--text-lg);
    line-height: 1;
    padding: 0;
    color: var(--muted);
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.fav-btn:hover,
.fav-btn:focus-visible {
    background: #fff8e6;
    border-color: #e0c46b;
    color: var(--warning);
}

.fav-btn.actif {
    color: var(--warning);
}

.favori-corps {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
}

.favori-photo {
    flex: 0 0 140px;
    width: 140px;
}

.favori-photo img {
    height: 104px;
}

.favori-texte {
    flex: 1 1 auto;
    min-width: 0;
}

.favori-head {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    align-items: baseline;
}

.favori-alerte {
    margin: 6px 0 0;
    font-size: var(--text-base);
    color: var(--warning);
}

.favori-alerte.bon {
    color: var(--good);
}

.favori-parti {
    opacity: .72;
}

.favori-note {
    display: flex;
    gap: var(--space-1-5);
    margin-top: var(--space-3);
    flex-wrap: wrap;
}

.favori-note input[type="text"] {
    flex: 1 1 260px;
    min-width: 0;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* « Par quoi je commence ? » — la réponse ouvre le tableau de bord, avant les
   compteurs. Un outil de prospection qui n'ouvre pas sur l'action fait perdre
   la première minute de chaque session. */
.a-faire {
    border-left: 3px solid var(--primary);
}

.a-faire h2 {
    margin: 2px 0 4px;
}

.a-faire p {
    margin: 0;
    max-width: 62ch;
}

/* Le filtre des communes se replie : 21 cases cochées poussaient la première
   annonce hors de l'écran sur un téléphone. Le résumé dit ce qui est retenu. */
.commune-pliable > summary {
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: 600;
    padding: 4px 0;
    list-style: none;
}

.commune-pliable > summary::-webkit-details-marker {
    display: none;
}

.commune-pliable > summary::before {
    content: '▸';
    display: inline-block;
    width: 1em;
    color: var(--muted);
}

.commune-pliable[open] > summary::before {
    content: '▾';
}

.commune-pliable > .commune-grid {
    margin-top: var(--space-2);
}

/* Favori : sur un téléphone, la photo passe au-dessus plutôt que de réduire
   le texte à une colonne de trois mots. */
@media (max-width: 720px) {
    .favori-corps {
        flex-direction: column;
    }

    .favori-photo {
        flex: 1 1 auto;
        width: 100%;
    }

    .favori-photo img {
        height: 160px;
    }

    .favori-head {
        flex-direction: column;
        gap: var(--space-05);
    }
}

.input-court { width: 92px; max-width: 100%; }

/* Juger un bien : garder, écarter, ou signaler une donnée douteuse. Les
   boutons vivent sur la ligne du bien — un verdict qui demande un détour
   n'est jamais donné. */
.negoc-verdicts {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    margin-left: var(--space-2);
    flex-wrap: wrap;
}

.negoc-verdicts .btn.sm {
    padding: 3px 9px;
    font-size: var(--text-sm);
}

/* Mon secteur : l'avis écrit passe devant les chiffres, visuellement aussi. */
.secteur-bien.est-analyse {
    border-left: 4px solid var(--primary);
}

/* Archive : un bien parti est un fait acquis, pas une piste. Il reste lisible
   — on vient ici pour le relire — mais il ne doit pas attirer l'oeil comme
   une annonce en ligne. */
.secteur-bien.est-parti {
    border-left: 4px solid var(--border);
    opacity: .78;
}

.secteur-bien.est-parti:hover,
.secteur-bien.est-parti:focus-within {
    opacity: 1;
}

.secteur-verdict {
    margin: 6px 0 2px;
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.secteur-analyse {
    margin-top: var(--space-2);
}

.secteur-analyse > summary {
    cursor: pointer;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--primary);
}

.secteur-texte {
    margin: 8px 0 4px;
    padding: 10px 12px;
    background: var(--bg-soft);
    border-radius: var(--radius);
    font-size: var(--text-md);
    line-height: 1.55;
    max-width: 78ch;
}

/* Opportunités : le travail de l'agence sur un bien — écarter, rappeler.
   Séparé visuellement du contenu de la carte : ce sont des gestes, pas des
   informations sur le bien. */
.opp-travail {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
    font-size: var(--text-base);
}

.opp-travail-form {
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
    flex-wrap: wrap;
    margin-left: auto;
}

.opp-travail-date {
    /* Sans largeur bornée, le champ prenait toute la ligne et rejetait
       « Fixer » et « Écarter » en dessous. */
    flex: 0 0 auto;
    width: 140px;
    padding: 3px 6px;
    font-size: var(--text-sm);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: inherit;
}

.opp-travail-resume {
    margin-top: 6px;
}

/* File de vérification : le champ date des reports, au gabarit des boutons.
   Largeur bornée pour la même raison que sur les cartes d'opportunité —
   sans elle il occupe toute la cellule et repousse les boutons. */
.verdict-date {
    flex: 0 0 auto;
    width: 130px;
    padding: 3px 6px;
    font-size: var(--text-sm);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: inherit;
}

/* Pilotage : les comptes de connexion sous chaque agence. Discrets — on vient
   d'abord pour l'agence — mais atteignables, parce que supprimer une agence
   exige d'avoir retiré ses comptes. */
tr.admin-comptes td {
    padding-top: 2px;
    padding-bottom: var(--space-3);
    border-top: 0;
    font-size: var(--text-sm);
}

.admin-compte {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-right: var(--space-3);
}

.admin-compte form {
    display: inline;
}

/* Ouvrir un accès depuis Pilotage. Posé sous la liste des comptes de
   l'agence, séparé par un filet : c'est un geste d'ajout, pas une des
   puces de la liste. */
.compte-creer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-light);
}

.compte-creer input[type="email"] {
    flex: 1 1 240px;
    min-width: 0;
    max-width: 340px;
}

.compte-creer select {
    width: auto;
    flex: 0 0 auto;
}

.compte-creer .muted {
    font-size: var(--text-sm);
}

/* Pilotage : décision sur une demande d'inscription. */
.demande-form {
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
    flex-wrap: wrap;
}

/* La note portait input-mini, taillé pour des nombres : le libellé y était
   coupé à « note ( ». Elle prend toute la largeur de sa colonne, et les deux
   boutons se partagent la ligne suivante. */
.demande-note {
    flex: 1 1 100%;
    min-width: 0;
    padding: 4px 8px;
    font-size: var(--text-sm);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: inherit;
}

.demande-form .btn {
    flex: 1 1 auto;
}

.demandes-tranchees {
    margin-top: var(--space-3);
}

.demandes-tranchees > summary {
    cursor: pointer;
    font-size: var(--text-base);
    color: var(--primary);
}

/* Pilotage : les communes d'une agence, en entier. La colonne du tableau n'en
   montre que trois et le reste n'était lisible qu'en survol — donc pas du tout
   sur un écran tactile ni à l'impression. */
.admin-communes {
    margin-top: var(--space-1);
    display: flex;
    align-items: baseline;
    gap: var(--space-1);
    flex-wrap: wrap;
    font-size: var(--text-sm);
}

.admin-commune {
    display: inline-block;
    padding: 1px 7px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
}

.admin-commune.demande-pending {
    border-color: #e0c46b;
    background: #fff8e6;
    color: #7a5b00;
}

.admin-commune.demande-added {
    border-color: #9ec9a6;
    background: #f1f9f2;
    color: #2f6b3c;
}

.admin-commune.demande-refused {
    opacity: .6;
    text-decoration: line-through;
}

/* Mon compte : séparateur entre le pack et la demande de commune. */
hr.sep {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 18px 0 14px;
}

.input-large {
    min-width: 240px;
    flex: 1 1 240px;
}

/* Mon compte : le champ commune n'a pas à occuper toute la ligne — sans
   largeur bornée il poussait le motif et le bouton à la ligne suivante. */
.input-commune {
    min-width: 180px;
    flex: 0 1 220px;
}

/* « Adresse non publiée » n'est pas un titre, c'est l'absence de titre : elle
   ne doit pas se présenter en bleu de lien, qui promet un nom de rue. Le lien
   reste cliquable — c'est bien la fiche du bien qui s'ouvre. */
.sans-adresse {
    color: var(--muted);
    font-weight: 500;
}


/* ---------------------------------------------------------------------
   Verdicts d'un bien : « pas intéressé », « vendu ».

   Ce sont des ÉCARTEMENTS. Ils portaient le même contour bleu que les
   actions principales, donc la carte proposait d'abord de se débarrasser du
   bien — l'inverse de ce qu'on vient y faire. Ils s'effacent, et ne se
   colorent qu'au survol, au moment où l'on va vraiment cliquer.
   --------------------------------------------------------------------- */
.negoc-verdicts .btn.sm,
.negoc-verdicts .btn.secondary.sm {
    border-color: transparent;
    background: transparent;
    color: var(--muted);
    font-weight: 500;
}

.negoc-verdicts .btn.sm:hover,
.negoc-verdicts .btn.sm:focus-visible {
    border-color: var(--border);
    background: var(--panel);
    color: var(--text);
}

/* ---------------------------------------------------------------------
   Note d'écran : l'explication qui vaut la première fois et encombre la
   centième. Repliée par défaut, atteignable d'un clic. Un outil qu'on
   ouvre chaque jour doit s'ouvrir sur son contenu, pas sur sa notice.
   --------------------------------------------------------------------- */
.note-ecran {
    margin: var(--space-2) 0 0;
}

.note-ecran > summary {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    font-size: var(--text-sm);
    color: var(--muted);
    padding: var(--space-05) 0;
    list-style: none;
}

/* Sans marqueur, la note repliée passait pour du texte gris : rien ne disait
   qu'on pouvait l'ouvrir. Le chevron est dessiné plutôt que laissé au
   triangle du navigateur, qui diffère de l'un à l'autre. */
.note-ecran > summary::-webkit-details-marker {
    display: none;
}

.note-ecran > summary::before {
    content: '';
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    transition: transform .15s ease;
}

.note-ecran[open] > summary::before {
    transform: rotate(45deg);
}

.note-ecran > summary:hover,
.note-ecran[open] > summary {
    color: var(--primary);
}

.note-ecran > p {
    margin-top: var(--space-2);
}


/* ---------------------------------------------------------------------
   Pages publiques : connexion, demande d'essai, mot de passe oublié,
   notice de confidentialité. Elles n'avaient aucune marque — on y lisait
   « Connexion » sans savoir de quel outil il s'agissait.
   --------------------------------------------------------------------- */
.public-brand {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--space-8) var(--space-6) 0;
}

.public-brand-mark {
    display: inline-block;
    color: var(--text);
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: -.02em;
    text-decoration: none;
}

.public-brand-mark span {
    color: var(--primary);
}

/* La carte de connexion se centrait en haut, avec un grand vide dessous et
   le lien de notice échoué tout en bas. Elle occupe maintenant la hauteur
   disponible et le pied reste à sa place. */
.public-page {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--space-8) var(--space-6) var(--space-10);
    min-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* La notice de confidentialité est un document : elle se lit du haut, pas
   centrée verticalement. */
.public-page:has(.legal) {
    display: block;
    min-height: 0;
}

/* Demande d'essai : l'accroche reste centrée, l'explication non. Du texte
   courant centré sur plusieurs lignes oblige l'oeil à chercher le début de
   chaque ligne. */
.inscription-note {
    margin: var(--space-3) 0 var(--space-5);
    padding: var(--space-3);
    background: var(--bg-soft);
    border-radius: var(--radius);
    line-height: 1.55;
    text-align: left;
}

/* Le titre de la carte de demande tenait sur deux lignes en coupant après
   le tiret ; il se resserre. */
.login-card h1 {
    line-height: 1.2;
}


/* ---------------------------------------------------------------------
   Chiffres alignés.

   Dans un outil où l'on compare des prix, des surfaces et des pourcentages
   d'une ligne à l'autre, les chiffres doivent tomber en colonnes. Inter a
   des chiffres à chasse variable par défaut : le « 1 » y est plus étroit
   que le « 8 », donc 111 000 € et 888 000 € n'ont pas la même largeur et
   l'oeil ne peut plus comparer deux lignes d'un coup.
   --------------------------------------------------------------------- */
.stat-value,
.stat strong,
.fact strong,
.negoc-prix,
.negoc-chiffre,
.negoc-rendement,
.negoc-rank,
.market-tabs strong,
.badge,
.follow-count,
table th,
table td {
    font-variant-numeric: tabular-nums;
}


/* ---------------------------------------------------------------------
   Tuiles d'en-tête du tableau de bord.

   Chacune portait son filet de couleur en style en ligne — dont un vert
   (--accent, #24c08b) qui n'était pas celui du chiffre en dessous
   (--good) : le trait et le nombre disaient la même chose dans deux
   verts différents. Et sur une rangée de quatre, quatre traits colorés
   ne hiérarchisent rien, ils décorent.

   Les filets partent. La couleur reste là où elle porte un sens — sur le
   chiffre — et se déclare ici une fois, au lieu d'être répétée dans le
   gabarit. Le panneau de relances, lui, garde son filet : il est SEUL,
   donc il signale vraiment.
   --------------------------------------------------------------------- */
.stat-card.is-good .stat-value { color: var(--good); }
.stat-card.is-warm .stat-value { color: var(--warning); }
.stat-card.is-key .stat-value { color: var(--primary); }

.panel.is-urgent {
    border-left: 3px solid var(--warning);
}


/* ---------------------------------------------------------------------
   Tuiles de plan, sur la page Abonnement. Ce sont des FORMULAIRES posés
   dans une grille de cases à cocher : sans cette règle, le nom du plan,
   son prix et le bouton se collaient sur une seule ligne.
   --------------------------------------------------------------------- */
.plan-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1-5);
}

.plan-tile strong {
    font-size: var(--text-md);
}

.plan-tile button {
    margin-top: var(--space-1);
}


/* ---------------------------------------------------------------------
   Demander un essai.

   C'est la page qui décide si un visiteur devient client : elle doit dire
   ce que fait l'outil avant de demander quoi que ce soit, et ne jamais
   punir une erreur de saisie. Le reste est du confort — filtre, compteur —
   qui sert le même but : qu'on n'ait pas à recommencer.
   --------------------------------------------------------------------- */
.inscription {
    max-width: 640px;
}

.inscription-pitch {
    margin: 0 0 var(--space-2);
    font-size: var(--text-md);
    line-height: 1.5;
    color: var(--text);
}

.inscription-sous-pitch {
    margin: 0 0 var(--space-4);
}

.inscription-communes {
    margin: 0;
    padding: 0;
    border: 0;
}

.inscription-communes legend {
    padding: 0;
    margin-bottom: var(--space-2);
    font-size: var(--text-base);
}

.inscription-communes legend strong {
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.inscription-filtre {
    margin-bottom: var(--space-2);
}

/* Une case que le quota ferme : visiblement inactive, mais jamais cachée —
   on doit comprendre qu'elle existe et pourquoi elle ne répond pas. */
.check-tile.is-off {
    opacity: .5;
    cursor: not-allowed;
}

.check-tile.is-off input {
    cursor: not-allowed;
}

#ins-plein,
#ins-confirm-note {
    margin: var(--space-2) 0 0;
    color: var(--warning-ink);
    font-size: var(--text-sm);
}

/* =====================================================================
   Opportunités — l'écran d'appel (01/10/2026)
   =====================================================================

   Mesuré avant refonte sur mobile : première opportunité à 1,4 écran de
   défilement, chaque carte haute de 1,6 écran, le numéro du propriétaire
   à 2 écrans du haut de sa carte. Une carte doit désormais tenir dans un
   tiers d'écran de téléphone, l'action en premier :
     adresse → ce que c'est → pourquoi appeler → LE bouton → le résultat.
   Le reste (qui le tient, preuves, dossiers) est replié. */

.oc-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.oc-head h2 { margin: 0 0 var(--space-1); }
.oc-head p { margin: 0; }
.oc-dus { color: var(--warning-ink); }
.oc-start { font-size: var(--text-md); padding: var(--space-3) var(--space-5); }

.oc-filtres { display: flex; flex-direction: column; gap: var(--space-3); }
.oc-chips { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--space-1)); padding: 0 var(--space-1); }
.oc-chips::-webkit-scrollbar { display: none; }
.oc-chip {
    flex: none; display: inline-flex; align-items: center; gap: var(--space-1-5);
    padding: var(--space-1-5) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-pill);
    background: var(--panel); color: var(--text); font-weight: 500; text-decoration: none; white-space: nowrap;
}
.oc-chip span { color: var(--muted); font-weight: 600; font-size: var(--text-sm); }
.oc-chip.is-on { background: var(--text); border-color: var(--text); color: #fff; }
.oc-chip.is-on span { color: rgba(255, 255, 255, .75); }
.oc-chip.is-vide { opacity: .55; }
.oc-form { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.oc-form select { flex: 1 1 160px; max-width: 260px; }
.oc-filtres-pied { display: flex; gap: var(--space-4); align-items: baseline; flex-wrap: wrap; font-size: var(--text-sm); }
.oc-filtres-pied .opp-aide { margin: 0; font-size: var(--text-sm); }
.oc-lien { background: none; border: 0; padding: 0; color: var(--primary-ink); font: inherit; font-weight: 600; cursor: pointer; }
.oc-lien:hover { text-decoration: underline; }

.oc-separateur { margin: var(--space-6) 0 var(--space-2); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }

.oc-carte { border-left: 4px solid var(--primary); display: flex; flex-direction: column; gap: var(--space-2); }
.oc-carte.is-chaud { border-left-color: var(--good); }
.oc-carte.oc-appel { border-left-color: var(--good); }
.oc-carte.is-traitee { border-left-color: var(--border); }
.oc-carte.is-traitee .oc-pitch { color: var(--muted); }
.oc-carte p { margin: 0; }
.oc-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.oc-adresse { margin: 0; font-size: var(--text-lg); line-height: 1.2; }
.oc-lieu { color: var(--muted); font-size: var(--text-sm); margin-top: var(--space-05) !important; }
.oc-meta { font-weight: 500; }
.oc-pitch { font-size: var(--text-md); line-height: 1.45; }
.oc-doute { font-size: var(--text-sm); color: var(--warning-ink); }
.oc-note-prec { font-size: var(--text-sm); color: var(--muted); font-style: italic; }

.oc-action { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1-5); margin-top: var(--space-1); }
.oc-cta {
    display: inline-flex; flex-direction: column; align-items: flex-start; gap: var(--space-05);
    padding: var(--space-2) var(--space-5); min-height: 48px; justify-content: center; text-align: left; cursor: pointer;
}
.oc-cta-label { font-size: var(--text-sm); font-weight: 500; opacity: .9; }
.oc-cta-num { font-size: var(--text-md); font-weight: 700; letter-spacing: .01em; }
.oc-appel .oc-cta { background: var(--good); border-color: var(--good); }
.oc-appel .oc-cta:hover { background: var(--good-ink); border-color: var(--good-ink); }
.oc-second { font-size: var(--text-sm); color: var(--muted); }
.oc-copie:not(.btn) {
    background: var(--input); border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 1px var(--space-1-5); font: inherit; font-weight: 600; color: var(--text); cursor: pointer;
}

.oc-issues { display: flex; flex-direction: column; gap: var(--space-1-5); padding-top: var(--space-2); border-top: 1px solid var(--border-light); }
.oc-issues-titre { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.oc-issues-boutons { display: flex; gap: var(--space-1-5); flex-wrap: wrap; align-items: flex-start; }
.oc-issues .btn.oc-bon:hover { background: var(--good); border-color: var(--good); color: #fff; }
.oc-issues .btn.oc-non:hover { background: var(--bad); border-color: var(--bad); color: #fff; }
.oc-rappel { position: relative; }
.oc-rappel > summary { list-style: none; }
.oc-rappel > summary::-webkit-details-marker { display: none; }
.oc-rappel-choix {
    display: flex; gap: var(--space-1-5); flex-wrap: wrap; align-items: center;
    margin-top: var(--space-1-5); padding: var(--space-2); background: var(--bg-soft); border-radius: var(--radius);
}
.oc-rappel-choix input[type="date"] { width: auto; }
.oc-note { width: 100%; }
.oc-note-ouvrir summary { cursor: pointer; font-size: var(--text-sm); color: var(--primary-ink); font-weight: 600; width: max-content; }
.oc-note-ouvrir[open] summary { margin-bottom: var(--space-1-5); }

.oc-detail { border-top: 1px solid var(--border-light); padding-top: var(--space-2); }
.oc-detail > summary { cursor: pointer; font-size: var(--text-sm); color: var(--primary-ink); font-weight: 600; }
.oc-detail[open] > summary { margin-bottom: var(--space-3); }
.oc-detail h4 { margin: var(--space-3) 0 var(--space-2); font-size: var(--text-sm); color: var(--good-ink); }
.oc-preuve { font-size: var(--text-sm); color: var(--good-ink); margin-bottom: var(--space-2) !important; }
.oc-annonces { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.oc-annonces li { display: flex; gap: var(--space-3); align-items: flex-start; }
.oc-annonces li > div { display: flex; flex-direction: column; gap: var(--space-05); min-width: 0; }
.oc-annonces img, .oc-vignette { width: 64px; height: 46px; border-radius: var(--radius-sm); object-fit: cover; flex: none; background: var(--border); display: block; }
.oc-annonces li.is-proprio strong { color: var(--good-ink); }
.oc-liens { display: flex; gap: var(--space-3); flex-wrap: wrap; font-size: var(--text-sm); }
.oc-detail-pied { display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: baseline; margin-top: var(--space-3) !important; font-size: var(--text-sm); }
.oc-inline { display: inline; margin: 0; }
.oc-inline .oc-lien { color: var(--muted); }

/* Mode appel : une carte, en grand, les gestes à portée de pouce. */
.oc-appel-barre { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); position: sticky; top: 0; z-index: 5; }
.oc-quitter { font-weight: 600; text-decoration: none; }
.oc-carte.is-plein .oc-adresse { font-size: var(--text-xl); }
.oc-carte.is-plein .oc-cta { width: 100%; }
.oc-carte.is-plein .oc-issues-boutons .btn { min-height: 44px; flex: 1 1 40%; }
.oc-carte.is-plein .oc-rappel { flex: 1 1 40%; }
.oc-carte.is-plein .oc-rappel > summary { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: center; }
.oc-vide h2 { margin-top: 0; }
.oc-vide-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

@media (max-width: 640px) {
    .oc-head { flex-direction: column; align-items: stretch; }
    .oc-start { text-align: center; }
    .oc-cta { width: 100%; }
    .oc-form select { max-width: none; }
    .oc-issues-boutons .btn { flex: 1 1 auto; }
}
.oc-resume { margin: 0; font-size: var(--text-md); }
.oc-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-2); align-items: center; }
.oc-form select { max-width: none; width: 100%; }
.oc-form .oc-tri { font-weight: 600; }
.oc-reset { font-size: var(--text-sm); font-weight: 600; }
.oc-parution { white-space: nowrap; }
.oc-parution.is-neuf { color: var(--good-ink); font-weight: 600; }
@media (max-width: 640px) {
    .oc-form { grid-template-columns: 1fr 1fr; }
    .oc-form .oc-tri { grid-column: 1 / -1; }
}
/* Le tri reste visible ; les autres filtres se replient (ouverts d'office
   dès qu'un filtre est actif, pour qu'on voie pourquoi la liste a rétréci). */
.oc-form { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: flex-start; }
.oc-form .oc-tri { flex: 1 1 200px; width: auto; }
.oc-plus { flex: 0 0 auto; }
.oc-plus[open] { flex: 1 1 100%; }
.oc-plus > summary { list-style: none; cursor: pointer; }
.oc-plus > summary::-webkit-details-marker { display: none; }
.oc-plus-champs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-2); margin-top: var(--space-2); align-items: center; }
@media (max-width: 640px) {
    .oc-form .oc-tri { grid-column: auto; }
    .oc-plus-champs { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) { .oc-plus-champs { grid-template-columns: 1fr; } }

/* « Voir comme » : bandeau collé en haut, d'une couleur qu'aucun autre
   élément de l'outil n'emploie — on doit le voir du coin de l'œil. */
.voir-comme-bandeau {
    position: sticky; top: 0; z-index: 50;
    display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap;
    padding: var(--space-2) var(--space-4); background: #5b2a86; color: #fff; font-size: var(--text-sm);
}
.voir-comme-bandeau form { margin: 0; }
.voir-comme-bandeau .btn { background: #fff; color: #5b2a86; border-color: #fff; }

/* Connexions : comptes, « voir comme », création. */
.cx-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.cx-ligne-actions { display: flex; gap: var(--space-3); align-items: center; white-space: nowrap; }
.cx-inline { margin: 0; display: inline; }
.cx-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); align-items: end; }
.cx-form > label { display: flex; flex-direction: column; gap: var(--space-1); }
.cx-nouvelle { grid-column: 1 / -1; border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-3) var(--space-4); display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); margin: 0; }
.cx-nouvelle[hidden] { display: none; }
.cx-nouvelle legend { font-weight: 600; padding: 0 var(--space-1); }
.cx-nouvelle > label { display: flex; flex-direction: column; gap: var(--space-1); }
.cx-nouvelle > p { grid-column: 1 / -1; margin: 0; }
.cx-champ { display: flex; flex-direction: column; gap: var(--space-1); }
.cx-communes { grid-column: 1 / -1; }
.cx-communes-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-1) var(--space-3); }
.cx-case { display: flex; flex-direction: row; align-items: center; gap: var(--space-1-5); font-weight: 400; }
.cx-form > div { grid-column: 1 / -1; }
.cx-compte .cx-voir { display: block; margin-top: var(--space-1); }
.cx-case { justify-content: flex-start; } .cx-case input[type="checkbox"] { width: auto; flex: none; margin: 0; }
.oc-prix { grid-column: 1 / -1; display: flex; gap: var(--space-2); align-items: flex-end; flex-wrap: wrap; }
.oc-prix label { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-sm); color: var(--muted); flex: 1 1 120px; }

/* Photo + pastilles en tête de carte (01/10/2026) : ce qu'on regarde en
   premier — à quoi ressemble le bien, vente ou location, publié quand. */
.oc-tete { display: grid; grid-template-columns: 132px 1fr; gap: var(--space-3); align-items: start; }
.oc-tete-texte { min-width: 0; display: flex; flex-direction: column; gap: var(--space-05); }
.oc-photo { display: block; width: 132px; height: 96px; border-radius: var(--radius); overflow: hidden; background: var(--input); border: 1px solid var(--border); }
.oc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oc-photo.is-vide { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: var(--text-sm); font-weight: 600; text-align: center; padding: var(--space-1); }
.oc-pastilles { display: flex; gap: var(--space-1-5); flex-wrap: wrap; align-items: center; margin-bottom: var(--space-1); }
.oc-tx, .oc-pub {
    display: inline-flex; align-items: center; padding: 2px var(--space-2); border-radius: var(--radius-pill);
    font-size: var(--text-xs); font-weight: 700; letter-spacing: .03em; white-space: nowrap;
}
.oc-tx { text-transform: uppercase; }
.oc-tx.is-vente { background: var(--primary); color: #fff; }
.oc-tx.is-location { background: #7a4fb0; color: #fff; }
.oc-pub { background: var(--input); color: var(--text); border: 1px solid var(--border); }
.oc-pub.is-neuf { background: var(--good); border-color: var(--good); color: #fff; }
.oc-pub.is-long { background: color-mix(in srgb, var(--warning) 14%, transparent); border-color: color-mix(in srgb, var(--warning) 35%, transparent); color: var(--warning-ink); }
.oc-carte.is-plein .oc-tete { grid-template-columns: 1fr; }
.oc-carte.is-plein .oc-photo { width: 100%; height: 200px; }
@media (max-width: 640px) {
    .oc-tete { grid-template-columns: 96px 1fr; }
    .oc-photo { width: 96px; height: 76px; }
    .oc-adresse { font-size: var(--text-md); }
}

/* À vérifier (CRM) : l'avancement, pour savoir où on en est. */
.av-chiffre { font-size: var(--text-md); margin: 0 0 var(--space-2); }
.av-chiffre strong { font-size: var(--text-xl); }
.av-trouvees { color: var(--good-ink); }
.av-barre, .av-mini { display: block; height: 10px; background: var(--input); border-radius: var(--radius-pill); overflow: hidden; }
.av-barre span, .av-mini span { display: block; height: 100%; background: var(--good); }
.av-mini { display: inline-block; width: 70px; height: 6px; vertical-align: middle; margin-right: var(--space-1); }
.av-rythme { margin: var(--space-2) 0 var(--space-4); }
.av-table tr.av-chez-vous td:first-child { font-weight: 600; }
.av-table tr.av-chez-vous td:first-child::before { content: '●'; color: var(--good); margin-right: var(--space-1); font-size: var(--text-xs); }
.oc-annuler { margin: 0; font-size: var(--text-sm); } .oc-annuler .oc-lien { color: var(--muted); font-weight: 500; }

/* Opportunités — vue Tableau (kanban). */
.oc-head-actions { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.oc-vues a { text-decoration: none; }
.oc-tableau { display: grid; grid-template-columns: repeat(4, minmax(240px, 1fr)); gap: var(--space-3); align-items: start; overflow-x: auto; padding-bottom: var(--space-2); }
.oc-col { background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-2); min-height: 160px; transition: background .15s; }
.oc-col.is-survol { background: color-mix(in srgb, var(--good) 10%, transparent); border-color: var(--good); }
.oc-col h3 { margin: var(--space-1) var(--space-1) var(--space-2); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); display: flex; justify-content: space-between; }
.oc-col h3 span { background: var(--panel); border-radius: var(--radius-pill); padding: 0 var(--space-2); color: var(--text); }
.oc-col-interesse h3 { color: var(--good-ink); }
.oc-col-ecarte { opacity: .85; }
.oc-col-cartes { display: flex; flex-direction: column; gap: var(--space-2); }
.oc-col-vide { text-align: center; font-size: var(--text-sm); padding: var(--space-4) 0; margin: 0; border: 1px dashed var(--border); border-radius: var(--radius); }
.oc-mini { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-2); display: flex; flex-direction: column; gap: var(--space-1-5); cursor: grab; }
.oc-mini.is-glisse { opacity: .4; }
.oc-mini-haut { display: grid; grid-template-columns: 64px 1fr; gap: var(--space-2); align-items: start; }
.oc-mini-haut img, .oc-mini-vide { width: 64px; height: 48px; object-fit: cover; border-radius: var(--radius-sm); background: var(--input); display: block; }
.oc-mini-haut > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: var(--text-sm); }
.oc-mini .oc-pastilles { margin: 0; }
.oc-mini-adresse { font-size: var(--text-base); line-height: 1.25; }
.oc-mini .oc-note-prec { margin: 0; font-size: var(--text-xs); }
.oc-mini-appel { font-weight: 700; color: var(--good-ink); text-decoration: none; font-size: var(--text-sm); }
.oc-mini-deplacer { margin: 0; }
.oc-mini-deplacer select { font-size: var(--text-sm); padding: var(--space-1) var(--space-2); }
@media (max-width: 900px) { .oc-tableau { grid-template-columns: repeat(4, 260px); } }
.oc-historique { font-size: var(--text-sm); color: var(--muted); }
.oc-historique summary { cursor: pointer; width: max-content; }
.oc-historique ul { margin: var(--space-1) 0 0; padding-left: var(--space-5); }
.vl-suivi { min-width: 170px; }
.vl-suivi .badge { margin-right: var(--space-1); }
.vl-note { display: block; font-size: var(--text-xs); margin: 2px 0; }
.vl-form { margin: var(--space-1) 0 0; }
.vl-form select { font-size: var(--text-sm); padding: var(--space-1) var(--space-2); }
.collecte-suspendue { margin-bottom: var(--space-4); }

/* Mon suivi — le pipeline (8 étapes). Réutilise les colonnes du Tableau. */
.sv-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); flex-wrap: wrap; }
.sv-aide { margin: var(--space-1) 0 0; font-size: var(--text-sm); }
.sv-filtres { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.sv-filtres select, .sv-filtres input { width: auto; min-width: 150px; }
.sv-tableau { grid-template-columns: repeat(8, minmax(220px, 1fr)); }
.sv-col-mandat h3 { color: var(--good-ink); }
.sv-col-vendu, .sv-col-refuse { opacity: .85; }
.sv-vendeur { font-size: var(--text-xs); font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.sv-vendeur.is-prive { color: var(--good-ink); }
.sv-pied { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.sv-agent { display: flex; align-items: center; gap: var(--space-1-5); margin: 0; flex: 1; min-width: 0; }
.sv-agent select { font-size: var(--text-xs); padding: 2px var(--space-1); min-width: 0; flex: 1; }
.sv-avatar { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.sv-avatar.is-vide { background: var(--input); color: var(--muted); }
.sv-annonce { text-decoration: none; font-weight: 700; }
@media (max-width: 900px) { .sv-tableau { grid-template-columns: repeat(8, 250px); } }
.oc-pub.is-change { background: #c13d35; border-color: #c13d35; color: #fff; }

/* =====================================================================
   DIRECTION ARTISTIQUE — octobre 2026
   =====================================================================

   L'outil était juste, mais pâle : un fond crème, un menu blanc sur fond
   presque blanc, des titres et des cartes de même poids. Rien ne disait
   où regarder. Cette couche tient en trois décisions :

   1. LA NAVIGATION EN ENCRE. Une colonne sombre porte l'identité et se
      distingue d'un coup d'œil du contenu. Le contenu, lui, récupère le
      blanc : il n'a plus à rivaliser avec le menu.
   2. UN SEUL BLEU D'ACTION. Le plein bleu est réservé à ce qui fait
      avancer (« Commencer les appels », « Filtrer ») ; tout le reste est
      blanc filé. On sait où cliquer sans lire.
   3. DES CHAMPS BLANCS ET DENSES. Les champs beiges de 46 px de haut
      ressemblaient à des boutons. Blancs, filés et à 38 px, ils se
      lisent comme des champs, et un filtre tient sur une ligne.

   Les règles qui suivent remplacent celles du même sélecteur plus haut.
   ===================================================================== */

body {
    font-size: var(--text-base);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "cv11", "ss01";
}

::selection { background: color-mix(in srgb, var(--primary) 18%, transparent); }

/* --- Colonne de navigation ------------------------------------------ */
.app-sidebar {
    width: 248px;
    border-right: 0;
    background: var(--ink);
    background-image: linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 220px);
    color: var(--ink-text);
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .14) transparent;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 22px 20px 18px;
    color: #fff;
    font-size: var(--text-md);
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    color: #fff;
    background: linear-gradient(135deg, #5b7cff 0%, var(--primary) 55%, #1f3fc4 100%);
    box-shadow: 0 6px 16px -6px rgba(47, 84, 235, .8), inset 0 1px 0 rgba(255, 255, 255, .25);
}

.sidebar-brand .brand-nom {
    font-weight: 500;
    letter-spacing: -.01em;
    color: rgba(255, 255, 255, .78);
}

.sidebar-brand .brand-nom b {
    margin-left: 3px;
    font-weight: 700;
    color: #fff;
}

.sidebar-nav {
    gap: 0;
    padding: 4px 12px 12px;
}

.sidebar-group > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
}

.sidebar-group > summary::-webkit-details-marker { display: none; }

.sidebar-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 10px 6px;
    font-size: 10.5px;
    letter-spacing: .1em;
}

.sidebar-group > summary::after {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    opacity: .6;
    transition: transform .15s ease;
}

.sidebar-group[open] > summary::after { transform: rotate(45deg); }

.app-sidebar .sidebar-section { color: var(--ink-muted); }
.app-sidebar .sidebar-section:hover { color: var(--ink-text); }

.sidebar-nav a {
    gap: 11px;
    padding: 7px 10px;
    margin: 1px 0;
    font-size: var(--text-base);
    font-weight: 500;
}

.app-sidebar .sidebar-nav a {
    color: var(--ink-text);
}

.app-sidebar .sidebar-nav a svg {
    opacity: .55;
}

.app-sidebar .sidebar-nav a:hover {
    background: rgba(255, 255, 255, .05);
    color: #fff;
}

.app-sidebar .sidebar-nav a.active {
    background: rgba(138, 162, 255, .14);
    color: #fff;
    font-weight: 600;
}

.app-sidebar .sidebar-nav a.active::before {
    left: -12px;
    top: 7px;
    bottom: 7px;
    width: 3px;
    background: var(--primary-light);
}

.app-sidebar .sidebar-nav a.active svg {
    opacity: 1;
    color: var(--primary-light);
}

.sidebar-footer {
    border-top: 1px solid var(--ink-line);
    padding: 14px 14px 18px;
}

.app-sidebar .sidebar-user-info strong { color: #fff; }
.app-sidebar .sidebar-user-info span { color: var(--ink-muted); }
.app-sidebar .avatar {
    width: 34px;
    height: 34px;
    font-size: var(--text-sm);
    background: linear-gradient(135deg, #5b7cff, var(--primary));
}

.app-sidebar .btn.ghost {
    color: var(--ink-text);
    border: 1px solid var(--ink-line);
}

.app-sidebar .btn.ghost:hover {
    background: rgba(255, 255, 255, .06);
    color: #fff;
}

.app-sidebar .sidebar-legal { color: var(--ink-muted); }
.app-sidebar .sidebar-legal:hover { color: #fff; }

/* Le tiroir mobile garde le fond clair : les mêmes groupes, en encre. */
.menu-mobile .sidebar-section { color: var(--muted); padding-top: 12px; }
.menu-mobile .sidebar-nav a { color: var(--text); }
.menu-mobile .sidebar-nav a.active { background: var(--bg-soft); color: var(--primary-ink); }

/* --- Entête de page -------------------------------------------------- */
.top-header {
    padding: 16px 32px;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    border-bottom-color: var(--border);
}

.top-header h1 {
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: -.02em;
}

.main {
    padding: 28px 32px 64px;
}

.import-pill {
    padding: 6px 12px;
    font-weight: 600;
    color: var(--muted-ink);
    box-shadow: none;
}

.import-pill .dot {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* --- Surfaces -------------------------------------------------------- */
.stat,
.panel,
.stat-card {
    border-color: var(--border);
    border-radius: var(--radius-xl);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 4%, transparent);
}

.panel { padding: 22px 24px; }

.panel h2 {
    font-size: var(--text-md);
    letter-spacing: -.01em;
}

.stat,
.stat-card {
    padding: 18px 20px 20px;
}

.stat > span:first-child,
.stat-card > span:first-child,
.stat-label {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
}

.stat strong,
.stat-card strong {
    font-size: var(--text-display);
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    margin: var(--space-1) 0 var(--space-05);
}

.stat-card:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
    box-shadow: 0 8px 24px -14px color-mix(in srgb, var(--text) 30%, transparent);
}

/* --- Boutons --------------------------------------------------------- */
.btn {
    min-height: 38px;
    padding: 8px 16px;
    border-radius: var(--radius);
    font-size: var(--text-base);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--primary-dark) 30%, transparent), inset 0 1px 0 rgba(255, 255, 255, .14);
}

.btn:focus-visible {
    outline: none;
    box-shadow: var(--ring);
}

.btn.secondary {
    border-color: var(--border);
    background: #fff;
    color: var(--text);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 5%, transparent);
}

.btn.secondary:hover {
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
    background: #fff;
    color: var(--primary-ink);
}

.btn.sm {
    min-height: 32px;
    padding: 5px 12px;
    font-size: var(--text-sm);
}

/* --- Champs ---------------------------------------------------------- */
input,
select,
textarea {
    min-height: 38px;
    padding: 8px 12px;
    border-color: var(--border);
    border-radius: var(--radius);
    background-color: #fff;
    box-shadow: inset 0 1px 1px color-mix(in srgb, var(--text) 3%, transparent);
    transition: border-color .14s ease, box-shadow .14s ease;
}

input[type="checkbox"],
input[type="radio"] {
    min-height: 0;
    width: auto;
    padding: 0;
    box-shadow: none;
    accent-color: var(--primary);
}

input:hover,
select:hover,
textarea:hover {
    border-color: color-mix(in srgb, var(--text) 22%, var(--border));
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--ring);
}

input::placeholder,
textarea::placeholder { color: color-mix(in srgb, var(--muted) 80%, white); }

label { font-size: var(--text-sm); font-weight: 500; }

/* --- Tableaux -------------------------------------------------------- */
th {
    background: #f8fafc;
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .06em;
    padding: 10px 12px;
}

td {
    padding: 12px;
    border-bottom-color: var(--border-light);
}

tbody tr:hover td { background: #fafbfd; }

/* --- Puces et bandeaux ---------------------------------------------- */
.badge {
    padding: 2px 9px;
    font-size: var(--text-xs);
    letter-spacing: .01em;
}

.flash {
    border-radius: var(--radius-lg);
    border-left-width: 3px;
    font-size: var(--text-base);
}

/* --- Écrans larges : la lecture ne s'étire pas sur 2 000 px ---------- */
@media (min-width: 1680px) {
    .main { max-width: 1520px; }
}

@media (max-width: 980px) {
    .top-header { padding: 12px 16px; }
    .main { padding: 18px 16px 48px; }
}

/* --- Carte d'opportunité, octobre 2026 -------------------------------
   Une carte se lisait de haut en bas en dix étages : photo, pastilles,
   adresse, phrase, bouton, résultats, détail. L'action principale tombait
   sous le pli dès la deuxième carte. Sur écran large, le bien occupe la
   gauche et QUOI FAIRE la droite : l'œil lit l'un, la main trouve l'autre,
   au même endroit pour chaque carte. Le filet gauche coloré disparaît au
   profit d'un liseré discret : la couleur de la carte, c'est son bouton. */
.oc-carte {
    border-left: 1px solid var(--border);
    padding: 18px;
    gap: var(--space-3);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.oc-carte:hover {
    border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
    box-shadow: 0 10px 30px -18px color-mix(in srgb, var(--text) 35%, transparent);
}

.oc-carte.is-chaud,
.oc-carte.oc-appel {
    border-left-color: var(--border);
    box-shadow: inset 3px 0 0 var(--good), 0 1px 2px color-mix(in srgb, var(--text) 4%, transparent);
}

.oc-carte.is-traitee { opacity: .82; }

.oc-ligne {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--space-6);
    align-items: start;
}

.oc-corps {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.oc-cote {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-left: var(--space-6);
    border-left: 1px solid var(--border-light);
}

.oc-tete { grid-template-columns: 168px 1fr; gap: var(--space-4); }

.oc-photo {
    width: 168px;
    height: 120px;
    border-radius: var(--radius-lg);
    border: 0;
    background: var(--bg);
}

.oc-photo img { transition: transform .3s ease; }
.oc-photo:hover img { transform: scale(1.04); }

.oc-adresse {
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: -.015em;
    margin-top: 2px;
}

.oc-lieu { color: var(--muted); font-size: var(--text-sm); }

.oc-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
    color: var(--muted-ink);
    font-weight: 500;
    margin-top: var(--space-1) !important;
}

.oc-prix {
    color: var(--text);
    font-size: var(--text-md);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.oc-prix + * { color: inherit; }

.oc-pitch {
    font-size: var(--text-base);
    line-height: 1.55;
    color: var(--text);
}

.oc-tx,
.oc-pub {
    border-radius: var(--radius-pill);
    font-size: 10.5px;
    letter-spacing: .02em;
}

.oc-tx.is-location { background: #6d4bd1; }
.oc-pub { background: #f4f6fa; border-color: var(--border); color: var(--muted-ink); }

.oc-action { margin-top: 0; align-items: stretch; }

.oc-cta {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    padding: 10px 14px;
    border-radius: var(--radius-lg);
    text-align: left;
}

.oc-carte.oc-appel .oc-cta {
    background: var(--good);
    border-color: var(--good);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--good) 40%, transparent), inset 0 1px 0 rgba(255, 255, 255, .16);
}

.oc-carte.oc-appel .oc-cta:hover { background: var(--good-ink); border-color: var(--good-ink); }

.oc-issues { border-top: 0; padding-top: 0; }
.oc-issues-boutons .btn { flex: 1 1 calc(50% - 6px); }
.oc-issues-boutons .oc-rappel { flex: 1 1 calc(50% - 6px); }
.oc-issues-boutons .oc-rappel > summary { width: 100%; }

.oc-detail { margin-top: var(--space-1); }

@media (max-width: 1100px) {
    .oc-ligne { grid-template-columns: 1fr; gap: var(--space-4); }
    .oc-cote { padding-left: 0; border-left: 0; padding-top: var(--space-4); border-top: 1px solid var(--border-light); }
}

@media (max-width: 640px) {
    .oc-tete { grid-template-columns: 104px 1fr; gap: var(--space-3); }
    .oc-photo { width: 104px; height: 84px; }
    .oc-carte { padding: 14px; }
}

/* --- Pages publiques : la même marque que la console ----------------- */
body:has(.public-page) {
    background:
        radial-gradient(1100px 520px at 50% -180px, color-mix(in srgb, var(--primary) 13%, transparent), transparent 70%),
        var(--bg);
}

.public-brand { text-align: center; padding-top: 48px; }

.public-brand-mark {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-lg);
}

.public-brand-mark .brand-nom { font-weight: 500; color: var(--muted-ink); }
.public-brand-mark .brand-nom b { margin-left: 3px; font-weight: 700; color: var(--text); }

.public-page { justify-content: flex-start; padding-top: 28px; }

.login-card {
    width: min(400px, 100%);
    padding: 32px 28px 24px;
    border-radius: 16px;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 5%, transparent), 0 24px 48px -24px color-mix(in srgb, var(--text) 28%, transparent);
}

.login-card h1 { font-size: var(--text-xl); }
.login-card .btn { min-height: 42px; width: 100%; }
.login-legal { text-align: center; font-size: var(--text-sm); }

/* --- Entête mobile : une seule ligne ---------------------------------
   Menu, titre et pastille s'empilaient : 300 px avant la première carte,
   sur l'écran de l'agent en déplacement. Menu et titre partagent la
   ligne ; la pastille de veille, information de pilotage, se retire. */
@media (max-width: 980px) {
    .top-header {
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        gap: var(--space-3);
    }

    .top-header h1 {
        flex: 1;
        min-width: 0;
        font-size: var(--text-lg);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .menu-mobile > summary { min-height: 40px; padding: 0 10px; }
}

@media (max-width: 640px) {
    .top-header-actions { display: none; }
    .panel { padding: 16px; }
    .stat, .stat-card { padding: 14px 16px; }
    .stat strong, .stat-card strong { font-size: var(--text-2xl); }
}

body:has(.public-page) { min-height: 100vh; }

/* --- Kanban (Opportunités en tableau, Mon suivi) ----------------------
   Les colonnes étaient teintées de bleu : huit bandes bleues côte à côte,
   et la carte blanche — ce qu'on déplace — se perdait dedans. Colonnes
   neutres, cartes blanches qui se soulèvent au survol, et UNE couleur par
   étape, sur un point devant le titre : on repère « Mandat » ou
   « À rappeler » sans lire. */
.oc-col {
    --etape: var(--muted);
    background: #eef1f6;
    border-color: transparent;
    border-radius: var(--radius-xl);
    padding: 10px;
}

.oc-col h3 {
    align-items: center;
    gap: var(--space-2);
    margin: 2px 4px 10px;
    font-size: var(--text-xs);
    color: var(--muted-ink);
}

.oc-col h3::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--etape);
    flex-shrink: 0;
}

.oc-col h3 span { margin-left: auto; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 1px var(--border); }

.sv-col-a_appeler   { --etape: var(--primary); }
.sv-col-messagerie  { --etape: #8b95a7; }
.sv-col-a_rappeler  { --etape: #e09b1a; }
.sv-col-courrier    { --etape: #6d4bd1; }
.sv-col-rdv         { --etape: #0ea5b7; }
.sv-col-mandat      { --etape: var(--good); }
.sv-col-vendu       { --etape: #0b5f42; }
.sv-col-refuse      { --etape: var(--bad); }

.oc-mini {
    border-radius: var(--radius-lg);
    padding: 10px;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 5%, transparent);
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}

.oc-mini:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--primary) 25%, var(--border));
    box-shadow: 0 8px 20px -12px color-mix(in srgb, var(--text) 35%, transparent);
}

.oc-mini-haut img, .oc-mini-vide { border-radius: var(--radius); }
.oc-mini-adresse { font-weight: 600; }
.oc-col-vide { border-color: color-mix(in srgb, var(--text) 14%, transparent); color: var(--muted); background: rgba(255, 255, 255, .5); }
.oc-col.is-survol { background: color-mix(in srgb, var(--etape) 10%, #eef1f6); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--etape) 45%, transparent); }

.oc-suite {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-6) 0 var(--space-2);
    font-size: var(--text-sm);
}

.oc-ancre { display: block; scroll-margin-top: 90px; }

/* --- La fête (assets/fete.js) ----------------------------------------
   Le bandeau descend du haut, au centre, au-dessus de tout ; il ne
   bloque rien (un clic le referme) et s'efface seul. */
.fete-toile {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 1000;
}

.fete-bandeau {
    position: fixed;
    top: 18px;
    left: 50%;
    z-index: 1001;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: min(460px, calc(100vw - 32px));
    padding: 14px 20px 14px 16px;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(135deg, #2f54eb, #1c38b0);
    box-shadow: 0 20px 50px -18px rgba(14, 26, 47, .55), inset 0 1px 0 rgba(255, 255, 255, .18);
    transform: translate(-50%, -140%) scale(.96);
    opacity: 0;
    transition: transform .5s cubic-bezier(.2, 1.4, .4, 1), opacity .3s ease;
    cursor: pointer;
}

.fete-bandeau.is-visible {
    transform: translate(-50%, 0) scale(1);
    opacity: 1;
}

.fete-mandat,
.fete-vendu { background: linear-gradient(135deg, #12a26f, #0b5f42); }

.fete-emoji {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, .16);
    font-size: 24px;
    animation: fete-saut .9s cubic-bezier(.3, 1.6, .5, 1) .25s both;
}

.fete-bandeau strong { display: block; font-size: var(--text-md); letter-spacing: -.01em; }
.fete-bandeau small { display: block; margin-top: 1px; font-size: var(--text-sm); opacity: .85; }

@keyframes fete-saut {
    0% { transform: scale(.4) rotate(-20deg); }
    60% { transform: scale(1.18) rotate(8deg); }
    100% { transform: scale(1) rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
    .fete-bandeau { transition: opacity .2s ease; transform: translate(-50%, 0); }
    .fete-emoji { animation: none; }
}

/* Carte de suivi sans photo : un emplacement dessiné, pas un trou. */
.oc-mini-vide {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%239aa4b5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.5 12 4l9 7.5'/%3E%3Cpath d='M5.5 9.8V20h13V9.8'/%3E%3C/svg%3E") center / 22px no-repeat,
        #eef1f6;
}

/* --- Interrupteur « Avec téléphone » --------------------------------- */
.oc-tel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
    color: var(--text);
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: background .14s ease, border-color .14s ease, color .14s ease;
}

.oc-tel:hover { text-decoration: none; border-color: color-mix(in srgb, var(--good) 45%, var(--border)); color: var(--good-ink); }
.oc-tel svg { color: var(--good); }
.oc-tel span {
    padding: 0 7px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--good) 12%, transparent);
    color: var(--good-ink);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
}

.oc-tel.is-on { background: var(--good); border-color: var(--good); color: #fff; }
.oc-tel.is-on svg { color: #fff; }
.oc-tel.is-on span { background: rgba(255, 255, 255, .22); color: #fff; }

/* =====================================================================
   Équipe et Agences (v67 — rôles et droits)
   ===================================================================== */
.eq-tete .eq-resume { display: flex; flex-direction: column; gap: var(--space-2); }
.eq-agence select { max-width: 320px; font-weight: 600; }
.eq-chiffres { margin: 0; font-size: var(--text-md); }
.eq-gele-txt { color: var(--bad-ink); font-weight: 600; }
.eq-modules { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.eq-module { padding: 2px 10px; border-radius: var(--radius-pill); background: #f1f3f7; color: var(--muted); font-weight: 600; }
.eq-module.is-on { background: color-mix(in srgb, var(--good) 12%, transparent); color: var(--good-ink); }

.eq-inviter-form {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1.4fr auto;
    gap: var(--space-3);
    align-items: end;
}
.eq-aide { margin: var(--space-2) 0 0; font-size: var(--text-sm); }

.eq-liste { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }

.eq-membre {
    display: grid;
    grid-template-columns: minmax(220px, 1.3fr) 150px 170px minmax(0, 2fr) auto;
    align-items: center;
    gap: var(--space-4);
    margin: 0;
    padding: 14px 18px;
}
.eq-membre.is-gele { background: #fbfbfc; }
.eq-membre.is-gele .eq-identite, .eq-membre.is-gele .eq-droits { opacity: .55; }

.eq-identite { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.eq-nom { display: flex; flex-direction: column; min-width: 0; }
.eq-nom strong, .eq-nom span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eq-nom span { font-size: var(--text-sm); }

.eq-avatar {
    display: grid; place-items: center; flex-shrink: 0;
    width: 38px; height: 38px; border-radius: 50%;
    background: #e8ecf3; color: var(--muted-ink);
    font-size: var(--text-sm); font-weight: 700;
}
.eq-avatar.role-admin { background: linear-gradient(135deg, #5b7cff, var(--primary)); color: #fff; }
.eq-avatar.role-manager { background: #e7e1fb; color: #5a3fc0; }
.eq-avatar.role-agent { background: color-mix(in srgb, var(--good) 14%, white); color: var(--good-ink); }

.eq-etat { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.eq-vu { font-size: var(--text-xs); }
.eq-role select { min-height: 34px; font-weight: 600; }
.eq-role-fixe { font-weight: 600; }
.eq-droits { display: flex; flex-wrap: wrap; gap: 4px; }
.eq-droit { padding: 2px 8px; border-radius: var(--radius-pill); background: #f1f3f7; color: var(--muted-ink); font-size: var(--text-xs); font-weight: 600; }
.eq-actions { justify-self: end; position: relative; }
.eq-verrou { cursor: help; }

.eq-plus > summary { list-style: none; }
.eq-plus > summary::-webkit-details-marker { display: none; }
.eq-panneau {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 25;
    width: min(420px, calc(100vw - 32px));
    padding: var(--space-4);
    background: #fff; border: 1px solid var(--border); border-radius: var(--radius-xl);
    box-shadow: var(--shadow-raised);
    display: flex; flex-direction: column; gap: var(--space-4);
}
.eq-cases { display: flex; flex-direction: column; gap: var(--space-2); }
.eq-case {
    display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start;
    padding: 8px 10px; border-radius: var(--radius); cursor: pointer; color: var(--text);
}
.eq-case:hover { background: #f6f8fb; }
.eq-case input { margin-top: 3px; }
.eq-case strong { display: block; font-size: var(--text-base); }
.eq-case small { display: block; color: var(--muted); font-size: var(--text-xs); font-weight: 400; }
.eq-case.is-off { opacity: .55; cursor: not-allowed; }
.eq-cases .btn { align-self: flex-start; }
.eq-zone { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--border-light); }

.eq-fiches { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.eq-fiches li { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); padding: 8px 0; border-bottom: 1px solid var(--border-light); }
.eq-fiche-form { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-left: auto; }
.eq-fiche-form input { width: 220px; }
.eq-fiche-form select { width: auto; }

.eq-roles summary { list-style: none; cursor: pointer; }
.eq-roles summary h2 { display: inline; margin: 0; }
.eq-roles summary::-webkit-details-marker { display: none; }
.eq-roles summary::after { content: " ▾"; color: var(--muted); }
.eq-coche { text-align: center; color: var(--good-ink); font-weight: 700; }

@media (max-width: 1180px) {
    .eq-membre { grid-template-columns: 1fr auto; }
    .eq-etat, .eq-role, .eq-droits { grid-column: 1 / -1; }
    .eq-etat { flex-direction: row; align-items: center; gap: var(--space-2); }
    .eq-actions { grid-row: 1; grid-column: 2; }
}
@media (max-width: 760px) {
    .eq-inviter-form { grid-template-columns: 1fr; }
    .eq-fiche-form { margin-left: 0; width: 100%; }
    .eq-fiche-form input { width: 100%; }
}

/* --- Agences ---------------------------------------------------------- */
.ag-tete { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.ag-resume { margin: 0; max-width: 70ch; }
.ag-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: var(--space-4); }
.ag-carte { margin: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.ag-carte.is-gelee { background: #fbfbfc; }
.ag-carte.is-gelee .ag-carte-tete, .ag-carte.is-gelee .ag-chiffres { opacity: .6; }
.ag-carte-tete { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-3); align-items: center; }
.ag-carte-tete h2 { margin: 0; font-size: var(--text-md); }
.ag-carte-tete p { margin: 0; font-size: var(--text-sm); }
.ag-logo {
    display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px;
    background: linear-gradient(135deg, var(--ink-2), var(--ink)); color: #fff; font-weight: 700;
}
.ag-chiffres { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); margin: 0; }
.ag-chiffres div { padding: 8px 10px; border-radius: var(--radius); background: #f6f8fb; }
.ag-chiffres dt { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.ag-chiffres dd { margin: 2px 0 0; font-size: var(--text-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
.ag-chiffres dd.ag-date { font-size: var(--text-sm); padding-top: 4px; }
.ag-chiffres .ag-alerte { color: var(--bad); }
.ag-modules { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.ag-label { width: 100%; font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.ag-module { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-base); color: var(--text); font-weight: 500; cursor: pointer; }
.ag-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--border-light); }
.oc-lecture, .sv-lecture { font-size: var(--text-sm); margin: 0; }

/* Le pictogramme de la marque héritait de « .sidebar-brand span » et de
   « .public-brand-mark span » (bleu de marque) : trait bleu sur carré bleu,
   donc invisible. Il est blanc, partout. */
.sidebar-brand .brand-mark,
.public-brand-mark .brand-mark { color: #fff; }
.brand-mark svg { display: block; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .18)); }
.ag-whise { display: flex; flex-direction: column; gap: var(--space-2); }
.ag-whise-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--space-2); }
.ag-whise-form input { min-height: 34px; }
.ag-whise-etat { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.ag-whise-etat form { margin-left: auto; }
@media (max-width: 520px) { .ag-whise-form { grid-template-columns: 1fr; } }
.ag-grille { grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); }
@media (max-width: 520px) { .ag-chiffres { grid-template-columns: repeat(2, 1fr); } }

/* Kanban sur téléphone : huit colonnes côte à côte obligeaient à faire
   défiler à l'horizontale pour trouver l'unique bien en cours, caché dans
   la cinquième. Sur un écran étroit, les étapes s'empilent et seules
   celles qui contiennent des biens s'affichent ; « Déplacer vers… » reste
   le geste (le glisser-déposer n'existe pas au doigt). */
@media (max-width: 640px) {
    .oc-tableau.sv-tableau,
    .oc-tableau {
        display: flex;
        flex-direction: column;
        overflow-x: visible;
    }
    .oc-tableau .oc-col { min-height: 0; }
    .oc-tableau .oc-col:has(.oc-col-vide) { display: none; }
}
@media (max-width: 640px) {
    .oc-tableau .oc-col { width: 100%; }
    .sv-filtres { display: grid; grid-template-columns: 1fr; gap: var(--space-2); }
    .sv-filtres select, .sv-filtres input { width: 100%; max-width: none; }
}

@media (max-width: 1180px) { .eq-role select { max-width: 260px; } }

/* --- Whise, adresse par adresse (carte d'opportunité) ---------------- */
.oc-whise { display: flex; flex-direction: column; gap: var(--space-2); padding: 10px 12px; border-radius: var(--radius-lg); background: #f6f8fb; border: 1px solid var(--border-light); }
.oc-whise-titre { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--primary-ink); }
.oc-whise-vignette { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-3); padding: 8px; border-radius: var(--radius); background: #fff; border: 1px solid var(--border); }
.oc-whise-vignette img { width: 64px; height: 48px; object-fit: cover; border-radius: var(--radius-sm); }
.oc-whise-vignette > div { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.oc-whise-vignette strong { font-size: var(--text-base); }
.oc-whise-dossier { font-size: var(--text-xs); font-weight: 600; color: var(--good-ink); }
.oc-whise-vignette p { margin: 2px 0 0 !important; font-size: var(--text-sm); color: var(--muted-ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.oc-whise-gestes { grid-column: 1 / -1; display: flex; gap: var(--space-2); }
.oc-whise-chercher { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }

.code-2fa { font-size: 22px; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }
.deux-facteurs-etapes { margin: 0 0 var(--space-4); padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.cle-2fa { display: inline-block; margin-top: 4px; padding: 6px 10px; border-radius: var(--radius); background: #f1f3f7; font-size: var(--text-md); letter-spacing: .08em; user-select: all; word-break: break-all; }

/* --- Dossiers CRM d'une adresse vérifiée (v71) ----------------------- */
.oc-dossiers { display: flex; flex-direction: column; gap: 4px; margin-top: var(--space-1); }
.oc-dossiers-titre { font-size: var(--text-xs); font-weight: 600; color: var(--muted); }
.oc-dossier { display: flex; align-items: center; gap: var(--space-2); padding: 5px 8px; border-radius: var(--radius); background: #f6f8fb; font-size: var(--text-sm); }
.oc-dossier.is-meme { background: color-mix(in srgb, var(--good) 10%, white); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--good) 35%, transparent); }
.oc-dossier-ref { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--primary-ink); background: none; border: 0; padding: 0; cursor: pointer; }
.oc-dossier-ref:hover { text-decoration: underline; }
.oc-dossier-lieu { color: var(--muted-ink); }
.oc-dossier-badge { margin-left: auto; padding: 1px 8px; border-radius: var(--radius-pill); background: var(--good); color: #fff; font-size: 10.5px; font-weight: 700; }

/* --- Parts de marché ------------------------------------------------- */
.pm-bascules { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.pm-bascules .seg { display: inline-flex; padding: 3px; border-radius: var(--radius-lg); background: #eef1f6; }
.pm-bascules .seg a { padding: 6px 14px; border-radius: var(--radius); color: var(--muted-ink); font-weight: 600; text-decoration: none; }
.pm-bascules .seg a.is-on { background: #fff; color: var(--text); box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 10%, transparent); }
.pm-commune select { min-width: 220px; font-weight: 600; }
.pm-aide { margin: var(--space-3) 0 0; font-size: var(--text-sm); max-width: 90ch; }
.pm-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: var(--space-4); }
.pm-carte { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.pm-carte header { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.pm-carte h2 { margin: 0; font-size: var(--text-md); }
.pm-carte h2 a { color: var(--text); }
.pm-top, .pm-classement { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pm-top li { display: grid; grid-template-columns: minmax(0, 1fr) 90px 52px; gap: var(--space-2); align-items: center; font-size: var(--text-sm); }
.pm-nom { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-barre { height: 8px; border-radius: 4px; background: #eef1f6; overflow: hidden; }
.pm-barre span { display: block; height: 100%; border-radius: 4px; background: color-mix(in srgb, var(--primary) 55%, white); }
.is-nous .pm-barre span { background: var(--good); }
.is-nous .pm-nom { font-weight: 700; color: var(--good-ink); }
.pm-pct { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.pm-pied { display: flex; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; padding-top: var(--space-2); border-top: 1px solid var(--border-light); font-size: var(--text-sm); }
.pm-vous-ligne { color: var(--good-ink); }
.pm-classement li { display: grid; grid-template-columns: 32px minmax(0, 1.4fr) minmax(0, 2fr) 48px 60px; gap: var(--space-3); align-items: center; padding: 6px 8px; border-radius: var(--radius); }
.pm-classement li.is-nous { background: color-mix(in srgb, var(--good) 8%, white); }
.pm-rang { color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.pm-n { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted-ink); }
.pm-vous { padding: 1px 7px; border-radius: var(--radius-pill); background: var(--good); color: #fff; font-size: 10.5px; font-weight: 700; margin-left: 4px; }
@media (max-width: 640px) {
    .pm-classement li { grid-template-columns: 26px minmax(0, 1fr) 44px 56px; }
    .pm-classement .pm-barre { display: none; }
}

/* --- Score des opportunités ------------------------------------------ */
.oc-note-score {
    display: inline-grid; place-items: center; min-width: 30px; height: 22px; padding: 0 7px;
    border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 800; font-variant-numeric: tabular-nums;
    cursor: help;
}
.oc-note-score.is-haut { background: var(--good); color: #fff; }
.oc-note-score.is-moyen { background: color-mix(in srgb, #e09b1a 18%, white); color: #7e540d; }
.oc-note-score.is-bas { background: #eef1f6; color: var(--muted-ink); }

.sc-intro p { margin: 0 0 var(--space-2); max-width: 85ch; }
.sc-grille { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.sc-curseurs { display: flex; flex-direction: column; gap: var(--space-4); margin: 0; }
.sc-critere { display: flex; flex-direction: column; gap: 4px; }
.sc-critere label { display: flex; justify-content: space-between; align-items: baseline; color: var(--text); }
.sc-libelle { font-weight: 600; font-size: var(--text-base); }
.sc-valeur { min-width: 28px; text-align: center; font-weight: 800; color: var(--primary-ink); font-variant-numeric: tabular-nums; }
.sc-critere input[type=range] { width: 100%; min-height: 0; padding: 0; border: 0; box-shadow: none; accent-color: var(--primary); background: transparent; }
.sc-critere small { font-size: var(--text-xs); }
.sc-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; padding-top: var(--space-2); border-top: 1px solid var(--border-light); }
.sc-apercu { margin: 0; position: sticky; top: 90px; }
.sc-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sc-liste li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-3); align-items: center; padding: 6px 8px; border-radius: var(--radius); background: #f8fafc; }
.sc-carte { display: flex; flex-direction: column; min-width: 0; }
.sc-carte strong { font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-carte small { color: var(--muted); font-size: var(--text-xs); }
.sc-aide { margin: var(--space-3) 0 0; font-size: var(--text-xs); }
@media (max-width: 900px) { .sc-grille { grid-template-columns: 1fr; } .sc-apercu { position: static; } }
.oc-dossiers-plus { display: flex; flex-direction: column; gap: 4px; }
.oc-dossiers-plus > summary { cursor: pointer; font-size: var(--text-xs); font-weight: 600; color: var(--primary-ink); padding: 2px 0; }
.oc-dossiers-plus[open] > summary { margin-bottom: 2px; }

/* --- Mimo, la mascotte (assets/mascotte.js, App\Mascotte) -------------
   Un lanceur rond aux couleurs de la marque, dans le coin, et une carte
   d'aide sobre. Au-dessus du contenu, sous la fête ; il ne bloque rien :
   seuls le lanceur et sa carte prennent les clics. */
.mimo {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 900;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    pointer-events: none;
}
.mimo[hidden] { display: none; }
.mimo > * { pointer-events: auto; }

.mimo-bouton {
    position: relative;
    display: block;
    width: 72px;
    height: 72px;
    padding: 0;
    border: 0;
    border-radius: 22px;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.mimo-bouton:focus-visible { outline: none; box-shadow: var(--ring); }
.mimo-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
    filter: drop-shadow(0 8px 10px color-mix(in srgb, #1d37b8 22%, transparent));
}

/* Il respire : le corps monte et descend, l'ombre au sol suit. */
.mimo-corps { transform-origin: 40px 72px; animation: mimo-respire 3.4s ease-in-out infinite; }
.mimo-ombre { transform-origin: 40px 75px; animation: mimo-ombre 3.4s ease-in-out infinite; }
@keyframes mimo-respire { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes mimo-ombre { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.9); opacity: .8; } }
.mimo-bouton:hover .mimo-corps { animation: mimo-saut .6s cubic-bezier(.3, 1.6, .5, 1); }

.mimo-yeux { transition: transform .18s ease-out; }
.mimo-paupieres { transform-origin: 40px 52px; transition: transform .08s; }
.mimo.cligne .mimo-paupieres { transform: scaleY(.12); }
.mimo-bouche { transition: d .25s; }

/* Humeurs : content (il parle), fête (RDV, mandat…), triste (on le range). */
.mimo[data-humeur="content"] .mimo-bouton .mimo-corps { animation: mimo-saut .6s cubic-bezier(.3, 1.6, .5, 1); }
.mimo[data-humeur="fete"] .mimo-bouton .mimo-corps { animation: mimo-saut .55s cubic-bezier(.3, 1.6, .5, 1) 4; }
.mimo[data-humeur="content"] .mimo-bouche,
.mimo[data-humeur="fete"] .mimo-bouche { d: path("M35.5 57.8q4.5 4.8 9 0"); }
.mimo[data-humeur="triste"] .mimo-bouche { d: path("M36.5 60.5q3.5 -2.6 7 0"); }
.mimo[data-humeur="triste"] { transition: opacity .35s, transform .35s; opacity: 0; transform: translateY(12px); }
@keyframes mimo-saut {
    0% { transform: translateY(0) scale(1, 1); }
    22% { transform: translateY(0) scale(1.07, .92); }
    55% { transform: translateY(-10px) scale(.96, 1.05); }
    80% { transform: translateY(0) scale(1.04, .96); }
    100% { transform: translateY(0) scale(1, 1); }
}

/* Une astuce pas encore lue : un point discret au-dessus de la cheminée. */
.mimo-pastille {
    position: absolute;
    top: 4px;
    right: 6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 2.5px var(--bg);
    transform: scale(0);
    transition: transform .2s;
}
.mimo.a-une-astuce:not(.is-parle) .mimo-pastille { transform: scale(1); }

.mimo-bulle {
    width: min(320px, calc(100vw - 32px));
    border-radius: var(--radius-xl);
    background: var(--panel);
    border: 1px solid var(--border);
    box-shadow: 0 18px 40px -16px color-mix(in srgb, var(--text) 30%, transparent),
                0 2px 6px -2px color-mix(in srgb, var(--text) 10%, transparent);
    overflow: hidden;
    transform-origin: bottom right;
    animation: mimo-bulle .22s cubic-bezier(.2, .9, .3, 1.15);
}
.mimo-bulle[hidden] { display: none; }
@keyframes mimo-bulle { from { opacity: 0; transform: translateY(8px) scale(.97); } }

.mimo-tete {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 10px 0 14px;
}
.mimo-avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--bg-blue);
}
.mimo-svg-mini { width: 26px; height: 26px; display: block; overflow: visible; }
.mimo-qui { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.mimo-qui strong { font-size: var(--text-base); color: var(--text); }
.mimo-qui small { font-size: var(--text-xs); color: var(--muted); font-weight: 500; letter-spacing: .01em; }
.mimo-fermer {
    margin-left: auto;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--muted);
    cursor: pointer;
}
.mimo-fermer:hover { background: var(--bg); color: var(--text); }
.mimo-fermer:focus-visible, .mimo-geste:focus-visible { outline: none; box-shadow: var(--ring); }

.mimo-texte {
    margin: 0;
    padding: 10px 16px 14px;
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--text);
}
.mimo-gestes {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    border-top: 1px solid var(--border-light);
    background: color-mix(in srgb, var(--bg) 55%, var(--panel));
}
.mimo-geste {
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    min-height: 30px;
    padding: 0 12px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text);
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.mimo-geste:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); color: var(--primary-ink); }
.mimo-geste.is-principal { background: var(--primary); border-color: var(--primary); color: #fff; }
.mimo-geste.is-principal:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
.mimo-geste.is-discret { margin-right: auto; padding: 0 4px; border-color: transparent; background: none; color: var(--muted); font-weight: 500; }
.mimo-geste.is-discret:hover { color: var(--text); }
.mimo-geste[hidden] { display: none; }

/* Téléphone : plus petit, et il ne parle que si on le lui demande. */
@media (max-width: 640px) {
    .mimo { right: 12px; bottom: 12px; }
    .mimo-bouton { width: 58px; height: 58px; }
}
@media print { .mimo { display: none; } }
@media (prefers-reduced-motion: reduce) {
    .mimo-corps, .mimo-ombre, .mimo-bulle { animation: none !important; transition: none !important; }
}

/* --- Suivi des leads : glisser-déposer (relances.php) ----------------- */
.lead-board.is-glissable .lead-card { cursor: grab; transition: box-shadow .15s, transform .15s, opacity .15s; }
.lead-board.is-glissable .lead-card:hover { box-shadow: var(--shadow-raised); }
.lead-board .lead-card.is-glisse { opacity: .4; transform: rotate(-1.5deg); }
.lead-board .lead-card.is-pose { opacity: .6; pointer-events: none; }
.lead-board.glisse-en-cours .lead-column { transition: background .15s, box-shadow .15s; }
.lead-board.glisse-en-cours .lead-column { box-shadow: inset 0 0 0 2px var(--border); }
.lead-board .lead-column.is-survol {
    background: color-mix(in srgb, var(--primary) 7%, var(--panel));
    box-shadow: inset 0 0 0 2px var(--primary);
}

/* --- Filtres particuliers (import_criteria.php) ------------------------ */
.fc-intro { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.fc-intro p { margin: 0; max-width: 70ch; color: var(--muted-ink); line-height: 1.5; }
.fc-intro p strong { color: var(--text); }
.fc-grille { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-4); align-items: start; margin-top: var(--space-4); }
.fc-form { display: flex; flex-direction: column; gap: 0; align-items: stretch; }
.fc-etape { border: 0; margin: 0; padding: var(--space-5) 0; border-top: 1px solid var(--border-light); display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.fc-etape:first-of-type { border-top: 0; padding-top: 0; }
.fc-etape legend { display: flex; align-items: center; gap: 10px; padding: 0; margin-bottom: var(--space-4); font-size: var(--text-md); font-weight: 700; color: var(--text); float: left; width: 100%; }
.fc-etape legend + * { clear: both; }
.fc-etape legend small { font-weight: 500; }
.fc-num { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--bg-blue); color: var(--primary-ink); font-size: var(--text-sm); font-weight: 700; }
.fc-actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding-top: var(--space-4); border-top: 1px solid var(--border-light); }
.fc-resume { position: sticky; top: 84px; }
.fc-resume h2 { margin: 0 0 var(--space-3); font-size: var(--text-md); }
.fc-resume-liste { display: flex; flex-direction: column; gap: 0; }
.fc-resume-liste > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border: 0; border-bottom: 1px solid var(--border-light); background: none; border-radius: 0; }
.fc-resume-liste > div:last-child { border-bottom: 0; }
.fc-resume-liste span { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.fc-resume-liste strong { font-size: var(--text-base); font-weight: 600; line-height: 1.4; }
@media (max-width: 1024px) {
    .fc-grille { grid-template-columns: 1fr; }
    .fc-resume { position: static; order: -1; }
}

/* Tableau de bord : les quatre usages en un coup d'œil (octobre 2026). */
.tuiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0 0 18px; }
.tuile { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-xl); text-decoration: none; color: var(--text); box-shadow: 0 1px 2px rgba(14, 26, 47, .04); transition: transform .15s, box-shadow .15s, border-color .15s; }
.tuile:hover { transform: translateY(-2px); border-color: var(--primary); box-shadow: 0 8px 22px rgba(47, 84, 235, .12); }
.tuile-k { font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tuile strong { font-size: 34px; line-height: 1.1; letter-spacing: -.03em; }
.tuile-s { font-size: var(--text-sm); color: var(--muted); }
@media (max-width: 900px) { .tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tuile strong { font-size: 28px; } }