/*
=========================================================
LABOCOMPTA — MODULE1.CSS
Page : Module 1 — Les fondamentaux de l'entrepreneuriat

Design :
- Moderne
- Épuré
- Pédagogique
- Bleu LaboCompta
- Jaune abriko
- Responsive
=========================================================
*/


/* =====================================================
   1. HERO — MODULE
===================================================== */

.module-hero {

    padding: 90px 20px 80px;

    background:
        linear-gradient(
            135deg,
            #0a2a5e,
            #0f3f8c
        );

    color: #ffffff;

    text-align: center;

}


.module-hero-content {

    max-width: 900px;

    margin: 0 auto;

}


.module-badge {

    display: inline-block;

    margin-bottom: 18px;

    padding: 8px 18px;

    border:
        1px solid
        rgba(255, 255, 255, 0.40);

    border-radius: 30px;

    color: #ffffff;

    font-size: 0.88rem;

    font-weight: 600;

    letter-spacing: 0.04em;

}


.module-number {

    display: block;

    margin-bottom: 15px;

    color: #f4a261;

    font-size: 0.95rem;

    font-weight: 800;

    letter-spacing: 0.14em;

}



/* =====================================================
   H1 — TITRE PRINCIPAL
===================================================== */

.module-hero h1 {

    max-width: 780px;

    margin: 0 auto 25px;

    color: #ffffff;

    font-size:
        clamp(
            1.75rem,
            3.5vw,
            2.7rem
        );

    font-weight: 800;

    line-height: 1.2;

}


.module-intro {

    max-width: 760px;

    margin: 0 auto 30px;

    color:
        rgba(255, 255, 255, 0.92);

    font-size: 1.08rem;

    line-height: 1.75;

    text-align: left;

}


.module-meta {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

}


.module-meta span {

    display: inline-flex;

    align-items: center;

    padding: 9px 15px;

    border:
        1px solid
        rgba(255, 255, 255, 0.18);

    border-radius: 30px;

    background:
        rgba(255, 255, 255, 0.10);

    color: #ffffff;

    font-size: 0.90rem;

}



/* =====================================================
   2. SECTION — CE QUE VOUS ALLEZ APPRENDRE
===================================================== */

.module-objective {

    padding: 90px 20px;

    background: #ffffff;

}


.objective-heading {

    max-width: 760px;

    margin: 0 auto 45px;

    text-align: center;

}


.objective-heading .section-badge {

    margin-bottom: 16px;

}


.objective-heading h2 {

    width: 100%;

    margin: 0 auto 16px;

    color: #0a2a5e;

    font-size:
        clamp(
            2rem,
            4vw,
            2.7rem
        );

    font-weight: 800;

    line-height: 1.2;

    text-align: center;

}


.objective-heading p {

    max-width: 650px;

    margin: 0 auto;

    color: #5f6f82;

    font-size: 1.03rem;

    line-height: 1.7;

    text-align: left;

}



/* =====================================================
   3. SECTION BADGE
===================================================== */

.section-badge {

    display: inline-block;

    padding: 7px 16px;

    border: 1px solid #f8d5bb;

    border-radius: 30px;

    background: #fff1e6;

    color: #c96f32;

    font-size: 0.82rem;

    font-weight: 800;

    letter-spacing: 0.05em;

}



/* =====================================================
   4. OBJECTIF — CARD PRINCIPALE
===================================================== */

.objective-card {

    position: relative;

    display: grid;

    grid-template-columns: 90px 1fr;

    gap: 30px;

    max-width: 950px;

    margin: 0 auto;

    padding: 42px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #f8fbff,
            #ffffff
        );

    border: 1px solid #e5ebf3;

    border-radius: 20px;

    box-shadow:
        0 15px 45px
        rgba(10, 42, 94, 0.08);

}


/* -----------------------------------------------------
   Barre abriko
----------------------------------------------------- */

.objective-card::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 5px;
    height: 100%;

    background: #f4a261;

}



/* =====================================================
   5. NUMÉRO DÉCORATIF
===================================================== */

