/* Mise en page propre à la maquette — s'appuie sur charte/variables.css et charte/composants.css */
main { max-width: var(--largeur-max); margin: 0 auto; padding: var(--e-6) var(--gouttiere) 120px; }
main:focus { box-shadow: none; }
.bandeau { flex-wrap: wrap; }
.bandeau__scenario { display: flex; align-items: center; gap: var(--e-2); font-weight: var(--graisse-titre); }
.bandeau__scenario select, .outils select, .tableau select {
  font: inherit; font-size: var(--taille-s); min-height: 30px; background: var(--fond); color: var(--texte);
  border: var(--trait) solid var(--trait-champ); border-radius: var(--rayon); padding: 0 var(--e-1);
}
.entete-ecran { display: flex; align-items: baseline; gap: var(--e-4); flex-wrap: wrap; margin-bottom: var(--e-4); }
.entete-ecran h1 { margin: 0; }
.contexte { color: var(--texte-secondaire); font-size: var(--taille-s); }
.deux-colonnes { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: var(--e-8); align-items: start; }
@media (max-width: 900px) { .deux-colonnes { grid-template-columns: 1fr; } }
.effets { position: sticky; top: var(--e-4); border-top: var(--trait-fort) solid var(--trait-accent); padding-top: var(--e-3); }
.effets dl { display: grid; grid-template-columns: 1fr auto; gap: var(--e-2) var(--e-4); margin: 0; font-size: var(--taille-s); }
.effets dd { margin: 0; text-align: right; }
fieldset { border: none; border-top: var(--trait) solid var(--trait-discret); padding: var(--e-4) 0 0; margin: 0 0 var(--e-6); }
legend { font-weight: var(--graisse-titre); font-size: var(--taille-l); padding-right: var(--e-2); }
.grille-champs { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--e-4) var(--e-6); }
.tableau-defile { overflow-x: auto; }
.tableau td.cellule-saisie .saisie, .tableau td.cellule-saisie select { width: 100%; min-width: 64px; }
.tableau td.cellule-saisie select { min-height: 30px; }
.tableau .calc { transition: color .15s; }
body.en-attente .calc { color: var(--texte-secondaire); }
body.en-attente .calc::after { content: " …"; }
.statut-ligne { min-height: 24px; margin: var(--e-2) 0; font-size: var(--taille-s); }
.synthese-grille { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-6); font-size: var(--taille-s); margin-bottom: var(--e-4); }
.filtres { display: flex; gap: var(--e-4); align-items: center; margin-bottom: var(--e-3); font-size: var(--taille-s); }
.btn--petit { min-height: 28px; padding: 0 var(--e-2); font-size: var(--taille-xs); }
.rubrique td { font-weight: var(--graisse-titre); padding-top: var(--e-3); border-bottom: var(--trait) solid var(--trait-accent); }
.tableau tr.actif td, .tableau th.actif { background: var(--surface-selection); }
.tableau th.actif { box-shadow: inset 0 -3px 0 var(--selection-trait); color: var(--texte); }

/* Panneau latéral (détail d'un lot) */
.panneau { position: fixed; top: 0; right: 0; bottom: 0; width: min(600px, 100vw); background: var(--fond); z-index: 20;
  border-left: var(--trait-fort) solid var(--trait-accent); overflow-y: auto; padding: var(--e-6); border-radius: var(--rayon) 0 0 var(--rayon); box-shadow: -8px 0 24px rgba(36,34,32,.12); }
.panneau h2 { margin-bottom: var(--e-1); }
.panneau .onglets { display: flex; gap: var(--e-1); border-bottom: var(--trait) solid var(--trait-discret); margin: var(--e-4) 0; }
.panneau .onglets button { font: inherit; font-weight: var(--graisse-titre); font-size: var(--taille-s); background: none; border: none;
  border-bottom: 3px solid transparent; padding: var(--e-2) var(--e-3); color: var(--texte); cursor: pointer; }
