/* ───────────────────────────────────────────────────────────────────────────── 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: 0.9rem; 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); } /* 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); } /* 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; } @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; overflow-wrap: anywhere; } .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); overflow-wrap: anywhere; min-width: 0; } .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)); } /* 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; } /* 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); } /* 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)); background: color-mix(in srgb, var(--c, var(--gray-500)) 15%, transparent); } .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 */ /* 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; }