/* ===================================
   OPTIMISATION MOBILE
   Réduit les espaces inutiles sur téléphone
   =================================== */

/* Fix global pour tous les layouts MDK */
@media (max-width: 768px) {
    .mdk-drawer-layout,
    .mdk-header-layout,
    .mdk-drawer-layout__content,
    .mdk-header-layout__content {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Réduire le padding sur les petits écrans */
@media (max-width: 768px) {
    /* Forcer le padding à 0 pour .page (layout principal) */
    .page {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Réduire le padding du container principal */
    .container-fluid,
    .page__container {
        padding-left: 0.5rem !important;  /* 8px au lieu de 20px */
        padding-right: 0.5rem !important;
    }
    
    /* Réduire le padding des colonnes */
    .row {
        margin-left: -0.5rem !important;
        margin-right: -0.5rem !important;
    }
    
    [class*="col-"] {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    /* Card avec moins de padding */
    .card {
        margin-bottom: 0.75rem !important;
    }
    
    .card-body {
        padding: 1rem !important;
    }
    
    .card-header,
    .card-footer {
        padding: 0.875rem 1rem !important;
    }
}

/* Très petits écrans (téléphones en portrait) */
@media (max-width: 576px) {
    /* Forcer le padding à 0 pour .page (layout principal) */
    .page {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    
    /* Minimiser les marges extérieures */
    .container-fluid,
    .page__container {
        padding-left: 0.25rem !important;  /* 4px seulement */
        padding-right: 0.25rem !important;
    }
    
    /* Réduire davantage l'espacement des colonnes */
    .row {
        margin-left: -0.25rem !important;
        margin-right: -0.25rem !important;
    }
    
    [class*="col-"] {
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }
    
    /* Optimiser la vidéo pour mobile */
    .col-md-8 {
        padding-left: 0.375rem !important;
        padding-right: 0.375rem !important;
    }
    
    .col-md-4 {
        padding-left: 0.375rem !important;
        padding-right: 0.375rem !important;
    }
    
    /* Page de cours - utiliser toute la largeur */
    .mes-cours-page,
    .course-page-container {
        padding: 1rem 0.5rem !important;
    }
    
    /* Navigation des leçons - plus compact */
    .lesson-navigation-footer {
        padding: 1rem 0.75rem !important;
    }
    
    .lesson-navigation-buttons {
        gap: 0.5rem !important;
    }
    
    /* Buttons plus compacts */
    .lesson-nav-btn,
    .lesson-mark-btn {
        padding: 0.625rem 1rem !important;
        font-size: 0.85rem !important;
    }
    
    /* Module links plus compacts */
    .module-links-container {
        gap: 0.5rem !important;
        padding: 0 !important;
    }
    
    .module-link-btn {
        padding: 0.625rem 1.25rem !important;
        font-size: 0.875rem !important;
    }
    
    /* Liste des cours - cards horizontales optimisées */
    .course-list .card,
    .card-columns .card {
        padding: 0.875rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    /* Media dans les cards */
    .card .media {
        gap: 0.75rem !important;
    }
    
    /* Course icon plus petit */
    .course-icon,
    .media-left .material-symbols-outlined {
        width: 45px !important;
        height: 45px !important;
        font-size: 28px !important;
    }
    
    /* Titres plus compacts */
    .page-header {
        margin-bottom: 1.25rem !important;
    }
    
    .page-title {
        font-size: 1.5rem !important;
        margin-bottom: 0.25rem !important;
    }
    
    .page-subtitle {
        font-size: 0.875rem !important;
    }
}

/* Écrans très étroits (< 360px) */
@media (max-width: 360px) {
    /* Padding à 0 pour .page */
    .page {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .container-fluid,
    .page__container {
        padding-left: 0.125rem !important;  /* 2px seulement */
        padding-right: 0.125rem !important;
    }
    
    .row {
        margin-left: -0.125rem !important;
        margin-right: -0.125rem !important;
    }
    
    [class*="col-"] {
        padding-left: 0.125rem !important;
        padding-right: 0.125rem !important;
    }
    
    .card-body {
        padding: 0.75rem !important;
    }
    
    .card-header,
    .card-footer {
        padding: 0.625rem 0.75rem !important;
    }
}

/* Fix spécifique pour la page des leçons */
@media (max-width: 576px) {
    /* S'assurer que le contenu prend toute la largeur disponible */
    .mdk-header-layout__content,
    .mdk-drawer-layout__content {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Breadcrumb plus compact */
    .breadcrumb {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.8125rem !important;
    }
    
    /* Instructor card plus compact */
    .card-instructor-modern .card-header,
    .card-instructor-modern .card-body {
        padding: 1rem !important;
    }
    
    /* Course info card plus compact */
    .course-info-card .card-header {
        padding: 0.875rem 1rem !important;
    }
    
    .course-info-item {
        padding: 0.875rem 1rem !important;
    }
    
    /* Documents card plus compact */
    .documents-card .documents-header {
        padding: 0.875rem 1rem !important;
    }
    
    .documents-item {
        padding: 0.875rem 1rem !important;
    }
}

/* Optimisation pour la colonne de droite (sidebar leçons) */
@media (max-width: 991px) {
    .col-md-4 {
        margin-top: 1rem;
    }
}

/* Assurer que le contenu vidéo est responsive */
@media (max-width: 576px) {
    .embed-responsive {
        margin-left: -0.375rem;
        margin-right: -0.375rem;
        width: calc(100% + 0.75rem);
        border-radius: 0 !important;
    }
    
    .embed-responsive-16by9::before {
        padding-top: 56.25%;
    }
}