//@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;400&display=swap');
//@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz@8..144&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400&display=swap');

body {
	//font-family: 'Inter', sans-serif;
	font-family: monospace;  
	//font-family: 'Roboto+Condensed, sans-serif;
	overscroll-behavior-x: none;
}

body a {
	color: black;
}

body a:hover{
	text-decoration: underline;
	color: black;
}

/* // INTERFACE ///*/

#kkMain {
	display: block;
	position: absolute;
	padding: 0px;
	margin: 0px;
	width: 100%;
	height: 100vh;
	background-color: gray;
	overflow: hidden;
}

#slider-Principal {
	cursor: grab;
	height: 80vh;
	//height: 73vh;
	max-width: 100vw;
	margin: 0px;
	padding: 0px;
	background-color:rgb(255, 255, 255);
	transition: height 1s;
}

#slider-Principal:active {
	cursor: grabbing;	
}

#kkFooter {
	height: 20vh;
	user-select: none;
	
	font-size: 6.1vh;
	 line-height: 6vh;
	
	//font-size: 9.1vh;
	//line-height: 8.3vh;
	margin: 0px;
	padding: 0.5vh 0 0 0;
	width: 100%;
	background-color: white;
	border-width: 1px 0px 0px 0px;
	border-style: solid;
	border-color: black;
	transition: height 1s;
	//background: green;
}

/* 

Boutons de nav

*/

#navHTML {
	position: absolute;
	width:100%;
	height:5.8vh;
	bottom:0vh;
	margin:0vh;
	text-align: center;
	

}

#navHTML .navBouton {
	display: inline-flex;
	justify-content: center;
	user-select: none;
	outline:none;
	border-style: solid;
	
	height:3.4vh;
	width:2.5vh;

	border-color: black;
	border-width: 1px;

	background-color:white;
	margin-right:0.6vw;
}

#navHTML .navBouton:hover {
	background-color:black;
}

.navBoutActif {
	background-color:black !important;
}

/* 

Texte au dessus des bouttons de nav

*/

#infoNavHTML{
	position: absolute;
	line-height: 1.9vh;
	text-align: center;
	width:50vh;
	//height: 8vh;
	bottom: 5vh;
	//background-color: purple;
	font-size: 1.5vh;
	padding-top: 1vh;
	margin-bottom: 0vh;
	transform: translate(-23.8vh,0);
}


#infoNavHTML p {
	width:3vh;
	height:3vh;
	transform: rotate(90deg);
}

#infoNavHTML div {
	width:4vh;
	height:3vh;
	margin: auto;
}

#infoNavHTML img {
	width:0.8vh;
	height:0.8vh;
}


.on {
	transition: opacity 0.3s;
}

.off {
	opacity: 0;
	transition: opacity 0.3s;
}



#kkBar {
	position:absolute;
	width:100%;
	height:0.8vh;
	margin: 0px;
	//background-color: white; 
}

#kkBarHdl {
	position:absolute;
	cursor:pointer;
	width:5%;
	left:0%;
	height:0.9vh;
	//border-style: solid;
	background-color: black; 
	transition: left 0.8s;
}





.titre_debut {
	padding: 0.5vh 0.7vh 0 0.7vh;
	float: left;
	max-width: 50vw;
	//background-color: greenyellow;
}

.titre_fin {
	padding: 0.5vh 0.7vh 0 0.7vh;
	float: right;
	max-width: 100%;
	text-align: right;
}

.titre_nom a {
	position: absolute;
	bottom: 2.3vh;
	left: 1vh;
	line-height: 4vh;
	font-size: 4vh;
	margin: 0px;
	text-decoration: underline;
	text-underline-offset: 6px;
	z-index: 100;
}

.titre_nom a:hover {
//text-decoration-line: line-through;
visibility: hidden;
line-height: 4vh;
font-size: 4vh;

}

.titre_nom a:hover:before {
	content:"@aurelie_maud_denis";
	visibility: visible;
	//content: "> Instagram ";
//text-decoration-line: line-through;
}