.panneau .onglets button[aria-selected="true"] { border-bottom-color: var(--bleu-mineral); }
.calcul-prix { width: 100%; border-collapse: collapse; font-size: var(--taille-s); }
.calcul-prix td { padding: var(--e-1) 0; border-bottom: var(--trait) solid var(--trait-discret); }
.calcul-prix td:last-child { text-align: right; }
.calcul-prix tr.total td { font-weight: var(--graisse-titre); border-bottom: var(--trait-fort) solid var(--trait-accent); }
.famille { margin: var(--e-4) 0; }
.famille summary { cursor: pointer; display: flex; justify-content: space-between; gap: var(--e-4); font-weight: var(--graisse-titre); padding: var(--e-2) 0; border-bottom: var(--trait) solid var(--trait-discret); }
.jauge { height: 6px; background: var(--surface-survol); margin-top: var(--e-1); }
.jauge span { display: block; height: 100%; background: var(--granit); }
.critere { display: grid; grid-template-columns: 1fr 110px; gap: var(--e-1) var(--e-3); padding: var(--e-2) 0; border-bottom: var(--trait) solid var(--trait-discret); font-size: var(--taille-s); }
.critere .detail { grid-column: 1 / -1; color: var(--texte-secondaire); font-size: var(--taille-xs); }
.score-tete { display: flex; align-items: baseline; gap: var(--e-4); flex-wrap: wrap; }

/* Fenêtre modale (figer une version, versions) */
.fenetre { position: fixed; inset: 0; background: rgba(36,34,32,.45); z-index: 30; display: grid; place-items: center; }
.fenetre[hidden] { display: none; }
.fenetre > div { background: var(--fond); padding: var(--e-6); width: min(560px, 92vw); border-radius: var(--rayon); max-height: 86vh; overflow-y: auto; }

/* Outils de maquette */
.outils { border-radius: var(--rayon); position: fixed; left: var(--e-4); bottom: var(--e-4); background: var(--fond); border: var(--trait) dashed var(--trait-champ);
  padding: var(--e-2) var(--e-3); font-size: var(--taille-s); max-width: 320px; z-index: 15; }
.outils[open] { display: grid; gap: var(--e-2); }
.outils summary { cursor: pointer; font-weight: var(--graisse-titre); }
.outils label { display: flex; gap: var(--e-2); align-items: center; }

/* Grille : largeurs compactes, montants sur une ligne */
#grille-lots td.num, #grille-lots th { white-space: nowrap; }
#grille-lots td.cellule-saisie .saisie { width: 76px; min-width: 0; }
#grille-lots td.cellule-saisie select { width: auto; min-width: 0; }
#grille-lots td.cellule-saisie .message-erreur { display: block; white-space: normal; max-width: 220px; font-size: var(--taille-xs); }

.tableau td.num { white-space: nowrap; }

/* R-01 : saisie rapide de l'habitabilité */
.onglets-grille { display: flex; gap: var(--e-1); border-bottom: var(--trait) solid var(--trait-discret); margin: var(--e-2) 0 var(--e-4); }
.onglets-grille button { font: inherit; font-weight: var(--graisse-titre); font-size: var(--taille-s); background: none; border: none;
  border-bottom: 3px solid transparent; padding: var(--e-2) var(--e-3); color: var(--texte); cursor: pointer; display: flex; gap: var(--e-2); align-items: center; }
.onglets-grille button[aria-selected="true"] { border-bottom-color: var(--bleu-mineral); }
.barre-recopie { border-radius: var(--rayon); display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; padding: var(--e-2) var(--e-3); border: var(--trait) solid var(--trait-discret);
  border-left: 4px solid var(--bleu-mineral); font-size: var(--taille-s); margin-bottom: var(--e-2); min-height: 44px; }
.tableau-hab th { text-transform: none; letter-spacing: 0; text-align: center; font-size: var(--taille-xs); }
.tableau-hab td.cellule-saisie .saisie { width: 58px; min-width: 0; padding: 0 var(--e-1); }
.tableau-hab td.cellule-saisie select { width: 62px; }
.tableau-hab .colle { position: sticky; left: 0; background: var(--fond); z-index: 1; }
.tableau-hab tbody tr:hover .colle { background: var(--surface-survol); }
.tableau-hab td.sans-objet { text-align: center; color: var(--texte-secondaire); background: var(--surface-survol); }
.tableau-hab td.estimee .saisie, .tableau-hab td.estimee select { border-style: dashed; background: var(--surface-survol); }
.echantillon-estimee { border: var(--trait) dashed var(--trait-champ); background: var(--surface-survol); padding: 0 var(--e-1); }
abbr { text-decoration: none; }

