/* ============================================================
   Auto Plus 01 — page d'accueil (univers « atelier »)
   Ce que le rideau de l'intro découvre : l'atelier éclairé au néon,
   la voiture à la une posée sur la ligne rouge du logo, puis le bon
   de reprise, le stock, le tableau des prestations et le contact.
   ============================================================ */

/* ---------- Hero : l'atelier ---------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column;
  min-height: calc(100svh - var(--header-h) - 1px);
  background:
    radial-gradient(50% 56% at 71% 42%, rgba(30, 63, 122, 0.6), rgba(30, 63, 122, 0.16) 58%, rgba(30, 63, 122, 0) 80%),
    var(--navy);
}

/* Néon au plafond, au-dessus de la voiture, et son cône de lumière */
.hero__lamp {
  position: absolute; z-index: -1; top: 0; bottom: 22%;
  left: 50%; width: min(640px, 46vw);
  pointer-events: none;
}
.hero__lamp::before {
  content: ""; position: absolute; top: 20px; left: 14%; right: 14%; height: 3px; border-radius: 2px;
  background: rgb(var(--light));
  box-shadow: 0 0 12px 2px rgba(var(--light), 0.5), 0 0 44px 12px rgba(var(--light), 0.14);
}
.hero__lamp::after {
  content: ""; position: absolute; top: 22px; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, rgba(var(--light), 0.11), rgba(var(--light), 0.035) 55%, rgba(var(--light), 0));
  clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}

.hero__inner {
  position: relative; flex: 1 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center;
  padding-block: clamp(40px, 6vh, 72px) 28px;
}
.hero__text { display: flex; flex-direction: column; gap: 24px; max-width: 600px; }
.hero__text .display--xl { font-size: clamp(40px, 4.1vw, 58px); }
.hero__text .lead { max-width: 500px; }
.hero__ctas { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 28px; margin-top: 8px; }

