/* ==========================================
   INFORMATIONS GENERALES
   ==========================================

border-radius: 50%; pour arrondir une photo en mode rond
z-index =  permet de préciser l'empilement de certains éléments d'une page, c'est-à-dire sur l'axe vertical.

Code couleurs La Parehthese : 
Rose : #cd0b6e
Couleurs du Bandeau : #ef0d3d, #ea5978

Check CSS : https://jigsaw.w3.org/css-validator/

*****************************************************************************************************/
/* ==========================================
   STYLES POUR TOUTES LES PAGES
   ========================================== */
	/* Style pour le scroll smooth */
	html {
		scroll-behavior: smooth;
	}

/* ==========================================
   STYLES POUR BODY
   ========================================== */
	/* Style général */
	body {
		/*font-family: Arial, sans-serif; */
		font-family: 'Open Sans', sans-serif;
		margin: 0;
		padding: 0;
		background: #f4f4f9;
	}

/* ==========================================
   STYLES POUR IFRAME BOOKING ENGINE
   ========================================== */
	#iframeContainer {
		width: 100%;
		max-width: 1200px;
		margin: 20px auto;
		padding: 0 10px;
		box-sizing: border-box;
	}

	#bookingengine {
		width: 100%;
		min-height: 800px;
		max-height: 2000px;
		border: 1px solid #ddd;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}

	/* Responsive pour tablettes */
	@media (max-width: 768px) {
		#iframeContainer {
			padding: 0 5px;
			margin: 15px auto;
		}
		
		#bookingengine {
			min-height: 600px;
			max-height: 1500px;
		}
	}

	/* Responsive pour mobiles */
	@media (max-width: 480px) {
		#iframeContainer {
			padding: 0 3px;
			margin: 10px auto;
		}
		
		#bookingengine {
			min-height: 500px;
			max-height: 1200px;
			border-radius: 5px;
		}
	}

