/**
 * L'ATELIER — mixeur d'ambiance de Sonaë (page /atelier/). Portage du prototype demo/atelier-v2.html.
 * Dépend de site-v2.css (tokens, boutons, puces). Spécification : docs/ATELIER-VIDEOS-SPEC.md
 *
 * @package SamRelaxe
 * @version 11.1.0
 */
/* ═══════════════════════════════════════════════════════════════════════
   L'ATELIER v3 — épuré et profond.
   La scène occupe tout le cadre (lieu × variante : la vidéo suit le son).
   Une seule barre de commandes en verre : lecture · dix jetons · un curseur
   à la fois. Mélanges et lieux dans deux feuilles. Réglages derrière « ··· ».
   ═══════════════════════════════════════════════════════════════════════ */
:root { --at-rain: 0; --at-fire: 0; --at-thunder: 0; --at-wind: 0; --at-night: 0; --at-stream: 0; --at-music: 0; --at-px: 0px; --at-py: 0px;
  --at-glass: rgba(6, 15, 24, 0.55); --at-glass-2: rgba(6, 15, 24, 0.72); --at-hi: rgba(255, 244, 200, 0.10); --at-edge: rgba(255, 255, 255, 0.07); }
html, body.sr-atelier { height: 100%; }
body.sr-atelier { overflow: hidden; }
/* Le bandeau cookies du thème vit en bas à gauche : sur l'Atelier il couvrirait la barre → sous le menu. */
body.sr-atelier .sr-cookie-banner { bottom: auto; top: calc(var(--sr2-nav-h, 82px) + 12px); }
.at { position: fixed; inset: 0; }

/* ── La scène : trois plans de profondeur (média · grade · vignette) ── */
.at-scene { position: absolute; inset: 0; overflow: hidden; isolation: isolate; background: var(--void); }
.at-media { position: absolute; inset: -4%; transform: translate3d(var(--at-px), var(--at-py), 0); transition: transform .12s linear; will-change: transform; }
.at-art, .at-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.at-art { transition: opacity 1.8s ease, filter 2s ease; filter: brightness(calc(.78 + var(--at-fire) * .1)) saturate(calc(.95 + var(--at-stream) * .1)); }
.at-vid { opacity: 0; transition: opacity 2s ease; }
.at-vid.is-shown { opacity: 1; }
.at-scene.has-video .at-art { opacity: 0; }
.at-grade { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.at-grade--night { background: radial-gradient(90% 80% at 50% 35%, transparent 35%, rgba(4, 18, 44, .5) 100%); opacity: var(--at-night); transition: opacity 2s ease; }
.at-grade--rain { background: linear-gradient(to bottom, rgba(120, 160, 200, .10), rgba(20, 40, 70, .25)); opacity: var(--at-rain); mix-blend-mode: multiply; transition: opacity 2s ease; }
.at-grade--fire { background: radial-gradient(50% 55% at 55% 78%, rgba(255, 160, 60, .42), transparent 70%); opacity: var(--at-fire); mix-blend-mode: screen; transition: opacity 1.5s ease; animation: at-flicker 3.4s ease-in-out infinite; }
@keyframes at-flicker { 0%, 100% { filter: brightness(1); } 35% { filter: brightness(1.12); } 60% { filter: brightness(.94); } }
.at-flash { position: absolute; inset: 0; z-index: 2; background: rgba(200, 220, 255, .85); opacity: 0; pointer-events: none; }
.at-flash.is-on { animation: at-flash .9s ease-out; }
@keyframes at-flash { 0% { opacity: 0; } 8% { opacity: calc(var(--at-thunder) * .5); } 20% { opacity: calc(var(--at-thunder) * .1); } 30% { opacity: calc(var(--at-thunder) * .36); } 100% { opacity: 0; } }
.at-vignette { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(125% 95% at 50% 42%, transparent 50%, rgba(2, 10, 14, .82) 100%), linear-gradient(to bottom, rgba(2, 10, 14, .45), transparent 22%, transparent 62%, rgba(2, 10, 14, .78)); }

/* ── Le titre : ce qu'on entend, en grand, rien d'autre ── */
.at-title { position: absolute; left: clamp(20px, 4.5vw, 64px); bottom: clamp(150px, 20vh, 190px); z-index: 4; max-width: 40ch; pointer-events: none; opacity: 0; transition: opacity 1.2s ease .4s; }
.at.is-in .at-title { opacity: 1; }
.at-title a { pointer-events: auto; }
.at-title__k { margin: 0 0 var(--sp-3); font-family: var(--font-heading); font-size: 11px; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--gold-soft); text-shadow: var(--sr2-ink-shadow); display: flex; gap: var(--sp-2); align-items: center; }
.at-title__k a { color: var(--gold-soft); }
.at-title__k i { font-style: normal; opacity: .55; }
.at-title__t { margin: 0; font-family: var(--font-display); font-weight: var(--weight-medium); font-size: clamp(2.6rem, 5.4vw, 5rem); line-height: .98; letter-spacing: var(--tracking-tight); color: var(--snow); text-shadow: var(--sr2-ink-shadow); text-wrap: balance; }
.at-title__t em { font-style: italic; color: var(--gold-soft); }
.at-title__s { margin: var(--sp-3) 0 0; font-size: var(--text-sm); color: var(--text-soft); text-shadow: var(--sr2-ink-shadow); max-width: 52ch; }

