/**
 * DCA Mobile Fix — corrections universelles pour smartphone
 *
 * Charge ce CSS APRÈS les autres feuilles de style pour qu'il prenne
 * le pas sur les valeurs par défaut. Couvre :
 *
 *   1. Tables responsive (scroll horizontal au lieu de débordement)
 *   2. Inputs ≥16px (anti-zoom iOS automatique)
 *   3. Touch targets ≥44px (recommandation Apple/Google)
 *   4. Word-break sur liens longs / emails
 *   5. Images max-width:100%
 *   6. Anti-débordement horizontal du body
 *   7. Mobile menu hamburger pour les nav qui débordent
 */

/* ============================================================
   1. ANTI-DÉBORDEMENT GLOBAL
   ============================================================ */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

img, video, iframe {
  max-width: 100%;
  height: auto;
}

pre, code {
  word-wrap: break-word;
  overflow-x: auto;
}

/* ============================================================
   2. TABLES RESPONSIVE — wrap automatique
   ============================================================
   Toute table devient scrollable horizontalement sur mobile au lieu
   de casser la mise en page. Pour table dans un container existant
   avec overflow:hidden, ajouter aussi overflow-x:auto au container. */

table {
  max-width: 100%;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
}

/* Sur desktop, retour au comportement classique */
@media (min-width: 768px) {
  table {
    display: table;
    white-space: normal;
    overflow-x: visible;
  }
}

/* Pour les tables qu'on veut garder en bloc avec wrap : leur ajouter
   classe .table-wrap-keep ou parent .lesson-table-wrapper */
.lesson-table-wrapper, .table-wrap-keep {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 16px 0;
}
.lesson-table-wrapper table, .table-wrap-keep table {
  min-width: 100%;
  white-space: normal;
}

