/* FM v2 on Redline — the only additions to Codex's stylesheet (redline.css is kept verbatim).
   Real photos, the garage's services first, the owner side, and two v1 defects fixed. */

/* v1 defect: descenders of « garage » clipped by overflow:hidden on the line wrapper */
.hero-line { overflow: visible; padding-bottom: .08em; margin-block: -.04em; }

/* his real façade photo in the hero: keep the car and the flag in frame */
.hero__media img { object-position: 68% 50%; }
@media (max-width: 620px) { .hero__media img { object-position: 60% 50%; } }

/* service rows carry an action (rendez-vous, devis, prix) in the last column */
.service-row { grid-template-columns: 80px minmax(220px, 1fr) minmax(220px, .9fr) auto; }
.service-row__action { justify-self: end; display: inline-flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; color: inherit; font-family: var(--display); font-weight: 700; font-size: 15px; white-space: nowrap; cursor: pointer; }
.service-row__action span { font-size: 22px; transition: color 220ms ease, transform 220ms ease; }
.service-row:hover .service-row__action span { color: var(--red); transform: rotate(-45deg); }
@media (max-width: 900px) {
  /* Codex's mobile rule puts p in column 2 and the arrow in column 3; the action takes column 2 under the text */
  .service-row { grid-template-columns: 44px minmax(0, 1fr); gap: 6px 14px; padding-block: 22px; min-height: 0; align-items: start; }
  .service-row__number { grid-column: 1; grid-row: 1; padding-top: .55em; }
  .service-row h3 { grid-column: 2; grid-row: 1; min-width: 0; overflow-wrap: anywhere; font-size: clamp(26px, 7.4vw, 34px); }
  .service-row p { grid-column: 2; grid-row: 2; }
  .service-row__action { grid-column: 2; grid-row: 3; justify-self: start; margin-top: 8px; }
}
@media (max-width: 620px) { .service-row { grid-template-columns: 36px minmax(0, 1fr); } }

