/* ========================================================================== Relief3D — feuille de style de l'interface Palettes au choix (Cobalt par défaut) et Graphite pour la création ; orange balise réservé à la trace ========================================================================== */ /* Palettes de couleur. - Cobalt : palette par défaut (sans attribut) ; - Épicéa, Lavande, Pêche, Rose poudré : au choix dans Mon compte (data-palette sur ) ; - Graphite : imposée par les interfaces de création, gris neutres pour ne pas colorer les rendus 3D. Chaque palette existe en clair et en sombre (data-theme ou réglage du système). */ :root { --topbar-h: 56px; --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --font: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --ease: cubic-bezier(.2, .7, .2, 1); /* Couleurs communes à toutes les palettes */ --trace: #FF5A36; /* la trace GPX */ --danger: #C8321F; --danger-hover:#A82815; --danger-soft: #FDECE8; --online: #2FA35A; /* ---- Cobalt, clair ---- */ --bg: #F4F6FA; --surface: #FFFFFF; --surface-2: #E9EDF4; --line: #D8DFEA; --line-strong: #BCC6D6; --ink: #141A26; --ink-2: #556176; --ink-3: #7E899C; --primary: #2F5BEA; --primary-hover: #2449C9; --primary-ink: #FFFFFF; --accent: #2F5BEA; --accent-strong: #2449C9; --accent-soft: #E3EAFD; --on-accent: #FFFFFF; --focus: #2F5BEA; --info-soft: #E6EDFC; --logo-bg: #1B2A4A; --logo-line: #9DB3E8; --art-bg: #E8EDF5; --art-line: rgba(36, 64, 126, .18); --art-index: rgba(36, 64, 126, .38); --art-tint: #24407E; --art-tint-max: .28; --art-halo: rgba(244, 246, 250, .85); --shadow-rgb: 20, 26, 38; --shadow-pop: 0 18px 40px -18px rgba(var(--shadow-rgb), .35), 0 2px 6px rgba(var(--shadow-rgb), .06); color-scheme: light; } /* Couleurs communes, sombre */ :root[data-theme="dark"] { --trace: #FF6B4A; --danger: #F2826F; --danger-hover: #F59C8C; --danger-soft: #2B1814; --online: #43C672; color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --trace: #FF6B4A; --danger: #F2826F; --danger-hover: #F59C8C; --danger-soft: #2B1814; --online: #43C672; color-scheme: dark; } } /* ---- Cobalt, sombre ---- */ :root:not([data-palette])[data-theme="dark"] { --bg: #0B1019; --surface: #121926; --surface-2: #1A2232; --line: #263045; --line-strong: #35415A; --ink: #E6EBF5; --ink-2: #9AA6BD; --ink-3: #6E7A92; --primary: #8FA8FF; --primary-hover: #A9BDFF; --primary-ink: #0B1019; --accent: #8FA8FF; --accent-strong: #A9BDFF; --accent-soft: #1C2745; --on-accent: #0B1019; --focus: #8FA8FF; --info-soft: #16203A; --logo-bg: #22325A; --logo-line: #9DB3E8; --art-bg: #0F1522; --art-line: rgba(157, 179, 232, .14); --art-index: rgba(157, 179, 232, .30); --art-tint: #9DB3E8; --art-tint-max: .10; --art-halo: rgba(15, 21, 34, .85); --shadow-pop: 0 18px 40px -16px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .03); } @media (prefers-color-scheme: dark) { :root:not([data-palette]):not([data-theme="light"]) { --bg: #0B1019; --surface: #121926; --surface-2: #1A2232; --line: #263045; --line-strong: #35415A; --ink: #E6EBF5; --ink-2: #9AA6BD; --ink-3: #6E7A92; --primary: #8FA8FF; --primary-hover: #A9BDFF; --primary-ink: #0B1019; --accent: #8FA8FF; --accent-strong: #A9BDFF; --accent-soft: #1C2745; --on-accent: #0B1019; --focus: #8FA8FF; --info-soft: #16203A; --logo-bg: #22325A; --logo-line: #9DB3E8; --art-bg: #0F1522; --art-line: rgba(157, 179, 232, .14); --art-index: rgba(157, 179, 232, .30); --art-tint: #9DB3E8; --art-tint-max: .10; --art-halo: rgba(15, 21, 34, .85); --shadow-pop: 0 18px 40px -16px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .03); } } /* ---- Épicéa, clair ---- */ :root[data-palette="epicea"] { --bg: #F1F4F2; --surface: #FFFFFF; --surface-2: #E6ECE9; --line: #D3DCD8; --line-strong: #B9C6C1; --ink: #13251F; --ink-2: #53655F; --ink-3: #7D8D87; --primary: #1C4A40; --primary-hover: #143A32; --primary-ink: #FFFFFF; --accent: #2F7D69; --accent-strong: #1C5E4E; --accent-soft: #DCE9E4; --on-accent: #FFFFFF; --focus: #2F7D69; --info-soft: #E1EEE9; --logo-bg: #1C4A40; --logo-line: #A9CBBF; --art-bg: #E3EAE6; --art-line: rgba(28, 74, 64, .20); --art-index: rgba(28, 74, 64, .42); --art-tint: #1C4A40; --art-tint-max: .28; --art-halo: rgba(241, 244, 242, .85); --shadow-rgb: 19, 37, 31; --shadow-pop: 0 18px 40px -18px rgba(var(--shadow-rgb), .35), 0 2px 6px rgba(var(--shadow-rgb), .06); } /* ---- Épicéa, sombre ---- */ :root[data-palette="epicea"][data-theme="dark"] { --bg: #0D1513; --surface: #131E1B; --surface-2: #1A2724; --line: #25342F; --line-strong: #34463F; --ink: #E4ECE8; --ink-2: #9DAEA7; --ink-3: #72847D; --primary: #CFE3DB; --primary-hover: #E4F0EB; --primary-ink: #0D1513; --accent: #6DB8A2; --accent-strong: #9BD3C2; --accent-soft: #1D302A; --on-accent: #0D1513; --focus: #6DB8A2; --info-soft: #16261F; --logo-bg: #1F4A40; --logo-line: #A9CBBF; --art-bg: #111C19; --art-line: rgba(169, 203, 191, .14); --art-index: rgba(169, 203, 191, .30); --art-tint: #A9CBBF; --art-tint-max: .10; --art-halo: rgba(17, 28, 25, .85); --shadow-pop: 0 18px 40px -16px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .03); } @media (prefers-color-scheme: dark) { :root[data-palette="epicea"]:not([data-theme="light"]) { --bg: #0D1513; --surface: #131E1B; --surface-2: #1A2724; --line: #25342F; --line-strong: #34463F; --ink: #E4ECE8; --ink-2: #9DAEA7; --ink-3: #72847D; --primary: #CFE3DB; --primary-hover: #E4F0EB; --primary-ink: #0D1513; --accent: #6DB8A2; --accent-strong: #9BD3C2; --accent-soft: #1D302A; --on-accent: #0D1513; --focus: #6DB8A2; --info-soft: #16261F; --logo-bg: #1F4A40; --logo-line: #A9CBBF; --art-bg: #111C19; --art-line: rgba(169, 203, 191, .14); --art-index: rgba(169, 203, 191, .30); --art-tint: #A9CBBF; --art-tint-max: .10; --art-halo: rgba(17, 28, 25, .85); --shadow-pop: 0 18px 40px -16px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .03); } } /* ---- Lavande, clair ---- */ :root[data-palette="lavande"] { --bg: #F6F4FB; --surface: #FFFFFF; --surface-2: #EDE9F7; --line: #DDD7EE; --line-strong: #C4BCDD; --ink: #1E1A2E; --ink-2: #5F5878; --ink-3: #8A84A0; --primary: #6B5BD2; --primary-hover: #5847BF; --primary-ink: #FFFFFF; --accent: #6B5BD2; --accent-strong: #4F3FB5; --accent-soft: #EAE6FB; --on-accent: #FFFFFF; --focus: #6B5BD2; --info-soft: #EEEBFB; --logo-bg: #3B3170; --logo-line: #C9C0F2; --art-bg: #EDEAF7; --art-line: rgba(70, 55, 140, .16); --art-index: rgba(70, 55, 140, .34); --art-tint: #4A3C96; --art-tint-max: .24; --art-halo: rgba(246, 244, 251, .85); --shadow-rgb: 30, 24, 50; --shadow-pop: 0 18px 40px -18px rgba(var(--shadow-rgb), .35), 0 2px 6px rgba(var(--shadow-rgb), .06); } /* ---- Lavande, sombre ---- */ :root[data-palette="lavande"][data-theme="dark"] { --bg: #120F1C; --surface: #1A1628; --surface-2: #231E35; --line: #2F2944; --line-strong: #3F3858; --ink: #ECE9F7; --ink-2: #A9A2C4; --ink-3: #7D7697; --primary: #B7ABFF; --primary-hover: #CBC2FF; --primary-ink: #120F1C; --accent: #B7ABFF; --accent-strong: #D0C8FF; --accent-soft: #2A2446; --on-accent: #120F1C; --focus: #B7ABFF; --info-soft: #211C36; --logo-bg: #3B3170; --logo-line: #C9C0F2; --art-bg: #17132A; --art-line: rgba(201, 192, 242, .13); --art-index: rgba(201, 192, 242, .28); --art-tint: #C9C0F2; --art-tint-max: .09; --art-halo: rgba(23, 19, 42, .85); --shadow-pop: 0 18px 40px -16px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .03); } @media (prefers-color-scheme: dark) { :root[data-palette="lavande"]:not([data-theme="light"]) { --bg: #120F1C; --surface: #1A1628; --surface-2: #231E35; --line: #2F2944; --line-strong: #3F3858; --ink: #ECE9F7; --ink-2: #A9A2C4; --ink-3: #7D7697; --primary: #B7ABFF; --primary-hover: #CBC2FF; --primary-ink: #120F1C; --accent: #B7ABFF; --accent-strong: #D0C8FF; --accent-soft: #2A2446; --on-accent: #120F1C; --focus: #B7ABFF; --info-soft: #211C36; --logo-bg: #3B3170; --logo-line: #C9C0F2; --art-bg: #17132A; --art-line: rgba(201, 192, 242, .13); --art-index: rgba(201, 192, 242, .28); --art-tint: #C9C0F2; --art-tint-max: .09; --art-halo: rgba(23, 19, 42, .85); --shadow-pop: 0 18px 40px -16px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .03); } } /* ---- Pêche, clair ---- */ :root[data-palette="peche"] { --bg: #FBF6F3; --surface: #FFFFFF; --surface-2: #F4EBE5; --line: #EADDD4; --line-strong: #D8C5B8; --ink: #2A1E18; --ink-2: #6E5D53; --ink-3: #9A887D; --primary: #D9653B; --primary-hover: #C2552E; --primary-ink: #FFFFFF; --accent: #D9653B; --accent-strong: #A9471F; --accent-soft: #FBE7DC; --on-accent: #FFFFFF; --focus: #D9653B; --info-soft: #FBEDE5; --logo-bg: #5A2E1C; --logo-line: #F2C3A8; --art-bg: #F5EBE4; --art-line: rgba(120, 64, 36, .16); --art-index: rgba(120, 64, 36, .34); --art-tint: #7A3F22; --art-tint-max: .22; --art-halo: rgba(251, 246, 243, .85); --shadow-rgb: 42, 30, 24; --shadow-pop: 0 18px 40px -18px rgba(var(--shadow-rgb), .35), 0 2px 6px rgba(var(--shadow-rgb), .06); } /* ---- Pêche, sombre ---- */ :root[data-palette="peche"][data-theme="dark"] { --bg: #19120F; --surface: #221915; --surface-2: #2C211C; --line: #3A2C25; --line-strong: #4C3A31; --ink: #F4EAE4; --ink-2: #BDA89C; --ink-3: #8E7B70; --primary: #FFB08E; --primary-hover: #FFC4A9; --primary-ink: #19120F; --accent: #FFB08E; --accent-strong: #FFC9B1; --accent-soft: #3A2519; --on-accent: #19120F; --focus: #FFB08E; --info-soft: #2E1E16; --logo-bg: #5A2E1C; --logo-line: #F2C3A8; --art-bg: #1E1612; --art-line: rgba(242, 195, 168, .13); --art-index: rgba(242, 195, 168, .28); --art-tint: #F2C3A8; --art-tint-max: .08; --art-halo: rgba(30, 22, 18, .85); --shadow-pop: 0 18px 40px -16px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .03); } @media (prefers-color-scheme: dark) { :root[data-palette="peche"]:not([data-theme="light"]) { --bg: #19120F; --surface: #221915; --surface-2: #2C211C; --line: #3A2C25; --line-strong: #4C3A31; --ink: #F4EAE4; --ink-2: #BDA89C; --ink-3: #8E7B70; --primary: #FFB08E; --primary-hover: #FFC4A9; --primary-ink: #19120F; --accent: #FFB08E; --accent-strong: #FFC9B1; --accent-soft: #3A2519; --on-accent: #19120F; --focus: #FFB08E; --info-soft: #2E1E16; --logo-bg: #5A2E1C; --logo-line: #F2C3A8; --art-bg: #1E1612; --art-line: rgba(242, 195, 168, .13); --art-index: rgba(242, 195, 168, .28); --art-tint: #F2C3A8; --art-tint-max: .08; --art-halo: rgba(30, 22, 18, .85); --shadow-pop: 0 18px 40px -16px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .03); } } /* ---- Rose poudré, clair ---- */ :root[data-palette="rose"] { --bg: #FBF4F7; --surface: #FFFFFF; --surface-2: #F4E8EE; --line: #EAD8E1; --line-strong: #D8BFCC; --ink: #2A1822; --ink-2: #6E5663; --ink-3: #9B8490; --primary: #C4487C; --primary-hover: #AD3A6B; --primary-ink: #FFFFFF; --accent: #C4487C; --accent-strong: #9E2F5E; --accent-soft: #FAE3ED; --on-accent: #FFFFFF; --focus: #C4487C; --info-soft: #FBEAF1; --logo-bg: #5B2440; --logo-line: #F0B8D0; --art-bg: #F5E9EF; --art-line: rgba(120, 40, 80, .15); --art-index: rgba(120, 40, 80, .32); --art-tint: #7A2E54; --art-tint-max: .22; --art-halo: rgba(251, 244, 247, .85); --shadow-rgb: 42, 24, 34; --shadow-pop: 0 18px 40px -18px rgba(var(--shadow-rgb), .35), 0 2px 6px rgba(var(--shadow-rgb), .06); } /* ---- Rose poudré, sombre ---- */ :root[data-palette="rose"][data-theme="dark"] { --bg: #1A1016; --surface: #23161E; --surface-2: #2D1D27; --line: #3B2833; --line-strong: #4E3544; --ink: #F5E8EF; --ink-2: #BFA3B2; --ink-3: #8F7483; --primary: #FF9EC6; --primary-hover: #FFB8D5; --primary-ink: #1A1016; --accent: #FF9EC6; --accent-strong: #FFC0DA; --accent-soft: #3E1F30; --on-accent: #1A1016; --focus: #FF9EC6; --info-soft: #301A26; --logo-bg: #5B2440; --logo-line: #F0B8D0; --art-bg: #1F1319; --art-line: rgba(240, 184, 208, .13); --art-index: rgba(240, 184, 208, .28); --art-tint: #F0B8D0; --art-tint-max: .08; --art-halo: rgba(31, 19, 25, .85); --shadow-pop: 0 18px 40px -16px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .03); } @media (prefers-color-scheme: dark) { :root[data-palette="rose"]:not([data-theme="light"]) { --bg: #1A1016; --surface: #23161E; --surface-2: #2D1D27; --line: #3B2833; --line-strong: #4E3544; --ink: #F5E8EF; --ink-2: #BFA3B2; --ink-3: #8F7483; --primary: #FF9EC6; --primary-hover: #FFB8D5; --primary-ink: #1A1016; --accent: #FF9EC6; --accent-strong: #FFC0DA; --accent-soft: #3E1F30; --on-accent: #1A1016; --focus: #FF9EC6; --info-soft: #301A26; --logo-bg: #5B2440; --logo-line: #F0B8D0; --art-bg: #1F1319; --art-line: rgba(240, 184, 208, .13); --art-index: rgba(240, 184, 208, .28); --art-tint: #F0B8D0; --art-tint-max: .08; --art-halo: rgba(31, 19, 25, .85); --shadow-pop: 0 18px 40px -16px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .03); } } /* ---- Graphite (interfaces de création), clair ---- */ :root[data-palette="graphite"] { --bg: #F3F3F4; --surface: #FFFFFF; --surface-2: #EAEAEC; --line: #DCDCE0; --line-strong: #C3C3C9; --ink: #19191C; --ink-2: #5E5E66; --ink-3: #8A8A93; --primary: #26262A; --primary-hover: #3A3A40; --primary-ink: #FFFFFF; --accent: #3B6BF0; --accent-strong: #2350D0; --accent-soft: #E6ECFD; --on-accent: #FFFFFF; --focus: #3B6BF0; --info-soft: #EEF2FD; --logo-bg: #26262A; --logo-line: #B4B4BC; --art-bg: #EAEAEC; --art-line: rgba(25, 25, 28, .14); --art-index: rgba(25, 25, 28, .32); --art-tint: #19191C; --art-tint-max: .18; --art-halo: rgba(243, 243, 244, .85); --shadow-rgb: 18, 18, 22; --shadow-pop: 0 18px 40px -18px rgba(var(--shadow-rgb), .35), 0 2px 6px rgba(var(--shadow-rgb), .06); } /* ---- Graphite (interfaces de création), sombre ---- */ :root[data-palette="graphite"][data-theme="dark"] { --bg: #141416; --surface: #1C1C1F; --surface-2: #242428; --line: #2E2E33; --line-strong: #3E3E45; --ink: #ECECEF; --ink-2: #A2A2AB; --ink-3: #74747D; --primary: #E6E6E9; --primary-hover: #FFFFFF; --primary-ink: #141416; --accent: #7C9CFF; --accent-strong: #A9BDFF; --accent-soft: #1E2438; --on-accent: #141416; --focus: #7C9CFF; --info-soft: #1B2030; --logo-bg: #2A2A2F; --logo-line: #B4B4BC; --art-bg: #19191C; --art-line: rgba(236, 236, 239, .10); --art-index: rgba(236, 236, 239, .24); --art-tint: #ECECEF; --art-tint-max: .06; --art-halo: rgba(25, 25, 28, .85); --shadow-pop: 0 18px 40px -16px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .03); } @media (prefers-color-scheme: dark) { :root[data-palette="graphite"]:not([data-theme="light"]) { --bg: #141416; --surface: #1C1C1F; --surface-2: #242428; --line: #2E2E33; --line-strong: #3E3E45; --ink: #ECECEF; --ink-2: #A2A2AB; --ink-3: #74747D; --primary: #E6E6E9; --primary-hover: #FFFFFF; --primary-ink: #141416; --accent: #7C9CFF; --accent-strong: #A9BDFF; --accent-soft: #1E2438; --on-accent: #141416; --focus: #7C9CFF; --info-soft: #1B2030; --logo-bg: #2A2A2F; --logo-line: #B4B4BC; --art-bg: #19191C; --art-line: rgba(236, 236, 239, .10); --art-index: rgba(236, 236, 239, .24); --art-tint: #ECECEF; --art-tint-max: .06; --art-halo: rgba(25, 25, 28, .85); --shadow-pop: 0 18px 40px -16px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .03); } } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100dvh; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, p { margin: 0; } button, input { font: inherit; color: inherit; } button { cursor: pointer; } [hidden] { display: none !important; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .skip-link { position: absolute; left: 12px; top: -48px; z-index: 100; padding: 8px 12px; border-radius: var(--r-sm); background: var(--primary); color: var(--primary-ink); text-decoration: none; } .skip-link:focus { top: 8px; } .icon { flex: none; } /* Bootstrap Icons (police) : taille et alignement homogènes */ .bi.icon { display: inline-block; font-size: 19px; line-height: 1; vertical-align: -.125em; } .bi.icon::before { vertical-align: 0; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---------- Barre supérieure ---------- */ .topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 12px; height: var(--topbar-h); padding: 0 12px 0 14px; padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); background: color-mix(in oklab, var(--bg) 84%, transparent); -webkit-backdrop-filter: saturate(1.5) blur(14px); backdrop-filter: saturate(1.5) blur(14px); border-bottom: 1px solid var(--line); } .brand { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 8px 0 4px; margin-left: -4px; border-radius: var(--r-md); color: var(--ink); text-decoration: none; } .brand-mark { display: block; } .brand-name { font-size: 17px; font-weight: 700; letter-spacing: -.02em; } .main-nav { display: flex; align-items: center; gap: 2px; margin-left: 12px; padding-left: 14px; border-left: 1px solid var(--line); min-width: 0; } .main-nav-link { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: var(--r-md); color: var(--ink-2); font-size: 14.5px; font-weight: 560; text-decoration: none; white-space: nowrap; transition: background-color .15s, color .15s; } .main-nav-link .icon { font-size: 17px; } .main-nav-link:hover { background: var(--surface-2); color: var(--ink); } .main-nav-link.is-active { background: var(--accent-soft); color: var(--accent-strong); } @media (max-width: 760px) { .main-nav { margin-left: 4px; padding-left: 8px; } .main-nav-link { width: 40px; padding: 0; justify-content: center; } .main-nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } } @media (max-width: 420px) { .brand-name { display: none; } } .topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 4px; } .icon-btn { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: var(--r-md); background: transparent; color: var(--ink-2); text-decoration: none; transition: background-color .15s, color .15s; } .icon-btn:hover { background: var(--surface-2); color: var(--ink); } /* Info-bulle */ [data-tip]::after { content: attr(data-tip); position: absolute; top: calc(100% + 8px); left: 50%; translate: -50% -2px; padding: 5px 9px; border-radius: 7px; background: var(--ink); color: var(--bg); font-size: 12.5px; font-weight: 500; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s, translate .12s var(--ease); } [aria-expanded="true"][data-tip]::after { display: none; } [data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; translate: -50% 0; transition-delay: .35s; } .account { position: relative; } .account-btn { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 8px 0 5px; border: 1px solid transparent; border-radius: 12px; background: transparent; transition: background-color .15s, border-color .15s; } .account-btn:hover { background: var(--surface-2); } .account-btn[aria-expanded="true"] { background: var(--surface); border-color: var(--line); } .account.is-pinned .account-btn { border-color: color-mix(in oklab, var(--accent) 45%, var(--line)); } .account-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: 560; } .account-chevron { font-size: 14px; color: var(--ink-3); transition: rotate .2s var(--ease); } .account-btn[aria-expanded="true"] .account-chevron { rotate: 180deg; } .avatar { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); font-size: 12px; font-weight: 650; letter-spacing: .02em; } .avatar-lg { width: 40px; height: 40px; font-size: 14px; } .menu { position: absolute; right: 0; top: calc(100% + 8px); width: 260px; padding: 6px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-pop); transform-origin: top right; animation: menu-in .16s var(--ease); } .account .menu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; } @keyframes menu-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } } .menu-identity { display: flex; align-items: center; gap: 12px; padding: 10px 10px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--line); } .menu-name { font-weight: 620; line-height: 1.3; } .menu-meta { color: var(--ink-2); font-size: 13.5px; } .menu-item { display: flex; align-items: center; gap: 10px; width: 100%; height: 40px; padding: 0 10px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink); font-size: 14.5px; text-align: left; } .menu-item .icon { color: var(--ink-2); } a.menu-item { text-decoration: none; } .menu-item:hover, .menu-item:focus-visible { background: var(--surface-2); outline: none; } /* ---------- Formulaires ---------- */ .form { display: grid; gap: 18px; } .field { display: grid; gap: 7px; } .label { font-size: 14px; font-weight: 560; color: var(--ink); } .input { width: 100%; height: 46px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); color: var(--ink); font-size: 15.5px; transition: border-color .15s, box-shadow .15s; } .input:hover { border-color: var(--ink-3); } .input:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 4px color-mix(in oklab, var(--focus) 22%, transparent); } .input-group { position: relative; } .input-group .input { padding-right: 48px; } .input-action { position: absolute; top: 3px; right: 3px; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-3); } .input-action:hover { color: var(--ink); background: var(--surface-2); } .input-action .icon-hide { display: none; } .input-action[aria-pressed="true"] .icon-show { display: none; } .input-action[aria-pressed="true"] .icon-hide { display: inline-block; } .field-hint { font-size: 13px; color: var(--danger); } /* ---------- Boutons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 20px; border: 1px solid transparent; border-radius: var(--r-md); font-size: 15px; font-weight: 620; text-decoration: none; transition: background-color .15s, border-color .15s, transform .08s; } .btn:active { transform: translateY(1px); } .btn-block { width: 100%; } .btn-primary { background: var(--primary); color: var(--primary-ink); } .btn-primary:hover { background: var(--primary-hover); } .btn-primary[aria-busy="true"] { cursor: progress; opacity: .8; } .btn-secondary { background: var(--surface); border-color: var(--line-strong); color: var(--ink); } .btn-secondary:hover { background: var(--surface-2); } .btn[aria-busy="true"] .btn-label::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; } @keyframes spin { to { rotate: 360deg; } } /* ---------- Alertes ---------- */ .alert { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 20px; padding: 11px 14px; border-radius: var(--r-md); font-size: 14.5px; line-height: 1.45; } .alert .icon { margin-top: 2px; font-size: 17px; } .alert-error { background: var(--danger-soft); color: var(--danger); } .alert-info { background: var(--info-soft); color: var(--ink); } .alert-info .icon { color: var(--focus); } /* ---------- Page de connexion ---------- */ .page-login .main { min-height: calc(100dvh - var(--topbar-h)); display: flex; } .login { flex: 1; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(380px, 1fr); } .login-art { position: relative; margin: 12px 0 12px 12px; border-radius: var(--r-xl); overflow: hidden; background: var(--art-bg); } .relief-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .login-panel { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 48px clamp(24px, 5vw, 72px) 24px; } .login-form-wrap { width: 100%; max-width: 360px; margin-block: auto; } .login-title { font-size: 34px; line-height: 1.1; font-weight: 700; letter-spacing: -.035em; } .login-lede { margin: 8px 0 28px; color: var(--ink-2); font-size: 15.5px; } .login-form-wrap .btn { margin-top: 6px; } .login-foot { padding-top: 24px; color: var(--ink-3); font-size: 12.5px; } @media (max-width: 880px) { .login { grid-template-columns: 1fr; grid-template-rows: 168px 1fr; } .login-art { margin: 12px 12px 0; border-radius: var(--r-lg); } .login-panel { padding: 36px 24px 20px; justify-content: flex-start; } .login-form-wrap { margin-block: 0 auto; } } /* ========================================================================== Grille — conteneur centré + 12 colonnes (noms inspirés de Bootstrap) .container > .row > .col-{n} / .col-{bp}-{n} bp : sm 576, md 768, lg 1024, xl 1280 ========================================================================== */ .container { --container-max: 1200px; width: 100%; max-width: calc(var(--container-max) + 2 * var(--container-pad)); margin-inline: auto; padding: 32px var(--container-pad) 64px; --container-pad: clamp(16px, 4vw, 40px); } .container-sm { --container-max: 720px; } .container-md { --container-max: 960px; } .container-fluid { --container-max: 100%; } .row { --gutter: 24px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: start; } .row > * { grid-column: span 12; min-width: 0; } .row-tight { --gutter: 12px; } .row-form { --gutter: 16px; row-gap: 14px; } .row-stretch { align-items: stretch; } .col { grid-column: auto / span 1; } .row > .col-1 { grid-column: span 1; } .row > .col-2 { grid-column: span 2; } .row > .col-3 { grid-column: span 3; } .row > .col-4 { grid-column: span 4; } .row > .col-5 { grid-column: span 5; } .row > .col-6 { grid-column: span 6; } .row > .col-7 { grid-column: span 7; } .row > .col-8 { grid-column: span 8; } .row > .col-9 { grid-column: span 9; } .row > .col-10 { grid-column: span 10; } .row > .col-11 { grid-column: span 11; } .row > .col-12 { grid-column: span 12; } .row > .col-auto { grid-column: auto; } @media (min-width: 576px) { .row > .col-sm-1 { grid-column: span 1; } .row > .col-sm-2 { grid-column: span 2; } .row > .col-sm-3 { grid-column: span 3; } .row > .col-sm-4 { grid-column: span 4; } .row > .col-sm-5 { grid-column: span 5; } .row > .col-sm-6 { grid-column: span 6; } .row > .col-sm-7 { grid-column: span 7; } .row > .col-sm-8 { grid-column: span 8; } .row > .col-sm-9 { grid-column: span 9; } .row > .col-sm-10 { grid-column: span 10; } .row > .col-sm-11 { grid-column: span 11; } .row > .col-sm-12 { grid-column: span 12; } .row > .offset-sm-1 { grid-column-start: 2; } .row > .offset-sm-2 { grid-column-start: 3; } .row > .offset-sm-3 { grid-column-start: 4; } .row > .offset-sm-4 { grid-column-start: 5; } .row > .offset-sm-5 { grid-column-start: 6; } .row > .offset-sm-6 { grid-column-start: 7; } .row > .offset-sm-7 { grid-column-start: 8; } .row > .offset-sm-8 { grid-column-start: 9; } .row > .offset-sm-9 { grid-column-start: 10; } .row > .offset-sm-10 { grid-column-start: 11; } .row > .offset-sm-11 { grid-column-start: 12; } .d-sm-none { display: none !important; } } @media (min-width: 768px) { .row > .col-md-1 { grid-column: span 1; } .row > .col-md-2 { grid-column: span 2; } .row > .col-md-3 { grid-column: span 3; } .row > .col-md-4 { grid-column: span 4; } .row > .col-md-5 { grid-column: span 5; } .row > .col-md-6 { grid-column: span 6; } .row > .col-md-7 { grid-column: span 7; } .row > .col-md-8 { grid-column: span 8; } .row > .col-md-9 { grid-column: span 9; } .row > .col-md-10 { grid-column: span 10; } .row > .col-md-11 { grid-column: span 11; } .row > .col-md-12 { grid-column: span 12; } .row > .offset-md-1 { grid-column-start: 2; } .row > .offset-md-2 { grid-column-start: 3; } .row > .offset-md-3 { grid-column-start: 4; } .row > .offset-md-4 { grid-column-start: 5; } .row > .offset-md-5 { grid-column-start: 6; } .row > .offset-md-6 { grid-column-start: 7; } .row > .offset-md-7 { grid-column-start: 8; } .row > .offset-md-8 { grid-column-start: 9; } .row > .offset-md-9 { grid-column-start: 10; } .row > .offset-md-10 { grid-column-start: 11; } .row > .offset-md-11 { grid-column-start: 12; } .d-md-none { display: none !important; } } @media (min-width: 1024px) { .row > .col-lg-1 { grid-column: span 1; } .row > .col-lg-2 { grid-column: span 2; } .row > .col-lg-3 { grid-column: span 3; } .row > .col-lg-4 { grid-column: span 4; } .row > .col-lg-5 { grid-column: span 5; } .row > .col-lg-6 { grid-column: span 6; } .row > .col-lg-7 { grid-column: span 7; } .row > .col-lg-8 { grid-column: span 8; } .row > .col-lg-9 { grid-column: span 9; } .row > .col-lg-10 { grid-column: span 10; } .row > .col-lg-11 { grid-column: span 11; } .row > .col-lg-12 { grid-column: span 12; } .row > .offset-lg-1 { grid-column-start: 2; } .row > .offset-lg-2 { grid-column-start: 3; } .row > .offset-lg-3 { grid-column-start: 4; } .row > .offset-lg-4 { grid-column-start: 5; } .row > .offset-lg-5 { grid-column-start: 6; } .row > .offset-lg-6 { grid-column-start: 7; } .row > .offset-lg-7 { grid-column-start: 8; } .row > .offset-lg-8 { grid-column-start: 9; } .row > .offset-lg-9 { grid-column-start: 10; } .row > .offset-lg-10 { grid-column-start: 11; } .row > .offset-lg-11 { grid-column-start: 12; } .d-lg-none { display: none !important; } } @media (min-width: 1280px) { .row > .col-xl-1 { grid-column: span 1; } .row > .col-xl-2 { grid-column: span 2; } .row > .col-xl-3 { grid-column: span 3; } .row > .col-xl-4 { grid-column: span 4; } .row > .col-xl-5 { grid-column: span 5; } .row > .col-xl-6 { grid-column: span 6; } .row > .col-xl-7 { grid-column: span 7; } .row > .col-xl-8 { grid-column: span 8; } .row > .col-xl-9 { grid-column: span 9; } .row > .col-xl-10 { grid-column: span 10; } .row > .col-xl-11 { grid-column: span 11; } .row > .col-xl-12 { grid-column: span 12; } .row > .offset-xl-1 { grid-column-start: 2; } .row > .offset-xl-2 { grid-column-start: 3; } .row > .offset-xl-3 { grid-column-start: 4; } .row > .offset-xl-4 { grid-column-start: 5; } .row > .offset-xl-5 { grid-column-start: 6; } .row > .offset-xl-6 { grid-column-start: 7; } .row > .offset-xl-7 { grid-column-start: 8; } .row > .offset-xl-8 { grid-column-start: 9; } .row > .offset-xl-9 { grid-column-start: 10; } .row > .offset-xl-10 { grid-column-start: 11; } .row > .offset-xl-11 { grid-column-start: 12; } .d-xl-none { display: none !important; } } /* ---------- Pages de l'application ---------- */ .page { width: 100%; max-width: 1120px; margin: 0 auto; padding: 32px clamp(16px, 4vw, 40px) 64px; } .page-head { margin-bottom: 24px; } .page-title { font-size: 28px; line-height: 1.15; font-weight: 700; letter-spacing: -.03em; } .back-link { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px -6px; padding: 4px 8px 4px 6px; border-radius: var(--r-sm); color: var(--ink-2); font-size: 14px; font-weight: 540; text-decoration: none; } .back-link:hover { color: var(--ink); background: var(--surface-2); } .back-link .icon { font-size: 15px; } .empty { display: grid; justify-items: center; text-align: center; padding: 72px 24px; border: 1px dashed var(--line-strong); border-radius: var(--r-xl); color: var(--ink); } .empty-icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 16px; border-radius: 18px; background: var(--accent-soft); color: var(--accent-strong); } .empty-icon .icon { font-size: 28px; } .empty-art { width: 150px; height: auto; margin-bottom: 20px; color: var(--ink-2); } .empty-title { font-size: 18px; font-weight: 650; letter-spacing: -.01em; } .empty-text { max-width: 42ch; margin-top: 6px; color: var(--ink-2); } .panel { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); } .panel-head { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--line); } .panel-title { font-size: 16px; font-weight: 650; } .count { min-width: 24px; padding: 1px 8px; border-radius: 99px; background: var(--surface-2); color: var(--ink-2); font-size: 13px; font-weight: 600; text-align: center; } .user-list { list-style: none; margin: 0; padding: 6px 0; } .user-row { display: flex; align-items: center; gap: 14px; padding: 10px 20px; } .user-id { flex: 1; min-width: 0; } .user-name { font-weight: 580; } .user-login { color: var(--ink-2); font-size: 13.5px; } .role { padding: 3px 10px; border-radius: 99px; font-size: 13px; font-weight: 580; background: var(--surface-2); color: var(--ink-2); } .role-admin { background: var(--accent-soft); color: var(--accent-strong); } .page-error { display: grid; justify-items: start; gap: 10px; max-width: 560px; padding-top: 12vh; } .error-code { color: var(--trace); font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; } .error-text { color: var(--ink-2); margin-bottom: 14px; } /* ---------- Responsive barre supérieure ---------- */ @media (max-width: 520px) { .account-name { display: none; } .account-btn { padding-right: 6px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ========================================================================== Composants communs ajoutés ========================================================================== */ .btn-sm { height: 38px; padding: 0 14px; font-size: 14px; gap: 6px; } .btn-sm .icon { font-size: 16px; } .btn-danger { background: var(--danger); color: #fff; } .btn-danger:hover { background: var(--danger-hover); } :root[data-theme="dark"] .btn-danger { color: #1A0D0A; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-danger { color: #1A0D0A; } } .icon-btn-danger:hover { color: var(--danger); background: var(--danger-soft); } .icon-btn-placeholder { display: inline-block; width: 40px; } /* Pastille de présence */ .avatar-wrap { position: relative; display: inline-flex; flex: none; } .presence-dot { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--surface); background: var(--line-strong); } .presence-dot.is-online { background: var(--online); } /* Compteur (non-lus) */ .count-badge { position: absolute; top: 3px; right: 2px; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 99px; background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 700; line-height: 17px; text-align: center; box-shadow: 0 0 0 2px var(--bg); } /* Navigation latérale des paramètres */ .side-nav { display: grid; gap: 2px; position: sticky; top: calc(var(--topbar-h) + 24px); } .side-link { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border-radius: var(--r-md); color: var(--ink-2); font-weight: 560; text-decoration: none; } .side-link:hover { background: var(--surface-2); color: var(--ink); } .side-link.is-active { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); } .side-link.is-active .icon { color: var(--accent); } @media (max-width: 1023px) { .side-nav { position: static; display: flex; overflow-x: auto; } } .panel-head { flex-wrap: wrap; justify-content: space-between; gap: 12px 16px; } .panel-head-text { min-width: 0; } .panel-title { display: flex; align-items: center; gap: 8px; } .panel-sub { margin-top: 2px; color: var(--ink-2); font-size: 14px; } .page-head + .row { margin-top: 4px; } .user-row { border-top: 1px solid var(--line); } .user-row:first-child { border-top: 0; } .row-actions { display: flex; gap: 2px; margin-left: 4px; } .row-action-form { display: contents; } .user-row .presence-dot { border-color: var(--surface); } @media (max-width: 575px) { .user-row { flex-wrap: wrap; padding: 12px 16px; } .user-row .role { order: 3; margin-left: 44px; } .row-actions { margin-left: auto; } } /* Champs : aide et erreurs */ .field-hint-muted { font-size: 13px; color: var(--ink-3); } .field-error { font-size: 13px; color: var(--danger); } .field-error:empty { display: none; } .field.has-error .input { border-color: var(--danger); } .field.has-error .input:focus { box-shadow: 0 0 0 4px color-mix(in oklab, var(--danger) 20%, transparent); } .field.has-error .field-hint-muted { display: none; } .input[readonly] { background: var(--surface-2); color: var(--ink-2); cursor: not-allowed; } /* ---------- Dialogues ---------- */ .dialog { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 48px); padding: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-pop); } .dialog-sm { width: min(420px, calc(100vw - 24px)); } .dialog::backdrop { background: color-mix(in oklab, var(--ink) 38%, transparent); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .dialog[open] { animation: dialog-in .2s var(--ease); } @keyframes dialog-in { from { opacity: 0; transform: translateY(8px) scale(.98); } } .dialog-form { display: flex; flex-direction: column; max-height: inherit; } .dialog-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 4px 24px; } .dialog-title { font-size: 19px; font-weight: 680; letter-spacing: -.015em; } .dialog-body { padding: 16px 24px 8px; overflow-y: auto; } .dialog-sm .dialog-body { padding-top: 24px; } .dialog-text { margin-top: 8px; color: var(--ink-2); } .dialog-text strong { color: var(--ink); font-weight: 620; } .dialog-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 24px 20px; } /* ========================================================================== Messagerie ========================================================================== */ .chat-menu { position: relative; } .menu-chat { width: 300px; padding: 6px; } .menu-head { padding: 8px 10px 10px; } .menu-title { font-weight: 650; } .menu-sub { color: var(--ink-2); font-size: 13px; } .chat-users { display: grid; gap: 1px; max-height: min(420px, 60vh); overflow-y: auto; } .chat-user { display: flex; align-items: center; gap: 11px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--r-sm); background: transparent; text-align: left; } .chat-user:hover, .chat-user:focus-visible { background: var(--surface-2); outline: none; } .chat-user-text { flex: 1; min-width: 0; } .chat-user-name, .chat-user-status { display: block; } .chat-user-name { font-weight: 580; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-user-status { color: var(--ink-3); font-size: 12.5px; } .chat-user-status.is-online { color: var(--online); } .chat-user .presence-dot { border-color: var(--surface); } .chat-user:hover .presence-dot { border-color: var(--surface-2); } .unread-pill { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--accent); color: var(--on-accent); font-size: 11.5px; font-weight: 700; line-height: 20px; text-align: center; } .chat-empty { padding: 14px 10px 16px; color: var(--ink-2); font-size: 14px; } .chat-empty a { color: var(--accent); font-weight: 580; } /* Dock des conversations : fenêtres ancrées en bas à droite, réductibles en barre */ .chat-dock { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: 0; z-index: 60; display: flex; flex-direction: row-reverse; align-items: flex-end; gap: 10px; pointer-events: none; } .chat-tab { pointer-events: auto; display: flex; flex-direction: column; width: 260px; border: 1px solid var(--line); border-bottom: 0; border-radius: 14px 14px 0 0; background: var(--surface); box-shadow: var(--shadow-pop); overflow: hidden; animation: tab-in .22s var(--ease); } @keyframes tab-in { from { transform: translateY(12px); opacity: 0; } } .chat-tab.is-open { width: 340px; height: min(460px, calc(100dvh - var(--topbar-h) - 24px)); } .chat-tab-head { display: flex; align-items: center; gap: 2px; height: 52px; padding: 0 6px 0 5px; flex: none; } .chat-tab.is-open .chat-tab-head { border-bottom: 1px solid var(--line); } .chat-tab-toggle { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 8px 0 6px; border: 0; border-radius: 10px; background: transparent; text-align: left; } .chat-tab-toggle:hover { background: var(--surface-2); } .chat-tab-toggle .presence-dot { border-color: var(--surface); } .chat-tab-toggle:hover .presence-dot { border-color: var(--surface-2); } .chat-tab-who { flex: 1; min-width: 0; } .chat-tab-name { display: block; font-weight: 620; font-size: 14.5px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-tab-status { display: block; font-size: 12px; color: var(--ink-3); } .chat-tab-status.is-online { color: var(--online); } .chat-tab-chevron { font-size: 14px; color: var(--ink-3); transition: rotate .2s var(--ease); } .chat-tab.is-open .chat-tab-chevron { rotate: 180deg; } .chat-tab-head > .icon-btn { width: 34px; height: 34px; } .chat-tab-body { display: none; flex: 1; min-height: 0; flex-direction: column; } .chat-tab.is-open .chat-tab-body { display: flex; } .chat-tab.has-news .chat-tab-head { animation: tab-news 1.2s var(--ease) 2; } @keyframes tab-news { 50% { background: var(--accent-soft); } } .chat-messages { flex: 1; overflow-y: auto; padding: 14px 12px 8px; display: flex; flex-direction: column; gap: 2px; overscroll-behavior: contain; } .chat-day { align-self: center; margin: 10px 0 6px; color: var(--ink-3); font-size: 12px; font-weight: 560; } .msg { max-width: 80%; padding: 8px 12px; border-radius: 16px; font-size: 14.5px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; } .msg-theirs { align-self: flex-start; background: var(--surface-2); color: var(--ink); border-bottom-left-radius: 6px; } .msg-mine { align-self: flex-end; background: var(--primary); color: var(--primary-ink); border-bottom-right-radius: 6px; } .msg.is-pending { opacity: .6; } .msg + .msg-time, .msg-time { font-size: 11.5px; color: var(--ink-3); margin: 2px 4px 8px; } .msg-time.mine { align-self: flex-end; } .msg-time.theirs { align-self: flex-start; } .chat-start { margin: auto; padding: 24px; text-align: center; color: var(--ink-2); font-size: 14px; } .chat-composer { display: flex; align-items: flex-end; gap: 8px; padding: 10px; border-top: 1px solid var(--line); } .chat-input { flex: 1; min-height: 40px; max-height: 120px; padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; font-size: 14.5px; line-height: 1.4; resize: none; } .chat-input:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in oklab, var(--focus) 20%, transparent); } .chat-send { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 0; border-radius: 12px; background: var(--primary); color: var(--primary-ink); } .chat-send:disabled { opacity: .45; cursor: default; } .chat-error { padding: 0 12px 8px; color: var(--danger); font-size: 12.5px; } @media (max-width: 560px) { .chat-dock { left: 0; right: 0; padding: 0 8px; } .chat-tab, .chat-tab.is-open { width: 100%; } .chat-tab.is-open { height: calc(100dvh - var(--topbar-h) - 8px); } } /* Le contenu ne passe pas sous les barres de conversation */ body:has(.chat-tab) .main { padding-bottom: 64px; } /* ========================================================================== Mon compte ========================================================================== */ .row > .row-spacer { display: none; } @media (min-width: 768px) { .row > .row-spacer { display: block; } } .stack { display: grid; gap: 20px; } .panel-body { padding: 20px 24px 24px; } .panel-body > .alert { margin-bottom: 18px; } .panel-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; } .panel-actions .btn .icon { font-size: 17px; } img.avatar { display: block; object-fit: cover; background: var(--surface-2); } .avatar-xl { width: 72px; height: 72px; font-size: 24px; } .avatar-xxl { width: 132px; height: 132px; font-size: 42px; letter-spacing: .01em; } /* Carte d'identité */ .account-hero { position: relative; display: flex; align-items: center; gap: 18px; margin-bottom: 24px; padding: 20px 24px; border: 1px solid var(--line); border-radius: var(--r-xl); background: radial-gradient(120% 140% at 100% 0%, color-mix(in oklab, var(--accent) 14%, transparent) 0%, transparent 55%), var(--surface); overflow: hidden; } .account-hero::after { content: ""; position: absolute; right: -40px; top: -30px; width: 260px; height: 180px; background: repeating-radial-gradient(ellipse at 70% 60%, transparent 0 14px, color-mix(in oklab, var(--accent) 16%, transparent) 14px 15px); mask-image: radial-gradient(closest-side, #000, transparent); pointer-events: none; } .account-hero-avatar { position: relative; z-index: 1; } .account-hero-avatar .avatar { box-shadow: 0 0 0 4px var(--surface), 0 8px 24px -10px rgba(var(--shadow-rgb), .5); } .account-hero-id { position: relative; z-index: 1; min-width: 0; } .account-hero-name { font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; } .account-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; color: var(--ink-2); font-size: 14px; } .account-hero-meta > span:first-child { display: inline-flex; align-items: center; gap: 4px; } .account-hero-meta .icon { font-size: 14px; } /* Onglets verticaux */ .vtabs { display: grid; gap: 4px; padding: 6px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); position: sticky; top: calc(var(--topbar-h) + 20px); } .vtab { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; border-radius: var(--r-md); color: var(--ink); text-decoration: none; transition: background-color .15s; } .vtab:hover { background: var(--surface-2); } .vtab-icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--surface-2); color: var(--ink-2); transition: background-color .15s, color .15s; } .vtab-icon .icon { font-size: 17px; } .vtab-text { flex: 1; min-width: 0; display: grid; } .vtab-label { font-weight: 620; font-size: 14.5px; line-height: 1.3; } .vtab-hint { color: var(--ink-3); font-size: 12.5px; line-height: 1.3; } .vtab-chevron { font-size: 13px; color: var(--ink-3); opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s var(--ease); } .vtab:hover .vtab-chevron { opacity: 1; transform: none; } .vtab.is-active { background: var(--accent-soft); } .vtab.is-active .vtab-icon { background: var(--accent); color: var(--on-accent); } .vtab.is-active .vtab-label { color: var(--accent-strong); } .vtab.is-active .vtab-chevron { opacity: 1; transform: none; color: var(--accent-strong); } @media (max-width: 1023px) { .vtabs { position: static; grid-auto-flow: column; grid-auto-columns: 1fr; overflow-x: auto; } .vtab { flex-direction: column; gap: 6px; padding: 10px 6px; text-align: center; } .vtab-text { justify-items: center; } .vtab .vtab-hint, .vtab .vtab-chevron { display: none; } } /* Panneau d'onglet */ .tab-panel { animation: tab-panel-in .22s var(--ease); } @keyframes tab-panel-in { from { opacity: 0; transform: translateY(6px); } } .tab-panel-head { padding: 20px 24px 0; } .tab-panel-head .panel-title { font-size: 18px; } .tab-panel-head .panel-sub { margin-top: 4px; } /* Photo de profil */ .photo-editor { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; } .photo-drop { position: relative; flex: none; display: block; padding: 6px; border: 2px dashed var(--line-strong); border-radius: 50%; cursor: pointer; transition: border-color .15s, background-color .15s; } .photo-drop:hover, .photo-drop.is-dragover { border-color: var(--accent); background: var(--accent-soft); } #avatar-file:focus-visible + .photo-drop { outline: 2px solid var(--focus); outline-offset: 3px; } .photo-frame { display: block; border-radius: 50%; overflow: hidden; } .photo-overlay { position: absolute; right: 6px; bottom: 6px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--primary); color: var(--primary-ink); box-shadow: 0 0 0 4px var(--surface); transition: transform .15s var(--ease); } .photo-overlay .icon { font-size: 17px; } .photo-drop:hover .photo-overlay { transform: scale(1.08); } .photo-frame.is-preview { box-shadow: 0 0 0 3px var(--accent); } .photo-side { flex: 1; min-width: 220px; display: grid; gap: 8px; } .photo-title { font-weight: 650; font-size: 16px; } .photo-help { color: var(--ink-2); font-size: 13.5px; line-height: 1.5; } .photo-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; } .photo-actions label.btn { cursor: pointer; } .photo-remove { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); } .link-btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 2px; border: 0; background: none; color: var(--ink-2); font-size: 14px; } .link-btn:hover { color: var(--danger); } .link-btn .icon { font-size: 15px; } /* Force du mot de passe */ .strength { display: flex; align-items: center; gap: 10px; } .strength-bar { flex: 1; height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; } .strength-fill { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--danger); transition: width .25s var(--ease), background-color .25s; } .strength-label { min-width: 70px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); text-align: right; } .strength[data-level="1"] .strength-fill { width: 25%; background: var(--danger); } .strength[data-level="2"] .strength-fill { width: 50%; background: #E0A21A; } .strength[data-level="3"] .strength-fill { width: 75%; background: var(--accent); } .strength[data-level="4"] .strength-fill { width: 100%; background: var(--online); } /* Choix du thème */ .theme-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin: 0; padding: 0; border: 0; } .theme-option { display: grid; gap: 8px; padding: 10px 10px 12px; border: 1px solid var(--line); border-radius: var(--r-lg); cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s var(--ease); } .theme-option:hover { border-color: var(--line-strong); transform: translateY(-2px); } .theme-option:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent); } .theme-option:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; } .theme-label { display: flex; align-items: center; gap: 8px; font-weight: 620; font-size: 14.5px; } .theme-check { margin-left: auto; color: var(--accent); opacity: 0; transform: scale(.6); transition: opacity .15s, transform .2s var(--ease); } .theme-option:has(input:checked) .theme-check { opacity: 1; transform: none; } .theme-hint { margin-top: -6px; color: var(--ink-3); font-size: 12.5px; } .theme-preview { --p-bg: #F4F6FA; --p-card: #FFFFFF; --p-line: #D8DFEA; --p-ink: #BCC6D6; --p-acc: var(--accent); position: relative; display: block; height: 92px; border-radius: 9px; background: var(--p-bg); overflow: hidden; } .theme-preview-dark { --p-bg: #0B1019; --p-card: #121926; --p-line: #263045; --p-ink: #35415A; --p-acc: var(--accent); } .theme-preview-system { background: linear-gradient(115deg, #F4F6FA 50%, #0B1019 50%); } .tp-bar { position: absolute; left: 0; right: 0; top: 0; height: 14px; border-bottom: 1px solid var(--p-line); } .theme-preview-system .tp-bar { border-color: #7E899C; } .tp-card { position: absolute; left: 10px; right: 10px; top: 24px; bottom: 10px; border-radius: 6px; background: var(--p-card); border: 1px solid var(--p-line); } .theme-preview-system .tp-card { background: linear-gradient(115deg, #FFFFFF 50%, #121926 50%); border-color: #7E899C; } .tp-line { position: absolute; left: 20px; right: 40%; top: 36px; height: 5px; border-radius: 3px; background: var(--p-ink); } .tp-line.short { top: 48px; right: 60%; background: var(--p-acc); } /* Choix de la couleur */ .panel-body-tight { padding-bottom: 20px; } .panel-divider { height: 1px; margin: 0 24px; background: var(--line); } .palette-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; margin: 0; padding: 0; border: 0; } .palette-option { display: grid; justify-items: center; gap: 8px; padding: 12px 6px 10px; border: 1px solid var(--line); border-radius: var(--r-lg); cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s var(--ease); } .palette-option:hover { border-color: var(--line-strong); transform: translateY(-2px); } .palette-option:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent); } .palette-option:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; } .palette-swatch { --sw-bg: #F4F6FA; --sw-soft: #E3EAFD; --sw-acc: #2F5BEA; position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: conic-gradient(from 200deg, var(--sw-acc) 0 38%, var(--sw-soft) 38% 70%, var(--sw-bg) 70% 100%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); } .palette-epicea .palette-swatch { --sw-bg: #F1F4F2; --sw-soft: #DCE9E4; --sw-acc: #2F7D69; } .palette-lavande .palette-swatch { --sw-bg: #F6F4FB; --sw-soft: #EAE6FB; --sw-acc: #6B5BD2; } .palette-peche .palette-swatch { --sw-bg: #FBF6F3; --sw-soft: #FBE7DC; --sw-acc: #D9653B; } .palette-rose .palette-swatch { --sw-bg: #FBF4F7; --sw-soft: #FAE3ED; --sw-acc: #C4487C; } .palette-swatch .palette-check { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--sw-acc); color: #fff; font-size: 13px; box-shadow: 0 0 0 2px #fff; opacity: 0; transform: scale(.5); transition: opacity .15s, transform .2s var(--ease); } .palette-option:has(input:checked) .palette-check { opacity: 1; transform: none; } .palette-label { font-size: 13.5px; font-weight: 600; text-align: center; line-height: 1.3; } /* Paramètres développeur */ .hero-icon { position: relative; z-index: 1; display: grid; place-items: center; flex: none; width: 72px; height: 72px; border-radius: 20px; background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 4px var(--surface), 0 8px 24px -10px rgba(var(--shadow-rgb), .5); } .hero-icon .icon { font-size: 30px; } .tab-panel-head-actions { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; } .panel-body-list { padding: 12px 0 8px; } .panel-body-list .user-row { padding-inline: 24px; } .info-group { margin: 22px 0 8px; font-size: 12.5px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); } .info-group:first-child { margin-top: 0; } .info-list { margin: 0; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; } .info-row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 14px; } .info-row:first-child { border-top: 0; } .info-row dt { color: var(--ink-2); } .info-row dd { margin: 0; display: flex; align-items: center; gap: 8px; text-align: right; font-weight: 560; overflow-wrap: anywhere; } .status-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; } .status-dot.is-ok { background: var(--online); } .status-dot.is-ko { background: var(--danger); } @media (max-width: 575px) { .info-row { flex-direction: column; gap: 2px; } .info-row dd { text-align: left; } .panel-body-list .user-row { padding-inline: 16px; } } /* ========================================================================== Projets ========================================================================== */ .projects-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; } .page-title .count { vertical-align: middle; font-size: 14px; letter-spacing: 0; } .page-sub { margin-top: 4px; color: var(--ink-2); } .empty-cta { margin-top: 18px; } .muted { color: var(--ink-3); } .toolbar { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 20px; } .search { position: relative; flex: 1; max-width: 420px; min-width: 220px; } .search-icon { position: absolute; left: 13px; top: 50%; translate: 0 -50%; color: var(--ink-3); font-size: 16px; pointer-events: none; } .search-input { padding-left: 40px; padding-right: 40px; background: var(--surface); } .search-input::-webkit-search-cancel-button { display: none; } .search-kbd { position: absolute; right: 10px; top: 50%; translate: 0 -50%; min-width: 22px; padding: 1px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); color: var(--ink-3); font: 600 12px/1.4 var(--font); text-align: center; pointer-events: none; } .search-input:focus ~ .search-kbd, .search-input:not(:placeholder-shown) ~ .search-kbd { display: none; } .toolbar-meta { color: var(--ink-2); font-size: 14px; } .project-grid { align-items: stretch; } .project-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; transition: border-color .15s, box-shadow .2s var(--ease), transform .2s var(--ease); } .project-card:hover { border-color: var(--line-strong); box-shadow: 0 14px 30px -20px rgba(var(--shadow-rgb), .45); transform: translateY(-2px); } .project-card.is-new { animation: card-new 1.6s var(--ease); border-color: var(--accent); } @keyframes card-new { 0% { transform: scale(.96); opacity: 0; } 25% { transform: none; opacity: 1; box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 30%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } } .project-thumb { position: relative; aspect-ratio: 16 / 10; background: var(--art-bg); border-bottom: 1px solid var(--line); } .project-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .project-body { flex: 1; display: grid; align-content: start; gap: 10px; padding: 14px 16px 12px; } .project-name { font-size: 16.5px; font-weight: 680; letter-spacing: -.01em; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } .project-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; font-size: 13px; } .project-meta div { display: flex; gap: 5px; } .project-meta dt { color: var(--ink-3); } .project-meta dd { margin: 0; color: var(--ink-2); font-weight: 560; } .project-owner { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); } .avatar-sm { width: 24px; height: 24px; font-size: 10px; } .avatar-sm .icon { font-size: 12px; } .project-actions { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--line); } .project-actions .btn-sm { height: 34px; padding: 0 12px; font-size: 13.5px; } .project-actions .icon-btn { margin-left: auto; width: 34px; height: 34px; } .project-actions .icon-btn .icon { font-size: 16px; } /* ========================================================================== Composants globaux : modales, confirmations, notifications (ui.js) ========================================================================== */ .dialog-md { width: min(560px, calc(100vw - 24px)); } .dialog-lg { width: min(820px, calc(100vw - 24px)); } .dialog.is-closing { animation: dialog-out .16s var(--ease) forwards; } .dialog.is-closing::backdrop { animation: backdrop-out .16s var(--ease) forwards; } .dialog[open]::backdrop { animation: backdrop-in .2s var(--ease); } @keyframes dialog-out { to { opacity: 0; transform: translateY(6px) scale(.98); } } @keyframes backdrop-in { from { opacity: 0; } } @keyframes backdrop-out { to { opacity: 0; } } .ui-dialog-body { display: flex; gap: 16px; align-items: flex-start; padding-top: 24px; } .ui-dialog-text { flex: 1; min-width: 0; } .ui-dialog-text .dialog-text { white-space: pre-line; } .ui-prompt-field { margin-top: 16px; } .ui-tone-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; font-size: 20px; } .ui-tone-icon .icon { font-size: 20px; } .ui-tone-icon.tone-info { background: var(--accent-soft); color: var(--accent-strong); } .ui-tone-icon.tone-success { background: color-mix(in oklab, var(--online) 16%, transparent); color: var(--online); } .ui-tone-icon.tone-warning { background: color-mix(in oklab, #E0A21A 18%, transparent); color: #B7800A; } .ui-tone-icon.tone-danger { background: var(--danger-soft); color: var(--danger); } /* Notifications */ .toast-region { position: fixed; top: calc(var(--topbar-h) + 12px); right: max(16px, env(safe-area-inset-right)); z-index: 70; display: grid; gap: 8px; width: min(380px, calc(100vw - 32px)); pointer-events: none; } .toast-region[popover] { inset: calc(var(--topbar-h) + 12px) max(16px, env(safe-area-inset-right)) auto auto; margin: 0; padding: 0; border: 0; background: transparent; overflow: visible; color: inherit; } .toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; padding: 12px 8px 12px 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-pop); animation: toast-in .24s var(--ease); } .toast.is-leaving { animation: toast-out .2s var(--ease) forwards; } @keyframes toast-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } } @keyframes toast-out { to { opacity: 0; transform: translateX(16px); } } .toast-icon { margin-top: 1px; font-size: 18px; } .toast-info .toast-icon { color: var(--accent); } .toast-success .toast-icon { color: var(--online); } .toast-warning .toast-icon { color: #D29A12; } .toast-error .toast-icon { color: var(--danger); } .toast-text { flex: 1; min-width: 0; padding-top: 1px; font-size: 14.5px; line-height: 1.4; } .toast-action { flex: none; padding: 2px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--accent-strong); font-weight: 620; font-size: 14px; } .toast-action:hover { background: var(--accent-soft); } .toast-close { flex: none; display: grid; place-items: center; width: 26px; height: 26px; margin-top: -3px; border: 0; border-radius: 7px; background: transparent; color: var(--ink-3); } .toast-close .icon { font-size: 13px; } .toast-close:hover { background: var(--surface-2); color: var(--ink); } /* Menu contextuel */ .ctx-menu { position: fixed; inset: auto; z-index: 80; min-width: 200px; margin: 0; padding: 5px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-pop); animation: menu-in .12s var(--ease); } .ctx-item { display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font-size: 14px; text-align: left; } .ctx-item .icon { font-size: 16px; color: var(--ink-2); } .ctx-item:hover, .ctx-item:focus-visible { background: var(--surface-2); outline: none; } .ctx-item.is-danger, .ctx-item.is-danger .icon { color: var(--danger); } .ctx-item.is-danger:hover, .ctx-item.is-danger:focus-visible { background: var(--danger-soft); } .ctx-item:disabled { opacity: .45; cursor: default; } .ctx-sep { height: 1px; margin: 4px 6px; background: var(--line); } /* Messages retirés */ .msg-removed { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px dashed var(--line-strong); color: var(--ink-3); font-style: italic; } .msg-mine.msg-removed { background: transparent; color: var(--ink-3); } .msg-removed .icon { font-size: 14px; } .msg.is-targeted { box-shadow: 0 0 0 2px var(--focus); } @media (hover: none) { .search-kbd { display: none; } } /* Champs : unité affichée dans le champ, liste déroulante */ .input-unit { position: relative; } .input-unit .input { padding-right: 42px; } .input-unit .unit { position: absolute; right: 12px; top: 50%; translate: 0 -50%; color: var(--ink-3); font-size: 13px; pointer-events: none; } .select { appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; } .input-unit input[type="number"] { -moz-appearance: textfield; appearance: textfield; } .input-unit input[type="number"]::-webkit-inner-spin-button, .input-unit input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } /* ========================================================================== Outils ========================================================================== */ .tool-card { display: grid; gap: 8px; height: 100%; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color .15s, box-shadow .2s var(--ease), transform .2s var(--ease); } .tool-card:hover { border-color: var(--line-strong); box-shadow: 0 14px 30px -20px rgba(var(--shadow-rgb), .45); transform: translateY(-2px); } .tool-card-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-strong); } .tool-card-icon .icon { font-size: 21px; } .tool-card-title { font-size: 16.5px; font-weight: 680; } .tool-card-text { color: var(--ink-2); font-size: 14px; } .tool-card-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--accent-strong); font-weight: 600; font-size: 14px; } /* Onglets en segments */ .segmented { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); } .segmented-btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font-weight: 580; font-size: 14px; } .segmented-btn .icon { font-size: 16px; } .segmented-btn:hover { color: var(--ink); } .segmented-btn.is-active { background: var(--accent-soft); color: var(--accent-strong); } /* ========================================================================== Outils › Données géographiques ========================================================================== */ .page-data .main { height: calc(100dvh - var(--topbar-h)); display: flex; } body.page-data:has(.chat-tab) .main { padding-bottom: 0; } .data-page { flex: 1; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 14px; padding: 16px clamp(12px, 2vw, 24px) 16px; } .data-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .data-title .back-link { margin-bottom: 4px; } .data-title .page-title { font-size: 24px; } .data-map-layout { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 14px; } .data-map-wrap { position: relative; min-height: 0; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; } .data-map { position: absolute; inset: 0; background: var(--surface-2); } .data-map-hint { position: absolute; left: 50%; top: 12px; translate: -50% 0; z-index: 500; padding: 7px 12px; border-radius: 9px; background: var(--surface); box-shadow: var(--shadow-pop); font-size: 13.5px; color: var(--ink-2); pointer-events: none; } .leaflet-container { font-family: var(--font); } .leaflet-control-attribution { font-size: 11px; } .data-side { min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: 12px; padding-right: 2px; } .data-block { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); } .data-block-title { font-weight: 650; font-size: 14.5px; } .data-block-sub { font-size: 12px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); } .data-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .data-actions .icon-btn { width: 34px; height: 34px; } .data-actions .icon-btn:disabled { opacity: .35; cursor: default; } .data-selection-text { color: var(--ink-2); font-size: 14px; } .btn:disabled { opacity: .5; cursor: default; } .btn-danger-text { color: var(--danger); } .btn-danger-text:hover { background: var(--danger-soft); } .data-search { position: relative; } .data-search .search-icon { position: absolute; left: 13px; top: 23px; translate: 0 -50%; color: var(--ink-3); pointer-events: none; font-size: 16px; } .data-search .input { padding-left: 40px; } .data-search-results { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; display: grid; gap: 2px; padding: 6px; max-height: 280px; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-pop); } .place-result { padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; text-align: left; font-size: 13.5px; } .place-result:hover { background: var(--surface-2); } .level-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .level-btn { display: grid; gap: 1px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: transparent; text-align: left; } .level-btn:hover { border-color: var(--line-strong); } .level-btn.is-active { border-color: var(--accent); background: var(--accent-soft); } .level-name { font-weight: 620; font-size: 13.5px; } .level-btn.is-active .level-name { color: var(--accent-strong); } .level-meta { font-size: 12px; color: var(--ink-3); } .legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--ink-2); } .legend li { display: inline-flex; align-items: center; gap: 6px; } .swatch { width: 12px; height: 12px; border-radius: 3px; border: 1.5px solid; } .swatch-none { border-color: var(--ink-3); opacity: .6; } .swatch-queued { border-color: #E0A21A; background: color-mix(in oklab, #E0A21A 35%, transparent); } .swatch-running { border-color: var(--accent); border-style: dashed; background: color-mix(in oklab, var(--accent) 30%, transparent); } .swatch-ready { border-color: var(--online); background: color-mix(in oklab, var(--online) 35%, transparent); } .swatch-error { border-color: var(--danger); background: color-mix(in oklab, var(--danger) 30%, transparent); } .detail-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .detail-list { margin: 0; display: grid; gap: 4px; font-size: 13px; } .detail-list div { display: flex; justify-content: space-between; gap: 12px; } .detail-list dt { color: var(--ink-3); } .detail-list dd { margin: 0; text-align: right; font-weight: 560; overflow-wrap: anywhere; } .detail-list .is-error dd { color: var(--danger); font-weight: 500; } .detail-warning { font-size: 12.5px; color: #B7800A; } .status-pill { padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 650; background: var(--surface-2); color: var(--ink-2); } .status-ready { background: color-mix(in oklab, var(--online) 18%, transparent); color: var(--online); } .status-error { background: var(--danger-soft); color: var(--danger); } .status-running { background: var(--accent-soft); color: var(--accent-strong); } .status-queued { background: color-mix(in oklab, #E0A21A 20%, transparent); color: #A06F05; } .share-list { display: grid; gap: 6px; } .share { display: grid; grid-template-columns: 1fr 90px 46px; align-items: center; gap: 8px; font-size: 12.5px; } .share-name { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .share-bar { height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; } .share-fill { display: block; height: 100%; border-radius: inherit; background: var(--accent); } .share-copernicus { background: #8E7CC3; } .share-sea { background: #5BA4D6; } .share-pct { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; } .queue-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .queue-stat { display: grid; justify-items: center; gap: 1px; padding: 8px 4px; border-radius: 10px; background: var(--surface-2); } .queue-num { font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; } .queue-label { font-size: 11.5px; color: var(--ink-3); } .stat-running .queue-num { color: var(--accent-strong); } .stat-ready .queue-num { color: var(--online); } .stat-error .queue-num { color: var(--danger); } .queue-current { font-size: 13px; color: var(--ink-2); } .queue-note { font-size: 12px; color: var(--ink-3); } .muted { color: var(--ink-3); font-size: 13px; } /* Services */ .data-services { min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: 14px; } .service-card { display: grid; gap: 12px; height: 100%; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); } .service-card.is-disabled { opacity: .6; } .service-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .service-name { font-weight: 680; font-size: 15.5px; } .service-cover { color: var(--ink-2); font-size: 13px; } .kind-pill { flex: none; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 650; } .kind-MNT { background: color-mix(in oklab, var(--online) 18%, transparent); color: var(--online); } .kind-MNS { background: color-mix(in oklab, #E0A21A 20%, transparent); color: #A06F05; } .service-attrib { font-size: 11.5px; color: var(--ink-3); } .service-test { font-size: 13px; color: var(--ink-2); } .service-test.is-ok { color: var(--online); } .service-test.is-error { color: var(--danger); } @media (max-width: 900px) { .page-data .main { height: auto; } .data-map-layout { grid-template-columns: 1fr; } .data-map-wrap { height: 60vh; } }