/**
 * Worksheets Pages Builder — preview-image viewer.
 *
 * Turns the stacked ".egm-fiche__preview" figures into an interactive, scrollbar-free
 * viewer: a slide carousel with zoom (up to 150 %), hand-drag panning and an Apple-like
 * floating control bar (zoom −/+ and prominent circular navigation arrows). Enhanced
 * progressively by viewer.js — this file only styles the ".is-init" (JS-ready) state.
 * Colours, radius and stage height are driven by the CSS variables viewer.js sets from
 * the site-wide config (`egmwpbViewer`).
 */

/* Enhanced container — replaces the stacked flex column with a single stage. */
.egm-fiche__viewer.egmv{
	display:block;
	position:relative;
	width:100%;
	max-width:520px;
	margin-inline:auto;
	--egmv-accent:#5B47DB;
	--egmv-radius:16px;
	--egmv-maxh:none;
	touch-action:pan-y;
}
@media(min-width:700px){
	.egm-fiche__viewer.egmv{margin-inline:0}
}

/* Stage = the clipped viewport. No scrollbars ever. */
.egmv-stage{
	position:relative;
	overflow:hidden;
	border-radius:var(--egmv-radius);
	background:var(--egm-surface-alt,#f3f4f6);
	box-shadow:var(--egmv-shadow,0 8px 30px rgba(0,0,0,.14),0 2px 6px rgba(0,0,0,.08));
	line-height:0;
}

/* Configurable drop shadow (Réglages → Visionneuse). */
.egm-fiche__viewer[data-shadow="none"]{--egmv-shadow:none}
.egm-fiche__viewer[data-shadow="sm"]{--egmv-shadow:0 1px 3px rgba(0,0,0,.12)}
.egm-fiche__viewer[data-shadow="md"]{--egmv-shadow:0 4px 12px rgba(0,0,0,.14)}
.egm-fiche__viewer[data-shadow="lg"]{--egmv-shadow:0 8px 30px rgba(0,0,0,.14),0 2px 6px rgba(0,0,0,.08)}
.egm-fiche__viewer[data-shadow="xl"]{--egmv-shadow:0 24px 60px rgba(0,0,0,.28),0 10px 22px rgba(0,0,0,.16)}

/* Track = the horizontal rail of slides (translated for the slide effect). */
.egmv-track{
	display:flex;
	align-items:stretch;
	will-change:transform;
	transition:transform .5s cubic-bezier(.22,.61,.36,1);
}

.egmv-slide{
	position:relative;
	flex:0 0 100%;
	min-width:100%;
	margin:0;
	display:flex;
	align-items:center;
	justify-content:center;
	overflow:hidden;
}

.egm-fiche__viewer.egmv .egmv-img{
	display:block;
	width:100%;
	height:auto;
	max-height:var(--egmv-maxh,none);
	object-fit:contain;
	margin:0 auto;
	border-radius:0;
	box-shadow:none;
	background:transparent;
	-webkit-user-select:none;
	user-select:none;
	-webkit-user-drag:none;
	transform-origin:center center;
	transition:transform .3s cubic-bezier(.22,.61,.36,1);
}

/* Zoom / pan cursors (hand). */
.egmv-slide.is-zoomed .egmv-img{cursor:grab;transition:none}
.egmv-slide.is-panning .egmv-img{cursor:grabbing;transition:none}

/* Entrance flourishes per effect (played on slide change by viewer.js). */
.egm-fiche__viewer[data-effect="fade"] .egmv-track,
.egm-fiche__viewer[data-effect="zoom"] .egmv-track{transition:none}
.egm-fiche__viewer[data-effect="fade"] .egmv-slide.is-active .egmv-img.egmv-anim{animation:egmv-fade .5s ease}
.egm-fiche__viewer[data-effect="zoom"] .egmv-slide.is-active .egmv-img.egmv-anim{animation:egmv-zoomin .55s cubic-bezier(.22,.61,.36,1)}
@keyframes egmv-fade{from{opacity:0}to{opacity:1}}
@keyframes egmv-zoomin{from{opacity:.25;transform:scale(1.12)}to{opacity:1;transform:scale(1)}}

/* ───────────── Circular navigation arrows ───────────── */
.egmv-arrow{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	z-index:4;
	width:44px;
	height:44px;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:0;
	border:none;
	border-radius:50%;
	cursor:pointer;
	color:#fff;
	background:var(--egmv-accent);
	box-shadow:0 6px 18px rgba(0,0,0,.28),0 0 0 4px rgba(255,255,255,.55);
	opacity:.94;
	transition:transform .18s ease,opacity .18s ease,box-shadow .18s ease,background .18s ease;
}
.egmv-arrow:hover{opacity:1;transform:translateY(-50%) scale(1.08)}
.egmv-arrow:active{transform:translateY(-50%) scale(.94)}
.egmv-arrow:focus-visible{outline:3px solid rgba(255,255,255,.9);outline-offset:2px}
.egmv-arrow[disabled]{opacity:.32;cursor:default;pointer-events:none;box-shadow:0 3px 10px rgba(0,0,0,.2),0 0 0 4px rgba(255,255,255,.4)}
.egmv-arrow--prev{left:10px}
.egmv-arrow--next{right:10px}
.egmv-arrow svg{width:20px;height:20px;display:block;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* Arrows docked inside the control bar (flanking it) instead of on the stage edges. */
.egmv-arrow--in-bar{
	position:static;
	top:auto;left:auto;right:auto;
	transform:none;
	width:34px;height:34px;
	box-shadow:none;
	opacity:1;
}
.egmv-arrow--in-bar:hover{transform:scale(1.08);box-shadow:0 2px 8px rgba(0,0,0,.25)}
.egmv-arrow--in-bar:active{transform:scale(.92)}
.egmv-arrow--in-bar svg{width:18px;height:18px}
.egm-fiche__viewer.egmv.is-idle .egmv-arrow--in-bar{opacity:1}

/* ───────────── Control bar docked BELOW the fiche (out of the stage) ───────────── */
.egm-fiche__viewer[data-bar="below"] .egmv-bar{
	position:static;
	left:auto;bottom:auto;
	transform:none;
	margin:12px auto 0;
	width:-moz-max-content;
	width:max-content;
	max-width:100%;
}
.egm-fiche__viewer[data-bar="below"].is-idle .egmv-bar{opacity:1}

/* ───────────── Apple-like floating control bar ───────────── */
.egmv-bar{
	position:absolute;
	left:50%;
	bottom:12px;
	transform:translateX(-50%);
	z-index:5;
	display:flex;
	align-items:center;
	gap:6px;
	padding:6px 8px;
	border-radius:999px;
	-webkit-backdrop-filter:saturate(180%) blur(20px);
	backdrop-filter:saturate(180%) blur(20px);
	max-width:calc(100% - 20px);
	transition:opacity .25s ease;
}
/* Dark (default) — smoked glass. */
.egm-fiche__viewer[data-style="apple_dark"] .egmv-bar{
	background:rgba(30,30,32,.62);
	border:1px solid rgba(255,255,255,.14);
	box-shadow:0 8px 26px rgba(0,0,0,.34);
	color:#fff;
}
.egm-fiche__viewer[data-style="apple_light"] .egmv-bar{
	background:rgba(255,255,255,.72);
	border:1px solid rgba(0,0,0,.08);
	box-shadow:0 8px 26px rgba(0,0,0,.18);
	color:#1f2937;
}
.egm-fiche__viewer[data-style="glass"] .egmv-bar{
	background:rgba(20,20,25,.55); /* fallback if color-mix unsupported */
	background:color-mix(in srgb,var(--egmv-accent) 30%,rgba(20,20,25,.55));
	border:1px solid rgba(255,255,255,.22);
	box-shadow:0 8px 26px rgba(0,0,0,.3);
	color:#fff;
}

.egmv-btn{
	-webkit-appearance:none;
	appearance:none;
	border:none;
	background:transparent;
	color:inherit;
	cursor:pointer;
	width:34px;
	height:34px;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:0;
	transition:background .15s ease,transform .12s ease,opacity .15s ease;
}
.egmv-btn:hover{background:rgba(127,127,127,.28)}
.egmv-btn:active{transform:scale(.9)}
.egmv-btn:focus-visible{outline:2px solid var(--egmv-accent);outline-offset:1px}
.egmv-btn[disabled]{opacity:.35;cursor:default}
.egmv-btn[disabled]:hover{background:transparent}
.egmv-btn svg{width:18px;height:18px;display:block;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

.egmv-sep{width:1px;align-self:stretch;margin:4px 2px;background:currentColor;opacity:.22}

/* Counter + zoom level readout. */
.egmv-counter{
	font-size:12px;
	font-weight:600;
	letter-spacing:.02em;
	padding:0 8px;
	min-width:44px;
	text-align:center;
	white-space:nowrap;
	font-variant-numeric:tabular-nums;
	opacity:.95;
}

/* Dots. */
.egmv-dots{display:flex;align-items:center;gap:6px;padding:0 4px}
.egmv-dot{
	width:8px;height:8px;padding:0;border:none;border-radius:50%;cursor:pointer;
	background:currentColor;opacity:.4;transition:opacity .15s ease,transform .15s ease;
}
.egmv-dot:hover{opacity:.7}
.egmv-dot.is-active{opacity:1;transform:scale(1.25);background:var(--egmv-accent)}
.egmv-dot:focus-visible{outline:2px solid var(--egmv-accent);outline-offset:2px}

/* Fade the whole chrome when idle (fun, unobtrusive). */
.egm-fiche__viewer.egmv.is-idle .egmv-bar,
.egm-fiche__viewer.egmv.is-idle .egmv-arrow{opacity:.28}
.egm-fiche__viewer.egmv:hover .egmv-bar,
.egm-fiche__viewer.egmv:hover .egmv-arrow,
.egm-fiche__viewer.egmv:focus-within .egmv-bar,
.egm-fiche__viewer.egmv:focus-within .egmv-arrow{opacity:.94}

@media(prefers-reduced-motion:reduce){
	.egmv-track,.egmv-img,.egmv-arrow,.egmv-btn,.egmv-bar{transition:none}
	.egmv-img.egmv-anim{animation:none}
}