/* Charte Arkelio Financement : bleu foncé (couleur du métier Financement), fond beige
   cassé / sable, AUCUN vert (réservé à Arkelio Énergie) SAUF (a) les pastilles de statut « Accordé » et
   « Débloqué » d'un prêt (décision de Matt du 2026-10-22, variables `--statut-…`) et (b) le vert MAT de l'état
   « Terminée » des étapes du Parcours, du feu vert du diagnostic et des marques « Complet » des blocs, onglets et tuiles (décision de Matt du
   2026-10-25, F-436, variables `--vert-mat-…`), nulle part ailleurs ; l'orange et le rouge PLEINS ne servent qu'au feu du diagnostic express (variables `--feu-orange-…`,
   `--feu-rouge-…`). Pas de fond bleu ni turquoise SAUF les boutons et les variables prévues (palette « plus bleue » de Matt du
   2026-10-22, lot FIN-UX-3 : bleu pâle pour l'information et le calculé, variables `--etat-…`, `--statut-…`,
   `--legende-…`, `--compteur-…`), logo d'origine seul.
   Base reprise de la feuille de l'app CEE (`apps/qualification-commerciale/public/style.css`,
   règles générales, connexion et 2FA), le vert remplacé par le bleu foncé ; garde :
   test/test-charte.mjs. */
/* Police Inter hébergée : aucune requête vers Google. Police variable (graisses 100 à
   900), sous-ensemble latin ; voir polices/LISEZMOI.md. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/polices/inter-5.3.0-latin-wght.woff2") format("woff2-variations"), url("/polices/inter-5.3.0-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  /* PALETTE DOUCE (lot FIN-VISU-2, variante A choisie par Matt ; avant : palette « plus bleue » du lot FIN-UX-3) : LE SEUL ENDROIT
     où régler les couleurs. Mate, moins tranchante, aucun noir pur.
       structure (ardoise)          --bleu-fonce (ex-marine #1E3A5F), --bleu-fonce-survol
       bleu moyen doux              --bleu-moyen (pastille « Demandé »)
       bleu pâle                    --bleu-pale (fond), --bleu-pale-bord (trait), --bleu-pale-texte : RÉSERVÉ à « Calculé » (et la pastille
                                    « Envisagé »)
       accent (doré mat)            --or : bandeau d'accent seulement, JAMAIS seul comme contour ni comme texte (1,82 sur blanc)
       ambre doux                   --ambre-pale (fond), --ambre (texte), --ambre-bord (trait) : à remplir, à compléter, à décider
       sable doux                   --sable-doux, --sable-doux-texte, --sable-doux-bord : pas commencé, à venir
       fond de page (sable clair)   --sable, --sable-fonce
       bandeau (blanc)              --blanc
     Les états des chiffres (--etat-…), des blocs (--bloc-…), des étapes (--etape-…), la légende, les compteurs, les onglets et les
     pastilles de statut (--statut-…) puisent dans cette palette ; test/test-charte.mjs et test/test-contraste.mjs les gardent. */
  --bleu-fonce: #4A6585;
  --bleu-fonce-survol: #3F5B7D;
  --bleu-moyen: #5A7494;
  --bleu-pale: #EAF0F7;
  --bleu-pale-bord: #6F8BB0;
  --bleu-pale-texte: #3F5B7D;
  --sable: #F6F2EA;
  --sable-fonce: #E7DFD0;
  --sable-doux: #EFEADF;
  --sable-doux-texte: #5A5444;
  --sable-doux-bord: #7D7664;
  --or: #E9B872;
  --rouge: #C1121F;
  --rouge-pale: #FDE2E4;
  --ambre: #6B4A1A;
  --ambre-bord: #9A7843;
  --ambre-pale: #FBF3E4;
  --gris-moyen: #DDD6C8;
  --gris-fonce: #5B6B80;
  --saisi-bord: #7F8FA3;
  --texte: #2E2B28;
  --blanc: #FFFFFF;
  /* Vert MAT (lot FIN-VISU-3, décision de Matt du 2026-10-25) : état « Terminée » des étapes du Parcours (carte, segment de la bande,
     légende) et feu vert du diagnostic, rien d'autre. Texte blanc sur le fond : 4,86 ; sur le bord : 6,12. Les verts des pastilles
     « Accordé » et « Débloqué » (`--statut-…`) ne bougent pas. */
  --vert-mat-fond: #4E7B5E;
  --vert-mat-texte: #FFFFFF;
  --vert-mat-bord: #3F6B50;
  /* Feu du diagnostic express (lot FIN-VISU-3) : orange = doute (vigilance), rouge = problème (alerte), en grands blocs pleins ; ces deux
     jeux ne servent qu'au feu. Texte blanc : 4,98 sur l'orange, 7,54 sur le rouge. L'orange plein ne se confond pas avec « À décider »
     (ambre pâle, trait en tirets). `--feu-rouge-…` est distinct de `--rouge` (alertes), qui ne change pas. */
  --feu-orange-fond: #B4540A;
  --feu-orange-texte: #FFFFFF;
  --feu-orange-bord: #8F4208;
  --feu-rouge-fond: #A32020;
  --feu-rouge-texte: #FFFFFF;
  --feu-rouge-bord: #7F1818;
  /* Couleurs des trois groupes de la trajectoire (lot FIN-VISU-3), une par groupe ; ni vert ni orange (le vert et l'orange gardent le sens
     « terminé » et « doute »). Contre le fond de page : 5,39 ; 5,18 ; 4,21 (seuil 3 pour une barre). */
  --trajectoire-activite: #4A6585;
  --trajectoire-charges: #7A5A86;
  --trajectoire-bilan: #3B7B98;
  /* Repère de l'étape où l'on se trouve (contour épais de la carte et trait du segment). */
  --repere-etape: var(--texte);
  --rayon: 14px;
  --rayon-petit: 10px;
  --rayon-pill: 999px;
  --ombre: 0 1px 3px rgba(74, 101, 133, 0.12);
  /* Pastilles de statut des prêts et des offres (lot FIN-UX-2) : LE SEUL ENDROIT où régler ces couleurs.
     Trois variables par statut (fond, texte, bord) ; la table des statuts du serveur (`src/statuts-pret.js`)
     dit lesquelles chaque statut utilise. Le vert est admis ICI et pour « Accordé » et « Débloqué » seulement
     (exception de Matt du 2026-10-22 à la règle « aucun vert » ; test-charte.mjs le vérifie) ; ces verts ne sont pas adoucis
     (lot FIN-VISU-2). Fonds blancs ou sable pour les autres : la charte interdit un fond bleu hors boutons et variables prévues. */
  --statut-envisage-fond: #EAF0F7;
  --statut-envisage-texte: #3F5B7D;
  --statut-envisage-bord: #6F8BB0;
  --statut-demande-fond: #5A7494;
  --statut-demande-texte: #FFFFFF;
  --statut-demande-bord: #4A6585;
  --statut-accorde-fond: #E3F2E6;
  --statut-accorde-texte: #17592C;
  --statut-accorde-bord: #2E7D4F;
  --statut-debloque-fond: #1F6B3A;
  --statut-debloque-texte: #FFFFFF;
  --statut-debloque-bord: #14502A;
  --statut-refuse-fond: #FDE2E4;
  --statut-refuse-texte: #A30F1B;
  --statut-refuse-bord: #C1121F;
  --statut-abandonne-fond: #E7DFD0;
  --statut-abandonne-texte: #5B564C;
  --statut-abandonne-bord: #5B564C;
  --statut-offre-acceptee-fond: #FFFFFF;
  --statut-offre-acceptee-texte: #4A6585;
  --statut-offre-acceptee-bord: #4A6585;
  /* Pastille neutre du type de remboursement (bleu-gris, sans fond bleu). */
  --type-texte: #3F5169;
  --type-bord: #7A8DA5;
  /* États des chiffres (lot FIN-UX-3) : fond, texte, bord de chacun des cinq états. Le mot, le marqueur texte et la
     forme de la bordure disent l'état ; la teinte seule ne le dit jamais. */
  --etat-lu-fond: #FFFFFF;
  --etat-lu-texte: #4A6585;
  --etat-lu-bord: #4A6585;
  /* « Lu, à vérifier » (lot FIN-UX-3b) : fond sable, texte et trait ardoise, trait pointillé ; aucun vert, aucun fond bleu. */
  --etat-lu-a-verifier-fond: var(--sable-fonce);
  --etat-lu-a-verifier-texte: #4A6585;
  --etat-lu-a-verifier-bord: #4A6585;
  --etat-saisi-fond: #FFFFFF;
  --etat-saisi-texte: #3F5B7D;
  --etat-saisi-bord: #7F8FA3;
  --etat-a-remplir-fond: #FBF3E4;
  --etat-a-remplir-texte: #6B4A1A;
  --etat-a-remplir-bord: #9A7843;
  --etat-calcule-fond: var(--bleu-pale);
  --etat-calcule-texte: var(--bleu-pale-texte);
  --etat-calcule-bord: var(--bleu-pale-bord);
  /* Légende des états et compteurs « à remplir » (lot FIN-UX-3). Lot FIN-VISU-2 : le compteur quitte le bleu pâle (réservé à « Calculé »). */
  --legende-fond: #FFFFFF;
  --legende-texte: var(--texte);
  --legende-bord: var(--bleu-fonce);
  --compteur-fond: #FFFFFF;
  --compteur-texte: var(--bleu-fonce-survol);
  --compteur-bord: var(--saisi-bord);
  /* Blocs à bandeau (lot FIN-VISU-2) : fond, texte, bord de chacun des trois états. Mot, marqueur et forme du trait disent l'état. */
  /* Lot FIN-VISU-3 (suite, F-436) : « Complet » n'a plus de variables `--bloc-complet-…` ; il puise dans le vert mat (`--vert-mat-…`). */
  --bloc-a-completer-fond: var(--ambre-pale);
  --bloc-a-completer-texte: var(--ambre);
  --bloc-a-completer-bord: var(--ambre-bord);
  --bloc-pas-commence-fond: var(--sable-doux);
  --bloc-pas-commence-texte: var(--sable-doux-texte);
  --bloc-pas-commence-bord: var(--sable-doux-bord);
  /* Cartes des étapes du parcours (lot FIN-VISU-2) : quatre états ; « En cours » a en plus le bandeau doré (jamais seul : contour ardoise).
     Lot FIN-VISU-3 : « Terminée » n'a plus de variables `--etape-terminee-…` ; elle puise dans le vert mat (`--vert-mat-…`, ci-dessus). */
  --etape-a-decider-fond: var(--ambre-pale);
  --etape-a-decider-texte: var(--ambre);
  --etape-a-decider-bord: var(--ambre-bord);
  --etape-en-cours-fond: var(--blanc);
  --etape-en-cours-texte: var(--texte);
  --etape-en-cours-bord: var(--bleu-fonce);
  --etape-en-cours-accent: var(--or);
  --etape-a-venir-fond: var(--sable-doux);
  --etape-a-venir-texte: var(--sable-doux-texte);
  --etape-a-venir-bord: var(--sable-doux-bord);
  /* Onglets et barres de progression (lot FIN-VISU-2). */
  --onglet-actif-fond: var(--bleu-fonce);
  --onglet-actif-texte: var(--blanc);
  --onglet-bord: var(--saisi-bord);
  --progression-piste: var(--blanc);
  --progression-fond: var(--bleu-fonce);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--sable);
  color: var(--texte);
  max-width: 1100px;
  margin: 0 auto;
  min-height: 100vh;
}

