/* Catalogue public — spécifique (esthétique Sensity) */
.section { scroll-margin-top: 110px; }

/* ---------- Hero « fiche technique » : photo assombrie, titre + faits, véhicule détouré + spec sheet, ticker ---------- */
.hero { position: relative; min-height: clamp(680px, 100vh, 920px); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; align-items: center; padding: 132px 0 0; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; filter: brightness(.42) saturate(.6); transform: scale(1.02); }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, #0a0a0a 0%, #0a0a0a99 30%, #0a0a0a66 60%, #0a0a0a 100%), linear-gradient(100deg, #0a0a0ad9 0%, #0a0a0a55 45%, transparent 70%); }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 72px); align-items: center; padding-bottom: 40px; }
.hero-enter { opacity: 0; transform: translateY(14px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); transition-delay: var(--d, 0s); }
.hero.in .hero-enter { opacity: 1; transform: none; }

.hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 6px 12px 6px 8px; border-radius: 9999px; border: 1px solid var(--line-1); background: rgba(0,0,0,.45); backdrop-filter: blur(8px); font: 500 11.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-meta); }
.hero-eyebrow .live { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 0 3px rgba(227,18,31,.25), 0 0 12px var(--accent-2); animation: blink 1.8s infinite; }
@keyframes blink { 50% { opacity: .35; } }
.hero-title { margin: 0 0 22px; font-size: clamp(44px, 5.6vw, 80px); font-weight: 800; line-height: .96; letter-spacing: -.045em; color: var(--ink); }
.hero-title .outline { display: block; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.85); }
.hero-lede { margin: 0 0 30px; max-width: 34rem; font-size: 16.5px; line-height: 1.65; color: var(--ink-body); }
.hero-lede strong { color: var(--neon); font-weight: 700; text-shadow: var(--neon-glow); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-actions .btn-secondary { backdrop-filter: blur(6px); }
.hero-facts { display: flex; flex-wrap: wrap; margin: 34px 0 0; padding: 0; }
.hero-facts div { padding: 0 26px 0 0; margin-right: 22px; border-right: 1px solid var(--line-1); }
.hero-facts div:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.hero-facts dt { margin: 0 0 2px; font: 500 10.5px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-meta); }
.hero-facts dd { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--neon); text-shadow: var(--neon-glow); font-variant-numeric: tabular-nums; }
.hero-facts dd small { font-size: 12px; font-weight: 500; color: var(--ink-mid); text-shadow: none; margin-left: 2px; }

/* Spotlight : véhicule détouré qui déborde au-dessus de la fiche */
.spot { position: relative; padding-top: 110px; }
.spot-media { position: absolute; top: 0; left: -6%; right: -6%; z-index: 2; aspect-ratio: 16 / 8; pointer-events: none; }
.spot-media img { position: relative; z-index: 2; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 30px 40px rgba(0,0,0,.85)) drop-shadow(0 4px 10px rgba(0,0,0,.6)); transform: translateY(-2%); transition: transform .8s cubic-bezier(.22,1,.36,1); }
.spot:hover .spot-media img { transform: translateY(-2%) translateX(-1.5%) scale(1.02); }
.spot-shadow { position: absolute; left: 12%; right: 12%; bottom: -4%; height: 22%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(0,0,0,.85), transparent 70%); filter: blur(6px); }
.spot-sheet { position: relative; z-index: 1; margin-top: calc(min(38vw, 260px) - 150px); padding: 96px 28px 26px; border-radius: 1.25rem; border: 1px solid var(--line-1); background: linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.88) 32%, rgba(10,10,10,.92) 100%); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: inset 0 1px #ffffff14, 0 40px 90px -30px #000; }
.spot-sheet::before { content: ""; position: absolute; left: 0; top: 98px; bottom: 26px; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, var(--accent-2), rgba(227,18,31,.1)); }
.spot-label { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font: 500 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-meta); }
.spot-label .tag { font: 700 11px var(--mono); padding: 2px 7px; }
.spot-name { margin: 0 0 6px; font-size: clamp(30px, 3vw, 42px); font-weight: 800; letter-spacing: -.035em; line-height: 1; color: var(--ink); }
.spot-price { display: flex; align-items: baseline; gap: 12px; margin: 0 0 18px; font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: var(--neon); text-shadow: var(--neon-glow); font-variant-numeric: tabular-nums; }
.spot-price small { font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-meta); text-shadow: none; padding: 3px 8px; border: 1px solid var(--line-1); border-radius: 4px; }
.spot-specs { margin: 0 0 20px; padding: 0; display: grid; }
.spot-specs div { display: flex; align-items: baseline; gap: 12px; padding: 8px 0; border-top: 1px dashed var(--line-1); font-size: 13.5px; }
.spot-specs div:last-child { border-bottom: 1px dashed var(--line-1); }
.spot-specs dt { flex: none; color: var(--ink-meta); }
.spot-specs dd { margin: 0 0 0 auto; text-align: right; color: var(--ink-hi); font-weight: 500; }
.spot-specs dd.mono { font-size: 12.5px; }
.spot-specs .stars { font-size: 13px; margin-right: 6px; }
.spot-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.spot-more { font-size: 13px; color: var(--ink-mid); }
.spot-more:hover { color: var(--ink-hi); }

