/* ============================================================
THE TOWN BAR & GRILL — public.css (site vitrine)
============================================================ */
/* Pas de background-attachment:fixed : connu pour geler/masquer le rendu
dans la WebView embarquée FiveM (même famille de bug que backdrop-filter,
déjà écarté côté LTD pour cette raison) — dégradé simplement ancré au flux. */
/* Photo de fond du site (facultative, envoyée depuis Paramètres) — un vrai
![]()
position:fixed plutôt qu'un background-attachment:fixed, qui est
connu pour geler le rendu dans la WebView embarquée FiveM. */
.site-bg-photo{
position:fixed;inset:0;width:100%;height:100%;object-fit:cover;
filter:blur(26px) brightness(.5) saturate(1.15);transform:scale(1.15);
pointer-events:none;
}
.site-bg-overlay{
position:fixed;inset:0;pointer-events:none;
background:linear-gradient(180deg, rgba(10,7,8,.55), rgba(10,7,8,.86));
}
body.public{
position:relative;
background:
radial-gradient(55% 40% at 12% 8%, rgba(224,103,159,.10), transparent),
radial-gradient(50% 35% at 90% 30%, rgba(227,181,88,.08), transparent),
radial-gradient(60% 40% at 50% 85%, rgba(224,103,159,.07), transparent),
var(--bg);
}
.site-header{
position:sticky;top:0;z-index:200;background:rgba(26,18,11,.94);backdrop-filter:none;
border-bottom:1px solid rgba(217,164,65,.25);
}
.site-header .wrap{display:flex;align-items:center;gap:16px;padding:12px 24px;max-width:1180px;margin:0 auto}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#f6ecdc}
.brand img{width:46px;height:46px;border-radius:50%;flex:none;object-fit:cover}
.brand .txt b{display:block;font-family:var(--font-display);font-size:17px;letter-spacing:.01em;color:var(--gold-300)}
.brand .txt span{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--rose-300)}
.site-nav{margin-left:auto;display:flex;align-items:center;gap:22px}
.site-nav a{color:rgba(246,236,220,.8);text-decoration:none;font-size:13.5px;font-weight:600;transition:.15s}
.site-nav a:hover{color:var(--gold-300)}
.site-nav .btn{margin-left:6px}
#navToggle{display:none;background:transparent;border:1px solid rgba(246,236,220,.25);color:#f6ecdc;width:40px;height:40px;border-radius:10px}
@media(max-width:820px){
.site-nav{position:fixed;inset:64px 0 auto 0;background:#1a120b;flex-direction:column;align-items:flex-start;
padding:18px 24px 24px;border-bottom:1px solid rgba(217,164,65,.25);display:none;gap:14px}
.site-nav.is-open{display:flex}
.site-nav .btn{margin-left:0}
#navToggle{display:block;margin-left:auto}
}
/* ---------- Fleurs de cerisier décoratives (coins) ---------- */
.blossom-corner{position:absolute;width:380px;height:640px;pointer-events:none;z-index:0;opacity:.95}
.blossom-corner.tl{top:-60px;left:-90px}
.blossom-corner.tr{top:-60px;right:-90px;transform:scaleX(-1)}
.blossom-corner.bl{bottom:-60px;left:-90px;transform:scaleY(-1)}
.blossom-corner.br{bottom:-60px;right:-90px;transform:scale(-1,-1)}
@media(max-width:900px){.blossom-corner{width:240px;height:420px}}
@media(max-width:560px){.blossom-corner{width:170px;height:300px;opacity:.8}}
/* Pétales flottants (pur CSS, aucune image nécessaire) */
.petal{
position:absolute;width:9px;height:9px;border-radius:60% 0 60% 0;background:var(--rose-300);
opacity:.75;pointer-events:none;z-index:1;animation:petal-fall linear infinite;
}
@keyframes petal-fall{
0%{transform:translateY(-6%) translateX(0) rotate(0deg);opacity:0}
8%{opacity:.8}
92%{opacity:.6}
100%{transform:translateY(106%) translateX(40px) rotate(320deg);opacity:0}
}
@media(max-width:640px){.petal{display:none}}
/* ---------- Séparateur pointillé + losange ---------- */
.divider{display:flex;align-items:center;justify-content:center;gap:10px;margin:14px 0}
.divider span{width:46px;height:1px;background:linear-gradient(90deg,transparent,var(--gold-glow))}
.divider span:last-child{background:linear-gradient(90deg,var(--gold-glow),transparent)}
.divider i{width:6px;height:6px;background:var(--gold-300);transform:rotate(45deg);flex:none;font-style:normal;display:inline-block}
/* Flourish ornemental (sous le titre du hero) */
.flourish{display:block;margin:16px auto;opacity:.85}
.flourish path{stroke:var(--gold);fill:none;stroke-width:1.5}
.flourish circle{fill:var(--gold-300)}
/* ---------- Hero ---------- */
.hero{
position:relative;min-height:92vh;display:flex;align-items:center;justify-content:center;
padding:140px 24px 110px;text-align:center;overflow:hidden;
/* Dégradés semi-transparents (pas de couleur pleine) pour laisser
apparaître la photo de fond du site derrière le hero, si définie. */
background:
radial-gradient(55% 60% at 50% 15%, rgba(227,181,88,.13), transparent),
radial-gradient(65% 65% at 50% 0%, rgba(224,103,159,.24), transparent),
linear-gradient(180deg, rgba(23,15,10,.78), rgba(28,19,13,.6) 55%, rgba(10,7,8,.88) 100%);
}
.hero::after{
/* Vignette douce pour donner de la profondeur sans photo */
content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
box-shadow:inset 0 0 160px 40px rgba(0,0,0,.55);
}
.hero-inner{max-width:760px;margin:0 auto;position:relative;z-index:2}
/* Entrée animée du hero (chaque enfant direct apparaît en fondu + montée, en cascade) */
@keyframes heroFadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.hero-inner > *{opacity:0;animation:heroFadeUp .9s cubic-bezier(.2,.7,.2,1) forwards}
.hero-inner > *:nth-child(1){animation-delay:.05s}
.hero-inner > *:nth-child(2){animation-delay:.22s}
.hero-inner > *:nth-child(3){animation-delay:.36s}
.hero-inner > *:nth-child(4){animation-delay:.52s}
.hero-inner > *:nth-child(5){animation-delay:.66s}
.hero-inner > *:nth-child(6){animation-delay:.8s}
@media(prefers-reduced-motion:reduce){.hero-inner > *{animation:none;opacity:1}}
@keyframes logoGlow{0%,100%{box-shadow:0 0 0 6px rgba(227,181,88,.18),0 0 40px rgba(224,103,159,.25),var(--shadow-2)}50%{box-shadow:0 0 0 8px rgba(227,181,88,.32),0 0 62px rgba(224,103,159,.4),var(--shadow-2)}}
.hero img.hero-logo{
width:120px;height:120px;border-radius:50%;margin:0 auto 22px;border:3px solid var(--gold);
animation:heroFadeUp .9s cubic-bezier(.2,.7,.2,1) forwards, logoGlow 3.2s ease-in-out .9s infinite;
animation-delay:.05s,.9s;
}
@keyframes titleShimmer{to{background-position:-200% center}}
.hero h1{
font-size:clamp(36px,5.8vw,60px);line-height:1.1;
background:linear-gradient(100deg,var(--gold-300) 25%,#fff8e8 45%,var(--gold-300) 65%);
background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:var(--gold-300);
animation:heroFadeUp .9s cubic-bezier(.2,.7,.2,1) forwards, titleShimmer 5s linear 1.2s infinite;
animation-delay:.36s,1.2s;
}
.hero h1 span{color:var(--rose-300);-webkit-text-fill-color:var(--rose-300)}
.hero p{margin-top:18px;color:rgba(246,236,220,.8);font-size:16.5px;max-width:56ch;margin-left:auto;margin-right:auto}
.hero .actions{margin-top:34px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
@media(max-width:640px){.hero{min-height:82vh;padding:120px 20px 90px}}
/* Balancement léger des branches — appliqué au