/* ── La barre : verre profond, une seule ligne ── */
.at-dock { position: absolute; left: 50%; bottom: clamp(18px, 3.5vh, 36px); transform: translateX(-50%); z-index: 6; width: min(1040px, calc(100% - 2 * clamp(16px, 3vw, 48px))); border-radius: 26px; background: linear-gradient(180deg, rgba(255, 255, 255, .035), transparent 40%), var(--at-glass); backdrop-filter: blur(28px) saturate(1.25); -webkit-backdrop-filter: blur(28px) saturate(1.25); border: 1px solid var(--at-edge); box-shadow: inset 0 1px 0 var(--at-hi), 0 30px 80px rgba(2, 10, 14, .65), 0 6px 18px rgba(2, 10, 14, .4); }
.at-dock__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-4); padding: 12px 14px; }
.at-play { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-gold); color: var(--sr2-gold-ink); box-shadow: 0 10px 26px rgba(200, 164, 93, .28), inset 0 1px 0 rgba(255, 255, 255, .45); transition: transform var(--t-fast) var(--sr2-ease); flex: none; }
.at-play:hover { transform: scale(1.04); }
.at-play svg { width: 22px; height: 22px; }
.at-play .ic-pause { display: none; } .at-play[aria-pressed="true"] .ic-pause { display: block; } .at-play[aria-pressed="true"] .ic-play { display: none; }
.at-tokens { display: flex; align-items: center; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 4px 2px; }
.at-tokens::-webkit-scrollbar { display: none; }
.at-tk { position: relative; width: 52px; height: 52px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--text-muted); --lv: 0; --p: 0; transition: color var(--t-fast), transform var(--t-fast) var(--sr2-ease); }
.at-tk::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: rgba(255, 255, 255, .03); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 -1px 0 rgba(0, 0, 0, .35); transition: background var(--t-fast), box-shadow .25s ease; }
.at-tk:hover { color: var(--text-soft); transform: translateY(-1px); }
.at-tk svg.ic { position: relative; width: 20px; height: 20px; }
.at-tk svg.ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.at-tk svg.ring circle { fill: none; stroke-width: 2; }
.at-tk svg.ring .bg { stroke: rgba(255, 255, 255, .07); }
.at-tk svg.ring .lv { stroke: var(--gold); stroke-linecap: round; stroke-dasharray: 151; stroke-dashoffset: calc(151 - 151 * var(--p)); transition: stroke-dashoffset .25s ease; opacity: 0; }
.at-tk.is-on { color: var(--gold-bright); }
.at-tk.is-on::before { background: rgba(200, 164, 93, .10); box-shadow: inset 0 1px 0 rgba(255, 244, 200, .18), 0 0 0 calc(var(--lv) * 9px) rgba(200, 164, 93, .10); }
.at-tk.is-on svg.ring .lv { opacity: 1; }
.at-tk.is-sel::before { background: rgba(200, 164, 93, .18); }
.at-tk.is-loading { animation: at-pulse 1s ease-in-out infinite; }
@keyframes at-pulse { 50% { opacity: .5; } }
.at-tk__lock { position: absolute; right: 4px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--gold); color: var(--sr2-gold-ink); display: none; place-items: center; }
.at-tk__lock svg { width: 8px; height: 8px; }
.at-tk.is-locked .at-tk__lock { display: grid; }
.at-dock__right { display: flex; align-items: center; gap: 4px; }
.at-ib { height: 44px; padding: 0 14px; border-radius: 22px; display: inline-flex; align-items: center; gap: 8px; color: var(--text-soft); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-wide); border: 1px solid transparent; transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast); white-space: nowrap; }
.at-ib:hover { color: var(--snow); background: rgba(255, 255, 255, .05); }
.at-ib[aria-expanded="true"], .at-ib[aria-pressed="true"] { color: var(--gold-bright); background: rgba(200, 164, 93, .12); border-color: rgba(200, 164, 93, .25); }
.at-ib svg { width: 17px; height: 17px; flex: none; }
.at-ib--icon { width: 44px; padding: 0; justify-content: center; }
/* le curseur unique */
.at-fader { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--sp-4); padding: 0 18px 14px 20px; }
.at-fader[hidden] { display: none; }
.at-fader__n { font-family: var(--font-display); font-size: var(--text-md); color: var(--snow); white-space: nowrap; }
.at-fader__n small { display: block; font-family: var(--font-body); font-size: 11px; color: var(--text-muted); letter-spacing: var(--tracking-wide); }
.at-fader__v { font-family: var(--font-display); font-variant-numeric: tabular-nums; color: var(--gold-soft); font-size: var(--text-md); min-width: 3ch; text-align: right; }
input[type="range"].at-range { -webkit-appearance: none; appearance: none; width: 100%; height: 26px; background: transparent; min-width: 0; margin: 0; }
input[type="range"].at-range::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(to right, var(--gold) var(--p, 50%), rgba(255, 255, 255, .10) var(--p, 50%)); }
input[type="range"].at-range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7.5px; border-radius: 50%; background: var(--gold-bright); border: 2px solid rgba(2, 10, 14, .9); box-shadow: 0 2px 8px rgba(2, 10, 14, .6), 0 0 0 1px rgba(200, 164, 93, .35); cursor: pointer; }
input[type="range"].at-range::-moz-range-track { height: 3px; background: rgba(255, 255, 255, .10); }
input[type="range"].at-range::-moz-range-progress { height: 3px; background: var(--gold); }
input[type="range"].at-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--gold-bright); border: 2px solid rgba(2, 10, 14, .9); }
.at-fader__off { height: 36px; padding: 0 12px; border-radius: 18px; font-size: var(--text-xs); color: var(--text-muted); border: 1px solid var(--at-edge); white-space: nowrap; }
.at-fader__off:hover { color: var(--snow); border-color: rgba(255, 255, 255, .2); }
.at-meta { position: absolute; right: 18px; top: -30px; font-size: 11px; color: var(--text-soft); letter-spacing: var(--tracking-wide); text-shadow: var(--sr2-ink-shadow); display: flex; gap: var(--sp-2); align-items: center; }
.at-meta b { font-family: var(--font-display); font-variant-numeric: tabular-nums; color: var(--gold-soft); font-weight: var(--weight-medium); font-size: var(--text-sm); }

