/* =====================================================================
   PIXEART — motion.css (couche de mouvement partagée, v1)
   Principes : sobre, homogène, fluide.
   - une seule courbe (--mo-ease), des durées courtes, AUCUNE couleur nouvelle
     (or, ivoire, olive : celles du logo)
   - on n'anime que opacity / translate / scale / rotate : rien qui recalcule la mise en page
   - tout est coupé si l'appareil demande « réduire les animations »
   - sans JavaScript : rien n'est caché, rien ne bouge (tout est sous html.mo)
   ===================================================================== */
:root{
  --mo-ease:cubic-bezier(.16,1,.3,1);      /* sortie « expo » : démarre vite, se pose en douceur */
  --mo-ease-io:cubic-bezier(.65,0,.35,1);
  --mo-rise:22px;
  --mo-gold:#D9AE2B;--mo-gold2:#E9C766;--mo-olive:#8A7A4A;--mo-ivory:#F1EDE2;
}
@media(max-width:700px){:root{--mo-rise:14px}}

@keyframes mo-rise{from{opacity:0;translate:0 var(--mo-rise)}to{opacity:1;translate:0 0}}
@keyframes mo-word{from{opacity:0;translate:0 .45em}to{opacity:1;translate:0 0}}
@keyframes mo-drop{from{opacity:0;translate:0 -14px}to{opacity:1;translate:0 0}}
@keyframes mo-fall{from{opacity:0;translate:0 -8px}to{opacity:1;translate:0 0}}
@keyframes mo-pixel{from{opacity:0;translate:var(--tx,0) var(--ty,0)}to{opacity:1;translate:0 0}}
@keyframes mo-star{0%{scale:0;rotate:-40deg}7%{scale:1;rotate:0deg}15%,100%{scale:0;rotate:70deg}}
@keyframes mo-pop{from{scale:0;rotate:-90deg}to{scale:1;rotate:0deg}}
@keyframes mo-glint{0%{translate:-200% 0}18%,100%{translate:900% 0}}
@keyframes mo-px{0%,100%{opacity:0;scale:.5}42%,58%{opacity:var(--o,.5);scale:1}}
@keyframes mo-tick{to{translate:-50% 0}}

/* ---------- 1. ENTRÉE DE PAGE ---------- */
html.mo #nav{animation:mo-drop .8s var(--mo-ease) backwards}   /* seulement la barre de l'accueil/devis : les pages intérieures ont un flou d'arrière-plan que Safari redessine mal pendant une animation */

/* logo : les quatre « pixels » arrivent de leur coin, puis l'ensemble se redresse au survol.
   (on n'anime que opacity/translate : surtout pas transform-origin, qui déplacerait le carré incliné du logo) */
html.mo .brand .mk rect{animation:mo-pixel .85s var(--mo-ease) backwards}
html.mo .brand .mk rect:nth-child(1){--tx:-26px;--ty:-26px;animation-delay:.05s}
html.mo .brand .mk rect:nth-child(2){--tx:-26px;--ty:26px;animation-delay:.14s}
html.mo .brand .mk rect:nth-child(3){--tx:26px;--ty:26px;animation-delay:.23s}
html.mo .brand .mk rect:nth-child(4){--tx:26px;--ty:-26px;animation-delay:.32s}
.brand .mk{transition:rotate .55s var(--mo-ease),scale .55s var(--mo-ease)}
@media(hover:hover){.brand:hover .mk{rotate:-8deg;scale:1.07}}

/* titre de l'accueil : mot après mot */
html.mo .mw{animation:mo-word .95s var(--mo-ease) backwards;animation-delay:calc(.12s + var(--w,0)*.075s)}
/* autres titres de page (hero) : un seul bloc */
html.mo #hero h1:not(.mw-split),html.mo .hero h1:not(.mw-split){animation:mo-rise .95s var(--mo-ease) .12s backwards}
html.mo .hero .bread{animation:mo-rise .8s var(--mo-ease) 0s backwards}
html.mo .hero .wrap>.eyebrow{animation:mo-rise .8s var(--mo-ease) .04s backwards}
html.mo .hero .wrap>p{animation:mo-rise .95s var(--mo-ease) .26s backwards}
html.mo .hero .hero-cta{animation:mo-rise .95s var(--mo-ease) .4s backwards}
/* hero de l'accueil et du devis */
html.mo #hero .hero-sub{animation:mo-rise .95s var(--mo-ease) .62s backwards}
html.mo #hero .hero-actions{animation:mo-rise .95s var(--mo-ease) .78s backwards}
html.mo #hero .hero-stats .stat{animation:mo-rise .95s var(--mo-ease) backwards;animation-delay:calc(.95s + var(--s,0)*.09s)}
html.mo #hero .hero-stats .stat:nth-child(2){--s:1}
html.mo #hero .hero-stats .stat:nth-child(3){--s:2}

