/* WhatssOn — composants partagés. Les valeurs viennent toutes de tokens.css. */
:root {
  --gradient-brand: linear-gradient(100deg, var(--brand-cyan) 0%, var(--brand-blue) 18%, var(--brand-violet) 40%, var(--brand-magenta) 60%, var(--brand-pink) 76%, var(--brand-coral) 88%, var(--brand-orange) 100%);
  --gradient-wordmark: linear-gradient(90deg, var(--brand-magenta), var(--brand-pink) 45%, var(--brand-orange));
  --gradient-invite: linear-gradient(100deg, var(--brand-violet), var(--invite) 55%, #b21fd6);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}

.wo { font-family: var(--font-body); color: var(--ink); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
.wo :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ── Bouton ─────────────────────────────────────────── */
.wo-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--touch-min); padding: 0 22px; border-radius: var(--radius-pill); border: 0;
  font: 700 15px/20px var(--font-body); letter-spacing: .01em; cursor: pointer; white-space: nowrap;
  transition: transform .15s var(--ease-out), box-shadow .2s var(--ease-out); }
.wo-btn:active { transform: scale(.97); }
.wo-btn svg { width: 20px; height: 20px; }
.wo-btn--primary { background: var(--acid); color: var(--on-acid); box-shadow: var(--glow-acid); }
.wo-btn--invite { background: var(--gradient-invite); color: var(--on-invite); box-shadow: var(--glow-invite); }
.wo-btn--secondary { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.wo-btn--ghost { background: var(--night-700); color: var(--ink); }
.wo-btn--sm { min-height: 36px; padding: 0 14px; font-size: 13px; }
.wo-btn--block { width: 100%; }
.wo-btn[disabled] { background: var(--night-700); color: var(--ink-subtle); box-shadow: none; cursor: not-allowed; }

/* ── Onglets segmentés (Loisirs / Services) ─────────── */
.wo-seg { display: flex; padding: 4px; gap: 4px; background: var(--night-900); border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--line); }
.wo-seg button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink-muted);
  font: 700 15px/20px var(--font-body); cursor: pointer; }
.wo-seg button svg { width: 18px; height: 18px; }
.wo-seg button[aria-selected="true"] { background: var(--acid); color: var(--on-acid); box-shadow: 0 6px 20px rgba(245, 245, 15, .25); }

/* ── Puces ──────────────────────────────────────────── */
.wo-chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: var(--radius-pill);
  background: var(--night-800); color: var(--ink-muted); box-shadow: inset 0 0 0 1px var(--line); font: 700 13px/16px var(--font-body); white-space: nowrap; }
.wo-chip[aria-pressed="true"] { background: var(--ink); color: var(--night-950); box-shadow: none; }
.wo-chip svg { width: 16px; height: 16px; }

.wo-when { display: inline-flex; align-items: center; gap: 6px; font: 800 11px/14px var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.wo-when::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.wo-when--today { color: var(--when-today); }
.wo-when--tonight { color: var(--when-tonight); }
.wo-when--weekend { color: var(--when-weekend); }

.wo-badge { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 8px;
  font: 800 11px/14px var(--font-body); letter-spacing: .06em; text-transform: uppercase; }
.wo-badge--deal { background: var(--acid); color: var(--on-acid); }
.wo-badge--live { background: rgba(7, 6, 15, .72); color: var(--ink); backdrop-filter: blur(8px); }
.wo-badge--live::before { content: ""; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--danger); }

/* ── Carte d'offre ──────────────────────────────────── */
.wo-card { position: relative; display: flex; flex-direction: column; width: var(--card-w); flex: none;
  border-radius: var(--radius-lg); overflow: hidden; background: var(--night-800); box-shadow: inset 0 0 0 1px var(--line); }
.wo-card__media { position: relative; aspect-ratio: 4 / 5; background: var(--night-700); }
.wo-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wo-card__media::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, var(--scrim)); }
.wo-card__fav { position: absolute; top: 8px; right: 8px; z-index: 1; width: 36px; height: 36px; border-radius: 50%; border: 0;
  display: grid; place-items: center; background: rgba(7, 6, 15, .55); color: var(--ink); backdrop-filter: blur(8px); }
