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

@font-face
	{
		font-family :			"Antique Olive";
		font-weight :			normal;
		font-display :			swap;
		src :					local( "Antique Olive Std Roman" ),
							url( "../fonts/Antique_Olive/AntiqueOliveStd-Roman.woff" ) format("woff"),
							url( "../fonts/Antique_Olive/AntiqueOliveStd-Roman.otf" ) format("opentype");
	}

@font-face
	{
		font-family :			"Antique Olive";
		font-weight :			300;
		font-display :			swap;
		src :					local( "Antique Olive Std Light" ),
							url( "../fonts/Antique_Olive/AntiqueOliveStd-Light.woff" ) format("woff"),
							url( "../fonts/Antique_Olive/AntiqueOliveStd-Light.otf" ) format("opentype");
	}

@font-face
	{
		font-family :			"Antique Olive";
		font-weight :			700;
		font-display :			swap;
		src :					local( "Antique Olive Std Bold" ),
							url( "../fonts/Antique_Olive/AntiqueOliveStd-Bold.woff" ) format("woff"),
							url( "../fonts/Antique_Olive/AntiqueOliveStd-Bold.otf" ) format("opentype");
	}

@font-face
	{
		font-family :			"Antique Olive";
		font-weight :			900;
		font-display :			swap;
		src :					local( "Antique Olive Std Black" ),
							url( "../fonts/Antique_Olive/AntiqueOliveStd-Black.woff" ) format("woff"),
							url( "../fonts/Antique_Olive/AntiqueOliveStd-Black.otf" ) format("opentype");
	}

@font-face
	{
		font-family :			"Antique Olive";
		font-weight :			950;
		font-display :			swap;
		src :					local( "Antique Olive Std Nord" ),
							url( "../fonts/Antique_Olive/AntiqueOliveStd-Nord.woff" ) format("woff"),
							url( "../fonts/Antique_Olive/AntiqueOliveStd-Nord.otf" ) format("opentype");
	}



/* ------------------------------------------------------------------------------------ ROOT + VARIABLES */

:root
	{
		--width :				1200px;
		--padding :				10px;
		--padding_content :		80px;
		--nav_height :			50px;
		--nav_padding :			10px;
		--border_radius :			0.8rem;

		--color_text :			#141414;
		--color_background :		#FFFFFF;

		--couleur_bleu :			#4922F4;
		--couleur_bleu_light :		#B5ADEA;
		--couleur_bleu_fonce :		#2716A3;
		--couleur_rouge :			#F00000;
		--couleur_fond :			#E9E8E5;
		--couleur_gold :			#CE9E5C;
		--couleur_grey :			#CECECE;
		--couleur_black :			#141414;

		font-variant-ligatures :	common-ligatures;
		scroll-behavior :			smooth;
		-webkit-overflow-scrolling :	touch;
		word-wrap :				reak-word;
		hyphens :				auto;
	}


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

html,
body
	{
		min-height :			100%;
	}



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

body
	{
		color :				var( --color_text );
		background-color :		var( --color_background );
	}


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

body,
input,
select,
textarea
	{
		font-family :			"Antique Olive", "Helvetica Neue", "Helvetica", Arial, sans-serif;
		font-size :				14px;
	}

h2
	{
		font-size :				1.5rem;
		font-weight : 			950;
	}


.f_light,
.f_regular
	{
		font-weight :			300;
	}
.f_bold
	{
		font-weight :			700;
	}
.f_black
	{
		font-weight :			900;
	}
.f_nord
	{
		font-weight :			950;
	}

.gros_texte
	{
		font-size : 			1.3rem;
	}

.grand_texte
	{
		font-size : 			1.7rem;
	}

.tres_grand_texte
	{
		font-size : 			2.5rem;
	}

.tres_tres_grand_texte
	{
		font-size : 			4rem;
	}

.underlined
	{
		border-bottom :			3px solid var( --couleur_bleu );
	}

.underline.colored
	{
		text-decoration-color : 	var( --couleur_bleu );
	}

