/* Stylisation générale de la page */
body {
	font-family: Arial, sans-serif;
	margin: 0; /* Ajustez la valeur en fonction de la hauteur de votre header */
}

header {
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	padding: 1%;
	z-index: 1000; /* Assurez-vous que le z-index est supérieur à celui des autres éléments si nécessaire */
	background-color: #333; /* Couleur de fond de la barre de navigation*/
	color: white; /* Couleur du texte de la barre de navigation*/
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap; /* Permet le retour à la ligne si nécessaire */
}

.textimgh1 {
	padding: 0%;
}

/* Barre de navigation entre les pages */
.nav-bar {
	width: 100%;
	list-style-type: none;
	margin: 0;
	padding: 0%;
	overflow: hidden;
	text-align: center;
}

.nav-bar a {
	display: inline;
	color: white;
	text-align: center;
	padding: 1% 2%;
	text-decoration: none;
}

.nav-bar a:hover {
	background-color: #ddd; /*Couleur de fond au survol */
	color: black;
}
/* FIN Barre de navigation entre les pages */

p {
	text-align: justify;
	padding: 1%;
	margin-top: 0%;
}

section {
	background-color: #f0ca21;
}

.content {
	flex: 1;
	padding: 2%;
	background-color: rgb(205, 243, 255);
	text-align: justify;
	max-width: 100%;
	/* margin: 0 1%; */
	image-rendering: auto;
}

.two-columns {
	display: flex;
	margin-bottom: 2%;
}

.left-column {
	flex: 0 0 50%; /* Set the width of the left column */
	margin-right: 3%;
}

.left-columnvisit {
	flex: 0 0 30%; /* Set the width of the left column for the visithyeres page*/
	margin-right: 3%;
}

.right-column {
	flex: 1; /*Allow the right column to take up the remaining space */
}

.two-columns img {
	max-width: 100%;
	height: auto;
}

.textimgh2 {
	margin: 0;
	padding: 1%;
	text-align: center;
	color: #333;
}

.icon2 {
	/* centrage des icones à coté de h1 */
	width: 150px !important; /* Set a maximum width if necessary */
	height: auto; /* Maintain aspect ratio */
	margin: 0 1%; /* Adjust margin as needed */
}

.icon3 {
	/* centrage des icones à coté de h1 */
	width: 350px !important; /* Set a maximum width if necessary */
	height: auto; /* Maintain aspect ratio */
}

.icon {
	/* centrage des icones en dessous du titre h2 */
	width: 10%; /* You can adjust the percentage based on your needs */
	min-width: 50px;
	max-width: 120px; /* Set a maximum width if necessary */
	height: auto; /* Maintain aspect ratio */
	margin: 0 1%; /* Adjust margin as needed */
}

.puce {
	/* utilisée pour aligner le texte et les images dans la page d'accueil pour les 4 gites */
	float: left;
	margin-right: 1%;
	padding: 1%;
	clear: both; /* Ajout de cette propriété pour éviter que les éléments suivants ne soient à côté */
}

.puce img {
	width: 70%;
	min-width: 100px;
	max-width: 100%;
	height: auto; /* La hauteur s'ajustera automatiquement pour maintenir les proportions originales */
	display: block; /* Supprime les espaces blancs sous l'image lorsque la hauteur est ajustée */
	margin: 0 auto; /* Centre l'image horizontalement dans son conteneur */
}

.image-section {
	display: flex;
	align-items: center;
}

.image-section .puce {
	margin-right: 3%;
	margin-bottom: 3%;
}

.puce2 {
	/* Egestion des images dans l'onglet visitehyeres */
	display: flex;
	width: 100%;
	max-width: 100%;
	margin-right: 2%;
	align-items: flex-start; /* Aligne les images en haut du conteneur */
}

.puce2 img {
	flex: 1; /* Distribue l'espace disponible également entre les images inclues dans puce2 */
	margin-right: 2%; /* Espacement entre les images */
}

/* apparence du tableau des tarifs */

.table {
	border-collapse: collapse;
	width: fit-content;
	margin: 1% auto; /* Add margin to improve appearance */
}

th,
td {
	border: solid #70706c; /* Bordures pour améliorer la lisibilité */
	padding: 3%;
	text-align: center;
	background-color: #333; /* Add a background color for better appearance */
	color: #fff; /* Set the text color to white */
}

.contact {
	text-align: left;
	color: rgb(21, 27, 142);
	font-size: medium;
}

/* Bas de page */

.footer {
	text-align: center; /* Pour centrer le contenu à l'intérieur du footer */
	background-color: #333; /* Ajoutez une couleur de fond pour améliorer la lisibilité */
	padding: 1%; /* Ajoutez un peu de marge intérieure pour l'esthétique */
}

.footer a {
	margin: 0 2%; /* Ajoutez une marge entre les liens pour les espacer */
	text-decoration: none; /* Supprimez la soulignement par défaut des liens */
	color: #fff; /* Ajoutez une couleur au texte des liens */
}

.footer a:hover {
	text-decoration: overline; /* Ajoutez un soulignement au survol des liens */
}

.footer p {
	margin-top: 0%; /* Ajoutez un espace au-dessus du texte de copyright */
	font-size: 80%; /* Ajoutez une taille de police pour le texte de copyright */
	color: #d2c1c1; /* Ajoutez une couleur au texte de copyright */
}

/* Mobile styles */
@media only screen and (max-width: 768px) {
	.textimgh1 {
		font-size: 1.5em;
	}

	.icon2 {
		width: 60px !important;
		height: auto;
		margin: 0 1%;
	}

	.icon3 {
		width: 150px !important;
		height: auto;
		margin: -10%;
	}

	.icon {
		width: 10%; /* Adjust the percentage based on your needs for smaller screens */
		min-width: 50px;
		max-width: 120px;
		height: auto;
		margin: 0 1%;
	}

	.puce img {
		min-width: 100%; /* Make images full width on smaller screens */
		max-width: 100%;
	}

	.puce2 img {
		min-width: 20%; /* Make images full width on smaller screens */
		max-width: 100%;
	}

	.footer {
		padding: 1% 2%; /* Adjust padding for better appearance on smaller screens */
	}
}

.logos {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

/* Google Reviews Button */
.google-reviews-btn {
	display: inline-flex;
	align-items: center;
	background-color: #4285f4;
	color: white;
	padding: 10px 20px;
	border-radius: 4px;
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	transition: all 0.3s ease;
	margin: 10px 5px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.google-reviews-btn:hover {
	background-color: #3367d6;
	box-shadow: 0 3px 6px rgba(0,0,0,0.3);
}

.google-reviews-btn .google-logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: white;
	padding: 6px;
	border-radius: 3px;
	margin-right: 10px;
	width: 20px;
	height: 20px;
}

.google-reviews-btn svg {
	width: 20px;
	height: 20px;
}

.google-reviews-btn .stars {
	color: #ffc107;
	margin-left: 8px;
	font-size: 16px;
}