/* ─────────────────────────────────────────────────────────────────────────
   Billetterie FCSM — design system
   Palette: navy #0B2545 / yellow #FFD400 / cream #F6F4EF
   ───────────────────────────────────────────────────────────────────────── */

:root{
  --navy:        #0B2545;
  --navy-2:      #122E55;
  --navy-3:      #1B3D6F;
  --navy-deep:   #050F22;
  --yellow:      #FFD400;
  --yellow-2:    #F2BE00;
  --cream:       #F6F4EF;
  --cream-2:     #ECE8DD;
  --paper:       #FFFFFF;
  --ink:         #0B1626;
  --ink-soft:    #4A5568;
  --ink-mute:    #8A93A1;
  --line:        #E2DDD0;
  --line-2:      #D4CDBA;

  /* Availability */
  --av-open:     #1F8A5B;
  --av-open-2:   #E5F4EC;
  --av-limited:  #D8801A;
  --av-limited-2:#FBEFD9;
  --av-sold:     #A39A85;
  --av-sold-2:   #E8E3D5;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 22px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Manrope", ui-sans-serif, system-ui, sans-serif;
  font-size:15px; line-height:1.5;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button{font-family:inherit; cursor:pointer}
button:focus-visible{outline:2px solid var(--yellow); outline-offset:2px}

.app{min-width:1200px}

/* ── Type system ───────────────────────────────────────────────── */
.display{
  font-family:"Anton", "Manrope", sans-serif;
  font-weight:400;
  letter-spacing:.005em;
  line-height:.92;
  text-transform:uppercase;
}
.eyebrow{
  font-family:"JetBrains Mono", monospace;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--ink-mute);
}
.eyebrow-on-navy{ color:rgba(255,255,255,.55) }
.num{
  font-family:"JetBrains Mono", monospace;
  font-variant-numeric:tabular-nums;
}

