/* ═══════════════════════════════════════════════════════════
   Composants propres à APEX CLUB — planning, galerie, services
   Ajouts au socle tc-site : mêmes tokens (filets 1px, radius
   8-10px, zéro ombre au repos, transitions 250ms).
   ═══════════════════════════════════════════════════════════ */

/* ── Bandeau défilant d'accroches (repris de leur site) ────── */
.marquee {
  overflow: hidden; border-block: 1px solid var(--line);
  background: var(--surface); padding: .85rem 0; margin-top: 3rem;
}
.marquee-track {
  display: flex; gap: 2.5rem; width: max-content;
  animation: marquee 38s linear infinite;
}
.marquee span {
  font-size: 12.5px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-soft);
  display: flex; align-items: center; gap: 2.5rem; white-space: nowrap;
}
.marquee span::after { content: "◆"; color: var(--accent); font-size: 8px; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ── Services : liste numérotée à filets, pas de cartes ────── */
.svc { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 3.5rem; }
.svc li {
  display: grid; grid-template-columns: auto 1fr; gap: 1.3rem;
  padding: 1.5rem 0; border-top: 1px solid var(--line); align-items: start;
}
.svc li:nth-child(1), .svc li:nth-child(2) { border-top: 0; padding-top: 0; }
.svc .n {
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  color: var(--accent); letter-spacing: .04em; padding-top: 4px;
  font-variant-numeric: tabular-nums;
}
.svc h3 { font-size: 17px; font-weight: 600; margin: 0 0 .35rem; display: flex; align-items: center; gap: .6rem; }
.svc p { font-size: 14.5px; line-height: 1.5; color: var(--muted); margin: 0; }
.svc .soon {
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sand); border: 1px solid var(--sand); border-radius: 999px; padding: .12rem .5rem;
}

/* ── Planning ─────────────────────────────────────────────── */
.planning-wrap { overflow-x: auto; margin-top: 2rem; }
.planning {
  width: 100%; border-collapse: collapse; font-size: 13px; min-width: 660px;
}
.planning th {
  text-align: left; padding: .7rem .6rem; font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  border-bottom: 1.5px solid var(--ink); white-space: nowrap;
}
.planning th:first-child { width: 62px; }
.planning td { padding: .5rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.planning td.h { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.planning .c { display: block; font-weight: 600; color: var(--ink); line-height: 1.25; }
.planning .d { display: block; font-size: 11.5px; color: var(--muted); }
/* intensité : filet de gauche, pas de pastille colorée */
.planning td.lv { border-left: 2px solid transparent; padding-left: .5rem; }
.planning td.i1 { border-left-color: #b9c6c0; }
.planning td.i2 { border-left-color: var(--sand); }
.planning td.i3 { border-left-color: var(--accent); }
.legend { display: flex; gap: 1.4rem; margin-top: 1rem; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; }
.legend span { display: flex; align-items: center; gap: .45rem; }
.legend i { width: 14px; height: 2px; border-radius: 2px; display: inline-block; }

/* ── Galerie ──────────────────────────────────────────────── */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 2rem; }
.gallery figure { position: relative; margin: 0; border-radius: 8px; overflow: hidden; aspect-ratio: 4/3; }
.gallery figure.wide { grid-column: span 2; aspect-ratio: 8/3; }
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.4,0,.2,1); }
.gallery figure:hover img { transform: scale(1.04); }
.gallery figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.4rem .8rem .6rem; color: #fff; font-size: 12.5px; font-weight: 600;
  background: linear-gradient(to top, rgba(17,17,20,.8), transparent);
}

/* ── Ce qu'il faut apporter ───────────────────────────────── */
.bring { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }
.bring li {
  list-style: none; font-size: 13.5px; font-weight: 500;
  border: 1px solid var(--line-cool); border-radius: 999px; padding: .4rem .9rem;
}

/* ── Coordonnées ──────────────────────────────────────────── */
.info-split { display: grid; grid-template-columns: .85fr 1fr; gap: 3.5rem; align-items: start; margin-top: 2rem; }
.info-list { margin: 0; display: grid; gap: 1.3rem; }
.info-list dt {
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent-dark); margin-bottom: .3rem;
}
.info-list dd { margin: 0; font-size: 15.5px; line-height: 1.55; }
.info-list dd a { color: inherit; border-bottom: 1px solid var(--line-cool); }
.info-list dd a:hover { border-bottom-color: var(--accent); color: var(--accent-dark); }
.hours-grid { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1.2rem; font-size: 14.5px; }
.hours-grid dt { font-size: 14.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); margin: 0; }
.hours-grid dd { color: var(--muted); font-size: 14.5px; }

@media (max-width: 960px) {
  .svc, .info-split { grid-template-columns: 1fr; column-gap: 0; }
  .svc li:nth-child(2) { border-top: 1px solid var(--line); padding-top: 1.5rem; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .gallery figure.wide { grid-column: span 2; }
}
@media (max-width: 640px) {
  .gallery { grid-template-columns: 1fr; }
  .gallery figure.wide { aspect-ratio: 4/3; }
}

/* ── Correctifs de specificite sur le socle ───────────────── */
/* .card p (0,1,1) l'emporte sur .price (0,1,0) : le prix tombait a 14 px
   alors que le template le prevoit a 2rem. On repasse au-dessus. */
.pricing .price { font-size: 2rem; line-height: 1.1; margin-bottom: .1rem; }
.pricing .price span {
  font-size: .8rem; font-weight: 500; color: var(--muted);
  font-family: var(--font-body); margin-left: .25rem;
}
/* « 900 m² » et « 35 cours » sont des comptes exacts, pas des minimums :
   le « + » decoratif du template n'a pas lieu d'etre. */
.hero-stats li:nth-child(1) strong::after,
.hero-stats li:nth-child(2) strong::after { content: none; }