/* BS AUTO EXPERT — couleurs relevées sur le logo, l'enseigne et les affiches de l'atelier */

:root {
  --ink-950: #0c2536;
  --ink-900: #112f44;
  --ink-850: #15364d;
  --ink-800: #1a3f58;
  /* mêmes teintes en canaux, pour les voiles et le verre */
  --fond-rgb: 12 37 54;
  --surface-rgb: 17 47 68;
  --verre-rgb: 30 70 96;
  --navy: #0b2742;
  --petrol: #064b5c; /* fond du logo */
  --petrol-2: #126787; /* bandeau des affiches */
  --cyan: #72e8ef; /* voiture du logo */
  --cyan-hover: #a3f3f7;
  --blue: #27bef3; /* pastilles des affiches */
  --ice: #f3f9fd;
  --gold: #ffc940;

  --text: #eaf6fa;
  --muted: #adc3ce;
  --subtle: #93abb8;
  --line: rgba(160, 220, 240, 0.1);
  --line-strong: rgba(160, 220, 240, 0.18);
  --accent-ink: #032029;
  --cyan-soft: rgba(114, 232, 239, 0.1);
  --cyan-line: rgba(114, 232, 239, 0.35);

  --ok: #3ddc97;
  --warn: #ffb547;
  --off: #8aa0ad;
  --wa: #25d366;
  --danger: #ff8f8f;

  --radius-s: 10px;
  --radius: 14px;
  --radius-l: 22px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-titre: "Montserrat", "Inter", ui-sans-serif, system-ui, sans-serif;

  --header-h: 76px;
  color-scheme: dark;
}

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

[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  interpolate-size: allow-keywords;
}

body {
  margin: 0;
  background: var(--ink-950);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

::selection { background: var(--cyan); color: var(--accent-ink); }

a { color: inherit; }
img, svg { display: block; }
img { max-width: 100%; }
code { font-size: 0.9em; }
sup { font-size: 0.6em; line-height: 0; }

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--cyan);
  color: var(--accent-ink);
  border-radius: var(--radius-s);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s var(--ease-out);
}
.skip:focus { top: 16px; }

section[id] { scroll-margin-top: calc(var(--header-h) + 8px); }

/* Barre de lecture : pilotée par le défilement, donc linéaire */
.progression {
  position: fixed;
  inset: 0 0 auto;
  height: 2px;
  z-index: 120;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  .progression {
    animation: progression linear both;
    animation-timeline: scroll(root block);
  }
}
@keyframes progression { to { transform: scaleX(1); } }

/* ---------- Boutons ---------- */

.btn {
  --h: 46px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--h);
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 12px;
  font: 700 15px/1 var(--font-titre);
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 0.16s var(--ease-out),
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}
.btn:active { transform: scale(0.97); }
.btn .icon { width: 18px; height: 18px; }
.btn--sm { --h: 40px; padding: 0 16px; font-size: 14px; border-radius: 10px; }
.btn--lg { --h: 54px; padding: 0 24px; font-size: 16px; }
.btn--block { width: 100%; }

.btn--primary {
  background: linear-gradient(180deg, #92f1f6, var(--cyan));
  color: var(--accent-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 12px 30px -12px rgba(114, 232, 239, 0.7);
}
/* Reflet qui balaie le bouton au survol ; il revient sans transition */
.btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.6) 50%, transparent 65%);
  transform: translateX(-120%);
}
.btn--ghost {
  background: rgba(234, 246, 250, 0.05);
  border-color: var(--line-strong);
  color: var(--text);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.btn--wa { background: var(--wa); color: #03200e; }

.icon--fleche { transition: transform 0.2s var(--ease-out); }

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover::after { transform: translateX(120%); transition: transform 0.75s var(--ease-out); }
  .btn--ghost:hover { background: rgba(234, 246, 250, 0.1); border-color: rgba(160, 220, 240, 0.32); }
  .btn--wa:hover { background: #3be07a; }
  .btn:hover .icon--fleche { transform: translateX(3px); }
}

.link {
  background: none;
  border: 0;
  padding: 4px 0;
  color: var(--muted);
  font: 500 14px var(--font);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.link:hover { color: var(--text); }

.missing {
  display: inline-flex;
  padding: 2px 8px;
  border: 1px dashed var(--cyan-line);
  border-radius: 6px;
  color: var(--cyan);
  font-size: 12px;
  font-weight: 600;
}

/* ---------- Statut ouvert / fermé ---------- */

.statut {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 36px;
  padding: 0 14px 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgb(var(--fond-rgb) / 0.45);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--text);
  font: 600 13px/1 var(--font);
  text-decoration: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.statut--petit { height: 30px; padding: 0 12px 0 10px; font-size: 12.5px; background: rgba(234, 246, 250, 0.04); }
.statut__point {
  position: relative;
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--off);
  transition: background-color 0.3s ease;
}
.statut[data-etat="ouvert"] .statut__point { background: var(--ok); }
.statut[data-etat="bientot"] .statut__point { background: var(--warn); }
.statut[data-etat="ouvert"] .statut__point::after,
.statut[data-etat="bientot"] .statut__point::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  animation: ping 2.2s var(--ease-out) infinite;
}
@keyframes ping { to { transform: scale(3); opacity: 0; } }

[data-statut] { transition: filter 0.2s ease, opacity 0.2s ease; }
[data-statut].change { filter: blur(3px); opacity: 0.2; }

/* ---------- Ruban de l'offre ---------- */

.ruban {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 9px 16px;
  background: linear-gradient(90deg, var(--petrol), var(--petrol-2) 50%, var(--petrol));
  color: #fff;
  font: 500 13.5px/1.35 var(--font);
  text-decoration: none;
  text-align: center;
}
/* Un reflet passe de temps en temps, puis le ruban reste immobile */
.ruban::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.22) 50%, transparent 60%);
  transform: translateX(-100%);
  animation: reflet 7s var(--ease-in-out) 2s infinite;
}
@keyframes reflet {
  0% { transform: translateX(-100%); }
  22%, 100% { transform: translateX(100%); }
}
.ruban__tag {
  flex: none;
  padding: 4px 9px;
  border-radius: 6px;
  background: var(--cyan);
  color: var(--accent-ink);
  font: italic 800 11px/1 var(--font-titre);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ruban__reste { flex: none; color: var(--cyan); font-weight: 700; font-variant-numeric: tabular-nums; }
.ruban .icon { width: 16px; height: 16px; flex: none; transition: transform 0.2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .ruban:hover .icon { transform: translateX(3px); }
}

.demo {
  background: var(--warn);
  color: #2a1a00;
  font-size: 13px;
  padding: 8px 0;
}

/* ---------- En-tête ---------- */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background-color 0.35s ease, border-color 0.35s ease;
}
.header.is-scrolled {
  background: rgb(var(--fond-rgb) / 0.78);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border-bottom-color: var(--line);
}
.header__inner { display: flex; align-items: center; gap: 32px; height: var(--header-h); }

