/* ============================================================
   LE QG MOTORSPORT — Références graphiques mécaniques
   ============================================================ */

/* ---------- Repères télémétrie / HUD (coins) ---------- */
.hud { position: relative; }
.hud::before, .hud::after {
  content: ""; position: absolute; width: 18px; height: 18px;
  border: 0 solid var(--accent); pointer-events: none; z-index: 4;
  opacity: 0.9;
}
.hud::before { top: 10px; left: 10px; border-top-width: 2px; border-left-width: 2px; }
.hud::after  { bottom: 10px; right: 10px; border-bottom-width: 2px; border-right-width: 2px; }

/* ---------- Compte-tours décoratif (hero) ---------- */
.tach {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  width: clamp(360px, 46vw, 760px);
  height: clamp(360px, 46vw, 760px);
  top: 50%; right: -16%;
  transform: translateY(-50%);
  opacity: 0.5;
  color: var(--silver);
}
.tach svg { width: 100%; height: 100%; overflow: visible; }
.tach .tach-track { stroke: rgba(255,255,255,0.16); }
.tach .tach-red { stroke: var(--accent); }
.tach .tick { stroke: rgba(255,255,255,0.30); }
.tach .tick-major { stroke: rgba(255,255,255,0.55); }
.tach .tick-red { stroke: var(--accent); }
.tach .tach-num { fill: rgba(255,255,255,0.5); font-family: var(--font-mono); font-size: 15px; }
.tach .needle { stroke: var(--accent); stroke-width: 3; transform-origin: 200px 200px; transition: transform 1.6s var(--ease); }
.tach .hub { fill: var(--bg-3); stroke: var(--silver); stroke-width: 2; }
@media (max-width: 760px) { .tach { opacity: 0.28; right: -34%; } }

/* ---------- Bande télémétrie (séparateur) ---------- */
.telemetry {
  position: relative; z-index: 2;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  overflow: hidden;
}
.telemetry-row {
  display: flex; align-items: center; gap: 60px;
  padding: 16px 0;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--text-2);
  white-space: nowrap;
  animation: ticker 36s linear infinite;
}
.telemetry-row span { display: inline-flex; align-items: center; gap: 14px; }
.telemetry-row span::before { content: ""; width: 7px; height: 7px; background: var(--accent); transform: rotate(45deg); }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .telemetry-row { animation: none; } }

/* ---------- Motif blueprint (services / why) ---------- */
.blueprint {
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(rgba(192,192,192,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(192,192,192,0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(120% 100% at 100% 0%, #000, transparent 70%);
  mask-image: radial-gradient(120% 100% at 100% 0%, #000, transparent 70%);
}

/* ---------- Engrenage décoratif (section head) ---------- */
.gear-deco {
  position: absolute; top: 0; right: var(--gutter);
  width: 120px; height: 120px; color: rgba(255,255,255,0.07);
  pointer-events: none; z-index: 1;
}
.gear-deco svg { width: 100%; height: 100%; animation: spin 30s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gear-deco svg { animation: none; } }
@media (max-width: 760px) { .gear-deco { display: none; } }

/* ---------- Carte Google Maps ---------- */
.map-embed { margin-top: 28px; height: 220px; border: 1px solid var(--line); overflow: hidden; }
.map-embed iframe {
  width: 100%; height: 100%; border: 0; display: block;
  filter: grayscale(1) invert(0.92) contrast(0.9);
}