/*
=========================================================
   LABOCOMPTA — LECONS.CSS
   Pages : Toutes les leçons de l'Académie LaboCompta

   Design :
   - Moderne
   - Élégant
   - Épuré
   - Pédagogique
   - Professionnel
   - Bleu LaboCompta
   - Abricot
   - Responsive
   - Réutilisable pour tous les modules
=========================================================
*/


/* =====================================================
   1. HERO — LEÇON
===================================================== */

.lesson-hero {

    padding: 82px 20px 75px;

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

    color: #ffffff;

    text-align: center;
}


.lesson-hero-content {

    max-width: 900px;

    margin: 0 auto;
}


/* =====================================================
   2. BADGE ACADÉMIE
===================================================== */

.lesson-badge {

    display: inline-block;

    margin-bottom: 18px;

    padding: 8px 18px;

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

    border-radius: 30px;

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

    color: #ffffff;

    font-size: 0.84rem;

    font-weight: 700;

    letter-spacing: 0.04em;
}


/* =====================================================
   3. MODULE
===================================================== */

.lesson-module {

    display: block;

    margin-bottom: 10px;

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

    font-size: 0.76rem;

    font-weight: 700;

    letter-spacing: 0.10em;
}


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

.lesson-hero .lesson-number {

    display: block;

    margin-bottom: 16px;

    color: #f4a261;

    font-size: 0.90rem;

    font-weight: 800;

    letter-spacing: 0.15em;
}


/* =====================================================
   5. TITRE HERO
===================================================== */

.lesson-hero h1 {

    max-width: 780px;

    margin: 0 auto 22px;

    color: #ffffff;

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

    font-weight: 800;

    line-height: 1.2;
}


/* =====================================================
   6. INTRODUCTION HERO
===================================================== */

.lesson-intro {

    max-width: 700px;

    margin: 0 auto 28px;

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

    font-size: 1.05rem;

    line-height: 1.75;

    text-align: center;
}


/* =====================================================
   7. META — INFORMATIONS LEÇON
===================================================== */

.lesson-meta {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;
}


.lesson-meta span {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 8px 14px;

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

    border-radius: 30px;

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

    color: #ffffff;

    font-size: 0.86rem;

    font-weight: 600;
}


/* =====================================================
   8. SECTION — CONTENU DE LA LEÇON
===================================================== */

.lesson-content-section {

    padding: 85px 20px;

    background: #ffffff;
}


/* =====================================================
   9. HEADER DE SECTION
===================================================== */

.lesson-section-header {

    max-width: 820px;

    margin: 0 auto 55px;

    text-align: center;
}


.lesson-section-header .section-badge {

    margin-bottom: 15px;
}


.lesson-section-header h2 {

    margin: 0 0 17px;

    color: #0a2a5e;

    font-size:
        clamp(
            1.9rem,
            4vw,
            2.55rem
        );

    font-weight: 800;

    line-height: 1.25;

    text-align: center;
}


.lesson-section-header > p {

    max-width: 720px;

    margin: 0 auto;

    color: #536477;

    font-size: 1.03rem;

    line-height: 1.8;

    text-align: left;
}


/* =====================================================
   10. BADGE DE SECTION
===================================================== */

.lesson-content-section .section-badge,
.lesson-summary .section-badge {

    display: inline-block;

    padding: 7px 16px;

    border:
        1px solid
        #f8d5bb;

    border-radius: 30px;

    background: #fff1e6;

    color: #c96f32;

    font-size: 0.78rem;

    font-weight: 800;

    letter-spacing: 0.06em;
}


/* =====================================================
   11. BLOCS PÉDAGOGIQUES
===================================================== */

