/* ============================================================
   RedKey — Feuille de style
   Direction : Soft UI / Neomorphism (branche feat/neomorphism)
   Plaque grise unique, relief par la lumière, accent rouge retenu.
   Les noms de tokens sont conservés : les composants héritent
   automatiquement de la nouvelle palette. La couche neomorphism
   (relief/creux par composant) est en fin de fichier.
   ============================================================ */

:root {
    /* Accent RedKey — retenu, réservé à l'action et à la marque */
    --red: #C0392B;
    --red-dark: #9E2E22;
    /* Le rouge de marque quand il porte du TEXTE sur une surface claire.
       Mesuré le 27.07.2026 : #C0392B ne donne que 4,07 sur --paper-deep et 3,86
       sur --red-soft, sous le seuil AA — et c'est là que vivent le prix d'un
       bien, le lien actif de la navigation, les initiales d'un contact, le jour
       courant du planning. --red reste la couleur des aplats, des bordures et
       du blanc sur rouge, où le contraste n'a jamais posé problème. */
    --red-ink: #9E2E22;
    --red-hover: #A83227;
    --red-soft: #E6D6D3;          /* tint rouge doux sur la plaque grise */
    --red-soft-strong: #D3A69E;   /* icônes secondaires */
    --red-border: #D6BBB6;
    --red-accent: #BC7A70;

    /* Plaque grise — fond et surfaces partagent la teinte (relief = ombres) */
    --bg: #E4E7EC;          /* la « matière » */
    --paper: #F0F2F5;       /* cartes/tuiles — plus claire que le fond, ressort par contraste */
    --paper-deep: #DBDFE6;  /* zones en creux (inset) */
    --text: #33383F;        /* ardoise — ~7:1 sur la plaque (AA) */
    /* Mesuré le 27.07.2026 : l'ancien #6B717A donnait 3,97 sur --bg, 4,39 sur
       --paper et 3,68 sur --paper-deep. Les trois sous le seuil AA de 4,5, sur
       39 textes du seul tableau de bord — libellés, dates, méta. #5A6069 est la
       teinte la plus proche qui passe partout (5,12 / 5,65 / 4,74). */
    --text-muted: #5A6069;  /* labels, méta */
    --border: #D0D5DD;      /* hairline très douce (rare, la plupart en ombre) */
    --border-strong: #C3C8D0;

    /* Statuts — pastel soft, cohérents avec la plaque, texte lisible.
       Les teintes de texte ont été assombries de 3 à 8 % le 27.07.2026 : sur
       leur propre pastille elles tombaient entre 3,71 et 4,37, donc sous le
       seuil AA. Les fonds n'ont pas bougé, l'écart est invisible à l'œil et
       chaque badge passe maintenant 4,6 aussi bien sur sa pastille que posé
       nu sur la plaque. */
    --success: #3E694E;  --success-bg: #D3E0D7;
    --info:    #46608A;  --info-bg:    #D5DDEB;
    --sky:     #456479;  --sky-bg:     #D4E0E7;
    --warning: #815923;  --warning-bg: #ECE0CB;
    --violet:  #6E5488;  --violet-bg:  #DFD8E9;   /* déjà à 4,61 : inchangé */
    --neutral: #5A606A;  --neutral-bg: #D9DDE4;
    --danger:  #A9372A;  --danger-bg:  #ECD7D3;

    --serif: "Poppins", "Segoe UI", "Helvetica Neue", Arial, sans-serif;   /* titres, marque, chiffres */
    --sans:  "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;     /* texte courant, tableaux */

    --radius: 0.6rem;      /* boutons, inputs, petites surfaces (~10px) */
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --sidebar-w: 16rem;

    /* ── Système d'ombres neomorphism ──────────────────────────
       Lumière haut-gauche + ombre bas-droite = relief extrudé.
       Inversées + inset = creux. */
    --nm-light: rgba(255, 255, 255, 0.65);    /* highlight haut-gauche */
    --nm-dark:  rgba(190, 196, 205, 0.55);    /* ombre bas-droite */
    --nm-radius: 0.9rem;   /* cartes (~14px) — fini le look ballon 1.2rem */
    --nm-shadow:     0.13333rem 0.13333rem 0.4rem var(--nm-dark), -0.13333rem -0.13333rem 0.4rem var(--nm-light);
    --nm-shadow-sm:  0.1rem 0.1rem 0.26667rem var(--nm-dark), -0.1rem -0.1rem 0.26667rem var(--nm-light);
    --nm-shadow-lg:  0.2rem 0.2rem 0.6rem var(--nm-dark), -0.2rem -0.2rem 0.6rem var(--nm-light);
    --nm-inset:      inset 0.26667rem 0.26667rem 0.53333rem var(--nm-dark), inset -0.26667rem -0.26667rem 0.53333rem var(--nm-light);
    --nm-inset-sm:   inset 0.13333rem 0.13333rem 0.33333rem var(--nm-dark), inset -0.13333rem -0.13333rem 0.33333rem var(--nm-light);
    --shadow-hover:  var(--nm-shadow);

    /* Bloc de contraste conservé, réaccordé au gris (compat legacy) */
    --line-ink: #C3C8D0;    /* ancienne hairline sombre → douce */
    --navy: #33383F;
    --navy-2: #3D434B;
    --navy-text: #EEF1F5;
    --navy-muted: #AEB4BD;
}

* { box-sizing: border-box; }

[hidden] {
    display: none !important;
}

html {
    font-size: 15px;   /* base : 1rem = 15px (mobile / fallback) */
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    background: var(--bg);   /* évite le flash blanc entre deux navigations */
}

/* Échelle native : 15px partout, 16px sur desktop (confort léger).
   L'ancien 18.75px (zoom 125%) rendait l'app géante sur laptop :
   1-2 cartes par ligne, formulaires démesurés. La densité desktop
   vient des grilles, pas de l'agrandissement global. */
@media (min-width: 769px) {
    html { font-size: 16px; }
}

body {
    margin: 0;
    font-family: var(--sans);
    background: var(--bg);
    color: var(--text);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    /* Supprime le double-tap zoom et le délai de 300 ms sur mobile (feeling app).
       Le pinch-zoom de page est bloqué via le meta viewport ; la carte Leaflet
       garde son propre zoom tactile (géré en JS, non affecté). */
    touch-action: manipulation;
}

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

h1, h2, h3 {
    margin: 0;
    font-family: var(--serif);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
}

::selection { background: rgba(185, 28, 28, 0.14); }

/* Focus clavier visible (a11y) */
a:focus-visible,
button:focus-visible,
[draggable]:focus-visible {
    outline: 0.13333rem solid var(--red);
    outline-offset: 0.13333rem;
    border-radius: var(--radius);
}

/* Champs de formulaire : anneau doux au clavier (cohérent avec le focus souris),
   pas d'outline carré/arrondi disgracieux sur les champs à angles droits. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
    border-color: var(--red);
    box-shadow: 0 0 0 0.2rem rgba(185, 28, 28, 0.18);
}

/* Scrollbars fins */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 0.53333rem; height: 0.53333rem; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 0.53333rem; }
*::-webkit-scrollbar-track { background: transparent; }

/* Étiquette vintage : petites capitales espacées */
.overline,
.stat-label,
.data-table th,
.section-subtitle,
label {
    font-family: var(--sans);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 600;      /* labels plus fermes : hiérarchie lisible d'un coup d'œil */
    color: var(--text-muted);
}

/* ============ Layout ============ */

.layout { display: flex; height: 100vh; height: 100dvh; }

.main-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    margin-left: var(--sidebar-w); /* laisse la place à la sidebar fixe */
}

.content {
    padding: 1.86667rem 2rem;
    flex: 1;
    min-height: 0;
    width: 100%;
    max-width: 117.33333rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    opacity: 1;
    transition: opacity .15s ease;
}
.content.content-fade { opacity: 0; }

/* Dashboard : exploite toute la largeur dispo sur grand écran */
.page-dashboard .content { max-width: none; }

/* Les blocs de contenu s'étirent sur toute la largeur */
.content > * { width: 100%; }

/* ============ Sidebar — papier clair ============ */

.sidebar {
    width: var(--sidebar-w);
    background: var(--paper);
    color: var(--text);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    border-right: 0.1rem solid var(--line-ink);
}

.sidebar-brand {
    padding: 1.46667rem 1.33333rem 1.2rem;
    border-bottom: 0.1rem solid var(--line-ink);
}

.sidebar-brand-link {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: var(--text);
}

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

.sidebar-logo-wrap {
    width: 2.8rem;
    height: 2.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sidebar-logo {
    width: 2.8rem;
    height: 2.8rem;
    object-fit: contain;
    display: block;
}

.sidebar-brand-text {
    font-family: var(--serif);
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--text);
}

.brand-key { color: var(--red); }

.sidebar-nav {
    padding: 1.2rem 0.93333rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--pile-liste);
}

.nav-link {
    display: block;
    padding: 0.66667rem 0.86667rem;
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    border-radius: var(--radius);
    transition: background 0.15s, color 0.15s;
}

.nav-link:hover {
    background: var(--red-soft);
    color: var(--red-dark);
    text-decoration: none;
}

.nav-link.active {
    background: var(--red);
    color: #fff;
    font-weight: 600;
}

.sidebar-footer {
    border-top: 0.1rem solid var(--line-ink);
    padding: 0.8rem 0.93333rem;
    display: flex;
    flex-direction: column;
    gap: var(--pile-liste);
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 0.66667rem;
    padding: 0.53333rem 0.86667rem 0.8rem;
}

.sidebar-user-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--red-soft);
    color: var(--red-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 0.82rem;
    flex-shrink: 0;
    border: 0.06667rem solid var(--red-border);
}
.sidebar-user-avatar img { width: 100%; height: 100%; object-fit: cover; }

.sidebar-user-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(43, 38, 34, 0.45);
    z-index: 90;
}

/* ============ Topbar ============ */

.topbar {
    background: var(--bg);
    border-bottom: 0.06667rem solid var(--border);
    padding: 0 2.13333rem;
    height: 4.4rem;
    display: flex;
    align-items: center;
    gap: 0.93333rem;
    position: sticky;
    top: 0;
    z-index: 50;
}

.topbar-logo {
    display: none;
    width: 2rem;
    height: 2rem;
    object-fit: contain;
}

.topbar-title {
    font-size: 1.35rem;   /* titre de page : présent sans écraser le contenu */
    font-weight: 700;
    flex: 1;
    min-width: 0;
    font-style: normal;
    letter-spacing: -0.02em;
    /* Titre long (nom d'un bien) : une ligne + ellipse à toutes les largeurs. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.burger { display: none; }

/* ============ Boutons ============ */

.btn {
    display: inline-block;
    padding: 0.6rem 1.2rem;
    border: 0.1rem solid transparent;
    border-radius: 0;
    font-size: 0.86rem;
    font-weight: 600;
    font-family: var(--sans);
    letter-spacing: 0.04em;
    cursor: pointer;
    text-align: center;
    transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.15s var(--ease);
    line-height: 1.35;
}

.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.98); }

.btn-primary {
    background: var(--red);
    color: #FFFDF8;
}
.btn-primary:hover { background: var(--red-hover); }

.btn-outline {
    background: transparent;
    color: var(--text);
    border-color: var(--line-ink);
}
.btn-outline:hover { border-color: var(--red); color: var(--red); background: var(--red-soft); }

.btn-danger {
    background: transparent;
    color: var(--danger);
    border-color: var(--red-border);
}
.btn-danger:hover { background: var(--danger-bg); border-color: var(--danger); }

.btn-sm { padding: 0.33333rem 0.8rem; font-size: 0.78rem; }
.btn-block { display: block; width: 100%; }

.inline-form { display: inline; }

/* ============ Cartes ============ */

.card {
    background: var(--paper);
    border: 0.1rem solid var(--line-ink);
    border-radius: 0;
    padding: 1.2rem 1.33333rem;   /* densité : -15% de padding, plus de contenu visible */
}

/* ---- Deux cartes qui se suivent ne se touchent plus ----

   MESURÉ : zéro pixel entre deux sections empilées, sur toutes les pages qui
   en enchaînent — Paramètres, Recherche, les fiches. Le rembourrage intérieur
   fait 19 px, si bien qu'on lisait 19 px de blanc, un filet, 19 px de blanc :
   rien ne séparait deux sujets différents.

   Les conteneurs qui avaient déjà été traités portent un `gap` : le rail des
   fiches (1 rem), la grille du tableau de bord (1,2 rem). Ceux-là n'ont donc
   jamais posé problème — d'où l'écart qui ne se voyait qu'à certains endroits.
   On s'aligne sur 1,2 rem, qui est aussi le rembourrage vertical de la carte.

   POURQUOI `.card + .card` ET PAS UN `gap` SUR LE CONTENEUR : `.content` est
   déjà une colonne flex, mais elle contient bien autre chose que des cartes —
   barres de filtres, en-têtes, pagination — dont plusieurs portent déjà leur
   propre marge. Un `gap` les doublerait. Et un `.card + .card` global serait
   pire : dans la grille des biens, chaque carte est aussi une `.card`, et
   toutes se décaleraient d'une ligne sauf la première. */
:root {
    --pile: 1.2rem;         /* deux sections empilées */
    --pile-liste: 0.4rem;   /* deux entrées d'une liste de navigation */
}

.content > .card + .card,
.settings-panel > .card + .card,
.fiche-main > .card + .card,
.fiche-panel > .card + .card { margin-top: var(--pile); }

/* ---- Deux règles, parce qu'il y a deux cas ----

   Relevé de tous les empilements de l'application : les lignes d'une liste
   (tableau de bord, boîtes e-mail) sont séparées par un FILET, et l'écart y
   est nul ou faible à dessein — le trait fait le travail, ajouter du vide le
   ferait flotter. Rien à corriger là.

   Le cas à corriger est celui des entrées qui portent LEUR PROPRE SURFACE :
   fond et ombre à l'état actif ou au survol. À 2 px, le menu latéral lisait
   comme un bloc plein plutôt que comme une liste de boutons — c'est ce que
   montre la capture. Le rail des paramètres était à 4 px, le bas du menu
   latéral à zéro. Les trois passent à 6,4 px. */

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 1.06667rem;
    padding-bottom: 0.86667rem;
    border-bottom: 0.1rem solid var(--line-ink);
    flex-wrap: nowrap; /* titre + actions restent sur une ligne */
    min-width: 0;
}

.card-header h2 {
    font-size: 1.12rem;
    font-weight: 700;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-link {
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.card-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.53333rem;
    flex-wrap: nowrap;
    flex-shrink: 0; /* les boutons ne passent jamais à la ligne */
}

.empty-state {
    color: var(--text-muted);
    text-align: center;
    padding: 1.06667rem 0.8rem;
    margin: 0;
    font-style: italic;
}

.empty-state::before {
    content: "";
    display: block;
    width: 2rem;
    height: 2rem;
    margin: 0 auto 0.53333rem;
    background: url('/assets/img/logo_icon.png') center / contain no-repeat;
    opacity: 0.45;
}

/* Icône citée à l'intérieur d'un état vide (« le bouton + en haut à droite »).
   Elle désigne un bouton existant, elle n'en est pas un : ni relief, ni fond,
   juste la même forme que celle qu'on montre du doigt. L'italique de
   `.empty-state` est neutralisé, sinon le glyphe penche. */
.empty-state i {
    font-style: normal;
    color: var(--red);
    margin: 0 0.1rem;
}

/* Phrase d'explication sous un titre de carte (pas un état vide). */
.card-hint {
    color: var(--text-muted);
    font-size: 0.84rem;
    margin: -0.4rem 0 0.8rem;
}

/* ============ Stats dashboard ============ */

/* Grille éditoriale : tuiles connectées par filets sombres (comme la réf) */
/* Trois colonnes, pas un remplissage automatique : `auto-fit` posait cinq
   cartes sur la première ligne et laissait la sixième seule au bout, ce qui
   se lit comme un oubli. Trois par ligne tombe juste sur six cartes, et les
   cartes gagnent en largeur. */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-bottom: 1.2rem;
    border-top: 0.1rem solid var(--line-ink);
    border-left: 0.1rem solid var(--line-ink);
}

.stat-card {
    position: relative;
    background: var(--paper);
    border: 0;
    border-right: 0.1rem solid var(--line-ink);
    border-bottom: 0.1rem solid var(--line-ink);
    border-radius: 0;
    padding: 1.33333rem 1.33333rem 1.2rem;
    display: flex;
    flex-direction: column;
    color: var(--text);
    transition: background 0.25s var(--ease);
}

.stat-card:hover {
    text-decoration: none;
    background: var(--red-soft);
}

.stat-value {
    font-family: var(--serif);
    font-size: 2.7rem;
    font-weight: 800;
    color: var(--red);
    line-height: 1;
}

.stat-alert .stat-value { color: var(--red-dark); }

.stat-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 0.4rem;
}

.stat-icon {
    position: absolute;
    top: 1.06667rem;
    right: 1.06667rem;
    font-size: 1.05rem;
    color: var(--border-strong);
    transition: color 0.18s;
}

.stat-card:hover .stat-icon { color: var(--red-accent); }
.stat-alert .stat-icon { color: var(--red-accent); }

/* Dashboard bento — hero large + tuiles, remplit l'écran */
.dash-bento {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.2rem;
    grid-template-areas:
        "hero visites rappels"
        "hero ventes  activite";
}
.dash-bento > .card { min-height: 14rem; }
/* Colonnes étroites du bento : titre plus compact, jamais tronqué à 1440px. */
.dash-bento .card-header h2 { font-size: 1.02rem; }
.bento-hero     { grid-area: hero; }
.bento-visites  { grid-area: visites; }
.bento-rappels  { grid-area: rappels; }
.bento-ventes   { grid-area: ventes; }
.bento-activite { grid-area: activite; }

@media (max-width: 1024px) {
    .dash-bento {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "hero    hero"
            "visites rappels"
            "ventes  activite";
    }
}
@media (max-width: 640px) {
    .dash-bento {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "hero" "visites" "rappels" "ventes" "activite";
    }
    .dash-bento > .card { min-height: 0; }
}

.dash-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dash-list li {
    display: flex;
    align-items: center;
    gap: 0.66667rem;
    padding: 0.73333rem 0.26667rem;
    border-bottom: 0.06667rem solid var(--border);
    flex-wrap: wrap;
    transition: background 0.12s;
}

.dash-list li:hover { background: var(--red-soft); }
.dash-list li:last-child { border-bottom: none; }

/* Dashboard — ligne de tâche view-only : rail priorité + description + date pill */
.dash-list > li.dash-task-row { display: block; }

.dash-task-open {
    width: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0.8rem;
    text-align: left;
}

.dash-task-rail {
    width: 0.2rem;
    border-radius: 0.2rem;
    flex-shrink: 0;
    background: var(--neutral);
}
.dash-task-rail-urgente { background: var(--danger); }
.dash-task-rail-moyenne { background: var(--warning); }
.dash-task-rail-basse   { background: var(--neutral); }

.dash-task-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.13333rem;
}

.dash-task-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dash-task-open:hover .dash-task-title { color: var(--red); }

.dash-task-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-task-datepill {
    flex-shrink: 0;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 8.8rem;
    padding: 0.33333rem 0.66667rem;
    border-radius: 66.6rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    background: var(--paper-deep);
    box-shadow: var(--nm-inset-sm);
    white-space: nowrap;
}
.dash-task-datepill i { font-size: 0.72rem; opacity: 0.8; }
.dash-task-datepill.is-overdue { color: var(--danger); }
.dash-task-avatars { align-self: center; flex: 0 0 auto; }

.text-danger { color: var(--danger); }

/* ============ Badges — étiquettes vintage ============ */

.badge {
    display: inline-block;
    padding: 0.13333rem 0.66667rem;
    border-radius: var(--radius);
    font-size: 0.68rem;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.7;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    border: 0.06667rem solid;
}