.objective-watermark {

    position: absolute;

    right: 25px;

    bottom: -38px;

    color:
        rgba(10, 42, 94, 0.035);

    font-size: 11rem;

    font-weight: 900;

    line-height: 1;

    pointer-events: none;

    user-select: none;

}



/* =====================================================
   6. ICÔNE OBJECTIF
===================================================== */

.objective-icon {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 75px;
    height: 75px;

    border:
        1px solid
        #f8d5bb;

    border-radius: 18px;

    background: #fff1e6;

    box-shadow:
        0 8px 20px
        rgba(244, 162, 97, 0.15);

}


.objective-icon span {

    font-size: 1.8rem;

    line-height: 1;

}



/* =====================================================
   7. CONTENU OBJECTIF
===================================================== */

.objective-content {

    position: relative;

    z-index: 2;

}


.objective-label {

    display: inline-block;

    margin-bottom: 10px;

    color: #c96f32;

    font-size: 0.76rem;

    font-weight: 800;

    letter-spacing: 0.13em;

}


.objective-content h3 {

    max-width: 650px;

    margin: 0 0 15px;

    color: #0a2a5e;

    font-size: 1.55rem;

    font-weight: 800;

    line-height: 1.35;

}


.objective-content > p {

    max-width: 720px;

    margin: 0 0 25px;

    color: #536477;

    font-size: 1rem;

    line-height: 1.75;

    text-align: left;

}



/* =====================================================
   8. POINTS CLÉS
===================================================== */

.objective-points {

    display: flex;

    flex-wrap: wrap;

    gap: 12px 25px;

}


.objective-point {

    display: flex;

    align-items: center;

    gap: 9px;

    color: #26384d;

    font-size: 0.91rem;

    font-weight: 600;

}


.point-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 23px;
    height: 23px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #0a2a5e;

    color: #ffffff;

    font-size: 0.70rem;

    font-weight: 800;

}



/* =====================================================
   9. SECTION — LES LEÇONS
===================================================== */

.module-lessons {

    padding: 85px 20px;

    background: #f7f9fc;

}


.module-section-header {

    display: flex;

    flex-direction: column;

    align-items: center;

    max-width: 850px;

    margin: 0 auto 45px;

    text-align: center;

}


.module-section-header .section-badge {

    display: inline-block;

    margin: 0 auto 12px;

}


.module-section-header h2 {

    width: 100%;

    margin: 0 auto 16px;

    color: #0a2a5e;

    font-size:
        clamp(
            1.85rem,
            4vw,
            2.5rem
        );

    font-weight: 800;

    line-height: 1.25;

    text-align: center;

}


.module-section-header p {

    width: 100%;

    max-width: 750px;

    margin: 0 auto;

    color: #5f6f82;

    font-size: 1rem;

    line-height: 1.7;

    text-align: left;

}



/* =====================================================
   10. LESSON CARDS
===================================================== */

.lesson-card {

    display: grid;

    grid-template-columns:
        80px 1fr auto;

    align-items: center;

    gap: 28px;

    max-width: 1000px;

    margin: 0 auto 20px;

    padding: 28px;

    background: #ffffff;

    border:
        1px solid
        #e5ebf3;

    border-left:
        5px solid
        #f4a261;

    border-radius: 14px;

    box-shadow:
        0 7px 22px
        rgba(10, 42, 94, 0.05);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;

}


.lesson-card:hover {

    transform: translateY(-3px);

    box-shadow:
        0 12px 28px
        rgba(10, 42, 94, 0.09);

}



/* =====================================================
   11. NUMÉRO DE LEÇON
===================================================== */

.lesson-number {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 62px;
    height: 62px;

    border-radius: 50%;

    background: #0a2a5e;

    color: #ffffff;

    font-size: 1.05rem;

    font-weight: 800;

}



/* =====================================================
   12. CONTENU LEÇON
===================================================== */

.lesson-content {

    min-width: 0;

}


.lesson-label {

    display: inline-block;

    margin-bottom: 7px;

    color: #c96f32;

    font-size: 0.80rem;

    font-weight: 800;

    letter-spacing: 0.05em;

    text-transform: uppercase;

}


