/* ==========================================================
   CARTE + TERRAIN
   La carte partage sa rangée avec les données de terrain (section
   "Terrain" de course_detail.php) plutôt qu'avec le profil — 2/3
   pour la carte, 1/3 pour les données.
========================================================== */

.mpr-map-terrain-grid{
    display:grid;
    grid-template-columns:2fr 1fr;
    min-height:360px;
    border-top:1px solid #ECEFF3;
    border-bottom:1px solid #ECEFF3;
}

.mpr-terrain-panel{
    padding:26px 30px;
}

/* z-index:1 (avec position:relative) donne à la carte son propre
   contexte d'empilement — sans ça, les panneaux internes de Leaflet
   (jusqu'à z-index:1000 pour les contrôles) passaient AU-DESSUS du
   header collant (.mpr-header, z-index:20) pendant le défilement sur
   mobile, puisque position:relative seul (sans valeur de z-index) ne
   crée pas de contexte d'empilement. Repéré lors de l'audit mobile
   2026-10-14. */
.mpr-course-map{
    position:relative;
    z-index:1;
    min-height:360px;
    border-right:1px solid #ECEFF3;
    overflow:hidden;
}

/* ==========================================================
   CONTRÔLES DE CARTE PERSONNALISÉS
   Fond de carte (Plan/Relief/Satellite) + plein écran — remplace le
   contrôle de calques Leaflet par défaut (générique) par une pastille
   aux couleurs du site (voir course_detail.js, classe L.Control
   MapControls). Positionné en haut à droite : le zoom Leaflet par
   défaut reste en haut à gauche, pas de recouvrement.
========================================================== */

.mpr-map-controls{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:6px;
}

.mpr-map-layer-switch{
    display:flex;
    gap:2px;
    background:#fff;
    border-radius:7px;
    padding:3px;
    box-shadow:0 1px 4px rgba(0,0,0,.25);
}

.mpr-map-control-btn{
    appearance:none;
    border:none;
    background:transparent;
    color:var(--mpr-text-light);
    font-size:11px;
    font-weight:var(--mpr-weight-semibold);
    padding:5px 10px;
    border-radius:5px;
    cursor:pointer;
    white-space:nowrap;
    transition:background .15s ease, color .15s ease;
}

.mpr-map-control-btn:hover{
    background:var(--mpr-background);
}

.mpr-map-control-btn.active{
    background:var(--mpr-primary);
    color:#fff;
}

.mpr-map-fullscreen-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:30px;
    height:30px;
    padding:0;
    background:#fff;
    box-shadow:0 1px 4px rgba(0,0,0,.25);
}

.mpr-map-fullscreen-btn:hover{
    background:var(--mpr-background);
}

.mpr-map-fullscreen-btn svg{
    width:15px;
    height:15px;
}

/* L'élément passé en plein écran (Fullscreen API) doit lui-même remplir
   l'écran — #map (height:100% par défaut) suit alors naturellement. */
.mpr-course-map:fullscreen,
.mpr-course-map:-webkit-full-screen{
    width:100vw;
    height:100vh;
    min-height:0;
}

/* Contrôle de zoom Leaflet par défaut, restylé aux couleurs du site
   plutôt qu'au gris générique de la librairie. */
.leaflet-control-zoom.leaflet-bar{
    border:none !important;
    box-shadow:0 1px 4px rgba(0,0,0,.25);
}

.leaflet-control-zoom a{
    background:#fff !important;
    color:var(--mpr-text) !important;
    border:none !important;
}

.leaflet-control-zoom a:hover{
    background:var(--mpr-background) !important;
    color:var(--mpr-primary) !important;
}

/* ==========================================================
   TOOLTIP SUR LA CARTE
   Même palette que le tooltip Chart.js du profil altimétrique (voir
   course_detail.js, config de elevationChart) — override du style
   Leaflet par défaut (fond blanc, flèche fine) pour rester cohérent
   entre carte et profil au survol du tracé.
========================================================== */

.leaflet-tooltip.mpr-map-tooltip{
    background:#1b1f26;
    border:1px solid #2a303a;
    color:#c8d0da;
    border-radius:6px;
    padding:8px 10px;
    font-size:12px;
    line-height:1.5;
    box-shadow:none;
}

.leaflet-tooltip.mpr-map-tooltip.leaflet-tooltip-top::before{
    border-top-color:#1b1f26;
}

