/* Section 8 — Prix. A luminous bill ("L’addition") with perforated edges + an animated price comparison.
   Everything scoped under #prix, every class prefixed .prix-. JS adds .prix-armed (hidden start state) then .prix-play. */

#prix { overflow: hidden; isolation: isolate; }
#prix .prix-aura { position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 50% at 78% 38%, rgba(240, 163, 179, .10), transparent 70%),
    radial-gradient(50% 40% at 12% 92%, rgba(201, 164, 92, .08), transparent 70%); }

/* ------------------------------------------------------------------ layout */
#prix .prix-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "side" "compare"; gap: clamp(44px, 7vw, 72px); }
#prix .prix-head { grid-area: head; }
#prix .prix-side { grid-area: side; display: grid; justify-items: center; gap: 28px; min-width: 0; }
#prix .prix-compare { grid-area: compare; min-width: 0; }
#prix .prix-head .h2 em { white-space: nowrap; }
@media (min-width: 960px) {
  #prix .prix-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); grid-template-areas: "head side" "compare side"; column-gap: clamp(56px, 7vw, 110px); row-gap: 56px; align-items: start; }
  #prix .prix-side { position: relative; top: 8px; }
  #prix .prix-compare { align-self: end; }
}

/* ------------------------------------------------------------------ the stage (glow + tilt) */
#prix .prix-stage { position: relative; width: 100%; max-width: 440px; perspective: 1400px; }
#prix .prix-glow { position: absolute; inset: -12% -18%; z-index: 0; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(240, 163, 179, .20), rgba(221, 187, 120, .09) 55%, transparent 100%);
  animation: prix-breathe 7s ease-in-out 2 alternate; }
@keyframes prix-breathe { from { opacity: .7; } to { opacity: 1; } }
#prix .prix-tilt { position: relative; z-index: 1; transform: rotateX(var(--prix-rx, 0deg)) rotateY(var(--prix-ry, 0deg)); transform-style: preserve-3d;
  transition: transform .7s var(--ease-out);
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35)) drop-shadow(0 34px 44px rgba(0, 0, 0, .5)); }
#prix .prix-stage.prix-hover .prix-tilt { transition-duration: .18s; }