.c_bleu
	{
		color :				var( --couleur_bleu );
	}

.c_rouge
	{
		color :				var( --couleur_rouge );
	}

.bg_black
	{
		background-color :		var( --couleur_black );
	}


.titre
	{
		font-size : 			1.4rem;
		font-weight :			700;
		color :				var( --couleur_bleu );
	}

.fade
	{
		opacity :				0.5;
	}

sup
	{
		top :					0.3rem;
	}

.bg_big_text
	{
		position :				absolute;
		margin-top :			-3%;
		left :				10%;
		right :				10%;
		opacity :				0.1;
		font-size : 			5vw;
		font-weight : 			900;
	}

.padding_texte
	{
		padding-left :			8vw;
		padding-right :			8vw;
	}

.texte_tab
	{
		text-align :			left;
		padding-left :			5rem;
	}


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

.anchor
	{
		display :				block;
		position :				relative;
		top :					-120px;
		visibility :			hidden;
	}



/* ------------------------------------------------------------------------------------ NUMBERS */

.numbers
	{
		display :				inline;
	}

.numbers > span
	{
		display :				inline;
		padding :				0.4rem 0.2rem 0 0.2rem;
		border :				3px solid var( --color_text );
		text-align :			center;
	}

.numbers.colored > span
	{
		border-color :			var( --couleur_bleu );
	}

.numbers > span:nth-child( n + 2 )
	{
		border-left :			none;
	}



/* ------------------------------------------------------------------------------------ GRILLES */

.grille_5
	{
		display :				grid;
		grid-gap :				20px;
		grid-template-columns :		repeat( 5 , minmax(0, 1fr) );
		grid-template-columns :		repeat( 5 , 1fr );
		grid-auto-flow :			dense;
	}

.grille_5 > div
	{
		position :				relative;
		margin-bottom :			1rem;
		grid-column-end :			span 1;
		grid-row-end :			span 1;
		/*overflow :				hidden;*/
	}






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

#container
	{
		position :				relative;
		width :				100vw;
		text-align :			center;
	}

#container > header
	{
		background-color :		var( --couleur_fond );
		padding-bottom :			2rem;
	}

#main
	{
		position :				relative;
	}

.content
	{
		position :				relative;
		margin :				0 auto;
		width :				var( --width );
	}

.content.large
	{
		width :				100%
	}

.content.padding
	{
		padding-left :			3.5vw;
		padding-right :			3.5vw;
	}

.content.black
	{
		color :				#FFFFFF;
		background-color :		var( --couleur_black );
	}




/* ------------------------------------------------------------------------------------ ELEMENTS */

.black_block
	{
		padding :				5vw;
		text-align :			center;
		color :				#FFFFFF;
		background-color :		var( --couleur_black );
	}

.bttn,
a.bttn
	{
		display :				inline-block;
		padding :				1rem 2rem;
		color :				#FFFFFF;
		font-size :				1.4rem;
		background-color :		var( --couleur_bleu );
		border-radius :			var( --border_radius );
		text-decoration :			none;
	}

.bttn:hover,
a.bttn:hover
	{
		text-decoration :			none;
		background-color :		var( --couleur_gold );
	}


/* ------------------------------------------------------------------------------------ HEADER : NAV */

#container > header
	{
		padding-top :			calc( var( --nav_height ) + 2rem );
	}

#container > header > nav
	{
		position :				fixed;
		z-index :				1000;
		top :					0;
		left :				0;
		right :				0;
		height :				var( --nav_height );
		background-color :		var( --color_background );
		box-shadow :			0px 0px 10px 0px rgba(0,0,0,0.5);
	}


#container > header > nav ul
	{
		display :				inline-block;
		margin :				0;
		padding :				0;
		height :				var( --nav_height );
		line-height :			var( --nav_height );
		list-style :			none;
	}

#container > header > nav ul > li
	{
		display :				inline-block;
		position :				relative;
		margin :				0 0 0 30px;
	}

#container > header > nav ul > li:first-child
	{
		margin-left :			0;
	}

