/* Solution 1: Forcer la largeur du conteneur et des éléments */
.custom-banners {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center;
    gap: 1.5rem !important; 
    justify-content: flex-start !important; /* Changé de center à space-between */
    max-width: 1430px !important;
    width: 100% !important; /* Forcer la largeur complète */
    min-height: 200px !important;
    margin-top: 0;
    box-sizing: border-box !important;
}

/* Conteneur du filtered-posts pour s'assurer qu'il prend toute la largeur */
#filtered-posts {
    width: 100% !important;
    max-width: 1430px !important;
    box-sizing: border-box !important;
}

.banner-item {
    box-sizing: border-box !important;
    overflow: hidden;
    border-radius: 15px;
    position: relative;
    min-height: 200px !important;
    max-height: 500px;
    transition: transform 0.3s ease;
    
    /* Logique de taille selon le nombre d'éléments */
    flex: 1 1 auto !important;
    min-width: 200px !important;
    max-width: 500px !important;
}

/* Logique spécifique selon le nombre d'éléments */
.custom-banners:has(.banner-item:nth-child(1):last-child) .banner-item {
    /* 1 seul élément = prendre 100% mais max 500px */
    flex: 0 0 min(100%, 500px) !important;
}

.custom-banners:has(.banner-item:nth-child(2):last-child) .banner-item {
    /* 2 éléments = 50% chacun moins le gap */
    flex: 0 0 calc(50% - 0.75rem) !important;
}

.custom-banners:has(.banner-item:nth-child(3):last-child) .banner-item {
    /* 3 éléments = 33.33% chacun moins le gap */
    flex: 0 0 calc(33.333% - 1rem) !important;
}

.custom-banners:has(.banner-item:nth-child(4):last-child) .banner-item {
    /* 4 éléments = 25% chacun moins le gap */
    flex: 0 0 calc(25% - 1.125rem) !important;
}

/* Pour 5+ éléments, retour à la logique flexible normale */
.custom-banners .banner-item:nth-child(n+5) ~ .banner-item,
.custom-banners:has(.banner-item:nth-child(5)) .banner-item {
    flex: 1 1 calc(25% - 1.125rem) !important;
}

/* Fallback si :has() n'est pas supporté */
@supports not (selector(:has(*))) {
    .banner-item {
        flex: 1 1 calc(25% - 1.125rem) !important;
        min-width: 200px !important;
    }
    
    /* Utiliser JavaScript pour compter et appliquer des classes */
    .custom-banners.one-item .banner-item { flex: 0 0 min(100%, 500px) !important; }
    .custom-banners.two-items .banner-item { flex: 0 0 calc(50% - 0.75rem) !important; }
    .custom-banners.three-items .banner-item { flex: 0 0 calc(33.333% - 1rem) !important; }
    .custom-banners.four-items .banner-item { flex: 0 0 calc(25% - 1.125rem) !important; }
}

/* Suppression de toutes les règles qui pourraient interférer */
.custom-banners .banner-item {
    width: auto !important; /* Annule la règle width: calc(25% - 15px) */
}

/* Reste du CSS inchangé */
.banner-image {
    position: relative;
}

.banner-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    max-height: 500px;
}

.banner-title {
    position: relative;
    z-index: 1;
}

.post-icon {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 100px;
    height: 100px;
    object-fit: cover;
    z-index: 10;
}

.banner-item p {
    display: none;
}

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

.banner-link {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
}

.banner-image {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    min-height: 200px;
    background-size: cover;
    background-position: center;
    border-radius: 15px;
    overflow: hidden;
}

.banner-title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    color: #fff;
    padding: 10px;
    text-align: center;
    font-family: Inter, sans-serif;
    font-weight: bold;
    font-size: 1.5rem;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    box-sizing: border-box;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
}

.custom-cards-vertical {
	display: flex;
	flex-wrap: wrap; /* Permet aux éléments de passer à la ligne si nécessaire */
	justify-content: center; /* Centre le contenu horizontalement */
	gap: 1.5rem; /* Espace entre les articles */
	max-width: 1100px; /* Assure que le conteneur ne limite pas la largeur des enfants */
	align-items: center; /* Centre le contenu verticalement */
}


@media (max-width: 1100px) {
	.custom-cards-vertical {
		flex-direction: column; /* Affiche les éléments en colonne sur mobile */
		align-items: flex-start; /* Aligne les éléments au début de la colonne */
		align-items: center;
	}
}

.custom-cards-vertical p {
    display: none;
}

.card-item-vertical {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
	width: 325px; /* Largeur fixe */
    height: 360px; /* Hauteur fixe */
}

.card-item-link-vertical {
    text-decoration: none;
    color: inherit;
    display: block;
}

.card-item-vertical:hover {
    transform: scale(1.05);
}

.card-image-vertical {
    height: 200px; /* Ajustez la hauteur selon vos besoins */
    background-size: cover;
    background-position: center;
    margin: 1rem;
	border-radius: 10px;
}

.card-text-vertical {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
	height: 153px;

}

