/* Cibler les écrans de moins de 768px (mobile) */
@media only screen and (max-width: 768px) {

    /* Assurez-vous que les figures prennent toute la largeur sur mobile */
    figure.col-12.col-md-6 {
      width: 100%;
      margin: 0 auto; /* Centrer les images */
    }
  
    /* Adapter la taille du texte */
      h4, p, .section__subtitle {
      font-size: 90%; /* Réduction de la taille des titres et textes */
      line-height: 1.4;
    }
  
    /* Pour que le texte et les images soient bien espacés */
    .works-description {
      padding: 10px;
    }
  
    /* Adapter les marges internes et externes pour éviter un contenu trop compact */
    .inner__container {
      padding: 15px;
      margin-bottom: 20px;
    }
  
    /* Réduire la taille du menu pour qu'il soit plus ergonomique sur mobile */
    nav#menu .menu__content {
      padding: 10px;
    }
  
    /* Réduire les icônes de réseaux sociaux */
    ul.socials-text li a {
      font-size: 14px;
    }
  
    /* Adapter la section contact */
    .contact-data__item h5 {
      font-size: 18px;
    }
    
    .contact-data__text a {
      font-size: 16px;
    }
  
    /* Ajuster les boutons pour qu'ils soient plus adaptés au mobile */
    .btn.btn-solid {
      width: 100%;
      font-size: 16px;
      padding: 10px;
    }
  
    /* Redimensionner le logo */
    .logo img {
      width: 70%;
    }
  
    /* Assurez-vous que les colonnes prennent 100% de largeur */
    .col-12, .col-md-6 {
      width: 100%;
      padding: 10px;
    }
  
    /* Adapter les images de la galerie */
    .gallery .works-image {
      max-width: 100%;
      height: auto;
    }
  
    /* Réduire les marges pour un contenu plus compact */
    .headline__content {
      padding: 20px;
    }
  }