/* ==========================================
   STYLES POUR CONTENU DES PAGES
   ========================================== */

	/* Contenu des pages */
	.content {
		text-align: center;
		margin: 20px;
	}

	.homepage {
		text-align: center; /* Centrer */
		margin: 20px;
		font-family: 'Roboto', sans-serif; /* Appliquer la police Roboto */
		/*font-size: 20px;  Taille du titre */
		text-align: center; /* Centrer */
		color: #333; /* Couleur du titre */
	}
	
	/**** LES PUCES ****/
	/* Permet de centrer aussi les puces */
	ul {
	  text-align: left;
	  display: inline-block;
	}
	/**** FIN DES PUCES ****/
	
	/**** CLASS JOLIE LIENS ****/
	.jolie-lien {
		color: #3498db; /* Couleur principale bleue */
		text-decoration: none; /* Supprime le soulignement */
		font-weight: 600; /* Gras léger */
		font-size: 1.1em; /* Taille de texte légèrement augmentée */
		transition: all 0.3s ease; /* Transition douce pour tous les effets */
	}

	.jolie-lien:hover {
		color: #cd0b6e; /* Change la couleur au survol (Rose) */
		text-decoration: underline; /* Sousligne au survol */
		transform: translateY(-3px); /* Effet de "lévitation" */
	}

	.jolie-lien:active {
		color: #ea5978; /* Change la couleur quand le lien est cliqué */
		transform: translateY(1px); /* Légère descente lors du clic */
	}
	/**** FIN CLASS JOLIE LIENS ****/

	/**** LISTE A PUCE ****/
	/* Suppression des puces par défaut */
	.pretty-list {
		list-style: none;
		padding: 0;
		margin: 0;
		font-family: 'Arial', sans-serif;
	}

	/* Style des éléments de la liste */
	.pretty-list li {
		position: relative;
		padding-left: 30px; /* Espace pour la puce */
		font-size: 16px;
		margin-bottom: 10px;
		line-height: 1.6;
	}

	/* Puce circulaire */
	.pretty-list li::before {
		content: ''; /* Nécessaire pour générer un pseudo-élément */
		position: absolute;
		left: 0; /* Positionne la puce à gauche */
		top: 50%; /* Centré verticalement */
		transform: translateY(-50%); /* Centre parfaitement la puce */
		width: 12px; /* Taille de la puce */
		height: 12px; /* Taille de la puce */
		background-color: #ef0d3d; /* Couleur de la puce */
		border-radius: 50%; /* Rend la puce ronde */
		box-shadow: 0 0 0 3px white; /* Ombre pour un effet de profondeur */
	}

	/* Puce avec une icône (en utilisant Unicode) */
	.pretty-list.icon li::before {
		content: '\2022'; /* Unicode pour une puce classique */
		font-size: 30px; /* Taille de la puce */
		color: #ff5722; /* Couleur de la puce */
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	/* Puce avec une image */
	.pretty-list.image li::before {
		content: '';
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 20px;
		height: 20px;
		background-image: url('https://www.example.com/path/to/your-icon.png'); /* Image pour la puce */
		background-size: cover;
	}
	/**** FIN LISTE A PUCE ****/

	/**** Mise en forme SECTION TEXTE ****/
	/* Style de la section */
	.contenu-texte {
		/*font-family: 'Roboto', sans-serif;*/
		font-family: 'Open Sans', sans-serif;
		font-weight: normal; /* Annule tout style gras */
		background-color: #fff;
		border-radius: 8px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		padding: 20px;
		width: 100%; /* La section prend 100% de la largeur de la page */
		max-width: 1200px; /* Limiter la largeur maximale de la section */
		margin: 0 auto 20px auto; /* Centrer la section et ajouter une marge en bas Le premier 0 correspond à la marge supérieure. Le second auto centre horizontalement l'élément. Le troisième 20px ajoute un espace de 20 pixels en bas entre chaque encart. Le dernier auto centre à nouveau horizontalement. */
		text-align: left; /* Force le texte à gauche */
	}
	
	/* Force l'alignement à gauche dans la classe contenu-texte pour h1 h3 p et Blockquote */
	.contenu-texte h1, 
	.contenu-texte h3, 
	.contenu-texte p, 
	.contenu-texte blockquote {
		text-align: left; /* Forcer l'alignement à gauche pour tous les éléments de texte */
	}

	/* Style du titre */
	.contenu-texte h1 {
		font-size: 2em;
		color: #007BFF;
		margin-bottom: 15px;
	}

	/* Style des paragraphes */
	.contenu-texte p {
		font-size: 1.1em;
		color: #555;
		margin-bottom: 15px;
		font-weight: normal; /* Annule tout style gras */
		/*text-align: justify; Justifier le texte pour un alignement plus propre */
		text-align: left; /* Aligner le texte à gauche */
	}

	/* Ajouter un espacement en bas de la section */
	.contenu-texte p:last-child {
		margin-bottom: 0;
	}
	/**** FIN Mise en forme SECTION TEXTE ****/

	/**** Mise en forme ARTICLE TEXTE ****/
	/* Styles spécifiques pour les articles */
	.articles-section { /* Pour surpasser le body uniquement pour les articles */
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 100vh; /* Hauteur minimale pour centrer verticalement */
		background-color: #f4f4f4; /* Optionnel : couleur de fond différente */
		padding: 20px 0; /* Espacement autour de la section */
	}

	/* Conteneur des articles */
	.articles-container {
		display: flex; /* La propriété display: flex aligne les deux articles côte à côte. */
		flex-wrap: wrap; /* Permet de gérer les écrans plus petits flex-wrap: wrap permet aux articles de s'empiler verticalement si l'espace est insuffisant (comme sur des écrans étroits). */ 
		justify-content: center; /* Centre les articles horizontalement justify-content: center; : Centre les articles horizontalement, même lorsqu'il y a moins de 2 articles. */
		width: 90%;
		max-width: 1200px; /* Largeur maximale pour limiter la taille */
		gap: 20px; /* Espace entre les articles gap: 20px ajoute de l'espace entre les deux articles. */ 
		box-sizing: border-box;
		padding: 10px; /* Ajoute un peu d'espace autour du conteneur */
	}

	/* Style des cartes d'article */
	.article-card {
		background-color: white;
		border-radius: 8px;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		flex: 1 1 calc(45%); /* Largeur de 45% pour deux articles côte à côte */
		max-width: 500px; /* Largeur maximale pour éviter des articles trop larges */
		padding: 20px;
		box-sizing: border-box;
		text-align: left;
		min-width: 300px; /* Évite que les articles deviennent trop étroits */
	}

	/* Titres et contenu */
	.article-title {
		font-size: 24px;
		color: #333;
		margin-bottom: 10px;
	}

	.article-date {
		font-size: 14px;
		color: #888;
		margin-bottom: 20px;
	}

	.article-content p {
		font-size: 16px;
		color: #555;
		line-height: 1.6;
	}

	.read-more {
		display: inline-block;
		font-size: 16px;
		color: #007bff;
		text-decoration: none;
		margin-top: 10px;
	}

	.read-more:hover {
		text-decoration: underline;
	}
	
	/* Affichage Responsive specifique TABLETTE et Certains Mobiles */
	@media (max-width: 768px) {
		/* Optimisation du conteneur principal */
		.content {
			margin: 10px 5px; /* Réduit les marges latérales */
		}
		
		/* Optimisation contenu-texte */
		.contenu-texte {
			padding: 15px 10px;
			margin: 0 5px 15px 5px; /* Marges latérales réduites */
		}
		
		.contenu-texte p {
			font-size: 1em;
			line-height: 1.6;
		}

		/* Responsive Design pour les articles-card */
		.article-card {
			flex: 1 1 100%; /* Les articles prennent 100% de la largeur sur petits écrans */
		}
		/* FIN Responsive Design pour les articles-card */	
	}

	/* Affichage Responsive specifique Mobiles avec petit écran */
	@media (max-width: 480px) {
		.content {
			margin: 5px 3px; /* Encore plus compact */
		}

		.contenu-texte {
			padding: 12px 8px;
			margin: 0 3px 12px 3px;
		}	
	}
	/**** FIN Mise en forme ARTICLE TEXTE ****/
	

	/**** CSS pour Description Sommaire en haut des pages ****/
	.summary-card {
		background-color: #ffffff;
		border-radius: 10px;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		padding: 30px 40px;  /* Plus de padding pour un aspect plus aéré */
		width: 80%;  /* Largeur de l'encart en pourcentage */
		max-width: 900px;  /* Largeur maximale pour ne pas trop s'étirer */
		text-align: center;
		margin: 20px auto;  /* Centrage avec marge autour */
		transition: transform 0.3s, box-shadow 0.3s;
		/* position: relative;*/
		/* top: 10vh;  /* Positionnez l'encart vers le haut de la page */
	}

	.summary-card:hover {
		transform: translateY(-5px);
		box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
	}

	.summary-card h1 {
		font-size: 1.5em;
		color: #333333;
		margin-bottom: 15px;
	}

	.summary-card p {
		font-size: 1em;
		color: #666666;
		line-height: 1.5;
		margin-bottom: 20px;
	}

	.cta-button {
		display: inline-block;
		padding: 10px 20px;
		background-color: #0078d7;
		color: #ffffff;
		text-decoration: none;
		border-radius: 5px;
		font-size: 1em;
		transition: background-color 0.3s;
	}

	.cta-button:hover {
		background-color: #005bb5;
	}
	
	/* Affichage Responsive specifique TABLETTE et Certains Mobiles */
	@media (max-width: 768px) {	
		/* Summary card optimisé */
		.summary-card {
			padding: 20px 15px; /* Réduit le padding latéral */
			width: 90%; /* Au lieu de 80% */
			margin: 15px auto;
		}
		
		.summary-card h2 {
			font-size: 1.3em;
		}
		
		.summary-card p {
			font-size: 0.95em;
			line-height: 1.5;
		}
	}
	
	/* Affichage Responsive specifique Mobiles avec petit écran */
	@media (max-width: 480px) {
		.summary-card {
			width: 95%;
			padding: 15px 10px;
		}
	}
	/**** FIN CSS pour Description Sommaire en haut des pages ****/

	/**** CHANGE TAILLE ET COULEUR de certaines EMOTICONES ISSU DE https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css ****/
	.custom-sun {
		font-size: 3em; /* Augmente la taille de l'icône du soleil */
		color: #ffcc00; /* Change la couleur du soleil */
	}

	.custom-mountain {
		font-size: 2.5em; /* Augmente la taille de l'icône de la montagne */
		color: #2e8b57; /* Change la couleur de la montagne */
	}
	
	.custom-bullhorn {
		font-size: 2.5em; /* Augmente la taille de l'icône megaphone */
		color: #FF0000; /* Change la couleur de la montagne */
	}
	
	.custom-map {
		font-size: 2.5em; /* Augmente la taille de l'icône map */
		/*color: #FF0000; Change la couleur de la montagne */
	}
	/**** FIN CHANGE TAILLE ET COULEUR de certaines EMOTICONE ****/

/* ==========================================
   STYLES POUR IFRAME GOOGLE MAPS ET METEO RESPONSIVE
   ========================================== */
	/* Conteneur pour centrer les iframes */
	iframe {
		max-width: 100%;
		height: auto;
	}

	/* Google Maps responsive */
	iframe[src*="google.com/maps"] {
		width: 100%;
		max-width: 600px;
		height: 450px;
		display: block;
		margin: 0 auto;
	}

	/* Widget météo responsive */
	iframe[name="CW2"] {
		width: 100%;
		max-width: 318px;
		height: 318px;
		display: block;
		margin: 0 auto;
	}

	/* Affichage Responsive specifique TABLETTE et Certains Mobiles */
	@media (max-width: 768px) {
		/* Google Maps sur tablette */
		iframe[src*="google.com/maps"] {
			width: 100%;
			height: 350px;
		}
		
		/* Widget météo sur tablette */
		iframe[name="CW2"] {
			width: 100%;
			max-width: 300px;
			height: 350px; /* Augmenté pour afficher 4 jours */
		}
	}

	/* Affichage Responsive specifique Mobiles avec petit écran */
	@media (max-width: 480px) {
		/* Google Maps sur mobile */
		iframe[src*="google.com/maps"] {
			width: 100%;
			height: 300px;
			margin: 10px auto;
		}
		
		/* Widget météo sur mobile */
		iframe[name="CW2"] {
			width: 100%;
			max-width: 280px;
			height: 380px; /* Augmenté pour éviter la troncature */
		}
	}

/* ==========================================
   STYLES POUR MENU DU SITE INDEX.PHP
   ========================================== */
	/* Menu principal */
	.menu {
		display: flex;
		justify-content: center;
		/* background: linear-gradient(45deg, #06036e, #2e28f1);*/
		background: linear-gradient(45deg, #36353b, #75747b);
		padding: 15px 0; /* Augmenter le padding pour donner plus d'espace */
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		width: 100%; /* Utilise toute la largeur disponible */
		/*max-width: 1200px; /* Limite la largeur à 1200px pour les grands écrans */
		/* margin: 0 auto; /* Centrer le menu */
		position: relative;
	}

	/* Les liens du menu */
	.menu a {
		color: white;
		text-decoration: none;
		margin: 0 14px;
		font-size: 16px;
		padding: 12px 25px;
		border-radius: 5px;
		transition: all 0.3s ease;
	}

	/* Animation de survol */
	.menu a:hover {
		transform: scale(1.1);
	}

	/* Le bouton hamburger */
	.hamburger {
		display: none;
		flex-direction: column;
		justify-content: space-between;
		width: 40px;
		height: 25px;
		background-color: transparent;
		border: none;
		cursor: pointer;
	}

	.hamburger div {
		width: 40px;
		height: 4px;
		background-color: white;
		border-radius: 5px;
	}

	/* Texte "Menu" */
	.menu-text {
		color: white;
		font-size: 18px;
		font-weight: 700;
		margin-left: 10px; /* Espace entre l'icône et le texte */
		display: none; /* Cacher sur mobile, affiché sur desktop */
	}

	/* Menu déroulant (caché par défaut) */
	.menu-links {
		display: flex;
		flex-wrap: wrap; /* ✅ permet de passer les liens à la ligne */
		justify-content: center;
	}

	/* Menu mobile - caché par défaut */
	.menu-links.mobile {
		display: none;
		flex-direction: column;
		position: absolute;
		top: 60px; /* Décalage en dessous du menu principal */
		left: 0;
		width: 100%;
		background: #36353b; /* Couleur menu déroulé */
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	}

	.menu-links.mobile a {
		margin: 10px 0;
		padding: 12px;
		text-align: center;
	}

	/* Affichage Responsive specifique TABLETTE et Certains Mobiles */
	@media (max-width: 768px) {
		.menu {
			justify-content: space-between;
			z-index: 999; /* Plus grand que les autres éléments pour qu'il s'affiche devant tout */
			position: relative; /* ou fixed/absolute selon le comportement souhaité Les z-index fonctionnent uniquement si l'élément ou son parent est positionné (position: relative;, absolute;, ou fixed; */
		}

		/* Afficher le bouton hamburger */
		.hamburger {
			all: unset; /* Supprime les styles par défaut du bouton */
			display: flex;
			flex-direction: column; /* Aligner les barres verticalement */
			justify-content: space-between; /* Espacer les barres de manière égale */
			height: 22px; /* Hauteur totale de l'icône */
			width: 40px; /* Largeur de l'icône */
			cursor: pointer; /* Change le curseur pour indiquer que c'est cliquable */
		}
		
		/* Style des barres de l'icône hamburger */
		.hamburger .bar {
			display: block; /* S'assure qu'elles existent */
			width: 100%;
			height: 4px; /* Hauteur des barres */
			background-color: white !important; /* Couleur des barres */
			border-radius: 5px;
		}
		
		/* Afficher le texte "Menu" sur mobile */
		.menu-text {
			display: inline-block;
			color: white;
			font-size: 18px;
			font-weight: 700;
			margin-left: 10px;
		}

		/* Cacher les liens sur mobile */
			.menu-links {
				display: none;
			}
		/* FIN Cacher les liens sur mobile */

		/* Afficher les liens du menu quand le bouton hamburger est activé */
			.menu-links.mobile.open {
				display: flex;
				flex-direction: column; /* Pour aligner les liens verticalement */
				gap: 10px; /* Espacement entre les liens */
				position: absolute;
				top: 100%;
				left: 0;
				background-color: #333; /* Fond sombre pour le menu */
				padding: 20px;
				width: 100%; /* Assure que le menu prend toute la largeur */
			}
		/* FIN Afficher les liens du menu quand le bouton hamburger est activé */
	}

/* ==========================================
   STYLES POUR MISE EN FORME DES BLOCKQUOTE
   ========================================== */
	blockquote {
		font-style: italic;
		color: #555;
		margin: 20px 0;
		padding-left: 20px;
		border-left: 5px solid #ccc;
	}

	blockquote:before {
		/*content: "“";*/ /* Ajout d'un guillemet ouvrant */
		content: "\201C"; /* Ajout d'un guillemet ouvrant " */
		font-size: 2rem;
		color: #ccc;
		position: absolute;
		margin-left: -10px;
	}

/* ==========================================
   STYLES POUR IMAGE HEADER RESPONSIVE
   ========================================== */
	/**** IMAGE HEADER RESPONSIVE ****/
	/* Image en haut */
	.header-image {
		width: 100%; /* L'image prend toute la largeur disponible */
		max-width: 400px; /* Largeur maximale pour les grands écrans de base 1200*/
		height: auto; /* Conserve les proportions de l'image */
		display: block; /* Supprime les marges par défaut autour de l'image */
		margin: 0 auto; /* Centrer l'image */
	}
	
	/* Affichage Responsive specifique TABLETTE et Certains Mobiles */
	@media (max-width: 768px) {
		/* Optionnel : Media Queries pour ajuster la taille sur mobile */
		.header-image {
			width: 60%; /* Réduit la taille à 90% de la largeur de l'écran */
			max-width:300px; /* Limite la largeur à 800px */
		}
		/* FIN Optionnel : Media Queries pour ajuster la taille sur mobile */
	}

/* ==========================================
   STYLES POUR TITRE HEADER SOUS IMAGE
   ========================================== */
	/* Titre sous l'image */
	.site-title {
		/*font-family: 'Roboto', sans-serif; /* Appliquer la police Roboto */
		font-family: 'Indie Flower', cursive;
		font-size: 24px; /* Taille du titre */
		letter-spacing: .10em;
		/* text-shadow: 10px 5px 5px #767676; /* Rajoute ombrage */
		font-display: swap;
		text-align: center; /* Centrer le titre */
		margin-top: 20px; /* Ajouter un espace au-dessus du titre */
		color: #333; /* Couleur du titre */
	}

/* ==========================================
   STYLES POUR POPUP 
   ========================================== */
	/* Style de la pop-up */
	.popup {
		display: none; /* Cachée par défaut */
		position: fixed;
		bottom: 20px;
		right: 20px;
		width: 280px;
		background: #fffae6;
		color: #333;
		padding: 15px;
		border-radius: 10px;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
		animation: fadeIn 0.5s ease-in-out;
		font-family: Arial, sans-serif;
		z-index: 999; /* Plus grand que les autres éléments pour qu'il s'affiche devant tout */
	}

	/* Animation d’apparition */
	@keyframes fadeIn {
		from { opacity: 0; transform: translateY(10px); }
		to { opacity: 1; transform: translateY(0); }
	}

	/* Contenu de la pop-up */
	.popup-content {
		font-size: 16px;
		text-align: center;
		position: relative;
	}

	/* Bouton de fermeture bien positionné */
	.close-btn {
		position: absolute;
		top: -50px;
		right: -30px;
		width: 30px;
		height: 30px;
		background: #ff5c5c;
		color: white;
		font-size: 20px;
		font-weight: bold;
		text-align: center;
		border-radius: 50%;
		cursor: pointer;
		line-height: 30px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
		transition: 0.3s;
		border: 2px solid white;
	}

	.close-btn:hover {
		background: #ff2e2e;
	}

/* ==========================================
   STYLES POUR SECTIONS pour créer article avec image 
   ========================================== */
	/* Style général pour les sections */
	.section {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20px;
		margin: 20px 0;
		background: #ffffff;
		border-radius: 10px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19);
		transition: transform 0.3s, box-shadow 0.3s;
	}

	/* Ajout d'un effet au survol */
	.section:hover {
		transform: translateY(-5px);
		box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 12px 24px rgba(0, 0, 0, 0.3);
	}

	/* Style pour les éléments de texte */
	.section-text {
		width: 50%;
		font-size: 14px;
		line-height: 1.6;
	}
	/* Style pour les images */
	.images {
		width: 45%;
		display: flex;
		justify-content: center;
		gap: 10px;
	}
	.images img {
		width: 100%; /* Ajuste l'image à la largeur de son conteneur */
		height: auto; /* Conserve les proportions */
		max-width: 200px; /* Limite la taille des images */
		border-radius: 10px; /* Coins arrondis */
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
	}
	/* Inverser l'ordre pour la deuxième section */
	.reverse {
		flex-direction: row-reverse;
	}

	/* Styles pour la fenêtre modale pour afficher les photos en grand */
	.modal {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.8);
		justify-content: center;
		align-items: center;
		z-index: 1000;
	}
	.modal img {
		max-width: 90%;
		max-height: 90%;
		border-radius: 10px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
	}
	.modal:active {
		display: none;
	}

	/* Affichage Responsive specifique TABLETTE et Certains Mobiles */
	@media (max-width: 768px) {
		/* Special pour les sections en mode smartphone */
		.section {
			flex-direction: column;
			/*text-align: center;*/ /* Aligne le texte au centre */
			/*text-align: left; /* Alignez à gauche pour éviter trop de centrage */
			/*padding: 5px;*/ /* Marge à l'intérieur de la bordure d'un élément de base 15px*/
			padding: 15px 10px; /* Réduit le padding (au lieu de 5px) */
			margin: 15px 5px; /* Ajoute marge latérale réduite */
		}
	/* FIN Special pour les sections en mode smartphone */

	/* Style pour les éléments de texte */
		.section-text {
			width: 100%;
			font-size: 15px;
			margin: 5px 0; /* Réduire les marges verticales */
			padding: 0; /* Supprime tout padding superflu */
			line-height: 1.6; /* Espacement entre les lignes meilleure lisibilité */
		}
		
		/* Titres dans les sections */
		.section-text h2 {
			font-size: 1.3em; /* Réduit la taille sur mobile */
			margin-bottom: 12px;
			line-height: 1.3;
		}
		
		/* Paragraphes dans les sections */
		.section-text p {
			margin-bottom: 12px;
			text-align: left; /* Force l'alignement à gauche */
		}
		
		/* Optimisation des listes à puces */
		.section-text ul.pretty-list {
			margin: 10px 0;
			padding-left: 0; /* Supprime le padding par défaut */
		}
		
		.section-text ul.pretty-list li {
			padding-left: 25px; /* Réduit de 30px à 25px */
			margin-bottom: 8px;
			font-size: 14px;
		}
		
		.text, .images {
			width: 100%;
		}
		
		/* Images dans les sections */
		.images {
			width: 100%;
			gap: 10px;
			flex-direction: row; /* Images côte à côte si possible */
			justify-content: center;
		}
		
		.images img {
			max-width: 48%; /* Deux images côte à côte */
			height: auto;
		}
		/* FIN Style pour les éléments de texte */
	}
	
	/* Affichage Responsive specifique Mobiles avec petit écran */
	@media (max-width: 480px) {
		.section {
			padding: 12px 8px;
			margin: 12px 3px;
		}
		
		.section-text {
			font-size: 14px;
		}
		
		.section-text h2 {
			font-size: 1.2em;
			margin-bottom: 10px;
		}
		
		.text {
			font-size: 16px;
		}
		
		/* Images en colonne sur très petits écrans */
		.images {
			flex-direction: column;
		}
		
		.images img {
			max-width: 100%; /* Une image par ligne */
		}

	}

