/* ==========================================================
   B612 - CAROUSEL - MOBILE
========================================================== */


/* ==========================================================
   MOBILE
   Jusqu'à 768 PX
========================================================== */

@media (max-width: 768px) {


    /* ======================================================
       CAROUSEL — STRUCTURE GÉNÉRALE
    ====================================================== */

    .b612-carousel {

        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 32px;

        height: auto;

        margin: 20px auto;

        padding: 0 20px;
    }


    /* ======================================================
       COLONNE ÉDITORIALE
    ====================================================== */

    .b612-carousel-left {

        height: auto;

        align-items: flex-start;
    }


    .b612-carousel-subtitle {

        margin: 0 0 20px;
    }


    .b612-carousel-title {

        margin: 0 0 28px;

        font-size: 34px;

        line-height: 1;
    }


    /* ======================================================
       BOUTON
    ====================================================== */

    .b612-carousel-button {

        font-size: 14px;

        height: 44px;
    }


    /* ======================================================
       ZONE DU CAROUSEL
    ====================================================== */

    .b612-carousel-right {

        display: grid;

        grid-template-columns:
            40px
            1fr
            40px;

        gap: 10px;

        align-items: center;

        height: auto;
    }


    /* ======================================================
       COUVERTURES
    ====================================================== */

    .b612-book-cover {

        height: 170px;
    }


    /* ======================================================
       FLÈCHES
    ====================================================== */

    .b612-carousel-prev,
    .b612-carousel-next {

        width: 40px;

        height: 40px;
    }



    /* ======================================================
       RECOMMANDATIONS — STRUCTURE MOBILE
    ====================================================== */

    .b612-recommendations__inner {

        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 32px;

        width: 100%;

        box-sizing: border-box;
    }


    .b612-recommendations__editorial {

        width: 100%;
    }


    .b612-recommendations__carousel {

        width: 100%;

        min-width: 0;
    }


    .b612-recommendations__carousel .b612-carousel {

        margin-top: 0;
    }


    /* ======================================================
       RECOMMANDATIONS — BLOC ÉDITORIAL
    ====================================================== */

    .b612-recommendations__inner {

        padding:
            0
            20px;
    }


    .b612-recommendations__subtitle {

        margin:
            0
            0
            20px;

        font-size:
            13px;

        line-height:
            1.2;
    }


    .b612-recommendations__title {

        margin:
            0
            0
            28px;

        font-size:
            34px;

        line-height:
            1;

        letter-spacing:
            -0.02em;
    }



    /* ======================================================
       NOUVEAUTÉS — OPTIMISATION MOBILE
    ====================================================== */

    .b612-news {

        padding:
            40px
            0
            45px;
    }


    .b612-news__editorial {

        width: 100%;

        padding:
            0
            20px;

        box-sizing: border-box;
    }


    .b612-news__editorial .b612-carousel-title {

        max-width:
            500px;

        margin:
            0
            auto;

        font-size:
            30px;

        line-height:
            1;
    }


    .b612-news__carousel {

        margin-top:
            0;

        margin-bottom:
            16px;
    }


    .b612-news__carousel .b612-carousel {

        margin:
            0
            auto;

        padding:
            0;
    }



    /* ======================================================
       BOUTONS — NOUVEAUTÉS / RECOMMANDATIONS
    ====================================================== */

    .b612-news .b612-carousel-button,
    .b612-recommendations .b612-carousel-button {

        display: flex;

        align-items: center;

        justify-content: center;

        width:
            calc(100% - 40px);

        height:
            44px;

        margin-left:
            auto;

        margin-right:
            auto;

        box-sizing:
            border-box;

        font-size:
            14px;
    }

}


/* ==========================================================
   PETITS SMARTPHONES
   Jusqu'à 480 PX
========================================================== */

@media (max-width: 480px) {


    /* ======================================================
       CAROUSEL — COMPACT
    ====================================================== */

    .b612-carousel {

        padding:
            0
            16px;

        gap:
            24px;
    }


    /* ======================================================
       TITRE
    ====================================================== */

    .b612-carousel-title {

        font-size:
            28px;
    }


    /* ======================================================
       COUVERTURES
    ====================================================== */

    .b612-book-cover {

        height:
            150px;
    }


    /* ======================================================
       BOUTONS
    ====================================================== */

    .b612-carousel-button {

        width:
            calc(100% - 32px);
    }


    /* ======================================================
       RECOMMANDATIONS
    ====================================================== */

    .b612-recommendations__inner {

        padding:
            0
            16px;
    }


    .b612-recommendations__title {

        font-size:
            28px;
    }


    /* ======================================================
       NOUVEAUTÉS — TITRE
    ====================================================== */

    .b612-news__editorial .b612-carousel-title {

        font-size:
            28px;
    }


    /* ======================================================
       BOUTONS — LARGEUR PETIT ÉCRAN
    ====================================================== */

    .b612-news .b612-carousel-button,
    .b612-recommendations .b612-carousel-button {

        width:
            calc(100% - 32px);
    }

}