@font-face {
    font-family: 'hanken_regular';
    src: url('../fonts/hanken/hankengrotesk-regular-webfont.woff2') format('woff2'),
         url('../fonts/hanken/hankengrotesk-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'hanken_light';
    src: url('../fonts/hanken/hankengrotesk-light-webfont.woff2') format('woff2'),
         url('../fonts/hanken/hankengrotesk-light-webfont.woff') format('woff');
    font-weight: light;
    font-style: normal;
}

@font-face {
    font-family: 'hanken_semibold';
    src: url('../fonts/hanken/hankengrotesk-semibold-webfont.woff2') format('woff2'),
         url('../fonts/hanken/hankengrotesk-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'hanken_bold';
    src: url('../fonts/hanken/hankengrotesk-bold-webfont.woff2') format('woff2'),
         url('../fonts/hanken/hankengrotesk-bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}


@font-face {
    font-family: 'bluu_nextbold';
    src: url('../fonts/bluunext/bluunext-bold-webfont.woff2') format('woff2'),
         url('../fonts/bluunext/bluunext-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'bluu_nextbold_italic';
    src: url('../fonts/bluunext/bluunext-bolditalic-webfont.woff2') format('woff2'),
         url('../fonts/bluunext/bluunext-bolditalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
	font-family: hanken_regular, hanken_light, hanken_semibold, hanken_bold, bluu_nextbold, sigurd-light, sigurd-medium, Arial, sans-serif;
	font-size: 16px;
	line-height: 24px;
	background-color:white;
	color:white;
	margin: 0; padding: 0;
  width:100 vw; height:100%;
  cursor: none;
}

/*______________________________CURSEUR________________________________________*/

.custom-cursor {
  position: fixed;
  top: -18px;
  left: -18px;
  display: block;
  width: 120px;
  height: 120px;
  pointer-events: none;
  will-change: transform;
  z-index: 10000;
 -webkit-transform: matrix(1, 0, 0, 1, -100, -100);
  transform: matrix(1, 0, 0, 1, -100, -100);
/*  opacity: 0;*/
  mix-blend-mode: difference;

  transition: opacity 0.4s ease,
    -webkit-transform 0.15s cubic-bezier(0, 0.89, 0.49, 0.92);
  transition: transform 0.15s cubic-bezier(0, 0.89, 0.49, 0.92),
    opacity 0.4s ease;
  transition: transform 0.15s cubic-bezier(0, 0.89, 0.49, 0.92),
    opacity 0.4s ease, -webkit-transform 0.15s cubic-bezier(0, 0.89, 0.49, 0.92);
}

.custom-cursor .cursor {
  -webkit-transform: scale(0.45);
  transform: scale(0.45);
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
  will-change: transform;
  width: 100px;
  height: 100px;
  float: left;
  border-radius: 100%;
  margin-top: -40px;
  margin-left: -40px;
  background: #fff;
}

.custom-cursor.custom-cursor-active .cursor {
  -webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}

.custom-cursor.custom-cursor-active-small  .cursor {
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
    opacity: 1;
  }
}

/*https://codepen.io/mosne/pen/mZmwLP*/

@media screen and (max-width:1000px) {
	.cursor, .custom-cursor, .custom-cursor-active {display: none;}
}

/*______________________________GENERAL________________________________________*/

p {	font-size: 12pt; line-height: 18pt;	color: #e7e7e7; }

h1 { /*gros titres*/
	font-family: bluu_nextbold;
	color: white;
	font-weight: lighter;
	font-size: 60pt;
	line-height: 70pt;
}

h2 { /*titres moyens*/
	font-family: bluu_nextbold;
	color: white;
	font-size: 24pt;
	font-weight: lighter;
	cursor: default;
}

h3 { /*sous-titres*/
	font-family: hanken_light;
	color: white;
	font-weight: lighter;
	font-size: 18pt;
	cursor: none;
}

h4 {
	font-size: 12px;
	font-weight: lighter;
	margin-top: -18px;
	line-height: 20px;
	opacity: 60%;
	cursor: default;
}

h5 {
	font-size: 30px;
	font-weight: lighter;
	line-height: 30px;
}

b {font-family : hanken_bold;}
i {font-family : hanken_light;}
a { color: white; text-decoration: none; }
a:hover { color: white; opacity: 40%; text-decoration: none; cursor:none; }
.underline {text-decoration: underline;}


*, *:before, *:after {
    box-sizing: border-box; 
    outline:none; 
}
.clear { clear:both; } 

ul { padding:0; } 
li { padding:0; 
	list-style: none; }

* {scroll-behavior: smooth;
	scrollbar-width: thin; /*firefox*/
	scrollbar-color: rgba(255,255,255,0.5);
	-ms-overflow-style: none;  /* IE and Edge */
}

html, body {
	 scroll-behavior: smooth;
	min-height: -webkit-fill-available;
	max-width: 100%; overflow-x: hidden;  
  margin: 0;
  padding: 0;
  }

body {min-height: 100%;}

:root { overscroll-behavior: none; }

body > div {
    height: 100%;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

*.modal-open {
  overflow: hidden !important;
}

main {
	width: 100%; 
	display: flex;
	background-color: #0c0a0a;
	flex-direction: column;
}

header {display: flex;}

#black_background {
	background-color: #0c0a0a;
	height: 100vh;
	width: 100vw;
	position: fixed;
	z-index: 0;
}

@media screen and (max-width:1000px) {
	h1 {font-size: 32pt; line-height: 30pt;}
	p {font-size: 10.5pt; line-height: 15pt;}
	h3 {font-size: 14pt;}
	body > div { height: 110dvh; }
	.cursor, .custom-cursor, .custom-cursor-active {display: none;}
}

@media screen and (min-width:2400px) {
	h1 {font-size: 100pt;}
	p {	font-size: 14pt; line-height: 24pt;}
	html, body {
  overscroll-behavior: contain;
}
}

/*______________________________ANIMATIONS________________________________________*/

.anim2 { opacity: 0; position: relative; left: -200px; 
  transition: opacity 0.5s ease, left 0.5s ease; }

.anim3 { opacity: 0; position: relative; right: -200px; 
  transition: opacity 0.5s ease, right 0.5s ease; }

.anim4 { opacity: 0; position: relative; left: -100px; 
  transition: opacity 0.5s ease, left 0.5s ease; }

.anim5 { opacity: 0; position: relative; bottom: -50px; 
  transition: opacity 0.5s ease, bottom 0.5s ease; }

.anim6 { opacity: 0;  position: relative; bottom: -50px; 
  transition: opacity 0.5s ease, bottom 0.5s ease; }

.anim7 { opacity: 0;  position: relative; left: -100px; 
  transition: opacity 0.5s ease, left 0.5s ease; }

.anim8 { opacity: 0;  position: relative; left: -100px; 
  transition: opacity 0.5s ease, left 0.5s ease; }

.anim9 { opacity: 0;  position: relative; left: -100px; 
  transition: opacity 0.5s ease, left 0.5s ease; }

.text-anim { opacity: 0;  position: relative; bottom: -200px; 
  transition: opacity 0.5s ease, bottom 0.5s ease; }

.text-anim2 {	opacity: 0; position: relative; right: -200px; 
  transition: opacity 0.5s ease, right 0.5s ease; }

/*______________________________PRELOADER_______________________________________*/

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0c0a0a; 
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; 
}

.loader {
    border: 4px solid  #636363;
    border-top: 4px solid #f3f3f3; 
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#content {
    display: none;
}

/*______________________________MENU________________________________________*/

#logo_pl {
  z-index: 999;
  object-fit: contain;
  width: 100px;
  position: fixed;
  padding: 10px;
  top: 10px;
  left: 8px;
}

#logo_pl:hover {opacity: 1; rotate: 90deg; transition: 0.3s;}

#logo_menu {
  z-index: 100;
  height:50px; width: 50px;
  justify-content: left;
  position: fixed;
  padding: 10px;
  top: 10px;
  right: 36px;
}

#logo_menu img {height:50px; object-fit: contain; margin-right: 10px;}

#close_menu {
  z-index: 999;
  object-fit: contain;
  max-width: 100px;
  justify-content: left;
  position: fixed;
  padding: 10px;
  top: 15px;
  right: 18px;
  height: 59px;
  object-fit: contain;
}

#close_menu img {
	height: 50px; object-fit: contain;
}

#menu {
	display: flex;
	z-index: 999;
  position: fixed;
  margin-top: 00vh;
  top: 0px;
  right: 0px;
  object-fit: contain;
  display: flex;
  max-height: 100vh;
  max-width: 10vw;
  justify-content: flex-end;
}

