/* Interface formateur Pupitre — feuille de style. Aucune dépendance externe ni CDN : fontes embarquées (voir ui/fonts/), variables CSS, flux natif. SOURCE DE VÉRITÉ : le design system livré par l'exploitant, docs/design/pupitre-design-system/ (tokens/*.css repris ici à l'identique, composants et kits comme référence de rendu). En bref : base MONOCHROME GRAPHITE légèrement chaude + UN accent orange (#F97316), verre façon Apple (fond translucide + blur + saturate sur un backdrop mesh vivant), coins « squircle » (corner-shape: superellipse, repli arc natif), pile Helvetica avec repli Arimo embarqué (clone libre métriquement compatible), mono IBM Plex Mono pour les données. Deux thèmes par data-theme="dark" sur (app.js résout le mode auto — jamais de @media prefers-color-scheme dans les composants). Icônes Lucide inline (const LUCIDE, app.js). BUDGET VERRE (≤ 6 surfaces backdrop-filter simultanées) : sidebar (1), topbar (1), barre d'outils OU panneau Assistant (1 — vues mutuellement exclusives : `#salle-actions` n'existe que dans la vue Postes, `.assistant- panel` que dans la vue Assistant, une seule section de `.content` est visible à la fois), dialogue OU tiroir OU palette de commandes ouvert (1 — un seul de ces trois à la fois : `ouvrirPalette` refuse de s'ouvrir par-dessus un autre `dialog[open]`, app.js), menu ⋯ OU menu de recherche du wizard de séance (.combo-menu — même créneau : un dialogue modal ouvert empêche tout menu contextuel ⋯ d'être ouvert en même temps) (1), toasts (1 par toast). La carte de connexion (verre également) ne compte pas : tant qu'elle est affichée, `.app` — et donc les 5 autres surfaces — est masquée, jamais simultanée. Les tuiles de poste et les cartes de contenu (dont la carte de brouillon de séance de l'Assistant) restent opaques : le verre est réservé au chrome, jamais à la donnée dense. */ /* ── Fontes embarquées (servies par le binaire, salle sans internet) ──────── La pile préfère l'Helvetica installée localement (propriétaire, non livrable) ; Arimo, métriquement identique, garantit le même rendu partout. */ @font-face { font-family: "Arimo"; src: url("/fonts/arimo-latin-var.woff2") format("woff2"); font-weight: 400 700; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("/fonts/plex-mono-latin-400.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("/fonts/plex-mono-latin-500.woff2") format("woff2"); font-weight: 500; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("/fonts/plex-mono-latin-600.woff2") format("woff2"); font-weight: 600; font-display: swap; } /* ══════════════════ TOKENS (repris du design system, à l'identique) ═════ */ :root { /* ---- Base graphite (neutre légèrement chaud) ---- */ --ink: #16171b; --ink-2: #3a3c44; --ink-3: #6b6e78; --ink-4: #9a9da6; --ink-5: #c2c1bd; --paper: #f4f3f0; --paper-2: #ecebe6; --white: #ffffff; /* ---- Accent unique : orange ---- */ --o-50: #fff3ea; --o-100: #ffe1c9; --o-200: #ffcba1; --o-300: #ffb27a; --o-400: #ff9a4d; --o-500: #f97316; --o-600: #e35c07; --o-700: #b8480a; --o-800: #8f390c; /* ---- Statuts sémantiques (désaturés, sobres) ---- */ --green: #3f9d6d; --green-soft: #e4f2ea; --green-ink: #1f6b45; --amber: #d08a1e; --amber-soft: #f9eed7; --amber-ink: #8a5a10; --red: #d1493f; --red-soft: #f9e3e1; --red-ink: #992e26; --blue: #3d6fd1; --blue-soft: #e2ebf9; --blue-ink: #26478f; /* Extension Pupitre : l'état « en veille » exige une cinquième teinte distinguable (le nuancier DS n'en compte que quatre) — violet désaturé dans l'esprit des statuts sobres. */ --violet: #7e6bc4; --violet-soft: #ece8f8; --violet-ink: #55418f; /* ---- Alias sémantiques (thème CLAIR « Option A ») ---- */ --text-primary: var(--ink); --text-secondary: var(--ink-2); --text-tertiary: var(--ink-3); --text-muted: var(--ink-4); --text-on-accent: #ffffff; --surface-app: var(--paper); --surface-sunken: var(--paper-2); --surface-card: var(--white); --surface-raised: var(--white); --surface-inset: #faf9f7; --glass-bg: rgba(255, 255, 255, 0.55); --glass-bg-strong: rgba(255, 255, 255, 0.72); --glass-border: rgba(255, 255, 255, 0.7); --glass-highlight: rgba(255, 255, 255, 0.6); /* Le verre exige un fond vivant : mesh chaud très léger. */ --app-backdrop: radial-gradient(900px 620px at 12% 8%, rgba(249, 115, 22, 0.16), transparent 55%), radial-gradient(760px 700px at 92% 100%, rgba(120, 110, 255, 0.1), transparent 55%), linear-gradient(160deg, #f5f3ef, #ecebe5); --border: #e4e2de; --border-strong: #d3d0c9; --border-onglass: rgba(20, 20, 25, 0.08); --accent: var(--o-500); --accent-hover: var(--o-600); --accent-press: var(--o-700); --accent-soft: var(--o-50); --accent-soft-border: var(--o-100); --accent-ink: var(--o-700); --focus-ring: rgba(249, 115, 22, 0.45); --shadow-color: 20 20 25; /* ---- Effets : flous, verre, élévations, mouvement ---- */ --blur-sm: 12px; --blur-md: 20px; --blur-lg: 32px; --blur-xl: 48px; --glass-saturate: 1.4; --glass-shadow: 0 20px 50px -20px rgba(20, 20, 25, 0.35); --glass-inset: inset 0 1px 0 var(--glass-highlight); --shadow-1: 0 1px 2px rgb(var(--shadow-color) / 0.06), 0 1px 1px rgb(var(--shadow-color) / 0.04); --shadow-2: 0 2px 6px -1px rgb(var(--shadow-color) / 0.08), 0 1px 2px rgb(var(--shadow-color) / 0.05); --shadow-3: 0 8px 20px -6px rgb(var(--shadow-color) / 0.12), 0 2px 6px rgb(var(--shadow-color) / 0.06); --shadow-4: 0 18px 44px -12px rgb(var(--shadow-color) / 0.2), 0 6px 14px rgb(var(--shadow-color) / 0.08); --shadow-accent: 0 8px 20px -6px rgba(249, 115, 22, 0.5); --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 0.14s; --dur: 0.2s; --dur-slow: 0.32s; /* ---- Coins « squircle » (superellipse + repli arc) ---- */ --radius-xs: 8px; --radius-sm: 12px; --radius-md: 16px; --radius-lg: 22px; --radius-xl: 30px; --radius-2xl: 38px; --radius-pill: 999px; --corner: superellipse(1.8); --corner-soft: superellipse(2.6); /* ---- Typographie (grotesque Helvetica) ---- */ --font-sans: "Helvetica Neue", Helvetica, "Arimo", Arial, system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; --fs-display: 52px; --fs-h1: 34px; --fs-h2: 26px; --fs-h3: 20px; --fs-h4: 17px; --fs-body: 15px; --fs-body-lg: 17px; --fs-sm: 13px; --fs-xs: 12px; --fs-caption: 11px; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.1; --lh-heading: 1.2; --lh-snug: 1.35; --lh-body: 1.5; --ls-display: -0.03em; --ls-heading: -0.02em; --ls-caps: 0.14em; /* ---- Espacement (grille 4 px) et mesures d'app ---- */ --gutter: 24px; --sidebar-w: 264px; --topbar-h: 64px; font-synthesis: none; } /* ---- Thème SOMBRE « Option D » : base profonde, verre lumineux, halo orange */ [data-theme="dark"] { --text-primary: #f4f3f0; --text-secondary: #c8c9cf; --text-tertiary: #9a9da6; --text-muted: #71747d; --surface-app: #141519; --surface-sunken: #0f1013; --surface-card: #1e1f24; --surface-raised: #26272d; --surface-inset: #1a1b20; --glass-bg: rgba(34, 35, 41, 0.55); --glass-bg-strong: rgba(34, 35, 41, 0.74); --glass-border: rgba(255, 255, 255, 0.14); --glass-highlight: rgba(255, 255, 255, 0.12); --app-backdrop: radial-gradient(760px 520px at 22% 6%, rgba(249, 115, 22, 0.2), transparent 58%), radial-gradient(680px 620px at 88% 96%, rgba(255, 255, 255, 0.05), transparent 55%), linear-gradient(160deg, #191a1f, #0e0f12); --border: #2b2c32; --border-strong: #3a3b42; --border-onglass: rgba(255, 255, 255, 0.1); --accent-hover: var(--o-400); --accent-press: var(--o-300); --accent-soft: rgba(249, 115, 22, 0.14); --accent-soft-border: rgba(249, 115, 22, 0.28); --accent-ink: var(--o-300); --focus-ring: rgba(249, 115, 22, 0.55); --green-soft: rgba(63, 157, 109, 0.16); --green-ink: #7fd3a6; --amber-soft: rgba(208, 138, 30, 0.16); --amber-ink: #e7b866; --red-soft: rgba(209, 73, 63, 0.16); --red-ink: #eb8b83; --blue-soft: rgba(61, 111, 209, 0.16); --blue-ink: #8fb0f0; --violet-soft: rgba(126, 107, 196, 0.18); --violet-ink: #b8aae8; --shadow-color: 0 0 0; } /* ══════════════════ SOCLE ═══════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } /* `hidden` doit l'emporter sur les `display` posés plus bas. */ [hidden] { display: none !important; } html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; height: 100%; } body { margin: 0; height: 100%; font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-primary); background: var(--app-backdrop); background-attachment: fixed; } h1, h2, h3, h4 { margin: 0; font-weight: var(--fw-semibold); letter-spacing: var(--ls-heading); line-height: var(--lh-heading); color: var(--text-primary); } p { margin: 0; } .mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; } ::selection { background: var(--o-200); color: var(--ink); } [data-theme="dark"] ::selection { background: rgba(249, 115, 22, 0.4); color: #fff; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; border: 3px solid transparent; background-clip: padding-box; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Repli sans backdrop-filter : surfaces de verre quasi opaques. */ @supports not (backdrop-filter: blur(1px)) { :root { --glass-bg: rgba(255, 255, 255, 0.94); --glass-bg-strong: rgba(255, 255, 255, 0.97); } [data-theme="dark"] { --glass-bg: rgba(30, 31, 36, 0.96); --glass-bg-strong: rgba(30, 31, 36, 0.98); } } /* ══════════════════ PAGE DE CONNEXION (session formateur, ADR-0020) ═════ Page plein écran, pas un dialogue : tant qu'elle est affichée, `.app` reste masquée (aucune fuite du parc). Un seul champ jeton — le socle n'a pas de comptes individuels (pas d'email/mot de passe/SSO, écart assumé documenté dans design-system.md). */ .login-page { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; padding: 32px; box-sizing: border-box; background: var(--app-backdrop); background-attachment: fixed; } .login-mark { display: flex; align-items: center; gap: 10px; } .login-mark .pastille { width: 34px; height: 34px; border-radius: var(--radius-sm); corner-shape: var(--corner); background: var(--accent); display: inline-flex; align-items: center; justify-content: center; color: #fff; box-shadow: var(--shadow-accent); flex-shrink: 0; } .login-word { font-size: 24px; font-weight: var(--fw-semibold); letter-spacing: var(--ls-display); color: var(--text-primary); } .login-word .i { color: var(--accent); } .login-card { width: 384px; max-width: 100%; box-sizing: border-box; border-radius: var(--radius-xl); corner-shape: var(--corner-soft); padding: 30px 30px 26px; display: flex; flex-direction: column; gap: 18px; background: var(--glass-bg-strong); border: 1px solid var(--glass-border); backdrop-filter: blur(var(--blur-xl)) saturate(var(--glass-saturate)); -webkit-backdrop-filter: blur(var(--blur-xl)) saturate(var(--glass-saturate)); box-shadow: var(--shadow-4), var(--glass-inset); animation: pupitrePop var(--dur-slow) var(--ease-out); } .login-card h1 { margin: 0 0 6px; font-size: var(--fs-h3); } .login-card p { margin: 0; font-size: var(--fs-sm); color: var(--text-secondary); line-height: var(--lh-snug); } .login-card form { display: flex; flex-direction: column; gap: 14px; } .login-card .login-error { margin: 0; font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--red-ink); background: var(--red-soft); border-radius: var(--radius-xs); corner-shape: var(--corner); padding: 8px 10px; } /* ══════════════════ COQUILLE D'APP (sidebar verre + contenu) ════════════ */ .app { display: flex; height: 100vh; } .sidebar { width: var(--sidebar-w); flex-shrink: 0; height: 100%; display: flex; flex-direction: column; gap: 4px; padding: 18px 14px; background: var(--glass-bg); backdrop-filter: blur(var(--blur-lg)) saturate(var(--glass-saturate)); -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(var(--glass-saturate)); border-right: 1px solid var(--glass-border); box-shadow: var(--glass-shadow), var(--glass-inset); overflow-y: auto; } /* Wordmark : « Pupitre », point du i à l'accent — pas de logo inventé. */ .wordmark { display: flex; align-items: center; gap: 9px; padding: 4px 8px 16px; } .wordmark .pastille { width: 30px; height: 30px; border-radius: var(--radius-sm); corner-shape: var(--corner); background: var(--accent); display: inline-flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; } .wordmark h1 { font-size: 20px; font-weight: var(--fw-semibold); letter-spacing: var(--ls-display); } .wordmark h1 .i { color: var(--accent); } .side-section { padding: 14px 10px 4px; font-size: var(--fs-caption); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-muted); font-weight: var(--fw-semibold); } .navitem { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 11px; border: 1px solid transparent; cursor: pointer; border-radius: var(--radius-sm); corner-shape: var(--corner); font-family: var(--font-sans); font-size: var(--fs-body); font-weight: var(--fw-medium); background: transparent; color: var(--text-secondary); transition: all var(--dur) var(--ease); text-align: left; } .navitem:hover { background: var(--surface-inset); } .navitem.is-active { background: var(--accent-soft); border-color: var(--accent-soft-border); color: var(--accent-ink); font-weight: var(--fw-semibold); } .navitem .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .navitem .n { font-size: var(--fs-caption); font-weight: var(--fw-semibold); min-width: 18px; text-align: center; padding: 1px 6px; border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--text-tertiary); } .navitem.is-active .n { background: var(--accent); color: #fff; } .navitem svg { flex-shrink: 0; } .navitem.is-active svg { color: var(--accent); } /* Point d'état résumé d'une salle (le « pire » l'emporte). */ .salle-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; } .salle-dot[data-tone="error"] { background: var(--red); } .salle-dot[data-tone="provisioning"] { background: var(--amber); animation: pulse 1.4s infinite; } .salle-dot[data-tone="ok"] { background: var(--green); } .salle-dot[data-tone="sleeping"] { background: var(--violet); } .salle-dot[data-tone="offline"] { background: transparent; border: 1.5px dashed var(--ink-4); } .rail-empty { color: var(--text-tertiary); font-size: var(--fs-sm); padding: 6px 10px; } .side-footer { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); } /* Identité de session (ADR-0028) — pied de sidebar, patron Sidebar.jsx du DS : avatar à initiales + login + rôle. Cliquable : menu « voir comme » (admin) ou déconnexion. Masquée en modes jeton/libre (aucune identité fabriquée). */ .session-identite { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: var(--radius-md); corner-shape: var(--corner); cursor: pointer; transition: background var(--dur) var(--ease); } .session-identite:hover { background: var(--surface-inset); } .avatar-initiales { width: 28px; height: 28px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); corner-shape: var(--corner); background: var(--accent-soft); color: var(--accent-ink); font-family: var(--font-mono); font-size: var(--fs-caption); font-weight: var(--fw-semibold); } .session-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; } .session-login { font-size: var(--fs-sm); font-weight: var(--fw-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .session-role { font-size: var(--fs-caption); color: var(--text-secondary); } /* Badge de la lentille « voir comme » (topbar) : rappel persistant qu'un autre rôle est simulé — un clic ramène à la vue réelle. */ .vue-comme-badge { display: inline-flex; align-items: center; gap: 6px; margin-left: 12px; padding: 5px 10px; border: 1px solid var(--accent); border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-family: inherit; font-size: var(--fs-caption); font-weight: var(--fw-medium); cursor: pointer; } .vue-comme-badge .vcb-retour { color: var(--text-secondary); } /* Lignes de compte (tiroir de gestion, ADR-0028). */ .compte-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; } .compte-login { font-family: var(--font-mono); font-size: var(--fs-sm); } .compte-role { font-size: var(--fs-caption); color: var(--text-secondary); } .gestion-item.compte-inactif .compte-meta { opacity: 0.55; } .gestion-vide { font-size: var(--fs-sm); color: var(--text-secondary); padding: 6px 2px; } /* ── Zone principale ─────────────────────────────────────────────────── */ .main { flex: 1; display: flex; flex-direction: column; min-width: 0; } .topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 14px; min-height: var(--topbar-h); padding: 14px var(--gutter); background: var(--glass-bg); backdrop-filter: blur(var(--blur-md)) saturate(var(--glass-saturate)); -webkit-backdrop-filter: blur(var(--blur-md)) saturate(var(--glass-saturate)); border-bottom: 1px solid var(--glass-border); box-shadow: var(--glass-shadow), var(--glass-inset); } .topbar h2 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); letter-spacing: var(--ls-heading); } .topbar .counts { font-size: var(--fs-sm); color: var(--text-tertiary); margin-top: 2px; } .topbar .spacer { flex: 1; } /* Bouton icône de la topbar (IconButton du design system) — cloche d'alertes. */ .icon-btn { position: relative; flex-shrink: 0; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); background: var(--surface-card); border-radius: var(--radius-sm); corner-shape: var(--corner); color: var(--text-secondary); cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .icon-btn:hover { background: var(--surface-inset); color: var(--text-primary); } .icon-btn[aria-expanded="true"] { background: var(--surface-inset); color: var(--text-primary); border-color: var(--border-strong); } /* Badge chiffré (nombre RÉEL de postes en défaut) — masqué à zéro. */ .icon-btn-badge { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); border: 2px solid var(--surface-card); background: var(--red); color: #fff; font-family: var(--font-mono); font-size: 10px; font-weight: var(--fw-semibold); line-height: 1; } /* Bascule de thème (ThemeToggle du design system) — pilule à segments glissants, étendue à 3 états (auto/clair/sombre, écart assumé documenté). */ .theme-switch { position: relative; display: inline-flex; flex-shrink: 0; padding: 3px; background: var(--surface-inset); border: 1px solid var(--border); border-radius: var(--radius-pill); } .theme-thumb { position: absolute; top: 3px; left: 3px; width: 32px; height: 26px; box-sizing: border-box; border-radius: var(--radius-pill); background: var(--surface-card); border: 1px solid var(--border); box-shadow: var(--shadow-1); transition: transform var(--dur-slow) var(--ease); } .theme-seg { position: relative; z-index: 1; width: 32px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border: none; padding: 0; background: transparent; color: var(--text-muted); cursor: pointer; transition: color var(--dur) var(--ease); } .theme-seg[aria-pressed="true"] { color: var(--accent); } .content { flex: 1; overflow-y: auto; padding: 20px var(--gutter) 28px; display: flex; flex-direction: column; gap: 16px; } /* Indicateur du flux temps réel : pastille d'état sobre. */ .link-state { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-xs); font-weight: var(--fw-medium); padding: 4px 10px 4px 8px; border-radius: var(--radius-pill); corner-shape: var(--corner); background: var(--surface-sunken); color: var(--text-secondary); } .link-state .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-4); } .link-state[data-state="connecting"] { background: var(--amber-soft); color: var(--amber-ink); } .link-state[data-state="connecting"] .dot { background: var(--amber); animation: pulse 1.2s infinite; } .link-state[data-state="open"] { background: var(--green-soft); color: var(--green-ink); } .link-state[data-state="open"] .dot { background: var(--green); } .link-state[data-state="closed"] { background: var(--red-soft); color: var(--red-ink); } .link-state[data-state="closed"] .dot { background: var(--red); } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } /* ══════════════════ CONTRÔLES ═══════════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-sans); font-size: var(--fs-body); font-weight: var(--fw-medium); line-height: 1; padding: 10px 16px; border-radius: var(--radius-sm); corner-shape: var(--corner); cursor: pointer; white-space: nowrap; user-select: none; background: var(--surface-card); color: var(--text-primary); border: 1px solid var(--border); box-shadow: var(--shadow-1); transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .btn:hover:not(:disabled) { background: var(--surface-inset); transform: translateY(-1px); } .btn:active:not(:disabled) { transform: scale(0.97); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-primary { background: var(--accent); color: var(--text-on-accent); border-color: transparent; box-shadow: var(--shadow-accent); } .btn-primary:hover:not(:disabled) { background: var(--accent-hover); } .btn-danger { background: var(--red); color: #fff; border-color: transparent; } .btn-danger:hover:not(:disabled) { background: var(--red-ink); } /* Variante discrète (actions secondaires d'une tuile, items de menu). */ .btn-ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--text-secondary); } .btn-ghost:hover:not(:disabled) { background: var(--surface-inset); } .btn-sm { padding: 7px 12px; font-size: var(--fs-sm); border-radius: var(--radius-xs); gap: 6px; } /* Bouton occupé (action en vol) : le libellé s'efface, un anneau tourne. */ .btn.is-busy { position: relative; color: transparent !important; pointer-events: none; } .btn.is-busy::after { content: ""; position: absolute; inset: 0; margin: auto; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgb(var(--shadow-color) / 0.25); border-top-color: var(--text-primary); animation: spin 0.7s linear infinite; } .btn-primary.is-busy::after, .btn-danger.is-busy::after { border-color: rgba(255, 255, 255, 0.35); border-top-color: #fff; } @keyframes spin { to { transform: rotate(360deg); } } select, textarea, input[type="url"], input[type="text"], input[type="password"], input[type="date"], input[type="time"] { background: var(--surface-card); border: 1px solid var(--border-strong); color: var(--text-primary); border-radius: var(--radius-xs); corner-shape: var(--corner); padding: 9px 12px; font-size: var(--fs-sm); font-family: inherit; } input[type="date"], input[type="time"] { font-family: var(--font-mono); font-feature-settings: "tnum" 1; } select:focus, textarea:focus, input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); } select { max-width: 240px; } input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Texte d'aide : une phrase qui dit l'effet ou le rôle, jamais du décor. */ .aide { margin: 0 0 8px; font-size: var(--fs-xs); color: var(--text-tertiary); line-height: var(--lh-snug); } /* Pastille de statut canonique (StatusPill du DS, préréglage « sm » EXACT : padding 2/8/2/6, point 6px, fs-caption). */ .pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px 2px 6px; border-radius: var(--radius-pill); corner-shape: var(--corner); font-size: var(--fs-caption); font-weight: var(--fw-medium); line-height: 1.4; white-space: nowrap; } .pill .dot { width: 6px; height: 6px; border-radius: 50%; flex: none; } .pill[data-tone="green"] { background: var(--green-soft); color: var(--green-ink); } .pill[data-tone="green"] .dot { background: var(--green); } .pill[data-tone="amber"] { background: var(--amber-soft); color: var(--amber-ink); } .pill[data-tone="amber"] .dot { background: var(--amber); animation: pulse 1.4s infinite; } .pill[data-tone="red"] { background: var(--red-soft); color: var(--red-ink); } .pill[data-tone="red"] .dot { background: var(--red); } .pill[data-tone="blue"] { background: var(--blue-soft); color: var(--blue-ink); } .pill[data-tone="blue"] .dot { background: var(--blue); } .pill[data-tone="accent"] { background: var(--accent-soft); color: var(--accent-ink); } .pill[data-tone="accent"] .dot { background: var(--accent); } .pill[data-tone="violet"] { background: var(--violet-soft); color: var(--violet-ink); } .pill[data-tone="violet"] .dot { background: var(--violet); } .pill[data-tone="neutral"] { background: var(--surface-sunken); color: var(--text-tertiary); } .pill[data-tone="neutral"] .dot { background: var(--ink-4); } /* Étiquette d'honnêteté : construit, non prouvé sur poste physique (§10). */ .badge-non-eprouve { display: inline-flex; align-items: center; gap: 5px; border: 1px dashed var(--amber); border-radius: var(--radius-xs); corner-shape: var(--corner); color: var(--amber-ink); background: var(--amber-soft); font-size: var(--fs-caption); font-weight: var(--fw-medium); padding: 2px 7px; } /* ══════════════════ VUE POSTES ══════════════════════════════════════════ */ /* Barre d'outils de salle : la seule barre en vrai verre du contenu. */ .toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); corner-shape: var(--corner); backdrop-filter: blur(var(--blur-md)) saturate(var(--glass-saturate)); -webkit-backdrop-filter: blur(var(--blur-md)) saturate(var(--glass-saturate)); box-shadow: var(--glass-shadow), var(--glass-inset); } .toolbar .tsep { width: 1px; height: 26px; background: var(--border); margin: 0 2px; } .toolbar .spacer { flex: 1; } .prepare { display: flex; gap: 8px; align-items: center; } .group { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } /* Synthèse par état : jauge de salle (RoomGauge, donut) + pastilles comptées. */ .synthese { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; } /* Jauge de salle (RoomGauge du DS) : donut SVG bâti en JS + centre mono superposé — réutilisée en synthèse de page (grande) et en en-tête de carte-pièce (petite, `.room-head .gauge`). */ .gauge { position: relative; display: inline-flex; flex: none; } .gauge svg { display: block; } .gauge-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-feature-settings: "tnum" 1; font-weight: var(--fw-semibold); color: var(--text-primary); } .synth-legend { display: flex; flex-wrap: wrap; align-content: center; gap: 6px 8px; flex: 1; } .synth-chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: var(--radius-pill); corner-shape: var(--corner); border: 1px solid var(--border); background: var(--surface-card); font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-secondary); box-shadow: var(--shadow-1); } .synth-chip .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; } .synth-chip .n { font-family: var(--font-mono); font-feature-settings: "tnum" 1; font-weight: var(--fw-semibold); color: var(--text-primary); } .synth-chip[data-state="error"] { border-color: var(--red); color: var(--red-ink); background: var(--red-soft); } .synth-chip[data-state="error"] .n { color: var(--red-ink); } /* Barre de sélection (actions sur un ensemble de postes cochés). */ .selection-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; background: var(--accent-soft); border: 1px solid var(--accent-soft-border); border-radius: var(--radius-md); corner-shape: var(--corner); padding: 10px 14px; } .selection-count { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--accent-ink); } /* La salle : grande carte-pièce contenant la grille des postes (RoomMap). */ .room { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-xl); corner-shape: var(--corner-soft); box-shadow: var(--shadow-2); padding: 18px 20px 20px; } .room-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .room-head h3 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); } .room-head .counts { font-size: var(--fs-sm); color: var(--text-tertiary); } .room-head .spacer { flex: 1; } /* Bande frontale « Écran · Tableau » (RoomMap) : contexte spatial minimal — pas d'allée centrale, aucun plan de salle réel n'est modélisé en base. */ .room-front { width: fit-content; height: 22px; margin-bottom: 12px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: var(--radius-pill); corner-shape: var(--corner); background: var(--surface-sunken); border: 1px solid var(--border); font-size: 10px; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-muted); font-weight: var(--fw-medium); } /* Badge « en direct » (lecture seule des debut/fin d'une séance réelle, ADR-0031 reste gelé : aucun statut en_cours n'est jamais posé). */ .live-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 7px; border-radius: var(--radius-pill); corner-shape: var(--corner); background: var(--red-soft); border: 1px solid var(--red); color: var(--red-ink); font-size: var(--fs-caption); font-weight: var(--fw-semibold); } .live-badge .rec { width: 7px; height: 7px; border-radius: 50%; background: var(--red); animation: pulse 1.4s infinite; } /* Légende auto des statuts présents dans la salle (RoomMap), sous la grille. */ .room-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 14px; } .room-legend-chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-caption); color: var(--text-tertiary); } .room-legend-chip .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; } /* Grille resserrée : tuiles compactes (PosteTile), plus de colonnes qu'avec l'ancien format de carte texte. */ .posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; } /* La tuile compacte d'un poste (PosteTile du design system) : squircle dense, icône 20px, identifiant mono, point d'état 7px au coin. Le détail complet (hostname intégral, salle, profil, battement, phase, diagnostic) vit dans le tiroir (`.drawer-*` plus bas), pas au repos sur la tuile. */ .poste { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px; padding: 12px 6px 10px; border-radius: var(--radius-md); corner-shape: var(--corner); border: 1.5px solid var(--border); background: var(--surface-inset); cursor: pointer; transition: all var(--dur) var(--ease); } .poste:hover { border-color: var(--accent-soft-border); transform: translateY(-2px); box-shadow: var(--shadow-2); } .poste[data-state="offline"] { opacity: 0.6; } /* Signal d'erreur : liseré rouge sur toute la hauteur (+ le point d'état, déjà rouge par le ton). Reste visible qu'elle soit sélectionnée ou non. */ .poste[data-state="error"] { border-color: var(--red); } .poste[data-state="error"]::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; border-radius: var(--radius-md) 0 0 var(--radius-md); background: var(--red); } /* Sélection au clic sur la tuile : fond teinté du ton du statut + anneau accent (garde le point d'état et le liseré d'erreur lisibles par-dessus). */ .poste[data-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); } .poste[data-checked="true"][data-tone="green"] { background: var(--green-soft); } .poste[data-checked="true"][data-tone="blue"] { background: var(--blue-soft); } .poste[data-checked="true"][data-tone="amber"] { background: var(--amber-soft); } .poste[data-checked="true"][data-tone="violet"] { background: var(--violet-soft); } .poste[data-checked="true"][data-tone="red"] { background: var(--red-soft); } .poste[data-checked="true"][data-tone="neutral"] { background: var(--surface-sunken); } /* Point d'état, coin haut droit (couleur pleine, pulsation en préparation). */ .poste .pdot { position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 50%; } .poste[data-state="provisioning"] .pdot { animation: pulse 1.4s infinite; } /* Coche discrète (coin haut gauche) : visible seulement une fois sélectionné, cède la place au menu « ⋯ » au survol/focus (même coin, un seul à la fois). La case à cocher RÉELLE est masquée visuellement par `.sr-only` (accessible au clavier/lecteur d'écran, jamais un contrôle factice). */ .poste-tick { position: absolute; top: 5px; left: 5px; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; opacity: 0; transform: scale(0.6); transition: all var(--dur) var(--ease); pointer-events: none; } .poste[data-checked="true"] .poste-tick { opacity: 1; transform: scale(1); } .poste:hover .poste-tick, .poste:focus-within .poste-tick { opacity: 0; transform: scale(0.6); } /* Menu « ⋯ » de la tuile : révélé au survol/focus-visible seulement — porte « Détails » (tiroir) et tous les gestes du poste, aucun perdu. */ .poste .menu-toggle { position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; padding: 0; border-radius: var(--radius-xs); opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease); z-index: 2; } .poste:hover .menu-toggle, .poste:focus-within .menu-toggle, .poste .menu-toggle:focus-visible { opacity: 1; pointer-events: auto; } .poste .picto { color: var(--text-tertiary); } .poste .picto.spin svg { animation: spin 1.1s linear infinite; } .poste-name { margin: 0; font-family: var(--font-mono); font-feature-settings: "tnum" 1; font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-primary); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* La pastille de statut peut porter la durée de préparation écoulée (« En préparation · 1 min 40 s ») : sur la tuile compacte, elle a le droit de passer sur plusieurs lignes plutôt que déborder — `flex-wrap` fait porter chaque MOT/segment sur sa propre ligne au besoin (pas de fragmentation lettre par lettre : `white-space: normal` seul, sans wrap du conteneur, rétrécirait chaque item flex jusqu'à casser au milieu des mots). */ .poste .pill { max-width: 100%; flex-wrap: wrap; justify-content: center; row-gap: 1px; white-space: normal; text-align: center; line-height: 1.3; } /* Étiquette « non éprouvé » (§10) en compact : pastille discrète au coin, l'explication complète vit dans l'infobulle de la tuile et le tiroir. */ .tile-flag { position: absolute; bottom: 5px; right: 6px; width: 14px; height: 14px; border-radius: 50%; border: 1px dashed var(--amber); background: var(--amber-soft); color: var(--amber-ink); display: flex; align-items: center; justify-content: center; } /* Phase courante du run (ADR-0030) : texte sobre, jamais un pourcentage — affichée dans le tiroir de détail. */ .prov-phase { margin: 0; font-size: var(--fs-caption); color: var(--amber-ink); } /* Menu contextuel « ⋯ » (Menu du design system) : ancré sous le déclencheur par pupitreMenu (app.js), position calculée en JS (`top`/`left` inline) — attaché à , donc jamais rogné par le scroll d'une carte-pièce. */ .menu-pop { position: fixed; display: flex; flex-direction: column; gap: 2px; min-width: 200px; max-width: 280px; padding: 6px; border-radius: var(--radius-md); corner-shape: var(--corner); background: var(--glass-bg-strong); backdrop-filter: blur(var(--blur-lg)) saturate(var(--glass-saturate)); -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(var(--glass-saturate)); border: 1px solid var(--glass-border); box-shadow: var(--shadow-4), var(--glass-inset); z-index: 1200; animation: pupitreMenuIn var(--dur-fast) var(--ease-out); } @keyframes pupitreMenuIn { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } } .menu-divider { height: 1px; margin: 5px 6px; background: var(--border-onglass); } .menu-heading { padding: 7px 10px 3px; font-size: 10px; font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-muted); } .menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: none; text-align: left; background: transparent; border-radius: var(--radius-xs); corner-shape: var(--corner); cursor: pointer; font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-primary); transition: background var(--dur-fast) var(--ease); } .menu-item:hover:not(:disabled), .menu-item:focus-visible { background: var(--surface-inset); outline: none; } .menu-item:disabled { opacity: 0.45; cursor: not-allowed; } .menu-item.is-danger { color: var(--red-ink); } .menu-item.is-danger:hover:not(:disabled), .menu-item.is-danger:focus-visible { background: var(--red-soft); } .menu-item svg { flex-shrink: 0; color: var(--text-tertiary); } .menu-item.is-danger svg { color: var(--red); } .menu-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Item de menu à deux lignes (ex. cloche d'alertes : poste + salle/erreur). */ .menu-item-stack { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: left; } .menu-item-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .menu-item-title.mono { font-family: var(--font-mono); } .menu-item-sub { font-size: var(--fs-caption); font-weight: var(--fw-regular); color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .menu-item.is-danger .menu-item-sub { color: var(--red-ink); opacity: 0.8; } /* Infobulle (Tooltip du design system) : bulle --ink/--paper, en fondu, posée par pupitreTooltip (app.js) — remplace le `title` natif partout. */ .pupitre-tip { position: fixed; z-index: 1300; max-width: 260px; padding: 6px 10px; border-radius: var(--radius-sm); corner-shape: var(--corner); background: var(--ink); color: var(--paper); font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: var(--fw-medium); line-height: var(--lh-snug); box-shadow: var(--shadow-3); pointer-events: none; animation: pupitreTip var(--dur-fast) var(--ease); } @keyframes pupitreTip { from { opacity: 0; } to { opacity: 1; } } /* Touche clavier (Kbd du design system) : keycap mono, utilisée seule ou dans un raccourci de menu (pupitreMenu). */ .pupitre-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 5px; box-sizing: border-box; background: var(--surface-card); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 6px; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-secondary); box-shadow: var(--shadow-1); } /* ══════════════ VUE PLANNING — GANTT MULTI-SALLES (ADR-0031) ═══════════════ Salles en lignes (colonne figée), temps en colonnes (en-tête collant) — PlanningGrid du design system. Bandeau SearchTabs (onglets Salles/Formations + quick filters honnêtes) au-dessus, contrôles Jour/Semaine/Mois + Aujourd'hui ensuite, le Gantt scrollable en dessous. */ /* Bandeau de recherche/filtre (SearchTabs) : onglets « dossier » posés sur une carte, quick filters sous un séparateur — anatomie du composant livré. */ .planning-filters { position: relative; margin-bottom: 14px; } .pf-tabs { display: flex; gap: 6px; padding-left: 16px; position: relative; z-index: 2; } .pf-tab { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; margin-bottom: -1px; border: 1px solid transparent; border-bottom: none; border-radius: var(--radius-md) var(--radius-md) 0 0; corner-shape: var(--corner); background: transparent; color: var(--text-tertiary); font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: var(--fw-medium); cursor: pointer; white-space: nowrap; transition: color var(--dur) var(--ease), background var(--dur) var(--ease); } .pf-tab svg { color: var(--text-tertiary); } .pf-tab.is-active { border-color: var(--border); background: var(--surface-card); color: var(--text-primary); font-weight: var(--fw-semibold); } .pf-tab.is-active svg { color: var(--accent); } .pf-card { position: relative; z-index: 1; background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-lg); corner-shape: var(--corner); box-shadow: var(--shadow-2); padding: 12px 16px; } .pf-search { display: flex; align-items: center; gap: 10px; padding: 6px 4px; color: var(--text-tertiary); } .pf-search input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: var(--font-sans); font-size: var(--fs-body-lg); color: var(--text-primary); } .pf-search input::placeholder { color: var(--text-muted); } .pf-quick { display: flex; align-items: center; gap: 18px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); flex-wrap: wrap; } .pf-chip { display: inline-flex; align-items: center; gap: 8px; border: none; background: transparent; padding: 0; cursor: pointer; font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-secondary); transition: color var(--dur) var(--ease); } .pf-chip:hover { color: var(--text-primary); } .pf-chip.is-active { color: var(--accent-ink); } .pf-chip .salle-dot { width: 8px; height: 8px; } /* Contrôles de période : Aujourd'hui, navigation ‹›, SegmentedControl, action. */ .planning-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; } .planning-controls .spacer { flex: 1; } .planning-nav { display: flex; align-items: center; gap: 4px; } .planning-periode { padding: 0 8px; font-size: var(--fs-body); font-weight: var(--fw-medium); white-space: nowrap; min-width: 200px; text-align: center; } /* SegmentedControl (Jour/Semaine/Mois) du design system. */ .seg-control { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius-md); corner-shape: var(--corner); } .seg-btn { padding: 7px 16px; border: none; background: transparent; border-radius: var(--radius-sm); corner-shape: var(--corner); font-family: var(--font-sans); font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--text-tertiary); cursor: pointer; white-space: nowrap; transition: all var(--dur) var(--ease); } .seg-btn.is-active { background: var(--surface-card); color: var(--text-primary); box-shadow: var(--shadow-1); } /* Gantt : en-tête collant, colonne de salle figée (PlanningGrid du DS). */ .gantt { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-xl); corner-shape: var(--corner-soft); box-shadow: var(--shadow-2); overflow: auto; max-height: 74vh; } .gantt-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--border); min-height: 68px; } .gantt-row:last-child { border-bottom: none; } .gantt-head { position: sticky; top: 0; z-index: 6; background: var(--surface-card); min-height: 0; } .gantt-roomcol { width: 208px; flex-shrink: 0; position: sticky; left: 0; z-index: 5; background: var(--surface-card); border-right: 1px solid var(--border); display: flex; align-items: center; gap: 11px; padding: 10px 14px; } .gantt-head .gantt-roomcol { z-index: 7; } .gr-ico { width: 34px; height: 34px; flex-shrink: 0; border-radius: var(--radius-sm); corner-shape: var(--corner); background: var(--accent-soft); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; } .gr-meta { min-width: 0; display: flex; flex-direction: column; } .gr-nom { font-size: var(--fs-body); font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gr-sous { font-size: var(--fs-caption); color: var(--text-tertiary); white-space: nowrap; } .gantt-roomcol .salle-dot { margin-left: auto; } .gantt-track { position: relative; flex: 1; } .gantt-cells { display: grid; height: 100%; min-height: 68px; } .gantt-head .gantt-cells { min-height: 0; } .gantt-headcell { padding: 10px 4px 8px; text-align: center; border-right: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; gap: 2px; } .gantt-headcell:last-child, .gantt-cell:last-child { border-right: none; } .ghc-lbl { font-size: var(--fs-caption); letter-spacing: var(--ls-wide); text-transform: uppercase; font-weight: var(--fw-semibold); color: var(--text-tertiary); } .gantt-headcell.is-today .ghc-lbl { color: var(--accent-ink); } .ghc-num { font-size: var(--fs-body); font-weight: var(--fw-semibold); width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-family: var(--font-mono); } .gantt-headcell.is-today .ghc-num { background: var(--accent); color: #fff; } .gantt-headcell.is-weekend { background: var(--surface-inset); } .gantt-cell { border-right: 1px solid var(--border); cursor: pointer; transition: background var(--dur) var(--ease); } .gantt-cell:hover { background: var(--accent-soft); } .gantt-cell.is-weekend { background: repeating-linear-gradient( -45deg, transparent, transparent 6px, var(--surface-inset) 6px, var(--surface-inset) 7px ); } .gantt-cell.is-today { background: rgba(249, 115, 22, 0.06); } .gantt-blocks { position: absolute; inset: 0; pointer-events: none; } .gantt-aucune { padding: 48px 16px; text-align: center; color: var(--text-tertiary); font-size: var(--fs-sm); } /* Une séance : bloc teinté à liseré gauche (EventChip du DS), ton temporel réel (horloge vs debut/fin — jamais un statut écrit, ADR-0031 reste gelé). */ .event-chip { position: absolute; top: 8px; bottom: 8px; display: flex; flex-direction: column; justify-content: center; gap: 1px; overflow: hidden; pointer-events: auto; padding: 6px 9px; border: none; text-align: left; cursor: pointer; border-radius: var(--radius-sm); corner-shape: var(--corner); box-shadow: var(--shadow-1); font-family: var(--font-sans); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .event-chip:hover { transform: translateY(-1px); box-shadow: var(--shadow-3); z-index: 2; } /* Deux séances d'un même jour empilées dans la ligne (vues Semaine/Mois). */ .event-chip.is-empile { gap: 0; padding: 3px 8px; } .event-chip.tone-avenir { background: var(--blue-soft); border-left: 3px solid var(--blue); } .event-chip.tone-avenir .ec-heure { color: var(--blue-ink); } .event-chip.tone-encours { background: var(--accent-soft); border-left: 3px solid var(--accent); } .event-chip.tone-encours .ec-heure { color: var(--accent-ink); } .event-chip.tone-passee { background: var(--surface-sunken); border-left: 3px solid var(--ink-4); opacity: 0.6; } .event-chip.tone-passee .ec-heure { color: var(--text-tertiary); } .event-chip.is-compact { padding: 0 6px; justify-content: center; top: 12px; bottom: 12px; } .event-chip.is-compact .ec-titre { font-size: var(--fs-caption); } .ec-titre { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-primary); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ec-heure { font-family: var(--font-mono); font-feature-settings: "tnum" 1; font-size: var(--fs-caption); } .planning-aide { margin-top: 10px; text-align: center; } /* ══════════════ VUE D'ENSEMBLE — DASHBOARD (StatBlock, RoomGauge) ═══════ Cartes opaques (jamais de verre sur la donnée dense, cf. budget verre en en-tête). Tout provient d'agrégats déjà réels : aucune route dédiée. */ .card { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-lg); corner-shape: var(--corner); box-shadow: var(--shadow-2); padding: 18px; } .card-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; } .card-head h2 { margin: 0; font-size: var(--fs-h4); font-weight: var(--fw-semibold); letter-spacing: var(--ls-heading); } /* StatBlock (design system) : grand chiffre mono + libellé, barre ou texte de complément. */ .dash-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; } .stat-card { display: flex; flex-direction: column; gap: 6px; } .stat-label { font-size: var(--fs-caption); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-tertiary); font-weight: var(--fw-semibold); } .stat-value { font-size: var(--fs-h1); font-weight: var(--fw-semibold); letter-spacing: var(--ls-heading); font-family: var(--font-mono); font-feature-settings: "tnum" 1; color: var(--text-primary); } .stat-value.tone-red { color: var(--red-ink); } .stat-sub { font-size: var(--fs-xs); color: var(--text-muted); font-weight: var(--fw-medium); } .stat-bar { height: 5px; border-radius: 3px; background: var(--surface-inset); margin-top: 6px; overflow: hidden; } .stat-bar > span { display: block; height: 100%; border-radius: 3px; background: var(--green); transition: width var(--dur-slow) var(--ease); } /* Deux colonnes : occupation par salle (large) + prochaines formations et postes en défaut empilés (étroite). */ .dash-cols { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; align-items: start; } .dash-side { display: flex; flex-direction: column; gap: 16px; } /* Occupation par salle : barres horizontales, la plus occupée en tête. */ .occ-list { display: flex; flex-direction: column; gap: 13px; } .occ-row { display: grid; grid-template-columns: minmax(56px, auto) 1fr 60px; align-items: center; gap: 12px; } .occ-nom { font-family: var(--font-mono); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .occ-bar { height: 9px; border-radius: 5px; background: var(--surface-inset); overflow: hidden; } .occ-bar > span { display: block; height: 100%; border-radius: 5px; background: var(--text-tertiary); transition: width var(--dur-slow) var(--ease); } .occ-val { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-secondary); text-align: right; } /* Liste cliquable (prochaines formations, postes en défaut) : bouton pleine largeur, jamais un lien mort — chaque ligne navigue réellement. */ .dash-list { display: flex; flex-direction: column; gap: 3px; } .dash-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 7px 8px; border: none; background: transparent; border-radius: var(--radius-sm); corner-shape: var(--corner); cursor: pointer; text-align: left; font-family: var(--font-sans); color: inherit; transition: background var(--dur) var(--ease); } .dash-row:hover { background: var(--surface-inset); } .dash-row .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; } .dash-row .pill { flex-shrink: 0; } .date-chip { width: 42px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; padding: 5px 0; background: var(--surface-inset); border: 1px solid var(--border); border-radius: var(--radius-xs); corner-shape: var(--corner); } .date-chip .dc-num { font-family: var(--font-mono); font-size: var(--fs-body); font-weight: var(--fw-semibold); line-height: 1.1; } .date-chip .dc-mois { font-size: var(--fs-caption); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-muted); } .dash-row-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .dash-row-titre { font-size: var(--fs-sm); font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dash-row-sous { font-size: var(--fs-caption); font-family: var(--font-mono); color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dash-row-mono { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: var(--fw-medium); flex-shrink: 0; } .dash-row-inline { flex: 1; min-width: 0; font-size: var(--fs-sm); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .count-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; padding: 2px 8px; border-radius: var(--radius-pill); corner-shape: var(--corner); font-family: var(--font-mono); font-feature-settings: "tnum" 1; font-size: var(--fs-caption); font-weight: var(--fw-semibold); background: var(--surface-sunken); color: var(--text-tertiary); } .count-chip[data-tone="red"] { background: var(--red-soft); color: var(--red-ink); } /* État vide compact : tient dans une carte plutôt que la grande carte de page (`.empty-state`) — même vocabulaire visuel (icône, texte), en petit. */ .mini-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 12px; text-align: center; } .empty-ico.mini { width: 36px; height: 36px; margin-bottom: 0; } /* ══════════════ VUE SALLES — SYNTHÈSE PAR SALLE (SallesView) ════════════ Pas de filtre « bâtiment » ni de champ « matériel » : notions absentes du modèle de données (voir docs/design/design-system.md § Écarts assumés). */ .salles-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 18px; } .summary-card { display: flex; align-items: center; gap: 16px; } .summary-icon { width: 44px; height: 44px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); corner-shape: var(--corner); background: var(--surface-inset); color: var(--text-tertiary); } .summary-icon.tone-red { background: var(--red-soft); color: var(--red-ink); } .summary-icon.tone-accent { background: var(--accent-soft); color: var(--accent-ink); } .summary-value { font-size: var(--fs-h1); font-weight: var(--fw-semibold); letter-spacing: var(--ls-heading); font-family: var(--font-mono); font-feature-settings: "tnum" 1; } .summary-value.tone-red { color: var(--red-ink); } .summary-label { font-size: var(--fs-caption); color: var(--text-tertiary); margin-top: 2px; } .salles-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; } .salles-toolbar .spacer { flex: 1; } .fchips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .fchip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid var(--border); background: var(--surface-card); border-radius: var(--radius-pill); corner-shape: var(--corner); font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-secondary); cursor: pointer; white-space: nowrap; transition: all var(--dur) var(--ease); } .fchip:hover { border-color: var(--border-strong); } .fchip.is-active { background: var(--accent); border-color: var(--accent); color: #fff; } .fchip .cdot { width: 8px; height: 8px; border-radius: 50%; flex: none; } .salles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; } .salle-widget { display: flex; flex-direction: column; } .sw-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 14px; } .sw-title { font-size: var(--fs-h4); font-weight: var(--fw-semibold); } .sw-sub { font-size: var(--fs-caption); color: var(--text-tertiary); margin-top: 2px; } .sw-body { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; } .sw-stats { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; } .sw-row { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); } .sw-row .lbl { color: var(--text-secondary); flex: 1; } .sw-row .val { font-weight: var(--fw-semibold); font-family: var(--font-mono); } .sw-row .val.tone-red { color: var(--red-ink); } .sw-action { width: 100%; } /* ══════════════════ BOÎTES DE DIALOGUE (verre fort + voile) ═════════════ */ .dialog { border: 1px solid var(--glass-border); border-radius: var(--radius-xl); corner-shape: var(--corner-soft); color: var(--text-primary); padding: 0; width: min(460px, 92vw); background: var(--glass-bg-strong); backdrop-filter: blur(var(--blur-xl)) saturate(var(--glass-saturate)); -webkit-backdrop-filter: blur(var(--blur-xl)) saturate(var(--glass-saturate)); box-shadow: var(--shadow-4); animation: pupitrePop var(--dur-slow) var(--ease-out); } .dialog::backdrop { background: rgba(20, 20, 25, 0.42); backdrop-filter: blur(4px); animation: pupitreFade var(--dur) var(--ease); } @keyframes pupitrePop { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } } @keyframes pupitreFade { from { opacity: 0; } to { opacity: 1; } } /* ── Tiroir de détail (Drawer du design system) ────────────────────────── Un