/* colors: -beige 1: #f1f0e5
		   -beige 2:#c1bdaa
		   -bleu : #085f90
		   -bleu active :#058f90
		   -footer:#192227 */

@font-face{
	font-family:"Cocosharp-trial" ;
	src:url("font/Coco-Sharp-Regular-trial.ttf") ;
}
@font-face{
	font-family:"coolvetica rg" ;
	src:url("font/coolvetica rg.otf") ;
}

html{
	width:100% ;
	scroll-behavior:smooth ;
}
#upcoming{
	background-color:#f1f0e5 ;
	background:#f1f0e5 url("img/mobile-back2.png") no-repeat center top ;
}
body{
margin:0 ;
}
							/*----Header Index.html----*/
#header-upcoming{
	margin-bottom:300px ;
}
header h1{
	display:none ;
}
header h2{
	display:none ;
}
header h3{
	display:none ;
}
header{
	margin:0 ;
	padding-top:60px ;
	display:flex ;
	flex-flow:column wrap ;
	align-items:center ;
	
}
header #logo{
	width:80% ;
	align-items:center ;
}
#nav-upcoming{
	display:none ;
}
header nav ul li a{
	text-decoration:none ;
	color:#f1f0e5 ;
}
header nav ul li a:visited{color:#f1f0e5 ;}
header nav ul li a:hover{color:#000000 ;}
header nav ul li a:active{color:#058f90 ;}
header nav ul{
	list-style:none ;
	padding-left:0 ;
	display:flex;
	flex-direction:column ;
	align-items:center ;
}
header nav ul li{
	font-family:"Cocosharp-trial","calibri",sans-serif ;
	text-transform:uppercase ;
	padding:30px ;
	font-size:2em ;
}

/*-------------------------------------------------------------------------------*/
							/*-----Main Index.html-----*/
main{
	margin-top:100px ;
	position:relative ;
}
main #h2{
	display:flex ;
	justify-content:center ;
	padding-left:40px ;
	padding-right:40px ;
}
main h2{
	font-family:"Cocosharp-trial","calibri",sans-serif ;
	color:#085f90 ;
	font-size:3em ;
	text-align:center ;
	border-bottom:solid 1.8px #085f90 ;
	margin-bottom:100px ;
}
main h3{
	font-family:"Cocosharp-trial","calibri",sans-serif ;
	color:#085f90 ;
	font-size:2em ;
	border-bottom:solid 1.5px #085f90 ;
	margin-right:300px ;
	padding-left:25px ;
	font-style:italic ;
	margin-left:20px ;
}
main h4{
	font-family:"coolvetica rg" ;
	background-color:#085f90 ;
	color:#f1f0e5 ;
	padding:5px ;
	padding-left:15px ;
	font-size:1.3em ;
}
main .vignette{
	display:flex ;
	flex-flow:column wrap;
	align-items:center ;
	padding-bottom:40px ;
	justify-content:space-evenly ;
}
main .shoes{
	width:30% ;
	min-width:190px ;
	height:30% ;
	padding-top:50px ;
}
main .h5{
	display:flex ;
	flex-flow:column nowrap ;
	justify-content:center ;
	text-align:center ;
}
main h5{
	font-family:"coolvetica rg" ;
	color:#085f90 ;
	font-size:1.5em ;
	margin-bottom:30px ;
}
main .p{
	display:flex ;
	flex-flow:row wrap ;
	justify-content:center ;
	padding-left:10px ;
	
}
main p{
	font-family:"coolvetica rg" ;
	color:#085f90 ;
	margin-right:30px ;
}
main .relative{
	position:relative ;
	padding-right:45px ;
}
main .boules{
	position:absolute ;
	width:50% ;
	top:22px ;
	left:43px ;
}
main #strange-love{
	font-family:"coolvetica rg" ;
	color:#085f90 ;
	font-size:1.5em ;
	margin-bottom:10px ;
}
main #sous-titre-sl{
	display:flex ;
	flex-flow:row wrap ;
	justify-content:center ;
	text-align:center ;
}
main #sous-titre-sacai{
	display:flex ;
	flex-flow:row wrap ;
	justify-content:center ;
	}
main #sous-titre-slides{
	display:flex ;
	flex-flow:row wrap ;
	justify-content:center ;
	padding-left:27px ;
}

/*-------------------------------------------------------------------------------------*/
						/*----Footer Index.html----*/
