/* Couche de mouvement de la vitrine.
   Principe : l'état de base reste l'état final, lisible sans JavaScript ni animation.
   Les animations ne font qu'ajouter l'arrivée ; le réglage « réduire les animations » les retire. */

:root{--motion-ease:cubic-bezier(.2,.7,.3,1);--motion-ease-arrival:cubic-bezier(.2,.72,.25,1)}

/* Titres : un doublon décoratif arrive lettre par lettre au-dessus du vrai titre, puis s'efface. */
[data-arrival]{position:relative}
.arrival-echo{position:absolute;inset:0;pointer-events:none;user-select:none;color:var(--blue)}
.arrival-word{display:inline-block;white-space:nowrap}
.arrival-letter{display:inline-block;opacity:0;text-shadow:0 0 .16em rgb(48 71 223 / .5),0 0 .42em rgb(237 240 170 / .9)}
.arrival-echo-light{color:var(--white)}
.arrival-echo-light .arrival-letter{text-shadow:0 0 .18em rgb(255 255 255 / .7),0 0 .5em rgb(237 240 170 / .8)}
@keyframes arrival-letter{0%{opacity:0;transform:translate3d(0,.42em,0) scale(.97)}52%{opacity:.95;transform:translate3d(0,-.025em,0) scale(1.015)}100%{opacity:0;transform:none}}
@media(prefers-reduced-motion:no-preference){.is-arriving .arrival-letter{animation:arrival-letter .62s var(--motion-ease-arrival) var(--arrival-delay,0s) both}}
@media(prefers-reduced-motion:reduce){.arrival-echo{display:none}}

/* Cartes de projets : montée en perspective, puis un reflet traverse le visuel. */
.project{transform-origin:18% 100%}
.project:nth-child(even){transform-origin:82% 100%}
.project-visual{position:relative;overflow:hidden;isolation:isolate}
.project-visual::after{content:"";position:absolute;z-index:5;inset:-45% -70%;pointer-events:none;opacity:0;transform:translate3d(-68%,0,0) rotate(8deg);background:linear-gradient(108deg,transparent 43%,rgb(48 71 223 / .08) 47%,rgb(255 255 255 / .38) 50%,rgb(237 240 170 / .3) 53%,transparent 57%)}
@keyframes card-enter{0%{transform:perspective(900px) translate3d(0,1.65rem,0) rotateX(5deg) rotateZ(var(--card-tilt,0deg)) scale(.975)}62%{transform:perspective(900px) translate3d(0,-.12rem,0) rotateX(0) rotateZ(0) scale(1.004)}100%{transform:none}}
@keyframes card-sheen{0%,12%{opacity:0;transform:translate3d(-68%,0,0) rotate(8deg)}46%{opacity:1}100%{opacity:0;transform:translate3d(68%,0,0) rotate(8deg)}}
/* La propriété scale reste indépendante du transform de survol existant. */
@keyframes visual-recul{from{scale:1.08}to{scale:1}}
@keyframes rise-in{from{opacity:.25;translate:0 18px}to{opacity:1;translate:0 0}}
@media(min-width:768px){.project:nth-child(odd){--card-tilt:-.42deg}.project:nth-child(even){--card-tilt:.42deg}}

@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .project{animation:card-enter linear both;animation-timeline:view(block);animation-range:entry 0% cover 32%}
    .project-visual::after{animation:card-sheen linear both;animation-timeline:view(block);animation-range:entry 4% cover 42%}
    .project-image:not(.clio-visual) img{animation:visual-recul linear both;animation-timeline:view(block);animation-range:entry 0% cover 50%}
    [data-rise]{animation:rise-in linear both;animation-timeline:view();animation-range:entry 8% entry 46%}
  }
}
/* Navigateurs sans timeline de défilement : la même arrivée, déclenchée une fois par motion.js. */
@supports not (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .motion-fallback .project.is-inview{animation:card-enter .9s var(--motion-ease) both}
    .motion-fallback .project.is-inview .project-visual::after{animation:card-sheen 1.3s linear .15s both}
    .motion-fallback .project.is-inview .project-image:not(.clio-visual) img{animation:visual-recul 2.4s var(--motion-ease) both}
    .motion-fallback [data-rise].is-inview{animation:rise-in .7s var(--motion-ease) both}
  }
}

