@charset=UTF-8;
/* CSS Document */


a.blancext{color:white;text-decoration:none}          /*les liens en général*/
a:hover.blancext{color: white;text-decoration: underline}    /*quand on passe la souris sur un lien*/
a:active.blancext{color:white;text-decoration:none}   /*quand on clique sur le lien*/
a:visited.blancext{color:white;text-decoration:none}  /*quand le lien a déja été visité*/
a:focus.blancext{outline:0;}



/* ysabeau-600 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Ysabeau';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/ysabeau-v5-latin-500.woff2') format('woff2');
}

@font-face {
  font-display: swap; 
  font-family: 'Ysabeau';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/ysabeau-v5-latin-200.woff2') format('woff2');
}


@font-face {
  font-display: swap; 
  font-family: 'Ysabeau';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/ysabeau-v5-latin-italic.woff2') format('woff2');
}

/* Nocturne serif light italic */
@font-face {
  font-display: swap; 
  font-family: 'Nocturne';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/NocturneSerif-ExtraLightitalic.woff2') format('woff2');
}

@font-face {
  font-display: swap; 
  font-family: 'Nocturne';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/NocturneSerif-Lightitalic.woff2') format('woff2');
}

.mobilespacers {
	display:none;
}

.menu {
	font-family: 'Ysabeau', Helvetica, sans-serif;
	font-size: 30px;
	line-height: 35px;
	font-style: normal;
	color: #000;
	text-decoration: none;
	/*position*/
	position: fixed;
	top: 60px;
	left: min(85px, 10%);
	width: 600px;
	z-index: 2;
}

.menu a {
	display: block;
	text-shadow: 0px 2px 6px rgba(0,0,0,0.5),
		0px 0px 2px rgba(0,0,0,0.4);
}

.menu2 {
	font-family: 'Ysabeau', Helvetica, sans-serif;
	font-size: 30px;
	line-height: 35px;
	font-style: normal;
	color: #000;
	text-decoration: none;
	/*position*/
	position: fixed;
	top: 60px;
	right: min(58px, 10%);
	width: 600px;
	text-align: right;
	z-index: 2;
	text-shadow: 0px 2px 6px rgba(0,0,0,0.5),
		0px 0px 2px rgba(0,0,0,0.4);
}


/*Fond écran*/

.active {
	font-size: 45px;
	margin-bottom:45px;
	margin-top:25px;
	font-style: italic;
	font-weight: 400;
}

.first.active {
	margin-top:0;
}

#accueil { 
  margin: 0;
  padding: 0;
  height:100;
  width:100vw;
  background: url("../img_webp/FHM.webp") no-repeat fixed; 
  background-position: 89% center;
  -webkit-background-size: cover;
  background-size: cover;
}

body#homebody {
	margin: 0 !important;
}



.SINGLE_IMAGE,
.TWO_IMAGES_SBS {
  height: 91dvh;              
  display: flex;
  justify-content: center;    
  align-items: center;         
  overflow: hidden;          
  scroll-snap-align: start; 
  scroll-snap-stop: always; 
  position: relative;
}

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

.TWO_IMAGES_SBS img {
  width: 50%;
  height: 100%;
  object-fit: cover;    
}

/* Optional: remove unwanted spacing */
img.IMAGE_RESPONSIVE {
  display: block;
}


/*Légendes*/


.legende {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 14px;
	font-style: normal;
	color: #000;
	text-decoration: none;
	/*position*/
	position: absolute;
	top: 28px;
	left: 50%;
	width: 500px;
	margin-left: -250px;
	text-align: center;
}


.legende2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 14px;
	font-style: normal;
	color: #FFFFFF;
	text-decoration: none;
	/*position*/
	position: absolute;
	top: 28px;
	left: 50%;
	width: 500px;
	margin-left: -250px;
	text-align: center;
}




.footername {
	font-family: 'Nocturne', Helvetica, sans-serif;
	font-size: 70px;
	line-height: 84px;
	font-style: italic;
	color: #ffffff;
	text-decoration: none;
	/*position*/
	position: absolute;
	bottom: 190px;
	left: 50%;
	width: 50%;
	min-width:500px;
	transform: translateX(-50%);
	text-align: center;
}


.copyright2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 14px;
	font-style: normal;
	color: #FFFFFF;
	text-decoration: none;
	/*position*/
	position: absolute;
	bottom: 28px;
	left: 50%;
	width: 500px;
	margin-left: -250px;
	text-align: center;
}



.offcanvas {
  position: fixed;
  inset: 0;                 
  display: flex;
  justify-content: center;
  align-items: flex-start;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
  z-index: 9999;
}

.offcanvas-inner {
  position: relative;
  width: 100vw;
  margin: 0;
  background: #B2B2B2EB;
  border: 1px solid #707070;
  transform: translateY(-100%);
  transition: transform 300ms ease;
  max-height: 100dvh;
  overflow:hidden;
}

.offcanvas.is-open {
  opacity: 1;
  pointer-events: auto;
}

.offcanvas.is-open .offcanvas-inner {
  transform: translateY(0);
}

/* Close button */
.offcanvas-close {
  position: absolute;
  top: 35px;
  right: 33px;
  background: transparent;
  border: none;
  cursor: pointer;
}

