/*-------------------------------------------------------------------------------------------------*/
/*                                                   css pour page item                            */
/*-------------------------------------------------------------------------------------------------*/
html, body {
	height: 100vh;
	width: 100%;
	margin: 0;
	padding: 0;
	background: linear-gradient(45deg, rgb(46, 48, 52), rgb(130, 130, 130), rgb(187, 185, 180));
	border: 0px solid transparent;
	color: rgb(240,240,240);
	font-family: Constantia;
	font-size: 1em; /* Ideal: 16px */
}
html {
	zoom: 1.0;
}
* {
	margin: 0;
	padding: 0;
	list-style: none;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

a:link {
	color: rgb(240,240,240);
	text-align: center;
	text-decoration: none;
}
a:visited {
	color: rgb(240,240,240);
	text-align: center;
}
ul {
	padding-left: 0;
}
li {
	padding-left: 0;
}

img, object, embed, canvas, video, audio, picture {
	max-width: 100%;
	height: auto;
	display: block;
}
.clear {
	clear: both;
}
/*-------------------------------------------------------------------------------------------------*/
/*                                                   Page			                               */
/*-------------------------------------------------------------------------------------------------*/
#content {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	display: grid;
	grid-template-areas:
		"header"
		"article"
		"footer";
	grid-template-rows: 6vh 92vh 2vh;
	/*background-color: #119955;*/
/*-------------------------------------------------------------------------------------------------*/
/*                                                  Entête			                               */
/*-------------------------------------------------------------------------------------------------*/
	header {
		grid-area: header;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		font-family: Constantia;
		font-style: Italic;
		font-size: clamp(0.1rem, 1.5vw + 0.4rem, 2.2rem);
		color: rgb(250,250,250);
		/*background-color: #442255;*/

		.touche_nav {
			font-style: normal;
			width: 5%;
		}

		.filler_header {
			width: 5%;
		}
	}
/*-------------------------------------------------------------------------------------------------*/
/*                                                  Corps			                               */
/*-------------------------------------------------------------------------------------------------*/
	article {
		height: 92vh;
		width: 80%;
		max-width: 1536px;
		margin: auto;
		grid-area: article;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: center;
		align-items: start;
		overflow: hidden;
		/*background-color: #662255;*/
	}
/*-------------------------------------------------------------------------------------------------*/
/*                                                 Pied				                               */
/*-------------------------------------------------------------------------------------------------*/
	footer {
		height: 2vh;
		grid-area: footer;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		overflow: hidden;
		/*background-color: #663311;*/
	}
}
/*-------------------------------------------------------------------------------------------------*/
/*                                           Gallery-specific Styles		                       */
/*-------------------------------------------------------------------------------------------------*/
#gallery-container {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	color: #808080;
	width: 100%;
	height: 92vh;
	font-size: clamp(0.8rem, 1.2vw, 1.8rem);
	position: relative;
	/*background-color: #224466;*/
}
/*-------------------------------------------------------------------------------------------------*/
/*                                  Planche gallerie  16 vignettes 300px x 200px    4x4            */
/*-------------------------------------------------------------------------------------------------*/
.planche {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	align-items: center;
	align-content: space-around;
	width: 80%;
	height: 92vh;
	overflow: hidden;
	color: #808080;
	/*background-color: #112233;*/
	/*---------------------------------------------------------------------------------------------*/
	/*                                          Vignette horizontale		300px x 200px          */
	/*---------------------------------------------------------------------------------------------*/
	.planche-vign {
		max-width: 600px;
		max-height: 400px;
		width: 23%;
		aspect-ratio: 3 / 2;
	}
	/*---------------------------------------------------------------------------------------------*/
	/*                                          Vignette verticale			150px x 200px          */
	/*---------------------------------------------------------------------------------------------*/
	.planche-vignv {
		max-width: 300px;
		max-height: 400px;
		width: 11%;
		aspect-ratio: 2 / 3;
	}
}
/*-------------------------------------------------------------------------------------------------*/
/*                                           Suite Gallery-specific Styles	                       */
/*-------------------------------------------------------------------------------------------------*/
figure {
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: space-around;
	overflow: hidden;
	margin: auto;
	/*background-color: #ff0000;*/
}

