/* Espace de gestion — même charte que la vitrine : épinette, lin, laiton. */

:root {
  --paper: #EFEDE4;
  --card: #F7F6F0;
  --ink: #1C2521;
  --ink-soft: #4A564F;
  --spruce: #1D3A32;
  --spruce-deep: #132921;
  --on-spruce: #EDEAD9;
  --on-spruce-soft: #B7C2B4;
  --bronze: #A5804C;
  --bronze-deep: #8A6838;
  --line: #CFCCBB;
  --line-soft: #DBD9CC;
  --sage: #8FA796;
  --rouge: #A64B3C;
  --ambre: #C2882E;
  --vert: #4E7D5B;
  --largeur-barre: 250px;
  /* Rôles de couleur : redéfinis par le thème sombre. */
  --titre: #1D3A32;
  --lien: #1D3A32;
  --principal: #1D3A32;
  --principal-survol: #132921;
  --barre: #1D3A32;
  --champ: #fff;
  --entete-tableau: #F1EFE6;
  --survol: #F3F1E9;
  --badge-retard: #F1DAD5;
  --badge-bientot: #F3E3C6;
  --texte-bientot: #7A5A1C;
  --badge-mois: #E7E2CF;
  --badge-neutre: #E6EAE3;
  --badge-fait: #DCE8DE;
  --ombre: rgba(0,0,0,.25);
  --sur-accent: #fff;
  color-scheme: light;
}

/* Thème sombre : choisi dans Mon compte, ou « automatique » quand l'ordinateur est en sombre.
   Les deux blocs ci-dessous portent la même palette et doivent rester identiques :
   le second sert le thème automatique par le CSS seul, sans attendre le JavaScript. */
:root[data-theme="sombre"] {
  --paper: #111A16;
  --card: #18231E;
  --ink: #E4E1D4;
  --ink-soft: #A7B2A7;
  --spruce-deep: #0B1310;
  --bronze: #C29A62;
  --bronze-deep: #D4B07A;
  --line: #2E3C35;
  --line-soft: #25312B;
  --sage: #6F8F7A;
  --rouge: #E08A7A;
  --ambre: #E0AE5C;
  --vert: #8CC29B;
  --titre: #E6DCC0;
  --lien: #D8B887;
  --principal: #2F5E50;
  --principal-survol: #3A6F5F;
  --barre: #0E1713;
  --champ: #0F1713;
  --entete-tableau: #1D2A24;
  --survol: #1F2C26;
  --badge-retard: #4A2620;
  --badge-bientot: #4A3A1C;
  --texte-bientot: #F0CC8A;
  --badge-mois: #3A3322;
  --badge-neutre: #26322C;
  --badge-fait: #1F3A28;
  --ombre: rgba(0,0,0,.6);
  --sur-accent: #17120C;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --paper: #111A16;
    --card: #18231E;
    --ink: #E4E1D4;
    --ink-soft: #A7B2A7;
    --spruce-deep: #0B1310;
    --bronze: #C29A62;
    --bronze-deep: #D4B07A;
    --line: #2E3C35;
    --line-soft: #25312B;
    --sage: #6F8F7A;
    --rouge: #E08A7A;
    --ambre: #E0AE5C;
    --vert: #8CC29B;
    --titre: #E6DCC0;
    --lien: #D8B887;
    --principal: #2F5E50;
    --principal-survol: #3A6F5F;
    --barre: #0E1713;
    --champ: #0F1713;
    --entete-tableau: #1D2A24;
    --survol: #1F2C26;
    --badge-retard: #4A2620;
    --badge-bientot: #4A3A1C;
    --texte-bientot: #F0CC8A;
    --badge-mois: #3A3322;
    --badge-neutre: #26322C;
    --badge-fait: #1F3A28;
    --ombre: rgba(0,0,0,.6);
    --sur-accent: #17120C;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.5 "Public Sans", system-ui, sans-serif;
}

h1, h2, h3 { font-family: Marcellus, Georgia, serif; font-weight: 400; color: var(--titre); margin: 0 0 .5em; }
h1 { font-size: 30px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }

a { color: var(--lien); }

[hidden] { display: none !important; }

.plein-ecran {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background: linear-gradient(180deg, var(--spruce-deep), var(--spruce));
  color: var(--on-spruce);
}

.carte {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 22px;
  color: var(--ink);
}

.carte-connexion { width: min(100%, 400px); display: grid; gap: 14px; }
.carte-connexion h1 { margin: 6px 0 0; }

.marque { display: flex; align-items: center; gap: 12px; }
.marque strong {
  display: block; font-family: Marcellus, Georgia, serif; font-weight: 400; font-size: 17px; line-height: 1.15;
}
.marque span {
  display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--bronze);
}

