/* GLOBAL PAGES */

.page-hero{

height:420px;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

color:white;

background-size:cover;

background-position:center;

position:relative;

}

.page-hero::after{
content:"";
position:absolute;
inset:0;
background:rgba(0,0,0,.55);
}

.page-hero-content{
position:relative;
z-index:2;
max-width:800px;
}

.page-hero h1{
font-size:52px;
margin-bottom:20px;
}

.page-section{
padding:90px 40px;
max-width:1200px;
margin:auto;
}

.section-title{
font-size:38px;
margin-bottom:40px;
text-align:center;
}

/* GRID */

.grid-2{
display:grid;
grid-template-columns:1fr 1fr;
gap:50px;
align-items:center;
}

.grid-3{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}

/* CARDS */

.card{

background:white;

padding:30px;

border-radius:14px;

box-shadow:0 15px 40px rgba(0,0,0,.08);

transition:.4s;

}

.card:hover{

transform:translateY(-8px);

box-shadow:0 20px 50px rgba(0,0,0,.15);

}

/* IMAGE */

.image-box img{

width:100%;

border-radius:12px;

}

/* CONTACT FORM */

.contact-form{

max-width:700px;

margin:auto;

display:flex;

flex-direction:column;

gap:15px;

}

.contact-form input,
.contact-form textarea{

padding:14px;

border-radius:8px;

border:1px solid #ddd;

}

.contact-form button{

background:#111827;

color:white;

padding:14px;

border-radius:30px;

cursor:pointer;

transition:.3s;

}

.contact-form button:hover{

background:#2563eb;

}

/* LEGAL TEXT */

.legal-text{

max-width:900px;

margin:auto;

line-height:1.8;

font-size:17px;

}

/* ANIMATIONS */

.fadeUp{

opacity:0;

transform:translateY(40px);

transition:all .7s;

}

.fadeUp.show{

opacity:1;

transform:translateY(0);

}

/* RESPONSIVE */

@media(max-width:900px){

.grid-2{

grid-template-columns:1fr;

}

.grid-3{

grid-template-columns:1fr;

}

.page-hero h1{

font-size:36px;

}

.page-section{

padding:60px 20px;

}

}

/* On small screens, style the test-drive button with brand color */
@media (max-width:900px){
	.btn-test{
		background:#17c3b2;
		color:#fff!important;
		padding:10px 14px;
		border-radius:8px;
		text-decoration:none;
		display:inline-block;
	}
}


.thumbs::-webkit-scrollbar{
height:6px;
}

.thumbs::-webkit-scrollbar-thumb{
background:#17c3b2;
border-radius:10px;
}










/* ============================
VEHICLE PAGE RESPONSIVE
============================ */

@media(max-width:900px){

/* GRID GLOBAL */

.vehicle-grid{
display:flex;
flex-direction:column;
gap:30px;
padding:20px;
}

/* ============================
GALERIE
============================ */

.vehicle-gallery{
width:100%;
}

.main-image img{
width:100%;
height:auto;
border-radius:10px;
}

/* THUMBS SCROLLABLE */

.thumbs{
display:flex;
gap:10px;
overflow-x:auto;
padding-bottom:10px;
}

.thumbs img{
width:80px;
height:60px;
object-fit:cover;
border-radius:6px;
cursor:pointer;
flex-shrink:0;
transition:0.3s;
}

.thumbs img:hover{
transform:scale(1.05);
}

/* ============================
INFOS
============================ */

.vehicle-info{
width:100%;
}

.vehicle-info h1{
font-size:26px;
line-height:1.3;
}

/* META */

.vehicle-meta{
display:flex;
flex-wrap:wrap;
gap:10px;
font-size:14px;
}

/* ============================
PRIX (désactiver sticky)
============================ */

.vehicle-price-sticky{
position:relative !important;
top:auto !important;
margin-top:20px;
padding:20px;
border-radius:10px;
background:#f7f7f7;
}

/* boutons */

.vehicle-price-sticky a{
display:block;
text-align:center;
margin-top:10px;
}


/* ============================
FINANCEMENT
============================ */

.finance-box{
margin-top:20px;
padding:20px;
background:#ffffff;
border-radius:10px;
box-shadow:0 5px 15px rgba(0,0,0,0.05);
}

.finance-box input,
.finance-box select,
.finance-box button{
width:100%;
margin-top:10px;
padding:12px;
}

/* ============================
DESCRIPTION
============================ */

.vehicle-description{
margin-top:20px;
}

.vehicle-description p{
font-size:14px;
line-height:1.6;
}

/* ============================
FICHE TECHNIQUE
============================ */

.spec-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:15px;
}