/* You can style content inside panel */
#offcanvas-content {
  display:grid;
  grid-template-columns: 1fr 1fr;
}

.legende_droite {
	position: absolute;
	right: max(25%, 250px);
	bottom: 100px;
	display: flex;
	flex-direction: column;
	width: 350px;
	transform: translateX(50%);
	color: #fff;
}

.legende_gauche {
	position: absolute;
	left: 25%;
	transform: translateX(-50%);
	bottom: 100px;
	display: flex;
	flex-direction: column;
	width: 350px;
	color: #fff;
}

.legende_haut_droite {
	position: absolute;
	right: 25%;
	transform: translateX(50%);
	top: 100px;
	display: flex;
	flex-direction: column;
	width: 350px;
	color: #fff;
}

.legende_bas_droite {
	position: absolute;
	right: 25%;
	bottom: 100px;
	display: flex;
	flex-direction: column;
	width: 350px;
	transform: translateX(50%);
	color: #fff;
}

.legende_titre {
	font-size: 27px;
	color: inherit;
	font-family: 'Nocturne';
	line-height: 1.0;
	font-style: italic;
	text-align: center;
}

.legende_descri {
	color: inherit;
	font-size: 20px;
	font-weight: 200;
	font-family: 'Ysabeau';
	margin-top: 10px;
	line-height: 27px;
	text-align: center;
}

.apropos-left {
  white-space: normal;
  display: block;
  font-family: 'Ysabeau';
  color: #500707;
  width: 80%;
  text-align:center;
  padding-left: 10%;
  padding-top: 74px;
  padding-bottom: 74px;
  font-weight:200;
  max-height: calc(100dvh - 148px);
  overflow-y: auto;
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  scrollbar-width: none;  /* Firefox, Safari 18.2+, Chromium 121+ */
}
.apropos-left::-webkit-scrollbar { 
    display: none;  /* Older Safari and Chromium */
}


.apropos-right {
	font-family: 'Nocturne';
	font-style: italic;
	font-size: 70px;
	padding-top:51px;
	text-align:center;
	width: 100%;
	font-weight: 500;
	color: #fff;
}

.contact-left {
	padding-top: 135px;
	padding-bottom: 135px;
	text-align: center;
	width: 100%;
	color: #500707;
	font-family: 'Ysabeau';
	font-weight:200;
	font-size: 25px;
	line-height: 33px;
}

.contact-left a {
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}


@media (max-width: 650px) {
	a:hover.blancext{text-decoration: none}
	.menu {
		font-size: 20px;
		line-height: 25px;
		width: auto;
		top: 40px;
	}
	.menu2 {
		font-size: 20px;
		line-height: 25px;
		width: auto;
		top: 40px;
	}

	.active {
		font-size: 30px;
		margin-bottom: 25px;
	}

	.SINGLE_IMAGE {
		height: auto;
		width: 100%;
	}
	.SINGLE_IMAGE img {
		object-fit: contain;      
	}

	#basrelief-hero img {
		transform: scale(1.3);
		transform-origin: center;
		
	}

	#basrelief-hero {
		padding-top: 30px;
		padding-bottom: 75px;
	}
	
	.legende_droite {
		position: absolute;
		bottom: 50px;
		right: 50%;
		width: min(300px, 90vw);
		color: #fff;
	}

	.legende_descri {
		font-size: 15px;
		margin-top: 5px;
		line-height: 15px;
	}

	.legende_titre{
		font-size: 25px;

	}

	.TWO_IMAGES_SBS {
		flex-direction: column;
		height: auto;
		overflow:visible;
	}

	.TWO_IMAGES_SBS img {
		width: 100%;
		height: auto;
		object-fit: contain;
	}

	.legende_bas_droite {
		right: 50%;
		width: min(300px, 90vw);
		color: #fff;
	}

	.legende_gauche {
		left: 50%;
		width: min(300px, 90vw);
		color: #fff;
	}

	.legende_haut_droite {
		right: 50%;
		width: min(300px, 90vw);
		top: -28px;
		z-index: 5;
		color: #000;
	}

	#offcanvas-content {
		display: flex;
		flex-direction: column-reverse;
	}

	.offcanvas-inner {
		height: auto;
		overflow-y: auto;
		overflow-y: auto;
		-ms-overflow-style: none;  /* Internet Explorer 10+ */
		scrollbar-width: none;  /* Firefox, Safari 18.2+, Chromium 121+ */
	}

	.offcanvas-inner::-webkit-scrollbar { 
		display: none;  /* Older Safari and Chromium */
	}

	.apropos-left {
		white-space: normal;
		display: block;
		font-family: 'Ysabeau';
		color: #500707;
		width: 80%;
		padding-left: 10%;
		text-align:center;
		padding-top: 0;
		padding-bottom: 30px;
		font-weight:200;
		max-height: none;
		overflow-y: hidden;
	}
	
	.contact-left {
		padding-top: 55px;
		padding-bottom: 55px;
	}

	.mobilespacers {
		display:block;
		z-index: 1;
	}

	.footername {
		font-size: 47px;
		line-height: 58px;
		transform: translateX(-50%) translateY(50%);
		bottom:50%;
	}

}


@media (max-width: 350px) {
	#basrelief-hero {
		padding-top: 90px;
	}

	.footername {
		font-size: 30px;
		line-height: 35px;
	}
}