/**
* Theme Name: Menuiserie Clément
* Description: Theme enfant du thème WP Made Simple de Publigo
* Author: Hervé - Publigo
* Author URI: https://www.publigo.fr
* Template: wpms-theme 
* Version: 1.0
* Text Domain: menuiserie-clement
*/

/*****************************************************
* Ajout de ces lignes au début du fichier style.css du thème enfant (:root et body à ajuster en fonction de la taille du texte en pixels sur une page intérieure de la maquette)
*******************************************************/

@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Instrument+Serif:ital@0;1&display=swap');

* {
    transition:
        color 0.35s,
        fill 0.35s,
        background 0.35s,
        padding 0.35s,
        height 0.35s,
        opacity 0.35s,
        transform 0.35s,
        top 0.35s,
        left 0.35s,
        bottom 0.35s,
        right 0.35s,
        width 0.35s;

}

:root {
    --black: #231F20;
    --yellow: #FFC20C;
    --green: #090;
}

html,
body {
    overflow-x: hidden;
}

html {
    font-size: 62.5%;
    max-width: min(105.6vw, 192rem);
    min-height: 100dvh;
    /*    box-shadow: 0 0 4px rgba(0,0,0,0.42);*/
    /*    background: #eee;*/
    margin: auto;
    overflow-x: hidden;
}

body {
    font-family: "Instrument Serif", Verdana, sans-serif;
    font-size: clamp(1.4rem, 0.88vw, 1.6rem);
    color: var(--black);
    font-weight: 400;
    line-height: min(1.32vw, 2.4rem);
    position: relative;
    padding-bottom: min(2.75vw, 5rem);

    @media screen and (min-width: 48em) {
        padding-bottom: 0;
    }
}

img {
    max-width: 100%;
    height: auto;
}

@media screen and (min-width: 48em) {
    html {
        font-size: 54%;
    }
}

@media screen and (min-width: 62em) {
    html {
        font-size: 58%;
    }
}

@media screen and (min-width: 75em) {
    html {
        font-size: 62.5%;
    }
}

.home_media video {
    width: 100%;
    height: auto;
    aspect-ratio: 192 / 90;
    background: #000;
}


header {
    position: relative;
    z-index: 3;
}

/* MENU */
nav#menu_panel {
    position: relative;
    width: 100%;

    & div#left_pan {
        z-index: 11;
        overflow: hidden;
        position: absolute;
        top: 0;
        left: 0;
        background: #fff;
        width: 30%;
        height: 100vh;
        display: flex;
        align-items: flex-end;
        transform: translateX(-100%);

        & svg {
            display: block;
            width: 55vw;
            height: auto;
            flex-shrink: 0;
            margin-bottom: max(-3.5vw, -3.5rem);
            margin-left: max(-4.1vw, -4.1rem);
        }

        & path {
            fill: rgba(35, 31, 32, 0.02);
        }

        &:has(a:hover) svg {
            width: 45vw;
        }

        & #left_content {
            position: absolute;
            height: 100%;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 2.3vw;

            & #menu_logo a {
                display: block;
            }

            & #address_top {
                display: flex;
                flex-direction: column;
                gap: 0.6vw;
                text-align: center;
                align-items: center;
                color: var(--black);
                font-size: clamp(1.4rem, 1.1vw, 2rem);
                line-height: min(0.99vw, 1.8rem);

                & a {
                    color: var(--black);
                    font-size: clamp(1.4rem, 1.1vw, 2rem);
                    font-weight: 600;
                }
            }
        }

    }
}

.openMainMenu {
    & nav#menu_panel div:is(#left_pan, #right_pan) {
        transform: translateX(0);

        & div#nav_panel div {
            transform: translate(0);
            opacity: 1;
        }
    }
}

div#right_pan {
    z-index: 11;
    width: 70%;
    height: 100vh;
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    background-color: var(--black);
    background-image: url(assets/images/avif/bois_fond_noir.avif);
    background-size: cover;
    background-position: bottom left;
    background-repeat: no-repeat;
    align-items: center;
    justify-content: center;
    transform: translateX(100%);

}

#nav_panel {
    display: flex;
    gap: min(11.55vw, 21rem);

    & #main-menu>li>span {
        gap: min(0.66vw, 1.2rem);
        display: flex;
        align-items: center;
        justify-content: space-between;

        & svg {
            width: min(1.815vw, 3.3rem);
            height: min(1.815vw, 3.3rem);
            cursor: pointer;
            padding: min(0.55vw, 1rem);

            & rect {
                fill: #fff;
            }

            &:hover {
                padding: min(0.275vw, 0.5rem);

                & rect {
                    fill: var(--yellow);
                }
            }
        }

        & a {
            font-size: clamp(2.75rem, 2.75vw, 5rem);
            line-height: 1;
        }

    }


    & ul#top-menu {
        display: flex;
        flex-direction: column;
        gap: min(1.1vw, 2rem);
    }

    & a {
        color: #fff;
        font-size: clamp(1.4rem, 1.1vw, 2rem);
        line-height: 1.25;

        &:hover {
            color: var(--yellow);
        }
    }

    & :is(.current_page_item, .current_page_ancestor span)>a {
        color: var(--yellow);

    }

    & .submenu_open .sub-menu a {
        height: min(1.87vw, 3.4rem);
        opacity: 1;
        transform: rotateX(0deg);

    }

    & .sub-menu {

        padding: min(0.55vw, 1rem) 0 min(2.2vw, 4rem);

        & a {
            transform: rotateX(90deg);
            height: 0;
            opacity: 0;
            display: flex;
            align-items: center;
            overflow: hidden;
            font-family: "Instrument Sans";
        }
    }
}

