/*
 * Étape 1 de l'intégration du nouveau design (variante 1a, voir
 * docs/design/HANDOFF.md) : fondations visuelles (tokens de couleur,
 * typographie, rayons, largeurs) appliquées aux sélecteurs EXISTANTS.
 * Aucune classe ni structure n'est ajoutée ici : le DOM généré par
 * assets/js/render-step.js et render-result.js reste inchangé. La
 * refonte des composants (cartes de choix, pastilles, compteur avec
 * +/-, résumé projet, barre mobile) viendra aux étapes suivantes, une
 * fois que cette feuille de style pourra s'appuyer sur de nouveaux
 * éléments.
 *
 * Polices : Poppins/DM Sans déclarées en tokens mais pas encore
 * auto-hébergées (aucun fichier de police dans le dépôt à ce jour) —
 * la pile de secours système s'applique tant qu'elles ne sont pas
 * fournies. Ajouter les fichiers + l'enqueue WordPress est prévu pour
 * l'étape où l'en-tête (logo, progression) sera intégré.
 */

.shs-simulateur {
    /* Couleurs — palette HANDOFF.md §1 */
    --shs-couleur-encre: #23224A;
    --shs-couleur-texte-secondaire: #55546F;
    --shs-couleur-texte-tertiaire: #6E6D86;
    --shs-couleur-fond: #FFFFFF;
    --shs-couleur-fond-discret: #FAF9FD;
    --shs-couleur-filet-fort: #E6E4F0;
    --shs-couleur-filet-leger: #EFEDF5;
    --shs-couleur-bordure-champ: #E2E0EE;
    --shs-couleur-marqueur-vide: #C9C6DA;
    --shs-couleur-violet: #6A5AE0;
    --shs-couleur-fond-selectionne: #F5F3FF;
    --shs-couleur-texte-selectionne: #3F31B8;
    --shs-couleur-badge-fond: #EFECFE;
    --shs-couleur-confirmation-fond: #F1EEFE;
    --shs-couleur-cta: #FFC45E;
    --shs-couleur-cta-survol: #FFB83D;
    --shs-couleur-desactive-fond: #F1EFF7;
    --shs-couleur-desactive-texte: #8D8CA3;
    --shs-couleur-erreur: #B3261E;

    /* Typographie — HANDOFF.md §2 */
    --shs-police-titres: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --shs-police-corps: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Rayons — HANDOFF.md §3 */
    --shs-rayon-carte: 14px;
    --shs-rayon-champ: 10px;
    --shs-rayon-bloc: 16px;
    --shs-rayon-pilule: 999px;
    --shs-rayon-marqueur-multi: 6px;

    /* Largeurs de colonne — HANDOFF.md §3 (760px = point de rupture §7) */
    --shs-largeur-contenu: 640px;
    --shs-largeur-resultat: 640px;
    --shs-largeur-contact: 560px;
    --shs-largeur-contenu-avec-resume: 960px;

    max-width: var(--shs-largeur-contenu);
    margin: 0 auto;
    padding: 28px 20px 32px;
    font: 16px/1.5 var(--shs-police-corps);
    color: var(--shs-couleur-encre);
    background: var(--shs-couleur-fond);
}

@media (min-width: 760px) {
    .shs-simulateur {
        padding: 56px 40px 80px;
    }
}

/* Focus clavier — HANDOFF.md §5 "États" : violet partout, jamais retiré. */
.shs-simulateur :focus-visible {
    outline: 2px solid var(--shs-couleur-violet);
    outline-offset: 2px;
}

/* En-tête (logo + progression) — HANDOFF.md §6. Grille à 3 colonnes pour
   centrer la progression indépendamment de la largeur du logo, même sans
   élément "Quitter" (volontairement absent, voir rapport d'audit). */
.shs-entete {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding-bottom: 16px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--shs-couleur-filet-leger);
}

.shs-entete__logo {
    grid-column: 1;
    justify-self: start;
    width: 120px;
    height: auto;
    display: block;
}

