/* LE CHARGEMENT, PARTOUT (27/09/2026, choix de Romain).
   Tout ce qui attend quelque chose montre le même effet : une case grise,
   le signe du site au fond pour les images, et le reflet de Canva qui
   passe par-dessus. Aperçus validés : chargement du site et paiement.
     .ch-img     une image (ou sa boîte) qui arrive — posée par chImages()
     .ch-barre   un texte qui attend (barre grise)
     .ch-pilule  un bouton, une ligne, un champ qui attend (pilule grise)  */
:root { --ch-vide: #e3e5ea; }
@keyframes ch-reflet { from { background-position: 200% 0, center; } to { background-position: -200% 0, center; } }
.ch-img {
  background-color: var(--ch-vide) !important;
  background-image: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.65) 50%, transparent 65%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 24'%3E%3Crect x='0' y='3' width='18' height='5' rx='2.5' fill='%23c3c9d3'/%3E%3Crect x='5' y='15' width='13' height='5' rx='2.5' fill='%23c3c9d3'/%3E%3Ccircle cx='30' cy='12' r='8' fill='%23c3c9d3'/%3E%3C/svg%3E") !important;
  background-size: 250% 100%, 40px auto !important;
  background-position: 200% 0, center !important;
  background-repeat: no-repeat !important;
  animation: ch-reflet 1.6s ease-in-out infinite;
}
img.ch-img { background-size: 250% 100%, 28px auto !important; }
.ch-img img { opacity: 0 !important; }
.ch-fondu { transition: opacity .45s ease; }
.ch-barre, .ch-pilule {
  color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  background-color: var(--ch-vide) !important;
  background-image: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.65) 50%, transparent 65%) !important;
  background-size: 250% 100% !important;
  background-repeat: no-repeat !important;
  animation: ch-reflet 1.6s ease-in-out infinite;
  pointer-events: none;
}
.ch-barre { border-radius: 8px; }
.ch-pilule { border-radius: 50px; }
.ch-barre > *, .ch-pilule > * { visibility: hidden !important; }
@media (prefers-reduced-motion: reduce) { .ch-img, .ch-barre, .ch-pilule { animation: none; } }

/* Des cases qui attendent des photos, des lignes qui attendent une liste */
.ch-tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ch-tuiles > i { display: block; aspect-ratio: 3 / 2; border-radius: 12px; }
.ch-lignes { display: grid; gap: 10px; }
.ch-lignes > i { display: block; height: 52px; border-radius: 14px !important; }
/* Une liste encore vide pendant qu'une donnée arrive (html.ch-reseau, posé par chReseau) */
html.ch-reseau .ch-liste:empty {
  display: block; min-height: 176px; border-radius: 14px;
  background-image: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.65) 50%, transparent 65%),
                    repeating-linear-gradient(to bottom, var(--ch-vide) 0 48px, transparent 48px 60px);
  background-size: 250% 100%, 100% 180px; background-repeat: no-repeat;
  animation: ch-reflet 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { html.ch-reseau .ch-liste:empty { animation: none; } }