/* immo — data room des dossiers immobiliers. Feuille unique, aucun style en ligne (CSP stricte). */

:root {
  --fond: #f5f2ec;
  --surface: #ffffff;
  --encre: #1d2421;
  --discret: #6b716d;
  --trait: #e4ded3;
  --marque: #1f3a34;
  --marque-clair: #e6eeeb;
  --ok: #2f7a4f;
  --alerte: #b7791f;
  --danger: #b3261e;
  --rayon: 12px;
  --ombre: 0 1px 2px rgb(0 0 0 / 5%), 0 3px 10px rgb(0 0 0 / 5%);
  /* Couleurs des briques */
  --vert: #2f5d50;
  --terracotta: #a8482c;
  --bleu: #2c4f7c;
  --ocre: #b8862b;
  --prune: #5e2a4f;
  --gris: #5b6166;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--encre); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--marque); }
h1 { font-size: 1.6rem; margin: 0; letter-spacing: -0.01em; }
h2 { font-size: 1.05rem; margin: 0 0 12px; }
.discret { color: var(--discret); font-weight: normal; }
.chargement, .vide { color: var(--discret); }
.vide { font-style: italic; }
.aide { color: var(--discret); font-size: 0.9em; }
.erreur { color: var(--danger); white-space: pre-line; min-height: 1em; margin: 6px 0; }

/* --- Boutons et champs --- */
button { font: inherit; cursor: pointer; border: 1px solid var(--marque); background: var(--marque); color: #fff; padding: 8px 14px; border-radius: 8px; }
button:hover { filter: brightness(1.12); }
button:disabled { opacity: 0.5; cursor: default; }
button.secondaire { background: var(--surface); color: var(--marque); }
button.danger { background: var(--danger); border-color: var(--danger); }
button.lien { background: none; border: 0; color: var(--marque); padding: 0; text-decoration: underline; }
button.petit { padding: 4px 10px; font-size: 0.85rem; }
input, select, textarea { font: inherit; width: 100%; padding: 8px 10px; border: 1px solid var(--trait); border-radius: 8px; background: #fff; color: inherit; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--marque-clair); border-color: var(--marque); }
.champ { display: flex; flex-direction: column; gap: 4px; }
.champ > span { font-size: 0.85rem; color: var(--discret); }
.champ small { color: var(--discret); font-size: 0.8rem; }

/* --- Connexion --- */
.page-connexion { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
.connexion { width: min(380px, 100%); background: var(--surface); padding: 32px; border-radius: 16px; box-shadow: var(--ombre); }
.connexion h1 { display: flex; flex-direction: column; margin-bottom: 24px; }
.connexion h1 strong { font-size: 2rem; color: var(--marque); }
.connexion h1 span { font-size: 0.95rem; font-weight: normal; color: var(--discret); }
.connexion form { display: grid; gap: 14px; }

/* --- En-tête --- */
.entete { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 24px; background: var(--marque); color: #fff; position: sticky; top: 0; z-index: 10; }
.marque { color: #fff; text-decoration: none; display: flex; align-items: baseline; gap: 8px; }
.marque strong { font-size: 1.35rem; }
.marque span { opacity: 0.7; font-size: 0.85rem; }
.compte { display: flex; gap: 14px; align-items: center; font-size: 0.9rem; flex-wrap: wrap; justify-content: flex-end; }
.compte button.lien { color: #fff; }

main { padding: 24px; max-width: 1400px; margin: 0 auto; }
.retour { display: inline-block; margin-bottom: 10px; text-decoration: none; color: var(--discret); }
.barre { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.barre.fine { margin-bottom: 12px; }
.barre.fine h2 { margin: 0; }
.outils { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.outils select { width: auto; }
.panneau { background: var(--surface); border-radius: var(--rayon); padding: 18px; box-shadow: var(--ombre); margin-bottom: 16px; min-width: 0; }

/* --- Accueil : briques --- */
.titre-accueil { margin: 8px 0 20px; }
.briques { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.brique {
  position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 170px; padding: 26px 22px 18px;
  background: var(--surface); border-radius: 16px; box-shadow: var(--ombre); text-decoration: none; color: var(--encre);
  overflow: hidden; transition: transform 0.12s ease, box-shadow 0.12s ease; border: 0; text-align: left; font: inherit;
}
.brique:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgb(0 0 0 / 10%); filter: none; }
.brique .bandeau { position: absolute; inset: 0 0 auto 0; height: 8px; background: var(--c, var(--marque)); }
.brique strong { font-size: 1.35rem; color: var(--c, var(--marque)); }
.brique .sous-titre { color: var(--discret); font-size: 1rem; }
.brique .chiffres { margin-top: auto; display: flex; justify-content: space-between; gap: 8px; font-size: 0.85rem; color: var(--discret); flex-wrap: wrap; }
.brique.vert { --c: var(--vert); } .brique.terracotta { --c: var(--terracotta); } .brique.bleu { --c: var(--bleu); }
.brique.ocre { --c: var(--ocre); } .brique.prune { --c: var(--prune); } .brique.gris { --c: var(--gris); }
.brique.nouvelle { background: transparent; border: 2px dashed var(--trait); box-shadow: none; align-items: center; justify-content: center; color: var(--discret); }
.brique.nouvelle strong { font-size: 2rem; color: var(--discret); }
.section-accueil { margin-bottom: 34px; }
.titre-section { display: flex; align-items: center; gap: 10px; font-size: 1.25rem; margin: 6px 0 14px; }
.titre-section .numero { width: 30px; height: 30px; border-radius: 50%; background: var(--marque); color: #fff; display: grid; place-items: center; font-size: 0.95rem; flex: none; }

/* --- Dossier --- */
.entete-dossier { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 22px; background: var(--surface); border-radius: var(--rayon); box-shadow: var(--ombre); border-left: 6px solid var(--c, var(--marque)); margin-bottom: 16px; }
.entete-dossier h1 { color: var(--c, var(--marque)); }
.entete-dossier p { margin: 4px 0 0; }
.entete-dossier.vert { --c: var(--vert); } .entete-dossier.terracotta { --c: var(--terracotta); } .entete-dossier.bleu { --c: var(--bleu); }
.entete-dossier.ocre { --c: var(--ocre); } .entete-dossier.prune { --c: var(--prune); } .entete-dossier.gris { --c: var(--gris); }
.onglets { display: flex; gap: 2px; border-bottom: 1px solid var(--trait); margin-bottom: 18px; overflow-x: auto; }
.onglets a { padding: 10px 18px; text-decoration: none; color: var(--discret); border-bottom: 3px solid transparent; white-space: nowrap; font-weight: 500; }
.onglets a.actif { color: var(--marque); border-bottom-color: var(--marque); font-weight: 700; }
.sous-onglets { display: inline-flex; gap: 4px; background: #ebe6dd; padding: 4px; border-radius: 10px; margin-bottom: 16px; }
.sous-onglets a { padding: 6px 14px; border-radius: 8px; text-decoration: none; color: var(--discret); }
.sous-onglets a.actif { background: var(--surface); color: var(--marque); font-weight: 600; box-shadow: var(--ombre); }

/* Data room */
.dataroom { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 18px; align-items: start; }
.arbre-rubriques { background: var(--surface); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 10px; position: sticky; top: 76px; }
.rubrique { display: flex; align-items: center; gap: 4px; border-radius: 8px; }
.rubrique .choix { flex: 1; display: flex; justify-content: space-between; align-items: center; gap: 8px; background: none; border: 0; color: var(--encre); padding: 7px 10px; text-align: left; border-radius: 8px; }
.rubrique .choix:hover { background: #f3efe8; filter: none; }
.rubrique.niveau1 .choix { font-weight: 600; }
.rubrique.niveau2 .choix { padding-left: 26px; font-size: 0.93rem; }
.rubrique.actif .choix { background: var(--marque-clair); color: var(--marque); }
.compteur { background: #ece7df; color: var(--discret); border-radius: 10px; padding: 0 8px; font-size: 0.78rem; font-weight: 600; }
.gestion { display: flex; gap: 8px; padding-right: 6px; }
.gestion button.lien { text-decoration: none; font-size: 1rem; }
.arbre-outils { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 8px 4px; border-top: 1px solid var(--trait); margin-top: 8px; font-size: 0.85rem; }
.contenu-rubrique { min-width: 0; }
.choix-mobile { display: none; margin-bottom: 12px; }

.depot { border: 2px dashed var(--trait); border-radius: var(--rayon); background: var(--surface); padding: 22px; text-align: center; display: flex; flex-direction: column; gap: 4px; cursor: pointer; margin-bottom: 16px; color: var(--discret); }
.depot strong { color: var(--marque); }
.depot.survol, .depot:hover, .depot:focus { border-color: var(--marque); background: var(--marque-clair); outline: none; }
.etat-depot { margin: 6px 0 0; color: var(--encre); min-height: 1em; }

.documents { list-style: none; margin: 0; padding: 0; background: var(--surface); border-radius: var(--rayon); box-shadow: var(--ombre); }
.documents li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--trait); }
.documents li:last-child { border-bottom: 0; }
.doc-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.doc-titre { text-align: left; font-weight: 600; text-decoration: none !important; color: var(--encre) !important; overflow-wrap: anywhere; }
.doc-titre:hover { text-decoration: underline !important; }
.doc-texte .discret { font-size: 0.82rem; overflow-wrap: anywhere; }
.doc-actions { display: flex; gap: 6px; align-items: center; flex: none; }
.icone { flex: none; width: 42px; height: 42px; border-radius: 8px; display: grid; place-items: center; font-size: 0.68rem; font-weight: 800; color: #fff; background: var(--gris); letter-spacing: 0.03em; }
.icone.pdf { background: #b3261e; } .icone.doc { background: #2b579a; } .icone.xls { background: #217346; }
.icone.img { background: #8a5a9e; } .icone.dwg { background: #b8862b; } .icone.ppt { background: #c4532a; }

/* Suivi financier */
.indicateurs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
.indicateurs > div { background: var(--surface); border-radius: var(--rayon); padding: 14px 18px; box-shadow: var(--ombre); display: flex; flex-direction: column; }
.indicateurs span { color: var(--discret); font-size: 0.85rem; }
.indicateurs strong { font-size: 1.45rem; font-variant-numeric: tabular-nums; }
.defile { overflow-x: auto; }
.tableau { width: 100%; border-collapse: collapse; }
.tableau th, .tableau td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--trait); white-space: nowrap; }
.tableau td:nth-child(2) { white-space: normal; }
.tableau th { font-size: 0.78rem; color: var(--discret); text-transform: uppercase; letter-spacing: 0.03em; background: #faf8f5; }
.tableau .nombre { text-align: right; font-variant-numeric: tabular-nums; }
.tableau tfoot td { border-bottom: 0; border-top: 2px solid var(--trait); }
.tableau tr.cliquable { cursor: pointer; }
.tableau tr.cliquable:hover td { background: #faf8f5; }
.avec-jauge { display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.jauge { width: 90px; height: 8px; border-radius: 4px; background: #ece7df; overflow: hidden; display: inline-block; }
.jauge > span { display: block; height: 100%; background: var(--ok); }
.jauge.depasse > span { background: var(--danger); }
.negatif { color: var(--danger); font-weight: 600; }
.positif { color: var(--ok); }
.badge { border-radius: 10px; padding: 1px 8px; font-size: 0.8rem; white-space: nowrap; }
.badge.ok { background: #e3f1e8; color: var(--ok); }
.badge.attente { background: #fbf0dc; color: var(--alerte); }

/* Locataires */
.case { display: flex; flex-direction: row; align-items: center; gap: 8px; font-size: 0.9rem; }
.case input { width: auto; }
.tableau.loyers td.mois, .tableau.loyers th.mois { text-align: center; padding: 6px 3px; }
.locataire-cellule { display: flex; flex-direction: column; white-space: normal !important; min-width: 140px; }
.locataire-cellule .discret { font-size: 0.8rem; }
.case-mois { display: inline-block; min-width: 62px; padding: 6px 4px; border-radius: 6px; font-size: 0.8rem; font-variant-numeric: tabular-nums; border: 0; color: var(--encre); background: #f3efe8; }
button.case-mois:hover { filter: brightness(0.95); }
.case-mois.hors { background: transparent; }
.case-mois.paye, .legende.paye { background: #dcefe3; color: #1f6b40; }
.case-mois.partiel, .legende.partiel { background: #fbe9c9; color: #8a5a0d; }
.case-mois.impaye, .legende.impaye { background: #f8d9d6; color: #9b1f17; font-weight: 700; }
.case-mois.attendu, .legende.attendu { background: #e6eeeb; color: var(--marque); outline: 1px dashed var(--marque); }
.case-mois.trop, .legende.trop { background: #e2e6f6; color: #2c4f7c; }
.legende { display: inline-block; padding: 1px 8px; border-radius: 6px; font-size: 0.8rem; }
.liste-reglements { list-style: none; padding: 0; margin: 10px 0; }
.liste-reglements li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--trait); }

/* --- Fenêtres --- */
.fenetre { border: 0; border-radius: 14px; padding: 22px; width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 32px); box-shadow: 0 10px 40px rgb(0 0 0 / 25%); }
.fenetre::backdrop { background: rgb(20 30 26 / 45%); }
.grille-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.grille-form .plein { grid-column: 1 / -1; }
.actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.actions .gauche { margin-right: auto; }
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--encre); color: #fff; padding: 10px 18px; border-radius: 10px; z-index: 100; box-shadow: var(--ombre); white-space: pre-line; max-width: calc(100vw - 32px); }

/* --- Téléphone --- */
@media (max-width: 800px) {
  main { padding: 16px; }
  .entete { padding: 10px 16px; }
  .marque span, .compte > span { display: none; }
  .briques { grid-template-columns: 1fr; gap: 12px; }
  .brique { min-height: 120px; }
  .dataroom { grid-template-columns: 1fr; }
  .arbre-rubriques { display: none; }
  .choix-mobile { display: block; }
  .indicateurs { grid-template-columns: 1fr 1fr; }
  .grille-form { grid-template-columns: 1fr; }
  .documents li { flex-wrap: wrap; }
  .doc-actions { width: 100%; justify-content: flex-end; }
}