#container > header > nav ul > li,
#container > header > nav ul > li a
	{
		font-weight :			700;
		font-size : 			1.1rem;
		color :				#000000;
		text-decoration :			none;
	}

#container > header > nav ul > li:hover,
#container > header > nav ul > li.current,
#container > header > nav ul > li > a:hover,
#container > header > nav ul > li.current > a
	{
		color :				var( --couleur_rouge );
		text-decoration :			none;
		cursor :				pointer;
	}


#container > header > nav ul:hover > li.current:after
	{
		display :				none;
	}

#container > header > nav ul > li:not(.no_hover):hover:after,
#container > header > nav ul > li:not(.no_hover).current:after
	{
		content : 				"";
		display :				block;
		position :				absolute;
		left :				50%;
		margin-left :			-0.5rem;
		margin-top :			-0.5rem;
		width :				1rem;
		height :				1rem;
		border-radius :			50%;
		background-color :		var( --couleur_rouge );
		mix-blend-mode :			multiply;
	}



/* ------------------------------------------------------------------------------------ HEADER : LOGO */

#container > header #logo
	{
		position :				absolute;
		z-index :				500;
		left :				0;
		top :					0;
		--l_width :				100px;
	}

#container > header #logo_part_1,
#container > header #logo_part_2
	{
		float :				left;
		position :				relative;
		text-decoration :			none;
		cursor :				pointer;
	}

#container > header #logo_part_1
	{
		width :				var( --l_width );
		height :				var( --l_width );
		padding :				4% 6% 0 6%;
		border-bottom-left-radius :	50%;
		border-bottom-right-radius :	50%;
		background-color :		var( --color_background );
		box-shadow :			0px 0px 10px 0px rgba(0,0,0,0.5);
	}

#container > header #logo_part_2
	{
		left :				20px;
		top :					calc( var(--nav_height) - ( var(--nav_height) - 5px ) );
		height :				calc( var(--nav_height) - 5px );
	}

#container > header #logo_part_2 img
	{
		height :				calc( var(--nav_height) - 10px );
	}



.logo
	{
		display :				inline-block;
		position :				relative;
		width :				100px;
		height :				100px;
		padding :				1rem;
		border-bottom-left-radius :	50%;
		border-bottom-right-radius :	50%;
		background-color :		var( --color_background );
		box-shadow :			0px 0px 10px 0px rgba(0,0,0,0.5);
	}



/* ------------------------------------------------------------------------------------ MAIN */

#main > .content
	{
		text-align :			left;
	}



/* ------------------------------------------------------------------------------------ CONTENU : TIMELINE */

.timeline
	{
		--bullet_size :			1rem;
		--border_width :			2px;
	}


.timeline_step
	{
		--couleur_step :			var( --couleur_rouge );
	}
.timeline_step.grey
	{
		--couleur_step :			var( --couleur_grey );
	}
.timeline_step.black
	{
		--couleur_step :			#3C3C3C;
	}


.timeline_step_title
	{
		margin :				1rem 0;
		padding-left :			calc( var( --bullet_size ) + ( var( --bullet_size ) / 2 ) + ( var( --border_width ) / 2 ) );
		color	:				var( --couleur_step );
	}

.timeline_step_title:before
	{
		content : 				"";
		display :				block;
		position :				absolute;
		margin-left :			-2rem;
		margin-top :			0.3rem;
		width :				var( --bullet_size );
		height :				var( --bullet_size );
		border-radius :			50%;
		background-color :		var( --couleur_step );
	}

.timeline_step_title h2
	{
		margin :				0;
	}


.timeline_step_title p
	{
		background-color :			cyan;
		float :				right;
	}


.timeline_step_data
	{
		border-left :			var( --border_width ) solid #DCDCDC;
		padding :				1rem 2rem;
	}


.fiche_famille
	{
		padding :				1rem;
		text-align :			center;
	}

.fiche_famille > div:nth-of-type( 1 )
	{
		margin :				0.5rem 0 0.2rem 0;
		font-size : 			1.2rem;
		font-weight : 			900;
	}

