/* visionneuse-art — habillage de la fiche d'une œuvre, /decouvrir/art/ (Terondo V2)
 * Tout est borné à `#dv .lb.vz` : la classe `vz` n'est posée que par visionneuse-art.js. Sans le
 * script, aucune de ces règles ne s'applique et la visionneuse d'origine revient telle quelle.
 *
 * Parti pris : la fiche est une salle SOMBRE et OPAQUE, en thème jour comme en thème nuit. Une œuvre
 * se juge sur un fond neutre, et l'ancien voile à 94 % laissait lire la grille à travers l'image.
 * La notice garde ses propres couleurs (celles de module-0) sur un panneau opaque.
 *
 * HISTORIQUE
 *   r1 — 23/09/2026 — Opus-art-zoom (ART-ZOOM-2309).
 */
html.vz-lock{overflow:hidden}
#dv .lb.vz{
	--vz-bg:#0b0c11;--vz-scene:#11131a;--vz-panel:#12141b;--vz-bloc:#181b24;--vz-btn:#1a1d27;--vz-btn-h:#262a38;
	--vz-line:rgba(255,255,255,.1);--vz-ink:#f2f0f8;--vz-mut:#aeaac4;--vz-acc:#8fd0ff;--mut:#aeaac4;
	color-scheme:dark;position:fixed;inset:0;display:none;padding:0;margin:0;z-index:1500;
	background:var(--vz-bg);color:var(--vz-ink);
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif
}
#dv .lb.vz.open{display:block}
#dv .lb.vz:focus{outline:none}
#dv .lb.vz [hidden]{display:none!important}

/* ---------- barre du haut ---------- */
#dv .lb.vz .vz-top{position:absolute;top:0;left:0;right:0;height:56px;display:flex;align-items:center;gap:8px;
	padding:0 12px 0 20px;background:var(--vz-bg);border-bottom:1px solid var(--vz-line);z-index:3}
#dv .lb.vz .vz-count{font-weight:600;font-size:13px;line-height:1;font-family:inherit;color:var(--vz-mut);font-variant-numeric:tabular-nums;letter-spacing:.02em}
#dv .lb.vz .vz-sp{flex:1}
#dv .lb.vz .vz-b{box-sizing:border-box;width:40px;height:40px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
	padding:0;margin:0;border-radius:10px;background:var(--vz-btn);border:1px solid var(--vz-line);color:var(--vz-ink);
	cursor:pointer;text-decoration:none;line-height:1;transition:background .15s,border-color .15s,color .15s,opacity .15s}
#dv .lb.vz .vz-b:hover{background:var(--vz-btn-h);border-color:rgba(255,255,255,.22)}
#dv .lb.vz .vz-b:focus-visible{outline:2px solid var(--vz-acc);outline-offset:2px}
#dv .lb.vz .vz-b:disabled{opacity:.3;cursor:default;background:var(--vz-btn)}
#dv .lb.vz .vz-b[aria-pressed="true"]{background:#233049;border-color:rgba(143,208,255,.5);color:#fff}
#dv .lb.vz .vz-b svg{display:block;width:20px;height:20px}
/* le bouton Fermer de module-0, déplacé dans la barre : il quitte sa position fixe */
#dv .lb.vz .x.vz-x{position:static;top:auto;right:auto;margin-left:4px;font-size:0}

/* ---------- les deux zones : la scène, puis la notice ---------- */
#dv .lb.vz .in{position:absolute;top:56px;left:0;right:0;bottom:0;width:auto;max-width:none;max-height:none;margin:0;padding:0;
	display:grid;grid-template-columns:minmax(0,1fr) 400px;grid-template-rows:minmax(0,1fr);gap:0;
	overflow:hidden;background:var(--vz-bg);border:0;border-radius:0;box-shadow:none}
#dv .lb.vz.vz-noinfo .in{grid-template-columns:minmax(0,1fr)}
#dv .lb.vz.vz-noinfo .ar-cartel{display:none}
#dv .lb.vz .ar-scene{position:relative;display:block;width:auto;height:auto;max-width:none;min-height:0;margin:0;padding:0;
	align-self:stretch;border:0;border-radius:0;overflow:hidden;touch-action:none;cursor:zoom-in;
	background:radial-gradient(120% 90% at 50% 45%,#191c26 0%,var(--vz-scene) 55%,var(--vz-bg) 100%)}
#dv .lb.vz .ar-scene.vz-zoomed{cursor:grab}
#dv .lb.vz .ar-scene.vz-drag{cursor:grabbing}
#dv .lb.vz .imgwrap{position:absolute;inset:0;display:block;max-width:none;line-height:0}
#dv .lb.vz .imgwrap img.vz-img{position:absolute;max-width:none;max-height:none;margin:0;object-fit:fill;border-radius:2px;
	box-shadow:0 26px 70px -26px rgba(0,0,0,.95);transform-origin:50% 50%;
	user-select:none;-webkit-user-select:none;-webkit-user-drag:none;transition:opacity .3s}
#dv .lb.vz .imgwrap img.vz-img.vz-anim{transition:transform .24s cubic-bezier(.2,.7,.2,1),opacity .3s}

/* ---------- commandes posées sur la scène ---------- */
#dv .lb.vz .vz-ui{position:absolute;inset:0;pointer-events:none;z-index:2}
#dv .lb.vz .vz-ui>*{pointer-events:auto}
#dv .lb.vz .vz-nav{position:absolute;top:50%;margin-top:-24px;width:48px;height:48px;border-radius:50%;background:#151821;
	box-shadow:0 10px 26px -12px rgba(0,0,0,.9)}
