@keyframes appear {
  from {
    opacity : 0;
    scale: 0.5  
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

  /*FORMULAIRE DE MODIFICATION D'ARTICLE*/
  .deleteLink {
    background-color: rgb(235, 88, 88);
    padding: 0.5rem;
    border-radius: 1rem;
  }
.article--update label{
  padding: 2rem;
}
.article--update input{
  width: 98%;
  margin: 1%;
  border-radius: 1rem;
  padding: 0.5rem;
  font-size: larger;
  font-family: var(--font-basic-txt);
}
textarea {
  width: 98%; /* Adapte la largeur à 98% du parent */
  max-width: 100%; /* Empêche de dépasser la taille du conteneur parent */
  min-width: 300px; /* Largeur minimale pour une meilleure lisibilité */
  height: 250px; /* Hauteur par défaut */
  box-sizing: border-box; /* Pour inclure le padding dans les dimensions */
  padding: 1rem;
  margin: 1%;
  font-size: larger;
  border-radius: 1rem;
  font-family: var(--font-basic-txt);
}
.readmore {
background-color: var(--color-bg);
border: solid var(--color-dark-txt); 
color: var(--color-dark-txt);
padding: 1rem 2rem 1rem 2rem;
border-radius: 5rem;
font-weight: 700;
position: relative;
}
.readmore:hover {
  background-color: var(--color-light);
}
.mindmap--container {
  animation: appear linear;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
  max-width: 100vw;
}
.mindmapimg{
  max-width: 100%;
}
.article {
  margin: 1rem 1rem 2rem 1rem;
  border-radius: 2rem;
  background-color: var(--color-light);

  &.title{
    text-align: center;
    font-size: larger;
    font-family: var(--font-secondary-title);
    font-weight: bold;
    padding: 1rem 2rem 0rem 2rem;
    text-shadow: none;

  }

  &.photo {
    animation: appear linear;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
    width: 90%;
    padding-bottom: 2rem;
  }

  &.intro{
    animation: appear linear;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
    text-align: justify;
  }
}
article {
  width: 90vw;
  margin: 2rem auto;
  border-radius: 2rem;
  background-color: var(--color-light);
}
.article--picture {
  animation: appear linear;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
  max-width: 100%;
  object-fit: cover;
  border-radius: 2rem 2rem 0 0;
}
.article--title {
  animation: appear linear;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
  padding: 0.5rem;
  text-align: center;
}
.article--text {
  animation: appear linear;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
  padding: 1rem;
  text-align: justify;
  margin: 0;
}


a {
  color: var(--color-dark-txt);
}

.article--text ul {
  padding-left: 1rem;
}

.contact-logo{
  width: 2rem;
  padding: 0.5rem;
  vertical-align: middle; 
}

.contact-btn {
    padding: 1rem 2rem 1rem 2rem;
    border-radius: 5rem;
    margin: auto;
    width: 90vw;
    background-color: var(--color-light);
    border: solid var(--color-dark-txt); 
    color: var(--color-dark-txt);
    font-size: large;
    font-family: var(--font-secondary-title);
    font-weight: bold;
}
.contact-btn-container{
  text-align: center;
}
@media screen and (min-width: 1024px) {
  .home {
    justify-content: space-between;
  }
  article {
    font-size: large;
    width: 90vw;
    display: flex;
    flex-direction: row;
  }
  .personnal-presentation{
    flex-direction: column;
    width: 50vw;
  }
  .personnal-presentation img{
    align-self: center;
  }
  .article--titleandtext{
    flex-direction: column;
  }
  .article--picture{
    width: 50rem;
    object-fit: cover;
  }

  .article {
    border-radius: 2rem;
    background-color: var(--color-light);
    animation: appear linear;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
    display: flex;
    flex-direction: row;

  &.titleandintro{
    flex-direction: column;
  }
    &.title{
      text-align: left;
      font-size: larger;
      font-family: var(--font-secondary-title);
      font-weight: bold;
      text-shadow: none;
      display: inline;
      margin-bottom: 1rem;
  
    }
    &.photo {
      width: 20%;
      align-self: flex-start;
      padding-bottom: 0rem;
    }
    &.intro{
      text-align: justify;
      padding-top: 0rem;
    }
  }
  .readmore{
    position: absolute;
    top: 11.5rem;
    left: 4rem;
  }
  .mindmap--container {
    max-width: 50%;
    margin: auto;
  }
}