untitled

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 1200" width="100%" height="100%">
  <defs>
    <!-- Styles de base -->
    <style>
      0,700;0,900;1,700;1,900&family=Orbitron:wght@700;900&display=swap');

  .bg { fill: #0a0a0c; }
  .card-bg { fill: #141419; stroke: #262630; stroke-width: 2; rx: 16px; }
  .title-text { font-family: 'Orbitron', sans-serif; font-weight: 900; fill: #FFFFFF; font-size: 20px; letter-spacing: 2px; }
  .subtitle-text { font-family: 'Montserrat', sans-serif; font-weight: 300; fill: #8E8E93; font-size: 12px; letter-spacing: 4px; }
  
  /* Typographies des Logos */
  .font-express-1 { font-family: 'Orbitron', sans-serif; font-weight: 900; font-style: italic; fill: #FFFFFF; font-size: 36px; letter-spacing: 2px; }
  .font-motors-1 { font-family: 'Montserrat', sans-serif; font-weight: 700; font-style: italic; fill: #E60000; font-size: 14px; letter-spacing: 8px; }
  
  .font-express-2 { font-family: 'Orbitron', sans-serif; font-weight: 900; fill: url(#chrome-grad); font-size: 34px; letter-spacing: 3px; }
  .font-motors-2 { font-family: 'Montserrat', sans-serif; font-weight: 700; fill: #E60000; font-size: 12px; letter-spacing: 12px; }
  
  .font-express-3 { font-family: 'Orbitron', sans-serif; font-weight: 900; fill: #FFFFFF; font-size: 32px; letter-spacing: 1px; }
  .font-motors-3 { font-family: 'Orbitron', sans-serif; font-weight: 700; fill: #E60000; font-size: 18px; letter-spacing: 3px; }
  
  .font-express-4 { font-family: 'Orbitron', sans-serif; font-weight: 900; font-style: italic; fill: #FFFFFF; font-size: 30px; letter-spacing: 1px; }
  .font-motors-4 { font-family: 'Montserrat', sans-serif; font-weight: 700; font-style: italic; fill: #C0C0C0; font-size: 13px; letter-spacing: 6px; }
</style>

<!-- Dégradés -->
<linearGradient id="red-grad" x1="0%" y1="0%" x2="100%" y2="100%">
  <stop offset="0%" stop-color="#FF3B30" />
  <stop offset="100%" stop-color="#990000" />
</linearGradient>

<linearGradient id="chrome-grad" x1="0%" y1="0%" x2="100%" y2="100%">
  <stop offset="0%" stop-color="#FFFFFF" />
  <stop offset="25%" stop-color="#E0E0E0" />
  <stop offset="50%" stop-color="#8A8A8E" />
  <stop offset="75%" stop-color="#D1D1D6" />
  <stop offset="100%" stop-color="#FFFFFF" />
</linearGradient>

<linearGradient id="dark-silver" x1="0%" y1="0%" x2="100%" y2="0%">
  <stop offset="0%" stop-color="#2C2C2E" />
  <stop offset="50%" stop-color="#48484A" />
  <stop offset="100%" stop-color="#1C1C1E" />
</linearGradient>


<!-- Logo 1 Content -->
<g transform="translate(180, 210)">
  <!-- Tachometer Arc Icon -->
  <g transform="translate(0, -10)">
    <path d="M 10 70 A 70 70 0 1 1 150 70" fill="none" stroke="url(#dark-silver)" stroke-width="12" stroke-linecap="round" />
    <path d="M 10 70 A 70 70 0 0 1 135 20" fill="none" stroke="url(#red-grad)" stroke-width="12" stroke-linecap="round" />
    <!-- Needle -->
    <polygon points="80,70 140,25 125,18" fill="url(#red-grad)" />
    <circle cx="80" cy="70" r="10" fill="#FFFFFF" />
    <!-- Speed Trails -->
    <path d="M -20 85 L 180 85" stroke="url(#red-grad)" stroke-width="3" stroke-dasharray="10 15" />
  </g>
  
  <!-- Typography -->
  <g transform="translate(180, 50)">
    <text class="font-express-1" x="0" y="0">EXPRESS</text>
    <text class="font-motors-1" x="5" y="28">MOTORS</text>
  </g>
</g>


<!-- Logo 2 Content -->
<g transform="translate(340, 220)">
  <!-- Aero Wing Icon -->
  <g transform="translate(0, -60)">
    <!-- Wing Left -->
    <path d="M -100 0 L -10 -40 L -30 10 Z" fill="url(#chrome-grad)" />
    <path d="M -90 -5 L -10 -40 L -20 -10 Z" fill="url(#red-grad)" />
    <!-- Wing Right -->
    <path d="M 100 0 L 10 -40 L 30 10 Z" fill="url(#chrome-grad)" />
    <path d="M 90 -5 L 10 -40 L 20 -10 Z" fill="url(#red-grad)" />
    <!-- Center Emblem -->
    <polygon points="0,-50 15,-10 0,10 -15,-10" fill="#FFFFFF" />
  </g>
  
  <!-- Typography -->
  <g transform="translate(0, 30)">
    <text class="font-express-2" text-anchor="middle" x="0" y="0">EXPRESS</text>
    <text class="font-motors-2" text-anchor="middle" x="0" y="30">MOTORS</text>
  </g>
</g>


<!-- Logo 3 Content -->
<g transform="translate(140, 240)">
  <!-- Lightning Icon -->
  <g transform="translate(0, -35)">
    <polygon points="30,0 0,45 25,45 10,85 50,35 25,35" fill="url(#red-grad)" />
    <polygon points="35,-5 8,40 28,40 18,75 48,32 30,32" fill="none" stroke="#FFFFFF" stroke-width="2" />
  </g>
  
  <!-- Typography Inline -->
  <g transform="translate(75, 10)">
    <text class="font-express-3" x="0" y="0">EXPRESS</text>
    <text class="font-motors-3" x="180" y="0">MOTORS</text>
    <!-- Precision Line -->
    <line x1="0" y1="15" x2="310" y2="15" stroke="url(#chrome-grad)" stroke-width="3" />
  </g>
</g>


<!-- Logo 4 Content -->
<g transform="translate(150, 230)">
  <!-- Grille Badge Icon -->
  <g transform="translate(0, -10)">
    <!-- Shield Background -->
    <path d="M 0 0 L 70 0 L 85 40 L 42 75 L 0 40 Z" fill="#1C1C1E" stroke="url(#red-grad)" stroke-width="4" />
    <!-- Grille lines -->
    <line x1="15" y1="15" x2="70" y2="15" stroke="#3A3A3C" stroke-width="3" />
    <line x1="20" y1="30" x2="65" y2="30" stroke="#3A3A3C" stroke-width="3" />
    <line x1="28" y1="45" x2="57" y2="45" stroke="#3A3A3C" stroke-width="3" />
    <!-- Central Accent -->
    <polygon points="42,5 50,35 42,60 34,35" fill="url(#red-grad)" />
  </g>
  
  <!-- Typography -->
  <g transform="translate(110, 20)">
    <text class="font-express-4" x="0" y="0">EXPRESS</text>
    <text class="font-motors-4" x="0" y="26">MOTORS</text>
  </g>
</g>