/* =========================================================================
   Diagnostic environnemental — FPD Expert-conseil
   Charte : bleu foncé #003B49, turquoise #4F9FA6, vert #A9C23F
   Titres League Spartan, corps Helvetica.
   ========================================================================= */

/* League Spartan variable, auto-hébergée : aucun appel à fonts.googleapis.com, donc rien
   à charger depuis un tiers et rien à casser si l'hébergeur bloque les requêtes sortantes.
   Deux sous-ensembles pour couvrir tous les diacritiques du français sans alourdir le
   chargement initial : le navigateur ne télécharge latin-ext que s'il en a besoin. */
@font-face {
    font-family: 'League Spartan';
    src: url('../fonts/LeagueSpartan-latin.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    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;
}
@font-face {
    font-family: 'League Spartan';
    src: url('../fonts/LeagueSpartan-latin-ext.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                   U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* Charte FPD */
    --encre: #003B49;
    --encre-clair: #12556a;
    --turquoise: #4F9FA6;
    --turquoise-pale: #e7f1f2;
    --vert: #A9C23F;

    /* Neutres derives */
    --blanc: #ffffff;
    --brume: #F7F9F9;
    --bordure: #E8EDEE;
    --bordure-forte: #ccd8da;
    /* Contour des boutons radio et cases à cocher. Une bordure claire suffirait
       visuellement, mais un contrôle de formulaire doit atteindre 3:1 sur son fond
       (WCAG 1.4.11) : c'est le seul indice qu'il y a quelque chose à cocher. */
    --controle: #7D8F93;
    --gris: #5A6B70;
    --rouge: #B03A2E;

    --titre: 'League Spartan', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --corps: 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', sans-serif;

    /* Le duo turquoise → vert du symbole FPD, réutilisé sur tous les états actifs.
       C'est le geste qui tient l'identité visuelle de l'application. */
    --degrade: linear-gradient(135deg, #4F9FA6, #A9C23F);
    --degrade-voile: linear-gradient(135deg, rgba(79, 159, 166, .13), rgba(169, 194, 63, .13));
    --halo: 0 0 0 4px rgba(79, 159, 166, .15);
    --elevation: 0 10px 28px rgba(0, 59, 73, .09);
    --elevation-basse: 0 4px 14px rgba(0, 59, 73, .07);

    --rayon: 12px;
    --rayon-petit: 8px;
    --panneau-largeur: 380px;
    --colonne: 640px;
    --transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
    --ressort: cubic-bezier(0.16, 1, 0.3, 1);
    --ombre-douce: 0 1px 2px rgba(0, 59, 73, .04), 0 8px 24px rgba(0, 59, 73, .06);
}

/* ---------- Contour dégradé ----------

   Un dégradé ne peut pas être posé sur une `border`, et `border-image` ne suit pas les
   coins arrondis. On peint donc le dégradé sur un pseudo-élément dont on masque le centre :
   il ne reste que l'anneau. Bonus décisif, l'opacité d'un pseudo-élément se transitionne,
   ce qu'un `background-image` ne fait pas — c'est ce qui permet à l'anneau de s'allumer en
   douceur au survol et à la sélection.

   La bordure au repos est un `box-shadow` interne plutôt qu'une vraie `border` : l'anneau
   se superpose alors exactement, sans décalage de rayon ni saut de mise en page. */
.choix::before,
.saisie::before,
.benefice__icone::before,
.carte-fin::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: var(--degrade);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity var(--transition);
    pointer-events: none;
    z-index: 2;
}

/* ---------- Socle ---------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--corps);
    font-size: 16px;
    line-height: 1.55;
    color: var(--encre);
    background: var(--blanc);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3 { font-family: var(--titre); font-weight: 600; margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.visuellement-cache {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
}

.lien-evitement {
    position: absolute; top: -100px; left: 16px; z-index: 100;
    padding: 12px 20px; border-radius: 0 0 var(--rayon-petit) var(--rayon-petit);
    background: var(--encre); color: var(--blanc);
    font-family: var(--titre); font-weight: 600; text-decoration: none;
    transition: top var(--transition);
}
.lien-evitement:focus { top: 0; }

:focus-visible { outline: 3px solid var(--turquoise); outline-offset: 3px; border-radius: 2px; }

/* ---------- Ossature ---------- */

.ecran {
    display: grid;
    grid-template-columns: var(--panneau-largeur) minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100dvh;
}
/* Sans panneau latéral, la première colonne de la grille n'a plus de contenu : laissée
   telle quelle, elle réserverait 380 px de vide et écraserait la page contre le bord. */
.page--pleine .ecran,
.page--rapport .ecran { grid-template-columns: minmax(0, 1fr); }

.contenu { padding: clamp(48px, 7vw, 104px) clamp(24px, 6vw, 72px); }
.page--questionnaire .contenu > * { max-width: var(--colonne); margin-inline: auto; }
/* L'accueil gère ses propres marges dans chacun de ses deux panneaux : le padding de
   `.contenu` l'enfermerait dans un cadre blanc et casserait le bord à bord. */
.page--pleine .contenu { padding: 0; }

/* ---------- Panneau latéral ---------- */

.panneau {
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 44px 40px 40px;
    background: var(--encre);
    color: var(--blanc);
    overflow: hidden;
}

/* Arcs concentriques repris du symbole FPD, très en retrait. */
.panneau__motif {
    position: absolute;
    left: -180px;
    bottom: -180px;
    width: 720px;
    height: 720px;
    color: var(--blanc);
    opacity: .07;
    pointer-events: none;
}

.panneau > *:not(.panneau__motif) { position: relative; z-index: 1; }

.panneau__logo { display: block; text-decoration: none; }
/* 236 px : la largeur maximale qui tienne dans le panneau une fois les marges retirées.
   En deçà, le lettrage « EXPERT-CONSEIL » du lockup passe sous le seuil de lisibilité. */
.panneau__logo-image { width: 236px; }
/* Le logo couleur reste lisible sur fond foncé si la version blanche n'est pas fournie. */
.panneau__logo-inverse { filter: brightness(0) invert(1); opacity: .96; }

.panneau__logo-substitut { display: block; line-height: 1; }
.panneau__logo-substitut strong {
    display: block; font-family: var(--titre); font-weight: 700;
    font-size: 34px; letter-spacing: -.01em;
}
.panneau__logo-substitut em {
    display: block; margin-top: 6px; font-style: normal;
    font-family: var(--titre); font-weight: 500; font-size: 13px;
    letter-spacing: .18em; text-transform: uppercase; color: var(--turquoise);
}

.panneau__surtitre {
    margin-top: 18px;
    font-family: var(--titre); font-weight: 500; font-size: 12px;
    letter-spacing: .16em; text-transform: uppercase;
    color: rgba(255, 255, 255, .62);
}

/* Étapes */

.panneau__etapes { flex: 1; min-height: 0; overflow-y: auto; }
.panneau__etapes ol { display: flex; flex-direction: column; gap: 2px; }

.etape a, .etape > span {
    display: flex; align-items: center; gap: 13px;
    padding: 8px 10px; margin-left: -10px;
    border-radius: var(--rayon-petit);
    text-decoration: none;
    transition: background var(--transition);
}
.etape a:hover { background: rgba(255, 255, 255, .07); }

/* L'icone thematique remplace l'ancienne puce. Sa couleur porte l'etat : estompee a venir,
   turquoise en cours (avec halo), verte franchie (avec coche). */
.etape__icone {
    position: relative; flex: none;
    display: grid; place-items: center;
    width: 30px; height: 30px; border-radius: 9px;
    color: rgba(255, 255, 255, .42);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
    transition: color var(--transition), box-shadow var(--transition), background var(--transition);
}
.etape__icone svg { width: 19px; height: 19px; }

.etape__libelle {
    font-size: 16px; line-height: 1.25;
    color: rgba(255, 255, 255, .62);
    transition: color var(--transition);
}

.etape--courante .etape__icone {
    color: var(--blanc);
    background: rgba(79, 159, 166, .28);
    box-shadow: inset 0 0 0 1px var(--turquoise), 0 0 0 4px rgba(79, 159, 166, .22);
}
.etape--courante .etape__libelle { color: var(--blanc); font-weight: 700; }

.etape--franchie .etape__icone {
    color: var(--vert);
    box-shadow: inset 0 0 0 1px rgba(169, 194, 63, .5);
}
.etape--franchie .etape__libelle { color: rgba(255, 255, 255, .88); }

/* Coche verte en pastille sur le coin de l'icone des sections franchies. */
.etape__coche {
    position: absolute; right: -4px; bottom: -4px;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--vert); box-shadow: 0 0 0 2px var(--encre);
}
.etape__coche::after {
    content: ''; position: absolute;
    left: 5px; top: 2px; width: 3px; height: 6px;
    border: solid var(--encre); border-width: 0 1.5px 1.5px 0;
    transform: rotate(42deg);
}

/* Jauge de progression */

.panneau__pied { display: flex; flex-direction: column; gap: 12px; }

.jauge {
    height: 3px; border-radius: 2px;
    background: rgba(255, 255, 255, .16);
    overflow: hidden;
}
.jauge__remplissage {
    display: block; height: 100%; width: var(--progression, 0%);
    background: var(--degrade); border-radius: 2px;
    transition: width 420ms cubic-bezier(0.4, 0, 0.2, 1);
}
.panneau__compteur {
    font-family: var(--titre); font-weight: 500; font-size: 11.5px;
    letter-spacing: .14em; text-transform: uppercase;
    color: rgba(255, 255, 255, .62);
}

/* ---------- En-tête de section ---------- */

.eyebrow {
    display: flex; align-items: center; gap: 12px;
    font-family: var(--titre); font-weight: 600; font-size: 12px;
    letter-spacing: .17em; text-transform: uppercase;
    color: var(--turquoise);
}
.eyebrow::before {
    content: ''; flex: none;
    width: 22px; height: 2px; border-radius: 1px;
    background: var(--degrade);
}

.section__entete { margin-bottom: 38px; }
.section__titre {
    margin-top: 12px;
    font-size: clamp(2.05rem, 4.2vw, 2.85rem);
    line-height: 1.06;
    letter-spacing: -.015em;
}
.section__intro {
    margin-top: 14px; max-width: 54ch;
    font-size: 1.0625rem; color: var(--gris);
}

/* Sous-titre de thématique. Le filet dégradé est posé sous le texte plutôt que de traverser
   la page : l'accent appartient au titre au lieu de flotter au-dessus de lui. Sans filet
   pleine largeur, la coupure entre thématiques repose sur l'espace et sur le poids du titre. */
.famille + .famille { margin-top: 58px; }
/* Capitales espacées, sans gras : à 17 px avec 14 % d'approche, le titre occupe une largeur
   considérable et se distingue nettement des libellés de questions — qui sont eux en gras,
   en bas-de-casse et dans l'autre police. Deux façons opposées d'être présent, donc aucune
   confusion de niveau. */
.famille__titre {
    position: relative;
    padding-bottom: 18px;
    font-size: 1.0625rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--encre);
}
/* Le filet court une pleine largeur mais se dissipe : il porte la couleur de marque là où
   commence le titre et s'efface là où il n'a plus rien à dire, sans créer la coupure franche
   d'un trait qui s'arrête net. */
.famille__titre::before {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0;
    height: 2px; border-radius: 1px;
    background: linear-gradient(90deg,
        var(--turquoise) 0%,
        var(--vert) 34%,
        rgba(169, 194, 63, .35) 62%,
        rgba(169, 194, 63, 0) 100%);
}
.famille__titre + .question { margin-top: 26px; }

