:root {
	--blue-night: #002b5b;
	--text-color: #ffffff;
	--spacing: clamp(1rem, 2vw, 2.5rem);
	--icon-size: clamp(24px, 3vw, 32px);


	--text-color: #ffffff;
	--gray-light: #f4f4f4;
	--input-bg: #ffffff;
	--input-border: #cccccc;

}
h1, .title-condensed {
    font-family: 'Oswald', sans-serif !important;
	margin-top: 5rem!important;
}

body, p, .text-main {
    font-family: 'Montserrat', sans-serif !important;
}
p.aos-init.aos-animate {
    text-align: center!important;
}

.mb-3 {
    margin-bottom: 3rem !important;
    text-align: center;
}

.top-bar-left {
	display: flex;
	margin-left: 1rem;
}

/* Top Bar */
.top-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: var(--gray-light);
	color: var(--blue-night);
	padding: 0.5rem 1rem;
	font-size: 0.9rem;
	height: clamp(30px, 10vw, 80px);
}

.top-bar-left span {
	margin-right: 1rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.top-bar-left i {
	font-size: var(--icon-size);
}

.top-bar-right {
	display: flex;
	align-items: center;
}

.top-bar-right input {
	padding: 1rem;
	border: 1px solid var(--input-border);
	border-radius: 4px 0 0 4px;
	outline: none;
	font-size: 0.9rem;
	width: 200px;
	margin-top: 2rem;
}

.top-bar-right button {
	padding: 0.5rem;
	background-color: var(--blue-night);
	border: none;
	border-radius: 0 4px 4px 0;
	color: var(--text-color);
	cursor: pointer;
}

.top-bar-right button i {
	font-size: var(--icon-size);
}

body {
	margin: 0;
	font-family: Arial, sans-serif;
}

.site-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: var(--blue-night);
	color: var(--text-color);
	padding: var(--spacing);
	height: clamp(30px, 10vw, 30px);
}

.menu-left {
	display: flex;
	align-items: center;
}

.hamburger {
	display: flex;
	align-items: center;
	cursor: pointer;
	font-size: 2rem;
}

.hamburger span {
	margin-left: 0.5rem;
	font-size: var(--font-size);
	color: var(--text-color);
}

.logo h1 {
	font-size: var(--font-size);
	margin: 0;
	text-align: center;
}

.social-icons {
	display: flex;
	gap: 0.5rem;
}

.social-icons a {
	color: #fff;
	font-size: 2rem;
}

.social-icons a img {
	width: var(--icon-size);
	height: var(--icon-size);
	filter: invert(1);
	/* Ensure white icons on dark background */
}

@media (max-width: 768px) {
	.logo h1 {
		font-size: clamp(1.2rem, 4vw, 1.5rem);
	}

	.grid {
		grid-template-columns: repeat(1, 1fr) !important;
		text-align: center !important;
	}

	.hamburger span {
		display: none;
		/* Hide text 'Menu' for small screens */
	}
}

/**********************************
MENU *****************************/
#menu-panel {
	transform: translateX(-100%);
	transition: transform 0.3s ease;
	display: flex;
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
}

.page {
	display: flex;
	position: relative;
	z-index: 2;
	width: 100%;
	
}

.page-left {
	width: 15%;
	border-right: 1px solid #000;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.1));
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	border-radius: 10px;
	padding: 20px;
	color: white;
}

.header-left {
	height: 60px;
	justify-content: center;
	align-items: center;
	display: flex;
}

.fa {
	color: #fff;
	font-size: 2rem;
}

#close-icon {
	cursor: pointer;
	color: #fff !important;
	font-size: 2rem !important;
}

.reseau {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 40%;
	position: absolute;
	bottom: -40px;
}

h3.localiser {
	font-size: 1rem;
	text-align: center;
	font-family: var(--pacifico);
	margin-top: 2rem;
}

p.white {
	color: #fff;
	font-size: 12px;
	margin-top: 2rem;
}

h3.reseaux {
	text-align: center;
	top: 16rem;
	position: relative;
	font-family: var(--dancing);
	font-size: var(--e15);
	color: var(--white);
	margin-bottom: var(--2);
}

.mobile p.white {
	color: #fff;
	font-size: 15px;
	margin-top: 2rem;
}

.reseau img {
	display: block;
	margin: 10px auto;
	/* 10px de marge 
  verticale, centré horizontalement */
	width: 2rem;
	margin-left: 8px;
}

.header-right {
	width: 100%;
	height: 60px;
	background-color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
}

.header-right a {
	color: #fff;
}

ul {
	display: flex;
}

li {
	margin-left: 2rem;
	text-decoration: none;
	list-style-type: none;
}

a {
	text-decoration: none;
	list-style-type: none;
	color: #000;
	font-size: 1rem;
}

.page-right {
	width: 85%;
	background: #fff;
}