.tableau td.chemin { font-family: var(--police-mesure); font-weight: var(--graisse-mesure); font-size: var(--taille-xs); max-width: 520px; }  /* tout chiffre en IBM Plex Mono (charte p. 17) */
.tableau td.chemin a { color: var(--lien); }

/* Dashboard (prompt 13) */
.contexte-dashboard { border-radius: var(--rayon); font-size: var(--taille-s); border-left: 4px solid var(--bleu-mineral); padding: var(--e-2) var(--e-3); background: var(--surface-survol); max-width: none; }
.titre-groupe { margin-top: var(--e-8); }
.detail-indic { margin-top: var(--e-2); font-size: var(--taille-xs); }
.detail-indic summary { cursor: pointer; color: var(--lien); text-decoration: underline; }
.detail-indic dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--e-1) var(--e-3); margin: var(--e-2) 0; }
.detail-indic dt { font-weight: var(--graisse-titre); }
.detail-indic dd { margin: 0; }
.decision .detail-indic summary, .decision a { color: var(--kaolin); }

/* Hypothèses regroupées (prompt 15) — deux blocs côte à côte, lignes compactes (DEC-024) */
.groupes-hyp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); align-items: start; margin-top: var(--e-4); }
@media (max-width: 1100px) { .groupes-hyp { grid-template-columns: 1fr; } }
.groupe-hyp { border: var(--trait) solid var(--trait-discret); border-radius: var(--rayon); padding: var(--e-2) var(--e-3); background: var(--fond); }
.groupe-hyp > summary { cursor: pointer; padding: var(--e-1) 0; list-style-position: inside; display: list-item; }
.groupe-hyp > summary:focus-visible { outline: 2px solid var(--bleu-mineral); outline-offset: 2px; }
.groupe-hyp__titre { font-weight: 600; }
.groupe-hyp .grille-champs { display: grid; grid-template-columns: 1fr; gap: 0; }
.groupe-hyp[open] > .grille-champs { margin-top: var(--e-2); border-top: var(--trait) solid var(--trait-discret); }
.groupe-hyp .champ { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--e-3); row-gap: 0;
  padding: 3px 0; border-bottom: var(--trait) solid var(--trait-discret); }
