/* ═══ MUSÉE GIRI — page d'application, modèle Giri Draw (13/10/2026) ═══
   Tout passe par les variables des 3 thèmes de l'Académie (portail-emeraude.css) :
   Académie (clair), Nuit, Émeraude. Chargé APRÈS portail-emeraude.css et giri-store.css. */
.musee{--pierre:url("/charte-ga/pierre-jour-2.webp");--ombre-o:rgba(60,42,12,.32);--halo-o:rgba(255,226,150,.55);font-size:18px}
html[data-theme="nuit"] .musee{--pierre:url("/charte-ga/pierre-nuit.webp");--ombre-o:rgba(0,0,0,.6);--halo-o:rgba(240,217,140,.22)}
html:not([data-theme]) .musee{--pierre:url("/charte-ga/pierre-nuit.webp");--ombre-o:rgba(0,0,0,.55);--halo-o:rgba(212,175,110,.2)}

/* la page s'arrête net : pas de vide avant le pied de page */
main.musee{padding-bottom:0!important;margin-bottom:0!important}
.musee + footer{margin-top:0!important}

/* barre de défilement : un fil d'or presque invisible, qui ne se montre qu'au survol */
html{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--or) 38%,transparent) transparent}
html::-webkit-scrollbar{width:7px}
html::-webkit-scrollbar-track{background:transparent}
html::-webkit-scrollbar-thumb{border-radius:7px;border:2px solid transparent;background:color-mix(in srgb,var(--or) 38%,transparent) padding-box}
html::-webkit-scrollbar-thumb:hover{background:var(--or) padding-box}

.musee .m-in{max-width:1200px;margin:0 auto;padding:0 var(--gut,32px)}
.musee h1,.musee h2,.musee h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;line-height:1.05;margin:0;color:var(--txt)}
.musee .m-salle{display:block;font:700 .8rem/1 var(--tc);letter-spacing:.24em;text-transform:uppercase;color:var(--or)}
.musee :focus-visible{outline:3px solid var(--or);outline-offset:4px;border-radius:6px}

/* ── boutons : le favori de la maison « L'Affilié » + le creux ── */
.m-cta{display:inline-flex;align-items:center;justify-content:center;gap:.4em;font:500 21px/1.2 'Cormorant Garamond',Georgia,serif;
  font-variant-numeric:lining-nums;letter-spacing:.2px;color:#3a2708;padding:18px 34px;border-radius:16px;text-decoration:none;
  border:1px solid rgba(160,120,64,.55);background:linear-gradient(135deg,#F4D58A 0%,#E8C078 42%,#C9A253 72%,#A07840 100%);
  box-shadow:0 2px 6px rgba(74,48,12,.12),0 10px 26px rgba(74,48,12,.18),inset 0 1px 0 rgba(255,255,255,.55);transition:transform .2s,box-shadow .2s}
.m-cta:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(74,48,12,.16),0 16px 34px rgba(74,48,12,.24),inset 0 1px 0 rgba(255,255,255,.55)}
.m-creux{display:inline-flex;align-items:center;justify-content:center;font:500 20px/1.2 'Cormorant Garamond',Georgia,serif;padding:17px 28px;
  border-radius:16px;text-decoration:none;color:var(--txt);border:1px solid var(--ligne2);background:var(--surface)}
.m-creux:hover{border-color:var(--or)}
.m-ctas{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.m-liens{display:flex;flex-direction:column;gap:6px}
.m-liens a{font-size:.95rem;color:var(--txt2);text-decoration:underline;text-decoration-color:var(--ligne2);text-underline-offset:4px}
.m-liens a:hover{color:var(--or)}
.m-installer{font-size:.95rem;color:var(--txt2);text-decoration:underline;text-decoration-color:var(--ligne2);text-underline-offset:4px}

/* ── LE HALL : la boule d'or sur sa pierre, le nom gravé derrière ── */
.m-hall{position:relative;overflow:hidden;padding:clamp(16px,2.4vw,32px) 0 clamp(20px,3vw,36px)}
.m-grave{position:absolute;right:-2vw;top:50%;transform:translateY(-50%);font:600 clamp(9rem,26vw,24rem)/.8 'Cormorant Garamond',Georgia,serif;
  letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px var(--ligne2);pointer-events:none;user-select:none;opacity:.55}
.m-hall-g{position:relative;display:grid;grid-template-columns:1fr minmax(0,560px);gap:clamp(24px,4vw,56px);align-items:center}
.m-retour{display:inline-block;font-size:.95rem;color:var(--txt2);text-decoration:none;margin-bottom:12px}
.m-retour:hover{color:var(--or)}
.m-hall h1{font-size:clamp(3.2rem,6.4vw,5.6rem);letter-spacing:-.015em;margin:8px 0 4px}
.m-hall h1 span{background:linear-gradient(180deg,var(--or-clair),var(--or) 55%,var(--or-fonce));-webkit-background-clip:text;background-clip:text;color:transparent}
.m-promesse{font:500 italic clamp(1.45rem,2.6vw,1.95rem)/1.25 'Cormorant Garamond',Georgia,serif;color:var(--txt);margin:0 0 16px}
.m-accroche{color:var(--txt2);max-width:32em;margin:0 0 18px;line-height:1.6}
.m-prix{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;margin:0 0 20px;padding:12px 0;border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne)}
.m-prix .p{font:600 4rem/.85 'Cormorant Garamond',Georgia,serif;font-variant-numeric:lining-nums;color:var(--txt)}
.m-prix .p small{font-size:.45em;color:var(--or);margin-left:2px}
.m-prix .d{font-size:.95rem;color:var(--txt2);line-height:1.45}
.m-prix .d b{display:block;color:var(--txt);font-weight:700}
.m-offert{margin-left:auto;align-self:center;padding:8px 14px;border-radius:999px;border:1px solid var(--ligne2);color:var(--or);font-weight:700;font-size:.9rem}
.m-pour{margin:12px 0 0;color:var(--txt2);font:italic 1.2rem 'Cormorant Garamond',Georgia,serif}