.container-right {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.box-white {
	width: 33%;
	height: 100%;
	background-color: #fff;
	transform: translateX(-100%);
	/* Position initiale cachée sur la gauche */
	transition: transform 0.5s ease-out;
	/* Animation douce */
	overflow: hidden;
	/* Cacher le contenu débordant */
	position: relative;
}

.box-white.show-box {
	transform: translateX(0);
	/* Position finale montrée */
}

.box-white img {
	display: block;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
	cursor: pointer;
	opacity: 1;
	/* Opacité initiale à 100% */
	transition: opacity 0.5s;
	/* transition douce lors du changement d'opacité */
	transition-delay: 0.5s;
	transition: transform 0.3s ease-in-out;
}

.box-white:hover img {
	transform: scale(1.1);
	/* Agrandit l'image de 10% */
}

.chef-name {
	position: absolute;
	top: 10%;
	left: 50%;
	transform: translate(-50%, 0);
	color: white;
	background-color: rgba(0, 0, 0, 0.5);
	padding: 5px 10px;
	border-radius: 5px;
	opacity: 0;
	transition: top 0.5s ease-in-out, opacity 0.5s ease-in-out;
	widTh: 77%;
	height: 80px;
	font-size: var(--p15);
	font-family: "Pacifico";
	text-align: center;
}

.box-white:hover .chef-name {
	top: 50%;
	/* Position centrale au survol */
	opacity: 1;
}



/* responsive mobile*/
/************************/
.mobile {
	font-size: 55%;
}

.mobile .container-right {
	display: block;
	OVERFLOW: scroll;
}

.mobile section.first {
	justify-content: var(--center);
}

.mobile .btn-first {
	width: var(--full);
}

.mobile body {
	margin: 0;
	padding: 0;
}

.mobile .carre-1 {
	display: none;
}

.mobile .carre-1-txt-2 {
	width: 100%;
}

.mobile .carre-2 {
	width: 100%;
}

.mobile .carre-2-3 {
	width: 100%;
	display: block;
}

.mobile .carre-2-3-1 {
	width: 100%;
}

.mobile .carre-1-2 {
	width: 100%;
}

.mobile .carre-3 {
	width: 100%;
}

.mobile .carre-4 {
	width: 100%;
}

.mobile .inner-block {
	width: 92%;
}

.mobile .inner-block-right {
	width: 92%;
}

.mobile .left-block-right {
	display: block;
}

.mobile .right-block {
	height: var(--30);
}

.mobile section.white::after {
	bottom: -250%;
}

.mobile section {
	background-size: var(--background-size-cover);
	height: var(--h);
	margin-bottom: calc(var(--e1) * var(--margin-multiplier-2));
}

.mobile section .first {
	background: var(--section-image-apropos) no-repeat center/cover var(--secondary);
	height: var(--h);
	margin-bottom: calc(var(--e1) * var(--margin-multiplier-2));
}

.mobile section .fourth {
	height: var(--h);
	margin-bottom: calc(var(--e1) * var(--margin-multiplier-2));
}

.mobile h1 {
	padding: var(--1);
	margin-top: var(--1);
}

.mobile .carre-spacer {
	display: var(--h);
}

.mobile .btn-box {
	justify-content: var(--center);
}

.mobile .cadre {
	display: none;
}

.mobile img.img-corde {
	position: relative;
	top: 25px;
	right: 0rem;
}

.mobile .carre-1-txt {
	width: 100%;
	margin-top: 10rem;
}

.mobile img.logo-footer {
	margin-top: -10rem;
}

.mobile .carre-footer {
	width: 100%;
	margin-top: 5rem;
}

.mobile .carre-footer img {
	width: 80%;
}

.mobile img.visiter {
	width: 100%;
}

.mobile img.img-corde {
	position: relative;
	top: 25px;
	right: 0rem;
}

.mobile section.footer {
	height: 170vh !important;
}

.mobile .reserve-white.with-image::before {
	display: none;
}

.mobile .reserve-white.with-image::after {
	display: none;
}

.mobile #lightbox-content img {
	width: 90%;
}

.mobile .footer-nav {
	display: flex;
	flex-direction: column;
	align-items: var(--center);
	font-size: var(--e3);
	text-align: var(--center);
}

.mobile .carre-footer h3 {
	font-size: 3em;
	text-align: var(--center);
	font-family: var(--pacifico);
	color: var(--primary);
}

.mobile .sub-footer {
	display: flex;
	justify-content: space-around;
	align-items: var(--center);
	flex-direction: column;
	gap: 0rem;
	text-align: var(--center);
}

.mobile .sub-footer p {
	font-size: var(--e2);
	text-align: var(--center);
}

.mobile img.\31 00 {
	width: 250PX;
	margin-bottom: var(--e2);
	margin-top: -70px;
}

.mobile .header-right {
	display: none;
}

.mobile .container-right {
	display: block;
}

.mobile .box-white {
	width: 100%;
	height: 224px;
}

.mobile h3.reseaux {
	top: 9rem;
	font-size: 2rem;
}

.mobile .page-left {
	width: 100%;
}

/*# sourceMappingURL=main.css.map */






/*---------------------------------------------------------
*	
*	Theme:			cotedeThau
*	Version:			1.0.0
*	Created: 		22/10/2024
*	Last update:	22/10/2024
---------------------------------------------------------*/

/*---------------------------------------------------------
*
*		CONTENT:
*
*			1.  CSS RESET
*			2.  UTILITIES
*			3.  FONTS
*			4.  BUTTONS
*			5.  HEADER AND NAVIVATION
*			6.  SECTIONS
*			7.  CARDS
*			8.  CAROUSELS
*			9.  BLOG
*			10. FOOTER
*			11. RESPONSIVE MEDIA QUERIES
*			12. ANIMATIONS
*
---------------------------------------------------------*/

/*---------------------------------------------------------
*	1. CSS RESET
---------------------------------------------------------*/
* {
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	list-style: none;
	outline: none;
	box-sizing: border-box;
}

:root {
	/* colors */
	--black: #000;
	--white: #fff;
	--grey: #999;
	--light-grey: #efd2c2;
	--primary:#8c7e71;
	/* fonts */
	--ff: 'Prata', serif;
	--ff-2: 'Mulish', sans-serif;
	--fs: 1.15rem;
	/* utilities */
	--gap: 1rem;
	--wlogo: 18rem;
	--trnst: .7s cubic-bezier(0.19, 1, 0.22, 1);
}

html,
body {
	scroll-behavior: smooth;
	
}