.hero__visual {
  position: relative; align-self: stretch;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
/* Sol de l'atelier : ligne d'horizon et reflet brillant */
.hero__floor {
  position: absolute; left: -10%; right: -40%; top: 62%; bottom: -60px; z-index: 0;
  background: linear-gradient(180deg, rgba(38, 60, 104, 0.5), rgba(11, 18, 32, 0) 78%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent);
}
.hero__floor::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, rgba(143, 166, 214, 0), rgba(143, 166, 214, 0.5) 25%, rgba(143, 166, 214, 0.5) 75%, rgba(143, 166, 214, 0));
}
.hero__car { position: relative; z-index: 1; display: block; width: min(740px, 100%); }
.hero__car:hover { color: inherit; }
.hero__car .car-stage__img { transition: transform .4s var(--ease-out); }
.hero__car:hover .car-stage__img { transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) {
  .hero__car:hover .car-stage__img { transform: none; }
}
/* La barre rouge du logo, posée au sol sous la voiture */
.hero__redline {
  position: absolute; left: 13%; right: 13%; top: 95.5%; height: 3px; border-radius: 2px;
  background: var(--accent);
}
.hero__featured {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 12px;
  margin-top: clamp(18px, 4%, 40px); text-align: center;
  font-size: 14px; color: var(--text-dim);
}
.hero__featured-label {
  font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-soft);
}
.hero__featured-model { font-family: var(--font-display); font-stretch: 110%; font-weight: 800; font-size: 17px; color: var(--text); }
.hero__featured-meta { font-variant-numeric: tabular-nums; }
.hero__badge { position: relative; z-index: 1; margin-top: 12px; }
/* Photo réelle non détourée : rendue telle quelle, sans ombre au sol ni reflet */
.hero__photo { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-panel); }
/* Pas encore de photo : silhouette sur le rideau baissé des cartes (base.css) */
.hero__nophoto {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  aspect-ratio: 16 / 10; border-radius: var(--radius-panel); border: 1px solid var(--border);
  background-color: var(--panel-alt);
  background-image: repeating-linear-gradient(180deg,
    rgba(var(--light), 0.05) 0, rgba(var(--light), 0.05) 1px,
    rgba(4, 8, 15, 0) 1px, rgba(4, 8, 15, 0) 25px,
    rgba(4, 8, 15, 0.35) 25px, rgba(4, 8, 15, 0.35) 28px);
}
.hero__nophoto-car { width: 58%; height: auto; aspect-ratio: 3 / 1; }
.hero__nophoto-note { font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
/* Vidéo du véhicule à la une (champ "video" de vehicules.json) : le plan de nuit se fond dans
   le bleu de la page. L'affiche est la dernière image de la vidéo ; la vidéo ne joue qu'avec
   l'intro (js/home.js), puis reste arrêtée sur cette même image. */
.hero--film .hero__lamp, .hero--film .hero__floor { display: none; }
.hero--film .hero__car { width: min(800px, 116%); }
.hero-film {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 84%, transparent), linear-gradient(180deg, transparent, #000 18%, #000 76%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 84%, transparent), linear-gradient(180deg, transparent, #000 18%, #000 76%, transparent);
  mask-composite: intersect;
}
.hero-film__poster, .hero-film__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-film__video { opacity: 0; }
.hero-film.is-ready .hero-film__video { opacity: 1; }
.hero--film .hero__redline { top: 88%; left: 22%; right: 22%; }

/* L'essentiel du garage, en bas du hero */
.facts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.fact { display: flex; align-items: flex-start; gap: 12px; padding: 22px 24px 26px; }
.fact:first-child { padding-left: 0; }
.fact + .fact { border-left: 1px solid var(--line); }
.fact > .i { font-size: 20px; color: var(--accent-soft); margin-top: 2px; }
.fact p { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fact strong { font-weight: 800; font-size: 15px; line-height: 1.35; }
.fact p > span { font-size: 13px; color: var(--text-dim); }

@media (max-width: 1100px) {
  .hero { min-height: 0; }
  .hero__lamp { display: none; }
  .hero__inner { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-block: 44px 20px; }
  .hero__text { max-width: 640px; }
  .hero__floor { left: -20%; right: -20%; top: 58%; }
  .hero__car { width: min(600px, 100%); }
  .hero--film .hero__car { width: calc(100% + 2 * var(--gutter)); max-width: 860px; margin-inline: calc(-1 * var(--gutter)); }
  .hero-film {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent), linear-gradient(180deg, transparent, #000 16%, #000 78%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent), linear-gradient(180deg, transparent, #000 16%, #000 78%, transparent);
  }
  .hero--film .hero__redline { top: 86%; left: 18%; right: 18%; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact { padding: 18px 18px 18px 0; }
  .fact + .fact { border-left: 0; }
  .fact:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--line); }
  .fact:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .hero__inner { padding-block: 28px 16px; gap: 20px; }
  .hero__text { gap: 18px; }
  .hero__text .display--xl { font-size: clamp(32px, 8.6vw, 44px); }
  .hero__text .lead { font-size: 16px; }
  .hero__ctas { flex-direction: column; align-items: stretch; gap: 4px; margin-top: 0; }
  .hero__ctas .btn { width: 100%; min-height: 54px; }
  .hero__ctas .link-arrow { justify-content: center; }
  .hero__car .car-stage__reflection { display: none; }
  .hero__car .car-stage__img { filter: drop-shadow(0 12px 12px rgba(0, 0, 0, 0.55)); }
  .hero__redline { top: 97%; }
  .hero__featured { margin-top: 20px; font-size: 13px; }
  .hero__featured-model { font-size: 15px; }
  .hero__badge { white-space: normal; text-align: center; font-size: 11px; padding: 6px 12px; }
  .fact { gap: 10px; padding: 16px 12px 16px 0; }
  .fact:nth-child(even) { padding-left: 12px; }
  .fact > .i { font-size: 18px; }
  .fact strong { font-size: 14px; }
  .fact p > span { font-size: 12px; }
}

/* ---------- Reprise : le bon de reprise ---------- */
.reprise {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px);
  gap: clamp(40px, 6vw, 88px); align-items: center;
}
.reprise__text { display: flex; flex-direction: column; gap: 24px; }
.reprise__text .lead { max-width: 520px; }
.steps { display: flex; flex-direction: column; margin-top: 8px; }
.steps li { position: relative; display: flex; align-items: flex-start; gap: 16px; padding-bottom: 22px; }
.steps li:last-child { padding-bottom: 0; }
.steps li:not(:last-child)::before {
  content: ""; position: absolute; left: 17.5px; top: 42px; bottom: 6px; width: 1px; background: var(--border-strong);
}
.steps__title { font-weight: 800; font-size: 16px; }
.steps__sub { font-size: 14px; color: var(--text-dim); }

