/* ═══════════════════════════════════════
   VARIABLES & RESET
═══════════════════════════════════════ */
:root {
  /* 1.92.0 (redesign « Registre clair », G1) : le gris secondaire passe de
     #94A3B8 (contraste 2,6:1 sur blanc) à #5B6B80 (5,4:1) ; le vert, le rouge
     et l'orange foncent d'un cran pour rester lisibles en texte. */
  --bg: #F5F7FA;
  --surface: #FFFFFF;
  --surface2: #F0F3F7;
  --border: #E3E8EF;
  --border2: #EDF1F5;
  --line-strong: #CBD5E1;
  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-muted: #5B6B80;
  --accent: #2563EB;
  /* Encre du nom « Assetimmo » dans le lockup. Le SVG est INLINE : il lit var()
     et suit donc le thème sans redessin. La tuile saphir et l'arche blanche, elles,
     ne bougent jamais — ce sont les couleurs de marque. */
  --logo-ink: #0B2444;
  --accent-hover: #1D4ED8;
  --accent-light: #EEF3FE;
  --accent-border: #C7D7FB;
  --green: #15803D;
  --green-bg: #EAF6EE;
  --red: #B91C1C;
  --red-bg: #FCEDED;
  --orange: #B45309;
  --orange-bg: #FDF4E6;
  --violet: #7C3AED;      /* LMNP, amortissements, images */
  --accent-texte: #1D4ED8; /* bleu en TEXTE sur fond bleu pâle : #2563EB y faisait 4,1:1 */
  --sur-plein: #FFFFFF;   /* texte posé sur un fond plein (bouton principal…) */
  /* Couleurs de données (1.94.0) : une par catégorie de charge, toujours la même. */
  --d1: #2B3F8C; --d2: #0F8B8D; --d3: #7C5CD6; --d4: #5AB0E8; --d5: #D0587E; --d6: #94A3B8; --d7: #65A30D; --d8: #A16207;
  /* G3 : plus d'ombre sous les cartes ; une ombre seulement pour ce qui flotte
     (fenêtres, menus, calendrier). Trois arrondis : 6 px pour les commandes,
     10 px pour les panneaux, la pilule pour les statuts. */
  --shadow-sm: none;
  --shadow: none;
  --shadow-lg: 0 12px 32px rgba(15,23,42,.14), 0 2px 6px rgba(15,23,42,.06);
  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 10px;
  --sidebar-w: 240px;
  --header-h: 60px;

  /* ── Espacements ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;

  /* ── Typographie ── */
  --text-xs:   12px;   /* G2 : plus aucun texte sous 12 px */
  --text-sm:   12px;
  --text-base: 13px;
  --text-md:   14px;
  --text-lg:   16px;
  --text-xl:   18px;
  --text-2xl:  20px;

  /* ── Composants ── */
  --input-h:  40px;
  --btn-h:    40px;
  --btn-h-sm: 32px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 15px; }

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: var(--bg);
  color: var(--text-primary);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }
a { text-decoration: none; color: inherit; }

