/* =====================================================================
   Taverne Romaine — page « Commander à emporter »
   Mêmes jetons que style.css (noir de four, or, rouge tomate, Cinzel).
   ===================================================================== */
.page-order { --tabsh: 3.6rem; }
.page-order .nav__cta .cartbtn { display: inline-flex; }
.cartbtn__n { display: inline-grid; place-items: center; min-width: 1.45rem; height: 1.45rem; padding: 0 .35rem; border-radius: 999px; background: var(--nero); color: var(--or); font: 800 .72rem/1 var(--sans); letter-spacing: 0; }
.cartbtn.is-bump .cartbtn__n { animation: bump .6s var(--ease); }
@keyframes bump { 30% { transform: scale(1.5); } 100% { transform: scale(1); } }

/* ---------- hero ---------- */
.ohero { position: relative; overflow: hidden; isolation: isolate; padding: calc(var(--navh) + clamp(2.5rem, 6vw, 5rem)) 0 clamp(2.5rem, 5vw, 4rem); background: radial-gradient(ellipse at 80% 30%, #2f1b10 0%, var(--nero) 62%); }
.ohero__logo { position: absolute; z-index: -1; right: -8vw; top: 50%; width: min(70vw, 820px); margin-top: calc(min(70vw, 820px) / -2); opacity: .08; pointer-events: none; will-change: transform; }
.ohero__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.ohero__title { font: 800 clamp(2.9rem, 7.6vw, 7.4rem)/.94 var(--serif); letter-spacing: -.01em; margin: .4rem 0 1.6rem; }
.ohero__gold .sc { background: linear-gradient(180deg, #fbefb5 0%, #e9d377 42%, #b78a2c 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.ohero__lede { max-width: 33rem; color: var(--doux); font-size: clamp(1rem, 1.2vw, 1.15rem); }
.ohero__cta { display: flex; gap: .8rem; flex-wrap: wrap; margin: 2rem 0 1.6rem; }
.ohero__arches { position: relative; height: clamp(380px, 46vw, 600px); }
.oarch { position: absolute; margin: 0; aspect-ratio: 3 / 4; border: 1px solid var(--or-3); box-shadow: 0 0 0 8px rgba(233, 211, 119, .05), 0 0 0 9px var(--trait), 0 30px 70px rgba(0, 0, 0, .55); background: var(--carbone); will-change: transform; }
.oarch img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.oarch::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(13, 10, 8, .75)); }
.oarch__badge { position: absolute; z-index: 2; left: 0; right: 0; bottom: .9rem; text-align: center; font: 700 .64rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--or); }
.oarch--1 { width: 42%; left: 0; top: 4%; }
.oarch--2 { width: 48%; left: 26%; bottom: 0; z-index: 2; }
.oarch--3 { width: 38%; right: 0; top: 0; }
.osteps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.6rem; border-top: 1px solid var(--trait); counter-reset: s; }
.osteps li { display: flex; align-items: center; gap: .9rem; font: 600 .78rem/1.35 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--doux); }
.osteps b { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--or); color: var(--or); font: 700 1rem/1 var(--serif); letter-spacing: 0; }

