#etapeDuJour{
    width: 50%;
    height: 100vh;
    position: fixed;
    background: #bee2e8;
    transition-duration: 1s;
    z-index: 9;
    box-shadow: 0px 2px 5px rgba(0, 0, 0,.2);
}
#placeEtapeDuJour{
    width: 50%;
    height: 100vh;
    transition-duration: 1s;
}
#textEtapeDuJour{
    width: 100%;
    position: absolute;
    z-index: 1;
    text-shadow: 0px 2px 5px rgba(0, 0, 0,.2);
}
#sectionHautMinu{
    display: flex;
    align-items: center;
    margin-top:7em;
    margin-bottom:2em;
    margin-left: 4em;
    transition-duration: 1s;
}
#sectionHautMinu img{
    height:10em;
    transition-duration: 500ms;
}
#countdown{
    color: #0068af;
    font-size:1.2em;
    transition-duration: 500ms;
}
#countdown h3{
    font-size:3.5em;
}
#countdown p{
    font-size:4em;
    transition-duration: 500ms;
}
#countdown_day{
    font-size:4em;
    font-weight:bold;
    transition-duration: 500ms;
}
#countdown_hour, #countdown_min, #countdown_sec{
    font-size:3em;
    font-weight:bold;
    transition-duration: 500ms;
}

#sectionBasMinu{
    margin-top:2em;
    margin-left: 5em;
    margin-right: 2em;
    color: #0068af;
    animation: 1s fade;
}
#boutonEtape{
    height:3em;
    width:30%;
    margin-left: 5em;
    background: #30ade3;
    text-align: center;
    padding-top:0.75em;
    box-shadow: 1px 2px 5px rgba(0,0,0,.5);
    border-radius: 0.2em;
}

#boutonEtape a{
    text-decoration: none;
    color: #0068af;
    width:10em;
}
#boutonEtape a p{
    animation-duration: 200ms;
}
#boutonEtape a p:hover{
    transform: scale(1.1);
    transition-duration: 500ms;
    text-shadow: 1px 2px 5px rgba(0,0,0,.2);
    animation-duration: 500ms;
}



/* Carouselle étape du jour */
#carouEtapeDuJour{
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.slide-container {
    width: 305%;
    height: 100%;
    margin: auto;
    display: flex;
}
.custom-slider{
    width:100%;
    height: 100%;
    opacity: 1;
    animation: 15s slide 0s infinite;
}
.slide-img{
    width: 100%;
    height: auto;
}

@keyframes slide {
	0%,25%,100%	{transform: translate(0px, 0px)}
	33%, 60%		{transform: translate(-100%, 0px)}
	66%, 98%		{transform: translate(-200%, 0px)}
}
@keyframes fade {
	from {opacity: 0; transform: translate(-10px, 0px)}
	to		{opacity: 1; transform: translate(0px, 0px)}
}

@keyframes enter {
    0% {
      transform: translate(0px, -10vh);
    }
  
    20% {
      transform: translate(0px, 0px);
    }
    80%{transform: translate(0px,0px);}

    100%{transform: translate(0px,100px);}
}


/* Replis */

#etapeDuJour.replis{
    width: 10%;
    transition-duration: 1s;
    text-align: center;
}
#placeEtapeDuJour.replis {
    width: 10%;
    height: 90vh;
    transition-duration: 1s;
}
#actualiter.deplis{
    width:90%;
    transition-duration: 1s;
}
#etapeDuJour.replis #sectionBasMinu{
    display: none;
    transition-duration: 500ms;
}
#etapeDuJour.replis #sectionHautMinu img{
    height:5em;
    transition-duration: 500ms;
}
#etapeDuJour.replis #sectionHautMinu{
    display: block;
    margin-top:5em;
    margin-bottom:0em;
    margin-left: auto;
    transition-duration: 500ms;
}
#etapeDuJour.replis #countdown {
    display: grid;
    text-align: center;
    transition-duration: 500ms;
    font-size:0.5em
}
#etapeDuJour.replis #countdown_day {
    font-size:2em;
    font-weight:bold;
    transition-duration: 500ms;
}
#etapeDuJour.replis #countdown_hour, #countdown_min, #countdown_sec {
    font-size:1em;
    font-weight:bold;
    transition-duration: 500ms;
}