/* Bandeau : le logo d'origine seul (fond blanc, comme celui du logo), un trait bleu foncé. */
.entete {
  background: var(--blanc); border-bottom: 1.5px solid var(--bleu-fonce);
  padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
/* L'image du logo porte de larges marges blanches : 72 px de haut pour que le nom se lise. */
.logo { display: block; height: 72px; width: auto; margin: -8px 0; }
.compte { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; font-size: 0.85rem; color: var(--gris-fonce); text-align: right; }
.compte-email { font-weight: 600; color: var(--texte); overflow-wrap: anywhere; }
.compte-role { display: inline-block; padding: 2px 10px; border-radius: var(--rayon-pill); border: 1px solid var(--bleu-fonce); color: var(--bleu-fonce); font-weight: 600; font-size: 0.8rem; }

main { padding: 16px; }
/* Lot FIN-VISU-2 : titres en graisse 600 (plus légers), le gras plein reste aux chiffres clés et aux alertes. */
h1, h2, h3, h4 { font-weight: 600; }
.titre-page { font-size: 1.3rem; color: var(--bleu-fonce); margin: 4px 0 14px; }
.carte { background: var(--blanc); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 16px; }

form label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--gris-fonce); margin-bottom: 14px; }
input, select {
  display: block; width: 100%; margin-top: 6px; padding: 10px 12px;
  font: inherit; font-size: 1rem; color: var(--texte);
  border: 1px solid var(--gris-moyen); border-radius: var(--rayon-petit); background: var(--blanc);
  transition: border-color 0.15s ease;
}
input:focus, select:focus { outline: 2px solid var(--bleu-fonce); outline-offset: 1px; border-color: var(--bleu-fonce); }

button.principal, button.secondaire, a.principal, a.secondaire {
  font: inherit; font-weight: 600; border-radius: var(--rayon-pill); cursor: pointer; padding: 12px 20px;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
button.principal { width: 100%; border: 0; background: var(--bleu-fonce); color: var(--blanc); font-size: 1rem; }
/* Lien en forme de bouton principal (retouches FIN-3d, 9bis a). */
a.principal { border: 0; background: var(--bleu-fonce); color: var(--blanc); font-size: 1rem; }
a.principal:hover { background: var(--bleu-fonce-survol); box-shadow: var(--ombre); }
button.principal:hover:not(:disabled) { background: var(--bleu-fonce-survol); box-shadow: var(--ombre); }
button.principal:active:not(:disabled) { transform: scale(0.99); }
button.principal:disabled { opacity: 0.6; cursor: progress; }
button.secondaire, a.secondaire { border: 1px solid var(--gris-moyen); background: var(--blanc); color: var(--texte); }
button.secondaire:hover:not(:disabled), a.secondaire:hover { border-color: var(--bleu-fonce); color: var(--bleu-fonce); }
button.secondaire:disabled { opacity: 0.5; cursor: not-allowed; }
a.bouton-lien { display: inline-block; text-decoration: none; }
button.petit, a.petit { padding: 6px 14px; font-size: 0.85rem; white-space: nowrap; }

.erreur { color: var(--rouge); font-weight: 600; }

/* Accueil : état vide. */
.etat-vide { text-align: center; padding: 32px 16px; }
.etat-vide-titre { font-size: 1.1rem; color: var(--bleu-fonce); margin-bottom: 6px; }
.etat-vide-aide { font-size: 0.9rem; color: var(--gris-fonce); line-height: 1.45; }

/* Page de connexion en plusieurs étapes (double authentification). */
.page-connexion [hidden] { display: none !important; }
.etape-connexion { max-width: 480px; margin: 0 auto; }
.page-connexion .titre-page { max-width: 480px; margin-left: auto; margin-right: auto; }
.titre-etape { font-size: 1.1rem; margin-bottom: 8px; color: var(--bleu-fonce); }
.aide-etape { font-size: 0.9rem; color: var(--gris-fonce); margin-bottom: 14px; line-height: 1.45; }
.aide-etape.petit { font-size: 0.8rem; margin: 6px 0 0; }
.etapes-activation { margin: 0 0 14px 18px; font-size: 0.9rem; line-height: 1.45; }
.etapes-activation li + li { margin-top: 10px; }
.cle-2fa {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.05rem; letter-spacing: 0.05em;
  background: var(--sable); border-radius: var(--rayon-petit); padding: 10px 12px; margin: 8px 0; word-break: break-all;
}
/* Code QR de l'activation : noir sur blanc quel que soit le thème, marge blanche
   comprise dans le dessin ; 260 px au plus, jamais plus large que la carte. */
.cadre-qr-2fa { margin: 8px 0; }
.qr-2fa { display: block; width: 260px; max-width: 100%; height: auto; aspect-ratio: 1 / 1; image-rendering: pixelated; background: var(--blanc); border-radius: var(--rayon-petit); }
.actions-cle { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 12px; }
.liens-etape { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 12px; }
button.lien { background: none; border: 0; padding: 0; font: inherit; font-size: 0.85rem; color: var(--bleu-fonce); text-decoration: underline; cursor: pointer; }
.liste-codes-secours {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1rem; columns: 2; column-gap: 48px;
  margin: 0 0 12px 30px; line-height: 1.8;
}
@media (max-width: 420px) {
  .liste-codes-secours { columns: 1; }
  .logo { height: 56px; }
}
form label.case-conservee, .case-conservee { display: flex; align-items: center; gap: 8px; font-weight: 600; margin: 4px 0 14px; }
.case-conservee input { width: auto; }
#erreur-connexion { max-width: 480px; margin: 12px auto 0; }
@media print {
  .page-connexion .entete, .page-connexion #erreur-connexion, .page-connexion .actions-cle,
  .page-connexion .case-conservee, .page-connexion #continuer-apres-codes, .page-connexion .titre-page { display: none !important; }
  .page-connexion .carte { box-shadow: none; }
}

/* ===================================================================== */
/* Écrans de dossier (lot FIN-3b). Charte : aucun vert, le bleu ne sert de fond qu'aux
   boutons ; les niveaux du diagnostic se distinguent par un libellé et une FORME de
   bordure (pleine, tirets, double, pointillés), jamais par la couleur seule. */
[hidden] { display: none !important; }
.bandeau-fictif {
  background: var(--ambre-pale); color: var(--ambre); border-bottom: 2px solid var(--ambre-bord);
  text-align: center; font-weight: 700; font-size: 0.9rem; padding: 6px 16px;
}
.bandeau-demo { border: 2px dashed var(--ambre-bord); color: var(--ambre); font-weight: 800; text-align: center; padding: 6px; border-radius: var(--rayon-petit); margin-bottom: 10px; letter-spacing: 0.03em; }
.navigation { display: flex; gap: 18px; padding: 10px 16px 0; flex-wrap: wrap; }
.lien-nav { color: var(--bleu-fonce); text-decoration: none; font-weight: 600; padding-bottom: 4px; border-bottom: 3px solid transparent; }
.lien-nav.actif, .lien-nav:hover { border-bottom-color: var(--bleu-fonce); }
main > * + * { margin-top: 14px; }
.titre-section { font-size: 1.15rem; color: var(--bleu-fonce); margin-bottom: 12px; }
.titre-sous-section { font-size: 1rem; color: var(--bleu-fonce); margin: 20px 0 8px; }
.sous-titre { color: var(--gris-fonce); margin: -8px 0 10px; }
.resume { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; font-size: 0.9rem; margin: 8px 0; }
.resume dt { font-weight: 600; color: var(--gris-fonce); }
.resume dd { overflow-wrap: anywhere; }

.onglets, .onglets-exercices { display: flex; flex-wrap: wrap; gap: 8px; }
.onglets-exercices { margin: 12px 0; }
/* Lot FIN-VISU-2 : onglet actif ardoise plein, texte blanc ; inactifs blancs, bord fin. La barre des onglets du dossier est posée sur un
   bandeau blanc : le bord des onglets inactifs y contraste à 3,30 (2,96 seulement sur le sable de la page). */
nav.onglets { background: var(--blanc); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 8px; }
button.onglet {
  font: inherit; font-weight: 600; font-size: 0.9rem; cursor: pointer; padding: 8px 16px; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px;
  border: 1px solid var(--onglet-bord); border-radius: var(--rayon-pill); background: var(--blanc); color: var(--texte);
}
button.onglet:hover { border-color: var(--bleu-fonce); color: var(--bleu-fonce); }
button.onglet.actif { border: 1px solid var(--onglet-actif-fond); background: var(--onglet-actif-fond); color: var(--onglet-actif-texte); }
button.onglet:focus-visible { outline: 2px solid var(--bleu-fonce); outline-offset: 2px; }
.marque-onglet { position: relative; font-size: 0.78rem; }
/* Lot FIN-VISU-3 (suite, F-436) : la marque « ✓ » d'un onglet complet est une pastille vert mat (le mot « complet » est lu aux lecteurs d'écran). */
.marque-onglet.complet { background: var(--vert-mat-fond); color: var(--vert-mat-texte); border: 1px solid var(--vert-mat-bord); border-radius: var(--rayon-pill); padding: 0 7px; font-weight: 700; }
.pastille-onglet { font-weight: 600; padding: 0 7px; border-radius: var(--rayon-pill); border: 1px dashed var(--bloc-a-completer-bord); background: var(--bloc-a-completer-fond); color: var(--bloc-a-completer-texte); white-space: nowrap; }

.formulaire.grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 4px 16px; align-items: start; }
.large { grid-column: 1 / -1; }
.champ, form label.champ { display: block; font-size: 0.85rem; font-weight: 600; color: var(--gris-fonce); margin-bottom: 12px; }
.libelle-champ { display: block; color: var(--texte); }
/* Lot FIN-VISU-2 : lignes d'aide gardées, plus petites et atténuées (gris-bleu, 5,44 sur blanc). */
.aide-champ { display: block; font-size: 0.78rem; font-weight: 400; color: var(--gris-fonce); margin-top: 4px; line-height: 1.4; }
textarea {
  display: block; width: 100%; margin-top: 6px; padding: 10px 12px; font: inherit; font-size: 0.95rem; color: var(--texte);
  border: 1px solid var(--gris-moyen); border-radius: var(--rayon-petit); background: var(--blanc); resize: vertical;
}
textarea:focus { outline: 2px solid var(--bleu-fonce); outline-offset: 1px; border-color: var(--bleu-fonce); }
fieldset.groupe, fieldset.rubrique { border: 1px solid var(--gris-moyen); border-radius: var(--rayon-petit); padding: 10px 14px; margin: 8px 0 12px; }
fieldset legend { font-weight: 600; color: var(--bleu-fonce); padding: 0 6px; }
/* Lot FIN-PREV-1 : un fieldset s'élargit par défaut à son contenu (min-width: min-content) ; sans cette ligne, le tableau
   défilant du nouveau dirigeant élargirait toute la page en fenêtre étroite. */
