/* Section Features */
.features {
/* Variables CSS avec valeurs par défaut */
    --_fg-feature: var(--fg-feature, #000000);
    --_cf-feature: var(--cf-feature, #00bfa0);
    --_bg-feature: var(--bg-feature, #F1F5F9);
    --_bg-card: var(--bg-card, #ffffff);
    margin-top: 2rem;
    padding-top: 2rem ;
    background-color: var(--_bg-feature); /* Application du fond */
    margin-bottom: 2rem;
    


}

/* En-tête de la section features */
.features-head {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centrage horizontal */
    justify-content: center; /* Centrage vertical */
    margin-bottom: 4rem;
}

/* Titre principal */
.features-title {
    text-align: center;
    font-size: 2rem;
}

/* Conteneur des cartes */
.cards {
    display: flex;
    flex-direction: column;
}

/* Carte individuelle */
.feature-cards {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: 1rem;
    margin-right: 1rem;
    border: solid 2px #ffffff;
    border-radius: 1rem;
    background-color: var(--_bg-card); /* Fond de la carte */
    margin-top: 2rem;
    margin-left: 2rem;
    width: 25rem; /* Largeur fixe (mobile) */
    height: 13rem; /* Hauteur fixe */
    margin-bottom: 3rem;
}

/* Titre de la carte */
.feature-title {
    text-align: center;
    color: var(--_cf-feature);
    font-size: 1.25rem;
}

/* Texte descriptif */
.feature-paragraphe {
    text-align: center;
    margin-top: 1rem;
}
/* Responsive : affichage sur écrans larges */
@media (width > 40rem) {
/* Conteneur des cartes */
   .cards {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
   }
/* Carte individuelle */
   .feature-cards{
    width: 25%;
   }
}