/* Changer la couleur de fond du footer */
/* Étape 1 : Chargement de la police Montserrat */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

.page-id-1648 header,
.page-id-1648 footer {
    display: none;
}

.page-id-1648 .entry-content {
    max-width: 800px;
    margin: 40px auto;
    padding: 30px;
    background: #fdfdfd;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    color: #2c3e50;
    line-height: 1.5;
}





















/* Étape 2 : Application forcée à tous les éléments */
body,
button,
input,
select,
textarea,
h1, h2, h3, h4, h5, h6,
p, li, a, span, div {
    font-family: 'Montserrat', sans-serif !important;
}

#header, .site-header, .main-header, header {
    background-color: #3a75c4 !important;
}
/* La ligne pour le pied de page que vous aviez */
.footer-widgets .widget .widget-title {
    font-style: italic;
}
/*.site-footer {
  background-color: #fffff;
}

/* Partie haute du footer */


body {
    text-align: justify;
}

/* S'assurer que le texte dans les conteneurs spécifiques est également justifié */
p, li, blockquote, .entry-content, .widget-content {
    text-align: justify !important;
}

/* Ajustement facultatif : Alignement à gauche pour les titres pour une meilleure lisibilité */
h1, h2, h3, h4, h5, h6 {
    text-align: left;
}

/* Justifier tous les textes du site */


/* Partie basse du footer */

.site-footer .footer-bottom {
  background-color: #111111;
}

.header-bottom {
  background-color: #1a73e;
}


.footer-widgets .widget p {
  color: #ffffff;
}



.footer-widgets .textwidget {
  color: #ffffff;
}

#text-5.widget.widget_text {
  color: #ffffff;
}



.footer-widgets.footer-widgets-col--four .footer-widget-area {
  background-color: #1E3A8A;
  color: #ffffff;
}
#text-14 a, #text-5 a {
    color: #ffffff;
}


/* Conteneur pour aligner les boutons */
.boutons-container {
    display: flex;
    justify-content: flex-start; /* Aligne les boutons sur la gauche */
    gap: 5px; /* Réduit l'espace entre les boutons à 5px */
    flex-wrap: wrap; /* Permet aux boutons de passer à la ligne sur les petits écrans */
}

/* Style commun à tous les boutons */
.bouton-personnalise {
    width: 150px; /* Largeur du bouton */
    height: 40px; /* Hauteur du bouton */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
}

.bouton-personnalise a {
    color: #ffffff;
    font-size: 13px;
    text-decoration: none;
    font-weight: bold;
    text-transform: lowercase;
}

/* Couleurs spécifiques pour chaque bouton */
.bouton-personnalise:nth-child(1) {
    background-color: #007bff; /* Bleu */
}

.bouton-personnalise:nth-child(2) {
    background-color: #28a745; /* Vert */
}

/* Cacher le menu classique sur petit écran */
/* Menu mobile affiché */
.nav-menu.active {
  display: flex !important;
  flex-direction: column;
  position: absolute;
  top: 60px; /* juste en dessous du header */
  right: 15px; /* aligné à droite */
  width: 220px; /* largeur fixe du menu */
  background: #1A73E8; /* fond bleu */
  padding: 10px 15px;
  border-radius: 8px; /* coins arrondis */
  box-shadow: 0 4px 12px rgba(0,0,0,0.2); /* petite ombre */
  z-index: 9999;
}
.nav-menu.active a {
  color: white;
  padding: 10px 15px;
  text-decoration: none;
  display: block;
  border-radius: 5px;
  transition: background 0.3s;
}

.nav-menu.active a:hover {
  background: rgba(255,255,255,0.2);
}


.galerie {
  display: grid;
  grid-template-columns: repeat(4, fr); /* 4 images côte à côte */
  gap: 15px; /* espace entre les images */
}
.page-id-59 h1.entry-title,
.page-id-59 .page-title {
  display: none !important;
}

.page-id-899 h1.entry-title,
.page-id-899 .page-title {
  display: none !important;
}

.page-id-624 h1.entry-title,
.page-id-624 .page-title {
  display: none !important;
}

.page-id-749 h1.entry-title,
.page-id-749 .page-title {
  display: none !important;
}
.page-id-611 h1.entry-title,
.page-id-611 .page-title {
  display: none !important;
}
.page-id-752 h1.entry-title,
.page-id-752 .page-title {
  display: none !important;
}

.page-id-922 h1.entry-title,
.page-id-922 .page-title {
  display: none !important;
}
.page-id-1099 h1.entry-title,
.page-id-1099 .page-title {
  display: none !important;
}

.page-id-1074 h1.entry-title,
.page-id-1074 .page-title {
  display: none !important;
}
p {
  font-family: "popins", serif;
  font-weight: 300; /* écriture légère */
  font-size: 16px; /* tu peux ajuster */
  line-height: 1.6;
}

