/* Spécifiques à #lst-pages */

#lst-pages {
    overflow-y: hidden;
}
#lst-pages footer {
    padding: 0;
}
@media (max-width: 815px) {
    #lst-pages {
        overflow-y: scroll;
    }
    #lst-pages footer {
        transform: translateY(2.5rem);
    }
}


#ovr-box{
    position: fixed;
    height: 10px;
    width: 2px;
    top: 32px;
    left: 2rem;
    /* background-color: blue; */
    z-index: 9999;
    pointer-events: none;
}
#grdt-ovr {
    position: fixed;
    top: 0;
    height: 100vh;
    overflow: visible;
    mask-image :none;
    -webkit-mask-image:   -o-linear-gradient(top, #000000 5%, #00000000 30%);
    -webkit-mask-image:  linear-gradient(top, #000000 5%, #00000000 30%);
    -webkit-mask-image:  -webkit-linear-gradient(top, #000000 5%, #00000000 30%);
}
@media (min-width : 815px){#grdt-ovr, #ovr-box {transform: translateY(2.5rem);}}

#proj-lst {
    height: 100vh;
    width: calc(100.1vw /* - 1.1rem */);
    overflow :scroll;
    padding-top: .7rem;
    padding-left: 2rem;
}

.dflt-li {
    opacity: .4;
    height: 3rem;
}

#space {height: calc(100vh - 2.7rem);}

.proj-lst-infos {
    position: absolute;
    top: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    height: calc(100vh - 5.5rem);
    width: 100vw;
}
.proj-lst-infos.actv {animation: Apparition 1s ease;}
@keyframes Apparition {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

.actv {opacity: 1;}
.actv * a {pointer-events: visible;}

article {
    transform: translateY(50%);
    transition: transform .5s ease-out;
}
.actv article{transform: translateY(0);}

/*--- IMAGE SYSTM DEF ---*/

article {
    overflow: clip;
    margin: 0 1rem;
}

figure {
position: relative;
height: 100%;
width: 100%;
z-index: -1;
}

img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.flx-win {
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    margin: 4rem 8vw 1rem 8vw;
    height: 50vh;
}
@media (max-width : 815px){.flx-win {
    margin: 3rem 8vw 1rem 8vw;
}}
.flx-win a figure img {
    height: unset;
    max-height: 50vh;
    object-fit: contain;
    border-radius: 2rem;
}

.caption {
    display: flex;
    background-color: var(--secondary-color);
    margin: 0 2rem;
    border-radius: 1rem;
    transition: transform .5s ease;
}
article:hover {transform: scale(1.035);}
.caption a {
    display: flex;
    flex-direction: column;
    align-items: end;
    height: calc(100%- 2rem);
    width: 100%;
    padding: 1rem;
}
.caption a h3 {width: 100%;}
.caption a p {margin-bottom: 0;}

#min-arw {
    width: 3rem;
    height: 3rem;
    stroke: var(--text-color); 
    stroke-width: .6rem;
    overflow: hidden;
}

#min-arw:hover #anim-min-arw {animation: Slide 7s ease;}
#anim-min-arw path {
    animation: Slide 7s ease-in-out infinite;
    transition: transform 1s ease ;
}
@keyframes Slide {
    0% {transform: translate(0, 0);}
    1% {transform: translate(0, 0);}
    3% {transform: translate(200px, -200px);}
    3.01% {transform: translate(-360px, 360px);}
    11% {transform: translate(0, 0);}
    100% {transform: translate(0, 0);}
}