/* =========================================================================
   SJA Passion 73 — Feuille de style
   Dark premium (noir profond + or) avec toggle light. Tokens + animations.
   ========================================================================= */

/* ---- Reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body { min-height: 100%; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---- Tokens (dark par défaut) ----------------------------------------- */
:root {
  --font-display: "Montserrat", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;

  /* couleur d'accent (modifiable via Tweaks) */
  --gold: #c9a24b;
  --gold-2: #e7c878;
  --gold-glow: rgba(201, 162, 75, 0.45);

  --bg: #0a0a0b;
  --bg-2: #101012;
  --bg-warm: #14110d;
  --surface: #16161a;
  --surface-2: #1d1d22;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);
  --ink: #f4f1ea;
  --ink-soft: #d7d3c9;
  --muted: #948f85;
  --shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8);
  --radius: 16px;
  --radius-sm: 11px;
  --maxw: 1240px;
  --nav-h: 122px;

  color-scheme: dark;
}

[data-theme="light"] {
  --bg: #faf8f3;
  --bg-2: #f1eee5;
  --bg-warm: #f7ece0;
  --surface: #ffffff;
  --surface-2: #f7f1e8;
  --line: rgba(40, 30, 18, 0.10);
  --line-strong: rgba(40, 30, 18, 0.17);
  --ink: #211b12;
  --ink-soft: #4a4234;
  --muted: #837a69;
  --gold: #bd7f2c;
  --gold-2: #e0a64a;
  --shadow: 0 30px 70px -34px rgba(120, 84, 30, 0.28);
  --gold-glow: rgba(214, 150, 60, 0.30);
  color-scheme: light;
}

/* ---- Base -------------------------------------------------------------- */
html { background:
  radial-gradient(120% 90% at 50% 30%, var(--bg-warm) 0%, var(--bg) 62%) fixed,
  var(--bg);
}
body {
  font-family: var(--font-body);
  background: transparent;
  color: var(--ink);
  line-height: 1.6;
  letter-spacing: 0.01em;
  transition: color 0.5s ease;
}

/* Image de fond plein écran (parc automobile) */
#parkBg {
  position: fixed; inset: 0; width: 100vw; height: 100dvh; z-index: 0;
  background-image: url('assets/site-bg.webp');
  background-size: cover; background-position: center; background-repeat: no-repeat;
  pointer-events: none;
}
.park-scrim {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 30%, color-mix(in srgb, var(--bg) 6%, transparent) 0%, color-mix(in srgb, var(--bg) 42%, transparent) 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 12%, transparent) 0%, color-mix(in srgb, var(--bg) 52%, transparent) 100%);
}

/* Bouton d'upload de la photo de fond */
.bg-uploader { position: fixed; left: 18px; bottom: 18px; z-index: 240; display: flex; align-items: center; gap: 8px; }
.bg-uploader-btn {
  display: inline-flex; align-items: center; gap: 9px; padding: 10px 15px; border-radius: 100px;
  background: color-mix(in srgb, var(--surface) 86%, transparent); border: 1px solid var(--line-strong);
  color: var(--ink-soft); font-family: var(--font-display); font-weight: 600; font-size: 13px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow); transition: color 0.2s, border-color 0.2s, transform 0.2s;
}
.bg-uploader-btn svg { width: 17px; height: 17px; color: var(--gold); }
.bg-uploader-btn:hover { color: var(--ink); border-color: var(--gold); transform: translateY(-2px); }
.bg-uploader.dragover .bg-uploader-btn { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 0 3px var(--gold-glow); }
.bg-uploader-clear {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--surface) 86%, transparent); border: 1px solid var(--line-strong);
  color: var(--muted); font-size: 14px; backdrop-filter: blur(12px); transition: color 0.2s, border-color 0.2s;
}
.bg-uploader-clear:hover { color: #c0392b; border-color: #c0392b; }

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(20px, 5vw, 56px); }

.section { padding-block: clamp(72px, 10vw, 130px); position: relative; z-index: 1; background: color-mix(in srgb, var(--bg) 80%, transparent); }
.section--tint { background: color-mix(in srgb, var(--bg-2) 84%, transparent); }
#brands { background: color-mix(in srgb, var(--bg) 84%, transparent); }

.eyebrow {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--gold);
  display: inline-flex; align-items: center; gap: 12px;
}
.eyebrow::before { content: ""; width: 30px; height: 1px; background: var(--gold); opacity: 0.7; }

.section-head { max-width: 640px; margin-bottom: clamp(38px, 5vw, 60px); }
.section-head h2 { font-size: clamp(30px, 4.6vw, 52px); margin: 18px 0 14px; }
.section-head p { color: var(--muted); font-size: clamp(15px, 1.6vw, 18px); max-width: 56ch; }

.gold-text { color: var(--gold); }

/* ---- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 28px; border-radius: 100px;
  font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: 0.02em;
  transition: transform 0.25s, box-shadow 0.3s, background 0.3s, color 0.3s, border-color 0.3s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn--gold {
  background: linear-gradient(135deg, var(--gold-2), var(--gold));
  color: #1a1407;
  box-shadow: 0 10px 30px -8px var(--gold-glow);
}
.btn--gold:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -10px var(--gold-glow); }
.btn--ghost { border: 1px solid var(--line-strong); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }
.btn--sm { padding: 11px 18px; font-size: 13.5px; }
.btn--wa { background: #25d366; color: #06351a; }
.btn--wa:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(37, 211, 102, 0.5); }

/* =========================================================================
   NAV
   ========================================================================= */
.nav {
  position: sticky; top: 0; height: auto; z-index: 200;
  display: flex; flex-direction: column;
  transition: background 0.4s, backdrop-filter 0.4s, border-color 0.4s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--line);
}
.nav .container { display: flex; align-items: flex-end; justify-content: flex-start; gap: 22px; flex: none; padding-block: 0 0; }
.brand-logo { display: flex; align-items: center; gap: 12px; flex: none; }
.brand-mark {
  width: 50px; height: 40px; border-radius: 11px; flex: none;
  display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(135deg, var(--gold-2), var(--gold));
  color: #1a1407; font-family: var(--font-display); font-weight: 800; font-size: 17px;
  box-shadow: 0 6px 18px -6px var(--gold-glow);
}
.brand-mark .bm-car { width: 36px; height: auto; overflow: visible; transition: transform 0.4s cubic-bezier(.2,.8,.2,1); transform-origin: 50% 70%; }
.brand-logo:hover .bm-car { transform: rotate(-6deg); }
.brand-img { height: 165px; width: auto; display: block; transition: transform 0.4s cubic-bezier(.2,.8,.2,1), height 0.4s ease; }
.nav.scrolled .brand-img { height: 130px; }
.brand-logo:hover .brand-img { transform: scale(1.04); }
.brand-logo--footer .brand-img { height: 162px; }
[data-theme="dark"] .brand-img { filter: brightness(0) invert(1); }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: 0.01em; white-space: nowrap; line-height: 1.1; }
.brand-name small { display: block; font-size: 10.5px; font-weight: 500; letter-spacing: 0.22em; color: var(--gold); text-transform: uppercase; }
.nav-links { display: flex; align-items: center; gap: 14px; }
.eyebrow--hero { margin-top: 38px; }
section[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }
.nav-links a { font-size: 17px; font-weight: 700; color: #000000; position: relative; transition: color 0.25s; white-space: nowrap; }
.nav-links a.nav-rachat, .nav-links a.is-current:not(.nav-superpromo) { white-space: normal; text-align: center; line-height: 1.15; width: 16ch; }
.nav-links a::after { content: ""; position: absolute; left: 0; bottom: -6px; height: 1.5px; width: 0; background: var(--gold); transition: width 0.28s; }
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { width: 100%; }
.nav-actions { display: flex; align-items: center; gap: 12px; }
/* Colonne droite : icônes au-dessus, onglets en dessous (juste au-dessus du bas du logo) */
.nav-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; transform: translateY(-38px); }
.nav-top { display: flex; align-items: center; gap: 24px; }
.nav-actions { order: -1; }
.nav-right .nav-actions { justify-content: flex-end; }
.icon-btn {
  width: 42px; height: 42px; border-radius: 11px; flex: none;
  display: grid; place-items: center; color: var(--ink);
  border: 1px solid var(--line); transition: border-color 0.25s, color 0.25s, background 0.25s;
}
.icon-btn:hover { border-color: var(--gold); color: var(--gold); }
.icon-btn svg { width: 19px; height: 19px; }
.nav-burger { display: none; }

/* =========================================================================
   HERO
   ========================================================================= */
.hero { position: relative; min-height: 100dvh; display: flex; align-items: center; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg image-slot, .hero-bg .ph { width: 100%; height: 100%; display: block; filter: contrast(1.12) saturate(1.14) brightness(0.9); }
.hero-bg::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 95% at 72% 18%, transparent 30%, color-mix(in srgb, var(--bg) 60%, transparent) 88%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 38%, transparent) 0%, transparent 26%, transparent 64%, var(--bg) 98%),
    linear-gradient(90deg, color-mix(in srgb, var(--bg) 60%, transparent) 0%, transparent 56%);
}
.hero-inner { position: relative; z-index: 2; padding-top: 0; width: 100%; }
.hero-inner .container { display: grid; gap: 30px; }
.hero h1 {
  font-size: clamp(46px, 8.5vw, 104px); font-weight: 800; letter-spacing: -0.025em;
  text-transform: uppercase;
}
.hero h1 .ln { display: block; overflow: hidden; }
.hero h1 .ln span { display: block; }
.hero.animate h1 .ln span { transform: translateY(110%); animation: rise 0.9s cubic-bezier(.16,1,.3,1) forwards; }
.hero.animate h1 .ln:nth-child(2) span { animation-delay: 0.12s; }
.hero h1 .gold-text { background: linear-gradient(120deg, var(--gold-2), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-sub { font-size: clamp(16px, 2vw, 21px); color: var(--ink-soft); max-width: 50ch; }
.hero.animate .hero-sub { opacity: 0; animation: fade 0.8s ease 0.45s forwards; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }
.hero.animate .hero-cta { opacity: 0; animation: fade 0.8s ease 0.6s forwards; }
.hero-scroll { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 2; color: var(--muted); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; display: grid; justify-items: center; gap: 8px; }
.hero-scroll .line { width: 1px; height: 38px; background: linear-gradient(var(--gold), transparent); animation: scrolld 1.8s ease-in-out infinite; transform-origin: top; }

/* Stat counters */
.stats { display: grid; grid-template-columns: repeat(3, auto); gap: clamp(28px, 6vw, 70px); margin-top: 18px; }
.hero.animate .stats { opacity: 0; animation: fade 0.8s ease 0.8s forwards; }
.stat { display: grid; gap: 4px; }
.stat .num { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 5vw, 54px); line-height: 1; color: var(--ink); }
.stat .num .gold-text { color: var(--gold); }
.stat .lbl { font-size: 13px; color: var(--muted); letter-spacing: 0.04em; }
.stats .stat + .stat { position: relative; }
.stats .stat + .stat::before { content: ""; position: absolute; left: clamp(-14px, -3vw, -35px); top: 6px; bottom: 6px; width: 1px; background: var(--line); }

/* =========================================================================
   NOS DEUX ACTIVITÉS (choix achat / rachat)
   ========================================================================= */
.activities { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.act-card {
  position: relative; display: grid; gap: 14px; align-content: start;
  padding: clamp(28px, 4vw, 46px); border-radius: var(--radius);
  border: 1px solid var(--line-strong); background: var(--surface);
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s; overflow: hidden;
}
.act-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--gold-2), var(--gold)); opacity: 0.9; }
.act-card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--gold) 55%, transparent); box-shadow: 0 26px 60px -30px var(--gold-glow); }
.act-card .act-ic { width: 60px; height: 60px; border-radius: 15px; display: grid; place-items: center; color: var(--gold); border: 1px solid var(--line-strong); background: var(--surface-2); }
.act-card .act-ic svg { width: 29px; height: 29px; }
.act-kicker { font-family: var(--font-display); font-weight: 700; font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.act-card h3 { font-size: clamp(24px, 3vw, 33px); font-weight: 800; letter-spacing: -0.01em; }
.act-card p { color: var(--ink-soft); font-size: 15px; max-width: 44ch; line-height: 1.55; }
.act-card .btn { justify-self: start; margin-top: 6px; }
.act-card.act-rachat { background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 11%, var(--surface)) 0%, var(--surface) 68%); }
@media (max-width: 820px) { .activities { grid-template-columns: 1fr; } }

/* lien nav « Véhicules » = sous-section de la page (ancre interne), pas un onglet à part entière */
.nav-links a.nav-vehicules { color: var(--ink-soft); font-weight: 500; }
.nav-links a.nav-vehicules:hover { color: var(--ink); }

/* lien nav « Rachat cash » : doré (même couleur que le titre "sans frontières"), pilule contour */
.nav-links a.nav-rachat { color: #000000; border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent); padding: 7px 15px; border-radius: 100px; font-weight: 700; }
.nav-links a.nav-rachat::after { display: none; }
.nav-links a.nav-rachat:hover { background: color-mix(in srgb, var(--gold) 14%, transparent); color: #000000; }

/* lien nav « Super Promo » : pilule rouge clignotante */
.nav-links a.nav-superpromo, .nav-drop-trigger.nav-superpromo {
  color: #fff; background: #c0392b; padding: 7px 16px; border-radius: 100px; font-weight: 700;
  white-space: normal; text-align: center; line-height: 1.15; width: 9ch;
  animation: promoBlink 1.15s ease-in-out infinite;
}
.nav-links a.nav-superpromo::after, .nav-drop-trigger.nav-superpromo::after { display: none; }
.nav-links a.nav-superpromo:hover, .nav-drop-trigger.nav-superpromo:hover { background: #a8291d; }
.nav-drop-trigger.nav-superpromo .care { color: #fff; }
@keyframes promoBlink {
  0%, 100% { box-shadow: 0 0 0 0 rgba(192,57,43,0.55); }
  50%      { box-shadow: 0 0 0 7px rgba(192,57,43,0); }
}

/* Onglet actif (page courante) — même traitement pour tous les onglets, y compris Super Promo :
   seul le contour change (texte toujours noir, pas de fond plein) */
.nav-links a.is-current {
  color: #000000; font-weight: 800;
  border: 4.5px solid #000000; border-radius: 100px; padding: 7px 15px;
}
.nav-links a.nav-rachat.is-current { color: #000000; border-color: #000000; background: transparent; }
.nav-links a.nav-superpromo.is-current { color: #000000; border-color: #000000; }
.nav-links a.is-current::after { display: none; }

/* Sous-menu déroulant : « Véhicules » apparaît sous son onglet d'activité, pas comme onglet à part */
.nav-drop { position: relative; }
.nav-drop-trigger { display: inline-flex; align-items: center; gap: 5px; }
.nav-drop-trigger .care { width: 10px; height: 10px; transition: transform 0.2s; }
.nav-drop:hover .nav-drop-trigger .care, .nav-drop.open .nav-drop-trigger .care { transform: rotate(180deg); }
.nav-drop-menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(4px);
  margin-top: 14px; min-width: 150px; padding: 7px; z-index: 60;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.28); opacity: 0; visibility: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.nav-drop:hover .nav-drop-menu, .nav-drop.open .nav-drop-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav-drop-menu a {
  display: block; padding: 8px 12px; border-radius: 8px; font-size: 14px; font-weight: 500;
  color: var(--ink-soft); white-space: nowrap;
}
.nav-drop-menu a::after { display: none; }
.nav-drop-menu a:hover { background: color-mix(in srgb, var(--gold) 13%, transparent); color: var(--ink); }

/* Barre de sous-onglets : toujours visible sous la barre principale (style "onglets plats"),
   pas de clic requis — on arrive directement dessus en changeant de page/section. */
.nav-subbar {
  border-top: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 14%, transparent);
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  flex: none; transform: translateY(-30px);
}
.nav-subbar .container {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-block: 2px;
}
.nav-subbar a {
  padding: 9px 16px; border-radius: 10px; font-size: 14px; font-weight: 600;
  color: #000000; transition: color 0.2s, background 0.2s;
}
.nav-subbar a:hover { color: var(--ink); }
.nav-subbar a.active { background: color-mix(in srgb, var(--gold) 16%, var(--surface)); color: var(--ink); }
@media (max-width: 760px) { .nav-subbar .container { gap: 6px 8px; max-height: 5.4em; overflow: hidden; } .nav-subbar a { padding: 6px 11px; font-size: 12px; } }
@media (max-width: 760px) {
  .nav-drop-menu {
    position: static; transform: none; margin-top: 4px; margin-left: 14px; opacity: 1; visibility: visible;
    box-shadow: none; border: none; background: none; padding: 0; display: grid; gap: 2px;
  }
  .nav-drop-trigger .care { display: none; }
}

/* =========================================================================
   BRAND SELECTOR
   ========================================================================= */
.brand-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 44px; }
.brand-cell {
  position: relative; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface);
  display: grid; justify-items: center; gap: 12px; padding: 22px 18px 18px;
  cursor: pointer;
  transition: transform 0.3s, border-color 0.3s, background 0.3s, box-shadow 0.3s;
  overflow: hidden;
}
.brand-cell::before {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity 0.4s; pointer-events: none;
  background: radial-gradient(70% 70% at 50% 30%, var(--gold-glow), transparent 70%);
}
.brand-cell:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--gold) 55%, transparent); box-shadow: 0 22px 50px -24px var(--gold-glow); }
.brand-cell:hover::before { opacity: 1; }
.brand-coin {
  position: relative; z-index: 1;
  width: clamp(72px, 9vw, 96px); aspect-ratio: 1; border-radius: 16px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  overflow: hidden;
  display: grid; place-items: center;
  transition: border-color 0.3s, transform 0.6s cubic-bezier(.2,.8,.2,1);
  transform-style: preserve-3d;
}
.brand-coin img { width: 78%; height: 78%; object-fit: contain; }
/* Coin avec logo : plaque blanche pour que les logos (noirs ou couleur) ressortent en thème clair comme sombre */
.brand-coin:has(img:not([hidden])) { background: #fff; border-color: var(--line-strong); }
.brand-coin:has(img:not([hidden])) { padding: 9%; }
.brand-wordmark { font-family: var(--font-display); font-weight: 800; letter-spacing: 0.01em; color: var(--ink); font-size: clamp(15px, 2.1vw, 20px); transition: color 0.3s; }
.brand-cell:hover .brand-wordmark { color: var(--gold); }
.brand-coin.dropping { border-color: var(--gold); }
.brand-logo-edit {
  position: absolute; top: 6px; left: 6px; z-index: 3;
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--surface) 82%, transparent); border: 1px solid var(--line-strong);
  color: var(--muted); opacity: 0; transform: translateY(-3px);
  transition: opacity 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.brand-cell:hover .brand-logo-edit { opacity: 1; transform: none; }
