/* QuittancePro — feuille de style partagée par toutes les pages authentifiées
   (base.html). Auparavant dupliquée intégralement dans chacun des 8
   templates ; toute évolution de charte (couleur, bouton, nav...) ne se
   fait plus qu'ici. */

:root {
  /* ── Palette v2 (refonte "SaaS dashboard épuré", voir
     .design/saas-dashboard-redesign/) ──────────────────────────────────
     Base quasi-monochrome (blanc/gris très clair + texte quasi-noir) + UN
     SEUL accent chaud, un dégradé orange→rouge, réservé à l'indicateur de
     nav active et à l'élément "hero" de chaque page — jamais utilisé pour
     de la simple décoration ou une emphase générique (c'est justement ce
     que faisait --ocre dans l'ancienne direction, et qu'on corrige ici). */
  --ink:         #111318;
  --ink-soft:    #3A3D46;
  --surface:     #FFFFFF;
  --surface-alt: #F4F5F6;
  --border:      #E7E8EB;

  --accent:      #F0631F;
  --accent-soft: #FB923C;
  /* Vérifié numériquement (WCAG) : texte blanc sur les DEUX extrémités du
     dégradé doit rester >= 4.5:1 (la carte KPI "hero" porte un petit label
     en majuscules, pas seulement le gros chiffre en "large text"). Un
     dégradé plus clair (ex: #FB923C au lieu de #C2410C) tombe à ~2.3:1 sur
     son extrémité claire — insuffisant même pour du grand texte. */
  --accent-grad: linear-gradient(135deg, #C2410C 0%, #B91C1C 100%);
  --accent-pale: #FFF1E8;
  /* --accent en texte direct sur fond clair ≈ 3.2:1, sous le seuil AA
     (4.5:1) pour du texte normal — cf. le même problème déjà rencontré et
     documenté avec --ocre dans l'ancienne direction (--accent-text-warm).
     --accent-text est une teinte plus foncée du même orange, ≈5.2:1,
     réservée à tout texte (jamais aux surfaces/icônes/dégradés, qui
     restent sur --accent). */
  --accent-text: #C2410C;

  /* ── Alias vers l'ancien nommage ──────────────────────────────────────
     Évite de réécrire individuellement les ~500 usages de var(--navy)/
     var(--ocre)/var(--grey-*)/etc. dans ce fichier : on retargete les
     VALEURS vers la nouvelle palette, chaque nom continue de piloter le
     rôle sémantique qu'il avait déjà (bouton primaire, texte de titre,
     fond de carte...) dans les règles existantes plus bas. --ocre/--sienna
     (ancien accent chaud générique, utilisé pour des dizaines de petits
     chips/badges/montants) sont neutralisés en gris/noir sobre par défaut
     — conforme au principe "un seul accent" du brief — plutôt que
     retargetés vers l'orange, ce qui aurait mis l'accent partout au lieu
     de nulle part. Scaffolding transitoire : à mesure que chaque page est
     reprise (voir TASKS.md), ses règles doivent progressivement pointer
     directement vers --ink/--accent/--surface-alt et ces alias disparaître
     à terme — ne pas s'appuyer dessus pour du nouveau code. */
  --navy:        var(--ink);
  --navy-soft:   var(--ink-soft);
  --navy-pale:   var(--surface-alt);
  --grey-bg:     var(--surface-alt);
  --grey-card:   var(--surface);
  --grey-border: var(--border);
  --grey-mid:    #9CA3AF;
  --grey-txt:    #6B7280;
  --ocre:        #4B5563;
  --ocre-pale:   #F3F4F6;
  --ocre-mid:    #6B7280;
  --sienna:      #1F2937;
  --sienna-pale: #F3F4F6;
  --blue-light:  #6B7280;
  --blue-pale:   #F3F4F6;

  --success:     #16A34A;
  --success-pale:#EAFBF0;
  --red:         #DC2626;
  --red-pale:    #FEECEC;
  --warn:        #D97706;
  --warn-pale:   #FEF6E7;

  --font-display: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
  --font-body:    'Inter', 'Segoe UI', sans-serif;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 26px;

  --shadow-sm: 0 1px 2px rgba(17,19,24,.04);
  --shadow-md: 0 6px 20px rgba(17,19,24,.06);
  --shadow-lg: 0 16px 40px rgba(17,19,24,.10);
  --shadow-nav: none;

  /* Icônes — set Lucide (MIT), viewBox 24x24, stroke-width 2.5. */
  --icon-stroke: 2.5;
  --icon-xs: 14px;  /* badges/chips inline */
  --icon-sm: 16px;  /* boutons .btn-sm, nav mobile */
  --icon-md: 20px;  /* boutons standards, alertes */
  --icon-lg: 24px;  /* kpi-card, empty-state */

  --accent-text-warm: var(--ink);
}

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:var(--font-body); background:var(--grey-bg); color:var(--ink); min-height:100vh; font-size:14px; line-height:1.55; -webkit-font-smoothing:antialiased; }

h1, h2, h3, .btn, .modal-top h2, .section-head h2, .sc-head h2,
.kpi-val, .t-total, .m-total, .h-amount, .t-name, .u-name, .tenant-name, .bc-name,
.rev-tenant, .modal-amount-value, .loyer-chip, .t-loyer, .badge, .role-chip,
.stat-card .s-val, .date-tab, .month-chip, .rev-data-val, .modal-amount-label,
.section-title, .rev-count, .bc-count, .toggle-btn {
  font-family: var(--font-display);
}