/* ═══════════════════════════════════════
   AUTH SCREEN
═══════════════════════════════════════ */
#auth-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0F172A;
}
.auth-split {
  display: flex;
  width: 100%;
  max-width: 1000px;
  min-height: 100vh;
}
.auth-left {
  flex: 1;
  background: #0F172A;
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.auth-left-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}
.auth-left-content { position: relative; z-index: 2; }
.auth-logo-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 48px;
}
.auth-hero-tag {
  display: inline-block;
  background: rgba(37,99,235,0.2);
  border: 1px solid rgba(37,99,235,0.4);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: #60A5FA;
  letter-spacing: 1px;
  margin-bottom: 20px;
}
.auth-hero-title {
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.8px;
  line-height: 1.25;
  margin-bottom: 16px;
}
.auth-hero-title em { color: #60A5FA; font-style: normal; }
.auth-hero-sub {
  font-size: var(--text-base);
  color: rgba(255,255,255,0.45);
  line-height: 1.6;
}
.auth-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 32px;
}
.auth-feat {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.5);
}
.auth-feat-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2563EB;
  flex-shrink: 0;
}
.auth-left-footer {
  position: relative;
  z-index: 2;
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.2);
}
.auth-right {
  width: 380px;
  flex-shrink: 0;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 40px;
}
.auth-mobile-logo {
  display: none;
  justify-content: center;
  margin-bottom: 28px;
}
.auth-form-wrap {}
.auth-form-title {
  font-size: 22px;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 4px;
  letter-spacing: -0.5px;
}
.auth-form-sub {
  font-size: var(--text-base);
  color: #64748B;
  margin-bottom: 28px;
}
.auth-error {
  background: rgba(220,38,38,0.08);
  border: 1px solid rgba(220,38,38,0.3);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: var(--text-base);
  color: #DC2626;
  margin-bottom: 16px;
  display: none;
}
.auth-field { margin-bottom: 16px; }
.auth-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: #475569;
  margin-bottom: 6px;
  letter-spacing: 0.2px;
}
.auth-input {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  border: 1px solid #E2E8F0;
  background: #F8FAFC;
  color: #0F172A;
  font-size: var(--text-md);
  font-family: 'Plus Jakarta Sans', sans-serif;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.auth-input:focus { border-color: #2563EB; background: #fff; }
.auth-forgot {
  font-size: var(--text-sm);
  color: #2563EB;
  text-align: right;
  cursor: pointer;
  margin-top: -8px;
  margin-bottom: 20px;
  font-weight: 500;
}
.auth-btn-connect {
  width: 100%;
  height: 44px;
  background: #2563EB;
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--text-md);
  font-weight: 700;
  cursor: pointer;
  font-family: 'Plus Jakarta Sans', sans-serif;
  letter-spacing: 0.2px;
  transition: opacity 0.15s, transform 0.1s;
}
.auth-btn-connect:hover { opacity: 0.92; }
.auth-btn-connect:active { transform: scale(0.99); }
.auth-btn-connect:disabled { opacity: 0.45; cursor: not-allowed; }
.auth-btn-connect:disabled:hover { opacity: 0.45; }
.auth-btn-connect:disabled:active { transform: none; }
.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 22px 0;
}
.auth-divider-line { flex: 1; height: 1px; background: #E2E8F0; }
.auth-divider-txt { font-size: var(--text-xs); color: #94A3B8; white-space: nowrap; }
.auth-register-box {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 13px 16px;
  text-align: center;
  font-size: var(--text-base);
  color: #64748B;
}
.auth-register-link { color: #2563EB; font-weight: 600; cursor: pointer; }
/* 1.97.0 : liens de l'écran de connexion devenus de vrais boutons (clavier). */
button.auth-register-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; }
button.auth-forgot { display: block; margin-left: auto; background: none; border: 0; padding: 4px 0; font-family: inherit; }
/* Mot de passe : œil pour afficher, critères qui se cochent en tapant. */
.auth-mdp { position: relative; }
.auth-mdp .auth-input { padding-right: 48px; }
.auth-oeil { position: absolute; top: 50%; right: 2px; transform: translateY(-50%); width: 44px; height: 44px; border: 0; background: none; color: #64748B; font-size: 18px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; }
.auth-oeil:hover { color: #0F172A; }
.auth-criteres { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 3px 12px; }
.auth-criteres li { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #64748B; }
.auth-criteres li i { font-size: 15px; }
.auth-criteres li.ok { color: #15803D; }
.auth-version { font-size: var(--text-xs); color: #CBD5E1; text-align: center; margin-top: 18px; }
.auth-legal-links { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:8px; }
.auth-legal-link { font-size:var(--text-xs); color:rgba(255,255,255,0.55); text-decoration:underline; cursor:pointer; background:none; border:none; padding:0; }
.auth-legal-link:hover { color:rgba(255,255,255,0.85); }
.ml-tabs { display:flex; gap:8px; margin-bottom:1.25rem; flex-wrap:wrap; }
.ml-tab { padding:6px 16px; border-radius:var(--radius-sm); border:1px solid var(--border); background:transparent; color:var(--text-muted); font-size:var(--text-base); cursor:pointer; font-family:inherit; transition:all .15s; }
.ml-tab.active { border-color:var(--accent); background:var(--accent-light); color:var(--accent-texte); font-weight:500; }
.ml-section { display:none; }
.ml-section.active { display:block; }
/* 1.99.0 — TEXTES LÉGAUX conformes à la charte : --card-bg et --border-color
   n'ont JAMAIS été définis, les cartes et les onglets n'avaient donc ni fond ni
   bordure (fenêtre de l'écran de connexion, page Mentions, pages publiques).
   Panneau de la charte : surface, filet border, arrondi radius. Texte justifié
   (demande de Ben du 2026-10-11), avec césure française pour éviter les grands
   blancs entre les mots au téléphone. */
.ml-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.1rem 1.25rem; margin-bottom:.85rem; }
.ml-card-num { font-size:var(--text-xs); font-weight:500; color:var(--text-muted); margin:0 0 3px; }
.ml-card-title { font-size:var(--text-md); font-weight:500; margin:0 0 10px; color:var(--text-primary); }
.ml-card-body { font-size:var(--text-base); line-height:1.75; color:var(--text-secondary); margin:0; text-align:justify; -webkit-hyphens:auto; hyphens:auto; }
.ml-card-body strong { color:var(--text-primary); font-weight:500; }
/* 1.99.1 — Fenêtre « Informations légales » de l'écran de connexion. Elle était
   collée en BAS de l'écran à l'ordinateur aussi (panneau de téléphone) : trop
   basse (Ben, 2026-10-11). Comme toutes les fenêtres de l'app (.modal-overlay) :
   centrée à l'ordinateur, panneau du bas au téléphone (règle plus bas, même
   seuil que .modal-overlay). Fenêtre de la charte : surface, radius-lg, shadow-lg. */
.ml-auth-overlay { position:fixed; inset:0; background:rgba(15,23,42,0.5); z-index:9999; display:flex; align-items:center; justify-content:center; padding:20px; }
.ml-auth-fenetre { background:var(--surface); width:100%; max-width:680px; max-height:85vh; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); display:flex; flex-direction:column; overflow:hidden; }
.ml-auth-entete { padding:var(--space-4) var(--space-5); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.ml-auth-titre { font-weight:600; font-size:15px; color:var(--text-primary); }
.ml-auth-onglets { padding:var(--space-3) var(--space-5); border-bottom:1px solid var(--border); margin:0; flex-shrink:0; }
.ml-auth-contenu { overflow-y:auto; padding:var(--space-4) var(--space-5); flex:1; }
body.theme-dark .ml-auth-overlay { background:rgba(0,0,0,0.7); }
@media (max-width: 768px), (pointer: coarse) and (max-height: 500px) {
  .auth-legal-links { gap:10px; }
  .ml-tabs { gap:6px; }
  .ml-tab { font-size:var(--text-sm); padding:5px 12px; }
  .ml-card { padding:.9rem 1rem; }
  /* 1.99.1 : au téléphone, la fenêtre légale reste un panneau qui monte du bas. */
  .ml-auth-overlay { align-items:flex-end; padding:0; }
  .ml-auth-fenetre { border-radius:var(--radius-lg) var(--radius-lg) 0 0; }
}

@media (max-width: 768px), (pointer: coarse) and (max-height: 500px) {
  #auth-screen {
    background: linear-gradient(160deg, #0F172A 0%, #1E3A5F 50%, #0F172A 100%);
    align-items: flex-start;
    padding: 0;
  }
  .auth-split { flex-direction: column; min-height: 100vh; max-width: 100%; }
  .auth-left { display: none; }
  .auth-right {
    width: 100%;
    background: transparent;
    padding: 40px 20px 32px;
    justify-content: flex-start;
    min-height: 100vh;
  }
  .auth-mobile-logo { display: flex; }
  .auth-form-wrap {
    background: #ffffff;
    border-radius: 20px;
    padding: 28px 24px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.35);
  }
  .auth-form-title { font-size: 20px; }
  .auth-version { color: rgba(255,255,255,0.3); }
}

/* ═══════════════════════════════════════
   APP LAYOUT
═══════════════════════════════════════ */
#app { display: none; min-height: 100vh; }

/* ── SIDEBAR ── */
.sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 100;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sidebar-logo {
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border2);
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar-logo-icon {
  width: 34px; height: 34px;
  background: linear-gradient(135deg, #2563EB, #60A5FA);
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-lg);
  flex-shrink: 0;
}

.sidebar-logo-text {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.sidebar-logo-dot { color: var(--accent); }

.sidebar-logo-sub {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.sidebar-nav {
  flex: 1;
  padding: 12px 8px;
  overflow-y: auto;
  position: relative;
}

.sidebar-nav-fade {
  height: 28px;
  background: linear-gradient(transparent, var(--surface));
  pointer-events: none;
  flex-shrink: 0;
  margin-top: -28px;
  position: relative;
  z-index: 1;
}

.nav-group-label {
  font-size: var(--text-xs);
  color: var(--text-muted);
  padding: 10px 12px 4px;
  font-weight: 600;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
  margin-bottom: 1px;
  position: relative;
}

.nav-item:hover {
  background: var(--surface2);
  color: var(--text-primary);
}

.nav-item.active {
  background: var(--accent-light);
  color: var(--accent-texte);
  font-weight: 600;
}

.nav-item .nav-icon { font-size: 17px; flex-shrink: 0; line-height: 1; }

.nav-badge {
  margin-left: auto;
  background: var(--red-bg);
  color: var(--red);
  font-size: 12px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
}

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

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
  margin-bottom: 8px;
}

.sidebar-user:hover { background: var(--surface2); }

.user-avatar {
  width: 32px; height: 32px;
  background: linear-gradient(135deg, #2563EB, #60A5FA);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-base);
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.user-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
}

.user-email {
  font-size: 12px;
  color: var(--text-muted);
  /* 1.97.1 : une adresse longue dépassait du menu, et sa dernière lettre restait
     visible au bord gauche de l'écran quand le menu était fermé (téléphone). */
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.logout-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  padding: 5px 10px;
  transition: all 0.15s;
  white-space: nowrap;
  min-height: 30px;
}

.logout-btn:hover { color: var(--red); border-color: rgba(220,38,38,0.3); background: var(--red-bg); }

/* Aide et mentions légales, sous la déconnexion (1.91.0) */
.sidebar-liens { display: flex; flex-wrap: wrap; gap: 0 14px; margin-top: 6px; }
.sidebar-liens button { background: none; border: 0; padding: 4px 2px; min-height: 32px; display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-xs); color: var(--text-muted); cursor: pointer; font-family: inherit; }
.sidebar-liens button:hover { color: var(--text-primary); text-decoration: underline; }
.sidebar-liens button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ── MAIN CONTENT ── */
.main-content {
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  height: 100vh;
}

/* ── TOPBAR ── */
.topbar {
  height: var(--header-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 40;
  transition: box-shadow 0.2s;
}

.topbar.scrolled {
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* Inner topbar borné à la même largeur max que le contenu */
.topbar-inner {
  width: 100%;
  max-width: 1300px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  height: 100%;
}

.topbar-left { display: flex; align-items: center; gap: 12px; }

.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  font-size: 20px;
  color: var(--text-secondary);
  padding: 4px;
}

.page-title {
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.page-subtitle {
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-weight: 400;
  margin-left: 8px;
}

.topbar-right { display: flex; align-items: center; gap: 12px; }

.topbar-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  font-weight: 600;
  transition: all 0.15s;
  box-shadow: 0 2px 8px rgba(37,99,235,0.25);
}

.topbar-btn:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(37,99,235,0.3);
}

.topbar-btn.secondary {
  background: var(--surface);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.topbar-btn.secondary:hover {
  background: var(--surface2);
  color: var(--text-primary);
}

.topbar-action-icon { display: none; }

.notif-btn {
  position: relative;
  background: none;
  border: 1px solid var(--border);
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  font-size: var(--text-lg);
  color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}

.notif-btn:hover { background: var(--surface2); }

.notif-dot {
  position: absolute;
  top: 6px; right: 6px;
  width: 7px; height: 7px;
  background: var(--red);
  border-radius: 50%;
  border: 2px solid var(--surface);
}

/* ── PAGE CONTENT ── */
.page-content {
  flex: 1;
  padding: 28px;
  animation: pageIn 0.3s ease;
  box-sizing: border-box;
  max-width: 1300px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

@keyframes pageIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.page { display: none; }
.page.active { display: block; }

/* ═══════════════════════════════════════
   COMPONENTS
═══════════════════════════════════════ */

/* ── KPI GRID ── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 280px));
  gap: 16px;
  margin-bottom: 24px;
}

.kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  cursor: default;
}

.kpi-card:hover {
  border-color: var(--accent-border);
}

.kpi-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.kpi-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-muted);
}

.kpi-icon {
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
}

.kpi-value {
  font-size: 26px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -1px;
  line-height: 1;
}

.kpi-delta {
  font-size: var(--text-xs);
  font-weight: 600;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.kpi-delta.up { color: var(--green); }
.kpi-delta.down { color: var(--red); }
.kpi-delta.neutral { color: var(--text-muted); }
.kpi-delta.warn { color: var(--orange); }

/* ── CARDS ── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.card-action {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  transition: color 0.15s;
}

.card-action:hover { color: var(--accent-hover); }
button.card-action { background: none; border: 0; padding: 0; font-family: inherit; display: inline-flex; align-items: center; gap: 4px; }   /* 1.97.0 : vrais boutons (clavier) */

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }

/* ── BIEN ROW ── */
.bien-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border2);
  cursor: pointer;
  transition: all 0.15s;
}

.bien-row:last-child { border-bottom: none; }

.bien-row:hover {
  padding-left: 4px;
}

.bien-thumb {
  width: 40px; height: var(--input-h);
  border-radius: var(--radius-sm);
  background: var(--accent-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.bien-info { flex: 1; min-width: 0; }

.bien-adresse {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bien-meta {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 2px;
}

.bien-right { text-align: right; flex-shrink: 0; }

.bien-loyer {
  font-size: var(--text-md);
  font-weight: 800;
  color: var(--accent);
}

/* ── BADGES ── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
}

.badge.green { background: var(--green-bg); color: var(--green); }
.badge.red { background: var(--red-bg); color: var(--red); }
.badge.orange { background: var(--orange-bg); color: var(--orange); }
.badge.blue { background: var(--accent-light); color: var(--accent-texte); }
.badge.gray { background: var(--surface2); color: var(--text-muted); }

/* ── TABLE ── */
.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 700;
  padding: 0 0 12px;
  text-align: left;
  border-bottom: 1px solid var(--border2);
}

.data-table td {
  font-size: var(--text-base);
  padding: 12px 0;
  border-bottom: 1px solid var(--border2);
  color: var(--text-secondary);
  vertical-align: middle;
}

.data-table tr:last-child td { border-bottom: none; }

.data-table tbody tr { cursor: pointer; transition: background 0.12s; }
.data-table tbody tr:hover td { background: var(--accent-light); color: var(--text-primary); }
.data-table tbody tr:hover td:first-child { border-left: 3px solid var(--accent); padding-left: 3px; }

/* ── STATUS DOT ── */
.status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 7px;
  flex-shrink: 0;
}

.status-dot.green { background: #22C55E; }
.status-dot.red { background: #EF4444; }
.status-dot.orange { background: #F59E0B; }
.status-dot.gray { background: #94A3B8; }

/* ── EMPTY STATE ── */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}

.empty-state-icon { font-size: 48px; margin-bottom: 16px; }
.empty-state-title { font-size: var(--text-lg); font-weight: 700; color: var(--text-secondary); margin-bottom: 8px; }
.empty-state-text { font-size: var(--text-base); line-height: 1.6; max-width: 320px; margin: 0 auto 20px; }

/* ── EMPTY STATE HORIZONTAL (desktop) ── */
.empty-state-h {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 32px 24px;
}

.empty-state-h-icon {
  width: 52px;
  height: 52px;
  background: var(--accent-light);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.empty-state-h-body { flex: 1; min-width: 0; }

.empty-state-h-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 5px;
}

.empty-state-h-text {
  font-size: var(--text-base);
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 16px;
}

/* ── ALERT BANNER ── */
.alert-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  margin-bottom: 12px;
  border: 1px solid;
}

.alert-banner.warn {
  background: var(--orange-bg);
  border-color: rgba(217,119,6,0.2);
  color: #92400E;
}

.alert-banner.danger {
  background: var(--red-bg);
  border-color: rgba(220,38,38,0.2);
  color: #991B1B;
}

.alert-banner.info {
  background: var(--accent-light);
  border-color: var(--accent-border);
  color: #1E40AF;
}

/* ── MODAL ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.5);
  backdrop-filter: blur(4px);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-overlay.open { display: flex; }

/* Bloque le scroll du body quand une modale est ouverte (crucial mobile) */
body.modal-open { overflow: hidden; }

.modal {
  background: var(--surface);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  animation: modalIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-header {
  padding: 24px 28px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.modal-close {
  background: none;
  border: none;
  font-size: 20px;
  color: var(--text-muted);
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  transition: all 0.15s;
}

.modal-close:hover { background: var(--surface2); color: var(--text-primary); }

.modal-body { padding: 24px 28px; }

.modal-footer {
  padding: 0 28px 24px;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/* ── FORM ── */
.form-group { margin-bottom: 18px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.form-label {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 7px;
  display: block;
}

.form-input {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-size: var(--text-base);
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-input:focus {
  border-color: var(--accent);
  border-width: 1.5px;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.2);
  background: var(--surface);
}

.form-select {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-size: var(--text-base);
  color: var(--text-primary);
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s;
  appearance: none;
  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 fill='%235B6B80' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.form-select:focus {
  border-color: var(--accent);
  border-width: 1.5px;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.2);
}

.form-hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: 5px;
}

.form-section-title {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-muted);
  padding: 16px 0 12px;
  border-top: 1px solid var(--border2);
  margin-top: 4px;
}

/* ── BUTTONS ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  font-weight: 600;
  border: none;
  transition: all 0.15s;
  cursor: pointer;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 8px rgba(37,99,235,0.25);
}
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); }

.btn-secondary {
  background: var(--surface);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.btn-secondary:hover { background: var(--surface2); color: var(--text-primary); }

.btn-danger {
  background: var(--red-bg);
  color: var(--red);
  border: 1px solid rgba(220,38,38,0.2);
}
.btn-danger:hover { background: #FEE2E2; }

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

/* ── BIEN DETAIL ── */

/* ── LOYER ROW ── */

.loyer-mois {
  width: 80px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
}

.loyer-montant {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text-primary);
  flex: 1;
}

/* ── PROGRESS BAR ── */
.progress-bar {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 8px;
}

.progress-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), #60A5FA);
  transition: width 0.5s ease;
}

/* ── TOAST ── */
.toast-container {
  position: fixed;
  bottom: 76px;   /* au-dessus du bouton Feedback (1.96.1) : il cachait « Annuler » */
  right: 24px;
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.toast {
  background: var(--text-primary);
  color: #fff;
  padding: 14px 20px;
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 10px;
  animation: toastIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  max-width: 320px;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

.toast.success { background: #15803D; }
.toast.error { background: #B91C1C; }

/* ── CHART SIMPLE ── */
.mini-chart {
  display: block;
  width: 100%;
  margin-top: 12px;
  min-height: 90px;
}

/* ── SECTION HEADER ── */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.section-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.5px;
}

.section-subtitle {
  font-size: var(--text-base);
  color: var(--text-muted);
  margin-top: 3px;
}

/* ── BIEN CARD (grid view) ── */
.biens-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.bien-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s;
  max-width: 380px;
}

.bien-card:hover {
  border-color: var(--accent-border);
  box-shadow: 0 8px 24px rgba(37,99,235,0.1);
  transform: translateY(-2px);
}

.bien-card-top {
  background: var(--accent-light);
  padding: 24px;
  position: relative;
}

.bien-card-emoji { font-size: 36px; margin-bottom: 12px; display: block; }
.bien-card-emoji:empty { display: none; }

.bien-card-adresse {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

.bien-card-ville {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: 3px;
}

.bien-card-body { padding: 16px 20px; }

.bien-card-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.bien-card-stat-label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 3px;
}

.bien-card-stat-value {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--text-primary);
}

.bien-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--border2);
}

/* ── SCI CARDS ── */
.sci-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 16px;
}
.sci-card:hover {
  border-color: var(--accent-border);
  box-shadow: 0 8px 24px rgba(37,99,235,0.1);
  transform: translateY(-2px);
}
.sci-card-header {
  background: var(--accent-light);
  padding: 20px 24px;
}
.sci-card-body {
  padding: 16px 20px;
}

/* ── LOYERS PAGE ── */
.mois-selector {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.mois-btn {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}

.mois-btn:hover { border-color: var(--accent-border); color: var(--accent); }
.mois-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* MOBILE */
/* ── CUSTOM DATEPICKER ── */
.dp-wrapper { position: relative; }

.dp-input {
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-size: var(--text-base);
  color: var(--text-primary);
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  user-select: none;
}
.dp-input:hover { border-color: var(--accent-border); }
.dp-input.open { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); background: var(--surface); }
.dp-input-text { flex: 1; }
.dp-input-placeholder { color: var(--text-muted); }
.dp-input-icon { font-size: var(--text-md); color: var(--text-muted); flex-shrink: 0; }

.dp-popup {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 300;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  width: 280px;
  overflow: hidden;
  display: none;
  animation: dpIn 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}
.dp-popup.open { display: block; }

@keyframes dpIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.dp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border2);
}
.dp-nav-btn {
  width: 28px; height: 28px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}
.dp-nav-btn:hover { background: var(--surface2); border-color: var(--accent-border); color: var(--accent); }
.dp-header-center { display: flex; align-items: center; gap: 4px; flex: 1; justify-content: center; }
.dp-month-label {
  font-size: var(--text-base); font-weight: 700; color: var(--text-primary);
  cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: background 0.15s;
}
.dp-month-label:hover { background: var(--surface2); }
.dp-year-label {
  font-size: var(--text-base); font-weight: 800; color: var(--accent);
  cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: background 0.15s;
}
.dp-year-label:hover { background: var(--accent-light); }

.dp-days-header {
  display: grid; grid-template-columns: repeat(7, 1fr);
  padding: 10px 12px 4px; gap: 2px;
}
.dp-day-name {
  text-align: center; font-size: 12px; font-weight: 700;
  color: var(--text-muted); padding: 4px 0;
}
.dp-days-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  padding: 4px 12px 14px; gap: 2px;
}
.dp-day {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: var(--text-sm); font-weight: 500; border-radius: 6px;
  cursor: pointer; transition: all 0.1s; color: var(--text-primary);
}
.dp-day:hover { background: var(--surface2); }
.dp-day.other-month { color: var(--text-muted); opacity: 0.4; }
.dp-day.today { font-weight: 800; color: var(--accent); }
.dp-day.selected { background: var(--accent); color: #fff; font-weight: 700; }
.dp-day.selected:hover { background: var(--accent-hover); }

.dp-year-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 12px; gap: 6px; max-height: 220px; overflow-y: auto;
}
.dp-year-btn {
  padding: 8px 4px; border-radius: 6px; text-align: center;
  font-size: var(--text-sm); font-weight: 600; color: var(--text-secondary);
  cursor: pointer; transition: all 0.1s; border: 1px solid transparent;
}
.dp-year-btn:hover { background: var(--surface2); border-color: var(--border); }
.dp-year-btn.selected { background: var(--accent); color: #fff; }
.dp-year-btn.current { border-color: var(--accent-border); color: var(--accent); font-weight: 800; }

.dp-footer {
  padding: 10px 12px; border-top: 1px solid var(--border2);
  display: flex; justify-content: space-between; align-items: center;
}
.dp-today-btn {
  font-size: var(--text-sm); font-weight: 600; color: var(--accent);
  background: none; border: none; cursor: pointer; padding: 4px 8px;
  border-radius: 6px; transition: background 0.15s;
}
.dp-today-btn:hover { background: var(--accent-light); }
.dp-clear-btn {
  font-size: var(--text-sm); font-weight: 600; color: var(--text-muted);
  background: none; border: none; cursor: pointer; padding: 4px 8px;
  border-radius: 6px; transition: all 0.15s;
}
.dp-clear-btn:hover { color: var(--red); background: var(--red-bg); }

/* Supprimer les flèches sur les inputs number */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none !important; margin: 0 !important; }
input[type=number] { -moz-appearance: textfield !important; appearance: textfield !important; }

/* Cases à cocher : cible tactile confortable. La case native (~13px) est trop
   petite à toucher sur mobile/PWA. !important pour l'emporter sur les styles
   inline « width:auto » de plusieurs cases (consentement d'import, bascules
   assurance/frais du tableau, etc.). Une seule règle → toutes les cases. */
input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════
   DASHBOARD MODES (Épuré / Standard / Complet)
═══════════════════════════════════════ */

/* ── Quickbar actions rapides ── */

/* ── Table unifiée biens+loyers ── */

/* ── Autocomplete adresse ── */
.adresse-autocomplete-wrap { position: relative; }
.adresse-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 16px rgba(15,23,42,.10);
  z-index: 9999;
  max-height: 220px;
  overflow-y: auto;
  display: none;
}
.adresse-suggestions.open { display: block; }
.adresse-suggestion-item {
  padding: 9px 14px;
  font-size: var(--text-base);
  cursor: pointer;
  border-bottom: 1px solid var(--border2);
  transition: background 0.1s;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.adresse-suggestion-item:last-child { border-bottom: none; }
.adresse-suggestion-item:hover { background: var(--accent-light); }
.adresse-suggestion-item strong { color: var(--text-primary); font-weight: 600; }
.adresse-suggestion-item span { font-size: var(--text-xs); color: var(--text-muted); }
.adresse-suggestion-empty {
  padding: 10px 14px;
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-align: center;
}

/* ── Cartes dashboard hauteur fixe ── */

/* ── Total row sous la table ── */

/* ── Progress bar collecte ── */

/* ── Cash-flow décomposé ── */

/* ── Grille V3 dense (mode complet) ── */

/* ── Modale retards / encaisser / courrier-choix ── */

.dash-choice-btn {
  display: flex; align-items: center; gap: 12px;
  padding: 14px;
  border: 1px solid;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  width: 100%;
  transition: transform 0.12s, box-shadow 0.12s;
}
.dash-choice-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.dash-choice-btn.red { background: var(--red-bg); border-color: rgba(220,38,38,0.25); color: var(--red); }
.dash-choice-btn.orange { background: var(--orange-bg); border-color: rgba(217,119,6,0.25); color: var(--orange); }
.dash-choice-btn.blue { background: var(--accent-light); border-color: var(--accent-border); color: var(--accent); }
.dash-choice-btn.red.selected { border-color: #DC2626; border-width: 2px; box-shadow: 0 0 0 2px rgba(220,38,38,0.15); }
.dash-choice-btn.orange.selected { border-color: #D97706; border-width: 2px; box-shadow: 0 0 0 2px rgba(217,119,6,0.15); }
.dash-choice-btn.blue.selected { border-color: var(--accent); border-width: 2px; box-shadow: 0 0 0 2px rgba(37,99,235,0.15); }

/* ── Params : mode card sélection ── */

@media (max-width: 768px), (pointer: coarse) and (max-height: 500px) {
  :root { --sidebar-w: 0px; }

  .sidebar {
    transform: translateX(-240px);
    width: 240px;
    z-index: 100;
  }

  .sidebar.open { transform: translateX(0); }

  /* 1.89.0 : plus de ☰ en haut au téléphone — « Menu » est dans la barre du bas */
  .mobile-menu-btn { display: none; }

  .main-content { margin-left: 0; }

  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  /* Fix 2: KPI value clamp sur mobile */
  .kpi-value { font-size: clamp(18px, 5vw, 26px); }

  .grid-2, .grid-3 { grid-template-columns: 1fr; }

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

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

  .topbar-inner { padding: 0 16px; max-width: 100%; }
  .page-content { padding: 16px; max-width: 100%; margin: 0 auto; }

  .topbar { padding: 0 16px; }

  /* Bouton action topbar : icône seule sur mobile */
  .topbar-btn { padding: 10px 14px; min-height: 44px; min-width: 44px; font-size: var(--text-base); }
  .topbar-action-label { display: none; }
  .topbar-action-icon { font-size: 20px; display: inline; }

  /* Fix 4: modal safe-area pour iPhone */
  .modal { margin: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; max-height: 85vh; }
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal-footer { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
  /* Pied de modale empilé en pleine largeur sur mobile (évite débordement + bouton collé au bord) */
  .modal-footer { flex-direction: column-reverse; align-items: stretch; gap: 10px; }
  .modal-footer > .btn { width: 100%; margin: 0 !important; justify-content: center; }

  /* Fix 14: z-index sidebar overlay avec marge */
  .sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,0.4);
    z-index: 90;
    display: none;
  }
  .sidebar-overlay.open { display: block; }

  /* ── Empêcher le scroll horizontal ──
     1.88.1 : `clip` et non plus `hidden`. `hidden` faisait de .page-content un
     cadre DÉFILANT : c'était lui qui défilait au téléphone, alors que tout le
     code de remontée (changement de page, fiche d'un bien, retour arrière)
     vise .main-content — la page restait à 860 px après un changement de page.
     `clip` coupe pareil sans créer de cadre défilant ; les iPhone d'avant
     iOS 16 ne le connaissent pas et gardent `hidden` (comportement d'avant). */
  .page, .page-content, .main-content { overflow-x: hidden; overflow-x: clip; }

  /* ── Tables → cartes mobiles ── */
  .data-table { display: none; }
  /* Exception : tableaux conçus pour défiler horizontalement (ex. import mois par mois) */
  .data-table.data-table--scroll { display: table; }
  /* Tableaux faits main rendus scrollables horizontalement sur mobile */
  .scroll-x-mobile { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  .mobile-cards { display: flex; flex-direction: column; gap: 0; }
  /* Page Locataires : carte unique tappable, bouton Modifier masqué (le tap ouvre l'édition) */

  /* ── Loyers : totaux en grille 2×2 ── */
  .loyers-totaux-desktop { display: none; }
  .loyers-totaux-mobile {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
  }

  /* ── Import tableau : version mobile ── */
  .import-tab-desktop { display: none; }
  .import-tab-mobile { display: flex !important; flex-direction: column; gap: 8px; }

  /* ── Investissement tableau desktop → cartes ── */
  .invest-table-desktop { display: none; }
  .invest-cards-mobile { display: flex !important; flex-direction: column; gap: 12px; }

  /* ── Lignes cliquables ── */
  .mobile-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border2);
    cursor: pointer;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-row:active { background: var(--surface2); }
  .mobile-row:last-child { border-bottom: none; }
  .mobile-row-arrow { color: var(--text-muted); font-size: 18px; flex-shrink: 0; margin-left: 8px; }
  /* ── Loyer rows : desktop only ── */

  /* ── Score investissement mobile ── */
  .score-global-grid { grid-template-columns: 1fr !important; }
  .score-bien-layout { flex-direction: column !important; align-items: center !important; }
  .score-bien-blocs { min-width: unset !important; width: 100% !important; }
  .levier-row { grid-template-columns: 28px 1fr !important; }
  .levier-gain-col { display: none !important; }
  .levier-gain-mobile { display: flex !important; }

  /* Fix 11: mois-selector scroll horizontal sur mobile */
  .mois-selector {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    scrollbar-width: none;
    gap: 8px;
  }
  .mois-selector::-webkit-scrollbar { display: none; }
  .mois-btn {
    flex-shrink: 0;
    min-height: 44px;
    padding: 10px 16px;
    font-size: var(--text-base);
    border-radius: 22px;
  }
  .mois-btn.active {
    box-shadow: 0 2px 8px rgba(37,99,235,0.35);
  }

  /* Fix D4: dashboard grid empilé sur mobile */
  .dashboard-main-grid {
    grid-template-columns: 1fr !important;
  }
  .dashboard-main-grid .card[style*="grid-row:span"] {
    grid-row: span 1 !important;
  }

  /* Dashboard modes mobile : grilles 1 colonne */

  /* (1) Toggle modes : icônes seules sur petit écran */

  /* (2) Quickbar : scroll horizontal si les boutons dépassent */

  /* (3) KPI 5 colonnes (mode complet) → 2 colonnes sur mobile */
  #dash-view-complet .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* KPI épuré 3 colonnes → 1 colonne sur mobile */
  #dash-view-epure .kpi-grid { grid-template-columns: 1fr 1fr !important; }

  /* Cacher la table desktop, on affichera des mobile-cards via JS */

  /* Cards paramètres mode → 1 colonne sur mobile */
  #param-dash-mode-cards { grid-template-columns: 1fr !important; }
  .empty-state-h {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 16px;
  }

  /* Fix D7: max-width formulaires annulé sur mobile */
  .form-page-wrap { max-width: 100% !important; }

  /* Fix M1: bien-row padding latéral + btn-sm taille tactile */
  .bien-row { padding: 13px 16px; }
  .btn-sm { min-height: 36px; padding: 8px 14px; }

  /* Fix 5: toast au-dessus de la barre Safari — et du bouton Feedback (1.96.1) */
  .toast-container {
    bottom: calc(76px + env(safe-area-inset-bottom));
    right: 16px;
  }

  /* ── LMNP : grilles → 1 colonne ── */
  .lmnp-grid-2 { grid-template-columns: 1fr !important; }
  .lmnp-grid-3 { grid-template-columns: 1fr !important; }

  /* ── LMNP : tableau composants → masquer colonnes calculées ── */
  .lmnp-col-valeur  { display: none !important; }
  .lmnp-col-amort   { display: none !important; }
  .lmnp-col-restant { display: none !important; }

  /* ── LMNP : popup score → statique pleine largeur ── */
  [id^="lmnp-score-popup-"] { position: static !important; }

  /* ── LMNP : toggle vue → colonne sur mobile ── */
  .lmnp-toggle-row { flex-direction: column !important; }
  .lmnp-toggle-row button, .lmnp-toggle-row select { width: 100% !important; }
  .sci-col-date { display: none !important; }
  #sci-associe-pct::-webkit-inner-spin-button,
  #sci-associe-pct::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
}

@media (min-width: 769px) and (min-height: 501px), (min-width: 769px) and (pointer: fine), (min-width: 769px) and (pointer: none) {
  .levier-gain-mobile { display: none; }
  .mobile-cards { display: none; }
  .loyers-totaux-mobile { display: none; }
  .import-tab-mobile { display: none; }
  .invest-cards-mobile { display: none; }

  /* Fix D7: max-width sur pages formulaire desktop */
  .form-page-wrap {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
}

/* ═══════════════════════════════════════
   WIDGET FEEDBACK BÊTA
═══════════════════════════════════════ */
#feedback-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9998;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 10px 18px;
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(37,99,235,0.35);
  display: flex;
  align-items: center;
  gap: 7px;
  transition: background 0.15s, transform 0.15s;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
#feedback-btn:hover { background: #1d4ed8; transform: translateY(-1px); }
#feedback-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.45);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
#feedback-overlay.open { display: flex; }
#feedback-modal {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 28px 28px 24px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18);
  font-family: 'Plus Jakarta Sans', sans-serif;
}
#feedback-modal h3 { margin: 0 0 4px; font-size: 17px; font-weight: 700; color: var(--text-primary); }
#feedback-modal .fb-sub { font-size: var(--text-base); color: var(--text-secondary); margin-bottom: 20px; }
.fb-type-row { display: flex; gap: 10px; margin-bottom: 16px; }
.fb-type-btn {
  flex: 1;
  padding: 10px 8px;
  border-radius: 10px;
  border: 2px solid var(--border);
  background: #fff;
  cursor: pointer;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-secondary);
  transition: all 0.15s;
  font-family: 'Plus Jakarta Sans', sans-serif;
  text-align: center;
}
.fb-type-btn:hover { border-color: var(--accent); color: var(--accent); }
.fb-type-btn.selected { border-color: var(--accent); background: #eff6ff; color: var(--accent); }
.fb-type-btn .ti { font-size: var(--text-lg); vertical-align: -2px; margin-right: 5px; }
#feedback-modal label { font-size: var(--text-base); font-weight: 600; color: var(--text-primary); display: block; margin-bottom: 6px; }
#feedback-message {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: var(--text-base);
  font-family: 'Plus Jakarta Sans', sans-serif;
  resize: vertical;
  min-height: 90px;
  color: var(--text-primary);
  box-sizing: border-box;
  transition: border-color 0.15s;
}
#feedback-message:focus { outline: none; border-color: var(--accent); }
.fb-actions { display: flex; gap: 10px; margin-top: 18px; justify-content: flex-end; }
.fb-actions .btn-cancel {
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: #fff;
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  color: var(--text-secondary);
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.fb-actions .btn-send {
  padding: 9px 20px;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  font-family: 'Plus Jakarta Sans', sans-serif;
  transition: background 0.15s;
}
.fb-actions .btn-send:hover { background: #1d4ed8; }
.fb-actions .btn-send:disabled { background: #93c5fd; cursor: not-allowed; }
#feedback-success { display: none; text-align: center; padding: 10px 0 4px; }
#feedback-success .fb-ok-icon { font-size: 38px; margin-bottom: 10px; }
#feedback-success p { font-size: 15px; font-weight: 600; color: var(--text-primary); margin: 0 0 6px; }
#feedback-success span { font-size: var(--text-base); color: var(--text-secondary); }
@media (max-width: 768px), (pointer: coarse) and (max-height: 500px) {
  #feedback-btn { bottom: 72px; right: 16px; padding: 9px 14px; font-size: var(--text-sm); }
  #feedback-modal { max-width: calc(100vw - 32px); padding: 22px 18px 18px; }
}

/* ── RECHERCHE GLOBALE ── */
#search-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.45);
  z-index: 9000;
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
}
#search-overlay.open { display: flex; }
#search-modal {
  background: var(--surface);
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.18), 0 0 0 1px var(--border);
  width: 100%;
  max-width: 600px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 160px);
}
#search-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
#search-input-wrap .ti-search { font-size: 18px; color: var(--accent); flex-shrink: 0; }
#search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: var(--text-lg);
  font-family: inherit;
  color: var(--text-primary);
}
#search-input::placeholder { color: var(--text-muted); }
#search-kbd {
  font-size: var(--text-xs);
  color: var(--text-muted);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 2px 7px;
  flex-shrink: 0;
}
#search-results {
  overflow-y: auto;
  flex: 1;
}
.search-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
  font-size: var(--text-md);
}
.search-empty i { font-size: 32px; display: block; margin-bottom: 10px; opacity: 0.4; }
.search-group-label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-muted);
  padding: 12px 20px 6px;
}
.search-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  cursor: pointer;
  transition: background 0.1s;
  border-radius: 0;
}
.search-item:hover, .search-item.focused {
  background: var(--surface2);
}
.search-item-icon {
  width: 34px; height: 34px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-lg);
  flex-shrink: 0;
}
.search-item-body { flex: 1; min-width: 0; }
.search-item-name {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-item-sub {
  font-size: var(--text-sm);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-item-arrow {
  font-size: var(--text-md);
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 0.1s;
}
.search-item:hover .search-item-arrow,
.search-item.focused .search-item-arrow { opacity: 1; }
#search-footer {
  padding: 10px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 16px;
  font-size: var(--text-xs);
  color: var(--text-muted);
}
#search-footer span { display: flex; align-items: center; gap: 5px; }
.search-btn {
  position: relative;
  background: none;
  border: 1px solid var(--border);
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  font-size: var(--text-lg);
  color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
  cursor: pointer;
}
.search-btn:hover { background: var(--surface2); color: var(--accent); }
@media (max-width: 768px), (pointer: coarse) and (max-height: 500px) {
  #search-overlay { padding-top: 16px; align-items: flex-start; }
  #search-modal { max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); border-radius: var(--radius); }
  #search-kbd { display: none; }
  #search-footer { display: none; }
}

/* ═══════════════════════════════════════
   THÈME NUIT (mode sombre)
═══════════════════════════════════════ */
body.theme-dark {
  /* THÈME NUIT (1.92.1) — la palette du comparateur, validée par Ben le
     2026-10-07/08. Chaque couleur de texte passe 4,5:1 sur les fonds Nuit :
     bleu, vert, rouge et orange sont ÉCLAIRCIS (leurs teintes du jour
     tombaient à 3,3-4,3:1), et le texte des boutons pleins devient foncé
     (le blanc sur bleu faisait 3,7:1). Toutes les règles Nuit ci-dessous
     lisent ces jetons : plus aucune couleur écrite en dur. */
  --bg: #0B1220;
  --surface: #121B2C;
  --surface2: #0F1727;
  --border: #223049;
  --border2: #1B2740;
  --line-strong: #33445F;
  --text-primary: #E6EBF2;
  --text-secondary: #B6C1D1;
  --text-muted: #8D9AAF;
  --accent: #6E9BFF;
  --logo-ink: #E6EBF2;   /* sinon encre foncée sur sidebar sombre : contraste 1,06 = invisible */
  --accent-hover: #9DBBFF;
  --accent-light: #17264A;
  --accent-border: #2A4380;
  --green: #5BD18A;
  --green-bg: #123222;
  --red: #F38B8B;
  --red-bg: #3A1A1D;
  --orange: #F2B35A;
  --orange-bg: #33260F;
  --violet: #B79CFF;
  --accent-texte: #9DBBFF;
  --sur-plein: #0B1220;   /* texte posé sur un fond plein bleu, rouge ou vert */
  --d1: #7D93E8; --d2: #2EC4C6; --d3: #A68BF0; --d4: #7CC4F0; --d5: #E88AA8; --d6: #8D9AAF; --d7: #8BC34A; --d8: #D39B3A;
  --shadow-lg: 0 12px 32px rgba(0,0,0,.45);
}

/* ── Base ── */
body.theme-dark .auth-left,
body.theme-dark #auth-screen { background: #070D18; }
body.theme-dark .sidebar { background: var(--surface); border-right: 1px solid var(--border); }

/* Bandeaux d'alerte : texte éclairci (le fond suit les jetons). */
body.theme-dark .alert-banner.info   { color: #C9DAFF; }
body.theme-dark .alert-banner.warn   { color: #F8D79B; }
body.theme-dark .alert-banner.danger { color: #F8B4B4; }
body.theme-dark .topbar { background: var(--surface); border-bottom: 1px solid var(--border); }

/* ── Sidebar : nom Assetimmo visible ── */
body.theme-dark .sidebar-logo-text { color: var(--text-primary) !important; }

/* ── Sidebar : pastilles, comme en thème clair (fond teinté, chiffre coloré) ── */
body.theme-dark .nav-badge { background: var(--red-bg) !important; color: var(--red) !important; }

/* ── Textes posés sur un fond PLEIN (bouton principal, pastilles pleines, notifications) ── */
body.theme-dark .btn-primary,
body.theme-dark .theme-pill-btn.active,
body.theme-dark .barre-bas .barre-bas-pastille { color: var(--sur-plein); }
body.theme-dark .btn-primary { box-shadow: none; }
body.theme-dark .toast { background: var(--text-primary); color: var(--sur-plein); }
body.theme-dark .btn-danger { border-color: rgba(243,139,139,.35); }

/* ── Formulaires ── */
body.theme-dark .form-input,
body.theme-dark .form-select,
body.theme-dark textarea {
  /* background-COLOR (1.92.0, G10) : le raccourci `background` effaçait
     l'image de la flèche des listes déroulantes en thème Nuit. */
  background-color: var(--surface2);
  border-color: var(--line-strong);
  color: var(--text-primary);
}
body.theme-dark .form-select { 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 fill='%238D9AAF' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); }
body.theme-dark .form-input:focus,
body.theme-dark .form-select:focus { border-color: var(--accent); }

/* ── Tableaux ── */
body.theme-dark .data-table th { background: var(--surface2); }
body.theme-dark .data-table tr:hover td { background: var(--accent-light); }
body.theme-dark .data-table td { border-color: var(--border); }
body.theme-dark .data-table tr:nth-child(even) td { background: var(--surface2); }
body.theme-dark .data-table tr:nth-child(odd) td { background: var(--surface); }

/* ── Modales ── */
body.theme-dark .modal-overlay { background: rgba(0,0,0,0.7); }
body.theme-dark .modal { background: var(--surface); }

/* ── Boutons ── */
body.theme-dark .btn-secondary {
  background: var(--surface2);
  border-color: var(--line-strong);
  color: var(--text-primary);
}
body.theme-dark .btn-secondary:hover { background: var(--border); }

/* ── Navigation ── */
body.theme-dark .nav-item:hover { background: rgba(255,255,255,0.05); }
body.theme-dark .nav-item.active { background: var(--accent-light); color: var(--accent-hover); }

/* ── Recherche globale ── */
body.theme-dark #search-modal { background: var(--surface); }
body.theme-dark .search-item:hover,
body.theme-dark .search-item.focused { background: var(--surface2); }

/* ── KPI icônes dashboard ── */
body.theme-dark .kpi-icon { background: var(--accent-light) !important; }

/* ── Cards biens : supprimer dégradé ── */
body.theme-dark .bien-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
}
body.theme-dark .bien-card-header { background: var(--surface) !important; }
body.theme-dark .bien-card-top { background: var(--accent-light) !important; }

/* ── Card SCI : header + cercles associés ── */
body.theme-dark .sci-card-header { background: var(--accent-light) !important; }
body.theme-dark .assoc-circle {
  background: var(--accent-light) !important;
  color: var(--accent) !important;
  border: none !important;
}

/* ── Alertes intelligentes critiques ── */
body.theme-dark .alerte-intelligente-card.danger {
  background: var(--red-bg) !important;
  border-color: #5A2328 !important;
}
body.theme-dark .alerte-intelligente-card.danger .alerte-titre { color: var(--red) !important; }
body.theme-dark .alerte-intelligente-card.danger .alerte-msg { color: #F8B4B4 !important; }
body.theme-dark .alerte-intelligente-card.warn {
  background: var(--orange-bg) !important;
  border-color: #5C4316 !important;
}
body.theme-dark .alerte-intelligente-card.warn .alerte-titre { color: var(--orange) !important; }

/* ── Modale courriers ── */
body.theme-dark .courrier-type-card.danger {
  background: var(--red-bg) !important;
  border-color: #5A2328 !important;
}
body.theme-dark .courrier-type-card.warn {
  background: var(--orange-bg) !important;
  border-color: #5C4316 !important;
}
body.theme-dark .courrier-type-card.info {
  background: var(--accent-light) !important;
  border-color: var(--accent-border) !important;
}

/* ── LMNP base imposable ── */
body.theme-dark .lmnp-base-imposable {
  background: var(--surface2) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}

/* ── Tableau projection LMNP ── */
body.theme-dark .projection-table tr:nth-child(even) { background: var(--surface2) !important; }
body.theme-dark .projection-table tr:nth-child(odd) { background: var(--surface) !important; }
body.theme-dark .projection-table td,
body.theme-dark .projection-table th { color: var(--text-primary) !important; border-color: var(--border) !important; }

/* ── Bandeau avertissement ── */
body.theme-dark .avertissement-band {
  background: var(--accent-light) !important;
  border-color: var(--accent-border) !important;
  color: #C9DAFF !important;
}

/* ── Zone suppression compte ── */
body.theme-dark .danger-zone-box {
  background: var(--red-bg) !important;
  border-color: #5A2328 !important;
  color: var(--red) !important;
}
body.theme-dark .btn-danger-account {
  background: var(--red) !important;
  color: var(--sur-plein) !important;
}

/* ══════════════════════════════════════
   PILL THÈME TOPBAR
══════════════════════════════════════ */
.theme-pill {
  display: flex;
  align-items: center;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 3px;
  gap: 2px;
}
.theme-pill-btn {
  width: 28px;
  height: 28px;
  border-radius: 16px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.theme-pill-btn.active {
  background: var(--accent);
  color: #fff;
}
.theme-pill-btn:not(.active):hover { color: var(--accent); }

/* ══════════════════════════════════════
   RECHERCHE GLOBALE
══════════════════════════════════════ */
#search-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.45);
  z-index: 9000;
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
}
#search-overlay.open { display: flex; }
#search-modal {
  background: var(--surface);
  border-radius: 14px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.18), 0 0 0 1px var(--border);
  width: 100%;
  max-width: 600px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 160px);
}
#search-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
#search-input-wrap .ti-search { font-size: 18px; color: var(--accent); flex-shrink: 0; }
#search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: var(--text-lg);
  font-family: inherit;
  color: var(--text-primary);
}
#search-input::placeholder { color: var(--text-muted); }
#search-kbd {
  font-size: var(--text-xs);
  color: var(--text-muted);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 2px 7px;
  flex-shrink: 0;
}
#search-results { overflow-y: auto; flex: 1; }
.search-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
  font-size: var(--text-md);
}
.search-empty i { font-size: 32px; display: block; margin-bottom: 10px; opacity: 0.4; }
.search-group-label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-muted);
  padding: 12px 20px 6px;
}
.search-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  cursor: pointer;
  transition: background 0.1s;
}
.search-item:hover, .search-item.focused { background: var(--surface2); }
.search-item-icon {
  width: 34px; height: 34px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.search-item-body { flex: 1; min-width: 0; }
.search-item-name {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-item-sub {
  font-size: var(--text-sm);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-item-arrow { font-size: var(--text-md); color: var(--text-muted); opacity: 0; transition: opacity 0.1s; }
.search-item:hover .search-item-arrow,
.search-item.focused .search-item-arrow { opacity: 1; }
#search-footer {
  padding: 10px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 16px;
  font-size: var(--text-xs);
  color: var(--text-muted);
}
#search-footer span { display: flex; align-items: center; gap: 5px; }
.search-btn {
  background: none;
  border: 1px solid var(--border);
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  font-size: var(--text-lg);
  color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
  cursor: pointer;
}
.search-btn:hover { background: var(--surface2); color: var(--accent); }

/* ── Toggle thème (paramètres) ── */
.theme-toggle-wrap {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
}
.theme-btn {
  flex: 1;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border);
  background: var(--surface2);
  color: var(--text-secondary);
  font-size: var(--text-base);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
  font-family: inherit;
}
.theme-btn:hover { border-color: var(--accent); color: var(--accent); }
.theme-btn.active {
  border-color: var(--accent);
  background: var(--accent-light);
  color: var(--accent);
}

@media (max-width: 768px), (pointer: coarse) and (max-height: 500px) {
  #search-overlay { padding-top: 16px; }
  #search-modal { max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); border-radius: 12px; }
  #search-kbd { display: none; }
  #search-footer { display: none; }
  .theme-pill { display: none; }
  .theme-toggle-mobile { display: flex; }
}
@media (min-width: 769px) and (min-height: 501px), (min-width: 769px) and (pointer: fine), (min-width: 769px) and (pointer: none) {
  .theme-toggle-mobile { display: none; }
}

/* ── Bulles d'aide réutilisables (ⓘ) ── */
.help-i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  background: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  vertical-align: middle;
}
.help-i:hover { color: var(--accent-hover); }
.help-pop {
  display: none;
  margin-top: 6px;
  padding: 9px 11px;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--accent-light);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-sm);
}
.help-pop.open { display: block; }
.help-pop .ti { color: var(--accent); margin-right: 5px; }

