/* ==========================================================================
   MENSA ACADEMY - FEUILLE GLOBALE D'ADAPTATION MOBILE-FIRST & RESPONSIVE
   ==========================================================================
   Chargée en dernier dans toutes les pages pour garantir une ergonomie
   irréprochable sur tous les écrans : smartphones (320px-480px),
   tablettes (481px-860px), ordinateurs portables et grands écrans.
   ========================================================================== */

/* ── 1. RÈGLES DE BASE ET SÉCURITÉ RESPONSIVE (TOUTES LARGEURS) ──────────── */

/* Empêche tout défilement horizontal parasite sur la page entière */
html, body {
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

/* Médias flexibles qui ne débordent jamais */
img, video, canvas, svg, iframe, object, embed {
  max-width: 100%;
  height: auto;
}

/* Césure des textes longs, URL et codes matricules */
p, li, td, th, dd, dt, span, a, h1, h2, h3, h4, h5, h6, .prose-body {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Tableaux avec conteneur défilable par défaut */
table {
  max-width: 100%;
}

.table-wrap, .table-responsive, .tb-table-wrap, .cc-table-wrap,
.ns-table-wrap, .pv-table-wrap, .mp-hist-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── 2. TABLETTE ET MOYENS ÉCRANS (<= 992px) ────────────────────────────── */
@media (max-width: 992px) {
  /* Grilles à 4 et 3 colonnes passent à 2 colonnes */
  .g-4, .g-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .foot-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 2rem !important; }
  .stats-band { grid-template-columns: repeat(2, 1fr) !important; }
  .vl-grid { grid-template-columns: 1fr !important; }
  .contact-grid { grid-template-columns: 1fr !important; }
  .exam-layout { grid-template-columns: 1fr !important; }
  .recap-side { position: static !important; }
}

/* ── 3. TABLETTE ÉTROITE (<= 860px) ─────────────────────────────────────── */
@media (max-width: 860px) {
  .container {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* Grilles en style en ligne passent à 2 colonnes max */
  [style*="grid-template-columns"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Blocs à 2 colonnes explicites */
  .deux-col, .deux-colonnes, .cols-2, .dash {
    grid-template-columns: 1fr !important;
  }

  /* Les barres d'action et filtres passent à la ligne */
  .ia-actions, .fin-form, .pres-form, .cc-filtres, .ia-recherche,
  .nt-barre, .pv-actions, .ns-actions, .hero-cta, .res-actions,
  .ch-fil, .tabs, .ch-onglets {
    flex-wrap: wrap !important;
  }

  /* Tableaux défilables */
  .tb-table-wrap, .cc-table-wrap, .ns-table-wrap, .pv-table-wrap,
  .mp-hist, table.tb, table.cc, table.ns, table.pv {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ── 4. SMARTPHONE ET MOBILE FIRST (<= 640px) ────────────────────────────── */
@media (max-width: 640px) {
  /* Conteneur et espacements */
  .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .section {
    padding: 3.2rem 0 !important;
  }

  /* Typographie fluide adaptée au pouce */
  h1, .section-title { font-size: clamp(1.4rem, 5.5vw, 1.9rem) !important; line-height: 1.25 !important; }
  h2 { font-size: clamp(1.2rem, 4.5vw, 1.5rem) !important; line-height: 1.3 !important; }
  h3 { font-size: clamp(1.05rem, 3.8vw, 1.25rem) !important; }
  h4 { font-size: 1rem !important; }

  /* Navigation mobile & header */
  .nav-inner {
    height: 68px !important;
    gap: .5rem !important;
  }

  .brand img {
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
  }

  .brand-name {
    font-size: .98rem !important;
    letter-spacing: .2px !important;
  }

  .brand small {
    display: none !important;
  }

  .burger {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    font-size: 1.3rem;
  }

  .theme-toggle {
    width: 38px !important;
    height: 38px !important;
  }

  .bell-btn {
    width: 38px !important;
    height: 38px !important;
  }

  /* Formulaires et champs de saisie (16px pour éviter le zoom iOS) */
  input, select, textarea, .form-field input, .form-field select, .form-field textarea,
  .pres-champ input, .pres-champ select, .fin-form input, .fin-form select, .ffield input,
  .ffield select, .ffield textarea {
    font-size: 16px !important;
    min-height: 44px !important;
    border-radius: 10px !important;
  }

  /* Saisie pleine largeur dans les barres d'action et formulaires */
  .pres-champ, .fin-form input, .fin-form select, .ffield,
  .form-field, .f2 > div, .form-2 > div {
    min-width: 100% !important;
    flex: 1 1 100% !important;
  }

  .f2, .form-2 {
    grid-template-columns: 1fr !important;
  }

  /* Boutons tactiles faciles à cliquer */
  .btn, button[type=submit], .b-valider, .b-verser, .ia-wa {
    min-height: 44px !important;
  }

  .hero-cta .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  .ia-actions form, .ia-actions button, .ia-actions a,
  .rs-actions a, .pv-actions a, .nt-barre a, .nt-barre button {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Cartes et panneaux internes */
  .card, .mp-carte, .ia-carte, .tb-sect, .carte, .cc-compteur,
  .fin-bloc, .pres-bloc, .copie-card, .mc-card, .form-card,
  .exam-card, .ch-tete, .rs-tete, .testi {
    padding: 1.1rem !important;
    border-radius: 14px !important;
  }

  /* Grilles globales passent à 1 colonne */
  .grid, .g-2, .g-3, .g-4, .foot-grid, .stats-band,
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Onglets défilables horizontalement */
  .ia-onglets, .portee-bascule, .ch-onglets, .tabs {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    padding-bottom: 4px !important;
  }

  .ia-onglets a, .portee-bascule a, .ch-onglets a, .tab-btn {
    white-space: nowrap !important;
    flex: 0 0 auto !important;
    padding: .55rem .85rem !important;
    font-size: .84rem !important;
  }

  /* Compteurs financiers et statistiques à 2 colonnes */
  .caisse, .cartes, .cc-compteurs, .mp-montants, .stats-row {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: .6rem !important;
  }

  .c-case, .mp-m, .dstat {
    padding: .8rem .7rem !important;
  }

  .c-case b, .carte b, .cc-compteur b, .mp-m b, .dstat .n {
    font-size: 1.35rem !important;
  }

  /* Tableaux : taille adaptée et cellules compressées */
  table { font-size: .8rem !important; }
  table th, table td { padding: .45rem .35rem !important; }

  /* Éléments sticky transformés en éléments statiques */
  [style*="position:sticky"], .barre-note, .recap-side, .exam-header {
    position: static !important;
  }

  /* Bouton WhatsApp et Retour haut flottants */
  .float-wa {
    width: 50px !important;
    height: 50px !important;
    right: 14px !important;
    bottom: 14px !important;
    font-size: 1.5rem !important;
  }

  .to-top {
    width: 40px !important;
    height: 40px !important;
    right: 16px !important;
    bottom: 72px !important;
    font-size: .9rem !important;
  }

  /* Bannières d'évaluation */
  .eval-banner .container {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: .6rem !important;
  }

  .eval-banner .go {
    margin-left: 0 !important;
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  .eval-banner .close-b {
    position: absolute !important;
    top: .6rem !important;
    right: .8rem !important;
  }
}

/* ── 5. GRILLES PÉDAGOGIQUES À 2 COLONNES SUR MOBILE (V38) ──────────────── */
/* Garde les listes de matières, chapitres et ressources sur 2 colonnes
   pour une vision synthétique et un balayage rapide sans défilement infini. */
@media (max-width: 640px) {
  .matieres-grid, .chap-grille, .ch-grille, .cartes-matieres,
  .liste-evaluations, .evals-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: .6rem !important;
  }

  .matieres-grid > *, .chap-grille > *, .ch-grille > * {
    min-width: 0 !important;
  }

  .matieres-grid, .chap-grille, .ch-grille {
    font-size: .82rem !important;
  }

  .matieres-grid h3, .chap-nom, .ch-titre {
    font-size: .82rem !important;
    line-height: 1.25 !important;
  }

  .matieres-grid small, .chap-nb, .ch-meta {
    font-size: .69rem !important;
  }

  .pleine-largeur, .ch-vide, .chap-note {
    grid-column: 1 / -1 !important;
  }
}

/* ── 6. TRÈS PETITS SMARTPHONES (<= 380px) ───────────────────────────────── */
@media (max-width: 380px) {
  .container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .brand-name {
    font-size: .88rem !important;
  }

  .brand img {
    width: 38px !important;
    height: 38px !important;
  }

  /* Compteurs passent à 1 colonne sur les écrans extrêmement étroits */
  .caisse, .cartes, .cc-compteurs, .mp-montants, .stats-row {
    grid-template-columns: 1fr !important;
  }

  .matieres-grid, .chap-grille, .ch-grille {
    grid-template-columns: repeat(2, 1fr) !important;
    font-size: .76rem !important;
    gap: .45rem !important;
  }

  .ch-res, .chap-carte {
    padding: .65rem .55rem !important;
  }
}

/* ── 7. STYLES D'IMPRESSION PROPRES ──────────────────────────────────────── */
@media print {
  .nav, .menu-burger, .voile-menu, .side, footer,
  .float-wa, .to-top, .theme-toggle, .bell-wrap, .burger,
  .ia-actions, .fin-form, .pres-bloc, .pv-actions, .eval-banner {
    display: none !important;
  }

  body {
    background: #fff !important;
    color: #000 !important;
  }

  .mp-carte, .ia-carte, .card, .exam-card {
    break-inside: avoid !important;
    border: 1px solid #ddd !important;
    box-shadow: none !important;
  }
}