.mpr-map-tooltip-title{
    color:#fff;
    font-weight:var(--mpr-weight-bold);
    margin-bottom:2px;
}

/* Sépare les infos du point survolé de celles du ravito le plus proche
   (voir RAVITO_SNAP_KM, buildHoverInfoLines() dans course_detail.js). */
.mpr-map-tooltip-sep{
    border:none;
    border-top:1px solid #2a303a;
    margin:6px 0;
}

.mpr-map-placeholder{
    position:relative;
    width:100%;
    height:100%;
    min-height:360px;
    background:
        linear-gradient(
            30deg,
            transparent 49%,
            #E9EDF0 50%,
            transparent 51%
        );
    background-size:80px 80px;
}


/* Tracé fictif */

.mpr-map-route{
    position:absolute;
    width:65%;
    height:45%;
    left:17%;
    top:27%;
    border:3px solid var(--mpr-primary);
    border-radius:48% 35% 52% 42%;
    transform:rotate(-12deg);
}


/* Départ / arrivée */

.mpr-map-start,
.mpr-map-finish{
    position:absolute;
    padding:5px 8px;
    border-radius:6px;
    background:#fff;
    border:1px solid #E5E9ED;
    font-size:10px;
    font-weight:600;
    color:var(--mpr-text);
}

.mpr-map-start{
    left:15%;
    bottom:25%;
}

.mpr-map-finish{
    right:15%;
    top:22%;
}


/* ==========================================================
   PROFIL — pleine largeur (élément central de la page, voir
   course_detail.js), n'est plus un grid item partagé avec la carte.
========================================================== */

.mpr-course-profile{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:26px 30px;
    border-top:1px solid #ECEFF3;
    border-bottom:1px solid #ECEFF3;
}

.mpr-profile-controls{
    display:flex;
    align-items:center;
    gap:4px;
}

.mpr-profile-control{
    border:0;
    background:transparent;
    padding:5px 8px;
    border-radius:6px;
    font-size:10px;
    font-weight:500;
    color:var(--mpr-text-light);
    cursor:pointer;
}

.mpr-profile-control:hover{
    background:#F4F6F7;
    color:var(--mpr-text);
}

.mpr-profile-control.active{
    background:#F0F5F1;
    color:var(--mpr-primary);
    font-weight:600;
}

/* Rangée de contrôles à deux groupes (ex: pente/terrain/ravitos/zoom à
   gauche, température/humidité/météo à droite — course_detail.php) :
   .mpr-profile-controls reste le conteneur générique (aussi utilisé par
   profile.php avec un seul groupe de boutons), ce modificateur n'ajoute
   la répartition gauche/droite que là où deux groupes existent. */
.mpr-profile-controls-split{
    width:100%;
    justify-content:space-between;
}

.mpr-profile-controls-group{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:4px;
}

/* Légendes déplacées hors de .mpr-profile-header (qui ne contient plus
   que la rangée de boutons) pour leur laisser toute la largeur sur leur
   propre ligne — plus la place de cohabiter avec 2 groupes de boutons
   sur la même rangée. Une seule légende visible à la fois (voir
   updateElevationChart()/applyWeatherMode() en JS), la classe ne fait
   qu'empiler la place qu'il faut. */
.mpr-profile-legends{
    display:flex;
    flex-direction:column;
    margin-bottom:18px;
}

.mpr-profile-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:18px;
    font-size:12px;
    color:var(--mpr-text-light);
}

/* ==========================================================
   LEGENDE COULEURS DE PENTE
   Une pastille de couleur par tranche plutôt qu'un simple texte
   coloré, pour que la correspondance couleur ↔ pente du profil
   altimétrique soit immédiate.
========================================================== */

.mpr-slope-legend{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    font-size:var(--mpr-font-xs);
    color:var(--mpr-text-light);
}

.mpr-slope-legend-label{
    font-weight:var(--mpr-weight-semibold);
    color:var(--mpr-text);
}

.mpr-legend-item{
    display:inline-flex;
    align-items:center;
    gap:5px;
    white-space:nowrap;
}

.mpr-legend-swatch{
    width:9px;
    height:9px;
    border-radius:2px;
    flex-shrink:0;
}

/* Couleurs identiques à assets/js/slopeColors.js — seule source de
   vérité pour le dégradé de pente, à garder synchronisée si les
   seuils changent. */