#slider-Principal:hover .navArrowsZone {
	opacity: 1;
	transition: opacity 0.75s;
}

.navArrowsZone {
	position: absolute;
	  top: 50%;
	  transform: translate(0, -50%);
	//height: 6vw;
	//width: 6vw;
	//height: 4vw;
	height: 100%;
	width: 4vw;
	margin: 0px;
	padding: 0px;
	z-index: 10;
	border-color: white;
	cursor: pointer;
	opacity: 0;
	background-color: rgba(255, 255, 255, 1);
	transition: background-color 1s, opacity 1s;
	border-style: solid;
	border-color: black;
}

.navArrowsZone:hover {
	background-color: rgba(255, 255, 255, 1);
	transition: background-color 0.5s, border-color  0.5s;
	//border-width: 0px 0px 0px 1px;
}

#kkNext{
	right:0px;
	border-width: 0px 0px 0px 1px;
}

#kkPrev{
	display: none;
	border-width: 0px 1px 0px 0px;
	left:0px;
}

.navArrowsZone button{
	position: absolute;
	user-select: none;
	font-weight: 200;
	font-size: 7vh;
	//text-shadow:0px 1px 2px gray;
	line-height: 8vh;
	border:0px;
	background-color: transparent;
	background-color:none;
	margin:0px;
	
	color: black;
	top:50%;
	transform: translateY(-5vh);
}


#kkPrev button {
	//left:1vw;
	left: 0.6vw;
	padding: 0vh 0vh 1vh 0vh;
	
}

#kkNext button {
	//right:1vw;
	right: 0.6vw;
	padding: 0vh 0vh 1vh 0vh;
	
}



/* // SLIDES ///*/

.kkComonSlide{
	border-color: black;
	border-style: solid;
	border-width: 0px 1px 0px 0px;
	border-collapse: collapse;
}

.kkDefaultSlide{
	margin: 0px;
	padding: 0px;
	//overflow-y: auto;
	height: 100%;
	background-color: beige;
}

.kkDefaultSlide figure {
	margin: 0px;
	padding: 0px;
	height: 100%;
}

.kkDefaultSlide img {
	object-fit: cover; //contain
	
	margin: 0px;
	padding: 0px;
	height:110%;
	width:100%;
	
}

.kkVideoSlide{
	min-width: 75vw;
	max-width: 75vw;
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: white;
	padding: 0vw 0vw 0vw 0vw;
	object-fit: contain;
	transition: min-width 1s,max-width 1s;
}
.kkVideoSlide figure {

}

.kkVideoSlide video{
	padding: 0vw;
	margin: 0px;
	height: 100%;
	width:100%;
	object-fit: contain;
	
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


#BTNPLAY{
	width: 250px;
	height: 250px;
	transform: translate(-9vh, -9vh) scale(0.7);
}

#triangle {
	fill: white;
	stroke : black;
}

#triangle:hover {
	fill: black;
	stroke : white;
	transition: fill 0.4s;
}

.playButton{
	position: absolute;
	//background: white;
	text-align: center;
	//font-size: 8vh;
	//line-height: 8vh;
	/* border-width: 1px;
	border-style: solid;
	border-color: black; */
	width:12vh;
	height:12vh;
	top:50%;
	left:50%;
	translate: -3vh -3vh;
	cursor: pointer;
	transition: border-color 0.5s;
}

.playButton:hover{
	/* border-color: white;
	background: black;
	color: white;
	transition: border-color 0.5s, background 1s, color 0.5s; */
}

.kkCreditsSlide{
	min-width: 35vw;
	max-width: 35vw;
	height: 100%;
	font-size: 2.6vh;
	background-color: white;
	padding: 1vw 2vw 2vw 2vw;
	overflow-y: auto !important;
	transition: min-width 1s,max-width 1s;
}

.kkCreditsSlide p {
	line-height: 3vh;
	margin:0vw 0vw 0.3vw 0vw;
}

