/* Présentation sans ressource extérieure : les deux polices de l'écran sont rangées dans le dossier polices/ du projet.

   La feuille a trois parties :
   1. les règles communes, qui donnent au rapport imprimé l'aspect validé au lot 5 (noir et blanc, polices du système) ;
   2. le bloc « @media screen », qui habille l'écran selon le design A (docs/maquettes/design-A/LISEZMOI.md) ;
   3. le bloc « @media print », qui ne garde que le rapport.
   La nouvelle palette n'est écrite que dans la partie 2 : l'impression ne la voit jamais. */

/* Polices de l'écran (licence SIL OFL, jointe à côté de chaque fichier). « swap » : le texte s'affiche tout de suite
   avec une police de secours, puis prend la bonne police dès qu'elle est chargée. */
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("polices/public-sans-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("polices/source-serif-4-latin.woff2") format("woff2");
}

/* ---------- 1. Règles communes : elles servent au rapport imprimé. Ne pas les modifier sans vérifier l'aperçu
   d'impression ; pour changer l'écran, écrire dans le bloc « @media screen » plus bas. ---------- */

:root {
  --encre: #1f2933;
  --encre-douce: #52606d;
  --trait: #cbd2d9;
  --fond: #f5f7fa;
  --surface: #ffffff;
  --accent: #1f4e79;
  --erreur: #b3261e;
  --attention: #8a5a00;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.45;
}

h1 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
}

/* Un panneau d'onglet masqué le reste, quels que soient les autres styles. */
[hidden] {
  display: none !important;
}

