/* ==========================================================================
   CPM-531 — Carrosserie · Peinture · Mécanique — Évreux (27)
   Feuille de style unique. Généré côté HTML par build/build.py.
   ========================================================================== */

:root {
  --accent: #E30613;
  --accent-dark: #b8040f;

  --ink: #1A1A1A;
  --ink-strong: #111;
  --ink-soft: #35353A;
  --ink-sub: #47474D;
  --muted: #6E6E74;
  --dim: #8A8A8F;

  --dark: #0D0D0F;
  --darker: #0A0A0C;
  --card-dark: #17171A;
  --card-dark-hover: #1D1D21;
  --on-dark: #C9C9CC;
  --on-dark-soft: #9A9AA1;

  --surface: #fff;
  --surface-alt: #F2F2F3;
  --border: #E4E4E6;

  --container: 1240px;
  --gutter: 40px;

  --sans: 'Barlow', system-ui, -apple-system, sans-serif;
  --display: 'Saira Condensed', 'Barlow Condensed', sans-serif;

  --shadow-sm: 0 1px 2px rgba(10, 10, 12, .06), 0 4px 14px rgba(10, 10, 12, .05);
  --shadow-md: 0 10px 34px rgba(10, 10, 12, .12);
}

/* ── Base ─────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }
/* <picture> (srcset WebP) ne crée pas de boîte : l'<img> reste l'enfant direct
   de sa grille et garde tous les sélecteurs existants. */
picture { display: contents; }
/* Avec display:contents, les <source> deviennent eux aussi des enfants de la
   grille et consomment une colonne : l'image partait à droite et le texte
   passait à la ligne suivante. On les sort du flux. */
picture > source { display: none; }
h1, h2, h3, h4, p, blockquote, figure, ol, ul { margin: 0; }

/* Les composants qui déclarent display:flex/grid l'emportent sinon sur
   l'attribut hidden (filtre du catalogue véhicules, état vide…). */
[hidden] { display: none !important; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dark); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.ms {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  width: 100%;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 18px;
  background: var(--accent);
  color: #fff;
  font: 700 12.5px var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.skip-link:focus { left: 12px; top: 12px; color: #fff; }

.prose { margin: 0 0 22px; font: 400 15.5px/1.72 var(--sans); color: var(--ink-soft); }
.prose--lg { font-size: 16.5px; }
.prose p + p { margin-top: 16px; }
.prose:last-child { margin-bottom: 0; }

/* ── Boutons ──────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 48px;
  padding: 0 26px;
  font: 700 12.5px var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn .ms { font-size: 18px; }
.btn--sm { height: 38px; padding: 0 18px; font-size: 11.5px; letter-spacing: .1em; }
.btn--lg { height: 54px; padding: 0 30px; font-size: 13px; }

.btn--accent { background: var(--accent); color: #fff; }
.btn--accent:hover { background: var(--accent-dark); color: #fff; }

.btn--ghost { border-color: rgba(255,255,255,.5); color: #fff; }
.btn--ghost:hover { background: rgba(255,255,255,.12); color: #fff; }
.btn--sm.btn--ghost { border-color: rgba(255,255,255,.35); height: 40px; padding: 0 20px; }

.btn--dark { background: var(--dark); color: #fff; }
.btn--dark:hover { background: #000; color: #fff; }

.btn--outline-light { border-color: rgba(255,255,255,.75); color: #fff; }
.btn--outline-light:hover { background: rgba(255,255,255,.16); color: #fff; }

.btn--outline-dark { border-color: #C9C9CE; color: var(--ink-strong); }
.btn--outline-dark:hover { border-color: var(--ink-strong); background: var(--ink-strong); color: #fff; }

.iconbtn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(255,255,255,.35);
  color: #fff;
  cursor: pointer;
  transition: background-color .18s ease, opacity .18s ease;
}
.iconbtn .ms { font-size: 18px; }
.iconbtn:hover:not(:disabled) { background: rgba(255,255,255,.1); }
.iconbtn:disabled { opacity: .3; cursor: default; }
.iconbtn--dark { border-color: #C9C9CE; color: var(--ink-strong); }
.iconbtn--dark:hover:not(:disabled) { background: var(--ink-strong); border-color: var(--ink-strong); color: #fff; }

.link-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 700 11.5px var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
.link-more .ms { font-size: 15px; transition: transform .18s ease; }
a.link-more:hover .ms,
a:hover .link-more .ms { transform: translateX(3px); }

/* ── Titres ───────────────────────────────────────────────────────────── */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  font: 600 12px var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
}
.eyebrow--accent { color: var(--accent); }
.eyebrow__dash { display: block; width: 30px; height: 2px; background: currentColor; flex: none; }

/* ── Petit « coup de vent » par mot au survol des eyebrows ───────────────
   Version CSS pure (pas de dépendance physique/spring) : chaque mot bascule
   légèrement, alternant haut/bas, avec un délai croissant par mot. */
.wobble { display: inline; }
.wb-w {
  display: inline-block;
  transition: transform .32s cubic-bezier(.34,1.56,.64,1);
  transition-delay: calc(var(--i, 0) * 35ms);
}
.wobble:hover .wb-w:nth-child(odd) { transform: translateY(-3px) rotate(-3deg); }
.wobble:hover .wb-w:nth-child(even) { transform: translateY(2px) rotate(3deg); }

.sec-title {
  display: inline-block;
  margin: 0 0 6px;
  padding-top: 18px;
  border-top: 2px solid var(--accent);
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.04;
  text-transform: uppercase;
  color: var(--ink-strong);
  text-wrap: balance;
}
.sec-title--light { color: #fff; }

.sec-sub {
  margin: 0 0 24px;
  font-family: var(--display);
  font-style: italic;
  font-weight: 600;
  font-size: 19px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ink-sub);
}

/* ── Features ─────────────────────────────────────────────────────────── */

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; margin-bottom: 26px; }
.grid-2--wide { gap: 22px 26px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 26px; }
.stack { display: grid; gap: 18px; max-width: 520px; margin-bottom: 26px; }

.feature { display: flex; gap: 12px; }
/* Variante cliquable (accueil → pages de prestation) : même rendu, titre souligné au survol. */
a.feature { color: inherit; }
a.feature:hover h3 { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.feature__icon { font-size: 22px; color: var(--accent); flex: none; }
.feature h3 { margin: 0 0 4px; font: 700 13.5px var(--sans); color: var(--ink-strong); text-wrap: balance; }
.feature p { margin: 0; font: 400 13px/1.55 var(--sans); color: var(--muted); }

.feature--boxed { background: var(--surface); border: 1px solid var(--border); padding: 16px; }
.feature--lg { gap: 13px; }
.feature--lg h3 { font-size: 13.5px; }
.feature--lg p { font-size: 13px; }
.feature--card { padding: 22px; gap: 14px; }
.feature--card .feature__icon { font-size: 26px; }
.feature--card h3 { margin-bottom: 6px; font-size: 14px; }
.feature--card p { font-size: 13px; line-height: 1.55; }

/* ── Barre supérieure + en-tête ───────────────────────────────────────── */

.topbar { background: var(--darker); border-bottom: 1px solid rgba(255,255,255,.07); }
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 26px;
  min-height: 38px;
  padding-top: 6px;
  padding-bottom: 6px;
}
.topbar__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 500 12.5px var(--sans);
  color: var(--on-dark);
}
.topbar__item .ms { font-size: 17px; color: var(--accent); }
.topbar__phone {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font: 700 13px var(--sans);
  letter-spacing: .06em;
  color: #fff;
}
.topbar__phone .ms { font-size: 17px; color: var(--accent); }
.topbar__phone:hover { color: var(--accent); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--dark);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.site-header__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 10px var(--gutter);
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}