.marque { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.marque__voiture { width: 74px; height: auto; }
.marque__nom { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.marque__nom b { font: 800 17px/1 var(--font-titre); letter-spacing: 0.02em; }
.marque__nom small {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font: 600 9.5px/1 var(--font-titre);
  letter-spacing: 0.42em;
  margin-right: -0.42em;
}
.marque__nom small::before,
.marque__nom small::after { content: ""; width: 10px; height: 2px; background: var(--cyan); }
.marque__nom small::after { margin-left: -0.42em; }

.nav { display: flex; gap: 28px; margin-left: auto; }
.nav a {
  position: relative;
  padding: 6px 0;
  color: var(--muted);
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--cyan);
  transform: scaleX(0);
  transition: transform 0.25s var(--ease-out);
}
.nav a:hover,
.nav a.actif { color: var(--text); }
.nav a.actif::after { transform: scaleX(1); }

.header__actions { display: flex; align-items: center; gap: 10px; }
/* Sur l'accueil, le statut est déjà affiché en grand : il ne rejoint l'en-tête qu'au défilement */
.header__actions .statut { transition: opacity 0.3s ease, transform 0.3s var(--ease-out); }
.header:not(.is-scrolled) .header__actions .statut { opacity: 0; transform: translateY(-6px); pointer-events: none; }

/* ---------- Accueil ---------- */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: min(100svh, 940px);
  margin-top: calc(-1 * var(--header-h));
  padding: calc(var(--header-h) + 56px) 0 112px;
  background: var(--ink-950);
}
.hero__media {
  position: absolute;
  inset: -6% 0;
  z-index: -4;
  will-change: transform;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 55%;
  transform-origin: 65% 50%;
}
.hero__voile { position: absolute; inset: 0; z-index: -3; }
/* Teinte pétrole sur la photo, puis voile pour la lisibilité */
.hero__voile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(6, 75, 92, 0.75), rgba(11, 39, 66, 0.55));
  mix-blend-mode: multiply;
}
.hero__voile::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(var(--fond-rgb) / 0.95) 0%, rgb(var(--fond-rgb) / 0.82) 38%, rgb(var(--fond-rgb) / 0.35) 72%, rgb(var(--fond-rgb) / 0.55) 100%),
    linear-gradient(0deg, var(--ink-950) 0%, rgb(var(--fond-rgb) / 0) 32%);
}

/* Traînées lumineuses, comme la ligne de la voiture du logo */
.hero__trainees {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  transform: rotate(-9deg) scale(1.25);
  /* Les traînées sortent de derrière le texte, jamais à travers */
  -webkit-mask-image: linear-gradient(90deg, transparent 38%, #000 62%);
  mask-image: linear-gradient(90deg, transparent 38%, #000 62%);
}
.hero__trainees i {
  position: absolute;
  left: 0;
  width: 34%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(114, 232, 239, 0.15) 30%, rgba(114, 232, 239, 0.9) 85%, #fff);
  filter: drop-shadow(0 0 6px rgba(114, 232, 239, 0.9));
  opacity: 0.75;
  transform: translate3d(-110%, 0, 0);
  animation: trainee var(--t, 7s) linear var(--dl, 0s) infinite;
}
.hero__trainees i:nth-child(1) { top: 58%; --t: 6.2s; --dl: -1.2s; }
.hero__trainees i:nth-child(2) { top: 66%; --t: 8.5s; --dl: -4s; width: 22%; opacity: 0.5; }
.hero__trainees i:nth-child(3) { top: 73%; --t: 5.4s; --dl: -2.6s; }
.hero__trainees i:nth-child(4) { top: 81%; --t: 9.8s; --dl: -6s; width: 28%; opacity: 0.45; }
.hero__trainees i:nth-child(5) { top: 88%; --t: 7.1s; --dl: -3.3s; width: 18%; }
.hero.hors-champ .hero__trainees i,
.hero.hors-champ .hero__defiler span { animation-play-state: paused; }
@keyframes trainee { to { transform: translate3d(330%, 0, 0); } }

/* Halo qui suit la souris, amorti par un ressort */
.hero__lueur {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: 720px;
  height: 720px;
  margin: -360px 0 0 -360px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(114, 232, 239, 0.16), rgba(39, 190, 243, 0.06) 55%, transparent);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
  will-change: transform;
}
.hero.survol .hero__lueur { opacity: 1; }

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 56px;
  align-items: center;
}
.hero__inner > * { min-width: 0; }