.lesson-block {

    position: relative;

    display: grid;

    grid-template-columns: 68px 1fr;

    gap: 28px;

    max-width: 900px;

    margin: 0 auto 28px;

    padding: 34px 36px;

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

    border:
        1px solid
        #e4eaf2;

    border-left:
        5px solid
        #f4a261;

    border-radius: 18px;

    box-shadow:
        0 10px 30px
        rgba(10, 42, 94, 0.055);

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


.lesson-block:hover {

    transform: translateY(-2px);

    box-shadow:
        0 14px 34px
        rgba(10, 42, 94, 0.09);
}


/* =====================================================
   12. NUMÉRO DES BLOCS
===================================================== */

.lesson-block-number {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 58px;

    height: 58px;

    border-radius: 50%;

    background: #0a2a5e;

    color: #ffffff;

    font-size: 0.95rem;

    font-weight: 800;

    box-shadow:
        0 7px 18px
        rgba(10, 42, 94, 0.14);
}


/* =====================================================
   13. CONTENU DES BLOCS
===================================================== */

.lesson-block-content {

    min-width: 0;
}


.lesson-label {

    display: inline-block;

    margin-bottom: 9px;

    color: #c96f32;

    font-size: 0.74rem;

    font-weight: 800;

    letter-spacing: 0.12em;
}


.lesson-block-content h3 {

    margin: 0 0 16px;

    color: #0a2a5e;

    font-size: 1.45rem;

    font-weight: 800;

    line-height: 1.35;
}


.lesson-block-content p {

    max-width: 760px;

    margin: 0 0 17px;

    color: #536477;

    font-size: 1rem;

    line-height: 1.8;

    text-align: left;
}


.lesson-block-content p:last-child {

    margin-bottom: 0;
}


/* =====================================================
   14. BLOC — À RETENIR
===================================================== */

.lesson-highlight {

    display: flex;

    align-items: flex-start;

    gap: 14px;

    margin-top: 24px;

    padding: 17px 20px;

    border:
        1px solid
        #f8d5bb;

    border-radius: 12px;

    background: #fff7f0;
}


.lesson-highlight strong {

    flex-shrink: 0;

    color: #c96f32;

    font-size: 0.88rem;

    font-weight: 800;
}


.lesson-highlight span {

    color: #4b5d70;

    font-size: 0.93rem;

    line-height: 1.6;
}


/* =====================================================
   15. LISTES PÉDAGOGIQUES
===================================================== */

.lesson-list {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px 25px;

    margin: 22px 0 0;

    padding: 0;

    list-style: none;
}


.lesson-list li {

    position: relative;

    padding-left: 21px;

    color: #34475a;

    font-size: 0.93rem;

    line-height: 1.6;
}


.lesson-list li::before {

    content: "✓";

    position: absolute;

    top: 0;

    left: 0;

    color: #f4a261;

    font-weight: 800;
}


/* =====================================================
   16. SECTION — SYNTHÈSE
===================================================== */

.lesson-summary {

    max-width: 900px;

    margin: 55px auto 0;

    padding: 42px;

    border:
        1px solid
        #e2e9f2;

    border-radius: 20px;

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

    box-shadow:
        0 14px 40px
        rgba(10, 42, 94, 0.07);

    text-align: center;
}


.lesson-summary h2 {

    max-width: 700px;

    margin: 18px auto 15px;

    color: #0a2a5e;

    font-size:
        clamp(
            1.55rem,
            3vw,
            2rem
        );

    font-weight: 800;

    line-height: 1.3;
}


.lesson-summary > p {

    max-width: 720px;

    margin: 0 auto 28px;

    color: #536477;

    font-size: 1rem;

    line-height: 1.75;

    text-align: left;
}


/* =====================================================
   17. POINTS DE SYNTHÈSE
===================================================== */

.summary-points {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px 18px;

    max-width: 760px;

    margin: 0 auto;
}


.summary-point {

    display: flex;

    align-items: center;

    gap: 11px;

    padding: 13px 15px;

    border:
        1px solid
        #e5ebf3;

    border-radius: 10px;

    background: #ffffff;

    text-align: left;
}


.summary-point > span {

    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;
}


.summary-point p {

    margin: 0;

    color: #34475a;

    font-size: 0.90rem;

    line-height: 1.5;

    text-align: left;
}


/* =====================================================
   18. MINI-QUIZ — VALIDATION
===================================================== */

.lesson-quiz {

    padding: 75px 20px;

    background:
        linear-gradient(
            180deg,
            #f8fafc,
            #ffffff
        );

    border-top:
        1px solid
        #edf1f6;
}


/* Header du quiz */

.lesson-quiz .lesson-section-header {

    margin-bottom: 42px;
}


/* Formulaire */

.lesson-quiz form {

    max-width: 900px;

    margin: 0 auto;
}


/* =====================================================
   19. QUESTIONS DU QUIZ
===================================================== */

.quiz-question {

    margin: 0 0 24px;

    padding: 26px 28px;

    border:
        1px solid
        #e1e8f0;

    border-radius: 16px;

    background: #ffffff;

    box-shadow:
        0 8px 25px
        rgba(10, 42, 94, 0.045);

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}


.quiz-question:hover {

    border-color: #d5dfeb;

    box-shadow:
        0 10px 28px
        rgba(10, 42, 94, 0.07);
}


.quiz-question h3 {

    margin: 0 0 19px;

    color: #0a2a5e;

    font-size: 1.05rem;

    font-weight: 800;

    line-height: 1.55;
}


/* =====================================================
   20. RÉPONSES
===================================================== */

.quiz-question label {

    display: flex;

    align-items: flex-start;

    gap: 9px;

    margin: 10px 0;

    padding: 11px 12px;

    border:
        1px solid
        transparent;

    border-radius: 9px;

    color: #34475a;

    font-size: 0.95rem;

    line-height: 1.55;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}


.quiz-question label:hover {

    border-color: #e6edf4;

    background: #f8fafc;
}


.quiz-question input[type="radio"] {

    width: 17px;

    height: 17px;

    flex-shrink: 0;

    margin:
        2px 0 0;
}


/* =====================================================
   21. BOUTON — VÉRIFIER
===================================================== */

.quiz-submit {

    display: flex;

    justify-content: center;

    margin-top: 32px;
}


.quiz-submit .btn {

    min-width: 220px;

    border: none;

    cursor: pointer;
}


/* Focus clavier */

.quiz-submit .btn:focus-visible,
.quiz-question input[type="radio"]:focus-visible,
.lesson-navigation .btn:focus-visible {

    outline:
        3px solid
        rgba(244, 162, 97, 0.45);

    outline-offset: 3px;
}


/* =====================================================
   22. RÉSULTAT DU QUIZ
===================================================== */

.quiz-result {

    max-width: 900px;

    margin: 25px auto 0;

    color: #34475a;

    font-size: 0.97rem;

    line-height: 1.65;

    text-align: center;
}


/* Succès */

.quiz-result.quiz-success {

    padding: 17px 20px;

    border:
        1px solid
        #cfe8d5;

    border-radius: 12px;

    background: #f1faf3;

    color: #276238;

    font-weight: 600;
}


/* Erreur */

.quiz-result.quiz-error {

    padding: 17px 20px;

    border:
        1px solid
        #f0d2d2;

    border-radius: 12px;

    background: #fff6f6;

    color: #9b3c3c;

    font-weight: 600;
}


/* =====================================================
   23. NAVIGATION DE LA LEÇON
===================================================== */

.lesson-navigation {

    padding: 45px 20px 70px;

    background: #ffffff;
}


.lesson-navigation .container {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 15px;
}


.lesson-navigation .btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 180px;

    text-align: center;
}


