/* Animations (GSAP + ScrollTrigger + Lenis, voir anim.js).
   Sans JS, rien n'est masqué : les règles de masquage ne s'appliquent qu'à html.js tant que anim.js n'a pas pris la main. */
:root{--ease:cubic-bezier(.22,1,.36,1)}

/* ---------- rideau d'intro + transitions de page ---------- */
html.intro body::before,html.transit body::before{content:"";position:fixed;inset:0;z-index:1000}
html.intro body::before{background:var(--creme)}
html.transit body::before{background:var(--rose)}
.rideau{position:fixed;inset:0;z-index:1001;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;cursor:pointer}
.rideau{background:var(--creme)}
.transition{position:fixed;inset:0;z-index:1001;overflow:hidden}
.tr-p{position:absolute;left:0;right:0;top:0;height:100vh;height:100lvh;will-change:transform,border-radius}
.tr-1{display:none}
.tr-2{background:var(--rose)}
.tr-logo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:14px;color:#fff;opacity:0;visibility:hidden}
.tr-logo img{width:clamp(120px,16vmin,200px);height:auto;filter:brightness(0) invert(1)}
.tr-logo span{font:300 22px/1.05 var(--f-titre);letter-spacing:.04em}
.tr-logo small{display:block;font:400 38px/1 var(--f-script);letter-spacing:0;margin-top:2px}
.rideau .sceau{position:relative;width:132px;height:132px}
.rideau svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.rideau circle{fill:none;stroke:var(--rose);stroke-width:1.4;stroke-linecap:round}
.rideau .sceau img{position:absolute;inset:14px;width:calc(100% - 28px);opacity:0}
.rideau .nom{text-align:center;font:300 22px/1.1 var(--f-titre);color:var(--texte);letter-spacing:.06em}
.rideau .nom small{display:block;font:400 46px/1 var(--f-script);color:var(--rose);letter-spacing:0;margin-top:4px}

/* ---------- masquage initial (avant que GSAP prenne la main) ---------- */
html.js:not(.secours):not(.anim-pret) .hero h1,
html.js:not(.secours):not(.anim-pret) .hero .surligne,
html.js:not(.secours):not(.anim-pret) .hero .avis-apercu,
html.js:not(.secours):not(.anim-pret) .hero .sous,
html.js:not(.secours):not(.anim-pret) .hero .actions,
html.js:not(.secours):not(.anim-pret) .hero-photos img{visibility:hidden}

/* mots découpés pour les révélations masquées */
.hero h1 .l{display:block;font-style:normal}
.mot{display:inline-block;overflow:hidden;vertical-align:top;padding:.18em .02em .1em;margin:-.18em -.02em -.1em}
.mot>i{display:inline-block;font-style:normal;will-change:transform}

.hero-photos{overflow:hidden}
.hero-photos img{will-change:transform,clip-path}
.branche{transform-origin:50% 100%;animation:balance 8s ease-in-out infinite}
@keyframes balance{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}

/* ---------- boutons : texte qui roule + remplissage depuis le curseur ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate;--balai:var(--rose-fonce);transition:color .45s var(--ease),border-color .45s,box-shadow .45s var(--ease)}
.btn::before{content:"";position:absolute;left:var(--x,50%);top:var(--y,50%);width:var(--r,320px);height:var(--r,320px);margin:calc(var(--r,320px) / -2) 0 0 calc(var(--r,320px) / -2);border-radius:50%;background:var(--balai);transform:scale(0);transition:transform .65s var(--ease);z-index:-1;pointer-events:none}
.btn:hover::before{transform:scale(1)}
.btn:hover{box-shadow:0 14px 30px -14px rgba(238,136,173,.65)}
.btn-rose:hover{background:var(--rose);border-color:var(--rose-fonce)}
.btn-contour,.btn-blanc{--balai:var(--rose)}
.btn-contour:hover,.btn-blanc:hover{background:transparent;color:#fff}
.appel .btn{--balai:var(--rose-fonce)}
.appel .btn:hover{background:#fff;color:#fff;border-color:#fff}
.roule{display:block;overflow:hidden;height:1.6em;line-height:1.6em;margin:-.2em 0}
.roule>span{display:block;position:relative;transition:transform .55s var(--ease)}
.roule>span::after{content:attr(data-t);position:absolute;left:0;right:0;top:100%}
.btn:hover .roule>span{transform:translateY(-100%)}

/* ---------- menu : soulignement qui grandit ---------- */
@media (min-width:1181px){
  .menu a{position:relative;border-bottom-color:transparent!important;transition:color .3s}
  .menu a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rose);transform:scaleX(0);transform-origin:right;transition:transform .6s var(--ease)}
  .menu a:hover::after,.menu a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
}

