/* ============================================================
   RÉFÉRENCE — Grill méditerranéen au feu de bois · Metz
   DA : charbon / braise / laiton / crème
   ============================================================ */

:root{
  --charbon:#1a1715;
  --charbon-2:#221c18;
  --charbon-3:#2a221d;
  --panel:#14110f;
  --braise:#c85a30;
  --braise-2:#e07140;
  --laiton:#c9a24b;
  --laiton-2:#dcb868;
  --creme:#f3ece0;
  --bois:#7a4f33;
  --muted:rgba(243,236,224,.60);
  --muted-2:rgba(243,236,224,.40);
  --line:rgba(201,162,75,.22);
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Mulish",system-ui,sans-serif;
  --maxw:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:78px}
body{
  margin:0;
  font-family:var(--sans);
  font-size:16px;line-height:1.6;
  background:var(--charbon);
  color:var(--creme);
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 1.3rem}

/* ---------- BOUTONS ---------- */
.btn{
  font-family:var(--sans);font-weight:800;font-size:.82rem;letter-spacing:.03em;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.7rem 1.25rem;border-radius:8px;cursor:pointer;border:1px solid transparent;
  transition:.16s;white-space:nowrap;
}
.btn-fill{background:var(--braise);color:#fff}
.btn-fill:hover{background:var(--braise-2)}
.btn-gold{background:var(--laiton);color:#1a1715}
.btn-gold:hover{background:var(--laiton-2)}
.btn-ghost{background:transparent;color:var(--creme);border-color:rgba(243,236,224,.35)}
.btn-ghost:hover{border-color:var(--creme);background:rgba(243,236,224,.06)}
.btn-sm{padding:.55rem 1rem;font-size:.76rem}

/* ---------- HEADER ---------- */
.s-header{
  position:sticky;top:0;z-index:40;
  background:rgba(20,17,15,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.s-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:.85rem;padding-bottom:.85rem}
.s-logo{display:flex;flex-direction:column;line-height:1}
.s-logo b{font-family:var(--serif);font-size:1.6rem;font-weight:600;letter-spacing:.015em;color:var(--creme)}
.s-logo span{font-size:.54rem;letter-spacing:.3em;text-transform:uppercase;color:var(--laiton);margin-top:3px}
.s-nav{display:none;gap:1.4rem;font-size:.82rem;letter-spacing:.04em}
.s-nav a{color:var(--muted);transition:.15s}
.s-nav a:hover{color:var(--creme)}
.s-head-right{display:flex;align-items:center;gap:.7rem}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:82vh;display:flex;align-items:flex-end;overflow:hidden;background:var(--panel)}
.hero .media{position:absolute;inset:0}
.hero .media img{width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(12,10,9,.45) 0%,rgba(12,10,9,.25) 38%,rgba(12,10,9,.94) 100%)}
.hero .wrap{position:relative;z-index:2}
.hero-inner{padding:2.5rem 0 2.8rem;max-width:660px}
.eyebrow{font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--laiton-2);margin:0 0 1rem}
.hero h1{font-family:var(--serif);font-weight:600;font-size:3.2rem;line-height:.98;margin:0 0 1rem;color:#fff}
.hero p.lead{font-size:1.02rem;color:rgba(243,236,224,.86);margin:0 0 1.4rem;max-width:46ch}
.rating{display:inline-flex;align-items:center;gap:.5rem;font-size:.84rem;color:var(--creme);
  background:rgba(20,17,15,.55);border:1px solid var(--line);border-radius:999px;padding:.4rem .9rem;margin-bottom:1.4rem}
.rating .stars{color:var(--laiton-2);letter-spacing:.1em}
.hero-cta{display:flex;flex-wrap:wrap;gap:.7rem}

/* ---------- SECTION GÉNÉRIQUE ---------- */
.sec{position:relative;padding:3.2rem 0}
.kicker{font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;color:var(--braise-2);margin:0 0 .7rem}
.kicker.gold{color:var(--laiton-2)}
h2.title{font-family:var(--serif);font-weight:600;font-size:2.4rem;line-height:1.02;margin:0 0 .8rem;color:var(--creme)}
.sec p.body{font-size:1rem;color:var(--muted);margin:0;max-width:54ch}

/* image générique */
.ph{overflow:hidden;border-radius:10px;background:var(--charbon-3)}
.ph img{width:100%;height:100%;object-fit:cover}

/* ---------- FEU DE BOIS ---------- */
.feu{background:linear-gradient(180deg,#1a1715,#211a15);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.feu-grid{display:grid;gap:1.6rem}
.feu-imgs{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.feu-imgs .ph{aspect-ratio:1/1}
.feu-imgs .ph:first-child{grid-column:1/-1;aspect-ratio:16/10}

/* ---------- CARTE ---------- */
.carte{background:var(--panel)}
.carte .note-top{font-size:.78rem;color:var(--muted-2);font-style:italic;margin:.2rem 0 2rem}
.menu-cols{display:grid;gap:2rem}
.menu-cat h3{font-family:var(--serif);font-size:1.05rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--laiton-2);margin:0 0 1rem;padding-bottom:.5rem;border-bottom:1px solid var(--line)}
.menu-cat h3 small{display:block;font-family:var(--sans);font-size:.6rem;letter-spacing:.18em;color:var(--braise-2);margin-top:.35rem;font-weight:700}
.m-item{display:flex;align-items:baseline;gap:.6rem;margin:0 0 .95rem}
.m-item .nm{font-size:.98rem;color:var(--creme)}
.m-item .nm em{display:block;font-style:normal;font-size:.74rem;color:var(--muted-2);margin-top:2px}
.m-item .dots{flex:1;border-bottom:1px dotted rgba(201,162,75,.35);position:relative;top:-4px}
.m-item .pr{font-family:var(--serif);font-size:1.1rem;color:var(--laiton-2);white-space:nowrap}
.carte .note-bot{font-size:.76rem;color:var(--muted-2);margin-top:2rem;padding-top:1.2rem;border-top:1px solid var(--line)}

/* ---------- SOIRÉES (accent fort) ---------- */
.soirees{position:relative;background:
  linear-gradient(135deg,#2a160e 0%,#3a1d10 45%,#1f120c 100%);
  border-top:2px solid var(--braise);overflow:hidden}
.soirees::before{content:"";position:absolute;inset:0;opacity:.5;
  background:radial-gradient(80% 60% at 85% 10%,rgba(200,90,48,.35),transparent 55%)}
.soirees .wrap{position:relative;z-index:2}
.soirees-layout{display:grid;gap:2rem}
.badge-strong{display:inline-flex;align-items:center;gap:.5rem;font-size:.62rem;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;color:#1a1715;background:var(--laiton);
  padding:.3rem .7rem;border-radius:999px;margin-bottom:1rem}
.soirees h2.title{color:#fff}
.soirees p.body{color:rgba(243,236,224,.8)}
.soiree-cards{display:grid;gap:1rem;margin:2rem 0}
.s-card{background:rgba(20,17,15,.55);border:1px solid rgba(201,162,75,.28);border-radius:12px;padding:1.4rem 1.3rem}
.s-card .ic{width:38px;height:38px;border-radius:9px;background:rgba(200,90,48,.2);border:1px solid var(--braise);
  display:flex;align-items:center;justify-content:center;color:var(--braise-2);margin-bottom:.9rem}
.s-card h4{font-family:var(--serif);font-size:1.4rem;font-weight:600;margin:0 0 .5rem;color:var(--laiton-2)}
.s-card p{font-size:.85rem;color:var(--muted);margin:0}
.soiree-foot{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
.soirees .ph{min-height:300px}

/* ---------- GALERIE ---------- */
.galerie{background:var(--charbon-2)}
.mosaic{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem}
.mosaic .ph{aspect-ratio:1/1}
.mosaic .ph.wide{grid-column:span 2;aspect-ratio:2/1}
.mosaic .ph.tall{grid-row:span 2;aspect-ratio:auto}

/* ---------- AVIS ---------- */
.avis{background:var(--charbon)}
.avis-grid{display:grid;gap:1rem;margin-bottom:1.8rem}
.review{background:var(--charbon-2);border:1px solid var(--line);border-radius:12px;padding:1.5rem 1.4rem}
.review .stars{color:var(--laiton-2);letter-spacing:.12em;font-size:.95rem;margin-bottom:.8rem}
.review blockquote{margin:0;font-family:var(--serif);font-size:1.32rem;line-height:1.25;color:var(--creme)}
.review cite{display:block;margin-top:1rem;font-style:normal;font-size:.74rem;letter-spacing:.06em;color:var(--muted-2)}

/* ---------- TROUVER ---------- */
.trouver{background:var(--charbon-2)}
.trouver-grid{display:grid;gap:1.6rem}
.info-row{display:flex;gap:.85rem;padding:1rem 0;border-bottom:1px solid var(--line)}
.info-row .ic{flex:none;width:34px;height:34px;border-radius:8px;background:rgba(201,162,75,.12);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--laiton-2)}
.info-row .tx b{display:block;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);margin-bottom:.25rem;font-weight:800}
.info-row .tx span{font-size:.95rem;color:var(--creme)}
.info-row .tx em{font-style:italic;font-size:.74rem;color:var(--braise-2)}
.trouver-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.3rem}
.insta-link{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.2rem;font-size:.85rem;color:var(--laiton-2)}
.map-embed{border-radius:12px;overflow:hidden;border:1px solid var(--line);min-height:300px;background:var(--charbon-3)}
.map-embed iframe{width:100%;height:100%;min-height:300px;border:0;display:block;filter:grayscale(.15) contrast(1.05)}

/* ---------- FOOTER ---------- */
.s-footer{background:var(--panel);border-top:1px solid var(--line);padding:2.6rem 0 7rem}
.foot-grid{display:grid;gap:1.6rem}
.foot-brand b{font-family:var(--serif);font-size:1.7rem;font-weight:600;color:var(--creme)}
.foot-brand span{display:block;font-size:.56rem;letter-spacing:.3em;text-transform:uppercase;color:var(--laiton);margin-top:4px}
.foot-col h5{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);margin:0 0 .8rem;font-weight:800}
.foot-col p,.foot-col a{font-size:.86rem;color:var(--muted);margin:.25rem 0;display:block}
.foot-col a:hover{color:var(--creme)}
.foot-credit{margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--line);
  font-size:.7rem;color:var(--muted-2);letter-spacing:.04em;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem}

/* ---------- BARRE FIXE MOBILE ---------- */
.mobi-bar{display:none}

/* ============================================================
   DESKTOP (≥ 860px)
   ============================================================ */
@media (min-width:860px){
  body{font-size:17px}
  .s-header .wrap{padding-top:1.05rem;padding-bottom:1.05rem}
  .s-nav{display:flex}
  .wrap{padding:0 2.6rem}
  .hero{min-height:88vh}
  .hero-inner{padding:0 0 4rem}
  .hero h1{font-size:5rem}
  .hero p.lead{font-size:1.15rem}

  .sec{padding:5rem 0}
  h2.title{font-size:3.2rem}

  .feu-grid{grid-template-columns:1fr 1.05fr;align-items:center;gap:3rem}

  .menu-cols{grid-template-columns:1fr 1fr;gap:2.4rem 4rem}

  .soiree-cards{grid-template-columns:repeat(3,1fr)}
  .soirees-layout{grid-template-columns:1.1fr .9fr;gap:3rem;align-items:start}
  .soirees .ph{min-height:360px;height:100%}

  .mosaic{grid-template-columns:repeat(4,1fr);grid-auto-rows:175px}
  .mosaic .ph{aspect-ratio:auto;height:100%}
  .mosaic .ph.wide{grid-column:span 2}
  .mosaic .ph.tall{grid-row:span 2}
  .mosaic .ph.big{grid-column:span 2;grid-row:span 2}

  .avis-grid{grid-template-columns:repeat(3,1fr)}
  .trouver-grid{grid-template-columns:1fr 1.05fr;gap:3rem;align-items:stretch}
  .foot-grid{grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem}
}

/* ============================================================
   MOBILE (< 860px) — barre fixe Appeler / Réserver
   ============================================================ */
@media (max-width:859px){
  .mobi-bar{
    display:flex;gap:.6rem;position:fixed;left:0;right:0;bottom:0;z-index:50;
    padding:.7rem .9rem calc(.7rem + env(safe-area-inset-bottom));
    background:rgba(15,12,10,.96);backdrop-filter:blur(10px);
    border-top:1px solid var(--line);
  }
  .mobi-bar .btn{flex:1}
}