#menu_content {
  position: fixed;
  z-index: 999;
  width: 100wv;
  height: 100vh;
  background: #0c0a0a;
  display: flex;
  align-self: center;
  align-content: center;
  display: none;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#menu_content ul{
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  flex-direction: column;
  gap: 55px;
}

li a{
	font-family: bluu_nextbold;
	font-size: 45pt;}

@media screen and (max-width:1200px) {
	#header_background { width: 100vw; height: 13vh; z-index: 98; position: fixed;
	background: linear-gradient(to bottom,
   rgba(12, 10, 10, 0.9) 0%,
   rgba(12, 10, 10, 0.9) 65%,  
   rgba(12, 10, 10, 0.6) 85%,
   rgba(12, 10, 10, 0) 100%);
opacity: 1;}
	#logo_pl img{width: 60px;}
	#logo_menu {margin-top: 4px;}
	#logo-menu img {width: 50px;}
	#menu_content ul {gap: 45px;}
	li a {font-size: 40pt;}
	#logo_pl:hover {rotate: 0deg;}
	.cursor, .custom-cursor, .custom-cursor-active {display: none;}
}


/*______________________________ACCUEIL________________________________________*/

.video-container {
  position: absolute;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  top: 0;
  left: 0;
}

#video_home {
	width: 100vw;
	height: 100vh;
	position: absolute;
	top: 0;
	left: 0;
	object-fit: cover;
	opacity: 1;
