/* Console d'Atrium — interface inspirée d'Airbnb : blanc, aéré, textes lisibles, boutons noirs.
   Référence : skill design-web (~/.claude/skills/design-web/).
   Conventions : champ modifiable = fond blanc + bordure ; lecture seule = gris + cadenas ;
   modification non enregistrée = surlignée en jaune + barre « Enregistrer » visible. */

/* Polices servies localement (static/vendor/fonts, aucune requête vers Google). */
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("/static/vendor/fonts/inter/Inter-Regular.3875f8357497.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("/static/vendor/fonts/inter/Inter-Medium.7b7f3cfa2944.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("/static/vendor/fonts/inter/Inter-SemiBold.b72fa2728a8e.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url("/static/vendor/fonts/inter/Inter-Bold.66894432e7ff.woff2") format("woff2"); }
@font-face { font-family: "Material Symbols Outlined"; font-style: normal; font-weight: 400; font-display: block; src: url("/static/vendor/fonts/material-symbols/Material-Symbols-Outlined.3d7864cf3b00.woff2") format("woff2"); }

.material-symbols-outlined {
  font-family: "Material Symbols Outlined"; font-weight: normal; font-style: normal; font-size: 1.25rem; line-height: 1;
  letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; direction: ltr;
  -webkit-font-smoothing: antialiased; user-select: none;
}

/* --- Couleurs (thème clair, puis sombre sous html.dark) --- */
:root {
  --ink: #222222;
  --muted: #6a6a6a;
  --line: #dddddd;
  --soft: #f7f7f7;
  --bg: #ffffff;
  --surface: #ffffff;
  --on-ink: #ffffff;
  --ink-hover: #000000;
  --input-line: #b0b0b0;
  --accent: var(--brand, #1d4ed8);
  --accent-soft: color-mix(in srgb, var(--accent) 10%, white);
  --danger: #c13515;
  --dirty: #fff4d6;
  --dirty-line: #d97706;
  --success-bg: #ecfdf3; --success: #067647;
  --warning-bg: #fef6e7; --warning: #b54708;
  --error-bg: #fef2f2;
  --past: repeating-linear-gradient(135deg, #fafafa, #fafafa 6px, #f2f2f2 6px, #f2f2f2 12px);
  --shadow: rgb(0 0 0 / .15);
  --radius: 12px;
}
html.dark {
  --ink: #ececec;
  --muted: #a1a1a1;
  --line: #3a3a3a;
  --soft: #2a2a2a;
  --bg: #161616;
  --surface: #1f1f1f;
  --on-ink: #161616;
  --ink-hover: #ffffff;
  --input-line: #555555;
  --accent: color-mix(in srgb, var(--brand, #1d4ed8) 70%, white);  /* plus clair : lisible sur fond sombre */
  --accent-soft: color-mix(in srgb, var(--brand, #1d4ed8) 25%, #1f1f1f);
  --danger: #f87171;
  --dirty: #3d2f0c;
  --dirty-line: #f5a524;
  --success-bg: #0f2e1f; --success: #6ee7a8;
  --warning-bg: #3a2a0c; --warning: #fbbf5d;
  --error-bg: #3b1515;
  --past: repeating-linear-gradient(135deg, #1b1b1b, #1b1b1b 6px, #222 6px, #222 12px);
  --shadow: rgb(0 0 0 / .5);
  color-scheme: dark;
}

/* --- Base --- */
*, *::before, *::after { box-sizing: border-box; }
body.console { margin: 0; font-family: "Inter", system-ui, sans-serif; font-size: 16px; line-height: 1.5; color: var(--ink); background: var(--bg); min-height: 100vh; -webkit-font-smoothing: antialiased; }
.console a { color: inherit; }
.console h1, .console h2, .console h3, .console p { margin: 0; }
.console h1 { font-size: 2rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.console h2 { font-size: 1.375rem; font-weight: 600; letter-spacing: -.01em; }
.console h3 { font-size: 1.125rem; font-weight: 600; }
.console button, .console input, .console select, .console textarea { font: inherit; color: inherit; }
.console [hidden] { display: none !important; }

/* --- En-tête --- */
.console-header { position: sticky; top: 0; z-index: 40; background: var(--surface); border-bottom: 1px solid var(--line); }
.console-header-inner { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; height: 72px; display: flex; align-items: center; gap: 2rem; }
.console-brand { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 1.15rem; color: var(--accent) !important; text-decoration: none; white-space: nowrap; min-width: 0; }
.console-brand .material-symbols-outlined { font-size: 1.6rem; }
.console-brand-name { overflow: hidden; text-overflow: ellipsis; }
.console-nav { display: flex; gap: .25rem; flex: 1; justify-content: center; }
.console-nav a, .console-menu-toggle > summary { display: flex; align-items: center; gap: .4rem; padding: .6rem 1rem; border-radius: 999px; font-weight: 500; color: var(--muted); text-decoration: none; cursor: pointer; list-style: none; white-space: nowrap; }
.console-nav a:hover, .console-menu-toggle > summary:hover { background: var(--soft); color: var(--ink); }
.console-nav a.is-active, .console-menu-toggle.is-active > summary { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--ink); border-radius: 0; }
.console-menu-toggle { position: relative; }
.console-menu-toggle > summary::-webkit-details-marker { display: none; }
.console-menu { position: absolute; right: 0; top: calc(100% + .5rem); min-width: 280px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 28px var(--shadow); padding: .5rem 0; z-index: 50; }
.console-menu a, .console-menu button { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .7rem 1.1rem; text-decoration: none; background: none; border: 0; color: var(--ink); cursor: pointer; text-align: left; }
.console-menu a:hover, .console-menu button:hover { background: var(--soft); }
.console-menu a.is-active { font-weight: 600; }
.console-menu hr { border: 0; border-top: 1px solid var(--line); margin: .4rem 0; }
.console-menu-label { display: block; padding: .4rem 1.1rem .2rem; font-size: .8rem; color: var(--muted); }
.console-menu-who { padding: .5rem 1.1rem .6rem; }
.console-menu-who strong { display: block; }
.console-menu-who span { font-size: .85rem; color: var(--muted); }
.console-choices { display: flex; gap: .35rem; padding: .3rem 1.1rem .6rem; }
.console-choices button { width: auto; flex: 1; justify-content: center; padding: .4rem .5rem; border: 1px solid var(--line); border-radius: 8px; font-size: .85rem; gap: .25rem; }
.console-choices button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.console-choices form { display: contents; }
.console-user > summary { padding: .25rem .25rem .25rem .75rem; border: 1px solid var(--line); border-radius: 999px; display: flex; align-items: center; gap: .5rem; color: var(--ink); }
.console-user > summary:hover { box-shadow: 0 2px 6px var(--shadow); background: var(--surface); }
.console-avatar { width: 36px; height: 36px; border-radius: 999px; background: var(--ink); color: var(--on-ink); display: flex; align-items: center; justify-content: center; font-weight: 600; }
.console-tabbar { display: none; }

/* Écrans intermédiaires (petit portable, tablette en paysage) : en-tête compact pour que tous les onglets tiennent
   (icône seule pour la marque, onglets plus serrés) ; jusqu'à 1000px, la barre du bas prend le relais (le menu du haut,
   même compact, ne tient pas en français en dessous de ~980px). Jusqu'à 1320px : la version normale demande ~1245px
   en français avec le nom « Atrium » (modifiable, donc parfois plus long). */
@media (min-width: 1001px) and (max-width: 1320px) {
  .console-header-inner { gap: 1rem; }
  .console-brand-name { display: none; }
  .console-nav { gap: 0; }
  .console-nav a, .console-nav .console-menu-toggle > summary { padding: .6rem .5rem; }
}

@media (max-width: 1000px) {
  .console-nav { display: none; }
  .console-header-inner { height: 60px; padding: 0 1rem; justify-content: space-between; gap: .75rem; }
  .console-user { flex-shrink: 0; }
  .console-tabbar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; background: var(--surface); border-top: 1px solid var(--line); justify-content: space-around; padding: .35rem 0 calc(.35rem + env(safe-area-inset-bottom)); }
  .console-tabbar a { display: flex; flex-direction: column; align-items: center; min-width: 0; font-size: .68rem; color: var(--muted); text-decoration: none; padding: .2rem .25rem; }
  .console-tabbar a.is-active { color: var(--accent); font-weight: 600; }
}

/* --- Page --- */
.console-main { max-width: 1280px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
@media (max-width: 1000px) { .console-main { padding: 1.25rem 1rem 6rem; } .console h1 { font-size: 1.6rem; } }
.bo-page { display: flex; flex-direction: column; gap: 1.5rem; }
.bo-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.bo-header h1 { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.bo-header > * { min-width: 0; max-width: 100%; }
.bo-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.bo-muted { color: var(--muted); }
.bo-back { display: inline-flex; align-items: center; gap: .25rem; color: var(--muted) !important; text-decoration: none; font-weight: 500; margin-bottom: .35rem; }
.bo-back:hover { color: var(--ink) !important; }

/* --- Messages --- */
.console-messages { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.5rem; }
.bo-message { display: flex; gap: .6rem; align-items: flex-start; padding: .9rem 1.1rem; border-radius: var(--radius); background: var(--success-bg); color: var(--success); }
.bo-message.is-error { background: var(--error-bg); color: var(--danger); }
.bo-message.is-warning { background: var(--warning-bg); color: var(--warning); }
.bo-message.is-info { background: var(--accent-soft); color: var(--ink); }

/* --- Boutons --- */
.bo-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .7rem 1.2rem; border-radius: 8px; border: 1px solid var(--ink); background: var(--surface); color: var(--ink); font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; line-height: 1.25; }
.bo-btn:hover { background: var(--soft); }
.bo-btn:disabled { opacity: .45; cursor: not-allowed; }
.bo-btn-primary { background: var(--ink); color: var(--on-ink) !important; }
.bo-btn-primary:hover { background: var(--ink-hover); }
.bo-btn-danger { color: var(--danger); border-color: var(--line); }
.bo-btn-small { padding: .4rem .75rem; font-size: .85rem; font-weight: 500; border-color: var(--line); }
.bo-btn-block { width: 100%; }
.bo-btn .material-symbols-outlined { font-size: 1.2rem; }
.bo-link { text-decoration: underline; font-weight: 600; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; }

/* --- Badges --- */
.bo-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .65rem; border-radius: 999px; font-size: .8rem; font-weight: 600; background: var(--soft); color: var(--muted); white-space: nowrap; letter-spacing: 0; }
.bo-badge::before { content: ""; width: .5rem; height: .5rem; border-radius: 999px; background: currentColor; }
.bo-badge-success { background: var(--success-bg); color: var(--success); }
.bo-badge-warning { background: var(--warning-bg); color: var(--warning); }
.bo-badge-error { background: var(--error-bg); color: var(--danger); }
.bo-badge-accent { background: var(--accent-soft); color: var(--accent); }

/* --- Panneaux et champs --- */
.bo-panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
.bo-panel h2 { font-size: 1.2rem; }
.bo-fields { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.bo-field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.bo-field-wide { grid-column: 1 / -1; }
.bo-field:has(> textarea), .bo-field:has(input[type=radio]), .bo-field:has(div > div > label > input[type=checkbox]) { grid-column: 1 / -1; }  /* textes longs et choix : toute la largeur */
.bo-field > label, .bo-label { font-size: .95rem; font-weight: 600; }
.bo-help { font-size: .875rem; color: var(--muted); }
.bo-errors { font-size: .875rem; color: var(--danger); margin: 0; padding: 0; list-style: none; }
.bo-input, .bo-field input:not([type=checkbox]):not([type=radio]):not([type=hidden]), .bo-field select, .bo-field textarea {
  width: 100%; padding: .75rem .9rem; border: 1px solid var(--input-line); border-radius: 8px; background: var(--surface); color: var(--ink);
}
.bo-field input[type=color] { padding: .3rem; height: 3rem; cursor: pointer; }
.bo-input:focus, .bo-field input:focus, .bo-field select:focus, .bo-field textarea:focus { outline: 2px solid var(--ink); outline-offset: -1px; border-color: var(--ink); }
.bo-field.has-error input, .bo-field.has-error select, .bo-field.has-error textarea { border-color: var(--danger); }
.bo-readonly { display: flex; align-items: center; gap: .4rem; padding: .75rem .9rem; border-radius: 8px; background: var(--soft); color: var(--muted); }
.bo-readonly::before { content: "lock"; font-family: "Material Symbols Outlined"; font-size: 1.05rem; }
.is-dirty input:not([type=checkbox]), .is-dirty select, .is-dirty textarea, .is-dirty .dp-field { background: var(--dirty) !important; border-color: var(--dirty-line) !important; }
.bo-check { display: flex; align-items: center; gap: .6rem; font-weight: 500; }
.bo-check input { width: 1.2rem; height: 1.2rem; accent-color: var(--ink); }

/* --- Barre d'enregistrement --- */
.bo-savebar { position: static; bottom: 1rem; z-index: 30; display: flex; justify-content: flex-end; align-items: center; gap: 1rem; margin-top: 1.5rem; padding: .85rem 1.1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 6px 20px var(--shadow); }
.bo-savebar-status { color: var(--muted); display: flex; align-items: center; gap: .5rem; margin-right: auto; flex: 1 1 12rem; min-width: 0; }
.bo-savebar.is-dirty { position: sticky; border-color: var(--dirty-line); }  /* collée en bas de l'écran seulement s'il y a quelque chose à enregistrer */
.bo-savebar.is-dirty .bo-savebar-status { color: var(--dirty-line); font-weight: 600; }
.bo-savebar.is-dirty .bo-savebar-status::before { content: ""; width: .6rem; height: .6rem; border-radius: 999px; background: var(--dirty-line); }
@media (max-width: 1000px) { .bo-savebar { bottom: 4.75rem; } }  /* au-dessus de la barre d'onglets du bas */
.bo-savebar { flex-wrap: wrap; }  /* libellé long + statut : passe sur deux lignes plutôt que de déborder */
@media (max-width: 640px) { .bo-savebar .bo-btn { flex: 1 1 100%; white-space: normal; } }

/* --- Tableaux --- */
.bo-table-wrap { overflow-x: auto; }
.bo-table { width: 100%; border-collapse: collapse; }
.bo-table th { text-align: left; font-size: .8rem; font-weight: 600; color: var(--muted); padding: .6rem .5rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.bo-table td { padding: .85rem .5rem; border-bottom: 1px solid var(--line); }
.bo-table tr:hover td { background: var(--soft); }
.bo-table tr[data-row-link] { cursor: pointer; }
.bo-table .is-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bo-sheet { width: 100%; border-collapse: separate; border-spacing: 0; }
.bo-sheet th { text-align: left; font-size: .8rem; font-weight: 600; color: var(--muted); padding: .5rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.bo-sheet td { padding: .5rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.bo-sheet .bo-input { padding: .55rem .65rem; }
.bo-sheet tr.is-deleted td, .bo-sheet tr.is-deleted .bo-input { opacity: .35; text-decoration: line-through; }
.bo-sheet td.bo-sheet-action { width: 1%; }
.bo-icon-btn { width: 2.25rem; height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 0; background: none; cursor: pointer; color: var(--muted); }
.bo-icon-btn:hover { background: var(--soft); color: var(--ink); }

@media (max-width: 640px) { .bo-col-secondaire { display: none; } }

/* --- Tableur : champs de formulaire dans les cellules --- */
.bo-sheet input:not([type=checkbox]):not([type=hidden]):not([type=file]), .bo-sheet select { width: 100%; min-width: 6rem; padding: .55rem .65rem; border: 1px solid var(--input-line); border-radius: 8px; background: var(--surface); color: var(--ink); }
.bo-sheet td.is-dirty input:not([type=checkbox]):not([type=file]), .bo-sheet td.is-dirty select, .bo-sheet td.is-dirty .dp-field { background: var(--dirty); border-color: var(--dirty-line); }
.bo-sheet .dp-field { white-space: nowrap; min-width: 8.5rem; padding: .55rem .65rem; }
.bo-sheet select[name$='-type'] { min-width: 13rem; }  /* libellés longs (DPE, État des risques…) */
.bo-sheet input[type=file] { font-size: .8rem; max-width: 12rem; }
.bo-sheet td .bo-errors { margin-top: .25rem; }
.bo-fichier { display: flex; flex-direction: column; gap: .25rem; }
.bo-fichier-lien { display: inline-flex; align-items: center; gap: .25rem; font-size: .85rem; font-weight: 600; }
.bo-dpe { display: inline-flex; align-items: center; justify-content: center; width: 1.8rem; height: 1.8rem; border-radius: 6px; font-weight: 700; color: #fff; }
.bo-dpe-A { background: #009c6d; } .bo-dpe-B { background: #52b153; } .bo-dpe-C { background: #a5cc74; color: #1f1f1f; }
.bo-dpe-D { background: #f4e70f; color: #1f1f1f; } .bo-dpe-E { background: #f0b40f; color: #1f1f1f; }
.bo-dpe-F { background: #eb8235; } .bo-dpe-G { background: #d7221f; }

/* --- État vide --- */
.bo-empty { padding: 3rem 1.5rem; text-align: center; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.bo-empty > .material-symbols-outlined { font-size: 2.5rem; color: var(--muted); }
.bo-empty h2 { color: var(--ink); }

/* --- Fiche à sections (sections à gauche, édition à droite) --- */
.bo-sheetpage { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 2.5rem; align-items: start; }
.bo-sections { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 1.5rem; max-height: calc(100vh - 120px); overflow-y: auto; padding: 4px 6px; margin: -4px -6px; }
.bo-group-title { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: .5rem !important; }
.bo-section { display: block; padding: 1rem 1.1rem; border-radius: var(--radius); text-decoration: none; box-shadow: 0 1px 2px rgb(0 0 0 / .06), 0 0 0 1px var(--line); margin-bottom: .75rem; background: var(--surface); }
.bo-section:hover { box-shadow: 0 2px 8px var(--shadow), 0 0 0 1px var(--line); }
.bo-section.is-active { box-shadow: 0 0 0 2px var(--ink); }
.bo-section-title { font-weight: 600; display: flex; align-items: center; gap: .5rem; }
.bo-section-title .material-symbols-outlined { color: var(--muted); }
.bo-section-summary { display: block; color: var(--muted); font-size: .9rem; margin-top: .15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bo-section-summary.is-todo { color: var(--warning); }
.bo-editor { min-width: 0; display: flex; flex-direction: column; gap: 1.5rem; }
.bo-editor > h2 { font-size: 1.6rem; }
.bo-mobile-back { display: none; }
@media (max-width: 860px) {
  .bo-sheetpage { grid-template-columns: 1fr; gap: 1.5rem; }
  .bo-sections { position: static; max-height: none; overflow: visible; }
  .bo-sheetpage.has-section .bo-sections { display: none; }
  .bo-sheetpage:not(.has-section) .bo-editor { display: none; }
  .bo-mobile-back { display: inline-flex; }
}

/* --- Fiche en deux colonnes : contenu à gauche, actions à droite (bail) --- */
.bo-fiche { display: grid; grid-template-columns: 1fr minmax(280px, 360px); gap: 2rem; align-items: start; }
@media (max-width: 860px) { .bo-fiche { grid-template-columns: 1fr; } }

/* --- Aujourd'hui : cartes --- */
.bo-cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.bo-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; display: flex; flex-direction: column; gap: .5rem; background: var(--surface); }
.bo-card h3 { display: flex; align-items: center; gap: .5rem; font-size: 1rem; color: var(--muted); font-weight: 500; }
.bo-stat { font-size: 2rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.bo-todo-list { border: 1px solid var(--line); border-radius: var(--radius); padding: .25rem 1.25rem; background: var(--surface); }
.bo-todo { display: flex; align-items: center; gap: .75rem; padding: .9rem 0; text-decoration: none; }
.bo-todo + .bo-todo { border-top: 1px solid var(--line); }
.bo-todo > .material-symbols-outlined:first-child { color: var(--warning); }
.bo-todo.is-error > .material-symbols-outlined:first-child { color: var(--danger); }
.bo-todo span:nth-child(2) { flex: 1; }
.bo-todo:hover span:nth-child(2) { text-decoration: underline; }

/* --- Liste « Plus » en pleine page (mobile) --- */
.bo-linklist { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.bo-linklist a { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; text-decoration: none; background: var(--surface); }
.bo-linklist a + a { border-top: 1px solid var(--line); }
.bo-linklist a:hover { background: var(--soft); }
.bo-linklist small { display: block; color: var(--muted); font-size: .85rem; }
/* Texte d'un courrier ou d'un e-mail envoyé, en lecture */
.bo-lettre { background: var(--soft); border-radius: 8px; padding: 1rem 1.25rem; font-size: .95rem; }
.bo-lettre p { margin: 0 0 .75rem; }
.bo-lettre-signature { margin: 1.25rem 0 .5rem 50%; }  /* usage français : signature à droite */
/* Bascule à deux positions (ex. Automatique / Manuel) */
.bo-bascule { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; gap: 2px; background: var(--soft); align-self: flex-start; }
.bo-bascule button { border: 0; background: transparent; color: var(--muted); font: inherit; font-weight: 500; padding: .45rem 1rem; border-radius: 999px; cursor: pointer; }
.bo-bascule button.is-active { background: var(--ink); color: var(--surface); }
/* Filtres d'une liste (menus déroulants alignés) */
.bo-filtres { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.bo-filtres .bo-input { width: auto; max-width: 100%; }
/* Frise des relances d'un bail */
.bo-relances { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.bo-relances li { display: flex; align-items: center; gap: .75rem; padding: .75rem 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.bo-relances li:first-child { border-top: 0; }
.bo-relances .bo-relance-texte { flex: 1; min-width: 200px; }

/* --- Grand sélecteur de dates --- */
.dp-field { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .75rem .9rem; border: 1px solid var(--input-line); border-radius: 8px; background: var(--surface); cursor: pointer; text-align: left; color: var(--ink); }
.dp-field:focus { outline: 2px solid var(--ink); outline-offset: -1px; }
.dp-field .material-symbols-outlined { color: var(--muted); }
.dp-field .is-empty { color: var(--muted); }
.dp-dialog { margin: 6vh auto auto; width: min(760px, 100vw); max-height: 100dvh; border: 0; border-radius: 20px; padding: 1.5rem; background: var(--surface); color: var(--ink); box-shadow: 0 20px 50px rgb(0 0 0 / .25); font-family: "Inter", system-ui, sans-serif; }
.dp-dialog::backdrop { background: rgb(0 0 0 / .45); }
.dp-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; gap: 1rem; }
.dp-head strong { font-size: 1.1rem; }
.dp-nav { display: flex; gap: .25rem; }
.dp-saut { display: flex; gap: .4rem; margin-left: auto; }
.dp-saut select { padding: .4rem .5rem; border: 1px solid var(--input-line); border-radius: 8px; background: var(--surface); color: var(--ink); text-transform: capitalize; }
@media (max-width: 640px) { .dp-head { flex-wrap: wrap; } .dp-head strong { flex-basis: 100%; } .dp-saut { margin-left: 0; } }
.dp-arrow { width: 2.5rem; height: 2.5rem; border-radius: 999px; border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); }
.dp-arrow:hover { background: var(--soft); }
.dp-months { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }
.dp-title { text-align: center; font-weight: 600; text-transform: capitalize; line-height: 2.5rem; }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: .2rem; text-align: center; }
.dp-grid > span { font-size: .75rem; color: var(--muted); padding: .3rem 0; }
.dp-grid > .dp-empty { aspect-ratio: 1; padding: 0; }
.dp-day { aspect-ratio: 1; border-radius: 999px; border: 2px solid transparent; background: none; cursor: pointer; color: var(--ink); font-size: .95rem; }
.dp-day:hover { border-color: var(--ink); }
.dp-day.is-today { font-weight: 700; text-decoration: underline; }
.dp-day.is-selected { background: var(--ink); color: var(--on-ink); }
.dp-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
@media (max-width: 640px) {
  .dp-dialog { margin: 0; width: 100vw; height: 100dvh; max-width: 100vw; border-radius: 0; overflow-y: auto; }
  .dp-months { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* --- Pages de connexion (hors cadre de la console) --- */
.auth-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1rem; gap: 1.5rem; }
.auth-card { width: min(440px, 100%); border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 2rem; display: flex; flex-direction: column; gap: 1.25rem; box-shadow: 0 6px 24px rgb(0 0 0 / .06); }
.auth-card.is-wide { width: min(560px, 100%); }
.auth-card h1 { font-size: 1.6rem; }
.auth-brand { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 1.3rem; color: var(--accent); }
.auth-brand .material-symbols-outlined { font-size: 1.8rem; }
.auth-foot { font-size: .85rem; color: var(--muted); display: flex; gap: 1rem; }
.auth-foot button { background: none; border: 0; padding: 0; color: inherit; cursor: pointer; text-decoration: underline; }
.otp-qr { width: 200px; height: 200px; background: #fff; border-radius: 12px; padding: 8px; align-self: center; }
.otp-secret { font-family: ui-monospace, Menlo, monospace; letter-spacing: .05em; word-break: break-all; }
.otp-codes { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 1.5rem; padding: 1rem 1.25rem; background: var(--soft); border-radius: var(--radius); font-family: ui-monospace, Menlo, monospace; font-size: 1.05rem; margin: 0; list-style: none; }
.bo-details > summary { cursor: pointer; color: var(--muted); }
.bo-details[open] > summary { margin-bottom: .75rem; }
.bo-divider { display: flex; align-items: center; gap: .75rem; color: var(--muted); font-size: .85rem; }
.bo-divider::before, .bo-divider::after { content: ""; flex: 1; border-top: 1px solid var(--line); }

/* --- Guide de style --- */
.style-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .75rem; }
.style-swatch { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; font-size: .8rem; }
.style-swatch i { display: block; height: 48px; }
.style-swatch span { display: block; padding: .4rem .6rem; }
.style-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }


/* --- Boutons radio et champs désactivés --- */
.bo-field input[type=radio], .bo-field label > input[type=checkbox] { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--ink); flex-shrink: 0; }
.bo-field label:has(> input[type=radio]), .bo-field label:has(> input[type=checkbox]) { display: flex; align-items: center; gap: .6rem; font-weight: 500; padding: .35rem 0; cursor: pointer; }
.bo-field input:disabled, .bo-field select:disabled, .bo-field textarea:disabled { background: var(--soft); color: var(--muted); border-color: var(--line); cursor: not-allowed; }
.bo-field label:has(> input:disabled) { color: var(--muted); cursor: not-allowed; }

/* --- Liste de faits (icône + titre + détail) --- */
.bo-facts { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.bo-facts > div { display: flex; gap: .75rem; align-items: flex-start; }
.bo-facts > div > .material-symbols-outlined { color: var(--muted); margin-top: .1rem; }
.bo-facts strong { display: block; }
.bo-facts .bo-muted { display: block; font-size: .9rem; }

/* --- Filtres en pilules --- */
.bo-pills { display: flex; gap: .5rem; flex-wrap: wrap; }
.bo-pills a { padding: .45rem .9rem; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; font-size: .9rem; font-weight: 500; }
.bo-pills a:hover { border-color: var(--ink); }
.bo-pills a.is-active { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }

/* --- Champ à copier --- */
.bo-copy { display: flex; gap: .5rem; }
.bo-copy .bo-input { font-family: ui-monospace, Menlo, monospace; font-size: .85rem; }
@media (max-width: 640px) { .bo-copy { flex-direction: column; } }
.bo-message form { margin-left: auto; }

/* Mouvements réduits sur demande du système. */
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
/* Comparaison de deux régimes (colonnes chiffrées côte à côte) */
.bo-comparaison th.is-num, .bo-comparaison td.is-num { width: 28%; }
/* État des lieux : un élément par carte, états en gros boutons (pensé pour le téléphone) */
.bo-edl { display: flex; flex-direction: column; gap: 1rem; max-width: 860px; }
.bo-element { border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem 1rem; margin: 0; display: flex; flex-direction: column; gap: .6rem; background: var(--surface); }
.bo-element legend { font-weight: 600; padding: 0 .3rem; }
.bo-element.is-degrade { border-color: var(--danger); }
.bo-entree { font-size: .85rem; margin: 0; }
.bo-etats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.bo-etats label { cursor: pointer; position: relative; }
.bo-etats input { position: absolute; opacity: 0; pointer-events: none; }
.bo-etats span { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 44px; padding: .35rem; border: 1px solid var(--line); border-radius: 10px; font-size: .85rem; line-height: 1.15; }
.bo-etats input:checked + span { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.bo-etats input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.bo-photos { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.bo-photos img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); display: block; }
.bo-photo-ajout { cursor: pointer; }
.bo-edl-actions { position: sticky; bottom: .75rem; display: flex; gap: .5rem; justify-content: flex-end; z-index: 5; }
@media (max-width: 560px) { .bo-etats { grid-template-columns: repeat(2, 1fr); } .bo-edl-actions { justify-content: stretch; } .bo-edl-actions .bo-btn { flex: 1; justify-content: center; } }
/* Pavé de signature au doigt */
.bo-signature { display: flex; flex-direction: column; gap: .4rem; }
.bo-signature canvas { width: 100%; height: 180px; border: 1px dashed var(--line); border-radius: var(--radius); background: #fff; touch-action: none; }
.bo-signature.is-signed canvas { border-style: solid; border-color: var(--ink); }
/* Aperçu d'un e-mail (cadre isolé, fond clair comme dans une messagerie) */
.bo-apercu-email { width: 100%; max-width: 720px; height: 640px; border: 1px solid var(--line); border-radius: var(--radius); background: #f7f7f7; }
@media (max-width: 1000px) { .bo-edl-actions { bottom: 4.75rem; } }  /* au-dessus de la barre d'onglets du bas */
/* Signature électronique : pages de signature (tablette, lien), étapes, signataires, QR code, preuve */
.auth-card.is-signer { width: min(720px, 100%); }
.bo-signer .auth-card h1 { font-size: 1.5rem; }
.bo-etapes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.bo-etapes > li { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .75rem; }
.bo-etapes > li.is-attente { opacity: .6; }
.bo-etapes > li.is-fait { background: var(--soft); }
.bo-etapes h2 { font-size: 1.05rem; display: flex; align-items: center; gap: .6rem; margin: 0; }
.bo-etape-num { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--ink); color: var(--surface); font-size: .85rem; }
.bo-etapes > li.is-fait .bo-etape-num { background: var(--success); }
.bo-etape-form { display: flex; flex-direction: column; gap: .75rem; align-items: flex-start; }
.bo-etape-form .bo-signature, .bo-etape-form .bo-field-wide, .bo-etape-form .bo-lettre { align-self: stretch; }
.bo-code { font-size: 1.4rem; letter-spacing: .3em; width: 11rem; text-align: center; }
.bo-signataires { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.bo-signataires li { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; border: 1px solid var(--line); border-radius: var(--radius); padding: .75rem 1rem; }
.bo-signataires li.is-signe { background: var(--soft); }
.bo-signataires li.is-signe > .material-symbols-outlined { color: var(--success); }
.bo-signataire-nom { flex: 1; display: flex; flex-direction: column; min-width: 12rem; }
.bo-signataire-nom small { color: var(--muted); }
.bo-signataire-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.bo-qr { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; }
.bo-qr img { background: #fff; border-radius: 8px; padding: 4px; }
.bo-qr div { flex: 1; min-width: 12rem; }
.bo-sortie { display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center; }
.bo-merci { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem; }
.bo-merci > .material-symbols-outlined { font-size: 3rem; color: var(--success); }
.bo-recap { display: grid; gap: .75rem; }
.bo-recap > div { display: flex; flex-direction: column; gap: .15rem; }
.bo-empreinte { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .8rem; word-break: break-all; }
/* Avenants : lignes des départs de colocataires et des conjoints sur la fiche du bail */
.bo-ligne-changement { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .9rem; }
.bo-ligne-changement > span:nth-child(2) { flex: 1; min-width: 12rem; }
.bo-ligne-changement form { margin: 0; }
.bo-signataires li.is-refuse > .material-symbols-outlined { color: var(--danger); }
/* Liste avec recherche (locataires d'un bail…) : étiquettes des choix, champ de recherche, propositions */
.bo-recherche { position: relative; display: flex; flex-direction: column; gap: .5rem; }
.bo-etiquettes { display: flex; flex-wrap: wrap; gap: .4rem; }
.bo-etiquettes:empty { display: none; }
.bo-etiquette { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .4rem .3rem .75rem; border-radius: 999px; background: var(--soft); border: 1px solid var(--line); font-size: .9rem; }
.bo-etiquette button { border: 0; background: none; color: var(--muted); font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0 .25rem; border-radius: 50%; }
.bo-etiquette button:hover { color: var(--ink); background: var(--line); }
.bo-recherche-liste { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; margin: .25rem 0 0; padding: .3rem; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 24px rgb(0 0 0 / .12); max-height: 18rem; overflow-y: auto; }
.bo-recherche-liste li { padding: .55rem .75rem; border-radius: 8px; cursor: pointer; }
.bo-recherche-liste li:hover { background: var(--soft); }
.bo-recherche-liste li.is-vide { color: var(--muted); cursor: default; }
/* Points de vigilance des locataires : grave = texte rouge, moyen = icône orange (bulle au survol) */
.bo-vigilance { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; }
.bo-vigilance-grave { display: inline-flex; align-items: center; gap: .25rem; color: var(--danger); font-size: .85rem; font-weight: 600; white-space: nowrap; }
.bo-vigilance-grave .material-symbols-outlined { font-size: 1.05rem; }
.bo-vigilance-moyen { color: var(--warning); font-size: 1.25rem; cursor: help; }
.bo-points-vigilance { border: 1px solid var(--line); border-radius: var(--radius); padding: .1rem 1.25rem; background: var(--surface); margin-bottom: 1.25rem; }
/* Compte de loyers « par loyer » : chaque loyer, puis ses paiements en lignes filles ; paiements à affecter */
.bo-table-loyers .bo-ligne-loyer td { border-top: 1px solid var(--line); }
.bo-table-loyers .bo-ligne-paiement td { border-top: 0; padding-top: .3rem; padding-bottom: .3rem; font-size: .9rem; color: var(--muted); }
.bo-table-loyers .bo-ligne-paiement td:first-child { padding-left: 1.25rem; }
.bo-table-loyers .bo-ligne-paiement td:first-child > .material-symbols-outlined { font-size: 1rem; vertical-align: -3px; margin-right: .3rem; }
.bo-a-affecter { border-color: var(--warning); }
.bo-a-affecter h2 { display: flex; align-items: center; gap: .5rem; }
.bo-a-affecter h2 .material-symbols-outlined { color: var(--warning); }

/* Mention d'une caution : éléments exigés, cochés pendant la frappe */
.bo-mention-elements { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-size: .875rem; color: var(--muted); }
.bo-mention-elements li { display: flex; align-items: center; gap: .3rem; }
.bo-mention-elements .material-symbols-outlined { font-size: 1.1rem; }
.bo-mention-elements li.is-ok { color: var(--success); }

/* Clauses types insérées dans les clauses particulières du bail */
.bo-clauses-types summary { cursor: pointer; font-weight: 600; }
.bo-clauses-types[open] { display: flex; flex-direction: column; gap: .6rem; }
.bo-clauses-liste { display: flex; flex-wrap: wrap; gap: .4rem; }
.bo-help.is-warning { color: var(--warning); }
.bo-clause-modele { padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.bo-clause-modele:last-of-type { border-bottom: 0; }

/* Cases à cocher en pastilles avec icône (équipements, parties communes, accès internet) */
.bo-cases-icones { display: flex; flex-wrap: wrap; gap: .5rem; }
.bo-field .bo-cases-icones label.bo-case-icone { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .8rem; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-weight: 400; background: var(--bg, transparent); user-select: none; }
.bo-case-icone input { position: absolute; opacity: 0; pointer-events: none; }
.bo-case-icone .material-symbols-outlined { font-size: 1.15rem; color: var(--muted); }
.bo-field .bo-cases-icones label.bo-case-icone:has(input:checked) { border-color: var(--ink); background: var(--soft); font-weight: 600; }
.bo-field .bo-cases-icones label.bo-case-icone:has(input:checked) .material-symbols-outlined { color: var(--ink); }
.bo-case-icone:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Dépôt de fichiers (glisser-déposer ou clic) */
.bo-depot { position: relative; }
.bo-depot input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.bo-depot label { display: flex; flex-direction: column; align-items: center; gap: .35rem; text-align: center; padding: 1.6rem 1.2rem; border: 2px dashed var(--line); border-radius: var(--radius); background: var(--soft); cursor: pointer; }
.bo-depot label .material-symbols-outlined { font-size: 2rem; color: var(--muted); }
.bo-depot.is-survol label, .bo-depot:focus-within label { border-color: var(--ink); }
.bo-depot.is-envoi label { opacity: .6; }

/* Fiche avec colonne latérale (propriétaire : formulaire à gauche, biens et comptes à droite) */
.bo-colonnes-fiche { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.5rem; align-items: start; }
@media (max-width: 1000px) { .bo-colonnes-fiche { grid-template-columns: minmax(0, 1fr); } }

/* Arbre Propriétaire › Bien (charges) */
.bo-arbre-page { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.bo-arbre { display: flex; flex-direction: column; gap: .4rem; position: sticky; top: 90px; }
.bo-arbre a { display: flex; align-items: center; gap: .5rem; padding: .5rem .7rem; border-radius: 10px; color: var(--ink); text-decoration: none; }
.bo-arbre a span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bo-arbre a small { color: var(--muted); white-space: nowrap; }
.bo-arbre a:hover { background: var(--soft); }
.bo-arbre a.is-active { background: var(--soft); box-shadow: inset 0 0 0 1px var(--ink); font-weight: 600; }
.bo-arbre .material-symbols-outlined { font-size: 1.15rem; color: var(--muted); }
.bo-arbre-noeud > a { font-weight: 600; }
.bo-arbre-enfants { display: flex; flex-direction: column; gap: .15rem; margin-left: 1.1rem; padding-left: .6rem; border-left: 1px solid var(--line); }
.bo-arbre-contenu { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
@media (max-width: 900px) { .bo-arbre-page { grid-template-columns: minmax(0, 1fr); } .bo-arbre { position: static; } }

/* Accès à l'espace propriétaire (fiche du propriétaire) */
.bo-acces { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem; padding: .5rem 0; border-bottom: 1px solid var(--line); }
.bo-acces > span { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.bo-acces small { font-size: .8rem; }
.bo-acces.is-inactif strong { color: var(--muted); text-decoration: line-through; }
.bo-signature-apercu { max-width: 240px; max-height: 90px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: .4rem; }

/* --- Messagerie : fil d'une conversation (reçus à gauche, envoyés à droite) --- */
.bo-fil { display: flex; flex-direction: column; gap: .75rem; }
.bo-fil-message { max-width: min(680px, 92%); align-self: flex-start; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: .9rem 1.1rem; display: flex; flex-direction: column; gap: .4rem; overflow-wrap: anywhere; }
.bo-fil-message.is-sortant { align-self: flex-end; background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.bo-fil-message.is-automatique { background: var(--soft); }
.bo-fil-message header { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
.bo-fil-message header .bo-muted { font-size: .85rem; margin-left: auto; }
.bo-fil-sujet { font-weight: 600; }
.bo-fil-pj { display: inline-flex; align-items: center; gap: .35rem; font-size: .9rem; }