.logo { display: block; flex: none; line-height: 0; }
.logo img { width: 168px; height: auto; display: block; }

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px 20px;
  min-width: 0;
}
.nav__link {
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  font: 600 12.5px var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-dark);
  transition: color .18s ease, border-color .18s ease;
}
.nav__link:hover { color: #fff; }

/* En-tête : logo, liens et bouton doivent tenir sur UNE seule ligne. Sans
   cela, « Devis gratuit » passait à la ligne entre 1080 et 1300 px. La barre
   se resserre par paliers (gouttières, interlettrage, corps) au lieu de
   renvoyer un élément à la ligne suivante. */
.nav { flex-wrap: nowrap; white-space: nowrap; }

@media (min-width: 1081px) and (max-width: 1300px) {
  .nav { gap: 10px 14px; }
  .nav__link, .nav__trigger { font-size: 12px; letter-spacing: .08em; }
  .nav__chev { font-size: 16px; }
  .nav__cta { padding: 0 14px; letter-spacing: .06em; }
  .logo img { width: 150px; }
  .site-header.is-scrolled .logo img { width: 132px; }
}

@media (min-width: 1081px) and (max-width: 1160px) {
  .nav { gap: 10px 11px; }
  .nav__link, .nav__trigger { font-size: 11.5px; letter-spacing: .04em; }
  .nav__cta { padding: 0 12px; font-size: 11px; letter-spacing: .04em; }
  .logo img { width: 138px; }
  .site-header.is-scrolled .logo img { width: 124px; }
}
.nav__link.is-active { color: #fff; border-bottom-color: var(--accent); }

/* ── Mega menu ────────────────────────────────────────────────────────── */

.nav__group { position: relative; }

.nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  font: 600 12.5px var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-dark);
}
.nav__chev { font-size: 18px; transition: transform .3s ease; }
.nav__group.is-open .nav__chev { transform: rotate(180deg); }
.nav__group.is-open .nav__trigger { color: #fff; }

.mega {
  position: absolute;
  left: 50%;
  top: calc(100% + 18px);
  z-index: 70;
  transform: translate(-50%, 8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .26s cubic-bezier(.22,.61,.36,1),
              transform .26s cubic-bezier(.22,.61,.36,1),
              visibility .26s;
}
.nav__group.is-open .mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* Zone tampon : le curseur peut traverser l'espace sous le déclencheur. */
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }

.mega__inner {
  display: flex;
  gap: 38px;
  padding: 26px 28px;
  background: var(--dark);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  box-shadow: 0 26px 60px rgba(0,0,0,.45);
}
.mega__col { min-width: 232px; }
.mega__title {
  margin: 0 0 16px;
  font: 600 11.5px var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.mega__list { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }

.mega__item { display: flex; align-items: flex-start; gap: 12px; }
.mega__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: none;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 8px;
  color: #fff;
  transition: background-color .28s ease, color .28s ease, border-color .28s ease;
}
.mega__icon .ms { font-size: 20px; }
.mega__item:hover .mega__icon { background: #fff; border-color: #fff; color: #0A0A0A; }
.mega__body { display: grid; gap: 2px; }
.mega__label { font: 600 14px var(--sans); color: #fff; }
.mega__desc {
  font: 400 12.5px/1.4 var(--sans);
  color: rgba(255,255,255,.5);
  transition: color .28s ease;
}
.mega__item:hover .mega__desc { color: #fff; }

/* Dropdown à une seule catégorie (Carrosserie, Mécanique, Peinture, Pare-brise) :
   un lien de vue d'ensemble mis en avant, puis la liste des prestations. */
.mega--single .mega__inner { padding: 10px; }
.mega__col--wide { min-width: 240px; }

.mega__overview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
  border-radius: 10px;
  background: rgba(227, 6, 19, .16);
  transition: background-color .2s ease;
}
.mega__overview:hover { background: rgba(227, 6, 19, .28); }
.mega__overview .ms:first-child { font-size: 20px; color: #fff; flex: none; }
.mega__overview-label { display: block; font: 700 13.5px var(--sans); color: #fff; }
.mega__overview-sub { display: block; margin-top: 2px; font: 400 11.5px var(--sans); color: rgba(255,255,255,.6); }
.mega__overview-arrow { margin-left: auto; font-size: 18px; color: #fff; flex: none; }

.mega__rowgrid { display: flex; gap: 4px 28px; padding: 6px 6px 8px; }
.mega__rows { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; min-width: 216px; }
.mega__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 6px;
  font: 500 13px var(--sans);
  color: rgba(255,255,255,.7);
  white-space: nowrap;
  transition: background-color .18s ease, color .18s ease;
}
.mega__row:hover { background: rgba(255,255,255,.08); color: #fff; }
.mega__row.is-active { color: var(--accent); font-weight: 700; }
.mega__rowicon { font-size: 17px; color: var(--accent); flex: none; }
.mega__row.is-active .mega__rowicon { color: var(--accent); }

.burger {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  cursor: pointer;
}
.burger .ms { font-size: 24px; }
.burger__close { display: none; }
.burger[aria-expanded="true"] .burger__open { display: none; }
.burger[aria-expanded="true"] .burger__close { display: inline-block; }

/* ── Slider hero (accueil) ────────────────────────────────────────────── */

.hs { position: relative; background: var(--dark); overflow: hidden; }
.hs__viewport { display: grid; min-height: 680px; }

.hs__slide {
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .9s ease, visibility .9s ease;
}
.hs__slide.is-active { opacity: 1; visibility: visible; }

.hs__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  transform: scale(1.02);
}
/* Travelling lent façon Ken Burns pendant que la diapositive est affichée. */
.hs__slide.is-active .hs__img { animation: hs-kenburns 9s ease-out forwards; }
@keyframes hs-kenburns { from { transform: scale(1.02); } to { transform: scale(1.11); } }

.hs__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8,8,10,.95) 0%, rgba(8,8,10,.86) 34%,
                                     rgba(8,8,10,.5) 66%, rgba(8,8,10,.6) 100%);
}

.hs__inner { position: relative; z-index: 2; padding-top: 92px; padding-bottom: 132px; }
.hs__inner > * { max-width: 640px; }

.hs__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  font: 600 12.5px var(--sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
}
.hs__title {
  margin: 0 0 22px;
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(36px, 5.4vw, 62px);
  line-height: 1.03;
  text-transform: uppercase;
  color: #fff;
  text-wrap: balance;
}
.hs__text { margin: 0 0 32px; font: 400 17px/1.62 var(--sans); color: #D3D3D6; max-width: 520px; }
.hs__actions { display: flex; flex-wrap: wrap; gap: 14px; max-width: none; }

/* Entrée décalée du texte à chaque changement de diapositive. */
.hs__slide.is-active .hs__eyebrow,
.hs__slide.is-active .hs__title,
.hs__slide.is-active .hs__text,
.hs__slide.is-active .hs__actions { animation: hs-in .7s cubic-bezier(.22,.61,.36,1) backwards; }
.hs__slide.is-active .hs__eyebrow { animation-delay: .12s; }
.hs__slide.is-active .hs__title   { animation-delay: .22s; }
.hs__slide.is-active .hs__text    { animation-delay: .32s; }
.hs__slide.is-active .hs__actions { animation-delay: .42s; }
@keyframes hs-in { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

.hs__arrow {
  position: absolute;
  top: calc(50% - 46px);
  z-index: 3;
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(10,10,12,.42);
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.hs__arrow .ms { font-size: 26px; }
.hs__arrow:hover { background: var(--accent); border-color: var(--accent); }
.hs__arrow--prev { left: 18px; }
.hs__arrow--next { right: 18px; }
.hs__arrow--prev:hover { transform: translateX(-3px); }
.hs__arrow--next:hover { transform: translateX(3px); }

.hs__nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  background: rgba(10,10,12,.55);
  backdrop-filter: blur(6px);
  border-top: 1px solid rgba(255,255,255,.12);
}
.hs__tabs { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; }
.hs__tabs::-webkit-scrollbar { display: none; }
.hs__tab {
  flex: 1 1 0;
  min-width: 140px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 18px 14px;
  background: none;
  border: 0;
  border-top: 2px solid transparent;
  color: var(--on-dark-soft);
  font: 600 12.5px var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}
.hs__tab:hover { color: #fff; background: rgba(255,255,255,.06); }
.hs__tab.is-active { color: #fff; border-top-color: var(--accent); background: rgba(255,255,255,.05); }
.hs__tabnum { font-family: var(--display); font-style: italic; font-size: 15px; color: var(--accent); }

.hs__progress { height: 2px; background: rgba(255,255,255,.12); }
.hs__progress span { display: block; height: 100%; width: 0; background: var(--accent); }
.hs__progress span.is-running { transition: width linear; }

/* ── Hero accueil ─────────────────────────────────────────────────────── */

.hero { position: relative; background: var(--dark); }
.hero__media {
  position: relative;
  min-height: 620px;
  display: flex;
  align-items: center;
  background-image:
    linear-gradient(90deg, rgba(8,8,10,.95) 0%, rgba(8,8,10,.86) 38%, rgba(8,8,10,.45) 68%, rgba(8,8,10,.5) 100%),
    url(img/hero-facade.jpg);
  background-size: cover, cover;
  background-position: center, center 42%;
}
.hero__inner { padding-top: 92px; padding-bottom: 92px; }
.hero__copy { max-width: 660px; }
.hero .eyebrow { margin-bottom: 22px; font-size: 12.5px; letter-spacing: .22em; }

.hero__title {
  margin: 0 0 24px;
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(38px, 5.6vw, 64px);
  line-height: 1.03;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: #fff;
  text-wrap: balance;
}
.hero__lede { margin: 0 0 32px; font: 400 17.5px/1.62 var(--sans); color: #D3D3D6; max-width: 540px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__meta {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 26px;
  font: 500 13.5px var(--sans);
  color: var(--on-dark);
}
.hero__meta .ms { font-size: 18px; color: var(--accent); }

.trustbar { border-top: 1px solid rgba(255,255,255,.1); background: var(--darker); }
.trustbar__grid {
  padding-top: 20px;
  padding-bottom: 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px 24px;
}
.trustbar__item {
  display: flex;
  align-items: center;
  gap: 11px;
  font: 600 12px var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #E8E8EA;
}
.trustbar__item .ms { font-size: 23px; color: var(--accent); flex: none; }

/* ── Hero de page intérieure ──────────────────────────────────────────── */

.phero {
  position: relative;
  overflow: hidden;
  background: var(--dark);
}
/* Image LCP en <img> réel (préchargeable, srcset) sous un voile dégradé
   identique à l'ancien background-image. */
.phero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
}
.phero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8,8,10,.95) 0%, rgba(8,8,10,.84) 46%, rgba(8,8,10,.55) 100%);
}
.phero__inner { position: relative; z-index: 1; }
.phero__inner { padding-top: 62px; padding-bottom: 68px; max-width: 900px; margin-inline: auto; }
.phero__title {
  margin: 14px 0 18px;
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(32px, 4.6vw, 54px);
  line-height: 1.04;
  text-transform: uppercase;
  color: #fff;
  text-wrap: balance;
}
.phero__lede { margin: 0; font: 400 17px/1.62 var(--sans); color: #D3D3D6; max-width: 660px; }
.phero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

.crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font: 500 12px var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
}
.crumb a { color: var(--on-dark-soft); }
.crumb a:hover { color: #fff; }
.crumb__sep { color: #55555C; }
.crumb [aria-current] { color: var(--accent); }

/* ── Intro de page service ────────────────────────────────────────────── */

.intro { padding: 66px 0 10px; }
.intro__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; align-items: start; }

/* ── Prestations ──────────────────────────────────────────────────────── */

.prestations { padding: 56px 0 74px; }
.prestations__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 30px;
}
.presta {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  padding: 24px 22px;
  transition: box-shadow .2s ease, transform .2s ease;
}
.presta:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.presta__icon { font-size: 28px; color: var(--accent); }
.presta__title { margin: 14px 0 8px; font: 700 15px var(--sans); color: var(--ink-strong); }
.presta__text { margin: 0; font: 400 13.5px/1.6 var(--sans); color: var(--muted); }

/* Carte de prestation cliquable, vers sa page dédiée. */
.presta--link { display: block; position: relative; color: inherit; }
.presta--link:hover { color: inherit; border-top-color: var(--accent-dark); }
.presta__more {
  position: absolute;
  top: 22px;
  right: 20px;
  font-size: 18px;
  color: var(--accent);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .2s ease, transform .2s ease;
}
.presta--link:hover .presta__more { opacity: 1; transform: none; }

.prestations--tight { padding: 0 0 74px; }
.prestations__grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ── Galerie « déroulé de l'intervention » (pages de prestation carrosserie) */

.pgallery { background: var(--surface-alt); padding: 66px 0 74px; }
.pgallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 20px;
  margin-top: 30px;
}
.pgallery__card { display: flex; flex-direction: column; }
.pgallery__media { position: relative; margin-bottom: 14px; }
.pgallery__media img { width: 100%; height: 150px; object-fit: cover; display: block; }
.pgallery__num {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 3px 9px;
  background: rgba(10,10,12,.82);
  color: #fff;
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: 14px;
}
.pgallery__title { margin: 0 0 6px; font: 700 13.5px var(--sans); color: var(--ink-strong); }
.pgallery__text { margin: 0; font: 400 12.5px/1.55 var(--sans); color: var(--muted); }

/* ── Bandeau CTA compact intermédiaire ────────────────────────────────── */

.prestations__cta-band { background: var(--surface); padding: 0 0 66px; }
.prestations__cta-band-inner { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ── Prestations sœurs (liens vers les autres pages de la catégorie) ────── */

.siblingnav { background: var(--surface-alt); padding: 60px 0 68px; }
.siblingnav__head { margin-bottom: 26px; }
.siblingnav__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}
.siblingnav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  font: 600 13px var(--sans);
  color: var(--ink-soft);
  transition: border-color .18s ease, color .18s ease;
}
.siblingnav__link:hover { border-color: var(--accent); color: var(--accent); }
.siblingnav__link .ms { font-size: 16px; color: var(--accent); flex: none; }
.prestations__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* ── Étapes ───────────────────────────────────────────────────────────── */

