/* ══════════════════════════════════════════════════════════════════════════
   OFF/MKT — Mobile adaptations
   ══════════════════════════════════════════════════════════════════════════
   PRINCIPE : desktop est la baseline. Ce fichier ajoute UNIQUEMENT des rules
   @media (max-width: N) qui s'activent sur mobile/tablette étroite. Aucun
   override hors media query → zéro impact desktop.

   Chargé en DERNIER dans base.html → prévaut sur les rules de même
   spécificité quand les conditions du viewport matchent.

   Breakpoints :
     - 768px : smartphones en paysage + petits tablets portrait
     - 480px : smartphones portrait standard

   RÈGLE : ne jamais masquer de contenu nécessaire, toujours préférer :
     - wrap / stack
     - scroll horizontal contenu
     - typo réduite
     - padding resserré
     - grids 1 colonne
   ══════════════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────────────
   1. GLOBAL : prévention scroll horizontal + box-sizing
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden;
        /* font-size base légèrement réduit pour laisser respirer les titres */
    }

    /* Padding container principal resserré */
    .main-content {
        padding: 14px 12px 24px;
    }

    /* Empêche tout élément large de forcer un scroll horizontal */
    img, video, canvas, svg, iframe {
        max-width: 100%;
        height: auto;
    }

    /* Tableaux : garantir lisibilité interne + scroll horizontal wrapper */
    .data-table,
    table.data-table {
        min-width: 560px;  /* garde la lisibilité interne */
    }
    /* Wrappers existants (si ajoutés par les templates) */
    .leads-table-wrap,
    .biens-table-wrap,
    .acq-table-wrap,
    .dem-table-wrap,
    .table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Quand la table est directement dans une section-card sans wrapper
       (templates pro/biens, pro/acquereurs, pro/demandes) : on rend la card
       elle-même scrollable horizontalement via :has() (Chrome 105+, Safari 15.4+,
       Firefox 121+, tous navigateurs mobiles modernes). */
    .glass-card:has(> .data-table),
    .section-card:has(> .data-table),
    .glass-card.section-card:has(> .data-table) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* v95.43.104 : transformation table → cards verticales pour .acq-table.
       Désactive le min-width 560 (qui force scroll horizontal) et reformate
       chaque <tr> comme une card lisible plein écran. Chaque <td> affiche son
       data-label en gauche et la valeur à droite.
       Strictement scoped : desktop reste inchangé (table standard). */
    .acq-table.data-table { min-width: 0; }
    .acq-table-wrap { overflow-x: visible; }
    .glass-card.section-card:has(> .acq-table-wrap),
    .glass-card.section-card:has(> .acq-table) {
        overflow-x: visible;
    }

    .acq-table,
    .acq-table thead,
    .acq-table tbody,
    .acq-table tr,
    .acq-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .acq-table colgroup,
    .acq-table thead { display: none; }

    .acq-table tr {
        background: rgba(255, 255, 255, 0.025);
        border: 1px solid rgba(212, 168, 140, 0.15);
        border-radius: 14px;
        padding: 14px 14px 10px;
        margin-bottom: 12px;
        position: relative;
    }
    .acq-table tr:hover td { background: transparent; }

    .acq-table td {
        padding: 8px 0;
        text-align: right;
        position: relative;
        padding-left: 110px;
        min-height: 28px;
        border: none;
    }
    .acq-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        top: 8px;
        font-size: 10.5px;
        text-transform: uppercase;
        letter-spacing: 1.2px;
        color: var(--text-muted, #8a98ab);
        font-weight: 600;
        max-width: 100px;
        text-align: left;
    }

    /* Cellule "Acquéreur" : on garde le titre en grand, label à part */
    .acq-table td.acq-who {
        padding-left: 0;
        text-align: left;
        padding-bottom: 12px;
        margin-bottom: 8px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }
    .acq-table td.acq-who::before {
        display: none; /* l'identité parle d'elle-même, pas besoin du label */
    }
    .acq-table td.acq-who strong {
        font-size: 16px;
        white-space: normal;
        overflow: visible;
        display: block;
    }
    .acq-table td.acq-who .acq-email {
        margin-top: 6px;
        font-size: 12px;
    }

    /* Cellules avec pills/badges : laisser respirer */
    .acq-table td .urg-pill,
    .acq-table td .score-badge,
    .acq-table td .acq-neglect-pill {
        margin: 0;
    }

    /* Cellule Actions (boutons Market + Appeler) : centrer + plus de gap */
    /* v95.43.107 fix 2 : l'inline CSS acquereurs.html force `display:table-cell
       !important` sur [data-inbox-layout="actions"], ce qui annulait mon
       display:flex en mobile et écrasait le gap. On match exactement le même
       selector + !important pour reprendre le contrôle en mode mobile. */
    .acq-table td.inbox-marker-cell,
    .acq-table td.inbox-marker-cell[data-inbox-layout="actions"] {
        padding-left: 0 !important;
        text-align: center !important;
        padding-top: 12px;
        margin-top: 8px;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        display: flex !important;
        gap: 16px !important;
        justify-content: flex-end !important;
    }
    .acq-table td.inbox-marker-cell::before { display: none; }
    .acq-table td.inbox-marker-cell .btn,
    .acq-table td.inbox-marker-cell[data-inbox-layout="actions"] > * {
        flex: 1;
        max-width: 140px;
    }

    /* ─── v95.43.107 : transformation cards pour .biens-table (parité avec
       .acq-table). /pro/biens avait un cell_overflow 20px en mobile sur la
       cellule "Aperçu" : les boutons Aperçu+Market+(Appeler) dans la cell
       biens-actions-cell débordaient en mode table compressée. Cards layout
       force chaque ligne en card verticale, fin du débordement. */
    .biens-table.data-table { min-width: 0; }
    .biens-table-wrap { overflow-x: visible; }
    .glass-card.section-card:has(> .biens-table-wrap),
    .glass-card.section-card:has(> .biens-table) {
        overflow-x: visible;
    }

    .biens-table,
    .biens-table thead,
    .biens-table tbody,
    .biens-table tr,
    .biens-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
    .biens-table colgroup,
    .biens-table thead { display: none; }

    .biens-table tr {
        background: rgba(255, 255, 255, 0.025);
        border: 1px solid rgba(212, 168, 140, 0.15);
        border-radius: 14px;
        padding: 14px 14px 10px;
        margin-bottom: 12px;
        position: relative;
    }
    .biens-table tr:hover td { background: transparent; }

    .biens-table td {
        padding: 8px 0 8px 110px;
        text-align: right;
        position: relative;
        min-height: 28px;
        border: none;
    }
    .biens-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        top: 8px;
        font-size: 10.5px;
        text-transform: uppercase;
        letter-spacing: 1.2px;
        color: var(--text-muted, #8a98ab);
        font-weight: 600;
        max-width: 100px;
        text-align: left;
    }

    /* Référence en titre (full width, no label) */
    .biens-table td.biens-who {
        padding: 0 0 12px 0;
        text-align: left;
        margin-bottom: 8px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }
    .biens-table td.biens-who::before { display: none; }
    .biens-table td.biens-who strong {
        font-size: 16px;
        white-space: normal;
        display: block;
    }

    /* Cellule Actions (Aperçu + Market) en bas, centrée, flex avec gap large */
    .biens-table td.biens-actions-cell {
        padding: 12px 0 0 0;
        text-align: center;
        margin-top: 8px;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        display: flex;
        gap: 14px;
        justify-content: flex-end;
    }
    .biens-table td.biens-actions-cell::before { display: none; }
    .biens-table td.biens-actions-cell .btn-icon-action,
    .biens-table td.biens-actions-cell .btn {
        flex: 1;
        max-width: 140px;
        white-space: nowrap;
    }

    /* DPE pill ne wrap pas */
    .biens-table td:has(.card-list-pill),
    .biens-table td:has(.score-badge) {
        white-space: normal;
    }

    /* Wrap properly pour textes longs (secteur multi-communes) */
    .acq-table td.acq-secteur,
    .acq-table td.acq-amount,
    .acq-table td.acq-surface {
        white-space: normal;
    }
    .acq-table td .acq-amount-sub {
        display: block;
        margin-top: 2px;
    }
}


