/* ==========================================
   BASE
========================================== */

html, body {
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    overflow:hidden;
    background:#ffffff;
    color:#000;
}

/* ==========================================
   HEADER FIXE
========================================== */

.parallax-header {
    position:fixed;
    top:0;
    left:0;
    padding:40px 60px;
    z-index:100;
    pointer-events:none;
}


.header-content {
    max-width:900px;
}

.btn-back {
    pointer-events:auto;
    display:block;
    margin-bottom:15px;
    color:#c9c9c9;
    text-decoration:none;
    font-size:14px;
    letter-spacing:1px;
    opacity:0.8;
}

.btn-back:hover {
    opacity:1;
    color:#000;
    transform:translateX(-5px);
}

/* TITRE */

.parallax-header h1 {
    margin:0;
    font-size:48px;
    font-weight:400;
    letter-spacing:2px;
}

/* DESCRIPTION */

.parallax-header p {
    margin-top:10px;
    max-width:600px;
    color:#b8b8b8;
    line-height:1.6;
    font-size:18px;
}

/* ==========================================
   FENETRE DE VISUALISATION
========================================== */

.scene-wrapper {
    width:9600px;
    height:1080px;
    overflow:visible;
}


.parallax-viewport {
    width:100vw;
    height:100vh;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    position:relative;
}


.parallax-viewport::-webkit-scrollbar {
    display:none;
}

/* ==========================================
   SCENE VIRTUELLE 1920x1080
========================================== */


.horizontal-scroll {
    position:relative;
    width:9600px;
    height:1080px;
    white-space:normal;
    transform-origin:top left;
    perspective:1000px;
}



/* ==========================================
   BLOCS TEXTE DANS LA SCENE
========================================== */

.info-block {
    position:absolute;
    width:1920px;
    height:1080px;
}


/* chaque scène est décalée horizontalement */

.block1 {
    left:0px;
    top:0px;
}


.info-block:nth-of-type(2) {
    left:1920px;
    top:0px;
}


.info-block:nth-of-type(3) {
    left:3840px;
    top:0px;
}


.info-block:nth-of-type(4) {
    left:5760px;
    top:0px;
}


.info-block:nth-of-type(5) {
    left:7680px;
    top:0px;
}


.text-box {
    position:absolute;
    left:1460px;
    top:600px;
    transform:translate(-50%,-50%);
    width:450px;
    padding:40px;
    background:rgba(255,255,255,0.05);
    border:1px solid #333;
    box-shadow:
    0 10px 30px rgba(0,0,0,0.08),
    0 3px 10px rgba(0,0,0,0.05);
}

.text-box h3 { font-size: 25px;}

.text-box p { font-size: 20px;}



/* ==========================================
   IMAGES FLOTTANTES
========================================== */


.floating-img {
    position:absolute;
    top:0;
    left:0;
    transform-origin:center center;
}



.floating-img img {
    display:block;
    width:auto;
    height:auto;
    max-width:none;
}

/* tailles fixes dans la scène */


.img-1 img { width:800px;} /*foret*/

.img-2 img { width:300px;} /*maison*/

.img-3 img { width:80px;} /*lanterne*/

.img-4 img { width:200px;} /*fusil*/

.img-5 img { width:100px;} /*explosion*/

.img-6 img { width:20px;} /*ogive*/

.img-7 img { width:150px;} /*cowboy de dos*/

.img-8 img { width:250px;} /*arbre avec un homme*/

.img-9 img { width:800px;} /*cimetière*/

.img-10 img { width:120px;} /*croix corbeau*/

.img-11 img { width:250px;} /*whiskey*/

.img-12 img { width:150px;} /*avis de recherche*/

.img-13 img { width:150px;} /*fleurs fanées*/

.img-14 img { width:120px;} /*balle*/

.img-15 img { width:800px;} /*gare*/

.img-16 img { width:600px;} /*train*/

.img-17 img { width:200px;} /*caisses*/

.img-18 img { width:400px;} /*assaillants*/

.img-19 img { width:300px;} /*chaines*/

.img-20 img { width:800px;} /*montagne*/

.img-21 img { width:300px;} /*rocher et carabine*/

.img-22 img { width:500px;} /*chevaux*/

.img-23 img { width:300px;} /*cowboy mort*/

