/* =========================================================
   MOTION : module d'animations réutilisable (motion.js + motion.css)
   Palette Atelier : --canvas --ink --surf --emph --rule --deep.
   Règle d'or : rien n'est caché tant que motion.js n'a pas posé
   html.js-motion. Sans JS, ou en prefers-reduced-motion, tout est lisible.
   Modes posés par motion.js sur <html> : m-full | m-self | m-lite | m-static
   ========================================================= */

/* ---------- 0. mode self : la page est son propre conteneur de défilement ---------- */
html.m-self,html.m-self body{height:100%;overflow:hidden}
#m-scroller{height:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scroll-padding-top:calc(var(--nav-h) + 8px);overscroll-behavior:contain}
@media (prefers-reduced-motion:no-preference){#m-scroller{scroll-behavior:smooth}}

/* ---------- 1. révélations : états initiaux conditionnés à js-motion ---------- */
.js-motion [data-m]{opacity:0;transition:opacity .8s ease,transform 1s cubic-bezier(.16,1,.3,1),clip-path 1.15s cubic-bezier(.77,0,.18,1);transition-delay:calc(var(--i,0) * 90ms)}
.js-motion [data-m="up"]{transform:translate3d(0,36px,0)}
.js-motion [data-m="clip"]{transform:translate3d(0,28px,0);clip-path:inset(0 0 90% 0 round 4px)}
.js-motion [data-m="clip-x"]{transform:translate3d(0,14px,0);clip-path:inset(0 90% 0 0)}
.js-motion [data-m].m-in{opacity:1;transform:none;clip-path:inset(0 0 0 0 round 4px)}
.js-motion [data-m].m-in.m-done{clip-path:none;transition-delay:0s}
/* tableau : les cases entrent en cascade après le cadre */
.js-motion .dgb.m-in .cell{animation:m-cell .6s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--ci,0) * 18ms + 250ms)}
@keyframes m-cell{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}}

/* ---------- 2. loader : logo + trait, puis vol vers la nav ---------- */
.m-loader{display:none}
html.m-loading,html.m-loading body{overflow:hidden}
html.m-loading .m-loader{display:grid;place-items:center;position:fixed;inset:0;z-index:200}
html.m-loading .m-loader::before{content:'';position:absolute;inset:0;background:var(--canvas);transition:opacity .6s ease .2s}
html.m-loading .m-loader.m-fly::before{opacity:0}
/* le hero attend la levée du voile pour rejouer ses révélations */
html.m-hold.anim .xhero .rv.in{opacity:0;transform:translate3d(0,32px,0)}
html.m-hold.anim .xhero .mask.in .ln-in{transform:translate3d(0,125%,0)}
html.m-hold.anim .xhero .ph.in{clip-path:inset(100% 0 0 0)}
html.m-loading .brand img{opacity:0}
.m-loader.m-go .m-loader-rule i{transform:scaleX(1)}
.m-loader-box{position:relative;display:grid;justify-items:center;gap:22px;pointer-events:none}
.m-loader-logo{display:block;width:clamp(170px,22vw,300px);height:auto;transform-origin:50% 50%;transition:transform .85s cubic-bezier(.77,0,.18,1)}
.m-loader-rule{display:block;width:clamp(120px,14vw,190px);height:1px;background:rgba(72,64,54,.22);overflow:hidden;transition:opacity .3s}
.m-loader-rule i{display:block;height:100%;background:var(--ink);transform:scaleX(0);transform-origin:left center;transition:transform .7s cubic-bezier(.45,0,.2,1)}
.m-loader.m-fly .m-loader-rule{opacity:0}

/* ---------- 4. progression de lecture (full et self) ---------- */
.m-progress{position:fixed;left:0;top:0;right:0;height:2px;z-index:70;background:var(--ink);transform:scaleX(0);transform-origin:left center;pointer-events:none;display:none}
html.m-full .m-progress,html.m-self .m-progress{display:block}

/* ---------- 5. bande défilante des catégories recherchées ---------- */
.m-band-wrap{position:relative;z-index:3;overflow:hidden;overflow:clip;padding-block:clamp(16px,3.2vw,40px);margin-block:calc(-1 * clamp(16px,3.2vw,40px))}
.m-band{position:relative;margin:0 -4vw;transform:rotate(-1.6deg);background:var(--emph);color:var(--deep);border-block:1px solid var(--ink);overflow:hidden}
.m-band-lbl{display:block;padding:12px var(--pad) 0;text-align:center}
.m-band-track{display:flex;flex-wrap:wrap;justify-content:center;padding:clamp(10px,1.4vw,18px) var(--pad) clamp(14px,1.8vw,24px)}
.m-band-grp{display:flex;flex-wrap:wrap;justify-content:center;align-items:center}
.m-band-grp[aria-hidden="true"]{display:none}
.m-band li{font-family:var(--f-d);text-transform:uppercase;font-size:clamp(28px,4.2vw,64px);line-height:1.05;padding:0 .45em;white-space:nowrap;display:flex;align-items:center}
.m-band li::after{content:'';display:block;width:.26em;height:.26em;border:1px solid currentColor;margin-left:.9em;transform:rotate(45deg);flex:none}
.js-motion .m-band-track{flex-wrap:nowrap;justify-content:flex-start;width:max-content;padding-inline:0;will-change:transform}
.js-motion .m-band-grp{flex-wrap:nowrap;flex:none}
.js-motion .m-band-grp[aria-hidden="true"]{display:flex}
@media (max-width:900px){.m-band{margin-inline:-8vw}}

