:root{ --bosch-red:#ED0007; --bosch-blue:#0057A0; --bg:#f7f7f7; --muted:#666 }
*{ box-sizing:border-box }
body{ margin:0; font-family:Inter, system-ui, Arial, sans-serif; background:var(--bg); color:#222 }
.container{ max-width:1100px; margin:0 auto; padding:1.25rem }
.header-inner{ display:flex; align-items:center; justify-content:space-between }
.brand{ font-weight:700; font-size:1.25rem }
.brand .accent{ color:var(--bosch-red) }
.main-nav a{ margin-left:1rem; text-decoration:none; color:var(--bosch-blue); font-weight:600 }
.main-nav a:hover{ color:var(--bosch-red) }
.site-header{ border-bottom:4px solid var(--bosch-blue); background:#fff }
.site-header.small{ padding:.75rem 0 }
.site-header .container{ padding:0.8rem }
.hero{ min-height:48vh; background-size:cover; background-position:center; position:relative }
.hero-overlay{ background:linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.6)); color:#fff; display:flex; align-items:center; min-height:48vh }
.hero h2{ margin:0 0 .5rem; font-size:2rem; color:var(--bosch-blue) }
.hero p{ margin:0 0 1rem }
.hero-frame {  background-color: #f0f0f0; /* gris clair pour l'encadré */
  display: inline-block;
  padding: 10px; /* espace autour de l'image */
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  max-width: 1200px;
  width: 100%;
  position: relative;
}
.hero-frame img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  border-radius: 6px; /* coins légèrement arrondis */
}

.btn{ display:inline-block; padding:.6rem 1rem; border-radius:8px; text-decoration:none; font-weight:600 }
.btn.primary{ background:var(--bosch-red); color:#fff }
.services{ display:flex; gap:1rem; padding:2rem 0 }
.service-card{ flex:1; background:#fff; padding:1.1rem; border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,0.06); border-top:4px solid var(--bosch-blue) }
.link{ display:inline-block; margin-top:.6rem; color:var(--bosch-blue); font-weight:600 }
.link:hover{ color:var(--bosch-red) }
.contact-strip{ background:var(--bosch-blue); color:#fff; border-top:4px solid var(--bosch-red); margin-top:1rem }
.contact-strip a{ color:#fff; text-decoration:underline }
.contact-inner{ display:flex; justify-content:space-between; align-items:center; padding:1rem }
.agrement-list{ list-style:disc; margin-left:1.2rem }
.note{ margin-top:.6rem; color:var(--muted) }
.page{ padding:2rem 0 }
.cta-box{ background:#fff; padding:1rem; border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,0.04); margin-top:1rem; border-left:6px solid var(--bosch-blue) }
.gallery .thumbs{ display:flex; gap:1rem }
.thumb{ flex:1; height:140px; background:linear-gradient(90deg,#e9e9e9,#f6f6f6); display:flex; align-items:center; justify-content:center; border-radius:6px; font-weight:600; color:var(--bosch-blue) }
.site-footer{ border-top:4px solid var(--bosch-blue); background:#fff; padding:.8rem 0; margin-top:2rem; color:var(--bosch-blue) }
.footer-inner{ display:flex; justify-content:space-between; align-items:center }
@media(max-width:900px){ .services{ flex-direction:column } .contact-inner{ flex-direction:column; gap:.6rem } .footer-inner{ flex-direction:column; gap:.4rem } }