/* ==========================================================
   SEGMENTS
========================================================== */

.mpr-segments-section{
    margin-top:42px;
}

/* ==========================================================
   RÉCAPITULATIF NUTRITIONNEL
========================================================== */

.mpr-segments-summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:24px;
}

.mpr-segments-summary-item{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:4px 18px;
}

.mpr-segments-summary-value{
    font-size:20px;
    font-weight:700;
    line-height:1;
    letter-spacing:-0.03em;
    color:var(--mpr-text);
}

.mpr-segments-summary-label{
    margin-top:7px;
    font-size:11px;
    font-weight:500;
    color:var(--mpr-text-light);
    letter-spacing:.02em;
}

.mpr-segments-summary-divider{
    width:1px;
    align-self:stretch;
    background:#ECEFF3;
    margin:4px 10px;
}

/* Sur mobile, le padding horizontal cumulé de chaque item (18px de
   chaque côté) + les marges des séparateurs (10px de chaque côté)
   suffisaient à eux seuls à pousser la page en dehors du viewport avec
   4-5 items côte à côte (D+/D-/distance/durée) — resserré pour un
   affichage compact mais sans perte de contenu. Repéré lors du re-test
   mobile pré-panel. */
@media (max-width:768px){
    /* .mpr-segments-switch (7 boutons : Allure/Vitesse/Fatigue/Global/
       Cardio/Endurance/Conditions sur prediction_analysis.php) n'avait
       aucune règle mobile — débordait de ~240px hors du viewport.
       Repéré lors du balayage mobile final pré-panel. */
    .mpr-segments-switch{
        flex-wrap:wrap;
        row-gap:4px;
    }

    .mpr-segments-summary-item{
        padding:4px 8px;
        /* flex:1 seul ne suffit pas à rétrécir sous la largeur naturelle
           du libellé (ex. "Pause cumulée") — min-width:auto par défaut
           sur un flex item. Sans ce min-width:0, le dernier item
           débordait encore de 20-30px hors du viewport (texte coupé en
           "0 mi" au lieu de "0 min"), malgré le padding déjà resserré
           ci-dessus. Repéré lors du re-test mobile pré-panel. */
        min-width:0;
    }

    .mpr-segments-summary-divider{
        margin:4px 4px;
    }

    .mpr-segments-summary-value{
        font-size:16px;
    }
}



/* ==========================================================
   BARRE DE CONTRÔLES
========================================================== */

.mpr-segments-toolbar{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    margin-bottom:10px;
}

.mpr-segments-switch{
    display:flex;
    align-items:center;
    gap:3px;
    padding:3px;
    background:#F5F7F8;
    border-radius:7px;
}

.mpr-segment-filter{
    border:0;
    background:transparent;
    padding:5px 10px;
    border-radius:5px;
    font-family:inherit;
    font-size:11px;
    font-weight:500;
    color:var(--mpr-text-light);
    cursor:pointer;
    transition:
        background .18s ease,
        color .18s ease;
}

.mpr-segment-filter:hover{
    color:var(--mpr-text);
}

.mpr-segment-filter.active{
    background:var(--mpr-primary);
    color:#fff;
    font-weight:600;
    box-shadow:0 1px 3px rgba(0,0,0,.05);
}


/* ==========================================================
   TABLEAU
========================================================== */

.mpr-segments-table-wrapper{
    width:100%;
    overflow-x:auto;
}

.mpr-segments-table{
    width:100%;
    border-collapse:collapse;
    table-layout:auto;
}


/* ==========================================================
   EN-TÊTE
========================================================== */

.mpr-segments-table thead th{
    padding:11px 12px;
    border-bottom:1px solid #E5E9ED;
    font-size:10px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.05em;
    text-align:left;
    white-space:nowrap;
    color:var(--mpr-text-light);
}


/* ==========================================================
   LIGNES
========================================================== */

.mpr-segments-table tbody tr{
    border-bottom:1px solid #F0F2F4;
    transition:background .15s ease;
}

.mpr-segments-table tbody tr:last-child{
    border-bottom:0;
}

.mpr-segments-table tbody tr:hover{
    background:var(--mpr-background);
}

