/* =========================================================
   mobile.css — Optimisations Mobile-First
   Chargé après style.css pour surcharger les règles desktop
   ========================================================= */

/* ----------------------------------------------------------
   1. Images & médias : jamais de dépassement
   ---------------------------------------------------------- */
img,
video,
iframe,
embed,
object,
canvas,
svg {
    max-width: 100%;
    height: auto;
}

/* ----------------------------------------------------------
   2. Tables : scroll horizontal sur petits écrans
   ---------------------------------------------------------- */
.table-responsive-auto table,
.lesson-content table,
.card-body table,
main table {
    width: 100%;
    overflow-x: auto;
    display: block;
    -webkit-overflow-scrolling: touch;
}

/* ----------------------------------------------------------
   3. Blocs de code : scroll horizontal
   ---------------------------------------------------------- */
pre,
.CodeMirror {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    word-wrap: normal;
    white-space: pre;
}

/* ----------------------------------------------------------
   4. Touch targets : minimum 44×44 px (WCAG 2.5.5)
   ---------------------------------------------------------- */
.nav-link,
.btn,
.dropdown-item,
.list-group-item,
.page-link,
.breadcrumb-item a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

a.lesson-nav-link,
a.exercise-link {
    min-height: 44px;
}

/* ----------------------------------------------------------
   5. Désactiver les animations hover sur appareils tactiles
      (évite le "stuck hover" sur mobile)
   ---------------------------------------------------------- */
@media (hover: none) {
    .card:hover {
        transform: none;
    }
    .btn:hover {
        transform: none;
    }
    .chapter-card:hover {
        transform: none;
        box-shadow: 0 4px 6px rgba(0,0,0,0.05) !important;
    }
    .lesson-nav-item.active .lesson-nav-link:hover {
        transform: none;
    }
    .lessons-list li:hover {
        padding-left: 0;
    }
    .lesson-item a:hover {
        padding-left: initial !important;
    }
}

/* ----------------------------------------------------------
   6. Petits écrans (< 576px) — smartphones
   ---------------------------------------------------------- */
@media (max-width: 575.98px) {

    /* Section padding réduit */
    .section {
        padding: 2rem 0;
    }

    /* Bannière d'accueil */
    .bg-primary.py-5,
    .py-5 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    /* Titres */
    .display-4 {
        font-size: 1.75rem;
        line-height: 1.3;
    }

    h1 { font-size: 1.6rem; }
    h2 { font-size: 1.35rem; }
    h3 { font-size: 1.15rem; }

    /* Lead text */
    .lead {
        font-size: 1rem;
    }

    /* Boutons : pleine largeur sur mobile */
    .btn-lg {
        padding: 0.75rem 1rem;
        font-size: 1rem;
        width: 100%;
        justify-content: center;
    }

    /* Cards */
    .card-body {
        padding: 1rem;
    }

    /* Lesson card padding */
    :root {
        --lesson-card-padding: 16px;
        --lesson-card-radius: 10px;
    }

    /* Formulaires */
    .form-control,
    .form-select {
        font-size: 16px; /* Évite le zoom automatique sur iOS */
    }

    /* Navbar brand */
    .navbar-brand {
        font-size: 1rem;
    }

    /* Conteneur principal */
    .container,
    .container-fluid {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    /* Sidebar leçon : passer en dessous du contenu */
    .lesson-sidebar {
        margin-top: 1.5rem;
    }

    /* Dropdown menus dans la nav : pleine largeur */
    .dropdown-card-menu {
        min-width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
    }

    /* Grille d'exercices et sommaire */
    .row.gx-2.gy-2 .col-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Footer */
    .footer {
        text-align: center;
    }
    .footer .row > [class*="col-"] {
        margin-bottom: 1rem;
    }
}

/* ----------------------------------------------------------
   7. Tablettes (576px–991px)
   ---------------------------------------------------------- */
@media (min-width: 576px) and (max-width: 991.98px) {

    .section {
        padding: 2.5rem 0;
    }

    .display-4 {
        font-size: 2rem;
    }

    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.5rem; }

    .card-body {
        padding: 1.25rem;
    }

    /* Formulaires : éviter le zoom iOS */
    .form-control,
    .form-select {
        font-size: 16px;
    }
}

/* ----------------------------------------------------------
   8. Sidebar leçon : responsive
   ---------------------------------------------------------- */
@media (max-width: 991.98px) {
    /* Sidebar passe sous le contenu */
    .lesson-sidebar-col {
        order: 2;
    }
    .lesson-content-col {
        order: 1;
    }

    /* Les box de cours (def/ex/ques/violet) */
    .def, .ex, .ques, .violet {
        padding: 10px;
    }
}

/* ----------------------------------------------------------
   9. Navigation hamburger : s'assurer que le menu collapse
      est scrollable si trop de niveaux
   ---------------------------------------------------------- */
@media (max-width: 991.98px) {
    #mainNavbar.navbar-collapse {
        max-height: 80vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .navbar .dropdown-menu {
        position: static !important;
        box-shadow: none;
        border: none;
        background: transparent;
    }

    .dropdown-card {
        box-shadow: none;
        border: none;
        background: transparent;
    }
}

/* ----------------------------------------------------------
   10. KaTeX formules mathématiques : scroll horizontal
   ---------------------------------------------------------- */
.katex-display {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 0.25rem 0;
}

/* ----------------------------------------------------------
   11. Performance : lazy loading hint CSS (images hors écran)
   ---------------------------------------------------------- */
img[loading="lazy"] {
    content-visibility: auto;
}

/* ----------------------------------------------------------
   12. Barre de recherche mobile dans le modal
   ---------------------------------------------------------- */
#mobileSearchModal .modal-dialog {
    margin: 0.5rem;
}

#mobileSearchModal .modal-body .form-control {
    font-size: 16px; /* Évite le zoom iOS */
}