/* -------------------------------------------------------------------------- */
/* Lightbox des fiches projet (02/09/2026) — cf. js/lightbox.js               */
/* -------------------------------------------------------------------------- */
/* Tout est en CSS : aucune animation GSAP, pour que rien ne dépende du moteur
   détruit puis reconstruit à chaque navigation AJAX (SiteApp.teardown/boot). */

/* ── 1) Affordance sur les visuels cliquables ─────────────────────────────── */

.site-zoomable {
	position: relative; /* déjà le cas pour .wp-block-cover, explicite pour les figures */
}

/* Le curseur natif est masqué dès que js/cursor.js a pris la main
   (html.has-site-cursor * { cursor: none !important }) : la loupe n'a donc de
   sens que dans le fallback natif. Avec le curseur maison, l'affordance vient
   du passage rond → carré, obtenu en ajoutant `.site-zoomable` à la liste
   INTERACTIVE de js/cursor.js. */
html:not(.has-site-cursor) .site-zoomable,
html:not(.has-site-cursor) .site-zoomable img {
	cursor: zoom-in;
}

/* Pastille « agrandir » : c'est un VRAI <button> (cible clavier et lecteur
   d'écran), discret au repos, révélé au survol de la tuile. */
.site-zoom-btn {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 3; /* au-dessus du voile de couleur et du conteneur interne */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 0; /* langage graphique du site : angles vifs */
	background: rgba(255, 255, 255, 0.9);
	color: var(--wp--preset--color--contrast, #1a476b);
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

.site-zoomable:hover .site-zoom-btn,
.site-zoom-btn:focus-visible {
	opacity: 1;
	transform: none;
}

.site-zoom-btn:hover,
.site-zoom-btn:focus-visible {
	background: var(--wp--preset--color--accent-1, #e9630b);
	color: #fff;
}

.site-zoom-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1, #e9630b);
	outline-offset: 2px;
}

/* Sans survol (tactile) : la pastille reste visible, sinon rien n'indique que
   le visuel s'agrandit. */
@media (hover: none) {
	.site-zoom-btn {
		opacity: 0.85;
		transform: none;
	}
}

/* ── 2) Overlay ───────────────────────────────────────────────────────────── */

/* ÉCHELLE D'EMPILEMENT DU THÈME, à respecter :
     header .wp-block-template-part ....  9 999 999
     croix du menu .site-overlay-close .. 10 000 000
     panneau de transition .site-cover .. 10 000 001
     curseur maison .site-cursor ........ 10 000 002
   La lightbox se place à 10 000 000 : AU-DESSUS du header (sinon le logo fixe
   et le burger se peignent sur la photo), EN DESSOUS du panneau de transition
   (une navigation doit toujours tout recouvrir) et du curseur (qui doit rester
   visible dans la lightbox). La croix du menu est au même niveau, mais les deux
   états sont exclusifs : on ne peut pas ouvrir la lightbox menu ouvert. */
.site-lightbox {
	position: fixed;
	inset: 0;
	z-index: 10000000;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.2s ease;
	/* La molette/le pincement ne doivent rien scroller derrière l'overlay :
	   window.blockScroll() gèle déjà ScrollSmoother, ceci couvre le reste. */
	overscroll-behavior: contain;
	touch-action: none;
}

/* `hidden` doit gagner contre le display:flex ci-dessus. */
.site-lightbox[hidden] {
	display: none !important;
}

.site-lightbox.is-open {
	opacity: 1;
}

.site-lightbox__scrim {
	position: absolute;
	inset: 0;
	/* Le bleu très sombre du voile des bannières (#082733), pour rester dans la
	   palette plutôt qu'un noir neutre.
	   OPAQUE, et pas un noir à 90-95 % comme le veut l'usage : les fiches sont
	   sur fond blanc avec un logo et un menu clairs en position fixe. Même à 5 %
	   de transparence, ce blanc traversait le voile et laissait un fantôme
	   parfaitement lisible du header par-dessus la photo. */
	background: #082733;
	cursor: zoom-out;
}

html.has-site-cursor .site-lightbox__scrim {
	cursor: none;
}

.site-lightbox__figure {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	max-width: 92vw;
	max-height: 88vh;
	pointer-events: none; /* un clic à côté de l'image ferme (il atteint le voile) */
}

.site-lightbox__img {
	display: block;
	width: auto;
	height: auto;
	max-width: 92vw;
	max-height: 80vh;
	object-fit: contain;
	background: rgba(255, 255, 255, 0.04);
	opacity: 1;
	transition: opacity 0.2s ease;
	pointer-events: auto;
}

.site-lightbox.is-loading .site-lightbox__img {
	opacity: 0;
}

.site-lightbox__caption {
	max-width: 60ch;
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.85rem;
	line-height: 1.4;
	text-align: center;
}

.site-lightbox__caption[hidden] {
	display: none;
}

/* Boutons de l'overlay : mêmes règles pour la croix et les flèches. */
.site-lightbox__close,
.site-lightbox__nav {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #fff;
	transition: color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}

.site-lightbox__close:hover,
.site-lightbox__nav:hover,
.site-lightbox__close:focus-visible,
.site-lightbox__nav:focus-visible {
	color: var(--wp--preset--color--accent-1, #e9630b);
	background: rgba(255, 255, 255, 0.08);
}

.site-lightbox__close:focus-visible,
.site-lightbox__nav:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1, #e9630b);
	outline-offset: 2px;
}

.site-lightbox__close {
	top: max(12px, env(safe-area-inset-top));
	right: max(12px, env(safe-area-inset-right));
}

.site-lightbox__nav--prev {
	left: max(8px, env(safe-area-inset-left));
	top: 50%;
	transform: translateY(-50%);
}

.site-lightbox__nav--next {
	right: max(8px, env(safe-area-inset-right));
	top: 50%;
	transform: translateY(-50%);
}

.site-lightbox__nav[hidden],
.site-lightbox__counter[hidden] {
	display: none;
}

.site-lightbox__counter {
	position: absolute;
	z-index: 2;
	bottom: max(14px, env(safe-area-inset-bottom));
	left: 0;
	right: 0;
	margin: 0;
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.8rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.06em;
	text-align: center;
}

/* Étroit : les flèches passent en bas, de part et d'autre du compteur, pour ne
   plus recouvrir l'image. */
@media (max-width: 600px) {
	.site-lightbox__figure {
		max-height: 78vh;
	}

	.site-lightbox__img {
		max-height: 68vh;
	}

	.site-lightbox__nav--prev,
	.site-lightbox__nav--next {
		top: auto;
		bottom: max(6px, env(safe-area-inset-bottom));
		transform: none;
	}

	.site-lightbox__nav--prev {
		left: 50%;
		margin-left: -84px;
	}

	.site-lightbox__nav--next {
		right: 50%;
		margin-right: -84px;
	}
}

/* Filet pendant une navigation AJAX : le panneau .site-cover est au-dessus,
   mais on ne laisse aucune chance à un résidu d'overlay de traîner. */
html.is-navigating .site-lightbox {
	display: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.site-lightbox,
	.site-lightbox__img,
	.site-zoom-btn {
		transition: none !important;
	}

	.site-zoom-btn {
		transform: none;
	}
}