/*
 * Feuille de style du back-office SIMNEUF (T-309, ADR-037) : servie par l'application (aucun CDN, aucune police ni
 * image externe), jamais de style en ligne (CSP sans 'unsafe-inline', T-301). Palette de la v1
 * (engine-reference/simneuf-v1.html) ; niveaux d'affichage de docs/01 §6.5 : vert (à jour), orange (limite), rouge
 * (blocage). Contraste AA du texte, des liens et des pastilles vérifié par tests/Backoffice/FeuilleDeStyleTest.
 * T-302 : sous AssetMapper (assets/styles/, nom versionné) ; formulaire de simulation, indications du guidage, aperçu
 * en direct et barre du bas sur mobile (mise en page de la v1, champs de 16 px, sans défilement horizontal à 390 px).
 * T-303 : page de résultats (synthèse et frise, encadrés, messages par niveau — rouge : bloquant, orange : limite, bleu :
 * information, vert : conforme —, tableaux défilants atteignables au clavier, résumé à copier, mentions légales) ; texte
 * de 16 px au moins sur mobile (docs/01 §7) ; contraste AA vérifié par FeuilleDeStyleTest et, page rendue, par axe-core.
 * T-304 : dossiers (filtres de la liste, formulaires du libellé et du statut, bouton de suppression définitive rouge sur
 * blanc — contraste AA vérifié —, champs de 16 px, texte de 16 px au moins sur mobile).
 * T-305 : barre d'exports des résultats, liens d'export de la fiche d'un dossier, feuille d'impression (`@media print`,
 * en fin de fichier : A4, rien de coupé — vérifié dans Chromium par tests/navigateur/impression.spec.mjs).
 * T-306 : page publique d'un lien de partage — sections de la page de résultats (`.resultats`), présentation et lexique ;
 * contraste AA et 16 px sur mobile vérifiés par axe-core (tests/navigateur/partage.spec.mjs).
 * T-307 : page d'embed du widget des sites (`.page-widget`, `.widget`) — fond blanc, étapes, champs de 16 px ; contraste AA
 * vérifié par FeuilleDeStyleTest et, page rendue, par axe-core (tests/navigateur/widget.spec.mjs).
 */
:root {
    --fond: #eef1f6;
    --surface: #ffffff;
    --encre: #16202b;
    --encre-2: #4b5665;
    --trait: #d5dbe4;
    --lien: #24507f;
    --vert: #1e7a4c;
    --vert-fond: #e4f3ea;
    --orange: #a35a00;
    --orange-fond: #fbf0dc;
    --rouge: #b42318;
    --rouge-fond: #fae3e0;
    --info: #3b5f8a;
    --info-fond: #e6eef7;
    --surface-2: #f6f8fb;
    --rayon: 10px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

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

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

a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--lien);
    outline-offset: 2px;
}

h1 {
    font-size: 1.5rem;
    margin: 0 0 12px;
}

h2 {
    font-size: 1.15rem;
    margin: 24px 0 8px;
}

button {
    font: inherit;
    padding: 8px 14px;
    border: 1px solid var(--trait);
    border-radius: 8px;
    background-color: var(--surface);
    color: var(--encre);
    cursor: pointer;
}

/* Lien d'évitement : visible seulement quand il reçoit le focus au clavier. */
.lien-evitement {
    position: absolute;
    left: -10000px;
}

.lien-evitement:focus {
    position: static;
    display: inline-block;
    margin: 8px 16px;
}

/* Texte lu par les lecteurs d'écran, invisible à l'écran. */
.visuellement-masque {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.entete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    padding: 12px 16px;
    background-color: var(--surface);
    border-bottom: 1px solid var(--trait);
}

.entete__marque {
    margin: 0;
    font-weight: 700;
}

