/* Étape en cours du chemin de progression, celle dont la pastille clignote (classe .cpath-row--focus
 * posée par Step, javascripts/course-path/ui/app.js) : carte mise en avant, rangée plus haute. Chargé
 * après course-path.css par player.html.php : à force égale, ces règles passent devant le survol.
 *
 * Hauteur de rangée : un transform ne compte pas dans la mise en page, et le zoom déborde autant en
 * haut qu'en bas. Rangée = 104 px (.cpath-row) + ce que la carte gagne en hauteur, pour garder avec
 * les étapes voisines le même écart qu'entre les autres. */

/* Bulle de l'oiseau au-dessus de la carte : place réservée tant qu'elle est visible, hauteur calculée
 * par views/tip-place.js (--tip-room). */
.cpath-wrap:has(> .cpath-tip--room:not([hidden])) .cpath-row[data-tip-room] {
  margin-top: var(--tip-room);
}

/* Bureau : carte × 1,4, ancrée côté rond (transform-origin de .cpath-label--card). */
@media (min-width: 900px) {
  .cpath-row--focus {
    height: 135px; /* carte de 77 px × 1,4 : + 31 px */
  }
  .cpath-row--focus .cpath-step {
    gap: 25px;
  }
  .cpath-zone .cpath-row--focus .cpath-label--card {
    transform: scale(1.4);
  }
}

/* Fenêtre étroite : avec le décalage maximal du zigzag (+ 100 px, en style en ligne), la carte
 * zoomée sortirait de la page. L'étape reste sur l'axe, le tracé suit la position réelle du rond. */
@media (min-width: 900px) and (max-width: 1099px) {
  .cpath-row--focus .cpath-step {
    transform: none !important;
  }
}

/* Mobile : la carte va jusqu'au bord, un scale la ferait sortir de la page. Même effet par les vraies
 * tailles (× 1,3 ; à 1,4 les noms courants passeraient sur deux lignes). Pas de propriété zoom : sur
 * Safari, getBoundingClientRect d'un élément zoomé fausserait la position de l'oiseau.
 * La rangée suit la hauteur de la carte, nom sur deux lignes compris : 13,5 px en haut et en bas,
 * comme une rangée ordinaire (104 px pour une carte de 77 px). */
@media (max-width: 899px) {
  .cpath-row--focus {
    height: auto;
    padding-block: 13.5px;
  }
  .cpath-row--focus .cpath-step {
    position: relative;
    width: 100%;
  }
  .cpath-zone .cpath-row--focus .cpath-label--card {
    gap: 13px;
    padding-block: 10px;
    padding-inline: 10px 18px;
    border-radius: 20px;
  }
  .cpath-zone .cpath-row--focus .cpath-label__thumb {
    width: 84px;
    height: 60px;
  }
  .cpath-zone .cpath-row--focus .cpath-label__play {
    width: 30px;
    height: 30px;
  }
  .cpath-zone .cpath-row--focus .cpath-label__action {
    font-size: 11.5px;
  }
  .cpath-zone .cpath-row--focus .cpath-label__body {
    gap: 8px;
  }
  .cpath-zone .cpath-row--focus .cpath-label__name {
    font-size: 17px;
  }
  .cpath-zone .cpath-row--focus .cpath-label__bar {
    height: 7px;
  }
  .cpath-zone .cpath-row--focus .cpath-label__foot {
    min-height: 34px;
  }
  .cpath-zone .cpath-row--focus .cpath-badge {
    padding: 3px 9px;
    font-size: 14px;
  }
  .cpath-zone .cpath-row--focus .cpath-badge__ico {
    width: 17px;
    height: 17px;
  }
  .cpath-zone .cpath-row--focus .cpath-label__menu {
    width: 36px;
    height: 36px;
  }
  .cpath-zone .cpath-row--focus .cpath-label__menu-ico {
    width: 26px;
    height: 26px;
  }
}
@media (max-width: 360px) {
  .cpath-zone .cpath-row--focus .cpath-label__thumb {
    width: 72px;
    height: 52px;
  }
}