/* Mise en page */
.imagePres{    
    margin-top: 3em;
    width:100%;
    box-shadow: 1px 2px 5px rgba(0,0,0,5);
    height: fit-content;
}

.acessEtape{
    background-size: cover;
    background-position: center center;
    background-size: 100%;
    transition-duration: 200ms;
}

.acessEtape h4{
    color:white; 
    text-shadow: 1px 1px 5px rgb(0, 0, 0);
}

.acessEtape:hover h4{
    color: #40bef9;
    transition-duration: 500ms;
    transform:  translate(0.5em,0);
}

/* Annimation fleche */

.etapePrecedent .cTG-1{
    transition-duration: 200ms;
}
.etapePrecedent:hover .cTG-1{
    transform: translate(-15em,0);
    transition-duration: 500ms;
}
.acessEtape:hover .cTG-1{
    transform: translate(15em,0);
    transition-duration: 500ms;
}

/* Annimation canot */
.canotElements:hover{
    transform: scale(1.004);
    transition-duration: 200ms;
    cursor: pointer;
}


/* Contenu de la modale */
.presentationElementsCanot {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 2em;
    border-radius: 8px;
    z-index: 2001;
    max-width: 90%;
    width: 80%;
    display: none;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
    overflow: auto;
    max-height: 80%;
}

.presentationElementsCanot button {
margin-top: 1em;
padding: 0.5em 1em;
border: none;
background: #007bff;
color: white;
border-radius: 4px;
cursor: pointer;
}

.presentationElementsCanot button:hover {
background: #0056b3;
}

#etapePrecedent1{
    background-image: url(/img/parcourTotal.png);
}