/* ============================================================
   GenIAcademy — couche responsive transverse (chargée en dernier).
   Breakpoints du projet :
     - desktop  : > 900px  (app-shell : top-bar + sidebar fixes)
     - tablette : ≤ 900px  (sidebar horizontale, grilles resserrées)
     - mobile   : ≤ 600px  (empilement, contrôles compacts)
   Objectif : aucun débordement horizontal, cibles tactiles ≥ 40px.
   ============================================================ */

/* ---------- Tablette & mobile (≤ 900px) ---------- */
@media (max-width: 900px) {
  /* La nav passe en barre horizontale : on masque le pied verbeux. */
  .sidebar-footer { display: none; }

  /* Lecteur vidéo : barres techniques / accessibilité qui s'enroulent. */
  .stream-tech-bar { flex-wrap: wrap; gap: 10px 16px; }
  .accessibility-bar { flex-direction: column; align-items: flex-start; gap: 14px; }
  .access-group { flex-wrap: wrap; }

  /* Détail formation : visuel au-dessus, CTA pleine largeur. */
  .course-detail .btn-pay { display: block; width: 100%; text-align: center; }

  /* Demande de devis / services : une colonne. */
  .pro-services { grid-template-columns: 1fr; }
}

/* ---------- Mobile (≤ 600px) ---------- */
@media (max-width: 600px) {
  /* Top-bar : logo + contrôles passent sur deux lignes, plus compacts. */
  .top-bar {
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 18px;
  }
  .top-bar > div {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
  }
  .logo-signal svg { height: 42px; }
  .cta-signup, .logout-btn { padding: 8px 14px; font-size: 13px; }

  /* Marges de contenu réduites. */
  .stage { padding: 18px 18px 60px; }

  /* Titres : tailles adaptées au petit écran. */
  .page-title { font-size: 24px; }
  .auth-title, .resource-title { font-size: 26px; }
  .course-title { font-size: 24px; }
  .partners-h2, .diaspora-title { font-size: 22px; }
  .confirmation-title { font-size: 28px; }

  /* Toutes les grilles tombent en une colonne par sécurité. */
  .catalog-grid,
  .profile-grid,
  .poles-grid,
  .pro-services,
  .auth-grid { grid-template-columns: 1fr; }

  /* Inscription : bouton pleine largeur. */
  .register-actions { justify-content: stretch; }
  .register-submit { width: 100%; }

  /* Fiche profil : en-tête empilé, bouton éditer pleine largeur. */
  .profile-head { flex-direction: column; align-items: flex-start; }
  .profile-edit-btn { margin-left: 0; width: 100%; text-align: center; }

  /* Lecteur en mode split : on empile sur mobile. */
  .video-watch-wrap.split-mode .video-watch-player { grid-template-columns: 1fr; }

  /* Filtres ressources (catégories) : retour à la ligne, chips compactes. */
  .resource-filters { flex-wrap: wrap; gap: 8px; }
  .resource-filter { white-space: nowrap; padding: 6px 13px; font-size: 12.5px; }
}

/* ============================================================
   Navigation mobile : hamburger + drawer hors-canvas + bottom bar
   ============================================================ */

/* Hamburger masqué par défaut (desktop). */
.menu-toggle { display: none; }

/* Drawer / overlay / bottom bar : inexistants sur desktop. */
@media (min-width: 901px) {
  .mobile-drawer,
  .drawer-overlay,
  .bottom-nav { display: none !important; }
}

@media (max-width: 900px) {
  /* Correctif : la sidehorizontale gardait min-height:100vh -> grand vide.
     On la remplace entièrement par le drawer + la bottom bar. */
  .sidebar { display: none !important; }

  /* Hamburger visible, CTA auth retirés de la top-bar (déplacés). */
  .menu-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; padding: 0;
    background: transparent; border: none; color: var(--paper); cursor: pointer;
  }
  .menu-toggle svg { width: 24px; height: 24px; }
  .top-bar { padding: 12px 16px; }
  .top-bar .cta-signup,
  .top-bar .logout-btn { display: none; }

  /* Espace pour la bottom bar. */
  .stage { padding-bottom: 88px; }

  /* --- Overlay --- */
  .drawer-overlay {
    position: fixed; inset: 0; z-index: 300;
    background: rgba(10, 5, 3, 0.6); backdrop-filter: blur(2px);
    opacity: 0; visibility: hidden; transition: opacity 0.25s ease;
  }
  body.drawer-open .drawer-overlay { opacity: 1; visibility: visible; }
  body.drawer-open { overflow: hidden; }

  /* --- Drawer --- */
  .mobile-drawer {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 310;
    width: 82%; max-width: 320px;
    background: var(--ink-2); border-right: 1px solid var(--line);
    display: flex; flex-direction: column; overflow-y: auto;
    padding: 18px 0;
    transform: translateX(-100%); transition: transform 0.28s ease;
  }
  body.drawer-open .mobile-drawer { transform: translateX(0); }

  .drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 20px 16px; border-bottom: 1px solid var(--line);
  }
  .drawer-brand { font-family: 'Fraunces', serif; font-size: 20px; }
  .drawer-brand em { font-style: italic; color: var(--terra-light); }
  .drawer-close {
    background: none; border: none; color: var(--muted);
    font-size: 18px; cursor: pointer; width: 36px; height: 36px;
  }
  .drawer-nav { display: flex; flex-direction: column; padding: 12px 0; }
  .drawer-nav a {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 22px; color: var(--muted);
    text-decoration: none; font-size: 15px;
  }
  .drawer-nav a svg { width: 20px; height: 20px; flex-shrink: 0; }
  .drawer-nav a:hover { color: var(--paper); background: rgba(255, 255, 255, 0.04); }
  .drawer-nav a.active {
    color: var(--paper); background: rgba(255, 255, 255, 0.05);
    box-shadow: inset 3px 0 0 var(--terra);
  }
  .drawer-auth {
    margin-top: auto; padding: 16px 22px;
    border-top: 1px solid var(--line);
    display: flex; flex-direction: column; gap: 10px;
  }
  .drawer-auth a { color: var(--paper); text-decoration: none; font-size: 14px; }
  .drawer-cta {
    background: var(--terra); color: #fff !important; text-align: center;
    padding: 12px; border-radius: 100px;
  }
  .drawer-foot {
    padding: 14px 22px 4px; display: flex; flex-direction: column; gap: 6px;
  }
  .drawer-foot a { color: var(--muted); text-decoration: none; font-size: 12px; }

  /* --- Bottom bar --- */
  .bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 280;
    display: flex; background: var(--ink);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .bottom-nav a {
    flex: 1; min-height: 58px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; padding: 8px 4px;
    color: var(--muted-2); text-decoration: none;
    font-size: 11px; letter-spacing: -0.1px;
  }
  .bottom-nav a svg { width: 22px; height: 22px; }
  .bottom-nav a.active { color: var(--terra-light); }
}

/* ---------- Très petit (≤ 380px) ---------- */
@media (max-width: 380px) {
  .page-title { font-size: 21px; }
  .cta-signup, .logout-btn { padding: 7px 12px; font-size: 12px; }
}