.mpr-segments-table tbody td{
    padding:13px 12px;
    font-size:12px;
    font-weight:400;
    color:var(--mpr-text);
    white-space:nowrap;
}


/* ==========================================================
   NOM DU SEGMENT
========================================================== */

/* Collante pendant le défilement horizontal (tables larges sur mobile,
   voir la section RESPONSIVE plus bas) : sans ça, une fois qu'on a
   balayé au-delà des premières colonnes, plus aucun repère pour savoir
   à quel segment/ravito une ligne de données correspond — signalé
   comme désagréable à l'usage. Couvre aussi bien .mpr-segments-table
   (1ère colonne "Kilomètre"/"Nom" selon le mode d'affichage) que
   .mpr-nutrition-table (1ère colonne "Nom" du ravito) : les deux
   tableaux réutilisent cette même classe pour leur 1ère colonne. Fond
   opaque obligatoire (--mpr-surface) : sans lui, le contenu des
   colonnes suivantes apparaîtrait par transparence en défilant sous la
   colonne collante. */
.mpr-segment-name{
    min-width:180px;
    font-weight:600 !important;
    position:sticky;
    left:0;
    z-index:1;
    background:var(--mpr-surface);
    box-shadow:2px 0 4px -2px rgba(0,0,0,.12);
}

/* Priorité sur la colonne collante des lignes de données (z-index:1
   ci-dessus) — sans quoi l'en-tête laisserait voir les lignes du
   tableau par transparence au même endroit lors du défilement. */
.mpr-segments-table thead th.mpr-segment-name,
.mpr-nutrition-table thead th.mpr-segment-name{
    z-index:2;
}

/* Le survol de ligne (tbody tr:hover, plus bas) change le fond de
   toute la ligne — sans ce correctif, la colonne collante garderait
   son propre fond opaque et resterait visuellement "blanche" pendant
   que le reste de la ligne se grise au survol. */
.mpr-segments-table tbody tr:hover .mpr-segment-name,
.mpr-nutrition-table tbody tr:hover .mpr-segment-name{
    background:var(--mpr-background);
}

/* Vue "Kilomètre" (course_detail.php, view=km) : cette colonne n'affiche
   qu'une courte distance ("12.4 km"), pas un nom de ravito — inutile de
   lui réserver 180px, ce qui écrasait toutes les colonnes numériques
   suivantes du tableau sur mobile. La vue par défaut (avec noms de
   ravitos, potentiellement longs) garde le min-width normal ci-dessus.
   Repéré lors du test mobile réel pré-panel. */
.mpr-segment-name.mpr-segment-name-km{
    min-width:70px;
}


/* ==========================================================
   ALLURE
========================================================== */

.mpr-segment-highlight{
    font-weight:600 !important;
}

/* Allure devenue irréaliste après redistribution d'un temps forcé (copie
   figée, voir course_detail.php $paceWarning / MAX_REALISTIC_SPEED_KMH). */
.mpr-pace-warning{
    color:var(--mpr-danger) !important;
    font-weight:700 !important;
}


/* ==========================================================
   RAVITAILLEMENT
========================================================== */

/* Sous la pastille d'assistance (.mpr-status-pill.ravito-*) : le contenu
   du ravito (Ravito complet/Liquide/Solide/Autre), en petit et discret. */
.mpr-ravito-type{
    display:block;
    margin-top:3px;
    font-size:11px;
    font-weight:var(--mpr-weight-normal);
    color:var(--mpr-text-light);
}


/* ==========================================================
   COLONNES NUMÉRIQUES
========================================================== */

.mpr-segments-table th:nth-child(2),
.mpr-segments-table th:nth-child(3),
.mpr-segments-table th:nth-child(4),
.mpr-segments-table th:nth-child(5),
.mpr-segments-table th:nth-child(6),
.mpr-segments-table th:nth-child(7),
.mpr-segments-table th:nth-child(8){
    text-align:center;
}