/*	filter: grayscale(100%);*/
}

.gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom,
   rgba(12, 10, 10, 0.0) 0%, 
   rgba(12, 10, 10, 0.8) 70%,
   rgba(12, 10, 10, 1) 90%
 );
  z-index: 2;
}

#section_home {
	padding-top: 17vh;
	padding-left: 15vw;
	display: flex;
	height: 100vh;
	flex-direction: column;
}

#section_logo{ 
	display: flex;
	align-items: center;
	gap: 0px 3vw;
	z-index: 3;
}

#logo{
	object-fit: contain;
	width: 12vw;
	animation: logo-rotate 1.3s linear;
	z-index: 4;
}
		@keyframes logo-rotate {
			0% { transform: rotate(90deg); }
			50% { transform: rotate(90deg); }
			70% { transform: rotate(60deg); }
			80% { transform: rotate(40deg); }
			100% {transform: rotate(0deg); }
		}
		
#pl_typo {	object-fit: contain; width: 30vw; z-index: 1; }

#section_soustitre h3{
	padding-top: 20px;
	padding-left: 14vw;
	font-size: 18pt;
	opacity: 0.7;
	z-index: 3;
}

.logo-anim{
  opacity: 0;
  transform: translateY(50px); /* ou la valeur que vous trouvez appropriée */
  animation: fadeInUp 0.5s ease-out forwards;
  animation-delay: 1s;
}

