/* Aurélie Cormier — Psychologue / Thérapeute
   Palette "Blanc naturel" : fond blanc, touches roses (univers enfant) et vertes (univers adulte) */

:root{
  --white: #FFFFFF;

  --pink-50: #FBEAEC;
  --pink-100: #F5D6DC;
  --pink-200: #EACBD2;
  --pink-600: #C97C90;
  --pink-700: #A85D72;

  --green-50: #EAF2E9;
  --green-100: #D9EAD6;
  --green-200: #C7DCC3;
  --green-600: #5E8862;
  --green-700: #47694B;

  --ink: #23281F;
  --ink-soft: #5B655A;
  --ink-faint: #8A9186;
  --border: #E8E3DE;

  --font-child: 'Baloo 2', cursive;
  --font-adult: 'Petrona', serif;
  --font-body: 'Karla', system-ui, sans-serif;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width: 100%; display: block; }
::selection{ background: var(--green-600); color: var(--white); }
a{ color: var(--green-700); text-decoration: none; }
a:hover{ color: var(--green-600); }

.wrap{ max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px); }

/* ---------- NAV ---------- */
.nav{
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px clamp(20px, 5vw, 64px);
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,0.82);
  border-bottom: 1px solid var(--border);
}
.nav-logo{ font-family: var(--font-adult); font-size: 19px; font-weight: 600; color: var(--ink); }
.nav-links{ display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); }
.nav-link{ font-size: 14px; font-weight: 500; color: var(--ink-soft); }
.nav-link:hover{ color: var(--ink); }
.nav-cta{
  font-size: 14px; font-weight: 700; color: var(--white);
  background: var(--green-700); padding: 10px 18px; border-radius: 999px;
}
.nav-cta:hover{ color: var(--white); background: var(--green-600); }
@media (max-width: 760px){
  .nav-links .nav-link{ display: none; }
}

/* ---------- HERO — sentier bifurqué ---------- */
.hero{ position: relative; min-height: 100vh; display: flex; flex-wrap: wrap; }
.hero-panel{
  flex: 1 1 320px; min-height: 62vh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(28px, 5vw, 68px);
  padding-bottom: clamp(56px, 8vh, 120px);
  cursor: pointer;
  transition: flex .6s cubic-bezier(.2,.8,.2,1);
  position: relative; overflow: hidden;
}
.hero-panel:hover{ flex: 1.18 1 320px; }
.hero-panel.enfant{ background: var(--pink-50); }
.hero-panel.adulte{ background: var(--green-50); }

.hero-photo{
  overflow: hidden; flex-shrink: 0;
  margin-top: clamp(220px, 26vh, 280px); margin-bottom: auto;
  width: clamp(90px,12vw,150px); height: clamp(90px,12vw,150px);
  border-radius: 24px; align-self: flex-start;
}
.hero-photo img{ width: 100%; height: 100%; object-fit: cover; filter: saturate(.82); }

.hero-eyebrow{ font-size: 14px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 14px; position: relative; }
.hero-panel.enfant .hero-eyebrow{ font-family: var(--font-child); color: var(--pink-700); }
.hero-panel.adulte .hero-eyebrow{ font-family: var(--font-adult); color: var(--green-700); }

.hero-title{ font-weight: 700; font-size: clamp(36px, 5.2vw, 72px); line-height: .98; margin: 0; color: var(--ink); position: relative; }
.hero-panel.enfant .hero-title{ font-family: var(--font-child); font-weight: 700; }
.hero-panel.adulte .hero-title{ font-family: var(--font-adult); font-weight: 500; }
.hero-panel.adulte .hero-title em{ font-style: italic; color: var(--green-700); }

.hero-sub{ max-width: 34ch; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.55; color: var(--ink-soft); margin: 18px 0 26px; position: relative; }

.hero-link{ display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; position: relative; }
.hero-panel.enfant .hero-link{ font-family: var(--font-child); color: var(--pink-700); }
.hero-panel.adulte .hero-link{ font-family: var(--font-adult); color: var(--green-700); }
.hero-link span{ font-size: 22px; }