.mpr-segments-table td:nth-child(2),
.mpr-segments-table td:nth-child(3),
.mpr-segments-table td:nth-child(4),
.mpr-segments-table td:nth-child(5),
.mpr-segments-table td:nth-child(6),
.mpr-segments-table td:nth-child(7),
.mpr-segments-table td:nth-child(8){

    text-align:center;
}

/* ==========================================================
   VOIR TOUS LES RAVITAILLEMENTS
========================================================== */

.mpr-segments-more{
    display:flex;
    justify-content:flex-end;
    margin-top:14px;
}

.mpr-segments-more-button{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 10px;
    border:0;
    background:transparent;
    font-family:inherit;
    font-size:11px;
    font-weight:500;
    color:var(--mpr-text-light);
    cursor:pointer;
    border-radius:6px;
    transition:
        color .18s ease,
        background .18s ease;
}

.mpr-segments-more-button:hover{
    color:var(--mpr-text);
    background:#F5F7F8;
}

.mpr-segments-more-button svg{
    width:13px;
    height:13px;
    transition:transform .18s ease;
}

.mpr-segments-more-button:hover svg{
    transform:translateX(2px);
}


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

@media (max-width:900px){
    .mpr-segments-table{
        min-width:900px;
    }

    /* Le libellé d'un segment en vue "Nom" concatène ravito de départ ET
       d'arrivée ("Fontaine des Anges → Levens", voir course_detail.php)
       — sans plafond de largeur, la colonne collante (déjà sticky
       ci-dessus) grandissait pour tenir tout le texte sur une ligne
       (white-space:nowrap hérité des td du tableau) et finissait par
       occuper la quasi-totalité de l'écran mobile à elle seule, ne
       laissant plus rien voir des autres colonnes. Tronqué avec une
       ellipse plutôt que d'agrandir la colonne — au tap/survol, le
       titre HTML natif (via l'attribut title, ajouté côté PHP) reste
       consultable en entier. La vue "Kilomètre" (.mpr-segment-name-km,
       texte toujours court) n'a pas besoin de ce plafond. */
    .mpr-segment-name:not(.mpr-segment-name-km){
        min-width:0;
        max-width:140px;
        overflow:hidden;
        text-overflow:ellipsis;
    }
}

/* ==========================================================
   NUTRITION
========================================================== */

.mpr-nutrition-section{

    margin-top:42px;

}


/* ==========================================================
   RÉCAPITULATIF NUTRITIONNEL
========================================================== */

.mpr-nutrition-summary{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:24px;

}

.mpr-nutrition-summary-item{

    flex:1;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:4px 18px;

}

.mpr-nutrition-summary-value{

    font-size:20px;

    font-weight:700;

    line-height:1;

    letter-spacing:-0.03em;

    color:var(--mpr-text);

}

.mpr-nutrition-summary-label{

    margin-top:7px;

    font-size:11px;

    font-weight:500;

    color:var(--mpr-text-light);

    letter-spacing:.02em;

}

.mpr-nutrition-summary-divider{

    width:1px;

    align-self:stretch;

    background:#ECEFF3;

    margin:4px 10px;

}


/* ==========================================================
   TABLEAU
========================================================== */

.mpr-nutrition-table-wrapper{

    width:100%;

    overflow-x:auto;

}

.mpr-nutrition-table{

    width:100%;

    border-collapse:collapse;

    table-layout:auto;

}


/* ==========================================================
   EN-TÊTE
========================================================== */

.mpr-nutrition-table thead th{

    padding:11px 12px;

    border-bottom:1px solid #E5E9ED;

    font-size:10px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.05em;

    text-align:left;

    white-space:nowrap;

    color:var(--mpr-text-light);

}


/* ==========================================================
   LIGNES
========================================================== */

.mpr-nutrition-table tbody tr{

    border-bottom:1px solid #F0F2F4;

    transition:background .15s ease;

}

.mpr-nutrition-table tbody tr:last-child{

    border-bottom:0;

}

.mpr-nutrition-table tbody tr:hover{

    background:var(--mpr-background);

}

.mpr-nutrition-table tbody td{

    padding:13px 12px;

    font-size:12px;

    font-weight:400;

    color:var(--mpr-text);

    white-space:nowrap;

}


/* ==========================================================
   KM
========================================================== */

