/* Foncier — feuille de style maison (< 20 Ko), sans framework. Application famille et portail.
   Apparence (décisions THEME-1 et suivantes) : toutes les couleurs sont des variables de :root.
   Clair par défaut ; sombre si le système le demande et qu'aucun choix n'est fait, ou si
   <html data-theme="dark"> (cookie « theme », rendu par le serveur) ; data-theme="light" force le
   clair. Impression toujours en clair (le sombre n'est défini que pour l'écran).
   Variables réutilisables par d'autres styles (carte…) : --bg, --surface, --surface-2, --text,
   --muted, --border, --control-border, --accent, --accent-text, --accent-soft, --link, --focus,
   --shadow-pop, --backdrop (fenêtres « à traiter »),
   --ok, --ok-soft, --warn, --warn-soft, --bad, --bad-soft, --info-soft, --shadow,
   --tl-full, --tl-usufruct, --tl-bare, --tl-manager, --tl-text, --tl-stripe.
   Contrastes WCAG AA vérifiés dans les deux thèmes : texte ≥ 4,5:1 sur --bg, --surface, --surface-2
   et sur les fonds « -soft » associés ; bordures de champs, focus et barres de la frise ≥ 3:1. */
:root {
  color-scheme: light;
  --bg: #f6f7f9; --surface: #fff; --surface-2: #f0f2f5; --text: #1d2330; --muted: #5b6577;
  --border: #dde1e8; --control-border: #7d879a; --accent: #2457c5; --accent-text: #fff; --accent-soft: #e6edfb;
  --link: var(--accent); --focus: var(--accent);
  --ok: #1d7a46; --ok-soft: #e3f4ea; --warn: #9a5b00; --warn-soft: #fff3dc;
  --bad: #b42318; --bad-soft: #fde8e6; --info-soft: #e8f1fd;
  --tl-full: #2457c5; --tl-usufruct: #1d7a46; --tl-bare: #7a4fc5; --tl-manager: #9a5b00; --tl-text: #fff; --tl-stripe: rgb(255 255 255 / 28%);
  --radius: 8px; --shadow: 0 1px 2px rgb(16 24 40 / 6%), 0 1px 3px rgb(16 24 40 / 8%);
  --shadow-pop: 0 12px 32px rgb(16 24 40 / 14%), 0 2px 6px rgb(16 24 40 / 8%); --backdrop: rgb(16 24 40 / 40%);
  /* Avatars du menu du compte (USER-1) : texte blanc, contraste ≥ 4,5:1, identiques dans les deux thèmes. */
  --avatar-0: #2457c5; --avatar-1: #1d7a46; --avatar-2: #7a4fc5; --avatar-3: #9a5b00;
  --avatar-4: #b42318; --avatar-5: #0e7490; --avatar-6: #be185d; --avatar-7: #4b5563;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* Sombre : deux déclencheurs, mêmes valeurs (à garder identiques). */
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #12151b; --surface: #1a1f27; --surface-2: #222833; --text: #e6e9ef; --muted: #9aa3b2;
    --border: #2e3542; --control-border: #6b7486; --accent: #7aa2f7; --accent-text: #0d1117; --accent-soft: #1e2b45;
    --ok: #5cc98a; --ok-soft: #173325; --warn: #f0b54a; --warn-soft: #3a2c10;
    --bad: #f47067; --bad-soft: #3d1c1a; --info-soft: #1b2a40;
    --tl-full: #7aa2f7; --tl-usufruct: #5cc98a; --tl-bare: #b392f0; --tl-manager: #f0b54a; --tl-text: #0d1117; --tl-stripe: rgb(0 0 0 / 28%);
    --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 1px 3px rgb(0 0 0 / 30%);
    --shadow-pop: 0 12px 32px rgb(0 0 0 / 55%), 0 2px 6px rgb(0 0 0 / 40%); --backdrop: rgb(0 0 0 / 60%);
  }
}
@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #12151b; --surface: #1a1f27; --surface-2: #222833; --text: #e6e9ef; --muted: #9aa3b2;
    --border: #2e3542; --control-border: #6b7486; --accent: #7aa2f7; --accent-text: #0d1117; --accent-soft: #1e2b45;
    --ok: #5cc98a; --ok-soft: #173325; --warn: #f0b54a; --warn-soft: #3a2c10;
    --bad: #f47067; --bad-soft: #3d1c1a; --info-soft: #1b2a40;
    --tl-full: #7aa2f7; --tl-usufruct: #5cc98a; --tl-bare: #b392f0; --tl-manager: #f0b54a; --tl-text: #0d1117; --tl-stripe: rgb(0 0 0 / 28%);
    --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 1px 3px rgb(0 0 0 / 30%);
    --shadow-pop: 0 12px 32px rgb(0 0 0 / 55%), 0 2px 6px rgb(0 0 0 / 40%); --backdrop: rgb(0 0 0 / 60%);
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 15px/1.5 var(--font); background: var(--bg); color: var(--text); }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.5rem; margin: 0 0 1rem; }
h2 { font-size: 1.15rem; margin: 1.5rem 0 .75rem; }
h3 { font-size: 1rem; margin: 1rem 0 .5rem; }
p { margin: 0 0 .75rem; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.num, td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Mise en page : menu latéral + contenu ; le menu passe en haut sous 800 px */
.layout { display: grid; grid-template-columns: 230px 1fr; min-height: 100vh; }
.sidebar { background: var(--surface); border-right: 1px solid var(--border); padding: 1rem .75rem; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.brand { font-weight: 700; font-size: 1.15rem; padding: .25rem .5rem 1rem; display: flex; align-items: center; gap: .5rem; color: var(--text); }
.brand svg { width: 24px; height: 24px; color: var(--accent); }
.nav { list-style: none; margin: 0; padding: 0; }
.nav a { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border-radius: 6px; color: var(--text); }
.nav a:hover { background: var(--surface-2); text-decoration: none; }
.nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.nav svg { width: 18px; height: 18px; flex: none; }
.nav .sep { border-top: 1px solid var(--border); margin: .75rem 0; }
/* Contenu centré dans l'espace à droite du menu, largeur maximale lisible sur grand écran (1920-2560 px). */
.main { padding: 1.5rem 2rem 3rem; max-width: 1280px; width: 100%; margin-inline: auto; justify-self: center; }
.sidebar .menu-toggle { display: none; }
@media (max-width: 800px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--border); padding: .5rem 1rem; }
  .brand { padding: .25rem 0; }
  .sidebar { position: relative; }
  .sidebar .menu-toggle { display: inline-flex; position: absolute; right: 4.25rem; top: .6rem; }
  .sidebar .nav { display: none; }
  .sidebar.open .nav { display: block; }
  .main { padding: 1rem; }
  /* L'avatar reste dans la barre du haut, à droite du bouton Menu. */
  .layout { position: relative; }
  .topbar { position: absolute; top: .35rem; right: 1rem; margin: 0; z-index: 30; }
}