#dv .lb.vz .vz-prev{left:16px}
#dv .lb.vz .vz-next{right:16px}
#dv .lb.vz .vz-nav:disabled{opacity:0;pointer-events:none}
#dv .lb.vz .vz-zoom{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;align-items:center;gap:2px;
	padding:5px;border-radius:999px;background:#151821;border:1px solid var(--vz-line);box-shadow:0 14px 34px -14px rgba(0,0,0,.95)}
#dv .lb.vz .vz-zoom .vz-b{width:38px;height:38px;border-radius:999px;background:transparent;border-color:transparent}
#dv .lb.vz .vz-zoom .vz-b:hover{background:var(--vz-btn-h)}
#dv .lb.vz .vz-zoom .vz-b:disabled{background:transparent}
#dv .lb.vz .vz-zoom .vz-b.on{color:var(--vz-acc)}
#dv .lb.vz .vz-zoom .vz-one{width:auto;padding:0 11px;font-weight:700;font-size:12.5px;line-height:1;font-family:inherit;letter-spacing:.02em}
#dv .lb.vz .vz-val{min-width:66px;text-align:center;font-weight:600;font-size:13px;line-height:1;font-family:inherit;font-variant-numeric:tabular-nums;color:var(--vz-ink)}
#dv .lb.vz .vz-sep{width:1px;height:20px;background:var(--vz-line);margin:0 3px}
#dv .lb.vz .vz-map{position:absolute;right:18px;bottom:18px;padding:5px;line-height:0;overflow:hidden;cursor:crosshair;
	background:#151821;border:1px solid var(--vz-line);border-radius:10px;box-shadow:0 14px 34px -14px rgba(0,0,0,.95);touch-action:none}
#dv .lb.vz .vz-map img{display:block;opacity:1;max-width:none;max-height:none;border-radius:3px;box-shadow:none;transform:none}
#dv .lb.vz .vz-map-r{position:absolute;border:2px solid var(--vz-acc);border-radius:2px;pointer-events:none;
	box-shadow:0 0 0 400px rgba(8,9,14,.5)}
#dv .lb.vz .vz-hint{position:absolute;left:50%;top:18px;transform:translateX(-50%);padding:9px 16px;border-radius:999px;
	background:#151821;border:1px solid var(--vz-line);color:var(--vz-ink);font-weight:500;font-size:13px;line-height:1.35;font-family:inherit;
	white-space:nowrap;max-width:calc(100% - 32px);pointer-events:none;transition:opacity .45s}
#dv .lb.vz .vz-hint.vz-off{opacity:0}

/* ---------- la notice ---------- */
#dv .lb.vz .ar-cartel{max-height:none;min-height:0;height:auto;overflow-y:auto;-webkit-overflow-scrolling:touch;
	padding:32px 28px 56px;background:var(--vz-panel);border-left:1px solid var(--vz-line);overscroll-behavior:contain}
#dv .lb.vz .ar-cartel .tt{margin:0;font-size:clamp(22px,2vw,30px);line-height:1.15}
#dv .lb.vz .arblk{background:var(--vz-bloc);border:1px solid var(--vz-line)}
#dv .lb.vz .ar-cartel::-webkit-scrollbar{width:10px}
#dv .lb.vz .ar-cartel::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:8px;border:2px solid var(--vz-panel)}

/* ---------- téléphone et petite tablette : la scène en haut, la notice dessous ---------- */
@media (max-width:899px){
	#dv .lb.vz .vz-top{height:52px;padding:0 8px 0 16px;gap:6px}
	#dv .lb.vz .vz-b{width:44px;height:44px}
	#dv .lb.vz .in{top:52px;display:flex;flex-direction:column}
	#dv .lb.vz .ar-scene{flex:0 0 60%}
	#dv .lb.vz.vz-noinfo .ar-scene{flex:1 1 auto}
	#dv .lb.vz .ar-cartel{flex:1 1 auto;border-left:0;border-top:1px solid var(--vz-line);padding:20px 18px 40px}
	#dv .lb.vz .vz-nav{width:44px;height:44px;margin-top:-22px}
	#dv .lb.vz .vz-prev{left:8px}
	#dv .lb.vz .vz-next{right:8px}
	#dv .lb.vz .vz-zoom{bottom:10px}
	#dv .lb.vz .vz-zoom .vz-b{width:44px;height:44px}
	#dv .lb.vz .vz-val{min-width:56px}
	#dv .lb.vz .vz-map{top:10px;right:10px;bottom:auto;padding:4px}
	#dv .lb.vz .vz-hint{top:auto;bottom:70px;white-space:normal;text-align:center;width:max-content}
}
@media (max-width:420px){
	#dv .lb.vz .vz-zoom .vz-one,#dv .lb.vz .vz-sep{display:none}
}
@media (prefers-reduced-motion:reduce){
	#dv .lb.vz .imgwrap img.vz-img,#dv .lb.vz .imgwrap img.vz-img.vz-anim,#dv .lb.vz .vz-b,#dv .lb.vz .vz-hint{transition:none}
}
/* cartes de la grille atteignables au clavier (tabindex posé par le script) */
#dv .grid .card[tabindex]:focus-visible{outline:2px solid var(--accent,#2456c6);outline-offset:3px}