/* ═══════════════════════════════════════════════════════════════════
   KEYMMO — STYLES MOBILES
   Ce fichier est le point unique pour toutes les règles responsives
   ciblant les téléphones (≤ 768px). Ne JAMAIS modifier le desktop ici.
   Chargé APRÈS styles.css pour avoir la priorité sur les règles globales.
   ═══════════════════════════════════════════════════════════════════ */


/* ──────────────────────────────────────────────────────────────────
   LOT 0 — FONDATIONS
   Règles globales (hors media query) : inoffensives sur desktop,
   indispensables sur mobile.
   ────────────────────────────────────────────────────────────────── */

/* Burger app connectée : masqué sur desktop, visible via media query mobile */
.sb-burger-btn { display: none; }

/* Overlay sidebar : caché sur desktop (sinon il occupe une colonne du grid app-shell) */
.sb-overlay { display: none; }

/* Bloquer tout scroll horizontal (jamais de débordement latéral) */
html,
body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Variable de padding latéral standard 16px */
:root {
  --mobile-px: 16px;
}

/* ──────────────────────────────────────────────────────────────────
   BREAKPOINT PRINCIPAL : ≤ 768px
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* --- Bases --- */

  /* Inputs ≥ 16px pour bloquer le zoom automatique iOS */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="search"],
  input[type="url"],
  textarea,
  select {
    font-size: 16px !important;
  }

  /* Zones tactiles minimales 44px sur les éléments interactifs clés */
  .btn,
  .btn-primary,
  .btn-secondary,
  .primary-action,
  .secondary-action,
  .auth-submit,
  .auth-forgot-btn {
    min-height: 44px;
  }

  /* Images et SVG : ne jamais dépasser la largeur de l'écran */
  img,
  svg,
  video,
  canvas {
    max-width: 100%;
  }


  /* ──────────────────────────────────────────────────────────────
     LOT 1 — NAVBAR HAMBURGER
     ────────────────────────────────────────────────────────────── */

  /* Navbar opaque quand menu ouvert (écrase le gradient transparent) */
  .navbar.menu-open {
    background: rgba(5, 5, 5, 0.98) !important;
  }

  /* Overlay sombre sur la page quand le menu est ouvert */
  .nav-overlay {
    position: fixed;
    inset: 70px 0 0 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 99;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
  }

  .nav-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  /* Burger : fond transparent, barres étirées, poussé à droite */
  .navbar-burger {
    background: transparent;
    border-color: transparent;
    align-items: stretch;
    margin-left: auto;
  }

  /* Animation du burger : barres 1 & 3 pivotent en ×, barre 2 disparaît */
  .navbar-burger span {
    background: var(--brand);
    transition: transform 0.22s ease, opacity 0.18s ease;
  }

  .navbar.menu-open .navbar-burger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .navbar.menu-open .navbar-burger span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }
  .navbar.menu-open .navbar-burger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* Menu mobile ouvert : padding standard + séparateurs entre liens */
  .navbar-mobile {
    padding-left: var(--mobile-px);
    padding-right: var(--mobile-px);
  }

  .navbar-mobile a {
    min-height: 48px;
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    font-size: 1rem;
  }

  .navbar-mobile a:last-of-type {
    border-bottom: none;
  }

  /* Boutons CTA dans le menu mobile : pleine largeur */
  .navbar-mobile .primary-action,
  .navbar-mobile .secondary-action {
    width: 100%;
    justify-content: center;
    margin-top: 6px;
  }


  /* ──────────────────────────────────────────────────────────────
     LOT 1 — LANDING PAGE HERO
     ────────────────────────────────────────────────────────────── */

  /* Réduire le padding-top : 130px → 96px (navbar = 70px + marge) */
  .hero-inner {
    padding-top: 96px;
    padding-bottom: 40px;
    min-height: auto;
  }

  /* Taille de titre adaptée mobile */
  .hero-title {
    font-size: clamp(2rem, 8.5vw, 2.6rem);
    margin-bottom: 16px;
  }

  .hero-subtitle {
    font-size: 1rem;
    margin-bottom: 24px;
  }

  /* CTA en colonne pleine largeur */
  .hero-ctas {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 10px;
  }

  .hero-cta-primary,
  .hero-cta-ghost {
    width: 100%;
    justify-content: center;
    text-align: center;
    min-height: 50px;
  }

  .hero-trust {
    gap: 8px;
    margin-top: 16px;
  }


  /* ──────────────────────────────────────────────────────────────
     LOT 1 — SECTIONS LANDING (features, tarifs, FAQ, footer)
     ────────────────────────────────────────────────────────────── */

  /* Simulator teaser 2 colonnes → 1 colonne */
  .sim-teaser-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* Visuels / images dans sections teaser */
  .sim-teaser-visual img,
  .feature-showcase img {
    border-radius: 12px;
  }

  /* Footer : colonnes → 1 colonne */
  .footer-links {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* Réduire le padding des sections landing sur mobile */
  .public-shell .section {
    padding-left: var(--mobile-px);
    padding-right: var(--mobile-px);
  }


  /* ──────────────────────────────────────────────────────────────
     LOT 1 — PAGE DE CONNEXION / INSCRIPTION / RESET MOT DE PASSE
     ────────────────────────────────────────────────────────────── */

  /* Shell : passe en colonne (était flex-row sur desktop) */
  .auth-shell {
    flex-direction: column;
  }

  /* Panneau branding gauche : masqué sur mobile
     (contenu marketing inutile, prend 45% de l'écran) */
  .auth-brand-panel {
    display: none;
  }

  /* Panneau formulaire : plein écran, fond opaque, aucun contenu derrière */
  .auth-form-panel {
    width: 100%;
    min-height: 100dvh; /* dvh = dynamic viewport height, gère la barre du bas Safari */
    padding: 20px var(--mobile-px) 24px;
    align-items: stretch;
  }

  /* Carte formulaire : pleine largeur, arrondi et padding réduits */
  .auth-card {
    width: 100%;
    max-width: 100%;
    border-radius: 16px;
    padding: 24px 20px 20px;
    margin-top: auto;
    margin-bottom: auto;
  }

  /* Titre de la carte */
  .auth-copy-title {
    font-size: 1.3rem;
  }

  /* Bouton de soumission pleine largeur */
  .auth-submit {
    width: 100%;
    min-height: 48px;
  }

  /* Panels "mot de passe oublié" et "reset" : sans padding supplémentaire */
  .auth-forgot-panel,
  .auth-reset-panel {
    padding: 0;
  }

  /* Bouton "Envoyer le lien" et "Mettre à jour le mot de passe" */
  #authForgotSubmit,
  #authResetSubmit {
    width: 100%;
    min-height: 48px;
  }


  /* ──────────────────────────────────────────────────────────────
     LOT 2 — NAVIGATION APP CONNECTÉE (sidebar → drawer)
     ────────────────────────────────────────────────────────────── */

  /* Sidebar devient un drawer slide-in depuis la gauche */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 200;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .sidebar.is-open {
    transform: translateX(0);
    box-shadow: 4px 0 28px rgba(0, 0, 0, 0.5);
  }

  /* Overlay sombre derrière la sidebar ouverte */
  .sb-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 199;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }

  .sb-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  /* App shell : la sidebar est sortie du flux (position fixed),
     le main prend toute la largeur */
  .app-shell {
    display: block;
  }

  .main {
    padding: 14px var(--mobile-px);
  }

  /* Topbar : [burger] [search] [actions]
     display:grid requis : styles.css @480px force display:flex qu'il faut écraser */
  .topbar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    padding: 0 8px;
    gap: 8px;
    min-height: 56px;
    flex-wrap: unset;
  }

  /* Bouton burger dans la topbar : visible sur mobile */
  .sb-burger-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    border-radius: 8px;
    color: var(--brand);
    -webkit-tap-highlight-color: transparent;
  }

  .sb-burger-btn:hover,
  .sb-burger-btn:active {
    background: rgba(255, 255, 255, 0.07);
  }

  /* Masquer le label texte "Déconnexion", garder l'icône SVG */
  .sb-logout-label {
    display: none;
  }

  /* Search : pleine largeur dans la topbar */
  .global-search {
    max-width: none;
  }

  /* Actions topbar : reset des overrides styles.css @480px et @820px */
  .topbar-actions {
    width: auto;       /* styles.css @480px force width:100%, annulé ici */
    grid-column: auto; /* styles.css @820px force grid-column:1/-1, annulé ici */
    gap: 4px;
    flex-wrap: nowrap;
  }

  /* Notif badge et logout : taille tactile suffisante */
  .notif-bell-btn,
  #logoutButtonTopbar {
    min-width: 40px;
    min-height: 40px;
    padding: 0 10px;
  }


  /* ──────────────────────────────────────────────────────────────
     LOT 3 — TABLEAU DE BORD
     ────────────────────────────────────────────────────────────── */

  /* KPI : 2 colonnes (écrase la règle 1fr de styles.css @480px) */
  .db-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  /* KPI cards : padding réduit, min-width: 0 pour autoriser le retrait */
  .db-kpi-card {
    padding: 16px 14px;
    gap: 10px;
    min-width: 0;
  }

  /* Panels gauche/droite : s'empêchent de déborder de leur colonne */
  .db-panel,
  .db-panel-right {
    min-width: 0;
    overflow: hidden;
  }

  /* Bande de métriques secondaires : wrapping sur petits écrans */
  .db-metrics-strip {
    flex-wrap: wrap;
  }

  /* Bar chart rows : réduire les colonnes fixes (110px→90px, 80px→62px) */
  .db-bar-row {
    grid-template-columns: 90px 1fr 62px;
    gap: 6px;
    font-size: 0.78rem;
  }

  /* Donuts : empilés en colonne unique pour éviter la déformation */
  .db-donut-row {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 16px;
  }

  .db-donut-card {
    min-width: 0;
  }

  /* Projection chart : hauteur bandeau paysage ~16:10 sur mobile.
     !important nécessaire pour écraser le style inline posé par renderCharts() */
  .db-chart-wrap {
    height: 210px !important;
  }

  /* Patrimoine : même override sur le conteneur inline height:340px */
  #patProjectionChartWrap {
    height: 210px !important;
  }

  /* Légende 4 items → grille 2×2, libellés sur une seule ligne */
  .db-chart-legend {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 16px;
    font-size: 0.7rem;
  }

  .db-chart-legend > span {
    white-space: nowrap;
  }


  /* ──────────────────────────────────────────────────────────────
     LOT 4 — PATRIMOINE / BIENS
     ────────────────────────────────────────────────────────────── */

  /* ---- FICHES DE BIENS ---- */

  /* Zone visuelle (SVG carte ou photo) : hauteur réduite pour laisser
     plus de place au corps de la fiche sur mobile pleine largeur */
  .prop-card-visual {
    height: 160px;
  }

  /* Nom et adresse : autoriser le retour à la ligne (évite la troncature
     sur les adresses longues en pleine largeur) */
  .prop-card-name,
  .prop-card-address {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  /* Footer : les trois boutons (Détails, Modifier, Supprimer) peuvent
     se répartir en 2 lignes sur très petits écrans */
  .prop-card-footer {
    flex-wrap: wrap;
    gap: 6px;
  }

  /* Cibles tactiles minimales 40px pour les boutons de fiche */
  .prop-detail-btn,
  .prop-edit-btn,
  .prop-delete-btn {
    min-height: 40px;
  }

  /* ---- PATRIMOINE — KPI ---- */

  /* Padding réduit et valeur légèrement plus petite pour tenir dans 2 cols */
  .pat-kpi-card {
    padding: 14px 16px;
  }

  .pat-kpi-value {
    font-size: 1.25rem;
  }

  /* ---- PATRIMOINE — TABLEAU → CARTES EMPILÉES ---- */

  /* En-tête de tableau masqué : les labels viennent du data-label sur chaque cellule */
  .pat-table-header {
    display: none;
  }

  /* Chaque ligne devient une carte indépendante avec ses propres bordures */
  .pat-table-row {
    display: block;
    border: 1px solid #eeeeee;
    border-bottom: 1px solid #eeeeee;
    border-radius: 10px;
    margin: 8px 14px;
    padding: 0;
  }

  /* La dernière ligne garde ses bordures (override last-child { border-bottom:none } de styles.css) */
  .pat-table-row:last-child {
    border-bottom: 1px solid #eeeeee;
  }

  /* Chaque cellule : label à gauche (via ::before), valeur à droite */
  .pat-table-row .pat-table-cell {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 9px 14px;
    border-bottom: 1px solid #f5f5f5;
    font-size: 0.82rem;
  }

  .pat-table-row .pat-table-cell:last-child {
    border-bottom: none;
  }

  /* Label automatique depuis l'attribut data-label (ajouté dans app.js) */
  .pat-table-cell:not(.pat-cell-name)[data-label]::before {
    content: attr(data-label);
    font-size: 0.68rem;
    color: #bbb;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
    margin-right: 8px;
  }

  /* Cellule nom : plus de hauteur et séparateur marqué */
  .pat-cell-name {
    padding: 12px 14px;
    border-bottom: 1px solid #e8e8e8;
    align-items: flex-start;
  }

  /* ---- PATRIMOINE — SUIVI DES CRÉDITS ---- */

  /* 4 colonnes KPI → 2 colonnes */
  .cred-summary-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  /* Corps 2 colonnes (cartes + graphique) → colonne unique empilée */
  .cred-body {
    grid-template-columns: 1fr;
  }

  /* Graphique remboursement en pleine largeur : hauteur compacte */
  /* flex:none annule le flex:1 de styles.css qui empêche height d'agir */
  .cred-chart-wrap {
    flex: none;
    min-height: 0;
    height: 160px;
  }

  /* ---- CRÉDITS IMMOBILIERS — KPI STRIP (5 items en flex → grille 2×2 + dernier centré) ---- */
  .credits-kpi-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    padding: 0;
  }
  .credits-kpi-strip .cred-kpi-sep { display: none; }
  .credits-kpi-strip .cred-kpi-item { padding: 12px 16px; }
  /* Dernier item (Prélèvements mensuels) : pleine largeur + séparateur au-dessus */
  .credits-kpi-strip .cred-kpi-item:last-child {
    grid-column: span 2;
    border-top: 1px solid #f0f0f0;
  }
  /* Séparateur vertical entre col 1 et col 2 (items 1 et 3, DOM index 1 et 5) */
  .credits-kpi-strip .cred-kpi-item:nth-child(4n+1):not(:last-child) {
    border-right: 1px solid #f0f0f0;
  }

  /* ---- CRÉDITS — HEADING sticky avec fond opaque (empêche superposition du contenu au scroll) ---- */
  #credits .section-heading {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #f5f7fa;
    padding-bottom: 8px;
    margin-bottom: 8px;
  }

  /* ---- CRÉDITS — BOUTON SUPPRIMER (même gabarit que les autres boutons de la carte) ---- */
  .cred-prop-card .prop-delete-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ---- LOCATAIRE — FIN DE LOCATION (sans demande) : empile verticalement sur mobile ---- */
  .tpc-moveout-none .tpc-mo-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .tpc-moveout-none .tpc-mo-none-right {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
  }
  .tpc-moveout-none .tpc-mo-btn-danger {
    width: 100%;
    justify-content: center;
  }

  /* ---- FORMULAIRE CRÉATION DE BIEN ---- */

  /* Padding latéral réduit */
  .pc-wrap {
    padding: 16px var(--mobile-px) 40px;
  }

  /* Titre plus compact */
  .pc-title {
    font-size: 1.3rem;
  }

  /* En-têtes de section : padding réduit */
  .pc-section-head {
    padding: 14px 16px 12px;
  }

  /* Grille 2 colonnes → 1 colonne pleine largeur */
  .pc-fields {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px;
  }

  /* Boutons Annuler / Créer empilés en colonne pleine largeur */
  .pc-submit-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .pc-submit-row .primary-action,
  .pc-submit-row .secondary-action {
    width: 100%;
    justify-content: center;
  }

  /* ---- FORMULAIRE MODIFICATION DE BIEN (modal) ---- */

  /* Grille 2 colonnes → 1 colonne dans les modales */
  .form-grid {
    grid-template-columns: 1fr;
  }

  /* Barre d'onglets de la modale bien : défilement horizontal (5 onglets) */
  .modal-tab-bar {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .modal-tab-bar::-webkit-scrollbar {
    display: none;
  }

  /* ---- ESTIMATION DVF ---- */

  /* Formulaire : 2 colonnes → 1 colonne */
  .estim-form-grid {
    grid-template-columns: 1fr;
  }

  /* KPI résultats : 3 colonnes → 2 colonnes */
  .estim-kpi-row {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  /* Marché local : 3 colonnes → 1 colonne */
  .estim-market-grid {
    grid-template-columns: 1fr;
  }


  /* ── LOT 5 — GESTION LOCATIVE + FINANCES ── */

  /* Grille locataires : minmax(360px) → 1 colonne (overflow fix critique) */
  .tl-grid {
    grid-template-columns: 1fr;
  }

  /* Zones tactiles 44px — boutons cartes locataires */
  .tl-action-primary,
  .tl-action {
    min-height: 44px;
  }

  /* Zones tactiles 44px — boutons fiche bien (vue locataire propriétaire) */
  .tpc-btn {
    min-height: 44px;
    height: auto;
  }

  /* Zones tactiles 44px — boutons gestion paiements */
  .pm-action-primary,
  .pm-action {
    min-height: 44px;
  }

  /* Zones tactiles 44px — boutons ligne tableau suivi loyers */
  .pmd-btn {
    min-height: 44px;
    padding: 8px 10px;
  }

  /* Donuts dashboard : 2 colonnes → 1 colonne (pas de déformation) */
  .db-donut-row {
    grid-template-columns: 1fr;
  }

  /* Modale signal paiement locataire — 16px min pour éviter zoom iOS */
  .tp-signal-input,
  .tp-signal-select,
  .tp-signal-textarea {
    font-size: 1rem;
  }

  /* Champs modales financières génériques — 16px min anti-zoom iOS */
  .form-field input,
  .form-field select,
  .form-field textarea {
    font-size: 1rem;
  }

  /* Modale générique : padding réduit sur mobile */
  .modal {
    padding: 10px;
  }


  /* ──────────────────────────────────────────────────────────────
     LOT 6 — TRAVAUX / MAINTENANCE
     ────────────────────────────────────────────────────────────── */

  /* En-tête détail bien : empiler logo/info + actions */
  .maint-detail-header { flex-direction: column; gap: 12px; }
  .maint-detail-actions { flex-wrap: wrap; gap: 8px; width: 100%; }

  /* KPI strip Travaux : 2 colonnes */
  .works-kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  /* Badges + meta d'une intervention : s'autorisent à passer à la ligne */
  .maint-item-top,
  .maint-item-header { flex-wrap: wrap; gap: 6px; }

  /* Zones tactiles 44px */
  .mini-button,
  .maint-action-primary,
  .maint-action-secondary,
  .maint-view-btn,
  .maint-back-btn,
  .maint-empty-cta { min-height: 44px; }


  /* ──────────────────────────────────────────────────────────────
     LOT 6 — FISCALITÉ
     ────────────────────────────────────────────────────────────── */

  /* Table charges & justificatifs : rendre scrollable au lieu de clipper */
  .fp-charges-table { overflow-x: auto !important; }

  /* Score synthèse : en-tête en colonne */
  .fp-score-top { flex-direction: column; gap: 12px; }

  /* Grille biens : auto-fill 340px dépasse la largeur → forcer 1 col */
  .fp-bien-list { grid-template-columns: 1fr !important; }

  /* Grille config régimes → 1 colonne */
  .fp-config-grid,
  .fp-regimes-grid { grid-template-columns: 1fr !important; }

  /* Zones tactiles 44px */
  .fex-btn,
  .fp-btn-sm,
  .fp-bien-actions .btn { min-height: 44px; }

  /* Fiscalite page 1 & 2 : padding, tabs, alertes, tableau guide */
  .fp-page { padding: 16px 14px; }
  .fp-tabs-bar { flex-wrap: nowrap; }
  .fp-alert { flex-wrap: wrap; gap: 8px; }
  .fp-alert button { width: 100%; min-height: 40px; }
  .frg-page { padding: 16px 14px; }
  .frg-table-wrap { display: none; }
  .frg-table-mobile-cards { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }


  /* ──────────────────────────────────────────────────────────────
     LOT 6 — SIMULATEURS
     ────────────────────────────────────────────────────────────── */

  /* Frais de notaire : 2 colonnes → 1 colonne */
  .notary-layout { grid-template-columns: 1fr !important; }

  /* ──────────────────────────────────────────────────────────────
     LOT 9 — VITRINE PUBLIQUE
     ────────────────────────────────────────────────────────────── */

  /* Séparation entre les 2 boutons secondaires et le bouton "+ Publier un bien" */
  #public .toolbar-actions { gap: 14px; }
  #public .toolbar-actions .primary-action { margin-top: 4px; }

  /* KPI compteurs : 4 colonnes → grille 2×2 compacte */
  .public-kpi-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .public-kpi-card {
    padding: 12px 14px;
    gap: 10px;
  }
  .pub-kpi-icon { width: 32px; height: 32px; border-radius: 8px; }
  .pub-kpi-value { font-size: 1.3rem; }

  /* ──────────────────────────────────────────────────────────────
     LOT 10 — CANDIDATS
     ────────────────────────────────────────────────────────────── */

  /* Bouton "Ajouter un candidat" : sort de l'en-tête → pleine largeur sous le titre */
  .candidates-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .candidates-header .primary-action {
    width: 100%;
    justify-content: center;
  }

  /* Filtres : recherche pleine largeur + 2 selects côte à côte */
  .candidates-filters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .cand-search-input { grid-column: 1 / -1; min-width: 0; }
  .cand-filter-select { min-width: 0; }

  /* KPI cards : déjà en 2×2, juste compactées */
  .candidate-kpi-card { padding: 12px 14px; }
  .ckpi-value { font-size: 1.45rem; }

  /* ──────────────────────────────────────────────────────────────
     LOT 11 — CALENDRIER PARTAGÉ
     ────────────────────────────────────────────────────────────── */

  /* KPI strip : 4 colonnes → grille 2×2 uniforme */
  .cal-kpi-strip {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .cal-kpi { padding: 12px 10px; }
  /* Empêche la césure automatique sur "Ce mois-ci" */
  .cal-kpi-label {
    font-size: 0.72rem;
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: none;
  }
  .cal-kpi-val { font-size: 1.55rem; }

  /* ──────────────────────────────────────────────────────────────
     LOT 8 — ANALYSE / SIMULATEURS (projection, revente, arbitrage)
     ────────────────────────────────────────────────────────────── */

  /* ---- PROJECTION — KPI STRIP (4 items → grille 2×2) ---- */
  .renta-kpi-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    padding: 0;
  }
  .renta-kpi-sep { display: none; }
  .renta-kpi-item { padding: 12px 14px; }
  /* Séparateur entre les lignes */
  .renta-kpi-strip .renta-kpi-item:nth-child(-n+3) {
    border-bottom: 1px solid #f0f0f0;
  }
  /* Séparateur vertical entre col 1 et col 2 */
  .renta-kpi-strip .renta-kpi-item:nth-child(4n+1) {
    border-right: 1px solid #f0f0f0;
  }

  /* ---- PROJECTION — GRAPHIQUE (hauteur contrôlée par CSS car maintainAspectRatio:false sur mobile) ---- */
  .proj-chart-card { padding: 12px 10px; }
  .proj-chart-card canvas { height: 220px; }

  /* ---- PROJECTION — BLOC HYPOTHÈSES compact ---- */
  .proj-hypotheses-card { padding: 14px 16px; margin-bottom: 16px; }
  .proj-hyp-title { font-size: 0.88rem; margin-bottom: 12px; }
  /* 3 colonnes côte à côte → 1 colonne empilée */
  .proj-hyp-grid { grid-template-columns: 1fr; gap: 14px; }
  .proj-hyp-item {
    padding-bottom: 14px;
    border-bottom: 1px solid #f0f0f0;
  }
  .proj-hyp-item:last-child { padding-bottom: 0; border-bottom: none; }
  /* Réduire la taille du chiffre de valeur (était 1.45rem) */
  .proj-hyp-val { font-size: 1.05rem; }
  .proj-hyp-val-row { margin-bottom: 6px; }
  /* Poignée slider plus petite (zone tactile conservée via padding natif) */
  .proj-range::-webkit-slider-thumb { width: 18px; height: 18px; }

  /* ---- REVENTE — SCÉNARIOS (3 colonnes → 1 colonne empilée) ---- */
  .scenario-grid { grid-template-columns: 1fr; }
  /* Aligner à gauche dans les cartes full-width */
  .scenario-card { text-align: left; }
  .scenario-label,
  .scenario-val { text-align: left; }
  .scenario-val { margin-bottom: 6px; }
  /* Les paires libellé/valeur sont déjà en flex justify-between (styles.css) */
  /* Empêche le chiffre de wrapper */
  .scenario-row span:last-child {
    white-space: nowrap;
    font-weight: 600;
    padding-left: 8px;
  }
  /* Ligne "Net récupérable" : bord et emphase */
  .scenario-net {
    font-weight: 700;
    border-top: 1px solid #e8e8e8;
    padding-top: 8px;
    margin-top: 6px;
  }

  /* ---- ARBITRAGE — KPI STRIP (5 items → grille 2×2 + score pleine largeur) ---- */
  .arb-kpi-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    padding: 0;
  }
  .arb-kpi-sep { display: none; }
  .arb-kpi-item {
    padding: 12px 10px;
    border-bottom: 1px solid #f0f0f0;
  }
  /* Score moyen (5e item = last-child) : pleine largeur */
  .arb-kpi-strip .arb-kpi-item:last-child {
    grid-column: span 2;
    border-bottom: none;
  }
  /* Séparateur vertical entre col 1 et col 2 */
  .arb-kpi-strip .arb-kpi-item:nth-child(4n+1):not(:last-child) {
    border-right: 1px solid #f0f0f0;
  }

  /* Boutons d'action notaire : pleine largeur en colonne */
  .notary-action-row { flex-direction: column; gap: 8px; }
  .notary-btn-reset,
  .notary-btn-invest { width: 100%; min-height: 44px; justify-content: center; }

  /* Grille champs simulateurs : 2 colonnes → 1 colonne (sous 768px) */
  .sim-fields { grid-template-columns: 1fr !important; }

  /* Contrôles tableau amortissement : wrap + 44px */
  /* Onglets amortissement scrollables horizontalement */
  .sf-amort-controls { flex-wrap: wrap; gap: 6px; }
  .sf-amort-btn { min-height: 36px; white-space: nowrap; }

  /* Simulateur financement dans le viewport */
  .sim-sticky { position: static; }
  .sim-card { padding: 14px 12px; }


  /* ──────────────────────────────────────────────────────────────
     LOT 12 — TABLEAU DES COMPARABLES (Estimer, Revente, Fiche bien)
     Empêche le tableau de dépasser le viewport et d'élargir la page.
     ────────────────────────────────────────────────────────────── */

  /* Wrap scrollable horizontalement, ne s'étend pas au-delà du parent */
  .pd-est-comps-wrap {
    max-width: 100%;
    overflow-x: auto;
  }
  /* Colonnes de grille : min-width:0 pour qu'elles restent dans leur piste */
  .sim-form-col { min-width: 0; }
  /* sim-results-col : min-width:0 empeche la colonne grid de depasser 1fr */
  .sim-results-col { min-width: 0; }

  /* Tableau amortissement : 4 colonnes essentielles (masque Date/Capital debut/Assurance/Prelevement) */
  .sim-table th:nth-child(2),
  .sim-table th:nth-child(3),
  .sim-table th:nth-child(6),
  .sim-table th:nth-child(7),
  .sim-table td:nth-child(2),
  .sim-table td:nth-child(3),
  .sim-table td:nth-child(6),
  .sim-table td:nth-child(7) { display: none; }
  table.sim-table { min-width: 0 !important; }

  /* Graphique sans donnees : compact avec message au lieu du grand vide */
  .sim-chart-wrap.sim-chart-no-data { height: 56px; display: flex; align-items: center; justify-content: center; }
  .sim-chart-wrap.sim-chart-no-data canvas { display: none; }
  .sim-chart-wrap.sim-chart-no-data::after { content: "Entrez les donnees pour voir la repartition"; font-size: .79rem; color: #bbb; text-align: center; padding: 0 12px; }

  /* Graphique avec donnees : hauteur suffisante pour donut + legende */
  .sim-chart-wrap { height: 220px; }

  /* Label calcule auto : passe en petite ligne sous le label principal */
  .sim-field label small { display: block; font-size: .75rem; margin-top: 2px; }

  /* Etat vide tableau : texte complet, pas tronque */
  .sim-table td[colspan] { white-space: normal; text-align: center; }

  /* Conteneur fiche bien / revente */
  .pd-est-card { min-width: 0; }
  /* Réduire la police du tableau pour minimiser le scroll horizontal */
  .pd-est-comps-table { font-size: 0.72rem; }
  .pd-est-comps-table th,
  .pd-est-comps-table td { padding: 4px 6px; }

  /* ──────────────────────────────────────────────────────────────
     LOT 6 — AIDE / FAQ / INDICATEURS
     ────────────────────────────────────────────────────────────── */

  /* Étape du guide : num + corps + statut/bouton s'autorisent à wrapper */
  .guide-step-card { flex-wrap: wrap; gap: 8px; }
  .guide-step-body { flex: 1; min-width: 0; }
  .guide-step-right { width: 100%; display: flex; justify-content: flex-end; gap: 8px; }

  /* Grille plans FAQ → 1 colonne */
  .guide-faq-plans-grid { grid-template-columns: 1fr; }

  /* Grille actions guide → 2 colonnes (icone + label) */
  /* Cartes d'action 1 colonne, layout horizontal icone + texte */
  .guide-action-grid { grid-template-columns: 1fr; gap: 10px; }
  .guide-action-card { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; }
  .guide-action-icon { flex-shrink: 0; }
  .guide-action-title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .guide-action-desc { display: none; }
  .guide-action-btn { width: 100%; min-height: 44px; margin-top: 0; background: var(--brand); color: #fff; border: none; }

  /* Zones tactiles 44px */
  .guide-step-btn,
  .guide-suggest-btn,
  .guide-assistant-send { min-height: 44px; }

  /* Input de recherche guide / chat assistant — déjà couvert par le sélecteur
     global textarea mais on force la classe pour le cas sans type= */
  .guide-search-input,
  .guide-assistant-input { font-size: 16px !important; }


  /* ──────────────────────────────────────────────────────────────
     LOT 6 — ASSISTANT IA
     ────────────────────────────────────────────────────────────── */

  /* 100dvh : le viewport réduit quand le clavier iOS s'ouvre,
     évite que la zone de saisie disparaisse sous le clavier */
  /* Assistant - layout mobile */
  .assistant-page { height: calc(100dvh - 60px); }

  /* Header compact (~90px) */
  .ast-header { padding: 8px 14px 10px; flex-wrap: wrap; gap: 6px 12px; }
  .ast-header-left { gap: 8px; }
  .ast-header-icon { width: 32px; height: 32px; border-radius: 8px; }
  .ast-header-title { font-size: 14px; }
  .ast-header-sub { display: none; }

  /* Segmented control horizontal pleine largeur */
  .ast-mode-toggle { width: 100%; gap: 4px; }
  .ast-mode-btn { flex: 1; justify-content: center; padding: 6px 8px; font-size: 11px; min-height: 36px; }

  /* Layout : 1 colonne, sidebar en bandeau horizontal scrollable */
  .ast-layout { grid-template-columns: 1fr; }
  .ast-sidebar { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 8px 12px; gap: 8px; border-right: none; border-bottom: 1px solid var(--line); max-height: none; }
  .ast-sidebar-card { flex-shrink: 0; min-width: 200px; }
  .ast-sidebar-card--disclaimer { display: none; }
  .ast-sidebar-title { display: none; }
  .ast-new-conv-btn { flex-shrink: 0; align-self: center; white-space: nowrap; margin-top: 0; }

  /* Zone conversation */
  .ast-msg-list { padding: 10px 12px; }
  .ast-input-hint { display: none; }

  /* Safe area bas (iPhone) */
  .ast-input-area { padding-bottom: env(safe-area-inset-bottom, 0px); }

  /* Zone tactile envoi */
  .ast-send-btn { min-height: 44px; }

  /* Input de chat — textarea : font-size 16px déjà couvert par la règle
     globale textarea, mais on le confirme explicitement */
  .ast-input { font-size: 16px !important; resize: none; }


  /* ──────────────────────────────────────────────────────────────
     LOT 6 — ESPACE LOCATAIRE
     ────────────────────────────────────────────────────────────── */

  /* Zones tactiles 44px — boutons principaux (pas les sm) */
  .tp-btn-primary:not(.tp-btn-sm),
  .tp-btn-ghost:not(.tp-btn-sm),
  .tdd-back-btn,
  .tdd-cat-btn,
  .tm-btn-cancel,
  .tm-btn-delete { min-height: 44px; }

  /* En-tête ticket maintenance locataire : titre + badge en colonne */
  .tm-ticket-header { flex-wrap: wrap; gap: 6px; }

  /* Item document locataire : wrapping sur mobile */
  .tdd-doc-item { flex-wrap: wrap; gap: 8px; }
  .tdd-doc-item-right { width: 100%; justify-content: flex-end; }

  /* Inputs locataire (tp-input) : déjà couverts par le sélecteur global */
  .tp-input,
  .tm-search,
  .tp-doc-search { font-size: 16px !important; }


  /* ──────────────────────────────────────────────────────────────
     LOT 6 — ESPACE ENTREPRISE
     ────────────────────────────────────────────────────────────── */

  /* En-tête dashboard entreprise : avatar + info + actions en colonne */
  .ctor-header-card { flex-direction: column; align-items: flex-start; gap: 14px; }
  .ctor-header-actions { flex-wrap: wrap; gap: 8px; width: 100%; }

  /* Bannière de complétion profil : empiler indicateur + barre */
  .ctor-completion-banner { flex-direction: column; gap: 8px; }

  /* Actions des cartes demandes / devis / interventions */
  .ctor-rc-actions,
  .ctor-qc-actions,
  .ctor-ic-actions { flex-wrap: wrap; gap: 8px; }

  /* Zones tactiles 44px */
  .tpc-btn,
  .ctor-action-btn,
  .ctor-link-btn { min-height: 44px; }

  /* ──────────────────────────────────────────────────────────────
     LOT 7 — MODALES / TOASTS / PICKERS / TOOLTIPS
     ────────────────────────────────────────────────────────────── */

  /* Modal prévisualisation documents (Fiscalité) :
     max-height 90vh → 85dvh gère les barres navigateur iOS ;
     iframe min-height réduit pour éviter l'overflow caché sur petits écrans */
  .fex-fdoc-modal { max-height: 85dvh; }
  #fex-fdoc-modal-preview iframe { min-height: 200px; }

  /* Modal prévisualisation document locataire (Espace Locataire) */
  .tdp-iframe { min-height: 200px; }

  /* Toast legacy Fiscalité : right/left 24px → 12px, pleine largeur disponible */
  .fex-toast {
    right: 12px;
    left: 12px;
    max-width: none;
  }

  /* Date picker km-dp : position fixed, width 272px → peut dépasser sur petits écrans */
  .km-dp { max-width: calc(100vw - 24px); }

  /* Tooltip fiscalité : 220px peut sortir des bords sur écrans étroits */
  .fisc-tooltip-text { max-width: min(200px, calc(100vw - 32px)); }

  /* ─── TOPBAR STICKY ─────────────────────────────────────────────────────
     Public : navbar déjà fixed, on la rend toujours opaque sur mobile.
     App    : .topbar passe en sticky, fond opaque, ombre légère.
     Z-index : contenu < topbar (150) < sb-overlay (199) < sidebar (200).
     ──────────────────────────────────────────────────────────────────────── */

  /* 1. Public — navbar opaque dès le chargement (pas uniquement au scroll) */
  .navbar {
    background: rgba(5, 5, 5, 0.97);
    box-shadow: 0 1px 8px rgba(0,0,0,0.32);
  }

  /* 2. App — padding-top compense la topbar sortie du flux (56px) */
  .main {
    padding-top: 56px;
  }

  /* 3. App — topbar fixed : overflow-x:hidden sur html/body casserait sticky */
  .main .topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 150;
    background: #f0f1f5;
    box-shadow: 0 1px 8px rgba(0,0,0,0.08);
  }

  /* 4. Éléments déjà sticky à l'intérieur du contenu : décaler de la hauteur topbar (56px) */
  #credits .section-heading {
    top: 56px;
  }

  /* ─── TRAVAUX — Tickets d'intervention : grille d'actions régulière 2×N ─── */
  .maint-item-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .maint-action-primary,
  .maint-action-secondary {
    width: 100%;
    justify-content: center;
    padding: 0 8px;
  }
  /* Bouton annulation dans l'en-tête : zone tactile élargie sur mobile */
  .maint-cancel-btn {
    width: 32px;
    height: 32px;
  }

  /* ---- scroll-margin-top global : empeche le topbar fixe de masquer les ancres ---- */
  .section-heading,
  .documents-back-button,
  .crd-back-btn,
  .arb-back-btn,
  .qi-back-btn,
  .tdd-back-btn,
  .cand-back-btn { scroll-margin-top: 70px; }

  /* Documents : grille d'actions 2 colonnes sur mobile */
  .doc-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    margin-top: 6px;
  }
  .doc-row-actions .doc-row-btn:not(.doc-row-btn--danger) {
    flex: 1 1 calc(50% - 4px);
    min-height: 44px;
    font-size: 0.8rem;
    text-align: center;
    justify-content: center;
    white-space: normal;
  }
  .doc-row-actions .doc-row-btn--danger {
    flex: 1 1 100%;
    min-height: 44px;
    text-align: center;
    justify-content: center;
    margin-top: 0;
  }

  /* Modeles documents : filtre en grille 2 colonnes */
  .dm-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 20px; }
  .dm-tab { min-height: 44px; justify-content: center; font-size: 0.82rem; padding: 6px 10px; text-align: center; }

  /* Fiscalite : titre de section avec sous-titre empile */
  .fp-section-hd { flex-direction: column; align-items: flex-start; gap: 3px; }
  .fp-section-sub { font-size: .76rem; }

  /* Fiscalite : derniere carte seule occupe toute la largeur */
  .fp-kpi-grid > .fp-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* Assistant IA : zone de saisie et etat vide */
  .ast-chat { overflow: visible; }
  .ast-msg-list { min-height: 0; }
  .ast-input-area { padding-bottom: env(safe-area-inset-bottom, 12px); background: #fff; }
  .ast-input { min-height: 44px; }
  .ast-send-btn { min-height: 44px; width: 44px; }
  .ast-empty-state { height: auto; padding: 24px 16px; justify-content: flex-start; align-items: flex-start; }
  .ast-empty-sub { max-width: 100%; text-align: left; }
  .ast-suggestions { max-width: 100%; }

  /* Mes biens : carte par bien sur mobile */
  .db-biens-thead { display: none; }
  .db-bien-row { display: block !important; padding: 14px 14px 12px !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; }
  .main .db-bien-row { border-bottom: 1px solid #e4e6eb !important; }
  .db-bien-row > * { border-bottom: none !important; padding: 0 !important; justify-content: flex-start !important; }
  .db-bien-card-hd { display: flex !important; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
  .db-bien-card-hd .db-bien-cell { padding: 0 !important; border-bottom: none !important; }
  .db-bien-cell[data-label] { display: flex !important; justify-content: space-between !important; align-items: center; padding: 5px 0 !important; border-bottom: 1px solid rgba(255,255,255,0.05) !important; }
  .main .db-bien-cell[data-label] { border-bottom: 1px solid #f0f0f0 !important; }
  .db-bien-cell[data-label]:last-of-type { border-bottom: none !important; }
  .db-bien-cell[data-label]::before { content: attr(data-label); color: rgba(255,255,255,0.4); font-size: 0.79rem; font-weight: 500; flex-shrink: 0; }
  .main .db-bien-cell[data-label]::before { color: #888; }
  .db-bien-cell--action { display: block !important; margin-top: 12px; }
  .db-bien-cell--action .mini-button { width: 100% !important; min-height: 44px; justify-content: center; }
  .db-bien-val { white-space: nowrap; }


  /* ================================================
     TABLEAUX RESPONSIFS — utilitaire .responsive-table
     Transforme les <table> HTML en cartes empilées.
     Desktop (>= 768px) : aucun effet.
     ================================================ */
  .responsive-table { display: block !important; overflow-x: hidden !important; width: 100%; }
  .responsive-table thead { display: none !important; }
  .responsive-table tbody > tr {
    display: block !important;
    padding: 12px 14px;
    border-bottom: 1px solid #e5e7eb;
  }
  .responsive-table tbody > tr > td {
    display: flex !important;
    justify-content: space-between;
    align-items: flex-start;
    padding: 5px 0 !important;
    border-bottom: 1px solid #f5f5f5;
    font-size: .85rem;
    gap: 8px;
    min-width: 0;
  }
  .responsive-table tbody > tr > td:last-child { border-bottom: none; }
  .responsive-table tbody > tr > td::before {
    content: attr(data-label);
    font-size: .79rem; color: #888; font-weight: 500;
    flex-shrink: 0; white-space: nowrap;
  }
  /* Cellule titre (data-label vide) : affichage en bloc, sans label */
  .responsive-table tbody > tr > td[data-label=""] {
    display: block !important;
    font-weight: 600; font-size: .92rem; color: #111;
    padding-bottom: 8px !important; border-bottom: 2px solid #f0f0f0;
    margin-bottom: 2px;
  }
  .responsive-table tbody > tr > td[data-label=""]::before { display: none; }
  /* Cellule actions : boutons empilés pleine largeur */
  .responsive-table tbody > tr > td[data-label="actions"] {
    display: flex !important; flex-direction: column; gap: 6px;
    padding-top: 10px !important; border-bottom: none;
  }
  .responsive-table tbody > tr > td[data-label="actions"]::before { display: none; }
  .responsive-table tbody > tr > td[data-label="actions"] button {
    width: 100% !important; min-height: 44px; justify-content: center; text-align: center;
  }
} /* fin @media (max-width: 768px) */


/* ──────────────────────────────────────────────────────────────────
   ZONE MORTE 769-820px
   styles.css masque la sidebar (transform: translateX(-105%)) dans
   cette plage, mais mobile.css cache sb-burger-btn globalement et ne
   le ré-affiche qu'à ≤ 768px. Résultat : sidebar inaccessible.
   Fix : rendre le burger visible dans cette zone intermédiaire.
   ────────────────────────────────────────────────────────────────── */
@media (min-width: 769px) and (max-width: 820px) {
  .sb-burger-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    border-radius: 8px;
    color: var(--brand);
    -webkit-tap-highlight-color: transparent;
  }
  .sb-overlay { display: block; }
}


/* ──────────────────────────────────────────────────────────────────
   BREAKPOINT SECONDAIRE : ≤ 390px (iPhone SE, petits Android)
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 390px) {

  .hero-title {
    font-size: 1.85rem;
  }

  .auth-card {
    padding: 20px 16px 16px;
  }

  .auth-copy-title {
    font-size: 1.15rem;
  }

  /* ---- LOT 4 — 390px ---- */

  /* KPI patrimoine : 2 colonnes → 1 colonne sur très petits écrans */
  .pat-kpi-row {
    grid-template-columns: 1fr;
  }

  /* Estimation DVF : KPI 2 → 1 colonne */
  .estim-kpi-row {
    grid-template-columns: 1fr;
  }

  /* Valeur principale estimation : taille réduite */
  .estim-hero-val {
    font-size: 2rem;
  }

  /* Formulaire bien : padding encore réduit */
  .pc-fields {
    padding: 12px;
  }

  /* ---- LOT 5 — 390px ---- */

  /* Valeurs KPI paiements : taille réduite pour éviter débordement */
  .pm-kpi-val {
    font-size: 1.1rem;
  }

  /* ---- Toggle facturation (landing + abonnement) ---- */
  .pricing-billing-toggle,
  .sub-billing-toggle {
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
  }
  .pbt-btn,
  .sbt-btn {
    flex: 1;
    justify-content: center;
    padding: 9px 12px;
    font-size: 0.85rem;
  }
  .pbt-badge,
  .sbt-badge {
    font-size: 0.65rem;
    padding: 2px 6px;
  }

  /* Prix annuels sur landing mobile */
  .pricing-amount--annual strong { font-size: 2rem; }
  .pricing-annual-detail { margin-bottom: 6px; }

  /* Page abonnement mobile */
  .sub-billing-toggle { margin-bottom: 16px; }
  .sub-plan-amount { font-size: 1.75rem; }


  /* KPI Loyers + PMD : 2 colonnes compactes sur mobile */
  .pm-kpi-row { grid-template-columns: 1fr 1fr !important; gap: 8px; }
  .pm-kpi-card { padding: 12px; gap: 8px; }
  .pm-kpi-val { font-size: 1.1rem; }
  .pm-kpi-card:last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* KPI Fiche bien : 2 colonnes compactes sur mobile */
  .pd-kpi-strip { grid-template-columns: 1fr 1fr; gap: 8px; }
  .pd-kpi { padding: 12px 14px; }
  .pd-kpi-value { font-size: 1.1rem; }
  .pd-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }


  /* fex-valid-table tfoot : carte de synthèse TOTAL visuellement distincte */
  .fex-valid-table tfoot { display: block !important; }
  .fex-valid-total {
    display: block !important;
    padding: 12px 14px;
    background: #f0f4ff;
    border-top: 2px solid #c7d2fe;
  }
  .fex-valid-total > td {
    display: flex !important; justify-content: space-between; align-items: center;
    padding: 5px 0 !important; border-bottom: 1px solid #dde4f5;
    font-size: .85rem; gap: 8px;
  }
  .fex-valid-total > td:last-child { border-bottom: none; }
  .fex-valid-total > td::before {
    content: attr(data-label); font-size: .79rem; color: #4f46e5;
    font-weight: 600; flex-shrink: 0; white-space: nowrap;
  }
  .fex-valid-total > td[data-label=""] {
    display: block !important; font-weight: 700; font-size: .92rem; color: #1e1b4b;
    padding-bottom: 8px !important; border-bottom: 2px solid #c7d2fe;
  }
  .fex-valid-total > td[data-label=""]::before { display: none; }
  /* Loyers & paiements : annuler overflow: hidden du wrapper */
  .pmd-table-wrap { overflow: visible; }

  /* Fiscal — Charges : grille CSS -> cartes (même rendu que .responsive-table) */
  .fp-charges-table { overflow: visible !important; }
  .fp-ct-head { display: none !important; }
  .fp-ct-row {
    display: block !important; min-width: 0 !important;
    padding: 12px 14px !important; border-bottom: 1px solid #e5e7eb !important;
  }
  .fp-ct-row > * {
    display: flex !important; justify-content: space-between; align-items: flex-start;
    padding: 5px 0; border-bottom: 1px solid #f5f5f5; font-size: .85rem; gap: 8px;
  }
  .fp-ct-row > *:last-child { border-bottom: none; }
  .fp-ct-row > *::before {
    content: attr(data-label); font-size: .79rem; color: #888; font-weight: 500;
    flex-shrink: 0; white-space: nowrap;
  }
  .fp-ct-row > *[data-label=""] {
    display: block !important; font-weight: 600; font-size: .92rem;
    padding-bottom: 8px; border-bottom: 2px solid #f0f0f0 !important;
  }
  .fp-ct-row > *[data-label=""]::before { display: none; }

  /* Rentabilité : 9 colonnes ingérables en carte -> masquer la table, garder analysis-cards */
  .renta-table-wrap { display: none !important; }

  /* Fiscal — Synthèse biens : grille CSS -> cartes (même rendu que .responsive-table) */
  .fisc-thead { display: none !important; }
  .fisc-row {
    display: block !important; min-width: 0 !important;
    padding: 12px 14px !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  }
  .main .fisc-row { border-bottom: 1px solid #e5e7eb !important; }
  .fisc-cell {
    display: flex !important; justify-content: space-between; align-items: flex-start;
    padding: 5px 0 !important; border-bottom: 1px solid rgba(255,255,255,0.06);
    font-size: .85rem; gap: 8px; min-width: 0; text-align: left !important;
  }
  .main .fisc-cell { border-bottom: 1px solid #f5f5f5; }
  .fisc-cell:last-child { border-bottom: none !important; }
  .fisc-cell[data-label]::before {
    content: attr(data-label); font-size: .79rem; color: rgba(255,255,255,0.4);
    font-weight: 500; flex-shrink: 0; white-space: nowrap;
  }
  .main .fisc-cell[data-label]::before { color: #888; }
  /* Cellule nom : titre de carte */
  .fisc-cell-name {
    display: flex !important; flex-direction: row !important; gap: 6px;
    flex-wrap: wrap; padding-bottom: 8px !important;
    border-bottom: 2px solid rgba(255,255,255,0.1) !important;
    font-weight: 600; font-size: .92rem;
  }
  .main .fisc-cell-name { border-bottom: 2px solid #f0f0f0 !important; }

  /* Modèles de documents */
  .dm-grid { grid-template-columns: 1fr; }
  .dm-modal-backdrop { padding: 0; align-items: flex-end; }
  .dm-modal-panel { border-radius: 18px 18px 0 0; max-width: 100%; margin: 0; }
  .dm-modal-body { max-height: 55vh; }
  .dm-form-row { flex-direction: column; gap: 10px; }
  .dm-tabs { gap: 6px; }
  .dm-tab { font-size: 0.83rem; padding: 7px 14px; }

}