/* ==========================================================================
   LUNATURO — Design system
   Pine / beige / blanc cassé · serif chaleureux + sans-serif lisible
   Signature : le "cercle qui respire" — symbole du système nerveux régulé
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Lato:wght@300;400;700;900&display=swap');

:root{
  /* couleurs — palette olive claire / mousse / crème */
  --pine-950:#4B5536;
  --pine-800:#5D6743;
  --pine-700:#707A51;
  --pine-600:#889264;
  --pine-500:#9FA878;

  --sage-400:#B6BE8A;
  --sage-300:#CDD3A9;
  --sage-200:#E3E7C8;
  --beige-300:#EEE7D2;
  --beige-200:#F4EEE0;
  --beige-100:#F9F4E9;
  --cream:#FCF9F1;
  --white:#FFFFFF;
  --ink:#2B2F1E;
  --ink-soft:#61664B;
  --ink-faint:#8F9476;
  --line:rgba(43,47,30,.10);
  --line-dark:rgba(255,255,255,.14);

  /* typo */
  --serif:'Playfair Display', serif;
  --sans:'Lato', sans-serif;

  /* rayon / ombre */
  --r-lg:28px;
  --r-md:18px;
  --r-sm:12px;
  --r-pill:100px;
  --shadow-soft:0 20px 60px rgba(22,35,27,.08);
  --shadow-card:0 12px 32px rgba(22,35,27,.06);

  --container:1180px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--sans);
  background:var(--cream);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  line-height:1.6;
}
img{max-width:100%;display:block;}
a{color:inherit;}
ul{list-style:none;}
button{font-family:inherit;}

::selection{background:var(--sage-300);color:var(--pine-950);}

:focus-visible{outline:2px solid var(--pine-600);outline-offset:3px;}

.container{max-width:var(--container);margin:0 auto;padding:0 32px;}
.container--narrow{max-width:760px;}

section{padding:120px 0;}
@media(max-width:768px){ section{padding:72px 0;} .container{padding:0 22px;} }

/* ---------- type scale ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--pine-500);
  margin-bottom:18px;
}
.eyebrow::before{content:'';width:22px;height:1px;background:var(--sage-400);}

h1,h2,h3,h4{font-family:var(--serif);font-weight:400;color:var(--ink);line-height:1.15;letter-spacing:-.01em;}
h1{font-size:clamp(36px,5.6vw,68px);}
h2{font-size:clamp(28px,3.8vw,46px);}
h3{font-size:clamp(20px,2.4vw,26px);}
em{font-style:italic;color:var(--pine-600);}

p{font-size:16px;color:var(--ink-soft);font-weight:400;}
.lede{font-size:19px;line-height:1.75;color:var(--ink-soft);}
.small{font-size:13px;color:var(--ink-faint);}

.hand{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--pine-500);}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:16px 32px;border-radius:var(--r-pill);
  font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.04em;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:transform .25s ease,background .25s ease,color .25s ease,border-color .25s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--pine-700);color:var(--white);}
.btn-primary:hover{background:var(--pine-950);}
.btn-cream{background:var(--beige-100);color:var(--pine-950);}
.btn-cream:hover{background:var(--white);}
.btn-outline{background:transparent;border-color:var(--line);color:var(--ink);}
.btn-outline:hover{border-color:var(--pine-600);color:var(--pine-700);}
.btn-ghost-white{background:transparent;border-color:rgba(255,255,255,.35);color:rgba(255,255,255,.92);}
.btn-ghost-white:hover{border-color:#fff;color:#fff;}
.btn-sm{padding:11px 20px;font-size:12px;}

/* ---------- nav ---------- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:999;
  background:rgba(22,35,27,.92);backdrop-filter:blur(10px);
  padding:18px 0;border-bottom:1px solid var(--line-dark);
}
nav .container{display:flex;align-items:center;justify-content:space-between;}
.logo{font-family:var(--serif);font-style:italic;font-size:21px;color:var(--white);text-decoration:none;letter-spacing:.01em;}
.logo span{color:var(--sage-300);}
.nav-links{display:flex;gap:2.4rem;align-items:center;}
.nav-links a{font-size:13px;color:rgba(255,255,255,.82);text-decoration:none;transition:color .2s;}
.nav-links a:hover{color:#fff;}
.nav-right{display:flex;align-items:center;gap:14px;}
.nav-client{font-size:12px;color:var(--sage-300);text-decoration:none;border:1px solid rgba(174,194,163,.4);padding:9px 18px;border-radius:var(--r-pill);transition:all .2s;}
.nav-client:hover{background:rgba(174,194,163,.12);}
.nav-pill{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);color:#fff;padding:10px 20px;border-radius:var(--r-pill);font-size:12px;letter-spacing:.06em;text-decoration:none;transition:background .2s;}
.nav-pill:hover{background:rgba(255,255,255,.24);}

.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px;}
.hamburger span{width:22px;height:2px;background:#fff;border-radius:2px;}
.mobile-menu{display:none;position:fixed;top:62px;left:0;right:0;background:var(--pine-950);z-index:998;flex-direction:column;padding:10px 22px 22px;gap:2px;border-bottom:1px solid var(--line-dark);}
.mobile-menu.open{display:flex;}
.mobile-menu a{color:#fff;text-decoration:none;padding:13px 10px;font-size:15px;border-radius:10px;}
.mobile-menu a:hover{background:rgba(255,255,255,.06);}
.mobile-menu .m-cta{background:rgba(255,255,255,.12);margin-top:8px;font-weight:500;text-align:center;}

@media(max-width:860px){
  .nav-links,.nav-right{display:none;}
  .hamburger{display:flex;}
}

/* ---------- signature: breathing circle ---------- */
.breath-wrap{position:relative;display:flex;align-items:center;justify-content:center;}
.breath-ring{
  position:absolute;border-radius:50%;border:1px solid rgba(174,194,163,.35);
  animation:breathe 7s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{transform:scale(.94);opacity:.35;}
  50%{transform:scale(1.04);opacity:.85;}
}
@media (prefers-reduced-motion: reduce){
  .breath-ring{animation:none;}
}

