/* ─── Reset & Base ─────────────────────────────────────────────── */
* { box-sizing: border-box; }

/* ─── Hamburger bouton (caché sur desktop) ─────────────────────── */
#hamburger-btn {
  display: none;
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 200;
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  width: 42px;
  height: 42px;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  align-items: center;
  justify-content: center;
}

/* ─── Overlay fond (mobile sidebar ouverte) ────────────────────── */
#sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 99;
}
#sidebar-overlay.visible {
  display: block;
}

/* ─── Sidebar ───────────────────────────────────────────────────── */
#main-sidebar {
  transition: transform 0.25s ease;
}

/* ─── Stat cards : grille 2x2 sur mobile ───────────────────────── */
.stat-grid {
  display: flex;
  gap: 16px;
}

/* ─── Tables responsive ─────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; }

/* ─── Inputs full-width ─────────────────────────────────────────── */
input, textarea, select {
  max-width: 100%;
}

/* ─── Choice rows sur mobile ────────────────────────────────────── */
.choice-row-label {
  white-space: normal !important;
  word-break: break-word;
}

/* ════════════════════════════════════════════════════════════════
   TABLET  (≤ 900px)
═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Sidebar glisse hors écran par défaut */
  #main-sidebar {
    transform: translateX(-260px);
    position: fixed !important;
    z-index: 100;
  }
  #main-sidebar.open {
    transform: translateX(0);
  }

  /* Main content prend tout l'espace */
  #page-content {
    margin-left: 0 !important;
    padding: 70px 20px 32px !important;
  }

  /* Hamburger visible */
  #hamburger-btn {
    display: flex;
  }

  /* Stat cards : 2 colonnes */
  .stat-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  /* Sessions : empiler les contrôles */
  .session-row {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .session-row-actions {
    text-align: left !important;
  }

  /* Résultats : bandeau en colonne */
  .results-summary {
    flex-direction: column !important;
    gap: 20px !important;
  }
  .results-summary-divider {
    display: none !important;
  }

  /* Grille questions résultats : 1 colonne */
  .questions-grid {
    grid-template-columns: 1fr !important;
  }

  /* Formulaire sessions flex → colonne */
  .session-form-row {
    flex-direction: column !important;
  }
  .session-form-row > div {
    margin-right: 0 !important;
    margin-bottom: 16px !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   MOBILE  (≤ 600px)
═══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* Main content */
  #page-content {
    padding: 68px 14px 28px !important;
  }

  /* Stat cards : 1 colonne sur très petit écran */
  .stat-grid {
    grid-template-columns: 1fr !important;
  }

  /* Titres */
  h1, .quiz-h1 { font-size: 22px !important; }
  h2, .quiz-h2 { font-size: 17px !important; }

  /* Boutons empilés dans les en-têtes */
  .page-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  /* Cartes quiz : empiler titre + boutons */
  .quiz-card-row {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .quiz-card-actions {
    align-self: flex-start !important;
  }

  /* Résultats : gros % plus petit */
  .results-pct {
    font-size: 40px !important;
  }
  .results-count {
    font-size: 26px !important;
  }

  /* Play : padding réduit */
  #play-header {
    padding: 14px 16px !important;
  }
  #play-questions {
    padding: 16px !important;
  }

  /* Participant layout */
  #join-card {
    margin: 0 12px !important;
    padding: 20px !important;
  }

  /* Choix QCM : texte lisible */
  .Select-option, .radio-label {
    font-size: 14px !important;
    padding: 12px 14px !important;
  }
}

/* ─── page-content responsive ──────────────────────────────────── */
@media (max-width: 900px) {
  #page-content {
    margin-left: 0 !important;
    padding: 70px 20px 32px !important;
  }
}
@media (max-width: 600px) {
  #page-content {
    padding: 68px 14px 28px !important;
  }
}