/** --------------------------------------------------------------------------------------------------------------------------------------------
* Author		: @ptibat
* Dev start		: 08/02/2022
* Last modif	: 08/03/2022 10:09
* Description	: Gestion de mise en page par blocs
--------------------------------------------------------------------------------------------------------------------------------------------- */


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

html
	{
		overflow :				auto;
	}


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

body
	{
		--page_width :			1440px;
		--page_height :			770px;
		--page_ratio :			calc( 1440 / 770 );

		--viewport_header :		0rem;
		--viewport_width :		1400px;
		--viewport_padding :		0rem;
		--viewport_height :		100vh;
		--safe_bottom :			max( 0rem , env(safe-area-inset-bottom) );

		--blok_ratio :			calc( var(--page_height) / var(--page_width) );
		--blok_width :			calc( var(--viewport_width) - ( var(--viewport_padding) * 2 ) );
		--blok_height :			calc( var(--blok_width) * var(--blok_ratio) );

		--pages_blok_height : 		calc( 100vh );
		--pages_blok_width : 		calc( var(--pages_blok_height) * var(--page_ratio) );

		--min_height :			calc( var(--viewport_height) - var(--viewport_header) - var(--safe_bottom) );
		--min_height_ratio :		calc( ( 100vw / var(--blok_ratio) ) - var(--viewport_header) - var(--safe_bottom) );
		--part_margin :			calc( ( 100% -  var(--blok_width) - ( var(--viewport_padding) * 2 ) ) / 2 );
		--part_gap :			0rem;
		--part_width :			calc( ( var(--blok_width) - ( var(--part_gap) * 2 ) ) / 2 );

		--background_section :		#FFF;
	}






/* ------------------------------------------------------------------------------------ BLOKS */

.bloks
	{
		position :				relative;
		height :				100%;
		min-height :			var(--min_height);
	}

.bloks.full
	{
		--blok_height :			var(--min_height);
	}

.blok
	{
		position :				relative;
		margin-left :			auto;
		margin-right :			auto;
		min-height :			auto;
		text-align :			center;
	}

.blok.min,
.blok.min .content,
.blok.min [class*="parts"] > div
	{
		min-height :			var(--blok_height);
	}

.blok.full
	{
		height :				100%;
		min-height :			var(--min_height);
		overflow :				hidden;
	}


/* ------------------------------------------------------------------------------------ BLOKS PAGES */

.bloks.pages
	{
		--blok_height : 			var( --pages_blok_height );
		--blok_width : 			var( --pages_blok_width );
	}

.blok,
.blok.min,
.blok.full
	{
		height :				inherit;
	}



/* ------------------------------------------------------------------------------------ BLOKS : CONTENT */

.fond,
.content
	{
		margin-left :			auto;
		margin-right :			auto;
	}

.blok:not(.large):not(.background):not(.full) .fond,
.blok:not(.large) .content,
.blok.background .content
	{
		width :				var(--blok_width);
	}

.blok:not(.full):not(.min):not(.auto) .content
	{
		height :				var(--blok_height);
	}



.blok.full .content
	{
		height :				100%;
		min-height :			var(--min_height);
	}


.content
	{
		z-index :				10;
		position :				relative;
		margin :				0 auto;
		width :				100%;
		min-height :			0;
		text-align :			left;
	}

.content.auto_size
	{
		position :				absolute;
		left :				0;
		right :				0;
		top :					0;
		bottom :				0;
	}

.content.padding
	{
		padding :				1rem var(--padding_content);
	}


.floating_content
	{
		position :				absolute;
		display :				block;
		left :				0;
		right :				0;
		top :					50%;
		transform :				translateY( -50% );
		width :				var(--blok_width);
		margin-left :			auto;
		margin-right :			auto;
		line-height :			initial;
		text-align :			center;
	}

.floating_content.over
	{
		z-index :				1000;
	}
.floating_content.under
	{
		z-index :				-1;
	}



/* ------------------------------------------------------------------------------------ FONDS */

.fond
	{
		z-index :				-1;
		position :				absolute;
		left :				0;
		right :				0;
		top :					0;
		bottom :				0;
		clip :				rect(0, auto, auto, 0);
		background-repeat :		no-repeat;
		background-position :		center center;
		background-size :			cover;
		overflow :				hidden;
	}