/* ==========================================
   STYLES POUR BANDEAU RESERVATION PAGE RESERVATION CALENDRIER
   ========================================== */
	.bandeauresa {
		background: linear-gradient(90deg, #ef0d3d, #ea5978);
		color: white;
		padding: 20px;
		text-align: center;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	}
	.bandeauresa h1 {
		margin: 0;
		font-size: 24px;
	}
	.bandeauresa-buttons {
		display: flex;
		gap: 15px;
	}

	/* Nouveau bouton de réservation avec dégradé violet */
	.btn-reservation {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		padding: 14px 32px;
		background: linear-gradient(135deg, #6a11cb, #9b4dca, #c471ed); /* Dégradé violet */
		color: white;
		text-decoration: none;
		border-radius: 50px; /* Bouton arrondi */
		font-size: 18px;
		font-weight: bold;
		transition: all 0.4s ease;
		box-shadow: 0 4px 15px rgba(106, 17, 203, 0.4);
		border: 2px solid rgba(255, 255, 255, 0.3);
		text-transform: uppercase;
		letter-spacing: 1px;
	}
	.btn-reservation:hover {
		background: linear-gradient(135deg, #8e2de2, #b565d8, #d891ef); /* Violet plus clair au survol */
		transform: translateY(-3px) scale(1.05);
		box-shadow: 0 6px 25px rgba(106, 17, 203, 0.6);
		border-color: rgba(255, 255, 255, 0.5);
	}
	
	.btn-reservation:active {
		transform: translateY(-1px) scale(1.02);
		box-shadow: 0 4px 15px rgba(106, 17, 203, 0.5);
	}
	/* FIN Nouveau bouton de réservation avec dégradé violet */
	/* Anciens styles (à garder pour compatibilité si besoin) */
	.bandeauresa-buttons a:not(.btn-reservation) {
		text-decoration: none;
		color: white;
		background-color: #444343;
		padding: 10px 20px;
		border-radius: 5px;
		font-size: 16px;
		transition: background-color 0.3s ease;
	}
	.bandeauresa-buttons a:not(.btn-reservation):hover {
		background-color: #E64A19;
	}
	/* FIN Anciens styles (à garder pour compatibilité si besoin) */

	/* Affichage Responsive specifique TABLETTE et Certains Mobiles */
	@media (max-width: 768px) {
		/* BANDEAU RESERVATION LIENS POUR MOBILE */
			.bandeauresa {
				flex-direction: column; /* Les éléments s'empilent les uns sur les autres */
				align-items: center;
			}

			.bandeauresa h1 {
				font-size: 20px; /* Réduction de la taille du titre sur mobile */
				text-align: center; /* Centrer le titre */
			}

			.bandeauresa-buttons {
				gap: 10px; /* Réduire l'espacement entre les boutons */
			}

			/* Bouton de réservation responsive */
			.btn-reservation {
				font-size: 16px;
				padding: 12px 24px;
				width: auto;
				max-width: 90%;
			}
			
			/* Ancien des 3 botons qu'on garde au cas où */
			.bandeauresa-buttons a:not(.btn-reservation) {
				font-size: 14px; /* Réduire la taille des boutons */
				padding: 8px 15px; /* Réduire le padding des boutons */
			}
		/* FIN BANDEAU RESERVATION LIENS POUR MOBILE */
	}

/* ==========================================
   STYLES POUR PANELS LIENS DE RESERVATION DANS CALENDRIER
   ========================================== */
	/* Tableau liens de réservations */
		.booking-sites {
		  margin: 2rem auto;
		  max-width: 1200px;
		  text-align: center;
		  padding: 0 1rem;
		}

		.booking-sites h2 {
		  font-size: 1.8rem;
		  color: #3e3b37;
		  margin-bottom: 2rem;
		}

		.booking-group {
		  margin-bottom: 2.5rem;
		}

		.booking-group h3 {
		  color: #3e3b37;
		  font-size: 1.3rem;
		  margin-bottom: 1rem;
		  text-transform: uppercase;
		  letter-spacing: 0.05em;
		}

		.booking-row {
		  display: flex;
		  flex-wrap: wrap;
		  justify-content: center;
		  gap: 1rem;
		}

		.booking-cell {
		  flex: 1 1 calc(20% - 1rem);
		  min-width: 100px; /* Réduit de 140px à 100px */
		  max-width: 130px; /* Réduit de 180px à 130px */
		  background-color: #640375;
		  border-radius: 16px;
		  padding: 0.8rem 0.4rem;  /* Réduit de 1rem 0.5rem à 0.8rem 0.4rem */
		  text-decoration: none;
		  color: white;
		  transition: transform 0.2s ease, background-color 0.2s ease;
		  display: flex;
		  flex-direction: column;
		  align-items: center;
		}

		.booking-cell img {
		  width: 45px;  /* Réduit de 60px à 45px */
		  height: auto;
		  margin-bottom: 0.5rem;
		  transition: width 0.2s ease;
		}

		.booking-cell span {
		  font-weight: bold;
		  font-size: 0.85rem;  /* Réduit de 0.95rem à 0.85rem */
		  transition: font-size 0.2s ease;
		}

		.booking-cell:hover {
		  background-color: #d504fa;
		  transform: translateY(-4px);
		}
		
		/* Affichage Responsive specifique TABLETTE et Certains Mobiles */
		@media (max-width: 768px) {
			/* Tableau réservation */
			.booking-cell {
				flex: 1 1 calc(45% - 1rem);
				max-width: 120px;  /* Ajout d'une limite sur tablette */
			}
			.booking-cell img {
				width: 40px;  /* Réduit de 50px à 40px */
			}

			.booking-cell span {
				font-size: 0.8rem;  /* Réduit de 0.9rem à 0.8rem */
			}
			/* FIN Tableau réservation */
		}

		/* Affichage Responsive specifique Mobiles avec petit écran */
		@media (max-width: 480px) {
			/* Tableau réservation */
			.booking-cell {
				flex: 1 1 calc(48% - 0.5rem);
				padding: 0.6rem 0.3rem;  /* Réduit de 0.8rem 0.4rem */
				max-width: 100px;  /* Ajout d'une limite sur mobile */
			}

			.booking-cell img {
				width: 35px;  /* Réduit de 42px à 35px */
			}

			.booking-cell span {
				font-size: 0.75rem;  /* Réduit de 0.8rem à 0.75rem */
			}
			/* FIN Tableau réservation */
		}

/* ==========================================
   STYLES POUR CALENDRIER DANS PAGE RESERVATION 
   ========================================== */
	/* POUR CALENDRIER DANS PAGE RESERVATION */
	/*#calendar {
		max-width: 100%;
		margin: 0 auto;
		height: 80vh;*/ /* Sur mobile, limiter la hauteur à 80% de la hauteur de l'écran */
	/*}*/
	#calendar {
		max-width: 100%;
		margin: 0 auto 20px auto; /* ✅ Marge en bas ajoutée */
		height: auto !important;  /* ✅ Hauteur automatique */
	}
	/* Pour afficher la legende */
	/*#calendar-legend {
		margin: 15px auto;
		max-width: 900px;
		display: flex;
		gap: 15px;
		justify-content: center;
		font-size: 14px;
	}*/
	
	#calendar-legend {
		margin: 20px auto 15px auto;
		max-width: 900px;
		display: flex;
		gap: 15px;
		justify-content: center;
		font-size: 14px;
		flex-wrap: wrap;  /* ✅ Permet le retour à la ligne */
		padding: 10px;    /* ✅ Empêche de toucher les bords */
	}

	#calendar-legend span {
		display: flex;
		align-items: center;
		gap: 6px;
	}

	#calendar-legend i {
		width: 14px;
		height: 14px;
		display: inline-block;
		border-radius: 3px;
	}

	.zone-a { background: #4CAF50; }
	.zone-b { background: #2196F3; }
	.zone-c { background: #FF9800; }
	.ferie  { background: #7518CC; }
	
	/* Vacances scolaires : texte en bas de la cellule */
	.fc-daygrid-event.vacances-event {
		margin-top: auto !important;
	}

	/*.fc-daygrid-day-frame {
		display: flex;
		flex-direction: column;
	}*/

	/*.fc-daygrid-day-events {
		margin-top: auto;
	}*/

	/* Style texte vacances */
	.vacances-event .fc-event-title {
		/*font-size: 0.75em;*/
		font-size: 0.85em;
		text-align: center;
		/*opacity: 0.95;*/
		opacity: 0.95;
	}


	/* Réduire l'épaisseur des événements du calendrier (vacances et jours fériés) */
	.fc-daygrid-event.vacances-event,
	.fc-daygrid-event.ferie-event {
		/*min-height: 14px !important;*/    /* Hauteur minimale de la barre */
		/*line-height: 14px !important;*/   /* Hauteur de ligne pour le texte */
		min-height: 10px !important;    /* Hauteur minimale de la barre */
		line-height: 10px !important;   /* Hauteur de ligne pour le texte */
		padding: 1px 2px !important;    /* Réduit le padding vertical et horizontal */
		font-size: 0.65em;              /* Taille du texte */
		opacity: 0.85;                   /* Légère transparence */
	}

	/* Option : masquer le texte si tu veux juste la barre */
	.fc-daygrid-event.vacances-event .fc-event-title,
	.fc-daygrid-event.ferie-event .fc-event-title {
		line-height: 1em;               /* texte bien centré */
	}

	/* Ajuster la zone du jour pour que la barre fine soit bien en bas */
	.fc-daygrid-day-frame {
		display: flex;
		flex-direction: column;
	}

	.fc-daygrid-day-events {
		margin-top: auto;
	}

	/* Si on veut juste barres de vacance sans texte */
	/*.vacances-event .fc-event-title {
		display: none;
	}

	.vacances-event:hover .fc-event-title {
		display: block;
	}*/
	/* Fin Legende */
	
	/* Pour Afficher le Toggle */
	.calendar-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12px;
		margin-bottom: 10px;
		font-size: 14px;
	}

	/* SWITCH Toggle */
	.switch {
		position: relative;
		width: 46px;
		height: 24px;
	}

	.switch input {
		display: none;
	}

	.slider {
		position: absolute;
		cursor: pointer;
		background-color: #ccc;
		border-radius: 24px;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		transition: 0.3s;
	}

	.slider:before {
		content: "";
		position: absolute;
		height: 18px;
		width: 18px;
		left: 3px;
		bottom: 3px;
		background-color: white;
		border-radius: 50%;
		transition: 0.3s;
	}

	.switch input:checked + .slider {
		background-color: #4CAF50;
	}

	.switch input:checked + .slider:before {
		transform: translateX(22px);
	}
	/* Fin du Toggle */

	/* Affichage Responsive specifique TABLETTE et Certains Mobiles */
	@media (max-width: 768px) {
		/* CALENDRIER VUE MOBILE */
		/*#calendar {
		height: 60vh; /* Sur les petits écrans, ajuster la hauteur du calendrier */
		/*}*/
		#calendar {
			height: auto !important;  /* ✅ */
			margin-bottom: 20px;      /* ✅ */
			padding: 0 5px;           /* ✅ */
		}
		
		#calendar-legend {
			font-size: 12px;  /* ✅ Plus petit sur mobile */
			gap: 10px;
			margin: 15px 10px;
		}
		/* CALENDRIER VUE MOBILE */
	}
	
	/* Affichage Responsive specifique Mobiles avec petit écran */
	@media (max-width: 480px) {
		#calendar-legend {
			font-size: 11px;
			flex-direction: column;  /* ✅ Vertical sur petit mobile */
			align-items: flex-start;
		}
	}