label { display: grid; gap: 6px; font-weight: 500; font-size: 14px; }
input, select, textarea {
  font: inherit; color: var(--ink);
  border: 1px solid var(--line); border-radius: 6px;
  padding: 9px 11px; background: var(--champ); width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--sage); outline-offset: 1px; border-color: var(--sage);
}
textarea { min-height: 84px; resize: vertical; }
.aide { font-size: 12px; font-weight: 400; color: var(--ink-soft); }

.bouton {
  font: inherit; font-weight: 600; cursor: pointer;
  border: 1px solid var(--line); border-radius: 6px;
  padding: 9px 16px; background: var(--card); color: var(--titre);
}
.bouton:hover { border-color: var(--sage); }
.bouton.principal { background: var(--principal); color: var(--on-spruce); border-color: var(--principal); }
.bouton.principal:hover { background: var(--principal-survol); }
.bouton.laiton { background: var(--bronze); color: var(--sur-accent); border-color: var(--bronze); }
.bouton.laiton:hover { background: var(--bronze-deep); }
.bouton.lien { background: none; border: none; padding: 4px 0; color: var(--bronze); font-weight: 500; }
.bouton.petit { padding: 5px 10px; font-size: 13px; }
.bouton.danger { color: var(--rouge); }
.bouton:disabled { opacity: .55; cursor: default; }

.erreur { color: var(--rouge); margin: 0; font-size: 14px; }

#application { display: grid; grid-template-columns: var(--largeur-barre) 1fr; min-height: 100vh; }

.barre-laterale {
  background: var(--barre);
  border-right: 1px solid var(--line-soft);
  color: var(--on-spruce);
  padding: 22px 18px;
  display: flex; flex-direction: column; gap: 22px;
  position: sticky; top: 0; height: 100vh;
}
.barre-laterale .marque strong { color: var(--on-spruce); }

#navigation { display: grid; gap: 4px; }
#navigation a {
  color: var(--on-spruce-soft); text-decoration: none;
  padding: 9px 12px; border-radius: 6px; font-weight: 500;
}
#navigation a:hover { background: rgba(255,255,255,.06); color: var(--on-spruce); }
#navigation a.active { background: rgba(165,128,76,.22); color: var(--on-spruce); }

.session { margin-top: auto; display: grid; gap: 6px; font-size: 13px; color: var(--on-spruce-soft); }
.lien-compte {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin: 0 -10px;
  border-radius: 8px; text-decoration: none; color: var(--on-spruce);
}
.lien-compte:hover { background: rgba(255,255,255,.06); }
.lien-compte.active { background: rgba(165,128,76,.22); }
.initiales {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; background: var(--bronze); color: var(--sur-accent);
  font-weight: 600; font-size: 13px; letter-spacing: .04em;
}
.texte-compte { display: grid; min-width: 0; }
.texte-compte strong { font-weight: 600; font-size: 14px; }
#session-detail {
  font-size: 12px; color: var(--on-spruce-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.contenu { padding: 30px 36px; max-width: 1200px; width: 100%; }

.entete-vue {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 20px;
}
.entete-vue p { margin: 0; color: var(--ink-soft); }
.entete-vue .actions { display: flex; gap: 8px; flex-wrap: wrap; }

.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 24px; }
.tuile { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; }
.tuile .valeur { font-family: Marcellus, Georgia, serif; font-size: 34px; line-height: 1; color: var(--titre); }
.tuile .valeur.argent { font-size: 26px; font-variant-numeric: tabular-nums; }
a.tuile { text-decoration: none; color: inherit; }
a.tuile:hover { border-color: var(--sage); }
.tuile .libelle { font-size: 13px; color: var(--ink-soft); margin-top: 6px; }
.tuile.alerte .valeur { color: var(--rouge); }
.tuile.bientot .valeur { color: var(--ambre); }

