/* ============================================================
   SPORTS — Composants dédiés (page racine + sous-pages)
   ------------------------------------------------------------
   Chargé sur /loisirs-tourisme/sports/ et ses sous-pages
   (Infrastructures, Clubs, CSL SillySports). S'appuie sur
   service.css (layout 2 colonnes, cards, notices) et hérite
   de la couleur cyan via .page-sports (--color-primary = #5AC1DA).

   Convention BEM. Mobile-first.
   ============================================================ */

/* ------------------------------------------------------------
   Citation signée (mot de l'échevin)
   ------------------------------------------------------------ */
.service-quote {
  position: relative;
  margin: 24px 0 0;
  padding: 20px 24px 20px 28px;
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-primary);
}

.service-quote__text {
  font-family: var(--font-heading);
  font-weight: 400;
  font-style: italic;
  font-size: 18px;
  line-height: 26px;
  color: var(--color-text);
  margin: 0 0 10px;
}

.service-quote__author {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.service-quote__author strong {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.3px;
  color: var(--color-text);
}

.service-quote__author span {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 18px;
  color: var(--color-text-secondary);
}

/* ------------------------------------------------------------
   HUB : cartes d'accès aux sous-pages (page racine)
   ------------------------------------------------------------ */
.sports-hub__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.sports-hub__card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.sports-hub__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-deep);
  border-color: transparent;
}

.sports-hub__card:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.sports-hub__card-bar {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 4px;
  background: var(--color-primary);
}

.sports-hub__card-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.sports-hub__card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.sports-hub__card-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.4px;
  color: var(--color-text);
}

.sports-hub__card-desc {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-secondary);
}

.sports-hub__card-arrow {
  flex-shrink: 0;
  color: var(--color-primary);
  transition: transform var(--transition-base);
}

.sports-hub__card:hover .sports-hub__card-arrow {
  transform: translateX(4px);
}

/* ------------------------------------------------------------
   Répertoire sportif (couverture + texte)
   ------------------------------------------------------------ */
.sports-repertoire {
  display: flex;
  gap: 28px;
  align-items: center;
  padding: 24px;
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg);
}

.sports-repertoire__cover {
  flex-shrink: 0;
  width: 160px;
  line-height: 0;
}

.sports-repertoire__cover img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-natural);
}

.sports-repertoire__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sports-repertoire__body p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text-secondary);
  margin: 0;
}

/* Le body est un flex column (align-items: stretch par défaut) : on empêche le
   bouton de s'étirer à 100 % de la largeur, il garde la largeur de son contenu. */
.sports-repertoire__btn {
  align-self: flex-start;
}

/* ------------------------------------------------------------
   Image label ADEPS (CSL) : affichée complète, jamais recadrée
   ------------------------------------------------------------ */
.sports-label-figure {
  margin: 0;
  display: flex;
  justify-content: center;
  padding: 24px;
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg);
}

.sports-label-figure img {
  width: auto;
  max-width: 100%;
  max-height: 460px;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

/* ------------------------------------------------------------
   Infrastructures : cartes média + équipements
   ------------------------------------------------------------ */
.sports-infra__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.sports-infra-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.sports-infra-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-deep);
}

.sports-infra-card__media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--color-bg-alt);
}

.sports-infra-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.sports-infra-card:hover .sports-infra-card__media img {
  transform: scale(1.04);
}

.sports-infra-card__village {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-block;
  padding: 4px 12px;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: var(--radius-full);
}

.sports-infra-card__body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sports-infra-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.5px;
  color: var(--color-text);
}

.sports-infra-card__address {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 19px;
  color: var(--color-text-secondary);
  margin: 0;
}

.sports-infra-card__address svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-primary);
}

.sports-infra-card__equip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sports-infra-card__equip-item {
  display: inline-block;
  padding: 5px 12px;
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  color: var(--color-primary-dark, var(--color-primary));
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.3;
  border-radius: var(--radius-full);
}

.sports-infra-card__note {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 21px;
  color: var(--color-text-secondary);
  margin: 0;
  padding-top: 4px;
  border-top: 1px solid var(--color-border);
}

/* Lien de réservation externe sur une carte infrastructure (outil communal
   d'occupation des salles de sport). Affiché sous les équipements. */
.sports-infra-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  color: var(--color-primary-ink);
  text-decoration: none;
  margin-top: 4px;
}

