* { box-sizing: border-box; }
body { margin: 0; background: oklch(99% 0.005 330); font-family: 'Inter', sans-serif; color: oklch(26% 0.08 320); }
a { color: inherit; }
.display { font-family: 'Anton', sans-serif; }

/* ---- Header ---- */
.site-header { position: sticky; top: 0; z-index: 60; background: oklch(100% 0 0 / 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid oklch(88% 0.04 330); }
.header-inner { display: flex; align-items: center; justify-content: space-between; max-width: 1200px; margin: 0 auto; padding: 10px 20px; gap: 16px; }
.logo { display: flex; align-items: center; flex-shrink: 0; }
.logo img { height: 56px; width: auto; display: block; mix-blend-mode: multiply; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.reserve-btn { background: linear-gradient(100deg, oklch(52% 0.22 320), oklch(50% 0.26 340)); color: #fff; font-weight: 700; font-size: 15px; padding: 13px 24px; border-radius: 999px; text-decoration: none; box-shadow: 0 6px 18px oklch(50% 0.26 340 / 0.3); white-space: nowrap; }
.menu-btn { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid oklch(88% 0.04 330); background: #fff; font-size: 18px; color: oklch(30% 0.1 320); cursor: pointer; }
.mobile-nav { display: flex; flex-direction: column; padding: 6px 20px 20px; gap: 0; border-top: 1px solid oklch(92% 0.03 330); background: #fff; }
.mobile-nav[hidden] { display: none; }
.mobile-nav a { text-decoration: none; font-weight: 600; font-size: 16px; color: oklch(30% 0.1 320); padding: 12px 0; border-top: 1px solid oklch(95% 0.02 330); }
.mobile-nav a:first-child { border-top: none; }
.mobile-nav a.active { color: oklch(48% 0.24 330); }

.desktop-nav { display: none; align-items: center; gap: 34px; margin-right: 10px; }
.desktop-nav a { text-decoration: none; font-weight: 600; font-size: 16px; color: oklch(38% 0.06 320); white-space: nowrap; }
.desktop-nav a.active { color: oklch(48% 0.24 330); }

@media (min-width: 981px) {
  .desktop-nav { display: flex; }
  .menu-btn { display: none; }
}
@media (max-width: 980px) {
  .reserve-btn { display: none; }
}

/* ---- Footer ---- */
.site-footer { background: oklch(24% 0.09 320); color: oklch(97% 0.01 330); padding: 52px 20px 26px; position: relative; overflow: hidden; }
.site-footer::before { content: ''; position: absolute; inset: 0; background: radial-gradient(600px 240px at 88% 0%, oklch(50% 0.26 340 / 0.45), transparent 70%), radial-gradient(420px 220px at 5% 110%, oklch(72% 0.16 65 / 0.28), transparent 70%); pointer-events: none; }
.footer-inner { position: relative; max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 36px; justify-content: space-between; }
.footer-brand { max-width: 320px; }
.footer-brand img { height: 48px; width: auto; display: block; border-radius: 8px; background: #fff; padding: 4px 8px; }
.footer-brand p { font-size: 14px; line-height: 1.7; opacity: 0.8; margin: 16px 0 0; }
.footer-cols { display: flex; gap: 44px; flex-wrap: wrap; }
.footer-col .heading { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: oklch(78% 0.14 65); margin-bottom: 14px; }
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a { color: oklch(97% 0.01 330); text-decoration: none; font-size: 14px; }
.footer-pickup { font-size: 14px; line-height: 1.9; opacity: 0.9; }
.footer-bottom { position: relative; max-width: 1200px; margin: 36px auto 0; padding-top: 18px; border-top: 1px solid oklch(97% 0.01 330 / 0.16); font-size: 12px; opacity: 0.55; }
.footer-bottom a { color: inherit; text-decoration: underline; }

/* ---- Date selector ---- */
.date-selector.variant-hero { background: #fff; border-radius: 22px; padding: 24px; box-shadow: 0 24px 60px oklch(24% 0.09 320 / 0.28), 0 2px 0 oklch(100% 0 0 / 0.6) inset; }
.date-selector.variant-compact { background: #fff; border-radius: 16px; padding: 18px; box-shadow: 0 8px 26px oklch(24% 0.09 320 / 0.1); border: 1px solid oklch(92% 0.03 330); }
.date-selector-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.date-field { display: flex; flex-direction: column; gap: 7px; flex: 2; min-width: 190px; }
.date-field span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: oklch(48% 0.24 330); }
.date-time-group { display: flex; gap: 8px; }
.date-field input { font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 500; padding: 13px 12px; border-radius: 12px; border: 1.5px solid oklch(88% 0.04 330); background: oklch(99% 0.005 330); color: oklch(26% 0.08 320); min-width: 0; }
.date-time-group input[type="date"] { flex: 1.5; }
.date-time-group input[type="time"] { flex: 1; padding: 13px 10px; }
.date-search-btn { flex: 0 0 auto; background: linear-gradient(100deg, oklch(52% 0.22 320), oklch(50% 0.26 340)); color: #fff; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 15px; padding: 15px 26px; border-radius: 12px; border: none; cursor: pointer; white-space: nowrap; box-shadow: 0 8px 22px oklch(50% 0.26 340 / 0.34); }
.date-days-label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: oklch(45% 0.06 320); margin-top: 12px; }
.date-days-label:empty { display: none; }
.date-days-label::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: oklch(72% 0.16 65); flex-shrink: 0; }

@media (max-width: 560px) {
  .date-field { flex-basis: 100%; min-width: 0; }
  .date-search-btn { flex-basis: 100%; }
}

/* ---- Vehicle card ---- */
.vehicle-card { display: flex; flex-direction: column; text-decoration: none; color: oklch(26% 0.08 320); background: #fff; border: 1px solid oklch(93% 0.02 330); border-radius: 20px; overflow: hidden; box-shadow: 0 4px 18px oklch(24% 0.09 320 / 0.08); transition: transform 0.18s ease, box-shadow 0.18s ease; }
.vehicle-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px oklch(50% 0.26 340 / 0.2); }
.vehicle-card-photo { position: relative; aspect-ratio: 4 / 3; background: linear-gradient(150deg, oklch(94% 0.04 330), oklch(90% 0.06 300)); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.vehicle-card-photo span { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; color: oklch(52% 0.06 320); text-align: center; padding: 0 14px; opacity: 0.8; }
.vehicle-card-photo img { width: 100%; height: 100%; object-fit: cover; }
.vehicle-card-year { position: absolute; top: 12px; left: 12px; background: oklch(72% 0.16 65); color: oklch(22% 0.06 60); font-weight: 700; font-size: 12px; padding: 5px 11px; border-radius: 999px; }
.vehicle-card-body { padding: 16px 17px 17px; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.vehicle-card-name { font-family: 'Anton', sans-serif; font-size: 20px; letter-spacing: 0.2px; }
.vehicle-card-badges { display: flex; gap: 6px; row-gap: 7px; flex-wrap: wrap; }
.vehicle-card-badges .badge { background: oklch(96% 0.02 330); color: oklch(40% 0.07 320); border: none; border-radius: 8px; padding: 5px 9px; font-size: 11.5px; font-weight: 600; }
.vehicle-card-badges .badge.clim { background: oklch(94% 0.06 330); color: oklch(45% 0.2 330); }
.vehicle-card-footer { margin-top: auto; padding-top: 10px; border-top: 1px solid oklch(95% 0.02 330); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vehicle-card-price { display: flex; align-items: baseline; gap: 3px; }
.vehicle-card-price .amount { font-family: 'Anton', sans-serif; font-size: 25px; color: oklch(48% 0.24 330); }
.vehicle-card-price .unit { font-size: 12px; font-weight: 600; color: oklch(55% 0.04 320); }
.vehicle-card-cta { background: oklch(96% 0.02 330); color: oklch(48% 0.24 330); font-weight: 700; font-size: 13px; padding: 9px 15px; border-radius: 999px; border: none; white-space: nowrap; }

/* ---- Page hero (inner pages: conditions, contact, mentions légales) ---- */
.page-hero { position: relative; background: linear-gradient(150deg,oklch(30% 0.12 315),oklch(44% 0.24 340)); color: #fff; padding: 40px 20px; overflow: hidden; }
.page-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(400px 220px at 92% 4%,oklch(72% 0.16 65 / 0.4),transparent 68%); pointer-events: none; }
.page-hero-inner { position: relative; max-width: 960px; margin: 0 auto; }
.page-hero .title { font-family: 'Anton', sans-serif; font-size: clamp(28px,5vw,42px); line-height: 1.05; }
.page-hero .subtitle { font-family: 'Inter', sans-serif; font-size: 15.5px; opacity: 0.88; margin: 12px 0 0; max-width: 520px; line-height: 1.6; }

/* ---- WhatsApp gradient CTA box (conditions, etc.) ---- */
.wa-gradient-box { position: relative; overflow: hidden; border-radius: 22px; background: linear-gradient(110deg,oklch(30% 0.12 315),oklch(46% 0.25 340)); color: #fff; padding: 30px 28px; font-family: 'Inter', sans-serif; }
.wa-gradient-box::before { content: ''; position: absolute; inset: 0; background: radial-gradient(320px 180px at 92% 110%,oklch(72% 0.16 65 / 0.4),transparent 70%); pointer-events: none; }
.wa-gradient-box .title { position: relative; font-family: 'Anton', sans-serif; font-size: 22px; margin-bottom: 9px; }
.wa-gradient-box p { position: relative; margin: 0 0 20px; font-size: 15px; line-height: 1.65; opacity: 0.9; }
.wa-gradient-box .wa-btn-white { position: relative; display: inline-block; background: #fff; color: oklch(42% 0.22 335); font-weight: 700; font-size: 14.5px; padding: 14px 26px; border-radius: 999px; text-decoration: none; }

/* ---- Curseur personnalisé ---- */
@media (hover: hover) and (pointer: fine) {
  .has-custom-cursor, .has-custom-cursor a, .has-custom-cursor button { cursor: none; }
  .cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; border-radius: 50%; opacity: 0; transition: opacity 0.2s ease; }
  .cursor-dot { width: 6px; height: 6px; background: oklch(50% 0.26 340); }
  .cursor-ring { width: 30px; height: 30px; border: 1.5px solid oklch(50% 0.26 340 / 0.55); transition: width 0.15s ease, height 0.15s ease, border-color 0.15s ease, background 0.15s ease, opacity 0.2s ease; }
  .cursor-ring.is-active { width: 46px; height: 46px; border-color: oklch(50% 0.26 340 / 0.9); background: oklch(50% 0.26 340 / 0.08); }
  .cursor-dot.is-visible, .cursor-ring.is-visible { opacity: 1; }
}