div#nav_panel div {
    transform: translate(min(27.5vw, 50rem));
    opacity: 0;
    transition: all .5s ease-out;
}

div#nav_panel div:nth-child(2) {
    transition: all .7s ease-out;

}

div#close_menu {
    position: absolute;
    top: min(2.75vw, 5rem);
    right: min(6.6vw, 12rem);
    color: rgba(255, 255, 255, 0.65);
    leading-trim: both;
    text-edge: cap;
    font-family: "Instrument Serif";
    font-size: clamp(1.4rem, 1.1vw, 2rem);
    font-style: normal;
    font-weight: 400;
    line-height: min(1.375vw, 2.5rem);
    padding: min(1.1vw, 2rem);
    cursor: pointer;

    &:hover {
        color: var(--yellow);
    }
}


#header_logo {
    position: absolute;
    z-index: 9;
    margin: 0;
    padding: 0;
    width: min(17.6vw, 32rem);
    height: min(13.75vw, 25rem);
}

div#navbar {
    position: absolute;
    z-index: 9;
    right: min(8.8vw, 16rem);
    width: calc(100% - min(26.4vw, 48rem));
    height: min(7.15vw, 13rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: solid min(0.055vw, 0.1rem) rgba(255, 255, 255, 0.25);

    & #address_top {
        display: flex;
        flex-direction: column;
        color: #FFF;
        font-size: clamp(1.4rem, 1.1vw, 2rem);

        & a {
            color: #FFF;
            font-family: "Instrument Sans";
            font-weight: 600;

            &:hover {
                color: var(--yellow);
            }
        }
    }

    & #nav_buttons {
        display: flex;
        gap: min(1.65vw, 3rem);
        align-items: center;

        & div#menu_open {
            display: flex;
            align-items: center;
            gap: min(0.55vw, 1rem);
            color: #FFF;
            font-family: "Instrument Sans";
            font-size: clamp(1.4rem, 0.88vw, 1.6rem);
            line-height: min(1.485vw, 2.7rem);
            text-transform: uppercase;
            cursor: pointer;

            &:hover {
                color: var(--yellow);

                & rect {
                    fill: var(--yellow);
                }
            }

            & rect {
                fill: #fff;
            }
        }

        & div#header_socials a {
            & path {
                fill: #fff;

            }

            &:hover path {
                fill: var(--yellow);
            }
        }

    }
}

div#header_banner {
    position: relative;

    &:after {
        content: "";
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, rgba(0, 0, 0, 0.00) 8.67%, rgba(0, 0, 0, 0.68) 66.56%);
        z-index: 2;
        top: 0;
        left: 0;
    }

    & .home_media {
        position: relative;
        z-index: 1;

        & video {
            display: block;
        }
    }

    & img {
        display: block;
    }

    & div:is(#home_header, #header_inner) {
        position: absolute;
        z-index: 3;
        width: calc(100% - min(17.6vw, 32rem));
        height: calc(100% - min(7.15vw, 13rem));
        top: min(7.15vw, 13rem);
        left: min(8.8vw, 16rem);
        display: flex;
        justify-content: center;
        align-items: center;
        border-right: solid min(0.055vw, 0.1rem) rgba(255, 255, 255, 0.25);

        & #page_short_title {
            color: #fff;
            text-align: center;
            font-size: clamp(5rem, 5vw, 9rem);
            line-height: 0.95;
            position: relative;

            &:after,
            &:before {
                content: "";
                display: block;
                width: min(2.97vw, 5.4rem);
                height: min(0.11vw, 0.2rem);
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
            }

            &:before {
                background: var(--yellow);
                top: max(-0.165vw, -0.3rem);
                margin-right: min(0.825vw, 1.5rem);
            }

            &:after {
                background: var(--green);
                top: max(-0.275vw, -0.5rem);
                margin-left: min(0.825vw, 1.5rem);
            }
        }

        &:after {
            content: "";
            display: block;
            width: min(0.055vw, 0.1rem);
            height: min(5.5vw, 10rem);
            background: rgba(255, 255, 255, 0.25);
            position: absolute;
            bottom: 0;
            left: 50%;
        }

        &:before {
            content: "";
            display: block;
            width: min(0.055vw, 0.1rem);
            height: calc(100% - min(7.7vw, 14rem));
            background: rgba(255, 255, 255, 0.25);
            position: absolute;
            bottom: 0;
            left: 0;
        }

        & div#gallery {
            position: relative;
            width: min(35.2vw, 64rem);
            height: min(33vw, 60rem);
            margin-right: max(-8.8vw, -16rem);

            & picture {
                & img {
                    display: inline-block;
                    transform-origin: right;
                    position: absolute;
                    height: 100%;
                    width: auto;
                    top: 0;
                }

                &:nth-child(1) img {
                    left: 0;
                    transform: ;
                    z-index: 3;
                }

                &:nth-child(2) img {
                    transform: scale(0.9) translateX(-50%);
                    left: 50%;
                    z-index: 2;
                }

                &:nth-child(3) img {
                    transform: scale(0.7);
                    right: 0;
                    z-index: 1;
                }
            }

            & a {
                position: absolute;
                bottom: max(-2.75vw, -5rem);
                left: 0;
                color: #fff;
                font-family: "Instrument Sans";
                font-size: clamp(1.4rem, 0.77vw, 1.4rem);
                line-height: min(1.32vw, 2.4rem);
                letter-spacing: min(0.077vw, 0.14rem);
                text-transform: uppercase;

                & svg path {
                    fill: #fff;
                }

                &:hover {
                    color: var(--yellow);

                    & svg path {
                        fill: var(--yellow);
                    }
                }
            }

        }

        & div#home_header_content {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            gap: min(1.1vw, 2rem);

            & div {
                text-align: center;
                color: #fff;

                &.baseline {
                    font-family: "Instrument Sans";
                    font-size: clamp(1.4rem, 1.1vw, 2rem);
                    line-height: 1.2;
                    /* 120% */
                    letter-spacing: min(0.22vw, 0.4rem);
                    text-transform: uppercase;
                    position: relative;

                    &:after,
                    &:before {
                        content: "";
                        display: block;
                        width: min(2.97vw, 5.4rem);
                        height: min(0.11vw, 0.2rem);
                        position: absolute;
                        left: 50%;
                        transform: translateX(-50%);
                    }

                    &:before {
                        background: var(--yellow);
                        bottom: max(-0.165vw, -0.3rem);
                        margin-right: min(0.825vw, 1.5rem);
                    }

                    &:after {
                        background: var(--green);
                        bottom: max(-0.275vw, -0.5rem);
                        margin-left: min(0.825vw, 1.5rem);
                    }
                }

                &.title {
                    font-size: clamp(4.95rem, 4.95vw, 9rem);
                    line-height: 1;
                    /* 93.333% */
                }

                &.extract {
                    font-family: "Instrument Sans";
                    font-size: clamp(1.4rem, 0.99vw, 1.8rem);
                    line-height: 1.4;
                    /* 138.889% */
                }
            }

            & .btn_list {
                display: flex;
                justify-content: center;
                gap: min(0.88vw, 1.6rem);
                padding-top: min(0.55vw, 1rem);

                & a {
                    padding: min(0.66vw, 1.2rem) min(0.99vw, 1.8rem);
                    background: var(--yellow);
                    color: var(--black);
                    font-family: "Instrument Sans";
                    font-size: clamp(1.4rem, 0.77vw, 1.4rem);
                    line-height: 1.9;
                    /* 192.857% */
                    text-transform: uppercase;

                    &:hover {
                        background: #fff;
                    }
                }
            }
        }
    }

    & div#header_inner:after {
        background: rgba(35, 31, 32, 0.25);
        bottom: unset;
        top: 100%;
    }
}