/* Composants */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; box-shadow: var(--shadow); margin-bottom: 1rem; }
.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.stat { display: flex; flex-direction: column; gap: .15rem; }
.stat .label { color: var(--muted); font-size: .85rem; }
.stat .value { font-size: 1.5rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.page-head h1 { margin: 0; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; }
/* Dans un tableau, la cellule d'actions reste une cellule (sinon les bordures des lignes se
   décalent) ; ses boutons sont alignés sur une ligne, sans retour. */
td.actions { display: table-cell; white-space: nowrap; text-align: right; }
td.actions > * { display: inline-block; vertical-align: middle; margin: .15rem 0 .15rem .4rem; }
td.actions > details[open] { display: block; white-space: normal; text-align: left; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .5rem .9rem; border-radius: 6px; border: 1px solid var(--control-border); background: var(--surface); color: var(--text); font: inherit; font-weight: 550; cursor: pointer; text-decoration: none; min-height: 38px; }
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.btn-primary:hover { background: var(--accent); filter: brightness(1.08); }
.btn-danger { color: var(--bad); border-color: var(--bad); }
.btn-small { padding: .25rem .6rem; min-height: 30px; font-size: .85rem; }
.btn-link { border: 0; background: none; color: var(--link); padding: 0; min-height: 0; font-weight: 500; }
.btn svg { width: 16px; height: 16px; }

/* Formulaires : erreurs champ par champ */
form.stack { display: grid; gap: 1rem; max-width: 560px; }
/* Champs homogènes (FORM-1) : hauteur unique des contrôles, libellé sur une ligne, aide et erreur
   sous le champ. Le bloc ne s'étire jamais (align-content: start) : dans une rangée, les contrôles
   restent alignés même si un voisin a un texte d'aide ou une erreur. */
:root { --control-h: 2.5rem; }
.field { display: grid; gap: .35rem; align-content: start; min-width: 0; }
.field > label { font-weight: 550; font-size: .875rem; line-height: 1.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.field .hint { color: var(--muted); font-size: .78rem; line-height: 1.15rem; }
.field .error { color: var(--bad); font-size: .8rem; line-height: 1.15rem; }
/* Rangées : autant de colonnes que de champs (2 ou 3), 4 champs en 2 × 2 ; jamais un champ seul en
   fin de ligne. Une seule colonne sur mobile. row-2 / row-3 forcent le nombre de colonnes. */
.row { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.row:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.row:has(> :nth-child(3):last-child), .row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .row, .row-2, .row-3, .row:has(> :nth-child(3):last-child) { grid-template-columns: minmax(0, 1fr); } }
fieldset.stack { display: grid; gap: 1rem; }
fieldset.stack > .hint { margin: 0; }
/* Sections pliables des formulaires (FORM-3) : <details class="form-section">, sans JS. En-tête
   cliquable sur toute la largeur, hauteur fixe, chevron qui tourne ; résumé à droite. */
.form-section { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); min-width: 0; }
.form-section > summary { list-style: none; display: flex; align-items: center; gap: .6rem; min-height: var(--control-h);
  padding: .35rem .75rem; cursor: pointer; border-radius: var(--radius); font-weight: 600; }
.form-section > summary::-webkit-details-marker { display: none; }
.form-section > summary::before { content: ""; flex: none; width: .45rem; height: .45rem; border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform .15s ease; }
.form-section[open] > summary::before { transform: rotate(45deg); }
.form-section > summary:hover { background: var(--surface-2); }
.form-section > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.form-section[open] > summary { border-bottom: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0; }
.fs-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-summary { flex: 0 1 auto; color: var(--muted); font-weight: 400; font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.form-section > .fs-body { padding: .75rem; display: grid; gap: .75rem; }
.fs-fields { display: grid; gap: 1rem; min-width: 0; }
.fs-aside { margin: 0; color: var(--muted); font-size: .85rem; line-height: 1.35rem; }
/* Formulaires longs (FORM-4) : pleine largeur utile (1100 px au plus) au lieu de 560 px ; sur grand
   écran, chaque section a sa colonne d'explication à gauche (280 px) et ses champs à droite, en
   rangées de 2 ou 3 (FORM-2). Une colonne en dessous de 1024 px. */
form.form-wide { display: grid; gap: 1rem; max-width: 1100px; }
form.form-wide > .actions { margin-top: .25rem; }
@media (min-width: 1024px) {
  form.form-wide .form-section > .fs-body { grid-template-columns: 280px minmax(0, 1fr); gap: 2rem; padding: 1.25rem 1.25rem 1.25rem 1.5rem; }
  form.form-wide .form-section > .fs-body > .fs-fields:only-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) { .fs-summary { max-width: 45%; } }
@media (prefers-reduced-motion: reduce) { .form-section > summary::before { transition: none; } }
/* Champs sans objet masqués par app.js (data-show-if) ; visibles sans JS. */
[hidden] { display: none !important; }
input, select, textarea { font: inherit; font-size: .95rem; color: var(--text); background: var(--surface); border: 1px solid var(--control-border); border-radius: 6px; padding: 0 .7rem; width: 100%; }
input, select { height: var(--control-h); line-height: calc(var(--control-h) - 2px); }
textarea { padding: .55rem .7rem; min-height: 5.5rem; line-height: 1.4; resize: vertical; }
input[type="file"] { padding: 0; line-height: normal; height: auto; min-height: var(--control-h); }
input[type="file"]::file-selector-button { height: calc(var(--control-h) - 2px); margin-right: .7rem; border: 0; border-right: 1px solid var(--control-border); background: var(--surface-2); color: var(--text); font: inherit; padding: 0 .9rem; cursor: pointer; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--focus); outline-offset: -1px; border-color: var(--focus); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
::placeholder { color: var(--muted); opacity: 1; }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--bad); }
input[type="checkbox"], input[type="radio"] { width: auto; height: auto; min-height: 0; line-height: normal; }
.code-input { font-size: 1.5rem; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }

/* Tableaux : défilement horizontal sur mobile */
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; }
th, td { padding: .55rem .75rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); background: var(--surface-2); white-space: nowrap; }
th a { color: inherit; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--surface-2); }
tfoot td { font-weight: 650; background: var(--surface-2); }
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
.filters input, .filters select { width: auto; min-width: 180px; }

/* Pastilles de statut (à jour, impayé, terminé…) */
.badge { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .78rem; font-weight: 600; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.badge-ok { background: var(--ok-soft); color: var(--ok); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-bad { background: var(--bad-soft); color: var(--bad); }
.badge-info { background: var(--accent-soft); color: var(--accent); }

/* Termes expliqués (droits) : infobulle sans JavaScript, au survol, au focus clavier ou au toucher.
   Pas de position: relative sur .term : l'infobulle (absolue, à sa position statique, sous le terme)
   n'est donc pas rognée par le défilement horizontal des tableaux (.table-wrap). */
.term { border-bottom: 1px dotted currentColor; cursor: help; }
.term:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
.term-tip { display: none; position: absolute; z-index: 50; margin-top: .3rem; width: max-content; max-width: min(22rem, calc(100vw - 2rem));
  padding: .5rem .7rem; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text);
  box-shadow: var(--shadow); font-size: .85rem; font-weight: 400; line-height: 1.4; white-space: normal; text-align: left; cursor: auto; }
.term-tip a { display: inline-block; margin-top: .25rem; }
.term:hover .term-tip, .term:focus .term-tip, .term:focus-within .term-tip { display: block; }
/* Petit écran : l'infobulle s'ouvre dans le flux (sous le terme), sans déborder de la page. */
@media (max-width: 600px) { .term-tip { position: static; width: auto; max-width: 16rem; } }

/* Alertes */
.alert { border-radius: var(--radius); padding: .75rem 1rem; margin-bottom: 1rem; border: 1px solid transparent; }
.alert-ok { background: var(--ok-soft); color: var(--ok); }
.alert-warn { background: var(--warn-soft); color: var(--warn); }
.alert-bad { background: var(--bad-soft); color: var(--bad); }
.alert-info { background: var(--info-soft); }

/* Barre supérieure et menu du compte (USER-1, USER-2) : <details> sans JS ; app.js ajoute
   aria-expanded, Échap, clic dehors et flèches. */
.topbar { display: flex; justify-content: flex-end; align-items: center; min-height: 2.5rem; margin: -.75rem 0 .75rem; }
.usermenu { position: relative; }
.usermenu > summary { list-style: none; }
.usermenu > summary::-webkit-details-marker { display: none; }
.usermenu-button { display: inline-flex; align-items: center; gap: .5rem; padding: .2rem .5rem .2rem .2rem; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer; color: var(--text); min-height: 38px; user-select: none; }
.usermenu-button:hover, .usermenu[open] > .usermenu-button { background: var(--surface-2); border-color: var(--border); }
.usermenu-button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.usermenu-name { font-weight: 550; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usermenu-chevron { width: 16px; height: 16px; color: var(--muted); transition: transform .15s ease; }
.usermenu[open] .usermenu-chevron { transform: rotate(180deg); }
@media (max-width: 767px) { .usermenu-name, .usermenu-chevron { display: none; } .usermenu-button { padding: .2rem; } }
.avatar { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #fff; font-size: .8rem;
  font-weight: 700; letter-spacing: .02em; flex: none; background: var(--avatar-0); }
.avatar-lg { width: 40px; height: 40px; font-size: .95rem; }
.avatar-1 { background: var(--avatar-1); } .avatar-2 { background: var(--avatar-2); } .avatar-3 { background: var(--avatar-3); }
.avatar-4 { background: var(--avatar-4); } .avatar-5 { background: var(--avatar-5); } .avatar-6 { background: var(--avatar-6); }
.avatar-7 { background: var(--avatar-7); }
.usermenu-panel { position: absolute; right: 0; top: calc(100% + .35rem); z-index: 60; width: 19rem; max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 5rem); overflow-y: auto; padding: .35rem; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-pop); }
.usermenu-head { display: flex; gap: .65rem; align-items: center; padding: .5rem .5rem .65rem; border-bottom: 1px solid var(--border); margin-bottom: .35rem; }
.usermenu-id { display: grid; gap: .1rem; min-width: 0; }
.usermenu-id > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usermenu-id .badge { justify-self: start; }
.usermenu-item { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .45rem .55rem; border: 0; border-radius: 6px;
  background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; text-decoration: none; }