.kpi-val, .t-total, .m-total, .h-amount, .modal-amount-value, .loyer-chip,
.t-loyer, .stat-card .s-val, .bar-val, .rev-data-val {
  font-variant-numeric: tabular-nums;
}

:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }

/* ════════════════════ SIDEBAR ════════════════════ */
/* Police système en dur (jamais var(--font-display)/(--font-body)) : la
   sidebar est visible en permanence sur chaque page, donc la plus sensible
   au "saut" que provoque le remplacement tardif d'une police web une fois
   chargée (les largeurs de texte diffèrent légèrement entre la police
   système affichée immédiatement et la police web qui la remplace ensuite,
   ce qui déplacerait les libellés et donnerait l'impression que le menu
   bouge — régression déjà rencontrée et corrigée sur l'ancienne nav). */
.sidebar {
  position:fixed; top:0; left:0; bottom:0; width:248px; z-index:200;
  background:var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  font-family:'Segoe UI', system-ui, -apple-system, sans-serif;
}
.sidebar-brand { display:flex; align-items:center; gap:10px; padding:22px 20px 18px; }
.brand-mark { width:32px; height:32px; flex-shrink:0; border-radius:var(--radius-sm); }
.sidebar-brand-text { display:flex; flex-direction:column; line-height:1.3; }
.sidebar-brand-name { font-size:15.5px; font-weight:800; color:var(--ink); letter-spacing:-.2px; }
.sidebar-brand-tag { font-size:11px; font-weight:600; color:var(--grey-txt); }

.sidebar-links { flex:1; overflow-y:auto; padding:10px 12px; display:flex; flex-direction:column; gap:2px; }
.sidebar-links a {
  display:flex; align-items:center; gap:10px;
  color:var(--grey-txt); text-decoration:none; font-size:13.5px; font-weight:600;
  padding:10px 12px; border-radius:var(--radius-sm);
  border-left:3px solid transparent; transition:background .15s, color .15s, border-color .15s;
}
.sidebar-links a:hover { background:var(--surface-alt); color:var(--ink); }
.sidebar-links a.active { background:var(--accent-pale); color:var(--accent-text); border-left-color:var(--accent); font-weight:700; }
.sidebar-links a .icon { flex-shrink:0; }

.sidebar-user { padding:14px 16px 18px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:8px; }
.sidebar-user-chip { display:inline-flex; align-items:center; gap:8px; color:var(--ink); font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-logout { display:inline-flex; align-items:center; gap:8px; color:var(--grey-txt); text-decoration:none; font-size:12.5px; font-weight:600; padding:6px 2px; border-radius:var(--radius-sm); transition:color .15s; white-space:nowrap; }
.sidebar-logout:hover { color:var(--red); }

/* Icônes Lucide (voir templates/_icons.html) — remplacent les emoji partout
   dans l'app. Toujours fill="none" stroke="currentColor" sur le <svg>, la
   taille/l'épaisseur de trait se pilotent uniquement via ces classes. */
.icon { flex-shrink:0; stroke-width:var(--icon-stroke); vertical-align:-3px; }
.icon-xs { width:var(--icon-xs); height:var(--icon-xs); }
.icon-sm { width:var(--icon-sm); height:var(--icon-sm); }
.icon-md { width:var(--icon-md); height:var(--icon-md); }
.icon-lg { width:var(--icon-lg); height:var(--icon-lg); }

/* Bouton hamburger + scrim : masqués par défaut, activés uniquement sous le
   breakpoint mobile (voir règles @media plus bas, tâche "Mobile sidebar"). */
.mobile-topbar-toggle {
  display:none;
  position:fixed; top:12px; left:12px; z-index:210;
  flex-direction:column; justify-content:center; align-items:center; gap:4px;
  width:44px; height:44px; padding:8px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm);
  cursor:pointer; box-shadow:var(--shadow-sm);
}
.mobile-topbar-toggle span { display:block; height:2px; width:20px; background:var(--ink); border-radius:2px; transition:transform .18s, opacity .18s; }
.mobile-topbar-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.mobile-topbar-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.mobile-topbar-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
.sidebar-scrim { display:none; position:fixed; inset:0; background:rgba(17,19,24,.4); z-index:199; }

@media (max-width:860px) {
  .mobile-topbar-toggle { display:flex; }
  .sidebar {
    transform:translateX(-100%); transition:transform .2s ease;
    box-shadow:var(--shadow-lg); top:0; height:100vh; width:264px;
  }
  .sidebar.open { transform:translateX(0); }
  .sidebar-scrim.open { display:block; }
  .sidebar-brand { padding-top:60px; }
}

/* ════════════════════ LAYOUT ════════════════════ */
.main-area { margin-left:248px; }
/* Largeur fluide : le contenu occupe tout l'espace disponible à côté de la
   sidebar (jamais élargie elle-même). max-width haut (1800px) uniquement
   comme garde-fou sur les très grands écrans/ultrawide, pas une contrainte
   de lecture — cette appli est un outil de gestion dense en tableaux, pas
   un article de blog où la longueur de ligne compte. */
.container { max-width:1800px; margin:0 auto; padding:32px 40px 48px; }
@media (max-width:860px) { .main-area { margin-left:0; } .container { padding:32px 24px 48px; } }
@media (max-width:600px) { .container { padding:20px 16px 36px; } }

/* ════════════════════ PAGE HEADER ════════════════════ */
.page-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:26px; flex-wrap:wrap; gap:12px; }
.page-header h1 { font-size:25px; font-weight:700; color:var(--ink); letter-spacing:-.5px; margin-bottom:4px; }
.page-header h1 em { font-style:normal; font-weight:700; color:var(--ink); }
.page-header p { color:var(--grey-txt); font-size:13.5px; }

