/*
 * EMERY FRED PHOTOGRAPHE — Visionneuse photo plein écran (avec assets/js/ef-visionneuse.js) — fiche _todo 13, 04/10/2026.
 * Autonome : fonctionne aussi bien sur les pages encore Sepia que sur les pages « ef- ».
 */
.ef-visio {
	--efv-or: #B89A72;
	position: fixed; inset: 0; z-index: 100000; background: #080808; color: #f2f0eb;
	font-family: 'Poppins', sans-serif; opacity: 0; transition: opacity .26s ease;
	-webkit-user-select: none; user-select: none;
}
.ef-visio[hidden] { display: none !important; }
.ef-visio.ef-on { opacity: 1; }
.ef-visio *, .ef-visio *::before, .ef-visio *::after { box-sizing: border-box; }

/* Photo */
.ef-visio-scene { position: absolute; inset: 64px 70px 92px; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: none; cursor: grab; }
.ef-visio.ef-avec-vignettes .ef-visio-scene { bottom: 168px; }
.ef-visio-img {
	max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block;
	transition: opacity .3s ease, transform .25s ease; -webkit-user-drag: none; will-change: transform;
}
.ef-visio-img.ef-charge { opacity: 0.15; }
.ef-visio.ef-zoome .ef-visio-scene { cursor: move; }
.ef-visio.ef-zoome .ef-visio-img { transition: opacity .3s ease; }

/* Barre du haut : compteur + outils */
.ef-visio-haut { position: absolute; top: 0; left: 0; right: 0; height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px 0 22px; z-index: 3; transition: opacity .35s ease; }
.ef-visio-compteur { font-size: 13px; letter-spacing: 0.12em; color: #bdb8af; }
.ef-visio-outils { display: flex; gap: 4px; }
.ef-visio-btn {
	border: 0; background: transparent; color: #f2f0eb; cursor: pointer; padding: 0;
	width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
	transition: background .2s ease, color .2s ease, opacity .35s ease;
}
.ef-visio-btn svg { width: 21px; height: 21px; }
.ef-visio-btn:hover, .ef-visio-btn:focus-visible { background: rgba(255,255,255,0.08); color: var(--ef-accent, var(--efv-or)); outline: none; }
.ef-visio.ef-auto .ef-visio-auto, .ef-visio.ef-avec-vignettes .ef-visio-vign, .ef-visio.ef-plein .ef-visio-plein { color: var(--ef-accent, var(--efv-or)); }
.ef-visio.ef-seule .ef-visio-auto, .ef-visio.ef-seule .ef-visio-vign, .ef-visio.ef-seule .ef-visio-prec, .ef-visio.ef-seule .ef-visio-suiv { display: none; }
.ef-visio-prec, .ef-visio-suiv { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; background: rgba(255,255,255,0.05); z-index: 3; }
.ef-visio-prec { left: 12px; } .ef-visio-suiv { right: 12px; }
.ef-visio-prec svg, .ef-visio-suiv svg { width: 24px; height: 24px; }

/* Barre de progression du diaporama */
.ef-visio-progres { position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 4; }
.ef-visio-progres span { display: block; height: 100%; background: var(--ef-accent, var(--efv-or)); transform: scaleX(0); transform-origin: 0 50%; }

/* Bas : légende + vignettes */
.ef-visio-bas { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 16px 18px; z-index: 3; transition: opacity .35s ease; }
.ef-visio-legende { margin: 0 auto 0; max-width: 820px; min-height: 22px; text-align: center; color: #bdb8af; font-size: 14px; line-height: 1.55; }
.ef-visio-bande { display: none; gap: 6px; overflow-x: auto; padding: 14px 0 2px; scrollbar-width: thin; scrollbar-color: #444 transparent; justify-content: safe center; }
.ef-visio.ef-avec-vignettes .ef-visio-bande { display: flex; }
.ef-visio-vignette {
	flex: 0 0 auto; width: 92px; height: 62px; border: 2px solid transparent; padding: 0; cursor: pointer;
	background: #222 center / cover no-repeat; opacity: 0.55; transition: opacity .2s ease, border-color .2s ease;
}
.ef-visio-vignette:hover { opacity: 0.9; }
.ef-visio-vignette.ef-on { opacity: 1; border-color: var(--ef-accent, var(--efv-or)); }

/* Commandes masquées au repos (5 s sans mouvement) */
.ef-visio.ef-repos .ef-visio-haut, .ef-visio.ef-repos .ef-visio-prec, .ef-visio.ef-repos .ef-visio-suiv, .ef-visio.ef-repos .ef-visio-bas { opacity: 0; }
.ef-visio.ef-repos { cursor: none; }

@media (max-width: 767px) {
	.ef-visio-scene { inset: 56px 0 120px; }
	.ef-visio.ef-avec-vignettes .ef-visio-scene { bottom: 186px; }
	.ef-visio-haut { padding-left: 14px; height: 54px; }
	.ef-visio-btn { width: 40px; height: 40px; }
	.ef-visio-zmoins, .ef-visio-zplus, .ef-visio-plein, .ef-visio-reel, .ef-visio-fliph, .ef-visio-flipv { display: none; }   /* sur smartphone : double appui pour zoomer */
	.ef-visio-prec, .ef-visio-suiv { top: auto; bottom: 64px; transform: none; width: 44px; height: 44px; }
	.ef-visio-prec { left: calc(50% - 56px); } .ef-visio-suiv { right: calc(50% - 56px); }
	.ef-visio.ef-avec-vignettes .ef-visio-prec, .ef-visio.ef-avec-vignettes .ef-visio-suiv { bottom: 132px; }
	.ef-visio-bas { padding-bottom: 14px; }
	.ef-visio-legende { font-size: 13px; }
	.ef-visio-vignette { width: 70px; height: 48px; }
}
html.ef-visio-ouverte, html.ef-visio-ouverte body { overflow: hidden; }