/** * MS1 — Indicateur de chargement (coureur animé). * Reutilisable en overlay plein ecran (#preloader) ou inline (panneaux AJAX). */ .ms1-loader { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; text-align: center; } .ms1-loader__runner { width: 72px; height: 72px; object-fit: contain; flex-shrink: 0; } .ms1-loader__label { font-size: 1rem; font-weight: 600; color: #333; line-height: 1.35; } .ms1-loader--inline { padding: 1.25rem 1rem; min-height: 120px; } .ms1-loader--inline .ms1-loader__runner { width: 64px; height: 64px; } .ms1-loader--inline .ms1-loader__label { font-size: 0.9rem; font-weight: 500; color: #666; } #preloader #spinner.ms1-loader--overlay { background: #fff; border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18); padding: 1.25rem 1.75rem; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; width: auto; min-width: 200px; font-size: inherit; color: inherit; border: none; } #preloader #spinner.ms1-loader--overlay .ms1-loader__runner { width: 80px; height: 80px; } #preloader #spinner.ms1-loader--overlay #preloader_text, #preloader #spinner.ms1-loader--overlay .ms1-loader__label { font-size: 1.1rem; font-weight: 600; } .ms1-loader__progress { width: 100%; min-width: 220px; margin-top: 0.25rem; } .ms1-loader__progress-track { width: 100%; height: 8px; background: #e8e8e8; border-radius: 4px; overflow: hidden; } .ms1-loader__progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, #2e7d32, #43a047); border-radius: 4px; transition: width 0.25s ease; } .ms1-loader__progress-pct { display: block; margin-top: 0.35rem; font-size: 0.85rem; font-weight: 600; color: #555; }