/* ------------------------------------------------------------------------------------ BODY + VARIABLES */

body
	{
		--padding :				0px;
		--height :				calc( 100vh - ( 2 * var(--padding) ) );
		--width :				calc( var(--height) * ( 400 / 270 ) );

		--centre :				calc( var(--width) / 2 );
		--centre_v :			calc( var(--height) / 2 );

		--color :				#1633FF;
		--color_text :			#000000;
		--color_background :		#FFFFFF;

		--link_f_color :			#FFF;
		--link_bg_color :			#333;

		color :				var( --color_text );
		background-color :		var( --color_background );
		font-variant-ligatures :	common-ligatures;
		scroll-behavior :			smooth;
		-webkit-overflow-scrolling :	touch;
		/*font-feature-settings :		"tnum";*/
	}

/* ------------------------------------------------------------------------------------ EFFETS */

.produit
	{
		mix-blend-mode :			multiply;
	}



/* ------------------------------------------------------------------------------------ HTML */

html
	{
		scroll-behavior :			smooth;
	}



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

body,
input,
select,
textarea
	{
		font-family :			Arial, sans-serif;
		font-size :				15px;
	}

/* ------------------------------------------------------------------------------------ IMAGES */

img
	{
		border :				none;
		vertical-align :			middle;
	}


/* ------------------------------------------------------------------------------------ TEMPLATE */

#container
	{
		position :				relative;
		margin :				0 auto;
		padding : 				var( --padding );
		width :				100%;
		min-height :			100%;
		background-color :		var( --color_background );
		overflow-y :			scroll;
	}



/* ------------------------------------------------------------------------------------ LOOKBOOK */

.content
	{
		padding :				2rem 1rem 5rem 1rem;
		text-align :			center;
		background-color :		var(--couleur);
	}


.content a
	{
		color :				var( --color_text );
		text-decoration :			none;
		opacity :				0.7;
	}
.content a:hover
	{
		text-decoration :			underline;
	}

.page
	{
		position :				relative;
		width :				calc( 100vw - ( 2 * var( --padding ) ) );
		height :				calc( 100vh - ( 2 * var( --padding ) ) );
		text-align :			center;
 		background-color :		#FFFFFF;
		background-color :		var(--couleur);
		overflow :				hidden;
	}

.page.test
	{
		background-color :		lightyellow;
	}
.page.test .contenu
	{
		background-color :		#A5D1DA;
		box-shadow :			0 0 10px rgba( 0 , 0 , 0, 0.6 );
	}

.contenu,
.fond
	{
		width :				var( --width );
		height :				100vh;
	}

.contenu
	{
		position :				relative;
		z-index :				10;
		margin :				0 auto;
		padding :				0;
		overflow :				hidden;
		/*background-color :		#FFFFFF;*/
	}

.fond,
.calque
	{
		background-repeat :		no-repeat;
		background-position :		center center;
		background-size :			contain;
	}

.fond
	{
		position :				absolute;
		left :				50%;
		margin-left :			calc( 0px - var(--centre) );
		overflow :				hidden;
	}

.fond.fixe
	{
		background-attachment :		fixed;
	}

.fond > img
	{
		position :				relative;
		max-width :				100%;
		max-height :			100%;
		transition :			all 300ms ease;
	}

.calque
	{
		position :				absolute;
		top :					auto;
		left :				auto;
		right :				auto;
		bottom :				auto;
		width :				100%;
		height :				100%;
		overflow :				hidden;
		opacity :				0;
	}

.calque.video,
.calque.gif
	{
		opacity :				0;
		padding :				0;
		text-align :  			left;
	}

.calque.video video,
.calque.gif img
	{
		padding :				0;
		max-width :				100%;
		max-height :			100%;
	}

.calque_old
	{
		position :				absolute;
		top :					0;
		left :				0;
		right :				0;
		bottom :				0;
		overflow :				hidden;
		opacity :				0;
	}


/* --------------------------------------------------------- CLAQUES VIDEOS */

#page_07 .calque.video video
	{
		width :				18.90%;
		margin-left :			78.60%;
	}

#page_08 .calque.video video
	{
		width :				19.60%;
		margin-left :			52.90%;
	}

#page_09 .calque.video video
	{
		width :				17.69%;
		margin-left :			82.30%;
		margin-top :			2.40%;
	}

#page_14 .calque.video video
	{
		width :				30.3%;
		margin-left :			64%;
		margin-top :			23.3%;
	}

#page_23 .calque.video video
	{
		width :				24.418%;
		margin-left :			49.937%;
	}

#page_27 .calque.video video
	{
		width :				25.6%;
		margin-left :			43.123%;
	}

#page_31 .calque.video video
	{
		width :				21%;
		margin-left :			2%;
	}

