/* ==========
   Base styles
   ========== */
:root{
  --brand:#0B2C3F;    /* bleu sombre du logo */
  --accent:#F36B21;   /* orange éclair */
  --bg:#f7f9fb;
  --ink:#13232f;
  --muted:#6a7a86;
  --radius:16px;
  --shadow:0 6px 24px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
}

.container{width:min(1100px, 92vw); margin:0 auto;}

h1,h2,h3,h4{line-height:1.25; margin:0 0 .5rem}
h1{font-size: clamp(1.8rem, 2.5vw + 1rem, 2.8rem); letter-spacing:.04em}
h2{font-size: clamp(1.4rem, 2vw + .8rem, 2rem)}
h3{font-size: clamp(1.2rem, 1.2vw + .8rem, 1.6rem)}
h4{font-size:1.05rem}

p{margin:.5rem 0 1rem}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}

.btn{
  display:inline-block; background:var(--accent); color:white; border:none;
  padding:.8rem 1.2rem; border-radius:999px; font-weight:600; box-shadow:var(--shadow);
  transition:transform .06s ease, filter .2s ease;
}
.btn:hover{transform:translateY(-1px); text-decoration:none; filter:brightness(1.05)}
.btn:active{transform:translateY(0)}
.btn-secondary{background:var(--brand)}

/* ========== Header ========== */
.site-header{
  background:white; position:sticky; top:0; z-index:9; box-shadow:0 1px 0 rgba(0,0,0,.06);
}
.header-inner{display:flex; align-items:center; gap:1rem; padding:.6rem 0}
.logo{width:56px; height:auto}
.brand h1{color:var(--brand); margin-bottom:.1rem}
.brand .tagline{color:var(--muted); font-weight:700; letter-spacing:.15em; font-size:.8rem}

.site-nav{margin-left:auto; display:flex; gap:1rem; align-items:center; flex-wrap:wrap}
.site-nav a{font-weight:600; color:var(--ink); padding:.4rem .6rem; border-radius:8px}
.site-nav a:hover{background:#eef3f7; text-decoration:none}

/* ========== Hero ========== */
.hero{
  padding: clamp(2rem, 6vw, 4rem) 0;
  background: radial-gradient(70rem 40rem at 10% -10%, rgba(243,107,33,.06), transparent 60%),
              linear-gradient(white, #f4f7fb);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.hero .cta{display:flex; gap:.8rem; flex-wrap:wrap; margin-top:.6rem}
.badges{list-style:none; padding:0; display:flex; gap:.8rem; flex-wrap:wrap; margin:1rem 0 0}
.badges li{background:white; border:1px solid #e8eef3; padding:.4rem .7rem; border-radius:999px; font-weight:600; color:var(--muted)}

/* ========== Cards (Services) ========== */
.cards{padding:3rem 0}
.grid{
  display:grid; gap:1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.card{
  background:white; border-radius:var(--radius); padding:1rem 1.1rem; box-shadow:var(--shadow);
  border:1px solid #e7edf3;
}

/* ========== Compétences ========== */
.features{padding:2.5rem 0; background:white; border-top:1px solid #eef2f6; border-bottom:1px solid #eef2f6}
.feature-list{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:.6rem 1rem; padding-left:1rem}
.feature-list li{margin:.2rem 0}

/* ========== Réalisations ========== */
.realisations{padding:2.5rem 0}
.realisations p{color:var(--muted)}

/* ========== Contact ========== */
.contact{padding:2.5rem 0; background:white; border-top:1px solid #eef2f6}
.contact-grid{display:grid; gap:2rem; grid-template-columns:1.1fr 1fr}
.contact-form{display:grid; gap:.6rem}
.contact-form input, .contact-form textarea{
  width:100%; padding:.7rem .8rem; border-radius:12px; border:1px solid #dbe4ec; background:#f9fbfd;
}
.contact-form input:focus, .contact-form textarea:focus{outline:2px solid rgba(11,44,63,.15); background:white}
.small{color:var(--muted); font-size:.9rem}

/* ========== Footer ========== */
.site-footer{padding:1rem 0; color:#5b6a76; text-align:center}

/* ========== Responsive ========== */
@media (max-width: 840px){
  .site-nav{display:none} /* ultra simple: on masque le menu sur mobile */
  .contact-grid{grid-template-columns:1fr}
}