/* =========================================================
   Match & Sense — feuille de style
   Palette beige / crème, typographie éditoriale.
   ========================================================= */

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

:root{
  --cream:        #F4EEE4;   /* fond principal */
  --cream-2:      #EDE5D7;   /* fond alterné */
  --sand:         #E3D6C2;   /* blocs / cartes */
  --taupe:        #A9967C;   /* accent doux */
  --clay:         #9C7B5E;   /* accent chaud (liens, hover) */
  --ink:          #211F1B;   /* texte principal */
  --ink-soft:     #4A453D;   /* texte secondaire */
  --line:         #D8CBB5;   /* filets / bordures */
  --white:        #FBF8F2;

  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:  'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --container: 1180px;
  --gutter: clamp(1.4rem, 5vw, 5rem);
  --radius: 2px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  font-size:clamp(1rem,.96rem + .25vw,1.08rem);
  line-height:1.7;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }

::selection{ background:var(--taupe); color:var(--white); }

/* ---------- typographie ---------- */
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:380;
  line-height:1.06;
  letter-spacing:-.01em;
  margin:0 0 .5em;
  color:var(--ink);
}
h1{ font-size:clamp(2.6rem,1.7rem + 4.4vw,5.6rem); }
h2{ font-size:clamp(2rem,1.4rem + 2.6vw,3.4rem); }
h3{ font-size:clamp(1.4rem,1.1rem + 1.1vw,1.9rem); }
p{ margin:0 0 1.1em; max-width:62ch; }

.kicker{
  font-family:var(--sans);
  font-weight:500;
  font-size:.72rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--clay);
  display:inline-block;
  margin-bottom:1.4rem;
}
.lead{ font-size:clamp(1.15rem,1rem + .6vw,1.5rem); line-height:1.55; color:var(--ink-soft); font-weight:300; }
em{ font-style:italic; }

/* ---------- layout ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
section{ padding-block:clamp(4rem,3rem + 7vw,9rem); }
.divider{ height:1px; background:var(--line); border:0; margin:0; }

/* ---------- header / nav ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header.scrolled{
  background:rgba(244,238,228,.86);
  backdrop-filter:saturate(120%) blur(10px);
  box-shadow:0 1px 0 var(--line);
}
.nav{
  max-width:var(--container); margin-inline:auto;
  padding:1.1rem var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.brand{ display:flex; align-items:center; gap:.6rem; }
.brand img{ height:46px; width:auto; mix-blend-mode:multiply; }
.brand .brand-name{ font-family:var(--serif); font-size:1.15rem; letter-spacing:.02em; display:none; }

.nav-links{
  display:flex; align-items:center; gap:clamp(1rem,2.4vw,2.2rem);
  list-style:none; margin:0; padding:0;
}
.nav-links a{
  font-size:.86rem; letter-spacing:.04em; color:var(--ink-soft);
  position:relative; padding-block:.3rem; transition:color .25s var(--ease);
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--clay); transition:width .3s var(--ease);
}
.nav-links a:hover, .nav-links a.active{ color:var(--ink); }
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }

.nav-cta{ display:flex; align-items:center; gap:.8rem; }
.nav-links .mobile-only{ display:none; }

/* hamburger */
.nav-toggle{
  display:none; background:none; border:0; width:40px; height:40px;
  position:relative;
}
.nav-toggle span{
  position:absolute; left:8px; right:8px; height:1.5px; background:var(--ink);
  transition:transform .35s var(--ease), opacity .25s var(--ease);
}
.nav-toggle span:nth-child(1){ top:14px; }
.nav-toggle span:nth-child(2){ top:20px; }
.nav-toggle span:nth-child(3){ top:26px; }
body.nav-open .nav-toggle span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
body.nav-open .nav-toggle span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ---------- buttons ---------- */
.btn{
  --bg:var(--ink); --fg:var(--cream);
  display:inline-flex; align-items:center; gap:.6rem;
  background:var(--bg); color:var(--fg);
  padding:.95rem 1.7rem; border:1px solid var(--bg); border-radius:100px;
  font-family:var(--sans); font-size:.84rem; letter-spacing:.06em;
  transition:transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  white-space:nowrap;
}
.btn:hover{ background:var(--clay); border-color:var(--clay); color:var(--white); transform:translateY(-2px); }
.btn--ghost{ --bg:transparent; --fg:var(--ink); border-color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:var(--cream); border-color:var(--ink); }
.btn--sm{ padding:.7rem 1.3rem; font-size:.78rem; }

