/* =========================================================
   BEN'S LINE DANCE
   APROPOS.CSS
   ---------------------------------------------------------
   PAGE À PROPOS — VERSION MOBILE FIRST
   Classes isolées : about-*
   ========================================================= */


/* =========================================================
   1. PAGE
========================================================= */

.about-page {
    width: 100%;
 height: 190px;

    background: #f8f5ee;

    color: #302a24;
}


/* =========================================================
   2. TOP
========================================================= */

.about-top {

    width: 100%;

    background:
        linear-gradient(
            135deg,
            #4f624b 0%,
            #66785f 45%,
            #80694f 100%
        );

    color: #fffaf0;

    border-bottom:
        1px solid #ddd5c7;

}


.about-top-inner {

    width:
        calc(100% - 32px);

    max-width:
        1400px;

    min-height:
        190px;

    margin:
        0 auto;

    padding:
        28px 0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;

}


.about-top-content {

    min-width:
        0;

}


.about-eyebrow {

    display:
        block;

    margin-bottom:
        8px;

    color:
        #e8eee5;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .15em;

}


.about-top h1 {

    margin:
        0;

    color:
        #fffaf0;

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

    line-height:
        1.05;

    letter-spacing:
        -.03em;

}


.about-top p {

    max-width:
        600px;

    margin:
        10px 0 0;

    color:
        rgba(
            255,
            250,
            240,
            .88
        );

    font-size:
        14px;

    line-height:
        1.55;

}


/* =========================================================
   TOP MARK
========================================================= */

.about-top-mark {

    width:
        52px;

    height:
        52px;

    flex:
        0 0 52px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        rgba(
            255,
            255,
            255,
            .14
        );

    color:
        #fff;

    font-size:
        21px;

    box-shadow:
        0 8px 22px
        rgba(
            63,
            53,
            43,
            .14
        );

}

/* =========================================================
   3. CONTENU
========================================================= */

.about-content {
    width: calc(100% - 32px);

    max-width: 1100px;

    margin: 0 auto;

    padding: 42px 0 70px;
}


/* =========================================================
   4. TITRES DE SECTION
========================================================= */

.about-section-heading {
    margin-bottom: 22px;
}


.about-section-label {
    display: block;

    margin-bottom: 8px;

    color: #667a62;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .16em;
}


.about-section-heading h2 {
    margin: 0;

    color: #302a24;

    font-size: clamp(
        1.55rem,
        6vw,
        2.2rem
    );

    line-height: 1.15;

    letter-spacing: -.025em;
}


.about-section-heading p {
    margin: 12px 0 0;

    color: #756d63;

    font-size: 15px;

    line-height: 1.7;
}


/* =========================================================
   5. HISTOIRE
========================================================= */

.about-story {
    margin-bottom: 55px;
}


.about-story-card {
    display: flex;
    flex-direction: column;

    gap: 20px;

    padding: 25px;

    background: #fff;

    border: 1px solid #ddd5c7;

    border-radius: 18px;

    box-shadow:
        0 8px 25px rgba(
            63,
            53,
            43,
            .07
        );
}


.about-story-icon {
    width: 48px;
    height: 48px;

    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;

    background: #e8eee5;

    color: #667a62;

    font-size: 22px;
}


.about-story-text p {
    margin: 0 0 16px;

    color: #4c443c;

    font-size: 15px;

    line-height: 1.8;
}


.about-story-text p:last-child {
    margin-bottom: 0;
}


.about-story-text strong {
    color: #594a3c;
}


/* =========================================================
   6. MISSION
========================================================= */

.about-mission {
    margin-bottom: 55px;
}


.about-values {
    display: grid;

    grid-template-columns: 1fr;

    gap: 14px;
}


.about-value {
    padding: 25px 22px;

    background: #fff;

    border: 1px solid #ddd5c7;

    border-radius: 18px;

    box-shadow:
        0 6px 20px rgba(
            63,
            53,
            43,
            .06
        );

    text-align: center;
}


.about-value-icon {
    width: 52px;
    height: 52px;

    margin: 0 auto 15px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #e8eee5;

    color: #667a62;

    font-size: 22px;
}


.about-value h3 {
    margin: 0 0 8px;

    color: #302a24;

    font-size: 18px;
}


