/* ============================================================ MetaPlace — Feuille de style principale (v2.1) ──────────────────────────────────────────────────────────── SYSTÈME DE STYLES : l'interface se décline en 4 styles sélectionnables (attribut data-style sur ) : · aurora — halos bleu/violet, panneaux translucides (défaut) · glass — verre dépoli sur orbes colorés · clean — SaaS épuré, sobre, accent unique · neo — néo-brutaliste : aplats, bordures, ombres dures Chaque style × thème (dark/light) redéfinit le MÊME jeu de design tokens ; les composants ne lisent que les tokens. Ordre du cascade : défaut (aurora dark) → [data-theme=light] → [data-style=X] → [data-style=X][data-theme=light]. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap'); /* ───────────────────────────────────────── Tokens structurels (indépendants du style) ───────────────────────────────────────── */ :root { --font-main: 'Outfit', system-ui, sans-serif; --font-mono: 'Space Mono', monospace; --transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1); } /* ══════════════════════════════════════════════════════════ 1 · AURORA — DARK (style et thème par défaut) ══════════════════════════════════════════════════════════ */ :root, [data-style="aurora"] { --bg-base: #05070f; --scene: radial-gradient(90% 65% at 8% -5%, rgba(93, 155, 255, 0.20), transparent 55%), radial-gradient(80% 60% at 100% 15%, rgba(139, 92, 246, 0.16), transparent 60%), radial-gradient(70% 50% at 50% 115%, rgba(34, 211, 238, 0.10), transparent 60%); --bg-surface: #0c1122; --bg-card: rgba(255, 255, 255, 0.045); --bg-card-hover: rgba(255, 255, 255, 0.085); --bg-modal: #10162e; --bg-input: #080d1c; --border: rgba(255, 255, 255, 0.09); --border-accent: rgba(255, 255, 255, 0.18); --bw: 1px; --text-primary: #e9eeff; --text-secondary: #8c9cc4; --text-muted: #58658a; --accent-1: #5d9bff; --accent-2: #8b5cf6; --accent-grad: linear-gradient(135deg, #5d9bff 0%, #8b5cf6 100%); --accent-soft: rgba(93, 155, 255, 0.14); --accent-ring: rgba(93, 155, 255, 0.50); --on-accent: #ffffff; --btn-bd: transparent; --title-grad: linear-gradient(90deg, #8ab4ff, #c4b5fd); --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 22px; --shadow-card: 0 4px 28px rgba(2, 6, 22, 0.45); --shadow-pop: 0 16px 48px rgba(2, 6, 22, 0.60); --shadow-modal: 0 24px 80px rgba(2, 6, 22, 0.70); --btn-shadow: 0 4px 18px rgba(105, 125, 255, 0.40); --btn-shadow-hover: 0 6px 26px rgba(105, 125, 255, 0.55); --nav-blur: 18px; --navbar-bg: rgba(5, 8, 18, 0.72); --table-bg: rgba(10, 15, 32, 0.72); --table-head-bg: #0e1430; --table-sticky-bg: #0b1024; --grid-border: rgba(255, 255, 255, 0.10); --week-sep: rgba(139, 92, 246, 0.55); --today-tint: rgba(93, 155, 255, 0.16); --select-bg: #0a0f22; --chip-bg: rgba(255, 255, 255, 0.07); --sc-inconnu: rgba(148, 163, 184, 0.10); --sc-site: rgba(52, 211, 153, 0.42); --sc-teletravail: rgba(96, 165, 250, 0.42); --sc-deplacement: rgba(251, 191, 36, 0.38); --sc-formation: rgba(192, 132, 252, 0.38); --sc-conge: rgba(248, 113, 113, 0.38); --sc-ferie: rgba(212, 160, 23, 0.42); --status-inconnu: #64748b; --status-site: #34d399; --status-teletravail: #60a5fa; --status-deplacement: #fbbf24; --status-formation: #c084fc; --status-conge: #f87171; --status-ferie: #d4a017; --fw-display: 800; --avatar-bd: 0 solid transparent; } /* ══════════════════════════════════════════════════════════ 1b · AURORA — LIGHT (pastel) ══════════════════════════════════════════════════════════ */ [data-theme="light"], [data-style="aurora"][data-theme="light"] { --bg-base: #edf1fb; --scene: radial-gradient(90% 65% at 8% -5%, rgba(59, 116, 242, 0.10), transparent 55%), radial-gradient(80% 60% at 100% 15%, rgba(122, 79, 240, 0.08), transparent 60%), radial-gradient(70% 50% at 50% 115%, rgba(6, 182, 212, 0.07), transparent 60%); --bg-surface: #ffffff; --bg-card: rgba(24, 32, 54, 0.04); --bg-card-hover: rgba(24, 32, 54, 0.07); --bg-modal: #ffffff; --bg-input: #f3f5fd; --border: rgba(24, 32, 54, 0.10); --border-accent: rgba(24, 32, 54, 0.18); --bw: 1px; --text-primary: #182036; --text-secondary: #4a5578; --text-muted: #8b95ad; --accent-1: #3b74f2; --accent-2: #7a4ff0; --accent-grad: linear-gradient(135deg, #3b74f2 0%, #7a4ff0 100%); --accent-soft: rgba(59, 116, 242, 0.10); --accent-ring: rgba(59, 116, 242, 0.35); --on-accent: #ffffff; --btn-bd: transparent; --title-grad: linear-gradient(90deg, #3b74f2, #7a4ff0); --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 22px; --shadow-card: 0 2px 14px rgba(24, 32, 54, 0.07); --shadow-pop: 0 12px 36px rgba(24, 32, 54, 0.16); --shadow-modal: 0 20px 60px rgba(24, 32, 54, 0.24); --btn-shadow: 0 3px 14px rgba(59, 116, 242, 0.30); --btn-shadow-hover: 0 5px 20px rgba(59, 116, 242, 0.42); --nav-blur: 18px; --navbar-bg: rgba(237, 241, 251, 0.80); --table-bg: #ffffff; --table-head-bg: #f6f8ff; --table-sticky-bg: #ffffff; --grid-border: rgba(24, 32, 54, 0.10); --week-sep: rgba(122, 79, 240, 0.32); --today-tint: rgba(59, 116, 242, 0.10); --select-bg: #f3f5fd; --chip-bg: rgba(24, 32, 54, 0.05); --sc-inconnu: rgba(143, 163, 179, 0.20); --sc-site: rgba(30, 142, 81, 0.22); --sc-teletravail: rgba(26, 111, 170, 0.22); --sc-deplacement: rgba(192, 122, 0, 0.22); --sc-formation: rgba(108, 47, 160, 0.20); --sc-conge: rgba(192, 57, 43, 0.20); --sc-ferie: rgba(180, 130, 10, 0.22); --status-inconnu: #8fa3b3; --status-site: #1e8e51; --status-teletravail: #1a6faa; --status-deplacement: #c07a00; --status-formation: #6c2fa0; --status-conge: #c0392b; --status-ferie: #b4820a; --fw-display: 800; --avatar-bd: 0 solid transparent; } /* ══════════════════════════════════════════════════════════ 2 · GLASS — DARK ══════════════════════════════════════════════════════════ */ [data-style="glass"] { --bg-base: #090c1c; --scene: radial-gradient(55% 50% at 14% 12%, rgba(168, 85, 247, 0.45), transparent 62%), radial-gradient(50% 45% at 88% 22%, rgba(34, 211, 238, 0.35), transparent 62%), radial-gradient(55% 50% at 55% 108%, rgba(236, 72, 153, 0.32), transparent 60%); --bg-surface: rgba(255, 255, 255, 0.09); --bg-card: rgba(255, 255, 255, 0.08); --bg-card-hover: rgba(255, 255, 255, 0.14); --bg-modal: rgba(26, 30, 58, 0.88); --bg-input: rgba(255, 255, 255, 0.08); --border: rgba(255, 255, 255, 0.22); --border-accent: rgba(255, 255, 255, 0.38); --bw: 1px; --text-primary: #f2f4ff; --text-secondary: #c0c7e6; --text-muted: #8d94b8; --accent-1: #7dd3fc; --accent-2: #c084fc; --accent-grad: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.42)); --accent-soft: rgba(255, 255, 255, 0.14); --accent-ring: rgba(125, 211, 252, 0.55); --on-accent: #0e1338; --btn-bd: rgba(255, 255, 255, 0.55); --title-grad: linear-gradient(90deg, #a5f3fc, #e9d5ff); --radius-sm: 10px; --radius-md: 14px; --radius-lg: 18px; --radius-xl: 26px; --shadow-card: 0 8px 32px rgba(4, 6, 24, 0.40); --shadow-pop: 0 20px 56px rgba(4, 6, 24, 0.55); --shadow-modal: 0 28px 90px rgba(4, 6, 24, 0.65); --btn-shadow: 0 4px 20px rgba(255, 255, 255, 0.10); --btn-shadow-hover: 0 6px 28px rgba(255, 255, 255, 0.18); --nav-blur: 22px; --navbar-bg: rgba(18, 22, 48, 0.50); --table-bg: rgba(255, 255, 255, 0.07); --table-head-bg: rgba(22, 27, 56, 0.80); --table-sticky-bg: rgba(22, 27, 56, 0.88); --grid-border: rgba(255, 255, 255, 0.14); --week-sep: rgba(192, 132, 252, 0.60); --today-tint: rgba(255, 255, 255, 0.16); --select-bg: rgba(14, 18, 42, 0.80); --chip-bg: rgba(255, 255, 255, 0.13); --sc-inconnu: rgba(255, 255, 255, 0.08); --sc-site: rgba(74, 222, 128, 0.55); --sc-teletravail: rgba(56, 189, 248, 0.55); --sc-deplacement: rgba(251, 146, 60, 0.55); --sc-formation: rgba(196, 132, 252, 0.55); --sc-conge: rgba(251, 113, 133, 0.55); --sc-ferie: rgba(250, 204, 21, 0.50); --status-inconnu: #94a3b8; --status-site: #4ade80; --status-teletravail: #38bdf8; --status-deplacement: #fb923c; --status-formation: #c084fc; --status-conge: #fb7185; --status-ferie: #facc15; --fw-display: 800; --avatar-bd: 0 solid transparent; } /* ══════════════════════════════════════════════════════════ 2b · GLASS — LIGHT ══════════════════════════════════════════════════════════ */ [data-style="glass"][data-theme="light"] { --bg-base: #e7ebfa; --scene: radial-gradient(55% 50% at 14% 12%, rgba(168, 85, 247, 0.22), transparent 62%), radial-gradient(50% 45% at 88% 22%, rgba(34, 211, 238, 0.20), transparent 62%), radial-gradient(55% 50% at 55% 108%, rgba(236, 72, 153, 0.16), transparent 60%); --bg-surface: rgba(255, 255, 255, 0.62); --bg-card: rgba(255, 255, 255, 0.55); --bg-card-hover: rgba(255, 255, 255, 0.80); --bg-modal: rgba(255, 255, 255, 0.90); --bg-input: rgba(255, 255, 255, 0.70); --border: rgba(120, 130, 180, 0.28); --border-accent: rgba(120, 130, 180, 0.45); --bw: 1px; --text-primary: #1c2440; --text-secondary: #4c567e; --text-muted: #8890b0; --accent-1: #4f46e5; --accent-2: #0891b2; --accent-grad: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.55)); --accent-soft: rgba(79, 70, 229, 0.10); --accent-ring: rgba(79, 70, 229, 0.35); --on-accent: #1c2440; --btn-bd: rgba(255, 255, 255, 0.95); --title-grad: linear-gradient(90deg, #4f46e5, #0891b2); --radius-sm: 10px; --radius-md: 14px; --radius-lg: 18px; --radius-xl: 26px; --shadow-card: 0 8px 30px rgba(40, 50, 100, 0.12); --shadow-pop: 0 18px 48px rgba(40, 50, 100, 0.20); --shadow-modal: 0 26px 80px rgba(40, 50, 100, 0.28); --btn-shadow: 0 4px 18px rgba(40, 50, 100, 0.14); --btn-shadow-hover: 0 6px 26px rgba(40, 50, 100, 0.22); --nav-blur: 22px; --navbar-bg: rgba(255, 255, 255, 0.45); --table-bg: rgba(255, 255, 255, 0.50); --table-head-bg: rgba(255, 255, 255, 0.85); --table-sticky-bg: rgba(255, 255, 255, 0.92); --grid-border: rgba(60, 70, 120, 0.14); --week-sep: rgba(8, 145, 178, 0.40); --today-tint: rgba(79, 70, 229, 0.10); --select-bg: rgba(255, 255, 255, 0.85); --chip-bg: rgba(255, 255, 255, 0.60); --sc-inconnu: rgba(120, 130, 160, 0.14); --sc-site: rgba(22, 163, 74, 0.30); --sc-teletravail: rgba(2, 132, 199, 0.30); --sc-deplacement: rgba(234, 124, 20, 0.32); --sc-formation: rgba(147, 51, 234, 0.26); --sc-conge: rgba(225, 29, 72, 0.26); --sc-ferie: rgba(202, 138, 4, 0.30); --status-inconnu: #8b95ab; --status-site: #16803c; --status-teletravail: #0369a1; --status-deplacement: #c2611a; --status-formation: #7e22ce; --status-conge: #be123c; --status-ferie: #a16207; --fw-display: 800; --avatar-bd: 0 solid transparent; } /* ══════════════════════════════════════════════════════════ 3 · CLEAN (SaaS épuré) — DARK (anthracite doux) ══════════════════════════════════════════════════════════ */ [data-style="clean"] { --bg-base: #101318; --scene: none; --bg-surface: #171b22; --bg-card: #1b2029; --bg-card-hover: #222834; --bg-modal: #1a1f28; --bg-input: #14181f; --border: rgba(255, 255, 255, 0.09); --border-accent: rgba(255, 255, 255, 0.16); --bw: 1px; --text-primary: #e6e9f0; --text-secondary: #9aa3b2; --text-muted: #5d6675; --accent-1: #6d8dff; --accent-2: #6d8dff; --accent-grad: linear-gradient(135deg, #6d8dff, #6d8dff); --accent-soft: rgba(109, 141, 255, 0.12); --accent-ring: rgba(109, 141, 255, 0.40); --on-accent: #ffffff; --btn-bd: transparent; --title-grad: linear-gradient(90deg, #e6e9f0, #e6e9f0); --radius-sm: 8px; --radius-md: 10px; --radius-lg: 12px; --radius-xl: 16px; --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.30); --shadow-pop: 0 8px 28px rgba(0, 0, 0, 0.45); --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.55); --btn-shadow: none; --btn-shadow-hover: 0 2px 10px rgba(109, 141, 255, 0.30); --nav-blur: 12px; --navbar-bg: rgba(16, 19, 24, 0.92); --table-bg: #171b22; --table-head-bg: #1b2029; --table-sticky-bg: #171b22; --grid-border: rgba(255, 255, 255, 0.08); --week-sep: rgba(109, 141, 255, 0.45); --today-tint: rgba(109, 141, 255, 0.12); --select-bg: #14181f; --chip-bg: rgba(255, 255, 255, 0.06); --sc-inconnu: rgba(148, 163, 184, 0.08); --sc-site: rgba(46, 174, 106, 0.34); --sc-teletravail: rgba(77, 139, 240, 0.34); --sc-deplacement: rgba(234, 148, 40, 0.32); --sc-formation: rgba(160, 110, 240, 0.32); --sc-conge: rgba(235, 90, 80, 0.32); --sc-ferie: rgba(212, 165, 35, 0.34); --status-inconnu: #64748b; --status-site: #2eae6a; --status-teletravail: #4d8bf0; --status-deplacement: #ea9428; --status-formation: #a06ef0; --status-conge: #eb5a50; --status-ferie: #d4a523; --fw-display: 700; --avatar-bd: 0 solid transparent; } /* ══════════════════════════════════════════════════════════ 3b · CLEAN — LIGHT (natif) ══════════════════════════════════════════════════════════ */ [data-style="clean"][data-theme="light"] { --bg-base: #fafbfd; --scene: none; --bg-surface: #ffffff; --bg-card: #f6f7fa; --bg-card-hover: #eff1f6; --bg-modal: #ffffff; --bg-input: #ffffff; --border: #e6e9f0; --border-accent: #d3d8e3; --bw: 1px; --text-primary: #101828; --text-secondary: #475467; --text-muted: #98a2b3; --accent-1: #4361ee; --accent-2: #4361ee; --accent-grad: linear-gradient(135deg, #4361ee, #4361ee); --accent-soft: rgba(67, 97, 238, 0.08); --accent-ring: rgba(67, 97, 238, 0.30); --on-accent: #ffffff; --btn-bd: transparent; --title-grad: linear-gradient(90deg, #101828, #101828); --radius-sm: 8px; --radius-md: 10px; --radius-lg: 12px; --radius-xl: 16px; --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.06); --shadow-pop: 0 8px 24px rgba(16, 24, 40, 0.12); --shadow-modal: 0 16px 44px rgba(16, 24, 40, 0.16); --btn-shadow: none; --btn-shadow-hover: 0 2px 8px rgba(67, 97, 238, 0.25); --nav-blur: 12px; --navbar-bg: rgba(255, 255, 255, 0.92); --table-bg: #ffffff; --table-head-bg: #f8f9fc; --table-sticky-bg: #ffffff; --grid-border: #edeff5; --week-sep: rgba(67, 97, 238, 0.35); --today-tint: #eef2ff; --select-bg: #ffffff; --chip-bg: #f2f4f8; --sc-inconnu: rgba(102, 112, 133, 0.06); --sc-site: rgba(18, 183, 106, 0.16); --sc-teletravail: rgba(67, 97, 238, 0.14); --sc-deplacement: rgba(247, 144, 9, 0.16); --sc-formation: rgba(127, 86, 217, 0.14); --sc-conge: rgba(240, 68, 56, 0.14); --sc-ferie: rgba(202, 138, 4, 0.16); --status-inconnu: #98a2b3; --status-site: #087443; --status-teletravail: #3538cd; --status-deplacement: #b54708; --status-formation: #6941c6; --status-conge: #b42318; --status-ferie: #a15c07; --fw-display: 700; --avatar-bd: 0 solid transparent; } /* ══════════════════════════════════════════════════════════ 4 · NEO (néo-brutaliste) — DARK ══════════════════════════════════════════════════════════ */ [data-style="neo"] { --bg-base: #141217; --scene: none; --bg-surface: #1e1b26; --bg-card: #241f30; --bg-card-hover: #2c2639; --bg-modal: #1e1b26; --bg-input: #171420; --border: #b9b0d4; --border-accent: #e9e3f8; --bw: 2px; --text-primary: #f2eff8; --text-secondary: #b9b2cc; --text-muted: #77708e; --accent-1: #7c88ff; --accent-2: #ff6d95; --accent-grad: linear-gradient(135deg, #5b6cff, #5b6cff); --accent-soft: rgba(124, 136, 255, 0.16); --accent-ring: rgba(124, 136, 255, 0.55); --on-accent: #ffffff; --btn-bd: #0b0a10; --title-grad: linear-gradient(90deg, #f2eff8, #f2eff8); --radius-sm: 8px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --shadow-card: 4px 4px 0 #0b0a10; --shadow-pop: 6px 6px 0 #0b0a10; --shadow-modal: 8px 8px 0 #0b0a10; --btn-shadow: 3px 3px 0 #0b0a10; --btn-shadow-hover: 4px 4px 0 #0b0a10; --nav-blur: 0px; --navbar-bg: rgba(20, 18, 23, 0.95); --table-bg: #1e1b26; --table-head-bg: #241f30; --table-sticky-bg: #1e1b26; --grid-border: rgba(233, 227, 248, 0.20); --week-sep: #7c88ff; --today-tint: rgba(124, 136, 255, 0.22); --select-bg: #171420; --chip-bg: #241f30; --sc-inconnu: rgba(233, 227, 248, 0.06); --sc-site: #2f9e56; --sc-teletravail: #2f7fd4; --sc-deplacement: #d98a1f; --sc-formation: #9668e0; --sc-conge: #d85555; --sc-ferie: #c4a11f; --status-inconnu: #77708e; --status-site: #4fd47f; --status-teletravail: #63a8f5; --status-deplacement: #f5ad45; --status-formation: #b48cf0; --status-conge: #f07d7d; --status-ferie: #e8c542; --fw-display: 800; --avatar-bd: 2px solid #0b0a10; } /* ══════════════════════════════════════════════════════════ 4b · NEO — LIGHT (crème, natif) ══════════════════════════════════════════════════════════ */ [data-style="neo"][data-theme="light"] { --bg-base: #f3ede1; --scene: none; --bg-surface: #ffffff; --bg-card: #ffffff; --bg-card-hover: #f6f1e5; --bg-modal: #ffffff; --bg-input: #ffffff; --border: #16161a; --border-accent: #16161a; --bw: 2px; --text-primary: #16161a; --text-secondary: #44444c; --text-muted: #8b8577; --accent-1: #5b6cff; --accent-2: #ff5c87; --accent-grad: linear-gradient(135deg, #5b6cff, #5b6cff); --accent-soft: rgba(91, 108, 255, 0.14); --accent-ring: rgba(91, 108, 255, 0.45); --on-accent: #ffffff; --btn-bd: #16161a; --title-grad: linear-gradient(90deg, #16161a, #16161a); --radius-sm: 8px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --shadow-card: 4px 4px 0 #16161a; --shadow-pop: 6px 6px 0 #16161a; --shadow-modal: 8px 8px 0 #16161a; --btn-shadow: 3px 3px 0 #16161a; --btn-shadow-hover: 4px 4px 0 #16161a; --nav-blur: 0px; --navbar-bg: rgba(243, 237, 225, 0.94); --table-bg: #ffffff; --table-head-bg: #ffffff; --table-sticky-bg: #ffffff; --grid-border: rgba(22, 22, 26, 0.16); --week-sep: #16161a; --today-tint: rgba(91, 108, 255, 0.14); --select-bg: #ffffff; --chip-bg: #ffffff; --sc-inconnu: #f0ead9; --sc-site: #6fe08a; --sc-teletravail: #74baff; --sc-deplacement: #ffb84d; --sc-formation: #c9a2ff; --sc-conge: #ff8a80; --sc-ferie: #f0c33d; --status-inconnu: #8b8577; --status-site: #157f3c; --status-teletravail: #135ba1; --status-deplacement: #9a5c00; --status-formation: #6a35b8; --status-conge: #b3261e; --status-ferie: #8a6d00; --fw-display: 800; --avatar-bd: 2px solid #16161a; } /* ───────────────────────────────────────── Reset & base ───────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-main); font-size: 15px; background: var(--bg-base); color: var(--text-primary); line-height: 1.6; min-height: 100vh; overflow-x: hidden; transition: background 0.25s ease, color 0.25s ease; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Décor d'arrière-plan (halos / orbes selon le style) */ body::before { content: ''; position: fixed; inset: 0; background: var(--scene); pointer-events: none; z-index: 0; } ::selection { background: var(--accent-soft); } button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent-1); outline-offset: 2px; border-radius: var(--radius-sm); } input:focus-visible, select:focus-visible { outline: none; } /* ───────────────────────────────────────── Layout principal ───────────────────────────────────────── */ #app { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; } .main-content { flex: 1; padding: 22px 26px; max-width: 100%; } /* ───────────────────────────────────────── Header / Navbar ───────────────────────────────────────── */ .navbar { position: sticky; top: 0; z-index: 100; background: var(--navbar-bg); backdrop-filter: blur(var(--nav-blur)); -webkit-backdrop-filter: blur(var(--nav-blur)); border-bottom: var(--bw) solid var(--border); padding: 0 22px; height: 62px; display: flex; align-items: center; gap: 14px; transition: background 0.25s ease; } .navbar-brand { display: flex; align-items: center; gap: 13px; text-decoration: none; flex-shrink: 0; } .navbar-logo { height: 30px; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.92; transition: var(--transition); } [data-theme="light"] .navbar-logo { filter: none; opacity: 1; } .navbar-title { font-size: 17.5px; font-weight: var(--fw-display); letter-spacing: 0.02em; background: var(--title-grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .navbar-spacer { flex: 1; } .navbar-actions { display: flex; align-items: center; gap: 9px; } /* ───────────────────────────────────────── Boutons ───────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border-radius: var(--radius-md); font-family: var(--font-main); font-size: 13.5px; font-weight: 500; cursor: pointer; border: var(--bw) solid transparent; transition: var(--transition); white-space: nowrap; text-decoration: none; line-height: 1.4; } .btn:active { transform: translateY(1px); } .btn[disabled] { opacity: 0.55; cursor: not-allowed; } .btn-primary { background: var(--accent-grad); color: var(--on-accent); border-color: var(--btn-bd); font-weight: 600; box-shadow: var(--btn-shadow); } .btn-primary:hover { filter: brightness(1.07); box-shadow: var(--btn-shadow-hover); transform: translateY(-1px); } .btn-primary:active { transform: translateY(0); } .btn-ghost { background: transparent; color: var(--text-secondary); border-color: var(--border); } .btn-ghost:hover { background: var(--bg-card); color: var(--text-primary); border-color: var(--border-accent); } .btn-ghost.active { background: var(--bg-card-hover); color: var(--text-primary); border-color: var(--accent-1); } .btn-sm { padding: 6px 12px; font-size: 12.5px; border-radius: var(--radius-sm); } .btn-icon { width: 38px; height: 38px; padding: 0; justify-content: center; border-radius: var(--radius-md); font-size: 15px; } /* ───────────────────────────────────────── Toggle vue complète / simplifiée ───────────────────────────────────────── */ .view-toggle { display: flex; background: var(--bg-card); border: var(--bw) solid var(--border); border-radius: var(--radius-md); padding: 3px; gap: 2px; } .view-toggle .btn { border: none; border-radius: calc(var(--radius-md) - 4px); background: transparent; padding: 7px 14px; font-size: 13px; color: var(--text-muted); } .view-toggle .btn:hover { color: var(--text-primary); } .view-toggle .btn.active { background: var(--accent-grad); color: var(--on-accent); box-shadow: var(--btn-shadow); } /* ───────────────────────────────────────── Boutons thème & style (navbar + login) ───────────────────────────────────────── */ .theme-toggle-btn { width: 38px; height: 38px; border-radius: var(--radius-md); background: var(--bg-card); border: var(--bw) solid var(--border); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; transition: var(--transition); color: var(--text-secondary); flex-shrink: 0; } .theme-toggle-btn:hover { background: var(--bg-card-hover); border-color: var(--border-accent); transform: rotate(12deg); } /* Menu de choix du style d'interface */ .style-menu-wrap { position: relative; } .style-menu { position: absolute; top: calc(100% + 10px); right: 0; min-width: 240px; background: var(--bg-modal); border: var(--bw) solid var(--border-accent); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); padding: 8px; z-index: 150; animation: menuIn 0.16s ease; } .style-menu-title { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); padding: 6px 12px 8px; } .style-menu-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 12px; border: var(--bw) solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); font-family: var(--font-main); font-size: 13.5px; font-weight: 500; cursor: pointer; transition: var(--transition); text-align: left; } .style-menu-item:hover { background: var(--bg-card-hover); color: var(--text-primary); } .style-menu-item.active { background: var(--accent-soft); border-color: var(--accent-ring); color: var(--text-primary); font-weight: 600; } .style-menu-item small { margin-left: auto; font-size: 11px; font-weight: 400; color: var(--text-muted); } .style-dot { width: 18px; height: 18px; border-radius: 6px; flex-shrink: 0; } .dot-aurora { background: linear-gradient(135deg, #5d9bff, #8b5cf6); box-shadow: 0 0 8px rgba(105, 125, 255, 0.6); } .dot-glass { background: linear-gradient(135deg, rgba(168, 85, 247, 0.75), rgba(34, 211, 238, 0.75)); border: 1px solid rgba(255, 255, 255, 0.65); } .dot-clean { background: #4361ee; } .dot-neo { background: #ffd23f; border: 2px solid #16161a; } /* ───────────────────────────────────────── Utilisateur connecté (navbar) + menu ───────────────────────────────────────── */ .user-menu-wrap { position: relative; } .user-avatar-btn { display: flex; align-items: center; gap: 10px; background: var(--bg-card); border: var(--bw) solid var(--border); border-radius: 999px; padding: 5px 12px 5px 5px; cursor: pointer; transition: var(--transition); color: var(--text-primary); font-family: var(--font-main); font-size: 13.5px; font-weight: 500; } .user-avatar-btn:hover { border-color: var(--accent-1); background: var(--bg-card-hover); } .user-avatar-btn-chevron { color: var(--text-muted); transition: var(--transition); } .user-avatar-btn[aria-expanded="true"] .user-avatar-btn-chevron { transform: rotate(180deg); } .user-menu { position: absolute; top: calc(100% + 10px); right: 0; min-width: 270px; background: var(--bg-modal); border: var(--bw) solid var(--border-accent); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); padding: 8px; z-index: 150; animation: menuIn 0.16s ease; } @keyframes menuIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .user-menu-header { display: flex; align-items: center; gap: 13px; padding: 12px 12px 14px; border-bottom: var(--bw) solid var(--border); margin-bottom: 6px; } .user-menu-avatar { flex-shrink: 0; } .user-menu-id { min-width: 0; } .user-menu-name { font-size: 14.5px; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .user-menu-sub { font-size: 12px; color: var(--text-muted); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-menu-team { display: inline-block; font-size: 11px; font-weight: 600; color: var(--text-secondary); background: var(--chip-bg); border-radius: 999px; padding: 1px 10px; margin-top: 6px; } .user-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); font-family: var(--font-main); font-size: 13.5px; font-weight: 500; cursor: pointer; transition: var(--transition); text-align: left; } .user-menu-item:hover { background: rgba(231, 76, 60, 0.12); color: #e74c3c; } .admin-badge { display: inline-flex; align-items: center; background: var(--accent-grad); color: var(--on-accent); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 999px; padding: 2px 9px; flex-shrink: 0; border: var(--bw) solid var(--btn-bd); } /* ───────────────────────────────────────── Avatar utilisateur ───────────────────────────────────────── */ .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-grad); border: var(--avatar-bd); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0; overflow: hidden; user-select: none; } .avatar-lg { width: 52px; height: 52px; font-size: 20px; } /* ───────────────────────────────────────── Bandeau outils (date/heure + note) ───────────────────────────────────────── */ .page-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; } .page-toolbar-spacer { flex: 1; } .page-toolbar-note { font-size: 12.5px; color: var(--text-muted); background: var(--bg-card); border: var(--bw) solid var(--border); border-radius: 999px; padding: 5px 14px; } .sync-info { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-muted); font-family: var(--font-mono); } .sync-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--status-site); animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.8); } } /* ───────────────────────────────────────── Alertes / toasts ───────────────────────────────────────── */ .alert { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-radius: var(--radius-md); font-size: 14px; border: var(--bw) solid transparent; } .alert-info { background: rgba(41, 128, 185, 0.14); border-color: rgba(41, 128, 185, 0.35); color: #5dade2; } .alert-success { background: rgba(39, 174, 96, 0.14); border-color: rgba(39, 174, 96, 0.35); color: #58d68d; } .alert-warning { background: rgba(243, 156, 18, 0.14); border-color: rgba(243, 156, 18, 0.35); color: #f5b041; } .alert-error { background: rgba(231, 76, 60, 0.14); border-color: rgba(231, 76, 60, 0.35); color: #ec7063; } [data-theme="light"] .alert-info { background: rgba(44, 110, 245, 0.08); border-color: rgba(44, 110, 245, 0.3); color: #1a5db5; } [data-theme="light"] .alert-success { background: rgba(30, 142, 81, 0.08); border-color: rgba(30, 142, 81, 0.3); color: #15713f; } [data-theme="light"] .alert-warning { background: rgba(192, 122, 0, 0.10); border-color: rgba(192, 122, 0, 0.35); color: #9a6200; } [data-theme="light"] .alert-error { background: rgba(192, 57, 43, 0.08); border-color: rgba(192, 57, 43, 0.3); color: #a0291e; } .alert-toast { position: fixed; bottom: 24px; right: 24px; z-index: 9999; min-width: 280px; max-width: 420px; box-shadow: var(--shadow-pop); background-color: var(--bg-modal); animation: slideUp 0.3s ease; } /* ───────────────────────────────────────── Légende statuts ───────────────────────────────────────── */ .legend { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 14px; align-items: center; } .legend-item { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; color: var(--text-secondary); background: var(--bg-card); border: var(--bw) solid var(--border); border-radius: 999px; padding: 4px 12px; transition: var(--transition); } .legend-item:hover { border-color: var(--border-accent); color: var(--text-primary); } .legend-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; } /* ───────────────────────────────────────── === VUE COMPLÈTE — Tableau de présence === ───────────────────────────────────────── */ .full-view-wrap { overflow-x: auto; overflow-y: auto; max-height: calc(100vh - 190px); border-radius: var(--radius-lg); border: var(--bw) solid var(--border); background: var(--table-bg); box-shadow: var(--shadow-card); scrollbar-gutter: stable; } .presence-table { width: 100%; border-collapse: separate; /* separate pour que sticky + border fonctionnent */ border-spacing: 0; min-width: 1720px; /* 5 semaines × 10 demi-journées + colonne noms */ background: transparent; } .presence-table th, .presence-table td { border-right: 1px solid var(--grid-border); border-bottom: 1px solid var(--grid-border); padding: 0; font-size: 12px; } .presence-table th:first-child, .presence-table td:first-child { border-left: none; } .presence-table thead tr:first-child th { border-top: none; } /* ── En-têtes STICKY (bloqués en haut au scroll vertical) ── */ .presence-table thead th { position: sticky; z-index: 11; background: var(--table-head-bg); } .presence-table thead tr:nth-child(1) th { top: 0; height: 36px; } .presence-table thead tr:nth-child(2) th { top: 36px; height: 46px; } .presence-table thead tr:nth-child(3) th { top: 82px; height: 26px; z-index: 10; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.22); } [data-theme="light"] .presence-table thead tr:nth-child(3) th { box-shadow: 0 4px 8px rgba(15, 23, 42, 0.07); } /* Colonne utilisateur STICKY à gauche (dans thead ET tbody) */ .presence-table .th-user { left: 0; z-index: 20 !important; width: 150px; min-width: 140px; max-width: 160px; padding: 10px 12px; font-size: 11px; font-weight: 700; color: var(--text-secondary); text-align: left; letter-spacing: 0.07em; text-transform: uppercase; border-right: 2px solid var(--grid-border) !important; } .presence-table .th-week { text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); padding: 6px 4px; white-space: nowrap; } .th-week-label { display: inline-block; margin-left: 6px; font-size: 10px; color: var(--text-muted); font-weight: 500; text-transform: none; letter-spacing: 0; } /* Semaine courante mise en évidence */ .presence-table th.week-current { background: linear-gradient(0deg, var(--accent-soft), var(--accent-soft)), var(--table-head-bg); } .presence-table .th-week.week-current { color: var(--accent-1); } /* Séparateur entre les semaines */ .presence-table .week-start { border-left: 2px solid var(--week-sep) !important; } .presence-table .th-day { text-align: center; padding: 6px 4px; font-size: 11px; font-weight: 600; color: var(--text-secondary); min-width: 68px; } .th-day-name { display: block; font-weight: 700; color: var(--text-primary); font-size: 12px; line-height: 1.35; } .th-day-date { display: block; font-size: 10px; color: var(--text-muted); line-height: 1.3; } /* Aujourd'hui — colonne mise en valeur par une teinte (⚠️ ne jamais poser position:relative ici : ça casserait le sticky de l'en-tête) */ .th-day.today { background: linear-gradient(0deg, var(--today-tint), var(--today-tint)), var(--table-head-bg); } .th-day.today .th-day-name { color: var(--accent-1); } .th-day.today .th-day-date { color: var(--accent-1); opacity: 0.75; } .th-day.today::after { content: ''; position: absolute; left: 15%; right: 15%; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--accent-grad); } /* Colonnes AM/PM du jour (en-tête + corps) */ .th-period.today-col { background: linear-gradient(0deg, var(--today-tint), var(--today-tint)), var(--table-head-bg); color: var(--accent-1); } .status-cell.today-col { background: var(--today-tint); } .th-period { text-align: center; padding: 4px 2px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; color: var(--text-muted); min-width: 34px; } /* En-tête d'équipe — libellé sticky INTERNE à la cellule (la cellule fait toute la largeur, seul le libellé est figé) */ .team-header-row td { padding: 0; } .team-label { position: sticky; left: 0; display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 6px 14px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; } /* Nom d'utilisateur (colonne fixe) */ .presence-table .td-user { position: sticky; left: 0; z-index: 5; background: var(--table-sticky-bg); padding: 5px 9px; width: 150px; min-width: 140px; max-width: 160px; border-right: 2px solid var(--grid-border) !important; transition: background 0.15s ease; } .user-row:hover .td-user { background: var(--bg-modal); } .user-row:hover .status-cell-inner { filter: brightness(1.18); } [data-theme="light"] .user-row:hover .td-user { background: var(--bg-card-hover); } [data-theme="light"] .user-row:hover .status-cell-inner { filter: brightness(0.94); } .user-row.is-me .user-cell-name { color: var(--accent-1); font-weight: 700; } .user-row.is-me .td-user { box-shadow: inset 3px 0 0 var(--accent-1); } .user-cell { display: flex; align-items: center; gap: 7px; } .user-cell .avatar { width: 24px; height: 24px; font-size: 10px; flex-shrink: 0; } .user-cell-name { font-size: 12px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 105px; } /* Cellule de statut */ .status-cell { width: 34px; min-width: 32px; height: 36px; cursor: default; padding: 0 !important; } .status-cell[title] { cursor: help; } .status-cell-inner { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 12.5px; transition: filter 0.15s ease; } .status-cell-inner:hover { filter: brightness(1.35) !important; } [data-theme="light"] .status-cell-inner:hover { filter: brightness(0.88) !important; } /* Couleurs de statut (tokens par style) */ .s-inconnu { background: var(--sc-inconnu); } .s-site { background: var(--sc-site); } .s-teletravail { background: var(--sc-teletravail); } .s-deplacement { background: var(--sc-deplacement); } .s-formation { background: var(--sc-formation); } .s-conge { background: var(--sc-conge); } .s-ferie { background: var(--sc-ferie); } .table-empty-msg { padding: 48px 24px !important; text-align: center; color: var(--text-muted); font-size: 14px; } .table-empty-icon { font-size: 2rem; margin-bottom: 12px; } /* ───────────────────────────────────────── === VUE SIMPLIFIÉE === ───────────────────────────────────────── */ .week-tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; } .week-tab { padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 500; cursor: pointer; border: var(--bw) solid var(--border); background: var(--bg-card); color: var(--text-secondary); transition: var(--transition); user-select: none; } .week-tab:hover { border-color: var(--border-accent); color: var(--text-primary); } .week-tab.active { border-color: var(--btn-bd); background: var(--accent-grad); color: var(--on-accent); font-weight: 600; box-shadow: var(--btn-shadow); } .day-tabs { display: flex; gap: 5px; margin-bottom: 18px; flex-wrap: wrap; } .day-tab { padding: 8px 16px; border-radius: var(--radius-md); font-size: 13px; font-weight: 500; cursor: pointer; border: var(--bw) solid var(--border); background: var(--bg-card); color: var(--text-secondary); transition: var(--transition); text-align: center; min-width: 82px; user-select: none; } .day-tab:hover { border-color: var(--border-accent); transform: translateY(-1px); } .day-tab.active { border-color: var(--accent-1); background: var(--accent-soft); color: var(--text-primary); } .day-tab.today { border-color: var(--accent-1); } .day-tab.today .day-tab-name { color: var(--accent-1); } .day-tab-name { display: block; font-weight: 700; font-size: 13px; } .day-tab-date { display: block; font-size: 11px; color: var(--text-muted); } .simple-period-row { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; } .simple-period-date { font-size: 13.5px; font-weight: 600; color: var(--text-secondary); } .period-toggle { display: flex; gap: 3px; background: var(--bg-card); border: var(--bw) solid var(--border); border-radius: var(--radius-md); padding: 3px; } .period-toggle .btn { border: none; padding: 7px 16px; font-size: 13px; border-radius: calc(var(--radius-md) - 4px); color: var(--text-muted); background: transparent; } .period-toggle .btn:hover { color: var(--text-primary); } .period-toggle .btn.active { background: var(--accent-grad); color: var(--on-accent); box-shadow: var(--btn-shadow); } .status-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; } .status-card { --card-accent: var(--accent-1); background: var(--bg-surface); border: var(--bw) solid var(--border); border-top: 3px solid var(--card-accent); border-radius: var(--radius-lg); overflow: hidden; transition: var(--transition); box-shadow: var(--shadow-card); } .status-card:hover { border-color: var(--border-accent); border-top-color: var(--card-accent); transform: translateY(-2px); box-shadow: var(--shadow-pop); } .status-card-header { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: var(--bw) solid var(--border); } .status-card-icon { font-size: 17px; } .status-card-title { font-size: 13.5px; font-weight: 700; letter-spacing: 0.01em; } .status-card-count { margin-left: auto; background: var(--chip-bg); border-radius: 999px; padding: 1px 11px; font-size: 12px; font-family: var(--font-mono); color: var(--text-secondary); } .status-card-users { padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; min-height: 56px; } .user-chip { display: flex; align-items: center; gap: 9px; padding: 6px 10px; border-radius: var(--radius-sm); background: var(--bg-card); font-size: 13px; font-weight: 500; transition: var(--transition); } .user-chip:hover { background: var(--bg-card-hover); transform: translateX(2px); } .user-chip .avatar { width: 24px; height: 24px; font-size: 10px; } .empty-msg { color: var(--text-muted); font-size: 13px; padding: 8px 4px; font-style: italic; } /* ───────────────────────────────────────── Modal générique ───────────────────────────────────────── */ .modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 28px 16px; } [data-theme="light"] .modal-overlay { background: rgba(15, 23, 42, 0.4); } .modal { background: var(--bg-modal); border: var(--bw) solid var(--border-accent); border-radius: var(--radius-xl); box-shadow: var(--shadow-modal); width: 100%; max-width: 720px; max-height: calc(100vh - 56px); display: flex; flex-direction: column; animation: modalIn 0.22s cubic-bezier(0.3, 1.2, 0.5, 1); position: relative; } @keyframes modalIn { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .modal-header { display: flex; align-items: center; gap: 12px; padding: 20px 24px 16px; border-bottom: var(--bw) solid var(--border); flex-shrink: 0; } .modal-header-icon { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--radius-md); background: var(--accent-soft); font-size: 18px; flex-shrink: 0; } .modal-title { font-size: 17px; font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .modal-close { width: 32px; height: 32px; border-radius: 50%; background: var(--bg-card); border: var(--bw) solid var(--border); color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 15px; transition: var(--transition); flex-shrink: 0; } .modal-close:hover { background: rgba(231, 76, 60, 0.14); border-color: rgba(231, 76, 60, 0.3); color: #e74c3c; transform: rotate(90deg); } .modal-body { padding: 20px 24px; overflow-y: auto; flex: 1; } .modal-footer { display: flex; align-items: center; gap: 10px; padding: 14px 24px 18px; border-top: var(--bw) solid var(--border); flex-shrink: 0; flex-wrap: wrap; } .modal-footer .spacer { flex: 1; } .modal-intro { font-size: 13px; color: var(--text-muted); margin-bottom: 16px; line-height: 1.6; } .vac-highlight { color: var(--status-conge); } .modal-inline-loading { display: flex; justify-content: center; padding: 40px 0; } /* ───────────────────────────────────────── Ligne « Admin — agir pour … » ───────────────────────────────────────── */ .admin-target-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 18px; background: var(--accent-soft); border: var(--bw) solid var(--accent-ring); border-radius: var(--radius-md); flex-wrap: wrap; } .admin-target-row label { font-size: 13px; font-weight: 600; color: var(--text-secondary); } .admin-target-select { flex: 1; min-width: 160px; max-width: 320px; padding: 8px 12px; border-radius: var(--radius-sm); border: var(--bw) solid var(--border-accent); background: var(--select-bg); color: var(--text-primary); font-family: var(--font-main); font-size: 13px; cursor: pointer; transition: var(--transition); outline: none; } .admin-target-select:focus { border-color: var(--accent-1); box-shadow: 0 0 0 3px var(--accent-soft); } /* ───────────────────────────────────────── Modal saisie des statuts ───────────────────────────────────────── */ .status-form-modal { max-width: 900px; } .week-section { margin-bottom: 24px; } .week-section:last-of-type { margin-bottom: 4px; } .week-section-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; } .week-section-title { font-size: 14.5px; font-weight: 700; color: var(--text-primary); } .week-section-dates { font-size: 12px; color: var(--text-muted); margin-left: 6px; } .week-section .copy-btn { margin-left: auto; } .sfg-scroll { overflow-x: auto; padding-bottom: 2px; } .status-form-grid { display: grid; grid-template-columns: 92px repeat(5, 1fr); gap: 6px; align-items: stretch; min-width: 620px; } .sfg-header { font-size: 11px; font-weight: 700; text-align: center; color: var(--text-secondary); padding: 7px 4px; background: var(--bg-card); border-radius: var(--radius-sm); letter-spacing: 0.05em; position: relative; line-height: 1.4; } .sfg-header-date { font-size: 10px; color: var(--text-muted); font-weight: 500; } .sfg-header-holiday { display: block; font-size: 9px; color: var(--status-ferie); font-weight: 700; margin-top: 2px; } .sfg-period { display: flex; align-items: center; justify-content: flex-end; } .sfg-period span { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-muted); text-transform: uppercase; padding-right: 8px; text-align: right; } .status-select { width: 100%; padding: 8px 6px; border-radius: var(--radius-sm); border: var(--bw) solid var(--border); background: var(--select-bg); color: var(--text-primary); font-family: var(--font-main); font-size: 12px; cursor: pointer; transition: var(--transition); appearance: none; -webkit-appearance: none; text-align: center; text-align-last: center; outline: none; } .status-select:focus { border-color: var(--accent-1); box-shadow: 0 0 0 3px var(--accent-soft); } /* Couleurs dynamiques des selects (appliquées via JS) */ .status-select.s-inconnu { border-color: var(--status-inconnu); background: rgba(44,62,80,0.3); } .status-select.s-site { border-color: var(--status-site); background: rgba(39,174,96,0.2); color: #58d68d; } .status-select.s-teletravail { border-color: var(--status-teletravail); background: rgba(41,128,185,0.2); color: #5dade2; } .status-select.s-deplacement { border-color: var(--status-deplacement); background: rgba(243,156,18,0.2); color: #f5b041; } .status-select.s-formation { border-color: var(--status-formation); background: rgba(142,68,173,0.2); color: #bb8fce; } .status-select.s-conge { border-color: var(--status-conge); background: rgba(231,76,60,0.2); color: #ec7063; } [data-theme="light"] .status-select.s-inconnu { background: rgba(143,163,179,0.12); } [data-theme="light"] .status-select.s-site { background: rgba(30,142,81,0.12); color: var(--status-site); } [data-theme="light"] .status-select.s-teletravail { background: rgba(26,111,170,0.12); color: var(--status-teletravail); } [data-theme="light"] .status-select.s-deplacement { background: rgba(192,122,0,0.12); color: var(--status-deplacement); } [data-theme="light"] .status-select.s-formation { background: rgba(108,47,160,0.12); color: var(--status-formation); } [data-theme="light"] .status-select.s-conge { background: rgba(192,57,43,0.12); color: var(--status-conge); } /* Cellule verrouillée (jour férié dans le formulaire) */ .status-cell-locked { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1px; width: 100%; height: 100%; min-height: 36px; background: var(--sc-ferie); border: 1px dashed var(--status-ferie); border-radius: var(--radius-sm); cursor: default; font-size: 14px; line-height: 1.2; opacity: 0.85; } .status-cell-locked .lock-icon { font-size: 13px; } .status-cell-locked .lock-label { font-size: 8px; font-weight: 700; color: var(--status-ferie); text-transform: uppercase; letter-spacing: 0.05em; } .vacation-auto-badge { display: block; font-size: 9px; text-align: center; color: var(--status-conge); margin-top: 3px; font-weight: 600; letter-spacing: 0.03em; } /* ───────────────────────────────────────── Modal congés planifiés ───────────────────────────────────────── */ .vacation-modal { max-width: 600px; } .vacation-list { display: flex; flex-direction: column; gap: 8px; max-height: 240px; overflow-y: auto; margin-bottom: 20px; } .vacation-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--radius-md); background: var(--bg-card); border: var(--bw) solid var(--border); transition: var(--transition); } .vacation-item:hover { border-color: var(--border-accent); } .vacation-item-dates { font-size: 13px; font-weight: 600; font-family: var(--font-mono); color: var(--text-primary); flex-shrink: 0; } .vacation-item-label { flex: 1; font-size: 13px; color: var(--text-secondary); font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vacation-item-label em { color: var(--text-muted); } .vacation-item-del { width: 28px; height: 28px; border-radius: var(--radius-sm); background: rgba(231, 76, 60, 0.12); border: var(--bw) solid rgba(231, 76, 60, 0.30); color: #e74c3c; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 13px; transition: var(--transition); flex-shrink: 0; } .vacation-item-del:hover { background: rgba(231, 76, 60, 0.25); } .vacation-empty-msg { text-align: center; padding: 22px; color: var(--text-muted); font-size: 13px; font-style: italic; background: var(--bg-card); border: 1px dashed var(--border); border-radius: var(--radius-md); } .vacation-add-title { font-weight: 700; font-size: 14px; margin-bottom: 10px; } .vacation-add-form { background: var(--bg-card); border: var(--bw) solid var(--border-accent); border-radius: var(--radius-md); padding: 16px; } .vacation-add-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; } .form-field { margin-bottom: 12px; } .vacation-add-form label { display: block; font-size: 11.5px; color: var(--text-muted); margin-bottom: 5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; } .vacation-add-form input[type="date"], .vacation-add-form input[type="text"] { width: 100%; padding: 10px 12px; border-radius: var(--radius-sm); border: var(--bw) solid var(--border); background: var(--bg-input); color: var(--text-primary); font-family: var(--font-main); font-size: 13px; outline: none; transition: var(--transition); color-scheme: dark; } [data-theme="light"] .vacation-add-form input[type="date"], [data-theme="light"] .vacation-add-form input[type="text"] { color-scheme: light; } .vacation-add-form input:focus { border-color: var(--accent-1); box-shadow: 0 0 0 3px var(--accent-soft); } /* ───────────────────────────────────────── === PAGE DE CONNEXION === ───────────────────────────────────────── */ .login-body { overflow-x: hidden; } .login-page { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 16px; } .login-card { width: 100%; max-width: 430px; background: var(--bg-surface); border: var(--bw) solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-modal); padding: 42px 38px 34px; } .login-brand { text-align: center; margin-bottom: 28px; } .login-logo { height: 42px; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.92; margin-bottom: 16px; } [data-theme="light"] .login-logo { filter: none; opacity: 1; } .login-title { font-size: 30px; font-weight: var(--fw-display); letter-spacing: 0.01em; line-height: 1.2; background: var(--title-grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .login-subtitle { font-size: 13px; color: var(--text-muted); margin-top: 6px; letter-spacing: 0.02em; } .login-error { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; margin-bottom: 20px; font-size: 13.5px; border-radius: var(--radius-md); background: rgba(231, 76, 60, 0.12); border: var(--bw) solid rgba(231, 76, 60, 0.35); color: #ec7063; animation: shake 0.35s ease; } [data-theme="light"] .login-error { background: rgba(192, 57, 43, 0.07); border-color: rgba(192, 57, 43, 0.3); color: #a0291e; } @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } .login-form { display: flex; flex-direction: column; } .login-field { margin-bottom: 16px; } .login-field label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 7px; } .login-input-wrap { position: relative; } .login-input-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); font-size: 14px; opacity: 0.7; pointer-events: none; } .login-input-wrap input { width: 100%; height: 46px; padding: 0 14px 0 40px; border-radius: var(--radius-md); border: var(--bw) solid var(--border); background: var(--bg-input); color: var(--text-primary); font-family: var(--font-main); font-size: 14.5px; outline: none; transition: var(--transition); } .login-input-wrap input::placeholder { color: var(--text-muted); } .login-input-wrap input:focus { border-color: var(--accent-1); box-shadow: 0 0 0 3px var(--accent-soft); } .login-submit { height: 47px; margin-top: 6px; font-size: 15px; font-weight: 700; letter-spacing: 0.02em; border-radius: var(--radius-md); } .login-hint { font-size: 12px; color: var(--text-muted); text-align: center; line-height: 1.65; margin-top: 16px; } .login-footer { margin-top: 26px; font-size: 12px; color: var(--text-muted); text-align: center; } .login-theme-btn { position: fixed; top: 18px; right: 18px; z-index: 10; } .login-style-btn { position: fixed; top: 18px; right: 66px; z-index: 10; } /* ───────────────────────────────────────── Footer application ───────────────────────────────────────── */ .app-footer { padding: 13px 26px; border-top: var(--bw) solid var(--border); display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--text-muted); } .app-footer-logo { height: 15px; filter: brightness(0) invert(1); opacity: 0.3; } [data-theme="light"] .app-footer-logo { filter: none; opacity: 0.5; } .app-footer-right { margin-left: auto; } /* ───────────────────────────────────────── Barre de chargement & spinner ───────────────────────────────────────── */ .loading-bar { position: fixed; top: 0; left: 0; width: 0%; height: 3px; background: var(--accent-grad); z-index: 9999; transition: width 0.3s ease; border-radius: 0 2px 2px 0; } .loading-bar.active { width: 70%; } .loading-bar.done { width: 100%; transition: width 0.1s; } .spinner { width: 20px; height: 20px; border: 2px solid var(--border); border-top-color: var(--accent-1); border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .page-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 380px; gap: 16px; color: var(--text-secondary); } .page-loading .spinner { width: 40px; height: 40px; border-width: 3px; } .page-loading-text { color: var(--text-muted); font-size: 14px; } /* ───────────────────────────────────────── Scrollbars personnalisées ───────────────────────────────────────── */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-accent); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } ::-webkit-scrollbar-corner { background: transparent; } /* ───────────────────────────────────────── Animations d'entrée ───────────────────────────────────────── */ .fade-in { animation: fadeIn 0.3s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .slide-up { animation: slideUp 0.35s cubic-bezier(0.3, 1.1, 0.5, 1); } @keyframes slideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ═══════════════════════════════════════════════════════════ AJUSTEMENTS SPÉCIFIQUES PAR STYLE (uniquement ce qui ne s'exprime pas en tokens) ═══════════════════════════════════════════════════════════ */ /* — AURORA : lueur sur le logo et l'avatar — */ [data-style="aurora"] .navbar-logo, :root:not([data-style]) .navbar-logo { filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(105, 125, 255, 0.35)); } [data-style="aurora"][data-theme="light"] .navbar-logo { filter: none; } /* — GLASS : verre dépoli sur les surfaces flottantes — */ [data-style="glass"] .modal, [data-style="glass"] .user-menu, [data-style="glass"] .style-menu, [data-style="glass"] .login-card, [data-style="glass"] .status-card, [data-style="glass"] .page-toolbar-note { backdrop-filter: blur(16px) saturate(1.35); -webkit-backdrop-filter: blur(16px) saturate(1.35); } [data-style="glass"] .presence-table thead th { backdrop-filter: blur(12px) saturate(1.3); -webkit-backdrop-filter: blur(12px) saturate(1.3); } [data-style="glass"] .full-view-wrap { backdrop-filter: blur(10px) saturate(1.25); -webkit-backdrop-filter: blur(10px) saturate(1.25); } /* — CLEAN : boutons primaires plats, densité douce — */ [data-style="clean"] .btn-primary:hover { filter: brightness(1.12); transform: none; } [data-style="clean"] .theme-toggle-btn:hover { transform: none; } [data-style="clean"] .day-tab:hover { transform: none; } [data-style="clean"] .status-card:hover { transform: none; } [data-style="clean"] .user-chip:hover { transform: none; } /* — NEO : interactions « pop », selects et cellules bordés — */ [data-style="neo"] body { letter-spacing: 0.005em; } [data-style="neo"] .btn { font-weight: 700; } [data-style="neo"] .btn-primary:hover { filter: none; transform: translate(-1px, -1px); box-shadow: var(--btn-shadow-hover); } [data-style="neo"] .btn-primary:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--btn-bd); } [data-style="neo"] .navbar-title { -webkit-text-fill-color: currentColor; background: none; color: var(--text-primary); } [data-style="neo"] .login-title { -webkit-text-fill-color: currentColor; background: none; color: var(--text-primary); } [data-style="neo"] .status-cell-inner { box-shadow: inset 0 0 0 0.5px var(--grid-border); } [data-style="neo"] .status-cell.today-col .status-cell-inner { box-shadow: inset 0 0 0 2px var(--accent-1); } [data-style="neo"] .status-select.s-inconnu, [data-style="neo"] .status-select.s-site, [data-style="neo"] .status-select.s-teletravail, [data-style="neo"] .status-select.s-deplacement, [data-style="neo"] .status-select.s-formation, [data-style="neo"] .status-select.s-conge { border-color: var(--border); color: var(--text-primary); font-weight: 700; } [data-style="neo"] .status-select.s-site { background: var(--sc-site); } [data-style="neo"] .status-select.s-teletravail { background: var(--sc-teletravail); } [data-style="neo"] .status-select.s-deplacement { background: var(--sc-deplacement); } [data-style="neo"] .status-select.s-formation { background: var(--sc-formation); } [data-style="neo"] .status-select.s-conge { background: var(--sc-conge); } [data-style="neo"][data-theme="light"] .status-select.s-site, [data-style="neo"][data-theme="light"] .status-select.s-teletravail, [data-style="neo"][data-theme="light"] .status-select.s-deplacement, [data-style="neo"][data-theme="light"] .status-select.s-formation, [data-style="neo"][data-theme="light"] .status-select.s-conge { color: #16161a; } [data-style="neo"] .week-tab.active, [data-style="neo"] .period-toggle .btn.active, [data-style="neo"] .view-toggle .btn.active { border: 2px solid var(--btn-bd); } [data-style="neo"] .alert-toast { border-width: 2px; } /* ───────────────────────────────────────── Responsive ───────────────────────────────────────── */ @media (max-width: 1150px) { .navbar-actions .btn-ghost .btn-label { display: none; } .navbar-actions .btn-ghost { padding: 9px 12px; } } @media (max-width: 900px) { .navbar { padding: 0 14px; gap: 10px; } .main-content { padding: 16px 14px; } .view-toggle .btn .btn-label { display: none; } .view-toggle .btn { padding: 8px 12px; } .user-avatar-btn-name { display: none; } .user-avatar-btn { padding: 5px 10px 5px 5px; } .page-toolbar-note { display: none; } .full-view-wrap { max-height: calc(100vh - 170px); } .status-cell { width: 32px; min-width: 30px; height: 34px; } .legend { gap: 6px; } .legend-item { font-size: 11px; padding: 3px 10px; } } @media (max-width: 640px) { body { font-size: 14px; } .navbar { height: 56px; padding: 0 10px; gap: 8px; } .navbar-title { font-size: 15px; } .navbar-logo { height: 24px; } .navbar-actions { gap: 6px; } .main-content { padding: 12px 10px; } .week-tabs { gap: 4px; } .week-tab { padding: 7px 12px; font-size: 12px; } .day-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; } .day-tab { min-width: 72px; padding: 7px 10px; font-size: 12px; flex-shrink: 0; } .status-grid { grid-template-columns: 1fr; } .modal-overlay { padding: 0; align-items: flex-end; } .modal { max-width: 100%; max-height: calc(100vh - 32px); border-radius: var(--radius-xl) var(--radius-xl) 0 0; border-bottom: none; } .modal-header { padding: 16px 16px 12px; } .modal-body { padding: 16px; } .modal-footer { padding: 12px 16px 16px; gap: 8px; } .modal-footer .text-muted { display: none; } .vacation-add-form .form-row { grid-template-columns: 1fr; } .week-section-header { flex-wrap: wrap; } .week-section .copy-btn { margin-left: 0; width: 100%; } .admin-target-row { flex-direction: column; align-items: stretch; } .admin-target-select { max-width: none; } .alert-toast { left: 12px; right: 12px; bottom: 12px; min-width: 0; max-width: none; } .login-card { padding: 32px 22px 26px; } .login-title { font-size: 26px; } .login-style-btn { right: 62px; } .app-footer { padding: 11px 14px; font-size: 11px; } } /* ───────────────────────────────────────── Utilitaires ───────────────────────────────────────── */ .d-none { display: none !important; } .d-flex { display: flex; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mb-3 { margin-bottom: 12px; } .text-muted { color: var(--text-muted); } .text-sm { font-size: 12px; } .fw-700 { font-weight: 700; } .w-100 { width: 100%; } .text-center { text-align: center; }