@media (max-width: 64em) {

   .presta h1, .contact h1 {
        display:none;
    }

    /*Header*/
    nav {
        display: none;
    }

    header {
        justify-content: center;
        position: relative;
    }

    header img {
        margin: 10px 0;
    }


    /*Home*/

    main {
        gap: 3em;
    }
    .presentation {
        flex-direction: column;
        align-items: center;
        gap: 2em;
    }
    .presentation aside {
        width: 90%;
        display: flex; 
        justify-content: center; 
      }
    .presentation aside img {
        max-width: 60%;
        margin: 0;
        margin-top: 2em;
    }
    .presentation article {
        width: 90%;
        margin: 0;
    }
    .presentation_text {
        padding-bottom: 2em;
      }
    .presentation_link {
        flex-direction: column;
        align-items: center;
        gap: 1em;
        padding-bottom: 2em;
    }
    .home_link_sm {
        gap: 1em;
      }

    /*Presta*/  

    .presta_header h1 {
        left:18%;
        bottom: 5%;
      }
    .presta_button {
        margin: 0;
        margin-top: 1em;
        flex-direction: column;
        gap: 0.5em;
        align-items: center;
    }

    button {
        padding: 1rem 2rem;
      }

    .mobile {
        display: flex;
        width: 100%;
        margin-bottom: 1em;
        text-align: center;
        justify-content: center;
    }

    #presta_text {
        display: none;
    }

    /*Confiance*/
    
    h3 {
        margin: 0.5em;
    }

    #confiance_logo {
        gap: 0.5em;
        margin: 1em;
      }
    
    #confiance_logo img {
        width: 15%;
    }

    /*Contact*/
    .contact_header {
        flex-direction: column;
        gap: 1em;
        align-items: center;
        justify-content: center;
      }

    .contact_header img {
        width: 25%;
        margin: 0;
        margin-top: -1em;
    }

    .contact_header_text {
        gap: 1em;
        margin: 0;
        width: 90%;
    }

    form {
        margin: 0 5%;
    }

    .form_row {
        flex-direction: column ;
      }
    
      .form_row label {
        width: 100%;
      }
      form button {
        width: 100%;
      }

    /*Footer*/
    footer {
        margin-top:3em;
    }
      

    /*Mise en page des prestations*/

    .container {
      width: 100%;
      display: flex;

      font-family: 'GeosansLight', sans-serif;
      flex-wrap: wrap;

    }

    #searchInput {
  width: 70%; 
}
    
    .block, .blockC {
      position: relative;
      overflow: hidden;
    }


    .presta_desc {
        margin: 5% 10%
      }

      .block, .blockC {
        width: 100%; 
        max-width: 100%; 
      }

      .imgBG {
        height: 300px;
        max-height: 300px;
      }

    #desc {
        font-size: clamp(14px, 0.8vw, 16px);
    }

    .mobile_button {
        display: flex;
        z-index: 10;
        width: 100%;
        justify-content: center;
      }
    
      .block.in-view .overlay {
        top: 50%;
      }
    
      .block.in-view h2 {
        bottom: 50%;
      }
    
      .block.in-view #desc {
        top: 50%;
        opacity: 1;
      }
    
      .block.in-view img {
        filter: brightness(60%);
      }
    
      .block .mobile_button {
        display: block; /* Assure que le bouton mobile est visible */
      }
    
    
    .block {
      position: relative;
    }
    
    .overlay {
      position: absolute;
      top: 70%;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(transparent, rgba(0, 0, 0, 1));
      z-index: 1;
      transition: top 0.5s ease;
    }
    
    .block h2 {
      position: absolute;
      bottom: 20%;
      left: 0;
      right: 0;
      margin: 0;
      color: white;
      text-align: center;
      padding: 0.2em;
      z-index: 2;
      transition: bottom 0.5s ease;
    }
    
    #desc {
      font-size: clamp(16px, 1vw, 18px);
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      padding: 0.2em;
      margin: 3%;
      color: white;
      text-align: center;
      z-index: 2;
      opacity: 0;
      transition: top 0.5s ease, opacity 0.5s ease;
      font-weight: bolder;
    }
    
    .block:hover .overlay {
      top: 50%;
    }
    
    .block:hover h2 {
      bottom: 50%;
    }
    
    .block:hover #desc {
      top: 50%;
      opacity: 1;
    }
    
    .block:hover img {
      filter: brightness(60%);
    }


.blockC.in-view .overlay {
    top: 50%;
  }
  
  .blockC.in-view h2 {
    bottom: 50%;
  }
  
  .blockC.in-view #desc {
    top: 50%; 
    opacity: 1; 
  }
  
  .blockC.in-view img {
    filter: brightness(60%);
  }

  /*About*/

  #pageQuiSuisJe article {
    display: flex;
    flex-direction: column;
  }

  #pageQuiSuisJe p {
    color: black;
  }

  .enfance, .granier, .enfance_text, .etudes, .conclusion, .conclusion_text {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
  }

  .granier, .planetarium_image {
    order: 2;
  }

  .etudes_text, .etudes_image, .planetarium_text {
    width: 100%;
  }

 .conclusion_image {
    display: none;
 }

 .about_link .block {
    max-height: 250px;
    display: flex;
    flex-direction: column;
    position: relative;
 }

 .about_link .block img {
    height: 150px;
    width: 100%;
 }

 .about_link .overlay{
    display: none;
 }

 .about_link h2 {
    color: black;
    position: relative;
    bottom: 0;
    font-size: 16px;
 }

 .about_link .clic, .about_link p {
    display: none;
 }



}