/* =========================================================
   LUCIE SOPHROLOGUE — style.css
   Ivoire chaud, sauge, terracotta doux. Serif Fraunces + Public Sans.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Public+Sans:wght@400;500;600&family=Caveat:wght@500&display=swap');

:root{
  --ivoire: #F6F2E9;
  --ivoire-2: #F1ECE0;
  --beige: #E7DDC8;
  --sauge: #7E8B6E;
  --sauge-doux: #AEB89C;
  --encre: #2B2620;
  --encre-80: rgba(43,38,32,.8);
  --encre-60: rgba(43,38,32,.6);
  --terracotta: #BE8360;
  --bleu-nuit: #28323F;
  --ligne: rgba(43,38,32,.14);
  --blanc: #FFFDF8;

  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --script: 'Caveat', cursive;

  --maxw: 1120px;
  --pad: clamp(20px, 5vw, 64px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ivoire);
  color:var(--encre);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.12;
  margin:0 0 .5em;
  letter-spacing:-0.01em;
}
p{margin:0 0 1em; max-width:64ch}
.container{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad)}
:focus-visible{outline:2px solid var(--terracotta); outline-offset:3px}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
}

/* ---------- reveal on scroll (one subtle pattern, reused) ---------- */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease}
.reveal.is-visible{opacity:1; transform:translateY(0)}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:40;
  background:rgba(246,242,233,.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--ligne);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  height:74px;
}
.logo{
  font-family:var(--serif); font-size:1.15rem; font-weight:600;
  letter-spacing:.02em;
}
.logo span{display:block; font-family:var(--sans); font-weight:400; font-size:.66rem; letter-spacing:.06em; color:var(--encre-60); margin-top:2px}
.nav-desktop{display:none}
@media (min-width:860px){
  .nav-desktop{display:flex; gap:2.1rem}
  .nav-desktop a{
    font-size:.93rem; position:relative; padding:6px 0; color:var(--encre-80);
  }
  .nav-desktop a:hover{color:var(--encre)}
  .nav-desktop a.active{color:var(--encre)}
  .nav-desktop a.active::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--terracotta);
  }
}
.nav-toggle{
  display:flex; align-items:center; gap:.5rem;
  background:none; border:1px solid var(--ligne); border-radius:999px;
  padding:9px 16px; font-family:var(--sans); font-size:.85rem; color:var(--encre);
  cursor:pointer;
}
@media (min-width:860px){ .nav-toggle{display:none} }
.nav-toggle .bar{width:16px; height:1.5px; background:var(--encre); position:relative}
.nav-toggle .bar::before,.nav-toggle .bar::after{content:""; position:absolute; left:0; width:16px; height:1.5px; background:var(--encre)}
.nav-toggle .bar::before{top:-5px}
.nav-toggle .bar::after{top:5px}

.nav-mobile{
  display:none; position:fixed; inset:74px 0 0 0; background:var(--ivoire);
  z-index:39; overflow-y:auto;
}
.nav-mobile.open{display:block}
.nav-mobile .container{padding-top:2rem; padding-bottom:2rem; display:flex; flex-direction:column; gap:0}
.nav-mobile a{
  font-family:var(--serif); font-size:1.5rem; padding:.7em 0; border-bottom:1px solid var(--ligne);
}
.nav-mobile .nav-sub{font-family:var(--sans); font-size:.85rem; color:var(--encre-60); margin-top:1.6rem; margin-bottom:.4rem}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--sans); font-weight:600; font-size:.95rem;
  padding:14px 26px; border-radius:3px; border:1px solid transparent;
  cursor:pointer; transition:background .25s ease, color .25s ease, border-color .25s ease;
  min-height:48px;
}
.btn-primary{background:var(--encre); color:var(--ivoire)}
.btn-primary:hover{background:var(--terracotta)}
.btn-outline{border-color:var(--encre); color:var(--encre); background:transparent}
.btn-outline:hover{background:var(--encre); color:var(--ivoire)}
.btn-sauge{background:var(--sauge); color:var(--blanc)}
.btn-sauge:hover{background:#6c785e}
.btn-block{width:100%; justify-content:center}

/* ---------- hero ---------- */
.hero{
  padding:64px 0 56px;
  border-bottom:1px solid var(--ligne);
}
.hero-eyebrow{font-size:.8rem; color:var(--sauge); letter-spacing:.02em; margin-bottom:1.1rem}
.hero h1{font-size:clamp(2.3rem, 6vw, 3.6rem)}
.hero .lede{font-size:clamp(1.05rem,2.4vw,1.25rem); color:var(--encre-80); max-width:46ch}
.hero-photo{
  margin-top:2.2rem; aspect-ratio:16/9; width:100%;
  border-radius:2px; overflow:hidden;
}

/* ---------- placeholder image block ---------- */
.ph{
  background:
    repeating-linear-gradient(135deg, rgba(43,38,32,.05) 0 12px, transparent 12px 24px),
    var(--beige);
  border:1px dashed rgba(43,38,32,.35);
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--encre-60); font-size:.85rem; padding:1.2rem;
  min-height:180px;
}

