/* ===== Reset & Base ===== */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --ink:#0d1b2a;
  --muted:#42526b;
  --bg:#f5f7fb;
  --card:#ffffff;
  --accent:#ffcc33; /* bouton jaune maquette */
  --shadow:0 10px 24px rgba(13,27,42,.12);
  --radius:18px;
  --container:1150px;
}
html,body{height:100%}
body{
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
}
.container{width:min(100%,var(--container));margin-inline:auto;padding-inline:22px}

/* ===== HERO (hauteur similaire à la maquette, CTA centré) ===== */
.hero{
  position:relative;
  height:440px;
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
}
.hero-shade{
  position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(7,19,39,.75), rgba(7,19,39,.55) 40%, rgba(7,19,39,.25) 70%, rgba(7,19,39,0) 100%);
}
.hero-inner{position:relative;text-align:center}
.brand{
  font-size: clamp(36px, 6vw, 64px);
  font-weight: 800;
  letter-spacing:.03em;
  color:#fff;
  margin-bottom:10px;
}
.subtitle{
  font-size: clamp(15px, 2.2vw, 20px);
  color:#e6eef6;
  margin-bottom:22px;
}
.btn{
  display:inline-block;
  padding:12px 28px;
  border-radius:999px;
  font-weight:700;
  text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease, background .2s;
}
.btn-accent{
  background:var(--accent);
  color:#16233a;
  box-shadow:0 6px 16px rgba(255,204,51,.35);
}
.btn-accent:hover{transform:translateY(-1px)}

/* ===== Sections ===== */
.section{padding:62px 0;background:#fff}
.section.soft-bg{background:linear-gradient(180deg,#fff 0%, #f6f8fc 100%)}
.section-title{
  font-size: clamp(24px, 3vw, 34px);
  font-weight:800;
  text-align:center;
  color:#0b1f2e;
  margin-bottom:34px;
}

/* ===== Services (3 cartes avec photo comme la maquette) ===== */
.cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:26px;
}
.card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.card-media{
  width:100%;
  aspect-ratio: 4/3;
  border-radius:14px;
  overflow:hidden;
  margin-bottom:14px;
}
.card-media img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.card-title{
  font-size:20px;
  font-weight:800;
  margin-bottom:8px;
}
.card-text{
  color:var(--muted);
  font-size:15.5px;
}

/* ===== Pourquoi me choisir (icônes + texte) ===== */
.why{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:26px;
}
.why-item{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:28px 22px;
  text-align:center;
}
.why-item svg{
  display:block;
  margin:0 auto 12px auto;
  color:#0d3b66;
}
.why-item h3{
  font-size:18px;
  font-weight:800;
  margin-bottom:8px;
}
.why-item p{
  color:var(--muted);
  font-size:15.5px;
}

/* ===== Contact (3 champs alignés + bouton jaune) ===== */
#contact .section-title{margin-bottom:24px}
.contact-form{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:12px;
  max-width:920px;
  margin:0 auto;
}
.contact-form input{
  padding:14px 16px;
  border:1px solid #d9e1ec;
  border-radius:999px;
  outline:none;
  font-size:16px;
}
.btn-send{
  grid-column: 2 / span 1; /* bouton centré sous les champs sur desktop */
  margin-top:6px;
  justify-self:center;
}

/* ===== Responsive ===== */
@media (max-width: 980px){
  .cards, .why{grid-template-columns:1fr 1fr}
  .btn-send{grid-column:1 / -1}
}
@media (max-width: 640px){
  .hero{height:380px}
  .cards, .why{grid-template-columns:1fr}
  .contact-form{grid-template-columns:1fr}
}