.link-arrow{
  font-size:.85rem; letter-spacing:.05em; color:var(--clay);
  display:inline-flex; align-items:center; gap:.5rem; border-bottom:1px solid transparent;
  transition:gap .3s var(--ease), border-color .3s var(--ease);
}
.link-arrow:hover{ gap:.85rem; border-color:var(--clay); }

/* ---------- hero ---------- */
.hero{
  min-height:100svh; display:flex; align-items:center;
  padding-top:7rem; position:relative; overflow:hidden;
}
.hero .container{ position:relative; z-index:2; }
.hero h1{ max-width:14ch; }
.hero .lead{ max-width:46ch; margin-top:1.6rem; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.6rem; }

/* heart-knot ornament echoing the logo */
.ornament{
  position:absolute; z-index:1; pointer-events:none; opacity:.5;
  inset:auto -6% -10% auto; width:min(46vw,560px); color:var(--taupe);
}
.ornament svg{ width:100%; height:auto; }

/* grain overlay for warmth (very subtle) */
.grain::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:.04; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- generic media block ---------- */
.media{
  position:relative; border-radius:var(--radius); overflow:hidden;
  background:linear-gradient(135deg,var(--sand),var(--cream-2));
  aspect-ratio:4/5;
}
.media img{ width:100%; height:100%; object-fit:cover; }
.media--wide{ aspect-ratio:16/10; }
.media .placeholder{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.8rem; color:var(--taupe);
  text-align:center; padding:2rem;
}
.media .placeholder svg{ width:54px; height:auto; opacity:.8; }
.media .placeholder span{ font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; }

/* ---------- two-column editorial ---------- */
.split{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,5rem);
  align-items:center;
}
.split--reverse .split-media{ order:-1; }
.split-body p:last-child{ margin-bottom:0; }

/* ---------- intro / statement ---------- */
.statement{ text-align:center; max-width:24ch; margin-inline:auto; }
.statement.lead{ max-width:40ch; }

/* ---------- value cards ---------- */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.4rem,3vw,2.6rem); }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.4rem,3vw,2.6rem); }
.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(1.6rem,1rem + 2vw,2.6rem);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.card:hover{ transform:translateY(-4px); box-shadow:0 24px 50px -32px rgba(40,33,24,.35); }
.card .num{ font-family:var(--serif); font-size:1.1rem; color:var(--clay); display:block; margin-bottom:1rem; }
.card h3{ margin-bottom:.5rem; }
.card p{ color:var(--ink-soft); margin-bottom:0; font-size:.97rem; }

/* ---------- audience two paths ---------- */
.paths{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.4rem,3vw,2.4rem); }
.path{
  position:relative; padding:clamp(2rem,1.4rem + 3vw,3.6rem);
  border:1px solid var(--line); border-radius:var(--radius); background:var(--cream-2);
  display:flex; flex-direction:column; min-height:100%;
}
.path h3{ margin-top:.4rem; }
.path p{ color:var(--ink-soft); }
.path .btn{ margin-top:auto; align-self:flex-start; }

/* ---------- steps (approche) ---------- */
.steps{ display:grid; gap:0; }
.step{
  display:grid; grid-template-columns:auto 1fr; gap:clamp(1.4rem,3vw,3rem);
  padding-block:clamp(1.8rem,3vw,2.8rem); border-top:1px solid var(--line);
}
.step:last-child{ border-bottom:1px solid var(--line); }
.step .step-no{ font-family:var(--serif); font-size:clamp(1.8rem,3vw,2.8rem); color:var(--taupe); line-height:1; }
.step h3{ margin-bottom:.4rem; }
.step p{ color:var(--ink-soft); margin-bottom:0; }