/* =====================================================
   24. LEÇON SUIVANTE — VERROUILLAGE
===================================================== */

#nextLesson[aria-disabled="true"] {

    pointer-events: none;

    opacity: 0.5;

    cursor: not-allowed;

    filter: grayscale(15%);
}


/* État actif après validation */

#nextLesson[aria-disabled="false"] {

    pointer-events: auto;

    opacity: 1;

    cursor: pointer;

    filter: none;
}


/* =====================================================
   25. TABLETTE
===================================================== */

@media (max-width: 900px) {

    .lesson-block {

        grid-template-columns:
            60px 1fr;

        gap: 22px;

        padding: 30px;
    }


    .lesson-list {

        grid-template-columns: 1fr;
    }

}


/* =====================================================
   26. MOBILE
===================================================== */

@media (max-width: 700px) {


    /* -------------------------------------------------
       HERO
    ------------------------------------------------- */

    .lesson-hero {

        padding:
            65px 18px
            55px;
    }


    .lesson-badge {

        font-size: 0.78rem;
    }


    .lesson-module {

        font-size: 0.68rem;

        line-height: 1.5;
    }


    .lesson-hero h1 {

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

        line-height: 1.2;
    }


    .lesson-intro {

        font-size: 0.98rem;

        line-height: 1.65;
    }


    .lesson-meta {

        flex-direction: column;

        gap: 8px;
    }


    .lesson-meta span {

        width: 100%;
    }


    /* -------------------------------------------------
       CONTENU
    ------------------------------------------------- */

    .lesson-content-section {

        padding:
            60px 18px;
    }


    .lesson-section-header {

        margin-bottom: 35px;
    }


    .lesson-section-header h2 {

        font-size: 1.9rem;
    }


    .lesson-section-header > p {

        font-size: 0.97rem;

        line-height: 1.7;

        text-align: left;
    }


    /* -------------------------------------------------
       BLOCS
    ------------------------------------------------- */

    .lesson-block {

        grid-template-columns: 1fr;

        gap: 20px;

        margin-bottom: 22px;

        padding: 27px 22px;

        border-radius: 16px;
    }


    .lesson-block-number {

        width: 52px;

        height: 52px;
    }


    .lesson-block-content h3 {

        font-size: 1.30rem;
    }


    .lesson-block-content p {

        font-size: 0.95rem;

        line-height: 1.75;

        text-align: left;
    }


    .lesson-highlight {

        flex-direction: column;

        gap: 5px;

        padding: 15px 17px;
    }


    .lesson-list {

        grid-template-columns: 1fr;

        gap: 9px;
    }


    /* -------------------------------------------------
       SYNTHÈSE
    ------------------------------------------------- */

    .lesson-summary {

        margin-top: 40px;

        padding: 30px 22px;

        border-radius: 16px;
    }


    .lesson-summary h2 {

        font-size: 1.55rem;
    }


    .lesson-summary > p {

        font-size: 0.95rem;

        line-height: 1.7;

        text-align: left;
    }


    .summary-points {

        grid-template-columns: 1fr;

        gap: 10px;
    }


    /* -------------------------------------------------
       MINI-QUIZ
    ------------------------------------------------- */

    .lesson-quiz {

        padding:
            55px 18px;
    }


    .lesson-quiz .lesson-section-header {

        margin-bottom: 30px;
    }


    .quiz-question {

        margin-bottom: 18px;

        padding: 20px 18px;

        border-radius: 14px;
    }


    .quiz-question h3 {

        font-size: 0.98rem;

        line-height: 1.55;
    }


    .quiz-question label {

        margin: 8px 0;

        padding: 10px;

        font-size: 0.91rem;
    }


    .quiz-submit {

        margin-top: 25px;
    }


    .quiz-submit .btn {

        width: 100%;

        max-width: 320px;
    }


    .quiz-result {

        font-size: 0.93rem;
    }


    /* -------------------------------------------------
       NAVIGATION
    ------------------------------------------------- */

    .lesson-navigation {

        padding:
            35px 18px
            55px;
    }


    .lesson-navigation .container {

        flex-direction: column;

        gap: 10px;
    }


    .lesson-navigation .btn {

        width: 100%;

        max-width: 320px;
    }

}


/* =====================================================
   27. TRÈS PETITS ÉCRANS
===================================================== */

@media (max-width: 420px) {


    .lesson-hero h1 {

        font-size: 1.65rem;
    }


    .lesson-section-header h2 {

        font-size: 1.7rem;
    }


    .lesson-block {

        padding:
            24px 19px;
    }


    .lesson-block-content h3 {

        font-size: 1.22rem;
    }


    .lesson-summary {

        padding:
            27px 19px;
    }


    .lesson-quiz {

        padding:
            48px 15px;
    }


    .quiz-question {

        padding:
            18px 15px;
    }


    .quiz-question label {

        font-size: 0.88rem;
    }


    .quiz-result.quiz-success,
    .quiz-result.quiz-error {

        padding:
            14px 15px;
    }

}


/* =====================================================
   28. RÉDUCTION DES ANIMATIONS
===================================================== */

@media (prefers-reduced-motion: reduce) {

    .lesson-block,
    .quiz-question,
    .quiz-question label {

        transition: none;
    }


    .lesson-block:hover {

        transform: none;
    }

}