* {
    transition: all 0.15s ease-in-out;
}

body {
    width: 100vw;
    height: 100dvh;
    overflow: hidden;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

/* -------------------
----------------------
ANIMS 
----------------------
--------------------*/

.furniture-container {
    position: absolute;
    display: block;
    transform: translateX(-50%);
}

/* --------------
PLACEMENTS DES MACHINES
-------------- */


/* PLACEMENT ASSIETTES */
#div-assiettes {
    top: 22%;
    left: 47%;
    width: 92px;
}

/* PLACEMENT ADNAN */
#div-adnan {
    top: 16.5%;
    left: 64%;
    width: 80px;
}

/* PLACEMENT echarpe */
#div-echarpe {
    top: 10%;
    left: 40%;
    width: 165px;
}

/* PLACEMENT maillot */
#div-maillot {
    top: 11%;
    left: 23%;
    width: 95px;
}

/* PLACEMENT TAPISSERIE */
#div-tapisserie {
    top: 0;
    left: 9%;
    width: 185px;
}

/* PLACEMENT AFFICHES */
#div-affiches {
    top: 18%;
    left: 85.5%;
    width: 115px;
}

/* PLACEMENT PORTE */
#div-porte {
    top: 46%;
    left: 56%;
    width: 115px;
}

#porte-height {
    transform: translateY(-100%);
}

/* PLACEMENT LAMPE */
#div-lampe {
    top: 0;
    left: 51%;
    width: 125px;
}

/* PLACEMENT CLAIE */
#div-claie {
    top: 46%;
    left: 36%;
    width: 155px;
}

#claie-height {
    transform: translateY(-84%);
}

/* PLACEMENT ORDI */
#div-ordi {
    top: 46%;
    left: 45.4%;
    width: 210px;
}

#ordi-height {
    transform: translateY(-84%);
}

/* PLACEMENT SEMI-AUTO */
#div-semiauto {
    top: 52%;
    left: 30%;
    width: 260px;
}

#semiauto-height {
    transform: translateY(-60%);
}

/* PLACEMENT TEE */
#div-tee {
    top: 50%;
    left: 69%;
    width: 235px;
}

#tee-height {
    transform: translateY(-60%);
}

#div-digiprint {
    top: 85%;
    left: 79%;
    width: 370px;
}

#digiprint-height {
    transform: translateY(-90%);
}

#div-massicot {
    bottom: 0;
    left: 14%;
    width: 310px;
}

#massicot-height {
    transform: translateY(-100%);
}

/* PLACEMENT CARROUSEL */
#div-carrousel {
    top: 60%;
    left: 55%;
    width: 520px;
}

#carrousel-height {
    transform: translateY(-50%);
}

/* PLACEMENT CHAUFFEUSE */
#div-chauffeuse {
    top: 98%;
    left: 42%;
    width: 530px;
}

#chauffeuse-height {
    transform: translateY(-100%);
}

/* PLACEMENT PERSO */
#div-perso {
    bottom: 0;
    left: 72%;
    width: 350px;
}

/* comme l'élément est placé en bas,
perso height récupère la hauteur et le place en bas 
car la hauteur n'est pas contenue dans le div-perso*/
#perso-height {
    transform: translateY(-100%);
}

#div-cartons {
    bottom: 0;
    left: 50%;
    width: 100vw;
}

#cartons-height {
    transform: translateY(-100%);
}

@media (min-width: 1600px) {

    #div-assiettes {
        width: 6vw;
    }

    #div-adnan {
        top: 12%;
        width: 5.5vw;
    }

    #div-echarpe {
        left: 42%;
        width: 9.5vw;
    }

    #div-maillot {
        left: 25%;
        width: 6.5vw;
    }

    #div-tapisserie {
        width: 13vw;
    }

    #div-affiches {
        width: 10vw;
    }

    #div-porte {
        width: 7.5vw;
    }

    #div-lampe {
        width: 7vw;
    }

    #div-claie {
        width: 10vw;
    }

    #div-ordi {
        width: 14vw;
    }

    #div-semiauto {
        width: 15vw;
    }

    #div-tee {
        width: 16vw;
    }

    #div-digiprint {
        width: 23vw;
    }

    #div-massicot {
        width: 20vw;
    }

    #div-carrousel {
        width: 35vw;
    }

    #div-chauffeuse {
        width: 34vw;
    }

    #div-perso {
        width: 20vw;
    }

}




.furniture {
    position: absolute;
    pointer-events: none;
    top: 0;
    left: 0;
}

.furniture .clickable-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.furniture .clickable-area path {
    fill: transparent;
    pointer-events: auto;
}


