/*
 Theme Name:   Astra Child
 Theme URI:    http://exemple.com/astra-child/
 Description:  Thème Enfant personnalisé pour Astra-BLA-10_villages
 Author:       BenBen.dev
 Author URI:   https://benbendev.ovh/
 Template:     astra
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         astra
 Text Domain:  astra-child
*/



/* --- Styles de la Grille (Layout) --- */
.colistiers-grid {
    display: grid !important;
    
    /* 1. Définir la largeur fixe de chaque colonne (carte) et ajuster automatiquement le nombre */
    /* minmax(220px, 1fr) est la solution la plus simple pour la réactivité, 
       mais pour une taille fixe de 220px, nous utilisons simplement 220px. */
    grid-template-columns: repeat(auto-fit, 220px); 
    
    /* 2. Centrer le bloc de cartes au milieu de l'écran */
    justify-content: center; 
    
    gap: 30px; /* Espace entre les cartes */
    padding: 20px 0;
}

/* --- Styles de la Card individuelle --- */
.colistier-card {
    width: 250px;
    background: #ffffff;
    /* border: 1px solid #e0e0e0; */
    border-radius: 20px;
   
    text-align: center;
    
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    cursor: pointer; /* Indiquer qu'il est cliquable/survolable */

    /* Essentiel pour le Pop-up flottant et la suppression du Background */
    position: relative !important;
}

.colistier-card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

/* --- NOUVEAU : Le Conteneur de l'Image (Le Cadre) --- */
.colistier-portrait-frame {
    /* Dimensions du cadre visible (doit correspondre à la taille de base de l'image) */
    width: 220px; 
    height: 220px;
    
    /* ESSENTIEL : Masque l'image zoomée qui dépasse */
    overflow: hidden; 
    
    margin: 20px auto 10px auto; 
    border-radius:40px; 
    border: 5px solid #fff;

    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    
    /* Assure que l'image à l'intérieur est centrée si elle n'est pas déjà un carré parfait */
    display: flex; 
    justify-content: center;
    align-items: center;
}
.colistier-portrait-frame:hover {
    border: 5px solid #e5d13f;
}

.colistier-portrait-frame img {
    /* L'image doit prendre toute la taille du cadre au départ (150x150) */
    width: 100%; 
    height: 100%; 
    
    object-fit: cover;
    display: block;
    
    /* ESSENTIEL pour la fluidité */
    transition: transform 0.5s ease-in-out; 
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    /* Retirez ici le border-radius: 50% pour éviter les problèmes d'affichage/surcharges */
    border-radius: 0; 
    border: none;
    margin: 0; /* Les marges sont gérées par le cadre */
}

.colistier-portrait-frame:hover img {
    /* Applique le zoom à l'image */
    transform: scale(1.1); 
}

.colistier-card-visible h3 {
    padding: 15px 10px;
    margin: 0;
    color: #333;
    font-size: 1.2em;
}

/* --- Styles pour l'Effet de Révélation au Survol/Clic --- */

/* Masquer le contenu détaillé par défaut */
/* --- Pop-up Flottant --- */
.colistier-details-hidden {
    /* Retiré overflow: hidden; max-height: 0; et transition sur la hauteur */
    
    /* 1. Flottant : Retirer du flux pour ne pas déformer la carte */
    position: absolute; 
    
/* 2. Position : Placé juste sous la carte */
    top: 100%; /* Le haut du pop-up est au bas de la carte */
    margin-top: -25px; /* Espace de 15px sous la carte */
    
    /* 3. Centrage horizontal */
    left: 50%;
    transform: translateX(-50%);
    
    /* 3. Style de la boîte */
    width: 350px; /* Largeur égale à la carte */
    padding: 15px; 
    background-color: #e5d13f; /* Couleur de la boîte */
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); 

    /* 4. Masquage par défaut */
    opacity: 0;
    pointer-events: none; /* ESSENTIEL : Permet de cliquer à travers lorsqu'il est invisible */
    z-index: 100;
    
    /* Transition pour l'apparition/disparition */
    transition: opacity 0.3s ease, bottom 0.3s ease; 
    
    /* Assurez-vous que le texte est lisible */

}

/* Révéler le contenu détaillé au survol de la carte */
.colistier-card:hover .colistier-details-hidden {
    opacity: 1; 
    pointer-events: auto; /* Rend la boîte cliquable/visible */
    
    /* Fait remonter la boîte lors du survol */
    transform: translateX(-50%) translateY(10px); /* Ajustement de la position au survol */
    /* Note : Si vous voulez que la boîte apparaisse au-dessus de la carte, utilisez 'top: 0;' ou 'top: -50px;' */
}

/* Styles spécifiques pour le texte révélé */
.colistier-details-hidden p {
    margin: 5px 0;
    text-align: left;
}