/* Sites Groupe Éclore — Maison Rostang & Bistrot Flaubert — statique premium */
:root{
  --ink:#1c1914; --paper:#f7f3ec; --muted:#6b6257;
  --serif:'Cormorant Garamond',Georgia,serif; --sans:'Jost',system-ui,sans-serif;
  --maxw:1160px;
}
body.rostang{--accent:#6e1e2b; --accent-2:#b08d57; --paper:#f7f3ec; --hero-veil:rgba(20,12,8,.45)}
body.flaubert{--accent:#12443a; --accent-2:#c47b4a; --paper:#f6f1e7; --hero-veil:rgba(8,20,14,.42)}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);font-weight:300;color:var(--ink);background:var(--paper);line-height:1.65;font-size:17px}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.15}
.center{text-align:center}
[dir="rtl"] body{letter-spacing:0}

.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.5rem 1rem;z-index:99}
.skip:focus{left:0}

/* ---------- topbar */
.topbar{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:2rem;
  padding:.9rem 2rem;background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid color-mix(in srgb,var(--ink) 12%,transparent)}
.brand a{font-family:var(--serif);font-size:1.35rem;letter-spacing:.06em}
.mainnav{display:flex;gap:1.4rem;margin-inline-start:auto}
.mainnav a{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;opacity:.85;padding:.2rem 0;border-bottom:1px solid transparent;transition:.2s}
.mainnav a:hover{opacity:1;border-color:var(--accent-2)}
.topbar-right{display:flex;align-items:center;gap:1rem}
.langsel{position:relative}
.langsel button{background:none;border:1px solid color-mix(in srgb,var(--ink) 25%,transparent);
  border-radius:2rem;padding:.35rem .9rem;font-family:var(--sans);font-size:.78rem;letter-spacing:.08em;cursor:pointer}
.langmenu{display:none;position:absolute;inset-inline-end:0;top:110%;background:#fff;border:1px solid #ddd;
  border-radius:.6rem;box-shadow:0 12px 30px rgba(0,0,0,.12);min-width:10.5rem;padding:.4rem;max-height:60vh;overflow:auto}
.langsel:hover .langmenu,.langsel:focus-within .langmenu{display:block}
.langmenu a{display:block;padding:.45rem .8rem;font-size:.85rem;border-radius:.4rem}
.langmenu a:hover{background:color-mix(in srgb,var(--accent) 8%,#fff)}
.langmenu a[aria-current]{color:var(--accent);font-weight:500}
.burger{display:none;background:none;border:none;font-size:1.5rem;cursor:pointer}

/* ---------- boutons */
.btn{display:inline-block;padding:.8rem 1.9rem;border-radius:2.5rem;font-size:.82rem;letter-spacing:.16em;
  text-transform:uppercase;border:1px solid var(--accent);transition:.25s;text-align:center}
.btn.primary{background:var(--accent);color:#fff}
.btn.primary:hover{background:color-mix(in srgb,var(--accent) 85%,#000);transform:translateY(-1px)}
.btn.ghost{color:var(--accent)}
.btn.ghost:hover{background:var(--accent);color:#fff}
.btn.book{background:var(--accent);color:#fff;border:none;padding:.55rem 1.3rem;font-size:.75rem}
.btn.book:hover{background:color-mix(in srgb,var(--accent) 85%,#000)}

/* ---------- hero */
.hero{min-height:92vh;display:flex;align-items:center;justify-content:center;text-align:center;
  background-size:cover;background-position:center;position:relative;color:#fff}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(var(--hero-veil),var(--hero-veil))}
.hero-inner{position:relative;max-width:820px;padding:7rem 1.5rem 3rem}
.hero-kicker{font-size:.8rem;letter-spacing:.34em;text-transform:uppercase;opacity:.92;margin-bottom:1.4rem}
.hero h1{font-size:clamp(3rem,7vw,5.4rem);font-weight:500;letter-spacing:.02em;margin-bottom:1.2rem}
.hero-sub{font-family:var(--serif);font-size:clamp(1.15rem,2.2vw,1.45rem);font-style:italic;opacity:.95;max-width:640px;margin:0 auto 2.4rem}
.hero-cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.hero .btn.ghost{border-color:#fff;color:#fff}
.hero .btn.ghost:hover{background:#fff;color:var(--ink)}

/* ---------- badges */
.badges{display:flex;justify-content:center;gap:2.5rem;flex-wrap:wrap;padding:1.4rem 1.5rem;
  background:var(--ink);color:#f4efe6}
.badges span{font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;opacity:.9}

/* ---------- sections */
.section{max-width:var(--maxw);margin:0 auto;padding:5.5rem 1.5rem}
.section.narrow{max-width:820px;text-align:center}
.kicker{font-size:.75rem;letter-spacing:.3em;text-transform:uppercase;color:var(--accent-2);margin-bottom:.9rem}
.section h2{font-size:clamp(1.9rem,3.6vw,2.7rem);margin-bottom:1.3rem}
.section p{max-width:62ch}
.section.narrow p,{margin:0 auto}
.narrow p{margin-left:auto;margin-right:auto}
.intro{margin:0 auto 1rem}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:4rem;align-items:center}
.split.rev .txt{order:2}
.split.rev .pic{order:1}
.pic img{border-radius:.4rem;box-shadow:0 24px 60px rgba(0,0,0,.14);aspect-ratio:4/4.6;object-fit:cover;width:100%}
.quote{text-align:center}
.quote p{font-family:var(--serif);font-size:clamp(1.3rem,2.6vw,1.75rem);font-style:italic;max-width:56ch;margin:0 auto;color:var(--accent)}
.cta-line{margin-top:2rem}

/* ---------- carte */
.carte{background:#fff;max-width:none;padding-left:0;padding-right:0}
.carte>*{max-width:820px;margin-left:auto;margin-right:auto;padding-left:1.5rem;padding-right:1.5rem}
.fr-note{font-size:.85rem;font-style:italic;color:var(--muted);text-align:center;margin-bottom:.5rem}
.carte-wrap{padding-top:1.5rem}
.carte-cat{font-size:1.05rem;letter-spacing:.26em;text-transform:uppercase;color:var(--accent);
  text-align:center;margin:3rem 0 1.6rem;font-family:var(--sans);font-weight:400}
.carte-cat::after{content:"";display:block;width:44px;height:1px;background:var(--accent-2);margin:.8rem auto 0}
.menu-list,.dish-list{display:flex;flex-direction:column;gap:1.1rem}
.menu-row,.dhead{display:flex;align-items:baseline;gap:.7rem}
.mname,.dname{font-family:var(--serif);font-size:1.22rem}
.dots{flex:1;border-bottom:1px dotted color-mix(in srgb,var(--ink) 30%,transparent);transform:translateY(-4px)}
.mprice,.dprice{font-size:1rem;color:var(--accent);white-space:nowrap;font-weight:400}
.ddesc{font-size:.92rem;color:var(--muted);margin-top:.15rem;max-width:56ch}

/* ---------- résa */
.resa{background:var(--ink);color:#f4efe6;max-width:none}
.resa .kicker{color:var(--accent-2)}
.resa>*{max-width:900px;margin-left:auto;margin-right:auto}
.resa .intro{opacity:.85}
.widget-box{margin:2.5rem auto;background:#fff;border-radius:.6rem;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.35)}
.widget-box iframe{width:100%;height:640px;border:0;display:block}
.resa-alt .or{margin:0 .9rem;opacity:.7;font-style:italic}
.resa .btn.ghost{border-color:#f4efe6;color:#f4efe6}
.resa .btn.ghost:hover{background:#f4efe6;color:var(--ink)}

/* ---------- infos */
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem;margin-top:2.5rem;text-align:center}
.info-grid h3{font-family:var(--sans);font-size:.75rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--accent-2);margin:1.1rem 0 .3rem}
.info-grid p{margin:0 auto;font-size:1.05rem}
.info-grid a:hover{color:var(--accent)}

/* ---------- footer */
footer{background:var(--ink);color:#cfc8bc;padding:3.2rem 1.5rem;text-align:center}
.foot-inner{max-width:var(--maxw);margin:0 auto;display:flex;flex-direction:column;gap:.9rem}
.foot-brand{font-family:var(--serif);font-size:1.5rem;color:#f4efe6}
.foot-links a:hover,.foot-group a:hover{color:#fff;text-decoration:underline}
.foot-group,.foot-legal{font-size:.8rem;opacity:.75;line-height:1.9}

/* ---------- responsive */
@media (max-width:960px){
  .mainnav{display:none}
  .burger{display:block;margin-inline-start:auto}
  .topbar{gap:1rem;padding:.8rem 1.1rem}
  body.nav-open .mainnav{display:flex;position:fixed;inset:56px 0 auto 0;flex-direction:column;
    background:var(--paper);padding:1.4rem;border-bottom:1px solid #ddd;margin:0;gap:1.1rem;z-index:49}
  .split{grid-template-columns:1fr;gap:2.2rem}
  .split.rev .txt{order:1}
  .split.rev .pic{order:2}
  .info-grid{grid-template-columns:1fr;gap:1.6rem}
  .hero{min-height:86vh}
  .widget-box iframe{height:580px}
  .badges{gap:1.1rem}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}