body{
    background:var(--mpr-background);
    font-family:
        Inter,
        Arial,
        sans-serif;

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

.mpr-app{
    display:flex;
    min-height:100vh;
}

.mpr-sidebar{
    width:260px;
    background:white;
    border-right:1px solid var(--mpr-border);
}

.mpr-sidebar-backdrop{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.4);
    z-index:99;
}

.mpr-sidebar-backdrop.is-visible{
    display:block;
}

@media (max-width:768px){

    /* Filet de sécurité : malgré les correctifs apportés à header.css/
       hero.css/sidebar.css suite au test mobile pré-panel, un élément
       ponctuel encore trop large (composant tiers, cas non couvert)
       provoquerait un défilement horizontal de toute la page. Ce
       filet empêche ce débordement de se propager au <body> — il ne
       remplace pas un vrai traitement responsive par composant, il
       évite juste qu'un oubli casse la mise en page mobile en entier. */
    body{
        overflow-x:hidden;
    }

    .mpr-app{
        display:block;
    }

    .mpr-sidebar{
        position:fixed;
        top:0;
        left:-280px;
        width:260px;
        height:100vh;
        z-index:100;
        /* overflow-y:auto retiré d'ici : c'est maintenant
           .mpr-sidebar-scroll (components/sidebar.css) qui défile, pas
           .mpr-sidebar entier — voir son commentaire pour le détail. */
        transition:left .2s ease;
    }

    .mpr-sidebar.is-open{
        left:0;
    }

    .mpr-main{
        width:100%;
    }
}

/* min-width:0 : .mpr-main est un item flex (flex:1) de .mpr-app —
   sans ça, son minimum de rétrécissement par défaut reste le
   min-content de son descendant le plus large (ex : le tableau des
   segments de course_detail.php, ou une rangée de boutons d'action
   trop nombreux), qui pousse toute la page en débordement horizontal
   au lieu de laisser un enfant gérer son propre overflow-x:auto. Même
   piège flexbox déjà corrigé pour .mpr-profile-forms/.mpr-profile-insights
   (profile.css) — généralisé ici à la racine plutôt que rustiné page par
   page à chaque nouvelle occurrence. */
.mpr-main{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
}

/* Règle générale : le contenu de page (entre le header et le footer,
   quel que soit son nom de classe — .mpr-dashboard, .mpr-prediction-page,
   etc.) occupe tout l'espace disponible, pour que le footer reste
   toujours en bas de fenêtre même quand le contenu est court. Ni
   <header> ni <footer> ne sont des <div>, donc ce sélecteur les cible
   automatiquement sans jamais les toucher. */

.mpr-main > div{
    flex:1;
}

/* Grilles de cartes réutilisables (N colonnes égales, empilées sous
   900px) — utilisées partout où plusieurs cartes doivent s'aligner
   côte à côte sans dépendre du CSS propre à une seule page. */

.mpr-grid-2,
.mpr-grid-3{
    display:grid;
    align-items:start;
    gap:16px;
}

.mpr-grid-2{ grid-template-columns:repeat(2,1fr); }
.mpr-grid-3{ grid-template-columns:repeat(3,1fr); }

@media (max-width:900px){
    .mpr-grid-2,
    .mpr-grid-3{
        grid-template-columns:1fr;
    }
}