/* =========================================================
   B612 — FICHE ANIMATION
   RESPONSIVE MOBILE
   ========================================================= */


/* =========================================================
   TABLETTE
   ========================================================= */

@media (max-width: 900px) {

    #b612-event {
        padding: 40px 30px 70px;
    }


    .b612-event__title {
        font-size: 54px;
    }


    /* -----------------------------------------------------
       MASONRY → UNE COLONNE
    ----------------------------------------------------- */

    .b612-event__masonry {
        grid-template-columns: 1fr;
        gap: 45px;
    }


    .b612-event__main,
    .b612-event__side {
        min-width: 0;
        width: 100%;
    }


    .b612-event__image-wrapper {
        width: 100%;
    }


    .b612-event__lower {
        grid-template-columns: 1fr;
        gap: 45px;
    }


    .b612-event__content {
        max-width: 800px;
    }


    .b612-event__newsletter {
        max-width: 600px;
    }

}


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

@media (max-width: 600px) {

    #b612-event {
        padding: 30px 20px 60px;
    }


    /* -----------------------------------------------------
       FIL D'ARIANE
    ----------------------------------------------------- */

    .b612-event__breadcrumb {
        margin-bottom: 30px;
        font-size: 10px;
    }


    /* -----------------------------------------------------
       EN-TÊTE
    ----------------------------------------------------- */

    .b612-event__header {
        margin-bottom: 30px;
    }


    .b612-event__eyebrow {
        margin-bottom: 13px;
        font-size: 10px;
    }


    .b612-event__title {
        font-size: 42px;
        line-height: .94;
    }


    .b612-event__divider {
        margin-top: 22px;
    }


    /* -----------------------------------------------------
       MASONRY → UNE SEULE COLONNE
    ----------------------------------------------------- */

    .b612-event__masonry {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }


    .b612-event__main,
    .b612-event__side {
        width: 100%;
        min-width: 0;
    }


    /* -----------------------------------------------------
       IMAGE
    ----------------------------------------------------- */

    .b612-event__image-wrapper {
        width: 100%;
        aspect-ratio: 16 / 10;
        border-radius: 9px;
    }


    .b612-event__image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


    .b612-event__date {
        left: 14px;
        bottom: 14px;
        min-width: 52px;
        min-height: 52px;
    }


    .b612-event__day {
        font-size: 16px;
    }


    .b612-event__month {
        font-size: 9px;
    }


    /* -----------------------------------------------------
       INFORMATIONS
    ----------------------------------------------------- */

    .b612-event__infos {
        width: 100%;
        padding: 0;
    }


    .b612-event__infos-label {
        margin-bottom: 20px;
        font-size: 10px;
    }


    .b612-event__info {
        padding: 13px 0;
    }


    .b612-event__info-label {
        margin-bottom: 5px;
        font-size: 9px;
    }


    .b612-event__info-value {
        font-size: 19px;
        line-height: 1.15;
    }


    .b612-event__register {
        width: 100%;
        margin-top: 20px;
        padding: 14px 18px;
    }


    /* -----------------------------------------------------
       CONTENU À PROPOS
    ----------------------------------------------------- */

    .b612-event__content {
        max-width: none;
    }


    .b612-event__content-title {
        font-size: 34px;
    }


    .b612-event__content-divider {
        margin-top: 16px;
        margin-bottom: 22px;
    }


    .b612-event__content p {
        font-size: 18px;
        line-height: 1.45;
    }


    /* -----------------------------------------------------
       NEWSLETTER
    ----------------------------------------------------- */

    .b612-event__newsletter {
        width: 100%;
        max-width: none;
        padding: 24px;
        border-radius: 9px;
        box-sizing: border-box;
    }


    .b612-event__newsletter-title {
        font-size: 27px;
    }


    .b612-event__newsletter-form {
        flex-direction: column;
        gap: 8px;
    }


    .b612-event__newsletter-input,
    .b612-event__newsletter-button {
        width: 100%;
        box-sizing: border-box;
    }


    /* -----------------------------------------------------
       RETOUR
    ----------------------------------------------------- */

    .b612-event__back {
        margin-top: 50px;
    }

}


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

@media (max-width: 400px) {

    #b612-event {
        padding: 25px 16px 50px;
    }


    .b612-event__title {
        font-size: 37px;
    }


    .b612-event__info-value {
        font-size: 18px;
    }

}