#etapeDuJour.replis #boutonEtape{
    height:4em;
    width:80%;
    margin-left: auto;
    margin-right: auto;
    margin-top:2em;
    border-radius: 0.2em;
    padding-top:0.5em;
    transition-duration: 500ms;
}


/* Actualiter */
#article{
    display: flex;
}
#actualiter{
    width:50%;
    transition-duration: 1s;
    overflow:hidden;
    background: white;
}
#actualiter video{
    width: 100%;
    margin-top:0px;
}
#actualiter.ajust{
    width: 100%;
    margin-bottom:2em;
    margin-top:0em;
    transition-duration: 200ms;
}
#actualiter.remonter{
    width: 100%;
    margin-bottom:2em;
    animation: 1s remonter;
    margin-top:0px ;transform:translate(0px,-18vw);
    margin-bottom: -18vw;
}

@keyframes remonter {
    0% {
        margin-top:300px;
    }
  
    20% {margin-top:100px;transform:translate(0px,-10vw);;
    }

    100%{margin-top:0px; transform:translate(0px,-18vw);}
}
#aLaUne{
    margin-left:1em;
    height:5000px;
}

/* SLide Parcour */
#slideParcour{
    width:100%;
    height:62vw;
    overflow:hidden;
    transform: translate(0%,-1%);
    text-shadow: 0px 2px 5px rgba(0, 0, 0,.3);
    background: #bee2e8;
}
#slideAllPacour{
    display:flex;
    width: 1920px;
    height:750px;
}
.textSlideParcour{
    position:absolute;
    z-index: 3;
    color: white;
    background: linear-gradient(rgba(255,255,255,0) 70%,#bee2e8);
    height:100%;
}
.textSlideParcour,.imageSlideParcour{
    width:100%;
}
.textSlideParcour h3{
    margin-top:40vw;
    margin-left: 5vw;
    padding-right: 5vw;
    font-size: 2em;
}
.textSlideParcour p{
    margin-left: 5vw;
    margin-right: 5vw;
    font-size: 1.5em;
}

.imageSlideParcour img{
    width: 100%;
    height: auto;   
}
#slideDot{
    height: 0.7em;
    width: 60%;
    position: absolute;
    z-index: 2;
    display: flex;
    margin-top: 55vw;
    margin-left: 25vw;
}
.dotSlideParcour{
    width:5%;
    height: 100%;
    margin-left: 0.5em;
    margin-right: 0.5em;
    background-color: #30ade3a1;
    border-radius: 0.2em;
    box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition-duration: 500ms;
}
.contentSlide{
    width:100%;
    z-index: 0;
    left:1920px;
    animation: 2s reversSlideContent;
    position: absolute;
}
.contentSlide.active{
    width:100%;
    animation: 1s slideContent;
    left:0%;
    z-index: 1;
}
.dotSlideParcour.active{
    width: 30%;
    transition-duration: 500ms;
}


/* Container */
.container h3{
    padding-top:1em;
    padding-bottom:1em;
    padding-left: 1em;
}
#presTraditour img{
    width: 100%;
    box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.3);
    transition-duration: 200ms;
}
#presTraditour img:hover{
    transform: scale(1.02);
    transition-duration: 500ms;
}

