/* ===========================================================================
   Location Pierre Villeneuve - design system
   Ford blue dominant, cool silver relief, bright blue accent. Archivo
   superfamily. Every colour below is a custom property; nothing in the rules
   hardcodes a brand hex, so the palette turns from this block alone.
   =========================================================================== */
:root {
  /* Ford blue, darkest surface to primary. The 700 and 600 steps are Ford's
     own Dark Blue and Ford Blue; 900 and 800 extend them down for surfaces. */
  --ford-900: #00142e;
  --ford-800: #001f4a;
  --ford-700: #002f6c;   /* Ford Dark Blue */
  --ford-600: #003478;   /* Ford Blue, primary */

  /* Accent: the blue carried by PIERRE and the road band in the wordmark, so
     the page and the logo agree. 6.3:1 under white, 5.9:1 as text on --paper,
     which is why it can serve as both a CTA fill and small accent text.
     Every accent hover goes darker, never lighter, or white labels drop below
     AA on the way. */
  --accent:      #0b57d0;
  --accent-300:  #7fb2ff;   /* accent on blue surfaces */
  --accent-600:  #0946a6;   /* hover */

  /* Cool light surfaces */
  --paper:    #f4f6f9;
  --paper-2:  #e6eaf0;

  /* Text */
  --ink:    #10161f;
  --ink-60: #4a5462;
  --cloud:  #e8effa;   /* on blue */
  --mist:   #9fb3d1;   /* muted on blue */

  --line-light: rgba(16, 22, 31, .12);
  --line-dark:  rgba(255, 255, 255, .14);

  --font-display: "Archivo Expanded", "Archivo", system-ui, sans-serif;
  --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --maxw: 72rem;
  --pad: 1.25rem;
  --radius: 14px;
  --shadow: 0 18px 50px -22px rgba(0, 20, 46, .55);
  --shadow-soft: 0 10px 30px -18px rgba(0, 20, 46, .45);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.62;
  font-size: 1.02rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ford-600); }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.08; letter-spacing: -.01em; font-weight: 700; }