.home div#footer_thematic {
    width: calc(100% - min(17.6vw, 32rem));
    border-left: solid 1px rgba(35, 31, 32, 0.10);
    border-right: solid 1px rgba(35, 31, 32, 0.10);
    margin: auto;
}

div#footer_thematic {
    display: flex;
    position: relative;

    & svg {
        display: block;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1;
        fill: rgba(35, 31, 32, 0.10);
        height: 100%;
    }

    &>div {
        position: relative;
        z-index: 2;
        width: 50%;
    }

    & .left_part {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;

        & .baseline {
            position: relative;
            text-align: center;
            font-family: "Instrument Sans";
            font-size: clamp(1.3rem, 1.3vw, 1.6rem);
            line-height: 1.1875;
            letter-spacing: 3.2px;
            text-transform: uppercase;

            &:after,
            &:before {
                content: "";
                display: block;
                width: min(1.62vw, 5.4rem);
                height: min(0.11vw, 0.2rem);
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
            }

            &:before {
                background: var(--yellow);
                bottom: max(-0.151vw, -0.5rem);
                margin-right: min(0.825vw, 1.5rem);
            }

            &:after {
                background: var(--green);
                bottom: max(-0.269vw, -0.7rem);
                margin-left: min(0.825vw, 1.5rem);
            }
        }

        & h2.title {
            text-align: center;
            font-family: "Instrument Serif";
            font-size: clamp(3.85rem, 3.85vw, 7rem);
            line-height: 0.957;
            padding: min(1.65vw, 3rem) 0 min(3.85vw, 7rem);
        }

        & a {
            color: var(--black);
            font-family: "Instrument Sans";
            font-size: clamp(1.3rem, 1.3vw, 1.4rem);
            line-height: 1.9;
            text-transform: uppercase;
            padding: min(0.66vw, 1.2rem) min(0.99vw, 1.8rem);
            background: var(--yellow);

            &:hover {
                background: black;
                color: #fff;
            }
        }
    }

    & .right_part img {
        display: block;
        width: min(80rem, 44vw);
        height: auto;
    }
}

.home div#footer_galery {
    width: calc(100% - min(17.6vw, 32rem));
    border-left: solid 1px rgba(35, 31, 32, 0.10);
    border-right: solid 1px rgba(35, 31, 32, 0.10);
    margin: auto;
}

div#footer_galery {
    padding-top: min(10.45vw, 19rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;

    & h2 {
        color: #231F20;
        text-align: center;
        font-family: "Instrument Serif";
        font-size: clamp(3.85rem, 3.85vw, 7rem);
        font-style: normal;
        font-weight: 400;
        line-height: 0.96;
        text-transform: uppercase;
    }

    & a {
        display: flex;
        padding: min(0.66vw, 1.2rem) min(0.99vw, 1.8rem);
        justify-content: center;
        align-items: center;
        gap: min(0.55vw, 1rem);
        background: #231F20;
        color: #FFF;
        text-align: center;
        font-family: "Instrument Sans";
        font-size: clamp(1.4rem, 0.77vw, 1.4rem);
        font-style: normal;
        font-weight: 400;
        line-height: 1.93;
        text-transform: uppercase;

        &:hover {
            background: var(--yellow);
        }
    }

    & div#controls {
        display: flex;
        width: 27vw;
        justify-content: space-between;
        position: absolute;
        bottom: max(-1.65vw, -3rem);
        left: 50%;
        transform: translate(-50%);

        & div {
            width: min(3.3vw, 6rem);
            height: min(3.3vw, 6rem);
            border-radius: 50%;
            background: #2222;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;

            &.prev {
                transform: rotate(180deg);
            }

            & svg {
                width: min(1.1vw, 2rem);
                height: auto;
                fill: #fff;
            }

            &:hover {
                background: var(--yellow);
            }
        }
    }
}

