/* =========================================================
   NOVA CAR IMPORT — direction « cinéma », noir & gris foncé
   Règles : aucun arrondi, rouge d'origine en accent,
   étoile du logo comme signature sous les titres.
   ========================================================= */
:root {
  --bg: #0b0b0c;          /* noir principal */
  --grey: #161618;        /* sections gris foncé (remplace le blanc) */
  --panel: #1e1f22;       /* cartes et blocs posés */
  --panel-2: #26272b;
  --line: rgba(255,255,255,0.10);
  --line-2: rgba(255,255,255,0.22);
  --text: #f2f2f2;
  --muted: #a0a0a6;
  --red: #c8102e;
  --red-dark: #9a0c22;

  --f-title: 'Bebas Neue', 'Barlow Condensed', sans-serif; /* police d'origine Nova */
  --f-text: 'Barlow', system-ui, sans-serif;         /* lecture */
  --f-label: 'Barlow Condensed', 'Barlow', sans-serif; /* boutons, menus, étiquettes */

  --max: 1280px;
  --ease: cubic-bezier(.7,0,.2,1);
  --ease-out: cubic-bezier(.2,.8,.2,1);
}

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--text); font-family:var(--f-text); font-size:17px; font-weight:400; line-height:1.75; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
img { display:block; max-width:100%; height:auto; }
a { color:inherit; }
::selection { background:var(--red); color:#fff; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline:2px solid var(--red); outline-offset:3px; }

/* ---------- Typo ---------- */
.h-title { font-family:var(--f-title); font-weight:400; text-transform:uppercase; letter-spacing:0.03em; line-height:1; font-size:clamp(2.5rem,4.8vw,4rem); }
.label { font-family:var(--f-label); font-weight:500; text-transform:uppercase; letter-spacing:0.22em; font-size:0.85rem; color:var(--red); }
.muted { color:var(--muted); }
.center { text-align:center; }

/* Signature : l'étoile du logo entre deux traits */
.mark { display:flex; align-items:center; gap:12px; margin:1.3rem 0 1.6rem; color:var(--red); }
.center .mark, .mark.c { justify-content:center; }
.mark::before, .mark::after { content:""; width:34px; height:1px; background:currentColor; opacity:.7; }
.mark svg { width:13px; height:13px; fill:currentColor; }
.mark.left::before { display:none; }

/* ---------- Mise en page ---------- */
section { position:relative; padding:8rem 2rem; }
.wrap { max-width:var(--max); margin:0 auto; }
.s-grey { background:var(--grey); }
.lead { font-size:1.08rem; color:var(--muted); max-width:620px; }
.center .lead { margin:0 auto; }

/* ---------- Boutons : rectangles, remplissage qui glisse ---------- */
.btn { position:relative; isolation:isolate; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:.6rem; padding:1.05rem 2rem; border:1px solid rgba(255,255,255,0.6); background:transparent; color:#fff; font-family:var(--f-label); font-weight:500; font-size:0.98rem; letter-spacing:0.16em; text-transform:uppercase; text-decoration:none; cursor:pointer; transition:color .45s var(--ease), border-color .45s var(--ease); }
.btn::before { content:""; position:absolute; inset:0; z-index:-1; background:#fff; transform:scaleX(0); transform-origin:right; transition:transform .5s var(--ease); }
.btn:hover::before { transform:scaleX(1); transform-origin:left; }
.btn:hover { color:var(--bg); border-color:#fff; }
.btn-red { background:var(--red); border-color:var(--red); }
.btn-red::before { background:var(--red-dark); }
.btn-red:hover { color:#fff; border-color:var(--red-dark); }
.btn .plus { font-size:1.15em; line-height:1; }

/* ---------- Barre de progression de lecture ---------- */
.progress { position:fixed; top:0; left:0; height:2px; width:100%; background:var(--red); transform-origin:left; transform:scaleX(0); z-index:300; }

/* ---------- Navigation ---------- */
.nav { position:fixed; inset:0 0 auto 0; z-index:200; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:2rem; padding:1.4rem 2.5rem; transition:background .4s, padding .4s, border-color .4s; border-bottom:1px solid transparent; }
.nav.scrolled { background:rgba(11,11,12,0.94); backdrop-filter:blur(12px); padding:.8rem 2.5rem; border-color:var(--line); }
.nav-logo img { height:50px; width:auto; transition:height .4s; }
.nav.scrolled .nav-logo img { height:42px; }
.nav-links { display:flex; justify-content:center; gap:2.4rem; list-style:none; }
.nav-links a { position:relative; font-family:var(--f-label); font-weight:500; font-size:0.95rem; letter-spacing:0.18em; text-transform:uppercase; text-decoration:none; color:rgba(255,255,255,0.85); padding:.3rem 0; transition:color .3s; }
.nav-links a::after { content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:var(--red); transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease); }
.nav-links a:hover { color:#fff; }
.nav-links a:hover::after { transform:scaleX(1); transform-origin:left; }
.nav .btn { padding:.75rem 1.4rem; font-size:0.9rem; }
.burger { display:none; width:48px; height:48px; border:1px solid var(--line-2); background:transparent; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:6px; }
.burger span { display:block; width:22px; height:1px; background:#fff; }

.menu { position:fixed; inset:0; z-index:250; background:var(--bg); display:flex; flex-direction:column; padding:1.3rem 1.5rem 2rem; clip-path:inset(0 0 100% 0); transition:clip-path .6s var(--ease); }
body.menu-open .menu { clip-path:inset(0 0 0 0); }
body.menu-open { overflow:hidden; }
.menu-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:2.5rem; }
.menu-head img { height:42px; width:auto; }
.menu-close { width:48px; height:48px; border:1px solid var(--line-2); background:transparent; color:#fff; font-size:1.2rem; cursor:pointer; }
.menu a:not(.btn) { font-family:var(--f-title); text-transform:uppercase; font-size:1.9rem; line-height:1.1; letter-spacing:.06em; text-decoration:none; padding:1.1rem 0; border-bottom:1px solid var(--line); opacity:0; transform:translateY(16px); transition:opacity .5s, transform .5s var(--ease-out); }
body.menu-open .menu a:not(.btn) { opacity:1; transform:none; }
body.menu-open .menu a:nth-of-type(2) { transition-delay:.05s; } body.menu-open .menu a:nth-of-type(3) { transition-delay:.1s; }
body.menu-open .menu a:nth-of-type(4) { transition-delay:.15s; } body.menu-open .menu a:nth-of-type(5) { transition-delay:.2s; }
body.menu-open .menu a:nth-of-type(6) { transition-delay:.25s; } body.menu-open .menu a:nth-of-type(7) { transition-delay:.3s; }
.menu .btn { margin-top:2rem; }

/* ---------- Hero ---------- */
.hero { min-height:100vh; min-height:100svh; display:flex; align-items:center; padding:9rem 2.5rem 7rem; overflow:hidden; background:#000; }
.hero-bg { position:absolute; inset:0; overflow:hidden; }
.hero-bg picture { display:block; width:100%; height:100%; }
.hero-bg img { width:100%; height:100%; object-fit:cover; object-position:center 40%; filter:brightness(.6) contrast(1.05); transform:scale(1.04); animation:kenburns 8s var(--ease-out) forwards; }
@keyframes kenburns { to { transform:scale(1); } }
.hero-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(8,8,8,.7) 0%, rgba(8,8,8,.3) 60%, rgba(8,8,8,.1) 100%), linear-gradient(180deg, rgba(0,0,0,.45) 0%, transparent 20%, transparent 75%, var(--bg) 100%); }
.hero-inner { position:relative; z-index:1; width:100%; max-width:var(--max); margin:0 auto; }
.hero .label { letter-spacing:.38em; font-size:.82rem; }
.hero h1 { font-family:var(--f-title); font-weight:400; text-transform:uppercase; letter-spacing:.02em; line-height:.92; font-size:clamp(3.6rem,10.5vw,9rem); margin-top:1.2rem; }
.line { display:block; overflow:hidden; padding-bottom:.08em; }
.line > span { display:block; transform:translateY(105%); animation:rise 1.1s var(--ease-out) forwards; }
.line:nth-child(2) > span { animation-delay:.15s; color:var(--red); }
.line:nth-child(3) > span { animation-delay:.3s; color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.45); }
@keyframes rise { to { transform:none; } }
.fade-in { opacity:0; animation:fade .7s ease forwards; }
/* Texte visible dès le premier affichage (compte pour la vitesse mesurée par Google), simple montée douce */
.rise-in { animation:riseIn .7s var(--ease-out) both; }
@keyframes riseIn { from { transform:translateY(14px); } to { transform:none; } }
@keyframes fade { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
.hero-tagline { font-family:var(--f-title); font-size:clamp(1.2rem,2.2vw,1.7rem); letter-spacing:.12em; color:rgba(255,255,255,.55); margin-top:1rem; }
.hero p.lead { color:rgba(255,255,255,.72); margin-top:1.6rem; max-width:540px; }
.hero p.lead strong { color:var(--red); font-weight:600; }
.hero-stats { display:flex; flex-wrap:wrap; gap:3.5rem; margin-top:3.5rem; }
.hero-stats b { display:block; font-family:var(--f-title); font-weight:400; font-size:2.8rem; line-height:1; }
.hero-stats b em { font-style:normal; color:var(--red); }
.hero-stats span { font-family:var(--f-label); text-transform:uppercase; letter-spacing:.2em; font-size:.8rem; color:var(--muted); }
.hero-actions { display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.4rem; }
.scroll-cue { position:absolute; bottom:2.2rem; right:2.5rem; z-index:1; display:flex; flex-direction:column; align-items:center; gap:.8rem; font-family:var(--f-label); font-size:.78rem; letter-spacing:.3em; text-transform:uppercase; color:rgba(255,255,255,.7); text-decoration:none; }
.scroll-cue i { position:relative; width:1px; height:54px; background:rgba(255,255,255,.2); overflow:hidden; }
.scroll-cue i::after { content:""; position:absolute; left:0; top:-50%; width:1px; height:50%; background:#fff; animation:cue 2s var(--ease) infinite; }
@keyframes cue { to { top:100%; } }

/* ---------- Bandeau défilant des pays ---------- */
.marquee { overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg); padding:1.4rem 0; }
.marquee-track { display:flex; width:max-content; animation:marquee 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state:paused; }
.marquee-track span { display:inline-flex; align-items:center; gap:2.2rem; padding-right:2.2rem; font-family:var(--f-title); text-transform:uppercase; font-size:clamp(1.4rem,2.4vw,2rem); letter-spacing:.08em; color:rgba(255,255,255,.55); white-space:nowrap; }
.marquee-track svg { width:12px; height:12px; fill:var(--red); }
@keyframes marquee { to { transform:translateX(-50%); } }

/* ---------- À propos : photo à gauche, texte à droite ---------- */
.about { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:5.5rem; align-items:center; }
.about-visual { position:relative; isolation:isolate; }
.about-img { position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--panel); }
.about-img img { width:100%; height:100%; object-fit:cover; }
.about-accent { position:absolute; right:-1.5rem; bottom:-1.5rem; width:60%; height:60%; border:1px solid rgba(200,16,46,.35); z-index:-1; }
.about-bar { position:absolute; top:2rem; left:-.9rem; width:3px; height:0; background:var(--red); transition:height 1.4s var(--ease) .6s; }
.about-visual.in .about-bar { height:40%; }
.about h2 .red { color:var(--red); display:block; }
.about p.text { color:var(--muted); font-size:1.05rem; }
.about p.text + p.text { margin-top:1.2rem; }
.about p.text strong { color:var(--text); font-weight:500; }
.about p.text .insta { color:var(--red); font-weight:500; }
.values { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.6rem 2rem; margin-top:2.8rem; }
.value { border-left:2px solid var(--red); padding-left:1.2rem; }
.value h3 { font-family:var(--f-title); font-weight:400; text-transform:uppercase; font-size:1.45rem; letter-spacing:.04em; line-height:1.1; }
.value p { color:var(--muted); font-size:.95rem; margin-top:.3rem; line-height:1.6; }

/* ---------- Processus ---------- */
.process { display:grid; grid-template-columns:minmax(0,420px) minmax(0,1fr); gap:1rem; }
.process-photo { position:relative; overflow:hidden; min-height:100%; }
.process-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.process-photo::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent 45%, var(--grey) 100%); }
.process-body { padding:1rem 0 1rem 2.5rem; min-width:0; }
.steps { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-top:2.4rem; }
.step { position:relative; padding:1.6rem 1.5rem 1.7rem; background:var(--panel); border:1px solid var(--line); transition:transform .4s var(--ease-out), border-color .4s; }
.step::before { content:""; position:absolute; top:-1px; left:-1px; height:2px; width:0; background:var(--red); transition:width .8s var(--ease); }
.step.in::before { width:48px; }
.step:hover { transform:translateY(-3px); border-color:rgba(200,16,46,.45); }
.step:hover::before { width:calc(100% + 2px); }
.step-num { font-family:var(--f-title); font-size:3rem; line-height:.9; color:rgba(255,255,255,.08); transition:color .4s; }
.step:hover .step-num { color:rgba(200,16,46,.55); }
.step-label { display:block; margin-top:.8rem; font-family:var(--f-label); font-weight:600; text-transform:uppercase; letter-spacing:.2em; font-size:.78rem; color:var(--red); }
.step h3 { font-family:var(--f-title); font-weight:400; text-transform:uppercase; font-size:1.5rem; letter-spacing:.04em; line-height:1.1; margin:.35rem 0 .5rem; }
.step p { color:var(--muted); font-size:.95rem; line-height:1.65; }
.note { margin-top:1.6rem; display:flex; gap:1rem; align-items:flex-start; padding:1.1rem 1.3rem; background:rgba(200,16,46,.05); border:1px solid rgba(200,16,46,.25); color:var(--muted); font-size:.95rem; }
.note svg { flex-shrink:0; width:13px; height:13px; fill:var(--red); margin-top:.45rem; }
.note strong { color:var(--text); font-weight:500; }

/* ---------- Importations : cartes « annonce » (photo, infos, 2 boutons) ---------- */
.cars { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem; margin-top:4.5rem; }
.car { position:relative; display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--line); transition:transform .5s var(--ease-out), border-color .4s, box-shadow .5s; }
.car::after { content:""; position:absolute; left:-1px; right:-1px; bottom:-1px; height:2px; background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .7s var(--ease); }
.car:hover { transform:translateY(-6px); border-color:var(--line-2); box-shadow:0 30px 60px rgba(0,0,0,.4); }
.car:hover::after { transform:scaleX(1); }
.car-img { position:relative; display:block; aspect-ratio:16/10; overflow:hidden; background:var(--bg); }
.car-img img { width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease-out); }
.car:hover .car-img img { transform:scale(1.06); }
.car-badge { position:absolute; top:1rem; left:1rem; display:inline-flex; align-items:center; gap:.45rem; background:rgba(11,11,12,.85); backdrop-filter:blur(4px); padding:.4rem .75rem; font-family:var(--f-label); font-weight:500; text-transform:uppercase; letter-spacing:.14em; font-size:.74rem; color:#fff; }
.car-badge svg { width:9px; height:9px; fill:var(--red); }
/* Véhicule seulement homologué par Nova (pas importé par nous) */
.car-badge.is-homolog { background:var(--red); }
.car-badge.is-homolog svg { fill:#fff; }
.car-body { display:flex; flex-direction:column; flex:1; padding:1.8rem 1.7rem 1.9rem; }
.car-name { font-family:var(--f-title); font-weight:400; text-transform:uppercase; font-size:2rem; letter-spacing:.03em; line-height:1; }
.car-name span { color:var(--muted); }
.car-route { display:flex; align-items:center; gap:.6rem; margin-top:.9rem; font-family:var(--f-title); font-size:1.35rem; letter-spacing:.05em; text-transform:uppercase; }
.car-route i { font-style:normal; color:var(--red); }
.car-specs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem 1.2rem; margin:1.6rem 0 1.9rem; padding-top:1.5rem; border-top:1px solid var(--line); list-style:none; }
.car-specs li { display:flex; align-items:center; gap:.7rem; font-size:.98rem; color:var(--text); }
.car-specs svg { width:21px; height:21px; flex-shrink:0; fill:none; stroke:var(--muted); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.car-actions { display:flex; gap:.7rem; margin-top:auto; }
.car-actions .btn { flex:1; padding:.9rem 1rem; font-size:.88rem; letter-spacing:.12em; white-space:nowrap; }
.after-cards { margin-top:4rem; }

/* ---------- Bandeau parallax ---------- */
.parallax { position:relative; height:clamp(300px,46vh,460px); overflow:hidden; display:flex; align-items:center; justify-content:center; text-align:center; padding:2rem; }
.parallax img { position:absolute; left:0; top:-15%; width:100%; height:130%; object-fit:cover; filter:brightness(.5); will-change:transform; }
.parallax-inner { position:relative; z-index:1; }
.parallax h2 { font-family:var(--f-title); font-weight:400; text-transform:uppercase; letter-spacing:.04em; font-size:clamp(2.2rem,5vw,4.2rem); line-height:1; }
.parallax p { font-family:var(--f-label); letter-spacing:.3em; text-transform:uppercase; color:rgba(255,255,255,.75); margin-top:.4rem; }

/* ---------- Prestations ---------- */
.offers { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem; margin-top:4.5rem; }
.offer { position:relative; background:var(--panel); padding:3rem 2.6rem; display:flex; flex-direction:column; border-top:2px solid transparent; transition:transform .5s var(--ease-out), box-shadow .5s; }
.offer:hover { transform:translateY(-6px); box-shadow:0 30px 60px rgba(0,0,0,.35); }
.offer.featured { border-top-color:var(--red); background:linear-gradient(180deg, #25161a 0%, var(--panel) 45%); }
.offer-tag { align-self:flex-start; font-family:var(--f-label); text-transform:uppercase; letter-spacing:.2em; font-size:.78rem; padding:.35rem .8rem; border:1px solid var(--line-2); color:var(--muted); margin-bottom:1.6rem; }
.offer.featured .offer-tag { background:var(--red); border-color:var(--red); color:#fff; }
.offer h3 { font-family:var(--f-title); font-weight:400; text-transform:uppercase; font-size:2.1rem; letter-spacing:.03em; line-height:1.05; }
.offer .sub { color:var(--muted); margin-top:.4rem; }
.offer ul { list-style:none; margin:2rem 0 2.2rem; flex:1; }
.offer li { display:flex; gap:.9rem; padding:.8rem 0; border-top:1px solid var(--line); font-size:.98rem; }
.offer li svg { flex-shrink:0; width:10px; height:10px; fill:var(--red); margin-top:.55rem; }
.offer-price { display:flex; justify-content:space-between; align-items:baseline; font-family:var(--f-label); text-transform:uppercase; letter-spacing:.16em; font-size:.88rem; color:var(--muted); padding:1.2rem 0 1.8rem; border-top:1px solid var(--line); }
.offer-price b { font-family:var(--f-title); font-weight:400; color:#fff; letter-spacing:.06em; font-size:1.5rem; }

/* ---------- Avis ---------- */
#avis { padding-top:6rem; padding-bottom:6rem; }
#avis .h-title { font-size:clamp(2.1rem,3.6vw,3rem); }
/* Avis : une seule rangée qui défile horizontalement (3 visibles sur ordinateur) */
.reviews { display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 2.4rem) / 3); gap:1.2rem; max-width:1080px; margin:3rem auto 0; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; overscroll-behavior-x:contain; }
.reviews::-webkit-scrollbar { display:none; }
.reviews .review { scroll-snap-align:start; }
.reviews-foot { max-width:1080px; margin:1.6rem auto 0; display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; }
.reviews-ask { flex:1; min-width:220px; color:var(--muted); font-size:.95rem; }
.reviews-arrows { display:flex; gap:.5rem; }
.reviews-arrows.is-hidden { display:none; }
.arrow-btn { width:46px; height:46px; display:flex; align-items:center; justify-content:center; background:transparent; border:1px solid var(--line-2); color:#fff; font-size:1.3rem; cursor:pointer; transition:background .3s, border-color .3s, opacity .3s; }
.arrow-btn:hover:not(:disabled) { background:var(--red); border-color:var(--red); }
.arrow-btn:disabled { opacity:.3; cursor:default; }
.review { border:1px solid var(--line); padding:1.7rem 1.6rem; display:flex; flex-direction:column; transition:border-color .5s, background .5s; }
.review:hover { border-color:var(--line-2); background:var(--grey); }
.quote-mark { font-family:var(--f-title); font-size:3.2rem; line-height:.6; color:var(--red); }
.stars { display:flex; gap:4px; margin-top:1rem; }
.stars svg { width:11px; height:11px; fill:var(--red); }
.review blockquote { font-size:.98rem; font-weight:300; line-height:1.65; margin:.8rem 0 1.3rem; flex:1; }
.author { display:flex; align-items:center; gap:.8rem; padding-top:1rem; border-top:1px solid var(--line); }
.avatar { width:38px; height:38px; display:flex; align-items:center; justify-content:center; font-family:var(--f-title); font-size:1.5rem; background:var(--panel-2); color:var(--red); }
.author b { display:block; font-weight:500; }
.author span { font-family:var(--f-label); text-transform:uppercase; letter-spacing:.14em; font-size:.8rem; color:var(--muted); }
.review.cta { justify-content:center; align-items:center; text-align:center; background:var(--panel); border-color:var(--panel); }
.review.cta p { color:var(--muted); font-size:.95rem; margin:.4rem 0 1.2rem; }
.review.cta h3 { font-family:var(--f-title); font-weight:400; text-transform:uppercase; font-size:1.5rem; letter-spacing:.03em; line-height:1.05; }

/* ---------- FAQ ---------- */
.faq { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr); gap:5rem; align-items:start; }
.faq-list { border-top:1px solid var(--line); }
.faq-item { border-bottom:1px solid var(--line); }
.faq-item summary { list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1.5rem; padding:1.6rem 0; cursor:pointer; font-size:1.08rem; font-weight:500; transition:color .3s; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary:hover { color:#fff; }
.faq-icon { position:relative; width:38px; height:38px; flex-shrink:0; border:1px solid var(--line-2); transition:background .4s, border-color .4s; }
.faq-icon::before, .faq-icon::after { content:""; position:absolute; left:50%; top:50%; width:12px; height:1px; background:#fff; transform:translate(-50%,-50%); transition:transform .4s var(--ease); }
.faq-icon::after { transform:translate(-50%,-50%) rotate(90deg); }
.faq-item.active .faq-icon { background:var(--red); border-color:var(--red); }
.faq-item.active .faq-icon::after { transform:translate(-50%,-50%) rotate(0); }
.faq-a { color:var(--muted); max-height:0; overflow:hidden; opacity:0; padding-right:3.5rem; transition:max-height .45s var(--ease), opacity .4s, padding .45s; }
.faq-item.active .faq-a { opacity:1; padding-bottom:1.6rem; }
.faq-a strong { color:var(--text); font-weight:500; }

/* ---------- Contact ---------- */
.contact { overflow:hidden; }
.contact-bg { position:absolute; inset:0; }
.contact-bg img { width:100%; height:100%; object-fit:cover; filter:brightness(.28) grayscale(.2); }
.contact-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(11,11,12,.92) 0%, rgba(11,11,12,.6) 55%, rgba(11,11,12,.85) 100%); }
.contact .wrap { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr); gap:5rem; align-items:start; }
.infos { margin-top:2.4rem; display:grid; gap:1.6rem; }
.infos .k { font-family:var(--f-label); text-transform:uppercase; letter-spacing:.2em; font-size:.8rem; color:var(--muted); }
.infos .v { font-size:1.1rem; }
.infos a { text-decoration:none; transition:color .3s; }
.infos a:hover { color:var(--red); }
.socials { display:flex; gap:.6rem; margin-top:2.2rem; }
.socials a { width:46px; height:46px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line-2); color:#fff; transition:background .3s, border-color .3s; }
.socials a:hover { background:var(--red); border-color:var(--red); }
.socials svg { width:17px; height:17px; fill:currentColor; }
.form { background:var(--panel); padding:clamp(1.8rem,3.5vw,3rem); border-top:2px solid var(--red); }
.row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.2rem; }
.field { margin-bottom:1.3rem; }
.field label { display:block; font-family:var(--f-label); text-transform:uppercase; letter-spacing:.18em; font-size:.8rem; color:var(--muted); margin-bottom:.5rem; }
.field input, .field select, .field textarea { width:100%; background:var(--bg); border:1px solid var(--line-2); border-radius:0; color:var(--text); font-family:var(--f-text); font-size:1rem; padding:.9rem 1rem; transition:border-color .3s, box-shadow .3s; -webkit-appearance:none; appearance:none; }
.field select { background-image:linear-gradient(45deg, transparent 50%, #aaa 50%), linear-gradient(135deg, #aaa 50%, transparent 50%); background-position:calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size:5px 5px; background-repeat:no-repeat; padding-right:2.5rem; }
.field select option { background:var(--bg); }
.field input::placeholder, .field textarea::placeholder { color:#66666c; }
.field input:hover, .field select:hover, .field textarea:hover { border-color:rgba(255,255,255,.4); }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--red); box-shadow:0 0 0 3px rgba(200,16,46,.18); }
.field textarea { min-height:140px; resize:vertical; }
.form .btn { width:100%; }
.form small { display:block; margin-top:1rem; color:var(--muted); font-size:.85rem; }

/* ---------- Footer ---------- */
footer { background:#000; padding:5rem 2rem 2rem; text-align:center; border-top:1px solid var(--line); }
.foot-logo img { height:56px; width:auto; margin:0 auto; }
footer .socials { justify-content:center; margin:2rem 0 3.5rem; }
.foot-cols { max-width:900px; margin:0 auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2rem; }
.foot-cols h4, .foot-cols .foot-h { font-family:var(--f-title); font-weight:400; text-transform:uppercase; font-size:1.35rem; letter-spacing:.06em; margin-bottom:1.1rem; }
.foot-cols ul { list-style:none; display:grid; gap:.5rem; }
.foot-cols a { color:var(--muted); text-decoration:none; font-size:.95rem; transition:color .3s; }
.foot-cols a:hover { color:#fff; }
.foot-bottom { max-width:var(--max); margin:4rem auto 0; padding-top:1.6rem; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-family:var(--f-label); letter-spacing:.14em; text-transform:uppercase; font-size:.78rem; color:#77777d; }

/* Retour en haut */
.to-top { position:fixed; right:1.5rem; bottom:1.5rem; z-index:150; width:48px; height:48px; border:1px solid var(--line-2); background:rgba(11,11,12,.85); color:#fff; cursor:pointer; opacity:0; pointer-events:none; transition:opacity .4s, background .3s, border-color .3s; }
.to-top.visible { opacity:1; pointer-events:auto; }
.to-top:hover { background:var(--red); border-color:var(--red); }

/* ---------- Apparitions au scroll ---------- */
.rv { opacity:0; transform:translateY(40px); transition:opacity 1s ease, transform 1.1s var(--ease-out); transition-delay:var(--d,0s); }
.rv.in { opacity:1; transform:none; }
/* Image qui se dévoile de gauche à droite */
.unveil { clip-path:inset(0 100% 0 0); transition:clip-path 1.5s var(--ease); transition-delay:var(--d,0s); }
.unveil img { transform:scale(1.25); transition:transform 2s var(--ease-out); transition-delay:var(--d,0s); }
.unveil.in { clip-path:inset(0 0 0 0); }
.unveil.in img { transform:scale(1); }

/* Bannière cookies */
.cookie-banner { position:fixed; left:1.5rem; bottom:1.5rem; z-index:9999; display:none; flex-direction:column; gap:1rem; max-width:420px; background:var(--panel); border-top:2px solid var(--red); padding:1.4rem 1.5rem; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.cookie-banner.visible { display:flex; }
.cookie-banner p { font-size:.92rem; line-height:1.55; color:var(--muted); }
.cookie-banner p a { color:#fff; }
.cookie-banner-actions { display:flex; gap:.6rem; }
.cookie-btn { flex:1; font-family:var(--f-label); text-transform:uppercase; letter-spacing:.14em; font-size:.85rem; padding:.75rem 1rem; cursor:pointer; border:1px solid var(--line-2); background:transparent; color:#fff; }
.cookie-btn-accept { background:var(--red); border-color:var(--red); }

/* ---------- Responsive ---------- */
@media (max-width:1100px) {
  .nav { grid-template-columns:auto auto; justify-content:space-between; padding:1rem 1.5rem; }
  .nav.scrolled { padding:.7rem 1.5rem; }
  .nav-links, .nav > .btn { display:none; }
  .burger { display:inline-flex; }
  .cars { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .reviews { grid-auto-columns:calc((100% - 1.2rem) / 2); }
  .process { grid-template-columns:1fr; }
  .process-photo { min-height:320px; }
  .process-photo::after { background:linear-gradient(180deg, transparent 45%, var(--grey) 100%); }
  .process-body { padding:1rem 0 0; }
  .faq, .contact .wrap { grid-template-columns:1fr; gap:3rem; }
}
@media (max-width:860px) {
  section { padding:5.5rem 1.25rem; }
  .about { grid-template-columns:1fr; gap:3.5rem; }
  .about-visual { max-width:520px; margin:0 1.5rem 0 .9rem; }
  .offers { grid-template-columns:1fr; }
}
@media (max-width:620px) {
  body { font-size:16px; }
  .nav-logo img { height:42px; }
  .steps, .cars, .row { grid-template-columns:1fr; }
  .reviews { grid-auto-columns:86%; }
  .reviews-foot .btn { width:100%; }
  .values { grid-template-columns:1fr; }
  .car-actions { flex-direction:column; }
  .car-body { padding:1.5rem 1.3rem 1.6rem; }
  .hero { padding:8rem 1.25rem 6rem; }
  .hero .label { letter-spacing:.2em; font-size:.72rem; }
  .hero-stats { gap:1.8rem; margin-top:2.6rem; }
  .hero-stats b { font-size:2.2rem; }
  .scroll-cue { display:none; }
  .offer { padding:2.4rem 1.6rem; }
  .process-body { padding:.5rem 0 0; }
  .process-photo { min-height:240px; }
  .foot-cols { grid-template-columns:1fr; }
  .hero-actions .btn { width:100%; }
  .cookie-banner { left:1rem; right:1rem; bottom:1rem; max-width:none; }
  .to-top { right:1rem; bottom:1rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .line > span, .fade-in { transform:none; opacity:1; }
  .rv, .unveil, .unveil img { opacity:1; transform:none; clip-path:none; }
}

/* =========================================================
   PAGE CATALOGUE (importations)
   ========================================================= */
/* En-tête de page */
.page-hero { position:relative; min-height:62vh; display:flex; align-items:flex-end; padding:10rem 2.5rem 5rem; overflow:hidden; background:#000; }
.page-hero .hero-bg img { object-position:center 45%; }
.page-hero .hero-inner { position:relative; z-index:1; width:100%; max-width:var(--max); margin:0 auto; }
.page-hero h1 { font-family:var(--f-title); font-weight:400; text-transform:uppercase; letter-spacing:.02em; line-height:.92; font-size:clamp(3.4rem,9vw,7.5rem); margin-top:1rem; }
.page-hero h1 .red { color:var(--red); }
.page-hero .lead { color:rgba(255,255,255,.72); max-width:560px; }
.crumbs { display:flex; gap:.7rem; font-family:var(--f-label); text-transform:uppercase; letter-spacing:.2em; font-size:.8rem; color:var(--muted); }
.crumbs a { text-decoration:none; color:#fff; transition:color .3s; }
.crumbs a:hover { color:var(--red); }

/* Barre au-dessus de la grille */
.catalog-bar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; padding-bottom:1.6rem; border-bottom:1px solid var(--line); }
.catalog-count { font-family:var(--f-label); text-transform:uppercase; letter-spacing:.18em; font-size:.9rem; color:var(--muted); }
.catalog-count b { font-family:var(--f-title); font-weight:400; font-size:1.6rem; letter-spacing:.04em; color:#fff; margin-right:.4rem; }
.catalog .cars { margin-top:2.5rem; }

/* Carrousel de photos dans la carte */
.carousel { position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--bg); touch-action:pan-y; }
.carousel-track { display:flex; height:100%; transition:transform .6s var(--ease); }
.carousel-track img { flex:0 0 100%; width:100%; height:100%; object-fit:cover; user-select:none; -webkit-user-drag:none; }
.car:hover .carousel-track img { transform:none; }
.carousel-btn { position:absolute; top:50%; z-index:2; width:42px; height:42px; margin-top:-21px; display:flex; align-items:center; justify-content:center; background:rgba(11,11,12,.7); border:1px solid var(--line-2); color:#fff; font-size:1.1rem; cursor:pointer; opacity:0; transition:opacity .3s, background .3s, border-color .3s; }
.carousel-btn.prev { left:.9rem; } .carousel-btn.next { right:.9rem; }
.car:hover .carousel-btn, .carousel-btn:focus-visible { opacity:1; }
.carousel-btn:hover { background:var(--red); border-color:var(--red); }
@media (hover:none) { .carousel-btn { opacity:1; } }
.carousel-dots { position:absolute; left:0; right:0; bottom:.9rem; z-index:2; display:flex; justify-content:center; gap:6px; }
.carousel-dots button { width:18px; height:3px; padding:0; border:0; background:rgba(255,255,255,.45); cursor:pointer; transition:background .3s, width .3s; }
.carousel-dots button.on { width:30px; background:var(--red); }
.carousel-count { position:absolute; right:1rem; top:1rem; z-index:2; background:rgba(11,11,12,.85); padding:.35rem .6rem; font-family:var(--f-label); letter-spacing:.12em; font-size:.75rem; }
.car-extra { display:inline-flex; align-self:flex-start; margin-top:-.6rem; margin-bottom:1.4rem; padding:.3rem .7rem; border:1px solid rgba(200,16,46,.45); color:#ff6b7d; font-family:var(--f-label); text-transform:uppercase; letter-spacing:.14em; font-size:.78rem; }
.car:target { border-color:var(--red); }
.car { scroll-margin-top:110px; }

/* Carte « votre prochaine voiture » */
.car-cta { display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; gap:.4rem; padding:3rem 2rem; background:linear-gradient(180deg,#25161a 0%, var(--panel) 60%); border:1px dashed rgba(200,16,46,.45); min-height:100%; }
.car-cta .mark { margin:.6rem 0; }
.car-cta h3 { font-family:var(--f-title); font-weight:400; text-transform:uppercase; font-size:2.3rem; line-height:1; letter-spacing:.03em; }
.car-cta p { color:var(--muted); max-width:280px; margin-bottom:1.6rem; }

/* Bandeau d'appel à l'action */
.cta-band { position:relative; overflow:hidden; text-align:center; padding:7rem 2rem; }
.cta-band .contact-bg img { filter:brightness(.3) grayscale(.2); }
.cta-band .contact-bg::after { background:linear-gradient(180deg, rgba(11,11,12,.85), rgba(11,11,12,.6), rgba(11,11,12,.9)); }
.cta-band .wrap { position:relative; z-index:1; }
.cta-band .lead { margin:0 auto 2.4rem; }

@media (max-width:620px) {
  .page-hero { min-height:0; padding:8rem 1.25rem 3.5rem; }
  .cta-band { padding:5rem 1.25rem; }
}

/* En-tête compact du catalogue (sans photo) */
.page-head { padding:9.5rem 2.5rem 0; }
.page-head h1 { font-family:var(--f-title); font-weight:400; text-transform:uppercase; letter-spacing:.02em; line-height:.95; font-size:clamp(3rem,6.5vw,5.2rem); margin:1rem 0 1rem; }
.page-head h1 .red { color:var(--red); }
@media (max-width:620px) { .page-head { padding:7.5rem 1.25rem 0; } }

/* =========================================================
   AVIS CLIENTS : fenêtre de dépôt + étoiles
   ========================================================= */
.stars svg.off { fill:none; stroke:var(--red); stroke-width:1.6; opacity:.55; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.avis-dialog { width:min(620px, calc(100vw - 2rem)); max-height:calc(100dvh - 2rem); overflow:auto; margin:auto; padding:clamp(1.8rem,4vw,2.8rem); background:var(--panel); color:var(--text); border:0; border-top:2px solid var(--red); box-shadow:0 30px 90px rgba(0,0,0,.6); }
.avis-dialog::backdrop { background:rgba(0,0,0,.72); backdrop-filter:blur(4px); }
.avis-dialog[open] { animation:avisIn .35s var(--ease-out); }
@keyframes avisIn { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
.avis-dialog .h-title { font-size:clamp(2rem,4vw,2.6rem); }
.avis-close { position:absolute; top:1rem; right:1rem; width:40px; height:40px; background:transparent; border:1px solid var(--line-2); color:#fff; font-size:1rem; cursor:pointer; transition:background .3s, border-color .3s; }
.avis-close:hover { background:var(--red); border-color:var(--red); }
.avis-dialog .btn { width:100%; }
.avis-note, .avis-count { display:block; margin-top:.8rem; color:var(--muted); font-size:.85rem; }
.avis-count { margin-top:.4rem; text-align:right; }
.avis-error { min-height:1.2em; color:#ff6b7d; font-size:.92rem; margin:.2rem 0 .8rem; }
.hp { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.avis-thanks { text-align:center; padding:1.5rem 0 .5rem; }
.avis-thanks p { color:var(--muted); margin:.8rem 0 1.8rem; }

/* Note : 5 étoiles cliquables (ordre inversé pour colorer les étoiles à gauche de la sélection) */
.rating-label { display:block; font-family:var(--f-label); text-transform:uppercase; letter-spacing:.18em; font-size:.8rem; color:var(--muted); margin-bottom:.6rem; }
.rating { position:relative; display:inline-flex; flex-direction:row-reverse; gap:.35rem; }
/* Cases invisibles : elles ne doivent jamais intercepter un clic (sinon la case « 1 » se retrouve sur la 5e étoile) */
.rating input { position:absolute; left:0; top:0; opacity:0; width:1px; height:1px; margin:0; pointer-events:none; }
.rating label { cursor:pointer; padding:.15rem; margin:0; }
.rating svg { width:30px; height:30px; fill:none; stroke:var(--muted); stroke-width:1.4; transition:fill .2s, stroke .2s, transform .2s; }
.rating label:hover svg, .rating label:hover ~ label svg, .rating input:checked ~ label svg { fill:var(--red); stroke:var(--red); }
.rating label:hover svg { transform:scale(1.12); }
.rating input:focus-visible + label { outline:2px solid var(--red); outline-offset:2px; }

/* =========================================================
   PAGES LÉGALES (mentions, CGV, confidentialité, cookies, livraison)
   ========================================================= */
.legal { padding-top:3rem; }
.legal-body { max-width:820px; margin:0 auto; font-size:1.02rem; line-height:1.85; }
.legal-body h2 { font-family:var(--f-title); font-weight:400; text-transform:uppercase; letter-spacing:.04em; font-size:clamp(1.5rem,2.6vw,1.9rem); line-height:1.1; color:#fff; margin:3rem 0 1rem; padding-top:1.4rem; border-top:1px solid var(--line); position:relative; }
.legal-body h2::before { content:""; position:absolute; top:-1px; left:0; width:48px; height:2px; background:var(--red); }
.legal-body > h2:first-child, .legal-body > p:first-child + h2 { margin-top:1rem; }
.legal-body h3 { font-family:var(--f-label); font-weight:600; text-transform:uppercase; letter-spacing:.14em; font-size:.95rem; color:var(--text); margin:1.8rem 0 .6rem; }
.legal-body p { color:var(--muted); margin-bottom:1rem; }
.legal-body ul, .legal-body ol { color:var(--muted); margin:0 0 1rem 1.2rem; }
.legal-body li { margin-bottom:.4rem; }
.legal-body strong { color:var(--text); font-weight:500; }
.legal-body a { color:#fff; text-decoration:underline; text-decoration-color:var(--red); text-underline-offset:3px; transition:color .3s; }
.legal-body a:hover { color:var(--red); }
.legal-body .note, .legal-body .legal-box { margin:1.6rem 0; padding:1.2rem 1.4rem; background:rgba(200,16,46,.05); border:1px solid rgba(200,16,46,.25); color:var(--muted); }
@media (max-width:620px) { .legal { padding-top:2rem; } .legal-body { font-size:.98rem; } }

/* Petit texte rouge intégré au H1 de l'accueil (porte les mots-clés) */
.hero h1 .h1-label { display:block; font-family:var(--f-label); font-size:.82rem; line-height:1.5; letter-spacing:.38em; color:var(--red); margin-bottom:1.2rem; }
@media (max-width:620px) { .hero h1 .h1-label { font-size:.72rem; letter-spacing:.2em; } }

/* =========================================================
   CONFORT TACTILE (mobile) : zones de clic d'au moins ~44 px,
   sans changer l'apparence
   ========================================================= */
.carousel-dots { gap:4px; bottom:0; } /* la zone tactile agrandie garde le trait au même endroit */
.carousel-dots button { box-sizing:content-box; padding:14px 2px; background-clip:content-box; }
@media (max-width:860px) {
  .infos .v a, .form small a, .crumbs a { display:inline-block; padding:.6rem 0; }
  .foot-cols a { display:inline-block; padding:.55rem .2rem; }
  .foot-cols ul { gap:0; }
  .hero h1 .h1-label { font-size:.8rem; }
  .car-badge { font-size:.78rem; }
}

/* =========================================================
   PROCESSUS SUR TÉLÉPHONE : les 6 étapes défilent au doigt
   (sur ordinateur et tablette, la grille reste inchangée)
   ========================================================= */
.steps-hint { display:none; }
@media (max-width:620px) {
  .steps { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:84%; gap:.9rem; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-left:1.25rem; margin-left:-1.25rem; margin-right:-1.25rem; padding:0 1.25rem .3rem; scrollbar-width:none; overscroll-behavior-x:contain; }
  .steps::-webkit-scrollbar { display:none; }
  .step { scroll-snap-align:start; }
  .steps-hint { display:block; margin-top:.9rem; text-align:center; font-family:var(--f-label); text-transform:uppercase; letter-spacing:.18em; font-size:.78rem; color:var(--muted); }
}