body {
	position: relative;
	font-family: var(--ff-2);
	font-size: var(--fs);
	line-height: 1.5;
	color: var(--black);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4 {
	font-family: var(--ff);
	font-size: var(--fs);
	font-weight: 700;
	line-height: 1.25;
	margin-bottom: 1rem;
}

h1 {
	font-size: 2.6rem;
	margin-bottom: 2.5rem;
}

h2 {
	font-size: calc(var(--fs) * 1.418);
	margin-bottom: 1.5rem;
}

h3 {
	font-size: calc(var(--fs) + .5rem);
	color: var(--primary);
}

h4 {
	font-size: calc(var(--fs) + .5rem);
	font-weight: 400;
	text-transform: uppercase;
}

h5 {
	font-size: calc(var(--fs) / 1.618);
	font-weight: 400;
	letter-spacing: .15rem;
	text-transform: uppercase;
	color: var(--grey);
	margin-bottom: 1rem;
}

a {
	color: var(--primary);
	text-decoration: none;
	transition: var(--trnst);
}

a:hover {
	text-decoration: underline;
}



img {
	width: 100%;
}

form {
	display: block;
}

label {
	display: block;
	font-size: calc(var(--fs) / 1.618);
	text-transform: uppercase;
	letter-spacing: .2rem;
	margin-bottom: .3rem;
}

input,
textarea,
select {
	width: 100%;
	border: .1rem solid rgba(0, 0, 0, .1);
	padding: var(--gap);
	margin-bottom: calc(var(--gap) * 2);
	font-family: var(--ff-2);
	font-size: var(--fs);
	transition: var(--trnst);
}

input:hover,
textarea:hover,
select:hover {
	border: .1rem solid rgba(0, 0, 0, 1);
}

.bg-black input,
.bg-black textarea,
.bg-black select {
	border: .1rem solid var(--grey);
	color: var(--white);
}

input[type="checkbox"],
input[type="radio"] {
	width: auto;
}

button,
.btn {
	padding: 1.8em 3em;
	font-family: var(--ff-2);
	font-size: calc(var(--fs) / 1.618);
	text-transform: uppercase;
	font-weight: 600;
	color: var(--white);
	background: var(--black);
	transition: var(--trnst);
}

button:hover:not(.nav-toggle),
.btn:hover:not(.nav-toggle) {
	background: var(--primary);
}

a.btn,
a.btn:hover {
	display: inline-block;
	text-decoration: none;
}

ul.list li {
	list-style: disc;
	margin-left: 2rem;
}

aside ul li {
	padding-block: 1rem;
}

aside ul li:not(:last-child) {
	border-bottom: .1rem solid var(--light-grey);
}


iframe {
	width: 100%;
	min-height: 20rem;
	margin-bottom: -.5rem;
	margin-top: 3rem;
}

hr {
	border-bottom: .1rem solid var(--grey);
}

table thead {
	display: none;
}

table tr {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: column;
	border-bottom: .1rem solid var(--grey);
}

table th,
table td {
	padding: var(--gap);
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.skip-to-content {
	position: absolute;
	z-index: 9999;
	background: rgba(255, 255, 255, .9);
	padding: .5em 1em;
	margin-inline: auto;
	transform: translateY(-100%);
	transition: transform 250ms ease-in;
}

.skip-to-content:focus {
	transform: translateY(0);
}

#goTop {
	display: block;
	position: fixed;
	right: 2rem;
	bottom: 2rem;
	padding: var(--gap);
	color: var(--white);
	opacity: .65;
	font-size: var(--fs);
	transition: var(--trnst);
}

#goTop:hover {
	opacity: 1;
}

[hidden],
.hidden {
	display: none !important;
}

/*-------------------------------------------------------
*	PRELOAD
-------------------------------------------------------*/
#preload {
	opacity: 1;
	display: block;
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: var(--gap);
	color: var(--white);
	background: var(--black);
	transform: matrix(1, 0, 0, 1, 0, 0);
	transition: var(--trnst);
	transition-duration: 1.5s;
	z-index: 99999;
}

#preload.loaded {
	opacity: 0;
	visibility: collapse;
}

/*-------------------------------------------------------
*	2. UTILITIES
-------------------------------------------------------*/
.container {
	max-width: 70rem;
	padding-inline: var(--gap);
	margin-inline: auto;
}

.container-xl {
	max-width: 100%;
	padding-inline: var(--gap);
}

.block {
	display: block;
}

.grid {
	display: grid;
	gap: calc(var(--gap) * 2);
}

.flex {
	display: flex;
	gap: var(--gap);
}

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

.flex-wrap {
	flex-wrap: wrap
}

.items-start {
	align-items: start;
}

.items-center {
	align-items: center !important;
}

.justify-between {
	justify-content: space-between;
}

.gap-0 {
	gap: 0;
}

.gap {
	gap: var(--gap);
}

.gap-x3 {
	gap: calc(var(--gap) * 3);
}

.span2 {
	grid-column: span 2;
}

.d-sm-none {
	display: none;
}

.w-100 {
	width: 100%;
}

.p-0 {
	padding: 0 !important;
}

.p-10x100 {
	padding: 10%;
}

.pln-5x100 {
	padding-inline: 5%;
}

.pt-4 {
	padding-top: 4rem;
}

.pbk-2 {
	padding-block: 2rem;
}

.pbk-6 {
	padding-block: 6rem;
}

.pbk-8 {
	padding-block: 8rem;
}

.pb-8 {
	padding-bottom: 8rem;
}

.m-auto {
	margin: auto;
}

.mb-0 {
	margin-bottom: 0 !important;
}

.mb-1 {
	margin-bottom: 1rem !important;
}

.mb-2 {
	margin-bottom: 2rem;
}

.mb-3 {
	margin-bottom: 3rem !important;
}

.mb-5 {
	margin-bottom: 5rem !important;
}

.translateY--7 {
	transform: translateY(-7rem) !important;
}

