/*********************************************************************/
/* = Designed by Patrick Joly - pjoly50380@gmail.com */
/*********************************************************************/

{
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
}

body {
margin: 0;
color: #252525;
background: #f7f6f3;
font-family: Georgia, "Times New Roman", serif;
font-size: 16px;
line-height: 1.7;
}

img {
display: block;
max-width: 100%;
height: auto;
}

a {
color: inherit;
}

ul {
margin: 0;
padding: 0;
list-style: none;
}

/* ---------- Structure ---------- */
.container {
width: min(1120px, 90%);
margin: 0 auto;
}

/* ---------- En-tête ---------- */
.site-header {
background: #181818;
color: #ffffff;
border-bottom: 1px solid #333333;
}

.site-header .container {
min-height: 82px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
}

.logo {
color: #ffffff;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.35rem;
font-weight: bold;
letter-spacing: 0.08em;
text-transform: uppercase;
}

.logo span {
color: #b99a63;
}

.main-nav ul {
display: flex;
flex-wrap: wrap;
gap: 28px;
}

.main-nav a {
color: #dddddd;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.85rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}

.main-nav a:hover,
.main-nav a:focus,
.main-nav a[aria-current="page"] {
color: #c9a96e;
}

/* ---------- Hero ---------- */
.hero {
min-height: 620px;
display: flex;
align-items: center;
color: #ffffff;
background:
linear-gradient(
90deg,
rgba(15, 15, 15, 0.92) 0%,
rgba(15, 15, 15, 0.70) 55%,
rgba(15, 15, 15, 0.25) 100%
),
url("images/hero.jpg") center center / cover no-repeat;
}

.hero-content {
padding: 100px 0;
}

.eyebrow {
margin: 0 0 12px;
color: #b99a63;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.75rem;
font-weight: bold;
letter-spacing: 0.18em;
text-transform: uppercase;
}

.hero h1 {
max-width: 760px;
margin: 0 0 25px;
font-size: clamp(2.8rem, 6vw, 5.2rem);
font-weight: normal;
line-height: 1.08;
}

.intro {
max-width: 620px;
margin: 0 0 35px;
color: #e2e2e2;
font-size: 1.15rem;
}

/* ---------- Boutons ---------- */
.button {
display: inline-block;
padding: 13px 24px;
color: #ffffff;
background: #a48550;
border: 1px solid #a48550;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.78rem;
font-weight: bold;
letter-spacing: 0.1em;
text-decoration: none;
text-transform: uppercase;
}

.button:hover,
.button:focus {
color: #ffffff;
background: #866b3e;
border-color: #866b3e;
}

.button-light {
color: #252525;
background: transparent;
border-color: #252525;
}

.button-light:hover,
.button-light:focus {
color: #ffffff;
background: #252525;
}

/* ---------- Sections ---------- */
.presentation,
.featured {
padding: 100px 0;
}

.presentation {
background: #f7f6f3;
}

.section-heading {
max-width: 700px;
margin-bottom: 45px;
}

.section-heading h2 {
margin: 0;
color: #1e1e1e;
font-size: clamp(2rem, 4vw, 3.2rem);
font-weight: normal;
line-height: 1.2;
}

.centered {
margin-right: auto;
margin-left: auto;
text-align: center;
}

/* ---------- Présentation ---------- */
.presentation-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 70px;
align-items: start;
}

.presentation-grid p {
max-width: 700px;
margin-top: 0;
color: #555555;
}

.collection-info {
padding: 28px;
border-top: 3px solid #b99a63;
background: #ffffff;
}

.collection-info strong,
.collection-info span {
display: block;
}

.collection-info strong {
margin-bottom: 8px;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8rem;
letter-spacing: 0.12em;
text-transform: uppercase;
}

.collection-info span {
color: #666666;
}

/* ---------- Collection ---------- */
.featured {
background: #e9e7e2;
}

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

.car-card {
overflow: hidden;
background: #ffffff;
}

.car-image {
overflow: hidden;
aspect-ratio: 4 / 3;
background: #dddddd;
}

.car-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}

.car-card:hover .car-image img {
transform: scale(1.03);
}

.car-content {
padding: 28px;
}

.car-category {
margin: 0 0 5px;
color: #a48550;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.7rem;
font-weight: bold;
letter-spacing: 0.14em;
text-transform: uppercase;
}

.car-content h3 {
margin: 0 0 8px;
font-size: 1.5rem;
font-weight: normal;
}

.car-content p:not(.car-category) {
margin: 0 0 18px;
color: #666666;
}

.car-content a {
color: #8b6d3e;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.78rem;
font-weight: bold;
letter-spacing: 0.08em;
text-decoration: none;
text-transform: uppercase;
}

.car-content a:hover,
.car-content a:focus {
color: #252525;
}

.more {
margin-top: 45px;
}

/* ---------- Citation ---------- */
.quote {
padding: 90px 0;
color: #ffffff;
background: #1c1c1c;
}

blockquote {
max-width: 800px;
margin: 0 auto;
text-align: center;
font-size: clamp(1.8rem, 4vw, 3rem);
font-style: italic;
line-height: 1.3;
}

/* ---------- Pied de page ---------- */
.site-footer {
color: #bcbcbc;
background: #111111;
}

.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 60px;
padding: 70px 0;
}

.logo-footer {
display: inline-block;
margin-bottom: 12px;
}

.site-footer p {
margin: 0;
color: #888888;
}

.site-footer h2 {
margin: 0 0 15px;
color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.75rem;
letter-spacing: 0.12em;
text-transform: uppercase;
}

.site-footer li {
margin-bottom: 7px;
}

.site-footer a {
color: #aaaaaa;
text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus {
color: #c9a96e;
}

.copyright {
border-top: 1px solid #292929;
}

.copyright p {
padding: 20px 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.75rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 800px) {

.site-header .container {
    padding: 20px 0;
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
}

.main-nav ul {
    gap: 15px 22px;
}

.hero {
    min-height: 540px;
}

.presentation-grid,
.cars-grid,
.footer-grid {
    grid-template-columns: 1fr;
}

.presentation-grid {
    gap: 30px;
}

.footer-grid {
    gap: 35px;
}

.presentation,
.featured {
    padding: 70px 0;
}


}

@media (max-width: 480px) {
body {
    font-size: 15px;
}

.container {
    width: 88%;
}

.hero h1 {
    font-size: 2.7rem;
}

.main-nav ul {
    flex-direction: column;
    gap: 8px;
}

.hero-content {
    padding: 70px 0;
}

.button {
    width: 100%;
    text-align: center;
}
}