/* Debarras67.fr - Custom Styles */
/* Variables CSS */
:root {
  --brand-yellow: #ffd526;
  --brand-blue: #14287b;
  --brand-teal: #14aaa0;
  --brand-dark: #0e1d5c;
}

/* Base */
html { scroll-behavior: smooth; }

/* Hero backgrounds */
.hero-bg {
  background-image: url('../images/bg_accueil.webp');
  background-size: cover;
  background-position: center;
}
.hero-nett-bg {
  background-image: url('../images/bg.webp');
  background-size: cover;
  background-position: center;
}
.hero-benne-bg {
  background-image: url('../images/theme-bg.webp');
  background-size: cover;
  background-position: center;
}
.cta-bg {
  background-image: url('../images/bg.webp');
  background-size: cover;
  background-position: center;
}

/* Card hover effect */
.card-hover {
  transition: transform .25s ease, box-shadow .25s ease;
}
.card-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(20,40,123,.15);
}

/* Form input focus */
.form-input:focus {
  outline: none;
  border-color: var(--brand-yellow);
  box-shadow: 0 0 0 3px rgba(255,213,38,.3);
}

/* Nav scrolled */
.nav-scrolled {
  box-shadow: 0 2px 20px rgba(0,0,0,.15);
}

/* Animations */
@keyframes bounce-slow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}
.bounce-slow {
  animation: bounce-slow 2s ease-in-out infinite;
}

@keyframes pulse-ring {
  0% { transform: scale(1); opacity: .6; }
  100% { transform: scale(1.5); opacity: 0; }
}
.pulse::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: var(--brand-yellow);
  animation: pulse-ring 2s ease-out infinite;
}

/* Service tabs */
.active-tab {
  background: var(--brand-blue) !important;
  color: white !important;
  border-color: var(--brand-blue) !important;
}

/* Benne illustration */
.benne-illustration {
  background: linear-gradient(135deg, #ffd526 0%, #ffb800 100%);
  clip-path: polygon(5% 0%, 95% 0%, 100% 15%, 100% 100%, 0% 100%, 0% 15%);
}

/* FAQ icon rotation */
.faq-icon {
  transition: transform 0.3s ease;
}

/* Fallback pour navigateurs sans WebP */
@supports not (background-image: url('../images/bg_accueil.webp')) {
  .hero-bg { background-image: url('../images/bg_accueil.png'); }
  .hero-nett-bg { background-image: url('../images/bg.jpg'); }
  .hero-benne-bg { background-image: url('../images/theme-bg.jpg'); }
  .cta-bg { background-image: url('../images/bg.jpg'); }
}