/* =========================
   ECRAN LOADER GLOBAL
========================= */
#loader-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: flex;
    justify-content: center;
    align-items: center;

    background: #000;
}

/* =========================
   CONTENEUR IMAGE
========================= */
#loader-box {
    position: relative;
    width: 60%;
    max-width: 900px;
}

/* IMAGE */
#loader-box img {
    width: 100%;
    height: auto;
    display: block;
}

/* =========================
   BARRE GRISE (fond)
========================= */
#bar-container {
    position: absolute;

    left: 28.3%;

    /* 🔼 remonte légèrement la barre */
    bottom: 27.7%;

    /* 🔽 réduit la largeur horizontale */
    width: 46%;

    height: 11.1px;

    background: rgba(50, 50, 50, 0.8);
    border: 1px solid #fff;
    overflow: hidden;
}

/* =========================
   BARRE BLEUE (progression)
========================= */
#bar {
    height: 100%;
    width: 0%;

    background: linear-gradient(90deg, #4adeff, #00c3ff);

    position: absolute;
    top: 0;
    left: 0;
}

/* =========================
   TEXTE POURCENTAGE
========================= */
#percent {
    position: absolute;

    left: 50%;
    bottom: 12%;
    transform: translateX(-50%);

    color: white;
    font-family: Arial, sans-serif;
    font-size: 18px;
    text-shadow: 0 0 5px black;
}