.usermenu-item:hover, .usermenu-item:focus-visible { background: var(--surface-2); text-decoration: none; }
.usermenu-item:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.usermenu-item[aria-current="page"] { color: var(--accent); font-weight: 600; }
.usermenu-item svg { width: 18px; height: 18px; flex: none; color: var(--muted); }
.usermenu-sep { border-top: 1px solid var(--border); margin: .35rem 0; }
.usermenu-label { display: block; padding: .3rem .55rem .15rem; font-size: .75rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.usermenu-theme { padding: .15rem 0 .35rem; }
.usermenu-theme .seg { padding: .15rem .55rem 0; }
.usermenu-theme .seg { flex-wrap: nowrap; }
.usermenu-theme .btn { padding: .2rem .45rem; gap: .3rem; font-size: .8rem; }
.usermenu-theme .btn[aria-checked="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 650; }
@media (prefers-reduced-motion: reduce) { .usermenu-chevron { transition: none; } }
form.inline { display: inline; }

/* Onglets (fiche bien, Mon compte) */
.tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--border); margin-bottom: 1rem; overflow-x: auto; }
.tabs a { padding: .55rem .9rem; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs a:hover { color: var(--text); text-decoration: none; }
.tabs a[aria-selected="true"], .tabs a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
/* Pastille discrète d'un onglet (fiche bail : impayés, documents à compléter ; LEASE-TABS-4). */
.tabs .tab-badge { margin-left: .35rem; font-size: .72rem; font-weight: 500; vertical-align: 1px; }
.lease-balance { margin-top: 0; }

/* Écrans de connexion */
.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.auth-card { width: 100%; max-width: 400px; }
.auth-card .brand { justify-content: center; font-size: 1.4rem; }
.codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; font-family: ui-monospace, Consolas, monospace; font-size: 1.05rem; background: var(--surface-2); padding: 1rem; border-radius: 6px; }
.qr { display: block; color-scheme: light; margin: .5rem auto; background: #fff; padding: 8px; border-radius: 6px; width: 200px; height: 200px; }

/* Frise des droits */
.timeline { position: relative; padding: .5rem 0; }
.tl-row { display: grid; grid-template-columns: 160px 1fr; align-items: center; gap: .75rem; margin: .35rem 0; }
.tl-track { position: relative; height: 22px; background: var(--surface-2); border-radius: 4px; }
.tl-bar { position: absolute; top: 0; bottom: 0; border-radius: 4px; font-size: .72rem; color: var(--tl-text); padding: 0 .4rem; display: flex; align-items: center; overflow: hidden; white-space: nowrap; }
.tl-full { background: var(--tl-full); } .tl-usufruct { background: var(--tl-usufruct); } .tl-bare { background: var(--tl-bare); } .tl-manager { background: var(--tl-manager); }
/* En attente : rayures et contour pointillé, sans opacité (le texte de la barre garde son contraste). */
.tl-pending { background-image: repeating-linear-gradient(45deg, transparent 0 6px, var(--tl-stripe) 6px 12px); outline: 2px dashed var(--text); outline-offset: -2px; }

dl.props { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; }
dl.props dt { color: var(--muted); }
dl.props dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.empty { text-align: center; color: var(--muted); padding: 2rem 1rem; }
.htmx-request .spinner { display: inline-block; }
.spinner { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mt { margin-top: 1rem; }
.mt0 { margin-top: 0; }
/* Frise : graduations et ligne du jour */
.tl-holder { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-axis .tl-track { background: none; height: 18px; }
.tl-tick { position: absolute; top: 0; font-size: .72rem; color: var(--muted); transform: translateX(-50%); white-space: nowrap; }
.tl-today { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--bad); }
.tl-unknown { background-image: repeating-linear-gradient(-45deg, transparent 0 5px, var(--tl-stripe) 5px 10px); }
.tl-legend { display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: center; margin-top: .75rem; }
.tl-key { display: inline-block; width: 14px; height: 10px; border-radius: 2px; vertical-align: middle; margin-right: .25rem; }
@media (max-width: 600px) { .tl-row { grid-template-columns: 90px 1fr; } .tl-tick:nth-child(even) { display: none; } }
th[data-sort] { cursor: pointer; user-select: none; }
th[aria-sort="ascending"]::after { content: " ▲"; }
th[aria-sort="descending"]::after { content: " ▼"; }
details > summary.btn { list-style: none; }
details > summary.btn::-webkit-details-marker { display: none; }
/* Un tableau large ne doit pas élargir la grille : il défile dans son cadre (360 px). */
.layout > * { min-width: 0; }
.card { overflow-x: auto; }
.page-head > div { min-width: 0; overflow-wrap: anywhere; }
.drop-target { display: grid; gap: .25rem; place-items: center; text-align: center; padding: 1.5rem 1rem; margin: .75rem 0; border: 2px dashed var(--border); border-radius: var(--radius); cursor: pointer; }
.dropzone.dragging .drop-target { border-color: var(--accent); background: var(--accent-soft); }
/* Documents : boutons-icônes « Voir » et « Télécharger », pagination de la liste du bien */
.btn-icon { padding: .25rem; min-width: 30px; }
.doc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .25rem; }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem; margin: .75rem 0; }
.row-inline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin: .35rem 0; }
.help-video video { display: block; width: 100%; max-width: 960px; height: auto; aspect-ratio: 16 / 9; border-radius: var(--radius); background: #000; margin: 0 auto .5rem; }
.help-video { text-align: center; } /* vidéo, titre et légende centrés dans leur section */
.help-toc { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.card ul { margin: .25rem 0 0; padding-left: 1.2rem; }
.card li { margin: .2rem 0; }
/* Documents attendus : données du bien, check-list (pastille de statut) */
fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: .75rem; margin: 0; min-width: 0; }
legend { font-weight: 600; padding: 0 .3rem; }
.checklist td:first-child { min-width: 12rem; }

/* Apparence : choix à trois boutons (menu du compte, Préférences, portail) */
.seg { display: inline-flex; flex-wrap: wrap; gap: .3rem; }
.seg .btn[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 650; }
.theme-choice { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.portal-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }

/* Impression : toujours en clair (variables du thème clair, le sombre n'existe que pour l'écran),
   sans menu ni boutons d'apparence. */
@media print {
  body { background: #fff; }
  .layout { display: block; }
  .sidebar, .topbar, .theme-choice, .menu-toggle, .portal-top form { display: none; }
  .main, .portal-main { padding: 0; max-width: none; }
  .card, .table-wrap { box-shadow: none; break-inside: avoid; }
  .tl-bar, .tl-key, .badge { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* Portail locataire : une colonne étroite, lisible à 360 px */
.portal-top { background: var(--surface); border-bottom: 1px solid var(--border); }
.portal-top .inner, .portal-main { max-width: 860px; margin: 0 auto; padding: .6rem 1rem; }
.portal-top .inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.portal-top .brand { padding: 0; }
.portal-main { padding: 1rem 1rem 3rem; }
.acting-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
/* Rappel discret « activez la double authentification » (AUTH-EMAIL-4), refermable. */
.nudge { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .45rem .9rem; font-size: .875rem; }
.nudge form { margin: 0; }
.nudge-close { font-size: 1.25rem; line-height: 1; color: var(--muted); padding: .1rem .35rem; }
.nudge-close:hover { color: var(--text); }
.portal-address { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; overflow-wrap: anywhere; }
/* Tableau de bord épuré et points « à traiter » (DASH-) */
.nav-count { margin-left: auto; min-width: 1.35rem; padding: 0 .4rem; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: .72rem; font-weight: 650; line-height: 1.3rem; text-align: center; font-variant-numeric: tabular-nums; }
.nav a[aria-current="page"] .nav-count { background: var(--accent); color: var(--accent-text); }
/* Indicateurs : une bande, séparateurs fins (ombres rognées par le cadre), retour à la ligne sans case vide. */
.kpis { display: flex; flex-wrap: wrap; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); margin: 0 0 1.75rem; }
.kpi { flex: 1 1 10rem; display: flex; flex-direction: column; gap: .1rem; min-width: 0; padding: .8rem 1.1rem .85rem; color: var(--text); box-shadow: -1px 0 0 var(--border), 0 -1px 0 var(--border); }
a.kpi:hover { background: var(--surface-2); text-decoration: none; }
.kpi-label { font-size: .8rem; font-weight: 550; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-value { font-size: 1.4rem; font-weight: 650; line-height: 1.25; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.kpi-value.is-bad { color: var(--bad); }
.kpi-value.is-ok { color: var(--ok); }
.kpi-sub { font-size: .78rem; color: var(--muted); }
.kpi progress { appearance: none; -webkit-appearance: none; width: 100%; height: 4px; margin-top: .4rem; border: 0; border-radius: 2px; overflow: hidden; background: var(--surface-2); }
.kpi progress::-webkit-progress-bar { background: var(--surface-2); }
.kpi progress::-webkit-progress-value { background: var(--ok); border-radius: 2px; }
.kpi progress::-moz-progress-bar { background: var(--ok); border-radius: 2px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin: 0 0 .6rem; }
.section-head h2 { margin: 0; font-size: 1.05rem; }
.todo-link { display: inline-flex; align-items: center; gap: .4rem; font-size: .875rem; font-weight: 550; color: var(--muted); }
.todo-link svg { width: 15px; height: 15px; color: var(--warn); }
.todo-link:hover { color: var(--text); }
p.version { margin-top: 1.5rem; }
/* Bail en cours : pastille puis locataires (tronqués), tableau des biens et en-tête de la fiche */
.lease-cell { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; min-width: 0; }
.lease-tenants { display: inline-block; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; font-size: .875rem; }
.lease-line { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; margin: -.25rem 0 0; color: var(--muted); }
.lease-line .lease-tenants { max-width: min(24rem, 100%); }
@media (max-width: 600px) { .lease-tenants { max-width: 11rem; } }
/* Pastille d'un bien et fenêtre ancrée (absolue sans ancêtre positionné : pas rognée par .table-wrap). */
th.todo-col, td.todo-col { width: 1%; white-space: nowrap; }
.alert-pop { display: inline-block; }
.alert-pop > summary { list-style: none; }
.alert-pop > summary::-webkit-details-marker { display: none; }
.alert-chip { display: inline-flex; align-items: center; gap: .3rem; min-height: 26px; padding: 0 .55rem 0 .45rem; border: 1px solid transparent; border-radius: 999px; font-size: .8rem; font-weight: 650; font-variant-numeric: tabular-nums; cursor: pointer; user-select: none; }
.alert-chip svg { width: 14px; height: 14px; flex: none; }
.alert-chip-bad { background: var(--bad-soft); color: var(--bad); }
.alert-chip-warn { background: var(--warn-soft); color: var(--warn); }
.alert-chip-info { background: var(--accent-soft); color: var(--accent); }
.alert-chip:hover, .alert-pop[open] > .alert-chip { border-color: currentColor; }
.alert-pop-panel { position: absolute; z-index: 60; margin-top: .35rem; width: 23rem; max-width: calc(100vw - 2rem); background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-pop); font-size: .875rem; font-weight: 400; line-height: 1.45; text-align: left; white-space: normal; }
.alert-pop-panel:focus { outline: none; }
.alert-pop-head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; padding: .7rem 1rem .6rem; border-bottom: 1px solid var(--border); }
.alert-pop-head strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alert-pop-head .small { flex: none; }
.alert-pop-foot { padding: .55rem 1rem; border-top: 1px solid var(--border); font-size: .85rem; font-weight: 550; }
/* Liste d'alertes (fenêtre, page « À traiter », bandeau de la fiche) */
.todo-list { list-style: none; margin: 0; padding: .2rem 0; }
.card .todo-list { margin: 0; padding: .2rem 0; }
.todo { display: grid; grid-template-columns: .5rem minmax(0, 1fr) auto; align-items: baseline; gap: .7rem; margin: 0; padding: .55rem 1rem; }
.card li.todo { margin: 0; }
.todo + .todo { border-top: 1px solid var(--border); }
.todo-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--muted); align-self: start; margin-top: .45rem; }
.todo-bad .todo-dot { background: var(--bad); }
.todo-warn .todo-dot { background: var(--warn); }
.todo-info .todo-dot { background: var(--accent); }
.todo-body { overflow-wrap: anywhere; }
.todo-cat { display: block; font-size: .7rem; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); line-height: 1.3; margin-bottom: .1rem; }
.todo-action { font-size: .85rem; font-weight: 600; white-space: nowrap; }
/* Fiche d'un bien : bandeau repliable */
.todo-banner { margin: 0 0 1rem; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--muted); border-radius: var(--radius); }
.todo-banner-bad { border-left-color: var(--bad); }
.todo-banner-warn { border-left-color: var(--warn); }
.todo-banner-info { border-left-color: var(--accent); }
.todo-banner > summary { display: flex; align-items: center; gap: .5rem; min-height: 40px; padding: .4rem 1rem; list-style: none; cursor: pointer; font-size: .9rem; font-weight: 600; }
.todo-banner > summary::-webkit-details-marker { display: none; }
.todo-banner > summary svg { width: 16px; height: 16px; flex: none; color: var(--muted); }
.todo-banner-bad > summary svg { color: var(--bad); }
.todo-banner-warn > summary svg { color: var(--warn); }
.todo-banner-info > summary svg { color: var(--accent); }
.todo-banner > summary::after { content: "Afficher"; margin-left: auto; color: var(--link); font-size: .85rem; font-weight: 550; }
.todo-banner[open] > summary::after { content: "Masquer"; }
.todo-banner[open] > summary { border-bottom: 1px solid var(--border); }
/* Page « À traiter » : filtres par type, un bloc par bien */
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.25rem; }
.chip { display: inline-flex; align-items: center; gap: .45rem; min-height: 32px; padding: .2rem .8rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font-size: .85rem; font-weight: 550; }
.chip:hover { background: var(--surface-2); text-decoration: none; }
.chip[aria-current="page"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.chip-count { color: var(--muted); font-weight: 650; font-variant-numeric: tabular-nums; }
.chip[aria-current="page"] .chip-count { color: inherit; }
.todo-groups { display: grid; gap: 1rem; }
.todo-group { padding: 0; overflow: hidden; scroll-margin-top: 1rem; }
.todo-group-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: 0; padding: .7rem 1rem; font-size: 1rem; border-bottom: 1px solid var(--border); }
.todo-group:target { outline: 2px solid var(--accent); outline-offset: -1px; }
/* Petit écran : la fenêtre devient une feuille en bas d'écran, fond assombri. */
@media (max-width: 600px) {
  .alert-pop-panel { position: fixed; left: 0; right: 0; bottom: 0; width: auto; max-width: none; max-height: 75vh; margin: 0; overflow-y: auto; border: 0; border-radius: 14px 14px 0 0; box-shadow: 0 0 0 100vmax var(--backdrop), var(--shadow-pop); padding-bottom: env(safe-area-inset-bottom); font-size: .95rem; }
  .alert-pop-head { padding: 1rem 1rem .75rem; }
  .todo { padding: .7rem 1rem; }
  .todo-action { display: inline-flex; align-items: center; min-height: 44px; margin: -.6rem 0; }
  .alert-pop-foot { padding: .9rem 1rem; }
  .kpi { flex-basis: 8.5rem; padding: .7rem .9rem; }
  .kpi-value { font-size: 1.25rem; }
}

