@media (max-width: 768px) {
    .navbar {
        margin: 0 auto;
        padding: 1rem 1.2rem;
    }

    .nav-center {
        display: none;
    }

    .nav-left p{
        display: none;
    }

    .nav-left .logo{
        width: 50px;
    }

    .section-grid {
        padding: 6rem 2rem;
    }

    h1{
        font-size: 2.6rem;
    }

    .hero{
        flex-direction: column;
    }

    .overlay-image{
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
    }

    .cta-group{
        gap: 20px;
        flex-direction: column;
        align-items: flex-start;
    }

    .hero-image{
        width: 100%;
    }

    .hero-image img{
        max-width: 400px;
    }

    .logo-track img{
        height: 38px;
    }

    .offer-card{
        width: 100%;
    }

    .offer-card img{
        height: auto;
        width: 100%;
    }

    .about-section{
        flex-direction: column;
    }

    .about-title, .title{
        font-size: 2rem;
    }

    .key-numbers{
        display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 50px 0px;
    }

    .number-card p{
        max-width: 150px;
        margin: 0 auto;
    }


    .service-item, .service-item.reverse{
        flex-direction: column;
        gap: 40px;
    }

    .service-image img{
        width: 100%;
    }


    .offre-visio{
        flex-direction: column;
        border-radius: 0;
        border: none;
    }


    .carousel-slide.active {
        flex-direction: column;
        text-align: left;
    }

    .progress-bar-container{
        margin-top: 2rem;
    }

    .faq-item{
        text-align: left;
    }

    .faq-toggle{
        width: 35px;
    }

    .footer-container, .footer-links{
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }

}

/* tablette : 2 colonnes */
@media (max-width: 1024px) {
  .small-testimonials > div {
    flex: 1 1 calc(50% - 20px);
    max-width: calc(50% - 20px);
  }
}

/* mobile : 1 colonne */
@media (max-width: 640px) {
  .small-testimonials > div {
    flex: 1 1 100%;
    max-width: 100%;
  }
}