@layer pages {
.hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--bleu-50) 0%, var(--neutre-50) 45%, var(--soleil-100) 100%);
}

.hero-contenu {
    position: relative;
    z-index: 1;
    padding-block: clamp(2.5rem, 6vw, 5rem) var(--e-4);
}

.hero-contenu h1 {
    max-width: 15ch;
    margin-top: var(--e-5);
}

.surligne {
    background-image: linear-gradient(transparent 62%, var(--soleil-200) 62%, var(--soleil-200) 90%, transparent 90%);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.hero-intro {
    max-width: 38rem;
    margin-top: var(--e-5);
    font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
}

.hero-intro strong {
    color: var(--texte);
}

.hero-ciel {
    position: absolute;
    top: 100%;
    right: 4%;
    width: clamp(7rem, 15vw, 13rem);
    transform: translateY(-55%);
    pointer-events: none;
}

.hero-ciel svg {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 47.99rem) {
    .hero-ciel {
        top: 100%;
        right: 2%;
        width: clamp(5.5rem, 24vw, 7.5rem);
        transform: translateY(-25%);
    }
}

.paysage {
    --teinte-carrosserie: var(--soleil-500);
    --teinte-sombre: var(--soleil-700);
    display: block;
    width: 100%;
    /* Dépend à la fois de la largeur ET de la hauteur d'écran : sur un
       moniteur large mais bas (1366x768, 1920x1080...), la seule largeur
       gonflait l'illustration jusqu'à repousser le moteur de recherche
       sous la ligne de flottaison. */
    height: clamp(10rem, 7vw + 10vh, 22rem);
}

.paysage-halo {
    fill: var(--soleil-200);
    opacity: 0.55;
}

.paysage-soleil {
    fill: var(--soleil-300);
}

.paysage-oiseau {
    fill: none;
    stroke: var(--neutre-600);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.paysage-trainee {
    fill: none;
    stroke: var(--neutre-400);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 1 9;
}

.paysage-fusee {
    fill: var(--blanc);
    stroke: var(--neutre-600);
    stroke-width: 1.5;
}

.paysage-aileron {
    fill: var(--soleil-500);
}

.paysage-flamme {
    fill: var(--soleil-400);
}

.paysage-hublot {
    fill: var(--electrique-300);
}

.paysage-mer {
    fill: var(--paysage-mer);
}

.paysage-vague {
    fill: none;
    stroke: var(--blanc);
    stroke-width: 3;
    stroke-linecap: round;
    opacity: 0.7;
}

.paysage-colline-loin {
    fill: var(--paysage-loin);
}

.paysage-foret-milieu {
    fill: var(--paysage-milieu);
}

.paysage-foret-proche {
    fill: var(--paysage-proche);
}

.paysage-plage {
    fill: var(--soleil-100);
}

.paysage-sol {
    fill: var(--paysage-sol);
}

.paysage-route {
    fill: var(--paysage-route);
}

.paysage-route-ligne {
    fill: none;
    stroke: var(--soleil-400);
    stroke-width: 3;
    stroke-dasharray: 14 12;
}

.paysage-tronc,
.paysage-noix {
    fill: var(--paysage-tronc);
}

.paysage-palme {
    fill: var(--paysage-palme);
}

/* Sur écran large et bas, le bandeau est recadré par le haut : les palmiers
   y perdent leurs palmes et il ne reste que deux troncs nus. */
@media (min-width: 64rem) and (orientation: landscape) {
    .paysage-palmier-scene {
        display: none;
    }
}

.hero-recherche {
    position: relative;
    z-index: 2;
    margin-top: -1.5rem;
}

@media (min-width: 64rem) {
    .hero-recherche {
        margin-top: -2.5rem;
    }
}

.hero-confiance {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--e-3) var(--e-6);
    margin-top: var(--e-5);
    padding: 0;
    list-style: none;
}

.hero-confiance li {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--texte-corps);
}

.hero-confiance svg {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    color: var(--primaire);
}

.section-tete-ligne {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--e-4) var(--e-6);
    max-width: none;
}

.section-tete-ligne > div {
    max-width: 40rem;
}

.grille-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
    gap: var(--e-5);
    padding: 0;
    list-style: none;
}

.grille-avantages {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--e-5);
    padding: 0;
    list-style: none;
}

.avantage {
    padding: var(--e-6);
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--r-lg);
    box-shadow: var(--ombre-sm);
}

.avantage-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: var(--e-5);
    border-radius: var(--r-md);
    background: var(--primaire-fond);
    color: var(--primaire);
}

.avantage:nth-child(even) .avantage-icone {
    background: var(--electrique-100);
    color: var(--electrique-600);
}

.avantage-icone svg {
    width: 1.625rem;
    height: 1.625rem;
}