.furniture .clickable-area#lampe_svg path,
.furniture .clickable-area#cartons_svg path {
    cursor: pointer;
}


/* --------------
PLACEMENTS DES SVG
-------------- */
/* PLACEMENT DES SVG */
.furniture .clickable-area#tapisserie_svg,
.furniture .clickable-area#assiettes_svg,
.furniture .clickable-area#adnan_svg,
.furniture .clickable-area#echarpe_svg,
.furniture .clickable-area#maillot_svg,
.furniture .clickable-area#affiches_svg,
.furniture .clickable-area#porte_svg,
.furniture .clickable-area#lampe_svg,
.furniture .clickable-area#claie_svg,
.furniture .clickable-area#ordi_svg,
.furniture .clickable-area#semiauto_svg,
.furniture .clickable-area#tee_svg,
.furniture .clickable-area#digiprint_svg,
.furniture .clickable-area#massicot_svg,
.furniture .clickable-area#carrousel_svg,
.furniture .clickable-area#chauffeuse_svg,
.furniture .clickable-area#perso_svg {
    width: 100%;
    height: auto;
    pointer-events: none;
}



.furniture img {
    width: 100%;
    height: auto;

    pointer-events: none;
}

.furniture img.static {
    display: block;
    pointer-events: none;
}

.furniture img.animated {
    display: none;
    pointer-events: none;
}

.furniture:hover img.static {
    display: none;
}

.furniture:hover img.animated {
    display: block;
}

.blackout {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: black;
    z-index: 1010;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
    mask-image: radial-gradient(circle, transparent 2.09%, black 2.1%);
    -webkit-mask-image: radial-gradient(circle, transparent 2.09%, black 2.1%);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: 8000px 5500px;
    -webkit-mask-size: 8000px 5500px;
    mask-position: center;
    -webkit-mask-position: center;
}


.mobile-section {
    display: none;
}

.wp-block-buttons {
    font-weight: bold;
    letter-spacing: 0.04em;
}

