:root{
  --green-900: #0E463D;
  --green-800: #12574C;
  --green-700: #1B6D5F;
  --cream-500: #EDE0D3;
  --cream-400: #F4ECE2;
  --neutral-ink: #2C2C2A;
  --neutral-muted: #6B6862;
  --neutral-surface: #FAF7F2;
  --neutral-border: #E4DCD1;
  --terracotta-600: #B5651D;
  --terracotta-700: #954F16;

  --color-primary: var(--green-800);
  --color-primary-hover: var(--green-900);
  --color-secondary: var(--cream-500);
  --color-secondary-hover: var(--cream-400);
  --color-accent: var(--terracotta-600);
  --color-accent-hover: var(--terracotta-700);

  --text-body: var(--neutral-ink);
  --text-muted: var(--neutral-muted);
  --text-on-dark: var(--cream-500);
  --text-on-light: var(--green-800);

  --surface-page: #FFFFFF;
  --surface-alt: var(--neutral-surface);
  --surface-dark: var(--green-800);
  --surface-card: var(--neutral-surface);
  --border-default: var(--neutral-border);
  --border-on-dark: rgba(237,224,211,0.35);

  --font-heading: 'Rubik', system-ui, sans-serif;
  --font-body: 'Geologica', system-ui, sans-serif;
  --font-accent-italic: 'Geologica', system-ui, sans-serif;

  --text-h1-size: 40px; --text-h1-line: 1.15; --text-h1-weight: 600;
  --text-h2-size: 28px; --text-h2-line: 1.2; --text-h2-weight: 600;
  --text-h3-size: 20px; --text-h3-line: 1.3; --text-h3-weight: 600;
  --text-body-size: 16px; --text-body-line: 1.6; --text-body-weight: 400;
  --text-small-size: 13px; --text-small-line: 1.5; --text-small-weight: 400;
  --text-label-size: 13px; --text-label-line: 1.3; --text-label-weight: 600; --text-label-tracking: 0.06em;

  --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 32px; --space-6: 48px; --space-7: 64px; --space-8: 96px;

  --radius-button: 8px; --radius-card: 12px; --radius-field: 6px; --radius-badge: 20px; --radius-photo: 12px;

  --shadow-card: 0 2px 8px rgba(44,44,42,0.08);
  --shadow-sticky: 0 6px 20px rgba(18,87,76,0.28);
  --shadow-popup: 0 20px 48px rgba(18,87,76,0.35);
}

*{box-sizing:border-box}
body{margin:0;font-family:var(--font-body);color:var(--text-body);background:var(--surface-page);font-size:var(--text-body-size);line-height:var(--text-body-line)}
h1,h2,h3{font-family:var(--font-heading);margin:0}
h1{font-size:var(--text-h1-size);line-height:var(--text-h1-line);font-weight:var(--text-h1-weight)}
h2{font-size:var(--text-h2-size);line-height:var(--text-h2-line);font-weight:var(--text-h2-weight)}
h3{font-size:var(--text-h3-size);line-height:var(--text-h3-line);font-weight:var(--text-h3-weight)}
p{margin:0}
a{color:var(--color-primary)}
a:not(.btn):hover{color:var(--color-primary-hover)}

html { scroll-behavior: smooth; }
body { margin: 0; background: var(--surface-alt); font-family: var(--font-body); }
a { color: var(--color-primary); text-decoration: none; }
a:not(.btn):hover { color: var(--green-700); }

@keyframes bbFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes bbRide { 0%,100% { transform: scale(1.06) translate(0,0); } 25% { transform: scale(1.06) translate(-0.6%,-1%); } 50% { transform: scale(1.09) translate(0,-1.6%); } 75% { transform: scale(1.06) translate(0.6%,-1%); } }
@keyframes bbPromoIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes bbPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(237,224,211,.45); } 70% { box-shadow: 0 0 0 18px rgba(237,224,211,0); } }