/* ── Feuilles (mélanges · lieux · réglages) ── */
.at-sheet { position: absolute; left: 50%; bottom: clamp(104px, 14vh, 132px); transform: translateX(-50%) translateY(10px); z-index: 7; width: min(760px, calc(100% - 2 * clamp(16px, 3vw, 48px))); max-height: min(520px, 62vh); overflow: auto; border-radius: 22px; background: linear-gradient(180deg, rgba(255, 255, 255, .03), transparent 30%), var(--at-glass-2); backdrop-filter: blur(30px) saturate(1.2); -webkit-backdrop-filter: blur(30px) saturate(1.2); border: 1px solid var(--at-edge); box-shadow: inset 0 1px 0 var(--at-hi), 0 30px 80px rgba(2, 10, 14, .7); opacity: 0; pointer-events: none; transition: opacity var(--t-normal), transform var(--t-normal) var(--sr2-ease); padding: var(--sp-5) var(--sp-6) var(--sp-6); scrollbar-width: thin; scrollbar-color: var(--gold-25) transparent; }
.at-sheet.is-open { opacity: 1; pointer-events: auto; transform: translateX(-50%); }
.at-sheet__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.at-sheet__head p { margin: 0; font-size: var(--text-sm); color: var(--text-muted); }
.at-pre { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--sp-4); padding: 12px 14px; border-radius: 14px; text-align: left; border: 1px solid transparent; transition: background var(--t-fast), border-color var(--t-fast); }
.at-pre:hover { background: rgba(255, 255, 255, .04); }
.at-pre[aria-pressed="true"] { border-color: rgba(200, 164, 93, .35); background: rgba(200, 164, 93, .08); }
.at-pre__n { font-family: var(--font-display); font-size: var(--text-lg); color: var(--snow); line-height: 1.15; }
.at-pre__s { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }
.at-pre__dots { display: flex; gap: 4px; }
.at-pre__dots i { width: 16px; height: 3px; border-radius: 2px; background: var(--gold); opacity: .75; }
.at-lieux { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--sp-2); }
.at-lieu { display: grid; gap: 6px; text-align: left; border-radius: 12px; padding: 4px; border: 1px solid transparent; transition: border-color var(--t-fast); }
.at-lieu:hover { border-color: var(--at-edge); }
.at-lieu[aria-pressed="true"] { border-color: rgba(200, 164, 93, .6); }
.at-lieu__img { position: relative; aspect-ratio: 16 / 10; border-radius: 9px; overflow: hidden; background: var(--abyss); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.at-lieu__img img { width: 100%; height: 100%; object-fit: cover; }
.at-lieu__tag { position: absolute; left: 6px; top: 6px; font-family: var(--font-heading); font-size: 9px; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--snow); background: rgba(2, 10, 14, .6); padding: 2px 6px; border-radius: 4px; }
.at-lieu__n { font-family: var(--font-display); font-size: var(--text-base); color: var(--snow); line-height: 1.1; padding: 0 4px; }
.at-lieu__s { font-size: 11px; color: var(--text-muted); padding: 0 4px 2px; }
.at-set { display: grid; gap: var(--sp-4); }
.at-set__row { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: var(--sp-4); }
.at-set__k { font-family: var(--font-heading); font-size: 10px; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--text-muted); }
.at-toggle { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 36px; padding: 0 var(--sp-3) 0 var(--sp-2); border-radius: var(--r-pill); border: 1px solid var(--at-edge); font-size: var(--text-xs); color: var(--text-soft); }
.at-toggle i { width: 28px; height: 16px; border-radius: 8px; background: rgba(255, 255, 255, .12); position: relative; transition: background var(--t-fast); }
.at-toggle i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--text-soft); transition: transform var(--t-fast) var(--sr2-ease), background var(--t-fast); }
.at-toggle[aria-pressed="true"] i { background: var(--gold); } .at-toggle[aria-pressed="true"] i::after { transform: translateX(12px); background: var(--sr2-gold-ink); }
.at-set .sr2-btn { min-height: 40px; padding: 0 var(--sp-4); font-size: var(--text-xs); }