/* Priorités tâches */
.badge-prio-basse    { background: var(--neutral-bg); color: var(--neutral); border-color: #DDD8CF; }
.badge-prio-moyenne  { background: var(--warning-bg); color: var(--warning); border-color: #E8D3B4; }
.badge-prio-urgente  { background: var(--danger-bg); color: var(--danger); border-color: var(--red-border); }

/* Statuts tâches */
.badge-statut-a_faire  { background: var(--neutral-bg); color: var(--neutral); border-color: #DDD8CF; }
.badge-statut-en_cours { background: var(--info-bg); color: var(--info); border-color: #CBD7E6; }
.badge-statut-termine  { background: var(--success-bg); color: var(--success); border-color: #CCDCC9; }

/* Statuts biens */
.badge-bien-disponible    { background: var(--success-bg); color: var(--success); border-color: #CCDCC9; }
.badge-bien-visite_prevue { background: var(--info-bg); color: var(--info); border-color: #CBD7E6; }
.badge-bien-offre_recue   { background: var(--warning-bg); color: var(--warning); border-color: #E8D3B4; }
.badge-bien-vendu         { background: var(--red-soft); color: var(--red-dark); border-color: var(--red-border); }
.badge-bien-archive       { background: var(--neutral-bg); color: var(--neutral); border-color: #DDD8CF; }

/* Statuts clients */
.badge-client-nouveau       { background: var(--info-bg); color: var(--info); border-color: #CBD7E6; }
.badge-client-a_rappeler    { background: var(--warning-bg); color: var(--warning); border-color: #E8D3B4; }
.badge-client-visite_prevue { background: var(--sky-bg); color: var(--sky); border-color: #CBDCE5; }
.badge-client-offre_faite   { background: var(--violet-bg); color: var(--violet); border-color: #DCD0E3; }
.badge-client-perdu         { background: var(--neutral-bg); color: var(--neutral); border-color: #DDD8CF; }
.badge-client-acheteur      { background: var(--success-bg); color: var(--success); border-color: #CCDCC9; }

/* Niveaux d'intérêt */
.badge-interet-faible { background: var(--neutral-bg); color: var(--neutral); border-color: #DDD8CF; }
.badge-interet-moyen  { background: var(--warning-bg); color: var(--warning); border-color: #E8D3B4; }
.badge-interet-fort   { background: var(--danger-bg); color: var(--danger); border-color: var(--red-border); }

/* Étapes pipeline */
.badge-etape-nouveau_contact { background: var(--neutral-bg); color: var(--neutral); border-color: #DDD8CF; }
.badge-etape-interesse       { background: var(--info-bg); color: var(--info); border-color: #CBD7E6; }
.badge-etape-visite_prevue   { background: var(--sky-bg); color: var(--sky); border-color: #CBDCE5; }
.badge-etape-offre_recue     { background: var(--warning-bg); color: var(--warning); border-color: #E8D3B4; }
.badge-etape-negociation     { background: var(--violet-bg); color: var(--violet); border-color: #DCD0E3; }
.badge-etape-vendu           { background: var(--success-bg); color: var(--success); border-color: #CCDCC9; }
.badge-etape-perdu           { background: var(--neutral-bg); color: var(--neutral); border-color: #DDD8CF; }

.badge-danger { background: var(--danger-bg); color: var(--danger); border-color: var(--red-border); }
.badge-type   { background: var(--paper-deep); color: var(--text); border-color: var(--border-strong); }
/* Deux variantes neutres, pour les qualificatifs qui n'appartiennent à aucun
   domaine métier — « deviné », « approchant », « assistance », « commune » sur
   l'écran d'import. Elles étaient posées dans le balisage sans jamais avoir
   existé dans la feuille : les pastilles sortaient sans leur couleur. */
.badge-warning { background: var(--warning-bg); color: var(--warning); border-color: #E8D3B4; }
.badge-info    { background: var(--info-bg);    color: var(--info);    border-color: #CBD7E6; }
.badge-success { background: var(--success-bg); color: var(--success); border-color: #CCDCC9; }
.badge-neutre  { background: var(--neutral-bg); color: var(--neutral); border-color: #DDD8CF; }

.tag {
    display: inline-block;
    background: transparent;
    border: 0.06667rem solid var(--border-strong);
    border-radius: var(--radius);
    padding: 0.13333rem 0.6rem;
    font-size: 0.8rem;
    margin: 0.06667rem 0.13333rem 0.06667rem 0;
    color: var(--text);
    transition: border-color 0.15s, background 0.15s;
}
.tag:hover { border-color: var(--red); background: var(--red-soft); text-decoration: none; }

/* ============ Flash ============ */

.flash {
    padding: 0.8rem 1.2rem;
    border-radius: var(--radius);
    margin-bottom: 1.2rem;
    font-size: 0.9rem;
    border: 0.06667rem solid;
    transition: opacity 0.4s;
    animation: flash-in 0.25s ease;
}

@keyframes flash-in {
    from { opacity: 0; transform: translateY(-0.33333rem); }
    to   { opacity: 1; transform: translateY(0); }
}

.flash-success { background: var(--success-bg); color: var(--success); border-color: #CCDCC9; }
.flash-error   { background: var(--danger-bg); color: var(--danger); border-color: var(--red-border); }
.flash-warning { background: var(--warning-bg); color: var(--warning); border-color: #E8D3B4; }
.flash-info    { background: var(--red-soft); color: var(--red); border-color: var(--red-border); }

/* ============ Page actions / filtres ============ */

.page-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 1.46667rem;
    flex-wrap: wrap;
}

.page-actions > div { display: flex; gap: 0.53333rem; flex-wrap: wrap; align-items: center; }
.page-actions-end { justify-content: flex-end; }

.page-actions > .filter-tabs {
    gap: 0;
    align-items: stretch;
}

.filter-tabs {
    display: flex;
    gap: 0;
    flex-wrap: wrap;
    border: none;
    box-shadow: 0 0 0 0.1rem var(--line-ink);   /* cadre éditorial sombre */
    border-radius: 0;
    overflow: hidden;
    background: var(--paper);
}

.status-tabs {
    max-width: 100%;
}

.filter-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.46667rem 1rem;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 550;
    letter-spacing: 0.04em;
    transition: color 0.15s, background 0.15s;
}

.filter-tab + .filter-tab::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0.1rem;
    background: var(--line-ink);
}

.filter-tab.active::before,
.filter-tab.active + .filter-tab::before {
    display: none;
}

.filter-tab:hover { color: var(--red); background: var(--red-soft); text-decoration: none; }

.filter-tab.active {
    background: var(--red);
    color: #FFFDF8;
    z-index: 1;
}

.filter-tab i { font-size: 0.78em; margin-right: 0.2rem; opacity: 0.85; }

.view-tabs .filter-tab {
    min-width: 5.73333rem;
}

.page-hint {
    color: var(--text-muted);
    font-size: 0.88rem;
    margin: 0 0 1.2rem;
    font-style: italic;
}

.page-hint-inline {
    margin: 0;
}

.muted-inline-icon {
    color: var(--red-accent);
    font-size: 0.8em;
}

/* ============ Tâches : agenda par jour ============ */

.task-toolbar-left {
    display: flex;
    gap: 0.66667rem;
    flex-wrap: wrap;
    align-items: center;
}

/* ── Page Tâches : liste compacte groupée par jour ─────── */
.task-list { padding: 0.4rem 0.4rem 0.53333rem; }

.task-day-header {
    display: flex;
    align-items: center;
    gap: 0.53333rem;
    padding: 0.93333rem 0.8rem 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
.task-day-header i { color: var(--red); font-size: 0.75rem; }
.task-day-header .task-day-name { color: var(--text); }
.task-day-header .task-day-count { font-weight: 400; text-transform: none; letter-spacing: 0; }
.task-day-header.is-late .task-day-name { color: var(--danger); }
.task-day-header .task-day-badge {
    margin-left: auto;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--danger);
    background: var(--danger-bg);
    padding: 0.2rem 0.6rem;
    border-radius: 66.6rem;
}

.task-row {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.66667rem 0.8rem;
    border-bottom: 0.06667rem solid rgba(190, 196, 205, 0.4);
}
.task-row:last-child { border-bottom: 0; }
.is-removing { opacity: 0; transform: translateX(0.53333rem); transition: opacity 0.2s var(--ease), transform 0.2s var(--ease); pointer-events: none; }
.task-check-form { display: flex; align-items: center; flex-shrink: 0; }

.task-check {
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius);
    flex-shrink: 0;
    border: 0.06667rem solid var(--border-strong);
    cursor: pointer;
    background: #FFFFFF;
    color: transparent;
    font-size: 0.8rem;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.16s var(--ease), color 0.16s, background 0.16s;
}
.task-check:hover { color: rgba(71, 121, 90, 0.5); }
.task-check.checked { background: var(--success); border-color: var(--success); color: #fff; box-shadow: none; }

.task-rail {
    width: 0.2rem;
    align-self: stretch;
    min-height: 1.73333rem;
    border-radius: 0.2rem;
    flex-shrink: 0;
    background: var(--neutral);
}
.task-rail-urgente { background: var(--danger); }
.task-rail-moyenne { background: var(--warning); }
.task-rail-basse   { background: var(--neutral); }

.task-body { flex: 1; min-width: 0; }
.task-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.task-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0.06667rem;
}
.task-row.is-done { opacity: 0.55; transition: opacity 0.16s var(--ease); }
.task-row.is-done .task-title { text-decoration: line-through; color: var(--text-muted); }

.task-datepill {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.33333rem 0.66667rem;
    border-radius: 66.6rem;
    font-size: 0.76rem;
    color: var(--text-muted);
    background: var(--paper-deep);
    box-shadow: var(--nm-inset-sm);
    white-space: nowrap;
}
.task-datepill i { font-size: 0.7rem; opacity: 0.8; }
.task-datepill.is-overdue { color: var(--danger); }

.task-row-actions { display: flex; gap: 0.33333rem; flex-shrink: 0; }
.task-row-actions .inline-form { display: inline-flex; }
.task-icon-btn {
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius);
    border: 0;
    cursor: pointer;
    flex-shrink: 0;
    background: var(--paper);
    color: var(--text);
    font-size: 0.82rem;
    box-shadow: var(--nm-shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.16s;
}
.task-icon-btn:active { box-shadow: var(--nm-inset-sm); }
.task-icon-btn:hover { color: var(--red); }
.task-icon-btn--danger:hover { color: var(--danger); }


/* ============ Planning semaine ============ */

.planning-nav-group {
    display: flex;
    align-items: center;
    gap: 0.53333rem;
}

.planning-week-title {
    font-size: 1.1rem;
    line-height: 1.2;
    white-space: nowrap;
    margin-left: 0.26667rem;
}

/* Calendrier plein écran : le workspace remplit la hauteur du contenu, la grille
   prend tout l'espace restant sous la barre d'actions. */
.planning-workspace {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Le planning exploite toute la largeur (pas de gouttière centrée). */
.page-planning .content { max-width: none; }

.planning-actions {
    align-items: center;
    margin-bottom: 1.2rem;
    padding-bottom: 1.06667rem;
    border-bottom: 0.06667rem solid var(--border);
    flex: 0 0 auto;
}

.planning-late {
    margin-bottom: 1.06667rem;
}

.planning-late-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 0.6rem;
}

.planning-timegrid {
    display: grid;
    grid-template-columns: 4.26667rem repeat(7, minmax(0, 1fr));
    /* Sans tâche « toute la journée », la grille n'a que l'en-tête et
       les heures. Une troisième piste 1fr vide laissait alors un grand
       panneau blanc sous 19h. */
    grid-template-rows: auto minmax(0, 1fr);
    background: var(--paper);
    border-radius: var(--radius);
    box-shadow: var(--nm-shadow-sm);
    overflow: hidden;
    flex: 1;
    min-height: 0;
}

.planning-timegrid:has(.ptg-row-allday:not(.is-empty)) {
    grid-template-rows: auto auto minmax(0, 1fr);
}

.ptg-row-head,
.ptg-row-allday {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    border-top: 0.06667rem solid rgba(190, 196, 205, 0.4);
}

.ptg-row-head:first-child { border-top: 0; }

.ptg-row-allday.is-empty {
    display: none;
}

/* Bloc des heures : un item unique dans la grille externe (plus de subgrid
   par ligne — un item explicitement positionné à côté de 12 lignes subgrid
   fait exploser le nombre de pistes implicites dans Chrome). Chaque ligne
   d'heure gère sa propre grille de colonnes, identique à l'externe donc
   alignée pixel pour pixel. */
.ptg-hours {
    grid-column: 1 / -1;
    display: grid;
    /* Les lignes s'étirent pour remplir la hauteur dispo (plein écran),
       avec un minimum lisible qui déclenche le scroll sur petit écran. */
    grid-template-rows: repeat(12, minmax(3.06667rem, 1fr));
    position: relative;
    min-height: 0;
}

.ptg-row {
    display: grid;
    grid-template-columns: 4.26667rem repeat(7, minmax(0, 1fr));
    border-top: 0.06667rem solid rgba(190, 196, 205, 0.4);
}

.ptg-row:first-child { border-top: 0; }

.ptg-label {
    padding: 0.4rem 0.53333rem;
    font-size: 0.64rem;
    color: var(--text-muted);
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    line-height: 1.2;
}

.ptg-row-head { border-top: 0; }
.ptg-row-head .ptg-label { background: var(--paper-deep); }

.ptg-daycol-head {
    padding: 0.53333rem 0.4rem 0.46667rem;
    text-align: center;
    background: var(--paper-deep);
    border-left: 0.06667rem solid rgba(190, 196, 205, 0.4);
    border-bottom: 0.2rem solid transparent;
}

.ptg-dayname {
    display: block;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: var(--text-muted);
}

.ptg-daynum {
    display: block;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text);
}

.ptg-daycol-head.ptg-today {
    border-bottom-color: var(--red);
}

.ptg-daycol-head.ptg-today .ptg-dayname,
.ptg-daycol-head.ptg-today .ptg-daynum {
    color: var(--red-ink);
}

.ptg-row-allday .ptg-label { align-items: flex-start; padding-top: 0.66667rem; white-space: normal; }

.ptg-cell {
    padding: 0.13333rem 0.26667rem;
    border-left: 0.06667rem solid rgba(190, 196, 205, 0.4);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.13333rem;
    min-height: 2rem;
    overflow: hidden;
    position: relative;
}

.ptg-row-allday .ptg-cell { justify-content: flex-start; }

.ptg-hour-cell::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    border-top: 0.06667rem dashed rgba(190, 196, 205, 0.3);
    pointer-events: none;
}

.ptg-cell.ptg-today { background: rgba(178, 58, 44, 0.05); }

.ptg-now-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 0.13333rem solid var(--red);
    z-index: 3;
    opacity: .55;
    pointer-events: none;
}

.ptg-now-dot {
    position: absolute;
    left: -0.2rem;
    top: -0.26667rem;
    width: 0.53333rem;
    height: 0.53333rem;
    border-radius: 50%;
    background: var(--red);
}

/* Calque par jour : positionne les événements à l'heure exacte,
   par-dessus la grille de fond (qui garde ses lignes/pastille "maintenant").
   Largeur/position calculées comme les colonnes de .planning-timegrid
   (4.26667rem de label + 7 colonnes égales), sans dépendre du grid-row. */
.ptg-day-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    width: calc((100% - 4.26667rem) / 7);
    padding: 0 0.26667rem;
    pointer-events: none;
}

.planning-item-timed {
    position: absolute;
    left: 0.26667rem;
    right: 0.26667rem;
    z-index: 2;
    pointer-events: auto;
    overflow: hidden;
}

.planning-item {
    display: flex;
    align-items: flex-start;
    gap: 0.46667rem;
    border-radius: 0 0.53333rem 0.53333rem 0;
    padding: 0.33333rem 0.53333rem;
    color: var(--text);
    min-width: 0;
    /* Variante A : barre couleur à gauche + fond teinté selon le type. */
    border-left: 0.2rem solid var(--danger);
    background: var(--danger-bg);
    box-shadow: var(--nm-shadow-sm);
    transition: box-shadow 0.15s var(--ease), filter 0.15s var(--ease);
    text-decoration: none;
}

.planning-item:hover {
    text-decoration: none;
    box-shadow: var(--nm-shadow);
    filter: brightness(0.98);
}

/* Pastille icône (remplace l'ancien point) */
.planning-item-ico {
    flex-shrink: 0;
    margin-top: 0.03333rem;
    width: 0.93333rem;
    text-align: center;
    color: var(--danger);
    font-size: 0.66rem;
    line-height: 1.3;
}

.planning-item-body {
    display: flex;
    flex-direction: column;
    gap: 0.06667rem;
    min-width: 0;
}

.planning-item strong {
    line-height: 1.25;
    font-size: 0.72rem;
    font-weight: 600;
    overflow-wrap: anywhere;
    color: var(--text);
    /* Ne jamais laisser le titre pousser l'heure hors d'une petite card. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.planning-item-time {
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--danger);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    opacity: 0.85;
}

/* Visites : bleu (info) */
.planning-visit {
    border-left-color: var(--info);
    background: var(--info-bg);
}
.planning-visit .planning-item-ico,
.planning-visit .planning-item-time {
    color: var(--info);
}

/* Cards courtes : layout adaptatif (classe posée en JS selon la hauteur réelle).
   is-compact  -> heure + titre sur une seule ligne (slots ~1 h)
   is-tiny     -> titre seul, sans heure (slots très courts) */
.planning-item-timed.is-compact {
    align-items: center;
    padding-top: 0.13333rem;
    padding-bottom: 0.13333rem;
    gap: 0.33333rem;
}
.planning-item-timed.is-compact .planning-item-ico { margin-top: 0; }
.planning-item-timed.is-compact .planning-item-body {
    flex-direction: row;
    align-items: baseline;
    gap: 0.33333rem;
    overflow: hidden;
}
.planning-item-timed.is-compact .planning-item-time { order: -1; flex: none; }
.planning-item-timed.is-compact strong {
    -webkit-line-clamp: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    min-width: 0;
}
.planning-item-timed.is-tiny { padding-top: 0.06667rem; padding-bottom: 0.06667rem; }
.planning-item-timed.is-tiny .planning-item-time { display: none; }
.planning-item-timed.is-tiny strong {
    -webkit-line-clamp: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 0.68rem;
}

.planning-item-late {
    background: var(--paper);
    box-shadow: none;
    border-left: 0.2rem solid var(--danger);
    border-radius: 0 0.53333rem 0.53333rem 0;
    align-items: center;
    gap: 0.66667rem;
    padding: 0.66667rem 0.8rem;
}

.planning-item-late .planning-item-dot { display: none; }
.planning-item-late strong { color: var(--text); font-size: 0.88rem; }

/* ============ Tables ============ */

.table-card { padding: 0; overflow: hidden; }

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.data-table th {
    text-align: left;
    padding: 0.86667rem 1.2rem;
    background: var(--paper-deep);
    color: var(--text-muted);
    font-size: 0.68rem;
    border-bottom: 0.1rem solid var(--line-ink);
}

.data-table td {
    padding: 0.86667rem 1.2rem;
    border-bottom: 0.06667rem solid var(--border);
    vertical-align: middle;
}

.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background 0.12s; }
.data-table tbody tr:hover { background: var(--red-soft); }

/* La 1re colonne absorbe l'espace restant : les autres colonnes (dont
   Actions) restent groupées à droite au lieu d'être étalées avec de grands
   vides quand les données sont courtes. */
.data-table th:first-child,
.data-table td:first-child { width: 100%; }

.table-sub { color: var(--text-muted); font-size: 0.82rem; }

.row-done { opacity: 0.5; }
.row-done td strong { text-decoration: line-through; }

.col-actions { text-align: right; white-space: nowrap; }
.col-check { width: 3.06667rem; }

.check-btn {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    border: 0.1rem solid var(--border-strong);
    background: transparent;
    color: transparent;
    cursor: pointer;
    font-size: 0.8rem;
    line-height: 1;
    transition: all 0.15s;
}

.check-btn:hover { border-color: var(--success); color: var(--success); }

.check-btn.checked {
    background: var(--success);
    border-color: var(--success);
    color: var(--paper);
}

/* ============ Liste Contacts : lignes riches (style Affaires) ============ */

.client-list { display: flex; flex-direction: column; gap: 0.6rem; }

.cl-line {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    background: var(--paper);
    border-radius: 0.9rem;
    box-shadow: var(--nm-shadow-sm);
    padding: 0.75rem 1rem;
    transition: box-shadow 0.15s var(--ease);
}
.cl-line:hover { box-shadow: var(--nm-shadow); }

/* Les initiales du contact, en creux : 4,39 avec le rouge de marque. */
.cl-av {
    flex-shrink: 0;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: var(--bg);
    box-shadow: var(--nm-inset-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--serif);
    font-weight: 700;
    color: var(--red-ink);
    font-size: 0.95rem;
}

.cl-main { flex: 1; min-width: 0; }

.cl-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-weight: 700;
    font-size: 0.95rem;
}
.cl-name a { color: var(--text); overflow-wrap: anywhere; }
.cl-name a:hover { color: var(--red); }

.cl-coords {
    display: flex;
    flex-wrap: wrap;
    gap: 0.26667rem 0.8rem;
    margin-top: 0.15rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.cl-coords a { color: var(--text-muted); display: inline-flex; align-items: center; gap: 0.3rem; }
.cl-coords a:hover { color: var(--red); }
.cl-coords-none { font-style: italic; }

.cl-search-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--bg);
    box-shadow: var(--nm-inset-sm);
    border-radius: 2rem;
    padding: 0.2rem 0.65rem;
    font-size: 0.74rem;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.cl-budget {
    font-family: var(--serif);
    font-weight: 700;
    color: var(--red-ink);
    font-size: 0.95rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.cl-acts { display: flex; gap: 0.26667rem; flex-shrink: 0; }
.cl-act {
    width: 1.9rem;
    height: 1.9rem;
    border: none;
    border-radius: 0.5rem;
    background: var(--bg);
    box-shadow: var(--nm-shadow-sm);
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.72rem;
}
.cl-act:hover { color: var(--red); }
.cl-act:active { box-shadow: var(--nm-inset-sm); }
.cl-act-del:hover { color: var(--danger); }

/* Téléphone : grille nette — avatar + identité + actions sur la première
   ligne, recherche à gauche et budget à droite sur la seconde. */
@media (max-width: 640px) {
    .cl-line {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "av   main acts"
            "tag  tag  budget";
        column-gap: 0.9rem;
        row-gap: 0.45rem;
        align-items: center;
    }
    .cl-av { grid-area: av; }
    .cl-main { grid-area: main; }
    .cl-acts { grid-area: acts; align-self: start; }
    .cl-search-tag { grid-area: tag; justify-self: start; margin: 0; }
    .cl-budget { grid-area: budget; justify-self: end; margin: 0; }

    /* Fiche contact : quand la bande profil wrappe, les actions prennent
       leur propre ligne, alignées à droite (pas flottantes sous l'avatar). */
    .cl-hero-actions { flex: 1 1 100%; justify-content: flex-end; }
}

/* ── Fiche contact : rail profil sticky + contenu ── */
/* Fiche contact (design C) : bande profil, tuiles d'infos, sections pleine largeur. */
.cl-fiche {
    display: flex;
    flex-direction: column;
    gap: 1.06667rem;
}

.cl-hero {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-wrap: wrap;
    padding: 0.93333rem 1.06667rem;
}

.cl-hero-av {
    width: 3.2rem;
    height: 3.2rem;
    font-size: 1.05rem;
    box-shadow: var(--nm-shadow);
    flex-shrink: 0;
}

.cl-hero-id { min-width: 0; }
.cl-hero-name {
    font-size: 1.15rem;
    margin: 0 0 0.2rem;
    overflow-wrap: anywhere;
}

.cl-hero-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.53333rem;
}

.cl-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.66667rem;
}
/* Tuiles contact : plus discrètes que les stats de la fiche bien. */
.cl-tiles .fiche-hero-stat-value { font-size: 0.9rem; overflow-wrap: anywhere; }
.cl-tiles .fiche-hero-stat-label { font-size: 0.58rem; }

/* Téléphone : 2 colonnes nettes, la tuile orpheline s'étend. */
@media (max-width: 640px) {
    .cl-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.53333rem; }
    .cl-tiles .fiche-hero-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.cl-fiche-main { display: flex; flex-direction: column; gap: 1.06667rem; min-width: 0; }
.cl-fiche-main > .card { margin: 0; }

/* ============ Fiche : hero + détails techniques ============ */

/* Bouton retour : à gauche de la photo, aligné sur son haut (1er enfant du hero). */
.fiche-back { flex-shrink: 0; color: var(--text-muted); }
.fiche-back:hover { color: var(--red); text-decoration: none; }

.fiche-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.33333rem;
    flex-wrap: wrap;
    padding-bottom: 1.33333rem;
    margin-bottom: 1.46667rem;
    border-bottom: 0.1rem solid var(--line-ink);
}
.fiche-hero-status { margin-bottom: 0.8rem; }
.fiche-hero-title {
    font-family: var(--serif);
    font-weight: 800;
    font-size: 2.4rem;
    line-height: 1.02;
    letter-spacing: -0.02em;
    margin: 0;
}
.fiche-hero-addr {
    margin: 0.53333rem 0 0;
    color: var(--text-muted);
    font-size: 0.95rem;
}
.fiche-hero-addr i { color: var(--red-accent); margin-right: 0.33333rem; }
.fiche-hero-actions { display: flex; gap: 0.53333rem; flex-wrap: wrap; }

/* ── Fiche bien : hero enrichi + onglets (direction A) ── */
.fiche-hero-main { flex: 1; min-width: 14rem; }
.fiche-hero-media {
    width: 11rem;
    aspect-ratio: 4 / 3;
    border-radius: 0.8rem;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: var(--nm-shadow-sm);
    background: var(--paper);
}
.fiche-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Grille fixe : 3 stats toujours sur une ligne (téléphone, iPad, desktop). */
.fiche-hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.66667rem; margin-top: 1rem; }
.fiche-hero-stat {
    min-width: 0;
    background: var(--paper);
    border-radius: 0.66667rem;
    padding: 0.53333rem 0.8rem;
    box-shadow: var(--nm-shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 0.13333rem;
}
.fiche-hero-stat-label {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    font-weight: 600;
}
.fiche-hero-stat-value { font-family: var(--serif); font-weight: 700; font-size: clamp(0.95rem, 1.6vw, 1.25rem); line-height: 1.1; }
.fiche-hero-stat-price { color: var(--red); }

/* ---- Navigation de la fiche : un seul bouton, pas sept onglets ----

   LE DÉFAUT MESURÉ. Les sept onglets réclamaient 1 254 px au zoom de
   l'application et la colonne de contenu en fait 1 150 : « Historique »
   tombait à la ligne et la barre prenait deux fois sa hauteur. Ajouter une
   huitième section aggravait le problème sans que rien ne prévienne.
   Le bouton fait 342 px, quel que soit le nombre de sections.

   CE QU'IL FAUT SAVOIR EN LISANT LA SUITE : le menu ouvert dit « vide » là où
   la barre affichait « 0 ». Un zéro posé au même rang qu'un vrai compte se lit
   comme un contenu ; sur cette fiche, six sections sur sept sont vides. */
.fiche-tabs {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.33333rem;
}
.fiche-nav-menu { position: relative; }

.fiche-nav-decl {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 13rem;
    padding: 0.55rem 0.9rem;
    font-family: var(--serif);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    background: var(--paper);
    border: 0;
    border-radius: 0.7rem;
    box-shadow: var(--nm-shadow-sm);
    cursor: pointer;
    text-align: left;
}
.fiche-nav-decl:hover { color: var(--red-ink); }
.fiche-nav-ico { color: var(--red-ink); }
.fiche-nav-lib { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fiche-nav-chev {
    font-size: 0.7rem;
    color: var(--text-muted);
    transition: transform 0.18s var(--ease);
}
.fiche-nav-decl[aria-expanded="true"] .fiche-nav-chev { transform: rotate(180deg); }

.fiche-nav-liste {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    z-index: 20;
    min-width: 16rem;
    padding: 0.3rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    background: var(--paper);
    border-radius: 0.8rem;
    box-shadow: var(--nm-shadow-lg);
    /* Le menu fait 326 px pour sept sections. S'il en arrive assez pour passer
       sous le bas de l'écran, il défile au lieu de sortir de la fenêtre. */
    max-height: min(60vh, 26rem);
    overflow-y: auto;
}
/* Ouverture vers le haut : posée par le script quand le menu n'a pas la place
   en dessous. Voir le commentaire de `ouvrirMenu` dans app.js — le bord qui
   coupe n'est pas toujours celui de la fenêtre. */
.fiche-nav-liste.est-au-dessus { top: auto; bottom: calc(100% + 0.35rem); }
/* L'attribut `hidden` doit l'emporter sur le `display: flex` ci-dessus, sinon
   le menu reste ouvert au chargement. */
.fiche-nav-liste[hidden] { display: none; }

.fiche-tab {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.5rem 0.6rem;
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--text);
    background: none;
    border: 0;
    border-radius: 0.55rem;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s var(--ease), color 0.12s var(--ease);
}
.fiche-tab > i { width: 1.1rem; text-align: center; opacity: 0.8; }
.fiche-tab:hover { background: var(--paper-deep); color: var(--red-ink); }
.fiche-tab.is-active { background: var(--red-soft); color: var(--red-ink); font-weight: 600; }
.fiche-nav-opt-lib { flex: 1 1 auto; }
.fiche-nav-etat {
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.fiche-nav-etat.est-vide { opacity: 0.7; font-weight: 500; }

.fiche-nav-fleches { display: flex; gap: 0.25rem; }
.fiche-nav-fl {
    width: 2.2rem;
    height: 2.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: var(--text-muted);
    background: var(--paper);
    border: 0;
    border-radius: var(--radius);
    box-shadow: var(--nm-shadow-sm);
    cursor: pointer;
}
.fiche-nav-fl:hover { color: var(--red-ink); }
.fiche-nav-fl:active { box-shadow: var(--nm-inset-sm); }
.fiche-nav-rang {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.fiche-tab-count,
.card-count {
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--bg);
    box-shadow: inset 0.06667rem 0.06667rem 0.13333rem var(--nm-dark), inset -0.06667rem -0.06667rem 0.13333rem var(--nm-light);
    color: var(--text-muted);
    padding: 0.06667rem 0.46667rem;
    border-radius: 0.8rem;
}
/* Compteur dans un titre de carte : aligné au texte, jamais gras hérité. */
.card-header h2 .card-count { vertical-align: 0.13333rem; margin-left: 0.13333rem; }
.fiche-panel > .card + .card { margin-top: 1.33333rem; }

/* ── Page Paramètres : rail latéral + panneau ── */
.settings-head { margin-bottom: 1.33333rem; }
/* Aligne la bande titre sur la largeur du contenu (rail 14 + gap 1.33 + panneau 46)
   pour que les boutons d'action tombent sur le bord droit de la carte, pas de la page. */
.settings-head-actions { max-width: 61.33333rem; display: flex; align-items: center; justify-content: space-between; gap: 0.8rem 1rem; flex-wrap: wrap; }
.settings-head-buttons { display: flex; gap: 0.53333rem; flex-wrap: wrap; align-items: center; }
.settings-title { font-family: var(--serif); font-weight: 800; font-size: 2rem; margin: 0; letter-spacing: -0.02em; }
.settings-sub { margin: 0.26667rem 0 0; color: var(--text-muted); font-size: 0.95rem; }
.settings-shell {
    display: grid;
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: 1.33333rem;
    align-items: start;
}
.settings-rail {
    display: flex;
    flex-direction: column;
    gap: var(--pile-liste);
    padding: 0.53333rem;
    background: var(--paper);
    border-radius: 0.93333rem;
    box-shadow: var(--nm-shadow);
    position: sticky;
    top: 1rem;
}
.settings-rail-link {
    display: flex;
    align-items: center;
    gap: 0.66667rem;
    padding: 0.66667rem 0.8rem;
    border-radius: 0.66667rem;
    font-size: 0.93rem;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.15s, background 0.15s;
}
.settings-rail-link i { font-size: 1.05em; width: 1.2rem; text-align: center; }
.settings-rail-link:hover { color: var(--red); background: var(--red-soft); text-decoration: none; }
.settings-rail-link.is-active {
    color: var(--red-ink);
    background: var(--bg);
    box-shadow: inset 0.1rem 0.1rem 0.26667rem var(--nm-dark), inset -0.1rem -0.1rem 0.26667rem var(--nm-light);
}
.settings-rail-label { flex: 1; }
.settings-rail-badge {
    font-size: 0.6rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--bg);
    padding: 0.13333rem 0.4rem;
    border-radius: 0.4rem;
}
.settings-rail-sep { height: 0.06667rem; background: var(--line-ink); margin: 0.33333rem 0.53333rem; }
.settings-panel { min-width: 0; max-width: 46rem; }

/* Identite agence / apercu brochure */
.branding-intro { margin: -0.8rem 0 1.1rem; }
.branding-layout { display:grid; grid-template-columns:minmax(0, 1fr) minmax(19rem, 23rem); gap:1.25rem; align-items:start; }
.branding-editor { display:flex; flex-direction:column; gap:1rem; }
.branding-card { padding:1.1rem 1.2rem; }
.branding-card .card-header { margin-bottom:1rem; }
.branding-colors { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; margin-bottom:1rem; }
.branding-colors label { color:var(--text-muted); font-size:.78rem; font-weight:600; }
.branding-colors input { display:block; width:100%; height:2.45rem; padding:.2rem; margin-top:.35rem; border:1px solid var(--line-ink); border-radius:.55rem; background:var(--paper); cursor:pointer; }
.form-help { display:block; color:var(--text-muted); font-size:.78rem; margin-top:.35rem; }
.branding-preview-wrap { position:sticky; top:1rem; }
.branding-preview-label { color:var(--text-muted); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; margin:0 0 .55rem .25rem; font-weight:700; }
.branding-preview { background:var(--brand-paper); color:var(--brand-accent); border-top:5px solid var(--brand-primary); border-radius:.3rem; padding:1.15rem; box-shadow:0 .7rem 2rem rgba(29,41,57,.13); font-family:var(--brand-font),sans-serif; min-height:32rem; }
.bp-head { display:flex; align-items:center; gap:.55rem; font-size:.86rem; min-height:2rem; }
.bp-head img { width:3.2rem; height:1.7rem; object-fit:contain; object-position:left center; }
.bp-head span { width:1.6rem; height:1.6rem; display:grid; place-items:center; border-radius:50%; background:var(--brand-primary); color:#fff; font-size:.95rem; }
.bp-image { height:10.5rem; margin:1rem 0 .9rem; background:linear-gradient(140deg,#d7d6ce,#aaa89f 48%,#ece9df); position:relative; overflow:hidden; }
.bp-image:after { content:''; position:absolute; inset:35% 0 0; background:linear-gradient(165deg,transparent 20%,rgba(255,255,255,.58) 21% 36%,transparent 37%); opacity:.8; }
.bp-kicker { color:var(--brand-primary); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; margin:0 0 .35rem; font-weight:700; }
.branding-preview h3 { font-size:1.55rem; line-height:1.05; margin:.1rem 0 .35rem; letter-spacing:-.03em; }
.bp-address,.bp-copy { font-size:.7rem; color:#667085; margin:.25rem 0; }
.bp-price { color:var(--brand-primary); display:block; margin:.75rem 0; font-size:1.1rem; }
.bp-rule { height:1px; background:color-mix(in srgb,var(--brand-accent) 22%,transparent); }
.bp-stats { display:flex; justify-content:space-between; padding:.65rem 0; font-size:.66rem; font-weight:700; }
.bp-copy { border-top:1px solid color-mix(in srgb,var(--brand-accent) 12%,transparent); padding-top:.8rem; line-height:1.55; }
.branding-preview footer { border-top:1px solid color-mix(in srgb,var(--brand-accent) 15%,transparent); margin-top:1.4rem; padding-top:.65rem; color:var(--brand-accent); font-size:.62rem; }
@media (max-width: 900px) { .branding-layout { grid-template-columns:1fr; } .branding-preview-wrap { position:static; max-width:25rem; } }
@media (max-width: 540px) { .branding-colors { grid-template-columns:1fr; } }

/* Mobile : rail d'icônes carrées (même langage que les onglets de fiche),
   libellé de la section active affiché à droite. */
@media (max-width: 1024px) {
    .settings-shell { grid-template-columns: 1fr; }
    .settings-rail {
        position: static;
        flex-direction: row;
        align-items: center;
        gap: 0.53333rem;
        padding: 0;
        background: none;
        box-shadow: none;
        border-radius: 0;
    }
    .settings-rail-link {
        width: 2.7rem;
        height: 2.7rem;
        flex: 0 0 auto;
        justify-content: center;
        padding: 0;
        border-radius: 0.9rem;
        background: var(--paper-deep);
        box-shadow: var(--nm-inset-sm);
    }
    .settings-rail-link i { width: auto; font-size: 0.95rem; }
    .settings-rail-link.is-active {
        color: #fff;
        background: var(--red);
        box-shadow: 0.16rem 0.16rem 0.45rem var(--nm-dark);
    }
    .settings-rail-sep { display: none; }
    .settings-rail-badge { display: none; }
    .settings-rail-label { display: none; }
    /* Pas de libellé dans le rail : le titre h1 de la section est juste au-dessus. */
}

/* ── Liste de réglages (lignes type iOS / GitHub) ── */
.set-list {
    background: var(--paper);
    border-radius: 0.93333rem;
    box-shadow: var(--nm-shadow);
    overflow: hidden;
}
.set-list > * + * { border-top: 0.06667rem solid var(--line-ink); }
.set-row {
    display: flex;
    align-items: center;
    gap: 0.93333rem;
    padding: 0.93333rem 1.2rem;
}
.set-row-ico {
    width: 1.6rem;
    text-align: center;
    color: var(--red);
    font-size: 1rem;
    flex-shrink: 0;
}
.set-row-avatar {
    width: 2.66667rem;
    height: 2.66667rem;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg);
    box-shadow: var(--nm-shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}
.set-row-avatar img { width: 100%; height: 100%; object-fit: cover; }
.set-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.set-row-label { font-size: 0.95rem; font-weight: 500; color: var(--text); }
.set-row-hint { font-size: 0.78rem; color: var(--text-muted); }
.set-row-hint-ok { color: var(--success); }   /* était #0F6E56, hors système */
/* Adresse d'agenda à recopier : monospace pour distinguer 0/O et 1/l, et
   `width: 100%` parce qu'un champ tronqué se recopie de travers. */
.set-row-copy {
    width: 100%;
    margin-top: 0.4rem;
    padding: 0.4rem 0.6rem;
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 0.72rem;
    color: var(--text-muted);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
}
.set-row-value { font-size: 0.9rem; color: var(--text); text-align: right; }
.set-row-value-muted { color: var(--text-muted); }
.set-row-actions { display: flex; align-items: center; gap: 0.53333rem; flex-shrink: 0; }
.set-row-cta { font-size: 0.85rem; font-weight: 500; color: var(--red-ink); flex-shrink: 0; }
.set-row-caret { color: var(--text-muted); font-size: 0.75rem; transition: transform 0.2s var(--ease); flex-shrink: 0; }

/* Lignes dépliables (mot de passe, 2FA) */
.set-row-expand > summary { cursor: pointer; list-style: none; }
.set-row-expand > summary::-webkit-details-marker { display: none; }
.set-row-expand > summary:hover .set-row-cta { color: var(--red-hover); }
.set-row-expand[open] > summary .set-row-caret { transform: rotate(180deg); }
.set-row-body { padding: 0.2rem 1.2rem 1.2rem 3.73333rem; }
.set-row-body .account-form { max-width: 26rem; }
@media (max-width: 640px) {
    .set-row-body { padding-left: 1.2rem; }
    .set-row-value { text-align: left; }
}

/* Sous-titre de groupe dans les Paramètres */
.settings-subhead {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--red-ink);   /* 4,39 avec le rouge de marque, et c'est du 11 px */
    margin: 1.46667rem 0.26667rem 0.66667rem;
}
.settings-subhead i { font-size: 0.9em; }
.settings-subhead-count {
    margin-left: 0.3rem;
    background: var(--paper-deep);
    color: var(--text-muted);
    border-radius: 999px;
    padding: 0.08rem 0.5rem;
    font-size: 0.66rem;
    letter-spacing: 0;
}

/* Corbeille : intro + bouton vider */

/* Interrupteur (checkbox stylisé en switch) */
/* Ligne-toggle = <label> : on annule le style majuscules des labels de formulaire. */
.set-row-toggle { cursor: pointer; text-transform: none; letter-spacing: normal; }
.set-switch {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 2.66667rem;
    height: 1.53333rem;
    border-radius: 1rem;
    background: #C4C9D1;
    position: relative;
    cursor: pointer;
    transition: background 0.18s var(--ease);
}
.set-switch::after {
    content: '';
    position: absolute;
    top: 0.16667rem;
    left: 0.16667rem;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0.06667rem 0.13333rem rgba(43, 38, 34, 0.28);
    transition: transform 0.18s var(--ease);
}
.set-switch:checked { background: var(--red); }
.set-switch:checked::after { transform: translateX(1.13333rem); }
.set-switch:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* Select posé à droite d'une ligne de réglage */
.set-row-select {
    width: auto;
    min-width: 9rem;
    flex-shrink: 0;
    border: 0;
    border-radius: 0.66667rem;
    padding: 0.46667rem 2.13333rem 0.46667rem 0.8rem;
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%236B6259' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.73333rem center;
    background-size: 0.8rem;
    box-shadow: inset 0.1rem 0.1rem 0.26667rem var(--nm-dark), inset -0.1rem -0.1rem 0.26667rem var(--nm-light);
}
.set-row-select:focus { box-shadow: inset 0.1rem 0.1rem 0.26667rem var(--nm-dark), inset -0.1rem -0.1rem 0.26667rem var(--nm-light), 0 0 0 0.16667rem rgba(185, 28, 28, 0.14); }

.notif-autosave-hint {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    justify-content: flex-end;
    margin: 1rem 0.26667rem 0;
    font-size: 0.8rem;
    color: var(--text-muted);
    transition: color 0.2s var(--ease);
}
/* Le vert de confirmation était à 3,02 : c'est le seul retour que reçoit
   l'utilisateur après un enregistrement automatique, il doit se lire. */
.notif-autosave-hint i { color: var(--success); }
.notif-autosave-hint.is-saved { color: var(--success); }

/* Assigné d'une tâche */
.task-assignee {
    display: inline-flex;
    align-items: center;
    gap: 0.33333rem;
    margin-top: 0.33333rem;
    font-size: 0.72rem;
    color: var(--text-muted);
    background: var(--bg);
    box-shadow: inset 0.06667rem 0.06667rem 0.13333rem var(--nm-dark), inset -0.06667rem -0.06667rem 0.13333rem var(--nm-light);
    padding: 0.13333rem 0.53333rem;
    border-radius: 0.8rem;
}
.task-assignee i { color: var(--red-accent); font-size: 0.9em; }

/* Avatars des assignés (empilés) sur une tâche */
.task-avatars { display: inline-flex; align-items: center; flex-shrink: 0; margin-top: 0.33333rem; }
.task-avatar {
    width: 1.86667rem;
    height: 1.86667rem;
    border-radius: 50%;
    overflow: hidden;
    border: 0.13333rem solid var(--paper);
    background: var(--bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: -0.53333rem;
    flex-shrink: 0;
}
.task-avatar:first-child { margin-left: 0; }
.task-avatar img { width: 100%; height: 100%; object-fit: cover; }
.task-avatar-ini { font-size: 0.72rem; font-weight: 700; color: var(--red-ink); }

/* Sélecteur multi-assignés (chips avec avatar) dans le formulaire tâche */
.assignee-hint { font-weight: 400; color: var(--text-muted); text-transform: none; letter-spacing: 0; font-size: 0.85em; }
.assignee-picker { display: flex; flex-wrap: wrap; gap: 0.53333rem; }
.assignee-opt { cursor: pointer; }
.assignee-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.assignee-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.46667rem;
    padding: 0.26667rem 0.73333rem 0.26667rem 0.26667rem;
    border-radius: 1.33333rem;
    background: var(--bg);
    box-shadow: var(--nm-shadow-sm);
    font-size: 0.85rem;
    color: var(--text-muted);
    transition: color 0.15s var(--ease), background 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.assignee-av {
    width: 1.86667rem;
    height: 1.86667rem;
    border-radius: 50%;
    overflow: hidden;
    background: var(--paper);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 0.8rem;
    flex-shrink: 0;
}
.assignee-av img { width: 100%; height: 100%; object-fit: cover; }
.assignee-opt input:checked + .assignee-chip {
    color: #fff;
    background: var(--red);
    box-shadow: inset 0.06667rem 0.06667rem 0.2rem rgba(0, 0, 0, 0.2);
}
.assignee-opt input:checked + .assignee-chip .assignee-av { background: rgba(255, 255, 255, 0.25); color: #fff; }
.assignee-opt input:focus-visible + .assignee-chip { outline: 2px solid var(--red); outline-offset: 2px; }

/* Formulaire d'une ligne de réglage : champ + bouton alignés */
.set-inline-form { display: flex; align-items: center; gap: 0.66667rem; }
.set-inline-form input { flex: 1; min-width: 0; }

/* Était #B45309, écrit en dur : hors du système de couleurs, et à 4,48 sur la
   carte — juste sous le seuil. Le jeton d'avertissement passe et suit le
   thème. */
.set-row-hint-warn { color: var(--warning); }

.notif-save-row { display: flex; justify-content: flex-end; margin-top: 1.06667rem; }

.tech-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 0.1rem solid var(--line-ink);
    border-left: 0.1rem solid var(--line-ink);
    margin-bottom: 1.33333rem;
}
.tech-stat {
    padding: 0.93333rem 1.06667rem;
    border-right: 0.1rem solid var(--line-ink);
    border-bottom: 0.1rem solid var(--line-ink);
    display: flex;
    flex-direction: column;
    gap: 0.26667rem;
}
.tech-stat-label {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    font-weight: 600;
}
.tech-stat-value {
    font-family: var(--serif);
    font-weight: 700;
    font-size: 1.4rem;
    line-height: 1.1;
}
.tech-stat-price .tech-stat-value { color: var(--red); }
.tech-stat-type { font-size: 1.05rem; }

@media (max-width: 1024px) {
    .fiche-hero-title { font-size: 1.9rem; }
}

/* ============ Grille de biens ============ */

/* Bandes horizontales, pas tuiles.
   La tuile verticale imposait une photo carrée, un titre sur trois lignes et
   une hauteur de 26 rem : trois biens remplissaient l'écran. La bande fait
   7,5 rem de haut — on en lit huit d'un coup d'œil, et le regard descend une
   seule colonne au lieu de balayer une grille. */
/* Quatre biens de front sur un grand écran, un seul sur un téléphone, sans
   qu'aucun palier ne soit écrit à la main : `auto-fill` remplit la largeur
   disponible avec des colonnes d'au moins 19 rem. La liste se réduit toute
   seule quand la carte s'ouvre à côté. */
.prop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
    gap: 0.8rem;
}

.prop-card {
    display: grid;
    /* photo · identité · chiffres · actions */
    grid-template-columns: 10rem minmax(0, 1fr) auto auto;
    grid-template-rows: auto auto;
    column-gap: 1.1rem;
    row-gap: 0.15rem;
    align-items: center;
    /* Rembourrage resserré : celui des cartes ordinaires (1,2 rem) ajoutait
       38 px de haut à une bande qui n'en fait que 110. */
    padding: 0.7rem 0.85rem;
    transition: box-shadow 0.25s var(--ease);
}

.prop-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-hover);
}

.prop-card-head {
    display: flex;
    justify-content: space-between;
    gap: 0.53333rem;
    flex-wrap: wrap;
}

/* Statut posé sur la photo (direction A). */
.prop-card-status {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    box-shadow: 0 0.06667rem 0.2rem rgba(0, 0, 0, 0.22);
}
/* Type en surtitre discret au-dessus du titre. */
.prop-card-type {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: -0.26667rem;
}

.prop-card-title { font-size: 1.1rem; line-height: 1.3; }
.prop-card-title a { color: var(--text); }
.prop-card-title a:hover { color: var(--red); text-decoration: none; }

.prop-card-addr {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0;
    /* Adresse longue : max 2 lignes propres avec ellipse, jamais 4 lignes. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Bandeau prix + specs en creux (design B). */
.prop-card-specs {
    display: flex;
    gap: 0.8rem;
    align-items: center;
    justify-content: space-between;
    font-size: 0.82rem;
    color: var(--text-muted);
    flex-wrap: wrap;
    background: var(--paper-deep);
    box-shadow: var(--nm-inset-sm);
    border-radius: 0.8rem;
    padding: 0.55rem 0.8rem;
}
.prop-card-chips { display: flex; gap: 0.8rem; white-space: nowrap; }

/* Le prix se lit sur le creux de la carte, où le rouge de marque ne donne que
   4,07. C'est le chiffre le plus regardé de toute la page : il passe en rouge
   sombre, comme le lien actif de la navigation. */
.prop-price {
    font-family: var(--sans);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--red-ink);
    white-space: nowrap;
}

.prop-card-visit {
    font-size: 0.84rem;
    color: var(--red-dark);
    background: var(--red-soft);
    border: 0.06667rem solid var(--red-border);
    border-radius: var(--radius);
    padding: 0.4rem 0.66667rem;
    margin: 0;
    font-weight: 500;
}

.prop-card-footer { margin-top: auto; padding-top: 0.53333rem; display: flex; gap: 0.53333rem; align-items: center; }
.prop-card-footer > a { flex: 1; }

/* ---- Carte de bien : la photo occupe toute la carte, le texte se pose dessus ----

   APRÈS les règles ci-dessus, et non avant : elles définissent la marge, le
   rembourrage et la direction du bandeau de prix pour l'ancienne tuile, et
   l'emporteraient à égalité de poids.

   PRINCIPE — un seul plan. La photo est le fond, un voile sombre monte du bas,
   le texte se lit dessus. Il n'y a plus de colonne d'image qui mange un tiers
   de la carte : le titre, l'adresse et le prix disposent de TOUTE la largeur.
   C'est ce qui supprime la cause des coupures revenues à chaque palier — le
   texte avait 300 px quand la carte en fait 490, il les a maintenant tous.

   LA CARTE SE RÈGLE SUR SA PROPRE LARGEUR, PAS SUR CELLE DE L'ÉCRAN.
   Avec quatre cartes de front, chacune fait 330 px sur un écran de 1700 :
   toute règle fondée sur la taille de la FENÊTRE croit alors disposer de
   1700 px et écrase le texte. Trois défauts successifs sont venus de là. Les
   requêtes de conteneur suppriment la cause : la carte mesure ce qu'elle a. */

.prop-grid .prop-card {
    container-type: inline-size;
    container-name: bien;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;  /* le texte tombe au bas de la photo */
    /* `stretch` EXPLICITE. L'ancienne tuile posait `align-items: center` ; en
       colonne, cela cesse d'étirer les enfants sur la largeur et les taille sur
       leur contenu. Mesuré : six cartes de 328 px dont les blocs de texte
       faisaient 297, 342, 328, 337, 325 et 328 px, certains débordant, tous
       centrés. Le voile devenait un rectangle flottant au milieu de la photo. */
    align-items: stretch;
    min-height: 15.5rem;
    padding: 0;
    overflow: hidden;           /* la photo épouse l'angle arrondi de la carte */
    isolation: isolate;
}

/* La photo est le fond de la carte, et le lien qui l'entoure couvre toute la
   surface : cliquer n'importe où sur l'image ouvre la fiche. */
.prop-grid .prop-card-cover {
    position: absolute; inset: 0;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--paper-deep);
    z-index: 0;
}
/* L'IMAGE EST SORTIE DU FLUX, et c'est le point qui compte.
   Laissée en flux avec `height: 100%`, elle demandait sa hauteur à son
   conteneur, qui la lui demandait en retour : le navigateur tranchait en
   gardant les proportions du fichier. Une photo carrée de 419 px de large
   donnait alors 419 px de haut et étirait le texte avec elle. */
.prop-grid .prop-card-cover img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
}
/* Voile léger sur toute la photo : il ne sert qu'aux pastilles du haut. */
.prop-grid .prop-card-cover::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg,
        rgba(14, 17, 21, 0.14) 0%,
        rgba(14, 17, 21, 0.24) 55%,
        rgba(14, 17, 21, 0.42) 100%);
}
/* BIEN SANS PHOTO — LA CARTE RESTE CLAIRE, et c'est un choix de fond.
   Premier essai : même carte, fond ardoise. Sur une base réelle où presque
   aucun bien n'a d'image — les 45 de l'import n'en ont aucune — la page
   devenait un mur de rectangles noirs, et le repère visuel qui disait « pas de
   photo » avait disparu avec l'image de remplacement.
   La carte sans photo redevient donc une carte RedKey ordinaire : fond papier,
   texte encre, et un pictogramme qui dit franchement qu'il manque une photo.
   L'image de remplacement elle-même reste écartée : c'est un PNG gris sur fond
   blanc, étiré en pleine carte il ne montrait rien. */
.prop-grid .prop-card:not(.prop-card-has-photo) .prop-card-cover img { display: none; }
.prop-grid .prop-card:not(.prop-card-has-photo) .prop-card-cover {
    background: var(--paper-deep);
    box-shadow: var(--nm-inset-sm);
}
.prop-grid .prop-card:not(.prop-card-has-photo) .prop-card-cover::after {
    /* Le pictogramme prend la place de la photo, dans le tiers haut de la
       carte, là où l'œil la cherche. */
    content: '\f03e';   /* fa-image — « il manque la photo », pas « maison » */
    font-family: 'Font Awesome 6 Free'; font-weight: 900;
    background: none;
    inset: 0 0 auto; top: 0; height: 58%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.4rem;
    color: var(--border-strong);
    opacity: 0.75;
}

/* Statut en haut à gauche, compteur de photos en haut à DROITE : posé en bas
   comme avant, il venait se loger sous le bouton « Ouvrir ». */
.prop-grid .prop-card-status { top: 0.7rem; left: 0.7rem; z-index: 2; }
.prop-grid .prop-card-count  { top: 0.7rem; right: 0.7rem; bottom: auto; z-index: 2; }

/* LE VOILE EST PORTÉ PAR LE TEXTE, ET C'EST CE QUI FAIT TENIR LA VERSION.
   Posé sur la photo, il commençait à une hauteur FIXE — et le texte, lui, n'a
   pas de hauteur fixe : il en fait cinq lignes ou huit selon le titre. Rendu et
   regardé sur une façade enneigée, la première ligne du titre tombait dans une
   zone à 0,45 d'opacité, soit du blanc sur un gris à 140 : rapport de contraste
   2,6, sous le seuil AA de 4,5. Le dégradé accroché au bloc de texte le suit :
   quelle que soit la longueur du titre, il se lit sur le même fond. */
.prop-grid .prop-card-corps {
    position: relative; z-index: 1;
    display: flex;
    flex-direction: column;
    padding: 1rem;
}
.prop-grid .prop-card-has-photo .prop-card-corps,
.prop-grid .prop-card.prop-card-has-photo .prop-card-corps {
    padding: 2.2rem 1rem 1rem;
    background: linear-gradient(180deg,
        rgba(14, 17, 21, 0) 0%,
        rgba(14, 17, 21, 0.62) 26%,
        rgba(14, 17, 21, 0.84) 55%,
        rgba(14, 17, 21, 0.94) 100%);
}
/* Le texte GARDE ses événements de souris : le rendre transparent aux clics
   aurait fait de toute la carte un lien, mais aurait aussi empêché de
   sélectionner une adresse pour la copier — ce qu'un courtier fait tous les
   jours. Le titre est un lien, le bouton « Ouvrir » est là : ça suffit. */

.prop-grid .prop-card-type { margin-bottom: 0.1rem; }
/* TROIS lignes, et c'est mesuré, pas choisi. À deux, sur la carte de 328 px
   des quatre de front, « Bel et spacieux appartement de 3.5 pces avec vue sur
   les Dents-du-Midi » perdait sa fin — deux titres sur six. Sur un voile
   sombre, une ligne de plus ne coûte rien : le dégradé finit au bas de la
   carte de toute façon. */
.prop-grid .prop-card-title {
    font-size: 1.05rem;
    line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
}
/* L'adresse S'ENROULE plutôt que de s'arrêter en points de suspension.
   « Rue de Lausan… » ne permet pas d'aller sur place. */
.prop-grid .prop-card-addr {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    white-space: normal; overflow: hidden;
    font-size: 0.83rem;
    margin-top: 0.1rem;
}

.prop-grid .prop-card-visit {
    align-self: flex-start;
    margin: 0.5rem 0 0;
    padding: 0.28rem 0.55rem;
    font-size: 0.78rem;
}

/* Prix à gauche, actions à droite, sur la même ligne de base. */
/* Un rem d'écart, et pas 0,8 : à 0,8 le montant venait toucher le bouton rouge
   — vu au rendu sur « CHF 1'150'000 » dans une carte de 328 px. */
.prop-grid .prop-card-pied {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.6rem;
}
/* Prix et caractéristiques sans pastille : le creux enfermait le prix dans un
   bloc qui ne s'alignait sur rien. */
.prop-grid .prop-card-specs {
    background: none; box-shadow: none; padding: 0;
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 0.05rem;
    min-width: 0;
}
.prop-grid .prop-card-specs .prop-price {
    font-size: 1.3rem;
    line-height: 1.15;
}
/* Bien sans prix : le tiret de remplacement s'affichait en gros et en rouge,
   au même rang qu'un vrai montant. Il redevient une absence discrète. */
.prop-grid .prop-card-specs .prop-price.est-vide {
    font-size: 1rem; color: var(--text-muted); font-weight: 500;
}
.prop-grid .prop-card-chips {
    gap: 0.6rem;
    color: var(--text-muted);
    font-size: 0.79rem;
    flex-wrap: wrap;
}

/* ---- Les deux boutons ----

   LE RELIEF DE LA PALETTE PAPIER N'A RIEN À FAIRE ICI. Les boutons du reste de
   RedKey portent une ombre double, sombre en bas à droite et CLAIRE en haut à
   gauche : c'est ce qui leur donne leur relief sur le fond papier. Posée sur
   une photo, l'ombre claire peint un halo blanc flou tout autour du bouton —
   vu au rendu à 2×, c'était le défaut le plus laid de la carte. Aucun relief
   dans la grille des biens, sur aucune des deux variantes : le rouge se suffit.

   Le bouton de carte n'est plus un pavé blanc plein : il devient un contour de
   la même hauteur que « Ouvrir », pour que les deux forment une seule paire au
   lieu de deux objets qui se disputent la ligne du prix. */
.prop-grid .prop-card-footer {
    flex: 0 0 auto;
    margin: 0; padding: 0;
    gap: 0.35rem;
    align-items: center;
}
.prop-grid .prop-card-footer .btn {
    box-shadow: none;
    display: inline-flex; align-items: center; justify-content: center;
    height: 2.1rem; min-height: 0;
    padding: 0 0.85rem;
    font-size: 0.8rem;
    border-radius: 0.55rem;
    flex: 0 0 auto;
}
.prop-grid .prop-card-footer .btn:hover,
.prop-grid .prop-card-footer .btn:active { box-shadow: none; }
.prop-grid .prop-card-footer .btn i { font-size: 0.85rem; }
/* Trois classes dans le sélecteur, et c'est nécessaire : la palette pose
   `.btn:not(.lg-btn)` et `.btn-sm:not(.lg-btn)`, qui pèsent deux classes
   comme `.prop-grid .prop-card-map-btn` et passent 2 400 lignes plus bas.
   À poids égal, c'est la dernière qui gagne — le bouton gardait son fond
   plein et sa largeur de 2,13 rem malgré la règle écrite ici. */
.prop-grid .prop-card-footer .prop-card-map-btn {
    width: 2.1rem; min-width: 0; padding: 0;
    background: transparent;
    border: 0.06667rem solid var(--line-ink);
    color: var(--text);
}
.prop-grid .prop-card-footer .prop-card-map-btn:hover {
    background: var(--red-soft); border-color: var(--red); color: var(--red);
}

/* ---- Variante photo : le texte passe en blanc sur le voile ----
   Regroupé ici et nulle part ailleurs. Éparpillées, ces couleurs
   s'appliquaient aussi aux cartes sans photo, qui sont restées claires. */
.prop-grid .prop-card-has-photo .prop-card-type   { color: rgba(255, 255, 255, 0.92); }
.prop-grid .prop-card-has-photo .prop-card-title a { color: #FFF; }
.prop-grid .prop-card-has-photo .prop-card-title a:hover { color: #FFF; text-decoration: underline; }
.prop-grid .prop-card-has-photo .prop-card-addr   { color: rgba(255, 255, 255, 0.85); }
.prop-grid .prop-card-has-photo .prop-card-addr .geo-warn { color: #F0B8A8; }
.prop-grid .prop-card-has-photo .prop-card-visit  { background: rgba(255, 255, 255, 0.94); border-color: transparent; }
.prop-grid .prop-card-has-photo .prop-price       { color: #FFF; }
.prop-grid .prop-card-has-photo .prop-price.est-vide { color: rgba(255, 255, 255, 0.75); }
.prop-grid .prop-card-has-photo .prop-card-chips  { color: rgba(255, 255, 255, 0.85); }
.prop-grid .prop-card-has-photo .prop-card-footer .prop-card-map-btn {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    color: #FFF;
}
.prop-grid .prop-card-has-photo .prop-card-footer .prop-card-map-btn:hover {
    background: rgba(255, 255, 255, 0.9); border-color: #FFF; color: var(--red-ink);
}

/* ---- Carte large ----
   `cqi` = un centième de la largeur DE LA CARTE : le titre grandit avec elle,
   sans jamais consulter la fenêtre. Au-delà de 30 rem la carte respire :
   le titre passe au corps supérieur et les chiffres se rangent sur une ligne.

   36 REM, ET C'EST MESURÉ. Posé à 30 rem, le passage en ligne s'enclenchait sur
   une carte de 470 px où prix + filet + surface + bouton réclament 462 px : la
   ligne se repliait quand même, et le filet restait seul en début de deuxième
   ligne — exactement ce qu'il est censé éviter. Le `nowrap` ci-dessous rend le
   défaut impossible : au-dessus du seuil, la ligne tient ou le seuil est faux.

   ATTENTION — une requête de conteneur ne s'applique QU'AUX DESCENDANTS du
   conteneur, jamais au conteneur lui-même. Une `min-height` posée ici sur
   `.prop-card` restait sans effet : mesuré, la carte gardait ses 232,5 px de
   repli pendant que le titre et le prix, eux, obéissaient. La hauteur se règle
   donc une seule fois, plus haut, et la carte grandit avec son contenu. */
@container bien (min-width: 36rem) {
    .prop-grid .prop-card-corps { padding: 2.4rem 1.2rem 1.15rem; }
    .prop-grid .prop-card-title { font-size: 1.2rem; -webkit-line-clamp: 2; }
    .prop-grid .prop-card-addr  { font-size: 0.87rem; }
    .prop-grid .prop-card-specs {
        flex-direction: row; align-items: baseline; gap: 0.7rem;
        flex-wrap: nowrap;
    }
    .prop-grid .prop-card-specs .prop-price { font-size: 1.45rem; }
    /* Le filet ne sépare le prix des caractéristiques que si la ligne tient
       d'un seul tenant ; replié, un trait orphelin ferait sale. */
    .prop-grid .prop-card-chips {
        border-left: 1px solid var(--border);
        padding-left: 0.7rem;
    }
    .prop-grid .prop-card-has-photo .prop-card-chips { border-left-color: rgba(255, 255, 255, 0.35); }
}

/* ---- Carte très étroite ----
   Prix et bouton ne tiennent plus côte à côte : ils s'empilent plutôt que de
   se serrer jusqu'à couper le montant.

   LE SEUIL EST MESURÉ. Posé d'abord à 17 rem, il laissait le bouton
   « Ouvrir » dépasser de 1 à 8 px du bord droit sur un écran de 320 px, où la
   carte fait 284 px — soit 18,9 rem, juste au-dessus. À 20 rem, le repli
   s'enclenche avant la casse, et les cartes de 328 px des quatre de front
   (20,5 rem) gardent leur ligne unique. */
@container bien (max-width: 20rem) {
    .prop-grid .prop-card-corps { padding: 0.85rem; }
    .prop-grid .prop-card-title { font-size: 0.97rem; -webkit-line-clamp: 3; }
    .prop-grid .prop-card-addr  { font-size: 0.78rem; }
    .prop-grid .prop-card-pied  { flex-direction: column; align-items: stretch; gap: 0.5rem; }
    .prop-grid .prop-card-specs .prop-price { font-size: 1.15rem; }
    .prop-grid .prop-card-footer > a { flex: 1 1 auto; }
}

/* ============ Filtres avancés des biens ============ */

/* Bouton de rattrapage du géocodage. Son libellé porte un décompte qui change
   pendant l'opération — il ne doit jamais se replier sur deux lignes au milieu
   d'un chiffre. */
.prop-geo-btn { white-space: nowrap; }
.prop-geo-btn[disabled] { opacity: 0.75; cursor: progress; }
#propGeoSync[disabled] { opacity: 0.75; cursor: progress; }

/* Séparateur dans la barre d'outils : à gauche ce qui regarde la liste, à
   droite ce qui la modifie. Le bouton rouge tombait sinon au milieu d'une
   rangée de carrés blancs, sans qu'on comprenne pourquoi il est rouge. */
.ftb-sep {
    /* `display: block` explicite : un <span> est inline par défaut, et la
       largeur n'a alors aucun effet. Un parent flex le rendrait bien en bloc,
       mais s'appuyer là-dessus rend la règle muette hors flex. */
    display: block;
    width: 0.06667rem;
    align-self: stretch;
    min-height: 1.6rem;
    margin: 0 0.2rem;
    background: var(--border-strong);
    flex: none;
}

/* Bandeau de placement sur la carte.
   L'information tenait avant dans un carré à icône, sans libellé visible ni
   infobulle : « 6 » ne voulait rien dire. Les deux situations n'ont rien à
   voir — « pas encore placé » se règle en un clic, « adresse introuvable »
   demande de corriger une fiche — d'où deux teintes et deux phrases. */
.geo-bandeau {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 0.9rem 1.1rem;
    margin-bottom: var(--pile, 1.2rem);
    border-radius: var(--nm-radius);
    background: var(--info-bg);
    border: 0.06667rem solid #CBD7E6;
}
.geo-bandeau.est-avertissement { background: var(--warning-bg); border-color: #E8D3B4; }

.geo-bandeau-ico { flex: none; margin-top: 0.15rem; font-size: 1rem; color: var(--info); }
.geo-bandeau.est-avertissement .geo-bandeau-ico { color: var(--warning); }

.geo-bandeau-texte { flex: 1 1 18rem; min-width: 0; }
.geo-bandeau-titre { margin: 0 0 0.2rem; font-weight: 600; font-size: 0.92rem; color: var(--info); }
.geo-bandeau.est-avertissement .geo-bandeau-titre { color: var(--warning); }
.geo-bandeau-sous { margin: 0; font-size: 0.82rem; line-height: 1.55; color: var(--text); }

/* `flex: none` + `margin-left: auto` : les boutons restent à droite sur large,
   et passent sous le texte sur étroit sans jamais l'écraser. */
.geo-bandeau-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex: none;
    margin-left: auto;
    align-items: center;
}

@media (max-width: 760px) {
    .geo-bandeau { flex-wrap: wrap; }
    .geo-bandeau-actions { margin-left: 0; width: 100%; }
}

/* Interrupteur de la carte. Un interrupteur et non deux onglets : il n'y a pas
   deux vues à choisir, il y a un panneau qu'on ouvre ou qu'on ferme. */
.prop-map-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-family: var(--sans);
    font-size: 0.82rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    color: var(--text-muted);
    user-select: none;
}
.prop-map-switch input {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0; pointer-events: none;
}
.prop-map-switch-piste {
    position: relative;
    width: 2.2rem; height: 1.2rem;
    flex-shrink: 0;
    border-radius: 66.6rem;
    background: var(--paper-deep);
    box-shadow: var(--nm-inset-sm);
    transition: background 0.2s var(--ease);
}
.prop-map-switch-piste::after {
    content: '';
    position: absolute;
    top: 0.16rem; left: 0.16rem;
    width: 0.88rem; height: 0.88rem;
    border-radius: 50%;
    background: var(--paper);
    box-shadow: var(--nm-shadow-sm);
    transition: transform 0.2s var(--ease);
}
.prop-map-switch input:checked + .prop-map-switch-piste { background: var(--red); }
.prop-map-switch input:checked + .prop-map-switch-piste::after { transform: translateX(1rem); }
.prop-map-switch input:checked ~ .prop-map-switch-texte { color: var(--red-ink); }
/* Le focus clavier doit se voir : la case elle-même est masquée. */
.prop-map-switch input:focus-visible + .prop-map-switch-piste {
    outline: 0.13333rem solid var(--red);
    outline-offset: 0.13333rem;
}
.prop-map-switch-texte { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
.prop-map-switch-texte i { font-size: 0.9em; }

.prop-view-toggle {
    display: inline-flex;
    border: 0.06667rem solid var(--red-border);
    border-radius: 66.6rem;
    overflow: hidden;
    background: var(--paper);
}

.prop-view-toggle button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: none;
    background: none;
    cursor: pointer;
    font-family: var(--sans);
    font-size: 0.82rem;
    color: var(--text-muted);
    padding: 0.4rem 0.93333rem;
    transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.prop-view-toggle button.active {
    background: var(--red);
    color: #fff;
    font-weight: 600;
}

.prop-view-toggle button i { font-size: 0.85em; }

.prop-filters-body {
    padding: 0.26667rem 0.93333rem 0.93333rem;
    border-top: 0.06667rem solid var(--border);
}

.prop-filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.8rem 1.06667rem;
    padding-top: 0.8rem;
}

.prop-filters-grid .form-group { margin-bottom: 0; }
.prop-filter-search { grid-column: 1 / -1; }

.prop-range-inputs {
    display: flex;
    align-items: center;
    gap: 0.53333rem;
}

.prop-range-inputs input { width: 100%; min-width: 0; }
.prop-range-inputs span { color: var(--text-muted); }

.prop-filters-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.66667rem;
    margin-top: 0.93333rem;
}

/* ============ Page Notifications ============ */

.notif-grid { display: flex; flex-direction: column; gap: 1.06667rem; max-width: 48rem; }

.notif-device-actions { display: flex; gap: 0.66667rem; flex-wrap: wrap; margin-top: 0.26667rem; }
.push-toggle.is-on { background: var(--success); border-color: var(--success); }
.push-toggle.is-on:hover { background: #345a3d; }

.notif-hint-ios {
    margin: 0.8rem 0 0;
    font-size: 0.82rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.46667rem;
}

.notif-toggles { display: flex; flex-direction: column; gap: 0.26667rem; margin: 0.4rem 0 1.2rem; }

.notif-toggle {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 0.8rem;
    border: 0.06667rem solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.notif-toggle:hover { border-color: var(--border-strong); background: var(--paper-deep); }

.notif-toggle input[type="checkbox"] {
    width: 1.2rem;
    height: 1.2rem;
    margin-top: 0.13333rem;
    accent-color: var(--red);
    flex-shrink: 0;
}

.notif-toggle-body { display: flex; flex-direction: column; gap: 0.13333rem; }
.notif-toggle-title { font-weight: 600; color: var(--text); }
.notif-toggle-title i { color: var(--red); margin-right: 0.33333rem; }
.notif-toggle-desc { font-size: 0.83rem; color: var(--text-muted); }

.notif-selects { gap: 1.06667rem; }

/* ============ Autocomplétion d'adresse + mini-carte (modal) ============ */

.prop-addr-group { position: relative; }

.addr-suggestions {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 30;
    margin-top: 0.26667rem;
    background: var(--paper);
    border: 0.06667rem solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    overflow: hidden;
    max-height: 17.33333rem;
    overflow-y: auto;
}

.addr-suggestion {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 0.06667rem solid var(--border);
    cursor: pointer;
    padding: 0.6rem 0.8rem;
    font-family: var(--sans);
    font-size: 0.86rem;
    color: var(--text);
    line-height: 1.35;
}

.addr-suggestion:last-child { border-bottom: none; }
.addr-suggestion:hover { background: var(--red-soft); color: var(--red-dark); }
.addr-suggestion i { color: var(--red); margin-top: 0.13333rem; flex-shrink: 0; }

.addr-map-wrap { margin-top: 0.66667rem; }

.addr-mini-map {
    height: 13.33333rem;
    border: 0.06667rem solid var(--border);
    border-radius: var(--radius);
    background: var(--paper-deep);
    z-index: 0;
}

.addr-map-hint {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.4rem 0 0;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.addr-map-hint i { color: var(--red); }

.addr-map-resolved {
    margin: 0.26667rem 0 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--success);
}

/* ============ Vue partagée liste + carte ============ */

.prop-split {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 1.2rem;
    align-items: start;
}

/* Carte repliée — soit la migration géo n'est pas passée, soit l'utilisateur a
   fermé le panneau. La colonne doit être RETIRÉE, pas seulement réduite : sans
   cela elle restait posée sous la liste, vide et haute. */
.prop-split-nomap { grid-template-columns: 1fr; }
.prop-split-nomap .prop-map-col { display: none; }

.geo-setup {
    display: flex;
    align-items: center;
    gap: 0.66667rem;
}
.geo-setup code {
    background: rgba(0, 0, 0, 0.06);
    padding: 0.06667rem 0.4rem;
    border-radius: 0.26667rem;
    font-size: 0.9em;
}

/* Direction A. */
.prop-split .prop-grid { gap: 1rem; align-content: start; }

/* Avec carte : le bloc liste+carte remplit exactement l'écran (hauteur posée
   par JS = sizeBiensSplit). La carte tient TOUJOURS dans l'écran (100 % du
   bloc), la liste défile toute seule à côté. */
.prop-split:not(.prop-split-nomap) {
    align-items: stretch;
}
/* La largeur de la liste change quand la carte s'ouvre ; la grille en tire
   elle-même le nombre de colonnes, et chaque carte se replie sur sa propre
   largeur. Rien à forcer ici. */
/* Le repli en colonne étroite est défini plus haut, avec le reste de la carte.
   Un second jeu de règles vivait ici : plus spécifique (deux classes plus le
   :not) que celui de la carte, il l'emportait quelle que soit la position dans
   le fichier. Résultat mesuré : photo bloquée à 113 px au lieu de 224, et la
   ligne « Visite » repartant du bord de la carte au lieu du bord du texte. */
.prop-split:not(.prop-split-nomap) .prop-list-col {
    align-self: start;          /* peu de biens : la colonne s'arrête au contenu (pas de vide) */
    max-height: 100%;           /* beaucoup de biens : plafonnée à l'écran, elle défile */
    overflow-y: auto;
    scrollbar-gutter: stable;   /* gouttière réservée : pas de saut ni d'espacement asymétrique */
    padding-bottom: 0.2rem;
}
.prop-split:not(.prop-split-nomap) .prop-map-col { height: 100%; }
.prop-split:not(.prop-split-nomap) .prop-map-sticky { position: static; height: 100%; }
.prop-split:not(.prop-split-nomap) .prop-map { min-height: 0; }


.prop-list-col::-webkit-scrollbar { width: 0.53333rem; }
.prop-list-col::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 0.53333rem; }

.prop-map-sticky {
    position: sticky;
    top: 1.2rem;
}

.prop-map {
    height: 100%;
    min-height: 28rem;
    border: 0.06667rem solid var(--border);
    border-radius: var(--radius);
    background: var(--paper-deep);
    z-index: 0;
}

/* Lien visuel liste <-> carte */
.prop-card.is-highlight {
    border-color: var(--red);
    box-shadow: var(--shadow-hover);
}

/* ============ Pins Leaflet ============ */

.prop-pin-wrap { background: none; border: none; }

.prop-pin {
    display: block;
    width: 1.46667rem;
    height: 1.46667rem;
    border-radius: 50% 50% 50% 0;
    background: var(--red);
    border: 0.13333rem solid #fff;
    transform: rotate(-45deg);
    box-shadow: 0 0.13333rem 0.33333rem rgba(72, 60, 45, 0.35);
    transition: transform 0.15s var(--ease);
}

/* Variante agrandie pour la carte principale (bien plus lisible) */
.prop-pin-lg {
    width: 1.86667rem;
    height: 1.86667rem;
    border-width: 0.2rem;
    box-shadow: 0 0.2rem 0.6rem rgba(43, 38, 34, 0.55);
}

.prop-pin-wrap.is-active .prop-pin,
.prop-pin-wrap:hover .prop-pin {
    transform: rotate(-45deg) scale(1.22);
    z-index: 500;
}

/* Couleurs vives par statut (ressortent nettement sur la carte) */
.prop-pin-disponible    { background: #16A34A; }  /* vert vif */
.prop-pin-visite_prevue { background: #2563EB; }  /* bleu vif */
.prop-pin-offre_recue   { background: #EA8C1C; }  /* orange */
.prop-pin-vendu         { background: #DC2626; }  /* rouge vif */
.prop-pin-archive       { background: #6E675D; }  /* gris */

/* ============ Légende de la carte ============ */

.prop-map-legend {
    background: var(--paper);
    border: 0.06667rem solid var(--border);
    border-radius: var(--radius);
    padding: 0.53333rem 0.73333rem;
    font-size: 0.72rem;
    color: var(--text);
    display: flex;
    flex-direction: column;
    gap: 0.33333rem;
    box-shadow: 0 0.06667rem 0.33333rem rgba(43, 38, 34, 0.14);
}
.prop-legend-item { display: flex; align-items: center; gap: 0.46667rem; white-space: nowrap; }
.prop-legend-dot {
    width: 0.73333rem;
    height: 0.73333rem;
    border-radius: 50%;
    border: 0.06667rem solid #fff;
    box-shadow: 0 0 0 0.06667rem var(--border-strong);
    flex-shrink: 0;
}

/* ============ Bouton plein écran ============ */

/* Crédit OSM discret (obligatoire mais minimal) */
.leaflet-control-attribution {
    font-size: 0.6rem !important;
    background: rgba(255, 253, 248, 0.55) !important;
    color: var(--text-muted) !important;
    padding: 0 0.33333rem !important;
    opacity: 0.65;
}
.leaflet-control-attribution:hover { opacity: 1; }
.leaflet-control-attribution a { color: var(--text-muted) !important; }

.prop-map-fs a { font-size: 0.9rem; color: var(--text); }
.prop-map-fs a:hover { color: var(--red); }
.prop-card-map-btn { padding: 0; width: 2.13333rem; height: 2.13333rem; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.prop-card-map-btn i { margin-right: 0; font-size: 0.95em; line-height: 1; }

.prop-map-col:fullscreen { background: var(--paper); }
.prop-map-col:fullscreen .prop-map-sticky { position: static; height: 100%; top: 0; }
.prop-map-col:fullscreen .prop-map {
    height: 100vh;
    border: none;
    border-radius: 0;
}

/* ============ Popup Leaflet (thème RedKey) ============ */

.leaflet-popup-content-wrapper {
    background: var(--paper);
    color: var(--text);
    border-radius: var(--radius);
    border: 0.06667rem solid var(--border);
    box-shadow: var(--shadow-hover);
}

.leaflet-popup-content { margin: 0; }
.leaflet-popup-tip { background: var(--paper); border: 0.06667rem solid var(--border); }

.prop-pop { width: 14rem; font-family: var(--sans); }

.prop-pop-photo { height: 7.33333rem; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; }
.prop-pop-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.prop-pop-body { padding: 0.66667rem 0.8rem 0.8rem; display: flex; flex-direction: column; gap: 0.33333rem; }

.prop-pop-badge {
    align-self: flex-start;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.13333rem 0.53333rem;
    border-radius: 66.6rem;
    background: var(--neutral-bg);
    color: var(--neutral);
}
.prop-pop-badge-disponible    { background: var(--success-bg); color: var(--success); }
.prop-pop-badge-visite_prevue { background: var(--sky-bg); color: var(--sky); }
.prop-pop-badge-offre_recue   { background: var(--warning-bg); color: var(--warning); }
.prop-pop-badge-vendu         { background: var(--danger-bg); color: var(--danger); }

.prop-pop-title {
    font-family: var(--serif);
    font-size: 1rem;
    line-height: 1.25;
    color: var(--text);
}
.prop-pop-title:hover { color: var(--red); text-decoration: none; }

.prop-pop-ville { font-size: 0.8rem; color: var(--text-muted); }
.prop-pop-price { font-size: 1rem; font-weight: 700; color: var(--red-ink); }
.prop-pop-link { font-size: 0.8rem; font-weight: 600; color: var(--red-ink); margin-top: 0.13333rem; }

/* ============ Badge géolocalisation ============ */

.detail-locality { display: block; color: var(--text-muted); font-size: 0.85rem; margin-top: 0.13333rem; }

.geo-warn {
    display: inline-flex;
    align-items: center;
    gap: 0.33333rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--warning);
    background: var(--warning-bg);
    border-radius: 66.6rem;
    padding: 0.13333rem 0.6rem;
    margin-top: 0.26667rem;
}
.geo-warn-sm { padding: 0.06667rem 0.4rem; margin: 0 0 0 0.26667rem; vertical-align: middle; }

/* Position approximative (centre de la commune). Même forme que l'alerte, mais
   en bleu d'information et non en ambre : ce n'est pas un problème à régler,
   c'est une précision à connaître. Le bien EST sur la carte — simplement pas
   au bon numéro de rue. */
.geo-approx {
    display: inline-flex;
    align-items: center;
    gap: 0.33333rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--info);
    background: var(--info-bg);
    border-radius: 66.6rem;
    padding: 0.13333rem 0.6rem;
    margin-top: 0.26667rem;
}

/* ============ Responsive filtres + carte ============ */

@media (max-width: 1024px) {
    .prop-split {
        grid-template-columns: 1fr;
    }
    /* Sur écran étroit : une seule vue à la fois via le toggle Liste/Carte.
       La liste reprend le défilement normal de la page (pas de scroll interne). */
    .prop-split[data-view="liste"] .prop-map-col { display: none; }
    .prop-split[data-view="carte"] .prop-list-col { display: none; }
    .prop-list-col { max-height: none; overflow: visible; padding-right: 0; }
    /* Vue carte : le JS fixe la hauteur du bloc à l'écran restant, la carte
       le remplit — jamais de scroll. min-height = filet si le JS n'a pas tourné. */
    .prop-map-sticky { position: static; height: auto; }
    .prop-split[data-view="carte"] .prop-map-col,
    .prop-split[data-view="carte"] .prop-map-sticky { height: 100%; }
    .prop-map { height: 100%; min-height: 55dvh; }
}

/* Sur un téléphone, `minmax(19rem, 1fr)` ne laisse déjà passer qu'une colonne :
   aucun palier à écrire. */

@media (min-width: 1025px) {
    /* Le toggle Liste/Carte ne sert qu'en écran étroit */
    .prop-view-toggle { display: none; }
}

/* …et réciproquement : l'interrupteur ne sert qu'au desktop, où la carte
   partage la largeur avec la liste et où on veut pouvoir la replier. Sous ce
   seuil, la carte et la liste ne cohabitent plus : les onglets Liste/Carte
   décident seuls de ce qu'on affiche, et garder l'interrupteur donnait deux
   commandes pour la même chose, dont une qui commandait l'autre.
   Le script force la carte à l'état « disponible » sous ce seuil — sans quoi
   un interrupteur invisible et fermé emporterait les onglets avec lui. */
@media (max-width: 1024px) {
    .prop-map-switch { display: none; }
}


/* ============ Galerie photos ============ */

/* ---- Onglet Photos (fiche bien) : surface glisser-déposer (Design C) ---- */
.photobox { display: flex; flex-direction: column; gap: 0.8rem; }
.photobox-surface {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    min-height: 12rem;
    max-height: 24rem;
    background: var(--paper-deep);
    box-shadow: var(--nm-inset-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Ratio naturel : la photo entière, jamais rognée, hauteur plafonnée. */
.photobox-img { width: 100%; height: auto; max-height: 24rem; object-fit: contain; display: block; cursor: zoom-in; }
.photobox-surface.is-drag { outline: 0.16667rem dashed var(--red); outline-offset: -0.4rem; }

.photobox-bar {
    position: absolute; top: 0.7rem; right: 0.7rem;
    display: flex; gap: 0.4rem; z-index: 2;
    opacity: 0; transition: opacity 0.15s var(--ease);
}
.photobox-surface:hover .photobox-bar,
.photobox-surface:focus-within .photobox-bar { opacity: 1; }
.photobox-bar form { margin: 0; }
.photobox-btn {
    width: 2.2rem; height: 2.2rem;
    border: none; border-radius: 0.6rem;
    background: rgba(255, 255, 255, 0.92); color: #333;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.9rem; cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
.photobox-btn:hover { background: #fff; }
.photobox-btn-danger:hover { background: var(--red); color: #fff; }

.photobox-drop {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
    border: none;
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.7rem; font-size: 0.82rem; color: #fff; cursor: pointer;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.5));
    opacity: 0; transition: opacity 0.15s var(--ease);
}
.photobox-surface:hover .photobox-drop,
.photobox-surface:focus-within .photobox-drop { opacity: 1; }

/* État vide = dropzone en pointillés */
.photobox-empty {
    flex-direction: column; gap: 0.5rem; text-align: center;
    aspect-ratio: 16 / 9; max-height: 22rem; padding: 1.5rem; cursor: pointer;
    background: var(--paper); box-shadow: none;
    border: 0.13333rem dashed var(--line-ink); color: var(--text-muted);
}
.photobox-empty i { font-size: 1.8rem; color: var(--red); }
.photobox-empty span { font-size: 0.92rem; color: var(--text); }
.photobox-empty small { font-size: 0.75rem; }
.photobox-empty.is-drag { border-color: var(--red); background: var(--red-soft); outline: none; }

/* Pellicule de miniatures (si plusieurs photos) */
.photobox-strip { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.photobox-thumb {
    position: relative; width: 5rem; height: 3.6rem;
    border-radius: 0.5rem; overflow: hidden; box-shadow: var(--nm-shadow-sm);
}
.photobox-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; }
.photobox-thumb.is-principale { outline: 0.16667rem solid var(--red); outline-offset: -0.16667rem; }
.photobox-thumb form { position: absolute; margin: 0; top: 0.2rem; }
.photobox-thumb-star { left: 0.2rem; }
.photobox-thumb-del { right: 0.2rem; }
.photobox-thumb form button {
    width: 1.5rem; height: 1.5rem;
    border: none; border-radius: 0.35rem;
    background: rgba(255, 255, 255, 0.92); color: #333;
    font-size: 0.65rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.15s var(--ease);
}
.photobox-thumb:hover form button { opacity: 1; }
.photobox-thumb-del button:hover { background: var(--red); color: #fff; }
.photobox-thumb-badge {
    position: absolute; top: 0.2rem; left: 0.2rem;
    width: 1.5rem; height: 1.5rem; border-radius: 0.35rem;
    background: var(--red); color: #fff; font-size: 0.65rem;
    display: flex; align-items: center; justify-content: center;
}
.photobox-add {
    width: 5rem; height: 3.6rem; flex: 0 0 auto;
    border: 0.13333rem dashed var(--line-ink); border-radius: 0.5rem;
    background: var(--paper); color: var(--red); font-size: 1rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.photobox-add:hover { border-color: var(--red); background: var(--red-soft); }

@media (max-width: 640px) {
    .photobox-surface, .photobox-empty { aspect-ratio: 4 / 3; }
    .photobox-bar, .photobox-drop { opacity: 1; } /* pas de survol au tactile */
    .photobox-thumb form button { opacity: 1; }   /* étoile/suppression visibles au doigt */
}

/* ---- Carrousel photo de la fiche bien ---- */

.gallery { margin-bottom: 0.93333rem; }

.gallery-stage {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    border: 0.06667rem solid var(--border);
    background: var(--paper-deep);
    aspect-ratio: 3 / 2;
    margin-bottom: 0.66667rem;
}

.gallery-stage-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: zoom-in;
}

.gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.53333rem;
    height: 2.53333rem;
    border: none;
    border-radius: 50%;
    background: rgba(255, 253, 248, 0.9);
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    box-shadow: 0 0.13333rem 0.53333rem rgba(43, 38, 34, 0.28);
    transition: background 0.15s, transform 0.15s;
}
.gallery-nav:hover { background: #fff; color: var(--red); }
.gallery-nav:active { transform: translateY(-50%) scale(0.92); }
.gallery-prev { left: 0.66667rem; }
.gallery-next { right: 0.66667rem; }

.gallery-zoom {
    position: absolute;
    top: 0.66667rem;
    right: 0.66667rem;
    width: 2.13333rem;
    height: 2.13333rem;
    border: none;
    border-radius: 50%;
    background: rgba(43, 38, 34, 0.55);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    transition: background 0.15s;
}
.gallery-zoom:hover { background: rgba(43, 38, 34, 0.8); }

.gallery-counter {
    position: absolute;
    bottom: 0.66667rem;
    right: 0.66667rem;
    background: rgba(43, 38, 34, 0.6);
    color: #fff;
    font-size: 0.74rem;
    font-weight: 600;
    padding: 0.2rem 0.66667rem;
    border-radius: 66.6rem;
}

.gallery-empty { margin-bottom: 0.8rem; }
.gallery-empty-img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--radius);
}
.gallery-empty span {
    display: block;
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.85rem;
    margin-top: 0.5rem;
}

.gallery-thumbs {
    display: flex;
    gap: 0.53333rem;
    overflow-x: auto;
    padding-bottom: 0.26667rem;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
}
.gallery-thumbs::-webkit-scrollbar { height: 0.4rem; }
.gallery-thumbs::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 0.53333rem; }

.gallery-thumb {
    flex: 0 0 auto;
    width: 4.13333rem;
    height: 4.13333rem;
    border-radius: var(--radius);
    overflow: hidden;
    border: 0.13333rem solid transparent;
    padding: 0;
    background: none;
    cursor: pointer;
    scroll-snap-align: center;
    transition: border-color 0.15s, opacity 0.15s;
    opacity: 0.7;
}

.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-thumb:hover { opacity: 1; }
.gallery-thumb.active { border-color: var(--red); opacity: 1; }

.gallery-upload {
    display: grid;
    gap: 0.66667rem;
    padding: 0.93333rem 0 0;
    margin-top: 0.13333rem;
    border-top: 0.06667rem solid var(--border);
}

.gallery-upload-zone {
    display: grid;
    grid-template-columns: 2.8rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.8rem;
    width: 100%;
    padding: 0.86667rem;
    border: 0.06667rem dashed var(--border-strong);
    border-radius: var(--radius);
    background: linear-gradient(180deg, var(--paper), rgba(241, 235, 223, 0.42));
    cursor: pointer;
    margin: 0;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.gallery-upload-zone:hover,
.gallery-upload.is-ready .gallery-upload-zone {
    border-color: var(--red-accent);
    background: var(--red-soft);
}

.gallery-upload-icon {
    width: 2.8rem;
    height: 2.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0.06667rem solid var(--border);
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--red);
    font-size: 1.05rem;
}

.gallery-upload-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.13333rem;
}

.gallery-upload-copy strong {
    color: var(--text);
    font-size: 0.92rem;
    line-height: 1.25;
}

.gallery-upload-copy small {
    color: var(--text-muted);
    font-size: 0.76rem;
    line-height: 1.35;
}

.gallery-upload-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.13333rem;
    padding: 0.4rem 0.8rem;
    border: 0.06667rem solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--text);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.gallery-upload-zone:hover .gallery-upload-cta,
.gallery-upload.is-ready .gallery-upload-cta {
    border-color: var(--red);
    color: var(--red);
}

.gallery-upload-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.66667rem;
    flex-wrap: wrap;
}

.gallery-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.46667rem;
    padding: 0.53333rem 1rem;
    border: 0.06667rem solid var(--border-strong);
    border-radius: var(--radius);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    cursor: pointer;
    color: var(--text);
    margin: 0;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.gallery-upload-btn:hover { border-color: var(--red); color: var(--red); background: var(--red-soft); }

.gallery-upload-btn-wide {
    width: 100%;
    justify-content: center;
}

.gallery-upload-hint { font-size: 0.78rem; color: var(--text-muted); font-style: italic; }

.gallery-manage-block {
    margin-top: 0.93333rem;
    padding-top: 0.86667rem;
    border-top: 0.06667rem solid var(--border);
}

.gallery-manage-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.66667rem;
    margin-bottom: 0.6rem;
}

.gallery-manage-head span {
    color: var(--text);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.gallery-manage-head small {
    color: var(--text-muted);
    font-size: 0.76rem;
    font-style: italic;
}

.gallery-manage {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.33333rem, 1fr));
    gap: 0.66667rem;
    margin-top: 0;
}

.gallery-manage-item {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--paper-deep);
    aspect-ratio: 4 / 3;
    margin: 0;
    border: 0.06667rem solid var(--border);
    transition: border-color 0.15s;
}

.gallery-manage-item.is-principale {
    border-color: var(--red);
    box-shadow: 0 0 0 0.06667rem var(--red);
}

.gallery-manage-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Badge "Principale" en coin */
.gallery-badge {
    position: absolute;
    top: 0.4rem;
    left: 0.4rem;
    display: inline-flex;
    align-items: center;
    gap: 0.26667rem;
    background: var(--red);
    color: #FFFDF8;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.2rem 0.53333rem;
    border-radius: 66.6rem;
    box-shadow: 0 0.06667rem 0.26667rem rgba(43, 38, 34, 0.3);
}

.gallery-badge i { font-size: 0.62rem; }

/* Actions en pastilles, révélées au survol (toujours visibles au tactile) */
.gallery-item-actions {
    position: absolute;
    bottom: 0.4rem;
    right: 0.4rem;
    display: flex;
    gap: 0.33333rem;
    opacity: 0;
    transform: translateY(0.2rem);
    transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
}

.gallery-manage-item:hover .gallery-item-actions,
.gallery-manage-item:focus-within .gallery-item-actions {
    opacity: 1;
    transform: translateY(0);
}

.gallery-act {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: none;
    background: rgba(255, 253, 248, 0.92);
    color: var(--text);
    cursor: pointer;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0.13333rem 0.4rem rgba(43, 38, 34, 0.25);
    transition: background 0.15s, color 0.15s, transform 0.12s;
}

.gallery-act:hover { background: #FFF; transform: scale(1.08); }
.gallery-act:active { transform: scale(0.96); }
.gallery-act i { margin: 0; }

.gallery-act-danger:hover { background: var(--danger); color: #FFFDF8; }

/* Toujours visibles sur écrans tactiles (pas de survol) */
@media (hover: none) {
    .gallery-item-actions { opacity: 1; transform: none; }
}

/* Vignette sur les cartes de la liste */
/* Photo encadrée en creux dans la carte (design B — fiche agence). */
.prop-card-cover {
    display: block;
    margin: 0 0 0.26667rem;
    border-radius: 0.9rem;
    overflow: hidden;
    position: relative;
    background: var(--paper-deep);
    box-shadow: var(--nm-inset-sm);
}

.prop-card-cover img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform 0.4s var(--ease);
}

.prop-card:hover .prop-card-cover img { transform: scale(1.04); }

.prop-card-count {
    position: absolute;
    bottom: 0.53333rem;
    right: 0.53333rem;
    background: rgba(43, 38, 34, 0.72);
    color: #FFF;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.13333rem 0.53333rem;
    border-radius: 66.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.26667rem;
}

/* ============ Lightbox ============ */

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(30, 26, 22, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.66667rem;
    animation: backdrop-in 0.18s ease;
}

.lightbox[hidden] { display: none; }

.lightbox-img {
    max-width: 92vw;
    max-height: 88vh;
    object-fit: contain;
    border-radius: var(--radius);
    box-shadow: 0 0.8rem 3.33333rem rgba(0, 0, 0, 0.5);
}

.lightbox-close,
.lightbox-nav {
    position: absolute;
    background: rgba(43, 38, 34, 0.55);
    border: 0.06667rem solid rgba(255, 253, 248, 0.18);
    color: #FFFDF8;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(0.26667rem);
    -webkit-backdrop-filter: blur(0.26667rem);
    transition: background 0.15s, transform 0.12s, border-color 0.15s;
}

.lightbox-close i,
.lightbox-nav i { line-height: 1; }

.lightbox-close {
    top: 1.46667rem;
    right: 1.6rem;
    width: 2.93333rem;
    height: 2.93333rem;
    font-size: 1.15rem;
}

.lightbox-nav {
    top: 50%;
    transform: translateY(-50%);
    width: 3.33333rem;
    height: 3.33333rem;
    font-size: 1.15rem;
}

.lightbox-prev { left: 1.46667rem; }
.lightbox-next { right: 1.46667rem; }

.lightbox-close:hover,
.lightbox-nav:hover {
    background: rgba(43, 38, 34, 0.85);
    border-color: rgba(255, 253, 248, 0.4);
}

.lightbox-nav:hover { transform: translateY(-50%) scale(1.06); }
.lightbox-close:active,
.lightbox-nav:active { transform: translateY(-50%) scale(0.96); }
.lightbox-close:active { transform: scale(0.96); }

@media (max-width: 768px) {
    .lightbox-nav { width: 2.93333rem; height: 2.93333rem; }
    .lightbox-prev { left: 0.66667rem; }
    .lightbox-next { right: 0.66667rem; }
    .lightbox-close { top: 0.8rem; right: 0.93333rem; }
}

/* ============ Fiches ============ */

.detail-list {
    display: grid;
    grid-template-columns: 9.2rem 1fr;
    gap: 0.66667rem 0.93333rem;
    margin: 0;
}

.detail-list dt {
    color: var(--text-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
    padding-top: 0.13333rem;
}

.detail-list dt i {
    color: var(--red-accent);
    margin-right: 0.4rem;
    width: 0.93333rem;
    text-align: center;
    font-size: 0.9em;
}

.detail-list dd { margin: 0; font-size: 0.93rem; }

.detail-price {
    font-family: var(--sans);
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--red-ink);
    font-size: 1rem !important;
}

.section-subtitle {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin: 1.46667rem 0 0.53333rem;
    padding-bottom: 0.33333rem;
    border-bottom: 0.06667rem solid var(--border);
}

.text-block { margin: 0; font-size: 0.92rem; }

.text-notes {
    background: var(--paper-deep);
    border: 0.06667rem solid var(--border);
    border-radius: var(--radius);
    padding: 0.73333rem 0.86667rem;
    font-style: italic;
}

.fiche-col {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    min-width: 0;
}

/* ============ Liaisons client-bien ============ */

.link-list { display: flex; flex-direction: column; gap: 0.8rem; }

/* Nom cliquable dans les tables de liaisons (contact ↔ bien). */
.link-item-name {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 1.02rem;
}

/* ============ Formulaires ============ */

.form-group { margin-bottom: 1.06667rem; flex: 1; }

.form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.06667rem;
    row-gap: 0;
}

.form-row .form-group { min-width: 0; }

/* ── Modal bien : formulaire en sections titrees (direction A) ── */
.prop-form-section + .prop-form-section {
    margin-top: 1.06667rem;
    padding-top: 1.06667rem;
    border-top: 1px solid var(--border);
}
.prop-form-section-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--red-ink);
    margin-bottom: 0.8rem;
}
.prop-form-section-head i { font-size: 0.9em; }
/* Dernier champ d'une section : pas de marge basse, le padding de section espace. */
.prop-form-section > .form-group:last-child,
.prop-form-section > .form-row:last-child .form-group { margin-bottom: 0; }

label {
    display: block;
    font-size: 0.7rem;
    margin-bottom: 0.4rem;
    color: var(--text-muted);
}

/* ------------------------------------------------------------------
   Cases à cocher
   ------------------------------------------------------------------
   Le navigateur dessinait la sienne : un carré système gris, étranger au
   reste de l'app, et minuscule à côté de son libellé.

   `.set-switch` est exclue : c'est déjà un interrupteur à glissière, dessiné
   par ses propres règles.

   Les cases masquées derrière un contrôle sur mesure (`.assignee-opt input`,
   `.prop-map-switch input`) posent `width: 0; height: 0`, mais leurs règles
   sont écrites PLUS HAUT dans la feuille : à spécificité égale, c'est ce bloc
   qui l'emportait et leur rendait une boîte de 18 px. Invisible (opacity 0)
   mais cliquable, donc capable d'intercepter un clic à côté du vrai contrôle.
   Elles sont réaffirmées juste après. */
input[type="checkbox"]:not(.set-switch) {
    appearance: none;
    -webkit-appearance: none;
    flex: none;
    width: 1.13333rem;
    height: 1.13333rem;
    margin: 0;
    border: 0.1rem solid var(--border-strong);
    border-radius: 0.3rem;
    background: var(--paper);
    cursor: pointer;
    position: relative;
    transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}
input[type="checkbox"]:not(.set-switch):hover { border-color: var(--red); }

/* La coche est tracée en CSS plutôt qu'en glyphe : pas de dépendance à une
   police d'icônes, et elle reste nette à toutes les tailles. */
input[type="checkbox"]:not(.set-switch)::after {
    content: "";
    position: absolute;
    top: 0.1rem;
    left: 0.33333rem;
    width: 0.26667rem;
    height: 0.53333rem;
    border: solid #FDF7F6;
    border-width: 0 0.13333rem 0.13333rem 0;
    transform: rotate(45deg) scale(0);
    transition: transform 0.12s var(--ease);
}
input[type="checkbox"]:not(.set-switch):checked {
    background: var(--red);
    border-color: var(--red);
}
input[type="checkbox"]:not(.set-switch):checked::after { transform: rotate(45deg) scale(1); }
input[type="checkbox"]:not(.set-switch):disabled { opacity: 0.5; cursor: not-allowed; }
input[type="checkbox"]:not(.set-switch):focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* Un libellé qui enveloppe sa case : les deux sur la même ligne de base, et
   tout le texte devient cliquable. C'est le gabarit des rôles d'un contact,
   des colonnes d'export et des assignations. */
label > input[type="checkbox"]:not(.set-switch) {
    vertical-align: -0.2rem;
    margin-right: 0.4rem;
}

/* Réaffirmation : ces deux cases sont le moteur d'un contrôle dessiné à côté
   d'elles (pastille d'assignation, interrupteur de carte). Elles ne doivent
   avoir ni taille, ni bordure, ni fond — sinon une boîte transparente traîne
   sur le contrôle et capte les clics. */
.assignee-opt input[type="checkbox"],
.prop-map-switch input[type="checkbox"] {
    width: 0;
    height: 0;
    margin: 0;
    border: 0;
    background: none;
}
.assignee-opt input[type="checkbox"]::after,
.prop-map-switch input[type="checkbox"]::after { content: none; }

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="search"],
input[type="url"],
select,
textarea {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: 0.1rem solid var(--line-ink);
    border-radius: 0;
    font-size: 0.92rem;
    font-family: var(--sans);
    background: var(--paper);
    color: var(--text);
    transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

/* Le gris d'invite était à 2,35 sur la carte — illisible pour beaucoup, et
   c'est souvent lui qui porte le format attendu (« prenom@exemple.ch »,
   « 1950 »). L'italique suffit à le distinguer d'une valeur saisie, qui reste
   nettement plus sombre (--text). */
input::placeholder, textarea::placeholder { color: var(--text-muted); font-style: italic; }

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--red);
    box-shadow: 0 0 0 0.2rem rgba(185, 28, 28, 0.10);
}

textarea { resize: vertical; }

/* ============ Modales ============ */

.modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2.93333rem 1.06667rem;
    overflow-y: auto;
}

.modal[hidden] { display: none; }

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(43, 38, 34, 0.5);
    animation: backdrop-in 0.18s ease;
}

@keyframes backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.modal-dialog {
    position: relative;
    margin: auto;
    background: var(--paper);
    border: 0.1rem solid var(--line-ink);
    border-radius: 0;
    width: 92vw;
    max-width: 64rem;
    padding: 2rem 2.26667rem;
    box-shadow: 0 1.2rem 3.33333rem rgba(43, 38, 34, 0.22);
    animation: dialog-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dialog-in {
    from { opacity: 0; transform: translateY(0.8rem); }
    to   { opacity: 1; transform: translateY(0); }
}

.modal-lg { max-width: 45.33333rem; }

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.33333rem;
    padding-bottom: 0.93333rem;
    border-bottom: 0.1rem solid var(--line-ink);
}

.modal-header h2 { font-size: 1.35rem; font-weight: 700; }

.modal-close {
    background: none;
    border: none;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    color: var(--text-muted);
    padding: 0.33333rem 0.6rem;
    border-radius: var(--radius);
    transition: color 0.15s, background 0.15s;
}

.modal-close:hover { color: var(--red); background: var(--red-soft); }

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.66667rem;
    margin-top: 0.53333rem;
    padding-top: 1.06667rem;
    border-top: 0.06667rem solid var(--border);
}

body.modal-open { overflow: hidden; }

/* ============ Dialogue de confirmation ============ */

.confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 320;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.33333rem;
}

.confirm-modal[hidden] { display: none; }

.confirm-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(43, 38, 34, 0.5);
    animation: backdrop-in 0.18s ease;
}

.confirm-dialog {
    position: relative;
    background: var(--paper);
    border: 0.06667rem solid var(--border-strong);
    border-radius: 0.66667rem;
    width: 100%;
    max-width: 25.33333rem;
    padding: 1.73333rem 1.6rem 1.46667rem;
    text-align: center;
    box-shadow: 0 1.2rem 3.33333rem rgba(43, 38, 34, 0.28);
    animation: dialog-in 0.2s var(--ease);
}

.confirm-icon {
    width: 3.46667rem;
    height: 3.46667rem;
    margin: 0 auto 0.93333rem;
    border-radius: 50%;
    background: var(--danger-bg);
    color: var(--danger);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.confirm-msg {
    margin: 0 0 1.46667rem;
    font-size: 1rem;
    color: var(--text);
    line-height: 1.5;
}

.confirm-actions {
    display: flex;
    gap: 0.66667rem;
    justify-content: center;
}

.confirm-actions .btn { min-width: 8rem; }

@media (max-width: 640px) {
    .confirm-actions { flex-direction: column-reverse; }
    .confirm-actions .btn { width: 100%; }
}

/* ============ Pages auth (login / install) ============ */

.auth-body {
    background: var(--bg);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.33333rem;
    margin: 0;
    font-family: var(--sans);
    color: var(--text);
}

.auth-card {
    background: var(--paper);
    border: 0.06667rem solid var(--border-strong);
    border-radius: var(--radius);
    padding: 2.66667rem 2.26667rem 2.13333rem;
    width: 100%;
    max-width: 26.66667rem;
    box-shadow: 0 0.8rem 2.66667rem rgba(43, 38, 34, 0.10);
    animation: dialog-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.auth-logo-img {
    display: block;
    width: 8rem;
    height: auto;
    margin: 0 auto 0.8rem;
}

.auth-logo {
    font-family: var(--serif);
    font-size: 1.8rem;
    font-weight: 700;
    text-align: center;
    color: var(--text);
    margin-bottom: 0.26667rem;
}

.auth-logo .brand-key { color: var(--red); }

.auth-title {
    text-align: center;
    font-size: 1.3rem;
    margin-bottom: 0.93333rem;
}

.auth-subtitle {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.88rem;
    margin: 0 0 1.73333rem;
    font-style: italic;
    letter-spacing: 0.02em;
}

/* ============ Selects à icônes ============ */

.iselect { position: relative; }

.iselect-native {
    position: absolute;
    opacity: 0;
    width: 0.06667rem;
    height: 0.06667rem;
    pointer-events: none;
}

.iselect-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.8rem;
    border: 0.1rem solid var(--line-ink);
    border-radius: 0;
    background: var(--paper);
    color: var(--text);
    font-family: var(--sans);
    font-size: 0.92rem;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.iselect-btn:hover { border-color: var(--red); }

.iselect.open .iselect-btn {
    border-color: var(--red);
    box-shadow: 0 0 0 0.2rem rgba(185, 28, 28, 0.10);
}

.iselect-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.iselect-icon {
    width: 1.13333rem;
    text-align: center;
    color: var(--red);
    font-size: 0.9rem;
    flex-shrink: 0;
}

.iselect-caret {
    color: var(--text-muted);
    font-size: 0.72rem;
    transition: transform 0.2s var(--ease);
    flex-shrink: 0;
}

.iselect.open .iselect-caret { transform: rotate(180deg); }

.iselect-menu {
    position: absolute;
    top: calc(100% + 0.26667rem);
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--paper);
    border: 0.1rem solid var(--line-ink);
    border-radius: 0;
    box-shadow: 0 0.53333rem 1.73333rem rgba(43, 38, 34, 0.16);
    padding: 0.26667rem;
    max-height: 17.33333rem;
    overflow-y: auto;
    animation: iselect-in 0.14s var(--ease);
}

.iselect-search {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.53333rem;
    padding: 0.46667rem 0.6rem;
    margin-bottom: 0.2rem;
    background: var(--paper);
    border-bottom: 0.06667rem solid var(--border);
}

.iselect-search i {
    color: var(--red-accent);
    font-size: 0.78rem;
    width: 1rem;
    text-align: center;
    flex-shrink: 0;
}

.iselect-search input {
    width: 100%;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 0.26667rem 0;
    font-size: 0.86rem;
    font-family: var(--sans);
    color: var(--text);
}

.iselect-search input:focus {
    outline: none;
    box-shadow: none;
}

.iselect-empty {
    padding: 0.66667rem 0.73333rem;
    color: var(--text-muted);
    font-size: 0.86rem;
    font-style: italic;
}

@keyframes iselect-in {
    from { opacity: 0; transform: translateY(-0.26667rem); }
    to   { opacity: 1; transform: translateY(0); }
}

.iselect-opt {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.66667rem;
    padding: 0.6rem 0.73333rem;
    border: none;
    background: none;
    border-radius: 0;
    font-family: var(--sans);
    font-size: 0.9rem;
    color: var(--text);
    cursor: pointer;
    text-align: left;
    transition: background 0.12s;
}

.iselect-opt:hover { background: var(--red-soft); }

.iselect-opt.selected {
    background: var(--red-soft);
    color: var(--red-dark);
    font-weight: 600;
}

.iselect-opt .iselect-icon { color: var(--red-accent); }
.iselect-opt.selected .iselect-icon { color: var(--red); }

/* Icône dans les libellés de formulaire */
.form-group label i {
    color: var(--red-accent);
    margin-right: 0.33333rem;
    font-size: 0.82em;
    width: 0.93333rem;
    text-align: center;
}

/* ============ Icônes dans les badges ============ */

.badge::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 0.33333rem;
    font-size: 0.92em;
    display: inline-block;
}

.badge-prio-basse::before        { content: "\f107"; }
.badge-prio-moyenne::before      { content: "\f52c"; }
.badge-prio-urgente::before      { content: "\f06d"; }

.badge-statut-a_faire::before    { content: "\f192"; }
.badge-statut-en_cours::before   { content: "\f110"; }
.badge-statut-termine::before    { content: "\f058"; }

.badge-bien-disponible::before    { content: "\f058"; }
.badge-bien-visite_prevue::before { content: "\f783"; }
.badge-bien-offre_recue::before   { content: "\f4c0"; }
.badge-bien-vendu::before         { content: "\f084"; }
.badge-bien-archive::before       { content: "\f187"; }

.badge-client-nouveau::before       { content: "\f234"; }
.badge-client-a_rappeler::before    { content: "\f095"; }
.badge-client-visite_prevue::before { content: "\f783"; }
.badge-client-offre_faite::before   { content: "\f573"; }
.badge-client-perdu::before         { content: "\f506"; }
.badge-client-acheteur::before      { content: "\f2b5"; }

.badge-interet-faible::before { content: "\f76b"; }
.badge-interet-moyen::before  { content: "\f2c9"; }
.badge-interet-fort::before   { content: "\f06d"; }

.badge-etape-nouveau_contact::before { content: "\f234"; }
.badge-etape-interesse::before       { content: "\f06e"; }
.badge-etape-visite_prevue::before   { content: "\f783"; }
.badge-etape-offre_recue::before     { content: "\f4c0"; }
.badge-etape-negociation::before     { content: "\f24e"; }
.badge-etape-vendu::before           { content: "\f084"; }
.badge-etape-perdu::before           { content: "\f00d"; }

.badge-type::before   { content: "\f02b"; }
.badge-danger::before { content: "\f071"; }
.badge-vous::before   { content: "\f007"; }
.badge-vous { background: var(--red-soft); color: var(--red); border-color: var(--red-border); }

/* Rôles utilisateurs (l'icône est portée par un <i> explicite, pas ::before) */
/* Sur la pastille rouge pâle, le rouge de marque tombe à 3,86. */
.badge-role-admin { background: var(--red-soft); color: var(--red-ink); border-color: var(--red-border); }
.badge-role-agent { background: var(--paper-deep); color: var(--text-muted); border-color: var(--border); }
.badge-role-admin i, .badge-role-agent i { margin-right: 0.4em; }

/* Sélecteur de rôle inline dans la table utilisateurs */
.role-form { display: inline-flex; }
.role-select {
    padding: 0.3rem 0.55rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border);
    background: var(--paper);
    color: var(--text);
    font-size: 0.85rem;
    cursor: pointer;
}
.role-select:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }

/* ============ Utilisateurs — liste + panneau détail ============ */
.users-shell {
    display: grid;
    grid-template-columns: 17rem 1fr;
    gap: 1.2rem;
    align-items: start;
}

/* Avatar-initiales partagé (liste + détail) */
.user-avatar {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    overflow: hidden;
    font-family: var(--serif);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.01em;
}
.user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-avatar.is-admin { background: var(--red-soft); color: var(--red-ink); }
.user-avatar.is-agent { background: var(--paper-deep); color: var(--text-muted); }
.user-avatar-lg { width: 3.4rem; height: 3.4rem; font-size: 1.2rem; }

/* Colonne liste */
.users-list {
    background: var(--paper);
    border: 0.06667rem solid rgba(190, 196, 205, 0.4);
    border-radius: var(--nm-radius);
    box-shadow: var(--nm-shadow);
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.users-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.55rem 0.6rem;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    font-family: var(--sans);
    transition: background 0.14s var(--ease);
}
.users-row:hover { background: var(--paper-deep); text-decoration: none; }
.users-row.active { background: var(--red-soft); }
.users-row-body { display: flex; flex-direction: column; min-width: 0; }
.users-row-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.users-row-role {
    font-size: 0.68rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.users-row.active .users-row-role { color: var(--red-ink); }
.users-you { color: var(--red-ink); font-weight: 700; font-size: 0.82em; }
.users-row-add .users-row-name { color: var(--text-muted); font-weight: 600; }
.users-row-add:hover .users-row-name { color: var(--red); }
.users-avatar-add { background: var(--paper-deep); color: var(--red-ink); }

/* Panneau détail (creux, comme les zones inset) */
.users-detail {
    background: var(--paper-deep);
    border-radius: var(--nm-radius);
    box-shadow: var(--nm-inset-sm);
    padding: 1.6rem 1.75rem;
    min-height: 20rem;
}
.users-detail-head {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    margin-bottom: 1.5rem;
}
.users-detail-head h2 {
    font-family: var(--serif);
    font-size: 1.2rem;
    margin: 0 0 0.3rem;
    letter-spacing: -0.01em;
}
.users-detail-sub {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.84rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.2rem;
}
.users-detail-section { margin-bottom: 1.5rem; }
.users-detail-section:last-child { margin-bottom: 0; }
.users-detail-section h3 {
    font-family: var(--sans);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--text-muted);
    font-weight: 600;
    margin: 0 0 0.75rem;
}
.users-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0;
    border-bottom: 0.06667rem solid rgba(190, 196, 205, 0.45);
    font-size: 0.88rem;
}
.users-info-row:last-child { border-bottom: 0; }
.users-info-row .k { color: var(--text-muted); }
.users-info-row .v { font-weight: 600; color: var(--text); display: inline-flex; align-items: center; gap: 0.4rem; }
.users-info-row .v.is-on { color: var(--success); }
.users-info-row .v.is-off { color: var(--text-muted); }
.users-detail-hint { margin: 0; color: var(--text-muted); font-size: 0.84rem; font-style: italic; }
.users-detail-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }

@media (max-width: 768px) {
    .users-shell { grid-template-columns: 1fr; }
    .users-detail { padding: 1.3rem 1.2rem; }
}

/* ============ Mon compte / Sécurité ============ */
/* Direction C : profil hero (collant) à gauche, colonne sécurité à droite. */
.account-shell {
    display: grid;
    grid-template-columns: 19rem minmax(0, 1fr);
    gap: 1.3rem;
    align-items: start;
    max-width: 62rem;
}
.account-shell .card h2 { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.9rem; font-size: 1.05rem; }
.account-shell .card h2 i { color: var(--red); }

.account-hero {
    position: sticky;
    top: 1.25rem;
    background: var(--paper);
    border: 0.06667rem solid rgba(190, 196, 205, 0.4);
    border-radius: var(--nm-radius);
    box-shadow: var(--nm-shadow);
    padding: 1.6rem 1.4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.55rem;
}
.account-col { display: flex; flex-direction: column; gap: 1.2rem; }

.account-avatar {
    width: 3.2rem; height: 3.2rem; flex: 0 0 auto;
    display: grid; place-items: center; overflow: hidden;
    border-radius: 50%; background: var(--red-soft); color: var(--red); font-size: 1.3rem;
}
.account-avatar img { width: 100%; height: 100%; object-fit: cover; }
.account-avatar-hero { width: 5.6rem; height: 5.6rem; font-size: 2.1rem; box-shadow: var(--nm-shadow); margin-bottom: 0.2rem; }
.account-avatar-actions { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 0.6rem; flex-wrap: wrap; }
.account-avatar-hint { margin: 0.3rem 0 0; color: var(--text-muted); font-size: 0.76rem; }
.account-name { font-family: var(--serif); margin: 0; font-size: 1.25rem; letter-spacing: -0.01em; }
.account-uname { margin: 0; color: var(--text-muted); font-size: 0.88rem; display: flex; align-items: center; gap: 0.35rem; }

/* Récap sécurité dans le hero */
.account-stats {
    width: 100%;
    margin: 0.9rem 0 0;
    padding-top: 1rem;
    border-top: 0.06667rem solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.account-stat { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.account-stat dt { margin: 0; color: var(--text-muted); font-size: 0.82rem; }
.account-stat dd { margin: 0; font-weight: 600; font-size: 0.84rem; display: inline-flex; align-items: center; gap: 0.35rem; }
.account-stat dd.is-on { color: var(--success); }
.account-stat dd.is-on i { color: var(--success); }
.account-stat dd.is-off { color: var(--text-muted); }

@media (max-width: 1024px) {
    .account-shell { grid-template-columns: 1fr; }
    .account-hero { position: static; }
}

.account-form .form-group { margin-bottom: 0.9rem; }
.account-2fa-status { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; margin: 0 0 0.4rem; }
.account-2fa-status.is-on { color: var(--success); }
.account-2fa-status.is-on i { color: var(--success); }
.account-2fa-actions { display: flex; flex-direction: column; gap: 0.9rem; margin-top: 0.8rem; }
.account-inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.account-inline-form input[type="text"] {
    flex: 0 0 17rem; max-width: 100%; padding: 0.5rem 0.7rem; border-radius: 0.6rem;
    border: 1px solid var(--border); background: var(--paper);
    font-size: 0.95rem; letter-spacing: 0.08em;
}
.btn-text { background: none; border: none; color: var(--text-muted); padding: 0.4rem 0.2rem; cursor: pointer; }
.btn-text:hover { color: var(--red); text-decoration: underline; }

/* Configuration TOTP */
.totp-setup {
    display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: start;
    background: var(--paper-deep); border: 0; box-shadow: var(--nm-inset-sm);
    border-radius: var(--nm-radius); padding: 1.1rem 1.2rem; margin: 0.5rem 0 1rem;
}
/* Vignette QR : fond blanc dédié (le QR doit rester noir sur blanc pour le scan) */
.totp-qr {
    flex: 0 0 auto; width: 10.5rem; height: 10.5rem;
    display: grid; place-items: center;
    background: #fff; border-radius: 0.7rem; padding: 0.5rem;
    box-shadow: var(--nm-shadow-sm);
}
.totp-qr svg { display: block; width: 100%; height: 100%; }
/* 2,33 sur la carte, pour le texte qu'on lit précisément quand le code QR ne
   s'affiche pas — c'est-à-dire au pire moment. */
.totp-qr-fallback { color: var(--text-muted); font-size: 0.78rem; text-align: center; }
.totp-manual { display: flex; flex-direction: column; gap: 0.7rem; min-width: 0; }
.totp-manual-lead { margin: 0; color: var(--text-muted); font-size: 0.82rem; font-style: italic; }
.totp-field { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.totp-label { flex: 0 0 9rem; color: var(--text-muted); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; }
.totp-field code { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 0.95rem; }
.totp-key { font-size: 1.05rem; font-weight: 600; letter-spacing: 0.12em; color: var(--red-ink); }
.totp-confirm { margin-bottom: 0.6rem; }

@media (max-width: 640px) {
    .totp-setup { grid-template-columns: 1fr; justify-items: center; }
    .totp-manual { width: 100%; }
    .totp-label { flex-basis: 100%; }
}

/* Codes de secours */
.backup-code-list { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.5rem; }
.backup-code-list li { background: var(--paper-deep); border: 1px dashed var(--border); border-radius: 0.5rem; padding: 0.5rem 0.6rem; text-align: center; }
.backup-code-list code { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 1rem; letter-spacing: 0.06em; }
.account-backup-fresh { border: 2px solid var(--red-border); }

/* Lien "Mon compte" dans le pied de la barre latérale */
/* Lien « Mon compte » : mêmes états visuels que les items de nav (voir le bloc
   neomorphism plus bas pour le fond au survol). Ici : pas de souligné, gestion du
   pictogramme d'engrenage. */
.sidebar-user { text-decoration: none; color: inherit; border-radius: var(--radius); transition: background 0.15s, color 0.15s, box-shadow 0.15s; }
.sidebar-user:hover, .sidebar-user.active { text-decoration: none; }
.sidebar-user:hover .sidebar-user-name, .sidebar-user.active .sidebar-user-name { color: var(--red); }
.sidebar-user:hover .sidebar-user-cog, .sidebar-user.active .sidebar-user-cog { color: var(--red); opacity: 1; }
.sidebar-user-cog { margin-left: auto; opacity: 0.45; font-size: 0.8rem; transition: opacity 0.15s, color 0.15s; }

/* Étape 2FA au login */
.lg-2fa-hint { display: flex; gap: 0.5rem; font-size: 0.9rem; color: var(--text-muted); margin: 0 0 1rem; text-align: left; }
.lg-2fa-hint i { color: var(--red); margin-top: 0.15rem; }
#totp_code { letter-spacing: 0.25em; text-align: center; font-size: 1.2rem; }
.lg-link-btn { background: none; border: none; color: rgba(255,255,255,0.75); margin-top: 0.6rem; cursor: pointer; font-size: 0.85rem; width: 100%; }
.lg-link-btn:hover { color: #fff; text-decoration: underline; }

/* ============ Corbeille ============ */
.trash-group-title { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.8rem; font-size: 1rem; }
.trash-group-title i { color: var(--red); }
.trash-count { margin-left: auto; background: var(--paper-deep); color: var(--text-muted); border-radius: 1rem; padding: 0.1rem 0.6rem; font-size: 0.8rem; font-weight: 600; }
.trash-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.trash-row { display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem 0; border-top: 1px solid var(--border); flex-wrap: wrap; }
.trash-row:first-child { border-top: none; }
.trash-item-label { font-weight: 600; }
.trash-item-date { color: var(--text-muted); font-size: 0.82rem; }
.trash-row-actions { margin-left: auto; display: flex; gap: 0.4rem; }

/* ============ Accessibilité ============ */
/* Lien d'évitement : masqué jusqu'au focus clavier. */
.skip-link {
    position: fixed;
    top: -3rem;
    left: 0.5rem;
    z-index: 1000;
    background: var(--red);
    color: #fff;
    padding: 0.55rem 1rem;
    border-radius: 0 0 0.6rem 0.6rem;
    text-decoration: none;
    font-weight: 600;
    transition: top 0.15s ease;
}
.skip-link:focus { top: 0; outline: 2px solid #fff; outline-offset: -4px; }
#main-content:focus { outline: none; }
/* Focus visible cohérent sur les éléments interactifs au clavier. */
a:focus-visible,
button:focus-visible,
.nav-link:focus-visible,
.card-icon-btn:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* ============ Icônes Font Awesome ============ */

.nav-link i {
    width: 1.33333rem;
    text-align: center;
    margin-right: 0.73333rem;
    font-size: 0.88rem;
    opacity: 0.85;
}

.nav-link.active i { color: #fff; opacity: 1; }

.btn i { margin-right: 0.46667rem; font-size: 0.88em; }
.btn-sm i { margin-right: 0.33333rem; }

.card-header h2 i {
    color: var(--red-accent);
    margin-right: 0.66667rem;
    font-size: 0.75em;
    width: 1.33333rem;
    text-align: center;
    vertical-align: 0.13333rem;
}

.tag i { margin-right: 0.33333rem; color: var(--red); font-size: 0.72rem; }


.check-btn i { font-size: 0.7rem; }

.prop-card-visit i { margin-right: 0.33333rem; color: var(--red-accent); }

/* ============ Responsive ============ */

/* ---------- Tablette (iPad) : sidebar escamotée, contenu pleine largeur ---------- */
@media (max-width: 1024px) {
    .burger { display: block; }
    .topbar-logo { display: block; }

    .sidebar {
        width: min(82vw, 21.33333rem);
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 100;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        height: 100vh;
        height: 100dvh;
        box-shadow: 0.26667rem 0 1.6rem rgba(43, 38, 34, 0.15);
    }

    .sidebar.open { transform: translateX(0); }
    .sidebar-overlay.visible { display: block; }

    .main-wrapper { width: 100%; margin-left: 0; }

    .content { padding: 1.46667rem 1.46667rem 2.26667rem; }

    .planning-timegrid {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .ptg-row {
        grid-template-columns: 3.06667rem repeat(7, minmax(6.66667rem, 1fr));
        min-width: 52rem;
    }

    /* Cibles tactiles confortables */
    .btn-sm { padding: 0.46667rem 0.86667rem; }
    .filter-tab { padding: 0.6rem 1rem; }
    .nav-link { padding: 0.8rem 0.93333rem; }
}

@media (max-width: 1024px) {
}

/* ------------------------------------------------------------------
   Barre de navigation basse (téléphone)
   ------------------------------------------------------------------
   Masquée partout ailleurs : sur tablette et sur desktop, la barre latérale
   est déjà visible en permanence et une seconde navigation ferait doublon.
   Le rendu réel est dans la requête média ci-dessous. */
.tabbar { display: none; }

@media (max-width: 768px) {
    html { font-size: 13.5px; }
    body { overflow-x: hidden; }

    .content {
        padding: 0.93333rem 0.66667rem calc(2.26667rem + env(safe-area-inset-bottom));
        overflow-x: hidden;
    }
    /* Réserve la hauteur de la barre + l'encoche iOS, sinon la dernière ligne
       d'une liste se retrouve dessous, inatteignable.
       Conditionné à la présence réelle de la barre (`:has`) : RedKey Control
       partage cette feuille mais n'a pas de barre basse, et hériterait sinon
       d'un grand vide en bas de chaque écran. */
    body:has(.tabbar) .content {
        padding-bottom: calc(6.4rem + env(safe-area-inset-bottom));
    }

    .tabbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        /* 80 : sous le voile du menu latéral (90) et sous le tiroir lui-même
           (100). Quand on ouvre le burger, la barre passe donc derrière le
           voile toute seule — deux navigations actives en même temps
           donneraient deux « pages courantes » contradictoires. */
        z-index: 80;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        background: var(--paper);
        border-top: 0.06667rem solid var(--line-ink);
        box-shadow: 0 -0.26667rem 1.06667rem rgba(43, 38, 34, 0.08);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .tabbar-link {
        position: relative;   /* ancre le trait de l'onglet actif */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.2rem;
        /* 3.6rem ≈ 48 px : la cible tactile minimale recommandée. */
        min-height: 3.6rem;
        padding: 0.4rem 0.2rem;
        color: var(--text-muted);
        text-decoration: none;
        font-size: 0.68rem;
        font-weight: 600;
        line-height: 1.1;
        text-align: center;
    }
    .tabbar-link i { font-size: 1.1rem; }
    .tabbar-link.is-active { color: var(--red-ink); }
    /* Le trait au-dessus de l'onglet actif : repère de position, pas décor. */
    .tabbar-link.is-active::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 1.6rem;
        height: 0.16667rem;
        border-radius: 0 0 0.16667rem 0.16667rem;
        background: var(--red);
    }
    .tabbar-link:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
    .topbar {
        padding: 0 calc(0.8rem + env(safe-area-inset-right)) 0 calc(0.8rem + env(safe-area-inset-left));
        height: 3.73333rem;
        gap: 0.66667rem;
    }
    .topbar-title {
        font-size: 1.08rem;
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .card { padding: 1.06667rem 0.93333rem; }
    .card-header {
        /* Centré : le titre reste aligné avec les boutons carrés (2.4rem). */
        align-items: center;
        gap: 0.53333rem;
        margin-bottom: 0.8rem;
        padding-bottom: 0.73333rem;
    }
    .card-header h2 { font-size: 1.04rem; }

    .page-hint {
        font-size: 0.84rem;
        line-height: 1.55;
        margin-bottom: 0.93333rem;
    }

    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.66667rem; }
    .dash-task-row { grid-template-columns: 1fr; align-items: stretch; }
    .dash-task-title strong { white-space: normal; }

    /* Tables → cartes empilées */
    .table-card {
        background: transparent;
        border: none;
        padding: 0;
        overflow: visible;
    }

    .data-table thead { display: none; }

    .data-table, .data-table tbody, .data-table tr, .data-table td {
        display: block;
        width: 100%;
    }

    .data-table tbody {
        display: flex;
        flex-direction: column;
        gap: 0.66667rem;
    }

    .data-table tr {
        border: 0.06667rem solid var(--border);
        border-radius: var(--radius);
        padding: 0.86667rem 0.93333rem;
        background: var(--paper);
        box-shadow: none;
    }

    .data-table td {
        border: none;
        padding: 0.33333rem 0;
    }

    .data-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 0.13333rem;
        font-weight: 500;
        color: var(--text-muted);
        font-size: 0.68rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    /* Actions : carrés icône côte à côte (plus d'étirement pleine largeur). */
    .col-actions {
        text-align: left;
        padding-top: 0.66667rem;
        display: flex !important;
        flex-wrap: wrap;
        gap: 0.46667rem;
    }
    .col-check { width: auto; }

    .page-actions { flex-direction: column; align-items: stretch; }
    .page-actions .btn { width: 100%; }
    .page-actions > div { flex-direction: column; align-items: stretch; }
    .page-actions > .filter-tabs,
    .page-actions > .planning-nav-group {
        flex-direction: row;
        gap: 0.53333rem;
        align-items: center;
    }
    .page-actions > div .btn, .page-actions > div .inline-form { width: 100%; }
    .page-actions .inline-form .btn { width: 100%; }

    /* Planning : navigation + bouton créer sur une seule ligne. */
    .page-actions.planning-actions {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .filter-tabs {
        width: 100%;
        max-width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .filter-tabs::-webkit-scrollbar { display: none; }
    .filter-tab {
        flex: 1 0 auto;
        min-width: max-content;
        text-align: center;
        white-space: nowrap;
        padding: 0.53333rem 0.86667rem;
    }

    .planning-week-title {
        font-size: 1rem;
    }

    .task-toolbar-left { width: 100%; }

    .gallery-upload-zone {
        grid-template-columns: 2.53333rem minmax(0, 1fr);
        align-items: flex-start;
    }

    .gallery-upload-icon {
        width: 2.53333rem;
        height: 2.53333rem;
    }

    .gallery-upload-cta {
        grid-column: 1 / -1;
        width: 100%;
    }

    .gallery-upload-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .gallery-upload-footer .btn {
        width: 100%;
    }

    .planning-late-list {
        grid-template-columns: 1fr;
    }

    .modal {
        align-items: flex-start;
        padding: 0.53333rem;
    }
    .modal-dialog {
        padding: 1.33333rem 1.06667rem;
        max-height: calc(100dvh - 1.06667rem);
        overflow-y: auto;
    }
    /* Boutons (carrés icône) côte à côte à droite, comme sur desktop. */
    .modal-footer { flex-direction: row; justify-content: flex-end; }

    .auth-card { padding: 2rem 1.46667rem 1.73333rem; }
}

@media (max-width: 640px) {
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat-card { padding: 0.93333rem 0.86667rem 0.8rem; }
    .stat-value { font-size: 1.72rem; }
    .stat-icon { top: 0.86667rem; right: 0.86667rem; }

    .form-row {
        grid-template-columns: 1fr;
    }

    .modal {
        padding: 0;
    }

    .modal-dialog {
        width: 100%;
        max-width: 100%;
        min-height: 100dvh;
        max-height: 100dvh;
        border-left: none;
        border-right: none;
        border-radius: 0;
        box-shadow: none;
    }

    .prop-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 380px) {
    .stats-grid { grid-template-columns: minmax(0, 1fr); }
    .topbar-title { font-size: 1rem; }
    .filter-tab { padding-inline: 0.73333rem; }
}

/* ============ Responsive : filtres, carte & notifications ============ */

@media (max-width: 1024px) {
    /* Hauteur de carte fiable malgré la barre d'URL mobile (dvh) */
    .prop-map { height: calc(100dvh - 14rem); }
}

@media (max-width: 768px) {
    /* Barre de filtres biens */
    .prop-filters-body { padding: 0.26667rem 0.8rem 0.8rem; }
    .prop-filters-actions { flex-direction: column-reverse; gap: 0.53333rem; }
    .prop-filters-actions .btn { width: 100%; }

    /* Toggle Liste / Carte : pleine largeur, boutons égaux */
    .prop-view-toggle { width: 100%; }
    .prop-view-toggle button { flex: 1; justify-content: center; padding: 0.66667rem; }

    /* Page Notifications : boutons pleine largeur */
    .notif-device-actions { flex-direction: column; }
    .notif-device-actions .btn { width: 100%; text-align: center; }
}

@media (max-width: 640px) {
    /* Filtres en une seule colonne (les fourchettes min–max respirent) */
    .prop-filters-grid { grid-template-columns: 1fr; }

    /* Mini-carte du formulaire un peu plus basse */
    .addr-mini-map { height: 11.33333rem; }

    /* Légende de carte horizontale et compacte */
    .prop-map-legend {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.26667rem 0.8rem;
        max-width: 78vw;
    }
}

/* ============ Chargement : barre de nav + shimmer images ============ */

/* Barre de progression fine en haut, pendant chaque navigation. */
#rk-nav-progress {
    position: fixed;
    top: 0; left: 0;
    height: 0.2rem;
    width: 0;
    background: var(--red);
    box-shadow: 0 0 0.53333rem rgba(192, 57, 43, 0.5);
    border-radius: 0 0.2rem 0.2rem 0;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: width 0.2s var(--ease), opacity 0.3s var(--ease);
}
#rk-nav-progress.is-active { opacity: 1; }

/* Shimmer derrière les images le temps qu'elles chargent (photos réseau). */
@keyframes rk-sk-shimmer {
    0%   { background-position: -450px 0; }
    100% { background-position: 450px 0; }
}
.rk-img-loading {
    background-color: var(--paper-deep);
    background-image: linear-gradient(90deg, var(--paper-deep) 0, var(--paper) 60px, var(--paper-deep) 120px);
    background-size: 450px 100%;
    animation: rk-sk-shimmer 1.25s linear infinite;
}
.rk-img-loading img { opacity: 0; }
img.rk-img-ready { opacity: 1; transition: opacity 0.35s var(--ease); }
@media (prefers-reduced-motion: reduce) {
    .rk-img-loading { animation: none; }
    img.rk-img-ready { transition: none; }
}

/* ============ Transitions de page & apparition ============ */

/* Transition entre pages (navigation same-origin) — Chrome/Brave/Edge.
   Fallback silencieux sur les navigateurs non compatibles. */
@view-transition { navigation: auto; }

/* ⚠ FONDU SEUL, JAMAIS DE DÉPLACEMENT.
   Pendant la transition, le navigateur affiche les deux pages superposées :
   l'ancienne dessous, la nouvelle dessus. Un fondu croisé pur passe inaperçu.
   Mais la nouvelle page était aussi décalée de 8 px vers le bas : les deux
   textes se voyaient donc en même temps, à 8 px d'écart, pendant 170 ms.
   D'où l'impression que deux pages se chargeaient ensemble — flagrant sur
   Biens et Contacts, où l'écran est dense, invisible sur le tableau de bord.

   `plus-lighter` (le mélange par défaut du navigateur) est conservé : c'est lui
   qui rend un fondu croisé à luminosité constante. Le garder n'a de sens que
   parce qu'on est revenu à un vrai fondu croisé, sans transformation. */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 150ms;
    animation-timing-function: var(--ease);
}
::view-transition-old(root) { animation-name: rk-page-out; }
::view-transition-new(root) { animation-name: rk-page-in; }

@keyframes rk-page-out {
    to { opacity: 0; }
}
@keyframes rk-page-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Apparition douce des blocs au chargement */
@keyframes rk-fade-up {
    from { opacity: 0; transform: translateY(0.66667rem); }
    to   { opacity: 1; transform: none; }
}

/* Entrée douce réservée aux tuiles du tableau de bord (compteurs).
   Les .card génériques n'animent plus à chaque navigation : le contenu
   apparaît instantanément sous le crossfade de page → navigation plus nette. */
.stat-card {
    animation: rk-fade-up 180ms var(--ease) both;
}

/* Léger décalage en cascade sur les compteurs du tableau de bord */
.stats-grid .stat-card:nth-child(1) { animation-delay: 0ms; }
.stats-grid .stat-card:nth-child(2) { animation-delay: 45ms; }
.stats-grid .stat-card:nth-child(3) { animation-delay: 90ms; }
.stats-grid .stat-card:nth-child(4) { animation-delay: 135ms; }
.stats-grid .stat-card:nth-child(5) { animation-delay: 180ms; }

/* Réduction des animations si demandé par l'OS */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0ms !important;
        transition-duration: 0.01ms !important;
    }
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}

/* ---------- Pagination ---------- */
.list-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-top: 1.06667rem;
    flex-wrap: wrap;
}
.list-count { color: var(--text-muted); font-size: 0.82rem; }
.pagination { display: inline-flex; align-items: center; gap: 0.53333rem; margin-left: auto; }
.page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.26667rem;
    height: 2.26667rem;
    border: 0.06667rem solid var(--border-strong);
    border-radius: var(--radius);
    color: var(--text);
    background: transparent;
    text-decoration: none;
    transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background 0.2s var(--ease);
}
.page-btn:hover { border-color: var(--red); color: var(--red); background: var(--red-soft); text-decoration: none; }
.page-btn.is-disabled { opacity: 0.4; pointer-events: none; }
.page-info { color: var(--text-muted); font-size: 0.82rem; min-width: 6.13333rem; text-align: center; }

/* ---------- Page de connexion (layout « centré encadré ») ---------- */
.auth-body:has(.lg-shell) { display: block; padding: 0; }
.lg-shell {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
}
.lg-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.93333rem;
    padding: 1.06667rem 1.73333rem;
    border-bottom: 0.06667rem solid var(--border);
}
.lg-wm { font-family: var(--serif); font-size: 1.3rem; color: var(--text); line-height: 1; }
.lg-wm .k { color: var(--red); }
.lg-date { font-size: 0.78rem; color: var(--text-muted); }

.lg-center {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.66667rem 1.46667rem;
    overflow: hidden;
}
.lg-card {
    position: relative;
    width: 100%;
    max-width: 22rem;
    animation: dialog-in 0.35s var(--ease);
}

/* En-tête de plaque : logo + wordmark à gauche, étiquette à droite, filet dessous */
.lg-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 1.2rem 1.6rem;
    border-bottom: 0.06667rem solid var(--line-ink);
}
.lg-brand {
    font-family: var(--serif);
    font-size: 1.35rem;
    color: var(--text);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}
.lg-brand .k { color: var(--red); }
.lg-logo { width: 1.6rem; height: 1.6rem; display: block; }
.lg-eyebrow {
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--text-muted);
}
.lg-body { padding: 1.4rem 1.6rem 1.6rem; }
.lg-sub { font-size: 0.82rem; color: var(--text-muted); margin: 0 0 1.4rem; }

/* 2FA : 6 cases creusées, chiffres serif */
.lg-cells { display: flex; gap: 0.5rem; justify-content: center; }
.lg-cell {
    width: 2.6rem;
    height: 3.1rem;
    text-align: center;
    border: 0.06667rem solid var(--border);
    border-radius: 0.6rem;
    background: #FFFFFF;
    box-shadow: none;
    font-family: var(--serif);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text);
    outline: none;
    padding: 0;
}
.lg-cell:focus { border-color: var(--red); box-shadow: 0 0 0 0.2rem rgba(192, 57, 43, 0.12); }
.lg-link-btn {
    border: none;
    background: none;
    color: var(--red-ink);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    align-self: center;
}
.lg-link-btn:hover { text-decoration: underline; }

/* Lien de repli sous un formulaire d'authentification (« Mot de passe oublié ? »,
   « Retour à la connexion »). `lg-link-btn` seul est un bouton en ligne serré ;
   ici on veut un lien centré, aéré, qui ne se confond pas avec le bouton
   principal — d'où la couleur discrète et l'icône optionnelle. */
.lg-link-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 1rem;
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 500;
}
.lg-link-back:hover { color: var(--red-ink); text-decoration: underline; }

/* Paragraphe d'aide sous un message d'état : plus long qu'un `lg-sub`, il doit
   rester lisible sans attirer l'œil avant le bouton d'action. */
.lg-help {
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--text-muted);
    margin: 1rem 0 0;
}
.lg-help + .lg-btn,
.lg-help + .btn { margin-top: 1.2rem; }

/* Règle de saisie attachée à un champ (longueur minimale du mot de passe). */
.lg-hint { font-size: 0.72rem; color: var(--text-muted); margin: 0.46667rem 0 0; }

.lg-actions { display: flex; gap: 0.6rem; }
.lg-actions .lg-btn { flex: 1; margin-top: 0; }
.lg-cancel { white-space: nowrap; }

.lg-form { display: flex; flex-direction: column; gap: 1.46667rem; }
.lg-fld label {
    display: block;
    font-size: 0.68rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 700;
    margin-bottom: 0.46667rem;
}
.lg-ipt { position: relative; display: block; }
.lg-ipt input {
    width: 100%;
    border: none;
    border-bottom: 0.1rem solid var(--border-strong);
    border-radius: 0;
    background: transparent;
    font-family: var(--sans);
    font-size: 1rem;
    color: var(--text);
    padding: 0.4rem 2.26667rem 0.6rem 0.13333rem;
    outline: none;
    box-shadow: none;
    transition: border-color 0.2s var(--ease);
}
.lg-ipt input:focus { border-color: var(--red); box-shadow: none; }
.lg-eye {
    position: absolute;
    right: 0;
    top: 0.13333rem;
    width: 2rem;
    height: 2rem;
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lg-eye:hover { color: var(--red); }
.lg-caps { font-size: 0.72rem; color: var(--warning); margin: 0.46667rem 0 0; display: none; }
.lg-caps.on { display: block; }
.lg-btn { margin-top: 0.53333rem; }
.lg-btn[disabled] { opacity: 0.75; cursor: default; }
.lg-form .flash { margin-bottom: 0.26667rem; }

.lg-chips {
    display: flex;
    gap: 0.66667rem;
    justify-content: center;
    flex-wrap: wrap;
    padding: 1.06667rem 1.33333rem 0.53333rem;
    border-top: 0.06667rem solid var(--border);
}
.lg-chip {
    display: flex;
    align-items: center;
    gap: 0.46667rem;
    font-size: 0.76rem;
    color: var(--text-muted);
    background: var(--paper);
    border: 0.06667rem solid var(--border);
    border-radius: 66.6rem;
    padding: 0.4rem 0.8rem;
}
.lg-chip i { color: var(--red); font-size: 0.8rem; }
.lg-foot { text-align: center; font-size: 0.7rem; color: var(--text-muted); letter-spacing: 0.04em; padding: 0.66667rem 0 1.06667rem; }

.lg-shake { animation: lg-shake 0.42s var(--ease); }
@keyframes lg-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-0.46667rem); }
    40%, 80% { transform: translateX(0.46667rem); }
}
@media (max-width: 640px) {
    .lg-top { padding: 0.93333rem 1.2rem; }
    .lg-date { font-size: 0.72rem; }
    .lg-head, .lg-body { padding-inline: 1.2rem; }
    .lg-cell { width: 2.3rem; height: 2.8rem; }
}
@media (prefers-reduced-motion: reduce) {
    .lg-card, .lg-shake { animation: none; }
}

/* ════════════════════════════════════════════════════════════
   COUCHE NEOMORPHISM — branche feat/neomorphism
   Reskin « soft UI » posé par-dessus la structure existante.
   N'agit que sur l'apparence (fond, relief, arrondi, couleur) :
   la mise en page et les media-queries mobiles restent intactes.
   Retour arrière : git checkout main.
   ════════════════════════════════════════════════════════════ */

body { background: var(--bg); }

/* Titres Poppins (via --serif) — léger resserrage */
h1, h2, h3, .stat-value, .sidebar-brand-text, .lg-brand { letter-spacing: -0.015em; }
::selection { background: rgba(192, 57, 43, 0.16); }

/* ── Cartes ──────────────────────────────────────────── */
.card {
    background: var(--paper);
    border: 0.06667rem solid rgba(190, 196, 205, 0.4);
    border-radius: var(--nm-radius);
    box-shadow: var(--nm-shadow);
}
.card-header { border-bottom: 0.06667rem solid rgba(190, 196, 205, 0.5); }
/* Bouton icône d'en-tête de carte */
.card-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    flex-shrink: 0;
    border: 0;
    border-radius: var(--radius);
    font-size: 0.95rem;
    cursor: pointer;
    transition: box-shadow 0.16s var(--ease), color 0.16s var(--ease), background 0.16s var(--ease);
}
.card-icon-btn i { margin: 0; }

