/* PPSB — feuille de style unique, sans framework. */
:root {
  --fond: #f6f7f9;
  --carte: #ffffff;
  --texte: #1f2933;
  --doux: #616e7c;
  --bord: #d9dee4;
  --accent: #1f6f8b;
  --accent-fonce: #155069;
  --vert: #1e7a46;
  --rouge: #b3261e;
  --orange: #a15c00;
  --rayon: 6px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  color: var(--texte);
  background: var(--fond);
}
a { color: var(--accent); }
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; }
.entete {
  background: var(--accent-fonce);
  color: #fff;
  padding: .6rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.entete a { color: #fff; text-decoration: none; }
.entete .marque { font-weight: 700; letter-spacing: .03em; display: inline-flex; align-items: center; gap: .45rem; }
.entete .marque img { display: block; }
.entete .copro { opacity: .9; }
.entete .droite { margin-left: auto; display: flex; gap: 1rem; align-items: center; }
.entete form { margin: 0; }
.entete button { background: none; border: 1px solid rgba(255,255,255,.5); color: #fff; padding: .2rem .6rem; }
.page { display: flex; min-height: calc(100vh - 48px); }
nav.menu {
  width: 220px;
  flex-shrink: 0;
  background: var(--carte);
  border-right: 1px solid var(--bord);
  padding: 1rem 0;
}
nav.menu .rubrique { margin: .35rem .5rem; border-radius: var(--rayon); }
nav.menu .rubrique.active { background: #f2f8fa; }
nav.menu .titre { font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--accent); border-radius: var(--rayon); padding: .3rem .75rem; margin: .5rem 0 .25rem; }
nav.menu a { display: block; padding: .4rem .75rem; text-decoration: none; color: var(--texte); border-left: 3px solid transparent; }
nav.menu a:hover { background: #f0f6f8; }
nav.menu a.actif { background: #f59f00; color: #1f2933; border-left-color: #b35f00; font-weight: 700; border-radius: 0 var(--rayon) var(--rayon) 0; box-shadow: 0 1px 3px rgba(179, 95, 0, .35); }
nav.menu a.actif:hover { background: #e07f00; }
nav.menu a.actif::after { content: "›"; float: right; font-weight: 700; }
main { flex: 1; padding: 1.5rem 2rem; max-width: 1200px; }
.carte { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 1rem 1.25rem; margin-bottom: 1rem; }
.grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.chiffre { font-size: 1.4rem; font-weight: 600; }
.legende { color: var(--doux); font-size: .85rem; }
table { width: 100%; border-collapse: collapse; background: var(--carte); }
th, td { padding: .4rem .6rem; border-bottom: 1px solid var(--bord); text-align: left; vertical-align: top; }
th { font-size: .8rem; text-transform: uppercase; color: var(--doux); font-weight: 600; }
td.montant, th.montant { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
tr.total td { font-weight: 600; border-top: 2px solid var(--texte); }
tr.report td { font-style: italic; color: var(--doux); border-top: 1px dashed var(--bord); }
tr.annule td { color: var(--doux); text-decoration: line-through; }
.positif { color: var(--vert); }
.negatif { color: var(--rouge); }
.messages { list-style: none; padding: 0; margin: 0 0 1rem; }
.messages li { padding: .6rem .9rem; border-radius: var(--rayon); margin-bottom: .4rem; border: 1px solid; }
.messages .success { background: #e8f5ec; border-color: #b6dcc2; }
.messages .error { background: #fdecea; border-color: #f2b8b5; }
.messages .warning { background: #fff4e0; border-color: #f0cf99; }
.messages .info { background: #e8f1f8; border-color: #b9d3e8; }
form div { margin-bottom: .6rem; }
label { display: block; font-weight: 500; margin-bottom: .15rem; }
input[type=text], input[type=email], input[type=date], input[type=number], input[type=password], select, textarea {
  width: 100%;
  max-width: 420px;
  padding: .4rem .5rem;
  border: 1px solid var(--bord);
  border-radius: 4px;
  font: inherit;
  background: #fff;
}
input[type=checkbox] { margin-right: .4rem; }
.helptext, .aide { display: block; color: var(--doux); font-size: .85rem; }
.errorlist { color: var(--rouge); margin: .2rem 0; padding-left: 1.1rem; }
button, .bouton {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: .45rem .9rem;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}
button:hover, .bouton:hover { background: var(--accent-fonce); }
.bouton.secondaire, button.secondaire { background: #fff; color: var(--accent); border: 1px solid var(--accent); }
button.danger { background: var(--rouge); }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; margin: .75rem 0; }
.badge { display: inline-block; padding: .05rem .45rem; border-radius: 10px; font-size: .8rem; background: #e4e7eb; }
.badge.vert { background: #dcefe3; color: var(--vert); }
.badge.orange { background: #fdebd0; color: var(--orange); }
.badge.rouge { background: #fbdedb; color: var(--rouge); }
details summary { cursor: pointer; color: var(--accent); margin: .5rem 0; }
.deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.connexion { max-width: 380px; margin: 4rem auto; }
/* Pages d'erreur (404, 403, page expirée, 500) : templates/erreur.html */
main.erreur { max-width: 560px; margin: 4rem auto; padding: 0 1rem; }
.erreur-icone { font-size: 2.5rem; margin: 0; }
.pagination { margin: 1rem 0; display: flex; gap: 1rem; }
.etroit { max-width: 680px; }
@media (max-width: 800px) {
  .page { flex-direction: column; }
  nav.menu { width: 100%; border-right: none; border-bottom: 1px solid var(--bord); }
  main { padding: 1rem; }
  .deux-colonnes { grid-template-columns: 1fr; }
}

/* Retouches : saisie en tableau, assistant, aides. */
table.saisie input[type=text], table.saisie input[type=email], table.saisie select { max-width: 100%; }
table.saisie td { padding: .25rem .4rem; }
tr:hover td { background: #fafbfc; }
.avertissement { background: #fff4e0; border: 1px solid #f0cf99; border-radius: var(--rayon); padding: .6rem .9rem; }
.avertissement-court { display: block; color: var(--orange); font-size: .85rem; }
abbr.info { display: inline-block; width: 1.1em; height: 1.1em; line-height: 1.1em; border-radius: 50%; background: var(--accent); color: #fff; font-size: .75em; font-style: italic; font-weight: 700; text-align: center; text-decoration: none; cursor: help; text-transform: none; }
fieldset.paiement { border: 1px solid var(--bord); border-radius: var(--rayon); padding: .6rem .9rem; margin: 0 0 .8rem; background: #f8fafb; }
.filtres { display: inline-flex; gap: .2rem; margin-left: .5rem; }
.filtres a { padding: .35rem .7rem; border-radius: 4px; text-decoration: none; }
.filtres a.actif { background: #eaf3f6; font-weight: 600; }
.barre-action { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; margin-top: 1rem; }
.barre-action > div { margin: 0; }
.encart { border-left: 4px solid var(--accent); }
ol.etapes { list-style: none; padding: 0; margin: 0 0 1.5rem; }
ol.etapes .etape { display: flex; align-items: center; gap: 1rem; background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: .8rem 1rem; margin-bottom: .6rem; }
ol.etapes .pastille { width: 2rem; height: 2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #e4e7eb; font-weight: 700; flex-shrink: 0; }
ol.etapes .faite .pastille { background: var(--vert); color: #fff; }
ol.etapes .corps { flex: 1; display: flex; flex-direction: column; }
details > summary { font-weight: 500; }

/* Avis d'appel imprimables : un avis par page. */
.avis { background: #fff; padding: 2rem; margin: 0 auto 2rem; max-width: 800px; border: 1px solid var(--bord); }
.avis .haut { display: flex; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
.avis table { margin: 1rem 0; }
@media print {
  .entete, nav.menu, .sans-impression, .messages { display: none !important; }
  body, main { background: #fff; padding: 0; margin: 0; max-width: none; }
  .avis { border: none; margin: 0; padding: 0; page-break-after: always; }
  .avis:last-child { page-break-after: auto; }
}

/* Emojis de rubrique, raccourcis et tuiles du tableau de bord. */
.ico { display: inline-block; width: 1.5em; text-align: center; margin-right: .35em; font-style: normal; }
h1 .ico, h2 .ico, h3 .ico { width: auto; margin-right: .4em; }
nav.menu a .ico { margin-left: -.2em; }
.raccourcis { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1rem; }
.raccourci { display: inline-flex; align-items: center; padding: .55rem .9rem; background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); text-decoration: none; color: var(--texte); font-weight: 500; transition: border-color .15s, box-shadow .15s; }
.raccourci:hover { border-color: var(--accent); box-shadow: 0 2px 6px rgba(21, 80, 105, .12); }
a.tuile { display: block; text-decoration: none; color: inherit; }
a.tuile:hover { border-color: var(--accent); }
.tuile.a-voir { border-left: 4px solid var(--orange); }
.tuile.ok { border-left: 4px solid var(--vert); }
.messages li::before { margin-right: .5rem; }
.messages .success::before { content: "✅"; }
.messages .error::before { content: "❌"; }
.messages .warning::before { content: "⚠️"; }
.messages .info::before { content: "ℹ️"; }

/* Explications à la demande : options repliées, exemples, annexes, états. */
details.avances { margin: .5rem 0 .8rem; }
details.avances > summary, details.exemple > summary { font-size: .85rem; font-weight: 400; }
details.exemple { margin: .1rem 0 .3rem; }
details.exemple p { font-size: .85rem; color: var(--doux); margin: .3rem 0; max-width: 560px; }
.info-bulle { position: relative; display: inline-block; }
.info-bulle .contenu { display: none; position: absolute; right: 0; top: 1.4rem; z-index: 5; width: 320px; background: #fff; border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: 0 4px 12px rgba(0,0,0,.12); padding: .6rem .8rem; text-align: left; white-space: normal; font-weight: 400; font-size: .85rem; color: var(--texte); }
.info-bulle:hover .contenu, .info-bulle:focus-within .contenu { display: block; }
.info-bulle .contenu p { margin: .2rem 0; }
.alertes { list-style: none; padding: 0; margin: 0 0 1rem; }
.alertes li { margin-bottom: .35rem; display: flex; gap: .4rem; align-items: stretch; }
.alertes li > a, .alertes li > .rappel-libre { flex: 1; }
.alertes .rappel-libre { display: flex; gap: .5rem; align-items: center; padding: .5rem .8rem; background: var(--carte); border: 1px solid var(--bord); border-left: 4px solid var(--accent); border-radius: var(--rayon); }
.alertes li form { display: flex; }
.alertes a { display: flex; gap: .5rem; align-items: center; padding: .5rem .8rem; background: var(--carte); border: 1px solid var(--bord); border-left: 4px solid var(--orange); border-radius: var(--rayon); text-decoration: none; color: var(--texte); }
.alertes a:hover { border-color: var(--accent); }
.alertes .bientot a { border-left-color: var(--accent); }
.annexe { margin-top: 2rem; padding-top: .8rem; border-top: 1px dashed var(--bord); font-size: .85rem; color: var(--doux); }
.annexe h3 { font-size: .9rem; color: var(--texte); }
.annexe p { margin: .2rem 0; }
.bouton.petit { padding: .2rem .55rem; font-size: .85rem; }
details.bloc-parametres { padding: 0; }
details.bloc-parametres > summary { padding: .8rem 1.1rem; font-weight: 600; color: var(--texte); margin: 0; }
details.bloc-parametres[open] > summary { border-bottom: 1px solid var(--bord); margin-bottom: .8rem; }
details.bloc-parametres > .champ { padding: 0 1.1rem; }
details.bloc-parametres > .champ:last-child { padding-bottom: .8rem; }
.champ ul { list-style: none; padding: 0; margin: .2rem 0; }
.champ ul label { font-weight: 400; }
.attention { background: #fdecea; border: 1px solid #f2b8b5; border-left: 4px solid var(--rouge); border-radius: var(--rayon); padding: .7rem 1rem; margin-bottom: 1rem; }
.attention strong { color: var(--rouge); }
.attention p { margin: .3rem 0 0; }
.attention ul { margin: .3rem 0 0; padding-left: 1.3rem; }
tr.cliquable { cursor: pointer; }
tr.cliquable:hover td { background: #eaf3f6; }
table.nouveaux-lots input { max-width: 160px; }

/* Barre de recherche de l'en-tête. */
.recherche { position: relative; flex: 1; max-width: 420px; }
.recherche input { width: 100%; max-width: none; padding: .35rem .7rem; border-radius: 18px; border: none; font: inherit; }
.recherche-resultats { position: absolute; top: 2.3rem; left: 0; right: 0; z-index: 20; list-style: none; margin: 0; padding: .3rem 0; background: #fff; border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: 0 6px 18px rgba(0,0,0,.15); }
.recherche-resultats a { display: block; padding: .45rem .8rem; color: var(--texte) !important; }
.recherche-resultats a strong { display: block; font-weight: 600; }
.recherche-resultats a span { display: block; font-size: .85rem; color: var(--doux); }
.recherche-resultats li.choisi a, .recherche-resultats a:hover { background: #eaf3f6; }
.recherche-resultats li.vide { padding: .45rem .8rem; color: var(--doux); font-size: .9rem; }
@media print { .recherche { display: none; } }
@media (max-width: 800px) { .recherche { order: 3; max-width: none; flex-basis: 100%; } }

/* Aide intégrée. */
.lien-aide { float: right; width: 1.8rem; height: 1.8rem; line-height: 1.8rem; text-align: center; font-weight: 700; text-decoration: none; border-radius: 50%; background: var(--accent); color: #fff; }
.lien-aide:hover { background: var(--accent-fonce); color: #fff; }
.aide-page { max-width: 820px; }
.aide-page h2 { margin-top: 0; }
.aide-page ol, .aide-page ul { padding-left: 1.3rem; }
.aide-page li { margin-bottom: .35rem; }
.aide-page details > summary { font-weight: 600; color: var(--texte); }
.aide-page details[open] > summary { margin-bottom: .6rem; }
.aide-page .exemple-chiffre { background: #f8fafb; border-left: 3px solid var(--accent); padding: .5rem .8rem; margin: .5rem 0; }
.aide-page dt { font-weight: 600; margin-top: .6rem; }
.aide-page dd { margin: .2rem 0 0 0; }

/* Tri et filtres des listes. */
table.triable th.tri { cursor: pointer; user-select: none; white-space: nowrap; }
table.triable th.tri::after { content: " ↕"; opacity: .35; font-size: .8em; }
table.triable th.tri[data-sens="asc"]::after { content: " ▲"; opacity: .8; }
table.triable th.tri[data-sens="desc"]::after { content: " ▼"; opacity: .8; }
form.filtres-liste { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; margin: 0 0 .8rem; padding: .6rem .8rem; background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); }
form.filtres-liste div { margin: 0; }
form.filtres-liste label { font-size: .8rem; color: var(--doux); font-weight: 500; }
form.filtres-liste select, form.filtres-liste input { width: auto; min-width: 9rem; padding: .3rem .4rem; }
form.filtres-liste .compte { margin-left: auto; font-size: .85rem; color: var(--doux); align-self: center; }
@media print { form.filtres-liste { display: none; } }
details.ajout { margin: 0 0 1rem; }
details.ajout > summary.bouton { list-style: none; display: inline-block; margin: 0 0 .6rem; color: #fff; font-weight: 400; }
details.ajout > summary.bouton::-webkit-details-marker { display: none; }
details.ajout[open] > summary.bouton { background: var(--accent-fonce); }
form.filtres-liste .export { align-self: center; }

/* Bascule « Par propriétaire / Par lot » */
.bascule { display: inline-flex; border: 1px solid var(--accent); border-radius: var(--rayon); overflow: hidden; margin: 0 0 .75rem; }
.bascule a { padding: .3rem .8rem; text-decoration: none; color: var(--accent); background: #fff; font-size: .9rem; }
.bascule a + a { border-left: 1px solid var(--accent); }
.bascule a.actif { background: var(--accent); color: #fff; font-weight: 600; }
.sous-lots td { padding-top: .15rem; padding-bottom: .15rem; font-size: .9rem; color: var(--doux); }
.sous-lots td:first-child { padding-left: 1.5rem; }
button.petit { padding: .2rem .55rem; font-size: .85rem; }
button.lien { background: none; border: none; color: var(--accent); padding: 0 .25rem; text-decoration: underline; cursor: pointer; font-size: .85rem; }
button.lien:hover { background: none; color: var(--accent-fonce); }
button.lien.danger { color: var(--rouge); text-decoration: none; }
tr.a-supprimer td { background: #fdecea; color: var(--doux); }
/* Feuille de calcul du décompte locataire. */
table.decompte td { vertical-align: top; }
table.decompte td.calcul { min-width: 34rem; }
table.decompte td.calcul > div { margin-top: .3rem; line-height: 2.2; white-space: nowrap; }
table.decompte td.calcul .reperes { display: block; white-space: normal; line-height: 1.5; }
table.decompte td.sans-coupure { white-space: nowrap; }
table.decompte input.libelle { width: 100%; min-width: 11rem; }
table.decompte input.nombre { width: 6rem; text-align: right; display: inline-block; }
table.decompte input.court { width: 4rem; }
table.decompte select[data-mode] { width: auto; }
table.decompte tr.exclue td { color: var(--doux); }
table.decompte tr.exclue td input, table.decompte tr.exclue td select { opacity: .6; }
table.decompte .legende .lien { font-size: inherit; padding: 0 .1rem; }
table.decompte .alerte { color: var(--rouge); }
table.decompte .repere-alerte { color: #b45309; font-weight: 600; }
table.decompte select[data-unite-ligne] { width: auto; display: inline-block; }
.champs-en-ligne { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: end; }
.champs-en-ligne label { display: flex; flex-direction: column; font-weight: 600; }
fieldset.sans-cadre { border: none; margin: 0; padding: 0; min-width: 0; }
tr.a-supprimer td input, tr.a-supprimer td select, tr.a-supprimer td summary { text-decoration: line-through; }
button.lien.danger:hover { color: var(--rouge); text-decoration: underline; }
input.court { width: 8rem; }
#table-reprise input[type=text] { width: 8rem; text-align: right; }
#table-reprise tr.groupe td { font-weight: 500; }
td.centre, th.centre { text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.encart-info { background: #eaf3f6; border: 1px solid #b9d6e0; border-left: 4px solid var(--accent); border-radius: var(--rayon); padding: .6rem .9rem; }
.avertissement.court { display: inline-block; padding: .3rem .7rem; margin: .25rem 0 .75rem; }
table.mini-historique { width: auto; margin: .4rem 0 .2rem; font-size: .85rem; border: 1px solid var(--bord); }
table.mini-historique th, table.mini-historique td { padding: .2rem .6rem; }
table.mini-historique th:first-child { text-align: left; color: var(--doux); font-weight: 500; }
table.mini-historique td.depasse { color: var(--orange); font-weight: 600; }
div.actions-ligne, p.actions-ligne { display: flex; gap: .4rem; align-items: center; justify-content: flex-end; }
.actions-ligne form { margin: 0; }
form.en-ligne { display: inline; margin-left: .5rem; }
/* Récapitulatif imprimable d'un budget */
.recap { background: var(--carte); padding: 1.5rem 2rem; border: 1px solid var(--bord); border-radius: var(--rayon); }
.recap .haut { display: flex; justify-content: space-between; margin-bottom: 1rem; }
.recap .droite-texte { text-align: right; color: var(--doux); }
.recap h2 { margin-top: 1.6rem; border-bottom: 2px solid var(--accent); padding-bottom: .2rem; }
.recap h3 { font-size: 1rem; margin: 1.1rem 0 .4rem; }
.recap table { margin-bottom: .5rem; }
@media print {
  .recap { border: none; padding: 0; }
  .recap-appel { page-break-inside: avoid; }
  .recap h2 { page-break-after: avoid; }
  .badge { border: 1px solid #999; }
}
.defilement { overflow-x: auto; }
table.recap-budget th.proprio, table.recap-budget td.proprio { background: #f6f9fb; border-left: 1px solid var(--bord); }
@media print { table.recap-budget { font-size: 9pt; } .defilement { overflow: visible; } }
.recap-annexe { color: var(--texte); }
.recap-fiches { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .4rem 1rem; align-items: start; }
table.recap-fiche { width: 100%; font-size: .85rem; margin: 0; }
table.recap-fiche th { text-align: left; }
@media print {
  .recap-annexe { page-break-before: always; border-top: none; margin-top: 0; }
  .recap-fiches { grid-template-columns: repeat(3, 1fr); }
  table.recap-fiche { font-size: 8pt; page-break-inside: avoid; }
  table.recap-repartition tr { page-break-inside: avoid; }
}
h1.titre-budget .en-titre { float: right; margin: 0 2.6rem 0 1rem; font-size: .85rem; font-weight: 500; }
.actions.bas-de-page { margin-top: 1.5rem; }
/* Fil d'Ariane */
.fil-ariane { font-size: .85rem; color: var(--doux); margin: -.4rem 0 .6rem; }
.fil-ariane a { color: var(--accent); text-decoration: none; }
.fil-ariane a:hover { text-decoration: underline; }
.fil-ariane .separateur { margin: 0 .3rem; color: var(--bord); }
.fil-ariane [aria-current] { color: var(--texte); font-weight: 500; }
th.precedent, td.precedent { color: var(--doux); background: #fafbfc; }
.titre-et-outil { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
form.comparer { display: inline-flex; align-items: center; gap: .4rem; margin: 0; font-size: .9rem; }
form.comparer label { margin: 0; font-weight: 500; color: var(--doux); }
form.comparer select { width: auto; padding: .2rem .4rem; }

/* Fenêtres d'action à la ligne (dépenses : Payée, Annuler) */
dialog.dialogue { border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--carte); color: var(--texte); padding: 1.25rem 1.5rem; max-width: 26rem; width: calc(100% - 2rem); }
dialog.dialogue::backdrop { background: rgba(0, 0, 0, .35); }
dialog.dialogue h3 { margin-top: 0; }
td.actions-ligne { white-space: nowrap; text-align: right; }

/* Relevés : zone « compteur changé » repliée sous le nom du compteur */
details.change { font-size: .85rem; margin-top: .2rem; }
details.change summary { cursor: pointer; color: var(--doux); }
details.change label { display: block; margin: .2rem 0; }
details.change input { width: 8rem; }

/* Clé « consommation » : lots desservis par un compteur (liste dépliable de cases) */
details.choix-lots { position: relative; }
details.choix-lots summary { cursor: pointer; min-width: 9rem; }
details.choix-lots[open] > label { display: block; white-space: nowrap; }
details.choix-lots[open] { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: .3rem .5rem; max-height: 16rem; overflow-y: auto; }
.ligne-champs { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; margin: .5rem 0; }

/* Action destructive repliée en bas de page (supprimer une clé…) */
details.zone-danger { margin-top: 2rem; }
details.zone-danger summary { cursor: pointer; color: var(--rouge); }

/* Parties repliables d'une page (titre h2 dans le summary) */
details.section > summary { cursor: pointer; list-style: none; }
details.section > summary::-webkit-details-marker { display: none; }
details.section > summary h2 { display: inline-block; margin: 1.25rem 0 .5rem; }
details.section > summary h2::before { content: "▸ "; color: var(--doux); }
details.section[open] > summary h2::before { content: "▾ "; }

/* Petit stylo après un titre : renommer sans bouton */
a.crayon { font-size: .55em; text-decoration: none; opacity: .55; vertical-align: middle; margin-left: .3rem; }
a.crayon:hover, a.crayon:focus { opacity: 1; }

/* Ligne masquée (catégorie…) : en transparence, toujours dans la liste */
tr.masquee td { opacity: .45; }
tr.masquee td:last-child { opacity: 1; }
button.icone { min-width: 2rem; }
button:disabled { opacity: .4; cursor: not-allowed; }
/* Petits pictogrammes dessinés (œil, œil barré…) : suivent la couleur du texte */
svg.pictogramme { width: 1.05em; height: 1.05em; vertical-align: -.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* État des comptes : document imprimable (Imprimer → Enregistrer en PDF). */
main:has(> .etat) { min-width: 0; }
.etat-choix .etat-periode { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end; }
.etat-choix .dates-libres { display: flex; gap: .8rem; }
.etat-choix .dates-libres[hidden] { display: none; }
.etat-cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .2rem 1rem; margin: .4rem 0; }
.etat-cases label { font-weight: normal; }
.etat { background: var(--carte); padding: 1.5rem 2rem; border: 1px solid var(--bord); border-radius: var(--rayon); min-width: 0; overflow-x: auto; }
.etat .haut { display: flex; justify-content: space-between; gap: 1rem; }
.etat .droite-texte { text-align: right; color: var(--doux); }
.etat-titre { font-size: 2rem; margin: 2.5rem 0 .2rem; color: var(--accent-fonce); }
.etat-periode-titre { font-size: 1.15rem; margin: 0 0 1rem; }
.etat-provisoire { display: inline-block; background: #fff4e0; border: 1px solid #f0cf99; border-radius: var(--rayon); padding: .4rem .8rem; }
.etat-sommaire { margin: 1.5rem 0; padding: .8rem 1.2rem; background: #f6f9fb; border-left: 4px solid var(--accent); border-radius: var(--rayon); }
.etat-sommaire h2 { margin: 0 0 .4rem; font-size: 1.05rem; }
.etat-sommaire ol { margin: 0; padding-left: 1.4rem; columns: 2; }
.etat-sommaire a { text-decoration: none; }
.etat-partie { margin-top: 2.2rem; }
.etat-partie h2 { border-bottom: 2px solid var(--accent); padding-bottom: .25rem; margin-bottom: .3rem; }
.etat-partie h2 .num { display: inline-block; min-width: 1.8rem; height: 1.8rem; line-height: 1.8rem; margin-right: .6rem; text-align: center; border-radius: 50%; background: var(--accent); color: #fff; font-size: .95rem; }
.etat-partie h3 { font-size: 1rem; margin: 1.1rem 0 .4rem; }
.etat-partie .chapeau { color: var(--doux); margin: .2rem 0 .8rem; }
table.etat-table { width: 100%; margin-bottom: .5rem; }
table.etat-table.etroite { width: auto; min-width: 50%; }
table.etat-table th { white-space: normal; vertical-align: bottom; }
table.etat-table td:first-child { min-width: 9rem; }
table.etat-table td.montant { white-space: nowrap; }
table.etat-table.serree th, table.etat-table.serree td { padding: .25rem .4rem; }
table.etat-table tr.annule td { color: var(--doux); text-decoration: line-through; }
table.etat-table tr.debut-ecriture td { border-top: 1px solid var(--bord); }
.etat-chiffres { display: flex; flex-wrap: wrap; gap: .6rem; margin: .8rem 0; }
.etat-chiffres div { flex: 1 1 10rem; padding: .5rem .8rem; border: 1px solid var(--bord); border-radius: var(--rayon); background: #f8fafb; }
.etat-chiffres span { display: block; font-size: .8rem; color: var(--doux); }
.etat-chiffres strong { font-size: 1.1rem; }
.etat-fiches { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .4rem 1rem; align-items: start; }
table.etat-fiche { width: 100%; font-size: .85rem; margin: 0; }
table.etat-fiche th { text-align: left; }
table.etat-table td.estimation { font-style: italic; }
.etat-explication { margin: .6rem 0; padding: .4rem .8rem; background: #f6f9fb; border-left: 4px solid var(--accent); border-radius: var(--rayon); }
.etat-explication summary { cursor: pointer; font-weight: 600; }
.etat-explication p { margin: .4rem 0; }
.etat-pied { margin-top: 2rem; padding-top: .6rem; border-top: 1px solid var(--bord); font-size: .8rem; color: var(--doux); }
@media print {
  .lien-aide, .fil-ariane, nav.fil { display: none !important; }
  .etat { border: none; padding: 0; font-size: 9.5pt; overflow: visible; }
  .etat-couverture { page-break-after: always; }
  .etat-titre { margin-top: 30mm; font-size: 26pt; }
  .etat-partie { page-break-before: always; margin-top: 0; }
  .etat-partie.large { page: large; }
  .etat-partie h2, .etat-partie h3 { page-break-after: avoid; }
  table.etat-table { font-size: 8.5pt; }
  table.etat-table.serree { font-size: 7.5pt; }
  table.etat-table thead { display: table-header-group; }
  table.etat-table tr { page-break-inside: avoid; }
  .etat-fiches { grid-template-columns: repeat(3, 1fr); }
  table.etat-fiche { font-size: 8pt; page-break-inside: avoid; }
  .etat-releve { page-break-inside: auto; }
  .etat-releve + .etat-releve { page-break-before: always; }
  .etat-sommaire a { color: inherit; }
  abbr.info { display: none; }
}

/* Biens d'un propriétaire (fiche propriétaire) */
form.ligne-action { display: flex; align-items: center; gap: .75rem; margin: .4rem 0; }
label.case { display: inline-flex; align-items: center; gap: .3rem; margin-right: 1rem; }

/* Documents : dossiers à gauche, liste à droite. */
.documents { display: grid; grid-template-columns: 260px 1fr; gap: 1rem; align-items: start; }
.documents .arbre { display: flex; flex-direction: column; gap: .1rem; padding: .75rem; }
.documents .arbre > a { text-decoration: none; padding: .25rem .5rem; border-radius: var(--rayon); color: var(--texte); }
.documents .arbre > a:hover { background: var(--fond); }
.documents .arbre > a.actif { background: var(--accent); color: #fff; }
.documents .arbre > a.actif .legende { color: #fff; }
.documents .arbre > a, .documents h2 { overflow-wrap: anywhere; }
.documents .nouveau-dossier { margin-top: .5rem; }
.documents .espace { margin-top: .75rem; }
.jauge { display: block; height: 6px; background: var(--bord); border-radius: 3px; margin-top: .25rem; overflow: hidden; }
.jauge > span { display: block; height: 100%; background: var(--accent); }
.documents-epingles { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.documents-epingles a { display: inline-block; padding: .35rem .7rem; background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); text-decoration: none; }
@media (max-width: 800px) { .documents { grid-template-columns: 1fr; } }

/* Lecture seule (conseil syndical) : les saisies sont masquées, le serveur les refuse. */
.bandeau-lecture { background: #fff7e6; border: 1px solid #f0c36d; border-radius: var(--rayon); padding: .5rem .75rem; margin: 0 0 1rem; }
body.lecture-seule main form[method="post"] :is(button, input[type="submit"], input[type="file"]),
body.lecture-seule main details:has(> form[method="post"]),
body.lecture-seule main .raccourcis,
body.lecture-seule main [data-dialogue],
body.lecture-seule main [data-marquer-suppression],
body.lecture-seule main .ecriture { display: none !important; }

/* Courriers envoyés : texte de l'e-mail tel qu'il est parti. */
pre.courriel { white-space: pre-wrap; font-family: inherit; margin: 0; }

/* Lien entre la gestion et « Mon espace » (un seul compte, deux vues). */
nav.menu a.mon-espace { font-weight: 600; background: #eef6f9; border-radius: var(--rayon); }

/* Bouton qui a l'air d'un lien (action secondaire dans une phrase). */
button.lien { background: none; border: none; padding: 0; color: var(--accent); text-decoration: underline; cursor: pointer; font: inherit; }

/* Bloc indépendant du formulaire (ex. Sauvegarde et export sous « Enregistrer »). */
.bloc-a-part { margin-top: 2rem; }
table.rappels-reglages input.delai { width: 4.5rem; text-align: right; }
table.rappels-reglages label { display: flex; gap: .4rem; align-items: center; }
/* Abonnement : lecture seule (rouge), encarts discrets (essai qui se termine, paiement attendu) */
.bandeau-lecture.abonnement { background: #fbdedb; border-color: #e4a39b; }
.encart-abonnement { border-radius: var(--rayon); padding: .5rem .75rem; margin: 0 0 1rem; border: 1px solid #b9d6e0; background: #eaf3f6; }
.encart-abonnement.orange { background: #fdebd0; border-color: #f0c36d; }
nav.menu .badge-menu { font-size: .75rem; color: var(--orange); margin-left: .3rem; white-space: nowrap; }
.situation-abonnement { border-left: 4px solid var(--vert); }
.situation-abonnement.info { border-left-color: var(--accent); }
.situation-abonnement.orange { border-left-color: var(--orange); }
.situation-abonnement.lecture { border-left-color: var(--rouge); }
.situation-abonnement .situation-ligne { margin-top: 0; }
.etapes-paiement .coordonnees { margin: .4rem 0; padding: .5rem .75rem; background: var(--fond); border-radius: var(--rayon); font-family: ui-monospace, monospace; }
.reference { font-family: ui-monospace, monospace; }
tr.barree td { text-decoration: line-through; color: var(--doux); }
/* Espace administrateur */
.tuiles-admin { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.tuile-admin { display: flex; flex-direction: column; gap: .2rem; text-decoration: none; color: inherit; }
.tuile-admin strong { font-size: 1.5rem; }
.double-auth { max-width: 460px; }
.double-auth .qr { margin: .6rem 0; }
.double-auth .qr svg { width: 200px; height: 200px; display: block; }
.codes-secours { columns: 2; font-size: 1.1rem; list-style: none; padding: 0; }
.codes-secours li { margin: .3rem 0; }
form.filtres-admin { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
/* Nous contacter */
.champ-site_web { display: none; }
.contact .indice { background: var(--fond); border-radius: var(--rayon); padding: .5rem .75rem; margin: .5rem 0; }
footer.pied { text-align: center; padding: 1rem; font-size: .85rem; color: var(--doux); }
footer.pied a { color: var(--doux); }
.onglets { display: flex; gap: .3rem; border-bottom: 1px solid var(--bord); margin-bottom: 1rem; }
.onglets a { padding: .4rem .9rem; text-decoration: none; border: 1px solid transparent; border-bottom: none; border-radius: var(--rayon) var(--rayon) 0 0; }
.onglets a.actif { border-color: var(--bord); background: var(--carte); font-weight: 600; }
.filtres-admin a.actif { font-weight: 600; }
tr.refus td { color: var(--rouge); }
.message-contact { white-space: normal; background: var(--fond); border-left: 3px solid var(--accent); margin: .6rem 0; padding: .6rem .9rem; }
.alertes-admin li { margin-bottom: .3rem; }
.filtres-admin select, .filtres-admin input[type="search"] { width: auto; min-width: 12rem; }
.rond-rouge { display: inline-block; min-width: 1.15rem; height: 1.15rem; line-height: 1.15rem; padding: 0 .3rem; margin-left: .35rem; border-radius: 999px; background: var(--rouge); color: #fff; font-size: .72rem; font-weight: 700; text-align: center; }
/* Fil d'une demande (Nous contacter) */
.fil-demande { max-width: 760px; }
.message-fil { border-left: 4px solid var(--bord); }
.message-fil.admin { border-left-color: var(--accent); background: #f3f8fa; }
.message-fil .pieces { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; }
.message-fil .pieces img { max-width: 160px; max-height: 120px; border: 1px solid var(--bord); border-radius: var(--rayon); display: block; }
.documents-admin { display: grid; grid-template-columns: 260px 1fr; gap: 1rem; align-items: start; }
.arbre-admin a { display: block; padding: .3rem .4rem; border-radius: var(--rayon); text-decoration: none; }
.arbre-admin a.actif { background: var(--accent); color: #fff; }
.arbre-admin a.actif .legende { color: #fff; }
.nouveau-dossier { display: flex; gap: .3rem; margin-top: .6rem; }
@media (max-width: 800px) { .documents-admin { grid-template-columns: 1fr; } }
.ligne-titre { font-size: 1rem; margin: 1.2rem 0 .5rem; color: var(--doux); text-transform: uppercase; letter-spacing: .04em; }
.tuile-admin.principale { background: var(--accent); border-color: var(--accent); color: #fff; }
.tuile-admin.principale .legende { color: #e3eef3; }
.tuile-admin.rouge { border-left: 4px solid var(--rouge); }
.tuile-admin.rouge strong { color: var(--rouge); }
.tuile-admin.orange { border-left: 4px solid var(--orange); }
.tuile-admin.vert strong { color: var(--vert); }
/* Tableau de bord de l'administration : tuiles qui demandent une action */
.ligne-tuiles { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-start; }
.ligne-tuiles > .grille { flex: 1 1 320px; margin-bottom: 0; }
.groupe-action { flex: 1 1 320px; border: 1px solid #e4a39b; border-radius: var(--rayon); background: #fdf3f2; padding: 0 .6rem .6rem; }
.groupe-action > .grille { margin-bottom: 0; }
.bandeau-action { margin: 0 -.6rem .6rem; padding: .3rem .6rem; background: var(--rouge); color: #fff; font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; border-radius: var(--rayon) var(--rayon) 0 0; }
.doublons-admin { margin-top: 1.5rem; }

/* Démo publique (copie par visiteur) */
.bandeau-demo { background: #fff4e0; border: 1px solid #f0cf99; border-left: 4px solid #ef9f27; border-radius: var(--rayon); padding: .55rem .9rem; margin: 0 0 1rem; }

/* Visite guidée (static/js/visite.js) : élément en lumière, le reste assombri. */
.visite-voile { position: fixed; inset: 0; z-index: 900; background: transparent; }
.visite-voile.plein { background: rgba(15, 30, 40, .55); }
.visite-lumiere { position: absolute; z-index: 901; border-radius: 10px; box-shadow: 0 0 0 4px #ef9f27, 0 0 0 9999px rgba(15, 30, 40, .55); pointer-events: none; transition: all .25s ease; }
.visite-bulle { position: absolute; z-index: 902; background: #fff; border-radius: 12px; padding: 1rem 1.1rem .9rem; box-shadow: 0 12px 40px rgba(0, 0, 0, .3); max-width: calc(100vw - 24px); }
.visite-bulle.centre { position: fixed; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%); width: min(420px, calc(100vw - 24px)) !important; }
.visite-bulle h3 { margin: .1rem 0 .4rem; color: var(--accent-fonce); }
.visite-bulle p { margin: 0 0 .6rem; }
.visite-compteur { font-size: .8rem; color: var(--doux); }
.visite-points { display: flex; gap: .35rem; flex-wrap: wrap; margin: .2rem 0 .8rem; }
.visite-points button { width: 10px; height: 10px; padding: 0; border-radius: 50%; border: 0; background: #d0d7de; cursor: pointer; }
.visite-points button.actif { background: #ef9f27; transform: scale(1.3); }
.visite-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.visite-actions .visite-arreter { background: none; border: 0; color: var(--doux); text-decoration: underline; padding: 0; margin-right: auto; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .visite-lumiere { transition: none; } }