/* ══════════════════════════════════════════════════════════
   PAGE LOCATAIRES — cartes + filtre (Option C)
══════════════════════════════════════════════════════════ */
.loc-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.loc-seg { display: inline-flex; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.loc-seg button { font-family: inherit; font-size: var(--text-sm); font-weight: 600; padding: 7px 14px; border: none; background: transparent; color: var(--text-secondary); cursor: pointer; transition: all 0.12s; }
.loc-seg button:hover { background: var(--surface2); }
.loc-seg button.active { background: var(--accent-light); color: var(--accent); }
.loc-seg-count { opacity: 0.65; margin-left: 3px; font-weight: 700; }
.loc-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--accent-light); color: var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; }

/* Détail des charges déductibles par catégorie (page Fiscalité) */
.fisc-detail { margin: 2px 0 6px; }
.fisc-detail > summary { cursor: pointer; font-size: 12px; color: var(--accent); list-style: none; padding: 3px 0; user-select: none; }
.fisc-detail > summary::-webkit-details-marker { display: none; }
.fisc-detail > summary::before { content: "\25B8\00a0"; font-size: 10px; }
.fisc-detail[open] > summary::before { content: "\25BE\00a0"; }
.fisc-detail-body { padding: 4px 0 2px; border-top: 0.5px dashed var(--border2); margin-top: 4px; }

