/* =========================================================
   ASPHALTE LEASE — Reproduction fidèle
   Palette : rouge #e30613 / noir #111111 / blanc #ffffff / beige #f3efec
   ========================================================= */

:root{
  --red: #e30613;
  --red-dark: #b8050f;
  --red-tint: #fbe8e9;
  --black: #111111;
  --ink: #1a1a1a;
  --gray-700: #4b5563;
  --gray-500: #6b7280;
  --gray-300: #d1d5db;
  --beige: #f3efec;
  --white: #ffffff;
  --border: #e6e0da;

  --font-head: "Poppins", sans-serif;
  --font-body: "Inter", sans-serif;

  --radius-sm: 4px;
  --radius-md: 8px;
}

*, *::before, *::after{ box-sizing: border-box; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.65;
}
h1,h2,h3,h4{
  font-family: var(--font-head);
  color: var(--black);
  margin: 0 0 .5em;
  line-height: 1.2;
  font-weight: 700;
}
p{ margin: 0 0 1em; color: var(--gray-700); }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin:0; padding:0; }
button{ font-family: inherit; cursor: pointer; }
.hero-dots button, .carousel-dots button, .pagination button{ -webkit-appearance: none; appearance: none; padding: 0; }
img{ max-width: 100%; display:block; }

/* ============ GLOBAL MICRO-ANIMATIONS ============ */
a, button{ transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease, opacity .2s ease; }

.nav-link{ position: relative; }
.nav-link::after{
  content:""; position:absolute; left:0; right:100%; bottom:-4px; height:2px;
  background: var(--red); transition: right .25s ease;
}
.nav-link:hover::after, .nav-link.active::after{ right:0; }

.logo{ transition: transform .25s ease; }
.logo:hover{ transform: scale(1.03); }

