/* ==========================================================
   SECTION
========================================================== */

.mpr-section{
    margin:10px 36px 0;
}

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

.mpr-section-header{
    margin-bottom:10px;
}

.mpr-section-title-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

/* Étend .mpr-btn.mpr-btn-ghost (buttons.css) — ne redéfinit ici
   que ce qui est propre à ce lien précis (alignement dans sa
   ligne de titre, pas de fond au survol). */
.mpr-section-more{
    padding:0;
    font-size:var(--mpr-font-sm);
    flex-shrink:0;
}

.mpr-section-more:hover{
    background:transparent;
    text-decoration:underline;
}

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

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

/* ==========================================================
   IDENTITÉ DES SECTIONS
========================================================== */

.mpr-section-identity{
    position:relative;
    height:20px;
    margin-top:4px;
}

.mpr-section-identity .mpr-section-line{
    position:absolute;
    left:0;
    right:0;
    top:50%;
    height:1.4px;
    background:#16A34A;
    transform:translateY(-50%);
    margin:0;
}

.mpr-section-identity img{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:42px;
    height:auto;
}

/* Position progressive du logo selon la section (Parcours → Terrain →
   Ravitaillements → Segments → Nutrition), du plus à gauche au plus à
   droite. */

.mpr-section-identity.mpr-pos-1 img{ left:0; }
.mpr-section-identity.mpr-pos-2 img{ left:90px; }
.mpr-section-identity.mpr-pos-3 img{ left:180px; }
.mpr-section-identity.mpr-pos-4 img{ left:270px; }
.mpr-section-identity.mpr-pos-5 img{ left:360px; }

/* ==========================================================
   BODY
========================================================== */

.mpr-section-body{
    padding:6px 0;
}

/* ==========================================================
   PERFORMANCE PREVISIONNELLE
========================================================== */

.mpr-summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

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

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

.mpr-summary-graph{
    width:100%;
    margin:10px 0 8px;
}

.mpr-summary-graph svg{
    width:100%;
    height:26px;
    overflow:visible;
}

.mpr-summary-graph path{
    fill:none;
    stroke:var(--mpr-primary);
    stroke-width:2.2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

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

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

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

@media (max-width:1100px){

    .mpr-summary{
        flex-wrap:wrap;
        gap:24px;
    }

    .mpr-summary-divider{
        display:none;
    }

    .mpr-summary-item{
        flex:0 0 calc(50% - 12px);
    }
}

@media (max-width:700px){

    .mpr-summary{
        flex-direction:column;
        gap:20px;
    }

    .mpr-summary-item{
        width:100%;
    }
}

/* .mpr-section-title-row (titre + éventuel bouton d'action à droite, ex.
   "Pré-remplir" sur nutrition.php) est en flex sans wrap ni min-width:0 —
   un titre long (ex. un intitulé de ravito/segment généré automatiquement)
   poussait le bouton hors de l'écran sur mobile au lieu de passer à la
   ligne, le rendant inatteignable. Même piège flexbox déjà documenté
   ailleurs sur ce projet (.mpr-hero-header/.mpr-hero-title). Repéré lors
   de l'audit mobile 2026-10-14. */
@media (max-width:768px){
    .mpr-section-title-row{
        flex-wrap:wrap;
        row-gap:8px;
    }

    .mpr-section-title-row > *:first-child{
        min-width:0;
    }
}