/* Section Header */
.header {
/* Variables CSS avec valeurs par défaut */
    --_fg-feature: var(--fg-feature, #000);
    --_sub-feature: var(--sub-feature, #AAAAAA);

    display: flex;
    flex-direction: column; /* Empilement vertical */
    align-items: center; /* Centrage horizontal */
    gap: 1rem;
    margin-block: 4rem; /* Marge haut/bas */
    padding: 2rem;
    background: linear-gradient(#E0FCF1, #f9f9f9); /* Dégradé de fond */
}

/* Titre principal */
.header-title {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--_fg-feature);
    text-align: center;
    font-size: 30px;
}

/* Texte du header */
.header-text {
    font-size: 1.2rem;
    color: var(--_fg-feature);
    text-align: center;
    min-width: 100px;
    font-size: 18px;

}

/* Conteneur des boutons */
.header-btn-container {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

/* Bouton 1 */
.btn1 {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border: solid 1px var(--_sub-feature);
    cursor: pointer;
    border-radius: 0.5rem;
    box-shadow: 4px 4px #CCCCCC; /* Ombre */
    background-color: #f4f4f4;
    font-weight: bold;
}

/* Hover bouton 1 */
.btn1:hover {
    color: #ffffff;
    background-color: #00BFA6 ;
}

/* Bouton 2 (identique au bouton 1) */
.btn2 {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border: solid 1px var(--_sub-feature);
    cursor: pointer;
    border-radius: 0.5rem;
    box-shadow: 4px 4px #CCCC;
    background-color: #f4f4f4;
    font-weight: bold;
}

/* Hover bouton 2 */
.btn2:hover {
    color: #ffffff;
    background-color: #00BFA6 ;
}

/* Contenu texte + boutons */
.header-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

/* Responsive : affichage sur écrans larges */
@media (width > 40rem) {
    .header {
        padding: 5rem; 
    }
    .header-item {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-direction: row-reverse;
        gap: 3rem;
    }

    .header-image {
        width: 40rem;
    }

    .header-content {
        align-items: flex-start;
        text-align: left;
        width: 25rem;
        min-width: 25rem;
    }

    .header-title {
        text-align: left;
    }

    .header-text {
        text-align: left;
    }
}