/* Club 111 : invitation cinématique, proposition locale. */
#haut{background:#0d0d0f;overflow:clip}
#haut .container.grid{max-width:none;height:calc(100svh - 76px);min-height:650px;max-height:960px;padding:52px clamp(28px,5vw,88px) 120px;perspective:1300px;isolation:isolate}
#haut .txt{width:46%;max-width:570px;padding:28px 0;display:flex;flex-direction:column;gap:22px;transform-origin:0 50%;z-index:4;opacity:1;transform:none}
#haut h1.display{font-size:clamp(100px,10.6vw,168px);line-height:.85;letter-spacing:-.06em;text-shadow:0 3px 25px #0003}
#haut .lede{font-size:clamp(15px,1.35vw,18px);max-width:470px;line-height:1.65}
#haut .ctas{display:flex;flex-wrap:wrap;gap:12px}
#haut .affiche{z-index:0;pointer-events:none;overflow:hidden}
#haut .affiche>img{inset:0;width:100%;height:100%;object-fit:cover;object-position:65% 54%;opacity:1;will-change:transform}
#haut .affiche:after{background:linear-gradient(90deg,#0d0d0fef 0%,#0d0d0fd9 27%,#0d0d0f40 65%,#0d0d0f08),linear-gradient(0deg,#0d0d0f 0%,transparent 38%);transition:none}
#haut .affiche>.tag{top:28px;right:40px}
#haut .affiche-txt{pointer-events:auto;bottom:24px;left:5vw;right:5vw;grid-template-columns:1fr 1.4fr 1fr;gap:25px}
#haut .invitation{position:absolute;right:6vw;bottom:145px;z-index:3;width:270px;padding:25px 28px;background:linear-gradient(125deg,#eee0b5,#b48a44);color:#0d0d0f;box-shadow:0 22px 65px #0008;border:1px solid #f6e3b5;transform:rotate(-8deg);border-radius:3px;overflow:hidden;pointer-events:none}
#haut .invitation:after{content:'';position:absolute;inset:-100%;background:linear-gradient(110deg,transparent 40%,#fff8 49%,transparent 57%);animation:clubGlint 5s ease-in-out infinite}
#haut .invitation span{display:block;font:600 10px var(--narrow);letter-spacing:.22em;text-transform:uppercase}
#haut .invitation strong{display:block;font:500 49px/1.1 'Cormorant Garamond',Georgia,serif;margin:15px 0 22px}
#haut .invitation small{font:600 9px var(--narrow);letter-spacing:.18em;text-transform:uppercase;border-top:1px solid #7d613055;display:block;padding-top:12px}
#haut .hero-door{position:absolute;inset:0 50% 0 0;background:#0d0d0f;z-index:8;pointer-events:none;border-right:1px solid #d4b577;transform-origin:left}
#haut .hero-door.right{inset:0 0 0 50%;border:0;border-left:1px solid #d4b577;transform-origin:right}
#haut .hero-progress{position:absolute;bottom:0;left:0;height:3px;width:100%;background:#d4b577;transform:scaleX(0);transform-origin:left;z-index:5}
@keyframes clubGlint{0%,55%{transform:translateX(-35%)}100%{transform:translateX(35%)}}
@media(max-width:900px){#haut .container.grid{height:auto;min-height:850px;padding:38px 26px 235px}#haut .txt{width:100%;max-width:560px;padding:0;gap:18px}#haut h1.display{font-size:105px}#haut .affiche>img{object-position:68% center}#haut .affiche:after{background:linear-gradient(180deg,#0d0d0fee 0%,#0d0d0fd9 37%,#0d0d0f44 68%,#0d0d0f 92%)}#haut .invitation{width:190px;right:30px;bottom:220px;padding:18px;opacity:.94}#haut .invitation strong{font-size:36px;margin:10px 0}#haut .affiche-txt{grid-template-columns:1fr;gap:10px;left:26px;right:26px;bottom:24px}#haut .affiche>.tag{display:none}#haut .lede{font-size:15px}#haut .badges{gap:10px}#haut .btn{padding:0 15px;font-size:12px}}
@media(max-width:400px){#haut h1.display{font-size:90px}#haut .container.grid{min-height:910px}#haut .invitation{bottom:245px}#haut .badges{font-size:8px}}
@media(prefers-reduced-motion:reduce){#haut .hero-door{display:none}#haut .invitation:after{animation:none}}

#haut:not(.invitation-ready) .hero-door{display:none}

/* Carte de visite OseCars : logo vectoriel, tranche dorée et grain discret. */
#haut .invitation{width:310px;aspect-ratio:1.72;padding:24px 26px 20px;display:flex;flex-direction:column;justify-content:space-between;background:radial-gradient(ellipse at top left,#38383880,transparent 65%),repeating-linear-gradient(120deg,#ffffff03 0 1px,transparent 1px 3px),#141414;color:#e6c688;border:1px solid #c6a665;border-radius:9px;box-shadow:1px 2px 0 #d8bb79,3px 5px 0 #77613c,0 22px 45px #0009,inset 0 0 0 5px #0d0d0f,inset 0 0 0 6px #aa8c4938}
#haut .invitation .card-logo{display:block;width:145px;height:auto;max-height:none;object-fit:contain;align-self:flex-start;margin:0}
#haut .invitation strong{font:500 48px/.95 'Cormorant Garamond',Georgia,serif;letter-spacing:-.04em;margin:16px 0 13px;color:#e8c98d}
#haut .invitation small{font:500 8px/1.4 var(--narrow);letter-spacing:.19em;color:#cec3a9;border-top:1px solid #ad915650;padding-top:10px;white-space:nowrap}
#haut .invitation:after{opacity:.35}
@media(max-width:900px){#haut .invitation{width:230px;padding:18px 20px 16px;opacity:1}#haut .invitation .card-logo{width:112px}#haut .invitation strong{font-size:36px;margin:12px 0 9px}#haut .invitation small{font-size:7px;letter-spacing:.12em;padding-top:8px}}