/* Navigation (→) : relief léger, s'enfonce au clic (affordance nette) */
.card-icon-btn {
    background: var(--paper);
    color: var(--text);
    box-shadow: var(--nm-shadow-sm);
}
.card-icon-btn:hover { color: var(--red); text-decoration: none; }
.card-icon-btn:active { box-shadow: var(--nm-inset-sm); }

/* Création (+) : rouge plein, action primaire */
.card-icon-btn--create {
    background: var(--red);
    color: #FDF7F6;
    box-shadow: 0.26667rem 0.26667rem 0.53333rem var(--nm-dark), -0.26667rem -0.26667rem 0.53333rem var(--nm-light);
}
.card-icon-btn--create:hover { background: var(--red-hover); color: #FDF7F6; }
.card-icon-btn--create:active { box-shadow: var(--nm-inset-sm); }

/* Suppression : creux discret comme la navigation, rouge danger au survol */
.card-icon-btn--danger:hover { color: var(--danger); }

/* Le burger partage l'apparence des boutons d'icône, mais sa visibilité
   reste strictement responsive : sidebar fixe sur desktop, tiroir en dessous. */
.burger.card-icon-btn { display: none; }

@media (max-width: 1024px) {
    .burger.card-icon-btn {
        display: inline-flex;
        width: 2.93333rem;
        height: 2.93333rem;
    }
}

/* ============ Boutons unifiés — plaque douce, icône seule (style calendrier) ============
   Toute action = un bouton carré à icône. Le libellé reste dans le DOM (accessibilité +
   tooltip), masqué visuellement (font-size:0). Exception : bouton de connexion (.lg-btn). */
.btn:not(.lg-btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    font-size: 0;
    letter-spacing: 0;
    background: var(--paper);
    color: var(--text);
    box-shadow: var(--nm-shadow-sm);
}
.btn:not(.lg-btn) i { margin: 0 !important; font-size: 0.95rem; }
.btn:not(.lg-btn):hover { color: var(--red); background: var(--paper-deep); text-decoration: none; }
.btn:not(.lg-btn):active { transform: scale(0.95); }
.btn-sm:not(.lg-btn) { width: 2.13333rem; height: 2.13333rem; }
.btn-sm:not(.lg-btn) i { font-size: 0.82rem; }
.btn-primary:not(.lg-btn) {
    background: var(--red);
    color: #FDF7F6;
    box-shadow: 0.26667rem 0.26667rem 0.53333rem var(--nm-dark), -0.26667rem -0.26667rem 0.53333rem var(--nm-light);
}
.btn-primary:not(.lg-btn):hover { background: var(--red-hover); color: #FDF7F6; }
.btn-primary:not(.lg-btn):active { box-shadow: var(--nm-inset-sm); }
.btn-danger:not(.lg-btn) { color: var(--danger); background: var(--paper); box-shadow: var(--nm-shadow-sm); }
.btn-danger:not(.lg-btn):hover { color: #fff; background: var(--danger); }
.btn-block:not(.lg-btn) { width: 2.4rem; }

/* Exception au carré-icône : bouton avec libellé visible (cartes Biens). */
.btn.btn-labeled {
    width: auto;
    height: auto;
    padding: 0.6rem 1rem;
    font-size: 0.84rem;
    gap: 0.5rem;
    white-space: nowrap; /* le libellé ne wrappe jamais sur 2 lignes */
}
.btn.btn-labeled i { font-size: 0.9rem; }

/* Bouton push : rouge = à activer, vert = activé (état reflété par .is-on). */
.push-toggle.is-on:not(.lg-btn) {
    background: #1D9E75;
    color: #FDF7F6;
    box-shadow: 0.26667rem 0.26667rem 0.53333rem var(--nm-dark), -0.26667rem -0.26667rem 0.53333rem var(--nm-light);
}
.push-toggle.is-on:not(.lg-btn):hover { background: #178A65; color: #FDF7F6; }
.push-toggle.is-on:not(.lg-btn):active { box-shadow: var(--nm-inset-sm); }

/* ── Stats : tuiles flottantes (fin de la grille connectée) ── */
.stats-grid { gap: 1.2rem; border: 0; }
.stat-card {
    background: var(--paper);
    border: 0.06667rem solid rgba(190, 196, 205, 0.4);
    border-radius: var(--nm-radius);
    box-shadow: var(--nm-shadow);
    transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.stat-card:hover {
    background: var(--paper);
    box-shadow: var(--nm-shadow-lg);
    transform: translateY(-0.13333rem);
}
.stat-icon, .stat-alert .stat-icon { color: var(--border-strong); }
.stat-card:hover .stat-icon { color: var(--red); }

/* ── Boutons ─────────────────────────────────────────── */
.btn {
    border: 0;
    border-radius: var(--radius);
    transition: box-shadow 0.18s var(--ease), background 0.18s var(--ease), color 0.18s var(--ease);
}
.btn-primary {
    background: var(--red);
    color: #FDF7F6;
    box-shadow: 0.26667rem 0.26667rem 0.53333rem var(--nm-dark), -0.26667rem -0.26667rem 0.53333rem var(--nm-light);
}
.btn-primary:hover { background: var(--red-hover); }
.btn-outline, .btn-danger {
    background: var(--bg);
    box-shadow: var(--nm-shadow-sm);
}
.btn-outline:hover { background: var(--bg); color: var(--red); }
.btn-danger:hover  { background: var(--bg); color: var(--danger); }
.btn:active { transform: none; box-shadow: var(--nm-inset-sm); }

/* ── Champs : plats et lisibles (fini le creux gris-sur-gris) ──
   Fond blanc + bordure fine : le champ se détache de la plaque,
   l'œil trouve tout de suite où écrire. Focus = liseré rouge net. */
input[type="text"], input[type="password"], input[type="email"],
input[type="tel"], input[type="number"], input[type="date"],
input[type="time"], input[type="datetime-local"], input[type="search"],
input[type="url"], select, textarea {
    background: #FFFFFF;
    border: 0.06667rem solid var(--border);
    border-radius: var(--radius);
    box-shadow: none;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--red);
    box-shadow: 0 0 0 0.2rem rgba(192, 57, 43, 0.12);
    outline: none;
}
input::placeholder, textarea::placeholder { font-style: normal; }

/* ── Sidebar : panneau surélevé ──────────────────────── */
.sidebar {
    background: var(--bg);
    border-right: 0;
    box-shadow: 0.46667rem 0 1.46667rem rgba(190, 196, 205, 0.5);
    z-index: 50;
}
.sidebar-brand, .sidebar-footer { border-color: rgba(190, 196, 205, 0.5); }
.nav-link { border-radius: var(--radius); }
.nav-link:hover {
    background: var(--bg);
    color: var(--red);
    box-shadow: var(--nm-shadow-sm);
}
/* Rouge SOMBRE, et seulement ici : sur le creux de la barre latérale, le rouge
   de marque ne donne que 4,07 — sous le seuil AA, sur l'élément que l'on
   regarde le plus souvent de toute l'application. #9E2E22 monte à 5,48 sans
   changer la couleur perçue. Le rouge de marque reste partout ailleurs.
   (Une première règle .nav-link.active, blanc sur rouge, existe plus haut dans
   ce fichier ; c'est celle-ci qui l'emporte.) */
.nav-link.active {
    background: var(--paper-deep);
    color: var(--red-ink);
    box-shadow: var(--nm-inset-sm);
}
.nav-link.active i { color: var(--red-ink); }
.sidebar-user:hover, .sidebar-user.active {
    background: var(--bg);
    box-shadow: var(--nm-shadow-sm);
}
.sidebar-user-avatar {
    background: var(--paper-deep);
    border: 0;
    box-shadow: var(--nm-inset-sm);
    color: var(--red-ink);
}

/* ── Onglets / filtres : barre sans cadre, segment actif enfoncé ──
   Supprime le cadre sombre (box-shadow du conteneur) ET les
   séparateurs verticaux. Le segment sélectionné est « pressé »
   (inset), cohérent avec la nav active. Aucune ombre débordante
   → pas de rognage, scroll mobile intact. */
.filter-tabs {
    border: 0;
    box-shadow: none;
    background: transparent;
    gap: 0.4rem;
    padding: 0;
}
.filter-tab {
    border-radius: var(--radius);
    transition: box-shadow 0.16s var(--ease), color 0.16s var(--ease);
}
.filter-tab::before,
.filter-tab + .filter-tab::before { display: none !important; }
.filter-tab:hover:not(.active) { background: transparent; color: var(--red); }
.filter-tab.active {
    background: var(--paper-deep);
    color: var(--red);
    box-shadow: var(--nm-inset-sm);
}

/* ── Badges : pastilles douces « gravées » ───────────── */
.badge { border: 0; box-shadow: var(--nm-inset-sm); }

/* ── Chips / tags : puces surélevées ─────────────────── */
.tag {
    border: 0;
    border-radius: 66.6rem;
    background: var(--bg);
    box-shadow: var(--nm-shadow-sm);
}
.tag:hover { background: var(--bg); color: var(--red); }

/* ── Cartes de contenu (biens, listes) ─────── */
.prop-card {
    border: 0 !important;
    border-radius: var(--radius);
    background: var(--paper);
    box-shadow: var(--nm-shadow-sm);
}
.prop-card:hover { box-shadow: var(--nm-shadow); }

/* Listes du dashboard : lignes plates, séparateurs doux, titre encre */
.dash-list > li { border-bottom-color: rgba(190, 196, 205, 0.5); }
.dash-list > li:hover { background: transparent; }
.dash-task-list > li { padding: 0.93333rem 0.4rem; }

/* Biens récents : lignes plates cliquables, vignette + prix pill */
.dash-biens > li { display: block; border-bottom: 0.06667rem solid rgba(190, 196, 205, 0.5); padding: 0; }
.dash-biens > li:last-child { border-bottom: 0; }
.biens-row {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.73333rem 0.4rem;
    background: transparent;
    color: var(--text);
    text-decoration: none;
}
.biens-row:hover { text-decoration: none; }
.biens-row:hover .biens-titre { color: var(--red); }
.biens-thumb {
    width: 3.06667rem;
    height: 3.06667rem;
    border-radius: 0.66667rem;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--paper-deep);
    box-shadow: var(--nm-inset-sm);
}
.biens-thumb img { width: 100%; height: 100%; object-fit: cover; }
.biens-thumb-empty i { color: var(--red-accent); font-size: 1rem; }
.biens-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.06667rem; }
.biens-titre { font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.biens-ville { font-size: 0.76rem; color: var(--text-muted); }
.biens-prix {
    margin-left: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.33333rem 0.66667rem;
    border-radius: 66.6rem;
    font-size: 0.76rem;
    color: var(--text-muted);
    background: var(--paper-deep);
    box-shadow: var(--nm-inset-sm);
    white-space: nowrap;
}
.biens-prix i { font-size: 0.7rem; opacity: 0.8; }

/* Listes info (visites, rappels, ventes) : titre + sous-titre + pill */
.dash-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.06667rem; }
.dash-info-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-info-title a { color: var(--text); }
.dash-info-title a:hover { color: var(--red); }
.dash-info-sub {
    font-size: 0.76rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-info-sub a { color: var(--text-muted); }
.dash-info-sub a:hover { color: var(--red); }
.dash-pill {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.33333rem 0.66667rem;
    border-radius: 66.6rem;
    font-size: 0.76rem;
    color: var(--text-muted);
    background: var(--paper-deep);
    box-shadow: var(--nm-inset-sm);
    white-space: nowrap;
}
.dash-pill i { font-size: 0.7rem; opacity: 0.8; }
.dash-pill--date { width: 8.8rem; }
.dash-pill--phone { color: var(--red-dark); }
.dash-pill--phone a { color: inherit; }

/* ── Tableaux : filets doux ──────────────────────────── */
.data-table th { border-color: rgba(190, 196, 205, 0.6); color: var(--text-muted); }
.data-table td { border-color: rgba(190, 196, 205, 0.4); }
.data-table tbody tr:hover { background: rgba(190, 196, 205, 0.22); }

/* ── Modales ─────────────────────────────────────────── */
.modal-backdrop { background: rgba(60, 66, 74, 0.35); }
.modal-dialog {
    background: var(--paper);
    border: 0.06667rem solid rgba(190, 196, 205, 0.65);
    border-radius: var(--nm-radius);
    box-shadow: 0 1.2rem 2.93333rem rgba(60, 66, 74, 0.22),
                0 0.13333rem 0.53333rem rgba(60, 66, 74, 0.12);
}
.modal-header { border-color: rgba(190, 196, 205, 0.5); }

/* ── Select à icônes (.iselect) : même peau que les champs (blanc + bordure) ── */
.iselect-btn {
    border: 0.06667rem solid var(--border);
    border-radius: var(--radius);
    background: #FFFFFF;
    box-shadow: none;
}
.iselect.open .iselect-btn,
.iselect-btn:focus {
    border-color: var(--red);
    box-shadow: 0 0 0 0.2rem rgba(192, 57, 43, 0.12);
}
.iselect-menu {
    border: 0;
    border-radius: 0.93333rem;
    background: var(--paper);
    box-shadow: 0.46667rem 0.46667rem 1.2rem var(--nm-dark), -0.46667rem -0.46667rem 1.2rem var(--nm-light);
    overflow: hidden;
    padding: 0.4rem;
}
.iselect-opt { border-radius: 0.6rem; margin: 0.13333rem 0; }

/* Menu déroulant dans une ligne de réglages (Notifications) : largeur au
   contenu, aligné à droite comme l'ancien select natif. */
.set-row .iselect { flex-shrink: 0; min-width: 9rem; }
.set-row .iselect-btn { width: 100%; height: 2.4rem; font-size: 0.9rem; }
.set-row .iselect-menu { left: auto; right: 0; min-width: 100%; width: max-content; }
/* Liste contenant des menus déroulants : ne pas rogner le menu ouvert. */
.set-list-menus { overflow: visible; }

/* Ouverture vers le haut (place manquante en bas). */
.iselect.drop-up .iselect-menu { top: auto; bottom: calc(100% + 0.26667rem); }
.iselect.drop-up.open .iselect-caret { transform: rotate(0deg); }
.iselect-opt:hover { background: rgba(190, 196, 205, 0.4); }
.iselect-opt.selected { background: var(--red-soft); color: var(--red-dark); }
/* Champ de recherche : même peau que les champs, loupe à l'intérieur */
.iselect-search {
    border: 0.06667rem solid var(--border);
    border-bottom: 0.06667rem solid var(--border);
    border-radius: var(--radius);
    background: #FFFFFF;
    box-shadow: none;
    padding: 0 0.8rem;
    margin-bottom: 0.4rem;
    gap: 0.6rem;
}
.iselect-search:focus-within {
    border-color: var(--red);
    box-shadow: 0 0 0 0.2rem rgba(192, 57, 43, 0.12);
}
.iselect-search i { color: var(--red); font-size: 0.9rem; }
.iselect-search input {
    background: transparent;
    border: 0;              /* le cadre est porté par le conteneur .iselect-search */
    box-shadow: none;
    border-radius: 0;
    padding: 0.6rem 0;
    font-size: 0.9rem;
}
.iselect-search input:focus { border: 0; box-shadow: none; outline: none; }

/* ── Grille méta 3 colonnes (formulaires larges) ─────── */
.form-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 1.2rem;
    row-gap: 0;
}

/* ── Modale formulaire large : haute, description qui remplit ──
   Desktop uniquement — sur mobile la modale reste plein écran
   (règle .modal-dialog existante en < 34.66667rem). */
@media (min-width: 769px) {
    .modal-form { max-width: 78.66667rem; width: 88vw; }
    .modal-form .form-grow textarea { min-height: 9.33333rem; resize: vertical; }
}
@media (max-width: 1024px) {
    .form-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .form-grid-3 { grid-template-columns: 1fr; }
}

/* ── Boutons ronds / toggles ─────────────────────────── */
.check-btn, .page-btn, .prop-view-toggle,
.lightbox-nav {
    border: 0;
    border-radius: var(--radius);
    background: var(--bg);
    box-shadow: var(--nm-shadow-sm);
}
.check-btn:active, .page-btn:active { box-shadow: var(--nm-inset-sm); }

/* ── Alertes flash : cartes soft ─────────────────────── */
.flash-success, .flash-error, .flash-warning {
    border: 0;
    border-radius: var(--radius);
    box-shadow: var(--nm-shadow-sm);
}

/* ── Login "hall" : pas de carte, champs creusés dans le fond, horloge vivante ── */
.lg-hall {
    justify-content: flex-start;
    padding-left: clamp(2rem, 10vw, 11rem);
}
.lg-card {
    background: transparent;
    box-shadow: none;
    padding: 0;
    max-width: 27rem;
}
.lg-head { border-bottom: 0; padding: 0 0 0.2rem; }
.lg-body { padding: 0.6rem 0 0; }
.lg-brand { font-size: 1.15rem; }
.lg-logo { width: 1.5rem; height: 1.5rem; }
/* Titre géant : la salutation porte le bloc gauche */
.lg-title {
    font-family: var(--serif);
    font-size: clamp(2.4rem, 4.5vw, 3.6rem);
    font-weight: 800;
    color: var(--text);
    line-height: 1.05;
    margin: 0.8rem 0 0.3rem;
    letter-spacing: -0.015em;
}
.lg-title .k { color: var(--red); }
.lg-hall .lg-sub { font-size: 0.95rem; margin-bottom: 1.8rem; }
.lg-hall .lg-form { gap: 1.6rem; }
.lg-hall .lg-ipt input { padding-block: 0.95rem; font-size: 1.05rem; }
.lg-hall .lg-btn { padding-block: 0.9rem; font-size: 1rem; }
.lg-hall .lg-cell { width: 3.2rem; height: 3.9rem; font-size: 1.7rem; }

/* Horloge centrée verticalement à droite, bien présente */
.lg-clock {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: clamp(2rem, 8vw, 9rem);
    text-align: right;
    opacity: 0.55;
    pointer-events: none;
    user-select: none;
}
.lg-clock-time {
    font-family: var(--serif);
    font-size: clamp(4.5rem, 13vw, 12rem);
    font-weight: 800;
    color: var(--red);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.lg-colon { transition: opacity 0.25s var(--ease); }
.lg-colon.off { opacity: 0.25; }
.lg-clock-date {
    font-size: clamp(0.8rem, 1.2vw, 1.05rem);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 0.6rem;
}
/* Écrans moyens : l'horloge ne doit jamais chevaucher le formulaire */
@media (max-width: 1024px) {
    .lg-clock-time { font-size: clamp(3.5rem, 9vw, 6rem); }
    .lg-clock { right: 2rem; }
}

@media (max-width: 768px) {
    .lg-hall { justify-content: center; padding-left: 1.46667rem; }
    .lg-clock {
        position: static;
        text-align: center;
        margin-bottom: 1.6rem;
    }
    .lg-hall { flex-direction: column; justify-content: center; }
    .lg-clock-time { font-size: 3.2rem; }
}
.lg-ipt input {
    border: 0.06667rem solid var(--border);
    border-radius: var(--radius);
    background: #FFFFFF;
    box-shadow: none;
    padding: 0.73333rem 2.53333rem 0.73333rem 0.93333rem;
}
.lg-ipt input:focus { border-color: var(--red); box-shadow: 0 0 0 0.2rem rgba(192, 57, 43, 0.12); }

/* ── Lignes de préférences (notifications) : relief soft ───── */
.notif-toggle {
    border: 0;
    border-radius: var(--radius);
    background: var(--bg);
    box-shadow: var(--nm-shadow-sm);
}
.notif-toggle:hover { background: var(--bg); box-shadow: var(--nm-shadow); }

/* ============================================================
   RESPONSIVE PREMIUM — adaptation par espace réellement disponible
   ============================================================ */

/* Le dashboard réagit à la largeur de contenu, pas seulement au viewport. */
.content {
    container-name: rk-content;
    container-type: inline-size;
}

/* Fallback robuste pour les navigateurs sans container queries. */
@media (max-width: 1750px) {
    .dash-bento {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "hero hero"
            "visites rappels"
            "ventes activite";
    }
}

/* 3 colonnes seulement quand chaque tuile garde >= ~24rem de large. */
@container rk-content (max-width: 1450px) {
    .dash-bento {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "hero hero"
            "visites rappels"
            "ventes activite";
    }
}

@media (max-width: 768px) {
    .dash-bento {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "hero" "visites" "rappels" "ventes" "activite";
    }
    .dash-bento > .card { min-height: 0; }
}

@container rk-content (max-width: 700px) {
    .dash-bento {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "hero" "visites" "rappels" "ventes" "activite";
    }
    .dash-bento > .card { min-height: 0; }
}

/* Tablettes et appareils tactiles : toutes les actions principales restent
   confortables au doigt, sans agrandir inutilement le desktop. */
@media (max-width: 1024px) {
    .burger.card-icon-btn {
        display: inline-flex;
        width: 2.93333rem;
        height: 2.93333rem;
    }

    .topbar-logo { display: block; }

    .sidebar {
        width: min(82vw, 21.33333rem);
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 100;
        transform: translateX(-100%);
        transition: transform 0.25s var(--ease);
        height: 100vh;
        height: 100dvh;
        box-shadow: 0.26667rem 0 1.6rem rgba(43, 38, 34, 0.15);
    }

    .sidebar.open { transform: translateX(0); }
    .sidebar-overlay.visible { display: block; }
    .main-wrapper { width: 100%; margin-left: 0; }
    .content { padding: 1.46667rem 1.46667rem 2.26667rem; }

    .btn,
    .filter-tab,
    .prop-view-toggle button,
    .iselect-btn,
    .gallery-upload-btn {
        min-height: 2.93333rem;
    }

    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .card-icon-btn,
    .check-btn,
    .page-btn,
    .prop-card-map-btn,
    .modal-close,
    .gallery-nav,
    .gallery-zoom,
    .gallery-act {
        min-width: 2.93333rem;
        width: 2.93333rem;
        min-height: 2.93333rem;
        height: 2.93333rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

}

/* Tablette : 6 cartes KPI en 2 lignes de 3 (5 colonnes laissait un trou). */
@media (min-width: 769px) and (max-width: 1024px) {
    .stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    /* La version précédente descendait à 0.9rem et rendait onglets et boutons
       presque illisibles. 1rem garde la densité tout en restant confortable. */
    html { font-size: 15px; }

    .content {
        padding: 0.93333rem 0.8rem calc(2.26667rem + env(safe-area-inset-bottom));
    }

    .topbar-title { font-size: 1.2rem; }

    .btn {
        font-size: 0.92rem;
        padding: 0.66667rem 1.06667rem;
    }

    .filter-tab {
        min-height: 2.93333rem;
        padding: 0.66667rem 0.93333rem;
        font-size: 0.88rem;
        letter-spacing: 0.02em;
    }

    .status-tabs {
        flex-wrap: wrap;
        overflow: visible;
    }

    .status-tabs .filter-tab {
        flex: 1 1 auto;
    }

    .view-tabs {
        overflow: visible;
    }

    .view-tabs .filter-tab {
        flex: 1 1 0;
        min-width: 0;
    }

    input[type="text"], input[type="password"], input[type="email"],
    input[type="tel"], input[type="number"], input[type="date"],
    input[type="time"], input[type="datetime-local"], input[type="search"],
    input[type="url"], select, textarea,
    .iselect-btn,
    .iselect-search input {
        font-size: 1.06667rem;
    }

    input[type="text"], input[type="password"], input[type="email"],
    input[type="tel"], input[type="number"], input[type="date"],
    input[type="time"], input[type="datetime-local"], input[type="search"],
    input[type="url"], select,
    .iselect-btn {
        min-height: 2.93333rem;
    }

    .data-table td[data-label]::before { font-size: 0.75rem; }

    .prop-card-specs { flex-wrap: wrap; row-gap: 0.33333rem; }

    .stats-grid { gap: 0.8rem; }
    .stat-label { font-size: 0.75rem; }

    /* Barre de filtres (Affaires, Tâches) : recherche pleine largeur,
       menus et bouton se partagent la ligne suivante. */
    .filter-toolbar .ftb-search { flex: 1 1 100%; }
    .filter-toolbar .iselect { flex: 1 1 auto; min-width: 0; }
    .filter-toolbar .iselect-btn { width: 100%; min-width: 0; }
    .filter-toolbar > .btn { flex: 0 0 auto; }

    /* ── Fiche bien : hero réorganisé pour téléphone ──
       Ligne 1 : retour + actions. Puis photo pleine largeur, puis titre. */
    .fiche-back { order: 0; }
    .fiche-hero-actions { order: 1; margin-left: auto; flex-wrap: nowrap; }
    .fiche-hero-media {
        order: 2;
        width: 100%;
        aspect-ratio: 16 / 9;
    }
    .fiche-hero-main { order: 3; width: 100%; min-width: 0; }
    .fiche-hero { gap: 0.8rem; padding-bottom: 1.06667rem; margin-bottom: 1.06667rem; }
    .fiche-hero-title { font-size: 1.55rem; }
    .fiche-hero-stats { gap: 0.53333rem; }
    .fiche-hero-stat { min-width: 0; padding: 0.46667rem 0.6rem; }
    .fiche-hero-stat-value { font-size: 1.02rem; }

    /* Navigation de fiche sur téléphone : le bouton prend toute la largeur
       disponible, les flèches gardent leur cible tactile de 44 px, et le
       « 1 / 7 » disparaît — il ne dit rien qu'on ne lise déjà dans le menu.
       Le menu, lui, s'aligne sur la largeur du bouton plutôt que de déborder. */
    .fiche-tabs { gap: 0.4rem; }
    .fiche-nav-menu { flex: 1 1 auto; min-width: 0; }
    .fiche-nav-decl { width: 100%; min-width: 0; }
    .fiche-nav-liste { min-width: 100%; right: 0; }
    .fiche-nav-fl { width: 2.93333rem; height: 2.93333rem; }
    .fiche-nav-rang { display: none; }
    /* `min-height` et non un simple rembourrage : mesuré, 0,66 rem en haut et
       en bas ne donnaient que 36 px de haut, sous la cible tactile de 44. */
    .fiche-tab { min-height: 2.93333rem; padding: 0.5rem 0.6rem; }
}

@media (max-width: 640px) {
    .card-header h2 {
        font-size: 1.08rem;
        line-height: 1.25;
    }

    /* Sur téléphone, la date passe sous le contenu plutôt que de lui voler
       presque la moitié de la ligne. */
    .dash-task-open {
        display: grid;
        grid-template-columns: 0.2rem minmax(0, 1fr) auto;
        grid-template-areas:
            "rail body avat"
            "rail date avat";
        column-gap: 0.8rem;
        row-gap: 0.53333rem;
        align-items: start;
    }
    .dash-task-avatars { grid-area: avat; align-self: center; }

    .dash-task-rail {
        grid-area: rail;
        width: 0.2rem;
        height: 100%;
    }

    .dash-task-body { grid-area: body; }

    .dash-task-datepill {
        grid-area: date;
        width: auto;
        max-width: 100%;
        justify-self: start;
        align-self: start;
        padding: 0.4rem 0.66667rem;
    }

    .dash-task-title,
    .dash-task-desc {
        white-space: normal;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .dash-task-title { -webkit-line-clamp: 2; }
    .dash-task-desc { -webkit-line-clamp: 2; }

    .modal-dialog { padding: 1.46667rem 1.2rem; }
    .modal-header { margin-bottom: 1.06667rem; }
    .modal-header h2 { font-size: 1.3rem; }
    .modal-footer { gap: 0.8rem; }

    /* Liste de tâches partagée (page Tâches, fiches bien/contact) : sur
       téléphone la pastille date passe sous le titre, actions empilées. */
    .task-row {
        display: grid;
        grid-template-columns: auto 0.2rem minmax(0, 1fr) auto;
        grid-template-areas:
            "check rail body actions"
            "check rail date actions";
        column-gap: 0.66667rem;
        row-gap: 0.4rem;
        align-items: center;
    }
    .task-check-form { grid-area: check; }
    .task-rail { grid-area: rail; height: 100%; min-height: 100%; }
    .task-body { grid-area: body; }
    .task-datepill { grid-area: date; justify-self: start; }
    .task-row-actions { grid-area: actions; flex-direction: column; }
    .task-title,
    .task-desc {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* À 360-25.33333rem, deux KPI restent lisibles ; une seule colonne est réservée
   aux écrans réellement étroits. */
@media (max-width: 380px) {
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .topbar-title { font-size: 1.12rem; }
}

@media (max-width: 380px) {
    .stats-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (hover: none) {
    .prop-card:hover .prop-card-cover img { transform: none; }
}

/* ============ Planning : espace de travail plein écran ============
   La page ne défile plus en entier sur desktop : la navigation reste
   accessible et seule la grille horaire absorbe la hauteur disponible. */
@media (min-width: 769px) {
    /* Planning aligné sur le zoom global (125 %) comme les autres pages.
       La grille horaire a des lignes de hauteur fixe et la page défile
       normalement, au lieu d'être compressée dans le viewport. */
    .page-planning .content {
        padding: 1.46667rem 1.6rem 2rem;
    }

    .planning-workspace .planning-actions {
        margin-bottom: 0.8rem;
        padding-bottom: 0.8rem;
    }

    .planning-workspace .planning-late {
        margin-bottom: 0.8rem;
    }
}

/* ============================================================
   Planning — agenda mobile (remplace la grille horaire ≤51.2rem)
   La grille 7 colonnes scrolle horizontalement sur téléphone :
   on la masque et on empile les jours en liste chronologique.
   ============================================================ */
.planning-mobile { display: none; }

@media (max-width: 768px) {
    .planning-timegrid { display: none; }

    .planning-mobile {
        display: flex;
        flex-direction: column;
        gap: 0.93333rem;
    }

    .pmob-day {
        background: var(--paper);
        border: 0.06667rem solid var(--border);
        border-radius: var(--radius);
        overflow: hidden;
    }
    .pmob-day.pmob-today { border-color: var(--red-border); }

    .pmob-day-head {
        display: flex;
        align-items: baseline;
        gap: 0.6rem;
        padding: 0.66667rem 0.93333rem;
        background: var(--paper-deep);
        border-bottom: 0.06667rem solid var(--border);
    }
    .pmob-today .pmob-day-head { background: var(--red-soft); }
    .pmob-dayname {
        font-family: var(--serif);
        font-size: 1rem;
        color: var(--text);
        text-transform: capitalize;
    }
    .pmob-daynum { font-size: 0.85rem; color: var(--text-muted); }
    .pmob-today-tag {
        margin-left: auto;
        font-size: 0.72rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--red-ink);
        background: var(--paper);
        border: 0.06667rem solid var(--red-border);
        border-radius: 66.6rem;
        padding: 0.06667rem 0.6rem;
    }

    .pmob-items { display: flex; flex-direction: column; gap: 0.53333rem; padding: 0.66667rem; }
    /* Les chips repositionnés en flux (annule le positionnement absolu de la grille). */
    .pmob-items .planning-item {
        position: static;
        top: auto;
        height: auto;
        width: auto;
    }
}

/* Notifications — ligne d'état du cron des rappels */
.notif-cron-line {
    margin: 0.25rem 0 0;
    font-size: 0.9rem;
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    line-height: 1.5;
}
.notif-cron-line i { flex-shrink: 0; }
.notif-cron-ok { color: var(--text-muted); }
.notif-cron-ok i { color: var(--success); }
.notif-cron-warn { color: var(--danger); }

/* ============================================================
   Affaires (pipeline transversal) — /deals
   ============================================================ */
/* ============================================================
   Barre de filtres unifiée (recherche + menus) — toutes pages
   ============================================================ */
.filter-toolbar {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    margin-bottom: 1.1rem;
}
.ftb-search {
    flex: 1 1 14rem;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    height: 2.5rem;
    padding: 0 1rem;
    border-radius: 999px;
    border: 0.06667rem solid var(--border);
    background: #FFFFFF;
    box-shadow: none;
    color: var(--text-muted);
}
.ftb-search:focus-within {
    border-color: var(--red);
    box-shadow: 0 0 0 0.2rem rgba(192, 57, 43, 0.12);
}
.ftb-search:focus-within i { color: var(--red); }
.ftb-search i { font-size: 0.85rem; }
.ftb-search input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
    appearance: none;
    -webkit-appearance: none;
    font-size: 0.9rem;
    color: var(--text);
    outline: none;
}
/* Supprime la boîte/apparence native du champ de recherche (effet "double"). */
.ftb-search input::-webkit-search-decoration,
.ftb-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.ftb-search input::placeholder { color: var(--text-muted); }
/* Menus de la barre = composant maison .iselect (cohérent avec le reste). */
.filter-toolbar .iselect { flex: 0 0 auto; }
.filter-toolbar .iselect-btn {
    height: 2.5rem;
    padding: 0 0.9rem;
    min-width: 8.5rem;
    font-size: 0.85rem;
}
/* Le menu s'ajuste au plus long libellé (une ligne), pas à la largeur du bouton. */
.filter-toolbar .iselect-menu {
    right: auto;
    min-width: 100%;
    width: max-content;
    max-width: 18rem;
}
.filter-toolbar .iselect-opt span { white-space: nowrap; }
/* Biens : panneau avancé replié + toggle Liste/Carte intégrés à la barre. */
.filter-toolbar .prop-filters-body {
    flex: 1 1 100%;
    padding: 0 0 0.26667rem;
    border-top: none;
}
.filter-toolbar .prop-view-toggle { margin-left: auto; }

/* Select d'étape en ligne (dropdown maison, compact) */
.deal-line-right .iselect { flex: 0 0 auto; }
.deal-line-right .iselect-btn { height: 2.2rem; min-width: 9rem; font-size: 0.8rem; padding: 0 0.75rem; }
.deal-line-right .iselect-menu { right: auto; min-width: 100%; width: max-content; max-width: 16rem; }
.deal-line-right .iselect-opt span { white-space: nowrap; }
@media (max-width: 640px) {
    .ftb-search { flex-basis: 100%; }
    .filter-toolbar .iselect { flex: 1 1 45%; }
    .filter-toolbar .iselect-btn { min-width: 0; }
}

/* Liste "progression" : une affaire par ligne, barre d'étapes lisible. */
.deal-flow-list { display: flex; flex-direction: column; gap: 0.9rem; }

.deal-line {
    background: var(--paper);
    border-radius: var(--radius);
    box-shadow: var(--nm-shadow-sm);
    padding: 0.95rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    transition: box-shadow 0.2s var(--ease);
}
.deal-line:hover { box-shadow: var(--nm-shadow); }
.deal-line.is-lost, .deal-line.is-won { opacity: 0.6; }
.deal-line.is-lost:hover, .deal-line.is-won:hover { opacity: 1; }

.deal-line-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.deal-client {
    font-weight: 600;
    color: var(--text);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
}
.deal-client:hover { color: var(--red); }
.deal-sep { color: var(--text-muted); }
.deal-bien {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.92rem;
}
.deal-bien:hover { color: var(--text); }
.deal-heat { margin-left: auto; }

/* Barre d'étapes */
.deal-flow {
    list-style: none;
    margin: 0;
    padding: 0.1rem 0.2rem 0;
    display: flex;
}
.flow-step {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}
.flow-step::before {
    content: "";
    position: absolute;
    top: 0.85rem;
    right: 50%;
    width: 100%;
    height: 0.13rem;
    background: var(--paper-deep);
    z-index: 0;
}
.flow-step:first-child::before { display: none; }
.flow-step.is-done::before,
.flow-step.is-current::before { background: var(--success); }

.flow-dot {
    position: relative;
    z-index: 1;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    background: var(--paper-deep);
    color: var(--text-muted);
    box-shadow: var(--nm-inset-sm);
}
.flow-step.is-done .flow-dot { background: var(--success); color: #fff; box-shadow: none; }
.flow-step.is-current .flow-dot {
    background: var(--red);
    color: #fff;
    box-shadow: 0 0 0 0.22rem var(--red-soft);
}
.flow-label {
    font-size: 0.68rem;
    line-height: 1.15;
    text-align: center;
    color: var(--text-muted);
    max-width: 5.5rem;
}
.flow-step.is-current .flow-label { color: var(--red); font-weight: 600; }

/* Bandeau terminal (vendu / perdu) */
.deal-terminal {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.55rem 0.8rem;
    border-radius: 0.6rem;
}
.deal-terminal-won  { background: var(--success-bg); color: var(--success); }
.deal-terminal-lost { background: var(--neutral-bg);  color: var(--neutral); }

/* Pied : prochaine action + prix + sélecteur d'étape */
.deal-line-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    flex-wrap: wrap;
    border-top: 0.06667rem solid var(--line-ink);
    padding-top: 0.7rem;
}
.deal-next { display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; font-size: 0.85rem; min-width: 0; }
.deal-next-visite { color: var(--text-muted); display: inline-flex; align-items: center; gap: 0.35rem; }
.deal-next-action { color: var(--warning); display: inline-flex; align-items: center; gap: 0.35rem; }
.deal-next-empty  { color: var(--text-muted); font-style: italic; }

/* Prochaine action éditable en ligne */
.deal-action-form { display: inline-flex; align-items: center; gap: 0.4rem; flex: 1 1 12rem; min-width: 0; }
.deal-action-arrow { color: var(--warning); font-size: 0.8rem; flex: 0 0 auto; }
.deal-action-input {
    flex: 1;
    min-width: 0;
    width: auto;
    border: none;
    background: transparent;
    box-shadow: none;
    color: var(--warning);
    font-size: 0.85rem;
    font-family: var(--sans);
    padding: 0.2rem 0.4rem;
    border-radius: 0.45rem;
    transition: background 0.15s var(--ease);
}
.deal-action-input::placeholder { color: var(--text-muted); font-style: italic; }
.deal-action-input:hover { background: rgba(255, 255, 255, 0.7); }
.deal-action-input:focus {
    outline: none;
    color: var(--text);
    background: #FFFFFF;
    box-shadow: 0 0 0 0.06667rem var(--red), 0 0 0 0.2rem rgba(192, 57, 43, 0.12);
}

.deal-line-right { display: flex; align-items: center; gap: 0.7rem; }
.deal-price { font-family: var(--serif); font-size: 0.95rem; color: var(--text); white-space: nowrap; }
.deal-etape-form { margin: 0; }
.deal-etape-select {
    padding: 0.35rem 1.8rem 0.35rem 0.65rem;
    border-radius: 0.55rem;
    border: 0.06667rem solid var(--border);
    background: #FFFFFF;
    box-shadow: none;
    color: var(--text);
    font-size: 0.8rem;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%235E646E' stroke-width='1.5' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.65rem center;
}
.deal-etape-select:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }

@media (max-width: 640px) {
    .flow-label { display: none; }
    .deal-heat { margin-left: 0; }
    .deal-line-foot { align-items: stretch; }
    .deal-line-right { width: 100%; justify-content: space-between; }
}

.list-toolbar-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }

/* ============================================================
   Recherche globale (barre header + page /search)
   ============================================================ */
.topbar-search {
    position: relative;
    margin-left: auto;
    display: flex;
    align-items: center;
    max-width: 22rem;
    flex: 1 1 12rem;
}
.topbar-search i {
    position: absolute;
    left: 0.75rem;
    color: var(--text-muted);
    font-size: 0.85rem;
    pointer-events: none;
}
.topbar-search input {
    width: 100%;
    padding: 0.5rem 0.75rem 0.5rem 2.1rem;
    border: none;
    border-radius: 999px;
    background: var(--bg);
    box-shadow: inset 0.1rem 0.1rem 0.26667rem var(--nm-dark), inset -0.1rem -0.1rem 0.26667rem var(--nm-light);
    color: var(--text);
    font-family: var(--sans);
    font-size: 0.9rem;
}
.topbar-search input:focus { outline: none; box-shadow: inset 0.13rem 0.13rem 0.3rem var(--nm-dark), inset -0.13rem -0.13rem 0.3rem var(--nm-light), 0 0 0 0.13333rem rgba(185, 28, 28, 0.15); }
.topbar-search:focus-within i { color: var(--red); }
@media (max-width: 640px) {
    .topbar-search { display: none; }
}

.search-results { display: flex; flex-direction: column; }
.search-result {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.4rem;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: var(--text);
}
.search-result:last-child { border-bottom: none; }
.search-result:hover { background: var(--paper-deep); border-radius: var(--radius); }
.search-result-main { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.search-result-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-result-main i { color: var(--red); flex-shrink: 0; }
.search-result-sub { color: var(--text-muted); font-size: 0.85rem; white-space: nowrap; }
@media (max-width: 640px) {
    .search-result { grid-template-columns: 1fr auto; }
    .search-result-sub { display: none; }
}

/* ============================================================
   Journal d'activité — /activity
   ============================================================ */
.activity-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.activity-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.7rem 0.2rem;
    border-bottom: 1px solid var(--border);
}
.activity-item:last-child { border-bottom: none; }
.activity-icon {
    flex-shrink: 0;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--paper-deep);
    color: var(--text-muted);
    font-size: 0.85rem;
}
.activity-icon.act-create { background: var(--success-bg); color: var(--success); }
.activity-icon.act-update { background: var(--warning-bg); color: var(--warning); }
.activity-icon.act-delete { background: var(--danger-bg); color: var(--danger); }
.activity-icon.act-link   { background: var(--paper-deep); color: var(--red); }
.activity-body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.activity-text { line-height: 1.4; }
.activity-date { font-size: 0.8rem; color: var(--text-muted); }

/* Flash : bouton fermer + auto-dismiss (JS) */
.flash { position: relative; display: flex; align-items: center; gap: 0.6rem; }
.flash-close {
    margin-left: auto;
    background: none;
    border: none;
    color: inherit;
    opacity: 0.6;
    cursor: pointer;
    font-size: 0.95rem;
    padding: 0 0.2rem;
    line-height: 1;
}
.flash-close:hover { opacity: 1; }

/* Bouton en cours de soumission : spinner + verrouillage */
.btn.is-loading { pointer-events: none; opacity: 0.85; position: relative; color: transparent; }
.btn.is-loading > * { visibility: hidden; }
.btn.is-loading::after {
    content: "";
    position: absolute;
    width: 0.9rem;
    height: 0.9rem;
    top: calc(50% - 0.45rem);
    left: calc(50% - 0.45rem);
    /* couleur explicite : color:transparent masque le texte mais annulerait currentColor */
    border: 0.13rem solid rgba(51, 56, 63, 0.55);
    border-right-color: transparent;
    border-radius: 50%;
    animation: btn-spin 0.6s linear infinite;
}
/* Boutons à fond coloré : spinner clair pour rester visible */
.btn-primary.is-loading::after,
.lg-btn.is-loading::after,
.card-icon-btn--create.is-loading::after,
.push-toggle.is-on.is-loading::after {
    border-color: rgba(255, 255, 255, 0.9);
    border-right-color: transparent;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* Recherche : la mise à distance des cartes de résultats était réglée ici, à
   1 rem, pour cette seule page. C'est désormais `.card + .card` qui s'en
   occupe partout, à 1,2 rem — garder les deux les additionnerait. */
.page-search .content > .page-hint { margin-bottom: 1rem; }

/* ============ CRM v2 — Historique (timeline) & Documents ============ */
.timeline-add, .doc-add {
    display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
    margin-bottom: 0.9rem;
}
.timeline-add input[type="text"] { flex: 1 1 14rem; min-width: 0; }
.doc-add { flex-direction: column; align-items: stretch; }
.doc-add-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.doc-add-bar input[type="text"] { flex: 1 1 10rem; min-width: 0; }

/* Zone de dépôt : clic ou glisser-déposer = envoi direct, multi-fichiers */
.doc-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 1.4rem 1rem;
    border: 0.13333rem dashed var(--border-strong);
    border-radius: var(--nm-radius);
    background: rgba(255, 255, 255, 0.45);
    color: var(--text-muted);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.doc-drop:hover, .doc-drop:focus-visible {
    border-color: var(--red);
    background: rgba(255, 255, 255, 0.75);
    outline: none;
}
.doc-drop.is-drag {
    border-color: var(--red);
    border-style: solid;
    background: var(--red-soft);
    color: var(--red-dark);
}
.doc-drop.is-busy { pointer-events: none; opacity: 0.65; }
.doc-drop > i { font-size: 1.5rem; color: var(--red-accent); }
.doc-drop.is-drag > i, .doc-drop:hover > i { color: var(--red); }
.doc-drop-main { font-size: 0.92rem; color: var(--text); }
.doc-drop-main em { font-style: normal; color: var(--red); font-weight: 600; }
.doc-drop-hint { font-size: 0.76rem; }

/* Inputs fichier natifs restants (modales) : bouton assorti aux .btn */
input[type="file"]::file-selector-button {
    border: 0.06667rem solid var(--border);
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--text);
    padding: 0.4rem 0.8rem;
    margin-right: 0.6rem;
    font-family: var(--sans);
    font-size: 0.85rem;
    cursor: pointer;
    box-shadow: var(--nm-shadow-sm);
    transition: color 0.15s, border-color 0.15s;
}
input[type="file"]::file-selector-button:hover { color: var(--red); border-color: var(--red); }

.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before {
    content: ""; position: absolute; left: 1.05rem; top: 0.5rem; bottom: 0.5rem;
    width: 2px; background: var(--nm-dark); border-radius: 1px;
}
.timeline-item { display: flex; gap: 0.75rem; padding: 0.55rem 0; position: relative; }
.timeline-ico {
    flex: 0 0 auto; width: 2.1rem; height: 2.1rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--paper); color: var(--text-muted);
    box-shadow: 0.13rem 0.13rem 0.4rem var(--nm-dark, rgba(190,196,205,.55)),
                -0.13rem -0.13rem 0.4rem var(--nm-light, rgba(255,255,255,.65));
    position: relative; z-index: 1; font-size: 0.85rem;
}
.timeline-etape .timeline-ico, .timeline-document .timeline-ico { color: var(--red); }
.timeline-body { flex: 1 1 auto; min-width: 0; }
.timeline-head { display: flex; flex-wrap: wrap; gap: 0.15rem 0.6rem; align-items: baseline; }
.timeline-head strong { font-size: 0.9rem; }
.timeline-meta { font-size: 0.75rem; color: var(--text-muted); }
.timeline-text { margin: 0.2rem 0 0; font-size: 0.85rem; white-space: pre-line; }

.doc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.doc-item {
    display: flex; align-items: center; gap: 0.7rem;
    background: var(--paper); border-radius: 10px; padding: 0.55rem 0.75rem;
}
.doc-ico { color: var(--red); font-size: 1.05rem; flex: 0 0 auto; }
.doc-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.doc-main a { font-weight: 600; font-size: 0.9rem; overflow-wrap: anywhere; }
.doc-meta { font-size: 0.75rem; color: var(--text-muted); }

.bien-pipeline .deal-flow { margin: 0.3rem 0 0.8rem; }
.bien-pipeline .deal-action-form { display: flex; width: 100%; }

/* Rôles d'un contact */
.role-badges { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.35rem; }
.role-badge {
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
    padding: 0.2rem 0.55rem; border-radius: 999px;
    background: var(--red-soft); color: var(--red-ink);
}
.role-checks { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }
.role-checks label { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; }

/* ============ Fiche « dossier » : contenu + rail sticky (layout A) ============ */
.fiche-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 19rem;
    grid-template-areas: "main rail";
    gap: 1.2rem;
    align-items: start;
}
.fiche-main { grid-area: main; min-width: 0; }
.fiche-rail {
    grid-area: rail;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: sticky;
    top: 1rem;
}
.fiche-rail .card { margin: 0; }

.fiche-rail-head {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.7rem;
}
.fiche-rail-head .badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.fiche-rail-media img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 0.6rem;
    display: block;
}
.fiche-rail-title {
    font-size: 1.08rem;
    line-height: 1.3;
    margin: 0.7rem 0 0.2rem;
}
.fiche-rail-addr {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    color: var(--text-muted);
    font-size: 0.82rem;
    margin: 0 0 0.85rem;
}
.fiche-rail-addr i { color: var(--red-accent); flex-shrink: 0; }

