.posts-listing .uael-post__terms{
    color:var(--ast-global-color-0) !important;
    background-color:white !important;
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size:12px;
}

.posts-listing .uael-post__date{
    color:black !important;
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    font-size:12px;
}

.posts-listing .uael-post__thumbnail img{
    /* height:250px; */
}

/* Ajoute un fallback pour les posts sans thumbnail, option non proposée par défaut par Elementor */
.posts-listing .uael-post__inner-wrap:not(:has(.uael-post__thumbnail))::before {
    content: '';
    display: block;
    width: 100%;
    height:250px;
    background-image: url('https://www.leclaireur-coiffeurs.com/wp-content/uploads/2025/08/eclaireur-fallback.png');
    background-size: contain; /* l'image s'adapte à la largeur */
    background-position: center;
    background-repeat: no-repeat;

}


/* Patcher Elementor qui ne propose pas le query ID pour avoir deux blocs Posts, je suis oblige de passer en CSS 27/09/2025 
    Vraiment pas satisfaisant, à revoir ultérieurement (Bug Elementor voisin référencé récemment sur la Loop Grid)
*/
/* Premier post full width avec image en background */

/* Sinon la gouttière de 20px n'est pas respectée*/

@media (min-width: 769px) {

/* Limiter la hauteur des images de la grille à 250px */
    .posts-listing .uael-post-wrapper:not(:first-of-type) .uael-post__thumbnail {
        height: 250px;
        overflow: hidden;
        background-color: #f5f5f5; /* Fond pour les images en contain */
    }
    
    .posts-listing .uael-post-wrapper:not(:first-of-type) .uael-post__thumbnail img {
        width: 100%;
        height: 100%;
        /* object-fit sera géré dynamiquement par JavaScript */
        object-fit: cover; /* Valeur par défaut */
        transition: object-fit 0.3s ease; /* Transition douce */
    }
/* Fin limitation hauteur */    
    
.posts-listing .uael-post-wrapper:first-of-type {
    flex: 0 0 100%;        /* occupe toute la largeur */
    max-width: 100%;
    height: 600px;
    position: relative;    /* pour positionner le contenu */
    overflow: hidden;
    max-width: calc(100% - 20px); /* Annuler les 10% affectés à chaque article par la grille */
    margin-left: auto; /* Centrage */
    margin-right: auto; /* Centrage */
    margin-bottom:20px !important;
}


/* Mettre l'image en background */
.posts-listing .uael-post-wrapper:first-of-type .uael-post__thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 0;
    
}

/* L'image doit couvrir toute la surface */
.posts-listing .uael-post-wrapper:first-of-type .uael-post__thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}


.posts-listing .uael-post-wrapper:first-of-type .uael-post__title{

    color:white !important;
    font-family: "Playfair Display", sans-serif;
    font-weight: 700;
    font-size:32px;
 
}

.posts-listing .uael-post-wrapper:first-of-type .uael-post__date{
    color:white !important;
}

.posts-listing .uael-post-wrapper:first-of-type .uael-post__terms{
    background-color:var(--ast-global-color-0) !important;
    color:white !important;
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size:12px;
    padding:4px 4px;
}

/* Contenu du post aligné en bas */
.posts-listing .uael-post-wrapper:first-of-type .uael-post__content-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    
    color: #fff;                 /* texte blanc pour contraste */
    z-index: 1;
        /* Dégradé en overlay */
    background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0));
    color: #fff;
    padding:0px 0px 10px 20px !important;
}

} /* End media query globale*/