/* ════════════════════════════════════════════════════════════════════
   11.30 (17/10/2026) — colle de l'app autour de chargement-v1.css (copie VERBATIM de design-ref/chargement.css, jamais
   éditée à la main) : le seul indicateur de chargement de l'app = anneau fin (.ld-ring) et squelettes (.ld-sk).
   ════════════════════════════════════════════════════════════════════ */
/* La courbe de la maquette (--ld-e) n'est posée que sur .ld : un squelette posé seul perdait son reflet */
:root { --ld-e: cubic-bezier(.4, 0, .2, 1); }
/* D1 : tout indicateur apparaît après 300 ms — une action plus rapide n'affiche rien (aucun éclair) */
.ld, .ld-sk { animation: ld-apparait 0s linear 300ms both; }
@keyframes ld-apparait { from { visibility: hidden; } }
/* Écran et section : anneau au-dessus de son libellé */
.ld-col { flex-direction: column; gap: 10px; }
/* D2 : bouton en cours (btnLoading) — anneau 16 px centré dans la couleur du texte du bouton, libellé masqué */
.btn-roue .ld-ring { border-color: color-mix(in oklab, currentColor 35%, transparent); border-top-color: currentColor; }
.btn-roue .ld-rm { color: currentColor; font-size: 13px; font-weight: 500; }
/* Squelettes composés par MXC.squelette (page, liste) */
.ld-page { display: flex; flex-direction: column; gap: 12px; }
.ld-page-hd { display: flex; flex-direction: column; gap: 8px; padding: 4px 0 6px; }
.ld-rws > .ld-rm { padding: 2px 0; }
@media (max-width: 599.98px) { .ld-kp { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* UN SEUL rendu de squelette : les squelettes déjà portés des maquettes (.mx-skel de la charte, .mxy-skel des paiements)
   et historiques (.mx-skeleton) prennent exactement celui de .ld-sk — fond, reflet de 1 s, apparition après 300 ms,
   immobiles en mouvement réduit. Leurs classes restent (parités des écrans portés) ; « html » : priorité sur leurs feuilles. */
html .mx-skel, html .mxy-skel, html .mx-skeleton { background: var(--mx-bg-2); position: relative; overflow: hidden; animation: ld-apparait 0s linear 300ms both; }
html.mx-dark .mx-skel, html.mx-dark .mxy-skel, html.mx-dark .mx-skeleton { background: var(--mx-surface-2); }
html .mx-skel::after, html .mxy-skel::after, html .mx-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--mx-surface) 65%, transparent), transparent); animation: ld-shim 1s cubic-bezier(.4, 0, .2, 1) infinite; }
html.mx-dark .mx-skel::after, html.mx-dark .mxy-skel::after, html.mx-dark .mx-skeleton::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .06), transparent); }
@media (prefers-reduced-motion: reduce) { html .mx-skel::after, html .mxy-skel::after, html .mx-skeleton::after { display: none; } }
/* Espace client : pastilles de créneaux en attente (grille de 4) */
.cas-skeleton-grid .ld-sk--b { width: 100%; height: 40px; }
/* Messagerie : liste des conversations en attente */
.conv-sq { padding: 12px; }