.process { background: var(--surface-alt); padding: 70px 0 78px; }
.steps {
  list-style: none;
  padding: 0;
  margin: 30px 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  counter-reset: step;
}
.steps__item {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.steps__num {
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: 34px;
  line-height: 1;
  color: var(--accent);
}
.steps__item h3 { margin: 0 0 6px; font: 700 14px var(--sans); color: var(--ink-strong); }
.steps__item p { margin: 0; font: 400 13.5px/1.6 var(--sans); color: var(--muted); }

/* ── Bandeau marques (accueil) ────────────────────────────────────────── */

.brandstrip { background: var(--surface); padding: 34px 0 40px; }
.brandstrip__label {
  margin: 0 0 24px;
  text-align: center;
  font: 600 11.5px var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dim);
}
.brandstrip__list {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  align-items: start;
  gap: 18px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.brandstrip__list li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  color: #A6A6AB;
  transition: color .2s ease;
}
.brandstrip__list li:hover { color: var(--ink-soft); }
.brand-mark { color: #B7B7BC; transition: color .2s ease; }
.brandstrip__list li:hover .brand-mark { color: var(--accent); }
.brand-name {
  font: 700 11px var(--display);
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* ── Services (accueil) ───────────────────────────────────────────────── */

.services { background: var(--surface-alt); padding: 74px 0 86px; }
.services__title {
  margin: 0 0 34px;
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(30px, 3.6vw, 42px);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--ink-strong);
}
.services__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-top: 30px; }

