/* ------------------------------------------------------------------------------------ FONTS */

@font-face
	{
		font-family :		"IBM Plex Mono";
		font-display :		swap;
		font-weight :		400;
		font-weight :		normal;
		src :				url( "../fonts/IBM_Plex_Mono/IBMPlexMono-Regular.woff2" ) format("woff2"),
						url( "../fonts/IBM_Plex_Mono/IBMPlexMono-Regular.woff" ) format("woff");
	}

@font-face
	{
		font-family :		"IBM Plex Mono";
		font-display :		swap;
		font-weight :		100;
		src :				url( "../fonts/IBM_Plex_Mono/IBMPlexMono-Thin.woff2" ) format("woff2"),
						url( "../fonts/IBM_Plex_Mono/IBMPlexMono-Thin.woff" ) format("woff");
	}

@font-face
	{
		font-family :		"IBM Plex Mono";
		font-display :		swap;
		font-weight :		500;
		src :				url( "../fonts/IBM_Plex_Mono/IBMPlexMono-Medium.woff2" ) format("woff2"),
						url( "../fonts/IBM_Plex_Mono/IBMPlexMono-Medium.woff" ) format("woff");
	}

@font-face
	{
		font-family :		"IBM Plex Mono";
		font-display :		swap;
		font-weight :		bold;
		font-weight :		700;
		src :				url( "../fonts/IBM_Plex_Mono/IBMPlexMono-Bold.woff2" ) format("woff2"),
						url( "../fonts/IBM_Plex_Mono/IBMPlexMono-Bold.woff" ) format("woff");
	}




/* ------------------------------------------------------------------------------------ HTML + BODY */

html,
body
	{
		margin :				0;
		padding :				0;
	}

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

html
	{
		font-size :				15px;
		font-size :				1.7vh;
	}


/* ------------------------------------------------------------------------------------ VARIABLES */

body
	{
		--template :			"desktop";
		--lazy_target :			"window";


		/* --------------- padding */

		--padding_left :			0vh;
		--padding_right :			0vh;
		--padding_top :			0vh;
		--padding_bottom :		0vh;
		--padding_content :		var( --padding_top ) var( --padding_right ) var( --padding_bottom ) var( --padding_left );
		--gap_content :			0vh;
		--gap_page :			2vh;


		/* --------------- sizes */

		--header :				8vh;

		--ratio :				calc( 1200 / 800 );
		--height :				calc( 100vh );
		--width :				calc( var(--height) * var(--ratio) );

		--refs_width :			2rem;


		/* --------------- couleurs */

		--couleur_fond :			#FFFFFF;
		--couleur_texte :			#555555;
		--rouge :				#DC143C;


		/* --------------- effets */

		--grayscale :			grayscale(100%) opacity(60%);
		--transition :			all 0.3s ease-in-out;



		/* ------------------------------------------------------------------------ */
	}





/* ------------------------------------------------------------------------------------ BODY */

body
	{
		color :				var( --couleur_texte );
		background-color :		var( --couleur_fond );

		font-variant-ligatures :	common-ligatures;
		scroll-behavior :			smooth;
		-webkit-overflow-scrolling :	touch;
		/*
		scroll-snap-type :		y mandatory;
		overflow-y :			scroll;
		*/
	}


/* ------------------------------------------------------------------------------------ DIVERS */

img:not([src]):not([srcset])
	{
		visibility :			hidden;
	}

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


html .mobile_only,
html .content .mobile_only,
html .element.mobile_only
	{
		display :				none;
	}


/* ------------------------------------------------------------------------------------ FONTS / TEXTES */

body,
input,
select,
textarea
	{
		font-family :			"IBM Plex Mono", Arial, sans-serif;
		font-weight :			400;
		font-weight :			normal;
		font-size :				1rem;
	}




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

#container,
#pages,
.page,
.page .content,
#container > #header > #header_content
	{
		margin :				0 auto;
	}


#container,
#pages
	{
		height :				100%;
	}



/* ------------------------------------------------------------------------------------ TEMPLATE : HEADER */

#container > #header
	{
		display :				none;
		z-index :				9000;
		position :				fixed;;
		top :					0;
		left :				0;
		right :				0;
		height :				var( --header );
	}

