@charset "UTF-8";


@font-face {
  font-family: "Sangbleu Kingdom Regular";
  src:
        url("../font/SangBleuKingdom-Regular.woff")format("woff"),

    url("../font/SangBleuKingdom-Regular.woff2")format("woff2");
}
@font-face {
  font-family: "Sangbleu Kingdom Regular Italic";
  src:
        url("../font/SangBleuKingdom-RegularItalic.woff")format("woff"),

    url("../font/SangBleuKingdom-RegularItalic.woff2")format("woff2");
}

/*Général-----------------------------------------*/
body {
 font-family: "Sangbleu Kingdom Regular";
  color: black;
 font-size: 15px;
	overflow-x: hidden;
	background-color: black;
	

}
h1{font-size: 15px;
 font-family: "Sangbleu Kingdom Regular Italic";

}
.star {
  font-size: 30px;
  color: #C8A2FF;
	 -webkit-text-stroke-width: 1px;
            -webkit-text-stroke-color: black;
  position: fixed;
  pointer-events: none;
	
  z-index: 99999999;
}

p { 
line-height: 1.3em;}
/*Navigation-----------------------------------------*/
.star2 {
  font-size: 30px;
  color: #C8A2FF;
 
  
 
}
nav {
  position: fixed;
  z-index: 1;
	top: 0;
	
	padding: 5px 20px 0px 20px;
	color: white;
	width: 100%;
	font-family: "Sangbleu Kingdom Regular";
}
.navactive{font-family: "Sangbleu Kingdom Regular Italic" !important; text-decoration: none !important; color: white !important;}

a.navlink:link, a.navlink:visited{ font-family: "Sangbleu Kingdom Regular"; text-decoration: none; color: white; }
a.navlink:hover, a.navlink:active{ font-family: "Sangbleu Kingdom Regular Italic"; text-decoration: none; color: white;}

a:link, a:visited{ font-family: "Sangbleu Kingdom Regular"; text-decoration: none; color: black; }
a:hover, a:active{ font-family: "Sangbleu Kingdom Regular Italic"; text-decoration: none; color: black;}



/*Navigation-----------------------------------------*/
/*Général-----------------------------------------*/

/*Index-----------------------------------------*/
.iphonetext{font-size: 2em; text-align: center; }
.iphonetext2{text-align: center;}
.mainhome{border-radius: 20px;
	border: 1px solid black;
	margin-top: 50px;
	height: calc(100vh - 50px);
	background-color: white;
overflow-y: hidden;}


.text-container {

   
	padding: 70px 20px 40px 20px;
  pointer-events: none;
}
.text-containermobile img{width: 100%;
	transform: scaleY(5);
	transform-origin: top;

	padding-top: 10px;}
 


#text-to-extend {
  padding: 0;
 
  transition: transform 0.1s ease; 
  transform-origin: center;

}

.contacthome{
	padding-top: 20px;
	
	height: calc(100vh - 50px);
color: black;}


/*Index-----------------------------------------*/

/*Works-----------------------------------------*/


.scroll-area {
height: calc(100vh - 50px);
	
}
.scroll-containermain{border-radius: 20px;
	border: 1px solid black;
	margin-top: 50px;
	height: calc(100vh - 50px);
	background-color: white;
	
}

.scroll-container {
  overflow: auto;

  -webkit-scroll-snap-type: y mandatory;
      -ms-scroll-snap-type: y mandatory;
          scroll-snap-type: y mandatory;
}

.scroll-area {
  scroll-snap-align: start;
	
}



section{padding: 20px 0px 20px 0px;
height: calc(100vh - 50px);
	

}

.textwork{padding-left: 20px; padding-right: 20px;}
.textwork p {}
div.works {
height: 100vh;
  overflow: auto;
  white-space: nowrap;
 padding: 0;
	column-gap: 5px;
}

.scroll-container video{height: 50%; border: 1px solid black;}
.scroll-container img{height: 50%;border: 1px solid black;}

.openPopupBtn {
    
    border: 1px solid black;
	background-color: white;
	border-radius: 10px;
	padding: 5px;
    cursor: pointer;
	color: black;
}

.popup {
    display: none; /* Masqué par défaut */
    position: fixed;
    left: 0;
    top: 43px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Couleur de fond semi-transparente */
    justify-content: center;
    align-items: center;
}

.popup-content {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    width: 80%;
    
}
.popup-content h1{margin: 0;}
.close-btn {
    position: absolute;
	
    top: 0;
    left: 0;
    font-size: 20px;
    cursor: pointer;
}

a.next:link, a.next:visited{ 
	background-color: white;
	padding: 5px;
	color: black;}

a.next:hover, a.next:active{
	background-color: black;
font-family: "Sangbleu Kingdom Regular";	
	padding: 5px;
	color: white;}
.next{ border: 1px solid black;
	border-radius: 10px;
	margin: 0 auto;
	margin-top: 20px;
	scroll-behavior: smooth;
}

/*Works-----------------------------------------*/
/*About-----------------------------------------*/

.about{padding-left: 20px; padding-right: 20px;}
/*About-----------------------------------------*/

@media (min-width: 576px) {
.contacthome{
	bottom: 15px;}
	body{font-size: 15px;}	
	h1{font-size: auto;}
	section{padding: 20px 0px 20px 0px;}
/*	.scroll-container video{height: 390px;}
	.scroll-container img{height: 390px;}*/
	
	
	
}
@media (min-width: 768px) {
.contacthome{
	bottom: 0px;}	
	body{font-size: 18px;}	
	h1{font-size: 2em;}
	section{padding: 20px 0px 20px 0px;}
	.scroll-container video{height: 90%;}
	.scroll-container img{height: 90%;}
}
@media (min-width: 992px) {
.contacthome{
	bottom: 0px;}	
		body{font-size: 18px;}	
	h1{font-size: 2em;}
	section{padding: 20px 0px 20px 0px;}
	/*.scroll-container video{height: 550px;}
	.scroll-container img{height: 550px;}*/
}
@media (min-width: 1200px) {
.contacthome{
	bottom: 0px;}	
	body{font-size: 18px;}	
	h1{font-size: 2em;}
	section{padding: 20px 0px 20px 0px;}
	/*.scroll-container video{height: 650px;}
	.scroll-container img{height: 650px;}*/
}