/* ── Top bar ───────────────────────────────────────────────────── */
.topbar{
  background:var(--navy-deep);
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.topbar-inner{
  max-width:1440px; margin:0 auto;
  padding:0 32px;
  height:72px;
  display:flex; align-items:center; gap:32px;
}
.brand{
  display:flex; align-items:center; gap:12px;
  text-decoration:none; color:#fff;
}
.brand-mark{
  width:42px; height:42px;
  background:var(--yellow);
  color:var(--navy-deep);
  border-radius:8px;
  display:grid; place-items:center;
  font-family:"Anton", sans-serif;
  font-size:22px;
  letter-spacing:.04em;
  position:relative;
  overflow:hidden;
}
.brand-mark::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(45deg, transparent 0 6px, rgba(11,37,69,.08) 6px 7px);
}
.brand-name{
  font-family:"Anton", sans-serif;
  font-size:20px;
  letter-spacing:.06em;
}
.brand-name small{
  display:block;
  font-family:"JetBrains Mono", monospace;
  font-size:9px;
  letter-spacing:.22em;
  color:rgba(255,255,255,.5);
  font-weight:400;
}
.nav{ display:flex; gap:6px; flex:1 }
.nav a{
  padding:8px 14px;
  text-decoration:none;
  color:rgba(255,255,255,.7);
  font-weight:500;
  font-size:14px;
  border-radius:var(--r-sm);
}
.nav a:hover{ color:#fff; background:rgba(255,255,255,.06) }
.nav a.active{
  color:var(--navy-deep);
  background:var(--yellow);
}
.top-actions{ display:flex; align-items:center; gap:14px }
.icon-btn{
  width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
  background:transparent;
  color:#fff;
  display:grid; place-items:center;
  position:relative;
}
.icon-btn:hover{ background:rgba(255,255,255,.06) }
.cart-badge{
  position:absolute; top:-4px; right:-4px;
  min-width:18px; height:18px; padding:0 5px;
  background:var(--yellow);
  color:var(--navy-deep);
  border-radius:9px;
  font-family:"JetBrains Mono", monospace;
  font-size:10px; font-weight:700;
  display:grid; place-items:center;
}
.account-btn{
  display:flex; align-items:center; gap:8px;
  padding:6px 14px 6px 6px;
  border:1px solid rgba(255,255,255,.14);
  background:transparent; color:#fff;
  border-radius:99px;
  font-size:13px; font-weight:500;
}
.account-btn:hover{ background:rgba(255,255,255,.06) }
.account-avatar{
  width:26px; height:26px; border-radius:50%;
  background:var(--yellow); color:var(--navy-deep);
  display:grid; place-items:center;
  font-size:11px; font-weight:700;
}

/* ── Match band ────────────────────────────────────────────────── */
.match-band{
  background:var(--navy);
  color:#fff;
  position:relative;
  overflow:hidden;
}
.match-band::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 85% 20%, rgba(255,212,0,.10), transparent 50%),
    radial-gradient(ellipse at 10% 90%, rgba(255,212,0,.06), transparent 60%);
  pointer-events:none;
}
.match-band::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:4px;
  background:repeating-linear-gradient(
    90deg,
    var(--yellow) 0 24px,
    var(--navy-deep) 24px 28px
  );
}
.match-inner{
  max-width:1440px; margin:0 auto;
  padding:36px 32px 44px;
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  gap:48px;
  align-items:center;
  position:relative;
}
.match-meta{
  display:flex; flex-direction:column; gap:10px;
}
.match-meta .badges{
  display:flex; gap:8px; flex-wrap:wrap;
}
.tag{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px;
  border-radius:99px;
  font-family:"JetBrains Mono", monospace;
  font-size:10px; letter-spacing:.16em; font-weight:500;
  text-transform:uppercase;
}
.tag-yellow{ background:var(--yellow); color:var(--navy-deep) }
.tag-line  { background:transparent; color:rgba(255,255,255,.7); border:1px solid rgba(255,255,255,.2) }
.tag-pulse::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--av-open);
  box-shadow:0 0 0 0 rgba(31,138,91,.5);
  animation:pulse 1.8s infinite;
}
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(31,138,91,.5) }
  50%    { box-shadow:0 0 0 6px rgba(31,138,91,0)   }
}

