/* ============================================
   FRANCOPHONE ACADEMY — RESPONSIVE OVERRIDES
   Charge en DERNIER (apres pages.css).
   Breakpoints :
   - Tablette  : max-width 1024px
   - Telephone : max-width 768px
   - Petit tel : max-width 480px
   Regles d'or mobiles :
   - Cibles tactiles >= 44px
   - Inputs en 16px (empeche le zoom auto iOS)
   - Tableaux scrollables horizontalement
   ============================================ */

/* ============================================
   TABLETTE (<= 1024px)
   ============================================ */
@media (max-width: 1024px) {
  .container { padding-left: var(--space-5); padding-right: var(--space-5); }

  /* Hero accueil : moins d'espace vertical */
  .hero { padding: calc(var(--header-height) + var(--space-10)) 0 var(--space-10); }

  /* Dashboard : padding reduit */
  .dashboard-main { padding: var(--space-6); }

  /* Grilles formulaires admin/teacher */
  .mgmt-form-grid { grid-template-columns: repeat(2, 1fr); }

  /* Tables : scroll fluide tactile */
  .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table { min-width: 640px; }

  /* Onglets admin : scroll horizontal si besoin */
  .admin-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
  .admin-tab { flex-shrink: 0; }
}

/* ============================================
   TELEPHONE (<= 768px)
   ============================================ */
@media (max-width: 768px) {

  /* ---------- Global ---------- */
  body { font-size: var(--text-sm); }
  .container { padding-left: var(--space-4); padding-right: var(--space-4); }

  /* Cibles tactiles confortables */
  .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .sidebar-link { min-height: 44px; }
  .main-nav a { min-height: 44px; display: flex; align-items: center; }

  /* Anti-zoom iOS sur les champs */
  .form-input, .form-select, .form-textarea, input, select, textarea { font-size: 16px; }

  /* ---------- Header ---------- */
  .logo-text { font-size: var(--text-base); }
  .header-actions .btn { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); min-height: 40px; }
  .main-nav a.nav-trial { text-align: center; justify-content: center; }

  /* ---------- Hero accueil ---------- */
  .hero { padding: calc(var(--header-height) + var(--space-8)) 0 var(--space-8); }
  .hero h1 { font-size: clamp(1.9rem, 7vw, 2.6rem); line-height: 1.15; }
  .hero-subtitle { font-size: var(--text-base); margin-bottom: var(--space-6); }
  .hero-actions { flex-direction: column; width: 100%; }
  .hero-actions .btn { width: 100%; }
  .hero-proof { flex-wrap: wrap; }
  .avatar-caption { font-size: var(--text-sm); padding: var(--space-4); }

  /* ---------- Sections & titres ---------- */
  .section-header h2 { font-size: var(--text-2xl); }
  .section-header p { font-size: var(--text-base); }

  /* ---------- Dashboard ---------- */
  .dashboard-main { padding: var(--space-4); }
  .dashboard-header h1 { font-size: var(--text-2xl); }
  .dashboard-stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
  .stat-card { padding: var(--space-4); }
  .stat-value { font-size: var(--text-2xl); }

  /* Sidebar horizontale : grosses cibles */
  .sidebar-nav { gap: var(--space-1); }
  .sidebar-link { font-size: var(--text-xs); padding: var(--space-2) var(--space-3); }

  /* ---------- Tableaux ---------- */
  .table-wrapper { border-radius: var(--radius-md); }
  .table { min-width: 600px; font-size: var(--text-xs); }
  .table td, .table th { padding: var(--space-3); }
  .row-actions .btn { min-height: 36px; }

  /* ---------- Modal plein ecran confortable ---------- */
  .modal-overlay { padding: var(--space-3); }
  .modal-card { width: 100%; max-width: 100%; max-height: 90vh; overflow-y: auto; padding: var(--space-5); }
  .modal-actions { flex-direction: column-reverse; }
  .modal-actions .btn { width: 100%; }

  /* ---------- Formulaires admin / teacher ---------- */
  .mgmt-form { padding: var(--space-4); }
  .mgmt-form-grid { grid-template-columns: 1fr; }
  .mgmt-form-actions { flex-direction: column-reverse; }
  .mgmt-form-actions .btn { width: 100%; }
  .admin-tabs { gap: var(--space-1); }
  .admin-tab { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); min-height: 40px; }

  /* ---------- Free Trial ---------- */
  .trial-hero { padding: calc(var(--header-height) + var(--space-8)) 0 var(--space-8); }
  .trial-hero h1 { font-size: clamp(1.8rem, 7vw, 2.4rem); }
  .trial-includes { grid-template-columns: 1fr; }
  .trial-lesson { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .trial-lesson .btn { width: 100%; }
  .trial-player-card { padding: var(--space-4); }
  .trial-video-head { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .trial-promo-player { border-width: 1px; }

  /* ---------- Lecons (contenu riche) ---------- */
  .lesson-content { font-size: var(--text-sm); }
  .lc-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; font-size: var(--text-xs); }
  .lc-dialogue, .lc-tip, .lc-practice, .lc-recap, .lc-intro { padding: var(--space-3); font-size: var(--text-sm); }
  .lesson-player { padding: var(--space-4); }

  /* ---------- Cours ---------- */
  .course-card-body { padding: var(--space-4); }
  .lesson-row { flex-wrap: wrap; }
  .lesson-row .btn { width: 100%; margin-top: var(--space-2); }

  /* ---------- Quiz ---------- */
  .quiz-take-card { padding: var(--space-4); }
  .quiz-option { min-height: 48px; }

  /* ---------- Checkout / Pricing ---------- */
  .checkout-summary { padding: var(--space-4); }
  .pricing-card { padding: var(--space-5); }

  /* ---------- Auth (login/register) ---------- */
  .auth-card { padding: var(--space-6) var(--space-4); margin: var(--space-4) auto; }

  /* ---------- Toasts : pleine largeur en bas ---------- */
  #toast-container { left: var(--space-3); right: var(--space-3); bottom: var(--space-3); }
  .toast { width: 100%; }

  /* ---------- Footer ---------- */
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* ============================================
   PETIT TELEPHONE (<= 480px)
   ============================================ */
@media (max-width: 480px) {

  /* Header ultra-compact */
  .logo-text { display: none; }           /* garde le bloc FA seul */
  .header-actions .btn { padding: var(--space-2) var(--space-3); font-size: 11px; }

  /* Stats dashboard : 1 colonne */
  .dashboard-stats-grid { grid-template-columns: 1fr; }

  /* Hero : preuves sociales empilees */
  .hero-proof { font-size: var(--text-xs); }

  /* Grille quiz : 1 colonne */
  .quiz-levels-grid { grid-template-columns: 1fr; }

  /* Tableaux encore plus compacts */
  .table { min-width: 540px; }

  /* Formulaires : boutons empiles deja geres, espacements reduits */
  .mgmt-form { padding: var(--space-3); }

  /* Attendee rows */
  .attendee-row { flex-direction: column; align-items: flex-start; gap: 2px; }
}

/* ============================================
   MODE PWA INSTALLE (standalone)
   Petits ajustements quand lance comme une app
   ============================================ */
@media (display-mode: standalone) {
  /* Safe area iPhone (encoche + barre home) */
  #site-header { padding-top: env(safe-area-inset-top); height: calc(var(--header-height) + env(safe-area-inset-top)); }
  body { padding-bottom: env(safe-area-inset-bottom); }
  #toast-container { bottom: calc(var(--space-3) + env(safe-area-inset-bottom)); }
}