.hero__surtitre { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 28px; }
.hero__lieu {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font: 700 12px/1 var(--font-titre);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.hero__lieu .icon { width: 15px; height: 15px; color: var(--cyan); }

.hero__titre {
  margin: 0;
  font: 800 clamp(2.7rem, 5.7vw, 5.3rem)/0.98 var(--font-titre);
  letter-spacing: -0.025em;
  text-transform: uppercase;
}
.ligne { display: block; overflow: hidden; padding: 0 0.08em 0.08em 0; margin-bottom: -0.04em; }
.ligne > span { display: inline-block; }
.accent {
  font-style: italic;
  font-weight: 900;
  background: linear-gradient(90deg, var(--cyan), var(--blue) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 0.06em;
}
.hero__lead { margin: 28px 0 0; max-width: 54ch; color: #c3d6df; font-size: 18px; line-height: 1.6; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

.hero__preuves {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  color: #c3d6df;
  font-size: 14px;
}
.hero__preuves li { display: inline-flex; align-items: center; gap: 8px; }
.hero__preuves .icon { width: 16px; height: 16px; color: var(--cyan); stroke-width: 2.4; }
.hero__preuves b { color: #fff; }
.hero__preuves a { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.hero__preuves a:hover { text-decoration-color: currentColor; }
.mini-etoiles { display: inline-flex; gap: 2px; }
.mini-etoiles svg { width: 14px; height: 14px; fill: var(--gold); }

.hero__defiler {
  position: absolute;
  left: 50%;
  bottom: 30px;
  width: 26px;
  height: 42px;
  margin-left: -13px;
  border: 2px solid rgba(234, 246, 250, 0.35);
  border-radius: 14px;
}
.hero__defiler span {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--cyan);
  animation: molette 1.9s var(--ease-in-out) infinite;
}
@keyframes molette {
  0% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(14px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}

/* Entrée de l'accueil : une seule fois, au chargement */
.js .ligne > span { transform: translateY(112%); }
.js .entree { opacity: 0; }
.js .hero__media img { opacity: 0; }
.pret .ligne > span { animation: ligne 1.05s var(--ease-out) both; }
.pret .ligne:nth-child(2) > span { animation-delay: 0.12s; }
.pret .entree { animation: entree 0.9s var(--ease-out) both; animation-delay: calc(var(--e, 0) * 90ms + 0.15s); }
.pret .entree--carte { animation-name: entree-carte; animation-duration: 1.1s; }
.pret .hero__media img { animation: photo 2.8s var(--ease-out) both; }
@keyframes ligne { from { transform: translateY(112%); } to { transform: translateY(0); } }
@keyframes entree {
  from { opacity: 0; transform: translateY(16px); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes entree-carte {
  from { opacity: 0; transform: translateY(32px) scale(0.97); filter: blur(8px); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes photo {
  from { opacity: 0; transform: scale(1.14); }
  25% { opacity: 1; }
  to { opacity: 1; transform: scale(1); }
}

/* ---------- Verre ---------- */

.verre {
  background: linear-gradient(180deg, rgb(var(--verre-rgb) / 0.72), rgb(var(--surface-rgb) / 0.8));
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-l);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 40px 80px -28px rgba(0, 0, 0, 0.75);
}

.quick { position: relative; width: 100%; max-width: 440px; margin-left: auto; padding: 26px; }
.quick__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pastille {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 11px;
  border-radius: 7px;
  background: var(--blue);
  color: #02121c;
  font: italic 800 12px var(--font-titre);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transform: skewX(-8deg);
}
.quick__meta { color: var(--subtle); font-size: 12.5px; }
.quick__title { margin: 18px 0; font: 800 26px/1.1 var(--font-titre); letter-spacing: -0.02em; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }
.quick__foot { margin: 14px 0 0; color: var(--subtle); font-size: 13px; text-align: center; }

/* ---------- Pastilles de choix ---------- */

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips--grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.chip { position: relative; display: block; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.chip > span {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  background: rgba(234, 246, 250, 0.03);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.14s var(--ease-out);
}
.chip:active > span { transform: scale(0.97); }
.chip input:checked + span { background: var(--cyan-soft); border-color: var(--cyan); }
.chip input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .chip > span:hover { border-color: rgba(160, 220, 240, 0.32); background: rgba(234, 246, 250, 0.06); }
  .chip input:checked + span:hover { border-color: var(--cyan); background: rgba(114, 232, 239, 0.15); }
}
.chip__ind {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  flex: none;
  border: 1.5px solid rgba(160, 220, 240, 0.35);
  border-radius: 5px;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.chip__ind::after {
  content: "";
  width: 8px;
  height: 4.5px;
  border-left: 2px solid var(--accent-ink);
  border-bottom: 2px solid var(--accent-ink);
  opacity: 0;
  transform: translateY(-1px) rotate(-45deg) scale(0.4);
  transition: transform 0.2s var(--ease-out), opacity 0.12s ease;
}
.chip input:checked + span .chip__ind { background: var(--cyan); border-color: var(--cyan); }
.chip input:checked + span .chip__ind::after { opacity: 1; transform: translateY(-1px) rotate(-45deg) scale(1); }
.chip--tile > span { height: 52px; padding: 0 12px 0 14px; }
.chip--tile .icon { width: 18px; height: 18px; color: var(--muted); transition: color 0.15s ease; }
.chip--tile .chip__ind { margin-left: auto; }
.chip--tile input:checked + span .icon { color: var(--cyan); }
.chip--radio > span { height: 40px; padding: 0 16px; }

/* Ce qui vient d'être reporté depuis la carte express s'allume une fois */
.chip.reporte > span { animation: reporte 1s var(--ease-out) 0.35s; }
@keyframes reporte {
  from { box-shadow: 0 0 0 0 rgba(114, 232, 239, 0.75); }
  to { box-shadow: 0 0 0 12px rgba(114, 232, 239, 0); }
}

/* ---------- Bandes croisées ---------- */

.bandes {
  position: relative;
  z-index: 2;
  height: 150px;
  margin: -30px 0 -10px;
  overflow: hidden;
}
.bande { position: absolute; left: -5%; width: 110%; top: 50%; padding: 15px 0; }
.bande--fond { background: var(--navy); border-block: 1px solid var(--line-strong); transform: translateY(-50%) rotate(2.4deg); }
.bande--avant {
  background: linear-gradient(90deg, var(--cyan), var(--blue));
  transform: translateY(-50%) rotate(-2.4deg);
  box-shadow: 0 24px 40px -18px rgba(39, 190, 243, 0.5);
}
.bande__piste { display: flex; width: max-content; animation: defile 44s linear infinite; }
.bande--fond .bande__piste { animation-duration: 60s; animation-direction: reverse; }
.bande__groupe { display: flex; }
.bande__groupe span {
  display: inline-flex;
  align-items: center;
  gap: 30px;
  padding-right: 30px;
  font: italic 800 19px/1 var(--font-titre);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
}
.bande--avant span { color: var(--accent-ink); }
.bande--fond span { color: rgba(234, 246, 250, 0.72); font-size: 15px; }
.bande__groupe span::after { content: ""; width: 8px; height: 8px; transform: rotate(45deg); background: currentColor; opacity: 0.5; }
@keyframes defile { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */

.section { position: relative; padding: 128px 0; }
.section--last { padding-bottom: 96px; }
.section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 56px;
}
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: var(--cyan);
  font: 700 12px/1 var(--font-titre);
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.kicker::before { content: ""; width: 22px; height: 2px; background: currentColor; }
.section__title {
  margin: 16px 0 0;
  max-width: 18ch;
  font: 800 clamp(2rem, 3.5vw, 3.1rem)/1.06 var(--font-titre);
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.section__lead { margin: 0; max-width: 46ch; color: var(--muted); font-size: 17px; }

/* Apparition au défilement, une seule fois */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(5px);
  transition:
    opacity 0.8s var(--ease-out),
    transform 0.8s var(--ease-out),
    filter 0.8s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 70ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; filter: none; }

/* Photos qui se dévoilent par le bas */
.js .revele { clip-path: inset(0 0 100% 0); }
.js .revele img,
.js .revele .galerie__bouton { transform: scale(1.16); }
.revele.is-in {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.1s var(--ease-in-out) calc(var(--d, 0) * 110ms);
}
.revele.is-in img,
.revele.is-in .galerie__bouton {
  transform: scale(1);
  transition: transform 1.6s var(--ease-out) calc(var(--d, 0) * 110ms);
}

/* ---------- Offre du mois ---------- */

.offre { background: radial-gradient(900px 480px at 18% 40%, rgba(39, 190, 243, 0.12), transparent 70%); }
.offre__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 72px;
  align-items: center;
}
.offre__affiche {
  position: relative;
  margin: 0;
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--line-strong), 0 50px 90px -30px rgba(0, 0, 0, 0.85), 0 0 80px -20px rgba(39, 190, 243, 0.35);
  transform: perspective(1000px) rotate(-2deg);
  will-change: transform;
}
.offre__affiche img { width: 100%; height: auto; }
.offre__affiche::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, 0.22), transparent 55%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.offre__affiche.incline::after { opacity: 1; }

.choix {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin-top: 26px;
}
.choix__item {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
  padding: 18px;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: var(--ink-850);
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.35;
}
.choix__item .icon { width: 42px; height: 42px; padding: 10px; border-radius: 12px; background: var(--cyan); color: var(--accent-ink); }
.choix__item b { display: block; color: var(--text); font: 800 16px/1.2 var(--font-titre); }
.choix__ou {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--blue);
  color: #02121c;
  font: italic 900 14px var(--font-titre);
  text-transform: uppercase;
  box-shadow: 0 0 0 6px rgba(39, 190, 243, 0.14);
}

.compte { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 30px; }
.compte__titre { color: var(--muted); font: 700 12px var(--font-titre); letter-spacing: 0.2em; text-transform: uppercase; }
.compte__blocs { display: flex; gap: 8px; }
.bloc {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 68px;
  padding: 13px 10px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--ink-800), var(--ink-850));
}
.bloc__val {
  position: relative;
  display: block;
  height: 1em;
  overflow: hidden;
  color: #fff;
  font: 800 30px/1 var(--font-titre);
  font-variant-numeric: tabular-nums;
}
.bloc__val > span { display: block; }
.bloc__val > .entrant { position: absolute; inset: 0; }
.bloc__unite { color: var(--subtle); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.offre__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.offre__texte .section__lead { margin-top: 18px; }

/* ---------- Prestations ---------- */

.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 260px;
  padding: 26px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--ink-900), rgb(var(--surface-rgb) / 0.6));
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  transition: border-color 0.25s ease;
}
.card--wide { grid-column: span 2; }
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(114, 232, 239, 0.12), transparent 45%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.card__photo {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: -2;
  width: 62%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%);
  mask-image: linear-gradient(90deg, transparent, #000 70%);
  transition: transform 0.8s var(--ease-out), opacity 0.4s ease;
}
.card--photo .card__text { max-width: 30ch; }
.card__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  border-radius: 13px;
  background: var(--cyan-soft);
  border: 1px solid var(--cyan-line);
  color: var(--cyan);
  transition: transform 0.3s var(--ease-out), background-color 0.3s ease, color 0.3s ease;
}
.card__icon .icon { width: 22px; height: 22px; }
.card__title { margin: 0; font: 800 19px/1.2 var(--font-titre); letter-spacing: -0.015em; }
.card__text { margin: 0; max-width: 42ch; color: var(--muted); font-size: 15px; line-height: 1.55; }
.card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-top: auto;
  padding: 14px 0 0;
  background: none;
  border: 0;
  color: var(--text);
  font: 700 14px var(--font-titre);
  cursor: pointer;
}
.card__link .icon { width: 16px; height: 16px; color: var(--cyan); transition: transform 0.2s var(--ease-out); }
.card__fantome {
  position: absolute;
  right: -30px;
  bottom: -40px;
  z-index: -1;
  width: 220px;
  height: 220px;
  fill: none;
  stroke: rgba(114, 232, 239, 0.06);
  stroke-width: 0.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.7s var(--ease-out), stroke 0.4s ease;
}
@media (hover: hover) and (pointer: fine) {
  .card:hover { border-color: var(--cyan-line); }
  .card:hover::before { opacity: 1; }
  .card:hover .card__icon { transform: translateY(-3px); background: var(--cyan); color: var(--accent-ink); }
  .card:hover .card__link .icon { transform: translateX(3px); }
  .card:hover .card__photo { transform: scale(1.05); opacity: 0.65; }
  .card:hover .card__fantome { transform: rotate(-8deg) scale(1.05); stroke: rgba(114, 232, 239, 0.14); }
}

