/* Galeries des réalisations (partials/galleries.html) : fenêtre noire plein écran, titre et carrousel
   de photos. Apparition en fondu de 1,2 s, disparition en fondu inverse avant fermeture. */
.gallery {
	position: fixed;
	inset: 0;
	z-index: 9999; /* sous les boutons de contact flottants, placés après dans la page */
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgba(0, 0, 0, .8);
	color: var(--white);
}
.gallery::backdrop { background: transparent; }
.gallery__box {
	position: absolute;
	inset: 0;
	overflow: auto;
	background: var(--black);
	box-shadow: 2px 8px 23px 3px rgba(0, 0, 0, .2);
}
.gallery__box:focus { outline: 0; } /* reçoit le focus à l'ouverture ; Tab mène ensuite au bouton Fermer */
.gallery[open] .gallery__box { animation: fadeIn 1.2s both; }
.gallery.is-closing .gallery__box { animation: gallery-fade 1.2s reverse both; }
@keyframes gallery-fade { from { opacity: 0; } to { opacity: 1; } }

.gallery__close {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 2;
	display: flex;
	padding: 0;
	border: 0;
	background: none;
	color: var(--white);
	font-size: 32px;
	cursor: pointer;
}
.gallery__close svg { width: 1em; height: 1em; fill: currentColor; }

.gallery__body { padding: 0 10px; }
.gallery__content { display: flex; flex-direction: column; gap: var(--gap); padding-block: 10px; }
.gallery__title { font-size: 60px; line-height: 1; text-align: center; }
.gallery__slider { position: relative; height: 500px; }
.gallery__slider .swiper { height: 100%; }
.gallery__slider--outside .swiper { margin-inline: 30px; }
.gallery__photo { height: 100%; background: var(--black) center / contain no-repeat; } /* image : style en ligne */
.gallery__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: inline-flex;
	padding: 0;
	border: 0;
	background: none;
	color: var(--white);
	font-size: 25px;
	translate: 0 -50%;
	cursor: pointer;
}
.gallery__arrow--prev { left: 10px; }
.gallery__arrow--next { right: 10px; }
.gallery__slider--outside .gallery__arrow--prev { left: 0; }
.gallery__slider--outside .gallery__arrow--next { right: 0; }
.gallery__arrow svg { width: 1em; height: 1em; fill: currentColor; }

@media (max-width: 767px) {
	.gallery__body { margin-top: 50px; }
	.gallery__title { font-size: 45px; }
	.gallery__slider { height: 350px; }
}
@media (prefers-reduced-motion: reduce) {
	.gallery .gallery__box { animation-duration: 1ms !important; }
}