/* ============================================================
   PAGE SOINS — les deux sections de fin (maquette du 26/09/2026)
   ------------------------------------------------------------
   Chargee sur la seule page soins-energetiques (functions.php).
   Les trois premieres sections restent dans style.css.

   « A distance ou a domicile » et « Reserver un soin » ne
   s activent qu en presence de leurs marqueurs .soins-lieux et
   .soins-conclusion : l ancien balisage n en porte aucun.

   Deux teintes seulement. Les surtitres prennent la teinte des
   soins, --acc #8C5744, lisible a 5,2:1 sur l ivoire ; la phrase
   de liaison, posee sur le fondu du paysage, la meme teinte un
   cran plus sombre (#7B4B3A, 4,9 a 5,6:1 mesures sur le voile de
   390 a 1440 px). Les notes pratiques, --txt3, tiennent 4,8:1. Les traits
   et pictogrammes prennent le cuivre des images livrees, #9E653D,
   qui n est pas destine au texte (4,2:1 seulement).
   ============================================================ */

body.edr-soins-energetiques{--soins-cuivre:#9E653D;--soins-cuivre-trait:rgba(158,101,61,.55)}

/* Surtitre du bandeau, dans la teinte des soins plutot que l or :
   l or de la marque ne tient que 2,9:1 a cette taille. */
body.edr-soins-energetiques .soins-hero .eyebrow{color:var(--acc)}
body.edr-soins-energetiques .soins-hero .eyebrow::before{background:var(--acc)}
/* Le surtitre tient sur une ligne a partir de 1180 px. En dessous, il
   passait a la ligne : il ne garde alors que les modalites, le H1 qui
   suit disant deja « Soins energetiques ». */
@media(max-width:1180px){body.edr-soins-energetiques .soins-hero__offre{display:none}}

/* Un filet cuivre sous les deux titres, comme sous le H1 du bandeau. */
body.edr-soins-energetiques :is(.soins-lieux,.soins-conclusion) h2::after{
  content:"";display:block;width:3rem;height:1px;margin-top:1.45rem;background:var(--soins-cuivre)}
body.edr-soins-energetiques :is(.soins-lieux,.soins-conclusion) h2{margin:0}

/* ------------------------------------------------------------
   A DISTANCE OU A DOMICILE
   Ivoire en haut, rameau qui retombe de l angle, les Alpilles
   en bandeau bas. Le paysage suit le defilement de quelques
   pixels (--soins-paysage-y, pose par main.js sur #modalites).

   Le panorama tient en deux mesures, reprises a chaque palier :
   --pano-plein  le rembourrage bas, ou le paysage est net ;
   --pano-voile  le fondu au-dessus, ou se pose la phrase de liaison
                 (son bord bas est exactement a --pano-voile du haut
                 de l image). Le masque en decoule : le voile reste
                 sous 30 % derriere la phrase, puis le paysage se
                 densifie dans les 5,5rem qui suivent.
   ------------------------------------------------------------ */
body.edr-soins-energetiques .soins-page .entry > .soins-lieux{
  --pano-plein:14rem;--pano-voile:11rem;
  isolation:isolate;border-top:0;padding-block:4.75rem var(--pano-plein);
  background:linear-gradient(180deg,#faf8f4 0,#f9f5ef 50%,#f7f0e6 100%)}
body.edr-soins-energetiques .soins-lieux::before{
  --voile:linear-gradient(180deg,transparent 0,rgba(0,0,0,.12) calc(var(--pano-voile) - 5rem),rgba(0,0,0,.3) var(--pano-voile),
    rgba(0,0,0,.85) calc(var(--pano-voile) + 3rem),#000 calc(var(--pano-voile) + 5.5rem));
  content:"";position:absolute;z-index:-2;left:0;right:0;bottom:0;height:calc(var(--pano-plein) + var(--pano-voile));pointer-events:none;
  background:url("assets/images/soins-panorama-alpilles-1672.webp") center calc(38% + var(--soins-paysage-y,0px)) / cover no-repeat;
  -webkit-mask-image:var(--voile);mask-image:var(--voile)}
body.edr-soins-energetiques .soins-lieux::after{
  content:"";position:absolute;z-index:-1;top:0;right:0;width:min(25.5rem,30vw);aspect-ratio:720/592;pointer-events:none;
  background:url("assets/images/soins-feuillage-bas-droit-720.webp") right top / contain no-repeat;opacity:.42}

body.edr-soins-energetiques .soins-lieux__intro{max-width:40rem;padding-left:2.5rem}
body.edr-soins-energetiques .soins-lieux__intro p{max-width:35rem;color:#4a433d}

body.edr-soins-energetiques .soins-lieux__duo{
  display:grid;grid-template-columns:minmax(0,1fr) 3rem minmax(0,1fr);column-gap:clamp(2.5rem,4.6vw,4.5rem);
  max-width:64rem;margin:3rem auto 0}
body.edr-soins-energetiques .soins-lieu h3{margin:1.25rem 0 0;font-size:1.95rem;line-height:1.1;color:var(--nuit)}
body.edr-soins-energetiques .soins-lieu h3 + p{margin-top:1rem}
body.edr-soins-energetiques .soins-lieu p{max-width:26.5rem;font-size:1rem;line-height:1.75;color:#433d37}
/* L information pratique, en retrait : la forme des apartes du site
   (.moment .aparte), un cran plus petite. */
body.edr-soins-energetiques .soins-lieu .soins-lieu__note{
  margin-top:.9rem;padding-left:1rem;border-left:1px solid var(--acc-bord);
  font-size:.9rem;line-height:1.6;color:var(--txt3);text-wrap:balance}

/* Le pictogramme dans sa pastille : fond ivoire, contour cuivre tres fin. */
body.edr-soins-energetiques .soins-lieu__icone{
  display:block;width:4.25rem;height:4.25rem;border-radius:50%;
  border:1px solid rgba(158,101,61,.3);background-color:rgba(253,251,247,.72);
  background-repeat:no-repeat;background-position:center;background-size:2.6rem}
body.edr-soins-energetiques .soins-lieu--distance .soins-lieu__icone{background-image:url("assets/images/soins-icone-onde-192.webp")}
body.edr-soins-energetiques .soins-lieu--domicile .soins-lieu__icone{background-image:url("assets/images/soins-icone-maison-192.webp")}

/* Le separateur : un filet trace en CSS, qui suit la hauteur des
   colonnes, et la pastille botanique livree, posee en son milieu. */
body.edr-soins-energetiques .soins-lieux__separateur{position:relative;display:block;align-self:stretch}
body.edr-soins-energetiques .soins-lieux__separateur::before{
  content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--soins-cuivre-trait)}
body.edr-soins-energetiques .soins-lieux__separateur::after{
  content:"";position:absolute;left:50%;top:50%;width:3rem;height:3rem;border-radius:50%;
  transform:translate(-50%,-50%);background:#faf7f2 url("assets/images/soins-separateur-pastille-128.webp") center / 100% no-repeat}

/* La phrase de liaison, entre deux filets. */
body.edr-soins-energetiques .soins-lieux__liaison{
  display:flex;align-items:center;justify-content:center;gap:1.6rem;max-width:none;margin:2.75rem auto 0;
  font-family:var(--serif);font-style:italic;font-size:1.5rem;line-height:1.35;color:#7B4B3A;text-align:center;text-wrap:balance;
  text-shadow:0 0 1.1rem rgba(250,246,240,.95),0 0 .35rem rgba(250,246,240,.8)}
body.edr-soins-energetiques .soins-lieux__liaison::before,
body.edr-soins-energetiques .soins-lieux__liaison::after{
  content:"";flex:0 0 4.5rem;height:1px;background:var(--soins-cuivre-trait)}

/* ------------------------------------------------------------
   RESERVER UN SOIN
   Le bol sur sa terrasse monte depuis l angle bas gauche et se
   fond dans l ivoire ; le rameau repond depuis l angle oppose.
   ------------------------------------------------------------ */
body.edr-soins-energetiques .soins-page .entry > .soins-conclusion{
  isolation:isolate;border-top:0;padding-block:6.75rem 15rem;background:#f7f3ed}
/* Le bol reste une matiere, pas un sujet : un peu plus petit, un peu
   plus coupe a gauche, adouci (opacite, saturation, contraste). */
body.edr-soins-energetiques .soins-conclusion::before{
  content:"";position:absolute;z-index:-2;left:-5.5rem;bottom:-3.5rem;width:min(44rem,52vw);height:32rem;pointer-events:none;
  opacity:.84;filter:saturate(.86) contrast(.93);
  background:url("assets/images/soins-reservation-bol-960.webp") left bottom / auto 100% no-repeat;
  background-image:image-set(url("assets/images/soins-reservation-bol-960.webp") 1x,url("assets/images/soins-reservation-bol-1448.webp") 2x);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.22) 36%,#000 66%),linear-gradient(90deg,#000 0,#000 30%,transparent 70%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.22) 36%,#000 66%),linear-gradient(90deg,#000 0,#000 30%,transparent 70%);
  mask-composite:intersect}
body.edr-soins-energetiques .soins-conclusion::after{
  content:"";position:absolute;z-index:-1;right:0;bottom:0;width:min(25rem,30vw);aspect-ratio:720/714;pointer-events:none;
  background:url("assets/images/soins-feuillage-haut-droit-720.webp") right bottom / contain no-repeat;opacity:.55}

body.edr-soins-energetiques .soins-conclusion__grille{
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);align-items:stretch;padding-left:2.5rem}
body.edr-soins-energetiques .soins-conclusion__offre{padding-right:clamp(2.5rem,5vw,4.5rem)}
body.edr-soins-energetiques .soins-conclusion__duree{
  max-width:none;font-family:var(--serif);font-size:1.4rem;line-height:1.45;color:#4f4841}
body.edr-soins-energetiques .soins-conclusion .boutons{margin-top:2.25rem;gap:var(--air-boutons)}

body.edr-soins-energetiques .soins-conclusion__cadre{
  align-self:stretch;padding:.35rem 0 .35rem clamp(2.25rem,4vw,3.25rem);border-left:1px solid var(--soins-cuivre-trait)}
body.edr-soins-energetiques .soins-conclusion__cadre .eyebrow{margin:0 0 1rem;color:var(--acc)}
body.edr-soins-energetiques .soins-conclusion__cadre .eyebrow::before{display:none}
body.edr-soins-energetiques .soins-conclusion__cadre p:not(.eyebrow){
  max-width:30rem;font-size:1rem;line-height:1.8;color:#463f39}

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */
@media(max-width:1100px){
  body.edr-soins-energetiques .soins-page .entry > .soins-lieux{--pano-plein:11rem;--pano-voile:10rem;padding-top:3.75rem}
  body.edr-soins-energetiques .soins-lieux__intro{padding-left:0}
  body.edr-soins-energetiques .soins-lieux__duo{margin-top:2.5rem}
  body.edr-soins-energetiques .soins-lieux__liaison{margin-top:2.25rem}
  body.edr-soins-energetiques .soins-lieu h3{font-size:1.75rem}

  body.edr-soins-energetiques .soins-page .entry > .soins-conclusion{padding-block:5.5rem 12rem}
  body.edr-soins-energetiques .soins-conclusion__grille{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);padding-left:0}
  body.edr-soins-energetiques .soins-conclusion__offre{padding-right:2.75rem}
  body.edr-soins-energetiques .soins-conclusion .boutons .btn{padding-inline:1.3rem}
}

/* Tablette et telephone : une seule colonne. Le filet vertical se
   couche entre les deux modalites, la pastille reste en son milieu. */
@media(max-width:899.98px){
  body.edr-soins-energetiques .soins-page .entry > .soins-lieux{--pano-plein:9.5rem;--pano-voile:9.5rem;padding-top:3.5rem}
  body.edr-soins-energetiques .soins-lieux::before{
    background-image:url("assets/images/soins-panorama-alpilles-1120.webp");
    background-image:image-set(url("assets/images/soins-panorama-alpilles-1120.webp") 1x,url("assets/images/soins-panorama-alpilles-1672.webp") 2x);
    background-position:center calc(29% + var(--soins-paysage-y,0px))}
  body.edr-soins-energetiques .soins-lieux::after{width:min(18rem,43vw);opacity:.3;
    background-image:url("assets/images/soins-feuillage-bas-droit-480.webp")}
  body.edr-soins-energetiques .soins-lieux__duo{grid-template-columns:1fr;row-gap:1.5rem;max-width:36rem;margin:2.25rem 0 0}
  /* En une colonne, la pastille au-dessus du titre coutait deux lignes
     par modalite : elle se range a gauche du titre. */
  body.edr-soins-energetiques .soins-lieu{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:1rem;align-items:center}
  body.edr-soins-energetiques .soins-lieu h3{margin:0}
  body.edr-soins-energetiques .soins-lieu p{grid-column:1 / -1;max-width:none}
  body.edr-soins-energetiques .soins-lieu__icone{width:3.5rem;height:3.5rem;background-size:2.15rem}
  body.edr-soins-energetiques .soins-lieux__separateur{height:2.75rem;align-self:auto}
  body.edr-soins-energetiques .soins-lieux__separateur::before{left:0;right:0;top:50%;bottom:auto;width:auto;height:1px}
  body.edr-soins-energetiques .soins-lieux__liaison{margin-top:2.25rem;font-size:1.35rem}

  body.edr-soins-energetiques .soins-page .entry > .soins-conclusion{padding-block:4.75rem 16rem}
  body.edr-soins-energetiques .soins-conclusion::before{
    left:-1.5rem;bottom:0;width:min(27rem,100%);height:20.5rem;
    background-image:url("assets/images/soins-reservation-bol-640.webp");
    background-image:image-set(url("assets/images/soins-reservation-bol-640.webp") 1x,url("assets/images/soins-reservation-bol-960.webp") 2x);background-size:auto 100%;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.4) 30%,#000 62%),linear-gradient(90deg,#000 0,#000 45%,transparent 94%);
    mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.4) 30%,#000 62%),linear-gradient(90deg,#000 0,#000 45%,transparent 94%)}
  body.edr-soins-energetiques .soins-conclusion::after{width:min(16rem,44vw);opacity:.45;
    background-image:url("assets/images/soins-feuillage-haut-droit-480.webp")}
  body.edr-soins-energetiques .soins-conclusion__grille{grid-template-columns:1fr;max-width:36rem}
  body.edr-soins-energetiques .soins-conclusion .boutons .btn{padding-inline:1.7rem}
  body.edr-soins-energetiques .soins-conclusion__offre{padding-right:0}
  body.edr-soins-energetiques .soins-conclusion__cadre{
    margin-top:2.75rem;padding:2.25rem 0 0;border-left:0;border-top:1px solid var(--soins-cuivre-trait)}
}

@media(max-width:520px){
  body.edr-soins-energetiques .soins-page .entry > .soins-lieux{--pano-plein:7rem;--pano-voile:9rem;padding-top:2.75rem}
  body.edr-soins-energetiques .soins-lieux::before{
    background-image:url("assets/images/soins-panorama-alpilles-720.webp");
    background-image:image-set(url("assets/images/soins-panorama-alpilles-720.webp") 1x,url("assets/images/soins-panorama-alpilles-1120.webp") 2x);
    background-position:22% calc(100% + var(--soins-paysage-y,0px))}
  body.edr-soins-energetiques .soins-lieux::after{top:-2rem;width:10rem;opacity:.26}
  body.edr-soins-energetiques .soins-lieux__duo{margin-top:1.75rem;row-gap:1rem}
  body.edr-soins-energetiques .soins-lieu{column-gap:.85rem}
  body.edr-soins-energetiques .soins-lieu__icone{width:3rem;height:3rem;background-size:1.85rem}
  /* 1.45rem : « A domicile autour de Graveson » tient sur une ligne
     a cote de sa pastille a 390 px. */
  body.edr-soins-energetiques .soins-lieu h3{font-size:1.45rem}
  body.edr-soins-energetiques .soins-lieu h3 + p{margin-top:.85rem}
  body.edr-soins-energetiques .soins-lieu .soins-lieu__note{margin-top:.75rem}
  body.edr-soins-energetiques .soins-lieux__separateur{height:2.25rem}
  body.edr-soins-energetiques .soins-lieux__separateur::after{width:2.25rem;height:2.25rem}
  body.edr-soins-energetiques .soins-lieux__liaison{
    flex-direction:column;gap:.9rem;margin-top:1.5rem;font-size:1.3rem}
  body.edr-soins-energetiques .soins-lieux__liaison::before{flex:0 0 1px;width:3rem}
  body.edr-soins-energetiques .soins-lieux__liaison::after{display:none}

  body.edr-soins-energetiques .soins-page .entry > .soins-conclusion{padding-block:4rem 13rem}
  body.edr-soins-energetiques .soins-conclusion::before{width:min(22rem,100%);height:16.5rem}
  body.edr-soins-energetiques .soins-conclusion::after{width:10rem;opacity:.38}
  body.edr-soins-energetiques .soins-conclusion__duree{font-size:1.25rem}
  body.edr-soins-energetiques .soins-conclusion .boutons{display:grid;grid-template-columns:1fr}
  body.edr-soins-energetiques .soins-conclusion .boutons .btn{width:100%;min-height:3rem;white-space:normal;text-align:center}
  body.edr-soins-energetiques .soins-conclusion__cadre{margin-top:2.25rem;padding-top:1.9rem}
}

@media(prefers-reduced-motion:reduce){
  body.edr-soins-energetiques #modalites{--soins-paysage-y:0px!important}
}