/* ==========================================
   STYLES POUR MOTEUR RESERVATION PAGE CALENDRIER
   ========================================== */
	/**** MOTEUR DE RESERVATION FORMULAIRE ****/
	/* Conteneur principal */
	#bookingContainer {
		max-width: 1200px;
		margin: 0 auto;
		padding: 20px;
		background-color: #d6d5d4;
		border-radius: 8px;
	}

	#formContainer {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		align-items: center;
	}

	/* Formulaire avec Grid */
	#bookingForm {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
		align-items: end;
	}

	/* Groupes d'inputs */
	.inputGroup {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.inputGroup label {
		display: block;
		margin-bottom: 5px;
		font-weight: bold;
	}

	/* Inputs et selects */
	.inputGroup input[type="date"],
	.inputGroup select {
		width: 100%;
		padding: 12px 15px;
		font-size: 16px;
		border-radius: 8px;
		border: 2px solid #ccc;
		background-color: #fff;
		transition: all 0.3s ease;
	}

	.inputGroup input[type="date"]:focus,
	.inputGroup select:focus {
		outline: none;
		border-color: #f3555f;
		box-shadow: 0 0 0 3px rgba(243, 85, 95, 0.1);
	}

	/* Bouton de soumission */
	#bookingForm button[type="submit"] {
		grid-column: 1 / -1;
		background: linear-gradient(135deg, #f3555f 0%, #f13275 100%);
		color: white;
		padding: 15px 30px;
		border: none;
		border-radius: 8px;
		cursor: pointer;
		font-size: 18px;
		font-weight: 600;
		transition: all 0.3s ease;
		box-shadow: 0 4px 10px rgba(243, 85, 95, 0.3);
		margin-top: 10px;
	}

	#bookingForm button[type="submit"]:hover {
		background: linear-gradient(135deg, #f13275 0%, #d11860 100%);
		transform: translateY(-2px);
		box-shadow: 0 6px 15px rgba(243, 85, 95, 0.4);
	}

	/**** FIN MOTEUR DE RESERVATION FORMULAIRE ****/

	/* Desktop - 4 colonnes */
	@media (min-width: 1025px) {
		#bookingForm {
			grid-template-columns: repeat(4, 1fr);
		}
		
		#bookingForm button[type="submit"] {
			grid-column: 2 / 4;
			max-width: 400px;
			justify-self: center;
		}
	}

	/* Affichage Responsive specifique TABLETTE et Certains Mobiles */
	@media (max-width: 768px) {
		/* Responsive Design pour le formulaire de reservation */
		#bookingContainer {
			padding: 20px 15px;
			margin: 0 10px 20px 10px;
		}
		
		#bookingForm {
			grid-template-columns: repeat(2, 1fr);
			gap: 15px;
		}
		
		.inputGroup input[type="date"],
		.inputGroup select {
			padding: 12px;
			font-size: 16px;
		}
		
		#bookingForm button[type="submit"] {
			font-size: 16px;
			padding: 14px 25px;
		}
		/* FIN Responsive Design pour le formulaire de reservation */
	}

	/* Affichage Responsive specifique Mobiles avec petit écran */
	@media (max-width: 480px) {
		/* Formulaire de réservation */
		#bookingContainer {
			padding: 15px 10px;
			margin: 0 5px 15px 5px;
		}
		
		#bookingForm {
			grid-template-columns: repeat(2, 1fr);
			gap: 12px;
		}
		
		.inputGroup label {
			font-size: 13px;
		}
		
		.inputGroup input[type="date"],
		.inputGroup select {
			padding: 10px 8px;
			font-size: 16px;
		}
		
		#bookingForm button[type="submit"] {
			font-size: 16px;
			padding: 12px 20px;
		}
		/* FIN Formulaire de réservation */
	}
	
	/* ==========================================
	   STYLES POUR LA SÉLECTION INTERACTIVE DE DATES
	   ========================================== */

	/* Bandeau récapitulatif de sélection */
	.date-selection-summary {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: white;
		padding: 20px;
		border-radius: 12px;
		margin: 0 auto 25px auto;
		max-width: 900px;
		box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
	}

	.selection-message {
		text-align: center;
		font-size: 1.1em;
		font-weight: 500;
	}

	.selection-message span {
		display: inline-block;
		animation: pulse 2s ease-in-out infinite;
	}

	@keyframes pulse {
		0%, 100% { opacity: 1; }
		50% { opacity: 0.7; }
	}

	.selection-details {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 20px;
		flex-wrap: wrap;
	}

	.selection-info {
		display: flex;
		gap: 25px;
		flex-wrap: wrap;
		flex: 1;
	}

	.date-info {
		display: flex;
		flex-direction: column;
		gap: 5px;
	}

	.date-info strong {
		font-size: 0.9em;
		opacity: 0.9;
		text-transform: uppercase;
		letter-spacing: 0.5px;
	}

	.date-info span {
		font-size: 1.2em;
		font-weight: bold;
	}

	.date-info.nights {
		background: rgba(255, 255, 255, 0.2);
		padding: 10px 15px;
		border-radius: 8px;
	}

	.btn-reset {
		background: rgba(255, 255, 255, 0.2);
		color: white;
		border: 2px solid white;
		padding: 12px 24px;
		border-radius: 25px;
		font-size: 1em;
		font-weight: bold;
		cursor: pointer;
		transition: all 0.3s ease;
		white-space: nowrap;
	}

	.btn-reset:hover {
		background: white;
		color: #667eea;
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	}

	.btn-reset:active {
		transform: translateY(0);
	}

	/* Dates réservées dans le calendrier */
	.reserved-date {
		background-color: rgba(255, 0, 0, 0.05) !important;
		position: relative;
	}

	.reserved-date::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: repeating-linear-gradient(
			45deg,
			transparent,
			transparent 10px,
			rgba(255, 0, 0, 0.08) 10px,
			rgba(255, 0, 0, 0.08) 20px
		);
		pointer-events: none;
	}

	/* Style de sélection amélioré */
	.fc-highlight {
		background: rgba(102, 126, 234, 0.2) !important;
		border: 2px solid #667eea !important;
	}

	/* ==========================================
	   RESPONSIVE TABLETTE (max-width: 768px)
	   ========================================== */
	@media (max-width: 768px) {
		.date-selection-summary {
			padding: 15px;
			margin-bottom: 20px;
		}
		
		.selection-message {
			font-size: 1em;
		}
		
		.selection-details {
			flex-direction: column;
			align-items: stretch;
			gap: 15px;
		}
		
		.selection-info {
			gap: 15px;
		}
		
		.date-info span {
			font-size: 1.1em;
		}
		
		.btn-reset {
			width: 100%;
			padding: 14px;
		}
	}

	/* ==========================================
	   RESPONSIVE MOBILE (max-width: 480px)
	   VERSION ULTRA COMPACTE
	   ========================================== */
	@media (max-width: 480px) {
		.date-selection-summary {
			padding: 10px 12px;  /* Réduit de 15px à 10px */
			margin-bottom: 12px;  /* Réduit de 20px à 12px */
			border-radius: 8px;
		}
		
		.selection-message {
			font-size: 0.9em;  /* Réduit de 1em à 0.9em */
			line-height: 1.3;
		}
		
		/* Détails en mode HORIZONTAL compact */
		.selection-details {
			flex-direction: row;  /* Horizontal au lieu de vertical */
			align-items: center;
			gap: 8px;  /* Réduit de 15px à 8px */
			flex-wrap: nowrap;
		}
		
		/* Infos en ligne horizontale */
		.selection-info {
			display: flex;
			flex-direction: row;  /* Horizontal */
			gap: 8px;  /* Petit espace entre les éléments */
			flex: 1;
			overflow-x: auto;  /* Scroll horizontal si nécessaire */
			-webkit-overflow-scrolling: touch;
		}
		
		/* Chaque info en mode TRÈS compact */
		.date-info {
			background: rgba(255, 255, 255, 0.15);
			padding: 6px 10px;  /* Très compact */
			border-radius: 6px;
			min-width: fit-content;
			white-space: nowrap;
		}
		
		/* Labels plus petits */
		.date-info strong {
			font-size: 0.7em;  /* Très petit */
			margin-bottom: 2px;
		}
		
		/* Valeurs compactes */
		.date-info span {
			font-size: 0.95em;  /* Réduit de 1em */
			font-weight: 600;
		}
		
		/* Nuits encore plus compact */
		.date-info.nights {
			background: rgba(255, 255, 255, 0.25);
			padding: 6px 10px;
		}
		
		/* Bouton reset très compact */
		.btn-reset {
			font-size: 0.85em;  /* Plus petit */
			padding: 8px 12px;  /* Très compact */
			width: auto;  /* Pas toute la largeur */
			min-width: fit-content;
			border-radius: 20px;
		}
	}
	
	/* ==========================================
	   RESPONSIVE TRÈS PETIT MOBILE (max-width: 360px)
	   VERSION ULTRA ULTRA COMPACTE
	   ========================================== */
	@media (max-width: 360px) {
		.date-selection-summary {
			padding: 8px 10px;
			margin-bottom: 10px;
		}
		
		.selection-message {
			font-size: 0.85em;
		}
		
		.selection-info {
			gap: 6px;
		}
		
		.date-info {
			padding: 5px 8px;
		}
		
		.date-info strong {
			font-size: 0.65em;
		}
		
		.date-info span {
			font-size: 0.9em;
		}
		
		.btn-reset {
			font-size: 0.8em;
			padding: 6px 10px;
		}
	}


	/* Amélioration du curseur sur les dates sélectionnables */
	.fc-daygrid-day:not(.reserved-date):not(.fc-day-past) {
		cursor: pointer;
	}

	.fc-daygrid-day.reserved-date {
		cursor: not-allowed;
	}

	/* Animation lors de la sélection */
	.fc-daygrid-day.fc-day-selected {
		animation: selectPulse 0.3s ease-out;
	}

	@keyframes selectPulse {
		0% { transform: scale(1); }
		50% { transform: scale(1.05); }
		100% { transform: scale(1); }
	}

