/**
 * WebRessources — styles front-end (galerie + lightbox).
 * Par Tamara.
 */

/* ---------- Base commune ---------- */
.wr-gallery {
	margin: 1.5em 0;
	--wr-cols: 3;
	--wr-gap: 10px;
}

/* Fond appliqué : on ajoute un peu de respiration. */
.wr-gallery.wr-has-bg {
	padding: var(--wr-gap, 10px);
	border-radius: 10px;
}

/* ---------- Disposition : grille ---------- */
.wr-layout-grid {
	display: grid;
	gap: var(--wr-gap, 10px);
	grid-template-columns: repeat(var(--wr-cols, 3), 1fr);
	align-items: start;
}

/* ---------- Disposition : pile (stack) ---------- */
.wr-layout-stack {
	display: flex;
	flex-direction: column;
	gap: var(--wr-gap, 10px);
}

/* ---------- Disposition : maçonnerie (masonry) ---------- */
.wr-layout-masonry {
	column-count: var(--wr-cols, 3);
	column-gap: var(--wr-gap, 10px);
}

.wr-layout-masonry .wr-item {
	width: 100%;
	margin-bottom: var(--wr-gap, 10px);
	break-inside: avoid;
}

/* ---------- Disposition : diaporama (slide) ---------- */
.wr-layout-slide {
	position: relative;
}

.wr-slide-track {
	display: flex;
	gap: var(--wr-gap, 10px);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.wr-slide-track .wr-item {
	flex: 0 0 calc((100% - (var(--wr-cols) - 1) * var(--wr-gap)) / var(--wr-cols));
	scroll-snap-align: start;
}

.wr-slide-prev,
.wr-slide-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 42px;
	height: 42px;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease;
}

.wr-slide-prev:hover,
.wr-slide-next:hover { background: rgba(0, 0, 0, 0.8); }
.wr-slide-prev { left: 8px; }
.wr-slide-next { right: 8px; }

/* ---------- Disposition : vitrine (image + bande dessous) ---------- */
.wr-layout-showcase {
	display: flex;
	flex-direction: column;
	gap: var(--wr-gap, 10px);
}

.wr-showcase-main {
	position: relative;
	display: flex;
	align-items: center;
}

.wr-showcase-frame {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	line-height: 0;
	background: var(--wr-item-bg, #f1f1f1);
}

.wr-gallery.wr-rounded .wr-showcase-frame { border-radius: 8px; }

.wr-showcase-img {
	display: block;
	width: 100%;
	max-height: 70vh;
	object-fit: contain;
}

.wr-showcase-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	margin: 0;
	padding: 16px 14px 12px;
	color: #fff;
	font-size: 0.9rem;
	line-height: 1.4;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
	opacity: 1;
}

.wr-showcase-caption:empty { display: none; }

.wr-showcase-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 42px;
	height: 42px;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease;
}

.wr-showcase-arrow:hover { background: rgba(0, 0, 0, 0.8); }
.wr-showcase-prev { left: 8px; }
.wr-showcase-next { right: 8px; }

/* Bande de miniatures défilante sous l'image */
.wr-showcase-strip {
	display: flex;
	gap: var(--wr-gap, 10px);
	overflow-x: auto;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	padding-bottom: 2px;
}

