/* Next Flow · scène 3D animée (vitrine) : salle, salon, atelier, studio */
.s3d { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1 / 0.92; margin: 0 auto; perspective: 1200px; perspective-origin: 50% 28%; user-select: none; }
.s3d-floor { position: absolute; left: 6%; right: 6%; top: 14%; aspect-ratio: 4 / 3; border-radius: 26px; transform-style: preserve-3d; transform: rotateX(56deg) rotateZ(-30deg); animation: s3dSway 14s ease-in-out infinite;
  background: linear-gradient(rgba(245,244,240,.05) 1px, transparent 1px) 0 0 / 8.333% 11.11%, linear-gradient(90deg, rgba(245,244,240,.05) 1px, transparent 1px) 0 0 / 8.333% 11.11%, radial-gradient(120% 90% at 30% 20%, #1C2C42, #0E1A29);
  border: 1px solid rgba(245,244,240,.14); box-shadow: 0 60px 80px rgba(0,0,0,.5), 0 0 120px rgba(184,93,67,.12); }
.s3d[data-kind="garage"] .s3d-floor { background: linear-gradient(90deg, transparent 49.6%, rgba(232,185,49,.35) 49.6% 50.4%, transparent 50.4%) 0 0 / 30% 100%, radial-gradient(120% 90% at 30% 20%, #2A3138, #171C22); }
.s3d[data-kind="salon"] .s3d-floor { background: repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 18px, transparent 18px 36px), radial-gradient(120% 90% at 30% 20%, #3A2A24, #1E1714); }
.s3d[data-kind="coach"] .s3d-floor { background: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 14px, transparent 14px 28px), radial-gradient(120% 90% at 30% 20%, #2D2A22, #18160F); }
@keyframes s3dSway { 0%, 100% { transform: rotateX(56deg) rotateZ(-34deg); } 50% { transform: rotateX(52deg) rotateZ(-24deg); } }
.s3d-t { position: absolute; transform: translate(-50%, -50%); transform-style: preserve-3d; }
.s3d-t .l1, .s3d-t .l2, .s3d-t .top { position: absolute; inset: 0; border-radius: 10px; transition: background .5s, box-shadow .5s; }
.s3d-t.round .l1, .s3d-t.round .l2, .s3d-t.round .top, .s3d-t.bowl .l1, .s3d-t.bowl .l2, .s3d-t.bowl .top { border-radius: 50%; }
.s3d-t .l1 { transform: translateZ(4px); background: #142134; }
.s3d-t .l2 { transform: translateZ(8px); background: #1A2A40; }
.s3d-t .top { transform: translateZ(12px); background: linear-gradient(160deg, #34485F, #26384D); border: 1px solid rgba(245,244,240,.18); display: grid; place-items: center; font: 600 11px/1.1 'JetBrains Mono', ui-monospace, monospace; color: #F5F4F0; text-align: center; }
.s3d-t.booked .l1 { background: #5E2B1E; } .s3d-t.booked .l2 { background: #7E3B29; }
.s3d-t.booked .top { background: linear-gradient(160deg, #E39A80, #B85D43); color: #0B1521; border-color: rgba(255,255,255,.3); }
.s3d-t.seated .l1 { background: #2C5A3D; } .s3d-t.seated .l2 { background: #3D774F; }
.s3d-t.seated .top { background: linear-gradient(160deg, #9EDDB4, #5FAE7C); color: #0B1521; border-color: rgba(255,255,255,.3); }
.s3d-t.pop .top { animation: s3dPop .9s ease-out; }
@keyframes s3dPop { 0% { transform: translateZ(12px); box-shadow: 0 0 0 0 rgba(227,154,128,.9); } 30% { transform: translateZ(30px); } 100% { transform: translateZ(12px); box-shadow: 0 0 0 26px rgba(227,154,128,0); } }
.s3d-t .ch { position: absolute; width: 8px; height: 8px; border-radius: 50%; transform: translate(-50%, -50%) translateZ(1px); background: rgba(245,244,240,.22); }
.s3d-t .tag { position: absolute; left: 50%; bottom: 50%; transform-origin: 50% 100%; transform: translateX(-50%) translateZ(28px) rotateZ(30deg) rotateX(-56deg); white-space: nowrap; font: 500 10px/1 system-ui, -apple-system, sans-serif; color: #F5F4F0; background: rgba(11,21,33,.9); border: 1px solid rgba(245,244,240,.16); padding: 4px 7px; border-radius: 8px; opacity: 0; transition: opacity .4s; pointer-events: none; }
.s3d-t .tag b { font-family: 'JetBrains Mono', ui-monospace, monospace; color: #E39A80; font-weight: 600; }
.s3d-t.booked .tag, .s3d-t.seated .tag { opacity: 1; }
.s3d-t.lift .top::before, .s3d-t.lift .top::after { content: ''; position: absolute; top: 6%; bottom: 6%; width: 14%; border-radius: 4px; background: repeating-linear-gradient(45deg, #E8B931 0 5px, #2A2A2A 5px 10px); opacity: .85; }
.s3d-t.lift .top::before { left: 8%; } .s3d-t.lift .top::after { right: 8%; }
.s3d-t.zone .l1, .s3d-t.zone .l2 { display: none; }
.s3d-t.zone .top { background: rgba(245,244,240,.05) !important; border: 1.5px dashed rgba(245,244,240,.35); color: #F5F4F0 !important; }
.s3d-t.zone.booked .top { border-color: #E39A80; background: rgba(184,93,67,.2) !important; }
.s3d-t.chair .top::before { content: ''; position: absolute; left: 12%; right: 12%; top: 7%; height: 24%; border-radius: 6px; background: rgba(11,21,33,.35); }
.s3d-t.van .top::before { content: ''; position: absolute; left: 8%; right: 8%; top: 4%; height: 26%; border-radius: 10px 10px 4px 4px; background: rgba(11,21,33,.45); }
.s3d-t.room .top { background-image: radial-gradient(circle, rgba(11,21,33,.28) 22%, transparent 24%), linear-gradient(160deg, #34485F, #26384D); background-size: 25% 33%, auto; }
.s3d-t.room.booked .top { background-image: radial-gradient(circle, rgba(11,21,33,.25) 22%, transparent 24%), linear-gradient(160deg, #E39A80, #B85D43); }
/* Léa + appel entrant */
.s3d-lea { position: absolute; left: 4%; top: 2%; display: flex; align-items: center; gap: 10px; z-index: 3; }
.s3d-orb { width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #F2B9A4 0%, #E39A80 18%, #B85D43 56%, #5A2618 100%); box-shadow: 0 0 30px rgba(184,93,67,.55); position: relative; }
.s3d-orb::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(227,154,128,.6); opacity: 0; }
.s3d.ringing .s3d-orb::after { animation: s3dRing 1s ease-out infinite; }
@keyframes s3dRing { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
.s3d-bubble { font: 500 12.5px/1.35 system-ui, -apple-system, sans-serif; color: #F5F4F0; background: rgba(11,21,33,.92); border: 1px solid rgba(245,244,240,.16); border-radius: 14px; padding: 8px 12px; max-width: 250px; opacity: 0; transform: translateY(4px); transition: opacity .35s, transform .35s; }
.s3d-bubble.on { opacity: 1; transform: none; }
.s3d-bubble small { display: block; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #E39A80; margin-bottom: 2px; }
.s3d-toast { position: absolute; left: 50%; bottom: 2%; transform: translate(-50%, 12px); display: flex; align-items: center; gap: 10px; font: 500 12.5px/1.35 system-ui, -apple-system, sans-serif; color: #F5F4F0; background: rgba(16,29,44,.95); border: 1px solid rgba(245,244,240,.14); border-radius: 16px; padding: 10px 14px; box-shadow: 0 16px 40px rgba(0,0,0,.45); opacity: 0; transition: opacity .4s, transform .4s; white-space: nowrap; z-index: 3; }
.s3d-toast.on { opacity: 1; transform: translate(-50%, 0); }
.s3d-toast i { width: 26px; height: 26px; border-radius: 50%; background: #B85D43; display: grid; place-items: center; color: #fff; font-style: normal; font-size: 13px; }
.s3d-toast b { display: block; font-weight: 700; }
.s3d-toast span { color: #C9D1D9; font-size: 11.5px; }
.s3d-legend { position: absolute; right: 3%; top: 4%; display: flex; flex-direction: column; gap: 4px; font: 500 10.5px/1.2 system-ui, -apple-system, sans-serif; color: #C9D1D9; z-index: 3; }
.s3d-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
@media (max-width: 520px) { .s3d-t .tag { font-size: 9px; } .s3d-bubble { max-width: 190px; font-size: 11.5px; } .s3d-legend { display: none; } }
@media (prefers-reduced-motion: reduce) { .s3d-floor { animation: none; } .s3d-t.pop .top, .s3d.ringing .s3d-orb::after { animation: none; } }