/* assets/css/style.css */
.lustria-regular {
  font-family: "Lustria", serif;
  font-weight: 400;
  font-style: normal;
}

@font-face {
	font-family: 'Tan Pearl';
	src: url('../fonts/tanpearl.eot'); /* IE9 Compat Modes */
	src: url('../fonts/tanpearl.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('../fonts/tanpearl.woff2') format('woff2'), /* Super Modern Browsers */
		 url('../fonts/tanpearl.woff') format('woff'), /* Pretty Modern Browsers */
		 url('../fonts/tanpearl.ttf')  format('truetype'), /* Safari, Android, iOS */
		 url('../fonts/tanpearl.svg#svgFontName') format('svg'); /* Legacy iOS */
}

body {
	font-family: 'Lustria', serif;
}

.container, .container-fluid {
	background-color: white;
}

nav {
	opacity: 0;
	transition: opacity 1s ease-in-out;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: white;
	padding: 10px 20px;
	z-index: 1000;
	border-bottom: 4px solid rgb(222, 219, 212);
}

nav .navbar-brand {
	margin-right: auto;
	margin-left: 2rem;
}

nav .navbar-nav {
	display: flex;
	align-items: center;
}

nav .nav-item {
	margin-right: 20px;
}

nav .nav-item:last-child {
	margin-left: auto;
	margin-right: 2rem;
}

#espacepro {
	background-image: url('../img/espacepro_fond.jpg'); /* Chemin de votre image */
	background-size: cover; /* L'image couvre toute la zone */
	background-attachment: fixed; /* L'image reste fixe lors du défilement */
	background-position: center center; /* Centre l'image */
}

#services {
	background-image: url('../img/services_fond.png'); /* Chemin de votre image */
	background-size: cover; /* L'image couvre toute la zone */
	background-attachment: fixed; /* L'image reste fixe lors du défilement */
	background-position: center center; /* Centre l'image */
}

.transparent {
	background-color: transparent;
}

footer {
	border-top: 1px solid rgb(222, 219, 212);
}

.footfoot {
	position: fixed;
	width: 100%;
	bottom: 0 !important;
	z-index: 2;
}

.main-content {
	margin-top: 80px; /* Ajustez la marge pour laisser de l'espace pour le menu */
}
.contenu-principal {
	margin-top: 50px;
}

.contenu-principal h1 {
	font-size: 3em;
	margin-bottom: 20px;
	font-family: 'Tan Pearl', sans-serif !important; /* Ajout de Tan Pearl */
}

.titre-armand {
	font-size: 3em;
	margin-bottom: 20px;
	font-family: 'Tan Pearl', sans-serif !important; /* Ajout de Tan Pearl */
}

.tarif {
	font-family: 'Tan Pearl', sans-serif !important; /* Ajout de Tan Pearl */
}

.asterisque {
	font-size: 0.65rem;	
}

.partenaire-logo {
	max-height: 100px; /* Ajustez la hauteur maximale selon vos besoins */
	width: auto; /* Permet de garder les proportions des logos */
}

@media (min-width: 1280px) { /* Applique les styles aux écrans de 768px et plus */
	#about2, #about3, #boutique2, #boutique3 {
		margin-top: -70px;
	}
}

@media (max-width: 991px) { /* Modifié de 767px à 991px pour correspondre à Bootstrap */
	nav .navbar-brand {
		margin-right: 0; /* Supprime la marge à droite du logo */
	}

	nav .navbar-nav {
		display: none; /* Cache le menu horizontal par défaut en mobile */
	}

	.navbar-toggler {
		display: block !important; /* Affiche l'icône "bars" */
	}

	.collapse.navbar-collapse {
		display: none !important; /* Cache le menu repliable initialement */
		position: absolute;
		top: 60px; /* Position sous la barre de navigation */
		left: 0;
		width: 100%;
		background-color: white; /* Fond blanc */
		z-index: 1001; /* Au-dessus des autres éléments */
	}

	.collapse.navbar-collapse.show {
		display: block !important; /* Affiche le menu repliable */
	}

	nav .navbar-nav {
		display: flex;
		flex-direction: column; /* Menu vertical */
		align-items: flex-start; /* Aligne les éléments à gauche */
	}

	nav .nav-item {
		margin: 0; /* Supprime les marges */
		padding: 10px; /* Ajoute un espacement */
		width: 100%; /* Occupe toute la largeur */
		border-bottom: 1px solid #ddd; /* Séparation des éléments */
	}
}

@media (max-width: 767px) {
	.row.align-items-center {
		display: flex;
		flex-direction: column; /* Empile les éléments en colonne */
	}

	.row.align-items-center > div {
		width: 100%; /* Les éléments prennent toute la largeur */
	}

	/* Ordre personnalisé pour les smartphones */
	.order-1-sm {
		order: 1; /* Image en premier */
	}

	.order-2-sm {
		order: 2; /* Texte en second */
	}

	.text-right {
		text-align: left; /* Aligne le texte à gauche */
	}
}