/* ---------- hero ---------- */
.hero{
  min-height:100vh;position:relative;display:flex;align-items:center;
  background:var(--pine-950);overflow:hidden;padding-top:80px;
}
.hero-glow{position:absolute;inset:0;background:
  radial-gradient(circle at 18% 30%,rgba(174,194,163,.16),transparent 55%),
  radial-gradient(circle at 85% 75%,rgba(140,168,136,.14),transparent 50%);
}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:4rem;align-items:center;width:100%;}
.hero-left{max-width:600px;}
.hero-eyebrow{color:var(--sage-300);}
.hero-eyebrow::before{background:var(--sage-300);}
.hero h1{color:var(--white);margin-bottom:22px;}
.hero h1 em{color:var(--sage-300);}
.hero-sub{font-size:17px;line-height:1.85;color:rgba(255,255,255,.78);max-width:440px;margin-bottom:38px;font-weight:300;}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;}

.hero-visual{position:relative;height:460px;display:flex;align-items:center;justify-content:center;}
.hero-visual .breath-ring:nth-child(1){width:180px;height:180px;}
.hero-visual .breath-ring:nth-child(2){width:280px;height:280px;animation-delay:.6s;}
.hero-visual .breath-ring:nth-child(3){width:380px;height:380px;animation-delay:1.2s;}
.hero-visual-core{
  position:relative;z-index:3;width:140px;height:140px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,var(--sage-300),var(--pine-600) 70%);
  box-shadow:0 0 80px rgba(174,194,163,.35);
}
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-visual{height:280px;order:-1;}
  .hero-left{max-width:none;}
}

/* ---------- marquee ---------- */
.marquee-section{background:var(--pine-900,var(--pine-950));padding:18px 0;overflow:hidden;border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);}
.marquee-track{display:flex;gap:3rem;width:max-content;animation:marquee 26s linear infinite;}
.marquee-item{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--sage-300);display:flex;align-items:center;gap:1.5rem;font-weight:500;white-space:nowrap;}
.marquee-item::after{content:'✦';font-size:9px;color:rgba(174,194,163,.5);}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ---------- problem / point A ---------- */
.problems-section{background:var(--cream);}
.problem-list{margin-top:3.5rem;border-top:1px solid var(--line);}
.problem-item{
  display:grid;grid-template-columns:56px 1fr auto;gap:2.2rem;align-items:flex-start;
  padding:2.1rem 0;border-bottom:1px solid var(--line);
}
.problem-mark{width:10px;height:10px;border-radius:50%;background:var(--sage-400);margin-top:8px;}
.problem-main{font-family:var(--serif);font-size:clamp(17px,2vw,21px);color:var(--ink);line-height:1.5;}
.problem-tag{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);white-space:nowrap;padding-top:6px;}
@media(max-width:700px){ .problem-item{grid-template-columns:24px 1fr;} .problem-tag{display:none;} }