#page_32 .calque.video video
	{
		width :				22.302%;
		margin-left :			44.223%;
	}

#page_33 .calque.video video
	{
		width :				18.75%;
		margin-left :			53.76%;
		margin-top :			12%;
	}




/* --------------------------------------------------------- CLAQUES GIFS */

#page_13 .calque.gif img
	{
		width :				18.7%;
		margin-left :			5.7%;
		margin-top :			39%;
	}

#page_20 .calque.gif img
	{
		width :				23.8%;
		margin-left :			53.8%;
		margin-top :			41.15%;
	}

#page_23 .calque.gif img
	{
		transform :				rotate(90deg);
		width :				31.3%;
		margin-left :			48.8%;
		margin-top :			30.15%;
	}





/* --------------------------------------------------------- CLAQUES LIENS */

.calque.links
	{
		opacity :				1;
	}


@keyframes tooltips {
 	0%
	  	{
	  		background-color :		var( --link_bg_color );
	  	}
  
	50%
		{
			/*
			background-color :		var( --couleur );
			background-color :		#0F9;
			*/
			background-color :		#FFF;
  		}

	100%
		{
	  		background-color :		var( --link_bg_color );
		}
}

.calque.links .link
	{
		display :				block;
		position :				absolute;
		width :				1rem;
		height :				1rem;
		border-radius :			50%;
		background-color :		var( --link_bg_color );
		opacity :				1;
		transition :			all .3s;
		animation-timing-function :	ease-in-out;
		will-change :			transform, opacity;

		/*
		border :				0.2rem solid #0F9;
		background-color :		#555;
		*/
	}

.calque.links .link:not(:hover)
	{
		animation :				tooltips 2s infinite;
	}

.calque.links .link:hover
	{
		opacity :				1;
		background-color :		var( --link_bg_color );
		transform :				scale(1.3);
	}


.tooltip_link.jtippy
	{
		margin-top :			-0.2rem;
		background-color :		var( --link_bg_color );
	}

.tooltip_link .jt-arrow-bottom
	{
		border-top-color :		var( --link_bg_color );
	}

.tooltip_link .jt-title
	{
		color :				var( --link_f_color );
		font-family :			"Monument Extended", Arial, sans-serif;
		font-size :				0.7rem;
		font-weight :			normal;
		text-transform :			capitalize;
		font-variant :			small-caps;
	}

.tooltip_link .jt-title:after
	{
		content :				"";
		display :				inline-block;
		vertical-align :			middle;
		margin-top :			-2px;
		margin-left :			5px;
		width :				20px;
		height :				20px;
		background-image :		url( "icon_link.svg" );
		background-position :		center center;
		background-size :			18px 18px;
		background-repeat :		no-repeat;
	}


.calque.links .lien
	{
		display :				block;
		position :				absolute;
		background-color :		rgba( 255 , 0 , 0 , 0.2 );
	}






/* --------------------------------------------------------- LOOKBOOK : COULEURS PAGES */

#page_01 	{ --couleur : 				#E7D6CC; }
#page_02 	{ --couleur : 				#FFFFFF; }
#page_03 	{ --couleur : 				#B93425; }
#page_04 	{ --couleur : 				#E7E1D5; }
#page_05 	{ --couleur : 				#E64E2A; }
#page_06 	{ --couleur : 				#E9E2D8; }
#page_07 	{ --couleur : 				#FFFFFF; }
#page_08 	{ --couleur : 				#E8D6CB; }
#page_09 	{ --couleur : 				#E4D7D9; }
#page_10 	{ --couleur : 				#E7D6CC; }
#page_11 	{ --couleur : 				#424A33; }
#page_12 	{ --couleur : 				#e9d7cc; }
#page_12_A  { --couleur : 				#E8D6CA; }
#page_12_B  { --couleur : 				#FFFFFF; }
#page_12_C  { --couleur : 				#E8D6CA; }
#page_13 	{ --couleur : 				#EDA224; }
#page_14 	{ --couleur : 				#FFFFFF; }
#page_15 	{ --couleur : 				#E2E3E5; }
#page_16 	{ --couleur : 				#F2E1E8; }
#page_17 	{ --couleur : 				#F1E0E7; }
#page_18 	{ --couleur : 				#E8D6CB; }
#page_19 	{ --couleur : 				#FFFFFF; }
#page_20 	{ --couleur : 				#9284AC; }
#page_21 	{ --couleur : 				#D1CDDE; }
#page_22 	{ --couleur : 				#E9D7CC; }
#page_22_A	{ --couleur : 				#E9D7CC; }
#page_22_B	{ --couleur : 				#FFFFFF; }
#page_22_C	{ --couleur : 				#E9D7CC; }
#page_23 	{ --couleur : 				#A5D1DA; }
#page_24 	{ --couleur : 				#a7bec4; }
#page_25 	{ --couleur : 				#293927; }
#page_26 	{ --couleur : 				#FFFFFF; }
#page_27 	{ --couleur : 				#6B7664; }
#page_28 	{ --couleur : 				#efa527; }
#page_29 	{ --couleur : 				#A1232F; }
#page_30 	{ --couleur : 				#E64124; }
#page_31 	{ --couleur : 				#D2A590; }
#page_32 	{ --couleur : 				#FFFFFF; }
#page_33 	{ --couleur : 				#E0D5BB; }
#page_34 	{ --couleur : 				#B73324; }
#page_35 	{ --couleur : 				#E8D6CB; }




