@import url("https://fonts.googleapis.com/css2?family=Inter&family=Oxygen&family=Roboto+Slab&family=Roboto:wght@500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Dosis&display=swap");
/* style globale*/

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "poppins", sans-serif;
	scroll-behavior: smooth;
}

p {
	font-weight: 300;
}
header {
	position: fixed;
	top: 0%;
	left: 0%;
	padding: 20px 10px;
	width: 100%;
	height: 150px;
	z-index: 1;
	display: flex;
	background-color: #111111;
	justify-content: space-between;
	align-items: center;
	transition: 0.5s;
	opacity: 0.92;
}
.navbar li a:hover,
.toggle ion-icon:hover {
	color: #00bfff;
}
.toggle {
	font-size: 30px;
	display: none;
}
.toggle ion-icon {
	color: #000000;
}
.logo {
	height: 110px;
	padding-left: 100px;
}
.navbar {
	display: flex;
	position: relative;
}
.navbar li {
	list-style: none;
}
.navbar a {
	color: white;
	text-decoration: none;
	margin-left: 30px;
	font-weight: 700;
}
.btn-reservation {
	padding: 8px 18px;
	background-color: #00bfff;
	margin-top: -10px;
	text-transform: uppercase;
}
.icone-vertical {
	display: flex;
	flex-direction: column; /* Organise les éléments en colonne */
	position: relative;
	list-style: none;
}
.icone-vertical a {
	color: white;
	text-decoration: none;
	margin-left: 30px;
	font-weight: 700;
}

.icone-vertical a:hover {
	transition: ease-out;
	color: #00bfff;
}

.btn-reservation:hover {
	background-color: white;
	transition: ease-out;
	color: #00bfff;
}
header .navbar li a:hover {
	color: #00bfff;
	border-bottom: 2px solid #00bfff;
}
.banniere {
	position: relative;
	width: 100%;
	min-height: 100vh;
	justify-content: center;
	align-items: center;
}
.intro {
	width: 40%;
	margin-bottom: auto;
	color: white;
}
.bloc {
	position: relative;
	height: 100vh;
	width: 100%;
	overflow: hidden;
}
.bloc video {
	position: absolute;
	min-width: 100%;
	min-height: 100%;
	top: 50%;
	left: 50%;
	z-index: -100;
	transform: translate(-60%, -60%);
}
.bloc::before {
	position: absolute;
	content: "";
	height: 100%;
	width: 100%;
	z-index: -99;
	text-align: center;
	background-color: #181717e0;
	opacity: 0.66;
}
.banniere .bloc .description {
	position: relative;
	left: 25%;
	top: 25%;
	width: 60%;
	height: 400px;
	color: white;
	text-transform: capitalize;
	font-size: 45px;
}

.banniere .bloc .description h2 {
	font-style: italic;
	opacity: 0.9;
}

.banniere .bloc .description .mini {
	color: #00bfff;
	font-style: italic;
	opacity: 0.75;
}
.btn1 {
	font-size: 15px;
	color: white;
	background: #00bfff;
	text-decoration: none;
	padding: 10px 18px;
	text-transform: uppercase;
	display: inline-block;
	margin-top: 20px;
	letter-spacing: 2px;
	transition: 0.5s;
	margin-left: 10px;
}
.btn2 {
	font-size: 15px;
	color: #00bfff;
	background: white;
	text-decoration: none;
	padding: 10px 18px;
	text-transform: uppercase;
	display: inline-block;
	margin-top: 20px;
	letter-spacing: 2px;
	transition: 0.5s;
	margin-left: 10px;
}
.btn1:hover {
	background-color: white;
	letter-spacing: 4px;
	transition: ease-out;
	color: #00bfff;
}
.btn2:hover {
	background-color: #00bfff;
	transition: ease-out;
	letter-spacing: 4px;
	color: white;
}
.info {
	color: #00bfff;
	font-family: Verdana, Tahoma, sans-serif;
	opacity: 0.9;
}
section {
	padding: 100px;
}
.row {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: space-between;
	border-radius: 8px;
	padding: 8px 18px;
	border: 3px solid #00bfff;
}
.row .col50 {
	position: relative;
	width: 48%;
	justify-content: center;
	align-items: center;
}
.row .col50 h1 {
	margin-bottom: 20px;
}
.titre-texte {
	font-size: 2em;
	font-weight: 300px;
	text-transform: capitalize;
}
#container_4 {
	width: 48%;
	margin: 0 auto;
	display: flex;
	/* height: 50vh; */
	/* background-color: #ddd; */
}