/* ════════════════════ ALERT BANNER (révisions en attente) ════════════════════ */
.alert-banner {
  text-decoration:none; display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--warn-pale); border:1.5px solid rgba(217,119,6,.25); border-left:4px solid var(--warn);
  border-radius:var(--radius-md); padding:14px 20px; margin-bottom:24px; cursor:pointer; flex-wrap:wrap;
}
.alert-banner-main { display:flex; align-items:center; gap:12px; }
.alert-banner-icon { color:var(--warn); }
.alert-banner-title { font-weight:800; font-size:14px; color:var(--ink); }
.alert-banner-sub { font-size:12.5px; color:var(--grey-txt); margin-top:2px; }
.alert-banner-cta { font-size:13px; font-weight:700; color:var(--warn); white-space:nowrap; }

/* ════════════════════ FLASH ════════════════════ */
.flash { padding:12px 16px; border-radius:var(--radius-md); margin-bottom:18px; font-size:13.5px; font-weight:600; display:flex; align-items:center; gap:8px; }
.flash-success { background:var(--success-pale); color:var(--success); border:1px solid rgba(42,122,82,.2); }
.flash-error   { background:var(--red-pale); color:var(--red); border:1px solid rgba(192,57,43,.2); }
.flash-info    { background:var(--navy-pale); color:var(--navy-soft); border:1px solid rgba(38,54,95,.15); }

/* ════════════════════ BUTTONS ════════════════════ */
/* Forme pilule partout (border-radius très généreux). Un seul bouton plein
   et coloré dans toute l'app : .btn-generate ("Générer la quittance",
   l'action hero de chaque carte locataire). Tout le reste — y compris
   .btn-primary — reste en contour clair, pour ne jamais faire concurrence
   visuelle à ce bouton ni retomber sur l'ancien pavé noir plein. */