/* ---------- 2. « BRILLER » : deux étincelles, rien d'autre ---------- */
.mw-star,.rot{position:relative}
html.mo .mw-star::after,html.mo .rot::after{
  content:"";position:absolute;pointer-events:none;
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
html.mo .mw-star::after{
  right:-.12em;top:-.18em;width:.3em;height:.3em;background:var(--mo-gold);
  scale:0;animation:mo-star 7.5s var(--mo-ease-io) 1.6s 4}
html.mo .rot::after{
  right:-.22em;top:-.04em;width:.25em;height:.25em;background:var(--mo-ivory);
  scale:1;rotate:0deg;
  transition:scale .6s var(--mo-ease) .12s,rotate .8s var(--mo-ease) .12s;
  animation:mo-pop .8s var(--mo-ease) 1.7s backwards}
html.mo .rot.swap::after{scale:0;rotate:-90deg;transition-delay:0s}

/* bouton principal du hero : un reflet de temps en temps (4 fois, puis il s'arrête) */
html.mo #hero .btn-primary,html.mo .hero .btn-primary{position:relative;overflow:hidden;isolation:isolate}
html.mo #hero .btn-primary::after,html.mo .hero .btn-primary::after{
  content:"";position:absolute;z-index:-1;top:-30%;bottom:-30%;left:0;width:20%;
  background:rgba(255,255,255,.3);transform:skewX(-20deg);pointer-events:none;
  translate:-200% 0;animation:mo-glint 6.5s var(--mo-ease-io) 2.8s 4}

/* ---------- 3. PIXELS DU HERO (clin d'œil à PIXE : carrés qui s'allument et s'éteignent) ---------- */
.mo-px{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}   /* derrière le texte, dans le bloc de texte du hero */
.mo-px i{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);
  border-radius:calc(var(--s)*.28);background:var(--c);opacity:0;
  animation:mo-px var(--t) ease-in-out var(--d) infinite}
.mo-px.mo-off i{animation-play-state:paused}
@media(max-width:820px){.mo-px i{left:var(--xm);top:var(--ym)}}

/* ---------- 4. BANDEAU QUI DÉFILE (accueil) ---------- */
/* par défaut (pas de motion, pas de JS, motion.css absent) : une seule copie, comme avant — la 2e copie porte l'attribut hidden, le 1er point est masqué en ligne */
html.mo .marquee{overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
html.mo .marquee-track{flex-wrap:nowrap;justify-content:flex-start;width:max-content;animation:mo-tick 46s linear infinite}
html.mo .marquee-track>span,html.mo .marquee-track>span+span{
  display:inline-flex;flex:none;flex-wrap:nowrap;justify-content:flex-start;white-space:nowrap;
  gap:0 34px;padding-right:34px}
html.mo .marquee-track>span:first-child>i:first-child{display:block!important}
html.mo .marquee:hover .marquee-track,html.mo .marquee-track.mo-off{animation-play-state:paused}

/* ---------- 5. APPARITION AU SCROLL (pages sans système .reveal) ---------- */
html.mo .mo-r:not(.mo-in){opacity:0}
html.mo .mo-r.mo-in{animation:mo-rise .85s var(--mo-ease) var(--mo-dl,0s) backwards}
/* accueil / devis : le système .reveal existe déjà, on y ajoute la cascade et le trait des petits titres */
.reveal.in{transition-delay:var(--rv-d,0s)}
html.mo .eyebrow.reveal::before{transform:scaleX(0);transform-origin:0 50%;transition:transform .9s var(--mo-ease) .25s}
html.mo .eyebrow.reveal.in::before{transform:none}

/* mur d'exemples : les six sites se posent l'un après l'autre */
html.mo .pxz #wall.mo-wait .tile{opacity:0;translate:0 44px;scale:.96}
html.mo .pxz #wall.mo-wait.mo-in .tile{opacity:1;translate:0 0;scale:1;
  transition:opacity 1s var(--mo-ease),translate 1s var(--mo-ease),scale 1s var(--mo-ease);
  transition-delay:calc(var(--k,0)*110ms)}

/* FAQ : la réponse descend doucement */
html.mo .faq details[open]>*:not(summary){animation:mo-fall .45s var(--mo-ease) backwards}

/* ---------- 6. BARRE DE LECTURE ---------- */
.mo-prog{position:fixed;left:0;right:0;top:env(safe-area-inset-top,0);height:3px;z-index:1200;pointer-events:none;opacity:0;transition:opacity .3s}
.mo-prog.on{opacity:1}
.mo-prog i{display:block;height:100%;background:var(--mo-gold);transform:scaleX(0);transform-origin:0 50%;will-change:transform}

/* ---------- 7. RETOUR AU TOUCHER (iPhone) ---------- */
a,button,summary,label,.chip,.preset,.pcard{-webkit-tap-highlight-color:rgba(217,174,43,.16)}
@media(hover:none){
  .btn:active,.nav-cta:active,.pchoose:active,.chip:active,.preset:active,.card:active,.svc-card:active,
  .step:active,.pcard:active,.filters button:active,.villes a:active,.wlinks a:active{scale:.975}
}

/* ---------- impression / réduire les animations ---------- */
@media print{
  html .mo-r,html .mo-wait,html .mo-wait .tile{opacity:1!important;translate:none!important;scale:none!important;animation:none!important}
  .mo-prog,.mo-px{display:none!important}
}
@media(prefers-reduced-motion:reduce){
  .mo-prog,.mo-px{display:none!important}
  .marquee-track{animation:none!important}
}