/* Section équipage */
#fondEquipage{
    margin-top:2em;
    background: rgb(255, 220, 125);
}
#sectionEquipage{
    width: auto;
    height: 48vh;
    padding:1em;
    overflow-y:hidden;
    overflow-x:scroll;
    display: flex;
    align-items: center;
}
#sectionEquipage a{
    color: black;
    height:100%;
    min-width:15em;
    text-decoration:none;
    margin: 1em;
    border-radius:1em;
    background-repeat: repeat,;
    background-size: 100%;
    box-shadow: 2px 2px 5px rgba(0,0,0,.25);
    overflow:hidden;
    display:flex;
    align-items: flex-end;
    transition-duration: 500ms;
    flex-direction: column;
    justify-content: space-between;
}
#equipage{
    transition-duration: 200ms;
}
#equipage:hover{
    transition-duration: 500ms;
    background-size: 105%;
}
#numEquipage{
    background: white;
    box-shadow: 2px 2px 5px rgba(0,0,0,.25);
    border-radius:0 0 0 1em ;
}
#numEquipage h2{
    font-size:3em;
    padding:0.2em;
    margin: 0;
}
#infoEquipage{
    width:100%;
    height:55%;
    background: linear-gradient(rgba(255, 255, 255, 0), white);
    padding:1em;
}
#typeEquipage{
    font-size:1em;
    color:white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0,.5);
}
#nomEquipage{
    font-size:1.8em;
    color:white;
    text-shadow: 1px 1px 3px rgba(0, 0, 0,.8);
    max-height: 2.5em;
    overflow: hidden;
}
#nomPatron{
    font-size:1.2em;
    color:#febe11;
    text-shadow: 1px 1px 2px rgba(0, 0, 0,.2);
}
#villeDOrigine{
    font-size:1em;
    color:#0068af;
}


/* Article Actualiter */
#sectionActualiter{
    display: flex;
    padding:1em;
    flex-wrap: wrap;
}
#sectionActualiter a{
    text-decoration:none;
}
.articleActualiter{
    width:17em;
    height:25em;
    margin: 1em;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
    border-radius:1em;
    box-shadow: 2px 2px 5px rgba(0,0,0,.25);
    overflow:hidden;
    color: black;
    transition-duration: 200ms;
}
.articleActualiter:hover{
    transform: scale(1.02);
    transition-duration: 500ms;
}
.articleActualiter.fist{
    width:36em;
    height:25em
}
.infoArticle{
    width:100%;
    height:55%;
    background: linear-gradient(rgba(255, 255, 255, 0), white);
    padding:1em;
    text-shadow: 2px 2px 5px rgba(0,0,0,.25);
}

.infoArticle h3{
    padding: 0;
    height: 55%;
    overflow: hidden;
    color: #febe11;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8)
}
@keyframes slideContent {
    from {
        left:1920px;
    }
    to{
        left:0px;
    }
    
}
@keyframes reversSlideContent {
    from {
        left:0px;
    }
    to{
        left:-1920px;
    }
}

@media (max-width: 992px) {
    #etapeDuJour{
        width:100%;
        position: fixed;
        height: 30em;
        transition-duration: 100ms;
    }
    #sectionHautMinu{
        margin-top:1em;
    }
    #etapeDuJour.replis{
        width: 100%;
        transition-duration: 1s;
        text-align: center;
        height:25vh;
    }
    #etapeDuJour.replis #sectionHautMinu{
        margin-top:1em;
        display: flex;
        justify-content: center;
    }
    #etapeDuJour.replis #countdown{
        display: flex;
        align-items: flex-end;
    }
    #etapeDuJour.replis #countdown_day {
        font-size:2.5em;
        font-weight:bold;
        transition-duration: 500ms;
        padding-left: 0.5em;
    }
    #etapeDuJour.replis #countdown_hour, #countdown_min, #countdown_sec {
        padding: 0.2em;
        font-size:1.2em;
        font-weight:bold;
    }
    #etapeDuJour.replis #boutonEtape{
        height:2.5em;
        width:50%;
    }
    #article{
        display:block;
    }
    #placeEtapeDuJour{
        display:none;
    }
    #actualiter{
        width: 100%;
        margin-top:60vh;
        transition-duration:1s;
    }
    #actualiter.ajust{
        width: 100%;
        margin-bottom:2em;
        margin-top:40vh;
        transition-duration:1s;
    }
    #actualiter.remonter{
        width: 100%;
        margin-bottom:2em;
        margin-top:22vh;
        animation: 500ms remonterPetit;
        /* margin-top:0px ;transform:translate(0px,-18vw); */
    }
    #actualiter.deplis{
        transition-duration: 1s;
    }
    .textSlideParcour h3{
        margin-top:33vw;
    }
    .infoArticle h3{
        height: 43%;
    }
}

@keyframes marginTransition {
    from {
        margin-top:60vh;
    }
    to{
        left:-1920px;
    }
}

@keyframes remonterPetit {
    0% {
        margin-top:42vh;
    }
  
    20% {margin-top:38vh;;
    }

    100%{margin-top:22vh;}
}