.card-title-vertical {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    text-decoration: none;
    color: #333;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-excerpt-vertical {
    font-size: 1rem;
    color: #666;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}


.custom-cards-article {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	/* Espace entre les articles */
	margin-top: 0;
}

.custom-cards-article p {
    display: none;
}


.card-item {
	display: flex;
	box-sizing: border-box;
	background: white;
	border-radius: 8px;
	overflow: hidden;
	transition: transform 0.3s ease;
	height: 153px;
	/* Transition pour l'effet de survol */
}

.card-item-link {
	text-decoration: none;
	color: inherit;
	display: block;
	/* Permet au lien de couvrir toute la bannière */
	height: 100%;
	/* Ajuste la hauteur pour couvrir toute la bannière */
}

.card-item:hover {
	transform: scale(1.05);
	/* Grossissement de 5% au survol */
}

.card-content {
	display: flex;
	width: 100%;
}

.card-image {
	flex: 2;
	background-size: cover;
	background-position: center;
}

.card-text {
	flex: 3;
	padding: 1rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.card-title {
	font-size: 1.2rem;
	font-weight: 600;
	margin-bottom: 0.5rem;
	text-decoration: none;
	color: #333;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.card-excerpt {
	font-size: 1rem;
	font-weight: 400;
	color: #666;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Début du code pour l'élément "a la une" */

.custom-a-la-une {
	display: flex;
	flex-direction: column;
	max-width: 100%;
}


.a-la-une-item {
	position: relative;
	max-width: 100%;
	border-radius: 15px;
	/* Ajoute des arrondis à l'élément global */
	overflow: hidden;
	transition: transform 0.3s ease;
	/* Transition pour l'effet de survol */
}

.a-la-une-item:hover {
	transform: scale(1.01);
}

.a-la-une-link {
	display: block;
	max-width: 100%;
}

.a-la-une-image {
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	max-width: 100%;
	height: 490px;
	position: relative;
	border-radius: 15px;

}

.a-la-une-image::before {
	border-radius: 15px;
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.3);
}

.a-la-une-content {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 10px;
	color: white;
	text-align: center;
	z-index: 2;
}

.a-la-une-title {
	margin-bottom: 5px;
	font-size: 1.2rem;
	font-weight: 600;
}

.a-la-une-excerpt {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	font-size: 1rem;
	font-weight: 400;
}

/* Fin du code pour l'élément "a la une" */



.wp-block-group.home-card {
    /* flex: 1 1 180px; Ajuste la taille de base des cartes */
	flex-direction: column;
	justify-content: left;
	align-items: start;
	max-width: 450px;
}

/* === Styles spécifiques pour les cartes de stations === */
.station-card .banner-link {
    display: block;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.station-card .station-card-image {
    position: relative;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    border-radius: 15px;
}

.station-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%);
    border-radius: 0 0 15px 15px;
}

.station-card-title {
    color: white;
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 12px 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.station-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.station-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
    color: white;
    background-color: #4B484C;
    backdrop-filter: blur(4px);
}

.badge-icon {
    font-size: 1rem;
}

.badge-duration {
    background-color: rgba(200, 168, 104, 0.9);
}

.badge-location {
    background-color: rgba(111, 111, 111, 0.9);
}

.badge-distance {
    background-color: rgba(111, 111, 111, 0.9);
}

.station-card:hover .station-card-image {
    transform: scale(1.02);
    transition: transform 0.3s ease;
}

/* Responsive pour les banner-item */
@media (max-width: 768px) {
    .wp-block-group.home-cards {
        flex-direction: column;
    }

    .custom-banners {
        flex-direction: column !important;
    }

    .banner-item {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        flex: 1 1 100% !important;
    }

    .station-card .station-card-image {
        min-height: 250px;
    }

    .station-card-title {
        font-size: 1.25rem;
    }

    .station-badge {
        font-size: 0.8rem;
        padding: 5px 10px;
    }
}

.wp-block-group.rating-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Ajustez l'espace entre les cartes si nécessaire */
	
}

.wp-block-group.rating-card {
    flex: 1 1; /*  Ajuste la taille de base des cartes */
	justify-content: left;
	align-items: start;
	max-width: 450px;
	max-height: 450px;
}

@media (max-width: 1000px) {
    .wp-block-group.rating-cards {
        flex-direction: column;
    }
}


/* Code pour les affiches pour les évènements */

/* Styles pour l'affichage des cards évènements (evenements) */
.card-evenement {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem; 
    justify-content: center;
    max-width: 1400px;
    margin-top: 2rem;
	z-index: 0;
}

.evenement-item {
    position: relative; /* Permet le positionnement absolu de l'étiquette */
    width: 300px; /* Largeur fixe pour les affiches */
    height: 533px; /* Hauteur fixe pour les affiches */
    border-radius: 10px;
    overflow: visible; /* Permet à l'étiquette de dépasser */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.evenement-item:hover {
    transform: translateY(-10px); /* Déplacement vers le haut au survol */
}

.evenement-link {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
}

.evenement-image {
    width: 100%;
    height: 100%; /* 80% de la hauteur réservée à l'image */
    background-size: cover;
    background-position: center;
    border-radius: 10px 10px 10px 10px; /* Coins arrondis pour le haut */
}

.evenement-item-blocked {
    position: relative; /* Permet le positionnement absolu de l'étiquette */
    width: 300px; /* Largeur fixe pour les affiches */
    height: 533px; /* Hauteur fixe pour les affiches */
    border-radius: 10px;
    overflow: visible; /* Permet à l'étiquette de dépasser */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.evenement-image-blocked {
    width: 100%;
    height: 100%; /* 80% de la hauteur réservée à l'image */
    background-size: cover;
    background-position: center;
    border-radius: 10px 10px 10px 10px; /* Coins arrondis pour le haut */
    position: relative; /* Nécessaire pour superposer le pseudo-élément */
}

.evenement-image-blocked::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Fond noir avec une opacité de 50% */
    border-radius: 10px; /* Applique le même arrondi qu'au parent */
    pointer-events: none; /* Assure qu'on ne peut pas cliquer à travers */
}


.evenement-etiquette {
    position: absolute;
    top: 15px; /* Décalage vers le haut */
    right: 15px; /* Décalage vers la droite */
    color: #ffffff; /* Couleur du texte */
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    background-color: #ff0000; /* Couleur de fond par défaut */
    z-index: 10; 
	/* transform: rotate(10deg); */
}