@media screen and (max-width: 768px) {
    * {
        transition: none;
    }

    body {
        background-color: #e8e3da;
        background-image: none;
        height: 100vh;

        overflow: hidden;

        top: 0;
        left: 0;
    }

    .qtip {
        display: none !important;
    }


    .home-images {
        display: none;
    }

    .mobile-section {
        display: block;
        position: absolute;

        overflow: hidden;

        width: 100%;
        height: 100dvh;
    }

    /* SCROLL SECTION */

    #scroll {
        height: 100vh;
        height: 100svh;
        position: relative;
        overflow-y: hidden;
        overflow-x: scroll;

    }

    /* La "pièce" : canvas à ratio fixe */
    .room {
        position: relative;
        height: 100dvh;
        aspect-ratio: var(--ar);
    }

    /* image de fond */
    .m-bg-img {
        position: absolute;
        inset: 0;
        z-index: 0;
    }

    .m-bg-img img {
        display: block;
        height: 100dvh;
        width: auto;

        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        user-select: none;
        pointer-events: none;
        display: block;
    }

    .furniture .clickable-area path {
        pointer-events: all;
    }

    .furniture-container {
        z-index: 1;
    }

    .furniture-container>* {
        transform: translateY(-50%);
    }

    /* Meubles : coordonnées en % dans la pièce */
    .furniture-container {
        position: absolute;
        left: calc(var(--x) * 1%);
        top: calc(var(--y) * 1%);
        width: calc(var(--w) * 1%);
    }


    /* animations éléments */
    .anim-scroll {
        position: relative;
    }

    .anim-scroll .anim-element {
        width: 100%;
        height: auto;
    }

    .anim-scroll .poster {
        opacity: 1;
    }

    .anim-scroll .anim {
        opacity: 0;

        position: absolute;
        top: 0;
        left: 0;
        /* will-change: opacity; */
    }

    /* body.scrolling .anim-scroll .poster {
        opacity: 0;
    }

    body.scrolling .anim-scroll .anim {
        opacity: 1;
    } */


    /* éléments placement */
    #m-div-assiettes {
        --x: 49;
        --y: 23;
        --w: 9.5;
    }

    #m-div-adnan {
        --x: 76;
        --y: 14;
        --w: 7;
    }

    #m-div-echarpe {
        --x: 32;
        --y: 12;
        --w: 15;
    }

    #m-div-maillot {
        --x: 19;
        --y: 22;
        --w: 8;
    }

    #m-div-tapisserie {
        --x: 8;
        --y: 40.5;
        --w: 13.5;
    }

    #m-div-affiches {
        --x: 87;
        --y: 22;
        --w: 12;
    }

    #m-div-porte {
        --x: 64;
        --y: 53;
        --w: 11;
    }

    #m-div-lampe {
        --x: 53;
        --y: 5;
        --w: 10;
    }

    #m-div-claie {
        --x: 36.7;
        --y: 56;
        --w: 14;
    }

    #m-div-ordi {
        --x: 51;
        --y: 38;
        --w: 20;
    }

    #m-div-semiauto {
        --x: 28;
        --y: 60;
        --w: 17;
    }

    #m-div-tee {
        --x: 71;
        --y: 60;
        --w: 20;
    }

    #m-div-digiprint {
        --x: 83;
        --y: 72;
        --w: 26;
    }

    #m-div-massicot {
        --x: 15;
        --y: 105;
        --w: 17;
    }

    #m-div-carrousel {
        --x: 55;
        --y: 73;
        --w: 37;
    }

    #m-div-chauffeuse {
        --x: 37.5;
        --y: 99;
        --w: 30;
    }


    #m-div-perso {
        --x: 75;
        --y: 101;
        --w: 21;
    }

    #m-div-carton1 {
        --x: 5;
        --y: 94.2;
        --w: 15;
    }

    #m-div-carton2 {
        --x: 98;
        --y: 70.1;
        --w: 10;
    }

    /* liens boutons */

    .m-furniture-link-btn {
        position: absolute;
        display: inline-block;
        max-width: 150px;

        transform: translate(-50%, -50%);
        z-index: 3;

        color: var(--red);
        background: var(--white);
        box-shadow: var(--shadow);

        text-align: center;
        text-transform: uppercase;
        letter-spacing: .05em;
        /* white-space: nowrap; */
        font-weight: 600;
        font-size: 10pt;

        padding: .35rem .6rem;

        pointer-events: auto;
    }

    /* placements + coins boutons */

    /* #m-btn- {
        left: var(--btn-left, 00%);
        top: var(--btn-top, 00%);
        border-radius: VAR(--coin-hg);
    } */

    #m-btn-porte {
        left: var(--btn-left, 19%);
        top: var(--btn-top, 31%);
        border-radius: VAR(--coin-bd);

        max-width: 100px;
    }

    #m-btn-tee {
        left: var(--btn-left, 67%);
        top: var(--btn-top, 51%);
        border-radius: VAR(--coin-hg);

        white-space: nowrap;
    }

    #m-btn-ordi {
        left: var(--btn-left, 72%);
        top: var(--btn-top, 67%);
        border-radius: VAR(--coin-hg);
    }

    #m-btn-semiauto {
        left: var(--btn-left, 105%);
        top: var(--btn-top, 23%);
        border-radius: VAR(--coin-bg);

        /* max-width: 100px; */
    }

    #m-btn-digiprint {
        left: var(--btn-left, 77%);
        top: var(--btn-top, 2%);
        border-radius: VAR(--coin-bg);

        /* max-width: none;
        white-space: nowrap; */
    }

    #m-btn-massicot {
        left: var(--btn-left, 70%);
        top: var(--btn-top, 65%);
        border-radius: VAR(--coin-hg);

        max-width: none;
        white-space: nowrap;
    }

    #m-btn-chauffeuse {
        left: var(--btn-left, 80%);
        top: var(--btn-top, 25%);
        border-radius: VAR(--coin-hd);

        /* max-width: 100px; */
    }

    #m-btn-perso {
        left: var(--btn-left, 18%);
        top: var(--btn-top, 60%);
        border-radius: VAR(--coin-bd);

        max-width: 100px;
    }

    /* -------------------------------------
    CTA BOUTIQUE 
    --------------------------------------*/
    .mobile-grid-button {
        background-color: var(--red);
        color: var(--white);
        text-align: center;
        border-radius: 200px;
        box-shadow: var(--shadow2);
        position: fixed;
        bottom: 15px;
        left: 50%;
        transform: translateX(-50%);
        width: 20em;
        z-index: 900;
    }

    .mobile-grid-button button {
        background-color: var(--red);
        border: none;
        width: 100%;
        height: 100%;
        font-family: 'inter';
        color: var(--white);
        font-size: 15pt;
        font-weight: bold;
        padding: 15px;
        border-radius: 30px;
        letter-spacing: 0.04em;
        cursor: pointer;
        text-transform: uppercase;
    }

}

.qtip-light {
    background-color: #505050 !important;
    border-color: #303030 !important;
    color: #f3f3f3 !important;
}