.images_out {
	width: 500px;
	height: 500px;
	overflow: hidden;
	margin: 25px;
}
.images_in {
	display: flex;
	animation-duration: 15s;
	animation-name: avant_apres;
	animation-iteration-count: infinite;
}
@keyframes avant_apres {
	0% {
		transform: translateX(0px);
	}
	25% {
		transform: translateX(-400px);
	}
	50% {
		transform: translateX(-800px);
	}
	75% {
		transform: translateX(-1200px);
	}
	100% {
		transform: translateX(0);
	}
}

#container_5 {
	width: 300px;
	height: 500px;
}

.bouton {
	position: absolute;
	width: 30px;
	cursor: pointer;
	top: 3200px;
}
.photo {
	width: 300px;
	height: 500px;
	margin: 0;
	display: inline-block;
	background-size: cover;
}
.row .col50 h2 {
	margin-bottom: 20px;
}

.titre-texte span {
	color: #00bfff;
	font-size: 1.5em;
	font-weight: 700px;
}
.container_1 {
	display: flex;
	flex-wrap: wrap;

	padding: 100px;
	width: 90vw;
	height: 20vh;
	justify-content: space-between;
	margin-bottom: 10%;
	align-items: center;
}
.container_1 div {
	width: 30%;
	height: 250px;
	margin-bottom: auto;
}
.ep1 {
	width: 400px;
	height: 200px;
	border: 2px solid #000;
}

.ceramique {
	position: absolute;
	width: 400px;
	height: 200px;
	margin: auto 0;
	background-size: cover;
	border: 2px solid #000;
}

.image-container {
	position: relative;
	display: inline-block;
}

.image-container .image-overlay {
	background: rgba(0, 0, 0, 0.5);
	width: 113%;
	height: 80%;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 1;
	transition: 0.1s;
}
.image-overlay p {
	color: white;
	font-size: 35px;
	text-align: center;
	margin-top: 30px;
	font-style: italic;
}
.image-container:hover .image-overlay {
	background: rgba(0, 0, 0, 0.75);
}

.bold {
	font-weight: bold;
}
.services {
	padding: 50px;
}
.titre {
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.tarifs {
	margin-top: -100px;
}
.tarifs .contenu {
	display: flex;
	justify-content: center;
	border-radius: 8px;
	padding: 8px 18px;
	border: 3px solid #00bfff;
	flex-wrap: wrap;
	margin-top: 40px;
}
.tarifs .contenu .box {
	width: 350px;
	margin: 20px;
	border: 20px solid #fff;
}
.tarifs .contenu .box .inbox {
	position: relative;
}

.tarifs .contenu .box .text {
	text-align: center;
	font-weight: 300px;
	color: #111;
}
.tarifs .contenu .box .text h3 {
	font-weight: 400;
}
h6 {
	font-size: 14px;
	color: #00bfff;
	font-style: italic;
}

#container_3 {
	width: 100%;
	margin: 0 auto;
	display: flex;
	border-radius: 8px;
	padding: 8px 18px;
	border: 3px solid #00bfff;
}

.images_out_1 {
	width: 300px;
	height: 560px;
	overflow: hidden;
	margin: 25px;
	border-radius: 8px;
	padding: 7px 15px #111;
	border: 3px solid #00bfff;
	background-color: #111;
}
.images_in_1 {
	display: flex;
	animation-duration: 80s;
	animation-name: avant_apres;
	animation-iteration-count: infinite;
}
@keyframes avant_apres {
	0% {
		transform: translateX(+20px);
	}
	25% {
		transform: translateX(0px);
	}
	50% {
		transform: translateX(-300px);
	}
	75% {
		transform: translateX(-600px);
	}
	100% {
		transform: translateX(-900px);
	}
}
#container_3 .before_after {
	width: 40%;
	margin-bottom: auto;
}
#container_3 .before_after h2 {
	font-size: 50px;
	color: black;
}
#container_3 .before_after p {
	padding-bottom: 1.5em;
	color: black;
}