.entete__menu ul {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.entete__menu a[aria-current="page"] {
    font-weight: 700;
}

.entete__deconnexion {
    margin: 0 0 0 auto;
}

/* Pastille de fraîcheur des barèmes (T-309) : le texte dit l'état, la couleur le souligne (jamais la couleur seule). */
.pastille {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
}

.pastille--ok {
    color: var(--vert);
    background-color: var(--vert-fond);
}

.pastille--attention {
    color: var(--orange);
    background-color: var(--orange-fond);
}

.pastille--alerte {
    color: var(--rouge);
    background-color: var(--rouge-fond);
}

main {
    max-width: 1140px;
    margin: 0 auto;
    padding: 16px;
}

.fiche {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 16px;
    margin: 0;
}

.fiche dt {
    color: var(--encre-2);
}

.fiche dd {
    margin: 0;
    font-weight: 600;
}

/*
 * Zone de défilement d'un tableau large, sur toute page : le tableau défile dans sa zone, pas la page ; bloc conteneur
 * des textes réservés aux lecteurs d'écran qu'elle contient (sinon, positionnés hors de la zone, ils élargiraient la
 * page — T-310 : l'écran des paramètres défilait ainsi à 390 px). Sur la page de résultats, elle est en plus atteignable
 * au clavier (tabindex), focus visible.
 */
.tableau {
    position: relative;
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--surface);
    border-radius: var(--rayon);
}

caption {
    padding: 8px 0;
    text-align: left;
    font-weight: 600;
}

th,
td {
    padding: 8px;
    border-bottom: 1px solid var(--trait);
    text-align: left;
    vertical-align: top;
}

th.nombre,
td.nombre {
    text-align: right;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .fiche {
        grid-template-columns: 1fr;
    }

    .fiche dd {
        margin-bottom: 8px;
    }
}

/* ── Formulaire de simulation (T-302) ─────────────────────────────────────────────────────────────────────────── */

.simulation {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    padding-bottom: 96px;
}

@media (min-width: 960px) {
    .simulation {
        grid-template-columns: 5fr 7fr;
        align-items: start;
        padding-bottom: 0;
    }
}

.carte {
    background-color: #ffffff;
    border: 1px solid var(--trait);
    border-radius: var(--rayon);
    padding: 16px;
    min-width: 0;
}

.formulaire-simulation fieldset {
    border: 0;
    margin: 0 0 18px;
    padding: 0;
    min-width: 0;
}

.formulaire-simulation legend {
    font-weight: 700;
    font-size: 1.02rem;
    margin-bottom: 8px;
    padding: 0;
}

.grille {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
}

@media (max-width: 520px) {
    .grille {
        grid-template-columns: minmax(0, 1fr);
    }
}

.pleine-largeur {
    grid-column: 1 / -1;
}

.champ {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.champ label {
    font-size: 0.9rem;
    font-weight: 600;
}

.champ--case {
    flex-direction: row;
    align-items: center;
    align-self: end;
    gap: 8px;
    padding: 6px 0;
}

.champ--case label {
    font-weight: 500;
}

.formulaire-simulation input,
.formulaire-simulation select {
    font: inherit;
    font-size: 16px;
    color: var(--encre);
    background-color: #ffffff;
    border: 1px solid var(--trait);
    border-radius: 8px;
    padding: 9px 10px;
    width: 100%;
    min-width: 0;
}

.formulaire-simulation input[type="checkbox"] {
    width: auto;
    margin: 0;
    transform: scale(1.2);
}

.formulaire-simulation input:focus-visible,
.formulaire-simulation select:focus-visible,
summary:focus-visible {
    outline: 3px solid var(--lien);
    outline-offset: 1px;
}

.formulaire-simulation [aria-invalid="true"] {
    border-color: var(--rouge);
    border-width: 2px;
}

.unite {
    position: relative;
    display: block;
}

.unite input {
    padding-right: 48px;
}

.unite__symbole {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--encre-2);
    font-size: 0.85rem;
    pointer-events: none;
}

/* Aide fixe de la v1 sous le champ. */
.aide {
    color: var(--encre-2);
    font-size: 0.8rem;
    line-height: 1.3;
}

/* Indication du guidage (calculée par le moteur, posée par le serveur puis par le contrôleur Stimulus). */
.indication {
    color: var(--lien);
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.3;
}

