:root{
    --sizeScrollImage : 70vh;
}

#containerPage{
    display: flex;
    position: relative;
    /*align-content: center;*/
    /*justify-content: center;*/

    flex-wrap: wrap;
}

#divTitleHomePage{
    position: absolute;

    width: 80vw;

    z-index: 15;

    object-fit: cover;
    overflow-x: hidden;

    /*padding-left: 20px;*/
    /*padding-right: 20px;*/
    border-bottom: solid 1px var(--primaryfontColor) ;

    left: 12%;
    top: 35%;

    pointer-events: none;
}


#titleHomePage{
    margin: 0;
    padding: 0;

    font-weight: bold;
    font-size: max(3vw, 3.4vh);
}


#titleHomePage.animated{
    animation-duration: 5s;
    animation-name: slidein;
    pointer-events: none;
}

@keyframes slidein {
    from {
        padding-left: 150%;
        width: 100%;
    }

    to{
        width: 100%;
        padding-left: 0;
    }
}

#scrollImageDiv{
    width: 100%;
    height: var(--sizeScrollImage);
}

#allImagesDiv{
    position: relative;

    /*width: 100%;*/
    height: var(--sizeScrollImage);

    object-fit: cover;
    overflow-y: hidden;
    overflow-x: hidden;
}

#sContent {
    position: absolute;   /*on sort l'élément du flux*/
    top: 0;               /*on le positionne précisément dans ...*/
    left: 0;              /*l'angle haut gauche de son parent positionné*/
    width: 300vw;         /*ou 300% car 3 éléments*/
    margin: 0;
    padding: 0;
    z-index: 0;

    display: flex;
    align-items: start;

    /*CSS3 transition*/
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}
/*#sContent li {*/
/*    !*display: inline;      !*on aligne les éléments du slideshow*!*!*/
/*}*/

#allImagesDiv .next, #allImagesDiv .prev {
    position: absolute;

    top: 40%;
    padding: 10px;

    border-radius: 50%;
    z-index: 10;

    background-color: var(--primaryPageColor);
}

#allImagesDiv .prev { left: 0; }
#allImagesDiv .next { right: 0; }

/* initialisation */
#allImagesDiv .next, #allImagesDiv .prev { display: none; }
#allImagesDiv .next1 { display: block; }

/* Vers 1ère étape */
#s1{
    margin-top: -70px; /* En haut de la page annule le header pour ne pas faire descenddre la page*/
}
#s1:target #sContent { left: 0; }
#s1:target .next, #s1:target .prev { display: none; }
#s1:target .next1 { display: block; }

/* Vers 2ème étape */
#s2:target #sContent { left: -100vw; } /*ou -100%*/
#s2:target .next, #s2:target .prev { display: none; }
#s2:target .next2, #s2:target .prev2 { display: block; }

/* Vers 3ème étape */
#s3:target #sContent { left: -200vw; } /*ou -200%*/
#s3:target .next, #s3:target .prev { display: none; }
#s3:target .prev3 { display: block; }

#divUniqueImage{
    overflow: hidden;
    width: 100vw;
    height: var(--sizeScrollImage);
}

#HomepageBigPicture{
    object-fit: cover;

    width: 100vw;
    height: 100%;
    min-height: var(--sizeScrollImage);


    /*aspect-ratio: 6/3;*/
    /*margin-top: -30%;*/
}


#presentationBackGround{
    width: 100%;

    background: var(--primaryPageColor);

    display: flex;
    justify-content: center;
}

#presentation{
    text-align: center;
    width: 80%;
    padding: 20px;
}

#divListePres{
    text-align: start;
    padding-top: 20px;
}

.fontsizePres{
    font-size: max(3vh, 18px);
}

@media screen and (max-width: 700px) {
    #scrollImageDiv{
        margin-bottom: 0;
        height: auto;
    }
}

#gpsAndTimeShopAndBack{
    width: 100%;
    height: auto;

    position: relative;
    overflow: hidden;
    object-fit: cover;

    clip-path: inset(0);
}

#gpsAndTimeShop{
    display: flex;
    flex-wrap: wrap;
    flex-direction:  row-reverse;


}

#imageBackTimeShop{
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;
    object-fit: cover;

    z-index: -9;
}

#timeShopDiv{
    /*display: flex;*/
    /*flex-direction: column;*/
    /*flex-wrap: wrap;*/

    min-height: 30vh;
    width: 40vw;

    padding-left: 5vw;
    padding-right: 5vw;
    margin: 2vh;
    margin-right: 5vh;
    margin-bottom: calc(2vh + 50px) ;

    font-size: max(3vh, 18px);
    color: black;

    background: #FFFFFF;

    text-align: center;
    border-radius: 20px;

    /*width: max(1000px, 20%);*/

    /*background: var(--secondaryPageColor);*/
    /*border: 2px solid var(--primaryPageColor);*/
}

#falseGps{  /*L'emplacement destiné au gps en absolute*/
    width: 400px;
    height: 400px;
}

#magnifyingPositionContainerDiv{
    position: absolute;

    display: flex;

    overflow-y: hidden;
    overflow-x: hidden;

    width: 100%;
    height: 100%;

    pointer-events: none;
}

#magnifyingPositionDiv{
    position: relative;
    width: 100%;
    height: 100%;

    z-index: 10;
    pointer-events: none;
}

#gps{
    position: absolute;
    z-index: 1;

    bottom: calc(150px - 8vh);
    left: 0;

    border:0;
    border-radius: 50%;

    padding: 20px;
    margin-left: 50px;

    pointer-events: all;
}

#magnifyingPosition{
    position: absolute;


    z-index: 2;

    bottom: -8vh;
    left: -60px;
    width: 600px;

    pointer-events: none;
}

#magnifyingPosition.animated{
    animation-name: seePosition ;
    animation-duration: 3s;
}

@keyframes seePosition {

    /*Si l'animation trigger ça veut dire que quand elle se lance le point form n'est pas dans l'écran*/
    /*Probleme regler par 99vw*/

    from{
        width: 800px;
        bottom: 20vh;
        left: 99vw;
        rotate: -90deg;
    }

    30%{
        bottom: -15vh;
    }

    to{
        width: 600px;
        bottom: -8vh;
        left: -60px;
        rotate: 0deg;
    }
}



/*RESPONSIVE MEDIA*/

@media screen and (max-width: 800px) {
    .next, .prev{
        top: 70% !important;
    }
}

@media screen and (max-width: 1000px)  {
    #gpsAndTimeShop{
        flex-direction: row;
    }

    #timeShopDiv{
        width: 100vw;
        margin-right: 2vh;
    }
}

/*@media screen and (max-width: 1200px){*/
/*    #magnifyingPositionContainerDiv{*/
/*        display: none;*/
/*    }*/

/*    !*#magnifyingPositionDiv{*!*/
/*    !*    margin-top: 120%;*!*/
/*    !*}*!*/
/*}*/