.about-value p {
    margin: 0;

    color: #756d63;

    font-size: 14px;

    line-height: 1.65;
}


/* =========================================================
   7. FONCTIONNALITÉS
========================================================= */

.about-features {
    margin-bottom: 55px;
}


.about-feature-list {
    display: flex;
    flex-direction: column;

    gap: 10px;
}


.about-feature {
    display: flex;
    align-items: flex-start;

    gap: 15px;

    padding: 18px;

    background: #fff;

    border: 1px solid #ddd5c7;

    border-radius: 15px;
}


.about-feature-icon {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 11px;

    background: #f3eee4;

    color: #667a62;

    font-size: 18px;
}


.about-feature strong {
    display: block;

    margin-bottom: 4px;

    color: #302a24;

    font-size: 15px;
}


.about-feature p {
    margin: 0;

    color: #756d63;

    font-size: 13px;

    line-height: 1.55;
}


/* =========================================================
   8. 100 % GRATUIT
========================================================= */

.about-free {
    position: relative;

    display: flex;
    align-items: center;

    gap: 18px;

    margin-bottom: 55px;

    padding: 25px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #667a62,
            #52654f
        );

    border-radius: 20px;

    color: #fff;

    box-shadow:
        0 12px 30px rgba(
            63,
            53,
            43,
            .14
        );
}


.about-free-star {
    width: 50px;
    height: 50px;

    flex: 0 0 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(
        255,
        255,
        255,
        .14
    );

    font-size: 23px;
}


.about-free-label {
    display: block;

    margin-bottom: 4px;

    color: rgba(
        255,
        255,
        255,
        .72
    );

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .15em;
}


.about-free h2 {
    margin: 0 0 5px;

    font-size: 25px;

    line-height: 1.1;
}


.about-free p {
    margin: 0 0 7px;

    color: rgba(
        255,
        255,
        255,
        .88
    );

    font-size: 14px;

    line-height: 1.5;
}


.about-free strong {
    display: block;

    color: #fff;

    font-size: 13px;
}


/* =========================================================
   9. CITATION
========================================================= */

.about-quote {
    margin-bottom: 55px;

    padding: 35px 24px;

    background: #f0ebe1;

    border: 1px solid #ddd5c7;

    border-radius: 20px;

    text-align: center;
}


.about-quote-mark {
    display: block;

    margin-bottom: 5px;

    color: #667a62;

    font-family: Georgia, serif;

    font-size: 55px;

    line-height: .7;
}


.about-quote blockquote {
    margin: 0;

    color: #594a3c;

    font-family: Georgia, serif;

    font-size: 20px;

    font-style: italic;

    line-height: 1.55;
}


.about-quote-brand {
    display: block;

    margin-top: 18px;

    color: #756d63;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .18em;
}


/* =========================================================
   10. CTA
========================================================= */

.about-cta {
    display: flex;
    flex-direction: column;

    gap: 22px;

    padding: 28px 24px;

    background: #fff;

    border: 1px solid #ddd5c7;

    border-radius: 20px;

    box-shadow:
        0 8px 25px rgba(
            63,
            53,
            43,
            .07
        );
}


.about-cta h2 {
    margin: 0 0 9px;

    color: #302a24;

    font-size: 22px;

    line-height: 1.2;
}


.about-cta p {
    margin: 0;

    color: #756d63;

    font-size: 14px;

    line-height: 1.65;
}

/* ---------------------------------------------------------
   BOUTON — EXPLORER LA BIBLIOTHÈQUE
--------------------------------------------------------- */

