/* ===========================
        PAGE PARCOURS
=========================== */

.parcours-map {
    width: 100%;
}

.parcours-map iframe {
    display: block;
    width: 100%;
    height: 40.625rem;
    border: 0;
    border-radius: 0.75rem;
}

.parcours-map .parcours-credit {
    margin: 0.375rem 0 0;
    font-size: 0.7rem;
    line-height: 1.4;
    color: #777;
    text-align: right;
}

.parcours-map .parcours-credit a {
    color: #4C8C2B;
}

@media (max-width: 600px) {
    .parcours-map iframe {
        height: 35rem;
    }
}

/* ===========================
   LA COURSE EN VIDÉO : vidéo + carte 3D + altitude synchronisées
=========================== */

.parcours-live {
    width: 100%;
    max-width: 82.5rem;
    margin: 0 auto;
    padding: clamp(1.875rem, 5vw, 3.75rem) 1.25rem 0;
}

.parcours-live h3 {
    margin-bottom: 0.625rem;
    font-family: var(--police-titre);
    font-size: clamp(1.4rem, calc(3vw * var(--taille-texte)), 2rem);
    color: #1a4aa0;
}

.parcours-live > p {
    margin-bottom: 1.25rem;
    font-family: var(--police-texte);
    font-size: clamp(1rem, calc(1.5vw * var(--taille-texte)), 1.1rem);
    line-height: 1.6;
    color: #2b2b2b;
}

/* Vidéo et carte côte à côte, profil d'altitude dessous :
   les trois tiennent ensemble dans la hauteur de l'écran */
.pl-stage {
    display: grid;
    /* pleine largeur : la vidéo prend la hauteur qui reste à l'écran (une fois le titre, le texte
       et le profil comptés), la carte occupe tout le reste de la largeur */
    --rangee: max(12.5rem, calc(100vh - 28.75rem));
    --rangee: max(12.5rem, calc(100svh - 28.75rem));
    grid-template-columns: minmax(0, max(50%, calc(var(--rangee) * 16 / 9))) 1fr;
    grid-template-areas:
        "video carte"
        "profil profil";
    gap: 0.875rem;
    margin: 0 auto;
}

/* Page Parcours (écran large) : bloc vidéo remonté sous le bandeau de titre */
@media (min-width: 821px) {
    .parcours-live:has(.pl-stage) {
        padding-top: 1.375rem;
    }
}

/* vidéo YouTube au format 16:9, sans déformation */
.pl-video {
    grid-area: video;
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 0.875rem;
    background: #111;
    box-shadow: 0 0.5rem 1.375rem rgba(0, 0, 0, 0.18);
}

.pl-video iframe,
.pl-video #pl-player {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Le lecteur YouTube est plus haut que le cadre visible : la vidéo garde sa taille
   exacte (calée sur la largeur), et le titre / logo YouTube, affichés dans les bandes
   du haut et du bas du lecteur, tombent dans la partie cachée. */
.pl-video iframe,
.pl-video iframe#pl-player {
    top: -5rem;
    bottom: auto;
    height: calc(100% + 10rem);
}

/* en attendant la vidéo */
.pl-player--attente {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    text-align: center;
    color: white;
    background: linear-gradient(135deg, #1a4aa0, #06276b);
}

.pl-player--attente p {
    font-family: var(--police-texte);
    font-size: clamp(1rem, calc(1.6vw * var(--taille-texte)), 1.2rem);
    line-height: 1.6;
}

.pl-scrub {
    width: 100%;
    margin-top: 0.875rem;
    accent-color: #ff7800;
}

/* carte 3D : même hauteur que la vidéo */
.pl-map-wrap {
    grid-area: carte;
    position: relative;
    min-height: 0;
}

.pl-map {
    width: 100%;
    height: 100%;
    min-height: 13.75rem;
    overflow: hidden;
    border-radius: 0.875rem;
    background: #dfe6d8;
    box-shadow: 0 0.5rem 1.375rem rgba(0, 0, 0, 0.18);
}

.pl-map--indispo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    font-family: var(--police-texte);
    color: #555;
    text-align: center;
}