.aussi { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 22px; }
.aussi__titre { margin-right: 6px; color: var(--muted); font: 700 13px var(--font-titre); letter-spacing: 0.06em; text-transform: uppercase; }
.aussi span:not(.aussi__titre) {
  padding: 7px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--text);
  font-size: 14px;
}

/* ---------- Tarifs (section claire, comme l'affiche de l'atelier) ---------- */

.tarifs { background: var(--ice); color: #0b2742; }
.tarifs .kicker { color: var(--petrol-2); }
.tarifs .section__title { color: #062033; }
.tarifs .section__lead { color: #3d5a6c; }
.tarifs__cote { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; max-width: 46ch; }

.bascule {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  border-radius: 12px;
  background: #dbeaf2;
}
.bascule button {
  position: relative;
  z-index: 1;
  min-width: 76px;
  height: 40px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: #3d5a6c;
  font: 800 14px var(--font-titre);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 0.2s ease;
}
.bascule button[aria-checked="true"] { color: #fff; }
.bascule button:focus-visible { outline-color: var(--petrol-2); }
.bascule__curseur {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: 9px;
  background: var(--navy);
  box-shadow: 0 8px 18px -8px rgba(11, 39, 66, 0.7);
  transition: transform 0.25s var(--ease-in-out);
}
.bascule[data-tva="ht"] .bascule__curseur { transform: translateX(100%); }

.taux { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.taux li {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 22px 28px 22px 32px;
  border: 1px solid #d5e7f0;
  border-radius: 18px;
  background: #fff;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s ease;
}
.taux li::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: linear-gradient(180deg, var(--blue), var(--petrol-2));
}
.taux__num {
  justify-self: start;
  padding: 6px 10px;
  border-radius: 7px;
  background: var(--navy);
  color: #fff;
  font: italic 800 13px/1 var(--font-titre);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: skewX(-8deg);
}
.taux h3 { margin: 0; color: #062033; font: 800 19px/1.25 var(--font-titre); }
.taux p { margin: 4px 0 0; color: #557385; font-size: 14.5px; }
.taux__prix { text-align: right; }
.prix {
  display: inline-block;
  color: #062033;
  font: 800 34px/1 var(--font-titre);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  transition: filter 0.2s ease, opacity 0.2s ease;
}
.prix.flou,
.taux__unite.flou { filter: blur(3px); opacity: 0.25; }
.taux__unite {
  display: block;
  margin-top: 6px;
  color: #557385;
  font-size: 12.5px;
  font-weight: 600;
  transition: filter 0.2s ease, opacity 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .taux li:hover { transform: translateY(-2px); box-shadow: 0 22px 40px -24px rgba(11, 39, 66, 0.4); }
}

/* ---------- L'atelier ---------- */

.galerie {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 210px;
  gap: 14px;
}
.galerie__item {
  position: relative;
  grid-column: span 4;
  margin: 0;
  overflow: hidden;
  border-radius: 20px;
  background: var(--ink-850);
}
.galerie__item--haut { grid-row: span 3; }
.galerie__item--large { grid-column: span 8; grid-row: span 2; }
.galerie__bouton {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.galerie__bouton img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-out);
}
.galerie__item--haut img { object-position: 50% 40%; }
.galerie__item figcaption {
  position: absolute;
  left: 14px;
  bottom: 14px;
  max-width: calc(100% - 28px);
  padding: 8px 12px;
  border-radius: 10px;
  background: rgb(var(--fond-rgb) / 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: 13.5px;
  font-weight: 600;
  pointer-events: none;
}
.galerie__agrandir {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgb(var(--fond-rgb) / 0.65);
  color: #fff;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.2s ease, transform 0.2s var(--ease-out);
}
.galerie__agrandir .icon { width: 18px; height: 18px; }
.galerie__bouton:focus-visible .galerie__agrandir { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .galerie__bouton:hover img { transform: scale(1.05); }
  .galerie__bouton:hover .galerie__agrandir { opacity: 1; transform: none; }
}

/* Visionneuse : s'ouvre au centre, se ferme plus vite qu'elle ne s'ouvre */
.visionneuse {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  overflow: hidden;
}
.visionneuse[open] { display: grid; place-items: center; }
.visionneuse::backdrop { background: rgba(2, 10, 16, 0.9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.visionneuse[open] .visionneuse__cadre { animation: zoom-entree 0.3s var(--ease-out); }
.visionneuse[open]::backdrop { animation: fondu 0.3s ease; }
.visionneuse.fermeture .visionneuse__cadre { animation: zoom-sortie 0.16s ease-out forwards; }
.visionneuse.fermeture::backdrop { animation: fondu 0.16s ease-out reverse forwards; }
@keyframes zoom-entree { from { opacity: 0; transform: scale(0.96); } }
@keyframes zoom-sortie { to { opacity: 0; transform: scale(0.98); } }
@keyframes fondu { from { opacity: 0; } }
.visionneuse__cadre { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 0; max-width: min(92vw, 1400px); }
.visionneuse__cadre img { max-width: 100%; max-height: 80dvh; border-radius: 16px; object-fit: contain; }
.visionneuse__cadre figcaption { color: var(--muted); font-size: 14px; }
.visionneuse__btn {
  position: fixed;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: rgb(var(--verre-rgb) / 0.7);
  color: #fff;
  cursor: pointer;
  transition: transform 0.16s var(--ease-out), background-color 0.2s ease;
}
.visionneuse__btn:active { transform: scale(0.94); }
.visionneuse__btn:hover { background: rgb(var(--verre-rgb) / 0.95); }
.visionneuse__fermer { top: 20px; right: 20px; }
.visionneuse__prec { left: 20px; top: 50%; margin-top: -24px; }
.visionneuse__suiv { right: 20px; top: 50%; margin-top: -24px; }

/* ---------- Avis des clients ---------- */

.temoignages__mention { font-size: 15px; }
.temoignages__mention a { color: var(--cyan); text-underline-offset: 3px; }

/* Ruban d'avis : mouvement constant donc linéaire, arrêté dès qu'on veut lire */
.defile {
  overflow: hidden;
  margin-bottom: 64px;
  padding: 6px 0 14px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.defile__piste { display: flex; width: max-content; animation: defile 90s linear infinite; }
.defile:focus-within .defile__piste,
.defile.hors-champ .defile__piste { animation-play-state: paused; }
@media (hover: hover) and (pointer: fine) {
  .defile:hover .defile__piste { animation-play-state: paused; }
}
.defile__groupe { display: flex; gap: 16px; margin: 0; padding: 0 16px 0 0; list-style: none; }
.defile__groupe > li { display: flex; }

.temoin {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 360px;
  margin: 0;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(180deg, var(--ink-850), var(--ink-900));
  transition: border-color 0.25s ease, transform 0.3s var(--ease-out);
}
.temoin::before {
  content: "«";
  position: absolute;
  top: -26px;
  right: 16px;
  color: rgba(114, 232, 239, 0.08);
  font: 900 130px/1 var(--font-titre);
  pointer-events: none;
}
.temoin__etoiles { display: flex; gap: 3px; }
.temoin__etoiles svg { width: 16px; height: 16px; fill: var(--gold); }
.temoin blockquote { flex: 1; margin: 0; }
.temoin blockquote p { margin: 0; color: #d3e3ea; font-size: 15.5px; line-height: 1.6; }
.temoin mark { background: none; color: var(--cyan); font-weight: 600; }
.temoin figcaption { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.temoin__avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan), var(--blue));
  color: var(--accent-ink);
  font: 800 14px/1 var(--font-titre);
}
.temoin figcaption b { display: block; font-size: 14.5px; font-weight: 600; }
.temoin figcaption small { display: block; color: var(--subtle); font-size: 12.5px; }
@media (hover: hover) and (pointer: fine) {
  .temoin:hover { border-color: var(--cyan-line); transform: translateY(-3px); }
}

/* Sur écran tactile, ou si l'on préfère moins de mouvement : on fait glisser soi-même */
@media (max-width: 760px), (hover: none), (prefers-reduced-motion: reduce) {
  .defile {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 24px;
    padding-inline: 24px;
    scrollbar-width: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .defile::-webkit-scrollbar { display: none; }
  .defile__piste { animation: none; }
  .defile__groupe[aria-hidden="true"] { display: none; }
  .defile__groupe { padding-right: 24px; }
  .temoin { width: min(84vw, 360px); scroll-snap-align: start; }
}
@media (max-width: 640px) {
  .defile { padding-inline: 16px; scroll-padding-inline: 16px; margin-bottom: 40px; }
}

/* ---------- Avis et engagements ---------- */

.confiance__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 16px;
  align-items: stretch;
}
.note {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 36px;
}
.note::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  left: -140px;
  top: -180px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(114, 232, 239, 0.18), transparent);
  pointer-events: none;
}
.note__chiffre {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 10px;
  font: 800 92px/0.9 var(--font-titre);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.note__chiffre small { color: var(--muted); font-size: 28px; font-weight: 700; letter-spacing: 0; }
.etoiles { position: relative; }
.etoiles__fond,
.etoiles__plein { display: flex; gap: 4px; }
.etoiles svg { width: 28px; height: 28px; }
.etoiles__fond svg { fill: rgba(234, 246, 250, 0.1); }
.etoiles__plein { position: absolute; inset: 0; }
.etoiles__plein svg { fill: var(--gold); filter: drop-shadow(0 0 8px rgba(255, 201, 64, 0.35)); }
.js .etoiles__plein { clip-path: inset(0 100% 0 0); }
.note.is-in .etoiles__plein { clip-path: inset(0 0 0 0); transition: clip-path 1.3s var(--ease-out) 0.3s; }
.note__nombre { margin: 0; font-weight: 600; }
.note__mots { margin: 0 0 8px; max-width: 34ch; color: var(--muted); font-size: 15px; }
.note__mots b { color: var(--cyan); font-weight: 700; }

.engagements { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.engagement {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--ink-900);
  transition: border-color 0.25s ease;
}
.engagement__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  border: 1px solid var(--cyan-line);
  border-radius: 13px;
  background: var(--cyan-soft);
  color: var(--cyan);
}
.engagement__icon .icon { width: 22px; height: 22px; }
.engagement h3 { margin: 0 0 8px; font: 800 18px/1.25 var(--font-titre); }
.engagement p { margin: 0; color: var(--muted); font-size: 15px; }
.engagement a { color: var(--cyan); text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .engagement:hover { border-color: var(--cyan-line); }
}

/* ---------- Méthode ---------- */

.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.steps li { position: relative; padding: 28px 8px 0 0; border-top: 1px solid var(--line-strong); }
.steps li::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s var(--ease-out) calc(var(--i) * 140ms + 150ms);
}
.steps.is-in li::before,
html:not(.js) .steps li::before { transform: scaleX(1); }
.steps__num { color: var(--cyan); font: italic 800 14px var(--font-titre); }
.steps h3 { margin: 14px 0 10px; font: 800 21px/1.2 var(--font-titre); letter-spacing: -0.015em; }
.steps p { margin: 0; color: var(--muted); font-size: 15px; }

/* ---------- Devis ---------- */

.devis { background: linear-gradient(180deg, transparent, var(--ink-900) 16%, var(--ink-900) 84%, transparent); }
.devis__inner { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.devis__aside { position: sticky; top: calc(var(--header-h) + 40px); }
.devis__aside .section__lead { margin-top: 22px; }
.aside-list { display: grid; gap: 14px; margin: 32px 0 0; padding: 0; list-style: none; font-size: 15px; }
.aside-list li { display: flex; align-items: center; gap: 12px; }
.aside-list .icon {
  width: 36px;
  height: 36px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--ink-850);
  color: var(--cyan);
}
.aside-call { margin: 32px 0 0; color: var(--muted); font-size: 15px; }
.aside-call a { color: var(--text); font-weight: 700; text-underline-offset: 3px; font-variant-numeric: tabular-nums; }

.form { min-width: 0; padding: 32px; scroll-margin-top: calc(var(--header-h) + 16px); }

/* Devis ou rendez-vous : le curseur glisse d'un choix à l'autre */
.mode {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 24px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgb(var(--fond-rgb) / 0.55);
}
.mode button {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--muted);
  font: 700 14.5px var(--font-titre);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s ease;
}
.mode button .icon { width: 17px; height: 17px; }
@media (max-width: 400px) {
  .mode button { gap: 6px; font-size: 13px; }
  .mode button .icon { width: 15px; height: 15px; }
}
.mode button[aria-checked="true"] { color: var(--accent-ink); }
.mode__curseur {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: 10px;
  background: linear-gradient(180deg, #92f1f6, var(--cyan));
  box-shadow: 0 8px 20px -10px rgba(114, 232, 239, 0.7);
  transition: transform 0.28s var(--ease-in-out);
}
.form[data-mode="rdv"] .mode__curseur { transform: translateX(100%); }
[data-mode-texte] { transition: filter 0.18s ease, opacity 0.18s ease; }
[data-mode-texte].change { filter: blur(3px); opacity: 0.2; }

/* Créneau : jours en tuiles de calendrier, heures en pastilles */
.jours {
  min-width: 0;
  display: flex;
  gap: 8px;
  margin: 0 -2px;
  padding: 2px 2px 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.jour,
.heure { position: relative; flex: none; }
.jour { scroll-snap-align: start; }
.jour input,
.heure input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.jour span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 64px;
  height: 78px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: rgba(234, 246, 250, 0.03);
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.14s var(--ease-out);
}
.jour small { color: var(--subtle); font-size: 11.5px; font-weight: 600; transition: color 0.15s ease; }
.jour b { font: 800 22px/1 var(--font-titre); font-variant-numeric: tabular-nums; }
.heures { display: grid; gap: 14px; }
.heures__groupe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.heures__titre { width: 100%; color: var(--subtle); font: 700 11px var(--font-titre); letter-spacing: 0.14em; text-transform: uppercase; }
.heure span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 74px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: rgba(234, 246, 250, 0.03);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.14s var(--ease-out);
}
.jour input:checked + span,
.heure input:checked + span { background: var(--cyan); border-color: var(--cyan); color: var(--accent-ink); }
.jour input:checked + span small { color: rgba(3, 32, 41, 0.72); }
.jour input:focus-visible + span,
.heure input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 2px; }
.jour:active span,
.heure:active span { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) {
  .jour span:hover,
  .heure span:hover { border-color: rgba(160, 220, 240, 0.34); background: rgba(234, 246, 250, 0.07); }
  .jour input:checked + span:hover,
  .heure input:checked + span:hover { background: var(--cyan-hover); border-color: var(--cyan-hover); }
}
/* Les heures d'un nouveau jour arrivent en cascade, sans bloquer le clic */
.heures.cascade .heure { animation: heure 0.28s var(--ease-out) both; animation-delay: calc(var(--i) * 22ms); }
@keyframes heure { from { opacity: 0; transform: translateY(6px); } }
.creneau__note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 22px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--cyan-line);
  border-radius: 12px;
  background: var(--cyan-soft);
  color: #cfe6ec;
  font-size: 13.5px;
  line-height: 1.5;
}
.creneau__note .icon { width: 17px; height: 17px; margin-top: 1px; color: var(--cyan); stroke-width: 2.4; }
.creneau + .grid-2 { margin-top: 8px; }

/* Fiche véhicule trouvée par la plaque : elle se déplie sous le champ */
.vehicule {
  display: grid;
  grid-template-rows: 0fr;
  max-width: 520px;
  transition: grid-template-rows 0.4s var(--ease-out);
}
.vehicule.ouvert { grid-template-rows: 1fr; }
.vehicule__inner { min-height: 0; overflow: hidden; }
.vehicule__carte {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: linear-gradient(180deg, rgb(var(--verre-rgb) / 0.6), rgb(var(--surface-rgb) / 0.6));
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.3s ease, transform 0.4s var(--ease-out), border-color 0.3s ease;
}
.vehicule.ouvert .vehicule__carte { opacity: 1; transform: none; }
.vehicule__carte[data-etat="trouve"] { border-color: var(--cyan-line); }
.vehicule__carte[data-etat="inconnu"] { border-style: dashed; }
.vehicule__photo {
  position: relative;
  display: grid;
  place-items: center;
  width: 104px;
  height: 68px;
  flex: none;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
}
.vehicule__photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink-850) center / 30px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2372e8ef' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6 0-1.1.4-1.4.9l-1.4 2.9A3.7 3.7 0 0 0 2 12v4c0 .6.4 1 1 1h2'/%3E%3Ccircle cx='7' cy='17' r='2'/%3E%3Cpath d='M9 17h6'/%3E%3Ccircle cx='17' cy='17' r='2'/%3E%3C/svg%3E");
  transition: opacity 0.3s ease;
}
.vehicule__photo img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.4s ease, transform 0.5s var(--ease-out);
}
.vehicule__photo img.charge { opacity: 1; transform: none; }
.vehicule__photo:has(img.charge)::before { opacity: 0; }
.vehicule__infos { min-width: 0; }
.vehicule__titre { margin: 0; font: 800 16px/1.25 var(--font-titre); }
.vehicule__details { margin: 4px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.vehicule__carte[data-etat="chargement"] .vehicule__titre { color: var(--muted); font-weight: 700; }
.vehicule__carte[data-etat="chargement"] .vehicule__details::before,
.vehicule__carte[data-etat="chargement"] .vehicule__photo::after {
  content: "";
  display: block;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(234, 246, 250, 0.05) 25%, rgba(234, 246, 250, 0.16) 40%, rgba(234, 246, 250, 0.05) 60%);
  background-size: 300% 100%;
  animation: lueur 1.2s linear infinite;
}
.vehicule__carte[data-etat="chargement"] .vehicule__details:empty::before { width: 180px; height: 10px; margin-top: 8px; }
.vehicule__carte[data-etat="chargement"] .vehicule__details:not(:empty)::before { display: none; }
.vehicule__carte[data-etat="chargement"] .vehicule__photo::after { position: absolute; inset: 0; border-radius: 0; }
@keyframes lueur { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* Pendant la recherche, une ligne lumineuse balaie la plaque comme un lecteur */
.plate { position: relative; }
.plate.recherche::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 35%;
  background: linear-gradient(90deg, transparent, rgba(39, 190, 243, 0.45), transparent);
  pointer-events: none;
  animation: lecture 0.9s var(--ease-in-out) infinite alternate;
}
@keyframes lecture { from { transform: translateX(-60%); } to { transform: translateX(260%); } }