fieldset.nouveau-dirigeant { min-width: 0; }
.actions, .ligne-actions, .actions-retraitement { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.ligne-actions input { width: auto; flex: 1 1 140px; margin-top: 0; }
button.principal.petit, .actions button.principal { width: auto; }
button.danger { border-color: var(--rouge); color: var(--rouge); }
details > summary { cursor: pointer; font-weight: 600; }
/* Lot FIN-STRUCT-1 : titre d'un bloc repliable (postes clés), sur la ligne du triangle. */
summary .titre-en-ligne { display: inline; }
summary.bouton-resume { color: var(--bleu-fonce); font-size: 1rem; }
details[open] > summary { margin-bottom: 10px; }
.suppression { margin-top: 12px; border-top: 1px solid var(--gris-moyen); padding-top: 10px; font-size: 0.9rem; }
.suppression summary { color: var(--rouge); }

.message { border-radius: var(--rayon-petit); padding: 10px 14px; margin: 8px 0; font-size: 0.9rem; line-height: 1.45; }
.message ul, .raisons ul, .niveau ul, .liste-simple { margin: 6px 0 0 20px; }
.message button { margin-top: 8px; margin-right: 8px; }
.message-erreur { background: var(--rouge-pale); border-left: 5px solid var(--rouge); color: var(--texte); }
.message-erreur > p:first-child, .message-erreur > summary { color: var(--rouge); font-weight: 700; }
.message-info { background: var(--sable); border-left: 5px dotted var(--gris-fonce); }
.message-succes { background: var(--blanc); border: 1px solid var(--bleu-fonce); border-left: 5px solid var(--bleu-fonce); color: var(--bleu-fonce); font-weight: 600; }
.avertissement { color: var(--ambre); font-weight: 600; }
.duree { font-size: 0.9rem; margin: 0 0 12px; }

.tableau-defilant { overflow-x: auto; margin: 6px 0 10px; -webkit-overflow-scrolling: touch; }
table.tableau { border-collapse: collapse; width: 100%; font-size: 0.86rem; }
table.tableau th, table.tableau td { padding: 6px 8px; border-bottom: 1px solid var(--gris-moyen); text-align: left; vertical-align: top; }
table.tableau thead th { background: var(--sable-fonce); font-weight: 600; white-space: nowrap; }
table.tableau tbody th { font-weight: 600; }
table.tableau td:nth-child(2), table.tableau td:nth-child(3), table.tableau td:nth-child(4) { white-space: nowrap; }
.nom-ratio { display: block; }
.nom-etape { display: block; font-weight: 600; }
.effet-etape { display: block; }
table.cascade tbody tr:last-child th, table.cascade tbody tr:last-child td { border-top: 2px solid var(--gris-moyen); font-weight: 700; }
.banquier { display: block; font-size: 0.76rem; font-weight: 400; color: var(--gris-fonce); margin-top: 2px; }
.ratio-non-calcule { color: var(--gris-fonce); font-style: italic; }

.pastille { display: inline-block; padding: 1px 9px; border-radius: var(--rayon-pill); border: 1px solid var(--gris-fonce); font-size: 0.75rem; font-weight: 600; color: var(--gris-fonce); margin: 0 4px 2px 0; white-space: nowrap; }
.pastille.statut-validee, .pastille.statut-validé { border: 2px solid var(--bleu-fonce); color: var(--bleu-fonce); }
.pastille.statut-refusé { border-style: dotted; }
.pastille.statut-proposé, .pastille.statut-apercu { border-style: dashed; color: var(--ambre); border-color: var(--ambre-bord); }
.pastille-demo { border-style: dashed; color: var(--ambre); border-color: var(--ambre-bord); margin-left: 6px; }

/* Niveaux du diagnostic : symbole dans le libellé ET forme de la bordure. */
.niveau { border-left-width: 6px; border-radius: var(--rayon-petit); padding: 8px 12px; margin: 8px 0; font-size: 0.9rem; }
.titre-niveau { font-weight: 600; }
.niveau-alerte { border-left-style: solid; border-left-color: var(--rouge); background: var(--rouge-pale); }
.niveau-vigilance { border-left-style: dashed; border-left-color: var(--ambre-bord); background: var(--ambre-pale); }
.niveau-point-fort { border-left-style: double; border-left-color: var(--bleu-fonce); background: var(--blanc); border-top: 1px solid var(--gris-moyen); border-right: 1px solid var(--gris-moyen); border-bottom: 1px solid var(--gris-moyen); }
.niveau-information { border-left-style: dotted; border-left-color: var(--gris-fonce); background: var(--sable); }
/* Lot FIN-PARCOURS-2 : bloc « Diagnostic express » en tête de l'onglet Analyse.
   Lot FIN-VISU-3 : le feu est un vrai feu tricolore, en grand bloc plein sur toute la largeur du bloc : vert mat (rien d'alerte ni de
   vigilance), orange (doute : vigilance), rouge (problème : alerte), sable en points pour « Pas assez de données » (jamais vert). Le mot,
   le marqueur (● ◆ ▲ ○) et la FORME du trait (double, tirets, plein, points) le disent aussi : jamais la couleur seule. C'est une
   information, pas une action : ni ombre, ni survol, ni curseur main, ni coins de bouton (le bloc plein n'a pas la forme d'un bouton). */
.bloc-diagnostic-express { border-bottom: 1px solid var(--gris-moyen); padding-bottom: 12px; margin-bottom: 16px; }
.feu-diagnostic { display: block; width: 100%; padding: 18px 22px; margin: 10px 0 14px; border-radius: 4px; cursor: default; font-size: 1.1rem; line-height: 1.4; }
.feu-diagnostic p { margin: 0; }
.feu-diagnostic .titre-niveau { font-size: 1.7rem; font-weight: 800; margin-bottom: 4px; }
.feu-vert { background: var(--vert-mat-fond); color: var(--vert-mat-texte); border: 6px double var(--vert-mat-bord); }
.feu-orange { background: var(--feu-orange-fond); color: var(--feu-orange-texte); border: 4px dashed var(--feu-orange-bord); }
.feu-rouge { background: var(--feu-rouge-fond); color: var(--feu-rouge-texte); border: 4px solid var(--feu-rouge-bord); }
.feu-donnees { background: var(--sable-doux); color: var(--sable-doux-texte); border: 4px dotted var(--sable-doux-bord); }
.raisons-diagnostic, .decision-diagnostic, .postes-cles { margin: 12px 0; }
.formulaire-decision { margin: 8px 0; }
.postes-cles-exercice { margin: 12px 0; }

/* Comptes : un poste = libellé, champ, état toujours visible, aide. */
.postes .rubrique { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2px 18px; }
.postes .rubrique legend { grid-column: 1 / -1; }
label.poste { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 10px; }
.saisie-poste { display: flex; align-items: center; gap: 8px; }
.saisie-poste input { flex: 1 1 auto; }
.etat-poste { flex: 0 0 auto; font-size: 0.72rem; font-weight: 600; padding: 1px 8px; border-radius: var(--rayon-pill); margin-top: 6px; white-space: nowrap; }
.etat-vide { border: 1px dashed var(--gris-fonce); color: var(--gris-fonce); font-style: italic; }
.etat-zero { border: 1px solid var(--bleu-fonce); color: var(--bleu-fonce); }
.etat-illisible { border: 1px solid var(--rouge); color: var(--rouge); }
.facultatifs { margin: 10px 0; }
.mise-a-zero { margin: 6px 0 12px; font-size: 0.9rem; }

/* Retraitements. */
.carte-retraitement { border: 1px solid var(--gris-moyen); border-left-width: 5px; border-radius: var(--rayon-petit); padding: 12px 14px; margin: 10px 0; background: var(--blanc); }
.carte-retraitement.statut-validé { border-left: 5px solid var(--bleu-fonce); }
.carte-retraitement.statut-proposé, .carte-retraitement.statut-apercu { border-left: 5px dashed var(--ambre-bord); }
.carte-retraitement.statut-refusé { border-left: 5px dotted var(--gris-fonce); }
.titre-retraitement { font-size: 0.98rem; color: var(--bleu-fonce); margin-bottom: 4px; }
.titre-lignes { font-weight: 600; font-size: 0.85rem; margin-top: 8px; }
.titre-apercu { font-weight: 600; color: var(--ambre); margin-bottom: 6px; }
.sens { font-size: 0.9rem; }
.raisons { background: var(--ambre-pale); border-radius: var(--rayon-petit); padding: 8px 12px; margin: 8px 0; font-size: 0.86rem; }
.aide-type { font-size: 0.88rem; line-height: 1.45; background: var(--sable); border-radius: var(--rayon-petit); padding: 8px 12px; }
.formulaire-retraitement { margin-top: 10px; }
.validation { margin: 10px 0; padding: 10px 12px; border: 1px dashed var(--gris-moyen); border-radius: var(--rayon-petit); }
.selecteurs { display: flex; flex-wrap: wrap; gap: 0 16px; }
.selecteurs .champ { flex: 0 1 220px; }
.ligne-retraitement { font-size: 0.88rem; margin: 4px 0; }

/* Financement (lot FIN-3c). États du plan : symbole dans le libellé ET forme de la bordure
   (pleine, double, tirets, pointillés), jamais la couleur seule, sans vert. Mois à solde
   négatif : libellé « ▼ Solde négatif » ET bordure gauche épaisse en tirets. */
.carte-pret { border: 1px solid var(--gris-moyen); border-left: 5px solid var(--bleu-fonce); border-radius: var(--rayon-petit); padding: 12px 14px; margin: 10px 0; background: var(--blanc); }
.annuites { font-size: 0.9rem; margin: 10px 0; }
.etat-plan { border-left-width: 6px; border-radius: var(--rayon-petit); padding: 8px 12px; margin: 8px 0; font-size: 0.92rem; }
.plan-equilibre { border-left-style: double; border-left-color: var(--bleu-fonce); background: var(--blanc); border-top: 1px solid var(--gris-moyen); border-right: 1px solid var(--gris-moyen); border-bottom: 1px solid var(--gris-moyen); }
.plan-reste { border-left-style: solid; border-left-color: var(--rouge); background: var(--rouge-pale); }
.plan-excedent { border-left-style: dashed; border-left-color: var(--ambre-bord); background: var(--ambre-pale); }
.plan-non-calculable { border-left-style: dotted; border-left-color: var(--gris-fonce); background: var(--sable); }
table.calendrier input { margin-top: 0; padding: 6px 8px; font-size: 0.88rem; min-width: 72px; }
table.calendrier input[type="month"] { min-width: 128px; }
tr.mois-negatif td:first-child { border-left: 5px dashed var(--rouge); }
.solde-negatif { color: var(--rouge); font-weight: 700; }
.resume-calendrier { font-weight: 700; color: var(--rouge); }
.colonne-cumul { font-weight: 600; }

@media (max-width: 600px) {
  .entete { flex-wrap: wrap; }
  .compte { justify-content: flex-start; text-align: left; }
  .resume { grid-template-columns: 1fr; }
  .resume dd { margin-bottom: 4px; }
  main { padding: 12px; }
  .carte { padding: 12px; }
}

/* Lot FIN-3d : page de revue des valeurs lues dans les PDF (liste à gauche, page du PDF à droite). */
body.page-large { max-width: 1600px; }
.revue-grille { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 10px; }
.revue-liste { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.revue-visionneuse { position: sticky; top: 8px; }
iframe.cadre-pdf { display: block; width: 100%; height: calc(100vh - 240px); min-height: 420px; border: 1px solid var(--gris-moyen); border-radius: var(--rayon-petit); background: var(--blanc); margin: 8px 0; }
.reglage-document { margin: 10px 0; }
.entete-page { margin: 8px 0; }
.entete-page ul { margin: 4px 0 6px 18px; font-size: 0.82rem; }
.valeurs-lues { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 12px; }
.valeur-lue { border: 1px solid var(--gris-moyen); border-left: 5px solid var(--gris-fonce); border-radius: var(--rayon-petit); padding: 8px 10px; }
.valeur-lue.statut-confirme { border-left: 5px solid var(--bleu-fonce); }
.valeur-lue.statut-a-verifier { border-left: 5px dashed var(--ambre-bord); }
.valeur-lue.statut-contredit { border-left: 5px double var(--rouge); background: var(--rouge-pale); }
.ligne-valeur { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.poste-lu { font-weight: 600; }
.chiffre-lu { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pastille.statut-confirme { border: 2px solid var(--bleu-fonce); color: var(--bleu-fonce); }
.pastille.statut-a-verifier { border-style: dashed; color: var(--ambre); border-color: var(--ambre-bord); }
.pastille.statut-contredit { border: 2px double var(--rouge); color: var(--rouge); }
.pastille.provenance { border-style: dotted; }
/* Lot FIN-3e : état des pages, saisie assistée, lignes à affecter, provenance dans « Comptes ». */
.liste-pages { list-style: none; padding: 0; margin: 6px 0; display: flex; flex-direction: column; gap: 8px; }
.etat-page { border: 1px solid var(--gris-moyen); border-left: 5px solid var(--bleu-fonce); border-radius: var(--rayon-petit); padding: 6px 10px; }
.etat-page.page-image, .etat-page.page-vide { border-left: 5px dashed var(--ambre-bord); }
.etat-page.page-detail, .etat-page.page-texte { border-left: 5px dotted var(--gris-fonce); }
.etat-page p { margin: 2px 0; }
.saisie-page { margin-top: 10px; }
.saisie-compacte { padding: 4px 10px; }
.saisie-compacte details summary { font-size: 0.8rem; }
.lignes-saisie { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.ligne-saisie { display: flex; flex-direction: column; gap: 2px; border-bottom: 1px solid var(--sable-fonce); padding-bottom: 6px; }
.ligne-saisie input { max-width: 14rem; }
.conversion-saisie { margin-left: 8px; font-variant-numeric: tabular-nums; color: var(--bleu-fonce); font-weight: 600; }
.conversion-saisie.erreur-saisie { color: var(--rouge); }
.confirmation-saisie { display: flex; align-items: center; gap: 6px; }
.lignes-offertes .ligne-offerte { border: 1px solid var(--gris-moyen); border-radius: var(--rayon-petit); padding: 6px 10px; margin: 6px 0; }
.provenance-poste { display: block; font-size: 0.78rem; font-weight: 400; color: var(--gris-fonce); }
.provenance-corrigee { display: block; font-size: 0.8rem; }
.case-a-cocher { display: inline-flex; align-items: center; gap: 6px; font-size: 0.88rem; margin: 6px 0; cursor: pointer; }
.case-a-cocher input { width: auto; }
.decision-contredit { margin-top: 6px; background: var(--blanc); }
p.extrait { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.8rem; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--sable); padding: 6px 8px; border-radius: var(--rayon-petit); }
.document-cible { outline: 3px solid var(--bleu-fonce); outline-offset: 2px; }
/* Encart de l'onglet « Pièces » : le lien général vers la lecture des PDF (retouches FIN-3d, 9bis a). */
.encart-lecture { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 12px 0; padding: 12px 14px; background: var(--sable); border: 2px solid var(--bleu-fonce); border-radius: var(--rayon-petit); }
.encart-lecture-texte { flex: 1 1 260px; margin: 0; font-size: 0.92rem; }
/* Fenêtre étroite (9bis c), moins de 1100 px : le cadre « Page du PDF » passe SOUS la liste, pleine
   largeur, avec une hauteur minimale lisible ; il n'est plus collé en haut de l'écran. En deux
   colonnes, sa hauteur suit celle de la fenêtre (collant : jamais plus haut que l'écran). */
@media (max-width: 1100px) {
  .revue-grille { grid-template-columns: minmax(0, 1fr); }
  .revue-visionneuse { position: static; min-width: 0; }
  iframe.cadre-pdf { height: 70vh; min-height: 420px; }
}
/* Lot FIN-6b : prévisionnel et échéances des prêts. */
.etat-previsionnel { margin: 6px 0; }
.etat-previsionnel.etat-bloque, .etat-previsionnel.etat-non-calculable { color: var(--ambre); }
.encadre-suppositions { border: 2px solid var(--bleu-fonce); border-radius: var(--rayon-petit); background: var(--sable); padding: 8px 12px; margin: 10px 0; }
.encadre-suppositions ul { margin: 4px 0 4px 20px; font-size: 0.88rem; } /* retrait à l'intérieur du cadre (le reset global met le padding à 0 : sans marge, les puces sortent) */
.aide-champ.bloc { display: block; font-weight: 400; }
table.hypotheses input { min-width: 7rem; }
.resume-echeances { font-weight: 700; margin: 4px 0; }
.carte-pret-echeances { border: 1px solid var(--gris-moyen); border-radius: var(--rayon-petit); padding: 6px 10px; margin: 8px 0; }

/* Lot FIN-7b : type de remboursement et garanties d'un prêt, synthèse des garanties, double lecture
   du prévisionnel. Aucun vert ; aucun fond bleu ; pas de couleur seule (libellés et formes). */
.aide-options { list-style: none; margin: 4px 0 8px; padding: 0; font-size: 0.82rem; color: var(--gris-fonce); line-height: 1.4; }
.aide-options li { margin: 2px 0; }
.ligne-garantie { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 4px 14px; align-items: start; border: 1px dashed var(--gris-moyen); border-radius: var(--rayon-petit); padding: 8px 10px; margin: 8px 0; }
.ligne-garantie [hidden] { display: none; }
.synthese-garanties { border: 1px solid var(--gris-moyen); border-left: 5px double var(--bleu-fonce); border-radius: var(--rayon-petit); padding: 8px 12px; margin: 12px 0; background: var(--blanc); font-size: 0.92rem; }
.double-lecture { border: 1px solid var(--gris-moyen); border-left: 5px dashed var(--ambre-bord); border-radius: var(--rayon-petit); padding: 8px 12px; margin: 10px 0; background: var(--blanc); }
p.double-lecture { font-size: 0.9rem; }
.double-lecture th[scope="row"] { min-width: 11rem; }

/* Lot FIN-UX-1 : manquants du prévisionnel rangés par catégorie, raison d'un bouton bloqué. */
.groupe-manquants { margin-top: 0.75rem; }
.groupe-manquants ul { margin-top: 0.25rem; }
.bandeau-raison { margin-top: 0.5rem; }
.phrase-comptes { margin-top: 0.5rem; }

/* Lot FIN-UX-2 : pastilles de statut, calendrier, suggestions en tableau, largeur de la page du dossier.
   Couleurs des pastilles : variables `--statut-…` de :root, nulle part ailleurs. Le mot ET le symbole disent le
   statut, la forme de la bordure aussi : jamais la couleur seule. */
.pastille.pastille-statut { background: var(--blanc); border-width: 2px; border-style: solid; font-weight: 700; padding: 2px 11px; font-size: 0.8rem; }
.pastille-statut.statut-pret-envisage { background: var(--statut-envisage-fond); color: var(--statut-envisage-texte); border-color: var(--statut-envisage-bord); border-style: dotted; }
.pastille-statut.statut-pret-demande { background: var(--statut-demande-fond); color: var(--statut-demande-texte); border-color: var(--statut-demande-bord); border-style: solid; }
.pastille-statut.statut-pret-accorde { background: var(--statut-accorde-fond); color: var(--statut-accorde-texte); border-color: var(--statut-accorde-bord); border-style: solid; }
.pastille-statut.statut-pret-debloque { background: var(--statut-debloque-fond); color: var(--statut-debloque-texte); border-color: var(--statut-debloque-bord); border-style: double; border-width: 4px; padding: 0 9px; }
.pastille-statut.statut-pret-refuse { background: var(--statut-refuse-fond); color: var(--statut-refuse-texte); border-color: var(--statut-refuse-bord); border-style: dashed; }
.pastille-statut.statut-pret-abandonne { background: var(--statut-abandonne-fond); color: var(--statut-abandonne-texte); border-color: var(--statut-abandonne-bord); border-style: dotted; text-decoration: line-through; }
.pastille-statut.statut-pret-inconnu, .pastille-statut.statut-offre-inconnu { border-style: dashed; color: var(--gris-fonce); border-color: var(--gris-fonce); }
.pastille-statut.statut-offre-recue { background: var(--statut-demande-fond); color: var(--statut-demande-texte); border-color: var(--statut-demande-bord); border-style: solid; }
.pastille-statut.statut-offre-acceptee { background: var(--statut-offre-acceptee-fond); color: var(--statut-offre-acceptee-texte); border-color: var(--statut-offre-acceptee-bord); border-style: double; border-width: 4px; padding: 0 9px; }
.pastille-statut.statut-offre-refusee { background: var(--statut-refuse-fond); color: var(--statut-refuse-texte); border-color: var(--statut-refuse-bord); border-style: dashed; }
.pastille.pastille-type { background: var(--blanc); color: var(--type-texte); border: 1px solid var(--type-bord); font-weight: 600; }
.mention-non-compte { display: inline-block; font-size: 0.75rem; font-weight: 700; color: var(--gris-fonce); border: 1px dashed var(--gris-fonce); border-radius: var(--rayon-pill); padding: 1px 9px; margin: 0 4px 2px 0; }
/* Le bord gauche de la carte d'un prêt reprend le statut : même variable, forme du trait propre à chaque statut. */
.carte-pret.statut-pret-envisage { border-left: 6px dotted var(--statut-envisage-bord); }
.carte-pret.statut-pret-demande { border-left: 6px solid var(--statut-demande-bord); }
.carte-pret.statut-pret-accorde { border-left: 8px solid var(--statut-accorde-bord); }
.carte-pret.statut-pret-debloque { border-left: 10px double var(--statut-debloque-bord); }
.carte-pret.statut-pret-refuse { border-left: 6px dashed var(--statut-refuse-bord); }
.carte-pret.statut-pret-abandonne { border-left: 6px dotted var(--statut-abandonne-bord); }
.carte-pret.non-compte { background: var(--sable); color: var(--gris-fonce); }
.carte-pret.statut-pret-abandonne .titre-retraitement { text-decoration: line-through; }
.synthese-prets { font-weight: 700; background: var(--sable); border: 1px solid var(--gris-moyen); border-radius: var(--rayon-petit); padding: 8px 12px; margin: 8px 0; }

/* Calendrier : barre collante (trésorerie d'ouverture + « Enregistrer ») en haut de la zone, synthèse du serveur. */
.barre-calendrier { position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 16px; background: var(--blanc); border: 1px solid var(--gris-moyen); border-bottom: 3px solid var(--bleu-fonce); border-radius: var(--rayon-petit); padding: 10px 12px; margin: 8px 0; box-shadow: var(--ombre); }
.barre-calendrier .champ { flex: 0 1 300px; margin: 0; }
.barre-calendrier button.principal { flex: 0 0 auto; margin-bottom: 2px; }
.barre-calendrier > div:last-child { flex: 1 1 100%; }
.mention-simulation { margin: 0; font-size: 0.85rem; font-weight: 600; color: var(--ambre); border-left: 5px dashed var(--ambre-bord); background: var(--ambre-pale); border-radius: var(--rayon-petit); padding: 6px 10px; }
.synthese-tresorerie { margin: 8px 0; }
.synthese-tresorerie p { margin: 4px 0; font-weight: 600; }
/* Lot FIN-CAL-1 : mois qui ne portent que des remboursements calculés (la forme — bord pointillé — et le texte suffisent, la couleur ne sert pas seule). */
.synthese-tresorerie p.phrase-sans-flux { font-weight: 400; color: var(--ambre); border-left: 5px dashed var(--ambre-bord); background: var(--ambre-pale); border-radius: var(--rayon-petit); padding: 6px 10px; }
button.lien { margin-left: 2px; }
tr.ligne-reperee td { background: var(--ambre-pale); outline: 2px dashed var(--ambre-bord); outline-offset: -2px; }

/* Suggestions de retraitements en tableau : années en gras, une colonne par exercice qui a une information. */
.tableau-suggestions th.exercice-suggestion { font-weight: 800; }
.tableau-suggestions tbody th[scope="row"] { max-width: 26rem; font-weight: 400; }
table.tableau.tableau-suggestions td:nth-child(n) { white-space: normal; min-width: 13rem; max-width: 24rem; }
table.tableau.tableau-suggestions td:last-child { min-width: 11rem; }
.ligne-cellule { display: block; margin-bottom: 4px; }
.etat-ajout { display: inline-block; margin-left: 8px; font-weight: 700; color: var(--bleu-fonce); }

/* Largeur de la page du dossier : 1600 px (comme la page de relecture). La première colonne des tableaux larges reste
   fixe quand on les fait défiler de gauche à droite ; pas sur téléphone, où elle prendrait la place du reste. */
@media (min-width: 601px) {
  .tableau-defilant table.tableau thead th:first-child { position: sticky; left: 0; z-index: 3; }
  .tableau-defilant table.tableau tbody th[scope="row"], .tableau-defilant table.calendrier tbody td:first-child { position: sticky; left: 0; z-index: 2; background: var(--blanc); box-shadow: 1px 0 0 var(--gris-moyen); }
  tr.ligne-reperee td:first-child { background: var(--ambre-pale); }
}

/* Lot FIN-UX-3 : états visuels des chiffres, légende, compteurs « à remplir ». Cinq états, chacun = un mot + un marqueur
   texte + une forme de bordure + une teinte (variables `--etat-…` de :root) ; la couleur ne dit jamais l'état seule.
   Lu : trait plein épais ; Lu, à vérifier : trait pointillé épais sur fond sable ; Saisi : trait plein fin ; À remplir : tirets ; Calculé : double trait sur fond bleu pâle. */
.sr-seulement { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* position: relative : le mot caché (.sr-seulement, position absolue) reste dans sa cellule et dans le cadre défilant du tableau ; sans cela il déborde et crée un défilement horizontal de toute la page. */
.valeur-marquee, .badge-etat { position: relative; display: inline-block; max-width: 100%; border-radius: var(--rayon-petit); padding: 1px 8px; font-variant-numeric: tabular-nums; border-width: 2px; border-style: solid; }
.badge-etat { flex: 0 0 auto; font-size: 0.72rem; font-weight: 700; padding: 1px 9px; border-radius: var(--rayon-pill); white-space: nowrap; margin-top: 6px; }
.marqueur-etat { font-weight: 700; margin-right: 4px; }
.marque-lu { background: var(--etat-lu-fond); color: var(--etat-lu-texte); border: 3px solid var(--etat-lu-bord); }
.marque-lu-a-verifier { background: var(--etat-lu-a-verifier-fond); color: var(--etat-lu-a-verifier-texte); border: 3px dotted var(--etat-lu-a-verifier-bord); }
.marque-saisi { background: var(--etat-saisi-fond); color: var(--etat-saisi-texte); border: 1px solid var(--etat-saisi-bord); }
.marque-a-remplir { background: var(--etat-a-remplir-fond); color: var(--etat-a-remplir-texte); border: 2px dashed var(--etat-a-remplir-bord); }
.marque-calcule { background: var(--etat-calcule-fond); color: var(--etat-calcule-texte); border: 3px double var(--etat-calcule-bord); }
/* Champ de saisie qui porte un état : même forme de bordure que le badge. Le fond reste celui de l'état. */
input.marque-lu, input.marque-lu-a-verifier, input.marque-saisi, input.marque-a-remplir, select.marque-saisi, select.marque-a-remplir { display: block; width: 100%; border-radius: var(--rayon-petit); padding: 10px 12px; }
input.marque-lu, input.marque-lu-a-verifier { border-width: 3px; }
.badge-etat.compact { padding: 0 6px; margin-top: 0; }
input.marque-a-remplir::placeholder { color: var(--etat-a-remplir-texte); opacity: 1; }
/* Valeur calculée dans un tableau ou une phrase : jamais un champ de saisie. */
td .valeur-marquee, th .valeur-marquee { white-space: nowrap; }
.bloc-calcule { border: 3px double var(--etat-calcule-bord); background: var(--etat-calcule-fond); color: var(--etat-calcule-texte); border-radius: var(--rayon-petit); padding: 6px 10px; margin: 8px 0; }
.bloc-calcule > .marqueur-etat { margin-right: 6px; }
.precision-etat { display: block; font-size: 0.78rem; font-weight: 400; color: var(--etat-a-remplir-texte); }

/* Légende en tête d'onglet (pliable, ouverte par défaut) et compteur « N postes à remplir sur M ». */
.legende-etats { background: var(--legende-fond); color: var(--legende-texte); border: 1px solid var(--legende-bord); border-left: 5px solid var(--legende-bord); border-radius: var(--rayon-petit); padding: 8px 12px; margin: 8px 0 12px; font-size: 0.88rem; }
.legende-etats > summary { color: var(--legende-texte); font-weight: 600; }
.legende-etats ul { list-style: none; margin: 8px 0 4px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px 16px; }
.legende-etats li { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.legende-etats .forme { color: var(--gris-fonce); font-size: 0.78rem; }
.compteur-postes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; background: var(--compteur-fond); color: var(--compteur-texte); border: 1px solid var(--compteur-bord); border-left: 5px dashed var(--compteur-bord); border-radius: var(--rayon-petit); padding: 6px 12px; margin: 8px 0; font-weight: 700; }
.compteur-postes.complet { border-left-style: solid; }
.compteur-postes.a-verifier { border-left-style: dotted; border-left-width: 6px; }
.compteur-postes button.lien { color: var(--compteur-texte); font-weight: 600; }
/* Lot FIN-VISU-2 : compteur encore à remplir sur ambre doux (le bleu pâle est réservé à « Calculé »). */
.compteur-postes.a-completer { background: var(--bloc-a-completer-fond); color: var(--bloc-a-completer-texte); border-color: var(--bloc-a-completer-bord); }
.compteur-postes.a-completer button.lien { color: var(--bloc-a-completer-texte); }

/* Lot FIN-ENTREE-1 : adresses structurées en quatre parties (mise en page seulement, aucune couleur nouvelle). */
fieldset.groupe-adresse { min-width: 0; }
.parties-adresse { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 4px 16px; }
.fiche-annuaire { min-width: 0; overflow-wrap: anywhere; }

/* Lot FIN-PARCOURS-1 : barre du parcours (liste ordonnée de six étapes), étape commerciale, arrêt du dossier, liste « À décider ».
   Aucune couleur nouvelle : l'état de chaque étape et la nature de chaque élément sont écrits en texte ; la forme du trait
   les répète, la teinte ne dit jamais rien seule. */
.parcours-dossier { margin-top: 12px; }
.etape-commerciale { margin: 0 0 10px; }
.aide-champ.en-ligne { display: inline; margin: 0; }
.barre-parcours { list-style: none; margin: 12px 0 8px; padding: 0 6px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.barre-parcours li { min-width: 0; }
a.etape-parcours {
  display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 8px 12px; text-decoration: none; color: var(--texte);
  border: 1px solid var(--gris-moyen); border-radius: var(--rayon-petit); background: var(--blanc); overflow-wrap: anywhere;
}
a.etape-parcours:hover { border-color: var(--bleu-fonce); color: var(--bleu-fonce); }
a.etape-parcours:focus-visible { outline: 2px solid var(--bleu-fonce); outline-offset: 2px; }
a.etape-parcours[aria-current="step"] { border: 1.5px solid var(--bleu-fonce); color: var(--bleu-fonce); box-shadow: inset 0 -3px 0 var(--bleu-fonce); }
.numero-etape { font-weight: 600; color: var(--bleu-fonce); }
.libelle-etape { font-weight: 600; }
.etat-etape { font-size: 0.8rem; color: var(--gris-fonce); }
a.etape-parcours.etat-terminee { border-left: 5px solid var(--vert-mat-bord); }
a.etape-parcours.etat-a-decider { border-left: 5px dashed var(--ambre-bord); }
a.etape-parcours.etat-a-decider .etat-etape { color: var(--ambre); font-weight: 700; }
a.etape-parcours.etat-en-cours { border-left: 5px dotted var(--bleu-fonce); }
/* Lot FIN-VISU-2 : chaque étape est une carte ; l'état (classe du serveur) est dit par le mot et le marqueur ET par la forme du trait :
   Terminée = carte pleine ; À décider = tirets fins ; En cours = contour plein et bandeau doré (le doré n'est jamais seul) ; À venir =
   points sur sable doux. Les mêmes classes servent aux segments de la bande d'avancement et à sa légende. */
/* Lot FIN-VISU-3 : « Terminée » en vert mat (avant : ardoise), carte, segment de la bande et légende ; mot « Terminée » et marqueur ✓ gardés. */
.carte-terminee { background: var(--vert-mat-fond); color: var(--vert-mat-texte); border: 1.5px solid var(--vert-mat-bord); }
.carte-a-decider { background: var(--etape-a-decider-fond); color: var(--etape-a-decider-texte); border: 1.5px dashed var(--etape-a-decider-bord); }
.carte-en-cours { background: var(--etape-en-cours-fond); color: var(--etape-en-cours-texte); border: 1.5px solid var(--etape-en-cours-bord); }
.carte-a-venir { background: var(--etape-a-venir-fond); color: var(--etape-a-venir-texte); border: 1.5px dotted var(--etape-a-venir-bord); }
.barre-parcours li.carte-etape { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 12px; border-radius: var(--rayon-petit); }
.barre-parcours li.carte-en-cours { border-top: 6px solid var(--etape-en-cours-accent); }
/* Lot FIN-VISU-3 : l'étape où l'on se trouve se voit d'un coup d'œil, quel que soit son état : contour épais à distance de la carte (visible sur
   une carte pleine verte ou ardoise comme sur une carte pointillée), titre en gras et le petit texte « ▶ Vous êtes ici » (le repère ne dépend pas
   de la couleur). Le contour (4 px + 3 px de distance) tient dans l'espace de 12 px entre les cartes : aucun défilement horizontal. */
.barre-parcours li.carte-courante { outline: 4px solid var(--repere-etape); outline-offset: 3px; }
.barre-parcours li.carte-courante .libelle-etape { font-weight: 800; }
.repere-etape { margin: 0; font-size: 0.85rem; font-weight: 800; color: inherit; }
li.carte-etape a.etape-parcours { display: block; height: auto; padding: 0; border: 0; background: transparent; color: inherit; box-shadow: none; }
li.carte-etape a.etape-parcours:hover { color: inherit; text-decoration: underline; }
li.carte-etape .numero-etape, li.carte-etape a.etape-parcours .etat-etape { color: inherit; font-weight: 600; }
li.carte-en-cours .libelle-etape { font-size: 1.05rem; }
.mot-etape { margin: 0; font-size: 0.82rem; font-weight: 600; }
.phrase-etape { margin: 0; font-size: 0.8rem; }
.zone-bande-parcours { margin: 10px 0 4px; }
/* Lot FIN-STRUCT-1 : un segment par étape du parcours (cinq ; test-dossiers-fin-struct1 compare ce nombre à ETAPES_PARCOURS du paquet). */
.bande-parcours { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0 0 16px; }
.segment-parcours { position: relative; display: flex; align-items: center; justify-content: center; min-height: 22px; border-radius: 6px; font-size: 0.8rem; font-weight: 600; }
/* Segment de l'étape où l'on se trouve : trait épais dessous ET ▲ (la forme dit où l'on est, pas la couleur). */
.segment-parcours.segment-courant { border-bottom: 5px solid var(--repere-etape); }
.repere-segment { position: absolute; top: calc(100% + 6px); left: 0; right: 0; text-align: center; font-size: 0.75rem; line-height: 1; color: var(--repere-etape); }
.legende-parcours { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 0; padding: 0; font-size: 0.8rem; color: var(--gris-fonce); }
.legende-parcours .marqueur-segment { display: inline-block; min-width: 1.6em; text-align: center; border-radius: 6px; font-weight: 600; }
.bandeau-arret { border: 2px dashed var(--gris-fonce); border-radius: var(--rayon-petit); padding: 8px 12px; margin: 8px 0; background: var(--sable); }
.titre-arret { font-weight: 600; color: var(--gris-fonce); }
.formulaire-abandon { max-width: 640px; }
/* Lot FIN-RETOURS-1 : pièce attendue déclarée « N/A » : marqueur texte « ⊘ », mot « N/A » et bordure en tirets (jamais la couleur seule). */
.etat-piece { display: inline-block; padding: 1px 9px; border-radius: var(--rayon-pill); font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.etat-piece-na { border: 1px dashed var(--sable-doux-bord); background: var(--sable-doux); color: var(--sable-doux-texte); }
.formulaire-na { margin-top: 6px; min-width: 12rem; }
.formulaire-na input { width: 100%; }
/* Lot FIN-CORR-1 : tableau des pièces attendues lisible à 1024 px sans défilement (le type est sous le nom de la pièce) :
   « Pourquoi » et « État » passent à la ligne ; l'état garde la place de « ⊘ N/A », le motif s'écrit dessous. */
table.tableau.tableau-pieces-attendues td:nth-child(3), table.tableau.tableau-pieces-attendues td:nth-child(4) { white-space: normal; }
table.tableau.tableau-pieces-attendues tbody th[scope="row"] { min-width: 11rem; }
table.tableau.tableau-pieces-attendues td:nth-child(3) { min-width: 12rem; }
table.tableau.tableau-pieces-attendues td:nth-child(4) { min-width: 7rem; max-width: 14rem; overflow-wrap: anywhere; }
.liste-a-decider { list-style: none; margin: 0; padding: 0; }
.liste-a-decider li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 6px 0; border-bottom: 1px solid var(--gris-moyen); overflow-wrap: anywhere; }
.liste-a-decider li a { color: var(--bleu-fonce); flex: 1 1 220px; min-width: 0; }
.pastille.nature-decision { border: 2px solid var(--bleu-fonce); color: var(--bleu-fonce); }
.pastille.nature-manquant { border-style: dashed; border-color: var(--ambre-bord); color: var(--ambre); }
.pastille.nature-verification { border-style: dotted; border-color: var(--gris-fonce); }
.rien-a-decider { font-weight: 700; color: var(--bleu-fonce); }

/* Trajectoire (lot FIN-VISU-1) : petits histogrammes SVG par indicateur, trois groupes. Couleurs de :root seulement. Barre pleine =
   publié, barre à contour = retraité, pointillés + mots = non renseigné, sous la ligne 0 = perte : la teinte ne porte jamais seule
   un sens. Les tailles de texte sont en unités du dessin (viewBox de 320 de large, ~1 px à 375 px d'écran). */
.trajectoire { margin: 4px 0 18px; }
.legende-trajectoire { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 6px 0 10px; font-size: 0.8rem; color: var(--gris-fonce); }
.groupe-trajectoire { margin: 10px 0 18px; }
/* Lot FIN-VISU-3 : même largeur d'affichage pour TOUS les graphiques (colonnes de 340 px, jamais étirées), donc le même corps de texte :
   le dessin fait 320 unités de large pour ~318 px d'écran. Avant : colonnes élastiques, texte plus gros là où il y avait moins de colonnes. */
.grille-trajectoire { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 340px)); justify-content: start; gap: 12px; margin-top: 8px; }
.graphique-trajectoire { min-width: 0; background: var(--blanc); border: 1px solid var(--gris-moyen); border-radius: var(--rayon-petit); padding: 10px 10px 8px; }
.titre-graphique { font-size: 0.92rem; color: var(--bleu-fonce); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px; align-items: baseline; }
.unite-graphique { font-size: 0.75rem; font-weight: 400; color: var(--gris-fonce); }
.histogramme { display: block; width: 100%; height: auto; margin-top: 6px; }
.histogramme text { font-family: inherit; font-size: 11px; fill: var(--texte); }
.histogramme .texte-repere, .histogramme .texte-duree { font-size: 10px; fill: var(--gris-fonce); }
.histogramme .texte-annee { font-weight: 600; }
.histogramme .texte-absent { font-size: 10px; fill: var(--gris-fonce); }
.histogramme .axe-zero { stroke: var(--texte); stroke-width: 1; }
.histogramme .repere { stroke: var(--gris-moyen); stroke-width: 1; stroke-dasharray: 2 3; }
.histogramme .barre-publiee { fill: var(--bleu-fonce); stroke: var(--bleu-fonce); stroke-width: 1; }
.histogramme .barre-retraitee { fill: var(--blanc); stroke: var(--bleu-fonce); stroke-width: 2; }
/* Lot FIN-VISU-3 : une famille de couleur par groupe (classe `couleur-<groupe>` posée par la page). Barre pleine = publié, contour de la couleur
   du groupe sur fond blanc = retraité : la distinction plein / contour / pointillés ne dépend pas de la couleur. Le titre du groupe porte un filet. */
.couleur-activite .histogramme .barre-publiee { fill: var(--trajectoire-activite); stroke: var(--trajectoire-activite); }
.couleur-activite .histogramme .barre-retraitee { stroke: var(--trajectoire-activite); }
.couleur-activite > .titre-sous-section { border-bottom: 3px solid var(--trajectoire-activite); padding-bottom: 4px; }
.couleur-charges .histogramme .barre-publiee { fill: var(--trajectoire-charges); stroke: var(--trajectoire-charges); }
.couleur-charges .histogramme .barre-retraitee { stroke: var(--trajectoire-charges); }
.couleur-charges > .titre-sous-section { border-bottom: 3px solid var(--trajectoire-charges); padding-bottom: 4px; }
.couleur-bilan .histogramme .barre-publiee { fill: var(--trajectoire-bilan); stroke: var(--trajectoire-bilan); }
.couleur-bilan .histogramme .barre-retraitee { stroke: var(--trajectoire-bilan); }
.couleur-bilan > .titre-sous-section { border-bottom: 3px solid var(--trajectoire-bilan); padding-bottom: 4px; }
.histogramme .absent { fill: none; stroke: var(--gris-fonce); stroke-width: 1; stroke-dasharray: 3 2; }
.variations-trajectoire { list-style: none; margin: 4px 0 2px; font-size: 0.8rem; color: var(--gris-fonce); overflow-wrap: anywhere; }
.variations-trajectoire li { padding: 1px 0; }
.chiffres-trajectoire { margin-top: 6px; font-size: 0.85rem; }
.chiffres-trajectoire summary { cursor: pointer; color: var(--bleu-fonce); font-weight: 600; }
table.tableau.tableau-trajectoire td:nth-child(n) { white-space: normal; overflow-wrap: anywhere; }

/* Lot FIN-PERS-1 : onglet « Personnes ». Rôles en cases, une ligne d'aide sous chacune ; aucune couleur nouvelle. */
.liste-cases { list-style: none; padding: 0; margin: 4px 0; display: grid; gap: 8px; }
.liste-cases .case, .formulaire-personne label.case { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.liste-cases input, .formulaire-personne label.case input { width: auto; }
.formulaire-personne label.case { flex-wrap: wrap; }
.bloc-reprise-fiche { margin: 8px 0 14px; }
.totaux-parts { margin-top: 12px; }

/* Lot FIN-PERS-2 : bloc d'une personne (pièces, fiche déclarée d'une caution) ; bandeau « données déclarées » (forme en tirets, mot écrit). */
.bloc-personne { margin: 18px 0; padding: 12px 14px; border: 1px solid var(--gris-moyen); border-radius: var(--rayon-petit); background: var(--blanc); }
.bandeau-declare { border: 2px dashed var(--bleu-fonce); border-radius: var(--rayon-petit); padding: 8px 12px; margin: 8px 0; background: var(--sable); font-weight: 700; }
.ligne-fiche { border: 1px dotted var(--gris-moyen); border-radius: var(--rayon-petit); padding: 8px; margin: 8px 0; }

/* Lot FIN-AUTO-2 : hypothèses proposées, leviers, trois cas côte à côte (sans défilement horizontal en fenêtre étroite). */
.bloc-proposition { border: 1px solid var(--gris-moyen); border-radius: var(--rayon-petit); padding: 12px; margin-bottom: 16px; background: var(--blanc); }
.liste-proposition { padding-left: 18px; }
.liste-proposition li { margin-bottom: 8px; overflow-wrap: anywhere; }
.proposition-fragile { color: var(--ambre); }
.origine-hypothese { font-style: italic; }
.tableau-scenarios { width: 100%; table-layout: fixed; }
table.tableau.tableau-scenarios th, table.tableau.tableau-scenarios td { overflow-wrap: anywhere; white-space: normal; font-size: 0.9rem; padding: 4px 6px; }
table.tableau.tableau-scenarios .valeur-marquee { white-space: normal; padding: 1px 4px; }
.tableau-scenarios thead th:first-child, .tableau-scenarios tbody th[scope="row"] { width: 22%; }
.groupe-scenarios th { background: var(--sable); text-align: left; }
@media (max-width: 480px) {
  table.tableau.tableau-scenarios th, table.tableau.tableau-scenarios td { font-size: 0.74rem; padding: 3px 2px; }
  .tableau-scenarios thead th:first-child, .tableau-scenarios tbody th[scope="row"] { width: 14%; }
}

/* Lot FIN-9a : onglet « Note au banquier ». */
.case-note { margin: 4px 0 10px; }
.rubrique-note { margin: 14px 0; }
.rubrique-note p { overflow-wrap: anywhere; }
.chiffres-note { margin: 2px 0 0; padding-left: 18px; }
.chiffres-note li { overflow-wrap: anywhere; }
/* Lot FIN-9c : retouche de la note par repères (chiffres insérés lisibles : libellé en gras ET trait plein, jamais la couleur seule). */
.zone-retouche textarea { width: 100%; max-width: 100%; box-sizing: border-box; }
.zone-retouche select { max-width: 100%; min-width: 0; }
.reperes-inseres { list-style: none; margin: 4px 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.repere-insere { border: 1px solid var(--saisi-bord); border-radius: var(--rayon-petit); background: var(--blanc); padding: 2px 8px; overflow-wrap: anywhere; max-width: 100%; }

/* Lot FIN-VISU-2 : blocs à bandeau (variante A). Carte blanche, bandeau d'en-tête qui porte l'état : Complet = bandeau plein, corps replié
   sur ses chiffres clés ; À compléter = bandeau clair, bordure en tirets fins, barre de progression, corps ouvert ; Pas commencé = carte sable
   doux, bordure en points, corps replié. Mot et marqueur écrits dans le bandeau : la teinte ne dit jamais l'état seule. */
.bloc { background: var(--blanc); border-radius: var(--rayon); margin: 14px 0; overflow: hidden; }
.bloc-complet { border: 1px solid var(--vert-mat-bord); }
.bloc-a-completer { border: 1.5px dashed var(--bloc-a-completer-bord); }
.bloc-pas-commence { background: var(--bloc-pas-commence-fond); color: var(--bloc-pas-commence-texte); border: 1.5px dotted var(--bloc-pas-commence-bord); }
.bandeau-bloc { padding: 10px 14px; }
.bloc-complet .bandeau-bloc { background: var(--vert-mat-fond); color: var(--vert-mat-texte); }
.bloc-a-completer .bandeau-bloc { background: var(--bloc-a-completer-fond); color: var(--bloc-a-completer-texte); }
.entete-bloc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.titre-bloc { margin: 0; font-size: 1rem; color: inherit; flex: 1 1 auto; min-width: 0; }
.etat-bloc { margin: 0; font-size: 0.85rem; font-weight: 600; }
.bloc .bouton-bloc { flex: 0 0 auto; }
.bloc > .compteur-postes { margin: 8px 14px; }
.corps-bloc { padding: 6px 14px 12px; background: var(--blanc); color: var(--texte); }
.chiffres-cles { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; padding: 8px 14px; font-size: 0.88rem; }
.chiffres-cles li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; min-width: 0; }
.libelle-chiffre { color: var(--gris-fonce); }
progress.progression { display: block; width: 100%; height: 8px; margin-top: 8px; border: 1px solid var(--bloc-a-completer-bord); border-radius: var(--rayon-pill); overflow: hidden; -webkit-appearance: none; appearance: none; background: var(--progression-piste); }
progress.progression::-webkit-progress-bar { background: var(--progression-piste); }
progress.progression::-webkit-progress-value { background: var(--progression-fond); }
progress.progression::-moz-progress-bar { background: var(--progression-fond); }

/* Lot FIN-VISU-2 : tuiles en tête des onglets Comptes et Analyse (chiffres déjà affichés plus bas, avec leur état ; postes à remplir). */
.tuiles { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px; margin: 8px 0 14px; padding: 0; }
.tuile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; overflow-wrap: anywhere; background: var(--blanc); border: 1px solid var(--gris-moyen); border-radius: var(--rayon-petit); padding: 10px 12px; }
.libelle-tuile { font-size: 0.8rem; color: var(--gris-fonce); }
.valeur-tuile { font-size: 1.1rem; font-weight: 700; }
.texte-tuile { font-weight: 600; }
.tuile-postes.tuile-complet { border: 1px solid var(--vert-mat-bord); }
.tuile-postes.tuile-a-completer { background: var(--bloc-a-completer-fond); color: var(--bloc-a-completer-texte); border: 1.5px dashed var(--bloc-a-completer-bord); }
.tuile-postes.tuile-pas-commence { background: var(--bloc-pas-commence-fond); color: var(--bloc-pas-commence-texte); border: 1.5px dotted var(--bloc-pas-commence-bord); }

/* Lot FIN-11a : bandeau du serveur d'essai, posé par le SERVEUR (src/bandeau-essai.js) juste après <body> ; aucun texte ici.
   Mot, marqueur (⚠) et forme (trait double épais), teintes ambre de la charte (celles de « À remplir »), jamais la couleur
   seule. Permanent : il ne se ferme pas. Le texte revient à la ligne (aucun défilement horizontal à 375 px). */
.bandeau-essai {
  background: var(--ambre-pale); color: var(--ambre); border: 4px double var(--ambre-bord);
  font-weight: 700; font-size: 0.9rem; line-height: 1.35; text-align: center;
  padding: 8px 12px; overflow-wrap: anywhere;
}
.marque-essai { font-size: 1.05rem; }