/* ============================================================
   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.
   ============================================================ */

/* ============================================================
   GEIST auto-hébergée (SIL Open Font License 1.1).
   Police variable : un seul fichier couvre les graisses 400 à 700.
   Servie depuis le site, donc plus aucune requête vers
   fonts.googleapis.com / fonts.gstatic.com — et donc plus aucune
   transmission de l'IP du visiteur à Google.
   Sous-ensembles latin + latin-ext (latin-ext porte le « œ »).
   ============================================================ */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/geist-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@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; }

/* `scroll-behavior: smooth` n'est délibérément PAS posé ici : en CSS, il
   empêche le navigateur d'atteindre l'ancre quand on arrive sur
   index.html#section depuis une autre page (le saut initial est annulé).
   main.js l'active une fois ce saut effectué — voir initSmoothScroll(). */
html { 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; }
}

/* ============================================================
   PAGE PROGRAMME (programme.html)
   Timeline 2 scènes x créneaux de 30 min : la hauteur d'une carte
   encode sa DUREE. Elle porte la programmation scénique (docx).
   Les heures de DEPART des tournois, qui se jouent sur les postes
   de compétition et non sur scène, vivent dans la bande `.dep`.
   ============================================================ */

/* le haut de page reste sombre (hero + tout le week-end) ;
   tout ce qui suit bascule sur le blanc du body */
