/* ==========================================================================
   restaurant.css — Farang Kebab (page restaurant.html)
   Chargé APRÈS styles.css. 100% additif : ne modifie rien du site existant.
   Palette & tokens repris du design system Heaven Motorbikes (Saffron & Asphalt).
   ========================================================================== */

.page-restaurant { background: #F6F1E7; }

/* -------------------------------------------------- HERO */
.rst-hero{
  position:relative;
  padding:150px 0 66px;
  background:linear-gradient(150deg,#23211C 0%,#35322A 52%,#1A4A4F 100%);
  color:#FFFDF8;
  overflow:hidden;
}
.rst-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 85% 12%,rgba(232,137,12,.22),transparent 60%);
}
.rst-hero-inner{position:relative;z-index:1;max-width:760px;}
.rst-hero h1{color:#FFFDF8;}
.rst-hero h1 em{color:#E8890C;font-style:normal;}
.rst-hero-sub{
  margin:18px 0 22px;max-width:620px;
  font-size:1.06rem;line-height:1.65;color:rgba(255,253,248,.86);
}
.rst-hero-badges{
  list-style:none;margin:0 0 30px;padding:0;
  display:flex;flex-wrap:wrap;gap:10px;
}
.rst-hero-badges li{
  font-family:'Space Mono',monospace;font-size:.74rem;letter-spacing:.03em;
  padding:8px 15px;border-radius:999px;
  background:rgba(255,253,248,.06);border:1px solid rgba(255,253,248,.22);
  color:rgba(255,253,248,.92);
}
.rst-hero-actions{display:flex;flex-wrap:wrap;gap:14px;}

/* -------------------------------------------------- MENU (vraie carte : lignes + pointillés) */
.menu-section{padding:66px 0 12px;scroll-margin-top:120px;}

.menu-cols{
  column-count:2;
  column-gap:70px;
}
@media (max-width:860px){ .menu-cols{column-count:1;} }

.menu-cat{
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  page-break-inside:avoid;
  margin:0 0 42px;
}

.menu-cat-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-bottom:12px;margin-bottom:20px;
  border-bottom:1px solid #DFD6C2;
}
.menu-cat-head h2{
  margin:0;line-height:1;
  font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:clamp(1.5rem,3vw,1.9rem);color:#1A4A4F;
}
.menu-cat-mod{
  font-family:'Space Mono',monospace;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:#E8890C;white-space:nowrap;
}

.menu-sub{
  margin:22px 0 12px;
  font-family:'Space Mono',monospace;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:#6E6A5E;
}

.menu-row{margin-bottom:18px;}
.menu-row:last-child{margin-bottom:0;}

.menu-row-head{display:flex;align-items:flex-end;gap:6px;}
.menu-row-head-noprice{display:block;}

.m-name{
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1.08rem;
  color:#26251F;line-height:1.2;
}
.m-dots{
  flex:1 1 auto;min-width:20px;
  border-bottom:2px dotted #CDBF9E;
  transform:translateY(-5px);
}
.m-price{
  flex:none;white-space:nowrap;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1rem;color:#C26F05;
}
.m-desc{margin:6px 0 0;color:#6E6A5E;font-size:.9rem;line-height:1.55;}

.m-options{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:5px;}
.m-options li{
  position:relative;padding-left:16px;color:#35322A;font-size:.86rem;line-height:1.45;
}
.m-options li::before{
  content:"";position:absolute;left:0;top:.5em;
  width:5px;height:5px;border-radius:50%;background:#E8890C;
}

/* Paliers (Kebab Wrap : Classic / Maxi) */
.menu-row-sub{display:flex;align-items:flex-end;gap:6px;margin-top:9px;}
.m-sub-name{
  font-family:'Space Mono',monospace;font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:#6E6A5E;white-space:nowrap;
}
.menu-row-sub .m-price{font-size:.92rem;}

.m-sauces{color:#35322A;font-size:.95rem;}

/* -------------------------------------------------- HOW TO ORDER */
.order{padding:56px 0 64px;}
.order .section-head{margin-bottom:30px;}
.order-grid{
  display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.order-card{
  display:flex;flex-direction:column;align-items:flex-start;
  background:#FFFDF8;border:1px solid #DFD6C2;border-radius:18px;
  padding:26px 24px;text-decoration:none;color:inherit;
  transition:transform .35s cubic-bezier(.22,.8,.32,1),
             box-shadow .35s cubic-bezier(.22,.8,.32,1),
             border-color .35s cubic-bezier(.22,.8,.32,1);
}
a.order-card:hover{
  transform:translateY(-3px);
  border-color:rgba(232,137,12,.55);
  box-shadow:0 16px 34px -18px rgba(35,33,28,.5);
}
.order-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:12px;margin-bottom:16px;
  background:rgba(26,74,79,.08);color:#1A4A4F;
}
.order-icon svg{width:24px;height:24px;}
.order-card h3{font-family:'Space Grotesk',sans-serif;font-size:1.12rem;color:#26251F;margin:0 0 6px;}
.order-card p{color:#6E6A5E;font-size:.9rem;line-height:1.5;margin:0 0 16px;}
.order-cta{
  margin-top:auto;font-family:'Space Mono',monospace;font-size:.8rem;
  font-weight:700;color:#C26F05;text-decoration:none;
}
.order-cta-muted{color:#6E6A5E;font-weight:400;}

/* Carte WhatsApp mise en avant */
.order-card-wa{
  background:linear-gradient(155deg,#1A4A4F 0%,#23211C 100%);
  border-color:transparent;
}
.order-card-wa .order-icon{background:rgba(255,253,248,.12);color:#25D366;}
.order-card-wa h3{color:#FFFDF8;}
.order-card-wa p{color:rgba(255,253,248,.82);}
.order-card-wa .order-cta{color:#E8890C;}

.order-follow{
  margin-top:26px;text-align:center;color:#6E6A5E;font-size:.95rem;
}
.order-follow strong{color:#26251F;}

/* -------------------------------------------------- GALERIE (emplacements par plat)
   Pour brancher une vraie photo : dans la <figure> du plat, remplace
   <div class="rst-gallery-ph">…</div> par
   <img src="photo-XXX.webp" alt="Nom du plat" width="800" height="800" loading="lazy" decoding="async">
------------------------------------------------------------------------------- */
.rst-gallery{padding:12px 0 66px;}
.rst-gallery-intro{margin:-8px 0 26px;color:#6E6A5E;font-size:.98rem;}
.rst-gallery-grid{display:grid;gap:16px;grid-template-columns:repeat(2,1fr);}
.rst-gallery-item{margin:0;}
.rst-gallery-media{
  position:relative;aspect-ratio:1/1;overflow:hidden;
  border-radius:18px;border:1px solid #DFD6C2;background:#EDE6D6;
}
.rst-gallery-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.22,.8,.32,1);
}
.rst-gallery-item:hover .rst-gallery-media img{transform:scale(1.05);}
.rst-gallery-ph{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  color:#B4A583;text-align:center;padding:14px;
  background:repeating-linear-gradient(135deg,#EDE6D6 0 12px,#E7DFCB 12px 24px);
}
.rst-gallery-ph svg{width:34px;height:34px;opacity:.75;}
.rst-gallery-ph span{
  font-family:'Space Mono',monospace;font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:#9C9075;
}
.rst-gallery-item figcaption{
  margin-top:10px;text-align:center;
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:.95rem;color:#26251F;
}

/* -------------------------------------------------- RESPONSIVE */
@media (min-width:760px){
  .rst-gallery-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:620px){
  .rst-hero{padding:132px 0 54px;}
  .order-card{padding:20px;}
}
@media (prefers-reduced-motion:reduce){
  .order-card,.rst-gallery-media img{transition:none;}
  a.order-card:hover{transform:none;}
  .rst-gallery-item:hover .rst-gallery-media img{transform:none;}
}