.images {
    margin: 0 -1vw;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    margin-bottom: max(-16.5vw, -30rem);

    & .visuel {
        padding: 1vw;
        width: 19.5vw;
        height: min(33vw, 60rem);
        display: flex;
        align-items: center;
        justify-content: center;

        &.slick-center {
            width: 24vw;
        }
    }
}

.bottom_footer {
    position: relative;
    z-index: 1;

    & img {
        display: block;
    }

    & div#footer_content {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        padding: min(16.5vw, 30rem) 0 min(5.5vw, 10rem);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: min(2.75vw, 5rem);

        & div#footer_socials {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            & :is(div, a) {
                color: #FFF;
                font-family: "Instrument Sans";
                font-size: clamp(1.4rem, 0.88vw, 1.6rem);
                line-height: 1.2;
                letter-spacing: min(0.088vw, 0.16rem);
                text-transform: uppercase;
                text-align: center;
            }

            & a:hover {
                color: var(--yellow);
            }
        }

        & div#footer_address {
            color: rgba(255, 255, 255, 0.70);
            text-align: center;
            leading-trim: both;
            text-edge: cap;
            font-family: "Instrument Serif";
            font-size: clamp(1.4rem, 1.1vw, 2rem);
            font-style: normal;
            font-weight: 400;
            line-height: 1.25;
        }

        div#footer_info {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: min(2.2vw, 4rem);

            & div#footer_contact {
                display: flex;
                flex-wrap: wrap;
                gap: min(1.1vw, 2rem);

                & a {
                    color: #000;
                    text-align: center;
                    font-family: "Instrument Sans";
                    font-size: clamp(1.4rem, 0.77vw, 1.4rem);
                    font-style: normal;
                    font-weight: 400;
                    line-height: 1.93;
                    text-transform: uppercase;
                    display: inline-flex;
                    padding: min(0.66vw, 1.2rem) min(0.99vw, 1.8rem);
                    justify-content: center;
                    align-items: center;
                    gap: min(0.55vw, 1rem);
                    background: #FFF;

                    &:hover {
                        background: var(--yellow);
                    }
                }
            }

            & nav.mentions-navigation {
                position: absolute;
                bottom: 0;
                left: 50%;
                width: calc(100% - min(17.6vw, 32rem));
                transform: translateX(-50%);
                border-top: solid 1PX rgba(255, 255, 255, 0.20);

                ul {
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                    flex-wrap: wrap;
                    margin: 0;

                    & a {
                        color: rgba(255, 255, 255, 0.40);
                        text-align: center;
                        font-family: "Instrument Sans";
                        font-size: clamp(1.4rem, 0.77vw, 1.4rem);
                        font-style: normal;
                        font-weight: 400;
                        line-height: 1.35;
                        letter-spacing: min(0.0385vw, 0.07rem);
                        text-transform: uppercase;
                        padding: min(2.2vw, 4rem) min(1.1vw, 2rem);
                        display: block;

                    }
                }

            }

        }

    }
}

div#partners {
    padding: 6.5rem;

    & h2 {
        font-size: clamp(1.4rem, 1.2vw, 2rem);
        font-weight: normal;
        line-height: 1.25;
        text-align: center;
    }

    div#partner_list {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

main#page {
    padding: min(8.25vw, 15rem) min(19.25vw, 35rem) min(4.4vw, 8rem);
    position: relative;

    & article {
        position: relative;
        z-index: 2;
    }

    & div:not(.wp-block-column)> :is(p, h1, h2, h3, h4) {
        text-align: center;
    }

    & h1 {
        color: #231F20;
        text-align: center;
        font-family: "Instrument Sans";
        font-size: clamp(2.475rem, 2.475vw, 4.5rem);
        font-style: normal;
        font-weight: 500;
        line-height: 1.22;
        /* 122.222% */
        letter-spacing: min(0.2475vw, 0.45rem);
        text-transform: uppercase;
    }

    & h2 {
        color: #3D3B3A;
        font-family: "Instrument Serif";
        font-size: clamp(1.925rem, 1.925vw, 3.5rem);
        font-style: normal;
        font-weight: 400;
        line-height: 1.37;
        /* 137.143% */
        text-transform: uppercase;

    }

    & :is(p, li, div) {
        color: #231F20;
        font-family: "Instrument Serif";
        font-size: clamp(1.4rem, 1.1vw, 2rem);
        font-style: normal;
        font-weight: 400;
        line-height: 1.6;
        /* 160% */

    }

    & a {
        color: var(--yellow);

        &:hover {
            color: var(--green);
        }
    }

    &:after {
        content: "";
        position: absolute;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        background-image: url(assets/images/avif/bois.avif);
        background-size: 75%;
        background-position: bottom right;
        background-repeat: no-repeat;
    }

    & div#child_list {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: min(2.2vw, 4rem);

        & .child {
            width: calc(50% - min(1.1vw, 2rem));

            & .title {
                color: #3D3B3A;
                font-family: "Instrument Serif";
                font-size: clamp(1.925rem, 1.925vw, 3.5rem);
                font-style: normal;
                font-weight: 400;
                line-height: 1.37;
                text-transform: uppercase;
                display: flex;
                align-items: center;
                justify-content: space-between;

                & a {
                    display: inline-flex;
                    padding: min(0.66vw, 1.2rem) min(0.99vw, 1.8rem);
                    justify-content: center;
                    align-items: center;
                    gap: min(0.55vw, 1rem);
                    background: #231F20;
                    color: #FFF;
                    text-align: center;
                    font-family: "Instrument Sans";
                    font-size: clamp(1.4rem, 0.77vw, 1.4rem);
                    font-style: normal;
                    font-weight: 400;
                    line-height: 1.93;
                    text-transform: uppercase;
                }
            }
        }
    }
}