/* Dépliant comparables DVF */
.dvf-comparables > summary::-webkit-details-marker { display: none; }
.dvf-comparables > summary::before { content: "\25B8\00a0"; font-size: 11px; }
.dvf-comparables[open] > summary::before { content: "\25BE\00a0"; }

/* ───────────────────────── Dossier bancaire ───────────────────────── */
.db-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--surface);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.db-title { font-size: var(--text-xl); font-weight: 800; color: var(--text-primary); }
.db-sub { font-size: var(--text-sm); color: var(--text-secondary); margin-top: 4px; }

.db-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.db-kpi {
  /* 1.95.0 (DB3) : même carte que le reste de l'app, sans bande bleue */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.db-kpi-note { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.db-manque { color: var(--orange); font-weight: 600; white-space: nowrap; }
.db-incalc { color: var(--text-muted); font-weight: 500; }
.db-kpi-label { font-size: var(--text-xs); color: var(--text-secondary); }
.db-kpi-value { font-size: var(--text-lg); font-weight: 800; color: var(--text-primary); margin-top: 4px; }

.db-table-wrap { overflow-x: auto; }
.db-table th, .db-table td { white-space: nowrap; }
.db-total-row td { font-weight: 800; background: var(--surface2); border-top: 2px solid var(--border); }
.db-group-row td {
  font-weight: 800;
  color: var(--accent);
  background: var(--accent-light);
  font-size: var(--text-xs);
}
.db-subtotal-row td { font-weight: 700; background: var(--surface2); color: var(--text-secondary); }

.db-box-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin: 16px 0;
}
.db-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.db-box-title { font-size: var(--text-sm); font-weight: 800; color: var(--text-primary); margin-bottom: 10px; }
.db-ratio {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  border-bottom: 1px dashed var(--border);
}
.db-ratio:last-child { border-bottom: none; }
.db-ratio strong { color: var(--text-primary); }
.db-note { font-size: var(--text-xs); color: var(--text-muted); margin-top: 12px; line-height: 1.5; }

@media (max-width: 900px) {
  .db-box-grid { grid-template-columns: 1fr; }
}
/* Gestion patrimoine hors location */
.db-manage-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.db-autre-help { font-size: var(--text-xs); color: var(--text-muted); margin-bottom: 12px; line-height: 1.5; }
.db-autre-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}
.db-autre-info { display: flex; flex-direction: column; gap: 2px; }
.db-autre-info strong { color: var(--text-primary); font-size: var(--text-sm); }
.db-autre-meta { font-size: var(--text-xs); color: var(--text-secondary); }
.db-autre-actions { display: flex; gap: 6px; flex-shrink: 0; }
.db-autre-empty { font-size: var(--text-sm); color: var(--text-muted); padding: 8px 0; }

