/* ✦ CapsurIA motion, trousse partagée v2 (accueil, guides, balados, affiches)
   Animations : 04 signature, 06 apparition, 08 compteur, 12 cartes, 13 bouton, 19 rose, 20 lettre, 21 bouée
   Tout s'éteint si la personne a demandé moins de mouvement sur son appareil. */

/* ---------- 06 Apparition douce ---------- */
.cm-wait{opacity:0;}
.cm-in{animation:cmRise .8s cubic-bezier(.2,.7,.2,1) var(--cm-d,0s) backwards;}
@keyframes cmRise{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}

/* ---------- 04 Signature qui s'écrit ---------- */
.cm-wait.cm-sign{opacity:1;clip-path:inset(0 100% 0 0);}
.cm-in.cm-sign{animation:cmWrite 2.4s steps(36,end) var(--cm-d,0s) backwards;}
@keyframes cmWrite{from{clip-path:inset(0 100% 0 0);}to{clip-path:inset(0 0 0 0);}}
.cap-fs,.ax-sign{display:inline-block;}

/* ---------- 08 Compteur qui monte ---------- */
.ax-n{font-variant-numeric:tabular-nums;}

/* ---------- 12 Cartes qui se soulèvent ---------- */
.ax-stats a,.ax-feat,.ax-nv,.gx-port,.gx-livre{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .2s,background .2s;}
.ax-stats a:hover,.ax-nv:hover,.gx-port:hover{transform:translateY(-4px);box-shadow:0 14px 26px -14px rgba(44,74,90,.45);}
.ax-feat:hover,.gx-livre:hover{transform:translateY(-6px) rotate(-.4deg);}
.gx-media img{transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s;}
.gx-esc:hover .gx-media img{transform:translateY(-7px) rotate(-.8deg);box-shadow:0 18px 26px -14px rgba(0,0,0,.55);}
.ax-plus-c:hover{transform:translateY(-4px);}

/* ---------- 13 Bouton d'appel vivant ---------- */
.pv-intro .pv-start,.ax-sub{position:relative;overflow:hidden;isolation:isolate;}
.pv-intro .pv-start svg,.ax-sub svg{transition:transform .45s cubic-bezier(.3,1.5,.5,1);}
.pv-intro .pv-start:hover svg,.ax-sub:hover svg{transform:translateX(5px);}
.pv-intro .pv-start::after,.ax-sub::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,transparent 30%,rgba(245,240,232,.28) 50%,transparent 70%);transform:translateX(-110%);pointer-events:none;}
.pv-intro .pv-start:hover::after,.ax-sub:hover::after,.pv-start.cm-shine::after{animation:cmSheen .9s ease;}
@keyframes cmSheen{to{transform:translateX(110%);}}

/* ---------- 19 Rose des vents ---------- */
.pv-rose{opacity:.13;animation:cmSpin 90s linear infinite;transform-origin:50% 50%;}
@keyframes cmSpin{to{transform:rotate(360deg);}}

