/* Adaptation de la structure : barre mobile, tiroir et marges de page. Composants : app.css. */
* { box-sizing: border-box; }

table { width: 100%; border-collapse: collapse; }
input, textarea, select { max-width: 100%; }

.list-filter-bar { max-width: 520px; }
.session-join-url { word-break: break-all; }
.explanation-audience-text { font-size: 15px !important; line-height: 1.65 !important; white-space: pre-wrap; }

/* ─── Barre mobile et tiroir ───────────────────────────────────── */
#hamburger-btn {
  position: fixed;
  top: calc(6px + env(safe-area-inset-top));
  left: calc(6px + env(safe-area-inset-left));
  z-index: 95;
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}
.mobile-bar { display: none; }
#sidebar-overlay { position: fixed; inset: 0; z-index: 99; display: none; background: rgba(20, 20, 30, .35); }
#sidebar-overlay.visible { display: block; }
#main-sidebar { transition: transform 200ms ease; }

@media (max-width: 900px) {
  #hamburger-btn { display: flex; }
  .mobile-bar {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    height: calc(56px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 16px 0 calc(54px + env(safe-area-inset-left));
    background: var(--surface);
    border-bottom: 1px solid var(--line);
  }
  .mobile-bar .brand-logo { height: 28px; }
  #main-sidebar {
    z-index: 100;
    width: min(300px, 86vw);
    padding-top: calc(16px + env(safe-area-inset-top));
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
    transform: translateX(-105%);
  }
  #main-sidebar.open { transform: translateX(0); box-shadow: 12px 0 32px rgba(20, 20, 30, .14); }
  #page-content {
    margin-left: 0 !important;
    padding: calc(72px + env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)) !important;
  }
  .list-filter-bar { max-width: 100%; }
  .session-form-row { flex-direction: column !important; }
  .session-form-row > div { margin-right: 0 !important; margin-bottom: 16px !important; }
}

@media (max-width: 600px) {
  #page-content {
    padding-right: max(14px, env(safe-area-inset-right)) !important;
    padding-left: max(14px, env(safe-area-inset-left)) !important;
  }
  #join-card { padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  #main-sidebar { transition: none; }
}