.fl-right {
	float: right;
}

.overlay,
.overlay-gradient {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .6);
	z-index: 1;
}

.overlay-gradient {
	background: linear-gradient(rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 1));
}

.bg-black {
	background: var(--black);
}

.bg-white {
	background: var(--white);
}

.bg-light {
	background-color: var(--blue-night);
}

.bg-primary {
	background: var(--primary);
}

.bg-half {
	background: linear-gradient(var(--halfColors));
}

.bg-img {
	background-image: var(--imgUrl);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.object-cover {
	object-fit: cover;
	height: 100%;
}

.txt-primary {
	color: var(--primary);
}

.txt-white {
	color: var(--white);
}

.txt-red {
	color: red;
}

.txt-black {
	color: var(--black);
}

.txt-center {
	text-align: center;
}

.upper {
	text-transform: uppercase;
}

.italic {
	font-style: italic;
}

.txt-linethrough {
	text-decoration: line-through;
}

.title-line {
	position: relative;
	display: inline-block;
	width: 3rem;
	height: .1rem;
	margin-bottom: 2rem;
	background: var(--primary);
}

.badge {
	position: absolute;
	top: var(--gap);
	right: var(--gap);
	background-color: var(--primary);
	color: var(--white);
	font-family: var(--ff);
	font-size: calc(var(--fs) / 1.618);
	font-weight: 600;
	padding: .5rem var(--gap);
	text-align: center;
	z-index: 15;
}

/*-------------------------------------------------------
*	5. HEADER
-------------------------------------------------------*/
header {
	position: absolute;
	display: grid;
	place-content: center;
	width: 100%;
	padding-inline: var(--gap);
	padding-block: 2rem;
	z-index: 999;
}

header a {
	line-height: 0;
}

header a img {}

.nav-toggle {
	position: fixed;
	top: 20%;
	right: 0;
	width: 4rem;
	padding: 1.4rem 1.5rem 1.4rem 1rem;
	background-color: var(--black);
	transition: var(--trnst);
	cursor: pointer;
	transform: translateX(.6rem);
	z-index: 9999;
}

.nav-toggle .bar1,
.nav-toggle .bar2,
.nav-toggle .bar3 {
	width: 100%;
	float: right;
	height: .1rem;
	margin-block: .2rem;
	background: var(--white);
	transition: var(--trnst);
}

.nav-toggle:hover {
	transform: translateX(0);
}

.nav-toggle:hover .bar2 {
	width: 55%;
}

.nav-toggle[aria-expanded=true] {
	padding: 1.6rem 2rem 1.2rem .5rem;
	margin-right: .5rem;
	background: var(--white);
}

.nav-toggle[aria-expanded=true] .bar1,
.nav-toggle[aria-expanded=true] .bar2,
.nav-toggle[aria-expanded=true] .bar3 {
	background: var(--black);
}

.nav-toggle[aria-expanded=true] .bar1 {
	transform: rotate(45deg) translate(25%);
}

.nav-toggle[aria-expanded=true] .bar2 {
	transform: rotate(-45deg) translate(25%);
}

.nav-toggle[aria-expanded=true] .bar3 {
	opacity: 0;
}

.nav-toggle[aria-expanded=true]:hover {
	padding: 1.4rem 1.5rem 1.4rem 1rem;
	margin-right: 0;
}

.nav-toggle[aria-expanded=true]:hover .bar1,
.nav-toggle[aria-expanded=true]:hover .bar2 {
	transform: none;
}

.nav-toggle[aria-expanded=true]:hover .bar3 {
	opacity: 1;
}

.nav-toggle span.current-page {
	position: absolute;
	top: 100%;
	right: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 4rem;
	padding-top: 3rem;
	font-family: var(--ff-2);
	font-size: .65rem;
	letter-spacing: .2rem;
	text-transform: uppercase;
	white-space: nowrap;
	writing-mode: vertical-rl;
	color: var(--grey);
	background: var(--black);
	transform: rotate(180deg);
	transition: var(--trnst);
}

.nav-toggle[aria-expanded=true] span.current-page {
	display: none;
}

.nav-overlay {
	opacity: 0;
	visibility: hidden;
	transition: var(--trnst);
}

nav#navbar {
	position: fixed;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	flex-direction: column;
	padding: var(--gap) 1.8rem;
	background: var(--black);
	overflow-y: auto;
	transform: translateX(100%) matrix(1, 0, 0, 1, 0, 0);
	transition: var(--trnst);
	z-index: 1000;
}

nav#navbar[data-visible=true] {
	transform: translateX(0) matrix(1, 0, 0, 1, 0, 0);
}

nav#navbar ul {
	padding-left: 1rem;
}

nav#navbar ul li {
	padding-block: .3rem;
}

nav#navbar ul li a,
nav#navbar ul li span {
	font-family: var(--ff);
	font-size: 1.5rem;
	text-decoration: none;
	color: var(--white);
}

nav#navbar ul li a.active {
	color: var(--primary);
}

nav#navbar ul.lang {
	display: flex;
	flex-direction: row;
	gap: var(--gap);
	padding-bottom: 8%;
}

nav#navbar ul.lang li a {
	font-family: var(--ff-2);
	font-size: .8rem;
	font-weight: 800;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: .15rem;
	color: var(--grey);
}

nav#navbar ul.lang li a.active {
	color: var(--white);
}

nav#navbar ul.lang {
	display: flex;
	flex-direction: row;
	gap: var(--gap);
	padding-bottom: 8%;
}

nav#navbar ul.lang li a {
	font-family: var(--ff-2);
	font-size: .8rem;
	font-weight: 800;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: .15rem;
	color: var(--grey);
}

nav#navbar ul.secondary li {
	padding-block: .2rem;
}

