/*
 Theme Name: Marino Thème
 Theme URI: https://www.elegantthemes.com/gallery/divi/
 Description: Marino Thème
 Author: Marina Feliciano
 Author URI: https://www.elegantthemes.com
 Template: Divi
 Version: 1.0.0
*/
 
/* =Theme customization starts here
------------------------------------------------------- */
/*pleine page hero section*/
.et_pb_fullscreen .et_pb_fullwidth_header_container{
     width: 100%;

}



/* Styling général pour les boutons de filtre */
.et_pb_portfolio_filters ul {
    display: flex; /* Utilise flexbox pour aligner les boutons */
    flex-wrap: wrap; /* Permet aux boutons de passer à la ligne si l'espace est insuffisant */
    list-style: none; /* Supprime les puces de liste */
    padding: 0; /* Supprime le padding par défaut de l'ul */
    margin: 0; /* Supprime le margin par défaut de l'ul */
    justify-content: flex-start; /* Aligne les boutons à gauche */
}

.et_pb_portfolio_filters li {
    margin-right: 15px; /* Gouttière de séparation entre les boutons */
    margin-bottom: 10px; /* Pour l'espacement si les boutons passent à la ligne */
}

.et_pb_portfolio_filters li:last-child {
    margin-right: 0; /* Pas de marge à droite pour le dernier bouton */
}

.et_pb_portfolio_filters li a {
    border: 1px solid black; /* Contour noir */
    border-radius: 20px !important; /* Coins arrondis, ajout de !important pour assurer la priorité */
    background-color: black !important; /* Fond noir */
    color: white !important; /* Texte blanc */
    padding: 10px 20px; /* Espacement interne */
    display: inline-block; /* Pour appliquer padding et margin correctement */
    text-decoration: none; /* Enlever le soulignement par défaut des liens */
    transition: all 0.3s ease; /* Transition douce pour les changements d'état */
    white-space: nowrap; /* Empêche le texte de se casser sur plusieurs lignes */
    font-family: "Inter", sans-serif; /* Utilise la police Inter ou une police sans-serif par défaut */
    font-weight: 500; /* Poids de la police */
    text-transform: uppercase; /* Met le texte en majuscules */
    font-size: 16px; /* Taille de police par défaut */
}

/* Style au survol (hover) */
.et_pb_portfolio_filters li a:hover {
    background-color: #555 !important; /* Gris au survol */
    color: white !important; /* Texte blanc */
    border: 1px solid #555 !important; /* Contour gris assorti */
    cursor: pointer; /* Indique que l'élément est cliquable */
}

/* Style pour le filtre sélectionné (actif) */
.et_pb_portfolio_filters li a.active,
.et_pb_portfolio_filters li.active a { /* Divi peut ajouter la classe 'active' soit au <a> soit au <li> */
    background-color: #555 !important; /* Gris quand sélectionné */
    color: white !important; /* Texte blanc */
    border: 1px solid #555 !important; /* Contour gris assorti */
    border-radius: 20px !important; /* Conserve les coins arrondis pour l'état sélectionné */
}

/* --- Media Queries pour la Responsivité --- */

/* Pour les écrans plus petits que 768px (tablettes, mobiles larges) */
@media (max-width: 768px) {
    .et_pb_portfolio_filters li {
        margin-right: 10px; /* Réduit la gouttière */
        margin-bottom: 8px;
    }

    .et_pb_portfolio_filters li a {
        padding: 8px 15px; /* Réduit le padding des boutons */
        font-size: 14px; /* Réduit légèrement la taille de la police */
    }
}

/* Pour les écrans plus petits que 480px (smartphones) */
@media (max-width: 480px) {
    .et_pb_portfolio_filters li {
        margin-right: 8px; /* Réduit encore la gouttière */
        margin-bottom: 6px;
    }

    .et_pb_portfolio_filters li a {
        padding: 6px 12px; /* Réduit davantage le padding */
        font-size: 12px; /* Réduit la taille de la police pour les petits écrans */
    }
}

/* Style pour les boutons personnalisés */
.bouton {
    display: inline-block; /* Permet d'appliquer padding et margin, et de centrer le texte */
    padding: 7px 20px; /* Espacement interne du bouton */
    border: 1.5px solid black; /* Contour noir */
    border-radius: 200px; /* Coins arrondis */
    background-color: white; /* Fond blanc */
    color: black; /* <-- TEXTE NOIR pour la lisibilité sur fond blanc. Si vous voulez VRAIMENT blanc, mettez 'white'. */
    text-align: center; /* Centre le texte horizontalement */
    text-decoration: none; /* Enlève le soulignement si c'était un lien */
    font-family: "Inter", sans-serif; /* Assure l'utilisation de la police Inter */
    font-weight: 500; /* Poids de la police */
    text-transform: uppercase; /* Met le texte en majuscules */
    cursor: pointer; /* Indique que l'élément est cliquable */
    transition: all 0.3s ease; /* Transition douce pour les changements d'état */
    margin: 5px; /* Petite marge pour séparer les boutons si vous en avez plusieurs */
}

/* Style au survol (hover) */
.bouton:hover {
    background-color: #f0f0f0; /* Un gris très clair au survol, pour une légère interaction */
    color: black; /* Texte reste noir au survol */
    border-color: #333; /* Un contour légèrement plus foncé au survol */
}
/*cacher les filtres en mobile*/
@media (max-width: 480px) {
.et_pb_portfolio_filters.clearfix {
    display: none !important;
}}