.match-versus{
  display:flex; align-items:center; gap:24px;
}
.crest{
  width:96px; height:96px;
  display:grid; place-items:center;
  position:relative;
  flex-shrink:0;
}
.crest-home{
  background:var(--yellow);
  color:var(--navy-deep);
  clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.crest-home::after{
  content:""; position:absolute; inset:8px;
  border:2px solid rgba(11,37,69,.18);
  clip-path:polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.crest-away{
  background:#fff;
  color:#1B3D6F;
  border-radius:50%;
  border:3px solid #1B3D6F;
}
.crest-letter{
  font-family:"Anton", sans-serif;
  font-size:34px;
  letter-spacing:.02em;
  position:relative;
  z-index:1;
}
.versus{
  font-family:"Anton", sans-serif;
  font-size:46px;
  color:rgba(255,255,255,.35);
  letter-spacing:.04em;
}

.match-team{
  display:flex; flex-direction:column;
  align-items:center; gap:10px;
}
.match-team-name{
  font-family:"Anton", sans-serif;
  font-size:22px;
  letter-spacing:.04em;
  text-align:center;
  white-space:nowrap;
}
.match-team-sub{
  font-family:"JetBrains Mono", monospace;
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
}

.match-when{
  text-align:right;
}
.match-when-date{
  font-family:"Anton", sans-serif;
  font-size:38px;
  letter-spacing:.02em;
  line-height:1;
}
.match-when-day{
  font-family:"JetBrains Mono", monospace;
  font-size:11px; letter-spacing:.2em;
  color:var(--yellow);
  margin-bottom:6px;
}
.match-when-place{
  margin-top:10px;
  font-size:13px;
  color:rgba(255,255,255,.7);
}
.match-when-place strong{ color:#fff; font-weight:600 }

.countdown{
  margin-top:14px;
  display:flex; justify-content:flex-end; gap:6px;
}
.countdown-cell{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  border-radius:6px;
  padding:6px 10px;
  text-align:center;
  min-width:48px;
}
.countdown-cell b{
  display:block;
  font-family:"JetBrains Mono", monospace;
  font-size:18px; font-weight:700;
  color:var(--yellow);
}
.countdown-cell span{
  font-family:"JetBrains Mono", monospace;
  font-size:9px; letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
}

/* ── Page header (Choisissez vos places) ─────────────────────── */
.page-head{
  max-width:1440px; margin:0 auto;
  padding:36px 32px 16px;
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px;
}
.page-head h1{
  margin:8px 0 0;
  font-family:"Anton", sans-serif;
  font-size:56px;
  letter-spacing:.01em;
  line-height:.92;
  text-transform:uppercase;
}
.page-head h1 em{
  font-style:normal;
  background: linear-gradient(to top, var(--yellow) 0 38%, transparent 38%);
  padding:0 4px;
}
.steps{
  display:flex; gap:14px; align-items:center;
  font-size:12px;
  color:var(--ink-soft);
}
.step{
  display:flex; align-items:center; gap:8px;
  font-family:"JetBrains Mono", monospace;
  font-size:11px; letter-spacing:.16em;
  text-transform:uppercase;
}
.step b{
  width:22px; height:22px;
  border-radius:50%;
  background:var(--cream-2);
  color:var(--ink-soft);
  display:grid; place-items:center;
  font-size:11px; font-weight:700;
}
.step.active{ color:var(--ink) }
.step.active b{ background:var(--navy); color:var(--yellow) }
.step .sep{ color:var(--line-2) }

/* ── Main grid ─────────────────────────────────────────────────── */
.main{
  max-width:1440px; margin:0 auto;
  padding:8px 32px 56px;
  display:grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(420px, 1fr);
  gap:24px;
  align-items:flex-start;
}

/* Map panel */
.map-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:18px 18px 20px;
  position:relative;
}
.map-toolbar{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:14px; margin-bottom:8px;
  border-bottom:1px solid var(--line);
}
.map-toolbar-left{
  display:flex; align-items:center; gap:14px;
}
.map-title{
  font-family:"Anton", sans-serif;
  font-size:20px;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.map-toolbar small{ color:var(--ink-mute); font-size:12px }
.zoom-toggle{
  display:flex; gap:0;
  border:1px solid var(--line);
  border-radius:99px;
  overflow:hidden;
  font-size:12px;
}
.zoom-toggle button{
  appearance:none; border:0; background:transparent;
  padding:6px 14px;
  font-weight:600;
  color:var(--ink-soft);
}
.zoom-toggle button.on{
  background:var(--navy); color:#fff;
}

.map-stage{
  position:relative;
  width:100%;
  aspect-ratio: 1000 / 700;
  background:
    radial-gradient(ellipse at center, #faf8f2, #ece8dd 80%);
  border-radius:var(--r-md);
  overflow:hidden;
}
.map-stage svg{
  width:100%; height:100%;
  display:block;
}

.zone{ cursor:pointer; transition: transform .18s ease, filter .18s ease }
.zone-shape{
  transition: fill .18s ease, stroke .18s ease, stroke-width .18s ease, opacity .18s;
}
.zone-label{
  font-family:"Anton", sans-serif;
  font-size:14px;
  letter-spacing:.06em;
  fill:var(--navy-deep);
  pointer-events:none;
  text-transform:uppercase;
  user-select:none;
}
.zone-price{
  font-family:"JetBrains Mono", monospace;
  font-size:13px;
  font-weight:700;
  fill:var(--navy-deep);
  pointer-events:none;
  user-select:none;
}
.zone--limited .zone-shape{ fill:var(--av-limited-2); stroke:var(--av-limited) }
.zone--open    .zone-shape{ fill:var(--av-open-2);    stroke:var(--av-open)    }
.zone--sold    .zone-shape{ fill:var(--av-sold-2);    stroke:var(--av-sold);   opacity:.7 }
.zone--sold .zone-label, .zone--sold .zone-price { fill:#7B7460 }

.zone:hover .zone-shape{
  filter:brightness(.97) saturate(1.05);
  stroke-width:3;
}
.zone--selected .zone-shape{
  stroke:var(--navy-deep);
  stroke-width:4;
  filter: drop-shadow(0 6px 14px rgba(11,37,69,.18));
}
.zone--selected .zone-label{
  fill:var(--navy-deep);
}

.pitch-fill{ fill:#2E7A47 }
.pitch-stripes line{ stroke:rgba(255,255,255,.05); stroke-width:18 }
.pitch-line{ stroke:rgba(255,255,255,.7); stroke-width:1.5; fill:none }
.pitch-spot{ fill:rgba(255,255,255,.7) }
.pitch-label{
  font-family:"JetBrains Mono", monospace;
  font-size:10px; letter-spacing:.2em;
  fill:rgba(255,255,255,.55);
  text-anchor:middle;
  pointer-events:none;
}

.compass{
  position:absolute; left:14px; top:14px;
  display:flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.85);
  border:1px solid var(--line);
  border-radius:99px;
  padding:5px 10px;
  font-family:"JetBrains Mono", monospace;
  font-size:10px; letter-spacing:.18em;
  color:var(--ink-soft);
}

.legend{
  display:flex; gap:18px; flex-wrap:wrap;
  padding:14px 4px 0;
  align-items:center;
}
.legend-title{
  font-family:"JetBrains Mono", monospace;
  font-size:10px; letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-mute);
}
.legend-item{
  display:flex; align-items:center; gap:8px;
  font-size:13px;
}
.legend-swatch{
  width:14px; height:14px;
  border-radius:3px;
  border:1.5px solid;
}
.legend-swatch.open    { background:var(--av-open-2);    border-color:var(--av-open) }
.legend-swatch.limited { background:var(--av-limited-2); border-color:var(--av-limited) }
.legend-swatch.sold    { background:var(--av-sold-2);    border-color:var(--av-sold) }

/* ── Right panel ───────────────────────────────────────────────── */
.panel{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  position:sticky; top:16px;
}
.panel-empty{ padding:8px 0 0 }
.panel-empty-head{
  padding:18px 22px 14px;
  border-bottom:1px solid var(--line);
}
.panel-empty-head h2{
  margin:0;
  font-family:"Anton", sans-serif;
  font-size:24px;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.panel-empty-head p{
  margin:6px 0 0;
  font-size:13px;
  color:var(--ink-soft);
}

.zone-list{ display:flex; flex-direction:column }
.zone-row{
  display:grid;
  grid-template-columns: 22px 1fr auto auto;
  align-items:center;
  gap:14px;
  padding:14px 22px;
  border-bottom:1px solid var(--line);
  background:transparent;
  border-left:0; border-right:0; border-top:0;
  text-align:left;
  width:100%;
  transition:background .12s;
}
.zone-row:last-child{ border-bottom:0 }
.zone-row:hover:not([disabled]){ background:var(--cream) }
.zone-row[disabled]{ opacity:.55; cursor:not-allowed }
.zone-row.is-hovered{ background:var(--cream) }
.zone-dot{
  width:14px; height:14px; border-radius:3px;
  border:1.5px solid;
}
.zone-name{
  font-weight:600; font-size:14px;
  letter-spacing:.005em;
}
.zone-name small{
  display:block;
  font-family:"JetBrains Mono", monospace;
  font-size:10px; letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-mute);
  margin-top:2px;
  font-weight:400;
}
.zone-row .price{
  font-family:"Anton", sans-serif;
  font-size:22px;
  letter-spacing:.02em;
  line-height:1;
}
.zone-row .price small{
  display:block;
  font-family:"JetBrains Mono", monospace;
  font-size:9px; letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-mute);
  font-weight:400;
  margin-bottom:1px;
}
.zone-row .arrow{
  width:28px; height:28px; border-radius:50%;
  background:var(--cream-2);
  color:var(--navy);
  display:grid; place-items:center;
  font-size:14px;
}

/* ── Zone detail ──────────────────────────────────────────────── */
.zone-detail-head{
  background:var(--navy);
  color:#fff;
  padding:18px 22px 16px;
  position:relative;
}
.zone-detail-head .back{
  background:none; border:0;
  color:rgba(255,255,255,.65);
  font-size:12px;
  font-family:"JetBrains Mono", monospace;
  letter-spacing:.16em; text-transform:uppercase;
  padding:0; margin-bottom:10px;
  display:flex; align-items:center; gap:6px;
}
.zone-detail-head .back:hover{ color:#fff }
.zone-detail-head h2{
  margin:0;
  font-family:"Anton", sans-serif;
  font-size:30px;
  letter-spacing:.03em;
  text-transform:uppercase;
  line-height:1;
}
.zone-detail-head .sub{
  margin-top:8px;
  font-size:13px;
  color:rgba(255,255,255,.7);
  display:flex; gap:12px; align-items:center;
}
.zone-detail-head .sub span{ display:flex; align-items:center; gap:6px }

.view-strip{
  height:120px;
  background:var(--cream-2);
  background-image: repeating-linear-gradient(
    115deg,
    rgba(11,37,69,.04) 0 14px,
    rgba(11,37,69,.08) 14px 28px
  );
  position:relative;
  display:flex; align-items:center; justify-content:center;
  border-bottom:1px solid var(--line);
}
.view-strip::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(11,37,69,.0), rgba(11,37,69,.18));
}
.view-strip-label{
  position:relative;
  font-family:"JetBrains Mono", monospace;
  font-size:11px; letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(11,37,69,.55);
  background:rgba(255,255,255,.7);
  border:1px dashed rgba(11,37,69,.25);
  padding:6px 12px;
  border-radius:4px;
}

.tickets{
  padding:16px 22px 0;
}
.ticket-types{
  display:flex; flex-direction:column;
  border-top:1px solid var(--line);
}
.ticket-types > div{
  display:grid;
  grid-template-columns: 1fr auto 110px;
  gap:14px;
  padding:14px 0;
  align-items:center;
  border-bottom:1px solid var(--line);
}
.tt-name{ font-weight:600; font-size:14px }
.tt-name small{
  display:block; margin-top:2px;
  font-family:"JetBrains Mono", monospace;
  font-size:10px; letter-spacing:.14em;
  color:var(--ink-mute);
  font-weight:400; text-transform:uppercase;
}
.tt-price{
  font-family:"Anton", sans-serif;
  font-size:20px;
  letter-spacing:.02em;
  text-align:right;
}
.tt-price small{
  display:block;
  font-family:"JetBrains Mono", monospace;
  font-size:9px; letter-spacing:.14em;
  color:var(--ink-mute);
  font-weight:400; margin-bottom:1px;
}
.stepper{
  display:flex; align-items:center; justify-content:space-between;
  border:1px solid var(--line);
  border-radius:99px;
  padding:3px;
  height:34px;
}
.stepper button{
  width:28px; height:28px; border:0;
  background:var(--cream-2);
  color:var(--navy-deep);
  border-radius:50%;
  font-size:16px; font-weight:600;
  display:grid; place-items:center;
  transition:background .12s;
}
.stepper button:hover:not(:disabled){ background:var(--yellow) }
.stepper button:disabled{ opacity:.4; cursor:not-allowed }
.stepper b{
  flex:1; text-align:center;
  font-family:"JetBrains Mono", monospace;
  font-size:14px; font-weight:700;
  font-variant-numeric:tabular-nums;
}

/* CTA */
.cta-block{
  padding:18px 22px 22px;
  border-top:1px solid var(--line);
  background:var(--cream);
}
.cta-total{
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-bottom:14px;
}
.cta-total small{
  display:block;
  font-family:"JetBrains Mono", monospace;
  font-size:10px; letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-mute);
  margin-bottom:2px;
}
.cta-total b{
  font-family:"Anton", sans-serif;
  font-size:38px;
  letter-spacing:.02em;
  line-height:1;
}
.cta-total .qty{
  font-size:13px; color:var(--ink-soft);
}
.cta-add{
  width:100%;
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 18px;
  background:var(--yellow);
  color:var(--navy-deep);
  border:0; border-radius:8px;
  font-family:"Anton", sans-serif;
  font-size:18px;
  letter-spacing:.06em;
  text-transform:uppercase;
  transition:transform .1s, background .15s;
}
.cta-add:hover:not(:disabled){
  background:#FFE242;
  transform:translateY(-1px);
}
.cta-add:active{ transform:translateY(0) }
.cta-add:disabled{
  background:var(--cream-2);
  color:var(--ink-mute);
  cursor:not-allowed;
}
.cta-trust{
  margin-top:12px;
  display:flex; gap:14px; flex-wrap:wrap;
  font-size:11px;
  color:var(--ink-soft);
}
.cta-trust span{ display:flex; align-items:center; gap:5px }

/* ── Subscription band ────────────────────────────────────────── */
.subs{
  background:var(--navy-deep);
  color:#fff;
  position:relative;
  overflow:hidden;
  margin-top:24px;
}
.subs::before{
  content:""; position:absolute; right:-10%; top:-30%;
  width:60%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(255,212,0,.12), transparent 60%);
}
.subs-inner{
  max-width:1440px; margin:0 auto;
  padding:48px 32px;
  display:grid;
  grid-template-columns: 1fr 460px;
  gap:48px;
  align-items:center;
  position:relative;
}
.subs-eyebrow{ color:var(--yellow); margin-bottom:14px }
.subs h2{
  margin:0;
  font-family:"Anton", sans-serif;
  font-size:64px;
  letter-spacing:.01em;
  line-height:.92;
  text-transform:uppercase;
}
.subs h2 em{
  font-style:normal; color:var(--yellow);
}
.subs-body{
  margin-top:18px;
  max-width:520px;
  font-size:15px;
  color:rgba(255,255,255,.75);
  line-height:1.55;
}
.subs-bullets{
  margin-top:24px;
  display:flex; gap:36px; flex-wrap:wrap;
}
.subs-bullet{
  display:flex; flex-direction:column; gap:4px;
}
.subs-bullet b{
  font-family:"Anton", sans-serif;
  font-size:30px;
  letter-spacing:.02em;
  color:var(--yellow);
}
.subs-bullet span{ font-size:12px; color:rgba(255,255,255,.65) }