.fiche_famille > div:nth-of-type( 2 )
	{
		opacity :				0.5;
	}





#fiches_pictomatos > div
	{
		overflow :				visible;
		margin-bottom :			1rem;
	}

.fiche_pictomato
	{
		--border_size :			2px;
		--tag_height :			1.2rem;

		padding :				1rem;
		text-align :			center;
		border :				2px solid var( --color_background );
		border-radius :			var( --border_radius );
		transition :			all 400ms ease;
	}

.fiche_pictomato:hover
	{
		box-shadow :			0px 0 0.4rem 0px rgba(0,0,0,0.4);
	}

.fiche_pictomato_thumb
	{
		margin-bottom :			0.8rem;
	}

.fiche_pictomato_name
	{
		font-size :				1.2rem;
		font-weight : 			900;
	}

.fiche_pictomato_infos
	{
		font-size :				0.8rem;
	}

.fiche_pictomato_date
	{
		font-size :				0.8rem;
		opacity :				0.5;
	}

.fiche_pictomato_tag
	{
		display :				block;
		opacity :				0;
		position :				absolute;
		z-index :				100;
		bottom :				calc( var( --tag_height ) - ( 2 * var( --tag_height ) ) -  var( --border_size ) );
		left :				0;
		right :				0;
		height :				calc( var( --tag_height ) + var( --border_size ) );
		text-align :			center;
		font-size :				0;
		transition :			all 400ms ease;
	}

.fiche_pictomato_tag > div
	{
		display : 				inline-block;
		margin :				0;
		padding :				0.1rem 0.8rem;
		height :				calc( var( --tag_height ) + var( --border_size ) );
		line-height :			var( --tag_height );
		color :				var( --couleur_bleu );
		font-weight : 			700;
		font-size :				0.6rem;
		text-transform :			uppercase;

		background-color :		var( --color_background );
		border-left :			2px solid var( --couleur_grey );
		border-right :			2px solid var( --couleur_grey );
		border-bottom :			2px solid var( --couleur_grey );
		border-bottom-left-radius :	var( --border_radius );
		border-bottom-right-radius :	var( --border_radius );
		box-shadow :			0px 0.2rem 0.2rem 0px rgba(0,0,0,0.1); 
	}



.fiche_pictomato.coming_soon
	{
		color :				var( --couleur_grey );
	}

.fiche_pictomato.coming_soon:hover,
.fiche_pictomato.coming_soon .fiche_pictomato_tag > div
	{
		border-color :			var( --couleur_grey );
	}

.fiche_pictomato.for_sale:hover,
.fiche_pictomato.for_sale .fiche_pictomato_tag > div
	{
		border-color :			var( --couleur_bleu_light );
	}

.fiche_pictomato.coming_soon img,
.fiche_pictomato.gold img
	{
		filter :				grayscale(100%) brightness(70%) saturate(0%) contrast(1000%) opacity(15%);
		mix-blend-mode :			multiply;
	}


.fiche_pictomato.coming_soon:hover .fiche_pictomato_tag,
.fiche_pictomato.for_sale:hover .fiche_pictomato_tag,
.fiche_pictomato.sold .fiche_pictomato_tag
	{
		opacity :				1;
	}


.fiche_pictomato.gold
	{
		color :				#FFFFFF;
		background-color :		var( --couleur_gold );
		border-color :			var( --couleur_gold );
	}

.fiche_pictomato.sold,
.fiche_pictomato.sold .fiche_pictomato_tag > div
	{
		border-color :			var( --couleur_bleu );
	}


.fiche_pictomato.sold .fiche_pictomato_tag > div
	{
		color :				#FFF;
		background-color :		var( --couleur_bleu );
	}


/* ------------------------------------------------------------------------------------ THUMB */

#thumb_teaser
	{
		max-width :				200px;
		margin-top :			1rem;
	}

#thumb_teaser:hover
	{
		box-shadow :			0 1em 1em -1em rgba(0,0,0,0.7);
		filter :				brightness(110%) contrast(110%);
		cursor :				pointer;
	}