@media (max-width: 768px){
    .textSlideParcour h3{
        margin-top:36vw;
    }
    #sectionActualiter{
        justify-content: center;
    }
    .articleActualiter.fist{
        width:17em;
    }
}
@media (max-width: 540px) {
    #sectionHautMinu{
        margin-top:1em;
        margin-left: 1em;
        margin-bottom:1em;
    }
    #sectionHautMinu img{
        height:5em;
        transition-duration: 500ms;
    }
    #countdown{
        color:#0068af;
        font-size:1em;
        transition-duration: 500ms;
    }    
    #countdown.replis{
        color:#0068af;
        font-size:1em;
        transition-duration: 500ms;
    }
    #countdown_day{
        font-size:3em;
        font-weight:bold;
        transition-duration: 500ms;
        padding-left: 0.5em;
    }
    #countdown_hour, #countdown_min, #countdown_sec{
        font-size:1.5em;
        font-weight:bold;
        transition-duration: 500ms;
    }
    #sectionBasMinu{
        margin-right: 1em;
        margin-left: 1em;
        margin-top:1em;
    }
    #boutonEtape{
        height:3em;
        width:50%;
        margin-left: 25vw;
    }
    #etapeDuJour.replis{
        height:20vh;
    }
    #etapeDuJour.replis #boutonEtape{
        margin-top:1em;
    }
    #etapeDuJour.replis #countdown{
        align-items: center;
    }
    #etapeDuJour.replis #sectionHautMinu{
        margin-top: 0.5em;
    }
    .textSlideParcour h3{
        font-size: 1.5em;
        margin-top:6vw;
    }
    .textSlideParcour p{
        font-size: 1em;
    }
    #actualiter{
        width: 100%;
        margin-top:50vh;
    }
    #actualiter.ajust{
        margin-top:33vh;
    }
    #etapeDuJour{
        height: 50vh;
    }
    #slideParcour{
        transform: translate(0%,-3%);
    }
    #slideDot{
        height: 0.8em;
        width: 80%;
        margin-left: 9vw;
    }
    .dotSlideParcour{
        width:10%;
    }
    .dotSlideParcour.active{
        width:30%;
    }
}

@media (max-width: 380px) {
    #countdown h3{
        font-size: 1em;
    }
    #countdown {
        align-items: baseline !important;
    }
    #sectionBasMinu h3{
        font-size: 1em;
    }
    #sectionBasMinu p{
        font-size: 0.8em;
    }
    #etapeDuJour{
        height: 52vh;
    }
    #etapeDuJour.replis{
        height: 25vh;
    }
    #placeEtapeDuJour.replis{
        height: 25vh;
    }
    #actualiter{
        margin-top:52vh;
    }
    #actualiter.ajust{
        width: 100%;
        margin-bottom:2em;
        margin-top:42vh;
        transition-duration:1s;
    }
    #actualiter.remonter{
        width: 100%;
        margin-bottom:2em;
        margin-top:33vh;
        animation: 500ms remonterPetit;
        /* margin-top:0px ;transform:translate(0px,-18vw); */
    }
    #sectionEquipage{
        height:55vh;
    }
    .textSlideParcour h3{
        margin-top:5vw;
        font-size:1.2em;
    }
    .textSlideParcour p{
        font-size:0.8em;
    }
}

@media (max-width: 1280px) {
    #countdown h3{
        font-size: 2.5em;
    }
    #countdown {
        align-items: baseline !important;
    }
}
@media (max-width: 1114px) {
    #countdown {
        align-items: flex-end !important;
    }
}
@media (max-width: 992px) {
    #countdown h3{
        font-size: 3em;
    }
    #countdown {
        align-items: baseline !important;
    }
}
@media (max-width: 605px) {
    #countdown h3{
        font-size: 3em;
    }
    #countdown {
        align-items: flex-end !important;
    }
}
@media (max-width: 540px) {
    #countdown h3{
        font-size: 3em;
    }
    #countdown {
        align-items: baseline !important;
    }
}
@media (max-width: 380px) {
    #countdown h3{
        font-size: 1.5em;
    }
    #countdown {
        align-items: baseline !important;
    }
}