.more_image {
    display: block;
}

div#more_listing {
    padding: min(4.675vw, 8.5rem) min(17.875vw, 32.5rem);
    background: var(--black);
    display: flex;
    flex-direction: column;
    gap: min(1.925vw, 3.5rem);

    .info {
        display: flex;
        gap: min(3.3vw, 6rem);

        & .titre {
            color: #FFC20C;
            font-family: "Instrument Serif";
            font-size: clamp(1.65rem, 1.65vw, 3rem);
            font-style: normal;
            font-weight: 400;
            line-height: 1.07;
            width: min(21.01vw, 38.2rem);
            flex-shrink: 0;
        }

        & .contenu {
            color: rgba(255, 255, 255, 0.93);
            font-family: "Instrument Serif";
            font-size: clamp(1.4rem, 1.1vw, 2rem);
            font-style: normal;
            font-weight: 400;
            line-height: 1.6;
            /* 160% */
        }
    }
}

main#page {
    padding: min(8.25vw, 15rem) min(19.25vw, 35rem) min(4.4vw, 8rem);
    position: relative;

    & article {
        position: relative;
        z-index: 2;
    }

    & div:not(.wp-block-column)> :is(p, h1, h2, h3, h4) {
        text-align: center;
    }

    & h1 {
        color: #231F20;
        text-align: center;
        font-family: "Instrument Sans";
        font-size: clamp(2.475rem, 2.475vw, 4.5rem);
        font-style: normal;
        font-weight: 500;
        line-height: 1.22;
        /* 122.222% */
        letter-spacing: min(0.2475vw, 0.45rem);
        text-transform: uppercase;
    }

    & h2 {
        color: #3D3B3A;
        font-family: "Instrument Serif";
        font-size: clamp(1.925rem, 1.925vw, 3.5rem);
        font-style: normal;
        font-weight: 400;
        line-height: 1.37;
        /* 137.143% */
        text-transform: uppercase;

    }

    & :is(p, li, div) {
        color: #231F20;
        font-family: "Instrument Serif";
        font-size: clamp(1.4rem, 1.1vw, 2rem);
        font-style: normal;
        font-weight: 400;
        line-height: 1.6;
        /* 160% */

    }

    & a {
        color: var(--yellow);

        &:hover {
            color: var(--green);
        }
    }

    &:after {
        content: "";
        position: absolute;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        background-image: url(assets/images/avif/bois.avif);
        background-size: 75%;
        background-position: bottom right;
        background-repeat: no-repeat;
    }

    & div#child_list {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: min(2.2vw, 4rem);

        & .child {
            width: calc(50% - min(1.1vw, 2rem));

            & .title {
                color: #3D3B3A;
                font-family: "Instrument Serif";
                font-size: clamp(1.925rem, 1.925vw, 3.5rem);
                font-style: normal;
                font-weight: 400;
                line-height: 1.37;
                text-transform: uppercase;
                display: flex;
                align-items: center;
                justify-content: space-between;

                & a {
                    display: inline-flex;
                    padding: min(0.66vw, 1.2rem) min(0.99vw, 1.8rem);
                    justify-content: center;
                    align-items: center;
                    gap: min(0.55vw, 1rem);
                    background: #231F20;
                    color: #FFF;
                    text-align: center;
                    font-family: "Instrument Sans";
                    font-size: clamp(1.4rem, 0.77vw, 1.4rem);
                    font-style: normal;
                    font-weight: 400;
                    line-height: 1.93;
                    text-transform: uppercase;
                }
            }
        }
    }
}

.more_image {
    display: block;
}

div#more_listing {
    padding: min(4.675vw, 8.5rem) min(17.875vw, 32.5rem);
    background: var(--black);
    display: flex;
    flex-direction: column;
    gap: min(1.925vw, 3.5rem);

    .info {
        display: flex;
        gap: min(3.3vw, 6rem);

        & .titre {
            color: #FFC20C;
            font-family: "Instrument Serif";
            font-size: clamp(1.65rem, 1.65vw, 3rem);
            font-style: normal;
            font-weight: 400;
            line-height: 1.07;
            width: min(21.01vw, 38.2rem);
            flex-shrink: 0;
        }

        & .contenu {
            color: rgba(255, 255, 255, 0.93);
            font-family: "Instrument Serif";
            font-size: clamp(1.4rem, 1.1vw, 2rem);
            font-style: normal;
            font-weight: 400;
            line-height: 1.6;
            /* 160% */
        }
    }
}