.shs-progression {
    grid-column: 2;
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Même bug de spécificité que .shs-navigation/.shs-contact form (étapes
   précédentes) : display:flex ci-dessus l'emporterait sinon sur [hidden]. */
.shs-progression[hidden] {
    display: none;
}

.shs-progression__texte {
    font-family: var(--shs-police-titres);
    font-weight: 500;
    font-size: 13px;
    color: var(--shs-couleur-texte-tertiaire);
    white-space: nowrap;
}

.shs-progression__barre {
    width: 112px;
    height: 3px;
    border-radius: 2px;
    background: var(--shs-couleur-filet-leger);
    overflow: hidden;
}

.shs-progression__remplissage {
    height: 100%;
    width: 0;
    background: var(--shs-couleur-violet);
    border-radius: inherit;
    transition: width 300ms;
}

@media (max-width: 759px) {
    .shs-entete {
        grid-template-columns: auto 1fr;
    }

    .shs-progression {
        grid-column: 2;
        justify-self: end;
    }

    .shs-progression__barre {
        width: 64px;
    }
}

/*
 * Ces titres reçoivent un focus() programmatique (tabindex="-1") à chaque
 * changement d'étape ou affichage du résultat, uniquement pour annoncer le
 * changement aux lecteurs d'écran : ils ne sont jamais atteignables au
 * clavier (Tab) par un utilisateur voyant. Le contour de focus par défaut
 * du navigateur n'a donc pas lieu d'être visible ici — à la différence des
 * vrais éléments interactifs (boutons, champs, options), dont l'indicateur
 * de focus reste intact.
 */
.shs-etape__titre:focus,
.shs-resultat__titre:focus {
    outline: none;
}

.shs-etape__titre,
.shs-resultat__titre {
    font-family: var(--shs-police-titres);
    font-weight: 500;
    letter-spacing: -0.02em;
}

.shs-resultat__surtitre {
    font-family: var(--shs-police-titres);
    font-weight: 500;
    font-size: 13px;
    color: var(--shs-couleur-violet);
    margin: 0 0 8px;
}

.shs-resultat__titre {
    font-size: 28px;
    margin: 0;
}

@media (min-width: 760px) {
    .shs-resultat__titre {
        font-size: 38px;
    }
}

.shs-resultat__description {
    font-family: var(--shs-police-corps);
    color: var(--shs-couleur-texte-secondaire);
    margin: 8px 0 0;
}

.shs-question {
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0 0 40px;
}

.shs-question legend {
    font-family: var(--shs-police-titres);
    font-weight: 500;
    font-size: 17px;
    line-height: 1.35;
    color: var(--shs-couleur-encre);
    padding: 0;
}

.shs-question__aide {
    font-family: var(--shs-police-corps);
    font-size: 14px;
    color: var(--shs-couleur-texte-tertiaire);
    margin: 0.25rem 0 0.75rem;
}

/*
 * .shs-option (singulier) reste utilisée par render-result.js (case de
 * consentement du formulaire de contact, hors périmètre de cette étape) :
 * conservée telle quelle. render-step.js utilise désormais .shs-cartes et
 * .shs-pastilles ci-dessous, propres aux questions du parcours.
 */
.shs-option {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    cursor: pointer;
    accent-color: var(--shs-couleur-violet);
}

/* Carte de choix (choix_unique) — HANDOFF.md §4 "Carte de choix". */
.shs-cartes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
}

@media (max-width: 759px) {
    .shs-cartes {
        grid-template-columns: 1fr;
    }
}

.shs-carte {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 14px 16px;
    border: 1.5px solid var(--shs-couleur-filet-fort);
    border-radius: var(--shs-rayon-carte);
    cursor: pointer;
    transition: border-color 150ms, background-color 150ms;
}

.shs-carte:has(.shs-carte__entree:checked) {
    border-color: var(--shs-couleur-violet);
    background: var(--shs-couleur-fond-selectionne);
}

.shs-carte__texte {
    flex: 1;
    font-family: var(--shs-police-titres);
    font-weight: 500;
    font-size: 15px;
    color: var(--shs-couleur-encre);
}

.shs-carte:has(.shs-carte__entree:checked) .shs-carte__texte {
    color: var(--shs-couleur-texte-selectionne);
}

/* Le vrai input reste présent et pilotable (clavier, lecteur d'écran) :
   redessiné en simple marqueur rond, jamais masqué (display:none casserait
   le focus et la navigation native entre pastilles d'un même groupe). */
.shs-carte__entree {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 0;
    appearance: none;
    border: 1.5px solid var(--shs-couleur-marqueur-vide);
    border-radius: 50%;
    cursor: pointer;
}

.shs-carte__entree:checked {
    border-color: var(--shs-couleur-violet);
    background: var(--shs-couleur-violet);
    box-shadow: inset 0 0 0 3px var(--shs-couleur-fond-selectionne);
}

