/* ─── 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;
  }
}

/* ─── Résultats : stats 3 colonnes → empilées sur mobile ───────── */
.result-stats-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr;
}

@media (max-width: 480px) {
  .result-stats-grid {
    grid-template-columns: 1fr !important;
  }
  .result-stats-grid > div {
    border-right: none !important;
    border-bottom: 1px solid #E2E8F0;
  }
  .result-stats-grid > div:last-child {
    border-bottom: none !important;
  }
}

/* ─── Slider header question : wrap sur mobile ──────────────────── */
@media (max-width: 500px) {
  /* En-tête question + % dans le slider */
  #page-content [style*="justifyContent: space-between"][style*="alignItems: flex-start"] {
    flex-wrap: wrap;
    gap: 8px;
  }
  /* Boutons nav slider */
  #page-content button[id*="btn-prev"],
  #page-content button[id*="btn-next"] {
    font-size: 12px !important;
    padding: 6px 10px !important;
  }
}

/* ─── Tableau réponses individuelles scroll ─────────────────────── */
.individual-answers-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}