/* =========================================================================
   Lightbox — surcouche Imaginray
   =========================================================================
   Chargé APRÈS global/css/lightbox.css (qui est le fichier d'origine de
   lightbox2, laissé intact pour rester à jour en cas de mise à jour du
   script). global.css est chargé trop tôt dans header.php pour pouvoir
   servir de surcouche : d'où ce fichier dédié.

   Ce que ça change :
   - suppression du cadre blanc de 4 px et des arrondis (un studio d'images
     ne met pas de passe-partout autour de ses rendus) ;
   - voile plus dense, pour que l'image ressorte ;
   - fermeture déplacée en haut à droite de la fenêtre, au lieu d'être sous
     l'image, où on ne la cherche pas ;
   - bouton de zoom (le pane plein écran est monté par lightbox-zoom.js).
   ========================================================================= */

/* --- Le cadre blanc --------------------------------------------------- */
.lightbox .lb-image {
	border: 0;
	border-radius: 0;
}
.lb-outerContainer {
	background-color: transparent;
	border-radius: 0;
}
.lb-dataContainer {
	background: transparent;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

/* --- Voile --------------------------------------------------------------
   0.92 au lieu de 0.8 : sur un rendu d'architecture, un fond trop clair
   fait remonter le décor de la page et fausse la lecture des valeurs.

   fixed + inset:0 au lieu du positionnement absolu d'origine : lightbox2
   dimensionne le voile à la hauteur du document au moment de l'ouverture
   (mesuré ici : 2200 px pour un document de 3461 px), si bien qu'en faisant
   défiler on retrouvait la page en clair sous le voile. En fixed il couvre
   la fenêtre quoi qu'il arrive — d'où le !important, qui neutralise les
   width/height posés en style inline par le script.

   Noir plein, comme le calque de zoom : on passe de l'un à l'autre d'un
   clic, deux fonds différents produiraient un à-coup de luminosité. Opacité
   pleine plutôt que 0,92 : en dessous de 1, la page vient éclaircir le noir
   et le fond n'est plus le même dans les deux vues. */
.lightboxOverlay {
	position: fixed;
	inset: 0;
	width: auto !important;
	height: auto !important;
	background-color: #000;
	opacity: 1;
}

/* Défilement de la page neutralisé pendant l'ouverture : sans cela l'image
   s'en va vers le haut alors que le voile, lui, reste. La compensation de
   largeur évite le saut de mise en page quand la barre de défilement
   disparaît (variable posée par lightbox-zoom.js). */
html.ir-lb-verrou {
	overflow: hidden;
	padding-right: var(--ir-barre-defilement, 0px);
}

/* --- Barre d'outils : fermer + zoomer ---------------------------------- */
.lb-data .lb-close,
.ir-lb-zoom {
	position: fixed;
	top: 24px;
	z-index: 10010;
	display: block;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	/* Pastille claire : sur fond noir, un rond sombre disparaîtrait et il ne
	   resterait que l'icône, qu'on ne lit plus comme un bouton. */
	background-color: rgba(255, 255, 255, 0.14);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px 18px;
	opacity: 0.85;
	cursor: pointer;
	transition: opacity 0.2s, background-color 0.2s;
}
.lb-data .lb-close:hover,
.ir-lb-zoom:hover {
	opacity: 1;
	background-color: rgba(255, 255, 255, 0.26);
}

/* La croix native de lightbox2 est un PNG calé en haut à droite de son
   bloc : on repart d'une icône vectorielle, nette sur tous les écrans. */
.lb-data .lb-close {
	right: 24px;
	float: none;
	text-align: center;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 4l16 16M20 4L4 20'/%3E%3C/svg%3E");
	background-size: 16px 16px;
}

.ir-lb-zoom {
	right: 78px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='7'/%3E%3Cpath d='M15.5 15.5L21 21M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E");
}

/* --- Visionneuse du mur /image/ ----------------------------------------
   Pas de bouton de zoom ici (voir lightbox-zoom.js) : clic sur l'image et
   molette. L'image est cliquable, rien ne la recouvre — les flèches sont
   dans la colonne de gauche. */
.pop_box .con .swiper-slide img {
	cursor: zoom-in;
}

/* --- Calque de zoom (taille réelle des pixels) -------------------------
   Fond noir, choisi par l'auteur du site. Même valeur que le voile du
   lightbox pour qu'aucune variation de luminosité n'apparaisse au passage
   de l'un à l'autre. */
.ir-zoom {
	position: fixed;
	inset: 0;
	z-index: 10005;
	overflow: auto;
	background: #000;
	cursor: grab;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.32) transparent;
}
.ir-zoom.ir-zoom-drag {
	cursor: grabbing;
}
.ir-zoom img {
	display: block;
	max-width: none; /* indispensable : le thème force max-width:100% partout */
	user-select: none;
	-webkit-user-drag: none;
}
.ir-zoom::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}
.ir-zoom::-webkit-scrollbar-thumb {
	border-radius: 5px;
	background: rgba(255, 255, 255, 0.32);
}
.ir-zoom::-webkit-scrollbar-track {
	background: transparent;
}