.m-oeuvre{position:relative;margin:0;display:flex;flex-direction:column;align-items:center;perspective:1000px;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.m-oeuvre::before{content:"";position:absolute;inset:-10% -15% 20%;background:radial-gradient(closest-side,var(--halo-o),transparent);pointer-events:none}
.m-flotte{position:relative;z-index:2;animation:m-flotte 6s ease-in-out infinite}
@keyframes m-flotte{50%{transform:translateY(-14px)}}
.m-relief{position:relative;width:min(380px,84vw);aspect-ratio:1;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.7,.2,1);will-change:transform}
.m-oeuvre.on .m-relief{transition:transform .08s linear}
.m-relief img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 34px 38px var(--ombre-o))}
.m-reflet{position:absolute;inset:16%;border-radius:50%;mix-blend-mode:screen;pointer-events:none}
.m-socle{position:relative;z-index:1;width:min(240px,58vw);margin-top:-76px}
.m-socle i{display:block;height:46px;border-radius:50%;background:var(--pierre) center/360px auto;box-shadow:inset 0 -6px 14px rgba(0,0,0,.18),inset 0 4px 10px rgba(255,255,255,.35)}
.m-socle b{display:block;height:64px;margin-top:-23px;border-radius:0 0 50% 50%/0 0 26px 26px;background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(255,255,255,.08) 42%,rgba(0,0,0,.34)),var(--pierre) center/360px auto;position:relative;z-index:-1}
.m-sol{width:min(420px,72vw);height:30px;margin-top:4px;border-radius:50%;background:radial-gradient(closest-side,var(--ombre-o),transparent);animation:m-sol 6s ease-in-out infinite}
@keyframes m-sol{50%{transform:scaleX(.9);opacity:.75}}
.m-cartel{margin:12px 0 0;padding:14px 20px 14px 18px;border-left:2px solid var(--or);background:var(--surface);backdrop-filter:blur(6px);min-width:250px;font-size:.92rem;line-height:1.5;color:var(--txt2)}
.m-cartel b{display:block;font:600 1.25rem 'Cormorant Garamond',Georgia,serif;color:var(--txt)}
.m-cartel .st{display:flex;align-items:center;gap:8px;margin-top:6px;color:var(--txt);font-weight:700}
.m-cartel .st::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--vert);box-shadow:0 0 0 4px color-mix(in srgb,var(--vert) 22%,transparent)}
.m-indice{margin:4px 0 0;font-size:.85rem;color:var(--txt3)}

/* ── LA GALERIE : trois petites captures en éventail, entières ── */
.m-galerie{padding:clamp(24px,3vw,40px) 0;border-top:1px solid var(--ligne)}
.m-tete{text-align:center;margin:0 auto 16px;max-width:40em}
.m-tete h2{font-size:clamp(2.2rem,4.4vw,3.4rem);margin-top:12px}
.m-scene{position:relative;height:calc(min(360px,66vw) * .625 + 40px);perspective:1400px;touch-action:pan-y;user-select:none}
.m-vue{position:absolute;left:50%;top:10px;width:min(360px,66vw);margin-left:calc(min(360px,66vw) / -2);padding:0;border:0;background:none;cursor:pointer;
  transition:transform .8s cubic-bezier(.2,.7,.2,1),opacity .8s,filter .8s;transform-style:preserve-3d}
.m-vue img{width:100%;height:auto;border-radius:10px;box-shadow:0 0 0 1px var(--ligne2),0 0 0 6px var(--surface),0 0 0 7px var(--ligne),0 28px 50px -20px var(--ombre-o)}
.m-vue[data-pos="0"]{transform:translateZ(0);z-index:3}
.m-vue[data-pos="1"]{transform:translateX(68%) translateZ(-180px) rotateY(-24deg);opacity:.62;filter:saturate(.7);z-index:1}
.m-vue[data-pos="-1"]{transform:translateX(-68%) translateZ(-180px) rotateY(24deg);opacity:.62;filter:saturate(.7);z-index:1}
.m-leg{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:10px}
.m-leg p{margin:0;font:500 italic 1.25rem/1.3 'Cormorant Garamond',Georgia,serif;color:var(--txt);text-align:center;min-height:1.3em}
.m-points{display:flex;gap:4px}
.m-points button{width:44px;height:36px;border:0;background:none;cursor:pointer;display:grid;place-items:center;padding:0}
.m-points button::before{content:"";width:22px;height:3px;border-radius:2px;background:var(--ligne2);transition:width .3s,background .3s}
.m-points button[aria-current="true"]::before{width:40px;background:var(--or)}
.m-loupe{border:0;padding:0;background:none;max-width:min(1200px,94vw);margin:auto;inset:0}
.m-loupe::backdrop{background:rgba(5,8,12,.82);backdrop-filter:blur(4px)}
.m-loupe img{width:100%;height:auto;border-radius:10px}
.m-loupe{overflow:visible}
.m-loupe button{position:absolute;top:-18px;right:-18px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.55);color:#fff;font-size:22px;cursor:pointer}

