/* MAW R4 (30/10/2026) — film d'ouverture : 6 s, barre d'adresse, scène en direct, écran final avec action, mobile un écran à la fois. */
@media(prefers-reduced-motion:no-preference){
#maw-opening.is-playing .film-laptop,#maw-opening.is-playing .film-phone,#maw-opening.is-playing .film-tablet,#maw-opening.is-playing .device-caption{animation-duration:6s}
}
/* Barre d'adresse du site */
.film-url{height:16px;display:flex;align-items:center;justify-content:center;gap:5px;background:#e9edf1;border-bottom:1px solid #d6dde3;font-size:7px;color:#36536a;letter-spacing:.02em}
.film-url i{width:6px;height:7px;border:1px solid #6f8798;border-radius:2px 2px 1px 1px;position:relative}
.film-url i:before{content:'';position:absolute;left:0;right:0;top:-4px;height:4px;border:1px solid #6f8798;border-bottom:0;border-radius:4px 4px 0 0}
.film-url span{background:#fff;border-radius:5px;padding:2px 10px;font-weight:600}
.site-screen .site-cover{height:144px}
/* Scène en direct sur la tablette */
.film-screen-restaurant .dash-content{position:relative}
.film-live{position:absolute;right:10px;top:8px;display:flex;align-items:center;gap:7px;padding:7px 10px;background:#0e2c46;color:#fff;border-radius:8px;font-size:7px;line-height:1.45;box-shadow:0 8px 18px #0e2c4640;opacity:0;transform:translateY(-8px) scale(.96);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.9,.3,1.2);z-index:3}
.film-live b{display:block;font-size:8.5px;color:#f1d79f;font-weight:700}
.film-live i{width:7px;height:7px;border-radius:50%;background:#4cc38a;box-shadow:0 0 0 0 #4cc38a99}
#maw-opening[data-live="1"] .film-live{opacity:1;transform:none}
#maw-opening[data-live="1"] .film-live i{animation:film-live-dot 1.4s ease-out infinite}
@keyframes film-live-dot{0%{box-shadow:0 0 0 0 #4cc38a99}100%{box-shadow:0 0 0 7px #4cc38a00}}
.dash-summary b em,.dash-associate b em{font-style:normal;display:inline-block;transition:color .3s,transform .3s}
#maw-opening[data-live="1"] [data-film-count],#maw-opening[data-live="1"] [data-film-cash]{color:#1d7a50;transform:scale(1.08)}
/* Écran final */
.film-offer-zone{height:150px;min-height:150px}
.film-end{display:none;align-items:center;justify-content:center;gap:18px;margin-top:12px}
.film-cta{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:12px 22px;border-radius:99px;background:linear-gradient(180deg,#f5dca7,#e2bf7c);color:#10263f!important;font-weight:700;font-size:15px;text-decoration:none;box-shadow:0 10px 30px #e4c48933}
.film-cta span{font-size:17px}
.film-enter{display:inline-flex;align-items:center;min-height:44px;padding:8px 6px;color:#dfe8f0!important;font-size:14px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#e4c48999}
#maw-opening[data-phase=end] .film-offer{opacity:1;transform:none}
#maw-opening[data-phase=end] .film-promise{opacity:0;pointer-events:none}
#maw-opening[data-phase=end] .film-offer>p{display:none}
#maw-opening[data-phase=end] .film-price>strong{font-size:46px}
#maw-opening[data-phase=end] .film-price>strong span{font-size:22px}
#maw-opening[data-phase=end] .film-end{display:flex;animation:film-end-in .5s ease both}
#maw-opening[data-phase=end] .film-playback{visibility:hidden}
@keyframes film-end-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* Mobile : un écran à la fois, plus grand */
@media(max-width:640px){
.film-url{height:11px;font-size:5px;gap:3px}
.film-url i{width:4px;height:5px}
.film-url i:before{top:-3px;height:3px}
.film-url span{padding:1px 6px}
.site-screen .site-cover{height:94px}
.film-connections{display:none}
#maw-opening .film-device{animation:none!important;opacity:0;transition:opacity .45s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
#maw-opening .device-caption{animation:none!important;opacity:1;left:0!important;text-align:center!important;width:100%}
#maw-opening .film-laptop{left:77px;top:105px;transform:scale(1.42) translateY(6px)}
#maw-opening .film-phone{left:145px;top:49px;transform:scale(1.12) translateY(6px)}
#maw-opening .film-tablet{left:97px;top:102px;transform:scale(1.62) translateY(6px)}
#maw-opening[data-focus=site] .film-laptop{opacity:1;transform:scale(1.48)}
#maw-opening[data-focus=app] .film-phone{opacity:1;transform:scale(1.16)}
#maw-opening[data-focus=gestion] .film-tablet{opacity:1;transform:scale(1.7)}
.film-live{right:6px;top:5px;padding:5px 7px;font-size:4.5px;gap:5px}
.film-live b{font-size:5.5px}
.film-live i{width:5px;height:5px}
.film-offer-zone{height:125px;min-height:125px}
#maw-opening[data-phase=end] .film-offer-zone{height:170px;min-height:170px}
#maw-opening[data-phase=end] .film-price>strong{font-size:44px}
.film-end{flex-direction:column;gap:2px;margin-top:8px}
.film-cta{font-size:14px;padding:11px 20px}
.film-enter{font-size:13px;min-height:40px}
}
@media(max-height:680px) and (max-width:640px){
#maw-opening[data-phase=end] .film-offer-zone{height:150px;min-height:150px}
#maw-opening[data-phase=end] .film-price>strong{font-size:36px}
}
@media(min-width:641px) and (max-height:650px){
.film-offer-zone{height:110px;min-height:110px}
#maw-opening[data-phase=end] .film-price>strong{font-size:34px}
.film-end{margin-top:6px}
}
@media(prefers-reduced-motion:reduce){
.film-live{opacity:1;transform:none}
}

/* R5 performance : animations CSS natives (plus de défilement image par image via --film-offset) */
#maw-opening.is-playing .film-device,#maw-opening.is-playing .film-mascot,#maw-opening.is-playing .device-caption{animation-play-state:running;animation-delay:0ms}
#maw-opening.is-playing.is-paused .film-device,#maw-opening.is-playing.is-paused .film-mascot,#maw-opening.is-playing.is-paused .device-caption{animation-play-state:paused}
#maw-opening.is-playing[data-phase=end] .film-device,#maw-opening.is-playing[data-phase=end] .film-mascot,#maw-opening.is-playing[data-phase=end] .device-caption{animation-play-state:paused;animation-delay:-6000ms}