.indication:empty {
    display: none;
}

.suggestion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--info);
    background-color: var(--info-fond);
}

.suggestion[hidden] {
    display: none;
}

.progression {
    margin: 0 0 12px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--encre-2);
    background-color: var(--surface-2);
}

.progression strong {
    color: var(--encre);
}

.message {
    margin: 8px 0;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.92rem;
}

.message--erreur {
    color: var(--rouge);
    background-color: var(--rouge-fond);
}

.message--attention {
    color: var(--orange);
    background-color: var(--orange-fond);
}

.message--attention h3 {
    margin: 0 0 4px;
    font-size: 1rem;
}

.message--attention ul {
    margin: 0;
    padding-left: 18px;
}

.reglages {
    border-top: 1px solid var(--trait);
    padding-top: 10px;
}

.reglages summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--lien);
}

.reglages .grille {
    margin-top: 10px;
}

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

.bouton {
    display: inline-block;
    font: inherit;
    font-weight: 600;
    padding: 10px 16px;
    border: 1px solid var(--trait);
    border-radius: 8px;
    color: var(--encre);
    background-color: #ffffff;
    text-decoration: none;
    cursor: pointer;
}

.bouton--principal {
    color: #ffffff;
    background-color: var(--lien);
    border-color: var(--lien);
}

.bouton[hidden] {
    display: none;
}

.bouton--petit {
    padding: 6px 12px;
    font-size: 0.88rem;
}

/* Aperçu en direct (v1) : les chiffres viennent du moteur ; l'état est dit en toutes lettres, la couleur le souligne. */
.apercu h2 {
    margin-top: 0;
}

.apercu__liste {
    margin: 0;
    padding-left: 18px;
}

.apercu__liste li {
    margin: 3px 0;
}

.apercu__note {
    color: var(--encre-2);
    font-size: 0.85rem;
}

.apercu__etat:empty {
    display: none;
}

.etat {
    font-weight: 600;
}

.etat--ok {
    color: var(--vert);
}

.etat--attention {
    color: var(--orange);
}

.mentions {
    color: var(--encre-2);
    font-size: 0.8rem;
    line-height: 1.4;
}

.mentions:empty {
    display: none;
}

/* Barre du bas sur mobile (v1) : mensualité ou repère du moment et bouton « Calculer ». */
.barre-mobile {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    color: var(--encre);
    background-color: var(--surface);
    border-top: 1px solid var(--trait);
}

.barre-mobile__resume {
    margin: 0;
    min-width: 0;
}

.barre-mobile__resume strong {
    display: block;
    font-size: 1.1rem;
}

.barre-mobile__resume span {
    display: block;
    font-size: 0.75rem;
    color: var(--encre-2);
}

@media (min-width: 960px) {
    .barre-mobile {
        display: none;
    }
}

/* ── Page de résultats (T-303) ────────────────────────────────────────────────────────────────────────────────── */

.resultats {
    grid-column: 1 / -1;
    display: grid;
    gap: 16px;
    min-width: 0;
}

.resultats__rappel {
    margin: 0;
    color: var(--encre-2);
    font-size: 0.9rem;
}

/* Titre de la page imprimée (T-305) : caché à l'écran, imprimé à la place du rappel (voir `@media print`). */
.titre-impression {
    display: none;
}

