/* Page Prestations (1.114) : le bac à vinyles et le crossfader. Balisage : template-parts/prestations/{vinyles,crate,crossfader}.php, inc/vinyles.php ;
   script : assets/js/vinyles.js. Réglages (taille, matière, transition, format…) : attributs data-* et variables --vy-* écrits par les gabarits. */

.presta { position: relative; }
.presta .pads__anchor { position: absolute; top: 0; left: 0; width: 1px; height: 1px; scroll-margin-top: 140px; }
.presta__v--mobile { display: none; }
@media (max-width: 700px) {
	.presta__v--desktop { display: none; }
	.presta__v--mobile { display: block; }
}

/* ---------- Média : vidéo ou photo qui remplit son cadre ---------- */
.vy-vid, .vy-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.vy-none { position: absolute; inset: 0; background: linear-gradient(145deg, var(--c, #7E6226), #14110e); }

/* ---------- Le vinyle : l'étiquette est la photo ou la vidéo de la prestation ---------- */
@keyframes vyd-spin { to { transform: rotate(360deg); } }
@keyframes vyp-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.vyd { position: relative; display: block; width: var(--vy-d, 260px); aspect-ratio: 1; border-radius: 50%; background: #0c0a08; box-shadow: 0 26px 46px -22px rgba(0, 0, 0, 0.95), 0 0 0 2px color-mix(in srgb, var(--c, #C9A24B) 55%, transparent); isolation: isolate; }
.vyd__grooves { position: absolute; inset: 0; border-radius: 50%; background: repeating-radial-gradient(circle, #15120f 0 2px, #2a251f 2px 3px); }
.vyd__face { position: absolute; inset: 11%; z-index: 1; overflow: hidden; border-radius: 50%; background: #000; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, #C9A24B) 72%, #000), 0 0 0 7px #0c0a08; }
.vyd__face::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 50% 50%, transparent 58%, color-mix(in srgb, var(--c, #C9A24B) 40%, transparent) 100%); mix-blend-mode: soft-light; pointer-events: none; }
.vyd__glint { position: absolute; inset: 0; z-index: 2; border-radius: 50%; pointer-events: none; background: conic-gradient(from 0deg, transparent 0 6%, rgba(255, 255, 255, 0.3) 10%, transparent 16%, transparent 56%, rgba(255, 255, 255, 0.22) 60%, transparent 66%); -webkit-mask: radial-gradient(circle, transparent 0 78%, #000 79%); mask: radial-gradient(circle, transparent 0 78%, #000 79%); animation: vyd-spin 6s linear infinite; }
.vyd__hole { position: absolute; left: 50%; top: 50%; z-index: 3; width: 4%; aspect-ratio: 1; margin: -2% 0 0 -2%; border-radius: 50%; background: #0c0a08; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.28); }
[data-spin="off"] .vyd__glint { animation: none; }

/* ---------- Le texte d'une prestation ---------- */
.vyp { min-width: 0; color: var(--cream); }
.vyc__info .vyp:not(:last-child), .vyf__info .vyp:not(:last-child) { margin-bottom: 48px; }
.is-live .vyp:not(.is-on) { display: none; }
.vyc.is-live .vyp.is-on { display: block; margin-bottom: 0; animation: vyp-in 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.vyf.is-live .vyp.is-on { display: grid; margin-bottom: 0; animation: vyp-in 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.vyp__n { margin: 0 0 8px; font-size: 12px; letter-spacing: 0.24em; font-weight: 800; color: var(--c, var(--accent)); }
.vyp__title { margin: 0 0 14px; font-family: var(--serif); font-weight: 500; font-size: clamp(26px, 3vw, 36px); line-height: 1.2; color: var(--cream); text-wrap: balance; }
.vyp__title a { color: inherit; }
.vyp__title a:hover { color: var(--c, var(--accent)); }
.vyp__text { margin: 0 0 16px; font-size: 15.5px; line-height: 1.75; color: var(--muted); max-width: 54ch; }
.vyp__list { margin: 0 0 22px; }
.vyp .btn.vyp__more { background: var(--c, var(--gold)); color: #fff; }

/* ================= Le bac à vinyles ================= */
/* Un vrai bac en relief (1.116) : façade en planches avec clous, montants d'angle à équerres métalliques, rebord vu de dessus, fond à lattes dans
   l'ombre, pieds et ombre au sol. Tailles en fonction du diamètre des vinyles (--vy-d) ; matière : bois, noir ou doré (réglage « Matière du bac »). */
.vyc { --vy-d: min(var(--vy-size, 260px), 56vw); --vy-pad: calc(var(--vy-d) * 0.085); --vy-foot: calc(var(--vy-d) * 0.05); --vy-fh: calc(var(--vy-d) * 0.56);
	--wd-a: #5d4631; --wd-b: #4e3a28; --wd-c: #5a432f; --wd-seam: #130c07; --wd-top: #94764f; --wd-top2: #664d33; --wd-post: #46341f; --wd-post2: #261a0f; --wd-ink: #E5C677;
	--wd-rivet: radial-gradient(circle, rgba(255, 255, 255, 0.55) 0 1px, #858a8e 1.6px 3px, #1b1b1b 3.4px 4.2px, transparent 4.6px);
	padding: 56px 0 72px; }
.vyc[data-wood="black"] { --wd-a: #38342f; --wd-b: #2c2926; --wd-c: #35312d; --wd-seam: #050403; --wd-top: #5d5750; --wd-top2: #38342f; --wd-post: #25211e; --wd-post2: #0e0d0c; }
.vyc[data-wood="gold"] { --wd-a: #D8B565; --wd-b: #C9A24B; --wd-c: #D1AB59; --wd-seam: #7E6226; --wd-top: #F4DB92; --wd-top2: #CBA650; --wd-post: #B28A38; --wd-post2: #80642a; --wd-ink: #2a2016; }
.vyc__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.vyc:not(.is-live) .vyc__stage { display: none; }
.vyc__stage { position: relative; height: calc(var(--vy-d) * 1.6); overflow: hidden; }
/* Ombre sur le sol, sous le bac */
.vyc__stage::after { content: ""; position: absolute; z-index: 0; left: 2%; right: 2%; bottom: 0; height: calc(var(--vy-d) * 0.1); background: radial-gradient(ellipse at 50% 38%, rgba(0, 0, 0, 0.8), transparent 70%); pointer-events: none; }
/* Fond du bac : lattes verticales dans l'ombre, plus sombres vers le bas et sur les côtés */
.vyc__back { position: absolute; left: calc(var(--vy-pad) * 0.6); right: calc(var(--vy-pad) * 0.6); bottom: calc(var(--vy-foot) + var(--vy-fh) * 0.15); height: calc(var(--vy-fh) * 0.85 + var(--vy-d) * 0.1); border-radius: 5px 5px 0 0;
	background: repeating-linear-gradient(90deg, transparent 0 calc(var(--vy-d) * 0.215), rgba(0, 0, 0, 0.6) calc(var(--vy-d) * 0.215) calc(var(--vy-d) * 0.222)), linear-gradient(180deg, color-mix(in srgb, var(--wd-top2) 70%, #000), #0d0804 75%);
	box-shadow: inset 0 14px 22px -8px #000, inset 22px 0 26px -14px #000, inset -22px 0 26px -14px #000; }
/* Les vinyles rangés ne dépassent jamais sous le bac : on les coupe au bas de la façade */
.vyc__rack { position: absolute; left: 0; right: 0; top: 0; bottom: var(--vy-foot); overflow: hidden; }
.vyc__slot { position: absolute; top: calc(var(--vy-d) * 0.43); left: calc(var(--vy-pad) + var(--x) * (100% - var(--vy-d) - 2 * var(--vy-pad))); display: block; width: var(--vy-d); padding: 0; background: none; border: 0; text-decoration: none; cursor: pointer; transform: translateY(var(--y, 0)); z-index: var(--z, 1); transition: transform 0.75s cubic-bezier(0.2, 0.85, 0.2, 1); }
.vyc[data-mode="all"] .vyc__slot { --y: calc(var(--vy-d) * 0.03); }
.vyc[data-mode="all"] .vyc__slot:not(.is-sel):hover { --y: calc(var(--vy-d) * -0.05); }
.vyc[data-mode="one"] .vyc__slot:not(.is-sel) { --y: calc(var(--vy-d) * 0.82); }
.vyc__slot.is-sel { --y: calc(var(--vy-d) * -0.4) !important; --z: 20 !important; }
.vyc__slot.is-sel .vyd { box-shadow: 0 30px 60px -20px #000, 0 0 0 2px var(--c), 0 0 46px -6px var(--c); }
.vyc__slot:focus-visible { outline: none; }
.vyc__slot:focus-visible .vyd { box-shadow: 0 0 0 3px var(--gold), 0 26px 46px -22px #000; }

/* Façade : trois planches (le texte est sur celle du milieu), clous, rebord éclairé sur le dessus */
.vyc__front { position: absolute; z-index: 30; left: 0; right: 0; bottom: var(--vy-foot); height: var(--vy-fh); display: flex; align-items: center; justify-content: center; padding: 12px calc(var(--vy-pad) + 8px) 0; border-radius: 3px 3px 5px 5px; pointer-events: none;
	background:
		var(--wd-rivet) left calc(var(--vy-pad) + 9px) top 11% / 10px 10px no-repeat, var(--wd-rivet) right calc(var(--vy-pad) + 9px) top 11% / 10px 10px no-repeat,
		var(--wd-rivet) left calc(var(--vy-pad) + 9px) top 50% / 10px 10px no-repeat, var(--wd-rivet) right calc(var(--vy-pad) + 9px) top 50% / 10px 10px no-repeat,
		var(--wd-rivet) left calc(var(--vy-pad) + 9px) bottom 11% / 10px 10px no-repeat, var(--wd-rivet) right calc(var(--vy-pad) + 9px) bottom 11% / 10px 10px no-repeat,
		repeating-linear-gradient(91deg, rgba(0, 0, 0, 0.1) 0 1px, transparent 1px 7px), repeating-linear-gradient(88.6deg, rgba(255, 255, 255, 0.04) 0 2px, transparent 2px 13px),
		linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 28%, rgba(0, 0, 0, 0.28)),
		linear-gradient(180deg, var(--wd-a) 0 26%, var(--wd-seam) 26% 27.6%, var(--wd-b) 27.6% 72%, var(--wd-seam) 72% 73.6%, var(--wd-c) 73.6% 100%);
	box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.18), inset 0 -3px 0 rgba(0, 0, 0, 0.5), 0 -16px 28px -8px rgba(0, 0, 0, 0.75), 0 16px 18px -10px rgba(0, 0, 0, 0.85); }
.vyc__front::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--vy-d) * -0.062); height: calc(var(--vy-d) * 0.062); clip-path: polygon(calc(var(--vy-pad) * 0.7) 0, calc(100% - var(--vy-pad) * 0.7) 0, 100% 100%, 0 100%); background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0 1px, transparent 1px), repeating-linear-gradient(91deg, rgba(0, 0, 0, 0.1) 0 1px, transparent 1px 7px), linear-gradient(180deg, var(--wd-top2), var(--wd-top)); }
/* Montants d'angle : plus hauts que la façade, avec une équerre métallique rivetée */
.vyc__post { position: absolute; left: 0; bottom: calc(var(--vy-foot) * -0.7); width: var(--vy-pad); height: calc(100% + var(--vy-d) * 0.1 + var(--vy-foot) * 0.7); border-radius: 3px 3px 2px 2px;
	background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.14) 0 1px, transparent 1px 9px), linear-gradient(90deg, rgba(255, 255, 255, 0.16), transparent 30%, rgba(0, 0, 0, 0.4)), linear-gradient(180deg, var(--wd-post), var(--wd-post2));
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4), 5px 0 12px -3px rgba(0, 0, 0, 0.7); }
.vyc__post--r { left: auto; right: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.14) 0 1px, transparent 1px 9px), linear-gradient(270deg, rgba(255, 255, 255, 0.16), transparent 30%, rgba(0, 0, 0, 0.4)), linear-gradient(180deg, var(--wd-post), var(--wd-post2)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4), -5px 0 12px -3px rgba(0, 0, 0, 0.7); }
.vyc__post::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--vy-d) * -0.03); height: calc(var(--vy-d) * 0.03); border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--wd-top2), var(--wd-top)); clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%); }
.vyc__post::after { content: ""; position: absolute; left: -1px; right: -1px; top: calc(var(--vy-d) * 0.1); height: calc(var(--vy-d) * 0.075); border-radius: 2px; background: var(--wd-rivet) center / 10px 10px no-repeat, linear-gradient(180deg, #e3e6e8, #9aa0a5 42%, #5d6267); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.6); }
/* Le texte du bac, peint au pochoir sur la planche du milieu */
.vyc__text { display: block; max-width: 100%; padding: 0.55em 1.15em; border: 2px solid currentColor; border-radius: 3px; font: 800 clamp(11px, calc(var(--vy-d) * 0.056), 16px)/1.2 var(--sans); letter-spacing: 0.28em; text-align: center; text-transform: uppercase; color: var(--wd-ink); background: rgba(0, 0, 0, 0.2); box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.16), 0 1px 0 rgba(255, 255, 255, 0.1); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vyc[data-wood="gold"] .vyc__text { background: rgba(255, 255, 255, 0.14); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); }
/* Onglets de séparation : posés sur le rebord de la façade */
.vyc__tabs { position: absolute; z-index: 31; left: var(--vy-pad); right: var(--vy-pad); bottom: calc(var(--vy-foot) + var(--vy-fh) - 12px); display: flex; justify-content: center; gap: 10px; padding: 0 2%; }
.vyc__tab { flex: 1 1 0; max-width: 190px; min-width: 0; padding: 9px 8px 10px; border: 0; border-radius: 8px 8px 0 0; background: color-mix(in srgb, var(--c) 82%, #000); color: #fff; font: 700 12.5px/1.2 var(--sans); text-align: center; text-decoration: none; cursor: pointer; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); transition: transform 0.3s, filter 0.3s; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vyc__tab:hover, .vyc__tab:focus-visible { transform: translateY(-4px); }
.vyc__tab.is-sel { transform: translateY(-8px); background: var(--c); filter: brightness(1.15); }

/* ================= Le crossfader ================= */
.vyf { padding: 56px 0 64px; }
.vyf__stage { position: relative; max-width: 980px; margin: 0 auto; aspect-ratio: var(--vy-ratio, 16 / 9); overflow: hidden; border-radius: 14px; background: #000; box-shadow: 0 40px 80px -40px #000, 0 0 0 1px rgba(245, 239, 228, 0.12); }
.vyf__layer { position: absolute; inset: 0; will-change: opacity, clip-path; }
.vyf:not(.is-live) .vyf__layer:not(:first-child) { display: none; }
.vyf__shade { position: absolute; inset: 0; z-index: 20; pointer-events: none; background: linear-gradient(180deg, rgba(14, 12, 10, 0) 45%, rgba(14, 12, 10, 0.85)); }
.vyf__open { position: absolute; inset: 0; z-index: 21; display: flex; align-items: flex-end; text-decoration: none; color: #fff; }
.vyf__open:focus-visible { outline: 3px solid var(--gold); outline-offset: -6px; }
.vyf__title { display: block; padding: 0 28px 22px; pointer-events: none; }
.vyf__title b { display: block; font-family: var(--serif); font-weight: 500; font-size: clamp(22px, 3.4vw, 40px); line-height: 1.15; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6); }
.vyf__title i { display: block; width: 64px; height: 4px; margin-bottom: 12px; border-radius: 2px; background: var(--c, #C9A24B); box-shadow: 0 0 16px var(--c, #C9A24B); }
.vyf:not(.is-live) .vyf__console, .vyf:not(.is-live) .vyf__open { display: none; }
.vyf__console { max-width: 980px; margin: 18px auto 0; padding: 20px 24px; border-radius: 14px; background: linear-gradient(180deg, #2a241e, #16120f); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 24px 40px -24px #000; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 26px; align-items: center; }
.vyf__cues { display: grid; grid-template-columns: repeat(2, 44px); gap: 10px; }
.vyf__cue { width: 44px; height: 44px; padding: 0; border-radius: 10px; border: 0; cursor: pointer; background: color-mix(in srgb, var(--c) 55%, #000); color: #fff; font: 800 15px var(--sans); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.35); transition: transform 0.15s, filter 0.2s; }
.vyf__cue:active { transform: translateY(2px); box-shadow: none; }
.vyf__cue.is-on { background: var(--c); filter: brightness(1.2); box-shadow: 0 0 22px -2px var(--c), inset 0 -4px 0 rgba(0, 0, 0, 0.3); }
.vyf__slider { position: relative; height: 54px; margin: 0 19px; touch-action: pan-y; cursor: grab; }
.vyf__track { position: absolute; left: 0; right: 0; top: 50%; height: 12px; margin-top: -6px; border-radius: 99px; background: #070605; box-shadow: inset 0 2px 5px #000, 0 1px 0 rgba(255, 255, 255, 0.1); }
.vyf__notch { position: absolute; top: 50%; width: 3px; height: 26px; margin: -13px 0 0 -1.5px; border-radius: 2px; background: var(--c); opacity: 0.85; }
.vyf__notch span { position: absolute; top: 34px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(245, 239, 228, 0.66); }
.vyf__notch.is-first span { left: 0; transform: none; }
.vyf__notch.is-last span { left: auto; right: 0; transform: none; }
.vyf__knob { position: absolute; top: 50%; width: 38px; height: 54px; margin: -27px 0 0 -19px; border-radius: 7px; background: linear-gradient(90deg, #d9d4ca, #fbf7ee 45%, #b5afa3); box-shadow: 0 8px 14px -4px #000, inset 0 0 0 1px rgba(0, 0, 0, 0.25); }
.vyf__knob::before { content: ""; position: absolute; left: 50%; top: 8px; bottom: 8px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: #1c1916; }
.vyf__knob:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.vyf__vu { display: flex; align-items: flex-end; gap: 3px; height: 44px; }
.vyf__vu i { width: 5px; height: 100%; border-radius: 2px; background: linear-gradient(0deg, #3fa66a 0 55%, #d9b94a 55% 80%, #c8423a 80%); transform-origin: 50% 100%; animation: vyf-vu 0.9s ease-in-out infinite alternate; }
@keyframes vyf-vu { from { transform: scaleY(0.25); } to { transform: scaleY(1); } }
.vyf[data-vu="off"] .vyf__vu { display: none; }
.vyf[data-vu="off"] .vyf__console { grid-template-columns: auto minmax(0, 1fr); }
.vyf__info { max-width: 980px; margin: 26px auto 0; }
.vyf .vyp { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 8px 40px; align-items: start; }
.vyf .vyp > * { grid-column: 1; }
.vyf .vyp .vyp__list, .vyf .vyp .vyp__more { grid-column: 2; }
.vyf .vyp .vyp__list { grid-row: 2 / span 3; margin: 0; }
.vyf .vyp .vyp__more { justify-self: start; margin-top: 8px; }
.vyf:not(.is-live) .vyf__info .vyp { display: grid; }

/* ---------- Tablette et téléphone ---------- */
@media (max-width: 1000px) {
	.vyc__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
	.vyf .vyp { grid-template-columns: minmax(0, 1fr); }
	.vyf .vyp > *, .vyf .vyp .vyp__list, .vyf .vyp .vyp__more { grid-column: 1; grid-row: auto; }
	.vyf__console { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.vyf[data-vu="off"] .vyf__console { grid-template-columns: minmax(0, 1fr); }
	.vyf__cues { grid-template-columns: repeat(4, 44px); justify-content: center; }
	.vyf__vu { display: none; }
}
@media (max-width: 700px) {
	.vyc { --vy-d: min(var(--vy-size, 260px), 46vw); padding: 36px 0 52px; }
	.vyf { padding: 32px 0 48px; }
	.vyf__stage { aspect-ratio: 16 / 9; }
	.vyf__title { padding: 0 16px 14px; }
	.vyf__console { padding: 16px 14px 18px; }
	.vyf__notch span { display: none; }
	.vyf__slider { height: 44px; }
	.vyc__tab { font-size: 10.5px; padding: 8px 4px 9px; }
	.vyp__title { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
	.vyd__glint, .vyf__vu i { animation: none !important; }
	.vyc__slot, .vyc__tab { transition: none; }
	.is-live .vyp.is-on { animation: none !important; }
}