/* Reset minimal et police */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:#222;
  background:#fff;
  -webkit-font-smoothing:antialiased;
}

/* ---------- HEADER (bannière FJ Cruiser) ---------- */
.header{
  position:relative;
  height:50vh;
  min-height:260px;
  background-image: url("assets/images/fjcruiser-header.jpg");
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
  justify-content:center;
  border-bottom:4px solid #b30000;
}
.header .overlay{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:#fff;
  text-align:center;
  padding:1.5rem;
  background: linear-gradient(90deg, rgba(179,0,0,0.65), rgba(0,68,204,0.55));
}
.header h1{
  font-size:clamp(1.4rem,3.2vw,2.6rem);
  letter-spacing:2px;
  font-weight:800;
  text-transform:uppercase;
}
.header .lead{
  margin-top:0.4rem;
  font-size:clamp(0.95rem,1.2vw,1.15rem);
  color:rgba(255,255,255,0.95);
}
.header .slogan{
  margin-top:0.6rem;
  color:#ffd700;
  font-style:italic;
}

/* ---------- INTRO ---------- */
.intro{
  padding:2.2rem 1rem;
  max-width:1000px;
  margin:0 auto;
  text-align:center;
}
.intro h2{color:#b30000;margin-bottom:0.6rem;font-size:1.25rem}
.intro p{color:#333;line-height:1.6}

/* ---------- GALLERY ---------- */
.gallery{
  padding:1.6rem 1rem 2rem;
  max-width:1100px;
  margin:0 auto;
}
.gallery h2{color:#0044cc;text-align:center;margin-bottom:1rem;font-size:1.2rem}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1rem;
  align-items:start;
}
.gallery-grid figure{
  background:#fff;
  padding:0.6rem;
  border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,0.06);
  text-align:center;
}
.gallery-grid img{
  width:100%;
  height:160px;
  object-fit:cover;
  border-radius:8px;
  display:block;
}
.gallery-grid figcaption{
  margin-top:0.5rem;
  font-weight:600;
  color:#222;
  font-size:0.95rem;
}

/* ---------- CONTACT & MAP ---------- */
.contact{
  padding:1.6rem 1rem 2.2rem;
  max-width:1000px;
  margin:0 auto;
}
.contact h2{color:#b30000;text-align:center;margin-bottom:0.8rem}
.contact p{margin:0.35rem 0;color:#222;text-align:center}
.contact a{color:#0044cc;font-weight:700;text-decoration:none}
.contact a:hover{text-decoration:underline}
.map-wrap{margin-top:1rem;border-radius:10px;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,0.08)}

/* ---------- FOOTER ---------- */
.site-footer{
  background:#111;
  color:#ddd;
  text-align:center;
  padding:16px 8px;
  margin-top:2rem;
  font-size:0.95rem;
}

/* ---------- RESPONSIVE TWEAKS ---------- */
@media (max-width:720px){
  .header{height:44vh}
  .gallery-grid figure{padding:0.5rem}
  .gallery-grid img{height:140px}
  .intro{padding:1.2rem}
  .contact{padding:1rem}
}