/* =========================================================
   JADE INSPIRATIONS
   MENU MOBILE CLEAN V1
   Source CSS unique du menu mobile
   ========================================================= */


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 901px) {

    body #jade-mobile-panel,
    body .jade-mobile-overlay {
        display: none !important;
    }

}


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

@media (max-width: 900px) {

    html.jade-mobile-menu-open,
    body.jade-mobile-menu-open {
        overflow: hidden !important;
    }


    /* -----------------------------------------------------
       HAMBURGER
       ----------------------------------------------------- */

    body .jade-mobile-toggle {
        position: relative;

        width: 44px;
        height: 44px;

        padding: 0;

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

        gap: 6px;

        border: 0;

        background: transparent;

        cursor: pointer;
    }

    body .jade-mobile-toggle span {
        width: 21px;
        height: 1.5px;

        display: block;

        background: #4c3b31;

        border-radius: 20px;

        transition:
            transform .22s ease,
            opacity .22s ease;
    }


    /* -----------------------------------------------------
       OVERLAY
       ----------------------------------------------------- */

    body .jade-mobile-overlay {
        position: fixed;

        inset: 0;

        z-index: 9998;

        display: block;

        background:
            rgba(31, 24, 20, .34);

        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);

        opacity: 0;
        visibility: hidden;

        pointer-events: none;

        transition:
            opacity .25s ease,
            visibility .25s ease;
    }

    body .jade-mobile-overlay.is-open {
        opacity: 1;
        visibility: visible;

        pointer-events: auto;
    }


    /* -----------------------------------------------------
       PANNEAU
       ----------------------------------------------------- */

    body #jade-mobile-panel {
        position: fixed;

        top: 0;
        bottom: 0;
        left: 0;

        z-index: 9999;

        width: min(90vw, 390px);
        height: 100dvh;

        margin: 0;
        padding: 0;

        display: flex;
        flex-direction: column;

        overflow: hidden;

        border: 0;

        background:
            linear-gradient(
                180deg,
                #fffdf9 0%,
                #fbf7f1 100%
            );

        box-shadow:
            18px 0 50px
            rgba(57, 42, 32, .15);

        transform:
            translate3d(-103%,0,0);

        visibility: hidden;

        transition:
            transform .30s cubic-bezier(.22,.61,.36,1),
            visibility .30s ease;

        -webkit-overflow-scrolling: touch;
    }

    body #jade-mobile-panel.is-open {
        transform:
            translate3d(0,0,0);

        visibility: visible;
    }


    /* -----------------------------------------------------
       EN-TETE
       ----------------------------------------------------- */

    body #jade-mobile-panel
    .jade-mobile-panel__head {
        position: relative;

        flex: 0 0 auto;

        min-height: 106px;

        padding:
            max(24px,env(safe-area-inset-top))
            22px
            20px;

        display: flex;
        align-items: flex-end;
        justify-content: space-between;

        gap: 20px;

        border-bottom:
            1px solid rgba(76,59,49,.08);

        background:
            rgba(255,253,249,.94);
    }

    body .jade-mobile-panel__heading {
        min-width: 0;
    }

    body .jade-mobile-panel__eyebrow {
        margin-bottom: 6px;

        display: block;

        color: #a1785b;

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

        letter-spacing: .16em;
        text-transform: uppercase;
    }

    body .jade-mobile-panel__heading strong {
        display: block;

        color: #332821;

        font-family:
            Georgia,
            "Times New Roman",
            serif;

        font-size: 28px;
        font-weight: 400;

        line-height: 1;
    }


    /* -----------------------------------------------------
       CROIX
       ----------------------------------------------------- */

    body .jade-mobile-close {
        position: relative;

        width: 42px;
        height: 42px;

        flex: 0 0 42px;

        padding: 0;

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

        border:
            1px solid rgba(97,73,57,.12);

        border-radius: 999px;

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

        color: #604a3c;

        cursor: pointer;
    }

    body .jade-mobile-close span {
        position: absolute;

        width: 15px;
        height: 1px;

        background: currentColor;
    }

    body .jade-mobile-close span:first-child {
        transform: rotate(45deg);
    }

    body .jade-mobile-close span:last-child {
        transform: rotate(-45deg);
    }


    /* -----------------------------------------------------
       ZONE SCROLLABLE
       ----------------------------------------------------- */

    body .jade-mobile-panel__content {
        position: relative;

        flex: 1 1 auto;

        min-height: 0;

        padding:
            10px 20px
            26px;

        overflow-y: auto;
        overflow-x: hidden;

        overscroll-behavior: contain;

        scrollbar-width: thin;

        -webkit-overflow-scrolling: touch;
    }

    body .jade-mobile-nav {
        width: 100%;
    }


    /* -----------------------------------------------------
       RESET LISTES
       ----------------------------------------------------- */

    body .jade-mobile-menu__level,
    body .jade-mobile-menu__item {
        margin: 0;
        padding: 0;

        list-style: none;
    }

    body .jade-mobile-menu__row {
        position: relative;

        display: flex;
        align-items: center;

        min-height: 56px;

        gap: 8px;
    }


    /* -----------------------------------------------------
       LIENS COMMUNS
       ----------------------------------------------------- */

    body .jade-mobile-menu__link,
    body .jade-mobile-menu__link--single {
        min-width: 0;

        flex: 1 1 auto;

        display: flex;
        align-items: center;

        text-decoration: none;

        transition:
            color .18s ease,
            opacity .18s ease;
    }


    /* -----------------------------------------------------
       NIVEAU 0
       ----------------------------------------------------- */

    body .jade-mobile-menu__level--0
    > .jade-mobile-menu__item {
        border-bottom:
            1px solid rgba(77,58,46,.07);
    }

    body .jade-mobile-menu__level--0
    > .jade-mobile-menu__item
    > .jade-mobile-menu__row
    > .jade-mobile-menu__link,

    body .jade-mobile-menu__level--0
    > .jade-mobile-menu__item
    > .jade-mobile-menu__link--single {
        min-height: 58px;

        padding:
            16px 4px;

        color: #382e28;

        font-family:
            Georgia,
            "Times New Roman",
            serif;

        font-size: 18px;
        font-weight: 400;

        line-height: 1.2;
    }

    body .jade-mobile-menu__level--0
    > .jade-mobile-menu__item.is-open
    > .jade-mobile-menu__row
    > .jade-mobile-menu__link {
        color: #a06f4d;
    }


    /* -----------------------------------------------------
       BOUTON + / -
       ----------------------------------------------------- */

    body .jade-mobile-submenu-toggle {
        width: 36px;
        height: 36px;

        flex: 0 0 36px;

        padding: 0;

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

        border: 0;

        background: transparent;

        color: #9b7154;

        cursor: pointer;
    }

    body .jade-mobile-submenu-toggle span {
        position: relative;

        width: 24px;
        height: 24px;

        display: block;

        border:
            1px solid rgba(151,108,77,.17);

        border-radius: 999px;

        background:
            rgba(255,255,255,.65);
    }

    body .jade-mobile-submenu-toggle span::before,
    body .jade-mobile-submenu-toggle span::after {
        content: "";

        position: absolute;

        left: 50%;
        top: 50%;

        width: 8px;
        height: 1px;

        background: currentColor;

        transform:
            translate(-50%,-50%);

        transition:
            opacity .18s ease,
            transform .18s ease;
    }

    body .jade-mobile-submenu-toggle span::after {
        transform:
            translate(-50%,-50%)
            rotate(90deg);
    }

    body .jade-mobile-menu__item.is-open
    > .jade-mobile-menu__row
    .jade-mobile-submenu-toggle
    span::after {
        opacity: 0;
    }


    /* -----------------------------------------------------
       ACCORDEONS
       ----------------------------------------------------- */

    body .jade-mobile-submenu {
        display: grid;

        grid-template-rows: 0fr;

        opacity: 0;
        visibility: hidden;

        transition:
            grid-template-rows .27s ease,
            opacity .20s ease,
            visibility .27s ease;
    }

    body .jade-mobile-submenu
    > .jade-mobile-menu__level {
        min-height: 0;

        overflow: hidden;
    }

    body .jade-mobile-menu__item.is-open
    > .jade-mobile-submenu {
        grid-template-rows: 1fr;

        opacity: 1;
        visibility: visible;
    }


    /* -----------------------------------------------------
       NIVEAU 1
       ----------------------------------------------------- */

    body .jade-mobile-menu__level--1 {
        margin:
            0 0
            8px 5px;

        padding:
            4px 0
            8px 14px;

        border-left:
            1px solid rgba(160,111,77,.20);
    }

    body .jade-mobile-menu__level--1
    .jade-mobile-menu__row {
        min-height: 43px;
    }

    body .jade-mobile-menu__level--1
    .jade-mobile-menu__link,

    body .jade-mobile-menu__level--1
    .jade-mobile-menu__link--single {
        padding:
            11px 3px;

        color: #5f4b3e;

        font-size: 12px;
        font-weight: 700;

        line-height: 1.35;
    }


    /* -----------------------------------------------------
       NIVEAUX 2+
       ----------------------------------------------------- */

    body .jade-mobile-menu__level--2,
    body .jade-mobile-menu__level--3,
    body .jade-mobile-menu__level--4 {
        margin:
            0 0
            5px 6px;

        padding-left: 12px;

        border-left:
            1px solid rgba(166,123,91,.14);
    }

    body .jade-mobile-menu__level--2
    .jade-mobile-menu__row,

    body .jade-mobile-menu__level--3
    .jade-mobile-menu__row,

    body .jade-mobile-menu__level--4
    .jade-mobile-menu__row {
        min-height: 36px;
    }

    body .jade-mobile-menu__level--2
    .jade-mobile-menu__link,

    body .jade-mobile-menu__level--2
    .jade-mobile-menu__link--single,

    body .jade-mobile-menu__level--3
    .jade-mobile-menu__link,

    body .jade-mobile-menu__level--3
    .jade-mobile-menu__link--single,

    body .jade-mobile-menu__level--4
    .jade-mobile-menu__link,

    body .jade-mobile-menu__level--4
    .jade-mobile-menu__link--single {
        padding:
            8px 2px;

        color: #79685d;

        font-size: 11px;
        font-weight: 500;

        line-height: 1.4;
    }


    /* -----------------------------------------------------
       ETAT COURANT
       ----------------------------------------------------- */

    body .jade-mobile-menu__item.is-current
    > .jade-mobile-menu__row
    > .jade-mobile-menu__link,

    body .jade-mobile-menu__item.is-current
    > .jade-mobile-menu__link--single {
        color: #a16e4b;
    }


    /* -----------------------------------------------------
       FOOTER
       ----------------------------------------------------- */

    body .jade-mobile-panel__footer {
        position: relative;

        flex: 0 0 auto;

        padding:
            14px 20px
            max(16px,env(safe-area-inset-bottom));

        display: grid;

        grid-template-columns:
            1fr 1fr;

        gap: 9px;

        border-top:
            1px solid rgba(77,58,46,.08);

        background:
            rgba(255,253,249,.96);
    }

    body .jade-mobile-panel__footer a {
        min-height: 43px;

        padding:
            0 10px;

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

        border:
            1px solid rgba(85,63,50,.10);

        border-radius: 8px;

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

        color: #5d493c;

        text-decoration: none;

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

        letter-spacing: .05em;
        text-transform: uppercase;
    }

}


/* =========================================================
   PETITS TELEPHONES
   ========================================================= */

@media (max-width: 480px) {

    body #jade-mobile-panel {
        width: min(92vw, 372px);
    }

    body #jade-mobile-panel
    .jade-mobile-panel__head {
        min-height: 100px;

        padding-inline: 19px;
    }

    body .jade-mobile-panel__content {
        padding-inline: 18px;
    }

    body .jade-mobile-panel__footer {
        padding-inline: 18px;
    }

}