/* =============================================================
   Berkach Cuisine Traiteur · page « Commander en ligne »
   Complète style.css (mêmes couleurs, mêmes champs, mêmes boutons).
   ============================================================= */

/* ---------- Hero ---------- */
.order-hero .page-media-frame { aspect-ratio: 4 / 3.6; }
.order-steps { display: grid; gap: 10px; counter-reset: none; }
.order-steps li { display: grid; grid-template-columns: 26px 1fr; column-gap: 10px; align-items: baseline; font-size: 13.5px; line-height: 1.4; color: var(--stone); }
.order-steps li span { grid-row: span 2; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--wine); color: #fff; font-size: 12.5px; font-weight: 600; }
.order-steps li b { color: var(--ink); font-size: 14.5px; }

/* ---------- Catégories (barre collante) ---------- */
.order { position: relative; padding-bottom: clamp(56px, 7vw, 96px); }
.cat-nav {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  border-block: 1px solid var(--mist);
  background: rgba(246, 241, 231, .9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: top .5s var(--ease-out);
}
.header.is-hidden ~ main .cat-nav { top: 0; }
.cat-nav-inner { display: flex; gap: 6px; padding-block: 10px; overflow-x: auto; scrollbar-width: none; }
.cat-nav-inner::-webkit-scrollbar { display: none; }
.cat-link { flex: none; display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border: 1px solid var(--mist); border-radius: var(--r-pill); background: #fff; font-size: 14px; white-space: nowrap; transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.cat-link:hover { border-color: var(--ink); }
.cat-link.is-active { border-color: var(--wine); background: var(--wine); color: #fff; }
.order .cat { scroll-margin-top: calc(var(--header-h) + 76px); }

/* ---------- Mise en page : carte + panier ---------- */
.order-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(24px, 3vw, 40px); align-items: start; padding-top: clamp(32px, 4vw, 48px); }
.order-main { display: grid; gap: clamp(48px, 6vw, 72px); }
.cat-head { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; margin-bottom: 20px; }
.cat-head p { margin-top: 6px; max-width: 46em; font-size: 15px; line-height: 1.55; color: var(--stone); }
.prods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

/* ---------- Carte produit ---------- */
.prod {
  position: relative;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--mist);
  border-radius: var(--r-card);
  background: #fff;
  transition: border-color .3s var(--ease), box-shadow .5s var(--ease);
}
.prod:hover { border-color: #d9ccb0; }
.prod--wide { grid-column: 1 / -1; grid-template-columns: 140px minmax(0, 1fr); }
.prod--wide .prod-img { width: 140px; }
.prod.in-cart { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.prod-img { position: relative; display: block; overflow: hidden; width: 104px; aspect-ratio: 1; border-radius: 12px; background: var(--lilac-2); }
.prod-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.prod:hover .prod-img img { transform: scale(1.06); }
.prod-img--ico { display: grid; place-items: center; background: linear-gradient(135deg, var(--lilac-2), var(--lilac)); color: var(--violet); }
.prod-img--ico .i { width: 40px; height: 40px; stroke-width: 1.3; }
.prod-body { display: grid; gap: 6px; min-width: 0; }
.prod-name { font-size: 16.5px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.prod-desc { font-size: 14px; line-height: 1.45; color: var(--stone); }
.prod-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 6px; }
.prod-price { font-size: 14px; color: var(--stone); }
.prod-price b { font-size: 17px; font-weight: 600; color: var(--ink); font-feature-settings: "tnum" 1; }
.prod-lot { white-space: nowrap; }
.prod-conf { display: grid; gap: 10px; margin-top: 4px; }
.prod-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.prod-opts-t { width: 100%; margin-bottom: 2px; font-size: 12.5px; font-weight: 600; color: var(--stone); }
.opt { position: relative; }
.opt input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.opt span { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 12px; border: 1px solid var(--mist); border-radius: var(--r-pill); background: #fff; font-size: 13px; line-height: 1.2; color: var(--stone); transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.opt:hover span { border-color: var(--ink); color: var(--ink); }
.opt input:checked + span { border-color: var(--ink); background: var(--lilac); color: var(--ink); }
.opt input:focus-visible + span { outline: 2px solid var(--violet); outline-offset: 2px; }
.field--mini input { height: 48px; padding: 20px 12px 6px; font-size: 15px; }
.field--mini label { top: 14px; left: 13px; font-size: 14px; }
.field--mini input:focus + label, .field--mini input:not(:placeholder-shown) + label { transform: translateY(-9px) scale(.76); }

.add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 14px 0 11px;
  border-radius: var(--r-pill);
  background: var(--wine);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color .25s var(--ease), transform .3s var(--ease-out);
}
.add .i { width: 16px; height: 16px; stroke-width: 2; }
.add:hover { background: var(--wine-2); }
.add:active { transform: scale(.96); }
.add[hidden], .qty[hidden] { display: none; }
.prod.is-added .add { animation: pop .5s var(--ease-out); }
@keyframes pop { 40% { transform: scale(1.08); } }
.prod-in { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 540; color: var(--violet); }
.prod-in .i { width: 15px; height: 15px; stroke-width: 2.2; }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--mist); border-radius: var(--r-pill); background: var(--parchment); }
.qty button { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--ink); transition: background-color .2s var(--ease); }
.qty button:hover { background: var(--lilac); }
.qty .i { width: 16px; height: 16px; stroke-width: 2; }
.qty output { min-width: 34px; text-align: center; font-weight: 600; font-feature-settings: "tnum" 1; }
.qty--sm button { width: 30px; height: 30px; }
.qty--sm .i { width: 14px; height: 14px; }
.qty--sm output { min-width: 28px; font-size: 14px; }

