/* ═══════════════════════════════════════════════════════════════════
   CHARGEUR.CSS — barre fine + carte « mèche » (25/09/2026, R-CHARGEUR)
   Va de pair avec js/chargeur.js. Voir l'en-tête de ce fichier pour les
   règles (quand la barre, quand la carte, appels de fond silencieux).

   MULTISITE : les deux couleurs de la mèche sont des variables. Un site
   qui a sa propre charte les redéfinit (ex. body[data-site="2"] { … })
   sans toucher au code. Valeurs par défaut = couleurs relevées sur le
   logo officiel Usiwood.

   Plan z-index (voir css/ui.css) :
     .modal-overlay 9000 · anciens overlays CRM 100040
     VOILE DU CHARGEUR 100090  ← au-dessus des fenêtres qui ont lancé l'action
     dialogues ui.js 100100    ← un uiAlert d'erreur reste cliquable
     BARRE FINE 100150
     toasts 100200             ← un toast d'erreur reste lisible
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --chargeur-taupe: #998775;
  --chargeur-bleu:  #215273;
  /* La barre passe sur l'en-tête bleu nuit ET sur des écrans clairs :
     un taupe clair se lit sur les deux. */
  --chargeur-barre: #C9B79F;
  --chargeur-barre-2: #998775;
}

/* ─── 1. BARRE FINE ──────────────────────────────────────────────── */
#chargeur-barre {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 100150;
  pointer-events: none;          /* ne gêne jamais un clic */
  opacity: 0;
  transition: opacity .25s ease;
}
#chargeur-barre.chargeur-barre-visible { opacity: 1; }
#chargeur-barre.chargeur-barre-fin     { opacity: 0; transition-delay: .15s; }
.chargeur-barre-remplissage {
  height: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform .2s ease-out;
  background: linear-gradient(90deg, var(--chargeur-barre-2), var(--chargeur-barre));
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 6px rgba(201, 183, 159, .7);
  position: relative;
  overflow: hidden;
}
/* Reflet qui glisse : dit « ça vit » même quand la barre avance lentement. */
.chargeur-barre-remplissage::after {
  content: '';
  position: absolute; top: 0; bottom: 0; width: 120px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  animation: chargeur-reflet 1.1s linear infinite;
}
@keyframes chargeur-reflet { from { left: -120px; } to { left: 100%; } }

/* ─── 2. CARTE « MÈCHE » ─────────────────────────────────────────── */
/* Actif = bloque les clics (transparent) dès l'appel ;
   visible = se montre après 400 ms. */
#chargeur-voile {
  position: fixed; inset: 0;
  z-index: 100090;
  display: none;
  align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(23, 62, 84, 0);
  cursor: progress;
  outline: none;
  transition: background .25s ease;
}
#chargeur-voile.chargeur-voile-actif   { display: flex; }
#chargeur-voile.chargeur-voile-visible {
  background: rgba(23, 62, 84, .28);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.chargeur-carte {
  display: flex; align-items: center; gap: 18px;
  background: var(--white, #fff);
  border-radius: 16px;
  padding: 20px 26px;
  max-width: min(440px, 100%);
  box-shadow: 0 18px 48px rgba(23, 62, 84, .22), 0 2px 8px rgba(23, 62, 84, .10);
  opacity: 0;
  transform: translateY(8px) scale(.98);
  transition: opacity .22s ease, transform .22s ease;
}
#chargeur-voile.chargeur-voile-visible .chargeur-carte { opacity: 1; transform: none; }
.chargeur-textes { min-width: 0; }
.chargeur-titre {
  font-size: 15px; font-weight: 700;
  color: var(--wood-dark, #173E54);
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.chargeur-sous {
  margin-top: 3px;
  font-size: 13px;
  color: var(--text-muted, #857B70);
}
.chargeur-points span { animation: chargeur-point 1.2s infinite; }
.chargeur-points span:nth-child(2) { animation-delay: .2s; }
.chargeur-points span:nth-child(3) { animation-delay: .4s; }
@keyframes chargeur-point { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }

/* ─── LA MÈCHE (aussi utilisable seule : Chargeur.meche(px)) ─────── */
.chargeur-meche { flex: none; display: inline-block; vertical-align: middle; overflow: visible; }
.chargeur-meche .cm-t { fill: var(--chargeur-taupe); }
.chargeur-meche .cm-b { fill: var(--chargeur-bleu); }
/* La vague descend : chaque morceau s'allume à son tour, de haut en bas
   (retard posé par js/chargeur.js selon sa hauteur), comme une mèche qui fore. */
.chargeur-meche-anime polygon { animation: chargeur-fore 1.4s ease-in-out infinite; }
@keyframes chargeur-fore {
  0%, 100% { opacity: .28; transform: translateX(0); }
  35%      { opacity: 1;   transform: translateX(16px); }
  70%      { opacity: .28; }
}

/* ─── « Chargement… » des écrans (posé par chargeur.js, voir §3) ─── */
/* flex:1 1 100% + width:100% : dans un parent en flex-ROW (le tableau Kanban,
   par exemple), l'état de chargement serait un élément serré à gauche et la
   mèche apparaîtrait au bord. Retour de Julien du 25/09 : « pas dans l'axe ». */
.loading-state-meche {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; flex: 1 1 100%; width: 100%; min-width: 100%; box-sizing: border-box;
}
.chargeur-meche-inline { display: inline-flex; line-height: 0; }

/* ─── MOUVEMENT RÉDUIT (réglage du système) ──────────────────────── */
/* On garde un signe de vie, lent et sans déplacement. */
@media (prefers-reduced-motion: reduce) {
  .chargeur-barre-remplissage::after { animation: none; }
  .chargeur-meche-anime polygon { animation: chargeur-fore-doux 2.8s ease-in-out infinite; }
  .chargeur-carte, #chargeur-voile, .chargeur-barre-remplissage { transition: none; }
}
@keyframes chargeur-fore-doux { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* ─── MOBILE ─────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .chargeur-carte { padding: 16px 18px; gap: 14px; }
  .chargeur-titre { font-size: 14px; }
}