/* ==========================================================================
   HERO (brick wall, cursor spotlight, neon sign, medallion, smoke), TICKER, WHY, BESTSELLERS
   ========================================================================== */
.hero {
  position: relative; isolation: isolate; overflow: hidden; overflow: clip;
  min-height: 100vh; min-height: 100svh; display: flex; align-items: center;
  padding: calc(var(--hdr) + 44px) 0 clamp(64px, 9vw, 110px);
  background: #0a0706;
}
.hero__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }

/* running-bond brick wall drawn with gradients only (2 conic layers = staggered head joints) */
.bricks {
  --m: #050302;
  position: absolute; inset: 0; z-index: 0;
  background-color: #1b100b;
  background-image:
    linear-gradient(180deg, var(--m) 0 3px, transparent 3px),
    conic-gradient(from 270deg at 3px 34px, var(--m) 0 90deg, transparent 0),
    conic-gradient(from 180deg at 3px 34px, var(--m) 0 90deg, transparent 0),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .03) 0 76px, transparent 76px 196px, rgba(0, 0, 0, .22) 196px 270px, transparent 270px 382px),
    repeating-linear-gradient(180deg, rgba(0, 0, 0, .24) 0 34px, transparent 34px 102px, rgba(255, 190, 140, .04) 102px 136px, transparent 136px 238px);
  background-size: 136px 34px, 136px 68px, 136px 68px, auto, auto;
  background-position: 0 0, 0 0, 68px 0, 0 0, 0 0;
}
.bricks--lit { --m: #2a1a12; background-color: #8a4326; }
.hero__bg::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(70% 60% at 30% 42%, rgba(10, 7, 6, .25), rgba(6, 4, 3, .78) 100%),
    linear-gradient(180deg, rgba(5, 4, 3, .7), transparent 34%);
}
.hero__spot {
  position: absolute; left: 0; top: 0; z-index: 2; width: 640px; height: 640px; border-radius: 50%; overflow: hidden;
  -webkit-mask-image: radial-gradient(circle closest-side, #000 0%, rgba(0, 0, 0, .6) 42%, transparent 100%);
  mask-image: radial-gradient(circle closest-side, #000 0%, rgba(0, 0, 0, .6) 42%, transparent 100%);
  transform: translate3d(55vw, 0, 0); will-change: transform; opacity: .85; transition: opacity .7s var(--ease);
}
.hero.is-dim .hero__spot { opacity: .3; }
.hero__spot .bricks { inset: auto; left: 0; top: 0; width: var(--hw, 100vw); height: var(--hh, 100vh); will-change: transform; }
.hero__spot::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle closest-side, rgba(255, 196, 120, .34), rgba(244, 169, 34, .08) 55%, transparent 80%); }
.hero__spill {
  position: absolute; z-index: 3; left: -10%; top: 6%; width: 90%; height: 52%; opacity: 0; transition: opacity 1.4s var(--ease);
  background: radial-gradient(50% 50% at 45% 45%, rgba(255, 112, 52, .2), rgba(244, 169, 34, .08) 45%, transparent 72%);
}
.hero.is-lit .hero__spill { opacity: 1; }
.hero.is-flick .hero__spill { opacity: .55; transition-duration: .05s; }
.hero__floor { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; height: 32%; background: linear-gradient(180deg, transparent, var(--night)); }

.hero__grid { position: relative; z-index: 1; display: grid; gap: clamp(26px, 4vw, 60px); align-items: center; }
.hero__copy { position: relative; container-type: inline-size; min-width: 0; }
/* soft haze behind the copy: the cursor spotlight lights the wall, never the text's background */
.hero__copy::before {
  content: ""; position: absolute; z-index: -1; inset: -12% -16% -14% -22%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(6, 4, 3, .72), rgba(6, 4, 3, .55) 62%, rgba(6, 4, 3, .2) 86%, transparent);
}

