/* Styles principaux — Thème Vert & Brun Pastel */
:root{
  --bg:#f6fbf4;            /* fond très clair tirant vers le vert */
  --ink:#2e2a27;           /* texte brun très foncé */
  --muted:#6d6861;         /* texte secondaire */
  --primary:#9cc69b;       /* vert sauge pastel */
  --primary-600:#7fb681;   /* vert un peu plus soutenu */
  --accent:#d7bfa5;        /* brun/beige pastel */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink)}
.container{max-width:1100px;margin:0 auto;padding:0 16px}
.site-header{position:sticky;top:0;background:#fff;box-shadow:0 1px 8px rgba(0,0,0,.06);z-index:10}
.site-header .container{display:flex;align-items:center;justify-content:space-between;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:600}
.logo{height:28px}
.nav a{margin-left:18px;text-decoration:none;color:var(--ink)}
.nav .btn{margin-left:12px}
.btn{display:inline-block;padding:10px 16px;border-radius:8px;border:1px solid transparent;text-decoration:none}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-600)}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center;padding:48px 0}
.hero h1{font-size:clamp(28px,4vw,44px);margin:0 0 10px}
.accent{color:var(--primary)}
.hero-media img{width:100%;border-radius:16px;box-shadow:0 10px 30px rgba(127,182,129,.25)}
.gallery{padding:24px 0 16px}
.gallery h2,.about h2,.contact h2{font-size:28px;margin:24px 0}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.grid figure{margin:0}
.grid img{width:100%;height:220px;object-fit:cover;border-radius:12px}
.grid figcaption{font-size:14px;color:var(--muted);margin-top:6px}
.about{padding:16px 0}
.contact{padding:24px 0 64px}
.contact-form{display:flex;flex-direction:column;gap:12px;background:#fff;padding:16px;border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.05)}
.contact-form .row{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.contact-form input,.contact-form textarea{width:100%;padding:10px 12px;border:1px solid #e5e5e5;border-radius:8px;font:inherit}
.contact-form input:focus,.contact-form textarea:focus{outline:2px solid var(--accent);border-color:transparent}
.hp{position:absolute;left:-9999px}
.form-note{color:var(--muted);font-size:12px}
.site-footer{background:#fff;border-top:1px solid #eee;padding:18px 0;color:var(--muted)}
@media (max-width:900px){.hero{grid-template-columns:1fr}.grid{grid-template-columns:repeat(2,1fr)}.contact-form .row{grid-template-columns:1fr}}
@media (max-width:520px){.grid{grid-template-columns:1fr}}

.btn-accent {
  background: var(--accent);
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  text-decoration: none;
  display: inline-block;
}
.btn-accent:hover {
  background: #c9a98b; /* nuance plus foncée */
}

.popup {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.popup-content {
  background: #fff;
  padding: 2rem;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  max-width: 90%;
  width: 400px;
}

.popup-content button {
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  background: #ff7f50;
  border: none;
  color: white;
  border-radius: 4px;
  cursor: pointer;
}

.hidden {
  display: none;
}

.lightbox {
  display: none;
  position: fixed;
  z-index: 1000;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
}

.lightbox-content {
  background: white;
  padding: 20px;
  max-width: 90%;
  max-height: 90%;
  display: flex;
  flex-direction: row;
  gap: 20px;
  border-radius: 8px;
  position: relative;
}

.lightbox-content img {
  max-width: 300px;
  height: auto;
  border-radius: 8px;
}

.lightbox-text {
  max-width: 400px;
}

.lightbox-close {
  position: absolute;
  top: 10px; right: 15px;
  font-size: 24px;
  cursor: pointer;
}

.gallery .grid img {
  cursor: pointer;
}

/* ===== Bouton Instagram ===== */
.btn-ig{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.65rem 1rem;
  border-radius:999px;
  background: linear-gradient(45deg,#f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color:#fff; text-decoration:none;
  font-weight:700; letter-spacing:.2px;
  box-shadow:0 6px 16px rgba(204,35,102,.25);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-ig:hover{
  transform: translateY(-1px);
  box-shadow:0 10px 22px rgba(204,35,102,.32);
  filter:saturate(1.05);
}
.btn-ig:active{ transform: translateY(0); }

/* Icône */
.btn-ig .ig-icon{ width:20px; height:20px; display:block; }
.btn-ig .ig-icon path{ fill: currentColor; } /* = blanc via color du bouton */
.btn-ig strong{ font-weight:800; }

/* Option: version plus discrète (remplace .btn-ig ci-dessus par ça si tu préfères) */
/*
.btn-ig{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.55rem .9rem;
  border-radius:999px; border:1px solid #e5e7eb; background:#fff;
  color:#111827; text-decoration:none; font-weight:600;
}
.btn-ig:hover{ background:#f9fafb; }
.btn-ig .ig-icon path{ fill:#cc2366; }
*/