/* Approved hero composition, independent of the booking scene further down the page. */
.hero-overview{position:relative;width:min(100%,1100px);aspect-ratio:1000/940;margin:auto;overflow:visible;background:#fff}
.overview-stage{position:absolute;width:1000px;height:940px;transform:scale(var(--overview-fit,.5));transform-origin:0 0;isolation:isolate}
.overview-orbit{position:absolute;left:70px;top:46px;width:820px;height:710px;border:1px solid #f0f2f0;border-radius:50%;transform:rotate(-20deg);z-index:-1}
.overview-orbit:before,.overview-orbit:after{content:"";position:absolute;inset:11%;border:1px solid #f4f5f4;border-radius:50%}.overview-orbit:after{inset:23%}
.overview-element{position:absolute}.overview-element>img{width:100%;max-width:none;filter:drop-shadow(0 10px 10px #2525252b) drop-shadow(0 3px 3px #2525251c)}.overview-message-reply>img,.overview-tournament>img{filter:drop-shadow(0 18px 16px #25252538) drop-shadow(0 4px 4px #25252524)}.overview-club-creteil>img,.overview-club-casa>img{filter:drop-shadow(0 5px 6px #2525250f) drop-shadow(0 2px 2px #2525250a)}.overview-club-creteil{left:4px;top:22px;width:285px;transform:rotate(-6deg);z-index:2}.overview-club-casa{left:263px;top:0;width:270px;transform:rotate(4deg);z-index:2}
.overview-club-map{left:529px;top:96px;width:420px;transform:rotate(4deg);filter:saturate(.58);z-index:0}
.overview-message-invitation{left:242px;top:305px;width:485px;transform:rotate(-3deg);z-index:5}.overview-message-reply{left:322px;top:401px;width:440px;transform:rotate(2deg);z-index:6}
.overview-tournament{left:517px;top:561px;width:475px;transform:rotate(-4deg);z-index:4}
.overview-player{border-radius:50%;padding:4px;background:white;box-shadow:0 23px 33px -11px #25252570,0 6px 10px -2px #25252538;z-index:3}.overview-player>img{filter:none;border-radius:50%;aspect-ratio:1;object-fit:cover}.overview-player-a{left:48px;top:337px;width:100px;transform:rotate(4deg)}.overview-player-b{left:162px;top:316px;width:66px;transform:rotate(-6deg)}.overview-player-c{left:158px;top:410px;width:84px;transform:rotate(-5deg)}.overview-player-d{left:70px;top:462px;width:60px;transform:rotate(6deg)}
.overview-booking{left:90px;top:544px;width:377px;min-height:222px;border:1px solid #fff;border-radius:28px;padding:22px 24px 20px;background:linear-gradient(140deg,#fff,#fafbfa);box-shadow:0 24px 38px -17px #2525254f,0 7px 11px -5px #25252526;transform:rotate(3deg);z-index:3;filter:drop-shadow(0 18px 16px #25252538) drop-shadow(0 4px 4px #25252524)}
.overview-booking-header{display:flex;align-items:center;gap:10px}.overview-booking-header>img{width:29px;height:29px;object-fit:contain;border-radius:8px}.overview-booking-header>span{font-size:13px;font-weight:600;letter-spacing:-.2px}.overview-booking-header>small{margin-left:auto;color:#889084;font-size:10px}.overview-booking-title{display:block;font-size:21px;line-height:1.2;font-weight:550;letter-spacing:-.6px;margin-top:18px;margin-bottom:16px}.overview-slots{display:flex;gap:10px}.overview-slot{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:61px;border:1px solid #e4e8e5;border-radius:14px;background:white;box-shadow:0 6px 9px -7px #25252540,0 2px 3px -2px #2525251f}.overview-slot strong{font-size:19px;line-height:1;letter-spacing:-.6px;font-weight:600}.overview-slot span{font-size:10px;color:#8b9388}.overview-slot.overview-unavailable{background:#f6f7f6;border-color:#eff1ef;color:#b5bbb0}.overview-slot.overview-unavailable span{color:#b5bbb0}.overview-slot.overview-selected{background:#e1f7e9;border-color:#82d9a2;color:#185f32}.overview-slot.overview-selected span{color:#279b52}.overview-booking-foot{display:flex;align-items:center;justify-content:space-between;margin-top:18px;gap:10px}.overview-booking-foot>img{width:52px;height:auto;max-height:31px}.overview-booking-confirmed{display:flex;align-items:center;gap:7px;color:#218445;font-size:11px;font-weight:500}.overview-booking-confirmed>i{display:grid;place-items:center;width:21px;height:21px;border-radius:50%;background:#d5f4e1;font-size:12px;font-style:normal}

/* Use translate separately so the approved card rotations stay intact. */
.hero-overview .overview-element{animation:overview-float var(--overview-duration,11s) ease-in-out var(--overview-delay,-3s) infinite;--overview-travel:4px}
.hero-overview .overview-club-map{--overview-duration:13s;--overview-delay:-5s;--overview-travel:3px}
.hero-overview .overview-club-creteil{--overview-duration:10.5s;--overview-delay:-2s}
.hero-overview .overview-club-casa{--overview-duration:12s;--overview-delay:-5s}
.hero-overview .overview-message-invitation{--overview-duration:11s;--overview-delay:-4s;--overview-travel:3px}
.hero-overview .overview-message-reply{--overview-duration:10s;--overview-delay:-3s;--overview-travel:3px}
.hero-overview .overview-player{--overview-duration:12s;--overview-delay:-4s;--overview-travel:3px}
.hero-overview .overview-booking{--overview-duration:12s;--overview-delay:-3s;--overview-travel:3px}
.hero-overview .overview-tournament{--overview-duration:11.5s;--overview-delay:-5s;--overview-travel:3px}
@keyframes overview-float{0%,100%{translate:0 var(--overview-travel)}50%{translate:0 calc(-1 * var(--overview-travel))}}
.hero-overview:not(.is-in-view) .overview-element,
.motion-paused .hero-overview .overview-element,
.document-hidden .hero-overview .overview-element{animation-play-state:paused}
.hero:has(.hero-overview){min-height:860px}
.hero-art:has(.hero-overview) figcaption{margin-top:12px}
@media(max-width:700px){.hero:has(.hero-overview){min-height:0}.hero-overview{max-width:650px}}
@media(prefers-reduced-motion:reduce){.hero-overview .overview-element{animation:none}}