.prog-dark {
  position: relative;
  background: linear-gradient(180deg, #160C2E, #0A0720);
}

.tl {
  --rail: 78px;
  --dep: 160px;
  --gap: 18px;
  --slot: 60px;
  position: relative;
}

/* ---- en-tête de scènes, collant sous le header du site ---- */
.tl-head {
  position: sticky;
  top: 48px;
  z-index: 6;
  display: grid;
  grid-template-columns: var(--rail) var(--dep) 1fr 1fr;
  column-gap: var(--gap);
  padding: 13px 0 12px;
  margin-bottom: 16px;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(25, 11, 41, .12);
}
.tl-head .sc {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #190B29;
}
/* Pas de pastille colorée ici : sur la timeline, la couleur ne signifie
   QUE la catégorie d'animation. La salle est portée par la colonne et
   par son intitulé, jamais par la couleur — sinon le bleu voudrait dire
   à la fois « Esport Arena » et « compétition ». */

/* ---- corps de la grille ---- */
.tl-grid { display: grid; grid-template-columns: var(--rail) var(--dep) 1fr 1fr; column-gap: var(--gap); }
.tl-rail, .tl-col, .tl-dep { display: grid; }
.d-sam .tl-rail, .d-sam .tl-col, .d-sam .tl-dep { grid-template-rows: repeat(18, var(--slot)); }
.d-dim .tl-rail, .d-dim .tl-col, .d-dim .tl-dep { grid-template-rows: repeat(16, var(--slot)); }

.tl-rail { position: relative; }
.tl-h {
  font-weight: 700;
  font-size: 13px;
  color: #6b6377;
  padding-top: 2px;
  border-top: 1px solid rgba(25, 11, 41, .1);
  padding-right: 10px;
  text-align: right;
}

/* lignes de repère horaires derrière les colonnes */
.tl-col {
  position: relative;
  background: repeating-linear-gradient(
    180deg,
    rgba(25, 11, 41, .09) 0 1px,
    transparent 1px calc(var(--slot) * 2)
  );
}

/* ---- carte évènement ---- */
.tl-ev {
  --c:  #2F8DFF;                    /* accent : bordure au survol */
  --ct: #0F5FCC;                    /* libellé horaire, lisible sur clair */
  --cw: rgba(47, 141, 255, .10);    /* teinte de fond, aplat uni */
  --cb: rgba(47, 141, 255, .34);    /* bordure */
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  /* haut de carte = heure de début : le titre s'aligne sur la ligne horaire */
  justify-content: flex-start;
  gap: 3px;
  margin-bottom: 7px;
  padding: 11px 15px;
  border-radius: 14px;
  background: var(--cw);
  border: 1px solid var(--cb);
  box-shadow: 0 1px 2px rgba(25, 11, 41, .04);
  overflow: hidden;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.tl-ev:hover {
  transform: translateY(-2px);
  border-color: var(--c);
  box-shadow: 0 16px 34px -16px rgba(25, 11, 41, .45);
}
.tl-ev .h { font-weight: 700; font-size: 11.5px; letter-spacing: .05em; color: var(--ct); }
.tl-ev .t { font-weight: 700; font-size: 16.5px; line-height: 1.24; color: #190B29; text-wrap: pretty; }
.tl-ev .s { font-size: 13.5px; font-weight: 600; line-height: 1.35; color: #4a4157; text-wrap: pretty; }
/* créneau de 30 min : tout sur une ligne pour tenir dans la hauteur */
.tl-ev.is-short { flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; }
.tl-ev.is-short .h { flex-shrink: 0; }

/* catégories : accent / couleur de texte / teinte de fond / bordure */
.ev-comp    { --c: #2F8DFF; --ct: #0F5FCC; --cw: rgba(47, 141, 255, .10);  --cb: rgba(47, 141, 255, .34); }
.ev-talk    { --c: #AC25E5; --ct: #8A16BE; --cw: rgba(172, 37, 229, .09);  --cb: rgba(172, 37, 229, .32); }
.ev-fun     { --c: #00A98F; --ct: #00795F; --cw: rgba(0, 169, 143, .11);   --cb: rgba(0, 169, 143, .34); }
.ev-show    { --c: #FF41A4; --ct: #C2186F; --cw: rgba(255, 65, 164, .10);  --cb: rgba(255, 65, 164, .32); }
.ev-neutral { --c: rgba(25, 11, 41, .35); --ct: #6b6377;
              --cw: rgba(25, 11, 41, .035);
              --cb: rgba(25, 11, 41, .13); }
.ev-neutral .t { color: #4a4157; font-weight: 600; }

/* ---- colonne « départ des tournois » ----
   Un départ est un instant, pas une durée : la carte se cale en haut
   de son créneau et garde sa hauteur naturelle. Plusieurs départs à
   la même heure s'empilent dans le même créneau. */
.tl-dep { position: relative; }
.dep-slot {
  align-self: start;
  display: flex; flex-direction: column; gap: 6px;
  padding-top: 1px;
}
/* Registre volontairement neutre : un départ n'est pas une animation de
   scène, il ne prend donc aucune couleur de catégorie. Le chevron le
   distingue des créneaux « temps forts », eux aussi gris. */
.dep-m {
  display: flex; flex-direction: column; gap: 1px;
  padding: 8px 11px;
  border-radius: 12px;
  background: #F5F6FA;
  border: 1px solid rgba(25, 11, 41, .15);
  transition: transform .2s ease, border-color .2s ease;
}
.dep-m:hover { transform: translateY(-2px); border-color: rgba(25, 11, 41, .32); }
.dep-m .dh {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 12.5px; font-weight: 700; color: #190B29;
  font-variant-numeric: tabular-nums;
}
.dep-m .dh::before { content: '\25B8'; color: #8b8397; font-size: 11px; }
.dep-m .dl {
  font-style: normal; font-size: 10.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: #8b8397;
}
.dep-m .dg { font-size: 13.5px; font-weight: 700; line-height: 1.25; color: #190B29; text-wrap: pretty; }
/* ---- tableau « tout le week-end » (clair) ----
   Rail horaire à gauche, en écho à celui de la timeline. Traitement
   de carte volontairement léger : un contour, des filets, pas d'ombre
   ni d'élévation — c'est un tableau, pas une vignette. */
.wke {
  display: grid;
  grid-template-columns: 152px 244px 1fr;
  background: #fff;
  border: 1px solid rgba(25, 11, 41, .13);
  border-radius: 18px;
  overflow: hidden;
}

.wke-h {
  padding: 13px 20px;
  background: #F7F8FC;
  border-bottom: 1px solid rgba(25, 11, 41, .11);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #6b6377;
}

/* la cellule horaire, fusionnée sur toutes les lignes */
.wke-t {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 20px;
  background: #F7F8FC;
  border-right: 1px solid rgba(25, 11, 41, .11);
  font-weight: 700;
  font-size: 19px;
  color: #190B29;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.wke-t span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #8b8397;
}

.wke-s {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px;
  font-family: 'FatFrank', 'Geist', sans-serif;
  text-transform: uppercase;
  font-size: 20px;
  line-height: 1.05;
  color: #190B29;
}
.wke-s::before {
  content: '';
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--c);
  flex-shrink: 0;
}

.wke-c {
  display: flex;
  flex-wrap: wrap;
  /* Sans ces deux lignes, flexbox étire par défaut (`normal` = `stretch`) :
     quand le nom de salle passe sur deux lignes, la cellule grandit et les
     étiquettes s'allongent verticalement au lieu de garder leur hauteur. */
  align-items: center;
  align-content: center;
  gap: 7px;
  padding: 16px 20px;
}
.wke-c span {
  background: #F5F6FA;
  border: 1px solid rgba(25, 11, 41, .08);
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 13.5px;
  font-weight: 600;
  color: #3d3548;
}

/* filet entre deux salles */
.wke .brd { border-top: 1px solid rgba(25, 11, 41, .1); }

@media (max-width: 760px) {
  .wke { display: block; }
  .wke-h { display: none; }
  .wke-t {
    flex-direction: row;
    align-items: baseline;
    white-space: normal;
    gap: 10px;
    border-right: 0;
    border-bottom: 1px solid rgba(25, 11, 41, .11);
  }
  .wke-s { padding-bottom: 6px; font-size: 18px; }
  .wke-c { padding-top: 0; }
  .wke .brd { border-top: 0; }
  .wke-s.brd { border-top: 1px solid rgba(25, 11, 41, .1); margin-top: 4px; padding-top: 18px; }
}

/* ---- onglets de journée ---- */
.day-tab {
  cursor: pointer;
  font-family: 'Geist', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #4a4157;
  background: #fff;
  border: 1px solid rgba(25, 11, 41, .14);
  border-radius: 999px;
  padding: 12px 26px;
  transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
}
.day-tab:hover { color: #190B29; background: #EEF2FA; transform: translateY(-2px); }
.day-tab[aria-selected="true"] {
  color: #fff;
  background: linear-gradient(135deg, #2F8DFF, #AC25E5);
  border-color: transparent;
  box-shadow: 0 10px 26px rgba(172, 37, 229, .4);
}

/* ---- légende ---- */
.lg {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: #4a4157;
}
.lg::before {
  content: ''; width: 10px; height: 10px; border-radius: 3px;
  background: var(--c); flex-shrink: 0;
}

/* ---- responsive : la grille devient deux listes ---- */
@media (max-width: 860px) {
  .tl-head { display: none; }
  .tl-grid { grid-template-columns: 1fr; row-gap: 34px; }
  .tl-rail { display: none; }
  .d-sam .tl-dep, .d-dim .tl-dep {
    display: flex; flex-direction: column; gap: 10px;
    grid-template-rows: none;
  }
  .tl-dep::before {
    content: 'Départ des tournois';
    display: flex; align-items: center;
    padding: 11px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .95);
    border: 1px solid rgba(25, 11, 41, .12);
    font-weight: 700; font-size: 12.5px; letter-spacing: .1em;
    text-transform: uppercase; color: #190B29;
  }
  .dep-slot { flex-direction: row; flex-wrap: wrap; align-self: auto; }
  .dep-m { flex: 1 1 auto; }
  .d-sam .tl-col, .d-dim .tl-col {
    display: flex; flex-direction: column; gap: 10px;
    grid-template-rows: none; background: none;
  }
  .tl-col::before {
    content: attr(data-scene);
    position: sticky; top: 48px; z-index: 5;
    display: flex; align-items: center;
    padding: 11px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .95);
    border: 1px solid rgba(25, 11, 41, .12);
    font-weight: 700; font-size: 12.5px; letter-spacing: .1em;
    text-transform: uppercase; color: #190B29;
  }
  .tl-ev { grid-row: auto !important; margin-bottom: 0; padding: 14px 16px; }
  .tl-ev.is-short { flex-direction: column; align-items: flex-start; gap: 3px; }
  .wk { padding: 22px; }
  .wk-t { font-size: 21px; }
}

/* ---- impression ---- */
@media print {
  header, footer, .hv-sticky, .day-tabs, .tl-print-hide { display: none !important; }
  [hidden] { display: block !important; }
  body { background: #fff !important; color: #000 !important; }
  .prog-page, .prog-hero, .prog-dark { background: #fff !important; color: #000 !important; }
  .prog-hero *, .prog-dark *, .prog-page * { color: #000 !important; }
  .tl-head { position: static; background: none !important; border-bottom: 1px solid #999; }
  .tl-ev, .wk, .dep-m { background: none !important; border: 1px solid #bbb; box-shadow: none !important; }
  .tl-col { background: none !important; }
  .day-panel { break-inside: avoid; page-break-after: always; }
}

/* ============================================================
   PAGES LÉGALES (mentions-legales.html)
   Colonne de lecture étroite, hiérarchie nette, et un style
   `.todo` volontairement criard pour qu'aucun champ à compléter
   ne parte en production par inadvertance.
   ============================================================ */

.legal { max-width: 820px; margin: 0 auto; padding: 56px 32px 90px; }

.legal h2 {
  font-family: 'FatFrank', 'Geist', sans-serif;
  text-transform: uppercase;
  letter-spacing: .005em;
  font-size: 27px;
  line-height: 1.05;
  color: #190B29;
  margin: 52px 0 16px;
  padding-top: 26px;
  border-top: 1px solid rgba(25, 11, 41, .1);
}
.legal > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.legal h3 {
  font-weight: 700;
  font-size: 16.5px;
  color: #190B29;
  margin: 26px 0 8px;
}

.legal p, .legal li {
  font-size: 15.5px;
  line-height: 1.7;
  color: #3d3548;
  text-wrap: pretty;
}
.legal p { margin: 0 0 14px; }

.legal ul { margin: 0 0 14px; padding-left: 22px; }
.legal li { margin-bottom: 7px; }
.legal li::marker { color: #AC25E5; }

.legal a { color: #1668D6; text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: #AC25E5; }

/* bloc d'identification : paires libellé / valeur */
.legal dl {
  margin: 0 0 18px;
  padding: 22px 24px;
  background: #F7F8FC;
  border: 1px solid rgba(25, 11, 41, .09);
  border-radius: 16px;
}
.legal dl div {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 4px 18px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(25, 11, 41, .07);
}
.legal dl div:last-child { border-bottom: 0; padding-bottom: 0; }
.legal dl div:first-child { padding-top: 0; }
.legal dt { font-weight: 700; font-size: 14.5px; color: #190B29; }
.legal dd { margin: 0; font-size: 15px; color: #3d3548; line-height: 1.55; }

/* encadré d'information */
.legal .note {
  margin: 0 0 18px;
  padding: 18px 22px;
  background: #EEF2FA;
  border: 1px solid rgba(47, 141, 255, .28);
  border-radius: 14px;
}
.legal .note p:last-child { margin-bottom: 0; }

/* champ à compléter — impossible à rater */
.todo {
  display: inline;
  background: #FFF1CE;
  border: 1px dashed #B8891F;
  border-radius: 5px;
  padding: 1px 7px;
  color: #6E4E05;
  font-weight: 700;
  font-size: .94em;
}

@media (max-width: 700px) {
  .legal { padding: 40px 20px 70px; }
  .legal h2 { font-size: 23px; }
  .legal dl { padding: 16px 16px; }
  .legal dl div { grid-template-columns: 1fr; gap: 2px; }
}

@media print {
  .legal a { color: #000 !important; }
  .todo { background: none !important; border: 1px solid #000; }
}

/* ============================================================
   PAGE TOURNOI (tournoi-ssbu.html — gabarit réutilisé pour les
   futures pages de tournoi)
   ============================================================ */

/* bannière jeu, en tête de hero */
.tny-banner {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 21 / 8;
  background: linear-gradient(135deg, #2B1B5E, #0C1440);
  border: 1px solid rgba(255, 255, 255, .1);
}
.tny-banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tny-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 7, 32, 0) 40%, rgba(10, 7, 32, .88));
}
@media (max-width: 760px) {
  .tny-banner { aspect-ratio: 4 / 3; }
}

/* accordéon règlement — <details>/<summary> natif, pas de JS requis */
.acc { display: flex; flex-direction: column; gap: 12px; }
.acc-item {
  background: #fff;
  border: 1px solid rgba(25, 11, 41, .1);
  border-radius: 16px;
  overflow: hidden;
}
.acc-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  font-weight: 700;
  font-size: 17px;
  color: #190B29;
}
.acc-item summary::-webkit-details-marker { display: none; }
.acc-item summary:focus-visible {
  outline: 3px solid #00E0C6;
  outline-offset: -3px;
  border-radius: 12px;
}
.acc-ic {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #F2F0EC;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: #190B29;
  transition: transform .25s ease, background .25s ease, color .25s ease;
}
.acc-item[open] .acc-ic {
  transform: rotate(45deg);
  background: linear-gradient(135deg, #2F8DFF, #AC25E5);
  color: #fff;
}
.acc-item[open] summary { border-bottom: 1px solid rgba(25, 11, 41, .08); }
.acc-body { padding: 4px 24px 26px; font-size: 15.5px; line-height: 1.6; color: #4a4157; }
.acc-body p + p, .acc-body p + ul, .acc-body ul + p, .acc-body p + table, .acc-body table + p { margin-top: 12px; }
.acc-body ul { padding-left: 20px; }
.acc-body li { margin-bottom: 6px; }
.acc-body table { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 14.5px; }
.acc-body th, .acc-body td { text-align: left; padding: 9px 12px; border-bottom: 1px solid rgba(25, 11, 41, .08); }
.acc-body th { color: #190B29; font-weight: 700; background: #F7F5F1; }
.acc-body tr:last-child td { border-bottom: none; }

/* ============================================================
   NAV DROPDOWN — menu "Tournois" (header, toutes les pages)
   Ouverture au survol (desktop) ou au clic sur le chevron
   (.is-open, géré par initNavDropdown() dans main.js — utile au
   tactile/clavier, la souris passe par :hover/:focus-within).
   ============================================================ */
.nav-drop { position: relative; display: flex; align-items: center; gap: 2px; }
.nav-drop-toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255, 255, 255, .5);
  font-size: 10px;
  padding: 6px;
  line-height: 1;
  transition: transform .2s ease, color .2s ease;
}
.nav-drop-toggle:hover { color: #fff; }
.nav-drop.is-open .nav-drop-toggle,
.nav-drop:hover .nav-drop-toggle,
.nav-drop:focus-within .nav-drop-toggle { color: #fff; transform: rotate(180deg); }

.nav-drop-panel {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  margin-top: 16px;
  background: #160C2E;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  padding: 18px;
  display: flex;
  gap: 30px;
  box-shadow: 0 24px 50px rgba(0, 0, 0, .45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 70;
  white-space: nowrap;
}
/* pont invisible au-dessus du panneau : comble le gap créé par margin-top
   ci-dessus, pour que le survol reste continu du bouton jusqu'au panneau —
   sans lui, le survol se perd dans l'espace vide et le menu se referme
   avant que le clic sur un lien n'ait pu atteindre son but */
.nav-drop-panel::before {
  content: '';
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 16px;
}
.nav-drop.is-open .nav-drop-panel,
.nav-drop:hover .nav-drop-panel,
.nav-drop:focus-within .nav-drop-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-drop-col { display: flex; flex-direction: column; gap: 2px; min-width: 200px; }
.nav-drop-h {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .4);
  margin-bottom: 8px;
  padding: 0 10px;
}
.nav-drop-col a {
  display: block;
  padding: 9px 10px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, .85);
  transition: background .15s ease, color .15s ease;
}
.nav-drop-col a:hover { background: rgba(255, 255, 255, .08); color: #fff; }

@media (max-width: 760px) {
  .nav-drop-toggle { display: none !important; }
}