.svc {
  display: flex;
  flex-direction: column;
  min-height: 258px;
  padding: 24px 22px 22px;
  background: var(--card-dark);
  border-top: 3px solid transparent;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.svc:hover { background: var(--card-dark-hover); border-top-color: var(--accent); color: #fff; transform: translateY(-3px); }
.svc__head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 44px; }
.svc__num { font-family: var(--display); font-style: italic; font-weight: 700; font-size: 30px; color: #4C4C54; }
.svc__icon { font-size: 28px; color: var(--accent); }
.svc__name { margin: 0 0 10px; font: 700 15px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.svc__desc { margin: 0 0 auto; font: 400 13.5px/1.55 var(--sans); color: var(--on-dark-soft); }
.svc .link-more { margin-top: 22px; }

/* ── Sections image + texte ───────────────────────────────────────────── */

.split { padding: 78px 0; }
.split--gray { background: var(--surface-alt); }
.split__grid { display: grid; grid-template-columns: 0.92fr 1fr; gap: 54px; align-items: center; }
.split__img { width: 100%; height: 430px; object-fit: cover; display: block; }

/* Accueil : blocs alignés en haut, comme la maquette d'origine. */
.split--home .split__grid { align-items: start; }
.split--tight { padding-top: 0; }
.split__grid--mecanique { grid-template-columns: 0.86fr 1fr; }
.split--home .split__img { height: 420px; }
.split--home .split__img--tall { height: 400px; }

/* Accueil : bloc carrosserie avec la colonne avant / après. */
.split__grid--triple { grid-template-columns: 0.82fr 1.05fr 190px; gap: 34px; align-items: start; }

/* Colonnes de texte des blocs « split » : leur largeur change selon la mise en
   page (2 ou 3 colonnes). Sans garde-fou, les cartes deviennent trop étroites
   et les titres se coupent en deux lignes (« Vidange & entretien »).
   On réduit le nombre de colonnes de la grille quand la place manque. */
.split__grid > div:has(> .grid-2, > .grid-3) { container-type: inline-size; }

@container (max-width: 620px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@container (max-width: 420px) {
  .grid-2, .grid-2--wide, .grid-3 { grid-template-columns: 1fr; }
}

.beforeafter { display: grid; gap: 16px; }
.beforeafter__tile {
  position: relative;
  height: 192px;
  margin: 0;
  background-image: url(img/avant-apres.jpg);
  background-size: 200% 100%;
}
.beforeafter__tile--before { background-position: left center; }
.beforeafter__tile--after { background-position: right center; }
.beforeafter__tag {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 5px 12px;
  background: rgba(10,10,12,.82);
  color: #fff;
  font: 700 11px var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.beforeafter__tag--accent { background: var(--accent); }

/* ── Galerie ──────────────────────────────────────────────────────────── */

.gallery { padding: 74px 0 80px; }
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 30px;
}
.gallery figure { margin: 0; position: relative; overflow: hidden; }
.gallery img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.gallery figure:hover img { transform: scale(1.05); }
.gallery figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 22px 14px 12px;
  background: linear-gradient(180deg, transparent, rgba(8,8,10,.82));
  color: #fff;
  font: 600 11.5px var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ── Zones d'intervention ─────────────────────────────────────────────── */

.zones { background: var(--surface-alt); padding: 70px 0 76px; }
.zones__head { max-width: 760px; }
.zones__lede { margin: 18px 0 0; font: 400 15.5px/1.7 var(--sans); color: var(--ink-soft); }
.zones__list {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.zones__list li {
  padding: 8px 15px;
  background: var(--surface);
  border: 1px solid var(--border);
  font: 600 12.5px var(--sans);
  color: var(--ink-soft);
}
.zones__note { margin: 24px 0 0; font: 400 14px/1.6 var(--sans); color: var(--muted); }
.zones__ring {
  margin: 30px 0 12px;
  font: 600 11.5px var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-sub);
}
.zones__list li small { margin-left: 7px; font-size: 11.5px; color: var(--muted); font-weight: 500; }
.zones__list li a { color: var(--ink-strong); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(227,6,19,.45); }
.zones__list li a:hover { color: var(--accent); }

/* ── Bloc pratique « où / quand / téléphone » (pages de prestation) ──── */

.wherewhen { padding: 0 0 70px; background: var(--surface); }
.wherewhen__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.wherewhen .contact__card { margin: 0; }
.prose__local a { text-decoration: underline; text-underline-offset: 3px; }

/* ── Itinéraire (contact, pages communes) ────────────────────────────── */

.directions { margin-top: 18px; padding: 20px; background: var(--surface-alt); border: 1px solid var(--border); }
.directions__addr { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 16px; font: 400 14.5px/1.5 var(--sans); color: var(--ink-soft); }
.directions__addr .ms { color: var(--accent); font-size: 22px; flex: none; }
.directions__addr strong { color: var(--ink-strong); }
.directions__btns { display: flex; flex-wrap: wrap; gap: 10px; }
.directions__btns .ms { font-size: 17px; }

/* ── Bloc « L'atelier » (accueil) ─────────────────────────────────────── */

.atelier { padding: 78px 0; background: var(--surface); }
.atelier__grid { display: grid; grid-template-columns: 0.86fr 1fr; gap: 54px; align-items: center; }
.atelier .grid-2 { margin-top: 26px; }
.atelier__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* Accueil sans stock en ligne : bloc service véhicules. */
.stock__pitch { max-width: 860px; }
.stock__lede { margin: 18px 0 26px; font: 400 15.5px/1.7 var(--sans); color: var(--on-dark); }
.cta__actions--row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── Avis ─────────────────────────────────────────────────────────────── */

.reviews { background: var(--surface); padding: 74px 0 82px; }
.reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 0.72fr;
  gap: 18px;
  align-items: stretch;
  margin-top: 30px;
}
.review {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 22px;
  display: flex;
  flex-direction: column;
}
.stars { display: flex; gap: 2px; margin-bottom: 14px; color: var(--accent); }
.stars .ms { font-size: 17px; }
.review blockquote { margin: 0 0 16px; font: 400 13.5px/1.6 var(--sans); color: var(--ink-soft); }
.review figcaption { margin-top: auto; font: 700 13px var(--sans); color: var(--ink-strong); }
.review__icon { font-size: 30px; color: var(--accent); margin-bottom: 14px; }
.review h3 { margin: 0 0 8px; font: 700 15.5px/1.3 var(--sans); color: var(--ink-strong); }
.review p { margin: 0; font: 400 13.5px/1.6 var(--sans); color: var(--ink-soft); }
.rating__text { margin: 0 0 12px; font: 400 13px/1.55 var(--sans); color: var(--on-dark); }
.rating .btn { margin-top: 4px; }
.link-more--sm { margin-top: 12px; font-size: 12px; color: var(--on-dark); }
.link-more--sm:hover { color: #fff; }
.reviews__note { margin: 22px 0 0; font: 400 13.5px/1.6 var(--sans); color: var(--muted); }

.rating {
  background: var(--dark);
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}
.rating__star { font-size: 34px; color: var(--accent); }
.rating__score {
  margin: 0;
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
  color: #fff;
}
.rating__score span { font-size: 15px; color: var(--on-dark-soft); }
.rating__label { margin: 0; font: 600 11.5px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark); }
.rating__count { margin: 4px 0 0; font: 400 12px var(--sans); color: var(--dim); }

/* ── FAQ ──────────────────────────────────────────────────────────────── */

.faq-section { padding: 74px 0 82px; background: var(--surface); }
.faq-section__inner { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 48px; align-items: start; }
.faq { display: grid; gap: 12px; }
.faq__item { background: var(--surface); border: 1px solid var(--border); }
.faq__item[open] { border-color: #CFCFD4; box-shadow: var(--shadow-sm); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 20px;
  cursor: pointer;
  font: 700 14.5px/1.45 var(--sans);
  color: var(--ink-strong);
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__chev { font-size: 22px; color: var(--accent); flex: none; transition: transform .2s ease; }
.faq__item[open] .faq__chev { transform: rotate(180deg); }
.faq__a { padding: 0 20px 18px; }
.faq__a p { margin: 0; font: 400 14.5px/1.68 var(--sans); color: var(--ink-soft); }

/* ── Bandeau CTA ──────────────────────────────────────────────────────── */

.cta { position: relative; background: var(--dark); overflow: hidden; }
.cta__grid { position: relative; display: grid; grid-template-columns: 0.72fr 1fr; min-height: 310px; align-items: stretch; }
.cta__media {
  background-image: linear-gradient(90deg, rgba(8,8,10,.5), rgba(8,8,10,.72)), var(--cta-img);
  background-size: cover, cover;
  background-position: center, center;
}
.cta__panel { position: relative; background: var(--accent); display: flex; align-items: center; }
.cta__wedge {
  position: absolute;
  left: -110px;
  top: 0;
  bottom: 0;
  width: 160px;
  background: var(--accent);
  clip-path: polygon(60% 0, 100% 0, 100% 100%, 0 100%);
}
.cta__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
  padding: 54px 40px 54px 24px;
  max-width: 920px;
}
.cta__title {
  margin: 0 0 14px;
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.05;
  text-transform: uppercase;
  color: #fff;
}
.cta__text { margin: 0; font: 400 15px/1.62 var(--sans); color: rgba(255,255,255,.92); max-width: 500px; }
.cta__actions { display: grid; gap: 12px; justify-items: stretch; }

.reassurance { background: var(--surface); border-top: 1px solid var(--border); }
.reassurance__grid {
  padding-top: 20px;
  padding-bottom: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  justify-items: center;
}
.reassurance p { display: flex; align-items: center; gap: 11px; font: 500 13.5px var(--sans); color: var(--ink-soft); }
.reassurance .ms { font-size: 22px; color: var(--accent); }

/* ── Véhicules ────────────────────────────────────────────────────────── */

.stock { padding: 74px 0 80px; }
.stock--dark { background: var(--dark); }
.stock--dark .veh { border-color: transparent; }
.stock__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.vehicles__tools { display: flex; align-items: center; gap: 10px; flex: none; }

.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 60px) / 4);
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.rail::-webkit-scrollbar { display: none; }

.veh {
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
}
.veh__media { position: relative; }
.veh__media img { width: 100%; height: 176px; object-fit: cover; display: block; }
.veh__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 11px;
  background: rgba(10,10,12,.85);
  color: #fff;
  font: 700 10px var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.veh__body { padding: 16px 16px 18px; display: flex; flex-direction: column; flex: 1; }
.veh__name { margin: 0 0 8px; font: 700 14px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-strong); }
.veh__spec { margin: 0 0 4px; font: 400 12.5px var(--sans); color: var(--muted); }
.veh .link-more { margin-top: 16px; }