.contact {
	background-color: #00bfff;
	box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.8);
	width: 100%;
	color: #ffff;
	background-position: unset;
}
.contactform {
	padding: 75px 50px;
	background: #fff;
	box-shadow: 5px 15px 50px rgba(0, 0, 0, 0.8);
	max-width: 500px;
	margin-top: 50px;
	justify-content: center;
	align-items: center;
	margin-left: 34%;
}
.contactform .inputboite {
	position: relative;
	width: 100%;
	margin-bottom: 30px;
}
.contactform h3 {
	color: #111;
	font-size: 1em;
	margin-bottom: 20px;
}
.contactform .inputboite input,
.contactform,
.inputboite textarea {
	width: 100%;
	border: 1px solid #00bfff;
	padding: 10px;
	color: #111;
	outline: none;
	font-size: 16px;
	font-weight: 300;
	resize: none;
}
.contactform .inputboite input[type="submit"] {
	font-size: 1em;
	font-weight: 700;
	color: #fff;
	background: #00bfff;
	display: inline-block;
	cursor: pointer;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: 2px;
	outline: none;
	border: none;
	transition: 0.5s;
	max-width: 120px;
	align-items: center;
	justify-content: center;
}
.contactform .inputboite input[type="submit"]:hover {
	background-color: white;
	letter-spacing: 4px;
	transition: ease-out;
	color: #00bfff;
}
.copyright {
	padding: 20px 40px;
	border-top: 2px solid rgba(0, 0, 0, 0.1);
	background: rgba(228, 222, 222);
	text-align: center;
}
.copyright p:nth-child(1) {
	color: #333;
}
.copyright a {
	color: #00bfff;
	text-decoration: none;
	font-weight: 600;
	font-style: italic;
}

