/*

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

*/

/**** 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 */
	}

/**** FIN IMAGE HEADER RESPONSIVE ****/

/**** MISE EN FORME DE 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 */
		font-size: 2rem;
		color: #ccc;
		position: absolute;
		margin-left: -10px;
	}
/**** FIN MISE EN FORME DE BLOCKQUOTE ****/

/**** 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 */
	}
/**** FIN TITRE HEADER SOUS IMAGE ****/

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

/**** 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;
}
/**** FIN POPUP ****/

/**** 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;
	}

/**** FIN SECTIONS pour créer article avec image ****/

/**** BANDEAU RESERVATION ****/
	.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;
	}
	.bandeauresa-buttons a {
		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:hover {
		background-color: #E64A19;
	}

/**** FIN BANDEAU RESERVATION ****/

/**** MENUS ****/
	/* 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: 30px;
		height: 25px;
		background-color: transparent;
		border: none;
		cursor: pointer;
	}

	.hamburger div {
		width: 30px;
		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;
	}
	
	/* 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 */
		}
	/* FIN POUR CALENDRIER DANS PAGE RESERVATION */
	
	/* 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;
        }
		/* FIN  LES AVIS */
	
	/* 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: 140px;
		  max-width: 180px;
		  background-color: #640375;
		  border-radius: 16px;
		  padding: 1rem 0.5rem;
		  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: 60px;
		  height: auto;
		  margin-bottom: 0.5rem;
		  transition: width 0.2s ease;
		}

		.booking-cell span {
		  font-weight: bold;
		  font-size: 0.95rem;
		  transition: font-size 0.2s ease;
		}

		.booking-cell:hover {
		  background-color: #d504fa;
		  transform: translateY(-4px);
		}
	/* Fin Tableau */


	/* Responsive - Affichage du menu hamburger et autres sur mobile */
	@media (max-width: 768px) {
		/* Tableau réservation */
		.booking-cell {
			flex: 1 1 calc(45% - 1rem);
		}
		.booking-cell img {
			width: 50px;
		}

		.booking-cell span {
			font-size: 0.9rem;
		}
		/* FIN Tableau réservation */
		
		/* AVIS POUR MOBILES */
		.container-avis {
        padding: 10px;
		}
		.review {
			padding: 10px;
			margin: 10px 5px;
		}
		/* FIN AVIS POUR MOBILES
		
		/* CALENDRIER VUE MOBILE */
		#calendar {
		²height: 60vh; /* Sur les petits écrans, ajuster la hauteur du calendrier */
		}
		/* CALENDRIER VUE MOBILE */
		
		.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: 18px; /* Hauteur totale de l'icône */
			width: 30px; /* 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: 3px; /* 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é */
		
		/* 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 */
		
		/* Special pour les sections en mode smartphone */
			.section {
				flex-direction: column;
				text-align: center; /* Alignele 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*/
			}
		/* FIN Special pour les sections en mode smartphone */
		
		/* Style pour les éléments de texte */
			.section-text {
				font-size: 14px;
				margin: 5px 0; /* Réduire les marges verticales */
				line-height: 1.5; /* Espacement entre les lignes */
			}
			.text, .images {
				width: 100%;
			}
			.images {
				gap: 5px;
			}
			.images img {
				max-width: 200px; /* Réduction de la taille des images sur les petits écrans */
			}
		/* FIN Style pour les éléments de texte */
		
		/* 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 */
		
		/* Responsive Design pour les le formulaire de reservation */
			#formContainer {
				flex-direction: column;
				align-items: center;
			}

			.inputGroup {
				width: 150%;
			}
			/* Agrandir les inputs et selects */
			.inputGroup input,
			.inputGroup select {
				width: 100%; /* Prendre toute la largeur disponible */
				padding: 8px 11px; /* 12 / 15 Augmenter le padding pour plus d'espace */
				font-size: 10px; /* Agrandir la taille de la police pour plus de lisibilité */
			}
		/* FIN Responsive Design pour les le formulaire de reservation */
		
		/* 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 */
			}

			.bandeauresa-buttons a {
				font-size: 14px; /* Réduire la taille des boutons */
				padding: 8px 15px; /* Réduire le padding des boutons */
			}
		/* FIN BANDEAU RESERVATION LIENS POUR MOBILE */
		
		/* LECTEUR VIDEO PARTIE MOBILE */
		.video-list button {
			width: 60%;
		}
		/* FIN LECTEUR VIDEO PARTIE MOBILE */
	}

	/* Responsive - Affichage sur mobile avec petit écran */
	@media (max-width: 480px) {
		/* Tableau réservation */
		.booking-cell {
			flex: 1 1 calc(48% - 0.5rem);
			padding: 0.8rem 0.4rem;
		}

		.booking-cell img {
			width: 42px;
		}

		.booking-cell span {
			font-size: 0.8rem;
		}
		/* FIN Tableau réservation */
		
		.text {
			font-size: 16px;
		}
		.images img {
			max-width: 150px; /* Réduction supplémentaire pour les très petits écrans */
		}
		/* Formulaire de réservation */
        .inputGroup input,
        .inputGroup select {
            font-size: 16px;
			width: 30%;
        }

        button {
            padding: 12px 0;
            font-size: 18px;
        }
		/* FIN Formulaire de réservation */
	}

	/* 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 */
	}
