@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(fonts/fraunces-latin-ext-opsz-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(fonts/fraunces-latin-opsz-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(fonts/fraunces-latin-ext-opsz-italic.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(fonts/fraunces-latin-opsz-italic.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(fonts/jost-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(fonts/jost-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Concept : la métamorphose. Fond « encre » de la charte ; un papillon s'ouvre, s'envole au défilement et guide la lecture jusqu'au contact. */
:root{
  --bg:#14102E; --bg-2:#1B1640; --surface:#221C4C; --fg:#F2F0FA; --fg-2:#BDB7DE; --muted:#8F88BE;
  --line:rgba(180,175,214,.18); --accent:#B4AFD6; --accent-2:#8078B8; --deep:#403878; --on-accent:#14102E;
  --serif:"Fraunces", Georgia, "Times New Roman", serif;
  --sans:"Jost", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --step-hero:clamp(2.7rem, 7vw, 6.2rem); --step-2:clamp(2rem, 4vw, 3.3rem);
  --radius:22px; --gl:max(16px, env(safe-area-inset-left, 0px)); --gr:max(16px, env(safe-area-inset-right, 0px));
  color-scheme:dark;
}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){
  --bg:#F7F5FB; --bg-2:#EFECF8; --surface:#FFFFFF; --fg:#1C1742; --fg-2:#4A4570; --muted:#6E68A0;
  --line:rgba(64,56,120,.16); --accent:#403878; --accent-2:#8078B8; --deep:#2A2456; --on-accent:#F7F5FB; color-scheme:light;}}
:root[data-theme="light"]{
  --bg:#F7F5FB; --bg-2:#EFECF8; --surface:#FFFFFF; --fg:#1C1742; --fg-2:#4A4570; --muted:#6E68A0;
  --line:rgba(64,56,120,.16); --accent:#403878; --accent-2:#8078B8; --deep:#2A2456; --on-accent:#F7F5FB; color-scheme:light;}
:root[data-theme="dark"]{
  --bg:#14102E; --bg-2:#1B1640; --surface:#221C4C; --fg:#F2F0FA; --fg-2:#BDB7DE; --muted:#8F88BE;
  --line:rgba(180,175,214,.18); --accent:#B4AFD6; --accent-2:#8078B8; --deep:#403878; --on-accent:#14102E; color-scheme:dark;}
*{box-sizing:border-box}
[hidden]{display:none!important}
.nw{white-space:nowrap}
body{background:var(--bg); color:var(--fg); font-family:var(--sans); font-size:17px; line-height:1.6; overflow-x:hidden}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:40; background:var(--bg)}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px}
.wrap{max-width:1200px; margin:0 auto; padding-left:var(--gl); padding-right:var(--gr)}
h1,h2,h3{font-family:var(--serif); font-weight:450; line-height:1.04; letter-spacing:-.018em; text-wrap:balance; margin:0; font-variation-settings:"opsz" 144, "SOFT" 70}
p{margin:0}
.eyebrow{font-size:.76rem; letter-spacing:.24em; text-transform:uppercase; font-weight:500; color:var(--accent)}
.lead{font-size:1.12rem; color:var(--fg-2); max-width:60ch}
.w{display:inline-block; will-change:transform}
.mask{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.08em; margin-bottom:-.08em}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* Curseur papillon (souris seulement) */
.cursor{position:fixed; left:0; top:0; width:34px; height:34px; margin:-17px 0 0 -17px; border:1px solid var(--accent); border-radius:50%; pointer-events:none; z-index:60; opacity:0; transition:width .3s, height .3s, margin .3s, background .3s, opacity .3s}
.cursor.big{width:76px; height:76px; margin:-38px 0 0 -38px; background:color-mix(in srgb, var(--accent-2) 22%, transparent)}
@media (pointer:fine){ .cursor{opacity:1} }

/* Fil de lecture : un papillon descend avec vous */
.guide{position:fixed; right:calc(22px + env(safe-area-inset-right, 0px)); top:50%; height:42vh; width:2px; transform:translateY(-50%); background:var(--line); z-index:15; border-radius:2px}
.guide .fill{position:absolute; inset:0 0 auto 0; height:0; background:var(--accent); border-radius:2px}
.guide .bfly{position:absolute; left:50%; top:0; width:28px; height:22px; margin:-11px 0 0 -14px}
.guide .bfly i{position:absolute; top:0; width:14px; height:20px; background:var(--accent); border-radius:70% 30% 60% 40% / 60% 40% 60% 40%; animation:flutter var(--flap,.9s) ease-in-out infinite alternate}
.guide .bfly i:first-child{left:0; transform-origin:100% 50%} .guide .bfly i:last-child{right:0; transform-origin:0 50%; border-radius:30% 70% 40% 60% / 40% 60% 40% 60%}
@keyframes flutter{to{transform:scaleX(.35)}}
@media (max-width:900px){ .guide{display:none} }

/* En-tête */
header.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:30; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); background:color-mix(in srgb, var(--bg) 72%, transparent); border-bottom:1px solid var(--line)}
header.top .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:12px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none}
.brand img{width:38px; height:auto}
.brand span{font-weight:400; letter-spacing:.32em; font-size:.95rem}
nav.menu{display:flex; gap:22px; align-items:center}
nav.menu a{text-decoration:none; font-size:.92rem; color:var(--fg-2); position:relative; padding-block:4px}
nav.menu a.lnk::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--accent); transition:right .35s ease}
nav.menu a.lnk:hover{color:var(--fg)} nav.menu a.lnk:hover::after{right:0}
.icon-btn{display:inline-grid; place-items:center; width:36px; height:36px; border-radius:50%; border:1px solid var(--line)}
.icon-btn svg{width:17px; height:17px}
.cta-mini{border:1px solid var(--line); border-radius:999px; padding:6px 14px!important; color:var(--fg)!important}
@media (max-width:820px){ nav.menu a.lnk{display:none} }

/* Hero */
.hero{position:relative; overflow:hidden; isolation:isolate}
#flow{position:absolute; inset:0; width:100%; height:100%; z-index:-1}
.hero .wrap{display:grid; grid-template-columns:1.08fr .92fr; align-items:center; gap:24px; padding-block:clamp(48px,8vw,108px) clamp(40px,6vw,84px)}
.hero h1{font-size:var(--step-hero); font-weight:400}
.hero h1 em{font-style:italic; font-weight:300; color:var(--accent)}
.hero .copy{display:flex; flex-direction:column; gap:26px; min-width:0}
.actions{display:flex; gap:12px; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; gap:10px; border-radius:999px; padding:14px 24px; font-weight:500; text-decoration:none; font-size:.98rem; border:1px solid var(--line); background:transparent; color:var(--fg)}
.btn.primary{background:var(--accent); color:var(--on-accent); border-color:transparent}
.btn .arr{transition:transform .3s} .btn:hover .arr{transform:translateX(4px)}
.hero-art{position:relative; aspect-ratio:600/470; max-width:100%; width:100%}
.hero-art svg{width:100%; height:100%; overflow:visible}
.wing{transform-box:fill-box}
.side-r{transform-origin:0% 60%} .side-l{transform-origin:100% 60%}
.side-r{animation:open-r 1.8s cubic-bezier(.2,.8,.2,1) both, flap-r 5.5s 1.8s ease-in-out infinite}
.side-l{animation:open-l 1.8s cubic-bezier(.2,.8,.2,1) both, flap-l 5.5s 1.8s ease-in-out infinite}
.antenna{stroke-dasharray:140; animation:draw 1.6s .9s ease both}
@keyframes open-r{from{transform:scaleX(.08) rotate(-8deg)} to{transform:none}}
@keyframes open-l{from{transform:scaleX(.08) rotate(8deg)} to{transform:none}}
@keyframes flap-r{0%,100%{transform:none} 50%{transform:scaleX(.84) skewY(-2deg)}}
@keyframes flap-l{0%,100%{transform:none} 50%{transform:scaleX(.84) skewY(2deg)}}
@keyframes draw{from{stroke-dashoffset:140}}
.glow{filter:blur(40px); opacity:.55}
.hero-meta{display:flex; gap:28px; flex-wrap:wrap; color:var(--muted); font-size:.88rem; border-top:1px solid var(--line); padding-top:18px}
.hero-meta b{display:block; color:var(--fg); font-weight:500; font-size:.98rem}
.scroll-hint{display:flex; align-items:center; gap:12px; color:var(--muted); font-size:.8rem; letter-spacing:.2em; text-transform:uppercase}
.scroll-hint span{width:1px; height:42px; background:linear-gradient(var(--accent), transparent); animation:drip 2.2s ease-in-out infinite; transform-origin:top}
@keyframes drip{0%{transform:scaleY(0)} 50%{transform:scaleY(1)} 100%{transform:scaleY(1); opacity:0}}
@media (max-width:860px){ .hero .wrap{grid-template-columns:1fr} .hero-art{max-width:min(320px,78vw); margin:0 auto; grid-row:1} .scroll-hint{display:none} }

/* Bandeau défilant, vitesse liée au scroll */
.marquee{border-block:1px solid var(--line); overflow:hidden; padding-block:20px; background:var(--bg-2)}
.marquee .track{display:flex; width:max-content; font-family:var(--serif); font-style:italic; font-size:clamp(1.4rem,3vw,2.3rem); color:var(--fg-2); font-weight:300; will-change:transform}
.marquee .track span{display:inline-flex; align-items:center; gap:42px; padding-right:42px; white-space:nowrap}
.marquee .track span::after{content:""; width:10px; height:10px; border-radius:50%; background:var(--accent-2)}

/* Manifeste qui s'ouvre au scroll */
.manifest{padding-block:clamp(56px,8vw,110px)}
.manifest .panel{position:relative; border-radius:32px; overflow:hidden; background:radial-gradient(120% 120% at 20% 0%, #403878, #1B1640 62%); min-height:min(78vh,640px); display:grid; place-items:center; padding:clamp(32px,6vw,90px) clamp(20px,6vw,90px); clip-path:inset(0% 0% 0% 0% round 32px)}
.manifest .panel p{font-family:var(--serif); font-weight:300; font-size:clamp(1.7rem,3.8vw,3.4rem); line-height:1.18; text-align:center; max-width:22ch; color:#F2F0FA; text-wrap:balance; letter-spacing:-.01em}
.manifest .panel p em{color:#B4AFD6}
.manifest .orb{position:absolute; width:46vmax; height:46vmax; border-radius:50%; background:radial-gradient(closest-side, rgba(128,120,184,.55), transparent); top:-20%; right:-15%; filter:blur(10px)}

/* Sections */
section{padding-block:clamp(64px,9vw,120px)}
.sec-head{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:32px; align-items:end; margin-bottom:52px}
.sec-head h2{font-size:var(--step-2)}
@media (max-width:760px){ .sec-head{grid-template-columns:1fr} }

/* Le centre */
.centre-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.fact{background:var(--bg); padding:30px 24px; display:flex; flex-direction:column; gap:10px; min-width:0}
.fact .k{font-family:var(--serif); font-size:3rem; font-weight:300; color:var(--accent); line-height:1; font-variant-numeric:tabular-nums}
.fact p{color:var(--fg-2); font-size:.96rem}
@media (max-width:900px){ .centre-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:460px){ .centre-grid{grid-template-columns:1fr} }

/* Praticiens */
.people{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px}
@media (max-width:960px){ .people{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:580px){ .people{grid-template-columns:1fr} }
.person{position:relative; border:1px solid var(--line); border-radius:var(--radius); padding:18px 18px 24px; display:flex; flex-direction:column; gap:14px; background:var(--surface); min-width:0; transform-style:preserve-3d; will-change:transform}
.portrait{position:relative; aspect-ratio:1/1; max-width:100%; overflow:hidden; border-radius:46% 54% 40% 60% / 52% 44% 56% 48%; transition:border-radius 1.2s cubic-bezier(.2,.8,.2,1); background:var(--bg-2)}
.person:hover .portrait{border-radius:58% 42% 55% 45% / 40% 60% 40% 60%}
.portrait img{width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(1) contrast(1.06); transform:scale(1.08); transition:filter .8s ease, transform 1.2s cubic-bezier(.2,.8,.2,1)}
.portrait::after{content:""; position:absolute; inset:0; background:var(--accent-2); mix-blend-mode:color; transition:opacity .8s ease; pointer-events:none}
.person:hover .portrait img, .person:focus-within .portrait img{filter:none; transform:scale(1)}
.person:hover .portrait::after, .person:focus-within .portrait::after{opacity:0}
.portrait.mono{display:grid; place-items:center; font-family:var(--serif); font-size:4.4rem; color:var(--accent); background:radial-gradient(circle at 30% 20%, var(--deep), var(--bg-2))}
.portrait.mono::after{display:none}
.person h3{font-size:1.55rem}
.person .what{color:var(--accent); font-size:.9rem; letter-spacing:.04em; margin-top:4px}
.person p{color:var(--fg-2); font-size:.95rem}
.person .ig{display:inline-flex; align-items:center; gap:8px; font-size:.88rem; color:var(--fg-2); text-decoration:none; margin-top:auto}
.person .ig:hover{color:var(--fg)}
.person .ig svg{width:16px; height:16px}
.soon{border-style:dashed; background:transparent; justify-content:center}
.tags{display:flex; flex-wrap:wrap; gap:8px}
.tag{font-size:.82rem; border:1px solid var(--line); border-radius:999px; padding:4px 12px; color:var(--fg-2)}

/* Programmes en défilement horizontal (grand écran) */
.prog-zone{overflow:hidden}
.progs{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px}
@media (max-width:760px){ .progs{grid-template-columns:1fr} }
.prog{position:relative; border-radius:28px; padding:36px; min-height:340px; display:flex; flex-direction:column; justify-content:space-between; gap:26px; overflow:hidden; border:1px solid var(--line); background:var(--surface); isolation:isolate; min-width:0}
.prog::after{content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(120% 80% at var(--mx,80%) var(--my,0%), color-mix(in srgb, var(--tone) 60%, transparent), transparent 62%); opacity:.8; transition:opacity .5s}
.prog:hover::after{opacity:1}
.prog .big{position:absolute; right:-.06em; bottom:-.22em; font-family:var(--serif); font-size:clamp(7rem,14vw,12rem); font-weight:300; line-height:1; color:var(--tone); opacity:.22; z-index:-1; pointer-events:none}
.prog .name{font-family:var(--serif); font-size:clamp(2.3rem,4.4vw,3.6rem); font-weight:400; letter-spacing:.02em}
.prog .by{font-size:.78rem; letter-spacing:.24em; text-transform:uppercase; color:var(--fg-2)}
.prog p{color:var(--fg-2); max-width:44ch}
.status{align-self:flex-start; font-size:.78rem; border-radius:999px; padding:5px 12px; border:1px solid var(--line); background:color-mix(in srgb, var(--bg) 60%, transparent)}
.status.on{color:var(--accent); border-color:var(--accent-2)}
.prog.terra{--tone:#1F8A7C} .prog.imago{--tone:#8078B8} .prog.sas{--tone:#4C6FA8} .prog.emoscape{--tone:#9A3E7E}
.is-h .progs{display:flex; flex-wrap:nowrap; gap:24px; width:max-content}
.is-h .prog{width:min(560px,74vw); min-height:420px}

/* Salle et conférences */
.salle{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:44px; align-items:center}
@media (max-width:860px){ .salle{grid-template-columns:1fr} }
.salle-art{aspect-ratio:4/3; max-width:100%; border-radius:28px; border:1px solid var(--line); background:var(--bg-2); position:relative; overflow:hidden}
.salle-art canvas{width:100%; height:100%; display:block}
.salle-art .cap{position:absolute; left:20px; bottom:16px; font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
.ticks{display:flex; flex-direction:column; gap:14px; margin-top:24px; padding:0; list-style:none}
.ticks li{display:flex; gap:14px; align-items:baseline; color:var(--fg-2)}
.ticks li::before{content:""; flex:none; width:22px; height:1px; background:var(--accent); transform:translateY(-4px)}

/* Louer un bureau */
.louer{background:var(--bg-2); border-block:1px solid var(--line)}
.rates{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
@media (max-width:760px){ .rates{grid-template-columns:1fr} }
.rate{border:1px solid var(--line); border-radius:var(--radius); padding:28px; background:var(--bg); display:flex; flex-direction:column; gap:8px}
.rate .days{font-size:.85rem; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-2)}
.rate .price{font-family:var(--serif); font-size:3rem; font-weight:300; line-height:1.05; font-variant-numeric:tabular-nums}
.rate .price small{font-family:var(--sans); font-size:.9rem; color:var(--fg-2); font-weight:400}
.rate.feat{border-color:var(--accent-2); box-shadow:0 0 0 1px var(--accent-2) inset}
.note{margin-top:22px; color:var(--fg-2); font-size:.95rem; max-width:70ch}

/* Contact */
.contact{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:48px}
@media (max-width:860px){ .contact{grid-template-columns:1fr} }
.big-mail{font-family:var(--serif); font-size:clamp(1.9rem,5vw,4rem); font-weight:300; word-break:break-word; line-height:1.08; user-select:all}
.copy-row{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:18px}
.chip-btn{font:inherit; font-size:.9rem; cursor:pointer; background:transparent; color:var(--fg); border:1px solid var(--line); border-radius:999px; padding:8px 16px; text-decoration:none; display:inline-flex; align-items:center; gap:8px}
.chip-btn:hover{border-color:var(--accent)}
.chip-btn svg{width:15px; height:15px}
.copied{font-size:.88rem; color:var(--accent)}
.infos{display:grid; gap:22px; align-content:start; margin:0}
.infos dt{font-size:.76rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
.infos dd{margin:4px 0 0; color:var(--fg)}
.newsletter{margin-top:40px; border:1px solid var(--line); border-radius:var(--radius); padding:26px; display:flex; flex-direction:column; gap:14px; background:var(--surface)}
.newsletter form{display:flex; gap:10px; flex-wrap:wrap}
.newsletter input{flex:1 1 220px; min-width:0; font:inherit; color:var(--fg); background:var(--bg); border:1px solid var(--line); border-radius:999px; padding:12px 18px}
.newsletter form button{font:inherit; font-weight:500; cursor:pointer; border:0; border-radius:999px; padding:12px 22px; background:var(--accent); color:var(--on-accent)}
.form-msg{font-size:.9rem; color:var(--fg-2); min-height:1.4em}
.small{font-size:.82rem; color:var(--muted)}

/* Pied de page */
footer{border-top:1px solid var(--line); padding-block:56px 64px; color:var(--muted); font-size:.9rem; position:relative; overflow:hidden}
footer .wrap{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr); gap:32px}
@media (max-width:760px){ footer .wrap{grid-template-columns:1fr} }
footer h4{font-weight:500; color:var(--fg); margin:0 0 12px; font-size:.86rem; letter-spacing:.14em; text-transform:uppercase}
footer ul{list-style:none; padding:0; margin:0; display:grid; gap:8px}
footer a{text-decoration:none; color:var(--fg-2)} footer a:hover{color:var(--fg)}
.foot-brand{display:flex; align-items:center; gap:12px; margin-bottom:12px; color:var(--fg)}
.foot-brand img{width:46px}
.giant{font-family:var(--serif); font-weight:300; font-size:clamp(3rem,14.2vw,14rem); line-height:.8; letter-spacing:.02em; color:var(--bg-2); text-align:center; margin-top:40px; user-select:none; -webkit-text-stroke:1px var(--line)}
.linklike{font:inherit; background:none; border:0; padding:0; color:var(--fg-2); cursor:pointer; text-align:left}
.linklike:hover{color:var(--fg)}

/* Mentions légales et confidentialité */
dialog.legal{width:min(760px,92vw); max-height:86vh; border:1px solid var(--line); border-radius:24px; padding:0; background:var(--surface); color:var(--fg)}
dialog.legal::backdrop{background:rgba(10,8,26,.7); backdrop-filter:blur(6px)}
dialog.legal .in{padding:32px clamp(20px,4vw,40px) 36px; overflow:auto; max-height:86vh}
dialog.legal h2{font-size:2rem; margin-bottom:6px}
dialog.legal h3{font-family:var(--sans); font-weight:600; font-size:.95rem; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); margin:26px 0 8px}
dialog.legal p, dialog.legal li{color:var(--fg-2); font-size:.96rem}
dialog.legal ul{padding-left:18px; margin:6px 0}
dialog.legal .close{position:sticky; top:0; float:right; font:inherit; cursor:pointer; background:var(--bg); color:var(--fg); border:1px solid var(--line); border-radius:999px; padding:6px 14px}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
  .cursor{display:none}
}

/* Ajouts version 3 */
nav.menu{gap:20px}
@media (max-width:1040px){ nav.menu a.lnk{display:none} }
.lang{display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; font-size:.78rem; letter-spacing:.08em}
.lang a,.lang span{padding:6px 10px; text-decoration:none}
.lang span{background:var(--accent); color:var(--on-accent)}
.book{display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; align-items:center}
.book .chip-btn{font-size:.85rem; padding:7px 14px}
.book .chip-btn.main{background:var(--accent); color:var(--on-accent); border-color:transparent}
.book .tel{font-size:.86rem; color:var(--fg-2); font-variant-numeric:tabular-nums; user-select:all}
.person .ig{margin-top:0}
/* Disciplines */
.discs{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
@media (max-width:1000px){ .discs{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .discs{grid-template-columns:1fr} }
.disc{position:relative; display:flex; flex-direction:column; gap:12px; justify-content:space-between; min-height:200px; padding:24px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); text-decoration:none; overflow:hidden; isolation:isolate; min-width:0}
.disc::after{content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(90% 70% at var(--mx,90%) var(--my,0%), color-mix(in srgb, var(--accent-2) 45%, transparent), transparent 65%); opacity:.45; transition:opacity .5s}
.disc:hover::after{opacity:1}
.disc h3{font-size:1.55rem}
.disc p{color:var(--fg-2); font-size:.94rem}
.disc .go{font-size:.86rem; color:var(--accent)}
/* Agenda */
.agenda{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.ev{display:flex; align-items:center; gap:20px; flex-wrap:wrap; border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; background:var(--surface)}
.ev-date{display:flex; flex-direction:column; align-items:center; min-width:64px; font-size:.8rem; text-transform:uppercase; letter-spacing:.14em; color:var(--fg-2)}
.ev-date b{font-family:var(--serif); font-size:2.2rem; font-weight:300; color:var(--accent); letter-spacing:0; line-height:1}
.ev-main{flex:1 1 260px; display:flex; flex-direction:column; gap:4px; min-width:0}
.ev-t{font-family:var(--serif); font-size:1.35rem}
.ev-w{color:var(--fg-2); font-size:.94rem}
.ev.empty{border-style:dashed; background:transparent}
/* Pages discipline */
.crumbs{font-size:.86rem; color:var(--muted); display:flex; gap:8px; flex-wrap:wrap}
.crumbs a{color:var(--fg-2); text-decoration:none}
.d-hero{position:relative; overflow:hidden; isolation:isolate}
.d-hero .wrap{display:flex; flex-direction:column; gap:22px; padding-block:clamp(48px,7vw,96px) clamp(36px,5vw,64px)}
.d-hero h1{font-size:clamp(2.6rem,6vw,5rem); font-weight:400; max-width:16ch}
.d-hero h1 em{font-style:italic; font-weight:300; color:var(--accent)}
.d-body{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:56px; align-items:start}
@media (max-width:900px){ .d-body{grid-template-columns:1fr} }
.d-text{display:flex; flex-direction:column; gap:40px}
.d-text h2{font-size:clamp(1.6rem,2.6vw,2.2rem); margin-bottom:12px}
.d-text p{color:var(--fg-2); max-width:62ch}
.d-text p + p{margin-top:12px}
.steps{list-style:none; padding:0; margin:0; display:grid; gap:14px; counter-reset:s}
.steps li{display:grid; grid-template-columns:44px minmax(0,1fr); gap:14px; color:var(--fg-2)}
.steps li::before{counter-increment:s; content:counter(s); font-family:var(--serif); font-size:1.8rem; font-weight:300; color:var(--accent); line-height:1}
.aside{position:sticky; top:calc(84px + env(safe-area-inset-top,0px)); display:grid; gap:16px}
.aside .person{padding:16px 16px 20px}
.aside .portrait{max-width:220px}
.faq details{border-top:1px solid var(--line); padding-block:16px}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer; font-family:var(--serif); font-size:1.2rem; list-style:none; display:flex; justify-content:space-between; gap:16px}
.faq summary::after{content:"+"; color:var(--accent); transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin-top:10px}
.callout{border:1px solid var(--line); border-radius:var(--radius); padding:22px; background:var(--bg-2); color:var(--fg-2); font-size:.94rem}
.more{display:flex; flex-wrap:wrap; gap:10px}
footer .wrap.foot4{grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,1fr))}
@media (max-width:900px){ footer .wrap.foot4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ footer .wrap.foot4{grid-template-columns:1fr} }
@media (max-width:560px){ header.top .icon-btn{display:none} nav.menu{gap:10px} .brand span{letter-spacing:.22em; font-size:.85rem} }
.aside.multi{position:static}
/* Applications */
.apps{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px}
@media (max-width:860px){ .apps{grid-template-columns:1fr} }
.app{border-radius:30px; overflow:hidden; display:flex; flex-direction:column; border:1px solid var(--line); min-width:0}
.app-txt{padding:28px 30px 30px; display:flex; flex-direction:column; gap:12px; flex:1}
.app .by{font-size:.76rem; letter-spacing:.22em; text-transform:uppercase}
.app-name{font-family:var(--serif); font-size:clamp(2.4rem,4.6vw,3.6rem); font-weight:400; line-height:1}
.app-foot{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:auto; padding-top:8px}
.app.tapoti{background:#2A2456; color:#F9DDC7}
.app.tapoti .by{color:#F2C7A2} .app.tapoti p{color:#F3E6DC} .app.tapoti .app-name{color:#F9DDC7}
.app.tapoti .status{color:#2A2456; background:#F2C7A2; border-color:transparent}
.app.tapoti .chip-btn{color:#F9DDC7; border-color:rgba(242,199,162,.4)}
.tp-stage{position:relative; height:260px; display:grid; place-items:center; background:radial-gradient(circle at 50% 55%, #3A3270, #2A2456 70%)}
.tp-stage img{width:118px; height:118px; border-radius:28px; position:relative; z-index:1; box-shadow:0 18px 40px rgba(0,0,0,.35); animation:tap 2.4s ease-in-out infinite}
.tp-stage .ring{position:absolute; width:118px; height:118px; border-radius:50%; border:1.5px solid #C79A2B; opacity:0; animation:ripple 2.4s ease-out infinite}
.tp-stage .r2{animation-delay:.8s} .tp-stage .r3{animation-delay:1.6s}
@keyframes tap{0%,100%{transform:translateY(0) scale(1)} 12%{transform:translateY(3px) scale(.97)} 24%{transform:translateY(0) scale(1)}}
@keyframes ripple{0%{transform:scale(.9); opacity:.8} 100%{transform:scale(2.6); opacity:0}}
.app.nimbu{background:#F3EEE4; color:#2E2A33}
.app.nimbu .by{color:#7A6F86} .app.nimbu p{color:#4A4452} .app.nimbu .app-name{color:#2E2A33; font-style:italic; font-weight:300}
.app.nimbu .status{color:#4A4452; background:rgba(255,255,255,.6); border-color:rgba(46,42,51,.15)}
.app.nimbu .chip-btn{color:#2E2A33; border-color:rgba(46,42,51,.2)}
.nb-stage{position:relative; height:260px; overflow:hidden; background:#EFE8DB}
.nb-c{position:absolute; inset:0; margin:0; opacity:0; transition:opacity 1.4s ease}
.nb-c.on{opacity:1}
.nb-c img{width:100%; height:100%; object-fit:cover; object-position:50% 40%; animation:floaty 6s ease-in-out infinite}
.nb-c figcaption{position:absolute; left:18px; bottom:14px; font-family:var(--serif); font-style:italic; font-size:1.05rem; color:#4A4452; background:rgba(243,238,228,.8); padding:2px 10px; border-radius:999px}
@keyframes floaty{0%,100%{transform:translateY(0) scale(1.04)} 50%{transform:translateY(-8px) scale(1.06)}}
.aside.multi .portrait{max-width:160px}

/* Version 4 : réserver, orientation, avis, respiration, nuit, pages */
.cta-mini.resa-open{background:var(--accent); color:var(--on-accent)!important; border-color:transparent}
.mbar{position:fixed; left:0; right:0; bottom:0; z-index:35; display:none; padding:10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-top:1px solid var(--line)}
.mbar button{width:100%; font:inherit; font-weight:500; border:0; border-radius:999px; padding:14px; background:var(--accent); color:var(--on-accent); cursor:pointer}
@media (max-width:820px){ .mbar{display:block} footer{padding-bottom:110px} }

dialog.resa{width:min(720px,94vw); max-height:88vh; border:1px solid var(--line); border-radius:26px; padding:0; background:var(--surface); color:var(--fg)}
dialog.resa::backdrop{background:rgba(10,8,26,.7); backdrop-filter:blur(6px)}
dialog.resa .in{padding:26px clamp(18px,4vw,36px) 30px; overflow:auto; max-height:88vh}
dialog.resa h2{font-size:clamp(1.7rem,3.4vw,2.3rem); margin:4px 0 6px}
.tabs{display:flex; gap:6px; background:var(--bg-2); border-radius:999px; padding:4px; margin:18px 0 20px; width:max-content; max-width:100%}
.tabs button{font:inherit; font-size:.92rem; border:0; background:transparent; color:var(--fg-2); padding:9px 16px; border-radius:999px; cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--accent); color:var(--on-accent)}
.rlist{display:grid; gap:10px}
.rrow{display:grid; grid-template-columns:56px minmax(0,1fr) auto; gap:14px; align-items:center; border:1px solid var(--line); border-radius:18px; padding:10px 14px 10px 10px; background:var(--bg)}
.rrow img,.rrow .mono-s{width:56px; height:56px; border-radius:50%; object-fit:cover; display:grid; place-items:center; font-family:var(--serif); font-size:1.4rem; color:var(--accent); background:var(--bg-2)}
.rrow b{font-family:var(--serif); font-weight:450; font-size:1.1rem; display:block}
.rrow span{color:var(--fg-2); font-size:.86rem}
.rrow .act{display:flex; flex-direction:column; align-items:flex-end; gap:4px; text-align:right}
.rrow .act a{white-space:nowrap}
@media (max-width:520px){ .rrow{grid-template-columns:48px minmax(0,1fr)} .rrow .act{grid-column:1 / -1; align-items:stretch; text-align:left} .rrow img,.rrow .mono-s{width:48px; height:48px} }
.quiz fieldset{border:0; padding:0; margin:0 0 18px}
.quiz legend{font-family:var(--serif); font-size:1.25rem; margin-bottom:10px}
.opts{display:flex; flex-wrap:wrap; gap:8px}
.opts label{cursor:pointer}
.opts input{position:absolute; opacity:0; pointer-events:none}
.opts span{display:inline-block; border:1px solid var(--line); border-radius:999px; padding:8px 14px; font-size:.92rem; color:var(--fg-2); transition:background .25s, color .25s}
.opts input:checked + span{background:var(--accent); color:var(--on-accent); border-color:transparent}
.opts input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px}
.qprog{height:3px; background:var(--line); border-radius:3px; margin:6px 0 18px; overflow:hidden}
.qprog i{display:block; height:100%; width:0; background:var(--accent); transition:width .5s}
.qres h3{font-size:1.4rem; margin:6px 0 10px}
.qres p.why{color:var(--fg-2); font-size:.92rem; margin:-4px 0 10px}

/* Avis */
.avis{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:40px; align-items:center}
@media (max-width:860px){ .avis{grid-template-columns:1fr} }
.score{display:flex; flex-direction:column; gap:10px}
.score .note{font-family:var(--serif); font-size:clamp(4rem,9vw,6.5rem); font-weight:300; line-height:.9}
.stars{display:flex; gap:6px; color:#E3B341}
.stars svg{width:26px; height:26px}
.quotes{display:grid; gap:16px}
.quote{border:1px solid var(--line); border-radius:var(--radius); padding:24px; background:var(--surface); display:flex; flex-direction:column; gap:12px}
.quote p{font-family:var(--serif); font-size:1.15rem; line-height:1.45; font-weight:300}
.quote .src{font-family:var(--sans); font-size:.82rem; color:var(--muted); display:flex; align-items:center; gap:8px}
.quote .stars svg{width:16px; height:16px}

/* Respiration */
.breath{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; align-items:center}
@media (max-width:860px){ .breath{grid-template-columns:1fr} }
.b-stage{position:relative; aspect-ratio:1/1; max-width:min(440px,100%); width:100%; margin:0 auto; display:grid; place-items:center}
.b-stage .halo{position:absolute; inset:12%; border-radius:50%; background:radial-gradient(closest-side, color-mix(in srgb, var(--accent-2) 45%, transparent), transparent); transform:scale(.7); transition:transform 4s cubic-bezier(.45,0,.55,1)}
.b-stage svg{width:78%; height:auto; overflow:visible}
.b-stage .bw{transform-box:fill-box; transition:transform 4s cubic-bezier(.45,0,.55,1)}
.b-stage .bw.r{transform-origin:0% 60%} .b-stage .bw.l{transform-origin:100% 60%}
.b-stage.closed .bw{transform:scaleX(.4)}
.b-stage.closed .halo{transform:scale(.6)}
.b-stage.open .halo{transform:scale(1.05)}
.b-word{font-family:var(--serif); font-size:clamp(2rem,4vw,3rem); font-weight:300; min-height:1.3em; color:var(--accent)}
.b-count{font-size:.9rem; color:var(--muted); font-variant-numeric:tabular-nums}

/* Conseils */
.posts{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px}
@media (max-width:760px){ .posts{grid-template-columns:1fr} }
.post{display:flex; flex-direction:column; gap:10px; border:1px solid var(--line); border-radius:var(--radius); padding:26px; background:var(--surface); text-decoration:none; min-width:0}
.post h3{font-size:1.6rem}
.post p{color:var(--fg-2)}
.post .go{color:var(--accent); font-size:.88rem; margin-top:auto}
.article{max-width:720px}
.article h2{font-size:clamp(1.4rem,2.4vw,1.9rem); margin:34px 0 10px}
.article p{color:var(--fg-2); margin-top:12px}
.tip{display:grid; grid-template-columns:44px minmax(0,1fr); gap:14px; padding-block:16px; border-top:1px solid var(--line)}
.tip:last-of-type{border-bottom:1px solid var(--line)}
.tip .n{font-family:var(--serif); font-size:2rem; font-weight:300; color:var(--accent); line-height:1}
.tip b{display:block; font-weight:500}
.tip span{color:var(--fg-2)}

/* Histoire */
.story{display:grid; gap:56px}
.chapter{display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:40px}
@media (max-width:860px){ .chapter{grid-template-columns:1fr; gap:14px} }
.chapter .yr{font-family:var(--serif); font-size:clamp(2.4rem,5vw,4rem); font-weight:300; color:var(--accent); line-height:1}
.chapter h2{font-size:clamp(1.6rem,2.8vw,2.3rem); margin-bottom:12px}
.chapter p{color:var(--fg-2); max-width:62ch}
.chapter p + p{margin-top:12px}
.duo{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px}
@media (max-width:640px){ .duo{grid-template-columns:1fr} }

/* Mode nuit */
#stars{position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; opacity:0; transition:opacity 2s}
html.night #stars{opacity:1}
html.night main, html.night footer, html.night header.top{position:relative; z-index:1}
html.night header.top{position:sticky}
.night-note{display:none; font-size:.8rem; color:var(--muted); margin-top:10px}
html.night .night-note{display:block}
html.night{--bg:#0F0C24; --bg-2:#15112F; --surface:#1B163A; --fg:#E3E0F2; --fg-2:#A9A3CC; --muted:#7F78AE; --line:rgba(180,175,214,.14); --accent:#A9A3D2; --accent-2:#7A72B0; --on-accent:#0F0C24; color-scheme:dark}
.avis-regles{font-size:.85rem; color:var(--muted); border-top:1px solid var(--line); padding-top:12px}
.avis-regles summary{cursor:pointer; color:var(--fg-2)}
.avis-regles p{margin-top:8px; max-width:62ch}
.person h3 a.pname{color:inherit; text-decoration:none; background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat; transition:background-size .4s}
.person h3 a.pname:hover{background-size:100% 1px}
.prat-page{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(28px,5vw,64px); align-items:start}
@media (max-width:820px){ .prat-page{grid-template-columns:1fr} .prat-page > .rise:first-child{max-width:360px} }

/* Icônes des disciplines : le trait se dessine */
.disc .d-ico{width:44px; height:44px; color:var(--accent); margin-bottom:14px; display:block}
.disc .d-ico *{stroke-dasharray:160; stroke-dashoffset:160; transition:stroke-dashoffset 1.6s cubic-bezier(.65,0,.35,1)}
.disc .d-ico *:nth-child(2){transition-delay:.2s} .disc .d-ico *:nth-child(3){transition-delay:.4s}
.disc.drawn .d-ico *{stroke-dashoffset:0}
.disc:hover .d-ico{transform:scale(1.08); transition:transform .4s}
@media (prefers-reduced-motion: reduce){ .disc .d-ico *{stroke-dashoffset:0; transition:none} }

/* Transition « Les ailes » entre les pages */
.wt{position:fixed; inset:0; z-index:100; pointer-events:none; overflow:hidden}
.wt-w{position:absolute; top:-5%; bottom:-5%; width:62%; background:linear-gradient(160deg, #B4AFD6 0%, #8078B8 55%, #403878 100%); transition:transform .65s cubic-bezier(.3,0,.2,1); will-change:transform}
.wt-w.l{left:0; border-radius:0 60% 45% 0 / 0 55% 45% 0; transform:translateX(-105%)}
.wt-w.r{right:0; border-radius:60% 0 0 45% / 55% 0 0 45%; transform:translateX(105%)}
html.wt-closing .wt-w{transition:transform .52s cubic-bezier(.7,0,.2,1)}
html.wt-closing .wt-w.l, html.wt-in .wt-w.l{transform:translateX(-18%)}
html.wt-closing .wt-w.r, html.wt-in .wt-w.r{transform:translateX(18%)}
html.wt-in .wt-w{transition:none}
html.wt-closing, html.wt-in{cursor:progress}
.wt-bf{position:absolute; left:50%; top:50%; width:clamp(64px,8vw,104px); transform:translate(-50%,-50%) scale(.6); opacity:0; color:#F2F0FA; filter:drop-shadow(0 8px 22px rgba(20,16,46,.55))}
.wt-bf svg{width:100%; height:auto; display:block; overflow:visible}
.wt-bf .w{transform-box:fill-box; animation:wt-flap .3s ease-in-out infinite alternate}
.wt-bf .w.l{transform-origin:100% 50%} .wt-bf .w.r{transform-origin:0% 50%}
@keyframes wt-flap{to{transform:scaleX(.35)}}
html.wt-closing .wt-bf{animation:wt-bf-in .4s .3s ease-out forwards}
html.wt-in .wt-bf{opacity:1; transform:translate(-50%,-50%) scale(1.1)}
html.wt-opening .wt-bf{animation:wt-bf-out .7s ease-out forwards}
@keyframes wt-bf-in{to{opacity:1; transform:translate(-50%,-50%) scale(1.1)}}
@keyframes wt-bf-out{from{opacity:1; transform:translate(-50%,-50%) scale(1.1)} to{opacity:0; transform:translate(-50%,-140%) scale(.9)}}
@media (prefers-reduced-motion: reduce){ .wt{display:none} }

/* Menu papillon flottant */
.mp-btn{position:fixed; right:max(20px, env(safe-area-inset-right, 0px)); bottom:max(22px, env(safe-area-inset-bottom, 0px)); z-index:40; display:flex; align-items:center; gap:10px; font:inherit; font-size:.95rem; font-weight:500; letter-spacing:.04em; color:var(--on-accent); background:var(--accent); border:0; border-radius:999px; padding:10px 20px 10px 12px; cursor:pointer; box-shadow:0 12px 34px -10px color-mix(in srgb, var(--accent) 70%, transparent), 0 0 0 6px color-mix(in srgb, var(--accent) 12%, transparent); transition:transform .35s cubic-bezier(.3,1.6,.5,1), box-shadow .35s}
.mp-btn:hover{transform:translateY(-3px) scale(1.04)}
.mp-btn:focus-visible{outline:2px solid var(--fg); outline-offset:4px}
.mp-bf{width:34px; height:26px; overflow:visible}
.mp-bf path{fill:currentColor}
.mp-bf .mp-body{fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round}
.mp-w{transform-box:fill-box; animation:mp-flap 2.6s ease-in-out infinite}
.mp-w.l{transform-origin:100% 50%} .mp-w.r{transform-origin:0% 50%}
.mp-btn:hover .mp-w{animation-duration:.5s}
@keyframes mp-flap{0%,100%{transform:scaleX(1)} 45%{transform:scaleX(.45)} 55%{transform:scaleX(.45)}}
@media (max-width:820px){ .mp-btn{bottom:calc(84px + env(safe-area-inset-bottom, 0px)); right:16px; padding:9px 16px 9px 10px} }
dialog.mp{position:fixed; inset:0; width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; background:#14102E; color:#F2F0FA; clip-path:circle(0px at var(--mx,90%) var(--my,90%)); transition:clip-path .7s cubic-bezier(.7,0,.2,1)}
dialog.mp.open{clip-path:circle(150vmax at var(--mx,90%) var(--my,90%))}
dialog.mp::backdrop{background:transparent}
.mp-in{height:100%; overflow:auto; padding:clamp(20px,4vw,48px) clamp(20px,5vw,72px) 48px; display:flex; flex-direction:column; gap:clamp(24px,4vh,48px); background:radial-gradient(900px 600px at 85% 15%, #2e2760 0%, transparent 70%)}
.mp-top{display:flex; justify-content:space-between; align-items:center}
.mp-brand{letter-spacing:.32em; font-size:.9rem; color:#B4AFD6}
.mp-x{font:inherit; font-size:1.1rem; width:48px; height:48px; border-radius:50%; border:1px solid rgba(180,175,214,.3); background:transparent; color:#F2F0FA; cursor:pointer}
.mp-grid{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(20px,3vw,40px)}
@media (max-width:1100px){ .mp-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:640px){ .mp-grid{grid-template-columns:1fr 1fr} }
@media (max-width:420px){ .mp-grid{grid-template-columns:1fr} }
.mp-col .eyebrow{color:#8078B8; margin-bottom:12px}
.mp-col ul{list-style:none; margin:0; padding:0; display:grid; gap:6px}
.mp-col a{font-family:var(--serif); font-weight:340; font-size:clamp(1.15rem,1.7vw,1.5rem); color:#F2F0FA; text-decoration:none; background:linear-gradient(#B4AFD6,#B4AFD6) 0 100%/0 1px no-repeat; transition:background-size .4s, color .3s}
.mp-col a:hover,.mp-col a:focus-visible{background-size:100% 1px; color:#fff}
.mp-col li{opacity:0; transform:translateY(14px); transition:opacity .5s, transform .6s cubic-bezier(.2,.8,.2,1)}
dialog.mp.open .mp-col li{opacity:1; transform:none}
.mp-foot{margin-top:auto; display:flex; flex-wrap:wrap; gap:12px; align-items:center; border-top:1px solid rgba(180,175,214,.18); padding-top:22px}
.mp-foot .btn.primary{background:#B4AFD6; color:#14102E}
.mp-foot .btn{color:#F2F0FA; border-color:rgba(180,175,214,.4)}
.mp-soc{display:flex; flex-wrap:wrap; gap:18px; margin-left:auto; font-size:.9rem}
.mp-soc a{color:#B4AFD6}
html.mp-lock{overflow:hidden}
@media (prefers-reduced-motion: reduce){ dialog.mp{transition:none} .mp-col li{transition:none} .mp-w{animation:none} }
.wt-bf path{fill:currentColor}
.wt-bf .mp-body{fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round}

.soins{display:grid; gap:0; margin-top:16px; border-top:1px solid var(--line, rgba(0,0,0,.12))}
.soin{display:grid; grid-template-columns:1fr auto; gap:20px; padding:18px 0; border-bottom:1px solid var(--line, rgba(0,0,0,.12)); align-items:start}
.soin h3{font-size:1.1rem; margin:0}
.soin p{margin:6px 0 0; color:var(--fg-2)}
.soin-px{text-align:right; white-space:nowrap; margin:0 !important}
.soin-px span{display:block; font-size:.9rem}
.soin-px b{display:block; font-family:var(--serif); font-size:1.3rem; color:var(--fg)}

.theme{display:inline-flex; border:1px solid var(--line); border-radius:999px; padding:2px; gap:2px}
.theme button{display:inline-grid; place-items:center; width:30px; height:28px; border:0; border-radius:999px; background:transparent; color:var(--fg-2); cursor:pointer; padding:0}
.theme button svg{width:16px; height:16px}
.theme button:hover{color:var(--fg)}
.theme button[aria-pressed="true"]{background:var(--accent); color:var(--on-accent)}
.theme button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.theme .tl{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.mp-theme{margin-top:4px}
.mp-theme button{width:auto; height:36px; padding:0 14px; gap:8px; display:inline-flex; align-items:center; font:inherit; font-size:.9rem}
.mp-theme .tl{position:static; width:auto; height:auto; overflow:visible; clip:auto}
@media (max-width:620px){ header.top .theme{display:none} }