/* Pastille (chip) — HANDOFF.md §4 "Pastille (chip)" : oui_non + choix_multiple. */
.shs-pastilles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.shs-pastille {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    border: 1.5px solid var(--shs-couleur-filet-fort);
    border-radius: var(--shs-rayon-pilule);
    font-family: var(--shs-police-corps);
    font-size: 15px;
    color: var(--shs-couleur-encre);
    cursor: pointer;
    transition: border-color 150ms, background-color 150ms;
}

.shs-pastille:has(.shs-pastille__entree:checked) {
    border-color: var(--shs-couleur-violet);
    background: var(--shs-couleur-fond-selectionne);
    color: var(--shs-couleur-texte-selectionne);
    font-weight: 500;
}

.shs-pastille__entree {
    flex: none;
    width: 16px;
    height: 16px;
    margin: 0;
    appearance: none;
    border: 1.5px solid var(--shs-couleur-marqueur-vide);
    cursor: pointer;
}

.shs-pastille__entree[type="radio"] {
    border-radius: 50%;
}

.shs-pastille__entree[type="checkbox"] {
    border-radius: var(--shs-rayon-marqueur-multi);
}

.shs-pastille__entree:checked {
    border-color: var(--shs-couleur-violet);
    background: var(--shs-couleur-violet);
}

.shs-question__erreur,
.shs-erreur-globale {
    color: var(--shs-couleur-erreur);
    font-weight: 600;
    margin-top: 0.5rem;
}

/* Écran de confirmation — HANDOFF.md §1 "Pastille confirmation" et §9 "OK".
   Pas de vert dans la palette (violet = sélection, jaune = action) : la
   confirmation reste dans les tons neutres + violet, pas une couleur de
   statut dédiée. */
.shs-succes {
    text-align: center;
    padding: 32px 0;
}

.shs-succes__pastille {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--shs-couleur-confirmation-fond);
    color: var(--shs-couleur-violet);
    font-size: 20px;
    font-weight: 600;
}

.shs-succes__texte {
    margin: 16px 0 0;
    font-family: var(--shs-police-titres);
    font-weight: 500;
    font-size: 17px;
    color: var(--shs-couleur-encre);
}

.shs-lien {
    display: inline-block;
    margin-top: 12px;
    color: var(--shs-couleur-texte-secondaire);
    font-size: 14px;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.shs-lien:hover {
    color: var(--shs-couleur-encre);
}

.shs-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 56px;
    padding-top: 24px;
    border-top: 1px solid var(--shs-couleur-filet-leger);
}

.shs-navigation[hidden] {
    display: none;
}

/*
 * Langage visuel commun à tous les boutons d'action du simulateur
 * (Précédent / Suivant / Obtenir mon estimation / Envoyer ma demande).
 * Le CTA jaune n'est, dans HANDOFF.md, JAMAIS appliqué au bouton
 * secondaire ("← Retour") : comme le DOM ne doit pas changer à cette
 * étape, la distinction primaire/secondaire se fait par position dans
 * .shs-navigation (le contrôleur ajoute toujours Précédent puis Suivant,
 * voir app.js) plutôt que par une classe JS dédiée.
 */
.shs-bouton {
    display: inline-block;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: var(--shs-rayon-champ);
    font: inherit;
    font-size: 1rem;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
}

.shs-navigation .shs-bouton {
    width: auto;
}

/*
 * Bouton principal (CTA) : pilule jaune, texte encre — HANDOFF.md §4.
 * .shs-bouton--cta-resultat couvre le lien "Parlons de votre projet" de
 * l'écran de résultat (un <a>, pas un <button>, d'où text-decoration:none
 * sur la règle de base ci-dessus).
 */
.shs-navigation .shs-bouton:last-of-type,
.shs-contact .shs-bouton,
.shs-bouton--cta-resultat {
    flex: 0 0 auto;
    border-radius: var(--shs-rayon-pilule);
    background: var(--shs-couleur-cta);
    color: var(--shs-couleur-encre);
    font-family: var(--shs-police-titres);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.85rem 1.75rem;
}

.shs-navigation .shs-bouton:last-of-type:hover,
.shs-contact .shs-bouton:hover,
.shs-bouton--cta-resultat:hover {
    background: var(--shs-couleur-cta-survol);
}

/* Bouton secondaire ("← Retour") : texte seul — HANDOFF.md §4. */
.shs-navigation .shs-bouton:first-of-type {
    flex: 0 0 auto;
    background: transparent;
    color: var(--shs-couleur-texte-secondaire);
    font-family: var(--shs-police-corps);
    font-size: 15px;
    padding: 0.5rem 0;
}

.shs-navigation .shs-bouton:first-of-type:hover {
    color: var(--shs-couleur-encre);
    background: transparent;
}

.shs-bouton:disabled {
    background: var(--shs-couleur-desactive-fond);
    color: var(--shs-couleur-desactive-texte);
    cursor: not-allowed;
}

/*
 * Bloc montant : un seul traitement visuel neutre (filets + typographie),
 * quel que soit l'état VERT/ORANGE/ROUGE — HANDOFF.md §9 ne prévoit aucun
 * code couleur par état (la sémantique interne ne doit jamais transparaître
 * visuellement, au-delà du simple texte déjà filtré côté serveur).
 */
.shs-budget {
    border-top: 1px solid var(--shs-couleur-filet-fort);
    border-bottom: 1px solid var(--shs-couleur-filet-fort);
    padding: 22px 0;
    margin: 24px 0;
}

.shs-budget--vert,
.shs-budget--orange,
.shs-budget--rouge {
    background: transparent;
}

.shs-budget__eyebrow {
    font-family: var(--shs-police-corps);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--shs-couleur-texte-tertiaire);
    margin: 0 0 4px;
}

.shs-budget__montant {
    font-family: var(--shs-police-titres);
    font-weight: 500;
    font-size: 40px;
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin: 0;
    color: var(--shs-couleur-encre);
}

@media (min-width: 760px) {
    .shs-budget__montant {
        font-size: 56px;
    }
}

.shs-budget__mention-etude,
.shs-budget__mention-redaction,
.shs-mention,
.shs-note {
    font-family: var(--shs-police-corps);
    font-size: 14px;
    color: var(--shs-couleur-texte-tertiaire);
}

/* Liste unifiée "Ce qui est prévu" (inclus + options) — HANDOFF.md §9. */
.shs-prevu__titre {
    font-family: var(--shs-police-titres);
    font-weight: 500;
    font-size: 14px;
    margin: 0 0 10px;
}

.shs-prevu__liste {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 24px;
    font-size: 14px;
}

@media (max-width: 759px) {
    .shs-prevu__liste {
        grid-template-columns: 1fr;
    }
}

.shs-prevu__liste li::before {
    content: '✓ ';
    color: var(--shs-couleur-violet);
    font-weight: 600;
}

/* Bloc séparé des services récurrents — HANDOFF.md §3 "bloc discret". */
.shs-services {
    max-width: var(--shs-largeur-resultat);
    margin: 24px auto 0;
    padding: 20px 24px;
    background: var(--shs-couleur-fond-discret);
    border-radius: var(--shs-rayon-bloc);
}

.shs-services__titre {
    font-family: var(--shs-police-titres);
    font-weight: 500;
    font-size: 14px;
    margin: 0 0 12px;
}

.shs-services__liste {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
}

.shs-services__liste li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.shs-badge {
    flex: none;
    font-size: 12px;
    font-weight: 600;
    color: var(--shs-couleur-texte-selectionne);
    background: var(--shs-couleur-badge-fond);
    border-radius: var(--shs-rayon-pilule);
    padding: 3px 10px;
}

.shs-services__total {
    font-family: var(--shs-police-titres);
    font-weight: 500;
    font-size: 14px;
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid var(--shs-couleur-filet-fort);
}

.shs-contact {
    max-width: var(--shs-largeur-contact);
    margin: 40px auto 0;
}

.shs-contact__titre {
    font-family: var(--shs-police-titres);
    font-weight: 500;
    font-size: 24px;
    margin: 0;
}

.shs-contact__rappel {
    font-family: var(--shs-police-titres);
    font-weight: 500;
    font-size: 15px;
    color: var(--shs-couleur-texte-selectionne);
    margin: 12px 0 0;
}

/*
 * Même famille de bug que .shs-navigation (étape 1) : sans cette règle,
 * une règle d'auteur display:flex/grid de spécificité supérieure à
 * l'attribut [hidden] empêcherait le masquage de n'importe quel élément
 * masqué à l'intérieur du formulaire de contact (formulaire, rappel,
 * note). Règle générique posée une fois pour toute la section.
 */
.shs-contact [hidden] {
    display: none;
}