/* ---------- Question ---------- */

.question + .question { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--bordure); }

.question__champ { margin: 0; padding: 0; border: 0; min-inline-size: 0; }

/* La graisse fait la séparation entre la question et ses réponses : le libellé est en 700 à
   18 px, les choix restent en 400 à 15 px. Helvetica plutôt que League Spartan — plusieurs
   libellés font deux lignes chargées de parenthèses réglementaires, une linéale humaniste
   s'y lit mieux qu'une géométrique. */
.question__libelle {
    display: block; padding: 0;
    font-size: 1.125rem; font-weight: 700; line-height: 1.4;
    color: var(--encre);
}
.question__requis { margin-left: 3px; color: var(--turquoise); }
.question__consigne { margin-top: 6px; font-size: .8125rem; color: var(--gris); }

/* Un libellé en 700 à 18 px a besoin qu'on respire avant de répondre : sans cet écart, la
   question et sa réponse forment un seul bloc gris et l'œil ne sait plus où commence la
   zone de saisie. */
.question__champ > .choix-liste,
.question__consigne + .choix-liste { margin-top: 18px; }
.question__champ > .saisie,
.question__consigne + .saisie { margin-top: 18px; }
.question__champ > .mesure,
.question__consigne + .mesure { margin-top: 18px; }

/* Aide : pièce justificative et référence réglementaire */

.question__aide { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }

.piece-appui { font-size: .8125rem; color: var(--gris); }
.piece-appui__etiquette {
    font-family: var(--titre); font-weight: 600; font-size: 10.5px;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--turquoise); margin-right: 8px;
}

.reference { font-size: .8125rem; color: var(--gris); }
.reference summary {
    display: inline-flex; align-items: center; gap: 6px;
    width: fit-content; cursor: pointer; list-style: none;
    color: var(--gris); transition: color var(--transition);
}
.reference summary::-webkit-details-marker { display: none; }
.reference summary::before {
    content: ''; width: 5px; height: 5px;
    border: solid currentColor; border-width: 0 1.25px 1.25px 0;
    transform: rotate(-45deg); transition: transform var(--transition);
}
.reference[open] summary::before { transform: rotate(45deg); }
.reference summary:hover { color: var(--encre); }
.reference p {
    margin-top: 8px; padding-left: 11px;
    border-left: 2px solid var(--bordure);
    color: var(--gris);
}

.question--erreur .question__libelle { color: var(--rouge); }
.question__message-erreur { font-size: .8125rem; color: var(--rouge); }

/* ---------- Sous-questions ---------- */

.sousquestions {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 220ms cubic-bezier(0.4, 0, 0.2, 1),
                opacity 160ms linear,
                margin-top 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sousquestions[data-ouvert] { grid-template-rows: 1fr; opacity: 1; margin-top: 18px; }
.sousquestions__interieur { overflow: hidden; }

.sousquestions[data-ouvert] .sousquestions__interieur {
    padding: 22px 22px 24px;
    background: var(--brume);
    border-left: 2px solid var(--turquoise);
    border-radius: 0 var(--rayon) var(--rayon) 0;
}

.sousquestions .question__libelle { font-size: 1.0625rem; }
.sousquestions .question + .question {
    margin-top: 20px; padding-top: 20px;
    border-top: 1px solid var(--bordure-forte);
}
.sousquestions .choix { background: var(--blanc); }

/* ---------- Choix ---------- */

.choix-liste { display: flex; flex-direction: column; gap: 8px; }
.choix-liste--paire { display: grid; grid-template-columns: 1fr 1fr; }
.choix-liste--trio { display: grid; grid-template-columns: repeat(3, 1fr); }
.choix-liste--pastilles { flex-direction: row; flex-wrap: wrap; gap: 8px; }

.choix {
    position: relative;
    display: flex; align-items: center; gap: 14px;
    min-height: 44px; padding: 15px 18px;
    border: 0; border-radius: var(--rayon);
    background: var(--blanc); cursor: pointer;
    box-shadow: inset 0 0 0 1.5px var(--bordure);
    transition: background var(--transition), box-shadow var(--transition),
                transform var(--transition);
}

/* Voile teinté de l'état sélectionné, en opacité pour pouvoir transiter. */
.choix::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    background: var(--degrade-voile);
    opacity: 0; transition: opacity var(--transition);
    pointer-events: none;
}
/* Le libellé et la pastille passent au-dessus du voile. */
.choix > span { position: relative; z-index: 1; }

.choix:hover {
    background: var(--brume);
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 1.5px transparent, var(--elevation-basse);
}
.choix:hover::before { opacity: .4; }

.choix:has(.choix__saisie:checked) {
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 1.5px transparent, var(--halo), var(--elevation);
}
.choix:has(.choix__saisie:checked)::before,
.choix:has(.choix__saisie:checked)::after { opacity: 1; }

/* Le contour dégradé sert aussi bien au survol qu'à la sélection : le focus clavier a
   donc besoin d'un indicateur qui ne puisse pas être confondu avec eux. */
.choix:has(.choix__saisie:focus-visible) {
    outline: 3px solid var(--encre); outline-offset: 3px;
}
.choix:active { transform: translateY(0); }

.choix__saisie {
    position: absolute; opacity: 0;
    width: 1px; height: 1px; margin: 0; pointer-events: none;
}

.choix__libelle { flex: 1; font-size: .9375rem; line-height: 1.45; }

/* Marque de sélection : pastille pour un choix unique, coche pour un choix multiple */

/* Centrage par la grille plutôt que par des marges calculées : une marge de 4,5 px dans une
   boîte de 20 px bordée de 1,5 px tombe sur des demi-pixels, et le point se décalait
   visiblement vers la gauche selon l'arrondi du navigateur. */
.choix__marque {
    flex: none; display: grid; place-items: center;
    width: 20px; height: 20px; border-radius: 50%;
    border: 1.5px solid var(--controle);
    transition: border-color var(--transition), background var(--transition),
                box-shadow var(--transition);
}
.choix__marque::after {
    content: '';
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--blanc);
    transform: scale(0);
    /* Léger dépassement à l'arrivée : la sélection se sent, au lieu de simplement apparaître. */
    transition: transform 260ms var(--ressort);
}
.choix:has(.choix__saisie:checked) .choix__marque {
    border-color: transparent; background: var(--degrade);
    box-shadow: 0 2px 8px rgba(79, 159, 166, .38);
}
.choix:has(.choix__saisie:checked) .choix__marque::after { transform: scale(1); }

.choix__marque--coche { border-radius: 6px; }
.choix__marque--coche::after {
    width: 4px; height: 8px; border-radius: 0;
    /* Une coche pivotée pèse visuellement plus bas que son centre géométrique. */
    margin-bottom: 2px;
    background: none; border: solid var(--encre); border-width: 0 2px 2px 0;
    transform: rotate(42deg) scale(0);
}
.choix:has(.choix__saisie:checked) .choix__marque--coche::after { transform: rotate(42deg) scale(1); }

/* Choix simple compact : la marque passe à droite, le libellé est centré */

.choix-liste--paire .choix,
.choix-liste--trio .choix {
    flex-direction: column; gap: 10px;
    justify-content: center; padding: 24px 18px;
}
.choix-liste--paire .choix__libelle,
.choix-liste--trio .choix__libelle {
    flex: none; text-align: center; font-size: 1rem;
}

/* Pastilles (choix multiple) */

.choix--pastille {
    gap: 10px; padding: 11px 16px; border-radius: 999px;
    min-height: 42px;
}
.choix--pastille .choix__libelle { flex: none; }
.choix--pastille .choix__marque { width: 17px; height: 17px; }
.choix--pastille .choix__marque--coche::after { width: 3.5px; height: 7px; margin-bottom: 1.5px; }

/* Échelle de maturité — les quatre choix sont ordonnés du moins au plus mature, le libellé
   porte seul cette progression. `flex-start` garde la pastille alignée sur la première
   ligne des libellés qui passent sur deux lignes. */

.choix--maturite { align-items: flex-start; padding: 16px 18px; }
.choix--maturite .choix__marque { margin-top: 1px; }

/* ---------- Saisies ---------- */

.saisie { position: relative; border-radius: var(--rayon); transition: box-shadow var(--transition); }

.saisie__champ {
    display: block; width: 100%; padding: 14px 16px;
    font-family: var(--corps); font-size: 1rem; color: var(--encre);
    background: var(--blanc);
    border: 0; border-radius: var(--rayon);
    box-shadow: inset 0 0 0 1.5px var(--bordure);
    transition: box-shadow var(--transition);
}
.saisie__champ::placeholder { color: var(--gris); opacity: .75; }
.saisie__champ:hover { box-shadow: inset 0 0 0 1.5px var(--bordure-forte); }
.saisie__champ:focus { outline: none; box-shadow: inset 0 0 0 1.5px transparent; }

/* Le contour dégradé est porté par l'enveloppe : un `input` ne peut pas avoir de
   pseudo-élément, et c'est lui qui rend l'anneau transitionnable. */
.saisie:has(.saisie__champ:focus)::before { opacity: 1; }
.saisie:has(.saisie__champ:focus) { box-shadow: var(--halo), var(--elevation); }

.saisie__champ--zone { resize: vertical; min-height: 116px; line-height: 1.55; }

/* Un champ « Nom du contact » étiré sur toute la colonne paraît inachevé : les saisies
   courtes sont plafonnées, les zones de texte libre gardent la pleine largeur. */
.saisie--texte { max-width: 460px; }

/* Le conteneur épouse la largeur du champ pour que l'unité se cale toujours dans sa marge
   droite, quelle que soit la largeur disponible. */
.saisie--nombre { display: inline-block; width: min(260px, 100%); }
.saisie--avec-unite .saisie__champ { padding-right: 68px; }
.saisie__unite {
    position: absolute; top: 50%; right: 16px; transform: translateY(-50%);
    font-size: .875rem; color: var(--gris); pointer-events: none;
}

.question--erreur .saisie__champ { box-shadow: inset 0 0 0 1.5px var(--rouge); }

/* Groupe de mesure : le nombre, son unité, sa période. Les trois se lisent comme une seule
   phrase — « 12 tonnes par année » — donc ils restent sur une ligne tant que la place le
   permet, et s'empilent proprement sinon. */
.mesure { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.mesure .saisie--nombre { width: min(190px, 100%); }
.saisie--menu { width: auto; }

/* ---------- Menu déroulant ----------

   Le `<select>` natif reste dans la page — c'est lui qui porte le nom, la valeur et
   l'envoi du formulaire. Le script pose par-dessus un bouton et un panneau qu'on peut
   réellement dessiner : la liste d'options d'un select est rendue par le système
   d'exploitation et n'accepte ni rayon, ni ombre, ni couleur de marque.

   Sans JavaScript, rien n'est enrichi et le select natif s'affiche tel quel — dégradé
   visuellement, jamais cassé fonctionnellement. */

.saisie__menu {
    width: auto; min-width: 118px; padding-right: 40px;
    cursor: pointer;
    appearance: none; -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--gris) 50%),
                      linear-gradient(135deg, var(--gris) 50%, transparent 50%);
    background-position: right 19px center, right 14px center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

/* Le contour dégradé s'allume aussi quand le panneau est ouvert : le bouton garde le focus,
   mais c'est l'ouverture que l'œil doit voir. */
.saisie--menu[data-ouvert]::before { opacity: 1; }
.saisie--menu[data-ouvert] { box-shadow: var(--halo), var(--elevation); }