/* Indication discrète, effacée dès la première interaction. */
.ir-zoom-aide {
	position: fixed;
	bottom: 26px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10011;
	padding: 7px 16px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.72);
	color: #fff;
	font-size: 12px;
	letter-spacing: 0.02em;
	pointer-events: none;
	transition: opacity 0.4s;
}

/* --- Le bouton « voir en taille réelle » -------------------------------
   Il ouvre un calque qui se pilote à la molette, se parcourt en glissant et se
   referme par Échap. lightbox-zoom.js refuse donc de l'ouvrir sans souris.
   Le bouton doit suivre exactement la même règle, sinon il reste affiché en
   paysage — entre 787 et 1000px la largeur ne le masquait pas — et l'on appuie
   sur un bouton qui ne fait rien.
   Le critère est le dispositif de pointage, pas la largeur : une fenêtre
   étroite sur un ordinateur garde sa molette, et donc son bouton. */
@media (hover: none), (pointer: coarse) {
	.ir-lb-zoom {
		display: none;
	}
}

/* --- Petits écrans ------------------------------------------------------
   Le pincer-pour-zoomer natif fait déjà le travail ; on garde seulement la
   fermeture, et on la rapproche du bord. */
@media (max-width: 786px) {
	.lb-data .lb-close {
		top: 14px;
		right: 14px;
	}

	/* Image centrée dans la fenêtre.
	   lightbox2 pose la visionneuse à « défilement + 50px » et la laisse là :
	   sur un téléphone, une image large fait 230px de haut pour 844px d'écran,
	   et elle restait plaquée sous la barre de fermeture avec six cents pixels
	   de noir en dessous. Le défilement étant déjà verrouillé pendant
	   l'ouverture (html.ir-lb-verrou) et le voile étant en fixed, on peut la
	   sortir du flux du document sans risque et la centrer.
	   Le !important est nécessaire : le « top » est écrit en style inline par
	   le script, et rien d'autre ne l'emporte. */
	.lightbox {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0;
		bottom: 0;
		width: auto !important;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	/* Le bandeau du bas suit l'image au lieu d'être poussé en bas de page. */
	.lightbox .lb-dataContainer {
		width: auto !important;
		max-width: 100%;
	}
}

/* --- « Cette image s'ouvre en grand » -----------------------------------
   Rien ne le disait. Sur un ordinateur le curseur ne changeait même pas ; sur
   un téléphone, où il n'y a pas de curseur du tout, le visiteur n'a aucune
   raison de soupçonner qu'un appui agrandit. Il fait donc ce que l'on fait
   partout ailleurs : il pince — et le pincement agrandit la page entière,
   en-tête et texte compris, puisque c'est le navigateur qui zoome, pas le
   site. Il faut ensuite repincer pour revenir.
   L'appui, lui, ouvre la visionneuse : l'image occupe l'écran, la page ne
   bouge pas, on referme d'un geste. C'est le bon chemin, il manquait
   seulement de se signaler.
   Deux indices selon l'appareil : le curseur là où il existe, une pastille
   discrète là où il n'existe pas. */
a[data-lightbox] {
	position: relative;
	display: block;
	cursor: zoom-in;
}

@media (hover: none), (pointer: coarse) {
	a[data-lightbox]::after {
		content: "";
		position: absolute;
		right: 10px;
		bottom: 10px;
		width: 34px;
		height: 34px;
		border-radius: 50%;
		/* Pastille claire sur fond sombre comme sur fond clair : les rendus
		   d'architecture vont du ciel blanc à la façade noire, un pictogramme
		   d'une seule couleur disparaîtrait sur la moitié d'entre eux. */
		/* Le même pictogramme que le bouton de la visionneuse, en SVG intégré :
		   il ne dépend d'aucun fichier — assets/img/search.svg n'existe pas,
		   la première version de cette règle le demandait et récoltait un 404.
		   Trait sombre ici, puisque la pastille est claire. */
		background: rgba(255, 255, 255, 0.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='7'/%3E%3Cpath d='M15.5 15.5L21 21M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E") no-repeat center / 17px 17px;
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
		pointer-events: none;
	}
}