.btn {
  display:inline-flex; align-items:center; gap:6px; border:none; border-radius:999px;
  padding:10px 20px; font-size:13px; font-weight:600; font-family:var(--font-display); cursor:pointer;
  transition:background .15s, box-shadow .15s, transform .1s, border-color .15s, color .15s;
  text-decoration:none; letter-spacing:.1px;
}
.btn:active { transform:scale(.97); }
.btn-primary { background:#fff; color:var(--ink); border:1.5px solid var(--border); }
.btn-primary:hover { border-color:var(--ink); background:var(--surface-alt); }
.btn-ocre { background:var(--ocre); color:#fff; }
.btn-ocre:hover { background:var(--ink-soft); box-shadow:var(--shadow-sm); }
.btn-success { background:var(--success); color:#fff; }
.btn-success:hover { background:#128a3e; box-shadow:var(--shadow-sm); }
.btn-outline { background:#fff; color:var(--ink); border:1.5px solid var(--border); }
.btn-outline:hover { border-color:var(--ink); background:var(--surface-alt); }
.btn-danger { background:transparent; color:var(--red); border:1.5px solid rgba(220,38,38,.25); }
.btn-danger:hover { background:var(--red-pale); border-color:var(--red); }
.btn-ghost { background:var(--surface-alt); color:var(--grey-txt); border:1px solid var(--border); }
.btn-ghost:hover { background:var(--border); color:var(--ink); }
.btn-filter { background:var(--ink); color:#fff; }
.btn-filter:hover { background:var(--ink-soft); }
.btn-sm { padding:7px 15px; font-size:12px; }
.btn:disabled { opacity:.45; cursor:not-allowed; transform:none; }

/* ════════════════════ FORMS ════════════════════ */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-group { display:flex; flex-direction:column; gap:6px; }
.form-group.full { grid-column:1/-1; }
.form-group label { font-family:var(--font-display); font-size:11px; font-weight:700; color:var(--grey-txt); text-transform:uppercase; letter-spacing:.7px; }
.form-group input, .form-group select {
  border:1.5px solid var(--grey-border); border-radius:var(--radius-sm);
  padding:10px 13px; font-size:14px; font-family:var(--font-body); font-weight:500;
  background:var(--grey-bg); color:var(--ink); width:100%;
  transition:border-color .15s, box-shadow .15s; outline:none;
}
.form-group input:focus, .form-group select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(240,99,31,.15); background:var(--grey-card); }
.form-group input[type="password"] { letter-spacing:3px; }
.hint { font-size:11.5px; color:var(--grey-txt); margin-top:3px; line-height:1.5; }
.form-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:20px; padding-top:16px; border-top:1px solid var(--grey-border); }
.check-row { display:flex; align-items:center; gap:10px; }
.check-row input { width:17px; height:17px; accent-color:var(--ocre); cursor:pointer; }
.check-row label { font-family:var(--font-body); font-size:14px; font-weight:500; color:var(--ink); text-transform:none; letter-spacing:0; cursor:pointer; }
.pw-strength { height:4px; border-radius:2px; margin-top:6px; transition:all .3s; background:var(--grey-border); }
.pw-weak   { background:var(--red); width:33%; }
.pw-medium { background:var(--warn); width:66%; }
.pw-strong { background:var(--success); width:100%; }

@media (max-width:600px) {
  .form-grid { grid-template-columns:1fr; }
}

/* ════════════════════ MODAL ════════════════════ */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(15,19,32,.55); z-index:500; align-items:center; justify-content:center; backdrop-filter:blur(4px); padding:16px; }
.modal-overlay.open { display:flex; }
.modal { background:var(--grey-card); border-radius:var(--radius-xl); width:520px; max-width:100%; max-height:90vh; overflow-y:auto; box-shadow:var(--shadow-lg); animation:popIn .18s ease; }
@keyframes popIn { from{opacity:0;transform:scale(.97) translateY(4px)} to{opacity:1;transform:scale(1) translateY(0)} }
.modal-top { background:var(--surface-alt); border-bottom:1px solid var(--border); padding:22px 28px 18px; }
.modal-top h2 { font-size:18px; font-weight:700; color:var(--ink); letter-spacing:-.3px; margin-bottom:3px; display:flex; align-items:center; gap:8px; }
.modal-top .modal-sub { font-size:13px; color:var(--grey-txt); }
.modal-body { padding:22px 28px 26px; }
@media (max-width:480px) {
  .modal-top { padding:18px 20px 16px; }
  .modal-body { padding:18px 20px 22px; }
}

.modal-amount-block { background:var(--surface-alt); border:1px solid var(--border); border-radius:var(--radius-md); padding:14px 18px; display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; gap:10px; flex-wrap:wrap; }
.modal-amount-label { font-size:11px; font-weight:700; color:var(--grey-txt); text-transform:uppercase; letter-spacing:.8px; }
.modal-amount-value { font-size:28px; font-weight:800; color:var(--ink); letter-spacing:-.5px; }
.modal-check { display:flex; align-items:center; gap:12px; padding:13px 16px; background:var(--surface-alt); border:1.5px solid var(--border); border-radius:var(--radius-md); margin-bottom:22px; cursor:pointer; }
.modal-check input { width:17px; height:17px; cursor:pointer; accent-color:var(--ink); flex-shrink:0; }
.modal-check label { font-size:13.5px; font-weight:600; color:var(--ink); cursor:pointer; flex:1; }
.modal-actions { display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }

/* ════════════════════ TOAST ════════════════════ */
.toast-container { position:fixed; bottom:20px; right:20px; left:20px; z-index:9999; display:flex; flex-direction:column; align-items:flex-end; gap:8px; pointer-events:none; }
.toast { pointer-events:auto; padding:13px 20px; border-radius:var(--radius-md); font-size:13.5px; font-weight:600; box-shadow:var(--shadow-lg); animation:slideUp .25s ease; display:flex; align-items:center; gap:10px; max-width:360px; width:100%; }
.toast-success { background:var(--navy); color:#fff; border-left:4px solid var(--ocre); }
.toast-error { background:#fff; color:var(--sienna); border:1px solid var(--sienna-pale); border-left:4px solid var(--sienna); }
@keyframes slideUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }

/* ════════════════════ TABLES (scroll horizontal sur mobile) ════════════════════ */
.table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table { width:100%; border-collapse:collapse; }

/* ════════════════════ LIST ROWS (locataires / utilisateurs) ════════════════════ */
.list-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-2xl); overflow:hidden; box-shadow:var(--shadow-sm); }
.tenant-row, .user-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 22px; border-bottom:1px solid var(--border); transition:background .15s;
  gap:14px; flex-wrap:wrap;
}
.tenant-row:last-child, .user-row:last-child { border-bottom:none; }
.tenant-row:hover, .user-row:hover { background:var(--surface-alt); }

.group-header {
  display:flex; align-items:center; justify-content:space-between;
  background:var(--surface-alt); color:var(--ink); font-weight:700; font-size:12.5px;
  padding:10px 22px; border-bottom:1px solid var(--border);
  text-transform:uppercase; letter-spacing:.4px;
}
.group-header:first-child { border-top:none; }
.group-count { font-family:var(--font-body); font-weight:600; color:var(--grey-txt); text-transform:none; letter-spacing:0; font-size:12px; }

.t-avatar, .u-avatar { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:13px; font-weight:700; color:var(--ink); flex-shrink:0; margin-right:14px; background:var(--surface-alt); border:1px solid var(--border); }
.u-avatar.admin    { background:var(--accent-pale); color:var(--accent-text); border-color:rgba(240,99,31,.25); }
.u-avatar.bailleur { background:var(--surface-alt); color:var(--ink); }
.u-avatar.lecteur  { background:var(--surface-alt); color:var(--grey-txt); }
.t-info-wrap, .u-info-wrap { display:flex; align-items:center; flex:1; min-width:0; }
.t-name, .u-name { font-weight:700; font-size:14.5px; color:var(--ink); margin-bottom:3px; }
.t-meta, .u-meta { font-size:12px; color:var(--grey-txt); line-height:1.6; }
.t-loyer { background:var(--surface-alt); color:var(--ink); padding:4px 12px; border-radius:20px; font-size:12.5px; font-weight:700; border:1px solid var(--border); white-space:nowrap; }
.inactive-badge, .inactive-chip { background:var(--red-pale); color:var(--red); padding:2px 9px; border-radius:20px; font-size:11px; font-weight:700; border:1px solid rgba(220,38,38,.2); margin-left:8px; }
.t-actions, .u-actions { display:flex; gap:8px; flex-shrink:0; }
.receipt-form { display:flex; align-items:center; gap:6px; }
.receipt-form select { border:1.5px solid var(--border); border-radius:var(--radius-sm); padding:6px 8px; font-size:12px; font-family:var(--font-body); font-weight:600; background:var(--surface-alt); color:var(--ink); outline:none; }
.receipt-form select:focus { border-color:var(--accent); }

.role-chip { padding:4px 12px; border-radius:20px; font-size:12px; font-weight:600; }
.role-admin    { background:var(--accent-pale); color:var(--accent-text); border:1px solid rgba(240,99,31,.3); }
.role-bailleur { background:var(--surface-alt); color:var(--ink); border:1px solid var(--border); }
.role-lecteur  { background:var(--surface-alt); color:var(--grey-txt); border:1px solid var(--border); }

@media (max-width:640px) {
  .tenant-row, .user-row { flex-direction:column; align-items:stretch; padding:16px 18px; }
  .group-header { padding:10px 18px; }
  .t-info-wrap, .u-info-wrap { width:100%; }
  .t-loyer { align-self:flex-start; }
  .t-actions, .u-actions { width:100%; }
  .t-actions .btn, .u-actions .btn, .t-actions form, .u-actions form { flex:1; }
  .t-actions form button, .u-actions form button { width:100%; }
}

/* ════════════════════ EMPTY STATE ════════════════════ */
.empty-state { text-align:center; padding:52px 24px; color:var(--grey-txt); font-size:14px; }
.empty-state a { color:var(--accent-text); font-weight:700; text-decoration:none; }
.empty-icon { font-size:40px; margin-bottom:12px; }
.empty-state-icon {
  width:52px; height:52px; margin:0 auto 16px; border-radius:50%;
  background:var(--surface-alt); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; color:var(--grey-mid);
}
.empty-state-title { font-weight:700; color:var(--ink); font-size:14.5px; margin-bottom:4px; }
.empty-state-sub { font-size:13px; color:var(--grey-txt); }

/* ════════════════════ INFO / DEFAULT BOX ════════════════════ */
.info-box {
  background:var(--surface-alt); border:1px solid var(--border);
  border-left:4px solid var(--ink-soft); border-radius:var(--radius-md);
  padding:14px 18px; font-size:13px; color:var(--ink-soft); line-height:1.7;
  margin-bottom:22px; display:flex; gap:12px; align-items:flex-start;
}
.info-box .icon { font-size:18px; flex-shrink:0; margin-top:1px; }
.info-box a { color:var(--ink); font-weight:700; }
.info-box.warn {
  background:var(--warn-pale); border-color:rgba(217,119,6,.25);
  border-left-color:var(--warn); color:#8a5a0a; display:block;
}
.default-box {
  background:var(--surface-alt); border:1px solid var(--border);
  border-left:4px solid var(--ink-soft); border-radius:var(--radius-md);
  padding:14px 18px; margin-bottom:22px; font-size:13px; color:var(--ink-soft); line-height:1.7;
}
.default-box strong { color:var(--ink); }

/* ════════════════════ SECTION CARD (paramètres) ════════════════════ */
.section { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-2xl); overflow:hidden; box-shadow:var(--shadow-sm); margin-bottom:18px; }
.section-head { background:var(--surface-alt); padding:14px 22px; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--border); }
.section-head .s-icon { font-size:17px; }
.section-head h2 { font-size:14px; font-weight:700; color:var(--ink); letter-spacing:-.1px; }
.section-body { padding:20px 22px; }
.save-bar { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-2xl); padding:16px 22px; display:flex; justify-content:flex-end; align-items:center; gap:12px; flex-wrap:wrap; box-shadow:var(--shadow-sm); }
.save-hint { font-size:12.5px; color:var(--grey-txt); }

