/* Styles de La Vigie — direction artistique « console de passerelle ». L'app se lit comme un IDE croisé avec un pupitre de vaisseau : barre d'activité verticale à gauche, onglets d'éditeur, fil d'Ariane en chemin de fichier, barre d'état en bas — mais chaque tuile est un MODULE D'AFFICHAGE : crochets lumineux aux coins, ligne de balayage sur l'arête supérieure, liseré interne fin, séparateurs pointillés. Le vocabulaire reste technique : surfaces opaques, bordures 1 px franches, angles quasi vifs, monospace pour toute donnée. Ce qui est coloré porte du SENS (niveau d'un état, gravité d'un incident) ; en sombre, l'accent cyan reçoit une lueur d'hologramme discrète, jamais au détriment des contrastes AA. Deux thèmes, une seule grille de variables --vigie-* : · :root porte le mode CLAIR (un vrai thème d'éditeur clair, pas un inverse brut : fond légèrement froid, surfaces blanches, accents assombris pour tenir AA) ; · :root.vigie-sombre porte le mode SOMBRE (inspiration Tokyo Night / One Dark : fonds très sombres désaturés, cyan/violet/vert/ambre saturés). 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 { /* Surfaces : fond d'éditeur, chrome (barres et onglets inactifs), surface « relevée » du rail, panneaux, champs. chrome-2 et chrome-actif portent deux rôles opposés qui s'inversent d'un thème à l'autre, exactement comme dans VS Code : en CLAIR l'onglet inactif est plus SOMBRE que l'éditeur et l'item de rail sélectionné plus CLAIR que la barre ; en SOMBRE, les deux sont plus clairs. Deux variables, donc, plutôt qu'une qui mentirait dans un des deux modes. */ --vigie-fond: #f5f7fa; --vigie-chrome: #e7ebf1; --vigie-chrome-2: #e7ebf1; --vigie-chrome-actif: #f5f7fa; --vigie-surface-opaque: #ffffff; --vigie-surface-2: #eef1f6; --vigie-bordure: #d3dae3; --vigie-bordure-forte: #b7c2d0; --vigie-bordure-vive: #0c6a80; --vigie-texte: #1b2027; --vigie-texte-2: #4b5563; --vigie-texte-3: #5b6774; /* Accents assombris pour tenir AA jusque SUR LE CHROME (le fond le plus sombre du mode clair) : c'est là que vivent les micro-pastilles de la barre d'état, en 10 px — l'endroit le moins pardonnant de l'interface. */ --vigie-accent: #0c6a80; --vigie-accent-2: #7c3aed; --vigie-accent-contraste: #ffffff; --vigie-ok: #14713a; --vigie-ko: #c01c28; --vigie-attention: #855800; --vigie-hors-contrat: #6d28d9; --vigie-grille: #e2e7ee; --vigie-pastille-neutre: #94a3b8; --vigie-ombre: rgba(15, 23, 42, 0.07); --vigie-ombre-forte: rgba(15, 23, 42, 0.14); --vigie-badge-fond: #eef1f6; --vigie-champ-fond: #ffffff; --vigie-scrollbar: #c2cbd7; --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: #f7f9fc; --vigie-terminal-texte: #252b33; --vigie-terminal-gouttiere: #e2e7ee; --vigie-terminal-numero: #8b97a6; --vigie-terminal-survol: rgba(15, 23, 42, 0.045); --vigie-terminal-surlignage: #ffe08a; --vigie-terminal-surlignage-actif: #f97316; /* Habillage « module de console » des tuiles. En clair, l'ambiance est LUMINEUSE : cadres techniques présents mais posés, pas de lueur ni de scanlines (illisibles sur fond blanc). */ --vigie-coin: color-mix(in srgb, var(--vigie-accent) 62%, transparent); --vigie-liseret-interne: color-mix(in srgb, var(--vigie-bordure) 72%, transparent); --vigie-arete: color-mix(in srgb, var(--vigie-accent) 42%, transparent); --vigie-scanlines: none; } :root.vigie-sombre { --vigie-fond: #15171c; --vigie-chrome: #0f1116; --vigie-chrome-2: #1c2027; --vigie-chrome-actif: #1c2027; --vigie-surface-opaque: #1a1d23; --vigie-surface-2: #20242c; --vigie-bordure: #2b313b; --vigie-bordure-forte: #3a424f; --vigie-bordure-vive: #7dcfff; --vigie-texte: #d4dae3; --vigie-texte-2: #9aa5b4; --vigie-texte-3: #838e9e; --vigie-accent: #7dcfff; --vigie-accent-2: #bb9af7; --vigie-accent-contraste: #0f1116; --vigie-ok: #9ece6a; --vigie-ko: #f7768e; --vigie-attention: #e0af68; --vigie-hors-contrat: #c792ea; --vigie-grille: #262b34; --vigie-pastille-neutre: #4a5261; --vigie-ombre: rgba(0, 0, 0, 0.4); --vigie-ombre-forte: rgba(0, 0, 0, 0.6); --vigie-badge-fond: #20242c; --vigie-champ-fond: #14171d; --vigie-scrollbar: #333b47; --vigie-ttfb-ombre: none; /* En sombre, le terminal est PLUS sombre que la surface qui le porte : il se lit comme un vrai terminal encastré dans l'éditeur. */ --vigie-terminal-fond: #101318; --vigie-terminal-texte: #c2cad6; --vigie-terminal-gouttiere: #232932; --vigie-terminal-numero: #5a6474; --vigie-terminal-survol: rgba(148, 163, 184, 0.07); --vigie-terminal-surlignage: #8a6d1f; --vigie-terminal-surlignage-actif: #f97316; /* En sombre, le module s'allume : crochets cyan plus francs, liseré interne teinté hologramme, scanlines quasi subliminales (alpha ≈ 4 %) qui donnent la texture d'un écran de pupitre sans jamais gêner la lecture. */ --vigie-coin: color-mix(in srgb, var(--vigie-accent) 72%, transparent); --vigie-liseret-interne: color-mix(in srgb, var(--vigie-accent) 13%, transparent); --vigie-arete: color-mix(in srgb, var(--vigie-accent) 58%, transparent); --vigie-scanlines: repeating-linear-gradient( 0deg, color-mix(in srgb, var(--vigie-accent) 4%, transparent) 0 1px, transparent 1px 4px); } :root { /* Géométrie de la coque IDE. Une seule source pour les hauteurs : les barres collantes et leurs décalages doivent rester au pixel, sinon des lignes de contenu défilent dans un interstice. */ --vigie-l-activite: 3.8rem; --vigie-h-onglets: 2.4rem; --vigie-h-chemin: 2rem; --vigie-h-etat: 1.7rem; /* Angles quasi vifs : les crochets de coin épousent la bordure, un rayon plus rond laisserait un jour entre le crochet droit et l'arc. */ --vigie-rayon: 3px; --vigie-rayon-petit: 2px; --vigie-police: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --vigie-police-mono: ui-monospace, 'Cascadia Mono', 'JetBrains Mono', 'SF Mono', Consolas, monospace; --vigie-transition: 140ms ease; } /* Échelle typographique globale : 17 px de base au lieu de 16. Tout est en rem (textes, icônes, gouttières), donc l'ensemble gagne ~6 % — un cran de clarté, pas un zoom : les densités relatives ne bougent pas. */ html { font-size: 106.25%; } html, body { font-family: var(--vigie-police); background: var(--vigie-fond); color: var(--vigie-texte); line-height: 1.55; } /* 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 fine assortie au mode, façon éditeur. 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: 0; border: 3px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-track { background: transparent; } /* Anneau de focus net et uniforme : au clavier, on doit voir où l'on est. */ :focus-visible { outline: 2px solid var(--vigie-accent); outline-offset: 1px; } /* --- Coque IDE -------------------------------------------------------------- */ /* Grille à deux colonnes : la barre d'activité (fixe) réserve sa gouttière, la zone d'édition prend le reste. Le padding bas dégage la barre d'état, qui est fixée au viewport. */ .vigie-coque { min-height: 100dvh; display: grid; grid-template-columns: var(--vigie-l-activite) minmax(0, 1fr); padding-bottom: var(--vigie-h-etat); background: var(--vigie-fond); color: var(--vigie-texte); } .vigie-zone { grid-column: 2; display: flex; flex-direction: column; min-width: 0; } .vigie-conteneur { flex: 1 1 auto; width: 100%; min-width: 0; } /* --- Barre d'activité ------------------------------------------------------- */ .vigie-activite { position: fixed; top: 0; left: 0; bottom: var(--vigie-h-etat); width: var(--vigie-l-activite); z-index: 40; display: flex; flex-direction: column; align-items: stretch; gap: 0.1rem; padding: 0.3rem 0 0.5rem; background: var(--vigie-chrome); border-right: 1px solid var(--vigie-bordure); overflow-y: auto; overflow-x: hidden; } /* La marque : tour + wordmark réduit à ses initiales en mono, façon logo de barre latérale. Le nom complet vit dans le title et l'aria-label. */ .vigie-appbar-titre { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; padding: 0.35rem 0 0.5rem; color: var(--vigie-texte); text-decoration: none; line-height: 1; } .vigie-appbar-titre span[aria-hidden] { font-size: 1.3rem; } .vigie-marque { font-family: var(--vigie-police-mono); font-size: 0.62rem; letter-spacing: 0.1em; color: var(--vigie-accent); text-transform: uppercase; } .vigie-activite-sep { height: 1px; margin: 0.35rem 0.55rem; background: var(--vigie-bordure); flex-shrink: 0; } .vigie-activite-groupe-titre { font-family: var(--vigie-police-mono); font-size: 0.56rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vigie-texte-3); text-align: center; padding: 0.1rem 0 0.3rem; } /* Une entrée : icône au-dessus, micro-libellé dessous. Le libellé est ce qui sépare une barre d'activité utilisable d'une rangée d'icônes à deviner. */ .vigie-activite-lien { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem; padding: 0.45rem 0.15rem; font: inherit; font-size: 0.6rem; letter-spacing: 0.03em; color: var(--vigie-texte-3); text-decoration: none; background: none; border: none; border-left: 2px solid transparent; cursor: pointer; transition: color var(--vigie-transition), background-color var(--vigie-transition); } .vigie-activite-lien:hover { color: var(--vigie-texte); background-color: var(--vigie-chrome-actif); } .vigie-activite-lien .mud-icon-root { font-size: 1.3rem !important; width: 1.3rem; height: 1.3rem; } .vigie-activite-libelle { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Section active : liseré accent à gauche, exactement comme un éditeur. */ .vigie-activite-actif { color: var(--vigie-accent); border-left-color: var(--vigie-accent); background-color: var(--vigie-chrome-actif); } /* Entrée de site : le CODE en mono, précédé de sa pastille de disponibilité. */ .vigie-activite-site .vigie-activite-libelle { font-family: var(--vigie-police-mono); font-size: 0.72rem; letter-spacing: 0.05em; } .vigie-activite-bas { margin-top: auto; } .vigie-activite-bas .vigie-deconnexion { display: block; } .vigie-activite .mud-icon-button { color: var(--vigie-texte-3); border-radius: var(--vigie-rayon-petit); margin: 0 auto; display: flex; } .vigie-activite .mud-icon-button:hover { color: var(--vigie-texte); background-color: var(--vigie-chrome-actif); } /* --- Onglets d'éditeur ------------------------------------------------------ */ .vigie-onglets { position: sticky; top: 0; z-index: 30; display: flex; align-items: stretch; height: var(--vigie-h-onglets); background: var(--vigie-chrome); border-bottom: 1px solid var(--vigie-bordure); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } .vigie-onglets::-webkit-scrollbar { height: 0; } .vigie-onglet-editeur { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0 0.9rem; font-size: 0.82rem; color: var(--vigie-texte-3); text-decoration: none; background: var(--vigie-chrome-2); border: none; border-right: 1px solid var(--vigie-bordure); border-top: 2px solid transparent; white-space: nowrap; flex-shrink: 0; transition: color var(--vigie-transition), background-color var(--vigie-transition); } .vigie-onglet-editeur:hover { color: var(--vigie-texte); } /* L'onglet courant se détache : il prend le fond de l'éditeur et porte un liseré haut, comme un fichier ouvert au premier plan. */ .vigie-onglet-editeur-actif { color: var(--vigie-texte); background: var(--vigie-fond); border-top-color: var(--vigie-accent); } .vigie-onglet-code { font-family: var(--vigie-police-mono); letter-spacing: 0.03em; } /* Onglet « aperçu » (page ouverte hors flotte) : italique, comme un onglet temporaire d'éditeur. */ .vigie-onglet-apercu { font-style: italic; } /* --- Fil d'Ariane en chemin de fichier -------------------------------------- */ .vigie-chemin { position: sticky; top: var(--vigie-h-onglets); z-index: 29; display: flex; align-items: center; gap: 0.6rem; min-height: var(--vigie-h-chemin); padding: 0 clamp(0.7rem, 1.6vw, 1.4rem); background: var(--vigie-fond); border-bottom: 1px solid var(--vigie-bordure); font-family: var(--vigie-police-mono); font-size: 0.76rem; color: var(--vigie-texte-3); overflow: hidden; } .vigie-chemin-fil { display: flex; align-items: center; gap: 0.3rem; min-width: 0; overflow: hidden; white-space: nowrap; } .vigie-chemin-fil a { color: var(--vigie-texte-3); text-decoration: none; } .vigie-chemin-fil a:hover { color: var(--vigie-accent); text-decoration: underline; } /* Le séparateur reste au niveau de gris des maillons cliquables : plus pâle, il tombait sous AA et le chemin se lisait comme des mots détachés. */ .vigie-chemin-sep { color: var(--vigie-texte-3); } .vigie-chemin-feuille { color: var(--vigie-texte); } /* Bouton d'ouverture rapide : il ressemble à un champ de recherche parce que c'est exactement ce qu'il ouvre. Le raccourci est affiché, pas deviné. */ .vigie-quickopen { margin-left: auto; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.12rem 0.5rem; font: inherit; font-size: 0.74rem; color: var(--vigie-texte-3); background: var(--vigie-champ-fond); border: 1px solid var(--vigie-bordure); border-radius: var(--vigie-rayon-petit); cursor: pointer; flex-shrink: 0; transition: border-color var(--vigie-transition), color var(--vigie-transition); } .vigie-quickopen:hover { color: var(--vigie-texte); border-color: var(--vigie-bordure-vive); } .vigie-quickopen .mud-icon-root { font-size: 0.95rem !important; width: 0.95rem; height: 0.95rem; } .vigie-touche { font-family: var(--vigie-police-mono); font-size: 0.66rem; line-height: 1.4; padding: 0 0.3rem; color: var(--vigie-texte-3); background: var(--vigie-badge-fond); border: 1px solid var(--vigie-bordure); border-radius: 3px; white-space: nowrap; } /* --- Barre d'état ----------------------------------------------------------- */ /* C'est elle qui donne immédiatement le sentiment « IDE » : branche et build à gauche, santé des collecteurs au centre, alertes et horloge UTC à droite. Fixée au viewport : elle ne quitte jamais l'écran. */ .vigie-etat-barre { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: center; gap: 0.75rem; height: var(--vigie-h-etat); padding: 0 0.5rem; background: var(--vigie-chrome); border-top: 1px solid var(--vigie-bordure); font-family: var(--vigie-police-mono); font-size: 0.72rem; color: var(--vigie-texte-2); white-space: nowrap; overflow: hidden; } /* Balayage d'accent sur l'arête haute : la barre d'état se lit comme le bord inférieur d'un pupitre sous tension. */ .vigie-etat-barre::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--vigie-arete) 30%, var(--vigie-arete) 70%, transparent); } .vigie-etat-bloc { display: flex; align-items: center; gap: 0.55rem; min-width: 0; } .vigie-etat-droite { margin-left: auto; } .vigie-etat-element { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--vigie-texte-2); text-decoration: none; padding: 0 0.15rem; border-radius: 3px; } a.vigie-etat-element:hover { color: var(--vigie-accent); } .vigie-etat-element .mud-icon-root { font-size: 0.9rem !important; width: 0.9rem; height: 0.9rem; flex-shrink: 0; } .vigie-etat-alertes-ok { color: var(--vigie-ok); } .vigie-etat-alertes-ko { color: var(--vigie-ko); } .vigie-etat-horloge { font-variant-numeric: tabular-nums; color: var(--vigie-texte-2); } /* Micro-pastilles des collecteurs : une par famille, réduite à l'essentiel. Elles restent VISIBLES en 380 px — c'est le pouls de la supervision. */ .vigie-pastilles-etat { display: flex; align-items: center; gap: 0.1rem; min-width: 0; } .vigie-pastille-etat { display: inline-flex; align-items: center; gap: 0.25rem; font: inherit; font-family: var(--vigie-police-mono); font-size: 0.7rem; line-height: 1; padding: 0.15rem 0.3rem; border: 1px solid transparent; border-radius: 3px; background: none; color: var(--vigie-texte-3); white-space: nowrap; cursor: pointer; transition: background-color var(--vigie-transition); } .vigie-pastille-etat:hover { background: var(--vigie-chrome-actif); } .vigie-pastille-etat .mud-icon-root { font-size: 0.95rem !important; width: 0.95rem; height: 0.95rem; flex-shrink: 0; } .vigie-pastille-etat-ok { color: var(--vigie-ok); } .vigie-pastille-etat-attention { color: var(--vigie-attention); } .vigie-pastille-etat-critique { color: var(--vigie-ko); animation: vigie-pastille-alerte 2.4s ease-in-out infinite; } .vigie-pastille-etat-attente { color: var(--vigie-texte-3); } @keyframes vigie-pastille-alerte { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } /* Panneau de détail d'une pastille : il s'ouvre VERS LE HAUT depuis la barre d'état, à la manière d'un panneau d'IDE. Surface opaque — le texte technique doit rester net. */ .vigie-pastille-voile { position: fixed; inset: 0; z-index: 70; } .vigie-pastille-panneau { position: fixed; bottom: var(--vigie-h-etat); right: 0.4rem; width: min(24rem, calc(100vw - 0.8rem)); z-index: 71; padding: 0.9rem 1.05rem; display: flex; flex-direction: column; gap: 0.6rem; background: var(--vigie-surface-opaque); border: 1px solid var(--vigie-bordure-forte); border-radius: var(--vigie-rayon) var(--vigie-rayon) 0 0; color: var(--vigie-texte); white-space: normal; box-shadow: 0 -8px 28px var(--vigie-ombre-forte); } .vigie-pastille-panneau-tete { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; } .vigie-pastille-panneau-titre { font-weight: 600; font-size: 0.98rem; } .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.84rem; line-height: 1.5; 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.8rem; } .vigie-pastille-panneau-lien:hover { text-decoration: underline; } /* --- Palette de commandes (Ctrl+K) ------------------------------------------ */ .vigie-palette-voile { position: fixed; inset: 0; z-index: 80; background: color-mix(in srgb, var(--vigie-chrome) 62%, transparent); } .vigie-palette { position: fixed; top: 12vh; left: 50%; transform: translateX(-50%); z-index: 81; width: min(38rem, calc(100vw - 1.5rem)); display: flex; flex-direction: column; background: var(--vigie-surface-opaque); background-image: var(--vigie-scanlines); border: 1px solid var(--vigie-bordure-forte); border-radius: var(--vigie-rayon); box-shadow: 0 20px 48px var(--vigie-ombre-forte); overflow: hidden; } .vigie-palette-tete { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--vigie-bordure); } .vigie-palette-tete .mud-icon-root { font-size: 1.1rem !important; width: 1.1rem; height: 1.1rem; color: var(--vigie-texte-3); flex-shrink: 0; } .vigie-palette-champ { flex: 1 1 auto; min-width: 0; font-family: var(--vigie-police-mono); font-size: 0.95rem; color: var(--vigie-texte); background: none; border: none; outline: none; padding: 0; } .vigie-palette-champ::placeholder { color: var(--vigie-texte-3); } .vigie-palette-liste { list-style: none; margin: 0; padding: 0.25rem 0; max-height: min(24rem, 55vh); overflow-y: auto; } .vigie-palette-item { display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.45rem 0.75rem; font: inherit; font-size: 0.9rem; text-align: left; color: var(--vigie-texte-2); background: none; border: none; border-left: 2px solid transparent; cursor: pointer; } .vigie-palette-item .mud-icon-root { font-size: 1.1rem !important; width: 1.1rem; height: 1.1rem; color: var(--vigie-texte-3); flex-shrink: 0; } /* Ligne survolée au clavier : c'est la SEULE mise en avant — pas de survol souris concurrent qui ferait croire à deux sélections. */ .vigie-palette-item-actif { color: var(--vigie-texte); background: var(--vigie-surface-2); border-left-color: var(--vigie-accent); } .vigie-palette-item-actif .mud-icon-root { color: var(--vigie-accent); } .vigie-palette-libelle { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vigie-palette-detail { font-family: var(--vigie-police-mono); font-size: 0.74rem; color: var(--vigie-texte-3); flex-shrink: 0; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vigie-palette-vide { padding: 1rem 0.75rem; font-size: 0.9rem; color: var(--vigie-texte-3); } .vigie-palette-pied { display: flex; align-items: center; gap: 0.7rem; padding: 0.4rem 0.7rem; border-top: 1px dashed var(--vigie-bordure); background: var(--vigie-surface-2); font-size: 0.72rem; color: var(--vigie-texte-3); flex-wrap: wrap; } /* --- Page ------------------------------------------------------------------- */ .vigie-page { padding: 1rem clamp(0.7rem, 1.6vw, 1.4rem) 2rem; } /* --- Utilitaires ------------------------------------------------------------ */ /* Surface d'outil : opaque, bordure 1 px franche, angle quasi vif, ombre discrète. Le !important neutralise le background-color que MudPaper pose depuis le thème. Chaque surface est un MODULE DE CONSOLE : liseré interne fin (double cadre), crochets lumineux aux quatre coins, ligne de balayage sur l'arête supérieure, scanlines subliminales en sombre, et un très court « allumage » à l'insertion dans le DOM. */ .vigie-surface { position: relative; background-color: var(--vigie-surface-opaque) !important; background-image: var(--vigie-scanlines); border: 1px solid var(--vigie-bordure); border-radius: var(--vigie-rayon); box-shadow: 0 1px 2px var(--vigie-ombre); outline: 1px solid var(--vigie-liseret-interne); outline-offset: -5px; animation: vigie-allumage 150ms ease-out; } /* Crochets de coin + balayage d'arête : un seul pseudo-élément, neuf calques de dégradés bornés (deux traits par coin, une ligne en haut). Les crochets chevauchent la bordure d'un pixel vers l'intérieur : le cadre semble « verrouillé » aux angles, comme un cadre holographique. */ .vigie-surface::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(90deg, transparent, var(--vigie-arete) 30%, var(--vigie-arete) 70%, transparent) no-repeat top center / min(60%, 260px) 1px, linear-gradient(var(--vigie-coin), var(--vigie-coin)) no-repeat left top / 11px 2px, linear-gradient(var(--vigie-coin), var(--vigie-coin)) no-repeat left top / 2px 11px, linear-gradient(var(--vigie-coin), var(--vigie-coin)) no-repeat right top / 11px 2px, linear-gradient(var(--vigie-coin), var(--vigie-coin)) no-repeat right top / 2px 11px, linear-gradient(var(--vigie-coin), var(--vigie-coin)) no-repeat left bottom / 11px 2px, linear-gradient(var(--vigie-coin), var(--vigie-coin)) no-repeat left bottom / 2px 11px, linear-gradient(var(--vigie-coin), var(--vigie-coin)) no-repeat right bottom / 11px 2px, linear-gradient(var(--vigie-coin), var(--vigie-coin)) no-repeat right bottom / 2px 11px; } /* Les bandeaux plats (barre analytics, barre d'outils des logs, conteneur de table) gardent le cadre mais pas le liseré interne : à 5 px du bord, il traverserait leur contenu peu marge. */ .vigie-analytics-barre.vigie-surface, .vigie-logs-barre.vigie-surface, .vigie-table-defilement.vigie-surface { outline: none; } /* Une surface focusable (carte de site) retrouve son anneau de focus : le liseré décoratif partage la propriété outline, il ne doit jamais gagner. */ .vigie-surface:focus-visible { outline: 2px solid var(--vigie-accent); outline-offset: 1px; } @keyframes vigie-allumage { from { opacity: 0; transform: scale(0.985); } to { opacity: 1; transform: none; } } .vigie-tabulaire { font-variant-numeric: tabular-nums; } .vigie-mono { font-family: var(--vigie-police-mono); } .vigie-entete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 0.6rem 1rem; margin-bottom: 1.3rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--vigie-bordure); } .vigie-entete-site { align-items: flex-start; flex-direction: column; gap: 0.2rem; } .vigie-titre { font-size: 1.35rem; font-weight: 600; margin: 0; letter-spacing: -0.01em; } /* Kicker façon invite de terminal : la commande qui produirait cette vue. */ .vigie-kicker { margin: 0 0 0.2rem; font-family: var(--vigie-police-mono); font-size: 0.74rem; letter-spacing: 0.06em; color: var(--vigie-texte-3); } .vigie-texte-atone { color: var(--vigie-texte-3); font-size: 0.86rem; } .vigie-deconnexion { margin: 0; } .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.3rem; 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: var(--vigie-rayon-petit); padding: 0.1rem 0.45rem; white-space: nowrap; } .vigie-badge-ico { font-size: 1rem !important; width: 1rem; height: 1rem; color: var(--vigie-texte-3); flex-shrink: 0; } /* Chip maison (stack, code) : pas de bouton MudChip dans une carte cliquable. */ .vigie-chip { font-family: var(--vigie-police-mono); font-size: 0.72rem; color: var(--vigie-texte-2); background: var(--vigie-badge-fond); border: 1px solid var(--vigie-bordure); border-radius: var(--vigie-rayon-petit); padding: 0.08rem 0.4rem; white-space: nowrap; letter-spacing: 0.04em; } .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) 10%, transparent); } /* --- Pastilles de statut (sites) -------------------------------------------- */ .vigie-pastille-statut { position: relative; width: 0.55rem; height: 0.55rem; border-radius: 50%; display: inline-block; flex-shrink: 0; } .vigie-statut-up { background: var(--vigie-ok); box-shadow: 0 0 0 2px color-mix(in srgb, var(--vigie-ok) 22%, transparent); } .vigie-statut-down { background: var(--vigie-ko); box-shadow: 0 0 0 2px color-mix(in srgb, var(--vigie-ko) 25%, transparent); animation: vigie-pastille-alerte 1.6s ease-in-out infinite; } .vigie-statut-inconnu { background: var(--vigie-pastille-neutre); } /* --- Cartes de la vue flotte ------------------------------------------------ */ .vigie-carte { padding: 0.95rem 1.05rem 0.9rem; display: flex; flex-direction: column; gap: 0.7rem; height: 100%; cursor: pointer; position: relative; overflow: hidden; transition: border-color var(--vigie-transition), background-color var(--vigie-transition); } /* Liseré gauche : la carte se lit comme un fichier de l'explorateur, et le liseré s'allume au survol sans faire bouger la mise en page. */ .vigie-carte::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: var(--vigie-accent); opacity: 0; transition: opacity var(--vigie-transition); } .vigie-carte:hover, .vigie-carte:focus-visible { border-color: var(--vigie-bordure-forte); } .vigie-carte:hover::before, .vigie-carte:focus-visible::before { opacity: 1; } .vigie-carte-entete { display: flex; align-items: center; gap: 0.45rem; min-width: 0; } .vigie-carte-nom { font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vigie-carte-code { font-family: var(--vigie-police-mono); color: var(--vigie-texte-3); font-size: 0.72rem; border: 1px solid var(--vigie-bordure); padding: 0.08rem 0.4rem; border-radius: var(--vigie-rayon-petit); margin-left: auto; } .vigie-carte-version { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; min-height: 1.4rem; } /* 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: 84px; display: flex; align-items: flex-start; } .vigie-carte-spark { position: absolute; left: 0; right: 0; bottom: 0; height: 58%; opacity: 0.9; } .vigie-ttfb-bloc { position: relative; display: flex; flex-direction: column; gap: 0.12rem; pointer-events: none; /* le tooltip de la sparkline reste accessible dessous. */ } .vigie-ttfb { font-family: var(--vigie-police-mono); font-size: 2rem; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; } .vigie-ttfb-unite { font-size: 0.85rem; font-weight: 400; color: var(--vigie-texte-3); margin-left: 0.2rem; letter-spacing: 0; } .vigie-ttfb-libelle { font-family: var(--vigie-police-mono); font-size: 0.66rem; color: var(--vigie-texte-3); text-transform: uppercase; letter-spacing: 0.14em; } .vigie-spark { width: 100%; height: 100%; } .vigie-spark-squelette { border-radius: var(--vigie-rayon-petit); opacity: 0.5; } .vigie-carte-horodatage { display: flex; align-items: center; } /* Pied de carte : séparateur POINTILLÉ — le trait technique d'un cadran, pas la ligne pleine d'une card web. */ .vigie-carte-pied { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-top: auto; font-size: 0.82rem; padding-top: 0.6rem; border-top: 1px dashed var(--vigie-bordure); } /* Grand écran : les tuiles occupent l'espace — la vue reste dense, mais la métrique héro et le nom respirent. */ @media (min-width: 1600px) { .vigie-carte { padding: 1.15rem 1.25rem 1.05rem; gap: 0.85rem; } .vigie-carte-nom { font-size: 1.08rem; } .vigie-ttfb { font-size: 2.5rem; } .vigie-carte-latence { min-height: 128px; } .vigie-hero-valeur { font-size: 2.15rem; } .vigie-titre { font-size: 1.55rem; } } /* --- Pipeline des gates ----------------------------------------------------- */ /* Compact (cartes) : segments connectés façon barre de progression segmentée. */ .vigie-gates { display: flex; align-items: center; gap: 3px; width: 100%; } .vigie-gates-compactes .vigie-gate-item { display: flex; flex: 1 1 0; min-width: 0; } .vigie-gates-compactes .vigie-gate { height: 5px; flex: 1 1 0; border-radius: 2px; } .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.4rem; position: relative; text-align: center; } .vigie-gates-grandes .vigie-gate { width: 1rem; height: 1rem; border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; line-height: 1; box-sizing: border-box; z-index: 1; } /* Connecteur : trait qui relie chaque nœud au précédent. */ .vigie-gates-grandes .vigie-gate-item::before { content: ""; position: absolute; top: calc(0.5rem - 1px); left: calc(-50% + 1rem); right: calc(50% + 1rem); height: 1px; background: var(--vigie-bordure-forte); } .vigie-gates-grandes .vigie-gate-item:first-child::before { display: none; } .vigie-gate-nom { font-family: var(--vigie-police-mono); font-size: 0.76rem; color: var(--vigie-texte); } .vigie-gate-duree { font-family: var(--vigie-police-mono); 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.86rem; } @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.5rem; } .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: 1rem 1.5rem; padding: 1.1rem 1.3rem; margin-bottom: 1.4rem; } .vigie-hero-identite { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; } .vigie-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.86rem; } .vigie-hero-mesures { display: flex; flex-wrap: wrap; gap: 1.6rem; } .vigie-hero-mesure { display: flex; flex-direction: column; gap: 0.18rem; min-width: 5rem; } .vigie-hero-valeur { font-family: var(--vigie-police-mono); font-size: 1.75rem; font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .vigie-hero-valeur .vigie-ttfb-unite { font-size: 0.9rem; } .vigie-hero-libelle { font-family: var(--vigie-police-mono); font-size: 0.68rem; color: var(--vigie-texte-3); text-transform: uppercase; letter-spacing: 0.12em; } .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: 1.75rem; } /* Titre de section façon en-tête de panneau d'IDE : mono, majuscules, un filet qui s'évanouit vers le bord — le trait d'un affichage tête haute. */ .vigie-section h2 { display: flex; align-items: center; gap: 0.6rem; font-family: var(--vigie-police-mono); font-size: 0.74rem; color: var(--vigie-texte-3); margin: 0 0 0.75rem; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 500; } .vigie-section h2::after { content: ""; flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, var(--vigie-bordure-forte), var(--vigie-bordure) 55%, transparent); } .vigie-panneau { padding: 1.1rem 1.2rem; } .vigie-pipeline-meta { margin: 0 0 0.9rem; } /* Table des runs : lignes serrées, en-têtes mono — une sortie de commande. */ .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 { font-family: var(--vigie-police-mono) !important; color: var(--vigie-texte-3) !important; font-size: 0.7rem !important; text-transform: uppercase; letter-spacing: 0.12em; 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.86rem; white-space: nowrap; } .vigie-table-runs tr:last-child td { border-bottom: none !important; } .vigie-table-runs .mud-table-row:hover { background: var(--vigie-surface-2) !important; } /* Chips de conclusion des runs. */ .vigie-conclusion { display: inline-block; font-family: var(--vigie-police-mono); padding: 0.08rem 0.45rem; border-radius: var(--vigie-rayon-petit); font-size: 0.74rem; border: 1px solid; line-height: 1.5; } .vigie-conclusion-success { color: var(--vigie-ok); border-color: color-mix(in srgb, var(--vigie-ok) 40%, transparent); background: color-mix(in srgb, var(--vigie-ok) 10%, transparent); } .vigie-conclusion-failure, .vigie-conclusion-cancelled, .vigie-conclusion-timed_out { color: var(--vigie-ko); border-color: color-mix(in srgb, var(--vigie-ko) 40%, transparent); background: color-mix(in srgb, var(--vigie-ko) 10%, transparent); } .vigie-conclusion-in_progress, .vigie-conclusion-queued { color: var(--vigie-attention); border-color: color-mix(in srgb, var(--vigie-attention) 40%, transparent); background: color-mix(in srgb, var(--vigie-attention) 10%, transparent); } /* Graphe de latence ApexCharts. */ .vigie-graphe-conteneur { padding: 0.8rem 0.8rem 0.3rem; } .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: 1rem 1.2rem; font-size: 0.9rem; line-height: 1.55; 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-color: color-mix(in srgb, var(--vigie-attention) 6%, var(--vigie-surface-opaque)) !important; } .vigie-derive-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .vigie-derive-libelle { color: var(--vigie-texte-2); min-width: 15rem; } .vigie-derive-verdict { margin-top: 0.15rem; 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: var(--vigie-surface-opaque) !important; border: 1px solid var(--vigie-bordure-forte) !important; border-radius: var(--vigie-rayon-petit); box-shadow: 0 6px 20px var(--vigie-ombre-forte) !important; font-family: var(--vigie-police-mono); font-size: 0.75rem; color: var(--vigie-texte); } .apexcharts-tooltip-title { background: transparent !important; border-bottom: 1px solid var(--vigie-bordure) !important; font-family: var(--vigie-police-mono) !important; } /* --- Pied de page ----------------------------------------------------------- */ /* Discret : la signature et le build vivent en bas du contenu, sous un filet. L'information « vivante » (branche, collecteurs, alertes, horloge) est dans la barre d'état, pas ici. */ .vigie-pied { border-top: 1px solid var(--vigie-bordure); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1.5rem; margin: 0 clamp(0.7rem, 1.6vw, 1.4rem); padding: 0.9rem 0 1.1rem; font-size: 0.82rem; color: var(--vigie-texte-3); } .vigie-pied-bloc { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; } .vigie-pied-signature { flex-direction: column; align-items: flex-start; gap: 0.15rem; } .vigie-pied-signature strong { color: var(--vigie-texte-2); font-weight: 600; } .vigie-pied-stack { font-family: var(--vigie-police-mono); font-size: 0.72rem; letter-spacing: 0.04em; 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: 0.9rem; } .vigie-pied-liens a { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--vigie-texte-3); text-decoration: none; transition: color var(--vigie-transition); } .vigie-pied-liens a:hover { color: var(--vigie-accent); } .vigie-nav-ico { font-size: 0.9rem !important; width: 0.9rem; height: 0.9rem; opacity: 0.75; } @media (max-width: 640px) { .vigie-pied { flex-direction: column; align-items: flex-start; } } /* --- 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 1rem; padding-top: 0.2rem; } .vigie-kpi-mesure { display: flex; flex-direction: column; gap: 0.1rem; } .vigie-kpi-valeur { font-family: var(--vigie-police-mono); font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; } .vigie-kpi-libelle { font-family: var(--vigie-police-mono); font-size: 0.64rem; color: var(--vigie-texte-3); text-transform: uppercase; letter-spacing: 0.12em; } /* Badge de disponibilité : gros pourcentage coloré + fenêtre en dessous. */ .vigie-uptime { display: flex; flex-direction: column; gap: 0.1rem; } .vigie-uptime-valeur { font-family: var(--vigie-police-mono); font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; } .vigie-uptime-libelle { font-family: var(--vigie-police-mono); font-size: 0.64rem; color: var(--vigie-texte-3); text-transform: uppercase; letter-spacing: 0.12em; } .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.25rem; font-family: var(--vigie-police-mono); font-size: 0.72rem; padding: 0.08rem 0.4rem; border-radius: var(--vigie-rayon-petit); border: 1px solid var(--vigie-bordure); white-space: nowrap; } .vigie-chip-tls .vigie-badge-ico { font-size: 0.85rem !important; width: 0.85rem; height: 0.85rem; } .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) 10%, 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) 10%, 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: 26px; width: 100%; } .vigie-vis-barre { flex: 1 1 0; min-width: 2px; background: var(--vigie-accent); border-radius: 1px 1px 0 0; opacity: 0.75; } /* Panneau KPI de la vue site : groupes titrés, tuiles de valeurs. */ .vigie-kpi-panneau { display: flex; flex-wrap: wrap; gap: 1.3rem 2rem; padding: 1.1rem 1.3rem; } .vigie-kpi-groupe { display: flex; flex-direction: column; gap: 0.65rem; min-width: 0; } .vigie-kpi-groupe-titre { font-family: var(--vigie-police-mono); font-size: 0.66rem; color: var(--vigie-texte-3); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 500; } .vigie-kpi-uptimes, .vigie-kpi-tuiles { display: flex; flex-wrap: wrap; gap: 1.2rem; } .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-family: var(--vigie-police-mono); font-size: 1.3rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.15; letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 0.35rem; } .vigie-kpi-tuile-libelle { font-family: var(--vigie-police-mono); font-size: 0.66rem; color: var(--vigie-texte-3); text-transform: uppercase; letter-spacing: 0.1em; } .vigie-kpi-uptimes .vigie-uptime-valeur { font-size: 1.3rem; } .vigie-visiteurs-entete { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem; margin-bottom: 0.9rem; } /* Le lien vers le tableau de bord détaillé se pousse en bout de ligne. */ .vigie-lien-analytics { margin-left: auto; font-size: 0.86rem; } /* --- 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.5rem 1rem; padding: 0.45rem 0.6rem; margin-bottom: 1.2rem; } .vigie-analytics-sites, .vigie-analytics-periodes { display: flex; align-items: center; gap: 0.3rem; 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.35rem; padding: 0.28rem 0.65rem; font-size: 0.84rem; color: var(--vigie-texte-2); text-decoration: none; background: var(--vigie-badge-fond); border: 1px solid var(--vigie-bordure); border-radius: var(--vigie-rayon-petit); 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-forte); } .vigie-onglet-actif { color: var(--vigie-accent); border-color: var(--vigie-accent); background: color-mix(in srgb, var(--vigie-accent) 12%, transparent); } .vigie-onglet-periode { font-family: var(--vigie-police-mono); font-variant-numeric: tabular-nums; } .vigie-onglet-marque { font-size: 0.62rem; padding: 0 0.3rem; } .vigie-analytics-alerte { margin-bottom: 1.2rem; 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(9.5rem, 1fr)); gap: 0.75rem; } .vigie-stat { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.9rem 1.05rem; } .vigie-stat-libelle { font-family: var(--vigie-police-mono); font-size: 0.66rem; color: var(--vigie-texte-3); text-transform: uppercase; letter-spacing: 0.14em; } .vigie-stat-valeur { font-family: var(--vigie-police-mono); font-size: 1.8rem; font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .vigie-stat-variation { display: inline-flex; align-items: center; gap: 0.2rem; font-family: var(--vigie-police-mono); font-size: 0.78rem; font-variant-numeric: tabular-nums; cursor: help; } .vigie-stat-fleche { font-size: 1.05rem !important; width: 1.05rem; height: 1.05rem; } .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: 0.75rem; } .vigie-grille-trois { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.75rem; } .vigie-classement, .vigie-donut, .vigie-carte-monde, .vigie-calendrier { padding: 0.95rem 1.05rem 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.94rem; 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 { font-family: var(--vigie-police-mono) !important; color: var(--vigie-texte-3) !important; font-size: 0.66rem !important; text-transform: uppercase; letter-spacing: 0.12em; 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.84rem; /* 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: 2px; background: color-mix(in srgb, var(--vigie-accent) 16%, transparent); } .vigie-classement-etiquette { position: relative; display: block; padding-left: 0.3rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--vigie-police-mono); font-size: 0.8rem; } .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 du panneau. */ .vigie-monde { display: block; width: 100%; height: auto; border-radius: var(--vigie-rayon-petit); 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: 14px; 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-family: var(--vigie-police-mono); font-size: 0.62rem; 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-family: var(--vigie-police-mono); font-size: 0.62rem; 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.6rem; } .vigie-cal-max { margin-left: auto; } @media (max-width: 640px) { .vigie-stat-valeur { font-size: 1.55rem; } .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.7rem; padding: 0.8rem 0.2rem; border-bottom: 1px dashed var(--vigie-bordure); } .vigie-alerte:last-child { border-bottom: none; } .vigie-alerte-resolue { opacity: 0.72; } .vigie-alerte-pastille { flex-shrink: 0; width: 0.55rem; height: 0.55rem; border-radius: 50%; margin-top: 0.35rem; } .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.3rem; min-width: 0; } .vigie-alerte-tete { display: flex; align-items: center; gap: 0.5rem; } .vigie-alerte-type { font-family: var(--vigie-police-mono); 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.86rem; line-height: 1.55; color: var(--vigie-texte-2); white-space: pre-line; word-break: break-word; } .vigie-alerte-meta { margin: 0; } /* --- Visualiseur de logs CI -------------------------------------------------- */ .vigie-logs-entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.7rem 1.2rem; padding: 0.8rem 1.1rem; margin-bottom: 1.2rem; } .vigie-logs-identite { display: flex; align-items: center; gap: 0.6rem; min-width: 0; } .vigie-logs-identite .vigie-titre { font-size: 1.2rem; } .vigie-logs-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-size: 0.86rem; } /* Sélecteur de job : des onglets carrés, un par job du run. */ .vigie-logs-jobs { display: flex; flex-wrap: wrap; gap: 0.4rem; } .vigie-logs-job { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.75rem; font: inherit; font-size: 0.86rem; color: var(--vigie-texte-2); background: var(--vigie-badge-fond); border: 1px solid var(--vigie-bordure); border-radius: var(--vigie-rayon-petit); 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-forte); } .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-nom { font-family: var(--vigie-police-mono); font-size: 0.8rem; } .vigie-logs-job-pastille { width: 0.5rem; height: 0.5rem; 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); } /* Texte-2 et pas texte-3 : la durée est posée sur le fond teinté de l'onglet actif, où le gris le plus pâle passait sous AA. */ .vigie-logs-job-duree { font-family: var(--vigie-police-mono); font-size: 0.72rem; color: var(--vigie-texte-2); } /* Barre d'outils : recherche à gauche, compteur et navigation, bascules, actions. Elle s'enroule proprement jusqu'en 380 px. Collante SOUS les barres de la coque (onglets + chemin) : 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. */ .vigie-logs-barre { position: sticky; top: calc(var(--vigie-h-onglets) + var(--vigie-h-chemin)); z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; padding: 0.55rem 0.7rem; margin-bottom: 0.8rem; } .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.1rem; } .vigie-logs-bascules { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.5rem; } .vigie-logs-bascules .mud-switch { margin: 0; } .vigie-logs-bascules .mud-switch-label { font-size: 0.82rem; color: var(--vigie-texte-2); } .vigie-logs-compteur { font-family: var(--vigie-police-mono); font-size: 0.8rem; color: var(--vigie-texte-3); min-width: 3.5rem; text-align: right; } .vigie-logs-alerte { margin-bottom: 0.8rem; border-radius: var(--vigie-rayon); } .vigie-logs-squelette { border-radius: var(--vigie-rayon); margin-bottom: 0.8rem; opacity: 0.5; } /* Le terminal lui-même : surface opaque, défilement vertical borné, défilement horizontal plutôt que césure pour ne jamais casser une trace d'erreur. */ .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.8rem; line-height: 1.6; padding: 0.5rem 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.7rem; 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.5rem 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-terminal-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.7rem; font-weight: 500; color: var(--vigie-ko); border: 1px solid color-mix(in srgb, var(--vigie-ko) 40%, transparent); border-radius: 3px; padding: 0 0.3rem; 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: #101318; 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.6rem; } .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.45rem; } .vigie-logs-recherche { flex-basis: 100%; } .vigie-terminal { font-size: 0.74rem; max-height: 60dvh; } .vigie-log-num { flex-basis: 2.4rem; } .vigie-log-ligne { gap: 0.5rem; } } /* --- Page « État du système » (/etat) ---------------------------------------- */ .vigie-familles { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 0.75rem; } .vigie-famille { padding: 0.95rem 1.05rem; display: flex; flex-direction: column; gap: 0.55rem; 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.45rem; } .vigie-famille-ico { display: inline-flex; align-items: center; justify-content: center; width: 1.85rem; height: 1.85rem; border-radius: var(--vigie-rayon-petit); border: 1px solid var(--vigie-bordure); flex-shrink: 0; } .vigie-famille-titre { font-size: 1.02rem; 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.3rem; } .vigie-famille-incidents li { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.3rem; font-size: 0.84rem; line-height: 1.5; 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.45rem; } .vigie-catalogue-ligne { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.8rem 0.95rem; 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.75rem; height: 1.75rem; border-radius: var(--vigie-rayon-petit); border: 1px solid var(--vigie-bordure); flex-shrink: 0; } .vigie-catalogue-corps { min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; } .vigie-catalogue-tete { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; } .vigie-catalogue-libelle { font-weight: 600; font-size: 0.96rem; } .vigie-catalogue-description { margin: 0; font-size: 0.86rem; line-height: 1.55; color: var(--vigie-texte-2); overflow-wrap: anywhere; } .vigie-catalogue-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 0.25rem; font-size: 0.8rem; 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) 10%, 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) 10%, 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) 10%, 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); } /* --- Page « Configuration » (/configuration) --------------------------------- */ .vigie-config-onglets { margin-top: 0.8rem; } .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.86rem; 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-tete { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 0.7rem; margin-bottom: 0.8rem; } .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.8rem; font-size: 0.96rem; letter-spacing: -0.01em; } .vigie-config-bloc { padding: 0.95rem 1.05rem; margin-bottom: 0.9rem; } /* Grille de champs auto-fit : deux ou trois colonnes en large, une en mobile, sans media query à maintenir. */ .vigie-config-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0.8rem 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.3rem; } .vigie-config-aide { margin: 0; font-size: 0.8rem; line-height: 1.55; max-width: 62ch; } .vigie-config-alerte { margin: 0.7rem 0; border-radius: var(--vigie-rayon); } .vigie-config-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.7rem; margin-top: 0.9rem; } /* --- Badge d'effectivité ----------------------------------------------------- */ .vigie-effectivite { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.1rem 0.45rem; border-radius: var(--vigie-rayon-petit); border: 1px solid var(--vigie-bordure); font-family: var(--vigie-police-mono); font-size: 0.74rem; font-weight: 500; line-height: 1.6; 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 règles d'alerting ------------------------------------------- */ .vigie-regles { display: flex; flex-direction: column; gap: 0.7rem; } .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 coupé reste lisible mais s'efface : on doit voir d'un coup d'œil ce qui est encore armé. */ .vigie-regle-coupee { opacity: 0.62; } .vigie-regle-tete { display: flex; align-items: flex-start; gap: 0.6rem; flex-wrap: wrap; } .vigie-regle-ico { display: inline-flex; align-items: center; justify-content: center; width: 1.85rem; height: 1.85rem; border-radius: var(--vigie-rayon-petit); 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.4rem; } .vigie-regle-titre { margin: 0; font-size: 0.98rem; letter-spacing: -0.01em; } .vigie-regle-description { margin: 0.3rem 0 0; font-size: 0.82rem; line-height: 1.6; max-width: 78ch; } .vigie-regle-bascule { margin-left: auto; flex-shrink: 0; } .vigie-regle-champs { display: flex; flex-wrap: wrap; gap: 0.7rem 1rem; } .vigie-regle-sites { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem 0.85rem; padding-top: 0.55rem; border-top: 1px dashed var(--vigie-bordure); } .vigie-regle-sites-libelle { font-family: var(--vigie-police-mono); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.12em; } .vigie-regle-site .mud-switch-label { font-family: var(--vigie-police-mono); font-size: 0.8rem; } /* --- Interrupteurs de site ---------------------------------------------------- */ .vigie-interrupteurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0.75rem; } .vigie-interrupteur { padding: 0.95rem 1.05rem; display: flex; flex-direction: column; gap: 0.7rem; min-width: 0; } /* Liseré ambre dès qu'un interrupteur n'est plus au « tout ouvert » : l'écart 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.45rem; min-width: 0; } .vigie-interrupteur-bascules { display: flex; flex-direction: column; gap: 0.05rem; } .vigie-interrupteur-bascules .mud-switch-label { font-size: 0.86rem; } .vigie-interrupteur-pied { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; padding-top: 0.45rem; border-top: 1px dashed var(--vigie-bordure); } .vigie-interrupteur-meta { font-size: 0.78rem; } /* --- Purges et journal -------------------------------------------------------- */ .vigie-purges { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.7rem; } .vigie-purge { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem 0.7rem; padding: 0.45rem 0.6rem; border: 1px solid var(--vigie-bordure); border-radius: var(--vigie-rayon-petit); background: var(--vigie-surface-2); } .vigie-purge-libelle { flex: 1 1 14rem; font-size: 0.88rem; min-width: 0; } .vigie-journal-quand { white-space: nowrap; } .vigie-journal-apres { font-weight: 600; } /* Affichage compact : réglage d'apparence de /configuration, posé en classe vigie-compact sur par theme.js (donc AVANT le premier paint, comme le thème). Il vaut pour TOUTES les pages de la coque et pas seulement pour celle qui porte l'interrupteur — un réglage sans effet visible ailleurs est ce qui fait dire « la config ne fonctionne pas ». On resserre ce qui gagne vraiment des lignes à l'écran : le padding de page, les respirations entre sections et les gouttières des grilles de cartes. */ .vigie-compact .vigie-page { padding-top: 0.5rem; padding-bottom: 1rem; } .vigie-compact .vigie-entete { margin-bottom: 0.6rem; padding-bottom: 0.4rem; } .vigie-compact .vigie-section { margin-bottom: 0.9rem; } .vigie-compact .vigie-grille-deux, .vigie-compact .vigie-grille-trois { gap: 0.5rem; } @media (max-width: 700px) { /* En étroit, la bascule d'un type passe sous son titre plutôt que de comprimer le libellé à deux caractères par ligne. */ .vigie-regle-bascule { margin-left: 0; } .vigie-champ-court { max-width: none; } .vigie-config-onglets .mud-tab { font-size: 0.8rem; padding: 0 0.6rem; } .vigie-effectivite { white-space: normal; } } /* --- Repli mobile de la coque ------------------------------------------------ */ /* Sous 900 px, la barre d'activité se replie en RAIL HORIZONTAL collé en haut : mêmes destinations, mêmes libellés, un défilement latéral au doigt. Les onglets d'éditeur disparaissent (le rail les remplace) et la barre d'état se condense — c'est elle qui doit survivre en 380 px, pas la décoration. */ @media (max-width: 900px) { .vigie-coque { grid-template-columns: minmax(0, 1fr); } .vigie-zone { grid-column: 1; } .vigie-activite { position: sticky; top: 0; bottom: auto; width: 100%; height: auto; flex-direction: row; align-items: stretch; gap: 0; padding: 0; border-right: none; border-bottom: 1px solid var(--vigie-bordure); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } .vigie-activite::-webkit-scrollbar { height: 0; } .vigie-appbar-titre { padding: 0.3rem 0.55rem; justify-content: center; flex-shrink: 0; } .vigie-activite-sep { width: 1px; height: auto; margin: 0.45rem 0.3rem; flex-shrink: 0; } /* Les titres de groupe (« SITES ») n'ont pas de place en rangée : le séparateur suffit à marquer la coupure. */ .vigie-activite-groupe-titre { display: none; } .vigie-activite-lien { padding: 0.35rem 0.5rem; border-left: none; border-bottom: 2px solid transparent; flex-shrink: 0; } .vigie-activite-actif { border-left-color: transparent; border-bottom-color: var(--vigie-accent); } /* Thème et déconnexion COLLÉS au bord droit du rail. « margin-left: auto » seul ne suffisait pas : le rail défile horizontalement et, avec dix entrées en 380 px, le groupe partait hors écran — le bouton jour/nuit n'était atteignable qu'en faisant défiler la barre jusqu'au bout, donc en pratique introuvable. « position: sticky; right: 0 » l'épingle au bord du défilement ; le fond opaque et le filet à gauche évitent que les entrées passent visuellement dessous. */ .vigie-activite-bas { position: sticky; right: 0; margin-top: 0; margin-left: auto; display: flex; align-items: center; flex-shrink: 0; padding-left: 0.15rem; background: var(--vigie-chrome); border-left: 1px solid var(--vigie-bordure); } /* Cible tactile : 40 px minimum, sinon le bouton se rate au doigt. */ .vigie-activite .mud-icon-button { min-width: 40px; min-height: 40px; } .vigie-onglets { display: none; } .vigie-chemin { position: static; } :root { --vigie-h-etat: 1.6rem; } /* En 380 px, la barre d'état garde le pouls (pastilles, alertes, horloge) et laisse tomber la ligne de build, qui vit déjà dans le pied de page. */ .vigie-etat-barre { gap: 0.4rem; font-size: 0.66rem; } .vigie-etat-build { display: none; } .vigie-pastille-etat { padding: 0.15rem 0.2rem; } .vigie-pastille-etat .vigie-pastille-etat-nom { display: none; } } /* Entre 900 et 1250 px, la barre d'état est plus étroite que la somme de ses libellés : on garde les icônes, le nom vit dans l'infobulle et le panneau. */ @media (max-width: 1250px) { .vigie-pastille-etat-nom { display: none; } } /* --- Lueur d'hologramme (thème sombre uniquement) ----------------------------- */ /* Les éléments ACTIFS et les métriques héro reçoivent une lueur douce dans la couleur qu'ils portent déjà (currentColor) : cyan hologramme pour l'accent, ambre pour l'attention, rouge pour le critique. La lueur AJOUTE de la présence sans jamais remplacer la couleur elle-même — les contrastes AA mesurés sur le texte restent ceux du thème. En clair, rien : l'ambiance y est lumineuse, pas luminescente. */ :root.vigie-sombre .vigie-ttfb, :root.vigie-sombre .vigie-stat-valeur, :root.vigie-sombre .vigie-hero-valeur, :root.vigie-sombre .vigie-kpi-tuile-valeur, :root.vigie-sombre .vigie-uptime-valeur { text-shadow: 0 0 14px color-mix(in srgb, currentColor 30%, transparent); } :root.vigie-sombre .vigie-activite-actif, :root.vigie-sombre .vigie-onglet-editeur-actif .vigie-onglet-code, :root.vigie-sombre .vigie-marque { text-shadow: 0 0 9px color-mix(in srgb, var(--vigie-accent) 40%, transparent); } :root.vigie-sombre .vigie-activite-actif .mud-icon-root, :root.vigie-sombre .vigie-pastille-etat-ok .mud-icon-root, :root.vigie-sombre .vigie-pastille-etat-attention .mud-icon-root, :root.vigie-sombre .vigie-pastille-etat-critique .mud-icon-root { filter: drop-shadow(0 0 3px color-mix(in srgb, currentColor 55%, transparent)); } /* Les pastilles de statut s'allument comme des diodes de pupitre. */ :root.vigie-sombre .vigie-statut-up { box-shadow: 0 0 0 2px color-mix(in srgb, var(--vigie-ok) 22%, transparent), 0 0 8px color-mix(in srgb, var(--vigie-ok) 60%, transparent); } :root.vigie-sombre .vigie-statut-down { box-shadow: 0 0 0 2px color-mix(in srgb, var(--vigie-ko) 25%, transparent), 0 0 8px color-mix(in srgb, var(--vigie-ko) 65%, transparent); } /* L'onglet analytics actif et la palette prennent un halo cyan discret. */ :root.vigie-sombre .vigie-onglet-actif { box-shadow: 0 0 12px -4px var(--vigie-accent); } :root.vigie-sombre .vigie-palette { border-color: color-mix(in srgb, var(--vigie-accent) 40%, var(--vigie-bordure-forte)); box-shadow: 0 20px 48px var(--vigie-ombre-forte), 0 0 28px -10px var(--vigie-accent); } /* --- Mouvement réduit -------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .vigie-pastille-etat-critique, .vigie-statut-down, .vigie-gate-encours { animation: none; } /* Ni allumage ni texture d'écran : la surface est simplement là. */ .vigie-surface { animation: none; background-image: none; } .vigie-palette { background-image: none; } .vigie-carte, .vigie-carte::before, .vigie-activite-lien, .vigie-onglet-editeur, .vigie-pastille-etat, .vigie-quickopen, .vigie-pied-liens a, .vigie-logs-job, .vigie-pied-build a.vigie-badge-mono { transition: none; } } /* --- Plomberie Blazor -------------------------------------------------------- */ #blazor-error-ui { display: none; position: fixed; bottom: var(--vigie-h-etat); left: 0; right: 0; background: var(--vigie-attention); color: var(--vigie-accent-contraste); padding: 0.5rem 1.25rem; z-index: 90; } #blazor-error-ui .dismiss { cursor: pointer; float: right; } .blazor-error-boundary { background: #b32121; padding: 1rem; color: white; border-radius: var(--vigie-rayon-petit); } .blazor-error-boundary::after { content: "Une erreur est survenue."; } /* Texte réservé aux lecteurs d'écran : retiré du flux visuel sans être masqué (display:none et visibility:hidden le retireraient aussi de l'arbre d'accessibilité). Sert aux explications que le title seul ne restitue pas : il est inaccessible au clavier et ignoré 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; } /* Embleme de marque : couleur dediee (rouge insigne) et non le rouge d'etat critique, pour qu'une marque ne se lise jamais comme une alerte. Legerement plus grand que le texte qui l'accompagne, le motif radial etant dense. */ :root { --vigie-embleme: #c8102e; } .vigie-sombre { --vigie-embleme: #e13b3b; } .vigie-embleme { display: inline-block; vertical-align: -0.18em; flex: none; color: var(--vigie-embleme); } .vigie-embleme-marque { width: 1.7em; height: 1.7em; } .connexion-embleme { width: 1.25em; height: 1.25em; }