.text-anim-noscroll {
  opacity: 0;
  z-index: 2;
  transform: translateY(50px); 
  animation: fadeInUp 0.5s ease-out forwards;
  animation-delay: 1.7s;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(50px); }
  to { opacity: 1; transform: translateY(0); }
}

@media screen and (max-width:1200px) {
	#section_home {padding-left: 8vw;}
	#logo {width: 18vw;}
	#pl_typo {width: 40vw;}
	#section_soustitre h3 {padding-top: 10px;}
}

@media screen and (max-width:1000px) {
	#section_home {padding-left: 8vw; padding-top: 30vh;}
	#logo {width: 25vw;}
	#pl_typo {width: 55vw;}
	#section_soustitre h3 {margin-top: 5px; padding-top: 0px; font-size: 14pt;
		margin-right: 30px;}
	.cursor, .custom-cursor, .custom-cursor-active {display: none;}
}

@media screen and (min-width: 2500px) {
	#section_soustitre h3 {font-size: 26pt;}
}


/*______________________________WORKS________________________________________*/

#gradient_1 {
	display: flex;
	width: 100vw;
	height: 20vh;
	background: linear-gradient(to bottom, #0c0a0a, #1B1717 );
	z-index: 2;
}

#section_works {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	width: 100vw;
	background-color: #1B1717;
	z-index: 3;
}

#works_list {
	padding: 10vh;
	padding-top: 15vh;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.selection_line { display: flex; flex-direction: row; flex-wrap: wrap;  justify-content: space-between;}

.right { justify-content: flex-end; }
.left {	justify-content: flex-start; }

.project { height: 27vw; }

.project_img {
	object-fit: contain;
	height: 27vw;
	filter: drop-shadow(15px 15px 20px rgba(0, 0, 0, 0.5));
}

.vers_projets {	padding-left: 20vh;	padding-top: 30px; }

@media screen and (max-width:1000px) {
	.section_works {min-height: 80vh;}
}

@media screen and (max-width:500px) {
	#gradient_1 {height: 10vh;}
	#works_list {gap: 0px; padding: 0px;}
	.selection_line {flex-direction: column; justify-content: center;}
	.project {min-height: 21vh; max-height: 40vh; min-width: 50vw; max-width: 100vw;}
	.project_img {min-height: 21vh; max-height: 40vh; max-width: 100vh; margin: 0px;}
	.resp_right {align-self: flex-end;}
	.vers_projets {padding-left: 30px;}
	.resp_large {min-height: 24vh;}
	.cursor, .custom-cursor, .custom-cursor-active {display: none;}
}

/*______________________________A PROPOS________________________________________*/

#gradient_2 {
	display: flex;
	width: 100vw;
	height: 20vh;
	background: linear-gradient(to bottom, #1B1717, #0c0a0a );
	z-index: 2;
}

#section_a_propos {
	display: flex;
	flex-direction: column;
	min-height: 70vh;
	width: 100vw;
	background-color: #0c0a0a;
	z-index: 3;
}

.section_inside {	padding: 0px 100px 0px 150px; }

.desc {
	display: flex;
	justify-content: space-between;
	flex-wrap: nowrap;
	margin: 5vw;
	margin-top: 0px;
}

.description {display: flex; flex-direction: column;	gap: 50px;}
#description_text {width: 33vw;}

#portrait {
	object-fit: contain;
	position: relative;
	width: 27vw;
	margin-right: 30px;
	top: -50px;
	max-height: 65vh;
	opacity : 0.8;}

.competences {
	position: relative;
	z-index: 3;
	width: 500px; 
	background: #2a2a2a;
	top: -300px;
	padding: 20px;
	margin-left: 43vw;
	padding-bottom: 20px;
	border-radius: 10px;
}

.competences b {font-size: 12pt; font-family: hanken_semibold; font-weight: normal;  line-height: 20pt; color: rgba(255, 255, 255, 0.8);}
.competences p, .competences i {line-height: 14pt; font-size: 10pt;margin: 0; padding: 0;}
.competences br {font-size: 5pt; line-height: 5pt;padding: 0; margin: 0; }