p { margin: 0 0 1em; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ----------------------------------------------------------------- Bands */
.band { padding: clamp(3.25rem, 7vw, 6rem) 0; position: relative; }
.band--paper { background: var(--paper); }
.band--cream { background: var(--paper-2); }
.band--blue  { background: var(--ford-700); color: var(--cloud); }
.band--deep  { background: var(--ford-900); color: var(--cloud); }
.band--deep h1, .band--deep h2, .band--deep h3,
.band--blue h1, .band--blue h2, .band--blue h3 { color: #fff; }

.band__head { max-width: 46rem; margin-bottom: 2.5rem; }
.band__title { font-size: clamp(1.8rem, 4vw, 2.9rem); margin: .1em 0 .35em; }
.band__sub { font-size: 1.12rem; color: var(--ink-60); margin: 0; max-width: 40rem; }
.band--deep .band__sub, .band--blue .band__sub { color: var(--mist); }

/* Kicker label */
.kicker {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-body); font-weight: 700;
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 .2em;
}
.kicker::before { content: ""; width: 26px; height: 2px; background: var(--accent); display: inline-block; }
.band--deep .kicker, .band--blue .kicker { color: var(--accent-300); }

/* ---------------------------------------------------------------- Buttons */
.btn {
  --btn-bg: var(--ford-600);
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.4rem; border-radius: 999px;
  font-family: var(--font-body); font-weight: 700; font-size: 1rem;
  text-decoration: none; text-align: center; border: 2px solid transparent;
  background: var(--btn-bg); color: #fff; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.btn:hover { transform: translateY(-2px); }
/* White label, not --ford-900: the deep blue on the accent is 2.9:1, white is
   6.3:1. The hover darkens for the same reason, since --accent-300 as a fill
   would put the white label at 2.1:1. */
.btn--accent { --btn-bg: var(--accent); color: #fff; box-shadow: 0 14px 30px -12px rgba(11, 87, 208, .45); }
.btn--accent:hover { --btn-bg: var(--accent-600); }
.btn--primary { --btn-bg: var(--ford-600); }
.btn--primary:hover { --btn-bg: var(--ford-700); }
.btn--ghost { background: transparent; color: var(--ford-600); border-color: var(--ford-600); }
.btn--ghost:hover { background: var(--ford-600); color: #fff; }
.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.btn--ghost-light:hover { background: #fff; color: var(--ford-900); border-color: #fff; }
.btn--lg { padding: 1.05rem 1.8rem; font-size: 1.08rem; }
.btn svg { width: 1.05em; height: 1.05em; }

.cta-row { display: flex; flex-wrap: wrap; gap: .9rem; margin: 1.6rem 0 0; }

/* ----------------------------------------------------------------- Header */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(244, 246, 249, .9);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line-light);
}
.site-header.is-scrolled { box-shadow: var(--shadow-soft); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 70px; }
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { height: 46px; width: auto; }
.site-nav { display: flex; align-items: center; gap: 1.6rem; }
/* `:not(.btn)` matters here, matching the two rules below. Bare `.site-nav a`
   is 0,0,1,1 and outranks `.btn--accent` at 0,0,1,0, so it used to repaint the
   header call button's label --ink. That survived only because the old teal
   was light enough to carry dark text; on the accent blue it is 2.8:1. The
   exclusion also stops this rule shrinking that button to 600/.98rem when
   `.btn` asks for 700/1rem. */
.site-nav a:not(.btn) { text-decoration: none; color: var(--ink); font-weight: 600; font-size: .98rem; position: relative; }
.site-nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px;
  background: var(--accent); transition: width .2s ease;
}
.site-nav a:not(.btn):hover::after { width: 100%; }
.nav-btn { display: none; }

/* ------------------------------------------------------------------- Hero */
.hero { position: relative; overflow: hidden; color: var(--cloud); isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(110deg, rgba(0,20,46,.96) 0%, rgba(0,20,46,.82) 42%, rgba(0,31,74,.55) 100%),
    radial-gradient(120% 90% at 85% 10%, rgba(11,87,208,.20), transparent 55%);
}
.hero__inner { position: relative; max-width: 44rem; padding-block: clamp(3.5rem, 9vw, 7rem) clamp(3rem, 7vw, 5.5rem); }
.hero__title {
  font-size: clamp(2.5rem, 7vw, 5rem); margin: .15em 0 .3em;
  text-transform: uppercase; letter-spacing: -.015em; line-height: .98; color: #fff;
}
.hero__lead { font-size: clamp(1.1rem, 2.4vw, 1.4rem); color: var(--cloud); max-width: 34rem; margin: 0; }

/* Accent arc motif, echoing the logo car silhouette */
.hero__arc {
  position: absolute; right: -8%; top: 12%; width: min(46vw, 540px); height: auto;
  z-index: -1; opacity: .5; pointer-events: none;
}
.hero__arc path { fill: none; stroke: var(--accent); stroke-width: 9; }

.trust-row { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; margin: 1.9rem 0 0; padding: 0; }
.trust-row li { display: flex; align-items: center; gap: .55rem; font-weight: 600; font-size: .96rem; color: var(--cloud); }
.trust-row svg { width: 20px; height: 20px; flex: none; color: var(--accent-300); }

/* Hero entrance */
.reveal { opacity: 0; transform: translateY(18px); animation: rise .7s cubic-bezier(.2,.7,.2,1) forwards; }
.reveal-1 { animation-delay: .05s; }
.reveal-2 { animation-delay: .16s; }
.reveal-3 { animation-delay: .27s; }
.reveal-4 { animation-delay: .38s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------- Services */
.cards { display: grid; gap: 1.3rem; grid-template-columns: 1fr; }
.card {
  display: flex; flex-direction: column; background: #fff; border-radius: var(--radius);
  overflow: hidden; text-decoration: none; color: var(--ink); border: 1px solid var(--line-light);
  box-shadow: var(--shadow-soft); transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--ford-800); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card:hover .card__media img { transform: scale(1.06); }
.card__body { padding: 1.3rem 1.35rem 1.45rem; display: flex; flex-direction: column; flex: 1; }
.card__title { font-size: 1.22rem; margin: 0 0 .4em; color: var(--ford-700); }
.card__text { color: var(--ink-60); margin: 0 0 1.1rem; font-size: .98rem; }
.card__more { margin-top: auto; font-weight: 700; color: var(--accent); display: inline-flex; align-items: center; gap: .4rem; }
.card__more svg { width: 18px; height: 18px; transition: transform .2s ease; }
.card:hover .card__more svg { transform: translateX(4px); }

/* ------------------------------------------------------------- Rassurance */
.rassurance__grid { display: grid; gap: 2.2rem; align-items: center; grid-template-columns: 1fr; }
.rassurance__media { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.rassurance__media img { width: 100%; height: 100%; object-fit: cover; }
.rassurance__media::after {
  content: ""; position: absolute; left: 1rem; bottom: 1rem; width: 64px; height: 4px; background: var(--accent);
}
.prose { max-width: 40rem; }
.prose h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 1.4em 0 .4em; color: var(--ford-700); }
.prose h2:first-of-type { margin-top: .3em; }
.prose p { color: #262d3a; }
.prose p:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------------- Steps */
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 1.4rem; grid-template-columns: 1fr; }
.steps li { position: relative; padding: 1.5rem 1.4rem; border: 1px solid var(--line-dark); border-radius: var(--radius); background: rgba(255,255,255,.03); }
.steps__num { font-family: var(--font-display); font-weight: 800; font-size: 2.2rem; color: var(--accent); line-height: 1; display: block; margin-bottom: .5rem; }
.steps h3 { font-size: 1.18rem; margin: 0 0 .35em; color: #fff; }
.steps p { color: var(--mist); margin: 0; font-size: .97rem; }

/* --------------------------------------------------------------- Reviews */
.g-logo { width: 18px; height: 18px; flex: none; }
.avis-source { display: inline-flex; align-items: center; gap: .5rem; margin-top: .9rem; color: var(--ink-60); font-size: .95rem; }
.avis-grid { display: grid; gap: 1.2rem; grid-template-columns: 1fr; margin-top: 2.4rem; }
.avis-card {
  background: #fff; border: 1px solid var(--line-light); border-radius: var(--radius);
  padding: 1.4rem 1.4rem 1.5rem; margin: 0; box-shadow: var(--shadow-soft);
}
.avis-head { display: flex; align-items: center; gap: .75rem; margin-bottom: .7rem; }
.avis-avatar {
  width: 40px; height: 40px; flex: none; border-radius: 50%; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.1rem; line-height: 1; text-transform: uppercase;
}
.avis-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.avis-name { font-weight: 700; color: var(--ford-700); }
.avis-sub { font-size: .82rem; color: var(--ink-60); }
.avis-guide { font-weight: 600; }
.avis-head .g-logo { margin-left: auto; }
.avis-rate { display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem; }
.avis-stars { display: inline-flex; gap: 2px; }
.avis-stars .star { fill: #fbbc05; width: 16px; height: 16px; }
.avis-age { font-size: .82rem; color: var(--ink-60); }
.avis-card blockquote { margin: 0; quotes: none; font-size: 1rem; color: #1c2330; line-height: 1.55; }
.avis-foot { margin-top: 2rem; }

/* ------------------------------------------------------------------- CTA */
.cta { text-align: center; }
.cta__title { font-size: clamp(1.9rem, 4.5vw, 3rem); margin: .1em 0 .35em; color: #fff; }
.cta__sub { font-size: 1.15rem; color: var(--mist); max-width: 34rem; margin: 0 auto 1.7rem; }
.cta .phone-big { display: inline-block; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 4vw, 2.4rem); color: var(--accent-300); text-decoration: none; margin-top: 1.1rem; letter-spacing: -.01em; }
.cta .phone-big:hover { color: #fff; }

/* ---------------------------------------------------------------- Footer */
.site-footer { background: var(--ford-900); color: var(--mist); padding: 3.5rem 0 5rem; border-top: 3px solid var(--accent); }
.site-footer .cols { display: grid; gap: 2rem; grid-template-columns: 1fr; }
.site-footer strong { color: #fff; font-family: var(--font-display); letter-spacing: .01em; display: inline-block; margin-bottom: .5rem; }
.site-footer a { color: var(--cloud); text-decoration: none; }
.site-footer a:hover { color: var(--accent-300); }
.site-footer__inner { display: grid; gap: 2rem; grid-template-columns: 1fr; }
.site-footer__col h2 { font-size: 1rem; font-family: var(--font-display); color: #fff; margin: 0 0 .6rem; }
.site-footer__col p { margin: 0 0 .6rem; }
.site-footer__legal {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-dark);
  font-size: .85rem;
}

/* No `filter: brightness(0) invert(1)` here any more. It turned every opaque
   pixel white, which welded the road band and its dashes into a solid white
   slab. The footer now asks logo.html for the "blanc" lockup, a real asset
   whose dashes are transparent. Only the width cap is still needed, since the
   header is the one place `.brand img` constrains the size. Scoped to the
   brand block, not `.site-footer img`, so it never touches anything else. */
.site-footer__brand img { max-width: 220px; }

/* --------------------------------------------------------- Sticky call bar */
.call-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: var(--accent); display: flex; box-shadow: 0 -8px 24px -10px rgba(0,0,0,.4); }
.call-bar.is-hidden { display: none; }
/* White, not --ford-900. This bar shipped once at 1.77:1 and deep blue on the
   accent is only 2.9:1; white on it is 6.3:1. */
.call-bar a { flex: 1; color: #fff; text-decoration: none; text-align: center; padding: .95rem; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: .5rem; }
.call-bar svg { width: 20px; height: 20px; }
body { padding-bottom: 58px; }

/* ----------------------------------------------------------------- Forms */
.section { padding: clamp(2.5rem, 6vw, 4rem) 0; }
/* Reading column for the request form, matching the other text components
   (.prose 40rem, .article 44rem, .band__head 46rem). Without it the inputs
   stretch to the full page width. */
.contact-form { max-width: 44rem; }
.lead { font-size: 1.15rem; color: var(--ink-60); }
.field { margin-bottom: 1.1rem; }
/* Both rules describe the stacked text-entry fields, not the inline choice
   rows, and both are 0,0,1,1 so they used to beat `.choice` at 0,0,1,0: the
   label rule forced `display:block` over the component's own `display:flex`,
   which left its gap and align-items inert, and the input rule stretched the
   radios and checkbox to the full 44rem column. Narrowing them to what they
   actually mean is the fix; `.choice` then governs its own rows. */
.field label:not(.choice) { display: block; font-weight: 600; margin-bottom: .3rem; }
.field input:not([type="radio"]):not([type="checkbox"]), .field textarea { width: 100%; padding: .8rem .9rem; border: 1px solid var(--line-light); border-radius: 10px; font: inherit; background: #fff; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.form-note { color: var(--ink-60); font-size: .9rem; }

/* ------------------------------------------------------------ Breakpoints */
@media (min-width: 40rem) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .avis-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 56rem) {
  body { padding-bottom: 0; }
  .call-bar { display: none; }
  .cards { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(4, 1fr); }
  .rassurance__grid { grid-template-columns: .85fr 1.15fr; gap: 3.5rem; }
  .site-footer .cols { grid-template-columns: 2fr 1fr 1fr; }
  .site-footer__inner { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

/* ------------------------------------------------------------------- Blog */
/* Card list (blog + services): reuse the .card grid */
.card-list .band__head { margin-bottom: 2rem; }
.card-list__intro { margin: 0 0 2.4rem; }
.card__date { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin: 0 0 .5rem; }
.card-list .card__title { color: var(--ford-700); font-size: 1.22rem; line-height: 1.18; }

/* Single article: editorial header + constrained reading column */
.post { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.post__header { max-width: 42rem; margin: 0 auto 2rem; }
.post__title { font-size: clamp(2rem, 5vw, 3.1rem); margin: .12em 0 .4em; color: var(--ford-700); }
.post__deck { font-size: clamp(1.12rem, 2.3vw, 1.35rem); color: var(--ink-60); line-height: 1.5; margin: 0 0 1.1rem; }
.post__meta { display: flex; align-items: center; gap: .7rem; margin: 0; font-size: .9rem; font-weight: 600; color: var(--ink-60); }
.post__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); flex: none; }

.post__body { max-width: 42rem; margin: 0 auto; }
.post__body > p:first-of-type { font-size: 1.1rem; color: #1c2330; }
.post__body img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-soft); margin: 1.8rem 0; }
.post__body h2 { font-size: clamp(1.35rem, 3vw, 1.85rem); margin: 1.7em 0 .45em; color: var(--ford-700); }
.post__body h2::before { content: ""; display: block; width: 44px; height: 3px; border-radius: 2px; background: var(--accent); margin-bottom: .75rem; }
.post__body h3 { font-size: 1.18rem; margin: 1.4em 0 .35em; color: var(--ford-700); }
.post__body a { color: var(--ford-600); font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.post__body a:hover { color: var(--accent-600); }
.post__body ul, .post__body ol { padding-left: 1.25rem; margin: 0 0 1em; }
.post__body li { margin-bottom: .4em; }
.post__foot { max-width: 42rem; margin: 2.6rem auto 0; padding-top: 1.6rem; border-top: 1px solid var(--line-light); }

/* Mobile nav */
@media (max-width: 55.99rem) {
  .nav-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border: 1px solid var(--line-light); border-radius: 10px;
    background: #fff; cursor: pointer;
  }
  .nav-btn__bars, .nav-btn__bars::before, .nav-btn__bars::after {
    content: ""; display: block; width: 22px; height: 2px; background: var(--ford-700); position: relative; transition: transform .2s ease, opacity .2s ease;
  }
  .nav-btn__bars::before { position: absolute; top: -7px; }
  .nav-btn__bars::after { position: absolute; top: 7px; }
  .site-header.is-open .nav-btn__bars { background: transparent; }
  .site-header.is-open .nav-btn__bars::before { transform: translateY(7px) rotate(45deg); }
  .site-header.is-open .nav-btn__bars::after { transform: translateY(-7px) rotate(-45deg); }
  .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--line-light); box-shadow: var(--shadow-soft);
    padding: .5rem var(--pad) 1.1rem;
  }
  .site-header.is-open .site-nav { display: flex; }
  .site-nav a:not(.btn) { padding: .85rem 0; border-bottom: 1px solid var(--line-light); }
  .site-nav a:not(.btn)::after { display: none; }
  .header-call { margin-top: .8rem; }
}

/* --- Logo wordmark ------------------------------------------------------ */
/* Stands in until a real logo file exists. See partials/logo.html. */
.wordmark {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  font-family: var(--font-display);
  text-decoration: none;
  color: inherit;
}
.wordmark__top {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
}
.wordmark__name {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.01em;
  margin-top: .18rem;
}
@media (min-width: 40rem) {
  .wordmark__name { font-size: 1.6rem; }
}

/* --- Dual call bar ------------------------------------------------------ */
.call-bar--dual { display: flex; gap: 0; }
.call-bar--dual a {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .95rem .5rem;
  font-weight: 700;
  text-decoration: none;
}
/* Scoped under `.call-bar` so these beat the `.call-bar a` colour above. The
   two halves need different text colours, so inheriting one shared colour is
   not an option. */
.call-bar .call-bar__call { background: var(--accent); color: #fff; }
.call-bar .call-bar__ask  { background: var(--ford-600); color: #fff; }
.call-bar--dual svg { width: 1.15rem; height: 1.15rem; }

/* --- CTA actions -------------------------------------------------------- */
.cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: center;
}

/* --- Key conditions list ------------------------------------------------ */
.conditions-cles {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  display: grid;
  gap: .7rem;
}
.conditions-cles li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--ink-60);
}
.conditions-cles li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--accent);
}
.conditions-cles strong { color: var(--ink); }

/* --- Fleet -------------------------------------------------------------- */
.fleet__cat {
  margin: 2.5rem 0 1rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
}
.tarif { margin: .6rem 0 .2rem; display: flex; align-items: baseline; gap: .35rem; }
.tarif__prix { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: var(--ford-600); }
.tarif__unite { color: var(--ink-60); font-size: .95rem; }
.tarif__km { margin: 0 0 .5rem; color: var(--ink-60); font-size: .92rem; }
.vehicule__media { margin: 1.25rem 0; border-radius: var(--radius); overflow: hidden; }
.vehicule__media img { width: 100%; height: auto; display: block; }
.vehicule__tarif {
  background: var(--paper-2);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.5rem;
}
.vehicule__spec { margin: .2rem 0; color: var(--ink-60); font-size: .95rem; }
.section--tight { padding-top: 1rem; }

/* --- Form extras -------------------------------------------------------- */
.field__note { margin: .35rem 0 0; font-size: .88rem; color: var(--ink-60); }
/* Optionality marker sitting inside a field label. Same grey and size as
   .field__note above so it reads as the hint it is, and back to normal weight
   because `.field label:not(.choice)` would otherwise pass 600 down to it and
   let it compete with the label it qualifies. */
.field__optional { font-weight: 400; font-size: .88rem; color: var(--ink-60); }
/* The control is centred on the FIRST line box rather than on the label as a
   whole, so an option long enough to wrap keeps its control beside line one.
   The two custom properties are what that centring is derived from, so the
   sizes stay in step if either is changed. */
.choice {
  --choice-line: 1.5;
  --choice-size: 1.15em;
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  line-height: var(--choice-line);
  margin: .5rem 0;
  cursor: pointer;
}
.choice input {
  flex: none;
  font: inherit;   /* the em units below must resolve against the label, not the UA's own 13.33px */
  width: var(--choice-size);
  height: var(--choice-size);
  /* The UA margin is 5px left on a radio and 4px on a checkbox, which is what
     set the rows 1px out of line with each other. Zeroed, so the flex gap is
     the only thing spacing the control from its text. */
  margin: 0;
  margin-top: calc((var(--choice-line) * 1em - var(--choice-size)) / 2);
  accent-color: var(--accent);
  cursor: pointer;
}
fieldset.field { border: 0; padding: 0; margin: 1.25rem 0; }
fieldset.field legend { font-weight: 600; padding: 0; }
.form-block {
  margin: .75rem 0 0;
  padding: .85rem 1rem;
  border-left: 3px solid var(--accent-600);
  background: var(--paper-2);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .92rem;
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Home hero ---------------------------------------------------------- */
.home-hero {
  background: linear-gradient(160deg, var(--ford-800), var(--ford-600));
  color: var(--cloud);
  padding: clamp(3rem, 9vw, 6rem) 0;
}
.home-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3.4rem);
  line-height: 1.05;
  margin: .35rem 0 .75rem;
  color: #fff;
}
.home-hero__sub { max-width: 46rem; font-size: 1.06rem; color: var(--mist); }
.home-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.home-hero .kicker { color: var(--accent-300); }

/* --- Reviews ------------------------------------------------------------ */
.avis__card {
  margin: 0;
  background: #fff;
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow-soft);
}
/* Rating stars read as stars, not as brand accent, and this matches the
   `.avis-stars .star` fill already used by the other reviews block. */
.avis__stars { display: flex; gap: .1rem; color: #fbbc05; margin-bottom: .6rem; }
.avis__stars svg { width: 1.05rem; height: 1.05rem; }
.avis__card blockquote { margin: 0 0 .8rem; }
.avis__card p { margin: 0; color: var(--ink); }
.avis__card figcaption { font-weight: 600; font-size: .92rem; }
.avis__meta { display: block; font-weight: 400; color: var(--ink-60); font-size: .85rem; }

/* --- Article ------------------------------------------------------------ */
.article { max-width: 44rem; }
.article__meta { color: var(--ink-60); font-size: .9rem; margin-top: -.5rem; }
.article__media { margin: 1.5rem 0; border-radius: var(--radius); overflow: hidden; }
.article__media img { width: 100%; height: auto; display: block; }
.prose h2 { margin-top: 2rem; font-family: var(--font-display); }
.prose p { line-height: 1.7; }
.prose ul { line-height: 1.7; }