/* Ticker : bandeau défilant en bas du hero */
.ticker { position: relative; z-index: 1; grid-row: 2; border-top: 1px solid var(--line-1); border-bottom: 1px solid var(--line-0); background: rgba(10,10,10,.6); backdrop-filter: blur(10px); overflow: hidden; height: 44px; display: flex; align-items: center; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ticker-track { display: flex; white-space: nowrap; width: max-content; animation: ticker 120s linear infinite; will-change: transform; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }
.ticker-item { display: inline-flex; align-items: center; gap: 12px; padding: 0 22px; font: 500 12px var(--mono); letter-spacing: .04em; color: var(--ink-mid); }
.ticker-item b { color: var(--neon); font-weight: 600; text-shadow: 0 0 6px rgba(255,255,255,.45); }
.ticker-item i { font-style: normal; color: var(--ink-decor); text-transform: uppercase; font-size: 10.5px; letter-spacing: .12em; }
.ticker-item::after { content: "◆"; margin-left: 22px; font-size: 7px; color: var(--accent-2); }
@media (max-width: 1100px) {
  .hero { min-height: 0; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .spot { max-width: 560px; }
  .spot-media { left: 0; right: 0; }
}
@media (max-width: 560px) { .hero-facts div { padding-right: 14px; margin-right: 12px; } .hero-facts dd { font-size: 18px; } .spot-sheet { padding: 110px 20px 22px; } }

/* ---------- Grille coups de cœur : cartes 3 colonnes ---------- */
.rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1000px) { .rail { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .rail { grid-template-columns: 1fr; } }
.rail-empty { margin: 0; padding: 24px; color: var(--ink-meta); font-size: 14px; border: 1px dashed var(--line-1); border-radius: 1rem; grid-column: 1 / -1; }
.rank { position: absolute; top: 12px; left: 12px; z-index: 3; background: var(--accent-2); border-color: var(--accent-2); color: #fff; }

/* ---------- Catalogue : colonne catégories + grille ---------- */
.cat-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; align-items: start; }
.cat-side { position: sticky; top: 32px; }
.cat-side-title { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line-1); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-strong); }
.cat-side-title span { font: 500 11px var(--mono); color: var(--ink-decor); }
.cats { display: grid; gap: 2px; }
.cats .chip { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border: 1px solid transparent; border-radius: var(--r-sm); background: transparent; color: var(--ink-nav); font-size: 14px; font-weight: 500; cursor: pointer; transition: all var(--fast); text-align: left; }
.cats .chip small { font: 500 11px var(--mono); color: var(--ink-mid); }
.cats .chip[aria-selected="true"] small { color: var(--neon); text-shadow: 0 0 6px rgba(255,255,255,.5); }
.cats .chip:hover { color: var(--ink-hi); border-color: var(--line-2); background: var(--hover); }
.cats .chip[aria-selected="true"] { color: var(--ink); background: var(--surface-1); border-color: var(--line-1); font-weight: 600; }
.cats .chip[aria-selected="true"]::before { content: ""; position: absolute; left: -1px; top: 8px; bottom: 8px; width: 2px; border-radius: 9999px; background: var(--fil); box-shadow: var(--fil-bloom); }
.cat-main { min-width: 0; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.filters .input kbd { margin-left: auto; }
.grid-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.grid-head h3 { margin: 0; font-size: 18px; font-weight: 600; color: var(--ink-hi); }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1100px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .grid { grid-template-columns: 1fr; } }
.more-wrap { display: flex; justify-content: center; margin-top: 28px; }
.empty { grid-column: 1 / -1; padding: 56px 20px; text-align: center; color: var(--ink-meta); border: 1px dashed var(--line-1); border-radius: 1rem; }
.empty b { display: block; color: var(--ink-hi); font-size: 18px; font-weight: 600; margin-bottom: 4px; }
@media (max-width: 900px) {
  .cat-layout { grid-template-columns: 1fr; gap: 16px; }
  .cat-side { position: static; }
  .cat-side-title { display: none; }
  .cats { display: flex; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; gap: 8px; }
  .cats .chip { flex: none; border-color: var(--line-1); background: var(--surface-1); padding: 8px 14px; }
  .cats .chip[aria-selected="true"] { background: var(--invert); border-color: var(--invert); color: var(--on-invert); }
  .cats .chip[aria-selected="true"]::before { display: none; }
  .cats .chip[aria-selected="true"] small { color: var(--on-invert); opacity: .6; }
}