footer, 
footer * {
  color: #ffffff !important;
}

.wppb-image-addon-content.wppb-imginlineblock img {
    width: 1120px;     /* Mets la largeur que tu veux (ex: 100%, 200px, etc.) */
    height: auto;     /* Garde les proportions de l'image */
    /* height: 200px;  Si tu veux forcer une hauteur spécifique */
}

.page .entry-title {
display:none;
}

.header-top,
.footer-top {
    background-color: #3a75c4 !important;
}

/* Footer global - OK ça ne touche que le bas */
#colophon,
.footer-widgets-wrapper,
.footer-widgets-area,
.footer-widgets,
.footer-widget-area,
.suffice-footer,
.site-footer {
    background-color: #3A75C4 !important;
}

/* Colonne du footer UNIQUEMENT */
/* J'ai supprimé ".widget-area .widget" qui colorait ta barre de droite */
.footer-widgets .widget,
.footer-widgets-area .widget,
.footer-widget {
    background-color: #3A75C4 !important;
    border: none !important;
    box-shadow: none !important;
}














/* Media Query : Appliquer ces règles pour les écrans de 768px de large ou moins (mobiles et tablettes) */
@media screen and (max-width: 768px) {

    /* Règle pour les mises en page basées sur Flexbox */
    /* Force l'empilement (l'un au-dessus de l'autre) */
    .section-avec-media, .row, .et_pb_row, .fl-row {
        flex-direction: column !important; /* Force l'empilement vertical pour Flexbox */
    }
    
    /* Règle pour les mises en page basées sur Float (plus anciennes) */
    /* Annule les flottants pour que les éléments prennent toute la largeur */
    .image-colonne, .texte-colonne, .one-half, .one-third {
        float: none !important;
        width: 100% !important; /* Force les colonnes à prendre toute la largeur */
        margin-right: 0 !important;
        margin-left: 0 !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
    
    /* Centrer le texte dans les colonnes pour un meilleur look en mobile */
    .texte-colonne {
        text-align: center !important;
    }

}


/* Forcer le menu mobile à être au-dessus de tout */
.main-navigation, /* Cible le bloc principal du menu */
#site-navigation, /* Cible un autre nom courant pour le menu */
.menu-mobile-container, /* Cible les conteneurs mobiles */
.navbar-collapse { /* Cible les menus basés sur Bootstrap */
    position: relative; /* Assure que z-index peut s'appliquer */
    z-index: 999999 !important; /* Une valeur très élevée pour être sûr */
}




/* Application de Montserrat à TOUS les éléments (déjà en place) */
/* ... */

/* Ciblage des titres de widgets dans le Footer : Gras, Montserrat */
#footer h1, #footer h2, #footer h3, #footer h4,
.site-footer .widget-title,
footer .widget-title {
    font-weight: 700 !important; /* Force le gras */
    font-family: 'Montserrat', sans-serif !important; /* Force Montserrat */
    font-style: normal !important; /* Annule le style italique si vous l'aviez laissé */
    /* La couleur est déjà gérée par le thème, mais on peut forcer le blanc pour la lisibilité */
    color: white !important; 
}



/* Media Query pour les écrans de mobile (768px ou moins) */
@media screen and (max-width: 768px) {
    
    /* 1. Réduire l'espacement autour du pied de page lui-même */
    footer, .site-footer, #footer {
        padding-top: 20px !important; /* Réduire l'espace vertical au-dessus du footer */
        padding-bottom: 20px !important; /* Réduire l'espace vertical en dessous du footer */
    }

    /* 2. Réduire la marge (l'espace) des Widgets/Colonnes du Footer */
    /* Ces sélecteurs ciblent les conteneurs des titres et des listes */
    .site-footer .widget, 
    #footer .widget,
    .footer-widgets .widget-area {
        margin-bottom: 15px !important; /* Espace réduit entre chaque bloc (CPPF, NOS PRESTATIONS, etc.) */
        padding-top: 5px !important; /* Réduire le rembourrage interne si existant */
        padding-bottom: 5px !important;
    }
    
    /* 3. Réduire l'espace entre les éléments de la liste (les liens) */
    .site-footer ul li, 
    #footer ul li {
        margin-bottom: 2px !important; /* Très peu d'espace entre les liens individuels */
        line-height: 1.3 !important; /* Rapproche légèrement les lignes de texte */
    }
    
}



/* 1. Mise à jour du Titre "Suivez-nous :" */
p {
    /* Sélecteur de votre paragraphe (avec le texte Suivez-nous) */
    font-size: 1.1em !important; /* Augmente la taille, vous pouvez ajuster */
    line-height: 1.5;
}