nav#navbar ul.secondary li a {
	font-size: 1rem;
	color: var(--grey);
}

nav#navbar ul.lang li a.active,
nav#navbar ul.secondary li a.active {
	color: var(--white);
}

nav#navbar>ul li.has-submenu ul.submenu {
	padding-block: 0;
	padding-left: 2rem;
	height: 0;
	opacity: 0;
	visibility: collapse;
	transform: translateY(-20%);
	transition: var(--trnst);
}

nav#navbar>ul li.has-submenu:hover>span,
nav#navbar>ul li.has-submenu.active>span {
	cursor: pointer;
	color: var(--primary);
	transition: var(--trnst);
}

nav#navbar>ul li.has-submenu.active ul.submenu {
	padding-block: var(--gap);
	height: auto;
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

nav#navbar>ul li.has-submenu ul.submenu li a {
	font-size: 1.25rem;
}

.nav-image {
	display: none;
}

/*-------------------------------------------------------
*	6. HERO
-------------------------------------------------------*/
.hero-slider {
	min-height: max(42rem, 100vh);
	position: relative;
	background-color: var(--primary);
	overflow: hidden;
}

.hero-slider h1 {
	font-size: 1.8rem;
}

.hero-slider ul.hero-bg>li {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transition: var(--trnst);
}

.hero-content {
	position: absolute;
	inset: 0;
	padding: var(--gap);
	padding-top: 8%;
	flex-direction: column;
	align-items: end;
	gap: var(--gap);
	color: var(--white);
}

.hero-page {
	min-height: max(15rem, 55vh);
	padding: var(--gap);
	padding-block: 15% 8%;
	color: var(--white);
}

.hero-page h1 {
	font-size: 2.5rem;
	padding-top: 3rem;
	margin-bottom: 0;
}

.hero-page.hero-page-sm {
	min-height: max(15rem, 35vh);
}

.hero-content *:not(.overlay),
.hero-page *:not(.overlay) {
	letter-spacing: .1rem;
	z-index: 2;
}

/*-------------------------------------------------------
*	7. YT POP UP
-------------------------------------------------------*/
.yt-popup-btn {
	position: relative;
	display: inline-block;
	aspect-ratio: 1;
	border-radius: 100%;
	border: .2rem solid var(--white);
	background: transparent;
	transition: var(--trnst);
}

.yt-popup-btn i {
	transform: scale(3);
	color: var(--white);
	transition: var(--trnst);
}

.yt-popup-btn:before {
	content: "";
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: 100%;
	background: var(--white);
	transform: scale(0);
	transition: var(--trnst);
}

.yt-popup-btn:hover {
	border: .2rem solid var(--primary);
	background: transparent;
}

.yt-popup-btn:hover i {
	color: var(--primary);
}

.yt-popup-btn:hover:before {
	transform: scale(1);
}

.yt-popup {
	display: none;
	position: fixed;
	inset: 0;
	background-color: rgba(0, 0, 0, .65);
	z-index: 9999;
}

.yt-popup .yt-popup-content {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 95%;
	aspect-ratio: 3/2;
	transform: translate(-50%, -50%);
}

.yt-popup .yt-popup-content .close-yt-popup {
	float: right;
	color: var(--white);
	cursor: pointer;
}

.yt-popup .yt-popup-content iframe {
	width: 100%;
	height: 100%;
}

/*-------------------------------------------------------
*	CARD
-------------------------------------------------------*/
.card {
	position: relative;
	background:#8c7e71;
	padding: calc(var(--gap) * 2);
	padding-top: 0;
	text-align: center;
}

.card a:not(.btn),
.card a:hover:not(.btn) {
	text-decoration: none;
	color: var(--black);
}

.card>a.img {
	padding-top: calc(var(--gap) * 2);
	position: relative;
	display: inline-block;
	overflow: hidden;
}

.card>a img {
	max-width: 40%;
}

.card>a:hover img {
	transform: scale(1.09, 1.09);
	transition: var(--trnst);
	transition-duration: 5s;
}

.card-img a {
	position: relative;
	width: 100%;
	height: 100%;
	line-height: 0;
	aspect-ratio: 5/4;
}

.card-img a img {
	object-fit: cover;
	max-width: unset !important;
	height: 100%;
}

.card-img .absolute {
	position: absolute;
	bottom: 0;
	width: 100%;
	z-index: 5;
	transition: var(--trnst);
}

.card-img:hover .absolute {
	transform: translateY(-1.5rem);
}

.card-img i {
	display: block;
	opacity: 0;
	transform: translateY(1rem);
	transition: var(--trnst);
}

.card-img:hover i {
	transform: translateY(0);
	opacity: 1;
}

/*-------------------------------------------------------
*	SWIPER
-------------------------------------------------------*/
.swiper {
	position: relative;
}

.swiper-slide {
	display: grid;
	transition: var(--trnst);
}

.swiper-slide>*>* {
	animation: fadeInDown 1s ease-in-out;
}

.swiper-slide-img>img {
	animation: fadeInLeft 1s ease-in-out;
}

.swiper-image {
	padding: 15%;
	text-align: center;
	background: var(--white);
}

.swiper-image img {}

.swiper h3 {
	font-size: var(--fs);
	font-weight: 500;
}

.swiper p.separator {
	border-bottom: .1rem solid rgba(0, 0, 0, .1);
	padding-bottom: 2rem;
	margin-bottom: 2rem;
}

.swiper-controls {
	position: absolute;
	top: 3rem;
	width: 100%;
	z-index: 999;
}

.swiper-controls-bottom {
	top: unset;
	bottom: .7rem;
}

.swiper-controls svg {
	width: 6.5rem;
	height: auto;
	cursor: pointer;
	padding: 1rem 2rem;
	fill: var(--light-grey);
	transition: var(--trnst);
}