/* Dossier bancaire — bascule tableau (desktop) / cartes (mobile) */
.db-cards { display: none; }
.db-cards-group { font-size: var(--text-xs); font-weight: 800; color: var(--accent); margin: 14px 0 8px; }
.db-mcard { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 8px; }
.db-mcard-total { background: var(--surface2); }
.db-mcard-head { font-size: var(--text-sm); font-weight: 800; color: var(--text-primary); margin-bottom: 6px; }
.db-mrow { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; padding: 4px 0; border-bottom: 1px dashed var(--border); }
.db-mrow:last-child { border-bottom: none; }
.db-mrow span { color: var(--text-secondary); }
.db-mrow strong { color: var(--text-primary); font-weight: 700; }
@media (max-width: 768px), (pointer: coarse) and (max-height: 500px) {
  .db-desktop-only { display: none; }
  .db-cards { display: block; }
}

@media print {
  .sidebar, #topbar-action-btn, .topbar-btn, .db-manage { display: none !important; }
  .db-header, .db-box, .card { box-shadow: none; }
}

/* ───────────────────────── Panel admin ───────────────────────── */
#annonce-banner { background: var(--accent-light); color: var(--accent); font-size: 13px; font-weight: 600; padding: 10px 18px; text-align: center; }
.admin-tabs { display: flex; gap: 4px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.admin-tabs::-webkit-scrollbar { display: none; }   /* 1.97.0 : une seule ligne qu'on fait glisser (4 lignes au téléphone) */
.admin-tab { background: none; border: none; border-bottom: 2px solid transparent; padding: 9px 12px; min-height: 44px; font-size: 13.5px; color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; gap: 6px; white-space: nowrap; flex-shrink: 0; }
.admin-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.admin-panel { display: none; }
.admin-panel.active { display: block; }
.adm-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.adm-kpi { background: var(--surface2); border-radius: var(--radius); padding: 14px 16px; }
.adm-kpi-l { font-size: 12px; color: var(--text-secondary); }
.adm-kpi-v { font-size: 22px; font-weight: 800; color: var(--text-primary); margin-top: 6px; }
.adm-row { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-primary); }
.adm-row:first-child { border-top: none; }
.adm-pill { font-size: 12px; padding: 2px 8px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.adm-pill.ok { background: var(--green-bg); color: var(--green); }
.adm-pill.no { background: var(--red-bg); color: var(--red); }
.adm-pill.warn { background: var(--orange-bg); color: var(--orange); }
.adm-pill.info { background: var(--accent-light); color: var(--accent); }
.adm-pill.neu { background: var(--surface2); color: var(--text-secondary); }
.adm-ico { font-size: 15px; color: var(--text-secondary); cursor: pointer; padding: 5px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: transparent; text-decoration: none; display: inline-flex; }
.adm-ico:hover { color: var(--accent); border-color: var(--accent); }
/* 1.97.0 — barres d'Usage et d'IA : le libellé passe au-dessus de la barre au
   téléphone (210 px fixes laissaient 19 px à la barre). */
.adm-barre { display: grid; grid-template-columns: 210px minmax(0, 1fr) 48px; align-items: center; gap: 4px 10px; margin-bottom: 8px; font-size: 13px; }
.adm-barre-l { color: var(--text-primary); min-width: 0; }
.adm-barre-piste { background: var(--border2); border-radius: 4px; height: 14px; overflow: hidden; }
.adm-barre-piste > div { height: 100%; }
.adm-barre-n { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.adm-pastilles { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
@media (max-width: 768px), (pointer: coarse) and (max-height: 500px) {
  .adm-barre { grid-template-columns: minmax(0, 1fr) 48px; }
  .adm-barre-l { grid-column: 1 / -1; }
  .admin-tabs { margin-left: -16px; margin-right: -16px; padding: 0 16px; }
  /* Envois, par utilisateur : une carte par ligne (le tableau sortait de l'écran). */
  .adm-table-cartes thead { display: none; }
  .adm-table-cartes, .adm-table-cartes tbody { display: block; width: 100%; }
  .adm-table-cartes tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--border); }
  .adm-table-cartes td { display: inline; padding: 0 !important; border: 0 !important; text-align: left !important; font-size: 12.5px; }
  .adm-table-cartes td:first-child { display: block; font-size: 13.5px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
  .adm-table-cartes td[data-label]::before { content: attr(data-label) " "; color: var(--text-muted); font-weight: 400; }
  .adm-table-cartes td[data-label] + td[data-label]::before { content: " · " attr(data-label) " "; }
  .adm-row .menu-plus { margin-left: auto; }
}
.muted-2 { color: var(--text-secondary); font-size: 12px; }

/* ═══════════════════════════════════════════════════════════
   ÉCRANS PAYWALL — limite de biens + module verrouillé
   Réf : patrimo-spec-lancement-public.md §4. Inactif tant qu'aucun paywall n'est appelé.
   ═══════════════════════════════════════════════════════════ */
.paywall-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-5);
}
.paywall-sheet {
  position: relative;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: var(--space-7) var(--space-6);
  max-width: 400px; width: 100%; text-align: left;
}
/* 1.97.0 : croix de fermeture (44 px), atouts de la formule, prix + essai. */
.paywall-x { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border: 0; background: none; border-radius: 10px; color: var(--text-muted); font-size: 20px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.paywall-x:hover { background: var(--surface2); color: var(--text-primary); }
.paywall-liste { list-style: none; margin: 4px 0 14px; padding: 0; }
.paywall-liste li { display: flex; gap: 8px; align-items: flex-start; font-size: var(--text-base); color: var(--text-primary); padding: 4px 0; }
.paywall-liste li i { color: var(--green); font-size: 16px; margin-top: 2px; flex-shrink: 0; }
.paywall-prix { font-size: var(--text-sm); color: var(--text-secondary); margin: 0 0 14px; }
.paywall-prix b { color: var(--text-primary); }
.paywall-encart { background: var(--accent-light); border-radius: var(--radius-sm); padding: 10px 12px; font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: 14px; }
.paywall-encart b { color: var(--accent); }
.paywall-grip { display: none; }
.paywall-emoji { font-size: 26px; margin-bottom: var(--space-3); color: var(--accent); line-height: 1; }
.paywall-titre { font-size: var(--text-xl); font-weight: 800; line-height: 1.3; color: var(--text-primary); margin-bottom: var(--space-2); padding-right: 36px; }
.paywall-sub { font-size: var(--text-base); color: var(--text-secondary); margin-bottom: var(--space-4); }
.paywall-bar { height: 6px; background: var(--surface2); border-radius: 99px; overflow: hidden; margin-bottom: 14px; }
.paywall-bar-fill { height: 100%; background: var(--accent); }
.paywall-cta {
  width: 100%; min-height: 44px; padding: 12px; border: none; border-radius: var(--radius-sm);
  background: var(--accent); color: #fff; font-size: var(--text-md); font-weight: 700;
  cursor: pointer; transition: background .15s;
}
.paywall-cta:hover { background: var(--accent-hover); }
.paywall-skip { display: block; width: 100%; min-height: 44px; margin-top: 6px; font-size: var(--text-base); font-weight: 600; color: var(--text-secondary); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; }
.paywall-skip:hover { color: var(--text-primary); background: var(--surface2); }
.paywall-cta:disabled { opacity: .45; cursor: not-allowed; }
/* Fenêtre de confirmation avant paiement (CGV + récapitulatif) */
.abo-confirme-lignes { margin: 6px 0 14px; border-top: 1px solid var(--border); }
.abo-confirme-lignes div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: var(--text-sm); color: var(--text-secondary); }
.abo-confirme-lignes b { color: var(--text-primary); text-align: right; }
.abo-confirme .abo-accord { margin: 0 0 14px; }

/* Module verrouillé : overlay avec flou du contenu réel derrière */
.locked-cta-overlay {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: flex-start; justify-content: center; padding: 48px var(--space-5) var(--space-5);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  border-radius: inherit;
}
.locked-cta-card {
  position: sticky; top: 24px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: var(--space-5) var(--space-6); text-align: left; max-width: 320px;
}
.locked-lock { font-size: 26px; margin-bottom: var(--space-2); color: var(--text-muted); line-height: 1; }
.locked-titre { font-size: var(--text-lg); font-weight: 800; line-height: 1.3; color: var(--text-primary); }
.locked-sub { font-size: var(--text-sm); color: var(--text-secondary); margin: var(--space-1) 0 var(--space-4); }

/* Mobile : la modale de limite devient une feuille ancrée en bas (comme #search-modal) */
@media (max-width: 768px), (pointer: coarse) and (max-height: 500px) {
  .paywall-overlay { align-items: flex-end; padding: 0; }
  .paywall-sheet { max-width: none; border-radius: 16px 16px 0 0; padding-bottom: calc(var(--space-7) + env(safe-area-inset-bottom, 0px)); }
  .paywall-grip { display: block; width: 36px; height: 4px; background: var(--border2); border-radius: 99px; margin: 0 auto var(--space-4); }
}

/* ── Chip plan (sidebar) + page Abonnement (écran 3) — inactif tant que MONETISATION_ACTIVE=false ── */
.plan-chip { margin: 0 0 var(--space-3); background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-3); }
.plan-chip-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.plan-chip-label { font-size: var(--text-xs); color: var(--text-muted); font-weight: 600; }
.plan-chip-name { font-size: var(--text-sm); font-weight: 800; color: var(--text-primary); }
.plan-chip-btn { width: 100%; font-size: var(--text-xs); font-weight: 700; color: var(--accent); background: none; border: none; cursor: pointer; padding: 0; display: flex; align-items: center; gap: 4px; }
.plan-chip-btn i { font-size: 13px; }
.plan-chip-btn:hover { text-decoration: underline; }

.abo-toggle { display: flex; justify-content: center; gap: var(--space-2); margin-bottom: var(--space-5); }
.abo-toggle-btn { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: 600; color: var(--text-secondary); background: var(--surface); border: 1px solid var(--border); border-radius: 99px; padding: 6px 16px; cursor: pointer; }
.abo-toggle-on { background: var(--accent-light); color: var(--accent); border-color: var(--accent-border); font-weight: 700; }
.abo-toggle-badge { font-size: var(--text-xs); font-weight: 700; background: var(--green-bg); color: var(--green); padding: 2px 8px; border-radius: 99px; }
.abo-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-4); }
.abo-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-5); }
.abo-card-pop { border: 2px solid var(--accent); }
.abo-card-actuel { border: 1px solid var(--border); }
.abo-pastille { font-size: var(--text-xs); font-weight: 700; color: var(--green); background: var(--green-bg); padding: 2px 8px; border-radius: 99px; }
.abo-pop-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff; font-size: var(--text-xs); font-weight: 700; padding: 3px 12px; border-radius: 99px; white-space: nowrap; }
.abo-name { display: flex; align-items: center; gap: 8px; font-size: var(--text-xs); font-weight: 700; color: var(--text-muted); margin-bottom: var(--space-2); }
.abo-prix { font-size: 24px; font-weight: 800; color: var(--text-primary); line-height: 1; }
.abo-per { font-size: var(--text-sm); font-weight: 500; color: var(--text-muted); }
.abo-sousprix { font-size: var(--text-sm); color: var(--text-secondary); margin: var(--space-1) 0 var(--space-4); }
.abo-btn { width: 100%; margin-bottom: var(--space-4); }
.abo-badge-actuel { text-align: center; font-size: var(--text-sm); font-weight: 700; color: var(--green); background: var(--green-bg); padding: 8px; border-radius: var(--radius-sm); margin-bottom: var(--space-4); }
.abo-btn-spacer { height: 40px; margin-bottom: var(--space-4); }
.abo-feats { list-style: none; border-top: 1px solid var(--border); padding-top: var(--space-4); }
.abo-feats li { display: flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--text-primary); padding: 3px 0; }
.abo-feats li i { color: var(--green); font-size: 14px; }
.abo-portail { text-align: center; margin-top: var(--space-4); }
.abo-portail-btn { background: none; border: none; color: var(--text-secondary); font-size: var(--text-sm); cursor: pointer; }
.abo-portail-btn:hover { color: var(--text-primary); text-decoration: underline; }

@media (max-width: 768px), (pointer: coarse) and (max-height: 500px) {
  .abo-grid { grid-template-columns: 1fr; }
  /* Free, Essentiel, Patrimoine dans l'ordre (1.97.0) ; la formule actuelle n'a
     pas de bouton, on ne lui garde pas de place vide en colonne. */
  .abo-card-actuel .abo-btn-spacer { display: none; }
}

/* ── Parrainage (section Paramètres) ── */
.parr-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-3); }
.parr-stat { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-3); text-align: center; }
.parr-stat-n { font-size: 22px; font-weight: 800; color: var(--text-primary); }
.parr-stat-l { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }
.parr-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: var(--text-sm); color: var(--text-secondary); }
.parr-row:last-child { border-bottom: none; }
.parr-badge { font-size: var(--text-xs); font-weight: 700; padding: 2px 8px; border-radius: 99px; }
.parr-badge.att { background: var(--orange-bg); color: var(--orange); }
.parr-badge.ok  { background: var(--green-bg); color: var(--green); }
.parr-badge.ann { background: var(--surface2); color: var(--text-muted); }

/* ── Inscription publique (case CGU + indice mot de passe) ── */
.auth-hint { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.auth-cgu { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--text-secondary); margin: 6px 0 14px; line-height: 1.5; cursor: pointer; }
.auth-cgu input { margin-top: 2px; flex-shrink: 0; }
.auth-cgu a { color: var(--accent); cursor: pointer; text-decoration: underline; }