/* 2. Configuration du conteneur pour l'alignement horizontal */
.footer-social-icons {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* 3. Style général des liens (création du cercle) */
.footer-social-icons a {
    display: flex; 
    justify-content: center;
    align-items: center;
    
    width: 38px;
    height: 38px;
    
    color: #fff; /* Couleur par défaut de l'icône (Blanc) */
    border-radius: 50%; 
    font-size: 18px; 
    text-decoration: none;
    transition: all 0.3s; /* Transition pour le survol */
    flex-shrink: 0;
}

/* --- 4. Couleurs Officielles des Réseaux Sociaux (Fond Par Défaut) --- */
.footer-social-icons .social-facebook { background-color: #4267B2; } 
.footer-social-icons .social-linkedin { background-color: #0A66C2; } 
.footer-social-icons .social-youtube { background-color: #FF0000; } 
.footer-social-icons .social-tiktok { background-color: #000000; } 

/* --- 5. EFFET DE SURVOL (HOVER) : CERCLE BLANC + ICONE DE COULEUR ORIGINE --- */

.footer-social-icons a:hover {
    background-color: #00000 !important; /* Le cercle devient blanc */
    transform: scale(1.1);
}

/* Facebook : L'icône prend sa couleur bleue au survol */
.footer-social-icons .social-facebook:hover {
    color: #4267B2 !important; 
}

/* LinkedIn : L'icône prend sa couleur bleue au survol */
.footer-social-icons .social-linkedin:hover {
    color: #0A66C2 !important; 
}

/* YouTube : L'icône prend sa couleur rouge au survol */
.footer-social-icons .social-youtube:hover {
    color: #FF0000 !important; 
}

/* TikTok : L'icône prend sa couleur noire au survol */
.footer-social-icons .social-tiktok:hover {
    color: #000000 !important; 
}


/* Mettre le menu principal en gras */
.nav-menu li a, 
.main-navigation ul li a,
#top-menu li a {
    font-weight: bold !important;
}

/* Mettre les éléments de la barre supérieure (contact/localisation) en gras */
.top-bar a, 
.top-bar span,
.header-top-inner a {
    font-weight: bold !important;
}

/* Aligner le texte du menu à gauche et retirer la justification */
.nav-menu, .main-navigation ul, .menu-item a {
    text-align: left !important;
    text-align-last: left !important;
    justify-content: flex-start !important;
}

/* 1. Titres en gras */
h1.entry-title, h2.entry-title, .post-title, .entry-title a {
    font-weight: bold !important;
}




/* 5. Supprimer le bandeau bleu résiduel derrière le titre ou l'image */
.entry-header, .post-thumbnail {
    background: #ffffff !important;
    border: none !important;
}




/* 2. Titres en gras */
h1.entry-title, .widget-title, .wp-block-latest-posts__post-title {
    font-weight: bold !important;
}

/* 3. Image de l'article en 100% de large */
.post-thumbnail img, .entry-content img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin-bottom: 20px !important;
}




/* 1. Forcer la mise en page : Contenu à gauche (70%) et Sidebar à droite (30%) */
@media (min-width: 900px) {
    #primary {
        width: 68% !important;
        float: left !important;
        margin-right: 2% !important;
    }
    #secondary {
        width: 30% !important;
        float: right !important;
        display: block !important;
        clear: none !important;
    }
}



/* 3. Titres en gras et réduction des espaces vides */
h1.entry-title, .widget-title, .wp-block-latest-posts__post-title {
    font-weight: bold !important;
}

.entry-content, .site-main, article {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* 4. Image de l'article en largeur maximale */
.post-thumbnail img {
    width: 100% !important;
    height: auto !important;
}

/* 1. Forcer le fond blanc sur chaque élément de la liste d'actualités */
#secondary ul li, 
#secondary .wp-block-latest-posts li,
.widget_recent_entries ul li {
 
    padding: 10px !important;
    margin-bottom: 5px !important;
    border: none !important;
}




/* 1. RÉINITIALISATION : On s'assure que par défaut, tout le site est en plein écran */
#primary {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}
#secondary {
    display: none !important; /* Masqué par défaut sur tout le site */
}

/* 2. ÉCRAN DES ARTICLES : On active la barre latérale UNIQUEMENT ici */
.single-post #primary {
    @media (min-width: 900px) {
        width: 68% !important;
        float: left !important;
        margin-right: 2% !important;
    }
}

.single-post #secondary {
    @media (min-width: 900px) {
        display: block !important;
        width: 30% !important;
        float: right !important;
        background-color: #ffffff !important;
    }
}
.site-info {
    display: none;
}



/* Exemple pour mettre deux blocs de texte l'un à côté de l'autre */
.container-global {
    display: flex;
    justify-content: space-between;
    gap: 40px; /* Espace entre les colonnes */
    flex-wrap: wrap; /* Permet de revenir à la ligne sur mobile */
}

.colonne {
    flex: 1; /* Les deux colonnes prennent la même largeur */
    min-width: 300px;
}