:root {
  --paper: #ffffff;
  --ink: #0b0f0e;
  --muted: #69736c;
  --line: #dfe4e1;
  --green: #10b981;
  --hot: #34d399;
  --display: "Archivo", system-ui, sans-serif;
  --body: "DM Sans", system-ui, sans-serif;
}
* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--paper);
  color: var(--ink);
}
body {
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}
.site-header {
  height: 72px;
  padding: 14px clamp(18px, 5vw, 34px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  font: italic 900 20px var(--display);
  text-transform: uppercase;
}
.brand img {
  width: 36px;
  height: 36px;
  border-radius: 9px;
}
.status {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.status i {
  width: 8px;
  height: 8px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.12);
  animation: status-halo 2.4s infinite;
}
@keyframes status-halo {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, .45); }
  70% { box-shadow: 0 0 0 9px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .status i { animation: none; }
}
.contact-footer { padding: 20px 16px 28px; text-align: center; color: #77817b; font-size: 12px; line-height: 1.6; }
.contact-footer a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.contact-footer a:hover { color: #087c59; }
main {
  max-width: 620px;
  margin: auto;
}
.match-hero {
  min-height: calc(100svh - 72px);
  padding: clamp(32px, 7vh, 64px) clamp(20px, 5vw, 34px) 34px;
  display: flex;
  flex-direction: column;
}
.eyebrow {
  margin: 0 0 12px;
  color: #0b9268;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
h1 {
  margin: 0 0 28px;
  font: 900 clamp(54px, 16vw, 94px) / 0.86 var(--display);
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
h1 em {
  color: var(--green);
}
.match-card {
  background: var(--ink);
  color: white;
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 24px 54px -32px rgba(0, 0, 0, 0.7);
}
.venue {
  display: flex;
  align-items: center;
  gap: 17px;
}
.date {
  width: 58px;
  height: 64px;
  border: 1px solid #34403b;
  border-radius: 14px;
  display: grid;
  place-content: center;
  text-align: center;
}
.date b {
  font: 800 25px/1 var(--display);
}
.date small {
  color: var(--green);
  font-weight: 800;
  letter-spacing: 0.12em;
}
.venue p {
  margin: 0;
  font: 800 20px var(--display);
}
.venue div span {
  font-size: 13px;
  color: #9ba59f;
}
dl {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 21px 0 0;
  padding-top: 18px;
  border-top: 1px solid #29312e;
}
dl div + div {
  border-inline-start: 1px solid #29312e;
  padding-inline-start: 14px;
}
[dir="rtl"] .primary > span:last-child,
[dir="rtl"] .secondary > span:last-child {
  transform: scaleX(-1);
}
dt {
  font-size: 10px;
  color: #87918b;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
dd {
  margin: 5px 0 0;
  font-weight: 800;
  font-size: 16px;
}
.seats {
  margin: 22px 0 14px;
}
.seats.is-empty {
  display: none;
}
.seat-copy {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.seat-copy strong {
  font-size: 15px;
}
.seat-copy span {
  font-weight: 800;
}
.seat-track {
  height: 8px;
  border-radius: 99px;
  background: var(--line);
  overflow: hidden;
}
.seat-track span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--green);
  border-radius: inherit;
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.primary,
.secondary {
  width: 100%;
  border: 0;
  border-radius: 999px;
  padding: 18px 24px;
  font: 700 17px var(--body);
  display: flex;
  justify-content: center;
  gap: 14px;
  cursor: pointer;
}
.primary {
  background: var(--green);
  color: #04281d;
  box-shadow: 0 10px 22px -14px rgba(16, 185, 129, 0.35);
}
.secondary {
  background: var(--ink);
  color: #fff;
}
.primary:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  box-shadow: none;
}
.booking-notes {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 11px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}
.booking-notes strong {
  color: #425049;
}
.reassurance {
  font-size: 12px;
  color: var(--muted);
  margin: 7px 0 0;
  text-align: center;
}
.message {
  text-align: center;
  font-weight: 700;
  color: #c33;
  margin: 10px 0;
}
.message:empty {
  display: none;
}
.message.success {
  color: #087c59;
}
.public-details {
  margin-top: 14px;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
}
.public-details > label {
  display: block;
  margin-bottom: 13px;
}
.public-details label > span,
.public-details legend {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--muted);
}
.public-details input[type="email"],
.public-details input[name="prenom"],
.public-details input[type="tel"] {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  font: 600 16px var(--body);
}
.phone-details h2 {
  margin: 0 0 5px;
  font: 800 22px var(--display);
  letter-spacing: 0;
}
.phone-details > p {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}
.public-details fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}
.public-details legend {
  grid-column: 1/-1;
}
.public-details fieldset label {
  position: relative;
}
.public-details fieldset input {
  position: absolute;
  opacity: 0;
}
.public-details fieldset span {
  margin: 0;
  padding: 11px 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  text-align: center;
  font-size: 12px;
  text-transform: none;
  color: var(--ink);
}
.public-details fieldset input:checked + span {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
@media (max-width: 370px) {
  .status span {
    display: none;
  }
}

/* Payment confirmation: the celebratory hand-off into the real match. */
.booking-success {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow-y: auto;
  background: var(--paper);
  color: var(--ink);
}
.booking-success-intro {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--paper);
  transition: opacity .6s cubic-bezier(.22,1,.36,1), visibility .6s;
}
.booking-success.is-settled .booking-success-intro {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.booking-success-intro > img {
  width: 68px;
  height: 68px;
  border-radius: 17px;
  margin-bottom: 22px;
  animation: success-pop .7s cubic-bezier(.22,1,.36,1) both;
}
.booking-success-intro > p {
  margin: 0 0 13px;
  color: var(--hot);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.booking-success-intro h2 {
  margin: 0;
  font: 900 clamp(46px, 12vw, 76px)/.94 var(--display);
  text-transform: uppercase;
}
.booking-success-intro h2 em { color: var(--green); }
@keyframes success-pop { from { opacity:0; transform:scale(.45); } 65% { transform:scale(1.08); } to { opacity:1; transform:scale(1); } }
.celebration-lines { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.celebration-lines span {
  position:absolute;
  top:-15%;
  width:2px;
  height:28%;
  background:linear-gradient(180deg,transparent,var(--green));
  opacity:0;
  animation:success-fall 1.4s cubic-bezier(.22,1,.36,1) both;
}
.celebration-lines span:nth-child(1){left:9%;animation-delay:.08s}.celebration-lines span:nth-child(2){left:25%;animation-delay:.32s}.celebration-lines span:nth-child(3){left:41%;animation-delay:.16s}.celebration-lines span:nth-child(4){left:59%;animation-delay:.46s}.celebration-lines span:nth-child(5){left:76%;animation-delay:.22s}.celebration-lines span:nth-child(6){left:92%;animation-delay:.38s}
@keyframes success-fall { 0%{transform:translateY(0);opacity:0} 25%{opacity:.9} 100%{transform:translateY(520%);opacity:0} }
.booking-dashboard {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
  padding: max(28px,env(safe-area-inset-top)) 20px max(48px,env(safe-area-inset-bottom));
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s .15s cubic-bezier(.22,1,.36,1), transform .7s .15s cubic-bezier(.22,1,.36,1);
}
.booking-success.is-settled .booking-dashboard { opacity:1; transform:none; }
.success-brand { display:flex; align-items:center; gap:9px; margin-bottom:28px; font:italic 900 15px var(--display); text-transform:uppercase; color:var(--ink); }
.success-brand img { width:30px; height:30px; border-radius:8px; }
.success-badge { display:inline-flex; align-items:center; gap:7px; margin:0 0 15px; padding:7px 13px; border-radius:999px; background:rgba(16,185,129,.13); color:var(--hot); font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.success-badge svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.booking-dashboard > h2 { margin:0; font:900 clamp(38px,10vw,54px)/.96 var(--display); text-transform:uppercase; }
.booking-dashboard > h2 em { color:var(--green); }
.success-lead { margin:13px 0 24px; color:var(--muted); font-size:15px; }
.success-ticket { padding:18px; border:1px solid #29312e; border-radius:18px; background:var(--ink); color:#fff; box-shadow:0 16px 34px rgba(8,13,11,.12); }
.success-ticket-main { display:flex; align-items:center; gap:14px; }
.success-ticket-main strong { display:block; font:800 19px var(--display); }
.success-ticket-main div small { display:block; margin-top:4px; color:#8e9993; font-size:12.5px; }
.success-ticket dl { margin-top:17px; padding-top:15px; }
.success-info { display:flex; gap:13px; align-items:flex-start; margin:14px 0; padding:17px; border-radius:16px; background:#fff; border:1px solid var(--line); }
.success-info > span { width:32px; height:32px; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; background:rgba(16,185,129,.13); color:var(--hot); font-size:16px; }
.success-info strong,.success-rule strong { display:block; margin-bottom:3px; font-size:14px; }
.success-info p,.success-rule p { margin:0; color:var(--muted); font-size:13px; line-height:1.45; }
.success-phone { margin:14px 0; padding:18px; border-radius:16px; background:#f6f7f6; color:var(--ink); }
.success-phone h3 { margin:0 0 4px; font:800 21px var(--display); }
.success-phone > p { margin:0 0 14px; color:var(--muted); font-size:13px; line-height:1.4; }
.success-phone label > span { display:block; margin-bottom:6px; color:var(--muted); font-size:10px; font-weight:800; text-transform:uppercase; }
.success-phone input { width:100%; padding:14px; border:1px solid var(--line); border-radius:12px; font:600 16px var(--body); }
.phone-entry { display:grid; grid-template-columns:112px minmax(0,1fr); background:white; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.phone-entry:focus-within { border-color:var(--green); box-shadow:0 0 0 3px #10b98122; }
.phone-entry select { width:100%; min-width:0; border:0; border-right:1px solid var(--line); padding:12px 8px; background:#eef7f3; color:var(--ink); font:600 16px var(--body); outline:none; }
.success-phone .phone-entry input { min-width:0; border:0; border-radius:0; outline:none; padding:14px 10px; }
.success-phone .phone-feedback { min-height:20px; margin:6px 0 0; font-size:13px; color:#26745b; }
.success-phone .phone-feedback.invalid { color:#b42318; }
.success-phone-button { width:100%; margin-top:12px; padding:15px 18px; border:0; border-radius:999px; display:flex; justify-content:center; gap:12px; background:var(--green); color:#04281d; font:700 15px var(--body); }
.success-note { margin:10px 0; color:var(--hot); font-size:13px; text-align:center; }
.success-rule { display:flex; gap:13px; align-items:flex-start; margin-top:14px; padding:17px; border:1px solid #efc9c9; border-radius:16px; background:#fff4f4; }
.success-rule > span { width:30px; height:30px; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; background:rgba(248,113,113,.15); color:#fca5a5; font-weight:900; }
.success-rule strong { color:#a83f3f; text-transform:uppercase; letter-spacing:.05em; font-size:11px; }
.success-cancel { margin:18px 8px 0; color:#77817b; font-size:11.5px; line-height:1.45; text-align:center; }
html.payment-return body { background:var(--paper); }
html.payment-return body > header,html.payment-return body > main { visibility:hidden; }
html.payment-return body::before { content:""; position:fixed; inset:0; z-index:90; background:var(--paper) url('/network/assets/nextfive-mark.png') center/56px 56px no-repeat; }
html.payment-return body:has(.booking-success:not([hidden]))::before { display:none; }
@media (prefers-reduced-motion:reduce) { .booking-success-intro > img,.celebration-lines span{animation:none}.booking-success-intro,.booking-dashboard{transition:none} }

/* Compact rhythm tuned against real mobile Safari viewports. */
.site-header {
  height: 64px;
  padding: 12px clamp(18px, 5vw, 28px);
}
.brand img {
  width: 34px;
  height: 34px;
}
.status {
  font-size: 10px;
}
.match-hero {
  min-height: calc(100svh - 64px);
  padding: 34px clamp(20px, 5vw, 28px) 28px;
}
.eyebrow {
  margin-bottom: 9px;
  font-size: 11px;
  letter-spacing: 0.15em;
}
h1 {
  margin-bottom: 24px;
  font-size: 56px;
  line-height: 0.85;
}
.match-card {
  padding: 19px;
  border-radius: 18px;
  box-shadow: 0 18px 42px -30px rgba(0, 0, 0, 0.75);
}
.date {
  width: 54px;
  height: 60px;
}
.date b {
  font-size: 23px;
}
.venue {
  gap: 14px;
}
.venue p {
  font-size: 18px;
}
dl {
  margin-top: 18px;
  padding-top: 16px;
}
dd {
  font-size: 15px;
}
.seats {
  margin: 18px 0 0;
}
.action {
  margin-top: 18px;
}
.primary,
.secondary {
  padding: 16px 22px;
  font-size: 16px;
}
.guarantees {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
}
.guarantees p {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0;
  color: #77817b;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
}
.trust-icon {
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #dcf7ed;
  color: #087c59;
}
.trust-icon svg {
  width: 10px;
  height: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.public-details .reassurance {
  margin-top: 10px;
}
.brand-five { color: #059e73; }
.match-hero { padding-top: 0; }
.match-scene {
  position: relative;
  margin: 0 calc(-1 * clamp(20px, 5vw, 28px));
  height: 280px;
  overflow: hidden;
  border-radius: 0;
  background: #16271e;
}
.match-scene > img { width: 100%; height: 100%; object-fit: cover; object-position: center 46%; }
.match-scene::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.78), transparent 72%); }
.scene-heading { position: absolute; z-index: 1; bottom: 20px; inset-inline: 28px; }
.scene-heading .eyebrow { color: #fff; font-size: 10px; letter-spacing: 0; margin-bottom: 10px; }
.scene-heading h1 { color: #fff; font-size: 48px; letter-spacing: 0; margin: 0; }
.scene-heading h1 em { color: #25dea2; }
.match-promise { margin: 24px 0 25px; font-size: 20px; font-weight: 700; line-height: 1.3; text-align: start; }
.match-promise span { display: block; font-size: 14px; font-weight: 400; color: #65716b; margin-top: 5px; }
#action { margin-top: 22px; }
#checkout { background: var(--green); color: #062c21; border-radius: 999px; min-height: 56px; padding: 16px 22px; box-shadow: 0 10px 22px -14px rgba(16,185,129,.35); justify-content: center; gap: 22px; }
#checkout > span:last-child { font-size: 22px; line-height: 1; }
#checkout:hover:not(:disabled) { background: #16c78d; }
#checkout:disabled { opacity: .5; }
#booking-notes { margin-top: 15px; gap: 7px; }
@media (min-width: 700px) { .match-scene { height: 320px; } .scene-heading h1 { font-size: 58px; } }
.refund-icon svg {
  width: 9px;
  height: 9px;
  stroke-width: 1.6;
}
.all-matches { color: var(--muted); font-size: 13px; padding: 15px 0; text-decoration: none; }
.all-matches:hover { color: var(--ink); }
#catalogue-waitlist { width: min(440px,calc(100% - 32px)); max-height: calc(100svh - 32px); overflow: auto; border: 0; border-radius: 18px; padding: 28px 22px 22px; color: var(--ink); }
#catalogue-waitlist::backdrop { background: rgba(0,0,0,.55); }
#catalogue-waitlist h2 { margin: 12px 32px 12px 0; font: 800 23px/1.2 var(--display); }
#catalogue-waitlist .public-details { border: 0; padding: 0; }
#catalogue-waitlist .waitlist-match { font-size: 14px; color: var(--muted); line-height: 1.5; }
#catalogue-waitlist [role="status"] { font-size: 14px; line-height: 1.5; }
#catalogue-waitlist .dialog-close { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; background: transparent; border: 0; font-size: 28px; cursor: pointer; color: var(--muted); }
.match-catalogue .match-hero { display: none; }
.match-catalogue main { max-width: 960px; }
.catalogue-scene { margin: 0; height: 300px; }
.catalogue-scene .scene-heading h1 { font-size: 48px; line-height: .95; }
.catalogue-content { padding: 0 24px 32px; }
.catalogue-content > h2 { margin: 30px 0 16px; font: 800 18px var(--display); }
.match-list { display: grid; gap: 16px; }
#catalogue-guarantees { margin-top: 20px; gap: 7px; }
.fixture { background: var(--ink); color: #fff; padding: 22px; border: 1px solid #26352e; border-radius: 18px; min-width: 0; box-shadow: 0 14px 30px -23px rgba(11,15,14,.45); }
.fixture-top { display: flex; align-items: center; gap: 16px; }
.fixture-heading { min-width: 0; }
.fixture-day { margin: 0; font-size: 12px; font-weight: 700; text-transform: uppercase; color: #b9c8c0; }
.fixture-state { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; min-height: 28px; border-radius: 999px; background: #143327; color: #6ce8b8; font-size: 11px; font-weight: 700; line-height: 1.3; }
.fixture.is-open .fixture-state::before { content: ''; width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: #48e6b0; }
.fixture.is-full .fixture-state { color: #d9dfdc; background: #242c28; }
.fixture.is-held .fixture-state { color: #e5d4a4; background: #302c21; }
.fixture.is-last-spots .fixture-state { color: #ffd078; background: #332819; }
.fixture.is-last-spots .fixture-state::before { content: none; }
.fixture-title { margin: 0 0 7px; font: 800 19px/1.3 var(--display); letter-spacing: 0; overflow-wrap: anywhere; }
.fixture-hour { display: block; color: #34d399; margin-top: 4px; font-size: 30px; font-style: italic; }
.fixture-title::first-letter { text-transform: uppercase; }
.fixture-venue { margin: 0; color: #bac3be; font-size: 15px; }
.fixture-info { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 22px 0 16px; font-size: 13px; }
.fixture-price { font-size: 19px; font-weight: 700; }
.fixture-feedback { font-size: 13px; line-height: 1.4; color: #ffbaba; margin-bottom: 0; }
.fixture-feedback:empty { display: none; }
.fixture-proof { color: #48e6b0; }
.fixture-action { text-decoration: none; text-align: center; height: 56px; min-height: 56px; padding-block: 0; align-items: center; font-size: 15px; }
.fixture-action:hover { background: #16c78d; }
.fixture-arrow { flex: 0 0 24px; font-size: 25px; line-height: 1; font-weight: 500; }
.fixture-action[aria-busy="true"] .fixture-arrow { visibility: hidden; }
.fixture-action-label { min-width: 0; }
.fixture-action:focus-visible,.all-matches:focus-visible { outline: 3px solid #078a62; outline-offset: 4px; }
.catalogue-retry { border: 0; background: transparent; color: #087c59; text-decoration: underline; font: inherit; cursor: pointer; }
#catalogue-message:empty { display: none; }
@media (min-width: 700px) {
  .match-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .catalogue-scene { height: 360px; }
  .catalogue-scene .scene-heading h1 { font-size: 64px; }
}
@media (max-width: 370px) {
  .catalogue-content { padding-inline: 18px; }
  .catalogue-scene .scene-heading h1 { font-size: 40px; }
  .fixture { padding: 18px; }
  .fixture-title { font-size: 18px; }
}
@media (max-width: 370px) {
  .match-hero {
    padding-top: 27px;
  }
  .match-card {
    padding: 17px;
  }
  h1 {
    font-size: 46px;
  }
}