/* ---------- tuiles : inclinaison 3D + reflet ---------- */
.tuiles{perspective:1100px}
.tuile{transform-style:preserve-3d;will-change:transform}
.tuile img{transition:transform 1.1s var(--ease)}
.tuile:hover img{transform:scale(1.07)}
.tuile::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--mx,50%) var(--my,30%),rgba(255,255,255,.28),rgba(255,255,255,0) 45%);opacity:0;transition:opacity .5s}
.tuile:hover::after{opacity:1}
.voile{isolation:isolate}
.voile::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(60,25,40,.35),rgba(60,25,40,.06) 70%);opacity:0;transition:opacity .6s var(--ease)}
.voile h3,.voile .pill{transition:transform .7s var(--ease),filter .4s,opacity .4s}
.voile .pill{transform:translateY(8px);opacity:.9}
.tuile:hover .voile::before{opacity:1}
.tuile:hover .voile h3{transform:translateY(-8px)}
.tuile:hover .voile .pill{transform:none;opacity:1;filter:brightness(1.1)}

.valeur svg{transition:transform .7s var(--ease),background .4s,color .4s}
.valeur:hover svg{transform:translateY(-6px) rotate(-10deg);background:var(--rose);color:#fff}

.insta a{position:relative;display:block;overflow:hidden}
.insta a img{transition:transform 1.1s var(--ease)}
.insta a::after{content:"";position:absolute;inset:0;background:rgba(238,136,173,.42);opacity:0;transition:opacity .5s var(--ease)}
.insta a svg{position:absolute;left:50%;top:50%;width:34px;height:34px;color:#fff;z-index:1;transform:translate(-50%,-50%) scale(.6);opacity:0;transition:transform .6s var(--ease),opacity .4s}
.insta a:hover img{transform:scale(1.08)}
.insta a:hover::after{opacity:1}
.insta a:hover svg{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media (pointer:fine){.insta a svg{display:none}}

.logo img{transition:transform .8s var(--ease),width .45s var(--ease)}
.logo:hover img{transform:rotate(-12deg)}

/* ---------- curseur « Voir » ---------- */
.curseur{position:fixed;left:0;top:0;z-index:900;width:88px;height:88px;margin:-44px 0 0 -44px;border-radius:50%;background:var(--rose);color:#fff;display:flex;align-items:center;justify-content:center;font:600 11.5px var(--f-titre);letter-spacing:.16em;text-transform:uppercase;pointer-events:none;transform:scale(0)}

/* ---------- bandeau défilant ---------- */
.defile{overflow:hidden;border-block:1px solid var(--rose-pale);padding:26px 0;background:#fff}
.defile-piste{display:flex;width:max-content;white-space:nowrap;will-change:transform}
.defile-piste span{font:200 clamp(30px,4vw,54px)/1 var(--f-titre);color:var(--texte);padding:0 28px}
.defile-piste em{font:400 clamp(42px,5.4vw,72px)/1 var(--f-script);color:var(--rose);font-style:normal;align-self:center}

/* ---------- en-tête ---------- */
.entete{transition:box-shadow .45s}
.entete .conteneur{transition:height .45s var(--ease)}
.entete.reduit{box-shadow:0 1px 0 var(--rose-pale),0 10px 30px -18px rgba(74,53,64,.4)}
.entete.reduit .conteneur{height:70px}
.entete.reduit .logo img{width:54px}
@media (max-width:1180px){.entete.reduit .menu{inset:70px 0 auto 0}}

/* ---------- gâteau du mois ---------- */
.mois-photo{overflow:hidden}
.mois-photo img{will-change:transform}

/* ---------- mouvement réduit : rien ne bouge ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html.intro body::before,html.transit body::before{display:none}
  .curseur,.rideau,.transition{display:none!important}
}
.galerie,.duo{overflow:hidden}
.hero h1 .mot{display:inline-block;font-size:inherit;font-weight:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;margin-bottom:-.1em;margin-top:-.18em}