/**** FIN MENUS et BODY GENERAL ****/

/**** CARROUSEL ****/
	* {
	  margin: 0;
	  padding: 0;
	  box-sizing: border-box;
	}
	.carousel-wrapper {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  min-height: 100vh;
	  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;
	}
/**** FIN CARROUSEL ****/

/**** LES PUCES ****/
	/* Permet de centrer aussi les puces */
	ul {
	  text-align: left;
	  display: inline-block;
	}
/**** FIN DES PUCES ****/

/**** 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 ****/

/**** 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;
	}
/**** FIN PARTIE CONTACT ****/

/**** 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;
	}
/****  FIN SECTION EQUIPEMENTS ****/

/**** TABLEAU PRIX ****/
	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 ****/

/**** LECTEUR VIDEO ****/
	.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;
	}
	.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;
	}
	.video-list {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.video-list button {
		width: 30%; /* Au lieu de 60 */
		margin: 5px;
		background-color: #444343;
	}
	.video-list button:hover {
		/* background-color: #7a7575;*/
		background-color: #cc9caa;
	}
/**** FIN LECTEUR VIDEO ****/

/**** 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;
	}

/**** FIN Mise en forme ARTICLE TEXTE ****/

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

.blog-container {
    max-width: 800px;
    margin: auto;
}
.articleblog {
    border: 2px solid #cd0b6e; /* Changer l'épaisseur si nécessaire */
    margin-bottom: 10px;
    padding: 10px;
    cursor: pointer;
}
.articleblog:hover {
    border-color: #a30957; /* Une nuance plus foncée par exemple */
}
.articleblog-title {
    margin: 0;
}
.articleblog-date {
    font-size: 0.9em;
    color: gray;
}
.articleblog-content {
    display: none;
}
.articleblog-images img {
    max-width: 100%; /* Pour éviter que l'image dépasse la largeur de l'article */
    max-height: 300px; /* Ajuste cette valeur selon tes préférences */
    object-fit: cover; /* Pour éviter les distorsions */
    margin: 5px;
	border-radius: 5px; /* Optionnel : arrondir les bords */
}

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

/**** 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;
	}
/**** 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 ****/


/**** MOTEUR DE RESERVATION FORMULAIRE ****/
    #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;
    }

    form {
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .inputGroup {
        margin-bottom: 15px;
        width: 22%;
        display: flex;
        flex-direction: column;
    }

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

    .inputGroup input,
    .inputGroup select {
        width: 100%;
        padding: 8px;
        margin-bottom: 10px;
        border-radius: 4px;
        border: 1px solid #ccc;
    }

    button {
        background-color: #f3555f;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        width: 40%;
		display: block; /* Ajouté pour faire du bouton un élément de bloc */
		margin: 0 auto; /* Cela centre le bouton horizontalement */
    }

    button:hover {
        background-color: #f13275;
    }

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