/* ============================================================
   LOADER V2 — composant de chargement du site et de l'admin
   100% CSS (aucune image, aucune lib). Remplace charg-min.gif & co.
   Deux visuels, une seule API :
     - MATRICE : grille 9x5 de cellules qui s'allument au hasard
                 (voile plein écran, popins, gros chargements)
     - ONDE    : signal qui pulse (taille .mini, chargements inline)
   4 cellules "signature" portent les couleurs des sections du site :
     rouge agenda, vert actus, bleu pages, orange newsletter.
   Markup : av2LoaderHtml() (js/loader-v2.js) ou av2Loader() (ajax/admin/loader.php)
   Tailles  : .mini (onde) / défaut / .xl
   Couleurs : .c-actu (vert) / .c-event (rouge) / .c-page (bleu) / .c-nl (orange)
   ============================================================ */
.av2-loader{
  --av2-ld-n: 9;                    /* colonnes de la matrice */
  --av2-ld-c: 13px;                 /* côté d'une cellule — même taille partout :
                                       voile, popins, blocs de contenu */
  --av2-ld-g: 3px;                  /* espace entre cellules */
  --av2-ld-v: 1.5s;                 /* durée de base d'un cycle */
  --av2-ld-1: #209fb5;              /* ton soutenu */
  --av2-ld-2: #5ed6e8;              /* ton moyen */
  --av2-ld-clair: #8fdfef;          /* ton clair */
  --av2-ld-off: #dfe8ec;            /* cellule éteinte */
  --av2-ld-ombre: rgba(32,159,181,.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  user-select: none;
}
.av2-loader.c-actu { --av2-ld-1:#6fa008; --av2-ld-2:#a8dc38; --av2-ld-clair:#bde572; --av2-ld-ombre:rgba(143,201,11,.5); }
.av2-loader.c-event{ --av2-ld-1:#a81213; --av2-ld-2:#d94a4c; --av2-ld-clair:#e88a8b; --av2-ld-ombre:rgba(168,18,19,.45); }
.av2-loader.c-page { --av2-ld-1:#187d8e; --av2-ld-2:#5ed6e8; --av2-ld-clair:#8fdfef; --av2-ld-ombre:rgba(32,159,181,.5); }
.av2-loader.c-nl   { --av2-ld-1:#e67e22; --av2-ld-2:#f0a35a; --av2-ld-clair:#f5bc80; --av2-ld-ombre:rgba(230,126,34,.5); }

/* ---------- visuel MATRICE ---------- */
.av2-ld-mat{
  display: grid;
  grid-template-columns: repeat(var(--av2-ld-n, 9), var(--av2-ld-c));
  gap: var(--av2-ld-g);
}
.av2-ld-mat i{
  width: var(--av2-ld-c);
  height: var(--av2-ld-c);
  border-radius: 2px;
  background: var(--av2-ld-off);
  --on: var(--av2-ld-2);
  animation: av2LdMat var(--v, 1.5s) ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
.av2-ld-mat i.t1{ --on: var(--av2-ld-clair); }
.av2-ld-mat i.t2{ --on: var(--av2-ld-2); }
.av2-ld-mat i.t3{ --on: var(--av2-ld-1); }
/* les 4 cellules signature : une couleur de section chacune */
.av2-ld-mat i.s-event{ --on:#a81213; --av2-ld-ombre:rgba(168,18,19,.5);  animation-name: av2LdMatS; }
.av2-ld-mat i.s-actu { --on:#8fc90b; --av2-ld-ombre:rgba(143,201,11,.55); animation-name: av2LdMatS; }
.av2-ld-mat i.s-page { --on:#209fb5; --av2-ld-ombre:rgba(32,159,181,.55); animation-name: av2LdMatS; }
.av2-ld-mat i.s-nl   { --on:#e67e22; --av2-ld-ombre:rgba(230,126,34,.55); animation-name: av2LdMatS; }

/* ---------- le texte ---------- */
.av2-loader-txt{
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  white-space: nowrap;
}
.av2-loader-lib{
  background: linear-gradient(90deg, #93a5ad 0%, #93a5ad 32%, var(--av2-ld-1) 50%, #93a5ad 68%, #93a5ad 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: av2LdTexte 2.6s linear infinite;
}
.av2-loader-pts{ display: inline-flex; gap: 3px; align-items: baseline; }
.av2-loader-pts i{
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--av2-ld-1);
  opacity: .25;
  animation: av2LdPoint 1.2s ease-in-out infinite;
}
.av2-loader-pts i:nth-child(2){ animation-delay: .18s; }
.av2-loader-pts i:nth-child(3){ animation-delay: .36s; }
.av2-loader-sstitre{
  margin-top: -6px;
  font-size: 11px;
  color: #9aa8b0;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  text-align: center;
  max-width: 300px;
}

/* ---------- variantes de taille ---------- */
/* .ligne : matrice et texte côte à côte — pour les barres (enregistrement,
   édition à la volée) où un bloc en colonne prendrait trop de hauteur */
.av2-loader.ligne{
  display: inline-flex;
  vertical-align: middle;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  --av2-ld-c: 8px;
  --av2-ld-g: 2px;
}
.av2-loader.ligne .av2-loader-txt{ font-size: 11.5px; letter-spacing: .05em; text-transform: none; }

/* .mini : exactement la même matrice, en cellules plus petites */
.av2-loader.mini{
  display: inline-flex;
  vertical-align: middle;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  --av2-ld-c: 6px;
  --av2-ld-g: 2px;
}
.av2-loader.mini .av2-loader-txt{ font-size: 11px; letter-spacing: .06em; text-transform: none; }
.av2-loader.xl{ --av2-ld-c: 14px; --av2-ld-g: 4px; gap: 18px; }
.av2-loader.xl .av2-loader-txt{ font-size: 13px; }
.av2-loader.nu .av2-loader-txt{ display: none; }

/* bloc de chargement dans un contenu */
.av2-loader-bloc{ padding: 26px 0 30px; display: flex; justify-content: center; }
/* .grand : bloc d'attente confortable dans une popin (simulation, envoi…) */
.av2-loader-bloc.grand{ min-height: 300px; align-items: center; padding: 0; }
/* .plein : centré dans la hauteur dispo — la hauteur réelle est posée en JS
   (height:100% ne résout pas dans #incModule, le loader se collait en haut) */
.av2-loader-bloc.plein{ padding: 0; min-height: 160px; align-items: center; box-sizing: border-box; }

/* ---------- voile plein écran ----------
   Voile très léger : on doit continuer à voir la page dessous, sinon on
   croit à une page blanche. Le loader est posé sur une carte blanche pour
   qu'il se détache tout de suite, et il est centré sur l'ÉCRAN (position
   fixed) : aucun calcul de hauteur, aucun décentrage possible. */
#chargement_page{
  /* !important : ce fichier est chargé AVANT les CSS du site, on verrouille */
  position: fixed !important;
  left: 0 !important; top: 0 !important; right: 0 !important; bottom: 0 !important;
  width: auto !important; height: auto !important;
  /* custom-ad-v2.css (chargée après celle-ci, pour les connectés) impose encore
     l'ancien centrage du GIF : margin-left:-150px / margin-top:-70px / height:300px
     / z-index:8. On neutralise tout, sinon le voile part à gauche et passe dessous. */
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  z-index: 2147483000 !important;   /* au-dessus de tout : popins, TinyMCE, bandeaux */
  /* voile SOMBRE léger : sur le filtre déjà sombre d'une popin, les deux se
     fondent en un seul assombrissement (le blanc laiteux faisait double voile) */
  background: rgba(15,23,32,.35);
  -webkit-backdrop-filter: blur(1.5px);
          backdrop-filter: blur(1.5px);
}
#chargement_page .av2-loader{
  /* centrage par inset+margin:auto : aucune dépendance à transform,
     qu'une vieille règle du site pourrait écraser */
  position: absolute !important;
  left: 0 !important; top: 0 !important; right: 0 !important; bottom: 0 !important;
  margin: auto !important;
  width: -webkit-fit-content; width: fit-content;
  width: -webkit-max-content; width: max-content;
  height: -webkit-fit-content; height: fit-content;
  height: -webkit-max-content; height: max-content;
  transform: none !important;
  background: #fff;
  padding: 26px 38px 22px;
  border-radius: 14px;
  box-sizing: border-box;
  max-width: calc(100vw - 32px);
  /* le voile est désormais sombre : la carte blanche porte une vraie ombre,
     elle se détache au lieu de se fondre */
  box-shadow: 0 14px 44px rgba(0,0,0,.30);
}
/* le voile n'a plus jamais de GIF dedans */
#chargement_page img{ display: none !important; }

/* Remplaçant d'un ancien GIF : il hérite des classes de l'image (pour rester
   ciblable par .load-tbl / #load-tbl), donc potentiellement de styles pensés
   pour une image (largeur, marges négatives, position). On neutralise tout et
   on centre — l'image était souvent centrée par ses propres styles. */
.av2-loader[data-av2-ld]{
  display: flex !important;
  width: -webkit-fit-content !important;
  width: fit-content !important;
  height: auto !important;
  margin: 6px auto !important;
  padding: 0 !important;
  position: static !important;
  float: none !important;
  max-width: none !important;
  min-width: 0 !important;
  vertical-align: middle;
}

/* popins : même taille que sur les pages (aucune surcharge), seule la variante
   .ligne des barres reste petite */

/* ---------- animations ---------- */
@keyframes av2LdMat{
  0%, 100%{ background: var(--av2-ld-off); transform: scale(1); }
  14%     { background: var(--on); transform: scale(1.12); }
  36%     { background: var(--on); transform: scale(1); }
  64%     { background: var(--av2-ld-off); transform: scale(1); }
}
@keyframes av2LdMatS{
  0%, 100%{ background: var(--av2-ld-off); box-shadow: none; transform: scale(1); }
  14%     { background: var(--on); box-shadow: 0 0 7px var(--av2-ld-ombre); transform: scale(1.2); }
  40%     { background: var(--on); box-shadow: 0 0 4px var(--av2-ld-ombre); transform: scale(1); }
  66%     { background: var(--av2-ld-off); box-shadow: none; transform: scale(1); }
}
@keyframes av2LdOnde{
  0%, 100%{ height: calc(var(--av2-ld-c) * .55); opacity: .35; }
  45%     { height: calc(var(--av2-ld-c) * 3.2); opacity: 1; }
}
@keyframes av2LdTexte{
  0%  { background-position: 130% 0; }
  100%{ background-position: -130% 0; }
}
@keyframes av2LdPoint{
  0%, 100%{ opacity: .22; transform: translateY(0); }
  40%     { opacity: 1; transform: translateY(-2px); }
}

/* accessibilité : on calme tout si l'utilisateur le demande */
@media (prefers-reduced-motion: reduce){
  .av2-ld-mat i{ animation-duration: 3s; }
  .av2-loader-lib, .av2-loader-pts i{ animation: none; }
  .av2-loader-lib{ color: #7d8f98; -webkit-text-fill-color: #7d8f98; }
}

/* Le spinner interne des popins (custom-ad-v2.js) est retiré du jeu : c'est le
   voile général qui couvre l'ouverture — un seul chargeur à l'écran, toujours. */
#chrgModule{ display: none !important; }