.menu__declencheur {
    display: inline-flex; align-items: center; justify-content: space-between; gap: 14px;
    width: auto; min-width: 132px;
    text-align: left; cursor: pointer;
    transition: box-shadow var(--transition), color var(--transition);
}
.menu__valeur--vide { color: var(--gris); }

/* Chevron : deux traits, pivotés d'un demi-tour à l'ouverture. Dessiné en CSS, donc
   aucune icône à charger et il suit la couleur du texte. */
.menu__chevron {
    flex: none; position: relative; width: 9px; height: 9px;
    transition: transform 300ms var(--ressort);
}
.menu__chevron::after {
    content: ''; position: absolute; top: 0; left: 1px;
    width: 6.5px; height: 6.5px;
    border: solid var(--gris); border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
    transition: border-color var(--transition);
}
.saisie--menu[data-ouvert] .menu__chevron { transform: rotate(180deg); }
.menu__declencheur:hover .menu__chevron::after,
.saisie--menu[data-ouvert] .menu__chevron::after { border-color: var(--encre); }

.menu__panneau {
    position: absolute; z-index: 40;
    top: calc(100% + 10px); left: 0;
    min-width: 100%; width: max-content; max-width: min(280px, 78vw);
    padding: 6px;
    background: var(--blanc);
    border-radius: var(--rayon);
    box-shadow: 0 0 0 1px var(--bordure),
                0 2px 6px rgba(0, 59, 73, .06),
                0 20px 48px rgba(0, 59, 73, .16);
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-8px) scale(.96); transform-origin: top left;
    transition: opacity 130ms ease,
                transform 300ms var(--ressort),
                visibility 0s linear 300ms;
}
.saisie--menu[data-ouvert] .menu__panneau {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: none;
    transition: opacity 120ms ease, transform 320ms var(--ressort), visibility 0s;
}
/* Trop bas dans la fenêtre, le panneau s'ouvre vers le haut plutôt que de sortir de l'écran. */
.saisie--menu[data-vers-haut] .menu__panneau {
    top: auto; bottom: calc(100% + 10px);
    transform-origin: bottom left;
    transform: translateY(8px) scale(.96);
}
.saisie--menu[data-vers-haut][data-ouvert] .menu__panneau { transform: none; }

.menu__option {
    display: flex; align-items: center; gap: 11px;
    padding: 11px 12px; border-radius: var(--rayon-petit);
    font-size: .9375rem; line-height: 1.3; color: var(--encre);
    cursor: pointer; user-select: none;
    transition: background var(--transition);
}
/* Une seule surbrillance, pilotée par le script : la souris et le clavier désignent la
   même option, donc survoler ne doit pas en allumer une deuxième. */
.menu__option[data-actif] { background: var(--brume); }
.menu__option[aria-selected="true"] { background: var(--degrade-voile); }
.menu__option[aria-selected="true"][data-actif] {
    background: linear-gradient(135deg, rgba(79, 159, 166, .2), rgba(169, 194, 63, .2));
}

/* La pastille du choix retenu reprend celle des réponses — remplie du dégradé de marque,
   coche blanche. Elle reste invisible tant que rien n'est retenu : une pastille creuse sur
   chaque ligne se lirait comme un bouton radio, alors qu'un menu n'offre qu'un choix. La
   place est neanmoins reservée, pour que la liste ne se décale pas à la sélection. */
.menu__coche {
    flex: none; display: grid; place-items: center;
    width: 17px; height: 17px; border-radius: 50%;
    transition: background var(--transition);
}
.menu__coche::after {
    content: ''; width: 3.5px; height: 7px; margin-bottom: 1.5px;
    border: solid var(--blanc); border-width: 0 1.75px 1.75px 0;
    transform: rotate(42deg) scale(0);
    transition: transform 260ms var(--ressort);
}
.menu__option[aria-selected="true"] .menu__coche { background: var(--degrade); }
.menu__option[aria-selected="true"] .menu__coche::after { transform: rotate(42deg) scale(1); }

@media (prefers-reduced-motion: reduce) {
    .menu__panneau, .menu__chevron, .menu__coche::after { transition-duration: 1ms; }
}

/* Champ de précision d'un choix « Autre ». Même mécanique de repli que les sous-questions. */
.precision {
    display: grid; grid-template-rows: 0fr; opacity: 0;
    transition: grid-template-rows 220ms cubic-bezier(0.4, 0, 0.2, 1),
                opacity 160ms linear,
                margin-top 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.precision[data-ouvert] { grid-template-rows: 1fr; opacity: 1; margin-top: 14px; }
.precision__interieur { overflow: hidden; }
.precision__libelle {
    display: block; margin-bottom: 8px;
    font-size: .8125rem; color: var(--gris);
}

/* ---------- Alertes ---------- */

.alerte {
    margin-bottom: 36px; padding: 20px 22px;
    background: #fdf3f1; border-left: 3px solid var(--rouge);
    border-radius: 0 var(--rayon) var(--rayon) 0;
    font-size: .9375rem; color: var(--encre);
}
.alerte__titre { font-family: var(--titre); font-weight: 600; margin-bottom: 8px; }
.alerte ul { margin-top: 6px; display: flex; flex-direction: column; gap: 5px; }
.alerte li { color: var(--gris); }
.alerte a { color: var(--rouge); }

.alerte--info { background: var(--turquoise-pale); border-left-color: var(--turquoise); }
.alerte--info .alerte__titre { color: var(--encre); }

/* ---------- Boutons et pied de section ---------- */

.bouton {
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 48px; padding: 14px 30px;
    font-family: var(--titre); font-weight: 600; font-size: .9375rem;
    letter-spacing: .02em; text-decoration: none;
    border: 1px solid transparent; border-radius: 10px;
    cursor: pointer;
    transition: background var(--transition), color var(--transition),
                border-color var(--transition), transform var(--transition),
                box-shadow var(--transition);
}

.bouton__fleche {
    flex: none; width: 17px; height: 17px;
    transition: transform 260ms var(--ressort);
}
.bouton:hover .bouton__fleche { transform: translateX(3px); }

.bouton--principal { background: var(--encre); color: var(--blanc); }
/* Liseré dégradé qui se déploie de gauche à droite : l'appel à l'action s'anime sans
   que le bouton lui-même change de couleur de marque. */
.bouton--principal::after {
    content: ''; position: absolute; inset: auto 0 0 0; height: 2px;
    background: var(--degrade);
    transform: scaleX(0); transform-origin: left;
    transition: transform 320ms var(--ressort);
}
.bouton--principal:hover::after { transform: scaleX(1); }
.bouton--principal:hover {
    background: var(--encre-clair);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0, 59, 73, .22);
}

.bouton--discret { background: transparent; color: var(--gris); border-color: var(--bordure); }
.bouton--discret:hover { color: var(--encre); border-color: var(--bordure-forte); background: var(--brume); }

/* Bouton de prise de rendez-vous : le geste de marque bleu -> vert, l'accent coloré de la
   barre d'actions. Le dégradé est majoritairement bleu -> turquoise, assez foncé pour porter
   un texte blanc lisible ; le vert n'arrive qu'en fin de course, en touche. Un léger
   text-shadow sécurise le libellé là où la butée verte s'éclaircit.
   Dégradé horizontal (90°) et non en biais : un angle laissait le coin haut-droit retomber
   sur une valeur plus foncée que le bas-droit, d'où une bande verticale sombre au bord droit. */
.bouton--rdv {
    color: var(--blanc);
    background: linear-gradient(90deg, var(--encre) 0%, var(--turquoise) 62%, var(--vert) 112%);
    border-color: transparent;
    text-shadow: 0 1px 1px rgba(0, 59, 73, .28);
    box-shadow: 0 6px 18px rgba(0, 59, 73, .16);
}
.bouton--rdv:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 59, 73, .26);
    filter: saturate(108%);
}

.section__pied {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    margin-top: 44px; padding-top: 26px;
    border-top: 1px solid var(--bordure);
}

.mention { margin-top: 26px; font-size: .78125rem; line-height: 1.5; color: var(--gris); }

/* ---------- Accueil ---------- */

.accueil {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    min-height: 100vh;
    min-height: 100dvh;
}
/* La taille minimale automatique d'un élément de grille vaut sa largeur min-content, ce qui
   le laisse déborder d'une colonne plus étroite. `min-width: 0` rend la contrainte au
   conteneur — sans quoi le panneau droit dépasse l'écran sur mobile. */
.accueil > * { min-width: 0; }

.accueil__marque {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; justify-content: center; gap: 34px;
    padding: clamp(48px, 6vw, 88px);
    background: var(--encre); color: var(--blanc);
}
.accueil__motif {
    position: absolute; inset: auto -240px -260px auto;
    width: 780px; height: 780px; color: var(--blanc); opacity: .07;
}
.accueil__marque > *:not(.accueil__motif) { position: relative; z-index: 1; }

/* Repli si aucune version blanche du logo n'a été déposée : on inverse la version couleur. */
.accueil__logo--inverse { filter: brightness(0) invert(1); }
.accueil__logo { width: min(240px, 62%); }

.accueil__logo-substitut { line-height: 1; }
.accueil__logo-substitut strong {
    display: block; font-family: var(--titre); font-weight: 700;
    font-size: clamp(48px, 6vw, 76px); letter-spacing: -.02em;
}
.accueil__logo-substitut em {
    display: block; margin-top: 10px; font-style: normal;
    font-family: var(--titre); font-weight: 500; font-size: 15px;
    letter-spacing: .2em; text-transform: uppercase; color: var(--turquoise);
}
.accueil__signature { font-size: 1rem; line-height: 1.7; color: rgba(255, 255, 255, .62); }

.accueil__contenu {
    display: flex; flex-direction: column; align-items: flex-start;
    justify-content: center;
    padding: clamp(48px, 6vw, 96px);
    width: 100%; max-width: 760px;
}
.accueil__contenu > * { max-width: 100%; }
.accueil__titre {
    margin-top: 16px;
    font-size: clamp(2.3rem, 4.4vw, 3.4rem);
    line-height: 1.04; letter-spacing: -.02em;
}
.accueil__texte {
    margin-top: 24px; max-width: 56ch;
    font-size: 1.0625rem; line-height: 1.65; color: var(--gris);
}
.accueil__texte em { font-style: italic; }
.accueil__texte--secondaire { font-size: 1rem; }

/* Bénéfices : ce que le répondant obtient. C'est le cœur de l'argumentaire, donc la seule
   zone de la page qui porte de la couleur en volume. */

.benefices {
    display: flex; flex-direction: column; gap: 24px;
    margin-top: 40px; width: 100%;
}
.benefice { display: flex; align-items: flex-start; gap: 20px; }

.benefice__icone {
    position: relative; flex: none;
    width: 66px; height: 66px; border-radius: 19px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, rgba(79, 159, 166, .17), rgba(169, 194, 63, .19));
    transition: transform var(--transition), box-shadow var(--transition);
}
.benefice__icone::before { opacity: .8; }
.benefice:hover .benefice__icone {
    transform: translateY(-2px) scale(1.03);
    box-shadow: var(--elevation-basse);
}
.benefice:hover .benefice__icone::before { opacity: 1; }
.benefice__icone svg { width: 32px; height: 32px; }

.benefice__texte { font-size: .9375rem; line-height: 1.55; color: var(--gris); padding-top: 8px; }
.benefice__texte strong {
    display: block; margin-bottom: 3px;
    font-family: var(--titre); font-weight: 600; font-size: 1.0625rem;
    letter-spacing: -.005em; color: var(--encre);
}

