/* =====================================================================
   ADX FORMATION — Loader de page global (front + back-office)
   Logo ADX animé (version inversée : blanc sur fond violet), affiché en
   voile plein écran au chargement puis masqué une fois la page prête.

   Séquence d'animation (boucle 5 s) :
     1. contours des lettres a d x        (0 → 22 %)
     2. contour de l'arc gauche           (22 → 38 %)
     3. texte « formation » gauche→droite (38 → 48 %)
     4. remplissage lettres + arc         (50 → 60 %)
     5. maintien puis fondu / reprise
   ===================================================================== */

.axf-page-loader {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #2e1f45;              /* fond violet ADX (couleur inversée) */
    opacity: 1;
    transition: opacity .5s ease;
    /* Empêche tout scroll/interaction pendant l'affichage du voile. */
    touch-action: none;
}

/* État masqué : fondu + retrait de l'espace interactif. */
.axf-page-loader.axf-loader--hidden {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

.axf-page-loader__logo {
    width: 220px;
    max-width: 60vw;
    height: auto;
    overflow: visible;
}

/* Longueur de tracé par défaut (surdimensionnée) : les contours sont
   déjà masqués avant que le JS ne mesure la longueur exacte de chaque
   chemin — évite tout « flash » de logo plein au chargement. */
.axf-page-loader .axf-letter,
.axf-page-loader .axf-arc {
    --len: 800;
    fill: transparent;
    stroke: #ffffff;
    stroke-width: 1.5px;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: var(--len);
    stroke-dashoffset: var(--len);
}
.axf-page-loader .axf-letter { animation: axf-loader-letter 5s ease-in-out infinite; }
.axf-page-loader .axf-arc    { animation: axf-loader-arc 5s ease-in-out infinite; }

.axf-page-loader .axf-fade {
    fill: #ffffff;
    fill-rule: evenodd;
    stroke: none;
    opacity: 0;
    animation: axf-loader-text 5s ease-in-out infinite;
}

@keyframes axf-loader-letter {
    0%   { stroke-dashoffset: var(--len); fill: transparent; opacity: 1; }
    22%  { stroke-dashoffset: 0; fill: transparent; }
    50%  { stroke-dashoffset: 0; fill: transparent; stroke: #ffffff; }
    60%  { stroke-dashoffset: 0; fill: #ffffff; stroke: transparent; }
    90%  { fill: #ffffff; opacity: 1; }
    100% { fill: #ffffff; opacity: 0; }
}
@keyframes axf-loader-arc {
    0%   { stroke-dashoffset: var(--len); fill: transparent; opacity: 1; }
    22%  { stroke-dashoffset: var(--len); }
    38%  { stroke-dashoffset: 0; fill: transparent; }
    50%  { stroke-dashoffset: 0; fill: transparent; stroke: #ffffff; }
    60%  { stroke-dashoffset: 0; fill: #ffffff; stroke: transparent; }
    90%  { fill: #ffffff; opacity: 1; }
    100% { fill: #ffffff; opacity: 0; }
}
@keyframes axf-loader-text {
    0%   { opacity: 0; transform: translateY(5px); }
    38%  { opacity: 0; transform: translateY(5px); }
    48%  { opacity: 1; transform: translateY(0); }
    90%  { opacity: 1; }
    100% { opacity: 0; }
}

/* Décalage gauche→droite des glyphes de « formation » (ordre du DOM = ordre
   de lecture). Appliqué aussi en inline dans le markup, conservé ici en
   repli si le style inline est retiré. */
.axf-page-loader .axf-fade-group > :nth-child(1) { animation-delay: 0s; }
.axf-page-loader .axf-fade-group > :nth-child(2) { animation-delay: .03s; }
.axf-page-loader .axf-fade-group > :nth-child(3) { animation-delay: .06s; }
.axf-page-loader .axf-fade-group > :nth-child(4) { animation-delay: .09s; }
.axf-page-loader .axf-fade-group > :nth-child(5) { animation-delay: .12s; }
.axf-page-loader .axf-fade-group > :nth-child(6) { animation-delay: .15s; }
.axf-page-loader .axf-fade-group > :nth-child(7) { animation-delay: .18s; }
.axf-page-loader .axf-fade-group > :nth-child(8) { animation-delay: .21s; }
.axf-page-loader .axf-fade-group > :nth-child(9) { animation-delay: .24s; }

/* En back-office, le voile doit passer au-dessus de la barre d'admin
   et du menu latéral. */
.wp-admin .axf-page-loader { z-index: 100000; }

/* Accessibilité : si l'utilisateur limite les animations, on affiche
   directement le logo plein (blanc) sans mouvement. */
@media (prefers-reduced-motion: reduce) {
    .axf-page-loader .axf-letter,
    .axf-page-loader .axf-arc {
        animation: none;
        stroke: transparent;
        fill: #ffffff;
        stroke-dashoffset: 0;
    }
    .axf-page-loader .axf-fade {
        animation: none;
        opacity: 1;
        transform: none;
    }
}