/* ------------------------------------------------------------------ the bill */
#prix .prix-ticket { position: relative; color: var(--ink); padding: 40px clamp(20px, 6vw, 34px) 44px;
  background: linear-gradient(180deg, var(--card) 0%, var(--paper) 46%, var(--paper-2) 100%);
  transform: rotate(-.8deg);
  /* perforated top + bottom edges */
  -webkit-mask: radial-gradient(circle at 50% 0, transparent 6.5px, #000 7px) 50% 0 / 18px 51% repeat-x,
                radial-gradient(circle at 50% 100%, transparent 6.5px, #000 7px) 50% 100% / 18px 51% repeat-x;
          mask: radial-gradient(circle at 50% 0, transparent 6.5px, #000 7px) 50% 0 / 18px 51% repeat-x,
                radial-gradient(circle at 50% 100%, transparent 6.5px, #000 7px) 50% 100% / 18px 51% repeat-x;
  transition: transform 1.1s var(--ease-out), opacity .8s var(--ease-out); }
#prix .prix-ticket::before { /* faint paper fibre + fold */ content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: linear-gradient(180deg, transparent 31%, rgba(107, 95, 87, .07) 31.2%, transparent 32.4%); }
#prix .prix-sheen { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s;
  background: radial-gradient(circle at var(--prix-px, 50%) var(--prix-py, 0%), rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 46%); mix-blend-mode: soft-light; }
#prix .prix-stage.prix-hover .prix-sheen { opacity: 1; }

#prix .prix-ticket-head { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
#prix .prix-cloche { width: 58px; height: 40px; fill: none; stroke: var(--brass-deco); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#prix .prix-cloche-hl { stroke: var(--wine); stroke-width: 1.4; opacity: .6; }
#prix .prix-house { margin: 0; display: grid; gap: 2px; font-family: var(--serif); font-size: 22px; font-weight: 600; letter-spacing: -.015em; line-height: 1.1; }
#prix .prix-house em { font-style: italic; font-weight: 400; color: var(--wine); }
#prix .prix-house-sub { font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; color: var(--brass); padding-left: .32em; }

#prix .prix-perf { height: 1px; margin: 26px 0 22px; background: repeating-linear-gradient(90deg, var(--line-strong) 0 6px, transparent 6px 11px); }
#prix .prix-bill-title { margin: 0; text-align: center; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 19px; color: var(--muted); }

#prix .prix-amount { margin: 2px 0 0; text-align: center; }
#prix .prix-amount-vis { display: inline-flex; align-items: flex-start; justify-content: center; font-family: var(--serif); color: var(--ink); line-height: .86; }
#prix .prix-cur { font-family: var(--sans); font-size: 14px; font-weight: 750; letter-spacing: .16em; color: var(--brass); margin: 1.2em .5em 0 0; }
#prix .prix-big { font-size: clamp(112px, 34vw, 168px); font-weight: 350; letter-spacing: -.06em; font-variation-settings: "SOFT" 50, "WONK" 1; }
#prix .prix-dash { font-size: clamp(40px, 11vw, 56px); font-weight: 350; color: var(--wine); margin: .18em 0 0 .06em; }
#prix .prix-terms { margin: 14px auto 0; max-width: 22em; text-align: center; font-size: 14.5px; line-height: 1.5; color: var(--muted); letter-spacing: .01em; }
#prix .prix-terms span { color: var(--brass-deco); padding: 0 .25em; }

#prix .prix-tear { position: relative; height: 0; margin: 28px calc(-1 * clamp(20px, 6vw, 34px)); border-top: 1.5px dashed var(--line-strong); }
#prix .prix-tear::before, #prix .prix-tear::after { content: ""; position: absolute; top: -11px; width: 20px; height: 20px; border-radius: 50%; background: var(--night); }
#prix .prix-tear::before { left: -10px; }
#prix .prix-tear::after { right: -10px; }

#prix .prix-incl-title { display: flex; justify-content: space-between; margin: 0 0 6px; font-size: 11.5px; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; color: var(--brass); }
#prix .prix-items { list-style: none; margin: 0; padding: 0; }
#prix .prix-items li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 11px 0; border-bottom: 1px dotted var(--line-strong); }
#prix .prix-items li:last-child { border-bottom: 0; }
#prix .prix-check { width: 20px; height: 20px; margin-top: 2px; fill: none; stroke: var(--wine); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 0; }
#prix .prix-it { display: grid; gap: 1px; min-width: 0; }
#prix .prix-it b { font-size: 15.5px; font-weight: 650; line-height: 1.35; }
#prix .prix-it small { font-size: 13.5px; line-height: 1.4; color: var(--muted); }
#prix .prix-q { font-family: var(--serif); font-size: 19px; line-height: 1.2; color: var(--ink); text-align: right; min-width: 2.2em; }
#prix .prix-q-incl { font-family: var(--serif); font-style: italic; font-size: 14px; line-height: 1.7; color: var(--brass); }

#prix .prix-total { display: flex; align-items: baseline; gap: 10px; margin: 0; font-family: var(--serif); }
#prix .prix-total > span:first-child { font-size: 22px; font-weight: 500; }
#prix .prix-total .num { font-size: 26px; font-weight: 500; color: var(--wine); white-space: nowrap; }
#prix .prix-dots { flex: 1; min-width: 20px; border-bottom: 2px dotted var(--line-strong); transform: translateY(-5px); }
#prix .prix-foot { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }

#prix .prix-stamp { position: absolute; right: clamp(10px, 4vw, 22px); bottom: 70px; width: clamp(88px, 26vw, 106px); height: auto; pointer-events: none;
  color: var(--wine); opacity: .82; mix-blend-mode: multiply; transform: rotate(-14deg);
  transition: transform .55s cubic-bezier(.3, 1.6, .5, 1), opacity .3s; }
#prix .prix-stamp-o { fill: none; stroke: currentColor; stroke-width: 2.4; }
#prix .prix-stamp-i { fill: none; stroke: currentColor; stroke-width: 1; stroke-dasharray: 2 3; }
#prix .prix-stamp-t { fill: currentColor; font-family: var(--sans); font-size: 10.4px; font-weight: 800; letter-spacing: .12em; }
#prix .prix-stamp-n { fill: currentColor; font-family: var(--serif); font-size: 30px; font-weight: 500; font-style: italic; }
#prix .prix-stamp-c { fill: currentColor; font-family: var(--sans); font-size: 9px; font-weight: 800; letter-spacing: .3em; }

/* ------------------------------------------------------------------ CTA */
#prix .prix-cta { display: grid; justify-items: center; gap: 12px; width: 100%; max-width: 440px; text-align: center; }
#prix .prix-btn { width: 100%; }
#prix .prix-soon-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brass-deco); box-shadow: 0 0 0 4px rgba(201, 164, 92, .2); flex: none; }
#prix .prix-note { margin: 0; display: inline-flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--on-night-muted); transition: color .3s; }
#prix .prix-note-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brass-light); box-shadow: 0 0 0 0 rgba(221, 187, 120, .5); animation: prix-ping 2.4s var(--ease) 4; }
@keyframes prix-ping { 0% { box-shadow: 0 0 0 0 rgba(221, 187, 120, .5); } 70%, 100% { box-shadow: 0 0 0 10px rgba(221, 187, 120, 0); } }
#prix .prix-note.prix-nudge { color: var(--on-night); }
#prix .prix-note.prix-nudge { animation: prix-nudge .5s var(--ease); }
@keyframes prix-nudge { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 50% { transform: translateX(3px); } 75% { transform: translateX(-2px); } }

/* ------------------------------------------------------------------ comparison (signature) */
#prix .prix-compare { position: relative; background: var(--night-2); border: 1px solid var(--night-line); border-radius: var(--r-lg); padding: clamp(24px, 4.5vw, 44px) clamp(20px, 4.5vw, 44px) clamp(22px, 4vw, 36px); }
#prix .prix-compare::before { content: ""; position: absolute; left: clamp(20px, 4.5vw, 44px); right: clamp(20px, 4.5vw, 44px); top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--brass-deco), transparent); opacity: .8; }
#prix .prix-compare-title { margin: 0 0 26px; }
#prix .prix-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; position: relative; }
#prix .prix-bars::before { /* quarter gridlines behind the tracks */ content: ""; position: absolute; inset: -8px 0; pointer-events: none;
  background-image: linear-gradient(90deg, var(--night-line) 1px, transparent 1px); background-size: 25% 100%; opacity: .7;
  -webkit-mask: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); mask: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); }