/* ==========================================
   STYLES POUR TABLEAU PRIX DANS CALENDRIER
   ========================================== */
	/**** TABLEAU PRIX ****/
	/* PLUS UTILISE
	table {
		width: 80%;
		margin: 0 auto;
		border-collapse: collapse;
	}
	th, td {
		padding: 10px;
		text-align: center;
		border: 1px solid #ddd;
	}
	th {
		background-color: #f2f2f2;
	}
	.tarif-actuel {
		color: red;
	}
	*/
	/**** FIN TABLEAU PRIX ****/

/* ==========================================
   STYLES POUR LES AVIS
   ========================================== */
	/* POUR LES AVIS */
	.container-avis {
		max-width: 800px;
		margin: 40px auto;
		padding: 20px;
		text-align: center;
	}
	.container-avis h1 {
		color: #8c6b48;
	}
	.review-avis {
		background: white;
		border-radius: 10px;
		padding: 15px;
		margin: 15px 0;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		display: flex;
		align-items: center;
		text-align: left;
	}
	.review-avis i {
		font-size: 24px;
		margin-right: 15px;
	}
	.review-avis .fa-airbnb {
		color: #FF5A5F; /* Couleur Airbnb */
	}
	.review-avis .fa-bed {
		color: #003580; /* Booking.com */
	}
	.review-avis .fa-house {
		color: #1E88E5; /* Bleu Abritel (Vrbo) */
	}
	.review-avis .fa-google {
		color: #EA4335; /* Rouge Google */
	}
	.review-avis h3 {
		margin: 0;
		color: #d49e63;
	}
	.review-avis p {
		font-style: italic;
		color: #555;
	}
		
	/* Affichage Responsive specifique TABLETTE et Certains Mobiles */
	@media (max-width: 768px) {
			/* AVIS POUR MOBILES */
			.container-avis {
			padding: 10px;
			}
			.review {
				padding: 10px;
				margin: 10px 5px;
			}
			/* FIN AVIS POUR MOBILES*/
	}