/* --------------------------------------------------------- FILTRE IMAGE : BLUR */

.fond.f_blur
	{
		background-color :		#FFFFFF;
	}

.fond.f_blur > img
	{
		-webkit-filter :			blur(2px);
		filter :				blur(2px);
	}


.fond.f_light > img
	{
		-webkit-filter :			brightness(120%);
		filter :				brightness(120%);
	}

.fond.f_hue > img
	{
		-webkit-filter :			saturate(40%) hue-rotate(22deg);
		filter :				saturate(40%) hue-rotate(22deg);
	}

.fond.f_hue > img::before
	{
		display :				block;
		position :				absolute;
		content :				"";
		height :				100%;
		width :				100%;
		top :					0;
		left :				0;
		pointer-events :			none;
		mix-blend-mode :			screen;
		background :			rgba(243, 106, 188, 0.3);
	}





/* ------------------------------------------------------------------------------------ SCROLL DOWN */


#scroll_down
	{
		display :				inline-block;
		position :				absolute;
		z-index :				91000;
		bottom :				0px;
		left :				50%;
  		padding-top :			6vh;
		-webkit-transform :		translate(0, -50%);
		transform :				translate(0, -50%);
		transition :			opacity .3s;
		text-decoration :			none;
		cursor : 				pointer;
	}

#scroll_down span 
	{
		position :				absolute;
		top :					0;
		left :				50%;
		margin-left :			-1vh;
		width :				3vh;
		height :				3vh;
		
		border-color :			#E8412C;
		border-style :			solid;
		border-left-width :		0.4vh;
		border-bottom-width :		0.4vh;

		transition :			all 300ms ease;

		-webkit-transform :		rotate(-45deg);
		transform :				rotate(-45deg);
		-webkit-animation :		scroll_down 2s infinite;
		animation :				scroll_down 2s infinite;
		opacity :				0;
	}


#scroll_down:hover span 
	{
		border-color :			#222222;
	}

#scroll_down span:nth-of-type(1)
	{
		-webkit-animation-delay :	0s;
		animation-delay :			0s;
	}

#scroll_down span:nth-of-type(2)
	{
		top :					1.4vh;
		-webkit-animation-delay :	0.15s;
		animation-delay :			0.15s;
	}

#scroll_down span:nth-of-type(3)
	{
		top :					3vh;
		-webkit-animation-delay :	0.3s;
		animation-delay :			0.3s;
	}


@-webkit-keyframes scroll_down {
	0% {
		opacity: 0;
	}

	50% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

@keyframes scroll_down {
	0% {
		opacity: 0;
	}

	50% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}



/* ------------------------------------------------------------------------------------ SCROLL BULLETS */

.scroll_titre
	{
		display :				none;
	}

body #scroll-indicator-bullets
	{
		right :				20px;
		font-family : 			Arial, sans-serif;
		font-size :				0.7rem;
		z-index :				90000;
	}

body #scroll-indicator-bullets,
body #scroll-indicator-bullets *
	{
		outline :				none;
	}











/* ------------------------------------------------------------------------------------ MEDIA QUERIES : RATIO */

@media ( max-aspect-ratio : 400 / 270 ) {

	body
		{
			--padding :				0px;
			--width :				calc( 100vw - ( 2 * var(--padding) ) );
			--height :				calc( var(--width) / ( 400 / 270 ) );
		}

	.page,
	.contenu,
	.fond
		{
			width :				100vw;
			height :				var( --height );
		}


	#scroll_down
		{
	  		padding-top :			6vw;
		}

	#scroll_down span 
		{
			top :					3vw;
			margin-left :			-1vw;
			width :				2vw;
			height :				2vw;
			border-left-width :		0.4vw;
			border-bottom-width :		0.4vw;
		}

	#scroll_down span:nth-of-type(2)
		{
			top :					4vw;
		}

	#scroll_down span:nth-of-type(3)
		{
			top :					5vw;
		}

}