* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: #171717;
  background: #fff;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
.container { width: min(1120px, calc(100% - 40px)); margin: auto; }

.header {
  position: sticky; top: 0; z-index: 10;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid #eee;
}
.nav { min-height: 100px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:800; }
.brand-pds { background:#f4c400; padding:6px 10px; border-radius:4px; letter-spacing:1px; }
.brand-name { font-size:15px; }
nav { display:flex; align-items:center; gap:24px; font-size:14px; font-weight:700; }
nav a:hover { opacity:.65; }
.nav-button { background:#171717; color:#fff; padding:10px 16px; border-radius:4px; }

.hero { background:#f7f7f5; padding:90px 0; }
.hero-grid { display:grid; grid-template-columns: 1.25fr .75fr; gap:70px; align-items:center; }
.eyebrow { font-size:12px; font-weight:800; letter-spacing:2px; margin:0 0 16px; }
.yellow { color:#f4c400; }
h1 { font-size:clamp(42px,6vw,70px); line-height:1.04; margin:0 0 25px; letter-spacing:-2px; }
h1 span, h2 span { color:#b28d00; }
.lead { font-size:19px; max-width:670px; color:#555; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:32px; }
.button { display:inline-block; padding:13px 21px; border-radius:4px; font-weight:800; font-size:14px; }
.button-yellow { background:#f4c400; color:#171717; }
.button-outline { border:1px solid #171717; }
.button-large { padding:16px 24px; }

.hero-card {
  background:#171717; color:#fff; padding:38px; border-radius:8px;
  box-shadow: 14px 14px 0 #f4c400;
}
.hero-card .accent { width:55px; height:6px; background:#f4c400; margin-bottom:30px; }
.card-label { font-size:11px; letter-spacing:2px; color:#f4c400; font-weight:800; }
.hero-card h2 { font-size:29px; line-height:1.2; margin:15px 0; }
.hero-card p:last-child { color:#ccc; }

.section { padding:90px 0; }
.section h2 { font-size:clamp(30px,4vw,45px); line-height:1.15; margin:0 0 35px; letter-spacing:-1px; }
.cards { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.card { border:1px solid #e5e5e5; padding:28px; min-height:240px; border-radius:6px; }
.icon { font-size:13px; font-weight:900; color:#b28d00; margin-bottom:30px; }
.card h3 { font-size:20px; margin:0 0 10px; }
.card p { color:#666; margin:0; font-size:15px; }

.section-dark { background:#171717; color:#fff; }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
.section-dark h2 { margin-bottom:0; }
.section-dark p { color:#d0d0d0; }
.mini-list { margin-top:28px; display:grid; gap:13px; }
.mini-list strong { color:#f4c400; margin-right:10px; }

.about { display:grid; grid-template-columns:250px 1fr; gap:70px; align-items:center; max-width:900px; }
.about-mark {
  width:210px; height:210px; border:12px solid #f4c400;
  display:flex; align-items:center; justify-content:center;
  font-size:55px; font-weight:900; letter-spacing:3px;
}
.about p { max-width:720px; color:#555; }

.contact-section { background:#f7f7f5; }
.contact-box {
  background:#171717; color:#fff; border-radius:8px; padding:55px 60px;
  display:flex; align-items:center; justify-content:space-between; gap:35px;
}
.contact-box h2 { max-width:680px; margin-bottom:12px; }
.contact-box p { color:#ccc; max-width:650px; margin:0; }

.footer { background:#fff; border-top:1px solid #eee; padding:28px 0; font-size:13px; }
.footer-inner { display:flex; justify-content:space-between; gap:20px; }
.footer span { color:#777; }

@media (max-width: 850px) {
  nav a:not(.nav-button) { display:none; }
  .hero-grid, .two-col, .about { grid-template-columns:1fr; gap:40px; }
  .cards { grid-template-columns:1fr 1fr; }
  .about-mark { width:150px; height:150px; font-size:40px; }
  .contact-box { flex-direction:column; align-items:flex-start; padding:40px; }
}
@media (max-width: 520px) {
  .container { width:min(100% - 28px, 1120px); }
  .hero, .section { padding:65px 0; }
  .cards { grid-template-columns:1fr; }
  .hero-card { padding:28px; }
  .footer-inner { flex-direction:column; }
}
.header .logo {
  height: 90px !important;
  width: auto !important;
  max-height: none !important;
  object-fit: contain;
}
.about-mark img {
  width: 80%;
  height: 80%;
  object-fit: contain;
  display: block;
}
#services,
#accompagnement,
#apropos,
#contact {
  scroll-margin-top: 120px;
}
.contact-section .contact-box > div:last-child {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.contact-form-link {
  background: #e5e5e5;
  color: #222;
}
.contact-form-link {
  background: #e5e5e5;
  color: #222;
}