.shs-contact form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 24px;
}

/*
 * :not([type="checkbox"]) exclut la case de consentement (.shs-option plus
 * bas) : sans cette exclusion, elle héritait de display:block + width:100%
 * prévus pour les champs texte, ce qui la faisait passer sur sa propre
 * ligne, visuellement coupée du texte qui la suit.
 */
.shs-contact input:not([type="checkbox"]),
.shs-contact textarea {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    padding: 0.5rem 0.875rem;
    min-height: 48px;
    border: 1.5px solid var(--shs-couleur-bordure-champ);
    border-radius: var(--shs-rayon-champ);
    font: inherit;
    font-size: 16px;
    box-sizing: border-box;
}

.shs-contact input:not([type="checkbox"]):focus,
.shs-contact textarea:focus {
    border-color: var(--shs-couleur-violet);
}

.shs-contact .shs-option {
    margin-top: 0.25rem;
    accent-color: var(--shs-couleur-violet);
}

/* Champ texte libre (Q1_BESOIN_SM, Q4_AUTRE) — HANDOFF.md §4. */
.shs-texte {
    display: block;
    width: 100%;
    min-height: 96px;
    margin-top: 14px;
    padding: 14px 16px;
    border: 1.5px solid var(--shs-couleur-filet-fort);
    border-radius: var(--shs-rayon-carte);
    font: inherit;
    font-size: 16px;
    box-sizing: border-box;
    resize: vertical;
}

.shs-texte:focus {
    border-color: var(--shs-couleur-violet);
}

/* Zone du compteur imbriqué de Q2_RUBRIQUES, masquée/affichée par JS. */
.shs-compteur {
    margin-top: 14px;
}

.shs-compteur__label {
    display: block;
    font-family: var(--shs-police-titres);
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 8px;
}

/* Compteur à boutons −/+ (quantite + sous-compteur) — HANDOFF.md §4 "Compteur". */
.shs-compteur-pilule {
    display: inline-flex;
    align-items: center;
    gap: 0;
    margin-top: 14px;
    border: 1.5px solid var(--shs-couleur-bordure-champ);
    border-radius: var(--shs-rayon-pilule);
    overflow: hidden;
}

.shs-compteur-pilule__bouton {
    width: 48px;
    height: 48px;
    flex: none;
    border: none;
    background: transparent;
    color: var(--shs-couleur-encre);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.shs-compteur-pilule__bouton:hover {
    background: var(--shs-couleur-fond-discret);
}

.shs-compteur-pilule__champ {
    width: 64px;
    height: 48px;
    flex: none;
    border: none;
    border-left: 1.5px solid var(--shs-couleur-bordure-champ);
    border-right: 1.5px solid var(--shs-couleur-bordure-champ);
    text-align: center;
    font: inherit;
    font-family: var(--shs-police-titres);
    font-weight: 500;
    font-size: 17px;
    box-sizing: border-box;
    /* 16px minimum sur mobile pour éviter le zoom automatique iOS ;
       la taille réelle (17px) est déjà au-dessus de ce plancher. */
}

.shs-resultat__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 24px;
}

@media (max-width: 480px) {
    .shs-navigation {
        flex-direction: column;
        align-items: stretch;
    }

    .shs-navigation .shs-bouton:last-of-type {
        width: 100%;
    }
}

/* Barre de navigation basse, collante sur mobile — HANDOFF.md §7. */
@media (max-width: 759px) {
    .shs-navigation {
        position: sticky;
        bottom: 0;
        background: var(--shs-couleur-fond);
    }
}