.sports-infra-card__link:hover,
.sports-infra-card__link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sports-infra-card__link svg {
  flex-shrink: 0;
}

/* Le bouton de réservation dans la carte sidebar « Réservations » a besoin
   d'un peu d'air sous la liste de coordonnées, et son libellé est long. */
.service-sidebar__card-body > .btn--full {
  margin-top: 16px;
  text-align: center;
  line-height: 1.35;
}

/* ------------------------------------------------------------
   Clubs : groupes par discipline + cartes club
   ------------------------------------------------------------ */
.sports-clubs__group {
  margin-top: 32px;
}

.sports-clubs__group:first-of-type {
  margin-top: 8px;
}

.sports-clubs__group-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.4px;
  color: var(--color-text);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--color-border);
}

.sports-clubs__group-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
}

.sports-clubs__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sports-club-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-primary);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.sports-club-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-natural);
}

.sports-club-card__name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.3px;
  color: var(--color-text);
}

.sports-club-card__sub {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 18px;
  color: var(--color-text-secondary);
  margin: 0;
}

.sports-club-card__contacts {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sports-club-card__contacts li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 18px;
}

.sports-club-card__contacts li svg {
  flex-shrink: 0;
  color: var(--color-primary);
}

.sports-club-card__contacts a {
  color: var(--color-text-secondary);
  text-decoration: none;
  word-break: break-word;
  transition: color var(--transition-base);
}

.sports-club-card__contacts a:hover,
.sports-club-card__contacts a:focus-visible {
  color: var(--color-primary-ink-dark);
  text-decoration: underline;
}

/* ------------------------------------------------------------
   Partenaires (logos)
   ------------------------------------------------------------ */
.sports-partners {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sports-partners__item {
  display: flex;
}

.sports-partners__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 96px;
  padding: 18px 20px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

a.sports-partners__logo:hover,
a.sports-partners__logo:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-natural);
}

.sports-partners__logo img {
  max-width: 100%;
  max-height: 60px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.sports-partners__logo--text {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  text-align: center;
  color: var(--color-text);
}

a.sports-partners__logo--text:hover {
  color: var(--color-primary-dark, var(--color-primary));
}

/* ------------------------------------------------------------
   Parcours de jogging : la grille de cartes (page de liste)
   ------------------------------------------------------------
   Même dessin que .sports-infra-card (bordure, radius, lévitation
   au survol, badge posé sur le média) : un parcours et une
   infrastructure sont deux fiches du même service, elles doivent
   se lire pareil. Trois colonnes ici plutôt que deux : une carte
   de parcours porte moins de texte (pas de liste d'équipements).
   Trois colonnes quand la colonne de contenu les loge (≥ 220 px par
   carte, soit un viewport d'environ 1 165 px avec la colonne de droite),
   deux en dessous : à trois colonnes fixes, entre 1 025 et 1 180 px de
   viewport la carte tombait à 174 px, titre au bord et méta sur trois
   lignes. Les paliers tablette et mobile (2, puis 1) restent explicites
   plus bas, alignés sur la grille des infrastructures. */
.parcours-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px;
}

.parcours-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.parcours-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-deep);
}

.parcours-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-bg-alt);
}

.parcours-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.parcours-card:hover .parcours-card__media img {
  transform: scale(1.04);
}

/* Sans photo, la vignette du tracé (SVG calculé depuis le GPX) tient lieu
   d'image. Le trait prend l'encre du service — la couleur d'aplat (cyan)
   n'est pas lisible sur le fond alterné — et le dessin garde ses
   proportions au centre du cadre. */
.parcours-card__trace {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 16px;
  background: var(--color-bg-alt);
  color: var(--color-primary-ink);
}

.parcours-card__trace svg {
  width: 100%;
  height: 100%;
}

/* Le badge de distance, dessin et aplat du badge de village des
   infrastructures : la couleur de la charte, même sous du texte blanc
   (décision de Loïc, 24 sept. 2026 : la charte prime sur le contraste). */
.parcours-card__distance {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-block;
  padding: 4px 12px;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: var(--radius-full);
}

.parcours-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 22px 22px;
}

.parcours-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.5px;
  color: var(--color-text);
  margin: 0;
}

.parcours-card__title a {
  color: inherit;
  text-decoration: none;
}

.parcours-card__title a:hover,
.parcours-card__title a:focus-visible {
  color: var(--color-primary-ink-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.parcours-card__meta {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-secondary);
  margin: 0;
}

.parcours-card__depart {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 19px;
  color: var(--color-text-secondary);
  margin: 0;
}

.parcours-card__depart svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-primary);
}

