/* Styles de La Vigie. MudBlazor porte la base (reset, typo, composants) ; ici l'habillage métier : palette en variables --vigie-*, surfaces en glassmorphism, pastilles à halo pulsé, pipeline de gates, graphes Apex. Deux modes, une seule grille de variables : · :root porte le mode CLAIR (fond #f8fafc, surfaces blanches translucides, textes slate, accents cyan assombris pour tenir le contraste AA) ; · :root.vigie-sombre porte la DA historique de la flotte (fond #020617, surfaces slate, accents #38bdf8→#22d3ee, vert/rouge/ambre vifs). La classe vigie-sombre est posée sur par theme.js avant le premier paint, puis pilotée par ServiceTheme — MudBlazor 9 ne pose lui-même aucune classe sur le DOM (vérifié : il ne réécrit que ses --mud-palette-*). Les déclinaisons translucides d'un accent passent par color-mix() : une seule source de vérité par couleur. */ :root { --vigie-fond: #f8fafc; --vigie-surface-opaque: #ffffff; --vigie-verre-fond: rgba(255, 255, 255, 0.72); --vigie-verre-degrade: linear-gradient(160deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.6)); --vigie-bordure: rgba(15, 23, 42, 0.1); --vigie-bordure-vive: rgba(2, 132, 199, 0.4); --vigie-texte: #0f172a; --vigie-texte-2: #475569; --vigie-texte-3: #64748b; --vigie-accent: #0284c7; --vigie-accent-2: #0891b2; --vigie-accent-contraste: #ffffff; --vigie-ok: #15803d; --vigie-ko: #dc2626; --vigie-attention: #b45309; --vigie-hors-contrat: #7e22ce; --vigie-grille: #e2e8f0; --vigie-pastille-neutre: #94a3b8; --vigie-ombre: rgba(15, 23, 42, 0.08); --vigie-ombre-forte: rgba(15, 23, 42, 0.16); --vigie-halo-1: rgba(2, 132, 199, 0.07); --vigie-halo-2: rgba(8, 145, 178, 0.05); --vigie-badge-fond: rgba(15, 23, 42, 0.04); --vigie-champ-fond: rgba(15, 23, 42, 0.03); --vigie-scrollbar: #cbd5e1; --vigie-ttfb-ombre: none; /* Terminal des logs CI : en clair, un gris très pâle plutôt qu'un faux terminal noir — un pavé sombre au milieu d'une page claire fatigue et jure avec le reste de la DA. Le contraste vient du texte, pas du fond. */ --vigie-terminal-fond: #f1f5f9; --vigie-terminal-texte: #1e293b; --vigie-terminal-gouttiere: #e2e8f0; --vigie-terminal-numero: #94a3b8; --vigie-terminal-survol: rgba(15, 23, 42, 0.04); --vigie-terminal-surlignage: #fde68a; --vigie-terminal-surlignage-actif: #fb923c; --vigie-rayon: 16px; --vigie-police: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --vigie-police-mono: ui-monospace, 'Cascadia Mono', 'SF Mono', Consolas, monospace; --vigie-transition: 200ms ease; } :root.vigie-sombre { --vigie-fond: #020617; --vigie-surface-opaque: #0f172a; --vigie-verre-fond: rgba(15, 23, 42, 0.45); --vigie-verre-degrade: linear-gradient(160deg, rgba(15, 23, 42, 0.72), rgba(15, 23, 42, 0.5)); --vigie-bordure: rgba(148, 163, 184, 0.12); --vigie-bordure-vive: rgba(56, 189, 248, 0.35); --vigie-texte: #e2e8f0; --vigie-texte-2: #94a3b8; --vigie-texte-3: #64748b; --vigie-accent: #38bdf8; --vigie-accent-2: #22d3ee; --vigie-accent-contraste: #020617; --vigie-ok: #22c55e; --vigie-ko: #ef4444; --vigie-attention: #f59e0b; --vigie-hors-contrat: #a855f7; --vigie-grille: #1e293b; --vigie-pastille-neutre: #475569; --vigie-ombre: rgba(2, 6, 23, 0.35); --vigie-ombre-forte: rgba(2, 6, 23, 0.55); --vigie-halo-1: rgba(56, 189, 248, 0.08); --vigie-halo-2: rgba(34, 211, 238, 0.06); --vigie-badge-fond: rgba(2, 6, 23, 0.55); --vigie-champ-fond: rgba(2, 6, 23, 0.65); --vigie-scrollbar: #334155; --vigie-ttfb-ombre: 0 2px 10px rgba(2, 6, 23, 0.8); /* En sombre, le terminal est légèrement PLUS clair que le fond de page (#020617) : il se lit comme une surface posée dessus, pas comme un trou. */ --vigie-terminal-fond: #0b1220; --vigie-terminal-texte: #cbd5e1; --vigie-terminal-gouttiere: #172033; --vigie-terminal-numero: #475569; --vigie-terminal-survol: rgba(148, 163, 184, 0.07); --vigie-terminal-surlignage: #a16207; --vigie-terminal-surlignage-actif: #f97316; } html, body { font-family: var(--vigie-police); background: var(--vigie-fond); } /* MudBlazor fige sa propre pile de polices : on aligne tout sur la nôtre. */ .mud-typography, .mud-button-root, .mud-input, .mud-table, .mud-chip, .mud-breadcrumbs { font-family: var(--vigie-police) !important; } h1:focus { outline: none; } /* Scrollbar discrète, assortie au mode. Le !important prend le pas sur la couleur que MudBlazor pose globalement. */ * { scrollbar-width: thin; scrollbar-color: var(--vigie-scrollbar) transparent !important; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--vigie-scrollbar); border-radius: 8px; border: 2px solid var(--vigie-fond); } ::-webkit-scrollbar-track { background: transparent; } .vigie-main { min-height: 100dvh; display: flex; flex-direction: column; /* Halos très diffus aux angles : donnent de la profondeur au verre. */ background: radial-gradient(60rem 40rem at 85% -10%, var(--vigie-halo-1), transparent 60%), radial-gradient(50rem 35rem at -10% 110%, var(--vigie-halo-2), transparent 60%), var(--vigie-fond); color: var(--vigie-texte); } /* Conteneur fluide : le contenu pousse le pied de page en bas d'écran. */ .vigie-conteneur { flex: 1 1 auto; width: 100%; } /* Pleine largeur en desktop : pas de max-width étriqué, un padding latéral qui respire avec le viewport. */ .vigie-page { padding: 1.25rem clamp(1rem, 2.5vw, 2.75rem) 2.5rem; animation: vigie-apparition 240ms ease-out; } @keyframes vigie-apparition { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } /* --- AppBar ----------------------------------------------------------------- */ /* Barre fixe translucide : le verre de la flotte, tendu sur toute la largeur. Le !important neutralise l'AppbarBackground opaque du thème MudBlazor. */ .vigie-appbar { background: color-mix(in srgb, var(--vigie-surface-opaque) 62%, transparent) !important; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid var(--vigie-bordure); color: var(--vigie-texte) !important; } .vigie-appbar .mud-toolbar { gap: 0.4rem; } .vigie-appbar-titre { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; color: var(--vigie-texte); text-decoration: none; margin-right: 1rem; white-space: nowrap; } .vigie-appbar-titre:hover .vigie-degrade { filter: brightness(1.15); } .vigie-appbar .mud-icon-button { color: var(--vigie-texte-2); } .vigie-appbar .mud-icon-button:hover { color: var(--vigie-texte); } /* Menu de navigation : Flotte, codes des sites en mono, liens externes. La route courante est marquée (fond et liseré accent). */ .vigie-nav { display: flex; align-items: center; gap: 0.15rem; min-width: 0; margin-right: 0.75rem; } .vigie-nav-lien { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--vigie-texte-2); text-decoration: none; font-size: 0.85rem; padding: 0.3rem 0.6rem; border-radius: 8px; border: 1px solid transparent; white-space: nowrap; transition: color var(--vigie-transition), background-color var(--vigie-transition); } .vigie-nav-lien:hover { color: var(--vigie-texte); background-color: color-mix(in srgb, var(--vigie-texte) 7%, transparent); } .vigie-nav-lien:focus-visible { outline: 2px solid var(--vigie-accent); outline-offset: 1px; } .vigie-nav-actif { color: var(--vigie-accent); background-color: color-mix(in srgb, var(--vigie-accent) 10%, transparent); border-color: color-mix(in srgb, var(--vigie-accent) 28%, transparent); } .vigie-nav-code { font-family: var(--vigie-police-mono); font-size: 0.78rem; } .vigie-nav-sep { width: 1px; height: 1rem; background: var(--vigie-bordure); margin: 0 0.35rem; flex-shrink: 0; } .vigie-nav-ico { font-size: 0.8rem !important; width: 0.8rem; height: 0.8rem; opacity: 0.7; } /* Burger : n'existe qu'en étroit, quand le menu inline est replié. */ .vigie-burger { display: none !important; } @media (max-width: 1100px) { .vigie-nav { display: none; } .vigie-burger { display: inline-flex !important; } .vigie-appbar-titre { margin-right: 0.4rem; } } /* Tiroir de navigation mobile : même verre que l'AppBar. */ .vigie-tiroir { background: color-mix(in srgb, var(--vigie-surface-opaque) 88%, transparent) !important; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-right: 1px solid var(--vigie-bordure); } .vigie-tiroir-marque { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; padding: 1.1rem 1rem 0.8rem; } .vigie-tiroir-separateur { margin: 0.5rem 0; } .vigie-tiroir .mud-nav-link { white-space: nowrap; } /* Pastilles d'état par famille surveillée : icône distincte + couleur du niveau. Contrairement aux anciennes chips de collecteurs, elles restent VISIBLES en mobile — c'est là qu'on regarde l'en-tête en premier. */ .vigie-pastilles-etat { display: flex; align-items: center; flex-wrap: nowrap; gap: 0.35rem; min-width: 0; } .vigie-pastille-etat { display: inline-flex; align-items: center; gap: 0.35rem; font: inherit; font-size: 0.75rem; padding: 0.2rem 0.6rem; border-radius: 999px; border: 1px solid var(--vigie-bordure); background: color-mix(in srgb, var(--vigie-surface-opaque) 55%, transparent); color: var(--vigie-texte-2); white-space: nowrap; cursor: pointer; transition: border-color var(--vigie-transition), background-color var(--vigie-transition); } .vigie-pastille-etat:focus-visible { outline: 2px solid var(--vigie-accent); outline-offset: 1px; } /* L'icône hérite de la couleur du niveau (fill: currentColor côté MudBlazor). */ .vigie-pastille-etat .mud-icon-root { font-size: 1.05rem !important; width: 1.05rem; height: 1.05rem; flex-shrink: 0; } .vigie-pastille-etat-ok { color: var(--vigie-ok); border-color: color-mix(in srgb, var(--vigie-ok) 35%, transparent); background: color-mix(in srgb, var(--vigie-ok) 8%, transparent); } .vigie-pastille-etat-attention { color: var(--vigie-attention); border-color: color-mix(in srgb, var(--vigie-attention) 45%, transparent); background: color-mix(in srgb, var(--vigie-attention) 10%, transparent); } .vigie-pastille-etat-critique { color: var(--vigie-ko); border-color: color-mix(in srgb, var(--vigie-ko) 50%, transparent); background: color-mix(in srgb, var(--vigie-ko) 12%, transparent); } .vigie-pastille-etat-attente { color: var(--vigie-texte-3); border-color: var(--vigie-bordure); background: var(--vigie-badge-fond); } /* Un niveau critique respire : le halo pulsé attire l'œil sans clignoter. */ .vigie-pastille-etat-critique { animation: vigie-pastille-alerte 2.4s ease-in-out infinite; } @keyframes vigie-pastille-alerte { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--vigie-ko) 30%, transparent); } 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--vigie-ko) 0%, transparent); } } /* Panneau de détail d'une pastille, déployé au clic/tap. Il vit dans l'AppBar, dont le backdrop-filter fait office de bloc conteneur pour le positionnement fixe : « top » se compte donc depuis le haut de la barre, ce qui tombe juste. Le voile prend 100vw/100vh explicitement pour couvrir la page entière malgré ce bloc conteneur réduit à la barre. */ .vigie-appbar, .vigie-appbar .mud-toolbar { overflow: visible; } .vigie-pastille-voile { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1200; } /* Surface OPAQUE, pas le verre maison : le panneau est un enfant de l'AppBar, qui a déjà un backdrop-filter — le flou imbriqué n'a plus rien à flouter et la page transparaissait à travers le texte. */ .vigie-pastille-panneau { position: fixed; top: 4rem; right: 0.6rem; width: min(22rem, calc(100vw - 1.2rem)); z-index: 1201; padding: 0.85rem 1rem; display: flex; flex-direction: column; gap: 0.5rem; background: var(--vigie-surface-opaque); border: 1px solid var(--vigie-bordure); border-radius: var(--vigie-rayon); color: var(--vigie-texte); white-space: normal; box-shadow: 0 14px 34px var(--vigie-ombre-forte); animation: vigie-apparition 160ms ease both; } .vigie-pastille-panneau-tete { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; } .vigie-pastille-panneau-titre { font-weight: 700; font-size: 0.95rem; } .vigie-pastille-panneau-incidents { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; } .vigie-pastille-panneau-incidents li { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.3rem; font-size: 0.82rem; line-height: 1.35; overflow-wrap: anywhere; } .vigie-pastille-panneau-pied { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; } .vigie-pastille-panneau-lien { margin-left: auto; color: var(--vigie-accent); text-decoration: none; font-size: 0.78rem; } .vigie-pastille-panneau-lien:hover { text-decoration: underline; } @media (max-width: 1250px) { /* Sous 1250px (menu + pastilles se disputent la place), on garde l'icône seule : le libellé vit dans le tooltip (survol) et le panneau (tap). */ .vigie-pastille-etat-nom { display: none; } .vigie-pastille-etat { padding: 0.2rem 0.38rem; } } @media (max-width: 480px) { /* Téléphone : cinq pastilles + burger + thème + déconnexion tiennent en 380 px à condition de resserrer et de laisser tomber le mot « La Vigie » (la tour 🗼 reste, elle suffit à identifier la barre). */ .vigie-pastilles-etat { gap: 0.2rem; } .vigie-pastille-etat { padding: 0.2rem 0.28rem; } .vigie-pastille-etat .mud-icon-root { font-size: 0.95rem !important; width: 0.95rem; height: 0.95rem; } .vigie-appbar-titre .vigie-degrade { display: none; } .vigie-appbar-titre { margin-right: 0.2rem; } /* L'AppBar mesure 56 px sous 600 px : le panneau se recale dessous. */ .vigie-pastille-panneau { top: 3.6rem; } } /* --- Utilitaires ----------------------------------------------------------- */ /* Surface « verre » : translucide, floutée, liseré discret. Le !important neutralise le background-color opaque que MudPaper pose depuis le thème. */ .vigie-verre { background-color: var(--vigie-verre-fond) !important; background-image: var(--vigie-verre-degrade); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--vigie-bordure); border-radius: var(--vigie-rayon); box-shadow: 0 8px 24px var(--vigie-ombre); } /* Titre en dégradé : l'émoji reste hors du span (le clip le rendrait invisible). */ .vigie-degrade { background-image: linear-gradient(90deg, var(--vigie-accent), var(--vigie-accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .vigie-tabulaire { font-variant-numeric: tabular-nums; } .vigie-entete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.5rem; } .vigie-entete-site { align-items: flex-start; flex-direction: column; gap: 0.15rem; margin-bottom: 1.1rem; } .vigie-titre { font-size: 1.6rem; margin: 0; letter-spacing: -0.02em; } /* Kicker façon invite de terminal : le contexte de la vue en une ligne mono. */ .vigie-kicker { margin: 0 0 0.2rem; font-family: var(--vigie-police-mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--vigie-texte-3); } /* Fil d'Ariane compact (vue site). */ .vigie-fil { padding: 0; font-size: 0.8rem; } .vigie-fil .mud-breadcrumb-item { color: var(--vigie-texte-3); } .vigie-fil .mud-breadcrumb-separator { color: var(--vigie-texte-3); margin: 0 0.35rem; } .vigie-texte-atone { color: var(--vigie-texte-3); font-size: 0.85rem; } .vigie-deconnexion { margin: 0; display: flex; align-items: center; } .vigie-mono { font-family: var(--vigie-police-mono); } .vigie-horodatage { cursor: help; text-decoration: underline dotted color-mix(in srgb, var(--vigie-texte-3) 55%, transparent); text-underline-offset: 3px; } /* Badge mono (version, sha) : petit cartouche technique, icône commit en tête. */ .vigie-badge-mono { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--vigie-police-mono); font-size: 0.78rem; color: var(--vigie-texte-2); background: var(--vigie-badge-fond); border: 1px solid var(--vigie-bordure); border-radius: 8px; padding: 0.14rem 0.5rem; white-space: nowrap; } .vigie-badge-ico { font-size: 0.95rem !important; width: 0.95rem; height: 0.95rem; color: var(--vigie-texte-3); flex-shrink: 0; } /* Chip maison (stack, code) : pas de bouton MudChip dans une carte cliquable. */ .vigie-chip { font-size: 0.72rem; color: var(--vigie-texte-2); border: 1px solid var(--vigie-bordure); border-radius: 999px; padding: 0.1rem 0.55rem; white-space: nowrap; letter-spacing: 0.02em; } .vigie-chip-attention { color: var(--vigie-attention); border-color: color-mix(in srgb, var(--vigie-attention) 45%, transparent); background: color-mix(in srgb, var(--vigie-attention) 8%, transparent); } /* --- Pastilles de statut (sites et collecteurs) --------------------------- */ .vigie-pastille-statut { position: relative; width: 0.7rem; height: 0.7rem; border-radius: 50%; display: inline-block; flex-shrink: 0; } /* Halo pulsé : un anneau qui s'étend et s'éteint autour de la pastille. */ .vigie-statut-up, .vigie-statut-down { animation: none; } .vigie-statut-up::after, .vigie-statut-down::after { content: ""; position: absolute; inset: 0; border-radius: 50%; animation: vigie-halo 2.4s ease-out infinite; } .vigie-statut-up { background: var(--vigie-ok); box-shadow: 0 0 8px color-mix(in srgb, var(--vigie-ok) 70%, transparent); } .vigie-statut-up::after { box-shadow: 0 0 0 2px color-mix(in srgb, var(--vigie-ok) 50%, transparent); } .vigie-statut-down { background: var(--vigie-ko); box-shadow: 0 0 8px color-mix(in srgb, var(--vigie-ko) 70%, transparent); } .vigie-statut-down::after { box-shadow: 0 0 0 2px color-mix(in srgb, var(--vigie-ko) 55%, transparent); animation-duration: 1.2s; } .vigie-statut-inconnu { background: var(--vigie-pastille-neutre); } @keyframes vigie-halo { 0% { transform: scale(0.7); opacity: 0.9; } 70%, 100% { transform: scale(2); opacity: 0; } } /* --- Cartes de la vue flotte ---------------------------------------------- */ .vigie-carte { padding: 1.1rem 1.2rem 1rem; display: flex; flex-direction: column; gap: 0.75rem; height: 100%; cursor: pointer; position: relative; overflow: hidden; transition: transform var(--vigie-transition), border-color var(--vigie-transition), box-shadow var(--vigie-transition); } /* Liseré dégradé qui s'allume au survol. */ .vigie-carte::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, var(--vigie-accent), var(--vigie-accent-2)); opacity: 0; transition: opacity var(--vigie-transition); } .vigie-carte:hover, .vigie-carte:focus-visible { transform: translateY(-2px); border-color: var(--vigie-bordure-vive); box-shadow: 0 14px 34px var(--vigie-ombre-forte); } .vigie-carte:hover::before, .vigie-carte:focus-visible::before { opacity: 1; } /* Focus clavier : un vrai anneau visible, pas seulement l'élévation. */ .vigie-carte:focus-visible { outline: 2px solid var(--vigie-accent); outline-offset: 2px; } .vigie-carte-entete { display: flex; align-items: center; gap: 0.55rem; min-width: 0; } .vigie-carte-nom { font-weight: 600; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vigie-carte-code { color: var(--vigie-texte-3); font-size: 0.72rem; border: 1px solid var(--vigie-bordure); padding: 0.1rem 0.5rem; border-radius: 999px; margin-left: auto; } .vigie-carte-version { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; min-height: 1.5rem; } /* Métrique héro : la grande valeur TTFB en haut, la sparkline en fond de la moitié basse de la zone — la courbe ne traverse jamais le chiffre. */ .vigie-carte-latence { position: relative; min-height: 92px; display: flex; align-items: flex-start; } .vigie-carte-spark { position: absolute; left: 0; right: 0; bottom: 0; height: 56%; opacity: 0.9; } .vigie-ttfb-bloc { position: relative; display: flex; flex-direction: column; gap: 0.1rem; pointer-events: none; /* le tooltip de la sparkline reste accessible dessous. */ } .vigie-ttfb { font-size: 1.9rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; text-shadow: var(--vigie-ttfb-ombre); } .vigie-ttfb-unite { font-size: 0.85rem; font-weight: 500; color: var(--vigie-texte-2); margin-left: 0.3rem; letter-spacing: 0; } .vigie-ttfb-libelle { font-size: 0.68rem; color: var(--vigie-texte-3); text-transform: uppercase; letter-spacing: 0.09em; } .vigie-spark { width: 100%; height: 100%; } .vigie-spark-squelette { border-radius: 10px; opacity: 0.5; } .vigie-carte-horodatage { display: flex; align-items: center; } .vigie-carte-pied { display: flex; justify-content: space-between; align-items: center; margin-top: auto; font-size: 0.85rem; padding-top: 0.6rem; border-top: 1px solid var(--vigie-bordure); } /* Grand écran : les tuiles occupent l'espace — padding, typo des métriques et sparkline plus généreux, la vue reste dense en information. */ @media (min-width: 1280px) { .vigie-carte { padding: 1.5rem 1.6rem 1.25rem; gap: 0.95rem; } .vigie-carte-nom { font-size: 1.08rem; } .vigie-ttfb { font-size: 2.6rem; } .vigie-carte-latence { min-height: 150px; } .vigie-hero-valeur { font-size: 2.4rem; } .vigie-titre { font-size: 1.85rem; } } /* --- Pipeline des gates ----------------------------------------------------- */ /* Compact (cartes) : segments connectés façon barre de progression segmentée. */ .vigie-gates { display: flex; align-items: center; gap: 4px; width: 100%; } .vigie-gates-compactes .vigie-gate-item { display: flex; flex: 1 1 0; min-width: 0; } .vigie-gates-compactes .vigie-gate { height: 6px; flex: 1 1 0; border-radius: 4px; } .vigie-gate-success { background: var(--vigie-ok); } .vigie-gate-failure { background: var(--vigie-ko); } .vigie-gate-encours { background: var(--vigie-attention); animation: vigie-pulse 1.2s ease-in-out infinite; } .vigie-gate-pending { background: transparent; border: 1px solid var(--vigie-pastille-neutre); } .vigie-gate-skipped { background: repeating-linear-gradient( 45deg, color-mix(in srgb, var(--vigie-texte-3) 45%, var(--vigie-grille)) 0 4px, var(--vigie-grille) 4px 8px); color: var(--vigie-texte-2); } /* Step hors contrat : signalé en violet, il ne devrait pas exister. */ .vigie-gate-inconnue { background: var(--vigie-hors-contrat); } /* Grande (vue site) : stepper horizontal, nœuds reliés par des connecteurs. */ .vigie-gates-grandes { align-items: stretch; gap: 0; row-gap: 1rem; flex-wrap: wrap; } .vigie-gates-grandes .vigie-gate-item { flex: 1 1 0; min-width: 6.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.45rem; position: relative; text-align: center; } .vigie-gates-grandes .vigie-gate { width: 1.15rem; height: 1.15rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; line-height: 1; box-sizing: border-box; z-index: 1; } .vigie-gates-grandes .vigie-gate-success { box-shadow: 0 0 0 4px color-mix(in srgb, var(--vigie-ok) 12%, transparent); } .vigie-gates-grandes .vigie-gate-failure { box-shadow: 0 0 0 4px color-mix(in srgb, var(--vigie-ko) 12%, transparent); } .vigie-gates-grandes .vigie-gate-encours { box-shadow: 0 0 0 4px color-mix(in srgb, var(--vigie-attention) 14%, transparent); } /* Connecteur : trait qui relie chaque nœud au précédent. */ .vigie-gates-grandes .vigie-gate-item::before { content: ""; position: absolute; top: calc(0.575rem - 1px); left: calc(-50% + 1.1rem); right: calc(50% + 1.1rem); height: 2px; background: var(--vigie-grille); } .vigie-gates-grandes .vigie-gate-item:first-child::before { display: none; } .vigie-gate-nom { font-size: 0.8rem; color: var(--vigie-texte); } .vigie-gate-duree { color: var(--vigie-texte-3); font-size: 0.72rem; font-variant-numeric: tabular-nums; } .vigie-gates-vide { color: var(--vigie-texte-3); font-size: 0.85rem; } @media (max-width: 640px) { /* Le stepper passe en liste verticale : nœud + nom + durée sur une ligne. */ .vigie-gates-grandes { flex-direction: column; align-items: stretch; gap: 0.55rem; } .vigie-gates-grandes .vigie-gate-item { flex-direction: row; text-align: left; min-width: 0; gap: 0.6rem; } .vigie-gates-grandes .vigie-gate-item::before { display: none; } .vigie-gates-grandes .vigie-gate-duree { margin-left: auto; } } @keyframes vigie-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } /* --- Vue site --------------------------------------------------------------- */ .vigie-hero { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.25rem; padding: 1.4rem 1.6rem; margin-bottom: 1.75rem; } .vigie-hero-identite { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; } .vigie-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; font-size: 0.85rem; } .vigie-hero-mesures { display: flex; flex-wrap: wrap; gap: 2rem; } .vigie-hero-mesure { display: flex; flex-direction: column; gap: 0.15rem; min-width: 5.5rem; } .vigie-hero-valeur { font-size: 1.9rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .vigie-hero-valeur .vigie-ttfb-unite { font-size: 0.9rem; } .vigie-hero-libelle { font-size: 0.68rem; color: var(--vigie-texte-3); text-transform: uppercase; letter-spacing: 0.09em; } .vigie-hero-statut-up { color: var(--vigie-ok); } .vigie-hero-statut-down { color: var(--vigie-ko); } .vigie-hero-statut-inconnu { color: var(--vigie-texte-3); } .vigie-section { margin-bottom: 2rem; } .vigie-section h2 { font-size: 0.85rem; color: var(--vigie-texte-2); margin: 0 0 0.8rem; text-transform: uppercase; letter-spacing: 0.09em; font-weight: 600; } .vigie-panneau { padding: 1.2rem 1.4rem; } .vigie-pipeline-meta { margin: 0 0 1rem; } /* Table des runs : MudTable posé sur verre, lignes au survol. */ .vigie-table-defilement { overflow-x: auto; } .vigie-table-runs { background-color: transparent !important; min-width: 640px; } .vigie-table-runs .mud-table-container { background: transparent; } .vigie-table-runs th { color: var(--vigie-texte-3) !important; font-size: 0.72rem !important; text-transform: uppercase; letter-spacing: 0.08em; border-bottom: 1px solid var(--vigie-bordure) !important; white-space: nowrap; } .vigie-table-runs td { border-bottom: 1px solid var(--vigie-bordure) !important; font-size: 0.85rem; white-space: nowrap; } .vigie-table-runs tr:last-child td { border-bottom: none !important; } .vigie-table-runs .mud-table-row:hover { background: color-mix(in srgb, var(--vigie-accent) 5%, transparent) !important; } /* Chips de conclusion des runs. */ .vigie-conclusion { display: inline-block; padding: 0.12rem 0.6rem; border-radius: 999px; font-size: 0.75rem; border: 1px solid; line-height: 1.4; } .vigie-conclusion-success { color: var(--vigie-ok); border-color: color-mix(in srgb, var(--vigie-ok) 35%, transparent); background: color-mix(in srgb, var(--vigie-ok) 8%, transparent); } .vigie-conclusion-failure, .vigie-conclusion-cancelled, .vigie-conclusion-timed_out { color: var(--vigie-ko); border-color: color-mix(in srgb, var(--vigie-ko) 35%, transparent); background: color-mix(in srgb, var(--vigie-ko) 8%, transparent); } .vigie-conclusion-in_progress, .vigie-conclusion-queued { color: var(--vigie-attention); border-color: color-mix(in srgb, var(--vigie-attention) 35%, transparent); background: color-mix(in srgb, var(--vigie-attention) 8%, transparent); } /* Graphe de latence ApexCharts. */ .vigie-graphe-conteneur { padding: 1rem 1rem 0.4rem; } .vigie-graphe-squelette { border-radius: var(--vigie-rayon); opacity: 0.5; } /* Panneau de dérive : vert aligné, ambre en dérive. */ .vigie-derive { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.1rem 1.3rem; font-size: 0.9rem; border-left: 3px solid var(--vigie-ok); } .vigie-derive-active { border-color: color-mix(in srgb, var(--vigie-attention) 45%, transparent); border-left-color: var(--vigie-attention); background-image: linear-gradient(160deg, color-mix(in srgb, var(--vigie-attention) 8%, transparent), var(--vigie-verre-fond)); } .vigie-derive-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; } .vigie-derive-libelle { color: var(--vigie-texte-2); min-width: 15rem; } .vigie-derive-verdict { margin-top: 0.2rem; color: var(--vigie-texte); } .vigie-derive-active .vigie-derive-verdict { color: var(--vigie-attention); } /* --- Habillage ApexCharts (tooltips assortis, fond transparent) -------------- */ .apexcharts-canvas { background: transparent !important; } .apexcharts-tooltip.apexcharts-theme-dark, .apexcharts-tooltip.apexcharts-theme-light { background: color-mix(in srgb, var(--vigie-surface-opaque) 96%, transparent) !important; border: 1px solid var(--vigie-bordure) !important; border-radius: 10px; box-shadow: 0 8px 24px var(--vigie-ombre-forte) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-family: var(--vigie-police); color: var(--vigie-texte); } .apexcharts-tooltip-title { background: transparent !important; border-bottom: 1px solid var(--vigie-bordure) !important; font-family: var(--vigie-police) !important; } /* --- Pied de page ------------------------------------------------------------ */ /* Même verre que l'AppBar : la « bande développeur » de la flotte, version superviseur — signature, pill de build, liens externes. */ .vigie-pied { border-top: 1px solid var(--vigie-bordure); background: color-mix(in srgb, var(--vigie-surface-opaque) 62%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.9rem 2rem; padding: 1.1rem clamp(1rem, 2.5vw, 2.75rem); font-size: 0.85rem; color: var(--vigie-texte-2); } .vigie-pied-bloc { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; } .vigie-pied-signature { flex-direction: column; align-items: flex-start; gap: 0.25rem; } .vigie-pied-signature strong { color: var(--vigie-texte); font-weight: 600; } .vigie-pied-stack { font-family: var(--vigie-police-mono); font-size: 0.72rem; letter-spacing: 0.03em; color: var(--vigie-texte-3); } /* Les pills de build sont des liens : même cartouche, survol accentué. */ .vigie-pied-build a.vigie-badge-mono { text-decoration: none; transition: border-color var(--vigie-transition), color var(--vigie-transition); } .vigie-pied-build a.vigie-badge-mono:hover { border-color: var(--vigie-bordure-vive); color: var(--vigie-texte); } .vigie-pied-liens { gap: 1rem; } .vigie-pied-liens a { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--vigie-texte-2); text-decoration: none; transition: color var(--vigie-transition); } .vigie-pied-liens a:hover { color: var(--vigie-accent); } @media (max-width: 640px) { /* En étroit, le pied s'empile et se centre. */ .vigie-pied { flex-direction: column; align-items: center; text-align: center; } .vigie-pied-signature { align-items: center; } } /* --- KPI agrégés (cartes et vue site) --------------------------------------- */ /* Couleurs de valeur partagées (taux CI, etc.) : mêmes teintes que les pastilles. */ .vigie-val-ok { color: var(--vigie-ok); } .vigie-val-attention { color: var(--vigie-attention); } .vigie-val-ko { color: var(--vigie-ko); } .vigie-val-inconnu { color: var(--vigie-texte-3); } /* Bandeau KPI compact des cartes : dispo, p95, visiteurs, TLS sur une ligne. */ .vigie-carte-kpi { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.1rem; padding-top: 0.2rem; } .vigie-kpi-mesure { display: flex; flex-direction: column; gap: 0.05rem; } .vigie-kpi-valeur { font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; } .vigie-kpi-libelle { font-size: 0.62rem; color: var(--vigie-texte-3); text-transform: uppercase; letter-spacing: 0.08em; } /* Badge de disponibilité : gros pourcentage coloré + fenêtre en dessous. */ .vigie-uptime { display: flex; flex-direction: column; gap: 0.05rem; } .vigie-uptime-valeur { font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; } .vigie-uptime-libelle { font-size: 0.62rem; color: var(--vigie-texte-3); text-transform: uppercase; letter-spacing: 0.08em; } .vigie-uptime-ok .vigie-uptime-valeur { color: var(--vigie-ok); } .vigie-uptime-attention .vigie-uptime-valeur { color: var(--vigie-attention); } .vigie-uptime-ko .vigie-uptime-valeur { color: var(--vigie-ko); } .vigie-uptime-inconnu .vigie-uptime-valeur { color: var(--vigie-texte-3); } /* Chip d'échéance TLS : cartouche coloré par niveau. */ .vigie-chip-tls { display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--vigie-police-mono); font-size: 0.72rem; padding: 0.12rem 0.5rem; border-radius: 999px; border: 1px solid var(--vigie-bordure); white-space: nowrap; } .vigie-chip-tls .vigie-badge-ico { font-size: 0.8rem !important; width: 0.8rem; height: 0.8rem; } .vigie-chip-tls-ok { color: var(--vigie-texte-2); } .vigie-chip-tls-attention { color: var(--vigie-attention); border-color: color-mix(in srgb, var(--vigie-attention) 45%, transparent); background: color-mix(in srgb, var(--vigie-attention) 8%, transparent); } .vigie-chip-tls-ko { color: var(--vigie-ko); border-color: color-mix(in srgb, var(--vigie-ko) 45%, transparent); background: color-mix(in srgb, var(--vigie-ko) 8%, transparent); } /* Mini-sparkline de visiteurs (barres CSS) : posée pleine largeur sous les KPI. */ .vigie-vis-spark { display: flex; align-items: flex-end; gap: 2px; height: 28px; width: 100%; } .vigie-vis-barre { flex: 1 1 0; min-width: 2px; background: linear-gradient(180deg, var(--vigie-accent), var(--vigie-accent-2)); border-radius: 2px 2px 0 0; opacity: 0.85; } /* Panneau KPI de la vue site : groupes titrés, tuiles de valeurs. */ .vigie-kpi-panneau { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; padding: 1.3rem 1.5rem; } .vigie-kpi-groupe { display: flex; flex-direction: column; gap: 0.7rem; min-width: 0; } .vigie-kpi-groupe-titre { font-size: 0.68rem; color: var(--vigie-texte-3); text-transform: uppercase; letter-spacing: 0.09em; font-weight: 600; } .vigie-kpi-uptimes, .vigie-kpi-tuiles { display: flex; flex-wrap: wrap; gap: 1.5rem; } .vigie-kpi-tuile { display: flex; flex-direction: column; gap: 0.15rem; min-width: 4.5rem; } .vigie-kpi-tuile-large { min-width: 9rem; } .vigie-kpi-tuile-valeur { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; letter-spacing: -0.01em; display: inline-flex; align-items: center; gap: 0.4rem; } .vigie-kpi-tuile-libelle { font-size: 0.68rem; color: var(--vigie-texte-3); text-transform: uppercase; letter-spacing: 0.06em; } .vigie-kpi-uptimes .vigie-uptime-valeur { font-size: 1.35rem; } .vigie-visiteurs-entete { display: flex; flex-wrap: wrap; align-items: center; gap: 2rem; margin-bottom: 1rem; } /* Le lien vers le tableau de bord détaillé se pousse en bout de ligne. */ .vigie-lien-analytics { margin-left: auto; font-size: 0.85rem; } /* --- Tableau de bord d'audience (page Analytics) ---------------------------- */ /* Barre de sélection : onglets des sites à gauche, périodes à droite. En étroit elle s'empile et les onglets défilent horizontalement plutôt que de se casser sur quatre rangs. */ .vigie-analytics-barre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; padding: 0.65rem 0.85rem; margin-bottom: 1.5rem; } .vigie-analytics-sites, .vigie-analytics-periodes { display: flex; align-items: center; gap: 0.4rem; min-width: 0; overflow-x: auto; /* Le liseré de focus d'un onglet ne doit pas être rogné par le défilement. */ padding: 2px; } .vigie-onglet { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.8rem; font-size: 0.85rem; color: var(--vigie-texte-2); text-decoration: none; background: var(--vigie-badge-fond); border: 1px solid var(--vigie-bordure); border-radius: 999px; white-space: nowrap; transition: color var(--vigie-transition), border-color var(--vigie-transition); } .vigie-onglet:hover { color: var(--vigie-texte); border-color: var(--vigie-bordure-vive); } .vigie-onglet:focus-visible { outline: 2px solid var(--vigie-accent); outline-offset: 1px; } .vigie-onglet-actif { color: var(--vigie-texte); border-color: var(--vigie-accent); background: color-mix(in srgb, var(--vigie-accent) 12%, transparent); } .vigie-onglet-periode { font-variant-numeric: tabular-nums; } .vigie-onglet-marque { font-size: 0.62rem; padding: 0 0.4rem; } .vigie-analytics-alerte { margin-bottom: 1.5rem; border-radius: var(--vigie-rayon); } /* Cartes de tête : grille auto-ajustée, une par métrique. */ .vigie-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; } .vigie-stat { display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem 1.2rem; } .vigie-stat-libelle { font-size: 0.68rem; color: var(--vigie-texte-3); text-transform: uppercase; letter-spacing: 0.09em; } .vigie-stat-valeur { font-size: 1.9rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .vigie-stat-variation { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.78rem; font-variant-numeric: tabular-nums; cursor: help; } .vigie-stat-fleche { font-size: 1rem !important; width: 1rem; height: 1rem; } .vigie-variation-ok { color: var(--vigie-ok); } .vigie-variation-ko { color: var(--vigie-ko); } .vigie-variation-neutre { color: var(--vigie-texte-3); } /* Grilles de panneaux : deux colonnes pour les classements, trois pour les donuts. Elles retombent à une colonne quand la place manque. */ .vigie-grille-deux { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1rem; } .vigie-grille-trois { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; } .vigie-classement, .vigie-donut, .vigie-carte-monde, .vigie-calendrier { padding: 1rem 1.1rem 0.9rem; min-width: 0; } .vigie-classement-entete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.6rem; } .vigie-classement-titre { font-size: 0.95rem; font-weight: 600; margin: 0; letter-spacing: -0.01em; } .vigie-classement-vide { margin: 0.4rem 0 0.6rem; } .vigie-table-classement { background-color: transparent !important; } .vigie-table-classement .mud-table-container { background: transparent; } .vigie-table-classement th { color: var(--vigie-texte-3) !important; font-size: 0.68rem !important; text-transform: uppercase; letter-spacing: 0.08em; border-bottom: 1px solid var(--vigie-bordure) !important; white-space: nowrap; } .vigie-table-classement td { border-bottom: 1px solid var(--vigie-bordure) !important; font-size: 0.82rem; /* Les colonnes chiffrées ne doivent jamais casser « 49,5 % » en deux lignes. */ white-space: nowrap; } .vigie-table-classement tr:last-child td { border-bottom: none !important; } /* Cellule à jauge : la barre de part vit en fond, le libellé passe devant et se tronque proprement plutôt que d'élargir la table. */ .vigie-classement-cellule { position: relative; max-width: 0; width: 100%; } .vigie-classement-jauge { position: absolute; left: 0; top: 3px; bottom: 3px; border-radius: 4px; background: color-mix(in srgb, var(--vigie-accent) 16%, transparent); } .vigie-classement-etiquette { position: relative; display: block; padding-left: 0.35rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vigie-donut { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; } .vigie-donut .vigie-classement-titre { align-self: flex-start; } .vigie-donut-squelette { margin: 1.2rem auto; opacity: 0.5; } /* Carte du monde : le SVG occupe la largeur, les couleurs viennent du thème. Un fond légèrement contrasté distingue l'océan de la surface de verre. */ .vigie-monde { display: block; width: 100%; height: auto; border-radius: 12px; background: color-mix(in srgb, var(--vigie-accent) 6%, transparent); } .vigie-monde-terres path { fill: color-mix(in srgb, var(--vigie-texte-3) 28%, transparent); stroke: color-mix(in srgb, var(--vigie-texte-3) 45%, transparent); stroke-width: 0.5; stroke-linejoin: round; } /* Les mers intérieures reprennent exactement le fond de la carte : elles « effacent » la terre plutôt que de se dessiner en creux. */ .vigie-monde-mers path { fill: color-mix(in srgb, var(--vigie-accent) 6%, transparent); stroke: none; } .vigie-monde-bulles circle { fill: var(--vigie-accent); stroke: var(--vigie-accent-2); stroke-width: 0.6; } /* Calendrier de fréquentation : défilement horizontal en étroit plutôt qu'un écrasement des cases, qui rendrait les paliers illisibles. */ .vigie-calendrier-defilement { overflow-x: auto; padding-bottom: 0.3rem; } /* Le pas de la grille : une seule variable pour la case et la gouttière, pour que les libellés de mois restent alignés sur les colonnes de semaines. */ .vigie-cal { --vigie-cal-pas: 13px; display: flex; gap: 4px; width: max-content; } .vigie-cal-initiales { display: grid; grid-template-rows: repeat(7, var(--vigie-cal-pas)); align-items: center; /* Décalage vers le bas de la hauteur des libellés de mois : sans lui, les initiales de jours seraient décalées d'une ligne par rapport aux cases. */ padding-top: 1rem; } .vigie-cal-initiales span { font-size: 0.6rem; color: var(--vigie-texte-3); line-height: 1; } .vigie-cal-mois, .vigie-cal-grille { display: grid; grid-auto-flow: column; grid-auto-columns: var(--vigie-cal-pas); } .vigie-cal-mois { height: 1rem; } /* Un nom de mois est plus large qu'une colonne : il déborde à droite, comme sur un calendrier de contributions. */ .vigie-cal-mois span { font-size: 0.6rem; color: var(--vigie-texte-3); white-space: nowrap; line-height: 1; } .vigie-cal-grille { grid-template-rows: repeat(7, var(--vigie-cal-pas)); } .vigie-cal-case { width: calc(var(--vigie-cal-pas) - 3px); height: calc(var(--vigie-cal-pas) - 3px); border-radius: 2px; border: 1px solid color-mix(in srgb, var(--vigie-texte-3) 20%, transparent); cursor: help; } .vigie-cal-pastille { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 2px; border: 1px solid color-mix(in srgb, var(--vigie-texte-3) 20%, transparent); } /* Quatre paliers d'intensité sur l'accent, plus un niveau « aucune visite ». color-mix garde une seule source de vérité : la couleur d'accent du thème. */ .vigie-cal-n0 { fill: color-mix(in srgb, var(--vigie-texte-3) 14%, transparent); background: color-mix(in srgb, var(--vigie-texte-3) 14%, transparent); } .vigie-cal-n1 { fill: color-mix(in srgb, var(--vigie-accent) 28%, transparent); background: color-mix(in srgb, var(--vigie-accent) 28%, transparent); } .vigie-cal-n2 { fill: color-mix(in srgb, var(--vigie-accent) 50%, transparent); background: color-mix(in srgb, var(--vigie-accent) 50%, transparent); } .vigie-cal-n3 { fill: color-mix(in srgb, var(--vigie-accent) 74%, transparent); background: color-mix(in srgb, var(--vigie-accent) 74%, transparent); } .vigie-cal-n4 { fill: var(--vigie-accent); background: var(--vigie-accent); } .vigie-cal-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin-top: 0.7rem; } .vigie-cal-max { margin-left: auto; } @media (max-width: 640px) { .vigie-stat-valeur { font-size: 1.6rem; } .vigie-analytics-barre { flex-direction: column; align-items: stretch; /* nowrap est indispensable ici : en colonne AVEC wrap, la largeur de la ligne se cale sur l'élément le plus large (la liste des sites), et la barre déborde la page au lieu de laisser défiler les onglets. */ flex-wrap: nowrap; } } /* --- Panneau des alertes récentes (vue site) -------------------------------- */ .vigie-alertes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .vigie-alerte { display: flex; gap: 0.8rem; padding: 0.8rem 0.2rem; border-bottom: 1px solid var(--vigie-bordure); } .vigie-alerte:last-child { border-bottom: none; } .vigie-alerte-resolue { opacity: 0.72; } .vigie-alerte-pastille { flex-shrink: 0; width: 0.7rem; height: 0.7rem; border-radius: 50%; margin-top: 0.3rem; } .vigie-alerte-ok { background: var(--vigie-ok); } .vigie-alerte-attention { background: var(--vigie-attention); } .vigie-alerte-ko { background: var(--vigie-ko); } .vigie-alerte-corps { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; } .vigie-alerte-tete { display: flex; align-items: center; gap: 0.6rem; } .vigie-alerte-type { font-weight: 600; font-size: 0.9rem; } .vigie-alerte-etat-active { color: var(--vigie-attention); border-color: color-mix(in srgb, var(--vigie-attention) 45%, transparent); } .vigie-alerte-etat-resolue { color: var(--vigie-ok); border-color: color-mix(in srgb, var(--vigie-ok) 40%, transparent); } .vigie-alerte-message { margin: 0; font-size: 0.85rem; color: var(--vigie-texte-2); white-space: pre-line; word-break: break-word; } .vigie-alerte-meta { margin: 0; } /* --- Visualiseur de logs CI -------------------------------------------------- */ /* En-tête compact du run : identité à gauche, métadonnées techniques dessous. Pas de vigie-hero ici — les logs n'ont pas de mesures à mettre en avant. */ .vigie-logs-entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem 1.2rem; padding: 1rem 1.3rem; margin-bottom: 1.5rem; } .vigie-logs-identite { display: flex; align-items: center; gap: 0.7rem; min-width: 0; } .vigie-logs-identite .vigie-titre { font-size: 1.3rem; } .vigie-logs-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.85rem; } /* Sélecteur de job : des onglets-pastilles, un par job du run. */ .vigie-logs-jobs { display: flex; flex-wrap: wrap; gap: 0.5rem; } .vigie-logs-job { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.42rem 0.85rem; font: inherit; font-size: 0.85rem; color: var(--vigie-texte-2); background: var(--vigie-badge-fond); border: 1px solid var(--vigie-bordure); border-radius: 999px; cursor: pointer; transition: border-color var(--vigie-transition), color var(--vigie-transition); } .vigie-logs-job:hover { color: var(--vigie-texte); border-color: var(--vigie-bordure-vive); } .vigie-logs-job-actif { color: var(--vigie-texte); border-color: var(--vigie-accent); background: color-mix(in srgb, var(--vigie-accent) 10%, transparent); } .vigie-logs-job-pastille { width: 0.55rem; height: 0.55rem; border-radius: 50%; flex-shrink: 0; background: var(--vigie-pastille-neutre); } .vigie-logs-job-success { background: var(--vigie-ok); } .vigie-logs-job-failure, .vigie-logs-job-cancelled, .vigie-logs-job-timed_out { background: var(--vigie-ko); } .vigie-logs-job-in_progress, .vigie-logs-job-queued { background: var(--vigie-attention); } .vigie-logs-job-duree { font-family: var(--vigie-police-mono); font-size: 0.72rem; color: var(--vigie-texte-3); } /* Barre d'outils : recherche à gauche, compteur et navigation, bascules, actions. Elle s'enroule proprement jusqu'en 380 px. Collante sous l'AppBar : un log fait défiler la page, et perdre le champ de recherche et le compteur n/N en cours de lecture est exactement ce qui rend un visualiseur pénible. z-index modeste — l'AppBar (1100) reste au-dessus. */ .vigie-logs-barre { position: sticky; /* Exactement la hauteur de l'AppBar (64 px) : le moindre écart laisserait défiler des lignes de log dans l'interstice, au-dessus de la barre. */ top: 4rem; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; padding: 0.7rem 0.9rem; margin-bottom: 0.9rem; } .vigie-logs-recherche { flex: 1 1 14rem; min-width: 0; margin: 0; } .vigie-logs-navigation, .vigie-logs-actions { display: flex; align-items: center; gap: 0.15rem; } .vigie-logs-bascules { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.6rem; } .vigie-logs-bascules .mud-switch { margin: 0; } .vigie-logs-bascules .mud-switch-label { font-size: 0.8rem; color: var(--vigie-texte-2); } .vigie-logs-compteur { font-family: var(--vigie-police-mono); font-size: 0.78rem; color: var(--vigie-texte-3); min-width: 3.5rem; text-align: right; } .vigie-logs-alerte { margin-bottom: 0.9rem; border-radius: var(--vigie-rayon); } .vigie-logs-squelette { border-radius: var(--vigie-rayon); margin-bottom: 0.9rem; opacity: 0.5; } /* Le terminal lui-même : surface opaque (pas de verre — le texte mono doit rester net), défilement vertical borné, défilement horizontal plutôt que césure pour ne jamais casser une trace d'erreur en deux. */ .vigie-terminal { background: var(--vigie-terminal-fond); color: var(--vigie-terminal-texte); border: 1px solid var(--vigie-bordure); border-radius: var(--vigie-rayon); font-family: var(--vigie-police-mono); font-size: 0.78rem; line-height: 1.55; padding: 0.6rem 0; max-height: 70dvh; overflow: auto; /* Pas d'overscroll-behavior: contain ici — le terminal est plus haut que ce qui reste d'écran sous l'en-tête, et bloquer le chaînage empêcherait la molette d'atteindre le pied de page une fois le log parcouru. */ } .vigie-log-ligne { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0 0.9rem 0 0; min-height: 1.2em; width: max-content; min-width: 100%; } .vigie-log-ligne:hover { background: var(--vigie-terminal-survol); } /* Gouttière des numéros : collée à gauche au défilement horizontal, sinon on perd le repère de ligne dès qu'on suit une trace un peu large. */ .vigie-log-num { position: sticky; left: 0; flex: 0 0 3.5rem; padding: 0 0.55rem 0 0; text-align: right; color: var(--vigie-terminal-numero); background: var(--vigie-terminal-fond); border-right: 1px solid var(--vigie-terminal-gouttiere); user-select: none; } .vigie-log-heure { flex: 0 0 auto; color: var(--vigie-terminal-numero); user-select: none; font-variant-numeric: tabular-nums; } .vigie-log-texte { white-space: pre; /* Indentation des groupes imbriqués : une variable posée en style inline, pour ne pas générer une classe par niveau. */ padding-left: calc(var(--vigie-log-profondeur, 0) * 1.1rem); } .vigie-log-erreur { background: color-mix(in srgb, var(--vigie-ko) 10%, transparent); } .vigie-log-erreur .vigie-log-texte { color: var(--vigie-ko); } .vigie-log-avertissement .vigie-log-texte { color: var(--vigie-attention); } .vigie-log-notice .vigie-log-texte { color: var(--vigie-accent); } /* En-tête de groupe : toute la ligne est le bouton de repliage. */ .vigie-log-bascule { display: inline-flex; align-items: baseline; gap: 0.4rem; font: inherit; color: var(--vigie-texte); background: none; border: none; padding: 0; cursor: pointer; text-align: left; } .vigie-log-groupe { font-weight: 600; } .vigie-log-chevron { color: var(--vigie-texte-3); width: 0.8rem; flex-shrink: 0; } .vigie-log-badge-erreur { font-size: 0.68rem; font-weight: 500; color: var(--vigie-ko); border: 1px solid color-mix(in srgb, var(--vigie-ko) 40%, transparent); border-radius: 999px; padding: 0 0.4rem; margin-left: 0.5rem; } .vigie-log-surlignage { background: var(--vigie-terminal-surlignage); color: var(--vigie-terminal-texte); border-radius: 2px; padding: 0 1px; } /* L'occurrence courante se distingue des autres : sans ça, le compteur n/N navigue dans le vide. */ .vigie-log-surlignage-actif { background: var(--vigie-terminal-surlignage-actif); color: #0f172a; outline: 1px solid var(--vigie-texte); } .vigie-logs-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; margin-top: 0.7rem; } .vigie-logs-total-erreurs { color: var(--vigie-ko); } @media (max-width: 640px) { .vigie-logs-barre { /* Repliée sur quatre rangs, la barre mangerait le quart d'un écran de téléphone : en étroit elle défile avec la page, le log respire. */ position: static; gap: 0.5rem; } .vigie-logs-recherche { flex-basis: 100%; } .vigie-terminal { font-size: 0.72rem; max-height: 60dvh; } .vigie-log-num { flex-basis: 2.4rem; } /* En étroit, l'horodatage mange la moitié de la largeur utile : la bascule reste là pour ceux qui en ont besoin, mais on ne l'impose plus. */ .vigie-log-ligne { gap: 0.5rem; } } /* --- Page « État du système » (/etat) ---------------------------------------- */ /* Cartes des familles surveillées : grille auto-fit, une colonne en mobile. */ .vigie-familles { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; } .vigie-famille { padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; } /* Liseré de gauche coloré : le niveau se lit avant même la lecture du texte. */ .vigie-famille-ok { border-left: 3px solid color-mix(in srgb, var(--vigie-ok) 65%, transparent); } .vigie-famille-attention { border-left: 3px solid color-mix(in srgb, var(--vigie-attention) 70%, transparent); } .vigie-famille-critique { border-left: 3px solid var(--vigie-ko); } .vigie-famille-attente { border-left: 3px solid var(--vigie-pastille-neutre); } .vigie-famille-tete { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; } .vigie-famille-ico { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border-radius: 10px; border: 1px solid var(--vigie-bordure); flex-shrink: 0; } .vigie-famille-titre { font-size: 1rem; margin: 0; letter-spacing: -0.01em; min-width: 0; } .vigie-famille-description, .vigie-famille-verdict, .vigie-famille-meta { margin: 0; } .vigie-famille-incidents { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; } .vigie-famille-incidents li { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.35rem; font-size: 0.82rem; overflow-wrap: anywhere; } .vigie-famille-incident-libelle { font-weight: 600; color: var(--vigie-texte); } /* Inventaire : une ligne par type d'incident du catalogue. */ .vigie-catalogue { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; } .vigie-catalogue-ligne { display: flex; align-items: flex-start; gap: 0.8rem; padding: 0.85rem 1rem; min-width: 0; } .vigie-catalogue-actif-critique { border-color: color-mix(in srgb, var(--vigie-ko) 50%, transparent); } .vigie-catalogue-actif-attention { border-color: color-mix(in srgb, var(--vigie-attention) 50%, transparent); } .vigie-catalogue-actif-info { border-color: color-mix(in srgb, var(--vigie-accent) 45%, transparent); } .vigie-catalogue-ico { display: inline-flex; align-items: center; justify-content: center; width: 1.8rem; height: 1.8rem; border-radius: 9px; border: 1px solid var(--vigie-bordure); flex-shrink: 0; } .vigie-catalogue-corps { min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; } .vigie-catalogue-tete { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; } .vigie-catalogue-libelle { font-weight: 600; font-size: 0.95rem; } .vigie-catalogue-description { margin: 0; font-size: 0.85rem; color: var(--vigie-texte-2); overflow-wrap: anywhere; } .vigie-catalogue-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 0.25rem; font-size: 0.78rem; overflow-wrap: anywhere; } /* Deux familles de teintes, une seule grammaire : · vigie-chip- habille l'ÉTAT d'une famille (ok/attention/critique/attente) ; · vigie-severite- habille la GRAVITÉ d'un incident, en version pleine (badge d'icône, marqueur « actif ») ou en contour (chip du catalogue). */ .vigie-severite-critique, .vigie-chip-critique { color: var(--vigie-ko); border-color: color-mix(in srgb, var(--vigie-ko) 45%, transparent); background: color-mix(in srgb, var(--vigie-ko) 10%, transparent); } .vigie-severite-attention, .vigie-chip-attention { color: var(--vigie-attention); border-color: color-mix(in srgb, var(--vigie-attention) 45%, transparent); background: color-mix(in srgb, var(--vigie-attention) 8%, transparent); } /* « info » tire vers l'accent, pas vers le vert : une info n'est pas un OK. */ .vigie-severite-info { color: var(--vigie-accent); border-color: color-mix(in srgb, var(--vigie-accent) 40%, transparent); background: color-mix(in srgb, var(--vigie-accent) 8%, transparent); } .vigie-chip-ok { color: var(--vigie-ok); border-color: color-mix(in srgb, var(--vigie-ok) 40%, transparent); background: color-mix(in srgb, var(--vigie-ok) 8%, transparent); } .vigie-chip-attente { color: var(--vigie-texte-3); background: var(--vigie-badge-fond); } .vigie-severite-chip-critique { color: var(--vigie-ko); border-color: color-mix(in srgb, var(--vigie-ko) 45%, transparent); } .vigie-severite-chip-attention { color: var(--vigie-attention); border-color: color-mix(in srgb, var(--vigie-attention) 45%, transparent); } .vigie-severite-chip-info { color: var(--vigie-accent); border-color: color-mix(in srgb, var(--vigie-accent) 40%, transparent); } @media (max-width: 640px) { .vigie-catalogue-ligne, .vigie-famille { padding: 0.75rem 0.85rem; } .vigie-catalogue-ligne { gap: 0.6rem; } } /* --- Mouvement réduit -------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .vigie-pastille-etat-critique, .vigie-pastille-panneau { animation: none; } .vigie-statut-up::after, .vigie-statut-down::after { animation: none; content: none; } .vigie-gate-encours { animation: none; } .vigie-page { animation: none; } .vigie-carte, .vigie-carte::before, .vigie-appbar .mud-icon-button, .vigie-pastille-etat, .vigie-nav-lien, .vigie-pied-liens a, .vigie-logs-job, .vigie-pied-build a.vigie-badge-mono { transition: none; } .vigie-carte:hover, .vigie-carte:focus-visible { transform: none; } } /* --- Plomberie Blazor -------------------------------------------------------- */ #blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--vigie-attention); color: var(--vigie-fond); padding: 0.6rem 1.25rem; z-index: 1000; } #blazor-error-ui .dismiss { cursor: pointer; float: right; } .blazor-error-boundary { background: #b32121; padding: 1rem; color: white; border-radius: 0.5rem; } .blazor-error-boundary::after { content: "Une erreur est survenue."; } /* --- Page « Configuration » (/configuration) --------------------------------- */ /* Onglets : la barre reprend le verre des sections, le panneau ne rajoute pas de padding horizontal (les blocs internes portent deja le leur). */ .vigie-config-onglets { margin-top: 1rem; } .vigie-config-onglets .mud-tabs-toolbar { background: transparent; border-bottom: 1px solid var(--vigie-bordure); } .vigie-config-onglets .mud-tab { text-transform: none; letter-spacing: 0; font-size: 0.85rem; color: var(--vigie-texte-2); min-width: 0; } .vigie-config-onglets .mud-tab.mud-tab-active { color: var(--vigie-accent); } .vigie-config-onglets .mud-tab-slider { background: var(--vigie-accent); } .vigie-config-panneau { padding: 0; } /* En-tete d'une section : titre a gauche, badge d'effectivite a droite, et les deux qui s'empilent proprement en etroit. */ .vigie-config-tete { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 0.85rem; } .vigie-config-tete h2 { margin: 0 0 0.25rem; } .vigie-config-tete p { margin: 0; max-width: 68ch; } .vigie-config-sous-titre { margin: 0 0 0.75rem; font-size: 0.95rem; letter-spacing: -0.01em; } .vigie-config-bloc { padding: 1rem 1.1rem; margin-bottom: 1rem; } /* Grille de champs auto-fit : deux ou trois colonnes en large, une en mobile, sans media query a maintenir. */ .vigie-config-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0.9rem 1.1rem; align-items: start; } .vigie-champ { min-width: 0; } .vigie-champ-court { max-width: 22rem; } .vigie-config-bascule { display: flex; flex-direction: column; gap: 0.25rem; } .vigie-config-aide { margin: 0; font-size: 0.78rem; line-height: 1.45; max-width: 62ch; } .vigie-config-alerte { margin: 0.75rem 0; border-radius: 12px; } .vigie-config-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; } /* --- Badge d'effectivite ----------------------------------------------------- */ .vigie-effectivite { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.6rem; border-radius: 999px; border: 1px solid var(--vigie-bordure); font-size: 0.74rem; font-weight: 600; line-height: 1.5; white-space: nowrap; cursor: help; } .vigie-effectivite-immediate { color: var(--vigie-ok); border-color: color-mix(in srgb, var(--vigie-ok) 45%, transparent); background: color-mix(in srgb, var(--vigie-ok) 12%, transparent); } .vigie-effectivite-publiee { color: var(--vigie-accent); border-color: color-mix(in srgb, var(--vigie-accent) 45%, transparent); background: color-mix(in srgb, var(--vigie-accent) 12%, transparent); } .vigie-effectivite-locale { color: var(--vigie-texte-2); background: var(--vigie-badge-fond); } .vigie-effectivite-echec { color: var(--vigie-ko); border-color: color-mix(in srgb, var(--vigie-ko) 45%, transparent); background: color-mix(in srgb, var(--vigie-ko) 12%, transparent); } /* --- Matrice des regles d'alerting ------------------------------------------- */ .vigie-regles { display: flex; flex-direction: column; gap: 0.85rem; } .vigie-regle { padding: 0.9rem 1.05rem; display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; transition: opacity var(--vigie-transition); } /* Un type coupe reste lisible mais s'efface : on doit voir d'un coup d'oeil ce qui est encore arme. */ .vigie-regle-coupee { opacity: 0.62; } .vigie-regle-tete { display: flex; align-items: flex-start; gap: 0.7rem; flex-wrap: wrap; } .vigie-regle-ico { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border-radius: 10px; border: 1px solid var(--vigie-bordure); flex-shrink: 0; } .vigie-regle-identite { flex: 1 1 16rem; min-width: 0; } .vigie-regle-titre-ligne { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; } .vigie-regle-titre { margin: 0; font-size: 0.98rem; letter-spacing: -0.01em; } .vigie-regle-description { margin: 0.2rem 0 0; font-size: 0.8rem; line-height: 1.5; max-width: 78ch; } .vigie-regle-bascule { margin-left: auto; flex-shrink: 0; } .vigie-regle-champs { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; } .vigie-regle-sites { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem 0.9rem; padding-top: 0.6rem; border-top: 1px dashed var(--vigie-bordure); } .vigie-regle-sites-libelle { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.08em; } .vigie-regle-site .mud-switch-label { font-family: var(--vigie-police-mono); font-size: 0.78rem; } /* --- Interrupteurs de site ---------------------------------------------------- */ .vigie-interrupteurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; } .vigie-interrupteur { padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.7rem; min-width: 0; } /* Liseré ambre des qu'un interrupteur n'est plus au « tout ouvert » : l'ecart se voit sans lire les trois bascules. */ .vigie-interrupteur-restreint { border-left: 3px solid color-mix(in srgb, var(--vigie-attention) 70%, transparent); } .vigie-interrupteur-tete { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; } .vigie-interrupteur-identite { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; min-width: 0; } .vigie-interrupteur-bascules { display: flex; flex-direction: column; gap: 0.1rem; } .vigie-interrupteur-bascules .mud-switch-label { font-size: 0.84rem; } .vigie-interrupteur-pied { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; margin-top: auto; padding-top: 0.4rem; } .vigie-interrupteur-meta { font-size: 0.76rem; } /* --- Purges et journal -------------------------------------------------------- */ .vigie-purges { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem; } .vigie-purge { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.75rem; padding: 0.5rem 0.7rem; border: 1px solid var(--vigie-bordure); border-radius: 12px; background: var(--vigie-champ-fond); } .vigie-purge-libelle { flex: 1 1 14rem; font-size: 0.86rem; min-width: 0; } .vigie-journal-quand { white-space: nowrap; } .vigie-journal-apres { font-weight: 600; } /* Affichage compact : le reglage d'apparence resserre les marges de page. */ .vigie-page-compacte { padding-top: 0.75rem; padding-bottom: 1.5rem; } .vigie-page-compacte .vigie-section { margin-top: 1.25rem; } @media (max-width: 700px) { /* En etroit, la bascule d'un type passe sous son titre plutot que de comprimer le libelle a deux caracteres par ligne. */ .vigie-regle-bascule { margin-left: 0; } .vigie-champ-court { max-width: none; } .vigie-config-onglets .mud-tab { font-size: 0.78rem; padding: 0 0.7rem; } .vigie-effectivite { white-space: normal; } } /* Texte reserve aux lecteurs d ecran : retire du flux visuel sans etre masque (display:none et visibility:hidden le retireraient aussi de l arbre d accessibilite). Sert aux explications que le title seul ne restitue pas : il est inaccessible au clavier et ignore sur mobile. */ .vigie-hors-ecran { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }