/* ==========================================================
   HERO
========================================================== */

.mpr-hero{
    margin:8px 36px 0;
}

/* ==========================================================
   PARTIE PRINCIPALE
========================================================== */

.mpr-hero-main{
    padding:0 0 18px;
}

/* ==========================================================
   TITRE
========================================================== */

.mpr-hero-header{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:6px;
}

.mpr-hero-title{
    margin:0;
    font-size:38px;
    font-weight:700;
    line-height:1.1;
    letter-spacing:-0.03em;
    color:var(--mpr-text);
}

.mpr-hidden{
    display:none;
}

.mpr-title-edit-form{
    display:none;
    align-items:center;
    gap:8px;
}

.mpr-title-edit-form.is-visible{
    display:flex;
}

.mpr-title-edit-form .mpr-input{
    font-size:22px;
    font-weight:700;
    padding:6px 10px;
    width:auto;
    min-width:240px;
}

.mpr-badge{
    padding:3px 8px;
    border-radius:6px;
    background:#EDF6ED;
    color:var(--mpr-primary);
    font-size:10px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}

/* Copie figée d'une prédiction (voir course_detail.php, $isFrozenCopy) —
   violet plutôt que le vert générique de .mpr-badge, pour que ce soit
   immédiatement visible qu'il ne s'agit pas de la prédiction du modèle. */
.mpr-badge-copy{
    display:inline-flex;
    align-items:center;
    gap:4px;
    background:#F5F3FF;
    color:#8B5CF6;
}

.mpr-badge-copy svg{
    width:11px;
    height:11px;
}

/* ==========================================================
   COPIE FIGÉE — temps forcé
========================================================== */

.mpr-forced-time-form{
    margin-top:10px;
    padding-top:10px;
    border-top:1px solid var(--mpr-border);
}

.mpr-forced-time-form .mpr-label{
    display:block;
    margin-bottom:4px;
    font-size:var(--mpr-font-xs);
    color:var(--mpr-text-light);
}

/* ==========================================================
   INFOS COURSE
========================================================== */

.mpr-hero-infos{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:20px;
    margin-top:8px;
    margin-bottom:18px;
    color:var(--mpr-text-light);
}

.mpr-hero-infos span{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:13px;
    font-weight:500;
}

.mpr-hero-infos svg{
    width:16px;
    height:16px;
}

/* ==========================================================
   RÉSUMÉ
========================================================== */

.mpr-hero-summary{
    margin-top:12px;
}

/* ==========================================================
   CARTE TEMPS
========================================================== */

/* Étend .mpr-card (cards.css) — ne redéfinit que la mise en
   page propre à ce composant précis. */
.mpr-time-card{
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:500px;
    padding:18px 24px;
    border-radius:16px;
    box-shadow:
        0 8px 20px rgba(0,0,0,.04),
        0 2px 6px rgba(0,0,0,.03);
}

.mpr-time-left{
    flex:1;
}

.mpr-time-label{
    margin-bottom:8px;
    font-size:10px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--mpr-text-light);
}

.mpr-time-value{
    font-size:50px;
    font-weight:700;
    line-height:1;
    letter-spacing:-0.04em;
    color:var(--mpr-primary);
}

/* Même sémantique que .mpr-kpi-value.warning (cards.css) — utilisé sur
   course_debrief.php pour l'écart temps, qui n'est pas toujours une
   "bonne nouvelle" comme le sont distance/D+/D- sur une fiche course. */
.mpr-time-value.warning{
    color:var(--mpr-warning);
}

/* Repère de confiance "Basé sur N courses · fiabilité X %" affiché juste
   sous un temps prédit (course_detail.php, dashboard.php,
   shared_prediction.php) — met la donnée au moment où le chiffre compte,
   au lieu de la laisser à trois clics dans le profil. Rendu par
   includes/model_trust_line.php. */
.mpr-model-trust{
    display:flex;
    align-items:flex-start;
    gap:6px;
    margin-top:8px;
    font-size:var(--mpr-font-sm);
    line-height:1.4;
    color:var(--mpr-text-light);
}

.mpr-model-trust svg{
    width:13px;
    height:13px;
    flex-shrink:0;
    margin-top:2px;
    color:var(--mpr-primary);
}

.mpr-model-trust strong{
    color:var(--mpr-text);
    font-weight:var(--mpr-weight-semibold);
}

.mpr-model-trust-info{
    cursor:help;
    opacity:.6;
}

.mpr-time-right{
    display:flex;
    flex-direction:column;
    gap:14px;
    margin-left:24px;
    padding-left:24px;
    border-left:1px solid var(--mpr-border);
}

