/* =========================================================================
   socle/ecran-construction.css  —  Écran plein page « Préparation de
   l'environnement de travail » (login + dashboard).

   Affiché pendant la connexion (remplace l'ancienne modale « Connexion en
   cours ») PUIS au chargement du dashboard, masqué (fondu) une fois tous les
   widgets chargés. Visuel = double anneau pulsé (même esprit que .preloader),
   composant autonome (ne dépend ni de loaders.css ni de login-generique.css).
   Lié explicitement par _LayoutDashboard.cshtml et _LoginGeneriqueLayout.cshtml.
   ========================================================================= */

.tg-ecran-construction {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.75rem;
    background-color: #fff;
    opacity: 1;
    transition: opacity 0.5s ease-out;
}

/* État de sortie : fondu piloté par JS juste avant le retrait du DOM. */
.tg-ecran-construction.tg-ecran-construction--masque {
    opacity: 0;
    pointer-events: none;
}

/* Spinner UNIFIÉ : on réutilise le composant `.preloader` (assets/css/socle/loaders.css,
   keyframes `animate-preloader`) — même spinner que le loader générique #genericLoader.
   loaders.css est chargé par les layouts login ET le layout dashboard. Ici on ne fait que
   colorer les anneaux à la couleur primary du thème (currentColor des bordures). */
.tg-ecran-construction .preloader {
    color: var(--bs-main, #ff6136);
    /* Taille FIXE 72×72 : loaders.css met `.preloader { height:100% }` (prévu pour remplir une
       boîte `.divWait`) ; sans override, le spinner prendrait toute la hauteur de l'écran plein
       page → contenu décentré / rejeté en bas. On le borne comme l'ancien `.tg-ecran-construction__loader`. */
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    padding: 0;
}

.tg-ecran-construction__message {
    margin: 0;
    font-size: 1rem;
    color: var(--bs-secondary-color, #6c757d);
    text-align: center;
}

/* Points de suspension animés (« . » → « .. » → « ... » en boucle).
   CSS pur ; « … » sert de repli si le navigateur n'anime pas `content`.
   Largeur FIXE + alignement à gauche : la zone des points occupe toujours la même
   place, donc le texte (ligne centrée) ne se décale pas selon 1/2/3 points. */
.tg-ecran-construction__points {
    display: inline-block;
    width: 1.25em;
    text-align: left;
}

    .tg-ecran-construction__points::after {
        content: "\2026";
        animation: tg-ec-points 1.4s steps(1, end) infinite;
    }

@keyframes tg-ec-points {
    0% {
        content: ".";
    }

    33% {
        content: "..";
    }

    66% {
        content: "...";
    }
}