.hero {
    height: 100dvh;
    background-image: url(../assets/autres/maisonlua-sac-synderme-france-hero.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right;
    color: var(--color-beige);
    align-content: end;
}
.hero--text {
    align-items: end;
    align-self: end;
    align-content: end;
    margin-bottom: var(--pm-xl);
}
.hero--text p {
    width: 80%;
}



/* Présentation. */
.presentation {
    margin-bottom: var(--pm-2xl);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.presentation--content {
    max-width: 1440px;
    padding-left: var(--pm-4xl);
    padding-right: var(--pm-4xl);
    padding-top: var(--pm-2xl);
    padding-bottom: var(--pm-2xl);
    text-align: center;
}
.quote-jetable > p {
    margin-bottom: var(--pm-md);
}
.quote-jetable > p:nth-child(2) {
    padding-left: var(--pm-4xl);
    padding-right: var(--pm-4xl);
}
.spiral-separator {
    background-image: url(../assets/autres/maisonlua-spiral.webp);
    background-size: contain;
    height: 110px;
    background-position: center;
    width: 100vw;
}
.text {
    margin-top: var(--pm-xl);
}
.text > p:first-child {
    padding-left: var(--pm-5xl);
    padding-right: var(--pm-5xl);
    margin-bottom: var(--pm-xl);
}
.text > img.img-desktop {
    width: 672px;
    height: 451px;
}
.center-1440 {
    text-align: center;
    margin-top: -40px;

}



/* Produit */
.titre-produit h2 {
    text-align: center;
    padding-left: var(--pm-5xl);
    padding-right: var(--pm-5xl);
    margin-bottom: var(--pm-2xl);
}
.postit--cuir {
    background-image: url(../assets/autres/maisonlua-postit-cuir.webp);
    background-position: 80px;
    background-repeat: no-repeat;
    background-size: contain;
    height: 40dvh;
    display: flex;
    align-items: stretch;
    z-index: 0;
}
.papier--description {
    background-image: url(../assets/autres/maisonlua-texture-papier1.webp);
    background-position: left;
    background-repeat: no-repeat;
    background-size: 96%;
    height: 24dvh;
    display: flex;
    align-items: center;
    padding-left: var(--pm-4xl);
    padding-right: var(--pm-4xl);
    z-index: 2;
}
.sac {
    text-align: center;
    z-index: 1;
    margin-top: -220px;
}
.papier--cta {
    background-image: url(../assets/autres/maisonlua-texture-papier2.webp);
    background-position: left;
    background-repeat: no-repeat;
    background-size: contain;
    height: 40dvh;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    padding-left: var(--pm-3xl);
    padding-right: 16%;
    z-index: 2;
    margin-top: -240px;
}
.papier--cta > p {
    max-width: 90%;
}
.postit--sangle {
    background-image: url(../assets/autres/Postit-Sangle.webp);
    background-position: 88%;
    background-repeat: no-repeat;
    background-size: contain;
    height: 40dvh;
    display: flex;
    align-items: stretch;
    z-index: 2;
    margin-top: -260px;
}
.description.mobile, .cta.mobile { display: none; }





/* Réseaux sociaux */
section.rs {
    background-color: var(--color-creme);
}
.rs--img img {
    width: 100%;
    height: auto;
}
.rs--park {
    padding-left: var(--pm-none);
    padding-right: var(--pm-sm);
    padding-bottom: var(--pm-sm);
    padding-top: var(--pm-none);
    margin-top: -40px;
}
.rs--car {
    padding-left: var(--pm-sm);
    padding-right: var(--pm-none);
    padding-bottom: var(--pm-sm);
    padding-top: var(--pm-none);
}
.rs--terrasse {
    padding-left: var(--pm-none);
    padding-right: var(--pm-sm);
    padding-bottom: var(--pm-none);
    padding-top: var(--pm-sm);
    margin-top: -40px;
}
.rs--content {
    padding-left: var(--pm-sm);
    padding-right: var(--pm-sm);
    padding-bottom: var(--pm-none);
    padding-top: var(--pm-sm);
}
.rs--street {
    padding-left: var(--pm-sm);
    padding-right: var(--pm-none);
    padding-bottom: var(--pm-none);
    padding-top: var(--pm-sm);
}
.rs--text {
    margin-top: -240px;
    padding-right: var(--pm-lg);
}
.rs--img.slider { display: none; }







/*** RESPONSIVE ***/

/* Tablettes */
@media (max-width: 1199px) {
    /* Présentation */
	.presentation--content {
    padding-left: var(--pm-xl);
    padding-right: var(--pm-xl);
    }
    .quote-jetable > p:nth-child(2) {
    padding-left: var(--pm-2xl);
    padding-right: var(--pm-2xl);
    }
    .title > h2 {
    padding-left:  var(--pm-2xl);
    padding-right: var(--pm-2xl);
    }
    .spiral-separator {
        background-size: cover;
        height: 110px;
    }
    .text > p:first-child {
    padding-left: var(--pm-2xl);
    padding-right: var(--pm-2xl);
    }

    /* Produit */
    .postit--cuir.desktop,
    .papier--description.desktop,
    .papier--cta.desktop {
        display: none;
    }
    .titre-produit h2 {
        padding-left: var(--pm-4xl);
        padding-right: var(--pm-4xl);
        margin-bottom: var(--pm-xl);
    }
    .description.mobile {
        display: block;
        text-align: center;
        padding-left: var(--pm-4xl);
        padding-right: var(--pm-4xl);
    }
    .sac {
        margin: var(--pm-none);
    }
    .postit--sangle {
        width: 100%;
        background-position: right;
    }
    .cta.mobile {
        display: block;
        text-align: center;
        padding-left: var(--pm-4xl);
        padding-right: var(--pm-4xl);
        margin-top: var(--pm-xl);
    }

    /* Réseaux sociaux */
    .rs--park, .rs--car, .rs--terrasse, .rs--content, .rs--street {
        display: none;
    }
    .rs--img.slider {
        width: 100%;
        height: 480px;
        display: flex;
        gap: var(--pm-md);
        overflow: scroll;
        scroll-behavior: smooth;
    }
    .rs--img.slider img {
        width: auto;
        height: 100%;
    }
    ::-webkit-scrollbar {
        display: none;
    }
    .rs--text {
        margin: var(--pm-none);
        text-align: center;
        padding-left: var(--pm-2xl);
        padding-right: var(--pm-2xl);
        padding-top: var(--pm-lg);
    }
}

/* Mobiles */
@media (max-width: 767px) {
    /* Hero */
    .hero {
        height: 100dvh;
        background-image: url(../assets/autres/maisonlua-sac-synderme-france-hero-mobile.webp);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: left;
    }
    .hero--text p {
        width: 100%;
    }

    /* Présentation */
    .spiral-separator {
        background-size: cover;
        height: 40px;
    }
    .text > p:first-child {
    padding-left: var(--pm-none);
    padding-right: var(--pm-none);
    }
    .text {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .presentation--content {
    padding-left: var(--pm-md);
    padding-right: var(--pm-md);
    }
    .title > h2 {
        padding-left: var(--pm-sm);
        padding-right: var(--pm-sm);
    }
    .quote-jetable > p:nth-child(2) {
    padding-left: var(--pm-sm);
    padding-right: var(--pm-sm);
    }
    .center-1440 {
        padding-left: var(--pm-md);
        padding-right: var(--pm-md);
    }

    /* Produit */
    .titre-produit h2 {
        padding-left: var(--pm-none);
        padding-right: var(--pm-none);
        margin-bottom: var(--pm-xl);
    }
    .description.mobile {
        text-align: center;
        padding-left: var(--pm-none);
        padding-right: var(--pm-none);
    }
    .sac img {
        width: 100%;
        height: auto;
    }
    .postit--sangle {
        margin-top: -160px;
        background-size: 70%;
        background-position: center;
    }
    .cta.mobile {
        padding-left: var(--pm-none);
        padding-right: var(--pm-none);
        margin-top: var(--pm-lg);
    }

    /* Réseaux sociaux */
    .rs--text {
        padding-left: var(--pm-none);
        padding-right: var(--pm-none);
    }
}