.filtres { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.filtres select, .filtres input { width: auto; min-width: 160px; }

.tableau {
  width: 100%; border-collapse: collapse; background: var(--card);
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
}
.tableau th, .tableau td {
  text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: top;
}
.tableau th {
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 600; background: var(--entete-tableau);
}
.tableau tr:last-child td { border-bottom: none; }
.tableau tbody tr:hover { background: var(--survol); }
.tableau .actions-ligne { white-space: nowrap; display: flex; gap: 6px; }
.tableau .secondaire { display: block; font-size: 13px; color: var(--ink-soft); }
.tableau-defilant { overflow-x: auto; }

.badge {
  display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.badge.retard { background: var(--badge-retard); color: var(--rouge); }
.badge.jour { background: var(--badge-bientot); color: var(--texte-bientot); }
.badge.semaine { background: var(--badge-bientot); color: var(--texte-bientot); }
.badge.mois { background: var(--badge-mois); color: var(--bronze-deep); }
.badge.plus-tard { background: var(--badge-neutre); color: var(--ink-soft); }
.badge.a-confirmer { background: var(--badge-neutre); color: var(--ink-soft); border: 1px dashed var(--line); }
.badge.fait { background: var(--badge-fait); color: var(--vert); }
h1 .badge { vertical-align: middle; font-family: "Public Sans", system-ui, sans-serif; margin-left: 6px; }

.vide {
  background: var(--card); border: 1px dashed var(--line); border-radius: 10px;
  padding: 26px; text-align: center; color: var(--ink-soft);
}

.bloc {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 20px 22px; margin-bottom: 18px;
}
.bloc h2 { margin-bottom: 10px; }
.bloc p { margin: 0 0 10px; color: var(--ink-soft); }
.bloc ul { margin: 0; padding-left: 20px; color: var(--ink-soft); }
.bloc .formulaire { display: grid; gap: 12px; max-width: 520px; }

dialog {
  border: none; border-radius: 12px; padding: 0;
  width: min(96vw, 640px); background: var(--card); color: var(--ink);
  box-shadow: 0 20px 60px var(--ombre);
}
dialog::backdrop { background: rgba(19,41,33,.55); }
dialog form { padding: 24px; display: grid; gap: 14px; }
#dialogue-champs { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
#dialogue-champs label.large { grid-column: 1 / -1; }
dialog .actions { display: flex; justify-content: flex-end; gap: 8px; }

.message {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: var(--spruce); color: var(--on-spruce);
  padding: 11px 18px; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.25);
  max-width: min(92vw, 560px); z-index: 50;
}
.message.erreur { background: var(--rouge); color: var(--sur-accent); }

@media (max-width: 860px) {
  #application { grid-template-columns: 1fr; }
  .barre-laterale { position: static; height: auto; padding: 14px 16px; gap: 12px; }
  #navigation { display: flex; flex-wrap: wrap; gap: 4px; }
  #navigation a { padding: 7px 10px; font-size: 14px; }
  .session { margin-top: 0; }
  .contenu { padding: 18px 16px; }
  #dialogue-champs { grid-template-columns: 1fr; }
}

/* Documentation en arborescence */
.fil { margin: 0 0 6px; font-size: 14px; color: var(--ink-soft); }
.fil a { color: var(--lien); text-decoration: none; font-weight: 500; }
.fil a:hover { color: var(--bronze); }
.fil span { margin: 0 6px; color: var(--line); }
.tableau a.dossier { color: var(--lien); text-decoration: none; font-weight: 600; }
.tableau a.dossier:hover { color: var(--bronze); }

/* Remplace les styles en ligne (politique de sécurité sans 'unsafe-inline') */
.actions-en-ligne { display: flex; gap: 8px; flex-wrap: wrap; }
.espace-haut { margin-top: 18px; }
.espace-haut-petit { margin-top: 14px; }

/* Fenêtres : texte explicatif, avec un titre de section facultatif */
.texte-dialogue { grid-column: 1 / -1; margin: 0; color: var(--ink-soft); }
.texte-dialogue strong {
  display: block; margin: 8px 0 2px; font-family: Marcellus, Georgia, serif; font-weight: 400;
  font-size: 18px; color: var(--titre);
}

/* Facturation */
.tableau .nombre { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.grille-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.grille-champs label.large { grid-column: 1 / -1; }
.lignes-facture td { vertical-align: middle; }
.lignes-facture input { padding: 7px 9px; }
.lignes-facture .col-description { min-width: 260px; }
.lignes-facture .col-categorie select { padding: 7px 9px; min-width: 190px; }
.lignes-facture .col-nombre input { width: 110px; text-align: right; }
.lignes-facture .col-case { text-align: center; }
.lignes-facture input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--bronze); }
.pied-lignes {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-top: 14px;
}
.totaux { display: grid; gap: 4px; min-width: 260px; margin: 0; }
.totaux div { display: flex; justify-content: space-between; gap: 24px; }
.totaux dt { color: var(--ink-soft); }
.totaux dd { margin: 0; font-variant-numeric: tabular-nums; }
.totaux .total {
  border-top: 1px solid var(--line); padding-top: 6px; margin-top: 4px; font-weight: 700; color: var(--titre);
}
.totaux .solde dd { color: var(--bronze); font-weight: 700; }
.bloc.avis { border-color: var(--rouge); }
.bloc.avis h2 { color: var(--rouge); }