.hero-badge{
  position: absolute; top: clamp(84px, 16vh, 150px); left: 50%; transform: translateX(-50%);
  text-align: center; z-index: 5; pointer-events: none; width: min(92vw, 720px);
}
.hero-badge-pill{
  display: inline-block; background: var(--white); border: 1px solid var(--border);
  border-radius: 999px; padding: 9px 22px;
}
.hero-badge-pill span{ font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); font-weight: 700; }
.hero-badge-line{ font-family: var(--font-adult); font-style: italic; font-size: clamp(15px, 1.4vw, 19px); color: var(--ink); margin: 20px auto 0; max-width: 26ch; }

/* ---------- reveal ---------- */
[data-reveal]{ opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
[data-reveal].is-visible{ opacity: 1; transform: none; }

/* ---------- APPROCHE ---------- */
.section{ padding: clamp(70px, 12vh, 150px) clamp(20px, 5vw, 64px); }
.section-eyebrow{ font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--green-700); margin: 0 0 20px; }

.approche-grid{ max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 48px; }
.approche-text{ max-width: 760px; }
.approche-text h2{ font-family: var(--font-adult); font-weight: 500; font-size: clamp(30px, 4vw, 54px); line-height: 1.08; margin: 0 0 28px; color: var(--ink); text-wrap: balance; }
.approche-text p{ margin: 0; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.72; color: var(--ink-soft); max-width: 60ch; }
.approche-text p + p{ margin-top: 20px; }

.approche-photos{ justify-self: end; display: flex; gap: 4px; align-items: flex-start; }
.approche-photos img{ filter: saturate(.82); }
.photo-pink{ width: clamp(120px,15vw,170px); height: clamp(150px,19vw,220px); object-fit: cover; margin-top: 34px; }
.photo-green{ width: clamp(120px,15vw,170px); height: clamp(150px,19vw,220px); object-fit: cover; }

blockquote.approche-quote{ max-width: 460px; margin: 40px 0 0; border-left: 3px solid var(--pink-600); padding: 8px 0 8px 26px; }
blockquote.approche-quote p{ font-family: var(--font-adult); font-style: italic; font-size: clamp(21px, 2.4vw, 29px); line-height: 1.34; color: var(--green-700); margin: 0; text-wrap: pretty; }

.chips{ max-width: 1180px; margin: clamp(50px, 8vh, 90px) auto 0; display: flex; flex-wrap: wrap; gap: 12px; }
.chips-label{ font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); width: 100%; margin-bottom: 6px; }
.chip{ font-size: 15px; padding: 9px 18px; border-radius: 999px; border: 1px solid var(--border); }
.chip.child{ font-family: var(--font-child); font-weight: 600; background: var(--pink-50); color: var(--pink-700); border-color: var(--pink-200); }
.chip.adult{ font-family: var(--font-adult); font-size: 16px; background: var(--green-700); color: var(--white); border-color: var(--green-700); }

/* ---------- SÉANCE — frise ---------- */
.seance{ background: var(--pink-50); position: relative; overflow: hidden; }
.seance .wrap-narrow{ max-width: 900px; margin: 0 auto; position: relative; }
.seance h2{ font-family: var(--font-adult); font-weight: 500; font-size: clamp(28px, 3.6vw, 48px); line-height: 1.1; margin: 0 0 clamp(44px,7vh,80px); color: var(--ink); max-width: 20ch; text-wrap: balance; }
.timeline{ position: relative; padding-left: clamp(30px, 5vw, 64px); }
.timeline-rail{ position: absolute; left: clamp(9px,1.5vw,18px); top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--green-600), var(--pink-600)); }
.timeline-item{ position: relative; margin-bottom: 44px; }
.timeline-item:last-child{ margin-bottom: 0; }
.timeline-dot{ position: absolute; left: calc(-1 * clamp(30px,5vw,64px) + clamp(2px,0.6vw,10px)); top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--green-700); border: 4px solid var(--pink-50); box-shadow: 0 0 0 2px var(--green-700); }
.timeline-item.alt .timeline-dot{ background: var(--pink-600); box-shadow: 0 0 0 2px var(--pink-600); }
.timeline-item h3{ font-family: var(--font-body); font-weight: 700; font-size: clamp(19px,1.7vw,23px); margin: 0 0 8px; color: var(--ink); }
.timeline-item p{ margin: 0; font-size: 16px; line-height: 1.62; color: var(--ink-soft); max-width: 56ch; }