.img-24 img { width:800px;} /*garigue*/

.img-25 img { width:200px;} /*feu*/

.img-26 img { width:200px;} /*revolver*/

.img-27 img { width:150px;} /*étoile*/

.img-28 img { width:200px;} /*chapeau*/


/* ==========================================
   CONTENU INTERNE IMAGE
========================================== */

.inner-content {
    display:flex;
    align-items:center;
    justify-content:center;
    transform-style:preserve-3d;
    backface-visibility:hidden;
}

/* ==========================================
   MASQUE DECHIRURE
========================================== */

/*
.ripped-edge {
    -webkit-mask-image:url("../images/compressed/ripped-mask1.png");
    mask-image:url("../images/compressed/ripped-mask1.png");
    -webkit-mask-size:100% 100%;
    mask-size:100% 100%;
}
*/
/* ==========================================
   BARRE DE PROGRESSION
========================================== */

.scroll-progress {
    position:fixed;
    bottom:20px;
    left:10%;
    width:80%;
    height:8px;
    background:rgba(0,0,0,0.1);
    z-index:999;
}


.scroll-progress-bar {
    position:relative; /* IMPORTANT */
    height:100%;
    width:0%;
    background:#000;
}

/* le rond */

.scroll-progress-bar::after {
    content:"";
    position:absolute;
    right:-10px;
    top:50%;
    transform:translateY(-50%);
    width:20px;
    height:20px;
    background:#000;
    border-radius:50%;

}

/* ==========================================
   FOOTER + CONTACT
========================================== */


    .site-footer {
    position: fixed;

    top: 20px;
    right: 30px;

    z-index: 1000;

    display: flex;
    align-items: center;
    gap: 20px;

    width: auto;
    min-height: auto;

    padding: 0;

    font-size: 12px;
    color: #777;

    text-align: right;

    pointer-events: none;
}



/* ==========================================
   LIEN CONTACT
========================================== */


.contact-mail {
    position: relative;

    top: auto;
    right: auto;

    transform: none;

    width: 90px;
    height: 70px;

    display: flex;
    align-items: center;
    justify-content: center;

    opacity: .45;

    text-decoration: none;

    pointer-events: auto;

    transition: opacity .3s ease;
}

.contact-mail:hover {
    opacity: 1;
}


/* ==========================================
   ENVELOPPE
========================================== */

.envelope {
    position: relative;

    display: block;

    width: 80px;
    height: 55px;

    background: #dedede;

    border: 1px solid #777;
    border-radius: 5px;

    box-shadow:
        0 5px 15px
        rgba(0, 0, 0, .25);

    overflow: hidden;

    animation:
        envelope-float 4s
        ease-in-out
        infinite;
}


/* rabat */

.envelope::before {
    content: "";

    position: absolute;

    top: -32px;
    left: 50%;

    width: 58px;
    height: 58px;

    background: #cfcfcf;

    border-right: 1px solid #777;
    border-bottom: 1px solid #777;

    transform:
        translateX(-50%)
        rotate(45deg);
}


/* pli inférieur */

.envelope::after {
    content: "";

    position: absolute;

    bottom: -42px;
    left: 50%;

    width: 60px;
    height: 60px;

    background: #d6d6d6;

    border-left: 1px solid #777;
    border-top: 1px solid #777;

    transform:
        translateX(-50%)
        rotate(45deg);
}


/* ==========================================
   ANIMATION
========================================== */

@keyframes envelope-float {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-2deg);
    }

    50% {
        transform:
            translateY(-6px)
            rotate(2deg);
    }
}



/* ==========================================
   VERSION MOBILE VERTICALE
========================================== */