/* Carte des biens et suggestions d'adresse (GEO-) : couleurs par variables (thème clair/sombre). */
:root { --map-pin: var(--accent); --map-pin-ring: var(--surface); --map-bg: var(--surface-2); }
.combo-wrap { position: relative; }
.combo-list { position: absolute; z-index: 1000; left: 0; right: 0; top: 100%; margin: 2px 0 0; padding: .25rem 0; list-style: none; max-height: 16rem; overflow-y: auto; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.combo-list[hidden] { display: none; }
.combo-list [role="option"] { padding: .5rem .75rem; cursor: pointer; overflow-wrap: anywhere; min-height: 44px; display: flex; align-items: center; }
.combo-list [role="option"]:hover, .combo-list [role="option"][aria-selected="true"] { background: var(--accent-soft); color: var(--text); }
.geo-map { height: 60vh; min-height: 320px; max-height: 720px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--map-bg); margin-bottom: .5rem; }
.geo-map-mini { height: 240px; min-height: 0; }
.mini-map-box { margin: 0 0 1rem; }
.mini-map-box > summary { cursor: pointer; color: var(--accent); margin-bottom: .5rem; }
.map-pin { background: var(--map-pin); border: 3px solid var(--map-pin-ring); border-radius: 50%; box-shadow: 0 0 0 1px var(--map-pin), var(--shadow); }
.map-pin:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }
.map-popup { display: grid; gap: .2rem; }
.geo-map .leaflet-popup-content-wrapper, .geo-map .leaflet-popup-tip { background: var(--surface); color: var(--text); }
.geo-map .leaflet-popup-content a, .geo-map .leaflet-control-attribution a { color: var(--accent); }
.geo-map .leaflet-container, .geo-map.leaflet-container { font: inherit; }
.map-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.map-list li { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; padding: .4rem 0; border-bottom: 1px solid var(--border); }
.map-missing .btn { margin-left: auto; }
@media (max-width: 600px) { .geo-map { height: 55vh; min-height: 260px; } .map-missing .btn { margin-left: 0; } }