.fond.gauche,
.fond.droite
	{
		width :				50vw;
	}

.fond.gauche
	{
		right :				auto;
	}

.fond.droite
	{
		left :				auto;
	}

.fond.repeat
	{
		background-repeat :		repeat;
	}

.fond.original
	{
		background-size :			auto;
	}

.fond.large
	{
		background-size :			100%;
	}

.fond.contain
	{
		background-size :			contain;
	}

.fond_section
	{
		background-color :		var( --background_section , #CECECE );
	}

.fond.top			{ background-position :		center top; }
.fond.bottom		{ background-position :		center bottom; }
.fond.left			{ background-position :		left center; }
.fond.right			{ background-position :		right center; }
.fond.top_right		{ background-position :		right top; }
.fond.top_left		{ background-position :		left top; }
.fond.bottom_right	{ background-position :		right bottom; }
.fond.bottom_left		{ background-position :		left bottom; }

.fond.fixe
	{
		background-attachment :		fixed;
		background-attachment :		fixed !important;
		pointer-events :			none;
	}

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

.fond.multiply
	{
		background-blend-mode :		multiply;
	}

.fond.hard
	{
		background-blend-mode :		hard-light;
	}

.fond.darken
	{
		background-blend-mode :		darken;
	}

.fond.blanc_transparent
	{
		background-color :		#FFF;
		mix-blend-mode :			color;
	}

.fond._parallax
	{
		background-size :			150% 150%;
		background-position :		50% 0;
		background-attachment :		fixed;
	}

.fond.video > video
	{
		z-index :				1;
		position :				absolute;
		left :				50%;
		top :					50%;
		min-width :				100%;
		min-height :			100%;
		width :				auto;
		height :				auto;
		transform :				translate(-50%, -50%);
		object-fit :			cover;
	}



/* ------------------------------------------------------------------------------------ CONTENT : PARTS */

[class*="parts"]
	{
		position :				relative;
		display :				grid;
		grid-gap :				0;
		grid-auto-flow :			dense;
  		grid-template-rows :		repeat( 1, 1fr );
  		grid-template-columns : 	repeat( 2 , 1fr );
  		height :				100%;
	}

[class*="parts"].spaced
	{
		grid-gap :				1vw;
	}

.parts3 		{ grid-template-columns : repeat( 3 , 1fr ); }
.parts4 		{ grid-template-columns : repeat( 4 , 1fr ); }
.parts5 		{ grid-template-columns : repeat( 5 , 1fr ); }
.parts6 		{ grid-template-columns : repeat( 6 , 1fr ); }

[class*="parts"] > div
	{
		z-index :				50;
		position :				relative;
		grid-column-end :			span 1;
		height :				inherit;
		/*overflow :				auto;*/
	}

[class*="parts"] .fond:not(.fit)
	{
		width :				100% !important;
	}

[class*="parts"] .fond.fit
	{
		--p_width :				calc( var(--part_width) - ( var(--part_gap) / 2 ) );
		width :				var(--p_width);
	}

[class*="parts"] > div:nth-child(1) .fond.fit
	{
		left :				auto;
		background-position :		center right;
	}

[class*="parts"] > div:nth-last-child(1) .fond.fit
	{
		right :				auto;
		background-position :		center left;
	}




/* ------------------------------------------------------------------------------------ CONTENT : 50/50 */

.content5050
	{
		--p_width :				calc( var(--part_width) - ( var(--part_gap) / 2 ) );

		display :				grid;
		grid-gap :				0;
		grid-template-columns :		repeat( 2 , 1fr );
		grid-auto-flow :			dense;
		justify-items :			stretch;
		width :				100%;
		height :				100%;
	}


.content5050 > div,
.content5050 > div > div:not(.fond)
	{
		position :				relative;
		height :				100%;
		min-height :			auto; /* var(--min_height) */
		overflow :				hidden;
	}

.blok.full .content5050
	{
		min-height :			var(--min_height);
	}

.content5050 > div
	{
		grid-column-end :			span 1;
		grid-row-end :			span 1;
		width :				100%;
	}

.content5050.spaced
	{
		--part_gap :			1rem;
	}

.content5050 > div:nth-child(1)
	{
		justify-self :			end;
	}

.content5050 > div:nth-child(2)
	{
		justify-self :			start;
	}


.content5050 > div > div.fond
	{
		z-index :				50;
		width :				100%;
	}

.content5050 > div > div:not(.fond)
	{
		z-index :				100;
		position :				relative;
		width :				var(--p_width);
	}

.content5050 > div:nth-child(1) > div:not(.fond)
	{
		float : 				right;
		right :				calc( var(--part_gap) / 2 );
	}
.content5050 > div:nth-child(2) > div:not(.fond)
	{
		float : 				left;
		left :				calc( var(--part_gap) / 2 );
	}








/* ------------------------------------------------------------------------------------ MEDIA QUERIES : 100% WIDE */

@media (max-width : 1440px ) {

	body
		{
			--viewport_width :		100vw;
			--viewport_padding :		5vw;
		}


}



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

@media ( max-aspect-ratio: 1440/770 ) and ( min-width : 577px ) {

	body
		{
			--viewport_padding :		0rem;
			--pages_blok_width : 		calc( 100vw - ( var(--viewport_padding) * 2 ) );
			--pages_blok_height : 		calc( var(--pages_blok_width) / var(--page_ratio) );

		}

}



/* ------------------------------------------------------------------------------------ MEDIA QUERIES : 576 / MOBILES - SMARTPHONES */

@media ( max-width : 576px ),
	 ( max-width : 1024px ) and ( max-aspect-ratio: 4/3 ) {

	body
		{
			--blok_ratio :			calc( ( var(--page_height) / var(--page_width) ) * 4 );
			--part_width :			100%;
			--pages_blok_width : 		calc( 100vw - ( var(--viewport_padding) * 2 ) );
			--pages_blok_height : 		calc( ( var(--blok_width) / var(--page_ratio) ) * 2 );
		}

	.bloks,
	.blok,
	.blok:not(.full):not(.auto):not(.min):not(.background) .content,
	.blok.background:not(.full):not(.auto):not(.min) .content
		{
			min-height :			auto;
			height :				auto;
		}

	.blok:not(.large):not(.full):not(.background)
		{
			padding-bottom :			var(--viewport_padding);
		}

	.blok.padding
		{
			padding :				2rem 0;
		}

	.blok.full,
	.full_height,
	.content5050 > div > div.full_height
		{
			min-height :			var(--min_height);
		}

	.full_height,
	.content5050 > div > div.full_height
		{
			--min_height :			var(--min_height_ratio);
		}


	body .fond.mobile
		{
			background-image : 		var(--bg_mobile) !important;
		}
	
	[class*="parts"].reverse
		{
			direction :				rtl; 
		}
	[class*="parts"].reverse > div
		{
			direction :				ltr;
		}

	.parts2		{ grid-template-columns : repeat( 1 , 1fr ); }
	.parts3 		{ grid-template-columns : repeat( 2 , 1fr ); }
	.parts4 		{ grid-template-columns : repeat( 2 , 1fr ); }


	.content5050
		{
			grid-template-columns :		repeat( 1 , 1fr );
		}

	.content5050 > div > div:not(.fond),
	.content5050 > div:nth-child(1) > div:not(.fond),
	.content5050 > div:nth-child(2) > div:not(.fond)
		{
			z-index :				100;
			float :				none;
			position :				relative;
			left :				0; /* var(--viewport_padding); */
			right :				0; /* var(--viewport_padding); */
			width :				var(--part_width);
		}

	.content5050.spaced > div > div:not(.fond),
	.content5050.spaced > div:nth-child(1) > div:not(.fond),
	.content5050.spaced > div:nth-child(2) > div:not(.fond)
		{
			padding-left :			var(--viewport_padding);
			padding-right :			var(--viewport_padding);
		}

	.fond.gauche,
	.fond.droite
		{
			width :				auto;
			height :				var( --blok_height );
			left :				0;
			right :				0;
		}

	.fond.gauche
		{
			bottom :				auto;
		}

	.fond.droite
		{
			top :					auto;
		}



}