/* Styles pour les designs modernes de voitures */

/* Design de voiture silhouette - base commune */
.car-silhouette {
  position: absolute;
  height: auto;
  opacity: 0.07;
  z-index: -1;
  filter: drop-shadow(0 0 10px rgba(79, 70, 229, 0.3));
  transition: all 0.8s ease;
  pointer-events: none;
}

.car-silhouette:hover {
  opacity: 0.12;
  filter: drop-shadow(0 0 15px rgba(79, 70, 229, 0.5));
}

/* Animation de flottement pour les voitures */
@keyframes car-float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-15px) rotate(0.5deg);
  }
}

/* Voiture 1 - Sport Car */
.car-sport {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 300' fill='none'%3E%3Cpath d='M160,220 C130,220 110,200 80,200 L30,200 C20,200 10,190 10,180 L10,170 C10,160 20,150 30,150 L50,150 L60,120 C70,100 90,80 120,80 L200,80 C240,80 280,100 320,150 L680,150 C740,150 780,180 790,200 L680,200 C640,200 630,220 580,220 L160,220 Z' fill='rgba(79, 70, 229, 0.3)'/%3E%3Ccircle cx='160' cy='220' r='40' fill='rgba(0, 0, 0, 0.2)'/%3E%3Ccircle cx='580' cy='220' r='40' fill='rgba(0, 0, 0, 0.2)'/%3E%3C/svg%3E");
  width: 400px;
  animation: car-float 6s infinite ease-in-out;
}

/* Voiture 2 - SUV */
.car-suv {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 400' fill='none'%3E%3Cpath d='M120,250 C100,250 80,230 60,230 L30,230 C20,230 10,220 10,210 L10,150 C10,140 20,130 30,130 L70,130 L80,80 C90,60 110,50 140,50 L260,50 C300,50 320,60 360,130 L680,130 C740,130 780,170 790,200 L710,200 L710,230 C660,230 650,250 600,250 L120,250 Z' fill='rgba(6, 182, 212, 0.25)'/%3E%3Ccircle cx='160' cy='250' r='40' fill='rgba(0, 0, 0, 0.2)'/%3E%3Ccircle cx='560' cy='250' r='40' fill='rgba(0, 0, 0, 0.2)'/%3E%3C/svg%3E");
  width: 450px;
  animation: car-float 7s infinite ease-in-out;
}

/* Voiture 3 - Concept Car */
.car-concept {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 300' fill='none'%3E%3Cpath d='M180,210 C150,210 130,190 100,190 L40,190 C30,190 20,180 20,170 L20,160 C20,150 30,140 40,140 L60,140 L80,110 C90,90 110,70 130,70 L220,70 C260,70 300,90 340,140 L700,140 C760,140 780,170 790,190 L700,190 C660,190 650,210 600,210 L180,210 Z' fill='rgba(249, 115, 22, 0.25)'/%3E%3Cpath d='M180,70 L240,20 L400,20 L440,70' stroke='rgba(249, 115, 22, 0.25)' stroke-width='5'/%3E%3Ccircle cx='180' cy='210' r='40' fill='rgba(0, 0, 0, 0.2)'/%3E%3Ccircle cx='600' cy='210' r='40' fill='rgba(0, 0, 0, 0.2)'/%3E%3C/svg%3E");
  width: 420px;
  animation: car-float 8s infinite ease-in-out;
}

/* Voiture 4 - Electric Car */
.car-electric {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 300' fill='none'%3E%3Cpath d='M160,220 C140,220 120,200 100,200 L40,200 C30,200 20,190 20,180 L20,160 C20,150 30,140 40,140 L60,140 L100,80 C110,60 130,50 160,50 L240,50 C280,50 320,70 360,120 L680,120 C740,120 770,170 780,200 L680,200 C640,200 630,220 580,220 L160,220 Z' fill='rgba(56, 189, 248, 0.25)'/%3E%3Cpath d='M240,50 L260,20 L390,20 L410,50' stroke='rgba(56, 189, 248, 0.25)' stroke-width='5'/%3E%3Ccircle cx='160' cy='220' r='40' fill='rgba(0, 0, 0, 0.2)'/%3E%3Ccircle cx='580' cy='220' r='40' fill='rgba(0, 0, 0, 0.2)'/%3E%3C/svg%3E");
  width: 380px;
  animation: car-float 7.5s infinite ease-in-out;
}

/* Effet de phares pour les voitures */
.car-headlight {
  position: absolute;
  width: 60px;
  height: 20px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.7), transparent 70%);
  filter: blur(5px);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.car-silhouette:hover .car-headlight {
  opacity: 0.7;
}

/* Effet de mouvement lors du défilement */
.parallax-car {
  transition: transform 0.5s ease-out;
}

/* Design de route stylisé */
.modern-road {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  opacity: 0.3;
  z-index: -1;
}

/* Effet de blueprint pour section projets */
.blueprint-bg {
  position: absolute;
  inset: 0;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,0 L100,0 L100,100 L0,100 Z' fill='none' stroke='rgba(56, 189, 248, 0.5)' stroke-width='0.5'/%3E%3Cpath d='M25,0 L25,100 M50,0 L50,100 M75,0 L75,100 M0,25 L100,25 M0,50 L100,50 M0,75 L100,75' stroke='rgba(56, 189, 248, 0.5)' stroke-width='0.25'/%3E%3C/svg%3E");
  z-index: -1;
  pointer-events: none;
}

/* Effet de dashboard de voiture pour les sections */
.car-dashboard-section {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}

.car-dashboard-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, rgba(79, 70, 229, 0.2), rgba(56, 189, 248, 0.2), rgba(249, 115, 22, 0.2));
  opacity: 0.7;
}