/* Filtered_post */

.filtered-posts{
    width: 100%;
    max-width: none;
}

/* Début code du carrousel */

.horizontal-carrousel {
    position: relative;
	width: 100vw;
    height: 300px;
	overflow: hidden;
}

.carrousel-container {
    display: flex;
    width: calc(200px * 22 + 1rem * 21); /* Largeur totale */
    flex-direction: row;
    height: 100%;
    animation: slide 50s infinite linear;
	position: relative;
	left: 0;
}

.carrousel-slide {
    width: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 3rem; /* Espacement entre les diapositives */
}

.carrousel-slide img {
    border-radius: 15px;
    width: 200px;
    max-height: 100%;
    display: block;
}

@keyframes slide {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%); /* Ajuster la valeur pour la durée totale */
    }
}

/* Styles pour le conteneur de l'image */
.image-container {
    width: 100%; /* Largeur du conteneur */
    height: 440px; /* Hauteur du conteneur */
    overflow: hidden; /* Masquer les parties débordantes de l'image */
    position: relative; /* Pour positionner l'image à l'intérieur */
}

/* Styles pour l'image redimensionnée */
.resized-image {
    width: 300px; /* Prend toute la largeur du conteneur */
    height: 610px; /* Prend toute la hauteur du conteneur */
    object-fit: cover; /* Couvrir le conteneur tout en préservant le ratio */
    position: absolute; /* Assurer que l'image est positionnée correctement */
    top: 20px; /* Alignement en haut */
    left: 160px; /* Alignement à gauche */
	transform: translateX(-50%) rotate(5deg); /* Inclinaison de l'image et centrage */
}


/* Fin du code du carrousel */

/* Début du code pour les demi-cercles jaunes */

.has-half-circle {
    position: relative;
}

.has-half-circle:before {
	content: "";
	display: block;
	width: 60px;
	height: var(--half-circle-height, 30px);
	background-color: #facc15;
	border-radius: 50px 50px 0 0;
	position: absolute;
	top: -30px;
    left: var(--half-circle-left, 50%);
	transform: translateX(0%);
	z-index: 1;
}

.has-half-circle::after {
    display: none;
}

.has-full-circle {
    position: relative;
}

.has-full-circle:before {
	content: "";
	display: block;
	width: var(--full-circle-height,60px);
	height: var(--full-circle-height, 60px);
	background-color: #facc15;
	border-radius: 50px 50px 50px 50px;
	position: absolute;
	top: -30px;
    left: var(--full-circle-left, 50%);
	transform: translateX(0%);
	z-index: -1;
}

.has-full-circle::after {
    display: none;
}

/* Fin du code pour les demi-cercles jaunes */

/* Début du code pour les deux éléments de texte entourés qui se superposent */

.text-container {
	background-color: black;
	padding: 10px;
	text-align: center;
	margin: 5px auto;
	width: fit-content;
	transform: rotate(-3deg);
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
	border-radius: 15px;
	/* Bordures arrondies */
}

.text-container h2 {
	margin: 0;
	color: white;
}

/* Nouvelle classe pour centrer le texte */
.center-text {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Styles pour les textes individuels */
.text-container-1 {
	background-color: #79b997ff;
	/* Remplacez par la couleur souhaitée */
	position: relative;
	/* Ajouté pour le positionnement */
	z-index: 2;
	/* Ajouté pour l'empilement des éléments */
}

.text-container-2 {
	background-color: rgb(170, 172, 175);
	/* Remplacez par la couleur souhaitée */
	position: relative;
	/* Ajouté pour le positionnement */
	top: -15px;
	/* Ajustez cette valeur pour déplacer le texte vers le bas */
	/* Centre le texte horizontalement */
	z-index: 1;
	/* Ajouté pour l'empilement des éléments */
}

/* Fin */

.flex-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

/* Appliquer un effet de zoom sur l'image de la bannière au survol */
.banner-container {
    position: relative;
    overflow: hidden;
}

.banner-zoom {
    transition: transform 0.3s ease;
}

.banner-container:hover .banner-zoom {
    transform: scale(1.03);
}

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

.custom-icone-on-article {
    width: 150px;
    height: auto; /* Conserve les proportions */
}

.custom-underline {
	position: relative;
	color: black;
/* Couleur du texte */
}

.custom-underline::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 10px;
/* Épaisseur du soulignement */
	background-color: #FFCE5D;
/* Couleur du soulignement */
	z-index: -1;
}



.custom-query-overlay {
	position: relative;
}

.custom-query-overlay .wp-block-post-featured-image {
	position: absolut;
	width: 100%;
}

.custom-query-overlay .wp-block-post-title {
	text-align: center;
/* Centrer le texte */
	position: absolu;
	left: 50%;
	transform: translate(-50%, -200%);
	color: white;
/* Couleur du texte */
	font-size: 18px;
/* Taille de police *
	word-wrap: break-word;
/* Permettre le retour à la ligne */
	white-space: normal;
/* Autoriser les retours à la ligne */
}

.wp-block-button:hover {
	transform: scale(1.05);
/* Grossissement de 5% au survol */
	transition: transform .3s ease;
/* Animation fluide de la transformation */
}


/* Début du code afin d'afficher une image progressive en fond d'un bouton */

/* Button with hiking trace image as background */
.hiking-button {
    position: relative;
    display: inline-block;
    z-index: 1;
    color: #000;
    text-decoration: none;
    overflow: hidden;
    padding: 10px 20px; /* Gardez le padding pour la taille du bouton */
    border-radius: 10px; /* Ajoute des arrondis au bouton lui-même */
}

/* Pseudo-element for background reveal */
.hiking-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-image: url('https://getloomi.com/wp-content/uploads/2024/10/fond_bouton-png.webp'); /* URL de l'image */
    background-repeat: no-repeat;
    background-size: cover; /* Assure que l'image couvre toute la place */
    clip-path: inset(0 100% 0 0); /* Masque l'image à gauche */
    transition: clip-path 3s ease; /* Vitesse d'apparition de 3 secondes */
    z-index: -1; /* Positionner en arrière-plan */
    border-radius: 10px; /* Ajoute des arrondis aux coins de l'image */
}

/* Sur hover, l'image apparaît progressivement de gauche à droite */
.hiking-button:hover::before {
    clip-path: inset(0 0 0 0); /* Révèle l'image complètement */
}



.text-image-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.text-image-container p,
.text-image-container figure {
  flex: 1;
  margin: 0 10px; /* Espace entre les deux éléments */
}

.text-image-container img {
  width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  .text-image-container {
    flex-direction: column;
    align-items: flex-start;
  }

  .text-image-container p,
  .text-image-container figure {
    margin: 0;
  }
}

/* Fin du code afin d'afficher une image progressive en fond d'un bouton */