/* Barre « Exporter ou imprimer ce plan » (T-305), sous le rappel : téléchargements et impression. */
.exports {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

/* « Enregistrer dans un dossier » (T-311), même barre : choix du dossier à sa largeur, aide sur sa propre ligne. */
.exports .saisie {
    width: auto;
    max-width: 100%;
}

.exports .note {
    flex-basis: 100%;
    margin: 0;
}

.resultats h2 {
    margin-top: 0;
}

.resultats h3 {
    margin: 0 0 6px;
    font-size: 1rem;
}

.chiffre-cle {
    margin: 4px 0;
}

.chiffre-cle__montant {
    display: inline-block;
    font-size: 2.3rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.chiffre-cle__detail {
    color: var(--encre-2);
    font-size: 0.95rem;
}

/*
 * Frise des phases : une bande par phase, de largeur proportionnelle à sa durée quand le navigateur lit `data-mois`
 * (fonction attr() typée), égale sinon ; phases empilées sur écran étroit. Le texte dit montants et durées.
 */
.frise {
    display: flex;
    margin: 12px 0 4px;
    padding: 0;
    list-style: none;
    border: 1px solid var(--trait);
    border-radius: 8px;
    overflow: hidden;
}

.frise__phase {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    justify-content: center;
    min-width: 5.5rem;
    padding: 6px 8px;
    border-right: 1px solid var(--surface);
    font-size: 0.8rem;
    line-height: 1.2;
}

@supports (flex-grow: attr(data-mois type(<number>), 1)) {
    .frise__phase {
        flex-grow: attr(data-mois type(<number>), 1);
    }
}

.frise__phase:last-child {
    border-right: 0;
}

.frise__phase strong {
    font-size: 0.95rem;
}

.frise__phase span {
    color: var(--encre-2);
}

.frise__phase--construction {
    color: var(--encre);
    background-color: var(--info-fond);
}

.frise__phase--p1 {
    color: var(--encre);
    background-color: var(--vert-fond);
}

.frise__phase--p2 {
    color: var(--encre);
    background-color: var(--orange-fond);
}

.frise__phase--fin {
    color: var(--encre);
    background-color: var(--surface-2);
}

.legende {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin: 4px 0 8px;
    padding: 0;
    list-style: none;
    color: var(--encre-2);
    font-size: 0.85rem;
}

.legende strong {
    color: var(--encre);
}

.encadres {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 12px 0;
}

.encadre {
    padding: 12px;
    border: 1px solid var(--trait);
    border-radius: 8px;
    color: var(--encre);
    background-color: var(--surface-2);
}

.encadre p {
    margin: 2px 0;
}

.encadre__valeur {
    font-size: 1.5rem;
    font-weight: 700;
}

.encadre__detail {
    color: var(--encre-2);
    font-size: 0.85rem;
}

.messages {
    margin: 0;
    padding: 0;
    list-style: none;
}

.message--alerte {
    color: var(--rouge);
    background-color: var(--rouge-fond);
}

.message--info {
    color: var(--info);
    background-color: var(--info-fond);
}

.message--ok {
    color: var(--vert);
    background-color: var(--vert-fond);
}

.note {
    color: var(--encre-2);
    font-size: 0.85rem;
}

.discret {
    color: var(--encre-2);
    font-weight: 400;
}

.deux-colonnes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.resultats table {
    font-size: 0.9rem;
}

.resultats thead th {
    color: var(--encre-2);
}

.resultats tr.total th,
.resultats tr.total td {
    font-weight: 700;
    border-top: 2px solid var(--trait);
}

.tableau:focus-visible {
    outline: 3px solid var(--lien);
    outline-offset: 2px;
}

.statut {
    font-weight: 700;
}

.statut--ok {
    color: var(--vert);
}

.statut--alerte {
    color: var(--rouge);
}

.echeancier-mensuel {
    margin-top: 12px;
}

.echeancier-mensuel summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--lien);
}

.resume {
    display: block;
    width: 100%;
    min-height: 180px;
    padding: 10px;
    border: 1px solid var(--trait);
    border-radius: 8px;
    color: var(--encre);
    background-color: #ffffff;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85rem;
}

.resume:focus-visible {
    outline: 3px solid var(--lien);
    outline-offset: 1px;
}

.etat-copie {
    margin: 0;
    color: var(--vert);
    font-weight: 600;
}

.hypotheses {
    margin: 0;
    padding-left: 18px;
    color: var(--encre-2);
    font-size: 0.9rem;
}

.mentions-legales p {
    margin: 0;
    color: var(--encre-2);
    font-size: 0.85rem;
    line-height: 1.4;
}

.mentions-legales strong {
    color: var(--encre);
}

