/* ============================================================
   BUSSY ESPORT VIBES 2026 — faithful implementation of the
   Claude Design mockup. Inline styles in index.html carry the
   ground-truth design values; this file holds the font, base
   rules, keyframes, hover states (converted from style-hover),
   scroll-reveal, responsive rules and accessibility helpers.
   ============================================================ */

@font-face {
  font-family: 'FatFrank';
  src: url('assets/fat-frank-heavy.otf') format('opentype');
  font-weight: 400 900;
  font-display: swap;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; overflow-x: clip; }
/* offset for the sticky header when jumping to in-page anchors */
section[id], span#top { scroll-margin-top: 88px; }

body {
  font-family: 'Geist', sans-serif;
  color: #190B29;
  background: #FFFFFF;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

a { color: #2F8DFF; text-decoration: none; }
a:hover { color: #AC25E5; }

.ff {
  font-family: 'FatFrank', 'Geist', sans-serif;
  text-transform: uppercase;
  letter-spacing: .005em;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---------- Keyframes ---------- */
@keyframes floaty      { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-16px)} }
@keyframes floaty2     { 0%,100%{transform:translateY(0) rotate(-5deg)} 50%{transform:translateY(-22px) rotate(-5deg)} }
@keyframes marquee     { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes arrowX      { 0%,100%{transform:translateX(0)} 50%{transform:translateX(7px)} }
@keyframes floatTiny   { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-4px) rotate(1.2deg)} }

/* ---------- Scroll reveal ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.2,.75,.25,1), transform .7s cubic-bezier(.2,.75,.25,1);
}
[data-reveal].is-visible { opacity: 1; transform: none; }
/* no-JS / unsupported fallback: content must always be visible */
.no-reveal [data-reveal] { opacity: 1; transform: none; }

/* ---------- Focus visibility (a11y floor) ---------- */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #00E0C6;
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- Nav / footer link hover ---------- */
header .nav-link:hover { color: #fff; }
footer .foot-link:hover { color: #fff; }

/* ============================================================
   HOVER STATES (converted from the design's style-hover="...")
   Transitions live inline on each element; these rules only
   describe the hovered end-state.
   ============================================================ */

/* primary gradient pills: header CTA + hero primary */
.hv-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(172,37,229,.55);
  filter: brightness(1.08);
}

/* hero ghost / "Voir le programme" */
.hv-ghost:hover {
  transform: translateY(-3px);
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.4);
}

/* value cards (3-up) */
.hv-valcard:hover {
  transform: scale(1.025);
  box-shadow: 0 20px 44px rgba(25,11,41,.12);
}

/* elite tournament cards */
.hv-elite:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 26px 56px rgba(25,11,41,.16);
}

/* elite card "S'inscrire" button (added: no hover was defined in source) */
.hv-elitebtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(172,37,229,.4);
  filter: brightness(1.06);
}

/* grand-public cards */
.hv-gp:hover {
  transform: translateY(-5px) scale(1.02);
  border-color: rgba(90,176,255,.5);
}

/* salle cards — colours come from per-card CSS vars */
.hv-salle:hover {
  background: var(--hbg);
  border-color: var(--hbd);
  transform: translateY(-6px);
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
}

/* final CTA white button */
.hv-ctawhite:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 22px 48px rgba(0,0,0,.3);
}

/* sticky floating CTA */
.hv-sticky:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 20px 44px rgba(172,37,229,.6);
  filter: brightness(1.08);
}

/* ============================================================
   RESPONSIVE  (mirrors the design's own mobile rules, plus
   heading down-scaling that the design handled in JS)
   ============================================================ */
@media (max-width: 900px) {
  /* Un-stick the sidebars. Use position:relative (NOT static) so the map
     card stays a containing block for its absolutely-positioned overlay,
     otherwise that overlay escapes to the top of the page. */
  .prog-side { position: relative !important; top: auto !important; }
  .map-card  { position: relative !important; top: auto !important; height: 420px !important; }
}

@media (max-width: 760px) {
  /* collapse every multi-column grid to a single column */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* content containers: tighter side gutters */
  [style*="margin: 0 auto"], [style*="margin:0 auto"] { padding-left: 20px !important; padding-right: 20px !important; }

  /* header */
  header > div { padding: 7px 18px !important; gap: 12px !important; }
  header img { height: 26px !important; }
  header nav { gap: 10px !important; }
  header nav a.nav-link { display: none !important; }
  header nav .hv-primary { font-size: 12.5px !important; padding: 7px 14px !important; }

  /* hero logo + the little "4" */
  img[src*="Logo-blanc"] { width: auto !important; height: auto !important; max-width: 76vw !important; }
  img[src*="four.png"] { display: none !important; }

  /* drop the interactive floating decorations on phones */
  .floaty-host { display: none !important; }

  /* un-stick desktop sidebars (never the header). position:relative keeps
     the map card as a containing block for its absolute overlay. */
  [style*="top:96px"], [style*="top: 96px"] { position: relative !important; top: auto !important; }
  .map-card { height: 470px !important; }

  /* trim oversized card paddings */
  [style*="padding:38px"], [style*="padding: 38px"] { padding: 22px !important; }
  [style*="padding:40px"], [style*="padding: 40px"] { padding: 24px !important; }
  [style*="padding:34px"], [style*="padding: 34px"] { padding: 24px !important; }

  /* practical-info rows: label above value */
  .info-row { grid-template-columns: 1fr !important; gap: 4px !important; }

  /* sticky floating CTA a touch smaller */
  .hv-sticky { right: 16px !important; bottom: 16px !important; font-size: 14px !important; padding: 13px 20px !important; }

  /* heading down-scaling (the design did this in JS with a 0.6 factor) */
  .ff.big { font-size: clamp(30px, 8.6vw, 44px) !important; line-height: 1.02 !important; }
  .ff.mid { font-size: clamp(26px, 7vw, 34px) !important; line-height: 1.05 !important; }
}

@media (max-width: 400px) {
  .ff.big { font-size: clamp(26px, 8vw, 34px) !important; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  #heroGlow { display: none !important; }
}