.archive-stages {
    width: 100%;
    height: fit-content;
  
  }
  
  
  
  
    .head-archive-slogan {
     
      color: #395569;
    font-size: 25px;
    margin: 2rem 0;
      max-width: 600px;
      text-align: center;
      
    }
  
    .stages-archives-title {
      margin-top: 3rem ;
      font-weight: 600;
      color: #395569;
     
    }
  
  .list-stages-container {
      max-width: 100vw;   
      display: flex;
      flex-direction: column;
     
      align-items: center;
      background-color: #89C1BB;
  
  }
  
  
  .list-stages-archive {
      
     width: 80%;
      height: fit-content;
      display: flex;
     flex-direction: column;
     justify-content: center;
  align-items: center;
     padding: 2rem ;
     gap: 2rem;
    
      
  }
  
  .stage-archive {
    text-decoration: none;
    width: 70%;
    padding: 2rem;
      background-color: #EAEAEA;
      border-radius: 3px;
      box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    font-size: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
     color: #395569;
  }
  
  .stage-archive-image {
      border-radius: 3px ;
      margin-bottom: 20px;
      width: 100%;
      height: 200px;
      object-fit: cover;
  }
  
  .stage-archive-date {
      font-weight: 600;
      width: fit-content;
      border: 1px solid antiquewhite;
      border-radius: 5px;
      padding: 5px;
    margin: 5px;
      bottom: 30px;
      left: 50%;
    }

    .post__title {
        font-size: 25px;
        font-weight: 600;
        margin: 20px 0;
    }

    .post__excerpt {
        max-width: 600px;
    }
  
    .button-archive-stages {
    
      margin-top: 10px;
      background-color: #89C1BB;
      border: none;
      border-radius: 5px;
      padding: 0.5rem;
      font-size: 14px;
      margin: 1rem;
      transition: 0.2s linear;
    }
  
    .button-archive-stages>a {
      text-decoration: none;
      color: #395569;
      font-weight: 600;
    }
  

    
  
    
     
    
     .button-archive-stages:hover {
      box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
      transform: scale(1.05);
     
    
    }
  
  
  
  
  
  
  
  .nav-suivant>a {
      /* text-decoration: none; */
      color: #395569;
      font-size: 18px;
      font-weight: 600;
  }
  
  
  .nav-archive-link {
    height: 40px;
    width: fit-content;
   background-color: #395569;
   color: antiquewhite;
   padding: 5px;
   text-decoration: none;
   display: flex;
   align-items: center;
   font-size: 16px;
   font-weight: 600;
   border-radius: 5px;
   transition: 0.2s linear;
   margin: 1rem;
  }
  
  .nav-archive-link:hover {
    transform: scale(1.05);
   
     box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  }
  
  
  
  
  @media (max-width: 821px) {
      .head-archive-slogan {
         
        font-size: 16px;

        }
        .stage-archive {
          width: 95%;
          justify-content: center;
        }

        .post__title{
          text-align: center;
        }
  }