/* ── ATOUTS + QUESTIONS : une seule bande, courte ── */
.m-bloc{padding:clamp(28px,4vw,48px) 0;border-top:1px solid var(--ligne)}
.m-atouts{list-style:none;margin:0 0 28px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.m-atouts li{padding-top:14px;border-top:2px solid var(--or)}
.m-atouts h3{font-size:1.4rem;margin-bottom:6px}
.m-atouts p{margin:0;color:var(--txt2);font-size:.95rem;line-height:1.55}
.m-faq{display:grid;grid-template-columns:repeat(3,1fr);gap:0 26px;align-items:start}
.m-faq details{border-bottom:1px solid var(--ligne)}
.m-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:12px;align-items:center;padding:14px 2px;font:600 1.2rem/1.25 'Cormorant Garamond',Georgia,serif;color:var(--txt)}
.m-faq summary::-webkit-details-marker{display:none}
.m-faq summary::after{content:"+";font:300 1.6rem/1 var(--tc);color:var(--or);transition:transform .3s}
.m-faq details[open] summary::after{transform:rotate(45deg)}
.m-faq details p{margin:0;padding:0 2px 16px;color:var(--txt2);font-size:.95rem;line-height:1.55}

@media (max-width:900px){
  .m-hall-g{grid-template-columns:1fr}
  .m-oeuvre{order:-1}
  .m-relief{width:min(380px,80vw)}
  .m-socle{width:min(250px,54vw);margin-top:-66px}
  .m-grave{top:22%;right:-6vw;font-size:46vw}
  .m-atouts{grid-template-columns:1fr 1fr;gap:18px}
  .m-faq{grid-template-columns:1fr}
}
@media (max-width:560px){
  .musee{font-size:17px}
  .m-ctas{flex-direction:column;align-items:stretch}
  .m-offert{margin-left:0}
  .m-hall{padding-top:8px}
  .m-relief{width:min(200px,54vw)}
  .m-pour,.m-hall .m-salle,.m-atouts p{display:none}
  .m-atouts{margin-bottom:16px}
  .m-atouts li{padding-top:10px}
  .m-liens{flex-direction:row;justify-content:space-between}
  .m-cta{font-size:19px;padding:16px 18px}
  .m-hall h1{font-size:2.9rem}
  .m-accroche{font-size:.98rem}
  .m-atouts h3{font-size:1.2rem}
  .m-atouts p{font-size:.88rem}
  .m-socle{width:min(140px,38vw);margin-top:-40px}
  .m-socle i{height:30px}
  .m-socle b{height:40px;margin-top:-15px}
  .m-sol{width:60vw;height:20px}
  .m-cartel,.m-indice{display:none}   /* sur téléphone, le titre passe avant l'étiquette */
  .m-grave{opacity:.35}
  .m-retour{margin-bottom:14px}
  .m-vue[data-pos="1"]{transform:translateX(52%) translateZ(-220px) rotateY(-26deg)}
  .m-vue[data-pos="-1"]{transform:translateX(-52%) translateZ(-220px) rotateY(26deg)}
}
@media (prefers-reduced-motion:reduce){
  .m-flotte,.m-sol{animation:none}
  .m-relief,.m-vue{transition:none}
}

/* ── L'œuvre éclairée (data-lumiere, 13/10) : deux calques superposés, puis la toile WebGL par-dessus ── */
.m-oeuvre[data-lumiere] .m-relief{touch-action:none}
.m-oeuvre[data-lumiere] .m-relief{cursor:grab}
.m-oeuvre[data-lumiere] .m-relief img,.m-oeuvre[data-lumiere] .m-relief canvas{position:absolute;inset:0;width:100%;height:100%}
.m-oeuvre[data-lumiere] .m-relief canvas{filter:drop-shadow(0 34px 38px var(--ombre-o))}
.m-oeuvre.allumee .m-relief img{visibility:hidden}
.m-oeuvre .m-indice{transition:opacity .8s}
.m-oeuvre.touche .m-indice{opacity:0}

/* ── Le premier écran (13/10, mission de Maha) : un seul bouton, l'accès en lien discret, le prix une fois ── */
.m-ctas{flex-direction:column;align-items:flex-start;gap:10px;margin:6px 0 22px}
.m-cta#installer{min-width:min(320px,100%)}
.m-offre{margin:0;font-size:.95rem;color:var(--txt2);font-variant-numeric:lining-nums}
.m-cartel .m-coll{display:block;margin-top:6px;font-size:.78rem;letter-spacing:.06em;color:var(--txt3)}
.m-faq a{color:var(--or);text-underline-offset:3px}
@media (max-width:560px){
  .m-ctas{align-items:stretch;text-align:center}
}
.m-galerie{overflow-x:clip}   /* les captures en éventail ne font jamais défiler la page de côté */

/* ═══ NIVEAU SUPÉRIEUR (13/10 soir, Maha) : retour, pied de page, apparitions ═══ */
/* ── le retour : une pastille ronde, un chevron fin, des petites capitales ── */
.m-retour{display:inline-flex;align-items:center;gap:14px;margin-bottom:18px;color:var(--txt2);text-decoration:none;
  font:600 .7rem/1 var(--tc);letter-spacing:.24em;text-transform:uppercase;transition:color .5s}
.m-retour i{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--or);
  border:1px solid var(--ligne2);background:var(--surface);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:border-color .5s,transform .6s cubic-bezier(.16,1,.3,1),box-shadow .6s}
.m-retour span{position:relative;padding:4px 0}
.m-retour span::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,var(--or),transparent);
  transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.m-retour:hover{color:var(--txt)}
.m-retour:hover i{border-color:var(--or);transform:translateX(-3px);box-shadow:0 0 0 6px color-mix(in srgb,var(--or) 9%,transparent)}
.m-retour:hover span::after{transform:scaleX(1)}