/* ─────────────────────────────────────────────────────────────────────────
   2. TYPOGRAPHIE : réduire dashboard titles / subtitles
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .dashboard-title { font-size: 22px; letter-spacing: -0.5px; }
    .dashboard-eyebrow { font-size: 10px; letter-spacing: 2px; }
    .dashboard-subtitle { font-size: 13px; line-height: 1.5; }

    /* Dashboard header : passage de row (justify-between) à column */
    .dashboard-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
    .dashboard-actions {
        width: 100%;
        flex-wrap: wrap;
        gap: 8px;
    }
    .dashboard-actions .btn {
        flex: 1 1 auto;
        min-height: 44px;  /* zone tactile confortable */
    }
}


/* ─────────────────────────────────────────────────────────────────────────
   3. NAVBAR : pas de navigation user connecté → déjà hamburger géré par
   origin.css ligne 939. Ajouts : alignement logo + user name.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .navbar {
        /* Garde wrap pour le dropdown nav-open */
        padding: 10px 14px;
    }
    .nav-brand .logo-offmkt,
    .logo-offmkt.lg {
        /* Logo légèrement plus petit pour laisser de la place au burger/user */
        font-size: 22px;
    }
    .nav-user {
        margin-left: auto;
    }
}


/* ─────────────────────────────────────────────────────────────────────────
   4. PRO DASHBOARD : pro-hero, bento, carousel, matrix fan
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Hero padding resserré (le CSS dashboard a déjà 640px, on renforce à 768) */
    .pro-hero { padding: 20px 18px 16px; margin-bottom: 14px; border-radius: 16px; }
    .pro-title { font-size: 24px; }
    .pro-hero-top { gap: 18px; flex-direction: column; align-items: stretch; }
    .pro-hero-greet { min-width: 0; }

    /* KPIs en 2 colonnes */
    .pro-kpis {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px 10px;
        padding-left: 0; border-left: none;
    }
    .kpi { min-width: 0; }
    .kpi-value { font-size: 22px; }
    .kpi-label { font-size: 9px; }

    /* Pro share chips (liens nominatifs) : empile à la verticale */
    .pro-share-chips {
        flex-direction: column;
        gap: 10px;
    }
    .share-chip {
        min-width: 0;  /* permet au bouton de prendre toute la largeur */
        width: 100%;
    }

    /* Bento : déjà 2 cols @ 960px, on force 1 col sur mobile pour confort tactile */
    .pro-bento {
        grid-template-columns: 1fr !important;
        grid-auto-rows: auto;  /* hauteur fixe 170px cause des tuiles rognées */
        gap: 12px;
    }
    .p-tile {
        grid-column: span 1 !important;
        grid-row: auto !important;
        padding: 18px 18px;
    }
    /* Tuiles dont le contenu nécessite plus de place en mobile */
    .t-hero, .t-fan, .t-mapbig { min-height: 220px; }
    .t-heat, .t-affinity, .t-topmatch-wide { min-height: 180px; }

    /* ══ FIX bugs tuiles mobile (signalés screenshots iPhone) ══
       Chaque tuile du bento avait un layout desktop hardcodé qui explosait sur 390px :
       - hero-big-num 86px → gigantesque sur viewport étroit
       - fan-head en flex row → titre + légende s'entrelacent
       - t-affinity grid-template auto 1fr → gauge 220px écrase le texte à droite
       - t-topmatch-wide grid 2 cols → se chevauche */

    /* Hero "Demandes à traiter" : la vraie classe est .t-demandes-num (96px)
       PAS .hero-big-num. Fix iphone v45 ciblait la mauvaise classe.
       La tuile .t-demandes-mer est aussi grid-column span 2 × row span 2 →
       forcée span 1 par la règle bento plus haut. Ici on réduit le "4". */
    .t-demandes-num {
        font-size: 60px !important;
        letter-spacing: -2px !important;
        line-height: 1.1 !important;
        padding: 4px 0 !important;
    }
    .t-demandes-mer { padding: 22px 20px !important; gap: 6px !important; }
    .t-demandes-title { font-size: 13px !important; max-width: 100% !important; }
    .t-demandes-sub { font-size: 11px !important; }

    /* Legacy classes (conservées par sécurité si templates différents) */
    .hero-big-num {
        font-size: 54px !important;
        letter-spacing: -1.5px !important;
        margin: 4px 0 !important;
    }
    .t-hero-demandes { padding: 22px 20px !important; }
    .hero-caption { font-size: 12px; max-width: 100%; }

    /* Décision produit : 3 tuiles data-heavy masquées sur mobile (non utilisables
       sur petit écran — map interactive, chart fan, slider mountain) :
       - .t-fan      "Rythme commercial"
       - .t-mapbig   "Territoire · Sud Loire"
       - .t-mountain "Territoire du bien"
       → accessibles en desktop uniquement, UX mobile allégée. */
    .t-fan,
    .t-mapbig,
    .t-mountain {
        display: none !important;
    }

    /* Affinity : 1 colonne + gauge centré (le grid 2 cols écrasait le texte à droite) */
    .t-affinity {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding: 22px 20px !important;
        text-align: center;
    }
    .aff-gauge {
        width: 200px !important;
        height: 120px !important;
        margin: 0 auto !important;
    }
    .aff-body {
        min-width: 0 !important;
        text-align: center;
    }
    .aff-body > * { text-align: center !important; }

    /* Topmatch wide : si grid 2 cols, on stack */
    .t-topmatch-wide {
        padding: 20px 18px !important;
    }
    .topmatch-bien { word-break: break-word; }

    /* Mini-cards carousel (dashboard "Nouveautés") :
       réutilise les règles déjà présentes @ 640px mais on force width=160
       et padding centré dès 768px. Le overflow-x du track devient natif. */
    .cards-carousel {
        max-width: 100%;
        overflow-x: hidden;
    }
    .carousel-track {
        padding: 24px calc(50% - 80px) 30px calc(50% - 80px) !important;
    }
    .carousel-track > .mini-card {
        flex: 0 0 auto !important;
    }
    .mini-card {
        width: 160px !important;
    }
    .carousel-track > .mini-card + .mini-card { margin-left: -24px !important; }

    /* MC-card (bento dashboard) : évite le débordement du titre + subtitle */
    .mc-card-title { font-size: 13px; line-height: 1.25; }
    .mc-card-subtitle { font-size: 11px; }

    /* Acquéreurs breakdown (tuile 2 cols) : tient sur la largeur */
    .breakdown-label { min-width: 0; }

    /* Nav tiles (Débrief, Estimation pro, Market) : padding vertical réduit */
    .t-nav, .t-nav-wide {
        min-height: 140px !important;
        padding: 24px 18px !important;
    }

    /* Territoire bien (carousel intérieur map) : labels wrap */
    .tb-bien-name { word-break: break-word; }

    /* Tuile "Territoire du bien" (mountain slider) — nom tronqué "Bien Geor..."
       car white-space:nowrap + overflow:hidden + text-overflow:ellipsis.
       Sur mobile on laisse wrap pour voir le nom complet. */
    .mtn-bien-name {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        word-break: break-word !important;
        font-size: 17px !important;
        line-height: 1.2 !important;
    }
    /* Topbar : title + nav peuvent se stacker si l'espace manque */
    .mtn-topbar {
        flex-wrap: wrap !important;
        padding: 14px 18px 8px !important;
        gap: 10px !important;
    }
    .mtn-topbar-title { flex: 1 1 200px; min-width: 0; }
    .mtn-nav { margin-left: auto; }
    .mtn-slide { padding: 10px 16px 6px !important; }
    .mtn-eyebrow { font-size: 9.5px !important; }
    .mtn-sub { font-size: 10.5px !important; }
}