.lesson-content h3 {

    margin: 0 0 10px;

    color: #0a2a5e;

    font-size: 1.20rem;

    font-weight: 800;

    line-height: 1.4;

}


.lesson-content p {

    margin: 0 0 15px;

    color: #536477;

    font-size: 0.95rem;

    line-height: 1.65;

    text-align: left;

}



/* =====================================================
   13. SUJETS DES LEÇONS
===================================================== */

.lesson-topics {

    display: flex;

    flex-wrap: wrap;

    gap: 7px 20px;

    margin: 0;

    padding: 0;

    list-style: none;

}


.lesson-topics li {

    position: relative;

    padding-left: 14px;

    color: #3d4d60;

    font-size: 0.88rem;

    line-height: 1.5;

}


.lesson-topics li::before {

    content: "";

    position: absolute;

    top: 0.68em;

    left: 0;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #f4a261;

}



/* =====================================================
   14. BOUTON LEÇON
===================================================== */

.lesson-action {

    display: flex;

    align-items: center;

    justify-content: center;

}


.lesson-action .btn {

    white-space: nowrap;

}



/* =====================================================
   15. QUIZ
===================================================== */

.quiz-card {

    margin-top: 35px;

    border-left-color: #0a2a5e;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f4f8fd
        );

}


.quiz-card .lesson-number {

    background: #f4a261;

}



/* =====================================================
   16. NAVIGATION
===================================================== */

.module-navigation {

    padding: 45px 20px 70px;

    text-align: center;

}



/* =====================================================
   17. TABLETTE
===================================================== */

@media (max-width: 900px) {

    .lesson-card {

        grid-template-columns:
            70px 1fr;

    }


    .lesson-action {

        grid-column: 2;

        justify-content: flex-start;

    }

}



/* =====================================================
   18. MOBILE
===================================================== */

@media (max-width: 700px) {


    /* HERO */

    .module-hero {

        padding:
            65px 18px
            55px;

    }


    .module-hero h1 {

        font-size:
            clamp(
                1.7rem,
                7vw,
                2rem
            );

        line-height: 1.2;

    }


    .module-intro {

        font-size: 1rem;

        line-height: 1.65;

        text-align: left;

    }


    .module-meta {

        flex-direction: column;

        gap: 8px;

    }


    .module-meta span {

        width: 100%;

        justify-content: center;

    }



    /* OBJECTIF */

    .module-objective {

        padding:
            65px 18px;

    }


    .objective-heading {

        margin-bottom: 32px;

    }


    .objective-heading h2 {

        font-size: 2rem;

        text-align: center;

    }


    .objective-heading p {

        text-align: left;

    }


    .objective-card {

        grid-template-columns: 1fr;

        gap: 22px;

        padding: 30px 25px;

        border-radius: 16px;

    }


    .objective-icon {

        width: 60px;
        height: 60px;

        border-radius: 15px;

    }


    .objective-content h3 {

        font-size: 1.3rem;

    }


    .objective-content > p {

        text-align: left;

    }


    .objective-points {

        flex-direction: column;

        gap: 12px;

    }


    .objective-watermark {

        right: -5px;

        bottom: -20px;

        font-size: 8rem;

    }



    /* LEÇONS */

    .module-lessons {

        padding:
            60px 18px;

    }


    .module-section-header {

        margin-bottom: 32px;

        text-align: center;

    }


    .module-section-header h2 {

        width: 100%;

        margin-right: auto;

        margin-left: auto;

        text-align: center;

    }


    .module-section-header p {

        width: 100%;

        margin-right: auto;

        margin-left: auto;

        text-align: left;

    }


    .lesson-card {

        grid-template-columns: 1fr;

        gap: 18px;

        padding: 24px 20px;

    }


    .lesson-number {

        width: 52px;

        height: 52px;

    }


    .lesson-action {

        grid-column: auto;

        justify-content: flex-start;

    }


    .lesson-action .btn {

        width: 100%;

        text-align: center;

    }


    .lesson-content p {

        text-align: left;

    }


    .lesson-topics {

        flex-direction: column;

        gap: 8px;

    }



    /* NAVIGATION */

    .module-navigation {

        padding:
            35px 18px
            55px;

    }

}