/* Le lien reste collé au bas de la carte : les cartes d'une même rangée
   ont la même hauteur, leurs liens s'alignent. */
.parcours-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 6px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  color: var(--color-primary-ink);
  text-decoration: none;
}

.parcours-card__link:hover,
.parcours-card__link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.parcours-card__link svg {
  flex-shrink: 0;
  transition: transform var(--transition-base);
}

.parcours-card:hover .parcours-card__link svg {
  transform: translateX(4px);
}

/* ------------------------------------------------------------
   Fiche parcours : les chiffres (distance, dénivelé, difficulté…)
   ------------------------------------------------------------
   Dessin de .single-circuit__meta (tourisme-pages.css), que le modèle
   Sports ne sert pas : reproduit ici plutôt que d'ajouter 34 Ko de
   feuille tourisme à la fiche. Les cases sont un peu plus larges
   (« Boucle : départ = arrivée » ne tient pas dans 140 px). Pas de
   marge basse : .service-content est un flex à gap, il l'apporte. */
.parcours-meta {
  list-style: none;
  margin: 0;
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 18px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.parcours-meta__item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.parcours-meta__item > svg {
  flex-shrink: 0;
  color: var(--color-primary);
}

.parcours-meta__text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  min-width: 0;
}

.parcours-meta__label {
  font-family: var(--font-body);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
}

.parcours-meta__value {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  color: var(--color-text);
}

/* Le profil altimétrique : un SVG à viewBox fixe (600 × 180), qui prend
   toute la largeur de la colonne et garde ses proportions. Le cadre reste
   scopé sur l'ÉLÉMENT figure : une première version imprimait le <svg> avec
   la même classe que la figure, et une règle `.parcours-profil` nue lui
   donnait une seconde bordure. Le SVG (`parcours-profil__svg`) est remis à
   nu par sécurité. */
figure.parcours-profil {
  margin: 0;
  padding: 20px 20px 16px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.parcours-profil svg,
.parcours-profil__svg {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.parcours-profil__legende {
  margin: 12px 0 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-secondary);
}

/* Le bouton de téléchargement a son enveloppe : posé nu dans la colonne
   (un flex en colonne, align-items: stretch), un .btn en inline-flex
   s'étirerait sur toute la largeur. */
.parcours-telecharger-bloc {
  margin: 0;
}

/* Le poids du fichier dans le bouton de téléchargement : présent, mais
   en retrait du libellé. */
.parcours-telecharger__poids {
  opacity: 0.8;
  font-weight: 400;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablette */
@media (max-width: 1024px) {
  .sports-clubs__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* La sidebar passe sous le contenu : le contenu reprend toute la largeur,
     on garde les infrastructures en 2 colonnes tant qu'il y a la place. */
  .sports-infra__list {
    grid-template-columns: repeat(2, 1fr);
  }

  .parcours-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 768px) {
  .parcours-grid {
    grid-template-columns: 1fr;
  }

  .parcours-card__title {
    font-size: 18px;
    line-height: 22px;
  }

  .parcours-meta {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
    padding: 16px;
  }

  figure.parcours-profil {
    padding: 14px 12px 12px;
  }

  /* « Télécharger la trace GPX (20 Ko) » ne tient pas sur une ligne à
     320 px : le bouton accepte le retour, .btn interdit sinon. */
  .parcours-telecharger {
    white-space: normal;
    text-align: left;
  }

  .sports-repertoire {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }

  .sports-repertoire__cover {
    width: 140px;
  }

  .sports-repertoire__body {
    align-items: center;
  }

  /* En colonne centrée, le bouton revient au centre (annule align-self: flex-start). */
  .sports-repertoire__btn {
    align-self: center;
  }

  .sports-infra__list {
    grid-template-columns: 1fr;
  }

  .sports-clubs__grid {
    grid-template-columns: 1fr;
  }

  .sports-hub__card {
    gap: 14px;
    padding: 18px 18px 18px 20px;
  }

  .sports-hub__card-icon {
    width: 48px;
    height: 48px;
  }

  .service-quote__text {
    font-size: 16px;
    line-height: 24px;
  }
}

/* Petit mobile */
@media (max-width: 420px) {
  .sports-hub__card-desc {
    display: none;
  }
}