/* ───────────────────────────────────────────────────────────────────────────── Thiris Hub — Feuille de style (charte Thiris) ───────────────────────────────────────────────────────────────────────────── */ :root { /* Gestion automatique du thème : « light dark » fait suivre la préférence système (clair/sombre) sans JavaScript. Les valeurs light-dark(clair, sombre) basculent selon le color-scheme effectif ; forcer color-scheme:light|dark sur (cf. sélecteur de thème) impose un thème, sinon c'est l'auto système. */ color-scheme: light dark; /* Marque */ --blue: light-dark(#0066B3, #3B96DD); --blue-dark: light-dark(#004A82, #8FC4EE); /* texte accent sur teinte/surface */ --blue-hover: light-dark(#004A82, #2E6FA6); /* fond de survol des boutons bleus */ --blue-light: light-dark(#E8F4FD, #15314A); /* teinte bleue (puces, liens actifs) */ --orange: light-dark(#F5A623, #F5B040); --orange-dark: light-dark(#D4891A, #F2B453); /* texte accent orange */ --red: light-dark(#C0392B, #F08A7E); --green: light-dark(#1E8E3E, #4FC97A); /* Niveaux de gris sémantiques (clair = fonds, foncé = textes) */ --gray-50: light-dark(#F9FAFB, #0F1620); --gray-100: light-dark(#F3F4F6, #19222F); --gray-200: light-dark(#E5E7EB, #283546); --gray-300: light-dark(#D1D5DB, #3A4A5E); --gray-500: light-dark(#6B7280, #8A95A3); --gray-600: light-dark(#4B5563, #A3AEBC); --gray-700: light-dark(#374151, #C2CAD4); --gray-800: light-dark(#1F2937, #DFE5EC); --gray-900: light-dark(#111827, #F4F7FA); --white: light-dark(#FFFFFF, #1B2433); /* surface (cartes, panneaux) */ /* Teintes d'état (fonds + bordures) */ --success-bg: light-dark(var(--success-bg), #12301E); --success-border: light-dark(var(--success-border), #1F4D31); --danger-bg: light-dark(var(--danger-bg), #3A1714); --danger-bg-hover: light-dark(#FBD9D4, #4A1D19); --danger-border: light-dark(#F5C6C2, #5E2620); --warn-bg: light-dark(var(--warn-bg), rgba(245, 166, 35, 0.20)); --overlay: light-dark(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6)); --shadow-sm: light-dark(0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.45)); --shadow: light-dark(0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 4px 10px -1px rgba(0, 0, 0, 0.55)); --shadow-lg: light-dark(0 10px 25px -3px rgba(0, 0, 0, 0.1), 0 12px 28px -3px rgba(0, 0, 0, 0.65)); --radius: 8px; --radius-lg: 12px; --transition: 0.2s ease; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--gray-800); background: var(--gray-50); line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: var(--blue); text-decoration: none; } /* ─── Page de connexion ──────────────────────────────────────────────────── */ .auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: linear-gradient(135deg, var(--blue-light) 0%, var(--white) 55%, var(--gray-50) 100%); } .auth-card { width: 100%; max-width: 400px; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 36px 32px; } .auth-logo { display: block; max-width: 170px; height: auto; margin: 0 auto 22px; } .auth-title { text-align: center; font-size: 1.25rem; font-weight: 600; color: var(--gray-900); margin-bottom: 4px; } .auth-subtitle { text-align: center; font-size: 0.875rem; color: var(--gray-500); margin-bottom: 26px; } /* ─── Formulaires ────────────────────────────────────────────────────────── */ .field { margin-bottom: 16px; } .field label { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--gray-700); margin-bottom: 6px; } .field input { width: 100%; padding: 11px 13px; font-size: 0.9375rem; font-family: inherit; color: var(--gray-900); background: var(--white); border: 1px solid var(--gray-300); border-radius: var(--radius); transition: border-color var(--transition), box-shadow var(--transition); } .field input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 102, 179, 0.12); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 11px 16px; font-size: 0.9375rem; font-weight: 600; font-family: inherit; color: #fff; background: var(--blue); border: none; border-radius: var(--radius); cursor: pointer; transition: background var(--transition); } .btn:hover { background: var(--blue-hover); } .alert { padding: 11px 13px; border-radius: var(--radius); font-size: 0.875rem; margin-bottom: 18px; } .alert-error { background: var(--danger-bg); color: var(--red); border: 1px solid var(--danger-border); } .alert-success { background: var(--success-bg); color: var(--green); border: 1px solid var(--success-border); } /* ─── Coque applicative (sidebar) ─────────────────────────────────────────── */ html { height: 100%; } .app-shell { display: flex; align-items: stretch; min-height: 100vh; } .sidebar { width: 248px; flex-shrink: 0; display: flex; flex-direction: column; background: var(--white); border-right: 1px solid var(--gray-200); padding: 16px 0; overflow-y: auto; } .sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 0 20px 16px; margin-bottom: 12px; border-bottom: 1px solid var(--gray-200); text-decoration: none; } .sidebar-brand img { height: 36px; width: auto; } .sidebar-brand-text strong { display: block; font-size: 0.95rem; font-weight: 700; color: var(--gray-900); } .sidebar-brand-text span { font-size: 0.75rem; color: var(--gray-500); } .sidebar-section { margin-bottom: 2px; } summary.sidebar-section-title { list-style: none; cursor: pointer; user-select: none; display: flex; align-items: center; gap: 8px; padding: 9px 20px; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray-500); } summary.sidebar-section-title::-webkit-details-marker { display: none; } .sidebar-section-label { margin-right: auto; } summary.sidebar-section-title::after { content: ""; width: 6px; height: 6px; flex-shrink: 0; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform 0.18s ease; opacity: 0.6; } details.sidebar-section[open] > summary.sidebar-section-title::after { transform: rotate(45deg); } summary.sidebar-section-title:hover { color: var(--gray-700); } .sidebar-section-badges { display: inline-flex; align-items: center; gap: 4px; } details.sidebar-section[open] > summary .sidebar-section-badges { display: none; } .sidebar nav a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 20px; color: var(--gray-700); text-decoration: none; font-size: 0.9rem; font-weight: 500; border-left: 3px solid transparent; transition: background var(--transition), color var(--transition); } .sidebar nav a:hover { background: var(--gray-100); color: var(--gray-900); } .sidebar nav a.active { color: var(--blue-dark); background: var(--blue-light); border-left-color: var(--blue); font-weight: 600; } .sidebar nav a.disabled { color: var(--gray-300); pointer-events: none; } .nav-badge { flex-shrink: 0; min-width: 1.3rem; padding: 2px 7px; font-size: 0.68rem; font-weight: 700; line-height: 1.2; text-align: center; border-radius: 999px; background: var(--blue-light); color: var(--blue-dark); } .nav-soon { flex-shrink: 0; font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--orange-dark); } /* Supervision : liste des sites (liens vers le parc filtré), sous Sites/Parc */ .nav-tree { margin: 2px 0 4px; } .sidebar nav a.nav-tree-site-link { padding: 6px 20px 6px 34px; font-size: 0.85rem; font-weight: 400; color: var(--gray-600); } .sidebar nav a.nav-tree-site-link.active { color: var(--blue-dark); font-weight: 600; } .nav-tree-leaf-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-tree-count { flex: 0 0 auto; min-width: 1.2rem; padding: 1px 6px; font-size: 0.66rem; font-weight: 600; text-align: center; border-radius: 999px; background: var(--gray-100); color: var(--gray-500); } .nav-tree-empty { display: block; padding: 5px 20px 5px 34px; font-size: 0.78rem; font-style: italic; color: var(--gray-500); } .main-col { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; } /* Barre supérieure (utilisateur + burger mobile) */ .topbar { display: flex; align-items: center; justify-content: flex-end; gap: 14px; height: 60px; padding: 0 24px; background: var(--white); border-bottom: 1px solid var(--gray-200); } .topbar-user { display: flex; align-items: center; gap: 14px; font-size: 0.875rem; color: var(--gray-600); } .topbar-user strong { color: var(--gray-800); font-weight: 600; } .btn-ghost { padding: 7px 14px; font-size: 0.8125rem; font-weight: 500; color: var(--gray-700); background: var(--gray-100); border: 1px solid var(--gray-200); border-radius: var(--radius); cursor: pointer; transition: background var(--transition); } .btn-ghost:hover { background: var(--gray-200); } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; color: var(--gray-600); background: var(--gray-100); border: 1px solid var(--gray-200); border-radius: var(--radius); cursor: pointer; transition: background var(--transition), color var(--transition); } .theme-toggle:hover { background: var(--gray-200); color: var(--gray-900); } .theme-toggle svg { display: block; width: 18px; height: 18px; } .burger { display: none; margin-right: auto; width: 38px; height: 38px; background: transparent; border: 1px solid var(--gray-200); border-radius: var(--radius); cursor: pointer; align-items: center; justify-content: center; } .burger span { position: relative; display: block; width: 18px; height: 2px; background: var(--gray-700); border-radius: 2px; } .burger span::before, .burger span::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--gray-700); border-radius: 2px; transition: transform 0.2s ease; } .burger span::before { top: -6px; } .burger span::after { top: 6px; } body.menu-open .burger span { background: transparent; } body.menu-open .burger span::before { transform: translateY(6px) rotate(45deg); } body.menu-open .burger span::after { transform: translateY(-6px) rotate(-45deg); } .sidebar-overlay { display: none; } /* ─── Contenu ─────────────────────────────────────────────────────────────── */ .content { flex: 1 1 auto; padding: 32px 28px; overflow-y: auto; } @media (max-width: 860px) { .burger { display: inline-flex; } .topbar { justify-content: space-between; } .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 260px; max-width: 85vw; z-index: 50; transform: translateX(-100%); transition: transform 0.22s ease; box-shadow: var(--shadow-lg); } body.menu-open .sidebar { transform: translateX(0); } .sidebar-overlay { display: block; position: fixed; inset: 0; background: var(--overlay); z-index: 40; opacity: 0; pointer-events: none; transition: opacity 0.22s ease; } body.menu-open .sidebar-overlay { opacity: 1; pointer-events: auto; } body.menu-open { overflow: hidden; } } .page-title { font-size: 1.5rem; font-weight: 700; color: var(--gray-900); margin-bottom: 4px; } .page-lead { color: var(--gray-500); font-size: 0.9375rem; margin-bottom: 30px; } .menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; } .menu-card { display: block; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .menu-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--blue); } .menu-card .icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius); background: var(--blue-light); font-size: 1.4rem; margin-bottom: 14px; } .menu-card h3 { font-size: 1rem; font-weight: 600; color: var(--gray-900); margin-bottom: 4px; } .menu-card p { font-size: 0.8125rem; color: var(--gray-500); } .menu-card.disabled { opacity: 0.6; pointer-events: none; } .menu-card .badge { display: inline-block; margin-top: 10px; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--orange-dark); background: var(--warn-bg); padding: 2px 8px; border-radius: 999px; } /* ─── Module Tâches (todo) ───────────────────────────────────────────────── */ .todo-page { padding-bottom: 2rem; } .todo-page h1, .todo-edit-wrap h1 { font-size: 1.5rem; font-weight: 700; color: var(--gray-900); margin-bottom: 0.75rem; } .muted { color: var(--gray-500); font-size: 0.875rem; } /* Boutons additionnels */ .btn-inline { display: inline-flex; align-items: center; width: auto; padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 600; border-radius: var(--radius); border: none; cursor: pointer; font-family: inherit; text-decoration: none; } .btn-primary-inline { background: var(--blue); color: #fff; } .btn-primary-inline:hover { background: var(--blue-hover); } .btn-secondary { background: var(--gray-100); color: var(--gray-700); border: 1px solid var(--gray-200); } .btn-secondary:hover { background: var(--gray-200); } .btn-danger { background: var(--danger-bg); color: var(--red); border: 1px solid var(--danger-border); } .btn-danger:hover { background: var(--danger-bg-hover); } /* Bouton « lien » discret pour action sensible (ex. révocation de jeton) */ .btn-link-danger { appearance: none; background: none; border: none; padding: 0; font: inherit; font-weight: 600; font-size: 0.85rem; color: var(--red); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } .btn-link-danger:hover { opacity: 0.8; } /* Zone d'action sensible, visuellement séparée des actions courantes */ .danger-zone { margin-top: 1.1rem; padding-top: 0.85rem; border-top: 1px dashed var(--danger-border); } .danger-zone__label { display: block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--red); margin-bottom: 0.4rem; } .danger-zone .hint { margin-top: 0.35rem; } .todo-new-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 1rem; } /* Filtres */ .todo-filters { margin-bottom: 1.25rem; padding: 1rem 1.15rem; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .todo-filters__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 0.85rem 1rem; align-items: end; } .todo-filters__field label { display: block; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gray-500); margin-bottom: 0.35rem; } .todo-filters__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .hub-select { width: 100%; padding: 0.6rem 0.8rem; border-radius: var(--radius); border: 1px solid var(--gray-300); background: var(--white); color: var(--gray-900); font-family: inherit; font-size: 1rem; line-height: 1.4; cursor: pointer; transition: border-color var(--transition), box-shadow var(--transition); } .hub-select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 102, 179, 0.12); } /* Liste déroulante native : garantit taille + contraste des options (surtout en thème sombre). */ .hub-select option { font-size: 1rem; padding: 0.4rem 0.6rem; background: var(--white); color: var(--gray-900); } /* Puces de filtre par statut (multi-sélection moderne) */ .todo-filters__field--status { grid-column: 1 / -1; } .filter-chips { display: flex; flex-wrap: wrap; gap: 8px; } .filter-chip { position: relative; cursor: pointer; user-select: none; } .filter-chip input { position: absolute; opacity: 0; width: 0; height: 0; } .filter-chip span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; font-size: 0.85rem; font-weight: 500; color: var(--gray-500); background: var(--white); border: 1px solid var(--gray-200); transition: background var(--transition), color var(--transition), border-color var(--transition); } .filter-chip span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gray-300); transition: background var(--transition); } .filter-chip:hover span { background: var(--gray-50); color: var(--gray-700); } .filter-chip input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; } .filter-chip input:checked + span { font-weight: 600; } .filter-chip input:checked + span::before { background: currentColor; } .filter-chip--pending input:checked + span { color: var(--gray-700); background: var(--gray-100); border-color: var(--gray-300); } .filter-chip--in_progress input:checked + span { color: var(--blue-dark); background: var(--blue-light); border-color: var(--blue); } .filter-chip--done input:checked + span { color: var(--green); background: var(--success-bg); border-color: var(--success-border); } .filter-chip--cancelled input:checked + span { color: var(--gray-600); background: var(--gray-100); border-color: var(--gray-300); } .todo-filters input[type="search"] { width: 100%; min-width: 0; padding: 0.6rem 0.8rem; border-radius: var(--radius); border: 1px solid var(--gray-300); background: var(--white); color: var(--gray-900); font-family: inherit; font-size: 0.9rem; } .todo-filters input[type="search"]:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 102, 179, 0.12); } /* Tableau */ .table-wrap { overflow-x: auto; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-sm); } table { width: 100%; border-collapse: collapse; font-size: 0.875rem; } th, td { padding: 0.65rem 0.8rem; text-align: left; border-bottom: 1px solid var(--gray-200); vertical-align: top; } tbody tr:last-child td { border-bottom: none; } th { background: var(--gray-50); color: var(--gray-500); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; } th a.sort { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 0.3rem; } th a.sort:hover { color: var(--blue); } th .sort-ind { font-size: 0.7rem; color: var(--blue); } tbody tr:hover td { background: var(--gray-50); } td.mono { font-variant-numeric: tabular-nums; font-size: 0.82rem; color: var(--gray-600); } .mono { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; font-variant-numeric: tabular-nums; } .todo-title-link { color: var(--blue); text-decoration: none; font-weight: 500; } .todo-title-link:hover { text-decoration: underline; } .excerpt { color: var(--gray-500); font-size: 0.8rem; line-height: 1.4; max-width: 320px; margin-top: 2px; } /* Badges */ .todo-badge { display: inline-block; padding: 0.18rem 0.5rem; border-radius: 6px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; } .todo-badge-pending { background: var(--gray-100); color: var(--gray-600); } .todo-badge-progress { background: var(--blue-light); color: var(--blue-dark); } .todo-badge-done { background: var(--success-bg); color: var(--green); } .todo-badge-cancelled { background: var(--gray-100); color: var(--gray-500); } .todo-badge-os { background: var(--gray-100); color: var(--gray-700); } .todo-badge-project { background: var(--blue-light); color: var(--blue-dark); } .todo-badge-prio-low { background: var(--gray-100); color: var(--gray-600); } .todo-badge-prio-norm { background: var(--blue-light); color: var(--blue-dark); } .todo-badge-prio-high { background: var(--warn-bg); color: var(--orange-dark); } .todo-badge-prio-critical { background: var(--danger-bg); color: var(--red); } /* Pagination */ .pagination { margin-top: 1rem; display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; color: var(--gray-500); font-size: 0.9rem; } .pagination a { color: var(--blue); } /* Édition */ .todo-edit-wrap { max-width: 720px; } /* Détail poste : pleine largeur sur desktop (la marge vient du padding de .content) */ .todo-edit-wrap.machine-view { max-width: none; } /* Sur grand écran, élargir la grille des champs à 3 colonnes pour mieux remplir */ @media (min-width: 1100px) { .machine-view .form-grid--2 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Mobile : tableaux des onglets scrollables horizontalement plutôt que de déborder la page */ @media (max-width: 700px) { .machine-view table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .machine-view table thead th { white-space: nowrap; } .machine-view .settings-tabs { gap: 2px; } .machine-view .settings-tab { padding: 0.55rem 0.7rem; font-size: 0.85rem; } } .todo-edit-wrap .back { margin-bottom: 0.75rem; } .todo-edit-wrap .back a { color: var(--blue); font-size: 0.9rem; } .todo-edit-wrap .back a:hover { text-decoration: underline; } .form-grid { display: grid; gap: 1rem; } .form-grid .field { margin-bottom: 0; } .field textarea { width: 100%; min-height: 140px; resize: vertical; padding: 0.6rem 0.8rem; border-radius: var(--radius); border: 1px solid var(--gray-300); background: var(--white); color: var(--gray-900); font-family: inherit; font-size: 0.9rem; } .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 102, 179, 0.12); } .field .hint { font-size: 0.78rem; color: var(--gray-500); margin-top: 0.35rem; } .field-caption { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--gray-700); margin-bottom: 0.45rem; } .readonly-meta { font-size: 0.85rem; color: var(--gray-500); margin-bottom: 1.25rem; line-height: 1.6; } .readonly-meta code { font-size: 0.8rem; color: var(--gray-700); background: var(--gray-100); padding: 1px 5px; border-radius: 4px; } /* Contrôle segmenté (statut / priorité) */ .hub-seg { display: flex; flex-wrap: wrap; width: 100%; padding: 4px; border-radius: var(--radius-lg); background: var(--gray-100); border: 1px solid var(--gray-200); gap: 3px; } .hub-seg__item { flex: 1 1 auto; min-width: min(100%, 7.5rem); position: relative; cursor: pointer; } .hub-seg__item input { position: absolute; opacity: 0; width: 0; height: 0; } .hub-seg__text { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 2.5rem; padding: 0.4rem 0.5rem; border-radius: var(--radius); font-size: 0.82rem; font-weight: 600; color: var(--gray-600); transition: background var(--transition), color var(--transition), box-shadow var(--transition); } .hub-seg__item:hover .hub-seg__text { color: var(--gray-900); background: var(--white); } .hub-seg__item input:focus-visible + .hub-seg__text { outline: 2px solid var(--blue); outline-offset: 2px; } .hub-seg__item input:checked + .hub-seg__text { background: var(--white); color: var(--blue-dark); box-shadow: inset 0 0 0 1px var(--blue), var(--shadow-sm); } .actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 1.25rem; } /* ─── Projets : logos / icônes ───────────────────────────────────────────── */ .project-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; overflow: hidden; background: var(--gray-100); border: 1px solid var(--gray-200); flex-shrink: 0; } .project-icon img { width: 100%; height: 100%; object-fit: cover; display: block; } .project-icon-ph { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 0.85rem; font-weight: 700; color: var(--gray-500); } .project-icon--sm { width: 20px; height: 20px; border-radius: 5px; } .project-icon--sm .project-icon-ph { font-size: 0.65rem; } .project-icon--lg { width: 64px; height: 64px; border-radius: 12px; } .project-icon--lg .project-icon-ph { font-size: 1.6rem; } .project-chip { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: var(--gray-700); } /* Édition projet : upload du logo + interrupteur actif */ .logo-upload { display: flex; align-items: center; gap: 16px; } .logo-upload__controls { flex: 1 1 auto; min-width: 0; } .logo-upload__controls input[type="file"] { font-size: 0.85rem; color: var(--gray-600); max-width: 100%; } .logo-remove { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 0.82rem; color: var(--gray-600); cursor: pointer; } .switch-row { display: inline-flex; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--gray-700); cursor: pointer; } .switch-row input { width: 16px; height: 16px; flex-shrink: 0; } /* ─── Tickets ────────────────────────────────────────────────────────────── */ /* Badge de statut « En attente » (les autres réutilisent les couleurs todo). */ .ticket-badge-waiting { background: var(--warn-bg); color: var(--orange-dark); } /* Chips de filtre par statut de ticket. */ .filter-chip--ticket-new input:checked + span { color: var(--gray-700); background: var(--gray-100); border-color: var(--gray-300); } .filter-chip--ticket-in_progress input:checked + span { color: var(--blue-dark); background: var(--blue-light); border-color: var(--blue); } .filter-chip--ticket-waiting input:checked + span { color: var(--orange-dark); background: var(--warn-bg); border-color: var(--orange); } .filter-chip--ticket-resolved input:checked + span { color: var(--green); background: var(--success-bg); border-color: var(--success-border); } .filter-chip--ticket-closed input:checked + span { color: var(--gray-600); background: var(--gray-100); border-color: var(--gray-300); } /* Détail : en-tête */ .ticket-detail .back { margin-bottom: 0.75rem; } .ticket-detail .back a { color: var(--blue); font-size: 0.9rem; } .ticket-head { margin-bottom: 1.25rem; } .ticket-head h1 { margin-bottom: 0.5rem; } .ticket-head-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; font-size: 0.85rem; color: var(--gray-500); } .ticket-head-meta code { font-size: 0.8rem; color: var(--gray-700); background: var(--gray-100); padding: 1px 6px; border-radius: 4px; } /* Détail : grille fil + panneau */ .ticket-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.5rem; align-items: start; } .ticket-thread-col { min-width: 0; } /* Messages du fil */ .ticket-msg { border: 1px solid var(--gray-200); border-radius: var(--radius-lg); background: var(--white); padding: 0.85rem 1rem; margin-bottom: 0.85rem; box-shadow: var(--shadow-sm); } .ticket-msg--agent { border-left: 3px solid var(--blue); } .ticket-msg--requester { border-left: 3px solid var(--gray-300); background: var(--gray-50); } .ticket-msg--system { border-left: 3px solid var(--orange); background: #FFFBF3; } .ticket-msg-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; margin-bottom: 0.4rem; } .ticket-msg-author { font-weight: 600; font-size: 0.85rem; color: var(--gray-800); } .ticket-msg-date { font-size: 0.78rem; color: var(--gray-500); white-space: nowrap; } .ticket-msg-body { font-size: 0.9rem; color: var(--gray-700); line-height: 1.55; word-wrap: break-word; overflow-wrap: anywhere; } .ticket-msg-mail { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.5rem; padding-top: 0.45rem; border-top: 1px dashed var(--gray-200); font-size: 0.78rem; } .ticket-msg-mail .mail-sent { color: var(--green); font-weight: 600; } .ticket-msg-mail .mail-unsent { color: var(--gray-500); } .btn-link-sm { appearance: none; border: none; background: transparent; color: var(--blue); font: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer; padding: 0; } .btn-link-sm:hover { text-decoration: underline; } /* Composer de réponse */ .ticket-reply { margin-top: 0.5rem; } .ticket-reply textarea { width: 100%; min-height: 110px; resize: vertical; padding: 0.6rem 0.8rem; border-radius: var(--radius); border: 1px solid var(--gray-300); background: var(--white); color: var(--gray-900); font-family: inherit; font-size: 0.9rem; } .ticket-reply textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 102, 179, 0.12); } /* Barre d'édition du sujet (pleine largeur, au-dessus du fil) */ .ticket-subject-bar { margin-bottom: 1.25rem; } .ticket-subject-row { display: flex; gap: 0.6rem; align-items: stretch; } .ticket-subject-row input[type="text"] { flex: 1 1 auto; min-width: 0; width: 100%; padding: 11px 13px; font-size: 1rem; font-family: inherit; color: var(--gray-900); background: var(--white); border: 1px solid var(--gray-300); border-radius: var(--radius); transition: border-color var(--transition), box-shadow var(--transition); } .ticket-subject-row input[type="text"]:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 102, 179, 0.12); } .ticket-subject-row .btn-inline { flex: 0 0 auto; white-space: nowrap; } /* Éditeur HTML riche (composer de réponse) */ .rich-editor { border: 1px solid var(--gray-300); border-radius: var(--radius); background: var(--white); overflow: hidden; } .rich-editor:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 102, 179, 0.12); } .rich-editor__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 5px 6px; background: var(--gray-50); border-bottom: 1px solid var(--gray-200); } .re-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--gray-700); cursor: pointer; transition: background var(--transition), border-color var(--transition), color var(--transition); } .re-btn:hover { background: var(--gray-100); border-color: var(--gray-200); color: var(--gray-900); } .re-btn svg { display: block; } .re-btn .re-txt { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; } .re-sep { width: 1px; height: 20px; margin: 0 4px; background: var(--gray-200); } .re-color-wrap { position: relative; overflow: hidden; } .re-color { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; border: none; padding: 0; cursor: pointer; } .rich-editor__area { min-height: 130px; max-height: 420px; overflow-y: auto; padding: 11px 13px; font-size: 0.9rem; line-height: 1.55; color: var(--gray-900); outline: none; } .rich-editor__area:empty::before { content: attr(data-placeholder); color: var(--gray-300); pointer-events: none; } .rich-editor__area p { margin: 0 0 0.6rem; } .rich-editor__area h2 { font-size: 1.1rem; margin: 0.4rem 0 0.5rem; } .rich-editor__area h3 { font-size: 1rem; margin: 0.4rem 0 0.5rem; } .rich-editor__area ul, .rich-editor__area ol { margin: 0 0 0.6rem; padding-left: 1.4rem; } .rich-editor__area blockquote { margin: 0 0 0.6rem; padding: 0.2rem 0 0.2rem 0.8rem; border-left: 3px solid var(--gray-300); color: var(--gray-600); } .rich-editor__area a { color: var(--blue); } .rich-editor__source--hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Rendu d'un message au format HTML dans le fil */ .ticket-msg-body h2 { font-size: 1.05rem; margin: 0.3rem 0 0.45rem; color: var(--gray-800); } .ticket-msg-body h3, .ticket-msg-body h4 { font-size: 0.95rem; margin: 0.3rem 0 0.4rem; color: var(--gray-800); } .ticket-msg-body p { margin: 0 0 0.55rem; } .ticket-msg-body p:last-child { margin-bottom: 0; } .ticket-msg-body ul, .ticket-msg-body ol { margin: 0 0 0.55rem; padding-left: 1.3rem; } .ticket-msg-body blockquote { margin: 0 0 0.55rem; padding: 0.15rem 0 0.15rem 0.7rem; border-left: 3px solid var(--gray-300); color: var(--gray-600); } .ticket-msg-body a { color: var(--blue); text-decoration: underline; } .ticket-msg-body pre { white-space: pre-wrap; background: var(--gray-50); padding: 0.5rem 0.7rem; border-radius: 6px; font-size: 0.85rem; } /* Panneau latéral */ .ticket-panel { position: sticky; top: 1rem; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); background: var(--white); padding: 1rem; box-shadow: var(--shadow-sm); } .ticket-panel .field { margin-bottom: 0.75rem; } .ticket-panel-section { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--gray-200); } .ticket-panel-title { font-size: 0.8125rem; font-weight: 600; color: var(--gray-700); margin-bottom: 0.6rem; } .ticket-tasks { list-style: none; margin: 0 0 0.75rem; padding: 0; } .ticket-tasks li { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.35rem 0; border-bottom: 1px solid var(--gray-100); font-size: 0.85rem; } .ticket-tasks li:last-child { border-bottom: none; } .ticket-merged-banner { margin: 0 0 1rem; padding: 0.7rem 0.9rem; border: 1px solid var(--blue); border-left-width: 3px; border-radius: 6px; background: var(--blue-light); color: var(--blue-dark); font-size: 0.9rem; } .ticket-merged-banner a { color: var(--blue-dark); font-weight: 600; } @media (max-width: 860px) { .ticket-grid { grid-template-columns: 1fr; } .ticket-panel { position: static; } } /* ─── Paramètres d'intégration projet ───────────────────────────────────────── */ .settings-wrap { max-width: 860px; } .settings-section { border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 1rem 1.1rem 1.1rem; margin-bottom: 1.25rem; background: var(--white); } .settings-section > legend { font-weight: 600; font-size: 0.95rem; color: var(--gray-800); padding: 0 0.4rem; } .settings-section .hint { margin-bottom: 0.9rem; } .form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-grid--2 .field { margin-bottom: 0; } .secret-set { color: var(--green); font-weight: 600; font-size: 0.78rem; } .settings-test { margin-top: 1rem; padding-top: 0.85rem; border-top: 1px dashed var(--gray-200); } /* Onglets de la page de paramétrage */ .settings-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 1.25rem; border-bottom: 1px solid var(--gray-200); } .settings-tab { appearance: none; border: none; background: transparent; padding: 0.6rem 1rem; font-family: inherit; font-size: 0.9rem; font-weight: 600; color: var(--gray-500); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--transition), border-color var(--transition); } .settings-tab:hover { color: var(--gray-800); } .settings-tab.is-active { color: var(--blue); border-bottom-color: var(--blue); } .settings-panel { display: none; } .settings-panel.is-active { display: block; } .settings-gear { font-size: 0.85rem; opacity: 0.7; text-decoration: none; } .settings-gear:hover { opacity: 1; } @media (max-width: 860px) { .form-grid--2 { grid-template-columns: 1fr; } } /* Parc — postes regroupés par site, présentés en cartes */ .parc-site { margin-bottom: 1.9rem; } .parc-site__title { display: flex; align-items: baseline; gap: 0.5rem; font-size: 1rem; font-weight: 600; color: var(--gray-800); margin-bottom: 0.9rem; padding-bottom: 0.45rem; border-bottom: 1px solid var(--gray-200); } .parc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; } /* Carte poste */ .parc-card { position: relative; display: flex; flex-direction: column; gap: 14px; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 16px 16px 14px; box-shadow: var(--shadow-sm); overflow: hidden; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .parc-card::before { /* liseré d'accent latéral coloré par statut */ content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--gray-300); } .parc-card--online::before { background: var(--green); } .parc-card--offline::before { background: var(--red); } .parc-card--never::before { background: var(--gray-300); } .parc-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--blue); } .parc-card.is-inactive { opacity: 0.6; } /* En-tête : logo OS + nom + sous-titre, et pastille de statut */ .parc-card__top { display: flex; align-items: flex-start; gap: 10px; } .parc-card__os { flex: 0 0 auto; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius); background: var(--gray-50); border: 1px solid var(--gray-200); color: var(--gray-600); } .parc-card__os--windows { color: #1A86D9; } .parc-card__os--apple { color: var(--gray-800); } .parc-card__os--linux { color: var(--orange-dark); } .parc-card__heading { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .parc-card__name { font-weight: 600; font-size: 0.98rem; color: var(--gray-900); line-height: 1.25; display: flex; align-items: center; gap: .35rem; min-width: 0; } .parc-card__name-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .parc-card__topright { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } .parc-new { flex: none; white-space: nowrap; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #fff; background: var(--green); border-radius: 999px; padding: 3px 9px; box-shadow: var(--shadow-sm); } .parc-card__sub-row { display: flex; align-items: center; gap: 6px; min-width: 0; } .parc-card__sub { font-size: 0.76rem; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; } .parc-card__sub-row .hw-vendor { height: 16px; padding: 0 6px; font-size: 0.64rem; border-radius: 4px; } .parc-card__sub-row .hw-vendor--mono { width: 16px; padding: 0; } .parc-status { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 7px; border-radius: 999px; font-size: 0.7rem; font-weight: 600; white-space: nowrap; border: 1px solid transparent; } .parc-status__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .parc-status--online { color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); border-color: color-mix(in srgb, var(--green) 30%, transparent); } .parc-status--online .parc-status__dot { box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 25%, transparent); } .parc-status--offline { color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); border-color: color-mix(in srgb, var(--red) 30%, transparent); } .parc-status--never { color: var(--gray-500); background: var(--gray-100); border-color: var(--gray-200); } /* Utilisateur principal avec pastille avatar */ .parc-card__user { display: flex; align-items: center; gap: 8px; font-size: 0.84rem; color: var(--gray-700); overflow-wrap: anywhere; } .parc-card__user-ava { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; color: var(--blue-dark); background: var(--blue-light); } /* Jauges CPU / RAM / Disque */ .parc-gauges { display: flex; flex-direction: column; gap: 8px; } .parc-gauge { display: flex; flex-direction: column; gap: 3px; } .parc-gauge__head { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.72rem; } .parc-gauge__label { color: var(--gray-500); } .parc-gauge__val { font-weight: 600; color: var(--gray-700); font-variant-numeric: tabular-nums; } .parc-gauge__track { height: 6px; border-radius: 999px; background: var(--gray-100); overflow: hidden; } .parc-gauge__fill { height: 100%; border-radius: 999px; background: var(--blue); transition: width var(--transition); } .parc-gauge.is-ok .parc-gauge__fill { background: var(--green); } .parc-gauge.is-warn .parc-gauge__fill { background: var(--orange); } .parc-gauge.is-warn .parc-gauge__val { color: var(--orange-dark); } .parc-gauge.is-crit .parc-gauge__fill { background: var(--red); } .parc-gauge.is-crit .parc-gauge__val { color: var(--red); } .parc-gauge.is-empty .parc-gauge__val { color: var(--gray-400, var(--gray-500)); } /* Carte parc : lignes de maintenance/supervision (uptime, MAJ, redémarrage, agent) */ .parc-meta { display: flex; flex-direction: column; gap: 7px; } .parc-meta__row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 0.78rem; } .parc-meta__k { color: var(--gray-500); white-space: nowrap; } .parc-meta__v { font-weight: 600; color: var(--gray-700); text-align: right; font-variant-numeric: tabular-nums; } .parc-meta__v.is-ok { color: var(--green); } .parc-meta__v.is-warn { color: var(--orange-dark); } .parc-meta__v.is-crit { color: var(--red); } .parc-meta__v.is-empty { color: var(--gray-400, var(--gray-500)); font-weight: 500; } /* Pied : type de machine (gauche) + dernière remontée (droite) */ .parc-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.75rem; color: var(--gray-500); font-variant-numeric: tabular-nums; padding-top: 10px; border-top: 1px solid var(--gray-100); } .parc-card__date { display: inline-flex; align-items: center; gap: 5px; } .parc-card__clock { flex: 0 0 auto; opacity: 0.7; } .parc-type { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 600; color: var(--gray-600); } .parc-type svg { flex: 0 0 auto; opacity: 0.75; } /* Barre de filtres du parc */ .parc-toolbar { flex-wrap: wrap; gap: 10px; } .parc-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; } .parc-filters input, .parc-filters select { margin: 0; height: 36px; padding: 0 10px; font-size: 0.875rem; font-family: inherit; color: var(--gray-900); background: var(--white); border: 1px solid var(--gray-300); border-radius: var(--radius); transition: border-color var(--transition), box-shadow var(--transition); } .parc-filters input:focus, .parc-filters select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 102, 179, 0.12); } .parc-filters__search { min-width: 180px; } .parc-filters .btn-inline { height: 36px; } .parc-filters__clear { font-size: 0.82rem; color: var(--blue); align-self: center; } .parc-filters__clear:hover { text-decoration: underline; } @media (max-width: 700px) { .parc-filters { width: 100%; margin-left: 0; } .parc-filters__search { flex: 1; min-width: 0; } } /* Détail poste — bandeau d'infos en colonnes labellisées */ .machine-meta { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 0 0 1.25rem; padding: 13px 16px; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); } .machine-meta__item { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .machine-meta__k { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gray-500); } .machine-meta__v { margin: 0; font-size: 0.86rem; font-weight: 500; color: var(--gray-800); overflow-wrap: anywhere; } .machine-meta__v.mono { font-variant-numeric: tabular-nums; } .machine-meta__v .todo-badge { margin-left: 4px; } /* Détail poste — en-tête « appareil » (logo OS + constructeur) */ .hw-head { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 1rem; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); } .hw-os { flex: 0 0 auto; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius); background: var(--white); border: 1px solid var(--gray-200); color: var(--gray-700); } .hw-head--os-windows .hw-os { color: #1A86D9; } .hw-head--os-apple .hw-os { color: var(--gray-800); } .hw-head--os-linux .hw-os { color: var(--orange-dark); } .hw-head__main { min-width: 0; } .hw-head__title { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 1.02rem; font-weight: 600; color: var(--gray-900); line-height: 1.25; } .hw-head__ver { font-size: 0.8rem; font-weight: 500; color: var(--gray-500); } .hw-head__sub { display: flex; align-items: center; gap: 8px; margin-top: 5px; font-size: 0.86rem; color: var(--gray-700); overflow-wrap: anywhere; } .hw-head__serial { margin-top: 4px; font-size: 0.76rem; color: var(--gray-500); } /* Pastille logo constructeur */ .hw-vendor { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 5px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; color: #fff; background: var(--vendor, var(--gray-500)); white-space: nowrap; flex: 0 0 auto; } .hw-vendor--mono { width: 20px; padding: 0; justify-content: center; border-radius: 50%; color: var(--blue-dark); background: var(--blue-light); } /* Caractéristiques clés en tuiles */ .hw-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 0.25rem; } .hw-spec { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius); } .hw-spec__k { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--gray-500); } .hw-spec__v { font-size: 0.9rem; font-weight: 500; color: var(--gray-800); overflow-wrap: anywhere; } /* Variante de tuiles avec icône (onglet Aperçu) */ .hw-specs--icons .hw-spec { flex-direction: row; align-items: center; gap: 11px; } .hw-spec__ic { flex: 0 0 auto; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius); background: var(--white); border: 1px solid var(--gray-200); color: var(--gray-600); } .hw-spec__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; } /* Bloc forcé sur 4 colonnes (ex. Système & antivirus : 8 tuiles → 2 lignes) */ .hw-specs--cols4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 760px) { .hw-specs--cols4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 440px) { .hw-specs--cols4 { grid-template-columns: 1fr; } } /* Onglet Matériel — blocs thématiques modernes */ .hw-block { margin-top: 1.6rem; } .hw-block:first-of-type { margin-top: 0.5rem; } .hw-block__title { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--gray-500); margin-bottom: 0.75rem; } .hw-block__title svg { flex: 0 0 auto; opacity: 0.85; } .hw-block__title .muted { text-transform: none; letter-spacing: 0; font-weight: 500; } /* Sous-onglets (ex. onglet Matériel) — style « pilule », distinct des onglets principaux */ .subtabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 1.2rem; } .subtab { appearance: none; display: inline-flex; align-items: center; gap: 6px; padding: 0.4rem 0.85rem; border: 1px solid var(--gray-200); border-radius: 999px; background: var(--white); font-family: inherit; font-size: 0.82rem; font-weight: 600; color: var(--gray-600); cursor: pointer; transition: color var(--transition), border-color var(--transition), background var(--transition); } .subtab svg { flex: 0 0 auto; opacity: 0.75; } .subtab:hover { color: var(--gray-900); border-color: var(--gray-300); } .subtab.is-active { color: var(--blue); border-color: var(--blue); background: var(--blue-light); } .subtab.is-active svg { opacity: 1; } .subpanel { display: none; } .subpanel.is-active { display: block; } .subpanel .hw-block:first-of-type { margin-top: 0.2rem; } /* Sous-groupe à l'intérieur d'un bloc (ex. Volumes / Disques physiques) */ .hw-subtitle { display: flex; align-items: center; gap: 6px; margin: 1rem 0 0.6rem; font-size: 0.78rem; font-weight: 600; color: var(--gray-700); } .hw-block__title + .hw-subtitle { margin-top: 0.2rem; } .hw-subtitle svg { flex: 0 0 auto; opacity: 0.8; } .hw-subtitle .muted { font-weight: 500; } /* Volumes de stockage avec jauge d'occupation */ .vol-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .vol-card { display: flex; flex-direction: column; gap: 9px; padding: 13px 15px; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); } .vol-card__head { display: flex; align-items: center; gap: 10px; } .vol-card__icon { flex: 0 0 auto; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius); background: var(--white); border: 1px solid var(--gray-200); color: var(--gray-600); } .vol-card__label { font-weight: 600; font-size: 0.92rem; color: var(--gray-900); } .vol-card__sub { font-size: 0.72rem; color: var(--gray-500); } .vol-card__bar { height: 7px; border-radius: 999px; background: var(--gray-100); overflow: hidden; } .vol-card__fill { height: 100%; border-radius: 999px; background: var(--blue); transition: width var(--transition); } .vol-card.is-ok .vol-card__fill { background: var(--green); } .vol-card.is-warn .vol-card__fill { background: var(--orange); } .vol-card.is-crit .vol-card__fill { background: var(--red); } .vol-card__foot { display: flex; justify-content: space-between; font-size: 0.74rem; color: var(--gray-600); font-variant-numeric: tabular-nums; } /* Pastilles d'état (Secure Boot, TPM, santé disque…) */ .hw-pills-row { display: flex; flex-wrap: wrap; gap: 8px; } .hw-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 0.74rem; font-weight: 600; color: var(--gray-600); background: var(--gray-100); } .hw-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .hw-pill.is-ok { color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); } .hw-pill.is-bad { color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); } /* Tableau de bord « État de sécurité » : tuiles de contrôle colorées (ok/bad) */ .sec-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(195px, 1fr)); gap: 10px; margin-top: 0.25rem; } .sec-check { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: var(--radius); border: 1px solid var(--gray-200); background: var(--gray-50); } .sec-check__ic { flex: 0 0 auto; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius); background: var(--white); border: 1px solid var(--gray-200); color: var(--gray-600); } .sec-check__main { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .sec-check__lab { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--gray-500); } .sec-check__val { font-size: 0.9rem; font-weight: 600; color: var(--gray-800); } .sec-check.is-ok { border-color: color-mix(in srgb, var(--green) 35%, var(--gray-200)); } .sec-check.is-ok .sec-check__ic { color: var(--green); background: color-mix(in srgb, var(--green) 13%, transparent); border-color: transparent; } .sec-check.is-ok .sec-check__val { color: var(--green); } .sec-check.is-bad { border-color: color-mix(in srgb, var(--red) 35%, var(--gray-200)); } .sec-check.is-bad .sec-check__ic { color: var(--red); background: color-mix(in srgb, var(--red) 13%, transparent); border-color: transparent; } .sec-check.is-bad .sec-check__val { color: var(--red); } /* Cartes « composant » (barrettes, disques physiques, GPU, écrans) */ .dev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; } .dev-card { display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius); } .dev-card__icon { flex: 0 0 auto; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius); background: var(--white); border: 1px solid var(--gray-200); color: var(--gray-600); } .dev-card__body { min-width: 0; flex: 1; } .dev-card__name { font-weight: 600; font-size: 0.86rem; color: var(--gray-800); overflow-wrap: anywhere; } .dev-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 3px; font-size: 0.74rem; color: var(--gray-500); } .dev-card__meta .hw-pill { padding: 1px 8px; font-size: 0.68rem; } .dev-card__tag { font-size: 0.68rem; font-weight: 600; color: var(--gray-600); background: var(--gray-100); border: 1px solid var(--gray-200); border-radius: 4px; padding: 1px 6px; } /* Onglet Utilisateurs — cartes profil */ .user-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; } .user-card { display: flex; gap: 11px; align-items: flex-start; padding: 13px 15px; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); } .user-card__ava { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.95rem; color: var(--blue-dark); background: var(--blue-light); } .user-card__body { min-width: 0; flex: 1; } .user-card__name { font-weight: 600; font-size: 0.92rem; color: var(--gray-900); overflow-wrap: anywhere; } .user-card__path { font-size: 0.72rem; color: var(--gray-500); margin-top: 1px; overflow-wrap: anywhere; } .user-card__badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; } .user-card__last { font-size: 0.72rem; color: var(--gray-500); margin-top: 7px; } /* Listes (logiciels, démarrage, tâches, imprimantes, partages) */ .sw-list { border: 1px solid var(--gray-200); border-radius: var(--radius-lg); overflow: hidden; background: var(--white); } .sw-row { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-top: 1px solid var(--gray-100); } .sw-row:first-child { border-top: none; } .sw-row:hover { background: var(--gray-50); } .sw-row__main { min-width: 0; flex: 1; } .sw-row__name { font-size: 0.86rem; font-weight: 500; color: var(--gray-800); overflow-wrap: anywhere; } .sw-row__sub { font-size: 0.74rem; color: var(--gray-500); overflow-wrap: anywhere; margin-top: 1px; } .sw-row__aside { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; } .sw-scope { font-size: 0.7rem; font-weight: 600; color: var(--gray-500); white-space: nowrap; } /* Icône d'application : vrai logo (CDN), sinon icône thématique, sinon monogramme */ .sw-ic { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.8rem; color: var(--c, var(--gray-600)); /* Plaque d'icône claire fixe (dans les 2 thèmes) : un logo monochrome foncé (ownCloud, GitHub, Notion…) reste lisible même en thème sombre. */ background: #fff; border: 1px solid rgba(0, 0, 0, 0.10); } .sw-ic__logo { width: 18px; height: 18px; object-fit: contain; display: block; } .sw-ic__fb { display: none; line-height: 0; } /* repli masqué tant que le logo charge */ .sw-ic--fb .sw-ic__fb { display: inline-flex; } /* logo en échec → on révèle l'icône thématique */ /* Applications en grille de cartes */ .sw-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); gap: 10px; } .sw-app { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 7px; padding: 12px 14px; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--c, var(--gray-500)) 5%, var(--white)); } .sw-app:hover { border-color: color-mix(in srgb, var(--c, var(--blue)) 55%, var(--gray-200)); } /* Logo officiel en filigrane de fond → reconnaissance immédiate */ .sw-app__bg { position: absolute; right: -10px; bottom: -12px; width: 82px; height: 82px; object-fit: contain; opacity: 0.13; pointer-events: none; z-index: -1; } .sw-app__head { display: flex; align-items: center; gap: 10px; min-width: 0; } .sw-app__name { font-size: 0.86rem; font-weight: 500; color: var(--gray-800); min-width: 0; overflow-wrap: anywhere; } .sw-app__pub { font-size: 0.74rem; color: var(--gray-500); overflow-wrap: anywhere; } .sw-app__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 3px; } /* ─── Onglet Cloud : cartes fournisseurs ─────────────────────────────────── */ .cloud-card { border: 1px solid var(--gray-200); border-radius: var(--radius-lg); background: var(--white); padding: 14px 16px; margin-top: 14px; } .cloud-card:first-of-type { margin-top: 0.5rem; } .cloud-card__head { display: flex; align-items: center; gap: 12px; } .cloud-card__id { min-width: 0; flex: 1; } .cloud-card__name { font-weight: 600; font-size: 0.95rem; color: var(--gray-900); } .cloud-card__sub { font-size: 0.76rem; color: var(--gray-500); margin-top: 1px; } .cloud-card__count { flex: 0 0 auto; font-size: 0.78rem; font-weight: 700; color: var(--gray-600); background: var(--gray-100); border-radius: 999px; padding: 2px 11px; } .cloud-run { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; font-size: 0.76rem; font-weight: 600; padding: 3px 11px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; } .cloud-run__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .cloud-run.is-on { color: var(--green); background: var(--success-bg); border-color: var(--success-border); } .cloud-run.is-off { color: var(--gray-600); background: var(--gray-100); border-color: var(--gray-200); } .cloud-acct { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--gray-200); } .cloud-acct__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; } .cloud-acct__email { font-weight: 600; font-size: 0.85rem; color: var(--gray-800); overflow-wrap: anywhere; } .cloud-acct__win { font-size: 0.72rem; color: var(--gray-500); white-space: nowrap; } .cloud-folders { border: 1px solid var(--gray-100); border-radius: var(--radius); overflow: hidden; } .cloud-folder { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--gray-100); } .cloud-folder:first-child { border-top: none; } .cloud-folder:hover { background: var(--gray-50); } .cloud-folder--flat { border: 1px solid var(--gray-100); border-radius: var(--radius); } .cloud-folder__ic { flex: 0 0 auto; color: var(--gray-500); line-height: 0; } .cloud-folder__main { min-width: 0; flex: 1; } .cloud-folder__path { font-size: 0.82rem; color: var(--gray-800); overflow-wrap: anywhere; } .cloud-folder__meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: 0.72rem; color: var(--gray-500); margin-top: 1px; overflow-wrap: anywhere; } .cloud-size { flex: 0 0 auto; font-size: 0.74rem; font-weight: 600; color: var(--gray-700); background: var(--gray-100); border-radius: 6px; padding: 2px 8px; white-space: nowrap; font-variant-numeric: tabular-nums; } .cloud-size--warn { color: var(--orange-dark); background: var(--warn-bg); } .cloud-state { flex: 0 0 auto; font-size: 0.72rem; font-weight: 600; padding: 2px 10px; border-radius: 999px; white-space: nowrap; } .cloud-state.is-ok { color: var(--green); background: var(--success-bg); } .cloud-state.is-sync { color: var(--blue-dark); background: var(--blue-light); } .cloud-state.is-idle { color: var(--gray-600); background: var(--gray-100); } .cloud-state.is-err { color: var(--red); background: var(--danger-bg-hover); } .cloud-logs { margin-top: 12px; } .cloud-log { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--gray-100); border-radius: var(--radius); } .cloud-log.is-heavy { border-color: var(--orange); background: var(--warn-bg); } .cloud-log__sizes { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; } .cloud-empty { margin: 10px 0 0; } /* Formulaire de renommage d'un poste */ .rename-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .rename-form input[type="text"] { flex: 1; min-width: 200px; margin: 0; padding: 11px 13px; font-size: 1rem; font-family: inherit; color: var(--gray-900); background: var(--white); border: 1px solid var(--gray-300); border-radius: var(--radius); transition: border-color var(--transition), box-shadow var(--transition); } .rename-form input[type="text"]:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 102, 179, 0.12); } /* ───────────────────────────────────────────────────────────────────────────── Santé récente — cartes KPI à jauges + graphiques de tendance ───────────────────────────────────────────────────────────────────────────── */ .health-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.4rem; } .health-head h2 { margin: 0; } .health-head__meta { color: var(--gray-500); font-size: 0.8rem; margin: 0 0 1rem; } /* Sélecteur de période (contrôle segmenté) */ .perf-range { display: inline-flex; gap: 2px; margin-left: auto; padding: 3px; background: var(--gray-100); border: 1px solid var(--gray-200); border-radius: 999px; } .perf-range__btn { padding: 0.3rem 0.8rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; color: var(--gray-600); text-decoration: none; transition: background var(--transition), color var(--transition); } .perf-range__btn:hover { color: var(--gray-900); } .perf-range__btn.is-active { background: var(--white); color: var(--blue); box-shadow: var(--shadow-sm); } /* Cartes KPI (jauges radiales) */ .health-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.8rem; margin-bottom: 1.2rem; } .health-kpi { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 1rem 0.9rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.35rem; } .health-kpi__label { font-weight: 600; font-size: 0.82rem; color: var(--gray-700); } .health-kpi__sub { font-size: 0.72rem; color: var(--gray-500); } .health-kpi__big { font-size: 1.55rem; font-weight: 700; color: var(--gray-900); font-variant-numeric: tabular-nums; line-height: 1.1; } .gauge { position: relative; width: 84px; height: 84px; } .gauge svg { width: 100%; height: 100%; display: block; } .gauge__track { fill: none; stroke: var(--gray-200); stroke-width: 7; } .gauge__arc { fill: none; stroke-width: 7; stroke-linecap: round; transition: stroke-dasharray 0.6s ease; } .gauge__num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.2rem; color: var(--gray-900); font-variant-numeric: tabular-nums; } .gauge__num span { font-size: 0.68rem; font-weight: 600; color: var(--gray-500); margin-left: 1px; } .health-kpi--ok .gauge__arc { stroke: var(--green); } .health-kpi--warn .gauge__arc { stroke: var(--orange); } .health-kpi--crit .gauge__arc { stroke: var(--red); } .health-kpi--na .gauge__arc { stroke: var(--gray-300); } .health-state--ok { color: var(--green); } .health-state--warn { color: var(--orange-dark); } .health-state--crit { color: var(--red); } .health-state--na { color: var(--gray-500); } /* Graphiques de tendance */ .health-charts { display: flex; flex-direction: column; gap: 1rem; } .health-chart { border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 0.8rem 0.95rem 0.9rem; background: var(--white); } .health-chart[data-series="cpu"] { color: var(--blue); } .health-chart[data-series="ram"] { color: var(--green); } .health-chart[data-series="disk"] { color: var(--orange); } .health-chart__head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.45rem; } .health-chart__title { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; font-size: 0.86rem; color: var(--gray-800); } .health-chart__dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; } .health-chart__stats { font-size: 0.78rem; display: inline-flex; gap: 0.5rem; align-items: baseline; } .health-chart__stats b { font-size: 0.98rem; font-variant-numeric: tabular-nums; } .health-chart__plot { position: relative; } .hc-svg { width: 100%; height: auto; display: block; overflow: visible; } .hc-area { fill: currentColor; opacity: 0.13; } .hc-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .hc-grid { stroke: var(--gray-200); stroke-width: 1; stroke-dasharray: 2 3; } .hc-glab { fill: var(--gray-500); font-size: 9px; text-anchor: end; } .hc-cursor { stroke: var(--gray-300); stroke-width: 1; opacity: 0; transition: opacity 0.12s; } .hc-dot { fill: var(--white); stroke: currentColor; stroke-width: 2; opacity: 0; transition: opacity 0.12s; } .hc-tip { position: absolute; transform: translate(-50%, calc(-100% - 10px)); background: var(--gray-800); color: var(--white); border-radius: var(--radius); padding: 0.3rem 0.5rem; font-size: 0.72rem; line-height: 1.3; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.12s; box-shadow: var(--shadow); z-index: 2; } .hc-tip b { display: block; font-size: 0.85rem; font-variant-numeric: tabular-nums; } .hc-tip span { color: var(--gray-300); font-size: 0.68rem; } /* Détail brut repliable */ .health-raw { margin-top: 1.1rem; } .health-raw summary { cursor: pointer; font-size: 0.82rem; font-weight: 600; color: var(--gray-600); padding: 0.4rem 0; user-select: none; } .health-raw summary:hover { color: var(--blue); } .health-raw[open] summary { margin-bottom: 0.5rem; } /* ───────────────────────────────────────────────────────────────────────────── Supervision — cartes de stats (vue d'ensemble) + journal agent ───────────────────────────────────────────────────────────────────────────── */ .subtab__n { display: inline-flex; align-items: center; justify-content: center; min-width: 1.15rem; padding: 0 0.3rem; height: 1.15rem; border-radius: 999px; background: var(--gray-200); color: var(--gray-600); font-size: 0.7rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; } .subtab.is-active .subtab__n { background: var(--blue-light); color: var(--blue-dark); } .sv-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.8rem; } .sv-stat { display: flex; align-items: center; gap: 0.75rem; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 0.8rem 0.9rem; } .sv-stat__ic { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: var(--white); border: 1px solid var(--gray-200); color: var(--gray-500); flex: none; } .sv-stat__main { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; } .sv-stat__val { font-size: 1.25rem; font-weight: 700; color: var(--gray-900); font-variant-numeric: tabular-nums; line-height: 1.15; } .sv-stat__val small { font-size: 0.72rem; font-weight: 600; } .sv-stat__lab { font-size: 0.74rem; color: var(--gray-500); } .sv-stat--ok .sv-stat__ic { color: var(--green); border-color: var(--success-border); background: var(--success-bg); } .sv-stat--warn .sv-stat__ic { color: var(--orange-dark); border-color: var(--orange); background: var(--warn-bg); } .sv-stat--crit .sv-stat__ic { color: var(--red); border-color: var(--danger-border); background: var(--danger-bg); } .sv-stat--warn .sv-stat__val, .sv-stat--warn .sv-stat__val small { color: var(--orange-dark); } .sv-stat--crit .sv-stat__val, .sv-stat--crit .sv-stat__val small { color: var(--red); } /* Journal de l'agent */ .sv-log { max-height: 360px; overflow: auto; background: light-dark(#1e1e22, #0c1016); color: #d6d6d6; border-radius: var(--radius); padding: 0.7rem 0.9rem; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; font-size: 0.76rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; margin: 0; } .sv-log--err { color: #ff6b6b; font-weight: 600; } .sv-log--warn { color: #ffb454; } /* ───────────────────────────────────────────────────────────────────────────── Affectation d'utilisateurs Hub à un poste + changement de site ───────────────────────────────────────────────────────────────────────────── */ .inline-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } /* Puces lecture seule (Aperçu) */ .assignee-list { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; } .assignee-chip { display: inline-flex; align-items: center; padding: 0.12rem 0.5rem; border-radius: 999px; background: var(--blue-light); color: var(--blue-dark); border: 1px solid color-mix(in srgb, var(--blue) 25%, transparent); font-size: 0.78rem; font-weight: 600; } .assignee-chip--principal { background: var(--warn-bg); color: var(--orange-dark); border-color: var(--orange); } /* Grille de cases à cocher (panneau Paramètres) */ .assign-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.5rem; } .assign-check { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.6rem; border: 1px solid var(--gray-200); border-radius: var(--radius); background: var(--gray-50); transition: border-color var(--transition), background var(--transition); } .assign-check:hover { border-color: var(--gray-300); } .assign-check.is-on { border-color: var(--blue); background: var(--blue-light); } .assign-check__pick { display: flex; align-items: center; gap: 0.6rem; flex: 1; min-width: 0; cursor: pointer; } .assign-check__pick input[type="checkbox"] { width: 16px; height: 16px; flex: none; accent-color: var(--blue); cursor: pointer; } .assign-check__main { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; } .assign-check__name { font-size: 0.86rem; font-weight: 600; color: var(--gray-800); overflow: hidden; text-overflow: ellipsis; } .assign-check__sub { font-size: 0.72rem; color: var(--gray-500); overflow: hidden; text-overflow: ellipsis; } .assign-check__star { display: inline-flex; align-items: center; gap: 0.3rem; flex: none; padding: 0.15rem 0.4rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; color: var(--gray-500); cursor: pointer; } .assign-check__star input[type="radio"] { accent-color: var(--orange); cursor: pointer; margin: 0; } .assign-check__star:has(input:checked) { color: var(--orange-dark); } .assign-check__star:has(input:disabled) { opacity: 0.4; cursor: not-allowed; } .assign-check__star:has(input:disabled) input[type="radio"] { cursor: not-allowed; } /* ─── Tableau de bord personnalisé (accueil) ─────────────────────────────── */ .dash-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 30px; } .dash-stat { --accent: var(--blue); position: relative; display: flex; align-items: center; gap: 14px; background: var(--white); border: 1px solid var(--gray-200); border-left: 4px solid var(--accent); border-radius: var(--radius-lg); padding: 18px 20px; box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; transition: transform var(--transition), box-shadow var(--transition); } .dash-stat:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .dash-stat__icon { flex: 0 0 auto; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 14%, var(--white)); font-size: 1.5rem; } .dash-stat__body { min-width: 0; } .dash-stat__num { font-size: 1.85rem; font-weight: 700; line-height: 1.05; color: var(--gray-900); font-variant-numeric: tabular-nums; } .dash-stat__label { font-size: 0.9rem; font-weight: 600; color: var(--gray-700, #374151); } .dash-stat__sub { font-size: 0.75rem; color: var(--gray-500); margin-top: 2px; } .dash-section { margin-bottom: 30px; } .dash-section__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; } .dash-section__head h2 { font-size: 1.05rem; font-weight: 700; color: var(--gray-900); } .dash-section__hint { font-size: 0.8rem; color: var(--gray-500); } .dash-pins { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } .dash-pin-card { position: relative; display: block; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 14px 16px; box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; transition: transform var(--transition), box-shadow var(--transition); } .dash-pin-card:hover { transform: translateY(-1px); box-shadow: var(--shadow); } .dash-pin-card__top { display: flex; align-items: center; gap: 8px; padding-right: 28px; } .dash-pin-card__name { font-weight: 600; color: var(--gray-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dash-pin-card__meta { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 0.8rem; color: var(--gray-500); } .dash-pin-card .dash-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; display: inline-block; } .dash-dot--on { background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 22%, transparent); } .dash-dot--off { background: var(--gray-400, #9ca3af); } /* Bouton « épingle » : overlay sur les cartes de liste, inline ailleurs. */ .pin-host { position: relative; } .pin-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--gray-200); border-radius: 999px; background: var(--white); color: var(--gray-400, #9ca3af); cursor: pointer; padding: 0; line-height: 1; transition: color var(--transition), background var(--transition), box-shadow var(--transition), border-color var(--transition), opacity var(--transition); } .pin-btn:hover { color: var(--blue); border-color: var(--blue); } .pin-btn.is-pinned { color: var(--orange); border-color: var(--orange); background: color-mix(in srgb, var(--orange) 14%, var(--white)); } .pin-btn.is-pinned .pin-btn__icon { fill: currentColor; } .pin-btn__icon { display: block; } .pin-btn--error { border-color: var(--red); box-shadow: 0 0 0 2px color-mix(in srgb, var(--red) 30%, transparent); } .pin-btn--overlay { position: absolute; top: 6px; right: 6px; z-index: 3; width: 28px; height: 28px; opacity: 0; box-shadow: var(--shadow-sm); } .pin-host:hover .pin-btn--overlay, .pin-btn--overlay.is-pinned, .pin-btn--overlay:focus-visible { opacity: 1; } @media (hover: none) { .pin-btn--overlay { opacity: 1; } } /* Cartes denses du parc : le coin haut-droit porte déjà le badge de statut → l'épingle flotte sur le coin, légèrement à l'extérieur, pour ne rien recouvrir. */ .parc-grid .pin-btn--overlay, .netdev-grid .pin-btn--overlay, .ticket-grid .pin-btn--overlay, .pins-grid .pin-btn--overlay { top: -10px; right: -10px; width: 26px; height: 26px; z-index: 5; box-shadow: var(--shadow), 0 0 0 3px var(--white); } .parc-grid .pin-btn--overlay .pin-btn__icon, .netdev-grid .pin-btn--overlay .pin-btn__icon, .ticket-grid .pin-btn--overlay .pin-btn__icon, .pins-grid .pin-btn--overlay .pin-btn__icon { width: 13px; height: 13px; } .pin-btn--inline { vertical-align: middle; } .pin-btn--row { width: 26px; height: 26px; } .pin-btn--row .pin-btn__icon { width: 14px; height: 14px; } /* Tickets épinglés : liste compacte */ .dash-tickets { display: flex; flex-direction: column; gap: 8px; } .dash-ticket { position: relative; display: flex; align-items: center; gap: 10px; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 10px 14px; box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; transition: transform var(--transition), box-shadow var(--transition); } .dash-ticket:hover { transform: translateY(-1px); box-shadow: var(--shadow); } .dash-ticket__subject { flex: 1 1 auto; min-width: 0; font-weight: 600; color: var(--gray-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dash-ticket__id { font-size: 0.8rem; color: var(--gray-500); } .dash-empty { background: var(--white); border: 1px dashed var(--gray-200); border-radius: var(--radius-lg); padding: 18px 20px; color: var(--gray-500); font-size: 0.9rem; } .dash-pin-card__os { flex: 0 0 auto; display: inline-flex; align-items: center; color: var(--gray-500); } .dash-pin-card__top { gap: 8px; } .th-pin, .td-pin { width: 34px; text-align: center; padding-left: 4px; padding-right: 4px; } .td-pin .pin-btn { margin: 0 auto; } /* La carte épinglable remplit sa cellule de grille (hauteurs égales). */ .parc-grid .pin-host, .netdev-grid .pin-host, .dash-pins .pin-host, .ticket-grid .pin-host, .pins-grid .pin-host { display: flex; } .parc-grid .pin-host > a, .netdev-grid .pin-host > a, .dash-pins .pin-host > a, .ticket-grid .pin-host > a, .pins-grid .pin-host > a { flex: 1 1 auto; min-width: 0; } /* ─── Cartes appareil découvert (.netdev-*) — partagées parc + tableau de bord ─ */ .netdev-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(255px, 1fr)); gap:1rem; margin-top:.7rem; } .netdev-card { --tc:#94a3b8; background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:.9rem 1rem; display:flex; flex-direction:column; gap:.7rem; border-top:3px solid var(--tc); transition:box-shadow .15s, transform .15s; text-decoration:none; color:inherit; cursor:pointer; } .netdev-card:hover { box-shadow:var(--shadow-md, 0 4px 14px rgba(0,0,0,.08)); transform:translateY(-1px); } .netdev-card__head { display:flex; align-items:center; gap:.6rem; } .netdev-card__icon { flex:0 0 auto; width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--tc) 14%, white); color:var(--tc); } .netdev-card__id { flex:1 1 auto; min-width:0; } .netdev-card__name { display:block; font-weight:600; color:var(--gray-800, #1f2937); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .netdev-card__type { display:block; font-size:.78rem; color:var(--tc); font-weight:600; } .netdev-card__meta { margin:0; display:flex; flex-direction:column; gap:.25rem; } .netdev-card__row { display:flex; gap:.5rem; font-size:.82rem; align-items:baseline; } .netdev-card__k { flex:0 0 40px; color:var(--gray-500); } .netdev-card__v { flex:1 1 auto; min-width:0; color:var(--gray-700); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .netdev-card__foot { margin-top:auto; padding-top:.55rem; border-top:1px solid var(--gray-100, #f1f5f9); display:flex; align-items:center; justify-content:space-between; gap:.5rem; font-size:.78rem; color:var(--gray-500); } .netdev-tags { display:inline-flex; align-items:center; gap:.35rem; flex-wrap:wrap; } .netdev-card.is-offline { opacity:.62; } .netdev-card.is-offline .netdev-card__icon { filter:grayscale(1); } .netdev-card.is-unverified { opacity:.82; } .netdev-state { display:inline-flex; align-items:center; gap:.35rem; } .netdev-dot { display:inline-block; width:8px; height:8px; border-radius:50%; flex:0 0 auto; } .netdev-dot--on { background:var(--green-500, #22c55e); box-shadow:0 0 0 3px color-mix(in srgb, var(--green-500, #22c55e) 22%, transparent); } .netdev-dot--off { background:var(--gray-400, #9ca3af); } .netdev-dot--unk { background:var(--amber-500, #f59e0b); box-shadow:0 0 0 3px color-mix(in srgb, var(--amber-500, #f59e0b) 22%, transparent); } /* ─── Page Paramètres : sélection d'indicateurs (cases + glisser-déposer) ─── */ .settings-cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:18px; } .settings-card { background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-lg); padding:18px 20px; box-shadow:var(--shadow-sm); } .settings-card h2 { font-size:1rem; font-weight:700; color:var(--gray-900); margin-bottom:12px; } .ind-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; } .ind-item { display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--gray-200); border-radius:var(--radius); background:var(--gray-50); cursor:grab; } .ind-item.is-on { background:color-mix(in srgb, var(--blue) 8%, var(--white)); border-color:color-mix(in srgb, var(--blue) 35%, var(--gray-200)); } .ind-item.is-dragging { opacity:.5; } .ind-grip { color:var(--gray-400, #9ca3af); cursor:grab; font-size:.9rem; letter-spacing:-2px; } .ind-label { display:flex; align-items:center; gap:8px; flex:1 1 auto; cursor:pointer; font-size:.9rem; color:var(--gray-800, #1f2937); } .ind-label input { cursor:pointer; } .ci-mode { display:flex; align-items:center; gap:8px; font-size:.9rem; color:var(--gray-800,#1f2937); margin:.2rem 0; cursor:pointer; } .ci-custom { margin:.5rem 0; max-width:360px; } /* ─── Cartes ticket (tableau de bord, tickets épinglés) ───────────────────── */ /* NB : les cartes sont disposées par leur conteneur .pins-grid. On ne redéfinit PAS .ticket-grid ici — cette classe est celle de la mise en page « détail » (fil de messages | panneau, voir plus haut) et la réécrire l'écrasait. */ .ticket-card { display:flex; flex-direction:column; gap:10px; background:var(--white); border:1px solid var(--gray-200); border-left:3px solid var(--gray-300); border-radius:var(--radius-lg); padding:14px 16px; box-shadow:var(--shadow-sm); text-decoration:none; color:inherit; transition:transform var(--transition), box-shadow var(--transition); } .ticket-card:hover { transform:translateY(-1px); box-shadow:var(--shadow); } .ticket-card--new { border-left-color:var(--blue); } .ticket-card--in_progress { border-left-color:var(--orange); } .ticket-card--waiting { border-left-color:var(--orange); } .ticket-card--resolved { border-left-color:var(--green); } .ticket-card--closed { border-left-color:var(--gray-300); } /* Statuts des tâches (todo) */ .ticket-card--pending { border-left-color:var(--blue); } .ticket-card--done { border-left-color:var(--green); } .ticket-card--cancelled { border-left-color:var(--gray-300); } .ticket-card__subject { font-weight:600; color:var(--gray-900); line-height:1.3; padding-right:18px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .ticket-card__badges { display:flex; flex-wrap:wrap; gap:6px; } .ticket-card__meta { margin-top:auto; display:flex; flex-wrap:wrap; gap:4px; align-items:center; font-size:.78rem; color:var(--gray-500); } .ticket-card__id { font-weight:600; color:var(--gray-600, #4b5563); } /* ─── Vue unifiée des épingles (accueil) ──────────────────────────────────── */ .pins-toolbar { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; margin-bottom:14px; } .pins-chips { display:flex; flex-wrap:wrap; gap:6px; } .pins-chip { display:inline-flex; align-items:center; gap:6px; padding:.35rem .75rem; border:1px solid var(--gray-200); background:var(--white); border-radius:999px; font-size:.85rem; font-weight:600; color:var(--gray-600); cursor:pointer; transition:background var(--transition), color var(--transition), border-color var(--transition); } .pins-chip:hover { color:var(--gray-900); } .pins-chip.is-active { background:var(--blue); border-color:var(--blue); color:#fff; } .pins-chip__n { font-size:.72rem; background:color-mix(in srgb, currentColor 20%, transparent); border-radius:999px; padding:.02rem .4rem; font-variant-numeric:tabular-nums; } .pins-sort { display:inline-flex; align-items:center; gap:6px; font-size:.85rem; color:var(--gray-600); } .pins-sort select { width:auto; min-width:180px; } .pins-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px; align-items:start; } .ticket-card__excerpt { margin:0; font-size:.82rem; line-height:1.4; color:var(--gray-600, #4b5563); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .ticket-card__msg { display:inline-flex; align-items:center; gap:3px; margin-left:auto; font-size:.78rem; color:var(--gray-500); white-space:nowrap; } .thresholds { display:flex; flex-direction:column; gap:10px; } .threshold-row { display:grid; grid-template-columns:1fr 92px 92px; align-items:center; gap:12px; font-size:.9rem; color:var(--gray-800, #1f2937); } .threshold-row--head { font-size:.78rem; color:var(--gray-500); font-weight:600; } .threshold-row__label { white-space:nowrap; } .threshold-input { display:inline-flex; align-items:center; gap:6px; color:var(--gray-500); } .threshold-input input { width:60px; } .th-dot { width:9px; height:9px; border-radius:50%; flex:0 0 auto; display:inline-block; } .th-dot--warn { background:var(--orange); } .th-dot--crit { background:var(--red); } /* ── Supervision : badges de sévérité, onglets d'alertes, éditeur de règles ── */ .sev-badge { display:inline-block; padding:2px 9px; border-radius:999px; font-size:.75rem; font-weight:600; white-space:nowrap; border:1px solid transparent; } .sev-info { color:var(--blue-dark); background:var(--blue-light); border-color:var(--blue); } .sev-warning { color:var(--orange-dark); background:var(--warn-bg); border-color:var(--orange); } .sev-critical { color:var(--red); background:var(--danger-bg-hover); border-color:var(--danger-border); } .alert-tabs { display:flex; flex-wrap:wrap; gap:.4rem; margin:.5rem 0 1.25rem; } .alert-tab { display:inline-flex; align-items:center; gap:.4rem; padding:5px 12px; border-radius:8px; font-size:.85rem; text-decoration:none; color:var(--gray-600); border:1px solid var(--gray-200); background:var(--white); } .alert-tab:hover { background:var(--gray-50); color:var(--gray-800); } .alert-tab.is-active { color:var(--blue-dark); background:var(--blue-light); border-color:var(--blue); font-weight:600; } .alert-tab__count { font-size:.72rem; padding:0 6px; border-radius:999px; background:var(--gray-100); color:var(--gray-600); } .alert-tab.is-active .alert-tab__count { background:var(--white); color:var(--blue-dark); } .mon-rule { border:1px solid var(--gray-200); border-radius:10px; margin:.6rem 0; background:var(--white); } .mon-rule > summary { list-style:none; cursor:pointer; padding:.7rem .9rem; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; } .mon-rule > summary::-webkit-details-marker { display:none; } .mon-rule[open] > summary { border-bottom:1px solid var(--gray-200); } .mon-rule__form { padding:.9rem; display:flex; flex-direction:column; gap:.7rem; } .mon-rule__form label { display:flex; flex-direction:column; gap:.25rem; font-size:.85rem; color:var(--gray-600); } .mon-rule__form input[type=text], .mon-rule__form input[type=number], .mon-rule__form select { padding:6px 9px; border:1px solid var(--gray-200); border-radius:7px; background:var(--white); color:var(--gray-800); } .mon-fieldset { border:1px solid var(--gray-200); border-radius:8px; padding:.5rem .75rem; display:flex; flex-wrap:wrap; gap:.4rem 1rem; } .mon-fieldset legend { font-size:.8rem; color:var(--gray-500); padding:0 .35rem; } .mon-chk { flex-direction:row !important; align-items:center; gap:.4rem !important; font-size:.85rem; color:var(--gray-700); } .mon-chk input { width:auto; } .mon-chk .hub-icon { color:var(--gray-600); flex:none; } /* Icône SVG inline (hub_icon()) — hérite couleur + taille du texte parent. */ .hub-icon { width:1em; height:1em; vertical-align:-.15em; flex:none; } /* ───────────────────────── Supervision — écran refondu (.mon2) ───────────────────────── */ /* Bandeau d'état */ .mon2-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem; margin:1rem 0 1.75rem; } .mon2-stat { display:flex; flex-direction:column; gap:.2rem; padding:.85rem 1rem; background:var(--gray-50); border-radius:10px; text-decoration:none; color:inherit; } a.mon2-stat:hover { background:var(--gray-100); } .mon2-stat.is-alert { background:var(--danger-bg-hover); } .mon2-stat__lbl { font-size:.78rem; color:var(--gray-600); } .mon2-stat__num { font-size:1.6rem; font-weight:600; line-height:1.1; color:var(--gray-800); } .mon2-stat.is-alert .mon2-stat__num { color:var(--red); } .mon2-stat__num--sm { font-size:1.05rem; } @media (max-width:640px) { .mon2-stats { grid-template-columns:repeat(2,1fr); } } /* Onboarding zéro-config */ .mon2-onboard { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; background:var(--blue-light); border:1px solid var(--blue); border-radius:12px; padding:1.1rem 1.25rem; margin-bottom:1.5rem; } .mon2-onboard h2 { margin:0 0 .25rem; font-size:1.1rem; } .mon2-onboard p { margin:0; } /* En-têtes de section façon « étapes » */ .mon2-section { margin-top:2rem; } .mon2-sec-head { display:flex; align-items:center; gap:.6rem; } .mon2-sec-head h2 { margin:0; } .mon2-step { font-size:.72rem; font-weight:600; color:var(--blue-dark); background:var(--blue-light); border-radius:6px; padding:2px 8px; white-space:nowrap; } .mon2-step--add { color:var(--green); background:var(--success-bg); } .mon2-reco-form { margin:.1rem 0 .5rem; } /* Cartes de contrôles */ .mon2-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:.85rem; margin-top:1rem; } .mon2-card { background:var(--white); border:1px solid var(--gray-200); border-left:3px solid var(--gray-300); border-radius:10px; padding:.85rem 1rem; display:flex; flex-direction:column; } .mon2-card--critical { border-left-color:var(--red); } .mon2-card--warning { border-left-color:var(--orange); } .mon2-card--info { border-left-color:var(--blue); } .mon2-card.is-off { opacity:.62; } .mon2-card__top { display:flex; align-items:flex-start; justify-content:space-between; gap:.6rem; } .mon2-card__head { display:flex; align-items:center; gap:.5rem; } .mon2-card__name { font-weight:600; font-size:.95rem; color:var(--gray-800); } .mon2-card__cond { margin:.45rem 0 .6rem; font-size:.85rem; color:var(--gray-600); } .mon2-card__meta { display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:.6rem; } .mon2-card .mon2-cfg { align-self:flex-start; margin-top:auto; background:none; border:none; cursor:pointer; padding:0; color:var(--blue-dark); font-size:.85rem; display:inline-flex; align-items:center; gap:.3rem; } .mon2-card .mon2-cfg:hover { text-decoration:underline; } .mon2-dot { width:9px; height:9px; border-radius:50%; flex:none; background:var(--gray-300); } .mon2-dot--critical { background:var(--red); } .mon2-dot--warning { background:var(--orange); } .mon2-dot--info { background:var(--blue); } .mon2-pill { display:inline-flex; align-items:center; gap:.3rem; font-size:.74rem; padding:2px 9px; border-radius:999px; background:var(--gray-100); color:var(--gray-600); } .mon2-pill .hub-icon { opacity:.8; } .mon2-pill--alert { background:var(--danger-bg-hover); color:var(--red); } .mon2-pill--ok { background:var(--success-bg); color:var(--green); } .mon2-pill--off { background:var(--gray-200); color:var(--gray-600); } /* Interrupteur */ .mon2-toggle-form { display:flex; align-items:center; } .mon2-switch { position:relative; display:inline-block; width:40px; height:23px; flex:none; cursor:pointer; } .mon2-switch input { opacity:0; width:0; height:0; } .mon2-switch__tr { position:absolute; inset:0; border-radius:999px; background:var(--gray-300); transition:background .15s; } .mon2-switch__tr::before { content:""; position:absolute; height:17px; width:17px; left:3px; top:3px; background:#fff; border-radius:50%; transition:transform .15s; } .mon2-switch input:checked + .mon2-switch__tr { background:var(--green); } .mon2-switch input:checked + .mon2-switch__tr::before { transform:translateX(17px); } .mon2-switch input:focus-visible + .mon2-switch__tr { box-shadow:0 0 0 3px var(--blue-light); } /* Catalogue par thème */ .mon2-cat { border:1px solid var(--gray-200); border-radius:10px; margin-top:.6rem; background:var(--white); overflow:hidden; } .mon2-cat > summary { list-style:none; cursor:pointer; padding:.7rem .9rem; display:flex; align-items:center; gap:.55rem; font-weight:600; font-size:.92rem; color:var(--gray-800); } .mon2-cat > summary::-webkit-details-marker { display:none; } .mon2-cat__count { font-size:.78rem; font-weight:400; color:var(--gray-500); } .mon2-cat__ico { color:var(--gray-500); } .mon2-cat__chev { margin-left:auto; color:var(--gray-500); transition:transform .15s; } .mon2-cat[open] > summary .mon2-cat__chev { transform:rotate(90deg); } .mon2-tmpl { display:flex; align-items:center; gap:.6rem; padding:.6rem .9rem; border-top:1px solid var(--gray-100); } .mon2-tmpl__txt { display:flex; flex-direction:column; gap:.1rem; min-width:0; } .mon2-tmpl__name { font-size:.88rem; font-weight:500; color:var(--gray-800); } .mon2-tmpl__desc { font-size:.78rem; color:var(--gray-500); } .mon2-tmpl__add { margin-left:auto; display:flex; align-items:center; gap:.5rem; white-space:nowrap; } .mon2-reco { font-size:.68rem; font-weight:600; color:var(--green); background:var(--success-bg); border-radius:6px; padding:1px 6px; } .mon2-added { font-size:.78rem; color:var(--green); display:inline-flex; align-items:center; gap:.25rem; } .mon2-again { font-size:.74rem !important; color:var(--gray-500) !important; } /* Notifications « en phrases » */ .mon2-route { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.7rem .9rem; background:var(--gray-50); border-radius:8px; margin-top:.6rem; } .mon2-route__sentence { margin:0; font-size:.9rem; line-height:1.6; color:var(--gray-700); } .mon2-route--empty { color:var(--gray-600); font-size:.88rem; } .mon2-route.is-off { opacity:.6; } .mon2-route-add { margin-top:1rem; } .mon2-form { padding:1.1rem 1.25rem; display:flex; flex-direction:column; gap:1.05rem; } .mon2-form label, .mon2-form legend { font-size:.8rem; color:var(--gray-600); font-weight:500; } .mon2-form > label, .mon2-block, .mon2-fieldgrid > label { display:flex; flex-direction:column; gap:.3rem; } .mon2-form input[type=text], .mon2-form input[type=number], .mon2-form select { padding:7px 10px; border:1px solid var(--gray-200); border-radius:8px; background:var(--white); color:var(--gray-800); font-size:.92rem; } .mon2-form input:focus, .mon2-form select:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-light); } .mon2-help { font-size:.72rem; color:var(--gray-500); font-weight:400; } /* Grille de champs responsive */ .mon2-fieldgrid { display:grid; grid-template-columns:1fr 1fr; gap:.9rem 1rem; } .mon2-fieldgrid .mon2-col2 { grid-column:1 / -1; } @media (max-width:540px) { .mon2-fieldgrid { grid-template-columns:1fr; } } /* Champ numérique avec unité accolée */ .mon2-inputunit { display:flex; align-items:center; gap:.5rem; } .mon2-inputunit input { flex:1; min-width:0; } .mon2-unit { font-size:.82rem; color:var(--gray-500); white-space:nowrap; } /* Ciblage : deux fieldsets côte à côte */ .mon2-targets { display:grid; grid-template-columns:1fr 1fr; gap:.85rem; } @media (max-width:540px) { .mon2-targets { grid-template-columns:1fr; } } .mon2-enabled { align-self:flex-start; } /* Options avancées */ .mon2-adv { border-top:1px dashed var(--gray-200); padding-top:.6rem; } .mon2-adv > summary { cursor:pointer; font-size:.85rem; color:var(--gray-600); list-style:none; padding:.25rem 0; } .mon2-adv > summary::-webkit-details-marker { display:none; } .mon2-adv > summary::before { content:"▸ "; color:var(--gray-500); } .mon2-adv[open] > summary::before { content:"▾ "; } .mon2-adv > * + * { margin-top:.9rem; } /* Modale centrée */ .mon2-modal { position:fixed; inset:0; z-index:1001; display:none; align-items:flex-start; justify-content:center; padding:5vh 1rem; background:rgba(0,0,0,.5); overflow-y:auto; } .mon2-modal.is-open { display:flex; } .mon2-modal__card { width:min(680px,100%); max-height:90vh; display:flex; flex-direction:column; background:var(--white); border-radius:14px; box-shadow:0 18px 50px rgba(0,0,0,.25); overflow:hidden; } .mon2-modal__head { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:1.05rem 1.25rem; border-bottom:1px solid var(--gray-200); } .mon2-modal__head h3 { margin:0; font-size:1.1rem; } .mon2-modal__close { background:none; border:none; cursor:pointer; color:var(--gray-500); padding:.25rem; line-height:0; border-radius:6px; } .mon2-modal__close:hover { color:var(--gray-800); background:var(--gray-100); } .mon2-modal__close .hub-icon { width:20px; height:20px; } .mon2-modal__scroll { overflow-y:auto; flex:1; } .mon2-modal__foot { display:flex; align-items:center; gap:.6rem; padding:.85rem 1.25rem; border-top:1px solid var(--gray-200); background:var(--gray-50); } .mon2-foot-spacer { flex:1; } .mon2-foot-del { color:var(--red) !important; } body.mon2-noscroll { overflow:hidden; }