/* =============================================================
   CSS/CHARGEMENT.CSS - Mimba-Educ : le logo de chargement, le même partout
   version 1.0 - 2026-11-02
   Utilisé par cours.php (voile plein écran), serie.php (dans la feuille) et bienvenu.php (fenêtre des listes).
   Le logo vient de img/logo-mimba.svg : il respire, avec une légère lueur rouge, et un anneau
   dégradé rouge-orange tourne autour. Le logo et le texte n'apparaissent qu'après 0,2 s
   (un chargement rapide ne fait donc pas clignoter la page).

   Le dessin, à recopier tel quel :
   <div class="mb-charge" role="status" aria-live="polite">            (ou class="mb-charge-voile" : plein écran)
     <div class="mb-charge-logo"><svg class="mb-charge-anneau" viewBox="0 0 120 120" aria-hidden="true">
       <defs><linearGradient id="mbChargeG" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#ff1a1a"/>
       <stop offset=".6" stop-color="#ff5a00"/><stop offset="1" stop-color="#ffb300"/></linearGradient></defs>
       <circle cx="60" cy="60" r="54" fill="none" stroke="rgba(225,29,72,.13)" stroke-width="7"/>
       <circle cx="60" cy="60" r="54" fill="none" stroke="url(#mbChargeG)" stroke-width="7" stroke-linecap="round" stroke-dasharray="85 255"/>
     </svg><span class="mb-charge-img" aria-hidden="true"></span></div>
     <div class="mb-charge-t">Chargement<span class="mb-charge-p"><i>.</i><i>.</i><i>.</i></span></div>
   </div>
   ============================================================= */

/* dans la page (série, liste) */
.mb-charge{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:260px;padding:30px 10px;transition:opacity .35s}
/* plein écran (cours) */
.mb-charge-voile{position:fixed;inset:0;z-index:9000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:rgba(var(--bg-rgb,7,11,26),.97);transition:opacity .35s}
.mb-charge.fini,.mb-charge-voile.fini{opacity:0;pointer-events:none}

/* le logo et son anneau */
.mb-charge-logo{position:relative;width:104px;height:104px}
.mb-charge-anneau,.mb-charge-anneau.nv-motif{position:absolute!important;left:0!important;top:0!important;right:auto!important;bottom:auto!important;
  width:104px!important;height:104px!important;opacity:1!important;z-index:0;pointer-events:none;animation:mbChargeTour 1.1s linear infinite}
.mb-charge-img{position:absolute;z-index:1;left:16px;top:16px;width:72px;height:72px;background:url(../img/logo-mimba.svg) center/contain no-repeat;
  filter:drop-shadow(0 0 8px rgba(236,25,33,.45));animation:mbChargePouls 1.6s ease-in-out infinite}
.mb-charge-t{font-weight:800;font-size:15px;letter-spacing:.01em;color:var(--text-sub,#94a3b8)}
.feuille .mb-charge-t{color:#475569}
.mb-charge-p i{font-style:normal;opacity:.2;animation:mbChargePoint 1.2s infinite}
.mb-charge-p i:nth-child(2){animation-delay:.2s}
.mb-charge-p i:nth-child(3){animation-delay:.4s}

/* apparition après 0,2 s */
.mb-charge-logo,.mb-charge-t{animation:mbChargeVoir .3s ease .2s both}

@keyframes mbChargeTour{to{transform:rotate(360deg)}}
@keyframes mbChargePouls{0%,100%{transform:scale(.92);filter:drop-shadow(0 0 5px rgba(236,25,33,.35))}50%{transform:scale(1.04);filter:drop-shadow(0 0 12px rgba(236,25,33,.65))}}
@keyframes mbChargePoint{0%,100%{opacity:.2}40%{opacity:1}}
@keyframes mbChargeVoir{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){.mb-charge-anneau,.mb-charge-img,.mb-charge-p i{animation:none;opacity:1}}
@media print{.mb-charge,.mb-charge-voile{display:none!important}}