.wo-card__fav svg { width: 18px; height: 18px; }
.wo-card__fav[aria-pressed="true"] { color: var(--brand-pink); }
.wo-card__tag { position: absolute; top: 10px; left: 10px; z-index: 1; }
.wo-card__when { position: absolute; left: 12px; bottom: 10px; z-index: 1; }
.wo-card__body { padding: 10px 12px 12px; display: grid; gap: 4px; }
.wo-card__title { font: 700 16px/20px var(--font-display); letter-spacing: -.01em; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.wo-card__meta { font: 500 13px/18px var(--font-body); color: var(--ink-muted); display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wo-card__meta svg { width: 14px; height: 14px; flex: none; }
.wo-price { display: flex; align-items: baseline; gap: 6px; margin-top: 2px; }
.wo-price__now { font: 800 17px/22px var(--font-display); color: var(--acid); }
.wo-price__was { font: 500 13px/18px var(--font-body); color: var(--ink-subtle); text-decoration: line-through; }

/* ── Zone d'horizon : cadre néon autour d'une section ─ */
/* Le tube néon est un calque au-dessus du contenu (::after, z-index 3) : les tuiles du carrousel glissent dessous.
   Épaisseur : tube coloré de 5px + reflet clair central (::before) + halo intérieur et extérieur. */
.wo-zone { --zone: var(--line-strong); position: relative; isolation: isolate; padding: 18px 0;
  border-radius: var(--radius-xl); background: var(--night-900);
  box-shadow: 0 0 48px -8px var(--zone); }
.wo-zone::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  border: 5px solid var(--zone);
  box-shadow: 0 0 4px var(--zone), 0 0 14px var(--zone), 0 0 32px var(--zone),
              inset 0 0 4px var(--zone), inset 0 0 14px var(--zone), inset 0 0 28px -6px var(--zone); }
.wo-zone::before { content: ""; position: absolute; inset: 1.5px; z-index: 4; pointer-events: none;
  border-radius: calc(var(--radius-xl) - 1.5px); border: 2px solid rgba(255, 255, 255, .78); filter: blur(.6px); }
.wo-zone .wo-rail__track { padding: 0 20px; scroll-padding: 0 20px; }
.wo-zone--today { --zone: var(--when-today); }
.wo-zone--tonight { --zone: var(--when-tonight); }
.wo-zone--weekend { --zone: var(--when-weekend); }
.wo-zone .wo-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--zone); opacity: .55; }

/* ── Carrousel horizontal (dans une zone) ───────────── */
/* Défilement natif : balayage au doigt / pavé tactile, aimantation sur chaque tuile ; glisser à la souris (classe .is-dragging) ;
   les flèches font défiler d'une tuile (180px) et les points suivent la position de défilement. */
.wo-rail { position: relative; overflow: hidden; }
.wo-rail__track { display: flex; gap: var(--space-3); padding: 0 14px; scroll-padding: 0 14px; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; cursor: grab;
  touch-action: pan-x pan-y; }
.wo-rail__track::-webkit-scrollbar { display: none; }
.wo-rail__track > * { scroll-snap-align: start; }
.wo-rail__track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.wo-rail__track.is-dragging img { pointer-events: none; }
.wo-rail__fade { position: absolute; top: 0; bottom: 0; right: 0; width: 36px; pointer-events: none;
  background: linear-gradient(90deg, rgba(15, 13, 28, 0), var(--night-900)); }