.subs-card{
  background:#fff;
  color:var(--ink);
  border-radius:var(--r-lg);
  padding:28px 28px 24px;
  position:relative;
  border-top:6px solid var(--yellow);
}
.subs-card .ribbon{
  position:absolute; top:14px; right:14px;
  background:var(--navy);
  color:#fff;
  font-family:"JetBrains Mono", monospace;
  font-size:10px; letter-spacing:.2em;
  text-transform:uppercase;
  padding:4px 10px; border-radius:99px;
}
.subs-card h3{
  margin:0;
  font-family:"Anton", sans-serif;
  font-size:32px;
  letter-spacing:.03em;
  text-transform:uppercase;
}
.subs-card .price{
  margin-top:14px;
  display:flex; align-items:baseline; gap:8px;
}
.subs-card .price b{
  font-family:"Anton", sans-serif;
  font-size:64px;
  letter-spacing:.01em;
  line-height:.9;
}
.subs-card .price small{
  font-size:12px; color:var(--ink-mute);
  font-family:"JetBrains Mono", monospace;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.subs-card ul{
  list-style:none; padding:0; margin:18px 0 18px;
  display:flex; flex-direction:column; gap:8px;
  font-size:13px;
}
.subs-card ul li{
  display:flex; gap:8px; align-items:flex-start;
  padding-left:0;
}
.subs-card ul li::before{
  content:""; width:14px; height:14px;
  background:var(--yellow);
  flex-shrink:0; margin-top:3px;
  clip-path: polygon(20% 50%, 0 60%, 40% 100%, 100% 20%, 90% 10%, 40% 75%);
}
.subs-card .btn-outline{
  width:100%;
  padding:12px 16px;
  background:#fff;
  color:var(--navy-deep);
  border:1.5px solid var(--navy-deep);
  border-radius:8px;
  font-family:"Anton", sans-serif;
  font-size:15px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.subs-card .btn-outline:hover{ background:var(--navy); color:#fff }

/* ── Reassurance + footer ─────────────────────────────────────── */
.reassure{
  background:var(--cream);
  border-top:1px solid var(--line);
}
.reassure-inner{
  max-width:1440px; margin:0 auto;
  padding:28px 32px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:32px;
}
.reassure-item{
  display:flex; gap:14px; align-items:flex-start;
}
.reassure-icon{
  width:36px; height:36px; flex-shrink:0;
  border-radius:8px;
  background:var(--navy);
  color:var(--yellow);
  display:grid; place-items:center;
}
.reassure-item b{ display:block; font-size:14px; margin-bottom:2px }
.reassure-item span{ font-size:12px; color:var(--ink-soft); line-height:1.4 }

.foot{
  background:var(--navy-deep);
  color:rgba(255,255,255,.55);
  padding:24px 32px;
  font-size:12px;
  display:flex; justify-content:space-between;
  align-items:center;
  flex-wrap:wrap; gap:14px;
}
.foot a{ color:rgba(255,255,255,.7); text-decoration:none; margin-right:18px }
.foot a:hover{ color:#fff }

/* ── Toast ─────────────────────────────────────────────────────── */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  background:var(--navy-deep);
  color:#fff;
  padding:12px 20px 12px 16px;
  border-radius:99px;
  display:flex; align-items:center; gap:10px;
  font-size:13px; font-weight:500;
  box-shadow:0 16px 48px rgba(11,37,69,.3);
  z-index:1000;
  border:1px solid rgba(255,255,255,.1);
  animation:toastIn .25s ease;
}
.toast b{
  background:var(--yellow); color:var(--navy-deep);
  width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center;
}
@keyframes toastIn{
  from{ opacity:0; transform:translate(-50%, 12px) }
  to  { opacity:1; transform:translate(-50%, 0) }
}

/* ── Loading states ───────────────────────────────────────────────── */
.loading-pulse{color:var(--muted);animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}
.matches-loading,.map-loading{padding:48px 0;text-align:center}
.map-error{padding:24px;text-align:center;color:#c44141;font-size:14px}
.matches-empty{padding:24px;color:var(--muted);font-size:15px}

/* ── Checkout overlay ─────────────────────────────────────────────── */
.co-overlay{
  position:fixed;inset:0;z-index:200;
  background:rgba(5,15,34,.72);backdrop-filter:blur(6px);
  display:flex;align-items:flex-end;justify-content:center;
}
@media(min-width:640px){
  .co-overlay{align-items:center}
}
.co-panel{
  background:#fff;width:100%;max-width:480px;
  border-radius:16px 16px 0 0;
  max-height:92dvh;display:flex;flex-direction:column;
  overflow:hidden;
}
@media(min-width:640px){
  .co-panel{border-radius:16px;max-height:88dvh}
}
.co-header{
  display:flex;align-items:center;gap:12px;
  padding:16px 20px 12px;border-bottom:1px solid #f0eeeb;
  flex-shrink:0;
}
.co-progress{display:flex;align-items:center;gap:6px;flex:1}
.co-prog-step{
  width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;
  background:#f0eeeb;color:var(--muted);
  transition:background .2s,color .2s;
}
.co-prog-step.active{background:var(--navy);color:#fff}
.co-prog-step.done{background:#2F9E5C;color:#fff}
.co-prog-line{flex:1;height:2px;background:#f0eeeb;max-width:32px}
.co-close{
  width:32px;height:32px;border:none;background:#f0eeeb;
  border-radius:50%;cursor:pointer;font-size:14px;color:var(--navy);
  display:flex;align-items:center;justify-content:center;
}
.co-close:hover{background:#e8e5e0}
.co-body{flex:1;overflow-y:auto;padding:20px}

/* Étapes */
.co-step{display:flex;flex-direction:column;gap:16px}
.co-title{font-family:"Anton",sans-serif;font-size:22px;
  letter-spacing:.03em;text-transform:uppercase;color:var(--navy);margin:0}
.co-sub{margin:0;font-size:14px;color:var(--muted);line-height:1.5}
.co-back{
  background:none;border:none;cursor:pointer;padding:0;
  font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px;
}
.co-back:hover{color:var(--navy)}
.co-tabs{display:flex;gap:4px;padding:2px;background:#f0eeeb;border-radius:8px}
.co-tabs button{
  flex:1;padding:7px 4px;font-size:12px;font-weight:600;
  border:none;background:none;border-radius:6px;cursor:pointer;
  color:var(--muted);transition:background .15s,color .15s;
}
.co-tabs button.on{background:#fff;color:var(--navy);
  box-shadow:0 1px 3px rgba(0,0,0,.12)}
.co-field{display:flex;flex-direction:column;gap:5px}
.co-field label{font-size:12px;font-weight:600;color:var(--navy);text-transform:uppercase;letter-spacing:.06em}
.co-field input{
  padding:10px 12px;border:1.5px solid #ddd;border-radius:8px;
  font-size:15px;color:var(--navy);outline:none;font-family:inherit;
  transition:border-color .15s;
}
.co-field input:focus{border-color:var(--navy)}
.co-error{
  background:#fef0f0;border:1px solid #f5c6c6;color:#c44141;
  padding:10px 12px;border-radius:8px;font-size:13px;
}
.co-loading{text-align:center;padding:24px;color:var(--muted);font-size:14px}

/* Récap */
.co-recap{
  background:#f8f6f1;border-radius:12px;padding:14px 16px;
  display:flex;flex-direction:column;gap:10px;
}
.co-recap--sm{padding:10px 14px}
.co-recap-match{display:flex;flex-direction:column;gap:2px}
.co-recap-match b{font-size:13px;font-weight:700;color:var(--navy)}
.co-recap-match span{font-size:12px;color:var(--muted)}
.co-recap-zone{display:flex;flex-direction:column;gap:2px;
  padding-top:8px;border-top:1px solid #ece8e0}
.co-rz-name{font-size:14px;font-weight:700;color:var(--navy)}
.co-rz-detail{font-size:12px;color:var(--muted)}
.co-recap-lines{display:flex;flex-direction:column;gap:6px;
  padding-top:8px;border-top:1px solid #ece8e0}
.co-recap-line{display:flex;justify-content:space-between;
  font-size:13px;color:var(--navy)}
.co-recap-total{display:flex;justify-content:space-between;
  font-size:15px;font-weight:700;color:var(--navy);
  padding-top:6px;border-top:1px solid #ddd}

/* Titulaires */
.co-holders{display:flex;flex-direction:column;gap:8px}

/* Stripe */
.stripe-element{
  padding:11px 12px;border:1.5px solid #ddd;border-radius:8px;
  background:#fff;
}

/* Done */
.co-step--done{align-items:center;text-align:center;padding:8px 0}
.co-done-icon{
  width:56px;height:56px;border-radius:50%;background:#2F9E5C;
  color:#fff;display:flex;align-items:center;justify-content:center;
}
.co-order-ref{display:flex;flex-direction:column;gap:4px;align-items:center}
.co-order-ref small{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.co-order-ref b{font-size:20px;color:var(--navy)}