/* ============================================
    MENU VERTICAL STYLE RESPONSIVE
    ============================================ */
  .dashboard-container {
      display: flex;
      gap: 30px;
      margin-top: 30px;
  }

  /* Bouton hamburger pour mobile : il tient lieu d'en-tête du menu, il en prend les couleurs
     (replis = rendu d'avant). */
  .mobile-menu-toggle {
      display: none;
      background: var(--dashboard-menu-header-bg, var(--primary-color));
      color: var(--dashboard-menu-header-text, white);
      border: none;
      border-radius: 8px;
      padding: 12px 20px;
      font-weight: 600;
      cursor: pointer;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-bottom: 20px;
      width: 100%;
  }

  .mobile-menu-toggle i {
      font-size: 1.2rem;
  }

  /* Couleurs du menu (29/10/2026) : réglées dans Paramètres graphiques › « Menu du tableau
     de bord », émises dans le :root par site_app et professor_app
     (App\Support\CouleursMenuTableauDeBord). Les replis gardent le rendu d'avant :
     --card-bg et --text-secondary n'étaient définis nulle part, le panneau était blanc et
     le texte héritait de celui du site, illisible sur un site sombre. */
  .vertical-menu-container {
      flex: 0 0 280px;
      background: var(--dashboard-menu-bg, var(--card-bg, #fff));
      color: var(--dashboard-menu-text); /* absente : hérite, comme avant */
      border-radius: 12px;
      border: 1px solid var(--border-color);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
      overflow: hidden;
      transition: transform 0.3s ease;
  }

  .vertical-menu-container.mobile-hidden {
      transform: translateX(-100%);
  }

  .vertical-menu-container.mobile-visible {
      transform: translateX(0);
  }

  /* Mobile ≤ 991.98px : sidebar drawer + layout prof pleine largeur.
     Supporte .mobile-visible (dashboard user) et .active (dashboard prof). */
  @media (max-width: 991.98px) {
      .mobile-menu-toggle { display: flex; }

      .vertical-menu-container {
          position: fixed;
          top: 0;
          left: 0;
          bottom: 0;
          /* 2026-09-11 : 1000 auparavant, quand le header montait a 999 sur ce
             point de rupture. Le header est passe a 1040 (megamenu.css) pour que
             le panneau de notifications ne soit plus recouvert : sans ce relevement,
             le menu lateral mobile du tableau de bord glisserait SOUS la barre du
             header et ses premiers items seraient caches. On reste sous le backdrop
             des modales Bootstrap (1050). */
          z-index: 1046;
          width: 280px;
          /* Tiroir pose PAR-DESSUS la page : il doit etre opaque. Sur un theme sombre le
             panneau n'a pas de fond (--dashboard-menu-bg: transparent, 30/10/2026) et la page
             se lirait a travers ; le fond de page passe dessous. Blanc reste blanc. */
          background: linear-gradient(var(--dashboard-menu-bg, var(--card-bg, #fff)), var(--dashboard-menu-bg, var(--card-bg, #fff))), var(--couleur-fond-content, #fff);
          transform: translateX(-100%);
          transition: transform 0.3s ease;
          border-radius: 0;
          box-shadow: 5px 0 20px rgba(0, 0, 0, 0.3);
          overflow-y: auto;
      }
      .vertical-menu-container.mobile-visible,
      .vertical-menu-container.active {
          transform: translateX(0);
      }

      .sidebar-overlay,
      .mobile-overlay {
          display: none;
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(0, 0, 0, 0.5);
          /* Suit le menu qu'il assombrit : un cran sous lui, un cran sur le header. */
          z-index: 1045;
      }
      .sidebar-overlay.active,
      .mobile-overlay.visible {
          display: block;
      }

      .d-flex > main[class*="col-"] {
          width: 100%;
          max-width: 100%;
          flex: 0 0 100%;
          margin-left: 0 !important;
          padding-left: 8px !important;
          padding-right: 8px !important;
      }
      .d-flex > main[class*="col-"] .container-fluid,
      .d-flex > main[class*="col-"] > .container-fluid {
          padding-left: 4px;
          padding-right: 4px;
      }
      .d-flex > main[class*="col-"] .container-fluid.py-4 {
          padding-top: 0.75rem;
          padding-bottom: 0.75rem;
      }
  }

  .dashboard-header {
      padding: 25px;
      background: var(--dashboard-menu-header-bg, var(--primary-color));
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .dashboard-header h3 {
      color: var(--dashboard-menu-header-text, white);
      margin: 0;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 1.3rem;
  }

  .dashboard-header h3 i {
      font-size: 1.5rem;
  }

  .vertical-menu {
      padding: 20px 0;
  }

  .menu-item {
      display: block;
      padding: 15px 25px;
      color: var(--dashboard-menu-text, var(--text-secondary));
      text-decoration: none;
      transition: all 0.3s ease;
      position: relative;
      display: flex;
      align-items: center;
      gap: 12px;
      border-left: 3px solid transparent;
  }

  .menu-item:hover {
      color: var(--dashboard-menu-text, var(--text-primary));
      background: rgba(255, 255, 255, 0.05);
      border-left-color: var(--primary-color);
  }

  .menu-item.active {
      background: var(--dashboard-menu-active-bg, rgba(230, 57, 70, 0.2));
      border-left-color: var(--primary-color);
  }

  .menu-item.active::before {
      content: '';
      position: absolute;
      right: 20px;
      width: 8px;
      height: 8px;
      background: var(--primary-color);
      border-radius: 50%;
      animation: pulse 2s infinite;
  }

  @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.5; }
  }

  .menu-item i {
      width: 20px;
      text-align: center;
      font-size: 1.1rem;
  }

  .menu-badge {
      margin-left: auto;
      margin-right: 12px;
      background: var(--primary-color);
      color: white;
      font-size: 0.7rem;
      padding: 2px 8px;
      border-radius: 10px;
      font-weight: 600;
  }

  .menu-divider {
      height: 1px;
      background: var(--border-color);
      margin: 15px 25px;
  }

  .menu-section {
      padding: 10px 25px;
      color: var(--dashboard-menu-muted, #9ca3af);
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-weight: 600;
      margin-top: 10px;
  }