/* Sauge & Lin — démonstration Cyanto. Mise en page éditoriale : photo fixe à gauche, colonne à droite. */

@font-face{font-family:"Cormorant Garamond";src:url(fonts/cormorant-garamond-latin-wght-normal.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(fonts/cormorant-garamond-latin-wght-italic.woff2) format("woff2");font-weight:300 700;font-style:italic;font-display:swap}
@font-face{font-family:"Mulish";src:url(fonts/mulish-latin-wght-normal.woff2) format("woff2");font-weight:200 1000;font-style:normal;font-display:swap}

:root{
  --lin:#F6F2EB;
  --lin-2:#EEE7DC;
  --papier:#FBF9F5;
  --sable:#E3D8C6;
  --trait:#DDD2C1;
  --pointille:#C9BCA7;
  --sauge:#9AA894;
  --sauge-pale:#E5EADF;
  --sauge-fonce:#4B5B48;
  --foret:#2F3B30;
  --foret-2:#3E4C3F;
  --encre:#2A2823;
  --texte:#4D4840;
  --doux:#665F55;
  --terre:#B8714F;
  --terre-texte:#9A5536;
  --terre-pale:#F3E3D8;
  --erreur:#9B2F1E;
  --r:18px;
  --titre:"Cormorant Garamond","Iowan Old Style",Georgia,serif;
  --corps:"Mulish","Segoe UI",system-ui,sans-serif;
  --panneau:44vw;
  --marge:clamp(20px,5.2vw,104px);
  --lent:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
html.tiroir-ouvert{overflow:hidden}
body{margin:0;background:var(--lin);color:var(--texte);font-family:var(--corps);font-size:16.5px;line-height:1.75;-webkit-font-smoothing:antialiased;font-variant-numeric:lining-nums;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--titre);color:var(--encre);font-weight:400;margin:0}
h2{font-size:clamp(38px,3.6vw,54px);line-height:1.05;font-weight:300;letter-spacing:-.005em}
h2 em{font-style:italic;color:var(--terre-texte)}
h3{font-size:28px;line-height:1.2;font-weight:500}
p{margin:0 0 1em}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--terre-texte);outline-offset:3px;border-radius:4px}
.visuellement-cache{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
[hidden]{display:none!important}
.surtitre{font-size:12px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--sauge-fonce);margin-bottom:20px}
.facultatif{font-weight:400;color:var(--doux)}

/* Boutons et liens */
.bouton{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:999px;background:var(--foret);color:var(--lin);font-weight:600;font-size:15.5px;letter-spacing:.02em;text-decoration:none;white-space:nowrap;border:1px solid var(--foret);cursor:pointer;transition:background .5s var(--lent),transform .5s var(--lent)}
.bouton:hover{background:var(--foret-2)}
.bouton:active{transform:scale(.99)}
.bouton--petit{min-height:44px;padding:0 20px;font-size:14.5px}
.bouton--plein{width:100%}
.bouton--contour{background:transparent;color:var(--foret)}
.bouton--contour:hover{background:var(--sauge-pale)}
.lien-rdv{display:inline-flex;align-items:center;gap:14px;min-height:44px;font-family:var(--titre);font-style:italic;font-size:26px;color:var(--encre);text-decoration:none;border-bottom:1px solid var(--terre);transition:gap .7s var(--lent),color .5s}
.lien-rdv::after{content:"→";font-style:normal;font-size:22px;color:var(--terre-texte)}
.lien-rdv:hover{gap:22px;color:var(--terre-texte)}
.lien-souligne{display:inline-flex;align-items:center;min-height:44px;padding:0;background:none;border:0;cursor:pointer;font-weight:600;color:var(--encre);text-decoration:underline;text-decoration-color:var(--terre);text-underline-offset:6px}
.lien-souligne:hover{color:var(--terre-texte)}