.arrow-divider{display:flex;align-items:center;justify-content:center;gap:18px;margin:0 auto;padding:64px 0 0;color:var(--ink-faint);}
.arrow-divider .line{width:60px;height:1px;background:var(--line);}
.arrow-divider span{font-family:var(--serif);font-style:italic;font-size:15px;}

/* ---------- about ---------- */
/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:5rem;align-items:center;}
.about-img{
  width: 100%;
  aspect-ratio:3/4;border-radius:200px 24px 24px 24px;background-size:cover;background-position:center;
  box-shadow:var(--shadow-soft);
}
.about-quote{
  font-family:var(--serif);font-style:italic;font-size:1.3rem;color:var(--ink);line-height:1.55;
  border-left:2px solid var(--sage-400);padding-left:1.4rem;margin:1.6rem 0;
}
@media(max-width:860px){ 
  .about-grid{grid-template-columns:1fr;gap:2.5rem;} 
  .about-img{
    aspect-ratio: 4/5;   /* Change le format horizontal (4/3) qui te coupait en deux par un beau format vertical */
    max-height: 450px;   /* Évite que la photo ne devienne trop géante sur les grands écrans de téléphone */
    margin: 0 auto;      /* Centre proprement la photo sur l'écran du mobile */
  } 
}

/* ---------- why no video ---------- */
.novideo-section{background:var(--pine-950);color:#fff;position:relative;overflow:hidden;}
.novideo-section::before{content:'';position:absolute;top:-30%;right:-10%;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(174,194,163,.14),transparent 70%);}
.novideo-grid{position:relative;z-index:1;display:grid;grid-template-columns:.9fr 1.1fr;gap:4rem;align-items:start;}
.novideo-grid h2{color:#fff;}
.novideo-grid h2 em{color:var(--sage-300);}
.novideo-lede{color:rgba(255,255,255,.72);font-size:16px;line-height:1.8;margin-top:18px;}
.novideo-list{display:flex;flex-direction:column;gap:1.8rem;}
.novideo-row{display:grid;grid-template-columns:34px 1fr;gap:1.1rem;}
.novideo-icon{width:34px;height:34px;border-radius:50%;border:1px solid rgba(174,194,163,.45);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-style:italic;color:var(--sage-300);font-size:14px;flex-shrink:0;}
.novideo-row h4{font-family:var(--sans);font-size:14.5px;font-weight:600;color:#fff;margin-bottom:5px;letter-spacing:.01em;}
.novideo-row p{font-size:13.5px;color:rgba(255,255,255,.65);line-height:1.7;}
@media(max-width:860px){ .novideo-grid{grid-template-columns:1fr;gap:2.4rem;} }

/* ---------- offer / point C ---------- */
.offer-section{background:var(--cream);}
.offer-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:3rem;max-width:560px;margin:3rem auto 0;box-shadow:var(--shadow-soft);
  position:relative;
}
.offer-badge{display:inline-block;background:var(--sage-200);color:var(--pine-800);font-size:10px;letter-spacing:.16em;text-transform:uppercase;padding:6px 14px;border-radius:var(--r-pill);font-weight:600;margin-bottom:18px;}
.offer-card h3{font-size:1.7rem;margin-bottom:10px;}
.offer-price{font-family:var(--serif);font-size:46px;color:var(--pine-700);margin:18px 0 4px;}
.offer-dur{font-size:12px;color:var(--ink-faint);margin-bottom:26px;}
.offer-card ul{display:flex;flex-direction:column;gap:11px;margin-bottom:30px;}
.offer-card li{font-size:14px;color:var(--ink-soft);display:flex;gap:10px;align-items:flex-start;line-height:1.5;}
.offer-card li::before{content:'✓';color:var(--sage-400);font-weight:700;flex-shrink:0;}
@media(max-width:600px){ .offer-card{padding:2.2rem 1.6rem;} }

/* ---------- testimonials ---------- */
.testi-section{background:var(--beige-200);}
.testi-feature{display:grid;grid-template-columns:auto 1fr;gap:2.6rem;align-items:center;margin-top:3rem;padding:3rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.testi-qmark{font-family:var(--serif);font-size:6rem;color:rgba(44,70,54,.12);line-height:.5;}
.testi-text{font-family:var(--serif);font-size:1.4rem;font-style:italic;color:var(--ink);line-height:1.55;margin-bottom:1.2rem;}
.testi-author{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--pine-600);display:flex;align-items:center;gap:.9rem;}
.testi-author::before{content:'';width:22px;height:1px;background:var(--pine-600);}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.4rem;}
.testi-mini{background:var(--white);border-radius:var(--r-md);padding:1.7rem;border:1px solid var(--line);}
.stars{color:var(--sage-400);font-size:13px;margin-bottom:10px;letter-spacing:2px;}
.testi-mini-text{font-size:13.5px;line-height:1.75;color:var(--ink);margin-bottom:1rem;}
.testi-mini-author{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);}
@media(max-width:860px){ .testi-feature{grid-template-columns:1fr;} .testi-qmark{display:none;} .testi-grid{grid-template-columns:1fr;} }

/* ---------- blog teaser on homepage ---------- */
.blog-teaser-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:3rem;}
@media(max-width:860px){ .blog-teaser-grid{grid-template-columns:1fr;} }

/* ---------- shared article card (used in blog listing + teaser) ---------- */
.article-card{
  background:var(--white);border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);
  display:flex;flex-direction:column;transition:transform .3s ease,box-shadow .3s ease;text-decoration:none;
}
.article-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card);}
.article-card-img{aspect-ratio:4/3;background-size:cover;background-position:center;}
.article-card-body{padding:1.7rem;display:flex;flex-direction:column;gap:.7rem;flex:1;}
.article-cat{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--pine-500);font-weight:600;}
.article-card h3{font-size:1.15rem;line-height:1.35;}
.article-card p{font-size:13px;line-height:1.65;color:var(--ink-soft);flex:1;}
.article-meta{display:flex;gap:10px;align-items:center;font-size:11px;color:var(--ink-faint);margin-top:auto;padding-top:.6rem;}
.article-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--ink-faint);}

/* ---------- final CTA ---------- */
.cta-section{background:var(--pine-950);padding:120px 0;text-align:center;position:relative;overflow:hidden;}
.cta-section::before{content:'';position:absolute;top:-40%;left:50%;transform:translateX(-50%);width:620px;height:620px;border-radius:50%;background:radial-gradient(circle,rgba(174,194,163,.14),transparent 70%);}
.cta-hand{color:var(--sage-300);display:block;margin-bottom:14px;font-size:18px;}
.cta-section h2{color:#fff;margin-bottom:16px;position:relative;z-index:1;}
.cta-section h2 em{color:var(--sage-300);}
.cta-sub{color:rgba(255,255,255,.7);margin-bottom:36px;position:relative;z-index:1;}

/* ---------- footer ---------- */
footer{background:var(--pine-950);padding:5rem 0 2rem;border-top:1px solid var(--line-dark);}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:4rem;margin-bottom:3rem;}
.footer-brand{font-family:var(--serif);font-style:italic;font-size:22px;color:#fff;margin-bottom:12px;}
.footer-brand span{color:var(--sage-300);}
.footer-desc{font-size:12.5px;line-height:1.85;color:rgba(255,255,255,.55);max-width:280px;}
.footer-col-title{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--sage-300);margin-bottom:1.3rem;}
.footer-links{display:flex;flex-direction:column;gap:.8rem;}
.footer-links a{font-size:13px;color:rgba(255,255,255,.7);text-decoration:none;transition:color .2s;}
.footer-links a:hover{color:#fff;}
.footer-bottom{border-top:1px solid var(--line-dark);padding-top:2rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;}
.footer-bottom p{font-size:11px;color:rgba(255,255,255,.5);}
@media(max-width:860px){ .footer-grid{grid-template-columns:1fr;gap:2.2rem;} }

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1;transform:none;transition:none;} }

/* ---------- BLOG LISTING specific ---------- */
.blog-hero{background:var(--pine-950);padding:160px 0 80px;color:#fff;position:relative;overflow:hidden;}
.blog-hero::before{content:'';position:absolute;top:-30%;right:-10%;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(174,194,163,.14),transparent 70%);}
.blog-hero h1{color:#fff;position:relative;z-index:1;}
.blog-hero h1 em{color:var(--sage-300);}
.blog-hero p{color:rgba(255,255,255,.7);max-width:520px;margin-top:16px;position:relative;z-index:1;}

.blog-controls{background:var(--cream);padding:40px 0 0;}
.search-wrap{position:relative;max-width:480px;margin-bottom:1.8rem;}
.search-wrap input{
  width:100%;padding:16px 20px 16px 48px;border-radius:var(--r-pill);border:1px solid var(--line);
  background:var(--white);font-family:var(--sans);font-size:14px;color:var(--ink);
}
.search-wrap input:focus{outline:none;border-color:var(--pine-500);}
.search-icon{position:absolute;left:20px;top:50%;transform:translateY(-50%);color:var(--ink-faint);font-size:15px;}
.filter-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:1rem;}
.filter-pill{
  padding:9px 18px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--white);
  font-size:12.5px;color:var(--ink-soft);cursor:pointer;transition:all .2s;font-weight:500;
}
.filter-pill:hover{border-color:var(--pine-500);}
.filter-pill.active{background:var(--pine-700);border-color:var(--pine-700);color:#fff;}
.results-count{font-size:12.5px;color:var(--ink-faint);margin:1.6rem 0 0;}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem;margin-top:1.6rem;}
@media(max-width:980px){ .blog-grid{grid-template-columns:1fr 1fr;} }
@media(max-width:640px){ .blog-grid{grid-template-columns:1fr;} }
.empty-state{text-align:center;padding:70px 20px;color:var(--ink-faint);font-size:14px;display:none;}

/* ==========================================================================
   NOUVEAUX BLOCS — mise en page inspirée de la référence (image hero,
   blocs colorés, table de décodage, double chemin, lead magnet, voies)
   ========================================================================== */

/* ---------- HERO image card — pleine largeur, titre centré ---------- */
.hero-section{padding:80px 0 0;background:var(--cream);}
.hero-card{
  position:relative;overflow:hidden;width:100%;
  min-height:82vh;display:flex;align-items:center;justify-content:center;text-align:center;
  background-size:cover;background-position:center;
}
.hero-card::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(22,35,27,.58) 0%,rgba(22,35,27,.28) 42%,rgba(22,35,27,.62) 100%);
}
.hero-top-row{
  position:absolute;top:0;left:0;right:0;z-index:2;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:36px 48px;
}
.hero-pill-badge{
  background:rgba(255,255,255,.18);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.32);
  color:#fff;padding:9px 19px;border-radius:var(--r-pill);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
}
.hero-card-content{position:relative;z-index:2;max-width:760px;padding:0 24px;}
.hero-card h1{color:#fff;}
.hero-card h1 em{color:var(--sage-300);}
.hero-card-bottom{
  position:absolute;bottom:0;left:0;right:0;z-index:2;
  display:flex;justify-content:center;gap:14px;flex-wrap:wrap;
  padding:0 24px 40px;
}
@media(max-width:768px){
  .hero-section{padding-top:64px;}
  .hero-card{min-height:78vh;}
  .hero-top-row{padding:24px 20px;}
  .hero-card-bottom{padding:0 20px 28px;}
}

/* ---------- 3 colored step blocks ---------- */
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:3rem;}
.step-card{border-radius:var(--r-lg);padding:2.6rem 2.2rem;display:flex;flex-direction:column;gap:1.4rem;min-height:260px;justify-content:space-between;}
.step-icon{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-style:italic;font-size:18px;flex-shrink:0;}
.step-card h3{font-size:1.2rem;}
.step-card p{font-size:13px;line-height:1.7;}
.step-1{background:var(--beige-100);}
.step-1 .step-icon{background:var(--beige-300);color:var(--pine-700);}
.step-2{background:var(--sage-300);}
.step-2 .step-icon{background:rgba(255,255,255,.45);color:var(--pine-800);}
.step-2 h3,.step-2 p{color:var(--pine-950);}
.step-2 p{opacity:.85;}
.step-3{background:var(--pine-800);}
.step-3 .step-icon{background:rgba(255,255,255,.12);color:var(--sage-300);}
.step-3 h3{color:#fff;}
.step-3 p{color:rgba(255,255,255,.68);}
@media(max-width:860px){ .steps-grid{grid-template-columns:1fr;} }
@media(max-width:600px){ .step-card{padding:2rem 1.6rem;min-height:0;} }

/* ---------- decode table (point A, en table de lignes) ---------- */
.decode-table{margin-top:3rem;border-top:1px solid var(--line);}
.decode-row{display:grid;grid-template-columns:18px 150px 1fr 40px;gap:1.8rem;align-items:center;padding:1.7rem 0;border-bottom:1px solid var(--line);transition:background .2s;}
.decode-dot{width:8px;height:8px;border-radius:50%;background:var(--sage-400);}
.decode-cat{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--pine-600);font-weight:600;}
.decode-text{font-size:14.5px;color:var(--ink-soft);line-height:1.65;}
.decode-arrow{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink-faint);text-decoration:none;transition:all .2s;flex-shrink:0;font-size:14px;}
.decode-arrow:hover{border-color:var(--pine-600);color:var(--pine-700);background:var(--beige-100);}
@media(max-width:700px){
  .decode-row{grid-template-columns:14px 1fr;row-gap:.5rem;}
  .decode-arrow,.decode-cat{display:none;}
}

/* ---------- two-path colored cards (quiz / programme) ---------- */
.path-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;margin-top:3rem;}
.path-card{border-radius:var(--r-lg);padding:3rem;display:flex;flex-direction:column;gap:1.1rem;min-height:320px;justify-content:space-between;text-decoration:none;transition:transform .3s ease;}
.path-card:hover{transform:translateY(-4px);}
.path-card.light{background:var(--beige-100);border:1px solid var(--line);}
.path-card.dark{background:var(--pine-800);}
.path-card.dark h3,.path-card.dark .path-label{color:#fff;}
.path-card.dark p{color:rgba(255,255,255,.68);}
.path-label{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--pine-500);font-weight:700;}
.path-icon{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;font-family:var(--serif);font-style:italic;}
.path-card.light .path-icon{background:var(--beige-300);color:var(--pine-700);}
.path-card.dark .path-icon{background:rgba(255,255,255,.12);color:var(--sage-300);}
.path-card h3{font-size:1.45rem;}
.path-card p{font-size:13.5px;line-height:1.7;color:var(--ink-soft);}
.path-foot{display:flex;align-items:center;justify-content:space-between;margin-top:.6rem;}
.path-price{font-family:var(--serif);font-size:1.6rem;color:var(--pine-700);}
.path-card.dark .path-price{color:var(--sage-300);}
@media(max-width:860px){ .path-grid{grid-template-columns:1fr;} }
@media(max-width:600px){ .path-card{padding:2.2rem 1.7rem;min-height:0;} }

/* ---------- lead magnet : image plein cadre + cercle citation + CTA ---------- */
.leadmagnet-section{padding:0;background:var(--cream);}
.leadmagnet-frame{
  position:relative;margin:0 32px;border-radius:var(--r-lg);overflow:hidden;
  min-height:580px;background-size:cover;background-position:center;
  display:flex;align-items:center;justify-content:center;padding:40px;
}
.leadmagnet-frame::before{content:'';position:absolute;inset:0;background:rgba(22,35,27,.32);}
.leadmagnet-circle{
  position:relative;z-index:2;background:rgba(251,247,238,.95);backdrop-filter:blur(6px);
  border-radius:50%;width:380px;height:380px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:44px;gap:16px;
}
.leadmagnet-circle .lm-eyebrow{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--pine-600);font-weight:700;}
.leadmagnet-circle p.quote{font-family:var(--serif);font-style:italic;font-size:1.3rem;color:var(--ink);line-height:1.45;}
.leadmagnet-circle .small{color:var(--ink-faint);font-size:12px;}
@media(max-width:700px){
  .leadmagnet-frame{margin:0 16px;min-height:480px;padding:20px;border-radius:26px;}
  .leadmagnet-circle{width:280px;height:280px;padding:30px;}
  .leadmagnet-circle p.quote{font-size:1.05rem;}
}

/* ---------- ways / autres chemins (cartes image, bas de page) ---------- */
.ways-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;margin-top:3rem;}
.way-card{
  position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:360px;
  background-size:cover;background-position:center;display:flex;align-items:flex-end;
  padding:2.2rem;text-decoration:none;
}
.way-card::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,35,27,0) 30%,rgba(22,35,27,.82) 100%);}
.way-card-content{position:relative;z-index:2;}
.way-card-content span.way-tag{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--sage-300);font-weight:700;}
.way-card-content h3{color:#fff;margin:9px 0 8px;}
.way-card-content p{color:rgba(255,255,255,.74);font-size:13px;margin-bottom:16px;line-height:1.6;}
@media(max-width:860px){ .ways-grid{grid-template-columns:1fr;} .way-card{min-height:300px;} }

/* ---------- approche · grille 2x2 façon "table" (remplace l'ancienne méthode) ---------- */
.approach-section{background:var(--beige-200);}
.approach-grid{
  display:grid;grid-template-columns:1fr 1fr;
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;margin-top:3.2rem;
}
.approach-card{
  padding:3rem 3.2rem;display:flex;flex-direction:column;gap:1.1rem;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  transition:background .3s;
}
.approach-card:hover{background:var(--beige-100);}
.approach-card:nth-child(2n){border-right:none;}
.approach-card:nth-child(n+3){border-bottom:none;}
.approach-icon{
  width:48px;height:48px;border-radius:50%;border:1.5px solid var(--sage-400);
  display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--pine-600);
}
.approach-title{font-family:var(--serif);font-size:1.35rem;font-weight:400;color:var(--ink);}
.approach-text{font-size:14px;line-height:1.85;color:var(--ink-soft);}
@media(max-width:700px){
  .approach-grid{grid-template-columns:1fr;}
  .approach-card{border-right:none !important;padding:2.2rem 1.6rem;}
  .approach-card:nth-child(n+3){border-bottom:1px solid var(--line);}
  .approach-card:last-child{border-bottom:none;}
}

/* ---------- page-hero générique (pages intérieures : accompagnement, à propos) ---------- */
.page-hero{background:var(--pine-950);padding:150px 0 70px;color:#fff;position:relative;overflow:hidden;}
.page-hero::before{content:'';position:absolute;top:-30%;right:-10%;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(182,190,138,.16),transparent 70%);}
.page-hero .container{position:relative;z-index:1;}
.page-hero h1{color:#fff;max-width:720px;}
.page-hero h1 em{color:var(--sage-300);}
.page-hero p{color:rgba(255,255,255,.72);max-width:520px;margin-top:18px;font-size:16px;line-height:1.8;}
.page-hero .eyebrow{color:var(--sage-300);}
.page-hero .eyebrow::before{background:var(--sage-300);}

/* ---------- FAQ (details/summary natif, stylé) ---------- */
.faq-list{display:flex;flex-direction:column;gap:14px;margin-top:3rem;max-width:760px;}
.faq-item{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:0;overflow:hidden;}
.faq-item summary{
  list-style:none;cursor:pointer;padding:22px 26px;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  font-family:var(--serif);font-size:1.05rem;color:var(--ink);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'+';font-family:var(--sans);font-size:22px;color:var(--pine-500);flex-shrink:0;transition:transform .25s;}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item .faq-answer{padding:0 26px 24px;font-size:14.5px;line-height:1.8;color:var(--ink-soft);}

/* ---------- timeline (parcours, page à propos) ---------- */
.timeline{margin-top:3rem;border-left:2px solid var(--line);max-width:720px;}
.timeline-row{position:relative;padding:0 0 2.6rem 2.2rem;}
.timeline-row:last-child{padding-bottom:0;}
.timeline-row::before{content:'';position:absolute;left:-6.5px;top:4px;width:11px;height:11px;border-radius:50%;background:var(--sage-400);border:2px solid var(--cream);}
.timeline-year{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--pine-600);font-weight:700;margin-bottom:.5rem;display:block;}
.timeline-title{font-family:var(--serif);font-size:1.15rem;color:var(--ink);margin-bottom:.4rem;}
.timeline-text{font-size:14px;line-height:1.75;color:var(--ink-soft);}

/* ---------- bibliothèque : badge prix/gratuit sur les cartes ressources ---------- */
.resource-card{position:relative;}
.resource-badge{
  position:absolute;top:14px;left:14px;z-index:2;
  padding:6px 14px;border-radius:var(--r-pill);font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
}
.resource-badge.free{background:var(--sage-300);color:var(--pine-950);}
.resource-badge.paid{background:var(--pine-800);color:#fff;}
.resource-type{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--pine-500);font-weight:700;}
.resource-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:.8rem;}
.resource-price{font-family:var(--serif);font-size:1.15rem;color:var(--pine-700);}

/* ---------- ARTICLE PAGE specific ---------- */
.article-hero{background:var(--pine-950);padding:150px 0 60px;color:#fff;}
.breadcrumb{font-size:11.5px;color:rgba(255,255,255,.55);margin-bottom:22px;display:flex;gap:8px;flex-wrap:wrap;}
.breadcrumb a{color:rgba(255,255,255,.55);text-decoration:none;}
.breadcrumb a:hover{color:#fff;}
.article-hero h1{color:#fff;max-width:780px;}
.article-hero h1 em{color:var(--sage-300);}
.article-hero-meta{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:22px;font-size:12.5px;color:rgba(255,255,255,.6);}
.cat-pill{background:rgba(174,194,163,.18);color:var(--sage-300);padding:5px 13px;border-radius:var(--r-pill);font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;}

.article-layout{display:grid;grid-template-columns:1fr 280px;gap:4.5rem;align-items:start;padding:80px 0;}
@media(max-width:960px){ .article-layout{grid-template-columns:1fr;} }

.article-body h2{margin-top:2.6rem;margin-bottom:1rem;font-size:1.6rem;}
.article-body h3{margin-top:1.8rem;margin-bottom:.8rem;font-size:1.2rem;color:var(--pine-700);}
.article-body p{margin-bottom:1.1rem;font-size:15.5px;line-height:1.85;color:var(--ink);}
.article-body ul,.article-body ol{margin:0 0 1.3rem 1.4rem;}
.article-body li{font-size:15px;line-height:1.8;color:var(--ink);margin-bottom:.5rem;}
.article-body blockquote{
  font-family:var(--serif);font-style:italic;font-size:1.25rem;color:var(--pine-700);
  border-left:2px solid var(--sage-400);padding-left:1.4rem;margin:2rem 0;line-height:1.55;
}
.article-callout{
  background:var(--beige-100);border:1px solid var(--beige-300);border-radius:var(--r-md);
  padding:1.6rem 1.8rem;margin:2rem 0;font-size:14.5px;color:var(--ink-soft);line-height:1.75;
}
.article-callout strong{color:var(--pine-700);}

.toc-box{
  position:sticky;top:100px;background:var(--beige-100);border:1px solid var(--beige-300);
  border-radius:var(--r-md);padding:1.8rem;
}
.toc-box h4{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--pine-600);font-weight:700;margin-bottom:1.1rem;}
.toc-box ol{list-style:none;display:flex;flex-direction:column;gap:.65rem;counter-reset:toc;}
.toc-box li{counter-increment:toc;}
.toc-box a{font-size:13px;color:var(--ink-soft);text-decoration:none;display:flex;gap:8px;line-height:1.4;}
.toc-box a::before{content:counter(toc, decimal-leading-zero);font-family:var(--serif);font-style:italic;color:var(--sage-400);flex-shrink:0;}
.toc-box a:hover{color:var(--pine-700);}
.toc-box .toc-sub{padding-left:22px;margin-top:.3rem;display:flex;flex-direction:column;gap:.5rem;}
.toc-box .toc-sub a::before{content:'–';font-family:var(--sans);}

.related-section{background:var(--beige-200);}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:2.6rem;}
@media(max-width:860px){ .related-grid{grid-template-columns:1fr;} }

.author-box{display:flex;gap:1.2rem;align-items:center;padding:1.8rem;background:var(--beige-100);border-radius:var(--r-md);margin-top:3rem;border:1px solid var(--beige-300);}
.author-box img{width:58px;height:58px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.author-box h4{font-size:14px;font-weight:600;margin-bottom:3px;color:var(--ink);}
.author-box p{font-size:12.5px;color:var(--ink-faint);}