/* ── Carte du patrimoine ───────────────────────────────────────────────────
   Hauteur au téléphone : un peu plus de la moitié de l'écran, sans jamais
   dépasser 460 px — au-delà, la liste des biens non localisés qui suit
   passait sous la ligne de flottaison.
   Sur ordinateur : nettement plus haut. L'infobulle d'un bien porte
   maintenant ses risques Géorisques, et 460 px la tronquaient — Leaflet
   déplace la carte pour faire tenir l'infobulle, mais il ne peut rien quand
   elle est plus haute que la carte elle-même. Constaté par Ben le 2026-09-03. */
#carte-leaflet { height: clamp(260px, 52vh, 460px); }

@media (min-width: 769px) and (min-height: 501px), (min-width: 769px) and (pointer: fine), (min-width: 769px) and (pointer: none) {
  #carte-leaflet { height: clamp(460px, 74vh, 760px); }
}

/* ═══ Écran de souscription — chantier 4, 2026-09-10 ═══════════════════════
   Ce qui manquait : l'essai, la date et le montant du premier prélèvement, et
   les mentions obligatoires. La première cause de remboursement est « je ne
   savais pas que j'allais être prélevé ». */
.abo-essai { background: var(--accent-light); border-radius: var(--radius-sm);
  padding: 14px 16px; margin-bottom: 18px; }
.abo-essai p { margin: 0; font-size: 14.3px; color: var(--text-secondary); }
/* Spécificité : `.abo-essai p` (classe + élément) l'emporte sur `.abo-essai-t`
   (classe seule), et le titre n'était donc JAMAIS coloré. Constaté dans
   l'aperçu du 2026-09-10 — d'où le sélecteur en deux classes. */
.abo-essai .abo-essai-t { font-weight: 800; color: var(--accent);
  margin: 0 0 4px; font-size: 15px; }
.abo-essai-actif { background: var(--green-bg); }
.abo-essai-fin { background: var(--orange-bg); }
.abo-essai-fin .abo-essai-t { color: var(--orange); }
.abo-essai-actif .abo-essai-t { color: var(--green); }

.abo-apres { font-size: 12px; color: var(--text-secondary); margin-top: 7px;
  text-align: center; line-height: 1.45; }
.abo-apres b { color: var(--text-primary); }

.abo-suite { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border2); }
.abo-suite-t { font-weight: 800; font-size: 14px; margin-bottom: 10px; }
.abo-etapes { display: grid; gap: 11px; }
@media (min-width: 640px) { .abo-etapes { grid-template-columns: repeat(3, 1fr); } }
.abo-etape { background: var(--surface2); border-radius: var(--radius-sm); padding: 12px 14px; }
.abo-etape-q { font-size: 12px;
  font-weight: 800; color: var(--text-muted); margin-bottom: 4px; }
.abo-etape p { margin: 0; font-size: 13.4px; color: var(--text-secondary); }
.abo-etape b { color: var(--text-primary); }

/* Acceptation des CGV. Posée entre les formules et les étapes : c'est le
   dernier élément lu avant de cliquer, et elle conditionne les boutons. */
.abo-accord { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px;
  padding: 12px 14px; background: var(--surface2); border-radius: var(--radius-sm);
  font-size: 13.2px; line-height: 1.5; color: var(--text-secondary); cursor: pointer; }
.abo-accord input { margin: 2px 0 0; flex-shrink: 0; width: 16px; height: 16px;
  accent-color: var(--accent); cursor: pointer; }
.abo-accord a { color: var(--accent); }
/* Un bouton grisé doit SE VOIR grisé : sinon l'utilisateur clique et croit
   l'application en panne. */
.abo-btn:disabled { opacity: .45; cursor: not-allowed; }

.abo-mentions { margin-top: 16px; font-size: 12.4px; color: var(--text-muted);
  line-height: 1.55; }
.abo-mentions a { color: var(--accent); }

/* ── Documents (1.84.0) : dossiers par catégorie, vue liste, dépôt de fichiers ── */
.docs-vue { display: inline-flex; gap: 4px; }
.doc-dossier { border-top: 1px solid var(--border2); }
.doc-dossier:first-of-type { border-top: none; }
.doc-dossier > summary { cursor: pointer; list-style: none; display: flex; align-items: center;
  gap: 8px; padding: 10px 2px; font-size: 13px; font-weight: 700; color: var(--text-primary); }
.doc-dossier > summary::-webkit-details-marker { display: none; }
.doc-dossier > summary > .ti-folder { color: var(--accent); }
.doc-dossier[open] > summary { color: var(--accent); }
.doc-dossier-nb { font-size: 12px; font-weight: 700; color: var(--text-muted); background: var(--surface2);
  border-radius: 10px; padding: 1px 8px; }
.doc-dossier-corps { padding: 0 0 12px 22px; }
.doc-dossier-corps .doc-dossier > summary { font-size: 12px; padding: 7px 2px; }
.doc-liste { display: flex; flex-direction: column; }
.doc-ligne { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-radius: var(--radius-sm);
  cursor: pointer; font-size: 13px; }
.doc-ligne-icone { font-size: 18px; flex-shrink: 0; display: inline-flex; }
.doc-ligne-nom { flex: 1; min-width: 0; font-weight: 600; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-ligne-meta { font-size: 12px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.doc-ligne-taille { min-width: 52px; text-align: right; }
.doc-ligne-actions { display: inline-flex; gap: 6px; flex-shrink: 0; }
.doc-compte { font-size: 12px; color: var(--text-secondary); background: var(--surface2);
  border-radius: 10px; padding: 3px 10px; }
.doc-depot { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px;
  padding: 18px 12px; border: 2px dashed var(--border2); border-radius: var(--radius-sm);
  color: var(--text-muted); font-size: 13px; text-align: center; transition: border-color .15s, background .15s; }
.doc-depot .ti-upload { font-size: 18px; }
.doc-depot-survol { border-color: var(--accent); background: var(--surface2); }
.doc-fichier-ligne { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.doc-fichier-ligne .form-input { flex: 1; min-width: 0; }
.doc-fichier-ligne .doc-ligne-meta { max-width: 38%; overflow: hidden; text-overflow: ellipsis; }
.doc-fichier-ligne .doc-fichier-date { flex: 0 0 150px; }   /* 1.85.0 : une date par fichier */
.doc-ligne-loc { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) {
  .doc-ligne-taille, .doc-ligne-cat { display: none; }
  .doc-dossier-corps { padding-left: 8px; }
  .doc-fichier-ligne .doc-ligne-meta { display: none; }
  .doc-fichier-ligne { flex-wrap: wrap; }
  .doc-fichier-ligne .doc-fichier-date { flex: 1 1 140px; }
  #docs-recherche, #docs-tri, #docs-bien-filter, #docs-cat-filter { width: 100% !important; }
}

/* ── Écran d'accueil du téléphone (1.86.0) : bandeau et carte des Paramètres ── */
.install-bandeau { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 85;
  background: var(--surface); border: 1px solid var(--border2); border-radius: var(--radius);
  box-shadow: 0 8px 28px rgba(15,23,42,.18); padding: 14px 14px 12px; font-size: 13px;
  color: var(--text-secondary); line-height: 1.5; max-width: 520px; margin: 0 auto; }
.install-bandeau-titre { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 14px;
  color: var(--text-primary); margin-bottom: 6px; }
.install-bandeau-titre img { border-radius: 7px; flex-shrink: 0; }
.install-bandeau-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.install-etapes { margin: 6px 0 0 18px; padding: 0; }
.install-etapes li { margin: 3px 0; }
.install-note { font-size: 12px; color: var(--text-muted); margin-top: 6px; }
.install-bouton { margin-top: 8px; }
.install-carte { font-size: 13px; color: var(--text-secondary); line-height: 1.55; }
/* Le bouton « Signaler » monte au-dessus du bandeau tant qu'il est affiché. */
body.bandeau-install-visible #feedback-btn { bottom: 190px; }
body.bandeau-install-visible .toast-container { bottom: 242px; }

/* ── Paramètres (1.87.0) : « Enregistré ✓ » des réglages qui s'enregistrent seuls ── */
.param-ok { font-size: 12px; color: var(--green); font-weight: 600; white-space: nowrap;
  opacity: 0; transition: opacity .3s; }
.param-ok.visible { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════════════
   AFFICHAGE MOBILE (1.88.0) — audit du 2026-09-29, lots A et B validés par Ben
   Mesuré sur l'app réelle de 320 à 1024 px, à la verticale et à l'horizontale.
   « Téléphone » = moins de 769 px de large, OU écran tactile de moins de
   501 px de haut (téléphone tenu à l'horizontale : il prenait la mise en page
   ordinateur, avec le menu fixe de 240 px sur 844). Toutes les règles
   « (max-width: 768px) » de ce fichier portent désormais les deux conditions.
   ═══════════════════════════════════════════════════════════════════════════ */

/* (6) Le bouton Feedback (z-index 9998) se posait SUR le bouton principal des
   fenêtres courtes (« Ajouter », « Changer le mot de passe »…) : caché tant
   qu'une fenêtre est ouverte. `:has` couvre les fenêtres ouvertes sans
   passer par openModal. */
body.modal-open #feedback-btn,
body:has(.modal-overlay.open) #feedback-btn { display: none !important; }

/* (7) Le pied des fenêtres reste visible : « Enregistrer » était à ~2 900 px
   dans la fiche d'un bien au téléphone, ~1 950 px sur une tablette. */
.modal .modal-footer { position: sticky; bottom: 0; z-index: 2; background: var(--surface);
  padding-top: 14px; border-top: 1px solid var(--border2); }

/* (9) Tableaux à faire glisser : une ombre sur le bord qui cache encore du
   contenu (elle disparaît au bout). La barre de défilement est invisible
   au téléphone : rien n'indiquait qu'il restait des colonnes. */
.db-table-wrap {
  background:
    linear-gradient(to right, var(--surface) 30%, transparent) left center / 40px 100% no-repeat local,
    linear-gradient(to left, var(--surface) 30%, transparent) right center / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(15,23,42,.2), transparent) left center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(15,23,42,.2), transparent) right center / 14px 100% no-repeat scroll;
}

/* (4) Onglets d'Investissement : 7 onglets sur 839 px, dont 4 cachés au
   téléphone sans aucun indice (la coupure tombait pile entre deux onglets).
   Dès qu'ils ne tiennent plus sur une ligne : une grille de tuiles, tout est
   visible. L'onglet ouvert porte la classe `actif` (switchInvestTab). */
@media (max-width: 1180px) {
  .invest-onglets { display: grid !important; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px !important;
    overflow: visible !important; touch-action: auto !important; border-bottom: none !important; }
  .invest-onglets > button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    min-height: 56px; padding: 8px 4px !important; margin-bottom: 0 !important; white-space: normal !important;
    text-align: center; line-height: 1.25; font-size: 12px !important;
    border: 1px solid var(--border) !important; border-radius: var(--radius-sm); background: var(--surface) !important; }
  .invest-onglets > button i { margin-right: 0 !important; font-size: 18px; }
  .invest-onglets > button.actif { border-color: var(--accent) !important; background: var(--accent-light) !important; }
  .invest-onglets { grid-auto-rows: 1fr; }   /* 1.88.1 : toutes les lignes à la même hauteur (70 / 56 px constaté par Ben) */
}
.lib-court { display: none; }
@media (max-width: 768px) {
  .invest-onglets { grid-template-columns: repeat(4, minmax(0, 1fr)); }   /* 2 lignes : 4 + 3 */
  /* « Estimation DVF » passait sur 2 lignes : « Estimation » tient sur une de 360 à 430 px */
  .invest-onglets .lib-long { display: none; }
  .invest-onglets .lib-court { display: inline; }
}

@media (max-width: 768px), (pointer: coarse) and (max-height: 500px) {
  /* (3) `1fr` = minmax(auto, 1fr) : une grille s'élargissait à la taille de son
     contenu le plus large (cartes d'Investissement de 404 px pour 343). */
  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-value { font-size: clamp(16px, 5vw, 26px); }   /* 18 px minimum débordait à 320 px */
  /* « Répartition du coût total » : la légende passe sous l'anneau quand elle ne tient plus à côté */
  #invest-cout-chart { flex-wrap: wrap; row-gap: 12px; }
  #invest-cout-chart > div:last-child { flex: 1 1 160px; min-width: 0; }

  /* (5) Barre du haut : elle débordait à 375 px sur le Tableau de bord (cloche
     coupée) et à 320 px ailleurs (bouton « + » coupé). Le titre se raccourcit
     au lieu de pousser les boutons ; le choix du mode d'affichage descend dans
     la barre « Actions » (placerModeTableauDeBord). */
  .topbar-left { min-width: 0; flex: 1 1 auto; }
  .topbar-left > div { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .topbar-right { gap: 8px; flex-shrink: 0; }

  /* (7) Pied fixé : empilé, il prenait jusqu'à 3 lignes (Enregistrer, Annuler,
     Supprimer). Le bouton principal garde toute la largeur, les autres se
     partagent la ligne du dessous. */
  .modal-footer { flex-direction: row; flex-wrap: wrap; }
  .modal-footer > .btn { width: auto; flex: 1 1 0; }
  .modal-footer > .btn-primary { order: -1; flex-basis: 100%; }

  /* (2) Charges : la ligne « Bien + Année » faisait 406 px — le filtre Année
     était hors d'atteinte à toutes les tailles de téléphone. */
  .charges-filtres { width: 100%; flex-wrap: wrap; }
  .charges-filtres select { flex: 1 1 130px; width: auto !important; min-width: 0; }
  .charges-filtres > span { display: none; }   /* « Bien : » restait seul en bout de ligne ; les menus disent « Tous les biens », « 2026 (en cours) » */

  /* (1.88.1) Charges, « par bien » : 598 px à faire glisser. Une ligne par
     bien : le nom, puis les trois montants étiquetés. */
  .charges-par-bien thead { display: none; }
  .charges-par-bien, .charges-par-bien tbody { display: block; width: 100%; }
  .charges-par-bien tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 8px; padding: 8px 0; border-bottom: 1px solid var(--border); }
  .charges-par-bien tr:last-child { border-bottom: 0; }
  .charges-par-bien td { display: block; padding: 0 !important; text-align: left !important; }
  .charges-par-bien td:first-child { grid-column: 1 / -1; }
  .charges-par-bien td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 600;
    color: var(--text-muted); }
  /* « + Ajouter » passait sur deux lignes à côté d'un nom de bien long */
  .card-header .card-action { white-space: nowrap; flex-shrink: 0; margin-left: 10px; }

  /* (9) même ombre que le Dossier bancaire, pour les tableaux qui défilent */
  .scroll-x-mobile {
    background:
      linear-gradient(to right, var(--surface) 30%, transparent) left center / 40px 100% no-repeat local,
      linear-gradient(to left, var(--surface) 30%, transparent) right center / 40px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(15,23,42,.2), transparent) left center / 14px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(15,23,42,.2), transparent) right center / 14px 100% no-repeat scroll;
  }
}