.spec-grid div{
background:#f9f9f9;
padding:10px;
border-radius:8px;
}

}

/* ============================
ULTRA MOBILE
============================ */

/* SIMILAR VEHICLES - VIEW BUTTON */
.similar-card .btn-view{
    display:inline-block;
    background:#17c3b2; /* brand/secondary color used elsewhere */
    color:#fff;
    padding:10px 14px;
    border-radius:8px;
    text-decoration:none;
    font-weight:600;
    transition:background .18s ease, transform .12s ease, box-shadow .18s ease;
    box-shadow:0 8px 22px rgba(23,195,178,0.12);
}

.similar-card .btn-view:hover{
    background:#129e8b;
    transform:translateY(-2px);
    box-shadow:0 12px 30px rgba(18,158,139,0.12);
}

@media(max-width:900px){
    .similar-card .btn-view{
        padding:8px 12px;
        border-radius:6px;
    }
}


@media(max-width:500px){

.spec-grid{
grid-template-columns:1fr;
}

.vehicle-info h1{
font-size:22px;
}

}




/* ============================
VEHICLE DETAILS - ACTIONS RAPIDES
============================ */

.vehicle-actions{
    display:flex;
    gap:20px;
    justify-content:center;
    margin:40px 0;
    flex-wrap:wrap;
}

.vehicle-actions a{
    text-decoration:none;
    padding:15px 30px;
    border-radius:8px;
    font-weight:600;
    font-size:16px;
    transition:0.3s;
    color:white;
    display:inline-block;
    text-align:center;
}

/* Bouton Calculateur de prêt - orange */
.vehicle-actions .btn-finance{
    background:#f59e0b;
}

.vehicle-actions .btn-finance:hover{
    background:#d97706;
}

/* Bouton Contact - vert */
.vehicle-actions .btn-contact-page{
    background:#17c3b2;
}

.vehicle-actions .btn-contact-page:hover{
    background:#0f9c8a;
}

/* Mobile responsive */
@media(max-width:600px){
    .vehicle-actions{
        flex-direction:column;
        gap:15px;
    }

    .vehicle-actions a{
        width:100%;
    }
}

/* ============================
VEHICLE PRICE - ACTION BUTTONS
Specific styles for buttons/links inside the price sticky panel so they
have distinct colors but don't override global .btn-primary elsewhere.
============================ */
.vehicle-price-sticky .add-to-cart{
    background:#f59e0b; /* orange - Faire une offre */
    color:#fff;
    border:none;
    padding:12px 18px;
    border-radius:12px;
    font-weight:700;
    font-size:15px;
    cursor:pointer;
    box-shadow:0 10px 30px rgba(245,158,11,0.12);
    transition:background .18s ease, transform .12s ease, box-shadow .18s ease;
    display:inline-block;
    text-align:center;
}

.vehicle-price-sticky .add-to-cart:hover{
    background:#d97706;
    transform:translateY(-2px);
    box-shadow:0 14px 36px rgba(217,119,6,0.12);
}

.vehicle-price-sticky .btn-test{
    /* Réserver un essai - teal */
    background:#17c3b2;
    color:#fff!important;
    padding:11px 16px;
    border-radius:10px;
    text-decoration:none;
    display:inline-block;
    font-weight:700;
    margin-left:10px;
    box-shadow:0 8px 24px rgba(23,195,178,0.10);
    transition:background .15s ease, transform .12s ease;
}

.vehicle-price-sticky .btn-test:hover{
    background:#0f9c8a;
    transform:translateY(-2px);
}

.vehicle-price-sticky a.btn-primary{
    /* Demander information - dark / primary accent */
    background:#111827;
    color:#fff;
    padding:11px 16px;
    border-radius:10px;
    text-decoration:none;
    display:inline-block;
    font-weight:700;
    margin-top:10px;
}

/* Stack buttons full-width on smaller screens for better tap targets */
@media(max-width:900px){
    .vehicle-price-sticky .add-to-cart,
    .vehicle-price-sticky .btn-test,
    .vehicle-price-sticky a.btn-primary{
        display:block;
        width:100%;
        margin:8px 0;
    }
}

/* Focus styles for keyboard users */
.vehicle-price-sticky .add-to-cart:focus,
.vehicle-price-sticky .btn-test:focus,
.vehicle-price-sticky a.btn-primary:focus{
    outline:none;
    box-shadow:0 0 0 4px rgba(23,195,178,0.14);
}