:root{
  --bg1:#f6fbfb;
  --bg2:#d9f0ee;
  --ink:#0b2a2a;
  --teal:#2f6f6b;
  --teal2:#1f5451;
  --stroke:#cfe7e6;
  --shadow: 0 18px 50px rgba(12,40,40,.12);
  --radius: 18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background: linear-gradient(120deg, var(--bg1), var(--bg2));
}
a{color:inherit}
.container{max-width:1100px; margin:0 auto; padding:0 20px}
.header{
  position:sticky; top:0; z-index:10;
  backdrop-filter: blur(10px);
  background: rgba(246,251,251,.72);
  border-bottom: 1px solid rgba(207,231,230,.8);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:16px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit}
.brand-title{font-weight:900; letter-spacing:.2px}
.brand-subtitle{font-size:12.5px; color:rgba(11,42,42,.7)}
.logo-mark{
  width:44px; height:44px; border-radius:14px;
  background: radial-gradient(circle at 30% 30%, #f9ffff, #d5eeee);
  border:1px solid rgba(207,231,230,.9);
  box-shadow: 0 10px 30px rgba(12,40,40,.10);
  position:relative;
}
.logo-mark:after{
  content:"";
  position:absolute; inset:9px;
  border-radius:12px;
  background:
    radial-gradient(circle at 50% 40%, rgba(47,111,107,.35), rgba(47,111,107,0) 60%),
    conic-gradient(from 0deg, rgba(47,111,107,.55), rgba(47,111,107,.10), rgba(47,111,107,.55));
  mask: radial-gradient(circle, transparent 52%, #000 53%);
  opacity:.35;
}
.menu{display:flex; gap:18px; align-items:center}
.menu a{text-decoration:none; color:rgba(11,42,42,.8); font-size:14px}
.menu a:hover{color:var(--teal)}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px;
  border-radius:999px;
  background: linear-gradient(180deg, var(--teal), var(--teal2));
  color:#fff; text-decoration:none;
  border:1px solid rgba(0,0,0,.05);
  box-shadow: 0 12px 30px rgba(31,84,81,.25);
  font-weight:800;
}
.btn:hover{filter:brightness(1.02)}
.btn-small{padding:10px 14px; font-size:13px}
.btn-ghost{
  background: transparent;
  color: var(--teal);
  border: 1px solid rgba(47,111,107,.25);
  box-shadow:none;
}
.btn-ghost:hover{background:rgba(47,111,107,.06)}
.burger{
  display:none;
  width:42px; height:42px;
  border-radius:14px;
  border:1px solid rgba(207,231,230,.9);
  background: rgba(255,255,255,.65);
}
.burger span{display:block; height:2px; margin:7px 10px; background:rgba(11,42,42,.7)}

.hero{position:relative; padding:68px 0 40px}
.hero-grid{display:grid; grid-template-columns: 1.2fr .8fr; gap:28px; align-items:center}
.kicker{color:rgba(11,42,42,.7); letter-spacing:.18em; text-transform:uppercase; font-size:12px}
h1{font-size:44px; line-height:1.05; margin:12px 0 12px}
.lead{font-size:18px; color:rgba(11,42,42,.75); max-width:58ch}
.cta-row{display:flex; gap:12px; flex-wrap:wrap; margin:18px 0 12px}
.quick-contact{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.pill{
  display:inline-flex; gap:8px; align-items:center;
  padding:10px 12px; border-radius:999px;
  background: rgba(255,255,255,.60);
  border:1px solid rgba(207,231,230,.95);
  text-decoration:none;
  color: rgba(11,42,42,.75);
}
.pill:hover{border-color: rgba(47,111,107,.35); color: rgba(11,42,42,.85)}
.trust{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin-top:18px}
.trust-item{
  display:flex; gap:10px; align-items:flex-start;
  padding:12px; border-radius:16px;
  background: rgba(255,255,255,.55);
  border:1px solid rgba(207,231,230,.85);
}
.trust-dot{
  width:10px; height:10px; border-radius:50%;
  background: var(--teal);
  margin-top:5px;
  box-shadow: 0 0 0 6px rgba(47,111,107,.12);
}
.trust span{color:rgba(11,42,42,.65); font-size:13px}

.hero-card{
  border-radius: var(--radius);
  background: rgba(255,255,255,.66);
  border:1px solid rgba(207,231,230,.95);
  box-shadow: var(--shadow);
  padding:26px;
  position:relative;
  overflow:hidden;
}
.hero-card:before{
  content:"";
  position:absolute; inset:-80px;
  background: radial-gradient(circle at 40% 30%, rgba(47,111,107,.16), transparent 60%);
  opacity:.9;
}
.knot{
  width:96px; height:96px; margin:0 auto 12px;
  border-radius:28px;
  background: radial-gradient(circle at 30% 30%, #ffffff, #cfe8e6);
  box-shadow: 0 16px 40px rgba(12,40,40,.18);
  border:1px solid rgba(207,231,230,.9);
  position:relative;
}
.knot:after{
  content:"";
  position:absolute; inset:16px;
  border-radius:22px;
  background: conic-gradient(from 0deg, rgba(47,111,107,.70), rgba(47,111,107,.18), rgba(47,111,107,.70));
  opacity:.55;
  mask: radial-gradient(circle, transparent 52%, #000 53%);
}
.hero-card-text{text-align:center; position:relative}
.hero-card-text .line1{letter-spacing:.22em; text-transform:uppercase; font-size:12px; color:rgba(11,42,42,.70)}
.hero-card-text .line2{
  font-size:30px; color:var(--teal); font-weight:900; margin:8px 0 6px;
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
}
.hero-card-text .line3{color:rgba(11,42,42,.65)}

.halo{
  position:absolute; inset:auto 0 -260px 0; height:520px;
  background: radial-gradient(circle at 50% 20%, rgba(47,111,107,.18), transparent 60%);
  pointer-events:none;
}
.section{padding:62px 0}
.section-alt{
  background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.18));
  border-top:1px solid rgba(207,231,230,.8);
  border-bottom:1px solid rgba(207,231,230,.8);
}
h2{font-size:34px; margin:0 0 10px}
.section-intro{max-width:74ch; color:rgba(11,42,42,.72); font-size:16.5px}

.cards{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; margin-top:18px}
.card{
  background: rgba(255,255,255,.70);
  border:1px solid rgba(207,231,230,.95);
  border-radius: var(--radius);
  padding:18px;
  box-shadow: 0 14px 38px rgba(12,40,40,.10);
}
.card h3{margin:0 0 10px}
.card ul, .card ol{margin:0; padding-left:18px; color:rgba(11,42,42,.75)}
.note{margin-top:10px; color:rgba(11,42,42,.62); font-size:13.5px}

.values{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; margin-top:18px}
.value{
  padding:16px; border-radius: var(--radius);
  background: rgba(255,255,255,.55);
  border:1px solid rgba(207,231,230,.9);
}
.value-icon{
  width:38px; height:38px; border-radius:14px;
  display:grid; place-items:center;
  background: rgba(47,111,107,.10);
  color: var(--teal);
  font-weight:900;
  margin-bottom:10px;
}
.value p{color:rgba(11,42,42,.72); margin:6px 0 0}

.callout{
  margin-top:18px;
  display:flex; gap:16px; align-items:flex-start;
  padding:18px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.70);
  border:1px solid rgba(207,231,230,.95);
  box-shadow: 0 14px 38px rgba(12,40,40,.10);
}
.callout-knot{
  width:64px; height:64px; border-radius:22px;
  background: radial-gradient(circle at 30% 30%, #ffffff, #cfe8e6);
  border:1px solid rgba(207,231,230,.9);
  box-shadow: 0 16px 40px rgba(12,40,40,.16);
}

.pricing{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; margin-top:18px}
.price-card{
  padding:18px; border-radius: var(--radius);
  background: rgba(255,255,255,.70);
  border:1px solid rgba(207,231,230,.95);
  box-shadow: 0 14px 38px rgba(12,40,40,.10);
}
.price-card.highlight{
  border-color: rgba(47,111,107,.35);
  box-shadow: 0 18px 50px rgba(31,84,81,.18);
}
.price{font-size:34px; margin:10px 0; color:var(--teal); font-weight:900}
.muted{color:rgba(11,42,42,.62)}
.small{font-size:12.5px}

.faq{margin-top:14px; display:grid; gap:10px}
details{
  border-radius: var(--radius);
  background: rgba(255,255,255,.65);
  border:1px solid rgba(207,231,230,.95);
  padding:14px 16px;
}
summary{cursor:pointer; font-weight:900; color:rgba(11,42,42,.85)}
details p{margin:10px 0 0; color:rgba(11,42,42,.70)}

.contact{display:grid; grid-template-columns: 1fr 1fr; gap:16px; align-items:start}
.contact-box{
  display:grid; gap:10px;
  background: rgba(255,255,255,.65);
  border:1px solid rgba(207,231,230,.95);
  border-radius: var(--radius);
  padding:16px;
  box-shadow: 0 14px 38px rgba(12,40,40,.10);
}
.form{
  background: rgba(255,255,255,.75);
  border:1px solid rgba(207,231,230,.95);
  border-radius: var(--radius);
  padding:16px;
  box-shadow: 0 14px 38px rgba(12,40,40,.10);
}

.footer{
  padding:26px 0;
  border-top:1px solid rgba(207,231,230,.8);
  background: rgba(246,251,251,.75);
}
.footer-grid{display:grid; grid-template-columns: 1fr auto auto; gap:14px; align-items:center}
.footer-links{display:flex; gap:12px; flex-wrap:wrap}
.footer-links a{color:rgba(11,42,42,.7); text-decoration:none}
.footer-links a:hover{color:var(--teal)}
.footer-title{font-weight:900}
.footer a{color:rgba(11,42,42,.7); text-decoration:none}
.footer a:hover{color:var(--teal)}

.legal{
  padding:26px;
  background: rgba(255,255,255,.70);
  border:1px solid rgba(207,231,230,.95);
  border-radius: var(--radius);
  box-shadow: 0 14px 38px rgba(12,40,40,.10);
}
.legal h1{font-size:34px; margin:0 0 10px}
.legal h2{font-size:20px; margin:18px 0 8px}
.legal p, .legal li{color:rgba(11,42,42,.72); line-height:1.6}
.legal a{color:var(--teal)}
.legal .muted{color:rgba(11,42,42,.62)}

@media (max-width: 940px){
  .hero-grid{grid-template-columns:1fr}
  .trust{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .values{grid-template-columns:1fr 1fr}
  .pricing{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
  h1{font-size:38px}
}
@media (max-width: 720px){
  .menu{display:none}
  .menu.open{
    display:flex;
    position:absolute;
    top:70px; right:20px; left:20px;
    flex-direction:column;
    background: rgba(255,255,255,.85);
    border:1px solid rgba(207,231,230,.95);
    border-radius:18px;
    padding:14px;
    box-shadow: var(--shadow);
  }
  .burger{display:block}
}


/* --- Logo image (nœud) --- */
.logo-img{
  width:44px;
  height:44px;
  object-fit:contain;
  display:block;
}
@media (max-width: 720px){
  .logo-img{ width:36px; height:36px; }
}
/* If an old CSS logo placeholder exists, hide it */
.logo-mark{ display:none !important; }


/* --- V2 logo sizing fixes --- */
.logo-img{
  width:56px !important;
  height:56px !important;
  object-fit:contain;
  display:block;
}
@media (max-width: 720px){
  .logo-img{
    width:46px !important;
    height:46px !important;
  }
}

/* Hero logo image (replaces the CSS knot block) */
.hero-logo{
  width:min(260px, 70%);
  height:auto;
  display:block;
  margin: 0 auto 12px;
  border-radius: 22px;
  box-shadow: 0 16px 40px rgba(12,40,40,.18);
}

/* Hide old generated knot placeholder if it still exists */
.knot{ display:none !important; }


/* --- Portrait thérapeute --- */
.portrait-wrap{
  margin: 32px auto 0;
  max-width: 420px;
  text-align: center;
}
.portrait-img{
  width: 100%;
  height: auto;
  border-radius: 28px;
  box-shadow: 0 18px 50px rgba(12,40,40,.22);
}
@media (max-width:720px){
  .portrait-wrap{
    max-width: 320px;
  }
}


/* --- HERO top layout (card + photo before text) --- */
.hero-top{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:24px;
  align-items:center;
  margin-bottom:32px;
}
@media (max-width: 900px){
  .hero-top{
    grid-template-columns:1fr;
  }
}

/* Portrait refinement */
.portrait-img{
  object-position: center top;
}


/* --- Typographie signature --- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,500&display=swap');

.hero-card-text .line2{
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 500;
  letter-spacing: .5px;
}


/* --- Fond hypnotique doux --- */
.hero{
  background:
    radial-gradient(circle at center, rgba(255,255,255,.75), rgba(255,255,255,.55)),
    url('assets/fond-hypnose.jpg') center/cover no-repeat;
}