/* =========================================================
   BOUCLE « ATELIER » — clip au travail (section #atelier)
   Chargée uniquement par index.html, après night.css.
   ========================================================= */
#atelier.atelier{padding:64px 0 72px}
.atelier-in{
  display:grid;
  grid-template-columns:minmax(0,min(360px,34vw)) minmax(0,1fr);
  gap:clamp(24px,4vw,58px);
  align-items:center;
}
.atelier-media{
  position:relative;margin:0;padding:0;
  border:1px solid var(--line);border-radius:16px;
  overflow:hidden;background:#000;
  box-shadow:0 0 34px rgba(255,58,212,.26),0 0 90px rgba(255,58,212,.10);
  transform:rotate(-1.1deg);
}
.atelier-video{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;background:#000}

.atelier-tag{
  position:absolute;left:10px;bottom:10px;z-index:2;
  font-family:'Space Mono',monospace;font-size:.66rem;font-weight:700;
  text-transform:uppercase;letter-spacing:1.6px;
  background:var(--neon-yellow);color:var(--tx-on-neon);
  border-radius:5px;padding:4px 9px;transform:rotate(-2.5deg);
  box-shadow:0 0 16px rgba(255,233,74,.35);
}
.atelier-toggle{
  position:absolute;right:10px;top:10px;z-index:2;
  width:40px;height:40px;display:grid;place-items:center;padding:0;
  background:rgba(7,6,12,.70);color:var(--tx);
  border:1px solid rgba(53,230,255,.55);border-radius:50%;
  cursor:pointer;transition:transform .15s,box-shadow .2s,background .2s;
}
.atelier-toggle:hover{transform:scale(1.06);background:rgba(7,6,12,.9);box-shadow:0 0 18px rgba(53,230,255,.45)}
.atelier-toggle svg{width:15px;height:15px}
.atelier-toggle .ic-pause{display:none}
.atelier-toggle[aria-pressed="true"] .ic-pause{display:block}
.atelier-toggle[aria-pressed="true"] .ic-play{display:none}

.atelier-copy .sec-kicker{margin-bottom:14px}
.atelier-copy p{color:var(--tx-soft);font-weight:600;max-width:46ch;margin:14px 0 22px}
.atelier-copy .btn{margin-top:2px}
.atelier-note{
  display:block;margin-top:14px;
  font-family:'Space Mono',monospace;font-size:.76rem;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--tx-soft);
}

@media (max-width:860px){
  #atelier.atelier{padding:52px 0 58px}
  .atelier-in{grid-template-columns:1fr;gap:26px}
  .atelier-media{max-width:330px;transform:none}
}