.swiper-controls-bottom svg {
	fill: var(--black);
}

.swiper-controls svg#swiper-next {
	float: right;
}

.swiper-controls svg#swiper-previous:hover {
	transform: translateX(-.5rem);
}

.swiper-controls svg#swiper-next:hover {
	transform: translateX(.5rem);
}

ul.swiper-bullets {
	padding-block: 2rem;
}

ul.swiper-bullets li {
	position: relative;
	padding: 1rem 2rem;
	color: var(--grey);
	cursor: pointer;
	transition: var(--trnst);
}

ul.swiper-bullets li.active {
	color: var(--black);
}

ul.swiper-bullets.swiper-bullets-only li {
	padding: .5rem 0;
}

ul.swiper-bullets li.active::after,
ul.swiper-bullets.swiper-bullets-only li::after {
	content: '';
	position: absolute;
	left: calc(50% - .2rem);
	bottom: -.2rem;
	display: block;
	width: .5rem;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--primary);
	transition: var(--trnst);
}

ul.swiper-bullets.swiper-bullets-only li::after {
	left: 0;
	bottom: 0;
	background: var(--grey);
	z-index: 999;
}

ul.swiper-bullets.swiper-bullets-only li.active::after {
	background: var(--black);
}

/*-------------------------------------------------------
*	PRODUCT LAYOUT
-------------------------------------------------------*/
.prod-layout {
	position: relative;
	display: flex;
	align-items: flex-start;
	flex-direction: column;
	gap: calc(var(--gap) * 2);
	padding-block: 6rem;
}

.prod-layout>nav ul {
	display: flex;
	gap: var(--gap);
	font-size: .98rem;
}

.prod-layout>nav a {
	color: var(--grey);
}

.prod-layout>nav a.active {
	color: var(--primary);
}

.prod-layout>img {
	max-width: 50%;
	margin-inline: auto;
}

.prod-layout>article div.d-sm-none>*:not(h2) {
	margin-bottom: 11%;
}

.prod-layout>article div.d-sm-none>h2 {
	margin-bottom: 7%;
}

.prod-layout>article .upper,
.prod-layout>article a.upper {
	font-size: .9rem;
	font-weight: 600;
	letter-spacing: .1rem;
	color: var(--black);
}

.prod-layout>article a.upper {
	display: flex;
	align-items: center;
	gap: .6rem;
}

.prod-layout>article a.upper svg {
	width: 3rem;
	fill: none;
	stroke-width: .12rem;
	stroke: var(--black);
	stroke-linecap: round;
	stroke-linejoin: round;
}

.prod-layout>article a.upper i {
	transform: scale(2);
	margin: 1rem .5rem 0 .6rem;
}

.prod-layout>nav a:hover,
.prod-layout>article a.upper:hover {
	text-decoration: none;
	color: var(--primary);
}

/*-------------------------------------------------------
*	FAQ
-------------------------------------------------------*/
.faq {
	position: relative;
	display: block;
	margin-inline: -1rem;
	border-bottom: .1rem solid var(--grey);
	transition: var(--trnst);
	overflow: hidden;
}

.faq .faq-question {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 2rem;
	align-items: center;
	gap: var(--gap);
	padding: var(--gap) 8%;
	transition: var(--trnst);
}

.faq .faq-question::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 99;
}

.faq .faq-question:hover {
	background: var(--light-grey);
}

.bg-black .faq .faq-question:hover {
	background: var(--grey);
}

.faq .faq-question h2 {
	margin-bottom: 0;
}

.faq .faq-answer {
	opacity: 0;
	height: 0;
	padding: 0 8%;
	transform: translateY(-100%);
	transform-origin: top;
	transition: var(--trnst), opacity .3s ease-in-out;
	transition-duration: 1.5s;
}

.faq[data-faq-opened=true] .faq-question {
	background: var(--light-grey);
}

.bg-black .faq[data-faq-opened=true] .faq-question {
	background: var(--grey);
}

.faq[data-faq-opened=true] .faq-answer {
	opacity: 1;
	height: auto;
	padding: calc(var(--gap) * 2) 8%;
	transform: translateY(0);
}

.faq button {
	padding: 0;
	color: var(--black);
	background: none;
}

.bg-black .faq button {
	color: var(--white);
}

/*-------------------------------------------------------
*	SERVICES
-------------------------------------------------------*/
.service-block {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}

.service-block>a {
	position: relative;
	display: inline-block;
	line-height: 0;
	overflow: hidden;
}

.service-block>a:hover img {
	transform: scale(1.09, 1.09);
	transition: var(--trnst);
	transition-duration: 5s;
}

.service-block>div {
	display: grid;
	place-content: center;
	place-items: start;
	padding: 6vh 12vw;
	background-color: var(--light-grey);
}

.service-block.p-sm>div {
	padding: 20% 10%;
}

/*-------------------------------------------------------
*	7. BLOG
-------------------------------------------------------*/
.post {
	background: var(--white);
}

.post>a:first-child {
	position: relative;
	display: inline-block;
	line-height: 0;
	overflow: hidden;
}

.post>a:hover img {
	transform: scale(1.09, 1.09);
	transition: var(--trnst);
	transition-duration: 5s;
}


/*-------------------------------------------------------
*	8. FOOTER
-------------------------------------------------------*/
footer {
	padding-inline: 1rem;
	padding-block: 5rem 2rem;
	background: var(--black);
	color: var(--white);
}

footer h3 {
	margin-bottom: calc(var(--gap) * 2);
}

footer h4 {
	font-family: var(--ff-2);
}

footer .logo img {
	display: block;
	width: 3rem;
	margin-bottom: 2rem;
}

footer ul.li li {
	margin-bottom: var(--gap);
}