#container > #header > #header_content
	{
		position :				relative;
		width :				var( --width );
		height :				var( --header );
	}

#logo
	{
		--r :					calc( 100 / 18 );
		--h :					calc( var(--header) / 2.5 );
		--w :					calc( var(--h) * var(--r) );

		display : 				block;
		position :				absolute;
		left :				var( --padding_left );
		top :					50%;
		transform :				translateY( -50% );
		width :				var( --w );
		height :				var( --h );
	}

#logo img,
#logo svg
	{
		width : 				100%;
		height : 				100%;
		object-fit :			contain;
		mix-blend-mode :			multiply;
	}

#logo:hover .logo_color
	{
		fill :				#FF0000;
		cursor :				pointer;
	}

#header_infos
	{
		position :				absolute;
		right :				var( --padding_right );
		top :					50%;
		transform :				translateY( -50% );
		font-size : 			1.2rem;
		text-transform :			uppercase;
	}

#container > #header.blanc > #header_content
	{
		color :				#FFF;
	}
#container > #header.blanc #logo .logo_color
	{
		fill :				#FFF;
	}


/* ------------------------------------------------------------------------------------ TEMPLATE : PAGES */

#pages
	{
		position :				relative;
		padding-bottom :			1vh;
	}

.page
	{
		position :				relative;
		/*scroll-snap-align :		start;*/
		height :				var( --height );
		overflow :				hidden;
	}

.page.gap
	{
		--gap_content :			2vh;
	}

.page .fond
	{
		position :				absolute;
		z-index :				0;
		left :				0;
		right :				0;
		top :					0;
		bottom :				0;
	}

.page .fond.ontop
	{
		pointer-events :			none;
	}

.page .fond.blur
	{
		filter :				blur( 0.3rem );
	}

.page .fond,
.page .fond > div
	{
		background-size :			cover;
		background-position :		center center;
		background-repeat :		no-repeat;
	}

.page .fond.full 			{ background-size : contain; }
.page .fond.top_left		{ background-position : top left; }
.page .fond.top_right		{ background-position : top right; }
.page .fond.bottom_left		{ background-position : bottom left; }
.page .fond.bottom_right	{ background-position : bottom right; }


.page .fond > div
	{
		float :				left;
		width :				50%;
		height :				100%;
	}


.page .content
	{
		z-index :				100;
		position :				relative;
  		display :				block;
		width :				var( --width );
		height :				var( --height );
		padding :				var( --padding_content );
  		overflow :				hidden;
	}

.content.padding
	{
		padding-top :			var( --header );
	}

.content.full
	{
		padding-top :			0;
		padding-bottom :			0;
	}

.content .gauche,
.content .droite
	{
		position :				relative;
		height :				calc( var( --height ) - var( --padding_top ) - var( --padding_bottom ) );
		overflow :				hidden;
	}

.content .gauche
	{
		float :				left;
		width :				calc( ( var( --width ) / 2 ) - ( var( --gap_content ) / 2 ) - var( --padding_left ) );
	}

.content .droite
	{
		float :				right;
		width :				calc( ( var( --width ) / 2 ) - ( var( --gap_content ) / 2 ) - var( --padding_right ) );
	}

.content.padding .gauche,
.content.padding .droite
	{
		height :				calc( var( --height ) - var( --padding_top ) - var( --padding_bottom ) - var(--header ) );
	}

.content .gauche::after,
.content .droite::after
	{
		content :				"";
		display :				block;
		clear :				both;
	}






/* ------------------------------------------------------------------------------------ PAGES : POSITIONNEMENTS */

._left 	{ left :		0; }
._right 	{ right :		0; }
._top 	{ top :		0; }
._bottom 	{ bottom :		0; }


/* ------------------------------------------------------------------------------------ PAGES : CONTENU */

.content.refs .gauche
	{
		padding-left :			var( --refs_width );
	}


.content.refs .gauche ._left
	{
		left :				var( --refs_width );
	}


.refs_produits
	{
		position :				absolute;
		top :					50%;
		transform :				rotate(-90deg) translateX( -50% );
		transform-origin :		top left;
		height :				var( --refs_width );

		font-size : 			1rem;
		font-weight : 			100;
		text-transform :			uppercase;
		letter-spacing : 			0.3rem;
		color :				#8a8887;
	}