/* ---------- bandeau d'ingrédients ---------- */
.ingr { position: relative; background: var(--creme); color: var(--encre); padding: clamp(2.5rem, 5vw, 4rem) 0 1.6rem; overflow: hidden; }
.ingr::before, .ingr::after { content: ''; position: absolute; left: 0; right: 0; height: 18px; background: conic-gradient(var(--pomodoro) 25%, #fff 0 50%, var(--pomodoro) 0 75%, #fff 0) 0 0 / 18px 18px; }
.ingr::before { top: 0; } .ingr::after { bottom: 0; }
.ingr__title { text-align: center; margin-bottom: 1.8rem; font: 700 .74rem/1 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--rosso); }
.ingr__title span { display: inline-flex; align-items: center; gap: 1rem; }
.ingr__title span::before, .ingr__title span::after { content: ''; width: 3rem; height: 1px; background: currentColor; }
.ingr__viewport { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ingr__track { display: flex; width: max-content; padding: .4rem 0; will-change: transform; }
.ing { flex: none; margin-right: clamp(1.4rem, 3vw, 2.6rem); display: grid; justify-items: center; gap: .8rem; width: clamp(96px, 11vw, 140px); text-align: center; }
.ing__img { width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 2px solid var(--encre); box-shadow: 5px 5px 0 var(--pomodoro); }
.ing__img img { width: 100%; height: 100%; object-fit: cover; transition: scale .8s var(--ease); }
.ing:hover .ing__img img { scale: 1.14; }
.ing span { font: 700 .66rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.ingr__credit { text-align: center; margin-top: 1rem; font-size: .72rem; opacity: .55; }

/* ---------- carte à emporter ---------- */
.omenu { position: relative; background: var(--nero); padding-bottom: clamp(3rem, 6vw, 5rem); }
.omenu__tabsbar { position: sticky; top: var(--navh); z-index: 120; background: rgba(13, 10, 8, .9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--trait); transition: top .6s var(--ease); }
.page-order .nav.is-hidden ~ main .omenu__tabsbar { top: 0; }
.tabs { display: flex; gap: .5rem; padding-block: .7rem; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { flex: none; padding: .7rem 1.2rem; border-radius: 999px; border: 1px solid var(--trait); font: 700 .72rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--doux); transition: background .35s var(--ease), color .35s, border-color .35s; }
.tabs a:hover { border-color: var(--or); color: var(--or); }
.tabs a.is-active { background: var(--or); border-color: var(--or); color: var(--nero); }
.omenu__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: clamp(1.6rem, 3.5vw, 3.5rem); align-items: start; padding-top: clamp(2.5rem, 5vw, 4rem); }
.ocat { scroll-margin-top: calc(var(--navh) + var(--tabsh) + 1rem); margin-bottom: clamp(3.5rem, 7vw, 6rem); }
.ocat__head { display: grid; gap: .8rem; margin-bottom: 2rem; max-width: 40rem; }
.ocat__num { font: 700 .95rem/1 var(--serif); width: max-content; padding: .45rem .7rem; border: 1px solid var(--or); border-radius: 4px; color: var(--or); letter-spacing: .1em; }
.ocat__title { font: 800 clamp(2rem, 4.4vw, 3.8rem)/1 var(--serif); }
.ocat__kicker { font: 600 .72rem/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--or-2); }
.ocat__intro { color: var(--doux); }
.ocat__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.2rem; }
.ocat--feature .ocat__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; }