.ticket {
  position: relative; display: flex; flex-direction: column; gap: 16px;
  padding: 26px 28px 24px; border-radius: 16px;
  background: var(--paper); color: var(--paper-ink);
  box-shadow: 0 32px 64px -28px rgba(0, 0, 0, 0.75), 0 12px 24px -14px rgba(0, 0, 0, 0.5);
}
.ticket__head {
  position: relative; display: flex; align-items: center; gap: 14px;
  padding-bottom: 20px; margin-bottom: 4px;
  border-bottom: 2px dashed rgba(11, 18, 32, 0.22);
}
/* Encoches de la ligne de découpe, de la couleur du fond de section */
.ticket__head::before,
.ticket__head::after {
  content: ""; position: absolute; bottom: -12px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--panel-deep);
}
.ticket__head::before { left: -39px; }
.ticket__head::after { right: -39px; }
.ticket__mark { width: 46px; height: 46px; flex-shrink: 0; }
.ticket__title { font-family: var(--font-display); font-stretch: 115%; font-weight: 900; font-size: 24px; line-height: 1.1; }
.ticket__sub { font-size: 13px; font-weight: 700; color: var(--paper-dim); }
.ticket .field__label { color: var(--paper-dim); }
.ticket .input { background: #fff; border-color: var(--paper-line); color: var(--paper-ink); }
.ticket .input::placeholder { color: var(--paper-faint); }
/* Liens sur le papier du bon (« Vos données et vos droits ») : encre du papier, soulignés */
.ticket .form-note a { color: var(--paper-ink); text-decoration: underline; text-underline-offset: 2px; }
.ticket .input:hover { border-color: var(--paper-faint); }
.ticket .input:focus,
.ticket :focus-visible { outline-color: var(--accent); }
.ticket .input:focus { border-color: var(--paper-faint); }
.ticket .input[aria-invalid="true"] { border-color: var(--accent); }
.ticket .field__error { color: #9B2214; }
.ticket .form-note { color: var(--paper-dim); }
.ticket .form-status { border-color: var(--paper-line); background: #fff; color: var(--paper-ink); }
.ticket .form-status--ok { border-color: #2E7D4F; background: #E8F5EC; color: #1D5B37; }
.ticket .form-status--error { border-color: rgba(179, 38, 26, 0.55); background: #FCEBE8; color: #8E1F12; }

/* Photos du véhicule (facultatives, 3 maximum) */
.field__opt { font-weight: 600; color: var(--paper-faint); }
.photo-field__input {
  position: absolute; width: 1px; height: 1px; margin: -1px; opacity: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0);   /* invisible mais atteignable au clavier */
}
.photo-drop {
  display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 16px;
  border: 1.5px dashed var(--paper-line); border-radius: var(--radius-input);
  background: #fff; color: var(--paper-ink); cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.photo-drop:hover,
.photo-field.is-over .photo-drop { border-color: var(--paper-faint); background: #F7F9FC; }
.photo-field__input:focus-visible + .photo-drop { outline: 2px solid var(--accent); outline-offset: 2px; }
.photo-drop > .i { font-size: 24px; color: var(--accent); }
.photo-drop__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; line-height: 1.35; }
.photo-drop__text strong { font-weight: 800; }
.photo-drop__text span { font-size: 13px; color: var(--paper-dim); }
.photo-field.is-full .photo-drop { border-style: solid; cursor: default; background: transparent; }
.photo-field.is-full .photo-drop > .i { color: var(--paper-dim); }
.photo-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.photo-item { position: relative; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: #DCE3EE; }
.photo-item img { width: 100%; height: 100%; object-fit: cover; }
.photo-item__name {
  display: grid; place-items: center; height: 100%; padding: 8px;
  font-size: 12px; color: var(--paper-dim); text-align: center; overflow-wrap: anywhere;
}
.photo-item__remove {
  position: absolute; top: 6px; right: 6px; width: 34px; height: 34px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: rgba(11, 18, 32, 0.78); color: #fff; font-size: 16px; cursor: pointer;
  transition: background-color .2s;
}
.photo-item__remove::after { content: ""; position: absolute; inset: -5px; }   /* zone tactile de 44 px */
.photo-item__remove:hover { background: var(--paper-ink); }
.photo-item__remove:focus-visible { outline: 2px solid #fff; outline-offset: 1px; box-shadow: 0 0 0 4px var(--accent); }
.photo-field__msg { font-size: 13px; line-height: 1.4; font-weight: 600; color: #9B2214; }
.photo-field__msg:empty { display: none; }

@media (max-width: 1100px) {
  .reprise { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .ticket { max-width: 620px; }
}
@media (max-width: 640px) {
  .reprise__text { gap: 16px; }
  .reprise__text .lead { font-size: 15px; }
  .steps li { padding-bottom: 16px; gap: 12px; }
  .steps li:not(:last-child)::before { top: 40px; }
  .steps__sub { font-size: 13px; }
  .ticket { padding: 22px 18px 20px; }
  .ticket__head::before { left: -29px; }
  .ticket__head::after { right: -29px; }
  .ticket__title { font-size: 21px; }
}

/* ---------- Stock ---------- */
.stock { display: flex; flex-direction: column; gap: 32px; }
@media (min-width: 641px) {
  .stock .card-vehicle__media { height: 200px; }
}
@media (max-width: 640px) {
  .stock { gap: 18px; }
}

/* ---------- Prestations : le tableau du garage ---------- */
.services { display: flex; flex-direction: column; gap: 36px; }
.board {
  border: 1px solid var(--border); border-radius: var(--radius-panel); overflow: hidden;
  background: linear-gradient(180deg, rgba(var(--light), 0.045), rgba(var(--light), 0) 160px), var(--panel);
}
.board__row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 17rem; align-items: center; gap: 6px 32px;
  min-height: 72px; padding: 16px 28px;
  border-top: 1px solid var(--line); color: var(--text);
  transition: background-color .2s;
}
.board__list li:first-child .board__row { border-top: 0; }
.board__row:hover { background: rgba(var(--light), 0.035); color: var(--text); }
.board__row:focus-visible { outline-offset: -3px; border-radius: 0; }
.board__name { font-family: var(--font-display); font-stretch: 110%; font-weight: 800; font-size: 19px; line-height: 1.2; }
.board__detail { font-size: 14px; color: var(--text-dim); }
.board__value {
  display: inline-flex; align-items: center; justify-content: flex-end; gap: 12px;
  font-weight: 800; font-size: 15px; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.board__price { min-width: 0; }
.board__list li:first-child .board__value { color: var(--accent-soft); }
.board__value .i { font-size: 18px; color: var(--text-muted); transition: transform .2s var(--ease-out), color .2s; }
.board__row:hover .board__value .i { transform: translateX(3px); color: var(--accent-soft); }
.board__foot {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px;
  padding: 20px 28px; border-top: 1px solid var(--line); background: var(--panel-deep);
}
.board__foot p { font-weight: 700; }
@media (max-width: 860px) {
  .board__row {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name value" "detail detail";
    gap: 4px 16px; min-height: 64px; padding: 14px 18px;
  }
  .board__name { grid-area: name; font-size: 16px; }
  .board__detail { grid-area: detail; font-size: 13px; }
  .board__value { grid-area: value; font-size: 13px; white-space: normal; text-align: right; }
  .board__foot { padding: 18px; }
}
@media (max-width: 640px) {
  .services { gap: 20px; }
  .services .section-head__aside { display: none; }
  .board__foot .btn { width: 100%; }
}

/* ---------- Location / dépôt-vente ---------- */
.offers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.offer {
  display: flex; flex-direction: column; gap: 12px; padding: 36px;
  border: 1px solid var(--border); border-radius: var(--radius-panel);
  background: linear-gradient(180deg, rgba(var(--light), 0.04), rgba(var(--light), 0) 140px), var(--panel);
}
.offer__title { font-family: var(--font-display); font-stretch: 115%; font-weight: 900; font-size: 30px; line-height: 1.05; }
.offer__lead { font-size: 18px; font-weight: 700; line-height: 1.4; max-width: 460px; }
.offer__text { font-size: 15px; line-height: 1.55; color: var(--text-dim); max-width: 460px; }
.offer__foot {
  display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  margin-top: auto; padding-top: 22px; border-top: 1px solid var(--line);
}
.offer__foot .btn { font-size: 14px; }
.offer__price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
.offer__price-label { flex-basis: 100%; font-size: 13px; color: var(--text-dim); }
.offer__price strong {
  font-family: var(--font-display); font-stretch: 110%; font-weight: 900; font-size: 28px; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.offer__price strong::first-letter { text-transform: uppercase; }   /* « sur devis » de config.js → « Sur devis » */
.offer__price small { font-size: 14px; font-weight: 700; color: var(--text-dim); }
@media (max-width: 1100px) {
  .offers { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 640px) {
  .offer { padding: 24px 20px; }
  .offer__title { font-size: 24px; }
  .offer__lead { font-size: 16px; }
  .offer__foot .btn { width: 100%; }
}

/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: 480px minmax(0, 1fr); gap: 64px; align-items: stretch; }
.contact__text { display: flex; flex-direction: column; gap: 24px; }
.contact__rdv { min-height: 52px; padding: 0 26px; }
.contact__list { display: flex; flex-direction: column; gap: 14px; font-size: 15px; }
.contact__list li { display: flex; gap: 12px; align-items: flex-start; }
.contact__list .i { font-size: 20px; color: var(--accent-soft); margin-top: 2px; }
.contact__list strong { display: block; font-weight: 800; }
.contact__list span { color: var(--text-dim); }
.contact__map { min-height: 368px; }
.contact__call { display: none; }
@media (max-width: 1100px) {
  .contact { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .contact__map { min-height: 0; }
  .contact__call { display: inline-flex; width: 100%; }
}
@media (max-width: 640px) {
  .contact__text { gap: 16px; }
  .contact__list { font-size: 14px; gap: 12px; }
  .contact__list li:nth-child(2) { display: none; }
  .contact__rdv { display: none; }
  .contact__call { min-height: 52px; }
  .contact__map { min-height: 0; }
}