/* =====================================================================
   BOUTONS — classe commune à tous les CTA du site (groupe ACF "Bouton",
   builder/parts/bouton.php). Un seul système de classes pour toutes les
   variantes visuelles : pas de nouvelle classe par section.
   - .bouton                                -> variante pleine (fond apricot, texte blanc)
   - .section__btn + .section__btn .bouton  -> le 2e bouton d'une paire (2 appels
     successifs de builder/parts/bouton.php, chacun enveloppé dans <p class="section__btn">)
     devient outline (ex : bouton_secondaire du hero, cf. builder/haut_de_page_fixe.php)
   - .bouton--alt        -> variante outline explicite (hors paire)
   - contexte fond sombre (section[data-color="#192811"], panneaux
     basic_2cols sombres) -> le hover passe au blanc plutôt qu'au vert foncé
   ===================================================================== */

.cta .bouton,
.bouton,
.menu-cta {
    padding: 14px 20px !important;
    /* .menu-cta (bouton du header) garde un format compact, cf. règle dédiée plus bas */
    text-decoration: none;
    display: flex;
    width: fit-content;
    border-radius: var(--border-radius-full);
    color: var(--white);
    transition: var(--transition);
    gap: 8px;
    min-height: 40px;
    align-items: center;
    font-size: 16px;
    font-weight: var(--regular);
    border: 1px solid var(--color-primary);
    background-color: var(--color-primary);

    &:hover {
        background-color: var(--color-secondary);
        border-color: var(--color-secondary);
        color: var(--white);
    }

    &.has-picto {
        justify-content: center;
        align-items: center;
        width: fit-content;
        display: flex;
        gap: 8px;

        &.before {
            &:before {
                content: '';
                background-image: var(--picto-url);
                display: inline-block;
                width: 16px;
                height: 16px;
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center;
            }
        }

        &.after {
            flex-direction: row;

            &:after {
                content: '';
                background-image: var(--picto-url);
                display: inline-block;
                width: 16px;
                height: 16px;
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center;
            }
        }
    }

    &.teaser__more {
        margin-top: auto;
    }
}

/* Header (hors périmètre home) : conserve un format compact indépendant
   de l'agrandissement des CTA de contenu ci-dessus. */
.menu-cta {
    padding: 0 !important;
    font-size: 14px;
}

.section__btn.text-center {
    &>a {
        margin-right: auto;
        margin-left: auto;
    }
}

.cta:has(.bouton + .bouton),
.cta:has(.section__btn + .section__btn) {
    display: flex;
    width: fit-content;
    gap: 12px;
    flex-wrap: wrap;

    @media (max-width: 991px) {
        .bouton {
            margin-right: auto;
            margin-left: auto;
        }
    }
}

.bouton--alt {
    padding: 10px 20px;
    border-radius: var(--border-radius-full);
}

/* Variante outline : 2e bouton d'une paire (2 <p class="section__btn"> adjacents),
   ou classe explicite .bouton--alt */
.bouton+.bouton,
.section__btn+.section__btn .bouton,
.bouton--alt {
    background-color: transparent !important;
    border: 1px solid var(--color-primary) !important;
    color: var(--color-primary) !important;

    &:hover {
        background-color: var(--color-primary) !important;
        border-color: var(--color-primary) !important;
        color: var(--white) !important;
    }
}

/* Contexte fond sombre (section pleine largeur data-color, ou panneau
   basic_2cols avec le champ ACF "Fond sombre" activé -- cf.
   builder/basic_2cols.php + css/sections_builder/basic_2cols.css) : le
   hover du bouton plein passe au blanc plutôt qu'au vert foncé, pour
   rester lisible sur le fond déjà sombre. */
section[data-color="#192811"] .bouton:not(.bouton--alt):not(.section__btn+.section__btn .bouton),
.basic_2cols__para--dark .bouton:not(.bouton--alt):not(.section__btn+.section__btn .bouton) {
    &:hover {
        background-color: var(--white) !important;
        border-color: var(--white) !important;
        color: var(--color-secondary) !important;
    }
}

@media (min-width: 992px) {
    .hdp__intro {

        .cta:has(.bouton + .bouton),
        .cta:has(.section__btn + .section__btn) {
            .bouton {
                margin-right: auto;
                margin-left: auto;
            }
        }
    }
}