:root{
  --bg:#070707;
  --bg-2:#0e0e0e;
  --bg-3:#151515;
  --card:#121212;
  --card-2:#181818;
  --gold:#cfa93a;
  --gold-2:#f2d57b;
  --gold-3:#8b6a16;
  --text:#f5f3ef;
  --muted:#b9b4aa;
  --line:rgba(207,169,58,.26);
  --line-soft:rgba(255,255,255,.08);
  --shadow:0 20px 50px rgba(0,0,0,.38);
  --shadow-soft:0 10px 26px rgba(0,0,0,.24);
  --radius:24px;
  --radius-lg:34px;
  --max:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.55;
  background:
    radial-gradient(circle at 18% 0%, rgba(207,169,58,.08), transparent 25%),
    radial-gradient(circle at 85% 16%, rgba(242,213,123,.06), transparent 20%),
    linear-gradient(180deg,#090909 0%, #0b0b0b 40%, #080808 100%);
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{width:min(calc(100% - 32px), var(--max)); margin:0 auto}
.page-shell{padding-bottom:80px}
header.site-header{
  position:sticky; top:0; z-index:90; backdrop-filter:blur(12px);
  background:rgba(8,8,8,.72); border-bottom:1px solid rgba(255,255,255,.05)
}
.navbar{display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:82px}
.brand{display:flex; align-items:center; gap:14px; font-weight:800; letter-spacing:.04em}
.brand-mark{
  width:44px; height:44px; border-radius:16px; display:grid; place-items:center;
  background:linear-gradient(145deg,#2b220a,#0d0d0d 48%,#3b2d0d);
  border:1px solid rgba(207,169,58,.34); color:var(--gold-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 28px rgba(0,0,0,.36);
  font: 700 22px Georgia, serif;
}
.brand-text{display:flex; flex-direction:column; gap:2px}
.brand-text strong{font-size:15px}
.brand-text span{font-size:11px; color:var(--muted); letter-spacing:.16em; text-transform:uppercase}
.nav-links{display:flex; gap:26px; font-size:14px; color:#ddd}
.nav-links a{position:relative; padding:6px 0}
.nav-links a::after{content:""; position:absolute; left:0; right:100%; bottom:-1px; height:1px; background:linear-gradient(90deg,var(--gold-2),var(--gold)); transition:.25s}
.nav-links a:hover::after,.nav-links a.active::after{right:0}
.nav-cta{display:flex; align-items:center; gap:12px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border-radius:999px; padding:14px 18px; border:1px solid transparent;
  font-weight:700; transition:.25s ease; cursor:pointer;
}
.btn.primary{color:#111; background:linear-gradient(180deg,var(--gold-2),var(--gold)); box-shadow:0 14px 30px rgba(207,169,58,.20), inset 0 1px 0 rgba(255,255,255,.4)}
.btn.primary:hover{transform:translateY(-1px); box-shadow:0 18px 35px rgba(207,169,58,.26)}
.btn.secondary{background:rgba(255,255,255,.02); border-color:var(--line); color:var(--text)}
.btn.secondary:hover{background:rgba(207,169,58,.06); border-color:rgba(207,169,58,.45)}
.btn.ghost{padding:0; color:var(--gold-2)}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px; padding:8px 14px; border-radius:999px;
  border:1px solid var(--line); background:rgba(255,255,255,.02);
  font-size:12px; text-transform:uppercase; letter-spacing:.18em; color:var(--gold-2)
}
.eyebrow::before{content:""; width:8px; height:8px; border-radius:50%; background:linear-gradient(180deg,var(--gold-2),var(--gold)); box-shadow:0 0 16px rgba(207,169,58,.55)}
.hero{padding:56px 0 34px}
.hero-grid{display:grid; grid-template-columns:1.04fr .96fr; gap:34px; align-items:stretch}
.hero-copy{padding:26px 0 18px}
.hero-copy h1,.page-hero h1{
  margin:20px 0 16px; font: 700 clamp(42px, 6vw, 76px)/.97 Georgia, serif; letter-spacing:-.035em;
}
.hero-copy p.lead,.page-hero .lead{max-width:64ch; font-size:18px; color:#e1ddd3}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin:28px 0 34px}
.hero-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.stat{padding:20px; border-radius:20px; background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015)); border:1px solid var(--line-soft); box-shadow:var(--shadow-soft)}
.stat strong{display:block; color:var(--gold-2); font-size:26px; margin-bottom:3px}
.stat span{font-size:14px; color:var(--muted)}
.hero-visual, .page-hero-visual{
  position:relative; overflow:hidden; min-height:660px; border-radius:32px; border:1px solid var(--line);
  box-shadow:var(--shadow);
  background:
    linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.7)),
    radial-gradient(circle at 20% 22%, rgba(255,215,108,.32), transparent 24%),
    radial-gradient(circle at 78% 18%, rgba(242,213,123,.18), transparent 18%),
    linear-gradient(135deg,#2c220c 0%, #17120a 35%, #0b0b0b 70%, #111 100%);
}
.hero-visual::before,.page-hero-visual::before{content:""; position:absolute; inset:0; background:linear-gradient(transparent 0 65%, rgba(0,0,0,.5)), radial-gradient(circle at 50% 110%, rgba(207,169,58,.22), transparent 33%)}
.scene{position:absolute; inset:0; padding:28px; display:flex; flex-direction:column; justify-content:space-between}
.scene-top{display:flex; justify-content:flex-end; gap:12px; flex-wrap:wrap}
.badge{padding:10px 12px; border-radius:999px; font-size:13px; background:rgba(10,10,10,.54); border:1px solid rgba(255,255,255,.08); backdrop-filter:blur(6px)}
.beer-line{display:flex; align-items:flex-end; gap:20px; padding-bottom:16px}
.tap{width:86px; height:260px; border-radius:30px 30px 18px 18px; background:linear-gradient(180deg,#f0dd97 0%,#aa8218 30%,#624912 70%,#241906 100%); position:relative; box-shadow:inset 0 1px 0 rgba(255,255,255,.38), 0 15px 28px rgba(0,0,0,.35)}
.tap::before{content:""; position:absolute; left:50%; transform:translateX(-50%); top:-28px; width:44px; height:56px; border-radius:18px 18px 10px 10px; background:linear-gradient(180deg,#f6e4a3,#9d7718 70%,#503a0d); box-shadow:inset 0 1px 0 rgba(255,255,255,.36)}
.tap::after{content:""; position:absolute; right:-38px; top:84px; width:60px; height:14px; border-radius:99px; background:linear-gradient(90deg,#d7b13a,#73550d)}
.glass{width:122px; height:222px; border-radius:18px 18px 28px 28px; border:1px solid rgba(255,255,255,.16); background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.05)); position:relative; overflow:hidden; backdrop-filter:blur(3px); box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 10px 20px rgba(0,0,0,.36)}
.glass .beer{position:absolute; left:8px; right:8px; bottom:8px; height:72%; border-radius:10px 10px 18px 18px; background:linear-gradient(180deg,#ffd86c 0%,#f2bd20 24%,#cf8d10 70%,#8b5700 100%)}
.glass .foam{position:absolute; left:5px; right:5px; top:18px; height:26px; border-radius:999px; background:#fff8ea}
.scene-copy{max-width:70%; padding:22px; border-radius:24px; background:rgba(8,8,8,.46); border:1px solid rgba(255,255,255,.08); backdrop-filter:blur(10px)}
.scene-copy h3{margin:0 0 8px; font:700 34px/1.04 Georgia, serif}
.scene-copy p{margin:0; color:#ddd7cd}
section{padding:40px 0}
.section-head{display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:22px}
.section-head h2{margin:10px 0 0; font:700 clamp(34px,4vw,46px)/1.05 Georgia, serif}
.section-head p{margin:0; max-width:60ch; color:var(--muted)}
.card-grid-3,.card-grid-4{display:grid; gap:18px}
.card-grid-3{grid-template-columns:repeat(3,1fr)}
.card-grid-4{grid-template-columns:repeat(4,1fr)}
.card{position:relative; overflow:hidden; padding:26px; border-radius:24px; background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015)); border:1px solid rgba(255,255,255,.07); box-shadow:var(--shadow-soft)}
.card::after{content:""; position:absolute; inset:auto -20% -50% auto; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle, rgba(207,169,58,.08), transparent 65%)}
.icon{width:56px; height:56px; border-radius:16px; display:grid; place-items:center; font-size:26px; background:linear-gradient(180deg,rgba(207,169,58,.22),rgba(207,169,58,.08)); border:1px solid rgba(207,169,58,.20); margin-bottom:16px}
.card h3{margin:0 0 10px; font-size:22px}
.card p{margin:0; color:var(--muted)}
.card .tagline{margin-top:14px; color:var(--gold-2); font-size:14px}
.split-grid{display:grid; grid-template-columns:1.08fr .92fr; gap:20px}
.feature-panel,.menu-panel,.contact-panel,.faq-panel,.seo-panel,.timeline-panel,.cta-band{
  padding:30px; border-radius:28px; border:1px solid var(--line); background:linear-gradient(180deg,#121212,#0d0d0d); box-shadow:var(--shadow)
}
.feature-panel h3,.menu-panel h3,.contact-panel h3,.faq-panel h3,.seo-panel h3,.timeline-panel h3,.cta-band h3{margin:10px 0 10px; font:700 38px/1.06 Georgia, serif}
.feature-panel p,.menu-panel p,.contact-panel p,.faq-panel p,.seo-panel p,.timeline-panel p,.cta-band p{color:#ded8cd}
.pills{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px}
.pill{padding:10px 12px; border-radius:999px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); font-size:14px}
.stack{display:grid; gap:18px}
.event-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.event-card{padding:22px; border-radius:24px; background:linear-gradient(180deg,#151515,#101010); border:1px solid rgba(255,255,255,.07); box-shadow:var(--shadow-soft)}
.event-date{margin-bottom:10px; color:var(--gold-2); font-size:13px; letter-spacing:.12em; text-transform:uppercase}
.event-card h3{margin:0 0 10px; font-size:24px}
.event-card p{margin:0 0 16px; color:var(--muted)}
.page-hero{padding:52px 0 24px}
.page-hero-grid{display:grid; grid-template-columns:1.06fr .94fr; gap:30px; align-items:center}
.page-hero-visual{min-height:520px}
.two-cols{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.menu-category{padding:24px; border-radius:22px; background:linear-gradient(180deg,#141414,#101010); border:1px solid rgba(255,255,255,.06)}
.menu-category h4{margin:0 0 14px; color:var(--gold-2); letter-spacing:.08em; text-transform:uppercase; font-size:14px}
.menu-list{display:grid; gap:14px}
.menu-item{display:flex; justify-content:space-between; gap:14px; border-bottom:1px dashed rgba(255,255,255,.08); padding-bottom:12px}
.menu-item:last-child{border-bottom:none; padding-bottom:0}
.menu-item strong{display:block; margin-bottom:2px}
.menu-item span{color:var(--muted); font-size:14px}
.menu-note{margin-top:16px; color:var(--muted); font-size:14px}
.kpi-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.kpi{padding:20px; border-radius:20px; background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015)); border:1px solid rgba(255,255,255,.06); text-align:center}
.kpi strong{display:block; color:var(--gold-2); font-size:30px}
.kpi span{font-size:14px; color:var(--muted)}
.list{margin:0; padding-left:18px; color:var(--muted)}
.list li{margin:8px 0}
.faq-list{display:grid; gap:14px}
.faq-item{padding:18px 20px; border-radius:18px; border:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.02)}
.faq-item h4{margin:0 0 6px; font-size:18px}
.faq-item p{margin:0; color:var(--muted)}
.info-list{display:grid; gap:16px; margin-top:18px}
.info-row{display:grid; grid-template-columns:44px 1fr; gap:14px; align-items:start}
.info-row .dot{width:44px; height:44px; border-radius:14px; display:grid; place-items:center; color:var(--gold-2); background:linear-gradient(180deg,rgba(207,169,58,.22),rgba(207,169,58,.08)); border:1px solid rgba(207,169,58,.20)}
.map-card{min-height:380px; position:relative; overflow:hidden; border-radius:28px; border:1px solid var(--line); box-shadow:var(--shadow); background:linear-gradient(145deg,#16120a,#0d0d0d)}
.map-card::before{content:""; position:absolute; inset:0; background:
linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px),
linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px);
background-size:44px 44px; opacity:.28}
.map-card::after{content:"Écourt-Saint-Quentin · 37 rue du Marais"; position:absolute; left:24px; right:24px; bottom:24px; padding:18px 20px; border-radius:20px; border:1px solid rgba(255,255,255,.08); background:rgba(8,8,8,.55); color:#f3efe7; font-weight:700}
.pin{position:absolute; left:58%; top:44%; width:24px; height:24px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:linear-gradient(180deg,var(--gold-2),var(--gold)); box-shadow:0 12px 30px rgba(207,169,58,.26)}
.pin::after{content:""; position:absolute; left:6px; top:6px; width:12px; height:12px; border-radius:50%; background:#18120a}
.footer{padding:32px 0 40px; border-top:1px solid rgba(255,255,255,.05); background:rgba(0,0,0,.12)}
.footer-grid{display:grid; grid-template-columns:1.1fr .9fr .9fr; gap:24px}
.footer h4{margin:0 0 12px; color:var(--gold-2); letter-spacing:.08em; text-transform:uppercase; font-size:12px}
.footer p,.footer li,.footer a{color:var(--muted); font-size:14px}
.footer ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.legal{padding-top:16px; margin-top:18px; border-top:1px solid rgba(255,255,255,.05); color:#a7a197; font-size:13px}
.floating-cta{
  position:fixed; right:18px; bottom:18px; z-index:85; display:grid; gap:10px;
}
.float-btn{min-width:176px; padding:13px 16px; border-radius:999px; box-shadow:var(--shadow-soft); background:rgba(12,12,12,.92); border:1px solid rgba(255,255,255,.08); display:flex; align-items:center; gap:10px}
.float-btn strong{font-size:14px}
.float-btn span{font-size:12px; color:var(--muted)}
.page-nav{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}
.tag-cloud{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
.tag-cloud span{padding:8px 12px; border-radius:999px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); font-size:13px; color:#dfd8cc}
@media (max-width: 1080px){
  .hero-grid,.page-hero-grid,.split-grid,.two-cols,.footer-grid,.event-grid,.card-grid-3,.card-grid-4,.kpi-grid{grid-template-columns:1fr 1fr}
  .hero-visual,.page-hero-visual{min-height:520px}
}
@media (max-width: 820px){
  .nav-links{display:none}
  .nav-cta .btn.secondary{display:none}
  .hero-grid,.page-hero-grid,.split-grid,.two-cols,.footer-grid,.event-grid,.card-grid-3,.card-grid-4,.hero-stats,.kpi-grid{grid-template-columns:1fr}
  .hero-visual,.page-hero-visual{min-height:460px}
  .scene-copy{max-width:100%}
  .beer-line{gap:14px; transform:scale(.84); transform-origin:left bottom}
  .floating-cta{left:16px; right:16px}
  .float-btn{min-width:0; width:100%}
}


/* V4 premium enhancements */
:root{
  --header-bg:rgba(5,5,5,.86);
}
body{
  min-height:100vh;
}
.page-shell{
  position:relative;
  isolation:isolate;
}
.page-shell::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    radial-gradient(circle at 50% -10%, rgba(212,175,55,.08), transparent 30%),
    radial-gradient(circle at 0% 20%, rgba(212,175,55,.05), transparent 24%),
    radial-gradient(circle at 100% 10%, rgba(255,225,145,.04), transparent 20%);
  pointer-events:none;
  z-index:-1;
}
header.site-header{
  background:linear-gradient(180deg, rgba(0,0,0,.92), rgba(7,7,7,.76));
  border-bottom:1px solid rgba(212,175,55,.12);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.nav-links a{color:#e9e1d1}
.nav-links a:hover{color:var(--gold-2)}
.hero, .page-hero{
  position:relative;
}
.hero::after, .page-hero::after{
  content:"";
  position:absolute; inset:auto 0 0 0; height:140px;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.25));
  pointer-events:none;
}
.hero-copy h1,.page-hero h1,.section-head h2,.feature-panel h3,.menu-panel h3,.contact-panel h3,.faq-panel h3,.seo-panel h3,.timeline-panel h3,.cta-band h3{
  color:#fff7dc;
  text-shadow:0 2px 18px rgba(0,0,0,.22);
}
.hero-copy .lead,.page-hero .lead{
  color:#f0eadc;
}
.card, .event-card, .menu-category, .reservation-card, .info-card, .faq-item{
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)),
    linear-gradient(180deg, rgba(212,175,55,.03), transparent 55%);
  border-color:rgba(212,175,55,.12);
}
.card:hover, .event-card:hover, .menu-category:hover, .info-card:hover, .reservation-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 38px rgba(0,0,0,.34), 0 0 0 1px rgba(212,175,55,.06) inset;
}
.feature-panel,.menu-panel,.contact-panel,.faq-panel,.seo-panel,.timeline-panel,.cta-band{
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    linear-gradient(135deg, rgba(212,175,55,.04), transparent 45%),
    linear-gradient(180deg,#111,#0a0a0a);
}
.section-head p,.card p,.event-card p,.feature-panel p,.menu-panel p,.contact-panel p,.faq-panel p,.seo-panel p,.timeline-panel p,.cta-band p,.pill,.stat span,.menu-note{
  color:#d7cfbf;
}
.footer{
  background:linear-gradient(180deg, rgba(8,8,8,.1), #050505 40%, #030303 100%);
  border-top:1px solid rgba(212,175,55,.12);
}
.footer h4{
  color:#fff1bf;
}
.list li::marker{color:var(--gold-2)}
.gold-divider{
  width:110px; height:1px; margin:16px 0 0;
  background:linear-gradient(90deg, transparent, var(--gold-2), transparent);
}
.hero-premium-note{
  display:inline-flex; gap:8px; align-items:center; margin-top:10px; color:var(--gold-2); font-size:14px;
}
.hero-premium-note::before{
  content:"✦";
}
.priv-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:18px;
}
.offer-card{
  padding:24px; border-radius:24px; border:1px solid rgba(212,175,55,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow:var(--shadow-soft);
}
.offer-card h3{margin:0 0 10px; font-size:26px}
.offer-card p{margin:0 0 14px; color:#d7cfbf}
.offer-list{margin:0; padding-left:18px; color:#eee2c5}
.offer-list li{margin:8px 0}
.highlight-box{
  padding:28px; border-radius:26px; border:1px solid rgba(212,175,55,.18);
  background:
    radial-gradient(circle at top right, rgba(212,175,55,.08), transparent 30%),
    linear-gradient(180deg, #141414, #0c0c0c);
  box-shadow:var(--shadow);
}
.kpi-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:18px;
}
.kpi{
  padding:18px; border-radius:20px; text-align:center;
  background:rgba(255,255,255,.03); border:1px solid rgba(212,175,55,.12);
}
.kpi strong{display:block; color:var(--gold-2); font-size:28px}
.kpi span{font-size:13px; color:#d8cfbe}
@media (max-width: 980px){
  .priv-grid,.kpi-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 720px){
  .priv-grid,.kpi-grid{grid-template-columns:1fr}
}