/* ── le pied de page : pas de bandeau, un filet d'or, deux lignes discrètes ── */
html body.page-app footer.m-pied{margin:0;border:0;background:none}
.m-pied .ft{display:flex;flex-direction:column;align-items:center;gap:16px;padding:34px var(--gut,24px) 30px;text-align:center}
.m-filet{display:flex;align-items:center;gap:16px;width:min(440px,80%)}
.m-filet i{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--ligne2))}
.m-filet i:last-child{background:linear-gradient(270deg,transparent,var(--ligne2))}
.m-filet img{width:20px;height:20px;opacity:.9}
.m-pied-liens{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 0}
.m-pied-liens a,.m-pied-bas{font:500 .78rem/1.6 var(--tc);letter-spacing:.02em;color:var(--txt3)}
.m-pied-liens a+a::before{content:"·";margin:0 12px;color:var(--ligne2)}
.m-pied-bas{margin:0;font-size:.72rem;opacity:.85;display:flex;flex-wrap:wrap;justify-content:center;gap:0 12px}
.m-pied-bas a{color:var(--txt3)}
.m-pied a{text-decoration:none;transition:color .4s}
.m-pied a:hover{color:var(--or)}
.m-pied-bas a::before{content:"·";margin-right:12px;color:var(--ligne2)}
@media (max-width:560px){
  .m-pied-liens{max-width:22em;gap:4px 0}
  .m-pied-liens a{font-size:.74rem;padding:4px 0}
  .m-pied-liens{gap:4px 20px}
  .m-pied-liens a+a::before{display:none}
}

/* ── les apparitions : chacune à sa manière, posées par html.m-anime (absente si mouvement réduit) ── */
@keyframes m-voile{from{opacity:0;transform:translateY(-10px)}}
@keyframes m-glisse{from{opacity:0;transform:translateX(-18px)}}
@keyframes m-nait{from{opacity:0;filter:blur(14px);letter-spacing:.07em}}
@keyframes m-monte{from{opacity:0;transform:translateY(14px);filter:blur(6px)}}
@keyframes m-pose{from{opacity:0;transform:scale(.94)}}
@keyframes m-fond{from{opacity:0}}
@keyframes m-emerge{from{opacity:0;transform:translateY(34px) scale(.9);filter:blur(12px)}}
@keyframes m-halo{from{opacity:0;transform:scale(.55)}}
@keyframes m-eclat{from{background-position:130% 0,0 0}to{background-position:-130% 0,0 0}}
@keyframes m-lustre{from{transform:translateX(-120%) skewX(-18deg)}to{transform:translateX(320%) skewX(-18deg)}}
html.m-anime{--ease:cubic-bezier(.16,1,.3,1)}
html.m-anime header .hd{animation:m-voile 1.1s var(--ease) backwards}
html.m-anime .m-retour{animation:m-glisse 1.1s var(--ease) .15s backwards}
html.m-anime .m-hall h1{animation:m-nait 1.7s var(--ease) .25s backwards}
html.m-anime .m-hall h1 span{background-image:linear-gradient(105deg,transparent 42%,rgba(255,248,225,.95) 50%,transparent 58%),linear-gradient(180deg,var(--or-clair),var(--or) 55%,var(--or-fonce));
  background-size:250% 100%,100% 100%;background-repeat:no-repeat;background-position:130% 0,0 0;animation:m-eclat 1.6s ease-in-out 1.3s backwards}