/* Durée, volume et absence de préparation : des objections à lever, pas des arguments.
   Une seule ligne discrète, juste avant le bouton. */
.metriques {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 26px;
    margin-top: 34px;
    font-size: .8125rem; color: var(--gris);
}
.metriques li { display: inline-flex; align-items: center; gap: 8px; }
.metriques svg { flex: none; width: 17px; height: 17px; }

.accueil__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* ---------- Compte (accueil) ---------- */

/* Le formulaire de compte occupe la zone d'action tant que le repondant n'est pas connecte.
   Il reprend les champs `.saisie` du questionnaire pour rester natif au design. */
.compte { width: 100%; max-width: 420px; }
.compte__panneau { display: flex; flex-direction: column; gap: 12px; }
.compte__panneau[hidden] { display: none; }
.compte__titre {
    font-family: var(--titre); font-weight: 600; font-size: 1.0625rem; color: var(--encre);
    margin-bottom: 2px;
}
.compte .saisie--texte { max-width: none; }
.compte .bouton { margin-top: 4px; }
.compte__bascule { margin-top: 4px; font-size: .875rem; color: var(--gris); }
.compte__bascule a { color: var(--turquoise); font-weight: 600; text-decoration: none; }
.compte__bascule a:hover { text-decoration: underline; }
.compte .alerte { margin-bottom: 16px; }

/* Lien « mot de passe oublié ? », discret sous le champ mot de passe de la connexion. */
.compte__oubli { margin: -2px 0 2px; font-size: .8125rem; text-align: right; }
.compte__oubli a { color: var(--gris); text-decoration: none; }
.compte__oubli a:hover { color: var(--turquoise); text-decoration: underline; }

/* Pages autonomes centrées (mot de passe oublié, nouveau mot de passe). Elles empruntent
   les briques du formulaire de compte (.compte__panneau, .saisie, .alerte) dans une carte
   simple, sans le panneau de marque du questionnaire. */
.page-simple {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 40px 20px;
    background:
        radial-gradient(120% 120% at 100% 0%, var(--turquoise-pale) 0%, transparent 55%),
        var(--brume);
}
.page-simple__carte {
    width: 100%;
    max-width: 440px;
    background: var(--blanc);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    box-shadow: var(--elevation);
    padding: clamp(24px, 4vw, 36px);
}
.page-simple__retour {
    display: inline-block; margin-bottom: 18px;
    font-size: .8125rem; color: var(--gris); text-decoration: none;
}
.page-simple__retour:hover { color: var(--turquoise); }
.page-simple__titre {
    font-family: var(--titre); font-weight: 600; font-size: 1.375rem; color: var(--encre);
    margin-bottom: 8px;
}
.page-simple__intro { font-size: .9375rem; line-height: 1.55; color: var(--gris); margin-bottom: 20px; }
.page-simple__intro strong { color: var(--encre); overflow-wrap: anywhere; }
.page-simple__aide { margin-top: 18px; font-size: .875rem; color: var(--gris); }
.page-simple__aide a { color: var(--turquoise); font-weight: 600; text-decoration: none; }
.page-simple__aide a:hover { text-decoration: underline; }

/* Bouton stylé en lien : une action (déconnexion) qui doit passer en POST sans ressembler
   à un bouton plein. */
.lien-bouton {
    display: inline; padding: 0; border: 0; background: none; cursor: pointer;
    font: inherit; color: var(--turquoise); font-weight: 600; text-decoration: underline;
}
.lien-bouton:hover { color: var(--encre); }
.lien-bouton--clair { color: rgba(255, 255, 255, .8); text-decoration: underline; }
.lien-bouton--clair:hover { color: var(--blanc); }

/* Jeton « compte connecté » sous les actions de l'accueil : il dit qui est connecté et offre
   la sortie, sans jamais concurrencer le bouton principal. Fond brume, hairline, e-mail en
   encre discret, déconnexion en action secondaire qui ne se souligne qu'au survol. */
.compte-actif {
    margin-top: 20px;
    /* Le parent .accueil__contenu est une colonne flex qui étire ses enfants : sans ce
       flex-start, le jeton occuperait toute la largeur et béerait entre l'e-mail et l'action. */
    align-self: flex-start;
    display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 14px;
    max-width: 100%;
    padding: 7px 14px;
    background: var(--brume);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon-petit);
    font-size: .8125rem; line-height: 1.3; color: var(--gris);
}
.compte-actif__icone { width: 15px; height: 15px; flex: none; color: var(--turquoise); }
.compte-actif__courriel { font-weight: 500; color: var(--encre); overflow-wrap: anywhere; }
.compte-actif__forme { display: inline-flex; }
.compte-actif__quitter {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 0; border: 0; background: none; cursor: pointer;
    font: inherit; font-size: .8125rem; color: var(--gris);
    text-decoration: none; text-underline-offset: 2px;
    transition: color .15s ease;
    white-space: nowrap;
}
.compte-actif__quitter svg { width: 14px; height: 14px; flex: none; }
.compte-actif__quitter:hover,
.compte-actif__quitter:focus-visible { color: var(--encre); text-decoration: underline; }
.panneau__deconnexion { margin-top: 12px; }
.barre-actions__deconnexion { display: inline-flex; }

/* ---------- Écran de génération ---------- */

.page--generation .ecran { grid-template-columns: minmax(0, 1fr); }
.page--generation .contenu { padding: 0; }
.page--generation { background: var(--encre); }

.generation {
    position: relative; overflow: hidden;
    min-height: 100vh; min-height: 100dvh;
    display: grid; place-items: center;
    padding: clamp(32px, 6vw, 72px);
    color: var(--blanc);
    /* Dégradé bleu-vert de la charte, approfondi par l'encre pour un plein écran. */
    background: linear-gradient(140deg, var(--encre) 0%, var(--turquoise) 58%, var(--vert) 132%);
}
.generation__motif {
    position: absolute; right: -12%; bottom: -34%;
    width: min(760px, 92vw); color: rgba(255, 255, 255, .12);
    pointer-events: none;
}
.generation__contenu { position: relative; z-index: 1; width: 100%; max-width: 460px; }
.generation__surtitre {
    font-family: var(--titre); font-weight: 600; font-size: 12px;
    letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .72);
}
.generation__titre {
    margin-top: 10px;
    font-family: var(--titre); font-weight: 600; letter-spacing: -.01em;
    font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1.12;
}
.generation__etapes { margin-top: 36px; display: flex; flex-direction: column; gap: 4px; }

.gen-etape {
    position: relative; display: flex; align-items: center; gap: 16px;
    padding: 12px 0 12px 4px;
    opacity: .5; transition: opacity 500ms ease;
}
/* Fil vertical reliant les marques, comme le fil du plan 90 jours du rapport. */
.gen-etape:not(:last-child)::before {
    content: ''; position: absolute; left: 18px; top: 36px; bottom: -4px; width: 2px;
    background: rgba(255, 255, 255, .22);
}
.gen-etape--fait, .gen-etape--active { opacity: 1; }

.gen-etape__marque {
    position: relative; flex: none;
    width: 30px; height: 30px; border-radius: 50%;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45);
    transition: box-shadow 400ms ease, background 400ms ease;
}
.gen-etape--active .gen-etape__marque {
    box-shadow: inset 0 0 0 2px var(--blanc), 0 0 0 6px rgba(255, 255, 255, .14);
    animation: gen-pulse 1.4s ease-in-out infinite;
}
.gen-etape--fait .gen-etape__marque {
    background: var(--blanc); box-shadow: inset 0 0 0 2px var(--blanc);
}
.gen-etape--fait .gen-etape__marque::after {
    content: ''; position: absolute; left: 11px; top: 7px;
    width: 5px; height: 10px;
    border: solid var(--encre); border-width: 0 2px 2px 0; transform: rotate(42deg);
}
.gen-etape__texte {
    font-family: var(--titre); font-weight: 500; font-size: 1.0625rem;
    color: rgba(255, 255, 255, .9);
}
.gen-etape--fait .gen-etape__texte { color: var(--blanc); }

.generation__note { margin-top: 30px; font-size: .875rem; color: rgba(255, 255, 255, .72); }
.generation__lien { color: var(--blanc); font-weight: 600; }

@keyframes gen-pulse {
    0%, 100% { box-shadow: inset 0 0 0 2px var(--blanc), 0 0 0 5px rgba(255, 255, 255, .10); }
    50%      { box-shadow: inset 0 0 0 2px var(--blanc), 0 0 0 9px rgba(255, 255, 255, .20); }
}
@media (prefers-reduced-motion: reduce) {
    .gen-etape { transition: none; }
    .gen-etape--active .gen-etape__marque { animation: none; }
}

/* ---------- Tableau de bord admin ---------- */

.page--admin .ecran { grid-template-columns: minmax(0, 1fr); }
.page--admin .contenu { padding: clamp(32px, 5vw, 64px) clamp(20px, 4vw, 48px); }

.admin { max-width: 1280px; margin-inline: auto; }
.admin__eyebrow {
    font-family: var(--titre); font-weight: 600; font-size: 12px;
    letter-spacing: .18em; text-transform: uppercase; color: var(--turquoise);
}
.admin__titre {
    font-family: var(--titre); font-weight: 600; letter-spacing: -.01em;
    font-size: clamp(1.6rem, 3vw, 2.1rem); color: var(--encre);
}
.admin__compte { color: var(--gris); font-weight: 500; }
.admin__intro { margin-top: 8px; color: var(--gris); font-size: .9375rem; }
.admin--message { padding-top: 24px; }
.admin--message .admin__intro a, .admin--message code { color: var(--turquoise); }

.admin__entete {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
    flex-wrap: wrap; margin-bottom: 26px;
}
.admin__retour {
    display: inline-block; margin-bottom: 6px;
    color: var(--turquoise); font-size: .85rem; text-decoration: none; font-weight: 600;
}
.admin__retour:hover { text-decoration: underline; }

