/**
 * RESPONSIVE — Réunion 974 One Trading
 * Breakpoints: mobile < 768 | tablet 768–1024 | desktop > 1024 | wide > 1400
 */

/* ═══════════════════════════════════════════════
   TABLETTE (768px+)
═══════════════════════════════════════════════ */
@media (min-width: 768px) {
  /* Grilles */
  .grid-2 { grid-template-columns: repeat(2,1fr); }
  .grid-3 { grid-template-columns: repeat(3,1fr); }
  .grid-4 { grid-template-columns: repeat(4,1fr); }

  /* Modals — fenêtre centrée */
  .modal        { align-items: center; }
  .modal-dialog { border-radius: 16px; max-width: 90vw; max-height: 90vh; }

  /* Contenu */
  .content-wrapper { padding: var(--spacing-xl); }

  /* Footer */
  .tf-footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    padding: 36px 24px 28px;
  }
  .tf-footer-brand { grid-column: 1 / -1; }
  /* margin-left footer géré dans layout.css */

  /* Notification panel */
  #notif-panel { left: var(--sidebar-w); }
}

/* ═══════════════════════════════════════════════
   DESKTOP (1024px+)
═══════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .content-wrapper { padding: var(--spacing-xl) var(--spacing-2xl); }
  .grid-auto { grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); }
  table { font-size: 13px; }

  /* Footer reprend la sidebar */
  .tf-footer-inner {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 48px;
    padding: 48px 40px 40px;
  }
  .tf-footer-brand { grid-column: auto; }
  /* margin-left footer géré dans layout.css */
}

/* ═══════════════════════════════════════════════
   LARGE (1400px+)
═══════════════════════════════════════════════ */
@media (min-width: 1400px) {
  .grid-auto { grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); }
}

/* ═══════════════════════════════════════════════
   MOBILE (max 767px)
═══════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Sidebar desktop cachée */
  .sidebar { display: none !important; }

  /* Main sans marge sidebar */
  .main-content {
    margin-left: 0 !important;
    width: 100% !important;
    padding-bottom: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom, 0px));
  }

  /* Pas de grilles multi-colonnes */
  .grid-2,
  .grid-3,
  .grid-4,
  .grid-auto { grid-template-columns: 1fr !important; }

  /* Contenu */
  .content-wrapper { padding: var(--spacing-lg) !important; }

  /* Tables scrollables */
  .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { font-size: 12px; min-width: 500px; }

  /* Forms en colonne */
  .form-row { flex-direction: column; }

  /* Footer */
  /* margin-left géré dans layout.css avec media queries */
  .tf-footer-inner {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 28px 20px;
  }
  .tf-footer-bottom {
    flex-direction: column;
    gap: 10px;
    text-align: center;
    padding: 16px 20px;
  }

  /* Notification panel : ancré en haut à gauche */
  #notif-panel {
    left: 8px;
    right: 8px;
    width: auto;
    max-width: 100%;
    top: 56px;
  }

  /* Grilles spécifiques pages */
  .stats-grid,
  .dashboard-grid { grid-template-columns: 1fr !important; gap: 10px !important; }

  /* Feeds */
  .feed-layout   { grid-template-columns: 1fr !important; }
  .feed-sidebar  { display: none; }
  .rooms-layout  { grid-template-columns: 1fr !important; }
  .rooms-list    { max-height: 140px; border-right: none; border-bottom: 1px solid rgba(255,255,255,.08); }
  .chat-area     { height: 420px; }

  /* Pricing */
  .pricing-grid  { grid-template-columns: 1fr !important; }

  /* Académie */
  .course-grid   { grid-template-columns: 1fr !important; }

  /* Journal form : 2 colonnes restent sur mobile */
  .journal-form-grid { grid-template-columns: 1fr 1fr !important; }

  /* Modals : bottom sheet */
  .modal { align-items: flex-end; }
  .modal-box {
    margin: 0;
    border-radius: 16px 16px 0 0;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    max-height: 90vh;
    overflow-y: auto;
  }

  /* PWA banner au-dessus nav mobile */
  #pwa-install-banner { bottom: calc(var(--mobile-nav-h) + 8px) !important; }

  /* Ajustements texte */
  h1 { font-size: 20px; }
  h2 { font-size: 17px; }
}

/* ═══════════════════════════════════════════════
   TABLETTE PORTRAIT (768–1023px)
═══════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1023px) {
  .grid-3 { grid-template-columns: repeat(2,1fr) !important; }
  .grid-4 { grid-template-columns: repeat(2,1fr) !important; }

  /* Sidebar plus étroite */
  .sidebar { width: var(--sidebar-collapsed-w); }
  .main-content {
    margin-left: var(--sidebar-collapsed-w);
    width: calc(100% - var(--sidebar-collapsed-w));
  }
  .tf-footer { margin-left: var(--sidebar-collapsed-w); }  /* layout.css gère aussi */
  #notif-panel { left: var(--sidebar-collapsed-w); }

  /* Masquer les labels nav (icônes seulement) */
  .sidebar .nav-item span { display: none; }
  .sidebar .nav-item { justify-content: center; padding: var(--spacing-md); }
  .sidebar-header a div { display: none; }
  .sidebar .sidebar-footer > div > div:last-child { display: none; }
}

/* ═══════════════════════════════════════════════
   LANDSCAPE MOBILE
═══════════════════════════════════════════════ */
@media (max-height: 500px) and (orientation: landscape) {
  .main-content { padding-bottom: 0; }
  .mobile-nav   { display: none; }
  .sidebar      { display: flex !important; width: var(--sidebar-collapsed-w); }
  .main-content { margin-left: var(--sidebar-collapsed-w) !important; width: calc(100% - var(--sidebar-collapsed-w)) !important; }
}

/* ═══════════════════════════════════════════════
   ACCESSIBILITÉ — mouvement réduit
═══════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}