.page .content.padding .refs_produits
	{
		top :					calc( 50% - var( --padding_bottom ) );
	}

.content img,
.content .bloc
	{
  		max-width :				100%;
  		max-height :			100%;
	}


.content .bloc,
.content .element,
.content .titre,
.content .text,
.content .image,
.content .video
	{
		display :				block;
		position : 				absolute;
	}

.content .bloc .titre
	{
		position :				absolute;
		left :				0;
		right :				0;
	}

.content .bloc .titre.center
	{
		top :					50%;
		transform :				translateY( -50% );
	}



.content .image
	{
		z-index :				3000;
	}
.content .video
	{
		z-index :				4000;
	}
.content .titre
	{
		z-index :				5000;
	}
.refs_produits
	{
		z-index :				6000;
	}
.badge_chapitre
	{
		z-index :				7000;
	}
.page .fond.ontop
	{
		z-index :				8000;
	}


.content .video.demo
	{
		height :				80%;
		background-color :		#0000CC;
	}

.content .text.bold
	{
		font-weight : 			500;
	}

.content .text.spaced
	{
		font-size :				1rem;
		line-height :			1.4em;
	}

.content .text.big.spaced
	{
		font-size :				1.1rem;
		line-height :			1.6em;
	}

.content .text.grille
	{
		display :				grid;
		grid-gap :				0;
		grid-template-columns :		repeat( 4 , 1fr );
		grid-auto-flow :			dense;
	}
.content .text.grille.trois
	{
		grid-template-columns :		repeat( 3 , 1fr );
	}

.content .text.grille > span
	{
		position :				relative;
		margin-bottom :			0;
		padding :				0;
		grid-column-end :			span 1;
		grid-row-end :			span 1;
	}



.content .big_img
	{
		position :				absolute;
		left :				var( --header );
		right :				var( --header );
		top :					var( --header );
		bottom :				var( --header );
		background-repeat :		no-repeat;
		background-size :			cover;
		background-position :		center center;
	}

.content .big_img.contain
	{
		background-size :			contain;
	}

.titre_chapitre
	{
		position :				absolute;
		bottom :				22%;
		width :				100%;
		left :				0%;
		font-family :			"IBM Plex Mono";
		font-size : 			10vw;
		font-weight :			700;
		text-align :			center;
		text-transform :			uppercase;
		color :				#FFFFFF;
	}




/* ------------------------------------------------------------------------------------ IMAGES ET ANIMATIONS */

.fleche
	{
		--margin :				6%;
		animation :				bounce 0.7s ease infinite;
	}

@keyframes bounce {
     
	0%	{ transform :			translateY( calc( var(--margin) * -1 ) );	}
	15% 	{ transform :			translateY(  0% ); }
	50%	{ transform :			translateY(  var(--margin) );	}
	80%	{ transform :			translateY(  0% ); }
	100%	{ transform :			translateY( calc( var(--margin) * -1 )  );	}
}

/*
@-webkit-keyframes bounce {
	0%	{ transform :			translateY( calc( var(--margin) * -1 ) );	}
	15% 	{ transform :			translateY(  0% ); }
	50%	{ transform :			translateY(  var(--margin) );	}
	80%	{ transform :			translateY(  0% ); }
	100%	{ transform :			translateY( calc( var(--margin) * -1 )  );	}
}
*/

/* ------------------------------------------------------------------------------------ TEXTES ET COULEURS */

.c_blanc
	{
		color :				#FFF;
	}



/* ------------------------------------------------------------------------------------ BOUTONS / LIENS */

.boutons
	{
		--height :				2rem;
		--gap :				0.3rem;
		--border :				1px;

		position :				absolute;
	}

.content .bloc .boutons
	{
		left :				0;
		right :				0;
	}

.boutons > a,
.boutons > button
	{
		position :				relative;
		display :				block;
		padding-right :			calc( var( --height ) + var( --gap ) );
		height :				var( --height );
		
		text-align :			center;
		font-size :				0.8rem;
		color :				#000;
		text-decoration :			none;
		text-transform :			uppercase;

		white-space :			nowrap;
	}

.boutons > a:nth-child(n+2),
.boutons > button:nth-child(n+2)
	{
		margin-top :			1rem;
	}