/* ============================================================
   3. INPUTS ≥ 16px — empêche le zoom auto iOS
   ============================================================ */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  input[type="url"],
  input[type="date"],
  input[type="time"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* ============================================================
   4. TOUCH TARGETS ≥ 44px (iOS guideline)
   ============================================================ */
@media (max-width: 768px) {
  button,
  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-buy-top,
  .btn-mod-nav,
  a.btn,
  a.cta,
  .nav-cta,
  input[type="submit"],
  input[type="button"] {
    min-height: 44px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  /* Liens dans nav avec icône-only */
  nav a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ============================================================
   5. WORD-BREAK pour emails / URLs longs
   ============================================================ */
.link-box,
.email-template,
.dca-tldr p,
.faq-item p,
.callout p {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Liens cliquables dans le contenu : pas de break (sinon 1 mot par ligne) */
a {
  word-wrap: break-word;
}

/* ============================================================
   6. HERO / TYPO LISIBLE SUR MOBILE
   ============================================================ */
@media (max-width: 480px) {
  /* H1 trop grand sur petit écran */
  h1 {
    font-size: clamp(28px, 8vw, 48px) !important;
    line-height: 1.1;
    word-wrap: break-word;
  }

  /* Hero sub-headline */
  .hero-sub, .hero p, .lead {
    font-size: clamp(15px, 4vw, 20px) !important;
  }

  /* Padding hero plus serré */
  .hero {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Stats hero en colonne au lieu de row qui déborde */
  .hero .stats,
  .hero-points {
    flex-direction: column;
    gap: 14px !important;
  }
}

/* ============================================================
   7. GRIDS RESPONSIVE — fallback pour grids non breakpointés
   ============================================================ */
@media (max-width: 640px) {
  /* Tout grid avec 3+ colonnes passe en 1 colonne */
  .three-cards,
  .stats-grid,
  .pour-qui-grid,
  .bonus-grid,
  .formation-grid,
  .grid {
    grid-template-columns: 1fr !important;
  }

  /* Workflow steps en colonne */
  .workflow-steps,
  .sim-grid,
  .lbo-sim-grid,
  .inv-sim-grid,
  .bud-sim-grid,
  .tjm-sim-grid,
  .evs-sim-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   8. TOPBAR / NAV qui déborde
   ============================================================ */
@media (max-width: 720px) {
  .topbar, .topnav, .admin-header {
    flex-wrap: wrap;
    padding-left: 16px !important;
    padding-right: 16px !important;
    gap: 12px;
  }

  /* Nav links en wrap au lieu de row qui déborde */
  .topnav,
  nav.topnav,
  .nav-links,
  .links {
    flex-wrap: wrap;
    gap: 8px !important;
  }

  /* Cache le sub-titre du logo si trop d'espace */
  .logo-sub, .admin-header .subtitle {
    display: none;
  }
}

/* ============================================================
   9. CARDS/SECTIONS — padding mobile
   ============================================================ */
@media (max-width: 480px) {
  .card,
  .sim-panel,
  .module-card,
  .formation-card,
  section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Section header */
  .section, .section-cat {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ============================================================
   10. POPUP EMAIL CAPTURE — taille mobile
   ============================================================ */
@media (max-width: 480px) {
  .dca-popup {
    padding: 28px 22px !important;
    max-width: calc(100vw - 24px) !important;
  }
  .dca-popup h2 {
    font-size: 22px !important;
  }
}

/* ============================================================
   11. DEBUG PANEL — moins envahissant sur mobile
   ============================================================ */
@media (max-width: 480px) {
  .dca-debug-panel {
    width: calc(100vw - 24px) !important;
    bottom: 12px !important;
    right: 12px !important;
    left: 12px !important;
    max-height: 50vh !important;
  }
}

/* ============================================================
   12. SIDEBAR COURS — collapse mobile
   ============================================================ */
@media (max-width: 1024px) {
  /* Layout cours qui passe de sidebar+main à colonne unique */
  .container[class*="cours"],
  body[class*="cours"] .container {
    display: block !important;
  }

  /* Sidebar devient horizontale en haut */
  .sidebar {
    position: relative !important;
    height: auto !important;
    width: 100% !important;
    overflow-y: visible !important;
  }

  .sidebar-nav {
    flex-direction: row !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
  }

  .sidebar-nav a {
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* ============================================================
   13. TLDR / CALLOUTS — break dans flex
   ============================================================ */
@media (max-width: 480px) {
  .dca-tldr {
    flex-direction: column !important;
  }
  .dca-tldr > div {
    flex-direction: column !important;
    gap: 8px !important;
  }
}

/* ============================================================
   14. MAIN / ARTICLE PADDING
   ============================================================ */
@media (max-width: 640px) {
  main, article, .main, .article {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ============================================================
   15. QUIZ — boutons plus compacts sur mobile
   ============================================================ */
@media (max-width: 640px) {
  .quiz-submit,
  .quiz-section button,
  button[onclick*="submitQuiz"] {
    padding: 11px 18px !important;
    font-size: 13px !important;
    width: 100%;
    margin-top: 6px;
  }
  .quiz-section {
    padding: 20px 18px !important;
    margin: 24px 0 !important;
  }
  .quiz-q {
    padding: 14px 16px !important;
    margin-bottom: 10px !important;
  }
  .quiz-q label {
    padding: 10px 12px !important;
    font-size: 13.5px !important;
    line-height: 1.4 !important;
  }
}

/* ============================================================
   16. BOUTONS RÉSULTAT ADMIN — fermer compact mobile
   ============================================================ */
@media (max-width: 640px) {
  .result button,
  .btn-secondary {
    padding: 9px 14px !important;
    font-size: 12px !important;
    min-height: 36px;
  }
  .btn-mail {
    padding: 10px 14px !important;
    font-size: 12px !important;
    flex: 1;
    min-width: 0;
    text-align: center;
  }
  .link-box {
    font-size: 11px !important;
    padding: 10px 12px !important;
  }
}

/* ============================================================
   17. DEBUG PANEL — encore plus compact
   ============================================================ */
@media (max-width: 640px) {
  .dca-debug-panel {
    width: calc(100vw - 16px) !important;
    bottom: 8px !important;
    right: 8px !important;
    left: 8px !important;
    max-height: 40vh !important;
    border-radius: 10px !important;
  }
  .dca-debug-header {
    padding: 8px 12px !important;
  }
  .dca-debug-header strong { font-size: 11px !important; }
  .dca-debug-toggle {
    width: 20px !important;
    height: 20px !important;
    font-size: 12px !important;
  }
}