/* =========================================================
   RR LOCATION — Renault Clio 5, Longwy
   ========================================================= */

:root{
  --bg:#0b0b0d;
  --bg-soft:#131318;
  --card:#18181e;
  --card-line: rgba(255,255,255,.08);
  --red:#e2141f;
  --red-dim:#8f0f18;
  --text:#f5f3ee;
  --text-dim:#a3a3ab;
  --text-faint:#6b6b73;
  --radius:18px;
  --ease: cubic-bezier(.22,1,.36,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter', sans-serif;
  line-height:1.6;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; }
button{ font-family:inherit; border:none; background:none; color:inherit; }
input{ font-family:inherit; }

.wrap{ width:90%; max-width:1240px; margin:0 auto; }

h1,h2,h3{ font-family:'Space Grotesk', sans-serif; font-weight:600; }

/* ---------- starfield signature (clin d'œil au ciel étoilé de l'habitacle) ---------- */
.starfield{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(1.5px 1.5px at 10% 20%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 80% 10%, #fff, transparent),
    radial-gradient(2px 2px at 25% 70%, var(--red), transparent),
    radial-gradient(1.5px 1.5px at 60% 40%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 90% 80%, #fff, transparent),
    radial-gradient(2px 2px at 45% 15%, #5a7fff, transparent),
    radial-gradient(1.5px 1.5px at 15% 90%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 70% 60%, #fff, transparent),
    radial-gradient(2px 2px at 35% 45%, var(--red), transparent),
    radial-gradient(1.5px 1.5px at 95% 30%, #fff, transparent);
  background-repeat: repeat;
  background-size: 700px 700px;
  opacity:.5;
  animation: twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle{ from{ opacity:.35; } to{ opacity:.65; } }

/* ---------- header ---------- */
#header{
  position:fixed; top:0; left:0; width:100%; z-index:1000;
  padding:20px 0;
  transition: all .3s var(--ease);
}
#header.scrolled{
  background: rgba(11,11,13,.85);
  backdrop-filter: blur(14px);
  padding:12px 0;
  border-bottom:1px solid var(--card-line);
}
#header .wrap{ display:flex; align-items:center; justify-content:space-between; }

.logo{ display:flex; align-items:center; gap:10px; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:20px; letter-spacing:.02em; }
.logo-mark{ width:34px; height:34px; object-fit:contain; }
.logo em{ font-style:normal; color:var(--red); }

#nav{ display:flex; gap:34px; }
#nav a{ font-size:15px; font-weight:500; color:var(--text-dim); transition:color .25s; position:relative; }
#nav a:hover{ color:var(--text); }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:13px 26px; border-radius:999px; font-weight:600; font-size:15px;
  transition: all .3s var(--ease); cursor:pointer; white-space:nowrap;
}
.btn-accent{ background:var(--red); color:#fff; }
.btn-accent:hover{ background:#fff; color:var(--red); transform:translateY(-2px); }
.btn-ghost{ border:1px solid var(--card-line); color:var(--text); }
.btn-ghost:hover{ border-color:var(--text-dim); background:rgba(255,255,255,.04); }

.header-cta{ padding:11px 24px; font-size:14px; }

#burger{ display:none; flex-direction:column; gap:5px; cursor:pointer; }
#burger span{ width:24px; height:2px; background:var(--text); }

/* ---------- eyebrow / section head ---------- */
.eyebrow{
  display:flex; align-items:center; gap:8px;
  font-family:'Space Mono', monospace; font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--red); margin-bottom:16px;
}
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--red); box-shadow:0 0 8px var(--red); }
.section-head{ max-width:640px; margin-bottom:56px; }
.section-head h2{ font-size:clamp(28px,4vw,42px); line-height:1.15; }
.section-sub{ margin-top:14px; color:var(--text-dim); font-size:16px; }
.year{ color:var(--text-dim); font-weight:400; }

.section{ position:relative; z-index:1; padding:110px 0; }
.section-dark{ background:var(--bg-soft); }

/* ---------- hero ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  overflow:hidden;
}
.hero-media{ position:absolute; inset:0; z-index:0; background:radial-gradient(ellipse at 68% 55%, #1c2230 0%, #0b0b0d 68%); }
.hero-media img{ width:100%; height:100%; object-fit:cover; }
#carCanvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.hero-fade{
  position:absolute; inset:0;
  background:
    linear-gradient(0deg, var(--bg) 0%, rgba(11,11,13,.55) 45%, rgba(11,11,13,.25) 65%, rgba(11,11,13,.55) 100%),
    linear-gradient(90deg, rgba(11,11,13,.35) 0%, transparent 45%);
}
.hero-content{ position:relative; z-index:1; width:90%; max-width:1240px; margin:0 auto; padding-bottom:90px; }
.hero h1{ font-size:clamp(38px,6vw,68px); line-height:1.04; margin-bottom:22px; max-width:720px; }
.hero-text{ max-width:520px; color:var(--text-dim); font-size:17px; margin-bottom:34px; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }

.scroll-cue{
  position:absolute; z-index:1; bottom:28px; left:50%; transform:translateX(-50%);
  width:38px; height:38px; border:1px solid var(--card-line); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--text-dim);
  animation: bob 2.2s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,6px); } }

/* ---------- strip ---------- */
.strip{ position:relative; z-index:1; padding:28px 0; border-bottom:1px solid var(--card-line); background:var(--bg); }
.strip-grid{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px; }
.strip-grid div{ display:flex; align-items:center; gap:10px; color:var(--text-dim); font-size:14px; }
.strip-grid i{ color:var(--red); font-size:16px; }

/* ---------- vehicule ---------- */
.vehicle-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:56px; align-items:start; }

.gallery-main{ position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; }
.gallery-main img{ width:100%; height:100%; object-fit:cover; }
.gallery-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%; border:none; background:rgba(10,10,12,.55); color:#fff; font-size:16px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s; backdrop-filter:blur(2px); }
.gallery-arrow:hover{ background:var(--red); }
.gallery-prev{ left:14px; }
.gallery-next{ right:14px; }
.gallery-thumbs{ display:flex; gap:12px; margin-top:12px; }
.thumb{ flex:1; border-radius:10px; overflow:hidden; aspect-ratio:1.4; opacity:.5; border:1px solid transparent; transition:all .25s; cursor:pointer; }
.thumb img{ width:100%; height:100%; object-fit:cover; }
.thumb.active, .thumb:hover{ opacity:1; border-color:var(--red); }

.vehicle-dash{ background:var(--card); border:1px solid var(--card-line); border-radius:var(--radius); padding:36px; }
.dash-label{ font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); margin-bottom:20px; }
.dash-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:32px; }
.dash-grid li{ text-align:center; padding:16px 6px; border:1px solid var(--card-line); border-radius:12px; }
.dash-num{ display:block; font-family:'Space Mono',monospace; font-size:26px; font-weight:700; color:var(--red); }
.dash-unit{ font-family:'Space Mono',monospace; font-size:13px; color:var(--text-dim); }
.dash-grid small{ display:block; margin-top:6px; font-size:11px; color:var(--text-faint); }

