/*
Theme Name: Noémie Ostéopathe
Description: Thème vitrine ostéopathie — tout éditable via le Personnalisateur
Version: 4.0
*/
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --vert:       #5f8a70;
  --vert-clair: #e8f0ea;
  --creme:      #faf8f4;
  --terre:      #c19a6b;
  --gris:       #6b6b6b;
  --noir:       #2c2c2c;
  --blanc:      #ffffff;
  --font-titre: 'Cormorant Garamond', Georgia, serif;
  --font-corps: 'DM Sans', 'Helvetica Neue', sans-serif;
  --ombre:      0 4px 24px rgba(0,0,0,.08);
}
html { scroll-behavior: smooth; }
body { font-family: var(--font-corps); background: var(--creme); color: var(--noir); font-size: 16px; line-height: 1.7; }
img { max-width: 100%; display: block; }
a { color: var(--vert); text-decoration: none; }
h1,h2,h3,h4 { font-family: var(--font-titre); font-weight: 600; line-height: 1.2; }

/* NAV */
.nav-principale { position: fixed; top:0; left:0; right:0; z-index:1000; background:rgba(250,248,244,.96); backdrop-filter:blur(8px); border-bottom:1px solid rgba(95,138,112,.15); padding:0 2rem; }
.nav-interieur { max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; height:70px; }
.nav-logo { font-family:var(--font-titre); font-size:1.3rem; color:var(--vert); font-weight:700; }
.nav-logo span { display:block; font-size:.78rem; font-family:var(--font-corps); font-weight:400; color:var(--gris); letter-spacing:.1em; text-transform:uppercase; }
.nav-liens { display:flex; align-items:center; gap:2rem; list-style:none; }
.nav-liens a { font-size:.88rem; font-weight:500; color:var(--noir); text-transform:uppercase; letter-spacing:.08em; transition:color .2s; }
.nav-liens a:hover { color:var(--vert); }
.btn-rdv { background:var(--vert)!important; color:var(--blanc)!important; padding:.5rem 1.3rem!important; border-radius:30px!important; transition:background .2s!important; }
.btn-rdv:hover { background:#4a7059!important; }
.nav-burger { display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:4px; }
.nav-burger span { display:block; width:24px; height:2px; background:var(--noir); }
@media(max-width:768px){
  .nav-burger{display:flex;}
  .nav-liens{display:none;position:absolute;top:70px;left:0;right:0;background:var(--creme);flex-direction:column;padding:1.5rem 2rem 2rem;border-bottom:1px solid rgba(95,138,112,.15);gap:1.2rem;}
  .nav-liens.open{display:flex;}
}

/* HERO */
.hero { min-height:100vh; display:flex; align-items:center; position:relative; overflow:hidden; }
.hero-bg { position:absolute; inset:0; background-size:cover; background-position:center 30%; filter:brightness(.48); }
.hero-contenu { position:relative; z-index:1; max-width:1100px; margin:0 auto; padding:6rem 2rem 4rem; color:var(--blanc); }
.hero-badge { display:inline-block; background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.4); border-radius:30px; padding:.4rem 1.2rem; font-size:.8rem; letter-spacing:.15em; text-transform:uppercase; margin-bottom:1.5rem; }
.hero h1 { font-size:clamp(2.8rem,6vw,5rem); line-height:1.05; margin-bottom:1rem; }
.hero-sous-titre { font-size:1.1rem; opacity:.9; max-width:500px; margin-bottom:.8rem; }
.hero-adresse { font-size:.92rem; opacity:.75; margin-bottom:2.5rem; }
.hero-btns { display:flex; gap:1rem; flex-wrap:wrap; }
.btn-principal { background:var(--vert); color:var(--blanc); padding:.85rem 2rem; border-radius:30px; font-weight:600; font-size:.95rem; transition:background .2s,transform .2s; display:inline-block; }
.btn-principal:hover { background:#4a7059; transform:translateY(-2px); color:var(--blanc); }
.btn-secondaire { background:transparent; color:var(--blanc); padding:.85rem 2rem; border-radius:30px; font-weight:500; font-size:.95rem; border:2px solid rgba(255,255,255,.6); transition:border-color .2s,transform .2s; display:inline-block; }
.btn-secondaire:hover { border-color:var(--blanc); transform:translateY(-2px); color:var(--blanc); }

/* SECTIONS */
.section { padding:5rem 2rem; }
.section-contenu { max-width:1100px; margin:0 auto; }
.section-titre { font-size:clamp(2rem,4vw,3rem); color:var(--vert); margin-bottom:.5rem; }
.section-trait { width:50px; height:3px; background:var(--terre); margin:0 0 2.5rem; border-radius:2px; }
.centré { text-align:center; }
.centré .section-trait { margin:0 auto 2.5rem; }
.section-sombre { background:var(--vert); color:var(--blanc); }
.section-sombre .section-titre { color:var(--blanc); }

/* PRESTATIONS CARDS */
.prestations-grille { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.5rem; margin-top:2rem; }
.prestation-card { background:var(--blanc); border-radius:16px; padding:2rem; box-shadow:var(--ombre); transition:transform .3s,box-shadow .3s; border-top:4px solid var(--vert); }
.prestation-card:hover { transform:translateY(-6px); box-shadow:0 12px 40px rgba(0,0,0,.12); }
.prestation-icone { font-size:2.5rem; margin-bottom:1rem; }
.prestation-card h3 { font-size:1.25rem; color:var(--vert); margin-bottom:.6rem; }
.prestation-card p { color:var(--gris); font-size:.93rem; }
.prestation-tarif { margin-top:1.2rem; padding-top:1rem; border-top:1px solid var(--vert-clair); font-size:.9rem; color:var(--gris); }
.prestation-tarif strong { color:var(--vert); font-size:1.05rem; }

/* À PROPOS */
.apropos-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.apropos-photo { border-radius:16px; box-shadow:var(--ombre); width:100%; aspect-ratio:4/5; object-fit:cover; }
.apropos-texte p { color:var(--gris); margin-bottom:1.2rem; }
.apropos-badges { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.5rem; }
.badge { background:var(--vert-clair); color:var(--vert); padding:.4rem 1rem; border-radius:20px; font-size:.85rem; font-weight:500; }

/* CONTACT */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; }
.contact-info h3 { font-size:1.4rem; color:var(--vert); margin-bottom:1.5rem; font-family:var(--font-titre); }
.contact-item { display:flex; gap:1rem; margin-bottom:1.5rem; align-items:flex-start; }
.contact-item-icone { width:44px; height:44px; background:var(--vert-clair); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:1.2rem; }
.contact-item-texte strong { display:block; color:var(--noir); }
.contact-item-texte span { color:var(--gris); font-size:.93rem; }
.contact-form { background:var(--blanc); border-radius:16px; padding:2rem; box-shadow:var(--ombre); }
.contact-form h3 { font-size:1.4rem; color:var(--vert); margin-bottom:1.5rem; font-family:var(--font-titre); }
.form-group { margin-bottom:1.2rem; }
.form-group label { display:block; font-size:.83rem; font-weight:500; color:var(--gris); text-transform:uppercase; letter-spacing:.05em; margin-bottom:.4rem; }
.form-group input,.form-group textarea,.form-group select { width:100%; padding:.75rem 1rem; border:1.5px solid #e0e0e0; border-radius:8px; font-family:var(--font-corps); font-size:.95rem; background:var(--creme); color:var(--noir); transition:border-color .2s; }
.form-group input:focus,.form-group textarea:focus,.form-group select:focus { outline:none; border-color:var(--vert); }
.form-group textarea { resize:vertical; min-height:120px; }
.btn-envoyer { width:100%; background:var(--vert); color:var(--blanc); border:none; padding:.9rem; border-radius:30px; font-size:1rem; font-weight:600; cursor:pointer; font-family:var(--font-corps); transition:background .2s; }
.btn-envoyer:hover { background:#4a7059; }
.form-ok { background:#e8f5e9; color:#2e7d32; padding:.8rem 1rem; border-radius:8px; margin-bottom:1rem; font-weight:500; }
.form-err { background:#fce4e4; color:#c62828; padding:.8rem 1rem; border-radius:8px; margin-bottom:1rem; }

/* FOOTER */
.footer { background:var(--noir); color:rgba(255,255,255,.7); text-align:center; padding:2.5rem 2rem; font-size:.88rem; }
.footer-nom { font-family:var(--font-titre); font-size:1.3rem; color:var(--blanc); margin-bottom:.5rem; }
.footer a { color:rgba(255,255,255,.6); }
.footer a:hover { color:var(--blanc); }

/* BOUTON FLOTTANT MOBILE */
.btn-flottant { display:none; position:fixed; bottom:1.5rem; right:1.5rem; z-index:999; background:var(--vert); color:var(--blanc); padding:1rem 1.5rem; border-radius:30px; font-weight:700; box-shadow:0 4px 20px rgba(95,138,112,.5); }
.btn-flottant:hover { color:var(--blanc); }
@media(max-width:768px){
  .btn-flottant{display:block;}
  .apropos-grid,.contact-grid{grid-template-columns:1fr;}
  .prestations-grille{grid-template-columns:1fr;}
}