/* Mon compte */
.grille-compte {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; align-items: start;
}
.grille-compte .bloc { margin-bottom: 0; }
.deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choix-theme { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.option-theme {
  font: inherit; color: var(--ink); cursor: pointer; text-align: center;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card);
  padding: 10px; display: grid; gap: 6px;
}
.option-theme:hover { border-color: var(--sage); }
.option-theme.actif { border-color: var(--bronze); box-shadow: 0 0 0 1px var(--bronze); }
.option-theme strong { font-weight: 600; font-size: 14px; }
.apercu { display: block; height: 44px; border-radius: 6px; border: 1px solid var(--line); }
.apercu-clair { background: linear-gradient(90deg, #1D3A32 0 28%, #EFEDE4 28%); }
.apercu-sombre { background: linear-gradient(90deg, #0E1713 0 28%, #18231E 28%); }
.apercu-auto { background: linear-gradient(135deg, #EFEDE4 50%, #18231E 50%); }
.fiche { display: grid; gap: 10px; margin: 0; }
.fiche div { display: grid; grid-template-columns: 150px 1fr; gap: 12px; }
.fiche dt { color: var(--ink-soft); font-size: 13px; }
.fiche dd { margin: 0; overflow-wrap: anywhere; }

@media (max-width: 860px) {
  .deux-colonnes, .fiche div { grid-template-columns: 1fr; }
  .fiche div { gap: 2px; }
  .grille-compte { grid-template-columns: 1fr; }
  .lien-compte { margin: 0; }
  .session { grid-template-columns: 1fr auto; align-items: center; }
}

/* Double authentification : bandeau des administrateurs qui ne l'ont pas activée, code QR et clé à saisir.
   Le code QR garde ses modules noirs sur fond blanc dans les deux thèmes : les lecteurs l'exigent. */
.bandeau-securite {
  display: flex; align-items: center; justify-content: space-between; gap: 12px 18px; flex-wrap: wrap;
  margin-bottom: 18px; padding: 14px 18px; border: 2px solid var(--rouge); border-radius: 10px;
  background: var(--badge-retard); color: var(--ink);
}
.bandeau-securite strong { color: var(--rouge); font-size: 16px; }
.bandeau-securite p { margin: 2px 0 0; font-size: 14px; max-width: 70ch; }
.code-qr, .cle-secrete { grid-column: 1 / -1; margin: 0; text-align: center; }
.code-qr svg { display: inline-block; width: min(100%, 260px); height: auto; border-radius: 4px; }
.cle-secrete code {
  display: inline-block; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--champ); color: var(--ink); font: 600 15px/1.5 ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: .04em; overflow-wrap: anywhere; user-select: all;
}

/* Lien vers la politique de confidentialité (écran de connexion) */
.lien-politique { margin: 0; text-align: center; }
.lien-politique a { color: var(--ink-soft); }

/* Facture émise : la feuille (telle qu'imprimée) et le panneau de suivi */
.entete-facture { margin-bottom: 16px; }
.facture-disposition {
  display: grid; gap: 22px; align-items: start;
  grid-template-columns: minmax(0, 1fr) 330px; grid-template-areas: "feuille cote";
}
.facture-feuille { grid-area: feuille; min-width: 0; }
.facture-cote { grid-area: cote; display: grid; gap: 14px; position: sticky; top: 18px; }
.facture-cote .bloc { margin: 0; padding: 18px 20px; }
.facture-cote h2 { font-size: 19px; margin-bottom: 10px; }
.facture-cote .bloc p { margin: 0; }

.etat-facture { display: grid; gap: 14px; }
.etat-haut { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.etat-solde .aide { display: block; }
.etat-solde strong {
  display: block; font-family: Marcellus, Georgia, serif; font-weight: 400; font-size: 34px;
  line-height: 1.1; color: var(--titre); font-variant-numeric: tabular-nums;
}
.etat-retard .etat-solde strong { color: var(--rouge); }
.etat-payee .etat-solde strong { color: var(--vert); }
.etat-annulee .etat-solde strong { color: var(--ink-soft); text-decoration: line-through; }
.jauge {
  display: block; width: 100%; height: 8px; border: none; border-radius: 999px;
  overflow: hidden; background: var(--line-soft); -webkit-appearance: none; appearance: none;
}
.jauge::-webkit-progress-bar { background: var(--line-soft); border-radius: 999px; }
.jauge::-webkit-progress-value { background: var(--vert); border-radius: 999px; }
.jauge::-moz-progress-bar { background: var(--vert); border-radius: 999px; }
.fiche-compacte { gap: 6px; }
.fiche-compacte div { grid-template-columns: 1fr auto; gap: 12px; }
.fiche-compacte dd { text-align: right; font-variant-numeric: tabular-nums; }
.pile-actions { display: grid; gap: 8px; }
.pile-actions .bouton { width: 100%; text-align: center; }
.liste-compacte { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.liste-compacte li {
  display: grid; gap: 2px; padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); overflow-wrap: anywhere;
}
.liste-compacte li:last-child { border-bottom: none; padding-bottom: 0; }
.liste-compacte .ligne-principale {
  display: flex; justify-content: space-between; gap: 8px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.liste-compacte .bouton.lien { justify-self: start; }
.type-envoi {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--bronze);
}

/* La feuille garde les couleurs du papier, même en thème sombre, comme le PDF. */
.feuille {
  --f-encre: #1C2521; --f-doux: #4A564F; --f-epinette: #1D3A32; --f-laiton: #A5804C;
  --f-ligne: #DDD9CA; --f-fond: #F1EFE6; --f-tampon: #2F6B45;
  position: relative; overflow: hidden;
  background: #FFFEFA; color: var(--f-encre);
  border-radius: 6px; padding: 44px 48px 40px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 14px 36px rgba(19,41,33,.14);
  font-size: 13.5px; line-height: 1.5;
}
.feuille-entete { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.feuille-emetteur { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.feuille-logo { flex: none; width: 58px; height: 58px; margin: -6px 0 0 -6px; }
.feuille-emetteur strong {
  display: block; font-size: 19px; line-height: 1.25; font-weight: 700; color: var(--f-epinette);
}
.feuille-emetteur span, .feuille-client span, .feuille-titre span {
  display: block; font-size: 12.5px; color: var(--f-doux); overflow-wrap: anywhere;
}
.feuille .feuille-contact { margin-top: 6px; color: var(--f-encre); }
.feuille-titre { text-align: right; flex: none; }
.feuille .feuille-mot {
  font-size: 30px; line-height: 1.1; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--f-laiton); margin-bottom: 6px;
}
.feuille-client { margin-top: 30px; position: relative; }
/* Tampon « PAYÉE » d'une facture payée au complet, comme sur le PDF : incliné,
   double cadre, à droite du client. */
.feuille-tampon {
  position: absolute; right: 25%; top: -12px; transform: translateX(50%) rotate(-12deg); pointer-events: none;
  display: grid; justify-items: center; gap: 3px; padding: 12px 30px 11px;
  border: 3px solid var(--f-tampon); border-radius: 10px;
  outline: 1px solid var(--f-tampon); outline-offset: -8px;
  color: var(--f-tampon); opacity: .8; text-transform: uppercase; font-family: Helvetica, Arial, sans-serif;
}
/* (.feuille-client span donnerait sinon sa couleur grise et sa petite taille au tampon) */
.feuille .feuille-tampon span {
  font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: .18em; margin-right: -.18em; color: inherit;
}
.feuille .feuille-tampon small { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; color: inherit; }
/* Comme sur le PDF : le client garde la moitié gauche, le tampon est centré à 75 %. */
@media (min-width: 641px) {
  .feuille-client:has(.feuille-tampon) > :not(.feuille-tampon) { max-width: 50%; }
}
@media (max-width: 640px) {
  .feuille-tampon {
    position: static; width: max-content; margin: 0 0 16px 8px; transform: rotate(-6deg);
  }
  .feuille .feuille-tampon span { font-size: 30px; }
}
.feuille .feuille-etiquette {
  font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--f-laiton); margin-bottom: 2px;
}
.feuille-client strong { display: block; font-size: 15px; }
.feuille-lignes { width: 100%; border-collapse: collapse; margin-top: 24px; }
.feuille-lignes th {
  background: var(--f-epinette); color: #EDEAD9; font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; text-align: left; padding: 9px 10px;
}
.feuille-lignes td { padding: 10px; border-bottom: 1px solid var(--f-ligne); vertical-align: top; }
.feuille-lignes .nombre { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.feuille-note { color: var(--f-doux); font-size: 12px; }
.feuille-bas {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 24px; margin-top: 18px; flex-wrap: wrap-reverse;
}
.feuille-mentions { flex: 1 1 240px; font-size: 12px; color: var(--f-doux); }
.feuille-mentions p { margin: 0 0 8px; }
.feuille .totaux { min-width: 260px; }
.feuille .totaux dt { color: var(--f-doux); }
.feuille .totaux dd { color: var(--f-encre); }
.feuille .totaux .total { background: var(--f-fond); border-top: none; margin-top: 6px; padding: 8px 10px; }
.feuille .totaux .total dt, .feuille .totaux .total dd { color: var(--f-epinette); }
.feuille .totaux .solde dd { color: var(--f-laiton); }
.feuille-filigrane {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  font-size: 110px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(166, 75, 60, .13); transform: rotate(-24deg);
}
.multiligne { white-space: pre-line; }

/* Paramètres : case à cocher sur une ligne */
label.case { display: flex; align-items: center; gap: 10px; font-weight: 500; }
label.case input { width: 18px; height: 18px; flex: none; accent-color: var(--bronze); }
/* Groupe de cases d'un dialogue (ex. types d'emploi d'un poste) : plusieurs choix à la fois. */
fieldset.cases { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 6px; }
fieldset.cases legend { padding: 0; margin-bottom: 6px; font-weight: 500; font-size: 14px; }
.cases-options { display: flex; flex-wrap: wrap; gap: 8px 18px; }
#dialogue-champs fieldset.large { grid-column: 1 / -1; }

@media (max-width: 1180px) {
  .facture-disposition { grid-template-columns: 1fr; grid-template-areas: "cote" "feuille"; }
  .facture-cote { position: static; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
}
@media (max-width: 640px) {
  .feuille { padding: 24px 18px; }
  .feuille-entete { flex-direction: column; }
  .feuille-titre { text-align: left; }
  .feuille .totaux { min-width: 0; width: 100%; }
}

/* Taxes par trimestre : ligne de total de l'année */
.tableau .ligne-total td { font-weight: 700; border-top: 2px solid var(--line); background: var(--entete-tableau); }

/* Feuille : conditions, clause d'intérêts et bandeau fiscal (comme le PDF) */
.feuille-mentions .feuille-etiquette { display: block; margin: 0 0 4px; }
.feuille-mentions p + .feuille-etiquette { margin-top: 12px; }
.feuille .feuille-clause { color: var(--f-encre); }
.feuille-fiscal { margin-top: 22px; background: var(--f-fond); border-radius: 4px; padding: 10px 14px 12px; }
.feuille-fiscal .feuille-etiquette { display: block; font-size: 10px; margin-bottom: 4px; }
.feuille-fiscal div { display: flex; flex-wrap: wrap; gap: 6px 36px; font-size: 12.5px; }
.feuille-fiscal strong { color: var(--f-encre); margin-right: 4px; }

/* Tableau de bord : calendrier du mois et panneau de détail */
.cal-disposition {
  display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; align-items: start; margin-bottom: 18px;
}
.cal-bloc {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 16px 16px 12px; min-width: 0;
}
.cal-entete {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap;
}
.cal-entete h2 { margin: 0; }
.cal-nav { display: flex; gap: 6px; }
.cal-grille {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--line-soft);
  border-left: 1px solid var(--line-soft); border-radius: 6px; overflow: hidden;
}
.cal-jour-semaine {
  padding: 6px 8px; font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft); background: var(--entete-tableau);
  border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
}
.cal-case {
  cursor: pointer; min-height: 108px; min-width: 0; padding: 4px; display: flex; flex-direction: column;
  gap: 3px; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
}
.cal-case.hors-mois { background: var(--paper); }
.cal-case.hors-mois .cal-numero { color: var(--ink-soft); opacity: .6; }
.cal-case.choisi { box-shadow: inset 0 0 0 2px var(--bronze); }
.cal-numero {
  align-self: flex-start; width: 26px; height: 26px; border: none; border-radius: 50%;
  background: none; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink);
}
.cal-numero:hover { background: var(--survol); }
.cal-case.aujourdhui .cal-numero { background: var(--bronze); color: var(--sur-accent); }
.cal-element {
  display: block; width: 100%; min-width: 0; text-align: left; cursor: pointer;
  font: inherit; font-size: 12px; line-height: 1.3; color: var(--ink);
  padding: 3px 6px; border: none; border-left: 3px solid var(--line); border-radius: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--badge-neutre);
}
.cal-element:hover { filter: brightness(.97); }
.cal-element.etat-retard { background: var(--badge-retard); border-left-color: var(--rouge); }
.cal-element.etat-jour { background: var(--badge-bientot); border-left-color: var(--ambre); }
.cal-element.etat-venir { background: var(--badge-neutre); border-left-color: var(--principal); }
.cal-element.etat-facture { background: var(--badge-mois); border-left-color: var(--bronze); }
.cal-element.etat-prevu {
  background: transparent; border-left-style: dashed; border-left-color: var(--sage); color: var(--ink-soft);
}
.cal-element.etat-fait {
  background: var(--badge-fait); border-left-color: var(--vert); color: var(--ink-soft); text-decoration: line-through;
}
.cal-element.choisi { outline: 2px solid var(--bronze); outline-offset: 1px; }
.cal-element.large { white-space: normal; padding: 7px 9px; font-size: 13.5px; font-weight: 500; }
.cal-element.large span { display: block; font-size: 12px; font-weight: 400; color: var(--ink-soft); }
.cal-plus {
  align-self: flex-start; border: none; background: none; cursor: pointer; font: inherit;
  font-size: 11.5px; font-weight: 600; color: var(--lien); padding: 0 6px;
}
.cal-legende {
  display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 12px; color: var(--ink-soft);
}
.cal-legende span { display: inline-flex; align-items: center; gap: 6px; }
.pastille-etat {
  display: inline-block; width: 12px; height: 12px; border-radius: 3px;
  border-left: 3px solid var(--line); background: var(--badge-neutre);
}
.pastille-etat.etat-retard { background: var(--badge-retard); border-left-color: var(--rouge); }
.pastille-etat.etat-jour { background: var(--badge-bientot); border-left-color: var(--ambre); }
.pastille-etat.etat-venir { border-left-color: var(--principal); }
.pastille-etat.etat-facture { background: var(--badge-mois); border-left-color: var(--bronze); }
.pastille-etat.etat-prevu { background: transparent; border: 1px dashed var(--sage); }
.pastille-etat.etat-fait { background: var(--badge-fait); border-left-color: var(--vert); }

.cal-panneau { position: sticky; top: 18px; display: grid; gap: 14px; }
.cal-panneau .bloc { margin: 0; padding: 16px 18px; }
.cal-panneau h2 { font-size: 19px; margin-bottom: 10px; }
.cal-liste { display: grid; gap: 6px; }
.cal-ligne-a-venir { display: grid; gap: 2px; }
.detail-calendrier { display: grid; gap: 10px; }
.detail-calendrier h3 { margin: 0; font-size: 19px; }
.detail-calendrier .badge { justify-self: start; }
.detail-notes { margin: 0; font-size: 13.5px; color: var(--ink-soft); }
.liste-a-confirmer { list-style: none; padding: 0; display: grid; gap: 2px; }
.liste-a-confirmer .bouton.lien { text-align: left; color: var(--lien); }

@media (max-width: 1100px) {
  .cal-disposition { grid-template-columns: 1fr; }
  .cal-panneau { position: static; }
}
@media (max-width: 640px) {
  .cal-case { min-height: 60px; padding: 2px; gap: 2px; }
  .cal-jour-semaine { padding: 4px 2px; text-align: center; font-size: 10px; letter-spacing: 0; }
  .cal-numero { width: 22px; height: 22px; font-size: 11.5px; }
  /* Sur téléphone, chaque élément devient une barre de couleur ; le détail s'ouvre sous le calendrier. */
  .cal-case .cal-element { font-size: 0; height: 12px; padding: 0; border-left: none; }
  .cal-case .cal-element.etat-retard { background: var(--rouge); }
  .cal-case .cal-element.etat-jour { background: var(--ambre); }
  .cal-case .cal-element.etat-venir { background: var(--principal); }
  .cal-case .cal-element.etat-facture { background: var(--bronze); }
  .cal-case .cal-element.etat-prevu { background: var(--sage); opacity: .6; }
  .cal-case .cal-element.etat-fait { background: var(--vert); opacity: .6; }
  .cal-plus { font-size: 10px; padding: 0 2px; }
}
.bloc-retard { border-color: var(--rouge); }
.bloc-retard h2 { color: var(--rouge); }

/* ---------- statistiques du site (graphiques en SVG, couleurs par classes) ---------- */
.titre-section { margin: 26px 0 12px; }
.titre-section .secondaire { font-size: 14px; color: var(--ink-soft); font-family: inherit; }
.tuile .ecart {
  display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
}
.ecart { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ecart.hausse { color: var(--vert); background: color-mix(in srgb, var(--vert) 14%, transparent); }
.ecart.baisse { color: var(--rouge); background: color-mix(in srgb, var(--rouge) 14%, transparent); }
.ecart.neutre { color: var(--ink-soft); }
.graphique { display: block; width: 100%; height: auto; }
.graphique .grille { stroke: var(--line-soft); stroke-width: 1; }
.graphique .axe { fill: var(--ink-soft); font-size: 11px; font-family: inherit; }
.graphique .courbe { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.graphique .serie-a, .legende.serie-a::before { stroke: var(--bronze); background: var(--bronze); }
.graphique .serie-b, .legende.serie-b::before { stroke: var(--vert); background: var(--vert); }
.legendes { display: flex; gap: 18px; margin-top: 8px; font-size: 13px; color: var(--ink-soft); }
.legende::before {
  content: ""; display: inline-block; width: 14px; height: 3px;
  border-radius: 2px; margin-right: 6px; vertical-align: middle;
}
.grille-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0 18px; }
.barres { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bloc ul.barres { padding: 0; }
.barres li {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(60px, 1fr) auto;
  gap: 10px; align-items: center; font-size: 13px;
}
.barre-libelle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.barre { width: 100%; height: 8px; display: block; }
.barre .barre-fond { fill: var(--line-soft); }
.barre .barre-valeur { fill: var(--bronze); }
.barre-nombre { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.barre-nombre .secondaire { color: var(--ink-soft); margin-left: 6px; font-size: 12px; }
.tableau td.nombre { text-align: right; font-variant-numeric: tabular-nums; }
.conseils ol { padding-left: 20px; margin: 0; display: grid; gap: 12px; }
.conseils li p { margin: 4px 0 0; }
.etapes { color: var(--ink-soft); display: grid; gap: 8px; }
.liens-rapports { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- registre des incidents ---------- */
/* Fiche d'un incident et registre complet : feuilles « papier » comme la facture
   (palette --f-*, même en thème sombre), imprimées seules (@media print ci-dessous). */
.feuille .registre-incident { margin-top: 26px; }
.feuille .registre-incident h2 {
  margin: 0; padding-bottom: 6px; border-bottom: 2px solid var(--f-laiton);
  font-family: inherit; font-size: 16px; font-weight: 700; color: var(--f-epinette);
}
.feuille-rubriques { margin: 0; }
.feuille-rubriques > div {
  display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 14px;
  padding: 8px 0; border-bottom: 1px solid var(--f-ligne);
}
.feuille-rubriques dt { font-weight: 700; color: var(--f-epinette); }
.feuille-rubriques dd { margin: 0; overflow-wrap: anywhere; }
.feuille-rubriques dd p { margin: 0 0 6px; }
.feuille-rubriques dd p:last-child { margin-bottom: 0; }
.feuille .feuille-renvoi { display: block; font-size: 11px; font-weight: 400; color: var(--f-doux); }
.feuille-rappel {
  margin-top: 22px; background: var(--f-fond); border-radius: 4px; padding: 10px 14px;
  font-size: 12px; color: var(--f-doux);
}
.feuille-rappel p { margin: 0 0 4px; }
.feuille-rappel p:last-child { margin-bottom: 0; }
@media (max-width: 640px) {
  .feuille-rubriques > div { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- impression d'une feuille (facture, incident, registre) ---------- */
/* Toute page qui contient une .feuille n'imprime que ses feuilles (couleurs et
   tampon compris) : le menu, le panneau de suivi et les boutons disparaissent.
   Rien ne s'imprime quand l'espace est masqué (inactivité). */
@media print {
  @page { margin: 14mm; }
  :root:has(#application:not([hidden]) .feuille) { color-scheme: light; }
  body:has(#application:not([hidden]) .feuille) { background: #FFFFFF; }
  body:has(#application:not([hidden]) .feuille) *:not(:has(.feuille)):not(.feuille):not(.feuille *) {
    display: none !important;
  }
  body:has(#application:not([hidden]) .feuille) *:has(.feuille) {
    display: block !important; position: static !important; width: auto !important; max-width: none !important;
    margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important;
    background: none !important; overflow: visible !important;
  }
  body:has(#application:not([hidden]) .feuille) .feuille { box-shadow: none; border-radius: 0; padding: 0; }
  .feuille .tableau-defilant { overflow: visible; }
  .feuille, .feuille * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .feuille-client:has(.feuille-tampon) > :not(.feuille-tampon) { max-width: 50%; }
  .feuille-tampon { position: absolute; right: 25%; transform: translateX(50%) rotate(-12deg); }
  /* Incidents : sur plusieurs pages, coupées entre deux rubriques, jamais sous un titre ; dans le
     registre, un incident qui tient sur une page n'est pas coupé. Pas sur la fiche seule : la
     section entière passerait à la page 2, laissant l'en-tête seul sur la page 1. */
  .feuille-registre, .feuille-incident { overflow: visible; }
  .feuille-rubriques > div { break-inside: avoid; }
  .feuille .registre-incident h2 { break-after: avoid; }
  .feuille-registre .registre-incident { break-inside: avoid; }
}