.vg, .vg *, .vg *::before, .vg *::after { box-sizing: border-box; }
  .vg {
    --g: #4e9a2f;        /* vert confirmer (viagogo) */
    --g2:#3f7f26;
    --ink:#1d1d22;
    --sub:#6c6a73;
    --line:#ececf0;
    --wine:#7B2D3B;
    font-family: 'Inter', -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    color: var(--ink);
    background: #f4f3f6;
    min-height: 70vh;
    padding: 0 0 calc(40px + env(safe-area-inset-bottom,0));
  }
  .vg__wrap { max-width: 460px; margin: 0 auto; padding: 0 12px; }

  /* top bar */
  .vg-top {
    position: sticky; top: 0; z-index: 20;
    background: #fff; border-bottom: 1px solid var(--line);
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; padding-top: calc(14px + env(safe-area-inset-top,0));
  }
  .vg-top__title { font-weight: 800; font-size: 18px; letter-spacing: -.01em; }
  .vg-top__timer { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--ink); }
  .vg-top__timer.is-urgent { color: var(--wine); }
  .vg-top__timer svg { opacity: .8; }

  /* card */
  .vg-card { background:#fff; border:1px solid var(--line); border-radius:16px; margin-top:12px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.04); }
  .vg-pad { padding: 16px; }
  .vg-hr { height:1px; background:var(--line); border:0; margin:0; }

  /* hero image */
  .vg-hero { position: relative; width:100%; aspect-ratio: 16/9; background:linear-gradient(135deg,#1a1a1a,#3a3a3a); overflow:hidden; }
  .vg-hero img { width:100%; height:100%; object-fit:cover; display:block; }
  .vg-hero__tag { position:absolute; left:12px; bottom:12px; display:flex; align-items:center; gap:6px; background:rgba(0,0,0,.62); color:#fff; font-size:11.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; padding:5px 10px; border-radius:6px; }
  .vg-hero__artist {
    position:absolute; right:12px; bottom:12px; width:84px; height:108px;
    border-radius:10px; overflow:hidden; border:2px solid #fff; box-shadow:0 4px 14px rgba(0,0,0,.35);
    background:#222;
  }
  .vg-hero__artist img { width:100%; height:100%; object-fit:cover; }

  /* event head */
  .vg-ev__title { font-family:'Oswald','Arial Narrow',Impact,sans-serif; font-weight:800; font-size:26px; line-height:1.05; margin:0 0 4px; }
  .vg-ev__meta { font-size:14px; font-weight:600; color:var(--ink); margin:0 0 2px; }
  .vg-ev__venue { font-size:13px; color:var(--sub); margin:0; }
  .vg-badges { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
  .vg-badge { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; padding:5px 10px; border-radius:8px; }
  .vg-badge--hot { background:#fdecef; color:#c0233f; }
  .vg-badge { display:inline-flex; align-items:center; gap:5px; }
  .vg-badge svg { flex:0 0 auto; }
  .vg-badge--award { background:#fff5e0; color:#9a6b00; }

  /* listing / zone block */
  .vg-zone__title { font-size:18px; font-weight:800; margin:0; }
  .vg-zone__sub { font-size:13px; color:var(--sub); margin:2px 0 0; }
  .vg-zone__cat { display:inline-block; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--wine); background:#f6e7eb; padding:2px 8px; border-radius:5px; margin-bottom:6px; }
  .vg-feat { display:flex; align-items:flex-start; gap:12px; margin-top:14px; }
  .vg-feat__ic { width:34px; height:34px; border-radius:9px; background:#f3f2f5; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--ink); }
  .vg-feat__t { font-size:14px; font-weight:700; line-height:1.25; }
  .vg-feat__s { font-size:12.5px; color:var(--sub); line-height:1.35; }

  /* seats list */
  .vg-seats { margin-top:12px; display:flex; flex-direction:column; gap:6px; }
  .vg-seat { display:flex; align-items:center; gap:9px; background:#faf9fb; border:1px solid var(--line); border-radius:9px; padding:7px 11px; }
  .vg-seat__n { width:21px; height:21px; flex-shrink:0; border-radius:50%; background:var(--wine); color:#fff; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; }
  .vg-seat__t { font-size:13px; font-weight:600; color:var(--ink); }
  .vg-remove { display:inline-flex; align-items:center; gap:5px; margin-top:12px; font-size:12.5px; font-weight:600; color:var(--wine); text-decoration:none; }
  .vg-remove:hover { opacity:.75; }

  /* demand meter */
  .vg-demand__h { display:flex; align-items:center; gap:6px; font-size:14px; font-weight:700; margin:0 0 12px; }
  .vg-demand__bar { position:relative; height:7px; border-radius:100px; background:linear-gradient(90deg,#36b34a,#e6c12e 55%,#e0432e); }
  .vg-demand__dot { position:absolute; top:50%; right:6%; width:15px; height:15px; border-radius:50%; background:#fff; border:3px solid var(--ink); transform:translateY(-50%); }
  .vg-demand__tag { position:absolute; top:-26px; right:2%; background:var(--ink); color:#fff; font-size:11px; font-weight:700; padding:3px 9px; border-radius:6px; }
  .vg-merchant { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--sub); margin-top:16px; }
  .vg-merchant b { color:var(--ink); font-weight:700; }
  .vg-merchant a { color:var(--wine); text-decoration:underline; font-weight:600; }

  /* order recap */
  .vg-warn { display:flex; gap:9px; align-items:flex-start; background:#fff7e8; border:1px solid #f3e2bd; border-radius:12px; padding:12px 14px; font-size:13px; color:#7a5b14; line-height:1.4; font-weight:600; margin-bottom:14px; }
  .vg-warn svg { flex-shrink:0; color:#c79214; margin-top:1px; }
  .vg-recap__h { font-size:18px; font-weight:800; margin:0 0 14px; }
  .vg-row { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:14px; margin-bottom:10px; }
  .vg-row__l { color:var(--sub); }
  .vg-row__v { font-weight:600; white-space:nowrap; }
  .vg-total { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding-top:12px; border-top:1px solid var(--line); }
  .vg-total__l { font-size:18px; font-weight:800; }
  .vg-total__v { font-size:20px; font-weight:800; white-space:nowrap; }
  .vg-split { display:inline-block; margin-top:8px; font-size:12.5px; color:var(--wine); text-decoration:underline; cursor:pointer; background:none; border:none; padding:0; }

  .vg-confirm-row { display:flex; gap:10px; align-items:stretch; margin-top:16px; }
  .vg-qty { flex:0 0 auto; }
  .vg-qty select { height:54px; border:1.5px solid #d6d4da; border-radius:12px; padding:0 14px; font:inherit; font-weight:700; font-size:16px; background:#fff; color:var(--ink); }
  .vg-btn {
    flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
    background:var(--g); color:#fff; border:none; border-radius:12px; cursor:pointer;
    font-weight:800; font-size:16px; letter-spacing:.01em; padding:0 18px; min-height:54px;
    box-shadow:0 4px 14px rgba(78,154,47,.32); transition:background .2s, transform .12s;
  }
  .vg-btn:hover { background:var(--g2); transform:translateY(-1px); }
  .vg-btn svg { flex-shrink:0; }

  /* trust */
  .vg-trust { display:flex; gap:12px; align-items:flex-start; padding:16px; }
  .vg-trust__ic { width:38px; height:38px; border-radius:10px; background:#eef4ff; color:#2b62c4; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .vg-trust__ic--t { background:#fdeef0; color:var(--wine); }
  .vg-trust__t { font-size:14px; font-weight:800; margin:0 0 2px; }
  .vg-trust__s { font-size:12.5px; color:var(--sub); line-height:1.45; margin:0; }
  .vg-secure { text-align:center; font-size:12px; color:var(--sub); margin-top:14px; display:flex; align-items:center; justify-content:center; gap:6px; }

  /* empty */
  .vg-empty { text-align:center; padding:60px 20px; }
  .vg-empty h2 { font-family:'Oswald','Arial Narrow',Impact,sans-serif; font-weight:800; font-size:26px; margin:14px 0 6px; }
  .vg-empty p { color:var(--sub); margin:0 0 22px; }
  .vg-empty a { display:inline-flex; align-items:center; gap:8px; background:var(--wine); color:#fff; font-weight:800; padding:13px 22px; border-radius:12px; text-decoration:none; }

  @media (min-width:520px){ .vg-hero { aspect-ratio: 2/1; } }
  .vg-hero__view { width:100%; aspect-ratio:16/9; background:#0d1330; overflow:hidden; }
  .vg-hero__view svg { width:100%; height:100%; display:block; }

  /* Plafond de commande depasse */
  .vg-cap { margin:14px 0 4px; padding:13px 14px; border-radius:12px;
    background:#fdecef; border:1px solid #f3b8c3; color:#8d1b31; }
  .vg-cap__h { display:flex; align-items:center; gap:8px; font-weight:800; font-size:14.5px; margin-bottom:7px; }
  .vg-cap__h svg { flex:0 0 auto; }
  .vg-cap__p { margin:0 0 8px; font-size:13.5px; line-height:1.5; }
  .vg-cap__p:last-of-type { margin-bottom:11px; }
  .vg-cap__clear { width:100%; min-height:46px; border:0; border-radius:999px;
    background:#8d1b31; color:#fff; font:inherit; font-size:15px; font-weight:700; cursor:pointer; }
  .vg-cap__clear[disabled] { opacity:.6; cursor:wait; }
  .vg-btn[disabled] { opacity:.45; cursor:not-allowed; }

  /* Refus de plafond, au premier plan */
  .vg-capm { position:fixed; inset:0; z-index:9600; background:rgba(9,13,36,.62);
    display:none; align-items:center; justify-content:center; padding:18px; }
  .vg-capm.is-open { display:flex; }
  .vg-capm__box { background:#fff; border-radius:18px; width:min(400px,100%);
    padding:24px 20px 18px; text-align:center; box-shadow:0 24px 60px rgba(6,10,30,.42); }
  .vg-capm__ico { width:52px; height:52px; margin:0 auto 13px; border-radius:50%;
    display:grid; place-items:center; background:#fdecef; color:#c0233f; }
  .vg-capm__t { margin:0 0 8px; font-size:20px; }
  .vg-capm__p { margin:0 0 18px; font-size:14.5px; color:#5b6178; line-height:1.5; }
  .vg-capm__go { width:100%; min-height:52px; border:0; border-radius:999px;
    background:#c0233f; color:#fff; font:inherit; font-size:16px; font-weight:700; cursor:pointer; }
  .vg-capm__go[disabled] { opacity:.6; cursor:wait; }
  .vg-capm__close { margin-top:11px; background:none; border:0; color:#5b6178;
    font:inherit; font-size:14px; text-decoration:underline; cursor:pointer; }

  /* Rassurance avant paiement — meme police que la page (Inter) */
  .vg-assur { margin: 18px 0 2px; border-top: 1px solid var(--line); }
  .vg-assur__row { display: flex; align-items: center; gap: 14px; padding: 14px 2px; }
  .vg-assur__row + .vg-assur__row { border-top: 1px solid #f2f1f4; }
  .vg-assur__ic { flex: 0 0 auto; width: 21px; height: 21px; color: var(--wine); }
  .vg-assur__ic svg { width: 21px; height: 21px; display: block; }
  .vg-assur__txt { display: grid; gap: 3px; min-width: 0; }
  .vg-assur__t { font-weight: 700; font-size: 14.5px; line-height: 1.25;
    letter-spacing: -.012em; color: var(--ink); }
  .vg-assur__free { font-style: normal; color: var(--wine); font-weight: 700; }
  .vg-assur__s { display: flex; align-items: center; gap: 6px;
    font-size: 12.5px; color: var(--sub); line-height: 1.3; }
  .vg-assur__dhl { height: 15px; width: auto; display: block; }

/* La position vient d'un « left » en ligne : sans neutraliser le « right »
   d'origine, la pastille s'étire entre les deux et le texte se casse. */
.vg-demand__tag,
.vg-demand__dot { right: auto; }
.vg-demand__tag { white-space: nowrap; }