.wo-rail__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 14px 0; }
.wo-dots { display: flex; align-items: center; gap: 6px; }
.wo-dot { width: 6px; height: 6px; border-radius: 3px; background: var(--line-strong); transition: width .25s var(--ease-out), background .25s; }
.wo-dot[data-current="true"] { width: 22px; background: var(--zone, var(--ink)); box-shadow: 0 0 8px var(--zone, transparent); }
.wo-arrows { display: flex; gap: 8px; }
.wo-arrow { width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer;
  background: var(--night-700); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
.wo-arrow svg { width: 18px; height: 18px; }
.wo-arrow:disabled { color: var(--ink-subtle); box-shadow: inset 0 0 0 1px var(--line); cursor: default; }

/* ── Barre du bas ───────────────────────────────────── */
.wo-tabbar { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: var(--bar-bottom); align-items: end; height: var(--bar-bottom);
  padding: 0 8px; background: rgba(15, 13, 28, .72); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.wo-tabbar a { display: grid; justify-items: center; gap: 4px; color: var(--ink-subtle);
  font: 700 11px/14px var(--font-body); text-decoration: none; position: relative; padding-bottom: 8px; }
.wo-tabbar a svg { width: 24px; height: 24px; }
.wo-tabbar a[aria-current="page"] { color: var(--ink); }
.wo-tabbar a[aria-current="page"]::after { content: ""; position: absolute; top: -7px; width: 22px; height: 3px; border-radius: 2px; background: var(--acid); }
/* Bouton central « Inviter » : 74px, 70 % dans la barre, 30 % (22px) au-dessus sur le contenu, néon de marque + pulsation. */
.wo-tabbar .wo-tabbar__fab { align-self: end; justify-self: center; position: relative; z-index: 2; width: 74px; height: 74px; margin-bottom: 8px;
  padding: 0; border-radius: 50%; display: grid; place-items: center; color: #ffffff;
  background: radial-gradient(circle at 35% 28%, #4a1a9e 0%, #23084f 55%, #12042b 100%);
  box-shadow: 0 0 0 5px var(--night-950), 0 0 0 7px var(--magenta-text),
              0 0 18px 6px rgba(231, 74, 228, .65), 0 0 46px 10px rgba(149, 4, 253, .55), 0 14px 30px rgba(0, 0, 0, .6);
  transition: transform .15s var(--ease-out); }
.wo-tabbar .wo-tabbar__fab:active { transform: scale(.94); }
.wo-tabbar .wo-tabbar__fab svg { width: 32px; height: 32px; stroke-width: 2.2; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .55)); position: relative; z-index: 3; }
.wo-tabbar .wo-tabbar__fab::before { content: ""; position: absolute; z-index: 2; inset: 4px 9px 52% 9px; border-radius: 40px 40px 24px 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)); pointer-events: none; }
/* Liquide : deux vagues (carrés arrondis géants en rotation) découpées par le cercle, la vague avant plus claire avec un reflet sur la crête. */
.wo-fab__liquid { position: absolute; inset: 0; z-index: 1; border-radius: 50%; overflow: hidden; pointer-events: none;
  animation: wo-slosh 6s ease-in-out infinite alternate; }
.wo-fab__liquid::before, .wo-fab__liquid::after { content: ""; position: absolute; left: 50%; width: 220%; height: 220%; border-radius: 42%;
  transform: translateX(-50%) rotate(0deg); }
.wo-fab__liquid::before { top: 40%; background: linear-gradient(180deg, #b13cff 0%, var(--brand-violet) 45%, #3a0a8a 100%); opacity: .9;
  animation: wo-wave 18s linear infinite; }
.wo-fab__liquid::after { top: 48%; border-radius: 40%;
  background: linear-gradient(180deg, #ff6fd8 0%, var(--brand-magenta) 30%, var(--invite) 75%, #4b0aa8 100%);
  box-shadow: inset 0 3px 2px -1px rgba(255, 255, 255, .85), inset 0 10px 14px -6px rgba(255, 190, 240, .55);
  animation: wo-wave 11s linear infinite reverse; }
@keyframes wo-wave { to { transform: translateX(-50%) rotate(360deg); } }
@keyframes wo-slosh { from { transform: translateY(2px) rotate(-4deg); } to { transform: translateY(-2px) rotate(4deg); } }
.wo-tabbar .wo-tabbar__fab::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid var(--magenta-text);
  animation: wo-fab-pulse 2.4s var(--ease-out) infinite; pointer-events: none; }
@keyframes wo-fab-pulse { 0% { transform: scale(1); opacity: .9; } 70% { transform: scale(1.35); opacity: 0; } 100% { transform: scale(1.35); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .wo-tabbar .wo-tabbar__fab::after { animation: none; opacity: 0; }
  .wo-fab__liquid, .wo-fab__liquid::before, .wo-fab__liquid::after { animation: none; } }
.wo-tabbar .wo-count { position: absolute; top: -4px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--success); color: var(--on-success); font: 800 11px/18px var(--font-body); text-align: center; }
/* Nombre d'amis sous l'icône du bouton « Inviter » (position absolue → n'impacte pas l'icône centrée) */
.wo-tabbar .wo-fab__num { position: absolute; left: 0; right: 0; bottom: 11px; z-index: 3; pointer-events: none;
  text-align: center; color: #ffffff; font: 800 13px/1 var(--font-display); text-shadow: 0 1px 3px rgba(0, 0, 0, .55); }