* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body, html {
    overflow-x: hidden;
    font-family: sans-serif;
}
body {
    margin: 0;
    overflow-x: hidden;
}

.wrapper {
    width: 960px;
    margin: 0 auto;
    transform-origin: top left;
    position: relative;
}

.section {
    position: relative;
}


@media (max-width: 959px) {
    .wrapper {
        transform: scale(var(--scale));
    }
}

.text {
    padding: 1rem;
}

.image-wrapper {
    position: relative;
    z-index: 0;
}

.parallax-img {
    display: block;
    max-width: 200%;
    height: auto;
    transform: translateY(0);
    transition: transform 0.1s linear;
    will-change: transform;
    z-index:-5;
}


/* Shortcuts */
.text-center {
    text-align: center;
}
.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}
.flex-right {
    display: flex;
    align-items: center;
    justify-content: end;
}
.flex-column {
    flex-direction: column;
}
.absolute {
    position: absolute;
    z-index: 5;
    top: 0;
}
.absolute.text {
    z-index: 10;
}

/*
 * Défiler : Main
 */

#scrollHand {
    position: absolute;
    z-index: 25;
    top: 170px;             /* relative to the parent section */
    right:0;
    width: 226px;
    height: 226px;
    opacity: 0;
}

#scrollHand.show {
    animation: quarterCircleIn 1s ease-out forwards;
}
#scrollHandImg.bounce {
    animation: bounceUpDown 3s linear 5;
    animation-iteration-count: 5;
}

/* Animation de quart de cercle */
@keyframes quarterCircleIn {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }
    100% {
        transform: translate(-260px, 0);
        opacity: 1;
    }
}

/* Mouvement vertical répétitif */
@keyframes bounceUpDown {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    10% {
        transform: translateY(40px) scale(0.95)
    }
    40% {
        transform: translateY(-80px) ;
    }
    45% {
        transform: scale(1);
    }
    50% {
        transform: translateY(0);
    }
}

/* Flèche : Visibilité */
#scrollArrow {
    opacity: 0;
    transition: opacity 1s ease-in-out;
    z-index: 30;
}
#scrollArrow.visible {
    opacity: 1;
}

/* Debug classes */
.debug .dbg1 {background-color: rgba(208, 228, 111, 0.5)}
.debug .dbg2 {background-color: rgba(228, 212, 111, 0.5)}
.debug .dbg3 {background-color: rgba(111, 228, 214, 0.5)}


/* Margins & Padding */
.mt-5  {margin-top:5px }
.mt-10 {margin-top:10px }
.mt-20 {margin-top:20px }
.mt-30 {margin-top:30px }
.mt-40 {margin-top:40px }
.mt-50 {margin-top:50px }
.mt-60 {margin-top:60px }
.mt-75 {margin-top:75px }
.mt-100 {margin-top:100px}
.mt-125 {margin-top:125px}
.mt-150 {margin-top:150px}
.mt-175 {margin-top:175px}
.mt-200 {margin-top:200px}
.mt-225 {margin-top:225px}
.mt-250 {margin-top:250px}
.mt-275 {margin-top:275px}
.mt-300 {margin-top:300px}

.mb-5 { margin-bottom:5px}
.mb-10 {margin-bottom:10px}
.mb-20 {margin-bottom:20px}
.mb-30 {margin-bottom:30px}
.mb-40 {margin-bottom:40px}
.mb-50 {margin-bottom:50px}
.mb-60 {margin-bottom:60px}
.mb-75 {margin-bottom:75px}
.mb-100 {margin-bottom:100px}
.mb-125 {margin-bottom:125px}
.mb-150 {margin-bottom:150px}
.mb-175 {margin-bottom:175px}
.mb-200 {margin-bottom:200px}
.mb-225 {margin-bottom:225px}
.mb-250 {margin-bottom:250px}
.mb-275 {margin-bottom:275px}
.mb-300 {margin-bottom:300px}


.pt-5  {padding-top:5px }
.pt-10 {padding-top:10px }
.pt-20 {padding-top:20px }
.pt-30 {padding-top:30px }
.pt-40 {padding-top:40px }
.pt-50 {padding-top:50px }
.pt-60 {padding-top:60px }
.pt-75 {padding-top:75px }
.pt-100 {padding-top:100px}
.pt-125 {padding-top:125px}
.pt-150 {padding-top:150px}
.pt-175 {padding-top:175px}
.pt-200 {padding-top:200px}
.pt-225 {padding-top:225px}
.pt-250 {padding-top:250px}
.pt-275 {padding-top:275px}
.pt-300 {padding-top:300px}

.pb-5 { padding-bottom:5px}
.pb-10 {padding-bottom:10px}
.pb-20 {padding-bottom:20px}
.pb-30 {padding-bottom:30px}
.pb-40 {padding-bottom:40px}
.pb-50 {padding-bottom:50px}
.pb-60 {padding-bottom:60px}
.pb-75 {padding-bottom:75px}
.pb-100 {padding-bottom:100px}
.pb-125 {padding-bottom:125px}
.pb-150 {padding-bottom:150px}
.pb-175 {padding-bottom:175px}
.pb-200 {padding-bottom:200px}
.pb-225 {padding-bottom:225px}
.pb-250 {padding-bottom:250px}
.pb-275 {padding-bottom:275px}
.pb-300 {padding-bottom:300px}

.pl-5 { padding-left:5px}
.pl-10 {padding-left:10px}
.pl-20 {padding-left:20px}
.pl-30 {padding-left:30px}
.pl-40 {padding-left:40px}
.pl-50 {padding-left:50px}
.pl-60 {padding-left:60px}
.pl-75 {padding-left:75px}
.pl-100 {padding-left:100px}
.pl-125 {padding-left:125px}
.pl-150 {padding-left:150px}
.pl-175 {padding-left:175px}
.pl-200 {padding-left:200px}
.pl-225 {padding-left:225px}
.pl-250 {padding-left:250px}
.pl-275 {padding-left:275px}
.pl-300 {padding-left:300px}


.py-5  {padding-top:5px; padding-bottom:5px; }
.py-10 {padding-top:10px; padding-bottom:10px; }
.py-20 {padding-top:20px; padding-bottom:20px; }
.py-30 {padding-top:30px; padding-bottom:30px; }
.py-40 {padding-top:40px; padding-bottom:40px; }
.py-50 {padding-top:50px; padding-bottom:50px; }
.py-75 {padding-top:75px; padding-bottom:75px; }
.py-100 {padding-top:100px; padding-bottom:100px; }
.py-125 {padding-top:125px; padding-bottom:125px; }
.py-150 {padding-top:150px; padding-bottom:150px; }
.py-175 {padding-top:175px; padding-bottom:175px; }
.py-200 {padding-top:200px; padding-bottom:200px; }
.py-225 {padding-top:225px; padding-bottom:225px; }
.py-250 {padding-top:250px; padding-bottom:250px; }
.py-275 {padding-top:275px; padding-bottom:275px; }
.py-300 {padding-top:300px; padding-bottom:300px; }