html.m-anime .m-promesse{animation:m-monte 1.4s var(--ease) .55s backwards}
html.m-anime .m-cta#installer{position:relative;overflow:hidden;animation:m-pose 1.2s var(--ease) .8s backwards}
html.m-anime .m-cta#installer::after{content:"";position:absolute;inset:0 auto 0 0;width:35%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-120%) skewX(-18deg);animation:m-lustre 1.3s ease-in-out 1.9s backwards}
html.m-anime .m-offre{animation:m-fond 1.4s ease .95s backwards}
html.m-anime .m-offre+.m-offre{animation-delay:1.1s}
html.m-anime .m-accroche{animation:m-monte 1.4s var(--ease) 1.15s backwards}
/* l'œuvre : la sphère éclot dans un éclat, puis les fils se dessinent autour d'elle (même tracé dans /js/oeuvre-lumiere.js) */
@property --m-trace{syntax:"<angle>";inherits:false;initial-value:370deg}
@property --m-debut{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes m-trace{from{--m-trace:0deg;--m-debut:32deg}70%{--m-debut:32deg}to{--m-trace:380deg;--m-debut:0deg}}
@keyframes m-eclot{from{opacity:0;transform:scale(.8);filter:brightness(1.9) drop-shadow(0 34px 38px var(--ombre-o))}}
html.m-anime .m-relief img:nth-of-type(2){animation:m-eclot 1.5s cubic-bezier(.25,1,.5,1) .1s backwards}
html.m-anime .m-relief img:nth-of-type(1){-webkit-mask-image:conic-gradient(from 180deg at 50.22% 50.95%,transparent 0deg,#000 min(var(--m-debut),var(--m-trace)),#000 var(--m-trace),transparent calc(var(--m-trace) + 10deg));
  mask-image:conic-gradient(from 180deg at 50.22% 50.95%,transparent 0deg,#000 min(var(--m-debut),var(--m-trace)),#000 var(--m-trace),transparent calc(var(--m-trace) + 10deg));animation:m-trace 2.4s ease-in-out .5s backwards}
html.m-anime .m-sol{animation:m-fond 1.6s ease .1s backwards}
html.m-anime .m-oeuvre::before{animation:m-halo 2.6s var(--ease) .4s backwards}
/* le socle sort du sol : il monte derrière une ligne de sol fixe (translation et découpe vont du même pas), puis une lueur glisse sur la pierre polie */
@keyframes m-surgit{from{transform:translateY(62%);clip-path:inset(-60% -20% 62% -20%)}to{transform:none;clip-path:inset(-60% -20% 0 -20%)}}
@keyframes m-poli{from{transform:translateX(-140%) skewX(-24deg)}to{transform:translateX(340%) skewX(-24deg)}}
@keyframes m-ombre{from{opacity:0;transform:scaleX(.35)}}
html.m-anime .m-socle{animation:m-surgit 1.3s cubic-bezier(.22,1,.36,1) backwards}
html.m-anime .m-socle i{position:relative;overflow:hidden}
html.m-anime .m-socle i::after{content:"";position:absolute;inset:0 auto 0 0;width:28%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,250,235,.75),transparent);transform:translateX(340%) skewX(-24deg);
  animation:m-poli 1.4s cubic-bezier(.45,0,.25,1) 1.05s backwards}

/* au défilement : la galerie s'ouvre en éventail, le pied de page tire son filet */
html.m-anime [data-revele] .m-salle{transition:opacity 1.2s var(--ease),letter-spacing 1.6s var(--ease)}
html.m-anime [data-revele]:not(.vu) .m-salle{opacity:0;letter-spacing:.6em}
html.m-anime .m-galerie:not(.vu) .m-vue{opacity:0;transform:translateY(46px) scale(.95)!important;filter:blur(6px)}
html.m-anime .m-galerie.entree .m-vue{transition-duration:1.4s;transition-timing-function:var(--ease)}
html.m-anime .m-galerie.entree .m-vue:not([data-pos="0"]){transition-delay:.35s}
html.m-anime .m-leg{transition:opacity 1.2s ease .7s}
html.m-anime .m-galerie:not(.vu) .m-leg{opacity:0}
html.m-anime .m-pied .m-filet i{transition:transform 1.6s var(--ease)}
html.m-anime .m-pied .m-filet i:first-child{transform-origin:right}
html.m-anime .m-pied .m-filet i:last-child{transform-origin:left}
html.m-anime .m-pied:not(.vu) .m-filet i{transform:scaleX(0)}
html.m-anime .m-pied .m-filet img{transition:opacity 1.2s ease .2s,transform 1.4s var(--ease) .2s}
html.m-anime .m-pied:not(.vu) .m-filet img{opacity:0;transform:scale(.5)}
html.m-anime .m-pied .m-pied-liens,html.m-anime .m-pied .m-pied-bas{transition:opacity 1.4s ease .5s,transform 1.4s var(--ease) .5s}
html.m-anime .m-pied .m-pied-bas{transition-delay:.75s}
html.m-anime .m-pied:not(.vu) :is(.m-pied-liens,.m-pied-bas){opacity:0;transform:translateY(8px)}

/* ── génie (13/10 soir) : le menu en pastille assortie au retour, les deux lignes d'offre resserrées ── */
.page-app .menu-bouton{width:44px;height:44px;border-radius:50%;border:1px solid var(--ligne2);background:var(--surface);gap:5px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:border-color .5s,box-shadow .6s}
.page-app .menu-bouton span{width:17px;height:1.5px}
.page-app .menu-bouton:hover{border-color:var(--or);background:var(--surface);box-shadow:0 0 0 6px color-mix(in srgb,var(--or) 9%,transparent)}
.page-app .menu-bouton[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.page-app .menu-bouton[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.m-ctas .m-cta+.m-offre{margin-top:6px}
.m-offre+.m-offre{margin-top:-8px;font-size:.85rem;color:var(--txt3);letter-spacing:.02em}

/* ── la signature de l'atelier : tout en bas, à peine là, l'or s'éveille au survol ── */
.m-signature{margin-top:6px;font:600 .62rem/1 var(--tc);letter-spacing:.32em;text-transform:uppercase;color:var(--txt3);
  opacity:.6;text-decoration:none;transition:opacity .6s,letter-spacing .9s cubic-bezier(.16,1,.3,1)}
.m-signature b{font-weight:700;color:var(--or);transition:text-shadow .8s}
.m-signature:hover{opacity:1;letter-spacing:.36em}
.m-signature:hover b{text-shadow:0 0 14px color-mix(in srgb,var(--or-clair) 70%,transparent)}
html.m-anime .m-pied .m-signature{transition:opacity 1.4s ease 1s,letter-spacing .9s cubic-bezier(.16,1,.3,1)}
html.m-anime .m-pied:not(.vu) .m-signature{opacity:0}
@media (max-width:560px){.m-signature{font-size:.58rem;letter-spacing:.26em}}

/* ── survols premium (13/10 soir) : le lingot s'élève et un reflet le traverse ; la capture se soulève dans un liseré d'or ── */
.m-cta#installer{position:relative;overflow:hidden;isolation:isolate;
  transition:transform .6s cubic-bezier(.16,1,.3,1),box-shadow .6s cubic-bezier(.16,1,.3,1),letter-spacing .6s cubic-bezier(.16,1,.3,1)}
.m-cta#installer::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 28%,rgba(255,255,255,.6) 47%,rgba(255,246,214,.25) 55%,transparent 72%);
  transform:translateX(-115%);transition:transform 1s cubic-bezier(.16,1,.3,1)}
.m-vue::after{content:"";position:absolute;inset:0;border-radius:10px;pointer-events:none;opacity:0;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);background-size:250% 100%;background-position:120% 0;
  transition:opacity .5s,background-position 1.1s cubic-bezier(.16,1,.3,1)}
.m-vue img{transition:box-shadow .7s cubic-bezier(.16,1,.3,1)}
.m-vue[data-pos="0"]{cursor:zoom-in}
@media (hover:hover){
  .m-cta#installer:hover{transform:translateY(-3px);letter-spacing:.06em;
    box-shadow:0 6px 14px rgba(74,48,12,.16),0 24px 46px -10px rgba(160,118,40,.5),0 0 0 6px color-mix(in srgb,var(--or) 12%,transparent),inset 0 1px 0 rgba(255,255,255,.6)}
  .m-cta#installer:hover::before{transform:translateX(115%)}
  .m-vue[data-pos="0"]:hover{transform:translateY(-8px) scale(1.03)}
  .m-vue[data-pos="0"]:hover img{box-shadow:0 0 0 1px var(--or),0 0 0 6px var(--surface),0 0 0 7px color-mix(in srgb,var(--or) 55%,transparent),0 44px 64px -22px var(--ombre-o)}
  .m-vue[data-pos="0"]:hover::after{opacity:1;background-position:-20% 0}
  .m-vue[data-pos="1"]:hover{opacity:.9;filter:saturate(1);transform:translateX(64%) translateZ(-140px) rotateY(-18deg)}
  .m-vue[data-pos="-1"]:hover{opacity:.9;filter:saturate(1);transform:translateX(-64%) translateZ(-140px) rotateY(18deg)}
}
.m-cta#installer:active{transform:translateY(-1px) scale(.985);transition-duration:.15s}

