/**
 * Fiche d'un véhicule d'occasion (gabarit Theme Builder 1842, retours du 30/10).
 *
 *   Colonne gauche  visuels, encart titre/prix, quatre caractéristiques en 2 × 2
 *   Colonne droite  quatre CTA en 2 × 2, puis le simulateur de financement
 *
 * Encart et caractéristiques partagent le même gris, les mêmes arrondis et
 * la même gouttière, pour se lire comme un seul bloc.
 */

.single-vehicule { --scrf-gris: #f1f1f1; --scrf-gouttiere: 12px; --scrf-rayon: 15px; }

/* Respiration sous la barre du site (retours du 30/10). */
.single-vehicule .et-l--body .sfx-fiche-section { padding-top: 40px !important; }
@media (max-width: 980px) { .single-vehicule .et-l--body .sfx-fiche-section { padding-top: 24px !important; } }

/* ── Encart titre / prix ───────────────────────────────────── */
.single-vehicule .et_pb_module:has(> .et_pb_code_inner > .vehicule-info) {
    margin-bottom: var(--scrf-gouttiere) !important; padding: 32px 36px 28px !important;
    border-radius: var(--scrf-rayon) !important;
}
.single-vehicule .vehicule-info h1 { margin: 0; padding: 0; }
.single-vehicule .vehicule-info h2 { margin: 6px 0 0; padding: 0; }
.single-vehicule .vehicule-info .loc-ville { margin-top: 14px; }
.single-vehicule .vehicule-info .prix { margin-top: 14px; }
.single-vehicule .vehicule-info .meta { margin-top: 8px; }

/* ── Caractéristiques : grille 2 × 2, cartes de même hauteur ── */
.single-vehicule .et_pb_module:has(> .et_pb_code_inner > .vehicule-details) { padding: 0 !important; margin-bottom: 24px !important; }
.single-vehicule ul.vehicule-details {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--scrf-gouttiere);
    margin: 0 !important; padding: 0 !important; list-style: none;
}
.single-vehicule ul.vehicule-details li {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    /* Le thème pose width: 49.5 % (puis 49 %) : la cellule de grille décide. */
    width: auto !important; min-height: 120px; margin: 0 !important; padding: 20px 16px !important; box-sizing: border-box;
    background: var(--scrf-gris); border-radius: var(--scrf-rayon);
    font-size: 15px; line-height: 20px; text-align: center; list-style: none;
}
/* Pictos alignés sur une même ligne de base : 36 px de haut pour tous. */
.single-vehicule ul.vehicule-details li > i { font-size: 32px; line-height: 36px; height: 36px; margin: 0 !important; color: #d60407; }
.single-vehicule ul.vehicule-details li > img { display: block; height: 36px !important; width: auto !important; max-width: 90px; margin: 0 !important; object-fit: contain; }

/* ── CTA : deux lignes de deux ─────────────────────────────── */
.single-vehicule .btn-fiche .et_pb_code_inner {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
}
.single-vehicule .btn-fiche .et_pb_code_inner > a.btn {
    display: flex !important; align-items: center; justify-content: center; gap: 8px;
    width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 15px 10px !important;
    border-radius: var(--scrf-rayon); font-size: 13px; text-align: center; box-sizing: border-box;
}

/* ── Colonne droite : CTA puis financement ─────────────────── */
.single-vehicule .sfx-fiche-actions .sfx-fiche-mensualites { margin-top: 24px !important; }

/* Ordinateur : kilométrage et année au bout de la ligne du prix, sur sa
   ligne de base, sans séparateur (retours du 30/10). */
@media (min-width: 981px) {
    .single-vehicule .vehicule-info { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; }
    .single-vehicule .vehicule-info > * { grid-column: 1 / -1; }
    /* Le thème laisse 25 px sous le prix : la ligne s'arrête au texte. */
    .single-vehicule .vehicule-info > .prix { grid-column: 1; margin-bottom: 0; line-height: 36px; }
    .single-vehicule .vehicule-info > .meta { grid-column: 2; margin: 0; text-align: right; }
}
@media (max-width: 980px) {
    .single-vehicule .et_pb_module:has(> .et_pb_code_inner > .vehicule-info) { padding: 24px !important; }
}
@media (max-width: 480px) {
    .single-vehicule ul.vehicule-details li { min-height: 104px; font-size: 13px; }
    .single-vehicule .btn-fiche .et_pb_code_inner > a.btn { font-size: 12px; padding: 13px 6px !important; }
}