@media (max-width: 480px) {
    .pro-kpis {
        grid-template-columns: 1fr 1fr;  /* 2 cols reste OK, 1 serait trop vide */
    }
    .kpi-value { font-size: 20px; }
}


/* ─────────────────────────────────────────────────────────────────────────
   5. VENDEUR DASHBOARD : vd-main-grid déjà @ 820px. Compléments :
   cartes acquéreurs, stack solitaire, bien-head, activity feed
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Grille acquéreurs : cartes un peu plus étroites (2 col si écran permet) */
    .vd-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 14px;
    }
    .vd-card {
        padding: 14px 12px 48px 12px;
        border-radius: 18px;
    }
    .vd-card-num { font-size: 16px; }
    .vd-info-val { font-size: 13px; }
    .vd-info-val.budget { font-size: 14px; }
    .vd-card-foot { bottom: 10px; left: 12px; right: 12px; }

    /* Stack solitaire : prend pleine largeur, offset réduit */
    .vd-stack-section {
        padding: 18px 14px 22px;
        border-radius: 14px;
    }
    .vd-stack {
        width: 100%;
        --offset: 48px;
        --stack-card-h: 260px;
    }
    .vd-stack-card {
        padding: 14px 12px;
    }

    /* Bien-head (tile du bien du vendeur) : resserre padding */
    .vd-bien-head {
        padding: 18px 16px !important;
    }

    /* Hero / activity feed */
    .vd-hero { padding: 20px 18px; }
    .vd-feed-title { font-size: 12px; }
    .vd-feed-item { padding: 10px 12px; }

    /* Matches section title */
    .vd-market-title { font-size: 11px; letter-spacing: 1.6px; }
}