.fiche-rail-stats {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    border-top: 0.06667rem solid var(--border);
    padding-top: 0.75rem;
}
.fiche-rail-stat {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.6rem;
}
.fiche-rail-stat span {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 600;
    color: var(--text-muted);
}
.fiche-rail-stat strong { font-family: var(--serif); font-size: 0.95rem; }
.fiche-rail-price { color: var(--red-ink); font-size: 1.1rem !important; }

.fiche-rail-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.9rem;
}
.fiche-rail-actions .btn-labeled { flex: 1; justify-content: center; }

/* Pipeline compact du rail : select + jauge + prochaine action */
.fiche-rail-pipe .deal-etape-form { margin-bottom: 0.6rem; }
.fiche-rail-pipe .icon-select { width: 100%; }
.pipe-progress {
    height: 0.4rem;
    border-radius: 999px;
    background: var(--paper-deep);
    box-shadow: var(--nm-inset-sm);
    overflow: hidden;
    margin-bottom: 0.35rem;
}
.pipe-progress-fill {
    height: 100%;
    background: var(--red);
    border-radius: 999px;
    transition: width 0.3s var(--ease);
}
.pipe-step-info {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: 0 0 0.7rem;
}
.fiche-rail-pipe .deal-action-form {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.fiche-rail-pipe .deal-action-form > i { color: var(--red-accent); flex-shrink: 0; font-size: 0.8rem; }
.fiche-rail-pipe .deal-action-input { flex: 1; min-width: 0; }

/* Tablette / mobile : rail d'abord (l'essentiel), contenu ensuite, plus de sticky */
@media (max-width: 1024px) {
    .fiche-cols {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "rail" "main";
    }
    .fiche-rail { position: static; }
}

/* ============ Module Offres (onglet fiche bien) ============ */
.offers-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
    margin-bottom: 1rem;
}
.offers-stat {
    background: var(--paper-deep);
    border-radius: var(--radius);
    padding: 0.6rem 0.8rem;
}
.offers-stat span {
    display: block;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.15rem;
}
.offers-stat strong { font-family: var(--serif); font-size: 1.05rem; }
.offers-best { color: var(--red); }

