/* Styles pour les éléments techniques automobiles */

/* Style de base pour tous les éléments techniques auto */
.auto-tech-element {
  position: absolute;
  opacity: 0.03;
  z-index: -1;
  pointer-events: none;
  filter: brightness(1.2) contrast(0.8);
  transition: all 0.8s ease;
}

/* Tableau de bord */
.dashboard-panel {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 300' fill='none'%3E%3Crect x='50' y='50' width='700' height='200' rx='100' fill='none' stroke='rgba(255, 255, 255, 0.4)' stroke-width='2'/%3E%3Ccircle cx='200' cy='150' r='80' fill='none' stroke='rgba(255, 255, 255, 0.4)' stroke-width='2'/%3E%3Ccircle cx='200' cy='150' r='70' fill='none' stroke='rgba(255, 255, 255, 0.2)' stroke-width='1'/%3E%3Cpath d='M200,150 L250,100' stroke='rgba(255, 255, 255, 0.6)' stroke-width='2'/%3E%3Ccircle cx='500' cy='150' r='80' fill='none' stroke='rgba(255, 255, 255, 0.4)' stroke-width='2'/%3E%3Ccircle cx='500' cy='150' r='70' fill='none' stroke='rgba(255, 255, 255, 0.2)' stroke-width='1'/%3E%3Cpath d='M500,150 L450,100' stroke='rgba(255, 255, 255, 0.6)' stroke-width='2'/%3E%3Crect x='300' y='100' width='100' height='100' rx='10' fill='none' stroke='rgba(255, 255, 255, 0.4)' stroke-width='2'/%3E%3Cpath d='M310,120 L390,120 M310,140 L390,140 M310,160 L390,160 M310,180 L390,180' stroke='rgba(255, 255, 255, 0.3)' stroke-width='1'/%3E%3C/svg%3E");
  width: 700px;
  height: 250px;
}

/* Système ADAS */
.adas-system {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600' fill='none'%3E%3Crect x='100' y='100' width='600' height='400' rx='20' fill='none' stroke='rgba(255, 255, 255, 0.3)' stroke-width='2'/%3E%3Cline x1='100' y1='250' x2='700' y2='250' stroke='rgba(255, 255, 255, 0.2)' stroke-width='1' stroke-dasharray='5,5'/%3E%3Cline x1='100' y1='350' x2='700' y2='350' stroke='rgba(255, 255, 255, 0.2)' stroke-width='1' stroke-dasharray='5,5'/%3E%3Cpath d='M250,250 L250,350 M350,250 L350,350 M450,250 L450,350 M550,250 L550,350' stroke='rgba(255, 255, 255, 0.15)' stroke-width='1' stroke-dasharray='5,5'/%3E%3Cpath d='M400,100 L400,500' stroke='rgba(255, 255, 255, 0.3)' stroke-width='1'/%3E%3Cpath d='M250,300 L300,290 L350,300 L400,295 L450,300 L500,290 L550,300' stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' fill='none'/%3E%3Ccircle cx='300' cy='200' r='30' fill='none' stroke='rgba(255, 255, 255, 0.3)' stroke-width='1'/%3E%3Ccircle cx='500' cy='200' r='30' fill='none' stroke='rgba(255, 255, 255, 0.3)' stroke-width='1'/%3E%3Cpath d='M150,500 C200,450 300,400 400,400 C500,400 600,450 650,500' stroke='rgba(255, 255, 255, 0.4)' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  width: 700px;
  height: 500px;
}

/* Caméra autonome */
.autonomous-camera {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400' fill='none'%3E%3Cpath d='M150,200 L450,200' stroke='rgba(255, 255, 255, 0.3)' stroke-width='1' stroke-dasharray='5,5'/%3E%3Cpath d='M300,100 L300,300' stroke='rgba(255, 255, 255, 0.3)' stroke-width='1' stroke-dasharray='5,5'/%3E%3Ccircle cx='300' cy='200' r='100' fill='none' stroke='rgba(255, 255, 255, 0.2)' stroke-width='1'/%3E%3Ccircle cx='300' cy='200' r='80' fill='none' stroke='rgba(255, 255, 255, 0.3)' stroke-width='1'/%3E%3Ccircle cx='300' cy='200' r='60' fill='none' stroke='rgba(255, 255, 255, 0.4)' stroke-width='1'/%3E%3Ccircle cx='300' cy='200' r='40' fill='none' stroke='rgba(255, 255, 255, 0.5)' stroke-width='2'/%3E%3Cpath d='M260,160 L340,240 M260,240 L340,160' stroke='rgba(255, 255, 255, 0.2)' stroke-width='1'/%3E%3Crect x='180' y='160' width='40' height='80' rx='5' fill='none' stroke='rgba(255, 255, 255, 0.3)' stroke-width='1'/%3E%3Crect x='380' y='160' width='40' height='80' rx='5' fill='none' stroke='rgba(255, 255, 255, 0.3)' stroke-width='1'/%3E%3Cpath d='M180,180 L150,180 L150,220 L180,220 M420,180 L450,180 L450,220 L420,220' stroke='rgba(255, 255, 255, 0.3)' stroke-width='1'/%3E%3C/svg%3E");
  width: 500px;
  height: 350px;
}

/* Système de route autonome */
.autonomous-road {
  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='M100,200 L700,200' stroke='rgba(255, 255, 255, 0.5)' stroke-width='3'/%3E%3Cpath d='M150,200 L200,200 M250,200 L300,200 M350,200 L400,200 M450,200 L500,200 M550,200 L600,200 M650,200 L700,200' stroke='rgba(255, 255, 255, 0.3)' stroke-width='3' stroke-dasharray='20,30'/%3E%3Cpath d='M150,150 C200,120 250,100 400,100 C550,100 600,120 650,150' stroke='rgba(255, 255, 255, 0.2)' stroke-width='1' stroke-dasharray='5,5'/%3E%3Cpath d='M150,250 C200,280 250,300 400,300 C550,300 600,280 650,250' stroke='rgba(255, 255, 255, 0.2)' stroke-width='1' stroke-dasharray='5,5'/%3E%3Ccircle cx='250' cy='150' r='20' fill='none' stroke='rgba(255, 255, 255, 0.3)' stroke-width='1'/%3E%3Ccircle cx='550' cy='150' r='20' fill='none' stroke='rgba(255, 255, 255, 0.3)' stroke-width='1'/%3E%3Crect x='300' y='140' width='200' height='20' rx='5' fill='none' stroke='rgba(255, 255, 255, 0.3)' stroke-width='1'/%3E%3Cpath d='M150,250 L180,250 L180,270 L150,270 M650,250 L620,250 L620,270 L650,270' stroke='rgba(255, 255, 255, 0.3)' stroke-width='1'/%3E%3C/svg%3E");
  width: 600px;
  height: 300px;
}

/* Interface HUD */
.hud-interface {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400' fill='none'%3E%3Cpath d='M100,80 L500,80 L500,320 L100,320 Z' fill='none' stroke='rgba(255, 255, 255, 0.2)' stroke-width='1'/%3E%3Cpath d='M120,100 L480,100 L480,300 L120,300 Z' fill='none' stroke='rgba(255, 255, 255, 0.3)' stroke-width='1'/%3E%3Cpath d='M120,160 L480,160 M120,240 L480,240' stroke='rgba(255, 255, 255, 0.15)' stroke-width='1' stroke-dasharray='5,5'/%3E%3Cpath d='M300,100 L300,300' stroke='rgba(255, 255, 255, 0.15)' stroke-width='1' stroke-dasharray='5,5'/%3E%3Ccircle cx='300' cy='200' r='50' fill='none' stroke='rgba(255, 255, 255, 0.3)' stroke-width='1'/%3E%3Cpath d='M260,130 L340,130 L340,150 L260,150 Z' fill='none' stroke='rgba(255, 255, 255, 0.25)' stroke-width='1'/%3E%3Cpath d='M260,250 L340,250 L340,270 L260,270 Z' fill='none' stroke='rgba(255, 255, 255, 0.25)' stroke-width='1'/%3E%3Cpath d='M170,170 L230,170 L230,230 L170,230 Z' fill='none' stroke='rgba(255, 255, 255, 0.25)' stroke-width='1'/%3E%3Cpath d='M370,170 L430,170 L430,230 L370,230 Z' fill='none' stroke='rgba(255, 255, 255, 0.25)' stroke-width='1'/%3E%3C/svg%3E");
  width: 500px;
  height: 350px;
}