/* ── LE PIÉDESTAL (13/10 soir, Maha : « plus premium, et adapté à l'Émeraude ») ──
   une pierre qui n'est pas celle du fond, ombrée en colonne, cerclée d'or, posée sur une marche ; la face reçoit le reflet de la boule */
.musee{--pierre-socle:url("/css/textures/marbre-affiliation-1500.webp");--liseré:#d9b56a;--liseré-sombre:rgba(110,78,26,.45)}
html[data-theme="nuit"] .musee{--pierre-socle:url("/css/textures/marbre-nuit.webp");--liseré:#c9a253;--liseré-sombre:rgba(0,0,0,.55)}
html:not([data-theme]) .musee{--pierre-socle:url("/img/portail/musee/marbre-emeraude.webp");--liseré:#cfa65a;--liseré-sombre:rgba(0,0,0,.5)}
.m-socle i{background:
    radial-gradient(ellipse 44% 52% at 50% 44%,rgba(255,214,130,.6),rgba(255,214,130,.14) 55%,transparent 76%),
    linear-gradient(180deg,rgba(255,255,255,.16),rgba(0,0,0,.14)),
    var(--pierre-socle) center/320px auto;
  box-shadow:inset 0 0 0 1.5px var(--liseré),inset 0 0 0 2.5px var(--liseré-sombre),inset 0 -9px 16px rgba(0,0,0,.24),inset 0 6px 10px rgba(255,255,255,.28)}
.m-socle b{border-bottom:2px solid var(--liseré);background:
    linear-gradient(90deg,rgba(0,0,0,.5),rgba(0,0,0,.1) 17%,rgba(255,255,255,.26) 33%,rgba(255,255,255,.05) 47%,rgba(0,0,0,.16) 70%,rgba(0,0,0,.55)),
    var(--pierre-socle) 40% 30%/320px auto}
.m-socle::after{content:"";position:relative;z-index:-2;display:block;width:114%;height:24px;margin:-13px -7% 0;border-radius:50%;
  background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.12) 22%,rgba(255,255,255,.18) 36%,rgba(0,0,0,.2) 72%,rgba(0,0,0,.6)),var(--pierre-socle) 60% 70%/320px auto;
  box-shadow:inset 0 0 0 1px var(--liseré),inset 0 4px 8px rgba(255,255,255,.22),0 5px 0 -1px color-mix(in srgb,var(--liseré-sombre) 100%,#000 30%),0 6px 0 -1px var(--liseré),0 16px 22px -10px var(--ombre-o)}
.m-socle::after{height:28px;margin-top:-18px}
@media (max-width:560px){
  .m-socle::after{height:18px;margin-top:-12px}
  .m-socle b{border-bottom-width:1.5px}
}

/* ── L'OMBRE (13/10 soir, Maha : « enlever les socles, juste une ombre ultra premium qui bouge au rythme du logo ») ──
   trois couches : le noyau de contact, la pénombre, la lumière d'or que la boule renvoie au sol.
   Elle respire avec .m-flotte (même durée, même courbe, même départ) : la boule monte, l'ombre se resserre et pâlit. */
.m-oeuvre{--rw:min(380px,84vw)}
.m-sol{position:relative;width:calc(var(--rw) * .6);height:calc(var(--rw) * .09);margin-top:calc(var(--rw) * -.1);
  background:none;border-radius:0;animation:none;pointer-events:none;z-index:1}
.m-sol::before,.m-sol::after{content:"";position:absolute;left:50%;top:50%;border-radius:50%;animation:m-souffle 6s ease-in-out infinite}
/* dessous : la pénombre large et la lumière d'or renvoyée par la boule */
.m-sol::before{width:200%;height:300%;margin:calc(var(--rw) * -.135) 0 0 calc(var(--rw) * -.6);filter:blur(12px);
  background:radial-gradient(closest-side,var(--reflet-or),transparent 58%),radial-gradient(closest-side,var(--penombre),transparent 90%)}
/* dessus : le noyau de contact, net et dense */
.m-sol::after{width:100%;height:100%;margin:calc(var(--rw) * -.045) 0 0 calc(var(--rw) * -.3);filter:blur(4px);
  background:radial-gradient(closest-side,var(--ombre-noyau),color-mix(in srgb,var(--ombre-noyau) 55%,transparent) 50%,transparent)}
@keyframes m-souffle{50%{transform:scale(.74,.82);opacity:.62}}
.musee{--ombre-noyau:rgba(48,30,4,.9);--penombre:rgba(70,48,12,.42);--reflet-or:rgba(214,158,52,.5)}
html[data-theme="nuit"] .musee{--ombre-noyau:rgba(0,0,0,.95);--penombre:rgba(0,0,0,.6);--reflet-or:rgba(240,190,96,.3)}
html:not([data-theme]) .musee{--ombre-noyau:rgba(0,0,0,.92);--penombre:rgba(0,0,0,.55);--reflet-or:rgba(236,186,92,.3)}
@media (max-width:900px){.m-oeuvre{--rw:min(380px,80vw)}}
@media (max-width:560px){.m-oeuvre{--rw:min(200px,54vw)}.m-sol{width:calc(var(--rw) * .6);height:calc(var(--rw) * .09)}}
@media (prefers-reduced-motion:reduce){.m-sol::before,.m-sol::after{animation:none}}

/* ── +15 % pour l'œuvre et son ombre (13/10 soir) ; les particules de Draw (/js/musee-traits.js) ── */
.m-oeuvre{--rw:min(437px,88vw)}
.m-oeuvre .m-relief{width:var(--rw)}
@media (max-width:900px){.m-oeuvre{--rw:min(437px,84vw)}}
@media (max-width:560px){.m-oeuvre{--rw:min(230px,62vw)}}
.m-poussiere{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}

/* ── Giri Sign (data-trait, 13/10) : le crayon glisse en place, puis la signature se trace de gauche à droite
   — même horloge que /js/oeuvre-lumiere.js (crayon 0,7 s → 1,7 s, trait 1,5 s → 3,9 s), relève CSS→WebGL invisible ── */
.m-oeuvre[data-trait] .m-relief img:nth-of-type(3){z-index:-1}
html.m-anime .m-oeuvre[data-trait] .m-relief img:nth-of-type(1){-webkit-mask-image:none;mask-image:none;animation:m-plume 1s cubic-bezier(.25,1,.5,1) .7s backwards}
html.m-anime .m-oeuvre[data-trait] .m-relief img:nth-of-type(3){animation:m-signe 2.4s cubic-bezier(.45,0,.55,1) 1.5s backwards}
@keyframes m-plume{from{opacity:0;transform:translate(-5%,3%)}}
@keyframes m-signe{from{clip-path:inset(0 89.66% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* ── Giri Rencontres (data-fusion, 13/10) : deux sphères qui s'attirent et fusionnent (/js/oeuvre-fusion.js).
   L'œuvre vit dans un carré (.m-carre) mais n'en peint que la bande du milieu : on cadre la bande, le carré déborde. ── */
.m-oeuvre[data-fusion] .m-relief{aspect-ratio:auto;height:calc(var(--rw) * .62);touch-action:none;cursor:grab}
.m-oeuvre[data-fusion] .m-carre{position:absolute;left:0;top:calc(var(--rw) * -.16);width:100%;aspect-ratio:1}
.m-oeuvre[data-fusion] .m-carre canvas{position:absolute;left:-35%;top:-35%;width:170%;height:170%;pointer-events:none}   /* K = 1,7 dans oeuvre-fusion.js */
.m-hall:has([data-fusion]){overflow:visible;overflow-x:clip}   /* l'onde de choc passe au-dessus du bord du hall au lieu d'y être coupée */
.m-oeuvre[data-fusion] .m-carre img{position:absolute;top:29.84%;width:34.32%;height:auto;aspect-ratio:1;filter:none}
.m-oeuvre[data-fusion] .m-carre img:nth-of-type(1){left:5.34%}
.m-oeuvre[data-fusion] .m-carre img:nth-of-type(2){left:60.34%}
.m-ombre-f{position:absolute;top:64.5%;left:7.5%;width:30%;height:5%;border-radius:50%;filter:blur(7px);will-change:transform;
  background:radial-gradient(closest-side,var(--ombre-o),transparent),radial-gradient(closest-side,var(--ombre-o),transparent)}
/* deux sphères demandent plus de largeur qu'un seul logo */
.m-oeuvre[data-fusion]{--rw:min(560px,44vw)}
@media (max-width:900px){.m-oeuvre[data-fusion]{--rw:min(520px,88vw)}}
@media (max-width:560px){.m-oeuvre[data-fusion]{--rw:min(360px,92vw)}}
.m-ombre-f + .m-ombre-f{left:62.5%}
.m-oeuvre[data-fusion] .m-sol{display:none}
html.m-anime .m-oeuvre[data-fusion] .m-carre img:nth-of-type(1){-webkit-mask-image:none;mask-image:none;animation:m-eclot 1.5s cubic-bezier(.25,1,.5,1) .1s backwards}
html.m-anime .m-oeuvre[data-fusion] .m-carre img:nth-of-type(2){animation:m-eclot 1.5s cubic-bezier(.25,1,.5,1) .35s backwards}
html.m-anime .m-oeuvre[data-fusion] .m-ombre-f{animation:m-fond 1.6s ease .1s backwards}

/* ── Giri Thérapia (data-iris, 13/10) : l'objectif dont le diaphragme respire (/js/oeuvre-iris.js).
   Carré classique ; la toile déborde de 35 % de chaque côté (K = 1,7) pour que les ondes s'éteignent seules. ── */
.m-oeuvre[data-iris] .m-relief{touch-action:none;cursor:grab}
.m-oeuvre[data-iris] .m-carre{position:absolute;inset:0}
.m-oeuvre[data-iris] .m-carre canvas{position:absolute;left:-35%;top:-35%;width:170%;height:170%;pointer-events:none}
.m-oeuvre[data-iris] .m-carre img{position:absolute;left:17.64%;top:14.14%;width:64.72%;height:64.72%}
.m-oeuvre[data-iris] .m-sol{margin-top:calc(var(--rw) * -.24)}
.m-hall:has([data-iris]){overflow:visible;overflow-x:clip}
html.m-anime .m-oeuvre[data-iris] .m-carre img{-webkit-mask-image:none;mask-image:none;animation:m-eclot 1.5s cubic-bezier(.25,1,.5,1) .1s backwards}

/* ── Giri Nexus (data-reseau, 13/10) : la sphère au cœur de son réseau de neurones (/js/oeuvre-reseau.js).
   Carré classique ; la toile déborde de 17,5 % de chaque côté (K = 1,35) pour ne jamais couper un neurone du bord. ── */
.m-oeuvre[data-reseau] .m-relief{touch-action:none;cursor:grab}
.m-oeuvre[data-reseau] .m-carre{position:absolute;inset:0}
.m-oeuvre[data-reseau] .m-carre canvas{position:absolute;left:-17.5%;top:-17.5%;width:135%;height:135%;pointer-events:none}
.m-oeuvre[data-reseau] .m-carre img{position:absolute;left:34.4%;top:30.4%;width:31.2%;height:31.2%}
.m-oeuvre[data-reseau] .m-sol{margin-top:calc(var(--rw) * -.3);transform:scale(.55)}
.m-hall:has([data-reseau]){overflow:visible;overflow-x:clip}
html.m-anime .m-oeuvre[data-reseau] .m-carre img{-webkit-mask-image:none;mask-image:none;animation:m-eclot 1.5s cubic-bezier(.25,1,.5,1) .1s backwards}
.m-oeuvre[data-reseau]{--rw:min(540px,44vw)}   /* le réseau n'occupe que le cœur du carré : on agrandit le carré */
@media (max-width:900px){.m-oeuvre[data-reseau]{--rw:min(520px,88vw)}}
@media (max-width:560px){.m-oeuvre[data-reseau]{--rw:min(340px,88vw)}}

/* ── La Sonothèque (14/10) : la sphère d'or qui rebondit en chantant (/js/oeuvre-sono.js, logo de Maha) ──
   Cadre = l'image source du logo (1500 × 1300). Sans WebGL : les anneaux et la sphère, posés comme dans le logo.
   La scène 3D déborde du cadre (.m-scene3d, mêmes valeurs que E dans le moteur) : chute et envol des notes jamais coupés. */
.m-oeuvre[data-sono]{--rw:min(520px,44vw)}
@media (max-width:900px){.m-oeuvre[data-sono]{--rw:min(500px,86vw)}}
@media (max-width:560px){.m-oeuvre[data-sono]{--rw:min(340px,86vw)}}
.m-oeuvre[data-sono] .m-flotte{animation:none}
.m-oeuvre[data-sono] .m-relief{aspect-ratio:1500/1300;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.m-oeuvre[data-sono] .m-cadre{position:absolute;inset:0}
.m-oeuvre[data-sono] .m-cadre img{position:absolute;transition:opacity .35s ease}
.m-oeuvre[data-sono] .m-cadre img.m-anneaux{left:8%;top:56.15%;width:84%;height:40%}
.m-oeuvre[data-sono] .m-cadre img.m-sphere{left:22.47%;top:9.08%;width:55.33%;height:63.85%}
.m-oeuvre[data-sono].allumee .m-cadre img{opacity:0}
.m-oeuvre[data-sono] .m-scene3d{position:absolute;left:-18%;right:-18%;top:-62%;bottom:-6%;z-index:3}
.m-oeuvre[data-sono] .m-scene3d canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block}
.m-oeuvre[data-sono] .m-sol{display:none}
.m-hall:has([data-sono]){overflow:visible;overflow-x:clip}
.m-oeuvre[data-sono] .m-ecoute{margin:14px 0 0;font:600 .72rem/1.4 Manrope,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--or);opacity:.72;text-align:center;transition:opacity .3s}
.m-oeuvre[data-sono]:not(.allumee) .m-ecoute{visibility:hidden}
.m-oeuvre[data-sono].son .m-ecoute{opacity:1}
html.m-anime .m-oeuvre[data-sono] .m-cadre img{animation:m-eclot 1.4s cubic-bezier(.25,1,.5,1) .1s backwards}
/* galerie en portrait (captures de téléphone) : même éventail, vignettes plus étroites */
.m-galerie.m-portrait .m-vue{width:min(210px,40vw);margin-left:calc(min(210px,40vw) / -2)}
.m-galerie.m-portrait .m-scene{height:calc(min(210px,40vw) * 1.778 + 40px)}

/* ===== 6 captures adaptées à l'appareil (Maha, 16/10/2026) : horizontales sur ordinateur, verticales sur téléphone ===== */
.m-vue picture{display:block}
.m-vue:not([data-pos="0"]):not([data-pos="1"]):not([data-pos="-1"]){opacity:0!important;pointer-events:none;transform:translateZ(-340px) scale(.82)!important}
@media (max-width:760px){
  .m-adapte .m-vue{width:min(220px,54vw);margin-left:calc(min(220px,54vw) / -2)}
  .m-adapte .m-scene{height:calc(min(220px,54vw) * 2.164 + 40px)}
}
.m-loupe img{max-height:90vh;width:auto;max-width:100%;display:block;margin:auto}
/* [AUDIT 24/10] « Façonné sur mesure par Digital Giri » : en flex, l espace avant <b> disparaissait (« parDigital ») */
.m-signature{gap:.45em}