/* Sur devis */
.svc-mini--devis { margin-top: 0; }

/* ---------- Panier ---------- */
.order-aside { position: sticky; top: calc(var(--header-h) + 76px); transition: top .5s var(--ease-out); }
.header.is-hidden ~ main .order-aside { top: 76px; }
.cart-card { display: grid; gap: 16px; padding: 20px; border: 1px solid var(--mist); border-radius: var(--r-card); background: #fff; box-shadow: 0 24px 48px -36px rgba(37, 34, 30, .45); }
.cart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cart-head .h3 { display: inline-flex; align-items: center; gap: 8px; }
.cart-head .h3 .i { color: var(--violet); }
.cart-empty { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 12px; background: var(--parchment); font-size: 14.5px; line-height: 1.5; color: var(--stone); }
.cart-empty .i { margin-top: 1px; color: var(--violet); }
.cart-lines { display: grid; max-height: min(46vh, 420px); overflow-y: auto; margin-inline: -4px; padding-inline: 4px; }
.recap .cart-lines { max-height: none; }
.cl { display: grid; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--mist); }
.cl:first-child { padding-top: 0; }
.cl-main { display: grid; gap: 2px; }
.cl-main b { font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.cl-main small { font-size: 12.5px; line-height: 1.4; color: var(--stone); overflow-wrap: anywhere; }
.cl-side { display: flex; align-items: center; gap: 10px; }
.cl-total { margin-left: auto; font-weight: 600; font-feature-settings: "tnum" 1; white-space: nowrap; }
.cl-qte { font-size: 14px; color: var(--stone); }
.cl-del { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--stone); transition: background-color .2s var(--ease), color .2s var(--ease); }
.cl-del:hover { background: #f6e3e1; color: var(--error); }
.cl-del .i { width: 15px; height: 15px; }
.cart-sum { display: grid; gap: 8px; margin-top: 4px; }
.cart-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cart-row--soft { font-size: 13.5px; color: var(--stone); }
.cart-row--soft span + span { text-align: right; }
.cart-row--total { padding-top: 10px; border-top: 1px solid var(--ink); font-size: 16px; }
.cart-row--total small { font-size: 12.5px; font-weight: 400; color: var(--stone); }
.cart-row--total b { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; font-feature-settings: "tnum" 1; }
.cart-min { display: grid; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--lilac-2); font-size: 13.5px; line-height: 1.45; }
.cart-min-bar { display: block; height: 5px; overflow: hidden; border-radius: 3px; background: rgba(128, 96, 42, .18); }
.cart-min-bar i { display: block; height: 100%; border-radius: inherit; background: var(--violet); transition: width .5s var(--ease-out); }
.cart-note { font-size: 12.5px; line-height: 1.45; text-align: center; color: var(--stone); }

/* Barre panier (mobile) */
.cart-bar {
  position: fixed;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  left: 12px;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 8px 8px 18px;
  border: 1px solid var(--mist);
  border-radius: 22px;
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 20px 40px -24px rgba(37, 34, 30, .5);
  transition: transform .6s var(--ease-out);
}
.cart-bar[hidden] { display: none !important; }
.cart-bar.is-away { transform: translateY(170%); }
.cart-bar-txt { display: grid; line-height: 1.2; }
.cart-bar-txt b { font-size: 18px; font-weight: 600; font-feature-settings: "tnum" 1; }
.cart-bar-txt small { font-size: 12.5px; color: var(--stone); }
.cart-bar .btn { min-height: 44px; }