.contact .titre-texte span {
	font-size: 2em;
}
header.sticky {
	background: #111;
	padding: 10px 10px;
	box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
}
header .sticky .navbar li a {
	color: #00bfff;
}
@media screen and (max-width: 800px) {
	header {
		height: 270px; /* Ajuster la hauteur automatiquement en fonction du contenu */
		flex-direction: column; /* Aligner les éléments en colonne */
		align-items: flex-start; /* Aligner les éléments sur le côté gauche */
		padding: 10px; /* Réduire l'espace intérieur */
		position: relative;
	}

	.navbar {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		margin-top: -150px; /* Espacement entre les éléments */
	}
	.btn-reservation {
		margin-top: 0px; /* Espacement au-dessus du bouton de réservation */
		margin-bottom: 10px; /* Espacement en dessous du bouton de réservation */
	}

	.navbar li {
		margin-bottom: 10px; /* Espacement entre les éléments de la liste */
	}
	.logo {
		margin-left: 35%;
	}
	main {
		display: none;
	}

	section.apropos {
		margin-bottom: 30px;
		padding: 40px 20px; /* Ajuster le padding pour les écrans mobiles */
		margin-top: -300px;
	}

	.row {
		flex-direction: column; /* Afficher en colonnes pour les petits écrans */
		padding: 20px; /* Ajuster l'espacement */
		border: none; /* Supprimer la bordure */
		margin-top: 300px;
	}

	.row .col50 {
		width: 100%; /* Prendre toute la largeur disponible */
	}

	#container_4 {
		width: 100%; /* Prendre toute la largeur disponible */
		margin: 0 auto;
	}
	.images_in {
		animation-duration: 12s;
	}
	.images_out {
		width: 100%;
		height: auto;
		overflow: hidden;
		margin: 15px 0;
	}
	@keyframes avant_apres {
		0% {
			transform: translateX(0px);
		}
		25% {
			transform: translateX(-360px);
		}
		50% {
			transform: translateX(-720px);
		}
		75% {
			transform: translateX(-1080px);
		}

		100% {
			transform: translateX(0);
		}
	}
	.container_1 {
		display: flex;
		padding: 20px;
		width: 100%;
	}

	.container_1 div {
		width: 100%;
		margin-bottom: -50px;
	}

	.ep1 {
		width: 100%;
		height: auto;
		border: 2px solid #000;
		max-width: 100%;
		height: 150px;
	}
	.ceramique {
		width: 100%;
		height: auto;
		border: 2px solid #000;
		max-width: 100%;
		height: 150px;
	}

	.image-container {
		position: relative;
		display: block;
		width: 100%;
	}
	.tarifs .contenu .box {
		width: 350px;
		margin: 20px;
		border: 0;
	}
	.image-container .image-overlay {
		background: rgba(0, 0, 0, 0.5);
		width: 100%;
		height: 62%;
		position: absolute;
		top: 0;
		left: 0;
		opacity: 1;
		transition: 0.1s;
	}

	.image-overlay p {
		color: white;
		font-size: 25px;
		text-align: center;
		margin-top: 30px;
		font-style: italic;
	}

	.image-container:hover .image-overlay {
		background: rgba(0, 0, 0, 0.75);
	}
	#avis {
		margin-top: 300px;
	}
	#container_3 {
		width: 100%;
		margin: 0 auto;
		display: flex;
		border: 0;
		flex-direction: column; /* Affichage en colonne pour les petits écrans */
		align-items: center; /* Centrer les éléments */
		padding: 10px; /* Ajouter un peu d'espace */
	}

	.images_out_1 {
		width: 300px;
		border-radius: 8px;
		border: 3px solid #00bfff;
		background-color: #111;
		height: 550px;
		overflow: hidden;
		margin: 15px 0;
	}

	.images_in_1 {
		display: flex;
		margin: 0;
		animation-duration: 15s;
		padding: 7px 15px; /* Ajuster le remplissage */
	}

	.images_in_1 img {
		width: 300px; /* Taille fixe des images */
		height: auto; /* Ajustement automatique de la hauteur */
	}

	#container_3 .before_after {
		width: 100%;
		margin-top: 25px; /* Ajouter un peu d'espace en haut */
		text-align: center;
	}

	#container_3 .before_after h2 {
		font-size: 30px; /* Réduire la taille de la police */
		margin-bottom: 10px; /* Ajouter un espace en bas */
	}

	#container_3 .before_after p {
		font-size: 14px; /* Réduire la taille de la police */
	}
	@keyframes avant_apres {
		0% {
			transform: translateX(0px);
		}
		25% {
			transform: translateX(-300px);
		}
		50% {
			transform: translateX(-600px);
		}
		75% {
			transform: translateX(-900px);
		}
		100% {
			transform: translateX(-1200x);
		}
	}
	.contactform {
		padding: 20px; /* Ajustement de l'espacement */
		margin-inline-start: auto;
	}

	.contactform h3 {
		font-size: 1.1em; /* Légère diminution de la taille de la police */
	}
	.tarifs .contenu {
		display: flex;
		justify-content: center;
		border-radius: 8px;
		padding: 8px 18px;
		border: 0;
		flex-wrap: wrap;
		margin-top: 40px;
	}

	.contact p {
		display: none;
	}
	.contactform .inputboite input,
	.contactform .inputboite textarea {
		font-size: 13px; /* Réduction supplémentaire de la taille de la police */
	}

	.contactform .inputboite input[type="submit"] {
		font-size: 0.9em; /* Réduction supplémentaire de la taille de la police */
	}
}
@media screen and (min-width: 1800px) {
	.bloc video {
		position: absolute;
		min-width: 100%;
		min-height: 100%;
		top: 50%;
		left: 50%;
		z-index: -100;
		transform: translate(-50%, -50%);
	}
	.ep1 {
		width: 100%;
		height: 200px;
		border: 2px solid #000;
	}

	.ceramique {
		position: absolute;
		width: 100%;
		height: 200px;
		margin: auto 0;
		background-size: cover;
		border: 2px solid #000;
	}
	.image-container .image-overlay {
		background: rgba(0, 0, 0, 0.5);
		width: 100%;
		height: 80%;
		position: absolute;
		top: 0;
		left: 0;
		opacity: 1;
		transition: 0.1s;
	}
}