/* ---------- DOMAINES ---------- */
.domaines-head{ display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(36px,6vh,64px); }
.domaines-head h2{ font-family: var(--font-adult); font-weight: 500; font-size: clamp(28px,3.6vw,48px); line-height: 1.1; margin: 0; color: var(--ink); max-width: 18ch; text-wrap: balance; }
.pills{ display: flex; gap: 8px; background: var(--white); border: 1px solid var(--border); border-radius: 999px; padding: 5px; }
.pill{ font-family: var(--font-body); font-size: 14px; font-weight: 700; padding: 9px 18px; border-radius: 999px; border: none; cursor: pointer; background: transparent; color: var(--ink-soft); transition: all .25s ease; }
.pill.active-enfant{ background: var(--pink-600); color: var(--white); }
.pill.active-adulte{ background: var(--green-700); color: var(--white); }
.pill.active-both{ background: var(--ink); color: var(--white); }

.domaines-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 56px); align-items: start; }
.domaines-col{ transition: opacity .5s ease, filter .5s ease; border-radius: 22px; padding: clamp(20px,2.4vw,30px); }
.domaines-col.dim{ opacity: .32; filter: saturate(.4); }
.domaines-col.enfant{ background: var(--pink-50); }
.domaines-col.adulte{ background: var(--green-50); }
.domaines-col-head{ display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.domaines-col-dot{ width: 12px; height: 12px; border-radius: 50%; }
.domaines-col.enfant .domaines-col-dot{ background: var(--pink-600); }
.domaines-col.adulte .domaines-col-dot{ background: var(--green-700); }
.domaines-col-head span{ font-weight: 600; font-size: clamp(18px,1.6vw,22px); }
.domaines-col.enfant .domaines-col-head span{ font-family: var(--font-child); color: var(--pink-700); }
.domaines-col.adulte .domaines-col-head span{ font-family: var(--font-adult); font-weight: 500; color: var(--green-700); }
.domaines-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.domaines-list li{ font-size: clamp(17px,1.7vw,21px); color: var(--ink); padding: 12px 0; border-bottom: 1px dashed var(--border); display: flex; align-items: center; gap: 10px; }
.domaines-list li:last-child{ border-bottom: none; }
.domaines-col.enfant .domaines-list li{ font-family: var(--font-child); font-weight: 500; }
.domaines-col.adulte .domaines-list li{ font-family: var(--font-adult); }
.tag-cross{ font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--white); background: var(--ink); padding: 3px 9px; border-radius: 999px; }
@media (max-width: 720px){ .domaines-grid{ grid-template-columns: 1fr; } }

/* ---------- PRATIQUE / CONTACT (accueil) ---------- */
.pratique{ background: var(--green-700); color: var(--white); position: relative; overflow: hidden; }
.pratique-grid{ max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(36px,6vw,90px); align-items: start; position: relative; }
.pratique h2{ font-family: var(--font-adult); font-weight: 500; font-size: clamp(30px,4.2vw,58px); line-height: 1.06; margin: 0 0 28px; color: var(--white); text-wrap: balance; }
.pratique-eyebrow{ font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--green-100); margin: 0 0 18px; }
.pratique p.lead{ font-size: clamp(16px,1.35vw,19px); line-height: 1.7; color: var(--green-50); max-width: 46ch; margin: 0 0 32px; }
.pratique-actions{ display: flex; flex-wrap: wrap; gap: 14px; }
.btn-primary{ display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; color: var(--green-700); background: var(--white); padding: 15px 26px; border-radius: 999px; }
.btn-primary:hover{ color: var(--green-700); background: var(--pink-100); }
.btn-outline{ display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; color: var(--white); border: 1px solid rgba(255,255,255,0.5); padding: 15px 26px; border-radius: 999px; }
.btn-outline:hover{ color: var(--white); border-color: var(--white); }