/* ==========================================
   STYLES POUR LA PAGE BLOG
   ========================================== */
	/**** BLOG INFOS ARTICLES ****/

	.blog-container {
		max-width: 900px;
		margin: auto;
	}

	.articleblog {
		border: 2px solid #cd0b6e;
		margin-bottom: 20px;
		padding: 20px;
		cursor: pointer;
		transition: all 0.3s ease;
		border-radius: 8px;
		background-color: white;
	}

	.articleblog:hover {
		border-color: #a30957;
		background-color: #fff5f8;
		transform: translateY(-3px);
		box-shadow: 0 4px 12px rgba(205, 11, 110, 0.2);
	}

	.articleblog-title {
		margin: 0 0 10px 0;
		color: #cd0b6e;
		font-size: 1.5em;
	}

	.articleblog-date {
		font-size: 0.9em;
		color: #666;
		margin-bottom: 10px;
	}

	.articleblog-summary {
		color: #333;
		line-height: 1.6;
		margin-bottom: 15px;
	}

	.articleblog-readmore {
		display: inline-block;
		color: #0066cc;
		text-decoration: none;
		font-weight: bold;
		padding: 8px 15px;
		border: 2px solid #0066cc;
		border-radius: 5px;
		transition: all 0.3s ease;
	}

	.articleblog-readmore:hover {
		background-color: #0066cc;
		color: white;
	}

	/**** BLOG - VUE ARTICLE UNIQUE ****/
	.blog-single-article {
		max-width: 900px;
		margin: 0 auto;
		background-color: white;
		padding: 40px;
		border-radius: 10px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	}

	.blog-single-title {
		color: #cd0b6e;
		font-size: 2em;
		margin-bottom: 15px;
		line-height: 1.3;
	}

	.blog-single-date {
		color: #666;
		font-size: 1em;
		margin-bottom: 30px;
		padding-bottom: 20px;
		border-bottom: 2px solid #f0f0f0;
	}

	.blog-single-content {
		font-size: 1.1em;
		line-height: 1.8;
		color: #333;
		margin-bottom: 30px;
	}

	.blog-single-content p {
		margin-bottom: 15px;
	}

	.blog-single-images {
		display: flex;
		flex-wrap: wrap;
		gap: 15px;
		justify-content: center;
		margin-top: 30px;
	}

	.blog-single-image {
		max-width: 100%;
		height: auto;
		max-height: 500px;
		object-fit: cover;
		border-radius: 8px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		cursor: pointer;
		transition: transform 0.3s ease;
	}

	.blog-single-image:hover {
		transform: scale(1.02);
	}

	/**** BOUTON RETOUR ****/
	.blog-back-button {
		max-width: 900px;
		margin: 20px auto;
		text-align: left;
	}

	.back-link {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 12px 24px;
		background: linear-gradient(90deg, #ef0d3d, #ea5978);
		color: white;
		text-decoration: none;
		border-radius: 8px;
		font-weight: bold;
		transition: all 0.3s ease;
		box-shadow: 0 2px 6px rgba(239, 13, 61, 0.3);
	}

	.back-link:hover {
		background: linear-gradient(90deg, #d40b35, #d8476a);
		transform: translateX(-5px);
		box-shadow: 0 4px 12px rgba(239, 13, 61, 0.4);
	}

	.back-link i {
		font-size: 1.2em;
	}

	/**** MESSAGE D'ERREUR ****/
	.blog-error {
		max-width: 600px;
		margin: 50px auto;
		padding: 40px;
		background-color: #fff3cd;
		border: 2px solid #ffc107;
		border-radius: 10px;
		text-align: center;
	}

	.blog-error h2 {
		color: #856404;
		margin-bottom: 15px;
	}

	.blog-error p {
		color: #856404;
		margin-bottom: 20px;
	}

	/**** FIN BLOG INFOS ARTICLES  ****/

	/* Affichage Responsive specifique TABLETTE et Certains Mobiles */
	@media (max-width: 768px) {
		/**** RESPONSIVE BLOG ****/
		.blog-single-article {
			padding: 20px;
		}
		
		.blog-single-title {
			font-size: 1.5em;
		}
		
		.blog-single-content {
			font-size: 1em;
		}
		
		.articleblog {
			padding: 15px;
		}
		
		.blog-back-button {
			text-align: center;
		}
	}

/* ==========================================
   STYLES POUR LA PAGE CARROUSEL PHOTOS
   ========================================== */
	* {
	  margin: 0;
	  padding: 0;
	  box-sizing: border-box;
	}
	.carousel-wrapper {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  /*min-height: 100vh;*/
	  padding: 20px 0; /*Remplace le min-height qui prend trop de place mis aussi sur option mobile*/
	  background-color: #f0f0f0; /* Si un fond est nécessaire pour ce conteneur */
	}
	.carousel {
	  position: relative;
	  width: 90%;
	  max-width: 1200px;
	  overflow: hidden;
	  border-radius: 10px;
	  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	  z-index: 1; /* Doit être inférieur au z-index du menu mobile pour qu'il reste derriere */
	}
	.carousel-track {
	  display: flex;
	  transition: transform 0.5s ease-in-out;
	}
	.carousel-slide {
	  min-width: 100%; /* Chaque slide occupe toute la largeur du carrousel à 100% */
	  transition: transform 0.3s ease-in-out;
	  /* position: relative; */
	}
	.carousel-slide img {
	  width: 100%; /* Adapte l'image à la largeur du conteneur */
	  height: 100%; /* Adapte l'image à la hauteur du conteneur */
	  object-fit: contain; /* Les images sont redimensionnées sans être coupées */
	  max-height: 60vh; /* Limite la hauteur à celle de la fenêtre à 100vh */
	}
	.carousel-wrapper img {
		width: 100%; /* Images adaptées à la taille du conteneur */
		height: auto;
		display: block;
	}
	.buttons {
		position: absolute;
		top: 50%;
		width: 100%;
		display: flex;
		justify-content: space-between;
		transform: translateY(-50%);
	}
	.carousel-wrapper .button {
		background-color: rgba(0, 0, 0, 0.5);
		color: white;
		border: none;
		/*padding: 10px 15px; /* Cree une ellipse */
		padding: 10px; /* Même padding partout */ /* permet que le bouton soit rond et pas ellipse */
		width: 40px; /* Largeur fixe */ /* permet que le bouton soit rond et pas ellipse */
		height: 40px; /* Hauteur fixe */ /* permet que le bouton soit rond et pas ellipse */
		cursor: pointer;
		border-radius: 50%;
		transition: background-color 0.3s;
	}
	.button:hover {
		background-color: rgba(0, 0, 0, 0.8);
	}
	.indicators {
		position: absolute;
		bottom: 15px;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		gap: 5px;
	}
	.indicator {
	  width: 10px;
	  height: 10px;
	  background-color: rgba(0, 0, 0, 0.5);
	  border-radius: 50%;
	  cursor: pointer;
	  transition: background-color 0.3s;
	}
	.indicator.active {
	  background-color: white;
	}

	/* Affichage Responsive specifique TABLETTE et Certains Mobiles */
	@media (max-width: 768px) {
		/* Pour Carrousel */
		.carousel-wrapper {
			padding: 50px 0;
		}
	}

/* ==========================================
   STYLES POUR LA PAGE HOME Partie Equipements
   ========================================== */
	/**** SECTION EQUIPEMENTS ****/
	.equipements-section {
		width: 90%;
		margin: 20px auto;
		text-align: center;
	}
	.equipements-section h2 {
		font-size: 24px;
		color: #2c3e50;
		margin-bottom: 15px;
	}
	.equipements-container {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 15px; /* Les espaces entre les éléments (via gap) ont été réduits à 15px.*/
	}
	.equipement-box {
		background-color: #fff;
		padding: 10px;
		border-radius: 8px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		text-align: center;
		width: 140px; /*La largeur des carrés a été réduite à 140px. */
		transition: transform 0.2s, box-shadow 0.2s;
	}
	.equipement-box:hover {
		transform: translateY(-3px);
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
	}
	.equipement-box i {
		font-size: 30px; /* La taille des icônes a été réduite à 30px (au lieu de 40px).*/
		color: #3498db;
		margin-bottom: 5px;
	}
	.equipement-box h3 {
		font-size: 16px; /* La taille des titres (h3) est réduite à 16px. */
		color: #2c3e50;
		margin-bottom: 5px;
	}
	.equipement-box p {
		font-size: 12px; /* La taille des descriptions (p) est réduite à 12px pour un rendu compact. */
		color: #7f8c8d;
		margin: 0;
	}

	/* ==========================================
	   STYLES POUR LA PAGE VIDEOS Lecteur Video
	   ========================================== */
	/**** LECTEUR VIDEO ****/

	/* En-tête de la page vidéo (NOUVEAU pour SEO) */
	.video-page-header {
		text-align: center;
		max-width: 900px;
		margin: 20px auto;
		padding: 20px;
		background: #f9f9f9;
		border-radius: 8px;
	}

	.video-page-header h1 {
		color: #cd0b6e; /* ✅ Votre couleur rose */
		font-size: 1.8em;
		margin-bottom: 10px;
	}

	.video-page-header p {
		color: #666;
		font-size: 1.1em;
	}

	/* Conteneur vidéo (VOTRE CSS CONSERVÉ) */
	.video-container {
		width: 80%;
		max-width: 800px;
		background-color: #000;
		border-radius: 10px;
		overflow: hidden;
		margin-bottom: 20px;
	}

	.video-container iframe, .video-container video {
		width: 100%;
		height: 450px;
	}

	/* Infos vidéo sous le player (NOUVEAU pour SEO) */
	.video-info {
		background: white;
		padding: 20px;
		margin-top: 15px;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		text-align: left;
		max-width: 800px;
		margin-left: auto;
		margin-right: auto;
	}

	.video-info h2 {
		color: #cd0b6e; /* ✅ Votre couleur rose */
		font-size: 1.4em;
		margin-bottom: 10px;
	}

	.video-info p {
		color: #555; /* ✅ Cohérent avec votre CSS existant */
		font-size: 1em;
		line-height: 1.6;
	}

	/* Contrôles (VOTRE CSS CONSERVÉ) */
	.controls {
		text-align: center;
		margin-bottom: 30px;
	}

	.controls button {
		padding: 8px 15px;
		font-size: 14px;
		margin: 5px;
		cursor: pointer;
		background-color: #007BFF;
		color: white;
		border: none;
		border-radius: 15px; /* Bords arrondis */
		transition: background-color 0.3s;
	}

	.controls button:hover {
		background-color: #0056b3;
	}

	/* Liste de vidéos (VOTRE CSS CONSERVÉ) */
	.video-list {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.video-list button {
		width: 30%; /* Au lieu de 60 */
		margin: 5px;
		background-color: #444343; /* ✅ Votre couleur */
	}

	.video-list button:hover {
		background-color: #cc9caa; /* ✅ Votre couleur rose */
	}

	/* Affichage Responsive specifique TABLETTE et Certains Mobiles */
	@media (max-width: 768px) {
		/* LECTEUR VIDEO PARTIE MOBILE */
		.video-page-header {
			padding: 15px;
			margin: 15px 10px;
		}
		
		.video-page-header h1 {
			font-size: 1.4em;
		}
		
		.video-container {
			width: 95%;
		}
		
		.video-info {
			padding: 15px;
			margin: 15px 10px;
		}
		
		.video-info h2 {
			font-size: 1.2em;
		}
		
		.video-list button {
			width: 60%;
		}
		/* FIN LECTEUR VIDEO PARTIE MOBILE */
	}

	/* Affichage Responsive specifique Mobiles avec petit écran */
	@media (max-width: 480px) {
		.video-page-header h1 {
			font-size: 1.2em;
		}
		
		.video-container {
			width: 100%;
			border-radius: 5px;
		}
		
		.video-container iframe, .video-container video {
			height: 300px; /* Réduit la hauteur sur très petit écran */
		}
		
		.video-info {
			padding: 12px;
		}
		
		.video-list button {
			width: 80%;
			font-size: 13px;
		}
	}

/* ==========================================
   STYLES POUR LA PAGE CONTACT
   ========================================== */
	/**** PARTIE CONTACT ****/
	.contact-card {
		background: #ffffff;
		border-radius: 10px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		max-width: 400px;
		padding: 20px;
		text-align: center;
		border: 2px solid #4CAF50;
	}

	.contact-card h2 {
		color: #4CAF50;
		margin-bottom: 20px;
	}

	.contact-card p {
		color: #555555;
		margin: 10px 0;
		font-size: 16px;
	}

	.contact-card p strong {
		color: #333333;
	}

/* ==========================================
   STYLES POUR LA PARTIE FOOTER SUR INDEX.PHP
   ========================================== */
/**** FOOTER Pied de page ****/
	/* Style du pied de page */
	footer {
		background-color: #333;
		color: white;
		padding: 20px;
		text-align: center;
		position: relative;
		bottom: 0;
		width: 100%;
	}

	footer p {
		margin: 10px 0;
		font-size: 14px;
	}

	footer .small-text {
		font-size: 10px; /* Taille de police plus petite */
	}

	footer a {
		color: #ffcc00;
		text-decoration: none;
	}

	footer a:hover {
		text-decoration: underline;
	}
/**** FIN FOOTER Pied de page ****/

/* ==========================================
   STYLES POUR LA PAGE INFOS - VERSION 2
   Avec système de recherche/filtrage
   ========================================== */

	/* ========================================
	   EN-TÊTE DE LA PAGE
	   ======================================== */

	.page-header {
		text-align: center;
		margin-bottom: 40px;
		padding: 30px 20px;
		background: linear-gradient(135deg, #ef0d3d, #ea5978);
		color: white;
		border-radius: 15px;
		box-shadow: 0 4px 15px rgba(239, 13, 61, 0.3);
		max-width: 1200px;
		margin-left: auto;
		margin-right: auto;
	}

	.page-header h1 {
		font-size: 2em;
		margin-bottom: 10px;
		font-weight: 700;
	}

	.page-header p {
		font-size: 1.1em;
		opacity: 0.95;
		margin: 0;
	}

	/* ========================================
	   BARRE DE RECHERCHE / FILTRAGE
	   ======================================== */

	/* Conteneur de la barre de recherche */
	.search-container {
		max-width: 800px;
		margin: 0 auto 40px auto;
		background: white;
		padding: 25px;
		border-radius: 12px;
		box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
	}

	/* Label de la recherche */
	.search-container label {
		display: block;
		font-size: 1.1em;
		font-weight: 600;
		color: #333;
		margin-bottom: 12px;
	}

	.search-container label i {
		color: #ef0d3d;
		margin-right: 8px;
	}

	/* Wrapper pour l'input et l'icône */
	.search-wrapper {
		position: relative;
		margin-bottom: 20px;
	}

	/* Icône de recherche dans l'input */
	.search-wrapper > i {
		position: absolute;
		left: 15px;
		top: 50%;
		transform: translateY(-50%);
		color: #ef0d3d;
		font-size: 18px;
		pointer-events: none; /* Ne bloque pas les clics */
		z-index: 2;
	}

	/* Champ de recherche */
	#searchInput {
		width: 100%;
		padding: 15px 15px 15px 45px; /* Espace à gauche pour l'icône */
		font-size: 1em;
		border: 2px solid #e0e0e0;
		border-radius: 8px;
		transition: all 0.3s ease;
		font-family: 'Open Sans', sans-serif;
	}

	/* Placeholder du champ */
	#searchInput::placeholder {
		color: #999;
	}

	/* Focus sur le champ de recherche */
	#searchInput:focus {
		outline: none;
		border-color: #ef0d3d;
		box-shadow: 0 0 0 3px rgba(239, 13, 61, 0.1);
	}

	/* Bouton de réinitialisation (X) */
	.clear-search {
		position: absolute;
		right: 15px;
		top: 50%;
		transform: translateY(-50%);
		background: #ef0d3d;
		color: white;
		border: none;
		width: 30px;
		height: 30px;
		border-radius: 50%;
		cursor: pointer;
		display: none; /* Caché par défaut */
		font-size: 14px;
		transition: all 0.3s ease;
		z-index: 2;
	}

	.clear-search:hover {
		background: #cd0b6e;
		transform: translateY(-50%) scale(1.1);
	}

	/* Afficher le bouton X quand il y a du texte */
	.clear-search.show {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* Compteur de résultats */
	.results-count {
		text-align: center;
		color: #666;
		font-size: 0.95em;
		margin-top: 10px;
		min-height: 20px; /* Pour éviter le saut de layout */
		transition: all 0.3s ease;
	}

	.results-count.highlight {
		color: #ef0d3d;
		font-weight: 600;
	}

	/* Filtres rapides (badges cliquables) */
	.quick-filters {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		margin-top: 15px;
		justify-content: center;
	}

	.quick-filter {
		padding: 8px 16px;
		background: #f0f0f0;
		border: 2px solid transparent;
		border-radius: 20px;
		font-size: 0.9em;
		cursor: pointer;
		transition: all 0.3s ease;
		color: #555;
		user-select: none; /* Empêche la sélection de texte */
	}

	.quick-filter:hover {
		background: #e8f5e9;
		border-color: #4caf50;
		color: #2e7d32;
		transform: translateY(-2px);
	}

	.quick-filter.active {
		background: linear-gradient(135deg, #ef0d3d, #ea5978);
		color: white;
		border-color: #ef0d3d;
	}

	/* Message "aucun résultat" */
	.no-results {
		text-align: center;
		padding: 60px 20px;
		background: white;
		border-radius: 12px;
		margin: 20px auto;
		max-width: 600px;
		display: none; /* Caché par défaut */
		box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
	}

	.no-results i {
		font-size: 60px;
		color: #ccc;
		margin-bottom: 20px;
	}

	.no-results h3 {
		color: #666;
		margin-bottom: 10px;
		font-size: 1.5em;
	}

	.no-results p {
		color: #999;
		margin: 0;
	}

	/* ========================================
	   SECTIONS ET CARTES
	   ======================================== */

	/* Section d'informations */
	.info-section {
		margin-bottom: 50px;
		max-width: 1200px;
		margin-left: auto;
		margin-right: auto;
		padding: 0 10px;
		transition: opacity 0.3s ease;
	}

	/* Masquer les sections sans résultats */
	.info-section.hidden {
		display: none;
	}

	/* Titre de section */
	.section-title {
		display: flex;
		align-items: center;
		gap: 15px;
		margin-bottom: 25px;
		padding: 15px 20px;
		background: white;
		border-radius: 10px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
	}

	.section-title .icon-wrapper {
		width: 50px;
		height: 50px;
		background: linear-gradient(135deg, #ef0d3d, #ea5978);
		border-radius: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24px;
		color: white;
		flex-shrink: 0;
	}

	.section-title h2 {
		color: #333;
		font-size: 1.5em;
		font-weight: 600;
		margin: 0;
	}

	/* Grille de cartes */
	.cards-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
		gap: 20px;
		margin-bottom: 20px;
	}

	/* Carte d'information */
	.info-card {
		background: white;
		border-radius: 12px;
		padding: 20px;
		box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
		transition: all 0.3s ease;
		border-left: 4px solid #ef0d3d;
		position: relative;
		overflow: hidden;
	}

	/* Masquer les cartes qui ne correspondent pas à la recherche */
	.info-card.hidden {
		display: none;
	}

	.info-card::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(135deg, rgba(239, 13, 61, 0.03), transparent);
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	.info-card:hover {
		transform: translateY(-5px);
		box-shadow: 0 8px 20px rgba(239, 13, 61, 0.15);
	}

	.info-card:hover::before {
		opacity: 1;
	}

	/* En-tête de carte */
	.card-header {
		display: flex;
		align-items: flex-start;
		gap: 12px;
		margin-bottom: 12px;
	}

	.card-icon {
		width: 40px;
		height: 40px;
		background: linear-gradient(135deg, #ef0d3d, #ea5978);
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		font-size: 18px;
		flex-shrink: 0;
	}

	.card-content {
		flex: 1;
	}

	.card-content h3 {
		color: #333;
		font-size: 1.1em;
		margin: 0 0 5px 0;
		line-height: 1.3;
		font-weight: 600;
	}

	/* Métadonnées de carte */
	.card-meta {
		display: flex;
		align-items: center;
		gap: 8px;
		color: #666;
		font-size: 0.85em;
		margin-top: 8px;
		flex-wrap: wrap;
	}

	.card-meta i {
		color: #ef0d3d;
		font-size: 0.9em;
	}

	/* Lien de carte */
	.card-link {
		display: inline-block;
		margin-top: 10px;
		color: #3498db;
		text-decoration: none;
		font-weight: 600;
		font-size: 0.95em;
		transition: all 0.3s ease;
	}

	.card-link:hover {
		color: #cd0b6e;
		transform: translateX(5px);
	}

	.card-link i {
		margin-left: 5px;
		transition: margin-left 0.3s ease;
	}

	.card-link:hover i {
		margin-left: 10px;
	}

	/* Badges de distance */
	.badge {
		display: inline-block;
		padding: 4px 10px;
		background: #e8f5e9;
		color: #2e7d32;
		border-radius: 20px;
		font-size: 0.8em;
		font-weight: 600;
		margin-right: 5px;
	}

	.badge.car {
		background: #e3f2fd;
		color: #1565c0;
	}

	/* Animation d'apparition */
	@keyframes fadeInUp {
		from {
			opacity: 0;
			transform: translateY(20px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.info-card {
		animation: fadeInUp 0.5s ease;
	}

	/* ========================================
	   RESPONSIVE - TABLETTES (≤ 768px)
	   ======================================== */

	@media (max-width: 768px) {
		/* En-tête */
		.page-header {
			padding: 25px 15px;
			margin-bottom: 30px;
		}

		.page-header h1 {
			font-size: 1.6em;
		}

		.page-header p {
			font-size: 1em;
		}

		/* Barre de recherche */
		.search-container {
			padding: 20px;
			margin-bottom: 30px;
		}

		.search-container label {
			font-size: 1em;
		}

		#searchInput {
			font-size: 0.95em;
		}

		/* Filtres rapides */
		.quick-filters {
			gap: 8px;
		}

		.quick-filter {
			font-size: 0.85em;
			padding: 6px 12px;
		}

		/* Sections */
		.info-section {
			padding: 0 5px;
			margin-bottom: 40px;
		}

		.cards-grid {
			grid-template-columns: 1fr;
			gap: 15px;
		}

		.section-title {
			flex-direction: column;
			text-align: center;
			gap: 10px;
			padding: 12px 15px;
		}

		.section-title h2 {
			font-size: 1.3em;
		}

		/* Cartes */
		.info-card {
			padding: 18px;
		}

		/* Message aucun résultat */
		.no-results {
			padding: 40px 20px;
		}

		.no-results i {
			font-size: 50px;
		}

		.no-results h3 {
			font-size: 1.3em;
		}
	}

	/* ========================================
	   RESPONSIVE - MOBILES (≤ 480px)
	   ======================================== */

	@media (max-width: 480px) {
		/* Body */
		body {
			padding: 10px 5px;
		}

		/* En-tête */
		.page-header {
			padding: 20px 15px;
			margin-bottom: 25px;
			border-radius: 10px;
		}

		.page-header h1 {
			font-size: 1.4em;
		}

		.page-header p {
			font-size: 0.95em;
		}

		/* Barre de recherche */
		.search-container {
			padding: 15px;
			margin-bottom: 25px;
		}

		.search-container label {
			font-size: 0.95em;
			margin-bottom: 10px;
		}

		#searchInput {
			font-size: 0.9em;
			padding: 12px 12px 12px 40px;
		}

		.search-wrapper > i {
			font-size: 16px;
			left: 12px;
		}

		.clear-search {
			width: 28px;
			height: 28px;
			font-size: 12px;
			right: 12px;
		}

		.results-count {
			font-size: 0.85em;
		}

		/* Filtres rapides */
		.quick-filters {
			gap: 6px;
		}

		.quick-filter {
			font-size: 0.8em;
			padding: 5px 10px;
		}

		/* Sections */
		.info-section {
			margin-bottom: 30px;
		}

		.section-title {
			padding: 12px 10px;
		}

		.section-title .icon-wrapper {
			width: 45px;
			height: 45px;
			font-size: 20px;
		}

		.section-title h2 {
			font-size: 1.1em;
		}

		/* Grille */
		.cards-grid {
			gap: 12px;
		}

		/* Cartes */
		.info-card {
			padding: 15px;
		}

		.card-icon {
			width: 36px;
			height: 36px;
			font-size: 16px;
		}

		.card-content h3 {
			font-size: 1em;
		}

		.card-meta {
			font-size: 0.8em;
			gap: 6px;
		}

		.badge {
			font-size: 0.75em;
			padding: 3px 8px;
		}

		.card-link {
			font-size: 0.9em;
		}

		/* Message aucun résultat */
		.no-results {
			padding: 30px 15px;
		}

		.no-results i {
			font-size: 40px;
			margin-bottom: 15px;
		}

		.no-results h3 {
			font-size: 1.2em;
		}

		.no-results p {
			font-size: 0.9em;
		}
	}

	/* ========================================
	   ACCESSIBILITÉ
	   ======================================== */

	/* Focus visible pour la navigation au clavier */
	#searchInput:focus-visible,
	.quick-filter:focus-visible,
	.card-link:focus-visible {
		outline: 3px solid #ef0d3d;
		outline-offset: 2px;
	}

	/* Amélioration du contraste pour les badges */
	.badge {
		font-weight: 700; /* Plus lisible */
	}

	/* Amélioration de la lisibilité des liens */
	.card-link {
		text-decoration: underline;
		text-decoration-color: transparent;
		transition: all 0.3s ease;
	}

	.card-link:hover,
	.card-link:focus {
		text-decoration-color: currentColor;
	}

	/* ==========================================
	   SUPPORT DES IMAGES OPTIONNELLES (LOGOS)
	   ========================================== */

	/* Conteneur pour image OU icône */
	.card-visual {
		width: 60px;
		height: 60px;
		flex-shrink: 0;
		position: relative;
	}

	/* Image du commerce/activité (si disponible) */
	.card-image {
		width: 100%;
		height: 100%;
		object-fit: cover; /* Recadre l'image proprement */
		border-radius: 8px;
		border: 2px solid #f0f0f0;
		display: block;
	}

	/* Masquer l'icône si une image est présente */
	.card-visual.has-image .card-icon {
		display: none;
	}

	/* Gestion des images cassées ou manquantes */
	.card-image[src=""],
	.card-image:not([src]) {
		display: none;
	}

	/* Style alternatif : image ronde (optionnel) */
	.card-visual.rounded .card-image {
		border-radius: 50%; /* Cercle parfait */
	}

	/* ==========================================
	   RESPONSIVE POUR LES IMAGES
	   ========================================== */

	@media (max-width: 768px) {
		.card-visual {
			width: 50px;
			height: 50px;
		}
	}

	@media (max-width: 480px) {
		.card-visual {
			width: 45px;
			height: 45px;
		}
	}

/* Fin du Style pour la page infos.php */

/* ==========================================
   TOOLTIPS POUR LA PAGE INFORMATIONS
   ========================================== 
   
   À ajouter dans votre fichier parenthese.css
   ou à charger séparément sur la page infos
   
   ========================================== */

	/* ============================================
	   1. TOOLTIP DE BASE
	   ============================================ */

	/* Conteneur du tooltip (attribut data-tooltip) */
	[data-tooltip] {
		position: relative;
		cursor: help; /* Curseur point d'interrogation */
	}

	/* Le tooltip lui-même (caché par défaut) */
	[data-tooltip]::before {
		content: attr(data-tooltip);
		position: absolute;
		bottom: 125%; /* Au-dessus de l'élément */
		left: 50%;
		transform: translateX(-50%) scale(0.9);
		
		/* Style visuel */
		background: linear-gradient(135deg, #2c3e50, #34495e);
		color: white;
		padding: 10px 15px;
		border-radius: 8px;
		font-size: 0.85em;
		line-height: 1.4;
		white-space: normal;
		max-width: 250px;
		width: max-content;
		
		/* Ombre et effets */
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
		z-index: 1000;
		
		/* Animation */
		opacity: 0;
		pointer-events: none;
		transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	}

	/* Petite flèche sous le tooltip */
	[data-tooltip]::after {
		content: '';
		position: absolute;
		bottom: 115%; /* Juste sous le tooltip */
		left: 50%;
		transform: translateX(-50%) scale(0.9);
		
		/* Triangle CSS */
		border: 6px solid transparent;
		border-top-color: #2c3e50;
		
		/* Animation */
		opacity: 0;
		pointer-events: none;
		transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
		z-index: 1001;
	}

	/* Afficher le tooltip au survol */
	[data-tooltip]:hover::before,
	[data-tooltip]:hover::after {
		opacity: 1;
		transform: translateX(-50%) scale(1);
	}


	/* Sur très petits écrans */
	@media (max-width: 480px) {
		[data-tooltip]::before {
			font-size: 0.8em;
			padding: 8px 12px;
			max-width: 85vw;
		}
	}


	/* ============================================
	   2. VARIANTES DE COULEUR (OPTIONNEL)
	   ============================================ */

	/* Tooltip rouge (pour avertissements) */
	[data-tooltip-color="red"]::before {
		background: linear-gradient(135deg, #e74c3c, #c0392b);
	}

	[data-tooltip-color="red"]::after {
		border-top-color: #e74c3c;
	}

	/* Tooltip vert (pour succès) */
	[data-tooltip-color="green"]::before {
		background: linear-gradient(135deg, #27ae60, #229954);
	}

	[data-tooltip-color="green"]::after {
		border-top-color: #27ae60;
	}

	/* Tooltip bleu (pour informations) */
	[data-tooltip-color="blue"]::before {
		background: linear-gradient(135deg, #3498db, #2980b9);
	}

	[data-tooltip-color="blue"]::after {
		border-top-color: #3498db;
	}

	/* Tooltip rose (couleur du site) */
	[data-tooltip-color="pink"]::before {
		background: linear-gradient(135deg, #ef0d3d, #cd0b6e);
	}

	[data-tooltip-color="pink"]::after {
		border-top-color: #ef0d3d;
	}


	/* ============================================
	   3. TOOLTIP AU CLIC (MOBILE)
	   ============================================ */

	/* Sur mobile, permettre d'afficher le tooltip au clic */
	@media (max-width: 768px) {
		/* Ajouter une classe .tooltip-visible au clic */
		[data-tooltip].tooltip-visible::before,
		[data-tooltip].tooltip-visible::after {
			opacity: 1;
			transform: translateX(-50%) scale(1);
		}
	}


	/* ============================================
	   4. ACCESSIBILITÉ
	   ============================================ */

	/* Afficher aussi le tooltip au focus (clavier) */
	[data-tooltip]:focus::before,
	[data-tooltip]:focus::after {
		opacity: 1;
		transform: translateX(-50%) scale(1);
	}

	/* Focus visible pour accessibilité */
	[data-tooltip]:focus-visible {
		outline: 2px solid #ef0d3d;
		outline-offset: 2px;
	}
	
	/* ==========================================
	   5. CORRECTIF TOOLTIPS + LIENS
	   ========================================== */

	/* Enlever cursor: help de la carte entière */
	.info-card[data-tooltip] {
		cursor: default !important;
	}

	/* Cursor help SEULEMENT sur le titre */
	.info-card[data-tooltip] h3 {
		cursor: help;
		display: inline-block;
	}

	/* Les liens DOIVENT garder cursor: pointer */
	.card-link {
		cursor: pointer !important;
		pointer-events: auto !important;
		z-index: 10;
		position: relative;
	}

	/* Petit icône ℹ️ à côté du titre */
	.info-card[data-tooltip] h3::after {
		content: " ℹ️";
		font-size: 0.8em;
		opacity: 0.6;
		margin-left: 5px;
	}

	/* AFFICHAGE DU TOOLTIP AU SURVOL DU TITRE */

	/* Position de base pour h3 */
	.info-card[data-tooltip] h3 {
		position: relative;
		display: inline-block;
		cursor: help;
	}

	/* DESKTOP : Tooltip à droite du titre */
	@media (min-width: 769px) {
		.info-card[data-tooltip] h3:hover::before {
			content: attr(data-tooltip);
			display: block;
			position: absolute;
			top: 0;
			left: 100%;
			margin-left: 15px;
			transform: translateY(-25%);
			
			background: linear-gradient(135deg, #2c3e50, #34495e);
			color: white;
			padding: 12px 18px;
			border-radius: 8px;
			font-size: 0.85em;
			line-height: 1.5;
			max-width: 350px;
			
			box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
			z-index: 9999;
			opacity: 1;
			
			font-weight: normal;
			white-space: normal;
		}
		
		/* Flèche pointant vers le titre */
		.info-card[data-tooltip] h3:hover::after {
			content: '';
			display: block;
			position: absolute;
			top: 20%;
			left: 100%;
			margin-left: 9px;
			
			border: 6px solid transparent;
			border-right-color: #2c3e50;
			
			z-index: 10000;
		}
	}

	/* MOBILE : Tooltip en dessous du titre */
	@media (max-width: 768px) {
		.info-card[data-tooltip] h3:hover::before {
			content: attr(data-tooltip);
			display: block;
			position: absolute;
			top: 100%;
			left: 50%;
			transform: translateX(-50%) translateY(10px);
			
			background: linear-gradient(135deg, #2c3e50, #34495e);
			color: white;
			padding: 10px 15px;
			border-radius: 8px;
			font-size: 0.85em;
			max-width: 90vw;
			
			box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
			z-index: 9999;
			opacity: 1;
			
			font-weight: normal;
			white-space: normal;
		}
		
		/* Flèche pointant vers le haut */
		.info-card[data-tooltip] h3:hover::after {
			content: '';
			display: block;
			position: absolute;
			top: 100%;
			left: 50%;
			transform: translateX(-50%) translateY(4px);
			
			border: 6px solid transparent;
			border-bottom-color: #2c3e50;
			
			z-index: 10000;
		}
	}
/* FIN de la partie TOOLPIP */

/* ==========================================
   STYLES POUR XXXXXXX
   ========================================== */