/* KEYFRAMES */

@keyframes fadeInBackground {
    0% {
      opacity: 0;
      visibility: hidden;
    }
    100% {
      opacity: 1;
      visibility: visible;
    }
}

/* Animation pour la section de gauche */
@keyframes slideInFromLeft {
    0% {
      opacity: 0;
      transform: translateX(-100%); /* Déplacez la section vers la gauche de l'écran */
    }
    100% {
      opacity: 1;
      transform: translateX(0); /* Amenez la section à sa position finale */
    }
  }
  
  /* Animation pour la section de droite */
  @keyframes slideInFromRight {
    0% {
      opacity: 0;
      transform: translateX(100%); /* Déplacez la section vers la droite de l'écran */
    }
    100% {
      opacity: 1;
      transform: translateX(0); /* Amenez la section à sa position finale */
    }
  }

/*  MAIN  */

.main {
    padding: 0.5em;
    text-align: center;
}

.parcours__card {
    display: flex;
    flex-direction: column;
}

.main__title {
    animation: fadeInBackground 0.5s ease 0.5s forwards;
    opacity: 0;
    font-size: 2.5em;
    margin: 0.2em;
}

.parcours__carnelle {
    animation: fadeInBackground 0.5s ease 0.5s forwards;
    opacity: 0;
}

.parcours {
    background-color: var(--main-white);
    border: 0.5em solid var(--main-dark-red);
    border-radius: 0.5em;    
    padding: 0.5em;
    margin: 0.5em;
}

.parcours-15 {
    opacity: 0;
    animation: slideInFromLeft 1s ease 1s forwards;
    border: 0.5em solid blue;
}

.parcours-30 {
    opacity: 0;
    animation: slideInFromRight 1s ease 1s forwards;
    border: 0.5em solid red;
}

.parcours__title {
    font-size: 1.5em;
    margin-bottom: 0.5em;
}

.parcours__description {
    line-height: 1.2em;
}

.parcours__img {
    width: 100%;
    margin: 1em 0;
}

.parcours__typo {
    max-width: 100%;
}

.parcours__subtitle {
    font-size: 1.2em;
    margin-bottom: 0.2em;
    margin-top: 0.2em;
}

.bluespan {
    color: blue;
}

.redspan {
    color: red;
}

@media (min-width: 900px) {
    .parcours__card {
        flex-direction: row;
    }    
    .parcours {
        border-radius: 1.5em;    
        padding: 2em;
        margin-bottom: 2em;
        width: 50%;
    }
    .parcours__description {
        line-height: 1.5em;
    }
    .parcours__title {
        font-size: 2.5em;
    }
    .parcours__subtitle {
        font-size: 1.5em;
        margin-bottom: 0.4em;
        margin-top: 0.4em;
    }
    .main__title {
        font-size: 3em;
        margin-bottom: 0.5em;
    }
    .parcours__img {
        max-width: 1000px;
    }
    .main {
        padding: 2em;
        width: 80%;
        margin: auto;
    }
}