/* Table des répondants : défile horizontalement dans son cadre sur petit écran. */
.admin__table-enveloppe {
    overflow-x: auto;
    border-radius: var(--rayon);
    box-shadow: inset 0 0 0 1px var(--bordure), var(--ombre-douce);
    background: var(--blanc);
}
.admin__table { width: 100%; min-width: 920px; border-collapse: collapse; font-size: .9rem; }
.admin__table thead th {
    text-align: left; padding: 14px 16px;
    font-family: var(--titre); font-weight: 600; font-size: .78rem;
    letter-spacing: .03em; color: var(--turquoise);
    background: var(--brume); border-bottom: 1px solid var(--bordure);
}
.admin__table td {
    padding: 13px 16px; border-bottom: 1px solid var(--bordure);
    color: var(--encre); vertical-align: middle;
}
.admin__table tbody tr:last-child td { border-bottom: 0; }
.admin__table tbody tr:hover { background: var(--brume); }
.admin__date { white-space: nowrap; color: var(--gris); font-variant-numeric: tabular-nums; }
.admin__courriel { color: var(--gris); }
.admin__score { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.admin__actions { white-space: nowrap; }
.admin__actions .bouton { min-height: 34px; padding: 7px 14px; font-size: .8rem; }
.admin__actions .bouton + .bouton { margin-left: 8px; }

/* Écran de connexion admin, centré. */
.admin--connexion { min-height: 66vh; display: grid; place-items: center; }
.admin-connexion { width: 100%; max-width: 380px; }
.admin-connexion__form { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
.admin-connexion .saisie--texte { max-width: none; }

/* Fiche détail. */
.admin-fiche {
    margin-top: 24px; padding: 24px 28px;
    background: var(--blanc); border-radius: var(--rayon);
    box-shadow: inset 0 0 0 1px var(--bordure);
}
.admin-fiche__titre {
    font-family: var(--titre); font-weight: 600; font-size: 1.125rem; color: var(--encre);
    padding-bottom: 12px; border-bottom: 1px solid var(--bordure);
}
.admin-fiche__grille {
    margin-top: 16px;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px 24px;
}
.admin-fiche__grille dt {
    font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--gris);
}
.admin-fiche__grille dd { margin-top: 3px; color: var(--encre); word-break: break-word; }
.admin-fiche__score { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 16px; }
.admin-fiche__pourcent { font-family: var(--titre); font-weight: 600; font-size: 1.75rem; color: var(--encre); }
.admin-fiche__points { color: var(--gris); font-size: .875rem; }
.admin-fiche__thematiques {
    margin-top: 18px;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2px 28px;
}
.admin-fiche__thematiques li {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 7px 0; border-bottom: 1px solid var(--bordure);
    font-size: .9rem; color: var(--gris);
}
.admin-fiche__thematiques strong { color: var(--encre); font-variant-numeric: tabular-nums; }
.admin-fiche__vide { color: var(--gris); }

.admin-reponses { margin-top: 20px; }
.admin-reponses + .admin-reponses { margin-top: 26px; }
.admin-reponses__titre {
    display: flex; align-items: baseline; gap: 12px;
    font-family: var(--titre); font-weight: 600; font-size: 1rem; color: var(--encre);
}
.admin-reponses__score { color: var(--turquoise); font-size: .85rem; font-variant-numeric: tabular-nums; }
.admin-reponses__table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.admin-reponses__table th[scope="row"] {
    text-align: left; font-weight: 500; color: var(--gris);
    padding: 8px 16px 8px 0; width: 55%; vertical-align: top; line-height: 1.4;
}
.admin-reponses__table td { padding: 8px 0; color: var(--encre); vertical-align: top; line-height: 1.4; }
.admin-reponses__table tr + tr th, .admin-reponses__table tr + tr td { border-top: 1px solid var(--bordure); }
.admin-reponses__nul { color: var(--gris); }

/* ---------- Écran de fin ---------- */

.carte-fin {
    position: relative;
    padding: 32px 34px;
    background: var(--brume); border-radius: var(--rayon);
}
.carte-fin::before { opacity: 1; }
.carte-fin h2 {
    font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--gris);
}
.etapes-suite { counter-reset: suite; margin-top: 22px; display: flex; flex-direction: column; gap: 22px; }
.etapes-suite li {
    counter-increment: suite;
    position: relative; padding-left: 42px;
    font-size: .9375rem; color: var(--gris);
}
.etapes-suite li::before {
    content: counter(suite);
    position: absolute; left: 0; top: -1px;
    width: 28px; height: 28px;
    display: grid; place-items: center;
    border-radius: 50%; background: var(--encre); color: var(--blanc);
    font-family: var(--titre); font-weight: 600; font-size: .8125rem;
}
.etapes-suite strong {
    display: block; margin-bottom: 4px;
    font-family: var(--titre); font-weight: 600; font-size: 1rem; color: var(--encre);
}
.carte-fin__destinataire {
    margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--bordure);
    font-size: .875rem; color: var(--gris);
}
.section--fin .alerte { margin: 32px 0 0; }

/* =========================================================================
   Rapport de diagnostic
   =========================================================================

   Le rapport reprend integralement la charte du questionnaire : memes tokens, memes
   cartes, memes boutons, meme dégradé de marque sur les états forts. Seule difference
   assumée, le fond passe en `--brume` pour que les cartes blanches se detachent — c'est
   ce qui distingue un document qu'on parcourt d'un formulaire qu'on remplit.

   Trois tokens sont propres au rapport. Ils ne sortent pas de la charte : la palette FPD
   ne comporte aucune couleur chaude, et inventer un ambre pour obtenir un feu tricolore
   aurait introduit une couleur etrangere a la marque. L'echelle est donc froide, et la
   severite se lit surtout dans le remplissage de l'anneau et dans le mot ecrit dessous —
   jamais dans la couleur seule. */

.page--rapport {
    --score-eleve: var(--degrade);
    --score-moyen: var(--turquoise);
    --score-faible: var(--rouge);
    --rapport-colonne: 1080px;

    background: var(--brume);
}
.page--rapport .contenu { padding: 0 clamp(20px, 5vw, 56px) clamp(56px, 8vw, 96px); }

.rapport { max-width: var(--rapport-colonne); margin-inline: auto; }
.rapport--vide { padding-top: clamp(64px, 12vh, 140px); max-width: var(--colonne); }

/* ---------- Barre d'actions ---------- */

.barre-actions {
    position: sticky; top: 0; z-index: 30;
    margin-bottom: clamp(32px, 5vw, 52px);
    background: rgba(247, 249, 249, .86);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--transition), box-shadow var(--transition);
}
/* Le filet n'apparait qu'une fois la page defilee : au repos, la barre doit se fondre
   dans le fond plutot que de couper l'en-tete d'un trait. */
.barre-actions[data-detache] {
    border-bottom-color: var(--bordure);
    box-shadow: 0 6px 20px rgba(0, 59, 73, .05);
}
.barre-actions__interieur {
    max-width: var(--rapport-colonne); margin-inline: auto;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 14px 0;
}
.barre-actions__titre {
    font-family: var(--titre); font-weight: 500; font-size: 11.5px;
    letter-spacing: .16em; text-transform: uppercase; color: var(--gris);
}
.barre-actions__boutons { display: flex; flex-wrap: wrap; gap: 10px; }
.barre-actions .bouton { min-height: 40px; padding: 9px 18px; font-size: .875rem; }

/* ---------- En-tête ---------- */

.rapport__entete { padding-bottom: clamp(32px, 4.5vw, 48px); }
.rapport__logo { width: 180px; margin-bottom: 34px; }

/* Le document se nomme avant son destinataire, et il le fait en grand. Le titre tenait
   auparavant dans une sur-ligne de 12 px au-dessus du nom de l'entreprise : on ne savait
   pas ce qu'on avait sous les yeux. */
.rapport__titre {
    max-width: 16ch;
    font-family: var(--titre); font-weight: 600;
    font-size: clamp(2.4rem, 5.4vw, 3.4rem);
    line-height: 1.02; letter-spacing: -.022em;
}
.rapport__destinataire {
    margin-top: 20px; padding-top: 20px;
    border-top: 2px solid var(--encre);
    max-width: 34ch;
    font-family: var(--titre); font-weight: 500; font-size: clamp(1.25rem, 2.2vw, 1.5rem);
    line-height: 1.2; color: var(--encre);
}
.rapport__meta {
    margin-top: 12px;
    display: flex; flex-wrap: wrap; gap: 8px 18px;
    font-size: .9375rem; color: var(--gris);
}
/* Séparateur en losange : un tiret entre deux mentions se confondrait avec la ponctuation
   d'un secteur d'activité composé (« fabrication métallique - usinage »). */
.rapport__meta span + span::before {
    content: ''; display: inline-block; vertical-align: middle;
    width: 4px; height: 4px; margin-right: 12px;
    background: var(--vert); transform: rotate(45deg);
}
/* ---------- Sections ---------- */

.rapport__section { margin-top: clamp(48px, 7vw, 82px); }
/* L'en-tete a deja sa marge basse : cumulee au pas inter-sections, elle creusait un vide
   de 130 px entre le titre et le premier chiffre. */
.rapport__entete + .rapport__section { margin-top: clamp(20px, 3vw, 34px); }
.rapport__entete-section { margin-bottom: 24px; }
.rapport__soustitre {
    display: flex; align-items: center; gap: 12px;
    font-family: var(--titre); font-weight: 600;
    font-size: 1.375rem; letter-spacing: -.01em; color: var(--encre);
}
.rapport__soustitre svg { flex: none; width: 24px; height: 24px; }
.rapport__intro { margin-top: 8px; max-width: 62ch; font-size: .9375rem; color: var(--gris); }
.rapport__note {
    margin-top: 20px; padding: 16px 18px;
    background: var(--blanc); border-radius: var(--rayon-petit);
    box-shadow: inset 0 0 0 1px var(--bordure);
    font-size: .875rem; line-height: 1.6; color: var(--gris);
}
.rapport__note--bonne { box-shadow: inset 0 0 0 1px rgba(169, 194, 63, .5); }
.rapport__cloture {
    margin-top: 26px; max-width: 68ch;
    font-size: 1.0625rem; line-height: 1.65; color: var(--gris);
}

/* Carte générique du rapport : même vocabulaire que `.carte-fin`, fond blanc parce que
   le fond de page est déjà `--brume`. */
.carte {
    position: relative;
    padding: clamp(22px, 3vw, 32px);
    background: var(--blanc);
    border-radius: var(--rayon);
    box-shadow: inset 0 0 0 1px var(--bordure), var(--ombre-douce);
}

/* ---------- Anneau de score ---------- */

.anneau {
    position: relative; display: grid; place-items: center;
    /* 2 × π × 52, le rayon du tracé. Sortir cette valeur en variable évite de la
       recalculer dans chaque règle qui touche au remplissage. */
    --circonference: 326.726;
    --epaisseur: 11;
    width: var(--taille); height: var(--taille);
}
.anneau--hero { --taille: clamp(180px, 34vw, 216px); --epaisseur: 10; }
.anneau--carte { --taille: 112px; --epaisseur: 12; }
.anneau--mini { --taille: 34px; --epaisseur: 18; }

