/* ============================================================
   LOADER : le cafard court partout pendant le chargement
   ============================================================ */
.loader{
    position: fixed;
    inset: 0;
    z-index: 200;                 /* au-dessus de tout, viewer compris */
    background: ivory;
    overflow: hidden;
    cursor: default;
    transition: opacity .45s ease;
}
.loader.is-hidden{
    opacity: 0;
    pointer-events: none;
}
/* "LOADING..." : Alte Haas vectorise, integre dans le HTML (aucune police a attendre).
   Le cafard lui passe par-dessus. */
.loader-texte{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: block;
    height: 10.5px;               /* hauteur de capitale d'un texte de 14px */
    aspect-ratio: 1449 / 187;     /* proportions du texte vectorise */
    width: auto;
    fill: #000;
    overflow: visible;
}

.loader-roach{
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 70px;
    aspect-ratio: 300 / 400;      /* meme format que l'animation, tete vers le haut */
    will-change: transform;
    filter: drop-shadow(2px 4px 5px rgba(0,0,0,.35));
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}
.loader-roach-rest,
.loader-roach svg{
    display: block;
    width: 100% !important;
    height: 100% !important;
}
.loader-roach-rest{ object-fit: contain; }
/* des que l'animation Lottie est prete, l'image fixe s'efface */
.loader-roach.is-live .loader-roach-rest{ display: none; }
.loader-roach > div{ position: absolute; inset: 0; }

@media (max-width: 600px){
    .loader-roach{ width: 48px; }
}
/* pas d'animation si l'utilisateur a demande moins de mouvement */
@media (prefers-reduced-motion: reduce){
    .loader-roach{ left: 50%; top: 50%; transform: translate(-50%, -50%) !important; }
}