/*
 Theme Name: Hello Elementor Child
 Theme URI: https://example.com/
 Description: Thème enfant pour Hello Elementor
 Author: Ton Nom
 Template: hello-elementor
 Version: 1.0.0
*/

/* --- Styles de la Grille et des Éléments --- */

/* Conteneur principal de la grille */
.geoza-reference-grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px; 
    margin-top: 30px;

    /* 💡 CORRECTION : DÉFINITION DE LA LARGEUR ET CENTRAGE */
    max-width: 90%; /* Prend 80% de la largeur du conteneur parent */
    margin-left: auto; /* Centre le bloc automatiquement */
    margin-right: auto; /* Centre le bloc automatiquement */
}

/* Style de chaque article dans la grille */
.geoza-reference-grid-container .reference-item {
    margin: 0; 
    width: 100%;
    box-sizing: border-box;
    
    border: 1px solid #eee;
    border-radius: 2em; 
    padding: 0;
    box-shadow: 0 0px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s;
    display: flex; 
    flex-direction: column;
}

.geoza-reference-grid-container .reference-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Conteneur pour le texte et l'image (APPLIQUE LE PADDING INTERNE) */
.reference-content-wrap {
    /* Marge interne de 5% à gauche/droite */
    padding: 20px 5%; 
    flex-grow: 1; 
    display: flex;
    flex-direction: column;
}

/* Style du TITRE */
.reference-item .reference-title {
    text-align: center;
    font-family: 'Maven Pro', sans-serif; 
    font-size: 2em; 
    color: #009A00; 
    margin: 0 0 15px 0;
    font-weight: bold;
	order: -2; 
	
	/* 💡 CORRECTION ALIGNEMENT : Fixe la hauteur pour deux lignes de texte (environ 2.8em pour 2 lignes) */
    line-height: 1.4em; /* Définit la hauteur d'une ligne */
    min-height: 2.8em; /* Force la hauteur minimale pour 2 lignes (2 * 1.4em) */
    overflow: hidden; /* Cache le texte s'il dépasse accidentellement */
}

/* Conteneur d'image pour maintenir un ratio (ex: 4:3) */
.reference-item .reference-thumbnail {
    margin-bottom: 20px;
    border-radius: 5px;
    overflow: hidden;
    text-align: center;
    width: 100%;
    
    /* Ajout pour forcer le ratio 4:3 pour toutes les images */
    position: relative;
    padding-bottom: 75%; /* 75% = 3/4 (ratio 4:3) */
    height: 0;
}

.reference-item .reference-thumbnail img {
    /* Positionnement absolu pour que l'image s'étire dans le ratio contraint */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; 
    height: 100%;
    object-fit: cover; /* S'assure que l'image couvre l'espace sans se déformer */
}


/* Style de la DESCRIPTION (Extrait) */
.reference-item .reference-description {
    text-align: justify; 
    font-family: 'Maven Pro', sans-serif; 
    font-size: 1.2em; 
    color: #505050; 
    margin-bottom: 20px;
    flex-grow: 1; 
}

/* --- Style du Bouton "En savoir plus" (Plein Largeur comme l'image) --- */

.reference-button-wrap {
    text-align: center;
    margin-top: auto; 
    /* Ajout du padding pour que le bouton soit espacé du bas de l'article (visuel de l'image) */
    padding: 0 5% 20px 5%; /* Padding en bas et latéral pour le conteneur du bouton */
    
    /* Le bouton doit être en dehors de .reference-content-wrap pour que le padding de 5% soit différent */
}

.button-details {
    /* 💡 CORRECTION BOUTON LARGEUR: Prend 70% de l'espace pour reproduire la pleine largeur */
    display: block; 
    width: 70%;
	margin-left: auto; /* Centre le bloc automatiquement */
    margin-right: auto; /* Centre le bloc automatiquement */
    
    padding: 10px 30px;
    text-align: center; 
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease-in-out; 
    
    /* Couleurs et bordures de base */
    background-color: #009A00; 
    /* 💡 CORRECTION COULEUR TEXTE: Force la couleur blanche avec plus de spécificité */
    color: #FFFFFF !important; 
    
    border: 0.2rem solid #009A00 !important; 
    border-radius: 2rem !important; 
    
    /* Polices et taille */
    font-family: 'Stick No Bills', sans-serif; 
    font-size: 1.5em; 
    font-weight: bold;
    white-space: nowrap; 
}