/* ---------- three paths (accueil) ---------- */
.paths{padding:72px 0}
.paths-head{max-width:56ch; margin-bottom:2.6rem}
.path-row{
  display:grid; grid-template-columns:1fr; gap:0;
  border-top:1px solid var(--ligne);
}
.path{
  display:grid; grid-template-columns:1fr; gap:1.4rem;
  padding:2.4rem 0; border-bottom:1px solid var(--ligne);
  align-items:center;
}
@media (min-width:760px){
  .path{grid-template-columns:1fr 1.15fr; gap:3rem}
  .path.reverse{direction:rtl}
  .path.reverse > *{direction:ltr}
}
.path-visual{display:block}
.path-visual .ph{aspect-ratio:4/3}
.path-num{font-family:var(--serif); font-size:.85rem; color:var(--sauge); margin-bottom:.6rem; display:block}
.path h3{font-size:1.7rem; margin-bottom:.5rem}
.path h3 a:hover{color:var(--terracotta)}
.path .meta{font-size:.85rem; color:var(--encre-60); margin-bottom:.9rem}
.path p{color:var(--encre-80)}

/* ---------- section generic ---------- */
.section{padding:64px 0}
.section-tight{padding:44px 0}
.section-alt{background:var(--ivoire-2)}
.divider{border:none; border-top:1px solid var(--ligne); margin:0}

/* transition line */
.transition-line{
  padding:70px 0; text-align:center; border-top:1px solid var(--ligne); border-bottom:1px solid var(--ligne);
}
.transition-line p{
  font-family:var(--serif); font-size:clamp(1.3rem,3.2vw,1.9rem); margin:0 auto 1.6rem; max-width:20ch;
}

/* ---------- four temps grid ---------- */
.temps-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--ligne); margin:2rem 0}
@media (min-width:700px){.temps-grid{grid-template-columns:repeat(4,1fr)}}
.temps-grid > div{background:var(--ivoire); padding:1.8rem 1.2rem; text-align:center}
.temps-grid .verbe{font-family:var(--serif); font-size:1.15rem}

/* ---------- info bar ---------- */
.info-bar{
  display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; font-size:.95rem; color:var(--encre-80);
  padding:1rem 0 0;
}
.info-bar span{white-space:nowrap}
.info-bar b{color:var(--encre)}

/* ---------- offer intro block ---------- */
.offer-head{padding:56px 0 8px}
.offer-head .lede{color:var(--encre-80)}

/* ---------- checklist ---------- */
.list-plain{list-style:none; margin:0; padding:0}
.list-plain li{
  padding:.9rem 0; border-bottom:1px solid var(--ligne); padding-left:1.4rem; position:relative;
}
.list-plain li::before{
  content:""; position:absolute; left:0; top:1.15rem; width:6px; height:6px; border-radius:50%; background:var(--sauge);
}

/* ---------- callout (sécurité) ---------- */
.callout{
  border-left:3px solid var(--terracotta); padding:1.2rem 1.6rem; background:var(--ivoire-2);
  max-width:70ch;
}
.callout p{margin:0; color:var(--encre-80)}

/* ---------- two col ---------- */
.two-col{display:grid; grid-template-columns:1fr; gap:2.4rem}
@media (min-width:760px){.two-col{grid-template-columns:1fr 1fr; gap:3.5rem}}

/* ---------- cta band ---------- */
.cta-band{
  padding:60px 0; text-align:center; background:var(--encre); color:var(--ivoire);
}
.cta-band h2{color:var(--ivoire); font-size:clamp(1.6rem,3.6vw,2.3rem)}
.cta-band p{color:rgba(246,242,233,.75); margin-left:auto; margin-right:auto}
.cta-band .btn-primary{background:var(--ivoire); color:var(--encre)}
.cta-band .btn-primary:hover{background:var(--terracotta); color:var(--ivoire)}