.competences_title {
	display : inline-flex; 
	align-items : center; 
	margin: 5px;
	font-size: 24pt; line-height: 22pt;
	cursor: none;
	padding-bottom: 10px;
	color: rgba(255, 255, 255, 0.9);
}

.toggle-competences img{height: 35px; object-fit: contain; margin-bottom: -3px; padding-left: 20px;}
.competences-detail {z-index: 3;	display: none;}


@media screen and (max-width:1250px) {
	#gradient_2 {height: 10vh;}
	.section_inside {padding: 0px 10px 0px 50px; margin-bottom: -200px;}
	#description_text {width: 70vw; line-height: 16pt;}
	#portrait {display: none;}
	.competences {margin-top: 320px; width: 100vw; margin-left: -50px; margin-bottom: 0;}
	.competences_title {font-size: 20pt;}
	.competences b {font-size: 12pt;}
	.competences p, .competences i {font-size: 10pt;}
	.cursor, .custom-cursor, .custom-cursor-active {display: none;}
}

@media screen and (max-width:337px) {
	.competences {height: 230px;}
}

@media screen and (min-width: 2400px) {
	.competences {width: 600px;}
}

/*______________________________CONTACT________________________________________*/

#section_contact, #section_infos {
	display: flex;
	min-height: 80vh;
	width: 100vw;
	background-color: #1B1717;
	z-index: 2;
}

#appel_contact {height: 60px; margin-top: -60px; margin-left: 40px;}

.formulaire_contact {
	margin-left: 10vw;
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 40vh;
	width: 50vw;
	background-color: white;
	border-radius: 10px;
	padding: 20px;
}

.contact_input {
	font-family: hanken_regular;
	font-size: 12pt;
	line-height: 18pt;
	border: none;
	border-bottom: solid 1px;
	min-height: 28pt;
}

#message {
  height: 20vh;
  box-sizing: border-box;
  display: inline-block;
  margin-top: 0px;
}

#submit {
	font-size: 12pt;
	height: 50px;
	font-family: hanken_regular;
	color: white;
	width: 130px;
	border-radius: 40px;
	background-color : rgba(0,0,0,0.7);
	border: none;
	padding-bottom: 5px;
	cursor: none;	
}

#input_zone {display: flex; justify-content: right;}
#input_zone:hover {cursor:none;}
#msg_reçu {margin-left: 10vw; color: white;}
#coordonnees {margin-top: 220px; margin-left: -50px;}
#coordonnees img {width: 38px; object-fit: contain; margin-bottom: -12px; padding: 2px; padding-right: 6px;}
#coordonnees a {font-family: hanken_semibold; padding: 3px;}

@media screen and (max-width:1250px) {
	#section_contact {height: 100%};
	input, textarea {
  font-size: 16px; /* Taille de police pour éviter le zoom */
}
	#section_contact {display: flex; flex-direction: column;}
	#appel_contact {margin: -25px 0px 30px 20px; height: 30px;}
	.formulaire_contact { width: 100vw; margin-left: -50px; padding-right: 50px; z-index: 50; padding-bottom: 100px;}
	#msg_reçu {margin-left: 20px;}
	#coordonnees {margin: 26vh 0px 0px 50px; padding-bottom: 50px;}
	.cursor, .custom-cursor, .custom-cursor-active {display: none;}
	input:user-invalid {
  border: 2px solid red;
}
}

/*______________________________INFOS________________________________________*/


#section_infos {
	display: flex;
	min-height: 80vh;
	padding-bottom: 10vh;
	background-color: #0c0a0a;
	z-index: 2;
}

.questions {
	display: flex;
	flex-direction: column;
	max-width: 45vw;
	margin-left: 5vw;
}

#infos_titre {font-size: 32pt;}

.question {display: inline-flex;}

