/* =============================================================
   CSS/BOUTON-ANIM.CSS - Mimba-Educ : le bouton « Voir l'animation » des cours attire l'attention, en douceur
   version 1.0 - 2026-10-29
   Réglé dans les Propriétés (Outils, animations, maths > Le bouton « Voir l'animation »), appliqué par cours.php.
   Classes sur le bouton :
     ba-lueur   une lueur respire autour du contour
     ba-reflet  un reflet de lumière passe sur le bouton de temps en temps
     ba-play    un petit triangle « lecture » avance et revient
     ba-onde    un anneau fin sort du contour et s'efface
     ba-rebond  un seul petit rebond (avec une lueur) quand le bouton arrive à l'écran (classe ba-vu posée par cours.php)
     ba-stop    plus aucun effet (après le premier clic)
   Variables : --ba-c (couleur de l'effet), --ba-v (vitesse : 1,5 lent, 1 normal, 0,65 rapide).
   ============================================================= */
.ba{--ba-c:var(--n1,#f97316);--ba-v:1;position:relative;overflow:hidden;isolation:isolate}
.ba.ba-play{display:inline-flex;align-items:center;gap:7px}

/* 1. lueur qui respire */
.ba-lueur{animation:baLueur calc(3s * var(--ba-v)) ease-in-out infinite}
@keyframes baLueur{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 14px 1px color-mix(in srgb,var(--ba-c) 45%,transparent)}}

/* 2. reflet qui passe (une fois toutes les 6 s environ) */
.ba-reflet::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-40%;width:30%;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent,color-mix(in srgb,var(--ba-c) 28%,transparent) 45%,rgba(255,255,255,.75) 50%,color-mix(in srgb,var(--ba-c) 28%,transparent) 55%,transparent);
  transform:skewX(-18deg);animation:baReflet calc(6s * var(--ba-v)) ease-in-out infinite}
@keyframes baReflet{0%{left:-40%}18%{left:120%}100%{left:120%}}

/* 3. petit triangle « lecture » */
.ba-play::before{content:"";flex:none;width:0;height:0;border-left:8px solid var(--ba-c);border-top:5px solid transparent;border-bottom:5px solid transparent;
  animation:baPlay calc(2.4s * var(--ba-v)) ease-in-out infinite}
@keyframes baPlay{0%,60%,100%{transform:translateX(0)}75%{transform:translateX(4px)}88%{transform:translateX(-1px)}}

/* 4. onde qui part du contour (une fois toutes les 4 s) */
.ba-onde{outline:2px solid transparent;outline-offset:0;animation:baOnde calc(4s * var(--ba-v)) ease-out infinite}
@keyframes baOnde{0%{outline-color:color-mix(in srgb,var(--ba-c) 70%,transparent);outline-offset:0}35%{outline-color:transparent;outline-offset:9px}100%{outline-color:transparent;outline-offset:9px}}

/* 5. un seul rebond à l'arrivée à l'écran */
.ba-rebond.ba-vu{animation:baRebond .9s cubic-bezier(.3,1.6,.5,1) 1}
.ba-rebond.ba-vu.ba-lueur,.ba-rebond.ba-vu.ba-onde{animation:baRebond .9s cubic-bezier(.3,1.6,.5,1) 1,var(--ba-suite)}
.ba-lueur{--ba-suite:baLueur calc(3s * var(--ba-v)) ease-in-out .9s infinite}
.ba-onde{--ba-suite:baOnde calc(4s * var(--ba-v)) ease-out .9s infinite}
/* lueur et onde ensemble (l'une sur l'ombre, l'autre sur le contour) */
.ba-lueur.ba-onde{animation:baLueur calc(3s * var(--ba-v)) ease-in-out infinite,baOnde calc(4s * var(--ba-v)) ease-out infinite}
.ba-rebond.ba-vu.ba-lueur.ba-onde{animation:baRebond .9s cubic-bezier(.3,1.6,.5,1) 1,baLueur calc(3s * var(--ba-v)) ease-in-out .9s infinite,baOnde calc(4s * var(--ba-v)) ease-out .9s infinite}
@keyframes baRebond{0%{transform:scale(1);box-shadow:0 0 0 0 transparent}35%{transform:scale(1.08);box-shadow:0 0 16px 2px color-mix(in srgb,var(--ba-c) 50%,transparent)}65%{transform:scale(.97)}100%{transform:scale(1);box-shadow:0 0 0 0 transparent}}

/* plus d'effet : après le premier clic, ou si l'élève a demandé moins de mouvement */
.ba.ba-stop,.ba.ba-stop::before,.ba.ba-stop::after{animation:none!important}
.ba.ba-stop::after{display:none}
@media (prefers-reduced-motion:reduce){.ba,.ba::before,.ba::after{animation:none!important}.ba::after{display:none}}
@media print{.ba::before,.ba::after{display:none}}