/* Une lettre de Sylvie : portrait, texte à la première personne, intertitres sobres, listes plutôt que cartes */
:root{
  --papier:#F7F2EC; --blanc:#FCFAF7; --sable:#F0E8DF; --peche:#F4E5DB;
  --encre:#3A3631; --texte:#544E47; --gris:#58524C; --filet:#E6DCD0;
  --aube:#985640; --aube-clair:#E3B4A0; --afaire:#F2D7C8;
  --calme:#4B5B44; --calme-f:#3D4B37;
  --display:"Marcellus","Trajan Pro",Georgia,serif;
  --corps:"Figtree",-apple-system,"Segoe UI",Arial,sans-serif;
  --gut:clamp(18px,5vw,64px);
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:calc(84px + env(safe-area-inset-top,0px))}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--papier);color:var(--texte);font-family:var(--corps);font-size:18.5px;line-height:1.8}
h1,h2,h3{margin:0;color:var(--encre);font-family:var(--display);font-weight:400;font-synthesis:none;text-wrap:balance;letter-spacing:0}
p{margin:0}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--calme);outline-offset:3px}
.wrap{max-width:1120px;margin-inline:auto;padding-inline:var(--gut)}
.etroit{max-width:700px;margin-inline:auto;padding-inline:var(--gut)}
.lien{color:var(--calme);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;font-weight:500}
.lien:hover{text-decoration-thickness:2px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 26px;border-radius:8px;border:1px solid var(--calme);background:var(--calme);color:#FFFFFF;font-weight:500;font-size:16px;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--calme-f);border-color:var(--calme-f)}
.btn.clair{background:transparent;color:var(--calme);border-color:#CBD2C3}
.btn.clair:hover{background:var(--sable)}
.afaire{background:var(--afaire);color:var(--encre);padding:0 6px;border-radius:3px;font-size:.92em}
.etiquette{font-size:15px;color:var(--gris)}


/* en-tête */
.hd{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:color-mix(in srgb,var(--papier) 94%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid color-mix(in srgb,var(--filet) 60%,transparent)}
.hd .barre{display:flex;align-items:center;gap:clamp(18px,2.4vw,32px);min-height:76px}
.logo{display:flex;flex-direction:column;text-decoration:none;color:var(--encre);flex:none;line-height:1}
.logo b{font-family:var(--display);font-weight:400;font-size:25px;letter-spacing:.02em}
.logo b i{font-style:normal;color:var(--aube)}
.logo small{font-size:10.5px;color:var(--gris);letter-spacing:.2em;text-transform:uppercase;margin-top:6px;font-weight:600}
.nav{display:flex;gap:clamp(18px,2.2vw,30px);margin-left:auto;align-items:center}
.nav a{text-decoration:none;font-size:15.5px;color:var(--texte);white-space:nowrap}
.nav a:hover{color:var(--encre);text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--calme)}
.menu-btn{display:none;width:44px;height:44px;border:1px solid var(--filet);border-radius:8px;background:transparent;color:var(--encre);align-items:center;justify-content:center;margin-left:auto;flex:none}
.menu-m{border-top:1px solid var(--filet)}
.hd .menu-m .wrap{display:flex;flex-direction:column;padding-block:6px 16px}
.menu-m a{padding:13px 0;border-bottom:1px solid var(--filet);text-decoration:none;color:var(--encre);font-family:var(--display);font-size:23px}
.menu-m a:last-child{border-bottom:0}
.nav .btn{min-height:42px;padding:0 20px;color:#FFFFFF}
.nav .btn:hover{color:#FFFFFF;text-decoration:none}
.contact-m{display:none}
@media (max-width:1060px){.nav{display:none}.menu-btn{display:inline-flex;margin-left:0}.contact-m{display:inline-flex;margin-left:auto;min-height:44px;padding:0 18px;font-size:15.5px}}
@media (max-width:420px){.hd .barre{gap:10px}.contact-m{padding:0 14px}.hd .logo b{font-size:23px}.hd .logo small{font-size:10px;letter-spacing:.05em}}
@media (max-width:349px){.contact-m{display:none}.menu-btn{margin-left:auto}}
@media (min-width:1061px){.menu-m{display:none!important}}

/* ouverture : portrait + lettre */
.ouverture .wrap{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,6vw,88px);align-items:center;padding-block:clamp(40px,6vw,88px)}
@media (max-width:860px){.ouverture .wrap{grid-template-columns:1fr}}
.portrait{aspect-ratio:4/5;width:100%;max-width:420px;border-radius:10px;background:#EAE0D5;display:flex;align-items:center;justify-content:center;padding:22px;overflow:hidden}
@media (max-width:860px){.portrait{max-width:200px;margin-inline:0;order:-1}}
.lettre{display:flex;flex-direction:column;gap:20px;min-width:0}

.lettre p{max-width:34em}
.signature{font-family:var(--display);font-size:24px;color:var(--encre)}
.pratique{display:flex;flex-wrap:wrap;gap:14px;align-items:center;padding-top:6px}
.pratique .info{font-size:15.5px;color:var(--gris)}

/* sections éditoriales */
.sec{padding-block:clamp(84px,10vw,144px)}
.sable{background:var(--sable)}
.sable + .sec,.sec + .sable{border-top:0}
.sec h2{font-size:clamp(32px,3.6vw,44px);line-height:1.15}
.intro{margin-top:16px;max-width:36em}

/* situations : liste à deux colonnes */
.liste{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 56px}
@media (max-width:700px){.liste{grid-template-columns:1fr}}
.liste li{padding:12px 0}


/* approches : texte en colonnes séparées par des filets */
.approches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,56px);margin-top:44px}
@media (max-width:860px){.approches{grid-template-columns:1fr}}
.approche{display:flex;flex-direction:column;gap:12px;min-width:0}

.approche h3{font-size:28px}
.approche .qui-pour{font-size:15.5px;color:var(--gris)}

/* séance et tarif : texte + encadré simple */
.seance{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(28px,6vw,80px);align-items:start;margin-top:8px}
@media (max-width:860px){.seance{grid-template-columns:1fr}}
.seance .txt{display:flex;flex-direction:column;gap:16px}
.encadre{border-radius:14px;padding:30px 32px;display:flex;flex-direction:column;gap:6px;background:var(--blanc)}
.encadre .prix{font-family:var(--display);font-size:56px;line-height:1;color:var(--encre)}
.encadre .det{font-size:16px;color:var(--texte)}
.encadre hr{border:0;border-top:1px solid var(--filet);margin:12px 0}

/* qui suis-je */
.citation{font-family:var(--display);font-size:clamp(26px,3vw,36px);line-height:1.3;color:var(--encre);margin:28px 0 24px;max-width:22em}
.citation::before{content:"«\00a0";color:var(--aube)}
.citation::after{content:"\00a0»";color:var(--aube)}
.texte-long{display:flex;flex-direction:column;gap:16px}

/* questions */
.faq{margin-top:28px}
.faq .q{border-top:1px solid var(--filet);padding:22px 0}
.faq .q:last-child{border-bottom:1px solid var(--filet)}
.faq h3{font-family:var(--corps);font-weight:500;font-size:19px;line-height:1.5;color:var(--encre)}
.faq p{margin-top:8px}
/* questions dépliables */
.faq .q-btn{display:flex;justify-content:space-between;align-items:baseline;gap:16px;width:100%;margin:0;padding:0;border:0;background:none;text-align:left;font:inherit;color:inherit;cursor:pointer}
.faq .q-btn::after{content:"+";flex:none;color:var(--calme);font-size:24px;line-height:1}
.faq .q-btn[aria-expanded="true"]::after{content:"\2212"}
.faq .q-rep p{margin-top:10px}

/* contact */
.temoignages{display:flex;flex-direction:column;gap:30px;margin-top:34px}
.temoignages figure{margin:0}
.temoignages blockquote{margin:0;font-family:var(--display);font-size:clamp(21px,2.2vw,26px);line-height:1.4;color:var(--encre)}
.temoignages figcaption{margin-top:8px;font-size:15px;color:var(--gris)}
.h1-sous{font-family:var(--display);font-size:clamp(21px,2.1vw,25px);line-height:1.35;color:var(--texte);margin-top:-6px}
.accroche{font-family:var(--display);font-size:clamp(38px,4.6vw,58px);line-height:1.12;color:var(--encre)}
.h3-sec{font-size:24px;margin:40px 0 4px}
.portrait{position:relative}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;border-radius:inherit}
.liens-pages{display:flex;flex-direction:column;gap:6px;margin-top:auto}
.tarifs{width:100%;border-collapse:collapse;margin-top:28px;font-size:17px}
.tarifs th{text-align:left;font-weight:500;font-size:14.5px;color:var(--gris);padding:0 0 10px;border-bottom:1px solid var(--filet)}
.tarifs td{padding:16px 0;border-bottom:1px solid var(--filet);color:var(--encre);vertical-align:top}
.tarifs td small{display:block;font-size:14.5px;color:var(--gris);margin-top:2px}
.tarifs th:nth-child(n+2),.tarifs td:nth-child(n+2){text-align:right;white-space:nowrap;padding-left:16px}
@media (max-width:420px){.tarifs td:nth-child(2){white-space:normal}.tarifs th:nth-child(n+2),.tarifs td:nth-child(n+2){padding-left:12px}}
.note-tarif{margin-top:16px;font-size:15.5px;color:var(--gris)}
.phrases{display:flex;flex-direction:column;gap:10px}
.phrases.intro{margin-top:16px}
.approche p + p{margin-top:-4px}
.exemple{display:inline-block;margin-left:8px;font-family:var(--corps);font-size:11.5px;font-weight:600;letter-spacing:.04em;color:var(--gris);border:1px solid var(--filet);border-radius:4px;padding:0 6px;vertical-align:middle}
@media (max-width:560px){.hd .logo,footer .logo{flex:1 1 auto;min-width:0}.logo small{letter-spacing:.12em;line-height:1.45;margin-top:5px}}
.contact{background:var(--peche)}
.contact .coord{margin-top:30px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:28px}
@media (max-width:700px){.contact .coord{grid-template-columns:1fr}}
.contact .val{font-family:var(--display);font-size:clamp(20px,2.1vw,25px);color:var(--encre);overflow-wrap:break-word;margin:4px 0 12px}
.contact .act{display:flex;gap:10px;flex-wrap:wrap}

/* pages SEO */
.page-hd{background:var(--sable);padding-block:clamp(48px,7vw,96px)}
.page-hd .wrap{display:flex;flex-direction:column;gap:16px}
.page-hd h1{font-size:clamp(36px,4.8vw,58px);line-height:1.12;max-width:17em}
.page-hd h1 em{font-style:normal}
.page-hd p{max-width:36em}
.fil{font-size:14px;color:var(--gris)}
.fil a{color:var(--gris)}
.sec .article{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr);gap:clamp(28px,5vw,64px);align-items:start}
@media (max-width:860px){.sec .article{grid-template-columns:1fr}}
.article .corps{display:flex;flex-direction:column;gap:16px;max-width:40em}
.article h2{font-size:clamp(26px,2.8vw,34px);margin-top:18px}
.article ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.cote{position:sticky;top:100px;display:flex;flex-direction:column;gap:14px}
@media (max-width:860px){.cote{position:static}}
.cote .note{font-size:14px;color:var(--gris)}

footer{border-top:1px solid var(--filet);padding-block:36px calc(30px + env(safe-area-inset-bottom,0px));font-size:14.5px;color:var(--gris)}
footer .wrap{display:flex;flex-direction:column;gap:14px}
.comprendre{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:baseline}
.comprendre span{color:var(--encre);font-weight:500}
.comprendre a{color:var(--gris)}
footer .l1{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
.js .doux{opacity:0;transform:translateY(14px);transition:opacity 1.1s ease,transform 1.1s ease}
.js .doux.vu{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .doux{opacity:1;transform:none;transition:none}}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--encre);color:var(--papier);padding:10px 18px;border-radius:8px;font-size:14.5px;z-index:60;max-width:calc(100% - 32px)}

/* pages légales */
.legal h2{font-size:clamp(24px,2.6vw,30px);margin:40px 0 10px}
.legal h2:first-child{margin-top:0}
.legal p + p{margin-top:12px}
.encadre .btn{margin-top:4px}
.encadre a:not(.btn){color:var(--calme)}
.contact h3.etiquette{font-family:var(--corps);font-size:15px;line-height:1.8;color:var(--gris)}

/* le chemin : des pointillés qui deviennent un 2, tracé une seule fois quand il apparaît */
.chemin{display:block;width:100%;max-width:560px;height:auto;margin:44px 0 8px;overflow:visible}
.chemin .avant{fill:none;stroke:var(--gris);stroke-opacity:.55;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:.1 9}
.chemin .revele{fill:none;stroke:#fff;stroke-width:18;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.chemin .apres{fill:none;stroke:var(--aube);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.chemin .pt{fill:var(--aube)}
.js .chemin .revele,.js .chemin .apres{stroke-dashoffset:1}
.js .chemin .pt{opacity:0}
.js .chemin.trace .revele{animation:chemin-trace 2.2s cubic-bezier(.45,.05,.35,1) forwards}
.js .chemin.trace .apres{animation:chemin-trace 1.5s cubic-bezier(.45,.05,.25,1) 2.05s forwards}
.js .chemin.trace .pt{animation:chemin-pt .7s ease 3.5s forwards}
@keyframes chemin-trace{to{stroke-dashoffset:0}}
@keyframes chemin-pt{to{opacity:1}}

/* vignette de Sylvie dans l'encadré des pages thématiques */
.praticienne{display:flex;gap:16px;align-items:center;margin-bottom:6px}
.praticienne img{width:72px;height:90px;object-fit:cover;object-position:50% 30%;border-radius:6px;flex:none}
.praticienne p{font-size:15px;line-height:1.5;color:var(--gris)}
.praticienne b{display:block;font-family:var(--display);font-weight:400;font-size:22px;line-height:1.25;color:var(--encre)}
#qui .signature{margin-top:24px}
@media (max-width:560px){.chemin .avant{stroke-width:3.6;stroke-dasharray:.1 13}.chemin .apres{stroke-width:5}.chemin .pt{r:6.5}}

/* témoignages laissés par les personnes accompagnées */
.temoin-actions{margin-top:30px;display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center}
.temoin-note{margin-top:14px;font-size:14.5px;color:var(--gris);max-width:36em}
.temoin-vide{margin-top:24px;max-width:36em}
.temoignages blockquote{white-space:pre-line}
.temoin-plus{display:inline-block;margin-top:24px;padding:0;border:0;background:none;font:inherit;font-weight:500;color:var(--calme);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;cursor:pointer}
.temoin-plus:hover{text-decoration-thickness:2px}