/* ==========================================================================
   Fiche véhicule — CSS propre à l'écran (revue UX 2026-11).

   Deux familles :
   - va-*  composants candidats à la base partagée (assets/tunnel.css) :
           va-sheetbar, va-iconbtn, va-tag, va-pricebox, va-bottombar--link
   - fv-*  mise en page propre à la fiche (galerie, bandeau, sections).
   Mêmes tokens que tunnel.css, même bascule à 860 px.
   ========================================================================== */

/* --- va-sheetbar : barre du haut d'une fiche plein écran (retour + fermer) */
.va-sheetbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--va-surface); border-bottom: 1px solid var(--va-border);
}
.va-sheetbar-inner {
  max-width: calc(var(--va-page-max) + 80px); margin: 0 auto;
  height: 64px; padding: 0 var(--sp-10);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
}
.va-sheetbar .va-backlink { min-height: 44px; font-size: var(--fs-base); }

/* --- va-iconbtn : bouton rond icône seule (fermer), cible 44 px */
.va-iconbtn {
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--va-surface); border: 1.5px solid var(--va-border-strong); color: var(--va-ink);
  transition: border-color .25s var(--va-ease), color .25s var(--va-ease);
}
.va-iconbtn:hover { border-color: var(--va-teal); color: var(--va-teal-strong); }
.va-iconbtn svg { width: 18px; height: 18px; }
.va-iconbtn:focus-visible { border-radius: 50%; }

/* --- va-tag : étiquette d'information, redessinée comme aujourd'hui (pilule
   cerclée). Le constat UXA-17 (elles ressemblent à des boutons) n'est pas
   traité sur cette maquette. */
.va-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.va-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 999px;
  background: var(--va-surface); color: var(--va-teal-strong);
  border: 1.5px solid rgba(17, 151, 143, .45);
  font-size: var(--fs-sm); font-weight: 600; line-height: 1.35;
}
.va-tag svg { width: 15px; height: 15px; flex: none; color: var(--va-teal); }

/* --- va-pricebox : encart prix d'un véhicule (total en grand, prix/jour en second) */
.va-pricebox { padding: var(--sp-6); }
.va-pricebox-label { font-size: var(--fs-sm); font-weight: 700; color: var(--va-muted); }
.va-pricebox-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--sp-2); margin-top: 2px; }
.va-pricebox-amount { font-size: 40px; font-weight: 900; line-height: 1.05; color: var(--va-teal); letter-spacing: -.01em; }
.va-pricebox-days { font-size: var(--fs-md); font-weight: 700; color: var(--va-ink); }
.va-pricebox-per { margin-top: 2px; font-size: var(--fs-base); color: var(--va-muted); }
.va-pricebox-per strong { color: var(--va-ink); font-weight: 700; }
.va-pricebox-points { margin: var(--sp-4) 0 0; padding: 0; list-style: none; display: grid; gap: var(--sp-2); }
.va-pricebox-point { display: flex; gap: var(--sp-2); align-items: flex-start; font-size: var(--fs-sm); line-height: 1.45; }
.va-pricebox-point svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--va-teal); }
.va-pricebox-point strong { font-weight: 700; }
.va-pricebox-point small { display: block; font-size: var(--fs-xs); color: var(--va-muted); }
.va-pricebox-point--key { background: var(--va-teal-light); border-radius: 12px; padding: var(--sp-2) var(--sp-3); }
.va-pricebox .va-btn { margin-top: var(--sp-5); }
.va-pricebox-note { margin-top: var(--sp-2); text-align: center; font-size: var(--fs-xs); color: var(--va-muted); }
.va-pricebox-trip {
  margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--va-border);
  display: grid; gap: 6px; font-size: var(--fs-sm); font-weight: 600;
}
.va-pricebox-trip div { display: flex; align-items: center; gap: var(--sp-2); }
.va-pricebox-trip svg { width: 16px; height: 16px; flex: none; color: var(--va-teal); }

/* --- va-bottombar--link : montant de la barre du bas en lien (vers l'encart prix) */
.va-bottombar a.va-bottombar-amount { color: var(--va-ink); text-decoration: none; }

/* ==========================================================================
   Mise en page de la fiche
   ========================================================================== */
.fv-page { padding-top: var(--sp-5); }

/* Galerie : hauteur ramenée de 510 à 340 px (UXA-04) */
.fv-gallery {
  display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr;
  gap: var(--sp-3); height: 340px;
}
.fv-gallery figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--va-radius-card); background: var(--va-cream); }
.fv-gallery figure:first-child { grid-row: 1 / span 2; }
.fv-gallery img { width: 100%; height: 100%; object-fit: cover; }
.fv-gallery-btn {
  position: absolute; left: var(--sp-4); bottom: var(--sp-4);
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 44px; padding: 0 var(--sp-5); border: 0; border-radius: 999px; cursor: pointer;
  background: var(--va-teal-strong); color: #fff; font-size: var(--fs-sm); font-weight: 700;
}
.fv-gallery-btn svg { width: 16px; height: 16px; }
.fv-gallery-btn:focus-visible { border-radius: 999px; }