.about-cta-button {

    min-height: 50px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    padding: 13px 20px;

    border-radius: 12px;

    border: 1px solid #4B3F35;

    background: #4B3F35;

    color: #FFFFFF;

    font-size: 14px;
    font-weight: 750;

    text-decoration: none;

    box-shadow:
        0 4px 10px rgba(75, 63, 53, 0.20);

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


/* ---------------------------------------------------------
   ICÔNE
--------------------------------------------------------- */

.about-cta-button span {

    font-size: 18px;

}


/* ---------------------------------------------------------
   HOVER
--------------------------------------------------------- */

.about-cta-button:hover {

    background: #D8CABC;

    border-color: #B9A999;

    color: #4B3F35;

    transform: translateY(-1px);

    box-shadow:
        0 4px 10px rgba(75, 63, 53, 0.12);

}



/* =========================================================
   11. TABLETTE
========================================================= */

@media (min-width: 576px) {

    .about-top-inner {
        min-height: 210px;

        padding: 38px 0;
    }


    .about-content {
        padding-top: 55px;
    }


    .about-story-card {
        padding: 30px;
    }


    .about-free {
        padding: 30px;
    }


    .about-cta {
        padding: 32px;
    }

}


/* =========================================================
   12. TABLETTE LARGE
========================================================= */

@media (min-width: 768px) {

    .about-top-inner {
        width: calc(100% - 48px);
    }


    .about-content {
        width: calc(100% - 48px);
    }


    .about-story-card {
        flex-direction: row;

        align-items: flex-start;

        gap: 25px;

        padding: 35px;
    }


    .about-story-icon {
        width: 55px;
        height: 55px;
    }


    .about-values {
        grid-template-columns:
            repeat(3, 1fr);

        gap: 18px;
    }


    .about-value {
        padding: 30px 20px;
    }


    .about-feature-list {
        display: grid;

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

        gap: 14px;
    }


    .about-free {
        padding: 35px;
    }


    .about-cta {
        flex-direction: row;

        align-items: center;
        justify-content: space-between;

        gap: 30px;
    }


    .about-cta-button {
        flex: 0 0 auto;
    }

}


/* =========================================================
   13. DESKTOP
========================================================= */

@media (min-width: 992px) {

    .about-top-inner {
        min-height: 220px;

        padding: 40px 0;
    }


    .about-top-mark {
        width: 70px;
        height: 70px;

        font-size: 29px;
    }


    .about-content {
        padding-top: 65px;
        padding-bottom: 100px;
    }


    .about-story-card {
        padding: 40px;
    }


    .about-value {
        padding: 35px 25px;
    }


    .about-feature {
        padding: 20px;
    }


    .about-free {
        padding: 40px;
    }


    .about-quote {
        padding: 55px 40px;
    }


    .about-quote blockquote {
        font-size: 25px;
    }


    .about-cta {
        padding: 40px;
    }

}


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

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

    .about-cta-button {
        transition: none;
    }

}



/* =========================================================
   PETIT MOBILE
========================================================= */

@media (max-width: 400px) {

    .about-top-inner {

        width:
            calc(100% - 24px);

        min-height:
            190px;

        padding:
            22px 0;

        gap:
            12px;

    }


    .about-top h1 {

        font-size:
            1.85rem;

    }


    .about-top p {

        font-size:
            13px;

        line-height:
            1.45;

    }


    .about-top-mark {

        width:
            46px;

        height:
            46px;

        flex-basis:
            46px;

        font-size:
            18px;

    }

}

/* =========================================================
   ABOUT — DESKTOP ALIGNÉ SUR NOUS-REJOINDRE
   Ne touche pas au mobile
========================================================= */

@media (min-width: 992px) {

    .about-top {
        width: 100%;
    }


    .about-top-inner {

        width:
            calc(100% - 32px);

        max-width:
            1400px;

        min-height:
            190px;

        height:
            190px;

        margin:
            0 auto;

        padding:
            32px 0;

        display:
            flex;

        align-items:
            center;

        justify-content:
            space-between;

        gap:
            18px;

    }


    .about-top-content {

        min-width:
            0;

        margin:
            0;

        padding:
            0;

    }


    .about-eyebrow {

        display:
            block;

        margin:
            0 0 8px;

        font-size:
            10px;

        line-height:
            1;

        font-weight:
            800;

        letter-spacing:
            .15em;

    }


    .about-top h1 {

        margin:
            0;

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

        line-height:
            1.05;

        letter-spacing:
            -.03em;

    }


    .about-top p {

        max-width:
            600px;

        margin:
            10px 0 0;

        font-size:
            14px;

        line-height:
            1.55;

    }


    .about-top-mark {

        width:
            60px;

        height:
            60px;

        flex:
            0 0 60px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        border-radius:
            50%;

        font-size:
            24px;

    }

}