/* ── Toast ── */
.at-toast { position: absolute; left: 50%; bottom: clamp(104px, 14vh, 132px); transform: translateX(-50%) translateY(6px); z-index: 8; padding: 10px 16px; border-radius: 999px; background: var(--at-glass-2); backdrop-filter: blur(16px); border: 1px solid var(--at-edge); color: var(--text-main); font-size: var(--text-sm); opacity: 0; pointer-events: none; transition: opacity var(--t-normal), transform var(--t-normal) var(--sr2-ease); max-width: min(560px, 90%); text-align: center; }
.at-toast.is-shown { opacity: 1; transform: translateX(-50%); }

/* ── Entrée · respiration · Cercle ── */
.at-gate { position: absolute; inset: 0; z-index: 9; display: grid; place-items: center; background: rgba(2, 10, 14, .38); backdrop-filter: blur(3px); transition: opacity .9s ease; }
.at-gate.is-gone { opacity: 0; pointer-events: none; }
.at-gate__card { text-align: center; padding: var(--sp-8); max-width: 520px; }
.at-gate__card h1 { margin: var(--sp-3) 0 0; font-family: var(--font-display); font-weight: var(--weight-medium); font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1; color: var(--snow); text-shadow: var(--sr2-ink-shadow); }
.at-gate__card h1 em { font-style: italic; color: var(--gold-soft); }
.at-gate__card p { color: var(--text-soft); margin: var(--sp-4) 0 var(--sp-6); text-shadow: var(--sr2-ink-shadow); max-width: 40ch; margin-inline: auto; }
.at-breath { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; pointer-events: none; opacity: 0; transition: opacity 1s ease; }
.at-breath.is-on { opacity: 1; pointer-events: auto; }
.at-breath__ring { width: min(46vh, 60vw); aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(200, 164, 93, .4); display: grid; place-items: center; background: radial-gradient(circle, rgba(200, 164, 93, .14), transparent 70%); transform: scale(.6); }
.at-breath.is-on .at-breath__ring { animation: at-breathe 11s ease-in-out infinite; }
@keyframes at-breathe { 0% { transform: scale(.6); } 50% { transform: scale(1); } 100% { transform: scale(.6); } }
.at-breath__word { font-family: var(--font-display); font-size: var(--text-h3); color: var(--snow); text-shadow: var(--sr2-ink-shadow); }
.at-breath__close { position: absolute; top: calc(var(--sr2-nav-h) + var(--sp-4)); right: var(--sp-6); }
.at-cercle { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; background: rgba(2, 10, 14, .62); backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity .4s ease; padding: var(--sp-6); }
.at-cercle.is-open { opacity: 1; pointer-events: auto; }
.at-cercle__card { width: min(560px, 100%); padding: var(--sp-8); border-radius: 24px; background: linear-gradient(180deg, rgba(255, 255, 255, .03), transparent 30%), var(--abyss); border: 1px solid rgba(200, 164, 93, .25); box-shadow: inset 0 1px 0 var(--at-hi), var(--shadow-xl); }
.at-cercle__card ul { margin: var(--sp-5) 0 0; padding: 0; list-style: none; display: grid; gap: var(--sp-2); color: var(--text-soft); }
.at-cercle__card li::before { content: "✦"; color: var(--gold); margin-right: var(--sp-2); }
.at-cercle__form { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2); margin-top: var(--sp-6); }
.at-cercle__small { font-size: var(--text-xs); color: var(--text-muted); margin: var(--sp-3) 0 0; }
.at-cercle__close { margin-top: var(--sp-4); }