.pratique-infos{ display: flex; flex-direction: column; gap: 2px; border-top: 1px solid rgba(255,255,255,0.22); }
.pratique-row{ display: flex; justify-content: space-between; gap: 20px; padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,0.22); }
.pratique-row .label{ font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--green-100); }
.pratique-row .value{ text-align: right; font-size: 16px; line-height: 1.5; color: var(--white); }
.pratique-links{ display: flex; gap: 18px; padding: 22px 0 0; }
.pratique-links a{ font-size: 15px; font-weight: 700; color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.pratique-map{ margin-top: 22px; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,0.25); }
.pratique-map iframe{ display: block; width: 100%; height: 200px; border: 0; filter: saturate(.85); }

/* ---------- FOOTER ---------- */
.footer{ background: var(--ink); color: var(--green-100); padding: 36px clamp(20px,5vw,64px); display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; font-size: 14px; }
.footer a{ color: var(--white); }
.footer-name{ font-family: var(--font-adult); font-size: 17px; color: var(--white); }

/* ---------- LE CABINET ---------- */
.cabinet-hero{ padding: clamp(120px,18vh,190px) clamp(20px,5vw,64px) clamp(48px,7vh,80px); background: var(--pink-50); border-bottom: 1px solid var(--border); }
.cabinet-hero h1{ font-family: var(--font-adult); font-weight: 500; font-size: clamp(34px,5.4vw,70px); line-height: 1.04; margin: 0; color: var(--ink); max-width: 17ch; text-wrap: balance; }
.cabinet-photo-strip{ display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; }
.cabinet-photo-strip img{ width: 100%; height: clamp(140px,22vw,240px); object-fit: cover; }
.cabinet-grid{ max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(36px,6vw,90px); align-items: start; }
.cabinet-block h2{ font-family: var(--font-adult); font-weight: 500; font-size: clamp(24px,2.6vw,32px); margin: 0 0 14px; color: var(--ink); }
.cabinet-block p{ font-size: 17px; line-height: 1.7; color: var(--ink-soft); max-width: 52ch; margin: 0; }
.cabinet-block + .cabinet-block{ margin-top: 34px; }
.cabinet-aside{ background: var(--green-700); color: var(--white); border-radius: 20px; padding: clamp(28px,3.5vw,44px); overflow: hidden; }
.cabinet-aside-row{ padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,0.22); }
.cabinet-aside-row:last-of-type{ border-bottom: none; }
.cabinet-aside .label{ display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--green-100); margin-bottom: 8px; }
.cabinet-aside .value{ font-size: 17px; line-height: 1.5; }
.cabinet-map{ margin: -4px -4px 18px; }
.cabinet-map iframe{ width: calc(100% + 8px); height: 220px; border: 0; display: block; }

/* ---------- CONTACT ---------- */
.contact-hero{ min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: clamp(120px,16vh,180px) clamp(20px,5vw,64px) clamp(60px,10vh,120px); background: var(--green-50); position: relative; overflow: hidden; }
.contact-hero h1{ font-family: var(--font-adult); font-weight: 500; font-size: clamp(36px,6vw,80px); line-height: 1.02; margin: 0 0 44px; color: var(--ink); max-width: 14ch; text-wrap: balance; }
.contact-cards{ display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: clamp(20px,3vw,40px); max-width: 900px; }
.contact-card{ display: block; border-radius: 18px; padding: 28px; }
.contact-card.primary{ background: var(--pink-600); color: var(--white); }
.contact-card.primary .k{ color: var(--pink-50); }
.contact-card.secondary{ background: var(--white); border: 1px solid var(--border); color: var(--ink); }
.contact-card .k{ display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 12px; color: var(--ink-faint); }
.contact-card .t{ display: block; font-family: var(--font-child); font-weight: 700; font-size: 25px; line-height: 1.1; }
.contact-card.secondary .t{ font-family: var(--font-adult); font-weight: 500; font-size: 28px; color: var(--green-700); }
.contact-card .d{ display: block; font-size: 15px; line-height: 1.5; margin-top: 12px; }
.contact-card.primary .d{ color: rgba(255,255,255,0.85); }
.contact-card.secondary .d{ color: var(--ink-soft); }
.contact-meta{ margin-top: clamp(36px,6vh,64px); display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.contact-meta .label{ display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 10px; }
.contact-meta .value{ font-size: 17px; line-height: 1.6; color: var(--ink); }
.contact-meta a.more{ font-size: 16px; font-weight: 700; align-self: center; color: var(--green-700); }