.brand-logo-edit:hover { color: var(--gold); border-color: var(--gold); }
.brand-logo-edit svg { width: 13px; height: 13px; }
.brand-cell:hover .brand-coin { border-color: var(--gold); }
.brand-name-sm { position: relative; z-index: 1; font-size: 15px; color: var(--ink); font-weight: 600; font-family: var(--font-display); }
.brand-go { display: grid; justify-items: center; gap: 5px; width: 100%; cursor: pointer; }
.brand-go-cta { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); transition: color 0.25s, gap 0.25s; }
.brand-go-cta svg { width: 14px; height: 14px; }
.brand-cell:hover .brand-go-cta { color: var(--gold); gap: 8px; }
.brand-cell.is-turning .brand-coin { animation: lockturn 0.62s cubic-bezier(.2,.7,.2,1) forwards; }
.brand-count { position: absolute; top: 12px; right: 14px; z-index: 2; font-size: 11px; color: var(--muted); font-family: var(--font-display); font-weight: 600; }
.brand-cell.is-soon { opacity: 0.62; }
.brand-cell.is-soon .brand-count { color: var(--gold); }
.brand-cell.is-soon:hover { opacity: 0.85; }

/* =========================================================================
   REVEAL STAGE (animation porte)
   ========================================================================= */
.reveal-stage {
  position: fixed; inset: 0; z-index: 300; pointer-events: none;
  opacity: 0; visibility: hidden;
  perspective: 1600px;
}
.reveal-stage.active { opacity: 1; visibility: visible; pointer-events: auto; }
.reveal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(2px); opacity: 0; transition: opacity 0.4s; }
.reveal-stage.active .reveal-backdrop { opacity: 1; }