.avantage h3 {
    margin-bottom: var(--e-2);
    font-size: 1.125rem;
}

.avantage p {
    font-size: 0.9375rem;
    color: var(--texte-discret);
}

.grille-etapes {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--e-7);
    padding: 0;
    list-style: none;
}

@media (min-width: 48rem) {
    .grille-etapes {
        grid-template-columns: repeat(3, 1fr);
    }
}

.etape {
    position: relative;
    text-align: center;
}

.etape-icone {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    margin: 0 auto var(--e-5);
    border-radius: 50%;
    background: var(--primaire-fond);
    color: var(--primaire);
}

.etape-icone svg {
    width: 2rem;
    height: 2rem;
}

.etape-numero {
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.875rem;
    height: 1.875rem;
    border: 3px solid var(--fond);
    border-radius: 50%;
    background: var(--primaire);
    color: var(--blanc);
    font-size: 0.8125rem;
    font-weight: 800;
}

@media (min-width: 48rem) {
    .etape:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 2.5rem;
        left: calc(50% + 3.5rem);
        width: calc(100% + var(--e-7) - 7rem);
        border-top: 2px dashed var(--neutre-300);
    }
}

.etape h3 {
    margin-bottom: var(--e-2);
}

.etape p {
    max-width: 30ch;
    margin-inline: auto;
    color: var(--texte-discret);
}

.etapes-action {
    margin-top: var(--e-7);
    text-align: center;
}

.duo-faq {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--e-7);
    align-items: start;
}

@media (min-width: 64rem) {
    .duo-faq {
        grid-template-columns: 1.5fr 1fr;
        align-items: center;
        gap: var(--e-8);
    }
}

.faq {
    display: grid;
    gap: var(--e-3);
}

.faq-item {
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--r-md);
    transition: border-color var(--duree) ease, box-shadow var(--duree) ease;
}

.faq-item[open] {
    border-color: var(--bordure-forte);
    box-shadow: var(--ombre-sm);
}

.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-4);
    min-height: 3.5rem;
    padding: var(--e-4) var(--e-5);
    font-weight: 700;
    color: var(--texte);
    list-style: none;
    cursor: pointer;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary svg {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    color: var(--primaire);
    transition: transform var(--duree) ease;
}

.faq-item[open] summary svg {
    transform: rotate(180deg);
}

.faq-reponse {
    padding: 0 var(--e-5) var(--e-5);
    color: var(--texte-discret);
}

.carte-aide {
    padding: var(--e-6);
    background: var(--primaire-fond);
    border: 1px solid var(--bleu-100);
    border-radius: var(--r-lg);
    text-align: center;
}


.carte-aide h3 {
    margin-bottom: var(--e-2);
}

.carte-aide .bouton {
    margin-top: var(--e-5);
}

.carte-aide-liens {
    display: grid;
    gap: var(--e-3);
    margin-top: var(--e-5);
    padding: 0;
    list-style: none;
    font-size: 0.9375rem;
}

.carte-aide-liens li {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: var(--e-3);
    overflow-wrap: anywhere;
}

.carte-aide-liens svg {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    margin-top: 0.15rem;
    color: var(--primaire);
}

.carte-aide-liens a {
    font-weight: 600;
    color: var(--texte-corps);
}

.carte-aide-liens a:hover {
    color: var(--primaire);
}

.bandeau-cta {
    position: relative;
    overflow: hidden;
    padding-block: var(--e-8);
    background: var(--bleu-800);
    text-align: center;
}

@media (min-width: 64rem) {
    .bandeau-cta {
        padding-block: var(--e-9);
    }
}

.bandeau-cta::before,
.bandeau-cta::after {
    content: "";
    position: absolute;
    border-radius: 50%;
}

.bandeau-cta::before {
    left: -10rem;
    bottom: -16rem;
    width: 30rem;
    height: 30rem;
    background: var(--bleu-700);
}

.bandeau-cta::after {
    top: -1.5rem;
    right: -1rem;
    width: 4.5rem;
    height: 4.5rem;
    background: var(--soleil-400);
}

@media (min-width: 48rem) {
    .bandeau-cta::after {
        top: 2.5rem;
        right: 8%;
    }
}

.bandeau-cta .conteneur {
    position: relative;
    z-index: 1;
}

.bandeau-cta h2 {
    margin-bottom: var(--e-3);
    color: var(--blanc);
}

.bandeau-cta p {
    max-width: 36rem;
    margin-inline: auto;
    font-size: var(--t-grand);
    color: var(--bleu-100);
}

.bandeau-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--e-3);
    margin-top: var(--e-6);
}

.bandeau-cta :focus-visible {
    outline-color: var(--blanc);
}
}