/* Carte : les noms de la liste sont cliquables (main) ; tableaux centrés (en-têtes et cellules). */
[data-map-focus] { cursor: pointer; }
th, td { text-align: center; vertical-align: middle; }
/* Invitations par email (INV-) */
.invite-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1rem; align-items: start; }
@media (max-width: 960px) { .invite-grid { grid-template-columns: 1fr; } }
.invite-preview iframe { display: block; width: 100%; height: 900px; border: 1px solid var(--border); border-radius: 8px; background: #eef2f8; }
.invite-page { background: radial-gradient(1200px 600px at 50% -10%, var(--accent-soft), transparent 70%), var(--bg); }
.auth-card.invite-card { max-width: 520px; padding: 2rem 2rem 1.5rem; border-top: 5px solid var(--accent); box-shadow: 0 18px 50px rgba(20, 40, 90, .14); }
.invite-kicker { margin: .75rem 0 .25rem; font-size: .78rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.invite-hello { margin: 0 0 .5rem; font-family: Georgia, "Times New Roman", serif; font-weight: normal; font-size: 2rem; line-height: 1.15; }
.invite-lead { font-size: 1.08rem; line-height: 1.55; margin: 0 0 1rem; }
.invite-quote { margin: 0 0 1rem; padding: .9rem 1.1rem; border-left: 4px solid var(--accent); background: var(--surface-2); border-radius: 0 10px 10px 0; }
.invite-quote p { margin: 0; font-family: Georgia, "Times New Roman", serif; font-style: italic; white-space: pre-line; }
.invite-quote footer { margin-top: .4rem; font-size: .88rem; color: var(--muted); }
.invite-steps { display: flex; gap: .5rem; padding: 0; margin: 1rem 0; list-style: none; counter-reset: step; font-size: .82rem; color: var(--muted); }
.invite-steps li { flex: 1; counter-increment: step; padding-top: .45rem; border-top: 3px solid var(--border); }
.invite-steps li::before { content: counter(step) ". "; font-weight: 650; }
.invite-steps li[aria-current="step"] { border-top-color: var(--accent); color: var(--text); font-weight: 600; }
.btn-large { min-height: 3rem; font-size: 1.05rem; width: 100%; justify-content: center; }
.invite-or { display: flex; align-items: center; gap: .75rem; color: var(--muted); font-size: .85rem; margin: 1rem 0 .5rem; }
.invite-or::before, .invite-or::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
@media (max-width: 480px) { .auth-card.invite-card { padding: 1.25rem 1rem 1rem; } .invite-hello { font-size: 1.6rem; } }

/* Acte relié à un document (onglet Droits). */
.icon-inline { vertical-align: -2px; margin-right: .25rem; }
/* Historique d'un bien (HIST-1) : fil d'activité groupé par jour */
.history-day { margin: .75rem 0; }
.history-date { font-size: 1rem; margin: 0 0 .5rem; }
.history-date::first-letter { text-transform: uppercase; }
.history-list { list-style: none; margin: 0; padding: 0; }
.history-event { display: grid; grid-template-columns: 3.2rem 1fr; gap: .5rem; padding: .4rem 0; border-top: 1px solid var(--border); }
.history-event:first-child { border-top: 0; }
.history-auto .history-body > span { color: var(--muted); }
.history-body { min-width: 0; overflow-wrap: anywhere; }
.history-details > summary { cursor: pointer; color: var(--link); }
.history-details dl { margin-top: .35rem; }
/* Journal d'audit de l'administration (HIST-3) */
.audit-filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; margin: .75rem 0; }
.audit-filters label { display: grid; gap: .2rem; font-size: .85rem; }
.audit-diff { width: 100%; font-size: .85rem; }
.audit-diff code { font-size: .8rem; color: var(--muted); }
.audit-diff td { vertical-align: top; overflow-wrap: anywhere; }

/* Titulaires des droits et recherche dans l'annuaire (TIT-). */
.holder-rows { display: grid; gap: 1rem; }
.holder-row { position: relative; display: grid; gap: .75rem; }
.holder-remove { position: absolute; top: .3rem; right: .75rem; }
.holder-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.holder-grid > .person-combo { grid-column: 1 / -1; }
.holder-grid-2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 560px) { .holder-grid, .holder-grid-2 { grid-template-columns: minmax(0, 1fr); } }
.holders-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: .75rem; }
.holders-actions .hint { margin: 0; }
.combo-note { font-size: .82rem; line-height: 1.2rem; padding: .35rem .6rem; border-radius: 6px; background: var(--accent-soft); color: var(--text); }
.combo-list .combo-main { flex: 1 1 auto; min-width: 0; }
.combo-list .combo-meta { flex: 0 0 auto; white-space: nowrap; margin-left: .75rem; color: var(--muted); font-size: .8rem; }
.combo-list .combo-create { border-top: 1px solid var(--border); font-weight: 550; color: var(--link); }
.combo-list .combo-exact .combo-main { font-weight: 650; }
.person-choices { display: grid; gap: .35rem; padding: .5rem .75rem; }
.person-choices .choice { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; min-height: 32px; font-weight: 400; }
.dup-banner ul { margin: .35rem 0 0; padding-left: 1.2rem; }