div#home_content {
    width: calc(100% - min(17.6vw, 32rem));
    border-left: solid 1px rgba(35, 31, 32, 0.10);
    border-right: solid 1px rgba(35, 31, 32, 0.10);
    margin: auto;
    position: relative;
    padding: min(4.675vw, 8.5rem) min(22.55vw, 41rem) min(2.255vw, 4.1rem);
    z-index: 2;
    background: #fff;
    & .content{
        position: relative;
        z-index: 2;
    }

    & img#home_content_1 {
        position: absolute;
        top: 0;
        left: 0;
        width: min(32rem, 17.6vw);
    }

    img#home_content_2 {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: min(26.7rem, 14.685vw);
    }

    & svg {
        opacity: 0.2;
        width: min(7.59vw, 13.8rem);
        height: auto;
    }

    & .baseline {
        color: rgba(35, 31, 32, 0.40);
        text-align: center;
        leading-trim: both;
        text-edge: cap;
        font-family: "Instrument Serif";
        font-size: clamp(1.65rem, 1.65vw, 3rem);
        font-style: normal;
        font-weight: 400;
        line-height: 1.07;
        /* 106.667% */

    }

    & .title {
        color: #3D3B3A;
        text-align: center;
        leading-trim: both;
        text-edge: cap;
        font-family: "Instrument Serif";
        font-size: clamp(8.8rem, 8.8vw, 16rem);
        font-style: normal;
        font-weight: 400;
        line-height: 1;
    }

    &:after {
        content: "";
        position: absolute;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        background-image: url(assets/images/avif/bois.avif);
        background-size: 100%;
        background-position: bottom right;
        background-repeat: no-repeat;
    }

    & h2 {
        color: #231F20;
        text-align: center;
        font-family: "Instrument Sans";
        font-size: clamp(1.76rem, 1.76vw, 3.2rem);
        font-style: normal;
        font-weight: 400;
        line-height: 1.22;
        /* 121.875% */
        text-transform: uppercase;
    }

    & :is(p, li, div) {
        color: #3D3B3A;
        text-align: center;
        font-family: "Instrument Serif";
        font-size: clamp(1.4rem, 1.1vw, 2rem);
        font-style: normal;
        font-weight: 400;
        line-height: 1.6;
        /* 160% */
    }
    & a{
        color: var(--yellow);
        &:hover{
            color: var(--green);
        }
    }
}

img#home_content_3 {
    display: block;
    margin: auto;
    width: calc(100% - min(17.6vw, 32rem));
    border-left: solid 1px rgba(35, 31, 32, 0.10);
    border-right: solid 1px rgba(35, 31, 32, 0.10);
    position: relative;
    z-index: 2;
}

footer.footer {
    position: relative;
    z-index: 2;
    background: #fff;
}

div#home_thematic_1 {
    width: calc(100% - min(17.6vw, 32rem));
    border-left: solid 1px rgba(35, 31, 32, 0.10);
    border-right: solid 1px rgba(35, 31, 32, 0.10);
    position: relative;
    margin: auto;
    display: flex;
    padding: min(5.5vw, 10rem) 0;

    &:before {
        content: "";
        width: 100%;
        height: min(5.5vw, 10rem);
        display: block;
        background: linear-gradient(#fff, #fff0);
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
    }

    &:after {
        content: "";
        width: 100%;
        height: min(5.5vw, 10rem);
        display: block;
        background: linear-gradient(#fff0, #fff);
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 2;
    }

    & .home_thematic_left {
        position: fixed;
        top: 0;
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        z-index: 1;
        gap: min(1.65vw, 3rem);

        & .home_thematic_title {
            color: #231F20;
            font-family: "Instrument Serif";
            font-size: clamp(3.3rem, 3.3vw, 6rem);
            font-style: normal;
            font-weight: 400;
            line-height: 1;
        }

        & .home_thematic_excerpt :is(p, div, li) {
            color: #827679;
            leading-trim: both;
            text-edge: cap;
            font-family: "Instrument Sans";
            font-size: clamp(1.4rem, 0.99vw, 1.8rem);
            font-style: normal;
            font-weight: 400;
            line-height: 1.39;
        }
    }

    & .home_thematic_right {
        display: flex;
        flex-direction: column;
        gap: min(5.5vw, 10rem);
        position: relative;
        margin-left: auto;
        width: fit-content;

        .home_thematic_item {
            position: relative;

            & img {
                position: relative;
                display: block;
                width: min(80rem, 44vw);
            }

            & .content {
                position: absolute;
                bottom: 0;
                left: 0;
                z-index: 2;
                padding: min(2.2vw, 4rem) min(3.3vw, 6rem);
                width: 100%;

                & .header {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding-bottom: min(2.2vw, 4rem);
                    border-bottom: solid 1px rgba(255, 255, 255, 0.25);

                    & .title {
                        color: #FFF;
                        font-family: "Instrument Sans";
                        font-size: clamp(1.375rem, 1.375vw, 2.5rem);
                        font-style: normal;
                        font-weight: 500;
                        line-height: 1.16;
                        text-transform: uppercase;
                    }

                    & .excerpt {
                        color: #FFF;
                        leading-trim: both;
                        text-edge: cap;
                        font-family: "Instrument Sans";
                        font-size: clamp(1.4rem, 0.99vw, 1.8rem);
                        font-style: normal;
                        font-weight: 400;
                        line-height: 1.39;
                    }


                }

                & a {
                    color: #FFF;
                    text-align: center;
                    font-family: "Instrument Sans";
                    font-size: clamp(1.4rem, 0.77vw, 1.4rem);
                    font-style: normal;
                    font-weight: 400;
                    line-height: 1.93;
                    text-transform: uppercase;
                    display: inline-block;
                    margin-top: min(2.2vw, 4rem);

                    &:hover {
                        color: var(--yellow);
                    }
                }


            }

            &:after {
                content: "";
                background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.50) 100%);
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 1;
            }
        }
    }

}