/* Lumière qui suit le pointeur et légère inclinaison des visuels (pointeur précis uniquement). */
.project-visual{--spot-x:50%;--spot-y:30%;--tilt-x:0deg;--tilt-y:0deg;transition:transform .5s var(--motion-ease),box-shadow .5s var(--motion-ease)}
.project-visual::before{content:"";position:absolute;z-index:4;inset:0;pointer-events:none;opacity:0;border-radius:inherit;background:radial-gradient(28rem 28rem at var(--spot-x) var(--spot-y),rgb(255 255 255 / .2),rgb(237 240 170 / .1) 35%,transparent 62%);transition:opacity .35s ease}
.project-visual.is-pointed{transform:perspective(1100px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));box-shadow:0 22px 50px -24px rgb(25 33 59 / .45)}
.project-visual.is-pointed::before{opacity:1}
.project-visual.is-pointed .project-state{transform:translate3d(0,-2px,0)}
.project-state{transition:transform .4s var(--motion-ease)}
.project-symbol{transition:background .2s,border-color .2s,transform .45s var(--motion-ease)}
.project:hover .project-symbol{transform:rotate(45deg);border-color:var(--blue)}

/* Carte Clio : trois écrans qui se relaient, avec un léger recul de l'image active. */
.clio-stage{position:relative;height:100%;border-radius:8px 8px 0 0;overflow:hidden;box-shadow:0 17px 55px rgb(37 24 46 / .18);background:#2b1f1b}
.clio-slide{margin:0;height:100%}
.clio-slide+.clio-slide{position:absolute;inset:0;opacity:0;visibility:hidden}
.clio-visual .clio-slide img{display:block;width:100%;height:100%;min-height:0;border-radius:0;box-shadow:none;object-fit:cover;object-position:center top}
.has-motion-js .clio-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .9s var(--motion-ease),visibility 0s linear .9s}
.has-motion-js .clio-slide.is-active{opacity:1;visibility:visible;transition:opacity .9s var(--motion-ease),visibility 0s}
@keyframes slide-recul{from{transform:scale(1.07)}to{transform:scale(1)}}
@media(prefers-reduced-motion:no-preference){.has-motion-js .clio-slide.is-active img{animation:slide-recul 6.5s var(--motion-ease) both;transform-origin:40% 0}}
.clio-tabs{display:none}
.has-motion-js .clio-tabs{display:flex;position:absolute;z-index:6;right:18px;bottom:16px;gap:6px;padding:5px;border-radius:999px;background:rgb(25 33 59 / .78);backdrop-filter:blur(8px)}
.clio-tabs button{position:relative;overflow:hidden;border:0;border-radius:999px;padding:7px 13px;background:transparent;color:#e8ebff;font:750 12px/1.3 Manrope,system-ui,sans-serif;cursor:pointer;transition:background .25s,color .25s}
.clio-tabs button:hover{background:rgb(255 255 255 / .12)}
.clio-tabs button[aria-pressed="true"]{background:var(--lime);color:var(--ink)}
.clio-tabs button:focus-visible{outline:2px solid var(--white);outline-offset:2px}
/* Barre de temps de l'écran affiché pendant le défilement automatique. */
.clio-tabs button::after{content:"";position:absolute;left:10px;right:10px;bottom:1px;height:2px;border-radius:2px;background:rgb(25 33 59 / .45);transform:scaleX(0);transform-origin:left}
@keyframes tab-timer{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:no-preference){.is-autoplaying .clio-tabs button[aria-pressed="true"]::after{animation:tab-timer var(--slide-duration,5.5s) linear both}.is-paused .clio-tabs button[aria-pressed="true"]::after{animation-play-state:paused}}
.project-visual .project-state{z-index:6}
.clio-links{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;margin-top:14px}

/* Offre Activité : un halo respire autour du rappel du projet Clio. */
.plan-topline>span{position:relative}
.plan-topline>span::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 12px 4px rgb(237 240 170 / .55);opacity:0;pointer-events:none}
@keyframes halo{0%,100%{opacity:0}50%{opacity:1}}
@media(prefers-reduced-motion:no-preference){.plan-business .plan-topline>span::after{animation:halo 2.4s ease-in-out infinite}}

