/* Couche « studio » : animations de niveau agence, par-dessus site.css */
:root{--st-ease:cubic-bezier(.22,1,.36,1);--st-pad:clamp(16px,3vw,40px)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* grain de papier très léger */
body::after{content:"";position:fixed;inset:0;z-index:300;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- Rideau de transition entre les pages ---------- */
.st-rideau{position:fixed;inset:0;z-index:500;pointer-events:none;animation:st-auto 0s 2.6s forwards}
@keyframes st-auto{to{visibility:hidden}}
.st-panneau{position:absolute;left:0;right:0;height:50.5%;background:#f6f5f8}
.st-panneau.h{top:0}.st-panneau.b{bottom:0}
.st-centre{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:18px}
.st-script{font:400 clamp(64px,12vw,150px)/1 "Herr Von Muellerhoff",cursive;color:#111;clip-path:inset(0 100% 0 0)}
.st-ligne{width:min(240px,50vw);height:1px;background:rgba(17,17,17,.12);overflow:hidden}
.st-ligne i{display:block;height:100%;background:#6f5a98;transform:scaleX(0);transform-origin:left}
.st-compte{font:500 13px/1 "DM Sans",sans-serif;letter-spacing:.2em;color:#57545c;font-variant-numeric:tabular-nums}
.st-rideau.cache{visibility:hidden}

/* ---------- Héros photo vivante (accueil) ---------- */
.st-heros{position:relative;margin:10px var(--st-pad) 0;height:calc(100svh - 100px);min-height:540px;border-radius:22px;overflow:hidden;color:#fff;display:grid;align-items:end;isolation:isolate}
.st-media{position:absolute;inset:0;overflow:hidden}
.st-gl,.st-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.st-gl{opacity:0}.st-gl-ok .st-gl{opacity:1}.st-gl-ok .st-img{visibility:hidden}
.st-voile{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(25,18,38,.5) 0%,rgba(25,18,38,0) 65%),linear-gradient(180deg,rgba(17,17,17,.15) 0%,rgba(17,17,17,0) 30%,rgba(30,20,45,.6) 100%)}
.st-heros-txt{position:relative;padding:0 clamp(22px,4vw,60px) clamp(100px,15vh,150px);pointer-events:none}
.st-sur{font:500 12px/1.4 "DM Sans",sans-serif;letter-spacing:.24em;text-transform:uppercase;margin:0 0 18px}
.st-geant{font:500 clamp(44px,8.6vw,140px)/.94 "Playfair Display",Georgia,serif;letter-spacing:-.025em;margin:0;color:inherit}
.st-heros .st-geant em{color:#d9cbee}
.st-l{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.st-li{display:block}
.st-heros-bas{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding:0 clamp(22px,4vw,60px) 28px;font-size:14px}
.st-heros-bas p{margin:0}
.st-heros-actions{display:flex;flex-wrap:wrap;gap:10px;pointer-events:auto}
.st-heros .btn-ligne{color:#fff;border-color:rgba(255,255,255,.7)}
.st-defiler{display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.st-defiler i{width:1px;height:46px;background:rgba(255,255,255,.35);position:relative;overflow:hidden}
.st-defiler i::after{content:"";position:absolute;inset:0;background:#fff;animation:st-goutte 2.2s var(--st-ease) infinite}
@keyframes st-goutte{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
@media (max-width:700px){.st-heros{margin:8px 10px 0;border-radius:16px;height:calc(100svh - 90px)}.st-defiler{display:none}.st-heros-bas{flex-direction:column;align-items:flex-start}.st-heros-txt{padding-bottom:190px}}

/* ---------- Univers en défilement horizontal ---------- */
.st-univers{position:relative}
.st-u-pin{min-height:100svh;display:flex;flex-direction:column;justify-content:center;gap:clamp(28px,5vh,56px);overflow:hidden;padding-block:40px}
.st-u-tete{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.st-titre{font:500 clamp(40px,6vw,96px)/.98 "Playfair Display",Georgia,serif;letter-spacing:-.02em;margin:0}
.st-progress{width:min(220px,30vw);height:1px;background:rgba(17,17,17,.12);margin-bottom:14px}
.st-progress i{display:block;height:100%;background:#111;transform:scaleX(0);transform-origin:left}
.st-piste{display:flex;gap:clamp(16px,2vw,28px);padding-inline:max(20px,calc((100vw - 1240px)/2));width:max-content;will-change:transform}
.st-carte{position:relative;display:flex;flex-direction:column;gap:16px;width:clamp(260px,30vw,440px);text-decoration:none;color:inherit}
.st-num{position:absolute;top:14px;left:16px;z-index:2;color:#fff;font:500 13px/1 "DM Sans",sans-serif;letter-spacing:.18em}
.st-cimg{display:block;aspect-ratio:4/5;overflow:hidden;border-radius:14px;background:#dcd9e1}
.st-cimg img{width:100%;height:100%;object-fit:cover}
.st-ctxt{display:flex;flex-direction:column;gap:4px}
.st-ctxt b{font:500 26px/1.1 "Playfair Display",Georgia,serif}
.st-ctxt span{color:#57545c;font-size:15px}
@media (max-width:860px){.st-u-pin{min-height:0;padding-block:80px}.st-piste{width:auto;flex-direction:column;padding-inline:20px}.st-carte{width:100%}.st-progress{display:none}}

/* ---------- Broderie : le prénom se brode ---------- */
.st-broderie{padding-block:clamp(90px,14vh,160px)}
.st-b-grille{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,100px);align-items:center}
.st-b-img{display:block;overflow:hidden;border-radius:14px;aspect-ratio:4/5}
.st-b-img img{width:100%;height:100%;object-fit:cover;transform:scale(1.25)}
.st-nom{position:relative;margin:24px 0 10px;font:400 clamp(80px,10vw,150px)/1 "Herr Von Muellerhoff",cursive;color:#6f5a98;display:inline-block}
.st-nom-in{display:inline-block;clip-path:inset(-20% 100% -20% 0)}
.st-aiguille{position:absolute;top:22%;left:0;width:2px;height:58%;background:linear-gradient(#111,#111 80%,transparent);border-radius:2px;opacity:0}
.st-aiguille::before{content:"";position:absolute;top:-6px;left:-3px;width:8px;height:8px;border-radius:50%;border:1.5px solid #111}
.st-b-p{max-width:46ch;color:#57545c;margin:0 0 28px}
@media (max-width:860px){.st-b-grille{grid-template-columns:1fr}}

/* ---------- Ruban des matières ---------- */
.st-ruban{padding-block:26px;border-block:1px solid rgba(17,17,17,.12);overflow:hidden;background:#f6f5f8}
.st-r-piste{display:flex;width:max-content;font:500 italic clamp(42px,6vw,88px)/1.1 "Playfair Display",Georgia,serif;white-space:nowrap;will-change:transform}
.st-r-piste span{padding-right:.3em}

/* ---------- Grande signature de fin ---------- */
.st-fin{margin:clamp(30px,6vh,60px) 0 0;text-align:center;font:400 clamp(130px,30vw,460px)/.8 "Herr Von Muellerhoff",cursive;color:#6f5a98;white-space:nowrap;user-select:none;overflow:hidden}
.st-fin span{display:inline-block;clip-path:inset(-20% 100% -20% 0)}

/* ---------- Effets communs ---------- */
.st-mot{display:inline}
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:#6f5a98;transform:translateY(101%);transition:transform .6s var(--st-ease)}
.btn:hover::before{transform:none}
.btn.btn-ligne:hover{color:#fff}

/* sans JavaScript ou mouvement réduit : tout est visible */
.st-reduit .st-nom-in,.st-reduit .st-fin span,.no-st .st-nom-in,.no-st .st-fin span{clip-path:none}
.st-reduit .st-rideau{display:none}
@media (prefers-reduced-motion:reduce){.st-nom-in,.st-fin span{clip-path:none}.st-rideau{display:none!important}.st-defiler i::after{animation:none}}

/* plus de stylo qui souligne les titres : un simple italique lilas, plus chic */
.pique svg,.pique .stylo,.sig-trait{display:none!important}
.pique{font-style:italic;color:var(--sarcelle,#8e78b6)}