/* ════════════════════ CARD GRIDS (bailleurs, tenants, révisions) ════════════════════ */
.bailleurs-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; margin-bottom:28px; }
.bailleur-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-2xl); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .15s, box-shadow .15s; }
.bailleur-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.bc-top { background:transparent; padding:20px 20px 2px; display:flex; align-items:center; justify-content:space-between; }
.bc-avatar { width:42px; height:42px; background:var(--surface-alt); border:1px solid var(--border); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:15px; font-weight:700; color:var(--ink); }
.bc-count { background:var(--surface-alt); color:var(--ink); border:1px solid var(--border); padding:4px 12px; border-radius:20px; font-size:12px; font-weight:700; }
.bc-body { padding:14px 20px 20px; }
.bc-name { font-size:15.5px; font-weight:700; color:var(--ink); margin-bottom:6px; }
.bc-meta { font-size:12px; color:var(--grey-txt); line-height:1.7; }
.bc-meta .addr { color:var(--ink-soft); font-weight:600; font-size:12.5px; }
.bc-divider { border:none; border-top:1px solid var(--border); margin:12px 0; }
.bc-actions { display:flex; gap:8px; }

.tenants-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:16px; margin-bottom:40px; }
.tenant-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-2xl); overflow:hidden; transition:transform .15s, box-shadow .15s; box-shadow:var(--shadow-sm); }
.tenant-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.card-header-band { background:transparent; padding:20px 20px 2px; display:flex; align-items:center; justify-content:space-between; }
.tenant-avatar { width:42px; height:42px; background:var(--surface-alt); border:1px solid var(--border); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:14px; font-weight:700; color:var(--ink); letter-spacing:-.3px; }
.loyer-chip { background:var(--surface-alt); color:var(--ink); padding:5px 13px; border-radius:20px; font-size:13px; font-weight:700; letter-spacing:-.1px; border:1px solid var(--border); }
.card-body { padding:14px 20px 20px; }
.tenant-name { font-size:15.5px; font-weight:700; color:var(--ink); margin-bottom:6px; letter-spacing:-.2px; }
.tenant-meta { font-size:12px; color:var(--grey-txt); line-height:1.7; }
.tenant-meta .addr { color:var(--ink-soft); font-weight:600; font-size:12.5px; }
.card-divider { border:none; border-top:1px solid var(--border); margin:12px 0; }
.btn-generate {
  /* --accent-pale (fond quasi blanc teinté orange) + bordure --accent-soft
     pour rester lisible comme bouton sur les cartes blanches, avec du
     texte --ink (blanc ne tient jamais le seuil AA 4.5:1 sur un orange
     clair — voir DESIGN_REVIEW.md pour le calcul d'origine sur --accent,
     ~3.2:1). --ink sur --accent-pale dépasse largement l'AA. */
  width:100%; background:var(--accent-pale); color:var(--ink);
  border:1.5px solid var(--accent-soft); border-radius:999px; padding:11px 16px; font-size:13.5px; font-weight:600;
  font-family:var(--font-display); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px;
  transition:background .18s, box-shadow .18s, transform .1s; letter-spacing:.1px;
}
.btn-generate:hover { background:var(--accent-soft); box-shadow:var(--shadow-sm); }
.btn-generate:active { transform:scale(.98); }