.boutons span
	{
		display :				block;
		padding-left :			1rem;
		padding-right :			calc( var( --height ) + 1rem );
		line-height :			var( --height );
		border-top :			var( --border ) solid #BBB;
		border-bottom :			var( --border ) solid #BBB;
	}

.boutons span:after
	{
		content :				"";
		display :				block;
		position :				absolute;
		right :				calc( var( --height ) + var( --gap ) );
		top :					var( --border );
		bottom :				0;
		width :				var( --height );
		height :				var( --height );
		background-image :		url( "fleche.svg" );
		background-repeat :		no-repeat;
		background-size :			54%;
		background-position :		center center;
	}

.boutons div
	{
		display :				block;
		position :				absolute;
		right :				0;
		top :					0;
		width :				calc( var( --height ) + ( var( --border ) * 2 ) );
		height :				calc( var( --height ) + ( var( --border ) * 2 ) );
	}

.boutons > a:hover span,
.boutons > button:hover span
	{
		/*
		color :				var( --rouge );
		border-color :			var( --rouge );
		*/

		color :				#FFF;
		background-color :		#333;
		border-color :			#333;
	}

.boutons > a:hover span:after,
.boutons > button:hover span:after
	{
		background-image :		url( "fleche_hover.svg" );
	}

.boutons > a:hover img
	{
		filter :				brightness( 110% ) contrast( 110% );
	}


/* ------------------------------------------------------------------------------------ BRUIT */

#noise
	{
		z-index:				999999;
		position:				fixed;
		top :					-30vw;
		right :				-30vw;
		bottom:				-30vw;
		left:					-30vw;
		width:				auto;
		height:				auto;
		background-image :		url( "bruit.png" );
		/*
		background-size :			cover;
		background-position :		center center;
		*/
		background-size :			20vw;
		background-repeat :		repeat;
		mix-blend-mode :			multiply;
		opacity :				0.1;
		pointer-events :			none;
		animation :				noise 2s steps(2) infinite;
	}



@keyframes noise {

	0% 	{ transform: translate( 	    0,		-1rem		) }
	10%	{ transform: translate( 	 1rem,		 6rem	 	) }
	20%	{ transform: translate( 	 6rem,		-2rem	 	) }
	30%	{ transform: translate( 	-2rem,		 5rem	 	) }
	40%	{ transform: translate( 	 8rem,		 1rem		) }
	50%	{ transform: translate( 	-9rem,		 8rem		) }
	60%	{ transform: translate( 	 0rem,		 2rem	 	) }
	70%	{ transform: translate( 	-1rem,		-1rem		) }
	80%	{ transform: translate( 	-3rem,		-4rem		) }
	90%	{ transform: translate( 	-1rem,		-1rem		) }
	to 	{ transform: translate( 	 5rem,		 0rem	 	) }

}





/* ------------------------------------------------------------------------------------ MEDIA QUERIES : HAUTEUR PLUS GRANDE QUE LE RATIO */

@media ( max-aspect-ratio: 3/2 ) {

	html
		{
			font-size :				1.1vw;
		}

	body
		{
			--padding_left :			1vw;
			--padding_right :			1vw;
			--padding_bottom :		0vw;
			--gap_content :			0vw;

			--header :				6vw;
			--width :				100vw;
			--height :				calc( ( ( var(--width) - var(--padding_left) - var(--padding_right) ) / var(--ratio) ) );
		}


	.page .content
		{
			padding :				0;
		}

	.page.full .refs_produits
		{
			left :				var( --padding_left );
		}

	.content .gauche
		{
			left :				var(--padding_left);
		}

	.content .droite
		{
			right :				var(--padding_right);
		}


	html #page_42 img.logo_kalenji
		{
			width :				29% !important;
			left :				34.5% !important;
		}


}





/* ------------------------------------------------------------------------------------ MEDIA QUERIES : RATIO MOBILE ( 1 colonne / 680px ) */

