/* V2-271 · le chargement du fil de l'approbation : trois bulles et une roue */
.ch-voile { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  background: color-mix(in srgb, var(--mz-fond, #fff) 78%, transparent); backdrop-filter: blur(2px);
  animation: ch-entre .2s ease-out both; }
.ch-voile[hidden] { display: none; }
.ch-carte { width: min(560px, calc(100vw - 32px)); background: var(--mz-fond, #fff);
  border: 1px solid var(--mz-trait, #e6e2da); border-radius: 16px; padding: 20px 20px 14px;
  box-shadow: 0 18px 48px rgba(20, 20, 20, .10); }
.ch-fil { display: flex; flex-direction: column; gap: 12px; }
.ch-msg { display: flex; align-items: flex-start; gap: 10px; opacity: 0; animation: ch-monte .45s ease-out forwards; }
.ch-moi { justify-content: flex-end; }
.ch-av { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 600; color: #fff; background: var(--mz-vert, #1f6b4f); }
.ch-bulle { display: flex; flex-direction: column; gap: 7px; width: 72%; padding: 12px 14px; border-radius: 14px;
  background: var(--mz-champ, #f6f4ef); }
.ch-moi .ch-bulle { width: 52%; background: var(--mz-vert-clair, #e4f1ea); }
.ch-bulle i { display: block; height: 9px; border-radius: 5px;
  background: linear-gradient(90deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.13) 40%, rgba(0,0,0,.06) 80%);
  background-size: 220% 100%; animation: ch-reflet 1.3s ease-in-out infinite; }
.ch-pied { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 16px;
  font-size: 13px; color: var(--mz-encre-douce, #6b6b6b); }
.ch-roue { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--mz-trait, #e6e2da);
  border-top-color: var(--mz-vert, #1f6b4f); animation: ch-tourne .8s linear infinite; }
.ch-dans-le-fil { padding: 8px 4px 4px; animation: ch-entre .2s ease-out both; }
@keyframes ch-monte { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ch-reflet { from { background-position: 120% 0; } to { background-position: -100% 0; } }
@keyframes ch-tourne { to { transform: rotate(360deg); } }
@keyframes ch-entre { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .ch-msg { animation: none; opacity: 1; }
  .ch-bulle i, .ch-roue { animation-duration: 3s; }
}