div#home_thematic_2 {
    position: relative;
    z-index: 2;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(100% - min(17.6vw, 32rem));
    border-left: solid 1px rgba(35, 31, 32, 0.10);
    border-right: solid 1px rgba(35, 31, 32, 0.10);
    position: relative;
    margin: auto;
    padding-bottom: min(2.75vw, 5rem);

    & .home_thematic_baseline {
        color: #827679;
        leading-trim: both;
        text-edge: cap;
        font-family: "Instrument Sans";
        font-size: clamp(1.4rem, 1.1vw, 2rem);
        font-style: normal;
        font-weight: 400;
        line-height: 1.25;
    }

    & .home_thematic_title {
        color: #231F20;
        font-family: "Instrument Serif";
        font-size: clamp(3.85rem, 3.85vw, 7rem);
        font-style: normal;
        font-weight: 400;
        line-height: 1.07;
    }

    & .home_thematic_right {
        height: min(36.41vw, 66.2rem);
        display: flex;
        padding-left: min(49.5vw, 90rem);
        align-items: center;
        justify-content: center;
        flex-direction: column;
        flex-grow: 1;
        position: relative;

        & .links {
            display: flex;
            flex-direction: column;

            &:after {
                content: "";
                width: min(29.92vw, 54.4rem);
                z-index: 2;
                position: absolute;
                left: min(8.25vw, 15rem);
                top: 0;
                height: 100%;
                background-color: var(--yellow);
                transform: rotateZ(10deg);
                transition: transform 0.35s;
            }

            & a {
                padding: min(1.1vw, 2rem);
                color: #231F20;
                leading-trim: both;
                text-edge: cap;
                font-family: "Instrument Sans";
                font-size: clamp(1.265rem, 1.265vw, 2.3rem);
                font-style: normal;
                font-weight: 400;
                line-height: 1.39;
                /* 139.13% */
                text-transform: uppercase;

                &:hover {
                    color: var(--yellow);
                }
            }

            & picture {
                position: absolute;
                z-index: 3;
                left: min(8.25vw, 15rem);
                top: 0;
                opacity: 0;

                & img {
                    height: 100%;
                    width: min(29.92vw, 54.4rem);
                }

                &:nth-child(5) {
                    opacity: 1;
                }
            }

            & a:nth-child(2):hover {
                &~picture:nth-child(6) {
                    opacity: 1;
                }

                &~:after {
                    background-color: #000;
                }
            }

            & a:nth-child(3):hover {
                &~picture:nth-child(7) {
                    opacity: 1;
                }
            }

            & a:nth-child(4):hover {
                &~picture:nth-child(8) {
                    opacity: 1;
                }

                &~ ::after {
                    background-color: #000;
                }
            }

            &:has(a:nth-child(4):hover):after,
            &:has(a:nth-child(2):hover):after {
                transform: rotateZ(-10deg);
            }
        }

    }
}

div#home_thematic_3 {
    position: relative;
    z-index: 2;
    background-color: #fff;
    padding-top: min(11vw, 20rem);
    width: calc(100% - min(17.6vw, 32rem));
    border-left: solid 1px rgba(35, 31, 32, 0.10);
    border-right: solid 1px rgba(35, 31, 32, 0.10);
    margin: auto;

    &:after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 90%;
        height: 100%;
        z-index: 1;
        background-image: url(assets/images/avif/bois.avif);
        background-size: 100%;
        background-position: top left;
        background-repeat: no-repeat;
    }

    & .home_thematic_top {
        position: relative;
        z-index: 2;

        & .home_thematic_title {
            color: #3D3B3A;
            text-align: center;
            font-family: "Instrument Serif";
            font-size: clamp(4.95rem, 4.95vw, 9rem);
            font-style: normal;
            font-weight: 400;
            line-height: 0.93;
        }

        & .home_thematic_excerpt {
            padding-top: min(1.265vw, 2.3rem);
            color: #3D3B3A;
            text-align: center;
            leading-trim: both;
            text-edge: cap;
            font-family: "Instrument Sans";
            font-size: clamp(1.4rem, 0.99vw, 1.8rem);
            font-style: normal;
            font-weight: 400;
            line-height: 1.39;
        }
    }

    & .home_thematic_bot {
        display: flex;
        gap: min(0.605vw, 1.1rem);
        justify-content: center;
        position: relative;
        z-index: 2;
        padding-top: min(8.8vw, 16rem);
        align-items: flex-start;

        & .home_thematic_item {
            position: relative;

            & img {
                display: block;
                position: relative;
                z-index: 1;
            }

            & .content {
                position: absolute;
                bottom: 0;
                left: 0;
                z-index: 3;
                width: 100%;
                height: 100%;
                padding: min(2.97vw, 5.4rem) min(2.53vw, 4.6rem) min(3.685vw, 6.7rem);
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                & .title {
                    color: #FFF;
                    font-family: "Instrument Sans";
                    font-size: clamp(1.925rem, 1.925vw, 3.5rem);
                    font-style: normal;
                    font-weight: 400;
                    line-height: 1.2;
                    /* 120% */
                    text-transform: uppercase;

                    & span {
                        color: rgba(255, 255, 255, 0.45);
                        font-family: "Instrument Serif";
                        font-size: clamp(2.75rem, 2.75vw, 5rem);
                        font-style: normal;
                        font-weight: 400;
                        line-height: 1.68;
                        display: block;
                    }
                }

                & a {
                    display: block;
                    padding: min(0.66vw, 1.2rem) 0;
                    gap: min(0.55vw, 1rem);
                    color: #FFF;
                    font-family: "Instrument Sans";
                    font-size: clamp(1.4rem, 0.77vw, 1.4rem);
                    font-style: normal;
                    font-weight: 400;
                    line-height: 1.93;
                    text-transform: uppercase;
                    border-top: solid 1px rgba(255, 255, 255, 0.45);

                    &:hover {
                        padding: min(0.66vw, 1.2rem);
                    }
                }
            }

            &:after {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 2;
                opacity: 0.8;
                transition: all 0.35s;
            }

            &:nth-child(1) {
                transform: translateY(max(-15.95vw, -29rem));

                &:after {
                    background: #002654;
                }
            }

            &:nth-child(2) {
                &:after {
                    background: var(--black);
                }
            }

            &:nth-child(3) {
                transform: translateY(max(-15.95vw, -29rem));

                &:after {
                    background: var(--yellow);
                }
            }

            &:has(a:hover):after {
                opacity: 0.4;
            }
        }
    }

}

