/* =========================================================
   MEDIQUAL FOOTER FINAL V54
   ========================================================= */

/* Masquer le footer généré par V51 */
#mq51-footer {
    display: none !important;
}

/* Masquer tout ancien footer qui aurait survécu */
.mq54-hide-old-footer {
    display: none !important;
}

/* =========================================================
   DESKTOP
   ========================================================= */
@media (min-width: 900px) {

    #mq54-footer {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;

        background: #0b3652 !important;
        color: #fff !important;
    }

    /*
     * Mise en page calée sur la capture :
     * logo à l'extrême gauche,
     * puis Navigation / Spécialités / Contact
     * répartis sur toute la largeur.
     */
    #mq54-footer .mq54-main {
        box-sizing: border-box !important;

        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 46px 28px 40px !important;

        display: grid !important;
        grid-template-columns:
            300px
            180px
            190px
            245px !important;

        justify-content: space-between !important;
        align-items: start !important;

        column-gap: 0 !important;
        row-gap: 0 !important;
    }

    #mq54-footer .mq54-brand,
    #mq54-footer .mq54-col {
        width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        text-align: left !important;
        align-self: start !important;
        justify-self: start !important;
    }

    /* ---------- Logo blanc à l'extrême gauche ---------- */
    #mq54-footer .mq54-logo {
        display: block !important;
        width: auto !important;
        min-height: 0 !important;

        margin: 0 0 22px !important;
        padding: 0 !important;

        text-align: left !important;
    }

    #mq54-footer .mq54-logo .custom-logo-link {
        display: inline-block !important;
        width: auto !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    #mq54-footer .mq54-logo img,
    #mq54-footer .mq54-logo .custom-logo {
        display: block !important;

        width: auto !important;
        height: auto !important;

        max-width: 105px !important;
        max-height: 48px !important;

        margin: 0 !important;
        padding: 0 !important;

        object-fit: contain !important;
        object-position: left center !important;

        /* rendre le logo entièrement blanc */
        filter: brightness(0) invert(1) !important;
    }

    #mq54-footer .mq54-brand > p {
        display: block !important;

        width: 100% !important;
        max-width: 270px !important;

        margin: 0 !important;
        padding: 0 !important;

        color: rgba(255,255,255,.86) !important;

        font-size: 13px !important;
        line-height: 1.55 !important;
        font-weight: 400 !important;

        text-align: left !important;
    }

    /* ---------- Titres ---------- */
    #mq54-footer .mq54-col h3 {
        margin: 0 0 16px !important;
        padding: 0 !important;

        color: #fff !important;

        font-size: 14px !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;

        text-align: left !important;
    }

    /* ---------- Listes / liens ---------- */
    #mq54-footer .mq54-col ul {
        list-style: none !important;

        margin: 0 !important;
        padding: 0 !important;

        text-align: left !important;
    }

    #mq54-footer .mq54-col li {
        display: block !important;

        margin: 0 0 10px !important;
        padding: 0 !important;

        text-align: left !important;
    }

    #mq54-footer .mq54-col li a,
    #mq54-footer .mq54-col p,
    #mq54-footer .mq54-col p a {
        color: rgba(255,255,255,.88) !important;

        font-size: 13px !important;
        line-height: 1.48 !important;
        font-weight: 400 !important;

        text-align: left !important;
        text-decoration: none !important;
    }

    #mq54-footer .mq54-col li a {
        display: inline-block !important;
    }

    #mq54-footer .mq54-contact p {
        width: 100% !important;

        margin: 0 0 9px !important;
        padding: 0 !important;
    }

    #mq54-footer .mq54-contact p:first-of-type {
        max-width: 245px !important;
    }

    #mq54-footer a:hover {
        color: #fff !important;
        text-decoration: underline !important;
    }

    /* ---------- Barre basse ---------- */
    #mq54-footer .mq54-bottom {
        box-sizing: border-box !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 16px 28px 18px !important;

        border-top: 1px solid rgba(255,255,255,.10) !important;

        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;

        gap: 24px !important;

        color: rgba(255,255,255,.58) !important;

        font-size: 11px !important;
        line-height: 1.4 !important;

        text-align: left !important;
    }

    #mq54-footer .mq54-bottom span {
        display: inline-block !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #mq54-footer .mq54-bottom span:last-child {
        margin-left: auto !important;
        text-align: right !important;
    }
}

/* =========================================================
   DESKTOP PLUS ÉTROIT
   ========================================================= */
@media (min-width: 900px) and (max-width: 1120px) {

    #mq54-footer .mq54-main {
        grid-template-columns:
            255px
            155px
            170px
            220px !important;

        padding-left: 22px !important;
        padding-right: 22px !important;
    }

    #mq54-footer .mq54-brand > p {
        max-width: 235px !important;
        font-size: 12px !important;
    }

    #mq54-footer .mq54-col li a,
    #mq54-footer .mq54-col p,
    #mq54-footer .mq54-col p a {
        font-size: 12px !important;
    }

    #mq54-footer .mq54-bottom {
        padding-left: 22px !important;
        padding-right: 22px !important;
    }
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 899px) {

    #mq54-footer {
        width: 100% !important;
        background: #0b3652 !important;
        color: #fff !important;
    }

    #mq54-footer .mq54-main {
        display: block !important;

        width: 100% !important;
        margin: 0 !important;
        padding: 38px 28px 26px !important;
    }

    #mq54-footer .mq54-brand {
        padding-bottom: 28px !important;
        border-bottom: 1px solid rgba(255,255,255,.13) !important;
    }

    #mq54-footer .mq54-logo {
        margin-bottom: 20px !important;
    }

    #mq54-footer .mq54-logo img,
    #mq54-footer .mq54-logo .custom-logo {
        display: block !important;

        width: auto !important;
        height: auto !important;

        max-width: 165px !important;
        max-height: 65px !important;

        filter: brightness(0) invert(1) !important;
    }

    #mq54-footer .mq54-brand > p {
        margin: 0 !important;

        color: rgba(255,255,255,.86) !important;

        font-size: 16px !important;
        line-height: 1.55 !important;
    }

    #mq54-footer .mq54-col {
        padding-top: 30px !important;
    }

    #mq54-footer .mq54-col h3 {
        margin: 0 0 14px !important;

        color: #fff !important;

        font-size: 24px !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
    }

    #mq54-footer .mq54-col ul {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #mq54-footer .mq54-col li,
    #mq54-footer .mq54-col p {
        margin: 0 0 12px !important;
        padding: 0 !important;
    }

    #mq54-footer .mq54-col a,
    #mq54-footer .mq54-col p {
        color: rgba(255,255,255,.88) !important;

        font-size: 17px !important;
        line-height: 1.55 !important;

        text-decoration: none !important;
    }

    #mq54-footer .mq54-bottom {
        width: calc(100% - 56px) !important;

        margin: 0 28px !important;
        padding: 20px 0 max(28px, env(safe-area-inset-bottom)) !important;

        border-top: 1px solid rgba(255,255,255,.13) !important;

        display: block !important;

        color: rgba(255,255,255,.58) !important;

        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    #mq54-footer .mq54-bottom span {
        display: block !important;
        margin-bottom: 8px !important;
    }
}