[data-offer] { cursor: default; }
[data-offer="light"] h3 { color: var(--color-primary); }
[data-offer="light"] p { color: var(--text-muted); }
[data-offer="light"] [data-offer-tag] { color: var(--color-primary); background: rgba(18,87,76,.09); }
[data-offer="light"] [data-offer-price] { color: var(--color-accent); }
[data-offer]:hover { transform: translateY(-8px); }
[data-offer="light"]:hover { background: linear-gradient(115deg,#2E8F7C 0%,var(--green-700) 30%,var(--color-primary) 62%,var(--green-900) 100%) !important; border-color: var(--border-on-dark) !important; box-shadow: 0 26px 54px rgba(14,70,61,.35); }
[data-offer="light"]:hover p { color: rgba(237,224,211,.92); }
[data-offer="light"]:hover [data-offer-tag] { background: rgba(237,224,211,.22); color: #FFFFFF; }
[data-offer="light"]:hover [data-offer-price] { color: #FFFFFF; }
[data-offer="light"]:hover h3 { color: #FFFFFF; }
[data-offer="light"] [data-offer-visual] { transition: box-shadow .25s ease; }
[data-offer="light"]:hover [data-offer-visual] { box-shadow: inset 0 0 0 1px rgba(237,224,211,.35); }

[data-two-grid][data-two-grid] { grid-template-columns: 1fr 1fr !important; }
[data-three-grid][data-three-grid] { grid-template-columns: repeat(3, 1fr) !important; }
[data-offers-grid][data-offers-grid] { grid-template-columns: repeat(4, 1fr) !important; }
@media (max-width: 1024px) { [data-offers-grid][data-offers-grid] { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 620px) { [data-offers-grid][data-offers-grid] { grid-template-columns: 1fr !important; } }
@media (max-width: 860px) {
  [data-two-grid][data-two-grid], [data-three-grid][data-three-grid] { grid-template-columns: 1fr !important; }
}

[data-shine] { position: relative; overflow: hidden; isolation: isolate; }
[data-shine]::after {
  content: ""; position: absolute; top: -60%; bottom: -60%; left: -140%; width: 55%;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.55) 45%, rgba(255,255,255,.75) 50%, rgba(255,255,255,.55) 55%, transparent 100%);
  transform: skewX(-18deg); pointer-events: none; z-index: 1;
  display: none;
}
@keyframes bbShine { 0% { left: -140%; } 55%, 100% { left: 165%; } }
@keyframes bbMarquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

[data-marquee] { animation: bbMarquee 34s linear infinite; will-change: transform; }
[data-marquee]:hover { animation-play-state: paused; }
[data-nav-panel] { opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; }
[data-nav-drop]:hover [data-nav-panel], [data-nav-drop]:focus-within [data-nav-panel], [data-nav-drop][data-open="true"] [data-nav-panel] { opacity: 1; visibility: visible; transform: translateY(0); }
[data-nav-item]:hover { background: rgba(237,224,211,.14); opacity: 1 !important; }

[data-burger-track] { scrollbar-width: none; -ms-overflow-style: none; }
[data-burger-track]::-webkit-scrollbar { display: none; }
[data-burger-track] > [data-burger-card] { flex: 0 0 calc((100% - 44px) / 3); scroll-snap-align: start; }
@media (max-width: 1000px) { [data-burger-track] > [data-burger-card] { flex: 0 0 calc((100% - 22px) / 2); } }
@media (max-width: 620px) { [data-burger-track] > [data-burger-card] { flex: 0 0 86%; } }
[data-burger-card] { transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
[data-burger-card]:hover { transform: translateY(-6px); background: linear-gradient(115deg,#2E8F7C 0%,var(--green-700) 30%,var(--color-primary) 62%,var(--green-900) 100%) !important; border-color: var(--border-on-dark) !important; box-shadow: 0 26px 54px rgba(14,70,61,.35) !important; }
@keyframes bbFloatA { 0%, 100% { transform: translate3d(0,0,0) rotate(-.6deg); } 50% { transform: translate3d(0,-5px,0) rotate(.6deg); } }
@keyframes bbFloatB { 0%, 100% { transform: translate3d(0,-4px,0) rotate(.7deg); } 50% { transform: translate3d(0,2px,0) rotate(-.7deg); } }
[data-b-price] { animation: bbFloatA 4.6s ease-in-out infinite; will-change: transform; }
[data-b-price2] { animation: bbFloatB 5.4s ease-in-out infinite .4s; will-change: transform; }
[data-burger-card]:hover [data-b-price], [data-burger-card]:hover [data-b-price2] { animation-duration: 2.4s; }
[data-b-name], [data-b-price], [data-b-price2], [data-b-desc] { transition: background .25s ease, color .25s ease, border-color .25s ease; }
[data-burger-card]:hover [data-b-desc] { color: rgba(237,224,211,.92) !important; }
[data-burger-card]:hover [data-b-name] { background: linear-gradient(115deg,#FFFBF6 0%,var(--cream-500) 45%,#D9C7B3 100%) !important; color: var(--color-primary) !important; }
[data-burger-card]:hover [data-b-price] { background: linear-gradient(115deg,#FFFBF6 0%,var(--cream-500) 45%,#D9C7B3 100%) !important; color: var(--color-primary) !important; }
[data-burger-card]:hover [data-b-price2] { background: linear-gradient(115deg,#3AA48E 0%,#2E8F7C 45%,var(--green-700) 100%) !important; color: #FFFFFF !important; }
[data-b-order] { transition: background .25s ease, color .25s ease, box-shadow .25s ease; }
[data-burger-card]:hover [data-b-order] { background: linear-gradient(115deg,#FFFBF6 0%,var(--cream-500) 45%,#D9C7B3 100%) !important; color: var(--color-primary) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 6px 16px rgba(14,70,61,.3) !important; }
[data-burger-card]:hover [data-b-reserve] { color: var(--color-secondary) !important; border-color: rgba(237,224,211,.65) !important; }
[data-b-reserve]:hover { background: rgba(18,87,76,.08); }
[data-burger-card]:hover [data-b-reserve]:hover { background: rgba(237,224,211,.16); }
[data-burger-card]:hover [data-b-photo] { box-shadow: inset 0 0 0 1px rgba(237,224,211,.35), 0 10px 24px rgba(14,70,61,.3); }
[data-burger-arrow]:hover { filter: brightness(1.12); }
@media (max-width: 1330px) { [data-burger-arrow][data-dir="prev"] { left: 4px !important; } [data-burger-arrow][data-dir="next"] { right: 4px !important; } }
@media (max-width: 760px) {
  [data-burger-shell] { padding-bottom: 60px !important; }
  [data-burger-arrow] { width: 44px !important; height: 44px !important; top: auto !important; bottom: 0 !important; transform: none !important; }
  [data-burger-arrow][data-dir="prev"] { left: 50% !important; margin-left: -50px; }
  [data-burger-arrow][data-dir="next"] { right: 50% !important; margin-right: -50px; }
}

[data-band-track] { transform: translate3d(0,0,0); }
[data-band-card] { flex: 0 0 236px; }
@media (max-width: 760px) { [data-band-card] { flex: 0 0 168px; box-shadow: none !important; } [data-band-card] > div { height: 132px !important; } }

[data-nav-toggle] { display: none; }
#cart-open-btn-mobile { display: none; }
@media (max-width: 1024px) {
  [data-nav-toggle] { display: flex !important; }
  #cart-open-btn-mobile { display: flex !important; }
  header nav[data-nav-main] { display: none !important; }
  header nav[data-nav-main][data-open="true"] { display: flex !important; flex-basis: 100%; flex-direction: column; align-items: flex-start !important; gap: 2px !important; padding: 6px 0 10px; max-height: calc(100vh - 150px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
  header nav[data-nav-main][data-open="true"] > a, header nav[data-nav-main][data-open="true"] > div { width: 100%; padding: 9px 4px; font-size: 15px !important; }
  header [data-nav-actions] { display: none !important; }
  header [data-nav-actions][data-open="true"] { display: flex !important; flex-basis: 100%; justify-content: flex-start !important; padding-bottom: 8px; }
  header [data-nav-panel] { position: static !important; padding-top: 0 !important; max-height: 0; overflow: hidden; opacity: 1 !important; visibility: visible !important; transform: none !important; transition: max-height .22s ease; }
  header [data-nav-panel][data-open="true"] { max-height: 240px; padding-top: 6px !important; }
  header [data-cart-toggle] { padding: 10px 12px !important; font-size: 13px !important; }
  header [data-nav-panel] > div { box-shadow: none !important; background: rgba(237,224,211,.08) !important; }
}

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

@media (max-width: 1024px) {
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  h1 { font-size: 40px !important; }
  h2 { font-size: 30px !important; line-height: 1.15 !important; }
  h3 { font-size: 24px !important; }
  section { padding-left: 20px !important; padding-right: 20px !important; }
  header > div { flex-wrap: wrap !important; justify-content: space-between !important; gap: 10px !important; padding: 10px 16px !important; }
  header img[alt*="Bistro Burger"] { height: 38px !important; }
  #reservation form { padding: 26px !important; }
  img[alt*="Burger signature"] { object-position: 62% 50% !important; }
}

@media (max-width: 700px) {
  h1 { font-size: 32px !important; }
  h2 { font-size: 25px !important; }
  h3 { font-size: 21px !important; }
  section { padding-top: 56px !important; padding-bottom: 56px !important; }
  #accueil { padding-left: 0 !important; padding-right: 0 !important; }
  #accueil > div { padding: 40px 16px 48px !important; min-height: 0 !important; }
  #accueil h1, #accueil p, #accueil > div > div { max-width: 100% !important; }
  #plat-du-jour > div > div > div { padding: 28px 22px !important; }
  #carte > div > div[style*="box-shadow"] { padding: 28px 20px !important; }
  p, li { font-size: 15px !important; }
  footer { padding-left: 20px !important; padding-right: 20px !important; }
}

/* ---- component styles (replace the design-system React components) ---- */
.btn { font-family: var(--font-heading); font-weight: 600; font-size: 16px; padding: 14px 26px; border-radius: var(--radius-button); border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: filter .15s ease, transform .1s ease; text-decoration: none; }
.btn:hover { filter: brightness(0.94); }
.btn-sm { font-size: 14px; padding: 10px 18px; }
.btn-primary { background: var(--color-primary); color: var(--color-secondary); }
.btn-on-green { background: var(--color-secondary); color: var(--color-primary); }
.btn-outline { background: transparent; color: var(--color-primary); border: 1.5px solid var(--color-primary); }
.btn-outline-on-green { background: transparent; color: var(--color-secondary); border: 1.5px solid var(--color-secondary); }
.btn-gradient { justify-content: center; background: linear-gradient(115deg,#2E8F7C 0%,var(--green-700) 30%,var(--color-primary) 62%,var(--green-900) 100%); color: var(--color-secondary); box-shadow: inset 0 1px 0 rgba(237,224,211,.3), inset 0 -1px 0 rgba(14,70,61,.5), 0 6px 18px rgba(18,87,76,.28); }
.btn-cream { background: linear-gradient(115deg,#FFFBF6 0%,var(--cream-500) 45%,#D9C7B3 100%); color: var(--color-primary); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(160,138,116,.4); }
.btn-hero-pill { border-radius: var(--radius-button); padding: 11px 24px; font-size: 14.5px; background: linear-gradient(115deg,#FFFBF6 0%,var(--cream-500) 45%,#D9C7B3 100%); color: var(--color-primary); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 12px 30px rgba(14,70,61,.45); }
.btn-hero-pill-outline { border-radius: var(--radius-button); padding: 11px 24px; font-size: 14.5px; }
.btn-cta { justify-content: center; background: linear-gradient(115deg,#FFFBF6 0%,var(--cream-500) 45%,#D9C7B3 100%); color: var(--color-primary); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(160,138,116,.4), var(--shadow-popup); }
.btn-submit { width: 100%; justify-content: center; font-size: 16px; background: linear-gradient(115deg,#FFFBF6 0%,var(--cream-500) 45%,#D9C7B3 100%); color: var(--color-primary); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 8px 22px rgba(14,70,61,.35); }
.btn-sticky { border-radius: var(--radius-badge); font-weight: 600; font-size: 14.5px; letter-spacing: 0; background: linear-gradient(115deg,#FFFBF6 0%,var(--cream-500) 45%,#D9C7B3 100%); color: var(--color-primary); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(160,138,116,.4), var(--shadow-sticky); }
.btn-sticky-primary { border-radius: var(--radius-badge); font-weight: 600; font-size: 14.5px; letter-spacing: 0; background: linear-gradient(115deg,#2E8F7C 0%,var(--green-700) 30%,var(--color-primary) 62%,var(--green-900) 100%); color: var(--color-secondary); box-shadow: inset 0 1px 0 rgba(237,224,211,.3), inset 0 -1px 0 rgba(14,70,61,.5), 0 6px 18px rgba(18,87,76,.28), var(--shadow-sticky); }

.badge { display: inline-flex; align-items: center; font-family: var(--font-heading); font-weight: 600; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; padding: 5px 14px; border-radius: var(--radius-badge); }
.badge-green { background: var(--color-primary); color: var(--color-secondary); }
.badge-cream { background: var(--color-secondary); color: var(--color-primary); }

.tabs { display: flex; gap: var(--space-4); border-bottom: 1px solid var(--border-default); flex-wrap: wrap; }
.tab { font-family: var(--font-body); font-size: 14px; padding: 8px 4px; background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-muted); font-weight: 400; cursor: pointer; }
@media (max-width: 700px) {
  .tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { white-space: nowrap; flex: 0 0 auto; }
}
.tab.active { border-bottom-color: var(--color-primary); color: var(--color-primary); font-weight: 600; }

.card { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.card-padded { padding: var(--space-4); }

.field-check { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-size: 15px; cursor: pointer; }
.field-check input { display: none; }
.field-check .box { width: 20px; height: 20px; border-radius: 5px; flex-shrink: 0; border: 1.5px solid var(--border-on-dark); display: flex; align-items: center; justify-content: center; color: transparent; font-size: 13px; line-height: 1; }
.field-check input:checked ~ .box { border: none; background: var(--color-secondary); color: var(--color-primary); }

.dialog-backdrop { position: fixed; inset: 0; background: rgba(44,44,42,0.5); display: flex; align-items: center; justify-content: center; z-index: 100; }
.dialog-backdrop[hidden] { display: none; }
.dialog-box { background: var(--color-primary); color: var(--color-secondary); border-radius: var(--radius-card); padding: var(--space-5); max-width: 420px; width: 90%; box-shadow: var(--shadow-popup); font-family: var(--font-body); }
@media (max-width: 640px) { #promo-close { width: 44px !important; height: 44px !important; } }

.cart-page-backdrop { position: fixed; inset: 0; z-index: 100; background: linear-gradient(180deg,var(--surface-alt),var(--cream-400)); }
.cart-page-backdrop[hidden] { display: none; }
.cart-page { height: 100%; display: flex; flex-direction: column; color: var(--color-primary); font-family: var(--font-body); }
.cart-page-header { flex: none; display: flex; align-items: center; gap: 16px; padding: 18px 24px; border-bottom: 1px solid var(--border-default); }
.cart-page-back { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border-default); background: transparent; color: var(--color-primary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s ease; }
.cart-page-back:hover { background: rgba(18,87,76,.08); }
.cart-page-body { flex: 1; overflow-y: auto; padding: 24px; max-width: 640px; width: 100%; margin: 0 auto; box-sizing: border-box; }
.cart-page-sticky-footer { background: var(--cream-400); padding: 18px 24px 24px; margin: 22px -24px -24px; border-top: 1px solid var(--border-default); }
.cart-open-trigger { flex: none; }

.cart-page-body.cart-catalog-body { padding: 0; max-width: none; overflow: hidden; display: flex; }
.cart-shop-layout { display: flex; width: 100%; height: 100%; max-width: 1180px; margin: 0 auto; }
.cart-shop-products { flex: 1; min-width: 0; overflow-y: auto; padding: 24px; box-sizing: border-box; }
.cart-shop-summary { flex: none; width: 340px; overflow-y: auto; padding: 24px; box-sizing: border-box; border-left: 1px solid var(--border-default); display: flex; flex-direction: column; }
.cart-filled-panel { display: flex; flex-direction: column; flex: 1; }
#cart-filled[hidden] { display: none; }
.cart-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin-top: 18px; }
.cart-product-card { display: flex; flex-direction: column; gap: 10px; border-radius: 16px; padding: 12px; background: linear-gradient(115deg,#2E8F7C 0%,var(--green-700) 40%,var(--color-primary) 100%); box-shadow: inset 0 1px 0 rgba(237,224,211,.22), 0 5px 14px rgba(14,70,61,.28); transition: background .25s ease, box-shadow .25s ease, transform .25s ease; }
.cart-product-card:hover { transform: translateY(-4px); background: linear-gradient(115deg,#2E8F7C 0%,var(--green-700) 30%,var(--color-primary) 62%,var(--green-900) 100%); box-shadow: inset 0 1px 0 rgba(237,224,211,.3), 0 16px 34px rgba(14,70,61,.4); }
.cart-product-card:hover .cart-product-thumb { box-shadow: inset 0 0 0 1px rgba(237,224,211,.35); }
.cart-product-thumb { aspect-ratio: 4/3; border-radius: 12px; overflow: hidden; background: linear-gradient(150deg,rgba(237,224,211,.26),rgba(237,224,211,.1)); display: flex; align-items: center; justify-content: center; }
.cart-product-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-product-thumb span { font-family: var(--font-heading); font-weight: 600; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: rgba(237,224,211,.5); }
.cart-product-info { display: flex; flex-direction: column; gap: 3px; }
.cart-product-name { font-family: var(--font-heading); font-weight: 700; font-size: 14px; color: var(--color-secondary); }
.cart-product-desc { font-size: 12px; line-height: 1.45; color: rgba(237,224,211,.75); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.cart-product-price { font-size: 13px; color: rgba(237,224,211,.8); }
.cart-product-actions { display: flex; justify-content: flex-end; }
.cart-product-add { width: 30px; height: 30px; border-radius: 50%; border: none; background: linear-gradient(115deg,#FFFBF6 0%,var(--color-secondary) 38%,var(--cream-500) 66%,#D9C7B3 100%); color: var(--color-primary); font-size: 17px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 3px 9px rgba(14,70,61,.35); transition: filter .15s ease; }
.cart-product-add:hover { filter: brightness(1.08); }

@media (max-width: 860px) {
  .cart-page-body.cart-catalog-body { overflow-y: auto; display: block; }
  .cart-shop-layout { flex-direction: column; height: auto; max-width: none; }
  .cart-shop-products, .cart-shop-summary { overflow: visible; width: 100%; }
  .cart-shop-summary { border-left: none; border-top: 1px solid var(--border-default); margin-top: 18px; padding-top: 18px; }
}

.upsell-list { display: flex; flex-direction: column; gap: 8px; max-height: 280px; overflow-y: auto; margin: 16px 0; padding-right: 4px; }
.upsell-group-label { font-family: var(--font-heading); font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin: 10px 0 2px; }
.upsell-group-label:first-child { margin-top: 0; }
.upsell-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; cursor: pointer; padding: 12px 14px; border-radius: 14px; border: none; background: linear-gradient(115deg,#2E8F7C 0%,var(--green-700) 40%,var(--color-primary) 100%); box-shadow: inset 0 1px 0 rgba(237,224,211,.22), 0 5px 14px rgba(14,70,61,.28); color: var(--color-secondary); font-family: var(--font-body); font-size: 14px; transition: background .15s ease, box-shadow .15s ease, color .15s ease; }
.upsell-item:hover { box-shadow: inset 0 1px 0 rgba(237,224,211,.32), 0 6px 18px rgba(14,70,61,.34); }
.upsell-item.is-selected { background: linear-gradient(115deg,#FFFBF6 0%,var(--color-secondary) 38%,var(--cream-500) 66%,#D9C7B3 100%); color: var(--color-primary); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 5px 14px rgba(14,70,61,.28); }
.upsell-item-name { flex: 1; min-width: 0; }
.upsell-item-price { flex: none; opacity: .85; font-size: 13px; color: rgba(237,224,211,.85); }
.upsell-item.is-selected .upsell-item-price { color: var(--text-muted); }
.upsell-item-check { flex: none; width: 26px; height: 26px; border-radius: 50%; border: none; background: linear-gradient(115deg,#FFFBF6 0%,var(--color-secondary) 38%,var(--cream-500) 66%,#D9C7B3 100%); color: var(--color-primary); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 3px 9px rgba(14,70,61,.35); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; }
.upsell-item.is-selected .upsell-item-check { background: var(--color-primary); color: var(--color-secondary); box-shadow: 0 3px 9px rgba(14,70,61,.35); }
.upsell-skip { display: block; width: 100%; text-align: center; margin-top: 12px; background: none; border: none; color: var(--text-muted); font-family: var(--font-body); font-size: 13px; cursor: pointer; text-decoration: underline; }
.upsell-skip:hover { color: var(--color-primary); }
.upsell-recap { font-size: 13.5px; line-height: 1.6; color: var(--text-muted); margin: 0 0 18px; }
#upsell-box { background: linear-gradient(180deg,var(--surface-alt),var(--cream-400)); color: var(--color-primary); }

.cart-item-row { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 16px; border: none; background: linear-gradient(115deg,#2E8F7C 0%,var(--green-700) 40%,var(--color-primary) 100%); box-shadow: inset 0 1px 0 rgba(237,224,211,.22), 0 6px 16px rgba(14,70,61,.3); }
.cart-item-thumb { flex: none; width: 58px; height: 58px; border-radius: 12px; overflow: hidden; background: linear-gradient(150deg,rgba(237,224,211,.26),rgba(237,224,211,.1)); display: flex; align-items: center; justify-content: center; }
.cart-item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-item-thumb span { font-family: var(--font-heading); font-weight: 600; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: rgba(237,224,211,.5); }
.cart-item-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.cart-item-name { font-family: var(--font-heading); font-weight: 700; font-size: 14.5px; color: var(--color-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cart-item-price { font-size: 12.5px; color: rgba(237,224,211,.75); }
.cart-item-right { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.cart-item-line-total { font-family: var(--font-heading); font-weight: 700; font-size: 14.5px; color: var(--color-secondary); }
.cart-item-qty { display: flex; align-items: center; gap: 8px; flex: none; }
.cart-item-qty-btn { width: 25px; height: 25px; border-radius: 50%; border: none; background: linear-gradient(115deg,#FFFBF6 0%,var(--color-secondary) 38%,var(--cream-500) 66%,#D9C7B3 100%); color: var(--color-primary); font-size: 14px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 3px 9px rgba(14,70,61,.35); transition: filter .15s ease; }
.cart-item-qty-btn:hover { filter: brightness(1.08); }
.cart-item-qty-value { min-width: 16px; text-align: center; font-family: var(--font-heading); font-weight: 700; font-size: 13px; color: var(--color-secondary); }
.cart-summary-row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--text-muted); padding: 4px 0; }
.cart-summary-row.is-total { font-family: var(--font-heading); font-weight: 700; font-size: 18px; color: var(--color-primary); padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--border-default); }
.cart-summary-total { font-family: var(--font-heading); font-weight: 700; }
.cart-call-btn { display: flex; align-items: center; justify-content: center; gap: 8px; }

/* ---- image placeholders (used where the original photo asset was unavailable) ---- */
.ph { display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px; font-family: var(--font-heading); font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.ph-1 { background: linear-gradient(140deg,var(--color-primary),var(--green-700)); color: rgba(237,224,211,.55); }
.ph-2 { background: linear-gradient(140deg,var(--green-900),var(--color-primary)); color: rgba(237,224,211,.55); }
.ph-3 { background: linear-gradient(140deg,var(--green-700),var(--green-900)); color: rgba(237,224,211,.55); }
.ph-cream { background: linear-gradient(140deg,#C9B6A2,var(--cream-500)); color: rgba(18,87,76,.5); }
.ph-white { background: linear-gradient(150deg,#FFFFFF,var(--cream-400)); color: rgba(18,87,76,.45); }

/* ---- reveal-on-scroll (JS toggles the .in class) ---- */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; }
[data-reveal].in { opacity: 1; transform: none; }

/* ---- small utility classes ---- */
.eyebrow { display:inline-block; font-family:var(--font-heading); font-weight:700; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--color-secondary); background:linear-gradient(115deg,#2E8F7C 0%,var(--green-700) 30%,var(--color-primary) 62%,var(--green-900) 100%); box-shadow:inset 0 1px 0 rgba(237,224,211,.3), inset 0 -1px 0 rgba(14,70,61,.5), 0 6px 18px rgba(18,87,76,.28); padding:9px 20px; border-radius:var(--radius-badge); }
.nav-link, .nav-item { text-decoration:none; }
.nav-link:hover { opacity:1 !important; }
.field:focus, input.field:focus { border-color: var(--color-secondary) !important; }
.social-btn, .social-btn-dark { transition: filter .15s ease; text-decoration:none; }
.social-btn:hover, .social-btn-dark:hover { filter: brightness(1.15); }
.footer-heading { font-family:var(--font-heading); font-weight:600; font-size:13px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:16px; }
.footer-link { color: rgba(237,224,211,.75); text-decoration:none; }
.footer-link:hover { color: var(--color-secondary); }
.offer-card { transition: background .25s ease, transform .25s ease, box-shadow .25s ease; }
@media (max-width: 700px) {
  .btn-carte-cta { padding: 10px 20px; font-size: 14px; min-width: 128px; justify-content: center; }
}

@media (max-width: 700px) {
  footer { padding-bottom: 110px !important; }
  #footer-grid { grid-template-columns: 1fr 1fr !important; row-gap: 8px !important; column-gap: 24px !important; }
  #footer-grid > div:nth-child(1) { grid-column: 1 / -1; grid-row: 1; padding-bottom: 8px; }
  #footer-grid > div:nth-child(2) { grid-column: 1; grid-row: 2; }
  #footer-grid > div:nth-child(4) { grid-column: 2; grid-row: 2; }
  #footer-grid > div:nth-child(3) { grid-column: 1 / -1; grid-row: 3; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border-on-dark); }
  #footer-contact { display: grid !important; grid-template-columns: 1fr 1fr; column-gap: 24px; row-gap: 10px; }
}
.blog-card { display: block; text-decoration: none; color: inherit; transition: transform .2s ease, box-shadow .2s ease; }
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(44,44,42,.16); }
.blog-card:hover h3 { color: var(--color-primary); }
.article-body p + p { margin-top: 16px; }
[data-b-reserve] { transition: background .2s ease; }

/* ---------- Blog (page liste, mise en page magazine) ---------- */
.blog-hero { position: relative; display: block; overflow: hidden; background: linear-gradient(135deg, var(--green-700), var(--green-900)); border-radius: 28px; min-height: 520px; color: var(--color-secondary); text-decoration: none; isolation: isolate; box-shadow: 0 26px 60px rgba(14,70,61,.25); }
.blog-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: -2; transition: transform .6s ease; }
.blog-hero:hover > img { transform: scale(1.03); }
.blog-hero-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(14,70,61,.94) 0%, rgba(18,87,76,.78) 50%, rgba(27,109,95,.2) 90%), linear-gradient(0deg, rgba(8,40,34,.85) 0%, rgba(8,40,34,.35) 55%, transparent 100%); }
.blog-hero-content { position: absolute; left: 48px; right: 120px; bottom: 44px; max-width: 760px; }
.blog-hero-label { display: inline-block; font-family: var(--font-heading); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--green-900); background: linear-gradient(135deg,var(--cream-500) 0%,var(--cream-400) 50%,#C9B6A2 100%); padding: 7px 16px; border-radius: 999px; }
.blog-hero h2 { font-weight: 700; font-size: 44px; line-height: 1.12; margin: 18px 0 0; color: #FFFDF9; text-shadow: 0 2px 14px rgba(0,0,0,.45); }

.blog-section-title { font-family: var(--font-heading); font-weight: 700; font-size: 26px; color: var(--green-900); margin: 72px 0 28px; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 32px; }
.blog-post { display: block; text-decoration: none; color: inherit; }
.blog-post-img { aspect-ratio: 16/10; border-radius: 20px; overflow: hidden; background: var(--cream-500); box-shadow: 0 10px 26px rgba(14,70,61,.14); }
.blog-post-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.blog-post:hover .blog-post-img img { transform: scale(1.05); }
.blog-post h3 { font-weight: 700; font-size: 21px; line-height: 1.3; margin: 12px 0 0; color: #1F1F1D; transition: color .2s ease; }
.blog-post:hover h3 { color: var(--green-700); }
.blog-post p { font-size: 15px; line-height: 1.6; color: #3F3F3B; margin: 10px 0 0; }
.blog-meta { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 13.5px; color: #55534E; }
.blog-avatar { width: 30px; height: 30px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(115deg,#2E8F7C 0%,var(--green-700) 40%,var(--green-900) 100%); box-shadow: inset 0 1px 0 rgba(237,224,211,.3); }
.blog-avatar img { width: 20px; height: 20px; object-fit: contain; display: block; }
.blog-meta strong { font-weight: 600; color: #1F1F1D; }

.blog-cta { margin-top: 88px; border-radius: 28px; padding: 64px 32px; text-align: center; color: var(--color-secondary); background: linear-gradient(115deg,#2E8F7C 0%,var(--green-700) 30%,var(--color-primary) 62%,var(--green-900) 100%); box-shadow: 0 26px 60px rgba(14,70,61,.35); }
.blog-cta h2 { font-weight: 800; font-size: 34px; line-height: 1.15; margin: 0; }
.blog-cta p { font-size: 16px; color: rgba(237,224,211,.85); margin: 14px 0 0; }
.blog-cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }

@media (max-width: 1024px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) {
  .blog-hero { min-height: 440px; border-radius: 22px; }
  .blog-hero-content { left: 22px; right: 22px; bottom: 26px; }
  .blog-hero h2 { font-size: 28px; }
  .blog-section-title { margin: 48px 0 22px; font-size: 21px; }
  .blog-grid { grid-template-columns: 1fr; gap: 36px; }
  .blog-cta { margin-top: 64px; padding: 44px 22px; border-radius: 22px; }
  .blog-cta h2 { font-size: 26px; }
}

/* ---------- Blog : catégories, filtres, page article ---------- */
.blog-cat { display: inline-block; margin-top: 18px; font-family: var(--font-heading); font-weight: 700; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: #F4ECE2; background: linear-gradient(115deg, var(--green-700) 0%, var(--green-900) 100%); padding: 6px 13px; border-radius: 999px; }
.blog-empty { grid-column: 1 / -1; text-align: center; font-size: 16px; color: #3F3F3B; padding: 40px 0; }

.article-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 22px; font-size: 14px; color: #55534E; }
.article-meta .blog-cat { margin-top: 0; }
.article-title { font-family: var(--font-heading); font-weight: 800; font-size: 40px; line-height: 1.15; margin: 14px 0 0; color: #1F1F1D; }
.article-cover { aspect-ratio: 16/9; border-radius: 22px; margin-top: 28px; overflow: hidden; box-shadow: 0 14px 34px rgba(14,70,61,.2); }
.article-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-body { font-size: 17px; line-height: 1.8; color: #2F2F2C; margin-top: 28px; }
.article-body h2 { font-family: var(--font-heading); font-weight: 700; font-size: 26px; line-height: 1.25; color: var(--green-900); margin: 36px 0 0; }
.article-body a { color: var(--green-700); font-weight: 600; text-decoration: underline; }
.article-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 40px; padding-top: 32px; border-top: 1px solid #D9CCBB; }
@media (max-width: 720px) {
  .article-title { font-size: 30px; }
  .article-body { font-size: 16.5px; }
}

/* ---------- Blog : disposition magazine (à la une + derniers articles + rangées par catégorie) ---------- */
.blog-top { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 44px; align-items: stretch; }
.blog-top.is-solo { grid-template-columns: 1fr; }
.blog-top .blog-hero { height: 100%; min-height: 500px; }
.blog-hero-content { left: 36px; right: 36px; bottom: 34px; max-width: none; }
.blog-hero-label { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; letter-spacing: .04em; text-transform: none; color: var(--green-900); background: #FFFDF9; padding: 8px 16px; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.blog-hero-label::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--green-700); flex: none; }
.blog-hero h2 { font-size: 34px; margin-top: 16px; max-width: 640px; }
.blog-hero-meta { margin-top: 14px; font-size: 14px; color: #F4ECE2; text-shadow: 0 1px 8px rgba(0,0,0,.5); }

.blog-side-title { font-family: var(--font-heading); font-weight: 700; font-size: 26px; color: var(--green-900); margin: 0 0 22px; }
.blog-latest-item { display: flex; align-items: center; gap: 18px; padding: 12px 0; text-decoration: none; color: inherit; border-bottom: 1px solid #E4D8C8; }
.blog-latest-item:last-child { border-bottom: none; }
.blog-latest-thumb { width: 92px; height: 92px; flex: none; border-radius: 16px; overflow: hidden; background: var(--cream-500); box-shadow: 0 6px 16px rgba(14,70,61,.15); }
.blog-latest-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.blog-latest-item:hover .blog-latest-thumb img { transform: scale(1.08); }
.blog-latest-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.blog-latest-body strong { font-family: var(--font-heading); font-weight: 700; font-size: 16.5px; line-height: 1.3; color: #1F1F1D; transition: color .2s ease; }
.blog-latest-item:hover .blog-latest-body strong { color: var(--green-700); }
.blog-latest-body span { font-size: 13px; color: #55534E; }

.blog-cat-section { margin-top: 64px; padding: 44px 0 0; border-top: 1px solid #D9CCBB; }
.blog-cat-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.blog-cat-head h2 { font-family: var(--font-heading); font-weight: 700; font-size: 28px; color: var(--green-900); }
.blog-arrows { display: flex; gap: 10px; }
.blog-arrow { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--green-900); background: #FFFFFF; border: 1.5px solid #CDBFAE; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.blog-arrow:hover:not(:disabled) { color: #F4ECE2; border-color: transparent; background: linear-gradient(115deg, var(--green-700), var(--green-900)); }
.blog-arrow:disabled { opacity: .35; cursor: default; }
.blog-row { display: flex; gap: 28px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 4px 22px; margin: 0 -4px; }
.blog-row::-webkit-scrollbar { display: none; }
.blog-row .blog-post { flex: 0 0 calc((100% - 56px) / 3); scroll-snap-align: start; }

.blog-post { display: block; background: #FFFFFF; border: 1px solid #E8DDCF; border-radius: 24px; padding: 14px 14px 24px; box-shadow: 0 8px 22px rgba(14,70,61,.08); transition: transform .2s ease, box-shadow .2s ease; }
.blog-post:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(14,70,61,.16); }
.blog-post-img { border-radius: 16px; box-shadow: none; }
.blog-post > :not(.blog-post-img) { margin-left: 8px; margin-right: 8px; }
.blog-cat-soft { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 12.5px; letter-spacing: .02em; text-transform: none; color: var(--green-900); background: #F1E8DC; padding: 6px 13px; }
.blog-cat-soft::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green-700); flex: none; }
.blog-post h3 { font-size: 20px; margin-top: 14px; }

@media (max-width: 1024px) {
  .blog-row .blog-post { flex-basis: calc((100% - 28px) / 2); }
}
@media (max-width: 900px) {
  .blog-top { grid-template-columns: 1fr; gap: 36px; }
  .blog-top .blog-hero { min-height: 440px; }
}
@media (max-width: 720px) {
  .blog-hero-content { left: 22px; right: 22px; bottom: 24px; }
  .blog-hero h2 { font-size: 26px; }
  .blog-side-title, .blog-cat-head h2 { font-size: 23px; }
  .blog-cat-section { margin-top: 48px; padding: 32px 0 0; }
  .blog-row { gap: 18px; }
  .blog-row .blog-post { flex-basis: 84%; }
  .blog-latest-thumb { width: 80px; height: 80px; }
}
/* Contenu riche des articles (éditeur du blog) */
.article-body h3 { font-family: var(--font-heading); font-weight: 700; font-size: 21px; line-height: 1.3; color: var(--green-900); margin: 28px 0 0; }
.article-body ul, .article-body ol { margin: 18px 0 0; padding-left: 26px; }
.article-body li { margin-top: 8px; }
.article-body blockquote { margin: 24px 0 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--green-700); color: #3F3F3B; font-style: italic; }
.article-body img { display: block; max-width: 100%; height: auto; border-radius: 16px; margin: 28px auto 0; box-shadow: 0 10px 26px rgba(14,70,61,.15); }
.article-body p, .article-body h2, .article-body h3 { margin-bottom: 0; }
.article-body > * + p, .article-body p + p { margin-top: 16px; }

/* Commande en ligne (panier) masquée sur le site public ; elle reste disponible dans /admin.
   Pour la réactiver : supprimer ce bloc. */
#cart-open-btn, #cart-open-btn-mobile, .cart-open-trigger,
[data-cart-add], [data-b-order],
#cart-backdrop, #upsell-backdrop, #order-contact-backdrop { display: none !important; }

/* ---- Robustesse mobile : tous les iPhone / Android, pas une taille précise ---- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { overflow-x: clip; }
body { overflow-wrap: break-word; }
img, video { max-width: 100%; }
a, button, summary, label, select { touch-action: manipulation; }
[data-two-grid] > *, [data-three-grid] > *, .footer-grid > *, .footer-contact > *, #reviews-grid > * { min-width: 0; }
@supports (height: 100dvh) {
  @media (max-width: 1024px) { header nav[data-nav-main][data-open="true"] { max-height: calc(100dvh - 150px); } }
}
#floating-cta { bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important; right: calc(24px + env(safe-area-inset-right, 0px)) !important; }
/* iOS Safari ignore la hauteur/le style des champs date et zoome sur les champs < 16px */
input[type="date"], input[type="time"] { -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 0; min-height: 45px; text-align: left; }
input[type="date"]::-webkit-date-and-time-value, input[type="time"]::-webkit-date-and-time-value { text-align: left; min-height: 1.2em; }
@media (max-width: 700px) {
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: max(16px, 1em) !important; }
}

/* Newsletter masquée sur le site public (accueil et articles) en attendant la mise en route.
   Pour la réactiver : supprimer ce bloc. */
#newsletter, .article-newsletter { display: none !important; }

/* Carrousel des photos d'un burger : pas de barre de défilement visible */
[data-b-slider]::-webkit-scrollbar{ display:none; }