/* ── Catalogue véhicules (page dédiée) ────────────────────────────────── */

.stockpage { padding: 62px 0 76px; }
.stockpage__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 32px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.stockpage__lede { margin: 16px 0 0; font: 400 15px/1.65 var(--sans); color: var(--muted); max-width: 560px; }
.stockpage__sort { display: grid; gap: 7px; min-width: 220px; }

.stockpage__layout { display: grid; grid-template-columns: 274px 1fr; gap: 32px; align-items: start; }
.stockpage__aside { position: sticky; top: 108px; }
.stockpage__count { margin: 0 0 16px; font: 600 13px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.stockpage__empty {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 26px 22px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  font: 400 15px/1.6 var(--sans);
  color: var(--ink-soft);
}
.stockpage__empty .ms { font-size: 24px; color: var(--accent); flex: none; }

.filters { background: var(--surface-alt); border: 1px solid var(--border); padding: 22px 20px; }
.filters__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.filters__title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font: 700 13px var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-strong);
}
.filters__title .ms { font-size: 19px; color: var(--accent); }
.filters__reset {
  background: none;
  border: 0;
  padding: 0;
  font: 600 12px var(--sans);
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
}
.filters__reset:hover { color: var(--accent); }

.filters__group { margin-bottom: 18px; }
.filters__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
  font: 600 12.5px var(--sans);
  letter-spacing: .04em;
  color: var(--ink-strong);
}
.filters__out { font: 700 13px var(--sans); color: var(--accent); }
.filters__input {
  width: 100%;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid #D8D8DC;
  font: 400 14px var(--sans);
  color: var(--ink);
}
.filters__input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(227,6,19,.12); }

.filters__checks { display: grid; gap: 8px; }
.filters__check {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  font: 500 13.5px var(--sans);
  color: var(--ink-soft);
  cursor: pointer;
}
.filters__check:hover { border-color: #C4C4CA; }
.filters__check input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }
.filters__check .ms { font-size: 18px; color: var(--accent); }
.filters__check:has(input:checked) { border-color: var(--accent); background: #FFF6F6; }

.filters__range { width: 100%; accent-color: var(--accent); }
.filters__help {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font: 400 12.5px/1.6 var(--sans);
  color: var(--muted);
}
.filters__help .ms { font-size: 16px; color: var(--accent); vertical-align: -3px; }
.filters__toggle { display: none; }

.stockgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.veh--card { border: 1px solid var(--border); transition: box-shadow .2s ease, transform .2s ease; }
.veh--card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.veh__nophoto {
  height: 176px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: repeating-linear-gradient(135deg, #17171A, #17171A 12px, #1D1D21 12px, #1D1D21 24px);
  color: var(--on-dark-soft);
  font: 600 11.5px var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.veh__nophoto .ms { font-size: 30px; color: var(--accent); }

.veh__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.veh__tags li {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  background: var(--surface-alt);
  font: 500 11.5px var(--sans);
  color: var(--ink-soft);
}
.veh__tags .ms { font-size: 14px; color: var(--accent); }

.veh__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
}
.veh__price {
  margin: 0;
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: 27px;
  line-height: 1;
  color: var(--ink-strong);
}
.veh__price span { font-size: 17px; color: var(--accent); }

/* ── Fiche véhicule détaillée ─────────────────────────────────────────── */

.vcrumb { background: var(--surface-alt); padding: 20px 0; border-bottom: 1px solid var(--border); }
.vcrumb .crumb { color: var(--muted); }
.vcrumb .crumb a { color: var(--muted); }
.vcrumb .crumb a:hover { color: var(--accent); }
.vcrumb .crumb [aria-current] { color: var(--ink-strong); }

.vdetail { padding: 54px 0 70px; }
.vdetail__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 50px; align-items: start; }

.vdetail__media { position: relative; }
.vdetail__media img {
  width: 100%;
  height: 460px;
  object-fit: cover;
  display: block;
  border: 1px solid var(--border);
}
.vdetail__nophoto {
  height: 460px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: repeating-linear-gradient(135deg, #17171A, #17171A 14px, #1D1D21 14px, #1D1D21 28px);
  color: var(--on-dark-soft);
  font: 600 12.5px var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid var(--border);
}
.vdetail__nophoto .ms { font-size: 40px; color: var(--accent); }
.vdetail__media .veh__badge { top: 16px; left: 16px; }

.vdetail__title {
  margin: 16px 0 6px;
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--ink-strong);
}
.vdetail__sub { margin: 0 0 24px; font: 500 15px var(--sans); color: var(--muted); }

.vdetail__price-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 20px 22px;
  margin-bottom: 22px;
  background: var(--surface-alt);
  border-left: 3px solid var(--accent);
}
.vdetail__price {
  margin: 0;
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: 36px;
  line-height: 1;
  color: var(--ink-strong);
}
.vdetail__price span { margin-left: 4px; font-size: 22px; color: var(--accent); }
.vdetail__price-note { margin: 0; font: 400 12.5px var(--sans); color: var(--muted); }

