:root{--bg-top:#1f513c;--bg-mid:#5d8c79;--bg-bottom:#f4f7f2;--gold:#d8b34b;--ink:#1b1f1d;--ink-soft:#46564f;--panel:#f3f6f1;--card:#ffffff;--shadow:0 10px 30px rgba(0,0,0,.12);--radius:14px}
*{box-sizing:border-box}html,body{margin:0}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;color:var(--ink);line-height:1.6;background:linear-gradient(180deg,var(--bg-top) 0%, var(--bg-mid) 35%, var(--bg-bottom) 100%);background-attachment:fixed}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}.section{padding:56px 0}
h1,h2,h3,h4{font-family:"Playfair Display",serif;margin:0 0 14px}h1{font-size:38px;letter-spacing:.5px}h2{font-size:26px}h3.subtitle{font-size:22px;display:flex;align-items:center;gap:10px}.butterfly{font-size:20px}.muted{color:var(--ink-soft)}
.top{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.68);backdrop-filter:saturate(140%) blur(6px);border-bottom:1px solid rgba(0,0,0,.06)}
.navwrap{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand .brand-line1{font-family:"Playfair Display",serif;font-size:28px;color:var(--ink)}.brand strong{color:var(--gold)}.brand small{display:block;color:var(--ink-soft);font-size:12px;margin-top:4px}
nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0}nav a{color:var(--ink);text-decoration:none}.btn-cta{background:var(--gold);color:#1f1a0b;padding:10px 14px;border-radius:999px;font-weight:600}
.hero{padding:48px 0 30px}.hero .wrap{background:var(--panel);border:3px solid var(--gold);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}
.lead{margin:10px 0 8px;color:var(--ink-soft)}.callout{border:2px solid rgba(0,0,0,.08);border-radius:10px;padding:12px 14px;background:#fff}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:18px}.card{background:var(--card);border-radius:14px;padding:16px;box-shadow:var(--shadow);border:1px solid rgba(0,0,0,.06)}.card h4{margin:0 0 8px;font-family:"Playfair Display",serif}
.about-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:22px;align-items:center}
.portrait{width:260px;height:260px;object-fit:cover;border-radius:50%;border:10px solid var(--gold);box-shadow:var(--shadow);background:#fff}
.values-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:10px}.ticks{margin:0;padding-left:22px}.ticks li{margin:6px 0}
.contact .wrap{background:#e9f2eb;border:3px solid var(--gold);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}input,textarea{width:100%;padding:12px;border:1px solid #c9d5cc;border-radius:10px;font:inherit}.btn-cta.wide{width:100%;margin-top:10px}
.footer{padding:30px 0 50px;color:#33443a}.footer .cols{display:grid;grid-template-columns:1fr 1fr;gap:18px}.disclaimer{margin-top:10px;color:#4c5b55;font-size:14px}
@media (max-width:900px){.cards{grid-template-columns:1fr 1fr}.about-grid{grid-template-columns:1fr}.photo-col{order:-1;text-align:center}.portrait{width:220px;height:220px}}
@media (max-width:560px){h1{font-size:28px}.cards{grid-template-columns:1fr}.grid2{grid-template-columns:1fr}}
/* ===========================
   MOBILE / TABLETTE (responsive)
   — On ne modifie rien en desktop —
   =========================== */

/* Tablette & mobiles larges */
@media (max-width: 900px) {
  /* conteneur */
  .wrap { padding-left: 16px; padding-right: 16px; }

  /* entête + navigation */
  header.top .wrap.navwrap { 
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; 
    gap: 8px; 
  }
  header.top nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }
  header.top nav ul li a { line-height: 1.2; }

  /* bouton "Prendre rendez-vous" dans le menu :
     on le laisse dans le flux pour éviter qu'il déborde */
  .btn-cta { position: static; transform: none; }

  /* héro */
  .hero .wrap { padding-top: 20px; padding-bottom: 20px; }
  .hero h1 { font-size: clamp(28px, 7vw, 40px); line-height: 1.15; }
  .lead { font-size: clamp(16px, 3.8vw, 18px); }

  .callout { margin: 16px 0; }

  /* grilles => 1 colonne */
  .cards { display: grid; grid-template-columns: 1fr; gap: 16px; }
  .card { padding: 16px; }

  .about-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
  .photo-col { order: 2; display: flex; justify-content: center; }
  .portrait { width: 220px; height: 220px; }

  .values-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }

  /* formulaire => 1 colonne */
  .contact .grid2 { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .contact textarea { min-height: 140px; }

  /* pieds de page en pile */
  .footer .cols { display: grid; grid-template-columns: 1fr; gap: 12px; }
}

/* Mobiles étroits */
@media (max-width: 600px) {
  .brand .brand-line1 { font-size: 22px; }
  nav ul li a { font-size: 14px; }

  .hero h1 { font-size: clamp(24px, 8vw, 32px); }
  .card h4 { font-size: 18px; }
}