/* ==========================================================================
   MAPPACK — Design system "Luxury Automotive Software"
   Référence : labordemotorsport.com — sobre, institutionnel, chirurgical.
   Couche chargée APRÈS style.css. Rollback = retirer ce fichier de head.php.

   Principes :
   - Noir mat #090A0C / #0D0F12, cartes #13161C, bordures 1px rgba(255,255,255,.08)
   - CTA BLANCS (texte noir). Aucune couleur vive sur les boutons.
   - UN accent mint #00F08B, uniquement sur les micro-statuts (● online, verified, match)
   - Titres : Inter néo-grotesque serrée. Mono JetBrains uniquement pour les données.
   - Pas de dégradés, pas de glow, pas de police extended.
   ========================================================================== */

/* Polices préchargées dans head.php (évite un @import bloquant). */

:root{
  /* Fonds */
  --app-bg: #090A0C;
  --app-bg-2: #0D0F12;
  --surface: #13161C;
  --surface-2: #171B22;
  --surface-3: #1E232C;

  /* Texte — contraste relevé (jamais de gris illisible sur fond sombre) */
  --text: #F4F5F7;
  --text-secondary: #E2E8F0;
  --text-soft: #94A3B8;
  --text-muted: #64748B;

  /* Bordures fines : white/5 au repos, white/20 au survol */
  --border: rgba(255,255,255,.06);
  --border-hover: rgba(255,255,255,.2);
  --line: rgba(255,255,255,.06);

  /* "Accent" = blanc (CTA, liens actifs). Statut = mint, ponctuel. */
  --accent: #FFFFFF;
  --accent-hover: #D7DAE0;
  --accent-2: #E8EAED;
  --accent-soft: rgba(255,255,255,.05);
  --accent-border: rgba(255,255,255,.22);
  --accent-glow: rgba(255,255,255,.06);
  /* Palette "Premium Engine Data" — micro-accents uniquement */
  --mint: #10B981;                      /* télémétrie : live, match, drop actif */
  --mint-soft: rgba(16,185,129,.09);
  --mint-border: rgba(16,185,129,.28);
  --cyan: #38BDF8;                      /* formats de fichier : .KP OLS A2L HEX */
  --cyan-soft: rgba(56,189,248,.08);
  --cyan-border: rgba(56,189,248,.28);
  --amber: #F59E0B;                     /* fonctions ECU : Stage, DPF, Flex Fuel */
  --amber-soft: rgba(245,158,11,.09);
  --amber-border: rgba(245,158,11,.28);

  /* Géométrie sobre */
  --card-radius: 10px;
  --radius: 10px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  --hero-radius: 12px;

  --shadow: 0 18px 50px rgba(0,0,0,.45);
  --shadow-sm: 0 4px 18px rgba(0,0,0,.3);
  --shadow-soft: 0 14px 40px rgba(0,0,0,.4);
  --shadow-hero: 0 18px 55px rgba(0,0,0,.5);
  --glow-accent: none;
  --grad-accent: none;

  --font-heading: 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, Consolas, monospace;
}

/* ---- Base ---- */
body{ font-size: 15.5px; line-height: 1.65; letter-spacing: 0; }

h1, h2, h3, h4, h5, h6{ font-family: var(--font-heading); }
h1{ font-weight: 700; letter-spacing: -.035em; }
h2{ font-weight: 700; letter-spacing: -.025em; }
h3{ font-weight: 600; letter-spacing: -.015em; }
h4, h5, h6{ font-weight: 600; letter-spacing: -.005em; }