/* ---------- pricing ---------- */
.pricing{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,2.5vw,2rem); align-items:stretch; }
.plan{
  display:flex; flex-direction:column; background:var(--white);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(1.8rem,1.2rem + 2vw,2.8rem);
}
.plan--featured{ background:var(--ink); color:var(--cream); border-color:var(--ink); }
.plan--featured h3,.plan--featured .price{ color:var(--white); }
.plan--featured .plan-feat li::before{ color:var(--taupe); }
.plan .tag{ font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--clay); }
.plan--featured .tag{ color:var(--sand); }
.plan h3{ margin:.8rem 0 .2rem; }
.plan .price{ font-family:var(--serif); font-size:2.2rem; margin:.4rem 0 .2rem; }
.plan .price small{ font-family:var(--sans); font-size:.8rem; letter-spacing:.05em; color:var(--ink-soft); }
.plan--featured .price small{ color:var(--sand); }
.plan-feat{ list-style:none; margin:1.4rem 0 2rem; padding:0; display:grid; gap:.7rem; font-size:.95rem; }
.plan-feat li{ position:relative; padding-left:1.5rem; color:var(--ink-soft); }
.plan--featured .plan-feat li{ color:var(--sand); }
.plan-feat li::before{ content:"—"; position:absolute; left:0; color:var(--clay); }
.plan .btn{ margin-top:auto; }
.plan--featured .btn{ --bg:var(--cream); --fg:var(--ink); border-color:var(--cream); }
.plan--featured .btn:hover{ background:var(--clay); color:var(--white); border-color:var(--clay); }

/* ---------- testimonials ---------- */
.quote{
  border:1px solid var(--line); border-radius:var(--radius); background:var(--white);
  padding:clamp(1.8rem,1.2rem + 2vw,2.8rem);
}
.quote .mark{ font-family:var(--serif); font-size:3rem; line-height:.6; color:var(--taupe); }
.quote blockquote{ margin:.6rem 0 1.4rem; font-family:var(--serif); font-size:clamp(1.1rem,1rem + .5vw,1.4rem); font-weight:340; line-height:1.4; }
.quote cite{ font-style:normal; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; color:var(--clay); }

/* ---------- FAQ ---------- */
.faq{ max-width:820px; margin-inline:auto; }
.faq-item{ border-top:1px solid var(--line); }
.faq-item:last-child{ border-bottom:1px solid var(--line); }
.faq-q{
  width:100%; background:none; border:0; text-align:left;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:1.5rem 0; font-family:var(--serif); font-size:clamp(1.1rem,1rem + .5vw,1.35rem);
  color:var(--ink);
}
.faq-q .icon{ position:relative; width:18px; height:18px; flex:none; }
.faq-q .icon::before,.faq-q .icon::after{
  content:""; position:absolute; background:var(--clay); transition:transform .3s var(--ease);
}
.faq-q .icon::before{ top:8px; left:0; width:18px; height:1.5px; }
.faq-q .icon::after{ left:8px; top:0; width:1.5px; height:18px; }
.faq-item.open .faq-q .icon::after{ transform:scaleY(0); }
.faq-a{ overflow:hidden; max-height:0; transition:max-height .4s var(--ease); }
.faq-a-inner{ padding:0 0 1.6rem; color:var(--ink-soft); }
.faq-a-inner p{ margin:0; }

/* ---------- forms ---------- */
.form-wrap{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(1.8rem,1.2rem + 3vw,3.4rem); }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem 1.4rem; }
.field{ display:flex; flex-direction:column; gap:.5rem; }
.field.full{ grid-column:1 / -1; }
.field label{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
.field input,.field select,.field textarea{
  font-family:var(--sans); font-size:1rem; color:var(--ink);
  background:var(--cream); border:1px solid var(--line); border-radius:var(--radius);
  padding:.85rem 1rem; transition:border-color .25s var(--ease), background .25s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--clay); background:var(--white);
}
.field textarea{ resize:vertical; min-height:130px; }
.choice{ display:flex; gap:1rem; flex-wrap:wrap; }
.choice label{
  display:flex; align-items:center; gap:.55rem; text-transform:none; letter-spacing:0;
  font-size:.95rem; color:var(--ink); cursor:pointer;
  border:1px solid var(--line); border-radius:100px; padding:.55rem 1.1rem; background:var(--cream);
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.choice label:hover{ border-color:var(--taupe); }
.choice input{ accent-color:var(--clay); }
.form-note{ font-size:.82rem; color:var(--ink-soft); margin-top:1rem; }
.form-success{
  display:none; padding:1.2rem 1.4rem; border-radius:var(--radius);
  background:var(--cream-2); border:1px solid var(--taupe); color:var(--ink); margin-top:1.2rem;
}
.form-success.show{ display:block; }

/* ---------- newsletter ---------- */
.newsletter{ background:var(--ink); color:var(--cream); }
.newsletter h2,.newsletter .kicker{ color:var(--cream); }
.newsletter .kicker{ color:var(--sand); }
.news-form{ display:flex; gap:.8rem; flex-wrap:wrap; max-width:520px; margin-top:1.8rem; }
.news-form input{
  flex:1 1 220px; background:transparent; border:0; border-bottom:1px solid rgba(244,238,228,.4);
  color:var(--cream); padding:.8rem .2rem; font-family:var(--sans); font-size:1rem;
}
.news-form input::placeholder{ color:rgba(244,238,228,.55); }
.news-form input:focus{ outline:none; border-color:var(--cream); }
.news-form .btn{ --bg:var(--cream); --fg:var(--ink); border-color:var(--cream); }
.news-form .btn:hover{ background:var(--clay); color:var(--white); border-color:var(--clay); }
.news-success{ font-size:.9rem; color:var(--sand); margin-top:1rem; display:none; }
.news-success.show{ display:block; }

/* ---------- CTA band ---------- */
.cta-band{ text-align:center; }
.cta-band .container{ max-width:760px; }
.cta-band h2{ margin-bottom:1rem; }
.cta-actions{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; margin-top:2rem; }

/* ---------- page header (interior) ---------- */
.page-head{ padding-top:9rem; padding-bottom:0; }
.page-head .container{ max-width:900px; }
.page-head h1{ max-width:18ch; }
.page-head .lead{ margin-top:1.4rem; }

/* ---------- footer ---------- */
.site-footer{ background:var(--cream-2); border-top:1px solid var(--line); }
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem;
  padding-block:clamp(3rem,2rem + 4vw,5rem);
}
.site-footer .brand img{ height:54px; }
.footer-col h4{ font-family:var(--sans); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--clay); margin-bottom:1.2rem; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.footer-col a{ color:var(--ink-soft); font-size:.95rem; transition:color .25s var(--ease); }
.footer-col a:hover{ color:var(--ink); }
.footer-bottom{
  border-top:1px solid var(--line); padding-block:1.4rem;
  display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; justify-content:space-between;
  font-size:.8rem; color:var(--ink-soft); letter-spacing:.03em;
}
.footer-tagline{ font-family:var(--serif); font-style:italic; color:var(--ink-soft); margin:.6rem 0 1.4rem; }

/* ---------- scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; }
.reveal.d2{ transition-delay:.16s; }
.reveal.d3{ transition-delay:.24s; }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .split{ grid-template-columns:1fr; }
  .split--reverse .split-media{ order:0; }
  .grid-3,.pricing{ grid-template-columns:1fr; }
  .paths{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .ornament{ width:70vw; opacity:.35; }
}
@media (max-width:760px){
  .nav-toggle{ display:block; }
  .nav-links{
    position:fixed; inset:0 0 0 auto; width:min(82vw,360px);
    background:var(--cream); flex-direction:column; align-items:flex-start; justify-content:center;
    gap:1.6rem; padding:2rem var(--gutter);
    transform:translateX(100%); transition:transform .45s var(--ease);
    box-shadow:-30px 0 60px -40px rgba(0,0,0,.4); z-index:99;
  }
  body.nav-open .nav-links{ transform:none; }
  .nav-links a{ font-size:1.15rem; }
  .nav-links .mobile-only{ display:block; margin-top:.4rem; }
  .nav-links .mobile-only a{ color:var(--clay); }
  .nav .nav-cta .btn{ display:none; }
  .form-grid{ grid-template-columns:1fr; }
  .grid-2{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; gap:2rem; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
}