/* (13) Téléphone à l'horizontale : fenêtres presque pleine hauteur, et
   boutons du pied côte à côte (empilés, ils mangeaient le tiers de l'écran). */
@media (pointer: coarse) and (max-height: 500px) {
  .modal { max-height: 94vh; }
  .modal-footer { flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; }
  .modal-footer > .btn, .modal-footer > .btn-primary { width: auto; flex: 0 0 auto; order: 0; }
}

/* (1) Documents : le NOM d'un document rattaché à un locataire tombait à 0 px
   et le bouton Supprimer sortait de l'écran. Au téléphone, deux lignes : le
   nom sur toute la largeur, puis « locataire · date » et les boutons.
   Jusqu'à 900 px : sur une tablette à la verticale (820 px, menu fixe), le
   nom tombait aussi à 11 px. */
@media (max-width: 900px), (pointer: coarse) and (max-height: 500px) {
  .doc-ligne { flex-wrap: wrap; position: relative; padding-left: 34px; row-gap: 4px; }
  .doc-ligne-icone { position: absolute; left: 6px; top: 8px; }
  .doc-ligne-nom { flex: 1 1 100%; white-space: normal; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .doc-ligne-loc { flex: 1 1 0; max-width: none; min-width: 0; }
  .doc-ligne-actions { margin-left: auto; }
}

/* (8) État des lieux au téléphone : le tableau (élément, 4 états,
   commentaire) débordait de sa fenêtre. Chaque élément devient un bloc :
   le nom, les 4 états côte à côte avec leur libellé, puis le commentaire. */
.edl-etat { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 4px; }
.edl-etat-nom { display: none; }
@media (max-width: 640px) {
  .edl-table thead { display: none; }
  .edl-table, .edl-table tbody { display: block; width: 100%; }
  .edl-table tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px 4px; padding: 8px 0; }
  .edl-table td { display: block; padding: 0 !important; }
  .edl-table td:first-child, .edl-table td:last-child { grid-column: 1 / -1; }
  .edl-etat { flex-direction: column; justify-content: flex-start; gap: 3px; width: 100%; min-height: 44px; padding: 4px 2px; }
  .edl-etat-nom { display: block; font-size: 12px; line-height: 1.2; text-align: center; color: var(--text-secondary); }
}

/* (12) Déposer des fichiers n'a pas de sens au doigt. */
.doc-depot-tactile { display: none; }
@media (pointer: coarse) {
  .doc-depot-souris { display: none; }
  .doc-depot-tactile { display: inline; }
}

/* (10) ZONES À TOUCHER — écrans tactiles uniquement, l'ordinateur ne change
   pas. Deux moyens, sans rien grossir :
   · un HALO invisible autour des icônes (le dessin ne bouge pas d'un pixel,
     le doigt est pris jusqu'à ~40-44 px) — limité là où un voisin est proche ;
   · un peu de HAUTEUR pour les boutons et filtres à texte (40 px, la hauteur
     des champs de l'app), même taille de texte.
   Mesures du 2026-09-29 à 375 px : menu 28, ⓘ 18, « ? » 16-20, calendrier
   20, « + Ajouter » 17, Actions 25, filtres 29, onglets des Mentions 25,
   lignes des cases à cocher 18, entrées du menu 35. */
@media (pointer: coarse) {
  .mobile-menu-btn, .help-i, .aide-rond, .card-action, .dp-cal-btn { position: relative; }
  .mobile-menu-btn::after, .help-i::after, .aide-rond::after, .card-action::after,
  .dp-cal-btn::after { content: ''; position: absolute; }
  .mobile-menu-btn::after { inset: -8px; }
  .help-i::after { inset: -11px; }
  .aide-rond::after { inset: -12px; }
  .card-action::after { inset: -12px -6px; }
  .dp-cal-btn::after { inset: -10px -8px; }                    /* collé au champ de date : halo limité */

  .loc-seg button, .ml-tab,
  #loyers-bien-filtre, #charges-bien-filtre, #charges-annee-filtre,
  [id^="lmnp-btn-annuelle-"], [id^="lmnp-btn-projection-"] { min-height: 40px; }
  .nav-item { padding-top: 13px; padding-bottom: 13px; }

  /* Cases à cocher : la case garde sa taille, la LIGNE (déjà cliquable) grandit */
  #param-alertes-familles label, label:has(> #param-resume-hebdo), label:has(> #charge-recurrence-toggle) { min-height: 40px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BARRE DE NAVIGATION DU BAS (1.89.0) — décisions de Ben du 2026-09-30, sur
   maquette réelle : tous les téléphones (Safari compris), Accueil · Loyers ·
   Locataires · Charges · Menu, ☰ du haut supprimé.
   `viewport-fit=cover` (index.html) : sans lui, `env(safe-area-inset-*)`
   vaut 0 et la barre passerait sous la barre d'accueil de l'iPhone. En
   contrepartie, le haut (encoche, barre d'état) et les côtés (téléphone à
   l'horizontale) sont protégés ici ; là où il n'y a rien, ces valeurs sont 0.
   ═══════════════════════════════════════════════════════════════════════════ */
.barre-bas { display: none; }
@media (max-width: 768px), (pointer: coarse) and (max-height: 500px) {
  .barre-bas { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;   /* sous le menu (100) et les fenêtres (200) */
    background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -4px 16px rgba(15,23,42,.06);
    padding: 6px calc(4px + env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) calc(4px + env(safe-area-inset-left)); }
  .barre-bas button { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
    background: none; border: none; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--text-muted);
    padding: 6px 0 4px; min-height: 52px; position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .barre-bas button i { font-size: 22px; line-height: 1; }
  .barre-bas button span { white-space: nowrap; }
  .barre-bas button.actif { color: var(--accent); }
  .barre-bas button.actif::before { content: ''; position: absolute; top: -7px; left: 30%; right: 30%; height: 3px;
    border-radius: 0 0 3px 3px; background: var(--accent); }
  .barre-bas .barre-bas-pastille { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 9px; background: var(--red); color: #fff; font-size: 12px; font-weight: 700; line-height: 18px; text-align: center; }

  /* Ce qui est en bas de l'écran remonte au-dessus de la barre (~64 px) */
  .page-content { padding-bottom: calc(16px + 64px + env(safe-area-inset-bottom)); }
  #feedback-btn { bottom: calc(80px + env(safe-area-inset-bottom)); }
  body.bandeau-install-visible #feedback-btn { bottom: calc(254px + env(safe-area-inset-bottom)); }
  .install-bandeau { bottom: calc(76px + env(safe-area-inset-bottom)); }
  /* Au-dessus du bouton Feedback (80 px + sa hauteur), lui-même au-dessus de la barre du bas (1.96.1) */
  .toast-container { bottom: calc(128px + env(safe-area-inset-bottom)); }
  body.bandeau-install-visible .toast-container { bottom: calc(302px + env(safe-area-inset-bottom)); }
  /* Le pied du menu (Déconnexion, puis Aide et Mentions depuis la 1.91.0) au-dessus de la barre d'accueil de l'iPhone */
  .sidebar-footer { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }

  /* viewport-fit=cover : le haut sous l'encoche, les côtés à l'horizontale */
  .topbar { height: calc(var(--header-h) + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); }
  body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  .sidebar { padding-top: env(safe-area-inset-top); padding-left: env(safe-area-inset-left); }
}

/* ═══════════════════════════════════════
   ACCESSIBILITÉ (1.92.0, redesign G9)
═══════════════════════════════════════ */
/* Le focus du clavier se voit partout ; la souris n'en affiche pas. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.form-input:focus-visible, .form-select:focus-visible, textarea:focus-visible { outline: none; }
.nav-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* La fenêtre reçoit le focus à l'ouverture (lecteurs d'écran) : pas de cadre autour d'elle. */
.modal:focus, .modal:focus-visible { outline: none; }
.form-input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 1; }
/* Le titre de la page est un titre de niveau 1 : il garde l'apparence du texte. */
h1.page-title { margin: 0; display: inline; line-height: inherit; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ═══════════════════════════════════════
   TABLEAU DE BORD (1.93.0, redesign lot 4)
   Panneaux et tableaux génériques (.panneau, .tbl), réutilisés par les pages
   des lots suivants ; .tb-* propres au tableau de bord.
═══════════════════════════════════════ */
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tb { display: flex; flex-direction: column; gap: 20px; }
.panneau { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); min-width: 0; }
.panneau-tete { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; padding: 16px 20px 12px; }
.panneau-titre { font-size: 16px; font-weight: 600; margin: 0; color: var(--text-primary); }
.panneau-meta { font-size: 13px; color: var(--text-muted); }
.num { font-variant-numeric: tabular-nums; }
.tb-lien { font-size: 13px; font-weight: 600; color: var(--accent-texte); background: none; border: 0; cursor: pointer; padding: 0; font-family: inherit; display: inline-flex; align-items: center; gap: 4px; }
.tb-lien:hover { text-decoration: underline; }
.tb-discret { background: transparent; border: 1px solid transparent; color: var(--text-secondary); }
.tb-discret:hover { background: var(--surface2); }

.tb-bandeau { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; padding: 12px 16px; border-radius: var(--radius); background: var(--accent-light); border: 1px solid var(--accent-border); font-size: 13px; color: var(--text-primary); }
.tb-bandeau > span { flex: 1 1 320px; }
.tb-bandeau > .ti { font-size: 18px; color: var(--accent); }

.tb-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.tb-fig { position: relative; padding: 18px 20px; border-left: 1px solid var(--border); cursor: pointer; border-radius: 0; }
.tb-fig:first-child { border-left: 0; }
.tb-fig-lib { font-size: 13px; font-weight: 500; color: var(--text-secondary); display: flex; gap: 6px; align-items: center; }
.tb-fig-lib > .ti { font-size: 15px; color: var(--text-muted); }
.tb-fig-val { font-size: 28px; font-weight: 700; letter-spacing: -.02em; margin: 6px 0 2px; line-height: 1.15; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.tb-fig-portee { font-size: 12px; color: var(--text-muted); line-height: 1.45; }
/* La bulle de définition flotte par-dessus la page (1.93.1) : hors du flux,
   elle n'étire plus la ligne de chiffres. */
.help-pop.bulle { position: absolute; z-index: 60; margin: 0; width: max-content; max-width: min(280px, calc(100vw - 32px));
  border: 1px solid var(--accent-border); box-shadow: var(--shadow-lg); cursor: default; text-align: left; font-weight: 400; white-space: normal; }
.tb-crit { color: var(--red); }
.tb-alerte { margin-top: 4px; color: var(--orange); font-weight: 600; display: flex; gap: 4px; align-items: center; }

.tb-barre-zone { padding: 0 20px 12px; }
.tb-barre { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--surface2); gap: 2px; }
.tb-barre span { display: block; height: 100%; }

.tbl-defile { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { text-align: left; font-size: 12px; font-weight: 500; color: var(--text-secondary); padding: 10px 16px; background: var(--surface2); border-bottom: 1px solid var(--border); white-space: nowrap; }
.tbl td { padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--text-primary); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl .r { text-align: right; }
.tbl tfoot td { background: var(--surface2); font-weight: 600; border-top: 1px solid var(--border); border-bottom: 0; }
.tbl tbody tr.tbl-clic { cursor: pointer; }
.tbl .badge { white-space: nowrap; }
.tbl-principal { font-weight: 600; color: var(--text-primary); }
.tbl-meta { font-size: 12px; color: var(--text-muted); }
.tbl-actions { display: flex; gap: 6px; justify-content: flex-end; align-items: center; flex-wrap: nowrap; }
.tbl-mobile { display: none; }

.tb-todo { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 14px 20px; border-top: 1px solid var(--border); }
.tb-todo-seul { border-top: 0; }
.tb-todo-fenetre { padding: 12px 0; }
.tb-sev { width: 32px; height: 32px; border-radius: var(--radius-sm); display: grid; place-items: center; font-size: 17px; }
.tb-sev-grand { width: 40px; height: 40px; font-size: 20px; }
.tb-sev.critique { background: var(--red-bg); color: var(--red); }
.tb-sev.attention { background: var(--orange-bg); color: var(--orange); }
.tb-sev.info { background: var(--accent-light); color: var(--accent); }
.tb-titre { font-weight: 600; font-size: 14px; color: var(--text-primary); }
.tb-meta { font-size: 12px; color: var(--text-muted); }
.tb-texte { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.tb-todo-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.tb-todo-actions-colonne { flex-direction: column; align-items: stretch; }
.tb-avenir { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 12px 20px 16px; border-top: 1px solid var(--border); font-size: 13px; }
.tb-vide { padding: 28px 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }

@media (max-width: 768px), (pointer: coarse) and (max-height: 500px) {
  .tb-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tb-fig { padding: 14px 16px; }
  .tb-fig:nth-child(odd) { border-left: 0; }
  .tb-fig:nth-child(n+3) { border-top: 1px solid var(--border); }
  .tb-fig-val { font-size: 22px; }
  .panneau-tete { padding: 14px 16px 10px; }
  .tb-barre-zone { padding: 0 16px 12px; }
  .tb-todo { padding: 12px 16px; grid-template-columns: 32px minmax(0, 1fr); }
  .tb-todo .tb-todo-actions { grid-column: 2; justify-content: flex-start; }
  .tb-todo-fenetre { padding: 12px 0; }
  .tb-avenir { padding: 12px 16px 14px; }
  /* Le tableau devient une liste de cartes : bien et montant sur la 1re ligne,
     locataire et échéance dessous, statut, puis les boutons ALIGNÉS à gauche. */
  .tbl-cartes thead { display: none; }
  .tbl-cartes, .tbl-cartes tbody, .tbl-cartes tfoot { display: block; width: 100%; }
  .tbl-cartes tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 16px; border-top: 1px solid var(--border); }
  .tbl-cartes tbody tr:first-child { border-top: 0; }
  .tbl-cartes td { display: block; padding: 0; border: 0; }
  .tbl-cartes .tbl-ordi { display: none; }
  .tbl-cartes .tbl-mobile { display: block; }
  .tbl-cartes td.r { text-align: right; grid-column: 2; grid-row: 1; }
  .tbl-cartes td.tbl-actions-cellule { grid-column: 1 / -1; }
  .tbl-cartes .tbl-actions { justify-content: flex-start; margin-top: 6px; flex-wrap: wrap; }
  .tbl-cartes .tbl-actions .btn { min-height: 44px; }
  .tbl-cartes tfoot tr { background: var(--surface2); }
  .tbl-cartes tfoot td[colspan="2"] { display: none; }
  .tb-lien { min-height: 36px; }
  .tb-fig-portee .tb-lien { min-height: 0; display: inline; }
  .tb-todo-actions .btn { min-height: 44px; }
}

/* ═══════════════════════════════════════
   MENU « PLUS » (1.94.0) — en position fixe, sous son bouton
═══════════════════════════════════════ */
.menu-plus { display: inline-flex; }
.menu-plus-liste { position: fixed; z-index: 300; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 6px; min-width: 220px; text-align: left; }
.menu-plus-liste[hidden] { display: none; }
.menu-plus-liste button { display: flex; width: 100%; gap: 10px; align-items: center; padding: 9px 10px; min-height: 40px; border-radius: var(--radius-sm); color: var(--text-primary); font: inherit; font-size: 13px; font-weight: 500; background: none; border: 0; cursor: pointer; text-align: left; }
.menu-plus-liste button:hover, .menu-plus-liste button:focus-visible { background: var(--surface2); outline: none; }
.menu-plus-liste button .ti { font-size: 16px; color: var(--text-muted); }
.menu-plus-liste hr { border: 0; border-top: 1px solid var(--border); margin: 6px 0; }
.menu-plus-liste button.danger, .menu-plus-liste button.danger .ti { color: var(--red); }

/* ═══════════════════════════════════════
   PAGE LOYERS (1.94.0, redesign L1 à L5)
═══════════════════════════════════════ */
.mois-tete { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.mois-annee { display: flex; gap: 8px; align-items: center; }
.mois-annee .panneau-titre { min-width: 48px; text-align: center; }
.mois-fleche { width: 36px; padding: 0; justify-content: center; }
.mois-grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; }
.mois-case { border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-sm); padding: 8px; text-align: left; font: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 2px; min-width: 0; color: var(--text-primary); }
.mois-case:hover:not([disabled]) { border-color: var(--accent-border); }
.mois-case.choisi { border-color: var(--accent); background: var(--accent-light); box-shadow: inset 0 0 0 1px var(--accent); }
.mois-case[disabled] { opacity: .55; cursor: default; }
.mois-nom { font-size: 13px; font-weight: 600; }
.mois-etat { font-size: 12px; color: var(--text-muted); display: flex; gap: 4px; align-items: center; white-space: nowrap; }
.loyers-chiffres { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.tb-fig-simple { cursor: default; }
.tb-fig-val-moyen { font-size: 22px; }
.tb-alerte-val { color: var(--orange); }
.tbl-mobile-inline { display: none; }
@media (max-width: 768px), (pointer: coarse) and (max-height: 500px) {
  .mois-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tbl-cartes .tbl-mobile-inline { display: inline; }
  .tbl-cartes td.tbl-total-encaisse { display: none; }
}

/* ═══════════════════════════════════════
   PAGE LOCATAIRES (1.94.0, redesign LO1 à LO4)
═══════════════════════════════════════ */
.loc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 16px; }
.loc-carte { display: flex; flex-direction: column; }
.loc-carte-tete { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 16px 20px; }
.loc-carte-nom { font-size: 15px; }
.loc-faits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; padding: 14px 20px; border-top: 1px solid var(--border); margin: 0; flex: 1; }
.loc-faits dt { font-size: 12px; font-weight: 500; color: var(--text-muted); }
.loc-faits dd { margin: 2px 0 0; font-size: 13px; font-weight: 600; color: var(--text-primary); }
.loc-carte-pied { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 20px 16px; border-top: 1px solid var(--border); }
@media (max-width: 768px), (pointer: coarse) and (max-height: 500px) {
  .loc-cards { grid-template-columns: minmax(0, 1fr); }
  .loc-carte { cursor: pointer; }
  .loc-carte-tete { padding: 14px 16px; }
  .loc-faits { padding: 12px 16px; }
  .loc-carte-pied { padding: 12px 16px 14px; }
  .loc-carte-pied .btn { min-height: 44px; }
}

/* ═══ PAGE ALERTES (1.94.0, redesign A1 à A5) ═══════════════════════════
   Classées par urgence, filtres par urgence et par bien, rangées repliées. */
.alertes-outils { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.alertes-outils .loc-seg { flex-wrap: wrap; }
.alertes-select { width: auto; min-width: 200px; }
.alertes-groupe { display: flex; align-items: center; gap: 8px; margin: 0; padding: 14px 20px 10px; font-size: 15px; font-weight: 700; color: var(--text-primary); }
.alertes-groupe .tbl-meta { font-weight: 600; }
.alertes-rangees > summary { cursor: pointer; list-style: revert; }
.alertes-rangees .tb-todo { opacity: .75; }
@media (max-width: 640px) {
  .alertes-outils { flex-direction: column; align-items: stretch; }
  .alertes-outils .loc-seg { display: flex; }
  .alertes-outils .loc-seg button { flex: 1 1 auto; min-height: 44px; }
  .alertes-select { width: 100%; min-width: 0; min-height: 44px; }
}

/* ═══ PAGE CHARGES (1.94.0, redesign C1 à C4) ═══════════════════════════
   Barre de répartition à couleurs fixes, totaux neutres, actions dans « Plus ». */
.charges-repart { display: flex; flex-direction: column; gap: 14px; padding: 4px 20px 18px; }
.charges-barre { height: 14px; }
.charges-legende { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); column-gap: 32px; }
.charges-legende-ligne { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 44px; gap: 10px; align-items: center; font-size: 13px; padding: 7px 0; border-top: 1px solid var(--border); color: var(--text-primary); }
.charges-legende-ligne .tbl-meta { text-align: right; }
.charges-pastille { width: 10px; height: 10px; border-radius: 3px; }
.charges-futures { padding: 12px 20px 0; }
.charges-totaux { margin-top: 12px; }
.charges-par-bien-zone { padding: 16px 20px 4px; }
.charges-sous-titre { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin: 0 0 8px; }
.charges-par-bien-zone .tbl th, .charges-par-bien-zone .tbl td { padding-left: 0; }
.charges-tableau { margin-top: 16px; }
.charges-tableau tr.charges-groupe td { background: var(--surface2); background: color-mix(in srgb, var(--bien) 7%, var(--surface)); padding: 10px 16px; border-bottom: 2px solid var(--bien); }
/* Bandeau du bien (1.94.1) : comme le modèle validé — teinte, pastille et
   trait de la couleur du bien, un espace entre deux biens ; le total reste en
   couleur de texte (lisible en Nuit sans recalcul). */
.charges-tableau tr.charges-groupe:not(:first-child) td { border-top: 8px solid var(--bg); }
.charges-groupe-tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.charges-groupe-tete .tbl-principal { font-size: 14px; font-weight: 700; }
.charges-groupe-pastille { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--bien); margin-right: 8px; vertical-align: 1px; }
@media (max-width: 768px), (pointer: coarse) and (max-height: 500px) {
  .charges-repart { padding: 4px 16px 16px; }
  .charges-legende { grid-template-columns: 1fr; }
  .charges-par-bien-zone { padding: 12px 16px 4px; }
  /* 1.94.1 : un trait par bien — chaque montant avait le sien. Sélecteur
     renforcé : « .charges-par-bien td » perdait face à « .tbl td » (même
     poids, écrit plus loin dans le fichier). */
  .charges-par-bien-zone .charges-par-bien td { border: 0; }
  .charges-tableau tr.charges-groupe { display: block; padding: 0; border-top: 0; }
  .charges-tableau tr.charges-groupe td { display: block; }
  /* 1.94.1 : « Plus » à droite de l'étiquette Déductible, plus sur sa propre ligne */
  .charges-tableau td.tbl-actions-cellule { grid-column: 2; grid-row: 2; justify-self: end; align-self: center; }
  .charges-tableau .tbl-actions { margin-top: 0; justify-content: flex-end; }
  .charges-tableau td:nth-child(4) { align-self: center; }
}

