/* =========================================================================
Voiture — fiche détaillée
-------------------------------------------------------------------------
Chargée par views/reservation/locationsCarDetails.php, servie telle quelle
aux deux écrans : la vue étant écrite ici et non héritée du thème, une seule
feuille responsive suffit — pas de doublon « -mobile » à tenir à jour.
Même vocabulaire que la liste (css/voitures.css) : mêmes couleurs, mêmes
pastilles de caractéristiques, même carte.
========================================================================= */
:root {
--vf-blue: var(--yb-blue, #0d65c9);
--vf-navy: var(--yb-navy, #0d233e);
--vf-cyan: var(--yb-cyan, #29abe2);
--vf-ink: #1f2937;
--vf-body: #4b5563;
--vf-muted: #9ca3af;
--vf-line: #e5e7eb;
--vf-page: #f2f5fa;
}
.vf-page { background: var(--vf-page); padding: 0 0 48px; }
/* Sous la mise en page « application », le corps porte déjà son fond. */
.yb-app .vf-page { padding-bottom: 12px; }
.vf-conteneur { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
/* ---------- Fil d'Ariane et titre ----------------------------------------- */
.vf-entete { padding: 18px 0 16px; }
.vf-retour {
display: inline-flex; align-items: center; gap: 6px;
font-size: 13.5px; font-weight: 600; color: var(--vf-blue) !important;
}
.vf-titre-ligne {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 20px; flex-wrap: wrap; margin-top: 10px;
}
.vf-page h1.vf-titre {
margin: 0; color: var(--vf-ink);
font-size: 32px; font-weight: 800; letter-spacing: -.6px; line-height: 1.15;
}
.vf-lieu { margin: 5px 0 0; font-size: 14px; color: var(--vf-body); }
.vf-lieu i { color: var(--vf-blue); margin-right: 5px; }
/* Doublon avec .vf-reserv__prix (le panneau de reservation) une fois celui-ci sticky et visible en meme temps a l'ecran, ce qui n'arrive qu'a partir de 992px (voir .vf-reserv { position: static } en dessous) : masque sur ordinateur, reactive en dessous ou le panneau descend hors vue. */
.vf-prix-entete { display: none; text-align: right; }
.vf-prix-entete strong { display: block; font-size: 30px; font-weight: 800; color: var(--vf-blue); line-height: 1.1; }
.vf-prix-entete span { font-size: 12.5px; color: var(--vf-muted); font-weight: 600; }
/* ---------- Galerie -------------------------------------------------------- */
/* Une grande image et, à côté, la pile des vignettes. Sans photo secondaire,
la grande occupe toute la largeur : pas de colonne vide. */
/* Dans la colonne de gauche de .vf-corps depuis peu (voir locationsCarDetails.php) : elle n'est plus separee de .vf-bloc par le margin-top de .vf-corps, qui ne s'applique qu'une fois, en haut de la grille entiere. */
.vf-galerie { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; margin-bottom: 20px; }
/* ---------- Visite 360° --------------------------------------------------- */
.vf-360 {
position: relative; overflow: hidden; margin-bottom: 20px;
border-radius: 18px; background: #e7edf7; aspect-ratio: 16 / 10; max-height: 440px;
cursor: grab; user-select: none; outline: none;
}
.vf-360:active { cursor: grabbing; }
.vf-360 img { width: 100%; height: 100%; object-fit: contain; background: #e7edf7; display: block; pointer-events: none; }
.vf-360__aide {
position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
display: flex; align-items: center; gap: 7px;
padding: 8px 16px; border-radius: 999px;
background: rgba(9,15,28,.62); color: #fff; font-size: 12.5px; font-weight: 600;
pointer-events: none; transition: opacity .3s ease;
}
/* La consigne ne sert qu'au premier contact : elle s'efface une fois que la
voiture a tourné, pour ne pas rester en travers de la vue. */
.vf-360.is-parcouru .vf-360__aide { opacity: 0; }
.vf-360__compteur {
position: absolute; top: 14px; right: 14px;
padding: 5px 12px; border-radius: 999px;
background: rgba(9,15,28,.55); color: #fff; font-size: 12px; font-weight: 700;
}
.vf-galerie--seule { grid-template-columns: 1fr; }
.vf-galerie__grande {
position: relative; border-radius: 18px; overflow: hidden;
background: #e7edf7; aspect-ratio: 16 / 10;
/* Plafond de hauteur : sans photo secondaire, la grande occupe toute la
largeur, et le seul rapport de forme lui donnait 750px de haut — elle
repoussait la fiche et le formulaire sous la ligne de flottaison. */
}
/* Le lien doit occuper tout le cadre : laissé en ligne, il rendait à l'image sa
hauteur naturelle et laissait une bande vide sous la photo. */
.vf-galerie__grande > a { display: block; width: 100%; height: 100%; }
.vf-galerie__grande img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vf-galerie__vide {
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #eef2f9, #dde6f5);
color: #b7c7e0; font-size: 96px;
}
.vf-galerie__cote { display: grid; grid-auto-rows: 1fr; gap: 12px; }
.vf-vignette {
display: block; border-radius: 14px; overflow: hidden; background: #e7edf7;
position: relative;
}
.vf-vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Compteur sur la dernière vignette quand la galerie en cache d'autres. */
.vf-vignette__reste {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
background: rgba(9,15,28,.55); color: #fff; font-size: 20px; font-weight: 800;
}
.vf-gabarit {
position: absolute; top: 14px; left: 14px; z-index: 1;
padding: 5px 13px; border-radius: 999px;
background: rgba(255,255,255,.94); color: var(--vf-navy);
font-size: 12px; font-weight: 700;
}
/* ---------- Deux colonnes -------------------------------------------------- */
.vf-corps { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 26px; margin-top: 26px; }
.vf-bloc {
background: #fff; border-radius: 18px; padding: 22px;
box-shadow: 0 2px 10px rgba(13,35,62,.08);
margin-bottom: 20px;
}
.vf-page .vf-bloc__titre {
margin: 0 0 16px; font-size: 18px; font-weight: 700; color: var(--vf-ink);
}
/* Caractéristiques en tuiles : plus lisibles qu'une liste à puces, et le
pictogramme donne le sens avant même la lecture. */
.vf-specs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.vf-spec {
display: flex; align-items: center; gap: 10px;
padding: 12px; border-radius: 12px; background: #f4f6fa;
}
.vf-spec i { flex: 0 0 auto; font-size: 21px; color: var(--vf-blue); }
.vf-spec span { min-width: 0; font-size: 13px; font-weight: 600; color: var(--vf-ink); }
.vf-specs--vide {
padding: 14px; border-radius: 12px; background: #fff7ed;
color: #b45309; font-size: 13.5px; font-weight: 600;
}
.vf-texte { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--vf-body); }
.vf-texte + .vf-texte { margin-top: 10px; }
/* ---------- Carte de réservation ------------------------------------------ */
.vf-reserv { align-self: start; position: sticky; top: 20px; margin: 0; }
/* Le formulaire n'est pas la carte elle-meme : sans ce reset, un
margin par defaut du navigateur sur