/* Effet au survol (Hover) */
.button-details:hover {
    /* Couleurs inversées au survol */
    background-color: white; 
    color: #009A00 !important; /* Force la couleur verte au survol */
    
    /* Animation "Grow" */
    transform: scale(1.05);
}

/* Assure que l'image et le texte ne sont pas déformés par le lien */
.reference-item a {
    text-decoration: none;
    color: inherit;
    /* Retiré le display: block ici car il est géré par les sélecteurs spécifiques */
}

/* --- Média-queries --- */
@media (max-width: 1024px) {
    .geoza-reference-grid-container {
        grid-template-columns: repeat(2, 1fr); 
    }
}

@media (max-width: 767px) {
    .geoza-reference-grid-container {
        grid-template-columns: 1fr; 
    }
}
/* --- Styles pour le Formulaire de Filtre (Widget Code HTML) --- */

.geoza-filter-form {
    /* 1. Définir une largeur maximale pour éviter qu'il ne s'étende sur tout l'écran */
    max-width: 600px; /* Ajustez cette valeur si vous le souhaitez plus large ou plus étroit */
    width: 100%; /* S'assurer qu'il s'adapte sur mobile */
    
    /* 2. Centrer le bloc sur la page */
    margin-left: auto;
    margin-right: auto;
    
    /* 3. Assurer que les éléments internes sont bien gérés (déjà fait par display:flex) */
    /* display: flex; et gap: 20px; sont déjà dans votre code HTML inline, nous les maintenons */
}

/* Optionnel : Assurer que le conteneur du formulaire est centré */
/* Si le widget Code HTML est dans une section/colonne qui ne centre pas le texte, ajoutez ceci à un sélecteur parent si besoin. */
/* Style spécifique du bouton de réinitialisation */
.reset-button {
    /* Utilise les styles de base du bouton "En savoir plus" (.button-details) */
    /* On peut le rendre un peu plus discret pour ne pas voler la vedette au bouton d'action */
    
    background-color: transparent !important; /* Fond transparent */
	color: #505050 !important; /* Texte gris */
	border-color: #505050 !important; /* Bordure grise */
    
    font-size: 1em; /* Plus petit que le bouton d'article */
    padding: 8px 20px; /* Moins de padding */
    width: auto !important; /* S'adapte au texte, ne prend pas 80% */
}

.reset-button:hover {
    background-color: #EFEFEF !important; /* Léger fond au survol */
    color: #009A00 !important; /* Devient vert au survol */
    border-color: #009A00 !important; /* Bordure verte au survol */
    transform: none; /* Supprime l'animation "grow" pour ce bouton */
}
/* --- Styles de Décorrélation des Boutons --- */

/* 1. Style Spécifique des Boutons de la Grille (70% largeur) */
.grid-details-button {
    display: block; /* Prend toute la largeur de son conteneur */
    width: 70%;
}

.grid-details-button:hover {
    /* Hérite de .button-details:hover */
}

/* 2. Style Spécifique du Bouton de Soumission (Largeur adaptée au texte) */
.filter-submit-button {
    display: inline-block; /* S'adapte à la largeur du texte */
    width: 150px !important; /* Force la largeur automatique */
    font-family: 'Stick No Bills', sans-serif !important; 
		font-size: 1.5em !important; 
	margin: 0;
}

/* 3. Ajustement de la taille de la police du bouton de réinitialisation */
/* Assure que le bouton "Supprimer les filtres" est plus petit */
.reset-button {
    font-family: 'Stick No Bills', sans-serif !important; 
		font-size: 1.5em !important; 
}

/* Optionnel : Assure que les boutons sont centrés dans leur conteneur */
.geoza-filter-form div {
    /* S'assurer que les conteneurs de listes déroulantes n'écrasent pas le centrage */
    width: auto; 
}