/* ============================================================
   SPINNER IA — feuille du module (js/spinner-ia.js), v1.0 du 06/10/2026
   Référence : /Users/ludolx6/Documents/sites/spinner-ia/README.md
   À charger EN TÊTE de page, avant le script.
   ============================================================ */
#spinner-ia{ display: none; }
#spinner-ia.sia-on,
#spinner-ia.sia-sortie{
  display: block;
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  z-index: 2147483000;             /* au-dessus de tout : popins, TinyMCE, bandeaux */
  margin: 0; padding: 0;
}
#spinner-ia.sia-sortie{ pointer-events: none; }
#spinner-ia .sia-voile{
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  background: transparent;          /* voile et flou pilotés en continu par le script */
}
/* la carte : centrée à l'écran, ombre INTERNE discrète (pas d'ombre portée) */
#spinner-ia .sia-carte{
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 30px 18px;
  border-radius: 14px;
  background: #fff;
  box-shadow: inset 0 2px 8px rgba(31,60,74,.16), inset 0 0 0 1px rgba(31,60,74,.10);
  box-sizing: border-box;
  max-width: calc(100vw - 32px);
}
/* disparition NETTE : la carte part d'un coup, seul le flou s'efface */
#spinner-ia.sia-sortie .sia-carte{ display: none; }

/* ---------- la grille 15 × 5 ---------- */
.sia-grille{
  display: grid;
  grid-template-columns: repeat(15, var(--sia-c, 13px));
  gap: var(--sia-g, 3px);
  justify-content: center;
}
.sia-grille i{
  display: block;
  width: var(--sia-c, 13px);
  height: var(--sia-c, 13px);
  border-radius: 2px;
  background: var(--c, #dfe8ec);
  opacity: .25;
  animation: siaCase var(--v, 1.5s) ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
.sia-grille i.sia-flash{ animation: siaFlash .28s cubic-bezier(.2,.9,.3,1.3) 1, siaCase var(--v, 1.5s) ease-in-out .28s infinite; }
@keyframes siaCase{ 0%, 100%{ opacity: .22; transform: scale(.84); } 45%{ opacity: 1; transform: scale(1); } }
/* carré qui prend (ou porte déjà) la couleur de la destination : un ÉCLAT de scintillement,
   sans changement de taille (choix de Ludovic, 06/10/2026) — il s'allume d'un coup, plus vif,
   puis reprend son scintillement normal */
@keyframes siaFlash{ 0%{ opacity: .3; filter: none; } 30%{ opacity: 1; filter: brightness(1.35) saturate(1.2); } 100%{ opacity: .8; filter: none; } }

/* ---------- le message : de la largeur exacte de la grille, jamais plus ---------- */
#spinner-ia .sia-msg{
  width: calc(15 * 13px + 14 * 3px);
  margin-top: 12px;
  min-height: 18px;
  overflow: hidden;
  text-align: center;
  font: 700 11.5px/18px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
#spinner-ia .sia-msg span{
  display: inline-block;
  max-width: 100%;
  background: linear-gradient(90deg, #93a5ad 0%, #93a5ad 32%, var(--acc, #209fb5) 50%, #93a5ad 68%, #93a5ad 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: siaLib 2.2s linear infinite;
  transition: opacity .16s;
}
/* sous-titre facultatif : même largeur que la grille, discret, peut passer sur 2 lignes */
#spinner-ia .sia-ss{
  width: calc(15 * 13px + 14 * 3px);
  margin-top: 4px;
  text-align: center;
  font: 400 11px/14px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #7d8f98;
  font-style: italic;
}
@keyframes siaLib{ from{ background-position: 100% 0; } to{ background-position: 0 0; } }

/* ---------- petits chargeurs dans un bloc (même grille, plus petite) ---------- */
.av2-loader .sia-grille{ --sia-c: var(--av2-ld-c, 13px); --sia-g: var(--av2-ld-g, 3px); }
.av2-loader.ligne .sia-grille,
.av2-loader.mini .sia-grille{ --sia-c: 6px; --sia-g: 2px; }
/* remplaçant d'un ancien GIF : chargeur EN LIGNE, masquable par le code de la page
   (pas de display !important, pas de panneau fixe : le Spinner couvre déjà la page) */
.sia .av2-loader.sia-gif{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  position: static !important;
  float: none !important;
  transform: none !important;
  margin: 14px auto !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  padding: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
.sia .av2-loader.sia-gif .sia-grille{ --sia-c: 7px; --sia-g: 2px; }

@media (prefers-reduced-motion: reduce){
  .sia-grille i, .sia-grille i.sia-flash{ animation: none; opacity: .85; transform: none; }
  #spinner-ia .sia-msg span{ animation: none; }
}
@media print{ #spinner-ia{ display: none !important; } }