/* ==========================================================================
   Écran de démarrage des clients web CCA (desktop, Documents ; mobile à venir) — remplace le cercle du gabarit Blazor
   (Luc, 2026-10-08, charte D21). Affiché par index.html dans <div id="app"> pendant le téléchargement, puis le
   démarrage ; Blazor le remplace au premier rendu. Vit AVANT Blazor : feuille globale, pas de CSS isolé de composant.
   Bibliothèque CCA.Web.Assets (déménagé de Desktop.UI le 2026-10-08) : chaque couleur lit le jeton de la charte s'il
   existe (desktop, Documents), sinon sa valeur de charte en repli (mobile, qui n'a pas encore la charte) — clair, puis
   foncé selon data-theme="dark" ou le système.
   Marine dans les deux thèmes (cadre-fond, comme la barre du haut) : pas de flash blanc avant la connexion ou l'app.
   Barre fine = --blazor-load-percentage (posée par Blazor) ; texte « Chargement… » puis « Démarrage… » à 100 %
   (classe is-starting posée par cca-splash.js : le CSS ne sait pas comparer une variable).
   ========================================================================== */

.cca-splash {
    --cca-splash-fond: var(--cca-cadre-fond, #12233D);
    --cca-splash-texte: var(--cca-cadre-texte-2, #9FB0C8);
    --cca-splash-piste: var(--cca-cadre-bordure, #22385A);
    --cca-splash-barre: var(--cca-cadre-indicateur, #5FA0FF);
    position: fixed;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background: var(--cca-splash-fond);
    color: var(--cca-splash-texte);
    font-family: 'Segoe UI', system-ui, sans-serif;
}

/* Replis foncés de la charte, seulement là où ses jetons manquent (les jetons, s'ils existent, gagnent toujours). */
[data-theme="dark"] .cca-splash {
    --cca-splash-fond: var(--cca-cadre-fond, #0A1524);
    --cca-splash-texte: var(--cca-cadre-texte-2, #93A6C0);
    --cca-splash-piste: var(--cca-cadre-bordure, #172840);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .cca-splash {
        --cca-splash-fond: var(--cca-cadre-fond, #0A1524);
        --cca-splash-texte: var(--cca-cadre-texte-2, #93A6C0);
        --cca-splash-piste: var(--cca-cadre-bordure, #172840);
    }
}

.cca-splash-logo {
    width: 120px;
    height: auto;
}

/* Nom de l'application (« Documents ») : signature « CCA | Nom » de cca-signature.css (même bibliothèque) ; rien pour
   le desktop, le logo dit déjà CCA. */

.cca-splash-bar {
    width: 200px;
    height: 3px;
    border-radius: 2px;
    background: var(--cca-splash-piste);
    overflow: hidden;
}

.cca-splash-bar-fill {
    width: var(--blazor-load-percentage, 0%);
    height: 100%;
    border-radius: 2px;
    background: var(--cca-splash-barre);
    transition: width .1s ease-out;
}

.cca-splash-text {
    min-height: 16px;
    font-size: 12px;
}

    .cca-splash-text::after {
        content: "Chargement…";
    }

.cca-splash.is-starting .cca-splash-text::after {
    content: "Démarrage…";
}

/* Démarrage : la barre pleine respire doucement, pour montrer que ça avance encore. */
.cca-splash.is-starting .cca-splash-bar-fill {
    animation: cca-splash-pulse 1.2s ease-in-out infinite;
}

@keyframes cca-splash-pulse {
    50% {
        opacity: .45;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cca-splash.is-starting .cca-splash-bar-fill {
        animation: none;
    }
}