.groupe-hyp .champ:last-child { border-bottom: none; }
.groupe-hyp .champ label { font-weight: var(--graisse-texte); line-height: 1.25; }
.groupe-hyp .champ .saisie, .groupe-hyp .champ select { min-height: 30px; width: 112px; }
.groupe-hyp .champ__ligne { gap: var(--e-1); }
.groupe-hyp .champ .unite { width: 76px; font-size: var(--taille-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.groupe-hyp .champ .etat { grid-column: 1 / -1; text-align: right; white-space: normal; }
.groupe-hyp .champ .etat:empty { display: block; height: 0; }
.coherence { margin: var(--e-4) 0; }
.coherence ul { margin: var(--e-2) 0 0; padding-left: var(--e-6); }
.coherence li { margin-bottom: var(--e-2); }

/* Couleur et contraste (DEC-023) */
.synthese-grille.bloc--inverse { padding: var(--e-3) var(--e-4); margin: 0 0 var(--e-4); border-radius: var(--rayon); }
.effets.bloc--inverse { padding: var(--e-4); border-top: none; border-radius: var(--rayon); }
/* damier sur deux colonnes : 1 clair · 2 sombre / 3 sombre · 4 clair … ; sur une colonne : un sur deux */
.groupe-hyp.sombre { background: var(--granit); color: var(--kaolin); border-color: var(--granit);
  --fond: var(--granit); --texte: var(--kaolin); --texte-secondaire: #B8B3A9; --trait-champ: #8C8881; --trait-discret: #4A4743; --trait-accent: #8C8881;
  --surface-survol: #34312D; --lien: #8FC1E3; --negatif: var(--rouge-clair); --positif: var(--vert-clair); --vigilance: var(--orange-clair); }
.tableau tfoot tr { background: var(--granit); color: var(--kaolin); --negatif: var(--rouge-clair); --positif: var(--vert-clair); --vigilance: var(--orange-clair); }
.tableau tfoot td { border-top: none; }
.coherence[role="alert"] { border-left-color: var(--orange); }
.message[role="alert"] { border-left-color: var(--rouge); }

/* Trésorerie trimestrielle (DEC-025) */
.detail-trim { margin-top: var(--e-8); }
#t-postes td.cellule-saisie .saisie { width: 130px; min-width: 0; }
#t-postes td.cellule-saisie { width: 150px; }
#t-trimestres th[scope="row"] { white-space: nowrap; }
#t-trimestres tr.actif th, #t-trimestres tr.actif td { background: var(--surface-selection); }

/* Documents (DEC-026) */
.depot { margin-top: var(--e-4); }
.depot__grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--e-3) var(--e-4); align-items: end; }
.depot input[type="file"] { font: inherit; font-size: var(--taille-s); color: var(--texte); max-width: 100%; }
.depot .saisie-select, .filtres select { font: inherit; font-size: var(--taille-s); min-height: 36px; background: var(--fond); color: var(--texte);
  border: var(--trait) solid var(--trait-champ); border-radius: var(--rayon); padding: 0 var(--e-2); width: 100%; }
.filtres select { width: auto; min-height: 30px; }
.champ--case label { display: flex; gap: var(--e-2); align-items: center; font-weight: var(--graisse-titre); font-size: var(--taille-s); }
.case { width: 20px; height: 20px; accent-color: var(--bleu-mineral); cursor: pointer; }
.case:disabled { cursor: not-allowed; }
#t-documents td { vertical-align: middle; padding-top: var(--e-1); padding-bottom: var(--e-1); }
#t-documents td.centre { text-align: center; }
#t-documents .doc-titre .saisie { width: 100%; min-width: 220px; text-align: left; font-family: var(--police-texte); font-weight: var(--graisse-texte); }
#t-documents td.cellule-saisie select { min-width: 120px; }
.apercu { width: 64px; }
.apercu img, .liste-docs img { width: 56px; height: 42px; object-fit: cover; border-radius: var(--rayon); display: block; border: var(--trait) solid var(--trait-discret); }
.vignette { display: inline-grid; place-items: center; width: 56px; height: 42px; border-radius: var(--rayon); background: var(--surface-survol);
  font-family: var(--police-mesure); font-size: var(--taille-xs); border: var(--trait) solid var(--trait-discret); }
.liste-docs { list-style: none; padding: 0; margin: var(--e-3) 0; display: grid; gap: var(--e-2); }
.liste-docs li { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--e-3); align-items: center; padding-bottom: var(--e-2); border-bottom: var(--trait) solid var(--trait-discret); }
.zone-depot { border: 2px dashed var(--trait-champ); border-radius: var(--rayon); padding: var(--e-4); }
.zone-depot.survol { border-color: var(--lien); background: var(--surface-survol); }
.zone-depot p { margin: 0 0 var(--e-2); }
.prepa { margin-top: var(--e-4); }
.prepa__outils { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-6); align-items: center; font-size: var(--taille-s); margin-bottom: var(--e-2); }
#t-prepa select { font: inherit; font-size: var(--taille-s); min-height: 30px; background: var(--fond); color: var(--texte); border: var(--trait) solid var(--trait-champ); border-radius: var(--rayon); }
#t-prepa .saisie { min-width: 200px; min-height: 30px; }
#t-prepa th[scope="row"] { font-weight: var(--graisse-texte); max-width: 240px; overflow-wrap: anywhere; }
#t-prepa td.centre { text-align: center; }