.no-scroll {
    overflow: hidden;
}

@media(min-width:768px) {

    div#footer_thematic.wait {
        & .left_part {
            transform: translateX(-100%);
            opacity: 0;
        }

        & .right_part {
            transform: translateX(100%);
            opacity: 0;
        }

        & svg {
            transform: translateY(100%);
            opacity: 0;
        }

    }

    header.wait {
        & .title_block {
            transform: translateY(-100%);
            opacity: 0;
        }

        & .btn_list {
            transform: translateY(100%);
            opacity: 0;
        }

        & #gallery {
            transform: translateX(100%);
            opacity: 0;
        }

    }

    .wait {
        img#home_content_3 {
            transform: translateY(-100%) scale(0.2);
            opacity: 0;
        }

        div#home_content img#home_content_2 {
            right: 50%;
            transform: translate(50%, -50%);
            opacity: 0;
        }

        div#home_content img#home_content_1 {
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            opacity: 0;
        }

        div#home_content :is(div, p, li, h2, svg) {
            transform: scale(0.5);
            opacity: 0;
        }
    }

    div#home_thematic_3.wait {
        & .home_thematic_top {
            transform: translateY(-100%);
            opacity: 0;
        }

        & .home_thematic_bot {
            & .home_thematic_item {
                &:nth-child(1) {
                    transform: translate(-100%, -29rem);
                    opacity: 0;
                }

                &:nth-child(2) {
                    transform: translateY(100%);
                    opacity: 0;
                }

                &:nth-child(3) {
                    transform: translate(100%, -29rem);
                    opacity: 0;
                }
            }
        }
    }
}

@media(max-width:767px) {
    div#gallery {
        display: none;
    }

    div#header_banner {
        & .home_media {
            & video {
                display: block;
                height: 50rem;
                max-width: 107rem;
                width: 107rem;
                position: relative;
                left: 50%;
                transform: translateX(-50%);
            }
        }
    }

    h1#header_logo {
        position: relative;
        background: var(--black);
        width: 100%;
        height: auto;
        text-align: center;
    }

    div#navbar {
        position: relative;
        background: var(--black);
        width: 100%;
        right: 0;
        padding: 1rem;
        height: 6rem;
    }

    div#navbar {
        & #address_top {
            line-height: 1;
        }
    }

    div#home_content picture {
        display: none;
    }

    div#home_content {
        padding: 4.67vw;
    }

    div#home_thematic_2 {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 5vw;
    }

    .home_thematic_baseline {
        text-align: center;
    }

    .home_thematic_title {
        text-align: center;
    }

    .home_thematic_left {
        margin-bottom: 5vw;
    }

    div#home_thematic_1 {
        flex-direction: column;
    }

    div#home_thematic_1 {
        & .home_thematic_left {
            position: relative;
            height: auto;
            flex-direction: column;
        }
    }

    .home_thematic_excerpt :is(p, div, li) {
        text-align: center;
    }

    div#home_thematic_1 {
        & .home_thematic_right {
            & .home_thematic_item {
                & img {
                    width: 100%;
                }
            }
        }
    }

    .home_thematic_bot {
        flex-direction: column;
    }

    .home_thematic_item {
        transform: unset !important;
    }

    div#home_thematic_3 {
        margin-bottom: 5vw;
    }

    div#footer_thematic {
        flex-direction: column;
        align-items: center;
    }

    div#footer_thematic {
        &>div {
            position: relative;
            z-index: 2;
            width: 100%;
        }
    }

    div#footer_thematic {
        & .right_part img {
            display: block;
            width: 100%;
            height: auto;
        }
    }

    .images {
        & .visuel {
            &.slick-center {
                width: 40vw;
            }
        }
    }

    .images {
        & .visuel {
            width: 35vw;
            height: 55vw;
        }
    }

    div#footer_galery {
        & div#controls {
            display: flex;
            width: 43vw;
            justify-content: space-between;
            position: absolute;
            bottom: max(-1.65vw, -3rem);
            left: 50%;
            transform: translate(-50%);
        }
    }

    div#partners {
        padding: 1rem;
    }

    div#partner_list {
        flex-wrap: wrap;
    }

    .bottom_footer>img {
        height: 150vw;
        max-width: unset;
        position: relative;
        left: 50%;
        transform: translate(-50%);
    }

    nav#menu_panel {
        & div#left_pan {
            display: none;
        }
    }

    div#right_pan {
        width: 100%;
    }

    div#nav_panel {
        flex-direction: column;
    }

    #nav_panel {
        & .submenu_open .sub-menu a {
            height: 2rem;
        }
    }

    div#header_logo {
        position: relative;
        background: var(--black);
        width: 100%;
        height: auto;
        text-align: center;
    }

    main#page {
        padding: 2rem;
    }

    div#home_thematic_3 {
        & .home_thematic_bot {
            align-items: center;
        }
    }

    #nav_panel {
        & #main-menu>li>span {
            & svg {
                width: 4rem;
                height: 2rem;
            }
        }
    }
}

@media(max-width: 630px) {
    main#page {
        & div#child_list {
            & .child {
                width: 100%;
            }
        }
    }

}