/* ---------- 6. scène épinglée : promesse d'audience, zoom-texte, rideau ---------- */
.m-scene{position:relative;background:var(--deep);color:var(--canvas)}
.m-pin{position:relative}
.m-layer{position:relative;padding:clamp(72px,9vw,130px) var(--pad);text-align:center}
.m-zoom{background:var(--deep);color:var(--canvas);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(22px,3vw,44px);min-height:min(80vh,740px)}
.m-zk{opacity:.85}
.m-zphrase{font-size:clamp(46px,min(10.6vw,17vh),172px);line-height:.95;margin:0;transform-origin:50% 55%}
.m-zl{display:block;overflow:hidden;padding:.05em 0 .02em}
.m-zl>span{display:block}
.m-cnt{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px clamp(16px,2.4vw,40px);width:100%;max-width:1320px;padding-top:22px;border-top:1px solid rgba(250,245,235,.38);text-align:left}
.m-c{display:grid;gap:6px;align-content:start}
.m-c-pre{display:block;min-height:1.25em;opacity:.8}
.m-c-n{display:block;font-size:clamp(32px,3.9vw,62px);line-height:1;font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.m-c-l{display:block;opacity:.85}
.m-zn{opacity:.7}
.m-title{background:var(--emph);color:var(--deep);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(18px,2.4vw,34px);position:relative;overflow:hidden;min-height:min(70vh,640px)}
.m-tt{font-size:clamp(50px,min(11vw,18vh),180px);line-height:.95;margin:0}
.m-tl{display:block;overflow:hidden;padding:.05em 0 .02em}
.m-tl>span{display:block}
.m-title .sub{max-width:40ch}
.m-cue{display:block;width:1px;height:42px;background:var(--ink);transform-origin:top;animation:m-cue 1.8s ease-in-out infinite}
@keyframes m-cue{0%{transform:scaleY(0)}60%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
.m-curtain{display:none;position:absolute;inset:0;z-index:5;pointer-events:none}
.m-curtain span{flex:1 1 0;background:var(--emph);transform:scaleY(0);transform-origin:bottom center;margin-right:-1px}

/* mode full et self : épinglée par sticky, durée réglée par motion.js */
html.m-full .m-pin,html.m-self .m-pin{position:sticky;top:var(--m-top,84px);height:var(--m-h,calc(100vh - 84px));overflow:hidden}
html.m-full .m-layer,html.m-self .m-layer{position:absolute;inset:0;min-height:0}
html.m-full .m-curtain,html.m-self .m-curtain{display:flex}
html.m-full .m-title .m-curtain-l,html.m-self .m-title .m-curtain-l{display:none}
html.m-full .m-zl>span,html.m-self .m-zl>span,html.m-full .m-tl>span,html.m-self .m-tl>span{will-change:transform}

/* mode lite : pas de pin, tout se joue à l'entrée dans l'écran */
.m-curtain-l{display:none}
html.m-lite .m-title .m-curtain-l{display:flex;position:absolute;inset:0;z-index:5;pointer-events:none}
html.m-lite .m-curtain-l span{flex:1 1 0;background:var(--emph);transform:scaleY(1);transform-origin:top center;margin-right:-1px;transition:transform .8s cubic-bezier(.77,0,.18,1);transition-delay:calc(var(--j,0) * 55ms + .35s)}
html.m-lite.js-motion .m-scene.m-play .m-curtain-l span{transform:scaleY(0)}
html.js-motion.m-lite .m-zl>span,html.js-motion.m-lite .m-tl>span{transform:translate3d(0,110%,0)}
html.js-motion.m-lite .m-scene.m-play .m-zl>span{transform:none;transition:transform 1s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0) * 120ms)}
html.js-motion.m-lite .m-scene.m-play .m-tl>span{transform:none;transition:transform 1s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0) * 120ms + .9s)}
html.js-motion.m-lite .m-cnt,html.js-motion.m-lite .m-title .sub,html.js-motion.m-lite .m-cue{opacity:0;transition:opacity .8s ease .6s}
html.js-motion.m-lite .m-scene.m-play .m-cnt{opacity:1}
html.js-motion.m-lite .m-scene.m-play .m-title .sub,html.js-motion.m-lite .m-scene.m-play .m-cue{opacity:1;transition-delay:1.7s}

@media (max-width:900px){
  .m-cnt{grid-template-columns:repeat(2,minmax(0,1fr))}
  .m-cnt .m-c:last-child{grid-column:1/-1}
  .m-zoom{justify-content:flex-start}
  html.m-full .m-zoom,html.m-self .m-zoom{justify-content:center}
  .m-c-n{font-size:clamp(30px,9vw,44px)}
}

/* ---------- 7. « Où s'affiche votre marque » : présentoir (glass/stand.js) + cartes de prix ---------- */
.m-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4.4vw,72px);align-items:start;margin-bottom:clamp(20px,2.4vw,32px)}
.m-stand-col{position:sticky;top:calc(var(--nav-h) + 16px);margin:0;display:grid;gap:14px}
.m-stand-col .lbl{margin:0}
.m-stand{position:relative;height:min(calc(100vh - var(--nav-h) - 120px),680px);min-height:360px}
.m-stand:empty{display:none}
.m-stand canvas{filter:drop-shadow(0 30px 34px rgba(72,64,54,.12))}
.m-stand[data-stand="fallback"]{height:auto;min-height:0}
.m-cards{display:grid;gap:clamp(16px,2vw,28px)}
.m-cards .tier{position:relative;transition:border-color .45s ease,box-shadow .45s ease}
.m-cards .tier::before{content:'';position:absolute;left:-1px;top:18px;bottom:18px;width:3px;border-radius:2px;background:var(--accent);opacity:0;transform:scaleY(.4);transition:opacity .45s,transform .6s cubic-bezier(.2,.7,.2,1)}
.m-cards .tier.m-done{transition:transform .4s cubic-bezier(.2,.7,.2,1),border-color .45s ease,box-shadow .45s ease}
.m-ws-on .m-cards .tier.m-on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 18px 40px -26px rgba(51,48,44,.5)}
.m-ws-on .m-cards .tier.m-on::before{opacity:1;transform:none}
.m-ws-on .m-cards .tier.m-on>.lbl{color:var(--accent)}
.m-ws-on .m-cards .tier .sk{display:none}
html.m-full .m-cards .tier,html.m-self .m-cards .tier{min-height:clamp(340px,50vh,540px)}
.m-tilt{transform-style:flat}
@media (max-width:900px){
  .m-split{grid-template-columns:1fr;gap:20px}
  .m-stand-col{position:sticky;top:var(--nav-h);z-index:4;background:var(--surf);padding:8px 0 10px;gap:8px}
  .m-stand-col .lbl{display:none}
  .m-stand,.m-stand[data-stand="fallback"]{height:min(34vh,300px);min-height:200px}
  .m-stand[data-stand="fallback"] .stand-fallback{position:absolute;inset:0}
  .m-stand[data-stand="fallback"] .stand-fallback svg,.m-stand[data-stand="fallback"] .stand-fallback img{height:100%;max-height:none}
  html.m-full .m-cards .tier,html.m-self .m-cards .tier{min-height:0}
}

/* ---------- 8. boutons magnétiques ---------- */
.btn.m-mag-on{transition:background-color .25s,color .25s,transform .22s cubic-bezier(.2,.7,.2,1)}
.btn.m-mag-off{transition:background-color .25s,color .25s,transform .9s cubic-bezier(.34,1.9,.5,1)}

/* ---------- 9. reduced-motion : tout statique ---------- */
@media (prefers-reduced-motion:reduce){
  .m-slot,.m-cap,.m-seg button,.m-cards .tier{transition:none !important}
  .m-ws-on .m-slot.m-on{animation:none}
  .m-scan,.m-cue{display:none !important;animation:none}
  .m-loader{display:none !important}
  .m-band-track{transform:none !important}
}

/* ---------- 10. le 7 en verre dans le hero (glass/hero7.js) ---------- */
/* le hero de l'accueil (.hero) attend la levée du voile comme celui des entreprises (.xhero) */
html.m-hold.anim .hero .rv.in{opacity:0;transform:translate3d(0,32px,0)}
html.m-hold.anim .hero .mask.in .ln-in{transform:translate3d(0,125%,0)}
html.m-hold.anim .hero .ph.in{clip-path:inset(100% 0 0 0)}
/* conteneur : invisible tant que hero7.js n'a pas posé data-hero7="on" sur le hero */
.hero-7{position:relative;min-height:0;opacity:0;transition:opacity 1.1s ease}
.hero-7 canvas{pointer-events:none;filter:drop-shadow(0 34px 38px rgba(72,64,54,.16))}
.hero-7 .glass7-fallback{pointer-events:none}
[data-hero7="on"] .hero-7{opacity:1}