/* ---------- Finaliser ---------- */
.checkout { background: #fff; border-top: 1px solid var(--mist); }
.checkout-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; margin-top: 40px; }
.checkout-card { background: var(--parchment); }
.checkout-card .field input, .checkout-card .field textarea, .checkout-card .field select { background: #fff; }
.recap { position: sticky; top: calc(var(--header-h) + 24px); }
.checkout .form-grid { gap: 16px; }
.co-step { display: grid; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid var(--mist); }
.co-step-t { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 17px; font-weight: 600; }
.co-step-t span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--wine); color: #fff; font-size: 13px; }
.co-step-note { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; color: var(--stone); }
.co-step-note .i { width: 17px; height: 17px; margin-top: 1px; color: var(--violet); }
.co-step-note[hidden], .livraison[hidden] { display: none; }
.livraison { display: grid; gap: 12px; }

.field select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 58px;
  padding: 24px 40px 8px 14px;
  border: 1px solid var(--mist);
  border-radius: 12px;
  background: var(--parchment) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%2325221e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 16px;
  font-size: 16px;
  outline: none;
  cursor: pointer;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.checkout-card .field select { background-color: #fff; }
.field select:hover { border-color: #d6cdbd; }
.field select:focus { border-color: var(--ink); box-shadow: 0 0 0 4px var(--lilac-2); }
.field--select label { transform: translateY(-10px) scale(.76); }
.field.is-invalid select { border-color: var(--error); }

.choices { display: grid; gap: 8px; }
.choices--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: inherit; }
.choice-box { display: flex; align-items: center; gap: 12px; height: 100%; padding: 12px 14px; border: 1px solid var(--mist); border-radius: 14px; background: #fff; transition: border-color .25s var(--ease), background-color .25s var(--ease), box-shadow .25s var(--ease); }
.choice:hover .choice-box { border-color: #cfc3aa; }
.choice input:checked + .choice-box { border-color: var(--wine); background: var(--lilac-2); box-shadow: 0 0 0 1px var(--wine); }
.choice input:focus-visible + .choice-box { outline: 2px solid var(--violet); outline-offset: 2px; }
.choice-ico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--parchment); color: var(--violet); }
.choice input:checked + .choice-box .choice-ico { background: var(--wine); color: #fff; }
.choice-txt { display: grid; gap: 2px; min-width: 0; }
.choice-txt b { font-size: 15px; font-weight: 600; }
.choice-txt small { font-size: 13px; line-height: 1.35; color: var(--stone); }
.choice-box .tag { margin-left: auto; }
.choice.is-off { cursor: not-allowed; }
.choice.is-off .choice-box { background: transparent; border-style: dashed; }
.choice.is-off .choice-txt, .choice.is-off .choice-ico { opacity: .55; }

/* Confirmation */
.checkout-card form[hidden] { display: none; }
.checkout-grid.is-done { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.checkout-grid.is-done .recap { display: none; }
.order-done { display: grid; gap: 16px; justify-items: start; outline: none; }
.order-done[hidden] { display: none; }
.order-done > p { max-width: 36em; color: var(--stone); }
.done-mark--on path { animation: draw .9s var(--ease-out) .2s both; }
.done-mark--warn { color: var(--wine); }
.done-mark--warn .i { width: 26px; height: 26px; }
.done-num { font-size: 15px; color: var(--ink) !important; }
.done-num b { font-size: 18px; letter-spacing: .02em; }
.done-when { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.done-when .i { margin-top: 1px; color: var(--violet); }
.done-lines { width: 100%; padding: 14px 16px; border: 1px solid var(--mist); border-radius: 14px; background: #fff; }
.done-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 14.5px; }
.done-lines small { color: var(--stone); }
.done-lines b { white-space: nowrap; font-feature-settings: "tnum" 1; }
.done-lines .done-total { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--ink); font-size: 16px; }
.done-next { display: grid; gap: 10px; counter-reset: n; font-size: 14.5px; line-height: 1.5; }
.done-next li { counter-increment: n; display: grid; grid-template-columns: 28px 1fr; gap: 10px; }
.done-next li::before { content: counter(n); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--lilac); font-size: 13px; font-weight: 600; }
.done-help { font-size: 14px; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .prods { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1024px) {
  .order-layout, .checkout-grid { grid-template-columns: minmax(0, 1fr); }
  .order-aside { display: none; }
  .prods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cart-bar { display: flex; }
  .recap { position: static; order: -1; }
  .footer-bottom { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
}
@media (max-width: 760px) {
  .prods { grid-template-columns: minmax(0, 1fr); }
  .prod--wide { grid-template-columns: 104px minmax(0, 1fr); }
  .prod--wide .prod-img { width: 104px; }
  .choices--2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .prod, .prod--wide { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; padding: 12px; }
  .prod-img, .prod--wide .prod-img { width: 84px; }
  .cart-bar .btn { padding-inline: 14px; }
}