a{ color: var(--text-secondary); }
a:hover{ color: #fff; }

::selection{ background: rgba(255,255,255,.2); color: #fff; }
::-webkit-scrollbar-thumb{ background: var(--surface-3); }
::-webkit-scrollbar-thumb:hover{ background: #2A3140; }

/* Données techniques en mono, petites tailles uniquement */
code, .mono,
.shop-card-meta, .shop-tag, .shop-card-price,
.pill, .shop-compat, .shop-result-list, .shop-vf-grid span,
.shop-result-meta{
  font-family: var(--font-mono);
  letter-spacing: 0;
}

/* =========================
   HEADER
========================= */
.site-header{
  background: rgba(9,10,12,.85);
  backdrop-filter: blur(16px) saturate(1.05);
  -webkit-backdrop-filter: blur(16px) saturate(1.05);
  border-bottom: 1px solid var(--line);
}
.nav-link{ font-size: .875rem; font-weight: 500; color: var(--text-soft); border-radius: var(--radius-xs); }
.nav-link:hover{ color: var(--text); background: rgba(255,255,255,.04); }
.nav-link.active{ color: var(--text); background: rgba(255,255,255,.05); box-shadow: none; }
.nav-link.active::after{ content: none; }

/* Badge de version : point mint + version en mono, très discret */
.lux-status{
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: .66rem; font-weight: 500;
  letter-spacing: .1em;
  color: var(--text-muted);
  border: 1px solid var(--line); border-radius: 99px;
  padding: 3px 10px; margin-left: 12px; white-space: nowrap;
}
.lux-status::before{
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--mint);
}
@media (max-width: 900px){ .lux-status{ display: none; } }

.lang-switch a{ font-family: var(--font-mono); font-size: .7rem; letter-spacing: .06em; }
.lang-switch .active-lang{ background: #fff !important; color: #000 !important; }

/* =========================
   BOUTONS — CTA blanc, texte noir
========================= */
.btn{ border-radius: var(--radius-sm); font-weight: 600; letter-spacing: -.005em; transition: all .2s ease; }
.btn-accent, .cookie-btn-accent{
  background: #fff; border: 1px solid #fff; color: #0A0B0D;
  background-image: none; box-shadow: none;
}
.btn-accent:hover, .btn-accent:focus, .cookie-btn-accent:hover{
  background: #D7DAE0; border-color: #D7DAE0; color: #0A0B0D;
  transform: none; box-shadow: none;
}
.btn-accent::after{ content: none; }
.btn-outline-accent, .btn-outline-light{
  background: transparent; border: 1px solid var(--border-hover); color: var(--text-secondary);
}
.btn-outline-accent:hover, .btn-outline-accent:focus, .btn-outline-light:hover{
  border-color: rgba(255,255,255,.4); color: #fff; background: rgba(255,255,255,.04);
  transform: none;
}

/* =========================
   SECTION TAGS — label mono discret, sans ornement
========================= */
.section-tag{
  font-family: var(--font-mono); font-size: .66rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted);
  background: none; border: 0; padding: 0; gap: 0;
}
.section-tag::before{ content: none; }
.shop-section-header h2{ font-size: clamp(1.45rem, 3vw, 2rem); }

/* =========================
   HERO
========================= */
.shop-hero-title{
  background: none; -webkit-background-clip: initial; background-clip: initial;
  -webkit-text-fill-color: var(--text);
  color: var(--text);
  animation: none;
  font-weight: 700; letter-spacing: -.035em;
}
.bg-devcode::before{ opacity: .06; color: #2E3442; animation: none; }
.bg-devcode::after{
  background: radial-gradient(900px 480px at 80% 10%, rgba(255,255,255,.03), transparent 60%);
}
.shop-hero::before, .shop-hero::after{ display: none; }

/* Héro deux colonnes : texte + console d'analyse */
.shop-hero-inner{ display: grid; grid-template-columns: 1.05fr .95fr; gap: 3rem; align-items: center; }
.shop-hero-stats{ grid-column: 1 / -1; }
@media (max-width: 1000px){
  .shop-hero-inner{ grid-template-columns: 1fr; gap: 2rem; }
  .lux-console{ display: none; }
}
.shop-hero-stat{ border-color: var(--line) !important; background: transparent; }
.shop-hero-stat:hover{ border-color: var(--border-hover) !important; background: transparent; }
.shop-hero-stat-num{ font-family: var(--font-mono); font-weight: 600; color: var(--text); }
.shop-hero-stat-label{
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted);
}

/* Console d'analyse ECU (simulation, hero) */
.lux-console{
  background: #0B0D11;
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.lux-console-bar{
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .08em;
  color: var(--text-muted);
}
.lux-console-bar .dots{ display: flex; gap: 5px; }
.lux-console-bar .dots i{
  width: 9px; height: 9px; border-radius: 50%; background: #232833; display: block;
}
.lux-console-body{
  font-family: var(--font-mono); font-size: .7rem; line-height: 1.9;
  padding: 14px 16px; min-height: 236px;
  color: #6E7686; white-space: pre-wrap;
}
.lux-console-body .dim{ color: #3E4554; }
.lux-console-body .lit{ color: #C9CDD4; }
.lux-console-body .ok{ color: var(--mint); }
.lux-console-status{
  display: flex; align-items: center; gap: 8px;
  border-top: 1px solid var(--line);
  padding: 10px 16px;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em;
  color: var(--text-secondary);
}
.lux-console-status .st-dot{
  width: 6px; height: 6px; border-radius: 50%; background: var(--mint); flex-shrink: 0;
  animation: luxPulse 2.2s ease-in-out infinite;
}
.lux-console-status .st-match{ margin-left: auto; color: var(--mint); }
@keyframes luxPulse{ 0%,100%{ opacity:1 } 50%{ opacity:.3 } }
.lux-caret{ display:inline-block; width:7px; height:12px; background:#C9CDD4; vertical-align:-1px;
  animation: luxCaret 1s steps(1) infinite; }
@keyframes luxCaret{ 0%,60%{ opacity:1 } 61%,100%{ opacity:0 } }

/* =========================
   CARTES / SURFACES
========================= */
.shop-card, .shop-tool-card, .shop-result-block, .card,
.shop-cta, .shop-reassurance{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  box-shadow: none;
  transition: border-color .2s ease, background .2s ease;
}
.shop-card:hover, .shop-tool-card:hover{
  border-color: var(--border-hover);
  background: var(--surface-2);
  transform: none;
  box-shadow: none;
}
.shop-card-title{ font-weight: 600; letter-spacing: -.01em; }
.shop-card-meta{ font-size: .73rem; color: var(--text-muted); }
.shop-card-price{ font-size: 1rem; font-weight: 600; color: var(--text); }

.shop-tag{
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  font-size: .67rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-soft);
}
.shop-tag-accent{
  background: transparent; border-color: var(--line); color: var(--text-soft);
  text-transform: none; letter-spacing: .02em;
}
.shop-badge-new{
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase;
  background: #fff; color: #000; border-radius: 4px; padding: 2px 6px;
}

.brand-logo-wrap{ background: var(--app-bg-2); border: 1px solid var(--line); border-radius: var(--radius-xs); }
.shop-card:hover .brand-logo-wrap{ border-color: var(--border-hover); transform: none; }
.brand-logo-fallback{
  background: var(--app-bg-2); border: 1px solid var(--line); border-radius: var(--radius-xs);
  font-family: var(--font-mono); color: var(--text-soft);
}

/* =========================
   ENGINEERING PLATFORMS — 3 piliers avec profondeur
========================= */
.lux-platforms{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem;
  background: none; border: 0; border-radius: 0; overflow: visible;
}
@media (max-width: 900px){ .lux-platforms{ grid-template-columns: 1fr; } }
.lux-plat{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  padding: 1.8rem 1.6rem 1.5rem;
  display: flex; flex-direction: column; gap: .7rem;
  transition: border-color .2s ease, background .2s ease;
  position: relative;
}
.lux-plat:hover{ background: var(--surface-2); border-color: var(--border-hover); }
.lux-plat-index{
  font-family: var(--font-mono); font-size: .64rem; font-weight: 500;
  letter-spacing: .16em; color: var(--text-muted);
}
.lux-plat-index::after{ content: none; }
.lux-plat h3{ font-size: 1.08rem; font-weight: 600; margin: 0; color: var(--text); }
.lux-plat p{ font-size: .865rem; color: var(--text-soft); margin: 0; }
.lux-plat-list{
  list-style: none; margin: .2rem 0 0; padding: 0;
  display: flex; flex-direction: column; gap: .42rem; flex: 1;
}
.lux-plat-list li{
  font-family: var(--font-mono); font-size: .72rem; color: var(--text-soft);
  display: flex; align-items: baseline; gap: 8px;
}
.lux-plat-list li::before{ content: "—"; color: var(--text-muted); flex-shrink: 0; }
.lux-plat-link{
  font-size: .82rem; font-weight: 500;
  color: var(--text-secondary); display: inline-flex; align-items: center; gap: 6px;
  margin-top: .8rem; padding-top: .9rem; border-top: 1px solid var(--line);
}
.lux-plat-link i{ transition: transform .2s ease; font-size: .8rem; }
.lux-plat:hover .lux-plat-link{ color: #fff; }
.lux-plat:hover .lux-plat-link i{ transform: translateX(3px); }

/* =========================
   DATA GRID — catalogue dense
========================= */
.lux-table-wrap{
  border: 1px solid var(--line); border-radius: var(--card-radius);
  overflow-x: auto; background: var(--surface);
}
.lux-table{ width: 100%; border-collapse: collapse; min-width: 760px; }
.lux-table thead th{
  font-family: var(--font-mono); font-size: .62rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted);
  text-align: left; padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--app-bg-2);
  white-space: nowrap;
}
.lux-table tbody td{
  padding: 11px 14px; border-bottom: 1px solid var(--line);
  font-size: .85rem; color: var(--text-secondary); vertical-align: middle;
}
.lux-table tbody tr:last-child td{ border-bottom: 0; }
.lux-table tbody tr{ transition: background .15s ease; }
.lux-table tbody tr:hover{ background: rgba(255,255,255,.025); }
.lux-table .t-model{ font-weight: 500; color: var(--text); }
.lux-table .t-ecu{ font-family: var(--font-mono); font-size: .74rem; color: var(--text-soft); white-space: nowrap; }
.lux-table .t-maps{ font-family: var(--font-mono); font-size: .76rem; color: var(--text-soft); }
.lux-table .t-price{ font-family: var(--font-mono); font-size: .82rem; font-weight: 600; color: var(--text); white-space: nowrap; }
.lux-table .t-badge{ width: 40px; }
.lux-table .t-badge .brand-logo-wrap,
.lux-table .t-badge .brand-logo-fallback{
  width: 30px; height: 30px; padding: 3px; font-size: .6rem;
  display: flex; align-items: center; justify-content: center;
}
.lux-table .t-badge img{ width: 100%; height: 100%; object-fit: contain; }
.lux-table .t-tags{ display: flex; gap: 4px; flex-wrap: wrap; }
.lux-table .t-tags .shop-tag{ font-size: .6rem; padding: 2px 7px; }
.lux-table .btn-sm{ padding: .28rem .85rem; font-size: .78rem; }

/* =========================
   WORKFLOW — 4 étapes horizontales
========================= */
.shop-steps{ counter-reset: step; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; padding-top: 0; }
@media (max-width: 1000px){ .shop-steps{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .shop-steps{ grid-template-columns: 1fr; } }
.shop-step{
  background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0;
  padding: 1.3rem .2rem 0; position: relative;
  transition: border-color .2s ease;
}
.shop-step:hover{ border-top-color: rgba(255,255,255,.3); background: transparent; }
.shop-step::before{
  counter-increment: step;
  content: "0" counter(step);
  position: static; top: auto; left: auto; transform: none;
  width: auto; height: auto; border-radius: 0;
  background: none; box-shadow: none;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .12em; color: var(--text-muted);
  display: block; line-height: 1; margin-bottom: .8rem;
}
.shop-step::after{ content: none; }
.shop-step-icon{ display: none; }
.shop-step-title{ font-size: .95rem; font-weight: 600; }
.shop-step-text{ font-size: .84rem; }

/* =========================
   ANALYZER + HEX PREVIEW
========================= */
.lux-drop{
  border: 1px dashed var(--border-hover);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
  color: var(--text-soft);
  font-size: .875rem;
}
.lux-drop:hover, .lux-drop.dragover{
  border-color: var(--mint-border); background: var(--mint-soft); color: var(--text);
}
.lux-drop:hover i, .lux-drop.dragover i{ color: var(--mint); }
.lux-drop i{ color: var(--text-secondary); margin-right: 6px; }
.lux-drop .lux-drop-formats{
  display: block; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .05em;
  color: var(--text-muted); margin-top: 4px;
}

.lux-hex{
  margin-top: .9rem;
  background: #0B0D11;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: none;
}
.lux-hex.on{ display: block; }
.lux-hex-head{
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .05em;
  color: var(--text-soft); flex-wrap: wrap;
}
.lux-hex-head .fname{ color: var(--text); font-weight: 500; }
.lux-hex-head .fmeta{ color: var(--text-muted); }
.lux-hex-body{
  font-family: var(--font-mono); font-size: .66rem; line-height: 1.75;
  padding: 10px 12px; white-space: pre; overflow-x: auto;
  color: #6E7686;
  position: relative;
}
.lux-hex-body .addr{ color: #3E4554; }
.lux-hex-body .asc{ color: #C9CDD4; }
.lux-hex-refs{
  border-top: 1px solid var(--line);
  padding: 8px 12px;
  font-family: var(--font-mono); font-size: .68rem;
  color: var(--text-soft);
  display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center;
}
.lux-hex-refs .k{ color: var(--text-muted); letter-spacing: .08em; text-transform: uppercase; font-size: .6rem; }
.lux-hex-ref{
  border: 1px solid var(--mint-border); color: var(--mint); background: var(--mint-soft);
  border-radius: 4px; padding: 1px 7px;
}
@keyframes luxScan{ 0%{ top: 0 } 100%{ top: 100% } }
.lux-hex-body.scanning::after{
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  animation: luxScan 1.1s ease-in-out 2;
}

/* =========================
   OUTILS / RÉSULTATS / FORMULAIRES
========================= */
.shop-tool-icon{
  background: var(--app-bg-2); border: 1px solid var(--line); color: var(--text-secondary);
  border-radius: var(--radius-sm);
}
.shop-compat{
  font-weight: 600; color: var(--mint);
  background: var(--mint-soft); border: 1px solid var(--mint-border);
  border-radius: var(--radius-xs); padding: 2px 9px;
}
.form-control, .form-select{
  background: var(--app-bg-2); border: 1px solid var(--line); border-radius: var(--radius-xs);
  color: var(--text);
}
.form-control:focus, .form-select:focus{
  background: var(--app-bg-2); border-color: rgba(255,255,255,.3); color: var(--text);
  box-shadow: 0 0 0 3px rgba(255,255,255,.06);
}

/* =========================
   TRUSTLINE / RÉASSURANCE / CTA / FAQ
========================= */
.shop-trustline{ background: var(--app-bg-2); }
.shop-trustline p{ font-family: var(--font-mono); font-size: .7rem; letter-spacing: .03em; }
.shop-trustline i{ color: var(--mint); }

.shop-feature-icon{
  background: var(--app-bg-2); border: 1px solid var(--line); color: var(--text-secondary);
  border-radius: var(--radius-sm);
}
.shop-feature:hover .shop-feature-icon{ background: var(--app-bg-2); color: #fff; border-color: var(--border-hover); }

.shop-cta{ border-left: 0; }
.shop-cta::before, .shop-cta::after{ display: none; }

.shop-faq-item{
  background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
}
.shop-faq-item[open]{ background: transparent; border-color: var(--line); box-shadow: none; }
.shop-faq-item summary{
  font-weight: 500; color: var(--text-secondary);
  transition: color .2s ease;
}
.shop-faq-item summary:hover, .shop-faq-item[open] summary{ color: #fff; }

/* =========================
   FOOTER / COOKIES / PAGINATION
========================= */
.site-footer{ background: var(--app-bg-2); border-top: 1px solid var(--line); }
.footer-col h4{
  font-family: var(--font-mono); font-size: .64rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted);
}
.footer-col a{ color: var(--text-soft); font-size: .85rem; }
.footer-col a:hover{ color: #fff; }
.lux-paybadges{ display: flex; gap: 6px; flex-wrap: wrap; margin-top: .9rem; }
.lux-paybadge{
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .08em;
  border: 1px solid var(--line); border-radius: 4px; padding: 3px 8px; color: var(--text-soft);
}

.cookie-banner{ background: rgba(9,10,12,.97); }
.cookie-banner-text a{ color: var(--text-secondary); }

.shop-pagination .page-item.active .page-link{ background: #fff; border-color: #fff; color: #000; }

.scroll-progress{ display: none; }

/* ==========================================================================
   V3 — PALETTE "PREMIUM ENGINE DATA" & COMPOSANTS DE FINITION
   ========================================================================== */

/* ---- Badges typés ---- */
/* Formats de fichier : cyan, lueur 1px discrète au survol */
.tag-fmt{
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--cyan); background: var(--cyan-soft);
  border: 1px solid var(--cyan-border); border-radius: 4px; padding: 2px 8px;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.tag-fmt:hover, a:hover .tag-fmt, .shop-card:hover .tag-fmt{
  box-shadow: 0 0 0 1px var(--cyan-border);
}
/* Fonctions ECU : pilules ultra-fines, fond sombre, bordure légère.
   Les options spécifiques (.tag-opt : EGR OFF, FLEXFUEL…) portent une
   puce ambre minuscule — pas de bloc de couleur pleine. */
.tag-fn{
  color: #A8B0BD !important; background: rgba(13,15,18,.7) !important;
  border-color: rgba(255,255,255,.1) !important;
  font-size: .6rem !important; padding: 2px 8px !important;
  letter-spacing: .09em; border-radius: 5px;
}
.tag-opt{ position: relative; padding-left: 17px !important; }
.tag-opt::before{
  content: ""; position: absolute; left: 7px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--amber);
}

/* ---- Grille Damos dense ---- */
.lux-dgrid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
@media (max-width: 900px){ .lux-dgrid{ grid-template-columns: 1fr; } }
.lux-dcard{
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--card-radius);
  padding: 1.15rem 1.2rem 1rem; display: flex; flex-direction: column; gap: .6rem;
  transition: border-color .2s ease, background .2s ease;
}
.lux-dcard:hover{ border-color: var(--border-hover); background: var(--surface-2); }
.lux-dcard-head{ display: flex; align-items: center; gap: .8rem; }
.lux-dcard-head .brand-logo-wrap, .lux-dcard-head .brand-logo-fallback{
  width: 34px; height: 34px; padding: 4px; font-size: .62rem; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.lux-dcard-head img{ width: 100%; height: 100%; object-fit: contain; }
.lux-dcard-title{ font-size: .92rem; font-weight: 600; color: var(--text); margin: 0; letter-spacing: -.01em; }
.lux-dcard-sub{
  font-family: var(--font-mono); font-size: .7rem; color: var(--text-muted);
}
.lux-dcard-fmts{ display: flex; gap: 5px; flex-wrap: wrap; }
.lux-dcard-foot{
  display: flex; align-items: center; justify-content: space-between;
  margin-top: .35rem; padding-top: .75rem; border-top: 1px solid var(--line);
}
.lux-dcard-price{ font-family: var(--font-mono); font-size: .92rem; font-weight: 600; color: var(--text); }
.lux-dcard-go{
  font-size: .82rem; font-weight: 500; color: var(--text-secondary);
  display: inline-flex; align-items: center; gap: 6px;
}
.lux-dcard-go i{ transition: transform .2s ease; font-size: .78rem; }
.lux-dcard:hover .lux-dcard-go{ color: #fff; }
.lux-dcard:hover .lux-dcard-go i{ transform: translateX(3px); }

/* ---- ECU Identification Hub ---- */
.shop-tool-card h3{ font-size: 1.05rem; }
.form-select{
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239AA1AD' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  padding-right: 32px;
}
.form-select:hover{ border-color: var(--border-hover); }
/* Résultat finder = fiche technique ECU */
.shop-vf-result{
  background: var(--app-bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 0; overflow: hidden;
}
.shop-vf-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
@media (max-width: 640px){ .shop-vf-grid{ grid-template-columns: 1fr; } }
.shop-vf-grid > div{
  padding: 9px 14px; border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 1px;
}
.shop-vf-grid strong{
  font-family: var(--font-mono); font-size: .58rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted);
}
.shop-vf-grid span{ font-size: .82rem; color: var(--text-secondary); }
.shop-vf-actions{ padding: 10px 14px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.shop-vf-hint{ font-family: var(--font-mono); font-size: .64rem; color: var(--text-muted); }

/* ---- Workflow : frise horizontale, numéros filigrane, connexions 1px ---- */
.shop-steps{ position: relative; gap: 0; }
.shop-step{
  border-top: 1px solid var(--line); padding: 1.4rem 1.3rem 0 0; position: relative;
}
.shop-step + .shop-step{ padding-left: 1.3rem; }
@media (min-width: 1001px){
  .shop-step + .shop-step{ border-left: 1px solid var(--line); }
}
.shop-step::before{
  content: "0" counter(step);
  counter-increment: step;
  position: absolute; top: .9rem; right: 1rem;
  font-family: var(--font-mono); font-size: 2.6rem; font-weight: 600; line-height: 1;
  color: rgba(255,255,255,.05);
  margin: 0; letter-spacing: 0;
  width: auto; height: auto; background: none; box-shadow: none; border-radius: 0; transform: none; left: auto;
  display: block;
}
.shop-step:hover{ border-top-color: rgba(255,255,255,.28); }
.shop-step .lux-step-ico{
  font-size: .95rem; color: var(--text-muted); display: block; margin-bottom: .7rem;
}
.shop-step:hover .lux-step-ico{ color: var(--text-secondary); }

/* ---- Pages de détail (pack.php / damo.php) ---- */
.lux-crumb{
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .06em;
  color: var(--text-muted); margin-bottom: .9rem;
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.lux-crumb a{ color: var(--text-muted); }
.lux-crumb a:hover{ color: var(--text-secondary); }
.lux-crumb .sep{ color: rgba(255,255,255,.15); }
.lux-crumb .cur{ color: var(--text-soft); }

.lux-badges{ display: flex; gap: 6px; flex-wrap: wrap; margin-top: .8rem; }
.lux-badge{
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--line); border-radius: 4px; padding: 3px 9px; color: var(--text-soft);
  display: inline-flex; align-items: center; gap: 6px;
}
.lux-badge i{ font-size: .7rem; }
.lux-badge-ok{ color: var(--mint); border-color: var(--mint-border); background: var(--mint-soft); }

.pack-hero{
  background: transparent; border: 0; padding: 0;
}
.pack-title{ letter-spacing: -.025em; font-weight: 700; }

.panel{
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--card-radius);
  transition: border-color .2s ease;
}
.panel:hover{ border-color: rgba(255,255,255,.12); }

/* Fiche technique : libellés mono, valeurs nettes */
.info-grid .info-item .h, .stat .k{
  font-family: var(--font-mono); font-size: .6rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted);
}
.stat .v{ font-family: var(--font-mono); font-size: .82rem; }
.info-item, .stat{ background: var(--app-bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm); }

/* Arborescence des dossiers du .kp */
.lux-tree{ display: flex; flex-direction: column; gap: 0; }
.lux-tree .lux-tree-item{
  font-family: var(--font-mono); font-size: .76rem; color: var(--text-secondary);
  padding: 7px 4px 7px 2px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 9px;
}
.lux-tree .lux-tree-item:last-child{ border-bottom: 0; }
.lux-tree .lux-tree-item::before{
  content: "└─"; color: rgba(255,255,255,.18); font-size: .7rem;
}
.lux-tree .lux-tree-item i{ color: var(--text-muted); font-size: .78rem; }

/* Pills génériques des fiches -> mono neutre */
.pill{
  background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: var(--radius-xs);
  color: var(--text-soft); font-size: .68rem;
}
.pill-price{ color: var(--text); border-color: var(--border-hover); background: rgba(255,255,255,.05); }
.pill-soft{ color: var(--text-soft); }

/* Carte d'achat sticky */
.cta-card{ position: sticky; top: 86px; }
.price-big{ font-family: var(--font-mono); font-weight: 600; letter-spacing: -.01em; }
.cta-feat i{ color: var(--text-secondary); }

/* ==========================================================================
   V4 — PIPELINE & MAP INSPECTOR (respiration + hiérarchie)
   ========================================================================== */

/* De l'air : les sections respirent */
.shop-section{ padding-top: 96px; padding-bottom: 96px; }
.shop-section-header{ margin-bottom: 2.6rem; }

/* ---- Processing Pipeline : 4 cartes bento + connecteurs ---- */
.lux-pipe{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
  counter-reset: none;
}
@media (max-width: 1000px){ .lux-pipe{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .lux-pipe{ grid-template-columns: 1fr; } }
.lux-pipe-card{
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--card-radius);
  padding: 1.6rem 1.5rem 1.5rem;
  position: relative;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.lux-pipe-card:hover{
  border-color: rgba(255,255,255,.22); background: var(--surface-2); transform: translateY(-2px);
}
/* Connecteur de flux entre les cartes (desktop) */
@media (min-width: 1001px){
  .lux-pipe-card:not(:last-child)::after{
    content: "\2192";                      /* -> */
    position: absolute; top: 50%; right: -0.95rem; transform: translateY(-50%);
    font-family: var(--font-mono); font-size: .85rem; color: var(--mint);
    z-index: 2; opacity: .85;
  }
}
.lux-pipe-top{
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.1rem;
}
.lux-pipe-num{
  font-family: var(--font-mono); font-size: .78rem; font-weight: 600; letter-spacing: .1em;
  color: var(--mint);
  padding-bottom: 3px;
  border-bottom: 2px solid var(--mint-border);
}
.lux-pipe-top i{ font-size: 1rem; color: var(--text-muted); }
.lux-pipe-card:hover .lux-pipe-top i{ color: var(--text-secondary); }
.lux-pipe-card h3{
  font-size: .98rem; font-weight: 700; letter-spacing: -.01em;
  color: var(--text); margin: 0 0 .5rem;
}
.lux-pipe-card p{
  font-size: .86rem; line-height: 1.65; color: var(--text-soft); margin: 0;
}

/* ---- Live Map Inspection : widget cartographie CSS ---- */
.lux-quality{
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 2.6rem; align-items: center;
}
@media (max-width: 1000px){ .lux-quality{ grid-template-columns: 1fr; } }
.lux-mapview{
  background: #0B0D11;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.lux-mapview-head{
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .05em;
}
.lux-mapview-head .dots{ display: flex; gap: 5px; }
.lux-mapview-head .dots i{ width: 9px; height: 9px; border-radius: 50%; background: #232833; display: block; }
.lux-mapview-head .t{ color: var(--text-secondary); font-weight: 500; }
.lux-mapview-head .s{ margin-left: auto; color: var(--text-muted); }
.lux-mapview-scroll{ overflow-x: auto; }
.lux-mapview-grid{
  width: 100%; border-collapse: collapse; min-width: 560px;
  font-family: var(--font-mono); font-size: .62rem; line-height: 1;
}
.lux-mapview-grid th.ax{
  font-weight: 500; color: #556071; text-align: center;
  padding: 6px 4px; border: 1px solid rgba(255,255,255,.04);
  background: #0D0F14; letter-spacing: .02em;
}
.lux-mapview-grid th.corner{ color: #3E4554; }
.lux-mapview-grid td{
  text-align: center; padding: 6px 4px;
  border: 1px solid rgba(0,0,0,.35);
  color: #E2E8F0;
  transition: filter .12s ease;
  cursor: crosshair;
}
.lux-mapview-grid td:hover{ filter: brightness(1.45); }
/* Dégradé thermique : avance faible (bleu) -> forte (rouge) */
.lux-mapview-grid td.m0{ background: rgba(29,78,216,.32); }
.lux-mapview-grid td.m1{ background: rgba(14,165,233,.28); }
.lux-mapview-grid td.m2{ background: rgba(20,184,166,.28); }
.lux-mapview-grid td.m3{ background: rgba(16,185,129,.28); }
.lux-mapview-grid td.m4{ background: rgba(132,204,22,.26); }
.lux-mapview-grid td.m5{ background: rgba(234,179,8,.28); }
.lux-mapview-grid td.m6{ background: rgba(249,115,22,.3); }
.lux-mapview-grid td.m7{ background: rgba(239,68,68,.32); }
.lux-mapview-foot{
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .06em;
  color: var(--text-secondary);
}
.lux-mapview-foot .dot{
  width: 6px; height: 6px; border-radius: 50%; background: var(--mint); flex-shrink: 0;
  animation: luxPulse 2.2s ease-in-out infinite;
}

/* ---- Piliers qualité : blocs aérés ---- */
.lux-pillars{ display: flex; flex-direction: column; gap: 1.5rem; }
.lux-pillar{
  display: flex; gap: 1.1rem; align-items: flex-start;
  background: var(--surface); border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--card-radius);
  padding: 1.3rem 1.4rem;
  transition: border-color .2s ease, background .2s ease;
}
.lux-pillar:hover{ border-color: rgba(255,255,255,.18); background: var(--surface-2); }
.lux-pillar .ico{
  width: 38px; height: 38px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--app-bg-2); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-sm);
  color: var(--text-secondary); font-size: .95rem;
}
.lux-pillar h3{
  font-size: .96rem; font-weight: 700; letter-spacing: -.01em;
  color: var(--text); margin: 0 0 .35rem;
}
.lux-pillar p{
  font-size: .86rem; line-height: 1.7; color: var(--text-soft); margin: 0;
}

/* ==========================================================================
   V5 — CATALOGUE CLEAN : recherche, toolbar, cartes dégraissées
   ========================================================================== */

/* ---- Recherche pleine largeur ---- */
.lux-search{
  display: flex; align-items: center; gap: 11px;
  background: #13161C;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius);
  padding: 0 14px;
  height: 50px;
  margin-bottom: 1.1rem;
  transition: border-color .2s ease;
}
.lux-search:focus-within{ border-color: rgba(255,255,255,.3); }
.lux-search i.bi-search{ color: var(--text-muted); font-size: .9rem; }
.lux-search input{
  flex: 1; background: transparent; border: 0; outline: 0;
  color: var(--text); font-size: .92rem;
}
.lux-search input::placeholder{ color: var(--text-muted); }
.lux-search kbd{
  font-family: var(--font-mono); font-size: .66rem; color: var(--text-muted);
  border: 1px solid rgba(255,255,255,.12); border-radius: 5px;
  padding: 2px 7px; background: var(--app-bg-2);
}
.lux-search-reset{ color: var(--text-muted); font-size: .8rem; display: flex; }
.lux-search-reset:hover{ color: var(--text); }

/* ---- Toolbar : compteur + bascule de vue ---- */
.lux-toolbar{
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.5rem; gap: 1rem;
}
.lux-count{ font-family: var(--font-mono); font-size: .72rem; color: var(--text-soft); letter-spacing: .03em; }
.lux-view-toggle{
  display: inline-flex; border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-sm);
  overflow: hidden;
}
.lux-view-toggle button{
  background: transparent; border: 0; color: var(--text-muted);
  padding: 6px 12px; font-size: .82rem; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.lux-view-toggle button + button{ border-left: 1px solid rgba(255,255,255,.1); }
.lux-view-toggle button:hover{ color: var(--text); }
.lux-view-toggle button.on{ background: rgba(255,255,255,.08); color: #fff; }

/* ---- Cartes catalogue dégraissées ---- */
.lux-pgrid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem;
}
@media (max-width: 1000px){ .lux-pgrid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){ .lux-pgrid{ grid-template-columns: 1fr; } }
.lux-pcard{
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--card-radius);
  padding: 1.15rem 1.2rem 1.1rem;
  display: flex; flex-direction: column; gap: .65rem;
  transition: border-color .2s ease, background .2s ease;
}
.lux-pcard:hover{ border-color: rgba(255,255,255,.2); background: var(--surface-2); }
.lux-pcard-head{ display: flex; align-items: flex-start; gap: .75rem; }
.lux-pcard-badge{
  width: 30px !important; height: 30px !important; padding: 3px !important;
  font-size: .58rem !important; flex-shrink: 0;
  background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.1) !important;
  display: flex; align-items: center; justify-content: center;
}
.lux-pcard-badge img{ width: 100%; height: 100%; object-fit: contain; }
.lux-pcard-titles{ min-width: 0; }
.lux-pcard-titles .l1{
  font-size: .96rem; font-weight: 500; color: #fff; margin: 0;
  letter-spacing: -.01em; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.lux-pcard-titles .l2{
  font-size: .72rem; color: var(--text-soft); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lux-pcard-ecu{
  font-family: var(--font-mono); font-size: .68rem; color: var(--text-soft);
  letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lux-pcard-maps{
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: .68rem; color: var(--text-soft);
}
.lux-pcard-maps .dot{
  width: 5px; height: 5px; border-radius: 50%; background: var(--mint); flex-shrink: 0;
}
.lux-pcard-tags{ display: flex; flex-wrap: wrap; gap: 5px; }
.lux-pcard-foot{
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto; padding-top: .85rem; border-top: 1px solid rgba(255,255,255,.06);
}
.lux-pcard-foot .price{ font-size: 1.05rem; font-weight: 600; color: #fff; }

/* Bouton "Voir ->" : contour fin, inversion au survol */
.lux-btn-view{
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius-sm);
  color: #fff; font-size: .78rem; font-weight: 500;
  padding: .42rem 1rem; white-space: nowrap;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.lux-btn-view:hover{ background: #fff; color: #000; border-color: #fff; }
.lux-btn-view span{ transition: transform .18s ease; }
.lux-btn-view:hover span{ transform: translateX(2px); }

/* Sous-ligne dans la vue tableau */
.lux-table .t-sub{ font-size: .7rem; color: var(--text-soft); }

/* ==========================================================================
   V6 — FICHES PRODUIT "ENGINEERING PREMIUM" (pack + damos)
   ========================================================================== */

/* Badges d'état colorés : fond sombre, bordure fine, texte teinté */
.lux-badge-cyan{ color: var(--cyan); border-color: var(--cyan-border); background: var(--cyan-soft); }
.lux-badge-amber{ color: var(--amber); border-color: var(--amber-border); background: var(--amber-soft); }

/* Sous-titre technique mono sous le H1 */
.lux-subline{
  font-family: var(--font-mono); font-size: .76rem; color: var(--text-soft);
  letter-spacing: .02em; margin-top: .45rem;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.lux-subline .sep{ color: rgba(255,255,255,.15); }
.lux-subline .k{ color: var(--text-muted); }

/* Fiche technique de précision : grille 4 colonnes à cellules jointives */
.lux-spec{
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.1); border-radius: 12px;
  overflow: hidden;
}
@media (max-width: 900px){ .lux-spec{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px){ .lux-spec{ grid-template-columns: 1fr; } }
.lux-spec-cell{ background: #111318; padding: .95rem 1.1rem; }
.lux-spec-cell .k{
  font-family: var(--font-mono); font-size: .58rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted);
  margin-bottom: 5px;
}
.lux-spec-cell .v{
  font-family: var(--font-mono); font-size: .82rem; font-weight: 500; color: #fff;
  word-break: break-word;
}
.lux-spec-cell .v.ok{ color: var(--mint); }
.lux-spec-cell .v.dim{ color: var(--text-muted); font-weight: 400; }

/* Arborescence : en-tête à mini-badge cyan + survol révélateur */
.lux-treehead{
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: .6rem; flex-wrap: wrap;
}
.lux-treehead .tt{
  font-family: var(--font-mono); font-size: .6rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--cyan); background: var(--cyan-soft);
  border: 1px solid var(--cyan-border); border-radius: 4px; padding: 3px 9px;
}
.lux-tree .lux-tree-item{
  padding: 7px 8px 7px 4px; border-radius: 6px;
  transition: background .15s ease, color .15s ease;
}
.lux-tree .lux-tree-item i{ color: var(--amber); opacity: .8; }
.lux-tree .lux-tree-item::after{
  content: "maps \2192";
  margin-left: auto;
  font-size: .62rem; letter-spacing: .06em; color: var(--text-muted);
  opacity: 0; transition: opacity .15s ease;
}
.lux-tree .lux-tree-item:hover{ background: rgba(255,255,255,.035); color: #fff; }
.lux-tree .lux-tree-item:hover::after{ opacity: .9; }

/* Sidebar achat : note sous le prix + garanties mint */
.lux-price-note{
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .04em;
  color: var(--text-soft); margin-top: 5px;
}
.lux-price-note::before{
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--mint); flex-shrink: 0;
}
.cta-card{ box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.cta-feat i{ color: var(--mint); }

/* Fichiers inclus : pills de format colorées par type */
.fmt-pill{
  font-family: var(--font-mono); font-size: .62rem; font-weight: 600;
  letter-spacing: .06em; padding: 4px 9px; border-radius: 5px;
  flex-shrink: 0; min-width: 52px; text-align: center;
}
.fmt-kp, .fmt-ols{ color: var(--cyan); background: var(--cyan-soft); }
.fmt-ori, .fmt-a2l{ color: var(--mint); background: var(--mint-soft); }
.fmt-dam, .fmt-damos{ color: var(--amber); background: var(--amber-soft); }
.fmt-neutral{ color: var(--text-soft); background: rgba(255,255,255,.06); }
.file-row{
  background: var(--app-bg-2) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 8px !important;
  transition: border-color .15s ease;
}
.file-row:hover{ border-color: rgba(255,255,255,.16) !important; }
.file-row .lux-lock{
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .04em;
  color: var(--text-muted); white-space: nowrap;
}
.file-row a{ font-family: var(--font-mono); font-size: .7rem; color: var(--text-secondary); }
.file-row a:hover{ color: #fff; }

/* ==========================================================================
   V7 — CONTACT & FORMULAIRES
   ========================================================================== */
.form-label{
  font-family: var(--font-mono); font-size: .62rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted);
}
@media (max-width: 700px){
  .lux-platforms[style*="repeat(2"]{ grid-template-columns: 1fr !important; }
}

/* ==========================================================================
   V8 — LIVE TELEMETRY VIEW (résultat d'analyse ECU)
   ========================================================================== */
.lux-telemetry{
  background: var(--surface); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--card-radius); overflow: hidden;
}
.lux-telemetry-head{
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 18px; border-bottom: 1px solid var(--line);
  background: var(--app-bg-2);
}
.lux-telemetry-head .badge-ok{
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--mint); background: var(--mint-soft);
  border: 1px solid var(--mint-border); border-radius: 5px; padding: 3px 9px;
}
.lux-telemetry-head .badge-ok .dot{
  width: 5px; height: 5px; border-radius: 50%; background: var(--mint);
  animation: luxPulse 2.2s ease-in-out infinite;
}
.lux-telemetry-head .fn{ font-family: var(--font-mono); font-size: .78rem; color: var(--text); font-weight: 500; }
.lux-telemetry-head .meta{ font-family: var(--font-mono); font-size: .66rem; color: var(--text-muted); margin-left: auto; }

.lux-telemetry-grid{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: rgba(255,255,255,.06);
}
@media (max-width: 900px){ .lux-telemetry-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .lux-telemetry-grid{ grid-template-columns: 1fr; } }
.lux-telemetry-grid .cell{ background: var(--surface); padding: .95rem 1.15rem; }
.lux-telemetry-grid .k{
  font-family: var(--font-mono); font-size: .58rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 5px;
}
.lux-telemetry-grid .v{
  font-family: var(--font-mono); font-size: .82rem; font-weight: 500; color: #fff; word-break: break-word;
}
.lux-telemetry-grid .v.dim{ color: var(--text-muted); font-weight: 400; }
.lux-telemetry-grid .v.ok{ color: var(--mint); }
.lux-telemetry-grid .v.warn{ color: var(--amber); }
.lux-telemetry-grid .v .sub{ display: block; font-size: .66rem; color: var(--text-muted); margin-top: 3px; }

.lux-telemetry-extra{
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 11px 18px; border-top: 1px solid var(--line);
}
.lux-telemetry-extra .k,
.lux-telemetry-others .k{
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-muted); margin-right: 4px;
}
.lux-telemetry-extra .chip{
  font-family: var(--font-mono); font-size: .66rem; color: var(--text-soft);
  border: 1px solid var(--line); border-radius: 4px; padding: 2px 8px;
}

.lux-telemetry-cta{
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 16px 18px; border-top: 1px solid var(--line); flex-wrap: wrap;
}
.lux-telemetry-cta .found{ min-width: 0; flex: 1; }
.lux-telemetry-cta .lvl{
  display: inline-block; font-family: var(--font-mono); font-size: .62rem;
  letter-spacing: .1em; text-transform: uppercase; border-radius: 5px; padding: 3px 9px; margin-bottom: 7px;
}
.lux-telemetry-cta .lvl.ok{ color: var(--mint); background: var(--mint-soft); border: 1px solid var(--mint-border); }
.lux-telemetry-cta .lvl.cy{ color: var(--cyan); background: var(--cyan-soft); border: 1px solid var(--cyan-border); }
.lux-telemetry-cta .lvl.am{ color: var(--amber); background: var(--amber-soft); border: 1px solid var(--amber-border); }
.lux-telemetry-cta .lvl.dim{ color: var(--text-soft); background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.lux-telemetry-cta .t{ font-size: .95rem; font-weight: 600; color: #fff; }
.lux-telemetry-cta .s{ font-family: var(--font-mono); font-size: .7rem; color: var(--text-soft); margin-top: 3px; }
.lux-telemetry-cta .req{ display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.lux-telemetry-cta .req .form-control{ width: auto; min-width: 190px; }
.btn-amber{
  background: var(--amber); border: 1px solid var(--amber); color: #1A1200; font-weight: 600;
}
.btn-amber:hover{ background: #FBB040; border-color: #FBB040; color: #1A1200; }

.lux-telemetry-others{
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 18px; border-top: 1px solid var(--line); background: var(--app-bg-2);
}
.lux-telemetry-others a{ font-size: .78rem; color: var(--text-soft); }
.lux-telemetry-others a:hover{ color: #fff; }
.lux-telemetry-others .p{ font-family: var(--font-mono); font-size: .64rem; color: var(--text-muted); }

/* Progression du dropzone pendant l'envoi */
.lux-drop.busy{ border-color: var(--mint-border); background: var(--mint-soft); }
.lux-progress{
  height: 2px; background: rgba(255,255,255,.08); border-radius: 2px;
  overflow: hidden; margin-top: 10px; display: none;
}
.lux-progress.on{ display: block; }
.lux-progress i{
  display: block; height: 100%; width: 0%; background: var(--mint);
  transition: width .25s ease;
}
.lux-progress-label{
  font-family: var(--font-mono); font-size: .64rem; color: var(--mint);
  margin-top: 6px; display: none;
}
.lux-progress-label.on{ display: block; }

/* ==========================================================================
   V9 — RESPONSIVE : plus aucun débordement horizontal
   Cause principale : un enfant large (table min-width, hexdump en white-space:pre,
   grille de map) placé dans un conteneur grid/flex élargit tout le parent, car
   les items grid/flex ont min-width:auto par défaut. On force min-width:0.
   ========================================================================== */
html, body{ max-width: 100%; overflow-x: hidden; }
*, *::before, *::after{ box-sizing: border-box; }

/* Les conteneurs à défilement doivent pouvoir rétrécir */
.lux-table-wrap, .lux-mapview, .lux-mapview-scroll, .lux-hex, .lux-hex-body,
.lux-console, .lux-telemetry, .shop-tool-card, .lux-pcard, .lux-dcard,
.lux-pipe-card, .lux-pillar, .lux-plat, .panel, .acard{
  min-width: 0; max-width: 100%;
}
/* Enfants directs des grilles principales */
.shop-grid-2 > *, .shop-grid-3 > *, .lux-pgrid > *, .lux-dgrid > *,
.lux-platforms > *, .lux-pipe > *, .lux-quality > *, .shop-hero-inner > *,
.row > [class*="col-"]{ min-width: 0; }

/* Les longues références mono ne doivent jamais pousser la mise en page */
.lux-pcard-ecu, .lux-telemetry-grid .v, .lux-spec-cell .v,
.lux-subline, .shop-card-meta, .t-ecu{
  overflow-wrap: anywhere; word-break: break-word;
}

@media (max-width: 640px){
  /* Titres : on descend franchement, sinon "Mappacks WinOLS" déborde */
  .shop-hero-title{ font-size: clamp(1.9rem, 8.5vw, 2.6rem) !important; line-height: 1.12; }
  .shop-section-header h2{ font-size: clamp(1.25rem, 6vw, 1.6rem); }
  .page-title, .pack-title, h1{ font-size: clamp(1.35rem, 6.5vw, 1.9rem) !important; }

  /* Respiration réduite mais présente */
  .shop-section{ padding-top: 56px; padding-bottom: 56px; }
  .shop-container{ padding-left: 16px; padding-right: 16px; }

  /* Le héros passe en colonne, les stats sur une ligne compacte */
  .shop-hero-inner{ grid-template-columns: 1fr; gap: 1.5rem; }
  .shop-hero-stats{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .shop-hero-stat{ padding: 12px 8px !important; text-align: center; }
  .shop-hero-stat-num{ font-size: 1.15rem; }
  .shop-hero-stat-label{ font-size: .55rem; letter-spacing: .08em; }
  .shop-hero-actions{ display: flex; flex-direction: column; gap: 10px; }
  .shop-hero-actions .btn{ width: 100%; }

  /* Trustline : liste verticale lisible plutôt qu'une ligne coupée */
  .shop-trustline p{ flex-direction: column; align-items: flex-start; gap: 6px; font-size: .68rem; }
  .shop-trustline .sep{ display: none; }

  /* Fiches produit : la carte d'achat ne colle plus en haut */
  .cta-card{ position: static !important; }

  /* Résultat d'analyse : CTA empilé, formulaire pleine largeur */
  .lux-telemetry-cta{ flex-direction: column; align-items: stretch; gap: 1rem; }
  .lux-telemetry-cta .btn{ width: 100%; text-align: center; }
  .lux-telemetry-cta .req{ flex-direction: column; align-items: stretch; }
  .lux-telemetry-cta .req .form-control{ width: 100%; min-width: 0; }
  .lux-telemetry-head{ gap: 8px; }
  .lux-telemetry-head .meta{ margin-left: 0; width: 100%; }

  /* Recherche catalogue */
  .lux-search{ height: 46px; padding: 0 12px; }
  .lux-search kbd{ display: none; }

  /* Widgets techniques : défilement interne, jamais de débordement page */
  .lux-hex-body, .lux-mapview-scroll, .lux-table-wrap{ -webkit-overflow-scrolling: touch; }
  .lux-console{ display: none; }

  /* Pied de page et bandeau cookies */
  .footer-grid{ gap: 1.75rem; }
  .cookie-banner-inner{ flex-direction: column; align-items: stretch; gap: 10px; }
}

@media (max-width: 400px){
  .shop-hero-stats{ grid-template-columns: repeat(3, 1fr); }
  .lux-pcard{ padding: 1rem; }
  .lux-telemetry-grid .cell{ padding: .8rem .9rem; }
}

/* Zone de résultat AJAX */
#luxResult{ margin-top: 1rem; }
#luxResult .lux-telemetry{ animation: luxFadeIn .3s ease; }
@keyframes luxFadeIn{ from{ opacity: 0; transform: translateY(6px); } to{ opacity: 1; transform: none; } }
.lux-req-done{
  display: flex; align-items: center; gap: 8px;
  font-size: .85rem; color: var(--mint);
  background: var(--mint-soft); border: 1px solid var(--mint-border);
  border-radius: var(--radius-sm); padding: 10px 14px;
}

/* ==========================================================================
   V10 — LISIBILITÉ DES LOGOS CONSTRUCTEURS
   Les logos officiels sont dessinés pour un fond CLAIR : sur l'anthracite,
   les marques sombres (anneaux Audi, Mercedes, Skoda…) deviennent invisibles.
   On leur donne une pastille claire ; les badges SVG typographiques, eux,
   restent sur fond sombre (ils sont déjà pensés pour le thème).
   ========================================================================== */
.brand-logo-wrap{
  background: #F2F3F5 !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 7px;
  padding: 4px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.brand-logo-wrap img{
  width: 100%; height: 100%; object-fit: contain; display: block;
}
/* Le survol éclaircit très légèrement, sans halo */
.shop-card:hover .brand-logo-wrap,
.lux-pcard:hover .brand-logo-wrap,
.lux-dcard:hover .brand-logo-wrap,
.lux-table tbody tr:hover .brand-logo-wrap{
  background: #FFFFFF !important;
  border-color: rgba(255,255,255,.28) !important;
}
/* La carte catalogue force un fond translucide : on le neutralise */
.lux-pcard-badge{
  background: #F2F3F5 !important;
  border-color: rgba(255,255,255,.14) !important;
  padding: 4px !important;
}
/* Le badge SVG de repli garde le fond sombre du thème */
.brand-logo-fallback{
  background: var(--app-bg-2) !important;
  border-color: var(--line) !important;
}
/* Fiches produit : la vignette d'en-tête suit la même règle */
.pack-hero .brand-logo-wrap{ padding: 5px; }

/* ==========================================================================
   V11 — BANDEAU COOKIES & PAGES LÉGALES
   ========================================================================== */
.cookie-banner{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1080;
  background: rgba(9,10,12,.96);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 16px;
  animation: cookieUp .35s ease;
}
@keyframes cookieUp{ from{ transform: translateY(100%); } to{ transform: none; } }
.cookie-banner-inner{
  max-width: 1180px; margin: 0 auto;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: space-between;
}
.cookie-banner-text{
  margin: 0; flex: 1 1 340px; min-width: 0;
  font-size: .84rem; line-height: 1.55; color: var(--text-soft);
}
.cookie-banner-text strong{ color: var(--text); font-weight: 600; }
.cookie-banner-text a{ color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; }
.cookie-banner-text a:hover{ color: #fff; }
.cookie-banner-actions{ display: flex; gap: 8px; flex-shrink: 0; }
.cookie-btn{
  border-radius: var(--radius-sm); padding: .5rem 1.3rem;
  font-size: .84rem; font-weight: 600; border: 1px solid transparent;
  cursor: pointer; transition: all .18s ease; white-space: nowrap;
}
.cookie-btn-accent{ background: #fff; color: #0A0B0E; border-color: #fff; }
.cookie-btn-accent:hover{ background: #D7DAE0; border-color: #D7DAE0; }
.cookie-btn-ghost{ background: transparent; color: var(--text-soft); border-color: var(--border-hover); }
.cookie-btn-ghost:hover{ background: rgba(255,255,255,.05); color: #fff; border-color: rgba(255,255,255,.3); }
@media (max-width: 640px){
  .cookie-banner-inner{ flex-direction: column; align-items: stretch; gap: 12px; }
  .cookie-banner-actions{ width: 100%; }
  .cookie-btn{ flex: 1; }
}

/* --- Pages légales (mentions, CGV) --- */
.legal-block{ padding: 1.5rem 1.6rem; margin-bottom: 1rem; }
.legal-block h2{
  font-size: 1.02rem; font-weight: 700; letter-spacing: -.015em;
  color: var(--text); margin: 0 0 .9rem;
  padding-bottom: .7rem; border-bottom: 1px solid var(--line);
}
.legal-block h3{
  font-family: var(--font-mono); font-size: .62rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted);
  margin: 1.4rem 0 .7rem;
}
.legal-block p{ font-size: .875rem; line-height: 1.7; color: var(--text-soft); margin: 0 0 .8rem; }
.legal-block p:last-child{ margin-bottom: 0; }
.legal-block a{ color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; }
.legal-block a:hover{ color: #fff; }
.legal-block code{
  font-family: var(--font-mono); font-size: .78rem; color: var(--cyan);
  background: var(--cyan-soft); border: 1px solid var(--cyan-border);
  border-radius: 4px; padding: 1px 6px;
}
.legal-note{ font-size: .8rem !important; color: var(--text-muted) !important; margin-top: 1rem !important; }

.legal-grid{ display: flex; flex-direction: column; }
.legal-row{
  display: grid; grid-template-columns: 190px 1fr; gap: 1rem;
  padding: 9px 0; border-bottom: 1px solid var(--line);
}
.legal-row:last-child{ border-bottom: 0; }
.legal-grid-3 .legal-row{ grid-template-columns: 160px 1fr; }
.legal-row .k{
  font-family: var(--font-mono); font-size: .62rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted);
  padding-top: 2px;
}
.legal-row .v{ font-size: .86rem; color: var(--text-secondary); line-height: 1.6; min-width: 0; }
@media (max-width: 640px){
  .legal-row, .legal-grid-3 .legal-row{ grid-template-columns: 1fr; gap: 3px; }
  .legal-block{ padding: 1.2rem 1.1rem; }
}

/* Accessibilité : pas d'animations d'entrée en mouvement réduit,
   le contenu reste pleinement visible. */
@media (prefers-reduced-motion: reduce){
  .fade-up{ opacity: 1 !important; transform: none !important; transition: none !important; }
  .lux-status::before, .lux-console-status .st-dot, .lux-mapview-foot .dot, .lux-caret{ animation: none !important; }
}