/* Variante sombre : continuité visuelle avec la vitrine Ocazia. */
:root { --navy:#101a38; --night:#0a0c11; --panel:#12161e; --line:#2a303b; --muted:#aab3c1; }
body { background:var(--night); color:#f8fafc; }
.vehicle-header { border-bottom:1px solid var(--line); background:#0b0d12; }
.vehicle-header nav a { color:#e5e9f1; }
.vehicle-header nav a:hover, .breadcrumb:hover { color:#fff; }
.vehicle-page { background:radial-gradient(circle at 72% 0%,rgba(35,50,78,.28),transparent 34%); }
.breadcrumb { color:#9ca7b8; }
.vehicle-gallery { gap:5px; background:var(--panel); }
.vehicle-gallery img { background:var(--panel); filter:saturate(.93) contrast(1.03); }
.gallery-open { display:block; min-width:0; padding:0; border:0; background:var(--panel); cursor:zoom-in; overflow:hidden; }
.vehicle-gallery .gallery-open:first-child { grid-column:1/-1; }
.vehicle-gallery .gallery-open img { width:100%; height:260px; transition:transform .35s ease; }
.vehicle-gallery .gallery-open:first-child img { height:min(47vw,560px); }
.gallery-open:hover img { transform:scale(1.025); }
.vehicle-image-navigation { position:fixed; z-index:10; top:50%; left:0; right:0; display:flex; justify-content:space-between; pointer-events:none; transform:translateY(-50%); }
.vehicle-image-nav { display:grid; place-items:center; width:45px; height:74px; border:1px solid #3a4555; background:rgba(10,12,17,.86); color:#cdd6e4; font-size:24px; line-height:1; text-decoration:none; pointer-events:auto; box-shadow:0 8px 26px rgba(0,0,0,.22); backdrop-filter:blur(10px); transition:background .18s ease,color .18s ease,width .18s ease; }
.vehicle-image-nav.previous { border-left:0; border-radius:0 7px 7px 0; }
.vehicle-image-nav.next { border-right:0; border-radius:7px 0 0 7px; }
.vehicle-image-nav:hover { width:53px; border-color:#5b739b; background:#171c26; color:#fff; }
.vehicle-copy h1, .vehicle-price { color:#fff; }
.vehicle-copy .specs { gap:8px; margin-bottom:29px; }
.vehicle-copy .specs span { position:relative; overflow:hidden; padding:9px 12px 9px 14px; border:1px solid #374253; border-radius:2px; background:linear-gradient(135deg,#171c26,#11151d); color:#e7ebf2; font-weight:500; letter-spacing:.035em; box-shadow:inset 2px 0 0 var(--red),0 5px 13px rgba(0,0,0,.12); }
.vehicle-copy .specs span::after { content:''; position:absolute; top:0; right:0; width:15px; height:1px; background:var(--red); opacity:.9; }
.vehicle-details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin:0 0 28px; }
.vehicle-details div { position:relative; min-height:64px; padding:12px 14px; overflow:hidden; border:1px solid #374253; border-radius:2px; background:linear-gradient(135deg,#171c26,#11151d); box-shadow:inset 2px 0 0 var(--red),0 5px 13px rgba(0,0,0,.12); }
.vehicle-details div::after { content:''; position:absolute; top:0; right:0; width:15px; height:1px; background:var(--red); }
.vehicle-details dt { margin:0 0 7px; color:#99a5b7; font:500 9px "DM Mono",monospace; letter-spacing:.08em; text-transform:uppercase; }
.vehicle-details dd { margin:0; color:#f2f5f9; font-size:12px; font-weight:700; }
.vehicle-equipment { display:grid; grid-template-columns:minmax(220px,.72fr) minmax(0,1.28fr); gap:clamp(24px,5vw,80px); margin-top:clamp(48px,7vw,92px); padding:clamp(28px,4vw,48px); border-top:1px solid #303a4b; border-bottom:1px solid #303a4b; background:linear-gradient(110deg,rgba(20,28,43,.8),rgba(13,17,24,.65)); }
.equipment-heading .eyebrow { margin-bottom:10px; }
.equipment-heading h2 { margin:0; color:#f4f6fa; font-size:clamp(26px,3vw,42px); line-height:1; letter-spacing:-.045em; }
.vehicle-equipment ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin:0; padding:0; list-style:none; }
.vehicle-equipment li { position:relative; min-height:52px; padding:16px 16px 16px 35px; border:1px solid #334052; background:#111720; color:#dce3ed; font-size:12px; line-height:1.35; }
.vehicle-equipment li::before { content:'✓'; position:absolute; left:14px; color:#92d6aa; font-weight:800; }
.vehicle-copy>p:not(.eyebrow):not(.vehicle-price) { color:#b6bfcb; }
.proofs { gap:11px; }
.proofs li { position:relative; grid-template-columns:38px 1fr; gap:13px; padding:16px 18px; overflow:hidden; border:1px solid #28423a; border-left:0; background:linear-gradient(112deg,#16261f 0%,#101a18 58%,#0e1514 100%); box-shadow:inset 3px 0 0 #65be8b,0 7px 18px rgba(0,0,0,.12); }
.proofs li::after { content:''; position:absolute; top:0; right:0; width:58px; height:2px; background:linear-gradient(90deg,transparent,#65be8b); opacity:.8; }
.proofs b { color:#f5f7fb; letter-spacing:-.015em; }
.proofs span { color:#adbbb7; }
.proof-icon { width:31px; height:31px; border:1px solid #46755f; border-radius:2px; background:linear-gradient(145deg,#214534,#12271e); color:#a6e7be; clip-path:polygon(10% 0,100% 0,100% 74%,75% 100%,0 100%,0 10%); font-size:12px; }
.button-outline { border-color:#647084; background:transparent; color:#fff; }
.vehicle-actions { grid-template-columns:1fr 1fr; gap:0; padding:4px; border:1px solid #35445a; border-radius:4px; background:var(--panel); }
.vehicle-actions .button { min-height:60px; border:0; border-radius:2px; font:700 12px Manrope,Arial,sans-serif; letter-spacing:.015em; }
.vehicle-actions .button-appointment { background:#f0f3f7; color:#101a30; }
.vehicle-actions .button-appointment:hover { background:#fff; }
.vehicle-actions .drive-icon { display:none; }
.vehicle-actions .button-appointment::after,.vehicle-actions .button-whatsapp::before { content:''; display:block; width:27px; height:27px; flex:0 0 27px; background:center/contain no-repeat; }
.vehicle-actions .button-appointment::after { background-image:url('assets/icon-steering.svg'); }
.vehicle-actions .button-whatsapp::before { background-image:url('assets/icon-whatsapp.svg'); }
.vehicle-actions .button-appointment:hover .drive-icon { fill:#101a38; }
.vehicle-actions .button-appointment span { font-size:16px; }
.vehicle-actions .button-whatsapp { border-left:1px solid #35445a; background:linear-gradient(135deg,#1f3443,#162530); color:#fff; }
.vehicle-actions .button-whatsapp:hover { background:#284456; }
.vehicle-actions .button-whatsapp svg { display:none; }
.appointment-form .button { background:#5b739b; }
.appointment-form .button:hover { background:#6983ad; }
.contact-note { color:#929dac; }
.appointment-dialog { border:1px solid #303b4b; background:var(--panel); color:#fff; box-shadow:0 28px 80px rgba(0,0,0,.55); }
.appointment-dialog::backdrop { background:rgba(5,9,16,.78); }
.dialog-close { color:#fff; }
.appointment-content p { color:#b8c1ce; }
.appointment-form label { color:#dce1e9; }
.appointment-form input,.appointment-form textarea { border-color:#394556; background:var(--night); color:#fff; }
.appointment-form input:focus,.appointment-form textarea:focus { outline:2px solid rgba(237,24,37,.45); border-color:#ed1825; }
.appointment-form .button:disabled { cursor:wait; opacity:.7; }
.form-honeypot { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.form-status { min-height:18px; margin:0!important; color:#f0b8bd!important; font-size:11px!important; }
.appointment-success { padding-block:52px; }
.appointment-reference { margin-top:28px!important; color:#9fbda9!important; font:10px "DM Mono",monospace!important; letter-spacing:.06em; }
.gallery-lightbox { position:fixed; inset:0; box-sizing:border-box; width:100%; max-width:none; height:100vh; height:100dvh; max-height:none; margin:0; border:0; padding:0; overflow:hidden; overscroll-behavior:none; background:#06070a; color:#fff; }
.gallery-lightbox[open] { display:grid; grid-template-rows:minmax(0,1fr) auto; }
html.gallery-is-open, html.gallery-is-open body { overflow:hidden; overscroll-behavior:none; }
.gallery-lightbox .lightbox-stage { box-sizing:border-box; min-width:0; min-height:0; height:auto; overflow:hidden; }
.gallery-lightbox .lightbox-stage>img { width:100%; height:100%; min-width:0; min-height:0; }
.gallery-lightbox .lightbox-bottom { position:relative; inset:auto; box-sizing:border-box; min-width:0; padding-bottom:max(14px,env(safe-area-inset-bottom)); }
.gallery-lightbox::backdrop { background:rgba(0,0,0,.86); }
.lightbox-stage { position:relative; display:grid; place-items:center; height:calc(100vh - 130px); padding:72px 96px 20px; }
.lightbox-stage>img { display:block; max-width:100%; max-height:100%; object-fit:contain; box-shadow:0 18px 60px rgba(0,0,0,.42); }
.lightbox-close { position:absolute; z-index:2; top:20px; right:28px; width:42px; height:42px; border:1px solid #445166; border-radius:50%; background:#12161e; color:#fff; font-size:27px; cursor:pointer; }
.lightbox-nav { position:absolute; top:50%; display:grid; place-items:center; width:48px; height:66px; border:1px solid #3b4658; background:rgba(18,22,30,.82); color:#fff; font-size:24px; cursor:pointer; transform:translateY(-50%); }
.lightbox-nav:hover,.lightbox-close:hover { border-color:#6c82a9; background:#171c26; }
.lightbox-nav.previous { left:23px; border-radius:0 6px 6px 0; border-left:0; }.lightbox-nav.next { right:23px; border-radius:6px 0 0 6px; border-right:0; }
.lightbox-bottom { position:absolute; right:0; bottom:0; left:0; display:flex; min-height:104px; align-items:center; justify-content:center; gap:23px; padding:14px 80px; border-top:1px solid var(--line); background:#0b0d12; }.lightbox-bottom>span { color:#b7c1cf; font:10px "DM Mono",monospace; letter-spacing:.12em; }.lightbox-thumbnails { display:flex; max-width:min(720px,72vw); gap:6px; overflow:auto; }.lightbox-thumbnails button { width:64px; height:52px; flex:0 0 auto; padding:0; border:1px solid transparent; background:var(--panel); cursor:pointer; opacity:.5; }.lightbox-thumbnails button.active,.lightbox-thumbnails button:hover { border-color:#b9c5d8; opacity:1; }.lightbox-thumbnails img { display:block; width:100%; height:100%; object-fit:cover; }
@media(max-width:600px) { .vehicle-image-nav { width:38px; height:62px; font-size:20px; } .vehicle-image-nav:hover { width:42px; } }
@media(max-width:760px) { .vehicle-equipment { grid-template-columns:1fr; gap:26px; padding:26px 20px; } }
@media(max-width:460px) { .vehicle-details,.vehicle-equipment ul { grid-template-columns:1fr; } }
@media(max-width:600px) { .vehicle-actions { grid-template-columns:1fr; gap:5px; padding:5px; } .vehicle-actions .button { min-height:58px; font-size:13px; } .vehicle-actions .button-whatsapp { border-top:0; border-left:0; } .vehicle-actions .button-appointment::after,.vehicle-actions .button-whatsapp::before { width:29px; height:29px; flex-basis:29px; } }
@media(max-width:600px) { .vehicle-gallery .gallery-open img { height:150px; }.vehicle-gallery .gallery-open:first-child img { height:72vw; }.lightbox-stage { height:calc(100vh - 115px); padding:66px 18px 14px; }.lightbox-nav { width:40px; height:55px; }.lightbox-nav.previous { left:0; }.lightbox-nav.next { right:0; }.lightbox-close { top:12px; right:14px; }.lightbox-bottom { min-height:115px; flex-direction:column; gap:9px; padding:10px 16px; }.lightbox-thumbnails { max-width:100%; width:100%; }.lightbox-thumbnails button { width:55px; height:45px; } }
