:root{
  --accent:#2a8f7a;
  --accent-2:#1f6f5e;
  --muted:#6b7280;
  --bg:#f7f9fb;
  --card:#ffffff;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  color:#1f2937;
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
.container{max-width:1100px;margin:0 auto;padding:1rem}

.site-header{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:0.75rem 1rem}
.brand{display:flex;align-items:center;gap:0.75rem}
.logo{width:48px;height:48px;border-radius:8px;background:rgba(255,255,255,0.15);display:flex;align-items:center;justify-content:center;font-weight:700}
.logo2{width:75px;height:75px;display:flex;align-items:center;justify-content:center;font-weight:700}
.brand-text h1{font-size:1.125rem;margin:0}
.brand-text .tag{margin:0;font-size:0.85rem;opacity:0.95}

.main-nav a{color:#fff;margin-left:1rem;text-decoration:none;padding:0.35rem 0.5rem;border-radius:6px}
.main-nav a.cta{background:rgba(255,255,255,0.12)}

.hero{padding:3rem 0}
.hero-inner{display:grid;grid-template-columns:1fr 320px;gap:1.5rem;align-items:center}
.hero-text h2{font-size:1.8rem;margin:0 0 0.5rem}
.hero-text p{color:var(--muted);margin:0 0 1rem}
.btn{display:inline-block;background:var(--accent);color:#fff;padding:0.6rem 1rem;border-radius:8px;text-decoration:none}
.hero-image{height:220px;border-radius:12px;background:linear-gradient(135deg,#e6fffa,#ffffff);box-shadow:0 8px 20px rgba(31,41,55,0.08)}

.espaceclient{display:inline-block;background:var(--accent);color:#fff;padding:0.6rem 1rem;border-radius:8px;text-decoration:none}

.services h3,.about h3,.team h3,.contact h3{margin-top:0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.card{background:var(--card);padding:1rem;border-radius:10px;box-shadow:0 6px 18px rgba(31,41,55,0.06)}
.card h4{margin:0 0 0.4rem}

.about{margin:2rem 0}
.Propos{text-align: center;}
.favicon{width:64px;height:64px;}

.team-grid{display:flex;gap:1rem;flex-wrap:wrap}
.member{background:var(--card);padding:1rem;border-radius:10px;flex:1;min-width:220px;box-shadow:0 6px 18px rgba(31,41,55,0.06)}
.avatar{width:56px;height:56px;border-radius:999px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;margin-bottom:0.5rem}

.contact-grid{display:grid;grid-template-columns:1fr 320px;gap:1rem;align-items:start}
.contact-form{background:var(--card);padding:1rem;border-radius:10px;box-shadow:0 6px 18px rgba(31,41,55,0.06)}
.contact-form label{display:block;margin-top:0.5rem;font-weight:600}
.contact-form input,.contact-form textarea{width:100%;padding:0.5rem;border-radius:6px;border:1px solid #e6e9ee;margin-top:0.25rem}
.contact-info{background:transparent;padding:0.75rem}

.site-footer{padding:1rem 0;background:#111827;color:#fff;margin-top:2rem}
.footer-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}
.small{opacity:0.8;font-size:0.85rem}

@media(max-width:900px){
  .hero-inner{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .main-nav{display:none}
}

@media(prefers-color-scheme:dark){
  body{background:#0b1220;color:#e6eef6}
  .card,.member,.contact-form{background:#071027}
}

/* petites finitions */
a{color:var(--accent)}
button.btn{border:none;cursor:pointer;color:#fff;text-decoration:none;}