.anneau__trace { grid-area: 1 / 1; width: 100%; height: 100%; transform: rotate(-90deg); }
.anneau__fond { stroke: var(--bordure); stroke-width: var(--epaisseur); }
.anneau__valeur {
    stroke-width: var(--epaisseur); stroke-linecap: round;
    stroke-dasharray: var(--circonference);
    stroke-dashoffset: calc(var(--circonference) * (1 - var(--valeur) / 100));
    transition: stroke-dashoffset 900ms var(--ressort);
}
.anneau--eleve .anneau__valeur { stroke: url(#degradeFPD); }
.anneau--moyen .anneau__valeur { stroke: var(--score-moyen); }
.anneau--faible .anneau__valeur { stroke: var(--score-faible); }

.anneau__chiffre {
    grid-area: 1 / 1;
    display: flex; align-items: baseline; gap: 1px;
    font-family: var(--titre); font-weight: 600; color: var(--encre);
    letter-spacing: -.03em;
}
.anneau--hero .anneau__chiffre { font-size: clamp(3rem, 8vw, 3.75rem); }
.anneau--carte .anneau__chiffre { font-size: 1.75rem; }
.anneau--mini .anneau__chiffre { display: none; }
.anneau__unite { font-size: .5em; font-weight: 500; }
.anneau__vide { font-size: .34em; font-weight: 500; color: var(--gris); letter-spacing: 0; }

/* ---------- B. Bloc héros ---------- */

.heros { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 20px; }
.heros__jauge { display: flex; flex-direction: column; align-items: center; text-align: center; }
.heros__libelle {
    margin-top: 22px;
    font-family: var(--titre); font-weight: 500; font-size: 12px;
    letter-spacing: .14em; text-transform: uppercase; color: var(--gris);
}
.heros__texte { display: flex; flex-direction: column; justify-content: center; }
.heros__narratif { font-size: 1.0625rem; line-height: 1.7; color: var(--gris); }
.heros__narratif strong, .heros__narratif b { color: var(--encre); font-weight: 700; }

.heros__chiffres {
    margin-top: 26px; padding-top: 24px;
    border-top: 1px solid var(--bordure);
    display: flex; flex-wrap: wrap; gap: 14px 40px;
}
.heros__chiffres dt {
    font-family: var(--titre); font-weight: 500; font-size: 10.5px;
    letter-spacing: .12em; text-transform: uppercase; color: var(--gris);
}
.heros__chiffres dd {
    margin: 4px 0 0;
    font-family: var(--titre); font-weight: 600; font-size: 1.5rem; color: var(--encre);
}

/* Pastille de niveau. Le mot porte l'information; la couleur ne fait que la confirmer. */
.pastille {
    margin-top: 14px; padding: 7px 18px; border-radius: 999px;
    font-family: var(--titre); font-weight: 600; font-size: .875rem;
    letter-spacing: .01em; color: var(--blanc);
}
.pastille--eleve { background: var(--degrade); }
.pastille--moyen { background: var(--turquoise); }
.pastille--faible { background: var(--rouge); }

/* Variante en ligne, pour une pastille posee au milieu d'une ligne de texte plutot que
   sous l'anneau du heros. Sans elle, la marge haute de 14 px du modele de base la faisait
   chevaucher le libelle qui la precede. */
.pastille--menue {
    margin-top: 0; padding: 3px 10px;
    font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
    white-space: nowrap;
}

/* ---------- C. Barres par thématique ----------

   Douze anneaux tenaient sur 1400 px et ne se comparaient pas : un cercle se lit seul,
   pas en grille. Alignees sur une meme base, les barres se comparent d'un coup d'oeil,
   tiennent en un ecran, et rendent au score global son statut de seul cercle de la page. */

.thematiques .rapport__entete-section {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
}

/* Bascule d'ordre pilotée par une case à cocher : la propriété `order` est posée en ligne
   sur chaque carte, la case l'annule. Aucun script, donc aucun tri à rejouer. */
.bascule { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.bascule__saisie { position: absolute; opacity: 0; width: 0; height: 0; }
.bascule__piste {
    position: relative; flex: none; width: 38px; height: 22px; border-radius: 999px;
    background: var(--bordure-forte);
    transition: background var(--transition);
}
.bascule__piste::after {
    content: ''; position: absolute; top: 3px; left: 3px;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--blanc); box-shadow: 0 1px 3px rgba(0, 59, 73, .3);
    transition: transform 260ms var(--ressort);
}
.bascule__saisie:checked + .bascule__piste { background: var(--turquoise); }
.bascule__saisie:checked + .bascule__piste::after { transform: translateX(16px); }
.bascule__saisie:focus-visible + .bascule__piste { outline: 3px solid var(--turquoise); outline-offset: 3px; }
.bascule__libelle { font-size: .875rem; color: var(--gris); }

.barres {
    display: flex; flex-direction: column;
    padding: 8px clamp(18px, 2.5vw, 26px);
    background: var(--blanc); border-radius: var(--rayon);
    box-shadow: inset 0 0 0 1px var(--bordure), var(--ombre-douce);
}
.thematiques:has(#ordre-questionnaire:checked) .barre { order: 0 !important; }

.barre + .barre { box-shadow: inset 0 1px 0 var(--bordure); }
.barre__lien {
    display: grid; align-items: center;
    grid-template-columns: minmax(0, 15rem) minmax(90px, 1fr) 4.2rem;
    gap: 4px 20px; padding: 13px 0;
    text-decoration: none; border-radius: var(--rayon-petit);
    transition: background var(--transition);
}
.barre__lien:hover { background: var(--brume); box-shadow: 0 0 0 10px var(--brume); }
.barre__lien:focus-visible { outline: 3px solid var(--turquoise); outline-offset: 4px; }

.barre__titre {
    font-family: var(--titre); font-weight: 500; font-size: .9375rem; line-height: 1.3;
    color: var(--encre);
}
.barre__piste {
    height: 8px; border-radius: 999px; background: var(--bordure); overflow: hidden;
}
.barre__valeur {
    display: block; height: 100%; width: var(--valeur, 0%);
    border-radius: inherit; background: var(--score-eleve);
    transition: width 900ms var(--ressort);
}
.barre--moyen .barre__valeur { background: var(--score-moyen); }
.barre--faible .barre__valeur { background: var(--score-faible); }

/* Le pourcentage est desormais le seul chiffre de la ligne : on le grossit pour qu'il porte
   la lecture. Chasse fixe : sur douze lignes, des largeurs de glyphes variables font onduler
   la colonne et cassent la comparaison. */
.barre__score {
    text-align: right; font-variant-numeric: tabular-nums;
    font-family: var(--titre); font-weight: 600; font-size: 1.75rem; line-height: 1;
    color: var(--encre);
}
.barre__pourcent { margin-left: 1px; font-size: .875rem; font-weight: 500; color: var(--gris); }

/* ---------- Volets appariés (D et E) ---------- */

.volets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 44px); }
.volet { min-width: 0; }

/* ---------- D. Forces et priorités ----------

   Chaque entree est un <details> : le classement se lit d'abord comme une liste, puis
   livre ce que la pratique evite ou ce que le manque coute. Natif plutot que scripte, il
   s'ouvre au clavier sans code et s'imprime deplie. */

.classement { display: flex; flex-direction: column; gap: 8px; list-style: none; }

.fiche {
    background: var(--blanc); border-radius: var(--rayon-petit);
    box-shadow: inset 0 0 0 1px var(--bordure);
    transition: box-shadow var(--transition);
}
.fiche[open] { box-shadow: inset 0 0 0 1px var(--bordure-forte), var(--elevation-basse); }

.fiche__entete {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 14px 16px; cursor: pointer; list-style: none;
    border-radius: var(--rayon-petit);
}
.fiche__entete::-webkit-details-marker { display: none; }
.fiche__entete:hover { background: var(--brume); }
.fiche__entete:focus-visible { outline: 3px solid var(--turquoise); outline-offset: -3px; }

.fiche__marque {
    flex: none; margin-top: 3px; width: 18px; height: 18px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--degrade);
}
.fiche__marque::after {
    content: ''; width: 4px; height: 8px; margin-bottom: 2px;
    border: solid var(--blanc); border-width: 0 1.75px 1.75px 0;
    transform: rotate(42deg);
}
/* Un palier intermediaire porte un cercle creux : la coche pleine est reservee a ce qui
   est reellement au bout de l'echelle. */
.fiche__marque--engage {
    background: var(--blanc); box-shadow: inset 0 0 0 2px var(--turquoise);
}
.fiche__marque--engage::after { display: none; }

.fiche__rang {
    flex: none; width: 24px; height: 24px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--encre); color: var(--blanc);
    font-family: var(--titre); font-weight: 600; font-size: .75rem;
}
.fiche__texte { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fiche__libelle { font-size: .9375rem; font-weight: 700; line-height: 1.4; color: var(--encre); }
.fiche__meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    font-family: var(--titre); font-weight: 500; font-size: 10.5px;
    letter-spacing: .1em; text-transform: uppercase; color: var(--turquoise);
}
.fiche__chevron {
    flex: none; position: relative; margin-top: 6px; width: 10px; height: 10px;
    transition: transform 260ms var(--ressort);
}
.fiche__chevron::after {
    content: ''; position: absolute; top: 0; left: 1px;
    width: 7px; height: 7px;
    border: solid var(--gris); border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}
.fiche[open] .fiche__chevron { transform: rotate(180deg); }

.fiche__corps {
    padding: 2px 16px 18px 48px;
    font-size: .9375rem; line-height: 1.6; color: var(--gris);
}
.fiche__ligne { margin-top: 10px; }
.fiche__ligne--source {
    margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--bordure);
    font-size: .8125rem;
}
.fiche__etiquette {
    display: inline-block; margin-right: 8px;
    font-family: var(--titre); font-weight: 600; font-size: 10px;
    letter-spacing: .1em; text-transform: uppercase; color: var(--encre);
}

/* ---------- E1. Écarts ---------- */

/* Deux colonnes qui se remplissent en hauteur : une liste d'ecarts est faite de cartes
   independantes, rien n'oblige a les lire dans l'ordre d'une colonne unique de 1500 px. */
.ecarts {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start; gap: 12px;
}
.bloc-pieces { margin-top: clamp(28px, 4vw, 44px); }
.ecart {
    position: relative;
    padding: 20px 22px 20px 26px;
    background: var(--blanc); border-radius: var(--rayon);
    box-shadow: inset 0 0 0 1px var(--bordure), var(--elevation-basse);
}
/* Le bandeau de sévérité est un filet vertical plutôt qu'un fond teinté : sur une liste
   de vingt écarts, vingt cartes colorées deviennent illisibles. */
.ecart::before {
    content: ''; position: absolute; inset: 0 auto 0 0;
    width: 4px; border-radius: var(--rayon) 0 0 var(--rayon);
}
.ecart--rouge::before { background: var(--rouge); }
.ecart--jaune::before { background: var(--turquoise); }
.ecart--gris::before { background: var(--controle); }

.ecart__severite {
    font-family: var(--titre); font-weight: 600; font-size: 10.5px;
    letter-spacing: .12em; text-transform: uppercase;
}
.ecart--rouge .ecart__severite { color: var(--rouge); }
.ecart--jaune .ecart__severite { color: var(--turquoise); }
.ecart--gris .ecart__severite { color: var(--gris); }

.ecart__titre {
    margin-top: 8px;
    font-family: var(--corps); font-weight: 700; font-size: 1rem; line-height: 1.4;
    color: var(--encre);
}
.ecart__constat {
    margin-top: 8px; font-size: .9375rem; line-height: 1.55; color: var(--encre);
}
.ecart__contexte { margin-top: 8px; font-size: .9375rem; line-height: 1.6; color: var(--gris); }
.ecart__action, .ecart__reference {
    margin-top: 10px; font-size: .875rem; line-height: 1.55; color: var(--gris);
}
.ecart__etiquette {
    display: inline-block; margin-right: 8px;
    font-family: var(--titre); font-weight: 600; font-size: 10px;
    letter-spacing: .1em; text-transform: uppercase; color: var(--encre);
}
.ecart__reference { padding-top: 10px; border-top: 1px solid var(--bordure); }
.ecart__famille {
    margin-top: 10px;
    font-family: var(--titre); font-weight: 500; font-size: 10.5px;
    letter-spacing: .1em; text-transform: uppercase; color: var(--turquoise);
}

/* ---------- E2. Pièces à réunir ---------- */

