/* Sur petits écrans, on force flex-direction en colonne et on gère les lignes */
  @media (max-width: 991.98px) { /* moins que lg */
    .topbar-row {
      flex-direction: column !important;
      align-items: center !important;
    }
    .topbar-left {
      display: flex !important;
      justify-content: center !important;
      gap: 1.5rem;
      width: 100%;
      margin-bottom: 0.5rem;
    }
    .topbar-right {
      display: flex !important;
      justify-content: center !important;
      width: 100%;
    }
  }


  body {
  background-color: white;
  background-image:
    linear-gradient(90deg, #f0f0f0	 1px, transparent 1px),
    linear-gradient(180deg, #f0f0f0 1px, transparent 1px);
  background-size: 50px 50px;
  background-attachment: fixed;
  margin: 0; /* Évite marge blanche sur body */
  padding: 0;
}

@media (min-width: 992px) {
  .row.mx-lg-0 {
    align-items: center;
  }
}

/* Animation keyframes */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 10px rgba(252, 185, 0, 0.7);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(252, 185, 0, 1);
  }
}

/* Appliquer animation fadeInUp sur le texte (tout ce qui est dans la première colonne) */
section.hero-animated .col-md-6:first-child > * {
  opacity: 0;
  animation: fadeInUp 1s forwards;
}

section.hero-animated .col-md-6:first-child > *:nth-child(1) {
  animation-delay: 0.2s;
}
section.hero-animated .col-md-6:first-child > *:nth-child(2) {
  animation-delay: 0.4s;
}
section.hero-animated .col-md-6:first-child > *:nth-child(3),
section.hero-animated .col-md-6:first-child > *:nth-child(4) {
  animation-delay: 0.6s;
}

/* Animation fadeInUp sur l’image (deuxième colonne) */
section.hero-animated .col-md-6.text-center img {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 1s forwards;
  animation-delay: 0.8s;
}

/* Animation pulse uniquement sur le bouton lien devis.html */
section.hero-animated a[href="/devis"] {
  animation: pulse 2.5s infinite ease-in-out;
  transition: background-color 0.3s ease;
  display: inline-block; /* pour le scale */
}

/* Hover effet bouton */
section.hero-animated a[href="/devis"]:hover {
  background-color: #d4a100;
  box-shadow: 0 0 25px rgba(212, 161, 0, 1);
}

.back-to-top i {
  display: inline-block;
  animation: wa-pulse 1.4s ease-in-out infinite;
  transform-origin: center;
}


.back-to-top:hover i {
  animation-duration: 0.9s;
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top i {
    animation: none;
  }
}

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