/* Styles personnalisés en complément de Tailwind CSS */

/* Styles pour la barre de navigation */
#navbar {
  /* Par défaut, complètement transparent */
  background-color: transparent;
  transition: all 0.5s ease;
}

/* Effet glassy quand on commence à défiler */
.navbar-glassy {
  background-color: rgba(17, 24, 39, 0.2); /* bg-gray-900 avec faible opacité */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Plus opaque quand on défile davantage */
.navbar-glassy-scrolled {
  background-color: rgba(17, 24, 39, 0.7); /* bg-gray-900 avec plus d'opacité */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Styles pour le carrousel de logos */
#logo-carousel-container {
  min-height: 100px;
  overflow: hidden;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

#logo-carousel-container:active {
  cursor: grabbing;
}

/* Police pour les mots défilants */
.font-russo {
  font-family: 'Russo One', sans-serif;
}

/* Animation pour le défilement des mots */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

.animate-scroll {
  animation: scroll 20s linear infinite;
}

/* Ombre de texte pour améliorer la lisibilité sur les images */
.shadow-text {
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 1), 
               -2px -2px 0 rgba(0, 0, 0, 0.9), 
               2px -2px 0 rgba(0, 0, 0, 0.9), 
               -2px 2px 0 rgba(0, 0, 0, 0.9), 
               2px 2px 0 rgba(0, 0, 0, 0.9),
               0 0 8px rgba(0, 0, 0, 0.8);
  letter-spacing: 1.5px;
  font-weight: 700;
}

#logo-carousel {
  min-height: 100px;
  will-change: transform;
}

.logo-item img {
  transition: all 0.3s ease;
}

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

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  animation: fadeIn 1s ease-in-out;
}

/* Transitions personnalisées */
.transition-custom {
  transition: all 0.3s ease;
}

/* Styles pour les boutons au survol */
.btn-hover:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Styles pour les cartes de services */
.service-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
  transform: translateY(-5px);
}

/* Styles pour le formulaire */
.form-focus:focus {
  border-color: #3B82F6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

/* Styles pour le mode sombre (préparation) */
.dark-mode {
  background-color: #1F2937;
  color: #F9FAFB;
}

/* Styles pour les médias responsifs */
@media (max-width: 768px) {
  .mobile-menu {
    display: flex;
    flex-direction: column;
  }
}