.kkTexteSlide{
	min-width: 55vw;
	max-width: 55vw;
	height: 100%;
	font-size: 2.5vh;
	background-color: white;
	padding: 1vw;
	overflow-y: scroll !important;
	transition: min-width 1s,max-width 1s;
}

.kkTexteSlide p {
	line-height: 2.7vh;
	//margin:0vw 0vw 0.5vw 0vw;
}

.kkTitreSlide{
	min-width: 35vw;
	max-width: 35vw;
	height: 100%;
	font-size: 5.8vh;
	line-height: 5.8vh;
	background-color: white;
	padding: 1vw;
	
	overflow-y: hidden;
	overflow-x: hidden;
	transition: min-width 1s,max-width 1s;
}

.kkGallerieSlide{
	overflow-y: auto !important;
	scroll-behavior: smooth;
	//scroll-behavior: revert;
	min-width: 40vw;
	max-width: 40vw;
	transition: min-width 1s,max-width 1s;
	//height: 100%;
}

#Gallerie231{
	scroll-behavior: smooth;
}

.kkGallerieSlide::-webkit-scrollbar {
  display: none;
}

.kkClickScrollUp{
	//cursor:url('images/fleche-top.png'), default;  
	cursor:url('images/FLECHE_HAUT.svg') 30 -60, default;  
	position: fixed;
	display: none;
	top: 0;
	left: 0;
	width:95%;
	height:35%;

	//background-color: burlywood;
}

.kkClickScrollDown{
	//cursor:s-resize;
	//cursor:url('images/fleche-bottom.png') 0 50, default;  
	cursor:url('images/FLECHE_BAS.svg') 30 60, default;  
	position: fixed;
	bottom: 0;
	width:95%;
	left: 0;
	height:35%;
	
	//background-color: darkred;
}

.kkGallerieElement{
	margin: 0px;
}

.kkGallerieElement figure {
	margin:0px;
	padding: 0px;
}

.kkGallerieElement img {
	width:100%;
	height:100%;
}

.kkGallerieSlideElement figcaption {
	position: absolute;
	background: white;
	padding: 0vw 1vw 0vw 0.8vw;
	margin: 0px;
	bottom: 0px;
	left: 0px;
}



.kkImagesSlide{
	min-width: 40vw;
	max-width: 40vw;
	height: 100%;
	overflow-y: hidden;
	overflow-x: hidden;
}
.kkImagesSlide div {
	scroll-behavior: smooth;}

.kkImagesSlideElement{
	min-height:min-content !important;
}

.kkImagesSlideElement figure {
	margin:0px;
	padding: 0px;
	background-color: green;
	height: 100%;
}

.kkImagesSlideElement img {
	width:100%;
	height:100%;
}

.kkImagesSlideElement figcaption {
	position: absolute;
	background: white;
	padding: 0vw 1vw 0vw 0.8vw;
	margin: 0px;
	bottom: 0px;
	left: 0px;
}

/* MOBILE ratio inférieur au carré */
@media screen and (max-aspect-ratio: 10/9) {

	
	#slider-Principal { height:80vh;
		transition: height 1s;
	}
	 #kkFooter {
	  height: 20vh;
	  font-size: 6.1vh;
	  line-height: 6vh;
	  transition: height 1s;
	  }
	
	.titre_nom a {
		 
		 font-size: 2vh !important;
		 line-height: 2vh !important; 
	 }
	
	#kkNext{ display: none;}
	 #kkPrev{ display: none;}
	 #navHTML {display: none;}
	 
	  
	  .kkTexteSlide{
		  min-width: 85vw;
		  max-width: 85vw;
		  height: 100%;
		  font-size: 2vh;
		  background-color: white;
		  padding: 2vw 6vw 2vw 2vw;
		  overflow-y: auto;
		  transition: min-width 1s,max-width 1s;
	  }
	  
	  .kkTitreSlide{
		  min-width: 95vw;
		  max-width: 95vw;
		  height: 100%;
		  font-size: 4.9vh;
		  line-height: 5.3vh;
		  background-color: white;
		  padding: 2vw 1vw 2vw 1vw;
		  overflow-y: auto;
		  transition: min-width 1s,max-width 1s;
	  }
	  .kkTexteSlide p {
	  line-height: 2.5vh;
	  margin:0vw 0vw 2.5vw 0vw;
	  }
	  
	  .kkCreditsSlide{
		  min-width: 75vw;
		  max-width: 75vw;
		  height: 100%;
		  font-size: 2.5vh;
		  background-color: white;
		  padding: 1vw 2vw 2vw 2vw;
		  overflow-y: auto !important;
		  transition: min-width 1s,max-width 1s;
	  }
	  
	  .kkCreditsSlide p {
		  line-height: 3vh;
		  margin:0vw 0vw 0.4vh 0vw;
		 
	  }
	  
	  
	  .kkGallerieSlide{
	   min-width: 90vw;
	   max-width: 90vw;
	   transition: min-width 1s,max-width 1s;
	   }
	   
	  
	  .kkVideoSlide{
	   min-width: 90vw;
	   max-width: 90vw;
	   transition: min-width 1s,max-width 1s;
	   }
	 
	 
}