/* Formulaire nouvelle offre (dépliable) */
.offer-form {
    background: var(--paper-deep);
    border-radius: var(--nm-radius);
    padding: 1rem;
    margin-bottom: 1rem;
}
.offer-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
    margin-bottom: 0.8rem;
}
.offer-field { display: flex; flex-direction: column; gap: 0.3rem; }
.offer-field > span {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 600;
    color: var(--text-muted);
}
.offer-field-wide { grid-column: 1 / -1; }
.offer-form-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* Liste des offres */
.offer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.offer-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.6rem 0.9rem;
    padding: 0.7rem 0.85rem;
    background: var(--paper);
    border: 0.06667rem solid var(--border);
    border-radius: var(--radius);
}
.offer-main { min-width: 0; }
.offer-buyer { display: block; font-weight: 600; font-size: 0.92rem; }
.offer-meta {
    display: block;
    font-size: 0.76rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.offer-right { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; }
.offer-amount { font-family: var(--serif); font-weight: 700; font-size: 1rem; white-space: nowrap; }
.offer-ecart { font-style: normal; font-size: 0.72rem; color: var(--text-muted); margin-left: 0.4rem; font-family: var(--sans); font-weight: 500; }
.offer-actions { grid-column: 1 / -1; display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.offer-contre-form { display: inline-flex; gap: 0.3rem; align-items: center; }
.offer-contre-input { width: 8rem; padding: 0.35rem 0.5rem; font-size: 0.82rem; }
.offer-del { grid-column: 1 / -1; justify-self: end; }

/* Badges de statut d'offre (réutilisent la palette de statuts) */
.badge-offer-proposee { color: var(--info);    background: var(--info-bg); }
.badge-offer-acceptee { color: var(--success); background: var(--success-bg); }
.badge-offer-refusee  { color: var(--danger);  background: var(--danger-bg); }
.badge-offer-contre   { color: var(--warning); background: var(--warning-bg); }
.activity-icon.act-offre { background: var(--warning-bg); color: var(--warning); }

@media (max-width: 640px) {
    .offers-summary { grid-template-columns: 1fr; }
    .offer-form-grid { grid-template-columns: 1fr; }
    .offer-contre-input { width: 6.5rem; }
}

/* ============ Fiche contact : rail profil (réutilise .fiche-cols / .fiche-rail) ============ */
.fiche-rail-title--center { text-align: center; }
.cl-rail-avatar { display: flex; justify-content: center; margin-bottom: 0.2rem; }
.cl-rail-avatar .cl-av {
    width: 4.2rem;
    height: 4.2rem;
    font-size: 1.5rem;
    box-shadow: var(--nm-shadow);
    background: var(--paper);
}
.cl-rail-roles { display: flex; flex-wrap: wrap; gap: 0.3rem; justify-content: center; margin: 0.5rem 0 0; }

.cl-rail-info {
    margin: 0.9rem 0 0;
    border-top: 0.06667rem solid var(--border);
}
.cl-rail-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.7rem;
    padding: 0.5rem 0;
    border-bottom: 0.06667rem solid var(--border);
}
.cl-rail-row dt {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 600;
    color: var(--text-muted);
    flex-shrink: 0;
}
.cl-rail-row dd {
    margin: 0;
    text-align: right;
    font-size: 0.86rem;
    min-width: 0;
    overflow-wrap: anywhere;
}
.cl-rail-email { font-size: 0.8rem; }
.cl-rail-budget { font-family: var(--serif); font-weight: 700; color: var(--red); }

/* ============ Messagerie (page /mail) ============ */
.mail-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr);
    gap: 1rem;
    align-items: start;
    height: calc(100vh - 11rem);
    min-height: 32rem;
}