/* --- neon sign --- */
.neon {
  margin: 0 0 clamp(14px, 2.2vw, 28px);
  font: 400 clamp(2rem, 7vw, 5.6rem)/1.05 var(--ff-n);
  font-size: clamp(1.9rem, 11.2cqi, 6.1rem);
  letter-spacing: .045em; white-space: nowrap; user-select: none; -webkit-user-select: none;
}
.neon__l {
  --nc: #ff8a3d; --nc2: #ff4a14;
  display: inline-block; color: rgba(255, 214, 170, .1);
  -webkit-text-stroke: 1px rgba(255, 196, 140, .24);
}
.neon__l--b { --nc: #ffc24d; --nc2: #f08a0c; }
.neon__amp { --nc: #ff6b5a; --nc2: #e0281a; margin: 0 .06em; }
.neon__l.on {
  color: #fff4e2; -webkit-text-stroke: 0 transparent;
  text-shadow: 0 0 1px #fff8ee, 0 0 5px #ffe3b8, 0 0 11px var(--nc), 0 0 22px var(--nc), 0 0 44px var(--nc2), 0 0 86px var(--nc2);
}
.neon__l.flick { opacity: .3; }
.neon__sp { display: inline-block; width: .3em; }

.hero__title { font-size: clamp(2.15rem, 4.7vw, 4.6rem); font-weight: 560; line-height: 1.02; letter-spacing: -.022em; color: var(--cream-2); font-variation-settings: "opsz" 144; }
.hero__line { display: block; }
.hero__line--b { font-style: italic; font-weight: 480; color: var(--amber); text-shadow: 0 0 34px rgba(244, 169, 34, .3); }
.hero__lead { max-width: 35em; margin-top: clamp(16px, 2vw, 24px); color: var(--muted); font-size: clamp(1.02rem, 1.3vw, 1.18rem); }
.hero__lead, .hero__badges li, .rating__txt { text-shadow: 0 1px 12px rgba(0, 0, 0, .9), 0 0 2px rgba(0, 0, 0, .7); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(22px, 3vw, 34px); }
.hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: clamp(22px, 3vw, 32px); }
.rating {
  display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 16px 6px 12px;
  border: 1px solid var(--line-2); border-radius: 999px; background: rgba(8, 6, 5, .55); text-decoration: none;
  transition: border-color .3s, transform .3s var(--ease);
}
.rating[href]:hover { border-color: var(--brass); transform: translateY(-2px); }
.rating__stars { display: inline-flex; gap: 1px; color: var(--amber); filter: drop-shadow(0 0 5px rgba(244, 169, 34, .6)); }
.rating__stars .ic { width: 16px; height: 16px; }
.rating__txt { display: flex; flex-direction: column; line-height: 1.15; font-size: .8rem; color: var(--muted); }
.rating__txt strong { color: var(--cream-2); font-size: .95rem; }
.rating__ext { width: 16px; height: 16px; color: var(--brass); }
.hero__badges { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.hero__badges li { display: inline-flex; align-items: center; gap: 7px; font: 500 .78rem/1.3 var(--ff-b); letter-spacing: .14em; text-transform: uppercase; color: rgba(239, 224, 198, .86); }
.hero__badges .ic { width: 15px; height: 15px; color: var(--green); stroke-width: 2.4; }

/* hero entrance (after the intro / on load) */
.motion .hero__title .w__i { transform: translate3d(0, 110%, 0); transition: transform .95s var(--ease); transition-delay: calc(var(--i) * 55ms + 60ms); }
.motion .hero.is-lit .hero__title .w__i { transform: none; }
.motion .hero__lead, .motion .hero__ctas, .motion .hero__meta, .motion .hero__media { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity .9s var(--ease), transform 1.1s var(--ease); }
.motion .hero__media { transform: scale(.92); transition-duration: 1.3s, 1.7s; }
.motion .hero.is-lit .hero__lead { opacity: 1; transform: none; transition-delay: .4s; }
.motion .hero.is-lit .hero__ctas { opacity: 1; transform: none; transition-delay: .52s; }
.motion .hero.is-lit .hero__meta { opacity: 1; transform: none; transition-delay: .64s; }
.motion .hero.is-lit .hero__media { opacity: 1; transform: none; transition-delay: .12s; }

/* --- medallion --- */
.hero__media { position: relative; display: grid; place-items: center; min-width: 0; }
.medal { position: relative; width: min(100%, 470px); aspect-ratio: 1 / 1; }
.medal__halo { position: absolute; inset: -14%; border-radius: 50%; background: radial-gradient(circle, rgba(244, 169, 34, .34) 0%, rgba(217, 130, 54, .15) 36%, transparent 66%); }
.motion .medal__halo { animation: halo 4.6s ease-in-out infinite alternate; }
@keyframes halo { from { opacity: .7; transform: scale(.96); } to { opacity: 1; transform: scale(1.04); } }
.medal__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.motion .medal__ring { animation: spin 70s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.medal__rim { fill: none; stroke: rgba(200, 164, 90, .5); stroke-width: 1.2; }
.medal__rim--in { stroke: rgba(200, 164, 90, .35); stroke-dasharray: 2 7; }
.medal__text { fill: var(--brass-hi); font-family: var(--ff-b); font-size: 17px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; }
.medal__badge {
  position: absolute; inset: 19%;
  box-shadow: 0 0 0 3px var(--brass), 0 0 0 10px rgba(200, 164, 90, .13), 0 0 70px 8px rgba(244, 169, 34, .42), inset 0 0 34px rgba(176, 90, 36, .28);
}
.medal__badge::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .35), transparent 42%); pointer-events: none; }
.smoke { position: absolute; left: 34%; top: -31%; width: 40%; overflow: visible; pointer-events: none; }
.puff { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.motion .puff { animation: puff 9s linear infinite; }
.motion .puff:nth-of-type(2) { animation-duration: 10.5s; animation-delay: -2.2s; --dx: -30px; }
.motion .puff:nth-of-type(3) { animation-duration: 8.4s; animation-delay: -4.1s; --dx: 18px; }
.motion .puff:nth-of-type(4) { animation-duration: 11.2s; animation-delay: -6.3s; --dx: 44px; }
.motion .puff:nth-of-type(5) { animation-duration: 9.6s; animation-delay: -7.7s; --dx: -12px; }
@keyframes puff {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.3); }
  14% { opacity: .95; }
  55% { opacity: .5; }
  100% { opacity: 0; transform: translate3d(var(--dx, 24px), -250px, 0) scale(2); }
}

