/* ============================================================
   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;
    --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) */
    --text-muted: #6B717A;  /* 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 */
    --success: #47795A;  --success-bg: #D3E0D7;
    --info:    #4A6591;  --info-bg:    #D5DDEB;
    --sky:     #4E7088;  --sky-bg:     #D4E0E7;
    --warning: #966829;  --warning-bg: #ECE0CB;
    --violet:  #6E5488;  --violet-bg:  #DFD8E9;
    --neutral: #5E646E;  --neutral-bg: #D9DDE4;
    --danger:  #B23A2C;  --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: 0.13333rem;
}

.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;
}

.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);
    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 */
}

.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;
}

/* 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) */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10.66667rem, 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); }

.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);
}

.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); }

.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);
    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);
    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); }

.fiche-tabs {
    display: flex;
    gap: 0.26667rem;
    border-bottom: 0.1rem solid var(--line-ink);
    margin-bottom: 1.33333rem;
    flex-wrap: wrap;
}
.fiche-tab {
    background: none;
    border: none;
    border-bottom: 0.13333rem solid transparent;
    margin-bottom: -0.1rem;
    padding: 0.66667rem 1rem;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: color 0.15s;
}
.fiche-tab:hover { color: var(--red); }
.fiche-tab.is-active { color: var(--red); border-bottom-color: var(--red); }
.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-tab.is-active .fiche-tab-count { color: var(--red); }
/* Libellé de l'onglet actif — visible uniquement sur le rail mobile. */
.fiche-tabs-current { display: none; }
.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: 0.26667rem;
    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);
    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; }

/* 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: #0F6E56; }
.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); 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);
    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);
}
.notif-autosave-hint i { color: #1D9E75; }
.notif-autosave-hint.is-saved { color: #1D9E75; }

/* 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); }

/* 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; }

.set-row-hint-warn { color: #B45309; }

.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 ============ */

.prop-grid {
    display: grid;
    /* 16.5rem ≈ 264px : 3 cartes sur laptop 1366, 4 sur écran 1600+ */
    grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
    gap: 1rem;
}

.prop-card {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    transition: border-color 0.25s var(--ease), 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; }

.prop-price {
    font-family: var(--sans);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--red);
    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; }

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

.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;
}

/* Migration géo non exécutée : liste pleine largeur, pas de carte */
.prop-split-nomap { grid-template-columns: 1fr; }

.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;
}
.prop-split:not(.prop-split-nomap) .prop-grid {
    /* Avec carte : la colonne liste = ~60% de l'ecran. 2 col par defaut ;
       3 col seulement en tres grand ecran (>=1520px) ou la liste a la place. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 1520px) {
    .prop-split:not(.prop-split-nomap) .prop-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.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; }

/* Sans carte (pleine largeur) : grille dense ~4 colonnes, défilement de page normal. */
.prop-split-nomap .prop-grid {
    grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr));
}

.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); }
.prop-pop-link { font-size: 0.8rem; font-weight: 600; color: var(--red); 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; }

/* ============ 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; }
    /* Carte masquee (toggle) : liste pleine largeur, grille adaptative ~2-3 col. */
    .prop-split .prop-grid { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
    /* 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; }
}

/* Vrai mobile : une seule colonne, cartes pleine largeur et lisibles. */
@media (max-width: 640px) {
    .prop-split:not(.prop-split-nomap) .prop-grid,
    .prop-split .prop-grid,
    .prop-split-nomap .prop-grid { grid-template-columns: 1fr; }
}

@media (min-width: 1025px) {
    /* Le toggle Liste/Carte ne sert qu'en écran étroit */
    .prop-view-toggle { 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);
    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);
    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);
}

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);
}

input::placeholder, textarea::placeholder { color: #9AA0A6; 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) */
.badge-role-admin { background: var(--red-soft); color: var(--red); border-color: var(--red-border); }
.badge-role-agent { background: var(--surface-2, #eef0f4); color: var(--text-muted, #667085); border-color: var(--border, #d0d5dd); }
.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, #d0d5dd);
    background: var(--surface, #fff);
    color: var(--text, #1d2939);
    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); }
.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); }
.users-you { color: var(--red); 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); }

/* 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, #d0d5dd); background: var(--surface, #fff);
    font-size: 0.95rem; letter-spacing: 0.08em;
}
.btn-text { background: none; border: none; color: var(--text-muted, #667085); 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%; }
.totp-qr-fallback { color: #98a1ac; 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, #667085); 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); }
.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(--surface-2, #f6f7f9); border: 1px dashed var(--border, #d0d5dd); 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, #667085); 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(--surface-2, #eef0f4); color: var(--text-muted, #667085); 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, #eaecf0); flex-wrap: wrap; }
.trash-row:first-child { border-top: none; }
.trash-item-label { font-weight: 600; }
.trash-item-date { color: var(--text-muted, #667085); 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) {
}

@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;
    }
    .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; }

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 170ms;
    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; transform: translateY(0.53333rem); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 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);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    align-self: center;
}
.lg-link-btn:hover { text-decoration: underline; }
.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);
}
.nav-link.active {
    background: var(--paper-deep);
    color: var(--red);
    box-shadow: var(--nm-inset-sm);
}
.nav-link.active i { color: var(--red); }
.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);
}

/* ── 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; }

    /* Onglets de fiche : rail d'icônes carrées (design C), libellé actif à droite. */
    .fiche-tabs {
        display: flex;
        align-items: center;
        gap: 0.53333rem;
        border-bottom: none;
        padding: 0.26667rem 0 0.4rem;
        flex-wrap: nowrap;
    }
    .fiche-tab {
        width: 2.7rem;
        height: 2.7rem;
        flex: 0 0 auto;
        justify-content: center;
        padding: 0;
        margin-bottom: 0;
        border-bottom: none;
        border-radius: 0.9rem;
        background: var(--paper-deep);
        box-shadow: var(--nm-inset-sm);
        position: relative;
        font-size: 0.95rem;
    }
    .fiche-tab.is-active {
        background: var(--red);
        color: #fff;
        border-bottom: none;
        box-shadow: 0.16rem 0.16rem 0.45rem var(--nm-dark);
    }
    .fiche-tab-label { display: none; }
    .fiche-tab-count {
        position: absolute;
        top: -0.35rem;
        right: -0.35rem;
        background: var(--paper);
        box-shadow: var(--nm-shadow-sm);
    }
    .fiche-tab.is-active .fiche-tab-count { color: var(--red); }
    .fiche-tabs-current {
        display: block;
        margin-left: auto;
        font-family: var(--serif);
        font-weight: 700;
        font-size: 0.95rem;
        color: var(--text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }
}

@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);
        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 : espace les cartes de résultats empilées */
.page-search .content > .card { margin-bottom: 1rem; }
.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, #c9ced6); 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, #F0F2F5); color: var(--text-muted, #6B717A);
    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, #C0392B); }
.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, #6B717A); }
.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, #F0F2F5); border-radius: 10px; padding: 0.55rem 0.75rem;
}
.doc-ico { color: var(--red, #C0392B); 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, #6B717A); }

.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, #E6D6D3); color: var(--red, #C0392B);
}
.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); 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);
    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); }