/* Zone 2 : liste */
.mail-list-col { display: flex; flex-direction: column; gap: 0.6rem; height: 100%; min-height: 0; }
/* La base .ftb-search (flex: 1 1 14rem) est pensée pour une barre horizontale ;
   dans cette colonne verticale, le flex-grow s'appliquerait à la hauteur → ballon. */
.mail-search { flex: 0 0 auto; height: 2.5rem; }
.mail-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 0.3rem; padding-right: 0.2rem; }
.mail-item {
    display: block; padding: 0.6rem 0.75rem; border-radius: var(--radius);
    border: 0.06667rem solid var(--border); background: var(--paper);
    text-decoration: none; color: var(--text);
}
.mail-item:hover { border-color: var(--border-strong); }
.mail-item.is-open { border-color: var(--red); box-shadow: 0 0 0 0.1rem rgba(192,57,43,.12); }
.mail-item-top { display: flex; justify-content: space-between; gap: 0.5rem; align-items: baseline; }
.mail-item-who { font-size: 0.86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-item-date { font-size: 0.72rem; color: var(--text-muted); flex-shrink: 0; }
.mail-item-subj { font-size: 0.84rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 0.15rem; }
.mail-item-clip { font-size: 0.72rem; }
.mail-item.is-unread .mail-item-who { font-weight: 700; }
.mail-item.is-unread .mail-item-subj { color: var(--text); font-weight: 600; }
.mail-item.is-unread { border-left: 0.2rem solid var(--red); }

/* Volet lecture : en-tête fixe · zone défilante · réponse fixe en bas */
.mail-read-col {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--paper);
    border-radius: var(--nm-radius);
    box-shadow: var(--nm-shadow);
    padding: 1.2rem 1.4rem;
}
/* Gouttières symétriques : le contenu reste centré sur l'axe du volet,
   scrollbar visible ou non — le fil et la zone de réponse partagent le même axe. */