.dcard { position: relative; display: flex; flex-direction: column; background: var(--carbone); border: 1px solid var(--trait); border-radius: 18px; overflow: hidden; transform-style: preserve-3d; transition: border-color .4s; }
.dcard:hover { border-color: var(--or-2); }
.dcard.is-in { border-color: var(--or); box-shadow: 0 0 0 1px var(--or), 0 20px 60px rgba(233, 211, 119, .08); }
.dcard__img { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--braise); }
.ocat--feature .dcard__img { aspect-ratio: 4 / 5; }
.dcard__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale 1.1s var(--ease); }
.dcard:hover .dcard__img img { scale: 1.06; }
.dcard__img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 62%, rgba(13, 10, 8, .55)); pointer-events: none; }
.dcard__tag, .dcard__credit { position: absolute; z-index: 2; padding: .42rem .7rem; border-radius: 999px; font: 700 .6rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.dcard__tag { top: .8rem; left: .8rem; background: var(--or); color: var(--nero); }
.dcard__credit { bottom: .8rem; left: .8rem; background: rgba(13, 10, 8, .6); color: var(--doux); border: 1px solid rgba(255, 255, 255, .15); font-weight: 500; letter-spacing: .06em; text-transform: none; }
.dcard__body { display: flex; flex-direction: column; flex: 1; gap: .7rem; padding: 1.2rem 1.2rem 1.3rem; }
.dcard__name { font: 700 clamp(1.1rem, 1.5vw, 1.35rem)/1.2 var(--serif); letter-spacing: .01em; }
.dcard__desc { color: var(--doux); font-size: .92rem; }
.dcard__ing { display: flex; flex-wrap: wrap; gap: .35rem; }
.dcard__ing li { padding: .38rem .65rem; border-radius: 999px; border: 1px solid var(--trait); font: 600 .66rem/1 var(--sans); letter-spacing: .08em; color: var(--or); }
.dcard__foot { margin-top: auto; padding-top: .6rem; display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.dcard__price { font: 800 1.2rem/1 var(--serif); color: var(--or); }
.dcard__price small { display: block; margin-top: .25rem; font: 400 .66rem/1.2 var(--sans); color: var(--doux); letter-spacing: 0; }
.dcard__price--tbd { font: 600 .78rem/1.3 var(--sans); color: var(--doux); letter-spacing: .04em; }
.dvar { display: flex; gap: .4rem; flex-wrap: wrap; width: 100%; }
.dvar button { flex: 1; padding: .6rem .5rem; border: 1px solid var(--trait); border-radius: 10px; background: transparent; font: 600 .74rem/1.2 var(--sans); }
.dvar button b { display: block; color: var(--or); font: 800 .86rem/1.3 var(--serif); }
.dvar button[aria-pressed="true"] { background: var(--or); color: var(--nero); border-color: var(--or); }
.dvar button[aria-pressed="true"] b { color: var(--nero); }
.dadd { display: inline-flex; align-items: center; gap: .5rem; padding: .8rem 1.2rem; border-radius: 999px; border: 1px solid var(--or); background: var(--or); color: var(--nero); font: 800 .72rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; transition: background .35s, color .35s, transform .35s var(--ease); }
.dadd:hover { background: var(--creme); }
.dadd:active { transform: scale(.95); }
.qty { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem; border-radius: 999px; border: 1px solid var(--or); }
.qty button { width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 0; background: transparent; color: var(--or); font: 700 1.2rem/1 var(--sans); }
.qty button:hover { background: var(--or); color: var(--nero); }
.qty output { min-width: 1.6rem; text-align: center; font: 800 .95rem/1 var(--serif); }
.omenu__note { margin-top: 1rem; font-size: .85rem; color: var(--doux); max-width: 46rem; }

/* ---------- panier ---------- */
.cart { position: sticky; top: calc(var(--navh) + var(--tabsh) + 1rem); max-height: calc(100dvh - var(--navh) - var(--tabsh) - 2rem); overflow: auto; overscroll-behavior: contain; border-radius: 22px; background: linear-gradient(180deg, #1c1511, #120d0a); border: 1px solid var(--or-3); box-shadow: 0 40px 100px rgba(0, 0, 0, .55), inset 0 0 0 5px #120d0a, inset 0 0 0 6px var(--trait); scrollbar-width: thin; scrollbar-color: var(--or-3) transparent; }
.cart__inner { padding: 1.6rem 1.5rem 1.5rem; }
.cart__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px dashed var(--trait); }
.cart__title { font: 800 1.35rem/1 var(--serif); }
.cart__close { display: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid var(--trait); background: transparent; color: var(--or); font-size: 1.5rem; line-height: 1; }
.cart__empty { padding: 1.4rem 1rem; text-align: center; border: 1px dashed var(--trait); border-radius: 14px; color: var(--doux); }
.cart__empty span { font-size: .88rem; opacity: .75; }
.cart__lines { display: grid; gap: .1rem; }
.cl { display: grid; grid-template-columns: 1fr auto; gap: .3rem .8rem; align-items: center; padding: .85rem 0; border-bottom: 1px solid rgba(233, 211, 119, .12); }
.cl__name { font: 700 .95rem/1.25 var(--serif); }
.cl__name small { display: block; margin-top: .15rem; font: 500 .74rem/1.2 var(--sans); color: var(--doux); }
.cl__price { font: 700 .86rem/1 var(--serif); color: var(--or); text-align: right; white-space: nowrap; }
.cl .qty { justify-self: start; transform: scale(.88); transform-origin: left center; }
.cart__total { margin: 1rem 0 1.2rem; padding: 1rem 1.1rem; border-radius: 12px; background: rgba(233, 211, 119, .07); border: 1px dashed var(--trait); }
.cart__total p { display: flex; justify-content: space-between; align-items: baseline; }
.cart__total span { font: 700 .7rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--or); }
.cart__total b { font: 800 1.4rem/1 var(--serif); }
.cart__total small { display: block; margin-top: .6rem; font-size: .78rem; color: var(--doux); }
#orderForm { margin-top: 1.4rem; }
#pickField { margin-bottom: 1.1rem; }
.slots__group { width: 100%; margin: .2rem 0 .1rem; font: 700 .64rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--doux); }
.cart__fine { margin-top: .9rem; font-size: .76rem; color: var(--doux); text-align: center; }
.cart .field.two { grid-template-columns: 1fr 1fr; gap: .7rem; }
.cart__veil { position: fixed; inset: 0; z-index: 305; background: rgba(0, 0, 0, .6); opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility .5s; }
.cart__veil.is-on { opacity: 1; visibility: visible; }
.cartbar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 280; gap: .6rem; padding: .7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgba(7, 5, 4, .94) 35%); transition: transform .6s var(--ease); }
.cartbar.is-hidden { transform: translateY(125%); }
.cartbar__open { flex: 1; display: flex; align-items: center; justify-content: center; gap: .6rem; padding: 1rem .8rem; border-radius: 999px; border: 0; background: var(--or); color: var(--nero); font: 800 .7rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.cartbar__open b { font: 800 .9rem/1 var(--serif); letter-spacing: 0; }
.cartbar__call { width: 3.4rem; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--or); background: rgba(13, 10, 8, .85); color: var(--or); }
.fly { position: fixed; left: 0; top: 0; z-index: 2500; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background-size: cover; background-position: center; border: 2px solid var(--or); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); pointer-events: none; }
.cart .done__gem { width: 4.4rem; height: 4.4rem; }
.cart .done__title { font-size: 1.3rem; }
.cart .recap { max-width: none; font-size: .9rem; }
.cart .done__actions { flex-direction: column; align-items: stretch; }

