@font-face {
    font-family: 'Arial Black';
    src: url('../fonts/Arial-Black.woff2') format('woff2'),
        url('../fonts/Arial-Black.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


body{
    font-family: 'Arial Black';
    font-weight: normal;
    font-style: normal;
    font-size: 12px;
    display: flex;
    flex-direction: row;
    /* transition: 500ms; */
    margin: 0;
    mix-blend-mode: color;
    column-gap: 2px;
    width: calc(100% - 2px);
}

a {color: inherit;text-decoration: none;}

a:hover {border-bottom: 1px solid;}

a:focus {
    outline: none;
}

h1 {margin: 0; font-weight: normal}

.intro {
    /* line-height: 35px; */
    /* font-size: 32px; */
    color: grey;
}

.section:nth-child(1) .intro {
    /* background: linear-gradient(360deg, #b8b8b8, #e1edff); */
    color: #778694;
}

.section:nth-child(2) .intro {
    /* background: #4a4a4a; */
    color: darkgrey;
}

.section:nth-child(1) .swiper-slide:not(:first-of-type) {
    cursor: w-resize;
}

.section:nth-child(2) .swiper-slide:not(:last-of-type) {
    cursor: e-resize;
}


.intro p {
    margin: 0;
    padding: 10px;
}

.splash {
    position: fixed;
    z-index: 0;
    /* background: #efbbbb; */
    height: 100%;
    /* padding: 0px 40% 160px 40px; */
    mix-blend-mode: exclusion;
    font-size: 30px;
    /* opacity: 0; */
    /* color: white; */
    transition: 500ms;
    display: flex;cursor: pointer;
flex-direction: row;/* mix-blend-mode: normal; */width: 100%;}

.section .swiper-slide img {
    height: 100%;
    /* height: auto; */
    width: 100%;
    object-fit: cover;
    object-position: center;

    
    
    
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;}

.section:nth-child(1) .swiper-slide.taille-.position-from-center img, .section:nth-child(1) .swiper-slide.taille-plein-ecran.position-from-center img {object-position: right;}

.section:nth-child(2) .swiper-slide.taille-.position-from-center img, .section:nth-child(2) .swiper-slide.taille-plein-ecran.position-from-center img {object-position: left;}

img.swiper-lazy.swiper-lazy-loaded {opacity: 1;}

img.swiper-lazy {opacity: 0;transition: 300ms;}

img.position-haut.taille-moyenne {width: 50%;height: auto;align-items: flex-start;}

img.position-haut.taille-moyen {}

.swiper-slide img.moyen {width: 90%;margin: 0 auto;}

.section {
    width: 50%;
    height: 100vh;
    position: sticky;
    /* cursor: pointer; */
margin: 0;padding: 0;}


.about-content {width: 100%;margin: 12px;padding-top: 0px;line-height: 22px;/* padding-right: 100px; *//* font-family: Times; */ font-size: 19px;color: inherit;height: calc(100% - 24px);-webkit-overflow-scrolling: touch;overflow: auto;}

.splash .about-content {display: none;}

.about-content p:first-of-type {margin-block-start: 1.5em;
    margin-block-end: 1em;}

.site-title {position: absolute;z-index: 99;mix-blend-mode: difference;/* mix-blend-mode: unset; */color: #969696;}

.wrapper {margin: 1em;}

.swiper-slide {
    /* display:flex; */
/* padding: 60px; */}

.swiper-slide.about {background: #ebebeb;}

.swiper-slide.about-2 {background: #f6f6f6;}

.swiper-slide.about-1 {}

.about:nth-child(1) {background: red;}

.splash .swiper-slide {width: 50%;}

.splash .swiper-slide:nth-child(1) {background: #acacac;}

.splash .swiper-slide:nth-child(2) {background: #919191;}

.splash .swpier-slide {width: 50%;}

.swiper-slide.taille-moyenne {}
.swiper-slide.taille-moyenne img {/* width: calc(100% - 140px); *//* padding: 60px 0; */height: 80%;width: 80%;margin: 8%;object-fit: contain;}

.swiper-slide.taille-petite {}
.swiper-slide.taille-petite img {width: 60%;height: 60%;object-fit: contain;margin: 10%;}

.swiper-slide.taille-plein-ecran {align-items: unset !important;}
.swiper-slide.taille-plein-ecran img {height: 100%; width:100%;object-position: center;}

.swiper-slide.position-haut {align-items: flex-start;}
.swiper-slide.position-haut img {align-items: flex-start;object-position: top;/* margin-top: 8%; */}
.swiper-slide.position-centre, .swiper-slide.position- {align-items: center;}
.swiper-slide.position-bas {align-items: flex-end;}

.swiper-slide.position-bas img {object-position: bottom;}

.caption {text-align: left;position: absolute;bottom: 0px;left: 0px;margin: 0;padding: 1em 1em;color: #7a7a7a;line-height: 13px;mix-blend-mode: difference;}

.mobile-open-caption {color: #7a7a7a;text-align: left;
    position: absolute;
    bottom: 0px;
    left: 0px;
    /* margin: 10px; */
    margin: 1em 1em;
    color: #7a7a7a;
    line-height: 13px;
    mix-blend-mode: exclusion;z-index: 999;display: none;}

.mobile-open-caption.caption-open {display: none;}



/*SEULEMENT SUR MOBILE*/
@media (max-width: 980px) {

    body {
        font-family: Arial Black;
        font-weight: normal;
        font-style: normal;
        font-size: 10px;
        display: flex;
        flex-direction: column;
        transition: 500ms;
        margin: 0;
        /* mix-blend-mode: color; */
        column-gap: 0px;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .section{
        width: 100%;
        height: 50%;
        touch-action: none;
        user-select: none;
        -webkit-user-drag: none;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

    }

/*    .section:nth-child(1) .caption { 
        display: none; 
    }*/

    .swiper{
        height: 100%;
    }


    .swiper-wrapper{
        height: 100%;
    }


    .swiper-slide{
        height: 100%;
        width: 100%;
        -webkit-backface-visibility: hidden;
        -webkit-transform: translate3d(0,0,0);
        
    }

    .splash{
            flex-direction: column;
    }

    .splash .swiper-slide {
        height: 50%;
        width: 100%;
    }



    .swiper-slide.position-haut, .swiper-slide.position-bas {
        align-items: center;
        object-position: center;
    }


    .swiper-slide.position-haut img, .swiper-slide.position-bas img {
        align-items: flex-start;
        object-position: center;
    }

    .swiper-slide.taille-moyenne img, .swiper-slide.taille-petite img{
        height: 75%;
        width: 75%;
    }

    .about-content {
        width: 100%;
        margin: 10px;
        margin-right: 0px;
        margin-bottom: 0px;
        padding-top: 0px;
        padding-bottom: 0px;

        line-height: 22px;
        /* padding-right: 100px; */
        /* font-family: Times; */
        font-size: 15px;
        line-height: 15px;
        color: inherit;
        height: calc(100% - 12px);
        -webkit-overflow-scrolling: touch;
        overflow: auto;
    }

    .caption{
        transition: 500ms;
        top: 100%;
        /* bottom:auto; */
    background: white;border-top: 1px solid #7a7a7a;padding: 0.5em 1em;mix-blend-mode: normal;}

    .mobile-open-caption{
        display: block;
    }
    .caption.caption-open {top: auto;}

}