.mail-read-scroll { flex: 1; overflow-y: auto; min-height: 0; scrollbar-gutter: stable both-edges; }
.mail-read-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--text-muted); gap: 0.6rem; }
.mail-read-empty i { font-size: 2.2rem; color: var(--border-strong); }
.mail-read-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.8rem; margin-bottom: 1rem; padding-bottom: 0.8rem; border-bottom: 0.06667rem solid var(--border); flex-shrink: 0; }
.mail-read-subj { font-size: 1.2rem; margin: 0; }
.mail-read-actions { display: flex; gap: 0.4rem; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 640px) {
    .mail-read-head { flex-wrap: wrap; }
    .mail-read-subj { flex: 1 1 100%; }
    .mail-read-actions { flex: 1 1 100%; justify-content: flex-start; }
}
.mail-msg { padding: 0.8rem 0; border-bottom: 0.06667rem solid var(--border); }
.mail-msg-meta { display: flex; justify-content: space-between; gap: 0.6rem; align-items: baseline; }
.mail-msg-from { font-weight: 700; font-size: 0.92rem; }
.mail-msg-date { font-size: 0.76rem; color: var(--text-muted); }
.mail-msg-email { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 0.6rem; }
.mail-msg-body { width: 100%; min-height: 16rem; border: 0; background: #fff; border-radius: var(--radius); }
.mail-msg-body-text { white-space: pre-wrap; font-size: 0.9rem; line-height: 1.55; }
.mail-atts { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.mail-atts-label { font-size: 0.78rem; color: var(--text-muted); width: 100%; }
.mail-att { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.7rem; border: 0.06667rem solid var(--border); border-radius: var(--radius); font-size: 0.82rem; text-decoration: none; color: var(--text); background: var(--paper); }
.mail-att:hover { border-color: var(--red); color: var(--red); }
.mail-att em { font-style: normal; color: var(--text-muted); font-size: 0.74rem; }
.mail-att i { color: var(--red-accent); }

/* Formulaire de connexion de boîte */
.mail-acc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; margin-bottom: 0.8rem; }
.mail-shared-check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; margin-bottom: 0.8rem; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text); }
.mail-connect-card { max-width: 46rem; }

/* Responsive : sous 1024px, les 3 zones s'empilent ; sous 640px, rail en ligne */
@media (max-width: 1024px) {
    .mail-shell { grid-template-columns: 1fr; height: auto; }


    .mail-list { max-height: 26rem; }
    .mail-read-col { height: auto; }
    .mail-acc-grid { grid-template-columns: 1fr; }
}

/* Messagerie : barre « Nouveau » + rédaction */


.compose-form .modal-body { display: flex; flex-direction: column; gap: 0.7rem; }
.compose-form textarea { resize: vertical; min-height: 12rem; font-family: var(--sans); line-height: 1.5; }
.compose-form input:disabled { color: var(--text-muted); background: var(--paper-deep); }