.wr-strip-item {
	position: relative;
	flex: 0 0 90px;
	height: 70px;
	padding: 0;
	border: none;
	border-radius: 4px;
	overflow: hidden;
	cursor: pointer;
	background: var(--wr-item-bg, #f1f1f1);
	opacity: 0.55;
	outline: 2px solid transparent;
	outline-offset: -2px;
	transition: opacity 0.15s ease, outline-color 0.15s ease;
}

.wr-strip-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.wr-strip-item:hover { opacity: 1; }

.wr-strip-item.is-active {
	opacity: 1;
	outline-color: var(--wr-item-color, #2271b1);
}

.wr-gallery.wr-rounded .wr-strip-item { border-radius: 6px; }

@media (max-width: 540px) {
	.wr-strip-item { flex-basis: 70px; height: 54px; }
}

/* ---------- Responsive (toutes dispositions) ---------- */
@media (max-width: 782px) {
	.wr-layout-grid,
	.wr-layout-masonry { --wr-cols: 3; }
}
@media (max-width: 540px) {
	.wr-layout-grid,
	.wr-layout-masonry { --wr-cols: 2; }
}

/* ---------- Éléments de la grille ---------- */
.wr-item {
	position: relative;
	display: block;
	margin: 0;
	overflow: hidden;
	line-height: 0;
	background: var(--wr-item-bg, #f1f1f1);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wr-gallery.wr-rounded .wr-item {
	border-radius: 8px;
}

/* ---------- Couleur propre à une image ---------- */
/* La couleur s'affiche en accent au bas de l'image (rien au-dessus). */
.wr-item-colored::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 5px;
	background: var(--wr-item-color, transparent);
	z-index: 1;
	pointer-events: none;
	transition: height 0.2s ease;
}

/* L'accent s'épaissit légèrement au survol. */
.wr-item-colored:hover::after,
.wr-item-colored:focus-visible::after {
	height: 8px;
}

a.wr-item {
	cursor: zoom-in;
}

a.wr-item:focus-visible {
	outline: 2px solid var(--wr-item-color, #2271b1);
	outline-offset: 2px;
}

.wr-thumb {
	display: block;
	width: 100%;
	height: auto;
	transform: rotate(calc(var(--wr-rot, 0deg) + var(--wr-tilt, 0deg))) scale(var(--wr-zoom, 1));
	transition: transform 0.35s ease, filter 0.35s ease;
}

/* ---------- Effets au survol des miniatures ---------- */
/* none : aucun effet. */

/* Zoom de l'image (le cadre masque le débordement). */
.wr-hover-zoom .wr-item:hover .wr-thumb,
.wr-hover-zoom .wr-item:focus-visible .wr-thumb {
	--wr-zoom: 1.08;
}

/* Soulèvement de la vignette. */
.wr-hover-lift .wr-item {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.wr-hover-lift .wr-item:hover,
.wr-hover-lift .wr-item:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
}

/* Noir & blanc qui révèle la couleur au survol. */
.wr-hover-grayscale .wr-thumb {
	filter: grayscale(100%);
}
.wr-hover-grayscale .wr-item:hover .wr-thumb,
.wr-hover-grayscale .wr-item:focus-visible .wr-thumb {
	filter: grayscale(0%);
}

/* Assombrissement. */
.wr-hover-darken .wr-item:hover .wr-thumb,
.wr-hover-darken .wr-item:focus-visible .wr-thumb {
	filter: brightness(0.7);
}

/* Éclaircissement. */
.wr-hover-brighten .wr-item:hover .wr-thumb,
.wr-hover-brighten .wr-item:focus-visible .wr-thumb {
	filter: brightness(1.18);
}

/* Légère rotation + zoom. */
.wr-hover-rotate .wr-item:hover .wr-thumb,
.wr-hover-rotate .wr-item:focus-visible .wr-thumb {
	--wr-zoom: 1.06;
	--wr-tilt: -2deg;
}

/* Miniatures recadrées en carré (grille et diaporama uniquement). */
.wr-layout-grid.wr-crop .wr-thumb,
.wr-layout-slide.wr-crop .wr-thumb {
	aspect-ratio: 1 / 1;
	height: 100%;
	object-fit: cover;
}

/* ---------- Rotation par image ---------- */
/* La rotation tourne réellement l'image (composée avec le survol). */
.wr-rot-90  { --wr-rot: 90deg; }
.wr-rot-180 { --wr-rot: 180deg; }
.wr-rot-270 { --wr-rot: 270deg; }

/* Pour 90°/270°, on cadre en carré pour que l'image remplisse
   le cadre une fois tournée. */
.wr-rot-90 .wr-thumb,
.wr-rot-270 .wr-thumb {
	aspect-ratio: 1 / 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------- Légendes ---------- */
.wr-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	margin: 0;
	padding: 14px 10px 8px;
	font-size: 0.82rem;
	line-height: 1.35;
	color: #fff;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
	opacity: 0;
	transition: opacity 0.2s ease;
}

.wr-item:hover .wr-caption,
.wr-item:focus-visible .wr-caption {
	opacity: 1;
}

figure.wr-item .wr-caption {
	position: static;
	background: none;
	color: inherit;
	opacity: 1;
	padding: 6px 2px 0;
	line-height: 1.4;
}

/* ---------- Lightbox ---------- */
.wr-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(10, 10, 12, 0.94);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}

.wr-lightbox.is-open {
	opacity: 1;
	visibility: visible;
}

.wr-lightbox-stage {
	position: relative;
	max-width: 92vw;
	max-height: 86vh;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.wr-lightbox-img {
	max-width: 92vw;
	max-height: 80vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 4px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
	user-select: none;
	transition: transform 0.2s ease;
}

/* Image tournée à 90°/270° : on échange les contraintes pour qu'elle tienne. */
.wr-lightbox-img.wr-lb-rot {
	max-width: 80vh;
	max-height: 92vw;
}

.wr-lightbox-caption {
	margin-top: 12px;
	max-width: 80vw;
	color: #e8e8e8;
	font-size: 0.9rem;
	text-align: center;
}

.wr-lightbox-counter {
	position: absolute;
	top: -34px;
	left: 0;
	color: #b9b9b9;
	font-size: 0.82rem;
	letter-spacing: 0.04em;
}

/* Boutons de la lightbox */
.wr-lightbox button {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease;
}

.wr-lightbox button:hover,
.wr-lightbox button:focus-visible {
	background: rgba(255, 255, 255, 0.28);
	outline: none;
}

.wr-lightbox button:active {
	transform: scale(0.92);
}

.wr-lightbox-close {
	top: 16px;
	right: 16px;
}

.wr-lightbox-prev {
	top: 50%;
	left: 16px;
	transform: translateY(-50%);
}

.wr-lightbox-next {
	top: 50%;
	right: 16px;
	transform: translateY(-50%);
}

.wr-lightbox-prev:active,
.wr-lightbox-next:active {
	transform: translateY(-50%) scale(0.92);
}

/* Masque les flèches s'il n'y a qu'une seule image. */
.wr-lightbox.is-single .wr-lightbox-prev,
.wr-lightbox.is-single .wr-lightbox-next {
	display: none;
}

@media (max-width: 540px) {
	.wr-lightbox button { width: 42px; height: 42px; font-size: 22px; }
	.wr-lightbox-prev { left: 8px; }
	.wr-lightbox-next { right: 8px; }
}

/* Empêche le défilement de la page quand la lightbox est ouverte. */
body.wr-lightbox-open {
	overflow: hidden;
}