.mpr-small-label{
    display:block;
    margin-bottom:2px;
    font-size:10px;
    color:var(--mpr-text-light);
}

.mpr-time-info strong{
    font-size:20px;
    font-weight:600;
    color:var(--mpr-text);
}

/* ==========================================================
   BARRE DE PROGRESSION
========================================================== */

.mpr-hero-status{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:10px;
    padding:12px 18px;
    background:#FAFBFA;
    border:1px solid var(--mpr-border);
    border-radius:14px;
}

.mpr-status-item{
    display:flex;
    align-items:center;
    gap:10px;
}

.mpr-status-item svg{
    width:18px;
    height:18px;
    color:var(--mpr-text-light);
}

.mpr-status-item.success svg{
    color:var(--mpr-primary);
}

.mpr-status-item.danger svg{
    color:var(--mpr-danger);
}

.mpr-status-item strong{
    display:block;
    font-size:12px;
    font-weight:600;
    line-height:1.2;
    color:var(--mpr-text);
}

.mpr-status-item span{
    display:block;
    margin-top:1px;
    font-size:10px;
    color:var(--mpr-text-light);
}

/* ==========================================================
   FLÈCHES
========================================================== */

.mpr-status-arrow{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 22px;
    color:#CBD5E1;
}

.mpr-status-arrow svg{
    width:15px;
    height:15px;
}

/* ==========================================================
   SCORE
========================================================== */

.mpr-status-score{
    display:flex;
    align-items:center;
    gap:10px;
    margin-left:6px;
}

.mpr-score-circle{
    --score-percent:100;
    width:46px;
    height:46px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
    font-weight:700;
    color:var(--mpr-primary);
    background:
        radial-gradient(closest-side, var(--mpr-background) 72%, transparent 73% 100%),
        conic-gradient(var(--mpr-primary) calc(var(--score-percent) * 1%), var(--mpr-border) 0);
}

.mpr-status-score strong{
    display:block;
    font-size:12px;
    font-weight:600;
}

.mpr-status-score span{
    display:block;
    margin-top:1px;
    font-size:10px;
    color:var(--mpr-text-light);
}

/* ==========================================================
   MOBILE
   .mpr-hero-title (38px fixe) et .mpr-time-card (500px de large
   fixe) sont pensés pour le desktop — sur mobile, ils forçaient un
   débordement horizontal de toute la page (jusqu'à 892px de large
   mesurés sur course_detail.php pour un écran de 375px). Repéré lors
   du test mobile pré-panel.
========================================================== */
@media (max-width:768px){
    .mpr-hero{
        margin:8px 16px 0;
    }

    /* .mpr-hero-header (titre + bouton crayon + badge) est en flex sans
       flex-wrap : sans min-width:0 sur le titre, sa taille minimale
       automatique en tant qu'item flex ignore overflow-wrap et ne casse
       jamais un nom de course sans espace (les noms auto-générés depuis
       le fichier GPX, ex. "Grand_Raid_ventoux_100k_260425"), poussant le
       badge "MODÈLE"/"PRÉDICTION" hors écran. Repéré lors du re-test
       mobile pré-panel (passait inaperçu sur les titres contenant des
       espaces, qui cassent naturellement sans overflow-wrap). */
    .mpr-hero-header{
        flex-wrap:wrap;
    }

    .mpr-hero-title{
        font-size:26px;
        overflow-wrap:break-word;
        min-width:0;
    }

    .mpr-time-card{
        width:100%;
        flex-wrap:wrap;
        gap:14px;
    }

    /* .mpr-title-edit-form (titre + date + heure + bouton Enregistrer)
       est en flex sans wrap, avec un input texte à min-width:240px — sur
       mobile, 3-4 champs + bouton sur une seule ligne forçaient un
       débordement horizontal de toute la page. Empilé en colonne, pleine
       largeur, comme le reste des formulaires mobile du site. Repéré lors
       de l'audit mobile 2026-10-14. */
    .mpr-title-edit-form.is-visible{
        flex-direction:column;
        align-items:stretch;
        width:100%;
    }

    .mpr-title-edit-form .mpr-input{
        width:100%;
        min-width:0;
    }

    .mpr-time-right{
        margin-left:0;
        padding-left:0;
        border-left:none;
        border-top:1px solid var(--mpr-border);
        padding-top:14px;
        flex-direction:row;
        flex-wrap:wrap;
    }

    .mpr-hero-status{
        flex-wrap:wrap;
        row-gap:10px;
    }
}