:root {
  --texte: #1f2328; --discret: #656d76; --bord: #d8dce1; --fond: #f6f7f9;
  --accent: #1f3864; --rouge: #a3262d; --rouge-clair: #fdecec;
  --vert: #1a6b46; --vert-clair: #e8f4ee; --ambre: #8a5a00; --ambre-clair: #fff5e0;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--fond); color: var(--texte);
  font: 15px/1.55 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
main { max-width: 1400px; margin: 0 auto; padding: 24px 20px 60px; }
h1 { font-size: 24px; font-weight: 600; margin: 0 0 18px; }
h2 { font-size: 17px; font-weight: 600; margin: 28px 0 10px; }
a { color: var(--accent); }

header { background: #fff; border-bottom: 1px solid var(--bord); }
nav {
  max-width: 1400px; margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; gap: 20px; height: 52px;
}
nav a { text-decoration: none; color: var(--texte); font-size: 14px; }
nav a:hover { color: var(--accent); }
nav .lien-deconnexion { background: none; border: none; padding: 0; margin: 0;
  font: inherit; font-size: 14px; color: var(--texte); cursor: pointer; }
nav .lien-deconnexion:hover { color: var(--accent); }
nav .marque { font-weight: 600; color: var(--accent); }
nav .pousse { margin-left: auto; color: var(--discret); font-size: 13px; }

table { width: 100%; border-collapse: collapse; background: #fff; font-size: 14px;
        border: 1px solid var(--bord); border-radius: 6px; overflow: hidden; }
th { text-align: left; background: #f0f2f5; font-weight: 600; font-size: 12px;
     text-transform: uppercase; letter-spacing: .03em; color: var(--discret); }
th, td { padding: 9px 12px; border-bottom: 1px solid var(--bord); vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
tr.retard td { background: var(--rouge-clair); }
tr.termine td { opacity: .55; }
tr.doute td { background: var(--ambre-clair); }
.nowrap { white-space: nowrap; }
.petit { font-size: 13px; }
.discret { color: var(--discret); font-size: 13px; }
.citation { max-width: 380px; font-style: italic; }

.chiffres { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0 8px; }
.carte { background: #fff; border: 1px solid var(--bord); border-radius: 6px;
         padding: 14px 18px; min-width: 130px; display: flex; flex-direction: column; }
.carte .nombre { font-size: 26px; font-weight: 600; }
.carte span:last-child { font-size: 12px; color: var(--discret); }
.carte.rouge .nombre { color: var(--rouge); }

.etiquette { display: inline-block; padding: 2px 9px; border-radius: 11px;
             font-size: 12px; white-space: nowrap; background: #eceff3; }
.s-a_faire { background: #eceff3; }
.s-en_cours { background: #e4edfa; color: #14457c; }
.s-attente_tiers { background: var(--ambre-clair); color: var(--ambre); }
.s-traitee { background: var(--vert-clair); color: var(--vert); }
.s-sans_suite { background: #eceff3; color: var(--discret); }
.i-termine { background: var(--vert-clair); color: var(--vert); }
.i-erreur { background: var(--rouge-clair); color: var(--rouge); }
.i-en_cours, .i-en_attente { background: #e4edfa; color: #14457c; }

.puce { display: inline-block; padding: 1px 7px; border-radius: 9px; font-size: 11px;
        margin-left: 5px; }
.puce.alerte { background: var(--rouge-clair); color: var(--rouge); }
.puce.doute { background: var(--ambre-clair); color: var(--ambre); }

.bandeau { padding: 11px 14px; border-radius: 6px; font-size: 14px; margin: 12px 0; }
.bandeau.action { background: #e4edfa; color: #14457c; }
.bandeau.alerte { background: var(--rouge-clair); color: var(--rouge); }
.bandeau.ok { background: var(--vert-clair); color: var(--vert); }
.erreur { color: var(--rouge); }

input, select, textarea, button { font: inherit; }
input[type=text], input[type=email], input[type=password], input[type=date],
input[type=search], select, textarea {
  padding: 7px 9px; border: 1px solid var(--bord); border-radius: 5px;
  background: #fff; max-width: 100%;
}
textarea { width: 100%; resize: vertical; }
button { padding: 8px 15px; background: var(--accent); color: #fff; border: none;
         border-radius: 5px; cursor: pointer; }
button:hover { opacity: .9; }
label { display: block; margin-bottom: 10px; font-size: 13px; color: var(--discret); }
label input, label select { display: block; margin-top: 4px; width: 100%; }
.ligne { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.ligne label { margin: 0; }
.filtres { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.filtres label.case { display: flex; align-items: center; gap: 5px; margin: 0; }
.filtres label.case input { width: auto; margin: 0; }

.encadre { background: #fff; border: 1px solid var(--bord); border-radius: 6px;
           padding: 18px; margin-bottom: 22px; }
.connexion { max-width: 340px; margin: 90px auto; background: #fff; padding: 28px;
             border: 1px solid var(--bord); border-radius: 6px; }
.connexion button { width: 100%; margin-top: 8px; }

.colonnes { display: grid; grid-template-columns: 1.35fr 1fr; gap: 26px; align-items: start; }
@media (max-width: 900px) { .colonnes { grid-template-columns: 1fr; } }
aside { background: #fff; border: 1px solid var(--bord); border-radius: 6px; padding: 18px; }
aside h2:first-child { margin-top: 0; }
dl { margin: 0; font-size: 13px; }
dt { color: var(--discret); margin-top: 9px; font-size: 12px; }
dd { margin: 1px 0 0; }
blockquote { margin: 0; padding: 10px 13px; background: var(--fond);
             border-left: 3px solid var(--bord); font-style: italic; font-size: 13px; }

.journal { list-style: none; padding: 0; margin: 14px 0 0; }
.journal li { border-left: 2px solid var(--bord); padding: 0 0 12px 13px; margin-bottom: 4px; }
.journal li p { margin: 3px 0 0; font-size: 14px; }
.fil { font-size: 13px; color: var(--discret); margin: 0 0 6px; }
table.validation td { font-size: 13px; }

.progression { background:#fff; border:1px solid var(--bord); border-radius:6px;
               padding:14px 16px; margin:12px 0; }
.progression-entete { display:flex; justify-content:space-between; align-items:baseline;
                      margin-bottom:8px; font-size:14px; }
.jauge { height:9px; background:#e6e9ed; border-radius:5px; overflow:hidden; }
.jauge-remplie { height:100%; background:var(--accent); border-radius:5px;
                 transition:width .5s ease; }
.progression p { margin:8px 0 0; }
table.validation input[type=text] { width:100%; font-size:13px; padding:5px 7px; }
table.validation input[type=date] { font-size:13px; padding:4px 6px; }
table.validation select { font-size:13px; padding:4px 6px; max-width:150px; }
table.validation td { vertical-align:top; }
.sous-titre { font-size:15px; font-weight:600; margin:22px 0 8px; }

nav .marque { display:flex; align-items:center; gap:9px; }
.logo { height:26px; width:auto; display:block; }
.logo-connexion { display:block; max-height:52px; max-width:180px; margin:0 auto 18px; }
footer { max-width:1400px; margin:0 auto; padding:0 20px 26px;
         color:var(--discret); font-size:12px; }
.version { text-align:center; color:var(--discret); font-size:12px; margin:16px 0 0; }
.rapport { font-size:13px; line-height:1.6; }

.colonnes section > h2:first-child { margin-top: 0; }
.colonnes section blockquote { padding: 13px 16px; font-size: 14px; }
blockquote .source { display: block; margin-top: 7px; font-style: normal; }

.visionneuse { margin: 14px 0 4px; border: 1px solid var(--bord); border-radius: 6px;
               background: #fff; }
.visionneuse > summary { cursor: pointer; padding: 11px 14px; font-size: 14px;
                         color: var(--accent); }
.visionneuse > summary:hover { background: var(--fond); }
.visionneuse[open] > summary { border-bottom: 1px solid var(--bord); }
.visionneuse-barre { display: flex; justify-content: space-between; align-items: center;
                     gap: 12px; padding: 9px 14px; font-size: 13px;
                     border-bottom: 1px solid var(--bord); }
.visionneuse iframe { display: block; width: 100%; height: 640px; border: 0; }
.visionneuse > p { margin: 0; padding: 9px 14px; border-top: 1px solid var(--bord); }
@media (max-width: 900px) { .visionneuse iframe { height: 420px; } }

.apercu { padding: 12px 14px; }
.apercu img { display: block; width: 100%; height: auto; border: 1px solid var(--bord);
              border-radius: 4px; }
.apercu .chargement span { display: block; margin-top: 3px; }

.case-immeuble { display: inline-flex; align-items: center; gap: 5px; margin: 0 14px 6px 0;
                 font-size: 13px; color: var(--texte); }
.case-immeuble input { width: auto; margin: 0; }

/* Case a cocher sur une seule ligne, hors bloc .filtres : sans cette regle,
   la regle generique « label input { width: 100% } » etirerait la case sur
   toute la largeur du formulaire. */
label.case { display: flex; align-items: center; gap: 6px; margin-bottom: 7px;
             font-size: 13px; color: var(--texte); }
label.case input { display: inline-block; width: auto; margin: 0; }

button.retirer { padding: 3px 9px; font-size: 12px; background: transparent;
                 color: var(--rouge); border: 1px solid var(--bord); }
button.retirer:hover { background: var(--rouge-clair); border-color: var(--rouge);
                       opacity: 1; }

.appel-action { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
                margin: 12px 0 4px; }
.appel-action button { padding: 9px 18px; font-size: 15px; }

table.comptes input[type=text], table.comptes input[type=email] { width: 100%;
  font-size: 13px; padding: 5px 7px; }
table.comptes select { font-size: 13px; padding: 4px 6px; max-width: 140px; }
table.comptes select:disabled { background: var(--fond); color: var(--discret); }
table.comptes td { vertical-align: middle; }
table.comptes form { margin: 0; }

table.repartition input[type=text] { width: 100%; font-size: 13px; padding: 5px 7px; }
table.repartition select { width: 100%; font-size: 13px; padding: 4px 6px; }
table.repartition td { vertical-align: middle; }
table.repartition form { margin: 0; }
table.repartition .petit { display: block; margin-top: 3px; }

.derniere-remarque { max-width: 300px; }
.derniere-remarque span[title] { cursor: help; }

/* --- Preparation des assemblees ------------------------------------------ */

/* Onglets du dossier. Les onglets a venir sont visibles mais inertes : ils
   disent ce que l'application deviendra, sans donner l'illusion d'un ecran
   qui existerait deja. */
.onglets { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 20px;
           border-bottom: 1px solid var(--bord); }
.onglet { padding: 9px 15px; font-size: 14px; border: 1px solid transparent;
          border-bottom: none; border-radius: 6px 6px 0 0; margin-bottom: -1px; }
.onglet.actif { background: #fff; border-color: var(--bord); font-weight: 600;
                color: var(--accent); }
.onglet.inactif { color: var(--discret); cursor: not-allowed; }

.barre-rapport { display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
                 margin: 14px 0 22px; }
.barre-rapport form { margin: 0; }
.barre-rapport input[type=file] { font-size: 13px; max-width: 220px; }

.section-rapport { padding: 20px 22px; }
.entete-section { display: flex; justify-content: space-between; align-items: baseline;
                  gap: 14px; flex-wrap: wrap; }
.entete-section h2 { margin: 0 0 8px; }

.outils { display: flex; gap: 5px; margin-bottom: 7px; }
.outils button { padding: 4px 11px; font-size: 13px; background: var(--fond);
                 color: var(--texte); border: 1px solid var(--bord); }
.outils button:hover { background: #eceff3; opacity: 1; }

/* L'editeur reprend la mesure d'une page A4 : un paragraphe qui parait court a
   l'ecran sur toute la largeur se revele long une fois dans le Word. */
.editeur { background: #fff; border: 1px solid var(--bord); border-radius: 5px;
           padding: 14px 18px; min-height: 120px; font-size: 15px; line-height: 1.65;
           max-width: 46em; }
.editeur:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.editeur.lecture { background: var(--fond); }
.editeur p:first-child { margin-top: 0; }
.editeur p:last-child { margin-bottom: 0; }
.editeur ul, .editeur ol { padding-left: 22px; }

button.secondaire { background: transparent; color: var(--accent);
                    border: 1px solid var(--bord); padding: 5px 12px; font-size: 13px; }
button.secondaire:hover { background: var(--fond); opacity: 1; }
button:disabled { background: var(--bord); cursor: not-allowed; }
button:disabled:hover { opacity: 1; }

pre.faits { margin: 0; padding: 14px 16px; background: var(--fond); font-size: 12px;
            line-height: 1.5; white-space: pre-wrap; word-break: break-word;
            max-height: 460px; overflow: auto; }

/* --- Modele de rapport ---------------------------------------------------- */

.section-modele { padding: 18px 20px; }
.section-modele.inactive { opacity: .55; }
.section-modele textarea { width: 100%; font-family: inherit; font-size: 14px;
                           line-height: 1.5; }
.section-modele .entete-section { gap: 10px; align-items: center; }
.rang { display: inline-flex; align-items: center; justify-content: center;
        min-width: 26px; height: 26px; border-radius: 50%; background: var(--fond);
        border: 1px solid var(--bord); font-size: 13px; font-weight: 600; }
.commandes button { padding: 2px 10px; background: var(--fond); color: var(--texte);
                    border: 1px solid var(--bord); font-size: 14px; }
.commandes button:hover { background: #eceff3; opacity: 1; }

/* Les blocs de faits sont le reglage le plus consequent de cet ecran : une
   section ne peut rien dire de ce qu'on ne lui transmet pas. Ils occupent donc
   la place d'un vrai tableau de bord, pas d'une liste de cases discretes. */
fieldset.blocs { border: 1px solid var(--bord); border-radius: 6px;
                 padding: 12px 14px; margin: 14px 0; display: grid;
                 grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
                 gap: 8px 18px; }
fieldset.blocs legend { font-size: 13px; font-weight: 600; padding: 0 6px;
                        color: var(--discret); }
fieldset.blocs .case { align-items: flex-start; margin: 0; font-size: 13px; }
fieldset.blocs .case input { margin-top: 3px; }

/* Le gabarit repris de l'application de suivi ne stylait « .case » que dans les
   filtres : sans cette regle generique, les cases a cocher de l'ecran du modele
   et de l'administration s'etirent sur toute la largeur du formulaire. */
label.case { display: flex; align-items: center; gap: 7px; margin: 6px 0; }
label.case input[type=checkbox] { width: auto; margin: 0; flex: none; }

/* --- Aperçu page : l'écran d'édition à la mesure du Word ------------------ */

/* Les dimensions ci-dessous sont exactement celles du fichier Word produit
   (voir app/config.py : POLICE, TAILLE_POLICE_PT, MARGES_CM). Les deux doivent
   rester d'accord : sinon un texte qui tient sur une page à l'écran en déborde
   une fois dans Word, ce qui est le pire moment pour s'en apercevoir.

   Les unités sont en centimètres, que les navigateurs convertissent en pixels
   à 96 dpi. Une page A4 fait donc 21 cm de large à l'écran comme au papier. */
:root {
  --page-largeur: 21cm;
  --page-marge-gauche: 2.4cm;
  --page-marge-droite: 2.5cm;
  --page-police: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --page-corps: 11pt;
}

.page {
  width: var(--page-largeur);
  max-width: 100%;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--bord);
  box-shadow: 0 1px 4px rgba(15, 23, 42, .08);
  padding: 1.4cm var(--page-marge-droite) 1.4cm var(--page-marge-gauche);
  font-family: var(--page-police);
  font-size: var(--page-corps);
  line-height: 1.45;
  color: #000;
}
/* L'alignement general suit le reglage de la regie. Un bloc qui porte son
   propre `style="text-align:…"` l'emporte, puisqu'un style en ligne prime sur
   une regle de feuille : c'est ce qui permet de justifier ou de centrer un
   paragraphe isole sans toucher au reste. */
.page p, .page li { text-align: var(--page-alignement, left); }
.page p { margin: 0 0 .42cm; }
.page ul, .page ol { margin: 0 0 .42cm; padding-left: 1cm; }
.page h2, .page .titre-section {
  font-family: var(--page-police); font-size: 12pt; font-weight: 700;
  margin: .6cm 0 .3cm; color: #000; letter-spacing: 0;
}

/* En-tête et signature : composés à partir du dossier, jamais rédigés. Ils
   s'affichent pour que la page soit complète sous les yeux du relecteur, mais
   ne sont pas modifiables — les corriger ici ne changerait rien au Word. */
.page-entete { text-align: center; font-weight: 700; }
.page-entete .copropriete { font-size: 14pt; }
.page-entete .titre { font-size: 20pt; margin: .2cm 0; }
.page-entete .ligne { font-size: 14pt; }
.page-entete hr { border: none; border-top: 1px solid #000; margin: .25cm 0; }
.page-signature { margin-top: .8cm; display: flex; justify-content: space-between;
                  gap: 2cm; flex-wrap: wrap; }
.page-signature .droite { text-align: right; }

.hors-texte { position: relative; }
.hors-texte::after {
  content: "composé automatiquement"; position: absolute; top: 4px; right: 6px;
  font-family: var(--police); font-size: 10px; color: var(--discret);
  background: var(--fond); border: 1px solid var(--bord); border-radius: 3px;
  padding: 1px 6px;
}

/* L'éditeur reprend la page : mêmes marges, même police, même interligne. Ce
   qu'on voit en écrivant est ce qui sortira. */
.editeur.page { min-height: 3cm; padding-top: .6cm; padding-bottom: .6cm; }
.editeur.page:focus { outline: 2px solid var(--accent); outline-offset: 2px; }

.bandeau-outils { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
                  margin-bottom: 8px; }

@media print {
  header, footer, .barre-rapport, .outils, .bandeau, .visionneuse,
  form.impression-masquee, .commandes, .fil { display: none !important; }
  .page { border: none; box-shadow: none; margin: 0; padding: 0;
          width: auto; max-width: none; }
  .apercu-page { padding: 0; background: #fff; }
  .saut-page { page-break-before: always; }
}

.apercu-page { background: #eef1f5; padding: 22px 0; }

/* --- Réponses aux points à vérifier --------------------------------------- */

/* Les questions ne sont pas un avertissement de plus : ce sont des champs à
   remplir. Elles reprennent donc la couleur d'alerte mais la forme d'un
   formulaire, pour qu'on comprenne sans explication qu'on attend une réponse. */
.verifications { border: 1px solid #f0d5a8; background: #fffaf0; border-radius: 6px;
                 padding: 14px 16px; margin: 0 0 14px; }
.verifications.resolue { border-color: #cfe3d4; background: #f6fbf7; }
.entete-verifications { display: flex; justify-content: space-between;
                        align-items: baseline; gap: 12px; flex-wrap: wrap;
                        margin: 0 0 10px; }
.verification { margin-bottom: 10px; }
.verification label { font-size: 14px; margin: 0; }
.verification textarea { width: 100%; font-family: inherit; font-size: 14px;
                         line-height: 1.5; margin-top: 4px; }
.verification p { margin: 3px 0 0; }
.verification.repondue > label { color: var(--discret); }
.verification.repondue textarea { background: #fff; }

/* --- Surlignage des suppositions ------------------------------------------ */

/* Le jaune est le seul garde-fou du rapport depuis que le modèle a le droit de
   supposer. Il doit se voir à l'écran comme dans Word, et se retirer d'un
   geste. Le ton est celui du surlignage Word, pour que le document imprimé et
   l'écran donnent la même impression. */
mark, .page mark {
  background: #ffe97f; color: inherit; padding: 0 1px; border-radius: 2px;
}
.pastille-jaune { display: inline-block; width: 11px; height: 11px;
                  background: #ffe97f; border: 1px solid #d9bf49;
                  border-radius: 2px; vertical-align: -1px; margin-right: 4px; }

.editeur-document { outline: none; min-height: 10cm; }
.editeur-document:focus-visible { outline: none; }
.separateur-outils { display: inline-block; width: 1px; height: 18px;
                     background: var(--bord); margin: 0 4px; }
.outils { flex-wrap: wrap; align-items: center; }
.outils .discret { margin-left: auto; }

@media print { mark { background: #ffe97f !important;
                      -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

aside textarea { width: 100%; font-family: inherit; font-size: 13px;
                 line-height: 1.5; }

/* --- Mise en forme du rapport de la régie --------------------------------- */

/* Les titres ne sont pas plus gros que le corps : dans le rapport de la régie
   ce sont des paragraphes ordinaires, en gras souligné pour une section et en
   souligné seul pour un sous-titre. Les grossir ferait un document qui ne
   ressemble plus à ceux déjà produits. */
.page h2, .page .titre-section {
  font-family: var(--page-police); font-size: var(--page-corps);
  font-weight: 700; text-decoration: underline; color: #000;
  margin: .55cm 0 .28cm; letter-spacing: 0;
}
.page h3 {
  font-family: var(--page-police); font-size: var(--page-corps);
  font-weight: 400; text-decoration: underline; color: #000;
  margin: .45cm 0 .25cm;
}

/* Le nom d'une rubrique de charges s'écrit en gras italique : c'est ce qui le
   fait ressortir dans un paragraphe de prose, sans rompre la lecture comme le
   ferait une liste à puces. */
.page strong em, .page em strong { font-weight: 700; font-style: italic; }

/* Les lignes de budget : un tableau sans bordure reproduit les taquets de
   tabulation du modèle, avec les montants alignés à droite. */
.page table { border-collapse: collapse; width: 100%; margin: .3cm 0 .45cm; }
.page td { border: none; padding: 1px 0; vertical-align: top; }
.page tr td:first-child { width: 60%; }
.page tr td:nth-child(2) { width: 12%; }
.page tr td:last-child { text-align: right; }

.outils button.marqueur { font-weight: 700; }
.outils button.marqueur em { font-style: italic; }

/* --- Circuler d'un passage surligné à l'autre ------------------------------ */

/* La barre reste visible pendant qu'on fait défiler le rapport : la relecture
   se fait passage par passage, et devoir remonter chercher les boutons à chaque
   fois découragerait de traiter les derniers. */
.barre-surlignage {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: #fffaf0; border: 1px solid #f0d5a8; border-radius: 6px;
  padding: 8px 12px; margin-bottom: 10px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
}
.barre-surlignage .position { font-weight: 600; font-size: 14px;
                              min-width: 68px; }
.barre-surlignage button { padding: 4px 11px; font-size: 13px;
                           background: var(--fond); color: var(--texte);
                           border: 1px solid var(--bord); }
.barre-surlignage button:hover { background: #eceff3; opacity: 1; }
.barre-surlignage button.valider { background: #2f7d4f; color: #fff;
                                   border-color: #2f7d4f; }
.barre-surlignage button.valider:hover { background: #276a43; }
.barre-surlignage button.retirer { background: transparent; color: #a13b3b;
                                   border-color: #e0bcbc; }
.barre-surlignage .discret { margin-left: auto; }

/* Le passage en cours d'examen ressort davantage que les autres, sans changer
   de nature : c'est toujours du jaune, simplement plus appuyé. */
mark.mark-actif { background: #ffd233; outline: 2px solid #d9a400;
                  outline-offset: 1px; }

/* --- Demander une modification -------------------------------------------- */

.demande { background: var(--fond); border: 1px solid var(--bord);
           border-radius: 6px; padding: 12px 14px; margin: 0 0 14px; }
.demande label { font-weight: 600; font-size: 14px; margin-bottom: 6px;
                 display: block; }
.demande .ligne { align-items: flex-start; gap: 10px; }
.demande textarea { flex: 1; font-family: inherit; font-size: 14px;
                    line-height: 1.5; }
.demande p { margin: 8px 0 0; }

/* La proposition n'est pas le rapport : elle se distingue nettement des
   bandeaux d'information, sans quoi on validerait sans s'en rendre compte. */
.bandeau.proposition { background: #eef4fd; border-color: #b9cdea; }
.bandeau.proposition button { font-size: 14px; }

/* --- Plan de travail : la barre qui suit la relecture ---------------------- */

/* Tout ce qui sert pendant la relecture reste sous la main : mise en forme,
   circulation entre les passages surlignés, demande de modification, état de
   l'enregistrement. Devoir remonter chercher un bouton à chaque paragraphe
   découragerait de traiter le rapport jusqu'au bout. */
.plan-de-travail {
  position: sticky; top: 0; z-index: 30;
  background: #fff; border: 1px solid var(--bord); border-radius: 8px;
  padding: 8px 10px; margin-bottom: 12px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .08);
}
.plan-de-travail .rangee { display: flex; align-items: center; gap: 6px;
                           flex-wrap: wrap; }
.plan-de-travail .rangee + .rangee { margin-top: 7px; padding-top: 7px;
                                     border-top: 1px solid var(--bord); }
.plan-de-travail button { padding: 4px 11px; font-size: 13px;
                          background: var(--fond); color: var(--texte);
                          border: 1px solid var(--bord); }
.plan-de-travail button:hover { background: #eceff3; opacity: 1; }
.plan-de-travail button[type=submit] { background: var(--accent); color: #fff;
                                       border-color: var(--accent); }
.plan-de-travail button[type=submit]:hover { opacity: .9; }
.plan-de-travail button:disabled { background: var(--bord); color: #fff;
                                   border-color: var(--bord); cursor: not-allowed; }

.plan-de-travail .rangee.navigation { background: #fffaf0; border-radius: 5px;
                                      padding: 6px 8px; margin-top: 7px; }
.plan-de-travail .navigation .position { font-weight: 600; font-size: 13px;
                                         min-width: 66px; }
.plan-de-travail .navigation button.valider { background: #2f7d4f; color: #fff;
                                              border-color: #2f7d4f; }
.plan-de-travail .navigation button.retirer { background: transparent;
                                              color: #a13b3b;
                                              border-color: #e0bcbc; }
.plan-de-travail .navigation .discret { margin-left: auto; }

.plan-de-travail .rangee.demande { gap: 8px; }
.plan-de-travail .demande label { font-weight: 600; margin: 0; white-space: nowrap; }
.plan-de-travail .demande textarea {
  flex: 1; min-width: 240px; font-family: inherit; font-size: 13px;
  line-height: 1.45; padding: 6px 9px; resize: vertical; margin: 0;
}

/* L'état de l'enregistrement se lit d'un coup d'œil : c'est ce qui autorise à
   ne plus penser à enregistrer. */
.etat-enregistrement { margin-left: auto; }
.etat-enregistrement.en-attente { color: #9a6b00; }
.etat-enregistrement.enregistre { color: #2f7d4f; }
.etat-enregistrement.echec { color: #a13b3b; font-weight: 600; }

.plan-de-travail .zoom { display: inline-flex; align-items: center; gap: 4px; }
.plan-de-travail .zoom button { padding: 3px 8px; font-size: 12px; }
.plan-de-travail .zoom span { min-width: 42px; text-align: center; }

.plan-de-travail .taille-passage { display: inline-flex; align-items: center;
                                   gap: 5px; margin: 0; font-weight: 600; }
.plan-de-travail .taille-passage select { width: auto; margin: 0; padding: 3px 6px;
                                          font-size: 12px; font-weight: 400; }
.plan-de-travail .rangee.reglages { gap: 7px; }
.plan-de-travail .rangee.reglages select { width: auto; margin: 0;
                                           padding: 3px 8px; font-size: 12px; }
.plan-de-travail .rangee.reglages .discret { margin-left: auto; }

.plan-de-travail .piece-jointe { margin: 0; }
.plan-de-travail .piece-jointe input { font-size: 12px; max-width: 190px;
                                       margin: 0; padding: 3px; }

/* --- Graphiques ----------------------------------------------------------- */

.liste-graphiques { display: grid;
                    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
                    gap: 16px; margin: 12px 0 16px; }
.liste-graphiques figure { margin: 0; border: 1px solid var(--bord);
                           border-radius: 6px; padding: 10px; background: #fff; }
.liste-graphiques figure.ecarte { opacity: .45; }
.liste-graphiques figure.ecarte img { filter: grayscale(1); }
.liste-graphiques img { width: 100%; height: auto; display: block; margin-top: 6px; }
.liste-graphiques .case { font-weight: 600; font-size: 14px; margin: 0; }

/* Dans l'aperçu, le graphique occupe la largeur utile de la page, comme dans
   le Word ou il est insere a 15,5 cm. */
.graphique-rapport { margin: .6cm 0; page-break-inside: avoid; }
.graphique-rapport p { margin: 0 0 .2cm; }
.graphique-rapport img { width: 100%; height: auto; }

/* --- Prompts -------------------------------------------------------------- */

.prompt { padding: 18px 20px; }
.prompt h2 { margin: 0; font-family: ui-monospace, "SFMono-Regular", Menlo,
             Consolas, monospace; font-size: 16px; }
/* Une police à chasse fixe : ces textes comportent du JSON, dont l'indentation
   porte du sens et qu'une police proportionnelle rendrait illisible. */
.prompt textarea { width: 100%; font-family: ui-monospace, "SFMono-Regular",
                   Menlo, Consolas, monospace; font-size: 12.5px;
                   line-height: 1.55; tab-size: 2; }