@media (max-width: 480px) {
    /* En très étroit : 1 colonne, carte pleine largeur */
    .vd-grid {
        grid-template-columns: 1fr;
    }
    .vd-card { aspect-ratio: auto; min-height: 280px; }
}


/* ─────────────────────────────────────────────────────────────────────────
   6. VENDEUR "MES ACQUÉREURS" : columns deck → 1 colonne verticale
   avec stack par statut conservé
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .ma-wrap { padding: 6px 4px 40px; }
    .ma-hero {
        padding: 18px 18px;
        margin-bottom: 18px;
    }
    .ma-hero-heading { font-size: 18px; }
    .ma-counters { gap: 8px; }
    .ma-counter { padding: 6px 12px; font-size: 11.5px; }

    /* Grid columns auto-fit déjà OK avec minmax(220px, 1fr) — va stacker
       naturellement en 1 colonne sous 440px. On renforce la hauteur du stack
       pour qu'elle reste lisible même avec 3-4 cartes. */
    .ma-columns {
        gap: 14px;
    }
    .ma-col {
        min-height: auto;  /* pas de hauteur forcée sur mobile */
        padding: 14px 12px 18px;
    }
    .ma-stack {
        --offset: 52px;
        --card-h: 215px;
    }
    .ma-stack-card {
        padding: 12px 12px;
    }

    /* Flip overlay (back rapport visite) : plein écran confortable */
    .ma-flip-card {
        /* sera recalé dynamiquement par JS, on cap la hauteur max */
    }
    .ma-flip-back {
        padding: 18px 18px 22px;
    }
}