.mpr-nutrition-km{

    font-weight:600 !important;

}


/* ==========================================================
   ACTION NUTRITIONNELLE
========================================================== */

.mpr-nutrition-action{

    font-weight:600 !important;

}


/* ==========================================================
   RAVITO CONFORME
========================================================== */

.mpr-ravito-status{

    font-size:11px;

    font-weight:600;

}

.mpr-ravito-status.is-ok{

    color:var(--mpr-primary);

}

.mpr-ravito-status.is-not-ok{

    color:#B45353;

}


/* ==========================================================
   ALIGNEMENT DES DONNÉES
========================================================== */

.mpr-nutrition-table th:nth-child(2),
.mpr-nutrition-table th:nth-child(3),
.mpr-nutrition-table th:nth-child(4),
.mpr-nutrition-table th:nth-child(5),
.mpr-nutrition-table th:nth-child(6),
.mpr-nutrition-table th:nth-child(7),
.mpr-nutrition-table th:nth-child(9){

    text-align:center;

}

.mpr-nutrition-table td:nth-child(2),
.mpr-nutrition-table td:nth-child(3),
.mpr-nutrition-table td:nth-child(4),
.mpr-nutrition-table td:nth-child(5),
.mpr-nutrition-table td:nth-child(6),
.mpr-nutrition-table td:nth-child(7),
.mpr-nutrition-table td:nth-child(9){

    text-align:center;

}


/* ==========================================================
   VOIR TOUTE LA STRATÉGIE
========================================================== */

.mpr-nutrition-more{

    display:flex;

    justify-content:flex-end;

    margin-top:10px;

}

.mpr-nutrition-more-button{

    display:inline-flex;

    align-items:center;

    gap:5px;

    padding:5px 0;

    border:0;

    background:transparent;

    font-family:inherit;

    font-size:11px;

    font-weight:500;

    color:var(--mpr-text-light);

    cursor:pointer;

    transition:

        color .18s ease,

        transform .18s ease;

}

.mpr-nutrition-more-button:hover{

    color:var(--mpr-text);

}

.mpr-nutrition-more-button svg{

    width:13px;

    height:13px;

    transition:transform .18s ease;

}

.mpr-nutrition-more-button:hover svg{

    transform:translateX(2px);

}


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

@media (max-width:900px){

    .mpr-nutrition-table{

        min-width:1000px;

    }

    .mpr-nutrition-summary{

        gap:10px;

    }

    .mpr-nutrition-summary-item{

        padding:4px 8px;

    }

}

/* ==========================================================
   TABLEAU DE DONNEES
   Générique : comparaisons, listes de produits, tout tableau
   simple avec en-tête + lignes + survol. Utilisé sur
   course_debrief.php et nutrition_shopping.php (auparavant
   piégé dans pages/debrief.css, invisible pour la seconde).
========================================================== */

.mpr-data-table-wrap{
    overflow-x:auto;
    margin-top:14px;
}

.mpr-data-table{
    width:100%;
    border-collapse:collapse;
    font-size:var(--mpr-font-sm);
}

.mpr-data-table thead th{
    text-align:left;
    padding:10px 14px;
    font-size:var(--mpr-font-xs);
    text-transform:uppercase;
    letter-spacing:.05em;
    color:var(--mpr-text-light);
    border-bottom:1px solid var(--mpr-border);
}

.mpr-data-table tbody td{
    padding:12px 14px;
    border-bottom:1px solid var(--mpr-border);
    color:var(--mpr-text);
}

.mpr-data-table tbody tr:last-child td{
    border-bottom:none;
}

.mpr-data-table tbody tr:hover td{
    background:var(--mpr-background);
}

.mpr-clickable-row{
    cursor:pointer;
}

/* Limite d'affichage à 5 éléments (segments, ravitos) tant que le
   conteneur n'a pas reçu la classe is-expanded (bouton "Voir tout"). */

.mpr-hidden-extra{
    display:none;
}

.is-expanded .mpr-hidden-extra{
    display:table-row;
}

.mpr-ravitos-track.is-expanded .mpr-hidden-extra{
    display:block;
}