/*
 Theme Name:     PREFABOS
 Theme URI:      https://agence-valeursdusud.fr/
 Description:    PREFABOS
 Author:         Agence Valeurs du Sud
 Author URI:     https://agence-valeursdusud.fr/
 Template:       Divi
 Version:        2025
*/
 
 
/* =Vous pouvez personnalisez à partir d'ici. 
------------------------------------------------------- */




/*  CSS POUR L'AFFICHAGE DE LA GRILLE DES REALISATIONS SUR LA PAGE D'ACCUEIL */

/* ==========================================================
   Conteneur et Grille
   ========================================================== */

/* Conteneur principal de la grille */
.realisations-grid-accueil {
    overflow: hidden; 
    line-height: 0;
    /* Ajout d'une marge/padding pour créer l'espacement autour des bords */
    padding: 10px; /* Moitié de l'espacement désiré entre les blocs (20px) */
    margin: 0 auto;
    max-width: 1200px; /* Limite maximale, ajustez si nécessaire */
}

/* Style de base pour chaque élément de réalisation (le lien) */
.realisation-item {
    float: left;
    height: 300px; /* Hauteur fixe pour les blocs (ajustez si nécessaire) */
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
    transition: all 0.3s ease-in-out; /* Transition pour hover + zoom */
    display: block;
    text-decoration: none;
    line-height: initial;

    
    
    /* Espacement entre les blocs : Marge équivalente au padding du conteneur */
    margin: 10px; 
    
    /* Bords arrondis */
    border-radius: 8px; /* Ajustez la valeur selon l'effet désiré */
}
/* Style de base pour chaque élément de réalisation (le lien) */
.realisation-item-produit {
    float: left;
    height: auto; /* Hauteur fixe pour les blocs (ajustez si nécessaire) */
    position: relative;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
    transition: all 0.3s ease-in-out; /* Transition pour hover + zoom */
    display: block;
    text-decoration: none;
    line-height: initial;

    
    
    /* Espacement entre les blocs : Marge équivalente au padding du conteneur */
    margin: 10px; 
    
    /* Bords arrondis */
    border-radius: 8px; /* Ajustez la valeur selon l'effet désiré */
}


/* Définition des largeurs spécifiques pour l'affichage */
.realisation-w-2-3 {
    width: calc(66.6666% - 20px); /* 2/3 - (2 * marge) */
}
.realisation-w-1-3 {
    width: calc(33.3333% - 20px); /* 1/3 - (2 * marge) */
}
.realisation-w-1-2 {
    width: calc(50% - 20px); /* 1/2 - (2 * marge) */
}

/* -------------------- Effet de Survol (Overlay) -------------------- */

/* Style de l'overlay bleu */
.realisation-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 72, 128, 0.95);
    opacity: 0; 
    transition: opacity 0.3s ease-out;
    padding: 30px;
    border-radius: 8px;
    
    /* Centrage parfait avec Flexbox */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Affichage et effet de l'overlay au survol */
.realisation-item:hover .realisation-overlay {
    opacity: 1;
}
/* Affichage et effet de l'overlay au survol */
.realisation-item-produit:hover .realisation-overlay {
    opacity: 1;
}
/* Effet de léger zoom sur l'image au survol (Optionnel) */
.realisation-item:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    z-index: 10; 
}
/* Effet de léger zoom sur l'image au survol (Optionnel) */
.realisation-item-produit:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    z-index: 10; 
}

/* -------------------- Styles du Texte dans l'Overlay -------------------- */

.realisation-meta {
    color: #ffffff;
    text-align: center;
    width: 100%;
    max-width: 80%;
}

.realisation-title {
    color: #ffffff !important;
    font-size: 20px;
    margin-bottom: 10px;
    line-height: 1.2;
    font-weight: 600;
}

.realisation-details {
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
    opacity: 0.8;
}

.realisation-separator {
    margin: 0 10px;
}

/* Correction pour les flottants après la boucle */
.clear-float {
    clear: both;
}

/* ==========================================================
   Réactivité (Mobile)
   ========================================================== */
@media screen and (max-width: 767px) {
    .realisations-grid-accueil {
        padding: 5px;
    }
    
    .realisation-w-2-3, 
    .realisation-w-1-3, 
    .realisation-w-1-2 {
        width: calc(100% - 10px); 
        height: 200px; /* NOUVELLE HAUTEUR ajustée pour mobile */
        margin: 5px;
    }
    
    .realisation-item:hover {
        transform: none;
        box-shadow: none;
    }
}

/*
==========================================================================
 Code pour Slider Divi : Texte à gauche, Image pleine largeur à droite
 Classe CSS à ajouter au module : slider-bord-a-bord
==========================================================================
*/

/* 1. On force le conteneur du texte à occuper la moitié gauche */
.slider-bord-a-bord .et_pb_slide_description {
  width: 50% !important; /* Le texte prend 50% de la largeur */
  position: relative !important; /* On annule la position absolue par défaut de Divi */
  
  /* On réinitialise toutes les positions par défaut */
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  
  /* On supprime la largeur maximale par défaut pour qu'il remplisse bien ses 50% */
  max-width: none !important; 
  
  /* On ajoute un espacement intérieur confortable */
  /* Valeurs : Haut, Droite, Bas, Gauche. Ajustez le 8% pour l'alignement */
  padding: 60px 40px 60px 8% !important; 
  
  /* On utilise Flexbox pour centrer verticalement le texte dans le bloc bleu */
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

/* 2. On force l'image de fond (l'image de l'article) à occuper la moitié droite */
.slider-bord-a-bord .et_pb_slide {
  /* On positionne l'image de fond */
  background-size: 50% 100% !important; /* L'image prend 50% de largeur, 100% de hauteur */
  background-position: right center !important; /* L'image est calée à droite */
  background-repeat: no-repeat !important;
  padding: 0 !important; /* On retire tous les paddings de la slide elle-même */
}

/* 3. On s'assure que le contenu ne dépasse pas */
.slider-bord-a-bord .et_pb_container {
  overflow: visible;
}

/* 4. On s'assure que les flèches de navigation restent visibles */
.slider-bord-a-bord .et-pb-slider-arrows a {
  z-index: 10; /* Place les flèches au-dessus des autres éléments */
}




/* ------------------------------------------------------------------
   CODE D'ALIGNEMENT FINAL : Nettoyage Renforcé des Marges
   Classe appliquée à la ligne : .grille-images-fixes
   ------------------------------------------------------------------ */

/* 1. Définir une hauteur minimale pour toutes les colonnes */
.grille-images-fixes .et_pb_column {
    min-height: 450px !important; 
    
    /* Centrage des éléments dans la colonne */
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: flex-start; /* Aligne le contenu en haut */
    padding-top: 20px !important; /* Ajout d'un petit padding en haut pour le décalage visuel */
}

/* 2. Ciblez le conteneur d'image (le cercle) et donnez-lui une taille fixe */
.grille-images-fixes .et_pb_image {
    width: 300px !important; 
    height: 300px !important; 
    max-width: 300px !important; 
    margin: 0 auto 10px auto !important; 
    overflow: hidden; 
    border-radius: 50%; 
}

/* 3. Ciblez l'image elle-même */
.grille-images-fixes .et_pb_column .et_pb_image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; 
    display: block !important;
}

/* 4. NETTOYAGE RENFORCÉ DES MODULES DE TEXTE (TITRES) */
/* Supprime toute marge/padding sur le conteneur du module et la balise de texte interne */
.grille-images-fixes .et_pb_text {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    line-height: 1.2 !important; /* Réduit l'espace entre les lignes */
    text-align: center !important;
}

/* Cible les balises de titre réelles dans le module pour garantir l'uniformité */
.grille-images-fixes .et_pb_module_header, 
.grille-images-fixes .et_pb_text_inner {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}

/* 5. Écrasement des styles inline */
.grille-images-fixes .et_pb_column .et_pb_image img[style] {
    width: 100% !important;
    height: 100% !important;
}

/* ------------------------------------------------------------------
   Réactivité 
   ------------------------------------------------------------------ */
@media only screen and (max-width: 767px) {
    .grille-images-fixes .et_pb_column {
        min-height: 300px !important; 
    }
    .grille-images-fixes .et_pb_image {
        width: 150px !important; 
        height: 150px !important;
        max-width: 150px !important; 
    }
}


.realisations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 25px;
}

.realisation-item {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  cursor: pointer;
}

.realisation-thumb {
  width: 100%;
  padding-top: 70%; /* ratio 16:9 */
  background-size: cover;
  background-position: center;
  position: relative;
  transition: transform 0.4s ease;
}

.realisation-item:hover .realisation-thumb {
  transform: scale(1.05);
}

.realisation-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 91, 187, 0.7); /* bleu opacité 70% */
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.realisation-item:hover .realisation-overlay {
  opacity: 1;
}

.realisation-overlay-content {
  color: #fff;
  padding: 20px;
}

.realisation-title {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 5px;
      font-family: 'Nobel-bold', Helvetica, Arial, Lucida, sans-serif;
text-transform: uppercase;
}

.realisation-lieu {
  font-size: 16px;
  margin: 0;
  opacity: 0.9;
}








/* ==========================================================
   Styles pour les boutons de filtre de la galerie
   ========================================================== */
.filtres-realisations-galerie {
    text-align: center;
    margin-bottom: 40px;
        font-family: 'Nobel-bold', Helvetica, Arial, Lucida, sans-serif;

}
@media only screen and (max-width: 767px) {

.et_pb_number_counter .percent p {
    line-height: 20px!important;
}
.et_pb_number_counter .percent{
    line-height: 20px!important;
}
.et_pb_number_counter {
    line-height: 20px!important;
}

    .filtres-realisations-galerie {
    text-align: left!important;
    align-items: flex-start;
    margin-bottom: 40px;
        font-family: 'Nobel-bold', Helvetica, Arial, Lucida, sans-serif;

}

.percent-value {
text-align: left!important;
line-height: 1em!important;

}.percent {
line-height: 1em!important;
margin:0px!important;
padding:0px!important;

}

}
.filtre-btn-galerie {
    background-color: #f0f0f0;
    border: 1px solid #ddd;
    color: #333;
    padding: 10px 20px;
    margin: 5px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.filtre-btn-galerie:hover {
    background-color: #e0e0e0;
    border-color: #ccc;
}

/* Style du bouton actif */
.filtre-btn-galerie.active {
    background-color: #004880; /* Couleur principale */
    color: #ffffff;
    border-color: #004880;
}


.realisation-item[data-index]:nth-child(n+19) {
    display: none;
}

.load-more-btn {
    background-color: #004880; /* Couleur principale */
    color: #ffffff;
    font-size:22px;
    border:none;
    font-family: 'Nobel-bold', Helvetica, Arial, Lucida, sans-serif;
    padding : 20px;
    margin-right:auto; margin-left:auto;
    margin-top:30px;
}