/* --- departures board: split-flap bestsellers (fx.js JB.dep). Desktop: hung under the medallion;
   phones and tablets: after the hero badges, below the first screen --- */
.dep { position: relative; display: block; width: min(100%, 400px); border-radius: 16px; color: var(--cream); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.dep:focus-visible { outline-offset: 5px; }
.dep__in {
  --fp: 9px;
  display: block; padding: var(--fp); border-radius: 16px;
  background:
    radial-gradient(circle at 18px calc(var(--fp) / 2), #f6dfa2 0 1.3px, #8a6a2c 2.1px 3.2px, transparent 3.8px),
    radial-gradient(circle at calc(100% - 18px) calc(var(--fp) / 2), #f6dfa2 0 1.3px, #8a6a2c 2.1px 3.2px, transparent 3.8px),
    radial-gradient(circle at 18px calc(100% - var(--fp) / 2), #f6dfa2 0 1.3px, #8a6a2c 2.1px 3.2px, transparent 3.8px),
    radial-gradient(circle at calc(100% - 18px) calc(100% - var(--fp) / 2), #f6dfa2 0 1.3px, #8a6a2c 2.1px 3.2px, transparent 3.8px),
    linear-gradient(150deg, #5a4220 0%, #241a0c 30%, #4a3517 58%, #1c1409 100%);
  box-shadow: 0 0 0 1px rgba(241, 215, 150, .34), inset 0 1px 0 rgba(255, 236, 190, .34), inset 0 -1px 0 rgba(0, 0, 0, .6),
    0 30px 60px -28px rgba(0, 0, 0, .95), 0 0 70px -26px rgba(244, 169, 34, .45);
  transition: box-shadow .45s;
}
.dep:hover .dep__in { box-shadow: 0 0 0 1px rgba(241, 215, 150, .6), inset 0 1px 0 rgba(255, 236, 190, .4), inset 0 -1px 0 rgba(0, 0, 0, .6), 0 30px 60px -28px rgba(0, 0, 0, .95), 0 0 80px -18px rgba(244, 169, 34, .65); }
.dep__panel {
  --sf-gap: 3px;
  display: grid; gap: 4px; padding: 10px 11px 11px; border-radius: 8px; container-type: inline-size;
  background: radial-gradient(90% 60% at 50% 0%, rgba(255, 236, 205, .05), transparent 70%), linear-gradient(180deg, #0b0907, #050403);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .85), inset 0 0 0 2px rgba(255, 236, 190, .06), inset 0 0 30px rgba(0, 0, 0, .8);
}
.dep__head { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; font: 600 .75rem/1 var(--ff-b); letter-spacing: .16em; text-transform: uppercase; color: var(--brass-hi); white-space: nowrap; }
.dep__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 6px var(--amber), 0 0 14px rgba(244, 169, 34, .6); }
.dep__lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dep__track { flex: none; display: inline-flex; align-items: center; gap: 7px; margin-left: auto; color: var(--muted); }
.dep__track b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--amber); color: var(--ink); font-weight: 700; letter-spacing: 0; box-shadow: 0 0 10px rgba(244, 169, 34, .6); }
.dep__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.dep__k { font: 600 .75rem/1 var(--ff-b); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
/* the cells: black flaps split by a hairline, cream letters (amber for the price) */
.sf-row { display: grid; grid-template-columns: repeat(var(--n, 16), minmax(0, 1fr)); gap: var(--sf-gap, 3px); }
.sf {
  position: relative; display: grid; place-items: center; min-width: 0; aspect-ratio: 5 / 7; overflow: hidden; perspective: 240px; border-radius: 3px;
  background: linear-gradient(180deg, #221b14 0 49.2%, #030202 49.2% 50.8%, #18130e 50.8% 100%);
  box-shadow: inset 0 1px 0 rgba(255, 236, 205, .08), 0 1px 0 rgba(0, 0, 0, .8);
  color: #f6ead2; font: 600 1rem/1 var(--ff-b); font-size: calc((100cqi - 15 * var(--sf-gap)) / 16 * .72);
}
.sf__ch { position: relative; }
.sf__leaf { position: absolute; left: 0; right: 0; top: 0; height: 50%; overflow: hidden; border-radius: 3px 3px 0 0; background: #221b14; transform-origin: 50% 100%; transform: rotateX(-90deg); backface-visibility: hidden; }
.sf__leaf > span { display: grid; place-items: center; height: 200%; }
/* 9 cells exactly as wide as 9 of the 16 above */
.sf-row--p { flex: none; width: calc((100% + var(--sf-gap)) * 9 / 16 - var(--sf-gap)); }
.sf-row--p .sf { color: var(--amber); text-shadow: 0 0 8px rgba(244, 169, 34, .45); }
.motion .dep__in { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity .9s var(--ease), transform 1.1s var(--ease), box-shadow .45s; }
.motion .hero.is-lit .dep__in { opacity: 1; transform: none; transition-delay: .7s, .7s, 0s; }

@media (min-width: 960px) {
  .hero__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); grid-template-areas: "copy media" "copy dep"; row-gap: 20px; }
  .hero__copy { grid-area: copy; }
  .hero__media { grid-area: media; align-self: end; }
  .dep { grid-area: dep; align-self: start; justify-self: center; }
  .medal { width: min(100%, 430px); }
}
@media (max-width: 959.98px) {
  .hero { min-height: 0; padding-top: calc(var(--hdr) + 54px); }
  .hero__spot { opacity: .62; }
  .hero__media { order: -1; }
  .medal { width: min(64vw, 300px); }
  .hero__copy { text-align: left; }
}
/* tablets: the headline leads, the neon sign supports it, the medallion fills the wall */
@media (min-width: 600px) and (max-width: 959.98px) {
  .neon { font-size: clamp(1.9rem, 7.2cqi, 4rem); }
  .hero__title { font-size: clamp(2.3rem, 7vw, 3.6rem); }
  .medal { width: min(64vw, 380px); }
}
@media (max-width: 479.98px) {
  .hero__meta { gap: 14px; }
}
/* phones: the medallion is sized by the screen's height too and the two calls to action share one
   row, so "Réserver" and "Voir le menu" are on the first screen, above the action bar */
@media (max-width: 599.98px) {
  .hero { padding-top: calc(var(--hdr) + 14px); }
  .hero__grid { row-gap: 18px; }
  .medal { width: min(56vw, 260px, 27vh); width: min(56vw, 260px, 27svh); }
  .hero__ctas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .hero__ctas .btn { min-width: 0; padding-inline: .7em; gap: .45em; }
}
/* the narrowest phones: labels alone, so each call to action stays on one line */
@media (max-width: 359.98px) { .hero__ctas .btn .ic { display: none; } }
/* short phones (SE, small Android): the calls to action come right after the headline */
@media (max-width: 599.98px) and (max-height: 700px) {
  .hero__copy { display: flex; flex-direction: column; }
  .hero__ctas { order: 1; }
  .hero__lead { order: 2; }
  .hero__meta { order: 3; }
}
/* phones in landscape: copy beside the medallion, a headline sized for a short screen */
@media (max-height: 520px) and (orientation: landscape) and (max-width: 959.98px) {
  .hero { min-height: 0; padding-top: calc(var(--hdr) + 12px); }
  .hero__grid { grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(20px, 4vw, 40px); row-gap: 24px; }
  .hero__media { order: 0; align-self: start; }
  .medal { width: min(40vw, 62vh); width: min(40vw, 62svh); }
  .neon { font-size: clamp(1.6rem, 6cqi, 2.6rem); margin-bottom: 10px; }
  .hero__title { font-size: clamp(1.6rem, 4.2vw, 2.4rem); }
  .hero__copy { display: flex; flex-direction: column; }
  .hero__ctas { order: 1; margin-top: 18px; }
  .hero__lead { order: 2; }
  .hero__meta { order: 3; }
}

/* --- ticker (its "pause animations" switch sits on the right fade) --- */
.tickbar { position: relative; }
.tickbar .mtoggle--icon { position: absolute; z-index: 2; top: 50%; right: max(10px, calc(var(--gut) - 6px)); margin-top: -22px; border-color: rgba(200, 164, 90, .45); background: #0b0806; }
.ticker { position: relative; overflow: hidden; padding: 17px 0; border-block: 1px solid rgba(200, 164, 90, .28); background: linear-gradient(180deg, #0e0a07, #090706); }
.ticker::before, .ticker::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; width: 12%; pointer-events: none; }
.ticker::before { left: 0; background: linear-gradient(90deg, #0b0806, transparent); }
.ticker::after { right: 0; background: linear-gradient(270deg, #0b0806, transparent); }
.ticker__track { display: flex; width: max-content; }
.ticker__group { display: flex; align-items: center; flex: none; }
.ticker__item { display: inline-flex; align-items: center; gap: 24px; padding-right: 24px; white-space: nowrap; font: italic 500 clamp(1.05rem, 1.7vw, 1.4rem)/1 var(--ff-d); color: var(--cream); }
.ticker__item .ic { width: .85em; height: .85em; color: var(--amber); filter: drop-shadow(0 0 6px rgba(244, 169, 34, .8)); }
.motion .ticker__track { animation: tick 52s linear infinite; }
.ticker--gsap .ticker__track { animation: none !important; }
@keyframes tick { to { transform: translate3d(-33.3333%, 0, 0); } }

/* --- WHY: a backlit brasserie board in a brass frame; each panel's neon numeral switches on --- */
.why { background: radial-gradient(55% 45% at 88% 12%, rgba(244, 169, 34, .07), transparent 70%), var(--night); }
.why__board {
  --fp: clamp(14px, 1.6vw, 20px);
  position: relative; padding: var(--fp); border-radius: 16px;
  background:
    radial-gradient(circle at 26px calc(var(--fp) / 2), #f6dfa2 0 1.6px, #8a6a2c 2.6px 4px, transparent 4.8px),
    radial-gradient(circle at calc(100% - 26px) calc(var(--fp) / 2), #f6dfa2 0 1.6px, #8a6a2c 2.6px 4px, transparent 4.8px),
    radial-gradient(circle at 26px calc(100% - var(--fp) / 2), #f6dfa2 0 1.6px, #8a6a2c 2.6px 4px, transparent 4.8px),
    radial-gradient(circle at calc(100% - 26px) calc(100% - var(--fp) / 2), #f6dfa2 0 1.6px, #8a6a2c 2.6px 4px, transparent 4.8px),
    linear-gradient(150deg, #5a4220 0%, #241a0c 30%, #4a3517 58%, #1c1409 100%);
  box-shadow: 0 0 0 1px rgba(241, 215, 150, .34), inset 0 1px 0 rgba(255, 236, 190, .34), inset 0 -1px 0 rgba(0, 0, 0, .6),
    0 60px 110px -50px rgba(0, 0, 0, .95), 0 0 150px -50px rgba(244, 169, 34, .42);
}
.why__list {
  position: relative; display: grid; gap: 1px; border-radius: 6px; overflow: hidden;
  background: rgba(241, 215, 150, .15);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .85), 0 0 0 2px rgba(255, 236, 190, .08);
}
/* the glass in front of the light box */
.why__list::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(112deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 24%, rgba(255, 255, 255, 0) 57%, rgba(255, 255, 255, .035) 58%, rgba(255, 255, 255, 0) 74%);
}
.why__item { position: relative; isolation: isolate; padding: clamp(24px, 2.8vw, 36px); background: linear-gradient(180deg, #0c0a08, #070605); }
.why__item:nth-child(6n+1) { --nc: #ff8a3d; --nc2: #ff4a14; --glow: rgba(255, 122, 52, .21); }
.why__item:nth-child(6n+2) { --nc: #ffc24d; --nc2: #f08a0c; --glow: rgba(244, 169, 34, .2); }
.why__item:nth-child(6n+3) { --nc: #ff6b5a; --nc2: #e0281a; --glow: rgba(232, 74, 58, .19); }
.why__item:nth-child(6n+4) { --nc: #ffd36b; --nc2: #f4a922; --glow: rgba(244, 190, 60, .18); }
.why__item:nth-child(6n+5) { --nc: #b9ef6e; --nc2: #6fae1f; --glow: rgba(141, 190, 69, .18); }
.why__item:nth-child(6n) { --nc: #ff9f5a; --nc2: #e0601c; --glow: rgba(217, 130, 54, .21); }
/* backlight of the panel: comes on with its tube */
.why__item::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .16s;
  background: radial-gradient(90% 72% at 22% 14%, var(--glow), transparent 72%), radial-gradient(70% 40% at 50% 100%, rgba(255, 236, 205, .035), transparent 70%);
}
.why__item.on::before { opacity: 1; }
.why__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: clamp(16px, 2vw, 24px); }
.why__num {
  font: 400 clamp(3rem, 4.6vw, 4.2rem)/.92 var(--ff-n); letter-spacing: .05em;
  color: rgba(255, 214, 170, .07); -webkit-text-stroke: 1px rgba(255, 196, 140, .22);
}
.why__item.on .why__num {
  color: #fff4e2; -webkit-text-stroke: 0 transparent;
  text-shadow: 0 0 1px #fff8ee, 0 0 5px #ffe3b8, 0 0 11px var(--nc), 0 0 22px var(--nc), 0 0 44px var(--nc2), 0 0 82px var(--nc2);
}
.motion .why__item.on:hover .why__num { animation: tube .6s steps(1); }
@keyframes tube { 0%, 100% { opacity: 1; } 12% { opacity: .3; } 22% { opacity: 1; } 34% { opacity: .55; } 44% { opacity: 1; } }
.why__ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(241, 215, 150, .24); background: radial-gradient(circle, rgba(255, 236, 205, .05), transparent 70%); color: var(--cream); transition: color .3s; }
.why__item.on .why__ic { color: var(--nc); }
.why__ic .ic { width: 28px; height: 28px; stroke-width: 1.5; }
.why__item.on .why__ic .ic { filter: drop-shadow(0 0 3px var(--nc)); }
/* the icon is drawn as its panel lights up */
.motion .why__ic .ic { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.5s var(--ease) .1s; }
.motion .why__item.on .why__ic .ic { stroke-dashoffset: 0; }
.why__t { font-size: clamp(1.3rem, 1.8vw, 1.55rem); color: var(--cream-2); }
.why__p { margin-top: 10px; color: var(--muted); }
@media (min-width: 640px) { .why__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .why__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* --- BESTSELLERS --- */
.best { background: linear-gradient(180deg, var(--night), #0e0a07 45%, var(--night)); }
.best__grid { display: grid; gap: clamp(16px, 2vw, 24px); }
.bcard { position: relative; isolation: isolate; display: flex; flex-direction: column; min-width: 0; border-radius: var(--r-lg); overflow: hidden; background: #120d0a; border: 1px solid rgba(200, 164, 90, .2); }
.bcard__body { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: clamp(22px, 3vw, 34px); }
.bcard__kick { display: inline-flex; align-items: center; gap: 8px; font: 600 .76rem/1 var(--ff-b); letter-spacing: .24em; text-transform: uppercase; color: var(--amber); }
.bcard__kick .ic { width: 16px; height: 16px; }
.bcard__title { font-size: clamp(1.7rem, 3vw, 2.6rem); color: var(--cream-2); }
.bcard__media { position: relative; overflow: hidden; background: radial-gradient(60% 60% at 50% 55%, rgba(244, 169, 34, .3), transparent 70%), #160e09; }
.bcard__media img, .bcard__media .ph { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.bcard:hover .bcard__media img { transform: scale(1.05); }

.bcard--sig .bcard__media { aspect-ratio: 4 / 3; }
/* the burger fills the lower half of the square photo: the crop keeps it whole, bottom bun included
   (the wide desktop box shows only ~60% of the photo's height) */
.bcard--sig .bcard__media img { object-position: 50% 78%; }
.bcard--sig .bcard__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 72%, #120d0a); }
.bcard--sig .bcard__title { font-style: italic; }
.bcard__ings { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.bcard__ings li { padding: 7px 13px; border-radius: 999px; border: 1px solid rgba(200, 164, 90, .3); font-size: .86rem; color: var(--cream); background: rgba(239, 224, 198, .03); }

.bcard--combo { background: radial-gradient(70% 60% at 100% 0%, rgba(141, 190, 69, .1), transparent 60%), #0f0c09; }
.bcard__when { font: 400 clamp(1.25rem, 2.2vw, 1.6rem)/1.1 var(--ff-n); color: #f6ffe8; text-shadow: 0 0 6px rgba(141, 190, 69, .9), 0 0 18px rgba(141, 190, 69, .6); }
.eq { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 clamp(18px, 3vw, 34px) 6px; }
.eq__item { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.eq__img { display: block; width: 100%; max-width: 120px; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; background: radial-gradient(circle, rgba(244, 169, 34, .3), #1a110b 70%); box-shadow: 0 0 0 2px rgba(200, 164, 90, .45), 0 14px 30px -12px rgba(0, 0, 0, .9); transition: transform .6s var(--ease); }
.eq__img img, .eq__img .ph { width: 100%; height: 100%; object-fit: cover; }
.eq__item:nth-child(3) .eq__img { transition-delay: .05s; }
.bcard--combo:hover .eq__img { transform: translateY(-6px) rotate(-3deg); }
/* captions never break mid-word; a long one may spill under the "+" (the row has room for it) */
.eq__item figcaption { font: 600 .75rem/1.2 var(--ff-b); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.eq__op { flex: none; font: 300 clamp(1.4rem, 2.6vw, 2rem)/1 var(--ff-d); color: var(--brass); padding-bottom: 26px; }
.eq__res { flex: none; display: flex; align-items: center; gap: 6px; }
.eq__price { flex: none; display: grid; place-items: center; width: clamp(74px, 9vw, 104px); aspect-ratio: 1 / 1; margin-bottom: 26px; border-radius: 50%; background: linear-gradient(160deg, #f7df9f, #c99a46 60%, #9c7430); color: var(--ink); font: 700 clamp(.95rem, 1.5vw, 1.25rem)/1 var(--ff-d); box-shadow: 0 0 0 4px rgba(200, 164, 90, .2), 0 0 30px rgba(244, 169, 34, .45); transform: rotate(-8deg); white-space: nowrap; }

.bcard--gift { flex-direction: row; align-items: stretch; background: linear-gradient(135deg, #0b0a08, #15110b); border-color: rgba(200, 164, 90, .38); }
.bcard--gift .bcard__media { flex: 0 0 40%; min-height: 220px; }
.bcard--gift .bcard__title { font-size: clamp(1.5rem, 2.4vw, 2rem); color: var(--brass-hi); }
.bcard--gift p { color: var(--muted); }

@media (min-width: 980px) {
  .best__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
  .bcard--sig { grid-row: span 2; }
  .bcard--sig .bcard__media { aspect-ratio: auto; flex: 1 1 auto; min-height: 320px; }
  /* the photo fills the height the two right-hand cards give it instead of dictating it */
  .bcard--sig .bcard__media img, .bcard--sig .bcard__media .ph { position: absolute; inset: 0; }
  .bcard--combo .eq { flex: 1 1 auto; }
}
@media (max-width: 559.98px) {
  .bcard--gift { flex-direction: column; }
  .bcard--gift .bcard__media { flex-basis: auto; min-height: 0; aspect-ratio: 16 / 10; }
  .eq { gap: 3px; }
  .eq__op { padding-bottom: 30px; }
}
/* phones: the three plates on one line, "= 20 €" on its own line below */
@media (max-width: 479.98px) {
  .eq { flex-wrap: wrap; justify-content: center; row-gap: 14px; padding-bottom: 10px; }
  .eq__res { flex: 1 0 100%; justify-content: center; gap: 14px; }
  .eq__res .eq__op { padding-bottom: 0; }
  .eq__price { margin-bottom: 0; }
}