@media screen and (max-width:650px){


    html, body {
        overflow:hidden;
    }

    .parallax-header {
        position:fixed;
        top:0;
        left:0;

        width:100%;
        padding:40px 60px;

        z-index:1000;

        pointer-events:none;

        /* cache ce qui passe derrière */
        background:white;

        box-sizing:border-box;
        padding:25px 25px 0;

        /* optionnel : effet plus doux */
        /*box-shadow:0 10px 30px rgba(0,0,0,0.05);*/
    }



    /* scène verticale */
    .vertical-scroll {
    position: relative;

    width: 390px !important;
    height: 6200px !important;

    flex: 0 0 390px;

    white-space: normal;

    transform-origin: top center;

    perspective: 1000px;

    overflow: visible;
    }


    /* wrapper qui prend toute la hauteur réelle */

    .scene-wrapper {
        width: 100%;

        display: flex;
        justify-content: center;
        align-items: flex-start;

        overflow: visible;
    }



    /* fenêtre de lecture */

    .parallax-viewport {
        width:100vw;
        height:100vh;
        overflow-y:auto;
        overflow-x:hidden;
        scrollbar-width:none;
        position:relative;
    }


    .parallax-viewport::-webkit-scrollbar{
        display:none;
    }



    /* images */

    .floating-img {
        position:absolute;
    }




/* textes mobiles */

.info-block {
    position:absolute;
    width:340px;
    height:auto;
    left:25px !important;
}



.block1 {
    left:25px !important;
    top:1100px;
}



.info-block:nth-of-type(2){
    left:25px !important;
    top:2300px;
}



.info-block:nth-of-type(3){
    left:25px !important;
    top:3500px;
}



.info-block:nth-of-type(4){
    left:25px !important;
    top:4700px;
}



.info-block:nth-of-type(5){
    left:25px !important;
    top:5900px;
}



    .text-box {
        position:relative;
        left:auto;
        top:auto;
        transform:none;
        width:auto;
        padding:20px;
        background:rgba(0,0,0,.45);
        border:1px solid rgba(255,255,255,.3);
        border-radius:15px;
        color:white;
        box-shadow:none;
    }



    .text-box h3 {
        font-size:24px;
        margin-top:0;
    }



    .text-box p {
        font-size:17px;
        line-height:1.6;
        margin-bottom:0;
    }



    /* barre verticale */

    .scroll-progress {
        position:fixed;
        right:8px;
        top:10%;
        left:auto;
        bottom:auto;
        width:6px;
        height:80%;
        background:rgba(0,0,0,.15);
        z-index:9999;
    }



    .scroll-progress-bar {
        width:100%;
        height:0%;
        background:#000;
    }



    .scroll-progress-bar::after {
        right:auto;
        left:50%;
        bottom:-10px;
        top:auto;
        transform:translateX(-50%);
        width:14px;
        height:14px;
    }

.img-1 img { width:800px;} /*foret*/

.img-2 img { width:200px;} /*maison*/

.img-3 img { width:60px;} /*lanterne*/

.img-4 img { width:150px;} /*fusil*/

.img-5 img { width:80px;} /*explosion*/

.img-6 img { width:15px;} /*ogive*/

.img-7 img { width:150px;} /*cowboy de dos*/

.img-8 img { width:250px;} /*arbre avec un homme*/

.img-9 img { width:800px;} /*cimetière*/

.img-10 img { width:80px;} /*croix corbeau*/

.img-11 img { width:250px;} /*whiskey*/

.img-12 img { width:100px;} /*avis de recherche*/

.img-13 img { width:100px;} /*fleurs fanées*/

.img-14 img { width:120px;} /*balle*/

.img-15 img { width:800px;} /*gare*/

.img-16 img { width:600px;} /*train*/

.img-17 img { width:200px;} /*caisses*/

.img-18 img { width:400px;} /*assaillants*/

.img-19 img { width:300px;} /*chaines*/

.img-20 img { width:800px;} /*montagne*/

.img-21 img { width:150px;} /*rocher et carabine*/

.img-22 img { width:300px;} /*chevaux*/

.img-23 img { width:300px;} /*cowboy mort*/

.img-24 img { width:800px;} /*garigue*/

.img-25 img { width:100px;} /*feu*/

.img-26 img { width:200px;} /*revolver*/

.img-27 img { width:100px;} /*étoile*/

.img-28 img { width:150px;} /*chapeau*/



    .site-footer {
        position: relative;

        left: auto;
        bottom: auto;

        width: 100%;
        min-height: auto;

        display: flex;
        flex-direction: column;

        gap: 25px;

        padding:
            40px
            20px
            50px;

        z-index: 1;

        pointer-events: auto;
    }


    .footer-credit {
        order: 1;
    }


    .contact-mail {
        position: relative;

        top: auto;
        right: auto;
        bottom: auto;

        transform: none;

        width: 110px;
        height: 80px;

        order: 2;
    }




}