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

/* min-height plutôt que height fixe, + flex-wrap : un fil d'Ariane à 4-5
   maillons (voir .mpr-breadcrumb plus bas) peut dépasser la largeur
   disponible à côté des boutons d'action de .mpr-header-right sur un
   écran desktop pas si large — même correctif que celui déjà en place
   pour mobile ci-dessous (.mpr-header-right passait à la ligne, coupé
   par la hauteur fixe), généralisé à toutes les tailles d'écran plutôt
   que dupliqué uniquement en media query. */
.mpr-header{
    min-height:56px;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    row-gap:8px;
    justify-content:space-between;
    padding:0 36px;
    background:var(--mpr-surface);
    border-bottom:1px solid var(--mpr-border);
    position:sticky;
    top:0;
    z-index:20;
}

/* ==========================================================
   RETOUR
========================================================== */

.mpr-header-back{
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    font-size:14px;
    font-weight:500;
    color:var(--mpr-text-light);
    transition:
        color .20s ease,
        transform .20s ease;
}

.mpr-header-back:hover{
    color:var(--mpr-primary);
}

.mpr-header-back:hover .mpr-header-back-icon{
    transform:translateX(-2px);
}

/* ==========================================================
   ICÔNE
========================================================== */

.mpr-header-back-icon{
    width:18px;
    height:18px;
    color:currentColor;
    transition:transform .20s ease;
}

/* ==========================================================
   FIL D'ARIANE
   Chemin complet cliquable depuis le tableau de bord (voir
   includes/breadcrumb.php) — remplace, sur les pages internes, l'ancien
   titre statique ou l'unique lien "retour" (.mpr-header-back ci-dessus,
   dont ce composant reprend la palette).
========================================================== */

.mpr-breadcrumb{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:4px 8px;
    min-width:0;
}

.mpr-breadcrumb-link,
.mpr-breadcrumb-current{
    display:inline-block;
    max-width:240px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    vertical-align:bottom;
    font-size:14px;
}

.mpr-breadcrumb-link{
    text-decoration:none;
    font-weight:500;
    color:var(--mpr-text-light);
    transition:color .20s ease;
}

.mpr-breadcrumb-link:hover{
    color:var(--mpr-primary);
}

.mpr-breadcrumb-current{
    font-weight:600;
    color:var(--mpr-text);
}

.mpr-breadcrumb-separator{
    color:var(--mpr-text-light);
    font-size:14px;
    line-height:1;
}

/* ==========================================================
   ACTIONS
========================================================== */

/* flex-wrap : une fiche prédiction accumule jusqu'à 6 boutons d'action
   (Nutrition/Créer une copie modifiable/Importer la course réalisée/
   Export PDF/Partager/Export GPX) — sans wrap, la rangée force le header
   (et donc toute la page) plus large que le viewport dès ~1280px de large
   au lieu de passer à la ligne. Généralisé à toutes les tailles d'écran
   (déjà le cas pour .mpr-header lui-même, voir plus haut) plutôt que
   réservé au seul mobile comme avant. */
.mpr-header-right{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    row-gap:8px;
    gap:12px;
}

.mpr-header-left{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}

/* ==========================================================
   MENU MOBILE (bouton injecté par scripts.php, voir layout.css
   pour le comportement de la sidebar en dessous de 768px)
========================================================== */

.mpr-menu-toggle{
    display:none;
    align-items:center;
    justify-content:center;
    background:none;
    border:none;
    padding:6px;
    margin:0;
    cursor:pointer;
    color:var(--mpr-text);
    flex-shrink:0;
}

@media (max-width:768px){
    .mpr-menu-toggle{
        display:inline-flex;
    }

    /* height:auto/flex-wrap/row-gap sont maintenant la base commune
       (voir .mpr-header plus haut, généralisée au-delà du seul mobile) —
       ne reste ici que le padding réduit propre au mobile. */
    .mpr-header{
        padding:10px 16px;
    }

    .mpr-breadcrumb-link,
    .mpr-breadcrumb-current{
        max-width:120px;
    }

    .mpr-header-right{
        gap:8px;
    }

    /* Boutons d'action réduits à leur icône sur mobile : une fiche
       prédiction peut accumuler jusqu'à 7 boutons (Nutrition/Matériel/
       Créer une copie modifiable/Importer/Export PDF/Partager/Export GPX)
       — en texte complet, ça occupait plus de la moitié de l'écran en
       permanence (le header est collant, position:sticky). Ne s'applique
       qu'aux boutons dont le libellé est explicitement marqué
       .mpr-btn-label (voir course_detail.php) — un bouton qui ne l'utilise
       pas garde son texte, inchangé. Repéré lors de l'audit mobile
       2026-10-14. */
    .mpr-header-right .mpr-btn .mpr-btn-label{
        display:none;
    }

    .mpr-header-right .mpr-btn{
        padding-left:10px;
        padding-right:10px;
    }
}