.vdetail__specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}
.vdetail__specs li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  font: 600 13px var(--sans);
  color: var(--ink-soft);
}
.vdetail__specicon { font-size: 19px; color: var(--accent); flex: none; }

.vdetail__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; }
.vdetail__reassure {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin: 0;
  font: 500 12.5px var(--sans);
  color: var(--muted);
}
.vdetail__reassure .ms { font-size: 17px; color: var(--accent); vertical-align: -3px; }

.vdetail-desc { background: var(--surface-alt); padding: 64px 0 70px; }
.vdetail-desc__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 50px; align-items: start; }

.vdetail__equip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.vdetail__equip li { display: flex; align-items: center; gap: 9px; font: 500 13.5px var(--sans); color: var(--ink-soft); }
.vdetail__equipicon { font-size: 18px; color: var(--accent); flex: none; }

.othervehs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 30px; }

/* ── Contact ──────────────────────────────────────────────────────────── */

.contact { padding: 70px 0 80px; }
.contact__grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 54px; align-items: start; }
.contact__sub {
  margin: 34px 0 14px;
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: 24px;
  text-transform: uppercase;
  color: var(--ink-strong);
}

.contact__card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  margin-bottom: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink-strong);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.contact__card:hover { border-color: var(--accent); color: var(--ink-strong); box-shadow: var(--shadow-sm); }
.contact__card .ms { font-size: 26px; color: var(--accent); flex: none; }
.contact__card strong { display: block; font: 700 16px var(--sans); }
.contact__card small { display: block; margin-top: 2px; font: 400 13px var(--sans); color: var(--muted); }
.contact__card--phone strong { font-size: 22px; letter-spacing: .02em; }
.contact__card--static { cursor: default; }

.hours { border: 1px solid var(--border); }
.hours--card { background: var(--surface); }
.hours__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 16px;
  font: 500 13.5px var(--sans);
  color: var(--ink-soft);
  border-bottom: 1px solid var(--border);
}
.hours__row:last-child { border-bottom: 0; }
.hours__row span:last-child { color: var(--muted); font-weight: 400; }


.contact__formwrap { display: grid; gap: 20px; }
.form { background: var(--surface-alt); border: 1px solid var(--border); padding: 30px; }
.form__title {
  margin: 0 0 8px;
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: 28px;
  text-transform: uppercase;
  color: var(--ink-strong);
}
.form__lede { margin: 0 0 22px; font: 400 14.5px/1.6 var(--sans); color: var(--muted); }
.form__row { display: grid; gap: 7px; margin-bottom: 16px; }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.form label { font: 600 12.5px var(--sans); letter-spacing: .04em; color: var(--ink-strong); }
.form label span { color: var(--accent); }
.form input, .form select, .form textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid #D8D8DC;
  font: 400 15px var(--sans);
  color: var(--ink);
}
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(227, 6, 19, .12);
}
.form textarea { resize: vertical; min-height: 120px; }
.form [aria-invalid="true"] { border-color: var(--accent); background: #FFF6F6; }
.form__consent { margin: 4px 0 18px; font: 400 12.5px/1.55 var(--sans); color: var(--muted); }
.form__submit { width: 100%; }
.form__fallback { margin: 14px 0 0; font: 500 13.5px/1.6 var(--sans); color: var(--ink-soft); }
.form__fallback:empty { margin: 0; }
.form__fallback a { font-weight: 700; }

/* Retour d'envoi : un bandeau qu'on ne peut pas rater, pas une ligne grise
   sous le bouton. Trois états — envoi en cours, succès, échec. */
.form__fallback--pending,
.form__fallback--ok,
.form__fallback--error {
  padding: 14px 16px;
  border-left: 3px solid currentColor;
  background: rgba(0, 0, 0, .035);
}
.form__fallback-title {
  display: block;
  margin-bottom: 3px;
  font: 700 14px var(--sans);
  letter-spacing: .01em;
}
.form__fallback--pending { color: var(--muted); }
.form__fallback--ok {
  color: #17794a;
  background: rgba(23, 121, 74, .08);
}
.form__fallback--ok .form__fallback-title::before {
  content: "✓";
  margin-right: 7px;
  font-weight: 700;
}
.form__fallback--error {
  color: var(--accent-dark, #b31217);
  background: rgba(179, 18, 23, .07);
}
.form__fallback--ok a, .form__fallback--error a { color: inherit; }

.contact__aside { background: var(--dark); padding: 26px 28px; color: var(--on-dark); }
.contact__aside h2 {
  margin: 0 0 10px;
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: 22px;
  text-transform: uppercase;
  color: #fff;
}
.contact__aside p { margin: 0 0 16px; font: 400 14px/1.65 var(--sans); color: var(--on-dark); }

/* ── Mentions légales ─────────────────────────────────────────────────── */

.legal { padding: 66px 0 80px; }
.legal__inner { max-width: 780px; }
.legal h2 {
  margin: 34px 0 12px;
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: 24px;
  text-transform: uppercase;
  color: var(--ink-strong);
}
.legal h2:first-child { margin-top: 0; }
.legal p { margin: 0 0 14px; font: 400 15px/1.72 var(--sans); color: var(--ink-soft); }

/* ── Pied de page ─────────────────────────────────────────────────────── */

.footer { background: var(--dark); padding: 58px 0 0; }
.footer__grid { display: grid; grid-template-columns: 1.35fr 0.8fr 1.05fr 1.25fr; gap: 36px; }
.footer__logo { width: 190px; height: auto; display: block; margin-bottom: 18px; }
.footer__about { margin: 0 0 20px; font: 400 13.5px/1.68 var(--sans); color: var(--dim); max-width: 330px; }

.social { display: flex; gap: 10px; }
.social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--on-dark);
  transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}
