@charset "UTF-8";
:root {
  font-size: 62.5%;
}

.backend a {
  pointer-events: none !important;
}

.mini-anime-01 {
  display: block;
  width: 100%;
  max-width: 50px;
  margin: clamp(16px, 14.7692307692px + 0.3846153846vw, 20px) auto;
  transform-origin: 50% 50%;
  animation: rotateAll 6s infinite ease-in-out;
}

/* important pour animation SVG fiable */
.moving-dot {
  transform-box: fill-box;
  animation: moveDot 6s infinite ease-in-out;
}

/* =========================
   MOVE DU POINT (VIEWBOX UNITS)
========================= */
@keyframes moveDot {
  0% {
    cx: 8.2;
    cy: 23.37;
  }
  20% {
    cx: 14.22;
    cy: 15.65;
  }
  40% {
    cx: 20.34;
    cy: 18.9;
  }
  60%, 100% {
    cx: 26.36;
    cy: 11.19;
  }
}
/* =========================
   ROTATION GLOBALE 180°
========================= */
@keyframes rotateAll {
  0%, 70% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}
/* =========================
   MINI ANIME 02 : carrés en rotation par à-coups (aiguille de montre)
========================= */
.mini-anime-02 {
  overflow: visible;
  display: block;
  width: 100%;
  max-width: 50px;
  margin: clamp(16px, 14.7692307692px + 0.3846153846vw, 20px) auto;
}

/* important pour rotation autour du centre de chaque carré */
.mini-anime-02 .square-red,
.mini-anime-02 .square-black {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

/* Chaque cran : rotation rapide qui se cale sur sa position, puis pause */
/* carré rouge : 1 tour horaire sur le cycle complet (6s), 8 crans */
.mini-anime-02 .square-red {
  animation: spinRedCW 12s infinite cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* carré noir : 1 tour antihoraire sur le cycle complet (6s), 12 crans */
.mini-anime-02 .square-black {
  animation: spinBlackCCW 12s infinite cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Rouge : à chaque cran, rotation de 45° (mouvement) puis maintien (pause) */
@keyframes spinRedCW {
  0% {
    transform: rotate(0deg);
  }
  5% {
    transform: rotate(45deg);
  }
  12.5% {
    transform: rotate(45deg);
  }
  17.5% {
    transform: rotate(90deg);
  }
  25% {
    transform: rotate(90deg);
  }
  30% {
    transform: rotate(135deg);
  }
  37.5% {
    transform: rotate(135deg);
  }
  42.5% {
    transform: rotate(180deg);
  }
  50% {
    transform: rotate(180deg);
  }
  55% {
    transform: rotate(225deg);
  }
  62.5% {
    transform: rotate(225deg);
  }
  67.5% {
    transform: rotate(270deg);
  }
  75% {
    transform: rotate(270deg);
  }
  80% {
    transform: rotate(315deg);
  }
  87.5% {
    transform: rotate(315deg);
  }
  92.5% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Noir : à chaque cran, rotation de -30° (mouvement) puis maintien (pause) */
@keyframes spinBlackCCW {
  0% {
    transform: rotate(0deg);
  }
  3.333% {
    transform: rotate(-30deg);
  }
  8.333% {
    transform: rotate(-30deg);
  }
  11.667% {
    transform: rotate(-60deg);
  }
  16.667% {
    transform: rotate(-60deg);
  }
  20% {
    transform: rotate(-90deg);
  }
  25% {
    transform: rotate(-90deg);
  }
  28.333% {
    transform: rotate(-120deg);
  }
  33.333% {
    transform: rotate(-120deg);
  }
  36.667% {
    transform: rotate(-150deg);
  }
  41.667% {
    transform: rotate(-150deg);
  }
  45% {
    transform: rotate(-180deg);
  }
  50% {
    transform: rotate(-180deg);
  }
  53.333% {
    transform: rotate(-210deg);
  }
  58.333% {
    transform: rotate(-210deg);
  }
  61.667% {
    transform: rotate(-240deg);
  }
  66.667% {
    transform: rotate(-240deg);
  }
  70% {
    transform: rotate(-270deg);
  }
  75% {
    transform: rotate(-270deg);
  }
  78.333% {
    transform: rotate(-300deg);
  }
  83.333% {
    transform: rotate(-300deg);
  }
  86.667% {
    transform: rotate(-330deg);
  }
  91.667% {
    transform: rotate(-330deg);
  }
  95% {
    transform: rotate(-360deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
/* =========================
   MINI ANIME 03 : transformation douce (triangle / cercle / point)
========================= */
.mini-anime-03 {
  overflow: visible;
  display: block;
  width: 100%;
  max-width: 50px;
  margin: clamp(16px, 14.7692307692px + 0.3846153846vw, 20px) auto;
}

.mini-anime-03 .tri-red,
.mini-anime-03 .circle-black,
.mini-anime-03 .center-dot {
  transform-box: fill-box;
}

/* Triangle : rotation lente et continue, la forme se transforme dans l'espace */
.mini-anime-03 .tri-red {
  transform-origin: 50% 66.8%; /* centre commun des formes (19.59 ; 23.47) */
  animation: triTransform 6s infinite ease-in-out;
}

/* Cercle noir : il se contracte puis se rouvre (transformation de la forme) */
.mini-anime-03 .circle-black {
  transform-origin: 50% 50%;
  animation: circleTransform 12s infinite ease-in-out;
}

/* Point central : pouls léger en contretemps du cercle */
.mini-anime-03 .center-dot {
  transform-origin: 50% 50%;
  animation: dotTransform 12s infinite ease-in-out;
}

@keyframes triTransform {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes circleTransform {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.7);
  }
}
@keyframes dotTransform {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.6);
  }
}