footer button {
	background-color: var(--primary);
}

footer button:hover {
	background-color: var(--grey);
}

footer input {
	color: var(--white);
	border-color: rgba(255, 255, 255, .5);
}

footer input:hover,
footer input:focus {
	border-color: var(--primary);
}


/*-------------------------------------------------------
*	11. RESPONSIVE MEDIA QUERIES
-------------------------------------------------------*/
@media (min-width: 780px) {

	/* preload */
	#preload img {
		width: calc(var(--wlogo) * 1.618);
	}

	/* reset */
	h1 {
		font-size: calc(var(--fs) * 2.618);
	}

	/* utilities */
	.container-xl {
		padding-inline: 4%;
	}

	.d-sm-none {
		display: block;
	}

	.d-lg-none {
		display: none;
	}

	.w-50 {
		width: 50%;
	}

	.grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.gtc-2-1 {
		grid-template-columns: 2fr 1fr;
	}

	.gtc-3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.gtc-4 {
		grid-template-columns: repeat(4, 1fr);
	}

	.bg-zoom {
		animation: zoom 6s ease-in-out;
		transition: var(--trnst);
	}

	table thead {
		display: block;
	}

	table tr {
		flex-direction: row;
	}

	/* header */
	.nav-overlay[data-visible=true] {
		opacity: 1;
		visibility: visible;
	}

	nav#navbar {
		width: 80%;
		flex-direction: row;
		justify-content: flex-start;
		align-content: flex-start;
		flex-wrap: wrap;
		padding-block: 0 2rem;
	}

	nav#navbar ul {
		padding-left: 5%;
		min-width: 25%;
	}

	nav#navbar ul.lang {
		width: 100%;
		padding-block: 10% 8%;
	}

	.nav-image {
		position: fixed;
		right: 0;
		display: block;
		width: 100%;
		opacity: 0.5;
		margin-left: auto;
		z-index: -2;
	}

	/* hero */
	.hero-page {
		padding-block: 8% 4%;
	}

	.hero-page.hero-page-sm {
		align-items: end;
	}

	.hero-slider h1,
	.hero-page h1 {
		font-size: 1.4rem;
		width: 80%;
	}

	/* youtube popup */
	.yt-popup .yt-popup-content {
		width: 42rem;
	}

	/* card */
	.card>a img {
		max-width: 60%;
	}

	/* swiper */
	.swiper-slide:not(.swiper-slide-img) {
		grid-template-columns: repeat(2, 1fr);
	}

	.swiper-controls svg#swiper-next {
		fill: var(--black);
	}

	/* product layout */
	.prod-layout {
		flex-direction: row;
		padding-block: 6%;
	}

	.prod-layout>nav {
		width: 20%;
	}

	.prod-layout>nav ul {
		flex-direction: column;
		gap: calc(var(--gap) / 2);
	}

	.prod-layout>img {
		max-width: 30rem;
		margin-inline: 10%;
	}

	/* services */
	.service-block {
		grid-template-columns: repeat(2, 1fr);
	}

	.service-block>a img {
		height: 100%;
		object-fit: cover;
	}

	.service-block:nth-child(2n)>a {
		order: 2;
	}

	.service-block>div {
		padding: 12vh 8vw;
	}
}