.door { position: absolute; top: 0; bottom: 0; width: 50.5%; transform-style: preserve-3d; will-change: transform; backface-visibility: hidden;
  background: linear-gradient(90deg, #c8ccd1 0%, #e3e5e8 48%, #d4d7db 100%); }
.door::after { /* jeu central entre les deux vantaux (ombre réaliste) */
  content: ""; position: absolute; top: 0; bottom: 0; width: 7px;
  background: linear-gradient(90deg, rgba(0,0,0,0.32), rgba(0,0,0,0.04));
  opacity: 0.55;
}
.door-l { left: 0; transform-origin: left center; }
.door-l::after { right: 0; background: linear-gradient(270deg, rgba(0,0,0,0.34), rgba(0,0,0,0.04)); }
.door-r { right: 0; transform-origin: right center; }
.door-r::after { left: 0; }
/* Tablier de porte de garage sectionnelle : panneaux horizontaux en relief + refends verticaux */
.door .door-panel {
  position: absolute; inset: 12px; border-radius: 2px;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.28), inset 0 0 0 3px rgba(255,255,255,0.4);
  background:
    /* refends verticaux NETS -> 3 panneaux par vantail */
    linear-gradient(90deg,
      transparent calc(33.33% - 2px), rgba(0,0,0,0.34) calc(33.33% - 2px),
      rgba(0,0,0,0.34) 33.33%, rgba(255,255,255,0.55) 33.33%, rgba(255,255,255,0.55) calc(33.33% + 2px), transparent calc(33.33% + 2px),
      transparent calc(66.66% - 2px), rgba(0,0,0,0.34) calc(66.66% - 2px),
      rgba(0,0,0,0.34) 66.66%, rgba(255,255,255,0.55) 66.66%, rgba(255,255,255,0.55) calc(66.66% + 2px), transparent calc(66.66% + 2px)),
    /* sections horizontales NETTES (panneaux sectionnels) */
    repeating-linear-gradient(180deg,
      #e9ebed 0, #e9ebed 58px,
      #aab0b6 58px, #aab0b6 60px,        /* rainure sombre nette (2px) */
      #ffffff 60px, #ffffff 62px,        /* filet clair net (2px) */
      #e9ebed 62px); }
/* Rangée de hublots dans la section haute (verre fumé, meneaux nets) */
.door .door-glass {
  position: absolute; top: 14px; left: 7%; right: 7%; height: 44px; border-radius: 3px; z-index: 1;
  background:
    linear-gradient(90deg,
      transparent calc(33.33% - 1.5px), rgba(18,26,34,0.95) calc(33.33% - 1.5px), rgba(18,26,34,0.95) calc(33.33% + 1.5px), transparent calc(33.33% + 1.5px),
      transparent calc(66.66% - 1.5px), rgba(18,26,34,0.95) calc(66.66% - 1.5px), rgba(18,26,34,0.95) calc(66.66% + 1.5px), transparent calc(66.66% + 1.5px)),
    linear-gradient(150deg, #45535f 0%, #7c8e9b 38%, #cddbe6 50%, #667885 64%, #3a4751 100%);
  box-shadow: inset 0 0 0 3px #eef1f3, inset 0 0 0 4px rgba(0,0,0,0.45), 0 1px 2px rgba(255,255,255,0.6); }
.door .door-brand { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; }
.door .door-brand img { width: clamp(96px, 15vw, 200px); height: auto; max-height: 42vh; object-fit: contain; filter: drop-shadow(0 8px 20px rgba(0,0,0,0.16)); }
.door .door-brand .door-wordmark { font-family: var(--font-display); font-weight: 800; color: rgba(40,30,18,0.42); font-size: clamp(34px, 7.5vw, 104px); letter-spacing: 0.08em; }

/* Variante par défaut : SHOWROOM (double battant qui s'écarte avec perspective) */
.reveal-stage[data-door="showroom"] .door-l { transform: translateX(-100.5%) rotateY(13deg); }
.reveal-stage[data-door="showroom"] .door-r { transform: translateX(100.5%) rotateY(-13deg); }
.reveal-stage[data-door="showroom"].closed .door-l,
.reveal-stage[data-door="showroom"].closed .door-r { transform: translateX(0) rotateY(0deg); }
.reveal-stage[data-door="showroom"] .door { transition: transform 0.95s cubic-bezier(.7,0,.2,1); }

/* Variante GARAGE : rideau qui se lève (les deux panneaux montent) */
.reveal-stage[data-door="garage"] .door { width: 100%; left: 0; right: 0; transform-origin: top center; }
.reveal-stage[data-door="garage"] .door-r { display: none; }
.reveal-stage[data-door="garage"] .door-l { transform: translateY(-101%) rotateX(-12deg); }
.reveal-stage[data-door="garage"].closed .door-l { transform: translateY(0) rotateX(0); }
.reveal-stage[data-door="garage"] .door-l { transition: transform 1s cubic-bezier(.7,0,.2,1); }
.reveal-stage[data-door="garage"] .door-l::after { display: none; }

/* Variante SERRURE : zoom/iris depuis le centre (porte qui pivote en bloc) */
.reveal-stage[data-door="serrure"] .door-r { display: none; }
.reveal-stage[data-door="serrure"] .door-l { width: 100%; left: 0; transform-origin: center center; }
.reveal-stage[data-door="serrure"] .door-l { transition: transform 0.95s cubic-bezier(.7,0,.2,1), opacity 0.6s ease 0.3s; transform: scale(1.35) rotateZ(8deg); opacity: 0; }
.reveal-stage[data-door="serrure"].closed .door-l { transform: scale(1) rotateZ(0); opacity: 1; }
.reveal-stage[data-door="serrure"] .door-l::after { left: 50%; transform: translateX(-50%); width: 4px; }

/* disque serrure central */
.lock-disc {
  position: absolute; top: 50%; left: 50%; z-index: 4;
  width: clamp(90px, 14vw, 150px); aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%) rotateY(0deg);
  display: grid; place-items: center;
  background: radial-gradient(120% 120% at 35% 25%, #2a2a30, #0c0c0e);
  border: 2px solid var(--gold); color: var(--gold);
  font-family: var(--font-display); font-weight: 800; font-size: clamp(20px, 3vw, 30px);
  box-shadow: 0 0 0 8px rgba(201,162,75,0.08), 0 0 60px var(--gold-glow);
  opacity: 0; transition: opacity 0.3s;
}
.reveal-stage.locking .lock-disc { opacity: 1; animation: lockturn 0.62s cubic-bezier(.2,.7,.2,1) forwards; }
.reveal-stage.opening .lock-disc { opacity: 0; transform: translate(-50%,-50%) scale(0.6); transition: opacity 0.3s, transform 0.5s; }

/* =========================================================================
   CATALOGUE
   ========================================================================= */
.catalogue-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-bottom: 26px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.cat-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 100px;
  border: 1px solid var(--line); background: transparent; color: var(--ink-soft);
  font-size: 13.5px; font-weight: 500; transition: all 0.22s;
}
.cat-chip:hover { border-color: var(--line-strong); color: var(--ink); }
.cat-chip.active { background: var(--gold); color: #1a1407; border-color: var(--gold); font-weight: 600; }
.cat-sep { width: 1px; align-self: stretch; background: var(--line); margin-inline: 4px; }

/* Super Promo : menu de recherche (marques + filtres) en accent rouge, propre à ces pages */
.page-superpromo .brand-cell:hover { border-color: color-mix(in srgb, #c0392b 55%, transparent); box-shadow: 0 22px 50px -24px rgba(192,57,43,0.35); }
.page-superpromo .brand-cell:hover .brand-wordmark,
.page-superpromo .brand-cell:hover .brand-go-cta { color: #c0392b; }
.page-superpromo .brand-cell:hover .brand-coin { border-color: #c0392b; }
.page-superpromo .cat-chip.active { background: #c0392b; color: #fff; border-color: #c0392b; }
.page-superpromo .cat-chip:hover { border-color: #c0392b; color: #c0392b; }
.page-superpromo .opt-toggle:hover, .page-superpromo .cat-field select:focus { border-color: #c0392b; }
.page-superpromo #priceRange { accent-color: #c0392b; }
.page-superpromo .gold-text { color: #c0392b; }
.cat-field { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.cat-field select, .cat-field input[type="range"] { accent-color: var(--gold); }
.cat-field select { background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); padding: 9px 12px; border-radius: 10px; font-size: 13.5px; }
.cat-count { margin-left: auto; color: var(--muted); font-size: 13.5px; }
.cat-count b { color: var(--gold); }
.cat-reset {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 100px;
  font-size: 13px; font-weight: 600; color: var(--ink-soft);
  border: 1px solid var(--line-strong); background: var(--surface-2);
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.cat-reset svg { width: 15px; height: 15px; }
.cat-reset:hover { color: var(--gold); border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, transparent); }
.brand-slot { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; min-height: 44px; border: 1.5px dashed var(--line-strong); border-radius: 100px; color: var(--muted); font-size: 13.5px; transition: border-color 0.25s, background 0.25s; }
.brand-slot-label { font-weight: 700; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.brand-slot-empty { opacity: 0.85; }
.brand-slot.has-brand { border-style: solid; border-color: var(--gold); background: color-mix(in srgb, var(--gold) 9%, transparent); }
.brand-slot-chip { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink-soft); }
.brand-slot-chip img { width: 28px; height: 28px; object-fit: contain; }
.brand-slot-clear { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink-soft); font-size: 10px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: color 0.2s, border-color 0.2s; }
.brand-slot-clear:hover { border-color: #e04040; color: #e04040; }
.brand-fly { position: fixed; z-index: 4000; pointer-events: none; display: flex; align-items: center; justify-content: center; will-change: transform; }
.brand-fly img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.4)); }
.brand-fly span { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--gold); }
@keyframes slotLand { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 60%, transparent); } 100% { box-shadow: 0 0 0 20px transparent; } }
.brand-slot.landed { animation: slotLand 0.7s ease-out; }
.brand-cell.is-picked { position: relative; opacity: 0.5; }
.brand-cell.is-picked .brand-coin { opacity: 0.22; filter: grayscale(0.7); }
.brand-cell.is-picked::after { content: "✓ Dans votre recherche"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 5px 11px; border-radius: 100px; background: var(--gold); color: #14100a; font-size: 11.5px; font-weight: 700; white-space: nowrap; pointer-events: none; }
@media (max-width: 768px) {
  .brand-slot { width: 100%; justify-content: flex-start; min-height: 42px; padding: 7px 13px; font-size: 12.5px; }
  .brand-slot-chip img { width: 24px; height: 24px; }
  .brand-cell.is-picked::after { font-size: 10.5px; padding: 4px 9px; }
}

/* Filtre Équipements (multi-sélection) */
.opt-filter { position: relative; }
.opt-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink);
  padding: 9px 12px; border-radius: 10px; font-size: 13.5px; font-family: inherit; font-weight: 500;
  transition: border-color 0.2s;
}
.opt-toggle:hover { border-color: var(--line-strong); }
.opt-toggle svg { width: 15px; height: 15px; color: var(--muted); transition: transform 0.25s; }
.opt-filter.open .opt-toggle { border-color: var(--gold); }
.opt-filter.open .opt-toggle svg { transform: rotate(180deg); }
.opt-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 19px; height: 19px;
  padding: 0 5px; border-radius: 100px; background: var(--gold); color: #1a1407;
  font-size: 11.5px; font-weight: 700; font-family: var(--font-display);
}
.opt-panel {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; width: 300px; max-width: 86vw;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0,0,0,0.32); padding: 8px; animation: optIn 0.16s ease;
}
@keyframes optIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.opt-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px;
}
.opt-panel-head span { font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.opt-clear { background: none; border: 0; color: var(--gold); font-size: 12.5px; font-weight: 600; font-family: inherit; padding: 2px 4px; }
.opt-clear:hover { text-decoration: underline; }
.opt-list { display: grid; gap: 2px; max-height: 320px; overflow-y: auto; }
.opt-item {
  display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 9px;
  font-size: 14px; color: var(--ink-soft); transition: background 0.18s;
}
.opt-item:hover { background: var(--surface-2); color: var(--ink); }
.opt-item input { width: 17px; height: 17px; accent-color: var(--gold); flex: none; }
.opt-item .opt-name { flex: 1; }
.opt-item .opt-n { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.opt-item input:checked ~ .opt-name { color: var(--ink); font-weight: 600; }
.opt-item.is-empty { opacity: 0.4; pointer-events: none; }

.car-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.car-card {
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface);
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
  display: flex; flex-direction: column;
}
.car-card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--gold) 45%, transparent); box-shadow: var(--shadow); }
.car-media { position: relative; aspect-ratio: 16 / 11; overflow: hidden; }
.car-media .ph { width: 100%; height: 100%; transition: transform 0.6s; }
.car-card:hover .car-media .ph { transform: scale(1.05); }

/* ---- Visuel véhicule teinté (placeholder 3 vues) --------------------- */
.car-photo { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; --paint: #7d8590; background: #e9eaec; }
.car-photo .cp-studio {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 50% 8%, rgba(255,255,255,0.85), transparent 55%),
    radial-gradient(100% 70% at 50% 120%, color-mix(in srgb, var(--paint) 45%, #000 12%), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--paint) 22%, #fff), color-mix(in srgb, var(--paint) 60%, #2a2a2a));
}
.car-photo .cp-car { position: absolute; inset: 0; display: grid; place-items: center; padding: 14% 12% 16%; }
.car-photo .cp-car svg { width: 86%; height: auto; filter: drop-shadow(0 10px 14px rgba(0,0,0,0.28)); }
.cp-body { fill: var(--paint); stroke: color-mix(in srgb, var(--paint) 60%, #000); stroke-width: 1.2; }
.cp-glass { fill: color-mix(in srgb, var(--paint) 30%, #cfe2ef); opacity: 0.85; }
.cp-wheel { fill: #1d1f22; }
.cp-hub { fill: #c9ccd1; }
.cp-light { fill: #f5f0dd; opacity: 0.9; }
.car-photo.is-dark .cp-glass { fill: color-mix(in srgb, var(--paint) 50%, #4a5a66); }
.car-photo .cp-meta { position: absolute; left: 14px; top: 12px; z-index: 2; display: grid; gap: 2px; }
.car-photo .cp-view { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.92); text-shadow: 0 1px 4px rgba(0,0,0,0.4); }
.car-photo .cp-model { font-size: 11px; color: rgba(255,255,255,0.78); text-shadow: 0 1px 4px rgba(0,0,0,0.4); }
.car-photo .cp-swatch { position: absolute; top: 12px; right: 12px; z-index: 2; width: 22px; height: 22px; border-radius: 50%; background: var(--paint); border: 2px solid rgba(255,255,255,0.85); box-shadow: 0 2px 6px rgba(0,0,0,0.3); }
.car-photo .cp-note {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 7px 12px;
  font-size: 10.5px; letter-spacing: 0.02em; color: rgba(255,255,255,0.92); text-align: center;
  background: linear-gradient(0deg, rgba(0,0,0,0.55), transparent);
}
.car-photo--big .cp-view { font-size: 13px; }
.car-photo--big .cp-model { font-size: 13px; }
.car-photo--big .cp-note { font-size: 12px; padding: 9px 14px; }
.car-card:hover .car-photo .cp-car svg { transform: scale(1.04); transition: transform 0.6s; }
.car-photo .cp-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.car-photo.has-img .cp-meta .cp-view { background: rgba(0,0,0,0.45); padding: 3px 8px; border-radius: 6px; backdrop-filter: blur(4px); }
.car-photo.cp-drop { outline: 2px dashed var(--gold); outline-offset: -6px; }
.car-card:hover .car-photo.has-img .cp-img { transform: scale(1.05); transition: transform 0.6s; }
.cp-tools { position: absolute; right: 12px; bottom: 30px; z-index: 3; display: flex; gap: 8px; opacity: 0; transform: translateY(4px); transition: opacity 0.2s, transform 0.2s; }
.modal-main-img:hover .cp-tools { opacity: 1; transform: none; }
.cp-up, .cp-rm {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 100px;
  font-family: var(--font-display); font-weight: 600; font-size: 12.5px;
  background: rgba(20,20,22,0.78); color: #fff; border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(8px); transition: background 0.2s, transform 0.2s;
}
.cp-up:hover, .cp-rm:hover { background: var(--gold); color: #1a1407; transform: translateY(-1px); }
.cp-up svg, .cp-rm svg { width: 15px; height: 15px; }
.cp-rm { padding: 8px; }

/* ---- Gestion des photos par modèle (admin) -------------------------- */
.photomgr { position: fixed; inset: 0; z-index: 420; display: grid; place-items: center; padding: clamp(12px,3vw,40px); opacity: 0; visibility: hidden; transition: opacity 0.3s; }
.photomgr.open { opacity: 1; visibility: visible; }
.photomgr .modal-back { position: absolute; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(8px); }
.photomgr-card { position: relative; z-index: 2; width: min(1080px, 100%); max-height: 90vh; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); overflow: hidden; }
.photomgr-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 24px clamp(20px,3vw,30px) 16px; border-bottom: 1px solid var(--line); }
.photomgr-head h3 { font-size: clamp(20px,2.6vw,26px); }
.photomgr-head p { color: var(--muted); font-size: 14px; margin-top: 6px; max-width: 60ch; }
.photomgr-head .modal-close { position: static; flex: none; }
.photomgr-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px clamp(20px,3vw,30px); border-bottom: 1px solid var(--line); background: var(--bg-2); }
.pm-progress { font-size: 14px; color: var(--muted); }
.pm-progress b { color: var(--gold); font-family: var(--font-display); }
.photomgr-grid { overflow: auto; padding: clamp(12px,2vw,20px) clamp(20px,3vw,30px) clamp(20px,3vw,30px); display: grid; gap: 14px; }
.pm-row { display: grid; grid-template-columns: 200px 1fr; gap: 18px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-2); }
.pm-rowhead { display: grid; gap: 3px; }
.pm-brand { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold); font-family: var(--font-display); font-weight: 700; }
.pm-model { font-family: var(--font-display); font-weight: 700; font-size: 17px; }
.pm-count { font-size: 12px; color: var(--muted); }
.pm-cells { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.pm-cell { position: relative; aspect-ratio: 16/11; border-radius: 11px; overflow: hidden; cursor: pointer; border: 1.5px dashed var(--line-strong); background: var(--surface); display: grid; place-items: center; transition: border-color 0.2s, background 0.2s; }
.pm-cell:hover { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 7%, var(--surface)); }
.pm-cell.has { border-style: solid; border-color: var(--line); }
.pm-cell.drop { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, var(--surface)); }
.pm-cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pm-cell-ic { color: var(--muted); }
.pm-cell-ic svg { width: 26px; height: 26px; }
.pm-cell.has:hover .pm-cell-ic { display: none; }
.pm-cell-tag { position: absolute; left: 8px; top: 7px; z-index: 2; font-family: var(--font-display); font-weight: 600; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.pm-cell.has .pm-cell-tag { color: #fff; background: rgba(0,0,0,0.45); padding: 2px 7px; border-radius: 5px; backdrop-filter: blur(4px); }
.pm-cell-hint { position: absolute; bottom: 8px; z-index: 2; font-size: 11px; color: var(--muted); }
.pm-cell-rm { position: absolute; right: 7px; top: 7px; z-index: 3; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(20,20,22,0.7); color: #fff; border: 1px solid rgba(255,255,255,0.2); opacity: 0; transition: opacity 0.2s, background 0.2s; }
.pm-cell.has:hover .pm-cell-rm { opacity: 1; }
.pm-cell-rm:hover { background: #c0392b; }
.pm-cell-rm svg { width: 14px; height: 14px; }
@media (max-width: 640px) {
  .pm-row { grid-template-columns: 1fr; gap: 12px; }
}
.car-badge-market {
  position: absolute; top: 75px; left: 13px; z-index: 2;
  background: #1a1c1f; color: #fff; font-weight: 700; font-size: 11px; letter-spacing: 0.03em;
  padding: 6px 12px; border-radius: 100px; text-transform: uppercase; font-family: var(--font-display);
  box-shadow: 0 6px 14px -4px rgba(0,0,0,0.35);
}
.car-badge-promo {
  position: absolute; top: 44px; left: 13px; z-index: 2;
  background: #c0392b; color: #fff; font-weight: 700; font-size: 11px; letter-spacing: 0.03em;
  padding: 6px 12px; border-radius: 100px; text-transform: uppercase; font-family: var(--font-display);
}
.car-badge { position: absolute; top: 13px; left: 13px; z-index: 2; padding: 6px 12px; border-radius: 100px; font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.car-badge.neuf { background: var(--gold); color: #1a1407; }
.car-badge.occasion { background: rgba(0,0,0,0.6); color: var(--ink); border: 1px solid var(--line-strong); backdrop-filter: blur(6px); }
.car-fav { position: absolute; top: 11px; right: 12px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,0.45); color: var(--ink); backdrop-filter: blur(6px); border: 1px solid var(--line); transition: color 0.2s, transform 0.2s; }
.car-fav:hover { color: var(--gold); transform: scale(1.1); }
.car-body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.car-brandrow { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--muted); letter-spacing: 0.05em; text-transform: uppercase; font-family: var(--font-display); font-weight: 600; }
.car-title { font-family: var(--font-display); font-weight: 700; font-size: 19px; }
.car-version { font-size: 12.5px; color: var(--muted); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.car-specs { display: flex; flex-wrap: wrap; gap: 7px 7px; }
.car-specs span { font-size: 12px; color: var(--ink-soft); padding: 5px 10px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); }
.car-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 6px; }
.car-price { font-family: var(--font-display); font-weight: 800; font-size: 23px; color: var(--ink); }
.car-price small { display: block; font-size: 11px; font-weight: 500; color: var(--muted); letter-spacing: 0.04em; }

.cascade { opacity: 0; transform: translateY(26px); }
.cascade.in { animation: cascade 0.6s cubic-bezier(.16,1,.3,1) forwards; }

.cat-empty { grid-column: 1 / -1; text-align: center; padding: 60px 20px; color: var(--muted); border: 1px dashed var(--line-strong); border-radius: var(--radius); }

/* =========================================================================
   MODAL DÉTAIL
   ========================================================================= */
.modal { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: clamp(14px, 4vw, 44px); opacity: 0; visibility: hidden; transition: opacity 0.3s; }
.modal.open { opacity: 1; visibility: visible; }
.modal-back { position: absolute; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(8px); }
.modal-card { position: relative; z-index: 2; width: min(1040px, 100%); max-height: 90vh; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); transform: translateY(20px) scale(0.98); transition: transform 0.35s cubic-bezier(.16,1,.3,1); }
.modal.open .modal-card { transform: none; }
.modal-grid { display: grid; grid-template-columns: 1.15fr 1fr; }
.modal-gallery { padding: 18px; display: grid; gap: 12px; background: var(--bg-2); }
.modal-main-img { aspect-ratio: 16/11; border-radius: 14px; overflow: hidden; position: relative; }
.modal-thumbs { display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; }
.modal-thumbs .ph { aspect-ratio: 16/11; border-radius: 10px; cursor: pointer; opacity: 0.7; transition: opacity 0.2s; }
.modal-thumbs .ph:hover { opacity: 1; }
.modal-thumbs .cp-thumb { aspect-ratio: 16/11; position: relative; border-radius: 10px; overflow: hidden; cursor: pointer; opacity: 0.72; transition: opacity 0.2s, box-shadow 0.2s; }
.modal-thumbs .cp-thumb:hover { opacity: 1; }
.modal-thumbs .cp-thumb.active { opacity: 1; box-shadow: 0 0 0 2px var(--gold); }
.modal-thumbs .cp-thumb .cp-note { display: none; }
.modal-thumbs .cp-thumb .cp-swatch { width: 13px; height: 13px; top: 7px; right: 7px; border-width: 1.5px; }
.modal-thumbs .cp-thumb .cp-model { display: none; }
.modal-thumbs .cp-thumb .cp-view { font-size: 9px; }
.modal-info { padding: clamp(22px, 3vw, 34px); display: flex; flex-direction: column; gap: 18px; }
.modal-info h3 { font-size: clamp(24px, 3vw, 32px); }
.modal-price { font-family: var(--font-display); font-weight: 800; font-size: 30px; color: var(--gold); }
.spec-table { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.spec-table div { background: var(--surface); padding: 12px 14px; }
.spec-table .k { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.spec-table .v { font-family: var(--font-display); font-weight: 600; font-size: 15px; margin-top: 2px; }
.opt-list { display: flex; flex-wrap: wrap; gap: 8px; }
.opt-list span { font-size: 12.5px; padding: 6px 12px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); }
.modal-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; }
.modal-close { position: absolute; top: 14px; right: 14px; z-index: 3; width: 42px; height: 42px; border-radius: 50%; background: rgba(0,0,0,0.5); color: #fff; display: grid; place-items: center; border: 1px solid var(--line-strong); backdrop-filter: blur(6px); transition: transform 0.2s, background 0.2s; }
.modal-close:hover { transform: rotate(90deg); background: var(--gold); color: #1a1407; }

/* =========================================================================
   POURQUOI NOUS
   ========================================================================= */
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.why-card { padding: 30px 26px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: transform 0.3s, border-color 0.3s; }
.why-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--gold) 40%, transparent); }
.why-ic { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; color: var(--gold); border: 1px solid var(--line-strong); background: var(--surface-2); margin-bottom: 18px; }
.why-ic svg { width: 27px; height: 27px; }
.reveal-up.in .why-ic svg { animation: pop 0.6s cubic-bezier(.2,1.4,.4,1) both; }
.why-card h3 { font-size: 19px; margin-bottom: 8px; }
.why-card p { color: var(--muted); font-size: 14.5px; }

/* =========================================================================
   COMMENT ÇA MARCHE
   ========================================================================= */
.steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.steps::before { content: ""; position: absolute; top: 32px; left: 8%; right: 8%; height: 2px; background: var(--line); }
.steps .prog { content: ""; position: absolute; top: 32px; left: 8%; height: 2px; width: 0; background: linear-gradient(90deg, var(--gold), var(--gold-2)); transition: width 1.4s ease; }
.steps.in .prog { width: 84%; }
.step { position: relative; text-align: center; display: grid; justify-items: center; gap: 12px; }
.step-num { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); border: 2px solid var(--line-strong); color: var(--muted); font-family: var(--font-display); font-weight: 800; font-size: 24px; position: relative; z-index: 1; transition: all 0.4s; }
.steps.in .step:nth-child(1) .step-num { transition-delay: 0.1s; }
.steps.in .step:nth-child(2) .step-num { transition-delay: 0.45s; }
.steps.in .step:nth-child(3) .step-num { transition-delay: 0.8s; }
.steps.in .step:nth-child(4) .step-num { transition-delay: 1.15s; }
.steps.in .step .step-num { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 0 6px var(--gold-glow); }
.step h3 { font-size: 18px; }
.step p { color: var(--muted); font-size: 14px; max-width: 24ch; }
.ht-note {
  display: flex; align-items: center; gap: 16px; margin-top: clamp(34px, 5vw, 52px);
  padding: 20px 24px; border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--gold) 38%, var(--line));
  background: color-mix(in srgb, var(--gold) 9%, var(--surface));
  max-width: 760px; margin-inline: auto;
}
.ht-note .ht-ic { width: 46px; height: 46px; flex: none; border-radius: 12px; display: grid; place-items: center; color: #1a1407; background: linear-gradient(135deg, var(--gold-2), var(--gold)); }
.ht-note .ht-ic svg { width: 22px; height: 22px; }
.ht-note strong { font-family: var(--font-display); display: block; font-size: 16px; margin-bottom: 3px; }
.ht-note span { color: var(--muted); font-size: 14px; }

/* =========================================================================
   TÉMOIGNAGES
   ========================================================================= */
.tst-wrap { position: relative; overflow: hidden; }
.tst-track { display: flex; transition: transform 0.6s cubic-bezier(.7,0,.2,1); }
.tst-card { flex: 0 0 100%; padding: 6px; }
.tst-inner { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; padding: clamp(26px, 4vw, 48px); border: 1px solid var(--line); border-radius: 22px; background: var(--surface); }
.tst-photo { width: clamp(86px, 12vw, 128px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 2px solid var(--gold); flex: none; }
.tst-quote { font-family: var(--font-display); font-weight: 500; font-size: clamp(18px, 2.4vw, 26px); line-height: 1.4; letter-spacing: -0.01em; margin-bottom: 18px; }
.tst-stars { display: flex; gap: 3px; color: var(--gold); margin-bottom: 12px; }
.tst-stars svg { width: 18px; height: 18px; }
.tst-meta { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
.tst-meta b { color: var(--ink); font-family: var(--font-display); }
.tst-verif { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #34d171; padding: 4px 9px; border-radius: 100px; border: 1px solid rgba(52,209,113,0.3); background: rgba(52,209,113,0.08); }
.tst-verif svg { width: 13px; height: 13px; }
.tst-nav { display: flex; justify-content: center; gap: 10px; margin-top: 26px; }
.tst-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); transition: all 0.3s; }
.tst-dot.active { background: var(--gold); width: 28px; border-radius: 100px; }
.tst-arrows { display: flex; gap: 10px; }

/* =========================================================================
   VIDÉOS
   ========================================================================= */
.vid-feature { display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; margin-bottom: 22px; }
.vid-main { position: relative; aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.vid-side { display: grid; grid-template-rows: 1fr 1fr; gap: 22px; }
.vid-thumb { position: relative; aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); cursor: pointer; }
.vid-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.vid-thumb .ph, .vid-main .ph { width: 100%; height: 100%; transition: transform 0.5s; }
.vid-main .vid-preview { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; background: #000; }
.vid-main:hover .vid-preview { transform: scale(1.05); }
.vid-thumb .vid-preview { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; background: #000; }
.vid-thumb:hover .vid-preview { transform: scale(1.05); }
/* Lecture sur place : la vidéo reste dans sa vignette, affichée en entier */
.vid-main.playing .vid-preview, .vid-thumb.playing .vid-preview { object-fit: contain; transform: none; cursor: default; }
.vid-main.playing:hover .vid-preview, .vid-thumb.playing:hover .vid-preview { transform: none; }
.vid-main.playing .vid-play, .vid-main.playing .vid-cap,
.vid-thumb.playing .vid-play, .vid-thumb.playing .vid-cap { opacity: 0; pointer-events: none; }
.vid-thumb:hover .ph, .vid-main:hover .ph { transform: scale(1.05); }
.vid-play { position: absolute; inset: 0; display: grid; place-items: center; cursor: pointer; }
.vid-play .pbtn { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: rgba(201,162,75,0.92); color: #1a1407; box-shadow: 0 10px 30px -8px var(--gold-glow); transition: transform 0.25s; }
.vid-main:hover .pbtn, .vid-thumb:hover .pbtn { transform: scale(1.1); }
.vid-play .pbtn svg { width: 24px; height: 24px; margin-left: 3px; }
.vid-cap { position: absolute; left: 16px; bottom: 14px; z-index: 2; font-family: var(--font-display); font-weight: 600; font-size: 14px; text-shadow: 0 2px 10px rgba(0,0,0,0.6); }
.vid-thumb .vid-play .pbtn { width: 46px; height: 46px; }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 410; display: grid; place-items: center; padding: clamp(16px, 3vw, 48px); background: rgba(0,0,0,0.9); opacity: 0; visibility: hidden; transition: opacity 0.3s; }
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox .frame { width: min(1320px, 94vw); max-height: 86vh; border-radius: 14px; overflow: hidden; border: 1px solid var(--line-strong); background: #000; display: grid; place-items: center; }
.lightbox .frame video { width: 100%; height: auto; max-height: 86vh; display: block; }
.lightbox .modal-close { position: absolute; top: 24px; right: 24px; }

/* =========================================================================
   CONTACT
   ========================================================================= */
.contact-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 38px; align-items: start; }
.form { display: grid; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 7px; }
.field label { font-size: 12.5px; color: var(--muted); font-family: var(--font-display); font-weight: 600; letter-spacing: 0.04em; }
.field input, .field select, .field textarea {
  background: var(--surface); border: 1px solid var(--line); border-radius: 11px; padding: 13px 15px; color: var(--ink);
  font-size: 14.5px; transition: border-color 0.2s, box-shadow 0.2s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-glow); }
.field textarea { resize: vertical; min-height: 120px; }
.field.invalid input, .field.invalid textarea, .field.invalid select { border-color: #e0564f; box-shadow: 0 0 0 3px rgba(224,86,79,0.18); }
.field .err { font-size: 12px; color: #e0564f; display: none; }
.field.invalid .err { display: block; }
.form-success { display: none; padding: 16px 18px; border-radius: 12px; background: rgba(52,209,113,0.1); border: 1px solid rgba(52,209,113,0.35); color: #34d171; font-size: 14px; align-items: center; gap: 10px; }
.form-success.show { display: flex; }

.contact-aside { display: grid; gap: 18px; }
.info-card { padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); display: grid; gap: 16px; }
.info-row { display: flex; gap: 14px; align-items: flex-start; }
.info-row .ic { width: 42px; height: 42px; border-radius: 11px; flex: none; display: grid; place-items: center; color: var(--gold); border: 1px solid var(--line); background: var(--surface-2); }
.info-row .ic svg { width: 19px; height: 19px; }
.info-row .t { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.info-row .d { font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.info-row .d a { transition: color 0.2s; }
.info-row .d a:hover { color: var(--gold); }
.hours-list { display: grid; gap: 8px; }
.hours-list li { display: flex; justify-content: space-between; font-size: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.hours-list li span:last-child { color: var(--gold); font-weight: 600; }
.map-embed { aspect-ratio: 16/10; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); position: relative; }

/* ---- Nos agences ---------------------------------------------------- */
.agency-list { display: grid; gap: 10px; }
.agency {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 13px;
  background: var(--surface-2); transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.agency:hover { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); transform: translateY(-2px); }
.agency-main { display: grid; gap: 3px; min-width: 0; }
.agency-city { font-family: var(--font-display); font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 9px; }
.agency-city em {
  font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--gold); border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--line));
  background: color-mix(in srgb, var(--gold) 12%, transparent); padding: 2px 7px; border-radius: 999px;
}
.agency-meta { font-size: 13px; color: var(--muted); }
.agency-go {
  flex: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--gold);
  padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--line));
  border-radius: 10px; transition: background 0.2s, color 0.2s;
}
.agency-go svg { width: 15px; height: 15px; }
.agency-go:hover { background: var(--gold); color: #fff; }

/* =========================================================================
   FOOTER + FLOATING
   ========================================================================= */
.footer { background: var(--bg-2); border-top: 1px solid var(--line); padding-top: clamp(56px, 7vw, 86px); }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 38px; padding-bottom: 50px; }
.footer-col h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--gold); margin-bottom: 18px; }
.footer-col ul { display: grid; gap: 11px; }
.footer-col a { color: var(--muted); font-size: 14.5px; transition: color 0.2s; }
.footer-col a:hover { color: var(--ink); }
.footer-about p { color: var(--muted); font-size: 14.5px; max-width: 38ch; margin: 16px 0 20px; }
.socials { display: flex; gap: 10px; }
.socials a { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; border: 1px solid var(--line); color: var(--ink-soft); transition: all 0.25s; }
.socials a:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-3px); }
.socials svg { width: 18px; height: 18px; }
.footer-bottom { border-top: 1px solid var(--line); padding: 22px 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 13px; }
.footer-bottom a { color: var(--muted); }
.footer-bottom a:hover { color: var(--gold); }

.fab { position: fixed; right: 22px; bottom: 22px; z-index: 250; display: grid; gap: 12px; justify-items: end; }
.fab-wa { width: 60px; height: 60px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; box-shadow: 0 14px 34px -8px rgba(37,211,102,0.55); transition: transform 0.25s; position: relative; }
.fab-wa svg { width: 30px; height: 30px; }
.fab-wa:hover { transform: scale(1.08); }
.fab-wa::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25d366; animation: ping 2s ease-out infinite; }
.fab-menu { display: none; flex-direction: column; gap: 8px; padding: 10px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.fab.open .fab-menu { display: flex; }
.fab-menu a { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; font-size: 13.5px; transition: background 0.2s; white-space: nowrap; }
.fab-menu a:hover { background: var(--surface-2); }
.fab-menu a .wn { font-family: var(--font-display); font-weight: 600; }
.fab-menu a small { display: block; color: var(--muted); font-size: 11px; }

/* =========================================================================
   PLACEHOLDER (image striée + libellé mono)
   ========================================================================= */
.ph {
  position: relative; overflow: hidden;
  background:
    repeating-linear-gradient(135deg, var(--surface-2) 0 11px, var(--surface) 11px 22px);
  display: grid; place-items: center;
}
.ph::after { content: attr(data-label); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; letter-spacing: 0.08em; color: var(--muted); text-transform: uppercase; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; background: color-mix(in srgb, var(--bg) 60%, transparent); }

/* =========================================================================
   KEYFRAMES
   ========================================================================= */
@keyframes rise { to { transform: translateY(0); } }
@keyframes fade { to { opacity: 1; } }
@keyframes scrolld { 0%, 100% { transform: scaleY(0.3); opacity: 0.4; } 50% { transform: scaleY(1); opacity: 1; } }
@keyframes lockturn { 0% { transform: translate(-50%,-50%) rotateY(0); } 60% { transform: translate(-50%,-50%) rotateY(200deg); } 100% { transform: translate(-50%,-50%) rotateY(180deg); } }
@keyframes cascade { to { opacity: 1; transform: translateY(0); } }
@keyframes pop { 0% { transform: scale(0.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes ping { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(1.8); opacity: 0; } }

/* the brand-coin lockturn uses its own (no translate) */
.brand-cell.is-turning .brand-coin { animation: cointurn 0.62s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes cointurn { 0% { transform: rotateY(0); } 60% { transform: rotateY(200deg); } 100% { transform: rotateY(180deg); } }

.reveal-up { opacity: 0; transform: translateY(34px); transition: opacity 0.7s cubic-bezier(.16,1,.3,1), transform 0.7s cubic-bezier(.16,1,.3,1); }
.reveal-up.in { opacity: 1; transform: none; }
.reveal-up[data-delay="1"] { transition-delay: 0.12s; }
.reveal-up[data-delay="2"] { transition-delay: 0.24s; }
.reveal-up[data-delay="3"] { transition-delay: 0.36s; }

/* Garde-fou : horloge d'animation gelée (capture hors-écran / onglet masqué).
   Tout est rendu visible immédiatement (transitions coupées) pour ne jamais
   afficher une page vide. */
.no-anim .reveal-up, .no-anim .steps, .no-anim .cascade,
.no-anim .hero-sub, .no-anim .hero-cta, .no-anim .stats,
.no-anim .hero h1 .ln span { transition: none !important; animation: none !important; }
.no-anim .reveal-up, .no-anim .steps, .no-anim .cascade { opacity: 1 !important; transform: none !important; }
.no-anim .hero-sub, .no-anim .hero-cta, .no-anim .stats { opacity: 1 !important; }
.no-anim .hero h1 .ln span { transform: none !important; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1024px) {
  .brand-grid { grid-template-columns: repeat(3, 1fr); }
  .car-grid, .vid-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .modal-grid { grid-template-columns: 1fr; }
  .vid-feature { grid-template-columns: 1fr; }
  .vid-side { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1080px) {
  .nav-cta { display: none; }
  .nav-links { gap: 22px; }
}
@media (max-width: 760px) {
  .nav-burger { display: none; }
  .nav > .container { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding-block: 8px 6px; }
  .nav-right { display: contents; }
  .brand-logo { order: 1; flex: none; margin-right: auto; }
  .nav-actions { order: 2; justify-content: flex-end; align-self: flex-start; margin-top: 2px; }
  .nav-actions .icon-btn { width: 38px; height: 38px; }
  .nav-top { order: 3; width: 100%; flex-direction: row; }
  .nav-links {
    display: flex; flex-wrap: wrap; gap: 8px; width: 100%;
  }
  .nav-links a { flex: 1 1 44%; font-size: 13px; text-align: center; padding-block: 7px; }
  .nav-links a.nav-rachat, .nav-links a.is-current:not(.nav-superpromo) { white-space: nowrap; width: auto; flex: 1 1 44%; text-align: center; }
  .brand-img { height: 64px; }
  .nav.scrolled .brand-img { height: 52px; }
  .nav-subbar { transform: none; }
  .nav.mobile-open .nav-links {
    display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bg); border-bottom: 1px solid var(--line); padding: 22px 28px; gap: 18px;
  }
  .hero h1 { font-size: clamp(40px, 13vw, 70px); }
  .stats { gap: 26px; }
  .brand-grid { grid-template-columns: repeat(2, 1fr); }
  .car-grid, .vid-grid, .why-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; gap: 30px 16px; }
  .steps::before, .steps .prog { display: none; }
  .contact-grid, .vid-side { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 28px; }
  .tst-inner { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .form-row { grid-template-columns: 1fr; }
  .catalogue-bar { gap: 10px; }
  .cat-count { width: 100%; margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .hero h1 .ln span, .hero-sub, .hero-cta, .stats { opacity: 1 !important; transform: none !important; }
  .sja-intro { display: none !important; }
}

/* =========================================================================
   INTRO — silhouette voiture + révélation du nom (joué une fois / session)
   ========================================================================= */
.sja-intro {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background:
    radial-gradient(120% 90% at 50% 38%, var(--bg-warm) 0%, var(--bg) 70%);
  overflow: hidden;
}
.sja-intro.done { animation: introOut 0.8s cubic-bezier(.7,0,.2,1) forwards; }
@keyframes introOut { to { opacity: 0; visibility: hidden; transform: scale(1.04); } }
.sja-intro__scene { position: absolute; inset: 0; overflow: hidden; }
/* Intro vidéo plein écran, puis apparition du logo à la fin */
.sja-intro__scene { background: #000; }
.sja-intro__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; background: #000; z-index: 1; opacity: 0;
  transition: opacity 0.5s ease;
}
.sja-intro.run .sja-intro__video { opacity: 1; }
/* en fin de vidéo : le fond s'éclaircit un peu mais laisse entrevoir la voiture */
.sja-intro.reveal .sja-intro__video { opacity: 0.4; transition: opacity 0.8s ease; }
.sja-intro.reveal .sja-intro__scene { animation: introLighten 0.8s ease forwards; }
@keyframes introLighten {
  to { background: radial-gradient(120% 100% at 50% 45%, rgba(255,255,255,0.62) 0%, rgba(246,241,232,0.5) 55%, rgba(236,228,214,0.42) 100%), #0a0b0e; }
}
.sja-intro__accent { fill: #c0392b; opacity: 0; transform-box: fill-box; transform-origin: center; }
.sja-intro.reveal .sja-intro__accent { animation: accentFlash 0.5s cubic-bezier(.2,1.5,.4,1) 0.15s forwards; }
@keyframes accentFlash { 0% { opacity: 0; transform: scale(0); } 60% { opacity: 1; transform: scale(1.25); } 100% { opacity: 1; transform: scale(1); } }

.sja-intro__name { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 6px; text-align: center; }

/* Apparition finale du logo : balayage gauche→droite + halo doré + reflet */
.sja-intro__logo {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 6;
  width: min(1100px, 92vw); display: grid; place-items: center;
}
.sja-intro__logo img {
  width: 100%; height: auto; display: block; position: relative; z-index: 1;
  opacity: 0; clip-path: inset(0 100% 0 0); transform: scale(0.94);
}
.sja-intro.reveal .sja-intro__logo img { animation: logoWipe 0.9s cubic-bezier(.5,.05,.2,1) forwards; }
@keyframes logoWipe {
  0%   { opacity: 0; clip-path: inset(0 100% 0 0); transform: scale(0.94); }
  55%  { opacity: 1; }
  100% { opacity: 1; clip-path: inset(0 0 0 0); transform: scale(1); }
}
.sja-intro__glow {
  position: absolute; left: 50%; top: 50%; width: 150%; aspect-ratio: 1; z-index: 0;
  transform: translate(-50%, -50%) scale(0.2); border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, rgba(255,255,255,0.92) 0%, rgba(255,252,245,0.7) 32%, color-mix(in srgb, var(--gold) 16%, transparent) 50%, transparent 70%);
}
.sja-intro.reveal .sja-intro__glow { animation: logoGlow 1.2s ease-out 0.15s forwards; }
@keyframes logoGlow {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
  45%  { opacity: 0.95; }
  100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
}
.sja-intro__shine { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.sja-intro__shine::before {
  content: ""; position: absolute; top: -20%; left: -35%; width: 24%; height: 140%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent);
  transform: skewX(-18deg); opacity: 0;
}
.sja-intro.reveal .sja-intro__shine::before { animation: logoShine 0.95s ease-out 0.7s forwards; }
@keyframes logoShine {
  0%   { left: -35%; opacity: 0; }
  25%  { opacity: 0.95; }
  100% { left: 125%; opacity: 0; }
}
/* Nom de la page de destination — positionné indépendamment du logo pour rester dans l'écran */
.sja-intro__dest {
  position: absolute; left: 50%; bottom: -8%; transform: translate(-50%, 14px);
  z-index: 4; width: 92vw; text-align: center;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 4.8vw, 44px);
  line-height: 1.15; letter-spacing: 0.04em; text-transform: uppercase; color: #16181c;
  opacity: 0;
}
.sja-intro.reveal .sja-intro__dest.show { animation: destIn 0.7s ease-out 0.1s forwards; }
@keyframes destIn {
  0%   { opacity: 0; transform: translate(-50%, 30px); }
  100% { opacity: 1; transform: translate(-50%, 0); }
}
.sja-intro__sja { display: flex; gap: 2px; font-family: var(--font-display); font-weight: 900; font-size: clamp(48px, 11vw, 92px); letter-spacing: 0.02em; color: var(--ink); line-height: 0.9; }
.sja-intro__sja span { display: inline-block; transform: translateY(120%); opacity: 0; }
.sja-intro.reveal .sja-intro__sja span { animation: letterRise 0.6s cubic-bezier(.2,1.3,.4,1) forwards; }
.sja-intro.reveal .sja-intro__sja span:nth-child(1) { animation-delay: 0.05s; }
.sja-intro.reveal .sja-intro__sja span:nth-child(2) { animation-delay: 0.15s; }
.sja-intro.reveal .sja-intro__sja span:nth-child(3) { animation-delay: 0.25s; }
@keyframes letterRise { to { transform: translateY(0); opacity: 1; } }
.sja-intro__script { font-family: "Raleway", var(--font-display); font-style: italic; font-weight: 700; font-size: clamp(26px, 6vw, 46px); color: #c0392b; opacity: 0; transform: translateX(-12px); }
.sja-intro.reveal .sja-intro__script { animation: scriptIn 0.7s ease 0.45s forwards; }
@keyframes scriptIn { to { opacity: 1; transform: translateX(0); } }
.sja-intro__tag { display: flex; align-items: center; gap: 14px; font-family: var(--font-display); font-size: clamp(9px, 1.8vw, 11.5px); font-weight: 600; letter-spacing: 0.34em; text-transform: uppercase; color: var(--muted); opacity: 0; }
.sja-intro.reveal .sja-intro__tag { animation: fade 0.6s ease 0.85s forwards; }
.sja-intro__tag::before, .sja-intro__tag::after { content: ""; width: 0; height: 1px; background: var(--gold); }
.sja-intro.reveal .sja-intro__tag::before, .sja-intro.reveal .sja-intro__tag::after { animation: lineGrow 0.6s ease 0.7s forwards; }
@keyframes lineGrow { to { width: clamp(20px, 6vw, 44px); } }
.sja-intro__skip {
  position: fixed; right: 22px; bottom: 20px; z-index: 2;
  font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  color: var(--muted); border: 1px solid var(--line-strong); border-radius: 100px; padding: 9px 18px;
  background: var(--surface); transition: color 0.2s, border-color 0.2s;
}
.sja-intro__skip:hover { color: var(--gold); border-color: var(--gold); }

/* =========================================================================
   POLISH GLOBAL — barre de scroll, curseur, particules, flèche
   ========================================================================= */
.scroll-prog {
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 300;
  background: linear-gradient(90deg, var(--gold), var(--gold-2));
  box-shadow: 0 0 12px var(--gold-glow);
}
.cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; z-index: 9998; pointer-events: none; border-radius: 50%; transform: translate(-50%, -50%); mix-blend-mode: normal; }
.cursor-dot { width: 7px; height: 7px; background: var(--gold); transition: opacity 0.2s; }
.cursor-ring { width: 34px; height: 34px; border: 1.5px solid var(--gold); opacity: 0.6; transition: width 0.22s, height 0.22s, opacity 0.22s, background 0.22s; }
.cursor-ring.hot { width: 54px; height: 54px; opacity: 1; background: var(--gold-glow); }
@media (hover: none), (pointer: coarse) { .cursor-dot, .cursor-ring { display: none; } }

/* =========================================================================
   CURSEUR VOITURE (remplace la flèche) — uniquement sur souris fine
   ========================================================================= */
@media (hover: hover) and (pointer: fine) {
  html, body,
  a, button, .btn, label, select, summary,
  .brand-cell, .brand-go, .car-card, .vid-thumb, .vid-play, .agency-go,
  .cat-chip, .pm-cell, .modal-thumbs .ph, .modal-thumbs .cp-thumb,
  [role="button"], [data-icon], .icon-btn {
    cursor: url('assets/cursor-car.png?v=4') 2 15, auto;
  }
  input, textarea { cursor: text; }
  /* le curseur voiture remplace le point/anneau dorés pour éviter le doublon */
  .cursor-dot, .cursor-ring { display: none !important; }
}

.hero-particles { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.hero-particles .pt { position: absolute; border-radius: 50%; background: var(--gold); opacity: 0; animation: drift linear infinite; }
@keyframes drift {
  0% { transform: translateY(20px) translateX(0); opacity: 0; }
  15% { opacity: 0.7; }
  85% { opacity: 0.5; }
  100% { transform: translateY(-110px) translateX(var(--dx, 10px)); opacity: 0; }
}

/* Pagination */
.pager { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 34px; flex-wrap: wrap; }
.pager button { min-width: 42px; height: 42px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); font-family: var(--font-display); font-weight: 600; font-size: 14px; transition: all 0.2s; }
.pager button:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.pager button.active { background: var(--gold); color: #1a1407; border-color: var(--gold); }
.pager button:disabled { opacity: 0.4; cursor: not-allowed; }
.pager .pg-ell { color: var(--muted); padding: 0 4px; }

/* Icônes réservées au propriétaire : masquées pour les visiteurs (mode nuit et FR/EN conservés) */
#introReplay,#photoMgrBtn,#soundToggle,.bg-uploader,.brand-logo-edit{display:none !important}
html.sja-owner #photoMgrBtn,html.sja-owner .bg-uploader{display:flex !important}
html.sja-owner .brand-logo-edit{display:grid !important}