.rev-section-title { font-family:var(--font-display); font-size:16px; font-weight:700; color:var(--navy); margin-bottom:14px; padding-bottom:8px; border-bottom:2px solid var(--grey-border); display:flex; align-items:center; gap:10px; }
.rev-count { background:var(--navy); color:#fff; padding:2px 10px; border-radius:20px; font-size:12px; font-weight:700; }
.rev-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; margin-bottom:36px; }
.rev-card { background:var(--grey-card); border:1px solid var(--grey-border); border-radius:var(--radius-2xl); overflow:hidden; box-shadow:var(--shadow-sm); transition:box-shadow .18s; }
.rev-card:hover { box-shadow:var(--shadow-md); }
.rev-card-top { padding:14px 18px 12px; display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.rev-card-top.attente { background:var(--warn-pale); border-bottom:1px solid rgba(217,119,6,.2); }
.rev-card-top.validee { background:var(--success-pale); border-bottom:1px solid rgba(22,163,74,.15); }
.rev-card-top.rejetee { background:var(--surface-alt); border-bottom:1px solid var(--border); }
.rev-tenant { font-size:15px; font-weight:700; color:var(--navy); margin-bottom:2px; }
.rev-addr { font-size:12px; color:var(--grey-txt); }
.badge-statut { padding:4px 12px; border-radius:20px; font-size:11.5px; font-weight:700; white-space:nowrap; }
.badge-attente { background:var(--warn-pale); color:var(--warn); border:1px solid rgba(217,119,6,.3); }
.badge-validee { background:var(--success-pale); color:var(--success); border:1px solid rgba(22,163,74,.2); }
.badge-rejetee { background:var(--surface-alt); color:var(--grey-mid); border:1px solid var(--border); }
.rev-body { padding:14px 18px 16px; }
.rev-grid-data { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.rev-data-label { font-size:10.5px; font-weight:700; color:var(--grey-txt); text-transform:uppercase; letter-spacing:.8px; margin-bottom:3px; }
.rev-data-val { font-size:14px; font-weight:700; color:var(--navy); }
.rev-data-val.nouveau { color:var(--success); font-size:16px; }
.rev-data-val.missing { color:var(--grey-mid); font-style:italic; font-weight:400; font-size:12px; }
.rev-data-val.diff { font-size:12px; color:var(--success); font-weight:600; }
.rev-anniv { display:flex; align-items:center; gap:8px; background:var(--navy-pale); border-radius:var(--radius-sm); padding:8px 12px; margin-bottom:14px; font-size:12.5px; color:var(--navy-soft); font-weight:600; flex-wrap:wrap; }
.rev-anniv .urgent { color:var(--red); }
.rev-actions { display:flex; gap:8px; flex-wrap:wrap; }
.rev-actions form { flex:1; min-width:120px; }

/* ════════════════════ HISTORIQUE (dashboard) ════════════════════ */
.section-header { display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.section-title { font-size:17px; font-weight:700; color:var(--navy); letter-spacing:-.3px; }
.section-count { background:var(--navy-pale); color:var(--navy-soft); padding:2px 11px; border-radius:20px; font-size:12px; font-weight:700; border:1px solid rgba(38,54,95,.12); }
.history-wrap { background:var(--grey-card); border:1px solid var(--grey-border); border-radius:var(--radius-2xl); overflow:hidden; box-shadow:var(--shadow-sm); }
.history-table thead { background:var(--navy-pale); border-bottom:2px solid var(--grey-border); }
.history-table th { text-align:left; padding:11px 16px; font-family:var(--font-display); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:var(--navy-soft); white-space:nowrap; }
.history-table td { padding:13px 16px; font-size:13px; border-bottom:1px solid var(--grey-border); vertical-align:middle; }
.history-table tr:last-child td { border-bottom:none; }
.history-table tbody tr:hover td { background:var(--grey-bg); }
/* Colonnes de montants alignées à droite — convention standard pour les
   données financières, facilite la comparaison visuelle des chiffres
   d'une ligne à l'autre. */
table th.num, table td.num { text-align:right; }
.h-name { font-weight:700; color:var(--navy); font-size:13px; white-space:nowrap; }
.h-addr { font-size:11.5px; color:var(--grey-txt); margin-top:2px; }
.h-period { display:inline-block; background:var(--ocre-pale); color:var(--sienna); padding:4px 11px; border-radius:var(--radius-sm); font-size:12px; font-weight:700; border:1px solid rgba(212,145,58,.2); white-space:nowrap; }
.h-amount { font-weight:700; font-size:14px; color:var(--navy); white-space:nowrap; }
.h-datetime { line-height:1.6; white-space:nowrap; }
.h-date { font-size:12.5px; font-weight:700; color:var(--navy); }
.h-time { font-size:12px; font-weight:600; color:var(--ocre); }
.h-time-missing { font-size:11px; color:var(--grey-mid); font-style:italic; }
.badge { display:inline-flex; align-items:center; gap:5px; padding:4px 11px; border-radius:20px; font-size:12px; font-weight:700; white-space:nowrap; }
.badge-sent { background:var(--success-pale); color:var(--success); }
.badge-local { background:var(--grey-bg); color:var(--grey-txt); border:1px solid var(--grey-border); }
.action-btns { display:flex; gap:6px; }

/* ════════════════════ PERIOD BAR (dashboard) ════════════════════ */
.period-bar { background:var(--grey-card); border:1px solid var(--grey-border); border-radius:var(--radius-md); padding:14px 20px; display:flex; align-items:center; gap:12px; margin-bottom:28px; flex-wrap:wrap; box-shadow:var(--shadow-sm); }
.period-label { font-family:var(--font-display); font-size:11px; font-weight:700; color:var(--grey-txt); text-transform:uppercase; letter-spacing:1px; white-space:nowrap; }
.period-bar select, .period-bar input[type="date"] {
  border:1.5px solid var(--grey-border); border-radius:var(--radius-sm); padding:7px 12px;
  font-size:13.5px; font-family:var(--font-body); font-weight:600; background:var(--grey-bg); color:var(--navy);
  cursor:pointer; transition:border-color .15s, box-shadow .15s; outline:none;
}
.period-bar select:focus, .period-bar input[type="date"]:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(240,99,31,.15); }
.period-sep { width:1px; height:24px; background:var(--grey-border); margin:0 4px; }

/* ════════════════════ BATCH MODAL (dashboard) ════════════════════ */
.batch-section { margin-bottom:18px; }
.batch-section-title { font-family:var(--font-display); font-size:11px; font-weight:700; color:var(--grey-txt); text-transform:uppercase; letter-spacing:.8px; margin-bottom:10px; }
.months-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.month-chip { display:flex; align-items:center; justify-content:center; padding:7px 4px; border-radius:var(--radius-sm); cursor:pointer; border:1.5px solid var(--grey-border); font-size:12px; font-weight:700; color:var(--grey-txt); background:var(--grey-bg); transition:all .15s; user-select:none; }
.month-chip.checked { background:var(--navy-pale); color:var(--navy); border-color:var(--blue-light); }
.month-chip input { display:none; }
.batch-toggle { display:flex; gap:6px; margin-bottom:10px; }
.toggle-btn { font-size:11px; font-weight:700; padding:4px 10px; border-radius:6px; border:1px solid var(--grey-border); background:var(--grey-bg); color:var(--grey-txt); cursor:pointer; }
.toggle-btn:hover { background:var(--grey-border); }
.date-mode-tabs { display:flex; gap:0; margin-bottom:12px; border:1.5px solid var(--grey-border); border-radius:var(--radius-sm); overflow:hidden; }
.date-tab { flex:1; padding:8px; text-align:center; font-size:12.5px; font-weight:700; color:var(--grey-txt); background:var(--grey-bg); cursor:pointer; border:none; transition:all .15s; }
.date-tab.active { background:var(--navy); color:#fff; }
.date-tab-content { display:none; }
.date-tab-content.active { display:block; }
.progress-bar-wrap { background:var(--grey-border); border-radius:6px; height:8px; margin:10px 0; overflow:hidden; }
.progress-bar-fill { height:100%; background:linear-gradient(90deg,var(--blue-light),var(--navy)); border-radius:6px; width:0%; transition:width .3s; }
.batch-log { max-height:140px; overflow-y:auto; font-size:12px; background:var(--grey-bg); border-radius:var(--radius-sm); padding:10px 12px; border:1px solid var(--grey-border); line-height:1.8; }
.log-ok   { color:var(--success); }
.log-err  { color:var(--red); }
.log-info { color:var(--grey-txt); }
.tenant-select { border:1.5px solid var(--grey-border); border-radius:var(--radius-sm); padding:8px 12px; font-size:13.5px; font-family:var(--font-body); font-weight:600; background:var(--grey-bg); color:var(--navy); width:100%; outline:none; }
.tenant-select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(240,99,31,.15); }
.day-input { border:1.5px solid var(--grey-border); border-radius:var(--radius-sm); padding:8px 12px; font-size:14px; font-family:var(--font-display); font-weight:700; background:var(--grey-bg); color:var(--navy); width:80px; outline:none; text-align:center; }
.day-input:focus { border-color:var(--blue-light); }

@media (max-width:420px) {
  .months-grid { grid-template-columns:repeat(3,1fr); }
}

/* ════════════════════ RÉVISIONS — cartes de synthèse ════════════════════ */
.stats-row { display:flex; gap:14px; margin-bottom:28px; flex-wrap:wrap; }
.stat-card { background:var(--grey-card); border:1px solid var(--grey-border); border-radius:var(--radius-2xl); padding:16px 20px; flex:1; min-width:160px; box-shadow:var(--shadow-sm); }
.stat-card .s-val { font-size:27px; font-weight:800; color:var(--navy); letter-spacing:-1px; }
.stat-card .s-label { font-size:12px; font-weight:600; color:var(--grey-txt); text-transform:uppercase; letter-spacing:.8px; margin-top:4px; }
.stat-card.warn .s-val { color:var(--warn); }
.stat-card.ok .s-val { color:var(--success); }

/* ════════════════════ STATS ════════════════════ */
.filter-bar { background:var(--grey-card); border:1px solid var(--grey-border); border-radius:var(--radius-md); padding:14px 20px; display:flex; align-items:center; gap:14px; margin-bottom:28px; flex-wrap:wrap; box-shadow:var(--shadow-sm); }
.filter-label { font-family:var(--font-display); font-size:11px; font-weight:700; color:var(--grey-txt); text-transform:uppercase; letter-spacing:1px; white-space:nowrap; }
.filter-bar select { border:1.5px solid var(--grey-border); border-radius:var(--radius-sm); padding:7px 12px; font-size:13.5px; font-family:var(--font-body); font-weight:600; background:var(--grey-bg); color:var(--navy); cursor:pointer; transition:border-color .15s; outline:none; }
.filter-bar select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(240,99,31,.15); }
.filter-sep { width:1px; height:24px; background:var(--grey-border); }

.kpi-row { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:16px; margin-bottom:32px; }
.kpi-card { background:var(--surface-alt); border:1px solid var(--border); border-radius:var(--radius-2xl); padding:20px 22px; position:relative; overflow:hidden; }
.kpi-icon { color:var(--grey-txt); margin-bottom:10px; }
.kpi-val { font-size:29px; font-weight:800; letter-spacing:-1px; color:var(--ink); line-height:1; margin-bottom:6px; }
.kpi-label { font-size:12px; font-weight:600; color:var(--grey-txt); text-transform:uppercase; letter-spacing:.8px; }
/* Une seule carte "hero" par page (voir brief) : l'élément le plus important
   prend le dégradé accent, texte blanc. Jamais plus d'une par page. */
.kpi-card.hero { background:var(--accent-grad); border:none; }
.kpi-card.hero .kpi-icon, .kpi-card.hero .kpi-val, .kpi-card.hero .kpi-label { color:#fff; }
.kpi-card.hero .kpi-label { color:rgba(255,255,255,.85); }

.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:24px; }
@media (max-width:800px) { .grid-2 { grid-template-columns:1fr; } }

.section-card { background:var(--grey-card); border:1px solid var(--grey-border); border-radius:var(--radius-2xl); overflow:hidden; box-shadow:var(--shadow-sm); }
.section-card.full { grid-column:1/-1; }
.sc-head { background:var(--navy-pale); padding:14px 20px; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--grey-border); }
.sc-head h2 { font-size:14px; font-weight:700; color:var(--navy); }
.sc-body { padding:20px; }