.mpr-legend-red{ background:#ff3b3b; }
.mpr-legend-orange{ background:#ff9f1c; }
.mpr-legend-yellow{ background:#ffd43b; }
.mpr-legend-green{ background:#2fbf4a; }

.mpr-profile-header span:first-child{
    font-size:13px;
    font-weight:600;
    color:var(--mpr-text);
}

.mpr-profile-header span:last-child{
    font-size:11px;
}


/* ==========================================================
   GRAPHIQUE
========================================================== */

/* position:relative + overflow:hidden : requis par Chart.js pour un
   graphique responsive (doc officielle) — sans ça, le canevas peut
   grandir sans limite dans une boucle de resize (le conteneur mesure le
   canevas, le canevas grandit, ce qui fait regrandir le conteneur...).
   Absent jusqu'ici, resté sans conséquence visible tant qu'un seul
   dataset existait ; devenu un vrai problème (barre de défilement
   horizontale sur toute la page) une fois la bascule entre modes
   météo ajoutée (plusieurs resize()/update() successifs sur le même
   canevas, voir applyWeatherMode() dans course_detail.js). */
.mpr-profile-chart{
    position:relative;
    width:100%;
    height:220px;
    overflow:hidden;
}

.mpr-profile-chart svg{
    display:block;
    width:100%;
    height:100%;
}

.mpr-profile-fill{
    fill:rgba(31, 139, 67, .06);
    stroke:none;
}

.mpr-profile-line{
    fill:none;
    stroke:var(--mpr-primary);
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}


/* ==========================================================
   DISTANCE
========================================================== */

.mpr-profile-distance{
    display:flex;
    justify-content:space-between;
    margin-top:8px;
    font-size:10px;
    color:var(--mpr-text-light);
}

/* ==========================================================
   RAVITAILLEMENTS — TIMELINE
========================================================== */

.mpr-ravitos-timeline{
    margin-top:26px;
}


/* ==========================================================
   HEADER
========================================================== */

.mpr-ravitos-timeline-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-bottom:14px;
}

.mpr-ravitos-header-left{
    min-width:0;
}

.mpr-ravitos-title{
    margin:0;
    font-size:20px;
    font-weight:700;
    line-height:1.2;
    letter-spacing:-0.02em;
    color:var(--mpr-text);
}

.mpr-ravitos-subtitle{
    margin-top:4px;
    font-size:12px;
    font-weight:400;
    color:var(--mpr-text-light);
}

/* ==========================================================
   BOUTON AJOUTER
========================================================== */

/* Étend .mpr-btn.mpr-btn-ghost (buttons.css) — ne redéfinit ici
   que ce qui est propre à ce bouton précis. */
.mpr-ravitos-add{
    border-radius:6px;
}

.mpr-ravito-add-inline-form{
    display:none;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    padding-bottom:16px;
}

.mpr-ravito-add-inline-form.is-visible{
    display:flex;
}


/* ==========================================================
   TRACK
========================================================== */

.mpr-ravitos-track{
    position:relative;
    width:100%;
    height:168px;
    margin-top:4px;
}

/* Tableau mobile des ravitos (voir course_detail.php) — masqué par
   défaut, affiché uniquement <768px à la place de la frise ci-dessus
   (voir le bloc responsive plus bas). */
.mpr-ravitos-table-wrapper{
    display:none;
    width:100%;
}

/* .mpr-ravitos-table-mobile réutilise .mpr-segments-table pour les
   bordures/hover/police, mais PAS sa règle générique "tbody td{
   white-space:nowrap }" pensée pour un tableau à 7-8 colonnes étroites —
   avec seulement 4 colonnes dont un nom de ravito potentiellement long,
   ça forçait le tableau à ~900px de large (débordement) au lieu de
   tenir dans les 390px d'un écran de téléphone. table-layout:fixed +
   largeurs en % + troncature sur le nom règle ça une fois pour toutes.
   Repéré lors de l'audit mobile 2026-10-14. */
.mpr-ravitos-table-mobile{
    table-layout:fixed;
    width:100%;
    /* Annule .mpr-segments-table{min-width:900px} (tables.css, <900px) —
       cette règle vise le vrai tableau des segments (7-8 colonnes, a
       besoin de défilement horizontal) ; ce tableau-ci n'a que 4 colonnes
       et doit au contraire tenir dans la largeur de l'écran. min-width
       l'emporte toujours sur width quel que soit la spécificité (c'est le
       modèle de boîte CSS, pas un conflit de cascade) — d'où ce correctif
       séparé, pas juste "plus spécifique". */
    min-width:0;
}

/* Spécificité égale ou supérieure à ".mpr-segments-table tbody td"
   (tables.css) pour que ces règles l'emportent réellement, plutôt que
   d'être silencieusement ignorées à spécificité égale/inférieure. */
.mpr-ravitos-table-mobile thead th,
.mpr-ravitos-table-mobile tbody td{
    white-space:normal;
}

.mpr-ravitos-table-mobile thead th:first-child,
.mpr-ravitos-table-mobile tbody td:first-child{
    width:40%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.mpr-ravitos-table-mobile thead th:not(:first-child),
.mpr-ravitos-table-mobile tbody td:not(:first-child){
    width:20%;
    text-align:center;
}



/* ==========================================================
   PROFIL CONDENSE
   Silhouette altimétrique miniature (SVG, ~40px de haut) à la
   place d'une ligne plate — chaque ravito se positionne dessus
   à sa véritable altitude (voir ravitoProfileOffsetPx() côté PHP).
========================================================== */

.mpr-ravitos-profile{
    position:absolute;
    left:0;
    right:0;
    top:64px;
    height:40px;
}

.mpr-ravitos-profile svg{
    display:block;
    width:100%;
    height:100%;
    overflow:visible;
}

.mpr-ravitos-profile polyline{
    fill:none;
    stroke:#D7E6DA;
    stroke-width:2;
    vector-effect:non-scaling-stroke;
}


/* ==========================================================
   POINT
   Positionné en (left:X%, top:Ypx) — Y correspond à l'altitude
   réelle du ravito sur le profil condensé (calculé en PHP).
========================================================== */

/* width:0, pas max-content : ses deux enfants (marqueur, info) sont
   tous deux position:absolute et se centrent/alignent via leur PROPRE
   transform/right, indépendamment de la largeur de ce point — mais
   Chromium calcule quand même le max-content de ce point en tenant
   compte d'eux, ce qui élargit sa boîte vers la droite (surtout pour
   .mpr-ravito-finish, positionné à left:100%) et pousse le libellé
   "Arrivée" hors du canevas mobile (850px, voir plus bas dans ce
   fichier) — repéré lors de l'audit mobile du widget Ravitaillements. */
.mpr-ravito-point{
    position:absolute;
    width:0;
}


/* ==========================================================
   MARQUEUR
   Centré exactement sur le point (donc pile sur le profil),
   quelle que soit la largeur du texte affiché à côté.
========================================================== */

/* --ravito-color : couleur de catégorie d'assistance (sans/avec
   assistance, base de vie), posée en inline-style par ravito — voir
   NutritionEngine.php::getRavitoAssistanceTypes() (seule source de
   vérité) — repli sur le vert de marque si jamais absente. */
.mpr-ravito-marker{
    position:absolute;
    top:0;
    left:0;
    transform:translate(-50%,-50%);
    display:block;
    appearance:none;
    line-height:0;
    width:10px;
    height:10px;
    padding:0;
    border:2px solid var(--ravito-color, var(--mpr-primary));
    border-radius:50%;
    background:#fff;
    cursor:pointer;
    z-index:2;
    transition:
        transform .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}

.mpr-ravito-marker:hover{
    transform:translate(-50%,-50%) scale(1.35);
    background:var(--ravito-color, var(--mpr-primary));
    box-shadow:0 0 0 4px color-mix(in srgb, var(--ravito-color, var(--mpr-primary)) 20%, transparent);
}


/* ==========================================================
   INFORMATIONS
   En alternance au-dessus / en dessous du marqueur (1 sur 2)
   pour laisser de la place aux noms longs et aux ravitos
   rapprochés, sans jamais déplacer le marqueur lui-même.
========================================================== */

.mpr-ravito-info{
    position:absolute;
    left:50%;
    text-align:center;
    z-index:1;
}

.mpr-ravito-info-below{
    top:0;
    transform:translate(-50%, 14px);
}

.mpr-ravito-info-above{
    top:0;
    transform:translate(-50%, calc(-100% - 14px));
}

.mpr-ravito-point:first-child .mpr-ravito-info{
    left:0;
    text-align:left;
}

.mpr-ravito-point:first-child .mpr-ravito-info-below{
    transform:translateY(14px);
}

.mpr-ravito-point:first-child .mpr-ravito-info-above{
    transform:translateY(calc(-100% - 14px));
}

.mpr-ravito-finish .mpr-ravito-info{
    left:auto;
    right:0;
    text-align:right;
}

.mpr-ravito-finish .mpr-ravito-info-below{
    transform:translateY(14px);
}

.mpr-ravito-finish .mpr-ravito-info-above{
    transform:translateY(calc(-100% - 14px));
}

.mpr-ravito-name{
    font-size:11px;
    font-weight:600;
    line-height:1.2;
    color:var(--mpr-text);
    white-space:nowrap;
}

.mpr-ravito-meta{
    margin-top:3px;
    font-size:10px;
    font-weight:500;
    color:var(--mpr-text-light);
    white-space:nowrap;
}

.mpr-ravito-pause{
    margin-top:2px;
    font-size:9px;
    color:var(--mpr-text-light);
    white-space:nowrap;
}

.mpr-ravito-passage{
    margin-top:2px;
    font-size:9px;
    font-weight:600;
    color:var(--mpr-primary);
    white-space:nowrap;
}

/* Heure de barrière horaire dans la frise — discrète comme .mpr-ravito-pause
   (pas de couleur d'alerte ici : le statut orange/rouge existe déjà dans le
   tableau des segments, cette ligne ne fait qu'indiquer l'heure elle-même). */
.mpr-ravito-barriere{
    margin-top:2px;
    display:flex;
    align-items:center;
    gap:3px;
    font-size:9px;
    color:var(--mpr-text-light);
    white-space:nowrap;
}

.mpr-ravito-barriere svg{
    width:10px;
    height:10px;
    flex-shrink:0;
}


/* ==========================================================
   CONDITIONS & TERRAIN
   Météo du jour (WeatherService.php) + répartition du terrain
   (TerrainService.php) sur la fiche course.
========================================================== */

.mpr-conditions-grid{
    grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
}

.mpr-conditions-grid .mpr-kpi-label{
    display:flex;
    align-items:center;
    gap:6px;
}

.mpr-conditions-grid .mpr-kpi-label svg{
    width:14px;
    height:14px;
    flex-shrink:0;
}

.mpr-conditions-grid .mpr-kpi-value{
    font-size:18px;
}

/* Bâtons éditable (prédiction/course modèle uniquement) — checkbox qui se
   soumet toute seule au clic, même patron que les cases à cocher inline
   déjà utilisées ailleurs (assign_wild_stop.php). */
.mpr-kpi-inline-form{
    margin:0;
}

.mpr-kpi-checkbox-label{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:18px;
    font-weight:var(--mpr-weight-bold);
    color:var(--mpr-text);
    cursor:pointer;
}

.mpr-kpi-checkbox-label input[type="checkbox"]{
    width:16px;
    height:16px;
    accent-color:var(--mpr-primary);
    cursor:pointer;
}

/* Ligne "Bâtons" de la section Terrain — plus une case parmi d'autres
   dans une grille de KPI météo (retirée : la météo vit désormais dans
   le graphique fusionné au profil altimétrique, voir charts.css plus
   bas / course_detail.js), juste une rangée compacte avec sa propre
   bordure de séparation avant le détail du terrain. */
.mpr-batons-row{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:18px;
    padding-bottom:16px;
    border-bottom:1px solid var(--mpr-border);
}

.mpr-batons-label{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:var(--mpr-font-sm);
    font-weight:var(--mpr-weight-semibold);
    color:var(--mpr-text);
}

.mpr-batons-label svg{
    width:15px;
    height:15px;
    color:var(--mpr-text-light);
}

.mpr-batons-value{
    font-size:var(--mpr-font-sm);
    color:var(--mpr-text-light);
}

/* Dans ce contexte compact (plus une grille de KPI), la case à cocher
   n'a plus besoin du gros gabarit conçu pour une tuile isolée. */
.mpr-batons-row .mpr-kpi-checkbox-label{
    font-size:var(--mpr-font-sm);
    font-weight:var(--mpr-weight-semibold);
}

/* Cases "Avec assistance"/"Base de vie" du formulaire ravito (ajout/édition,
   voir .mpr-ravito-add-inline-form) — même besoin de gabarit compact que
   .mpr-batons-row ci-dessus, au milieu d'inputs/select de taille normale. */
.mpr-ravito-checkbox-label{
    font-size:var(--mpr-font-sm);
    font-weight:var(--mpr-weight-normal);
    white-space:nowrap;
}

.mpr-terrain-block{
    margin-top:18px;
}

.mpr-terrain-block-label{
    font-size:var(--mpr-font-xs);
    font-weight:var(--mpr-weight-semibold);
    color:var(--mpr-text-light);
    text-transform:uppercase;
    letter-spacing:.03em;
    margin-bottom:8px;
}

.mpr-terrain-bar{
    display:flex;
    width:100%;
    height:14px;
    border-radius:7px;
    overflow:hidden;
    background:#ECEFF3;
}

.mpr-terrain-bar-slice{
    height:100%;
}

.mpr-terrain-legend{
    display:flex;
    flex-wrap:wrap;
    gap:6px 16px;
    margin-top:10px;
}

.mpr-terrain-legend-item{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:12px;
    color:var(--mpr-text-light);
}

.mpr-terrain-legend-swatch{
    width:9px;
    height:9px;
    border-radius:2px;
    flex-shrink:0;
}

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

@media (max-width:900px){

    /* Carte + données terrain empilées (1 colonne) sous cette largeur —
       .mpr-course-profile n'a plus besoin d'un traitement équivalent
       depuis qu'il est pleine largeur (bloc normal, plus un grid item
       partagé avec la carte) : son canevas se redimensionne seul via
       Chart.js, sans la même famille de bug que .mpr-debrief-top-grid
       (voir debrief.css). */
    .mpr-map-terrain-grid{
        grid-template-columns:1fr;
    }

    .mpr-course-map{
        border-right:none;
        border-bottom:1px solid #ECEFF3;
    }

    /* .mpr-ravitos-track-scroll est le viewport qui défile (largeur
       normale, 100%) ; .mpr-ravitos-track devient lui-même le canevas
       large (850px, comme .mpr-ravitos-profile) — les deux rôles ne
       peuvent pas être tenus par le même élément : voir le commentaire
       dans course_detail.php à l'endroit où ce wrapper est ajouté. */
    .mpr-ravitos-track-scroll{
        overflow-x:auto;
        padding-bottom:8px;
    }

    .mpr-ravitos-track{
        min-width:850px;
    }

    .mpr-ravitos-profile{
        min-width:850px;
    }

    .mpr-ravito-point{
        min-width:80px;
    }

    /* .mpr-ravito-point grandit vers la DROITE depuis son left:X% (voir
       plus haut, "POINT") — inoffensif pour tous les points, sauf
       l'arrivée (left:100%) : ses 80px de min-width débordent alors du
       canevas de 850px, poussant "Arrivée"/l'heure hors champ (visible
       uniquement en scrollant plus loin que le parcours lui-même).
       Retiré uniquement ici, le marqueur (10x10px, centré via son propre
       transform) et le libellé (déjà ancré à right:0 de ce point) ne
       dépendent pas de cette largeur pour se positionner correctement. */
    .mpr-ravito-finish{
        min-width:0;
    }
}

/* .mpr-profile-controls n'avait pas de flex-wrap : suffisant pour les 2
   boutons pente/terrain de la fiche course, mais profile.php réutilise
   ce même composant pour ~10 boutons de sensibilité (Pente, Endurance,
   Cardio, Température, Altitude, Horaire, Vent, Terrain, Pluie,
   Segments analysés, Typologies de courses) — sur mobile, la plupart
   dépassaient hors écran et étaient impossibles à atteindre. Repéré
   lors du re-test mobile pré-panel. */
@media (max-width:768px){
    .mpr-profile-controls{
        flex-wrap:wrap;
        row-gap:6px;
    }

    /* Ravitos : frise défilable horizontalement remplacée par un tableau
       vertical sur mobile (voir course_detail.php, .mpr-ravitos-table-wrapper
       ci-dessus) — même principe que les segments, plus facile à parcourir
       qu'un swipe sur 850px de large. Repéré lors de l'audit mobile
       2026-10-14. */
    .mpr-ravitos-track-scroll{
        display:none;
    }

    .mpr-ravitos-table-wrapper{
        display:block;
    }

    .mpr-ravitos-table-mobile tbody tr{
        cursor:pointer;
    }

    /* Sous cette largeur, le groupe météo passe sous le groupe
       pente/terrain/ravitos/zoom plutôt que de se serrer sur la même
       ligne (space-between) — chaque groupe garde son propre
       flex-wrap hérité de .mpr-profile-controls. */
    .mpr-profile-controls-split{
        flex-wrap:wrap;
        row-gap:8px;
    }
}