/* ---------- 20 Lettre qui se scelle ---------- */
.cm-env{position:relative;width:96px;height:62px;margin:0 0 16px;background:#D4B8A8;border-radius:5px;perspective:400px;}
.cm-env span{position:absolute;display:block;}
.cm-env .cm-letter{left:9px;right:9px;bottom:7px;height:46px;background:#F5F0E8;border-radius:3px;z-index:1;
  background-image:linear-gradient(#8FA8B5,#8FA8B5),linear-gradient(#D4B8A8,#D4B8A8),linear-gradient(#D4B8A8,#D4B8A8);
  background-size:55% 3px,70% 2px,45% 2px;background-position:8px 8px,8px 16px,8px 22px;background-repeat:no-repeat;}
.cm-env .cm-front{inset:0;background:#C9A872;border-radius:5px;clip-path:polygon(0 0,50% 58%,100% 0,100% 100%,0 100%);z-index:2;}
.cm-env .cm-flap{top:0;left:0;right:0;height:62%;background:#D4B8A8;filter:brightness(.9);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;z-index:3;}
.cm-env .cm-seal{left:50%;top:58%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:#B8902D;color:#F5F0E8;font-size:11px;line-height:22px;text-align:center;z-index:4;}
.cm-env.cm-play .cm-letter{animation:cmSlide 1s .2s cubic-bezier(.4,0,.2,1) backwards;}
.cm-env.cm-play .cm-flap{animation:cmFlap .6s 1.25s ease-in backwards;}
.cm-env.cm-play .cm-seal{animation:cmPop .45s 1.85s cubic-bezier(.3,1.6,.5,1) backwards;}
@keyframes cmSlide{from{transform:translateY(-58px);}to{transform:none;}}
@keyframes cmFlap{from{transform:rotateX(180deg);}to{transform:rotateX(0);}}
@keyframes cmPop{from{opacity:0;transform:scale(.3);}to{opacity:1;transform:none;}}

/* ---------- 21 Bouée remonter ---------- */
button#cap-haut{border:2px solid #B8902D;}
#cap-haut::before,#cap-haut::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid #8FA8B5;opacity:0;pointer-events:none;}
#cap-haut.cap-visible::before{animation:cmRipple 2.8s ease-out infinite;}
#cap-haut.cap-visible::after{animation:cmRipple 2.8s 1.4s ease-out infinite;}
#cap-haut.cap-visible svg{animation:cmBob 2.8s ease-in-out infinite;}
@keyframes cmRipple{0%{transform:scale(1);opacity:.7;}100%{transform:scale(1.9);opacity:0;}}
@keyframes cmBob{0%,100%{transform:translateY(1px) rotate(-5deg);}50%{transform:translateY(-3px) rotate(5deg);}}

/* ========== v2 : guides.html, balados.html, affiches.html ========== */

/* Cartes : ajouts */
.gx-nouv{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .2s;}
.gx-nouv:hover{transform:translateY(-4px);}

/* ✦ qui glisse sur les lignes de guides */
.gx-row .gx-main{position:relative;}
.gx-row .gx-t{transition:transform .35s cubic-bezier(.2,.8,.2,1);}
.gx-row .gx-main::before{content:"✦";position:absolute;left:-2px;top:3px;font-size:12px;line-height:1;color:#B8902D;opacity:0;transform:translateX(-8px) scale(.6);transition:opacity .3s,transform .35s cubic-bezier(.3,1.5,.5,1);pointer-events:none;}
.gx-row:hover .gx-t,.gx-row:focus-visible .gx-t{transform:translateX(16px);}
.gx-row:hover .gx-main::before,.gx-row:focus-visible .gx-main::before{opacity:1;transform:none;}
.gx-row > svg{transition:transform .35s cubic-bezier(.3,1.5,.5,1);}
.gx-row:hover > svg{transform:translateX(4px);}

/* Filtres en douceur : ce qui réapparaît glisse en place */
.cm-pop{animation:cmPopIn .45s cubic-bezier(.2,.7,.2,1) var(--cm-d,0s) backwards;}
@keyframes cmPopIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.cm-tick{animation:cmTick .5s ease;}
@keyframes cmTick{0%{color:#B8902D;transform:scale(1.08);}100%{transform:none;}}
#gx-count,#aff-q-count{display:inline-block;transform-origin:left center;}

/* Balados : onde sonore sous le hero */
.cm-sound{position:relative;max-width:1080px;height:70px;margin:6px auto 0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);}
.cm-sound svg{position:absolute;top:0;left:0;width:200%;height:100%;}
.cm-sound .cm-s1{animation:cmDrift 18s linear infinite;}
.cm-sound .cm-s2{animation:cmDrift 11s linear infinite reverse;}
@keyframes cmDrift{to{transform:translateX(-50%);}}

/* Balados : bouton play qui respire */
.ep-play{position:relative;}
.ep-play::before,.ep-play::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #F5F0E8;opacity:0;pointer-events:none;animation:cmRipple2 3.4s ease-out infinite;}
.ep-play::after{animation-delay:1.7s;}
@keyframes cmRipple2{0%{transform:scale(1);opacity:.6;}100%{transform:scale(1.9);opacity:0;}}

/* Balados : petit égaliseur */
.cm-eq{display:inline-flex;align-items:flex-end;gap:2px;height:11px;margin-left:8px;vertical-align:-1px;}
.cm-eq i{display:block;width:3px;height:100%;background:#B8902D;border-radius:1px;transform-origin:bottom;transform:scaleY(.35);}
.cm-eq i:nth-child(2){transform:scaleY(.7);}
.cm-eq i:nth-child(3){transform:scaleY(.5);}
.ep:hover .cm-eq i,.ep.cm-now .cm-eq i{animation:cmEq .9s ease-in-out infinite alternate;}
.ep:hover .cm-eq i:nth-child(2),.ep.cm-now .cm-eq i:nth-child(2){animation-duration:.65s;animation-delay:-.2s;}
.ep:hover .cm-eq i:nth-child(3),.ep.cm-now .cm-eq i:nth-child(3){animation-duration:1.1s;animation-delay:-.5s;}
@keyframes cmEq{from{transform:scaleY(.2);}to{transform:scaleY(1);}}
.ep.cm-now{box-shadow:0 0 0 2px #B8902D,0 10px 28px rgba(44,74,90,.16);}

/* Balados : la vidéo arrive en fondu */
.ep-ratio iframe{animation:cmFade .7s ease both;}
@keyframes cmFade{from{opacity:0;}to{opacity:1;}}

/* Affiches : « Copié! » qui pétille */
.copy-btn{position:relative;}
.copy-btn.done{animation:cmBounce .45s cubic-bezier(.3,1.6,.5,1);}
.copy-btn.done::after{content:"✦";position:absolute;right:-6px;top:-6px;font-size:13px;color:#B8902D;pointer-events:none;animation:cmBurst .9s ease-out both;}
@keyframes cmBounce{0%{transform:scale(.9);}100%{transform:none;}}
@keyframes cmBurst{0%{opacity:0;transform:scale(.4) rotate(0);}30%{opacity:1;transform:scale(1.2) rotate(40deg);}100%{opacity:0;transform:translateY(-10px) scale(.8) rotate(90deg);}}

/* Affiches : la pastille du sommaire glisse d'une famille à l'autre */
.aff-somm{position:relative;scroll-behavior:smooth;}
.aff-somm.cm-has-pill a.on,.aff-somm.cm-has-pill a.on:hover{background:transparent;position:relative;z-index:1;}
.aff-somm a{position:relative;z-index:1;}
.cm-pill{position:absolute;left:0;top:0;width:0;height:0;border-radius:100px;background:#2C4A5A;opacity:0;z-index:0;pointer-events:none;
  transition:left .45s cubic-bezier(.3,.9,.3,1),top .45s cubic-bezier(.3,.9,.3,1),width .45s cubic-bezier(.3,.9,.3,1),height .3s,opacity .3s;}

/* Affiches : le zoom s'ouvre en douceur */
#aff-zoom.on{animation:cmFade .3s ease;}
#aff-zoom.on img{animation:cmZoom .45s cubic-bezier(.2,.8,.2,1);}
@keyframes cmZoom{from{opacity:0;transform:scale(.92);}to{opacity:1;transform:none;}}

/* ---------- Moins de mouvement ---------- */
@media (prefers-reduced-motion:reduce){
  .cm-wait,.cm-wait.cm-sign{opacity:1;clip-path:none;}
  .cm-in,.cm-in.cm-sign,.pv-rose,.cm-env *,#cap-haut::before,#cap-haut::after,#cap-haut svg,.pv-start::after,.ax-sub::after{animation:none !important;}
  .ax-stats a,.ax-feat,.ax-nv,.gx-port,.gx-livre,.gx-media img,.ax-plus-c,.pv-start svg{transition:none !important;transform:none !important;}
  .cm-pop,.cm-tick,.cm-sound svg,.ep-play::before,.ep-play::after,.cm-eq i,.ep-ratio iframe,.copy-btn.done,.copy-btn.done::after,#aff-zoom.on,#aff-zoom.on img{animation:none !important;}
  .gx-nouv,.gx-row .gx-t,.gx-row .gx-main::before,.gx-row > svg,.cm-pill{transition:none !important;}
  .gx-row:hover .gx-t,.gx-nouv:hover{transform:none !important;}
  .copy-btn.done::after{display:none;}
}