/* Barre de démonstration : une ligne fine */
.demo-bar{position:relative;z-index:40;background:var(--foret);color:#DCE0D5;font-size:12.5px;line-height:1.4;text-align:center;padding:7px 16px}
.demo-bar p{margin:0}
.demo-bar a{color:#fff;font-weight:700;text-decoration:none;white-space:nowrap}
.demo-bar a:hover{text-decoration:underline}
.demo-court{display:none}

/* Photos de scène (dans le flux sur téléphone, fixes à gauche sur ordinateur) */
.scene__photo{position:relative;margin:0;background:var(--sable);overflow:hidden}
.scene__photo img{width:100%;height:100%;object-fit:cover}
.scene__photo figcaption{position:absolute;left:18px;bottom:14px;right:18px;z-index:1;font-family:var(--titre);font-style:italic;font-size:17px;line-height:1.3;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.45)}
.scene__photo::after{content:"";position:absolute;inset:auto 0 0;height:40%;background:linear-gradient(to top,rgba(30,34,28,.45),rgba(30,34,28,0));pointer-events:none}
#fig-pierres img{object-position:42% 50%}
#fig-huile-dos img{object-position:38% 50%}
#fig-visage img{object-position:50% 35%}
#fig-cabine img{transform:scale(1.22);transform-origin:100% 50%}

/* Colonne */
.entete{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:24px;padding:14px var(--marge);background:rgba(246,242,235,.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .6s}
.entete.defile{border-bottom-color:var(--trait)}
.marque{font-family:var(--titre);font-size:25px;font-weight:500;color:var(--encre);text-decoration:none;white-space:nowrap;line-height:1}
.marque i{font-weight:400;color:var(--terre-texte)}
.nav{display:flex;gap:20px;margin-left:auto}
.nav a{font-size:14px;font-weight:600;color:var(--texte);text-decoration:none;padding:10px 0;position:relative;white-space:nowrap}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:5px;height:1px;background:var(--terre);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--lent)}
.nav a:hover::after{transform:scaleX(1)}
.entete__rdv .long{display:none}
.menu{display:none}

main > section,.pied{padding:0 var(--marge)}
main > section > *:not(.scene__photo),.pied > *{max-width:560px}
.section__tete{margin-bottom:44px}
.section__tete h2{margin-bottom:22px}
.chapo{font-size:17.5px}

/* Ouverture */
.ouverture__texte{padding:56px 0 88px}
.ouverture__brin{color:var(--sauge-fonce);margin-bottom:28px}
.ouverture h1{font-size:clamp(76px,10vw,148px);line-height:.88;font-weight:300;letter-spacing:-.02em;margin-bottom:40px}
.ouverture h1 span{display:block}
.ouverture h1 i{display:block;color:var(--terre-texte);padding-left:.55em}
.ouverture__phrase{font-family:var(--titre);font-size:clamp(23px,2vw,28px);line-height:1.4;color:var(--texte);max-width:470px;margin-bottom:40px}

