/* STUDIO · avant/après à faire glisser et maquette, une bande de vidéos courtes, une vidéo large, des photos ; sans nom de client */
.studio { padding-top: var(--gap); text-align: center; }
.studio h2 { max-width: 22ch; margin: 14px auto 0; }
.studio__sub { max-width: 36rem; margin: 16px auto 44px; color: var(--soft); }
.studio img, .studio video { display: block; width: 100%; height: 100%; object-fit: cover; }
.studio figure, .reel, .wide, .ba { position: relative; overflow: hidden; border-radius: 16px; background: var(--tone); }

/* avant / après */
.studio__ba { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; align-items: stretch; }
.ba, .studio__maq { aspect-ratio: 4 / 5; }
.studio__note { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 0 28px 0 4px; text-align: left; }
.studio__note .studio__kicker { color: var(--violet); font-size: 14px; font-weight: 600; }
.studio__note h3 { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.15; letter-spacing: -0.025em; }
.studio__note p { color: var(--soft); }
.studio__drag { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; color: var(--ink) !important; font-weight: 600; font-size: 15px; }
.studio__drag svg { width: 20px; height: 20px; fill: none; stroke: var(--violet); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; animation: nudge 1.6s var(--ease) infinite; }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
.ba.is-demo .ba__before, .ba.is-demo .ba__handle { transition: clip-path 900ms var(--ease), left 900ms var(--ease); }
.ba { --pos: 50%; touch-action: pan-y; cursor: ew-resize; }
.ba > img, .ba__before img { position: absolute; inset: 0; }
.ba__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; pointer-events: none; }
.ba__handle svg { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 11px; border-radius: 50%; background: #fff; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; box-shadow: 0 6px 20px rgba(0, 0, 0, .2); }
.ba__tag { position: absolute; top: 14px; padding: 5px 10px; border-radius: 6px; background: rgba(255, 255, 255, .92); color: var(--ink); font-size: 13px; font-weight: 600; pointer-events: none; z-index: 2; }
.ba__tag--l { left: 14px; }
.ba__tag--r { right: 14px; }
.ba__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }

/* vidéos courtes, format téléphone */
.reels { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.reel { aspect-ratio: 9 / 16; }
.reel:nth-child(2) { transition-delay: 60ms; }
.reel:nth-child(3) { transition-delay: 120ms; }
.reel:nth-child(4) { transition-delay: 180ms; }
.reel:nth-child(5) { transition-delay: 240ms; }
.reel:nth-child(6) { transition-delay: 300ms; }

/* une seule rangée : la vidéo large, puis trois photos en petit format */
.studio__wide { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 12px; margin-top: 12px; height: clamp(220px, 22vw, 300px); }

@media (max-width: 860px) {
  .studio__ba { grid-template-columns: 1fr 1fr; }
  .studio__note { grid-column: 1 / -1; padding: 8px 4px 12px; }
  .reels { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 46%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .reels::-webkit-scrollbar { display: none; }
  .reel { scroll-snap-align: start; }
  .studio__wide { grid-template-columns: repeat(3, 1fr); height: auto; }
  .wide { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
  .studio__wide figure { aspect-ratio: 4 / 5; }
}
@media (max-width: 600px) {
  .studio__ba { grid-template-columns: 1fr; }
  /* la maquette devient une vignette épinglée dans le coin du curseur avant/après : chantier, bureau fini et plan en une image */
  .studio__ba .ba, .studio__ba .studio__maq { grid-row: 2; grid-column: 1; }
  /* largeur explicite : avec un aspect-ratio, la grille ne l'étire pas et le curseur se calait sur la hauteur de la vignette */
  .studio__ba .ba { width: 100%; }
  .studio__ba .studio__maq { justify-self: end; align-self: end; width: 34%; margin: 0 12px 12px 0; z-index: 3; border: 3px solid #fff; border-radius: 12px; box-shadow: 0 12px 28px -12px rgba(21, 20, 27, .45); pointer-events: none; }
  .studio__maq .ba__tag { top: 6px; left: 6px; padding: 3px 6px; font-size: 10px; border-radius: 4px; }
}
@media (prefers-reduced-motion: reduce) { .studio__drag svg { animation: none; } }
@media (max-width: 760px) { .studio { text-align: left; } .studio h2 { margin: 12px 0 0; } .studio__sub { margin: 14px 0 32px; } }