@media (max-width: 640px) {
    .deux-colonnes {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Écran étroit : phases empilées, encadrés l'un sous l'autre, texte de 16 px au moins (docs/01 §7). */
@media (max-width: 520px) {
    .frise {
        flex-direction: column;
    }

    .frise__phase {
        flex: none;
        min-width: 0;
        border-right: 0;
        border-bottom: 1px solid var(--surface);
    }

    .frise__phase:last-child {
        border-bottom: 0;
    }

    .encadres {
        grid-template-columns: minmax(0, 1fr);
    }

    .resultats,
    .resultats table,
    .resultats .note,
    .resultats__rappel,
    .frise__phase,
    .frise__phase strong,
    .legende,
    .encadre__detail,
    .chiffre-cle__detail,
    .messages .message,
    .resume,
    .resultats .bouton,
    .hypotheses,
    .mentions-legales p {
        font-size: 1rem;
    }
}

/* Dossiers (T-304) : filtres de la liste, formulaires, champs de saisie de 16 px, suppression définitive en rouge. */
.filtres {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px 12px;
    margin: 12px 0 16px;
}

.filtres .champ {
    flex: 1 1 220px;
    margin: 0;
}

.filtres__action {
    margin: 0;
}

.formulaire-dossier {
    max-width: 640px;
}

.formulaire-dossier fieldset {
    border: 0;
    margin: 16px 0 0;
    padding: 0;
    min-width: 0;
}

.formulaire-dossier legend {
    margin-bottom: 4px;
    padding: 0;
    font-size: 0.9rem;
    font-weight: 600;
}

.formulaire-dossier .champ--case {
    margin: 0;
}

.saisie {
    width: 100%;
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid var(--trait);
    border-radius: 8px;
    color: var(--encre);
    background-color: #ffffff;
    font: inherit;
    font-size: 16px;
}

.saisie:focus-visible,
.formulaire-dossier input[type="radio"]:focus-visible {
    outline: 3px solid var(--lien);
    outline-offset: 1px;
}

.saisie[aria-invalid="true"] {
    border-color: var(--rouge);
    border-width: 2px;
}

.bouton--danger {
    color: var(--rouge);
    background-color: #ffffff;
    border-color: var(--rouge);
}

/* Liens d'export du plan d'une simulation, dans la fiche d'un dossier (T-305). */
.liens-export {
    white-space: nowrap;
}

.liens-export a + a {
    margin-left: 12px;
}

.dossiers code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

/* Écran étroit : texte des pages de dossier de 16 px au moins (docs/01 §7). */
@media (max-width: 520px) {
    .dossiers,
    .dossiers table,
    .dossiers .champ label,
    .dossiers .aide,
    .dossiers .note,
    .dossiers .message,
    .dossiers .bouton,
    .dossiers .discret,
    .dossiers code,
    .formulaire-dossier legend {
        font-size: 1rem;
    }
}

/* Lien de partage (T-306) : présentation du plan partagé, projet et lexique en listes de définitions. */
.partage__intro h1 {
    margin-bottom: 4px;
}

.partage__intro p {
    margin: 4px 0;
}

.lexique {
    margin: 0;
}

.lexique dt {
    margin-top: 10px;
    font-weight: 700;
}

.lexique dt:first-child {
    margin-top: 0;
}

.lexique dd {
    margin: 2px 0 0;
    color: var(--encre-2);
}

/*
 * Widget des sites (T-307) : page d'embed affichée dans l'iframe du site d'une organisation — fond blanc (la couleur de
 * l'organisation, `--lien` redéfinie par la page, n'est retenue qu'avec un contraste AA sur blanc : `ThemeDuWidget`),
 * logo ou nom de l'organisation, étapes du parcours, champs et boutons de 16 px, liens de rendez-vous en boutons. La
 * hauteur de `.widget` est celle que le contrôleur Stimulus `widget` annonce au site hôte : pas de marge extérieure.
 */
.page-widget {
    background-color: #ffffff;
}

.widget {
    max-width: 760px;
    margin: 0 auto;
    padding: 16px;
}

.widget__entete {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.widget__logo {
    display: block;
    max-width: 220px;
    max-height: 56px;
}

.widget__marque {
    margin: 0;
    font-weight: 700;
    color: var(--encre);
}

.etapes {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
    counter-reset: etape;
}

.etapes li {
    color: var(--encre-2);
    counter-increment: etape;
}

.etapes li::before {
    content: counter(etape) ". ";
}

.etapes [aria-current="step"] {
    color: var(--lien);
    font-weight: 700;
}

.widget input,
.widget select,
.widget button {
    font-size: 16px;
}

.widget__etablie {
    margin: 0 0 12px;
    color: var(--encre-2);
}

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

.rendez-vous__liens {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

/*
 * Demande de contact du widget (T-308) : moyen de contact préféré en ligne, case de consentement alignée sur la première
 * ligne de son texte (qui porte le lien de la politique de confidentialité), défi anti-robot sous l'information.
 */
.choix-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
    margin: 16px 0 0;
}

.formulaire-simulation input[type="radio"] {
    width: auto;
    margin: 0;
    padding: 0;
    transform: scale(1.2);
}

.consentement {
    align-items: flex-start;
    align-self: auto;
    margin-top: 12px;
}

.consentement input[type="checkbox"] {
    margin-top: 5px;
    flex-shrink: 0;
}

.cf-turnstile {
    margin-top: 12px;
}

/* Écran étroit (iframe de 390 px) : texte de 16 px au moins (docs/01 §7). */
@media (max-width: 520px) {
    .widget,
    .widget .champ label,
    .widget .aide,
    .widget .message,
    .widget .bouton,
    .widget .unite__symbole {
        font-size: 1rem;
    }
}

/*
 * Impression (T-305, « CSS d'impression ») : la page de résultats imprimée — ou enregistrée en PDF par le navigateur —
 * sur A4 portrait, marges de 12 mm. Ni en-tête, ni formulaire, ni aperçu, ni commandes, ni résumé à copier : le titre
 * daté, le plan et ses mentions légales. Tableaux en pleine largeur, jamais rognés par leur zone de défilement ; lignes,
 * encadrés et paragraphes jamais partagés entre deux pages ; titres jamais laissés seuls en bas de page ; en-têtes des
 * tableaux répétés sur chaque page. Vérifié dans Chromium par tests/navigateur/impression.spec.mjs (aucun élément coupé
 * à la largeur d'une page A4, capture et PDF) et règle par règle par tests/Backoffice/FeuilleDeStyleTest.
 */
@media print {
    @page {
        size: A4;
        margin: 12mm;
    }

    body {
        background-color: #ffffff;
        color: #000000;
        font-size: 10pt;
    }

    .lien-evitement,
    .ecran-seulement,
    .entete,
    .formulaire-simulation,
    .apercu,
    .barre-mobile,
    .exports,
    #resume,
    .resultats__rappel,
    .echeancier-mensuel:not([open]) {
        display: none !important;
    }

    .titre-impression {
        display: block;
        margin: 0 0 4mm;
        font-size: 13pt;
        font-weight: 700;
    }

    main,
    .simulation,
    .resultats {
        display: block;
        max-width: none;
        margin: 0;
        padding: 0;
    }

    .carte {
        margin: 0 0 5mm;
        padding: 0;
        border: 0;
        border-radius: 0;
    }

    .tableau,
    .frise {
        overflow: visible;
    }

    .resultats table {
        font-size: 7.5pt;
    }

    /* Sur papier, un texte de cellule peut passer à la ligne ; un montant jamais (espaces insécables du format français). */
    th,
    td,
    th.nombre,
    td.nombre {
        padding: 2px 3px;
        white-space: normal;
    }

    thead {
        display: table-header-group;
    }

    tr,
    li,
    p,
    .encadre,
    .chiffre-cle,
    .frise__phase {
        break-inside: avoid;
    }

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

    a {
        color: #000000;
        text-decoration: none;
    }
}