/*-------------------------------------------------------
*	12. ANIMATIONS
-------------------------------------------------------*/
@keyframes fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes fadeInDown {
	from {
		transform: translateY(2rem);
		opacity: 0;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes fadeInLeft {
	from {
		transform: translateX(2rem);
		opacity: 0;
	}

	to {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes zoom {
	from {
		background-size: 105%;
	}

	to {
		background-size: 125%;
	}
}



.sound-icon {
	position: absolute;
	top: 50%;
	right: 3%;
	background: #fff;
	border-radius: 50%;
	padding: 1rem;
	cursor: pointer;
	width: 25px;
	height: 25px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hidden {
	visibility: hidden;
	/* Masque l'élément mais conserve son espace */
	opacity: 0;
	/* Rendre l'élément transparent */
	transition: visibility 0s 0.5s, opacity 0.5s linear;
	/* Ajouter une transition douce */
}


#search-results {
	margin-top: 10px;
	border: 1px solid #ddd;
	padding: 10px;
	max-height: 300px;
	overflow-y: auto;
}

#search-results div {
	display: flex;

	padding: 5px 0;
}

#search-results img {
	border-radius: 5px;
	object-fit: cover;
}



/* 🌟 HEADER PRINCIPAL */
.header-th {

	height: 80px;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* Répartition équilibrée */
	padding: 0 20px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	gap: 20px;
	position: fixed;
	z-index: 10000;
	top: 0;
	width: 100%;
}

/* 🌟 LOGO */


/* 🌟 NAVIGATION */
.nav-th {
	flex: 1;
	/* Prend tout l'espace disponible */
	display: flex;
	justify-content: center;
}

.nav-th ul {
	display: flex;
	list-style: none;
	gap: 20px;
	margin: 0;
	padding: 0;
	flex-wrap: nowrap;
	/* Empêche le passage à la ligne */
}

.nav-th li a {
	text-decoration: none;
	color: #000;
	font-weight: 600;
	transition: color 0.3s ease;
}

.nav-th li a:hover {
	color: #39babe;
}





.search-bar input:focus {
	border: 1px solid #0078D7;
	box-shadow: 0 0 5px rgba(0, 120, 215, 0.5);
}



.translate {
	DISPLAY: FLEX;
	GAP: 1REM;
}

/* 🌟 RESPONSIVE */
@media (max-width: 1024px) {
	.header-th {
		flex-wrap: wrap;
		
	}

	.logo-th {
		margin-bottom: 10px;
	}

	.nav-th {
		justify-content: center;
		margin: 10px 0;
	}

	.nav-th ul {
		flex-wrap: wrap;
		/* Les liens passent à la ligne si nécessaire */
		justify-content: center;
		gap: 10px;
	}

	.search-bar {
		margin-left: 0;
		/* Annule le décalage sur mobile */
		margin-top: 10px;
		width: 90%;
		max-width: 400px;
	}
}

/* 🌟 Menu Hamburger */
.menu-toggle {
	font-size: 28px;
	cursor: pointer;
	display: none;
	position: absolute;
	right: 20px;
	top: 20px;
	z-index: 1001;
	color: #333;
}

/* 🌟 Menu Responsive */
.responsive-nav {
	position: fixed;
	top: 0;
	right: -100%;
	width: 300px;
	height: 100%;
	background: #fff;
	box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
	z-index: 1000;
	display: flex;
	flex-direction: column;
	transition: right 0.3s ease-in-out;
}

.responsive-nav.active {
	right: 0;
}

.responsive-nav-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px 20px;
	border-bottom: 1px solid #ddd;
}

.responsive-nav-header h3 {
	margin: 0;
	font-size: 18px;
	font-weight: bold;
}

.responsive-nav-header i {
	font-size: 24px;
	cursor: pointer;
}

.responsive-nav ul {
	list-style: none;
	margin: 0;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.responsive-nav ul li a {
	text-decoration: none;
	color: #333;
	font-size: 16px;
	transition: color 0.3s;
}

.responsive-nav ul li a:hover {
	color: #0078D7;
}

/* 🌟 Responsive Design */
@media (max-width: 768px) {
	.menu-toggle {
		display: block;
	}

	.nav-th {
		display: none;
	}

	.footer .box-footer {
		width: 100% !important;
	}

	.footer {
		display: block !important;
		height: 100% !important;
	}

	.box-footer.quick-links {
		margin-top: 3rem;
	}

	.subfooter {
		display: block !important;
		text-align: center !important;
	}
}



/*  gtranslate */


  
  .gtranslate_wrapper a {
	position: relative;
	text-decoration: none;
	margin: 0 5px;
  }
  
  .gtranslate_wrapper a:nth-child(1)::after {
	content: '/';
	margin-left: 20px;
	color: #000; /* Couleur de la barre oblique */
  }
  

  .nav-th li a {
    text-decoration: none;
    color: #000;
    font-weight: 600;
    transition: color 0.3s ease;
    font-size: 13px;
}




/* Barre de recherche glissante */
.search-bar-container {
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    height: 80px;
    background-color: rgb(59 186 189);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: left 0.3s ease-in-out;
    z-index: 1000;
}
  
  .search-bar {
	display: flex;
	align-items: center;
	width: 80%;
  }
  
  .search-bar input {
    flex: 1;
    padding: 10px;
    font-size: 16px;
    border: none;
    border-radius: 5px 0 0 5px;
    outline: none;
    background-color: #ffff;
    margin-top: 2rem;
}
  
  .search-bar button {
    background: #ff0000;
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    
}
  
  .search-bar button:hover {
	background: #cc0000;
  }
  
  /* Barre visible */
  .search-bar-container.active {
	left: 0;
  }



  #suggestions {
    position: absolute;
    top: 100%;
    /* left: 15%; */
    background: white;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #ddd;
    list-style: none;
    padding: 0;
    margin: 0;
    z-index: 2000;
    display: flex;
    flex-direction: column;
}
  #suggestions li {
	padding: 10px;
	cursor: pointer;
  }
  
  #suggestions li:hover {
	background: #f0f0f0;
  }


  #notreigp {
    line-height: 1;
    display: flex;
    align-items: center;
    
    margin:auto!important;
}

#map {
    width: 100%;
    height: 500px;
    background: #b5dedf!important;
}


.beziers-separator-tilted {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:30px;
    margin:40px 0;
}

.sep-title {
    font-size:28px;
    font-weight:600;
    margin:0;
    text-align:center;
    font-family:"Georgia", serif;
    white-space:nowrap;
}

/* Groupes */
.cluster {
    display:none!important;
    flex-direction:column;
    gap:6px;
}

/* Base des traits */
.cluster span {
    display:block;
    height:6px;
    border-radius:4px;
    transform-origin:left center;
}

/* Couleurs inspirées du logo */
.cluster span:nth-child(1) { background:#838C74; } /* vert olive */
.cluster span:nth-child(2) { background:#A3B3C3; } /* bleu gris */
.cluster span:nth-child(3) { background:#D8825B; } /* terracotta */
.cluster span:nth-child(4) { background:#CC594C; } /* rouge pierre */
.cluster span:nth-child(5) { background:#D7C7A5; } /* beige pierre */

/* Tailles et inclinaisons aléatoires */
.left span:nth-child(1)  { width:45px; transform:rotate(-8deg); }
.left span:nth-child(2)  { width:30px; transform:rotate(5deg); }
.left span:nth-child(3)  { width:55px; transform:rotate(-14deg); }
.left span:nth-child(4)  { width:38px; transform:rotate(12deg); }
.left span:nth-child(5)  { width:50px; transform:rotate(-6deg); }

.right span:nth-child(1) { width:50px; transform:rotate(10deg); }
.right span:nth-child(2) { width:32px; transform:rotate(-12deg); }
.right span:nth-child(3) { width:60px; transform:rotate(6deg); }
.right span:nth-child(4) { width:38px; transform:rotate(-4deg); }
.right span:nth-child(5) { width:46px; transform:rotate(14deg); }



/* ===== FIX STICKY TERRITOIRE ===== */

.container,
.grid,
.page,
.page-right,
.hero-slider {
    overflow: visible !important;
}

.territoire-col-image {
    position: sticky !important;
    top: 0 !important;
}