/* Le champ de fichier reste dans la page pour pouvoir être déclenché, mais ne se voit pas. */
.masque {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

main {
  max-width: 60rem;
  margin: 0 auto;
  padding: 1rem 1.5rem 3rem;
}

.carte {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem 1rem;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 6px;
}

.carte h2 {
  margin: 0.25rem 0 0.75rem;
  font-size: 1.1rem;
}

.carte h3 {
  margin: 1rem 0 0.4rem;
  font-size: 1rem;
}

table.resultats {
  width: 100%;
  margin-bottom: 0.9rem;
  border-collapse: collapse;
}

table.resultats th,
table.resultats td {
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid var(--trait);
  text-align: left;
  font-weight: 400;
}

table.resultats thead th {
  color: var(--encre-douce);
  font-size: 0.9rem;
  font-weight: 600;
}

table.resultats .montant {
  text-align: right;
  white-space: nowrap;
}

/* Tableau des quatre régimes : les textes longs passent à la ligne pour que les colonnes tiennent dans la page. */
table.regimes .montant {
  white-space: normal;
}

table.regimes tr.points td {
  color: var(--attention);
  font-size: 0.85rem;
  text-align: left;
  vertical-align: top;
}

.encadre {
  margin: 0.5rem 0 1rem;
  padding: 0.6rem 1rem;
  background: var(--fond);
  border-left: 4px solid var(--attention);
}

.titre-encadre {
  margin: 0 0 0.3rem;
  font-weight: 600;
}

.intitule {
  margin: 0.4rem 0 0.1rem;
}

.encadre ul,
.carte ul {
  margin: 0.2rem 0 0.6rem;
  padding-left: 1.25rem;
}

ul.alertes {
  color: var(--attention);
}

.note {
  margin: 0.3rem 0;
  color: var(--encre-douce);
  font-size: 0.9rem;
}

/* Onglet « Stratégies » : un tableau large, dont les textes passent à la ligne. */
table.strategies {
  font-size: 0.85rem;
}

table.strategies th,
table.strategies td {
  vertical-align: top;
}

/* Seule la première colonne peut couper un long mot : les montants gardent leur largeur et ne sont jamais coupés. */
table.strategies tbody th {
  overflow-wrap: anywhere;
}

table.strategies .montant {
  white-space: normal;
}

.detail-strategie {
  margin: 0.25rem 0 0;
  color: var(--encre-douce);
  font-size: 0.8rem;
}

/* Onglet « Rapport » : l'aperçu à l'écran, et le rapport imprimé. */
.rapport {
  padding: 2rem;
  background: var(--surface);
  border: 1px solid var(--trait);
}

.page-titre h1 {
  font-size: 1.6rem;
}

.client-rapport {
  font-size: 1.15rem;
}

.section-rapport {
  margin-top: 1.5rem;
}

.titre-section {
  margin: 0 0 0.6rem;
  padding-bottom: 0.2rem;
  border-bottom: 2px solid var(--encre);
  font-size: 1.2rem;
}

.rapport .carte {
  padding: 0;
  border: none;
}

/* Les tableaux du rapport passent à la ligne, pour tenir dans la largeur d'une page A4. */
.rapport table.resultats .montant {
  white-space: normal;
}

/* Un texte saisi garde ses retours à la ligne, et un long mot sans espace ne déborde pas. */
.texte-libre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---------- 2. L'écran, selon le design A « Cabinet de conseil ». ---------- */
@media screen {
  /* Les couleurs communes prennent les valeurs du design A : cartes, tableaux et encadrés suivent à l'écran. */
  :root {
    --encre: #17202e;
    --encre-douce: #4f5b6b;
    --trait: #dde1e7;
    --fond: #f3f4f6;
    --attention: #6b4f10;
    --titre: #14233c;
    --trait-champ: #c7cdd6;
    --surlignage: #faf5e6;
    --contour-focus: #b8923e;
    --menu-texte: #d5dce6;
    --menu-survol: #1e3050;
    --menu-discret: #aeb9c8;
    --menu-intitule: #d9b868;
  }

  body {
    font-family: "Public Sans", "Segoe UI", system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.45;
  }

  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  summary:focus-visible {
    outline: 2px solid var(--contour-focus);
    outline-offset: 2px;
  }

  /* Le titre d'écran reçoit le curseur après « Suivant » : le contour se voit aussi. */
  .titre-ecran:focus-visible {
    outline: 2px solid var(--contour-focus);
    outline-offset: 2px;
  }

  /* Le cadre : le menu à gauche, la zone principale à droite. */
  .cadre {
    display: flex;
    align-items: flex-start;
    min-height: 100vh;
  }

  /* Le menu reste visible pendant qu'on fait défiler une longue page ; il défile seul s'il est plus haut que l'écran. */
  .menu {
    position: sticky;
    top: 0;
    display: flex;
    flex: 0 0 248px;
    flex-direction: column;
    gap: 24px;
    width: 248px;
    height: 100vh;
    overflow-y: auto;
    padding: 24px 16px;
    background: #14233c;
    color: var(--menu-texte);
  }

  .identite {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 8px;
  }

  .nom-application {
    margin: 0;
    color: #ffffff;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.2;
  }

  .nom-client {
    margin: 0;
    font-size: 13px;
    overflow-wrap: anywhere;
  }

  .nom-client:empty {
    display: none;
  }

  .menu .situation {
    display: flex;
    flex-wrap: wrap;
    gap: 0 6px;
    margin: 0;
    color: var(--menu-discret);
    font-size: 12px;
  }

  .menu #etat-dossier {
    font-weight: 600;
  }

  .menu .situation .non-enregistre {
    color: var(--menu-intitule);
  }

  .menu #nom-fichier {
    overflow-wrap: anywhere;
  }

  /* Rouge clair : lisible sur le bleu nuit. */
  .menu #nombre-erreurs {
    flex-basis: 100%;
    color: #f4b4ae;
    font-weight: 600;
  }

  .menu #nombre-erreurs:empty {
    display: none;
  }

  /* Les boutons de fichier, sous l'état du fichier : secondaires et compacts, en clair sur le bleu nuit. Ils passent
     à la ligne quand la place manque ; le contour de focus commun (#B8923E) reste visible sur ce fond. */
  .actions-fichier {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
  }

  .actions-fichier button {
    flex: 1 1 auto;
    min-height: 36px;
    padding: 0 10px;
    border-color: var(--menu-discret);
    background: transparent;
    color: #ffffff;
    font-size: 13px;
  }

  .actions-fichier button:hover {
    border-color: #ffffff;
    background: var(--menu-survol);
  }

  .groupe-menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .intitule-groupe {
    margin: 0;
    padding: 0 8px 6px;
    color: var(--menu-intitule);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }

  .menu .onglets {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .menu .onglets button {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 9px 8px;
    border: none;
    border-radius: 4px;
    background: none;
    color: var(--menu-texte);
    font-weight: 400;
    text-align: left;
  }

  .menu .onglets button:hover {
    background: var(--menu-survol);
  }

  .menu .onglets button[aria-selected="true"] {
    background: #ffffff;
    color: #14233c;
    font-weight: 600;
  }

  .compteur-points {
    color: var(--menu-discret);
    font-variant-numeric: lining-nums tabular-nums;
    font-weight: 400;
    white-space: nowrap;
  }

  .menu .onglets button[aria-selected="true"] .compteur-points {
    color: var(--encre-douce);
  }

  /* Texte lu par les lecteurs d'écran, mais caché à la vue (par exemple « 1 point traité sur 27 »). */
  .pour-lecteur {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* La zone principale : en-tête, message général, puis l'écran choisi, sur 76rem au plus. */
  .zone-principale {
    flex: 1 1 auto;
    min-width: 0;
    padding: 28px 36px 40px;
  }

  .zone-principale > * {
    max-width: 76rem;
  }

  .entete {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
  }

  .titre-ecran {
    margin: 0;
    color: var(--titre);
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 32px;
    font-weight: 600;
    line-height: 1.2;
  }

  .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  button {
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--trait-champ);
    border-radius: 6px;
    background: #ffffff;
    color: var(--titre);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
  }

  button:hover {
    border-color: var(--titre);
  }

  button.principal {
    border-color: var(--titre);
    background: var(--titre);
    color: #ffffff;
  }

  button.principal:hover {
    background: var(--menu-survol);
  }

  .message-general {
    min-height: 1.45em;
    margin: 0 0 16px;
    color: var(--encre-douce);
  }

  .message-general.probleme {
    color: var(--erreur);
    font-weight: 600;
  }

  .a-corriger {
    color: var(--erreur);
  }

  /* Visible seulement si l'application n'a pas pu démarrer, par exemple en ouvrant index.html sans serveur. */
  .message-demarrage {
    margin: 0 0 20px;
    padding: 12px 16px;
    background: #ffffff;
    border: 1px solid var(--erreur);
    border-radius: 6px;
  }

  main {
    max-width: 76rem;
    margin: 0;
    padding: 0;
  }

  /* Les sections repliables de la saisie, présentées comme des cartes. */
  details.section {
    margin-bottom: 20px;
    background: #ffffff;
    border: 1px solid var(--trait);
    border-radius: 8px;
  }

  details.section > summary {
    padding: 16px 20px;
    color: var(--titre);
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
  }

  .corps-section {
    padding: 0 20px 20px;
  }

  .grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
    gap: 14px 20px;
  }

  .champ label {
    display: block;
    margin-bottom: 4px;
    font-weight: 500;
  }

  .champ.large {
    grid-column: 1 / -1;
  }

  /* L'unité s'affiche à droite, dans le champ. */
  .saisie {
    position: relative;
    display: flex;
    align-items: center;
  }

  .saisie input,
  .saisie select {
    height: 44px;
  }

  .saisie input,
  .saisie select,
  .saisie textarea {
    flex: 1;
    width: 100%;
    min-width: 0;
    padding: 0 12px;
    border: 1px solid var(--trait-champ);
    border-radius: 6px;
    background: #ffffff;
    color: var(--encre);
    font: inherit;
  }

  .saisie textarea {
    min-height: 6rem;
    padding: 10px 12px;
    resize: vertical;
  }

  .saisie input.nombre {
    font-variant-numeric: lining-nums tabular-nums;
    text-align: right;
  }

  .saisie .unite {
    position: absolute;
    right: 12px;
    min-width: 3rem;
    color: var(--encre-douce);
    font-size: 13px;
    pointer-events: none;
  }

  .saisie:has(.unite) input,
  .saisie:has(.unite) select {
    padding-right: calc(3rem + 20px);
  }

  .aide {
    margin: 4px 0 0;
    color: var(--encre-douce);
    font-size: 13px;
  }

  .message-champ {
    margin: 4px 0 0;
    font-size: 14px;
  }

  .message-champ:empty {
    display: none;
  }

  .champ.invalide input,
  .champ.invalide select {
    border-color: var(--erreur);
  }

  .champ.invalide .message-champ {
    color: var(--erreur);
  }

  .champ.avertissement input {
    border-color: #9a7416;
  }

  .champ.avertissement .message-champ {
    color: var(--attention);
  }

  /* Un champ vide qui manque au calcul : seule sa bordure change, et son texte d'attente dit « à renseigner ».
     Rien ne s'ajoute à côté de lui : les champs ne bougent pas pendant la saisie. */
  .champ.a-renseigner input,
  .champ.a-renseigner select {
    border-color: #9a7416;
  }

  .champ.a-renseigner input::placeholder {
    color: var(--attention);
    opacity: 1;
  }

  /* La saisie d'un bien, à gauche de son panneau, dans la carte du bien. Sans « min-width: 0 », un groupe de champs
     s'élargit à son contenu et la page déborde sur le côté. */
  fieldset.bien {
    flex: 999 1 560px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: none;
  }

  .retirer {
    margin-top: 14px;
  }

  .biens-vide {
    color: var(--encre-douce);
  }

  /* Cartes, tableaux et encadrés des écrans de résultats. */
  .carte {
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 8px;
  }

  .carte h2 {
    margin: 0 0 12px;
    color: var(--titre);
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 20px;
    font-weight: 600;
  }

  .carte h3 {
    margin: 18px 0 6px;
    color: var(--titre);
    font-size: 16px;
    font-weight: 600;
  }

  table.resultats {
    font-variant-numeric: lining-nums tabular-nums;
  }

  table.resultats th,
  table.resultats td {
    padding: 8px 12px;
  }

  table.resultats thead th {
    font-size: 13px;
  }

  table.strategies {
    font-size: 13px;
  }

  /* Tableau des quatre régimes : quatre colonnes de même largeur, l'intitulé un peu plus large. Sans cela, la
     colonne qui porte le plus long texte prend toute la place. */
  table.regimes {
    table-layout: fixed;
  }

  table.regimes thead th:first-child {
    width: 24%;
  }

  .encadre {
    padding: 12px 16px;
    background: var(--surlignage);
    border-left-color: #9a7416;
    border-radius: 6px;
  }

  .note {
    font-size: 14px;
  }

  .detail-strategie {
    font-size: 12px;
  }

  /* Écrans de saisie : la saisie à gauche, le panneau « Effet sur le dossier » à droite. Quand la place manque,
     le panneau passe sous la saisie. */
  .saisie-et-effet {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px;
  }

  .colonne-saisie {
    flex: 999 1 560px;
    min-width: 0;
  }

  /* Le panneau reste en vue pendant qu'on fait défiler une longue saisie. Sur un écran peu haut (1366 × 768,
     1280 × 720), il ne dépasse jamais la fenêtre : il défile alors en lui-même. */
  .effet {
    position: sticky;
    top: 20px;
    display: flex;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    flex: 1 1 300px;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    padding: 20px;
    border-radius: 8px;
    background: #14233c;
    color: #ffffff;
  }

  .effet h2,
  .effet h3 {
    margin: 0;
    color: #ffffff;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
  }

  .resume-effet {
    margin: 0;
    color: var(--menu-texte);
    font-size: 13px;
  }

  .contenu-effet {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .bloc-effet + .bloc-effet {
    padding-top: 14px;
    border-top: 1px solid #3a4c6b;
  }

  .titre-bloc-effet {
    margin: 0 0 8px;
    color: var(--menu-intitule);
    font-size: 13px;
    font-weight: 600;
  }

  .lignes-effet {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
  }

  .ligne-effet {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
  }

  .ligne-effet dt {
    color: var(--menu-texte);
  }

  .ligne-effet dd {
    margin: 0;
    font-variant-numeric: lining-nums tabular-nums;
    font-weight: 700;
    text-align: right;
  }

  .chiffre-cle {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .chiffre-cle dt {
    color: var(--menu-intitule);
    font-size: 13px;
    font-weight: 600;
  }

  .chiffre-cle dd {
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 34px;
    font-variant-numeric: lining-nums tabular-nums;
    font-weight: 600;
    line-height: 1.1;
    text-align: left;
  }

  /* « à corriger » ou « à renseigner » à la place d'un chiffre clé : plus petit qu'un montant. */
  .chiffre-cle dd.statut-a-corriger,
  .chiffre-cle dd.statut-a-renseigner {
    font-size: 20px;
  }

  .effet .statut-a-corriger {
    color: #f4b4ae;
  }

  .effet .statut-a-renseigner {
    color: var(--menu-intitule);
  }

  .note-effet {
    margin: 6px 0 0;
    color: var(--menu-texte);
    font-size: 13px;
  }

  .effet .lien-ecran {
    width: 100%;
    border-color: #ffffff;
    background: #ffffff;
    color: #14233c;
  }

  /* Le tableau des deux scénarios : une ligne par champ, colonnes resserrées et calées à gauche. */
  .grille-scenarios {
    display: grid;
    grid-template-columns: minmax(140px, 260px) repeat(2, minmax(90px, 130px));
    justify-content: start;
    align-items: start;
    gap: 10px 16px;
  }

  .grille-scenarios .entete-colonne {
    color: var(--encre-douce);
    font-size: 13px;
    font-weight: 600;
    text-align: right;
  }

  .grille-scenarios .libelle-ligne {
    padding-top: 9px;
    color: var(--encre-douce);
    font-weight: 500;
  }

  .grille-scenarios .libelle-ligne .aide {
    font-weight: 400;
  }

  .grille-scenarios .saisie input,
  .grille-scenarios .saisie select {
    height: 40px;
  }

  .grille-scenarios .saisie select {
    padding: 0 6px;
  }

  .grille-scenarios .saisie .unite {
    right: 8px;
    min-width: 0;
  }

  .grille-scenarios .saisie:has(.unite) input {
    padding-right: 52px;
  }

  /* L'écran « Bien actuel » : le bouton d'ajout, puis le détail de chaque bien sous sa saisie. */
  .barre-ajout {
    margin: 0 0 20px;
  }

  .detail-bien {
    margin-top: 20px;
    border-top: 1px solid var(--trait);
  }

  /* Les intertitres du détail (« Éléments encore à renseigner »…), un cran sous « Détail du calcul ». */
  .detail-bien h4 {
    margin: 14px 0 4px;
    color: var(--titre);
    font-size: 15px;
    font-weight: 600;
  }

  /* Le bouton « Suivant », en bas de chaque écran de saisie. */
  .navigation-suivant {
    display: flex;
    justify-content: flex-end;
    margin: 20px 0 0;
  }

  button.suivant {
    border-color: var(--titre);
  }

  /* ----- Écrans « 2. Analyser » (étape 7.3) : comparatif des régimes, capacité d'emprunt, stratégies. ----- */

  /* La phrase sous le titre de l'écran. */
  .sous-titre {
    margin: -8px 0 20px;
    color: var(--encre-douce);
  }

  /* Un tableau large défile dans sa propre zone : la page ne déborde jamais sur le côté. Tant qu'il reste des colonnes
     à voir, son bord droit s'estompe : la colonne coupée se lit comme une suite, pas comme une erreur. Le fondu suit le
     défilement de la zone (il disparaît au bout du tableau) ; au repos, il est placé hors de la zone, si bien qu'un
     tableau qui tient en entier n'est jamais estompé. Le bord garde 25 % : sur un téléphone, le morceau de colonne
     suivante reste visible. Un navigateur qui ne suit pas le défilement n'affiche aucun fondu. */
  .defilement {
    overflow-x: auto;
    mask-image: linear-gradient(to left, rgb(0 0 0 / 25%), #000 48px);
    mask-size: calc(100% + 48px) 100%;
    mask-repeat: no-repeat;
    mask-position: 0 0;
    animation-name: indice-defilement;
    animation-duration: auto;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: scroll(self inline);
  }

  @keyframes indice-defilement {
    from {
      mask-position: 100% 0;
    }

    to {
      mask-position: 0 0;
    }
  }

  /* Un bouton à l'allure de lien, qui ouvre l'écran de saisie sur le champ concerné. Sans cadre ni fond, il offre
     pourtant 44 px de haut à viser ; son texte reste aligné sur celui de la phrase. */
  button.lien-champ {
    min-height: 44px;
    padding: 0 4px;
    border: none;
    background: none;
    color: #7a5c16;
    font-weight: 600;
    text-decoration: underline;
  }

  button.lien-champ:hover {
    color: #14233c;
  }

  /* La bascule des deux scénarios : deux boutons dans un même cadre gris, le choisi sur fond blanc. */
  .bascule {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-bottom: 20px;
    padding: 3px;
    border-radius: 6px;
    background: #e2e5ea;
  }

  .bascule button {
    min-height: 44px;
    padding: 0 14px;
    border: none;
    border-radius: 4px;
    background: transparent;
  }

  .bascule button[aria-pressed="true"] {
    background: #ffffff;
  }

  /* Le tableau des quatre régimes : l'effort en chiffres clés sur la première ligne, la colonne marquée surlignée. */
  /* 640 px au moins : un effort à quatre chiffres tient dans sa colonne, et le tableau tient sans défiler jusqu'à
     1024 px de large, menu à gauche. Plus étroit, il défile dans sa zone. */
  table.comparatif {
    min-width: 640px;
    table-layout: fixed;
  }

  /* Quand le tableau défile, la première colonne reste en place, sur fond blanc, un trait la sépare : on voit que
     les chiffres glissent dessous et à quel intitulé chacun répond. */
  table.comparatif tr > :first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: #ffffff;
    box-shadow: 1px 0 0 var(--trait);
  }

  table.comparatif thead th:first-child {
    width: 24%;
  }

  table.comparatif thead th {
    color: var(--titre);
    border-bottom: none;
  }

  table.comparatif .montant {
    white-space: normal;
  }

  table.comparatif .ligne-effort th {
    color: var(--encre-douce);
    font-size: 13px;
    vertical-align: bottom;
  }

  table.comparatif .ligne-effort td {
    vertical-align: top;
  }

  table.comparatif .chiffre-effort {
    display: block;
    color: var(--titre);
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 38px;
    font-variant-numeric: lining-nums tabular-nums;
    font-weight: 600;
    line-height: 1.1;
  }

  /* « Trésorerie positive : 12 € » est une phrase : en chiffre clé, le mot « Trésorerie » déborderait de sa colonne. */
  table.comparatif .chiffre-effort.tresorerie-positive {
    font-size: 18px;
    line-height: 1.3;
  }

  /* Jusqu'à 1200 px, le menu reste à gauche et les colonnes se resserrent : le chiffre clé aussi. */
  @media (max-width: 1200px) {
    table.comparatif .chiffre-effort {
      font-size: 30px;
    }
  }

  table.comparatif .colonne-forte {
    background: var(--surlignage);
  }

  table.comparatif .statut-a-renseigner {
    color: var(--attention);
  }

  table.comparatif .statut-a-corriger {
    color: var(--erreur);
  }

  table.comparatif .statut-non-calcule {
    color: var(--encre-douce);
  }

  /* La mention sous un chiffre clé : « Effort le plus faible », « Durée du projet ». */
  .marque {
    display: block;
    min-height: 18px;
    color: var(--attention);
    font-size: 12px;
    font-weight: 600;
  }

  /* Une phrase sous le tableau, sur toute sa largeur : pourquoi des colonnes restent vides. */
  .colonne-vide {
    margin: 12px 0 0;
    padding: 12px 16px;
    border: 1px solid #c9a95a;
    border-radius: 6px;
    background: #ffffff;
  }

  /* Ces phrases peuvent citer un nom de bien saisi : un très long nom sans espace se coupe au lieu de déborder. */
  .colonne-vide,
  .a-garder li,
  .encadre,
  table.strategies .phrase-strategie {
    overflow-wrap: anywhere;
  }

  /* Les cartes côte à côte, qui passent l'une sous l'autre quand la place manque. */
  .cartes-comparatif,
  .cartes-capacite {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    align-items: start;
    gap: 20px;
    margin-bottom: 20px;
  }

  .cartes-comparatif > .carte,
  .cartes-capacite > .carte {
    margin-bottom: 0;
  }

  .a-garder li + li {
    margin-top: 8px;
  }

  /* Les trois limites du budget : le nom, les deux montants, puis le constat. */
  ul.limites {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .limite {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 10px;
    border-top: 1px solid var(--trait);
    font-variant-numeric: lining-nums tabular-nums;
  }

  .nom-limite {
    font-weight: 600;
  }

  .plafond-limite {
    color: var(--encre-douce);
    font-size: 14px;
  }

  .constat-limite {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 600;
  }

  .constat-respectee {
    color: #1d5c45;
  }

  .constat-depassee,
  .constat-insuffisante,
  .constat-a-corriger {
    color: var(--erreur);
  }

  .constat-a-renseigner {
    color: var(--attention);
  }

  .constat-non-calcule {
    color: var(--encre-douce);
  }

  /* Les limites sur une carte bleu nuit (écran Stratégies), lisibles sur le fond sombre. */
  .carte.limites-sombres {
    border-color: #14233c;
    background: #14233c;
    color: #ffffff;
  }

  .carte.limites-sombres h2 {
    color: #ffffff;
  }

  .carte.limites-sombres .limite {
    border-top-color: #3a4c6b;
  }

  .carte.limites-sombres .nom-limite {
    color: var(--menu-intitule);
  }

  .carte.limites-sombres .plafond-limite {
    color: var(--menu-texte);
  }

  .carte.limites-sombres .constat-respectee {
    color: #a9e0c6;
  }

  .carte.limites-sombres .constat-depassee,
  .carte.limites-sombres .constat-insuffisante,
  .carte.limites-sombres .constat-a-corriger {
    color: #f4b4ae;
  }

  .carte.limites-sombres .constat-a-renseigner,
  .carte.limites-sombres .constat-non-calcule {
    color: var(--menu-intitule);
  }

  /* Les rendements et le détail du meublé au réel, repliés plus bas. */
  details.plus-loin {
    margin-bottom: 20px;
    border: 1px solid var(--trait);
    border-radius: 8px;
    background: #ffffff;
  }

  details.plus-loin > summary {
    padding: 16px 20px;
    color: var(--titre);
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
  }

  details.plus-loin > .carte {
    margin: 0;
    border: none;
  }

  /* Capacité : une carte par durée, le capital en chiffre clé. */
  ul.cartes-durees {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 12px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
  }

  .carte-duree {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 20px;
    border: 1px solid var(--trait);
    border-radius: 6px;
  }

  .carte-duree.duree-projet {
    background: var(--surlignage);
  }

  .nom-duree {
    color: var(--titre);
    font-size: 13px;
    font-weight: 600;
  }

  .environ {
    color: var(--encre-douce);
    font-size: 13px;
  }

  .chiffre-capital {
    color: var(--titre);
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 38px;
    font-variant-numeric: lining-nums tabular-nums;
    font-weight: 600;
    line-height: 1.1;
  }

  .age-fin {
    font-size: 14px;
  }

  /* « Ce qu'il faut retenir », sur une carte bleu nuit. */
  .carte.retenir {
    border-color: #14233c;
    background: #14233c;
    color: #ffffff;
  }

  .carte.retenir h2 {
    color: #ffffff;
  }

  .chiffres-retenus {
    margin: 0 0 16px;
  }

  .chiffres-retenus dt {
    color: var(--menu-intitule);
    font-size: 13px;
    font-weight: 600;
  }

  .chiffres-retenus dd {
    margin: 0 0 12px;
  }

  .chiffre-retenu {
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 34px;
    font-variant-numeric: lining-nums tabular-nums;
    font-weight: 600;
    line-height: 1.1;
  }

  .carte.retenir ul.prudence {
    margin: 0;
    padding: 14px 0 0 18px;
    border-top: 1px solid #3a4c6b;
    font-size: 14px;
  }

  /* Stratégies : l'analyse à gauche, les hypothèses à droite ; elles passent dessous quand la place manque. */
  .analyse-et-hypotheses {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px;
  }

  .colonne-analyse {
    flex: 999 1 560px;
    min-width: 0;
  }

  .hypotheses-strategies {
    flex: 1 1 300px;
    min-width: 0;
  }

  .champs-hypotheses {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* Chaque ligne du tableau ouvre sa stratégie ; la ligne choisie est surlignée. */
  table.strategies .ligne-strategie {
    cursor: pointer;
  }

  table.strategies tr.choisie th,
  table.strategies tr.choisie td {
    background: var(--surlignage);
  }

  button.choix-strategie {
    min-height: 44px;
    padding: 0;
    border: none;
    background: none;
    color: var(--titre);
    text-align: left;
  }

  button.choix-strategie:hover {
    text-decoration: underline;
  }

  table.strategies .effort-strategie {
    color: var(--titre);
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 22px;
    font-weight: 600;
  }

  /* Une ligne sans chiffres : sa phrase occupe toutes les colonnes chiffrées, alignée à gauche. */
  table.strategies .phrase-strategie {
    text-align: left;
  }

  /* La fiche de la stratégie choisie : son détail, son intérêt, sa contrainte et l'appréciation du conseiller. */
  .fiche-strategie .detail-strategie {
    margin: 0 0 12px;
    color: var(--encre-douce);
    font-size: 15px;
  }

  .interet-contrainte {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 12px 24px;
    margin-bottom: 14px;
  }

  .bloc-fiche {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .intitule-fiche {
    color: var(--encre-douce);
    font-size: 13px;
    font-weight: 600;
  }

  .fiche-strategie textarea {
    min-height: 4rem;
  }

  /* Points à vérifier (maquette 3a) : la liste des thèmes à gauche, les points du thème choisi à droite. */
  .themes-et-points {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px;
  }

  .themes-points {
    display: flex;
    flex: 1 1 260px;
    flex-direction: column;
    gap: 8px;
    max-width: 300px;
    min-width: 0;
  }

  /* Un thème : son nom et son compteur, puis sa barre ; le thème choisi est surligné. */
  button.choix-theme {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--trait);
    border-radius: 8px;
    background: #ffffff;
    color: var(--encre);
    text-align: left;
  }

  button.choix-theme:hover {
    border-color: var(--titre);
  }

  button.choix-theme.choisi {
    border-color: #9a7416;
    background: var(--surlignage);
  }

  .ligne-theme {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--titre);
  }

  .compte-theme {
    font-variant-numeric: lining-nums tabular-nums;
    white-space: nowrap;
  }

  /* La barre : un segment par point, les points traités remplis depuis la gauche. */
  .barre-theme {
    display: flex;
    height: 6px;
    overflow: hidden;
    border-radius: 3px;
    background: #edeff2;
  }

  .barre-theme .segment {
    flex: 1 1 0;
  }

  .barre-theme .rempli {
    background: #2f4a73;
  }

  .liste-points {
    flex: 999 1 560px;
    min-width: 0;
    padding: 0;
  }

  .entete-theme {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--trait);
  }

  .entete-theme h2 {
    margin: 0;
  }

  button.filtre-points {
    min-height: 40px;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 500;
  }

  button.filtre-points[aria-pressed="true"] {
    border-color: var(--titre);
    background: var(--titre);
    color: #ffffff;
  }

  /* Un point : son libellé, le bouton de la note et ses trois états, puis la note repliée dessous. */
  .point-a-verifier {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 20px;
    border-bottom: 1px solid #edeff2;
  }

  .ligne-point {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
  }

  .libelle-point {
    flex: 999 1 300px;
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
  }

  button.bouton-note {
    min-height: 44px;
    padding: 0 8px;
    border: none;
    background: transparent;
    color: var(--attention);
    font-size: 14px;
    font-weight: 500;
    text-decoration: underline;
  }

  button.bouton-note:hover {
    color: var(--titre);
  }

  /* Les trois états en boutons segmentés : le choisi sur fond blanc. */
  .etats-point {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    padding: 3px;
    border-radius: 6px;
    background: #e2e5ea;
  }

  .etats-point button {
    min-height: 34px;
    padding: 0 10px;
    border: none;
    border-radius: 4px;
    background: transparent;
    font-size: 13px;
  }

  .etats-point button[aria-pressed="true"] {
    background: #ffffff;
  }

  .note-point .champ {
    margin: 0;
  }

  .note-point textarea {
    min-height: 44px;
  }

  .tout-traite {
    margin: 0;
    padding: 20px;
    color: var(--encre-douce);
  }

  /* Rapport (maquette 3b) : le sous-titre et le bouton, puis l'aperçu en feuille blanche et « Avant d'imprimer ». */
  .barre-rapport {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 20px;
  }

  .barre-rapport .sous-titre {
    flex: 1 1 320px;
    margin: 0;
  }

  /* « Avant d'imprimer » vient avant l'aperçu dans la page, pour être lu d'abord ; à la vue, il est à droite. */
  .apercu-et-controles {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
    gap: 20px;
  }

  .avant-imprimer {
    display: flex;
    flex-direction: column;
    grid-column: 2;
    grid-row: 1;
    gap: 14px;
    min-width: 0;
    padding: 20px;
    border-radius: 8px;
    background: #14233c;
    color: #ffffff;
  }

  .avant-imprimer h2 {
    margin: 0;
    color: #ffffff;
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 20px;
    font-weight: 600;
  }

  .introduction-controles,
  .rien-a-signaler {
    margin: 0;
    color: var(--menu-texte);
    font-size: 14px;
  }

  ul.controles-impression {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* Une ligne : un bouton qui mène au champ ou à l'écran concerné, son statut en tête. */
  button.controle-impression {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    padding: 12px;
    border: 1px solid #3a4c6b;
    border-radius: 6px;
    background: transparent;
    color: #ffffff;
    text-align: left;
    overflow-wrap: anywhere;
  }

  button.controle-impression:hover {
    border-color: var(--menu-texte);
    background: var(--menu-survol);
  }

  .statut-controle {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
  }

  .statut-a-corriger .statut-controle {
    color: #f4b4ae;
  }

  .statut-a-renseigner .statut-controle {
    color: var(--menu-intitule);
  }

  .statut-a-verifier .statut-controle {
    color: var(--menu-texte);
  }

  .statut-facultatif .statut-controle {
    color: var(--menu-discret);
  }

  .detail-controle {
    color: var(--menu-texte);
    font-size: 13px;
    font-weight: 400;
  }

  /* L'aperçu : une feuille blanche, pas plus large qu'une page A4. */
  .rapport {
    justify-self: center;
    width: 100%;
    max-width: 794px;
    min-width: 0;
    overflow-x: auto;
    padding: 40px 56px;
    border-color: #c7cdd6;
    border-radius: 2px;
  }

  /* Moins de place : « Avant d'imprimer » passe au-dessus de l'aperçu, sur toute la largeur. */
  @media (max-width: 1200px) {
    .apercu-et-controles {
      grid-template-columns: minmax(0, 1fr);
    }

    .avant-imprimer {
      grid-column: auto;
      grid-row: auto;
    }
  }

  /* Écran peu haut, menu à gauche (portable 1366 × 768, ou 1920 × 1080 à 150 %) : la fenêtre n'affiche qu'environ
     600 à 660 px. Le menu se resserre pour garder ses huit onglets en vue sous les boutons de fichier ; au-delà, il
     défile en lui-même. */
  @media (min-width: 901px) and (max-height: 800px) {
    .menu {
      gap: 12px;
      padding: 16px;
    }

    /* Les onglets gardent 34 px de haut, au-dessus des 24 px du seuil d'accessibilité. */
    .menu .onglets button {
      min-height: 34px;
      padding: 6px 8px;
    }

    /* Un long nom de fichier tient sur sa ligne, coupé par des points de suspension ; il reste lu en entier. */
    .menu #nom-fichier {
      flex-basis: 100%;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .intitule-groupe {
      padding-bottom: 4px;
    }

    .actions-fichier {
      margin-top: 8px;
    }

    .actions-fichier button {
      min-height: 32px;
    }
  }

  /* Petit écran : le menu passe au-dessus du contenu, ses trois temps côte à côte ; rien ne déborde sur le côté. */
  @media (max-width: 900px) {
    .cadre {
      flex-direction: column;
      align-items: stretch;
    }

    .menu {
      position: static;
      flex: none;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 16px 24px;
      width: auto;
      height: auto;
      overflow-y: visible;
      padding: 16px;
    }

    .identite {
      flex-basis: 100%;
    }

    .groupe-menu {
      flex: 1 1 12rem;
    }

    .zone-principale {
      padding: 20px 16px 32px;
    }

    .titre-ecran {
      font-size: 26px;
    }

    /* Un tableau trop large défile dans sa carte, jamais la page entière (l'aperçu du rapport le fait à toute largeur). */
    .carte {
      overflow-x: auto;
    }

    /* Le menu est en haut : ses boutons de fichier se visent au doigt. */
    .actions-fichier button {
      min-height: 44px;
    }

    /* La feuille de l'aperçu garde une marge, plus étroite. */
    .rapport {
      padding: 20px;
    }

    /* Le panneau est sous la saisie : il ne reste plus en vue pendant le défilement, et retrouve toute sa hauteur. */
    .effet {
      position: static;
      max-height: none;
    }
  }

  /* Écran étroit : le libellé de chaque ligne des scénarios passe au-dessus de ses deux cases. */
  @media (max-width: 600px) {
    .grille-scenarios {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .grille-scenarios .libelle-ligne {
      grid-column: 1 / -1;
      padding-top: 6px;
    }

    .coin-grille {
      display: none;
    }

    /* La liste des thèmes prend toute la largeur, au-dessus des points. */
    .themes-points {
      max-width: none;
    }
  }

  /* Étape 9.1 : l'écran de connexion, une carte blanche au centre, sur le fond de l'application. */
  .connexion {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 100vh;
    padding: 64px 16px;
  }

  .carte-connexion {
    width: 100%;
    max-width: 26rem;
    padding: 32px;
    background: var(--surface);
    border: 1px solid var(--trait);
    border-radius: 8px;
  }

  .carte-connexion .nom-application {
    color: var(--titre);
  }

  .titre-connexion {
    margin: 4px 0 20px;
    color: var(--titre);
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 26px;
    font-weight: 600;
  }

  .message-connexion {
    margin: 0 0 16px;
    color: var(--erreur);
    font-weight: 600;
  }

  .message-connexion:empty {
    display: none;
  }

  .formulaire-connexion {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .formulaire-connexion label {
    margin-top: 8px;
    color: var(--encre);
    font-weight: 600;
  }

  .formulaire-connexion input {
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--trait-champ);
    border-radius: 6px;
    font: inherit;
  }

  .formulaire-connexion button.principal {
    margin-top: 16px;
  }

  .consigne-connexion {
    margin: 0 0 8px;
    color: var(--encre-douce);
  }

  .qr-code {
    align-self: center;
    margin: 8px 0 16px;
    background: #ffffff;
  }

  /* La clé de secours se recopie à la main : grands caractères, coupée proprement si la carte est étroite. */
  .cle-secours {
    display: block;
    margin-top: 6px;
    color: var(--titre);
    font-size: 16px;
    letter-spacing: 0.05em;
    overflow-wrap: anywhere;
  }

  .retour-connexion {
    margin-top: 16px;
    width: 100%;
  }

  /* Étape 9.2 : « Mot de passe oublié ? », un bouton qui a l'air d'un lien, sous « Se connecter ». */
  .lien-connexion {
    align-self: flex-start;
    margin-top: 12px;
    padding: 4px 0;
    border: none;
    background: none;
    color: var(--titre);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
  }

  /* Un message d'information (lien envoyé) n'est pas une erreur : il n'est pas en rouge. */
  .message-connexion.information {
    color: var(--encre);
  }

  /* Dans le menu, en bas : l'adresse du compte et « Se déconnecter ». */
  .compte {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: auto;
    padding: 0 8px;
  }

  .compte-connecte {
    margin: 0;
    color: var(--menu-discret);
    font-size: 12px;
    overflow-wrap: anywhere;
  }

  .compte button {
    min-height: 36px;
    border-color: var(--menu-discret);
    background: transparent;
    color: #ffffff;
    font-size: 13px;
  }

  .compte button:hover {
    border-color: #ffffff;
    background: var(--menu-survol);
  }

  /* Étape 10.2 : les parties du menu propres au dossier ouvert, regroupées pour être masquées sur « Mes dossiers » ;
     elles gardent la disposition qu'elles avaient dans le menu. */
  .identite-dossier {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .menu-dossier {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  /* « ← Mes dossiers », en haut du dossier ouvert : secondaire, en clair sur le bleu nuit, comme les boutons de fichier. */
  .retour-mes-dossiers {
    align-self: flex-start;
    min-height: 44px;
    margin: 8px 0 6px;
    padding: 0 12px;
    border-color: var(--menu-discret);
    background: transparent;
    color: #ffffff;
    font-size: 13px;
  }

  .retour-mes-dossiers:hover {
    border-color: #ffffff;
    background: var(--menu-survol);
  }

  /* L'écran « Mes dossiers » : titre et « Nouveau dossier », recherche, état, puis le tableau. */
  .ecran-dossiers {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .entete-dossiers {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
  }

  .recherche-dossiers {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 26rem;
  }

  .recherche-dossiers label {
    color: var(--encre);
    font-weight: 600;
  }

  .recherche-dossiers input {
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--trait-champ);
    border-radius: 6px;
    background: #ffffff;
    font: inherit;
  }

  .etat-dossiers {
    min-height: 1.45em;
    margin: 0;
    color: var(--encre-douce);
  }

  .erreur-dossiers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #ffffff;
    border: 1px solid var(--erreur);
    border-radius: 6px;
  }

  .erreur-dossiers p {
    flex: 1 1 20rem;
    margin: 0;
    color: var(--erreur);
    font-weight: 600;
  }

  .avertissement-dossiers {
    margin: 0;
    padding: 12px 16px;
    background: var(--surlignage);
    border-left: 4px solid var(--attention);
    color: var(--attention);
    font-weight: 600;
  }

  .tableau-dossiers {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #ffffff;
    border: 1px solid var(--trait);
    border-radius: 8px;
  }

  .tableau-dossiers th {
    padding: 12px 16px;
    border-bottom: 1px solid var(--trait);
    color: var(--encre-douce);
    font-size: 13px;
    font-weight: 600;
    text-align: left;
  }

  .tableau-dossiers td {
    padding: 4px 16px;
    border-bottom: 1px solid var(--trait);
    vertical-align: middle;
  }

  .tableau-dossiers tr:last-child td {
    border-bottom: none;
  }

  .tableau-dossiers .cellule-date {
    color: var(--encre-douce);
    font-variant-numeric: lining-nums tabular-nums;
    white-space: nowrap;
  }

  .tableau-dossiers .cellule-actions {
    text-align: right;
  }

  /* Étape 10.4 : un conseiller sans nom est dit « Nom non renseigné », en retrait, pour ne pas passer pour un nom. */
  .tableau-dossiers .cellule-conseiller.non-renseigne {
    color: var(--encre-douce);
    font-style: italic;
  }

  /* Le nom du client ouvre le dossier : un bouton à l'allure de lien, coupé proprement s'il est très long. */
  .ouvrir-dossier {
    min-height: 44px;
    padding: 0;
    border: none;
    background: none;
    color: #7a5c16;
    font-weight: 600;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
  }

  .ouvrir-dossier:hover {
    color: #14233c;
  }

  .supprimer-dossier {
    min-height: 44px;
    color: var(--erreur);
  }

  .supprimer-dossier:hover {
    border-color: var(--erreur);
  }

  /* Étape 10.3 : « Importer des fichiers », « Exporter tous mes dossiers » et « Nouveau dossier », côte à côte. */
  .actions-dossiers {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .actions-dossiers button,
  .exporter-dossier {
    min-height: 44px;
  }

  .exporter-dossier + .supprimer-dossier {
    margin-left: 8px;
  }

  /* Le compte rendu d'un import ou d'un export : invisible tant qu'il est vide, en alerte s'il signale un problème. */
  .compte-rendu-dossiers {
    padding: 12px 16px;
    background: #ffffff;
    border: 1px solid var(--trait);
    border-left: 4px solid var(--titre);
    border-radius: 6px;
  }

  .compte-rendu-dossiers:empty {
    display: none;
  }

  .compte-rendu-dossiers.probleme {
    border-left-color: var(--attention);
    background: var(--surlignage);
  }

  .compte-rendu-dossiers p {
    margin: 0;
    font-weight: 600;
  }

  .compte-rendu-dossiers ul {
    margin: 8px 0 0;
    padding-left: 20px;
    overflow-wrap: anywhere;
  }

  /* Les choix proposés quand la base refuse un enregistrement (modifié ailleurs, ou introuvable). */
  .choix-enregistrement {
    margin: 0 0 20px;
    padding: 20px;
    background: #ffffff;
    border: 1px solid var(--erreur);
    border-radius: 8px;
  }

  .titre-choix {
    margin: 0 0 8px;
    color: var(--titre);
    font-family: "Source Serif 4", Georgia, serif;
    font-size: 20px;
    font-weight: 600;
  }

  .titre-choix:focus-visible {
    outline: 2px solid var(--contour-focus);
    outline-offset: 2px;
  }

  .choix-enregistrement p {
    margin: 0;
  }

  .boutons-choix {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
  }

  /* Écran peu haut : les groupes d'onglets se resserrent comme avant leur regroupement. */
  @media (min-width: 901px) and (max-height: 800px) {
    .menu-dossier {
      gap: 12px;
    }
  }

  /* Petit écran : les trois temps du menu restent côte à côte, comme avant leur regroupement. */
  @media (max-width: 900px) {
    .menu-dossier {
      flex: 1 1 100%;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 16px 24px;
    }

    .tableau-dossiers th,
    .tableau-dossiers td {
      padding-right: 8px;
      padding-left: 8px;
    }
  }
}

/* ---------- 3. L'impression ---------- */

@page {
  size: A4;
  margin: 18mm 16mm;
}

/* À l'impression, seul le rapport apparaît, en noir et blanc, quel que soit l'onglet affiché. */
@media print {
  .connexion,
  .ecran-dossiers,
  .choix-enregistrement,
  .menu,
  .entete,
  .message-general,
  .message-demarrage,
  .barre-rapport,
  .avant-imprimer,
  #ecran-foyer,
  #ecran-bien,
  #ecran-projet,
  #vue-capacite,
  #vue-achat,
  #vue-strategies,
  #vue-points {
    display: none !important;
  }

  #vue-rapport[hidden] {
    display: block !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 10pt;
  }

  main {
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .rapport {
    padding: 0;
    border: none;
  }

  .rapport * {
    background: none !important;
    color: #000 !important;
  }

  .encadre {
    border-left-color: #000;
  }

  table.resultats th,
  table.resultats td {
    border-bottom-color: #000;
  }

  table.regimes {
    font-size: 8.5pt;
  }

  /* La page de titre occupe toute la page : le nom de son auteur va en bas. */
  .page-titre {
    display: flex;
    flex-direction: column;
    min-height: 250mm;
    padding-top: 60mm;
    break-after: page;
  }

  .prepare-par {
    margin-top: auto;
  }

  /* Tableaux non coupés quand c'est possible, titres gardés avec leur contenu. */
  table,
  tr,
  .strategie-rapport,
  li {
    break-inside: avoid;
  }

  thead {
    display: table-header-group;
  }

  h1,
  h2,
  h3 {
    break-after: avoid;
  }
}