.pieces { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.pieces__liste { display: flex; flex-direction: column; gap: 2px; padding: 2px 14px 14px; }

.piece {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 9px 10px; border-radius: var(--rayon-petit);
    cursor: pointer;
    transition: background var(--transition);
}
.piece:hover { background: var(--brume); }
.piece__saisie { position: absolute; opacity: 0; width: 0; height: 0; }
.piece__marque {
    flex: none; margin-top: 1px; display: grid; place-items: center;
    width: 19px; height: 19px; border-radius: 6px;
    background: var(--blanc);
    box-shadow: inset 0 0 0 1.5px var(--controle);
    transition: box-shadow var(--transition), background var(--transition);
}
.piece__marque::after {
    content: ''; width: 4px; height: 8px; margin-bottom: 2px;
    border: solid var(--blanc); border-width: 0 1.75px 1.75px 0;
    transform: rotate(42deg) scale(0);
    transition: transform 260ms var(--ressort);
}
.piece__saisie:checked + .piece__marque {
    background: var(--degrade); box-shadow: inset 0 0 0 1.5px transparent;
}
.piece__saisie:checked + .piece__marque::after { transform: rotate(42deg) scale(1); }
.piece__saisie:focus-visible + .piece__marque { outline: 3px solid var(--turquoise); outline-offset: 3px; }
.piece__libelle { font-size: .9375rem; line-height: 1.5; color: var(--encre); }
.piece__saisie:checked ~ .piece__libelle { color: var(--gris); text-decoration: line-through; }

/* ---------- F. Détail par thématique ---------- */

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

.accordeon {
    background: var(--blanc); border-radius: var(--rayon);
    box-shadow: inset 0 0 0 1px var(--bordure);
    transition: box-shadow var(--transition);
}
.accordeon[open] { box-shadow: inset 0 0 0 1px var(--bordure-forte), var(--elevation-basse); }

.accordeon__entete {
    display: flex; align-items: center; gap: 16px;
    padding: 16px 22px;
    cursor: pointer; list-style: none;
    border-radius: var(--rayon);
}
.accordeon__entete::-webkit-details-marker { display: none; }
.accordeon__entete:hover { background: var(--brume); }
.accordeon__entete:focus-visible { outline: 3px solid var(--turquoise); outline-offset: -3px; }

.accordeon__puce {
    flex: none; width: 34px; height: 34px; border-radius: 50%;
    background: var(--brume); box-shadow: inset 0 0 0 1.5px var(--bordure-forte);
}
.accordeon__eyebrow {
    flex: none;
    font-family: var(--titre); font-weight: 500; font-size: 10.5px;
    letter-spacing: .12em; text-transform: uppercase; color: var(--turquoise);
}
.accordeon__titre {
    flex: 1; min-width: 0;
    font-family: var(--titre); font-weight: 600; font-size: 1rem; color: var(--encre);
}
.accordeon__compte { flex: none; font-size: .8125rem; color: var(--gris); }
.accordeon__score { flex: none; font-variant-numeric: tabular-nums; }

/* Le paragraphe d'analyse, pas le tableau, est ce que la section apporte. Il ouvre donc
   chaque niveau, et le detail des reponses descend d'un cran. */
.accordeon__analyse {
    max-width: 68ch; margin-bottom: 18px;
    font-size: .9375rem; line-height: 1.65; color: var(--gris);
}

/* Deux niveaux imbriques : le second se distingue par un fond et non par une ombre, pour
   qu'on lise une hierarchie et non deux cartes empilees. */
.accordeon--imbrique {
    background: var(--brume); box-shadow: inset 0 0 0 1px var(--bordure);
}
.accordeon--imbrique[open] { box-shadow: inset 0 0 0 1px var(--bordure-forte); }
.accordeon--imbrique + .accordeon--imbrique { margin-top: 8px; }
.accordeon--imbrique > .accordeon__entete { padding: 13px 18px; }
.accordeon--imbrique > .accordeon__entete:hover { background: var(--blanc); }
.accordeon--imbrique > .accordeon__corps { padding: 2px 18px 18px; }

.accordeon--reponses {
    background: var(--blanc); box-shadow: inset 0 0 0 1px var(--bordure);
}
.accordeon--reponses > .accordeon__entete { padding: 11px 16px; }
.accordeon--reponses .accordeon__titre {
    font-family: var(--corps); font-weight: 600; font-size: .875rem; color: var(--gris);
}
.accordeon--reponses > .accordeon__corps { padding: 2px 16px 18px; }

.accordeon--pieces > .accordeon__corps { padding-top: 8px; }
.accordeon__chevron {
    flex: none; position: relative; width: 10px; height: 10px;
    transition: transform 260ms var(--ressort);
}
.accordeon__chevron::after {
    content: ''; position: absolute; top: 0; left: 1px;
    width: 7px; height: 7px;
    border: solid var(--gris); border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}
.accordeon[open] .accordeon__chevron { transform: rotate(180deg); }

.accordeon__corps { padding: 4px 22px 24px; }

.detail { width: 100%; border-collapse: collapse; font-size: .875rem; }
.detail thead th {
    padding: 8px 12px 8px 0; text-align: left;
    border-bottom: 1px solid var(--bordure);
    font-family: var(--titre); font-weight: 500; font-size: 10.5px;
    letter-spacing: .1em; text-transform: uppercase; color: var(--gris);
}
.detail tbody th {
    padding: 14px 16px 14px 0; text-align: left; font-weight: 700;
    line-height: 1.45; color: var(--encre); vertical-align: top;
}
.detail tbody td {
    padding: 14px 16px 14px 0; line-height: 1.45; color: var(--gris); vertical-align: top;
}
.detail tbody tr + tr th, .detail tbody tr + tr td { border-top: 1px solid var(--bordure); }
.detail__points-entete, .detail__points { width: 74px; padding-right: 0 !important; }
.detail__vide { color: var(--controle); font-style: italic; }
.detail__ligne--ecart th { box-shadow: inset 3px 0 0 -1px var(--rouge); padding-left: 12px; }

/* Jauge à quatre crans : trois traits pleins pour trois points. Une barre continue
   suggérerait une mesure continue, alors que l'échelle ne compte que quatre niveaux. */
.jauge-crans { display: inline-flex; gap: 3px; }
.jauge-crans__cran {
    width: 16px; height: 5px; border-radius: 3px; background: var(--bordure);
}
.jauge-crans__cran--plein { background: var(--degrade); }

.drapeau {
    display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px;
    font-family: var(--titre); font-weight: 600; font-size: 9.5px;
    letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
    vertical-align: 2px;
}
.drapeau--rouge { background: #fdf3f1; color: var(--rouge); }
.drapeau--jaune { background: var(--turquoise-pale); color: var(--encre); }
.drapeau--gris { background: var(--brume); color: var(--gris); }

.detail-libre { margin-top: 22px; display: flex; flex-direction: column; gap: 16px; }
.detail-libre dt {
    font-size: .875rem; font-weight: 700; line-height: 1.45; color: var(--encre);
}
.detail-libre dd { margin: 4px 0 0; font-size: .875rem; line-height: 1.55; color: var(--gris); }
.detail + .detail-libre { padding-top: 22px; border-top: 1px solid var(--bordure); }

/* ---------- G. Plan des 90 jours et appel ----------

   Un fil vertical relie les trois echeances : le plan est une sequence, pas trois cartes
   posees cote a cote. Le fil s'arrete a la derniere pastille, sinon il pend dans le vide. */

.plan { position: relative; display: flex; flex-direction: column; gap: 14px; }
.plan::before {
    content: ''; position: absolute; z-index: 0;
    top: 32px; bottom: 32px; left: 31px; width: 2px;
    background: linear-gradient(var(--turquoise), var(--vert));
    opacity: .35;
}

/* Cantonne au plan : `.etape` est aussi la classe des sections dans la barre laterale
   (partials/sidebar.php). Un `.etape` nu transformait chaque section en carte blanche et
   rendait les libelles clairs illisibles sur fond blanc. */
.plan .etape {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: start; gap: 22px;
    padding: 22px 24px;
    background: var(--blanc); border-radius: var(--rayon);
    box-shadow: inset 0 0 0 1px var(--bordure), var(--ombre-douce);
}

.etape__echeance {
    display: grid; place-items: center; gap: 0;
    width: 64px; height: 64px; border-radius: 50%;
    background: var(--brume); box-shadow: inset 0 0 0 2px var(--turquoise);
    text-align: center;
}
/* L'etape la plus exposee porte le plein degrade : c'est la seule hierarchie de couleur
   du bloc, et elle designe par ou commencer. */
.etape--rouge .etape__echeance {
    background: var(--degrade); box-shadow: none; color: var(--blanc);
}
.etape--rouge .etape__unite { color: rgba(255, 255, 255, .8); }
.etape__nombre {
    font-family: var(--titre); font-weight: 600; font-size: 1.375rem; line-height: 1;
    color: currentColor;
}
.etape__unite {
    font-family: var(--titre); font-weight: 500; font-size: 9.5px;
    letter-spacing: .1em; text-transform: uppercase; color: var(--gris);
}

.etape__corps { min-width: 0; }
.etape__famille {
    font-family: var(--titre); font-weight: 500; font-size: 10.5px;
    letter-spacing: .1em; text-transform: uppercase; color: var(--turquoise);
}
.etape__titre {
    margin-top: 6px;
    font-family: var(--titre); font-weight: 600; font-size: 1.125rem; line-height: 1.3;
    color: var(--encre);
}
.etape__action { margin-top: 8px; font-size: .9375rem; line-height: 1.6; color: var(--gris); }
.etape__debloque {
    margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--bordure);
    display: flex; align-items: baseline; gap: 8px;
    font-size: .875rem; line-height: 1.55; color: var(--encre);
}
.etape__debloque svg { flex: none; width: 14px; height: 14px; color: var(--vert); }

/* Aperçu visuel des priorités (bas de rapport) : un rappel en tuiles, distinct des accordéons
   détaillés plus haut. La tuile d'icône reprend le traitement des bénéfices de l'accueil —
   fond dégradé voilé, icône turquoise — pour rester dans l'identité FPD. */
/* Les cinq priorités côte à côte sur une seule ligne : cartes verticales (icône au-dessus du
   texte) qui tiennent dans une colonne étroite. On regroupe en deux colonnes puis une sur les
   écrans plus petits. */
.apercu-priorites {
    margin-top: 24px;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px;
}
@media (max-width: 900px) { .apercu-priorites { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .apercu-priorites { grid-template-columns: 1fr; } }
.apercu-priorite {
    display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
    padding: 18px 16px;
    background: var(--brume);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.apercu-priorite:hover {
    transform: translateY(-2px);
    box-shadow: var(--elevation-basse);
    border-color: var(--bordure-forte);
}
.apercu-priorite__icone {
    flex: none; width: 46px; height: 46px; border-radius: 13px;
    display: grid; place-items: center; color: var(--turquoise);
    background: linear-gradient(135deg, rgba(79, 159, 166, .17), rgba(169, 194, 63, .19));
}
.apercu-priorite__icone svg { width: 26px; height: 26px; }
.apercu-priorite__texte { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.apercu-priorite__famille {
    font-family: var(--titre); font-weight: 600; font-size: 10.5px;
    letter-spacing: .1em; text-transform: uppercase; color: var(--turquoise); line-height: 1.3;
}
.apercu-priorite__libelle {
    font-size: .9375rem; line-height: 1.4; font-weight: 500; color: var(--encre);
}

.carte-appel {
    position: relative; overflow: hidden;
    margin-top: 32px;
    padding: clamp(28px, 4vw, 40px);
    background: var(--encre); color: var(--blanc);
    box-shadow: var(--elevation);
}
/* Filet de marque bleu -> vert en haut de l'encadré : la touche qui le démarque du reste du
   rapport et l'annonce comme le moment de l'appel à l'action, sans rompre la sobriété. */
.carte-appel::before {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 4px;
    background: linear-gradient(90deg, var(--turquoise), var(--vert));
}
.carte-appel h3 {
    font-family: var(--titre); font-weight: 600; font-size: clamp(1.45rem, 2.1vw, 1.7rem);
    letter-spacing: -.01em; line-height: 1.15;
}
/* Sur écran large, le titre tient sur une seule ligne ; il n'est autorisé à passer à la ligne
   que lorsque la largeur ne suffit plus. */
@media (min-width: 780px) { .carte-appel h3 { white-space: nowrap; } }
.carte-appel p { margin-top: 10px; font-size: .9375rem; color: rgba(255, 255, 255, .72); }

/* Profil de Frédéric : un rendez-vous se prend avec quelqu'un. Photo ronde cerclée d'un
   liseré de marque, titres en dessous. */
.carte-appel__profil {
    margin-top: 24px; padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.carte-appel__photo {
    flex: none; width: 104px; height: 104px; border-radius: 50%;
    object-fit: cover; object-position: center top;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .2), 0 0 0 5px rgba(79, 159, 166, .3);
}
.carte-appel__identite { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.carte-appel__identite strong {
    font-family: var(--titre); font-weight: 600; font-size: 1.0625rem; color: var(--blanc);
}
.carte-appel__identite span { font-size: .8125rem; line-height: 1.45; color: rgba(255, 255, 255, .7); }
.carte-appel__identite span:first-of-type { color: rgba(255, 255, 255, .86); }

.carte-appel__actions {
    margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px;
}
.carte-appel .bouton--principal { background: var(--blanc); color: var(--encre); }
.carte-appel .bouton--principal:hover { background: var(--brume); }
.carte-appel__mention { margin: 0; font-size: .8125rem; max-width: 30ch; }
.carte-appel__mention strong { color: var(--blanc); }

/* ---------- Adaptations du rapport ---------- */

@media (max-width: 1023px) {
    .heros { grid-template-columns: minmax(0, 1fr); }
    .barre__lien { grid-template-columns: minmax(0, 12rem) minmax(70px, 1fr) 4rem; }
    .volets, .ecarts { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
    /* Sous 700 px, le titre prend toute la largeur ; la barre et son pourcentage passent en
       dessous. Le pourcentage reste à droite, donc aligné d'une ligne à l'autre. */
    .barre__lien {
        grid-template-columns: minmax(60px, 1fr) 4rem;
        grid-template-areas: 'titre titre' 'piste score';
        gap: 8px 14px;
    }
    .barre__titre { grid-area: titre; }
    .barre__piste { grid-area: piste; }
    .barre__score { grid-area: score; }
    .barre__lien:hover { box-shadow: none; }

    .plan .etape { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 20px; }
    .etape__echeance {
        width: auto; height: auto; border-radius: 999px;
        grid-auto-flow: column; justify-content: start; gap: 6px;
        padding: 6px 14px;
    }
    .etape__nombre { font-size: 1.0625rem; }
    .plan::before { display: none; }

    .fiche__corps { padding-left: 16px; }

    .barre-actions__interieur { flex-direction: column; align-items: stretch; gap: 10px; }
    .barre-actions__titre { display: none; }
    .barre-actions__boutons .bouton { flex: 1; }

    .accordeon__entete { flex-wrap: wrap; gap: 10px 14px; padding: 14px 18px; }
    .accordeon__titre { flex-basis: calc(100% - 90px); }
    .accordeon__compte { margin-left: 50px; }
    .accordeon__corps { padding: 4px 18px 20px; }

    /* Un tableau à trois colonnes ne tient pas sous 700 px : chaque question devient un
       bloc, ses en-têtes portés par ::before plutôt que par une ligne de titres. */
    .detail thead { display: none; }
    .detail, .detail tbody, .detail tr, .detail th, .detail td { display: block; width: auto; }
    .detail tbody tr { padding: 16px 0; border-top: 1px solid var(--bordure); }
    .detail tbody tr:first-child { border-top: 0; padding-top: 0; }
    .detail tbody tr + tr th, .detail tbody tr + tr td { border-top: 0; }
    .detail tbody th, .detail tbody td { padding: 0; }
    .detail tbody td { margin-top: 6px; }
    .detail__points-entete, .detail__points { width: auto; }
}

/* =========================================================================
   Mouvement d'apparition
   =========================================================================

   Cascade en CSS pur, pilotée par la variable `--rang` posée en PHP. Le choix de ne pas
   passer par JavaScript est délibéré : une cascade scriptée laisse la page vide si le
   script échoue. Ici, si l'animation n'est pas prise en charge, le contenu s'affiche —
   il n'existe aucun mode de défaillance. */

@keyframes monter {
    from { opacity: 0; transform: translateY(12px); }
}

@media (prefers-reduced-motion: no-preference) {
    .famille > .question,
    .accueil__contenu > *,
    .accueil__contenu .benefice {
        animation: monter 500ms var(--ressort) backwards;
        animation-delay: calc(var(--rang, 0) * 55ms);
    }
    /* Les bénéfices s'animent un par un : la liste elle-même ne doit pas s'animer en bloc. */
    .accueil__contenu > .benefices { animation: none; }
}

/* =========================================================================
   Adaptations
   ========================================================================= */

/* Tablette et mobile : le panneau devient une barre supérieure compacte. */
@media (max-width: 1023px) {
    .ecran { grid-template-columns: minmax(0, 1fr); }

    .panneau {
        position: sticky; top: 0; z-index: 20;
        height: auto;
        flex-direction: row; align-items: center; gap: 18px;
        padding: 14px 20px;
        box-shadow: 0 1px 0 rgba(255, 255, 255, .08);
    }
    .panneau__motif { display: none; }
    .panneau__etapes { display: none; }

    .panneau__entete { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
    /* Le lockup complet réduit à la hauteur d'une barre rendrait « EXPERT-CONSEIL »
       illisible : on ne garde que le symbole, qui reste identifiable à 34 px. */
    .panneau__logo-image { width: 34px; }
    .panneau__logo-substitut strong { font-size: 21px; }
    .panneau__logo-substitut em { display: none; }
    .panneau__surtitre { display: none; }

    .panneau__pied { flex: none; width: min(45%, 200px); gap: 7px; }
    .panneau__compteur { font-size: 10px; text-align: right; }

    .contenu { padding: 40px 22px 64px; }
    .section__entete { margin-bottom: 40px; }

    /* Empilés, les deux panneaux se partageraient la hauteur d'écran imposée par
       `min-height: 100dvh` : le bandeau de marque occuperait la moitié de l'affichage avant
       le premier argument. Chacun reprend donc sa hauteur naturelle. */
    .accueil { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    .accueil__marque { gap: 20px; padding: 44px 24px 40px; }
    .accueil__contenu { justify-content: flex-start; }
    /* Le panneau de marque devient un bandeau : le lockup horizontal y tient mieux
       que le vertical, qui occuperait la moitié de l'écran avant le premier mot. */
    .accueil__logo { width: min(280px, 78%); }
    .accueil__contenu { padding: 48px 24px 72px; }
}

@media (max-width: 560px) {
    .choix-liste--trio { grid-template-columns: 1fr; }
    .choix-liste--paire .choix,
    .choix-liste--trio .choix { padding: 20px 16px; }

    .sousquestions[data-ouvert] .sousquestions__interieur { padding: 20px 18px 22px; }

    .saisie--nombre { width: 100%; }

    .section__pied { flex-direction: column-reverse; align-items: stretch; }
    .section__pied .bouton { width: 100%; }

    .benefice { gap: 16px; }
    .benefice__icone { width: 52px; height: 52px; border-radius: 15px; }
    .benefice__icone svg { width: 25px; height: 25px; }
    .benefice__texte { padding-top: 2px; }
    .metriques { flex-direction: column; align-items: flex-start; gap: 7px; }

    .saisie--texte { max-width: none; }

    .accueil__actions { width: 100%; }
    .accueil__actions .bouton { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    .panneau, .section__pied, .lien-evitement { display: none; }
    .ecran { grid-template-columns: 1fr; }
}

/* =========================================================================
   Impression du rapport
   =========================================================================

   Le bouton « Télécharger le PDF » appelle simplement window.print() : le PDF produit
   est celui du navigateur, donc exactement ce qui est dessiné ici. Un générateur serveur
   aurait imposé un second gabarit à maintenir, et Dompdf ne sait rendre ni les grilles
   CSS ni les dégradés — soit tout ce qui fait ce rapport.

   Les accordéons sont dépliés par JavaScript avant l'impression (voir brancherImpression
   dans assets/js/app.js) : aucune règle CSS ne peut ouvrir un <details> fermé. */

.impression-pied { display: none; }

@media print {
    @page { margin: 14mm 12mm 18mm; }

    /* Sans cela, le navigateur supprime les fonds et les dégradés à l'impression, et les
       anneaux de score partent tous blancs. */
    .page--rapport, .page--rapport * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .page--rapport { background: var(--blanc); font-size: 11pt; }
    .page--rapport .contenu { padding: 0; }
    .rapport { max-width: none; }

    .barre-actions,
    .bascule,
    .accordeon__chevron,
    .fiche__chevron,
    .carte-appel__actions .bouton { display: none !important; }

    /* Impression volontairement minimale (décision client) : l'en-tête, le score global et la
       grille des thématiques, rien d'autre. La valeur complète — forces, écarts, détail, appel
       à l'action — reste dans le lien interactif, ce qui fait revenir les gens. La règle exclut
       tout enfant du rapport hors ces trois blocs, donc une future section n'apparaît pas par
       accident à l'impression. Le pied fixe est conservé. */
    .rapport > *:not(.rapport__entete):not(#score):not(#thematiques):not(.impression-pied) {
        display: none !important;
    }

    /* Une carte coupée entre deux pages est illisible : ni le score ni le libellé ne
       restent ensemble. Chaque bloc reste solidaire. */
    .carte, .ecart, .fiche, .accordeon, .plan .etape, .barre,
    .heros__jauge, .heros__texte {
        break-inside: avoid; page-break-inside: avoid;
    }
    .rapport__section, .rapport__soustitre, .accordeon__entete { break-after: avoid; }
    .rapport__section { break-before: auto; margin-top: 22mm; }
    #score { margin-top: 10mm; }

    .heros { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
    .volets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

    .carte, .ecart, .accordeon, .fiche, .plan .etape, .barres {
        box-shadow: none !important;
        border: 1px solid var(--bordure);
    }
    .carte-appel { border: 0; }
    .fiche, .accordeon--imbrique, .accordeon--reponses { background: var(--blanc); }

    /* Les liens du rapport pointent vers des ancres internes : afficher leur URL en note
       de bas de page n'apporterait qu'une colonne de « #famille-4 ». */
    .barre__lien { color: inherit; }
    .barre__lien:hover { background: none; box-shadow: none; }

    /* Aplat plutôt que dégradé : à l'impression, un dégradé de 8 px de haut vire au gris
       sale sur la plupart des pilotes. */
    .barre__valeur { background: var(--turquoise) !important; }
    .barre--faible .barre__valeur { background: var(--rouge) !important; }

    /* Le fil du plan est dessiné en absolu : il traverserait la coupure de page. */
    .plan::before { display: none; }
    .plan .etape { border-left: 3px solid var(--turquoise); }
    .plan .etape--rouge { border-left-color: var(--rouge); }

    .accordeon { break-inside: auto; }
    .accordeon__entete { background: var(--brume); }
    .accordeon--reponses > .accordeon__entete { background: transparent; }

    .impression-pied {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        position: fixed; bottom: 0; left: 0; right: 0;
        padding-top: 4mm; border-top: 1px solid var(--bordure);
        font-size: 7.5pt; color: var(--gris);
    }
    .impression-pied__logo { height: 6mm; width: auto; flex: none; }
}