/* Carte des soins : menu de spa */
.carte,.institut,.offrir,.infos{padding-top:clamp(80px,11vw,150px)!important}
.carte__filtres{display:flex;flex-wrap:wrap;gap:4px 0;margin-top:30px}
.carte__filtres button{min-height:44px;padding:0 14px;background:none;border:0;cursor:pointer;font-family:var(--titre);font-size:21px;font-style:italic;color:var(--doux);position:relative;transition:color .5s}
.carte__filtres button:first-child{padding-left:0}
.carte__filtres button+button::before{content:"·";position:absolute;left:-3px;color:var(--pointille);font-style:normal}
.carte__filtres button:hover{color:var(--encre)}
.carte__filtres button[aria-pressed="true"]{color:var(--terre-texte);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:7px}
.menu-groupe{padding-bottom:36px}
.menu-groupe h3{display:flex;align-items:baseline;gap:14px;font-size:34px;font-weight:400;font-style:italic;padding-bottom:10px;border-bottom:1px solid var(--trait);margin-bottom:6px}
.menu-groupe h3 small{font-family:var(--corps);font-style:normal;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--doux);margin-left:auto}
.menu-liste{list-style:none;margin:0;padding:0}
.soin{padding:16px 0 6px;border-bottom:1px solid rgba(221,210,193,.6)}
.soin:last-child{border-bottom:0}
.soin.apparait{animation:apparait .8s var(--lent) both}
@keyframes apparait{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.soin__ligne{display:flex;align-items:baseline;gap:10px;margin:0}
.soin__nom{font-family:var(--titre);font-size:24px;font-weight:500;color:var(--encre);line-height:1.2}
.soin__points{flex:1;min-width:20px;border-bottom:2px dotted var(--pointille);transform:translateY(-6px)}
.soin__infos{font-size:15px;font-weight:700;color:var(--encre);white-space:nowrap;font-variant-numeric:tabular-nums lining-nums}
.soin__bas{display:flex;justify-content:space-between;align-items:center;gap:18px;margin:0;font-size:15px;color:var(--doux);line-height:1.5}
.soin__reserver{flex:none;display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:700;color:var(--terre-texte);text-decoration:none;letter-spacing:.02em}
.soin__reserver::after{content:"→";margin-left:6px;transition:transform .6s var(--lent)}
.soin__reserver:hover::after{transform:translateX(4px)}
.carte__mention{font-size:13.5px;color:var(--doux);margin:8px 0 0}

/* L'institut */
.institut__texte{font-size:17px}
.lettrine::first-letter{font-family:var(--titre);float:left;font-size:88px;line-height:.78;padding:8px 12px 0 0;color:var(--terre-texte);font-weight:400}
.citation{margin:48px 0;padding:32px 0;border-top:1px solid var(--trait);border-bottom:1px solid var(--trait)}
.citation blockquote{margin:0}
.citation blockquote p{font-family:var(--titre);font-style:italic;font-size:clamp(27px,2.4vw,34px);line-height:1.25;color:var(--encre);margin-bottom:14px}
.citation figcaption{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sauge-fonce)}
.details{margin:0}
.details div{display:grid;grid-template-columns:130px 1fr;gap:16px;padding:14px 0;border-top:1px solid var(--trait)}
.details dt{font-family:var(--titre);font-size:21px;font-weight:600;color:var(--encre);line-height:1.35}
.details dd{margin:0;font-size:15.5px}