footer{
	background-color:#192227 ;
	padding:20px ;
	display:flex ;
	flex-direction:column ;
	justify-content:center ;
	align-items:center ;
	position:relative ;
}
#up{
	position:absolute ;
	top:-60px ;
	right:5px  ;
	width:60px ;
	height:55px ;
	opacity:0.2 ;
	transition:0.15s ;
}
#up:hover{opacity:0.6 ;}
#up:active{opacity:1 ;}
footer p{
	font-family:"Coolvetica rg","Calibri",sans-serif ;
	color:#f1f0e5 ;
	text-align:center ;
}
footer div{
	display:flex ;
	flex-flow:row wrap ;
	align-items:center ;
	justify-content:center ;
	list-style:none ;
}
footer div p{
	padding-right:5px ;
	padding-left:10px ;
}
footer #nopadding{
	padding-right:0px ;
}
footer .réseaux{
	width:25px ;
	padding-left:15px ;
}
footer #copyright{
	padding-bottom:0px ;
	padding-top:20px ;
	font-style:italic ;
	font-size:0.8em ;
}




/*------------------------------------------------------------------------------------------*/

							/*----Informations.html----*/
							
#informations{
	background-color:#f1f0e5 ;
	background:#f1f0e5 url("img/pattern.svg")center top fixed;
	background-size:200px ;
}
	/*--------------------------------------------------------------------------------*/
							/*----Header Informations.html----*/
#header_informations{
	background-color:#085f90 ;
	margin-bottom:40px ;
	display:flex ;
	flex-flow:column ;
	padding-bottom:140px ;
	padding-top:50px ;
}
/*----------------------------------------------------------------------------------------------*/
body
{
  margin: 0;
  padding: 0;
  overflow:auto ;
  width:100% ;
  font-family: "Coolvetica rg", sans-serif;
} 
#nav{
 width:100% ;
  text-align:center ;
}
#menu-desktop{
	display:none ;
}
#menuToggle
{
  display:inline-block;
  display:flex ;
  flex-direction:column ;
  align-items:center ;
  position: relative;
  top:100px ;
 
  
  
  z-index: 1;
  
  -webkit-user-select: none;
  user-select: none;
} 

#menuToggle a
{
  text-decoration: none;
  color: #f1f0e5;
  background-color:none ;
  transition: color 0.3s ease;
} 

#menuToggle a:hover
{
  color: tomato;
}


#menuToggle input
{
  display: block;
  width: 40px;
  height: 40px;
  position: absolute;
  top: -7px;
  left: -5px;
  
  cursor: pointer;
  
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger*/
  
  -webkit-touch-callout: none;
} 
#flex-module-1{
	display:flex ;
	flex-direction:column ;
	align-items:center ;
	justify-content:center ;
	position:sticky ;
	top:20px ;
}
#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  
  background: #f1f0e5 ;
  border-radius: 3px;
  
  z-index: 1;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}
#menuToggle span:first-child
{
  transform-origin: 0% 0%;
} 

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #f1f0e5;
} 

#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
} 

#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
} 

#menu-upcoming
{
  position: absolute;
  display:flex ;
  flex-flow:column wrap ;
  align-items:center ;
  justify-content:center ;
  width: 320px ;
  padding-top: 30px;
  padding-left:0px ;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  
  
  transform-origin: 0% 0%;
  transform: translate(-250%,0%);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
} 
#menu-infos
{
  position: absolute;
  display:flex ;
  flex-flow:row wrap ;
  align-items:center ;
  justify-content:center ;
  width: 320px ;
  padding-top: 30px;
  padding-left:0px ;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  
  
  transform-origin: 0% 0%;
  transform: translate(-250%,0%);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
} 
#menu-infos a
{
  padding: 10px 25px;
  color:#f1f0e5 ;
  font-size: 22px;
}
#menu-upcoming a
{
  padding: 10px 25px;
  color:#f1f0e5 ;
  font-size: 22px;
} 
#menu-upcoming a:hover{color:#000000 ;}
#menu-upcoming a:visited{color:#f1f0e5 ;}
#menu-upcoming a:active{color:#058f90 ;}

#menu-infos a:hover{color:#000000 ;}
#menu-infos a:visited{color:#f1f0e5 ;}
#menu-infos a:active{color:#058f90 ;}

