/* ═══════════════════════════════════════════════════════════════════════════
   SALON (CONCESSIONNAIRE) : le showroom de nuit. Barre de verre flottante, véhicule
   à la une en plein écran, console de filtres en verre, cartes arrondies qui
   s'éclairent. Pensée pour le HTML de Concessionnaire-CR / Concessionnaire-C.
   Couleurs = palette du client (fonds --dark / --dark-surface, accents).
   ═══════════════════════════════════════════════════════════════════════════ */
[data-structure="salon"] { --s-r: 22px; --s-verre: color-mix(in srgb, var(--dark-surface) 62%, transparent);
  --s-filet: rgba(255,255,255,.12); }

/* ── Barre de verre flottante, détachée des bords ────────────────────────── */
[data-structure="salon"] nav {
  top: 14px; left: 50%; width: min(1500px, calc(100% - 28px)); transform: translateX(-50%);
  padding: .55rem .6rem .55rem 1.1rem; border-radius: 999px;
  background: rgba(10,12,18,.42); backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--s-filet); box-shadow: 0 18px 40px -24px rgba(0,0,0,.9);
}
[data-structure="salon"] nav.scrolled { background: color-mix(in srgb, var(--dark) 82%, transparent); }
[data-structure="salon"] .nav-logo img { height: 40px; border-radius: 10px; }
[data-structure="salon"] [data-st="navcta"] { border-radius: 999px !important; text-transform: none; letter-spacing: .01em; padding-inline: 1.2rem; }

/* ── Haut de page : le véhicule à la une en plein écran ──────────────────── */
[data-structure="salon"] #hero { padding: 7rem clamp(1rem, 4vw, 3.5rem) 3rem; }
[data-structure="salon"] .hero-orb { display: none; }
[data-structure="salon"] .hero-vedette img { opacity: .8; filter: saturate(1.05) contrast(1.05); }
[data-structure="salon"] .hero-inner { max-width: 1480px; padding-bottom: 0; }
[data-structure="salon"] .hero-inner h1 {
  font-size: clamp(2.6rem, 7vw, 6.2rem); line-height: .98; letter-spacing: -.035em; max-width: 13ch;
  text-shadow: 0 10px 40px rgba(0,0,0,.45);
}
[data-structure="salon"] .hero-inner h1 em {
  font-style: normal; background: linear-gradient(100deg, #fff 10%, var(--accent2) 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-structure="salon"] .hero-sub { color: rgba(255,255,255,.8); font-size: clamp(1rem, 1.2vw, 1.15rem); margin-bottom: 2rem; }
[data-structure="salon"] .vedette-carte { top: calc(96px + 1.2rem); border-radius: var(--s-r); }

/* ── Console de filtres en verre ─────────────────────────────────────────── */
[data-structure="salon"] [data-st="filterpanel"] {
  background: var(--s-verre); backdrop-filter: blur(16px); border: 1px solid var(--s-filet);
  border-radius: 999px; padding: .5rem .6rem .5rem 1.3rem; width: fit-content; max-width: 100%; gap: 1rem;
}
[data-structure="salon"] .fpill { border-color: transparent; color: rgba(255,255,255,.72); }
[data-structure="salon"] .fpill:hover { color: #fff; background: rgba(255,255,255,.08); }
[data-structure="salon"] .fpill.on { background: #fff; color: #0b0d12; }
[data-structure="salon"] .fpill.luxe-pill.on { background: var(--accent2); color: #0b0d12; }

/* ── Fil des marques ─────────────────────────────────────────────────────── */
[data-structure="salon"] .marques { background: transparent; border-color: var(--s-filet); padding: .9rem 0; }
[data-structure="salon"] .marques-piste span { font-family: var(--fb); font-weight: 300; letter-spacing: .3em; font-size: clamp(.95rem, 1.6vw, 1.25rem); color: rgba(255,255,255,.7); }

/* ── Catalogue : grandes cartes arrondies qui s'éclairent ────────────────── */
[data-structure="salon"] #catalogue { padding-top: 4.5rem; }
[data-structure="salon"] .cat-header h2 { font-family: var(--fh); text-transform: none; letter-spacing: -.02em; font-size: clamp(1.8rem, 3.4vw, 2.8rem); font-weight: 600; }
[data-structure="salon"] .cars-grid { gap: 1.4rem; background: none; border: 0; }
[data-structure="salon"] .car-card {
  border-radius: var(--s-r); overflow: hidden; border: 1px solid var(--s-filet);
  background: linear-gradient(180deg, color-mix(in srgb, var(--dark-surface) 92%, #fff) 0%, var(--dark-surface) 60%);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
[data-structure="salon"] .car-card:hover {
  transform: translateY(-6px); border-color: color-mix(in srgb, var(--accent2) 55%, transparent);
  box-shadow: 0 30px 60px -30px rgba(var(--accent-rgb), .55), 0 0 0 1px color-mix(in srgb, var(--accent2) 35%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--dark-surface) 86%, #fff) 0%, var(--dark-surface) 60%);
}
[data-structure="salon"] .car-photo { aspect-ratio: 16 / 11; }
[data-structure="salon"] .car-photo::after { content: ""; position: absolute; inset: auto 0 0; height: 40%; pointer-events: none;
  background: linear-gradient(transparent, color-mix(in srgb, var(--dark-surface) 85%, transparent)); }
[data-structure="salon"] .badge-luxe, [data-structure="salon"] .badge-type { backdrop-filter: blur(8px); }
[data-structure="salon"] .car-name { font-family: var(--fh); text-transform: none; letter-spacing: -.01em; font-size: 1.3rem; }
[data-structure="salon"] .car-price { font-family: var(--fh); font-weight: 700; font-size: 1.75rem; letter-spacing: -.02em; color: #fff; }
[data-structure="salon"] .car-price span { color: var(--accent2); }
[data-structure="salon"] .car-footer { border-top-color: var(--s-filet); }
[data-structure="salon"] .btn-infos { border-radius: 999px; border-color: var(--s-filet); }
[data-structure="salon"] .car-cta .btn-reserver { border-radius: 999px; text-transform: none; letter-spacing: .01em; }

@media (max-width: 760px) {
  [data-structure="salon"] nav { top: 10px; width: calc(100% - 20px); }
  [data-structure="salon"] #hero { padding-top: 11rem; }
  [data-structure="salon"] .vedette-carte { top: calc(76px + .8rem); }
  [data-structure="salon"] [data-st="filterpanel"] { border-radius: 18px; padding: .6rem; }
  [data-structure="salon"] [data-st="filterpanel"] .filter-label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  [data-structure="salon"] .car-card:hover { transform: none; }
}