/* ── Mobile ── */
@media (max-width: 860px) {
  .at-title { left: var(--sp-5); right: var(--sp-5); bottom: auto; top: calc(var(--sr2-nav-h) + var(--sp-4)); max-width: none; }
  .at-title__t { font-size: clamp(2.2rem, 9vw, 3.2rem); }
  .at-title__s { display: none; }
  .at-dock { width: calc(100% - 2 * var(--sp-3)); bottom: calc(var(--sp-3) + env(safe-area-inset-bottom)); border-radius: 22px; }
  .at-dock__row { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "play right" "tokens tokens"; row-gap: 8px; padding: 10px 12px 12px; }
  .at-play { grid-area: play; width: 48px; height: 48px; }
  .at-dock__right { grid-area: right; justify-content: flex-end; }
  .at-tokens { grid-area: tokens; }
  .at-ib span { display: none; }
  .at-ib { width: 44px; padding: 0; justify-content: center; }
  .at-fader { grid-template-columns: minmax(0, 1fr) auto; padding: 0 14px 12px; }
  .at-fader__n { grid-column: 1 / -1; }
  .at-meta { position: static; justify-content: flex-end; margin: 0 14px 6px; }
  .at-sheet { bottom: calc(150px + env(safe-area-inset-bottom)); width: calc(100% - 2 * var(--sp-3)); max-height: 56vh; padding: var(--sp-4); }
  .at-toast { bottom: calc(150px + env(safe-area-inset-bottom)); }
  .at-set__row { grid-template-columns: 1fr; }
  .at-cercle__form { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .at-grade--fire, .at-breath.is-on .at-breath__ring, .at-flash.is-on { animation: none; } .at-media { transition: none; } }