#menuToggle input:checked ~ nav
{
  transform: none;
}
#couleur {
	color:#f1f0e5 ;
}
/*----------------------------------------------------------------------------------------------*/
header #nav_informations{
	width:100% ;
	display:none ;
}
header #a_img_informations{
	display:flex ;
	flex-direction:row ;
	justify-content:center ;
}
header #logosp{
	width:80% ;
}
header .h2_informations{
	display:block ;
	text-align:center ;
	padding-top:15px ;
}
header .a_informations{
	font-family:"Cocosharp-trial","Calibri",sans-serif ;
	text-decoration:none ;
	text-transform:uppercase ;
	color:#f1f0e5 ;
}
header .a_informations:visited{color:#f1f0e5 ;}
header .a_informations:hover{color:#c1bdaa ;}
header .a_informations:active{color:#058f90 ;}
				/*----------------------------------------------------------*/
						/*----main Informations.html----*/
main #div_h5_informations{
	display:flex ;
	justify-content:center ;
	background-color:#f1f0e5 ;
}
main #h5_informations{
	color:#085f90 ;
	text-align:center ;
	background-color:#f1f0e5 ;
	font-size:2.5em ;
	padding:20px 20px 20px 20px ;
	margin:0px 5px 0px 5px ;
	border-bottom:solid 2px #085f90 ;
}
.lien-txt{
	text-decoration:none ;
	color:#192227 ;
}
.lien-txt:hover{opacity:.4 ;}
.lien-txt:active{opacity:.1 ;}
main #p_informations{
	text-align:center ;
	background-color:#f1f0e5 ;
	padding:40px 20px 15px 20px ;
	margin-top:0 ;
	margin-right: 0;
	margin-bottom:80px ;
}
main #div_h5_plus_att_informations{
	display:flex ;
	justify-content:center ;
	background-color:#f1f0e5 ;
	padding-bottom:15px ;
}
main #h5_plus_att_informations{
	color:#085f90 ;
	text-align:center ;
	background-color:#f1f0e5 ;
	font-size:1.7em ;
	padding:20px 20px 20px 20px ;
	margin:0px 5px 0px 5px ;
	border-bottom:solid 2px #085f90 ;
}
main #flex_canari{
	display:flex ;
	flex-flow:column nowrap ;
	justify-content:space-evenly ;
	align-items:center ;
	background-color:#f1f0e5 ;
	padding:0 10px ;
}
main #canari{
	width:35% ;
	max-width:190px ;
	background-color:#f1f0e5 ;
	padding:0px 5px 5px 5px ;
}
main #p_canari{
	font-size:0.8em ;
	margin-right:0 ;
	text-align:center ;
	width:100% ;
}
main #div_h5_dior_informations{
	display:flex ;
	justify-content:center ;
	background-color:#f1f0e5 ;
	padding-bottom:15px ;
	margin-top:80px ;
}
main #h5_dior_informations{
	color:#085f90 ;
	text-align:center ;
	background-color:#f1f0e5 ;
	font-size:1.7em ;
	padding:20px 20px 20px 20px ;
	margin:0px 5px 0px 5px ;
	border-bottom:solid 2px #085f90 ;
}
#flex_dior{
	display:flex ;
	flex-flow:column nowrap ;
	justify-content:space-evenly ;
	align-items:center ;
	background-color:#f1f0e5 ;
	padding:0 10px ;
}
main #dior{
	width:35% ;
	max-width:260px ;
	background-color:#f1f0e5 ;
	padding:0px 5px 5px 5px ;
}
main #p_dior{
	text-align:center ;
	font-size:0.8em ;
	margin-right:0 ;
	width:100% ;
}
#block-desktop{
	display:none ;
}
@media screen and (min-width:1024px){
	#upcoming {		
		background-color:#f1f0e5 ;
		background-size:0% ;
	}
	#header-upcoming{
		padding-top:0px ;
		height:100vh ;
		display:block ;
		margin-bottom:10px ; 
		
	}
	#nav{
		display:none ;
	}
	#nav-upcoming{
		display:block ;
		width:100% ;
		display:flex ;
		justify-content:center ;
		opacity:0 ;
		animation:apparition 0.4s 1s ease-out forwards ;
	}
	#nav-upcoming ul{
		display:flex ;
		align-items:center ;
		justify-content:space-around ;
		flex-flow:row nowrap ;
		padding:0% 10% 0% 10% ;
	}
	#nav-upcoming a{
		font-size:1.5em ;
		text-decoration:none ;
		text-transform:uppercase ;
		margin:20px 40px 40px;
		font-family:"Cocosharp-trial" ;
	}
	#a-venir-upcoming{
		color:#f1f0e5 ;
		background-color:#085f90 ;
		border:solid 1.8px #085f90 ;
		border-radius:60px ;
		padding:10px 40px ;
		transition:0.25s ;
	}
	#a-venir-upcoming:hover{
		background-color:#f1f0e5 ;
		color:#085f90 ;
	}
	#a-venir-upcoming:active{
		color:#f1f0e5 ;
		background-color:#085f90 ;
		transition:0.1s ;
	}
	
	#a-infos-upcoming{
		background-color:#f1f0e5 ;
		color:#085f90 ;
		border:solid 1.8px #085f90 ;
		border-radius:60px ;
		padding:10px 40px ;
		transition:0.25s ;
	}
	#a-infos-upcoming:hover{
		color:#f1f0e5 ;
		background-color:#085f90 ;
	}
	#a-infos-upcoming:active{
		background-color:#f1f0e5 ;
		color:#085f90 ;
		transition:0.1s ;
	}
	
	#logo{
		display:none ;
	}
	#block-desktop{
		display:block ;
		display:flex ;
		flex-flow:row nowrap ;
		align-items:center ;
		width:100% ;
		height:100% ;
		text-align:center ;
	}
	#h2-p-upcoming{
		width:75% ;
		height:100% ;
		margin-top:140px ;
	}
	#header-p-upcoming{
		color:#085f90 ;
		opacity:0 ;
		animation:apparition 0.4s 0.6s ease-out forwards ;
	}
	#div-circle{
		width:35% ;
		height:100% ;
	}
	#circle{
		max-width:250px ;
		margin-top:160px ;
		position:relative ;
		transition:0.4s ;
		opacity:0 ;
		animation:apparition 0.4s 0.8s ease-out forwards ;
	}
	#circle:hover{
		max-width:305px ;
		
	}
	#logo-desktop{
		position:absolute ;
		width:65% ;
		top:430px  ;
		right:170px ;
		opacity:0 ;
		animation:apparition 0.4s 0.8s ease-out forwards ;
	}
	#header-h2-upcoming{
		display:block ;
		color:#085f90 ;
		font-size:2.8em ;
		opacity:0 ;
		animation:apparition 0.4s 0.4s ease-out forwards;
	}
	main #h2{
		display:none ;
	}
	@keyframes apparition{
		0% {
			opacity:0 ;
			transform:translateY(-30px) ;
		}
		100% {
			opacity:1 ;
			transform: none;
		}
	}
	main{
		margin-top:0px ;
	}
	main .vignette{
		display:flex ;
		flex-direction:row ;
	}
	/*---------------------------------------------------------------------------------------------*/
	/*-----------------------------------HEADER INFORMATIONS----------------------------------------------*/
	
	#header_informations{
		padding-top:0px ;
		height:100vh ;
		display:block ;
		margin-bottom:10px ;
		background-color:#f1f0e5 ; 
		margin-bottom:0px ;
		padding-bottom:10px ;
	}
	#logosp{
		display:none ;
	}
	#a-venir-infos{
		background-color:#f1f0e5 ;
		color:#085f90 ;
		border:solid 1.8px #085f90 ;
		border-radius:60px ;
		padding:10px 40px ;
		transition:0.25s ;
	}
	#a-venir-infos:hover{
		color:#f1f0e5 ;
		background-color:#085f90 ;
	}
	#a-venir-infos:active{
		background-color:#f1f0e5 ;
		color:#085f90 ;
		transition:0.1s ;
	}
	#a-infos-infos{
		color:#f1f0e5 ;
		background-color:#085f90 ;
		border:solid 1.8px #085f90 ;
		border-radius:60px ;
		padding:10px 40px ;
		transition:0.25s ;
	}
	#a-infos-infos:hover{
		background-color:#f1f0e5 ;
		color:#085f90 ;
	}
	#a-infos-infos:active{
		color:#f1f0e5 ;
		background-color:#085f90 ;
		transition:0.1s ;
	}
	main #flex_canari{
		display: flex;
		flex-flow:row nowrap ;
		justify-content:space-evenly ;
		align-items:center ;
		padding:0 100px ;
		margin:0 100px ;
	}
	#flex_dior{
		display: flex;
		flex-flow:row nowrap ;
		justify-content:space-evenly ;
		align-items:center ;
		padding:0 100px ;
		margin:0 100px ;
	}
	main #p_informations{
		font-size: 1.1em ;
		padding:40px 100px 40px 100px;
		margin:0 200px 100px;
	}
	main #p_canari{
		font-size:1.1em ;
		text-align:left ;
		padding-left:20px ;
	}
	main #p_dior{
		font-size:1.1em ;
		text-align:left ;
	}
	main #div_h5_plus_att_informations{
		margin:0 100px ;
	}
	main #div_h5_dior_informations{
		margin:150px 100px 0;
	}
}