/* Bilan en blocs (DEC-027) */
.bloc-bilan { margin-top: var(--e-4); }
.bloc-bilan__tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-2) var(--e-6); margin-bottom: var(--e-3); }
.bloc-bilan__tete h2 { margin: 0; font-size: var(--taille-l); }
.bloc-bilan__total { font-family: var(--police-mesure); font-size: var(--taille-l); }
.bloc-bilan__tete a { margin-left: auto; font-size: var(--taille-s); }
.bloc-bilan .tableau th[scope="row"] { font-weight: var(--graisse-texte); }

/* Suivi commercial (DEC-027) */
.lien-etiquette { background: none; border: none; padding: 0; cursor: pointer; }
.vente-tete { display: flex; gap: var(--e-4); align-items: center; margin-bottom: var(--e-3); font-size: var(--taille-s); }
.etapes-vente { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 0; margin: 0 0 var(--e-4); }
.etapes-vente li { display: grid; gap: 2px; padding: var(--e-2); border-radius: var(--rayon); border: var(--trait) solid var(--trait-discret); font-size: var(--taille-xs); font-weight: var(--graisse-titre); }
.etapes-vente li.fait { background: var(--surface-survol); }
.etapes-vente li.courant { background: var(--granit); color: var(--kaolin); border-color: var(--granit); }
.etapes-vente li.courant .secondaire { color: #D9D4CA; }
.changer-statut { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-2) var(--e-3); align-items: end; border: var(--trait) solid var(--trait-discret); border-radius: var(--rayon); padding: var(--e-3); margin-bottom: var(--e-4); }
.changer-statut legend { font-size: var(--taille-s); padding: 0 var(--e-1); }
.changer-statut .etat { grid-column: 1 / -1; }
.indicateurs--compacts { grid-template-columns: repeat(3, 1fr); gap: var(--e-3); margin: var(--e-2) 0; }
.indicateurs--compacts .indicateur__valeur { font-size: var(--taille-l); }
.tableau--echeancier { font-size: var(--taille-xs); }
.tableau--echeancier td, .tableau--echeancier th { padding: var(--e-1); height: auto; vertical-align: top; }
.tableau--echeancier .encaissement { display: grid; gap: 4px; }
.tableau--echeancier { table-layout: auto; width: 100%; }
.tableau--echeancier th { text-transform: none; letter-spacing: 0; }
.tableau--echeancier th[scope="row"] { font-weight: var(--graisse-texte); }
.tableau--echeancier .saisie { min-height: 28px; width: 96px; padding: 0 var(--e-1); font-size: var(--taille-xs); }
.champ[hidden] { display: none; }
.factures { margin-top: var(--e-8); }
.panneau h3 { margin: var(--e-4) 0 var(--e-1); font-size: var(--taille-m); }

/* Phases de l'opération et écarts entre budgets (DEC-030) */
.outils-ecarts { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e-4); margin: var(--e-4) 0; }
.choix-case { display: inline-flex; align-items: center; gap: var(--e-2); padding-bottom: var(--e-2); }
#t-ecarts .cellule-saisie input { width: 100%; min-width: 14rem; }
#t-ecarts tbody tr:nth-child(-n+3) th, #t-ecarts tbody tr:nth-child(-n+3) td { font-weight: var(--graisse-titre); }
#t-ecarts tbody tr:nth-child(3) td, #t-ecarts tbody tr:nth-child(3) th { border-bottom: 2px solid var(--trait-discret); }
#treso-ref + .secondaire { display: block; font-size: var(--taille-xs); margin-top: var(--e-1); }

/* ---------- écran Aide (guide des utilisateurs) ---------- */
.barre__aide { margin-left: var(--e-4); }
.aide { max-width: 52rem; }
.aide h1 { margin-bottom: var(--e-2); }
.aide h2 { margin-top: var(--e-6); }
.aide p, .aide li { line-height: 1.55; }
.aide ul, .aide ol { padding-left: 1.4em; }
.aide li + li { margin-top: var(--e-1); }
.aide table { margin: var(--e-3) 0; }
.aide hr { border: 0; border-top: var(--trait) solid var(--trait-discret); margin: var(--e-4) 0; }
.aide code { font-family: "IBM Plex Mono", monospace; font-size: .9em; }
.aide__sommaire { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: var(--e-3) 0 var(--e-4); }
.aide__sommaire button { font-size: var(--taille-s); }