.pl-map-boutons {
    position: absolute;
    left: 0.75rem;
    top: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pl-btn {
    padding: 0.4375rem 0.875rem;
    border: 0;
    border-radius: 62.4375rem;
    font-family: var(--police-texte);
    font-size: 0.9rem;
    font-weight: bold;
    color: #1a4aa0;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 0.1875rem 0.625rem rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

.pl-btn[aria-pressed="true"] {
    color: white;
    background: #ff7800;
}

.pl-marqueur {
    width: 1.125rem;
    height: 1.125rem;
    border: 0.1875rem solid white;
    border-radius: 50%;
    background: #ff7800;
    box-shadow: 0 0 0 0.1875rem rgba(255, 120, 0, 0.35), 0 0.125rem 0.375rem rgba(0, 0, 0, 0.5);
}

/* graphique d'altitude */
.pl-chart {
    grid-area: profil;
    position: relative;
    padding: 0.75rem 0.625rem 0.25rem;
    border-radius: 0.875rem;
    background: rgb(251, 245, 234);
    box-shadow: 0 0.5rem 1.375rem rgba(0, 0, 0, 0.12);
}

.pl-chart svg {
    display: block;
    max-width: 100%;
    height: auto;
    cursor: pointer;
    touch-action: none;
}

.pl-grid {
    stroke: rgba(26, 74, 160, 0.12);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.pl-axe {
    font-family: var(--police-texte);
    font-size: 0.8125rem;
    fill: #777;
}

.pl-profil {
    fill: none;
    stroke: #ff7800;
    stroke-width: 2.5;
    vector-effect: non-scaling-stroke;
}

.pl-curseur {
    stroke: #1a4aa0;
    stroke-width: 1.5;
    stroke-dasharray: 4 4;
    vector-effect: non-scaling-stroke;
}

.pl-point {
    fill: #1a4aa0;
    stroke: white;
    stroke-width: 3;
    vector-effect: non-scaling-stroke;
}

.pl-etiquette {
    position: absolute;
    top: 0.375rem;
    transform: translateX(-50%);
    padding: 0.1875rem 0.625rem;
    border-radius: 62.4375rem;
    font-family: var(--police-titre);
    font-size: 0.95rem;
    color: white;
    background: #1a4aa0;
    pointer-events: none;
    white-space: nowrap;
}

/* Tablette et téléphone : les trois l'un sous l'autre, carte et profil compacts */
@media (max-width: 820px) {
    .pl-stage {
        grid-template-columns: 1fr;
        grid-template-areas: "video" "carte" "profil";
        gap: 0.625rem;
        max-width: 100%;
    }

    .pl-map {
        height: clamp(12.5rem, 34vh, 18.75rem);
        min-height: 0;
    }

    .pl-map-boutons {
        left: 0.5rem;
        top: 0.5rem;
    }

    .pl-btn {
        padding: 0.375rem 0.6875rem;
        font-size: 0.8rem;
    }
}

/* Tracé OpenRunner : sur toute la largeur de la page, et assez haut pour que
   carte et profil tiennent en une fois dans l'écran (sous le titre) */
.parcours-openrunner {
    max-width: none;
    padding: clamp(0.75rem, 2vw, 1.25rem) clamp(0.75rem, 2vw, 1.5rem) 0;
}

.parcours-openrunner .parcours-map iframe {
    /* hauteur de l'écran − header − titre − marges */
    height: calc(100vh - var(--header-h) - 6.5rem);
    height: calc(100svh - var(--header-h) - 6.5rem);
    min-height: 20rem;
    box-shadow: 0 0.5rem 1.375rem rgba(0, 0, 0, 0.18);
}

/* Barre de temps de la vidéo, en bas de l'image (la barre YouTube est masquée) */
.pl-temps {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.125rem 0.875rem 0.625rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
    cursor: pointer;
    touch-action: none;
    --avance: 0%;
}

.pl-temps[hidden] {
    display: none;
}

.pl-temps-piste {
    position: relative;
    flex: 1;
    height: 0.3125rem;
    border-radius: 62.4375rem;
    background: rgba(255, 255, 255, 0.35);
    transition: height 0.2s ease;
}

.pl-temps-rempli {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--avance);
    border-radius: inherit;
    background: linear-gradient(90deg, #ff7800, #ffb700);
}

/* pastille au bout de la partie lue */
.pl-temps-rempli::after {
    content: "";
    position: absolute;
    right: -0.4375rem;
    top: 50%;
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 50%;
    background: white;
    box-shadow: 0 0.0625rem 0.25rem rgba(0, 0, 0, 0.4);
    transform: translateY(-50%) scale(0.7);
    transition: transform 0.2s ease;
}

.pl-temps:hover .pl-temps-piste,
.pl-temps:focus-visible .pl-temps-piste {
    height: 0.4375rem;
}

.pl-temps:hover .pl-temps-rempli::after,
.pl-temps:focus-visible .pl-temps-rempli::after {
    transform: translateY(-50%) scale(1);
}

.pl-temps-texte {
    flex: none;
    font-family: var(--police-texte);
    font-size: 0.85rem;
    color: white;
    text-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.6);
    font-variant-numeric: tabular-nums;
}

.pl-temps:focus-visible {
    outline: 0.125rem solid #ffb700;
    outline-offset: -0.125rem;
}

/* Volume et plein écran : boutons ronds à droite de la barre de temps */
.pl-volume {
    flex: none;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.pl-icone-btn {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.875rem;
    height: 1.875rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: white;
    background: transparent;
    cursor: pointer;
}

.pl-icone-btn svg {
    width: 1.375rem;
    height: 1.375rem;
    fill: currentColor;
    filter: drop-shadow(0 0.0625rem 0.125rem rgba(0, 0, 0, 0.6));
}

.pl-icone-btn:hover,
.pl-icone-btn:focus-visible {
    background: rgba(255, 255, 255, 0.2);
}

.pl-son-croix { display: none; }
.pl-son--muet .pl-son-croix { display: inline; }
.pl-son--muet .pl-son-ondes { display: none; }

.pl-son-niveau {
    width: 4.375rem;
    height: 0.25rem;
    margin: 0;
    border-radius: 62.4375rem;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    --niveau: 100%;
    background: linear-gradient(to right, #ffb700 var(--niveau), rgba(255, 255, 255, 0.35) var(--niveau));
}

.pl-son-niveau::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: white;
    box-shadow: 0 0.0625rem 0.25rem rgba(0, 0, 0, 0.4);
}

.pl-son-niveau::-moz-range-thumb {
    width: 0.75rem;
    height: 0.75rem;
    border: 0;
    border-radius: 50%;
    background: white;
    box-shadow: 0 0.0625rem 0.25rem rgba(0, 0, 0, 0.4);
}

.pl-plein[hidden] { display: none; }

/* Téléphone : barre plus serrée, curseur de volume plus court */
@media (max-width: 600px) {
    .pl-son-niveau { width: 3rem; }
    .pl-temps { gap: 0.5rem; padding-inline: 0.625rem; }
}

/* iPhone : Safari ne laisse pas une page régler le volume (seulement couper le son),
   le curseur serait sans effet : on garde le bouton muet */
@supports (-webkit-touch-callout: none) {
    .pl-son-niveau { display: none; }
}

/* Plein écran simulé (iPhone) : le cadre recouvre tout l'écran */
.pl-video--plein {
    position: fixed;
    inset: 0;
    z-index: 4000;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    aspect-ratio: auto;
    border-radius: 0;
    box-shadow: none;
}

.pl-plein-ouvert { overflow: hidden; }

/* Vidéo en plein écran : le cadre remplit l'écran, la vidéo reste centrée */
.pl-video:fullscreen {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
}

.pl-video:-webkit-full-screen {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
}

/* Vitesse de lecture : petit bouton à droite de la barre de temps, menu au-dessus */
.pl-vitesse {
    position: relative;
    flex: none;
}

.pl-vitesse-btn {
    min-width: 2.75rem;
    padding: 0.1875rem 0.5625rem;
    border: 0.0625rem solid rgba(255, 255, 255, 0.6);
    border-radius: 62.4375rem;
    font-family: var(--police-texte);
    font-size: 0.82rem;
    font-weight: bold;
    color: white;
    background: rgba(0, 0, 0, 0.35);
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}

.pl-vitesse-btn:hover,
.pl-vitesse-btn[aria-expanded="true"] {
    border-color: #ff7800;
    background: #ff7800;
}

.pl-vitesse-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 0.5rem);
    z-index: 3;
    min-width: 6.875rem;
    margin: 0;
    padding: 0.375rem;
    list-style: none;
    border-radius: 0.625rem;
    background: rgba(20, 20, 20, 0.92);
    box-shadow: 0 0.375rem 1.125rem rgba(0, 0, 0, 0.4);
}

.pl-vitesse-menu[hidden] {
    display: none;
}

.pl-vitesse-menu button {
    display: block;
    width: 100%;
    padding: 0.375rem 0.625rem;
    border: 0;
    border-radius: 0.375rem;
    font-family: var(--police-texte);
    font-size: 0.85rem;
    text-align: left;
    color: white;
    background: transparent;
    cursor: pointer;
}

.pl-vitesse-menu button:hover,
.pl-vitesse-menu button:focus-visible {
    background: rgba(255, 255, 255, 0.15);
}

.pl-vitesse-menu button[aria-checked="true"] {
    color: #ffb700;
    font-weight: bold;
}