#prix .prix-row { position: relative; }
#prix .prix-row-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 14px; margin: 0 0 10px; }
#prix .prix-row-name { font-family: var(--serif); font-size: clamp(19px, 2vw, 22px); line-height: 1.2; color: var(--on-night); }
#prix .prix-row-name em { font-style: italic; color: var(--rose); }
#prix .prix-row-val { white-space: nowrap; color: var(--on-night); }
#prix .prix-row-pre { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--on-night-muted); }
#prix .prix-row-val .num { font-size: clamp(20px, 2.2vw, 24px); color: var(--brass-light); }
#prix .prix-row-us .prix-row-val .num { color: var(--rose); }
#prix .prix-track { position: relative; height: 12px; border-radius: 999px; background: rgba(245, 238, 231, .05); box-shadow: inset 0 0 0 1px var(--night-line); }
#prix .prix-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v) * 100%); min-width: 12px; border-radius: inherit; transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(221, 187, 120, .18), rgba(221, 187, 120, .75));
  transition: transform 1.6s var(--ease-out); transition-delay: calc(.35s + var(--i) * .22s); }
#prix .prix-row-us .prix-fill { background: var(--rose); box-shadow: 0 0 18px rgba(240, 163, 179, .55), 0 0 2px rgba(240, 163, 179, .9); }
#prix .prix-axis { display: flex; justify-content: space-between; margin: 14px 0 0; font-size: 12.5px; color: var(--on-night-muted); font-variant-numeric: tabular-nums; }
#prix .prix-axis span { width: 0; display: flex; justify-content: center; white-space: nowrap; }
#prix .prix-axis span:first-child { justify-content: flex-start; }
#prix .prix-axis span:last-child { justify-content: flex-end; }
#prix .prix-notes { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--night-line); display: grid; gap: 6px; font-size: 14px; line-height: 1.55; color: var(--on-night-muted); }
#prix .prix-notes p { margin: 0; }

/* ------------------------------------------------------------------ choreography (JS: .prix-armed → .prix-play) */
#prix.prix-armed .prix-ticket { opacity: 0; transform: translateY(48px) rotate(1.5deg); }
#prix.prix-armed .prix-p { opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease-out), transform .7s var(--ease-out); transition-delay: calc(.35s + var(--i) * 55ms); }
#prix.prix-armed .prix-check { stroke-dashoffset: 24; transition: stroke-dashoffset .5s var(--ease-out); transition-delay: calc(.62s + var(--i, 0) * 55ms); }
#prix.prix-armed .prix-stamp { opacity: 0; transform: rotate(-24deg) scale(1.9); transition-delay: 1.75s; }
#prix.prix-armed .prix-fill { transform: scaleX(0); }
#prix.prix-play .prix-ticket { opacity: 1; transform: rotate(-.8deg); }
#prix.prix-play .prix-p { opacity: 1; transform: none; }
#prix.prix-play .prix-check { stroke-dashoffset: 0; }
#prix.prix-play .prix-stamp { opacity: .82; transform: rotate(-14deg) scale(1); }
#prix.prix-play .prix-fill { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  #prix .prix-glow, #prix .prix-note-dot, #prix .prix-note.prix-nudge { animation: none; }
  #prix .prix-tilt { transform: none; }
}
@media (forced-colors: active) {
  #prix .prix-ticket { -webkit-mask: none; mask: none; border: 1px solid CanvasText; }
  #prix .prix-fill { background: Highlight; forced-color-adjust: none; }
}