/* Jetons de design de Diane. Thème sombre unique (pas de mode clair : pas d'écran blanc).
   Les couleurs ci-dessous sont celles de base. Une organisation peut les remplacer (Paramètres, onglet Couleurs) : le thème choisi
   est calculé par Diane.Model/Dto/Serge/Theme.cs (ThemeResolver) puis posé sur <html> par js/diane-theme.js, ce qui l'emporte sur ce fichier.
   Un test (ThemeTests, « An_empty_theme_resolves_to_exactly_the_original_look ») vérifie que ces valeurs restent identiques à celles du résolveur. Ici aussi : ce que le thème ne règle pas
   (types de points, états de supervision, rayons, ombres) et le socle de la page. */

/* Les couleurs du thème sont des propriétés typées : le navigateur peut donc les fondre d'un thème à l'autre (transition sur <html>, plus bas). */
@property --dn-bg { syntax: "<color>"; inherits: true; initial-value: #0a1120; }
@property --dn-bg-from { syntax: "<color>"; inherits: true; initial-value: #0a1120; }
@property --dn-bg-to { syntax: "<color>"; inherits: true; initial-value: #0a1120; }
@property --dn-surface { syntax: "<color>"; inherits: true; initial-value: #111b2e; }
@property --dn-surface-2 { syntax: "<color>"; inherits: true; initial-value: #0e1829; }
@property --dn-surface-3 { syntax: "<color>"; inherits: true; initial-value: #17233b; }
@property --dn-border { syntax: "<color>"; inherits: true; initial-value: #25344f; }
@property --dn-border-strong { syntax: "<color>"; inherits: true; initial-value: #3a4d70; }
@property --dn-text { syntax: "<color>"; inherits: true; initial-value: #e8eef9; }
@property --dn-text-2 { syntax: "<color>"; inherits: true; initial-value: #a3b3cd; }
@property --dn-text-3 { syntax: "<color>"; inherits: true; initial-value: #7f8da6; }
@property --dn-text-soft { syntax: "<color>"; inherits: true; initial-value: #c4d0e4; }
@property --dn-accent { syntax: "<color>"; inherits: true; initial-value: #ff8a3d; }
@property --dn-accent-soft { syntax: "<color>"; inherits: true; initial-value: rgba(255, 138, 61, 0.14); }
@property --dn-accent-text { syntax: "<color>"; inherits: true; initial-value: #ffb27d; }
@property --dn-on-accent { syntax: "<color>"; inherits: true; initial-value: #1a0e02; }
@property --dn-ink { syntax: "<color>"; inherits: true; initial-value: #070d1a; }
@property --dn-ink-2 { syntax: "<color>"; inherits: true; initial-value: #0f1b33; }
@property --dn-on-ink { syntax: "<color>"; inherits: true; initial-value: #f1f5fb; }
@property --dn-focus { syntax: "<color>"; inherits: true; initial-value: #8fb0ff; }
@property --dn-select { syntax: "<color>"; inherits: true; initial-value: #5b9bff; }
@property --dn-select-soft { syntax: "<color>"; inherits: true; initial-value: rgba(91, 155, 255, 0.18); }
@property --dn-rail-from { syntax: "<color>"; inherits: true; initial-value: #0b1220; }
@property --dn-rail-to { syntax: "<color>"; inherits: true; initial-value: #0b1220; }
@property --dn-rail-text { syntax: "<color>"; inherits: true; initial-value: #b6c3da; }
@property --dn-rail-text-2 { syntax: "<color>"; inherits: true; initial-value: #93a4c0; }
@property --dn-rail-text-strong { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --dn-rail-hover-bg { syntax: "<color>"; inherits: true; initial-value: rgba(255, 255, 255, 0.08); }
@property --dn-rail-active-bg { syntax: "<color>"; inherits: true; initial-value: rgba(255, 138, 61, 0.18); }
@property --dn-rail-active-text { syntax: "<color>"; inherits: true; initial-value: #ffb27d; }
@property --dn-topbar-from { syntax: "<color>"; inherits: true; initial-value: #111b2e; }
@property --dn-topbar-to { syntax: "<color>"; inherits: true; initial-value: #111b2e; }
@property --dn-topbar-text { syntax: "<color>"; inherits: true; initial-value: #e8eef9; }
@property --dn-topbar-text-2 { syntax: "<color>"; inherits: true; initial-value: #a3b3cd; }
@property --dn-avatar-bg { syntax: "<color>"; inherits: true; initial-value: #14233f; }
@property --dn-avatar-text { syntax: "<color>"; inherits: true; initial-value: #ffd9bd; }
@property --dn-glow-1 { syntax: "<color>"; inherits: true; initial-value: rgba(255, 138, 61, 0.13); }
@property --dn-glow-2 { syntax: "<color>"; inherits: true; initial-value: rgba(59, 130, 246, 0.12); }

:root {
    color-scheme: var(--dn-color-scheme, dark);

    --dn-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --dn-mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;

    --dn-radius-sm: 8px;
    --dn-radius: 12px;
    --dn-radius-lg: 18px;
    --dn-radius-pill: 999px;

    --dn-topbar-h: 56px;
    --dn-rail-w: 90px;
    --dn-tabbar-h: 62px;
    --dn-content-max: 1240px;

    /* Couleurs du thème (valeurs de base) */
    --dn-bg: #0a1120;
    --dn-bg-from: #0a1120;
    --dn-bg-to: #0a1120;
    --dn-surface: #111b2e;
    --dn-surface-2: #0e1829;
    --dn-surface-3: #17233b;
    --dn-border: #25344f;
    --dn-border-strong: #3a4d70;
    --dn-text: #e8eef9;
    --dn-text-2: #a3b3cd;
    --dn-text-3: #7f8da6;
    --dn-text-soft: #c4d0e4;
    --dn-accent: #ff8a3d;
    --dn-accent-soft: rgba(255, 138, 61, 0.14);
    --dn-accent-text: #ffb27d;
    --dn-on-accent: #1a0e02;     /* texte sur fond d'accent */
    --dn-ink: #070d1a;           /* fonds de marque, bandeaux */
    --dn-ink-2: #0f1b33;
    --dn-on-ink: #f1f5fb;
    --dn-focus: #8fb0ff;
    --dn-select: #5b9bff;        /* sélection sur la carte et dans les listes */
    --dn-select-soft: rgba(91, 155, 255, 0.18);
    --dn-rail-from: #0b1220;     /* menu latéral : dégradé de haut en bas (deux fois la même couleur = uni) */
    --dn-rail-to: #0b1220;
    --dn-rail-text: #b6c3da;
    --dn-rail-text-2: #93a4c0;
    --dn-rail-text-strong: #ffffff;
    --dn-rail-hover-bg: rgba(255, 255, 255, 0.08);
    --dn-rail-active-bg: rgba(255, 138, 61, 0.18);
    --dn-rail-active-text: #ffb27d;
    --dn-topbar-from: #111b2e;   /* barre du haut : dégradé de gauche à droite */
    --dn-topbar-to: #111b2e;
    --dn-topbar-text: #e8eef9;
    --dn-topbar-text-2: #a3b3cd;
    --dn-avatar-bg: #14233f;
    --dn-avatar-text: #ffd9bd;
    --dn-glow-1: rgba(255, 138, 61, 0.13);   /* halos du fond des pages de connexion */
    --dn-glow-2: rgba(59, 130, 246, 0.12);

    /* Autres : texte sur les états pleins, signaux de supervision */
    --dn-on-ok: #04170c;
    --dn-on-bad: #1f0606;

    --dn-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --dn-shadow-2: 0 4px 14px rgba(0, 0, 0, 0.45);
    --dn-shadow-3: 0 14px 36px rgba(0, 0, 0, 0.6);

    /* États de supervision (les mêmes teintes que les bonshommes de la carte) */
    --dn-state-waiting: #ff6b6b;
    --dn-state-inplace: #3ddc84;
    --dn-state-problem: #fbbf24;
    --dn-state-waiting-bg: rgba(255, 107, 107, 0.14);
    --dn-state-inplace-bg: rgba(61, 220, 132, 0.14);
    --dn-state-problem-bg: rgba(251, 191, 36, 0.16);

    /* Types de points (mêmes couleurs que js/diane-map.js) */
    --dn-kind-signaler: #b30000;
    --dn-kind-barrier: #00a7c4;
    --dn-kind-cone: #f97316;
    --dn-kind-driveway: #14b8a6;
    --dn-kind-parking: #6366f1;
    --dn-kind-roundabout: #3b82f6;
    --dn-kind-levelcrossing: #ef4444;
    --dn-kind-custom: #a855f7;
    --dn-kind-ads: #0ea5e9;
}

/* ---------- socle ---------- */

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--dn-bg); scrollbar-gutter: stable; }   /* la place de l'ascenseur est toujours réservée : les pages courtes et longues ne se décalent plus */
/* Pages sans session (connexion, invitation) : pas de place réservée. Leur barre de marque va jusqu'au bord droit, une bande vide à côté d'elle se verrait ; elles tiennent sur un écran. */
html:has(.dn-public) { scrollbar-gutter: auto; }
/* Application connectée : la place de l'ascenseur reste réservée (les pages ne se décalent pas), mais cette bande est peinte comme le bout droit de la barre du haut,
   sur la hauteur de la barre : elle ne paraît plus coupée. Sous la barre, la bande garde la couleur du fond. */
html:has(.dn-shell) {
    background:
        linear-gradient(color-mix(in srgb, var(--dn-topbar-to) 90%, var(--dn-bg)), color-mix(in srgb, var(--dn-topbar-to) 90%, var(--dn-bg))) top / 100% var(--dn-topbar-h) no-repeat,
        var(--dn-bg);
}

body {
    margin: 0;
    background: linear-gradient(160deg, var(--dn-bg-from), var(--dn-bg-to)) fixed, var(--dn-bg);
    color: var(--dn-text);
    font-family: var(--dn-font);
    -webkit-font-smoothing: antialiased;
}

/* Changement de thème (aperçu, enregistrement, connexion) : les couleurs se fondent au lieu de sauter. js/diane-theme.js pose la classe dn-fade juste avant de les changer. */
html.dn-fade {
    transition: --dn-bg .4s ease,
                --dn-bg-from .4s ease,
                --dn-bg-to .4s ease,
                --dn-surface .4s ease,
                --dn-surface-2 .4s ease,
                --dn-surface-3 .4s ease,
                --dn-border .4s ease,
                --dn-border-strong .4s ease,
                --dn-text .4s ease,
                --dn-text-2 .4s ease,
                --dn-text-3 .4s ease,
                --dn-text-soft .4s ease,
                --dn-accent .4s ease,
                --dn-accent-soft .4s ease,
                --dn-accent-text .4s ease,
                --dn-on-accent .4s ease,
                --dn-ink .4s ease,
                --dn-ink-2 .4s ease,
                --dn-on-ink .4s ease,
                --dn-focus .4s ease,
                --dn-select .4s ease,
                --dn-select-soft .4s ease,
                --dn-rail-from .4s ease,
                --dn-rail-to .4s ease,
                --dn-rail-text .4s ease,
                --dn-rail-text-2 .4s ease,
                --dn-rail-text-strong .4s ease,
                --dn-rail-hover-bg .4s ease,
                --dn-rail-active-bg .4s ease,
                --dn-rail-active-text .4s ease,
                --dn-topbar-from .4s ease,
                --dn-topbar-to .4s ease,
                --dn-topbar-text .4s ease,
                --dn-topbar-text-2 .4s ease,
                --dn-avatar-bg .4s ease,
                --dn-avatar-text .4s ease,
                --dn-glow-1 .4s ease,
                --dn-glow-2 .4s ease;
}

h1:focus { outline: none; } /* FocusOnNavigate place le focus sur le titre : pas de cadre autour */

a { color: inherit; }

/* Focus clavier visible partout (jamais retiré sans remplacement) */
:focus-visible {
    outline: 3px solid var(--dn-focus);
    outline-offset: 2px;
    border-radius: 4px;
}
.mud-button-root:focus-visible, .mud-icon-button:focus-visible { outline-offset: 2px; }

.dn-tnum { font-variant-numeric: tabular-nums; }
.dn-mono { font-family: var(--dn-mono); }
.dn-muted { color: var(--dn-text-2); }

.dn-sr-only {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Lien d'évitement (clavier) */
.dn-skip {
    position: fixed; left: 12px; top: -64px; z-index: 10000;
    background: var(--dn-ink); color: var(--dn-on-ink); padding: 10px 16px; border-radius: var(--dn-radius-sm);
    font-weight: 600; text-decoration: none; transition: top .15s;
}
.dn-skip:focus { top: 12px; }

/* Écran de chargement : tant qu'aucune mise en page n'est affichée (l'application WebAssembly démarre), la marque respire sur le fond sombre.
   Image en data: (autorisée par la CSP), aucune ressource distante. */
body:not(:has(.dn-shell, .dn-public, .dn-field))::after {
    content: ""; position: fixed; inset: 0; z-index: 1; background-color: var(--dn-bg); background-repeat: no-repeat; background-position: center; background-size: 64px;
    background-image: var(--dn-loading-mark, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect width='48' height='48' rx='13' fill='%230b1220'/%3E%3Cpath d='M9.5 33.5c6.5-1 7-13.5 13.5-13.5s7.5 11 15.5 7.5' fill='none' stroke='%23ff8a3d' stroke-width='4.2' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='33.5' r='3.4' fill='%23fff'/%3E%3Ccircle cx='38.5' cy='27.5' r='3.4' fill='%23fff'/%3E%3Ccircle cx='24' cy='12.5' r='3' fill='%23ff8a3d'/%3E%3C/svg%3E"));
    animation: dn-breathe 1.6s ease-in-out infinite;
}
@keyframes dn-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* Erreur non gérée de Blazor : masquée tant qu'il n'y en a pas */
#blazor-error-ui {
    display: none; position: fixed; inset: auto 0 0 0; z-index: 10001;
    background: var(--dn-ink); color: var(--dn-on-ink); padding: 12px 16px; box-shadow: var(--dn-shadow-3);
}
#blazor-error-ui .reload { color: var(--dn-accent-text); font-weight: 700; margin-left: 8px; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 14px; top: 10px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}