/* ==========================================================
   Popup plein écran pour les carrousels Bootstrap
   Utilisé par : index.php, galerie.php, presse.php
   ========================================================== */

/* ---- Bouton plein écran sur le carrousel ---- */
.carousel .carousel-inner img { cursor: zoom-in; }
.btn-plein-ecran {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 20;
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.6);
	color: #777;
	font-size: 18px;
	line-height: 44px;
	text-align: center;
	cursor: pointer;
	opacity: 0.3;
	transition: opacity 0.2s, background 0.2s, color 0.2s;
}
/* Un peu plus visible au survol du carrousel, pleinement au survol du bouton */
.carousel:hover .btn-plein-ecran { opacity: 0.85; }
.btn-plein-ecran:hover,
.btn-plein-ecran:focus { opacity: 1; background: rgba(255, 255, 255, 0.9); color: #333; outline: none; }

/* ---- Popup plein écran ---- */
.lightbox {
	display: none;
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: 2000;
	background: rgba(0, 0, 0, 0.92);
}
.lightbox.ouvert { display: block; }
.lightbox img {
	position: absolute;
	top: 50%;
	left: 50%;
	max-width: 92vw;
	max-height: 88vh;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	margin: 0;
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
}
.lightbox button {
	position: absolute;
	border: none;
	background: transparent;
	color: #fff;
	opacity: 0.8;
	cursor: pointer;
}
.lightbox button:hover,
.lightbox button:focus { opacity: 1; outline: none; }
.lightbox-fermer { top: 10px; right: 20px; font-size: 44px; line-height: 1; }
.lightbox-prec,
.lightbox-suiv {
	top: 50%;
	margin-top: -35px;
	font-size: 40px;
	padding: 10px 18px;
}
.lightbox-prec { left: 10px; }
.lightbox-suiv { right: 10px; }
.lightbox-compteur {
	position: absolute;
	bottom: 15px;
	width: 100%;
	text-align: center;
	color: #ccc;
	font-size: 14px;
}