.items--big {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	align-content: center;
	position: absolute;
	width: 100%;
	pointer-events: none;
	overflow: hidden;
	/*background-color: #ff0000;*/
}
/*------------------------------------------------------------------------------------------------------------------------------------------------------*/
.item--big {
	position: absolute;
	width: 100%;
	opacity: 0;
	color: white;
	font-size: clamp(0.6rem, 1vw, 1.5rem);
	overflow: hidden;
	aspect-ratio: 3 / 2;
	/*background-color: #000000;*/
}

.item--bigv {
	position: absolute;
	width: 44%;
	opacity: 0;
	/*background-color: #808080;*/
	color: white;
	font-size: clamp(0.6rem, 1vw, 1.5rem);
}
.controls_left {
	text-align: center;
	font-size: clamp(0.6rem, 1vw, 2.5rem);
	opacity: 0;
	pointer-events: none;
	-webkit-transition: opacity .3s ease;
	transition: opacity .3s ease;
	position: absolute;
	bottom: 0;
	left: 32%;
}

.controls_right {
	text-align: center;
	font-size: clamp(0.6rem, 1vw, 2.5rem);
	opacity: 0;
	pointer-events: none;
	-webkit-transition: opacity .3s ease;
	transition: opacity .3s ease;
	position: absolute;
	left: 64%;
}

.controls_grid {
	text-align: center;
	font-size: clamp(0.6rem, 1vw, 2.5rem);
	opacity: 0;
	pointer-events: none;
	-webkit-transition: opacity .3s ease;
	transition: opacity .3s ease;
	position: absolute;
	left: 48%;
}

.control,
.grid,
.fs-toggle {
	width: .66em;
	height: .66em;
	text-align: center;
	line-height: .5em;
	cursor: pointer;
	display: inline-block;
}

/*.showControls,*/
.showControls_left,
.showControls_right,
.showControls_grid {
	opacity: 1;
	pointer-events: auto;
	-webkit-transition: opacity .6s 1s ease;
	transition: opacity .6s 1s ease
}

/*.hideControls,*/
.hideControls_left,
.hideControls_right,
.hideControls_grid {
	opacity: 0;
	pointer-events: none;
}

.icon-grid,
.icon-arrow-left,
.icon-arrow-right {
	display: inline-block;
	width: 20%;
	height: 10%;
	color: rgb(250,250,250);
	background-repeat: no-repeat;
}

.icon-grid {
	color: rgb(250,250,250);
}

.icon-arrow-left {
	color: rgb(250,250,250);
}

.icon-arrow-right {
	color: rgb(250,250,250);
}

.fs-toggle {
	display: none;
}
/* affichage image suite clic vignette */
.fadeInScaleUp {
	-webkit-animation: fadeInScaleUp .5s ease-out .6s forwards;
	animation: fadeInScaleUp .5s ease-out .6s forwards;
	z-index: 25
}
/* affichage image */
@keyframes fadeInScaleUp {
	from {
		opacity: 0;
		-webkit-transform: scale(1);
		transform: scale(1)
	}

	to {
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1)
	}
}

@-webkit-keyframes fadeInScaleUp {
	from {
		opacity: 0;
		-webkit-transform: scale(1);
		transform: scale(1)
	}

	to {
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1)
	}
}
/* ne pas supprimer code ci-dessous */
.scaleDownFadeOut {
	-webkit-animation: scaleDownFadeOut .4s ease-in forwards;
	animation: scaleDownFadeOut .4s ease-in forwards;
	pointer-events: none
}

@keyframes scaleDownFadeOut {
	0% {
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1)
	}

	99% {
		opacity: 0;
		-webkit-transform: scale(1);
		transform: scale(1)
	}

	100% {
		opacity: 0;
		-webkit-transform: scale(1);
		transform: scale(1)
	}
}

@-webkit-keyframes scaleDownFadeOut {
	0% {
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1)
	}

	99% {
		opacity: 0;
		-webkit-transform: scale(1);
		transform: scale(1)
	}

	100% {
		opacity: 0;
		-webkit-transform: scale(1);
		transform: scale(1)
	}
}

@keyframes scaleUpFadeIn {
	0% {
		opacity: 0;
		-webkit-transform: scale(1);
		transform: scale(1)
	}

	1% {
		opacity: 0;
		-webkit-transform: scale(1);
		transform: scale(1)
	}

	100% {
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1)
	}
}

@-webkit-keyframes scaleUpFadeIn {
	0% {
		-webkit-transform: scale(1);
		transform: scale(1)
	}

	1% {
		opacity: 0;
		-webkit-transform: scale(1);
		transform: scale(1)
	}

	100% {
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1)
	}
}