@font-face
{
font-family: 'Zoom';
src: url('Zoom.woff') format('woff');
font-weight: normal;
font-style: normal;
}

/* Miniatures */
.zoom
{
display: inline-block;
overflow: hidden;
cursor: zoom-in !important;
}
.zoom img
{
filter: opacity(0.9) saturate(90%);
transition: transform 0.3s, filter 0.3s;

}
.zoom:hover {}
@media (min-width: 1101px) {
	.zoom:hover img
	{
	transform: scale(1.1);
	filter: opacity(1) saturate(110%);
	}
}

/* Zoom */
#zoom
{
z-index: 10;
display: flex;
position: fixed;
overflow: hidden;
align-items: center;
justify-content: center;
width: 100vw;
height: 100vh;
left: 0;
top: -100vh;
background-color: rgba(0,0,0,0.9);
mask-image: url(Masque.svg);	-webkit-mask-image: url(Masque.svg);
mask-size: 150vmax;			-webkit-mask-size: 150vmax;
mask-repeat: no-repeat;			-webkit-mask-repeat: no-repeat;
mask-position: 0 300%;			-webkit-mask-position: 0 300%;
transition: top 0s 0.4s, transform 0.6s cubic-bezier(.5,1.82,.68,.9), mask-position 0.6s ease, -webkit-mask-position 0.6s ease;
}
#zoom.on
{
top: 0vh;
mask-position: 0 0%;			-webkit-mask-position: 0 0%;
transition: top 0s 0s, transform 0.6s cubic-bezier(.5,1.82,.68,.9), mask-position 0.6s ease, -webkit-mask-position 0.6s ease;
}
#zoom article
{
position: relative;
filter: brightness(0.25) blur(5px);
}
#zoom article.on
{
min-width: initial;
text-align: center;
filter: brightness(1) blur(0px);
}
#zoom article:first-of-type
{
cursor: url(Prec.png) 9 10, auto;
text-align: right;
}
#zoom article:last-of-type
{
cursor: url(Suiv.png) 9 10, auto;
text-align: left;
}
#zoom article img {}
#zoom article img:first-child {}
#zoom article img:last-child
{
position: absolute;
left: 0;
top: 0;
opacity: 0;
transition: opacity 0.5s;
}
#zoom article img:last-child.chargé {opacity: 1;}
@media (orientation: landscape) {
	#zoom article {min-width: 150vh;}
	#zoom article img {height: 100vh;}
}
@media (orientation: portrait) {
	#zoom article {min-width: 150vh;}
	#zoom article img {height: calc(100vw / 1.5);}
}

/* Chargement */
#zoom.charge:before
{
z-index: 5;
content: '';
display: block;
position: absolute;
height: 4px;
top: 0;
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 25%);
animation: charge 1s ease infinite;
box-shadow: 0 3px 10px black;
}
@keyframes charge {
	0%
	{
	width: 0px;
	left: 0;
	}
	50%
	{
	width: 100vw;
	left: 0;
	}
	100%
	{
	width: 0px;
	left: 100vw;
	}
}

/* Aide */
#zoom .aide
{
position: absolute;
color: white;
font-size: 2vmax;
font-weight: 600;
text-shadow: 0 0 10px black;
}
#zoom .aide:nth-of-type(1)
{
left: 1em;
top: 45vh;
animation: aide_gauche 0.5s alternate infinite;
}
@keyframes aide_gauche {to {transform: translateX(-0.5em)}}
#zoom .aide:nth-of-type(2)
{
right: 1em;
top: 45vh;
animation: aide_droite 0.5s alternate infinite;
}
@keyframes aide_droite {to {transform: translateX(0.5em)}}
#zoom .aide:nth-of-type(3)
{
left: 45vw;
top: 1em;
animation: aide_haut 0.5s alternate infinite;
}
@keyframes aide_haut {to {transform: translateY(-0.5em)}}
#zoom .aide:nth-of-type(4)
{
left: 45vw;
bottom: 1em;
animation: aide_bottom 0.5s alternate infinite;
}
@keyframes aide_bottom {to {transform: translateY(0.5em)}}