/* Correctif débordement horizontal mobile : PSN campus-sose2pem.com
   À charger APRES le CSS principal (index-DnmemLAr.css) dans index.html.
   Ne touche pas au code de l'application : purement défensif. */

html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

/* Cause réelle du débordement : le conteneur principal (flex-1 dans un
   parent flex) n'a pas min-width:0, donc il refuse de descendre sous la
   largeur "min-content" de son contenu (la barre de rôles qui ne wrap pas).
   C'est le correctif standard recommandé pour ce piège Flexbox/Tailwind. */
.flex-1 {
  min-width: 0;
}

/* La barre de rôles (Apprenant / Enseignant / Tuteur / Administrateur)
   ne rentre pas sur les écrans étroits : on la rend défilable
   horizontalement au lieu de laisser toute la page déborder. */
@media (max-width: 640px) {
  header.sticky {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  header.sticky::-webkit-scrollbar {
    display: none;
  }
}