@media (max-width: 768px) {
  .menu li {
      margin-bottom: 5px; /* espace entre chaque élément */
    }
  
    .menu li a {
      display: inline-block;
      padding: 5px;     /* espace vertical dans les liens */
    font-size: 10px;     /* agrandit un peu la taille sur mobile */
  }
}


@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.animated-logo {
  width: 160px;
  height: auto;
  display: block;
  margin: 14px auto 0 11px;
  animation: pulse 3s ease-in-out infinite;
  transition: transform 0.3s ease-in-out;
}

.animated-logo:hover {
  transform: scale(1.1);
}

/* Centrage sur mobile */
/* Style pour centrer le logo sur mobile */
@media (max-width: 767px) {
.text-center-xs {
  text-align: center !important;
}

.text-center-xs img {
  margin: 10px auto 0;
  display: block;
}

/* Assurer que le toggle reste à droite */
.col-md-3.text-right.col-sm-6.col-md-push-6.col-xs-8 {
  position: absolute;
  right: 15px;
  width: auto;
}


}

@media (max-width: 768px) {
  ul.menu {
    text-align: center;
    padding: 0;
    margin: 0 auto;
  }

  ul.menu li {
    display: inline-block; /* Pour centrer les éléments en ligne */
    margin: 10px 0;
  }

  ul.menu li a {
    font-size: 13px;     /* Texte plus gros */
    text-align: center;  /* Centrage du texte dans le lien */
    display: block;
  }
}

/* Option 4: Effet de bordure animée */
.btn-filled:hover {
  background-color: white;
  color: #0088cc;
  border: 2px solid #0088cc;
}

  /* Rendre les liens plus lisibles sur mobile */
  @media (max-width: 767px) {
    footer.footer-1 .col-sm-4:first-child {
      margin-top: -25px; /* Remontez légèrement cette section */
      margin-bottom: 10px; /* Ajoute un peu d'espace en bas pour séparer des autres éléments */
    }
  }

/* Réduire la taille sur les tablettes */
@media (max-width: 991px) {
  h5.text-white {
    font-size: 16px;
  }
}