/* SURVOL SEULEMENT À LA SOURIS (1.94.1, retour de Ben) : sur iPhone, le
   « survol » reste collé à la ligne touchée — elle restait grise après avoir
   ouvert « Plus » et fait défiler la page. */
@media (hover: hover) and (pointer: fine) {
  .doc-ligne:hover { background: var(--surface2); }
  .tb-fig:hover { background: var(--surface2); }
  .tb-fig-simple:hover { background: none; }
  .tbl tbody tr.tbl-clic:hover td { background: var(--surface2); }
}

/* ═══ FICHE DU BIEN (1.95.0, redesign B1 à B4) ═══════════════════════════
   En-tête blanc au lieu du bandeau bleu, chiffres neutres, tous les
   locataires en cours, une action par loyer et « Plus ». */
.fiche-barre { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 16px; }
.fiche-tete { margin-bottom: 20px; }
.fiche-tete-texte { padding: 18px 20px 14px; }
.fiche-titre { font-size: 22px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 4px; color: var(--text-primary); }
.fiche-chiffres { border-top: 1px solid var(--border); }
.fiche-dpe-alerte { color: var(--orange); font-size: 18px; }
.fiche-gros { font-size: 20px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
.fiche-lignes { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-primary); }
.fiche-manque { color: var(--orange); font-weight: 600; }
.fiche-pauses { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.fiche-pause { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fiche-loc + .fiche-loc { border-top: 1px solid var(--border); margin-top: 14px; padding-top: 14px; }
.fiche-loc-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.fiche-loc .loc-faits { margin: 0; padding: 8px 0 4px; border-top: 0; }
.fiche-loc .loc-carte-pied { padding: 8px 0 0; border-top: 0; }
.fiche-loyers td { padding-left: 0; }
@media (max-width: 768px), (pointer: coarse) and (max-height: 500px) {
  .fiche-tete-texte { padding: 16px; }
  .fiche-titre { font-size: 20px; }
  .fiche-loyers td { padding-left: 0; }
  .fiche-loyers.tbl-cartes tr { padding-left: 0; padding-right: 0; }
  /* les trois chiffres de l'en-tête restent sur une ligne */
  .fiche-chiffres.tb-figs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fiche-chiffres .tb-fig { padding: 12px; border-top: 0; border-left: 1px solid var(--border); }
  .fiche-chiffres .tb-fig:first-child { border-left: 0; }
  .fiche-chiffres .tb-fig-val { font-size: 18px; }
}

/* ═══ INVESTISSEMENT (1.95.0, redesign I1, I2, I6) ═══════════════════════
   Six chiffres sur une grille de trois (plus de carte seule en 2e ligne),
   en couleur neutre ; « À compléter » quand un capital restant dû manque. */
#invest-kpis.kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi-value.kpi-value-manque { color: var(--text-muted); font-size: 22px; }
@media (max-width: 768px), (pointer: coarse) and (max-height: 500px) {
  #invest-kpis.kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Action dans un message (1.96.0) : « Annuler » après un encaissement en un clic. */
.toast-action { margin-left: auto; font: inherit; font-weight: 700; color: inherit; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .45); border-radius: var(--radius-sm); padding: 6px 12px; cursor: pointer; min-height: 36px; white-space: nowrap; }
.toast-action:hover { background: rgba(255, 255, 255, .26); }
body.theme-dark .toast-action { background: transparent; border-color: currentColor; }

/* Mois du graphique de cash-flow (1.96.2, G2) : en HTML, 12 px, sous les barres. */
.invest-cf-mois { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; margin-top: 4px; }
.invest-cf-mois span { font-size: 12px; color: var(--text-muted); text-align: center; overflow: hidden; }

/* ── Fenêtre de saisie générique (1.97.0) : remplace les boîtes prompt() ── */
.saisie-requis { color: var(--red); }
.saisie-aide { display: block; font-size: 12.5px; color: var(--text-muted); margin-top: 5px; }
.saisie-erreur { font-size: 12.5px; color: var(--red); margin-top: 5px; }
.saisie-erreur:empty { display: none; }
.form-input[aria-invalid="true"] { border-color: var(--red); }
.saisie-suffixe { position: relative; }
.saisie-suffixe .form-input { padding-right: 48px; }
.saisie-suffixe > span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: var(--text-sm); pointer-events: none; }
fieldset.saisie-groupe { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
fieldset.saisie-groupe legend { padding: 0; margin-bottom: 6px; }
.saisie-choix { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 8px; cursor: pointer; }
.saisie-choix:has(input:checked) { border-color: var(--accent); background: var(--accent-light); }
.saisie-choix input { margin-top: 3px; flex-shrink: 0; }
.saisie-choix b { display: block; font-size: var(--text-base); color: var(--text-primary); }
.saisie-choix .saisie-aide { margin-top: 2px; }

.saisie-intro { margin: 0 0 16px; font-size: var(--text-base); color: var(--text-secondary); }
.saisie-intro b { color: var(--text-primary); }

/* ── 1.97.0 : 44 px au téléphone, partout (point 4 de l'audit) ──
   La plupart des boutons faisaient 36–37 px, la croix des fenêtres 32 px, les
   champs 41 px. L'ordinateur ne change pas. La taille du TEXTE des champs ne
   change pas non plus (le zoom de Safari est déjà bloqué par l'app). */
@media (max-width: 768px), (pointer: coarse) and (max-height: 500px) {
  .btn, .btn-sm, .tb-discret { min-height: 44px; }
  .btn, .btn-sm { justify-content: center; }
  .form-input, .form-select { min-height: 44px; }
  textarea.form-input { min-height: 88px; }
  .modal-close { width: 44px; height: 44px; }
  /* Pied des fenêtres : le bouton principal d'abord (pleine largeur), puis les
     autres côte à côte, « Fermer » en dernier — Télécharger, Envoyer, Fermer. */
  .modal-footer > .modal-fermer { order: 1; }
}

/* 1.97.1 — Admin, « Inscriptions par mois » : titre comme les autres cartes, et
   douze colonnes qui tiennent au téléphone (septembre et octobre sortaient à
   droite) : le mois s'abrège en initiale sous 769 px. */
.adm-mois { display: flex; align-items: flex-end; gap: 6px; height: 132px; }
.adm-mois-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.adm-mois-barre { width: 100%; max-width: 32px; background: var(--accent); border-radius: 3px 3px 0 0; }
.adm-mois-l { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.adm-mois-n { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.adm-mois-l .court { display: none; }
@media (max-width: 768px), (pointer: coarse) and (max-height: 500px) {
  .adm-mois { gap: 3px; }
  .adm-mois-l .long { display: none; }
  .adm-mois-l .court { display: inline; }
}