/* Offrir */
.offrir > .offrir__grille{max-width:880px}
.offrir__grille{display:grid;grid-template-columns:1fr;gap:36px;align-items:start}
.cadeau__apercu{container-type:inline-size;max-width:460px}
.cadeau__info{font-size:13.5px;color:var(--doux);margin:22px 0 0}
.carte-cadeau{--fond:linear-gradient(135deg,#E1E7DA 0%,#C3CFBB 100%);--encre-carte:#253027;--doux-carte:#40503E;--brin:#7F9278;
  position:relative;aspect-ratio:1.586;border-radius:18px;padding:7cqi 7.5cqi 6cqi;display:flex;flex-direction:column;background:var(--fond);color:var(--encre-carte);text-align:left;box-shadow:0 34px 60px -34px rgba(47,59,48,.5),0 10px 22px -14px rgba(47,59,48,.25);transform:rotate(-1.2deg);transition:background 1s var(--lent),color 1s var(--lent),transform 1.2s var(--lent)}
.carte-cadeau:hover{transform:rotate(0) translateY(-3px)}
.carte-cadeau::after{content:"";position:absolute;inset:9px;border-radius:12px;border:1px solid currentColor;opacity:.18;pointer-events:none}
.carte-cadeau[data-teinte="sable"]{--fond:linear-gradient(135deg,#F5EEE2 0%,#DFCFB6 100%);--encre-carte:#3A2F22;--doux-carte:#5B4B3A;--brin:#B59A74}
.carte-cadeau[data-teinte="terre"]{--fond:linear-gradient(135deg,#95512F 0%,#6F3B25 100%);--encre-carte:#FFF6EE;--doux-carte:#F6DCCB;--brin:#E7B597}
.carte-cadeau[data-teinte="prune"]{--fond:linear-gradient(135deg,#6E4757 0%,#452A37 100%);--encre-carte:#FAF1F3;--doux-carte:#E7CFD7;--brin:#B98FA0}
.carte-cadeau__deco{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.carte-cadeau__brin{position:absolute;right:-4%;bottom:-8%;width:42%;height:auto;aspect-ratio:1;color:var(--brin);opacity:.35;transform:rotate(-18deg)}
.carte-cadeau__haut{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.carte-cadeau__marque{font-family:var(--titre);font-size:max(15px,6cqi);font-weight:600;line-height:1}
.carte-cadeau__marque i{font-weight:400}
.carte-cadeau__type{font-size:max(9px,2.6cqi);font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--doux-carte)}
.carte-cadeau__pour{position:relative;font-family:var(--titre);font-style:italic;font-size:max(24px,10.5cqi);line-height:1.05;margin:auto 0 1.5cqi;overflow-wrap:anywhere}
.carte-cadeau__valeur{position:relative;font-weight:700;font-size:max(11px,3.5cqi);line-height:1.35;margin:0 0 1.5cqi}
.carte-cadeau__message{position:relative;font-family:var(--titre);font-style:italic;font-size:max(13px,4.4cqi);line-height:1.3;color:var(--doux-carte);margin:0 0 auto;max-width:82%;overflow-wrap:anywhere;min-height:1.3em}
.carte-cadeau__bas{position:relative;display:flex;flex-direction:column;gap:1px;font-size:max(10px,3cqi);color:var(--doux-carte);margin-top:3cqi;line-height:1.4}
.carte-cadeau__bas strong{color:var(--encre-carte)}
.carte-cadeau.pulse{animation:pulse-carte .9s var(--lent)}
@keyframes pulse-carte{40%{transform:rotate(-1.2deg) scale(1.015)}}
.cadeau__form fieldset{border:0;margin:0 0 18px;padding:0}
.cadeau__form legend{font-weight:700;font-size:14px;color:var(--encre);margin-bottom:8px;padding:0}
.bascule{display:flex}
.bascule legend{width:100%}
.bascule label,.montants__liste label,.teinte{position:relative;cursor:pointer}
.bascule input,.montants__liste input,.teinte input{position:absolute;opacity:0;inset:0;margin:0;width:100%;height:100%;cursor:pointer}
.bascule span{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border:1px solid var(--trait);font-weight:600;font-size:14.5px;transition:background .5s var(--lent),color .5s,border-color .5s}
.bascule label:first-of-type span{border-radius:999px 0 0 999px}
.bascule label:last-of-type span{border-radius:0 999px 999px 0;border-left:0}
.bascule input:checked+span,.montants__liste input:checked+span{background:var(--foret);color:var(--lin);border-color:var(--foret)}
.bascule input:focus-visible+span,.montants__liste input:focus-visible+span,.teinte input:focus-visible+span{outline:2px solid var(--terre-texte);outline-offset:3px}
.montants__liste{display:flex;flex-wrap:wrap;gap:6px}
.montants__liste span{display:inline-flex;align-items:center;justify-content:center;min-width:64px;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--trait);font-weight:700;font-size:14.5px;transition:background .5s var(--lent),color .5s}
.champ--autre{margin-top:12px;max-width:240px}
.teintes{display:flex;flex-wrap:wrap;gap:6px}
.teintes legend{width:100%}
.teinte span{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px 0 7px;border-radius:999px;border:1px solid var(--trait);font-size:14px;font-weight:600;transition:border-color .5s}
.teinte span::before{content:"";width:26px;height:26px;border-radius:50%;background:var(--pastille);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.teinte input:checked+span{border-color:var(--foret);box-shadow:inset 0 0 0 1px var(--foret)}
.teinte--sauge{--pastille:linear-gradient(135deg,#DCE3D5,#B7C4AF)}
.teinte--sable{--pastille:linear-gradient(135deg,#F3EBDD,#DCCAB0)}
.teinte--terre{--pastille:linear-gradient(135deg,#A9603F,#7E432B)}
.teinte--prune{--pastille:linear-gradient(135deg,#7B5364,#4F3140)}
.envoi .case{margin-bottom:2px}

/* Champs */
.champ{margin-bottom:14px}
.champ label{display:block;font-weight:700;font-size:14px;color:var(--encre);margin-bottom:6px}
.champ input,.champ select,.champ textarea{width:100%;min-height:48px;padding:11px 15px;border:1px solid #CFC4B2;border-radius:12px;background:#fff;font-size:16px;transition:border-color .4s,box-shadow .4s}
.champ textarea{resize:vertical;min-height:76px}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-color:var(--sauge-fonce);box-shadow:0 0 0 3px rgba(154,168,148,.35)}
.champ [aria-invalid="true"]{border-color:var(--erreur)}
.champ__erreur{color:var(--erreur);font-size:14px;font-weight:600;margin:6px 0 0}
.champ__erreur:empty{display:none}
.champ__aide{font-size:13px;color:var(--doux);margin:6px 0 0}
.case{display:flex;align-items:center;gap:12px;min-height:44px;cursor:pointer;font-size:15px}
.case input{width:20px;height:20px;margin:0;accent-color:var(--foret);flex:none}

/* Infos pratiques */
.infos__grille{display:grid;grid-template-columns:1fr 1fr;gap:12px 40px}
.infos h3{font-size:24px;font-weight:500;margin-bottom:10px}
.infos__grille h3:not(:first-child){margin-top:26px}
.horaires{margin:0 0 10px}
.horaires div{padding:8px 0;border-top:1px solid var(--trait)}
.horaires div:last-child{border-bottom:1px solid var(--trait)}
.horaires dt{font-size:14px;color:var(--doux)}
.horaires dd{margin:0;font-weight:700;color:var(--encre)}
.horaires .aujourdhui dt::after{content:" · aujourd’hui";color:var(--sauge-fonce);font-weight:700}
.infos__petit{font-size:14px;color:var(--doux)}
.questions{margin:48px 0 0}
.questions details{border-top:1px solid var(--trait)}
.questions details:last-child{border-bottom:1px solid var(--trait)}
.questions summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:52px;font-family:var(--titre);font-size:21px;font-weight:500;color:var(--encre)}
.questions summary::-webkit-details-marker{display:none}
.questions summary::after{content:"+";font-family:var(--corps);font-size:20px;font-weight:300;color:var(--terre-texte);transition:transform .6s var(--lent)}
.questions details[open] summary::after{transform:rotate(45deg)}
.questions details p{font-size:15.5px;margin:0 0 18px}
.infos__rdv{margin:48px 0 0}

/* Pied de page */
.pied{padding-top:90px!important;padding-bottom:40px!important;font-size:14px;color:var(--doux)}
.pied > *{margin:0 0 8px}
.pied__marque{font-family:var(--titre);font-size:26px;color:var(--encre);padding-top:26px;border-top:1px solid var(--trait)}
.pied__marque i{color:var(--terre-texte)}
.pied__marque span{font-family:var(--corps);font-size:13px;color:var(--doux)}
.pied a{color:var(--encre)}
.pied__cyanto a:last-child{font-weight:700}
.pied__credits{font-size:12.5px;margin-top:18px}

/* Panneau latéral : prise de rendez-vous */
.tiroir{margin:0 0 0 auto;padding:0;border:0;width:min(580px,100vw);max-width:100vw;height:100vh;height:100dvh;max-height:none;background:var(--papier);color:var(--texte);box-shadow:-40px 0 80px -40px rgba(30,36,30,.45)}
.tiroir::backdrop{background:rgba(38,44,38,.42);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.tiroir[open]{animation:tiroir .7s var(--lent)}
@keyframes tiroir{from{transform:translateX(60px);opacity:0}to{transform:none;opacity:1}}
.tiroir__defile{height:100%;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;padding:30px clamp(18px,5vw,40px) 0}
.tiroir__tete{position:relative;padding-right:56px;margin-bottom:26px}
.tiroir__tete .surtitre{margin-bottom:6px}
.tiroir__tete h2{font-size:38px}
.tiroir__fermer{position:absolute;top:0;right:0;width:46px;height:46px;border-radius:50%;border:1px solid var(--trait);background:var(--papier);font-size:24px;line-height:1;cursor:pointer;color:var(--encre);transition:background .4s}
.tiroir__fermer:hover{background:var(--sauge-pale)}
.etapes{list-style:none;margin:0 0 22px;padding:0;display:grid;grid-template-columns:repeat(4,1fr)}
.etapes li{position:relative}
.etapes li+li::before{content:"";position:absolute;top:19px;right:calc(50% + 26px);left:calc(-50% + 26px);height:1px;background:var(--trait)}
.etapes li.fait+li::before{background:var(--sauge)}
.etapes button{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;min-height:44px;padding:0;background:none;border:0;cursor:pointer;color:var(--doux);font-size:12.5px;font-weight:600}
.etapes button:disabled{cursor:default;opacity:.75}
.etapes__num{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--trait);background:var(--papier);font-family:var(--titre);font-size:18px;font-weight:600;transition:background .6s var(--lent),color .6s,border-color .6s}
.etapes li.fait .etapes__num{background:var(--sauge-pale);border-color:var(--sauge);color:var(--sauge-fonce)}
.etapes button[aria-current="step"]{color:var(--encre)}
.etapes button[aria-current="step"] .etapes__num{background:var(--foret);border-color:var(--foret);color:var(--lin)}
.resume{margin:0 0 24px;padding:12px 16px;border-radius:14px;background:var(--lin);font-size:14px;line-height:1.5}
.resume #res-soin{display:block;font-weight:700;color:var(--encre)}
.resume #res-quand:empty{display:none}
.resume #res-quand{display:block;color:var(--doux)}
.resume .maj{animation:maj 1.2s var(--lent)}
@keyframes maj{from{color:var(--terre-texte)}}
.rdv__form{flex:1;display:flex;flex-direction:column}
.panneau{animation:glisse .6s var(--lent) both}
@keyframes glisse{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
.panneau h3{font-size:26px;margin-bottom:18px;outline:none}
.choix-soins{border:0;margin:0;padding:0;display:grid;gap:8px}
.tuile{position:relative;display:block;cursor:pointer}
.tuile input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.tuile span{display:flex;align-items:baseline;gap:10px;padding:12px 16px;min-height:52px;border:1px solid var(--trait);border-radius:14px;background:var(--papier);transition:border-color .5s,background .5s}
.tuile b{font-family:var(--titre);font-size:20px;font-weight:600;color:var(--encre);line-height:1.2}
.tuile i{flex:1;border-bottom:2px dotted var(--pointille);transform:translateY(-5px);min-width:12px}
.tuile small{font-size:13.5px;font-weight:700;color:var(--texte);white-space:nowrap}
.tuile:hover span{border-color:var(--sauge)}
.tuile input:checked+span{border-color:var(--foret);background:var(--sauge-pale);box-shadow:inset 0 0 0 1px var(--foret)}
.tuile input:focus-visible+span{outline:2px solid var(--terre-texte);outline-offset:3px}
.calendrier__titre{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--doux);margin-bottom:8px}
.cal{display:grid;gap:3px}
.cal__ligne{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal__entete{font-size:12px;font-weight:700;text-align:center;color:var(--doux);text-transform:uppercase;padding:2px 0}
.cal__cellule{display:flex;justify-content:center}
.jour{position:relative;width:100%;max-width:50px;aspect-ratio:1;min-height:44px;border-radius:50%;border:1px solid transparent;background:transparent;cursor:pointer;font-weight:700;font-size:15px;color:var(--encre);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;transition:background .45s var(--lent),color .45s,border-color .45s}
.jour small{font-size:9.5px;font-weight:600;color:var(--doux);margin-top:2px}
.jour::after{content:"";position:absolute;bottom:5px;width:4px;height:4px;border-radius:50%;background:var(--sauge);opacity:0}
.jour--libre::after{opacity:1}
.jour--peu::after{background:var(--terre)}
.jour:hover:not([aria-disabled="true"]){border-color:var(--sauge);background:var(--sauge-pale)}
.jour[aria-disabled="true"]{color:#958B7D;cursor:not-allowed;text-decoration:line-through;font-weight:500}
.jour--hors{opacity:.45;text-decoration:none!important}
.jour--aujourdhui{border-color:var(--trait)}
.jour[aria-pressed="true"]{background:var(--foret);color:var(--lin);border-color:var(--foret)}
.jour[aria-pressed="true"] small{color:var(--sauge-pale)}
.jour[aria-pressed="true"]::after{background:var(--lin)}
.calendrier__legende{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;font-size:12.5px;color:var(--doux);margin:12px 0 2px}
.leg{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:-9px}
.leg--libre{background:var(--sauge)}
.leg--peu{background:var(--terre)}
.leg--ferme{background:#CFC6B8}
.calendrier__aide{font-size:12.5px;color:var(--doux);margin:0 0 18px}
.creneaux{border-top:1px solid var(--trait);padding-top:18px}
.creneaux__vide{font-family:var(--titre);font-style:italic;font-size:20px;color:var(--doux)}
.creneaux fieldset{border:0;margin:0;padding:0}
.creneaux legend{padding:0;font-family:var(--titre);font-size:22px;font-weight:600;color:var(--encre)}
.creneaux__info{font-size:13.5px;color:var(--doux);margin-bottom:10px}
.creneaux__groupe{margin-bottom:10px}
.creneaux__groupe p{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--doux);margin:0 0 6px}
.pastilles{display:flex;flex-wrap:wrap;gap:6px}
.pastille{position:relative}
.pastille input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer;width:100%;height:100%}
.pastille span{display:inline-flex;align-items:center;justify-content:center;min-width:74px;min-height:44px;padding:0 12px;border-radius:999px;border:1px solid var(--trait);background:var(--papier);font-weight:700;font-size:14.5px;font-variant-numeric:tabular-nums;transition:background .45s var(--lent),border-color .45s,color .45s}
.pastille:hover span{border-color:var(--sauge);background:var(--sauge-pale)}
.pastille input:checked+span{background:var(--foret);border-color:var(--foret);color:var(--lin)}
.pastille input:focus-visible+span{outline:2px solid var(--terre-texte);outline-offset:3px}
.recap{border:1px solid var(--trait);border-radius:var(--r);padding:4px 18px;margin-bottom:14px}
.recap dl{margin:0}
.recap div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--trait)}
.recap div:last-child{border-bottom:0}
.recap dt{color:var(--doux);font-size:14px}
.recap dd{margin:0;text-align:right;font-weight:700;color:var(--encre);font-size:15px}
.recap .recap__total dd{font-family:var(--titre);font-size:26px;font-weight:600;line-height:1}
.rdv__erreur{color:var(--erreur);font-weight:600;font-size:14.5px;margin:12px 0 0}
.rdv__erreur:empty{display:none}
.rdv__nav{position:sticky;bottom:0;display:flex;justify-content:space-between;gap:12px;margin-top:auto;padding:16px 0 22px;background:linear-gradient(to top,var(--papier) 80%,rgba(251,249,245,0))}
.rdv__nav #rdv-suivant{margin-left:auto}
.fin{text-align:center;padding:30px 0 20px}
.fin__icone{display:inline-grid;place-items:center;width:62px;height:62px;border-radius:50%;background:var(--sauge-pale);color:var(--sauge-fonce);margin-bottom:18px;animation:eclot 1s var(--lent) both}
@keyframes eclot{from{transform:scale(.6);opacity:0}}
.fin__actions{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:22px}
.fini .rdv__nav,.fini .resume{display:none}

/* Modale carte cadeau */
.modale{border:0;padding:0;background:transparent;width:min(520px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto}
.modale::backdrop{background:rgba(38,44,38,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.modale[open]{animation:monte .7s var(--lent)}
@keyframes monte{from{opacity:0;transform:translateY(18px)}}
.modale__boite{position:relative;background:var(--lin);border-radius:24px;padding:40px clamp(20px,4vw,40px) 26px;text-align:center}
.modale h2{font-size:36px;margin-bottom:22px;outline:none}
.modale__carte{container-type:inline-size;max-width:360px;margin:0 auto 24px}
.modale__carte .carte-cadeau{transform:none}
.modale__actions{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:18px}
.modale__fermer{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:50%;border:1px solid var(--trait);background:var(--papier);font-size:24px;line-height:1;cursor:pointer;color:var(--encre)}

/* Apparitions lentes (ajoutées par le JS, sous la ligne de flottaison) */
.a-reveler{opacity:0;transform:translateY(22px);transition:opacity 1.3s var(--lent),transform 1.3s var(--lent)}
.a-reveler.visible{opacity:1;transform:none}

/* ---------- Ordinateur : écran coupé en deux ---------- */
@media (min-width:980px){
  .colonne{margin-left:var(--panneau)}
  .scene__photo{position:fixed;left:0;top:0;width:var(--panneau);height:100vh;z-index:1}
  .scene__photo figcaption{left:40px;bottom:34px;font-size:20px}
  #fig-huile{z-index:2}
  .js .scene__photo{opacity:0;transition:opacity 1.5s var(--lent)}
  .js .scene__photo.actif{opacity:1;z-index:3}
  .js .scene__photo.actif img{animation:derive 16s ease-out both}
  @keyframes derive{from{scale:1.06}to{scale:1}}
  .ouverture{min-height:calc(100vh - 110px);display:flex;align-items:flex-end}
  .ouverture__texte{padding-bottom:12vh}
}
@media (min-width:1400px){
  .offrir__grille{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px}
  .cadeau__apercu{position:sticky;top:110px}
}
@media (min-width:980px) and (max-width:1359px){
  .entete__rdv .long{display:inline}
  .entete__rdv .court{display:none}
}
@media (max-width:1359px){
  .nav{display:none}
  .entete__rdv{margin-left:auto}
  .menu{display:flex;flex-direction:column;justify-content:center;gap:6px;width:44px;height:44px;border-radius:50%;border:1px solid var(--trait);background:var(--papier);padding:0 12px;cursor:pointer;flex:none}
  .menu span{display:block;height:1.5px;background:var(--encre);border-radius:2px;transition:transform .5s var(--lent)}
  .menu[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg)}
  .menu[aria-expanded="true"] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
  .nav.ouvert{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--lin);border-bottom:1px solid var(--trait);padding:4px var(--marge) 14px;box-shadow:0 20px 30px -24px rgba(47,59,48,.35)}
  .nav.ouvert a{padding:12px 0;font-size:17px;border-bottom:1px solid var(--trait)}
  .nav.ouvert a:last-child{border-bottom:0}
}

/* ---------- Téléphone et tablette : photo en haut de chaque section ---------- */
@media (max-width:979px){
  .scene__photo{margin:0 calc(var(--marge) * -1) 40px;aspect-ratio:4/3}
  .ouverture .scene__photo{aspect-ratio:1/1;margin-bottom:0}
  .menu-groupe .scene__photo{aspect-ratio:16/9;margin:24px 0 28px;border-radius:var(--r)}
  .menu-groupe .scene__photo::after{border-radius:inherit}
  .ouverture__texte{padding:36px 0 40px}
  .ouverture__brin{display:none}
  .ouverture h1{font-size:clamp(64px,19vw,110px);margin-bottom:26px}
  .carte,.institut,.offrir,.infos{padding-top:64px!important}
  .carte > .scene__photo{margin-bottom:40px}
}
@media (max-width:640px){
  body{font-size:16px}
  .entete{gap:10px;padding-top:10px;padding-bottom:10px}
  .marque{font-size:22px}
  .entete__rdv{padding:0 16px}
  .soin__nom{font-size:20px}
  .soin__infos{font-size:13.5px}
  .soin__points{min-width:10px}
  .demo-long{display:none}
  .demo-court{display:inline}
  .carte__filtres button{padding:0 16px 0 0;font-size:20px}
  .carte__filtres button+button::before{content:none}
  .soin__bas{align-items:flex-end}
  .menu-groupe h3{font-size:30px;flex-wrap:wrap}
  .menu-groupe h3 small{margin-left:0;width:100%}
  .details div{grid-template-columns:1fr;gap:0}
  .infos__grille{grid-template-columns:1fr}
  .tiroir__defile{padding-top:22px}
  .tiroir__tete h2{font-size:32px}
  .etapes__nom{font-size:11px;text-align:center;line-height:1.25}
  .recap div{flex-direction:column;gap:0}
  .recap dd{text-align:left}
}
@media (max-width:350px){
  .entete__rdv{padding:0 12px;font-size:13.5px}
  .demo-bar{padding:7px 8px;font-size:12px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .a-reveler{opacity:1;transform:none}
}