/* Réinitialisation + fondations globales — Durand Fils (voir design-guidelines/). */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 20px;
    min-height: 100vh;
}

h1,
h2,
h3,
p {
    margin: 0;
}

button {
    font-family: inherit;
}

/* Apparition/disparition fluides et peu coûteuses (opacity + petit déplacement horizontal, propriétés
   compositées) pour tout élément qui entre/sort de l'écran — messages, bulles, blocs de réponse. Un même
   axe de déplacement pour les deux (glisse depuis la gauche pour apparaître, repart vers la droite pour
   disparaître) plutôt que deux directions sans rapport. Pas d'animation par défaut : les classes n'ajoutent
   l'effet que quand le mouvement est autorisé, jamais de flash "invisible" pour qui a demandé moins de
   mouvement (prefers-reduced-motion) — .fade-out n'a donc pas besoin d'opacity:1 de repli hors media query,
   l'élément qu'elle vise est déjà visible avant que la classe ne soit posée. */
@media (prefers-reduced-motion: no-preference) {
    .fade-in {
        animation: fade-slide-in 440ms ease-out both;
    }

    .fade-out {
        animation: fade-slide-out 440ms ease-in both;
    }
}

@keyframes fade-slide-in {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fade-slide-out {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(10px);
    }
}

/* Transition entre écrans principaux (chat/recherche, MainLayout.razor) — opacité pure, sans déplacement
   (contrairement à .fade-in/.fade-out ci-dessus, pour des éléments plus fins). 500ms par phase (sortie
   puis entrée), pour un total perçu de 1000ms sur une navigation complète — demandé explicitement.
   Toujours une seule propriété compositée (opacity), donc peu coûteux. Même garde prefers-reduced-motion
   que le reste de l'app ; côté C# (MainLayout.OnLocationChangingAsync), le délai de navigation qui laisse
   le temps à .screen-fade-out de jouer est lui-même sauté pour ces utilisateurs, pas seulement l'animation
   visuelle. */
@media (prefers-reduced-motion: no-preference) {
    .screen-fade-in {
        animation: screen-fade-in 500ms ease both;
    }

    .screen-fade-out {
        animation: screen-fade-out 500ms ease both;
    }
}

@keyframes screen-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes screen-fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* --- Scaffold Blazor par défaut, restylé sur les tokens de la marque plutôt que les couleurs génériques --- */

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--success);
}

.invalid {
    outline: 1px solid var(--danger);
}

.validation-message {
    color: var(--danger);
}

#blazor-error-ui {
    color-scheme: light only;
    background: var(--warning-subtle);
    color: var(--ink);
    bottom: 0;
    box-shadow: var(--shadow-md);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, var(--danger);
    padding: 1rem 1rem 1rem 3.7rem;
    color: var(--on-fill);
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/* Écran de chargement initial — logo Durand Fils + nom produit centrés, apparition fluide en fondu
   (opacity, 2s) sur le bloc entier (logo + nom ensemble). Pied de page discret : logo Azuris (éditeur)
   au-dessus du pourcentage de chargement Blazor natif (--blazor-load-percentage-text, mis à jour par le
   script de démarrage WASM) plutôt qu'un anneau de progression. */
.loading-brand {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

.loading-logo {
    display: block;
    width: 660px;
    height: auto;
}

/* Un peu plus petit que le logo (660px) — text-display (32px) reste très en retrait du logo tout en
   gardant le nom produit lisible depuis loin sur un écran plein. */
.loading-product-name {
    margin: 0;
    font: var(--text-display);
    color: var(--ink);
}

@media (prefers-reduced-motion: no-preference) {
    .loading-brand {
        animation: loading-logo-fade-in 2s ease-out both;
    }
}

@keyframes loading-logo-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.loading-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--space-5);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

.loading-footer-logo {
    display: block;
    width: 120px;
    height: auto;
}

.loading-progress-text {
    text-align: center;
    font: var(--text-caption);
    color: var(--ink-secondary);
}

    .loading-progress-text:after {
        content: "Chargement : " var(--blazor-load-percentage-text, "0 %");
    }

code {
    font-family: var(--font-mono);
}