/* Ipad */
@media screen and (min-aspect-ratio: 10/9) and (max-aspect-ratio: 13/9) {
	
	#slider-Principal {
		 height:80vh;
		 transition: height 1s;
	 }
	 #kkFooter {
	 height: 20vh;
	 font-size: 6.1vh;
	 line-height: 6vh;
	 transition: height 1s;
	 }
	
	.navArrowsZone {
		width: 6vw;
	}
	
	#kkNext button {
		right : 1.2vw;
	}
	
	#kkPrev button {
		right : 1.2vw;
	}
	
	.navArrowsZone button{
		/* position: absolute;
		user-select: none;
		font-weight: 200;
		font-size: 7vh;
		//text-shadow:0px 1px 2px gray;
		line-height: 8vh;
		border:0px;
		background-color: transparent;
		background-color:none;
		margin:0px;
		
		color: black;
		top:50%; */
		transform: translateY(-10vh);
	}
	
	.kkTitreSlide{
		  min-width: 35vw;
		  max-width: 35vw;

		  ///font-size: 4.8vh;
		  line-height: 6.0vh;
		  transition: min-width 1s,max-width 1s;
	  }
	  
	  .kkGallerieSlide{
		min-width: 55vw;
		max-width: 55vw;
		transition: min-width 1s,max-width 1s;
	}
	  
	
}


/* PANORAMIQUE 1,77 et au dessus */
@media screen and (min-aspect-ratio: 16/9)
 {
	 
	 #slider-Principal {
		 height:80vh;
		 transition: height 1s;
	 }
	 #kkFooter {
	 height: 20vh;
	 font-size: 6.1vh;
	 line-height: 6vh;
	 transition: height 1s;
	 }
	
	.titre_nom{
		font-size: 2.1vh;
		bottom: 2vh;
	}
	  
	 .kkGallerieSlide{
	   min-width: 45vw;
	   max-width: 45vw;
	   transition: min-width 1s,max-width 1s;
	 }
	.kkVideoSlide{
		min-width: 60vw;
		max-width: 60vw;
		transition: min-width 1s,max-width 1s;
	}
	
	
	  
	.kkTexteSlide{
	 min-width: 35vw;
	 max-width: 35vw;
	 font-size: 2vh;
	 transition: min-width 1s,max-width 1s;
 	}
	
	.kkTitreSlide{
		  //min-width: 28vw;
		  //max-width: 28vw;
		  min-width: 500px;
		  max-width: 500px;
		  height: 100%;
		  font-size: 5.2vh;
		  line-height: 5.6vh;
	  }
	  
	  .kkCreditsSlide{
		min-width: 35vw;
		max-width: 35vw;
	}
	  
 }
 


 /* @media (prefers-color-scheme: light) {
	 body { background-color: rgb(255, 255, 255); color:  black; 
	 }
 }
 
 @media (prefers-color-scheme: dark) {
   body { background-color: rgb(255, 255, 255); color:  black; }
 } */