/* ==========================================================================
   Fichier : css/responsive-mobile.css
   Version Épurée & Compacte pour Mobile (Sans arrondis)
   ========================================================================== */

@media (max-width: 850px) {

  /* --- 1. Reset & Largeur Maximale du Texte --- */
  html,
  body {
    overflow-x: hidden;    /* Évite tout défilement horizontal parasite */
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Force le conteneur principal à occuper tout l'écran */
  main .layout {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 5px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  /* Force les sections à ignorer les largeurs fixes du mode desktop */
  section,
  .welcome-text,
  .dashboard,
  .ressources,
  .admin-flex,
  .form-block,
  .table-block,
  aside.sidebar {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 5px !important;
    margin: 0 0 25px 0 !important;
    box-sizing: border-box !important;
  }

  .admin-wrapper {
    width: 93%;
  }

  .table-block th:nth-child(2),
  .table-block th:nth-child(3),
  .table-block th:nth-child(4),
  .table-block th:nth-child(6),
  .table-block td:nth-child(2),
  .table-block td:nth-child(3),
  .table-block td:nth-child(4),
  .table-block td:nth-child(6) {
    display: none;
  }

  /* --- 2. En-tête (Titre en haut, Nav en dessous) --- */
  header {
    display: flex !important;
    flex-direction: column !important;    /* Force l'empilement vertical : Titre puis Nav */
    align-items: center !important;    /* Centre le titre et la nav horizontalement */
    width: 100% !important;
    padding: 10px 0 !important;
    margin: 0 0 15px 0 !important;
    box-sizing: border-box !important;
  }

  /* Style du conteneur de titre (issu de votre require 'php/title_header.php') */
  header h1,
  header .title-container,
  header div:first-child {
    width: 100% !important;
    text-align: center !important;
    margin: 0 0 10px 0 !important;    /* Petit espace sous le titre avant la nav */
  }

  /* --- Forçage du centrage absolu du H1 --- */
  header h1 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    margin: 0 0 12px 0 !important;
    /* Reset des marges d'origine + petit espace sous le titre */
    padding: 0 !important;
    /* Supprime d'éventuels paddings qui décaleraient le texte */
    float: none !important;
    /* Annule un éventuel float: left */
  }

  /* Conteneur de la navigation */
  nav {
    width: 100% !important;
    margin: 0 !important;
    text-align: center !important;
  }

  /* Les petits boutons horizontaux centrés */
  nav ul {
    display: flex !important;
    flex-direction: row !important;    /* Boutons côte à côte */
    flex-wrap: wrap !important;    /* Passage à la ligne si écran mini */
    justify-content: center !important;    /* Centrage des boutons sous le titre */
    gap: 6px !important;    /* Espacement entre les boutons */
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    background: transparent !important;
    border: none !important;
  }

  nav ul li {
    flex: none !important;    /* Pas d'étirement, le bouton s'ajuste au texte */
    display: inline-block !important;
    background-color: #f5f5f5 !important;
    border: 1px solid #ccc !important;
    border-radius: 0 !important;    /* Angles bien droits */
    margin: 0 !important;
  }

  nav ul li.active {
    background-color: #e0e0e0 !important;
    border-color: #999 !important;
  }

  /* Cache les icônes */
  nav ul li img {
    display: none !important;
  }

  /* Vos petits boutons discrets */
  nav ul li a {
    display: block !important;
    padding: 0 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    color: #333 !important;
    line-height: 1.2 !important;
  }

  /* --- 3. Titres de l'Aside en Couleur Foncée --- */
  aside.sidebar h3 {
    color: #fff !important;
    font-size: 1.1rem !important;
    margin-top: 20px !important;
    border-bottom: 2px solid #333 !important;    /* Soulignement fin et foncé */
    padding-bottom: 4px;
  }

  aside.sidebar h3 span {
    color: #fff !important;    /* On applique la même couleur sombre à la première lettre */    
  }

  aside.sidebar .top-eleve p,
  aside.sidebar .other-eleves p {
    margin-bottom: 10px;
  }

  /* --- 4. Suppression Globale des Border-Radius (Angles Droits) --- */
  *,
  .cycle,
  .modal-admin-content,
  nav ul li,
  div[style*="position: fixed"] {
    border-radius: 0 !important;
  }

  /* --- 5. Ajustements de l'Espace Élèves & Listes --- */
  /* On libère la hauteur fixe du conteneur et on passe en colonne */
  .audio-card {
    display: flex !important;
    flex-direction: column !important;      /* Force l'empilement vertical */
    height: auto !important;      /* Écrase la hauteur fixe d'origine */
    min-height: min-content !important;      /* S'assure que le bloc ne se rétracte pas */
    max-height: none !important;      /* Supprime toute limite de hauteur */
    width: 100% !important;
    gap: 15px !important;      /* Crée un espace propre entre les deux cartes */
    padding: 0 !important;
    margin: 0 0 25px 0 !important;
  }

  /* Style individuel pour chaque carte d'élève à l'intérieur */
  /* (Au cas où votre fonction PHP 'renderStudentCard' génère des sous-blocs avec des largeurs fixes) */
  .audio-card>div,
  .audio-card .student-card,
  .audio-card [class*="card"] {
    display: block !important;
    width: 100% !important;    /* Chaque carte prend toute la largeur */
    max-width: 100% !important;
    height: auto !important;    /* Laisse la carte respirer en hauteur selon son contenu */
    box-sizing: border-box !important;
    border-radius: 0 !important;    /* On garde la cohérence sans angles arrondis */
    margin-bottom: 10px !important;    /* Sécurité si le gap n'est pas pris en compte */
  }

  /* On donne un peu d'air aux listes de liens et d'outils */
  .sidebar ul,
  .sidebar ol {
    padding-left: 15px !important;
    margin: 8px 0 !important;
  }

  .sidebar li {
    padding: 6px 0 !important;
    font-size: 14px;
  }

  /* --- 6. Tableaux & Modales --- */
  .stats-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table {
    width: 100% !important;
    border-collapse: collapse;
  }

  /* Fenêtre de connexion Admin */
  .modal-admin-content {
    width: 95% !important;
    padding: 15px !important;
    box-sizing: border-box !important;
  }
}