/* ---------- MOONRA specific ---------- */
.moonra{--m-bg:var(--bleu-nuit); --m-fg:var(--blanc)}
.moonra-hero{background:var(--bleu-nuit); color:var(--blanc); padding:76px 0 64px}
.moonra-hero .container{}
.moonra-sig{font-family:var(--script); font-size:1.5rem; color:#C9A98C; margin-bottom:.4rem; display:block}
.moonra-hero h1{color:var(--blanc)}
.moonra-hero .lede{color:rgba(255,253,248,.75)}
.themes-grid{display:grid; grid-template-columns:1fr; gap:1px; background:var(--ligne)}
@media (min-width:700px){.themes-grid{grid-template-columns:repeat(2,1fr)}}
.theme-card{background:var(--ivoire); padding:2.2rem}
.theme-card h3{font-size:1.25rem; margin-bottom:.5rem}
.platforms{display:grid; grid-template-columns:1fr; gap:1rem; max-width:560px}
@media (min-width:560px){.platforms{grid-template-columns:1fr 1fr}}
.platform-btn{
  border:1px solid var(--ligne); padding:1.3rem 1.4rem; text-align:center; font-weight:600;
  transition:border-color .2s ease, background .2s ease;
}
.platform-btn:hover{border-color:var(--encre); background:var(--ivoire-2)}

/* ---------- MOONRA — accompagnement personnalisé ---------- */
.personal-panel{
  border:1px solid var(--ligne); background:var(--ivoire-2);
  padding:2.6rem clamp(1.4rem,4vw,3.2rem);
  display:grid; grid-template-columns:1fr; gap:1.6rem;
}
@media (min-width:760px){.personal-panel{grid-template-columns:1.2fr 1fr; align-items:center; gap:2.6rem}}
.personal-panel h2{font-size:1.5rem}
.personal-panel .kicker{font-size:.8rem; color:var(--sauge); display:block; margin-bottom:.6rem}

/* ---------- resource page (discrète) ---------- */
.resource-hero{padding:52px 0 8px}
.resource-hero .kicker{font-size:.8rem; color:var(--sauge); display:block; margin-bottom:.8rem}
.resource-hero h1{font-size:clamp(1.9rem,4.5vw,2.6rem)}

/* ---------- about ---------- */
.about-grid{display:grid; grid-template-columns:1fr; gap:2.6rem; align-items:start}
@media (min-width:760px){.about-grid{grid-template-columns:0.85fr 1.15fr}}
.about-grid .ph{aspect-ratio:3/4}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--ligne); padding:52px 0 34px; background:var(--ivoire-2)}
.footer-grid{display:grid; grid-template-columns:1fr; gap:2.2rem}
@media (min-width:700px){.footer-grid{grid-template-columns:1.2fr 1fr 1fr 1fr; gap:1.8rem}}
.footer-grid h4{font-family:var(--sans); font-size:.78rem; letter-spacing:.04em; color:var(--encre-60); margin:0 0 .9rem; text-transform:none}
.footer-links{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem}
.footer-brand{font-family:var(--serif); font-size:1.2rem; margin-bottom:.4rem}
.footer-bottom{
  margin-top:2.6rem; padding-top:1.6rem; border-top:1px solid var(--ligne);
  display:flex; flex-wrap:wrap; gap:.8rem 1.6rem; justify-content:space-between; font-size:.82rem; color:var(--encre-60);
}
.footer-bottom a:hover{color:var(--encre)}

/* ---------- sticky mobile CTA (sophro page only) ---------- */
.sticky-cta{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:38;
  background:rgba(246,242,233,.96); backdrop-filter:blur(6px);
  border-top:1px solid var(--ligne); padding:.7rem var(--pad);
}
@media (max-width:759px){ .sticky-cta.active{display:block} }

/* ---------- bandeau cookies ---------- */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:var(--encre); color:var(--ivoire);
  padding:1.2rem var(--pad);
  display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between;
  box-shadow:0 -2px 12px rgba(0,0,0,.15);
}
.cookie-banner p{margin:0; max-width:60ch; font-size:.88rem; color:rgba(246,242,233,.85)}
.cookie-banner-actions{display:flex; gap:.8rem; flex-shrink:0}
.cookie-banner .btn-outline{border-color:var(--ivoire); color:var(--ivoire)}
.cookie-banner .btn-outline:hover{background:var(--ivoire); color:var(--encre)}
.cookie-banner .btn-primary{background:var(--ivoire); color:var(--encre)}
.cookie-banner .btn-primary:hover{background:var(--terracotta); color:var(--ivoire)}
@media (max-width:600px){ .cookie-banner{flex-direction:column; align-items:stretch; text-align:center} }

/* ---------- legal pages ---------- */
.legal-body{max-width:70ch}
.legal-body h2{font-size:1.3rem; margin-top:2.2rem}
.legal-body p, .legal-body li{color:var(--encre-80)}

/* ---------- placeholder tag inline ---------- */
.tag-ph{
  display:inline-block; font-size:.78rem; color:var(--terracotta); border:1px dashed var(--terracotta);
  padding:2px 8px; border-radius:3px; margin-left:.4rem;
}