/* =========================================
   Fond anime commun

   PISTE OUVERTE, ne pas la reprendre telle quelle : remplacer le
   `filter: blur(74px)` des halos par un degrade radial supprime bien
   les rectangles plats que le compositeur laisse en rasterisant le
   flou par tuiles, mais donne des halos trop presents et trop plats.
   Essaye le 21/08/2026, refuse a l ecran.
   ========================================= */

:root {
    --mimex-bg: var(--surface-sombre);
    --mimex-blue-rgb: 95, 168, 255;
    --mimex-purple-rgb: 169, 139, 255;
    --mimex-green-rgb: 99, 215, 196;
    --mimex-gold-rgb: 242, 190, 99;
}

body.mimex-bg-page {
    background: var(--mimex-bg);
    overflow-x: hidden;
}

.mimex-bg {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;

    /* IL NE PEINT PLUS RIEN, RETENU LE 23/08. Il portait deux couches de
       clarte : un halo blanc a 6 % centre a 50 % 38 %, et un degrade diagonal
       qui eclaircissait la surface. Ni l'un ni l'autre ne posait de COULEUR,
       et le halo travaillait exactement la ou les orbes travaillent : c'est
       lui qui les faisait paraitre trop fortes, pas elles.

       Retires, il ne reste que l'aplat sombre pose par `body.mimex-bg-page`.
       On ecrit donc `none` plutot que de le redeclarer ici : le fond de `body`
       est deja le bon, et le redire en ferait deux endroits a tenir. */
    background: none;
    z-index: 0;
}

.mimex-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(var(--white-rgb),0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--white-rgb),0.025) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: radial-gradient(circle at center, rgba(var(--black-rgb),0.75), transparent 68%);
    opacity: 0.32;
}

.mimex-bg-orb {
    position: absolute;
    width: 42vw;
    height: 42vw;
    min-width: 320px;
    min-height: 320px;
    border-radius: 50%;
    filter: blur(74px);
    opacity: 0.42;
    animation: mimexBgOrbFloat 18s ease-in-out infinite alternate;
}

/* LES QUATRE ORBES A EGALITE, 0,26, RETENU LE 23/08.

   CE QUI CHANGE N EST PAS L INTENSITE MAIS L EQUILIBRE. Le bleu menait a 0,42,
   l'or suivait a 0,26 : le fond tirait donc au bleu, et les trois autres
   teintes n'etaient que des nuances autour de lui. A egalite, aucune ne mene,
   et le fond prend la couleur du melange.

   0,26 est la valeur que l'or portait deja : c'est la plus discrete des quatre
   qui devient la regle, pas une moyenne. La taille, le flou, l'opacite de
   l'element, les positions et les quatre durees ne bougent pas : le rendu
   recherche tenait a l'intensite et a l'equilibre, pas a la composition. */
.mimex-bg-orb--one {
    left: -12%;
    top: -14%;
    background: rgba(var(--mimex-blue-rgb), 0.26);
}

.mimex-bg-orb--two {
    right: -16%;
    top: 12%;
    background: rgba(var(--mimex-purple-rgb), 0.26);
    animation-duration: 22s;
}

.mimex-bg-orb--three {
    left: 24%;
    bottom: -22%;
    background: rgba(var(--mimex-green-rgb), 0.26);
    animation-duration: 24s;
}

.mimex-bg-orb--four {
    right: 18%;
    bottom: -18%;
    background: rgba(var(--mimex-gold-rgb), 0.26);
    animation-duration: 20s;
}

@keyframes mimexBgOrbFloat {
    from {
        transform: translate3d(0, 0, 0) scale(1);
    }

    to {
        transform: translate3d(5vw, -4vh, 0) scale(1.12);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mimex-bg-orb {
        animation: none;
    }
}


/* --- LE FOND PENDANT LE TEST --------------------------------------------
   -------------------------------------------------------------------------
   L'ecran du test empile ses propres surfaces et ne joue pas le meme jeu que
   les autres pages : ces deux regles-la lui sont reservees, et elles sont
   ecrites ici parce que c'est `.mimex-bg` qu'elles reglent.

   IL PASSE PAR-DESSUS LE CONTENEUR. `.diagnostic-app` est a 9999 et couvre
   l'ecran entier : a son z-index ordinaire, le fond serait dessous, donc
   invisible. Il monte au-dessus, et l'ecran d'accueil monte au-dessus de lui
   (10002 dans `lk.css`) pour garder son texte devant.

   PUIS IL S EFFACE AVEC L ACCUEIL, ce qui n'est pas un detail de gout : monte
   a 10001, il passe aussi au-dessus du `<canvas>`, et les quatre orbes se
   mettraient a flotter SUR les images du test. Une teinte mouvante par-dessus
   la matiere qu'on demande de juger, c'est precisement ce que le noir de la
   procedure existe pour empecher. `display: none` plutot qu'une opacite : rien
   a composer ni a animer sur quinze etapes.
   ------------------------------------------------------------------------- */
body.diagnostic-player-page .mimex-bg {
    z-index: 10001;
}

body.diagnostic-player-page.procedure-lancee .mimex-bg {
    display: none;
}

/* --- LE FOND REVIENT QUAND LA PROCEDURE EST FINIE ------------------------
   -------------------------------------------------------------------------
   `procedure-lancee` masque les orbes pendant le test, et c'est necessaire :
   une teinte mouvante par-dessus les images fausserait la perception des
   couleurs, qui est tout l'objet de la mesure.

   Mais rien ne les rendait a la fin. Or l'ecran final est transparent expres,
   pour laisser voir ce fond : sans lui, c'est la DERNIERE IMAGE DU TEST qui
   restait derriere le titre et les boutons, en pleine page. Le test est
   termine, il n'y a plus rien a percevoir : le produit reprend son fond.

   Meme poids que la regle qui masque, donc c'est l'ordre qui tranche : cette
   regle vient apres, et elle gagne.
   ------------------------------------------------------------------------- */
body.diagnostic-player-page.procedure-terminee .mimex-bg {
    display: block;
}