@media only screen and ( max-width : 680px ) and ( max-aspect-ratio: 3/2 ) {


	html
		{
			font-size :				2.5vw;
		}

	body
		{
			--template :			"mobile";
			--lazy_target :			"body";

			--width :				100vw;
			--height :				calc( ( var(--width) / var(--ratio) ) );
			--header :				6vh;
		}
	
	#noise
		{
			background-size :			50vw;
		}

	#logo
		{
			--r :					calc( 100 / 18 );
			--h :					calc( var(--header) / 2 );
			--w :					calc( var(--h) * var(--r) );
		}

	#pages
		{
			height :				100vh;
		}

	.page
		{
			display :				block;
			height :				auto;
		}

	.page .fond.gradient,
	.page .fond.gradient div
		{
			background :			none !important;
		}

	.page .fond > div:nth-child(1),
	.page .fond > div:nth-child(2)
		{
			width :				100%;
			height : 				50%;
		}

	.page.full
		{
			height :				calc( var( --height ) * 2 );
			overflow :				hidden;
		}

	.page.full.chapitre
		{
			/*height :				100vh;*/
			height :				calc( var( --height ) * 2.5 );
		}

	.page.full .content
		{
			height :				inherit;
			padding :				var( --padding_content );
		}

	.page .content
		{
			height :				auto;
			overflow :				unset;
			padding :				0;
		}

	.page.full_image .fond_page
		{
			position :				absolute;
			width :				100%;
			height :				100%;
			left :				0vw;
			right :				0vw;
			top :					0vw;
			bottom :				0vw;
			object-fit :  			cover;
		}

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

	.content .gauche,
	.content .droite,
	.content.padding .gauche,
	.content.padding .droite
		{
			position :				relative;
			float :				none;
			display :				block;
			margin :				0;
			width :				calc( var( --width ) - var( --padding_left ) - var( --padding_right ) );
			height :				calc( ( ( var( --width ) - var( --padding_left ) - var( --padding_right ) ) / var( --ratio ) ) * 2 );
			/*height :				calc( var( --height ) * 2 );*/
		}

	.content .droite
		{
			right :				0;
			left :				var(--padding_left);
		}

	.content .gauche,
	.content.padding .gauche,
	.content.full
		{
			margin-bottom :			0; 
		}


	.page.chapitre .fond_page,
	.page.chapitre .fond_page.lazy
		{
			display :				none !important;
			display :				none;
		}

	.page.chapitre .img_chapitre,
	.page.chapitre .video_chapitre
		{
			top :					10% !important;
			width :				72% !important;
			left :				14% !important;
			right :				auto !important;
		}


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

	.badge_chapitre:not(.mobile_only)
		{
			width :				26% !important;
			left :				37% !important;
			top :					auto !important;
			bottom :				3% !important;
		}
	

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

	html .page_intro
		{
			height :				calc( var( --height ) * 2.3 ) !important;
		}

	html .page_intro .logo_kalenji
		{
			width :				80vw !important;
			left :				10vw !important;
			top :					5vw !important;
		}
	
	html .page_intro .fond_page
		{
			position :				absolute;
			width :				80vw;
			height :				80vw;
			left :				10vw;
			top :					16%;
			object-fit :  			cover;
		}

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

	html #page_14 .fond_page
		{
			object-position :			80%;
		}

	html #page_21 .fond_page
		{
			object-position :			74%;
		}

	html #page_41 .badge_chapitre
		{
			bottom :				10% !important;
		}

	html #page_41 ._at_credits
		{
			bottom :				22% !important;
		}

	html #page_42 img.logo_kalenji
		{
			width :				59.2% !important;
			left :				20.5% !important;
		}


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

	html .page .desktop
		{
			display :				none;
		}

	html .page .mobile_only
		{
			display :				block;
		}


}





/* ------------------------------------------------------------------------------------ MEDIA QUERIES : MOBILE LANDSCAPE (MARGES IOS) */

@media screen	and ( orientation: landscape ) 
			and ( min-device-width: 300px ) 
			and ( max-device-width: 900px )
			and ( min-device-pixel-ratio: 2) {

	body
		{
			--padding_left :			5vw;
			--padding_right :			5vw;
			--padding_left :			env(safe-area-inset-left);
			--padding_right :			env(safe-area-inset-right);
		}


}




/* ------------------------------------------------------------------------------------ MEDIA QUERIES : TABELETTES */


@media 	only screen and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) and (min-device-width: 1366px) and (max-device-width: 1366px),
		only screen and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) and (min-device-width: 1112px) and (max-device-width: 1112px)
{


	body
		{
			
			--template :			"tablets";
			--height :				100vh;
		}

}