/* -----------------------------
   Learnpress setup
------------------------------*/

/*++++++++++++++++++++++++++++*/
/* A- setup pour toutes pages */
/*++++++++++++++++++++++++++++*/
/* ==============================
   1. Mise en forme du progrès pour un module (fonctionne sur les pages cours et lesson)
============================== */

/* Met en vert la bulle de nombre si toute la section est complétée */
.section-count-items.all-completed {
    background-color: #3bb54a;
    color: #fff;
    border-radius: 4px;
    padding: 2px 6px;
}

/* Met en vert pale la bulle de nombre si la section est partiellement complétée */
/* !!! la partie JS reste à faire !!! */
.section-count-items.partially-completed {
    background-color: #aae1b0;
    border-radius: 4px;
    padding: 2px 6px;
}

/* ==============================
   2. Mise en forme du statut de la leçon (fonctionne sur les pages cours et lesson)
============================== */
/* Leçon en cours */
.course-item-ico.in-progress::before {
    color: #f0f0f0 !important;
}

.course-item-ico::before {
    font-weight: bold !important;
}

/* ==============================
   3. formattage du module
============================== */
body.single-lp_course .course-section-header {
    background-color: #ededed !important;
}

/* ==============================
   4. Éléments masqués si non connecté 
============================== */
/* Cacher le curriculum si pas connecté ou pas enrôlé */
body:not(.logged-in) .lp-course-curriculum {
    display: none;
}

/* ===================================================================
   4. Éléments masqués en tout temps : Menus, section Formateur, metas
=================================================================== */
/* sur les pages cours et leçon (body.single-lp_course) */
body.single-lp_course .lp-section-instructor,
body.single-lp_course .info-metas,
body.single-lp_course .lp-instructor-meta,
body.single-lp_course .course-item-price,
body.single-lp_course .social-swapper,
body.single-lp_course #main-header,
body.single-lp_course #top-header {
    display: none;
}

body.single-lp_course .enroll-course {
    display: none;
    //visibility: hidden;
}

body.single-lp_course #page-container {
    padding-top: 0;
}



/*+++++++++++++++++++++++++++++++++++++*/
/* B - setup au niveau leçon           */
/*+++++++++++++++++++++++++++++++++++++*/
/*Structure de base d'une leçon
.course-item-lp_lesson | #page-container | #top-header, #main-header, #et-main-area | 
#et-main-area | .lp-archive-courses,  #main-footer (masqué)|.learn-press-breadcrumb (masqué), #popup-course .course-summary |#popup-header, #popup-sidebar, #popup-content, #popup-footer
#popup-header | #sidebar-toggle .popup-header__inner can-finish-course .back-course
#popup-sidebar | .search-course, .lp-course-curriculum | ... .course-curriculum
.lp-course-curriculum (structure assez complexe, le titre est masqué)
#popup-content | #learn-press-content-item | .content-item-scrollable | .content-item-wrap | .content-item-summary | .course-item-title lesson-title, .content-item-description lesson description
*/

/* ==============================
   1. Largeur du contenu LearnPress
============================== */
body.course-item-lp_lesson #learn-press-content-item,
body.course-item-lp_lesson .content-item-description {
    max-width: 1080px !important;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

body.course-item-lp_lesson .content-item-wrap {
    max-width: 1040px !important;
    width: 100% !important;
}

/* ==============================
   2. Sidebar, footer et header LearnPress 
============================== */
/* !!! ce réglage empêche de faire disparaitre la sidebar avec le toggle  !!! */
body.course-item-lp_lesson #popup-sidebar {
    flex: 0 0 350px !important;
    /* largeur fixe sidebar */
}

body.course-item-lp_lesson #popup-sidebar .course-curriculum {
    width: 350px !important;
    /* évite le troncature du texte */
}

body.course-item-lp_lesson #popup-footer {
    left: 350px !important;
    /* aligné avec la sidebar */
}

body.course-item-lp_lesson #popup-header {
    left: 350px !important;
    /* aligné avec la sidebar */
}

/* ==============================
   3. couleur des boutons
============================== */
/* !!! voir si on ne devrait pas généraliser !!! */

#popup-content .lp-button {
    background-color: var(--lp-primary-color);
    color: white;
}

#popup-content .lp-button:hover {
    background-color: var(--lp-secondary-color);
}

/*+++++++++++++++++++++++++++++++++++++*/
/* C - setup au niveau cours seulement */
/*+++++++++++++++++++++++++++++++++++++*/

/* sélecteur pour la page de cours body.single-lp_course:not(.course-item-popup) */

/* ==============================
   1. Formattage de l'en-tête
============================== */

body.single-lp_course:not(.course-item-popup) .lp-single-course__header {
    background-color: #e0e0e0;
    /* gris légèrement plus foncé */
}

body.single-lp_course:not(.course-item-popup) .lp-single-course__header .course-instructor-category {
    margin-bottom: 20px !important;
}

body.single-lp_course:not(.course-item-popup) .lp-single-course__header__inner {
    padding-top: 30px;
    padding-bottom: 30px;
}

/* ==============================
   2. Placement de la section droite avec l'image du cours (chevauche le header)
============================== */

@media (min-width: 992px) {
    body.single-lp_course:not(.course-item-popup) .lp-single-course .lp-single-course-main__right {
        margin-top: -240px !important;
    }
}

/* ==============================
   3. mise en forme des sections du curriculum
============================== */

.course-section-info {
    display: flex;
    align-items: center;
    /* centre verticalement */
    justify-content: space-between;
    /* espace entre les 2 */
    gap: 20px;
    /* petit espace entre texte et image */
}

/* Inverser l'ordre : image avant le titre */
.course-section__description {
    order: -1;
    /* met l'image avant le texte */
}

/* diminuer le padding du header*/
.lp-course-curriculum .course-section .course-section-header {
    padding: 15px;
}


/* FIN DE LA SECTION REVISEE */


/* ==============================
   101. Responsive (tablette & mobile)
============================== */
@media (max-width: 992px) {
    #learn-press-course-curriculum {
        display: none !important;
    }

    #learn-press-content-item .content-item-wrap {
        margin-left: 0 !important;
    }

    body.single-lp_course #learn-press-content-item,
    body.single-lp_lesson #learn-press-content-item,
    body.single-lp_course .content-item-description,
    body.single-lp_lesson .content-item-description,
    body.single-lp_course .lp-content-area,
    body.single-lp_lesson .lp-content-area {
        max-width: 100% !important;
        padding: 0 15px !important;
    }
}

@media (max-width: 576px) {

    body.single-lp_course h1.course-item-title,
    body.single-lp_lesson h1.course-item-title {
        font-size: 1.5rem;
        text-align: center;
        margin-bottom: 20px;
    }

    body.single-lp_course .content-item-description,
    body.single-lp_lesson .content-item-description {
        font-size: 1rem;
        line-height: 1.6;
    }

    body.single-lp_course .content-item-description iframe,
    body.single-lp_lesson .content-item-description iframe {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16/9;
    }

    .learnpress .lp-button {
        display: block;
        width: 100% !important;
        text-align: center;
        padding: 14px 20px;
        margin-bottom: 10px;
    }
}