/* ========== PAGE VÉHICULES NEUFS ========== */

    /* ── Hero ── */
    /* Le visuel de campagne montre les 4 modèles : il s'affiche en entier,
       sans texte par-dessus (la typo « KARIBU » occupe déjà le haut de l'image).
       Le titre de page prend place dans un bandeau émeraude juste dessous. */
    .page-hero {
      position: relative;
      margin-top: var(--header-h);
      background: #fff;
    }
    .page-hero__bg {
      position: relative; inset: auto;
      display: block; width: 100%; height: auto;
      aspect-ratio: 1920 / 703; object-fit: cover; object-position: center;
    }
    .page-hero__band {
      background: var(--emerald-900, #0e3a2f);
      padding: clamp(1.4rem, 3vw, 2.2rem) 2rem clamp(1.5rem, 3vw, 2.4rem);
    }
    .page-hero__inner {
      position: relative; z-index: 1;
      max-width: 1200px; margin: 0 auto; width: 100%;
    }
    .page-hero__title {
      font-family: 'SKODA Next', sans-serif;
      font-size: clamp(2rem, 5vw, 2.8rem);
      font-weight: 800;
      color: #fff;
      margin: 0 0 .5rem;
      letter-spacing: normal;
    }
    .page-hero__sub {
      font-family: 'SKODA Next', sans-serif;
      font-size: 1.05rem;
      color: rgba(255,255,255,.85);
      margin: 0;
    }

    /* ── Filtres (reprend range__tabs-bar + .filter de index.html) ── */
    .vn-filters {
      background-color: #f5f5f5;
      border-bottom: none;
      margin-bottom: 0;
      padding-top: 1.5rem;
      position: sticky;
      top: var(--header-h, 64px);
      z-index: 90;
    }
    .vn-filters__inner {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      gap: 0;
      flex-wrap: nowrap;
      overflow-x: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
      justify-content: center;
    }
    .vn-filters__inner::-webkit-scrollbar { display: none; }
    /* « Tous les modèles » occupe sa propre ligne, les trois catégories
       restent alignées sur une seule ligne en dessous */
    .vn-filters__inner { flex-wrap: wrap; overflow: visible; }
    .vn-filter--all { flex: 0 0 100%; text-align: center; }
    .vn-filters__row { display: flex; justify-content: center; gap: inherit; width: 100%; }
    .vn-filters__row .vn-filter { flex: 0 1 auto; white-space: nowrap; }
    .vn-filter {
      padding: 0.75rem 1.5rem;
      border-radius: 0;
      background: transparent;
      border: none;
      border-bottom: 2px solid rgb(70, 71, 72);
      margin-bottom: -1px;
      font-family: 'SKODA Next', sans-serif;
      font-weight: 500;
      font-size: 1.125rem;
      color: var(--grey-500, #888);
      white-space: nowrap;
      cursor: pointer;
      transition: color .3s ease, border-color .3s ease, background .3s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .vn-filter:hover { font-weight: 700; color: var(--emerald-900, #1a3c34); border-bottom-color: var(--emerald-900, #1a3c34); }
    .vn-filter.is-active {
      font-weight: 700;
      color: var(--ink, #1a1a1a);
      background: #E6E6E6;
      border-bottom: 3px solid var(--emerald-900, #1a3c34);
    }

    /* ── Counter ── */
    .vn-counter {
      text-align: center;
      padding: 1.5rem 0 .5rem;
      font-family: 'SKODA Next', sans-serif;
      font-size: .85rem;
      color: #888;
      background-color: #f5f5f5;
    }

    /* ── Content wrapper ── */
    .vn-content {
      background: #f5f5f5;
      padding-bottom: 2rem;
    }

    /* ── Sections modèles ── */
    .vn-section {
      max-width: 1200px;
      margin: 0 auto;
      padding: 2.5rem 1.5rem 1rem;
    }
    .vn-section__title {
      font-family: 'SKODA Next', sans-serif;
      font-size: 1.6rem;
      font-weight: 800;
      color: #1a1a1a;
      margin: 0 0 1.25rem;
    }
    /* 4 modèles → 2 colonnes sur desktop : cartes larges, véhicule à grande
       échelle comme sur le gabarit national (au lieu de 4 vignettes étroites) */
    .vn-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1.5rem;
      margin-bottom: 1.5rem;
    }
    .vn-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* ── Card modèle ──
       Aligné sur les cartes de l'accueil (.model-card) : fond gris clair qui
       se fonce au survol, visuel au ratio 25/8, étiquette énergie en haut à
       gauche. L'échange d'image au survol est supprimé : les deux fichiers
       n'ont pas le même cadrage, le véhicule sautait d'une position à l'autre. */
    .vn-card {
      position: relative; display: flex; flex-direction: column;
      background: #f0f0f0; border: 0; border-radius: 8px;
      padding: 18px 18px 16px; overflow: hidden;
      text-decoration: none; color: inherit;
      transition: background-color .3s ease-out;
    }
    .vn-card:hover { background: #e8e8e8; box-shadow: none; transform: none; }
    .vn-card__media {
      display: block; padding: 0; margin-top: 26px; overflow: visible;
      background: transparent; aspect-ratio: 25 / 8;
    }
    .vn-card .vn-card__img {
      display: block; width: 100%; height: auto; margin: 0;
      max-width: none; aspect-ratio: 25 / 8; object-fit: contain;
      transition: transform .3s ease-out;
    }
    .vn-card:hover .vn-card__img { transform: scale(1.04); }
    .vn-card__body {
      padding: 0; display: flex; flex-direction: column; gap: .2rem; flex: 1; border-top: none;
    }
    .vn-card__energy {
      position: absolute; top: 14px; left: 14px; z-index: 2;
      font-family: 'SKODA Next', sans-serif; font-size: .68rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: .1em;
      color: #fff; background: #464748; border-radius: 4px;
      padding: 5px 10px; line-height: 1;
    }
    .vn-card__name {
      font-family: 'SKODA Next', sans-serif; font-size: 16px; line-height: 24px;
      font-weight: 700; letter-spacing: .02em; color: #161718; margin: 14px 0 0;
    }
    .vn-card__price {
      font-family: 'SKODA Next', sans-serif; font-size: .9rem; color: #555; margin: .15rem 0 0;
    }

    /* ── Eco banner ── */
    .eco-banner {
      background: #fff;
      border-top: 1px solid #ddd;
      border-bottom: 1px solid #ddd;
      text-align: center;
      padding: 1.25rem 1.5rem;
    }
    .eco-banner p {
      font-family: 'SKODA Next', sans-serif;
      font-size: .85rem;
      color: #1a1a1a;
      margin: 0;
    }

    /* ── Responsive ── */
    @media (max-width: 960px) {
      .vn-grid, .vn-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 600px) {
      .vn-grid, .vn-grid--2 { grid-template-columns: 1fr; }
      .page-hero__band { padding-inline: 1rem; }
    }