/* ─────────────────────────────────────────────────────────────────────────
   7. MODALS PRO (detail bien/acq/demande/lead)
   Plein écran confortable sur mobile + padding resserré
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Overlay modals génériques */
    .modal-overlay,
    .ad-modal-overlay,
    .mc-modal-overlay,
    .ma-modal-overlay {
        padding: 12px;
    }
    .modal-card,
    .ad-modal,
    .ma-modal {
        max-width: 100%;
        max-height: calc(100vh - 24px);
        border-radius: 14px;
    }

    /* Flip card overlay (utilisé sur vendeur dashboard ET mes_acquereurs) */
    .flip-card-v,
    .ma-flip-card {
        /* width/height sont set inline par JS, on pose des contraintes via les faces */
    }
    .flip-back-v,
    .ma-flip-back {
        padding: 20px 18px 24px !important;
    }
    .fb-section-title,
    .ma-back-section-title {
        font-size: 10px;
    }
    .fb-row,
    .ma-back-row {
        font-size: 12.5px;
    }
    .fb-title { font-size: 18px; }
    .ma-back-title { font-size: 18px; }
}


/* ─────────────────────────────────────────────────────────────────────────
   8. AUTH (login / register / forgot / reset) : déjà .auth-card @ 768,
   on renforce avec padding mobile + input height tap-friendly
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .auth-container {
        min-height: 100vh;
        padding: 16px;
        display: flex; align-items: center; justify-content: center;
    }
    .auth-card {
        width: 100%;
        padding: 24px 20px;
        border-radius: 18px;
    }
    .auth-header h1 {
        font-size: 22px;
    }
    .auth-subtitle { font-size: 13px; }
    .role-selector {
        flex-direction: column;
        gap: 6px;
    }
    .role-btn {
        width: 100%;
        padding: 12px 14px;
        min-height: 44px;
    }
    .neo-input {
        min-height: 44px;  /* tap-friendly */
        font-size: 16px;   /* empêche le zoom automatique iOS */
    }
    .btn-full { min-height: 46px; }
}


/* ─────────────────────────────────────────────────────────────────────────
   9. ACCOUNT : liens de partage (share-item) row → column,
   régénérer bouton pleine largeur
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .acc-page { padding: 0 14px; margin-top: 20px; }
    .acc-card { padding: 22px 18px; }
    .acc-title { font-size: 22px; }

    /* Share item : col → row avec bouton en bas pleine largeur */
    .acc-share-item {
        flex-direction: column;
        align-items: stretch;
    }
    .acc-share-copy {
        border-left: none !important;
        border-top: 1px solid rgba(212, 168, 140, 0.18);
        padding: 10px 20px;
        min-height: 44px;
        width: 100%;
    }
    .acc-regen-btn {
        width: 100%;
        justify-content: center;
        min-height: 44px;
    }

    .acc-field input { min-height: 44px; font-size: 16px; }
    .acc-btn { min-height: 44px; padding: 11px 18px; width: 100%; }
}


/* ─────────────────────────────────────────────────────────────────────────
   10. LANDING : déjà @ 760px sur lp-hero/cards. On renforce hero + nav.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .lp-nav { padding: 14px 16px !important; }
    .lp-nav-actions { gap: 14px; }
    .lp-title { font-size: 34px !important; line-height: 1.1; }
    .lp-subtitle { font-size: 15px; }
    .lp-hero { padding: 40px 18px 60px; }
    .lp-card { padding: 20px; }
}

@media (max-width: 480px) {
    .lp-title { font-size: 28px !important; }
    .lp-nav-actions .lp-link { font-size: 12px; }
}


/* ─────────────────────────────────────────────────────────────────────────
   11. FORMULAIRES "Nouveau bien" / "Nouveau acquéreur" (modal qa-form)
   Lignes 2 colonnes → 1 colonne en mobile
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .qa-row {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .qa-field input,
    .qa-field select,
    .qa-field textarea {
        min-height: 44px;
        font-size: 16px;
    }
    .qa-actions {
        flex-direction: column-reverse;
        gap: 10px;
    }
    .qa-actions .btn {
        width: 100%;
        min-height: 44px;
    }
}


/* ─────────────────────────────────────────────────────────────────────────
   12. PAGES PRO : biens / leads / acquereurs / demandes — tables
   Force un wrap-scroll horizontal pour ne pas casser la page.
   Les filter-bar sont mis en column.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .filter-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px;
    }
    .filter-bar .search-input,
    .filter-bar input[type="search"] {
        width: 100%;
        min-height: 44px;
        font-size: 16px;
    }

    /* Section cards : padding resserré */
    .glass-card.section-card,
    .section-card {
        padding: 18px 14px;
        border-radius: 14px;
    }

    /* Pro/biens table modal valider-estimation : val-grid g3 → 1 col */
    .val-grid.g3,
    .val-grid.g2 {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .val-modal {
        max-width: 100% !important;
        border-radius: 14px;
        max-height: calc(100vh - 24px);
    }
    .val-modal-section { padding: 16px 18px; }
    .val-modal-actions {
        flex-direction: column-reverse;
        gap: 10px;
    }
    .val-modal-actions .btn-cancel,
    .val-modal-actions .btn-validate {
        width: 100%;
        min-height: 46px;
    }
}


