/* =========================================================
   En chemin vers Soi — feuille commune des sous-pages
   (mêmes couleurs, polices et en-tête que index.html)
   ========================================================= */
:root{
  --creme:#F9F5F0; --creme-fonce:#ECE6DA; --voile:rgba(221,213,194,.35);
  --sauge:#5E6B50; --feuille:#7D8C6E; --brun:#4A2C20; --texte:#3B2C25; --gris:#6F5E54;
  --ocre:#B9804A; --filet:#C9A57E; --blanc:#FFFDF9;
  --serif:'Cormorant Garamond',Georgia,serif; --sans:'Jost','Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--creme);color:var(--texte);font:300 17px/1.7 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--brun);text-decoration:none}
a:hover{color:var(--ocre)}
:focus-visible{outline:2px solid var(--ocre);outline-offset:3px;border-radius:4px}
.wrap{width:min(1080px,100% - 48px);margin-inline:auto}
.etroit{max-width:720px;margin-inline:auto}
.coeur{width:18px;height:18px;fill:var(--ocre);flex-shrink:0}
.filet{display:flex;align-items:center;gap:14px}
.filet span{width:56px;height:1px;background:var(--filet)}
.filet.centre{justify-content:center}
h1,h2,h3{font-family:var(--serif);font-weight:500;color:var(--brun);margin:0}
h2{font-style:italic;font-size:clamp(1.9rem,3.4vw,2.5rem);line-height:1.15;text-wrap:balance}
h3{font-size:1.45rem;line-height:1.2}
p{margin:0}
.texte p+p{margin-top:14px}
strong{font-weight:500}
.surtitre{font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--feuille);font-weight:400}

/* ---------- En-tête et menu ---------- */
header{position:sticky;top:0;z-index:20;background:rgba(249,245,240,.92);backdrop-filter:blur(8px);border-bottom:1px solid rgba(201,165,126,.45)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand img{height:40px;width:auto}
.menu{display:flex;align-items:center;gap:26px;font-size:15px;font-weight:400}
.menu a{color:var(--texte);padding:6px 0;border-bottom:1px solid transparent}
.menu a:hover{color:var(--brun);border-bottom-color:var(--filet)}
.menu a[aria-current="page"]{color:var(--brun);border-bottom-color:var(--ocre)}
.menu .menu-rdv{padding:9px 20px;border:0;border-radius:999px;background:var(--sauge);color:var(--creme)}
.menu .menu-rdv:hover{background:var(--brun);color:var(--creme)}
.burger{display:none;background:none;border:0;width:44px;height:44px;padding:10px;cursor:pointer}
.burger span{display:block;height:1.5px;background:var(--brun);margin:5px 0}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 30px;border-radius:999px;border:1px solid var(--sauge);background:var(--sauge);color:var(--creme);font:500 15px var(--sans);letter-spacing:.04em;cursor:pointer;transition:background .2s,color .2s}
.btn:hover{background:var(--brun);border-color:var(--brun);color:var(--creme)}
.btn.clair{background:transparent;color:var(--sauge)}
.btn.clair:hover{background:var(--sauge);color:var(--creme);border-color:var(--sauge)}
.boutons{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}

/* ---------- Bandeau de page ---------- */
.page-hero{position:relative;overflow:hidden;padding:44px 0 72px;background:radial-gradient(ellipse at 85% 30%,rgba(167,165,145,.22),transparent 60%)}
.fil{display:flex;gap:8px;font-size:14px;color:var(--gris);margin-bottom:28px}
.fil a{color:var(--gris);text-decoration:underline;text-decoration-color:var(--filet);text-underline-offset:3px}
.hero-grille{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:center}
.page-hero h1{font-style:italic;font-size:clamp(2.6rem,5.4vw,4rem);line-height:1.05;margin:12px 0 18px}
.page-hero .chapo{font-family:var(--serif);font-size:clamp(1.3rem,2.2vw,1.6rem);line-height:1.45;color:var(--sauge);max-width:560px}
.hero-image{justify-self:center;width:min(380px,100%);animation:apparition 1.1s ease-out both}
.hero-image.portrait{width:min(300px,80%)}
.hero-texte{animation:apparition 1s ease-out both}
@keyframes apparition{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Sommaire de page */
.sommaire{border-block:1px solid rgba(201,165,126,.45);background:var(--creme-fonce)}
.sommaire .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding-block:14px}
.sommaire span{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--gris);margin-right:6px}
.sommaire a{font-size:15px;padding:6px 16px;border-radius:999px;background:var(--blanc);border:1px solid #DCD0BD}
.sommaire a:hover{border-color:var(--ocre);color:var(--brun)}

/* ---------- Sections ---------- */
.bloc{position:relative;padding:88px 0}
.bloc.teinte{background:var(--voile)}
.bloc + .bloc:not(.teinte){border-top:1px solid rgba(201,165,126,.35)}
.entete{text-align:center;max-width:680px;margin:0 auto 48px;display:flex;flex-direction:column;align-items:center;gap:12px}
.entete p{color:var(--gris)}
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.duo.inverse > :first-child{order:2}
.duo h2{margin:10px 0 20px}
.visuel{position:relative;justify-self:center;width:min(420px,100%)}
.visuel.cadre img{border-radius:200px 200px 24px 24px;box-shadow:0 18px 40px rgba(74,44,32,.12)}
.visuel .deco{position:absolute;width:110px;right:-34px;bottom:-30px;pointer-events:none}
.decor{position:absolute;pointer-events:none;opacity:.85}

/* Cartes */
.cartes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.cartes.deux-col{grid-template-columns:repeat(2,minmax(0,1fr))}
.carte{background:var(--blanc);border:1px solid #E4DACA;border-radius:18px;padding:28px 26px;display:flex;flex-direction:column;gap:10px;transition:transform .25s,box-shadow .25s}
.carte:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(74,44,32,.08)}
.carte h3{font-size:1.35rem}
.carte p{font-size:16px;line-height:1.6}
.ico-rond{width:52px;height:52px;border-radius:50%;background:var(--voile);display:grid;place-items:center;margin-bottom:4px}
.ico-rond svg{width:26px;height:26px;fill:none;stroke:var(--ocre);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}

/* Liste « aujourd'hui » */
.ressentis{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ressentis li{display:flex;gap:14px;align-items:flex-start;background:var(--blanc);border-radius:14px;padding:18px 20px;border-left:3px solid var(--filet)}
.ressentis li:last-child:nth-child(odd){grid-column:1 / -1}
.ressentis .coeur{margin-top:5px;width:15px;height:15px;fill:var(--sauge)}
.question{text-align:center;margin-top:40px;font-family:var(--serif);font-style:italic;font-size:clamp(1.4rem,2.6vw,1.8rem);color:var(--sauge);text-wrap:balance}

/* Chemin en étapes (frise verticale) */
.etapes{list-style:none;margin:0;padding:0;position:relative;display:flex;flex-direction:column;gap:26px;counter-reset:etape}
.etapes li:not(:last-child)::after{content:"";position:absolute;left:27px;top:56px;bottom:-26px;border-left:1.5px dashed var(--filet)}
.etapes li{position:relative;display:grid;grid-template-columns:56px 1fr;gap:20px;align-items:start;counter-increment:etape}
.etapes li::before{content:counter(etape);width:56px;height:56px;border-radius:50%;background:var(--creme);border:1.5px solid var(--ocre);display:grid;place-items:center;font:500 1.5rem var(--serif);color:var(--brun);position:relative}
.etapes h3{font-size:1.4rem;margin-top:10px}
.etapes p{color:var(--gris);font-size:16px;margin-top:4px}
.etapes.legers li::before{background:var(--ocre);color:var(--creme)}

/* Bandeau citation */
.bande{position:relative;overflow:hidden;background:var(--sauge);color:var(--creme);padding:80px 0;text-align:center}
.bande p{font-family:var(--serif);font-style:italic;font-size:clamp(1.8rem,3.6vw,2.6rem);line-height:1.25;max-width:760px;margin-inline:auto;text-wrap:balance}
.bande .petit{font:300 17px/1.7 var(--sans);font-style:normal;max-width:560px;margin-top:18px;opacity:.9}
.bande img{position:absolute;opacity:.18;pointer-events:none}

/* Deux colonnes « Mon rôle / votre engagement » */
.accord{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.accord > div{border-radius:18px;padding:32px 30px;background:var(--blanc);border:1px solid #E4DACA}
.accord > div:last-child{background:var(--creme-fonce)}
.accord h3{font-style:italic;font-size:1.6rem;margin-bottom:10px}

/* Encadré informatif */
.note{display:flex;gap:16px;align-items:flex-start;background:var(--creme-fonce);border-radius:14px;padding:20px 22px;font-size:15.5px;line-height:1.6;margin-top:26px}
.note svg{width:24px;height:24px;flex-shrink:0;fill:none;stroke:var(--ocre);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}

/* Thème numérologique : liste de nombres */
.theme{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.theme div{padding:22px 22px 20px;border-top:2px solid var(--filet);background:var(--blanc);border-radius:0 0 14px 14px}
.theme h3{font-size:1.3rem}
.theme .source{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ocre);margin:2px 0 8px}
.theme p{font-size:15.5px;line-height:1.6}

/* Calculateur chemin de vie */
.calcul{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px;align-items:center;background:var(--blanc);border:1px solid #E4DACA;border-radius:26px;padding:44px}
.calcul form{display:flex;flex-direction:column;gap:12px}
.calcul label{font-size:14px;color:var(--brun)}
.calcul input{font:300 16px var(--sans);color:var(--texte);background:var(--creme);border:1px solid #D8CDBB;border-radius:10px;padding:12px 14px;min-height:48px}
.calcul input:focus{outline:2px solid var(--ocre);outline-offset:1px;border-color:transparent}
.resultat{text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;min-height:260px;justify-content:center}
.resultat .nombre{width:132px;height:132px;border-radius:50%;display:grid;place-items:center;font:500 4rem var(--serif);color:var(--brun);background:radial-gradient(circle,var(--creme) 55%,rgba(185,128,74,.18));border:1.5px solid var(--ocre)}
.resultat .titre{font-family:var(--serif);font-style:italic;font-size:1.6rem;color:var(--sauge)}
.resultat .detail{font-size:14px;color:var(--gris)}
.resultat .vide{color:var(--gris);font-style:italic}
.resultat img{width:150px;opacity:.9}

/* Questions fréquentes */
.faq{display:flex;flex-direction:column;gap:12px}
.faq details{background:var(--blanc);border:1px solid #E4DACA;border-radius:14px;padding:0 22px}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;font-family:var(--serif);font-size:1.3rem;font-weight:500;color:var(--brun)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:300 1.6rem var(--sans);color:var(--ocre);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 20px;color:var(--gris);font-size:16px}

/* Boîte à outils / suite du chemin */
.suite{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.suite a{display:grid;grid-template-columns:110px 1fr;gap:22px;align-items:center;background:var(--blanc);border:1px solid #E4DACA;border-radius:20px;padding:22px;color:var(--texte);transition:transform .25s,box-shadow .25s}
.suite a:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(74,44,32,.08);color:var(--texte)}
.suite img{width:110px;height:110px;object-fit:contain}
.suite h3{font-size:1.45rem}
.suite p{font-size:15.5px;line-height:1.55;margin-top:4px;color:var(--gris)}
.suite .lien{display:inline-block;margin-top:8px;font-size:14px;letter-spacing:.06em;color:var(--sauge);font-weight:400}
.suite a:hover .lien{color:var(--ocre)}

/* Appel au rendez-vous */
.cta{padding:88px 0 96px;text-align:center}
.cta .wrap{display:flex;flex-direction:column;align-items:center;gap:14px}
.cta img{width:min(260px,70%)}
.cta p{max-width:540px;color:var(--gris)}
.cta .boutons{justify-content:center;margin-top:12px}

/* ---------- Pied de page ---------- */
footer{background:var(--creme-fonce);border-top:1px solid var(--filet);padding:36px 0 30px;font-size:14px}
.pied{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.pied img{height:34px;width:auto}
.pied nav{display:flex;flex-wrap:wrap;gap:22px}
.pied-bas{margin-top:22px;padding-top:16px;border-top:1px solid rgba(201,165,126,.5);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;color:var(--gris)}
.pied-bas a{color:var(--gris)}

/* ---------- Apparition douce au défilement ---------- */
.revele{opacity:0;transform:translateY(16px);transition:opacity .8s ease,transform .8s ease}
.revele.vu{opacity:1;transform:none}

/* ---------- Tablette / mobile ---------- */
@media (max-width:980px){
  .menu{gap:18px;font-size:14.5px}
  .cartes,.theme{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .menu{position:fixed;top:72px;right:0;bottom:0;width:min(300px,85vw);flex-direction:column;align-items:flex-start;gap:18px;padding:30px 28px;background:var(--creme);box-shadow:-8px 0 24px rgba(74,44,32,.08);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;font-size:16px}
  .menu.open{opacity:1;visibility:visible}
  .menu .menu-rdv{margin-top:6px}
  .burger{display:block}
  .hero-grille,.duo,.calcul{grid-template-columns:1fr;gap:40px}
  .duo.inverse > :first-child{order:0}
  .hero-image{width:min(260px,70%);order:-1}
  .page-hero{padding-top:28px}
  .bloc{padding:64px 0}
  .ressentis,.accord,.suite,.cartes.deux-col{grid-template-columns:1fr}
  .calcul{padding:28px 22px}
}
@media (max-width:600px){
  .cartes,.theme{grid-template-columns:1fr}
  .suite a{grid-template-columns:76px 1fr;gap:16px;padding:18px}
  .suite img{width:76px;height:76px}
  .visuel .deco{width:80px;right:-8px}
  .sommaire span{width:100%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-image,.hero-texte{animation:none}
  .revele{opacity:1;transform:none;transition:none}
  .carte,.suite a{transition:none}
}
.hero-image.large{width:min(460px,100%)}