/* ---------- Carte véhicule (s-card) : image 16:9, nom, prix, note, bouton ---------- */
.vcard { display: flex; flex-direction: column; cursor: pointer; outline: none; animation: rise .5s both; text-align: left; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.vcard:focus-visible { border-color: var(--line-edge-hi); }
.vcard-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid var(--line-0); background: radial-gradient(ellipse at 50% 70%, #1a1a1a 0%, #0d0d0d 70%); }
.vcard-media img { width: 100%; height: 100%; object-fit: contain; object-position: center 62%; padding: 6% 5% 2%; transition: transform .5s; filter: drop-shadow(0 14px 18px rgba(0,0,0,.7)); }
.vcard:hover .vcard-media img { transform: scale(1.03); }
.vcard-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, #00000073, transparent 50%); }
.vcard-cat { position: absolute; top: 12px; right: 12px; z-index: 2; }
.vcard-body { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 18px; }
.vcard-top { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.vcard-avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-1); background: var(--surface-1); display: grid; place-items: center; font: 700 11px var(--mono); color: var(--ink-meta); letter-spacing: .02em; }
.vcard-name { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vcard-model { display: block; font: 500 11px var(--mono); color: var(--ink-decor); margin-top: 1px; }
.vcard-desc { margin: 0 0 14px; font-size: 13px; line-height: 1.6; color: var(--ink-mid); }
.vcard-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-0); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vcard-price { font-size: 17px; font-weight: 700; color: var(--neon); text-shadow: var(--neon-glow); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.vcard-price small { display: block; font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-decor); text-shadow: none; }
.vcard-stars { font-size: 12px; color: var(--neon); text-shadow: 0 0 6px rgba(255,255,255,.5); display: inline-flex; align-items: center; gap: 6px; }
.vcard .btn { margin-top: 14px; width: 100%; }

/* ---------- Infos : 3 cartes ---------- */
.info-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .info-list { grid-template-columns: 1fr; } }
.info-row { padding: 22px 24px; display: grid; gap: 8px; }
.info-row .n { font: 500 11px var(--mono); color: var(--ink-decor); letter-spacing: .1em; }
.info-row h3 { margin: 0; font-size: 16px; font-weight: 600; color: var(--ink-hi); }
.info-row p { margin: 0; color: var(--ink-mid); font-size: 13.5px; line-height: 1.6; }