.social a:hover { border-color: var(--accent); background: var(--accent); color: #fff; }
.social .ms { font-size: 17px; }

.footer__title { margin: 0 0 18px; font: 700 12px var(--sans); letter-spacing: .18em; text-transform: uppercase; color: #fff; }
.footer__links { display: grid; gap: 11px; }
.footer__links > a,
.footer__links > span { font: 400 13.5px/1.5 var(--sans); color: var(--dim); }
.footer__links > a:hover { color: #fff; }
.footer__links--contact > a,
.footer__links--contact > span { display: flex; align-items: flex-start; gap: 10px; }
.footer__links--contact .ms { font-size: 18px; color: var(--accent); flex: none; }

.footer .hours { border-color: rgba(255,255,255,.12); }
.footer .hours__row {
  border-color: rgba(255,255,255,.08);
  padding: 8px 12px;
  font-size: 12.5px;
  color: var(--on-dark);
}
/* Les créneaux doivent tenir sur une ligne dans la colonne étroite du pied de page. */
.footer .hours__row span:last-child { color: var(--dim); white-space: nowrap; font-size: 11.5px; }

.footer__bar { margin-top: 46px; border-top: 1px solid rgba(255,255,255,.1); }
.footer__bar-inner {
  /* Trois zones : copyright à gauche, signature au centre, liens à droite.
     Les colonnes latérales sont égales (1fr) pour que le centre le soit
     vraiment, quelle que soit la longueur des deux textes. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px 24px;
  padding-top: 18px;
  padding-bottom: 18px;
}
.footer__bar-inner > .footer__legal { justify-self: end; text-align: right; }
.footer__bar p { font: 400 12.5px var(--sans); color: var(--muted); }
.footer__legal a { color: var(--dim); }
.footer__legal a:hover { color: #fff; }

/* ── Animations d'apparition au défilement ────────────────────────────── */

/* Les états masqués ne s'appliquent que si le JS a pris la main : sans lui,
   tout le contenu reste visible. */
.js-anim [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .65s cubic-bezier(.22,.61,.36,1),
              transform .65s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--rd, 0ms);
  will-change: opacity, transform;
}
.js-anim [data-reveal="zoom"] { transform: scale(.965); }
.js-anim [data-reveal="left"] { transform: translateX(-26px); }
.js-anim [data-reveal="right"] { transform: translateX(26px); }
.js-anim [data-reveal].is-in { opacity: 1; transform: none; will-change: auto; }
.anim-off [data-reveal] { transition: none !important; }

/* En-tête compact une fois la page défilée. */
.site-header { transition: box-shadow .25s ease, background-color .25s ease; }
.site-header.is-scrolled { box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.site-header.is-scrolled .site-header__inner { min-height: 62px; padding-top: 4px; padding-bottom: 4px; }
.site-header .site-header__inner { transition: min-height .25s ease, padding .25s ease; }
.site-header.is-scrolled .logo img { width: 142px; transition: width .25s ease; }
.logo img { transition: width .25s ease; }

/* Soulignement animé des liens de navigation. */
.nav__link { position: relative; }
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s cubic-bezier(.22,.61,.36,1);
}
.nav__link:hover::after { transform: scaleX(1); }
.nav__link.is-active::after { transform: scaleX(1); }

/* Retour en haut de page. */
.totop {
  position: fixed;
  right: 22px;
  bottom: 26px;
  z-index: 65;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  border: 0;
  color: #fff;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s, background-color .2s ease;
}
.totop.is-visible { opacity: 1; visibility: visible; transform: none; }
.totop:hover { background: var(--accent-dark); }
.totop .ms { font-size: 22px; }

/* ── Barre d'appel mobile ─────────────────────────────────────────────── */

.callbar { display: none; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1180px) {
  .services__grid { grid-template-columns: repeat(3, 1fr); }
  .prestations__grid, .prestations__grid--4 { grid-template-columns: repeat(2, 1fr); }
  .siblingnav__list { grid-template-columns: repeat(2, 1fr); }
  .brandstrip__list { grid-template-columns: repeat(7, 1fr); gap: 14px 10px; }
  .stockgrid { grid-template-columns: repeat(2, 1fr); }
  .rail { grid-auto-columns: calc((100% - 40px) / 3); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .gallery__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1080px) {
  :root { --gutter: 28px; }

  .burger { display: inline-flex; }
  .topbar__item--hours { display: none; }

  .nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 8px var(--gutter) 20px;
    background: var(--dark);
    border-bottom: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 18px 30px rgba(0,0,0,.35);
  }
  .nav.is-open { display: flex; }
  /* Le tiroir défile : avec un accordéon de 13 prestations ouvert, « Contact »
     et « Devis gratuit » restaient hors écran. */
  .nav { max-height: calc(100dvh - 100%); overflow-y: auto; -webkit-overflow-scrolling: touch;
         overscroll-behavior: contain; }
  .nav__phone { display: flex; align-items: center; gap: 10px; color: var(--accent); font-weight: 700; }
  .nav__phone .ms { font-size: 20px; }
  .totop { display: none; }
  .site-header__inner { position: relative; }
  .nav__link { padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.07); }

  /* En mobile, le mega menu devient une simple liste dépliée dans le tiroir. */
  .nav__group { width: 100%; }
  .nav__trigger { width: 100%; justify-content: space-between; padding: 13px 0;
                  border-bottom: 1px solid rgba(255,255,255,.07); }
  .mega,
  .nav__group.is-open .mega { position: static; transform: none; opacity: 1; visibility: visible; }
  .mega[hidden] { display: none; }
  .mega::before { display: none; }
  .mega__inner { flex-direction: column; gap: 22px; padding: 18px 0 6px;
                 background: none; border: 0; border-radius: 0; box-shadow: none; }
  .mega__col { min-width: 0; }
  .mega--single .mega__inner { padding: 6px 0 10px; }
  .mega__rowgrid { flex-direction: column; gap: 2px; padding: 4px 0 0; }
  .mega__rows { min-width: 0; }
  .mega__row { padding: 11px 10px; white-space: normal; }
  .nav__cta { margin-top: 16px; height: 46px; }

  .intro__grid, .faq-section__inner { grid-template-columns: 1fr; gap: 26px; }
  .wherewhen__grid { grid-template-columns: 1fr; }
  .contact__grid { grid-template-columns: 1fr; gap: 40px; }
  .vdetail__grid, .vdetail-desc__grid { grid-template-columns: 1fr; gap: 32px; }
  .othervehs { grid-template-columns: repeat(2, 1fr); }

  /* Les filtres passent en panneau dépliable au-dessus des résultats. */
  .stockpage__layout { grid-template-columns: 1fr; gap: 20px; }
  .stockpage__aside { position: static; }
  .filters { display: none; }
  .filters.is-open { display: block; }
  .filters__toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 14px 18px;
    background: var(--ink-strong);
    border: 0;
    color: #fff;
    font: 700 12.5px var(--sans);
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .filters__toggle .ms { font-size: 19px; }
  .filters__toggle .filters__chev { margin-left: auto; transition: transform .2s ease; }
  .filters__toggle[aria-expanded="true"] .filters__chev { transform: rotate(180deg); }

  .split__grid--triple, .split__grid--mecanique { grid-template-columns: 1fr 1fr; }
  .beforeafter { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .hs__viewport { min-height: 560px; }
  .hs__inner { padding-top: 60px; padding-bottom: 118px; }
  .hs__arrow { display: none; }
  .hs__tab { min-width: 128px; padding: 14px 12px; font-size: 11.5px; letter-spacing: .1em; }
  .totop { bottom: 66px; right: 14px; }

  .split { padding: 58px 0; }
  .split__grid, .split__grid--triple, .split__grid--mecanique, .atelier__grid { grid-template-columns: 1fr; gap: 30px; }
  .atelier { padding: 58px 0; }
  .atelier .split__img { height: 300px; }
  .split--home .split__img, .split--home .split__img--tall { height: 300px; }
  .vdetail__media img, .vdetail__nophoto { height: 320px; }
  .split__grid--rev > div { order: 2; }
  .split__img { height: 300px; }

  .services { padding: 58px 0 66px; }
  .services__grid { grid-template-columns: repeat(2, 1fr); }
  .svc { min-height: 210px; }
  .svc__head { margin-bottom: 28px; }

  .hero__media { min-height: 520px; }
  .hero__inner { padding-top: 62px; padding-bottom: 62px; }
  .trustbar__grid { grid-template-columns: repeat(2, 1fr); }

  .phero__inner { padding-top: 46px; padding-bottom: 52px; }

  .rail { grid-auto-columns: calc((100% - 20px) / 2); }
  .reviews__grid { grid-template-columns: 1fr 1fr; }

  .cta__grid { grid-template-columns: 1fr; }
  .cta__media { min-height: 200px; }
  .cta__wedge { display: none; }
  .cta__inner { grid-template-columns: 1fr; gap: 26px; padding: 40px var(--gutter); max-width: none; }
  .cta__actions { justify-items: stretch; }

  .reassurance__grid { grid-template-columns: 1fr; justify-items: start; gap: 12px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 34px; }

  /* Barre d'action fixe : l'appel doit rester à un pouce de distance. */
  .callbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid rgba(255,255,255,.12);
  }
  .callbar a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 14px 10px;
    font: 700 12.5px var(--sans);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
  }
  .callbar .ms { font-size: 19px; }
  .callbar__call { background: var(--accent); }
  .callbar__quote { background: var(--dark); }
  body { padding-bottom: 52px; }
}

@media (max-width: 620px) {
  .hs__viewport { min-height: 520px; }
  .hs__text { font-size: 15.5px; }
  .hs__actions .btn { width: 100%; }
  .hs__tab { flex: 0 0 auto; min-width: 116px; }

  .grid-2, .grid-2--wide, .grid-3, .form__grid { grid-template-columns: 1fr; }
  .brandstrip__list { grid-template-columns: repeat(3, 1fr); gap: 12px 8px; }
  .vdetail__specs, .vdetail__equip { grid-template-columns: 1fr; }
  .vdetail__actions .btn { width: 100%; }
  .othervehs { grid-template-columns: 1fr; }
  .vdetail__price-row { flex-wrap: wrap; }
  .prestations__grid, .prestations__grid--4 { grid-template-columns: 1fr; }
  .siblingnav__list { grid-template-columns: 1fr; }
  .prestations__cta-band-inner .btn { width: 100%; }
  .services__grid, .prestations__grid, .steps, .reviews__grid,
  .gallery__grid, .footer__grid { grid-template-columns: 1fr; }

  .topbar__inner { justify-content: center; }
  .topbar__item { display: none; }
  .topbar__phone { margin: 0; }

  .logo img { width: 138px; }
  .hero__actions .btn, .phero__actions .btn, .prestations__cta .btn { width: 100%; }
  .hero__lede { font-size: 16px; }

  .stock__head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .stockgrid { grid-template-columns: 1fr; }
  .stockpage__sort { min-width: 0; width: 100%; }
  .rail { grid-auto-columns: 80%; }
  .beforeafter { grid-template-columns: 1fr; }

  .form { padding: 22px 18px; }
  .footer__bar-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .footer__bar-inner > .footer__legal { justify-self: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rail { scroll-behavior: auto; }
  .hs__slide.is-active .hs__img { animation: none; transform: scale(1.02); }
  .hs__slide.is-active .hs__eyebrow,
  .hs__slide.is-active .hs__title,
  .hs__slide.is-active .hs__text,
  .hs__slide.is-active .hs__actions { animation: none; }
  .js-anim [data-reveal] { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .btn:hover, .presta:hover, .svc:hover { transform: none; }
  .gallery figure:hover img { transform: none; }
}

/* ------------------------------------------------------------------
   Signature daelio.fr — composant autonome, sans dépendance.
   Toutes les classes sont préfixées « daelio-sig » : aucun risque de
   collision avec les styles du site hôte.

   Personnalisation (facultative) sur .daelio-sig ou un parent :
     --daelio-sig-accent : couleur du signe et du soulignement
                           (défaut : la couleur du texte environnant)
   ------------------------------------------------------------------ */

.daelio-sig-wrap {
  /* Le pied de page ne définit pas toujours une couleur de texte sur son
     conteneur : --daelio-sig-color permet de la donner explicitement.
     Exemple : .daelio-sig-wrap { --daelio-sig-color: rgba(255,255,255,.5); } */
  color: var(--daelio-sig-color, inherit);
  margin: 22px 0 0;
  padding-top: 18px;
  text-align: center;
  border-top: 1px solid rgba(128, 128, 128, 0.16);
  border-top-color: color-mix(in srgb, currentColor 12%, transparent);
}

.daelio-sig {
  --daelio-sig-accent: currentColor;
  --daelio-sig-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid rgba(128, 128, 128, 0.22);
  border-color: color-mix(in srgb, currentColor 26%, transparent);
  background: transparent;
  color: inherit;
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition:
    border-color 0.28s var(--daelio-sig-ease),
    background-color 0.28s var(--daelio-sig-ease),
    transform 0.28s var(--daelio-sig-ease);
}

.daelio-sig:hover,
.daelio-sig:focus-visible {
  color: inherit;
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--daelio-sig-accent) 55%, transparent);
  background-color: color-mix(in srgb, currentColor 6%, transparent);
}

.daelio-sig:focus-visible {
  outline: 2px solid var(--daelio-sig-accent);
  outline-offset: 3px;
}

.daelio-sig__label {
  opacity: 0.68;
  font-weight: 400;
}

.daelio-sig__mark {
  display: inline-flex;
  width: 13px;
  height: 13px;
  flex: none;
  color: var(--daelio-sig-accent);
  opacity: 0.85;
  transition:
    transform 0.5s var(--daelio-sig-ease),
    opacity 0.28s var(--daelio-sig-ease);
}

.daelio-sig__mark svg {
  width: 100%;
  height: 100%;
  display: block;
}

.daelio-sig:hover .daelio-sig__mark,
.daelio-sig:focus-visible .daelio-sig__mark {
  transform: rotate(90deg) scale(1.14);
  opacity: 1;
}

.daelio-sig__name {
  position: relative;
  opacity: 1;
}

.daelio-sig__name::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background: var(--daelio-sig-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.34s var(--daelio-sig-ease);
}

.daelio-sig:hover .daelio-sig__name::after,
.daelio-sig:focus-visible .daelio-sig__name::after {
  transform: scaleX(1);
}

.daelio-sig__tld { opacity: 0.62; }

/* Variante sans pastille : texte seul, pour les pieds de page discrets */
.daelio-sig--bare {
  padding: 0;
  border: 0;
  background: none;
}
.daelio-sig--bare:hover,
.daelio-sig--bare:focus-visible {
  background: none;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .daelio-sig,
  .daelio-sig__mark,
  .daelio-sig__name::after {
    transition-duration: 0.01ms;
  }
  .daelio-sig:hover { transform: none; }
  .daelio-sig:hover .daelio-sig__mark { transform: none; }
}

/* Accent de marque + intégration dans la barre sombre du pied de page. */
.daelio-sig {
  --daelio-sig-accent: var(--accent);
  color: var(--muted);
  font-size: 12px;
}
.daelio-sig:hover, .daelio-sig:focus-visible { color: #fff; }

/* Pot de miel du formulaire : hors écran, jamais lu par un lecteur d'écran
   (le conteneur porte aria-hidden), rempli seulement par les robots. */
.form__pot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}