/* ==========================================================================
   Oyé Oyé — Loaders boussole
   Toutes les animations et vitesses, en classes réutilisables.
   --------------------------------------------------------------------------
   Usage : coller le markup SVG (voir loader.html ou le bloc en bas de ce
   fichier), puis appliquer une classe de mouvement + une classe de vitesse.

     <svg class="oye-loader oye--continu oye--standard" ...>

   La vitesse peut aussi être libre, via la variable --oye-sp :

     <svg class="oye-loader oye--continu" style="--oye-sp:1.1s" ...>
   ========================================================================== */

/* --- base ---------------------------------------------------------------- */
.oye-loader{display:block}
.oye-loader .oye-nd,
.oye-loader .oye-ring{transform-box:fill-box;transform-origin:center}

/* --- vitesses ------------------------------------------------------------ */
.oye--rapide   {--oye-sp:1s}
.oye--standard {--oye-sp:1.6s}
.oye--lent     {--oye-sp:2.6s}

/* vitesses recommandées par mouvement (surchargent les génériques) */
.oye--continu.oye--rapide{--oye-sp:.8s}
.oye--continu.oye--standard{--oye-sp:1.4s}
.oye--continu.oye--lent{--oye-sp:2.4s}

.oye--recherche.oye--rapide{--oye-sp:1.2s}
.oye--recherche.oye--standard{--oye-sp:1.9s}
.oye--recherche.oye--lent{--oye-sp:3s}

.oye--balancier.oye--rapide{--oye-sp:1.2s}
.oye--balancier.oye--standard{--oye-sp:2s}
.oye--balancier.oye--lent{--oye-sp:3.2s}

.oye--saccade.oye--rapide{--oye-sp:1s}
.oye--saccade.oye--standard{--oye-sp:1.6s}
.oye--saccade.oye--lent{--oye-sp:2.6s}

.oye--contre.oye--rapide{--oye-sp:1s}
.oye--contre.oye--standard{--oye-sp:1.5s}
.oye--contre.oye--lent{--oye-sp:2.6s}

.oye--pulse.oye--rapide{--oye-sp:1s}
.oye--pulse.oye--standard{--oye-sp:1.5s}
.oye--pulse.oye--lent{--oye-sp:2.6s}

.oye--elastique.oye--rapide{--oye-sp:1.4s}
.oye--elastique.oye--standard{--oye-sp:2.2s}
.oye--elastique.oye--lent{--oye-sp:3.2s}

.oye--deux-temps.oye--rapide{--oye-sp:1.6s}
.oye--deux-temps.oye--standard{--oye-sp:2.4s}
.oye--deux-temps.oye--lent{--oye-sp:3.4s}

/* --- 1 · rotation continue ----------------------------------------------- */
.oye--continu .oye-nd{animation:oye-spin var(--oye-sp,1.4s) linear infinite}

/* --- 2 · recherche du nord ----------------------------------------------- */
.oye--recherche .oye-nd{animation:oye-seek var(--oye-sp,1.9s) cubic-bezier(.5,0,.3,1) infinite}

/* --- 3 · balancier -------------------------------------------------------- */
.oye--balancier .oye-nd{animation:oye-sway var(--oye-sp,2s) ease-in-out infinite}

/* --- 4 · saccadé (8 crans) ------------------------------------------------ */
.oye--saccade .oye-nd{animation:oye-spin var(--oye-sp,1.6s) steps(8,end) infinite}

/* --- 5 · contre-rotation -------------------------------------------------- */
.oye--contre .oye-nd{animation:oye-spin var(--oye-sp,1.5s) linear infinite}
.oye--contre .oye-ring{animation:oye-spinrev var(--oye-sp,1.5s) linear infinite}

/* --- 6 · pulsé ------------------------------------------------------------ */
.oye--pulse .oye-nd{animation:oye-spin var(--oye-sp,1.5s) linear infinite}
.oye--pulse .oye-ring{animation:oye-pulse var(--oye-sp,1.5s) ease-in-out infinite}

/* --- 7 · élastique -------------------------------------------------------- */
.oye--elastique .oye-nd{animation:oye-elastic var(--oye-sp,2.2s) cubic-bezier(.35,1.6,.4,1) infinite}

/* --- 8 · deux temps ------------------------------------------------------- */
.oye--deux-temps .oye-nd{animation:oye-two var(--oye-sp,2.4s) cubic-bezier(.6,0,.3,1) infinite}

/* --- keyframes ------------------------------------------------------------ */
@keyframes oye-spin{to{transform:rotate(360deg)}}
@keyframes oye-spinrev{to{transform:rotate(-360deg)}}
@keyframes oye-seek{
  0%{transform:rotate(0)}
  68%{transform:rotate(372deg)}
  82%{transform:rotate(353deg)}
  100%{transform:rotate(360deg)}
}
@keyframes oye-sway{
  0%,100%{transform:rotate(-38deg)}
  50%{transform:rotate(38deg)}
}
@keyframes oye-pulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(.9);opacity:.55}
}
@keyframes oye-elastic{
  0%{transform:rotate(0)}
  45%{transform:rotate(180deg)}
  90%,100%{transform:rotate(360deg)}
}
@keyframes oye-two{
  0%{transform:rotate(0)}
  35%{transform:rotate(180deg)}
  50%{transform:rotate(180deg)}
  85%,100%{transform:rotate(360deg)}
}

/* --- accessibilité -------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .oye-loader .oye-nd,
  .oye-loader .oye-ring{animation:none !important}
}

/* ==========================================================================
   MARKUP À COPIER
   --------------------------------------------------------------------------
<svg class="oye-loader oye--continu oye--standard" viewBox="0 0 200 200"
     width="40" height="40" role="img" aria-label="Chargement">
  <g class="oye-ring" fill="none" stroke="#0097A7" stroke-width="5" stroke-linecap="round">
    <path d="M114.6 17.3 A84 84 0 0 1 182.7 85.4"/>
    <path d="M182.7 114.6 A84 84 0 0 1 114.6 182.7"/>
    <path d="M85.4 182.7 A84 84 0 0 1 17.3 114.6"/>
    <path d="M17.3 85.4 A84 84 0 0 1 85.4 17.3"/>
  </g>
  <g class="oye-nd">
    <path d="M100 28 L88 100 L112 100 Z" fill="#0097A7"/>
    <path d="M100 172 L88 100 L112 100 Z" fill="#2D3436"/>
  </g>
  <circle cx="100" cy="100" r="6" fill="#F8F9FA" stroke="#2D3436" stroke-width="2"/>
</svg>

   Version blanche (fond teal ou anthracite) : remplacer #0097A7 par #ffffff
   dans le stroke et la pointe nord, #2D3436 par #ffffff fill-opacity=".5"
   pour la pointe sud, et le noyau par fill="#0097A7" stroke="#ffffff".
   ========================================================================== */