/* =================================================================== Rapports d'activité — feuille de style principale (CSS custom) =================================================================== */ /* ---------- Système de thème (variables) ---------- Palette neutre + un seul accent, en variante claire et sombre. La bascule se fait via [data-theme] sur (voir le script inline dans head.ejs qui le positionne avant le premier rendu, pour éviter le flash de contenu non stylé) ; à défaut de choix explicite mémorisé, on suit prefers-color-scheme. Tout composant de l'appli doit consommer CES variables (jamais une couleur en dur) pour rester cohérent entre les deux thèmes. */ :root { /* Surfaces : 0 = fond de page, 1 = carte/panneau standard, 2 = élément élevé (popover, modale) — distinct de 1 uniquement en sombre, pour donner une sensation de profondeur sans ombre portée forte. */ --surface-0: #f4f5f7; --surface-1: #ffffff; --surface-2: #ffffff; --border: #e5e7eb; --border-strong: #d1d5db; --text-primary: #1f2937; --text-secondary: #4b5563; --text-muted: #6b7280; /* Accent unique de l'appli (boutons primaires, liens, focus, éléments actifs). --accent-rgb (composantes r,g,b séparées) sert aux anneaux de focus en rgba(), une teinte hexadécimale seule ne pouvant pas se décomposer en CSS. */ --accent: #2f5ac7; --accent-rgb: 47, 90, 199; --accent-hover: #24459c; --accent-contrast: #ffffff; /* Rôles sémantiques : chaque paire bg/text sert aux badges de statut et alertes. "accent" sert de 4e couleur de sens (ex. statut "planifiée"). */ --bg-accent: #e0e7ff; --text-accent: #3730a3; --bg-success: #ecfdf5; --text-success: #047857; --border-success: #a7f3d0; --bg-danger: #fef2f2; --text-danger: #b91c1c; --border-danger: #fecaca; /* Remplissage plein (bouton destructif) : volontairement constant entre les deux thèmes (un rouge saturé reste lisible sur les deux fonds), contrairement à --text-danger qui s'éclaircit en sombre pour rester lisible en tant que TEXTE sur fond sombre. */ --danger: #b91c1c; --danger-hover: #991b1b; --danger-contrast: #ffffff; --bg-warning: #fff7ed; --text-warning: #9a3412; --border-warning: #fed7aa; /* Typographie : deux graisses seulement (direction visuelle validée). */ --font-sans: 'Bookman Old Style', Georgia, 'Times New Roman', Times, serif; --font-size-base: 15px; --font-weight-normal: 400; --font-weight-medium: 500; /* Ajustés pour matcher la référence visuelle validée : coins nettement arrondis sur les cartes (~12px), plus légers sur les champs/boutons (~8px) — voir le chantier de calibrage visuel de /tasks. */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06); --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08); --sidebar-width: 240px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --surface-0: #0f1420; --surface-1: #171d2b; --surface-2: #1f2738; --border: #2a3247; --border-strong: #3a4359; --text-primary: #e5e7eb; --text-secondary: #b6bdcf; --text-muted: #8891a5; --accent: #5b82e0; --accent-rgb: 91, 130, 224; --accent-hover: #7b9aea; --accent-contrast: #ffffff; --bg-accent: rgba(91, 130, 224, 0.18); --text-accent: #a8c0f5; --bg-success: rgba(16, 185, 129, 0.16); --text-success: #34d399; --border-success: rgba(16, 185, 129, 0.35); --bg-danger: rgba(239, 68, 68, 0.16); --text-danger: #f87171; --border-danger: rgba(239, 68, 68, 0.35); --bg-warning: rgba(245, 158, 11, 0.16); --text-warning: #fbbf24; --border-warning: rgba(245, 158, 11, 0.35); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.32); } } :root[data-theme="dark"] { --surface-0: #0f1420; --surface-1: #171d2b; --surface-2: #1f2738; --border: #2a3247; --border-strong: #3a4359; --text-primary: #e5e7eb; --text-secondary: #b6bdcf; --text-muted: #8891a5; --accent: #5b82e0; --accent-rgb: 91, 130, 224; --accent-hover: #7b9aea; --accent-contrast: #ffffff; --bg-accent: rgba(91, 130, 224, 0.18); --text-accent: #a8c0f5; --bg-success: rgba(16, 185, 129, 0.16); --text-success: #34d399; --border-success: rgba(16, 185, 129, 0.35); --bg-danger: rgba(239, 68, 68, 0.16); --text-danger: #f87171; --border-danger: rgba(239, 68, 68, 0.35); --bg-warning: rgba(245, 158, 11, 0.16); --text-warning: #fbbf24; --border-warning: rgba(245, 158, 11, 0.35); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.32); } * { box-sizing: border-box; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } html, body { height: 100%; } body { margin: 0; font-family: var(--font-sans); background-color: var(--surface-0); color: var(--text-primary); font-size: var(--font-size-base); font-weight: var(--font-weight-normal); line-height: 1.5; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4, h5, h6 { font-weight: var(--font-weight-medium); } h1 { font-size: 1.5rem; margin: 0 0 0.25rem; } /* ---------- Layout applicatif (sidebar + contenu) ---------- */ .app-layout { display: flex; min-height: 100vh; } .sidebar { width: var(--sidebar-width); flex-shrink: 0; background-color: var(--surface-1); color: var(--text-secondary); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: var(--space-5) var(--space-3); } .sidebar-brand { display: flex; align-items: center; gap: var(--space-2); color: var(--text-primary); font-weight: var(--font-weight-medium); padding: var(--space-1) var(--space-2) var(--space-5); border-bottom: 1px solid var(--border); margin-bottom: var(--space-3); } .sidebar-brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: var(--radius-sm); background-color: var(--accent); color: var(--accent-contrast); font-size: 0.8rem; font-weight: var(--font-weight-medium); } .sidebar-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; } .nav-link { display: flex; align-items: center; gap: var(--space-3); padding: 0.55rem var(--space-3); border-radius: var(--radius-sm); color: var(--text-secondary); font-weight: var(--font-weight-medium); font-size: 0.88rem; } .nav-link-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0; color: inherit; } .nav-link-icon svg { width: 100%; height: 100%; } .nav-link:hover { background-color: var(--surface-0); color: var(--text-primary); text-decoration: none; } .nav-link-active { background-color: var(--bg-accent); color: var(--text-accent); } .nav-link-active:hover { background-color: var(--bg-accent); color: var(--text-accent); } .sidebar-footer { border-top: 1px solid var(--border); padding-top: var(--space-3); margin-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-3); } .theme-toggle { display: inline-flex; align-items: center; gap: var(--space-2); align-self: flex-start; background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.4rem 0.65rem; color: var(--text-secondary); cursor: pointer; font: inherit; font-size: 0.78rem; font-weight: var(--font-weight-medium); } .theme-toggle:hover { border-color: var(--border-strong); color: var(--text-primary); } .theme-toggle-icon { width: 15px; height: 15px; flex-shrink: 0; } .theme-toggle-icon svg { width: 100%; height: 100%; display: block; } /* L'icône affichée annonce le thème VERS LEQUEL on bascule au clic. */ .theme-toggle-icon-sun { display: none; } :root[data-theme="dark"] .theme-toggle-icon-sun { display: inline-flex; } :root[data-theme="dark"] .theme-toggle-icon-moon { display: none; } .sidebar-user { display: flex; flex-direction: column; padding: var(--space-1) var(--space-2); } .sidebar-user-wrap { position: relative; } /* Le bloc utilisateur sert aussi de déclencheur du menu de profil (.card-menu-trigger, câblage générique dans main.js) : un