/* [ABC-4-206] Pages d'aide (FAQ, tutoriels) : structure des pages d'aide de service-public.fr (titre et chapô, date de
 * mise à jour, sommaire, sections numérotées, encadrés « À savoir », « Voir aussi ») aux couleurs de RIF (sarcelle et
 * ambre, rif-sarcelle.css), et encadré « Besoin d'aide ? » sous le contenu des pages expliquées. */
.aide { color: var(--encre, #13262b); }
.aide-entete { border-bottom: 1px solid var(--rif-trait, #dfe5ec); padding-bottom: 1.25rem; margin-bottom: 1.5rem; }
.aide-surtitre { margin: 0 0 .25rem; font-size: .875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--sarcelle, #0b5a61); }
.aide-entete h1 { margin: 0 0 .75rem; }
.aide-chapo { font-size: 1.2rem; line-height: 1.6; margin: 0 0 .75rem; max-width: 46rem; }
.aide-mise-a-jour { margin: 0; font-size: .875rem; color: var(--rif-doux, #52647a); }

.aide-mise-en-page { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 2rem; align-items: start; }
.aide-colonne { min-width: 0; max-width: 48rem; }

.aide-sommaire { background: var(--sarcelle-pale, #e5f1f1); border-left: 4px solid var(--sarcelle, #0b5a61); padding: 1rem 1.25rem; margin-bottom: 2rem; border-radius: 0 var(--rif-rayon-petit, 10px) var(--rif-rayon-petit, 10px) 0; }
.aide-sommaire-titre { font-weight: 700; margin: 0 0 .5rem; }
.aide-sommaire ol { list-style: none; margin: 0; padding: 0; }
.aide-sommaire li { margin: .25rem 0; }
.aide-sommaire a { color: var(--sarcelle-fonce, #063a3f); }

.aide-section { margin: 0 0 2.25rem; scroll-margin-top: 1rem; }
.aide-section > h2 { display: flex; align-items: baseline; gap: .75rem; font-size: 1.5rem; margin: 0 0 1rem; padding-bottom: .5rem; border-bottom: 2px solid var(--rif-trait, #dfe5ec); }
.aide-numero { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; height: 2rem; border-radius: 50%; background: var(--sarcelle, #0b5a61); color: #fff; font-size: 1rem; font-weight: 700; }

.aide-question { margin: 0 0 1.25rem; }
.aide-question h3, .aide-bloc h3 { font-size: 1.1rem; margin: 0 0 .4rem; }
.aide-reponse p, .aide-bloc p { margin: 0 0 .5rem; line-height: 1.6; }
.aide-suite { font-weight: 700; }

.aide-a-savoir { border-left: 4px solid var(--ambre, #f0a93b); background: #fff7e8; padding: 1rem 1.25rem; margin: 1.5rem 0; border-radius: 0 var(--rif-rayon-petit, 10px) var(--rif-rayon-petit, 10px) 0; }
.aide-a-savoir-titre { font-weight: 700; color: var(--ambre-texte, #8a4b00); margin: 0 0 .4rem; }
.aide-a-savoir p:last-child, .aide-a-savoir ul { margin-bottom: 0; }

.aide-voir-aussi { position: sticky; top: 1rem; border: 1px solid var(--rif-trait, #dfe5ec); border-top: 4px solid var(--sarcelle, #0b5a61); border-radius: var(--rif-rayon-petit, 10px); padding: 1rem 1.25rem; background: #fff; }
.aide-voir-aussi-titre { font-weight: 700; margin: 0 0 .5rem; }
.aide-voir-aussi ul { margin: 0; padding-left: 1.1rem; }
.aide-voir-aussi li { margin: .35rem 0; }

.aide-liste-themes { columns: 2; column-gap: 2rem; padding-left: 1.1rem; }
.aide-cartes { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
.aide-carte { border: 1px solid var(--rif-trait, #dfe5ec); border-radius: var(--rif-rayon-petit, 10px); padding: 1rem; background: #fff; }
.aide-carte h3 { font-size: 1.05rem; margin: 0 0 .4rem; }
.aide-carte p { margin: 0 0 .4rem; }
.aide-carte-etapes { font-size: .875rem; color: var(--rif-doux, #52647a); }

.aide-etapes { list-style: none; padding: 0; margin: 0; }
.aide-etape { border-left: 3px solid var(--sarcelle-pale, #e5f1f1); padding: 0 0 1.5rem 1.25rem; margin-bottom: 1rem; }
.aide-etape h3 { font-size: 1.15rem; margin: 0 0 .5rem; }
.aide-etape-numero { display: inline-block; margin-right: .5rem; padding: .1rem .6rem; border-radius: var(--rif-rayon-pastille, 999px); background: var(--sarcelle, #0b5a61); color: #fff; font-size: .875rem; }
.aide-capture { margin: .75rem 0 0; }
.aide-capture img { display: block; max-width: 100%; height: auto; border: 1px solid var(--rif-trait, #dfe5ec); border-radius: var(--rif-rayon-petit, 10px); box-shadow: var(--rif-ombre-1, 0 1px 2px rgba(16,44,82,.06)); }
.aide-capture figcaption { font-size: .875rem; color: var(--rif-doux, #52647a); margin-top: .4rem; }

.aide-sources ul { padding-left: 1.1rem; }

.aide-de-la-page { margin: 2rem 0 0; border: 1px solid var(--rif-trait, #dfe5ec); border-left: 4px solid var(--sarcelle, #0b5a61); border-radius: 0 var(--rif-rayon-petit, 10px) var(--rif-rayon-petit, 10px) 0; padding: 1rem 1.25rem; background: var(--sarcelle-pale, #e5f1f1); }
.aide-de-la-page-titre { font-weight: 700; margin: 0 0 .4rem; }
.aide-de-la-page ul { margin: 0; padding-left: 1.1rem; }

@media (max-width: 900px) {
    .aide-mise-en-page { grid-template-columns: minmax(0, 1fr); }
    .aide-voir-aussi { position: static; }
    .aide-liste-themes { columns: 1; }
    .aide-chapo { font-size: 1.05rem; }
}