.feature-list li{ display:flex; align-items:center; gap:12px; padding:13px 0; border-top:1px solid var(--card-line); font-size:15px; }
.feature-list li:first-child{ border-top:none; }
.feature-list i{ color:var(--red); width:18px; text-align:center; }

/* ---------- tarifs ---------- */
.price-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-bottom:40px; }
.price-card{
  background:var(--card); border:1px solid var(--card-line); border-radius:var(--radius);
  padding:36px 30px; text-align:center; position:relative; transition:transform .3s var(--ease);
}
.price-card:hover{ transform:translateY(-6px); }
.price-card.featured{ background:linear-gradient(160deg, var(--red-dim), var(--card) 60%); border-color:var(--red); }
.price-tag{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--red); color:#fff; font-size:12px; padding:5px 14px; border-radius:999px; font-weight:600; }
.price-name{ color:var(--text-dim); font-size:15px; margin-bottom:14px; }
.price-amount{ font-family:'Space Mono',monospace; font-size:44px; font-weight:700; margin-bottom:10px; }
.price-amount small{ font-size:15px; color:var(--text-dim); font-weight:400; margin-left:4px; }
.price-note{ font-size:13px; color:var(--text-faint); }

.price-footnote{ display:flex; justify-content:center; gap:40px; flex-wrap:wrap; color:var(--text-dim); font-size:14px; }
.price-footnote i{ color:var(--red); margin-right:8px; }

