:root {
    /* couleurs */
    --white: #fbfbfb;
    --dark-white: #efefef;
    --black: #000000;
    --red: #e00b0b;
    /* ombre */
    --shadow: 0px 0px 3px rgba(0, 0, 0, 0.15);
    --shadow2: 0px 0px 2px rgba(0, 0, 0, 0.3);
}

html {
    scroll-behavior: smooth;
}


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

#bg-elements-img {
    display: block;
    position: fixed;
    width: 100vw;
    height: 100dvh;
    top: 0;
    left: 0;
    z-index: -10;
}

#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%);
}

@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-container {
    position: absolute;
    display: block;
    transform: translateX(-50%);
}


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

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

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


/* ----------------
RETOUR A L'ACCUEIL 
-------------------*/

.home-link-div {
    width: 100vw;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
}


/* -------------------
BLOC
---------------------- */

.centered-page-container {
    overflow: scroll;
    display: block;
    height: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    scrollbar-color: #0000002d #ffffff00;
    scrollbar-width: thin;

}

.centered-content {
    background-color: var(--white);
    padding: 40px 40px 40px 40px;
    max-width: 900px;
    width: 100%;
    box-shadow: var(--shadow);
    border-radius: 15px;
    margin: 50px auto;
    box-sizing: border-box;
    cursor: default;
    z-index: 1;
    position: relative;
}

/* ----------------
TITRES 
-------------------*/

.liste-titres {
    position: sticky;
    top: 0;
    display: block;
    z-index: 990;
    padding-top: 0.5em;
    margin-bottom: 0.5em;
}

.page-title {
    color: var(--red);
    text-transform: uppercase;
    margin-bottom: 0.7em;
}

h2 {
    margin: 0 0 0.5em 0;
    padding-top: 2em;
}

h2 a {
    color: var(--red);
    text-decoration: none;
}

.h2-anchor {
    display: block;
}

h3 {
    margin-top: 1.5em;
    margin-left: 1em;
    margin-bottom: 0.5em;
}

/* -----------------------
LISTE DE SOUS MENUS
--------------------------*/

.subtitles-list {
    padding-left: 0;
    list-style-type: none;
    display: flex;
    flex-direction: row;
    margin-bottom: 1em;
    flex-wrap: wrap;
    margin-right: 0;
    margin-left: 0;
}

.subtitles-list.mobile-styles {
    margin-right: 60px;
    margin-left: 10px;
}

.subtitles-list li {
    margin: 0 10px 10px 0;
    background-color: var(--dark-white);
    border-radius: 15px;
    box-shadow: var(--shadow2);
    font-weight: bold;

    letter-spacing: 0.02em;
}

.subtitles-list a {
    text-decoration: none;
    padding: 5px 15px;
    display: block;
    white-space: nowrap;
    color: var(--black);
}

.subtitles-list a:hover {
    color: var(--red);
}

/* contenu */

main p {
    /* text-indent: 1em; */
    margin-bottom: 0.5em;
    line-height: 150%;
}

p.has-text-align-center {
    max-width: 100%;
    width: 100%;
    text-indent: 0;
}

ul.wp-block-list,
ol.wp-block-list {
    line-height: 150%;
    margin-bottom: 1em;
    margin-left: 2em;
}

.wp-block-list li {
    padding-left: 1em;
    margin-bottom: 0.4em;
}

@media screen and (max-width: 768px) {
    body {
        background-image: url(assets/img/fond_mobile.png);
    }

    .centered-content {
        margin: 75px auto;
        padding: 15px;
    }

    .page-title {
        text-align: center;
        font-size: 18pt;
    }

    .liste-titres {
        margin-bottom: 0;
        top: auto;
        bottom: 0;
        left: 0;
        position: fixed;
        padding: 0 0 10px 0;
        box-sizing: border-box;
        width: 100vw;
    }

    .subtitles-list {
        margin-bottom: 0;
        justify-content: center;
        margin-right: 0;
        margin-left: 0;
    }

    .subtitles-list li {
        margin: 10px 10px 0 0;
        box-sizing: border-box;
        font-size: 10.5pt;
    }

    .subtitles-list a {
        color: var(--red);
    }

    .centered-page-container {
        overflow-y: scroll;
        width: 100vw;
        overflow-x: hidden;

    }

    .centered-content {
        width: 95vw;
        margin-bottom: 220px;
    }

    h3 {
        margin-left: 0;
    }

    ul.wp-block-list,
    ol.wp-block-list {
        margin-left: 1em;
    }

    .wp-block-list li {
        padding-left: 0.5em;
    }

    #bg-elements-img {
        display: none;
    }

    .home-link-page {
        display: none;
    }

    .home-link-div {
        display: none;
    }

}



/* IMAGES POP UP */

.hover-trigger {
    position: relative;
    cursor: pointer;
	color: var(--red);
  text-decoration: none;
}

.hover-image {
    position: absolute;
    display: none;
    max-width: 600px;
    z-index: 9999;
    pointer-events: none;
    box-shadow: var(--shadow2);
}

@media (max-width: 768px) {
    .hover-image {
        max-width: 90vw;
    }
}