/* Messagerie (MSG-) : boîte de réception, conversation en bulles (« Vous » à droite), portail. */
.msg-layout { display: grid; grid-template-columns: minmax(250px, 320px) minmax(0, 1fr); gap: 1rem; align-items: start; }
.msg-layout-list { grid-template-columns: minmax(0, 860px); }
.msg-side { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; }
.msg-boxes { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: .6rem; }
.msg-boxes a { padding: .25rem .7rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: .85rem; }
.msg-boxes a:hover { text-decoration: none; color: var(--text); }
.msg-boxes a[aria-current="page"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.msg-search, .msg-new { display: flex; gap: .5rem; margin-bottom: .6rem; }
.msg-search input, .msg-new select { flex: 1; min-width: 0; }
.msg-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.msg-list.card { padding: 0; overflow: hidden; }
.msg-inbox > .msg-list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.msg-list li + li { border-top: 1px solid var(--border); }
.msg-row { display: flex; align-items: flex-start; gap: .7rem; padding: .7rem .9rem; color: var(--text); }
.msg-row:hover { background: var(--surface-2); text-decoration: none; }
.msg-row-active { background: var(--accent-soft); }
.msg-avatar { flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .85rem; background: var(--accent-soft); color: var(--accent); }
.msg-avatar-tenant { background: var(--ok-soft); color: var(--ok); }
.msg-row-active .msg-avatar { background: var(--surface); }
.msg-row-main { flex: 1; min-width: 0; display: grid; gap: .1rem; }
.msg-row-top { display: flex; gap: .5rem; align-items: baseline; }
.msg-row-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.msg-row-unread .msg-row-title { font-weight: 750; }
.msg-row-when { flex: none; font-size: .78rem; color: var(--muted); }
.msg-row-sub { font-size: .8rem; color: var(--muted); }
.msg-row-preview { font-size: .87rem; color: var(--muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.msg-row-unread .msg-row-preview { color: var(--text); }
.msg-row .msg-unread { margin-left: 0; align-self: center; background: var(--accent); color: var(--accent-text); }
.msg-conv { display: flex; flex-direction: column; padding: 0; height: calc(100vh - 3.5rem); min-height: 420px; margin: 0; }
.msg-head { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; border-bottom: 1px solid var(--border); }
.msg-head-text { flex: 1; min-width: 0; }
.msg-head-text p { margin: 0; }
.msg-title { font-size: 1.1rem; margin: 0; overflow-wrap: anywhere; }
.msg-back { display: none; font-size: 1.6rem; line-height: 1; padding: 0 .3rem; color: var(--text); }
.msg-thread { flex: 1; overflow-y: auto; padding: .75rem 1rem; display: flex; flex-direction: column; gap: .15rem; }
.msg-empty, .msg-older { text-align: center; margin: 1rem 0; }
.msg-day, .msg-new-marker { display: flex; align-items: center; gap: .75rem; margin: .9rem 0 .4rem; font-size: .78rem; color: var(--muted); }
.msg-day::before, .msg-day::after, .msg-new-marker::before, .msg-new-marker::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
.msg-new-marker { color: var(--bad); font-weight: 600; }
.msg-new-marker::before, .msg-new-marker::after { border-color: var(--bad); }
.msg { max-width: min(78%, 40rem); align-self: flex-start; display: flex; flex-direction: column; align-items: flex-start; margin: .2rem 0; }
.msg-mine { align-self: flex-end; align-items: flex-end; }
.msg-meta { font-size: .74rem; color: var(--muted); margin: 0 .5rem .1rem; }
.msg-meta .badge { font-size: .68rem; padding: 0 .4rem; }
.msg-bubble { padding: .5rem .8rem; border-radius: 16px 16px 16px 4px; background: var(--surface-2); color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
.msg-tenant .msg-bubble { background: var(--ok-soft); }
.msg-mine .msg-bubble { background: var(--accent); color: var(--accent-text); border-radius: 16px 16px 4px 16px; }
.msg-bubble.msg-deleted { background: transparent; border: 1px dashed var(--border); color: var(--muted); font-style: italic; }
.msg-file { display: inline-block; margin-top: .25rem; padding: .3rem .6rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font-size: .85rem; overflow-wrap: anywhere; }
.msg-del { margin: .1rem .5rem 0; }
.msg-compose { border-top: 1px solid var(--border); padding: .6rem .75rem .75rem; display: grid; gap: .4rem; }
.msg-compose textarea { width: 100%; min-height: 2.8rem; max-height: 40vh; resize: vertical; }
.msg-compose-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.msg-compose-bar .btn-primary { margin-left: auto; }
.msg-attach { display: flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--muted); }
.msg-attach input { max-width: 15rem; font-size: .8rem; }
.msg-hint { flex: 1 1 12rem; }
.msg-attach-box { flex: 1 1 100%; }
.msg-attach-box summary { cursor: pointer; color: var(--link); }
.msg-attach-fields { display: grid; gap: .4rem; margin-top: .4rem; }
.msg-attach-fields .msg-attach { display: grid; gap: .2rem; }
.msg-attach-fields select, .msg-attach-fields input:not([type=file]) { max-width: 26rem; }
.portal-upload { display: grid; gap: .6rem; max-width: 560px; }
.msg-readonly { border-top: 1px solid var(--border); margin: 0; padding: .75rem 1rem; }
.msg-former summary { cursor: pointer; }
.msg-former .msg-list { margin: .5rem -1.25rem -1rem; border-top: 1px solid var(--border); }
.msg-card .msg-row-preview { color: var(--text); }
@media (max-width: 800px) {
  .msg-layout { grid-template-columns: minmax(0, 1fr); }
  .msg-side { display: none; }
  .msg-back { display: block; }
  .msg-conv { height: calc(100vh - 7rem); min-height: 360px; }
  .msg { max-width: 88%; }
}
.portal-msg .msg-conv { height: auto; min-height: 0; }
.portal-msg .msg-thread { max-height: 65vh; }
/* Modèles de documents (TPL-) : éditeur à blocs, barre d'outils, liste des champs, aperçu PDF */
.tpl-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 1100px) { .tpl-grid { grid-template-columns: 1fr; } }
.tpl-preview { position: sticky; top: 1rem; }
.tpl-preview iframe { display: block; width: 100%; height: 80vh; min-height: 520px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.tpl-block { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: .75rem 1rem; display: grid; gap: .45rem; }
.tpl-block p { margin: 0; }
.tpl-block textarea { width: 100%; min-height: 7rem; font: inherit; resize: vertical; }
.tpl-block-title { font-weight: 650; display: flex; gap: .5rem; align-items: center; }
.tpl-fixed { background: var(--surface-2); border-style: dashed; color: var(--muted); }
.tpl-fixed .tpl-block-title { color: var(--muted); }
.tpl-toolbar { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; position: relative; }
.tpl-fields > summary { list-style: none; }
.tpl-fields > summary::-webkit-details-marker { display: none; }
.tpl-fields[open] > summary { background: var(--accent-soft); }
.tpl-fields-list { position: absolute; z-index: 20; left: 0; right: 0; max-height: 22rem; overflow-y: auto; margin-top: .3rem; padding: .5rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); display: flex; flex-wrap: wrap; gap: .3rem; }
.tpl-fields-group { flex-basis: 100%; margin: .35rem 0 0; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tpl-field { font: inherit; font-size: .85rem; padding: .2rem .55rem; border: 1px solid var(--control-border); border-radius: 999px; background: var(--surface); color: var(--text); cursor: pointer; }
.tpl-field:hover, .tpl-field:focus-visible { background: var(--accent-soft); }
.tpl-logo { max-height: 3.5rem; max-width: 10rem; border: 1px solid var(--border); border-radius: 6px; background: #fff; padding: .2rem; }
label.check { display: flex; gap: .5rem; align-items: center; font-weight: 400; }