/* ---------- reservation / calendar ---------- */
.booking-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:start; }

.calendar-card{ background:var(--card); border:1px solid var(--card-line); border-radius:var(--radius); padding:28px; }
.calendar-nav{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.calendar-nav button{ width:34px; height:34px; border:1px solid var(--card-line); border-radius:50%; cursor:pointer; color:var(--text); }
.calendar-nav button:hover{ border-color:var(--red); color:var(--red); }
#calendarLabel{ font-family:'Space Grotesk',sans-serif; font-weight:600; text-transform:capitalize; }

.calendar-weekdays{ display:grid; grid-template-columns:repeat(7,1fr); text-align:center; font-size:12px; color:var(--text-faint); margin-bottom:8px; }
.calendar-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal-day{
  aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  border-radius:8px; font-size:14px; cursor:pointer; color:var(--text-dim);
  transition: all .2s;
}
.cal-day:hover:not(.disabled):not(.booked){ background:rgba(255,255,255,.06); color:var(--text); }
.cal-day.empty{ visibility:hidden; }
.cal-day.disabled{ color:var(--text-faint); opacity:.3; cursor:not-allowed; }
.cal-day.booked{ color:var(--text-faint); text-decoration:line-through; cursor:not-allowed; opacity:.5; }
.cal-day.selected{ background:var(--red); color:#fff; font-weight:600; }
.cal-day.in-range{ background:rgba(226,20,31,.22); color:var(--text); }
.cal-day.today{ box-shadow:inset 0 0 0 1px var(--text-faint); }

.calendar-legend{ display:flex; gap:20px; margin-top:18px; font-size:13px; color:var(--text-dim); }
.legend-dot{ display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:6px; }
.legend-selected{ background:var(--red); }
.legend-booked{ background:var(--text-faint); }

.booking-form{ background:var(--card); border:1px solid var(--card-line); border-radius:var(--radius); padding:28px; display:flex; flex-direction:column; gap:16px; }
.booking-summary{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.booking-summary i{ color:var(--text-faint); }
.bs-label{ font-size:12px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px; }
.bs-value{ font-family:'Space Mono',monospace; font-size:16px; }

.booking-total{
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 0; border-top:1px solid var(--card-line); border-bottom:1px solid var(--card-line);
  font-family:'Space Mono',monospace;
}
#totalLabel{ font-size:24px; font-weight:700; color:var(--red); }

.booking-form label{ font-size:13px; color:var(--text-dim); display:flex; flex-direction:column; gap:6px; }
.booking-form input{
  background:var(--bg); border:1px solid var(--card-line); border-radius:10px; padding:12px 14px;
  color:var(--text); font-size:15px; outline:none;
}
.booking-form input:focus{ border-color:var(--red); }
.booking-hint{ font-size:12px; color:var(--text-faint); text-align:center; }

/* ---------- conditions ---------- */
.conditions-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.cond-card{ background:var(--card); border:1px solid var(--card-line); border-radius:var(--radius); padding:28px 24px; }
.cond-card i{ color:var(--red); font-size:22px; margin-bottom:16px; display:block; }
.cond-card h3{ font-size:17px; margin-bottom:10px; }
.cond-card p{ font-size:14px; color:var(--text-dim); }

/* ---------- contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.contact-list{ margin-top:32px; display:flex; flex-direction:column; gap:14px; }
.contact-item{
  display:flex; align-items:center; gap:16px; padding:18px 20px;
  background:var(--card); border:1px solid var(--card-line); border-radius:14px;
  transition:border-color .25s;
}
.contact-item:not(.no-link):hover{ border-color:var(--red); }
.contact-item i{ font-size:20px; color:var(--red); width:22px; text-align:center; }
.contact-item span{ display:block; font-size:12px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.05em; }
.contact-item strong{ font-size:16px; font-weight:600; }

.map-frame{ border-radius:var(--radius); overflow:hidden; aspect-ratio:1; border:1px solid var(--card-line); }

/* ---------- footer ---------- */
footer{ position:relative; z-index:1; padding:50px 0 26px; border-top:1px solid var(--card-line); }
.footer-grid{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px; }
.footer-brand{ display:flex; align-items:center; gap:14px; }
.footer-sticker{ width:46px; height:46px; object-fit:contain; }
.footer-brand p{ font-family:'Space Grotesk',sans-serif; font-weight:600; }
.footer-brand span{ display:block; font-size:12px; color:var(--text-faint); font-family:'Inter',sans-serif; font-weight:400; }
.footer-links{ display:flex; gap:26px; }
.footer-links a{ color:var(--text-dim); font-size:14px; }
.footer-links a:hover{ color:var(--text); }
.footer-socials{ display:flex; gap:14px; }
.footer-socials a{ width:38px; height:38px; border:1px solid var(--card-line); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.footer-socials a:hover{ border-color:var(--red); color:var(--red); }
.footer-copy{ text-align:center; margin-top:30px; font-size:12px; color:var(--text-faint); }

/* ---------- accessibility ---------- */
a:focus-visible, button:focus-visible, input:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
  .starfield{ animation:none; }
  .scroll-cue{ animation:none; }
  *{ transition:none !important; }
}

/* ---------- responsive ---------- */
@media (max-width: 980px){
  #nav{
    display:none; position:fixed; top:64px; left:0; width:100%;
    background:rgba(11,11,13,.97); backdrop-filter:blur(14px);
    flex-direction:column; padding:20px 5%; gap:0; border-bottom:1px solid var(--card-line);
    max-height:calc(100vh - 64px); overflow-y:auto;
  }
  #nav.open{ display:flex; }
  #nav a{ padding:16px 0; border-top:1px solid var(--card-line); font-size:16px; }
  #nav a:first-child{ border-top:none; }
  #burger{ display:flex; }
  .vehicle-grid, .booking-grid, .contact-grid{ grid-template-columns:1fr; }
  .price-grid{ grid-template-columns:1fr; }
  .conditions-grid{ grid-template-columns:1fr 1fr; }
  .strip-grid{ justify-content:flex-start; }
  .map-frame{ aspect-ratio:16/9; }
  .section{ padding:80px 0; }
}
@media (max-width: 760px){
  .header-cta{ display:none; }
  .hero{ align-items:center; }
  .hero-content{ padding-bottom:0; padding-top:96px; }
  .hero-text{ font-size:15.5px; }
  .scroll-cue{ display:none; }
  .section{ padding:64px 0; }
  .section-head{ margin-bottom:36px; }
  .vehicle-dash, .booking-form, .calendar-card{ padding:20px; }
  .price-card{ padding:28px 22px; }
  .cond-card{ padding:24px 20px; }
  .gallery-arrow{ width:38px; height:38px; font-size:14px; }
  .calendar-nav button{ width:40px; height:40px; }
  .booking-form input{ padding:13px 14px; font-size:16px; }
  .footer-grid{ flex-direction:column; text-align:center; gap:22px; }
  .footer-links{ flex-wrap:wrap; justify-content:center; gap:14px 22px; }
}
@media (max-width: 560px){
  .conditions-grid{ grid-template-columns:1fr; }
  .dash-grid{ grid-template-columns:repeat(2,1fr); }
  .hero-actions{ flex-direction:column; }
  .btn{ width:100%; }
  .price-footnote{ flex-direction:column; gap:12px; align-items:center; }
  .calendar-legend{ flex-wrap:wrap; gap:12px 20px; }
  .booking-summary{ flex-wrap:wrap; }
  .contact-item{ padding:16px; }
}