#teaser
	{
		padding :				2rem;
	}



/* ------------------------------------------------------------------------------------ OWL CAROUSEL / DIAPORAMA */

.diaporama
	{
		margin :				0 5%;
	}

body .owl-carousel .owl-nav button.owl-prev,
body .owl-carousel .owl-nav button.owl-next 
	{
		position :				absolute;
		width :				40px;
		height :				90px;
		top :					50%;
		transform :				translateY(-50%);
		display :				block !important;
		border :				none;
		font-size : 			4rem;
		font-weight : 			300;
		color :				var( --couleur_bleu );
		background :			initial;
		background-color :		transparent;
		background-image :		url( "arrow.svg ");
		background-repeat :		no-repeat;
		opacity :				0.6;
	}

body .owl-carousel .owl-nav button.owl-prev
	{
		left :				-35px;
		transform :				translateY(-50%) rotate( -180deg );
	}

body .owl-carousel .owl-nav button.owl-next
	{
		right :				-45px;
	}

body .owl-carousel .owl-nav button.owl-prev:hover,
body .owl-carousel .owl-nav button.owl-next:hover
	{
		background-color :		transparent;
		background-image :		url( "arrow.svg ");
		background-repeat :		no-repeat;
		opacity :				1;
	}


.owl-theme .owl-dots .owl-dot span
	{
		background :			var( --couleur_bleu );
		opacity :				0.6;
	}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span
	{
		background :			var( --couleur_bleu );
		opacity :				1;
	}







/* ------------------------------------------------------------------------------------ PICTOMATOS */

@keyframes rotating {

	from
	  {
		transform :				rotate(0deg);
	  }
	to
	  {
		transform :				rotate(360deg);
	  }

}


.plus
	{
		display :				inline-block;
		width :				4rem;
		height :				4rem;
		border :				none;
		background-image :		url( "plus.svg ");
		background-repeat :		no-repeat;
		background-position :		center center;
	}

.plus.anim
	{
		animation :				rotating 700ms linear infinite;
	}



.plus:hover
	{
		cursor :				pointer;
		background-image :		url( "plus_bleu.svg ");
	}





#pictomatos_img_01
	{
		z-index :				100;
		position :				absolute;
		left :				0;
		right :				0;
		bottom :				0rem;
	}

#pictomatos_img_02
	{
		z-index :				101;
		position :				absolute;
		left :				0;
		right :				0;
		margin-top :			0;
		height :				calc( var( --width ) / 8 );
	}









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

@media only screen and (min-width : 1200px) {

	body .owl-carousel .owl-nav button.owl-prev
		{
			left :				-60px;
		}

	body .owl-carousel .owl-nav button.owl-next
		{
			right :				-60px;
		}

}



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

@media only screen and (max-width : 1200px) {

	:root
		{
			--width :				100vw;
		}

	.diaporama
		{
			margin :				0;
		}


}




/* ------------------------------------------------------------------------------------ MEDIA QUERIES : 960 */

@media only screen and (max-width : 960px) {

	#container > header > nav > .content
		{
			padding-right :			2rem;
			text-align :			right;
		}
	
	.grille_5
		{
			grid-template-columns :		repeat( 4 , 1fr );
		}
}





/* ------------------------------------------------------------------------------------ MEDIA QUERIES : 680 */

@media only screen and (max-width : 680px) {

	#container > header > nav
		{
			height :				120px;
		}

	#container > header > nav ul
		{
			margin-top :			4.3rem;
		}

	#container > header #logo_part_2
		{
			left :				20px;
			top :					0.5rem;
			height :				2.5rem;
		}

	#container > header #logo_part_2 img
		{
			height :				inherit;
		}

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




/* ------------------------------------------------------------------------------------ MEDIA QUERIES : 480 */

@media only screen and (max-width : 480px) {
	
	.grille_5
		{
			grid-template-columns :		repeat( 2 , 1fr );
		}

}