/*
═══════════════════════════════════════════════════════════════
🧗 FICHIER : pages/topo-liaucous.css
🎯 RÔLE : Topo ANIMÉ de la via ferrata de Liaucous — photo propre
          plein cadre + overlay SVG (tracés qui se dessinent au scroll,
          labels, flèches, danger) + boutons de FILTRE par niveau.
🔗 USAGE : <link> sur la page Liaucous (FR + EN) uniquement.
          → toutes les règles ici ne touchent QUE Liaucous.
          JS associé : /assets/js/topo-liaucous.js
⚠️ Coordonnées SVG en viewBox 0 0 1600 1200 (= taille photo).
═══════════════════════════════════════════════════════════════
*/

/* ── Layout Liaucous : grande photo à gauche, encarts des parcours à droite ── */
/* Section un peu plus large pour que la photo reste généreuse à côté des cartes */
.activity-routes__inner { max-width: 1300px; }

/* Desktop : photo (large) à gauche, cartes empilées à droite */
@media (min-width: 900px) {
  .activity-routes__split {
    grid-template-columns: minmax(0, 1.7fr) minmax(290px, 1fr);
    align-items: start;
  }
}
/* < 900px : la grille de base repasse en 1 colonne (photo puis cartes dessous) */

/* Neutralise l'ancienne "frame cover" pour le topo animé (pas de recadrage) */
.activity-routes__topo.topo-anim {
  height: auto;
  min-height: 0;
  margin: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  transition: none;
}
.activity-routes__topo.topo-anim:hover { transform: none; box-shadow: none; }

/* ── Encarts parcours : version plus premium, DA Escal'Adventure (scopé Liaucous) ── */
.activity-routes__cards .route-card {
  overflow: hidden;
  padding: var(--space-6);
  background: linear-gradient(180deg, color-mix(in srgb, var(--route-color) 7%, #fff) 0%, #fff 46%);
  border: 1px solid color-mix(in srgb, var(--route-color) 22%, var(--sand-light));
  border-radius: 20px;
  box-shadow:
    0 1px 2px rgba(26, 31, 28, 0.05),
    0 18px 40px -22px color-mix(in srgb, var(--route-color) 42%, transparent);
}

/* Gros chiffre filigrane (motif DA : Bebas Neue en fond) */
.activity-routes__cards .route-card::before {
  position: absolute;
  bottom: -30px;
  right: 10px;
  font-family: 'Bebas Neue', var(--font-display), sans-serif;
  font-size: 122px;
  line-height: 1;
  color: color-mix(in srgb, var(--route-color) 13%, transparent);
  pointer-events: none;
  z-index: 0;
}
.activity-routes__cards .route-card--blue::before { content: "01"; }
.activity-routes__cards .route-card--red::before  { content: "02"; }

/* Contenu au-dessus du filigrane */
.activity-routes__cards .route-card > * { position: relative; z-index: 1; }

/* En-tête souligné d'un filet couleur du parcours */
.activity-routes__cards .route-card__head {
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid color-mix(in srgb, var(--route-color) 20%, var(--sand-light));
}
.activity-routes__cards .route-card__name {
  font-size: var(--text-xl);
  letter-spacing: 0.07em;
}
/* Tag niveau : pastille pleine couleur du parcours pour plus de punch */
.activity-routes__cards .route-card__tag {
  color: #fff;
  background: var(--route-color);
  border-color: transparent;
}

.topo-anim { margin: 0; }

.topo-anim__stage {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  background: var(--anthracite-dark);
}

.topo-anim__stage .topo-anim__photo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: initial;
}

.topo-anim__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ── Tracés (épais) ── */
.topo-route, .topo-piece {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Pièces du parcours (raccordées bout à bout, animées en 1 ligne continue) */
.topo-piece        { stroke-width: 14; }
.topo-piece--blue  { stroke: #2563eb; }   /* parties communes (restent bleues) */
.topo-piece--red   { stroke: #dc2626; }   /* variations difficiles */
.topo-piece--black { stroke: #1f2937; }   /* variations variante */
.topo-route--tyro  { stroke: #111111; stroke-width: 8; }

/* Groupes de niveau : un seul visible à la fois */
.topo-level[hidden] { display: none; }

/* ── Flèches ── */
.topo-arrow {
  stroke: #111111;
  stroke-width: 6;
  stroke-linecap: round;
}

/* ── Panneau danger ── */
.topo-danger__tri {
  fill: #ffffff;
  stroke: #dc2626;
  stroke-width: 8;
  stroke-linejoin: round;
}
.topo-danger__x {
  fill: #dc2626;
  font: 800 46px sans-serif;
}

/* ── Icônes d'obstacles (PNG transparents, apparition gérée en JS) ── */
.topo-iconimg { filter: drop-shadow(0 3px 5px rgba(26, 31, 28, 0.30)); }

/* ── Labels : chips crème + Bebas Neue (design) ── */
.topo-tlabel {
  font-family: 'Bebas Neue', var(--font-display), sans-serif;
  font-size: 34px;
  letter-spacing: 1px;
  fill: var(--anthracite);
}
/* pastille posée derrière chaque texte (générée en JS d'après la bbox) */
.topo-chip {
  fill: rgba(250, 248, 243, 0.86);
  stroke: rgba(26, 31, 28, 0.08);
  stroke-width: 1;
  filter: drop-shadow(0 1px 2px rgba(26, 31, 28, 0.15));
}
/* chaque label apparaît individuellement (opacité gérée en JS) */

/* Mode « Tout voir » : masque les bases bleues rognées (le bleu du Facile suffit) */
[data-topo-mode="tout"] .topo-level[data-level="difficile"] .topo-piece--blue,
[data-topo-mode="tout"] .topo-level[data-level="variante"] .topo-piece--blue { display: none; }

/* ── Boutons de filtre par niveau ── */
.topo-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.topo-filter {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  padding: 9px 18px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--sand);
  background: var(--white);
  color: var(--rock);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
.topo-filter:hover { border-color: var(--orange-light); }
.topo-filter.is-active {
  background: var(--anthracite);
  border-color: var(--anthracite);
  color: var(--cream);
}
.topo-filter__dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 7px;
}

@media (prefers-reduced-motion: reduce) {
  .topo-filter { transition: none; }
}