/* ─────────────────────────────────────────────────────────────────────────
   13. PRO DEMANDES : actions en colonne (détail + valider + refuser)
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .dem-actions {
        flex-direction: column !important;
        gap: 6px;
    }
    .dem-act-btn,
    .dem-act-form {
        width: 100%;
    }
    .dem-act-btn {
        min-height: 38px;
    }
    /* Quick-edit select statut suivi : garde touch-friendly */
    .qe-statut-suivi { min-height: 34px; font-size: 12px; }
}


/* ─────────────────────────────────────────────────────────────────────────
   14. COOKIES BANNER : layout column, texte lisible
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .cookies-banner {
        padding: 14px 16px;
        flex-direction: column;
        gap: 10px;
        align-items: stretch !important;
    }
    .cookies-banner-text { font-size: 12.5px; line-height: 1.5; }
    .cookies-banner-btn {
        width: 100%;
        min-height: 44px;
    }
}


/* ─────────────────────────────────────────────────────────────────────────
   15. TOASTS / BANNERS : prévient débordement latéral
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .auth-toast,
    #proShareToast,
    .origin-welcome-toast {
        top: 12px !important;
        right: 12px !important;
        left: 12px !important;
        max-width: calc(100vw - 24px) !important;
    }
}


/* ─────────────────────────────────────────────────────────────────────────
   16. TOUR ONBOARDING : tooltip pleine largeur utile sur mobile
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Le JS positionne inline le tooltip à gauche selon rect.left de la cible,
       ce qui peut le sortir du viewport mobile. On force position en bas + centré. */
    .origin-tour-tooltip {
        left: 12px !important;
        right: 12px !important;
        top: auto !important;
        bottom: 16px !important;
        width: auto !important;
        max-width: calc(100vw - 24px) !important;
        transform: none !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   17. TOUCH TARGETS ≥44×44px — a11y WCAG 2.5.5 (mobile ≤768px)
   ─────────────────────────────────────────────────────────────
   Audit P3 Ado : 37 touch targets <44px identifiés.
   /pro/dashboard :
     - Flèches carousel ← → (.carousel-arrow, .p-tile .arrow) 32×32
     - "Voir le détail →" (.btn-link/.btn-sm) 93×25
     - "Ouvrir la fiche →" 138×25
     - Hamburger 40×40 (sub-seuil)
     - "Sophia Ricci" avatar link 75×20
     - .mtn-nav-btn 34×34 (carrousel main market)
   Landing : nav 10 liens (Mentions, Espace agence, Espace pro,
     Déjà inscrit, En savoir plus) 13-18px hauteur.
   Login : tabs rôle 34px, "Mot de passe oublié"/"Créer compte" 16-17px.
   Register : checkbox CGU native 13px.

   Règle WCAG 2.5.5 (Enhanced Target Size) = 44×44 min.
   Desktop intact : toutes les règles sont dans un @media (max-width:768px).
*/
@media (max-width: 768px) {
    /* v64 : sélecteurs augmentés de spécificité (double-classe, ou
       tag.class) pour battre les règles desktop équivalentes dans
       pro-dashboard.css qui se charge APRÈS mobile.css sur /pro/*. */
    .carousel-arrow,
    .p-tile .arrow,
    button.mtn-nav-btn,
    button.nav-btn,
    .mtn-nav .mtn-nav-btn,
    .carousel-nav .nav-btn,
    .mtn-nav-btn,
    .nav-btn,
    .btn-sm,
    .btn-link,
    .mc-btn,
    a.btn,
    a.nav-link,
    .nav-user a,
    .auth-footer a,
    .lp-footer a,
    .role-btn,
    .tab-btn,
    button[type="submit"],
    .cookies-banner-btn,
    #skip-splash {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 10px 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Pour .nav-btn / .mtn-nav-btn, la règle desktop fixe
       width:32/34px et height:32/34px. min-* gagne mathématiquement,
       mais on verrouille width/height explicitement pour éliminer tout
       doute sur la cascade. */
    button.nav-btn,
    button.mtn-nav-btn,
    .nav-btn,
    .mtn-nav-btn {
        width: 44px !important;
        height: 44px !important;
    }

    /* Custom checkbox CGU : 24×24 visuel + zone touch 44×44 via label */
    input[type="checkbox"]:not([type="radio"]) {
        width: 24px;
        height: 24px;
        min-width: 24px;
    }
    input[type="checkbox"] + label,
    label:has(input[type="checkbox"]) {
        min-height: 44px;
        display: flex;
        align-items: center;
        gap: 12px;
        cursor: pointer;
    }

    /* Avatar / user link (ex: "Sophia Ricci" 75×20) : zone cliquable augmentée */
    /* v95.43.112 : sur iPhone réel (393px), le combo logo+burger+avatar+nom+
       déconnexion débordait → texte tronqué visible "ullivan DamiDéconnexio".
       Fix : nom avec ellipsis + max-width réduit + padding compact. La règle
       générique .nav-user a {padding:10px 14px} est aussi réduite plus bas. */
    .nav-user-name {
        padding: 12px 8px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        max-width: 110px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* v95.43.109 fix 2 : la règle générique `.navbar .nav-user a { min-height:44px }`
       (déclarée APRÈS dans la cascade, specificity 0,2,1 = 21) écrasait ma première
       tentative `.nav-user a.nav-user-avatar` qui avait la même spécificité 21
       → tie de spécificité, last-wins → 44px imposé. Fix : selector
       `.navbar .nav-user a.nav-user-avatar` = spécificité 0,3,1 = 31, beats 21. */
    .navbar .nav-user a.nav-user-avatar,
    .navbar .nav-user-avatar,
    .nav-user-avatar {
        padding: 0 !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        max-width: 40px !important;
        max-height: 40px !important;
        flex-shrink: 0;
    }
    .navbar .nav-user-avatar img,
    .nav-user-avatar img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
        object-position: center top;
        display: block;
    }

    /* Footer legal links (Mentions, Agence, etc.) : line-height augmenté */
    .footer a,
    .lp-footer a,
    .auth-footer a {
        line-height: 44px;
        padding: 0 8px;
    }

    /* v64 : Liens header navbar (Déjà inscrit ?, Espace Pro, Espace
       agence, etc.) mesurés 37px de haut par P2 — on force ≥44. */
    .navbar .nav-link,
    .navbar a.nav-link,
    .nav-links .nav-link,
    .nav-user .nav-logout,
    .navbar .nav-user a,
    .lp-nav a,
    header nav a {
        min-height: 44px !important;
        padding: 10px 14px;
        display: inline-flex;
        align-items: center;
    }

    /* Logo OFF/MKT (header) : 105×22 mesuré — zone cliquable élargie. */
    .logo-offmkt,
    a.logo-offmkt,
    .nav-brand a,
    .nav-brand .logo-offmkt {
        min-height: 44px;
        padding: 10px 12px;
        display: inline-flex;
        align-items: center;
    }

    /* iOS Safari : font-size < 16px sur un input déclenche un
       auto-zoom du viewport au focus. On force ≥16px sur tous les
       inputs textuels pour empêcher ce zoom (WCAG 1.4.10 reflow +
       UX iPhone). */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    input[type="date"],
    select,
    textarea {
        font-size: 16px !important;
    }

    /* v64 : share-chip-arrow (flèche droite dans .share-chip) mesurée
       10×12 par P2. Le bouton parent .share-chip fait déjà ≥44px de
       haut (touch target couvert). On augmente juste la lisibilité. */
    .share-chip-arrow {
        font-size: 18px;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   v95.43.110 — UX REFINEMENT (hiérarchie visuelle cards mobile + tablette)
   ───────────────────────────────────────────────────────────────────────────
   Cards mobile rendaient correctement (zéro overflow) mais étaient un dump
   uniforme label-value sans hiérarchie. Le pro veut voir NOM + PILLS d'aperçu
   d'abord, détails ensuite, actions en bas. Refonte ordering + emphasis.

   STRICTEMENT scoped @media (max-width: 1100px) pour acquereurs (extension
   de 768 → 1100 = élimine le scroll horizontal en zone tablette).
   Desktop ≥ 1101px : strictement INCHANGÉ.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
    /* A. Extension cards transformation à la zone tablette (769-1100px).
       Auparavant : 0-768 cards, 769-1199 table scrollable hozirontale (UX moche).
       Maintenant : 0-1100 cards (UX cohérente), 1101+ table desktop normale. */
    .acq-table.data-table { min-width: 0 !important; }
    .acq-table-wrap { overflow-x: visible !important; }
    .glass-card.section-card:has(> .acq-table-wrap),
    .glass-card.section-card:has(> .acq-table) {
        overflow-x: visible !important;
    }
    .acq-table,
    .acq-table thead,
    .acq-table tbody,
    .acq-table tr,
    .acq-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
    .acq-table colgroup,
    .acq-table thead { display: none; }

    /* B+D. Card en flex column pour réordonner via `order` + hiérarchie visuelle */
    .acq-table tr {
        display: flex !important;
        flex-direction: column;
        background: rgba(255, 255, 255, 0.025);
        border: 1px solid rgba(212, 168, 140, 0.15);
        border-radius: 14px;
        padding: 16px 16px 12px;
        margin-bottom: 14px;
        position: relative;
    }
    .acq-table tr:hover td { background: transparent; }

    .acq-table td {
        padding: 7px 0 7px 110px;
        text-align: right;
        position: relative;
        min-height: 26px;
        border: none;
    }
    .acq-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        top: 7px;
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 1.4px;
        color: var(--text-muted, #8a98ab);
        font-weight: 600;
        opacity: 0.75;
        max-width: 100px;
        text-align: left;
    }

    /* === ORDRE VISUEL ===
       1) Acquéreur (titre prominent)
       2) Pills urgence/statut/suivi (visibles d'un coup d'œil)
       3) Détails (Type / Budget / Surface / Secteur, plus discrets)
       4) Actions (Market + Appeler) */
    .acq-table td.acq-who { order: 0; }
    .acq-table td[data-label="Urgence"] { order: 1; }
    .acq-table td[data-label="Statut"]  { order: 2; }
    .acq-table td[data-label="Suivi"]   { order: 3; }
    .acq-table td[data-label="Type"]       { order: 10; }
    .acq-table td[data-label="Budget max"] { order: 11; }
    .acq-table td[data-label="Surface"]    { order: 12; }
    .acq-table td[data-label="Secteur"]    { order: 13; }
    .acq-table td.inbox-marker-cell,
    .acq-table td[data-label="Actions"]    { order: 99; }

    /* === TITRE (Acquéreur) === */
    .acq-table td.acq-who {
        padding: 0 0 12px 0;
        text-align: left;
        margin-bottom: 6px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
    .acq-table td.acq-who::before { display: none; }
    .acq-table td.acq-who strong {
        font-size: 17px;
        font-weight: 700;
        letter-spacing: -0.2px;
        white-space: normal;
        overflow: visible;
        display: block;
        color: var(--text-bright, #f0e6d6);
    }
    .acq-table td.acq-who .acq-email {
        margin-top: 4px;
        font-size: 12px;
        color: var(--text-muted, #8a98ab);
    }

    /* === BANDE PILLS (urgence/statut/suivi) — emphasis visuelle === */
    .acq-table td[data-label="Urgence"],
    .acq-table td[data-label="Statut"],
    .acq-table td[data-label="Suivi"] {
        padding-top: 6px;
        padding-bottom: 6px;
        min-height: 32px;
    }
    .acq-table td[data-label="Urgence"] {
        padding-top: 10px;
        margin-top: 2px;
    }
    .acq-table td[data-label="Suivi"] {
        padding-bottom: 10px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        margin-bottom: 6px;
    }

    /* Pills bien visibles, slightly bigger pour mobile */
    .acq-table td .urg-pill,
    .acq-table td .score-badge,
    .acq-table td .acq-neglect-pill {
        margin: 0;
        padding: 5px 12px;
        font-size: 11.5px;
    }

    /* === DÉTAILS (Type / Budget / Surface / Secteur) — discrets === */
    .acq-table td[data-label="Type"],
    .acq-table td[data-label="Budget max"],
    .acq-table td[data-label="Surface"],
    .acq-table td[data-label="Secteur"] {
        padding-top: 5px;
        padding-bottom: 5px;
        font-size: 13.5px;
        color: var(--text-secondary, rgba(230,236,243,0.8));
    }
    /* Budget garde son emphasis doré (déjà via .acq-amount strong) */
    .acq-table td.acq-amount strong {
        font-size: 14px;
    }

    /* Secteur wrap normal */
    .acq-table td.acq-secteur,
    .acq-table td.acq-amount,
    .acq-table td.acq-surface {
        white-space: normal;
    }
    .acq-table td .acq-amount-sub {
        display: block;
        margin-top: 2px;
    }

    /* === ACTIONS (Market + Appeler) en bas === */
    .acq-table td.inbox-marker-cell,
    .acq-table td.inbox-marker-cell[data-inbox-layout="actions"] {
        padding: 14px 0 0 0 !important;
        text-align: center !important;
        margin-top: 10px;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        display: flex !important;
        gap: 16px !important;
        justify-content: flex-end !important;
    }
    .acq-table td.inbox-marker-cell::before { display: none; }
    .acq-table td.inbox-marker-cell .btn,
    .acq-table td.inbox-marker-cell[data-inbox-layout="actions"] > * {
        flex: 1;
        max-width: 140px;
    }
}


/* v95.43.112 : iPhone réel ≤ 400px (393 iPhone 15) → navbar ultra-compacte
   pour faire rentrer logo + burger + avatar + nom + déconnexion sans tronquer.
   Top-level @media pour compat iOS Safari (pas de nested @media). */
@media (max-width: 400px) {
    .nav-user-name {
        max-width: 80px !important;
        padding: 12px 6px !important;
        font-size: 13px !important;
    }
    .nav-user .nav-logout,
    .navbar .nav-user a.nav-logout {
        padding: 10px 8px !important;
        font-size: 13px !important;
    }
    /* Logo plus compact aussi */
    .logo-offmkt.lg, .nav-brand .logo-offmkt {
        font-size: 18px !important;
        padding: 10px 8px !important;
    }
}