/* Bandeau de garanties sous la galerie (gardé, UXA-27) */
.fv-band {
  margin-top: var(--sp-4); padding: 0; overflow: hidden;
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.fv-band-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); min-height: 64px; font-size: var(--fs-sm); font-weight: 700; }
.fv-band-item + .fv-band-item { border-left: 1px solid var(--va-border); }
.fv-band-ic { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--va-teal-light); color: var(--va-teal); }
.fv-band-ic svg { width: 20px; height: 20px; }

/* Grille : titre + contenu à gauche, encart prix collant à droite */
.fv-sheet {
  margin-top: var(--sp-6);
  display: grid; grid-template-columns: minmax(0, 1fr) var(--va-aside);
  grid-template-areas: "title aside" "content aside";
  column-gap: var(--sp-10); align-items: start;
}
.fv-titleblock { grid-area: title; }
.fv-content { grid-area: content; display: flex; flex-direction: column; gap: var(--sp-8); margin-top: var(--sp-8); }
.fv-aside { grid-area: aside; position: sticky; top: calc(64px + var(--sp-4)); }

.fv-cat { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: var(--va-teal-light); color: var(--va-teal-strong); font-size: var(--fs-sm); font-weight: 600; }
.fv-cat svg { width: 16px; height: 16px; }
.fv-title { margin-top: var(--sp-3); font-size: 40px; font-weight: 900; line-height: 1.05; letter-spacing: .01em; text-transform: uppercase; }
.fv-tagline { margin-top: var(--sp-2); font-size: var(--fs-md); color: var(--va-muted); }

.fv-h2 { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-lg); font-weight: 700; line-height: 1.2; margin-bottom: var(--sp-4); }
.fv-h2 svg { width: 20px; height: 20px; color: var(--va-teal); flex: none; }
.fv-section + .fv-section { padding-top: var(--sp-8); border-top: 1px solid var(--va-border); }

.fv-specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.fv-spec { display: flex; align-items: center; gap: var(--sp-3); background: var(--va-surface); border: 1px solid var(--va-border); border-radius: var(--va-radius-inner); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); font-weight: 600; }
.fv-spec svg { width: 22px; height: 22px; flex: none; color: var(--va-teal); }

.fv-plans { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.fv-plans figure { margin: 0; background: var(--va-surface); border: 1px solid var(--va-border); border-radius: var(--va-radius-inner); overflow: hidden; }
.fv-plans img { width: 100%; aspect-ratio: 428 / 292; object-fit: cover; }
.fv-plans figcaption { padding: var(--sp-2); text-align: center; font-size: var(--fs-sm); font-weight: 600; color: var(--va-muted); }
.fv-dims { margin-top: var(--sp-4); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.fv-dim { background: var(--va-surface); border: 1px solid var(--va-border); border-radius: var(--va-radius-inner); padding: var(--sp-3) var(--sp-4); }
.fv-dim span { display: block; font-size: var(--fs-xs); font-weight: 700; color: var(--va-muted); }
.fv-dim strong { font-size: var(--fs-md); font-weight: 900; }

.fv-data p { font-size: var(--fs-sm); color: var(--va-muted); margin-bottom: var(--sp-3); }
.fv-checks { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px var(--sp-6); font-size: var(--fs-sm); font-weight: 600; }
.fv-checks li { display: flex; align-items: center; gap: var(--sp-2); }
.fv-checks svg { width: 14px; height: 14px; flex: none; color: var(--va-teal); }

/* ==========================================================================
   Téléphone (< 860px)
   ========================================================================== */
@media (max-width: 859.98px) {
  .va-sheetbar-inner { height: 56px; padding: 0 var(--sp-4); }
  .fv-page { padding-top: var(--sp-4); }

  .fv-gallery { grid-template-columns: repeat(4, 1fr); grid-template-rows: auto auto; height: auto; gap: var(--sp-2); }
  .fv-gallery figure { border-radius: 12px; aspect-ratio: 1 / 0.8; }
  .fv-gallery figure:first-child { grid-row: auto; grid-column: 1 / -1; aspect-ratio: 4 / 3; border-radius: var(--va-radius-inner); }
  .fv-gallery-btn { left: var(--sp-3); bottom: var(--sp-3); }

  .fv-band { grid-template-columns: 1fr 1fr; margin-top: var(--sp-3); }
  .fv-band-item { padding: var(--sp-3); gap: var(--sp-2); min-height: 60px; }
  .fv-band-item + .fv-band-item { border-left: 0; }
  .fv-band-item:nth-child(even) { border-left: 1px solid var(--va-border); }
  .fv-band-item:nth-child(n+3) { border-top: 1px solid var(--va-border); }
  .fv-band-ic { width: 34px; height: 34px; }

  .fv-sheet { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "aside" "content"; margin-top: var(--sp-5); }
  .fv-aside { position: static; margin-top: var(--sp-4); }
  .fv-content { margin-top: var(--sp-6); gap: var(--sp-6); }
  .fv-section + .fv-section { padding-top: var(--sp-6); }
  .fv-title { font-size: 32px; }
  .fv-tagline { font-size: var(--fs-base); }

  .va-pricebox { padding: var(--sp-5); }
  .va-pricebox-amount { font-size: 34px; }

  .fv-specs { grid-template-columns: 1fr 1fr; }
  .fv-plans { grid-template-columns: 1fr; }
  .fv-dims { grid-template-columns: 1fr 1fr; }
  .fv-checks { grid-template-columns: 1fr; }
}