/* Un champ rempli par la plaque s'allume une fois */
.input.auto-rempli { animation: rempli 1.1s var(--ease-out); }
@keyframes rempli {
  from { border-color: var(--cyan); box-shadow: 0 0 0 5px rgba(114, 232, 239, 0.35); }
}
.stepper { display: flex; gap: 12px; margin: 0 0 18px; padding: 0; list-style: none; }
.stepper li { display: flex; align-items: center; gap: 8px; flex: 1; color: var(--subtle); font-size: 13px; font-weight: 500; transition: color 0.2s ease; }
.stepper__dot {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  font: 700 12px var(--font-titre);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.stepper .is-current { color: var(--text); }
.stepper .is-current .stepper__dot { background: var(--cyan); border-color: var(--cyan); color: var(--accent-ink); }
.stepper .is-done { color: var(--muted); }
.stepper .is-done .stepper__dot { background: var(--cyan-soft); border-color: var(--cyan-line); color: var(--cyan); }
.progress { height: 3px; margin-bottom: 30px; overflow: hidden; border-radius: 3px; background: var(--line); }
.progress__bar {
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
  transform: scaleX(0.167);
  transform-origin: left;
  transition: transform 0.45s var(--ease-in-out);
}

.step { min-width: 0; margin: 0; padding: 0; border: 0; }
.step:not([hidden]) { animation: step-avant 0.32s var(--ease-out); }
.form[data-sens="arriere"] .step:not([hidden]) { animation-name: step-arriere; }
@keyframes step-avant { from { opacity: 0; transform: translateX(24px); } }
@keyframes step-arriere { from { opacity: 0; transform: translateX(-24px); } }
.step__title { margin: 0 0 20px; font: 800 22px/1.2 var(--font-titre); letter-spacing: -0.015em; outline: none; }

.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin-top: 22px; }
.field label,
.label { font-size: 14px; font-weight: 600; }
.opt { color: var(--subtle); font-weight: 400; }
.hint { margin: 0; color: var(--subtle); font-size: 13px; }
.field__error { margin: 6px 0 0; color: var(--danger); font-size: 13px; }
.field .field__error { margin: 0; }
.field__error:empty { display: none; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }

.input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: rgba(234, 246, 250, 0.04);
  color: var(--text);
  font: 400 16px var(--font);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.input::placeholder { color: #6a8494; }
.input:hover { border-color: rgba(160, 220, 240, 0.3); }
.input:focus {
  outline: none;
  border-color: var(--cyan);
  background: rgba(234, 246, 250, 0.06);
  box-shadow: 0 0 0 4px rgba(114, 232, 239, 0.18);
}
.input[aria-invalid="true"] { border-color: var(--danger); }
textarea.input { height: auto; min-height: 112px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.input-suffix { position: relative; }
.input-suffix .input { padding-right: 46px; font-variant-numeric: tabular-nums; }
.input-suffix span { position: absolute; right: 14px; top: 50%; translate: 0 -50%; color: var(--subtle); font-size: 14px; pointer-events: none; }

.plate {
  display: flex;
  align-items: stretch;
  height: 58px;
  max-width: 330px;
  overflow: hidden;
  border: 2px solid #111;
  border-radius: 9px;
  background: #f6f6f3;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
  transition: box-shadow 0.15s ease;
}
.plate:focus-within { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25), 0 0 0 5px rgba(114, 232, 239, 0.45); }
.plate__band {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 34px;
  flex: none;
  padding: 6px 0 5px;
  background: #0b3ea8;
  color: #fff;
  font: 700 14px/1 var(--font);
}
.plate__band--end { padding: 0; }
.plate__stars { width: 18px; height: 18px; }
.plate input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #111;
  text-align: center;
  text-transform: uppercase;
  font: 700 26px/1 var(--font);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}