/* ---------- retrait et horaires ---------- */
.osavoir { background: var(--carbone); border-top: 1px solid var(--trait); padding: clamp(4rem, 8vw, 7rem) 0; }
.osavoir__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.osavoir .h2 { max-width: 15ch; margin-bottom: 1.4rem; }
.osavoir__addr { font: 600 1.25rem/1.5 var(--serif); margin-bottom: 1rem; }
.osavoir__p { color: var(--doux); max-width: 34rem; }
.osavoir__cta { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.6rem; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .page-order .nav__tel { display: none; }
  .ohero__grid { grid-template-columns: 1fr; }
  .ohero__arches { height: clamp(320px, 62vw, 480px); max-width: 560px; margin-inline: auto; width: 100%; }
  .osteps { grid-template-columns: 1fr 1fr; }
  .osavoir__grid { grid-template-columns: 1fr; }
}
@media (max-width: 1000px) {
  .omenu__grid { grid-template-columns: 1fr; }
  .cartbar { display: flex; }
  .cart { position: fixed; z-index: 310; left: 0; right: 0; bottom: 0; top: auto; max-height: 90dvh; border-radius: 24px 24px 0 0; transform: translateY(104%); visibility: hidden; transition: transform .7s var(--ease), visibility .7s; }
  .cart.is-open { transform: none; visibility: visible; }
  .cart__close { display: grid; place-items: center; }
  .cart .field.two { grid-template-columns: 1fr 1fr; }
  .page-order .footer__bottom { padding-bottom: 6.5rem; }
}
@media (max-width: 700px) {
  .ocat--feature .ocat__grid { grid-template-columns: 1fr; }
  .ocat__grid { grid-template-columns: 1fr 1fr; gap: .8rem; }
  .dcard__body { padding: .9rem .9rem 1rem; }
  .dcard__desc { display: none; }
  .dcard__foot { flex-direction: column; align-items: stretch; }
  .dadd { justify-content: center; }
  .qty { justify-content: space-between; }
  .ocat--feature .dcard__desc { display: block; }
  .ocat--feature .dcard__foot { flex-direction: row; align-items: center; }
  .osteps li { font-size: .68rem; letter-spacing: .08em; }
  .cart .field.two { grid-template-columns: 1fr; }
  .page-order .nav__cta .cartbtn { display: none; }
}
@media (max-width: 460px) {
  .ocat__grid { grid-template-columns: 1fr; }
  .dcard__desc { display: block; }
}
html.reduce .ing__img img, html.reduce .dcard__img img { transition: none; }