/* Messagerie : mini-liste d'e-mails sur les fiches (onglet E-mails) */
.mail-mini-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.mail-mini-item { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; padding: 0.5rem 0.6rem; border: 0.06667rem solid var(--border); border-radius: var(--radius); }
.mail-mini-item a { text-decoration: none; color: var(--text); min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 0.1rem; }
.mail-mini-who { font-size: 0.82rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-mini-subj { font-size: 0.78rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-mini-date { font-size: 0.72rem; color: var(--text-muted); flex-shrink: 0; }

/* Paramètres → Boîtes e-mail */
.mailbox-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.mailbox-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.8rem; padding: 0.8rem 0.9rem; border: 0.06667rem solid var(--border); border-radius: var(--radius); }
.mailbox-main { min-width: 0; flex: 1 1 0; display: flex; flex-direction: column; gap: 0.15rem; }
.mailbox-email { font-weight: 700; font-size: 0.95rem; }
.mailbox-sub { font-size: 0.78rem; color: var(--text-muted); }
.mailbox-sync { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.1rem; }
.mailbox-sync-ok { color: var(--success); }
.mailbox-sync-err { color: var(--danger); }


/* Connexion de boîte : essentiel d'abord, avancé replié */
.mail-acc-hint {
    display: flex; align-items: baseline; gap: 0.45rem;
    font-size: 0.8rem; color: var(--text-muted);
    margin: 0.6rem 0 0.9rem;
}
.mail-acc-hint i { color: var(--red-accent); flex-shrink: 0; }
.mail-acc-hint a { color: var(--red); font-weight: 600; }
.mail-acc-advanced {
    border: 0.06667rem solid var(--border);
    border-radius: var(--radius);
    padding: 0 0.9rem;
    margin-bottom: 1rem;
    background: rgba(255, 255, 255, 0.4);
}
.mail-acc-advanced summary {
    cursor: pointer;
    padding: 0.65rem 0;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text-muted);
    list-style: none;
    display: flex; align-items: baseline; gap: 0.45rem;
}
.mail-acc-advanced summary::-webkit-details-marker { display: none; }
.mail-acc-advanced summary:hover { color: var(--red); }
.mail-acc-advanced summary em { font-style: normal; font-weight: 400; font-size: 0.78rem; }
.mail-acc-advanced[open] summary { border-bottom: 0.06667rem solid var(--border); margin-bottom: 0.8rem; }
.mail-acc-grid-adv { padding-bottom: 0.9rem; }
.mail-acc-footer {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.8rem; flex-wrap: wrap;
}
.mail-acc-footer .btn-labeled { margin-left: auto; }
.mail-shared-check { margin-bottom: 0; }
.mail-shared-sub { color: var(--text-muted); font-weight: 400; }

/* Sélecteur de fournisseur (formulaire de connexion boîte) */
.mail-provider-field { max-width: 16rem; margin-bottom: 0.8rem; }

/* ============ Messagerie V2 : toolbar + deux volets ============ */
.mail-toolbar {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.mail-acc-select { max-width: 14rem; padding: 0.45rem 0.7rem; }
.mail-acc-single {
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-weight: 700; font-size: 0.92rem; white-space: nowrap;
}
.mail-acc-single i { color: var(--red-accent); font-size: 0.85rem; }

/* Onglets dossiers : même langage que les onglets de fiche */
.mail-tabs { display: flex; gap: 0.3rem; }
.mail-tab {
    padding: 0.45rem 0.85rem;
    border-radius: var(--radius);
    font-size: 0.88rem;
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
}
.mail-tab:hover { color: var(--red); }
.mail-tab.is-active {
    color: var(--red);
    font-weight: 600;
    background: var(--paper-deep);
    box-shadow: var(--nm-inset-sm);
}
.mail-tab-count {
    background: var(--red); color: #fff;
    font-size: 0.66rem; font-weight: 700;
    padding: 0.05rem 0.38rem; border-radius: 999px;
    vertical-align: 0.1rem;
}
.mail-toolbar .mail-search { flex: 1 1 12rem; max-width: 22rem; margin-left: auto; }
.mail-new-btn { flex-shrink: 0; }

/* Deux volets : liste large + lecture */
.mail-shell-2col {
    grid-template-columns: 18rem minmax(0, 1fr);
    height: calc(100vh - 11rem);
}

@media (max-width: 1024px) {
    .mail-toolbar { gap: 0.5rem; }
    .mail-toolbar .mail-search { max-width: none; flex-basis: 100%; order: 5; margin-left: 0; }
    .mail-shell-2col { grid-template-columns: 1fr; height: auto; }
}

/* Édition inline d'une boîte (Paramètres) */
.mailbox-item { flex-wrap: wrap; }
.mailbox-actions { display: flex; gap: 0.4rem; align-items: center; flex-shrink: 0; }
.mailbox-edit {
    flex-basis: 100%;
    margin-top: 0.8rem;
    padding-top: 0.8rem;
    border-top: 0.06667rem dashed var(--border);
}

/* ============ Volet lecture V2 : fil de messages « tickets » ============ */
/* Une seule grille pour tout le fil : chaque message occupe la même largeur
   (mesure de lecture ~700px, centrée dans le volet). Les messages envoyés se
   distinguent par la teinte (fond rosé + bord rouge), pas par un décalage
   gauche/droite — pas de grande zone vide d'un côté. */
.chat-thread {
    display: flex; flex-direction: column; gap: 0.8rem;
    padding: 0.3rem 0 1rem;
    width: 100%; max-width: 44rem; margin-inline: auto;
}
.chat-bubble {
    background: #FFFFFF;
    border: 0.06667rem solid var(--border);
    border-radius: 0.8rem;
}
.chat-bubble--me { background: var(--red-soft); border-color: var(--red-border); }
.chat-bubble.is-current { border-color: var(--red); }
.chat-text { white-space: pre-wrap; font-size: 0.9rem; line-height: 1.5; overflow-wrap: anywhere; }
.chat-empty { color: var(--text-muted); font-style: italic; }
.chat-iframe { width: 100%; min-width: 0; height: 10rem; border: 0; background: #fff; border-radius: 0.5rem; display: block; }
.chat-atts { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0 1rem 0.85rem; }
.chat-atts .mail-att { font-size: 0.78rem; padding: 0.3rem 0.55rem; }

/* Réponse rapide : fixe en bas du volet, même mesure centrée que le fil.
   Au repos, champ et boutons partagent la même hauteur (2.4rem, comme les
   .card-icon-btn) → ligne parfaitement alignée ; le champ grandit à la saisie
   (autogrow JS, plafonné à max-height). */
.chat-reply {
    flex-shrink: 0;
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    padding: 0.8rem 0 0;
    margin: 0.4rem auto 0;
    width: 100%;
    max-width: 44rem;
    background: var(--paper);
    border-top: 0.06667rem solid var(--border);
}
.chat-reply-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.chat-reply textarea {
    width: 100%;
    resize: none;
    font-family: var(--sans);
    font-size: 0.9rem;
    line-height: 1.4;
    min-height: 2.4rem;
    max-height: 9rem;
    padding: 0.5rem 0.8rem;
}
.chat-reply-files:empty { display: none; }
.chat-reply-btns { display: flex; gap: 0.4rem; align-items: flex-end; flex-shrink: 0; }
.chat-reply-clip { cursor: pointer; margin: 0; /* neutralise le margin-bottom global des <label> */ }
.chat-reply-clip input { display: none; }
.chat-reply-btns .btn {
    width: 2.4rem; height: 2.4rem; padding: 0; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
}

/* Séparateur vertical entre le groupe CRM et les actions mail dans l'en-tête */
.mail-actions-sep { width: 0.06667rem; align-self: stretch; margin: 0.2rem 0.2rem; background: var(--border); }

/* Barre d'association contact (dépliable sous l'en-tête) */
.mail-assoc-bar {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
    padding: 0.6rem 0; margin-bottom: 0.4rem;
    border-bottom: 0.06667rem solid var(--border);
}
.mail-assoc-label i { color: var(--red-accent); }
.mail-assoc-contact { font-size: 0.8rem; text-decoration: none; }
.mail-assoc-form { display: inline-flex; gap: 0.3rem; align-items: center; margin-left: auto; }
.mail-assoc-form .icon-select { max-width: 15rem; padding: 0.4rem 0.6rem; }

/* ============ Style « ticket » d'un message dans le fil ============ */
/* Le padding vit dans l'en-tête et le corps (pas dans la bulle) : plus de
   marges négatives, et l'en-tête colle naturellement aux bords arrondis. */
.ticket-head {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.6rem 1rem;
    border-bottom: 0.06667rem solid var(--border);
}
.chat-bubble--me .ticket-head { border-color: var(--red-border); }
.ticket-av {
    width: 2rem; height: 2rem; border-radius: 50%; flex-shrink: 0;
    background: var(--paper-deep); color: var(--red-ink);
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--serif); font-weight: 700; font-size: 0.8rem;
}
.ticket-id { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ticket-from { font-weight: 700; font-size: 0.9rem; }
.ticket-email { font-size: 0.74rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-date { font-size: 0.74rem; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.ticket-body { min-width: 0; padding: 0.85rem 1rem; }
/* Suivi de pièces jointes : le corps cède son padding bas au bloc .chat-atts */
.ticket-body:not(:last-child) { padding-bottom: 0.5rem; }

/* Signature discrète en fin de message */
.ticket-sig {
    margin-top: 0.6rem; padding-top: 0.5rem;
    border-top: 0.06667rem dashed var(--border);
    font-size: 0.78rem; color: var(--text-muted); font-style: italic;
}

/* Bouton et bloc de citation repliés */
.quote-toggle {
    margin-top: 0.7rem;
    border: 0.06667rem solid var(--border);
    background: var(--paper-deep);
    color: var(--text-muted);
    border-radius: var(--radius);
    padding: 0.35rem 0.7rem;
    font-size: 0.78rem;
    cursor: pointer;
    font-family: var(--sans);
}
.quote-toggle:hover { color: var(--red); border-color: var(--red); }
.quote-wrap { margin-top: 0.5rem; }
.quote-text { color: var(--text-muted); font-size: 0.85rem; border-left: 0.13333rem solid var(--border-strong); padding-left: 0.7rem; }

/* Pièces jointes dans la rédaction */
.compose-attach { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.compose-attach-btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.45rem 0.8rem; border: 0.06667rem solid var(--border); border-radius: var(--radius);
    background: var(--paper); color: var(--text); font-size: 0.85rem; cursor: pointer;
    text-transform: none; letter-spacing: 0; font-weight: 400;
}
.compose-attach-btn:hover { color: var(--red); border-color: var(--red); }
.compose-attach-btn i { color: var(--red-accent); }
.compose-attach-hint { font-size: 0.74rem; color: var(--text-muted); margin-left: auto; }
/* Puces des fichiers joints : sur leur propre ligne, sous le bouton */
.compose-attach-list { display: flex; flex-wrap: wrap; gap: 0.4rem; flex: 1 1 100%; }
.compose-attach-list:empty { display: none; }
.compose-file-chip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.3rem 0.4rem 0.3rem 0.6rem;
    border: 0.06667rem solid var(--border); border-radius: var(--radius);
    background: var(--paper); font-size: 0.8rem; max-width: 100%;
}
.compose-file-chip i { color: var(--red-accent); flex-shrink: 0; font-size: 0.78rem; }
.compose-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compose-file-chip em { font-style: normal; color: var(--text-muted); font-size: 0.72rem; flex-shrink: 0; }
.compose-file-x {
    border: 0; background: none; color: var(--text-muted); cursor: pointer;
    font-size: 1.1rem; line-height: 0.7; padding: 0 0.15rem; flex-shrink: 0;
}
.compose-file-x:hover { color: var(--danger); }

/* ============ Abonnement (Paramètres) ============ */
.sub-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.sub-plan-name { font-family: var(--serif); font-weight: 800; font-size: 1.5rem; }
.sub-price { font-family: var(--serif); font-weight: 800; font-size: 2rem; color: var(--red); line-height: 1; }
.sub-price small { font-size: 0.9rem; font-weight: 600; color: var(--text-muted); }
.sub-muted { color: var(--text-muted); font-size: 0.86rem; margin: 0.2rem 0 0; }
.sub-gauges { display: flex; flex-direction: column; gap: 1rem; }
.sub-gauge-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; }
.sub-gauge-label { font-size: 0.86rem; color: var(--text-muted); }
.sub-gauge-label i { color: var(--red-accent); width: 1.2rem; text-align: center; }
.sub-gauge-val { font-family: var(--serif); font-weight: 600; font-size: 0.9rem; }
.sub-faint { color: var(--text-muted); font-weight: 500; }
.sub-gauge-track { height: 0.53rem; border-radius: 66rem; background: var(--paper-deep); box-shadow: var(--nm-inset-sm); overflow: hidden; margin-top: 0.35rem; }
.sub-gauge-fill { height: 100%; border-radius: 66rem; }
.sub-ok { background: var(--success); }
.sub-warning { background: var(--warning); }
.sub-danger { background: var(--danger); }
.sub-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.6rem; }
.sub-feat { display: flex; align-items: center; gap: 0.55rem; font-size: 0.92rem; }
.sub-feat .fa-circle-check { color: var(--success); }
.sub-feat.off { color: var(--text-muted); }
.sub-feat.off .fa-circle-minus { color: var(--border-strong); }
.sub-feat-note { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); background: var(--paper-deep); padding: 0.1rem 0.5rem; border-radius: 66rem; }

/* ============ Onboarding (dashboard vide) ============ */
.rk-onboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.8rem; }
.rk-onboard-step {
    display: flex; gap: 0.8rem; align-items: flex-start; padding: 0.9rem 1rem;
    background: var(--paper-deep); border-radius: var(--radius); color: var(--text);
    transition: background 0.15s;
}
.rk-onboard-step:hover { background: var(--red-soft); text-decoration: none; }
.rk-onboard-step small { color: var(--text-muted); }
.rk-onboard-num {
    flex-shrink: 0; width: 1.9rem; height: 1.9rem; border-radius: 50%;
    background: var(--red); color: #fff; font-weight: 700; font-family: var(--serif);
    display: flex; align-items: center; justify-content: center;
}

/* ============ Première connexion (mot de passe temporaire) ============ */
.account-first-login {
    border: 0.13rem solid var(--warning);
    margin-bottom: 1.2rem;
    animation: flash-in 0.25s ease;
}
.account-first-login h2 { margin-bottom: 0.5rem; }
.account-first-login h2 i { color: var(--warning); margin-right: 0.4rem; }

/* ------------------------------------------------------------
   Import de fichier (pages/import.php)
   ------------------------------------------------------------ */
.imp { display: grid; gap: 1.25rem; max-width: 60rem; }

.imp-onglets { display: flex; gap: 0.5rem; margin: 1rem 0 1.5rem; flex-wrap: wrap; }
.imp-onglet {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 1rem; border-radius: 999px;
    border: 1px solid var(--border); color: var(--text-muted);
    font-size: 0.88rem; font-weight: 500;
}
.imp-onglet.is-active { background: var(--red); border-color: transparent; color: #fff; }

/* Zone de dépôt : cible large et évidente — c'est le premier geste, il ne
   doit pas se chercher. */
.imp-zone {
    display: grid; justify-items: center; gap: 0.35rem;
    padding: 2.5rem 1.5rem; margin-bottom: 1.25rem;
    border: 2px dashed var(--border-strong); border-radius: 1rem;
    text-align: center; cursor: pointer;
}
.imp-zone:hover { border-color: var(--red); }
.imp-zone i { font-size: 1.8rem; color: var(--red); margin-bottom: 0.35rem; }
.imp-zone span { font-size: 0.85rem; color: var(--text-muted); }
.imp-zone input[type="file"] { margin-top: 0.75rem; font-size: 0.85rem; }

/* Les tableaux d'import débordent vite : ils défilent dans leur cadre. */
.imp-table-wrap { overflow-x: auto; margin: 1rem 0; -webkit-overflow-scrolling: touch; }
.imp-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.imp-table th, .imp-table td {
    text-align: left; vertical-align: top;
    padding: 0.65rem 0.9rem 0.65rem 0;
    border-bottom: 1px solid var(--border);
}
.imp-table th { font-weight: 600; white-space: nowrap; color: var(--text-muted); font-size: 0.8rem; }
.imp-table select { width: 100%; min-width: 12rem; }
.imp-table tr.is-ignoree { opacity: 0.5; }
.imp-ex { color: var(--text-muted); font-size: 0.83rem; }
.imp-motif { display: block; color: var(--text-muted); font-size: 0.78rem; margin-top: 0.2rem; }

.imp-sous-titre { font-size: 0.95rem; font-weight: 600; margin: 1.75rem 0 0.5rem; }

/* Bilan de l'essai : le chiffre d'abord, la phrase ensuite. */
.imp-bilan { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1rem 0; }
.imp-chiffre {
    flex: 1 1 12rem; padding: 1rem 1.2rem;
    border: 1px solid var(--border); border-radius: 0.75rem;
    font-size: 0.85rem; color: var(--text-muted); line-height: 1.4;
}
.imp-chiffre span { display: block; font-size: 1.7rem; font-weight: 700; line-height: 1.1; color: var(--text); }
.imp-chiffre.is-ok span { color: var(--success); }
.imp-chiffre.is-rejet span { color: var(--danger); }
.imp-chiffre.is-doublon span { color: var(--warning); }

.imp-rejets { margin: 1rem 0; }
.imp-rejets summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; }
.imp-rejets ul { margin: 0.75rem 0 0; padding-left: 1.2rem; }
.imp-rejets li { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.35rem; }

.imp-final { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }

/* ------------------------------------------------------------
   Configurateur d'export (includes/export_modal.php)
   ------------------------------------------------------------ */
.exp-form { padding: 0 1.5rem 1.25rem; }

.exp-bloc { border: 0; padding: 0; margin: 0 0 1.5rem; }
.exp-bloc legend {
    padding: 0; margin-bottom: 0.6rem;
    font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--text-muted);
}

/* Les colonnes en grille : une liste verticale de treize cases obligerait
   à faire défiler la fenêtre avant même de choisir un format. */
.exp-cols {
    display: grid; gap: 0.35rem 1rem;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    margin-bottom: 0.6rem;
}
.exp-col { display: flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; cursor: pointer; }
.exp-col input { flex: none; }

.exp-tout {
    background: none; border: 0; padding: 0; cursor: pointer;
    font-size: 0.82rem; color: var(--red-ink); font-weight: 500;
    text-decoration: underline; text-underline-offset: 2px;
}

.exp-radio {
    display: flex; align-items: flex-start; gap: 0.65rem;
    padding: 0.6rem 0.75rem; margin-bottom: 0.4rem;
    border: 1px solid var(--border); border-radius: 0.6rem;
    cursor: pointer;
}
.exp-radio:has(input:checked) { border-color: var(--red); }
.exp-radio input { flex: none; margin-top: 0.15rem; }
.exp-radio span { display: grid; gap: 0.1rem; }
.exp-radio strong { font-size: 0.9rem; font-weight: 600; }
.exp-radio small { font-size: 0.8rem; color: var(--text-muted); }

/* ------------------------------------------------------------
   Fenêtre d'import (includes/import_modal.php)
   ------------------------------------------------------------ */
/* Pas de largeur particulière pour l'import : la fenêtre standard fait déjà
   1024 px, largement de quoi montrer le tableau des colonnes. Une règle
   dédiée avait été essayée puis retirée — elle sortait le dialogue du
   dimensionnement commun et le décalait à gauche. */

.imp-modal-corps { max-height: 72vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* Pendant un aller-retour serveur, le contenu s'estompe sans disparaître :
   la fenêtre ne saute pas d'une hauteur à l'autre. */
.imp-modal-corps.is-charge { opacity: 0.45; pointer-events: none; }
.imp-modal-corps { transition: opacity 0.18s ease; }

/* Dans la fenêtre, les cartes n'ont plus lieu d'être : la fenêtre EST la
   carte. On retire le cadre et le fond pour éviter la boîte dans la boîte. */
.imp-modal-corps .imp { display: block; }
.imp-modal-corps .card {
    background: none; border: 0; box-shadow: none;
    padding: 1.25rem 1.5rem; margin: 0;
}
.imp-modal-corps .card + .card { border-top: 1px solid var(--border); }
.imp-modal-corps .rk-section-title { font-size: 1.05rem; margin-bottom: 0.4rem; }
.imp-modal-corps .imp-zone { padding: 1.75rem 1.25rem; }

/* ------------------------------------------------------------
   Correction : les libellés de choix ne sont pas des étiquettes
   ------------------------------------------------------------ */
/* La règle globale `label` met en capitales — c'est juste pour une étiquette
   au-dessus d'un champ, mais illisible sur un intitulé de colonne et carrément
   fautif sur une phrase d'aide. Ces libellés-ci se lisent, ils ne s'annoncent
   pas : casse normale, graisse normale, couleur du texte courant. */
.exp-col,
.exp-radio,
.exp-radio strong,
.exp-radio small,
.imp-zone,
.imp-zone strong,
.imp-zone span {
    text-transform: none;
    letter-spacing: normal;
    color: var(--text);
}
.exp-col, .exp-radio small, .imp-zone span { font-weight: 400; }
.exp-radio small, .imp-zone span { color: var(--text-muted); }
.imp-zone strong { font-weight: 600; }

/* ------------------------------------------------------------
   Correction : la couche modale doit occuper l'écran
   ------------------------------------------------------------ */
/* `.modal` est en `position: fixed` avec `inset: 0`, ce qui devrait suffire.
   Mesuré : la couche se dimensionnait sur son contenu (725 px pour 1482 px
   d'écran), si bien que `justify-content: center` centrait dans le vide et
   que la fenêtre se collait à gauche. Le défaut ne se voyait pas sur les
   fenêtres existantes, dont le contenu est large. Largeur et hauteur posées
   explicitement : le centrage redevient celui de l'écran. */
.modal {
    width: 100vw;
    min-height: 100%;
}

/* ------------------------------------------------------------
   Import : réglages avancés
   ------------------------------------------------------------ */
.imp-formats { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; margin: -0.5rem 0 1.25rem; font-size: 0.8rem; color: var(--text-muted); }
.imp-formats code { font-size: 0.95em; }

/* Les réglages fins sont repliés : le cas courant ne demande rien, mais tout
   reste atteignable en un clic pour le fichier qui sort de l'ordinaire. */
.imp-avance { margin: 0 0 1.25rem; border: 1px solid var(--border); border-radius: 0.7rem; }
.imp-avance > summary {
    cursor: pointer; padding: 0.7rem 1rem;
    font-size: 0.88rem; font-weight: 600;
}
.imp-avance > summary small { font-weight: 400; color: var(--text-muted); margin-left: 0.5rem; }
.imp-avance[open] > summary { border-bottom: 1px solid var(--border); }

.imp-reglages {
    display: grid; gap: 0.9rem 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    padding: 1rem;
}
.imp-reglages-large { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.imp-reglages label { display: grid; gap: 0.3rem; text-transform: none; letter-spacing: normal; font-weight: 400; }
.imp-reglages label > span {
    font-size: 0.78rem; font-weight: 600; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.04em;
}

.imp-bloc { border: 1px solid var(--border); border-radius: 0.7rem; padding: 0 0 0.8rem; margin: 0 0 1.25rem; }
.imp-bloc legend { padding: 0 0.5rem; margin-left: 0.6rem; font-size: 0.88rem; font-weight: 600; }

.imp-table-large select, .imp-table-large input[type="text"] { width: 100%; min-width: 8.5rem; font-size: 0.85rem; }
.imp-ordre { margin-top: 0.35rem; }
.imp-defaut { min-width: 6rem; }

/* Deux colonnes vers un même champ : le sélecteur reste dans le formulaire
   même masqué, pour que son réglage survive à l'envoi. */
.imp-mode { margin-top: 0.4rem; }
.imp-mode > span {
    display: block; margin-bottom: 0.2rem;
    font-size: 0.72rem; font-weight: 400; text-transform: none;
    letter-spacing: normal; color: var(--text-muted);
}

/* Réparation : ces biens PASSENT, l'encart n'est donc pas une alerte. Trait
   d'attention à gauche, pas de fond coloré — le rouge ici ferait croire à un
   échec alors que rien n'est bloqué. */
.imp-repar {
    margin: 0 0 1.25rem; padding: 1rem 1.15rem;
    background: var(--paper); border-radius: var(--nm-radius);
    box-shadow: var(--nm-shadow-sm);
    border-left: 0.2rem solid var(--warning);
}
.imp-repar-tete strong { display: block; font-size: 0.92rem; color: var(--text); }
.imp-repar-tete small {
    display: block; margin-top: 0.3rem;
    font-size: 0.78rem; line-height: 1.5; color: var(--text-muted);
}
.imp-repar-liste { list-style: none; margin: 0.9rem 0; padding: 0; display: grid; gap: 0.5rem; }
.imp-repar-liste li {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 0.75rem; align-items: center;
}
.imp-repar-bien { min-width: 0; }
.imp-repar-titre {
    display: block; font-size: 0.85rem; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.imp-repar-bien small { font-size: 0.72rem; color: var(--text-muted); }
.imp-repar-champ { width: 100%; font-size: 0.85rem; }
.imp-repar-boutons { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.imp-repar-note {
    flex: 1 1 16rem; min-width: 0;
    font-size: 0.75rem; line-height: 1.45; color: var(--text-muted);
}
/* Sous la largeur d'une fenêtre étroite, le champ passe sous son bien plutôt
   que de réduire les deux à rien. */
@media (max-width: 620px) {
    .imp-repar-liste li { grid-template-columns: 1fr; gap: 0.3rem; }
}

/* Aperçu : le titre est la seule colonne au texte long. Sans bride il monopolise
   la largeur et empile les autres sur cinq lignes de haut. */
.imp-table-apercu { table-layout: auto; }
.imp-table-apercu td { vertical-align: top; }
.imp-cell-vide { color: var(--text-muted); text-align: center; }

/* Le titre est la seule colonne au texte long : laissé libre, il déroulait sur
   sept lignes et poussait les huit autres colonnes à la même hauteur, si bien
   qu'on ne voyait plus que trois biens sur un écran entier. Deux lignes, puis
   les points de suspension — le titre complet reste dans l'infobulle. */
.imp-cell-titre {
    max-width: 13rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}

/* L'en-tête suit le défilement : sans lui, on perd le nom des colonnes dès la
   deuxième ligne et il faut remonter pour savoir ce qu'on regarde. */
.imp-table-apercu thead th {
    position: sticky; top: 0; z-index: 1;
    background: var(--paper);
}

/* Aperçu : la cellule de notes concentre toutes les colonnes sans équivalent.
   Repliée, elle rend leur largeur aux vraies colonnes. */
.imp-cell-notes { max-width: 15rem; }
.imp-cell-notes summary {
    cursor: pointer; font-size: 0.8rem; color: var(--text-muted);
    white-space: nowrap;
}
.imp-cell-notes-detail {
    margin-top: 0.4rem; max-height: 11rem; overflow-y: auto;
    font-size: 0.78rem; line-height: 1.5; color: var(--text-muted);
}

/* Assistance : un encart, pas une alerte. Elle propose, elle n'avertit pas. */
.imp-ia {
    display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
    margin: 0 0 1.25rem; padding: 1rem 1.15rem;
    background: var(--paper); border-radius: var(--nm-radius);
    box-shadow: var(--nm-shadow-sm);
}
.imp-ia-txt { flex: 1 1 22rem; min-width: 0; }
.imp-ia-txt strong { display: block; font-size: 0.92rem; color: var(--text); }
.imp-ia-txt small {
    display: block; margin-top: 0.3rem;
    font-size: 0.78rem; line-height: 1.5; color: var(--text-muted);
}
/* Après un passage : la couleur du statut, en trait de gauche seulement —
   repeindre tout l'encart ferait croire à une action irréversible. */
.imp-ia.is-ok  { border-left: 0.2rem solid var(--success); }
.imp-ia.is-err { border-left: 0.2rem solid var(--warning); }
.imp-ia .btn { flex: 0 0 auto; }

.imp-garder {
    display: flex; align-items: center; gap: 0.4rem; margin-top: 0.35rem;
    font-size: 0.78rem; font-weight: 400; text-transform: none;
    letter-spacing: normal; color: var(--text-muted); cursor: pointer;
}

.imp-case {
    display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.6rem;
    align-items: start; margin: 0 0 1.25rem;
    font-size: 0.88rem; font-weight: 400; text-transform: none;
    letter-spacing: normal; color: var(--text); cursor: pointer;
}
.imp-case input { grid-row: 1; margin-top: 0.2rem; }
.imp-case small { grid-column: 2; font-size: 0.8rem; color: var(--text-muted); line-height: 1.45; }

/* ------------------------------------------------------------------
   Corrections d'adresse proposées — relecture ligne par ligne
   ------------------------------------------------------------------
   Le modèle propose, le service de cartes tranche, l'agence décide. L'écran
   doit donc rendre trois choses lisibles d'un coup d'œil : ce qu'il y avait,
   ce qui est proposé, et surtout CE QUE ÇA DONNE sur la carte — c'est
   l'information qui décide, pas la proposition elle-même. */
.geo-ia { margin-bottom: var(--pile, 1.2rem); }
.geo-ia-lignes { display: flex; flex-direction: column; gap: 0.2rem; }

.geo-ia-ligne {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 0.75rem 0.2rem;
    border-top: 0.06667rem solid var(--border);
}
.geo-ia-ligne:first-child { border-top: 0; }
/* Une ligne qu'on ne peut pas appliquer reste lisible mais s'efface : elle
   informe (« ouvre la fiche et pose le pin »), elle n'attend pas d'action. */
.geo-ia-ligne.est-inutile { opacity: 0.62; }

.geo-ia-coche { margin-top: 0.15rem; }
.geo-ia-corps { min-width: 0; flex: 1; }

.geo-ia-titre { margin: 0 0 0.15rem; font-size: 0.9rem; font-weight: 600; }

/* L'ancienne adresse barrée, la nouvelle en clair : la comparaison se fait
   sans avoir à relire deux fois. */
.geo-ia-avant {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-muted);
    text-decoration: line-through;
    text-decoration-color: var(--border-strong);
}
/* Adresse conservée telle quelle (seule la position change, ou rien n'est
   applicable) : pas de rature, elle n'est pas remplacée. */
.geo-ia-avant.est-inchange,
.geo-ia-ligne.est-inutile .geo-ia-avant { text-decoration: none; }
.geo-ia-apres { margin: 0.1rem 0 0; font-size: 0.86rem; font-weight: 600; color: var(--success); }

.geo-ia-meta { margin: 0.35rem 0 0; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.geo-ia-raison { font-size: 0.78rem; color: var(--text-muted); }

.geo-ia-pied {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 0.06667rem solid var(--border);
}
.geo-ia-pied .card-hint { margin: 0; }

/* ---- Recherche en langage naturel ----
   La proposition se pose au-dessus des résultats littéraux, et se lit comme
   une ligne de résultat : c'en est une, simplement fabriquée autrement. */
.search-ia {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    text-decoration: none;
    color: inherit;
    border-color: var(--red);
}
.search-ia:hover { background: var(--paper-deep); }
.search-ia > i:first-child { color: var(--red); flex-shrink: 0; }
.search-ia > span { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.search-ia-resume { color: var(--text-muted); font-size: 0.9rem; }
.search-ia-go { margin-left: auto; color: var(--red); flex-shrink: 0; }

/* ---- Bouton d'assistance dans un libellé de champ ---- */
.btn-ia {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    font: inherit;
    font-size: 0.8rem;
    color: var(--red-ink);
    background: transparent;
    border: 0.06667rem solid var(--red);
    border-radius: var(--radius);
    cursor: pointer;
}
.btn-ia:hover { background: var(--red-soft); }
.btn-ia:disabled { opacity: 0.55; cursor: default; }
.field-hint { margin: 0.35rem 0 0; font-size: 0.85rem; color: var(--text-muted); }
.field-hint-error { color: var(--red-ink); }
/* Le libellé devient une ligne : intitulé à gauche, assistance à droite.
   Sans :has(), le bouton reste simplement à la suite du texte — utilisable. */
.form-group label:has(.btn-ia) { display: flex; align-items: center; gap: 0.5rem; }

/* ---- Prochaine action : bouton d'assistance dans le champ ---- */
.deal-action-ia {
    flex-shrink: 0;
    padding: 0.2rem 0.4rem;
    color: var(--red);
    background: transparent;
    border: 0;
    cursor: pointer;
    opacity: 0.55;
}
.deal-action-form:hover .deal-action-ia,
.deal-action-ia:focus-visible { opacity: 1; }
.deal-action-ia:disabled { opacity: 0.3; cursor: default; }

/* Le champ « prochaine action » recevait moins de place que le prix et le
   sélecteur d'étape : une phrase proposée y arrivait coupée en plein milieu.
   Il prend maintenant la largeur restante, et la garde. */
.deal-line-foot > .deal-next { flex: 1 1 24rem; }
.deal-action-form { flex: 1 1 20rem; }