@media(max-width:840px){.has-motion-js .clio-tabs{right:12px;bottom:12px}.clio-tabs button{padding:6px 10px}}
@media(max-width:840px){.clio-visual .clio-slide img{object-position:left top}}
@media(max-width:600px){.has-motion-js .clio-tabs{left:12px;right:12px;justify-content:space-between}.clio-tabs button{flex:1;padding:6px 4px;font-size:11px}}
@media(hover:none),(pointer:coarse){.project-visual::before{display:none}}

/* Carte M.C Muaythaï 2 : site réel en ligne, capture ordinateur et téléphone qui monte à l'arrivée.
   Mise en page miroir de Chez Pierre (visuel à droite) pour alterner les deux cartes larges. */
.project-muay{grid-column:1/-1;display:grid;grid-template-columns:1fr 1.1fr;column-gap:40px;align-items:center}
.project-muay>*{grid-column:1}
.project-muay .muay-visual{grid-column:2;grid-row:1/6}
.project-muay .project-caption{margin:0;align-self:end}
.project-muay .project-description,.project-muay .clio-links,.project-muay .project-details{align-self:start}
.muay-visual{aspect-ratio:1.46;border-radius:var(--radius);background:radial-gradient(120% 90% at 85% 100%,#5c0d17 0,#1a0c0e 55%,#0d0a0b 100%);padding:30px 0 0 30px}
.muay-desktop{display:block;width:100%;height:100%;object-fit:cover;object-position:left top;border-radius:8px 0 0 0;box-shadow:0 18px 50px rgb(0 0 0 / .45)}
.muay-phone{position:absolute;z-index:3;right:7%;bottom:-14%;width:23%;aspect-ratio:320/693;border:5px solid #241f20;border-radius:22px;overflow:hidden;background:#0d0a0b;box-shadow:0 22px 45px rgb(0 0 0 / .55),0 0 0 1px rgb(255 255 255 / .08);transition:transform .5s var(--motion-ease)}
.muay-phone img{display:block;width:100%;height:auto}
.project-visual.is-pointed .muay-phone{transform:translate3d(0,-8px,0) rotate(-1.5deg)}
@keyframes phone-rise{from{translate:0 32%;rotate:5deg}to{translate:0 0;rotate:0deg}}
@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .muay-desktop{animation:visual-recul linear both;animation-timeline:view(block);animation-range:entry 0% cover 50%;transform-origin:0 0}
    .muay-phone{animation:phone-rise linear both;animation-timeline:view(block);animation-range:entry 20% cover 48%}
  }
}
@supports not (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .motion-fallback .project.is-inview .muay-desktop{animation:visual-recul 2.4s var(--motion-ease) both;transform-origin:0 0}
    .motion-fallback .project.is-inview .muay-phone{animation:phone-rise 1.1s var(--motion-ease) .25s both}
  }
}
@media(max-width:840px){.project-muay{column-gap:26px}.muay-visual{padding:20px 0 0 20px}.muay-phone{border-width:4px;border-radius:16px}}
@media(max-width:600px){.project-muay{display:block}.project-muay .project-caption{margin-top:18px}.muay-visual{aspect-ratio:1.3;padding:18px 0 0 18px}.muay-phone{width:27%;right:6%;border-radius:14px}}