/* ---------- Fiche véhicule ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; }
.modal-backdrop { position: absolute; inset: 0; background: radial-gradient(800px 500px at 50% 40%, rgba(227,18,31,.10), transparent 60%), rgba(0,0,0,0.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: fade-in .4s ease both; }
@keyframes fade-in { from { opacity: 0; } }
.modal-card { position: relative; width: min(960px, 100%); max-height: 92vh; overflow: auto; display: grid; grid-template-columns: 1.2fr 1fr; border-radius: 1rem; background: #0e0e0e; border: 1px solid var(--line-1); box-shadow: inset 0 1px #ffffff0f, 0 40px 80px -30px #000; animation: pop .65s cubic-bezier(.34,1.25,.5,1) both; }
@keyframes pop { from { opacity: 0; transform: translateY(36px) scale(.92); filter: blur(8px); } 60% { filter: blur(0); } to { opacity: 1; transform: none; filter: blur(0); } }
.modal-media img { animation: slide-media .8s cubic-bezier(.22,1,.36,1) .1s both; }
@keyframes slide-media { from { opacity: 0; transform: translateX(-24px) scale(1.04); } }
.modal-body > * { animation: rise-in .6s cubic-bezier(.22,1,.36,1) both; }
.modal-body > :nth-child(1) { animation-delay: .18s; } .modal-body > :nth-child(2) { animation-delay: .24s; } .modal-body > :nth-child(3) { animation-delay: .30s; } .modal-body > :nth-child(4) { animation-delay: .36s; } .modal-body > :nth-child(5) { animation-delay: .42s; } .modal-body > :nth-child(6) { animation-delay: .48s; } .modal-body > :nth-child(7) { animation-delay: .54s; }
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); } }
/* fermeture */
.modal.closing .modal-backdrop { animation: fade-out .3s ease both; }
.modal.closing .modal-card { animation: pop-out .3s cubic-bezier(.4,0,.8,.4) both; }
.modal.closing .modal-media img, .modal.closing .modal-body > * { animation: none; }
@keyframes fade-out { to { opacity: 0; } }
@keyframes pop-out { to { opacity: 0; transform: translateY(20px) scale(.95); filter: blur(6px); } }
.modal-close { position: absolute; top: 12px; right: 12px; z-index: 3; width: 34px; height: 34px; border-radius: var(--r-sm); border: 1px solid var(--line-1); background: rgba(0,0,0,0.7); color: #fff; font-size: 20px; cursor: pointer; display: grid; place-items: center; line-height: 1; }
.modal-media { background: #0a0a0a; min-height: 260px; display: grid; place-items: center; border-right: 1px solid var(--line-0); }
.modal-media img { width: 100%; height: 100%; object-fit: contain; }
.modal-body { padding: 30px 32px; }
.modal-body .sec-label { margin-bottom: 10px; }
.modal-body h2 { margin: 0 0 6px; font-size: 30px; font-weight: 700; letter-spacing: -.02em; color: var(--ink-hi); line-height: 1.1; }
.modal-price { margin: 0 0 12px; font-size: 24px; font-weight: 700; color: var(--neon); text-shadow: var(--neon-glow); font-variant-numeric: tabular-nums; }
.modal-price small { text-shadow: none; font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-decor); margin-left: 8px; }
.modal-rating { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; color: var(--ink-meta); font-size: 13px; }
.modal-rating .stars { font-size: 15px; }
.specs { margin: 0 0 18px; padding: 0; border-top: 1px solid var(--line-0); }
.specs div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-0); font-size: 14px; }
.specs dt { color: var(--ink-meta); }
.specs dd { margin: 0; font: 500 12.5px var(--mono); color: var(--ink-hi); }
.modal-note { margin: 0 0 16px; color: var(--ink-meta); font-size: 13px; }
@media (max-width: 760px) { .modal-card { grid-template-columns: 1fr; } .modal-media { border-right: 0; border-bottom: 1px solid var(--line-0); } }

/* Barre latérale escamotable (desktop) : plus de barre haute, le hero remonte */
@media (min-width: 1041px) {
  .hero { padding-top: 88px; min-height: clamp(640px, 100vh, 900px); }
}

/* ---------- Logo PDM flouté derrière les véhicules (PNG transparents) ---------- */
.vcard-media::before, .modal-media::before, .spot-media::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url(/assets/logo.png) no-repeat center 40% / 78% auto;
  filter: blur(3px) saturate(.9); opacity: .5;
  transform: scale(1.02);
  transition: opacity .4s ease, filter .4s ease, transform .6s cubic-bezier(.22,1,.36,1);
}
.vcard-media img { position: relative; z-index: 1; }
.vcard:hover .vcard-media::before { opacity: .65; filter: blur(2px); transform: scale(1.06); }
.modal-media { position: relative; overflow: hidden; }
.modal-media::before { background-size: 70% auto; background-position: center 42%; opacity: .5; filter: blur(4px); animation: fade-in .6s ease .1s both; }
.modal-media img { position: relative; z-index: 1; }
.spot-media::before { inset: 6% 8% 14% 8%; background-size: 70% auto; background-position: center 60%; opacity: .28; filter: blur(5px); }