/* the studio's credit in the footer — visible, clickable */
.site-footer__bottom { flex-wrap: wrap; }
.site-credit { color: rgba(255, 255, 255, .78); text-decoration: none; font-family: var(--display); font-size: 14px; letter-spacing: .02em; border-bottom: 1px solid rgba(255, 255, 255, .28); padding-bottom: 3px; }
.site-credit strong { color: var(--white); font-weight: 700; }
.site-credit span { color: #f24b57; padding-left: 6px; }
.site-credit:hover { border-bottom-color: #f24b57; }

/* sold state on the vehicle page, by class instead of v1's inline style */
.availability.is-sold { background: var(--ink); }
.vehicle-summary__note b { display: block; color: var(--ink); }
.vehicle-gallery__main img { transition: opacity 160ms ease; }

/* filters keep counting when the owner adds a car on this phone */
.filter-button sup { margin-left: 4px; }

/* ---------- the owner side (/gestion), on Redline's tokens ---------- */
.admin { padding: calc(var(--header-height) + 32px) 0 96px; }
.admin__head { display: grid; gap: 14px; margin-bottom: 36px; }
.admin__head h1 { margin: 0; font-size: clamp(42px, 6vw, 72px); letter-spacing: -.04em; }
.admin__lead { max-width: 60ch; color: rgba(17, 19, 21, .6); }
.admin__tools { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.admin__list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.arow { display: grid; grid-template-columns: 150px 1fr auto; gap: 20px; align-items: center; background: var(--white); border: 1px solid var(--line); padding: 14px; }
.arow.is-new { border-left: 4px solid var(--red); }
.arow[data-status="vendu"] .arow__photo { filter: grayscale(.7); opacity: .7; }
.arow__photo { aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-deep); }
.arow__photo img { width: 100%; height: 100%; object-fit: cover; }
.arow__title { margin: 0; font-size: 26px; letter-spacing: -.03em; }
.arow__title small { display: block; font-family: var(--body); font-weight: 400; font-size: 14px; color: rgba(17, 19, 21, .55); }
.arow__price { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-family: var(--display); font-weight: 700; }
.arow__price input { width: 120px; padding: 9px 10px; border: 1px solid var(--line); background: var(--paper); font: inherit; }
.arow__state { margin-top: 10px; }
.arow__actions { display: grid; gap: 8px; }
.arow__see { font-family: var(--display); font-weight: 700; font-size: 14px; text-align: center; }
.button--small { min-height: 0; padding: 11px 16px; font-size: 14px; }
.admin__foot { margin-top: 28px; font-size: 13px; color: rgba(17, 19, 21, .55); }
.dlg__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.enquiry-dialog label.dlg__file input { padding: 10px 0; border: 0; }
.toast { position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 12px); opacity: 0; background: var(--ink); color: var(--white); padding: 10px 16px; font-family: var(--display); font-weight: 700; font-size: 14px; z-index: 60; transition: opacity 200ms, transform 200ms ease; pointer-events: none; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 620px) {
  .arow { grid-template-columns: 96px 1fr; }
  .arow__actions { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .arow__see { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .toast, .service-row__action span { transition: none; } }

/* marquee track must never widen the page (12 px overflow seen on the vehicle page at 1440) */
.fm-marquee { overflow: hidden; }
main { overflow-x: clip; }

/* ---------- 13/09 late, his three asks ---------- */
/* 1. hero: the text on the right, the car on the left (desktop) */
@media (min-width: 901px) {
  .hero__content { display: flex; flex-direction: column; align-items: flex-end; }
  .hero__content > * { text-align: left; }
  .hero h1, .hero__intro, .hero__actions, .hero__trust, .hero__content .eyebrow { width: min(760px, 48vw); }
  .hero h1 { font-size: clamp(60px, 5.4vw, 108px); }
  .hero-line { white-space: nowrap; }
  .hero__scrim {
    background:
      linear-gradient(270deg, rgba(15, 17, 18, 1) 0%, rgba(15, 17, 18, .96) 34%, rgba(15, 17, 18, .55) 50%, rgba(15, 17, 18, 0) 66%),
      linear-gradient(0deg, rgba(15, 17, 18, .8) 0%, transparent 40%);
  }
  /* the photo at its own height-fit size on the left, not stretched across the screen; the text on the dark band */
  .hero { background: #0f1112; }
  .hero__media { background: #0f1112; }
  .hero__media img { width: auto; height: 100%; max-width: none; object-fit: cover; object-position: 0 50%; transform: translate3d(0, var(--hero-shift), 0) scale(1.02); animation: none; }
  .hero__counter { right: auto; left: 4vw; }
  .hero__live { right: auto; left: 4vw; }
  .hero__rail { margin-left: 0; margin-right: 38%; }
}
/* 2. mouse pointer: the native cursor, no red ring */
.pointer-signal { display: none !important; }
/* 3. the lines: no grid texture, no vertical red rule */
.vehicles, .vehicle-story { background: var(--paper); }
.vehicles::before { display: none; }

/* his ask: no progress line, no section indicator */
.redline-progress { display: none !important; }

/* gestion rows on the phone: nothing wider than the screen, the photo at its column width */
.arow__body { min-width: 0; }
.arow__photo { width: 100%; min-width: 0; justify-self: stretch; align-self: start; }
.arow__photo img { display: block; width: 100%; height: 100%; max-width: none; }
@media (max-width: 620px) {
  .arow { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; padding: 12px; }
  .arow__title { font-size: 22px; }
  .arow__price input { width: 96px; }
  .arow__actions { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .arow__actions .button { min-width: 0; width: 100%; padding: 11px 10px; font-size: 13px; white-space: normal; text-align: center; justify-content: center; }
  .arow__see { grid-column: 1 / -1; padding: 6px 0; }
}
/* phone: one column per row — his photo on top, then the facts and the buttons; nothing overlaps */
@media (max-width: 620px) {
  .arow { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .arow__photo { aspect-ratio: 3 / 1.7; }
  .arow__title { margin: 0; }
  .arow__title small { margin-top: 2px; }
}

/* phone: long model names (« Sportage ») must not widen the featured block; filters wrap instead of spilling */
.featured-vehicle__content, .featured-vehicle__image { min-width: 0; }
@media (max-width: 900px) { .featured-vehicle { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 620px) {
  .featured-vehicle h2 { font-size: clamp(52px, 16vw, 104px); overflow-wrap: anywhere; }
  .featured-vehicle__facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .featured-vehicle__facts dd { overflow-wrap: anywhere; }
  .filter-bar { flex-wrap: wrap; row-gap: 6px; }
}

/* the browser gives <figure> 40 px side margins; Redline never reset them (v1 had no figures) */
figure { margin: 0; }