.question-title {
	font-size: 20pt;
	font-family: hanken_semibold;
	margin: 0px;
	padding: 10px;
}

.tab {margin-left : 20px;	margin-top : 10px;	display: none;}
.toggle-answer { padding : 8px; padding-left: 0px;}
.toggle-answer img{	height: 35px;	object-fit: contain; }


@media screen and (max-width:1000px) {
	#infos_titre {font-size: 24pt;}
	.questions {margin-left: 0; max-width: 80vw; padding-bottom: 100px; margin-bottom: 100px;}
	.question-title {font-size: 16pt;}
	.toggle-answer {height: 20px; margin-top: -2px;}
	.tab {margin: 50px 0px 15px -80px; font-size: 9.5pt; 
		left:0px; }
	.cursor, .custom-cursor, .custom-cursor-active {display: none;}

}

/*______________________________PAGE PROJETS________________________________________*/

#gradient_3 {
	display: flex;
	width: 100vw;
	height: 10vh;
	background: linear-gradient(to bottom, #0c0a0a, #1B1717 );
	z-index: 2;
}

.works_page {margin-top: 0vh; padding-bottom: 10vh; overflow: hidden;}

.retour_accueil {margin-left: 5vw; padding: 10px; opacity: 0.7;}
.retour_accueil:hover {cursor: none;}

#title_projects {padding-left: 10vw; margin-top: -5vh;}

#buttons_line {
	display: flex;
	width: 100vw;
	justify-content: center;
	gap: 15px;
	margin-bottom: 10vh;
}

.selection_button {
	height: 5vh;
	padding-left: 1vw;
	padding-right: 1vw;
	padding-bottom: 5px;
	align-items: baseline;
	font-family: hanken_light;
	font-size: 16pt;
	color: white;
	border-radius: 30px;
	background-color : rgba(0,0,0,0.5);
	border: none;
}

.selection_button:hover {
	cursor: pointer;
	color: black;
	background-color : rgba(255,255,255,1);
	cursor: none;
}

#projects_page {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0px 0px;
	margin: 0px;
	padding: 0px;
}

.selection_p_page {height: 45vh;	object-fit: contain;	padding: 0px;}

#projects_footer {
	background-color: #1B1717;
	width: 100vw;
	height: 20vh;
}

.project_p_page {height: 45vh; object-fit: contain; padding: 0px;}
.project_p_page img, .gallery-item {height: 45vh; padding: 0px;}
.data-title {font-family: bluu_nextbold; font-size: 20pt;}

.single_button {
	display: flex;
	justify-content: center; 
	padding-bottom: 5vh;
	background-color :  #1B1717;
}

#retour_haut {
	height: 5vh;
	margin-top: 50px;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 5px;
	align-self: center;
	font-family: hanken_regular;
	font-size: 16pt;
	color: black;
	border-radius: 30px;
	display: flex;
	align-items: center;
	background-color : rgba(255,255,255,1);
	border: none;}

	#retour_haut:hover {cursor: none;}
	#retour_haut p {color:black;}
	#retour_haut a:hover {
	color : rgba(0,0,0,1);
	opacity: 1;
	cursor: none;
}

@media screen and (max-width:1000px) {
	#title_projects {font-size: 45pt; margin-top: -4vh;}
	.retour_accueil {padding-bottom: 25px;}
	#buttons_line {flex-wrap: wrap; gap: 7px; margin-bottom: 60px;}
	.selection_button {font-size: 12pt; padding: 0px 15px 3px 15px;}
	.project_p_page {height: 18vh; max-width: 50vw; padding: 0;}
	.project_p_page img,.gallery-item {height: 18vh; max-width: 50vw; object-fit: cover; padding: 0;}
	.cursor, .custom-cursor, .custom-cursor-active {display: none;}
	}