.chart-bars { display:flex; align-items:flex-end; gap:6px; height:180px; padding:0 4px; }
.bar-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0; }
.bar-outer { width:100%; background:var(--surface-alt); border-radius:8px 8px 0 0; position:relative; overflow:hidden; }
/* Le mois "meilleur" se distingue par un remplissage plus foncé (pas
   l'accent chaud : la carte KPI "hero" de cette page porte déjà l'unique
   accent, voir brief "un seul accent par page"). */
.bar-fill { position:absolute; bottom:0; left:0; right:0; background:var(--grey-mid); border-radius:8px 8px 0 0; transition:height .6s cubic-bezier(.4,0,.2,1); }
.bar-fill.active { background:var(--ink); }
.bar-val { font-size:10px; font-weight:700; color:var(--navy); white-space:nowrap; }
.bar-label { font-size:10px; font-weight:600; color:var(--grey-txt); white-space:nowrap; }
.bar-nb { font-size:9px; color:var(--grey-mid); }
.chart-legend { display:flex; gap:16px; margin-top:14px; justify-content:center; flex-wrap:wrap; }
.legend-item { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--grey-txt); font-weight:600; }
.legend-dot { width:10px; height:10px; border-radius:3px; }

.t-table th, .m-table th { text-align:left; padding:9px 14px; font-family:var(--font-display); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:var(--grey-txt); border-bottom:2px solid var(--grey-border); white-space:nowrap; }
.t-table td, .m-table td { padding:12px 14px; font-size:13px; border-bottom:1px solid var(--grey-border); vertical-align:middle; }
.t-table tr:last-child td, .m-table tr:last-child td { border-bottom:none; }
.t-table tr:hover td, .m-table tr:hover td { background:var(--grey-bg); }
.t-name { font-weight:700; color:var(--navy); white-space:nowrap; }
.t-total, .m-total { font-weight:700; font-size:15px; color:var(--navy); white-space:nowrap; }
.t-bar-wrap { width:120px; height:6px; background:var(--grey-bg); border-radius:4px; overflow:hidden; }
.t-bar-fill { height:100%; background:linear-gradient(90deg,var(--blue-light),var(--navy)); border-radius:4px; }
.taux-chip { display:inline-block; padding:3px 10px; border-radius:20px; font-size:11.5px; font-weight:700; white-space:nowrap; }
.taux-full  { background:var(--success-pale); color:var(--success); }
.taux-part  { background:var(--ocre-pale); color:var(--sienna); }
.taux-none  { background:var(--grey-bg); color:var(--grey-mid); border:1px solid var(--grey-border); }
.m-table .best td { background:var(--surface-alt); }
.m-name { font-weight:700; color:var(--navy); white-space:nowrap; }
.m-zero { color:var(--grey-mid); font-style:italic; }