:root{
  --bg: #F3E0B5; /* beige similaire au logo background */
  --accent: #3b2010; /* brun foncé du logo */
  --accent-2: #6b3f2a;
  --muted: #6b5b4a;
  --card: #fff;
  --glass: rgba(59,32,16,0.04);
  --radius: 14px;
  --container: 1100px;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--accent);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.container{max-width:var(--container);margin:0 auto;padding:28px}

/* Header */
.site-header{background:transparent;padding:18px 0;position:sticky;top:0;z-index:60}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:14px}
.logo-img{width:140px;height:auto;display:block}
.brand-text{line-height:1}
.brand-name{font-family:'Pacifico', cursive;font-size:22px;color:var(--accent);font-weight:700}
.brand-sub{font-size:13px;color:var(--muted);margin-top:4px}

/* Nav */
.nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0;align-items:center}
.nav a{padding:8px 12px;border-radius:10px;color:var(--accent-2);font-weight:600}
.nav .btn{background:var(--accent);color:var(--bg);padding:10px 14px;border-radius:12px;box-shadow:0 6px 18px rgba(59,32,16,0.12);font-weight:700}

/* Hero */
.hero{display:grid;grid-template-columns:1fr 420px;gap:36px;align-items:center;padding:48px 0}
.eyebrow{color:var(--accent);font-weight:700;letter-spacing:0.6px}
h1{font-family:'Pacifico', cursive;font-size:42px;margin:8px 0;color:var(--accent)}
.lead{color:var(--muted);font-size:16px;margin:0 0 20px}
.actions{display:flex;gap:14px}
.cta{background:var(--accent);color:var(--bg);padding:10px 14px;border-radius:12px;font-weight:700}
.link{padding:10px 14px;border-radius:12px;border:1px solid rgba(59,32,16,0.06);color:var(--muted)}

.kpi{display:flex;gap:14px;margin-top:20px}
.kpi-item{background:var(--card);padding:12px 16px;border-radius:12px;box-shadow:0 6px 18px rgba(16,24,40,0.04);min-width:110px}
.kpi-item strong{display:block;color:var(--accent);font-size:18px}

/* mock */
.mock{height:320px;border-radius:12px;background-image:url('https://images.unsplash.com/photo-1505063214305-0a3d5a1d9f63?auto=format&fit=crop&w=1200&q=60');background-size:cover;background-position:center;box-shadow:0 10px 30px rgba(16,24,40,0.06)}

/* Sections */
.section{margin:36px 0}
.grid{display:grid;gap:16px}
.services-grid{grid-template-columns:repeat(3,1fr)}
.card{background:var(--card);padding:18px;border-radius:12px;border:1px solid rgba(16,24,40,0.04)}
.about{display:flex;gap:20px;align-items:flex-start}
.contact-card{min-width:300px;text-align:left}

/* Gallery */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.thumb{height:160px;border-radius:10px;background-size:cover;background-position:center}

/* Testimonials */
.testimonials-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.testimonial{padding:14px;border-radius:10px;background:linear-gradient(180deg,#fff,#fff);border:1px solid rgba(16,24,40,0.03)}

/* Contact form */
.contact-section .contact-form{margin-top:12px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-grid input,.form-grid select,.form-grid textarea{width:100%;padding:12px;border-radius:10px;border:1px solid rgba(16,24,40,0.06);background:transparent;color:var(--accent)}
.form-grid textarea{grid-column:1/3}
.form-actions{display:flex;gap:12px;margin-top:12px}

/* Footer */
.site-footer{padding:28px 0;border-top:1px solid rgba(16,24,40,0.03);margin-top:40px}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--muted);font-size:14px}

/* Responsive */
@media (max-width:980px){
  .hero{grid-template-columns:1fr}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .testimonials-grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .nav ul{display:none}
  h1{font-size:28px}
  .logo-img{width:110px}
}