@media (prefers-reduced-motion: reduce) {
    .shs-simulateur * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/*
 * Résumé de projet — HANDOFF.md §7 "Bureau / mobile". <details> natif :
 * accessible au clavier (Entrée/Espace sur <summary>) sans aucun ARIA ni
 * JS de toggle à écrire. Fermé par défaut (mobile, comportement natif).
 * Au-delà de 759px, le bouton disparaît et le contenu reste visible en
 * permanence — d'abord sous les questions (760–959px, pas assez de place
 * pour une colonne), puis en colonne latérale sticky à partir de 960px
 * (voir .shs-simulateur--avec-resume ci-dessous).
 */
.shs-resume {
    margin-top: 32px;
    border-top: 1px solid var(--shs-couleur-filet-leger);
    padding-top: 16px;
}

.shs-resume__bouton {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    list-style: none;
    font-family: var(--shs-police-titres);
    font-weight: 500;
    font-size: 13px;
    color: var(--shs-couleur-texte-tertiaire);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.shs-resume__bouton::-webkit-details-marker {
    display: none;
}

.shs-resume__icone {
    transition: transform 150ms;
}

.shs-resume[open] .shs-resume__icone {
    transform: rotate(180deg);
}

.shs-resume__contenu {
    margin-top: 14px;
}

/*
 * Doublon volontaire du texte du <summary> : sur mobile le bouton de
 * bascule porte déjà "Votre projet", donc ce titre y est masqué pour ne
 * pas le répéter. À partir de 760px, le bouton disparaît (ci-dessous) et
 * CE titre devient la seule étiquette visible du résumé — toujours en
 * dehors de la zone défilante .shs-resume__defilement, donc jamais
 * emporté par le défilement de la liste.
 */
.shs-resume__titre {
    font-family: var(--shs-police-titres);
    font-weight: 500;
    font-size: 13px;
    color: var(--shs-couleur-texte-tertiaire);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 14px;
}

@media (max-width: 759px) {
    .shs-resume__titre {
        display: none;
    }
}

.shs-resume__vide {
    font-family: var(--shs-police-corps);
    font-size: 13px;
    color: var(--shs-couleur-texte-tertiaire);
    margin: 0;
}

.shs-resume__liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
    color: var(--shs-couleur-texte-secondaire);
}

.shs-resume__liste li {
    padding-bottom: 8px;
    border-bottom: 1px solid var(--shs-couleur-filet-leger);
    overflow-wrap: break-word;
}

.shs-resume__liste li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/*
 * Zone défilante (correction UX : un résumé très rempli ne doit plus
 * grandir indéfiniment et déborder dans le pied de page du site — voir
 * limite de hauteur à 960px ci-dessous). tabindex="0" + role="region" :
 * rend la zone elle-même focalisable au clavier (flèches/Page haut-bas
 * natives du navigateur une fois focalisée), sans quoi rien à l'intérieur
 * (du texte simple) n'est focalisable et le défilement clavier serait
 * impossible sans passer par la page entière.
 */
.shs-resume__defilement:focus-visible {
    outline: 2px solid var(--shs-couleur-violet);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (min-width: 760px) {
    /* L'attribut "open" est forcé à vrai par render-resume.js à cette
       largeur (un <details> fermé exclut son contenu du calcul de hauteur
       de son parent, même avec display:block !important sur ses enfants —
       seul le forçage de l'attribut lui-même est fiable). Le bouton de
       bascule n'a donc plus lieu d'être : il n'y a rien à replier. */
    .shs-resume__bouton {
        display: none;
    }

    .shs-resume {
        border-top: none;
        padding-top: 0;
        margin-top: 0;
    }
}

@media (min-width: 960px) {
    .shs-simulateur--avec-resume {
        max-width: var(--shs-largeur-contenu-avec-resume);
    }

    .shs-simulateur--avec-resume .shs-corps {
        display: grid;
        grid-template-columns: 1fr 220px;
        gap: 80px;
        align-items: start;
    }

    /*
     * Correction UX : un résumé très rempli (nombreuses réponses) pouvait
     * dépasser la hauteur de la zone de questions et déborder visuellement
     * dans le pied de page du site (constaté : résumé de 1693px pour une
     * zone de questions de 1143px sur un parcours riche). Le titre
     * (.shs-resume__titre) reste un bloc normal hors de la zone défilante,
     * donc toujours visible (pas de "piège" où l'utilisateur perdrait le
     * repère "Votre projet" en faisant défiler la liste) ; max-height est
     * posée directement sur la zone défilante elle-même, PAS sur un
     * ancêtre flex avec flex-grow : une chaîne flex-grow sans hauteur
     * explicite sur le conteneur ne contraint pas réellement la taille de
     * ses enfants (constaté : la zone défilante gardait sa hauteur de
     * contenu complète malgré un ancêtre plus petit), ce qui aurait rendu
     * le surplus de contenu invisible ET impossible à atteindre.
     * 80px ≈ hauteur du titre + ses marges, estimée large par sécurité.
     */
    .shs-simulateur--avec-resume .shs-resume {
        position: sticky;
        top: 96px;
    }

    .shs-simulateur--avec-resume .shs-resume__defilement {
        max-height: calc(100vh - 96px - 80px);
        overflow-y: auto;
    }
}