/* Scroll-reveal: elements fade + rise into place once, on first view */
.reveal{ opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in-view{ opacity: 1; transform: translateY(0); }
.reveal-group .reveal:nth-child(1){ transition-delay: .05s; }
.reveal-group .reveal:nth-child(2){ transition-delay: .12s; }
.reveal-group .reveal:nth-child(3){ transition-delay: .19s; }
.reveal-group .reveal:nth-child(4){ transition-delay: .26s; }
.reveal-group .reveal:nth-child(5){ transition-delay: .33s; }
.reveal-group .reveal:nth-child(6){ transition-delay: .4s; }

@media (prefers-reduced-motion: reduce){
  a, button, .reveal, .logo, .nav-link::after{ transition-duration: .01ms !important; }
  .reveal{ opacity: 1; transform: none; }
}

.container{
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

.icon{ width: 1.15em; height: 1.15em; display:inline-block; vertical-align: -0.2em; fill:none; }
.icon.big{ width: 2.6rem; height: 2.6rem; }
.icon.flip{ transform: scaleX(-1); }

.eyebrow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.6em;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .06em;
  color: var(--red);
  margin-bottom: .8rem;
}
.eyebrow::before, .eyebrow::after{ content:"•••"; letter-spacing: .2em; opacity:.7; }
.eyebrow.left{ justify-content:flex-start; }
.eyebrow.icon-lead::before, .eyebrow.icon-lead::after{ content:none; }

.section-head{ text-align:center; max-width: 700px; margin: 0 auto 3rem; }
.section-head h2{ font-size: clamp(1.7rem, 3vw, 2.5rem); text-transform: uppercase; }
.section-head.left{ text-align:left; margin: 0; max-width: 620px; }
.section-head.left .eyebrow{ justify-content:flex-start; }

.section-head-row{ display:flex; justify-content:space-between; align-items:flex-end; gap: 2rem; margin-bottom: 3rem; flex-wrap:wrap; }

/* ============ BUTTONS ============ */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .95em 2em;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.btn:disabled,
button:disabled{
  cursor:not-allowed;
  opacity:.68;
}
.btn-sm{ padding: .65em 1.3em; font-size: .8rem; }
.btn-block{ width: 100%; }
.btn:hover{ transform: translateY(-2px); box-shadow: 0 8px 18px rgba(17,24,39,.14); }
.btn:active{ transform: translateY(0); box-shadow:none; }

.btn-primary{ background: var(--red); color: var(--white); }
.btn-primary:hover{ background: var(--red-dark); }

.btn-outline{ border-color: var(--black); color: var(--black); background: transparent; }
.btn-outline:hover{ background: var(--black); color: var(--white); }

.btn-outline-red{ border-color: var(--red); color: var(--red); background: transparent; }
.btn-outline-red:hover{ background: var(--red); color: var(--white); }

.btn-outline-light{ border-color: var(--white); color: var(--white); background: transparent; }
.btn-outline-light:hover{ background: var(--white); color: var(--black); }

.btn-ghost{ background: transparent; color: var(--gray-700); }
.btn-ghost:hover{ color: var(--black); }

/* ============ HEADER ============ */
.site-header{
  position: sticky; top: 0; z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
  transition: padding .25s ease, background-color .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.site-header.is-scrolled{
  padding: 7px 0;
  background: rgba(255,255,255,.86);
  border-bottom-color: rgba(230,224,218,.72);
  box-shadow: 0 8px 24px rgba(13,13,15,.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.header-inner{ display:flex; align-items:center; justify-content: space-between; gap: 24px; }

.logo{ display:flex; align-items:center; flex-shrink:0; }
.logo-mark{
  height: 58px; width: auto;
  object-fit: contain;
  flex-shrink:0;
  transition: height .25s ease;
}
.site-header.is-scrolled .logo-mark{ height:44px; }

.main-nav{ display:flex; align-items:center; gap: 2rem; }
.nav-link{ font-weight: 600; font-size: .95rem; color: var(--black); }
.nav-link:hover, .nav-link.active{ color: var(--red); }

.header-actions{ display:flex; align-items:center; gap: 1rem; }
.header-quote{ flex-shrink:0; }
.header-quote.mobile-quote{ display:none; }
.header-phone{
  display:flex; align-items:center; gap:.6em;
  background: var(--red); color:#fff; font-weight:700; font-size: .92rem;
  padding: .8em 1.3em; border-radius: var(--radius-sm);
}
.header-phone:hover{ background: var(--red-dark); }
.header-phone .icon{ color:#fff; }

.burger{ display:none; background:none; border:none; color: var(--black); padding: 6px; }

.header-phone.mobile{ background:none; color: var(--black); padding:0; font-weight:600; }
.header-phone.mobile .icon{ color: var(--red); }
.mobile-nav .header-quote.mobile-quote{
  display:inline-flex;
  align-self:stretch;
  color:#fff;
  background:var(--red);
  padding:.85em 1.1em;
  border-radius:10px;
  justify-content:center;
}
.mobile-nav .header-quote.mobile-quote:hover{ background:var(--red-dark); }

/* Mobile nav */
.mobile-nav{
  position: fixed; top:0; right:0; height:100vh; width: min(340px, 85vw);
  background: var(--white);
  z-index: 200;
  padding: 90px 32px 32px;
  display:flex; flex-direction:column; gap: 1.6rem;
  transform: translateX(100%);
  transition: transform .3s ease;
  box-shadow: -8px 0 24px rgba(0,0,0,.12);
}
.mobile-nav.open{ transform: translateX(0); }
.mobile-nav .nav-link{ font-size: 1.1rem; }
.mobile-nav-close{ position:absolute; top:24px; right:24px; background:none; border:none; color:var(--black); }
.mobile-nav-overlay{
  position: fixed; inset:0; background: rgba(17,24,39,.45);
  z-index: 190; opacity:0; visibility:hidden; transition: opacity .3s ease;
}
.mobile-nav-overlay.open{ opacity:1; visibility:visible; }

/* ============ HERO ============ */
.hero{
  position: relative;
  min-height: 640px;
  display:flex;
  align-items:flex-end;
  overflow: hidden;
  background: var(--black);
}
.hero-slides{ position:absolute; inset:0; }
.hero-slide{
  position:absolute; inset:0;
  background: #2b2b2b center/cover no-repeat;
  opacity:0;
  transition: opacity .6s ease;
}
.hero-slide.active{ opacity:1; }
.hero-slide.slide-1{ background-image: linear-gradient(rgba(10,10,10,.4), rgba(10,10,10,.65)), url('../img/HeaderPrincipale.png'); }
.hero-slide.slide-2{ background-image: linear-gradient(rgba(10,10,10,.4), rgba(10,10,10,.65)), url('../img/Header2.jpeg'); }
.hero-slide.slide-3{ background-image: linear-gradient(rgba(10,10,10,.4), rgba(10,10,10,.65)), url('../img/Header3.png'); }

.hero-inner{ position:relative; z-index:2; padding: 60px 0 90px; width:100%; }
.hero-copy{ max-width: 640px; }
.hero-copy h1{
  color: var(--white);
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  text-transform: uppercase;
  letter-spacing: -.01em;
}
.hero-copy h1 .accent{ color: var(--red); }
.hero-lead{ color: rgba(255,255,255,.82); font-size: 1.1rem; max-width: 500px; }
.hero-cta{ display:flex; gap: 1rem; flex-wrap:wrap; margin-top: 1.6rem; }

.hero-dots{
  position:absolute; left:0; right:0; bottom: 24px; z-index:2;
  display:flex; justify-content:center; gap:.5rem;
}
.hero-dots button{ width:10px; height:10px; border-radius:50%; border:none; background: rgba(255,255,255,.4); }
.hero-dots button.active{ background: var(--white); }

/* ============ IMAGE PLACEHOLDER ============ */
.img-ph{ background: #d7d2cb center/cover no-repeat; position:relative; }

/* ============ SECTION GENERIC ============ */
.section{ padding: 88px 0; }
.section.beige{ background: var(--beige); }

/* ============ CATEGORIES ============ */
.category-grid{ display:grid; grid-template-columns: repeat(5, 1fr); gap: 1.2rem; }
.category-card{
  position: relative;
  aspect-ratio: 3/4;
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: block;
  transition: box-shadow .3s ease;
}
.category-card:hover{ box-shadow: 0 16px 32px rgba(17,24,39,.22); }
.category-card .img-ph{ position:absolute; inset:0; transition: transform .5s ease; }
.category-card:hover .img-ph{ transform: scale(1.08); }
.category-card .img-ph::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.45) 50%, rgba(0,0,0,.6) 100%);
}
.category-card::before, .category-card::after{
  content:"";
  position:absolute; z-index:2;
  width: 68.5%; height: 3px;
  background: #dd1016;
}
.category-card::before{ top:0; left:0; }
.category-card::after{ bottom:0; right:0; }
.category-card span{
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center; justify-content:center;
  padding: 0 12px; text-align:center;
  color:#fff; font-family: var(--font-head); font-weight:700; font-size:1.05rem;
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
}

/* ============ OFFERS ============ */
.offers-carousel{ position:relative; }
.offers-track{
  display:flex;
  gap:1.5rem;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x;
  scrollbar-width:none;
}
.offers-track::-webkit-scrollbar{ display:none; }
.offers-track > .offer-card{ scroll-snap-align:start; }
.offer-card{
  flex: 0 0 calc(25% - 1.125rem);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition: transform .3s ease, box-shadow .3s ease;
}
.offer-card:hover{ transform: translateY(-5px); box-shadow: 0 16px 32px rgba(17,24,39,.12); }
.offer-card.hide{ display:none; }
.offer-media{ aspect-ratio: 1505 / 688; }
.offer-media.img-ph{
  background-size:100% auto;
  background-position:center center;
  background-repeat:no-repeat;
  background-color:#f6f6f6;
  background-blend-mode:normal;
}
.offer-media.img-ph::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:linear-gradient(180deg, #e30613 0 49%, #f6f6f6 49% 100%);
}
.offer-media.img-ph::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:inherit;
  background-size:100% auto;
  background-position:center center;
  background-repeat:no-repeat;
}
.vehicle-card{ min-width:0; }
.vehicle-card .offer-media{ background-size:100% auto; }
.vehicle-card .offer-body{ min-width:0; }
.offer-body{ padding: 1.2rem 1.3rem 0; flex:1; display:flex; flex-direction:column; }
.offer-cat{ display:none; }
.offer-body h3{ font-size: 1.15rem; text-transform:uppercase; margin: .4rem 0 .2rem; }
.offer-body p{ font-size:.88rem; color: var(--gray-500); margin-bottom: .8rem; }
.offer-specs{
  display:grid; grid-template-columns: 1fr 1fr;
  /* rows reserve a minimum height for alignment but grow if a label wraps,
     so long text (e.g. "Automatique 9G-TRONIC à 9 rapports") never overlaps
     the row below it */
  grid-auto-rows: minmax(1.55rem, auto); gap:.5rem 1rem;
  min-height: calc(2 * 1.55rem + .5rem);
  align-content: start;
  margin: 0 0 .9rem; padding-top:.6rem; border-top:1px solid var(--border);
}
.offer-specs .spec-item{ display:flex; align-items:flex-start; gap:.4rem; min-width:0; font-size:.76rem; color: var(--gray-700); font-weight:600; line-height:1.3; }
.offer-specs .spec-item svg{ width:15px; height:15px; margin-top:.1em; color:#1a9e46; flex-shrink:0; }
.offer-specs .spec-value{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.offer-price-bar{
  margin-top:auto;
  background: var(--red);
  color:#fff;
  display:flex; align-items:center; justify-content:space-between;
  padding: 1rem 1.2rem;
}
.offer-price-bar .label{ display:block; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; opacity:.85; }
.offer-price-bar strong{ font-family: var(--font-head); font-size: 1.3rem; }
.offer-price-bar span.suffix{ font-size:.78rem; font-weight:500; opacity:.9; margin-left:.3em; }
.offer-price-bar .go{
  width: 36px; height:36px; border-radius: var(--radius-sm);
  background: var(--white); color: var(--red);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}

.carousel-arrow{
  position:absolute; top:40%; transform: translateY(-50%);
  width: 42px; height:42px; border-radius:50%;
  background: var(--white); border: 1px solid var(--border); color: var(--black);
  display:flex; align-items:center; justify-content:center;
  z-index:3;
}
.carousel-arrow:hover{ background: var(--red); color:#fff; border-color: var(--red); }
.carousel-prev{ left: -21px; }
.carousel-next{ right: -21px; }
.carousel-prev .icon{ transform: scaleX(-1); }

.carousel-dots{ display:flex; justify-content:center; gap:.5rem; margin-top: 2rem; }
.carousel-dots button{ width:9px; height:9px; border-radius:50%; border:none; background: var(--gray-300); }
.carousel-dots button.active{ background: var(--red); }

/* ---- Homepage "Dernières Offres" carousel: exact match to original plugin CSS ---- */
.offers-carousel{ padding: 0 56px 56px; }
.offers-carousel .offer-card{
  flex-basis: calc((100% - 2 * 1.5rem) / 3);
  background: #efefef;
  border-color: #ddd;
  border-radius: 0;
}
/* Titles/variants keep a shared min-height so rows stay aligned across cards,
   but nothing beyond that — the price bar sits right under the specs. */
.offers-carousel .offer-body h3{ font-size: 1.25rem; font-weight: 800; min-height: 2.3em; }
.offers-carousel .offer-body p{ font-size:.875rem; color:#777; font-weight:600; min-height: 2.6em; margin-bottom:.6rem; }
.offers-carousel .offer-price-bar{ padding: .75rem; align-items: flex-end; }
.offers-carousel .offer-price-bar .label{ font-size:.69rem; letter-spacing:.09em; }
.offers-carousel .offer-price-bar strong{ font-size: 1.125rem; }
.offers-carousel .offer-price-bar .go{ width: 52px; height: 52px; border-radius:0; }
.offers-carousel .offer-price-bar .go:hover{ background: var(--black); color:#fff; }

.offers-carousel .carousel-arrow{ top: 35%; border-radius: 0; border-color: #cfcfcf; }
.offers-carousel .carousel-dots button{ width:12px; height:12px; background: #c8c8c8; }
.offers-carousel .carousel-dots button.active{ background: #555; }

/* ============ CATEGORIES filter reuse (voitures page) ============ */
.filter-bar{ display:flex; justify-content:center; gap:.7rem; flex-wrap:wrap; margin-bottom: 3rem; }
.filter-btn{
  border: 1px solid var(--border); background: var(--white); color: var(--gray-700);
  padding: .6em 1.5em; border-radius: var(--radius-sm); font-weight:600; font-size:.88rem;
}
.filter-btn:hover{ border-color: var(--black); color: var(--black); }
.filter-btn.active{ background: var(--black); border-color: var(--black); color:#fff; }

/* ============ ABOUT ============ */
.about-inner{ display:grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items:center; }
.about-visual{ position:relative; }
.about-visual .img-ph{ aspect-ratio: 4/3.4; border-radius: var(--radius-sm); }
.about-stat{
  position:absolute; right: -20px; bottom: -20px;
  background: var(--red); color:#fff;
  padding: 1.6rem 2rem;
  border-radius: var(--radius-sm);
}
.about-stat strong{ display:block; font-family: var(--font-head); font-size: 2.2rem; font-weight:800; }
.about-stat span{ font-family: var(--font-head); font-weight:600; font-size: 1rem; }
.about-copy h2{ font-size: clamp(1.7rem, 3vw, 2.3rem); text-transform:uppercase; }

/* ============ ELECTRIC BANNER ============ */
.electric-banner{ background: var(--black); padding: 90px 0; }
.electric-inner{ display:grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items:center; }
.electric-visual .img-ph{ aspect-ratio: 4/3.2; border-radius: var(--radius-sm); }
.electric-copy h2{ color:#fff; font-size: clamp(1.6rem, 3vw, 2.2rem); text-transform:uppercase; }
.electric-copy p{ color: rgba(255,255,255,.72); }

/* ============ BRANDS (marquee centrée en boucle) ============ */
.brand-marquee{
  overflow: hidden;
  /* bande centrée plutôt qu'un défilement pleine largeur */
  max-width: 1000px;
  margin: 0 auto;
  mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}
.brand-track{
  display:flex; align-items:center; gap: 4.5rem;
  width: max-content;
  animation: brandScroll 24s linear infinite;
}
.brand-marquee:hover .brand-track{ animation-play-state: paused; }
@keyframes brandScroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
.brand-logo{
  height: 96px; width: auto; max-width: 280px;
  object-fit: contain;
  transition: transform .3s ease;
  flex-shrink: 0;
}
.brand-logo:hover{ transform: scale(1.08); }
@media (max-width: 767px){
  .brand-track{ gap: 3rem; }
  .brand-logo{ height: 72px; max-width: 210px; }
}

/* ============ TESTIMONIALS ============ */
.testi-carousel{ position:relative; overflow:hidden; }
.testi-track{ display:flex; gap: 1.6rem; }
.testi-card{
  flex: 0 0 calc(33.333% - 1.067rem);
  background: var(--beige);
  border-left: 4px solid var(--red);
  padding: 2rem 2rem 1.6rem;
  transition: transform .3s ease, box-shadow .3s ease;
}
.testi-card:hover{ transform: translateY(-4px); box-shadow: 0 14px 28px rgba(17,24,39,.08); }
.testi-card p{ font-style: italic; color: var(--ink); font-size: 1rem; margin-bottom: 1.4rem; }
.testi-card strong{ display:block; font-family: var(--font-head); text-transform:uppercase; font-size:.95rem; color: var(--black); }
.testi-card .role{ display:block; font-size:.75rem; letter-spacing:.05em; text-transform:uppercase; color: var(--gray-500); margin-top:.2em; }

/* ============ QUOTE FORM ============ */
.quote-section{
  width: 100%; max-width: 100%;
  background: #f6f7f9;
  padding: 40px 35px;
}
.quote-box{
  max-width: 1400px; margin: 0 auto;
  background: #ffffff;
  border-radius: 22px;
  box-shadow: 0 18px 55px rgba(0,0,0,.10);
  padding: 42px 60px;
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(360px, .85fr);
  gap: 55px;
  align-items: start;
}
/* Base circular icon badge, reused on contact page / info rows / help cards */
.benefit-icon{
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  background: var(--red-tint); color: var(--red);
  display: flex; align-items: center; justify-content: center;
}
.benefit-icon .icon{ width: 20px; height: 20px; }

.quote-left{ min-width:0; }
.quote-kicker{ display:flex; align-items:center; gap:8px; color: var(--red); font-size: 15px; font-weight:900; text-transform:uppercase; margin-bottom:12px; }
.quote-title{ margin:0; font-size: 42px; line-height:1.12; font-weight:900; color:#111827; }
.quote-title .accent{ color: var(--red); }
.quote-intro{ margin: 12px 0 18px; color:#5d6675; font-size:16px; line-height:1.5; }
.quote-line{ width:28px; height:3px; background: var(--red); margin: 0 0 22px; }

.quote-progress{
  position:sticky;
  top:92px;
  z-index:8;
  display:grid;
  grid-template-columns:auto minmax(32px, 1fr) auto;
  align-items:center;
  gap:.8rem;
  margin:0 0 1.7rem;
  padding:.75rem 1rem;
  border:1px solid rgba(227,6,19,.14);
  border-radius:var(--radius-lg);
  background:#fffafa;
  box-shadow:0 10px 28px rgba(17,24,39,.08);
}
.quote-progress-step{ display:flex; align-items:center; gap:.5rem; min-width:0; color:var(--gray-500); cursor:pointer; }
.quote-progress-step:focus-visible{ outline:3px solid rgba(227,6,19,.2); outline-offset:4px; border-radius:999px; }
.quote-progress-step span{
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  flex:0 0 28px;
  border-radius:50%;
  background:#e8e9ec;
  color:#687080;
  font-size:.76rem;
  font-weight:800;
}
.quote-progress-step strong{ font-size:.74rem; line-height:1.25; }
.quote-progress-step.is-active,
.quote-progress-step.is-complete{ color:var(--red); }
.quote-progress-step.is-active span,
.quote-progress-step.is-complete span{ background:var(--red); color:#fff; }
.quote-progress-line{
  position:relative;
  height:2px;
  overflow:hidden;
  background:#e8e9ec;
}
.quote-progress-line::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:50%;
  background:var(--red);
  transition:width .28s ease;
}
.quote-progress.is-step-2 .quote-progress-line::before{ width:100%; }

.quote-form{ min-width:0; }
.form-step-label{
  display:flex; align-items:center; gap:11px;
  color:#111827; font-size:17px; font-weight:900;
  margin: 0 0 14px;
}
.form-step-label.step-2{ margin-top: 30px; }
.form-step-label span{
  width: 27px; height:27px; border-radius:50%;
  background: var(--red); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; flex-shrink:0;
}
.form-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px 20px; }
.form-field{ position:relative; min-width:0; }
.form-field.full{ grid-column: 1 / -1; }
.form-field label{ display:block; font-size:13px; font-weight:700; color:#1f2937; margin-bottom:5px; }
.form-field label em.req{ color: var(--red); font-style:normal; }
.input-icon{ display:contents; }
.input-icon .icon{ position:absolute; left: 14px; top: 38px; color:#9aa3af; pointer-events:none; z-index:2; }
.form-field input, .form-field select, .form-field textarea{
  width:100%; height:50px;
  border-radius: 9px;
  border: 1px solid #d8dee8;
  background: #ffffff;
  font-family: inherit; font-size: 14px; color:#111827;
  padding: 0 14px 0 42px;
  transition: .2s ease;
}
.form-field textarea{ height:74px; padding: 14px 14px 14px 42px; resize:none; line-height:1.45; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
  outline:none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(227,6,19,.08);
}
.quote-submit{ text-align:center; margin-top: 22px; }
.quote-submit .btn{
  border:none; background: var(--red); color:#fff;
  padding: 16px 46px; border-radius: 40px;
  font-size: 15px; font-weight:900; text-transform:uppercase;
  box-shadow: 0 12px 24px rgba(227,6,19,.25);
  transition: .25s ease; display:inline-flex; align-items:center; gap:.5em;
}
.quote-submit .btn:hover{ background:#b9000a; transform: translateY(-2px); }
.form-security-note{ display:flex; align-items:center; justify-content:center; gap:.5em; font-size:13px; color:#7b8492; margin-top:14px; }

.quote-aside{
  background: linear-gradient(180deg, #ffffff 0%, #fff5f5 100%);
  border-radius: 22px;
  padding: 40px 28px;
  box-shadow: 0 12px 35px rgba(0,0,0,.07);
  min-width:0;
}
.quote-aside .benefits-title{ margin:0 0 28px; color: var(--red); font-size:20px; font-weight:900; }
.quote-aside .benefit-item{ display:grid; grid-template-columns: 62px 1fr; gap:16px; align-items:center; margin-bottom:32px; }
.quote-aside .benefit-icon{
  width: 60px; height:60px; border-radius:50%; flex-shrink:0;
  background: #fde4e5; color: var(--red);
  display:flex; align-items:center; justify-content:center; font-size:23px;
}
.quote-aside .benefit-item h4{ margin:0 0 6px; font-size:15px; font-weight:900; color:#111827; }
.quote-aside .benefit-item p{ margin:0; font-size:13.5px; line-height:1.45; color:#4b5563; }

.quote-aside .help-card{
  margin-top: 45px; background:#ffffff; border: 1px solid #f4d4d4; border-radius: 17px;
  padding: 24px; display:grid; grid-template-columns: 66px 1fr; gap:16px; align-items:center;
}
.quote-aside .help-card .benefit-icon{ width:64px; height:64px; font-size:30px; }
.quote-aside .help-card h4{ margin:0 0 5px; font-size:15px; color:#111827; }
.quote-aside .help-card p{ margin:0 0 5px; font-size:13px; color:#4b5563; }
.quote-aside .help-card .phone-big{ color: var(--red); font-weight:900; font-size:20px; }

.quote-aside .secure-note{
  margin-top:35px; background:#fffafa; border-radius:15px; padding:18px;
  display:grid; grid-template-columns: 44px 1fr; gap:14px; align-items:center;
}
.quote-aside .secure-note .benefit-icon{ width:42px; height:42px; background:#dff5d5; color:#43a047; font-weight:900; }
.quote-aside .secure-note strong{ display:block; font-size:14px; color:#111827; }
.quote-aside .secure-note p{ margin:0; font-size:13px; color:#4b5563; }

/* ---- Devis modal ---- */
.devis-modal{ position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; overscroll-behavior:contain; }
.devis-modal[hidden]{ display: none; }
.devis-modal__overlay{ position: absolute; inset: 0; background: rgba(10,10,10,.62); backdrop-filter: blur(3px); animation: devisFade .25s ease; }
.devis-modal__panel{
  position: relative; z-index: 1;
  width: 100%; max-width: 780px; max-height: calc(100vh - 48px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  background: #fff; border-radius: 28px;
  clip-path: inset(0 round 28px);
  scrollbar-gutter: stable;
  box-shadow: 0 24px 70px rgba(0,0,0,.28);
  padding: 42px clamp(20px, 4vw, 48px) 38px;
  animation: devisPop .28s cubic-bezier(.2,.9,.3,1);
}
@keyframes devisFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes devisPop{ from{ opacity:0; transform: translateY(18px) scale(.97); } to{ opacity:1; transform:none; } }
.devis-modal__close{
  position: absolute; top: 16px; right: 16px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--border); background: #fff; color: var(--gray-700);
  display: flex; align-items: center; justify-content: center;
  transition: .2s ease;
}
.devis-modal__close:hover{ background: var(--red); border-color: var(--red); color: #fff; transform: rotate(90deg); }
.devis-modal__head{ text-align: center; margin-bottom: 22px; }
.devis-modal__head .quote-kicker{ justify-content: center; }
.devis-modal__head h2{ margin: 0; font-size: clamp(1.7rem, 3.4vw, 2.3rem); font-weight: 900; color: #111827; text-transform: uppercase; }
.devis-modal__head h2 .accent{ color: var(--red); }
.devis-modal__head p{ margin: 12px auto 0; max-width: 560px; color: #5d6675; font-size: 15px; line-height: 1.5; }
.devis-modal__head .quote-line{ margin: 20px auto 0; }
.devis-modal__panel .quote-progress{ top:14px; }
.devis-modal__vehicle{
  display: flex; align-items: center; gap: .6em;
  background: var(--red-tint); color: var(--red);
  border-radius: 10px; padding: .8em 1.1em; margin: 0 0 20px;
  font-size: .9rem; font-weight: 700;
}
.devis-modal__vehicle[hidden]{ display: none; }
html.devis-open,
body.devis-open{ overflow: hidden; overscroll-behavior:none; }

@media screen and (max-width: 1100px){
  .quote-section{ padding: 30px 20px; }
  .quote-box{ grid-template-columns: minmax(0,1.55fr) minmax(300px,.85fr); gap: 28px; padding: 35px 25px; }
  .quote-title{ font-size:34px; }
  .quote-aside{ padding: 30px 22px; }
  .quote-aside .benefit-item{ grid-template-columns: 52px 1fr; gap:13px; }
  .quote-aside .benefit-icon{ width:52px; height:52px; font-size:20px; }
}
@media screen and (max-width: 850px){
  .quote-box{ grid-template-columns: minmax(0,1.4fr) minmax(260px,.8fr); gap:20px; padding: 28px 18px; }
  .form-grid{ grid-template-columns: 1fr; }
  .quote-title{ font-size:30px; }
  .quote-aside .benefits-title{ font-size:17px; }
  .quote-aside .help-card{ grid-template-columns: 1fr; text-align:center; }
  .quote-aside .help-card .benefit-icon{ margin: 0 auto; }
}
@media screen and (max-width: 650px){
  .quote-section{ padding: 20px 12px; }
  .quote-box{ grid-template-columns: 1fr; padding: 25px 18px; }
  .quote-title{ font-size:29px; }
  .quote-submit .btn{ width:100%; padding-left:20px; padding-right:20px; }
  .quote-progress{ gap:.45rem; padding:.7rem; }
  .quote-progress-step{ gap:.35rem; }
  .quote-progress-step strong{ font-size:.67rem; }
  .quote-progress-step span{ width:25px; height:25px; flex-basis:25px; }
}

@media screen and (max-width: 920px){
  .vtc-filter-panel{
    grid-template-columns:1fr;
    align-items:stretch;
  }
  .subscription-filter-panel{
    grid-template-columns:1fr;
    align-items:stretch;
  }
  .vtc-filter-count{
    white-space:normal;
  }
  .vtc-info-grid,
  .custom-request-layout{
    grid-template-columns:1fr;
  }
  .custom-request-copy{
    position:static;
  }
}

@media screen and (max-width: 650px){
  .vtc-filter-panel{
    padding:14px;
    border-radius:20px;
  }
  .vtc-budget-head{
    align-items:flex-start;
    flex-direction:column;
    gap:4px;
  }
  .service-info-card{
    padding:22px;
    border-radius:20px;
  }
  .service-info-card h2{
    font-size:21px;
  }
  .custom-request-copy h2{
    font-size:34px;
  }
  .custom-request-copy p{
    font-size:16px;
  }
}

/* ============ FOOTER ============ */
.site-footer{ background: var(--white); border-top: 3px solid var(--red); padding: 60px 0 0; }
.footer-grid{ display:grid; grid-template-columns: 1.35fr 1fr 1fr 1fr; gap: 2.5rem; padding-bottom: 40px; }
.footer-brand p{ color: var(--gray-500); margin: 1rem 0 0; max-width: 280px; font-size:.92rem; }
.footer-col h4{
  color: var(--black); font-size: 1rem; margin-bottom: .8rem;
  padding-bottom: .6rem; border-bottom: 2px solid var(--red); display:inline-block;
}
.footer-col a{ display:block; color: var(--gray-700); font-size:.92rem; margin: .7rem 0; }
.footer-col a:hover{ color: var(--red); }
.footer-bottom{
  border-top: 1px solid var(--border);
  padding: 22px 24px; text-align:center;
  font-size:.85rem; color: var(--gray-500);
}
.footer-legal-col a{ font-size:.88rem; }
.site-signature{
  display:block;
  margin-top:.75rem;
  color:var(--gray-300);
  font-size:.68rem;
  letter-spacing:.03em;
}

/* ============ SERVICE PAGES ============ */
.page-hero.page-hero--vehicles .hero-point.hero-action{
  text-decoration:none;
  color:#fff;
  background:var(--red);
  border-color:var(--red);
  box-shadow:0 16px 34px rgba(234,0,18,.24);
}
.page-hero.page-hero--vehicles .hero-point.hero-action:hover{
  border-color:var(--red-dark);
  background:var(--red-dark);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 20px 40px rgba(234,0,18,.32);
}
.page-hero.page-hero--vehicles .hero-point.hero-action svg{
  color:#fff;
}
.vtc-filter-panel{
  display:grid;
  grid-template-columns:minmax(240px,1fr) minmax(240px,1fr) auto;
  align-items:end;
  gap:18px;
  margin:0 0 1.6rem;
  padding:18px;
  background:#fff;
  border:1px solid rgba(17,24,39,.08);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);
}
.vtc-filter-panel .search-field{
  margin-bottom:0;
}
.vtc-budget-filter{
  display:grid;
  gap:12px;
}
.vtc-budget-manual{
  display:grid;
  gap:7px;
}
.vtc-budget-manual span{
  color:var(--gray-500);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.vtc-budget-manual input{
  width:100%;
  padding:.78rem .95rem;
  border:1px solid rgba(17,24,39,.10);
  border-radius:var(--radius-md);
  background:#fff;
  color:var(--ink);
  font-family:inherit;
  font-size:1rem;
  font-weight:800;
}
.vtc-budget-manual input:focus{
  outline:none;
  border-color:var(--red);
  box-shadow:0 0 0 4px rgba(227,6,19,.10);
}
.vtc-budget-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  color:var(--gray-600);
  font-size:.86rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.vtc-budget-head strong{
  color:var(--red);
  font-size:1.12rem;
  letter-spacing:0;
}
.vtc-filter-count{
  margin:0;
  color:var(--gray-600);
  font-weight:700;
  white-space:nowrap;
}
.vtc-empty-state{
  margin:1rem 0 0;
  padding:1.1rem 1.25rem;
  background:var(--red-tint);
  border-left:4px solid var(--red);
  border-radius:var(--radius-md);
  color:var(--gray-700);
  font-weight:700;
}
.subscription-filter-panel{
  display:grid;
  grid-template-columns:minmax(260px,1.05fr) minmax(280px,1fr) minmax(210px,.72fr);
  align-items:end;
  gap:18px 22px;
  margin:0 0 1.6rem;
  padding:18px 20px;
  background:#fff;
  border:1px solid rgba(17,24,39,.08);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);
}
.subscription-filter-panel .search-field{
  margin-bottom:0;
}
.subscription-category-filter{
  display:grid;
  gap:7px;
}
.subscription-category-filter span,
.subscription-card-meta{
  color:var(--gray-500);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.subscription-category-filter select{
  width:100%;
  min-height:48px;
  padding:.78rem .95rem;
  border:1px solid rgba(17,24,39,.10);
  border-radius:var(--radius-md);
  background:#fff;
  color:var(--ink);
  font-family:inherit;
  font-size:1rem;
  font-weight:800;
}
.subscription-category-filter select:focus{
  outline:none;
  border-color:var(--red);
  box-shadow:0 0 0 4px rgba(227,6,19,.10);
}
.subscription-card-meta{
  margin:.2rem 0 1rem;
}
.subscription-filter-panel .vtc-filter-count{
  grid-column:1 / -1;
  justify-self:end;
  padding:.55rem .8rem;
  border-radius:999px;
  background:var(--red-tint);
  color:var(--ink);
  white-space:normal;
}
.offer-card.is-hidden,
.vehicle-card.is-hidden{
  display:none !important;
}
.subscription-benefits-section{
  padding-top:46px;
  padding-bottom:28px;
}
.vtc-details-section{
  padding-top:46px;
  padding-bottom:46px;
}
.subscription-benefits-grid,
.vtc-benefits-grid{
  gap:18px;
}
.subscription-benefits-grid .service-info-card,
.vtc-benefits-grid .service-info-card{
  min-height:0;
  padding:22px 24px;
  transform:translateY(0);
  opacity:1;
  animation:subscriptionCardReveal .58s ease;
  transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.subscription-benefits-grid .service-info-card:nth-child(2),
.vtc-benefits-grid .service-info-card:nth-child(2){
  animation-delay:.08s;
}
.subscription-benefits-grid .service-info-card:nth-child(3),
.vtc-benefits-grid .service-info-card:nth-child(3){
  animation-delay:.16s;
}
.subscription-benefits-grid .service-info-card:hover,
.vtc-benefits-grid .service-info-card:hover{
  transform:translateY(-5px);
  border-color:rgba(227,6,19,.22);
  box-shadow:0 18px 45px rgba(17,24,39,.10);
}
.subscription-benefits-grid .service-info-card h2,
.vtc-benefits-grid .service-info-card h2{
  font-size:22px;
  margin-bottom:10px;
}
.subscription-benefits-grid .service-info-card p,
.vtc-benefits-grid .service-info-card p{
  font-size:.96rem;
  line-height:1.65;
}
.abonnement-catalog{
  padding-top:30px;
}
@keyframes subscriptionCardReveal{
  from{
    opacity:0;
    transform:translateY(12px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}
@media screen and (max-width: 920px){
  .subscription-filter-panel{
    grid-template-columns:1fr;
    align-items:stretch;
    padding:16px;
  }
  .subscription-filter-panel .vtc-filter-count{
    justify-self:start;
  }
  .subscription-benefits-section{
    padding-top:34px;
    padding-bottom:18px;
  }
  .vtc-details-section{
    padding-top:34px;
    padding-bottom:34px;
  }
  .abonnement-catalog{
    padding-top:22px;
  }
}
@media (prefers-reduced-motion: reduce){
  .subscription-benefits-grid .service-info-card{
    animation:none;
    opacity:1;
    transform:none;
    transition:none;
  }
  .vtc-benefits-grid .service-info-card{
    animation:none;
    opacity:1;
    transform:none;
    transition:none;
  }
}
.vtc-info-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}
.vtc-info-grid.subscription-benefits-grid,
.vtc-info-grid.vtc-benefits-grid{
  gap:18px;
}
.service-info-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
  padding:28px;
}
.service-info-card h2{
  font-size:24px;
  margin-bottom:14px;
}
.service-info-card ul{
  display:grid;
  gap:11px;
  color:var(--gray-600);
}
.service-info-card li{
  position:relative;
  padding-left:20px;
}
.service-info-card li::before{
  content:"";
  position:absolute;
  left:0;
  top:.7em;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--red);
}
.service-info-card--red{
  background:linear-gradient(145deg,#111 0%,#250207 100%);
  color:#fff;
  border-color:rgba(255,255,255,.08);
}
.service-info-card--red p{
  color:rgba(255,255,255,.78);
  margin-top:10px;
}
.custom-request-layout{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:34px;
  align-items:start;
}
.custom-request-copy{
  position:sticky;
  top:110px;
}
.custom-request-copy h2{
  font-size:clamp(34px,5vw,58px);
  line-height:1.02;
  letter-spacing:-.04em;
  margin:14px 0 18px;
}
.custom-request-copy p{
  color:var(--gray-600);
  font-size:18px;
  line-height:1.7;
}
.custom-request-form{
  border:1px solid var(--border);
}

/* ============ BACK TO TOP ============ */
.back-to-top{
  position: fixed; right: 26px; bottom: 26px;
  width: 44px; height:44px; border-radius:50%;
  background: var(--black); color:#fff; border:none;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transition: opacity .2s ease;
  z-index: 90;
}
.back-to-top.show{ opacity:1; visibility:visible; }
.back-to-top:hover{ background: var(--red); }

/* ============ PAGE HERO (sous-pages) ============ */
.page-hero{
  position:relative;
  min-height: 480px;
  display:flex; align-items:center; justify-content:center;
  text-align: center;
  background: linear-gradient(rgba(10,10,10,.5), rgba(10,10,10,.72)), var(--black) center/cover no-repeat;
}
.page-hero .eyebrow{ color:#fff; }
.page-hero h1{ color:#fff; font-size: clamp(2rem, 4vw, 2.8rem); text-transform:uppercase; }
.page-hero p{ color: rgba(255,255,255,.72); max-width: 560px; margin: 0 auto; font-size: 1.05rem; }
.page-hero-breadcrumb{ display:flex; justify-content:center; gap:.5em; margin-top:1rem; color: rgba(255,255,255,.55); font-size:.88rem; }
.page-hero-breadcrumb a{ color: rgba(255,255,255,.85); }
.page-hero-breadcrumb a:hover{ color: var(--red); }
.page-hero.page-hero--product{
  min-height: 400px;
  padding: 72px 0;
  background-position: center;
}
.page-hero.page-hero--product::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(620px 260px at 50% 45%, rgba(227,6,19,.12), transparent 70%);
  pointer-events:none;
}
.page-hero.page-hero--product .container{ position:relative; z-index:1; }
.page-hero.page-hero--product h1{ max-width: 860px; margin: 0 auto; }
.page-hero.page-hero--product .page-hero-breadcrumb{ margin-bottom: 0; }
.page-hero.page-hero--vehicles{
  min-height: 540px;
  padding: 76px 0 82px;
}
.page-hero.page-hero--vehicles .page-hero-card{
  max-width: 980px;
  margin: 0;
  text-align: left;
  background: linear-gradient(90deg, rgba(13,13,15,.48), rgba(13,13,15,.16) 72%, transparent);
  border: 0;
  border-left: 3px solid rgba(227,6,19,.85);
  border-radius: 0;
  padding: clamp(2rem, 4vw, 3.35rem);
  box-shadow: none;
  backdrop-filter: none;
}
.page-hero.page-hero--vehicles .hero-badge{ margin-bottom: 1rem; }
.page-hero.page-hero--vehicles h1{
  max-width: 720px;
  margin: 0;
  font-size: clamp(2.2rem, 4vw, 3.25rem);
  text-shadow: 0 3px 18px rgba(0,0,0,.65);
}
.page-hero.page-hero--vehicles p{
  max-width: 680px;
  margin: .9rem 0 0;
  color: rgba(255,255,255,.74);
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
}
.page-hero.page-hero--vehicles .hero-points{
  margin-top: 1.45rem;
  padding-top: 1.3rem;
  justify-content:flex-start;
}
.page-hero.page-hero--vehicles .hero-point{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: .55rem .85rem;
}

.about-visual.overlap{ margin-top: -100px; position:relative; z-index:2; }
.about-stat.dark{ background: var(--black); }

/* ============ ENGAGEMENT (checkerboard features) ============ */
.engagement-section{
  background: linear-gradient(rgba(10,10,10,.72),rgba(10,10,10,.82)), url('../img/Apropos2.png') center/cover no-repeat;
  padding: 90px 0;
}
.engagement-section .section-head{ max-width: 1100px; }
.engagement-section .section-head h2, .engagement-section .section-head p{ color:#fff; }
.engagement-section .section-head p{ color: rgba(255,255,255,.72); }

.features-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--black); }
.feature-card{ padding: 2.4rem 2.2rem; position: relative; z-index: 1; transition: transform .3s ease; }
.feature-card:hover{ transform: scale(1.035); z-index: 2; }
.feature-card .feature-icon{ transition: transform .3s ease; }
.feature-card:hover .feature-icon{ transform: scale(1.15) rotate(-6deg); }
.feature-card:nth-child(odd){ background: var(--beige); }
.feature-card:nth-child(even){ background: var(--black); }
.feature-card:nth-child(even) h3, .feature-card:nth-child(even) p{ color:#fff; }
.feature-icon{ color: var(--red); margin-bottom: 1.2rem; }
.feature-icon .icon{ width:2.4rem; height:2.4rem; }
.feature-card h3{ font-size: 1.05rem; margin-bottom:.4rem; }
.feature-card p{ font-size:.9rem; margin:0; }

/* ============ FAQ (pastilles noires) ============ */
.faq-layout{ display:grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items:start; }
.faq-list{ display:flex; flex-direction:column; gap: .9rem; }
.faq-item{ border-radius: var(--radius-md); }
.faq-question{
  width:100%; text-align:left; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding: 1.1rem 1.4rem;
  font-family: var(--font-head); font-weight:600; font-size:.98rem;
  border-radius: var(--radius-md);
  background: var(--black); color:#fff;
}
.faq-item.open .faq-question{ background: transparent; color: var(--black); padding-left:0; }
.faq-question .plus{
  width:28px; height:28px; border-radius:50%; flex-shrink:0;
  background:#e7e7e7; color: var(--black);
  display:flex; align-items:center; justify-content:center;
}
.faq-item.open .faq-question .plus{ transform: rotate(45deg); }
.faq-question .plus{ transition: transform .3s ease; }
.faq-answer{
  display:block; overflow:hidden;
  max-height:0; opacity:0; padding: 0 0 0;
  transition: max-height .4s ease, opacity .3s ease, padding .35s ease;
}
.faq-item.open .faq-answer{ max-height: 3000px; opacity:1; padding: .7rem 0 .2rem; }
.faq-answer p{ margin:0; font-size:.94rem; }
.faq-visual .img-ph{ aspect-ratio: 4/4.6; border-radius: var(--radius-sm); }

/* ============ CTA full-bleed banner ============ */
.cta-banner{
  position:relative;
  padding: 90px 0;
  text-align:center;
  background: linear-gradient(rgba(10,10,10,.55), rgba(10,10,10,.78)), var(--black) center/cover no-repeat;
  border-bottom: 3px solid var(--red);
}
.cta-banner h2{ color:#fff; text-transform:uppercase; }
.cta-banner p{ color: rgba(255,255,255,.78); max-width: 700px; margin: 0 auto 1.6rem; }
.cta-actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

.cta-section{ background: var(--black); border-radius: var(--radius-md); padding: 3rem clamp(1.6rem, 5vw, 4rem); text-align:center; }
.cta-section h2{ color:#fff; text-transform:uppercase; }
.cta-section p{ color: rgba(255,255,255,.72); max-width: 620px; margin: 0 auto 1.6rem; }

.shop-layout{ display:grid; grid-template-columns: 280px 1fr; gap: 2.4rem; align-items:start; }
.filters-toggle{
  display:none; align-items:center; gap:.5em;
  background: var(--white); border: 1px solid rgba(17,24,39,.08);
  border-radius: var(--radius-lg); padding: .82em 1.35em;
  font-family: var(--font-head); font-weight:700; letter-spacing:.04em;
  text-transform: uppercase; color: var(--black); margin-bottom: 1.4rem;
  box-shadow: var(--shadow-sm);
}
.filters-toggle:hover{ border-color: rgba(17,24,39,.18); box-shadow: var(--shadow-md); }
.filters-sidebar{
  background: linear-gradient(180deg, #ffffff 0%, #faf7f4 100%);
  border: 1px solid rgba(17,24,39,.06);
  border-radius: var(--radius-lg);
  padding: 1.85rem;
  position: sticky;
  top: 90px;
  box-shadow: var(--shadow-md);
}
.filter-group{ margin-bottom: 1.8rem; }
.filter-group:last-child{ margin-bottom:0; }
.filter-group h4{
  font-size:.76rem; margin-bottom: .9rem; color: var(--gray-500);
  text-transform: uppercase; letter-spacing:.06em;
}
.filter-checkbox{ display:flex; align-items:center; gap:.7em; font-size:.9rem; color: var(--gray-700); margin-bottom:.65rem; cursor:pointer; }
.filter-checkbox input{ accent-color: var(--red); width:16px; height:16px; flex-shrink:0; }
.budget-value{ font-weight:700; color: var(--black); font-family: var(--font-head); margin-bottom:.6rem; display:block; }
.budget-slider{
  width:100%; -webkit-appearance:none; appearance:none;
  height:4px; border-radius:2px; background: var(--gray-300);
  outline:none;
}
.budget-slider::-webkit-slider-runnable-track{ height:4px; border-radius:2px; background: var(--gray-300); }
.budget-slider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:16px; height:16px; border-radius:50%;
  background: var(--red); border:2px solid var(--white);
  box-shadow: 0 0 0 1px var(--red);
  margin-top:-6px; cursor:pointer;
}
.budget-slider::-moz-range-track{ height:4px; border-radius:2px; background: var(--gray-300); }
.budget-slider::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%;
  background: var(--red); border:2px solid var(--white);
  box-shadow: 0 0 0 1px var(--red); cursor:pointer;
}
.budget-slider::-moz-range-progress{ background: var(--gray-300); height:4px; border-radius:2px; }

.search-field{ position:relative; margin-bottom: 1.6rem; }
.search-field input{
  width:100%; padding: .86em 1em .86em 2.6em; border-radius: var(--radius-md);
  border:1px solid rgba(17,24,39,.08); background:#fff; font-family:inherit; font-size:.92rem; color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.search-field input:focus{ outline:none; border-color: var(--red); }
.search-field .icon{ position:absolute; left:12px; top:50%; transform:translateY(-50%); color: var(--gray-500); width:16px; height:16px; pointer-events:none; }
.filter-reset{
  width:100%;
  margin:-.65rem 0 1.55rem;
  padding:.62rem .8rem;
  border:1px solid rgba(227,6,19,.22);
  border-radius:var(--radius-md);
  background:var(--red-tint);
  color:var(--red);
  font-size:.74rem;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.filter-reset:hover{ background:var(--red); color:#fff; border-color:var(--red); }
.vehicles-toolbar{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  margin-bottom: 1.4rem; padding: 1rem 1.15rem;
  background: var(--white); border: 1px solid rgba(17,24,39,.06);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
}
.vehicles-toolbar__copy{ display:flex; flex-direction:column; gap:.2rem; min-width:0; }
.vehicles-toolbar__copy strong{
  font-family: var(--font-head); font-weight:800; font-size:1.02rem;
  color: var(--black); letter-spacing:-.01em;
}
.vehicles-toolbar__copy span{ color: var(--gray-700); font-size:.9rem; }
.vehicle-sort{
  display:flex; flex-direction:column; gap:.35rem; min-width: 220px;
}
.vehicle-sort span{
  font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color: var(--gray-500);
}
.vehicle-sort select{
  width:100%; appearance:none; -webkit-appearance:none;
  border:1px solid rgba(17,24,39,.08); background:#faf8f6;
  border-radius: var(--radius-md); padding:.86em 1em;
  font-family:inherit; font-size:.92rem; color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.vehicle-sort select:focus{
  outline:none; border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(227,6,19,.12);
}
.vehicle-quick-filters{
  display:flex;
  align-items:center;
  gap:.55rem;
  flex-wrap:wrap;
  margin:-.35rem 0 1.25rem;
}
.vehicle-quick-filters > span{
  margin-right:.2rem;
  color:var(--gray-500);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.quick-filter{
  padding:.48rem .78rem;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--white);
  color:var(--gray-700);
  font-size:.78rem;
  font-weight:700;
}
.quick-filter:hover,
.quick-filter.active{ border-color:var(--red); background:var(--red); color:#fff; }
.vehicles-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; }
.grid-empty{ text-align:center; color: var(--gray-500); padding: 3rem 0; grid-column: 1/-1; }

.offer-price-bar.dark{ background: var(--black); }
.vehicle-card.is-selected{
  border-color: rgba(227,6,19,.45);
  box-shadow: var(--shadow-red);
  transform: translateY(-4px);
}
.compare-toggle{
  position:absolute; top:12px; right:12px; z-index:3;
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.46rem .68rem;
  border-radius: 999px;
  background: rgba(255,255,255,.95);
  color: var(--black);
  box-shadow: var(--shadow-md);
  font-size:.68rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
}
.compare-toggle:hover{ transform: translateY(-1px); }
.compare-toggle input{
  width:15px; height:15px; margin:0;
  accent-color: var(--red);
  flex-shrink:0;
}
.compare-toggle.is-active{
  background: var(--red);
  color:#fff;
}
.compare-toggle.is-active input{ accent-color: #fff; }

.compare-panel{
  margin-top: 2.8rem;
}
.compare-panel .section-head{ margin-bottom: 1.4rem; }
.compare-panel .section-head p{ max-width: 760px; }
.compare-panel .kicker-line{ margin-bottom: .9rem; }
.compare-clear{
  margin:0 0 1rem;
  padding:.65rem .95rem;
  border:1px solid rgba(227,6,19,.24);
  border-radius:var(--radius-md);
  background:var(--red-tint);
  color:var(--red);
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.compare-clear:hover{ background:var(--red); color:#fff; border-color:var(--red); }

.pagination{ display:flex; justify-content:center; gap:.5rem; margin-top: 3rem; flex-wrap:wrap; }
.pagination button{
  width:42px; height:42px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--white); color: var(--black);
  font-family: var(--font-head); font-weight:600;
}
.pagination button:hover{ border-color: var(--black); }
.pagination button.active{ background: var(--red); border-color: var(--red); color:#fff; }

.news-post-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 1.8rem; }
.city-filter-box{ background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 2rem; margin-top: 3rem; }
.city-filter{ display:flex; flex-wrap:wrap; justify-content:center; gap:.8rem; }
.city-pill{
  border: 2px solid var(--red); background: var(--white); color: var(--red);
  padding: .7em 1.6em; border-radius: var(--radius-sm);
  font-family: var(--font-head); font-weight:700; font-size:.85rem;
  text-transform: uppercase; letter-spacing:.03em;
}
.city-pill:hover{ background: var(--red-tint); }
.city-pill.active{ background: var(--red); color:#fff; }
.news-post{ background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); overflow:hidden; display:flex; flex-direction:column; transition: transform .3s ease, box-shadow .3s ease; }
.news-post:hover{ transform: translateY(-5px); box-shadow: 0 16px 32px rgba(17,24,39,.1); }
.news-post-media{
  display:block;
  overflow: hidden;
  background:#d7d2cb;
  transition: transform .5s ease;
}
.news-post-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.news-post:hover .news-post-media{ transform: scale(1.06); }
.news-post.hide{ display:none; }
.news-post-media{ height: 190px; }
.news-post-body{ padding: 1.6rem 1.7rem 1.8rem; }
.news-post-city{ display:inline-block; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color: var(--black); background: var(--beige); padding:.35em .9em; border-radius:4px; margin-bottom:.8rem; }
.news-post-body h3{ font-size:1.2rem; margin-bottom:.6rem; }
.news-post-body h3 a:hover{ color: var(--red); }
.news-post-body p{ font-size:.92rem; }
.news-post-body .category-link{ color: var(--red); font-weight:700; }
.news-post-body .category-link:hover{ color: var(--red-dark); }
.news-empty{ text-align:center; color: var(--gray-500); padding: 2rem 0; grid-column: 1/-1; }

/* ---- Editorial blog ---- */
.blog-intro{
  display:grid;
  grid-template-columns:minmax(0, 1.35fr) minmax(230px, .65fr);
  gap:2rem;
  align-items:end;
  margin-bottom:2.4rem;
}
.blog-intro h2{ max-width:720px; margin-bottom:.7rem; }
.blog-intro p{ max-width:760px; margin:0; }
.blog-proof{
  display:grid;
  gap:.35rem;
  padding:1.35rem 1.5rem;
  border-left:4px solid var(--red);
  background:var(--beige);
}
.blog-proof strong{ font-family:var(--font-head); font-size:1.05rem; }
.blog-proof span{ color:var(--gray-700); font-size:.9rem; line-height:1.55; }
.blog-toolbar{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  align-items:center;
  margin-bottom:2rem;
  padding:1rem;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  background:rgba(255,255,255,.72);
}
.blog-filters{ display:flex; flex-wrap:wrap; gap:.55rem; }
.blog-filters .city-pill{ padding:.58em .9em; font-size:.72rem; border-width:1px; }
.blog-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1.25rem; }
.blog-card{ border-radius:var(--radius-lg); }
.blog-card .news-post-media{ position:relative; height:220px; }
.blog-card-date{
  position:absolute;
  left:1rem;
  bottom:1rem;
  padding:.45em .75em;
  border-radius:999px;
  background:rgba(13,13,15,.82);
  color:#fff;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.04em;
}
.blog-card .news-post-body{ display:flex; flex:1; flex-direction:column; }
.blog-card .news-post-body p{ flex:1; }
.blog-card .category-link{ display:inline-flex; gap:.45rem; align-items:center; margin-top:1rem; }
.blog-card .category-link span{ font-size:1.15em; transition:transform .2s ease; }
.blog-card:hover .category-link span{ transform:translateX(4px); }
.article-kicker{
  display:inline-flex;
  margin-bottom:.8rem;
  padding:.45em .9em;
  border-radius:999px;
  background:var(--red-tint);
  color:var(--red);
  font-size:.75rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.article-single--v2 .article-body h2{
  max-width:700px;
  margin:2.1rem auto .7rem;
  font-size:1.35rem;
  line-height:1.25;
}
.article-single--v2 .article-body h2:first-child{ margin-top:0; }

/* ---- Legal pages (mentions, CGV, confidentialité) ---- */
.legal-page{ max-width: 860px; margin: 0 auto; }
.legal-page h2{
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  text-transform: uppercase;
  color: var(--black);
  margin: 2.6rem 0 .9rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--red);
  display: inline-block;
}
.legal-page h2:first-of-type{ margin-top: 0; }
.legal-page p{ font-size: 1rem; line-height: 1.75; }
.legal-page a{ color: var(--red); font-weight: 600; }
.legal-page a:hover{ color: var(--red-dark); text-decoration: underline; }
.legal-page .legal-meta{
  background: var(--beige);
  border-left: 4px solid var(--red);
  border-radius: var(--radius-sm);
  padding: 1.2rem 1.4rem;
  margin-bottom: 2.4rem;
  line-height: 1.9;
}
.legal-list{ margin: 0 0 1.3rem; padding: 0; }
.legal-list li{
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: .7rem;
  color: var(--gray-700);
  line-height: 1.7;
}
.legal-list li::before{
  content: "";
  position: absolute; left: 0; top: .65em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--red);
}
.legal-list li strong{ color: var(--black); }

/* ---- Single article page ---- */
.article-single{ max-width: 820px; margin: 0 auto; }
.article-head{ text-align:center; margin-bottom: 2.4rem; }
.article-head h1{ font-size: clamp(1.6rem, 3.4vw, 2.4rem); text-transform:uppercase; margin-bottom:.7rem; }
.article-date{ color: var(--red); font-weight:700; font-size:.95rem; margin:0; }
.article-media{
  aspect-ratio: 16/9;
  border-radius: var(--radius-md);
  margin:0 0 2.4rem;
  overflow:hidden;
  background:#d7d2cb;
}
.article-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.article-body p{ font-size: 1.02rem; line-height: 1.75; margin-bottom: 1.3rem; }
.article-back{ margin-top: 2.6rem; text-align:center; }

.contact-layout{ display:grid; grid-template-columns: 1.2fr .8fr; gap: 2.6rem; align-items:start; }
.contact-form-card{ background: var(--white); border-radius: var(--radius-lg, 16px); box-shadow: 0 4px 24px rgba(17,24,39,.06); padding: 2.4rem clamp(1.4rem, 4vw, 2.8rem); }
.contact-form-card textarea{ padding-left: 2.6em; }
.contact-info{ display:flex; flex-direction:column; gap: 1.4rem; }

.contact-info-panel{ background: #f4f3f6; border-radius: var(--radius-lg, 16px); padding: 2rem clamp(1.4rem, 3vw, 2.2rem); }
.contact-info-panel h3{ color: var(--red); font-size: 1.4rem; margin-bottom: 1.4rem; }
.info-row{ display:flex; gap: 1rem; align-items:flex-start; padding: 1.1rem 0; border-top: 1px solid rgba(17,24,39,.08); }
.info-row:first-of-type{ border-top:none; padding-top:0; }
.info-row .benefit-icon{ background: var(--red-tint); color: var(--red); width:52px; height:52px; }
.info-row h4{ font-size:.92rem; margin-bottom:.3rem; }
.info-row .value-red{ color: var(--red); font-weight:600; }
.info-row p{ margin:0; color: var(--gray-700); font-size:.95rem; }

.help-card{ background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg, 16px); padding: 1.8rem; display:flex; gap: 1rem; align-items:flex-start; }
.help-card .benefit-icon{ background: var(--red-tint); color: var(--red); }

.devis-note-bar{
  background: var(--white); border-radius: var(--radius-lg, 16px);
  box-shadow: 0 4px 24px rgba(17,24,39,.06);
  padding: 1.8rem 2rem;
  display:flex; align-items:center; justify-content:space-between; gap: 1.6rem;
  flex-wrap:wrap; margin-top: 2.6rem;
}
.devis-note-bar .row{ display:flex; align-items:center; gap:1.2rem; }
.devis-note-bar p{ margin:0; color: var(--gray-700); font-size:.95rem; }
.devis-note-bar strong{ color: var(--black); }

.btn-pill{ border-radius: 999px; }

.map-embed{ width:100%; height: 420px; border:0; display:block; }

.form-success-note{ display:none; align-items:center; gap:.6em; color: var(--black); font-weight:600; margin-top:1rem; }
.form-success-note.show{ display:flex; }

.success-popup{
  position:fixed;
  inset:0;
  z-index:320;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}
.success-popup.show{
  opacity:1;
  pointer-events:auto;
}
.success-popup__overlay{
  position:absolute;
  inset:0;
  background:rgba(10,10,10,.42);
  backdrop-filter:blur(2px);
}
.success-popup__panel{
  position:relative;
  width:min(440px, 100%);
  background:#fff;
  border-radius:22px;
  padding:34px 28px 30px;
  text-align:center;
  box-shadow:0 24px 70px rgba(0,0,0,.24);
  transform:translateY(12px) scale(.97);
  transition:transform .22s cubic-bezier(.2,.9,.3,1);
}
.success-popup.show .success-popup__panel{ transform:none; }
.success-popup__badge{
  display:flex;
  align-items:center;
  justify-content:center;
  width:74px;
  height:74px;
  margin:0 auto 18px;
  border-radius:50%;
  background:#e6f8ec;
  color:#15a34a;
  box-shadow:0 0 0 10px rgba(21,163,74,.08);
}
.success-popup__badge .icon{ width:36px; height:36px; }
.success-popup__title{
  margin:0 0 8px;
  color:#101216;
  font-size:1.5rem;
  font-weight:900;
}
.success-popup__text{
  margin:0 auto 22px;
  color:#566070;
  line-height:1.55;
  max-width:320px;
}
.success-popup__close{
  border:0;
  border-radius:999px;
  background:var(--red);
  color:#fff;
  padding:12px 24px;
  font:inherit;
  font-weight:900;
  cursor:pointer;
}
.success-popup__close:hover{ background:#b9000a; }

/* ============ PRODUCT PAGE ============ */
.product-overview-section{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(520px 280px at 96% 10%, rgba(227,6,19,.08), transparent 70%),
    linear-gradient(135deg, #f3efec 0%, #fff 62%, #faf7f4 100%);
}
.product-overview-section::before{
  content:"";
  position:absolute; width:320px; height:320px;
  right:-150px; bottom:-170px;
  border: 1px solid rgba(227,6,19,.12);
  border-radius:50%;
  box-shadow: 0 0 0 32px rgba(227,6,19,.025), 0 0 0 64px rgba(227,6,19,.018);
  pointer-events:none;
}
.product-top{ display:grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items:start; }
.product-top{ position:relative; z-index:1; }
.product-visual-column{ display:grid; gap:1rem; align-content:start; }
.product-image{
  position:relative; border-radius: var(--radius-xl); overflow:hidden; cursor: zoom-in;
  background:var(--white); border:1px solid rgba(13,13,15,.08); box-shadow:var(--shadow-lg);
}
.product-image .img-ph{
  aspect-ratio: 1505/688;
  background-size:contain;
  background-position:center center;
  background-repeat:no-repeat;
  background-color:#fff;
  transition: transform .25s ease;
}
/* Magnify on hover, anchored to the cursor (origin set from JS) */
.product-image:hover .img-ph{ transform: scale(1.8); }
.product-image .zoom-link{
  position:absolute; top:16px; right:16px; z-index:2;
  width:44px; height:44px; border-radius:50%;
  background: var(--white); color: var(--black);
  border: none;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 4px 14px rgba(0,0,0,.15);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.product-image .zoom-link:hover{ background: var(--red); color:#fff; transform: scale(1.08); }
.product-info{
  background:var(--white); border:1px solid rgba(13,13,15,.08);
  border-radius:var(--radius-xl); padding:clamp(1.5rem, 3vw, 2.8rem);
  box-shadow:var(--shadow-lg);
}
.product-info h1{ letter-spacing:-.02em; }
.top-badges .badge-box{ box-shadow:var(--shadow-sm); }
.price-rows{
  padding:1.15rem 1.25rem; border:1px solid var(--border);
  border-radius:var(--radius-lg); background:#faf8f6;
}
.price-rows li{ padding:.35rem 0; }
.price-rows li + li{ border-top:1px dashed var(--border); }
.product-info > .btn{ box-shadow:var(--shadow-red); }

/* ---- Image lightbox ---- */
.lightbox{ position: fixed; inset: 0; z-index: 220; display:flex; align-items:center; justify-content:center; padding: 32px; }
.lightbox[hidden]{ display:none; }
.lightbox__overlay{ position:absolute; inset:0; background: rgba(10,10,10,.86); animation: devisFade .25s ease; }
.lightbox__img{
  position:relative; z-index:1;
  max-width: min(1100px, 100%); max-height: calc(100vh - 64px);
  width:auto; height:auto; object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: 0 24px 70px rgba(0,0,0,.5);
  animation: devisPop .28s cubic-bezier(.2,.9,.3,1);
}
.lightbox__close{
  position:absolute; top:24px; right:24px; z-index:2;
  width:48px; height:48px; border-radius:50%;
  background: rgba(255,255,255,.12); color:#fff;
  border: 1px solid rgba(255,255,255,.35);
  display:flex; align-items:center; justify-content:center;
  transition: .2s ease;
}
.lightbox__close:hover{ background: var(--red); border-color: var(--red); transform: rotate(90deg); }
body.lightbox-open{ overflow:hidden; }
.top-badges{ display:flex; gap: 1rem; flex-wrap:wrap; margin-bottom: 1.6rem; }
.top-badges .badge-box{
  background: var(--beige); border-left: 3px solid var(--red);
  border-radius: var(--radius-sm);
  padding: .8rem 1.2rem;
  flex: 1 1 180px;
}
.top-badges .badge-box .label{ display:block; font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; color: var(--gray-500); font-weight:700; margin-bottom:.3rem; }
.top-badges .badge-box strong{ display:block; font-size:1.05rem; color: var(--black); }

.product-info h1{ font-size: clamp(1.7rem, 3vw, 2.4rem); text-transform:uppercase; margin-bottom:.3rem; }
.product-info .variant{ color: var(--gray-500); font-size: 1.1rem; margin-bottom: 1.6rem; }

.price-rows{ margin: 0 0 1.8rem; display:flex; flex-direction:column; gap: 1rem; }
.price-rows li{ display:flex; align-items:center; gap: 1rem; }
.price-rows .row-icon{
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  background: var(--red-tint); color: var(--red);
  display:flex; align-items:center; justify-content:center;
}
.price-rows strong{ font-family: var(--font-head); font-size: 1.1rem; color: var(--black); }
.product-services-card{
  background:#f7f7f7;
  border:1px solid rgba(13,13,15,.08);
  border-radius:var(--radius-md);
  padding:1.25rem 1.5rem;
  box-shadow:var(--shadow-sm);
}
.product-services-card[hidden]{ display:none; }
.product-services-card h2{
  margin:0 0 .8rem;
  font-family:var(--font-head);
  font-size:1.1rem;
  color:var(--black);
}
.product-services-card ul{ margin:0; display:grid; gap:.55rem; }
.product-services-card li{
  display:flex;
  align-items:flex-start;
  gap:.65rem;
  color:var(--gray-700);
  font-size:.96rem;
}
.product-services-card li::before{
  content:'✓';
  color:var(--red);
  font-weight:800;
  flex:0 0 auto;
}

.fiche-technique{
  position:relative;
  background: linear-gradient(rgba(10,10,10,.68), rgba(10,10,10,.72)), var(--black) center/cover no-repeat;
  padding: 90px 0;
  overflow:hidden;
}
.fiche-technique::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(760px 420px at 8% 8%, rgba(227,6,19,.17), transparent 64%),
    radial-gradient(660px 380px at 100% 100%, rgba(227,6,19,.10), transparent 66%);
  pointer-events:none;
}
.fiche-technique > .container{ position:relative; z-index:1; }
.fiche-technique .category-badge{ box-shadow:var(--shadow-sm); }
.fiche-card{ box-shadow:var(--shadow-lg); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-xl); }
.fiche-card .faq-item{ border-bottom:1px solid var(--border); }
.fiche-card .faq-item:last-child{ border-bottom:none; }
.fiche-card .faq-question{ font-family:var(--font-head); font-weight:700; letter-spacing:.01em; }
.fiche-grid{ display:grid; grid-template-columns: .8fr 1.2fr; gap: 3rem; align-items:start; }
.fiche-technique h2{ color:#fff; font-size: clamp(1.6rem, 3vw, 2.2rem); text-transform:uppercase; margin-bottom: 2rem; }
.badges-wrap{ display:flex; flex-wrap:wrap; gap: 1rem; }
.category-badge{
  display:inline-flex; align-items:center; gap: 1rem;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--radius-md); padding: 1rem 1.4rem;
}
.category-badge .icon-box{ width:44px; height:44px; border-radius: var(--radius-sm); background: var(--white); color: var(--black); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.category-badge .label{ display:block; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color: rgba(255,255,255,.6); }
.category-badge strong{ color:#fff; font-size:1rem; }

.fiche-card{ background: var(--white); border-radius: var(--radius-md); padding: 2rem clamp(1.2rem, 3vw, 2.4rem); }
.fiche-card .faq-list{ gap: .8rem; }
.fiche-card .faq-answer h4{ font-size: 1.05rem; margin: 1.4rem 0 .4rem; }
.fiche-card .faq-answer h4:first-child{ margin-top:0; }
.fiche-card .faq-answer .subvariant{ color: var(--gray-500); font-size:.95rem; margin-bottom:1rem; }
.spec-list{ margin: 0 0 1.6rem; }
.spec-list li{ display:flex; gap:.4em; padding:.5rem 0; border-bottom:1px dashed var(--border); font-size:.92rem; }
.spec-list li:last-child{ border-bottom:none; }
.spec-list li strong{ color: var(--black); min-width: 220px; flex-shrink:0; }
.spec-list li span{ color: var(--gray-700); }

.blog-cta-banner{
  background: var(--black) center/cover no-repeat;
  padding: 80px 24px;
  text-align:center;
  border-bottom: 3px solid var(--red);
}
.blog-cta-banner h2{ color:#fff; text-transform:uppercase; max-width:800px; margin:0 auto 1.8rem; font-size: clamp(1.4rem, 3vw, 2rem); }

.product-support-strip{
  padding: clamp(2.8rem, 6vw, 4.8rem) 0;
  background:
    radial-gradient(circle at 8% 20%, rgba(235, 0, 19, .08), transparent 28%),
    linear-gradient(180deg, #fff 0%, #f5f1ee 100%);
  border-top: 1px solid rgba(17, 24, 39, .08);
  border-bottom: 3px solid var(--red);
}
.product-support-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:1rem;
}
.product-support-grid article{
  background:rgba(255,255,255,.86);
  border:1px solid rgba(17,24,39,.09);
  border-radius:var(--radius-lg);
  padding:clamp(1.3rem, 2.4vw, 2rem);
  box-shadow:var(--shadow-sm);
}
.product-support-grid span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:999px;
  background:var(--red);
  color:#fff;
  font-family:var(--font-head);
  font-weight:800;
  margin-bottom:1rem;
}
.product-support-grid h2{
  font-size:clamp(1.15rem, 2vw, 1.55rem);
  margin:0 0 .65rem;
}
.product-support-grid p{
  margin:0;
  color:var(--gray-600);
}

@media (max-width: 900px){
  .product-support-grid{
    grid-template-columns:1fr;
  }
}
@media (max-width: 767px){
  .product-support-strip{
    padding:2.2rem 0;
  }
  .product-support-grid article{
    padding:1.15rem;
  }
  .product-support-grid h2{
    font-size:1.08rem;
  }
  .product-support-grid p{
    font-size:.92rem;
  }
}

.related-section{
  background:linear-gradient(180deg, #f3efec 0%, #fff 100%);
}
.related-title{ text-align:left; max-width:820px; margin:0 0 2.4rem; }
.related-title .eyebrow{ justify-content:flex-start; }
.related-section .offers-carousel{
  padding-top:1.2rem;
  border:1px solid rgba(13,13,15,.08);
  border-radius:var(--radius-xl);
  background:rgba(255,255,255,.52);
  box-shadow:var(--shadow-md);
}
.related-section .offers-track{ padding:0 .35rem .35rem; }
.related-section .offers-carousel .offer-card{
  border-radius:var(--radius-lg); border:1px solid var(--border); box-shadow:var(--shadow-sm);
}
.related-section .offers-carousel .offer-card:hover{ box-shadow:var(--shadow-md); }
.related-section .carousel-dots{ margin-top:1.25rem; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1080px){
  .category-grid{ grid-template-columns: repeat(3, 1fr); }
  .offer-card{ flex-basis: calc(33.333% - 1rem); }
  .about-inner, .electric-inner{ grid-template-columns: 1fr; }
  .about-visual.overlap{ margin-top:0; }
  .about-stat{ position:static; margin-top: -1px; display:inline-flex; align-items:center; gap:.8rem; }
  .about-stat strong{ font-size:1.6rem; }
  .faq-layout{ grid-template-columns: 1fr; }
  .faq-visual{ order:-1; }
  .vehicles-grid{ grid-template-columns: repeat(2, 1fr); }
  .contact-layout{ grid-template-columns: 1fr; }
  .devis-note-bar{ flex-direction:column; align-items:flex-start; }
  .map-embed{ height: 300px; }
  .testi-card{ flex-basis: calc(50% - .8rem); }
  .product-top{ grid-template-columns: 1fr; }
  .fiche-grid{ grid-template-columns: 1fr; }
  .spec-list li{ flex-direction:column; gap:.1em; }
  .spec-list li strong{ min-width:0; }
  .vehicles-toolbar{ align-items:flex-start; }
  .vehicle-sort{ min-width: 200px; }
}
@media (max-width: 900px){
  .main-nav{ display:none; }
  .header-quote{ display:none; }
  .header-actions .header-phone:not(.mobile){ display:none; }
  .burger{ display:block; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .features-grid{ grid-template-columns: repeat(2, 1fr); }
  .shop-layout{ grid-template-columns: 1fr; }
  .filters-toggle{ display:inline-flex; }
  .filters-sidebar{ position: fixed; top:0; right:0; height:100vh; width: min(320px, 85vw); z-index: 210; border-radius:0; overflow-y:auto; transform: translateX(100%); transition: transform .3s ease; }
  .filters-sidebar.open{ transform: translateX(0); }
  .news-post-grid{ grid-template-columns: 1fr; }
  .blog-intro{ grid-template-columns:1fr; align-items:start; }
  .blog-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .blog-toolbar{ align-items:flex-start; flex-direction:column; }
  .page-hero.page-hero--news h1,
  .page-hero.page-hero--article h1{ width:100%; max-width:100%; overflow-wrap:anywhere; }
  .news-section .container,
  .blog-intro > *,
  .blog-toolbar > *{ min-width:0; }
  .carousel-prev{ left: 6px; }
  .carousel-next{ right: 6px; }
  .vehicles-toolbar{ flex-direction:column; align-items:stretch; }
  .vehicle-sort{ min-width: 0; }
}
@media (min-width: 901px) and (max-width: 1080px){
  .main-nav{ gap:1.1rem; }
  .header-actions{ gap:.6rem; }
  .header-phone{ font-size:.78rem; padding:.7em .9em; }
  .header-quote{ font-size:.72rem; padding:.75em 1em; }
}
@media (max-width: 720px){
  .category-grid{ grid-template-columns: repeat(2, 1fr); }
  .offer-card{ flex-basis: calc(50% - .75rem); }
  .testi-card{ flex-basis: 100%; }
  .form-grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
  .section{ padding: 60px 0; }
  .features-grid{ grid-template-columns: 1fr; }
  .vehicles-grid{ grid-template-columns: 1fr; }
  .section-head-row{ flex-direction:column; align-items:flex-start; }
  .page-hero.page-hero--vehicles{
    min-height: 0;
    padding: 56px 0 62px;
  }
  .page-hero.page-hero--vehicles .page-hero-card{
    padding: 1.5rem;
  }
  .page-hero.page-hero--vehicles .hero-points{
    flex-direction:column;
    align-items:flex-start;
  }
  .page-hero.page-hero--product{ min-height:340px; padding:58px 0; }
}
@media (max-width: 480px){
  .category-grid{ grid-template-columns: 1fr; }
  .offer-card{ flex-basis: 100%; }
  .hero-cta{ flex-direction:column; align-items:stretch; }
  .vehicles-toolbar{ padding: .95rem 1rem; }
}

/* Homepage offers carousel breakpoints (matches original plugin: 3 / 2 / 1) */
@media (max-width: 980px){
  .offers-carousel{ padding-left: 46px; padding-right: 46px; }
  .offers-carousel .offer-card{ flex-basis: calc((100% - 1.5rem) / 2); }
}
@media (max-width: 767px){
  .offers-carousel{ padding-left: 0; padding-right: 0; padding-bottom: 46px; }
  .offers-carousel .offer-card{ flex-basis: 100%; min-height: auto; }
  .offers-carousel .offer-body h3, .offers-carousel .offer-body p{ min-height: auto; }
  .offers-carousel .carousel-arrow{
    display:flex;
    width:36px;
    height:36px;
    top:38%;
  }
}

/* =========================================================
   REFONTE V2 — système visuel
   Même charte (Poppins/Inter, rouge/noir/beige/blanc),
   usage repensé : rythme sombre/clair, rouge rare et fort,
   profondeur (ombres, dégradés), typo éditoriale.
   ========================================================= */

:root{
  --ink-900: #0d0d0f;
  --ink-800: #16161a;
  --ink-700: #1f1f25;
  --shadow-sm: 0 2px 8px rgba(13,13,15,.06);
  --shadow-md: 0 10px 30px rgba(13,13,15,.10);
  --shadow-lg: 0 24px 60px rgba(13,13,15,.16);
  --shadow-red: 0 14px 34px rgba(227,6,19,.28);
  --radius-lg: 18px;
  --radius-xl: 24px;
}

/* ---- Sections sombres : points d'ancrage du parcours ---- */
.section.dark{
  background: var(--ink-900);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.section.dark::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(900px 420px at 12% -10%, rgba(227,6,19,.16), transparent 60%),
    radial-gradient(700px 380px at 105% 110%, rgba(227,6,19,.10), transparent 60%);
  pointer-events:none;
}
.section.dark > *{ position:relative; z-index:1; }
.section.dark h2,
.section.dark h3,
.section.dark h4{ color:#fff; }
.section.dark p{ color: rgba(255,255,255,.68); }
.section.dark .section-head p{ color: rgba(255,255,255,.68); }
.section.dark .eyebrow{ color: #ff5560; }
.section.dark .eyebrow::before,
.section.dark .eyebrow::after{ background: #ff5560; }

/* ---- Titre de section v2 ---- */
.section-head .kicker-line{
  width: 46px; height: 3px; background: var(--red);
  margin: 0 auto 1.1rem;
}
.section-head.left .kicker-line{ margin-left: 0; }

/* ---- Barre de confiance (stats) ---- */
.trust-bar{
  background: var(--ink-900);
  color:#fff;
  padding: 0;
}
.trust-grid{
  display:grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255,255,255,.09);
}
.trust-item{
  background: var(--ink-900);
  padding: 2.4rem 1.6rem;
  text-align:center;
}
.trust-item strong{
  display:block;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 2.9rem);
  line-height: 1;
  color:#fff;
  letter-spacing: -.02em;
}
.trust-item strong .unit{ color: var(--red); }
.trust-item > span{
  display:block; margin-top:.6rem;
  font-size: .78rem; letter-spacing: .09em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
}

/* ---- Engagements : uniquement les promesses déjà présentes sur le site ---- */
.commitments-section{
  background:
    radial-gradient(520px 260px at 0% 20%, rgba(227,6,19,.08), transparent 70%),
    #fff;
}
.commitments-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:1rem;
}
.commitment-card{
  display:flex;
  align-items:flex-start;
  gap:.9rem;
  min-width:0;
  padding:1.25rem;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}
.commitment-card:hover{ border-color:rgba(227,6,19,.3); box-shadow:var(--shadow-md); }
.commitment-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  flex:0 0 42px;
  border-radius:50%;
  background:var(--red-tint);
  color:var(--red);
}
.commitment-icon .icon{ width:20px; height:20px; }
.commitment-card h3{ font-size:.95rem; margin:0 0 .35rem; }
.commitment-card p{ font-size:.8rem; line-height:1.5; margin:0; }
.commitments-cta{ display:flex; justify-content:center; margin-top:2rem; }

/* ---- Étapes « comment ça marche » ---- */
.steps-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem;
}
.step-card{
  position:relative;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.4rem 1.6rem 1.8rem;
  text-align:center;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.step-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; }
.step-num{
  position:absolute; top:-22px; left:50%; transform: translateX(-50%);
  width:46px; height:46px; border-radius:50%;
  background: var(--red); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-head); font-weight:800; font-size:1.1rem;
  box-shadow: var(--shadow-red);
}
.step-card .icon{ width:30px; height:30px; color: var(--red); margin-bottom:.9rem; }
.step-card h3{ font-size:1.02rem; margin-bottom:.5rem; }
.step-card p{ font-size:.9rem; margin:0; }
.section.dark .step-card{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.10);
}
.section.dark .step-card:hover{ background: rgba(255,255,255,.08); }

/* ---- Tableau comparatif des formules ---- */
.compare-wrap{ overflow-x:auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.compare-table{
  width:100%; min-width: 760px;
  border-collapse: collapse;
  background: var(--white);
  font-size:.92rem;
}
.compare-table th, .compare-table td{
  padding: 1.05rem 1.2rem;
  text-align:left;
  border-bottom: 1px solid var(--border);
}
.compare-table thead th{
  background: var(--ink-900); color:#fff;
  font-family: var(--font-head); font-weight:700;
  font-size:.86rem; letter-spacing:.05em; text-transform:uppercase;
  border-bottom:none;
  position:relative;
}
.compare-table thead th.is-featured{ background: var(--red); }
.compare-col-title{ display:block; padding-right: 2rem; }
.compare-variant{
  display:block; margin-top:.35rem;
  font-size:.74rem; letter-spacing:0; text-transform:none;
  font-weight:500; color: rgba(255,255,255,.72);
}
.compare-table thead th.is-featured .compare-variant{ color: rgba(255,255,255,.86); }
.compare-remove{
  position:absolute; top:10px; right:10px;
  width:28px; height:28px; border:none;
  border-radius:50%; background: rgba(255,255,255,.14);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1rem; line-height:1;
}
.compare-remove:hover{ background: rgba(255,255,255,.24); transform: scale(1.06); }
.compare-table tbody th{
  font-family: var(--font-body); font-weight:600; color: var(--black);
  background: #faf8f6;
  white-space: nowrap;
}
.compare-table td{ color: var(--gray-700); }
.compare-table td.is-featured{ background: rgba(227,6,19,.04); font-weight:600; color: var(--black); }
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td{ border-bottom:none; }
.compare-yes{ color:#1a9e46; font-weight:700; }
.compare-no{ color: var(--gray-500); }

/* ---- Simulateur de loyer ---- */
.simulator{
  display:grid; grid-template-columns: 380px 1fr; gap: 2.4rem;
  align-items:start;
}
.sim-panel{
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 2rem 1.8rem;
  position: sticky; top: 96px;
}
.sim-panel h3{ font-size:1.15rem; margin-bottom:.3rem; }
.sim-panel > p{ font-size:.88rem; margin-bottom:1.6rem; }
.sim-field{ margin-bottom: 1.5rem; }
.sim-field label{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:.82rem; font-weight:700; color:#1f2937; margin-bottom:.6rem;
}
.sim-field label b{
  font-family: var(--font-head); font-size:1.05rem; color: var(--red);
}
.sim-chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.sim-chip{
  border:1px solid var(--border); background:#fff;
  border-radius: 999px; padding:.5em 1em;
  font-size:.82rem; font-weight:600; color: var(--gray-700);
  transition: .2s ease;
}
.sim-chip:hover{ border-color: var(--red); color: var(--red); }
.sim-chip.active{ background: var(--red); border-color: var(--red); color:#fff; }
.sim-count{
  margin-top:1.6rem; padding-top:1.4rem; border-top:1px solid var(--border);
  font-size:.9rem; color: var(--gray-700);
}
.sim-count b{ font-family: var(--font-head); font-size:1.6rem; color: var(--black); display:block; }
.sim-results{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1.4rem; }
.sim-limit-note{
  grid-column:1/-1;
  margin:0;
  padding:.85rem 1rem;
  border-left:3px solid var(--red);
  background:var(--red-tint);
  color:var(--gray-700);
  font-size:.82rem;
  line-height:1.5;
}
.sim-empty{
  grid-column:1/-1; text-align:center; padding:3rem 1rem;
  color: var(--gray-500); background: var(--white);
  border-radius: var(--radius-lg); border:1px dashed var(--border);
}

/* ---- « Pour qui ? » ---- */
.audience-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:1.5rem; }
.audience-card{
  position:relative; overflow:hidden;
  border-radius: var(--radius-lg);
  background: var(--white);
  border:1px solid var(--border);
  padding: 2rem 1.6rem;
  transition: transform .3s ease, box-shadow .3s ease;
}
.audience-card::after{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background: var(--red); transform: scaleY(0); transform-origin: top;
  transition: transform .35s ease;
}
.audience-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-md); }
.audience-card:hover::after{ transform: scaleY(1); }
.audience-card .icon{ width:34px; height:34px; color: var(--red); margin-bottom:1rem; }
.audience-card h3{ font-size:1.05rem; margin-bottom:.5rem; }
.audience-card p{ font-size:.9rem; margin-bottom:1rem; }
.audience-card ul{ margin:0; }
.audience-card li{
  position:relative; padding-left:1.3rem; margin-bottom:.45rem;
  font-size:.86rem; color: var(--gray-700);
}
.audience-card li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:6px; height:6px; border-radius:50%; background: var(--red);
}

/* ---- FAQ accueil ---- */
.faq-home{ max-width: 860px; margin: 0 auto; }
.faq-home .faq-item{
  background: var(--white);
  border:1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom:.8rem;
  padding: 0 1.4rem;
  transition: box-shadow .25s ease, border-color .25s ease;
}
.faq-home .faq-item.open{ box-shadow: var(--shadow-sm); border-color: #d8d0c8; }
.faq-home .faq-question,
.faq-home .faq-item.open .faq-question{
  background: transparent; color: var(--black);
  padding: 1.15rem 0; font-size:1rem;
}
.faq-home .faq-question .plus{ background: var(--red-tint); color: var(--red); }
.faq-home .faq-item.open .faq-question .plus{ background: var(--red); color:#fff; }
.faq-home .faq-answer{ padding-bottom: 1.1rem; }

/* ---- Teaser articles ---- */
/* Grid ready for 3 columns; with a single real article today it centers
   as one wider card instead of floating in a mostly-empty row. */
.news-teaser-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1.8rem; }
.news-teaser-grid:has(> .news-post:only-child){ grid-template-columns: minmax(0, 480px); justify-content: center; }

/* ---- Badges sur les cartes véhicules ---- */
.offer-flags{
  position:absolute; top:12px; left:12px; z-index:2;
  display:flex; flex-direction:column; gap:.4rem; align-items:flex-start;
}
.offer-flag{
  font-family: var(--font-head); font-weight:700;
  font-size:.66rem; letter-spacing:.07em; text-transform:uppercase;
  padding:.4em .8em; border-radius:4px;
  background: var(--red); color:#fff;
  box-shadow: var(--shadow-sm);
}
.offer-flag.dark{ background: var(--ink-900); }
.offer-flag.green{ background:#1a9e46; }
.offer-card{ position:relative; }

/* Ligne contrat (durée / km) sous le nom */
.offer-terms{
  display:flex; flex-wrap:wrap; gap:.4rem;
  margin: 0 0 .7rem;
}
.offer-term{
  display:inline-flex; align-items:center; gap:.35em;
  background: rgba(17,17,17,.05);
  border-radius: 4px;
  padding:.3em .6em;
  font-size:.72rem; font-weight:600; color: var(--gray-700);
}
.offer-term svg{ width:13px; height:13px; color: var(--red); }

/* ---- Hero v2 ---- */
.hero-badge{
  display:inline-flex; align-items:center; gap:.5em;
  background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(6px);
  border-radius:999px;
  padding:.5em 1.1em;
  font-size:.8rem; font-weight:600; color:#fff;
  margin-bottom:1.4rem;
}
.hero-badge .dot{
  width:7px; height:7px; border-radius:50%; background:#3ddc7f;
  box-shadow:0 0 0 0 rgba(61,220,127,.7);
  animation: pulseDot 2s infinite;
}
@keyframes pulseDot{
  0%{ box-shadow:0 0 0 0 rgba(61,220,127,.6); }
  70%{ box-shadow:0 0 0 9px rgba(61,220,127,0); }
  100%{ box-shadow:0 0 0 0 rgba(61,220,127,0); }
}
.hero-points{
  display:flex; flex-wrap:wrap; gap:1.4rem;
  margin-top:1.8rem; padding-top:1.6rem;
  border-top:1px solid rgba(255,255,255,.18);
}
.hero-point{
  display:flex; align-items:center; gap:.55em;
  font-size:.88rem; font-weight:600; color:rgba(255,255,255,.9);
}
.hero-point svg{ width:18px; height:18px; color:#3ddc7f; flex-shrink:0; }

/* ---- Bouton d'appel flottant (mobile) ---- */
.call-fab{
  position: fixed; left: 18px; bottom: 18px; z-index: 120;
  display:none; align-items:center; gap:.6em;
  background: var(--red); color:#fff;
  border-radius: 999px;
  padding: .95em 1.4em;
  font-family: var(--font-head); font-weight:700; font-size:.85rem;
  box-shadow: var(--shadow-red);
}
.call-fab svg{ width:18px; height:18px; }

/* ---- Responsive v2 ---- */
@media (max-width: 1080px){
  .simulator{ grid-template-columns: 1fr; }
  .sim-panel{ position: static; }
  .sim-results{ grid-template-columns: repeat(2, 1fr); }
  .steps-grid{ grid-template-columns: repeat(2, 1fr); row-gap: 2.6rem; }
  .audience-grid{ grid-template-columns: repeat(2, 1fr); }
  .news-teaser-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 767px){
  .trust-grid{ grid-template-columns: repeat(2, 1fr); }
  .steps-grid{ grid-template-columns: 1fr; }
  .audience-grid{ grid-template-columns: 1fr; }
  .sim-results{ grid-template-columns: 1fr; }
  .call-fab{ display:inline-flex; }
  .hero-points{ gap:.8rem 1.2rem; }
}

/* =========================================================
   À PROPOS — rythme visuel v2
   Le contenu existant reste inchangé ; seules les surfaces,
   profondeurs et alternances de sections évoluent.
   ========================================================= */
.page-hero.page-hero--about{
  min-height: 440px;
  padding: 72px 0;
}
.page-hero.page-hero--about::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(680px 300px at 50% 42%, rgba(227,6,19,.13), transparent 70%);
  pointer-events:none;
}
.page-hero.page-hero--about .container{ position:relative; z-index:1; }
.page-hero.page-hero--about h1{ max-width: 900px; margin:0 auto; }
.page-hero.page-hero--about .page-hero-breadcrumb{ margin-bottom:0; }

.about-section{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(520px 300px at 96% 8%, rgba(227,6,19,.07), transparent 70%),
    linear-gradient(135deg, #fff 0%, #fff 68%, #f3efec 100%);
}
.about-section::before{
  content:"";
  position:absolute; width:280px; height:280px;
  left:-170px; bottom:-150px;
  border:1px solid rgba(227,6,19,.10); border-radius:50%;
  box-shadow:0 0 0 30px rgba(227,6,19,.025), 0 0 0 60px rgba(227,6,19,.015);
  pointer-events:none;
}
.about-section .about-inner{ position:relative; z-index:1; }
.about-section .about-copy p{ max-width: 680px; font-size:.95rem; }
.about-section .about-visual .img-ph{
  border-radius:var(--radius-xl);
  border:1px solid rgba(13,13,15,.08);
  box-shadow:var(--shadow-lg);
}
.about-section .about-stat.dark{
  right:-18px; bottom:-18px;
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg);
}

.about-engagement{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(720px 360px at 8% 4%, rgba(227,6,19,.18), transparent 64%),
    linear-gradient(rgba(10,10,10,.78), rgba(10,10,10,.88)),
    url('../img/Apropos2.png') center/cover no-repeat;
  padding:100px 0 0;
}
.about-engagement::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(620px 340px at 100% 90%, rgba(227,6,19,.10), transparent 66%);
  pointer-events:none;
}
.about-engagement > .container,
.about-engagement > .features-grid{ position:relative; z-index:1; }
.about-engagement .section-head{ max-width:900px; }
.about-engagement .features-grid{
  max-width:1192px; margin:0 auto;
  border:1px solid rgba(255,255,255,.12);
  border-bottom:0; border-radius:var(--radius-xl) var(--radius-xl) 0 0;
  overflow:hidden; box-shadow:var(--shadow-lg);
}
.about-engagement .feature-card{ min-height:205px; padding:2.35rem 2rem; }
.about-engagement .feature-card:nth-child(even) p{ color:rgba(255,255,255,.72); }

.about-testimonials{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(820px 400px at 90% 0%, rgba(227,6,19,.14), transparent 66%),
    var(--ink-900);
}
.about-testimonials::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 0 45%, rgba(255,255,255,.025) 45% 45.2%, transparent 45.2% 100%);
  pointer-events:none;
}
.about-testimonials > .container{ position:relative; z-index:1; }
.about-testimonials .testi-card{
  background:var(--white);
  border-left:3px solid var(--red);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);
  padding:2rem 1.8rem 1.6rem;
}
.about-testimonials .testi-card:hover{ box-shadow:var(--shadow-lg); }
.about-testimonials .testi-card p{ color:var(--ink); }
.about-testimonials .testi-card strong{ color:var(--black); }
.about-testimonials .testi-card .role{ color:var(--gray-500); }
.about-testimonials .carousel-dots button{ background:rgba(255,255,255,.32); }
.about-testimonials .carousel-dots button.active{ background:var(--red); }

.about-faq{
  background:
    radial-gradient(520px 300px at 6% 10%, rgba(227,6,19,.06), transparent 70%),
    linear-gradient(135deg, #fff 0%, #fff 68%, #f3efec 100%);
}
.about-faq .faq-layout{ align-items:stretch; }
.about-faq .faq-list{ gap:.8rem; }
.about-faq .faq-item{
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:0 1.25rem;
  box-shadow:var(--shadow-sm);
  transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.about-faq .faq-item:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.about-faq .faq-item.open{ border-color:#d8d0c8; box-shadow:var(--shadow-md); }
.about-faq .faq-question,
.about-faq .faq-item.open .faq-question{
  background:transparent; color:var(--black); padding:1.1rem 0;
}
.about-faq .faq-question .plus{ background:var(--red-tint); color:var(--red); }
.about-faq .faq-item.open .faq-question .plus{ background:var(--red); color:#fff; }
.about-faq .faq-visual .img-ph{
  height:100%; min-height:420px;
  border-radius:var(--radius-xl);
  border:1px solid rgba(13,13,15,.08);
  box-shadow:var(--shadow-lg);
}

.about-cta{ overflow:hidden; }
.about-cta::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(680px 320px at 50% 0%, rgba(227,6,19,.16), transparent 70%);
  pointer-events:none;
}
.about-cta .container{ position:relative; z-index:1; }

@media (max-width: 1080px){
  .about-engagement .features-grid{ margin:0 24px; }
  .local-news-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px){
  .page-hero.page-hero--about{ min-height:360px; padding:58px 0; }
  .about-engagement{ padding-top:72px; }
  .about-engagement .features-grid{ margin:0 16px; border-radius:var(--radius-lg) var(--radius-lg) 0 0; }
  .about-engagement .feature-card{ min-height:0; }
  .about-faq .faq-visual .img-ph{ min-height:300px; height:300px; }
  .local-news-grid{ grid-template-columns:1fr; margin-top:-1.2rem; }
}

/* =========================================================
   ACTUALITÉS — page éditoriale v2
   Articles et filtres sont alimentés par assets/js/blog-data.js.
   ========================================================= */
.page-hero.page-hero--news{
  min-height:420px;
  padding:72px 0;
}
.page-hero.page-hero--news::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(680px 300px at 50% 42%, rgba(227,6,19,.13), transparent 70%);
  pointer-events:none;
}
.page-hero.page-hero--news .container{ position:relative; z-index:1; }
.page-hero.page-hero--news h1{ max-width:880px; margin:0 auto; }
.page-hero.page-hero--news .page-hero-breadcrumb{ margin-bottom:0; }

.news-section{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(520px 320px at 94% 8%, rgba(227,6,19,.07), transparent 70%),
    linear-gradient(135deg, #fff 0%, #fff 68%, #f3efec 100%);
}
.news-section::before{
  content:"";
  position:absolute; width:300px; height:300px;
  left:-170px; bottom:-170px;
  border:1px solid rgba(227,6,19,.10); border-radius:50%;
  box-shadow:0 0 0 32px rgba(227,6,19,.025), 0 0 0 64px rgba(227,6,19,.015);
  pointer-events:none;
}
.news-section > .container{ position:relative; z-index:1; }
.news-featured-heading{ margin-bottom:1.2rem; }
.news-featured-heading h2{ max-width:820px; font-size:clamp(1.45rem, 2.6vw, 2rem); }
.news-featured-grid{ margin-bottom:0; }
.news-featured-heading,
.news-featured-grid{ position:relative; top:-40px; }
.news-section > .container > .city-filter-box{ position:relative; top:-50px; }
.news-featured-grid.news-post-grid--single{ grid-template-columns:minmax(0, 760px); }
.news-featured-grid .news-post-media{ height:220px; }
.news-featured-grid .news-post-body{ padding:1.25rem 1.5rem 1.4rem; }
.news-featured-grid .news-post-body h3{ font-size:clamp(1.15rem, 2vw, 1.5rem); }
.news-featured-grid .news-post-body p{ font-size:.9rem; line-height:1.55; }
.news-featured-grid .category-link{ padding:.52em .85em; font-size:.72rem; }
.local-news-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:1rem;
  margin:0 0 3rem;
}
.local-news-card .news-post-media{ height:160px; }
.local-news-card .news-post-body{ padding:1.15rem; }
.local-news-card .news-post-body h3{ font-size:1rem; line-height:1.28; }
.local-news-card .news-post-body p{ font-size:.82rem; line-height:1.5; }
.news-post-grid.news-post-grid--single{
  grid-template-columns:minmax(0, 860px);
  justify-content:center;
}
.news-post-grid--single .news-post{
  border-radius:var(--radius-xl);
  border:1px solid rgba(13,13,15,.08);
  box-shadow:var(--shadow-lg);
}
.news-post-grid--single .news-post:hover{ box-shadow:0 28px 68px rgba(13,13,15,.18); }
.news-post-grid--single .news-post-media{
  height:clamp(250px, 31vw, 360px);
  background-position:center;
}
.news-post-grid--single .news-post-body{ padding:clamp(1.5rem, 4vw, 2.7rem); }
.news-post-grid--single .news-post-body h3{
  font-size:clamp(1.35rem, 2.5vw, 1.8rem);
  line-height:1.22;
}
.news-post-grid--single .news-post-body p{ max-width:720px; font-size:.96rem; line-height:1.7; }
.news-post-grid--single .category-link{
  display:inline-flex; align-items:center; gap:.5em;
  padding:.65em 1em; border-radius:999px;
  background:var(--red-tint); color:var(--red);
  font-family:var(--font-head); font-size:.78rem;
  letter-spacing:.04em; text-transform:uppercase;
}
.news-post-grid--single .category-link::after{ content:"→"; font-size:1rem; }
.news-post-grid--single .category-link:hover{ background:var(--red); color:#fff; }

.news-section .city-filter-box{
  max-width:940px; margin:2.8rem auto 0;
  padding:1.3rem;
  border:1px solid rgba(13,13,15,.08);
  border-radius:var(--radius-xl);
  background:rgba(255,255,255,.64);
  box-shadow:var(--shadow-md);
}
.news-section .city-filter{ gap:.55rem; }
.news-section .city-pill{
  border:1px solid var(--border); border-radius:999px;
  background:var(--white); color:var(--gray-700);
  padding:.62em 1.1em; font-size:.76rem;
  box-shadow:var(--shadow-sm);
}
.news-section .city-pill:hover{ border-color:var(--red); background:var(--red-tint); color:var(--red); }
.news-section .city-pill.active{ border-color:var(--red); background:var(--red); color:#fff; box-shadow:var(--shadow-red); }
.news-section .news-empty{
  width:100%; margin:0; padding:2.5rem 1rem;
  border:1px dashed var(--border); border-radius:var(--radius-lg);
  background:rgba(255,255,255,.62);
}
.news-cta{ overflow:hidden; }
.news-cta::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(680px 320px at 50% 0%, rgba(227,6,19,.16), transparent 70%);
  pointer-events:none;
}
.news-cta .container{ position:relative; z-index:1; }

@media (max-width:720px){
  .page-hero.page-hero--news{ min-height:350px; padding:58px 0; }
  .news-post-grid--single .news-post-media{ height:250px; }
  .news-section .city-filter-box{ padding:.9rem; }
}

/* =========================================================
   ARTICLE — lecture éditoriale v2
   Le texte et la date restent ceux de l'article existant.
   ========================================================= */
.page-hero.page-hero--article{
  min-height:360px;
  padding:62px 0;
}
.page-hero.page-hero--article::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(620px 280px at 50% 42%, rgba(227,6,19,.12), transparent 70%);
  pointer-events:none;
}
.page-hero.page-hero--article .container{ position:relative; z-index:1; }
.page-hero.page-hero--article h1{ max-width:760px; margin:0 auto; }
.page-hero.page-hero--article .page-hero-breadcrumb{ margin-bottom:0; }

.article-section{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(560px 340px at 96% 10%, rgba(227,6,19,.07), transparent 70%),
    linear-gradient(135deg, #fff 0%, #fff 66%, #f3efec 100%);
}
.article-section::before{
  content:"";
  position:absolute; width:300px; height:300px;
  left:-170px; bottom:-170px;
  border:1px solid rgba(227,6,19,.10); border-radius:50%;
  box-shadow:0 0 0 32px rgba(227,6,19,.025), 0 0 0 64px rgba(227,6,19,.015);
  pointer-events:none;
}
.article-section > .container{ position:relative; z-index:1; }
.article-single.article-single--v2{ max-width:900px; }
.article-single--v2 .article-head{ max-width:820px; margin:0 auto 2.2rem; }
.article-single--v2 .article-head h1{
  font-size:clamp(1.65rem, 3.4vw, 2.6rem);
  line-height:1.18; letter-spacing:-.02em;
}
.article-single--v2 .article-date{
  display:inline-flex; align-items:center;
  margin-top:.25rem; padding:.45em .9em;
  border-radius:999px; background:var(--red-tint);
  color:var(--red); font-size:.78rem;
  letter-spacing:.06em; text-transform:uppercase;
}
.article-single--v2 .article-media{
  aspect-ratio:16/8.5;
  border-radius:var(--radius-xl);
  margin:0 0 2.2rem;
  overflow:hidden;
  border:1px solid rgba(13,13,15,.08);
  box-shadow:var(--shadow-lg);
}
.article-single--v2 .article-body{
  padding:clamp(1.5rem, 4vw, 3.2rem) clamp(1.3rem, 6vw, 4.5rem);
  border:1px solid rgba(13,13,15,.08);
  border-radius:var(--radius-xl);
  background:var(--white);
  box-shadow:var(--shadow-lg);
}
.article-single--v2 .article-body p{
  max-width:700px; margin-left:auto; margin-right:auto;
  font-size:1rem; line-height:1.85;
}
.article-single--v2 .article-body p:first-child::first-letter{
  float:left; margin:.08em .12em 0 0;
  color:var(--red); font-family:var(--font-head);
  font-size:3.5rem; font-weight:800; line-height:.8;
}
.article-single--v2 .article-back{ margin-top:2.2rem; }
.article-single--v2 .article-back .btn{ box-shadow:var(--shadow-sm); }
.article-single--v2 .article-back .btn:hover{ box-shadow:var(--shadow-red); }

.article-cta{ overflow:hidden; }
.article-cta::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(680px 320px at 50% 0%, rgba(227,6,19,.16), transparent 70%);
  pointer-events:none;
}
.article-cta .container{ position:relative; z-index:1; }

@media (max-width:720px){
  .page-hero.page-hero--article{ min-height:320px; padding:54px 0; }
  .article-single--v2 .article-media{ aspect-ratio:16/10; margin-bottom:1.4rem; }
  .article-single--v2 .article-body{ border-radius:var(--radius-lg); padding:1.4rem 1.2rem; }
  .article-single--v2 .article-body p{ font-size:.96rem; line-height:1.75; }
  .article-single--v2 .article-body p:first-child::first-letter{ font-size:2.9rem; }
}

/* =========================================================
   CONTACT — parcours v2
   Les coordonnées, horaires, formulaire et carte existants
   restent la source unique du contenu affiché.
   ========================================================= */
.page-hero.page-hero--contact{
  min-height:400px;
  padding:70px 0;
}
.page-hero.page-hero--contact::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(660px 300px at 50% 42%, rgba(227,6,19,.13), transparent 70%);
  pointer-events:none;
}
.page-hero.page-hero--contact .container{ position:relative; z-index:1; }
.page-hero.page-hero--contact h1{ max-width:900px; margin:0 auto; }
.page-hero.page-hero--contact .page-hero-breadcrumb{ margin-bottom:0; }

.contact-section{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(560px 340px at 96% 8%, rgba(227,6,19,.08), transparent 70%),
    linear-gradient(135deg, #f3efec 0%, #fff 68%, #faf7f4 100%);
}
.contact-section::before{
  content:"";
  position:absolute; width:300px; height:300px;
  left:-170px; bottom:-170px;
  border:1px solid rgba(227,6,19,.10); border-radius:50%;
  box-shadow:0 0 0 32px rgba(227,6,19,.025), 0 0 0 64px rgba(227,6,19,.015);
  pointer-events:none;
}
.contact-section > .container{ position:relative; z-index:1; }
.contact-section .contact-layout{ align-items:stretch; }
.contact-section .contact-form-card{
  border:1px solid rgba(13,13,15,.08);
  border-top:4px solid var(--red);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg);
  padding:clamp(1.5rem, 4vw, 2.8rem);
}
.contact-section .contact-form-card .quote-actions .btn{ box-shadow:var(--shadow-red); }
.contact-section .contact-form-card .quote-actions .btn:hover{ box-shadow:0 18px 38px rgba(227,6,19,.34); }
.contact-section .contact-info{ gap:1.1rem; }
.contact-section .contact-info-panel{
  background:var(--ink-900);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg);
  padding:clamp(1.5rem, 3vw, 2.2rem);
}
.contact-section .contact-info-panel h3{ color:#fff; }
.contact-section .contact-info-panel .info-row{ border-top-color:rgba(255,255,255,.12); }
.contact-section .contact-info-panel .info-row h4{ color:#fff; }
.contact-section .contact-info-panel .info-row p{ color:rgba(255,255,255,.70); }
.contact-section .contact-info-panel .value-red{ color:#ff5560; }
.contact-section .contact-info-panel .benefit-icon{ background:rgba(227,6,19,.15); color:#ff5560; }
.contact-section .help-card{
  border:1px solid rgba(13,13,15,.08);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-md);
  padding:1.5rem 1.7rem;
}
.contact-section .help-card h4{ margin-top:.1rem; }
.contact-section .devis-note-bar{
  background:var(--ink-900);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg);
}
.contact-section .devis-note-bar p{ color:rgba(255,255,255,.72); }
.contact-section .devis-note-bar strong{ color:#fff; }
.contact-section .devis-note-bar .benefit-icon{ background:rgba(227,6,19,.15); color:#ff5560; }
.contact-section .devis-note-bar .btn-outline-red{ border-color:#ff5560; color:#ff5560; }
.contact-section .devis-note-bar .btn-outline-red:hover{ background:var(--red); border-color:var(--red); color:#fff; }

.map-section{
  padding:24px;
  background:var(--ink-900);
}
.map-section .map-embed{
  max-width:1240px;
  margin:0 auto;
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg);
}

@media (max-width:720px){
  .page-hero.page-hero--contact{ min-height:340px; padding:56px 0; }
  .contact-section .contact-form-card,
  .contact-section .contact-info-panel{ border-radius:var(--radius-lg); }
  .contact-section .devis-note-bar{ border-radius:var(--radius-lg); }
  .map-section{ padding:12px; }
  .map-section .map-embed{ border-radius:var(--radius-lg); }
}

/* =========================================================
   ACCUEIL — catégories éditoriales
   Les cinq catégories et leurs liens restent inchangés.
   ========================================================= */
.category-section{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(620px 320px at 95% 8%, rgba(227,6,19,.08), transparent 70%),
    linear-gradient(135deg, #fff 0%, #fff 65%, #f3efec 100%);
}
.category-section::before{
  content:"";
  position:absolute; width:320px; height:320px;
  left:-180px; bottom:-180px;
  border:1px solid rgba(227,6,19,.10); border-radius:50%;
  box-shadow:0 0 0 34px rgba(227,6,19,.025), 0 0 0 68px rgba(227,6,19,.015);
  pointer-events:none;
}
.category-section > .container{ position:relative; z-index:1; }
.category-intro{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:2rem; margin-bottom:3rem;
}
.category-intro .section-head{ margin:0; max-width:760px; }
.category-intro .section-head h2{ max-width:650px; font-size:clamp(1.7rem, 3vw, 2.5rem); }
.category-intro .section-head p{ max-width:650px; font-size:1rem; line-height:1.65; }

/* Compact catalogue copy keeps the useful SEO context below the vehicle grid. */
.catalog-guide{
  display:grid;
  grid-template-columns:minmax(0, 1.25fr) minmax(280px, .75fr);
  gap:2rem;
  align-items:center;
  margin-top:3.2rem;
  padding:1.8rem 2rem;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:linear-gradient(135deg, #fff 0%, #faf7f4 100%);
}
.catalog-guide__copy{ max-width:760px; }
.catalog-guide__copy .eyebrow{ margin-bottom:.6rem; }
.catalog-guide__copy h2{ margin:0 0 .6rem; font-size:clamp(1.35rem, 2.4vw, 2rem); }
.catalog-guide__copy p{ margin:0; max-width:720px; color:var(--gray-600); line-height:1.65; }
.catalog-guide__links{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.55rem; }
.catalog-guide__links a{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.7rem .85rem;
  border:1px solid var(--border);
  border-radius:999px;
  color:var(--gray-700);
  font-weight:700;
  font-size:.86rem;
  background:#fff;
  transition:color .2s ease, border-color .2s ease, transform .2s ease;
}
.catalog-guide__links a:hover{ color:var(--red); border-color:var(--red); transform:translateY(-2px); }
.catalog-guide__links span{ color:var(--red); }
.catalog-faq{ margin-top:4.2rem; }
.catalog-faq .section-head{ margin-bottom:2rem; }

.category-all-link{
  display:inline-flex; align-items:center; gap:.75em;
  flex-shrink:0; padding:.85em 1.15em;
  border:1px solid var(--black); border-radius:999px;
  background:var(--white); color:var(--black);
  font-family:var(--font-head); font-size:.78rem; font-weight:800;
  letter-spacing:.04em; text-transform:uppercase;
  box-shadow:var(--shadow-sm);
}
.category-all-link:hover{ background:var(--black); color:#fff; transform:translateY(-2px); box-shadow:var(--shadow-md); }
.category-all-link__arrow{ color:var(--red); font-size:1.15rem; line-height:1; transition:transform .2s ease, color .2s ease; }
.category-all-link:hover .category-all-link__arrow{ color:#fff; transform:translateX(3px); }
.category-grid.category-grid--editorial{
  grid-template-columns:repeat(6, minmax(0, 1fr));
  grid-template-rows:repeat(2, minmax(190px, 240px));
  gap:1rem;
}
.category-grid--editorial .category-card{
  aspect-ratio:auto; min-height:190px;
  border-radius:var(--radius-xl);
  border:1px solid rgba(13,13,15,.08);
  box-shadow:var(--shadow-md);
  transition:transform .3s ease, box-shadow .3s ease;
}
.category-grid--editorial .category-card:nth-child(-n+3){ grid-column:span 2; }
.category-grid--editorial .category-card:nth-child(n+4){ grid-column:span 3; }
.category-grid--editorial .category-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.category-grid--editorial .category-card .img-ph::after{
  background:linear-gradient(180deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,.18) 44%, rgba(0,0,0,.76) 100%);
}
.category-grid--editorial .category-card::before,
.category-grid--editorial .category-card::after{
  width:100%; height:3px; background:var(--red);
}
.category-grid--editorial .category-card span{
  inset:auto 1.25rem 1rem;
  display:flex; align-items:center; justify-content:flex-start; gap:.55em;
  padding:0; text-align:left; font-size:clamp(.95rem, 1.5vw, 1.15rem);
  text-shadow:0 2px 14px rgba(0,0,0,.65);
}
.category-grid--editorial .category-card span::after{
  content:"\2192"; color:#fff; font-size:1.35rem; line-height:1;
  opacity:.8; transition:transform .2s ease, color .2s ease;
}
.category-grid--editorial .category-card:hover span::after{ color:#ff5560; transform:translateX(4px); }

.section.dark .step-card:focus-visible{
  outline:3px solid #ff5560;
  outline-offset:4px;
}

@media (max-width:1080px){
  .category-grid.category-grid--editorial{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    grid-template-rows:none;
  }
  .category-grid--editorial .category-card:nth-child(n){ grid-column:span 1; }
}
@media (max-width:720px){
  .category-intro{ flex-direction:column; align-items:flex-start; gap:1.2rem; }
  .category-intro .section-head{ max-width:100%; }
  .category-grid.category-grid--editorial{ grid-template-columns:1fr; gap:.9rem; }
  .category-grid--editorial .category-card:nth-child(n){ grid-column:span 1; min-height:230px; }
  .catalog-guide{ grid-template-columns:1fr; gap:1.2rem; margin-top:2rem; padding:1.35rem 1.1rem; }
  .catalog-guide__links{ justify-content:flex-start; }
  .catalog-faq{ margin-top:2.8rem; }
}

/* Keep the homepage editorial title scale consistent across sections. */
#about .about-copy h2,
.electric-banner .electric-copy h2{ font-size:clamp(1.7rem, 3vw, 2.5rem); }

/* Soft rounded treatment: clearer touch targets without making the interface pill-shaped. */
:root{
  --radius-sm:8px;
  --radius-md:12px;
}
.btn,
.header-phone{ border-radius:10px; }
.offer-card,
.offers-carousel .offer-card,
.category-card{ border-radius:14px; }
.offers-carousel .offer-price-bar .go{ border-radius:10px; }

/* =========================================================
   RESPONSIVE HARDENING
   Common mobile rules are kept at the end so they win over
   the older page-specific breakpoints above.
   ========================================================= */
html{ overflow-x:clip; }
body{ overflow-x:clip; }
.site-header{
  position:-webkit-sticky;
  position:sticky;
  top:0;
  z-index:100;
  isolation:isolate;
}
button, input, select, textarea{ max-width:100%; }

@media (max-width: 1100px){
  .container{ padding-inline:20px; }
  .header-inner{ gap:16px; }
  .main-nav{ gap:1rem; }
  .page-hero.page-hero--vehicles .page-hero-card{ max-width:92%; }
}

@media (max-width: 900px){
  .site-header{ padding:10px 0; }
  .site-header.is-scrolled{ padding:5px 0; }
  .header-inner{ gap:12px; }
  .header-actions{ margin-left:auto; gap:.35rem; flex:0 0 auto; }
  .logo-mark{ height:50px; }
  .site-header.is-scrolled .logo-mark{ height:40px; }
  .burger{
    width:44px; height:44px; padding:9px;
    display:inline-flex; align-items:center; justify-content:center;
    border-radius:10px; background:var(--beige);
  }
  .burger:hover{ background:var(--red-tint); color:var(--red); }
  .mobile-nav{
    width:min(360px, calc(100vw - 16px));
    padding:84px 22px max(24px, env(safe-area-inset-bottom));
    border-radius:20px 0 0 20px;
  }
  body.mobile-nav-open,
  body.filters-open{ overflow:hidden; }
  .page-hero{ min-height:380px; padding:60px 0; }
  .page-hero.page-hero--vehicles{ min-height:0; }
  .page-hero.page-hero--vehicles .page-hero-card{
    max-width:none;
    padding:clamp(1.5rem, 5vw, 2.6rem);
  }
  .filters-sidebar{
    width:min(360px, calc(100vw - 16px));
    padding:76px 18px 28px;
    border-radius:20px 0 0 20px;
  }
  .filters-close{
    position:absolute; top:18px; right:18px;
    display:inline-flex; align-items:center; gap:.45rem;
    border:1px solid var(--border); border-radius:999px;
    background:var(--white); color:var(--black);
    padding:.55rem .8rem; font-size:.76rem; font-weight:800;
    text-transform:uppercase; letter-spacing:.04em;
  }
  .filters-close:hover{ border-color:var(--red); color:var(--red); }
  .filters-close .icon{ width:15px; height:15px; }
}

@media (min-width: 901px){
  .filters-close{ display:none; }
}

@media (max-width: 767px){
  .container{ padding-inline:16px; }
  .section{ padding:56px 0; }
  .section-head{ margin-bottom:2rem; }
  .section-head h2,
  .category-intro .section-head h2{ font-size:clamp(1.55rem, 8vw, 2.05rem); line-height:1.16; }
  .section-head p,
  .category-intro .section-head p{ font-size:.94rem; line-height:1.6; }
  .section-head-row{ gap:1.25rem; margin-bottom:2rem; }
  .section-head-row > .section-head{ width:100%; }
  .btn{
    min-height:48px; width:100%;
    padding-inline:1rem; white-space:normal; text-align:center;
  }

  .hero{
    min-height:calc(100svh - 70px);
    max-height:720px;
  }
  .hero-inner{ padding:42px 0 76px; }
  .hero-copy h1{ font-size:clamp(2rem, 10vw, 3rem); line-height:1.06; }
  .hero-lead{ font-size:1rem; line-height:1.55; }
  .hero-cta{ flex-direction:column; align-items:stretch; gap:.7rem; margin-top:1.25rem; }
  .hero-points{ flex-direction:column; align-items:flex-start; gap:.7rem; margin-top:1.35rem; padding-top:1.1rem; }
  .hero-point{ font-size:.82rem; line-height:1.35; }
  .hero-dots{ bottom:18px; }

  .trust-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .trust-item{ padding:1.45rem .65rem; min-width:0; }
  .trust-item strong{ font-size:clamp(1.65rem, 8vw, 2.25rem); }
  .trust-item > span{ font-size:.64rem; line-height:1.35; }

  .category-intro{ gap:1.1rem; margin-bottom:2rem; }
  .category-all-link{ width:100%; justify-content:center; }
  .category-grid.category-grid--editorial{ gap:.8rem; }
  .category-grid--editorial .category-card:nth-child(n){ min-height:178px; }
  .category-grid--editorial .category-card span{ inset:auto 1rem .85rem; font-size:.96rem; }

  .offers-carousel{ padding:0 0 40px; }
  .offers-carousel .offer-card{ flex-basis:100%; min-width:0; }
  .offers-carousel .offer-body{ padding:1rem 1rem 0; }
  .offers-carousel .offer-body h3{ font-size:1.1rem; line-height:1.2; }
  .offers-carousel .offer-body p{ font-size:.82rem; line-height:1.4; }
  .offer-specs{ gap:.45rem .6rem; min-height:0; }
  .offer-specs .spec-item{ font-size:.7rem; line-height:1.25; }
  .offer-specs .spec-value{ white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
  .offers-carousel .offer-price-bar{ padding:.75rem .85rem; }
  .offers-carousel .offer-price-bar strong{ font-size:1.05rem; }
  .offers-carousel .offer-price-bar .go{ width:46px; height:46px; }

  .about-inner, .electric-inner{ gap:2rem; }
  .about-visual .img-ph, .electric-visual .img-ph{ border-radius:var(--radius-lg); }
  .about-stat{ width:100%; justify-content:center; padding:1rem 1.2rem; }
  .about-stat strong{ font-size:1.65rem; }
  .about-stat span{ font-size:.85rem; }
  .electric-banner{ padding:64px 0; }
  .electric-copy .btn{ margin-top:.4rem; }

  .steps-grid{ gap:1.6rem; }
  .step-card{ padding:2.2rem 1.15rem 1.35rem; }
  .step-card h3{ font-size:.98rem; }
  .step-card p{ font-size:.86rem; }
  .features-grid{ gap:1px; }
  .feature-card{ padding:1.7rem 1.2rem; }
  .faq-home .faq-item,
  .about-faq .faq-item{ padding-inline:1rem; }
  .faq-question{ padding:1rem 1.05rem; font-size:.88rem; }
  .faq-answer p{ font-size:.88rem; }
  .cta-banner{ padding:64px 0; }
  .cta-banner h2{ font-size:clamp(1.35rem, 7vw, 1.85rem); }
  .cta-banner p{ font-size:.92rem; line-height:1.6; }
  .cta-actions{ flex-direction:column; align-items:stretch; gap:.7rem; }

  .page-hero{ min-height:340px; padding:54px 0; }
  .page-hero h1{ font-size:clamp(1.75rem, 8vw, 2.35rem); line-height:1.1; }
  .page-hero p{ font-size:.94rem; line-height:1.55; }
  .page-hero-breadcrumb{ flex-wrap:wrap; row-gap:.15rem; font-size:.76rem; }
  .page-hero.page-hero--vehicles{ padding:48px 0 54px; }
  .page-hero.page-hero--vehicles .page-hero-card{ padding:1.35rem; }
  .page-hero.page-hero--vehicles h1{ font-size:clamp(1.9rem, 9vw, 2.7rem); }
  .page-hero.page-hero--vehicles p{ font-size:.92rem; }
  .page-hero.page-hero--vehicles .hero-points{ gap:.55rem; }
  .page-hero.page-hero--vehicles .hero-point{ width:100%; padding:.5rem .7rem; font-size:.78rem; }
  .page-hero.page-hero--product{ min-height:300px; padding:50px 0; }
  .page-hero.page-hero--about,
  .page-hero.page-hero--news,
  .page-hero.page-hero--article,
  .page-hero.page-hero--contact{ min-height:300px; padding:50px 0; }

  .shop-layout{ gap:1.2rem; }
  .filters-toggle{ width:100%; justify-content:center; margin-bottom:1rem; }
  .vehicles-toolbar{ gap:.85rem; padding:.9rem; margin-bottom:1rem; }
  .vehicles-toolbar__copy strong{ font-size:.95rem; }
  .vehicles-toolbar__copy span{ font-size:.8rem; line-height:1.4; }
  .vehicle-sort{ width:100%; }
  .vehicle-sort select{ min-height:46px; }
  .vehicle-quick-filters{
    flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain;
    padding:0 0 .35rem; margin:-.15rem 0 1rem;
    scrollbar-width:thin;
  }
  .vehicle-quick-filters > span,
  .quick-filter{ flex:0 0 auto; }
  .vehicle-quick-filters > span{ font-size:.65rem; }
  .quick-filter{ padding:.5rem .72rem; font-size:.72rem; }
  .vehicles-grid{ gap:1rem; }
  .vehicle-card .offer-body{ padding:1rem 1rem 0; }
  .vehicle-card .offer-body h3{ font-size:1.12rem; line-height:1.2; }
  .vehicle-card .offer-body p{ font-size:.85rem; }
  .vehicle-card .offer-specs{ margin-bottom:.8rem; }
  .vehicle-card .offer-price-bar{ padding:.8rem .9rem; }
  .vehicle-card .offer-price-bar .go{ width:46px; height:46px; }
  .compare-panel{ margin-top:2rem; }
  .compare-panel .section-head h2{ font-size:1.45rem; }
  .compare-clear{ width:100%; margin-bottom:.8rem; }
  .compare-wrap{ border-radius:var(--radius-md); -webkit-overflow-scrolling:touch; }
  .compare-table{ min-width:650px; font-size:.8rem; }
  .compare-table th, .compare-table td{ padding:.8rem .75rem; }
  .compare-table thead th{ font-size:.72rem; }
  .compare-table tbody th{ font-size:.76rem; }
  .pagination{ margin-top:2rem; }

  .footer-grid{ gap:2rem; padding-bottom:30px; }
  .site-footer{ padding-top:42px; }
  .footer-brand p{ max-width: none; font-size:.86rem; }
  .footer-col h4{ font-size:.92rem; }
  .footer-col a{ font-size:.86rem; margin:.55rem 0; }
  .footer-bottom{ padding:18px 16px; font-size:.76rem; line-height:1.5; }
  .back-to-top{ right:14px; bottom:14px; width:42px; height:42px; }

  .quote-section{ padding:16px 10px; }
  .quote-box{ padding:24px 16px; border-radius:18px; gap:2rem; }
  .quote-title{ font-size:clamp(1.8rem, 9vw, 2.35rem); }
  .quote-intro{ font-size:.92rem; }
  .quote-aside{ padding:24px 16px; border-radius:18px; }
  .quote-aside .benefit-item{ grid-template-columns:48px 1fr; gap:12px; margin-bottom:22px; }
  .quote-aside .benefit-icon{ width:48px; height:48px; }
  .quote-aside .help-card{ padding:16px; }
  .quote-submit .btn{ width:100%; padding-inline:16px; }

  .contact-section .contact-form-card,
  .contact-section .contact-info-panel,
  .contact-section .help-card,
  .contact-section .devis-note-bar{ padding:1.2rem; }
  .info-row{ gap:.75rem; }
  .info-row .benefit-icon{ width:44px; height:44px; }
  .devis-note-bar .row{ align-items:flex-start; gap:.75rem; }
  .devis-note-bar .row, .devis-note-bar .btn{ width:100%; }
  .map-section{ padding:10px; }
  .map-embed{ height:280px; }

  .product-top{ gap:1.2rem; }
  .product-image{ border-radius:var(--radius-lg); }
  .product-image .img-ph{ aspect-ratio:4/3; }
  .product-image .zoom-link{ top:10px; right:10px; width:40px; height:40px; }
  .product-info{ padding:1.2rem; border-radius:var(--radius-lg); }
  .product-info h1{ font-size:clamp(1.55rem, 8vw, 2rem); }
  .product-info .variant{ font-size:.98rem; }
  .top-badges{ gap:.65rem; margin-bottom:1.2rem; }
  .top-badges .badge-box{ flex-basis:100%; padding:.7rem .85rem; }
  .price-rows{ padding:.9rem; gap:.75rem; margin-bottom:1.2rem; }
  .price-rows li{ gap:.7rem; font-size:.88rem; }
  .price-rows .row-icon{ width:38px; height:38px; }
  .price-rows strong{ font-size:.98rem; }
  .product-info > .btn{ width:100%; }
  .fiche-technique{ padding:58px 0; }
  .fiche-technique h2{ font-size:1.55rem; margin-bottom:1.3rem; }
  .badges-wrap{ gap:.65rem; }
  .category-badge{ width:100%; padding:.8rem 1rem; }
  .fiche-card{ padding:1.1rem .9rem; border-radius:var(--radius-lg); }
  .fiche-card .faq-question{ padding:1rem 0; }
  .fiche-card .faq-item.open .faq-question{ padding-left:0; }
  .spec-list li{ font-size:.85rem; }
  .spec-list li strong{ min-width:0; }
  .blog-cta-banner{ padding:58px 16px; }
  .blog-cta-banner h2{ font-size:clamp(1.25rem, 7vw, 1.8rem); margin-bottom:1.3rem; }
  .related-section .offers-carousel{ padding-inline:.75rem; }

  .news-post-grid--single .news-post-body{ padding:1.25rem; }
  .news-post-grid--single .news-post-media{ height:220px; }
  .blog-grid{ grid-template-columns:1fr; }
  .blog-intro{ gap:1.25rem; margin-bottom:1.5rem; }
  .blog-intro h2,
  .blog-intro p,
  .blog-proof,
  .blog-toolbar{ min-width:0; max-width:100%; overflow-wrap:anywhere; }
  .blog-proof{ padding:1rem 1.1rem; }
  .blog-toolbar{ padding:.75rem; }
  .blog-filters{ flex-wrap:nowrap; max-width:100%; overflow-x:auto; padding-bottom:.2rem; }
  .blog-filters .city-pill{ flex:0 0 auto; white-space:nowrap; }
  .news-section .city-filter-box{ margin-top:1.8rem; padding:.8rem; }
  .news-section .city-filter{ justify-content:flex-start; overflow-x:auto; flex-wrap:nowrap; padding-bottom:.25rem; }
  .news-section .city-pill{ flex:0 0 auto; padding:.58em .85em; font-size:.7rem; }
  .article-single--v2 .article-head{ margin-bottom:1.4rem; }
  .article-single--v2 .article-body{ padding:1.25rem 1rem; }
  .article-single--v2 .article-body p{ font-size:.92rem; line-height:1.7; }
}

@media (max-width: 480px){
  .container{ padding-inline:14px; }
  .logo-mark{ height:46px; }
  .site-header.is-scrolled .logo-mark{ height:38px; }
  .mobile-nav{ width:calc(100vw - 10px); padding-inline:18px; }
  .hero-inner{ padding-top:34px; }
  .hero-copy h1{ font-size:clamp(1.85rem, 10.5vw, 2.55rem); }
  .hero-lead{ font-size:.93rem; }
  .trust-item{ padding-inline:.45rem; }
  .trust-item > span{ font-size:.59rem; }
  .category-grid--editorial .category-card:nth-child(n){ min-height:160px; }
  .offer-specs .spec-item{ font-size:.66rem; }
  .compare-table{ min-width:600px; }
  .devis-modal{ padding:10px; align-items:center; }
  .devis-modal__panel{
    max-height:calc(100svh - 20px);
    border-radius:22px;
    clip-path:inset(0 round 22px);
    padding:34px 16px 22px;
  }
  .devis-modal__head h2{ font-size:1.55rem; }
  .lightbox{ padding:12px; }
  .lightbox__close{ top:12px; right:12px; width:42px; height:42px; }
}

@media (max-width: 480px){
  .site-header .header-actions{ display:flex !important; visibility:visible; }
  .site-header .header-actions .burger{ display:inline-flex !important; visibility:visible; }
  .page-hero .container,
  .news-section .container{ width:100%; max-width:100%; }
  .page-hero h1{ width:100%; max-width:100%; font-size:1.72rem; line-height:1.12; }
  .page-hero h1,
  .blog-intro h2,
  .blog-card h3,
  .article-single--v2 .article-head h1{
    overflow-wrap:anywhere;
    word-break:normal;
  }
  .page-hero .container,
  .blog-intro > *,
  .blog-toolbar > *{ min-width:0; }
  .header-inner{ min-width:0; }
  .header-actions .burger{ flex:0 0 44px; }
}

@media (max-width: 900px){
  .commitments-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px){
  .commitments-grid{ grid-template-columns:1fr; }
  .commitment-card{ padding:1rem; }
}

/* Mobile catalogue/gallery fixes: keep the vehicle visible and preserve touch scrolling. */
@media (max-width: 767px){
  .actualites-page .local-news-grid,
  .local-news-grid{
    grid-template-columns:1fr !important;
    gap:1rem;
    margin-top:-1rem;
  }
  .local-news-card .news-post-media{
    height:190px;
  }
  .local-news-card .news-post-body{
    padding:1.15rem 1.2rem 1.25rem;
  }
  .local-news-card .news-post-body h3{
    font-size:1.05rem;
    line-height:1.25;
    overflow-wrap:normal;
    word-break:normal;
  }
  .local-news-card .news-post-body p{
    font-size:.9rem;
    line-height:1.55;
  }
  .page-hero.page-hero--vehicles{
    min-height:480px;
    background-position:58% center !important;
  }
  .page-hero.page-hero--vehicles .page-hero-card{
    background:linear-gradient(180deg, rgba(13,13,15,.28), rgba(13,13,15,.08));
    border-radius:var(--radius-lg);
  }
  .vehicles-grid .offer-card{ width:100%; }
  .offers-track{
    padding-inline:0;
    scroll-padding-inline:0;
  }
  .offers-track > .offer-card{ flex:0 0 100%; }
  .product-image .img-ph{
    aspect-ratio:1505 / 688;
    min-height:0;
  }
}

/* Compact featured article: keep the existing post, but avoid a full-width
   vertical block that pushes the rest of the editorial content too far down. */
.news-featured-grid .news-featured-post{
  display:grid;
  grid-template-columns:minmax(230px, .82fr) minmax(0, 1.18fr);
  align-items:stretch;
  max-width:760px;
}
.news-featured-grid .news-featured-post .news-post-media{
  height:100%;
  min-height:220px;
}
.news-featured-grid .news-featured-post .news-post-body{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:1.25rem 1.5rem;
}
.news-featured-grid .news-featured-post .news-post-body p{ margin-bottom:.5rem; }
.news-featured-grid .news-featured-post .category-link{ align-self:flex-start; }
@media (max-width:720px){
  .news-featured-heading,
  .news-featured-grid{ top:-22px; }
  .news-section > .container > .city-filter-box{ top:-28px; }
  .news-featured-grid .news-featured-post{ display:flex; max-width:none; }
  .news-featured-grid .news-featured-post .news-post-media{ height:190px; min-height:0; }
  .news-featured-grid .news-featured-post .news-post-body{ padding:1.15rem 1.25rem 1.3rem; }
}

@media (max-width:1024px){
  .local-news-grid{
    grid-template-columns:1fr !important;
    max-width:720px;
    margin:-.75rem auto 2.5rem;
  }
  .local-news-card{
    width:100%;
    min-width:0;
  }
  .local-news-card .news-post-media{
    height:clamp(180px, 52vw, 260px);
  }
  .local-news-card .news-post-body h3{
    font-size:clamp(1.05rem, 4.8vw, 1.35rem);
    line-height:1.25;
    overflow-wrap:normal;
    word-break:normal;
  }
}

/* Mobile fixes requested: scoped overrides for catalogue, filters, comparison,
   product related carousel, simulator CTA and testimonials. */
.related-category-cta{
  display:flex;
  justify-content:center;
  margin-top:1.4rem;
}
.sim-catalogue-action{
  display:flex;
  justify-content:center;
  margin-top:1.3rem;
  opacity:0;
  transform:translateY(12px);
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.sim-catalogue-action.is-visible{
  opacity:1;
  transform:none;
  pointer-events:auto;
}
.sim-catalogue-action .btn{
  width:min(100%, 420px);
}
.testi-track{
  transition:transform .35s ease;
  will-change:transform;
}
.news-teaser-grid .news-post-media img{
  object-position:center;
}

@media (max-width:900px){
  .filters-sidebar{
    padding:18px 18px 28px;
  }
  .filters-close{
    position:sticky;
    top:10px;
    z-index:6;
    width:46px;
    height:46px;
    margin:0 0 1rem auto;
    padding:0;
    justify-content:center;
    border-radius:50%;
    font-size:0;
    box-shadow:var(--shadow-md);
  }
  .filters-close .icon{
    width:18px;
    height:18px;
  }
}

@media (max-width:767px){
  body{
    overflow-x:hidden;
  }
  .shop-layout > div,
  .vehicles-grid,
  .vehicle-card{
    min-width:0;
    max-width:100%;
  }
  .vehicles-grid{
    grid-template-columns:minmax(0, 1fr) !important;
    overflow:hidden;
  }
  .vehicle-card{
    width:100%;
    overflow:hidden;
    border-radius:18px;
  }
  .vehicle-card .offer-media,
  .vehicle-card .offer-media.img-ph{
    width:100%;
    aspect-ratio:1505 / 688;
    background-size:contain !important;
    background-position:center center !important;
  }
  .vehicle-card .offer-media.img-ph::after{
    background-size:contain !important;
    background-position:center center !important;
  }
  .vehicle-card .offer-specs{
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    gap:.55rem .65rem;
  }
  .vehicle-card .offer-specs .spec-item{
    min-width:0;
  }
  .vehicle-card .offer-specs .spec-value{
    overflow-wrap:anywhere;
  }
  .vehicle-card .offer-price-bar{
    width:100%;
    max-width:100%;
  }
  .vehicle-card .offer-price-bar strong{
    font-size:clamp(1.25rem, 7vw, 1.75rem);
    white-space:nowrap;
  }
  .vehicle-card .offer-price-bar .suffix{
    font-size:.82rem;
    white-space:nowrap;
  }

  .related-section .carousel-dots{
    margin-top:1.25rem;
    margin-bottom:1.35rem;
  }
  .related-category-cta{
    margin-top:0;
  }

  .formula-compare-wrap{
    overflow:visible;
    box-shadow:none;
    border-radius:0;
  }
  .formula-compare-table{
    display:block;
    min-width:0 !important;
    width:100%;
    background:transparent;
  }
  .formula-compare-table thead{
    display:none;
  }
  .formula-compare-table tbody{
    display:grid;
    gap:1rem;
  }
  .formula-compare-table tr{
    display:block;
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    background:var(--white);
    box-shadow:var(--shadow-sm);
  }
  .formula-compare-table tbody th{
    display:block;
    padding:1rem;
    white-space:normal;
    background:var(--ink-900);
    color:#fff;
    font-family:var(--font-head);
    font-size:.86rem;
    text-transform:uppercase;
    letter-spacing:.04em;
  }
  .formula-compare-table td{
    display:grid;
    grid-template-columns:minmax(96px, .75fr) minmax(0, 1fr);
    gap:.75rem;
    align-items:start;
    padding:.9rem 1rem;
    border-bottom:1px solid var(--border);
  }
  .formula-compare-table td::before{
    content:attr(data-label);
    font-family:var(--font-head);
    font-size:.7rem;
    font-weight:800;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:var(--black);
  }
  .formula-compare-table td.is-featured{
    background:var(--red-tint);
  }
  .formula-compare-table tr td:last-child{
    border-bottom:none;
  }

  .testi-carousel{
    touch-action:pan-y;
  }
  .testi-track{
    gap:1rem;
  }
  .testi-card{
    flex:0 0 100%;
  }
}

/* Final mobile header and quote-progress hardening. The header is fixed on
   mobile so it cannot disappear with browser sticky quirks while scrolling. */
@media (max-width:900px){
  body{
    padding-top:74px;
  }
  .site-header{
    position:fixed !important;
    top:0;
    left:0;
    right:0;
    width:100%;
    z-index:180;
    padding:10px 0;
    background:rgba(255,255,255,.96);
    box-shadow:0 8px 22px rgba(13,13,15,.06);
    transform:none !important;
  }
  .site-header.is-scrolled{
    padding:5px 0;
    background:rgba(255,255,255,.86);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
  }
  .site-header .logo-mark{
    height:50px;
  }
  .site-header.is-scrolled .logo-mark{
    height:40px;
  }
  .filters-sidebar .filters-close{
    display:flex !important;
    margin-left:auto;
    margin-right:0;
    align-self:flex-end;
    right:auto;
  }
  .quote-section,
  .quote-box,
  .quote-left{
    overflow:visible !important;
  }
  .quote-progress{
    position:-webkit-sticky !important;
    position:sticky !important;
    top:72px;
    z-index:95;
    align-self:start;
  }
  .devis-modal__panel .quote-progress{
    top:12px;
    z-index:120;
  }
}

@media (max-width:480px){
  body{
    padding-top:68px;
  }
  .site-header .logo-mark{
    height:46px;
  }
  .site-header.is-scrolled .logo-mark{
    height:38px;
  }
  .quote-progress{
    top:66px;
  }
}

/* Responsive hardening for recently added service pages. These rules are kept
   near the end so earlier desktop service-page styles cannot override them. */
@media (max-width:900px){
  .vtc-filter-panel,
  .subscription-filter-panel{
    grid-template-columns:1fr !important;
    align-items:stretch;
    gap:14px;
    padding:16px;
    border-radius:20px;
  }
  .vtc-filter-panel .search-field,
  .subscription-filter-panel .search-field,
  .vtc-budget-filter,
  .subscription-category-filter{
    min-width:0;
    width:100%;
  }
  .vtc-filter-count,
  .subscription-filter-panel .vtc-filter-count{
    justify-self:start;
    width:100%;
    white-space:normal;
    line-height:1.45;
  }
  .vtc-info-grid,
  .custom-request-layout{
    grid-template-columns:1fr !important;
  }
  .custom-request-layout{
    gap:1.6rem;
  }
  .custom-request-copy{
    position:static !important;
    top:auto;
  }
  .custom-request-form{
    width:100%;
    min-width:0;
  }
}

@media (max-width:767px){
  .page-hero.page-hero--vehicles .hero-points{
    align-items:stretch;
  }
  .page-hero.page-hero--vehicles .hero-point.hero-action{
    justify-content:center;
    min-height:46px;
  }
  .subscription-benefits-section,
  .vtc-details-section{
    padding-top:28px;
    padding-bottom:28px;
  }
  .subscription-benefits-grid .service-info-card,
  .vtc-benefits-grid .service-info-card{
    padding:18px;
    border-radius:18px;
  }
  .subscription-benefits-grid .service-info-card h2,
  .vtc-benefits-grid .service-info-card h2{
    font-size:1.1rem;
  }
  .subscription-benefits-grid .service-info-card p,
  .vtc-benefits-grid .service-info-card p,
  .vtc-benefits-grid .service-info-card li{
    font-size:.9rem;
    line-height:1.6;
  }
  .abonnement-catalog{
    padding-top:18px;
  }
  .subscription-filter-panel,
  .vtc-filter-panel{
    margin-bottom:1rem;
  }
  .vtc-budget-head{
    align-items:flex-start;
    flex-direction:column;
    gap:4px;
  }
  .custom-request-copy h2{
    font-size:clamp(1.75rem, 9vw, 2.25rem);
    line-height:1.08;
  }
  .custom-request-copy p{
    font-size:.94rem;
    line-height:1.62;
  }
  .custom-request-form.contact-form-card{
    padding:1rem;
    border-radius:18px;
  }
  .custom-request-form .form-grid{
    grid-template-columns:1fr !important;
    gap:12px;
  }
  .custom-request-form .quote-submit{
    margin-top:16px;
  }
}

@media (max-width:480px){
  .page-hero.page-hero--vehicles{
    min-height:420px;
    padding:40px 0 44px;
  }
  .page-hero.page-hero--vehicles .page-hero-card{
    padding:1rem;
  }
  .page-hero.page-hero--vehicles h1{
    font-size:clamp(1.55rem, 9vw, 2.1rem);
  }
  .page-hero.page-hero--vehicles p{
    font-size:.88rem;
  }
  .vtc-filter-panel,
  .subscription-filter-panel{
    padding:14px;
  }
}

/* Final vehicle image fit: reduce empty margins in cards/detail while keeping
   the vehicle mostly visible across desktop and mobile. */
.offer-media.img-ph,
.offer-media.img-ph::after,
.vehicle-card .offer-media,
.vehicle-card .offer-media.img-ph,
.vehicle-card .offer-media.img-ph::after{
  background-size:108% auto !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}

.product-image .img-ph{
  background-size:112% auto !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}

@media (max-width:767px){
  .offer-media.img-ph,
  .offer-media.img-ph::after,
  .vehicle-card .offer-media,
  .vehicle-card .offer-media.img-ph,
  .vehicle-card .offer-media.img-ph::after{
    background-size:106% auto !important;
  }

  .product-image .img-ph{
    background-size:110% auto !important;
  }

}