/* ============================================================ QUICKSWING INTRANET v2 — DESIGN SYSTEM ============================================================ */ /* === GOOGLE FONTS === */ @import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap'); /* === VARIABLES CSS === */ :root { /* --- Couleurs primaires (bleu Quickswing) --- */ --color-primary: #1B4FD8; --color-primary-dark: #1339A8; --color-primary-light: #3B6EEA; --color-primary-50: #EEF2FF; --color-primary-100: #D5DFFC; /* --- Secondaire / Slate --- */ --color-secondary: #0F172A; --color-secondary-dark: #070E1D; --color-secondary-700: #1E293B; --color-secondary-600: #334155; --color-secondary-500: #475569; --color-secondary-400: #64748B; --color-secondary-300: #94A3B8; --color-secondary-200: #CBD5E1; --color-secondary-100: #E2E8F0; --color-secondary-50: #F8FAFC; /* --- Accent (ambre) --- */ --color-accent: #F59E0B; --color-accent-dark: #D97706; --color-accent-light: #FCD34D; /* --- État : succès --- */ --color-success: #10B981; --color-success-bg: #ECFDF5; --color-success-border: #A7F3D0; --color-success-text: #065F46; /* --- État : avertissement --- */ --color-warning: #F59E0B; --color-warning-bg: #FFFBEB; --color-warning-border: #FDE68A; --color-warning-text: #92400E; /* --- État : danger --- */ --color-danger: #EF4444; --color-danger-dark: #DC2626; --color-danger-bg: #FEF2F2; --color-danger-border: #FECACA; --color-danger-text: #991B1B; /* --- État : info --- */ --color-info: #3B82F6; --color-info-bg: #EFF6FF; --color-info-border: #BFDBFE; --color-info-text: #1E40AF; /* --- Surfaces --- */ --color-white: #FFFFFF; --color-bg: #F1F5F9; --color-surface: #FFFFFF; --color-border: #E2E8F0; --color-border-light: #F1F5F9; /* --- Typographie --- */ --font-heading: 'DM Sans', system-ui, -apple-system, sans-serif; --font-body: 'DM Sans', system-ui, -apple-system, sans-serif; --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 1.875rem; /* --- Espacements --- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; /* --- Border radius --- */ --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-2xl: 1.5rem; --radius-full: 9999px; /* --- Ombres --- */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.06); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.05); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.08), 0 8px 10px -6px rgb(0 0 0 / 0.05); --shadow-sidebar: 4px 0 24px rgb(0 0 0 / 0.15); /* --- Transitions --- */ --transition-fast: 150ms ease; --transition-base: 200ms ease; --transition-slow: 300ms ease; --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1); } /* === BASE === */ *, *::before, *::after { box-sizing: border-box; } body { font-family: var(--font-body); font-size: var(--font-size-sm); color: var(--color-secondary); background-color: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 400; line-height: 1.25; color: var(--color-secondary); } a { color: inherit; } /* === SIDEBAR === */ /* Pré-chargement état réduit sans flash (classe sur via script inline ) */ html.qs-pre-collapsed #qs-sidebar { width: 60px; transition: none !important; } html.qs-pre-collapsed #qs-sidebar .qs-nav-label, html.qs-pre-collapsed #qs-sidebar .qs-sidebar-text { display: none; } html.qs-pre-collapsed #qs-sidebar .qs-nav-item, html.qs-pre-collapsed #qs-sidebar .qs-nav-btn { justify-content: center; gap: 0; box-shadow: none; } html.qs-pre-collapsed #qs-sidebar .qs-nav-item.active, html.qs-pre-collapsed #qs-sidebar .qs-nav-btn.active { box-shadow: none; background: rgba(59,110,234,0.25); } html.qs-pre-collapsed #qs-sidebar #admin-submenu { display: none !important; } html.qs-pre-collapsed #qs-sidebar .qs-sidebar-toggle { display: none; } html.qs-pre-collapsed #qs-main { margin-left: 60px; transition: none !important; } .qs-sidebar { background: var(--color-secondary); color: var(--color-white); box-shadow: var(--shadow-sidebar); width: 16rem; transition: width var(--transition-slow); overflow: hidden; } .qs-sidebar.is-collapsed { width: 60px; } /* Lien de navigation */ .qs-nav-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg); font-size: var(--font-size-sm); font-weight: 400; color: var(--color-secondary-300); text-decoration: none; transition: background var(--transition-base), color var(--transition-base), box-shadow var(--transition-base); } .qs-nav-item:hover { background: var(--color-secondary-700); color: var(--color-white); } .qs-nav-item.active { background: rgba(59, 110, 234, 0.18); color: var(--color-white); font-weight: 500; box-shadow: inset 3px 0 0 var(--color-primary-light); } /* Bouton Administration (toggle) */ .qs-nav-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg); font-size: var(--font-size-sm); font-weight: 400; color: var(--color-secondary-300); background: transparent; border: none; cursor: pointer; transition: background var(--transition-base), color var(--transition-base), box-shadow var(--transition-base); } .qs-nav-btn:hover { background: var(--color-secondary-700); color: var(--color-white); } .qs-nav-btn.active { background: rgba(59, 110, 234, 0.18); color: var(--color-white); font-weight: 500; box-shadow: inset 3px 0 0 var(--color-primary-light); } /* Sidebar — mode réduit : masquer les labels */ .qs-sidebar.is-collapsed .qs-nav-label, .qs-sidebar.is-collapsed .qs-sidebar-text { display: none; } /* Sidebar — mode réduit : centrer les icônes */ .qs-sidebar.is-collapsed .qs-nav-item, .qs-sidebar.is-collapsed .qs-nav-btn { justify-content: center; gap: 0; box-shadow: none; } /* Sidebar — mode réduit : supprimer le box-shadow d'active (centré) */ .qs-sidebar.is-collapsed .qs-nav-item.active, .qs-sidebar.is-collapsed .qs-nav-btn.active { box-shadow: none; background: rgba(59, 110, 234, 0.25); } /* Sidebar — mode réduit : masquer le sous-menu admin */ .qs-sidebar.is-collapsed #admin-submenu { display: none !important; } /* Bouton toggle collapse */ .qs-sidebar-toggle { flex-shrink: 0; background: transparent; border: none; cursor: pointer; padding: 4px; color: var(--color-secondary-400); border-radius: var(--radius-sm); align-items: center; transition: background var(--transition-base), color var(--transition-base); } .qs-sidebar-toggle:hover { background: var(--color-secondary-700); color: var(--color-white); } .qs-toggle-icon { display: block; transition: transform var(--transition-slow); } .qs-sidebar.is-collapsed .qs-toggle-icon { transform: rotate(180deg); } .qs-sidebar.is-collapsed .qs-sidebar-toggle { display: none; } .qs-sidebar.is-expanding .qs-sidebar-text, .qs-sidebar.is-expanding .qs-nav-label, .qs-sidebar.is-expanding .qs-sidebar-toggle { visibility: hidden; } .qs-sidebar.is-collapsed #qs-sidebar-logo { cursor: pointer; } .qs-sidebar.is-collapsed #qs-sidebar-logo:hover { opacity: 0.8; } /* Tooltip (positionné via JS) */ .qs-sidebar-tooltip { position: fixed; display: none; background: var(--color-secondary-700); color: white; padding: 4px 10px; border-radius: var(--radius-md); font-size: var(--font-size-xs); white-space: nowrap; pointer-events: none; z-index: 9999; transform: translateY(-50%); box-shadow: var(--shadow-md); } /* Flèche du sous-menu Administration */ .qs-nav-arrow { transition: transform var(--transition-base); flex-shrink: 0; } .qs-nav-arrow.is-open { transform: rotate(90deg); } /* Sous-menu Administration — animation slideDown */ .qs-submenu { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.25s ease, opacity 0.2s ease; } .qs-submenu.is-open { max-height: 300px; opacity: 1; } /* Avatar utilisateur (sidebar footer) */ .qs-user-avatar { width: 30px; height: 30px; flex-shrink: 0; border-radius: var(--radius-full); background: var(--color-primary); color: white; display: flex; align-items: center; justify-content: center; font-size: 0.68rem; font-weight: 700; font-family: var(--font-body); letter-spacing: 0.02em; } /* Avatar & user info — topbar */ .qs-topbar-avatar { width: 34px; height: 34px; flex-shrink: 0; border-radius: var(--radius-full); background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary-dark)); color: white; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; font-family: var(--font-body); letter-spacing: 0.02em; box-shadow: 0 2px 8px rgb(27 79 216 / 0.3); } .qs-topbar-username { font-size: var(--font-size-sm); color: var(--color-secondary-600); font-weight: 500; } .qs-topbar-logout { background: transparent; border: none; cursor: pointer; font-family: var(--font-body); font-size: var(--font-size-xs); color: var(--color-secondary-400); padding: 0; transition: color var(--transition-base); } .qs-topbar-logout:hover { color: var(--color-danger); } /* Contenu principal — transition pour le mode réduit */ #qs-main { transition: margin-left var(--transition-slow); } #qs-main.sidebar-collapsed { margin-left: 60px; } /* Sous-lien Administration */ .qs-nav-subitem { display: flex; align-items: center; padding: var(--space-1) var(--space-3) var(--space-1) var(--space-4); border-radius: var(--radius-lg); font-size: var(--font-size-xs); color: var(--color-secondary-400); text-decoration: none; transition: background var(--transition-base), color var(--transition-base); } .qs-nav-subitem:hover { background: var(--color-secondary-700); color: var(--color-white); } .qs-nav-subitem.active { background: var(--color-primary-light); color: var(--color-white); font-weight: 500; } /* === TOPBAR === */ .qs-topbar { background: var(--color-surface); border-bottom: 1px solid var(--color-border); } .qs-page-title { font-family: var(--font-heading); font-size: var(--font-size-xl); font-weight: 400; color: var(--color-secondary); } /* === CARD === */ .card { background: var(--color-surface); border-radius: var(--radius-xl); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); overflow: hidden; } .card-header { padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-border-light); } .card-body { padding: var(--space-6); } /* === BOUTONS === */ .btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); font-family: var(--font-body); font-size: var(--font-size-sm); font-weight: 500; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background var(--transition-base), color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-fast); white-space: nowrap; line-height: 1.25; position: relative; overflow: hidden; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); } .btn-primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); box-shadow: 0 4px 14px rgb(27 79 216 / 0.35); } .btn-secondary { background: var(--color-surface); color: var(--color-secondary-600); border-color: var(--color-border); } .btn-secondary:hover { background: var(--color-secondary-50); border-color: var(--color-secondary-200); } .btn-danger { background: var(--color-danger); color: var(--color-white); border-color: var(--color-danger); } .btn-danger:hover { background: var(--color-danger-dark); border-color: var(--color-danger-dark); box-shadow: 0 4px 14px rgb(239 68 68 / 0.35); } .btn-ghost { background: transparent; color: var(--color-primary); border-color: transparent; font-weight: 500; } .btn-ghost:hover { background: var(--color-primary-50); border-color: var(--color-primary-100); color: var(--color-primary-dark); } .btn-ghost .btn-arrow { display: inline-block; transition: transform 0.18s ease; } .btn-ghost:hover .btn-arrow { transform: translateX(3px); } .btn-sm { padding: var(--space-1) var(--space-3); font-size: var(--font-size-xs); } .btn-lg { padding: var(--space-3) var(--space-6); font-size: var(--font-size-base); border-radius: var(--radius-lg); } /* === BADGES === */ .badge { display: inline-flex; align-items: center; padding: 0.125rem var(--space-2); border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: 600; line-height: 1.25; } .badge-primary { background: var(--color-primary-100); color: var(--color-primary-dark); } .badge-success { background: var(--color-success-bg); color: var(--color-success-text); } .badge-warning { background: var(--color-warning-bg); color: var(--color-warning-text); } .badge-danger { background: var(--color-danger-bg); color: var(--color-danger-text); } .badge-info { background: var(--color-info-bg); color: var(--color-info-text); } .badge-neutral { background: var(--color-secondary-100); color: var(--color-secondary-600);} /* Badge alerte sidebar (avec pulsation) */ .badge-alert { background: var(--color-danger); color: var(--color-white); font-size: var(--font-size-xs); font-weight: 700; min-width: 1.25rem; text-align: center; padding: 0.125rem var(--space-1); border-radius: var(--radius-full); line-height: 1.25; animation: pulse-dot 2s ease-in-out infinite; } /* === FLASH MESSAGES === */ .flash-success { background: var(--color-success-bg); border: 1px solid var(--color-success-border); color: var(--color-success-text); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); font-size: var(--font-size-sm); } .flash-error { background: var(--color-danger-bg); border: 1px solid var(--color-danger-border); color: var(--color-danger-text); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); font-size: var(--font-size-sm); } /* === TABLEAUX === */ .table-qs { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); } .table-qs thead th { background: var(--color-secondary-50); color: var(--color-secondary-500); font-family: var(--font-body); font-weight: 600; text-transform: uppercase; font-size: var(--font-size-xs); letter-spacing: 0.05em; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); text-align: left; } .table-qs tbody td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-light); color: var(--color-secondary-700); } .table-qs tbody tr:hover { background: var(--color-secondary-50); } /* === FORMULAIRES === */ .form-label { display: block; font-size: var(--font-size-sm); font-weight: 500; color: var(--color-secondary-600); margin-bottom: var(--space-1); } .form-input, .form-select, .form-textarea { width: 100%; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-family: var(--font-body); font-size: var(--font-size-sm); color: var(--color-secondary); background: var(--color-surface); transition: border-color var(--transition-base), box-shadow var(--transition-base); outline: none; } /* === PAGE CONNEXION (Phase 3 — Étape 32) === */ .auth-layout { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; } /* ── Colonne gauche : Branding ── */ .auth-brand { position: relative; overflow: hidden; background: linear-gradient(145deg, var(--color-secondary) 0%, #162142 40%, var(--color-primary-dark) 80%, var(--color-primary) 100%); display: flex; align-items: center; justify-content: center; padding: var(--space-12); } .auth-brand-inner { position: relative; z-index: 2; text-align: center; color: white; max-width: 340px; } /* Éléments décoratifs géométriques */ .auth-deco { position: absolute; border-radius: 50%; pointer-events: none; } .auth-deco-1 { width: 420px; height: 420px; top: -170px; left: -170px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); } .auth-deco-2 { width: 300px; height: 300px; bottom: -110px; right: -110px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); } .auth-deco-3 { width: 180px; height: 180px; top: 55%; left: 58%; background: rgba(59,110,234,0.12); } .auth-deco-4 { width: 64px; height: 64px; top: 18%; right: 14%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-xl); transform: rotate(22deg); } .auth-logo-wrap { display: flex; justify-content: center; margin-bottom: var(--space-6); } .auth-brand-name { font-family: var(--font-heading); font-size: 2.75rem; font-weight: 400; color: white; letter-spacing: -0.5px; margin: 0 0 var(--space-2); line-height: 1.1; } .auth-brand-tagline { font-size: var(--font-size-sm); color: rgba(255,255,255,0.45); margin: 0 0 var(--space-10); letter-spacing: 0.03em; } .auth-divider { width: 36px; height: 2px; background: rgba(255,255,255,0.18); margin: 0 auto var(--space-8); border-radius: 1px; } .auth-features { display: flex; flex-direction: column; gap: var(--space-4); text-align: left; } .auth-feature { display: flex; align-items: center; gap: var(--space-3); color: rgba(255,255,255,0.6); font-size: var(--font-size-sm); } .auth-feature-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: var(--radius-md); background: rgba(255,255,255,0.1); color: white; } /* ── Colonne droite : Formulaire ── */ .auth-form-panel { background: var(--color-bg); display: flex; align-items: center; justify-content: center; padding: var(--space-8) var(--space-6); background-image: radial-gradient(circle at 50% -10%, rgba(27,79,216,0.05) 0%, transparent 55%), radial-gradient(circle at 1px 1px, var(--color-secondary-200) 1px, transparent 0); background-size: 100% 100%, 28px 28px; } .auth-form-card { width: 100%; max-width: 420px; background: var(--color-white); border-radius: var(--radius-2xl); box-shadow: 0 25px 60px -15px rgb(0 0 0 / 0.14), 0 0 0 1px rgb(0 0 0 / 0.04); padding: var(--space-10) var(--space-8); } .auth-card-header { margin-bottom: var(--space-8); } .auth-card-title { font-family: var(--font-heading); font-size: var(--font-size-3xl); font-weight: 400; color: var(--color-secondary); margin: 0 0 var(--space-1); line-height: 1.2; } .auth-card-subtitle { font-size: var(--font-size-sm); color: var(--color-secondary-400); margin: 0; } .auth-flash { margin-bottom: var(--space-6); } /* ── Floating labels ── */ .floating-field { position: relative; margin-bottom: var(--space-5); } .floating-input { width: 100%; padding: 1.375rem var(--space-4) 0.5rem; border: 1.5px solid var(--color-border); border-radius: var(--radius-lg); font-family: var(--font-body); font-size: var(--font-size-sm); color: var(--color-secondary); background: var(--color-surface); transition: border-color var(--transition-base), box-shadow var(--transition-base); outline: none; line-height: 1.5; -webkit-appearance: none; } .floating-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgb(27 79 216 / 0.1); } .floating-label { position: absolute; left: var(--space-4); top: 50%; transform: translateY(-50%); font-size: var(--font-size-sm); color: var(--color-secondary-400); pointer-events: none; transition: top var(--transition-base), transform var(--transition-base), font-size var(--transition-base), color var(--transition-base); white-space: nowrap; } .floating-input:focus + .floating-label, .floating-input:not(:placeholder-shown) + .floating-label, .floating-input:-webkit-autofill + .floating-label { top: 0.625rem; transform: translateY(0); font-size: 0.7rem; color: var(--color-primary); font-weight: 500; } /* ── Bouton de connexion ── */ .btn-auth { display: flex; align-items: center; justify-content: center; gap: var(--space-2); width: 100%; margin-top: var(--space-2); padding: var(--space-4) var(--space-6); background: var(--color-primary); color: var(--color-white); border: none; border-radius: var(--radius-lg); font-family: var(--font-body); font-size: var(--font-size-base); font-weight: 600; letter-spacing: 0.01em; cursor: pointer; transition: background var(--transition-base), box-shadow var(--transition-base), transform var(--transition-fast); } .btn-auth:hover { background: var(--color-primary-dark); box-shadow: 0 8px 28px rgb(27 79 216 / 0.36); transform: translateY(-1px); } .btn-auth:active { transform: translateY(0); box-shadow: none; } .btn-auth.is-loading { pointer-events: none; opacity: 0.8; } .btn-auth-spinner { display: none; width: 1rem; height: 1rem; border: 2px solid rgba(255,255,255,0.3); border-top-color: white; border-radius: 50%; animation: auth-spin 0.65s linear infinite; flex-shrink: 0; } .btn-auth.is-loading .btn-auth-spinner { display: block; } .btn-auth.is-loading .btn-auth-text { display: none; } @keyframes auth-spin { to { transform: rotate(360deg); } } /* ── Responsive mobile ── */ @media (max-width: 768px) { .auth-layout { grid-template-columns: 1fr; } .auth-brand { display: none; } .auth-form-panel { min-height: 100vh; padding: var(--space-6) var(--space-4); background-image: radial-gradient(circle at 50% -10%, rgba(27,79,216,0.05) 0%, transparent 55%); background-size: 100% 100%; } .auth-form-card { padding: var(--space-8) var(--space-6); } } /* === ANIMATIONS @keyframes === */ /* Entrée en fondu montant */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* Entrée depuis la gauche */ @keyframes slideInLeft { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: translateX(0); } } /* Pulsation badge alerte */ @keyframes pulse-dot { 0%, 100% { box-shadow: 0 0 0 0 rgb(239 68 68 / 0.55); } 50% { box-shadow: 0 0 0 5px rgb(239 68 68 / 0); } } /* Classes utilitaires d'animation */ .animate-fadeInUp { animation: fadeInUp 0.4s ease both; } .animate-slideInLeft { animation: slideInLeft 0.35s ease both; } /* === DASHBOARD (Étape 34) === */ /* ── KPI Grid ── */ .db-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-bottom: var(--space-5); } @media (max-width: 1100px) { .db-kpi-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .db-kpi-grid { grid-template-columns: 1fr; } } .db-kpi-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-4) var(--space-5); display: flex; align-items: center; gap: var(--space-4); box-shadow: var(--shadow-sm); transition: box-shadow var(--transition-base), transform var(--transition-base); } .db-kpi-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } a.db-kpi-card { text-decoration: none; color: inherit; cursor: pointer; } .db-kpi-icon { width: 48px; height: 48px; flex-shrink: 0; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; } .db-kpi-icon--primary { background: var(--color-primary-50); color: var(--color-primary); } .db-kpi-icon--success { background: var(--color-success-bg); color: var(--color-success); } .db-kpi-icon--warning { background: var(--color-warning-bg); color: var(--color-warning); } .db-kpi-icon--danger { background: var(--color-danger-bg); color: var(--color-danger); } .db-kpi-icon--info { background: var(--color-info-bg); color: var(--color-info); } .db-kpi-icon--neutral { background: var(--color-secondary-100); color: var(--color-secondary-400); } .db-kpi-body { min-width: 0; } .db-kpi-value { font-family: var(--font-heading); font-size: var(--font-size-2xl); font-weight: 400; color: var(--color-secondary); line-height: 1.15; white-space: nowrap; } .db-kpi-value--warning { color: var(--color-warning-text); } .db-kpi-value--danger { color: var(--color-danger-text); } .db-kpi-value--success { color: var(--color-success-text); } .db-kpi-value--currency { font-size: var(--font-size-xl); } .db-kpi-label { font-size: var(--font-size-xs); color: var(--color-secondary-400); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── Lower Grid ── */ .db-lower-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: start; } @media (max-width: 900px) { .db-lower-grid { grid-template-columns: 1fr; } } /* ── Card header & content helpers ── */ .db-card-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border-light); } .db-card-title { font-family: var(--font-heading); font-size: var(--font-size-lg); font-weight: 400; color: var(--color-secondary); margin: 0; } .db-card-content { padding: var(--space-3) var(--space-2); } /* ── Empty state ── */ .db-empty-state { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-8) var(--space-4); text-align: center; } .db-empty-icon { width: 44px; height: 44px; border-radius: var(--radius-full); background: var(--color-secondary-100); color: var(--color-secondary-400); display: flex; align-items: center; justify-content: center; } .db-empty-icon--success { background: var(--color-success-bg); color: var(--color-success); } .db-empty-text { font-size: var(--font-size-sm); color: var(--color-secondary-400); margin: 0; } /* ── Alert rows ── */ .db-alert-group { padding: var(--space-3) var(--space-3) var(--space-1); } .db-alert-group + .db-alert-group { border-top: 1px solid var(--color-border-light); margin-top: var(--space-2); padding-top: var(--space-3); } .db-alert-group-label { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); } .db-alert-count { font-size: var(--font-size-xs); font-weight: 600; color: var(--color-secondary-400); } .db-alert-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg); text-decoration: none; transition: background var(--transition-base); margin-bottom: 2px; } .db-alert-row:hover { background: var(--color-secondary-50); } .db-alert-row--danger:hover { background: var(--color-danger-bg); } .db-alert-row--warning:hover { background: var(--color-warning-bg); } .db-alert-dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: var(--radius-full); } .db-alert-dot--danger { background: var(--color-danger); } .db-alert-dot--warning { background: var(--color-warning); } .db-alert-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .db-alert-name { font-size: var(--font-size-sm); font-weight: 500; color: var(--color-secondary-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .db-alert-sub { font-size: var(--font-size-xs); color: var(--color-secondary-400); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .db-alert-date { font-size: var(--font-size-xs); color: var(--color-secondary-400); white-space: nowrap; flex-shrink: 0; } /* ── Activity rows ── */ .db-activity-group { padding: var(--space-3) var(--space-3) var(--space-1); } .db-activity-group + .db-activity-group { border-top: 1px solid var(--color-border-light); margin-top: var(--space-2); padding-top: var(--space-3); } .db-activity-group-label { font-size: var(--font-size-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-secondary-400); margin-bottom: var(--space-2); padding-left: var(--space-1); } .db-activity-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-2); border-radius: var(--radius-lg); text-decoration: none; transition: background var(--transition-base); margin-bottom: 2px; } .db-activity-row:hover { background: var(--color-secondary-50); } .db-activity-icon { width: 28px; height: 28px; flex-shrink: 0; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; } .db-activity-icon--facture { background: var(--color-primary-50); color: var(--color-primary); } .db-activity-icon--travaux { background: var(--color-warning-bg); color: var(--color-warning); } .db-activity-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .db-activity-name { font-size: var(--font-size-sm); font-weight: 500; color: var(--color-secondary-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .db-activity-sub { font-size: var(--font-size-xs); color: var(--color-secondary-400); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .db-activity-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; } .db-activity-amount { font-size: var(--font-size-xs); font-weight: 600; color: var(--color-secondary-500); white-space: nowrap; } /* === TABLE INTERACTIVE (Étape 35) === */ .qs-ti-toolbar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); background: var(--color-surface); flex-wrap: wrap; } .qs-ti-search-wrap { position: relative; flex: 1; min-width: 160px; max-width: 280px; } .qs-ti-search-icon { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--color-secondary-400); pointer-events: none; } .qs-ti-search { width: 100%; padding: var(--space-2) var(--space-3) var(--space-2) 2rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); font-family: var(--font-body); font-size: var(--font-size-sm); color: var(--color-secondary); background: var(--color-secondary-50); transition: border-color var(--transition-base), box-shadow var(--transition-base), background var(--transition-base); outline: none; } .qs-ti-search:focus { border-color: var(--color-primary); background: var(--color-white); box-shadow: 0 0 0 3px rgb(27 79 216 / 0.1); } .qs-ti-search::-webkit-search-cancel-button { -webkit-appearance: none; } .qs-ti-counter { font-size: var(--font-size-xs); color: var(--color-secondary-400); font-weight: 500; white-space: nowrap; margin-left: auto; } /* Sortable headers */ .qs-ti-th-sort { cursor: pointer; user-select: none; white-space: nowrap; transition: background var(--transition-fast), color var(--transition-fast); } .qs-ti-th-sort:hover { background: var(--color-secondary-100) !important; color: var(--color-secondary-700) !important; } /* Dual-arrow sort indicator */ .qs-sort-arrow { display: inline-block; vertical-align: middle; margin-left: 5px; opacity: 0.22; transition: opacity var(--transition-base); } .qs-ti-th-sort:hover .qs-sort-arrow { opacity: 0.5; } .qs-sort-arrow .arrow-up, .qs-sort-arrow .arrow-down { fill: currentColor; transition: opacity var(--transition-base); } /* ASC */ .qs-ti-th-sort[data-sort="asc"] .qs-sort-arrow { opacity: 1; } .qs-ti-th-sort[data-sort="asc"] .arrow-up { opacity: 1; } .qs-ti-th-sort[data-sort="asc"] .arrow-down { opacity: 0.2; } /* DESC */ .qs-ti-th-sort[data-sort="desc"] .qs-sort-arrow { opacity: 1; } .qs-ti-th-sort[data-sort="desc"] .arrow-up { opacity: 0.2; } .qs-ti-th-sort[data-sort="desc"] .arrow-down { opacity: 1; } /* Row opacity transitions */ table[data-table-interactive] tbody tr { transition: opacity var(--transition-base); } /* Empty state */ .qs-ti-empty-row td { padding: var(--space-10) var(--space-4) !important; } .qs-ti-empty-cell { text-align: center; color: var(--color-secondary-400); font-size: var(--font-size-sm); font-style: italic; } /* === FORMULAIRES AMÉLIORÉS (Étape 36) === */ /* ── Focus states enrichis (override Tailwind) ── */ .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--color-primary) !important; box-shadow: 0 0 0 3px rgb(27 79 216 / 0.12) !important; outline: none !important; } /* ── États de validation ── */ input.is-invalid, textarea.is-invalid, select.is-invalid, .form-input.is-invalid, .form-select.is-invalid, .form-textarea.is-invalid { border-color: var(--color-danger) !important; box-shadow: 0 0 0 3px rgb(239 68 68 / 0.1) !important; } input.is-valid, textarea.is-valid, select.is-valid, .form-input.is-valid, .form-select.is-valid, .form-textarea.is-valid { border-color: var(--color-success) !important; box-shadow: 0 0 0 3px rgb(16 185 129 / 0.1) !important; } /* ── Message d'erreur inline ── */ .qs-form-error { display: none; color: var(--color-danger-text); font-size: var(--font-size-xs); margin-top: var(--space-1); padding-left: 2px; } .qs-form-error.is-visible { display: block; animation: qs-slideDown 0.2s ease both; } @keyframes qs-slideDown { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } } /* ── Floating labels (wrapper opt-in : .form-field-float) ── */ .form-field-float { position: relative; margin-top: var(--space-4); } .form-field-float input, .form-field-float textarea, .form-field-float select { padding-top: 1.4rem; padding-bottom: 0.4rem; } .form-field-float label { position: absolute; left: 0.75rem; top: 0.65rem; font-size: var(--font-size-sm); color: var(--color-secondary-400); pointer-events: none; transform-origin: left top; transition: font-size var(--transition-base), color var(--transition-base), top var(--transition-base); white-space: nowrap; } .form-field-float.is-focused label, .form-field-float.has-value label { top: 0.25rem; font-size: 0.68rem; color: var(--color-primary); font-weight: 500; } /* ── Indicateur de force du mot de passe ── */ .qs-pw-strength { margin-top: var(--space-2); } .qs-pw-strength-bar { height: 4px; border-radius: var(--radius-full); background: var(--color-secondary-100); overflow: hidden; } .qs-pw-strength-fill { height: 100%; border-radius: var(--radius-full); width: 0%; transition: width 0.35s ease, background-color 0.35s ease; } .qs-pw-strength-fill.pw-weak { width: 33%; background: var(--color-danger); } .qs-pw-strength-fill.pw-medium { width: 66%; background: var(--color-accent); } .qs-pw-strength-fill.pw-strong { width: 100%; background: var(--color-success); } .qs-pw-strength-lbl { font-size: var(--font-size-xs); margin-top: 3px; transition: color var(--transition-base); } .qs-pw-strength-lbl.pw-weak { color: var(--color-danger); } .qs-pw-strength-lbl.pw-medium { color: var(--color-accent-dark); } .qs-pw-strength-lbl.pw-strong { color: var(--color-success-text); } /* ── Compteur de caractères ── */ .qs-char-count { font-size: var(--font-size-xs); color: var(--color-secondary-400); text-align: right; margin-top: var(--space-1); transition: color var(--transition-base); } .qs-char-count.near-limit { color: var(--color-accent-dark); } .qs-char-count.at-limit { color: var(--color-danger); font-weight: 600; } /* ── Bouton submit — état chargement ── */ .btn[data-loading], button[type="submit"][data-loading] { pointer-events: none; opacity: 0.75; } .qs-submit-spinner { display: inline-block; width: 0.85rem; height: 0.85rem; border: 2px solid rgba(255,255,255,0.35); border-top-color: white; border-radius: 50%; animation: auth-spin 0.6s linear infinite; flex-shrink: 0; vertical-align: middle; margin-right: var(--space-1); } /* spinner dark pour boutons blancs/secondaires */ .btn-secondary .qs-submit-spinner { border-color: rgba(0,0,0,0.15); border-top-color: var(--color-secondary-600); } /* === MICRO-INTERACTIONS (Étape 37) === */ /* ── Badge transitions fluides ── */ .badge { transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base); } /* ── Ripple effect ── */ .qs-ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.35); transform: scale(0); animation: qs-ripple-anim 0.55s ease-out forwards; pointer-events: none; } .btn-secondary .qs-ripple { background: rgba(0, 0, 0, 0.08); } @keyframes qs-ripple-anim { to { transform: scale(2.5); opacity: 0; } } /* ── Toast container ── */ #qs-toast-container { position: fixed; top: var(--space-4); right: var(--space-4); z-index: 9000; display: flex; flex-direction: column; gap: var(--space-2); pointer-events: none; max-width: 380px; width: calc(100% - 2rem); } .qs-toast { pointer-events: all; display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); font-size: var(--font-size-sm); font-weight: 500; animation: qs-toast-in var(--transition-slow) ease both; border: 1px solid transparent; position: relative; overflow: hidden; line-height: 1.4; } .qs-toast--success { background: var(--color-success-bg); border-color: var(--color-success-border); color: var(--color-success-text); } .qs-toast--error { background: var(--color-danger-bg); border-color: var(--color-danger-border); color: var(--color-danger-text); } .qs-toast--warning { background: var(--color-warning-bg); border-color: var(--color-warning-border); color: var(--color-warning-text); } .qs-toast--info { background: var(--color-info-bg); border-color: var(--color-info-border); color: var(--color-info-text); } /* barre de progression en bas */ .qs-toast::after { content: ''; position: absolute; bottom: 0; left: 0; height: 3px; width: 100%; animation: qs-toast-progress 4s linear both; border-radius: 0 0 var(--radius-lg) var(--radius-lg); } .qs-toast--success::after { background: var(--color-success); } .qs-toast--error::after { background: var(--color-danger); } .qs-toast--warning::after { background: var(--color-warning); } .qs-toast--info::after { background: var(--color-info); } .qs-toast-icon { flex-shrink: 0; margin-top: 1px; line-height: 0; } .qs-toast-msg { flex: 1; } .qs-toast-close { flex-shrink: 0; background: transparent; border: none; cursor: pointer; padding: 2px; color: inherit; opacity: 0.5; line-height: 0; border-radius: var(--radius-sm); transition: opacity var(--transition-fast); margin-top: 1px; } .qs-toast-close:hover { opacity: 1; } .qs-toast.is-leaving { animation: qs-toast-out var(--transition-slow) ease forwards; } @keyframes qs-toast-in { from { opacity: 0; transform: translateX(110%); } to { opacity: 1; transform: translateX(0); } } @keyframes qs-toast-out { from { opacity: 1; transform: translateX(0); max-height: 120px; } to { opacity: 0; transform: translateX(110%); max-height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: -0.5rem; } } @keyframes qs-toast-progress { from { width: 100%; } to { width: 0%; } } /* ── Modale de confirmation suppression ── */ .qs-modal-overlay { position: fixed; inset: 0; z-index: 9100; background: rgba(15, 23, 42, 0.5); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: var(--space-4); opacity: 0; pointer-events: none; transition: opacity var(--transition-slow); } .qs-modal-overlay.is-open { opacity: 1; pointer-events: all; } .qs-modal { background: var(--color-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl), 0 0 0 1px rgb(0 0 0 / 0.04); padding: var(--space-6) var(--space-6) var(--space-6); max-width: 420px; width: 100%; transform: scale(0.9); transition: transform var(--transition-spring); text-align: center; } .qs-modal-overlay.is-open .qs-modal { transform: scale(1); } .qs-modal-icon { width: 48px; height: 48px; border-radius: var(--radius-full); background: var(--color-danger-bg); color: var(--color-danger); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-4); } .qs-modal-title { font-family: var(--font-heading); font-size: var(--font-size-xl); font-weight: 400; color: var(--color-secondary); margin: 0 0 var(--space-2); } .qs-modal-body { font-size: var(--font-size-sm); color: var(--color-secondary-500); margin: 0 0 var(--space-6); line-height: 1.5; } .qs-modal-actions { display: flex; gap: var(--space-3); justify-content: center; } .qs-modal-actions .btn { flex: 1; justify-content: center; } /* ── Copy-to-clipboard ── */ .qs-copy-btn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex-shrink: 0; border-radius: var(--radius-sm); background: transparent; border: 1px solid var(--color-border); cursor: pointer; color: var(--color-secondary-400); transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); line-height: 0; padding: 0; } .qs-copy-btn:hover { background: var(--color-secondary-50); color: var(--color-secondary-600); border-color: var(--color-secondary-200); } .qs-copy-btn.is-copied { background: var(--color-success-bg); color: var(--color-success-text); border-color: var(--color-success-border); } /* ── Scroll-to-top ── */ .qs-scroll-top { position: fixed; bottom: var(--space-6); right: var(--space-6); z-index: 800; width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--color-secondary-700); color: white; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity var(--transition-slow), transform var(--transition-slow), background var(--transition-base); } .qs-scroll-top:hover { background: var(--color-primary); } .qs-scroll-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: all; } /* === RESPONSIVE & MOBILE (Étape 38) === */ /* ── Hamburger button (display géré par Tailwind flex md:hidden) ── */ .qs-hamburger { flex-shrink: 0; width: 36px; height: 36px; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; color: var(--color-secondary-500); transition: background var(--transition-base), color var(--transition-base); } .qs-hamburger:hover { background: var(--color-secondary-50); color: var(--color-secondary); } /* ── Bouton fermeture sidebar mobile (display géré par Tailwind flex md:hidden) ── */ .qs-sidebar-close { flex-shrink: 0; width: 30px; height: 30px; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; color: var(--color-secondary-400); border-radius: var(--radius-sm); transition: background var(--transition-base), color var(--transition-base); } .qs-sidebar-close:hover { background: var(--color-secondary-700); color: white; } /* ── Backdrop sidebar (mobile) ── */ .qs-sidebar-backdrop { position: fixed; inset: 0; z-index: 29; background: rgba(15, 23, 42, 0.5); backdrop-filter: blur(2px); visibility: hidden; opacity: 0; pointer-events: none; transition: opacity var(--transition-slow), visibility var(--transition-slow); } .qs-sidebar-backdrop.is-visible { visibility: visible; opacity: 1; pointer-events: all; } /* ── Wrapper scroll horizontal pour les tableaux ── */ .qs-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ── Indicateur de glissement (caché par défaut, visible sur mobile via media query) ── */ .qs-scroll-hint { display: none; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-1) var(--space-4); font-size: var(--font-size-xs); color: var(--color-secondary-400); background: var(--color-secondary-50); border-bottom: 1px solid var(--color-border-light); font-style: italic; user-select: none; pointer-events: none; transition: opacity var(--transition-slow); } .qs-scroll-hint.is-fading { opacity: 0; } /* ── Breakpoint < md (767px) — équivalent Tailwind sm ── */ @media (max-width: 767px) { /* Sidebar : hors écran par défaut, overlay animé à l'ouverture */ .qs-sidebar { transform: translateX(-100%); width: 16rem !important; transition: transform var(--transition-slow); z-index: 40; } .qs-sidebar.is-mobile-open { transform: translateX(0); } /* Annule le mode réduit (is-collapsed) sur mobile */ .qs-sidebar.is-collapsed { width: 16rem !important; } .qs-sidebar.is-collapsed .qs-nav-label, .qs-sidebar.is-collapsed .qs-sidebar-text { display: unset !important; } .qs-sidebar.is-collapsed .qs-nav-item, .qs-sidebar.is-collapsed .qs-nav-btn { justify-content: flex-start !important; gap: var(--space-3) !important; } .qs-sidebar.is-collapsed .qs-nav-item.active, .qs-sidebar.is-collapsed .qs-nav-btn.active { box-shadow: inset 3px 0 0 var(--color-primary-light) !important; } .qs-sidebar.is-collapsed #admin-submenu { display: block !important; } /* Contenu principal : pas de marge gauche (sidebar en overlay) */ #qs-main, #qs-main.sidebar-collapsed { margin-left: 0 !important; } /* Titre de page : taille réduite sur mobile */ .qs-page-title { font-size: var(--font-size-lg); } /* Tableaux : scroll horizontal + indicateur */ .qs-scroll-hint { display: flex; } .qs-table-scroll table { width: max-content; min-width: 100%; } /* Zones de clic touch-friendly (44px minimum) */ .qs-nav-item, .qs-nav-btn, .qs-nav-subitem { min-height: 44px; } .btn { min-height: 44px; } .btn-sm { min-height: 40px; } } /* ── Très petit écran (<480px) : vue cartes + formulaires ── */ @media (max-width: 479px) { /* Tableau → cartes empilées */ table[data-table-interactive] { display: block; } table[data-table-interactive] thead { display: none; } table[data-table-interactive] tbody { display: block; padding: var(--space-3); } table[data-table-interactive] tbody tr { display: block; margin-bottom: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-3); background: var(--color-surface); box-shadow: var(--shadow-sm); animation: fadeInUp 0.25s ease both; } table[data-table-interactive] tbody td { display: flex; justify-content: space-between; align-items: center; padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border-light); font-size: var(--font-size-sm); gap: var(--space-3); text-align: right; min-height: unset; } table[data-table-interactive] tbody td:last-child { border-bottom: none; padding-bottom: 0; } /* Libellé de colonne injecté via JS (data-label) */ table[data-table-interactive] tbody td[data-label]::before { content: attr(data-label); font-size: var(--font-size-xs); font-weight: 600; color: var(--color-secondary-400); text-transform: uppercase; letter-spacing: 0.04em; text-align: left; flex-shrink: 0; white-space: nowrap; } /* Cellule d'actions (sans data-label) : boutons alignés à droite */ table[data-table-interactive] tbody td:not([data-label]) { justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2); } /* Ligne "aucun résultat" : affichage normal centré */ table[data-table-interactive] .qs-ti-empty-row { display: block; } table[data-table-interactive] .qs-ti-empty-row td { display: block; text-align: center; border: none; } table[data-table-interactive] .qs-ti-empty-row td::before { display: none; } /* Pas de scroll horizontal en mode carte */ .qs-table-scroll { overflow-x: visible; } .qs-scroll-hint { display: none !important; } /* Toolbar recherche : mode colonne */ .qs-ti-toolbar { flex-direction: column; align-items: stretch; } .qs-ti-search-wrap { max-width: 100%; } .qs-ti-counter { margin-left: 0; text-align: right; } /* Grilles de formulaires → colonne unique */ form .grid { grid-template-columns: 1fr !important; } } /* ── Lien retour pages admin ────────────────────────────────── */ .admin-back-link { display: inline-flex; align-items: center; gap: 4px; font-size: var(--font-size-sm); font-weight: 500; color: var(--color-text-muted); text-decoration: none; margin-bottom: var(--space-5); transition: color var(--transition-base); } .admin-back-link:hover { color: var(--color-primary); } /* ── Page d'accueil Administration ─────────────────────────── */ .admin-hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-4); margin-top: var(--space-2); } .admin-hub-card { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5) var(--space-5); background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-xl); text-decoration: none; color: var(--color-secondary); transition: box-shadow var(--transition-base), border-color var(--transition-base), transform var(--transition-base); } .admin-hub-card:hover { border-color: var(--color-primary); box-shadow: 0 4px 20px rgba(59, 110, 234, 0.10); transform: translateY(-2px); } .admin-hub-icon { flex-shrink: 0; width: 52px; height: 52px; border-radius: var(--radius-lg); background: rgba(59, 110, 234, 0.08); color: var(--color-primary); display: flex; align-items: center; justify-content: center; transition: background var(--transition-base); } .admin-hub-card:hover .admin-hub-icon { background: rgba(59, 110, 234, 0.15); } .admin-hub-body { flex: 1; min-width: 0; } .admin-hub-title { font-size: var(--font-size-base); font-weight: 600; color: var(--color-secondary); margin-bottom: 2px; } .admin-hub-desc { font-size: var(--font-size-sm); color: var(--color-secondary-400); line-height: 1.4; } .admin-hub-arrow { flex-shrink: 0; color: var(--color-secondary-400); transition: color var(--transition-base), transform var(--transition-base); } .admin-hub-card:hover .admin-hub-arrow { color: var(--color-primary); transform: translateX(3px); } /* === SIDEBAR LOGOUT BUTTON === */ .qs-logout-btn { background: transparent; border: 0; padding: 0; cursor: pointer; font-size: var(--font-size-xs); color: var(--color-secondary-500); transition: color var(--transition-base); } .qs-logout-btn:hover { color: var(--color-danger); } /* === BOUTONS D'ACTION TABLEAU === */ .tbl-action { display: inline-flex; align-items: center; font-size: var(--font-size-xs); font-weight: 500; padding: 3px 8px; border-radius: var(--radius-sm); border: none; background: transparent; cursor: pointer; text-decoration: none; white-space: nowrap; line-height: 1.5; transition: background var(--transition-fast), color var(--transition-fast); } .tbl-action-view { color: var(--color-secondary-400); } .tbl-action-view:hover { color: var(--color-secondary); background: var(--color-secondary-100); } .tbl-action-edit { color: var(--color-primary); } .tbl-action-edit:hover { color: var(--color-primary-dark); background: var(--color-primary-50); } .tbl-action-delete { color: var(--color-danger); } .tbl-action-delete:hover { color: var(--color-danger-dark); background: var(--color-danger-bg); } .tbl-action-warning { color: var(--color-accent-dark); } .tbl-action-warning:hover { color: #92400e; background: var(--color-warning-bg); } .tbl-action-success { color: var(--color-success); } .tbl-action-success:hover { color: #047857; background: var(--color-success-bg); } @media (max-width: 640px) { .admin-hub-grid { grid-template-columns: 1fr; } } /* === FLATPICKR — Thème Quickswing === */ .flatpickr-calendar { font-family: var(--font-body) !important; font-size: var(--font-size-sm) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-lg) !important; background: var(--color-surface) !important; padding: 12px !important; width: 308px !important; } .flatpickr-calendar.arrowTop::before, .flatpickr-calendar.arrowTop::after { border-bottom-color: var(--color-border) !important; } .flatpickr-calendar.arrowBottom::before, .flatpickr-calendar.arrowBottom::after { border-top-color: var(--color-border) !important; } /* Header mois/année */ .flatpickr-months { align-items: center; padding-bottom: 8px; border-bottom: 1px solid var(--color-border-light); margin-bottom: 4px; } .flatpickr-month { height: 32px !important; color: var(--color-secondary) !important; fill: var(--color-secondary) !important; } .flatpickr-current-month { font-size: var(--font-size-sm) !important; font-weight: 600 !important; color: var(--color-secondary) !important; padding-top: 4px !important; } .flatpickr-current-month .flatpickr-monthDropdown-months { font-family: var(--font-body) !important; font-size: var(--font-size-sm) !important; font-weight: 600 !important; color: var(--color-secondary) !important; background: transparent !important; border: none !important; padding: 2px 4px !important; cursor: pointer; -webkit-appearance: none; appearance: none; } .flatpickr-current-month .numInputWrapper { width: 56px !important; } .flatpickr-current-month .numInputWrapper input { font-family: var(--font-body) !important; font-size: var(--font-size-sm) !important; font-weight: 600 !important; color: var(--color-secondary) !important; } .flatpickr-prev-month, .flatpickr-next-month { color: var(--color-secondary-400) !important; fill: var(--color-secondary-400) !important; padding: 4px 8px !important; border-radius: var(--radius-sm) !important; transition: color var(--transition-fast), background var(--transition-fast); height: 32px !important; top: 0 !important; display: flex !important; align-items: center !important; } .flatpickr-prev-month:hover, .flatpickr-next-month:hover { color: var(--color-primary) !important; fill: var(--color-primary) !important; background: var(--color-primary-50) !important; } .flatpickr-prev-month svg, .flatpickr-next-month svg { width: 14px !important; height: 14px !important; } /* Jours de la semaine */ .flatpickr-weekdays { margin-bottom: 2px; } span.flatpickr-weekday { font-size: var(--font-size-xs) !important; font-weight: 600 !important; color: var(--color-secondary-400) !important; text-transform: uppercase; letter-spacing: 0.04em; } /* Grille des jours */ .flatpickr-day { font-size: var(--font-size-sm) !important; color: var(--color-secondary) !important; border-radius: var(--radius-sm) !important; height: 36px !important; line-height: 36px !important; max-width: 36px !important; transition: background var(--transition-fast), color var(--transition-fast); border: none !important; } .flatpickr-day:hover { background: var(--color-primary-50) !important; color: var(--color-primary) !important; } .flatpickr-day.today { border: 1.5px solid var(--color-primary) !important; color: var(--color-primary) !important; font-weight: 600 !important; background: transparent !important; } .flatpickr-day.today:hover { background: var(--color-primary-50) !important; } .flatpickr-day.selected, .flatpickr-day.selected:hover { background: var(--color-primary) !important; color: #fff !important; border-color: var(--color-primary) !important; font-weight: 600 !important; } .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--color-secondary-300) !important; } .flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover { color: var(--color-secondary-200) !important; cursor: not-allowed; } /* Input altInput (ce que voit l'utilisateur) */ .flatpickr-input.flatpickr-input ~ .flatpickr-input[readonly] { cursor: pointer; } /* Bouton "Aujourd'hui" si activé */ .flatpickr-day.today.selected { background: var(--color-primary) !important; color: #fff !important; } } /* ================================================================ Widget spinner numérique stylisé (.qs-num-spin) Layout géré en inline styles — CSS uniquement pour hover/focus ================================================================ */ .qs-num-spin-btn { transition: background 0.12s, color 0.12s; user-select: none; } .qs-num-spin-btn:first-child:hover { background: #e5e7eb !important; color: #374151 !important; } .qs-num-spin-btn:first-child:active { background: #d1d5db !important; } .qs-num-spin-btn:last-child:hover { background: #dbeafe !important; color: #1d4ed8 !important; } .qs-num-spin-btn:last-child:active { background: #bfdbfe !important; } .qs-num-spin input[type="number"]:focus { outline: none; background: #eff6ff; } .qs-num-spin input[type="number"] { -moz-appearance: textfield; appearance: textfield; } .qs-num-spin input[type="number"]::-webkit-inner-spin-button, .qs-num-spin input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }