/* Plusieurs pratiques · « Pigment » : éditorial, façon magazine.
   Ivoire et encre, une couleur d’accent par pratique ; Bodoni Moda et Manrope.
   Chapitres numérotés, lettrines, exergue ; le sélecteur recolore la page entière. */
:root{
  --ivoire:#F6F2EB; --encre:#1A1918; --gris:#5F5B55; --filet:#DDD5C8;
  --titre:"Bodoni Moda",Didot,Georgia,serif; --texte:"Manrope",system-ui,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --accent:#A8653F; --teinte:#F1E3D6;
}
[data-pratique="reflexologie"]{--accent:#A8653F;--teinte:#F1E3D6}
[data-pratique="sophrologie"]{--accent:#6D62A6;--teinte:#E9E6F4}
[data-pratique="massage"]{--accent:#B84A33;--teinte:#F5DED6}
[data-pratique="naturopathie"]{--accent:#3D6644;--teinte:#E0EADF}
@property --accent{syntax:"<color>";inherits:true;initial-value:#A8653F}
@property --teinte{syntax:"<color>";inherits:true;initial-value:#F1E3D6}
html{transition:--accent .8s var(--ease),--teinte .8s var(--ease)}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ivoire);color:var(--encre);font:400 1.03rem/1.7 var(--texte);overflow-x:hidden}
body.fige{overflow:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
a,button,summary,select,label{cursor:pointer}
input,textarea{cursor:text}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
em{font-style:italic;color:var(--accent)}

.demo{margin:0;padding:.45rem 1rem;background:var(--encre);color:#CFC8BC;font-size:.74rem;text-align:center}
#jauge{position:fixed;top:0;left:0;right:0;height:3px;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);z-index:60}

.enveloppe{width:min(1240px,100% - 2.5rem);margin-inline:auto}
.etroit{width:min(900px,100% - 2.5rem)}
.sect{padding-block:clamp(4.5rem,9vw,8rem)}
.sect--teinte{background:var(--teinte)}
.sect--encre{background:var(--encre);color:var(--ivoire)}

.rubrique{font:600 .72rem var(--texte);letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin:0 0 .8rem}
.titre{font:400 clamp(2.1rem,4.6vw,3.8rem)/1.05 var(--titre);margin:0;letter-spacing:-.01em;text-wrap:balance}
.sect--encre .titre em,.sect--encre .rubrique{color:color-mix(in srgb,var(--accent) 45%,#fff)}
.note{font-size:.88rem;color:var(--gris);margin-top:1.6rem}
.sect--encre .note{color:#A8A197}

/* Chapitres : grand numéro romain + titre */
.chapitre{display:grid;grid-template-columns:auto 1fr;gap:clamp(1rem,3vw,2.5rem);align-items:start;margin-bottom:clamp(2.5rem,5vw,4rem);padding-top:1.4rem;border-top:1px solid var(--encre)}
.sect--encre .chapitre{border-color:rgba(246,242,235,.4)}
.chapitre__n{font:italic 400 clamp(3.4rem,8vw,7rem)/.8 var(--titre);color:var(--accent)}
.sect--encre .chapitre__n{color:color-mix(in srgb,var(--accent) 45%,#fff)}
.chapitre--centre{grid-template-columns:1fr;text-align:center}

/* Lettrines */
.lettrine::first-letter{float:left;font:400 4.6em/.8 var(--titre);color:var(--accent);margin:.08em .12em 0 0}
.lettrine--petite::first-letter{font-size:3.4em}

/* Boutons */
.btn{display:inline-flex;align-items:center;gap:.7rem;padding:1rem 1.6rem;background:var(--encre);color:var(--ivoire);text-decoration:none;font:600 .9rem var(--texte);letter-spacing:.04em;border:1px solid var(--encre);transition:background .45s var(--ease),border-color .45s,color .45s}
.btn:hover{background:var(--accent);border-color:var(--accent)}
.btn .fl{transition:transform .4s var(--ease)}
.btn:hover .fl{transform:translateX(5px)}
.btn--petit{padding:.6rem 1.1rem;font-size:.82rem}
.btn--clair{background:var(--ivoire);color:var(--encre);border-color:var(--ivoire)}
.btn--clair:hover{color:var(--ivoire)}

/* En-tête */
.entete{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:1.5rem;padding:1rem clamp(1.25rem,4vw,3rem);background:var(--ivoire);border-bottom:1px solid var(--filet);transition:padding .35s}
.entete.serre{padding-block:.55rem}
.marque{font:500 1.5rem var(--titre);text-decoration:none;margin-right:auto;letter-spacing:.01em}
.marque i{color:var(--accent)}
.menu{display:none;list-style:none;margin:0;padding:0;gap:1.8rem}
.menu a{text-decoration:none;font-size:.88rem;position:relative}
.menu a::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1px;background:var(--accent);transform:scaleX(0);transition:transform .4s var(--ease)}
.menu a:hover::after{transform:scaleX(1)}
.entete .btn--petit{display:none}
.burger{border:1px solid var(--encre);background:none;padding:.55rem 1rem;font:600 .78rem var(--texte);letter-spacing:.14em;text-transform:uppercase;color:var(--encre)}
.burger[aria-expanded="true"]{background:var(--encre);color:var(--ivoire)}
.tiroir{position:fixed;inset:0;z-index:45;background:var(--teinte);display:flex;flex-direction:column;justify-content:center;gap:.4rem;padding:2rem;transform:translateX(100%);transition:transform .6s var(--ease);visibility:hidden}
.tiroir.ouvert{transform:none;visibility:visible}
.tiroir a{font:400 clamp(1.9rem,8vw,2.6rem)/1.2 var(--titre);text-decoration:none;display:flex;gap:1rem;align-items:baseline}
.tiroir small{font:italic 400 1rem var(--titre);color:var(--accent);width:1.6rem}
@media (min-width:1080px){.menu{display:flex}.entete .btn--petit{display:inline-flex}.burger,.tiroir{display:none}}

/* Le sélecteur de pratique */
.selecteur{position:sticky;top:calc(3.6rem + 1px);z-index:40;display:flex;gap:.4rem;align-items:center;overflow-x:auto;scrollbar-width:none;padding:.6rem clamp(1.25rem,4vw,3rem);background:color-mix(in srgb,var(--teinte) 85%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--filet)}
.selecteur::-webkit-scrollbar{display:none}
.selecteur__lib{font:italic 400 .95rem var(--titre);color:var(--gris);white-space:nowrap;margin-right:.4rem}
.selecteur button{flex:none;display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--filet);background:var(--ivoire);padding:.45rem .9rem;border-radius:999px;font:500 .84rem var(--texte);color:var(--encre);transition:border-color .3s,background .3s,color .3s}
.selecteur button i{width:10px;height:10px;border-radius:50%}
.selecteur [data-choix="reflexologie"] i{background:#A8653F}
.selecteur [data-choix="sophrologie"] i{background:#6D62A6}
.selecteur [data-choix="massage"] i{background:#B84A33}
.selecteur [data-choix="naturopathie"] i{background:#3D6644}
.selecteur button:hover{border-color:var(--encre)}
.selecteur button[aria-checked="true"]{background:var(--encre);color:var(--ivoire);border-color:var(--encre)}

/* La une */
.une{padding-block:clamp(2rem,5vw,4rem) clamp(4rem,8vw,6rem)}
.une__bandeau{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-block:1px solid var(--encre);padding:.6rem 0;font:600 .72rem var(--texte);letter-spacing:.16em;text-transform:uppercase}
.une__bandeau span:nth-child(2){color:var(--accent)}
.titre-une{font:400 clamp(2.8rem,7.6vw,7.4rem)/.98 var(--titre);letter-spacing:-.02em;margin:clamp(1.5rem,4vw,3rem) 0 clamp(2rem,4vw,3rem);text-wrap:balance}
.une__bas{display:grid;gap:2rem}
@media (min-width:960px){.une__bas{grid-template-columns:1.7fr 1fr;gap:3.5rem;align-items:end}}
.une__img .cadre{aspect-ratio:16/9}
.une__texte .btn{margin-top:1.4rem}
figure{margin:0}
figcaption{font-size:.82rem;color:var(--gris);padding-top:.6rem;border-bottom:1px solid var(--filet);padding-bottom:.6rem}
figcaption b{font:italic 500 1rem var(--titre);color:var(--encre)}
.cadre{overflow:hidden;background:var(--teinte);position:relative}
.cadre img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
figure:hover .cadre img{transform:scale(1.04)}

/* I · La pratique choisie */
.pratique{display:grid;gap:2.5rem;align-items:center}
@media (min-width:900px){.pratique{grid-template-columns:1fr 1fr;gap:5rem}}
.pratique__img .cadre{aspect-ratio:4/5}
.pratique__img img{position:absolute;inset:0;opacity:0;transition:opacity .9s var(--ease),transform 1.4s var(--ease)}
.pratique__img img.actif{opacity:1}
.pratique__textes h3{font:italic 400 clamp(2.6rem,5vw,4.2rem)/1 var(--titre);color:var(--accent);margin:0 0 .6rem}
.pratique__textes article{animation:entre .7s var(--ease)}
@keyframes entre{from{opacity:0;transform:translateY(14px)}}
.pratique__meta{font:600 .75rem var(--texte);letter-spacing:.14em;text-transform:uppercase;margin:0 0 1.2rem}
.pratique__form{font-size:.88rem;color:var(--gris);border-top:1px solid var(--filet);padding-top:.8rem}
.pratique__astuce{font:italic 400 1rem var(--titre);color:var(--gris);margin-top:2rem}

/* Exergue */
.exergue{background:var(--accent);color:var(--ivoire);padding-block:clamp(4rem,9vw,7rem)}
.exergue p{font:italic 400 clamp(1.9rem,4.4vw,3.6rem)/1.15 var(--titre);margin:0 auto;text-align:center;max-width:980px}
.exergue em{color:var(--ivoire);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}

/* II · Trois niveaux */
.trois{display:grid;gap:0;border-top:1px solid var(--filet)}
@media (min-width:880px){.trois{grid-template-columns:repeat(3,1fr)}}
.trois article{padding:2rem 0;border-bottom:1px solid var(--filet)}
@media (min-width:880px){.trois article{padding:2rem 2rem 2rem 0;border-bottom:0}.trois article+article{border-left:1px solid var(--filet);padding-left:2rem}}
.jauge-part{display:flex;gap:6px;margin-bottom:1.4rem}
.jauge-part i{width:34px;height:6px;background:var(--filet)}
.jauge-part i.plein{background:var(--accent)}
.trois h3{font:400 1.7rem/1.15 var(--titre);margin:0 0 .4rem}
.trois__qui{font:600 .74rem var(--texte);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 .8rem}
.trois p:last-child{margin:0;color:var(--gris)}

/* III · Six règles */
.regles{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:r}
@media (min-width:700px){.regles{grid-template-columns:1fr 1fr}}
@media (min-width:1040px){.regles{grid-template-columns:repeat(3,1fr)}}
.regles li{counter-increment:r;padding:1.8rem 1.6rem 1.8rem 0;border-top:1px solid color-mix(in srgb,var(--encre) 20%,transparent)}
.regles li::before{content:counter(r,decimal-leading-zero);font:italic 400 1.2rem var(--titre);color:var(--accent)}
.regles h3{font:400 1.55rem/1.15 var(--titre);margin:.4rem 0 .4rem}
.regles p{margin:0;color:var(--gris)}

/* IV · Le cabinet, mise en page de magazine */
.mag{display:grid;gap:1.6rem 1.4rem;grid-template-columns:1fr 1fr}
.mag__a,.mag__texte,.mag__b,.mag__e{grid-column:1/-1}
.mag__a .cadre{aspect-ratio:16/9}
.mag__b .cadre,.mag__e .cadre{aspect-ratio:3/2}
.mag__c .cadre,.mag__d .cadre{aspect-ratio:4/5}
@media (min-width:960px){
  .mag{grid-template-columns:repeat(12,1fr);gap:2.4rem 1.6rem;align-items:start}
  .mag__a{grid-column:1/9}
  .mag__texte{grid-column:9/13;align-self:end}
  .mag__b{grid-column:1/6}
  .mag__c{grid-column:6/9;margin-top:4rem}
  .mag__d{grid-column:9/13;margin-top:0}
  .mag__e{grid-column:1/9;margin-top:-6rem;width:70%}
}

/* Tarifs */
.tarifs{margin:0;border-top:1px solid var(--encre)}
.tarifs div{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:1.2rem 0;border-bottom:1px solid color-mix(in srgb,var(--encre) 20%,transparent)}
.tarifs dt{font:400 1.6rem var(--titre)}
.tarifs dd{margin:0;font-weight:600;color:var(--accent);white-space:nowrap}

/* FAQ */
.faq details{border-bottom:1px solid var(--filet)}
.faq summary{list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:baseline;padding:1.3rem 0;font:400 1.45rem/1.25 var(--titre);transition:color .3s}
.faq summary:hover{color:var(--accent)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 1.6rem/1 var(--titre);color:var(--accent);transition:transform .4s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details div{padding-bottom:1.3rem;color:var(--gris);max-width:46em}
.faq details p{margin:0}
.faq details[open] div{animation:entre .6s var(--ease)}

/* Rendez-vous */
.contact{display:grid;gap:3rem}
@media (min-width:900px){.contact{grid-template-columns:1fr 1fr;gap:5rem}}
.coord{margin:0}
.coord div{display:grid;grid-template-columns:7rem 1fr;gap:1rem;padding:.9rem 0;border-bottom:1px solid rgba(246,242,235,.2)}
.coord dt{font:italic 400 1rem var(--titre);color:#BDB5A9}
.coord dd{margin:0}
.form{display:grid;gap:1.1rem;align-content:start}
.form label{display:grid;gap:.4rem;font-size:.82rem;letter-spacing:.06em;color:#CFC8BC}
.form input,.form select,.form textarea{font:inherit;font-size:1rem;letter-spacing:0;color:var(--encre);background:var(--ivoire);border:0;padding:.8rem 1rem;width:100%;border-radius:0}
.form__rgpd{font-size:.82rem;color:#A8A197;margin:0}
.form .btn{justify-self:start}
.form-msg{margin:0;background:var(--teinte);color:var(--encre);padding:1rem;font-size:.92rem}

/* Pied */
.pied{padding-block:4rem 2rem;border-top:1px solid var(--encre);font-size:.9rem}
.pied__marque{font:400 clamp(2.6rem,8vw,6rem)/1 var(--titre);margin:0 0 1rem}
.pied__marque i{color:var(--accent)}
.pied__avert{color:var(--gris);max-width:46em;margin:0 0 1.4rem}
.mentions{border-top:1px solid var(--filet)}
.mentions summary{font-weight:600;padding:.9rem 0}
.mentions div{display:grid;gap:.4rem;color:var(--gris);padding-bottom:1rem}
.mentions p{margin:0}
.pied__bas{font-size:.8rem;color:var(--gris);margin:1rem 0 0}

/* Révélations : comme on tourne une page */
.anim [data-r]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform 1s var(--ease);transition-delay:calc(var(--i,0) * 90ms)}
.anim [data-r].vu{opacity:1;transform:none}
.anim .chapitre[data-r]{transform:none;opacity:1}
.anim .chapitre[data-r] > *{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform 1s var(--ease)}
.anim .chapitre[data-r] > div{transition-delay:.12s}
.anim .chapitre[data-r].vu > *{opacity:1;transform:none}
.anim .chapitre[data-r]{border-top-color:transparent;background:linear-gradient(var(--encre),var(--encre)) 0 0/0 1px no-repeat;transition:background-size 1.2s var(--ease)}
.anim .chapitre[data-r].vu{background-size:100% 1px}
.anim .sect--encre .chapitre[data-r]{background-image:linear-gradient(rgba(246,242,235,.4),rgba(246,242,235,.4))}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* Contenus enrichis (étude du 22/09/2026) : précautions par pratique, tableau de tarifs */
.pratique__prec{font-size:.92rem;color:var(--gris);background:color-mix(in srgb,var(--teinte) 70%,transparent);border-left:2px solid var(--accent);padding:.8rem 1rem;margin:1rem 0}
.pratique__prec b{color:var(--encre);font-weight:600}
.grille-tarifs{overflow-x:auto;-webkit-overflow-scrolling:touch;border-top:1px solid var(--encre)}
.grille-tarifs table{width:100%;border-collapse:collapse}
.grille-tarifs th,.grille-tarifs td{text-align:left;padding:1rem .4rem;border-bottom:1px solid color-mix(in srgb,var(--encre) 20%,transparent);vertical-align:baseline}
.grille-tarifs thead th{font:600 .7rem var(--texte);letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.grille-tarifs tbody th{font:400 1.35rem/1.2 var(--titre)}
.grille-tarifs td{font-weight:600;color:var(--accent);font-size:.92rem}
@media (max-width:560px){.grille-tarifs thead{display:none}.grille-tarifs tr{display:grid;grid-template-columns:1fr 1fr;padding:.8rem 0;border-bottom:1px solid color-mix(in srgb,var(--encre) 20%,transparent)}.grille-tarifs th,.grille-tarifs td{border:0;padding:.15rem 0}.grille-tarifs tbody th{grid-column:1/-1}.grille-tarifs td::before{display:block;font:600 .65rem var(--texte);letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}.grille-tarifs td:nth-of-type(1)::before{content:"Première séance"}.grille-tarifs td:nth-of-type(2)::before{content:"Suivante"}}
.tarifs--autres{margin-top:2rem}
.tarifs--autres dt{font-size:1.25rem}