/*
 * Visionneuse d'images (assets/js/visionneuse.js) : carte des sites et webcams des fiches, sur la page ou dans le bloc de
 * la carte en plein écran.
 */
.wcs-visionneuse {
	position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center;
	padding: 56px 16px 16px; background: rgba(0, 0, 0, .95); cursor: zoom-out;
}
.wcs-visionneuse { overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.wcs-visionneuse figure { margin: 0; width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
/* Image étirée à toute la place (une webcam de 640 px s'agrandit), proportions gardées ; zoom par transform (visionneuse.js). */
.wcs-visionneuse .wcs-visionneuse-cadre { width: 100%; height: calc(100vh - 118px); height: calc(100dvh - 118px); }
.wcs-visionneuse img {
	display: block; width: 100%; height: 100%; object-fit: contain; cursor: zoom-in;
	transform-origin: 50% 50%; will-change: transform; -webkit-user-drag: none;
}
.wcs-visionneuse.wcs-visionneuse-zoomee img { cursor: grab; }
.wcs-visionneuse.wcs-visionneuse-zoomee img:active { cursor: grabbing; }
.wcs-visionneuse figcaption { position: relative; z-index: 1; }
.wcs-visionneuse .wcs-visionneuse-zoom { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; gap: 6px; }
.wcs-visionneuse .wcs-visionneuse-zoom button {
	min-width: 40px; height: 40px; padding: 0 10px; border: 0; border-radius: 20px;
	background: rgba(255, 255, 255, .15); color: #fff; font: inherit; font-size: 20px; line-height: 40px; cursor: pointer;
}
.wcs-visionneuse .wcs-visionneuse-zoom button[data-zoom="un"] { min-width: 64px; font-size: 15px; font-variant-numeric: tabular-nums; }
.wcs-visionneuse .wcs-visionneuse-zoom button:hover, .wcs-visionneuse .wcs-visionneuse-zoom button:focus-visible { background: rgba(255, 255, 255, .3); }
.wcs-visionneuse .wcs-visionneuse-fermer { z-index: 2; }
.wcs-visionneuse figcaption { color: #fff; font-size: 15px; text-align: center; }
.wcs-visionneuse .wcs-visionneuse-fermer {
	position: absolute; top: 8px; right: 12px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
	background: rgba(255, 255, 255, .15); color: #fff; font-size: 28px; line-height: 40px; cursor: pointer;
}
.wcs-visionneuse .wcs-visionneuse-fermer:hover, .wcs-visionneuse .wcs-visionneuse-fermer:focus-visible { background: rgba(255, 255, 255, .3); }
/* Historique d'une webcam (2.180.0) : barre de temps sous l'image ; l'image laisse sa place à la barre. */
/* Image calée en haut, le bas réservé à la barre (2.180.2) : centrée, elle descendait sous la barre (20 px de son bandeau
   cachés sur un écran de 879 px de haut). 56 px en haut (boutons du zoom) et 96 px en bas (barre de 73 px et sa marge). */
.wcs-visionneuse.wcs-visionneuse-avec-temps { align-items: flex-start; padding-bottom: 96px; }
.wcs-visionneuse.wcs-visionneuse-avec-temps .wcs-visionneuse-cadre { height: calc(100vh - 152px); height: calc(100dvh - 152px); }
.wcs-visionneuse .wcs-visionneuse-temps {
	position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 2; width: min(720px, calc(100% - 24px));
	display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 6px 10px; border-radius: 12px;
	background: rgba(255, 255, 255, .12); color: #fff; cursor: default; touch-action: pan-x;
}
.wcs-visionneuse .wcs-visionneuse-temps button {
	width: 36px; height: 36px; padding: 0; border: 0; border-radius: 18px; background: rgba(255, 255, 255, .15);
	color: #fff; font-size: 22px; line-height: 36px; cursor: pointer;
}
.wcs-visionneuse .wcs-visionneuse-temps button:hover, .wcs-visionneuse .wcs-visionneuse-temps button:focus-visible { background: rgba(255, 255, 255, .3); }
.wcs-visionneuse .wcs-visionneuse-temps button:disabled { opacity: .35; cursor: default; }
.wcs-visionneuse .wcs-visionneuse-temps input[type="range"] { flex: 1 1 200px; margin: 0; accent-color: #f2a33a; cursor: pointer; }
.wcs-visionneuse .wcs-visionneuse-heure { flex-basis: 100%; text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; }
.wcs-visionneuse.wcs-visionneuse-avec-temps figcaption { display: none; }