.plate input:focus { outline: none; }
.plate input::placeholder { color: #bdbdb8; }

.check { display: flex; align-items: flex-start; gap: 12px; margin-top: 26px; color: var(--muted); font-size: 14px; line-height: 1.5; cursor: pointer; }
.check input {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: none;
  margin: 1px 0 0;
  border: 1.5px solid rgba(160, 220, 240, 0.4);
  border-radius: 6px;
  background: rgba(234, 246, 250, 0.03);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.check input::after {
  content: "";
  width: 10px;
  height: 5.5px;
  border-left: 2px solid var(--accent-ink);
  border-bottom: 2px solid var(--accent-ink);
  opacity: 0;
  transform: translateY(-1px) rotate(-45deg) scale(0.4);
  transition: transform 0.2s var(--ease-out), opacity 0.12s ease;
}
.check input:checked { background: var(--cyan); border-color: var(--cyan); }
.check input:checked::after { opacity: 1; transform: translateY(-1px) rotate(-45deg) scale(1); }
.check input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.check input[aria-invalid="true"] { border-color: var(--danger); }

.form__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.form__nav #next { margin-left: auto; }
.form__nav:has(#next[hidden]) { display: none; }

.done__icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 8px rgba(114, 232, 239, 0.12);
}
.done__icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--accent-ink);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
}
.done:not([hidden]) .done__icon { animation: pop 0.45s var(--ease-out); }
.done:not([hidden]) .done__icon svg { animation: trace 0.5s var(--ease-out) 0.18s forwards; }
@keyframes pop { from { transform: scale(0.85); opacity: 0; } }
@keyframes trace { to { stroke-dashoffset: 0; } }
.done__text { margin: -8px 0 0; color: var(--muted); font-size: 15px; }
.recap {
  max-height: 280px;
  margin: 20px 0 0;
  padding: 16px 18px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.3);
  color: #cfe0e8;
  font: 400 13px/1.65 ui-monospace, "SF Mono", Menlo, monospace;
  white-space: pre-wrap;
  word-break: break-word;
}
.send { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.send__missing { margin: 14px 0 0; color: var(--warn); font-size: 14px; }
.send__status { margin: 14px 0 0; font-size: 14px; }
.send__status:empty { display: none; }
.done .link { margin-top: 16px; }

/* ---------- Questions ---------- */

.faq-wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  list-style: none;
  font: 700 17px/1.35 var(--font-titre);
  cursor: pointer;
  transition: color 0.2s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: #fff; }
.plus {
  position: relative;
  width: 32px;
  height: 32px;
  flex: none;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--text);
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.plus::before,
.plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 1.5px;
  background: currentColor;
  translate: -50% -50%;
}
.plus::after { rotate: 90deg; transition: rotate 0.3s var(--ease-out); }
details[open] .plus { background: var(--cyan); border-color: var(--cyan); color: var(--accent-ink); }
details[open] .plus::after { rotate: 0deg; }
.faq p { margin: 0; padding: 0 56px 24px 0; color: var(--muted); font-size: 15px; }
.faq a { color: var(--cyan); text-underline-offset: 3px; }
@supports selector(::details-content) {
  .faq details::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 0.3s var(--ease-out), content-visibility 0.3s allow-discrete;
  }
  .faq details[open]::details-content { block-size: auto; }
}

/* ---------- Contact ---------- */

.contact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.contact > * { min-width: 0; }
.panel { padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--ink-900); }
.coords { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
.coords li { display: flex; align-items: flex-start; gap: 14px; }
.coords li > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.coords__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--ink-850);
  color: var(--cyan);
}
.coords__icon .icon { width: 18px; height: 18px; }
.coords__label { color: var(--subtle); font: 700 11px/1.4 var(--font-titre); letter-spacing: 0.12em; text-transform: uppercase; }
.coords__value { font-size: 16px; font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
a.coords__value:hover { color: var(--cyan); }
.coords__link { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; color: var(--cyan); font-size: 14px; font-weight: 600; text-decoration: none; }
.coords__link .icon { width: 14px; height: 14px; transition: transform 0.2s var(--ease-out); }
.coords__link:hover .icon { transform: translateX(3px); }

.panel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; margin-bottom: 14px; }
.panel__head > span:first-child { display: inline-flex; align-items: center; gap: 10px; font: 800 17px var(--font-titre); }
.panel__head .icon { color: var(--cyan); }
.hours { display: grid; margin: 0; }
.hours__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 12px;
  margin: 0 -12px;
  border-radius: 10px;
  font-size: 14.5px;
  transition: background-color 0.3s ease;
}
.hours__row + .hours__row { box-shadow: 0 -1px 0 var(--line); }
.hours__row.aujourdhui,
.hours__row.aujourdhui + .hours__row { box-shadow: none; }
.hours__row.aujourdhui { background: var(--cyan-soft); }
.hours__row.aujourdhui dt { color: var(--text); font-weight: 700; }
.hours dt { color: var(--muted); white-space: nowrap; }
.hours dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.hours dd span { display: block; white-space: nowrap; }
.hours__note { margin: 14px 0 0; color: var(--subtle); font-size: 13.5px; }

.cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 32px;
  border-radius: var(--radius-l);
  background: var(--petrol);
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(500px 300px at 100% 0%, rgba(114, 232, 239, 0.22), transparent 70%);
}
.cta__logo { width: 170px; height: auto; margin-bottom: 6px; }
.cta__title { margin: 0; font: 800 26px/1.1 var(--font-titre); letter-spacing: -0.02em; }
.cta__text { margin: 0 0 auto; max-width: 34ch; color: #cfe6ec; font-size: 15px; }
.cta .btn { margin-top: 12px; }

/* ---------- Pied de page ---------- */

.footer { overflow: hidden; border-top: 1px solid var(--line); padding-top: 40px; }
.footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
.footer__nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer__nav a { color: var(--muted); font-size: 14px; text-decoration: none; }
.footer__nav a:hover { color: var(--text); }
.footer__legal { width: 100%; margin: 0; color: var(--subtle); font-size: 13px; }
.footer__geant {
  margin: 24px 0 -1.6vw;
  font: 900 8.6vw/0.82 var(--font-titre);
  letter-spacing: -0.04em;
  text-align: center;
  white-space: nowrap;
  color: transparent;
  background: linear-gradient(180deg, rgba(114, 232, 239, 0.14), rgba(114, 232, 239, 0) 85%);
  -webkit-background-clip: text;
  background-clip: text;
  user-select: none;
}

.mobilebar { display: none; }

/* ---------- Page des mentions légales ---------- */

.legale__retour { margin-left: auto; }
.legale { max-width: 760px; padding-top: 72px; padding-bottom: 96px; }
.legale .section__title { max-width: none; }
.legale__maj { margin: 14px 0 0; color: var(--subtle); font-size: 14px; }
.legale section { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line); }
.legale h2 { margin: 0 0 14px; font: 800 22px/1.25 var(--font-titre); letter-spacing: -0.015em; }
.legale h3 { margin: 26px 0 8px; color: var(--cyan); font: 700 16.5px/1.3 var(--font-titre); }
.legale p { margin: 0 0 12px; color: #c9dae2; font-size: 15.5px; line-height: 1.7; }
.legale b { color: var(--text); }
.legale a { color: var(--cyan); text-underline-offset: 3px; }
.page-legale .footer { padding-bottom: 32px; }
.check a { color: var(--cyan); text-underline-offset: 3px; }

/* ---------- Écrans moyens ---------- */

@media (max-width: 1180px) {
  .header__actions .statut { display: none; }
}

@media (max-width: 1080px) {
  .nav { display: none; }
  .header__actions { margin-left: auto; }
  .hero { min-height: 0; }
  .hero__inner { grid-template-columns: 1fr; gap: 48px; }
  .quick { max-width: 560px; margin: 0; }
  .hero__defiler { display: none; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
  /* minmax(0, …) : une rangée qui défile (les jours) ne doit pas élargir la colonne */
  .offre__inner,
  .devis__inner,
  .faq-wrap,
  .confiance__inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .offre__affiche { max-width: 520px; }
  .devis__aside { position: static; }
  .contact { grid-template-columns: 1fr 1fr; }
  .cta { grid-column: span 2; }
  .section__head { flex-direction: column; align-items: flex-start; gap: 20px; }
}

/* ---------- Téléphone ---------- */

@media (max-width: 640px) {
  :root { --header-h: 64px; }
  .container { padding-inline: 16px; }
  body { padding-bottom: 84px; }

  .header__actions { display: none; }
  .marque__voiture { width: 58px; }
  .marque__nom b { font-size: 15px; }
  .ruban { font-size: 12.5px; gap: 8px; padding: 8px 12px; }
  .ruban__texte { display: none; }
  .ruban__reste { flex: 0 1 auto; }
  .ruban__reste::before { content: "Distribution = 1 cadeau au choix · "; color: #fff; font-weight: 500; }

  .hero { padding: calc(var(--header-h) + 36px) 0 64px; }
  .hero__voile::after {
    background:
      linear-gradient(180deg, rgb(var(--fond-rgb) / 0.7) 0%, rgb(var(--fond-rgb) / 0.88) 45%, var(--ink-950) 100%);
  }
  .hero__titre { font-size: clamp(2.3rem, 11.5vw, 3.2rem); }
  .hero__lead { font-size: 16px; margin-top: 20px; }
  .hero__ctas { margin-top: 28px; }
  .hero__ctas .btn { flex: 1 1 100%; }
  .hero__preuves { flex-direction: column; margin-top: 28px; }
  .hero__lueur { display: none; }
  .quick { padding: 20px; }
  .quick__title { font-size: 22px; }
  .tiles { display: flex; flex-wrap: wrap; }
  .chip--tile > span { height: 44px; gap: 8px; padding: 0 12px; }
  .chip--tile .chip__ind { margin-left: 2px; }

  .bandes { height: 120px; }
  .bande__groupe span { font-size: 16px; gap: 22px; padding-right: 22px; }
  .bande--fond span { font-size: 13px; }

  .section { padding: 88px 0; }
  .section__head { margin-bottom: 36px; }
  .choix { grid-template-columns: 1fr; justify-items: center; }
  .choix__item { width: 100%; }
  .compte { flex-direction: column; align-items: flex-start; gap: 12px; }
  .bloc { min-width: 0; flex: 1; }
  .compte__blocs { width: 100%; }
  .offre__ctas .btn { flex: 1 1 100%; }

  .bento { grid-template-columns: 1fr; }
  .card--wide { grid-column: auto; }
  .card { min-height: 0; }
  .card__photo { width: 100%; opacity: 0.22; }

  .taux li { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; padding: 20px 18px 20px 24px; }
  .taux__num { grid-column: 1 / -1; }
  .prix { font-size: 26px; }

  .galerie { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; gap: 10px; }
  .galerie__item { grid-column: span 1; border-radius: 16px; }
  .galerie__item--haut { grid-column: span 1; grid-row: span 3; }
  .galerie__item--large { grid-column: span 1; grid-row: span 2; }
  .galerie__item:last-child { grid-column: span 2; grid-row: span 2; }
  .galerie__item figcaption { left: 8px; bottom: 8px; max-width: calc(100% - 16px); padding: 6px 9px; font-size: 12px; }

  .engagements { grid-template-columns: 1fr; }
  .note { padding: 28px 24px; }
  .note__chiffre { font-size: 76px; }
  .steps { grid-template-columns: 1fr; gap: 32px; }

  .form { padding: 22px 18px; }
  .stepper li { font-size: 0; gap: 0; flex: 0 0 auto; }
  .stepper { gap: 8px; }
  .stepper .is-current { font-size: 13px; gap: 8px; flex: 1; }
  .chips--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2 { grid-template-columns: 1fr; }
  .send .btn { flex: 1 1 100%; }
  .faq p { padding-right: 0; }

  .contact { grid-template-columns: 1fr; }
  .cta { grid-column: auto; }

  .visionneuse__prec,
  .visionneuse__suiv { top: auto; bottom: 24px; margin-top: 0; }
  .visionneuse__prec { left: calc(50% - 60px); }
  .visionneuse__suiv { right: calc(50% - 60px); }

  .mobilebar {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 60;
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--line-strong);
    border-radius: 18px;
    background: rgb(var(--surface-rgb) / 0.88);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.7);
    transition: transform 0.35s var(--ease-drawer), opacity 0.25s ease;
  }
  .mobilebar.is-hidden { transform: translateY(calc(100% + 24px)); opacity: 0; pointer-events: none; }
}

/* ---------- Mouvement réduit : moins de mouvement, pas zéro ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__trainees,
  .hero__lueur,
  .hero__defiler { display: none; }
  .ruban::after,
  .statut__point::after { animation: none !important; display: none; }
  .bande__piste { animation: none; }
  .js .ligne > span,
  .pret .ligne > span { transform: none; animation: none; }
  .js .entree,
  .js .hero__media img { opacity: 1; }
  .pret .entree,
  .pret .hero__media img { animation: fondu 0.4s ease both; }
  .js [data-reveal] { transform: none; filter: none; transition: opacity 0.4s ease; }
  .js .revele,
  .revele.is-in { clip-path: none; transition: none; }
  .js .revele img,
  .js .revele .galerie__bouton { transform: none; transition: none; }
  .step:not([hidden]) { animation: fondu 0.2s ease; }
  .form[data-sens="arriere"] .step:not([hidden]) { animation-name: fondu; }
  .bascule__curseur,
  .progress__bar,
  .steps li::before { transition-duration: 0.01ms; }
  .visionneuse[open] .visionneuse__cadre { animation: fondu 0.2s ease; }
  .card__photo,
  .galerie__bouton img { transition: none; }
  .heures.cascade .heure,
  .input.auto-rempli { animation: none; }
  .plate.recherche::after { animation: none; transform: none; width: 100%; opacity: 0.35; }
  .vehicule__carte[data-etat="chargement"] .vehicule__details::before,
  .vehicule__carte[data-etat="chargement"] .vehicule__photo::after { animation: none; }
  .mode__curseur,
  .vehicule { transition-duration: 0.01ms; }
}