@media screen and (min-width: 2400px){
	.retour_accueil {font-size: 40pt;}
	#title_projects {font-size: 110pt; padding-top: 40px; padding-left: 200px;}
	.selection_button {font-size: 18pt; height: 4vh;}
	#retour_haut {height: 4vh;}
	#retour_haut p {font-size: 18pt;}
}

/*______________________________MODAL________________________________________*/


.modal {
	overflow: scroll;
  position:fixed;
  display: flex;
  flex-direction: row;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100vw;
  min-height: 100vh;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 100;
}

.modal-content {
	display: flex;
  flex-direction: column;
  position: absolute;
  top: 10vh;
  left: 10vw;
  margin-right: 10vw;
  text-align: left;
  color: white;
  gap: 20px;
}

.modal-image-container {
	display: flex;
	flex-direction: row;
	gap: 20px;
	align-items: flex-start;
}

.main-modal-image {	max-height: 85vh;	object-fit: contain; }

.gallery-small {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 20px;
	position: relative;
	margin-bottom: 10vh;
}

#m-image-small {height: 45vh;	object-fit: contain;}

.modal-text {padding-left: 8vh;	justify-content: left;	max-width: 35vw;}
.modal-title {font-size: 30pt;	line-height: 30pt;}
.modal-description {padding-top: 20px;}
.close {position: fixed; top: 30px; left: 100px; z-index: 9999 !important;}
.close img {
	height: 55px;
  object-fit: contain;
  cursor: none;
  z-index: 9999 !important;
}

@media screen and (max-width:1000px) {
	.modal-content {top: 100px;	
		min-height: 100vh;
		justify-content: top;
		overflow-x: hidden; 
		left: 0; right: 0;
		align-items: center;
		width: 100vw; 
	}
	.modal-image-container {flex-direction: column; max-width: 80vw;}
	.main-modal-image {max-width: 80vw;}
	.modal-text {padding-left: 0; max-width: 80vw;}
	.modal-title {font-size: 20pt; line-height: 20pt; margin: 10px 0px 0px 0px;}
	.modal-description {font-size: 10pt; padding-top: 10px;}
	.gallery-small {width: 80vw; gap: 10px;}
	#m-image-small {max-height: 18vh; max-width: 38vw; object-fit: cover;}
	.close {top: 22px; left: 90px; z-index: 9999;}
	#header_background_modal { width: 100vw; height: 13vh; z-index: 98; position: fixed;
	background: linear-gradient(to bottom,
   rgba(12, 10, 10, 0.9) 0%,
   rgba(12, 10, 10, 0.9) 65%,  
   rgba(12, 10, 10, 0.6) 85%,
   rgba(12, 10, 10, 0) 100%);
opacity: 1;}
	.close img {z-index: 9999;}
	.cursor, .custom-cursor, .custom-cursor-active {display: none;}
}

/*______________________________MENTIONS LÉGALES_____________________________*/

#mentions_legales {
	background-color: #1B1717;
	padding-top: 6vh;
	padding-bottom: 10vh;
}

#mentions_legales_content {width: 60vw; padding-top: 50px;}
#mentions_legales_content  h2:hover {cursor:none;}

@media screen and (max-width:1000px) {
	#mentions_legales {padding-top: 0;}
	#mentions_legales_content {width: 90vw; padding-top: 20px;}
	#mentions_legales_content  h2 {font-size: 18pt;}
	#mentions_legales_content {font-size: 10pt; line-height: 14pt;}
}


/*______________________________FOOTER________________________________________*/


footer {
	min-height: 40px;
	position: relative;
	bottom: 0;
	display: flex;
	overflow: hidden;
	background-color: #1B1717;
	width: 100vw;
	justify-content: center;
}

footer p {
		font-size: 10pt;
		opacity: 0.8;
}

#index_footer {background-color: #0c0a0a;}

#footer_links {
	display: flex;
	flex-wrap: nowrap;
	min-width: 20vw;
	justify-content: center;
	gap: 30px;
}

@media screen and (max-width:1000px) {
	footer {bottom: 0px;}