:root{
  --bg:#f7f7f8;
  --card:#ffffff;
  --accent:#0b6efd;
  --muted:#6b7280;
  --radius:12px;
  --container:1100px;
  --shadow: 0 6px 18px rgba(15,23,42,0.08);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:#0f172a;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.container{max-width:var(--container);margin:0 auto;padding:1.6rem}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{font-weight:700;color:var(--accent);text-decoration:none;font-size:1.25rem}
.nav-toggle{display:none;background:none;border:1px solid transparent;padding:.4rem .6rem;border-radius:8px}
.main-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:1rem}
.main-nav a{text-decoration:none;color:inherit;padding:.35rem .6rem;border-radius:6px}
.main-nav a:hover{background:rgba(11,110,253,0.08)}

/* Affichage nav ouverte (mobile) */
.main-nav{transition:opacity .2s ease}
.main-nav.open{display:block;opacity:1}
.hero{padding:3.2rem 0;background:linear-gradient(180deg,rgba(11,110,253,0.06),transparent)}
.hero-grid{display:grid;grid-template-columns:1fr minmax(220px,460px);gap:2rem;align-items:center}

/* Contrainte et centrage de l'image hero pour éviter débordement */
.hero-image{display:flex;align-items:center;justify-content:center}
.hero-image img{max-width:100%;height:auto;display:block}
.hero-content h1{font-size:1.9rem;margin:0 0 .6rem}
.lead{color:var(--muted);margin-bottom:1rem}
.cta-row{margin-top:1rem}
.btn{display:inline-block;padding:.6rem 1rem;border-radius:8px;text-decoration:none;border:1px solid transparent;cursor:pointer}
.btn.primary{background:var(--accent);color:#fff}
.btn.ghost{background:transparent;border:1px solid rgba(15,23,42,0.06)}
.section{padding:2.4rem 0}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem}
.card{background:var(--card);padding:1.2rem;border-radius:var(--radius);box-shadow:var(--shadow)}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem}
.gallery img{width:100%;height:auto;border-radius:8px;display:block}
.about-list{display:flex;gap:1rem;list-style:none;padding:0;margin:1rem 0 0}
.contact-grid{display:grid;grid-template-columns:1fr 320px;gap:1.2rem;align-items:start}
.contact-form{background:var(--card);padding:1rem;border-radius:12px;box-shadow:var(--shadow)}
.contact-form label{display:block;margin-top:.6rem;font-weight:600}
.contact-form input,.contact-form textarea{width:100%;padding:.6rem;margin-top:.25rem;border:1px solid #e6e9ee;border-radius:8px}
.form-actions{margin-top:1rem;display:flex;gap:.6rem}
.contact-info{background:var(--card);padding:1rem;border-radius:12px;box-shadow:var(--shadow)}
.form-status{margin-top:.75rem;font-weight:600;min-height:1.2em}
.form-status.success{color:green}
.form-status.error{color:#c00}

/* Focus visible amélioré pour la navigation clavier */
:where(a,button,input,textarea){outline: none}
:where(a,button,input,textarea):focus-visible{outline:3px solid rgba(11,110,253,0.25);outline-offset:3px;border-radius:6px}
.site-footer{border-top:1px solid #e9eef8;background:transparent;padding:1rem 0;margin-top:2rem}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.footer-nav a{margin-left:.6rem;color:var(--muted);text-decoration:none}

/* Responsive */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .cards{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .main-nav{position:absolute;top:64px;right:0;background:var(--card);width:220px;padding:1rem;border-radius:8px;box-shadow:var(--shadow);display:none}
  .main-nav.open{display:block}
  .nav-toggle{display:inline-block}
  .header-inner{padding:0 0}
  .main-nav ul{flex-direction:column}
  .gallery{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
}