/* dashboard.css -- Origin Education Dashboard Design System
H-care style: White sidebar, teal primary, warm surfaces.
Typography: DM Sans (display) + Inter (body).
Clean, solid, professional. No glassmorphism. */
/* ===== TOKENS ===== */
:root {
--font-display: 'DM Sans', 'Helvetica Neue', sans-serif;
--font-body: 'Inter', 'Helvetica Neue', sans-serif;
--text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem;
--text-lg: 1.125rem; --text-xl: 1.5rem; --text-2xl: 2rem; --text-3xl: 2.5rem;
--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; --space-16: 4rem;
--radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem;
--radius-xl: 1rem; --radius-2xl: 1.25rem; --radius-full: 9999px;
--transition-fast: 150ms ease; --transition-base: 200ms ease; --transition-slow: 300ms ease;
--sidebar-width: 240px;
--color-bg: #F8F6F3;
--color-surface: #FFFFFF;
--color-surface-2: #F2F0ED;
--color-surface-offset: #E8E5E0;
--color-text: #0A1628;
--color-text-muted: #5A6578;
--color-text-faint: #9CA3AF;
--color-text-inverse: #FFFFFF;
--color-primary: #0D7377;
--color-primary-hover: #0A5C5F;
--color-primary-active: #084547;
--color-primary-light: #14B8A6;
--color-primary-bg: rgba(13, 115, 119, 0.08);
--color-orange: #E8860C;
--color-divider: #E8E5E0;
--color-border: #D4D0CB;
--color-accent: #0D7377;
--color-accent-hover: #0A5C5F;
--color-accent-bg: rgba(13, 115, 119, 0.08);
--color-accent-purple: #7C3AED;
--color-accent-green: #16A34A;
--color-accent-orange: #D97706;
--color-accent-coral: #F472B6;
--color-accent-blue: #3B82F6;
--color-accent-teal: #14B8A6;
--color-sidebar: #FFFFFF;
--color-sidebar-hover: #F5F5F5;
--color-sidebar-active: rgba(13, 115, 119, 0.08);
--color-sidebar-text: #6B7280;
--color-sidebar-text-active: #0D7377;
--color-sidebar-border: #E5E7EB;
--color-error: #DC2626; --color-error-bg: #FEF2F2;
--color-success: #16A34A; --color-success-bg: #F0FDF4;
--color-warning: #D97706; --color-warning-bg: #FFFBEB;
--color-info: #3B82F6; --color-info-bg: #EFF6FF;
--shadow-card: 0 1px 3px rgba(0,0,0,0.04);
--shadow-hover: 0 8px 24px rgba(13, 115, 119, 0.12);
--shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
--shadow-md: 0 4px 12px rgba(0,0,0,0.06);
--shadow-lg: 0 12px 32px rgba(0,0,0,0.10);
--shadow-xl: 0 20px 48px rgba(0,0,0,0.12);
--radius-card: 16px;
--radius-btn: 10px;
--radius-icon: 14px;
--ease: cubic-bezier(0.16, 1, 0.3, 1);
--ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
--kpi-sessions: rgba(13, 115, 119, 0.10);
--kpi-sessions-icon: #0D7377;
--kpi-apprenants: rgba(13, 115, 119, 0.07);
--kpi-apprenants-icon: #0A5C5F;
--kpi-entreprises: rgba(13, 115, 119, 0.05);
--kpi-entreprises-icon: #14B8A6;
--kpi-attestations: rgba(13, 115, 119, 0.08);
--kpi-attestations-icon: #0D7377;
--kpi-satisfaction: rgba(13, 115, 119, 0.06);
--kpi-satisfaction-icon: #0A5C5F;
--glass-bg: var(--color-surface);
--glass-border: var(--color-divider);
--glass-blur: 0px;
}
/* ===== DARK MODE — neutral warm grays + teal accent ===== */
[data-theme="dark"] {
--color-bg: #17191E;
--color-surface: #1F222A;
--color-surface-2: #272B34;
--color-surface-offset: #323640;
--color-divider: #2A2E37;
--color-border: #323642;
--color-text: #E6E9EF;
--color-text-muted: #9BA3B0;
--color-text-faint: #6B7280;
--color-text-inverse: #FFFFFF;
--color-primary: #4FD1C5;
--color-primary-hover: #7EDDD3;
--color-primary-active: #99F6E4;
--color-primary-light: #4FD1C5;
--color-primary-bg: rgba(79, 209, 197, 0.10);
--color-orange: #F59E0B;
--color-accent: #4FD1C5;
--color-accent-hover: #7EDDD3;
--color-accent-bg: rgba(79, 209, 197, 0.10);
--color-sidebar: #14161B;
--color-sidebar-hover: #1E212A;
--color-sidebar-active: rgba(79, 209, 197, 0.10);
--color-sidebar-text: #8B94A3;
--color-sidebar-text-active: #4FD1C5;
--color-sidebar-border: #23262F;
--color-error: #F87171; --color-error-bg: rgba(248, 113, 113, 0.08);
--color-success: #4ADE80; --color-success-bg: rgba(74, 222, 128, 0.08);
--color-warning: #FBBF24; --color-warning-bg: rgba(251, 191, 36, 0.08);
--color-info: #60A5FA; --color-info-bg: rgba(96, 165, 250, 0.08);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
--shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.4);
--shadow-xl: 0 20px 44px rgba(0, 0, 0, 0.5);
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
--shadow-hover: 0 8px 24px rgba(79, 209, 197, 0.18);
--kpi-sessions: rgba(79, 209, 197, 0.10);
--kpi-sessions-icon: #4FD1C5;
--kpi-apprenants: rgba(79, 209, 197, 0.08);
--kpi-apprenants-icon: #7EDDD3;
--kpi-entreprises: rgba(124, 58, 237, 0.10);
--kpi-entreprises-icon: #A78BFA;
--kpi-attestations: rgba(245, 158, 11, 0.10);
--kpi-attestations-icon: #FBBF24;
--kpi-satisfaction: rgba(236, 72, 153, 0.10);
--kpi-satisfaction-icon: #F472B6;
--glass-bg: rgba(31, 34, 42, 0.85);
--glass-border: rgba(255, 255, 255, 0.06);
--glass-blur: 12px;
}
/* ===== DARK MODE — comprehensive overrides ===== */
/* Sidebar — rich deep teal */
[data-theme="dark"] .sidebar-logo-mark { background: #4FD1C5 }
[data-theme="dark"] .logo-origin { color: #4FD1C5 }
[data-theme="dark"] .logo-education { color: #E8ECEF }
[data-theme="dark"] .btn-cta-sidebar { background: linear-gradient(135deg, #4FD1C5, #38B2AC); box-shadow: 0 2px 12px rgba(79,209,197,0.25) }
[data-theme="dark"] .btn-cta-sidebar:hover { box-shadow: 0 4px 20px rgba(79,209,197,0.35) }
[data-theme="dark"] .sidebar-footer { border-top-color: var(--color-border) }
/* Topbar */
[data-theme="dark"] .dashboard-topbar { background: var(--color-surface); border-bottom-color: var(--color-border) }
[data-theme="dark"] .topbar-notif-btn:hover { background: var(--color-surface-2) }
[data-theme="dark"] .topbar-search-icon { color: var(--color-text-muted) }
/* Mesh background */
[data-theme="dark"] .dashboard-mesh::before { opacity: 0.4 }
[data-theme="dark"] .dashboard-mesh::after { opacity: 0.1 }
/* Nav items */
[data-theme="dark"] .nav-item { color: var(--color-sidebar-text) }
[data-theme="dark"] .nav-item:hover { background: var(--color-sidebar-hover); color: #E8ECEF }
[data-theme="dark"] .nav-item.active { background: var(--color-sidebar-active); color: var(--color-sidebar-text-active); box-shadow: inset 3px 0 0 #4FD1C5 }
/* Tables — alternating teal-tinted rows */
[data-theme="dark"] .data-table { color: var(--color-text) }
[data-theme="dark"] .data-table th { color: var(--color-text-muted); border-bottom-color: var(--color-border) }
[data-theme="dark"] .data-table td { border-bottom-color: var(--color-border) }
[data-theme="dark"] .data-table tbody tr:nth-child(even) td { background: rgba(79, 209, 197, 0.02) }
[data-theme="dark"] .data-table tr:hover td { background: rgba(79, 209, 197, 0.06) }
/* Cards — teal glass borders */
[data-theme="dark"] .card { background: var(--color-surface); box-shadow: var(--shadow-card); border: 1px solid rgba(79, 209, 197, 0.06) }
[data-theme="dark"] .card:hover { border-color: rgba(79, 209, 197, 0.12) }
[data-theme="dark"] .card-title { color: var(--color-text) }
[data-theme="dark"] .card-header { border-bottom-color: var(--color-border) }
/* Page header */
[data-theme="dark"] .page-title { color: var(--color-text) }
/* Filter bar */
[data-theme="dark"] .filter-bar { background: var(--color-surface); border-color: var(--color-border) }
[data-theme="dark"] .filter-bar select { background: var(--color-surface-2); border-color: var(--color-border); color: var(--color-text) }
/* Modals */
[data-theme="dark"] .modal-overlay { background: rgba(0, 0, 0, 0.7) }
[data-theme="dark"] .modal { background: var(--color-surface); box-shadow: var(--shadow-xl); border: 1px solid rgba(79, 209, 197, 0.06) }
[data-theme="dark"] .modal-header { border-bottom-color: var(--color-border) }
[data-theme="dark"] .modal-title { color: var(--color-text) }
[data-theme="dark"] .modal-footer { border-top-color: var(--color-border); background: var(--color-surface) }
[data-theme="dark"] .modal-close { color: var(--color-text-muted) }
[data-theme="dark"] .modal-close:hover { color: var(--color-text); background: var(--color-surface-2) }
/* Buttons dark */
[data-theme="dark"] .btn-primary { background: linear-gradient(135deg, #4FD1C5, #38B2AC); box-shadow: 0 2px 10px rgba(79,209,197,0.2) }
[data-theme="dark"] .btn-primary:hover { box-shadow: 0 4px 18px rgba(79,209,197,0.3) }
[data-theme="dark"] .btn-secondary { background: var(--color-surface-2); color: var(--color-text); border-color: var(--color-border) }
[data-theme="dark"] .btn-secondary:hover { border-color: rgba(79, 209, 197, 0.2); background: rgba(79, 209, 197, 0.06) }
[data-theme="dark"] .btn-ghost { color: var(--color-text-muted) }
[data-theme="dark"] .btn-ghost:hover { background: var(--color-surface-2); color: var(--color-text) }
[data-theme="dark"] .btn-danger { background: rgba(248,113,113,0.10); color: #F87171; border: 1px solid rgba(248,113,113,0.12) }
/* Empty state */
[data-theme="dark"] .empty-state-text { color: var(--color-text-muted) }
/* Session detail */
[data-theme="dark"] .session-detail-card { background: var(--color-surface) }
[data-theme="dark"] .session-detail-grid { color: var(--color-text) }
[data-theme="dark"] .detail-label { color: var(--color-text-muted) }
[data-theme="dark"] .detail-value { color: var(--color-text) }
/* Presence toggle */
[data-theme="dark"] .btn-toggle-present { border-color: var(--color-border) }
/* Form sections */
[data-theme="dark"] .form-section { border-bottom-color: var(--color-border) }
[data-theme="dark"] .form-section-title { color: #4FD1C5 }
[data-theme="dark"] .form-hint { color: var(--color-text-faint) }
[data-theme="dark"] .form-notice { background: rgba(251,191,36,0.08); color: #FBBF24 }
/* Schedule */
[data-theme="dark"] .schedule-slot { background: var(--color-surface-2); border-color: var(--color-border) }
[data-theme="dark"] .schedule-date,
[data-theme="dark"] .schedule-time { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text) }
[data-theme="dark"] .btn-add-slot { border-color: rgba(79,209,197,0.3); color: #4FD1C5 }
[data-theme="dark"] .btn-add-slot:hover { background: rgba(79,209,197,0.08) }
/* Doc upload */
[data-theme="dark"] .doc-upload-zone { border-color: var(--color-border) }
[data-theme="dark"] .doc-upload-zone:hover { border-color: #4FD1C5; background: rgba(79,209,197,0.04) }
[data-theme="dark"] .doc-upload-text { color: var(--color-text-muted) }
[data-theme="dark"] .doc-upload-link { color: #4FD1C5 }
/* Success popup — elegant with teal gradient bar visible */
[data-theme="dark"] .success-popup { background: var(--color-surface); border: 1px solid rgba(79, 209, 197, 0.08) }
[data-theme="dark"] .success-popup-title { color: var(--color-text) }
[data-theme="dark"] .success-popup-text { color: var(--color-text-muted) }
[data-theme="dark"] .success-popup-text strong { color: #4FD1C5 }
/* Formation preview */
[data-theme="dark"] .formation-preview { background: rgba(79,209,197,0.06); border-color: rgba(79,209,197,0.15) }
[data-theme="dark"] .fp-badge { color: #4FD1C5; background: rgba(79,209,197,0.12) }
[data-theme="dark"] .fp-title { color: var(--color-text) }
[data-theme="dark"] .fp-label { color: #4FD1C5 }
[data-theme="dark"] .fp-val { color: var(--color-text-muted) }
/* New entreprise inline */
[data-theme="dark"] .new-ent-inline { background: var(--color-surface-2); border-color: var(--color-border) }
/* Entreprise card */
[data-theme="dark"] .ent-row { border-bottom-color: var(--color-border) }
[data-theme="dark"] .ent-row:hover { background: var(--color-surface-2) }
[data-theme="dark"] .ent-name { color: var(--color-text) }
[data-theme="dark"] .ent-avatar { background: rgba(79,209,197,0.12); color: #4FD1C5 }
[data-theme="dark"] .ent-count { color: #4FD1C5 }
/* Toast — dark surface with teal accent */
[data-theme="dark"] #toast-container .toast { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-md); border: 1px solid rgba(79, 209, 197, 0.1) }
/* Highlight card — stays same in dark */
/* Calendar dark */
[data-theme="dark"] .gcal-week-title { color: var(--color-text) }
[data-theme="dark"] .gcal-month-card { background: var(--color-surface); border: 1px solid rgba(79, 209, 197, 0.06) }
[data-theme="dark"] .gcal-month-title { color: var(--color-text) }
[data-theme="dark"] .gcal-mday { color: var(--color-text-muted) }
[data-theme="dark"] .gcal-mday-ev { background: rgba(79,209,197,0.12); color: #4FD1C5 }
[data-theme="dark"] .gcal-mday-ev:hover { background: rgba(79,209,197,0.2) }
[data-theme="dark"] .gcal-mday-has:hover { background: var(--color-surface-2) }
[data-theme="dark"] .gcal-mday-today > span { background: #4FD1C5 }
[data-theme="dark"] .gcal-week-grid { background: var(--color-surface); border: 1px solid rgba(79, 209, 197, 0.06) }
[data-theme="dark"] .gcal-time-col { border-right-color: var(--color-border) }
[data-theme="dark"] .gcal-time-header { border-bottom-color: var(--color-border) }
[data-theme="dark"] .gcal-wcol { border-right-color: var(--color-border) }
[data-theme="dark"] .gcal-wcol-header { border-bottom-color: var(--color-border) }
[data-theme="dark"] .gcal-wcol-num { color: var(--color-text) }
[data-theme="dark"] .gcal-wcol-today { background: rgba(79,209,197,0.04) }
[data-theme="dark"] .gcal-wcol-num-today { background: #4FD1C5 }
/* SF KPIs dark */
[data-theme="dark"] .sf-kpi { background: var(--color-surface); border: 1px solid rgba(79, 209, 197, 0.06) }
[data-theme="dark"] .sf-kpi::before { background: var(--color-border) }
[data-theme="dark"] .sf-kpi:nth-child(2)::before { background: linear-gradient(180deg, #4FD1C5, #38B2AC) }
[data-theme="dark"] .sf-kpi-val { color: var(--color-text) }
[data-theme="dark"] .sf-kpi-val.sf-kpi-active { color: #4FD1C5 }
/* SF Search + filters dark */
[data-theme="dark"] .sf-search { background: var(--color-surface); box-shadow: none; border: 1px solid var(--color-border) }
[data-theme="dark"] .sf-select { background: var(--color-surface); color: var(--color-text); box-shadow: none; border: 1px solid var(--color-border) }
/* SF Bottom cards dark */
[data-theme="dark"] .sf-bottom-card { background: var(--color-surface); border: 1px solid rgba(79, 209, 197, 0.06) }
[data-theme="dark"] .sf-bottom-header { border-bottom-color: var(--color-border) }
[data-theme="dark"] .sf-bottom-title { color: var(--color-text) }
[data-theme="dark"] .sf-upcoming-item:hover { background: var(--color-surface-2) }
[data-theme="dark"] .sf-upcoming-date { background: rgba(79,209,197,0.12) }
[data-theme="dark"] .sf-upcoming-day { color: #4FD1C5 }
[data-theme="dark"] .sf-upcoming-mon { color: #4FD1C5 }
[data-theme="dark"] .sf-upcoming-title { color: var(--color-text) }
[data-theme="dark"] .sf-doc-item:hover { background: var(--color-surface-2) }
[data-theme="dark"] .sf-doc-badge { background: linear-gradient(135deg, #4FD1C5, #38B2AC) }
[data-theme="dark"] .sf-doc-name { color: var(--color-text) }
/* Pending doc */
[data-theme="dark"] .doc-item-pending { border-color: var(--color-border) }
/* SF Side card dark */
[data-theme="dark"] .sf-side-card { background: var(--color-surface); border: 1px solid rgba(79, 209, 197, 0.06) }
[data-theme="dark"] .sf-side-header { border-bottom-color: var(--color-border) }
[data-theme="dark"] .sf-side-title { color: var(--color-text) }
[data-theme="dark"] .sf-side-count { background: linear-gradient(135deg, #4FD1C5, #38B2AC) }
[data-theme="dark"] .sf-list-item { border-bottom-color: var(--color-border) }
[data-theme="dark"] .sf-list-item:hover { background: var(--color-surface-2) }
[data-theme="dark"] .sf-list-date { background: rgba(79,209,197,0.12) }
[data-theme="dark"] .sf-list-day { color: #4FD1C5 }
[data-theme="dark"] .sf-list-mon { color: #4FD1C5 }
[data-theme="dark"] .sf-list-title { color: var(--color-text) }
/* Toggle dark */
[data-theme="dark"] .gcal-view-toggle { background: var(--color-surface) }
[data-theme="dark"] .gcal-vt-btn.active { background: linear-gradient(135deg, #4FD1C5, #38B2AC) }
[data-theme="dark"] .gcal-vt-btn:hover:not(.active) { background: var(--color-surface-2) }
[data-theme="dark"] .gcal-nav-btn { border-color: var(--color-border); color: var(--color-text-muted) }
[data-theme="dark"] .gcal-nav-btn:hover { background: rgba(79,209,197,0.08); border-color: #4FD1C5; color: #4FD1C5 }
[data-theme="dark"] .gcal-today-btn { background: rgba(79,209,197,0.12); color: #4FD1C5; border-color: rgba(79,209,197,0.2) }
[data-theme="dark"] .gcal-today-btn:hover { background: #4FD1C5; color: #14161B }
/* SF Card styles dark */
[data-theme="dark"] .sf-card { background: var(--color-surface); box-shadow: var(--shadow-sm); border: 1px solid rgba(79, 209, 197, 0.06) }
[data-theme="dark"] .sf-card:hover { border-color: rgba(79, 209, 197, 0.15); box-shadow: 0 4px 16px rgba(79, 209, 197, 0.08) }
[data-theme="dark"] .sf-card-title { color: var(--color-text) }
[data-theme="dark"] .sf-card-row { color: var(--color-text-muted) }
[data-theme="dark"] .sf-card-lieu { border-top-color: var(--color-border) }
/* ===== MES SESSIONS — formateur list ===== */
.ms-list { display: flex; flex-direction: column; gap: 10px }
.ms-card {
display: flex; align-items: center; gap: 14px;
background: #fff; border-radius: 14px; padding: 16px 20px;
box-shadow: var(--shadow-card); text-decoration: none; color: inherit;
transition: box-shadow 0.2s, transform 0.2s; border: 1px solid transparent
}
.ms-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); border-color: #D0EBEC }
[data-theme="dark"] .ms-card { background: var(--color-surface); border: 1px solid rgba(79, 209, 197, 0.06) }
.ms-card-left { flex-shrink: 0 }
.ms-card-center { flex: 1; min-width: 0 }
.ms-card-title {
font-family: var(--font-display); font-size: 15px; font-weight: 700;
color: #0A1628; margin-bottom: 4px
}
[data-theme="dark"] .ms-card-title { color: var(--color-text) }
.ms-card-meta {
display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; color: #9CA3AF
}
.ms-card-meta span { display: flex; align-items: center; gap: 3px }
.ms-card-meta span::after { content: "·"; margin-left: 3px; color: #D4D2CC }
.ms-card-meta span:last-child::after { display: none }
.ms-card-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0 }
/* Formation card styles (from public site) */
.formation-card {
background: #fff; border: 1px solid rgba(0,0,0,0.06); border-radius: 16px;
display: block; cursor: pointer; text-decoration: none;
color: inherit; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.06);
transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
min-width: 0; width: 100%;
}
[data-theme="dark"] .formation-card { background: var(--color-surface); border-color: rgba(79, 209, 197, 0.06) }
.formation-card:hover { transform: translateY(-6px); box-shadow: 0 12px 32px rgba(0,0,0,0.12); border-color: #0D7377 }
.fc-image-zone { position: relative; display: block; width: 100%; height: 180px; overflow: hidden }
.fc-bar {
position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 2;
transition: height 0.3s ease;
}
.formation-card:hover .fc-bar { height: 6px }
.fc-image { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease }
.formation-card:hover .fc-image { transform: scale(1.05) }
.fc-badge-overlay {
position: absolute; top: 12px; left: 12px; z-index: 2;
padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 600;
color: #fff; backdrop-filter: blur(8px); letter-spacing: 0.02em;
}
.fc-body { padding: 20px 24px 24px; display: block }
.formation-card h3 {
font-family: 'DM Sans', sans-serif; font-size: 16px; font-weight: 600;
color: #0A1628; margin-bottom: 8px; line-height: 1.3;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
[data-theme="dark"] .formation-card h3 { color: var(--color-text) }
.formation-card .desc {
font-size: 13px; color: #5A6578; margin-bottom: 16px; flex-grow: 1;
line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3;
-webkit-box-orient: vertical; overflow: hidden;
}
[data-theme="dark"] .formation-card .desc { color: var(--color-text-muted) }
.fc-footer {
display: flex; align-items: center; justify-content: space-between;
gap: 8px; margin-top: auto;
}
.fc-tools { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap }
.formation-card .cta-link {
font-size: 13px; font-weight: 600; color: #0D7377; text-decoration: none;
display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; flex-shrink: 0;
}
[data-theme="dark"] .formation-card .cta-link { color: #4FD1C5 }
.formation-card .cta-link svg { stroke: currentColor }
/* ===== MES SESSIONS — marketplace shop ===== */
/* Next session countdown banner */
.nxb-banner {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding: 16px 20px; margin-bottom: 18px; border-radius: 14px;
background: linear-gradient(135deg, #14B8A6, #0D7377);
color: #fff; text-decoration: none; transition: all 0.2s;
box-shadow: 0 4px 16px rgba(13,115,119,0.25);
}
.nxb-banner:hover { box-shadow: 0 6px 24px rgba(13,115,119,0.35); transform: translateY(-1px) }
[data-theme="dark"] .nxb-banner { background: linear-gradient(135deg, #4FD1C5, #38B2AC); box-shadow: 0 4px 20px rgba(79, 209, 197, 0.2) }
.nxb-left { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1 }
.nxb-icon {
width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0;
background: rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center;
}
.nxb-icon svg { stroke: #fff }
.nxb-info { min-width: 0; flex: 1 }
.nxb-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.7; margin-bottom: 2px }
.nxb-title {
font-family: var(--font-display); font-size: 15px; font-weight: 700;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nxb-meta { font-size: 11px; opacity: 0.7; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.nxb-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0 }
.nxb-countdown {
font-family: var(--font-display); font-weight: 700; border-radius: 10px;
padding: 6px 14px;
}
.nxb-live { background: rgba(255,255,255,0.2); font-size: 13px }
.nxb-soon { background: rgba(255,255,255,0.2); font-size: 13px }
.nxb-days {
font-size: 28px; line-height: 1; background: rgba(255,255,255,0.15);
padding: 8px 16px; border-radius: 12px;
}
.nxb-countdown-label { font-size: 11px; font-weight: 600; opacity: 0.7 }
.nxb-arrow {
width: 32px; height: 32px; border-radius: 8px; background: rgba(255,255,255,0.15);
display: flex; align-items: center; justify-content: center;
}
.nxb-arrow svg { stroke: #fff }
@media (max-width: 600px) {
.nxb-banner { flex-direction: column; align-items: flex-start; gap: 12px }
.nxb-right { width: 100%; justify-content: flex-end }
.nxb-days { font-size: 22px; padding: 6px 12px }
}
/* Filter tabs */
.mss-filters {
display: flex; gap: 6px; margin-bottom: 20px;
background: #fff; padding: 6px; border-radius: 12px;
box-shadow: var(--shadow-sm); border: 1px solid #F0EFEB;
}
[data-theme="dark"] .mss-filters { background: var(--color-surface); border-color: var(--color-border) }
.mss-filter-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 18px; border-radius: 8px; border: none; cursor: pointer;
font-family: var(--font-body); font-size: 13px; font-weight: 600;
background: transparent; color: #5A6578; transition: all 0.15s;
}
.mss-filter-btn:hover { background: #F0EFEB; color: #0A1628 }
.mss-filter-btn.active {
background: linear-gradient(135deg, #14B8A6, #0D7377); color: #fff;
box-shadow: 0 2px 8px rgba(13,115,119,0.25);
}
[data-theme="dark"] .mss-filter-btn { color: var(--color-text-muted) }
[data-theme="dark"] .mss-filter-btn:hover { background: var(--color-surface-2); color: var(--color-text) }
[data-theme="dark"] .mss-filter-btn.active { background: linear-gradient(135deg, #4FD1C5, #38B2AC) }
.mss-filter-count {
font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 6px;
background: rgba(0,0,0,0.06);
}
.mss-filter-btn.active .mss-filter-count { background: rgba(255,255,255,0.25) }
/* Cards grid — reuses .formation-card from pages.css */
/* Mes sessions — gradient KPI row */
.mss-kpi-row {
display: flex; align-items: center; gap: 0; margin-bottom: 20px;
padding: 0
}
.mss-kpi-flat {
flex: 1; text-align: center; padding: 10px 12px;
transition: transform 0.15s
}
.mss-kpi-flat:hover { transform: translateY(-2px) }
.mss-kpi-num {
font-family: var(--font-display); font-size: 36px; font-weight: 800;
display: block; line-height: 1;
background: linear-gradient(135deg, #14B8A6, #0D9488, #0D7377);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text
}
.mss-kpi-txt {
font-size: 10px; font-weight: 700; color: #6B7280;
text-transform: uppercase; letter-spacing: 0.08em; margin-top: 6px; display: block
}
.mss-kpi-sep {
width: 1px; height: 32px;
background: linear-gradient(180deg, transparent, #D1D5DB, transparent);
flex-shrink: 0
}
[data-theme="dark"] .mss-kpi-num {
background: linear-gradient(135deg, #5EEAD4, #2DD4BF, #14B8A6);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text
}
[data-theme="dark"] .mss-kpi-txt { color: var(--color-text-muted) }
[data-theme="dark"] .mss-kpi-sep { background: linear-gradient(180deg, transparent, var(--color-border), transparent) }
@media (max-width: 480px) {
.mss-kpi-num { font-size: 28px }
.mss-kpi-txt { font-size: 9px }
.mss-kpi-sep { height: 24px }
}
.mss-cards-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
@media (max-width: 1024px) { .mss-cards-grid { grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 600px) { .mss-cards-grid { grid-template-columns: 1fr } }
/* Import formation-card styles into dashboard context */
.mss-fc { box-shadow: 0 2px 8px rgba(0,0,0,0.06) }
.mss-fc:hover { transform: translateY(-6px); box-shadow: 0 12px 32px rgba(0,0,0,0.12); border-color: #0D7377 }
.mss-fc-done { opacity: 0.65 }
.mss-fc-done:hover { opacity: 1 }
.mss-fc-done .fc-image { filter: grayscale(0.5) }
.mss-fc-cancelled { border: 2px solid #FECACA !important; background: #FEF2F2 !important }
.mss-fc-cancelled .fc-image { filter: grayscale(0.6) saturate(0.5) }
.mss-fc-cancelled .fc-bar { background: #DC2626 !important }
.mss-fc-cancelled .fc-body h3 { text-decoration: line-through; color: #9B1C1C }
.mss-fc-cancelled .fc-body .desc { color: #B91C1C }
[data-theme="dark"] .mss-fc-cancelled { border-color: rgba(248,113,113,0.2) !important; background: rgba(248,113,113,0.06) !important }
[data-theme="dark"] .mss-fc-cancelled .fc-body h3 { color: #F87171 }
/* Modalite pill in footer */
.mss-mod-pill {
display: inline-flex; align-items: center; height: 32px;
padding: 0 10px; border-radius: 50px;
font-size: 11px; font-weight: 600; color: #0D7377;
background: #E8F4F5;
}
[data-theme="dark"] .mss-mod-pill { background: rgba(79,209,197,0.12); color: #4FD1C5 }
/* Google cal small in footer */
.mss-gcal-sm {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px; border-radius: 50%;
background: #F0EFEB; color: #5A6578; text-decoration: none;
transition: all 0.15s;
}
.mss-gcal-sm:hover { background: #E8F4F5; color: #0D7377 }
[data-theme="dark"] .mss-gcal-sm { background: var(--color-surface-2); color: var(--color-text-muted) }
.mss-gcal-sm svg { stroke: currentColor }
/* Responsive */
@media (max-width: 480px) {
.mss-filters { flex-wrap: wrap }
.mss-filter-btn { padding: 6px 12px; font-size: 12px }
}
/* ===== MES DOCUMENTS PAGE ===== */
.md-section {
background: #fff; border-radius: 14px; box-shadow: var(--shadow-card);
margin-bottom: 14px; overflow: hidden
}
[data-theme="dark"] .md-section { background: var(--color-surface); border: 1px solid rgba(79, 209, 197, 0.06) }
.md-section-header {
display: flex; align-items: center; gap: 10px;
padding: 14px 20px; border-bottom: 1px solid #F0EFEB
}
[data-theme="dark"] .md-section-header { border-bottom-color: var(--color-border) }
.md-section-icon {
width: 34px; height: 34px; border-radius: 10px;
background: linear-gradient(135deg, #E8F4F5, #D0EBEC);
display: flex; align-items: center; justify-content: center; flex-shrink: 0
}
[data-theme="dark"] .md-section-icon { background: rgba(79,209,197,0.12) }
.md-section-title {
font-family: var(--font-display); font-size: 14px; font-weight: 700;
color: #0A1628; margin: 0; flex: 1
}
[data-theme="dark"] .md-section-title { color: var(--color-text) }
.md-section-count {
font-size: 11px; font-weight: 700; color: #fff;
background: linear-gradient(135deg, #14B8A6, #0D9488);
padding: 2px 9px; border-radius: 10px
}
/* ===== MINI-DRIVE — Premium File Manager ===== */
.drive-tabs {
display: flex; gap: 0; padding: 0 28px;
background: var(--color-surface); border-bottom: 1px solid var(--color-divider);
}
[data-theme="dark"] .drive-tabs { border-color: var(--color-border) }
.drive-tab {
padding: 16px 22px; font-size: 13px; font-weight: 600; color: var(--color-text-faint);
text-decoration: none; border-bottom: 2.5px solid transparent;
transition: all 200ms cubic-bezier(0.16,1,0.3,1); cursor: pointer;
display: flex; align-items: center; gap: 8px;
}
.drive-tab svg { opacity: 0.5; transition: opacity 200ms ease; }
.drive-tab:hover { color: var(--color-text-muted); }
.drive-tab:hover svg { opacity: 0.7; }
.drive-tab.active { color: var(--color-primary); border-image: linear-gradient(90deg, #0D7377, #14B8A6) 1; }
.drive-tab.active svg { opacity: 1; }
[data-theme="dark"] .drive-tab.active { color: #4FD1C5; border-image: linear-gradient(90deg, #38B2AC, #4FD1C5) 1; }
.drive-tab-count {
font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-full);
min-width: 20px; text-align: center;
background: var(--color-primary-bg); color: var(--color-primary);
}
.drive-tab.active .drive-tab-count { background: linear-gradient(135deg, #0D7377, #14B8A6); color: #fff; }
[data-theme="dark"] .drive-tab-count { background: rgba(79,209,197,0.12); color: #4FD1C5 }
[data-theme="dark"] .drive-tab.active .drive-tab-count { background: linear-gradient(135deg, #38B2AC, #4FD1C5); color: #fff; }
.drive-toolbar {
display: flex; align-items: center; gap: 12px; padding: 16px 28px;
border-bottom: 1px solid var(--color-divider);
}
[data-theme="dark"] .drive-toolbar { border-color: var(--color-border) }
.drive-breadcrumb {
display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0;
font-size: 13px; color: var(--color-text-muted); font-family: var(--font-body);
}
.drive-breadcrumb a {
color: var(--color-primary); text-decoration: none; font-weight: 500;
padding: 2px 6px; border-radius: var(--radius-sm); transition: all 150ms ease;
}
.drive-breadcrumb a:hover { background: var(--color-primary-bg); }
.drive-breadcrumb svg { color: var(--color-divider); flex-shrink: 0 }
[data-theme="dark"] .drive-breadcrumb { color: var(--color-text-muted) }
[data-theme="dark"] .drive-breadcrumb a { color: #4FD1C5 }
.drive-btn {
display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px;
font-size: 12px; font-weight: 600; border-radius: var(--radius-lg); cursor: pointer;
border: 1.5px solid transparent; background: linear-gradient(135deg, #0D7377, #14B8A6);
color: #fff; font-family: var(--font-body);
transition: all 180ms cubic-bezier(0.16,1,0.3,1);
}
.drive-btn:hover {
background: var(--color-primary-bg); color: var(--color-primary);
border-color: var(--color-primary); transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(13,115,119,0.12);
}
.drive-btn.primary { background: linear-gradient(135deg, #0D7377, #14B8A6); color: #fff; border: 1.5px solid transparent; }
.drive-btn.primary:hover { background: linear-gradient(135deg, #0A5C5F, #0D7377); }
[data-theme="dark"] .drive-btn { background: rgba(79,209,197,0.08); border-color: #4FD1C5; color: #4FD1C5 }
[data-theme="dark"] .drive-btn:hover { background: linear-gradient(135deg, #38B2AC, #4FD1C5); color: #fff; border-color: transparent; }
/* Actions bar — Nouveau dossier + Upload buttons */
.drive-actions-bar {
display: flex; align-items: center; justify-content: flex-end; gap: 8px;
padding: 12px 20px; border-bottom: 1px solid var(--color-divider);
}
/* Drop zone */
.drive-dropzone {
margin: 12px 20px 16px; padding: 20px;
border: 2px dashed #D0EBEC; border-radius: 12px;
background: #FAFFFE; cursor: pointer;
transition: all 0.2s ease;
}
.drive-dropzone:hover { border-color: #0D7377; background: #E8F4F5; }
.drive-dropzone.drag-over { border-color: #0D7377; background: #D0EBEC; transform: scale(1.01); }
.drive-dropzone-inner {
display: flex; align-items: center; justify-content: center; gap: 10px;
color: #9CA3AF; font-size: 13px; font-weight: 500;
}
.drive-dropzone:hover .drive-dropzone-inner { color: #0D7377; }
.drive-dropzone.drag-over .drive-dropzone-inner { color: #0D7377; font-weight: 600; }
[data-theme="dark"] .drive-dropzone { border-color: rgba(79,209,197,0.2); background: rgba(79,209,197,0.03); }
[data-theme="dark"] .drive-dropzone:hover { border-color: #4FD1C5; background: rgba(79,209,197,0.08); }
[data-theme="dark"] .drive-dropzone.drag-over { border-color: #4FD1C5; background: rgba(79,209,197,0.15); }
[data-theme="dark"] .drive-dropzone-inner { color: #6B7280; }
[data-theme="dark"] .drive-dropzone:hover .drive-dropzone-inner,
[data-theme="dark"] .drive-dropzone.drag-over .drive-dropzone-inner { color: #4FD1C5; }
/* Upload button style */
.drive-btn-upload { background: linear-gradient(135deg, #0D7377, #14B8A6); color: #fff; border: 1.5px solid transparent; }
.drive-btn-upload:hover { background: linear-gradient(135deg, #0A5C5F, #0D7377); color: #fff; border-color: transparent; }
[data-theme="dark"] .drive-btn-upload { background: linear-gradient(135deg, #38B2AC, #4FD1C5); color: #fff; border-color: transparent; }
.drive-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
gap: 16px; padding: 24px 28px;
}
.drive-folder {
display: flex; flex-direction: column; align-items: center; gap: 10px;
padding: 24px 16px 20px; border-radius: var(--radius-card); cursor: pointer;
border: 1px solid var(--color-divider); background: var(--color-surface);
transition: all 200ms cubic-bezier(0.16,1,0.3,1); text-align: center;
position: relative; overflow: hidden;
}
.drive-folder::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: var(--drive-folder-color, linear-gradient(90deg, #0D7377, #14B8A6));
border-radius: var(--radius-card) var(--radius-card) 0 0;
opacity: 0.6; transition: opacity 200ms ease;
}
.drive-folder:hover {
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.drive-folder:hover::before { opacity: 1; }
.drive-folder.dnd-over {
border-color: var(--drive-folder-color, #0D7377) !important;
box-shadow: 0 0 0 3px rgba(13,115,119,0.10), 0 8px 24px rgba(0,0,0,0.08);
transform: translateY(-3px) scale(1.03);
}
[data-theme="dark"] .drive-folder {
background: #2A2F3A;
border-color: #3A4150;
box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
[data-theme="dark"] .drive-folder::before { opacity: 0.9 }
[data-theme="dark"] .drive-folder:hover {
background: #313745;
border-color: #4A5262;
box-shadow: 0 10px 28px rgba(0,0,0,0.45);
}
[data-theme="dark"] .drive-folder.dnd-over {
border-color: var(--drive-folder-color, #4FD1C5) !important;
box-shadow: 0 0 0 3px rgba(79,209,197,0.15), 0 10px 28px rgba(0,0,0,0.45);
}
[data-theme="dark"] .drive-folder-icon {
background: rgba(52, 211, 153, 0.12);
color: #34D399 !important;
}
[data-theme="dark"] .drive-folder-icon svg {
color: #34D399 !important;
stroke: #34D399 !important;
}
.drive-folder-icon {
width: 52px; height: 52px; border-radius: var(--radius-xl);
display: flex; align-items: center; justify-content: center;
transition: transform 200ms cubic-bezier(0.16,1,0.3,1);
}
.drive-folder:hover .drive-folder-icon { transform: scale(1.08); }
.drive-folder.dnd-over .drive-folder-icon { transform: scale(1.12); }
.drive-folder-name {
font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--color-text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; margin-top: 2px;
}
[data-theme="dark"] .drive-folder-name { color: var(--color-text) }
.drive-folder-count { font-size: 11px; color: var(--color-text-faint); font-family: var(--font-body); }
.drive-folder-menu {
position: absolute; top: 10px; right: 10px; background: none; border: none;
cursor: pointer; color: var(--color-text-faint); padding: 4px; border-radius: var(--radius-sm);
opacity: 0; transition: all 150ms ease;
}
.drive-folder:hover .drive-folder-menu { opacity: 1 }
.drive-folder-menu:hover { color: var(--color-primary); background: var(--color-primary-bg); }
.drive-file-list { padding: 4px 20px 24px }
.drive-file {
display: flex; align-items: center; gap: 14px;
padding: 12px 14px; border-radius: var(--radius-lg);
transition: all 180ms cubic-bezier(0.16,1,0.3,1);
margin-bottom: 2px; cursor: grab; user-select: none; border: 1px solid transparent;
}
.drive-file:active { cursor: grabbing; }
.drive-file.dnd-dragging { opacity: 0.35; transform: scale(0.97); }
.drive-file:hover { background: var(--color-surface-2); border-color: var(--color-divider); }
[data-theme="dark"] .drive-file:hover { background: var(--color-surface-2); border-color: var(--color-border); }
.drive-file-ext {
font-size: 9px; font-weight: 700; color: #fff; text-transform: uppercase;
padding: 6px 10px; border-radius: 8px; flex-shrink: 0; min-width: 40px;
text-align: center; letter-spacing: 0.5px;
background: linear-gradient(135deg, #0D7377, #14B8A6);
}
.drive-file-ext[data-ext="pdf"] { background: linear-gradient(135deg, #0A5C5F, #0D7377) }
.drive-file-ext[data-ext="doc"], .drive-file-ext[data-ext="docx"] { background: linear-gradient(135deg, #0D7377, #14B8A6) }
.drive-file-ext[data-ext="pptx"], .drive-file-ext[data-ext="ppt"] { background: linear-gradient(135deg, #0F766E, #2DD4BF) }
.drive-file-ext[data-ext="xls"], .drive-file-ext[data-ext="xlsx"] { background: linear-gradient(135deg, #115E59, #0D9488) }
.drive-file-ext[data-ext="jpg"], .drive-file-ext[data-ext="jpeg"], .drive-file-ext[data-ext="png"] { background: linear-gradient(135deg, #14B8A6, #5EEAD4) }
.drive-file-ext[data-ext="txt"] { background: linear-gradient(135deg, #134E4A, #0F766E) }
.drive-file-info { flex: 1; min-width: 0 }
.drive-file-name {
font-family: var(--font-body); font-size: 13.5px; font-weight: 500; color: var(--color-text); display: block;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-theme="dark"] .drive-file-name { color: var(--color-text) }
.drive-file-meta { font-size: 11px; color: var(--color-text-faint); display: block; margin-top: 3px }
.drive-file-actions {
display: flex; align-items: center; gap: 2px; flex-shrink: 0; opacity: 0;
transition: opacity 180ms ease;
}
.drive-file:hover .drive-file-actions { opacity: 1 }
.drive-file-btn {
background: none; border: none; cursor: pointer; color: var(--color-text-faint);
padding: 6px; border-radius: var(--radius-md); display: flex;
transition: all 180ms cubic-bezier(0.16,1,0.3,1);
}
.drive-file-btn:hover { color: var(--color-primary); background: var(--color-primary-bg); transform: translateY(-1px); }
.drive-file-btn.danger:hover { color: var(--color-error); background: var(--color-error-bg); }
[data-theme="dark"] .drive-file-btn:hover { color: #4FD1C5; background: rgba(79,209,197,0.12) }
[data-theme="dark"] .drive-file-btn.danger:hover { color: #F87171; background: rgba(248,113,113,0.12) }
/* Drag & Drop */
.dnd-ghost {
position: fixed; z-index: 10000; pointer-events: none;
background: var(--color-surface); border: 1.5px solid var(--color-primary);
border-radius: var(--radius-lg); padding: 10px 18px;
box-shadow: 0 12px 32px rgba(13,115,119,0.20);
font-size: 12.5px; font-weight: 600; font-family: var(--font-body);
color: var(--color-primary); display: flex; align-items: center; gap: 8px;
opacity: 0.95; transform: rotate(-1.5deg);
max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.dnd-ghost svg { flex-shrink: 0; }
.drive-breadcrumb a.dnd-bc-over {
background: var(--color-primary-bg); color: var(--color-primary);
border-radius: var(--radius-sm); padding: 2px 10px; text-decoration: none;
box-shadow: 0 0 0 2px var(--color-primary-bg);
}
[data-theme="dark"] .drive-breadcrumb a.dnd-bc-over {
background: rgba(20,184,166,0.12); color: #2DD4BF;
}
.drive-upload-zone {
border: 2px dashed var(--color-divider); border-radius: var(--radius-card);
padding: 32px 24px; display: flex; flex-direction: column; align-items: center;
gap: 8px; cursor: pointer; transition: all 200ms cubic-bezier(0.16,1,0.3,1);
margin: 8px 28px 28px;
}
.drive-upload-zone:hover { border-color: var(--color-primary); background: var(--color-primary-bg); }
.drive-upload-zone:hover svg { color: var(--color-primary); }
.drive-upload-zone.dragover { border-color: var(--color-primary); background: rgba(13,115,119,0.06); transform: scale(1.01); }
.drive-upload-zone svg { color: var(--color-text-faint); transition: color 200ms ease; }
.drive-upload-text { font-size: 13.5px; color: var(--color-text-muted); font-family: var(--font-body); }
.drive-upload-link {
color: var(--color-primary); font-weight: 600; cursor: pointer;
text-decoration: none; border-bottom: 1px dashed var(--color-primary);
}
.drive-upload-link:hover { border-bottom-style: solid; }
.drive-upload-hint { font-size: 11px; color: var(--color-text-faint); }
[data-theme="dark"] .drive-upload-zone { border-color: var(--color-border) }
[data-theme="dark"] .drive-upload-zone:hover { border-color: #4FD1C5; background: rgba(79,209,197,0.04) }
.drive-received-card {
display: flex; align-items: center; gap: 16px; padding: 18px 22px;
border-radius: var(--radius-card); border: 1px solid var(--color-divider);
background: var(--color-surface);
transition: all 200ms cubic-bezier(0.16,1,0.3,1); margin-bottom: 8px;
}
.drive-received-card:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,0.04); }
[data-theme="dark"] .drive-received-card { background: var(--color-surface-2); border-color: var(--color-border) }
.drive-received-icon {
width: 44px; height: 44px; border-radius: var(--radius-xl); display: flex;
align-items: center; justify-content: center; flex-shrink: 0;
}
.drive-received-icon.convention { background: linear-gradient(135deg, #E8F4F5, #D0EBEC); color: #0D7377 }
.drive-received-icon.contrat { background: linear-gradient(135deg, #E8F4F5, #C4E4E6); color: #0A5C5F }
.drive-received-icon.nda { background: linear-gradient(135deg, #D0EBEC, #B2DFE1); color: #0D7377 }
.drive-received-icon.support { background: linear-gradient(135deg, #E8F4F5, #D0EBEC); color: #11898D }
.drive-received-icon.autre { background: linear-gradient(135deg, #F0EFEB, #E8E6E1); color: #5A6578 }
[data-theme="dark"] .drive-received-icon.convention,
[data-theme="dark"] .drive-received-icon.contrat,
[data-theme="dark"] .drive-received-icon.nda,
[data-theme="dark"] .drive-received-icon.support { background: rgba(79,209,197,0.12); color: #4FD1C5 }
[data-theme="dark"] .drive-received-icon.autre { background: rgba(107,114,128,0.15); color: #9CA3AF }
.drive-received-info { flex: 1; min-width: 0 }
.drive-received-name {
font-family: var(--font-body); font-size: 13.5px; font-weight: 600; color: var(--color-text); display: block;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-theme="dark"] .drive-received-name { color: var(--color-text) }
.drive-received-meta { font-size: 11px; color: var(--color-text-faint); margin-top: 3px; display: block }
.drive-received-tag {
font-size: 10px; font-weight: 600; padding: 4px 12px; border-radius: var(--radius-full); flex-shrink: 0;
}
.drive-received-tag.convention { background: linear-gradient(135deg, #E8F4F5, #D0EBEC); color: #0D7377 }
.drive-received-tag.contrat { background: linear-gradient(135deg, #D0EBEC, #C4E4E6); color: #0A5C5F }
.drive-received-tag.nda { background: linear-gradient(135deg, #E8F4F5, #D0EBEC); color: #0D7377 }
.drive-received-tag.support { background: linear-gradient(135deg, #E8F4F5, #D0EBEC); color: #11898D }
.drive-received-tag.autre { background: #F0EFEB; color: #5A6578 }
[data-theme="dark"] .drive-received-tag.convention,
[data-theme="dark"] .drive-received-tag.contrat,
[data-theme="dark"] .drive-received-tag.nda,
[data-theme="dark"] .drive-received-tag.support { background: rgba(79,209,197,0.12); color: #4FD1C5 }
[data-theme="dark"] .drive-received-tag.autre { background: rgba(107,114,128,0.15); color: #9CA3AF }
.drive-empty {
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 60px 24px; text-align: center;
}
.drive-empty svg { color: var(--color-text-faint); margin-bottom: 16px; opacity: 0.5; }
[data-theme="dark"] .drive-empty svg { color: var(--color-border) }
.drive-empty-title {
font-family: var(--font-display); font-size: 16px; font-weight: 700;
color: var(--color-text); margin-bottom: 6px;
}
[data-theme="dark"] .drive-empty-title { color: var(--color-text) }
.drive-empty-text { font-size: 13px; color: var(--color-text-faint); max-width: 300px; line-height: 1.5; }
/* Storage indicator */
.drive-storage {
display: flex; align-items: center; gap: 12px; padding: 14px 28px;
border-top: 1px solid var(--color-divider);
}
.drive-storage-bar { flex: 1; height: 4px; background: var(--color-surface-2); border-radius: 4px; overflow: hidden; }
.drive-storage-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, #0D7377, #14B8A6); transition: width 500ms cubic-bezier(0.16,1,0.3,1); }
.drive-storage-text { font-size: 11px; color: var(--color-text-faint); font-family: var(--font-body); white-space: nowrap; }
[data-theme="dark"] .drive-storage { border-color: var(--color-border); }
/* Folder popup */
.dfp-color-btn { outline: none }
.dfp-color-btn:hover { transform: scale(1.12); box-shadow: 0 2px 8px rgba(0,0,0,0.15) }
.dfp-color-btn.active { border-color: #fff !important; box-shadow: 0 0 0 2px rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,0.1) }
.dfp-icon-btn { outline: none }
.dfp-icon-btn:hover { border-color: #D0EBEC !important; background: #F0FAF9 !important }
.dfp-icon-btn:hover svg { stroke: #0D7377 }
[data-theme="dark"] .dfp-color-btn.active { box-shadow: 0 0 0 2px rgba(255,255,255,0.2) }
[data-theme="dark"] .dfp-icon-btn { background: var(--color-surface-2) !important; border-color: var(--color-border) !important }
[data-theme="dark"] .dfp-icon-btn.active { background: rgba(79,209,197,0.1) !important; border-color: #4FD1C5 !important }
/* Legacy md-doc classes kept for other pages */
.md-doc-item {
display: flex; align-items: center; gap: 12px;
padding: 10px 20px; border-bottom: 1px solid #FAFAF8;
transition: background 0.12s
}
.md-doc-item:last-child { border-bottom: none }
.md-doc-item:hover { background: #F0FAF9 }
[data-theme="dark"] .md-doc-item:hover { background: var(--color-surface-2) }
.md-doc-ext {
font-size: 10px; font-weight: 700; color: #0D7377;
background: #E8F4F5; border-radius: 5px; padding: 3px 8px;
flex-shrink: 0; text-transform: uppercase
}
[data-theme="dark"] .md-doc-ext { background: rgba(79,209,197,0.12); color: #4FD1C5 }
.md-doc-info { flex: 1; min-width: 0 }
.md-doc-name {
font-size: 13px; font-weight: 500; color: #0A1628; display: block;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis
}
[data-theme="dark"] .md-doc-name { color: var(--color-text) }
.md-doc-meta { font-size: 11px; color: #9CA3AF; display: block; margin-top: 1px }
.md-doc-shared {
font-size: 10px; font-weight: 600; color: #0D7377;
background: linear-gradient(135deg, #E8F4F5, #D0EBEC);
padding: 2px 8px; border-radius: 6px; flex-shrink: 0
}
[data-theme="dark"] .md-doc-shared { background: rgba(79,209,197,0.12); color: #4FD1C5 }
.md-doc-download {
background: none; border: none; cursor: pointer; color: #9CA3AF;
padding: 4px; border-radius: 6px; display: flex; flex-shrink: 0;
transition: all 0.15s
}
.md-doc-download:hover { color: #0D7377; background: #E8F4F5 }
[data-theme="dark"] .md-doc-download:hover { color: #4FD1C5; background: rgba(79,209,197,0.12) }
.md-empty {
color: #9CA3AF; font-size: 13px; text-align: center; padding: 16px 20px
}
/* ===== SATISFACTION EDITOR ===== */
.sat-q-edit { margin-bottom: 8px }
.sat-q-edit-header {
display: flex; align-items: center; gap: 8px
}
.sat-q-num {
font-size: 12px; font-weight: 700; color: #0D7377;
min-width: 24px; text-align: center
}
.sat-q-input {
flex: 1; padding: 8px 12px; border: 1px solid #E8E6E1; border-radius: 8px;
font-size: 13px; font-family: var(--font-body)
}
.sat-q-input:focus { outline: none; border-color: #0D7377 }
[data-theme="dark"] .sat-q-input { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text) }
.sat-q-type {
padding: 8px 10px; border: 1px solid #E8E6E1; border-radius: 8px;
font-size: 12px; font-family: var(--font-body); background: #fff; min-width: 100px
}
[data-theme="dark"] .sat-q-type { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text) }
.sat-q-del {
background: none; border: none; color: #D4D2CC; cursor: pointer;
padding: 4px; border-radius: 4px; display: flex; transition: color 0.12s
}
.sat-q-del:hover { color: #DC2626 }
/* ===== DOCUMENT IMPORT POPUP — category grid ===== */
.doc-cat-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px
}
.doc-cat-btn {
display: flex; align-items: center; gap: 8px;
padding: 10px 14px; border: 1px solid #E8E6E1; border-radius: 10px;
background: #fff; color: #5A6578; font-size: 13px; font-weight: 500;
cursor: pointer; font-family: var(--font-body); transition: all 0.15s;
text-align: left
}
.doc-cat-btn:hover { border-color: #D0EBEC; background: #F0FAF9 }
.doc-cat-btn.active {
border-color: #0D7377; background: linear-gradient(135deg, #E8F4F5, #D0EBEC);
color: #0D7377; font-weight: 600
}
.doc-cat-btn svg { flex-shrink: 0 }
[data-theme="dark"] .doc-cat-btn { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text-muted) }
[data-theme="dark"] .doc-cat-btn.active { background: rgba(79,209,197,0.1); border-color: #4FD1C5; color: #4FD1C5 }
/* ===== EMARGEMENT PUBLIC PAGE ===== */
.emarg-page {
display: flex; align-items: center; justify-content: center;
min-height: 60vh; padding: 20px
}
.emarg-card {
background: #fff; border-radius: 20px; box-shadow: 0 20px 60px rgba(0,0,0,0.08);
padding: 32px; max-width: 420px; width: 100%
}
[data-theme="dark"] .emarg-card { background: var(--color-surface); border: 1px solid rgba(79, 209, 197, 0.06) }
.emarg-logo { display: flex; align-items: center; gap: 8px; margin-bottom: 20px }
.emarg-title {
font-family: var(--font-display); font-size: 22px; font-weight: 700;
color: #0A1628; margin: 0 0 16px
}
[data-theme="dark"] .emarg-title { color: var(--color-text) }
.emarg-session-info {
background: linear-gradient(135deg, #F0FAF9, #E8F4F5); border-radius: 12px;
padding: 14px 16px; margin-bottom: 20px
}
[data-theme="dark"] .emarg-session-info { background: rgba(79,209,197,0.06) }
.emarg-session-name { font-size: 15px; font-weight: 700; color: #0A1628; margin-bottom: 4px }
[data-theme="dark"] .emarg-session-name { color: var(--color-text) }
.emarg-session-meta { font-size: 12px; color: #5A6578; margin-bottom: 4px }
.emarg-slot-label { font-size: 12px; font-weight: 600; color: #0D7377 }
/* ===== EMARGEMENT TRACKING ===== */
.emarg-slot-card {
background: #FAFAF8; border: 1px solid #E8E6E1; border-radius: 12px;
margin-bottom: 10px; overflow: hidden;
}
[data-theme="dark"] .emarg-slot-card { background: var(--color-surface-2); border-color: var(--color-border) }
.emarg-slot-card.emarg-locked { border-color: #10B981; background: #F0FDF4 }
[data-theme="dark"] .emarg-slot-card.emarg-locked { border-color: #10B981; background: rgba(16,185,129,0.06) }
/* Clickable toggle header */
.emarg-slot-toggle {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 16px; cursor: pointer; transition: background 0.12s;
user-select: none;
}
.emarg-slot-toggle:hover { background: rgba(13,115,119,0.04) }
.emarg-slot-toggle-left { display: flex; align-items: center; gap: 8px }
.emarg-slot-toggle-right { display: flex; align-items: center; gap: 10px }
.emarg-chevron { transition: transform 0.2s; flex-shrink: 0; color: #9CA3AF }
.emarg-slot-name { font-size: 13px; font-weight: 600; color: #0A1628 }
[data-theme="dark"] .emarg-slot-name { color: var(--color-text) }
.emarg-count-present {
font-size: 12px; font-weight: 700; color: #0D7377;
background: rgba(13,115,119,0.08); padding: 2px 8px; border-radius: 6px;
}
.emarg-count-absent {
font-size: 11px; font-weight: 600; color: #DC2626;
background: #FDE8E8; padding: 2px 8px; border-radius: 6px;
}
/* Expandable body */
.emarg-slot-body { padding: 0 16px 16px }
.emarg-slot-actions { display: flex; gap: 6px; margin-bottom: 14px }
/* Apprenants table inside slot */
.emarg-apprenants-table {
width: 100%; border-collapse: collapse; font-size: 12px;
}
.emarg-apprenants-table th {
text-align: left; font-size: 11px; font-weight: 700; color: #9CA3AF;
text-transform: uppercase; letter-spacing: 0.3px;
padding: 6px 10px; border-bottom: 1px solid #E8E6E1;
}
[data-theme="dark"] .emarg-apprenants-table th { border-color: var(--color-border); color: var(--color-text-muted) }
.emarg-apprenants-table td {
padding: 8px 10px; border-bottom: 1px solid #F0EFEB; vertical-align: middle;
}
[data-theme="dark"] .emarg-apprenants-table td { border-color: var(--color-border) }
.emarg-apprenants-table tr:last-child td { border-bottom: none }
.emarg-row-present { background: rgba(16,185,129,0.04) }
.emarg-row-absent { background: rgba(220,38,38,0.02) }
[data-theme="dark"] .emarg-row-present { background: rgba(16,185,129,0.06) }
[data-theme="dark"] .emarg-row-absent { background: rgba(220,38,38,0.04) }
.emarg-stag-name { font-weight: 600; color: #0A1628 }
[data-theme="dark"] .emarg-stag-name { color: var(--color-text) }
.emarg-stag-time { color: #5A6578; font-size: 11px }
.emarg-status-badge {
display: inline-flex; align-items: center; gap: 4px;
font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px;
}
.emarg-status-badge.present { color: #10B981; background: rgba(16,185,129,0.1) }
.emarg-status-badge.absent { color: #DC2626; background: rgba(220,38,38,0.08) }
.emarg-manual-check {
padding: 4px; border-radius: 4px; opacity: 0.6; transition: opacity 0.15s;
}
.emarg-manual-check:hover:not(:disabled) { opacity: 1 }
.emarg-manual-check:disabled { opacity: 0.2; cursor: default }
.emarg-sig-img {
height: 28px; width: auto; border: 1px solid #E8E6E1; border-radius: 4px;
background: #fff; cursor: pointer; transition: transform 0.12s;
}
.emarg-sig-img:hover { transform: scale(1.1) }
.emarg-no-sig { font-size: 12px; color: #9CA3AF; text-align: center; padding: 8px 0; margin: 0 }
/* ===== FORMATEUR SESSION — emargement slots ===== */
.fmt-slot {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 14px; margin-bottom: 6px;
background: #FAFAF8; border: 1px solid #E8E6E1; border-radius: 10px;
gap: 10px
}
[data-theme="dark"] .fmt-slot { background: var(--color-surface-2); border-color: var(--color-border) }
.fmt-slot-info { flex: 1; min-width: 0 }
.fmt-slot-label { font-size: 13px; font-weight: 500; color: #0A1628 }
[data-theme="dark"] .fmt-slot-label { color: var(--color-text) }
.fmt-slot-actions { display: flex; gap: 6px; flex-shrink: 0 }
@media (max-width: 600px) {
.fmt-slot { flex-direction: column; align-items: flex-start }
.fmt-slot-actions { width: 100% }
}
/* ===== CROP MODAL ===== */
.crop-overlay {
position: fixed; inset: 0; z-index: 9999;
background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
display: flex; align-items: center; justify-content: center;
opacity: 0; transition: opacity 0.25s
}
.crop-overlay.open { opacity: 1 }
.crop-modal {
background: #fff; border-radius: 20px; padding: 0;
box-shadow: 0 20px 60px rgba(0,0,0,0.2); width: 360px; max-width: 95vw;
overflow: hidden;
transform: scale(0.9); transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1)
}
.crop-overlay.open .crop-modal { transform: scale(1) }
[data-theme="dark"] .crop-modal { background: var(--color-surface) }
.crop-header {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 20px; border-bottom: 1px solid #F0EFEB
}
[data-theme="dark"] .crop-header { border-bottom-color: var(--color-border) }
.crop-title {
font-family: var(--font-display); font-size: 16px; font-weight: 700;
color: #0A1628; margin: 0
}
[data-theme="dark"] .crop-title { color: var(--color-text) }
.crop-area {
position: relative; width: 280px; height: 280px;
margin: 20px auto; overflow: hidden; border-radius: 8px;
background: #0A1628
}
.crop-area canvas {
display: block; cursor: grab; width: 100%; height: 100%
}
.crop-circle {
position: absolute; inset: 0; pointer-events: none;
border-radius: 50%;
box-shadow: 0 0 0 2000px rgba(0,0,0,0.5);
border: 2px solid rgba(255,255,255,0.6)
}
.crop-controls {
display: flex; align-items: center; gap: 10px; padding: 0 40px 16px;
justify-content: center
}
.crop-zoom-label { font-size: 12px; color: #9CA3AF; font-weight: 600 }
.crop-zoom {
flex: 1; max-width: 200px; accent-color: #0D7377;
height: 4px; appearance: none; -webkit-appearance: none;
background: #E8E6E1; border-radius: 2px; outline: none
}
.crop-zoom::-webkit-slider-thumb {
-webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
background: linear-gradient(135deg, #14B8A6, #0D7377);
border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.2); cursor: pointer
}
[data-theme="dark"] .crop-zoom { background: var(--color-surface-2) }
.crop-actions {
display: flex; justify-content: flex-end; gap: 8px;
padding: 12px 20px; border-top: 1px solid #F0EFEB
}
[data-theme="dark"] .crop-actions { border-top-color: var(--color-border) }
/* ===== PROFIL PAGE ===== */
.profil-layout {
display: grid; grid-template-columns: 280px 1fr 1fr; gap: 20px; align-items: start
}
@media (max-width: 1024px) { .profil-layout { grid-template-columns: 280px 1fr; } }
@media (max-width: 768px) { .profil-layout { grid-template-columns: 1fr } }
/* Tabs */
.profil-tabs {
display: flex; flex-direction: row; border-bottom: 2px solid #E8E6E1;
gap: 0; margin-bottom: 24px; grid-column: 1 / -1
}
[data-theme="dark"] .profil-tabs { border-bottom-color: var(--color-border) }
.profil-tab {
padding: 12px 24px; cursor: pointer; font-weight: 600; font-size: 14px;
color: #9CA3AF; position: relative; transition: color 0.2s;
font-family: var(--font-body); border: none; background: none;
margin-bottom: -2px
}
.profil-tab:hover { color: #5A6578 }
[data-theme="dark"] .profil-tab:hover { color: var(--color-text-muted) }
.profil-tab.active {
color: #0D7377; border-bottom: 2px solid #0D7377
}
[data-theme="dark"] .profil-tab.active { color: #4FD1C5; border-bottom-color: #4FD1C5 }
/* Photo card */
.profil-photo-card {
background: #fff; border-radius: 16px; box-shadow: var(--shadow-card);
padding: 32px 24px; display: flex; flex-direction: column; align-items: center;
text-align: center; gap: 12px; border: 1px solid #E8E6E1
}
[data-theme="dark"] .profil-photo-card { background: var(--color-surface); border: 1px solid rgba(79, 209, 197, 0.06) }
.profil-photo-wrap {
width: 140px; height: 140px; border-radius: 50%; overflow: hidden;
flex-shrink: 0; border: 3px solid #E8E6E1; margin: 0 auto
}
[data-theme="dark"] .profil-photo-wrap { border-color: var(--color-border) }
.profil-photo-img { width: 100%; height: 100%; object-fit: cover }
.profil-photo-placeholder {
width: 100%; height: 100%;
background: linear-gradient(135deg, #14B8A6, #0D9488);
color: #fff; display: flex; align-items: center; justify-content: center;
font-size: 40px; font-weight: 700; font-family: var(--font-display)
}
.profil-photo-actions { margin-top: 4px }
.profil-photo-name {
font-family: var(--font-display); font-size: 16px; font-weight: 700; color: #0A1628;
margin-top: 16px
}
[data-theme="dark"] .profil-photo-name { color: var(--color-text) }
.profil-photo-role { font-size: 13px; color: #9CA3AF }
.profil-pub-badge {
font-size: 11px; font-weight: 600; color: #fff;
background: linear-gradient(135deg, #14B8A6, #0D9488);
padding: 3px 10px; border-radius: 10px; margin-top: 4px
}
/* Form card */
.profil-form-card {
background: #fff; border-radius: 16px; box-shadow: var(--shadow-card);
padding: 24px; border: 1px solid #E8E6E1
}
[data-theme="dark"] .profil-form-card { background: var(--color-surface); border: 1px solid rgba(79, 209, 197, 0.06) }
.profil-form-actions { padding-top: 16px; display: flex; justify-content: flex-end }
/* Accord publication — custom checkbox */
.profil-accord { margin-top: 4px }
.profil-accord-label {
display: flex; align-items: flex-start; gap: 12px; cursor: pointer
}
.profil-accord-label input { display: none }
.profil-accord-check {
width: 22px; height: 22px; border-radius: 6px; border: 2px solid #D4D2CC;
flex-shrink: 0; display: flex; align-items: center; justify-content: center;
transition: all 0.15s; margin-top: 2px
}
.profil-accord-label input:checked + .profil-accord-check {
background: linear-gradient(135deg, #14B8A6, #0D9488);
border-color: #0D7377
}
.profil-accord-label input:checked + .profil-accord-check::after {
content: ''; display: block; width: 6px; height: 10px;
border: solid #fff; border-width: 0 2px 2px 0;
transform: rotate(45deg); margin-top: -2px
}
[data-theme="dark"] .profil-accord-check { border-color: var(--color-border) }
[data-theme="dark"] .profil-accord-label input:checked + .profil-accord-check {
background: linear-gradient(135deg, #14B8A6, #0D7377); border-color: #14B8A6
}
.profil-accord-text { font-size: 13px; color: #5A6578; line-height: 1.5 }
.profil-accord-text strong { color: #0A1628; font-weight: 600 }
[data-theme="dark"] .profil-accord-text { color: var(--color-text-muted) }
[data-theme="dark"] .profil-accord-text strong { color: var(--color-text) }
/* ===== FORMATEURS ADMIN PAGE ===== */
.fmt-stats { display: flex; gap: 12px; margin-bottom: 16px }
.fmt-list { display: flex; flex-direction: column; gap: 10px }
.fmt-card {
display: flex; align-items: center; justify-content: space-between;
background: #fff; border-radius: 14px; padding: 18px 22px;
box-shadow: var(--shadow-card); gap: 16px;
transition: box-shadow 0.2s, transform 0.2s
}
.fmt-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-1px) }
[data-theme="dark"] .fmt-card { background: var(--color-surface); border: 1px solid rgba(79, 209, 197, 0.06) }
.fmt-card-left { display: flex; align-items: center; gap: 14px; min-width: 0 }
.fmt-card-avatar { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; overflow: hidden }
.fmt-card-photo { width: 100%; height: 100%; object-fit: cover }
.fmt-card-initials {
width: 100%; height: 100%;
background: linear-gradient(135deg, #14B8A6, #0D9488);
color: #fff; display: flex; align-items: center; justify-content: center;
font-size: 18px; font-weight: 700; font-family: var(--font-display)
}
.fmt-card-info { min-width: 0 }
.fmt-card-name { font-size: 15px; font-weight: 700; color: #0A1628 }
[data-theme="dark"] .fmt-card-name { color: var(--color-text) }
.fmt-card-email { font-size: 12px; color: #9CA3AF; margin-top: 2px }
.fmt-card-spec {
font-size: 11px; color: #0D7377; margin-top: 4px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px
}
[data-theme="dark"] .fmt-card-spec { color: #4FD1C5 }
.fmt-card-right { flex-shrink: 0 }
.fmt-accord {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 8px
}
.fmt-accord-oui {
background: linear-gradient(135deg, #E8F4F5, #D0EBEC); color: #0D7377
}
[data-theme="dark"] .fmt-accord-oui { background: rgba(79,209,197,0.12); color: #4FD1C5 }
.fmt-accord-non {
background: #FDE8E8; color: #9B1C1C
}
[data-theme="dark"] .fmt-accord-non { background: rgba(248,113,113,0.1); color: #F87171 }
@media (max-width: 600px) {
.fmt-card { flex-direction: column; align-items: flex-start }
.fmt-card-right { align-self: flex-end }
}
/* ===== FORMATEURS — PENDING APPROVAL ===== */
.fmt-pending-section {
background: #fff; border-radius: 14px; box-shadow: var(--shadow-card);
padding: 18px 20px; margin-bottom: 16px;
border-left: 4px solid #E8860C
}
[data-theme="dark"] .fmt-pending-section { background: var(--color-surface); border-left-color: #FBBF24 }
.fmt-pending-header {
display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px
}
.fmt-pending-title {
font-family: var(--font-display); font-size: 15px; font-weight: 700; color: #0A1628; margin: 0
}
[data-theme="dark"] .fmt-pending-title { color: var(--color-text) }
.fmt-pending-count {
font-size: 11px; font-weight: 700; color: #fff;
background: #E8860C; padding: 2px 10px; border-radius: 10px
}
.fmt-pending-card {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 0; border-bottom: 1px solid #F0EFEB; gap: 12px
}
.fmt-pending-card:last-child { border-bottom: none }
[data-theme="dark"] .fmt-pending-card { border-bottom-color: var(--color-border) }
.fmt-pending-info { display: flex; align-items: center; gap: 12px }
.fmt-pending-avatar {
width: 40px; height: 40px; border-radius: 50%;
background: linear-gradient(135deg, #FEF3E0, #FDDCAB);
color: #E8860C; display: flex; align-items: center; justify-content: center;
font-size: 14px; font-weight: 700; font-family: var(--font-display); flex-shrink: 0
}
[data-theme="dark"] .fmt-pending-avatar { background: rgba(232,134,12,0.12); color: #FBBF24 }
.fmt-pending-name { font-size: 14px; font-weight: 600; color: #0A1628 }
[data-theme="dark"] .fmt-pending-name { color: var(--color-text) }
.fmt-pending-email { font-size: 12px; color: #9CA3AF }
.fmt-pending-date { font-size: 11px; color: #D4A017; margin-top: 2px }
.fmt-pending-actions { display: flex; gap: 6px; flex-shrink: 0 }
@media (max-width: 600px) {
.fmt-pending-card { flex-direction: column; align-items: flex-start }
.fmt-pending-actions { width: 100% }
}
/* ===== FORMATEURS MARKETPLACE CARDS ===== */
.fmp-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
width: 100%;
}
/* ===== Formateurs KPI row — premium style (sparkline, big number, no icon box) ===== */
.fmt-kpi-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 24px;
}
.fmt-kpi-card {
background: #fff;
border: 1px solid #E8E6E1;
border-radius: 16px;
padding: 20px 22px;
display: flex;
flex-direction: column;
gap: 10px;
min-height: 140px;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s;
position: relative;
overflow: hidden;
}
.fmt-kpi-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px -10px rgba(13, 115, 119, 0.18);
border-color: rgba(13, 115, 119, 0.2);
}
[data-theme="dark"] .fmt-kpi-card {
background: var(--color-surface);
border-color: var(--color-border);
}
.fmt-kpi-card--teal {
background: linear-gradient(135deg, #14B8A6 0%, #0D7377 100%);
color: #fff;
border-color: transparent;
}
.fmt-kpi-card--teal::before {
content: "";
position: absolute;
top: -40px;
right: -40px;
width: 140px;
height: 140px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.06);
}
.fmt-kpi-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
position: relative;
}
.fmt-kpi-label {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #5A6578;
}
.fmt-kpi-card--teal .fmt-kpi-label {
color: rgba(255, 255, 255, 0.85);
}
[data-theme="dark"] .fmt-kpi-label {
color: var(--color-text-muted);
}
.fmt-kpi-chip {
font-size: 11px;
font-weight: 700;
color: #0D7377;
background: rgba(13, 115, 119, 0.08);
padding: 3px 10px;
border-radius: 999px;
}
[data-theme="dark"] .fmt-kpi-chip {
background: rgba(79, 209, 197, 0.14);
color: #4FD1C5;
}
.fmt-kpi-value {
font-family: var(--font-display);
font-size: 40px;
font-weight: 800;
line-height: 1;
color: #0A1628;
letter-spacing: -0.02em;
position: relative;
}
.fmt-kpi-card--teal .fmt-kpi-value {
color: #fff;
}
[data-theme="dark"] .fmt-kpi-value {
color: var(--color-text);
}
.fmt-kpi-value-sub {
font-size: 18px;
font-weight: 600;
color: #9CA3AF;
margin-left: 4px;
}
.fmt-kpi-sub {
font-size: 12px;
color: #9CA3AF;
position: relative;
}
.fmt-kpi-card--teal .fmt-kpi-sub {
color: rgba(255, 255, 255, 0.75);
}
[data-theme="dark"] .fmt-kpi-sub {
color: var(--color-text-faint);
}
.fmt-kpi-bar {
height: 6px;
background: rgba(13, 115, 119, 0.1);
border-radius: 999px;
overflow: hidden;
margin-top: 4px;
}
[data-theme="dark"] .fmt-kpi-bar {
background: rgba(79, 209, 197, 0.12);
}
.fmt-kpi-bar-fill {
height: 100%;
background: linear-gradient(90deg, #0D7377, #14B8A6);
border-radius: 999px;
transition: width 0.4s ease;
}
.fmt-kpi-spark {
margin-top: auto;
display: flex;
align-items: flex-end;
min-height: 32px;
}
/* KPI meta row (avg) */
.fmt-kpi-meta {
display: flex;
align-items: baseline;
gap: 6px;
font-size: 11px;
color: #9CA3AF;
margin-top: -4px;
}
[data-theme="dark"] .fmt-kpi-meta {
color: var(--color-text-faint);
}
.fmt-kpi-meta-dim {
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 600;
}
.fmt-kpi-meta-val {
color: #0A1628;
font-weight: 700;
font-size: 13px;
}
[data-theme="dark"] .fmt-kpi-meta-val {
color: var(--color-text);
}
/* "Top formateur" mini card inside KPI */
.fmt-kpi-top {
display: flex;
align-items: center;
gap: 10px;
margin-top: auto;
padding: 10px 12px;
background: rgba(13, 115, 119, 0.05);
border-radius: 10px;
border: 1px solid rgba(13, 115, 119, 0.08);
}
[data-theme="dark"] .fmt-kpi-top {
background: rgba(79, 209, 197, 0.06);
border-color: rgba(79, 209, 197, 0.12);
}
.fmt-kpi-top-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, #14B8A6, #0D7377);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
font-family: var(--font-display);
flex-shrink: 0;
}
.fmt-kpi-top-info {
flex: 1;
min-width: 0;
}
.fmt-kpi-top-label {
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #9CA3AF;
font-weight: 600;
}
.fmt-kpi-top-name {
font-size: 12px;
font-weight: 600;
color: #0A1628;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
[data-theme="dark"] .fmt-kpi-top-name {
color: var(--color-text);
}
.fmt-kpi-top-count {
font-size: 16px;
font-weight: 800;
color: #0D7377;
font-family: var(--font-display);
flex-shrink: 0;
}
[data-theme="dark"] .fmt-kpi-top-count {
color: #4FD1C5;
}
.fmt-kpi-empty {
margin-top: auto;
padding: 12px;
text-align: center;
font-size: 11px;
color: #9CA3AF;
background: rgba(0, 0, 0, 0.02);
border-radius: 10px;
border: 1px dashed #E8E6E1;
}
[data-theme="dark"] .fmt-kpi-empty {
background: rgba(255, 255, 255, 0.02);
border-color: var(--color-border);
}
/* Search bar */
.fmt-search-bar {
display: flex;
align-items: center;
gap: 10px;
background: #fff;
border: 1px solid #E8E6E1;
border-radius: 12px;
padding: 12px 16px;
margin-bottom: 20px;
transition: border-color 0.18s, box-shadow 0.18s;
}
[data-theme="dark"] .fmt-search-bar {
background: var(--color-surface);
border-color: var(--color-border);
}
.fmt-search-bar:focus-within {
border-color: #0D7377;
box-shadow: 0 0 0 3px rgba(13, 115, 119, 0.1);
}
.fmt-search-bar input {
flex: 1;
border: none;
outline: none;
background: transparent;
font-size: 14px;
color: #0A1628;
font-family: inherit;
}
[data-theme="dark"] .fmt-search-bar input {
color: var(--color-text);
}
.fmt-search-bar input::placeholder {
color: #9CA3AF;
}
.fmt-search-count {
font-size: 11px;
font-weight: 600;
color: #0D7377;
background: rgba(13, 115, 119, 0.08);
padding: 4px 12px;
border-radius: 999px;
white-space: nowrap;
flex-shrink: 0;
}
[data-theme="dark"] .fmt-search-count {
background: rgba(79, 209, 197, 0.14);
color: #4FD1C5;
}
@media (max-width: 900px) {
.fmt-kpi-row {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 520px) {
.fmt-kpi-row {
grid-template-columns: 1fr;
}
}
.fmp-card {
background: #fff; border-radius: 14px; box-shadow: var(--shadow-card);
overflow: hidden; text-decoration: none; color: inherit;
display: flex; flex-direction: column;
transition: box-shadow 0.2s, transform 0.2s;
border: 1px solid transparent
}
.fmp-card:hover {
box-shadow: var(--shadow-hover); transform: translateY(-3px);
border-color: #D0EBEC
}
[data-theme="dark"] .fmp-card { background: var(--color-surface) }
[data-theme="dark"] .fmp-card:hover { border-color: rgba(79, 209, 197, 0.18); box-shadow: 0 4px 20px rgba(79, 209, 197, 0.08) }
/* Card header — avatar area */
.fmp-card-header {
display: flex; justify-content: center; position: relative;
padding: 24px 20px 0; background: linear-gradient(135deg, #F0FAF9, #E8F4F5)
}
[data-theme="dark"] .fmp-card-header { background: linear-gradient(135deg, rgba(79,209,197,0.04), rgba(79,209,197,0.08)) }
.fmp-avatar {
width: 72px; height: 72px; border-radius: 50%; overflow: hidden;
border: 3px solid #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.08);
margin-bottom: -36px; position: relative; z-index: 1
}
[data-theme="dark"] .fmp-avatar { border-color: var(--color-surface) }
.fmp-photo { width: 100%; height: 100%; object-fit: cover }
.fmp-initials {
width: 100%; height: 100%;
background: linear-gradient(135deg, #14B8A6, #0D7377);
color: #fff; display: flex; align-items: center; justify-content: center;
font-size: 24px; font-weight: 700; font-family: var(--font-display)
}
.fmp-check {
position: absolute; top: 12px; right: 12px;
width: 24px; height: 24px; border-radius: 50%;
background: linear-gradient(135deg, #14B8A6, #0D9488);
display: flex; align-items: center; justify-content: center;
box-shadow: 0 2px 6px rgba(13,115,119,0.3)
}
/* Card body */
.fmp-card-body {
padding: 44px 20px 16px; text-align: center; flex: 1
}
.fmp-name {
font-family: var(--font-display); font-size: 16px; font-weight: 700;
color: #0A1628; margin: 0 0 2px
}
[data-theme="dark"] .fmp-name { color: var(--color-text) }
.fmp-email { font-size: 12px; color: #9CA3AF; margin: 0 0 10px }
.fmp-tags { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-bottom: 10px }
.fmp-tag {
font-size: 10px; font-weight: 600; color: #0D7377;
background: #E8F4F5; padding: 2px 8px; border-radius: 6px
}
[data-theme="dark"] .fmp-tag { background: rgba(79,209,197,0.12); color: #4FD1C5 }
.fmp-bio {
font-size: 12px; color: #5A6578; line-height: 1.5; margin: 0
}
[data-theme="dark"] .fmp-bio { color: var(--color-text-muted) }
/* Card footer */
.fmp-card-footer {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 20px; border-top: 1px solid #F0EFEB;
font-size: 12px; color: #9CA3AF
}
[data-theme="dark"] .fmp-card-footer { border-top-color: var(--color-border) }
.fmp-stat { display: flex; align-items: center; gap: 4px }
.fmp-arrow { margin-left: auto; transition: transform 0.15s }
.fmp-card:hover .fmp-arrow { transform: translateX(3px) }
/* ===== ENTREPRISES — Card grid (white + teal) ===== */
.entc-toolbar {
display: flex; align-items: center; gap: 12px;
margin-bottom: 16px; flex-wrap: wrap;
}
.entc-search-wrap {
position: relative; flex: 1; min-width: 240px;
}
.entc-search-wrap svg {
position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
color: #9CA3AF; pointer-events: none;
}
.entc-search {
width: 100%; padding: 12px 16px 12px 42px;
border: 1px solid #E5E7EB; border-radius: 12px;
background: #fff; font-size: 14px; font-family: var(--font-body);
color: #0A1628; transition: border-color 0.2s, box-shadow 0.2s;
}
.entc-search:focus {
outline: none; border-color: #0D7377;
box-shadow: 0 0 0 3px rgba(13, 115, 119, 0.08);
}
[data-theme="dark"] .entc-search {
background: var(--color-surface-2); border-color: var(--color-border); color: var(--color-text);
}
[data-theme="dark"] .entc-search:focus {
border-color: #4FD1C5; box-shadow: 0 0 0 3px rgba(79, 209, 197, 0.12);
}
.entc-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
gap: 18px; margin-top: 4px;
}
/* ===== Entreprise logo uploader (inside modal) ===== */
.ec-logo-group { margin-bottom: 18px }
.ec-logo-uploader {
display: flex; align-items: center; gap: 16px;
padding: 14px;
border: 1px dashed #D0EBEC;
border-radius: 12px;
background: linear-gradient(135deg, #F8FCFC, #F0FAF9);
}
[data-theme="dark"] .ec-logo-uploader {
background: rgba(79, 209, 197, 0.04);
border-color: rgba(79, 209, 197, 0.2);
}
.ec-logo-preview {
width: 72px; height: 72px; border-radius: 14px;
background: #fff;
border: 1px solid #E8F4F5;
display: flex; align-items: center; justify-content: center;
color: #9CA3AF;
flex-shrink: 0; overflow: hidden;
}
.ec-logo-preview.has-logo {
padding: 6px;
border-color: #D0EBEC;
}
.ec-logo-preview img {
width: 100%; height: 100%;
object-fit: contain; display: block;
}
[data-theme="dark"] .ec-logo-preview {
background: #fff;
border-color: rgba(79, 209, 197, 0.15);
}
.ec-logo-actions {
display: flex; flex-direction: column; gap: 6px;
flex: 1; min-width: 0;
}
.ec-logo-actions .btn-sm { align-self: flex-start; padding: 6px 12px; font-size: 12px }
.ec-logo-hint {
margin: 2px 0 0;
font-size: 11px; color: #6B7280; font-style: italic;
}
[data-theme="dark"] .ec-logo-hint { color: var(--color-text-muted) }
.entc-card {
position: relative;
background: #fff; border-radius: 16px;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
overflow: hidden; text-decoration: none; color: inherit;
display: flex; flex-direction: column;
border: 1px solid #EEF0F0;
transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.entc-card::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, #0D7377, #14B8A6, #2DD4BF);
opacity: 0.7; transition: opacity 0.25s ease;
}
.entc-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(13, 115, 119, 0.12);
border-color: #D0EBEC;
}
.entc-card:hover::before { opacity: 1 }
[data-theme="dark"] .entc-card {
background: var(--color-surface);
border-color: rgba(79, 209, 197, 0.08);
box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
[data-theme="dark"] .entc-card:hover {
border-color: rgba(79, 209, 197, 0.22);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.entc-header {
position: relative;
padding: 26px 20px 18px;
background: linear-gradient(135deg, #F0FAF9 0%, #E3F2F1 100%);
display: flex; align-items: center; gap: 14px;
border-bottom: 1px solid rgba(13, 115, 119, 0.06);
overflow: hidden;
}
.entc-header::after {
content: ""; position: absolute; top: -40px; right: -40px;
width: 140px; height: 140px; border-radius: 50%;
background: radial-gradient(circle, rgba(13, 115, 119, 0.10) 0%, transparent 70%);
pointer-events: none;
}
[data-theme="dark"] .entc-header {
background: linear-gradient(135deg, rgba(79,209,197,0.07), rgba(79,209,197,0.13));
border-bottom-color: rgba(79, 209, 197, 0.12);
}
[data-theme="dark"] .entc-header::after {
background: radial-gradient(circle, rgba(79, 209, 197, 0.14) 0%, transparent 70%);
}
.entc-avatar {
width: 58px; height: 58px; border-radius: 14px;
background: linear-gradient(135deg, #0D7377, #14B8A6);
color: #fff; display: flex; align-items: center; justify-content: center;
font-family: var(--font-display); font-size: 20px; font-weight: 700;
box-shadow: 0 6px 18px rgba(13, 115, 119, 0.28);
flex-shrink: 0; position: relative; z-index: 1;
letter-spacing: -0.02em;
overflow: hidden;
}
.entc-avatar--logo {
background: #fff;
border: 1px solid #E8F4F5;
padding: 6px;
}
.entc-avatar-img {
width: 100%; height: 100%;
object-fit: contain;
display: block;
}
[data-theme="dark"] .entc-avatar {
background: linear-gradient(135deg, #4FD1C5, #38B2AC);
box-shadow: 0 6px 18px rgba(79, 209, 197, 0.3);
}
[data-theme="dark"] .entc-avatar--logo {
background: #fff;
border-color: rgba(79, 209, 197, 0.2);
}
.entc-header-text { min-width: 0; flex: 1; position: relative; z-index: 1; }
.entc-name {
font-family: var(--font-display); font-size: 16px; font-weight: 700;
color: #0A1628; margin: 0 0 3px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-theme="dark"] .entc-name { color: var(--color-text); }
.entc-siret {
font-size: 11px; color: #6B7280; margin: 0;
font-family: var(--font-body);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-theme="dark"] .entc-siret { color: var(--color-text-muted); }
.entc-body {
padding: 14px 20px 12px;
display: flex; flex-direction: column; gap: 8px;
min-height: 68px;
}
.entc-meta-row {
display: flex; align-items: center; gap: 8px;
font-size: 12px; color: #5A6578;
min-width: 0;
}
[data-theme="dark"] .entc-meta-row { color: var(--color-text-muted); }
.entc-meta-row svg { flex-shrink: 0; color: #0D7377; opacity: 0.75 }
[data-theme="dark"] .entc-meta-row svg { color: #4FD1C5; }
.entc-meta-row span {
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.entc-stats {
display: grid; grid-template-columns: 1fr 1fr;
padding: 14px 0;
margin: 0 20px;
border-top: 1px solid #F0EFEB;
border-bottom: 1px solid #F0EFEB;
}
.entc-stats--single { grid-template-columns: 1fr }
.entc-stats--single .entc-stat:first-child::after { display: none }
[data-theme="dark"] .entc-stats { border-color: rgba(79, 209, 197, 0.08); }
.entc-stat {
display: flex; flex-direction: column; align-items: center; gap: 3px;
position: relative;
}
.entc-stat:first-child::after {
content: ""; position: absolute;
right: 0; top: 15%; bottom: 15%;
width: 1px; background: #F0EFEB;
}
[data-theme="dark"] .entc-stat:first-child::after { background: rgba(79, 209, 197, 0.12); }
.entc-stat-value {
font-family: var(--font-display); font-size: 22px; font-weight: 700;
color: #0D7377; line-height: 1;
}
[data-theme="dark"] .entc-stat-value { color: #4FD1C5; }
.entc-stat-label {
font-size: 10px; font-weight: 600; color: #9CA3AF;
text-transform: uppercase; letter-spacing: 0.05em;
}
.entc-footer {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 20px 16px;
font-size: 12px; color: #5A6578; gap: 10px;
}
[data-theme="dark"] .entc-footer { color: var(--color-text-muted); }
.entc-contact {
display: flex; align-items: center; gap: 6px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
min-width: 0; flex: 1;
}
.entc-contact svg { flex-shrink: 0; color: #9CA3AF }
.entc-arrow {
color: #9CA3AF; flex-shrink: 0;
transition: transform 0.2s ease, color 0.2s ease;
}
.entc-card:hover .entc-arrow {
transform: translateX(4px); color: #0D7377;
}
[data-theme="dark"] .entc-card:hover .entc-arrow { color: #4FD1C5; }
#dashboard-app.dash-entering .entc-card {
opacity: 0; animation: fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
#dashboard-app.dash-entering .entc-card:nth-child(1) { animation-delay: 120ms }
#dashboard-app.dash-entering .entc-card:nth-child(2) { animation-delay: 180ms }
#dashboard-app.dash-entering .entc-card:nth-child(3) { animation-delay: 240ms }
#dashboard-app.dash-entering .entc-card:nth-child(4) { animation-delay: 300ms }
#dashboard-app.dash-entering .entc-card:nth-child(5) { animation-delay: 360ms }
#dashboard-app.dash-entering .entc-card:nth-child(6) { animation-delay: 420ms }
.entc-hidden { display: none !important; }
/* Grid shown by default, list hidden. When .entc-page-expanded is set:
KPIs disappear, backbar appears, grid is swapped for the full list. */
.entc-view > .entc-list { display: none }
.entc-backbar { display: none }
.entc-page-expanded > .entc-kpis { display: none }
.entc-page-expanded > .entc-backbar { display: flex }
.entc-page-expanded > .entc-more-wrap { display: none }
.entc-page-expanded .entc-view > .entc-grid { display: none }
.entc-page-expanded .entc-view > .entc-list { display: flex }
.entc-backbar {
align-items: center; gap: 16px;
margin-bottom: 18px;
padding: 4px 0;
}
.entc-back-btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 9px 16px 9px 12px;
background: #fff;
border: 1px solid #D0EBEC;
border-radius: 10px;
font-family: var(--font-body);
font-size: 13px; font-weight: 600;
color: #0D7377;
cursor: pointer;
box-shadow: 0 1px 3px rgba(13, 115, 119, 0.05);
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.entc-back-btn:hover {
background: linear-gradient(135deg, #F0FAF9, #E3F2F1);
border-color: #0D7377;
transform: translateX(-3px);
box-shadow: 0 4px 12px rgba(13, 115, 119, 0.1);
}
.entc-back-btn svg { transition: transform 0.2s ease }
.entc-back-btn:hover svg { transform: translateX(-2px) }
.entc-backbar-title {
font-family: var(--font-display);
font-size: 15px; font-weight: 700;
color: #0A1628;
}
.entc-backbar-title em {
font-style: normal;
color: #6B7280;
font-weight: 500;
margin-left: 4px;
}
[data-theme="dark"] .entc-back-btn {
background: var(--color-surface);
border-color: rgba(79, 209, 197, 0.2);
color: #4FD1C5;
}
[data-theme="dark"] .entc-back-btn:hover {
background: rgba(79, 209, 197, 0.08);
border-color: #4FD1C5;
box-shadow: 0 4px 12px rgba(79, 209, 197, 0.12);
}
[data-theme="dark"] .entc-backbar-title { color: var(--color-text) }
[data-theme="dark"] .entc-backbar-title em { color: var(--color-text-muted) }
/* Voir toutes les entreprises — filled teal button with shine sweep */
.entc-more-wrap {
display: flex; justify-content: center;
margin-top: 28px;
}
.entc-more-btn {
position: relative;
display: inline-flex; align-items: center; gap: 12px;
padding: 14px 28px;
background: linear-gradient(135deg, #0D7377 0%, #14B8A6 100%);
border: none;
font-family: var(--font-body);
font-size: 14px; font-weight: 600;
color: #fff; cursor: pointer;
border-radius: 14px;
letter-spacing: 0.01em;
box-shadow: 0 6px 20px rgba(13, 115, 119, 0.28), 0 1px 2px rgba(13, 115, 119, 0.2);
overflow: hidden;
transition: transform 0.25s ease, box-shadow 0.25s ease, gap 0.25s ease;
}
.entc-more-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(13, 115, 119, 0.38), 0 2px 6px rgba(13, 115, 119, 0.25);
gap: 16px;
}
.entc-more-btn:active { transform: translateY(0) scale(0.98) }
.entc-more-label, .entc-more-pill, .entc-more-arrow { position: relative; z-index: 2 }
.entc-more-arrow { transition: transform 0.25s ease }
.entc-more-btn:hover .entc-more-arrow { transform: translateX(4px) }
.entc-more-pill {
display: inline-flex; align-items: center; justify-content: center;
min-width: 24px; height: 22px; padding: 0 8px;
background: rgba(255, 255, 255, 0.22);
border-radius: 999px;
font-size: 11px; font-weight: 700;
color: #fff;
}
/* Light shine sweep — repeats every 2s */
.entc-more-shine {
position: absolute;
top: 0; left: -60%;
width: 50%; height: 100%;
background: linear-gradient(110deg,
transparent 0%,
rgba(255, 255, 255, 0) 30%,
rgba(255, 255, 255, 0.5) 50%,
rgba(255, 255, 255, 0) 70%,
transparent 100%);
transform: skewX(-18deg);
pointer-events: none;
animation: entc-shine-sweep 2s ease-in-out infinite;
z-index: 1;
}
@keyframes entc-shine-sweep {
0% { left: -60%; opacity: 0 }
20% { opacity: 1 }
60% { opacity: 1 }
80%, 100% { left: 140%; opacity: 0 }
}
[data-theme="dark"] .entc-more-btn {
background: linear-gradient(135deg, #4FD1C5 0%, #38B2AC 100%);
color: #0A1628;
box-shadow: 0 6px 20px rgba(79, 209, 197, 0.35), 0 1px 2px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .entc-more-btn:hover {
box-shadow: 0 10px 28px rgba(79, 209, 197, 0.48), 0 2px 6px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .entc-more-pill {
background: rgba(10, 22, 40, 0.22);
color: #0A1628;
}
/* Click transition — slide the list + backbar in when expanded */
.entc-page-expanded .entc-view > .entc-list {
animation: entc-slide-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.entc-page-expanded > .entc-backbar {
animation: entc-slide-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes entc-slide-in {
0% { opacity: 0; transform: translateY(14px) }
100% { opacity: 1; transform: translateY(0) }
}
/* Compact list view (revealed when Voir toutes is clicked) */
.entc-list {
display: flex; flex-direction: column;
background: #fff; border-radius: 16px;
border: 1px solid #EEF0F0;
overflow: hidden;
box-shadow: 0 2px 8px rgba(13, 115, 119, 0.04);
}
[data-theme="dark"] .entc-list {
background: var(--color-surface);
border-color: rgba(79, 209, 197, 0.08);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.entc-row {
display: flex; align-items: center; gap: 16px;
padding: 14px 20px;
text-decoration: none; color: inherit;
border-bottom: 1px solid #F4F4F2;
transition: background 0.15s ease;
}
.entc-row:last-child { border-bottom: none }
.entc-row:hover { background: linear-gradient(90deg, #F0FAF9, transparent 60%); }
[data-theme="dark"] .entc-row { border-bottom-color: rgba(79, 209, 197, 0.06) }
[data-theme="dark"] .entc-row:hover { background: rgba(79, 209, 197, 0.05) }
.entc-row-avatar {
width: 40px; height: 40px; border-radius: 10px;
background: linear-gradient(135deg, #0D7377, #14B8A6);
color: #fff; display: flex; align-items: center; justify-content: center;
font-family: var(--font-display); font-size: 14px; font-weight: 700;
flex-shrink: 0;
overflow: hidden;
box-shadow: 0 3px 10px rgba(13, 115, 119, 0.20);
}
.entc-row-avatar--logo {
background: #fff;
border: 1px solid #E8F4F5;
padding: 4px;
}
.entc-row-avatar-img { width: 100%; height: 100%; object-fit: contain; display: block }
[data-theme="dark"] .entc-row-avatar {
background: linear-gradient(135deg, #4FD1C5, #38B2AC);
box-shadow: 0 3px 10px rgba(79, 209, 197, 0.25);
}
[data-theme="dark"] .entc-row-avatar--logo {
background: #fff;
border-color: rgba(79, 209, 197, 0.2);
}
.entc-row-main { flex: 1; min-width: 0 }
.entc-row-name {
font-family: var(--font-display); font-size: 14px; font-weight: 700;
color: #0A1628; margin-bottom: 3px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-theme="dark"] .entc-row-name { color: var(--color-text) }
.entc-row-meta {
display: flex; gap: 14px; font-size: 12px; color: #6B7280;
flex-wrap: wrap;
}
.entc-row-meta span {
display: inline-flex; align-items: center; gap: 5px;
white-space: nowrap;
}
.entc-row-meta svg { color: #9CA3AF }
[data-theme="dark"] .entc-row-meta { color: var(--color-text-muted) }
[data-theme="dark"] .entc-row-meta svg { color: var(--color-text-faint) }
.entc-row-stat {
display: flex; flex-direction: column; align-items: center;
min-width: 72px; padding: 0 8px;
border-left: 1px solid #F0EFEB;
}
[data-theme="dark"] .entc-row-stat { border-left-color: rgba(79, 209, 197, 0.08) }
.entc-row-stat b {
font-family: var(--font-display); font-size: 18px; font-weight: 700;
color: #0D7377; line-height: 1;
}
[data-theme="dark"] .entc-row-stat b { color: #4FD1C5 }
.entc-row-stat em {
font-style: normal; font-size: 10px; font-weight: 600;
color: #9CA3AF; text-transform: uppercase; letter-spacing: 0.04em;
margin-top: 4px;
}
.entc-row-arrow {
color: #9CA3AF; flex-shrink: 0;
transition: transform 0.2s ease, color 0.2s ease;
}
.entc-row:hover .entc-row-arrow {
color: #0D7377; transform: translateX(4px);
}
[data-theme="dark"] .entc-row:hover .entc-row-arrow { color: #4FD1C5 }
@media (max-width: 720px) {
.entc-row-stat { min-width: 56px }
.entc-row { gap: 10px; padding: 12px 14px }
}
@media (max-width: 540px) {
.entc-row-stat:nth-of-type(3) { display: none }
}
@media (max-width: 600px) {
.entc-grid { grid-template-columns: 1fr }
}
/* ===== PARAMETRES PAGE ===== */
.param-grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: 12px
}
@media (max-width: 768px) { .param-grid { grid-template-columns: 1fr } }
.param-card {
display: flex; align-items: center; gap: 14px;
background: #fff; border-radius: 14px; padding: 16px 20px;
border: 1px solid #E8E6E1; cursor: pointer;
transition: box-shadow 0.2s, transform 0.2s;
text-decoration: none; color: inherit
}
.param-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-1px) }
[data-theme="dark"] .param-card { background: var(--color-surface); border: 1px solid rgba(79, 209, 197, 0.06) }
.param-icon {
width: 44px; height: 44px; border-radius: 50%;
background: linear-gradient(135deg, #E8F4F5, #D0EBEC);
display: flex; align-items: center; justify-content: center;
color: #0D7377; flex-shrink: 0
}
[data-theme="dark"] .param-icon { background: rgba(79,209,197,0.12); color: #4FD1C5 }
.param-info { flex: 1; min-width: 0 }
.param-title { font-size: 14px; font-weight: 600; color: #0A1628 }
[data-theme="dark"] .param-title { color: var(--color-text) }
.param-desc { font-size: 12px; color: #9CA3AF; margin-top: 2px }
/* Theme switch toggle */
.param-theme-toggle { display: flex; align-items: center; gap: 8px }
.param-theme-label { font-size: 12px; font-weight: 600; color: #5A6578 }
[data-theme="dark"] .param-theme-label { color: var(--color-text-muted) }
.param-switch {
width: 40px; height: 22px; border-radius: 11px; background: #E8E6E1;
position: relative; cursor: pointer; transition: background 0.2s
}
.param-switch.active { background: linear-gradient(135deg, #14B8A6, #0D9488) }
.param-switch-dot {
width: 18px; height: 18px; border-radius: 50%; background: #fff;
position: absolute; top: 2px; left: 2px;
transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.15)
}
.param-switch.active .param-switch-dot { transform: translateX(18px) }
[data-theme="dark"] .param-switch { background: var(--color-surface-2) }
/* ===== Parametres — Tabs layout ===== */
.param-tabs {
display: flex;
gap: 4px;
background: var(--color-surface);
border: 1px solid var(--color-divider, #E8E6E1);
border-radius: 12px;
padding: 6px;
margin-bottom: 20px;
overflow-x: auto;
}
[data-theme="dark"] .param-tabs {
background: var(--color-surface);
border-color: var(--color-border);
}
.param-tab {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
background: transparent;
border: none;
border-radius: 8px;
font-family: inherit;
font-size: 13px;
font-weight: 500;
color: #5A6578;
cursor: pointer;
transition: all 0.15s;
white-space: nowrap;
}
[data-theme="dark"] .param-tab { color: var(--color-text-muted); }
.param-tab:hover {
color: #0D7377;
background: rgba(13, 115, 119, 0.05);
}
[data-theme="dark"] .param-tab:hover {
color: #4FD1C5;
background: rgba(79, 209, 197, 0.06);
}
.param-tab.active {
background: linear-gradient(135deg, #14B8A6, #0D7377);
color: #fff;
box-shadow: 0 2px 10px -2px rgba(13, 115, 119, 0.35);
}
.param-tab.active svg { color: #fff; }
.param-tab-body {
animation: paramTabFade 0.2s ease;
}
@keyframes paramTabFade {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
.param-card-section {
padding: 24px;
margin-bottom: 16px;
}
.param-section-head {
margin-bottom: 18px;
}
.param-section-title {
font-family: var(--font-display);
font-size: 15px;
font-weight: 700;
color: #0A1628;
margin: 0;
}
[data-theme="dark"] .param-section-title { color: var(--color-text); }
.param-section-desc {
font-size: 12px;
color: #5A6578;
margin: 4px 0 0;
line-height: 1.5;
}
[data-theme="dark"] .param-section-desc { color: var(--color-text-muted); }
.param-section-divider {
height: 1px;
background: var(--color-divider, #E8E6E1);
margin: 20px 0;
}
.param-subsection-title {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #9CA3AF;
margin: 0 0 12px;
}
/* Assets (cachet + logo) — drag-drop cards */
.param-assets-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
margin-top: 4px;
}
.param-asset-card {
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px;
border: 1px solid var(--color-divider, #E8E6E1);
border-radius: 14px;
background: var(--color-surface, #FFFFFF);
}
[data-theme="dark"] .param-asset-card { background: var(--color-surface-1, #1A1A1E); }
.param-asset-card-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.param-asset-card-title {
font-size: 14px;
font-weight: 600;
color: #0A1628;
}
[data-theme="dark"] .param-asset-card-title { color: var(--color-text); }
.param-asset-card-hint {
font-size: 11px;
color: #9CA3AF;
margin-top: 2px;
}
.param-asset-badge {
flex-shrink: 0;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 4px 9px;
border-radius: 999px;
background: rgba(156, 163, 175, 0.15);
color: #6B7280;
}
.param-asset-badge--on {
background: rgba(13, 115, 119, 0.12);
color: #0D7377;
}
.param-asset-dropzone {
position: relative;
width: 100%;
min-height: 180px;
border: 2px dashed rgba(13, 115, 119, 0.25);
border-radius: 12px;
background: linear-gradient(180deg, rgba(13, 115, 119, 0.03), rgba(13, 115, 119, 0.01));
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 16px;
transition: border-color 160ms ease, background 160ms ease, transform 120ms ease;
overflow: hidden;
}
.param-asset-dropzone:hover {
border-color: rgba(13, 115, 119, 0.5);
background: rgba(13, 115, 119, 0.05);
}
.param-asset-dropzone--over {
border-color: #0D7377;
background: rgba(13, 115, 119, 0.1);
transform: scale(1.01);
}
.param-asset-dropzone--filled {
background: var(--color-surface-2, #FAFAF7);
border-style: solid;
border-color: var(--color-divider, #E8E6E1);
}
[data-theme="dark"] .param-asset-dropzone--filled { background: var(--color-surface-2, #1F1F23); }
.param-asset-empty-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
color: #0D7377;
text-align: center;
}
.param-asset-empty-title {
font-size: 13px;
font-weight: 600;
color: #0A1628;
margin-top: 4px;
}
[data-theme="dark"] .param-asset-empty-title { color: var(--color-text); }
.param-asset-empty-sub {
font-size: 11px;
color: #9CA3AF;
}
.param-asset-img {
width: 100%;
height: 160px;
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
}
.param-asset-img img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.param-asset-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(10, 22, 40, 0) 40%, rgba(10, 22, 40, 0.72) 100%);
display: flex;
align-items: flex-end;
justify-content: center;
gap: 8px;
padding: 12px;
opacity: 0;
transition: opacity 160ms ease;
}
.param-asset-dropzone--filled:hover .param-asset-overlay {
opacity: 1;
}
.param-asset-overlay .btn {
backdrop-filter: blur(4px);
}
/* Admin list */
.param-admin-list {
display: flex;
flex-direction: column;
gap: 0;
margin-bottom: 8px;
}
.param-admin-row {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--color-divider, #E8E6E1);
}
.param-admin-row:last-child { border-bottom: none; }
.param-admin-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, #14B8A6, #0D7377);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
font-family: var(--font-display);
flex-shrink: 0;
}
.param-admin-info { flex: 1; min-width: 0; }
.param-admin-name {
font-size: 13px;
font-weight: 600;
color: #0A1628;
}
[data-theme="dark"] .param-admin-name { color: var(--color-text); }
.param-admin-email {
font-size: 11px;
color: #9CA3AF;
margin-top: 2px;
}
.param-admin-del {
color: #DC2626 !important;
}
.param-admin-del:hover {
background: #FEE2E2;
}
/* Integration cards */
.param-integration-head {
display: flex;
align-items: flex-start;
gap: 14px;
}
.param-integration-icon {
width: 52px;
height: 52px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.param-integration-info { flex: 1; min-width: 0; }
/* Theme picker */
.param-theme-row {
display: flex;
gap: 12px;
}
.param-theme-option {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 16px 20px;
background: #fff;
border: 2px solid var(--color-divider, #E8E6E1);
border-radius: 12px;
font-family: inherit;
font-size: 13px;
font-weight: 600;
color: #5A6578;
cursor: pointer;
transition: all 0.15s;
}
[data-theme="dark"] .param-theme-option {
background: var(--color-surface);
color: var(--color-text-muted);
border-color: var(--color-border);
}
.param-theme-option:hover {
border-color: #0D7377;
color: #0D7377;
}
.param-theme-option.active {
background: linear-gradient(135deg, #F0FAF9, #E8F4F5);
border-color: #0D7377;
color: #0D7377;
}
[data-theme="dark"] .param-theme-option.active {
background: rgba(79, 209, 197, 0.08);
border-color: #4FD1C5;
color: #4FD1C5;
}
@media (max-width: 700px) {
.param-assets-row { grid-template-columns: 1fr; }
.param-assets-grid { grid-template-columns: 1fr; }
.param-theme-row { flex-direction: column; }
}
/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale }
body {
font-family: var(--font-body); font-size: var(--text-base);
color: var(--color-text); background: var(--color-bg);
line-height: 1.6; min-height: 100vh
}
a { color: inherit; text-decoration: none }
button { cursor: pointer; font: inherit; border: none; background: none; color: inherit }
input, select, textarea { font: inherit; color: inherit }
/* ===== SKIP LINK ===== */
.skip-link {
position: absolute; top: -100px; left: var(--space-4); z-index: 10000;
padding: var(--space-2) var(--space-4); background: var(--color-primary);
color: var(--color-text-inverse); border-radius: var(--radius-md);
font-size: var(--text-sm); font-weight: 600;
transition: top var(--transition-fast)
}
.skip-link:focus { top: var(--space-4); outline: 2px solid var(--color-primary); outline-offset: 2px }
/* ===== FOCUS ===== */
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px }
:focus:not(:focus-visible) { outline: none }
/* ===== LOGIN SCREEN — Premium Split ===== */
#login-screen { display: flex; min-height: 100vh; }
/* --- Left: branding --- */
.login-left {
flex: 0 0 44%; display: flex; flex-direction: column;
background: linear-gradient(170deg, #071420 0%, #0A2E36 35%, #0D7377 70%, #14B8A6 100%);
color: #fff; padding: 48px 52px; position: relative; overflow: hidden;
}
.login-left::before {
content: ""; position: absolute; inset: 0;
background: radial-gradient(circle 500px at 15% 85%, rgba(255,255,255,0.05) 0%, transparent 70%),
radial-gradient(circle 400px at 80% 10%, rgba(255,255,255,0.03) 0%, transparent 70%);
pointer-events: none;
}
.login-left::after {
content: ""; position: absolute; bottom: -120px; right: -80px;
width: 400px; height: 400px; border-radius: 50%;
border: 1px solid rgba(255,255,255,0.04); pointer-events: none;
}
.login-left-content {
flex: 1; display: flex; flex-direction: column; justify-content: center;
position: relative; z-index: 1; max-width: 380px;
}
.login-back-site {
display: inline-flex; align-items: center; gap: 8px;
color: #fff; text-decoration: none;
font-size: 13px; font-weight: 500; font-family: var(--font-body);
position: absolute; top: 0; left: 0;
padding: 8px 16px 8px 12px; border-radius: 8px;
background: transparent;
border: 1.5px solid rgba(255,255,255,0.25);
transition: all 180ms cubic-bezier(0.16,1,0.3,1);
}
.login-back-site:hover {
border-color: rgba(255,255,255,0.5);
background: rgba(255,255,255,0.08);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.login-left-logo { margin-bottom: 32px; }
.login-left-label {
font-size: 10px; font-weight: 600; letter-spacing: 0.16em;
color: rgba(255,255,255,0.3); margin-bottom: 12px;
}
.login-left-title {
font-family: var(--font-display); font-size: 27px; font-weight: 700;
line-height: 1.25; margin-bottom: 14px; letter-spacing: -0.01em;
}
.login-left-desc {
font-size: 13.5px; line-height: 1.7; color: rgba(255,255,255,0.5);
margin-bottom: 40px;
}
.login-left-features { display: flex; flex-direction: column; gap: 18px; }
.login-feature {
display: flex; align-items: center; gap: 16px;
font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.75);
}
.login-feature-icon {
width: 40px; height: 40px; border-radius: 12px;
background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.05);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; color: rgba(255,255,255,0.6);
}
.login-left-footer {
position: relative; z-index: 1;
font-size: 10.5px; color: rgba(255,255,255,0.18); padding-top: 24px; letter-spacing: 0.01em;
}
/* --- Right: form + mesh --- */
.login-right {
flex: 1; display: flex; align-items: center; justify-content: center;
background: #F8F6F3; padding: 48px; position: relative; overflow: hidden;
}
.login-right-mesh {
position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.login-right-mesh::before {
content: ''; position: absolute;
top: -60%; left: -60%; width: 220%; height: 220%;
background:
radial-gradient(ellipse 40% 35% at 8% 15%, rgba(13,115,119,0.15) 0%, transparent 65%),
radial-gradient(ellipse 35% 30% at 90% 80%, rgba(13,115,119,0.11) 0%, transparent 65%),
radial-gradient(ellipse 40% 40% at 55% 5%, rgba(232,133,74,0.08) 0%, transparent 55%),
radial-gradient(ellipse 30% 25% at 25% 90%, rgba(232,133,74,0.05) 0%, transparent 60%),
radial-gradient(ellipse 30% 35% at 75% 25%, rgba(13,115,119,0.07) 0%, transparent 60%);
animation: login-mesh-drift 22s ease-in-out infinite alternate;
}
.login-right-mesh::after {
content: ''; position: absolute; inset: 0;
background-image: radial-gradient(circle 0.7px, rgba(13,115,119,0.04) 0.7px, transparent 0.7px);
background-size: 26px 26px; opacity: 0.5;
animation: login-dots 28s linear infinite;
}
@keyframes login-mesh-drift {
0% { transform: translate(0, 0) scale(1); }
50% { transform: translate(2.5%, -1.5%) scale(1.02); }
100% { transform: translate(-1%, 2%) scale(1.005); }
}
@keyframes login-dots {
0% { transform: translate(0, 0); }
100% { transform: translate(26px, 26px); }
}
[data-theme="dark"] .login-right { background: #0C1419; }
[data-theme="dark"] .login-right-mesh::before {
background:
radial-gradient(ellipse 40% 35% at 8% 15%, rgba(45,212,191,0.06) 0%, transparent 65%),
radial-gradient(ellipse 35% 30% at 90% 80%, rgba(45,212,191,0.04) 0%, transparent 65%);
}
[data-theme="dark"] .login-right-mesh::after { opacity: 0.08; }
/* --- Card glassmorphism --- */
.login-card {
width: 100%; max-width: 380px; position: relative; z-index: 1;
background: rgba(255,255,255,0.75);
backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
border: 1px solid rgba(255,255,255,0.5);
border-radius: 20px; padding: 40px 36px;
box-shadow: 0 24px 64px rgba(10,22,40,0.06), 0 1px 2px rgba(10,22,40,0.03);
animation: loginFadeIn 0.6s cubic-bezier(0.16,1,0.3,1);
}
[data-theme="dark"] .login-card {
background: rgba(21, 31, 37, 0.8); border-color: rgba(45, 212, 191, 0.08);
box-shadow: 0 24px 64px rgba(8, 16, 20, 0.45), 0 0 0 1px rgba(45, 212, 191, 0.05);
}
@keyframes loginFadeIn {
from { opacity: 0; transform: translateY(20px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.login-back-mobile {
display: none; align-items: center; gap: 6px;
color: var(--color-primary); text-decoration: none;
font-size: 13px; font-weight: 500; margin-bottom: 24px; font-family: var(--font-body);
}
.login-back-mobile:hover { text-decoration: underline; }
.login-title {
font-family: var(--font-display); font-size: 26px; font-weight: 700;
color: var(--color-text); margin-bottom: 6px; letter-spacing: -0.01em;
}
.login-subtitle {
font-size: 13.5px; color: var(--color-text-muted);
margin-bottom: 28px; line-height: 1.5;
}
/* --- Inputs --- */
.login-card .form-group { margin-bottom: 18px; }
.login-card .form-group label {
font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
color: var(--color-text-faint); text-transform: uppercase;
margin-bottom: 7px; display: block;
}
.login-input {
width: 100%; padding: 13px 16px;
border: 1px solid rgba(0,0,0,0.07); border-radius: 10px;
background: rgba(255,255,255,0.6);
font-family: var(--font-body); font-size: 14px; color: var(--color-text);
outline: none; transition: all 180ms cubic-bezier(0.16,1,0.3,1);
}
.login-input:focus {
border-color: var(--color-primary); background: rgba(255,255,255,0.95);
box-shadow: 0 0 0 3px rgba(13,115,119,0.06);
}
.login-input::placeholder { color: var(--color-text-faint); }
[data-theme="dark"] .login-input { background: rgba(12, 20, 25, 0.6); border-color: rgba(79, 209, 197, 0.08); color: #E8ECEF; }
[data-theme="dark"] .login-input:focus { border-color: #4FD1C5; box-shadow: 0 0 0 3px rgba(79, 209, 197, 0.1), 0 0 16px rgba(79, 209, 197, 0.06); background: rgba(12, 20, 25, 0.8); }
/* --- Submit --- */
.login-submit-btn {
display: flex !important; align-items: center; justify-content: center; gap: 8px;
width: 100%; padding: 14px 24px !important; margin-top: 4px;
background: linear-gradient(135deg, #0D7377, #14B8A6) !important;
border: none !important; border-radius: 10px !important;
color: #fff !important; font-size: 12px !important; font-weight: 700 !important;
letter-spacing: 0.08em; cursor: pointer;
transition: all 200ms cubic-bezier(0.16,1,0.3,1) !important;
box-shadow: 0 4px 16px rgba(13,115,119,0.2);
}
.login-submit-btn:hover {
background: linear-gradient(135deg, #0A5C5F, #0D7377) !important;
transform: translateY(-2px); box-shadow: 0 8px 28px rgba(13,115,119,0.28);
}
.login-submit-btn .login-arrow { transition: transform 200ms ease; }
.login-submit-btn:hover .login-arrow { transform: translateX(3px); }
.login-submit-btn .btn-text { order: 1; }
.login-submit-btn .login-arrow { order: 2; }
.login-submit-btn .btn-loading { order: 3; }
/* --- Secure --- */
.login-secure {
display: flex; align-items: center; justify-content: center; gap: 8px;
margin-top: 24px; font-size: 9px; font-weight: 600;
letter-spacing: 0.12em; color: var(--color-text-faint); opacity: 0.5;
}
/* --- Register --- */
.login-register-link { text-align: center; margin-top: 18px; }
.btn-register-toggle {
background: none; border: none; color: var(--color-primary); font-size: 13px;
font-weight: 600; cursor: pointer; font-family: var(--font-body); transition: color 0.15s;
}
.btn-register-toggle:hover { color: #0A5C5F; text-decoration: underline; }
[data-theme="dark"] .btn-register-toggle { color: #4FD1C5; }
.login-register-divider { display: flex; align-items: center; gap: 12px; margin: 4px 0 18px; }
.login-register-divider::before, .login-register-divider::after { content: ""; flex: 1; height: 1px; background: rgba(0,0,0,0.06); }
.login-register-divider span { font-size: 10px; font-weight: 600; color: var(--color-primary); white-space: nowrap; text-transform: uppercase; letter-spacing: 0.06em; }
[data-theme="dark"] .login-register-divider span { color: #4FD1C5; }
[data-theme="dark"] .login-register-divider::before, [data-theme="dark"] .login-register-divider::after { background: var(--color-border); }
.login-card #register-form-wrap input {
width: 100%; padding: 13px 16px;
border: 1px solid rgba(0,0,0,0.07); border-radius: 10px;
background: rgba(255,255,255,0.6);
font-family: var(--font-body); font-size: 14px; color: var(--color-text);
outline: none; transition: all 180ms ease;
}
.login-card #register-form-wrap input:focus {
border-color: var(--color-primary); background: rgba(255,255,255,0.95);
box-shadow: 0 0 0 3px rgba(13,115,119,0.06);
}
.btn-register-back {
display: block; width: 100%; text-align: center; margin-top: 10px;
font-size: 13px; color: var(--color-text-muted); cursor: pointer;
}
.btn-register-back:hover { color: var(--color-text); }
/* --- Mobile --- */
@media (max-width: 768px) {
#login-screen { flex-direction: column; }
.login-left { display: none; }
.login-right { padding: 24px; min-height: 100vh; }
.login-back-mobile { display: inline-flex; }
.login-card { max-width: 100%; padding: 32px 24px; background: rgba(255,255,255,0.85); }
}
/* Registration flow screens */
.reg-screen { text-align: center; padding: 10px 0 }
.reg-icon {
width: 64px; height: 64px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
margin: 0 auto 16px
}
.reg-title {
font-family: var(--font-display); font-size: 20px; font-weight: 700;
color: #0A1628; margin: 0 0 8px
}
[data-theme="dark"] .reg-title { color: var(--color-text) }
.reg-text { font-size: 14px; color: #5A6578; margin: 0 0 6px; line-height: 1.5 }
.reg-email {
font-size: 14px; font-weight: 600; color: #0D7377; margin: 0 0 12px
}
.reg-hint {
font-size: 12px; color: #9CA3AF; margin: 0 0 20px; line-height: 1.5
}
.reg-divider {
display: flex; align-items: center; gap: 10px; margin: 16px 0
}
.reg-divider::before, .reg-divider::after {
content: ""; flex: 1; height: 1px; background: var(--color-divider)
}
.reg-divider span { font-size: 10px; color: #9CA3AF; text-transform: uppercase; letter-spacing: 0.05em }
/* Registration steps progress */
.reg-steps {
text-align: left; margin: 16px 0 20px; padding: 16px;
background: #FAFAF8; border-radius: 12px
}
[data-theme="dark"] .reg-steps { background: var(--color-surface-2) }
.reg-step {
display: flex; align-items: center; gap: 10px;
font-size: 13px; color: #9CA3AF; padding: 6px 0
}
.reg-step.done { color: #0D7377 }
.reg-step.active { color: #0A1628; font-weight: 600 }
[data-theme="dark"] .reg-step.active { color: var(--color-text) }
.reg-step-icon { width: 20px; text-align: center; font-size: 12px }
.reg-step.done .reg-step-icon { color: #0D7377 }
.reg-step.active .reg-step-icon { color: #E8860C }
/* Delete formateur button on card */
.fmp-delete {
background: none; border: none; color: #D4D2CC; cursor: pointer;
padding: 4px; border-radius: 6px; display: flex; transition: all 0.15s;
margin-left: auto
}
.fmp-delete:hover { color: #DC2626; background: #FDE8E8 }
[data-theme="dark"] .fmp-delete:hover { color: #F87171; background: rgba(248,113,113,0.1) }
.btn-register-back {
display: block; width: 100%; margin-top: 12px; background: none;
border: none; color: #9CA3AF; font-size: 13px; cursor: pointer;
font-family: var(--font-body); text-align: center
}
.btn-register-back:hover { color: #5A6578 }
/* ===== FORM GROUP ===== */
.form-group { margin-bottom: var(--space-5) }
.form-group label {
display: block; font-size: var(--text-sm); font-weight: 500;
color: var(--color-text); margin-bottom: var(--space-2)
}
.form-group input, .form-group select, .form-group textarea {
width: 100%; padding: var(--space-3) var(--space-4);
background: var(--color-surface-2);
border: 1px solid var(--color-border); border-radius: var(--radius-md);
font-size: var(--text-base);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast)
}
.form-group input:hover { border-color: var(--color-text-muted) }
.form-group input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-bg) }
.form-group input::placeholder { color: var(--color-text-faint) }
.form-error {
font-size: var(--text-sm); color: var(--color-error); background: var(--color-error-bg);
padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); margin-bottom: var(--space-4)
}
/* ===== QUICK ACCESS (login dev) ===== */
.quick-access { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--color-divider) }
.quick-access-label {
font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em;
color: var(--color-text-faint); margin-bottom: var(--space-3); font-weight: 600
}
.quick-access-buttons { display: flex; flex-direction: column; gap: var(--space-2) }
.btn-quick {
display: block; width: 100%; padding: var(--space-2) var(--space-3);
background: var(--color-surface-2);
border: 1px solid var(--color-divider); border-radius: var(--radius-md);
font-size: var(--text-sm); color: var(--color-text-muted); cursor: pointer; text-align: left;
transition: all .2s var(--ease); font-family: var(--font-body)
}
[data-theme="dark"] .btn-quick {
background: var(--color-surface-2);
border-color: var(--color-border)
}
.btn-quick:hover { background: var(--color-primary-bg); border-color: var(--color-primary); color: var(--color-primary) }
/* ===== BUTTONS ===== */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
padding: var(--space-3) var(--space-6); font-size: var(--text-sm); font-weight: 600;
border-radius: var(--radius-btn);
transition: all 0.25s var(--ease);
white-space: nowrap; line-height: 1.4
}
.btn:active { transform: scale(.97) }
/* Primary button -- solid teal */
.btn-primary {
background: linear-gradient(135deg, #14B8A6, #0D7377);
color: var(--color-text-inverse);
box-shadow: 0 2px 8px rgba(13, 115, 119, 0.25)
}
.btn-primary::after {
content: ''; display: none
}
.btn-primary:hover {
background: #0A5C5F;
box-shadow: 0 4px 12px rgba(13, 115, 119, 0.25);
transform: translateY(-1px)
}
.btn-primary:hover::after {
display: none
}
.btn-primary:active {
background: #084547;
transform: scale(.97) translateY(0)
}
[data-theme="dark"] .btn-primary {
background: #14B8A6;
color: #0F172A;
box-shadow: 0 1px 3px rgba(20, 184, 166, 0.25)
}
[data-theme="dark"] .btn-primary:hover {
background: #2DD4BF;
box-shadow: 0 4px 12px rgba(20, 184, 166, 0.30)
}
.btn-secondary {
background: #FFFFFF; color: var(--color-text);
border: 1px solid #D4D0CB
}
.btn-secondary:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-bg) }
.btn-danger { background: var(--color-error); color: var(--color-text-inverse) }
.btn-danger:hover { background: #B91C1C }
/* Back button — teal gradient with arrow */
.btn-back {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 16px; border-radius: 10px; border: none; cursor: pointer;
background: linear-gradient(135deg, #14B8A6, #0D7377);
color: #fff; font-size: 13px; font-weight: 600;
text-decoration: none; font-family: var(--font-body);
box-shadow: 0 2px 8px rgba(13,115,119,0.2);
transition: all 0.15s; line-height: 1.4
}
.btn-back:hover {
box-shadow: 0 4px 16px rgba(13,115,119,0.3);
transform: translateY(-1px)
}
.btn-back svg { flex-shrink: 0 }
[data-theme="dark"] .btn-back {
background: linear-gradient(135deg, #14B8A6, #0D7377);
box-shadow: 0 2px 8px rgba(20,184,166,0.25)
}
/* Edit session button — outlined teal with icon */
.btn-edit-session {
display: inline-flex; align-items: center; gap: 7px;
padding: 8px 16px; border-radius: 10px; cursor: pointer;
background: #fff;
color: #0D7377; font-size: 13px; font-weight: 600;
border: 1.5px solid rgba(13, 115, 119, 0.25);
text-decoration: none; font-family: var(--font-body);
box-shadow: 0 1px 3px rgba(13,115,119,0.05);
transition: all 0.15s; line-height: 1.4
}
.btn-edit-session:hover {
background: linear-gradient(135deg, #E8F4F5, #D0EBEC);
border-color: #0D7377;
box-shadow: 0 4px 14px rgba(13,115,119,0.18);
transform: translateY(-1px)
}
.btn-edit-session svg { flex-shrink: 0 }
[data-theme="dark"] .btn-edit-session {
background: var(--color-surface);
color: #4FD1C5;
border-color: rgba(79, 209, 197, 0.3)
}
[data-theme="dark"] .btn-edit-session:hover {
background: rgba(79, 209, 197, 0.08);
border-color: #4FD1C5
}
/* Clickable stepper in edit mode */
.stepper--clickable .stepper-step { transition: transform 0.15s }
.stepper--clickable .stepper-step:hover { transform: translateY(-2px) }
.stepper--clickable .stepper-step:hover .stepper-num {
box-shadow: 0 4px 14px rgba(13, 115, 119, 0.25)
}
.btn-ghost {
background: #fff; color: #0D7377; border: 1px solid #D0EBEC;
border-radius: 10px; box-shadow: var(--shadow-sm);
font-weight: 600; gap: 6px;
transition: all 0.15s
}
.btn-ghost:hover {
background: linear-gradient(135deg, #E8F4F5, #D0EBEC);
border-color: #0D7377; color: #0A5C5F;
box-shadow: var(--shadow-hover); transform: translateY(-1px)
}
[data-theme="dark"] .btn-ghost {
background: var(--color-surface); color: #2DD4BF;
border-color: rgba(20,184,166,0.2)
}
[data-theme="dark"] .btn-ghost:hover {
background: rgba(20,184,166,0.08); border-color: #14B8A6;
color: #5EEAD4
}
.btn-sm { padding: var(--space-2) var(--space-4); font-size: var(--text-xs) }
.btn-block { width: 100% }
.btn .spinner { animation: spin 1s linear infinite }
.btn-text { /* inline text inside button */ }
.btn-loading { /* loading spinner wrapper */ }
@keyframes spin { to { transform: rotate(360deg) } }
/* ===== DASHBOARD LAYOUT ===== */
.dashboard-layout { display: flex; min-height: 100vh }
/* ===== SIDEBAR -- WHITE, H-care style, NO border-right, NO box-shadow ===== */
#sidebar {
position: fixed; top: 0; left: 0; bottom: 0;
width: var(--sidebar-width);
background: #FFFFFF;
display: flex; flex-direction: column;
z-index: 100; overflow-y: auto;
padding: 24px 20px;
border-right: 1px solid #F0EFEB;
transition: transform 0.35s var(--ease)
}
#sidebar::before {
content: ''; display: none
}
[data-theme="dark"] #sidebar {
background: var(--color-sidebar);
}
/* Sidebar header -- logo area */
.sidebar-header {
display: flex; align-items: center; justify-content: space-between;
height: 64px; min-height: 64px;
padding: 0 4px;
margin: -24px -20px 20px;
padding-left: 20px; padding-right: 20px;
border-bottom: none;
position: relative
}
.sidebar-logo { margin-bottom: 0; padding: 0; display: flex; align-items: center; gap: 10px }
.sidebar-logo-mark { width: 3px; height: 36px; background: #0D7377; border-radius: 2px; flex-shrink: 0 }
.sidebar-logo-text { display: flex; flex-direction: column }
.logo-origin { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: #0D7377; line-height: 1.15 }
.logo-education { font-family: var(--font-display); font-size: 20px; font-weight: 400; color: #0A1628; line-height: 1.15 }
.sidebar-brand {
font-family: var(--font-display); font-size: var(--text-lg);
font-weight: 700; color: #0A1628
}
[data-theme="dark"] .sidebar-brand { color: #E8ECEF }
[data-theme="dark"] .logo-origin { color: #4FD1C5 }
[data-theme="dark"] .logo-education { color: #E8ECEF }
.sidebar-close {
display: none; color: var(--color-sidebar-text);
padding: var(--space-2); border-radius: var(--radius-md)
}
.sidebar-close:hover { background: var(--color-sidebar-hover); color: var(--color-text) }
/* Sidebar CTA button */
.sidebar-cta {
padding: 0; margin-bottom: 32px
}
.btn-cta-sidebar {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
width: 100%; padding: 12px 16px;
background: linear-gradient(135deg, #14B8A6, #0D7377); color: #fff;
border: none; border-radius: 12px;
font-family: var(--font-body); font-size: 14px; font-weight: 600;
cursor: pointer; margin-bottom: 32px;
transition: all 0.2s;
box-shadow: 0 2px 8px rgba(13, 115, 119, 0.2)
}
.btn-cta-sidebar:hover { box-shadow: 0 4px 16px rgba(13, 115, 119, 0.3); transform: translateY(-1px) }
.btn-cta-sidebar:active { transform: scale(0.98) }
.btn-cta-sidebar svg {
width: 18px; height: 18px; stroke: currentColor; fill: none;
stroke-width: 2; stroke-linecap: round; stroke-linejoin: round
}
/* Sidebar navigation */
.sidebar-nav {
flex: 1; display: flex; flex-direction: column; gap: 2px
}
.sidebar-nav-main {
display: flex; flex-direction: column; gap: 2px
}
.sidebar-nav-separator {
height: 1px; background: transparent; margin: auto 0 8px 0
}
[data-theme="dark"] .sidebar-nav-separator {
background: transparent
}
.sidebar-nav-bottom {
display: flex; flex-direction: column; gap: 2px
}
/* Settings popover */
.settings-popover-wrap { position: relative }
.settings-popover {
position: absolute; bottom: calc(100% + 8px); left: 8px; right: 8px;
background: #fff; border-radius: 12px;
box-shadow: 0 8px 30px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
border: 1px solid #E8E6E1;
padding: 6px; z-index: 100;
opacity: 0; visibility: hidden;
transform: translateY(8px);
transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
pointer-events: none;
}
.settings-popover.open {
opacity: 1; visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
[data-theme="dark"] .settings-popover {
background: var(--color-surface); border-color: var(--color-border);
box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}
.settings-popover-item {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px; border-radius: 8px;
font-size: 13px; font-weight: 500; color: #0A1628;
text-decoration: none; cursor: pointer;
transition: background 0.12s;
background: none; border: none; width: 100%; font-family: 'Inter', sans-serif;
}
.settings-popover-item:hover { background: #F8F6F3 }
[data-theme="dark"] .settings-popover-item { color: var(--color-text) }
[data-theme="dark"] .settings-popover-item:hover { background: var(--color-surface-2) }
.settings-popover-item svg { color: #5A6578; flex-shrink: 0 }
.settings-popover-sep {
height: 1px; background: #F0EFEB; margin: 4px 8px;
}
[data-theme="dark"] .settings-popover-sep { background: var(--color-border) }
.settings-popover-logout { color: #DC2626 }
.settings-popover-logout svg { color: #DC2626 }
.settings-popover-logout:hover { background: #FDE8E8 }
[data-theme="dark"] .settings-popover-logout:hover { background: rgba(220,38,38,0.1) }
#settings-trigger {
cursor: pointer; background: none; border: none; width: 100%;
text-align: left; font-family: 'Inter', sans-serif;
}
/* Nav item */
.nav-item {
display: flex; align-items: center; gap: 12px;
padding: 10px 12px; border-radius: 10px;
font-size: 15px; font-weight: 400; color: #5A6578;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
text-decoration: none; transition: background 0.15s, color 0.15s
}
.nav-item:hover {
background: rgba(13, 115, 119, 0.06);
color: #0D7377;
box-shadow: 0 4px 16px rgba(13, 115, 119, 0.1);
transform: translateX(2px);
}
.nav-item:hover .nav-icon { opacity: 1; stroke: #0D7377 }
[data-theme="dark"] .nav-item { color: var(--color-sidebar-text) }
[data-theme="dark"] .nav-item:hover {
background: rgba(79, 209, 197, 0.08);
color: #4FD1C5;
box-shadow: 0 4px 16px rgba(79, 209, 197, 0.1);
}
[data-theme="dark"] .nav-item:hover .nav-icon { stroke: #4FD1C5 }
.nav-item.active {
background: rgba(13, 115, 119, 0.08); color: #0D7377; font-weight: 500
}
.nav-item.active::before {
content: ''; display: none
}
[data-theme="dark"] .nav-item.active {
background: var(--color-sidebar-active);
color: var(--color-sidebar-text-active)
}
[data-theme="dark"] .nav-item.active::before { display: none }
.nav-item.active .nav-icon { stroke: #0D7377; opacity: 1 }
[data-theme="dark"] .nav-item.active .nav-icon { stroke: #4FD1C5 }
.nav-icon { width: 20px; height: 20px; opacity: 0.5; flex-shrink: 0 }
.nav-item:hover .nav-icon { opacity: 0.8 }
.nav-item.active .nav-icon { color: #0D7377; opacity: 1 }
/* Sidebar footer */
.sidebar-footer { padding-top: 16px; border-top: 1px solid #E5E7EB; margin-top: 8px }
[data-theme="dark"] .sidebar-footer { border-top-color: var(--color-divider) }
.sidebar-user { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3) }
.sidebar-user-avatar {
width: 36px; height: 36px; border-radius: var(--radius-full);
background: #0D7377;
display: flex; align-items: center; justify-content: center;
color: #FFFFFF; font-family: var(--font-display);
font-weight: 700; font-size: var(--text-sm); flex-shrink: 0
}
[data-theme="dark"] .sidebar-user-avatar { background: #4FD1C5; color: #14161B }
.sidebar-user-name { font-size: var(--text-sm); font-weight: 600; color: #0A1628; line-height: 1.3 }
[data-theme="dark"] .sidebar-user-name { color: #E8ECEF }
.sidebar-user-role { font-size: var(--text-xs); color: #6B7280; line-height: 1.3 }
[data-theme="dark"] .sidebar-user-role { color: var(--color-sidebar-text) }
.sidebar-user-info { min-width: 0 }
.btn-sidebar-logout {
width: 100%; display: flex; align-items: center; gap: var(--space-2);
padding: var(--space-3) var(--space-4); font-size: var(--text-sm);
color: #6B7280; border-radius: var(--radius-md);
transition: background var(--transition-fast), color var(--transition-fast)
}
.btn-sidebar-logout:hover { background: rgba(220, 38, 38, .12); color: #F87171 }
/* Sidebar promo card */
.sidebar-promo {
display: block;
text-decoration: none;
background: linear-gradient(135deg, rgba(13,115,119,0.06), rgba(20,184,166,0.08));
border: 1px solid rgba(13,115,119,0.12);
border-radius: var(--radius-card);
padding: 14px 16px;
margin-top: 16px;
transition: all 200ms cubic-bezier(0.16,1,0.3,1);
cursor: pointer;
overflow: hidden;
position: relative;
}
.sidebar-promo::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 2.5px;
background: linear-gradient(90deg, #0D7377, #14B8A6);
opacity: 0.6;
transition: opacity 200ms ease;
}
.sidebar-promo:hover {
border-color: rgba(13,115,119,0.25);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(13,115,119,0.12);
}
.sidebar-promo:hover::before { opacity: 1; }
.promo-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
.promo-logo {
flex-shrink: 0;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(13,115,119,0.15);
}
.promo-info {
display: flex;
flex-direction: column;
min-width: 0;
}
.promo-name {
font-family: var(--font-display);
font-size: 13px;
font-weight: 700;
color: var(--color-text);
line-height: 1.2;
}
.promo-url {
font-size: 11px;
color: var(--color-primary);
font-weight: 500;
opacity: 0.8;
}
.promo-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 10px;
border-top: 1px solid rgba(13,115,119,0.10);
}
.promo-cta {
font-size: 11.5px;
font-weight: 600;
color: var(--color-primary);
font-family: var(--font-body);
}
.promo-footer svg {
color: var(--color-primary);
opacity: 0.5;
transition: all 200ms ease;
}
.sidebar-promo:hover .promo-footer svg {
opacity: 1;
transform: translate(2px, -2px);
}
[data-theme="dark"] .sidebar-promo {
background: linear-gradient(135deg, rgba(20,184,166,0.06), rgba(20,184,166,0.10));
border-color: rgba(20,184,166,0.15);
}
[data-theme="dark"] .sidebar-promo:hover {
border-color: rgba(20,184,166,0.30);
box-shadow: 0 6px 20px rgba(20,184,166,0.10);
}
[data-theme="dark"] .sidebar-promo::before {
background: linear-gradient(90deg, #14B8A6, #2DD4BF);
}
[data-theme="dark"] .promo-name { color: var(--color-text); }
[data-theme="dark"] .promo-url { color: #4FD1C5; }
[data-theme="dark"] .promo-cta { color: #4FD1C5; }
[data-theme="dark"] .promo-footer { border-color: rgba(79,209,197,0.12); }
[data-theme="dark"] .promo-footer svg { color: #4FD1C5; }
/* ===== SIDEBAR OVERLAY (mobile) ===== */
.sidebar-overlay {
display: none; position: fixed; inset: 0;
background: rgba(0, 0, 0, .5);
z-index: 99
}
.sidebar-overlay.open { display: block; animation: fadeIn .2s ease }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
/* ===== MAIN CONTENT ===== */
.dashboard-main {
flex: 1; margin-left: var(--sidebar-width);
background: var(--color-bg);
min-height: 100vh; overflow-y: auto;
padding-top: 0;
position: relative
}
.dashboard-main > * { position: relative; z-index: 1 }
/* Animated gradient mesh background — same as hero */
.dashboard-mesh {
position: fixed;
top: 0; left: var(--sidebar-width); right: 0; bottom: 0;
z-index: 0; pointer-events: none;
overflow: hidden
}
.dashboard-mesh::before {
content: '';
position: absolute;
inset: -40%;
background:
radial-gradient(ellipse 50% 55% at 15% 25%, rgba(13,115,119,0.14) 0%, transparent 70%),
radial-gradient(ellipse 40% 45% at 80% 60%, rgba(13,115,119,0.10) 0%, transparent 70%),
radial-gradient(ellipse 55% 65% at 55% 15%, rgba(232,133,74,0.08) 0%, transparent 60%),
radial-gradient(ellipse 30% 35% at 40% 75%, rgba(232,133,74,0.05) 0%, transparent 65%),
radial-gradient(ellipse 45% 40% at 90% 20%, rgba(13,115,119,0.07) 0%, transparent 60%);
animation: dashboard-mesh-drift 18s ease-in-out infinite alternate
}
.dashboard-mesh::after {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle 1px, rgba(13,115,119,0.06) 1px, transparent 1px);
background-size: 32px 32px;
opacity: 0.5;
animation: dashboard-dots 25s linear infinite
}
@keyframes dashboard-mesh-drift {
0% { transform: translate(0, 0) rotate(0deg) scale(1); }
33% { transform: translate(3%, -2%) rotate(1deg) scale(1.02); }
66% { transform: translate(-2%, 3%) rotate(-0.5deg) scale(0.98); }
100% { transform: translate(1%, 1%) rotate(0.5deg) scale(1.01); }
}
@keyframes dashboard-dots {
0% { transform: translate(0, 0); }
100% { transform: translate(32px, 32px); }
}
[data-theme="dark"] .dashboard-main {
background: var(--color-bg)
}
[data-theme="dark"] .dashboard-mesh::before {
background:
radial-gradient(ellipse 50% 55% at 15% 25%, rgba(20,184,166,0.08) 0%, transparent 70%),
radial-gradient(ellipse 40% 45% at 80% 60%, rgba(20,184,166,0.05) 0%, transparent 70%),
radial-gradient(ellipse 55% 65% at 55% 15%, rgba(232,133,74,0.04) 0%, transparent 60%)
}
[data-theme="dark"] .dashboard-mesh::after { opacity: 0.3 }
/* ===== TOP BAR — full-width white band aligned with sidebar logo ===== */
.dashboard-topbar {
display: flex; align-items: center; gap: 16px;
height: 58px;
padding: 0 20px;
margin: 0;
background: #fff;
border-bottom: 1px solid #E8E6E1;
position: sticky; top: 0; z-index: 10
}
[data-theme="dark"] .dashboard-topbar {
background: var(--color-surface);
border-bottom-color: var(--color-border)
}
/* Topbar left section */
.topbar-left {
display: flex; align-items: center; gap: 16px; flex: 1
}
.sidebar-toggle { display: none; padding: var(--space-2); border-radius: var(--radius-md); color: var(--color-text-muted) }
.sidebar-toggle:hover { background: var(--color-surface-2); color: var(--color-text) }
.topbar-title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; color: var(--color-text) }
/* Topbar search — minimal H-care style */
.topbar-search {
display: flex; align-items: center; gap: 10px;
padding: 0; padding-left: 24px; background: transparent;
border: none; border-radius: 0;
flex: 1; min-width: 0
}
[data-theme="dark"] .topbar-search { background: transparent; border: none }
.topbar-search-icon { width: 18px; height: 18px; color: #9CA3AF; flex-shrink: 0 }
.topbar-search input,
.topbar-search-input {
border: none; background: none; outline: none;
font-size: 15px; font-family: var(--font-body); color: #6B7280;
width: 100%; flex: 1
}
.topbar-search input::placeholder,
.topbar-search-input::placeholder { color: #9CA3AF; font-weight: 400 }
.topbar-search-input:focus,
.topbar-search input:focus { color: var(--color-text) }
[data-theme="dark"] .topbar-search input,
[data-theme="dark"] .topbar-search-input { color: var(--color-text) }
/* ===== SEARCH DROPDOWN ===== */
.search-dropdown {
position: absolute; top: calc(100% + 8px); left: 0; right: 0;
background: #fff; border: 1px solid #E8E6E1; border-radius: 14px;
box-shadow: 0 12px 40px rgba(0,0,0,0.12); padding: 6px;
max-height: 420px; overflow-y: auto; z-index: 9999;
opacity: 0; transform: translateY(-6px); pointer-events: none;
transition: opacity 0.2s, transform 0.2s
}
.search-dropdown.open {
opacity: 1; transform: translateY(0); pointer-events: auto
}
[data-theme="dark"] .search-dropdown {
background: var(--color-surface); border-color: var(--color-border);
box-shadow: 0 12px 40px rgba(0,0,0,0.3)
}
.search-dropdown::-webkit-scrollbar { width: 4px }
.search-dropdown::-webkit-scrollbar-thumb { background: #D4D2CC; border-radius: 4px }
.search-category { margin-bottom: 2px }
.search-category:last-child { margin-bottom: 0 }
.search-category-label {
display: flex; align-items: center; gap: 8px;
padding: 8px 12px 4px; font-size: 10px; font-weight: 700;
color: #9CA3AF; text-transform: uppercase; letter-spacing: 0.5px
}
.search-category-label svg { width: 14px; height: 14px; flex-shrink: 0 }
.search-result-item {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px; border-radius: 10px; cursor: pointer;
transition: background 0.12s
}
.search-result-item:hover, .search-result-item.active { background: #F0FAF9 }
[data-theme="dark"] .search-result-item:hover,
[data-theme="dark"] .search-result-item.active { background: var(--color-surface-2) }
.search-result-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px }
.search-result-name {
font-size: 13px; font-weight: 600; color: #0A1628;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis
}
[data-theme="dark"] .search-result-name { color: var(--color-text) }
.search-result-sub {
font-size: 11px; color: #9CA3AF;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis
}
.search-result-arrow { color: #D4D2CC; flex-shrink: 0; transition: color 0.12s }
.search-result-item:hover .search-result-arrow { color: #0D7377 }
.search-empty {
display: flex; align-items: center; justify-content: center; gap: 8px;
padding: 24px 16px; font-size: 13px; color: #9CA3AF
}
/* Topbar spacer */
.topbar-spacer { flex: 1; min-width: 0 }
/* Topbar actions */
.topbar-actions { display: flex; align-items: center; gap: 16px }
/* Topbar notification button */
.topbar-notif-btn {
width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
background: none; border: none; cursor: pointer; color: #5A6578;
border-radius: 8px; transition: background 0.15s
}
.topbar-notif-btn:hover { background: #F5F5F5 }
[data-theme="dark"] .topbar-notif-btn:hover { background: var(--color-surface-2) }
/* Legacy notification button class */
.topbar-notification-btn {
width: 36px; height: 36px;
border-radius: 8px;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: background 0.15s;
background: none; border: none; color: var(--color-text-muted)
}
.topbar-notification-btn:hover { background: #F5F5F5 }
[data-theme="dark"] .topbar-notification-btn:hover { background: var(--color-surface-2) }
/* Notification badge */
.notif-badge {
position: absolute; top: 2px; right: 2px;
min-width: 16px; height: 16px; padding: 0 4px;
background: #DC2626; color: #fff;
font-size: 10px; font-weight: 700; font-family: 'Inter', sans-serif;
border-radius: 8px; display: flex; align-items: center; justify-content: center;
line-height: 1; pointer-events: none;
box-shadow: 0 1px 3px rgba(220,38,38,0.4);
}
/* Notification dropdown */
.notif-dropdown {
position: absolute; top: 44px; right: 0; z-index: 1000;
width: 360px; max-height: 420px;
background: #fff; border-radius: 16px;
box-shadow: 0 12px 40px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
border: 1px solid #E8E6E1;
overflow: hidden;
opacity: 0; visibility: hidden;
transform: translateY(-8px);
transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}
.notif-dropdown.open {
opacity: 1; visibility: visible;
transform: translateY(0);
}
[data-theme="dark"] .notif-dropdown {
background: var(--color-surface); border-color: var(--color-border);
box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}
.notif-dd-header {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 18px; border-bottom: 1px solid #F0EFEB;
}
[data-theme="dark"] .notif-dd-header { border-color: var(--color-border) }
.notif-dd-title { font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 700; color: #0A1628 }
[data-theme="dark"] .notif-dd-title { color: var(--color-text) }
.notif-dd-markall {
background: none; border: none; color: #0D7377; font-size: 12px; font-weight: 600;
cursor: pointer; font-family: 'Inter', sans-serif;
}
.notif-dd-markall:hover { text-decoration: underline }
.notif-dd-list { overflow-y: auto; max-height: 360px }
.notif-dd-empty {
padding: 40px 20px; text-align: center;
font-size: 13px; color: #9CA3AF;
}
.notif-dd-item {
display: flex; align-items: flex-start; gap: 10px;
padding: 12px 18px; cursor: pointer;
border-bottom: 1px solid #F8F7F5;
transition: background 0.12s;
}
.notif-dd-item:hover { background: #F8F6F3 }
[data-theme="dark"] .notif-dd-item:hover { background: var(--color-surface-2) }
[data-theme="dark"] .notif-dd-item { border-color: var(--color-border) }
.notif-dd-item.unread { background: #F0FAF9 }
[data-theme="dark"] .notif-dd-item.unread { background: rgba(79,209,197,0.08) }
.notif-dd-icon {
width: 32px; height: 32px; border-radius: 8px;
background: #F0EFEB; display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
[data-theme="dark"] .notif-dd-icon { background: var(--color-surface-2) }
.notif-dd-content { flex: 1; min-width: 0 }
.notif-dd-text { font-size: 13px; color: #0A1628; line-height: 1.4 }
[data-theme="dark"] .notif-dd-text { color: var(--color-text) }
.notif-dd-time { font-size: 11px; color: #9CA3AF; margin-top: 2px }
.notif-dd-dot {
width: 8px; height: 8px; border-radius: 50%;
background: #0D7377; flex-shrink: 0; margin-top: 6px;
}
@media (max-width: 480px) {
.notif-dropdown { width: calc(100vw - 32px); right: -60px }
}
/* Theme toggle */
.theme-toggle {
padding: var(--space-2); border-radius: var(--radius-md);
color: var(--color-text-muted);
transition: background var(--transition-fast), color var(--transition-fast)
}
.theme-toggle:hover { background: var(--color-surface-2); color: var(--color-text) }
[data-theme="light"] .icon-moon, [data-theme="dark"] .icon-sun { display: none }
[data-theme="light"] .icon-sun, [data-theme="dark"] .icon-moon { display: block }
/* Topbar user */
.topbar-user {
display: flex; align-items: center; gap: 10px; cursor: pointer
}
.topbar-avatar {
width: 36px; height: 36px; border-radius: 50%;
background: #0D7377; color: #fff;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display); font-weight: 700; font-size: 13px;
flex-shrink: 0
}
[data-theme="dark"] .topbar-avatar { background: #4FD1C5; color: #14161B }
.topbar-user-name { font-size: 14px; font-weight: 500; color: var(--color-text) }
.topbar-chevron { color: #9CA3AF }
.topbar-user-chevron {
width: 16px; height: 16px; color: var(--color-text-muted)
}
/* ===== MAIN APP AREA ===== */
#dashboard-app { padding: 60px 16px 8px; max-width: 1600px; margin: 0 auto }
/* ===== CARD -- White, subtle shadow, no border ===== */
.card {
background: #fff; border-radius: 14px;
padding: 24px; box-shadow: var(--shadow-card);
transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease)
}
.card:hover {
box-shadow: var(--shadow-hover);
transform: translateY(-3px)
}
[data-theme="dark"] .card {
background: var(--color-surface);
box-shadow: var(--shadow-sm)
}
[data-theme="dark"] .card:hover {
box-shadow: var(--shadow-hover);
transform: translateY(-3px)
}
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4) }
.card-title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; color: var(--color-text) }
.card-subtitle { font-size: var(--text-sm); color: var(--color-text-muted) }
/* ===== KPI CARDS -- H-care style: icon circle + big number ===== */
.kpi-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 16px
}
.kpi-card {
background: #fff; border-radius: 14px; padding: 18px 20px;
box-shadow: var(--shadow-card);
display: flex; align-items: center; gap: 16px;
position: relative;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
cursor: pointer
}
a.kpi-card { text-decoration: none; color: inherit }
.kpi-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(13, 115, 119, 0.18), 0 0 0 1px rgba(13, 115, 119, 0.08);
border-color: rgba(13, 115, 119, 0.15);
}
.kpi-card:hover .kpi-value { color: #0D7377 }
.kpi-card:hover .kpi-icon-circle {
background: linear-gradient(135deg, #0D7377, #14B8A6) !important;
box-shadow: 0 4px 16px rgba(13, 115, 119, 0.3);
}
.kpi-card:hover .kpi-icon-circle svg { color: #fff !important }
.kpi-label-link {
text-decoration: none; color: #0D7377; cursor: pointer; transition: color 0.15s;
font-size: inherit; font-weight: inherit; font-family: inherit
}
.kpi-label-link:hover { color: #0A5C5F; text-decoration: underline }
[data-theme="dark"] .kpi-label-link { color: #4FD1C5 }
[data-theme="dark"] .kpi-label-link:hover { color: #5EEAD4 }
[data-theme="dark"] .kpi-card {
background: var(--color-surface);
box-shadow: var(--shadow-sm), 0 0 0 1px rgba(45, 212, 191, 0.06);
border: 1px solid rgba(45, 212, 191, 0.06)
}
[data-theme="dark"] .kpi-card:hover {
box-shadow: 0 8px 30px rgba(79, 209, 197, 0.2), 0 0 0 1px rgba(79, 209, 197, 0.15);
border-color: rgba(79, 209, 197, 0.2)
}
[data-theme="dark"] .kpi-card:hover .kpi-value { color: #4FD1C5 }
[data-theme="dark"] .kpi-card:hover .kpi-icon-circle {
background: linear-gradient(135deg, #4FD1C5, #14B8A6) !important;
box-shadow: 0 4px 16px rgba(79, 209, 197, 0.3);
}
[data-theme="dark"] .kpi-card:hover .kpi-icon-circle svg { color: #0A1628 !important }
/* KPI Icon Circle */
.kpi-icon-circle {
width: 42px; height: 42px;
border-radius: 14px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0
}
.kpi-icon-circle svg {
width: 22px; height: 22px;
}
/* KPI Icon Colors via nth-child — filled icons with site vitrine colors */
.kpi-card:nth-child(1) .kpi-icon-circle,
.kpi-card:nth-child(2) .kpi-icon-circle,
.kpi-card:nth-child(3) .kpi-icon-circle,
.kpi-card:nth-child(4) .kpi-icon-circle,
.kpi-card:nth-child(5) .kpi-icon-circle { background: linear-gradient(135deg, #E8F4F5 0%, #D0EBEC 100%) }
.kpi-card:nth-child(1) .kpi-icon-circle svg,
.kpi-card:nth-child(2) .kpi-icon-circle svg,
.kpi-card:nth-child(3) .kpi-icon-circle svg,
.kpi-card:nth-child(4) .kpi-icon-circle svg,
.kpi-card:nth-child(5) .kpi-icon-circle svg { color: #0D7377 }
[data-theme="dark"] .kpi-icon-circle { background: rgba(79, 209, 197, 0.10); box-shadow: 0 0 12px rgba(79, 209, 197, 0.08) }
[data-theme="dark"] .kpi-icon-circle svg { color: #4FD1C5 }
[data-theme="dark"] .kpi-card:nth-child(1) .kpi-icon-circle,
[data-theme="dark"] .kpi-card:nth-child(2) .kpi-icon-circle,
[data-theme="dark"] .kpi-card:nth-child(3) .kpi-icon-circle,
[data-theme="dark"] .kpi-card:nth-child(4) .kpi-icon-circle,
[data-theme="dark"] .kpi-card:nth-child(5) .kpi-icon-circle { background: rgba(79, 209, 197, 0.10); box-shadow: 0 0 12px rgba(79, 209, 197, 0.08) }
[data-theme="dark"] .kpi-card:nth-child(1) .kpi-icon-circle svg,
[data-theme="dark"] .kpi-card:nth-child(2) .kpi-icon-circle svg,
[data-theme="dark"] .kpi-card:nth-child(3) .kpi-icon-circle svg,
[data-theme="dark"] .kpi-card:nth-child(4) .kpi-icon-circle svg,
[data-theme="dark"] .kpi-card:nth-child(5) .kpi-icon-circle svg { color: #4FD1C5 }
.kpi-content { flex: 1; min-width: 0 }
.kpi-value {
font-family: var(--font-display); font-size: 24px; font-weight: 700; line-height: 1;
background: linear-gradient(135deg, #14B8A6, #0D9488, #0D7377);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
[data-theme="dark"] .kpi-value {
background: linear-gradient(135deg, #5EEAD4, #2DD4BF, #14B8A6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.kpi-label { font-size: 13px; color: #9CA3AF; margin-top: 4px; font-family: var(--font-body) }
[data-theme="dark"] .kpi-label { color: var(--color-text-muted) }
.kpi-menu { position: absolute; top: 16px; right: 16px; color: #9CA3AF; font-size: 16px; cursor: pointer; letter-spacing: 2px }
.kpi-trend { font-size: var(--text-xs); margin-top: var(--space-2); font-weight: 500 }
.kpi-trend.up { color: var(--color-success) }
.kpi-trend.down { color: var(--color-error) }
/* ===== DATA TABLE -- Clean, minimal ===== */
.data-table { width: 100%; border-collapse: collapse; font-size: 14px }
.data-table th {
text-align: left; font-weight: 600; color: #9CA3AF;
padding: 12px 16px; border-bottom: 1px solid #E5E7EB;
font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em;
background: transparent
}
.data-table td {
padding: 14px 16px; border-bottom: 1px solid #F0EFEB; color: #0A1628;
vertical-align: middle
}
.data-table tbody tr:last-child td { border-bottom: none }
[data-theme="dark"] .data-table td {
border-bottom-color: var(--color-divider); color: var(--color-text)
}
[data-theme="dark"] .data-table th {
border-bottom-color: var(--color-divider); color: var(--color-text-faint)
}
.data-table tbody tr { transition: background 0.2s var(--ease) }
.data-table tbody tr:nth-child(even) { background: transparent }
[data-theme="dark"] .data-table tbody tr:nth-child(even) { background: transparent }
.data-table tbody tr:hover { background: #F0FAF9 }
[data-theme="dark"] .data-table tbody tr:hover { background: rgba(20, 184, 166, 0.05) }
/* Mini table variant */
.mini-table th { padding: 10px 0 }
.mini-table td { padding: 14px 0 }
/* Division table icons */
.division-icon {
width: 28px; height: 28px; border-radius: 8px;
display: inline-flex; align-items: center; justify-content: center;
margin-right: 10px; vertical-align: middle
}
.division-icon svg { width: 14px; height: 14px; fill: none; stroke-width: 2 }
.division-icon.teal { background: #E8F4F5 }
.division-icon.teal svg { stroke: #0D7377 }
.division-icon.orange { background: #FEF3E0 }
.division-icon.orange svg { stroke: #E8860C }
.division-icon.rose { background: #FDE8E8 }
.division-icon.rose svg { stroke: #DC2626 }
/* ===== BADGE -- Soft rounded pills ===== */
.badge {
display: inline-flex; align-items: center;
padding: var(--space-1) var(--space-3);
font-size: var(--text-xs); font-weight: 600;
border-radius: var(--radius-full); line-height: 1.4
}
/* Status badges — teal palette */
.badge-planifiee { background: #E8F4F5; color: #0D7377; border: 1px solid #D0EBEC }
.badge-en-cours { background: linear-gradient(135deg, #14B8A6, #0D7377); color: #fff; border: none }
.badge-terminee { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0 }
.badge-annulee { background: #FDE8E8; color: #9B1C1C; border: 1px solid #F8D0D0 }
.badge-hybride { background: #E8F4F5; color: #0D7377; border: 1px solid #D0EBEC }
[data-theme="dark"] .badge-planifiee { background: rgba(79,209,197,0.12); color: #4FD1C5; border-color: rgba(79,209,197,0.2) }
[data-theme="dark"] .badge-en-cours { background: linear-gradient(135deg, #4FD1C5, #38B2AC); color: #fff }
[data-theme="dark"] .badge-terminee { background: rgba(16,185,129,0.1); color: #34D399; border-color: rgba(16,185,129,0.2) }
[data-theme="dark"] .badge-annulee { background: rgba(248,113,113,0.12); color: #F87171; border-color: rgba(248,113,113,0.15) }
[data-theme="dark"] .badge-hybride { background: rgba(79,209,197,0.12); color: #4FD1C5; border-color: rgba(79,209,197,0.15) }
/* Document type badges — teal shades */
.badge-convention { background: #E8F4F5; color: #0D7377; border: 1px solid #D0EBEC }
.badge-nda { background: #E8F4F5; color: #0A5C5F; border: 1px solid #D0EBEC }
.badge-contrat { background: #E8F4F5; color: #0D7377; border: 1px solid #D0EBEC }
.badge-support { background: rgba(217, 119, 6, 0.08); color: #D97706; border: 1px solid rgba(217, 119, 6, 0.10) }
.badge-autre { background: rgba(107, 114, 128, 0.08); color: #6B7280; border: 1px solid rgba(107, 114, 128, 0.10) }
[data-theme="dark"] .badge-convention { background: rgba(96, 165, 250, 0.12); color: #60A5FA; border-color: rgba(96, 165, 250, 0.15) }
[data-theme="dark"] .badge-nda { background: rgba(244, 114, 182, 0.12); color: #F472B6; border-color: rgba(244, 114, 182, 0.15) }
[data-theme="dark"] .badge-contrat { background: rgba(52, 211, 153, 0.12); color: #34D399; border-color: rgba(52, 211, 153, 0.15) }
[data-theme="dark"] .badge-support { background: rgba(251, 191, 36, 0.12); color: #FBBF24; border-color: rgba(251, 191, 36, 0.15) }
[data-theme="dark"] .badge-autre { background: rgba(156, 163, 175, 0.12); color: #9CA3AF; border-color: rgba(156, 163, 175, 0.15) }
/* Document type filter row */
.doc-type-filters { display: flex; flex-wrap: wrap; gap: var(--space-2) }
/* ===== MODAL -- White card, shadow-lg, no blur ===== */
.modal-overlay {
position: fixed; inset: 0; background: rgba(0, 0, 0, .5);
display: flex; align-items: center; justify-content: center;
z-index: 1000; padding: var(--space-4); animation: fadeIn .2s ease
}
.modal {
background: #fff;
border: none;
border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.15);
width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto;
animation: modalSlideUp .35s var(--ease)
}
[data-theme="dark"] .modal {
background: var(--color-surface);
border: 1px solid var(--color-border)
}
@keyframes modalSlideUp {
from { opacity: 0; transform: translateY(16px) }
to { opacity: 1; transform: translateY(0) }
}
.modal-header {
display: flex; align-items: center; justify-content: space-between;
padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--color-divider)
}
[data-theme="dark"] .modal-header { border-bottom-color: var(--color-divider) }
.modal-title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700 }
.modal-close {
padding: var(--space-2); border-radius: var(--radius-md);
color: var(--color-text-muted); transition: background var(--transition-fast)
}
.modal-close:hover { background: var(--color-surface-2) }
.modal-body { padding: var(--space-6) }
.modal-footer {
display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3);
padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-divider)
}
[data-theme="dark"] .modal-footer { border-top-color: var(--color-divider) }
/* ===== TOAST -- White card, left color border, shadow-md ===== */
#toast-container {
position: fixed; top: var(--space-6); right: var(--space-6); z-index: 2000;
display: flex; flex-direction: column; gap: var(--space-3); pointer-events: none
}
.toast {
display: flex; align-items: center; gap: var(--space-3);
padding: var(--space-4) var(--space-5);
background: linear-gradient(135deg, #0D7377 0%, #14B8A6 100%);
border: none;
border-radius: 14px; box-shadow: 0 8px 32px rgba(13,115,119,0.25);
font-size: var(--text-sm); font-weight: 500; pointer-events: auto;
min-width: 280px; max-width: 400px;
animation: toastSlideIn .35s var(--ease)
}
[data-theme="dark"] .toast {
background: var(--color-surface);
border: 1px solid rgba(45, 212, 191, 0.15);
box-shadow: 0 8px 32px rgba(8, 16, 20, 0.4), 0 0 0 1px rgba(45, 212, 191, 0.08)
}
[data-theme="dark"] .toast-success { border-left: 3px solid #4FD1C5 }
[data-theme="dark"] .toast-message { color: #E8ECEF }
[data-theme="dark"] .toast-icon svg { stroke: #4FD1C5 !important }
@keyframes toastSlideIn { from { opacity: 0; transform: translateY(-12px) scale(0.95) } to { opacity: 1; transform: translateY(0) scale(1) } }
.toast.toast-out { animation: toastSlideOut .25s ease forwards }
@keyframes toastSlideOut { from { opacity: 1; transform: translateY(0) scale(1) } to { opacity: 0; transform: translateY(-12px) scale(0.95) } }
.toast-success, .toast-error, .toast-info, .toast-warning { border-left: none }
.toast-error { background: linear-gradient(135deg, #DC2626 0%, #EF4444 100%); box-shadow: 0 8px 32px rgba(220,38,38,0.25) }
.toast-warning { background: linear-gradient(135deg, #D97706 0%, #F59E0B 100%); box-shadow: 0 8px 32px rgba(217,119,6,0.25) }
.toast-icon { display: flex; align-items: center; flex-shrink: 0 }
.toast-icon svg { stroke: #fff !important }
.toast-message { flex: 1; color: #fff; font-weight: 600 }
/* ===== WELCOME / PLACEHOLDER ===== */
.welcome-header { margin-bottom: var(--space-8) }
.welcome-title {
font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700;
margin-bottom: var(--space-2);
color: var(--color-text)
}
[data-theme="dark"] .welcome-title {
color: var(--color-text)
}
.welcome-subtitle { font-size: var(--text-base); color: var(--color-text-muted) }
/* Document zones */
.doc-zone { padding: 20px }
.doc-zone-header {
display: flex; align-items: center; gap: 14px; margin-bottom: 18px;
}
.doc-zone-icon {
width: 40px; height: 40px; border-radius: 10px;
background: rgba(13,115,119,0.08);
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.doc-zone-title {
font-family: 'DM Sans', sans-serif; font-size: 16px; font-weight: 700;
color: #0A1628; margin: 0;
}
[data-theme="dark"] .doc-zone-title { color: var(--color-text) }
.doc-zone-sub { font-size: 12px; color: #9CA3AF; margin: 2px 0 0 }
.doc-list-compact { display: flex; flex-direction: column; gap: 4px }
.doc-delete-btn {
opacity: 0.5; transition: opacity 0.15s;
}
.doc-delete-btn:hover { opacity: 1 }
/* ===== WIZARD STEPPER — Premium Redesign ===== */
.stepper {
display: flex; align-items: center; justify-content: center; gap: 0;
margin-bottom: 24px; padding: 20px 28px;
background: linear-gradient(135deg, #fff 0%, #F8FFFE 100%);
border-radius: 20px; border: 1px solid rgba(13,115,119,0.08);
box-shadow: 0 4px 20px rgba(13,115,119,0.06);
position: relative; overflow: hidden
}
.stepper::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, #0D7377, #14B8A6, #2DD4BF);
opacity: 0.6
}
[data-theme="dark"] .stepper { background: linear-gradient(135deg, var(--color-surface), var(--color-surface-2)); border-color: var(--color-border) }
[data-theme="dark"] .stepper::before { opacity: 0.3 }
.stepper-step {
display: flex; align-items: center; gap: 10px; flex-shrink: 0;
transition: transform 0.3s ease
}
.step-active .stepper-step, .step-active { transform: scale(1.02) }
.stepper-num {
width: 36px; height: 36px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 700; font-family: 'DM Sans', sans-serif;
transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1);
position: relative
}
.step-pending .stepper-num {
background: var(--color-surface-2, #F0EFEB); color: #9CA3AF;
border: 2px solid #E8E6E1
}
.step-active .stepper-num {
background: linear-gradient(135deg, #0D7377, #14B8A6); color: #fff;
border: 2px solid transparent;
box-shadow: 0 4px 14px rgba(13,115,119,0.35);
animation: stepPulse 2s ease-in-out infinite
}
.step-done .stepper-num {
background: linear-gradient(135deg, #10B981, #059669); color: #fff;
border: 2px solid transparent;
box-shadow: 0 2px 8px rgba(16,185,129,0.25)
}
[data-theme="dark"] .step-pending .stepper-num { background: var(--color-surface-2); border-color: var(--color-border); color: var(--color-text-muted) }
[data-theme="dark"] .step-active .stepper-num { box-shadow: 0 4px 14px rgba(79,209,197,0.3) }
@keyframes stepPulse {
0%, 100% { box-shadow: 0 4px 14px rgba(13,115,119,0.35) }
50% { box-shadow: 0 4px 20px rgba(13,115,119,0.5) }
}
.stepper-label {
font-size: 13px; font-weight: 600; color: #5A6578;
transition: all 0.3s
}
.step-active .stepper-label { color: #0D7377; font-weight: 700; font-size: 13px }
.step-done .stepper-label { color: #10B981 }
[data-theme="dark"] .stepper-label { color: var(--color-text-muted) }
[data-theme="dark"] .step-active .stepper-label { color: #4FD1C5 }
[data-theme="dark"] .step-done .stepper-label { color: #34D399 }
.stepper-line {
width: 48px; height: 3px; background: #E8E6E1; margin: 0 10px; flex-shrink: 0;
border-radius: 2px; transition: all 0.5s ease; position: relative; overflow: hidden
}
.stepper-line.step-done {
background: linear-gradient(90deg, #10B981, #14B8A6)
}
[data-theme="dark"] .stepper-line { background: var(--color-border) }
[data-theme="dark"] .stepper-line.step-done { background: linear-gradient(90deg, #34D399, #4FD1C5) }
.stepper-nav {
display: flex; justify-content: space-between; align-items: center;
margin-top: 20px; gap: 12px; padding-top: 20px;
border-top: 1px solid var(--color-divider, #E8E6E1)
}
.stepper-form-card {
padding: 0;
border-radius: 20px;
border: 1px solid rgba(13,115,119,0.06);
box-shadow: 0 2px 16px rgba(0,0,0,0.04);
overflow: visible;
animation: cardSlideIn 0.35s ease-out
}
.stepper-form-card .modal-body {
padding: 28px; max-height: none; overflow: visible
}
[data-theme="dark"] .stepper-form-card { border-color: var(--color-border); box-shadow: none }
@keyframes cardSlideIn {
from { opacity: 0; transform: translateY(12px) }
to { opacity: 1; transform: translateY(0) }
}
.stepper-recap {
animation: cardSlideIn 0.4s ease-out
}
.stepper-recap .session-detail-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px
}
/* --- Wizard form sections --- */
.stepper-form-card .form-section {
padding-bottom: 20px; margin-bottom: 20px;
border-bottom: 1px solid var(--color-divider, #F0EFEB);
animation: sectionFadeIn 0.3s ease-out
}
.stepper-form-card .form-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0 }
.stepper-form-card .form-section-title {
font-family: var(--font-display); font-size: 15px; font-weight: 700;
color: var(--color-primary, #0D7377);
letter-spacing: 0.02em; margin-bottom: 14px;
display: flex; align-items: center; gap: 8px
}
.stepper-form-card .form-section-title::before {
content: ""; width: 4px; height: 20px; border-radius: 2px;
background: linear-gradient(180deg, #0D7377, #14B8A6); flex-shrink: 0
}
@keyframes sectionFadeIn {
from { opacity: 0; transform: translateX(-8px) }
to { opacity: 1; transform: translateX(0) }
}
/* --- Module cards — Step 1 --- */
.mod-cards-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px
}
.mod-card {
border: 2px solid var(--color-border, #E8E6E1); border-radius: 14px;
padding: 16px 18px; cursor: pointer;
transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1);
background: var(--color-surface, #fff); position: relative; overflow: hidden
}
.mod-card::after {
content: ""; position: absolute; inset: 0; opacity: 0;
background: linear-gradient(135deg, rgba(13,115,119,0.04), rgba(20,184,166,0.02));
transition: opacity 0.25s
}
.mod-card:hover {
border-color: var(--color-primary, #0D7377);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(13,115,119,0.1)
}
.mod-card:hover::after { opacity: 1 }
.mod-card.selected {
border-color: var(--color-primary, #0D7377);
background: linear-gradient(135deg, #F0FAF9, #E8F4F5);
box-shadow: 0 0 0 1px var(--color-primary, #0D7377), 0 4px 16px rgba(13,115,119,0.12);
transform: translateY(-1px)
}
[data-theme="dark"] .mod-card.selected { background: rgba(79,209,197,0.08) }
.mod-card-check {
position: absolute; top: 10px; right: 10px;
width: 24px; height: 24px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: var(--color-surface-2, #F0EFEB); color: transparent;
transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1)
}
.mod-card.selected .mod-card-check {
background: linear-gradient(135deg, #0D7377, #14B8A6); color: #fff;
transform: scale(1.1);
box-shadow: 0 2px 8px rgba(13,115,119,0.3)
}
.mod-card-level {
display: inline-block; font-size: 9px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.06em; color: rgba(255,255,255,0.7);
background: rgba(255,255,255,0.15); padding: 2px 8px; border-radius: 6px;
margin-bottom: 8px; position: relative; z-index: 1
}
.mod-card-title {
font-size: 15px; font-weight: 700; color: #fff;
margin-bottom: 4px; position: relative; z-index: 1; line-height: 1.3
}
.mod-card-meta {
font-size: 11px; color: rgba(255,255,255,0.65);
margin-top: 4px; position: relative; z-index: 1; line-height: 1.4
}
.mod-card-check {
background: rgba(255,255,255,0.2); color: transparent;
border: none
}
.mod-card.selected .mod-card-check {
background: #fff; color: #0D7377;
box-shadow: 0 2px 8px rgba(0,0,0,0.15)
}
.mod-card { border-color: transparent }
.mod-card:hover {
border-color: rgba(255,255,255,0.3);
box-shadow: 0 8px 28px rgba(13,115,119,0.25)
}
.mod-card.selected {
border-color: #fff;
box-shadow: 0 0 0 2px #fff, 0 8px 28px rgba(13,115,119,0.3)
}
.mod-card::after { display: none }
.mod-card-custom {
border: 2px dashed rgba(13,115,119,0.4) !important;
background: var(--color-surface, #fff) !important
}
.mod-card-custom .mod-card-title { color: var(--color-primary, #0D7377) }
.mod-card-custom .mod-card-meta { color: var(--color-text-muted, #9CA3AF) }
.mod-card-custom .mod-card-level { color: var(--color-primary); background: rgba(13,115,119,0.08) }
.mod-card-custom .mod-card-check { background: var(--color-surface-2, #F0EFEB); color: transparent }
.mod-card-custom.selected .mod-card-check { background: var(--color-primary); color: #fff }
.mod-card-custom:hover {
border-color: var(--color-primary) !important;
background: linear-gradient(135deg, #F0FAF9, #E8F4F5) !important;
box-shadow: 0 4px 16px rgba(13,115,119,0.1)
}
.mod-card-custom.selected {
border-color: var(--color-primary) !important;
box-shadow: 0 0 0 1px var(--color-primary), 0 4px 16px rgba(13,115,119,0.12)
}
/* --- Modalité toggle — Step 2 --- */
.adm-modalite-toggle { display: flex; gap: 10px }
.adm-mod-btn {
flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px;
padding: 20px 16px; border: 2px solid var(--color-border); border-radius: 14px;
background: var(--color-surface); cursor: pointer; font-size: 14px; font-weight: 600;
color: var(--color-text-muted); transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1)
}
.adm-mod-btn:hover {
border-color: var(--color-primary); color: var(--color-primary);
transform: translateY(-2px); box-shadow: 0 6px 20px rgba(13,115,119,0.08)
}
.adm-mod-btn.active {
border-color: var(--color-primary);
background: linear-gradient(135deg, #F0FAF9, #E8F4F5);
color: var(--color-primary);
box-shadow: 0 0 0 1px var(--color-primary), 0 4px 14px rgba(13,115,119,0.12);
transform: translateY(-1px)
}
.adm-mod-btn svg { stroke: currentColor; transition: transform 0.3s }
.adm-mod-btn:hover svg { transform: scale(1.1) }
[data-theme="dark"] .adm-mod-btn { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text-muted) }
[data-theme="dark"] .adm-mod-btn.active { border-color: #4FD1C5; color: #4FD1C5; background: rgba(79,209,197,0.08) }
/* --- Schedule days — Step 2 --- */
.adm-schedule-day {
background: linear-gradient(135deg, var(--color-surface-2), var(--color-surface));
border: 1px solid var(--color-divider);
border-radius: 12px; padding: 14px; margin-bottom: 10px;
transition: all 0.2s
}
.adm-schedule-day:hover { border-color: rgba(13,115,119,0.2) }
[data-theme="dark"] .adm-schedule-day { background: var(--color-surface-2); border-color: var(--color-border) }
.adm-schedule-day-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px }
.adm-schedule-day-label {
font-size: 12px; font-weight: 700; color: var(--color-primary);
text-transform: uppercase; letter-spacing: 0.05em; min-width: 50px;
padding: 3px 10px; background: rgba(13,115,119,0.08); border-radius: 6px
}
.adm-schedule-day-slots { display: flex; flex-direction: column; gap: 8px }
.adm-schedule-half { display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.adm-schedule-half-label {
font-size: 12px; font-weight: 600; color: var(--color-text-muted); min-width: 80px
}
/* ===== PLAN DAYS — session create wizard (step 2 redesign) ===== */
/* Reset global .modal-body input styles inside plan cards — we wrap inputs with our own shell */
.modal-body .plan-day-date,
.modal-body .plan-loc-input,
.modal-body .plan-time {
border: none !important;
background: transparent !important;
box-shadow: none !important;
padding: 0;
width: auto;
border-radius: 0;
}
.modal-body .plan-day-date:focus,
.modal-body .plan-loc-input:focus {
border: none !important;
background: transparent !important;
box-shadow: none !important;
}
.modal-body .plan-time {
padding: 10px 12px !important;
background: #fff !important;
border: 1px solid #E5E7EB !important;
border-radius: 9px !important;
}
.modal-body .plan-time:focus {
border-color: #0D7377 !important;
box-shadow: 0 0 0 3px rgba(13,115,119,0.08) !important;
}
[data-theme="dark"] .modal-body .plan-time {
background: var(--color-surface) !important;
border-color: var(--color-border) !important;
}
[data-theme="dark"] .modal-body .plan-time:focus {
border-color: #4FD1C5 !important;
box-shadow: 0 0 0 3px rgba(79,209,197,0.12) !important;
}
.plan-days { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px }
.plan-day {
background: #fff;
border: 1px solid #E8E6E1;
border-radius: 16px;
overflow: hidden;
transition: border-color 0.2s, box-shadow 0.2s;
}
.plan-day:hover { border-color: #D0EBEC; box-shadow: 0 4px 16px rgba(13,115,119,0.06) }
[data-theme="dark"] .plan-day {
background: var(--color-surface);
border-color: rgba(79,209,197,0.12);
}
[data-theme="dark"] .plan-day:hover {
border-color: rgba(79,209,197,0.28);
box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}
.plan-day-head {
display: flex; align-items: center; gap: 12px;
padding: 14px 18px;
background: linear-gradient(135deg, #F0FAF9, #E8F4F5);
border-bottom: 1px solid rgba(13,115,119,0.08);
}
[data-theme="dark"] .plan-day-head {
background: linear-gradient(135deg, rgba(79,209,197,0.06), rgba(79,209,197,0.12));
border-bottom-color: rgba(79,209,197,0.15);
}
.plan-day-num {
font-family: var(--font-display);
font-size: 12px; font-weight: 700;
color: #0D7377;
text-transform: uppercase; letter-spacing: 0.06em;
padding: 4px 12px;
background: #fff;
border-radius: 999px;
box-shadow: 0 1px 3px rgba(13,115,119,0.1);
flex-shrink: 0;
}
[data-theme="dark"] .plan-day-num {
background: var(--color-surface);
color: #4FD1C5;
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.plan-day-date-wrap {
flex: 1;
display: flex; align-items: center; gap: 10px;
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 10px;
padding: 0 14px;
color: #6B7280;
transition: border-color 0.2s, box-shadow 0.2s;
}
.plan-day-date-wrap:focus-within {
border-color: #0D7377;
box-shadow: 0 0 0 3px rgba(13,115,119,0.08);
}
[data-theme="dark"] .plan-day-date-wrap {
background: var(--color-surface-2);
border-color: var(--color-border);
color: var(--color-text-muted);
}
[data-theme="dark"] .plan-day-date-wrap:focus-within {
border-color: #4FD1C5;
box-shadow: 0 0 0 3px rgba(79,209,197,0.12);
}
.plan-day-date {
flex: 1; min-width: 0;
border: none; background: transparent; outline: none;
padding: 10px 0;
font-size: 13px; font-family: var(--font-body);
color: #0A1628;
}
[data-theme="dark"] .plan-day-date { color: var(--color-text); color-scheme: dark }
.plan-day-remove {
width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center;
background: transparent;
border: 1px solid transparent;
border-radius: 8px;
color: #9CA3AF;
cursor: pointer;
transition: all 0.15s;
flex-shrink: 0;
}
.plan-day-remove:hover:not(:disabled) {
background: rgba(248,113,113,0.1);
color: #DC2626;
border-color: rgba(248,113,113,0.2);
}
.plan-day-remove:disabled { opacity: 0.3; cursor: not-allowed }
.plan-day-body {
padding: 16px 18px 18px;
display: flex; flex-direction: column; gap: 14px;
}
/* Modalité toggle per-day */
.plan-modalite {
display: grid; grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 4px;
background: #F4F4F2;
border-radius: 12px;
}
[data-theme="dark"] .plan-modalite { background: var(--color-surface-2) }
.plan-mod-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 11px 14px;
background: transparent;
border: none;
border-radius: 9px;
font-family: var(--font-body);
font-size: 13px; font-weight: 600;
color: #6B7280;
cursor: pointer;
transition: all 0.2s;
}
.plan-mod-btn:hover { color: #0A1628 }
.plan-mod-btn.active {
background: #fff;
color: #0D7377;
box-shadow: 0 2px 8px rgba(13,115,119,0.12);
}
[data-theme="dark"] .plan-mod-btn:hover { color: var(--color-text) }
[data-theme="dark"] .plan-mod-btn.active {
background: var(--color-surface);
color: #4FD1C5;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.plan-mod-btn svg { flex-shrink: 0 }
/* Période toggle per-day — 3-way: full / matin / aprem */
.plan-periode-toggle {
display: grid; grid-template-columns: 1fr 1fr 1fr;
gap: 6px;
padding: 4px;
background: #F4F4F2;
border-radius: 12px;
margin-top: 2px;
}
[data-theme="dark"] .plan-periode-toggle { background: var(--color-surface-2) }
.plan-per-btn {
display: inline-flex; align-items: center; justify-content: center;
padding: 9px 10px;
background: transparent;
border: none;
border-radius: 9px;
font-family: var(--font-body);
font-size: 12px; font-weight: 600;
color: #6B7280;
cursor: pointer;
transition: all 0.2s;
white-space: nowrap;
}
.plan-per-btn:hover { color: #0A1628 }
.plan-per-btn.active {
background: #fff;
color: #0D7377;
box-shadow: 0 2px 8px rgba(13,115,119,0.12);
}
[data-theme="dark"] .plan-per-btn:hover { color: var(--color-text) }
[data-theme="dark"] .plan-per-btn.active {
background: var(--color-surface);
color: #4FD1C5;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
@media (max-width: 700px) {
.plan-periode-toggle { grid-template-columns: 1fr; gap: 4px }
.plan-per-btn { font-size: 13px; padding: 10px 12px }
}
/* Lieu / Lien visio input */
.plan-loc-field {
display: flex; align-items: center; gap: 10px;
padding: 0 14px;
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 10px;
color: #9CA3AF;
transition: border-color 0.2s, box-shadow 0.2s;
}
.plan-loc-field:focus-within {
border-color: #0D7377;
box-shadow: 0 0 0 3px rgba(13,115,119,0.08);
}
[data-theme="dark"] .plan-loc-field {
background: var(--color-surface-2);
border-color: var(--color-border);
}
[data-theme="dark"] .plan-loc-field:focus-within {
border-color: #4FD1C5;
box-shadow: 0 0 0 3px rgba(79,209,197,0.12);
}
.plan-loc-input {
flex: 1; min-width: 0;
padding: 11px 0;
background: transparent;
border: none; outline: none;
font-size: 13px; font-family: var(--font-body);
color: #0A1628;
}
[data-theme="dark"] .plan-loc-input { color: var(--color-text) }
.plan-loc-input::placeholder { color: #9CA3AF }
/* Notice affichée à la place du champ visio (généré auto) */
.plan-visio-hint {
display: flex; align-items: flex-start; gap: 10px;
padding: 12px 14px;
background: linear-gradient(135deg, #FEF3E0, #FEFCE8);
border: 1px solid rgba(245, 158, 11, 0.2);
border-radius: 10px;
font-size: 12px;
color: #92680A;
line-height: 1.45;
}
.plan-visio-hint svg { flex-shrink: 0; margin-top: 1px; color: #D97706 }
.plan-visio-hint strong { color: #78450F; font-weight: 700 }
[data-theme="dark"] .plan-visio-hint {
background: rgba(251, 191, 36, 0.08);
border-color: rgba(251, 191, 36, 0.18);
color: #FBBF24;
}
[data-theme="dark"] .plan-visio-hint svg { color: #FBBF24 }
[data-theme="dark"] .plan-visio-hint strong { color: #FDE68A }
/* Horaires */
.plan-hours {
display: flex; flex-direction: column; gap: 10px;
padding: 14px;
background: linear-gradient(135deg, #FAFAF8, #F5F4F1);
border-radius: 12px;
}
[data-theme="dark"] .plan-hours { background: rgba(255,255,255,0.02) }
.plan-hour-row {
display: grid;
grid-template-columns: 100px 1fr auto 1fr;
align-items: center;
gap: 10px;
}
.plan-hour-label {
font-size: 12px; font-weight: 600;
color: #6B7280;
text-transform: uppercase;
letter-spacing: 0.04em;
}
[data-theme="dark"] .plan-hour-label { color: var(--color-text-muted) }
.plan-time {
padding: 10px 12px;
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 9px;
font-size: 13px; font-family: var(--font-body);
color: #0A1628;
transition: border-color 0.2s, box-shadow 0.2s;
min-width: 0;
}
.plan-time:focus {
outline: none;
border-color: #0D7377;
box-shadow: 0 0 0 3px rgba(13,115,119,0.08);
}
[data-theme="dark"] .plan-time {
background: var(--color-surface);
border-color: var(--color-border);
color: var(--color-text);
color-scheme: dark;
}
[data-theme="dark"] .plan-time:focus {
border-color: #4FD1C5;
box-shadow: 0 0 0 3px rgba(79,209,197,0.12);
}
.plan-hour-sep {
color: #9CA3AF;
font-weight: 600;
text-align: center;
}
/* Ajouter une journée */
.plan-add-day {
display: inline-flex; align-items: center; gap: 8px;
padding: 11px 20px;
background: #fff;
border: 1.5px dashed #D0EBEC;
border-radius: 12px;
font-family: var(--font-body);
font-size: 13px; font-weight: 600;
color: #0D7377;
cursor: pointer;
transition: all 0.2s;
}
.plan-add-day:hover {
background: linear-gradient(135deg, #F0FAF9, #E8F4F5);
border-color: #0D7377;
border-style: solid;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(13,115,119,0.1);
}
[data-theme="dark"] .plan-add-day {
background: var(--color-surface);
border-color: rgba(79,209,197,0.2);
color: #4FD1C5;
}
[data-theme="dark"] .plan-add-day:hover {
background: rgba(79,209,197,0.06);
border-color: #4FD1C5;
}
@media (max-width: 620px) {
.plan-day-head { flex-wrap: wrap }
.plan-day-date-wrap { order: 2; width: 100% }
.plan-modalite { grid-template-columns: 1fr }
.plan-hour-row { grid-template-columns: 1fr; gap: 6px }
.plan-hour-sep { display: none }
}
/* ===== FORMATEUR + APPRENANTS (step 3 redesign) ===== */
.fa-sub-card {
background: linear-gradient(160deg, #F0FAF9 0%, #E8F4F5 50%, #F0FAF9 100%);
border: 1px solid rgba(13,115,119,0.12);
border-radius: 16px;
overflow: hidden;
margin-bottom: 14px;
transition: border-color 0.2s, box-shadow 0.2s, opacity 0.2s;
}
.fa-sub-card:last-child { margin-bottom: 0 }
.fa-sub-card:hover { border-color: rgba(13,115,119,0.25); box-shadow: 0 4px 16px rgba(13,115,119,0.08) }
.fa-sub-card.fa-card-skipped { opacity: 0.55 }
/* Compact visio block embedded in main card */
.adm-visio-block {
margin-top: 18px;
padding: 18px 18px 18px;
border-top: 1px solid rgba(13,115,119,0.10);
}
.adm-visio-block-title {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #0D7377;
margin-bottom: 12px;
}
[data-theme="dark"] .adm-visio-block { border-top-color: rgba(79,209,197,0.16) }
[data-theme="dark"] .adm-visio-block-title { color: #4FD1C5 }
.adm-visio-row {
display: flex;
align-items: center;
gap: 10px;
padding: 0;
background: transparent;
border: none;
border-radius: 0;
flex-wrap: wrap;
}
.adm-visio-row-icon {
width: 28px; height: 28px;
flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
background: #0D7377; color: #fff;
border-radius: 8px;
}
.adm-visio-row-icon--warn { background: #EAB308 }
.adm-visio-link {
flex: 1; min-width: 0;
font-size: 13px; font-weight: 500;
color: #0D7377;
text-decoration: none;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
font-family: monospace;
}
.adm-visio-link:hover { text-decoration: underline }
.adm-visio-src {
flex-shrink: 0;
font-size: 11px; font-weight: 600;
padding: 3px 8px;
background: rgba(13,115,119,0.08);
color: #0D7377;
border-radius: 999px;
}
.adm-visio-iconbtn {
width: 30px; height: 30px;
display: inline-flex; align-items: center; justify-content: center;
background: transparent;
border: 1px solid rgba(13,115,119,0.20);
border-radius: 7px;
color: #5A6578;
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.adm-visio-iconbtn:hover {
background: rgba(13,115,119,0.06);
color: #0D7377;
border-color: rgba(13,115,119,0.35);
}
.adm-visio-send {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12px; padding: 6px 10px;
}
.adm-visio-edit {
flex-basis: 100%;
display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
margin-top: 4px;
}
.adm-visio-edit input {
flex: 1; min-width: 200px;
padding: 8px 12px;
border: 1px solid rgba(13,115,119,0.20);
border-radius: 8px;
font-size: 13px; background: #fff;
}
.adm-visio-input {
flex: 1; min-width: 200px;
padding: 8px 12px;
border: 1px solid #E8E6E1;
border-radius: 8px;
font-size: 13px; background: #fff;
}
[data-theme="dark"] .adm-visio-row {
background: rgba(255,255,255,0.04);
border-color: rgba(79,209,197,0.18);
}
[data-theme="dark"] .adm-visio-iconbtn {
border-color: rgba(79,209,197,0.20);
color: rgba(255,255,255,0.65);
}
[data-theme="dark"] .adm-visio-iconbtn:hover {
background: rgba(79,209,197,0.10);
color: #4FD1C5;
border-color: rgba(79,209,197,0.40);
}
/* Qualiopi 8 prerequis card */
.prereq-card .prereq-help {
margin: 0;
padding: 12px 18px 14px;
font-size: 13px;
line-height: 1.5;
color: #4a5568;
}
[data-theme="dark"] .prereq-card .prereq-help { color: rgba(255,255,255,0.7) }
.prereq-card.is-verified {
border-color: rgba(13,115,119,0.45);
box-shadow: 0 4px 16px rgba(13,115,119,0.12);
}
.prereq-card.is-verified .fa-sub-head {
background: linear-gradient(135deg, rgba(13,115,119,0.12), rgba(13,115,119,0.20));
}
[data-theme="dark"] .fa-sub-card {
background: linear-gradient(160deg, rgba(79,209,197,0.06) 0%, rgba(79,209,197,0.1) 50%, rgba(79,209,197,0.06) 100%);
border-color: rgba(79,209,197,0.15);
}
[data-theme="dark"] .fa-sub-card:hover { border-color: rgba(79,209,197,0.3); box-shadow: 0 4px 16px rgba(0,0,0,0.3) }
.fa-sub-head {
display: flex; align-items: center; justify-content: space-between;
gap: 14px; padding: 14px 18px;
background: linear-gradient(135deg, rgba(13,115,119,0.06), rgba(13,115,119,0.10));
border-bottom: 1px solid rgba(13,115,119,0.08);
}
[data-theme="dark"] .fa-sub-head {
background: linear-gradient(135deg, rgba(79,209,197,0.08), rgba(79,209,197,0.14));
border-bottom-color: rgba(79,209,197,0.15);
}
.fa-sub-title {
display: flex; align-items: center; gap: 10px;
font-family: var(--font-display);
font-size: 14px; font-weight: 700;
color: #0A1628;
flex: 1; min-width: 0;
}
[data-theme="dark"] .fa-sub-title { color: var(--color-text) }
.fa-sub-title svg { color: #0D7377; flex-shrink: 0 }
[data-theme="dark"] .fa-sub-title svg { color: #4FD1C5 }
.fa-count-pill {
display: inline-flex; align-items: center;
padding: 3px 10px;
border-radius: 999px;
background: #F4F4F2;
color: #6B7280;
font-family: var(--font-body);
font-size: 11px; font-weight: 600;
transition: all 0.2s;
}
.fa-count-pill.is-active {
background: rgba(13,115,119,0.10);
color: #0D7377;
}
[data-theme="dark"] .fa-count-pill { background: rgba(255,255,255,0.05); color: var(--color-text-muted) }
[data-theme="dark"] .fa-count-pill.is-active { background: rgba(79,209,197,0.14); color: #4FD1C5 }
/* Skip toggle — iOS-style switch */
.fa-toggle-skip {
display: inline-flex; align-items: center; gap: 10px;
cursor: pointer;
font-size: 12px; font-weight: 600;
color: #6B7280;
flex-shrink: 0;
}
[data-theme="dark"] .fa-toggle-skip { color: var(--color-text-muted) }
.fa-toggle-skip input { display: none }
.fa-toggle-track {
position: relative;
width: 34px; height: 20px;
border-radius: 999px;
background: #E5E7EB;
transition: background 0.2s;
}
.fa-toggle-knob {
position: absolute;
top: 2px; left: 2px;
width: 16px; height: 16px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
transition: transform 0.2s;
}
.fa-toggle-skip input:checked + .fa-toggle-track {
background: linear-gradient(135deg, #0D7377, #14B8A6);
}
.fa-toggle-skip input:checked + .fa-toggle-track .fa-toggle-knob {
transform: translateX(14px);
}
[data-theme="dark"] .fa-toggle-track { background: rgba(255,255,255,0.1) }
[data-theme="dark"] .fa-toggle-skip input:checked + .fa-toggle-track {
background: linear-gradient(135deg, #4FD1C5, #38B2AC);
}
.fa-sub-body {
padding: 16px 18px;
transition: opacity 0.2s, max-height 0.3s;
}
.fa-sub-body.fa-body-skipped {
pointer-events: none;
opacity: 0.35;
}
/* Search input (shared in fmt + stag panels) */
.fa-search-wrap {
position: relative;
margin-bottom: 10px;
}
.fa-search-wrap svg {
position: absolute;
left: 14px; top: 50%;
transform: translateY(-50%);
color: #9CA3AF;
pointer-events: none;
z-index: 2;
}
.modal-body .fa-search-input {
width: 100%;
padding: 10px 14px 10px 42px !important;
border: 1px solid #E5E7EB !important;
border-radius: 10px !important;
background: #fff !important;
font-size: 13px !important;
font-family: var(--font-body);
color: #0A1628;
transition: border-color 0.2s, box-shadow 0.2s;
margin: 0 !important;
}
.modal-body .fa-search-input:focus {
outline: none;
border-color: #0D7377 !important;
box-shadow: 0 0 0 3px rgba(13,115,119,0.08) !important;
}
[data-theme="dark"] .modal-body .fa-search-input {
background: var(--color-surface-2) !important;
border-color: var(--color-border) !important;
color: var(--color-text);
}
[data-theme="dark"] .modal-body .fa-search-input:focus {
border-color: #4FD1C5 !important;
box-shadow: 0 0 0 3px rgba(79,209,197,0.12) !important;
}
/* Formateur grid */
.fa-fmt-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
}
.fa-fmt-card {
display: flex; align-items: center; gap: 12px;
padding: 12px 14px;
background: #fff;
border: 1.5px solid #E5E7EB;
border-radius: 12px;
cursor: pointer;
text-align: left;
transition: all 0.2s;
position: relative;
}
.fa-fmt-card:hover {
border-color: #D0EBEC;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(13,115,119,0.08);
}
.fa-fmt-card.selected {
border-color: #0D7377;
background: linear-gradient(135deg, #F0FAF9, #E8F4F5);
box-shadow: 0 0 0 1px #0D7377, 0 4px 16px rgba(13,115,119,0.15);
}
[data-theme="dark"] .fa-fmt-card {
background: var(--color-surface-2);
border-color: var(--color-border);
}
[data-theme="dark"] .fa-fmt-card:hover {
border-color: rgba(79,209,197,0.25);
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
[data-theme="dark"] .fa-fmt-card.selected {
background: rgba(79,209,197,0.08);
border-color: #4FD1C5;
box-shadow: 0 0 0 1px #4FD1C5, 0 4px 16px rgba(79,209,197,0.15);
}
.fa-fmt-avatar {
width: 40px; height: 40px;
border-radius: 10px;
background: linear-gradient(135deg, #0D7377, #14B8A6);
color: #fff;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display);
font-size: 13px; font-weight: 700;
flex-shrink: 0;
box-shadow: 0 3px 8px rgba(13,115,119,0.2);
}
[data-theme="dark"] .fa-fmt-avatar {
background: linear-gradient(135deg, #4FD1C5, #38B2AC);
box-shadow: 0 3px 8px rgba(79,209,197,0.25);
}
.fa-fmt-info { flex: 1; min-width: 0 }
.fa-fmt-name {
font-size: 13px; font-weight: 600;
color: #0A1628;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-theme="dark"] .fa-fmt-name { color: var(--color-text) }
.fa-fmt-check {
flex-shrink: 0;
color: #0D7377;
opacity: 0;
transform: scale(0.6);
transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fa-fmt-card.selected .fa-fmt-check {
opacity: 1;
transform: scale(1);
}
[data-theme="dark"] .fa-fmt-check { color: #4FD1C5 }
/* Tabs inside apprenants sub-card */
.fa-tabs {
display: flex; gap: 4px;
padding: 4px;
background: #F4F4F2;
border-radius: 12px;
margin-bottom: 14px;
}
[data-theme="dark"] .fa-tabs { background: var(--color-surface-2) }
.fa-tab {
flex: 1;
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
padding: 9px 10px;
background: transparent;
border: none;
font-family: var(--font-body);
font-size: 12px; font-weight: 600;
color: #6B7280;
cursor: pointer;
border-radius: 9px;
transition: all 0.2s;
min-width: 0;
}
.fa-tab svg { flex-shrink: 0 }
.fa-tab span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.fa-tab:hover { color: #0A1628 }
.fa-tab.active {
background: #fff;
color: #0D7377;
box-shadow: 0 2px 8px rgba(13,115,119,0.1);
}
[data-theme="dark"] .fa-tab:hover { color: var(--color-text) }
[data-theme="dark"] .fa-tab.active {
background: var(--color-surface);
color: #4FD1C5;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.fa-panel-hint {
margin: 4px 0 10px;
font-size: 12px;
color: #6B7280;
font-style: italic;
}
[data-theme="dark"] .fa-panel-hint { color: var(--color-text-muted) }
/* Apprenants list */
.fa-stag-list {
max-height: 280px; overflow-y: auto;
border: 1px solid #EEF0F0;
border-radius: 12px;
background: #fff;
padding: 6px;
}
[data-theme="dark"] .fa-stag-list {
background: var(--color-surface-2);
border-color: var(--color-border);
}
/* Lists grid — pick lists to auto-check their members */
.fa-lists-grid {
display: flex; flex-direction: column;
gap: 8px;
margin-bottom: 12px;
}
.fa-list-hidden { display: none !important }
.fa-list-card {
display: flex; align-items: center; gap: 14px;
padding: 12px 16px;
background: #fff;
border: 1.5px solid #E8F4F5;
border-radius: 14px;
cursor: pointer;
text-align: left;
font-family: var(--font-body);
transition: all 0.2s;
}
.fa-list-card:hover {
border-color: #0D7377;
background: #F8FCFC;
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(13,115,119,0.08);
}
.fa-list-card.active {
border-color: #0D7377;
background: linear-gradient(135deg, #F0FAF9, #E8F4F5);
box-shadow: 0 0 0 1px #0D7377, 0 4px 14px rgba(13,115,119,0.12);
}
[data-theme="dark"] .fa-list-card {
background: var(--color-surface-2);
border-color: rgba(79,209,197,0.12);
}
[data-theme="dark"] .fa-list-card:hover {
border-color: rgba(79,209,197,0.3);
background: rgba(79,209,197,0.06);
}
[data-theme="dark"] .fa-list-card.active {
background: rgba(79,209,197,0.1);
border-color: #4FD1C5;
box-shadow: 0 0 0 1px #4FD1C5;
}
.fa-list-card-icon {
width: 40px; height: 40px;
border-radius: 10px;
background: linear-gradient(135deg, #0D7377, #14B8A6);
color: #fff;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
box-shadow: 0 3px 8px rgba(13,115,119,0.2);
}
[data-theme="dark"] .fa-list-card-icon {
background: linear-gradient(135deg, #4FD1C5, #38B2AC);
}
.fa-list-card-info { flex: 1; min-width: 0 }
.fa-list-card-name {
font-size: 13px; font-weight: 700; color: #0A1628;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
margin-bottom: 2px;
}
[data-theme="dark"] .fa-list-card-name { color: var(--color-text) }
.fa-list-card-meta {
font-size: 11px; color: #6B7280;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-theme="dark"] .fa-list-card-meta { color: var(--color-text-muted) }
.fa-list-card-check {
flex-shrink: 0;
width: 28px; height: 28px;
border-radius: 50%;
background: #F4F4F2;
display: flex; align-items: center; justify-content: center;
color: transparent;
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fa-list-card.active .fa-list-card-check {
background: linear-gradient(135deg, #0D7377, #14B8A6);
color: #fff;
transform: scale(1.1);
box-shadow: 0 2px 8px rgba(13,115,119,0.3);
}
[data-theme="dark"] .fa-list-card-check { background: rgba(255,255,255,0.06) }
[data-theme="dark"] .fa-list-card.active .fa-list-card-check {
background: linear-gradient(135deg, #4FD1C5, #38B2AC);
box-shadow: 0 2px 8px rgba(79,209,197,0.3);
}
/* Summary box — shows count after list selection */
.fa-stag-summary { margin-bottom: 4px }
.fa-summary-box {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 16px;
background: linear-gradient(135deg, #D0EBEC, #E8F4F5);
border: 1px solid rgba(13,115,119,0.15);
border-radius: 12px;
font-size: 13px;
color: #0D7377;
}
.fa-summary-box strong { font-weight: 700 }
.fa-summary-box svg { flex-shrink: 0; color: #0D7377 }
[data-theme="dark"] .fa-summary-box {
background: rgba(79,209,197,0.1);
border-color: rgba(79,209,197,0.2);
color: #4FD1C5;
}
[data-theme="dark"] .fa-summary-box svg { color: #4FD1C5 }
.fa-empty {
padding: 24px 16px;
text-align: center;
color: #9CA3AF;
font-size: 12px;
margin: 0;
}
/* Override existing stag-check-item for the new list */
.fa-stag-list .stag-check-item {
display: flex; align-items: center; gap: 10px;
padding: 9px 12px;
border-radius: 9px;
border-bottom: 1px solid #F4F4F2;
cursor: pointer;
font-size: 13px;
transition: background 0.15s;
}
.fa-stag-list .stag-check-item:last-child { border-bottom: none }
.fa-stag-list .stag-check-item:hover { background: rgba(13,115,119,0.05) }
[data-theme="dark"] .fa-stag-list .stag-check-item { border-bottom-color: rgba(79,209,197,0.06) }
[data-theme="dark"] .fa-stag-list .stag-check-item:hover { background: rgba(79,209,197,0.06) }
.fa-stag-list .stag-check-item input[type="checkbox"] { accent-color: #0D7377; flex-shrink: 0 }
.stag-check-avatar {
width: 32px; height: 32px; border-radius: 8px;
background: linear-gradient(135deg, #0D7377, #14B8A6);
color: #fff; display: flex; align-items: center; justify-content: center;
font-family: var(--font-display); font-size: 11px; font-weight: 700;
flex-shrink: 0;
}
[data-theme="dark"] .stag-check-avatar {
background: linear-gradient(135deg, #4FD1C5, #38B2AC);
}
.stag-check-info { flex: 1; min-width: 0 }
.stag-check-name {
display: block;
font-size: 13px; font-weight: 600; color: #0A1628;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-theme="dark"] .stag-check-name { color: var(--color-text) }
.stag-check-email {
display: block;
font-size: 11px; color: #6B7280;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-theme="dark"] .stag-check-email { color: var(--color-text-muted) }
.stag-check-ent {
display: inline-flex; align-items: center;
font-size: 10px; font-weight: 600;
color: #0D7377; background: rgba(13,115,119,0.08);
padding: 3px 8px; border-radius: 6px;
flex-shrink: 0; white-space: nowrap;
}
[data-theme="dark"] .stag-check-ent { color: #4FD1C5; background: rgba(79,209,197,0.12) }
/* Manual add form */
.fa-manual-form {
padding: 14px;
border: 1px dashed #D0EBEC;
border-radius: 12px;
background: linear-gradient(135deg, #F8FCFC, #F0FAF9);
}
[data-theme="dark"] .fa-manual-form {
background: rgba(79,209,197,0.04);
border-color: rgba(79,209,197,0.2);
}
.fa-manual-row {
display: grid; grid-template-columns: 1fr 1fr;
gap: 10px; margin-bottom: 10px;
}
.modal-body .fa-manual-input {
width: 100%;
padding: 10px 14px !important;
border: 1px solid #E5E7EB !important;
border-radius: 10px !important;
background: #fff !important;
font-size: 13px !important;
font-family: var(--font-body);
margin: 0 0 10px !important;
transition: border-color 0.2s, box-shadow 0.2s;
}
.modal-body .fa-manual-input:focus {
outline: none;
border-color: #0D7377 !important;
box-shadow: 0 0 0 3px rgba(13,115,119,0.08) !important;
}
[data-theme="dark"] .modal-body .fa-manual-input {
background: var(--color-surface-2) !important;
border-color: var(--color-border) !important;
color: var(--color-text);
}
[data-theme="dark"] .modal-body .fa-manual-input:focus {
border-color: #4FD1C5 !important;
box-shadow: 0 0 0 3px rgba(79,209,197,0.12) !important;
}
.fa-manual-row .fa-manual-input { margin-bottom: 0 !important }
.fa-manual-add {
display: inline-flex; align-items: center; gap: 6px;
padding: 10px 18px;
background: linear-gradient(135deg, #0D7377, #14B8A6);
border: none;
border-radius: 10px;
color: #fff;
font-family: var(--font-body);
font-size: 13px; font-weight: 600;
cursor: pointer;
box-shadow: 0 4px 12px rgba(13,115,119,0.22);
transition: all 0.2s;
}
.fa-manual-add:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(13,115,119,0.3);
}
[data-theme="dark"] .fa-manual-add {
background: linear-gradient(135deg, #4FD1C5, #38B2AC);
color: #0A1628;
box-shadow: 0 4px 12px rgba(79,209,197,0.3);
}
/* Import zone */
.fa-import-zone {
padding: 28px 20px;
border: 2px dashed #D0EBEC;
border-radius: 14px;
background: linear-gradient(135deg, #F8FCFC, #F0FAF9);
text-align: center;
transition: all 0.2s;
}
.fa-import-zone:hover {
border-color: #0D7377;
background: linear-gradient(135deg, #F0FAF9, #E8F4F5);
}
[data-theme="dark"] .fa-import-zone {
background: rgba(79,209,197,0.04);
border-color: rgba(79,209,197,0.2);
}
[data-theme="dark"] .fa-import-zone:hover {
border-color: #4FD1C5;
background: rgba(79,209,197,0.08);
}
.fa-import-zone svg { color: #0D7377; margin-bottom: 8px }
[data-theme="dark"] .fa-import-zone svg { color: #4FD1C5 }
.fa-import-title {
margin: 4px 0;
font-family: var(--font-display);
font-size: 14px; font-weight: 700;
color: #0A1628;
}
[data-theme="dark"] .fa-import-title { color: var(--color-text) }
.fa-import-sub {
margin: 0 0 14px;
font-size: 12px;
color: #6B7280;
}
[data-theme="dark"] .fa-import-sub { color: var(--color-text-muted) }
.fa-import-btn {
display: inline-flex; align-items: center;
padding: 9px 20px;
background: #fff;
border: 1.5px solid #D0EBEC;
border-radius: 10px;
color: #0D7377;
font-family: var(--font-body);
font-size: 13px; font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.fa-import-btn:hover {
border-color: #0D7377;
background: #F0FAF9;
}
[data-theme="dark"] .fa-import-btn {
background: var(--color-surface);
border-color: rgba(79,209,197,0.25);
color: #4FD1C5;
}
[data-theme="dark"] .fa-import-btn:hover {
background: rgba(79,209,197,0.08);
border-color: #4FD1C5;
}
@media (max-width: 540px) {
.fa-fmt-grid { grid-template-columns: 1fr }
.fa-tabs { flex-direction: column }
.fa-manual-row { grid-template-columns: 1fr }
}
/* --- Apprenants checklist — Step 3 --- */
.stag-checklist {
max-height: 240px; overflow-y: auto;
border: 1px solid var(--color-border, #E8E6E1); border-radius: 12px;
padding: 8px; background: var(--color-surface, #FAFAF8);
scrollbar-width: thin; scrollbar-color: rgba(13,115,119,0.2) transparent
}
.stag-checklist::-webkit-scrollbar { width: 5px }
.stag-checklist::-webkit-scrollbar-thumb { background: rgba(13,115,119,0.2); border-radius: 3px }
.stag-check-item {
display: flex; align-items: center; gap: 10px; padding: 8px 10px;
border-radius: 8px; cursor: pointer; font-size: 13px;
transition: all 0.15s
}
.stag-check-item:hover { background: rgba(13,115,119,0.05) }
.stag-check-item input[type="checkbox"] { accent-color: #0D7377 }
/* --- Skip badges --- */
.adm-skip-check {
display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
font-size: 13px; color: var(--color-primary, #0D7377); font-weight: 600; cursor: pointer
}
.adm-skip-check input { accent-color: var(--color-primary) }
.adm-skip-badge {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 12px; border-radius: 999px; font-size: 11px; font-weight: 600;
background: linear-gradient(135deg, #FEF3E0, #FDE68A33); color: #92680A;
border: 1px solid rgba(146,104,10,0.1)
}
[data-theme="dark"] .adm-skip-badge { background: rgba(251,191,36,0.12); color: #FBBF24; border-color: rgba(251,191,36,0.15) }
/* --- Inline form & counter --- */
.adm-stag-counter {
font-size: 12px; font-weight: 600; color: var(--color-primary, #0D7377);
padding: 3px 12px; border-radius: 999px;
background: rgba(13,115,119,0.08)
}
.adm-inline-form {
background: var(--color-surface-2); border: 1px solid var(--color-divider);
border-radius: 12px; padding: 14px; margin-top: 10px
}
[data-theme="dark"] .adm-inline-form { background: var(--color-surface-2); border-color: var(--color-border) }
.adm-stag-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap }
/* --- Document upload zone animation --- */
.stepper-form-card .doc-upload-zone {
border: 2px dashed rgba(13,115,119,0.25); border-radius: 14px;
transition: all 0.25s; background: rgba(13,115,119,0.02)
}
.stepper-form-card .doc-upload-zone:hover {
border-color: var(--color-primary); background: rgba(13,115,119,0.05);
transform: translateY(-1px)
}
/* --- Wizard responsive --- */
@media (max-width: 768px) {
.stepper { flex-wrap: wrap; gap: 6px; padding: 14px 16px }
.stepper-label { display: none }
.stepper-line { width: 24px }
.stepper-num { width: 32px; height: 32px; font-size: 12px }
.stepper-form-card .modal-body { padding: 20px 16px }
.mod-cards-grid { grid-template-columns: 1fr }
.adm-modalite-toggle { flex-direction: column }
.stepper-nav { flex-wrap: wrap }
.stepper-nav .btn { flex: 1; min-width: 0; text-align: center }
}
@media (max-width: 480px) {
.stepper { padding: 10px 12px }
.stepper-num { width: 28px; height: 28px; font-size: 11px }
.stepper-line { width: 16px; margin: 0 4px }
.stepper-form-card .modal-body { padding: 16px 12px }
.mod-card { padding: 12px }
.adm-mod-btn { padding: 14px 10px; font-size: 13px }
}
/* ===== BLOC-NOTES — Premium Notepad ===== */
/* --- Layout --- */
.bn-layout {
display: grid;
grid-template-columns: 300px 1fr;
gap: 0;
min-height: calc(100vh - 140px);
background: var(--color-bg);
border-radius: var(--radius-card);
overflow: hidden;
border: 1px solid var(--color-divider);
box-shadow: var(--shadow-sm);
}
@media (max-width: 900px) {
.bn-layout { grid-template-columns: 1fr; min-height: auto; }
.bn-sidebar { max-height: 260px; border-right: none; border-bottom: 1px solid var(--color-divider); }
}
/* --- Sidebar --- */
.bn-sidebar {
background: var(--color-surface);
border-right: 1px solid var(--color-divider);
display: flex;
flex-direction: column;
overflow: hidden;
}
.bn-sidebar-top {
padding: 18px 16px 14px;
border-bottom: none;
}
.bn-sidebar-search {
position: relative;
margin-bottom: 10px;
}
.bn-sidebar-search input {
width: 100%;
padding: 10px 12px 10px 38px;
border: 1px solid var(--color-divider);
border-radius: 10px;
background: var(--color-bg);
font-family: var(--font-body);
font-size: 13px;
color: var(--color-text);
outline: none;
transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease), background 180ms var(--ease);
}
.bn-sidebar-search input:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-primary-bg);
background: white;
}
.bn-sidebar-search input::placeholder { color: var(--color-text-faint); }
.bn-sidebar-search svg {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--color-text-faint);
pointer-events: none;
}
.bn-new-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 11px 16px;
border: none;
border-radius: 10px;
background: linear-gradient(135deg, #0D7377, #14B8A6);
color: white;
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 200ms var(--ease);
box-shadow: 0 2px 8px rgba(13, 115, 119, 0.2);
}
.bn-new-btn:hover {
background: linear-gradient(135deg, #0B6264, #0D9E92);
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(13, 115, 119, 0.3);
}
.bn-new-btn:active {
transform: translateY(0);
box-shadow: 0 1px 4px rgba(13, 115, 119, 0.2);
}
.bn-new-btn svg { flex-shrink: 0; }
/* --- Notes list --- */
.bn-notes-list {
flex: 1;
overflow-y: auto;
padding: 6px 10px;
}
.bn-notes-list::-webkit-scrollbar { width: 4px; }
.bn-notes-list::-webkit-scrollbar-track { background: transparent; }
.bn-notes-list::-webkit-scrollbar-thumb { background: var(--color-divider); border-radius: 4px; }
.bn-note-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 12px;
border-radius: 10px;
cursor: pointer;
transition: all 180ms var(--ease);
text-decoration: none;
color: var(--color-text);
position: relative;
margin-bottom: 2px;
border: 1px solid transparent;
}
.bn-note-item:hover {
background: var(--color-surface-2);
border-color: var(--color-divider);
}
.bn-note-item.active {
background: var(--color-primary-bg);
border-color: rgba(13, 115, 119, 0.15);
}
.bn-note-item.active::before {
content: "";
position: absolute;
left: 0;
top: 8px;
bottom: 8px;
width: 3px;
border-radius: 0 3px 3px 0;
background: linear-gradient(180deg, #0D7377, #14B8A6);
}
.bn-note-icon {
width: 34px;
height: 34px;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: var(--color-surface-2);
color: var(--color-text-faint);
transition: all 180ms var(--ease);
}
.bn-note-item.active .bn-note-icon {
background: linear-gradient(135deg, #0D7377, #14B8A6);
color: white;
}
.bn-note-info { flex: 1; min-width: 0; }
.bn-note-title {
display: block;
font-family: var(--font-display);
font-size: 13.5px;
font-weight: 600;
color: var(--color-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 2px;
}
.bn-note-preview {
display: block;
font-size: 12px;
color: var(--color-text-faint);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.4;
}
.bn-note-date {
display: block;
font-size: 10.5px;
color: var(--color-text-faint);
margin-top: 4px;
letter-spacing: 0.01em;
}
.bn-note-actions {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
display: flex;
gap: 2px;
opacity: 0;
transition: opacity 150ms ease;
}
.bn-note-item:hover .bn-note-actions { opacity: 1; }
.bn-note-action-btn {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: none;
border-radius: var(--radius-sm);
color: var(--color-text-faint);
cursor: pointer;
transition: all 150ms ease;
}
.bn-note-action-btn:hover {
background: var(--color-surface-offset);
color: var(--color-text);
}
.bn-note-action-btn.danger:hover {
background: var(--color-error-bg);
color: var(--color-error);
}
/* --- Notes count footer --- */
.bn-sidebar-footer {
padding: 10px 16px;
border-top: 1px solid var(--color-divider);
font-size: 11px;
color: var(--color-text-faint);
text-align: center;
font-family: var(--font-body);
letter-spacing: 0.02em;
background: var(--color-bg);
}
/* --- Editor --- */
.bn-editor {
background: var(--color-surface);
display: flex;
flex-direction: column;
overflow: hidden;
}
.bn-editor-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 28px;
border-bottom: 1px solid var(--color-divider);
gap: 16px;
}
.bn-editor-title-input {
font-family: var(--font-display);
font-size: 20px;
font-weight: 700;
color: var(--color-text);
border: none;
background: transparent;
outline: none;
flex: 1;
min-width: 0;
padding: 4px 0;
border-bottom: 2px solid transparent;
transition: border-color 180ms var(--ease);
}
.bn-editor-title-input::placeholder { color: var(--color-text-faint); }
.bn-header-right {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
}
.bn-save-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
border-radius: var(--radius-full);
font-size: 11.5px;
font-weight: 500;
font-family: var(--font-body);
transition: all 250ms var(--ease);
}
.bn-save-pill[data-state="saved"] {
background: var(--color-success-bg);
color: var(--color-success);
}
.bn-save-pill[data-state="saving"] {
background: var(--color-warning-bg);
color: var(--color-warning);
}
.bn-save-pill[data-state="idle"] {
background: var(--color-surface-2);
color: var(--color-text-faint);
}
.bn-save-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
}
.bn-save-pill[data-state="saving"] .bn-save-dot {
animation: bn-pulse 1s ease infinite;
}
@keyframes bn-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
.bn-pdf-btn {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 16px;
border: 1px solid var(--color-divider);
border-radius: var(--radius-lg);
background: var(--color-surface);
color: var(--color-text);
font-family: var(--font-body);
font-size: 12.5px;
font-weight: 500;
cursor: pointer;
transition: all 180ms var(--ease);
}
.bn-pdf-btn:hover {
border-color: var(--color-primary);
color: var(--color-primary);
background: var(--color-primary-bg);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(13, 115, 119, 0.12);
}
.bn-pdf-btn svg { flex-shrink: 0; }
/* --- Toolbar --- */
.bn-toolbar {
display: flex;
align-items: center;
gap: 2px;
padding: 8px 24px;
border-bottom: 1px solid var(--color-divider);
flex-wrap: wrap;
background: var(--color-surface);
}
.bn-tool {
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
border-radius: var(--radius-md);
cursor: pointer;
color: var(--color-text-muted);
font-size: 13px;
font-family: var(--font-body);
transition: all 180ms var(--ease);
position: relative;
}
.bn-tool:hover {
background: var(--color-surface-2);
color: var(--color-text);
transform: translateY(-1px);
}
.bn-tool:active {
transform: translateY(0);
background: var(--color-primary-bg);
color: var(--color-primary);
}
.bn-tool.active {
background: var(--color-primary-bg);
color: var(--color-primary);
}
.bn-tool-sep {
width: 1px;
height: 20px;
background: var(--color-divider);
margin: 0 6px;
flex-shrink: 0;
}
.bn-tool-label {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.02em;
}
/* Image tool */
.bn-tool-img {
position: relative;
}
.bn-tool-img input[type="file"] {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
}
/* --- Content editor --- */
.bn-content {
flex: 1;
padding: 32px 36px;
font-size: 15px;
line-height: 1.8;
color: var(--color-text);
min-height: 450px;
outline: none;
font-family: var(--font-body);
overflow-y: auto;
}
.bn-content::-webkit-scrollbar { width: 5px; }
.bn-content::-webkit-scrollbar-track { background: transparent; }
.bn-content::-webkit-scrollbar-thumb { background: var(--color-divider); border-radius: 4px; }
.bn-content:empty:before {
content: attr(data-placeholder);
color: var(--color-text-faint);
pointer-events: none;
font-style: italic;
}
.bn-content:focus { background: transparent; }
.bn-content h2 {
font-family: var(--font-display);
font-size: 22px;
font-weight: 700;
color: var(--color-text);
margin: 28px 0 12px;
padding-bottom: 8px;
border-bottom: 2px solid var(--color-divider);
}
.bn-content h3 {
font-family: var(--font-display);
font-size: 17px;
font-weight: 600;
color: var(--color-text);
margin: 20px 0 8px;
}
.bn-content p {
margin: 0 0 12px;
}
.bn-content ul, .bn-content ol {
padding-left: 24px;
margin: 8px 0 16px;
}
.bn-content li {
margin-bottom: 6px;
}
.bn-content img {
max-width: 40%;
height: auto;
border-radius: var(--radius-md);
margin: 4px 8px 4px 0;
box-shadow: var(--shadow-sm);
cursor: pointer;
vertical-align: middle;
display: inline-block;
transition: box-shadow 180ms var(--ease);
resize: both;
overflow: hidden;
}
.bn-content img:hover {
box-shadow: var(--shadow-md);
}
.bn-content img.bn-img-sm { max-width: 20%; }
.bn-content img.bn-img-md { max-width: 40%; }
.bn-content img.bn-img-lg { max-width: 70%; }
.bn-content img.bn-img-full { max-width: 100%; display: block; margin: 12px 0; }
.bn-content img.bn-img-float-left { float: left; margin: 4px 16px 8px 0; }
.bn-content img.bn-img-float-right { float: right; margin: 4px 0 8px 16px; }
/* Image resize popup */
.bn-img-menu {
position: fixed;
z-index: 999;
background: var(--color-surface);
border: 1px solid var(--color-divider);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
padding: 6px;
display: flex;
gap: 2px;
animation: bn-modal-in 150ms var(--ease);
}
.bn-img-menu button {
padding: 6px 10px;
border: none;
background: none;
border-radius: var(--radius-sm);
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
color: var(--color-text-muted);
cursor: pointer;
transition: all 150ms ease;
white-space: nowrap;
}
.bn-img-menu button:hover {
background: var(--color-primary-bg);
color: var(--color-primary);
}
.bn-img-menu button.active {
background: linear-gradient(135deg, #0D7377, #14B8A6);
color: white;
}
.bn-img-menu .bn-img-menu-sep {
width: 1px;
background: var(--color-divider);
margin: 2px 4px;
}
.bn-content blockquote {
border-left: 3px solid var(--color-primary);
margin: 16px 0;
padding: 12px 20px;
background: var(--color-primary-bg);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
color: var(--color-text-muted);
font-style: italic;
}
.bn-content a {
color: var(--color-primary);
text-decoration: underline;
text-decoration-color: rgba(13, 115, 119, 0.3);
text-underline-offset: 2px;
transition: text-decoration-color 150ms ease;
}
.bn-content a:hover {
text-decoration-color: var(--color-primary);
}
.bn-content hr {
border: none;
height: 1px;
background: var(--color-divider);
margin: 24px 0;
}
/* --- Empty state --- */
.bn-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
min-height: 400px;
text-align: center;
padding: 40px;
color: var(--color-text-faint);
}
.bn-empty-icon {
width: 80px;
height: 80px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(13, 115, 119, 0.12), rgba(20, 184, 166, 0.15));
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
color: var(--color-primary);
}
.bn-empty-title {
font-family: var(--font-display);
font-size: 18px;
font-weight: 700;
color: var(--color-text);
margin-bottom: 8px;
}
.bn-empty-text {
font-size: 13.5px;
color: var(--color-text-faint);
max-width: 280px;
line-height: 1.6;
margin-bottom: 24px;
}
.bn-empty-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
border: none;
border-radius: var(--radius-lg);
background: linear-gradient(135deg, #0D7377, #14B8A6);
color: white;
font-family: var(--font-body);
font-size: 13.5px;
font-weight: 600;
cursor: pointer;
transition: all 180ms var(--ease);
}
.bn-empty-btn:hover {
background: linear-gradient(135deg, #0A5C5F, #0D7377);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(13, 115, 119, 0.25);
}
/* --- Rename modal --- */
.bn-modal-overlay {
position: fixed;
inset: 0;
background: rgba(10, 22, 40, 0.35);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
animation: bn-fade-in 200ms var(--ease);
}
@keyframes bn-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.bn-modal {
background: var(--color-surface);
border-radius: var(--radius-card);
padding: 28px;
width: 400px;
max-width: 90vw;
box-shadow: var(--shadow-xl);
animation: bn-modal-in 250ms var(--ease);
}
@keyframes bn-modal-in {
from { opacity: 0; transform: scale(0.96) translateY(8px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.bn-modal-title {
font-family: var(--font-display);
font-size: 17px;
font-weight: 700;
color: var(--color-text);
margin: 0 0 16px;
}
.bn-modal input[type="text"] {
width: 100%;
padding: 11px 14px;
border: 1px solid var(--color-divider);
border-radius: var(--radius-md);
background: var(--color-bg);
font-family: var(--font-body);
font-size: 14px;
color: var(--color-text);
outline: none;
transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}
.bn-modal input[type="text"]:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-primary-bg);
}
.bn-modal-btns {
display: flex;
gap: 10px;
justify-content: flex-end;
margin-top: 20px;
}
.bn-modal-cancel {
padding: 9px 18px;
border: 1px solid var(--color-divider);
border-radius: var(--radius-md);
background: var(--color-surface);
color: var(--color-text-muted);
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 150ms ease;
}
.bn-modal-cancel:hover { background: var(--color-surface-2); }
.bn-modal-confirm {
padding: 9px 18px;
border: none;
border-radius: var(--radius-md);
background: var(--color-primary);
color: white;
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 180ms var(--ease);
}
.bn-modal-confirm:hover {
background: var(--color-primary-hover);
transform: translateY(-1px);
}
/* --- Word count bar --- */
.bn-word-count {
padding: 8px 28px;
border-top: 1px solid var(--color-divider);
font-size: 11px;
color: var(--color-text-faint);
font-family: var(--font-body);
display: flex;
align-items: center;
gap: 16px;
background: var(--color-surface);
}
.bn-word-count span { opacity: 0.7; }
/* --- Teal gradient accents --- */
.bn-sidebar-top::after {
content: "";
display: block;
height: 1px;
margin-top: 14px;
margin-left: -16px;
margin-right: -16px;
background: var(--color-divider);
}
.bn-editor-title-input:focus {
border-bottom-color: transparent;
border-image: linear-gradient(90deg, #0D7377, #14B8A6) 1;
}
/* --- Dark mode overrides --- */
[data-theme="dark"] .bn-sidebar { background: var(--color-surface); border-color: var(--color-border); box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3); }
[data-theme="dark"] .bn-sidebar-top { border-color: var(--color-border); }
[data-theme="dark"] .bn-sidebar-search input { background: var(--color-bg); border-color: var(--color-border); color: var(--color-text); }
[data-theme="dark"] .bn-sidebar-footer { border-color: var(--color-border); }
[data-theme="dark"] .bn-editor { background: var(--color-surface); }
[data-theme="dark"] .bn-editor-header { border-color: var(--color-border); }
[data-theme="dark"] .bn-editor-title-input { color: var(--color-text); }
[data-theme="dark"] .bn-toolbar { border-color: var(--color-border); background: var(--color-surface); }
[data-theme="dark"] .bn-tool:hover { background: var(--color-surface-2); color: var(--color-text); }
[data-theme="dark"] .bn-content { color: var(--color-text); }
[data-theme="dark"] .bn-word-count { border-color: var(--color-border); background: var(--color-surface); }
[data-theme="dark"] .bn-modal-overlay { background: rgba(0, 0, 0, 0.5); }
[data-theme="dark"] .bn-modal { background: var(--color-surface); }
[data-theme="dark"] .bn-modal input[type="text"] { background: var(--color-bg); border-color: var(--color-border); color: var(--color-text); }
[data-theme="dark"] .bn-layout { border-color: var(--color-border); }
[data-theme="dark"] .bn-note-action-btn:hover { background: var(--color-surface-offset); color: var(--color-text); }
[data-theme="dark"] .bn-note-action-btn.danger:hover { background: var(--color-error-bg); color: var(--color-error); }
[data-theme="dark"] .bn-pdf-btn { border-color: var(--color-border); color: var(--color-text); background: var(--color-surface); }
[data-theme="dark"] .bn-color-dot { border-color: rgba(255,255,255,0.1); }
/* Calendar page */
.cal-nav {
display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
}
.cal-month-title {
font-family: 'DM Sans', sans-serif; font-size: 18px; font-weight: 700;
color: #0A1628; min-width: 180px; text-align: center;
}
[data-theme="dark"] .cal-month-title { color: var(--color-text) }
.cal-legend {
display: flex; gap: 16px; margin-bottom: 12px; flex-wrap: wrap;
}
.cal-legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #5A6578 }
.cal-legend-dot { width: 8px; height: 8px; border-radius: 50% }
.cal-grid {
display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px;
background: #E8E6E1; border-radius: 12px; overflow: hidden;
border: 1px solid #E8E6E1;
}
[data-theme="dark"] .cal-grid { background: var(--color-border); border-color: var(--color-border) }
.cal-day-header {
padding: 8px; text-align: center; font-size: 11px; font-weight: 700;
color: #5A6578; background: #F8F6F3; text-transform: uppercase;
}
[data-theme="dark"] .cal-day-header { background: var(--color-surface-2); color: var(--color-text-muted) }
.cal-cell {
min-height: 100px; padding: 6px 8px; background: #fff;
display: flex; flex-direction: column; gap: 2px;
}
[data-theme="dark"] .cal-cell { background: var(--color-surface) }
.cal-cell.cal-empty { background: #FAFAF8 }
[data-theme="dark"] .cal-cell.cal-empty { background: var(--color-surface-2) }
.cal-cell.cal-today { background: #F0FAF9 }
[data-theme="dark"] .cal-cell.cal-today { background: rgba(79,209,197,0.06) }
.cal-date {
font-size: 12px; font-weight: 500; color: #5A6578; margin-bottom: 2px;
}
.cal-date-today {
background: #0D7377; color: #fff; width: 24px; height: 24px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center; font-weight: 700;
}
.cal-event {
display: block; font-size: 10px; font-weight: 600;
padding: 2px 6px; border-radius: 4px; text-decoration: none;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
transition: opacity 0.12s;
}
.cal-event:hover { opacity: 0.8 }
.cal-more {
font-size: 10px; color: #9CA3AF; padding-left: 6px;
cursor: pointer; background: none; border: none; font-family: inherit;
}
.cal-more:hover { color: #0D7377; text-decoration: underline }
/* View toggle */
.cal-view-toggle {
display: flex; gap: 0; background: #F0EFEB; border-radius: 10px;
padding: 3px; margin-right: 12px;
}
.cal-toggle-btn {
border: none; background: transparent; cursor: pointer;
font-family: var(--font-display, inherit); font-size: 13px; font-weight: 600;
padding: 7px 16px; border-radius: 8px; color: #5A6578;
transition: all 0.2s;
}
.cal-toggle-btn:hover { color: #0A1628 }
.cal-toggle-active {
background: linear-gradient(135deg, #0D7377, #14B8A6); color: #fff;
box-shadow: 0 2px 8px rgba(13, 115, 119, 0.25);
}
[data-theme="dark"] .cal-view-toggle { background: var(--color-surface-2) }
[data-theme="dark"] .cal-toggle-btn { color: var(--color-text-muted) }
[data-theme="dark"] .cal-toggle-active {
background: linear-gradient(135deg, #4FD1C5, #14B8A6); color: #0A1628;
box-shadow: 0 2px 8px rgba(79, 209, 197, 0.25);
}
/* Event row with Google Calendar button */
.cal-event-row {
display: flex; align-items: center; gap: 2px;
}
.cal-event-row .cal-event { flex: 1; min-width: 0 }
.cal-gcal-btn {
flex-shrink: 0; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center;
border-radius: 4px; color: #9CA3AF; text-decoration: none; transition: all 0.15s;
opacity: 0;
}
.cal-event-row:hover .cal-gcal-btn { opacity: 1 }
.cal-gcal-btn:hover { color: #0D7377; background: #E8F4F5 }
/* Popover for "+X autre(s)" */
.cal-popover {
position: absolute; z-index: 100; bottom: 100%; left: 0; min-width: 160px;
background: #fff; border: 1px solid #E8E6E1; border-radius: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,0.12); padding: 6px;
display: flex; flex-direction: column; gap: 2px;
}
[data-theme="dark"] .cal-popover { background: var(--color-surface); border-color: var(--color-border) }
.cal-popover-item {
display: block; padding: 6px 10px; font-size: 11px; font-weight: 600;
border-radius: 6px; text-decoration: none; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis; transition: background 0.12s;
}
.cal-popover-item {
border: none; cursor: pointer; background: none; font-family: inherit; width: 100%; text-align: left;
}
.cal-popover-item:hover { background: #F0FAF9 }
[data-theme="dark"] .cal-popover-item:hover { background: var(--color-surface-2) }
/* Session preview popover */
.cal-preview {
position: fixed; z-index: 9999; min-width: 280px; max-width: 340px;
background: #fff; border: 1px solid #E8E6E1; border-radius: 12px;
box-shadow: 0 12px 40px rgba(13,115,119,0.15), 0 2px 8px rgba(0,0,0,0.06);
padding: 0; overflow: hidden;
animation: calPreviewIn 0.15s ease-out;
}
[data-theme="dark"] .cal-preview { background: var(--color-surface); border-color: var(--color-border); box-shadow: 0 12px 40px rgba(0,0,0,0.4) }
@keyframes calPreviewIn {
from { opacity: 0; transform: translateY(6px) }
to { opacity: 1; transform: translateY(0) }
}
.cal-preview-header {
padding: 14px 16px; border-left: 4px solid #0D7377; display: flex; align-items: flex-start;
justify-content: space-between; gap: 10px;
}
.cal-preview-title {
font-size: 14px; font-weight: 700; color: #0A1628; line-height: 1.3;
}
[data-theme="dark"] .cal-preview-title { color: var(--color-text) }
.cal-preview-badge {
flex-shrink: 0; font-size: 10px; font-weight: 700; padding: 3px 8px;
border-radius: 6px; white-space: nowrap;
background: #E8F4F5; color: #0D7377;
}
.cal-preview-body {
padding: 0 16px 12px; display: flex; flex-direction: column; gap: 6px;
}
.cal-preview-row {
display: flex; align-items: center; gap: 8px; font-size: 12px; color: #5A6578;
}
[data-theme="dark"] .cal-preview-row { color: var(--color-text-muted) }
.cal-preview-row svg { flex-shrink: 0; stroke: #0D7377 }
.cal-preview-actions {
padding: 12px 16px; border-top: 1px solid #E8F4F5; display: flex; gap: 8px;
background: #FAFAF8;
}
[data-theme="dark"] .cal-preview-actions { background: var(--color-surface-2); border-color: var(--color-border) }
.cal-preview-actions .btn { font-size: 12px; padding: 6px 14px; text-decoration: none }
/* Make cal-event a button instead of link */
button.cal-event {
border: none; cursor: pointer; font-family: inherit; width: 100%; text-align: left;
}
button.cal-week-event {
border: none; cursor: pointer; font-family: inherit; text-align: left;
}
/* ---- Week view ---- */
.cal-week-grid {
display: grid; grid-template-columns: 48px repeat(7, 1fr); gap: 1px;
background: #E8E6E1; border-radius: 12px; overflow: hidden; border: 1px solid #E8E6E1;
}
[data-theme="dark"] .cal-week-grid { background: var(--color-border); border-color: var(--color-border) }
.cal-week-tcol { display: flex; flex-direction: column }
.cal-week-theader {
height: 48px; background: #F8F6F3; display: flex; align-items: center; justify-content: center;
}
[data-theme="dark"] .cal-week-theader { background: var(--color-surface-2) }
.cal-week-tslot {
height: 52px; background: #F8F6F3; display: flex; align-items: flex-start; justify-content: center;
padding-top: 4px; font-size: 10px; color: #9CA3AF; font-weight: 500;
}
[data-theme="dark"] .cal-week-tslot { background: var(--color-surface-2); color: var(--color-text-muted) }
.cal-week-col { display: flex; flex-direction: column; min-width: 0 }
.cal-week-col-today { background: rgba(13,115,119,0.03) }
[data-theme="dark"] .cal-week-col-today { background: rgba(79,209,197,0.06) }
.cal-week-cheader {
height: 48px; background: #F8F6F3; display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 2px;
}
[data-theme="dark"] .cal-week-cheader { background: var(--color-surface-2) }
.cal-week-clabel { font-size: 10px; font-weight: 600; color: #9CA3AF; text-transform: uppercase }
.cal-week-cnum { font-size: 14px; font-weight: 700; color: #0A1628 }
[data-theme="dark"] .cal-week-cnum { color: var(--color-text) }
.cal-week-cbody {
position: relative; flex: 1; background: #fff;
}
[data-theme="dark"] .cal-week-cbody { background: var(--color-surface) }
.cal-week-slot {
height: 52px; border-bottom: 1px solid #F0EDE8;
}
[data-theme="dark"] .cal-week-slot { border-color: var(--color-border) }
.cal-week-event {
position: absolute; left: 2px; right: 2px; border-radius: 6px; padding: 6px 8px;
display: flex; flex-direction: column; gap: 1px; text-decoration: none;
overflow: hidden; transition: opacity 0.12s; z-index: 2;
}
.cal-week-event:hover { opacity: 0.85 }
.cal-week-ev-time { font-size: 9px; font-weight: 600; opacity: 0.7 }
.cal-week-ev-title { font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.cal-week-ev-meta { font-size: 9px; opacity: 0.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.cal-week-ev-gcal {
display: inline-flex; align-items: center; gap: 3px; font-size: 9px; font-weight: 600;
margin-top: 2px; cursor: pointer; opacity: 0; transition: opacity 0.15s;
}
.cal-week-event:hover .cal-week-ev-gcal { opacity: 0.8 }
.cal-week-ev-gcal:hover { opacity: 1 !important; text-decoration: underline }
@media (max-width: 768px) {
.cal-cell { min-height: 70px; padding: 4px }
.cal-event { font-size: 9px; padding: 1px 4px }
.cal-nav { flex-wrap: wrap; gap: 8px }
.cal-view-toggle { width: 100%; justify-content: stretch; order: -1 }
.cal-toggle-btn { flex: 1; text-align: center }
.cal-week-grid {
grid-template-columns: 36px repeat(7, minmax(80px, 1fr));
overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.cal-week-tslot { font-size: 9px; height: 44px }
.cal-week-slot { height: 44px }
.cal-week-clabel { font-size: 10px }
.cal-week-cnum { font-size: 13px }
.cal-week-ev-title { font-size: 9px }
.cal-week-ev-time { font-size: 8px }
.cal-week-ev-gcal { display: none }
.cal-gcal-btn { display: none }
}
.placeholder-page {
display: flex; flex-direction: column; align-items: center; justify-content: center;
min-height: 400px; text-align: center; padding: var(--space-8)
}
.placeholder-icon {
width: 64px; height: 64px; border-radius: var(--radius-icon);
background: rgba(13, 115, 119, 0.08);
color: var(--color-primary);
display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-4)
}
[data-theme="dark"] .placeholder-icon { background: rgba(20, 184, 166, 0.12) }
.placeholder-title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; color: var(--color-text); margin-bottom: var(--space-2) }
.placeholder-text { font-size: var(--text-sm); color: var(--color-text-muted); max-width: 360px }
/* ===== SEARCH BAR ===== */
.search-bar { margin-bottom: var(--space-4) }
.search-input {
width: 100%; padding: var(--space-3) var(--space-4);
background: var(--color-surface);
border: 1px solid var(--color-border); border-radius: var(--radius-md);
font-size: var(--text-sm);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast)
}
.search-input:hover { border-color: var(--color-text-muted) }
.search-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-bg) }
.search-input::placeholder { color: var(--color-text-faint) }
/* ===== LINK PRIMARY ===== */
.link-primary { color: var(--color-primary); font-weight: 500; transition: color var(--transition-fast) }
.link-primary:hover { color: var(--color-primary-hover); text-decoration: underline }
/* ===== QUICK ACCESS GRID (dashboard) ===== */
.quick-access-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 16px; margin-bottom: var(--space-6)
}
.quick-access-item {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: var(--space-3);
padding: var(--space-6) var(--space-4);
background: #FFFFFF;
border-radius: var(--radius-card);
cursor: pointer; text-decoration: none; color: var(--color-text);
transition: all 0.2s var(--ease);
box-shadow: var(--shadow-card);
position: relative; overflow: hidden
}
.quick-access-item::before {
content: ''; display: none
}
.quick-access-item:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-hover)
}
.quick-access-item:hover::before { display: none }
[data-theme="dark"] .quick-access-item {
background: var(--color-surface);
box-shadow: var(--shadow-sm)
}
[data-theme="dark"] .quick-access-item:hover {
box-shadow: var(--shadow-md)
}
.quick-access-item .qa-icon {
width: 40px; height: 40px; border-radius: var(--radius-icon);
background: rgba(13, 115, 119, 0.08);
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
color: var(--color-primary);
font-size: var(--text-lg);
transition: transform 0.2s var(--ease)
}
.quick-access-item .qa-icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2 }
.quick-access-item:hover .qa-icon {
transform: scale(1.05)
}
[data-theme="dark"] .quick-access-item .qa-icon {
background: rgba(20, 184, 166, 0.12);
color: var(--color-primary)
}
.quick-access-item .qa-label {
font-size: var(--text-sm); font-weight: 600; color: var(--color-text);
text-align: center; line-height: 1.3
}
.quick-access-item .qa-desc {
font-size: var(--text-xs); color: var(--color-text-muted);
text-align: center; line-height: 1.4
}
/* ===== PAGE HEADER ===== */
.page-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: var(--space-3); gap: var(--space-3); flex-wrap: wrap
}
.page-title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; color: var(--color-text) }
.greeting-name {
background: linear-gradient(135deg, #14B8A6, #0D9488, #0D7377) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
color: transparent !important;
}
[data-theme="dark"] .greeting-name {
background: linear-gradient(135deg, #5EEAD4, #2DD4BF, #14B8A6) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
color: transparent !important;
}
/* ===== LOADING — Double Arc Spinner + Phrases ===== */
.sk-page {
display: flex; flex-direction: column; align-items: center;
justify-content: center; padding: 60px 20px; min-height: 220px;
}
.sk-arc-wrap { width: 52px; height: 52px; position: relative; }
.sk-arc {
width: 52px; height: 52px; border-radius: 50%;
border: 3px solid rgba(13, 115, 119, 0.1);
border-top-color: #0D7377;
animation: sk-arc-spin 0.9s linear infinite;
}
.sk-arc-inner {
position: absolute; top: 8px; left: 8px;
width: 36px; height: 36px; border-radius: 50%;
border: 3px solid rgba(13, 115, 119, 0.06);
border-bottom-color: #14B8A6;
animation: sk-arc-spin 1.4s linear infinite reverse;
}
@keyframes sk-arc-spin { to { transform: rotate(360deg) } }
[data-theme="dark"] .sk-arc {
border-color: rgba(79, 209, 197, 0.08);
border-top-color: #4FD1C5;
}
[data-theme="dark"] .sk-arc-inner {
border-color: rgba(79, 209, 197, 0.04);
border-bottom-color: #14B8A6;
}
.sk-phrase {
margin-top: 26px; text-align: center;
font-family: var(--font-display, 'DM Sans', sans-serif);
font-size: 17px; font-weight: 600; font-style: italic;
background: linear-gradient(135deg, #0D7377, #14B8A6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: sk-phrase-in 0.5s ease-out both;
}
@keyframes sk-phrase-in {
from { opacity: 0; transform: translateY(6px) }
to { opacity: 1; transform: translateY(0) }
}
[data-theme="dark"] .sk-phrase {
background: linear-gradient(135deg, #4FD1C5, #14B8A6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ===== EMPTY STATE ===== */
.empty-state {
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: var(--space-12) var(--space-6); text-align: center; gap: var(--space-4)
}
.empty-state-text { font-size: var(--text-sm); color: var(--color-text-muted) }
/* ===== FORM ROW (side-by-side fields) ===== */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4) }
@media (max-width: 480px) { .form-row { grid-template-columns: 1fr } }
/* ===== FORM SECTIONS ===== */
.form-section {
padding-bottom: 16px; margin-bottom: 16px;
border-bottom: 1px solid #E8E6E1
}
.form-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0 }
[data-theme="dark"] .form-section { border-bottom-color: var(--color-border) }
.form-section-title {
font-family: var(--font-display); font-size: 14px; font-weight: 600;
color: #0D7377; text-transform: uppercase; letter-spacing: 0.04em;
margin-bottom: 12px
}
[data-theme="dark"] .form-section-title { color: var(--color-primary) }
.form-hint {
font-size: 12px; color: #9CA3AF; margin-top: 4px; line-height: 1.4
}
.form-notice {
display: flex; align-items: flex-start; gap: 8px;
margin-top: 8px; padding: 10px 12px;
background: #FEF9EF; border-radius: 8px;
font-size: 12px; color: #92680A; line-height: 1.4
}
.form-notice svg { flex-shrink: 0; color: #D4A017; margin-top: 1px }
[data-theme="dark"] .form-notice { background: rgba(251,191,36,0.08); color: #FBBF24 }
[data-theme="dark"] .form-notice svg { color: #FBBF24 }
/* Document upload zone */
.doc-upload-zone {
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 24px; border: 2px dashed #D4D2CC; border-radius: 12px;
text-align: center; cursor: pointer;
transition: border-color 0.2s, background 0.2s
}
.doc-upload-zone:hover { border-color: #0D7377; background: rgba(13,115,119,0.02) }
.doc-upload-zone.dragover { border-color: #0D7377; background: rgba(13,115,119,0.05) }
.doc-upload-zone svg { color: #9CA3AF; margin-bottom: 8px }
.doc-upload-text { font-size: 13px; color: #5A6578 }
.doc-upload-link {
color: #0D7377; font-weight: 600; cursor: pointer;
text-decoration: underline; text-underline-offset: 2px
}
.doc-upload-formats { font-size: 11px; color: #9CA3AF; margin-top: 4px }
[data-theme="dark"] .doc-upload-zone { border-color: var(--color-border) }
[data-theme="dark"] .doc-upload-zone:hover { border-color: var(--color-primary); background: rgba(79,209,197,0.04) }
/* Document list items */
.doc-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px }
.doc-item {
display: flex; align-items: center; gap: 10px;
padding: 8px 12px; background: #F8F6F3; border-radius: 8px
}
[data-theme="dark"] .doc-item { background: var(--color-surface-2) }
.doc-item-ext {
font-size: 10px; font-weight: 700; color: #0D7377;
background: #E8F4F5; border-radius: 4px; padding: 2px 6px;
text-transform: uppercase; flex-shrink: 0
}
[data-theme="dark"] .doc-item-ext { background: rgba(79,209,197,0.12); color: #4FD1C5 }
.doc-item-name {
flex: 1; font-size: 13px; color: #0A1628; min-width: 0;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis
}
[data-theme="dark"] .doc-item-name { color: var(--color-text) }
.doc-item-size { font-size: 11px; color: #9CA3AF; flex-shrink: 0 }
.doc-item-remove {
background: none; border: none; cursor: pointer; color: #9CA3AF;
padding: 2px; border-radius: 4px; display: flex; transition: color 0.15s
}
.doc-item-remove:hover { color: #DC2626 }
.doc-item-delete {
flex-shrink: 0;
background: transparent;
border: 1px solid rgba(220,38,38,0.20);
color: #DC2626;
width: 28px; height: 28px;
border-radius: 7px;
display: inline-flex; align-items: center; justify-content: center;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.doc-item-delete:hover {
background: rgba(220,38,38,0.10);
border-color: rgba(220,38,38,0.45);
transform: scale(1.05);
}
.doc-item-delete:active { transform: scale(0.95) }
[data-theme="dark"] .doc-item-delete { color: #FCA5A5; border-color: rgba(252,165,165,0.20) }
[data-theme="dark"] .doc-item-delete:hover { background: rgba(252,165,165,0.10); border-color: rgba(252,165,165,0.45) }
/* Bouton "Passer à l'étape suivante" dans une étape stepper formateur */
.fmt-step-next-wrap {
display: flex; justify-content: flex-end;
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid rgba(13,115,119,0.10);
}
.fmt-next-step-btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 18px !important;
font-size: 13px; font-weight: 600;
background: linear-gradient(135deg, #0fb8bd, #0D7377) !important;
color: #fff !important;
border-radius: 999px !important;
box-shadow: 0 4px 12px rgba(13,115,119,0.25);
transition: transform 0.15s, box-shadow 0.15s;
}
.fmt-next-step-btn:hover {
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(13,115,119,0.35);
}
.fmt-next-step-btn svg {
transition: transform 0.2s;
}
.fmt-next-step-btn:hover svg {
transform: translateX(3px);
}
/* Bandeau pré-clôture : envoi auto des supports */
.fmt-cloture-banner {
display: flex; align-items: center; gap: 10px;
padding: 12px 14px;
margin: 12px 0 16px;
background: linear-gradient(135deg, rgba(13,115,119,0.08), rgba(15,184,189,0.10));
border: 1px solid rgba(13,115,119,0.25);
border-radius: 10px;
font-size: 13px; line-height: 1.45;
color: #0A1628;
}
.fmt-cloture-banner svg { color: #0D7377; flex-shrink: 0 }
.fmt-cloture-banner strong { color: #0D7377 }
[data-theme="dark"] .fmt-cloture-banner {
background: linear-gradient(135deg, rgba(79,209,197,0.10), rgba(79,209,197,0.16));
border-color: rgba(79,209,197,0.30);
color: #fff;
}
[data-theme="dark"] .fmt-cloture-banner svg { color: #4FD1C5 }
[data-theme="dark"] .fmt-cloture-banner strong { color: #4FD1C5 }
/* Bandeaux statut supports (obligatoire / OK) */
.fmt-supports-required, .fmt-supports-ok {
display: flex; align-items: center; gap: 8px;
padding: 10px 14px;
border-radius: 10px;
font-size: 13px; line-height: 1.45;
}
.fmt-supports-required {
background: rgba(234,88,12,0.08);
border: 1px solid rgba(234,88,12,0.22);
color: #9A3412;
}
.fmt-supports-required strong { font-weight: 700 }
.fmt-supports-required svg { color: #EA580C; flex-shrink: 0 }
.fmt-supports-ok {
background: rgba(13,115,119,0.08);
border: 1px solid rgba(13,115,119,0.22);
color: #0D7377;
}
.fmt-supports-ok svg { color: #0D7377; flex-shrink: 0 }
[data-theme="dark"] .fmt-supports-required { background: rgba(234,88,12,0.10); color: #FED7AA }
[data-theme="dark"] .fmt-supports-required svg { color: #FB923C }
[data-theme="dark"] .fmt-supports-ok { background: rgba(79,209,197,0.10); color: #4FD1C5 }
[data-theme="dark"] .fmt-supports-ok svg { color: #4FD1C5 }
.doc-item-pending { border: 1px dashed #E8E6E1; background: transparent }
[data-theme="dark"] .doc-item-pending { border-color: var(--color-border) }
.session-docs-list { display: flex; flex-direction: column; gap: 6px }
/* Imported file cards */
.doc-import-files { display: flex; flex-direction: column; gap: 8px }
.doc-import-file-card {
display: flex; align-items: center; gap: 12px;
padding: 12px 14px; background: #F8F6F3; border-radius: 10px;
border: 1px solid #E8E6E1; transition: border-color 0.15s, box-shadow 0.15s
}
.doc-import-file-card:hover { border-color: #0D7377; box-shadow: 0 0 0 2px rgba(13,115,119,0.08) }
[data-theme="dark"] .doc-import-file-card { background: var(--color-surface-2); border-color: var(--color-border) }
[data-theme="dark"] .doc-import-file-card:hover { border-color: var(--color-primary) }
.doc-import-file-icon {
width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
background: white; border-radius: 8px; border: 1px solid #E8E6E1; flex-shrink: 0
}
[data-theme="dark"] .doc-import-file-icon { background: var(--color-surface); border-color: var(--color-border) }
.doc-import-file-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px }
.doc-import-file-name {
font-size: 13px; font-weight: 600; color: #0A1628;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis
}
[data-theme="dark"] .doc-import-file-name { color: var(--color-text) }
.doc-import-file-meta { font-size: 11px; color: #9CA3AF; display: flex; align-items: center; gap: 6px }
.doc-import-file-badge {
font-size: 9px; font-weight: 700; color: #0D7377;
background: #E8F4F5; border-radius: 3px; padding: 1px 5px;
text-transform: uppercase; letter-spacing: 0.3px
}
[data-theme="dark"] .doc-import-file-badge { background: rgba(79,209,197,0.12); color: #4FD1C5 }
.doc-import-add-btn {
display: flex; align-items: center; justify-content: center; gap: 8px;
padding: 10px; border: 2px dashed #D4D2CC; border-radius: 10px;
cursor: pointer; color: #5A6578; font-size: 13px; font-weight: 500;
transition: border-color 0.2s, color 0.2s, background 0.2s
}
.doc-import-add-btn:hover { border-color: #0D7377; color: #0D7377; background: rgba(13,115,119,0.03) }
[data-theme="dark"] .doc-import-add-btn { border-color: var(--color-border); color: var(--color-text-secondary) }
[data-theme="dark"] .doc-import-add-btn:hover { border-color: var(--color-primary); color: var(--color-primary) }
/* ===== SUCCESS POPUP ===== */
.success-popup-overlay {
position: fixed; inset: 0; z-index: 9999;
background: rgba(10, 22, 40, 0.45); backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: flex; align-items: center; justify-content: center;
opacity: 0; transition: opacity 0.3s ease
}
.success-popup-overlay.open { opacity: 1 }
.success-popup {
position: relative; overflow: hidden;
background: #fff; border-radius: 24px; padding: 44px 36px 36px;
text-align: center; max-width: 420px; width: 90%;
box-shadow: 0 24px 80px rgba(13, 115, 119, 0.15), 0 0 0 1px rgba(13, 115, 119, 0.06);
transform: scale(0.92) translateY(24px);
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1)
}
.success-popup::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
background: linear-gradient(90deg, #0D7377, #14B8A6, #5EEAD4);
border-radius: 24px 24px 0 0
}
.success-popup-overlay.open .success-popup {
transform: scale(1) translateY(0)
}
[data-theme="dark"] .success-popup {
background: var(--color-surface);
box-shadow: 0 24px 80px rgba(8, 16, 20, 0.5), 0 0 0 1px rgba(45, 212, 191, 0.1);
border: 1px solid rgba(45, 212, 191, 0.08)
}
[data-theme="dark"] .success-popup::before {
background: linear-gradient(90deg, #14B8A6, #2DD4BF, #5EEAD4)
}
.success-popup-icon { margin-bottom: 18px }
.success-popup-icon > div,
.success-popup-icon > svg {
animation: successPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both
}
@keyframes successPop {
0% { transform: scale(0); opacity: 0 }
100% { transform: scale(1); opacity: 1 }
}
.success-popup-title {
font-family: var(--font-display); font-size: 20px; font-weight: 700;
color: #0A1628; margin: 0 0 8px
}
[data-theme="dark"] .success-popup-title { color: var(--color-text) }
.success-popup-text {
font-size: 13.5px; color: #5A6578; margin: 0 0 6px; line-height: 1.6
}
.success-popup-text strong { color: #0D7377 }
.success-popup-sub {
font-size: 12px; color: #9CA3AF; margin: 0 0 24px
}
.success-popup-actions {
display: flex; flex-direction: column; gap: 10px; align-items: center
}
.success-popup-actions .btn-primary {
display: inline-flex; align-items: center; gap: 8px;
padding: 12px 24px; font-size: 14px; font-weight: 600;
border-radius: 12px; border: none; cursor: pointer;
min-width: 220px; justify-content: center;
background: linear-gradient(135deg, #0D7377, #14B8A6);
color: #fff;
box-shadow: 0 4px 14px rgba(13, 115, 119, 0.25);
transition: all 0.2s ease
}
.success-popup-actions .btn-primary:hover {
background: linear-gradient(135deg, #0B6264, #0D9E92);
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(13, 115, 119, 0.3)
}
.success-popup-actions .btn-secondary {
background: none; border: none; color: #9CA3AF;
font-size: 13px; cursor: pointer; padding: 8px 16px;
border-radius: 8px; transition: all 0.15s ease
}
.success-popup-actions .btn-secondary:hover {
color: #5A6578; background: #F8F6F3
}
[data-theme="dark"] .success-popup-actions .btn-secondary:hover {
background: var(--color-surface-2)
}
/* ===== MOVE POPUP ===== */
.move-folder-list {
display: flex; flex-direction: column; gap: 2px;
max-height: 280px; overflow-y: auto;
border: 1px solid var(--color-divider); border-radius: 10px;
padding: 4px
}
.move-folder-item {
display: flex; align-items: center; gap: 10px;
width: 100%; padding: 10px 14px;
border: none; background: none; cursor: pointer;
border-radius: 8px; font-size: 13px; font-weight: 500;
color: #0A1628; text-align: left;
transition: background 0.15s
}
.move-folder-item:hover { background: #F0FAF9 }
[data-theme="dark"] .move-folder-item:hover { background: var(--color-surface-2) }
[data-theme="dark"] .move-folder-item { color: var(--color-text) }
.move-folder-icon {
width: 32px; height: 32px; border-radius: 8px;
background: #E8F4F5; display: flex; align-items: center;
justify-content: center; flex-shrink: 0
}
/* ===== FORMATION PREVIEW CARD ===== */
.formation-preview {
background: linear-gradient(135deg, #F0FAF9 0%, #E8F4F5 100%);
border: 1px solid #D0EBEC; border-radius: 12px;
padding: 16px; margin-bottom: 16px
}
[data-theme="dark"] .formation-preview {
background: rgba(20,184,166,0.06); border-color: rgba(20,184,166,0.15)
}
/* (module card + stag-checklist styles moved to wizard stepper section above) */
.fp-header { margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px }
.fp-badge {
font-size: 10px; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.05em; color: #0D7377;
background: rgba(13,115,119,0.1); padding: 3px 8px; border-radius: 4px
}
.fp-site-link {
font-size: 11px; font-weight: 600; color: #0D7377; text-decoration: none;
display: inline-flex; align-items: center; gap: 4px; transition: opacity 0.15s;
}
.fp-site-link:hover { opacity: 0.7; text-decoration: underline }
.fp-desc { font-size: 13px; color: #5A6578; line-height: 1.5; margin-bottom: 12px }
.fp-programme .fp-val { line-height: 1.7 }
[data-theme="dark"] .fp-badge { color: #4FD1C5; background: rgba(79,209,197,0.12) }
.fp-title {
font-family: var(--font-display); font-size: 16px; font-weight: 700;
color: #0A1628; margin-bottom: 10px
}
[data-theme="dark"] .fp-title { color: var(--color-text) }
.fp-row { display: flex; gap: 8px; margin-bottom: 6px; font-size: 12px; line-height: 1.5 }
.fp-label {
font-weight: 600; color: #0D7377; min-width: 80px; flex-shrink: 0
}
.fp-val { color: #5A6578 }
[data-theme="dark"] .fp-val { color: var(--color-text-muted) }
/* ===== SCHEDULE BUILDER ===== */
.schedule-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px }
.schedule-slot {
display: flex; align-items: center; gap: 8px;
padding: 10px 12px; background: #FAFAF8; border: 1px solid #E8E6E1;
border-radius: 10px
}
[data-theme="dark"] .schedule-slot { background: var(--color-surface-2); border-color: var(--color-border) }
.schedule-date {
border: 1px solid #E8E6E1; border-radius: 6px; padding: 6px 10px;
font-size: 13px; font-family: var(--font-body); background: #fff;
color: #0A1628; min-width: 140px
}
[data-theme="dark"] .schedule-date { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text) }
.schedule-times {
display: flex; align-items: center; gap: 6px
}
.schedule-time {
border: 1px solid #E8E6E1; border-radius: 6px; padding: 6px 8px;
font-size: 13px; font-family: var(--font-body); background: #fff;
color: #0A1628; width: 90px
}
[data-theme="dark"] .schedule-time { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text) }
.schedule-sep { font-size: 12px; color: #9CA3AF; font-weight: 500 }
.schedule-remove {
margin-left: auto; background: none; border: none; cursor: pointer;
color: #9CA3AF; padding: 4px; border-radius: 4px; display: flex;
transition: color 0.12s
}
.schedule-remove:hover { color: #DC2626 }
.schedule-remove:disabled { opacity: 0.3; cursor: default }
.btn-add-slot {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 14px; border: 1px dashed #D0EBEC; border-radius: 8px;
background: none; color: #0D7377; font-size: 13px; font-weight: 600;
cursor: pointer; font-family: var(--font-body); transition: all 0.12s
}
.btn-add-slot:hover { background: #E8F4F5; border-color: #0D7377 }
/* Inline new entreprise fields */
.new-ent-inline {
background: #FAFAF8; border: 1px solid #E8E6E1; border-radius: 12px;
padding: 16px; margin-bottom: 16px
}
[data-theme="dark"] .new-ent-inline {
background: var(--color-surface-2); border-color: var(--color-border)
}
/* ===== FORMATIONS PAGE — harmonized teal gradient ===== */
/* ===== Sessions KPIs (redesigned with icons) ===== */
.sf-kpis {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
margin-bottom: 18px
}
.sf-kpi-card {
display: flex; align-items: center; gap: 14px;
background: #fff; border-radius: 14px; padding: 16px 18px;
box-shadow: var(--shadow-card);
transition: transform 0.15s, box-shadow 0.15s
}
.sf-kpi-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover) }
[data-theme="dark"] .sf-kpi-card { background: var(--color-surface); border: 1px solid rgba(79, 209, 197, 0.08) }
.sf-kpi-icon {
width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center; color: #fff
}
.sf-kpi-icon svg { width: 22px; height: 22px }
.sf-kpi-icon--total { background: linear-gradient(135deg, #0D7377, #14A098) }
.sf-kpi-icon--live { background: linear-gradient(135deg, #11898D, #2DD4BF) }
.sf-kpi-icon--planif { background: linear-gradient(135deg, #14A098, #4FD1C5) }
.sf-kpi-icon--done { background: linear-gradient(135deg, #0A5C5F, #0D7377) }
.sf-kpi-body { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.sf-kpi-num {
font-family: var(--font-display); font-size: 24px; font-weight: 700;
color: #0A1628; line-height: 1.1
}
[data-theme="dark"] .sf-kpi-num { color: var(--color-text) }
.sf-kpi-lbl {
font-size: 11px; font-weight: 600; color: #6B7280;
text-transform: uppercase; letter-spacing: 0.5px
}
[data-theme="dark"] .sf-kpi-lbl { color: var(--color-text-muted) }
@media (max-width: 900px) { .sf-kpis { grid-template-columns: 1fr 1fr } }
@media (max-width: 480px) { .sf-kpis { grid-template-columns: 1fr } }
/* Toolbar: search + filters */
.sessions-toolbar {
display: flex; align-items: center; justify-content: flex-start;
gap: 12px; margin-bottom: 14px; flex-wrap: wrap
}
.sessions-toolbar .sf-search { flex: 1 1 320px }
.sessions-toolbar .gcal-view-toggle,
.sessions-toolbar .gcal-week-nav { flex-shrink: 0 }
.sf-search {
display: flex; align-items: center; gap: 8px; background: #fff;
border: none; border-radius: 14px; padding: 10px 16px;
flex: 1; max-width: 420px; box-shadow: var(--shadow-sm);
position: relative
}
[data-theme="dark"] .sf-search { background: var(--color-surface) }
.sf-search-input {
border: none; background: none; outline: none; font-size: 13px;
font-family: var(--font-body); color: #0A1628; width: 100%
}
.sf-search-input::placeholder { color: #9CA3AF }
[data-theme="dark"] .sf-search-input { color: var(--color-text) }
.sf-search-suggestions {
position: absolute; top: calc(100% + 6px); left: 0; right: 0;
background: #fff; border: 1px solid rgba(13, 115, 119, 0.14);
border-radius: 12px; box-shadow: 0 10px 28px rgba(13, 115, 119, 0.12);
z-index: 60; overflow: hidden;
display: flex; flex-direction: column; padding: 4px 0
}
.sf-search-suggestions[hidden] { display: none }
.sf-suggestion-item {
padding: 10px 14px; font-size: 13px; color: #0A1628;
background: transparent; border: none; text-align: left; cursor: pointer;
font-family: var(--font-body); transition: background 0.12s, color 0.12s;
display: flex; align-items: center; gap: 8px
}
.sf-suggestion-item:hover { background: rgba(13, 115, 119, 0.06); color: #0D7377 }
.sf-suggestion-item svg { color: #0D7377; flex-shrink: 0 }
[data-theme="dark"] .sf-search-suggestions { background: var(--color-surface); border-color: rgba(79, 209, 197, 0.2) }
[data-theme="dark"] .sf-suggestion-item { color: var(--color-text) }
[data-theme="dark"] .sf-suggestion-item:hover { background: rgba(79, 209, 197, 0.08); color: #4FD1C5 }
.sessions-filters { display: flex; gap: 8px }
.sf-select {
padding: 8px 14px; border: none; border-radius: 10px;
font-size: 13px; color: #5A6578; background: #fff; cursor: pointer;
font-family: var(--font-body); box-shadow: var(--shadow-sm)
}
[data-theme="dark"] .sf-select { background: var(--color-surface); color: var(--color-text) }
.sf-select:focus { outline: 2px solid #0D7377; outline-offset: -1px }
/* Layout: calendar (main) + session list (side) */
.sf-layout {
display: grid; grid-template-columns: 1fr 340px; gap: 14px;
align-items: stretch; margin-bottom: 14px
}
.sf-main { display: flex; flex-direction: column; gap: 12px; min-height: 0 }
.sf-side { display: flex; flex-direction: column; min-height: 0 }
@media (max-width: 1024px) { .sf-layout { grid-template-columns: 1fr } }
/* Side panel */
.sf-side-card {
background: #fff; border-radius: 14px; box-shadow: var(--shadow-card);
overflow: hidden; flex: 1; display: flex; flex-direction: column
}
[data-theme="dark"] .sf-side-card { background: var(--color-surface); border: 1px solid rgba(79, 209, 197, 0.06) }
.sf-side-header {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 18px; border-bottom: 1px solid #F0EFEB; flex-shrink: 0
}
[data-theme="dark"] .sf-side-header { border-bottom-color: var(--color-border) }
.sf-side-title { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: #0A1628; margin: 0 }
[data-theme="dark"] .sf-side-title { color: var(--color-text) }
.sf-side-count {
font-size: 11px; font-weight: 700; color: #fff;
background: linear-gradient(135deg, #14B8A6, #0D9488);
padding: 2px 10px; border-radius: 10px
}
.sf-list { overflow-y: auto; flex: 1 }
.sf-list-item {
display: flex; align-items: center; gap: 10px; padding: 10px 18px;
border-bottom: 1px solid #F0EFEB; text-decoration: none; color: inherit;
transition: background 0.12s
}
.sf-list-item:last-child { border-bottom: none }
.sf-list-item:hover { background: #F0FAF9 }
[data-theme="dark"] .sf-list-item { border-bottom-color: var(--color-border) }
[data-theme="dark"] .sf-list-item:hover { background: var(--color-surface-2) }
.sf-list-date {
display: flex; flex-direction: column; align-items: center;
min-width: 38px; padding: 4px 6px;
background: linear-gradient(135deg, #E8F4F5, #D0EBEC);
border-radius: 8px; flex-shrink: 0
}
[data-theme="dark"] .sf-list-date { background: rgba(79,209,197,0.12) }
.sf-list-day { font-size: 16px; font-weight: 700; color: #0D7377; line-height: 1 }
[data-theme="dark"] .sf-list-day { color: #4FD1C5 }
.sf-list-mon { font-size: 9px; color: #0A5C5F; text-transform: uppercase; font-weight: 600 }
[data-theme="dark"] .sf-list-mon { color: #4FD1C5 }
.sf-list-info { flex: 1; min-width: 0 }
.sf-list-title {
font-size: 13px; font-weight: 600; color: #0A1628;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis
}
[data-theme="dark"] .sf-list-title { color: var(--color-text) }
.sf-list-meta { font-size: 11px; color: #9CA3AF; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.sf-list-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0 }
/* ===== Toutes les formations — preview card ===== */
.sf-all-card {
background: #fff; border-radius: 16px;
box-shadow: 0 4px 16px rgba(13, 115, 119, 0.06);
border: 1px solid rgba(13, 115, 119, 0.08);
overflow: hidden
}
[data-theme="dark"] .sf-all-card {
background: var(--color-surface);
border-color: rgba(79, 209, 197, 0.12)
}
.sf-all-header {
display: flex; align-items: center; gap: 10px;
padding: 18px 22px 16px;
background: linear-gradient(180deg, #F7FBFB 0%, #fff 100%);
border-bottom: 1px solid rgba(13, 115, 119, 0.08)
}
[data-theme="dark"] .sf-all-header {
background: linear-gradient(180deg, rgba(79, 209, 197, 0.04), transparent);
border-bottom-color: rgba(79, 209, 197, 0.12)
}
.sf-all-title-main {
font-family: var(--font-display); font-size: 16px; font-weight: 700;
color: #0A1628; margin: 0; flex: 1;
display: flex; align-items: center; gap: 10px
}
.sf-all-title-main::before {
content: ""; display: inline-block; width: 3px; height: 18px;
background: linear-gradient(180deg, #0D7377, #14A098);
border-radius: 2px
}
[data-theme="dark"] .sf-all-title-main { color: var(--color-text) }
.sf-all-count {
background: rgba(13, 115, 119, 0.1); color: #0D7377;
font-size: 11px; font-weight: 700; padding: 4px 12px;
border-radius: 999px; letter-spacing: 0.4px
}
[data-theme="dark"] .sf-all-count { background: rgba(79, 209, 197, 0.14); color: #4FD1C5 }
.sf-all-list { padding: 4px 0 }
.sf-all-row {
display: grid;
grid-template-columns: 1fr auto auto;
align-items: center; gap: 16px;
padding: 14px 22px;
text-decoration: none; color: inherit;
border-bottom: 1px solid #F5F5F1;
transition: background 0.12s, padding 0.12s;
position: relative
}
.sf-all-row::before {
content: ""; position: absolute; left: 0; top: 10px; bottom: 10px;
width: 3px; background: transparent; transition: background 0.15s;
border-radius: 0 3px 3px 0
}
.sf-all-row:last-child { border-bottom: none }
.sf-all-row:hover { background: rgba(13, 115, 119, 0.04); padding-left: 26px }
.sf-all-row:hover::before { background: #0D7377 }
[data-theme="dark"] .sf-all-row { border-bottom-color: rgba(79, 209, 197, 0.08) }
[data-theme="dark"] .sf-all-row:hover { background: rgba(79, 209, 197, 0.05) }
[data-theme="dark"] .sf-all-row:hover::before { background: #4FD1C5 }
.sf-all-title {
font-size: 14px; font-weight: 600; color: #0A1628;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0
}
[data-theme="dark"] .sf-all-title { color: var(--color-text) }
.sf-all-date {
font-size: 12px; color: #6B7280; white-space: nowrap; font-weight: 500
}
[data-theme="dark"] .sf-all-date { color: var(--color-text-muted) }
.sf-all-badge { font-size: 10px !important; white-space: nowrap }
.sf-all-empty {
padding: 32px; text-align: center; color: #9CA3AF; font-size: 13px
}
.sf-all-more {
display: flex; align-items: center; justify-content: center; gap: 8px;
width: 100%; padding: 16px 22px;
background: linear-gradient(135deg, #0D7377 0%, #14A098 100%);
border: none;
color: #fff; font-size: 12px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.7px;
cursor: pointer; font-family: var(--font-body);
transition: filter 0.15s, transform 0.15s
}
.sf-all-more:hover { filter: brightness(1.1) }
.sf-all-more svg { transition: transform 0.15s }
.sf-all-more:hover svg { transform: translateX(4px) }
@media (max-width: 640px) {
.sf-all-row { grid-template-columns: 1fr auto auto; gap: 10px; padding: 12px 14px }
.sf-all-date { font-size: 11px }
}
/* ===== Full list view — Toutes les formations (expanded) ===== */
.sflist-page { max-width: 1200px; margin: 0 auto }
.sflist-backbar {
display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
margin-bottom: 18px
}
.sflist-back-btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 16px; border-radius: 10px;
background: #fff; border: 1px solid rgba(13, 115, 119, 0.14);
color: #0D7377; font-size: 13px; font-weight: 600;
cursor: pointer; font-family: var(--font-body);
transition: background 0.15s, transform 0.15s
}
.sflist-back-btn:hover { background: #F0FAF9; transform: translateX(-2px) }
.sflist-back-btn svg { transition: transform 0.15s }
.sflist-back-btn:hover svg { transform: translateX(-2px) }
.sflist-backbar-title {
font-family: var(--font-display); font-size: 22px; font-weight: 700;
color: #0A1628
}
.sflist-backbar-title em {
font-style: normal; color: #0D7377; font-size: 14px;
margin-left: 8px; font-weight: 600
}
[data-theme="dark"] .sflist-back-btn { background: var(--color-surface); border-color: rgba(79, 209, 197, 0.2); color: #4FD1C5 }
[data-theme="dark"] .sflist-back-btn:hover { background: rgba(79, 209, 197, 0.08) }
[data-theme="dark"] .sflist-backbar-title { color: var(--color-text) }
[data-theme="dark"] .sflist-backbar-title em { color: #4FD1C5 }
.sflist-search-wrap {
display: flex; align-items: center; gap: 10px;
background: #fff; border-radius: 12px; padding: 12px 18px;
box-shadow: var(--shadow-sm); margin-bottom: 16px
}
[data-theme="dark"] .sflist-search-wrap { background: var(--color-surface) }
.sflist-search {
flex: 1; border: none; background: none; outline: none;
font-size: 14px; color: #0A1628; font-family: var(--font-body)
}
.sflist-search::placeholder { color: #9CA3AF }
[data-theme="dark"] .sflist-search { color: var(--color-text) }
.sflist-table {
background: #fff; border-radius: 14px; box-shadow: var(--shadow-card);
overflow: hidden
}
[data-theme="dark"] .sflist-table { background: var(--color-surface); border: 1px solid rgba(79, 209, 197, 0.08) }
.sflist-thead {
display: grid;
grid-template-columns: minmax(260px, 2.4fr) minmax(160px, 1.2fr) minmax(140px, 1fr) 60px 120px 40px;
gap: 16px; padding: 14px 22px;
background: linear-gradient(180deg, #F7FBFB 0%, #fff 100%);
border-bottom: 1px solid rgba(13, 115, 119, 0.1)
}
[data-theme="dark"] .sflist-thead {
background: rgba(79, 209, 197, 0.04);
border-bottom-color: rgba(79, 209, 197, 0.14)
}
.sflist-th {
font-size: 10px; font-weight: 700; color: #0D7377;
text-transform: uppercase; letter-spacing: 0.6px
}
[data-theme="dark"] .sflist-th { color: #4FD1C5 }
.sflist-row {
display: grid;
grid-template-columns: minmax(260px, 2.4fr) minmax(160px, 1.2fr) minmax(140px, 1fr) 60px 120px 40px;
gap: 16px; align-items: center; padding: 16px 22px;
text-decoration: none; color: inherit;
border-bottom: 1px solid #F5F5F1;
transition: background 0.12s
}
.sflist-row:last-child { border-bottom: none }
.sflist-row:hover { background: rgba(13, 115, 119, 0.03) }
[data-theme="dark"] .sflist-row { border-bottom-color: rgba(79, 209, 197, 0.08) }
[data-theme="dark"] .sflist-row:hover { background: rgba(79, 209, 197, 0.04) }
.sflist-cell {
font-size: 13px; color: #0A1628;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis
}
[data-theme="dark"] .sflist-cell { color: var(--color-text) }
.sflist-cell-title { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.sflist-title {
font-size: 14px; font-weight: 600; color: #0A1628;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis
}
[data-theme="dark"] .sflist-title { color: var(--color-text) }
.sflist-ent { font-size: 11px; color: #6B7280 }
[data-theme="dark"] .sflist-ent { color: var(--color-text-muted) }
.sflist-dim { color: #9CA3AF; font-style: italic }
.sflist-num { text-align: center; font-weight: 700; color: #0D7377 }
[data-theme="dark"] .sflist-num { color: #4FD1C5 }
.sflist-arrow {
display: flex; align-items: center; justify-content: center;
color: #9CA3AF; transition: transform 0.15s, color 0.15s
}
.sflist-row:hover .sflist-arrow { color: #0D7377; transform: translateX(3px) }
.sflist-empty {
padding: 60px 20px; text-align: center; color: #9CA3AF; font-size: 14px
}
@media (max-width: 900px) {
.sflist-thead, .sflist-row {
grid-template-columns: 1fr 110px 40px;
gap: 10px; padding: 14px 16px
}
.sflist-th:nth-child(3), .sflist-th:nth-child(4),
.sflist-cell:nth-child(3), .sflist-cell:nth-child(4) { display: none }
.sflist-title { font-size: 13px }
}
/* ===== BOTTOM ROW — sessions à venir ===== */
.sf-bottom-row {
display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 20px
}
.sf-bottom-card {
background: #fff; border-radius: 14px; box-shadow: var(--shadow-card);
overflow: hidden
}
[data-theme="dark"] .sf-bottom-card { background: var(--color-surface); border: 1px solid rgba(79, 209, 197, 0.06) }
.sf-bottom-header {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 18px; border-bottom: 1px solid #F0EFEB
}
[data-theme="dark"] .sf-bottom-header { border-bottom-color: var(--color-border) }
.sf-bottom-title {
font-family: var(--font-display); font-size: 14px; font-weight: 700;
color: #0A1628; margin: 0
}
[data-theme="dark"] .sf-bottom-title { color: var(--color-text) }
.sf-bottom-list { padding: 4px 0 }
/* Upcoming session items */
.sf-upcoming-item {
display: flex; align-items: center; gap: 12px; padding: 10px 18px;
text-decoration: none; color: inherit; transition: background 0.12s;
border-bottom: 1px solid #FAFAF8
}
.sf-upcoming-item:last-child { border-bottom: none }
.sf-upcoming-item:hover {
background: rgba(13, 115, 119, 0.03);
box-shadow: 0 4px 20px rgba(13, 115, 119, 0.12);
border-radius: 10px;
}
.sf-upcoming-item:hover .sf-upcoming-title { color: #0D7377 !important }
.sf-upcoming-item:hover .sf-upcoming-date {
background: linear-gradient(135deg, #0D7377, #14B8A6) !important;
border-color: transparent !important;
}
.sf-upcoming-item:hover .sf-upcoming-day { color: #fff !important }
.sf-upcoming-item:hover .sf-upcoming-mon { color: rgba(255,255,255,0.85) !important }
[data-theme="dark"] .sf-upcoming-item:hover {
background: rgba(79, 209, 197, 0.05);
box-shadow: 0 4px 20px rgba(79, 209, 197, 0.1);
}
[data-theme="dark"] .sf-upcoming-item:hover .sf-upcoming-title { color: #4FD1C5 !important }
[data-theme="dark"] .sf-upcoming-item:hover .sf-upcoming-date {
background: linear-gradient(135deg, #4FD1C5, #14B8A6) !important;
}
[data-theme="dark"] .sf-upcoming-item:hover .sf-upcoming-day { color: #0A1628 !important }
[data-theme="dark"] .sf-upcoming-item:hover .sf-upcoming-mon { color: rgba(10,22,40,0.7) !important }
.sf-upcoming-cancelled { background: #FEF2F2 !important }
.sf-upcoming-cancelled:hover { background: #FDE8E8 !important }
.sf-upcoming-cancelled .sf-upcoming-title { text-decoration: line-through; color: #9B1C1C !important; opacity: 0.7 }
.sf-upcoming-cancelled .sf-upcoming-date { background: rgba(220,38,38,0.06) !important; border-color: rgba(220,38,38,0.12) !important }
.sf-upcoming-cancelled .sf-upcoming-day { color: #DC2626 !important }
.sf-upcoming-cancelled .sf-upcoming-mon { color: #DC2626 !important }
[data-theme="dark"] .sf-upcoming-cancelled { background: rgba(248,113,113,0.06) !important }
[data-theme="dark"] .sf-upcoming-cancelled:hover { background: rgba(248,113,113,0.1) !important }
[data-theme="dark"] .sf-upcoming-cancelled .sf-upcoming-title { color: #F87171 !important }
/* Formateur "Prochaines sessions" — teal card */
.fmt-agenda-card {
background: linear-gradient(150deg, #11898D 0%, #0A5C5F 45%, #073F42 100%) !important;
border: none !important;
box-shadow: 0 4px 20px rgba(13, 115, 119, 0.25) !important;
}
.fmt-agenda-card .sf-upcoming-item { color: #fff; gap: 16px; }
.fmt-agenda-card .sf-upcoming-item:hover {
background: rgba(255, 255, 255, 0.1) !important;
box-shadow: none;
}
.fmt-agenda-card .sf-upcoming-title { color: #fff !important }
.fmt-agenda-card .sf-upcoming-meta { color: rgba(255, 255, 255, 0.6) !important }
.fmt-agenda-card .sf-upcoming-date {
background: #fff !important;
border-color: rgba(255, 255, 255, 0.3) !important;
}
.fmt-agenda-card .sf-upcoming-day { color: #1A3C40 !important }
.fmt-agenda-card .sf-upcoming-mon { color: #264E52 !important }
.fmt-agenda-card .sf-upcoming-item:hover .sf-upcoming-date {
background: #fff !important;
box-shadow: 0 2px 10px rgba(255,255,255,0.3);
border-color: rgba(255,255,255,0.3) !important;
}
.fmt-agenda-card .sf-upcoming-item:hover .sf-upcoming-day { color: #1A3C40 !important }
.fmt-agenda-card .sf-upcoming-item:hover .sf-upcoming-mon { color: #264E52 !important }
.fmt-agenda-card .sf-upcoming-item:hover .sf-upcoming-title { color: #fff !important }
[data-theme="dark"] .sf-upcoming-item:hover { background: var(--color-surface-2) }
.sf-upcoming-date {
display: flex; flex-direction: column; align-items: center; justify-content: center;
min-width: 48px; padding: 6px 8px;
background: rgba(13, 115, 119, 0.06);
border: 1px solid rgba(13, 115, 119, 0.10);
border-radius: 10px; flex-shrink: 0; line-height: 1;
}
.sf-upcoming-day {
font-size: 19px; font-weight: 700; color: #0A1628;
font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -0.5px;
}
.sf-upcoming-mon {
font-size: 10px; font-weight: 700; color: #0D7377;
text-transform: uppercase; letter-spacing: 0.7px; margin-top: 4px;
}
[data-theme="dark"] .sf-upcoming-date {
background: rgba(79, 209, 197, 0.10);
border-color: rgba(79, 209, 197, 0.20);
}
[data-theme="dark"] .sf-upcoming-day { color: var(--color-text); }
.sf-upcoming-rel { font-size: 15px; font-weight: 700; color: #0D7377; line-height: 1.1; white-space: nowrap; letter-spacing: 0.2px }
[data-theme="dark"] .sf-upcoming-rel { color: #4FD1C5 }
.sf-upcoming-info { flex: 1; min-width: 0 }
.sf-upcoming-title {
font-size: 13px; font-weight: 600; color: #0A1628;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis
}
[data-theme="dark"] .sf-upcoming-title { color: var(--color-text) }
.sf-upcoming-meta { font-size: 11px; color: #9CA3AF; margin-top: 2px }
/* ===== Upcoming card — teal variant (used in sf-side) ===== */
.sf-side {
display: flex; flex-direction: column; min-height: 0; height: 100%
}
.sf-upcoming-card {
flex: 1 1 auto; min-height: 0;
display: flex; flex-direction: column;
background: #fff; border: 1px solid rgba(13, 115, 119, 0.14);
border-radius: 14px; box-shadow: 0 6px 18px rgba(13, 115, 119, 0.08);
overflow: hidden
}
.sf-upcoming-card .sf-bottom-header {
background: linear-gradient(135deg, #14B8A6 0%, #0D9488 100%);
border-bottom: none; padding: 16px 18px;
flex-shrink: 0;
display: flex; align-items: center; justify-content: space-between
}
.sf-upcoming-card .sf-bottom-title {
color: #fff; font-size: 13px; letter-spacing: 0.6px; text-transform: uppercase
}
.sf-upcoming-count {
background: rgba(255, 255, 255, 0.2); color: #fff;
font-size: 11px; font-weight: 700; padding: 3px 10px;
border-radius: 999px; letter-spacing: 0.3px
}
.sf-upcoming-card .sf-bottom-list {
padding: 0; flex: 1 1 auto; min-height: 0;
display: flex; flex-direction: column
}
.sf-upcoming-card .sf-upcoming-item {
flex: 1 1 0; min-height: 0;
border-bottom: 1px solid rgba(13, 115, 119, 0.08);
padding: 12px 18px; position: relative;
display: flex; align-items: center; gap: 12px; overflow: hidden
}
.sf-upcoming-card .sf-upcoming-item::before {
content: ""; position: absolute; left: 0; top: 10px; bottom: 10px;
width: 3px; background: transparent; border-radius: 0 3px 3px 0;
transition: background 0.15s
}
.sf-upcoming-card .sf-upcoming-item:hover { background: rgba(13, 115, 119, 0.04) }
.sf-upcoming-card .sf-upcoming-item:hover::before { background: #0D7377 }
.sf-upcoming-card .sf-upcoming-item:last-child { border-bottom: none }
[data-theme="dark"] .sf-upcoming-card { background: var(--color-surface); border-color: rgba(79, 209, 197, 0.2) }
[data-theme="dark"] .sf-upcoming-card .sf-upcoming-item { border-bottom-color: rgba(79, 209, 197, 0.12) }
/* Recent document items */
.sf-doc-item {
display: flex; align-items: center; gap: 10px; padding: 10px 18px;
border-bottom: 1px solid #FAFAF8; transition: background 0.12s
}
.sf-doc-item:last-child { border-bottom: none }
.sf-doc-item:hover { background: #F0FAF9 }
.sf-doc-badge {
font-size: 10px; font-weight: 700; color: #fff;
background: linear-gradient(135deg, #14B8A6, #0D9488);
border-radius: 5px; padding: 3px 8px; flex-shrink: 0
}
[data-theme="dark"] .sf-doc-badge { background: linear-gradient(135deg, #4FD1C5, #38B2AC) }
.sf-doc-name {
flex: 1; font-size: 13px; color: #0A1628; min-width: 0;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis
}
[data-theme="dark"] .sf-doc-name { color: var(--color-text) }
.sf-doc-date { font-size: 11px; color: #9CA3AF; flex-shrink: 0 }
/* Side panel — session list */
.sf-side-card {
background: #fff; border-radius: 14px; box-shadow: var(--shadow-card);
overflow: hidden; max-height: 420px; display: flex; flex-direction: column
}
[data-theme="dark"] .sf-side-card { background: var(--color-surface); border: 1px solid rgba(79, 209, 197, 0.06) }
.sf-side-header {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 16px; border-bottom: 1px solid #F0EFEB; flex-shrink: 0
}
[data-theme="dark"] .sf-side-header { border-bottom-color: var(--color-border) }
.sf-side-title { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: #0A1628; margin: 0 }
[data-theme="dark"] .sf-side-title { color: var(--color-text) }
.sf-side-count {
font-size: 12px; font-weight: 700; color: #0D7377; background: #E8F4F5;
padding: 2px 8px; border-radius: 10px
}
[data-theme="dark"] .sf-side-count { background: rgba(79,209,197,0.12); color: #4FD1C5 }
.sf-list { overflow-y: auto; flex: 1 }
.sf-list-item {
display: flex; align-items: center; gap: 10px; padding: 10px 16px;
border-bottom: 1px solid #F0EFEB; text-decoration: none; color: inherit;
transition: background 0.12s
}
.sf-list-item:last-child { border-bottom: none }
.sf-list-item:hover { background: #F0FAF9 }
[data-theme="dark"] .sf-list-item { border-bottom-color: var(--color-border) }
[data-theme="dark"] .sf-list-item:hover { background: var(--color-surface-2) }
.sf-list-date {
display: flex; flex-direction: column; align-items: center;
min-width: 38px; padding: 4px 6px; background: #E8F4F5; border-radius: 8px; flex-shrink: 0
}
[data-theme="dark"] .sf-list-date { background: rgba(79,209,197,0.12) }
.sf-list-day { font-size: 16px; font-weight: 700; color: #0D7377; line-height: 1 }
[data-theme="dark"] .sf-list-day { color: #4FD1C5 }
.sf-list-mon { font-size: 9px; color: #0D7377; text-transform: uppercase; font-weight: 600 }
[data-theme="dark"] .sf-list-mon { color: #4FD1C5 }
.sf-list-info { flex: 1; min-width: 0 }
.sf-list-title {
font-size: 13px; font-weight: 600; color: #0A1628;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis
}
[data-theme="dark"] .sf-list-title { color: var(--color-text) }
.sf-list-meta { font-size: 11px; color: #9CA3AF; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.sf-list-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0 }
/* Cards grid (kept for reference / mobile) */
.sf-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px }
.sf-card {
display: flex; flex-direction: column; gap: 10px;
background: #fff; border-radius: 16px; padding: 20px;
box-shadow: var(--shadow-card); text-decoration: none; color: inherit;
transition: box-shadow 0.2s, transform 0.2s; border: 1px solid transparent
}
.sf-card:hover {
box-shadow: var(--shadow-hover); transform: translateY(-2px);
border-color: #D0EBEC
}
[data-theme="dark"] .sf-card { background: var(--color-surface); box-shadow: var(--shadow-sm) }
.sf-card-top { display: flex; align-items: center; justify-content: space-between }
.sf-card-mod {
font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 6px
}
.mod-presentiel { background: #E8F4F5; color: #0D7377 }
.mod-distanciel { background: #D0EBEC; color: #0A5C5F }
.mod-hybride { background: linear-gradient(135deg, #E8F4F5, #D0EBEC); color: #0D7377 }
[data-theme="dark"] .mod-presentiel { background: rgba(79,209,197,0.12); color: #4FD1C5 }
[data-theme="dark"] .mod-distanciel { background: rgba(79,209,197,0.18); color: #5EEAD4 }
[data-theme="dark"] .mod-hybride { background: rgba(79,209,197,0.15); color: #4FD1C5 }
.sf-card-title {
font-family: var(--font-display); font-size: 16px; font-weight: 700;
color: #0A1628; margin: 0; line-height: 1.3
}
[data-theme="dark"] .sf-card-title { color: var(--color-text) }
.sf-card-rows { display: flex; flex-direction: column; gap: 6px }
.sf-card-row {
display: flex; align-items: center; gap: 8px;
font-size: 13px; color: #5A6578
}
.sf-card-row svg { color: #9CA3AF; flex-shrink: 0 }
[data-theme="dark"] .sf-card-row { color: var(--color-text-muted) }
.sf-card-lieu {
font-size: 11px; color: #9CA3AF; padding-top: 6px;
border-top: 1px solid #F0EFEB; margin-top: 4px
}
[data-theme="dark"] .sf-card-lieu { border-top-color: var(--color-border) }
/* ===== CALENDAR VIEWS ===== */
/* Header: view toggle + week nav */
.gcal-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 12px; gap: 10px
}
.gcal-view-toggle {
display: flex; gap: 3px; background: #fff; border-radius: 10px;
padding: 3px; box-shadow: var(--shadow-sm)
}
[data-theme="dark"] .gcal-view-toggle { background: var(--color-surface) }
.gcal-vt-btn {
padding: 6px 16px; border: none; background: none; border-radius: 8px;
font-size: 12px; font-weight: 600; color: #9CA3AF; cursor: pointer;
font-family: var(--font-body); transition: all 0.15s
}
.gcal-vt-btn.active { background: linear-gradient(135deg, #14B8A6, #0D9488); color: #fff }
.gcal-vt-btn:hover:not(.active) { background: #F0FAF9; color: #5A6578 }
.gcal-week-nav { display: flex; align-items: center; gap: 6px }
.gcal-nav-btn {
width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
border: 1px solid #E8E6E1; border-radius: 6px; background: none;
cursor: pointer; color: #5A6578; transition: all 0.12s
}
.gcal-nav-btn:hover { background: #E8F4F5; border-color: #D0EBEC; color: #0D7377 }
.gcal-today-btn {
padding: 4px 10px; border: 1px solid #D0EBEC; border-radius: 6px;
background: #E8F4F5; color: #0D7377; font-size: 11px; font-weight: 600;
cursor: pointer; font-family: var(--font-body)
}
.gcal-today-btn:hover { background: #0D7377; color: #fff }
/* ===== MONTH VIEW — 2 mini calendars ===== */
.gcal-months {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px
}
.gcal-month-card {
background: #fff; border-radius: 14px; padding: 16px;
box-shadow: var(--shadow-card)
}
[data-theme="dark"] .gcal-month-card { background: var(--color-surface); border: 1px solid rgba(79, 209, 197, 0.06) }
.gcal-month-title {
font-family: var(--font-display); font-size: 14px; font-weight: 700;
color: #0A1628; margin-bottom: 10px; text-align: center
}
[data-theme="dark"] .gcal-month-title { color: var(--color-text) }
.gcal-month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px }
.gcal-mday-name {
font-size: 9px; font-weight: 600; color: #9CA3AF; text-align: center;
padding: 3px 0; text-transform: uppercase
}
.gcal-mday {
min-height: 60px; display: flex; flex-direction: column; align-items: stretch;
border-radius: 6px; font-size: 11px; color: #5A6578;
cursor: default; padding: 2px; gap: 1px
}
.gcal-mday > span { text-align: center; line-height: 1.4 }
.gcal-mday.empty { visibility: hidden }
.gcal-mday-today > span {
background: #0D7377; color: #fff; font-weight: 700; border-radius: 50%;
width: 20px; height: 20px; display: inline-flex; align-items: center;
justify-content: center; margin: 0 auto; font-size: 10px
}
.gcal-mday-has { cursor: pointer }
.gcal-mday-has:hover { background: #F0FAF9 }
.gcal-mday-ev {
font-size: 8px; font-weight: 600; color: #0D7377; background: #E8F4F5;
border-radius: 3px; padding: 1px 3px; cursor: pointer;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
line-height: 1.3
}
.gcal-mday-ev:hover { background: #D0EBEC }
[data-theme="dark"] .gcal-mday-ev { background: rgba(79,209,197,0.12); color: #4FD1C5 }
.gcal-mday-more { font-size: 8px; color: #9CA3AF; text-align: center }
/* ===== WEEK VIEW — Google Calendar style ===== */
.gcal-week-title {
font-family: var(--font-display); font-size: 14px; font-weight: 700;
color: #0A1628; margin-bottom: 8px
}
[data-theme="dark"] .gcal-week-title { color: var(--color-text) }
.gcal-week-grid {
display: grid; grid-template-columns: 40px repeat(7, 1fr);
background: #fff; border-radius: 14px; box-shadow: var(--shadow-card);
overflow: hidden
}
[data-theme="dark"] .gcal-week-grid { background: var(--color-surface); border: 1px solid rgba(79, 209, 197, 0.06) }
/* Time column */
.gcal-time-col { border-right: 1px solid #F0EFEB }
[data-theme="dark"] .gcal-time-col { border-right-color: var(--color-border) }
.gcal-time-header { height: 44px; border-bottom: 1px solid #F0EFEB }
[data-theme="dark"] .gcal-time-header { border-bottom-color: var(--color-border) }
.gcal-time-slot {
height: 32px; display: flex; align-items: flex-start; justify-content: flex-end;
padding: 0 6px; font-size: 9px; color: #9CA3AF; border-bottom: 1px solid #FAFAF8
}
/* Day columns */
.gcal-wcol { border-right: 1px solid #F0EFEB; position: relative }
.gcal-wcol:last-child { border-right: none }
[data-theme="dark"] .gcal-wcol { border-right-color: var(--color-border) }
.gcal-wcol-today { background: #FAFDF9 }
[data-theme="dark"] .gcal-wcol-today { background: rgba(79,209,197,0.03) }
.gcal-wcol-header {
height: 44px; display: flex; flex-direction: column; align-items: center;
justify-content: center; border-bottom: 1px solid #F0EFEB; gap: 1px
}
[data-theme="dark"] .gcal-wcol-header { border-bottom-color: var(--color-border) }
.gcal-wcol-label { font-size: 9px; font-weight: 600; color: #9CA3AF; text-transform: uppercase }
.gcal-wcol-num { font-size: 14px; font-weight: 700; color: #0A1628 }
[data-theme="dark"] .gcal-wcol-num { color: var(--color-text) }
.gcal-wcol-num-today {
background: #0D7377; color: #fff; width: 24px; height: 24px;
border-radius: 50%; display: flex; align-items: center; justify-content: center;
font-size: 12px
}
.gcal-wcol-body { position: relative; height: 320px }
.gcal-wslot { height: 32px; border-bottom: 1px solid #FAFAF8 }
[data-theme="dark"] .gcal-wslot { border-bottom-color: rgba(255,255,255,0.03) }
/* Event blocks (positioned absolutely) */
.gcal-wevent {
position: absolute; left: 3px; right: 3px;
border-radius: 6px; padding: 4px 6px; cursor: pointer;
overflow: hidden; display: flex; flex-direction: column;
transition: opacity 0.12s, box-shadow 0.12s;
border-left: 3px solid
}
.gcal-wevent:hover { opacity: 0.9; box-shadow: 0 2px 8px rgba(0,0,0,0.1) }
.gcal-wevent.gcal-ev-pres { background: #E8F4F5; color: #0D7377; border-left-color: #0D7377 }
.gcal-wevent.gcal-ev-dist { background: #D0EBEC; color: #0A5C5F; border-left-color: #0A5C5F }
.gcal-wevent.gcal-ev-hyb { background: linear-gradient(135deg, #E8F4F5, #D0EBEC); color: #0D7377; border-left-color: #11898D }
[data-theme="dark"] .gcal-wevent.gcal-ev-pres { background: rgba(79,209,197,0.12); color: #4FD1C5; border-left-color: #4FD1C5 }
[data-theme="dark"] .gcal-wevent.gcal-ev-dist { background: rgba(79,209,197,0.18); color: #5EEAD4; border-left-color: #5EEAD4 }
.gcal-wevent-time { font-size: 9px; font-weight: 600; opacity: 0.7 }
.gcal-wevent-title {
font-size: 11px; font-weight: 700;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis
}
.gcal-wevent-ent {
font-size: 9px; opacity: 0.6;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis
}
/* ===== SESSION DETAIL ===== */
.session-detail-card { overflow: visible }
.session-detail-header {
display: flex; align-items: flex-start; justify-content: space-between;
gap: var(--space-4); margin-bottom: var(--space-6); flex-wrap: wrap
}
.session-detail-info { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap }
.session-detail-info .card-title { margin: 0 }
.session-detail-actions { display: flex; gap: var(--space-2); flex-wrap: wrap }
.session-detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-4) }
.session-detail-field { display: flex; flex-direction: column; gap: var(--space-1) }
.detail-label { font-size: var(--text-xs); font-weight: 600; color: #0D7377; text-transform: uppercase; letter-spacing: .05em }
.detail-value { font-size: var(--text-sm); color: var(--color-text) }
/* ===== SESSION QR LINKS ===== */
.session-qr-links .detail-value { display: flex; gap: var(--space-3); flex-wrap: wrap }
.session-qr-link {
display: inline-flex; align-items: center; gap: var(--space-1);
font-size: var(--text-sm); color: var(--color-primary); font-weight: 500;
padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm);
transition: background var(--transition-fast)
}
.session-qr-link:hover { background: var(--color-primary-bg); text-decoration: underline }
/* ===== PRESENCE TOGGLE ===== */
.btn-toggle-present {
display: inline-flex; align-items: center; gap: var(--space-1);
padding: var(--space-1) var(--space-3); font-size: var(--text-xs); font-weight: 600;
border-radius: var(--radius-full); border: 1px solid transparent; cursor: pointer;
transition: all 0.2s var(--ease)
}
.btn-toggle-present.present-yes { background: var(--color-success-bg); color: var(--color-success); border-color: var(--color-success) }
.btn-toggle-present.present-no { background: var(--color-surface-2); color: var(--color-text-muted); border-color: var(--color-border) }
.btn-toggle-present:hover { opacity: .85; transform: scale(1.02) }
.btn-toggle-present:disabled { opacity: .5; cursor: not-allowed; transform: none }
/* ===== ATTESTATION SIGNATURES ===== */
.attestation-signatures { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap }
/* ===== RATING BARS (Satisfaction) ===== */
.rating-bars { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-2) 0 }
.rating-row { display: flex; align-items: center; gap: var(--space-3) }
.rating-label { font-size: var(--text-sm); font-weight: 500; color: var(--color-text); min-width: 120px; flex-shrink: 0 }
.rating-bar {
flex: 1; height: 12px; background: var(--color-surface-2);
border-radius: var(--radius-full); overflow: hidden; position: relative;
border: 1px solid var(--color-divider)
}
[data-theme="dark"] .rating-bar { border-color: var(--color-divider) }
.rating-bar-fill {
height: 100%;
background: linear-gradient(90deg, #0D7377, #14B8A6);
border-radius: var(--radius-full);
transition: width 0.6s var(--ease)
}
[data-theme="dark"] .rating-bar-fill {
background: linear-gradient(90deg, #14B8A6, #2DD4BF)
}
.rating-value { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); min-width: 48px; text-align: right; font-variant-numeric: tabular-nums }
/* ===== COMMENT CARDS (Satisfaction) ===== */
.comments-section { display: flex; flex-direction: column; gap: var(--space-3) }
.comment-card {
background: var(--color-surface);
border: 1px solid var(--color-divider);
border-radius: var(--radius-md); padding: var(--space-4)
}
.comment-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); gap: var(--space-3) }
.comment-card-text { font-size: var(--text-sm); color: var(--color-text); line-height: 1.6; margin: 0 }
/* ===== CHART ROW (70/30) ===== */
.chart-grid { display: grid; grid-template-columns: 7fr 3fr; gap: 16px; margin-bottom: 16px }
.chart-row { display: grid; grid-template-columns: 7fr 3fr; gap: 16px; margin-bottom: 16px }
.chart-row-3 { display: grid; grid-template-columns: 5fr 2.5fr 2.5fr; gap: 16px; margin-bottom: 16px; align-items: stretch }
.chart-row-3 > * { display: flex; flex-direction: column }
.chart-row-3 .chart-container, .chart-row-3 .highlight-card { flex: 1 }
.chart-col-bar { min-width: 0 }
.chart-col-donut { min-width: 0 }
.chart-col-bar .chart-container,
.chart-col-donut .chart-container { height: 100%; display: flex; flex-direction: column }
.chart-col-bar .chart-container svg,
.chart-col-bar .chart-container .bar-chart-svg-wrap { margin-top: auto; margin-bottom: auto }
.chart-main { min-width: 0 }
.chart-side { min-width: 0 }
.chart-main .chart-container,
.chart-side .chart-container { height: 100%; display: flex; flex-direction: column }
.chart-main .chart-container svg,
.chart-side .chart-container svg { flex: 1; min-height: 0 }
/* ===== BOTTOM GRID (40/35/25) ===== */
.bottom-grid { display: grid; grid-template-columns: 4fr 3.5fr 2.5fr; gap: 16px; margin-bottom: 16px; align-items: stretch }
.bottom-grid > * { min-height: 0; max-height: 340px }
.bottom-grid .chart-container { max-height: 340px; display: flex; flex-direction: column }
.bottom-grid .chart-container > :last-child { flex: 1; min-height: 0; overflow: hidden }
.bottom-grid .highlight-card { height: 100%; max-height: 340px }
.chart-container {
background: #fff; border-radius: 16px; padding: 18px 20px;
box-shadow: var(--shadow-card);
transition: box-shadow 0.2s, transform 0.2s;
overflow: hidden;
}
.chart-container:hover {
box-shadow: var(--shadow-hover);
transform: translateY(-3px)
}
[data-theme="dark"] .chart-container {
background: var(--color-surface);
box-shadow: var(--shadow-sm)
}
[data-theme="dark"] .chart-container:hover {
box-shadow: var(--shadow-hover);
transform: translateY(-3px)
}
.chart-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px }
.chart-title { font-family: var(--font-display); font-size: 14px; font-weight: 600; color: #0A1628; margin: 0 }
[data-theme="dark"] .chart-title { color: var(--color-text) }
.chart-filter { font-size: 13px; color: #9CA3AF; cursor: pointer; display: flex; align-items: center; gap: 4px }
/* ===== BAR CHART — H-care style ===== */
.bar-chart svg { display: block; margin: 0 auto }
.bar-chart-body { position: relative }
.bar-chart-svg-wrap { width: 100% }
.bar-chart-legend {
display: flex; gap: 20px; justify-content: center; margin-top: 8px
}
.bar-legend-item {
display: flex; align-items: center; gap: 6px; font-size: 12px; color: #5A6578
}
.bar-legend-dot {
width: 8px; height: 8px; border-radius: 50%; display: inline-block
}
/* Bar animation */
.bar-animate { transition: none }
/* Donut segment animation */
.donut-segment-animate {
transition: stroke-dasharray 0.8s cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Filter dropdown */
.chart-filter-dropdown { position: relative }
.chart-filter-menu {
display: none; position: absolute; top: 100%; right: 0; margin-top: 4px;
background: #fff; border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,0.12);
padding: 4px; z-index: 20; min-width: 140px
}
.chart-filter-menu.open { display: block }
[data-theme="dark"] .chart-filter-menu { background: var(--color-surface); box-shadow: 0 4px 16px rgba(0,0,0,0.4) }
.chart-filter-option {
display: block; width: 100%; padding: 8px 14px; border: none; background: none;
font-size: 13px; color: #5A6578; cursor: pointer; border-radius: 8px;
text-align: left; font-family: var(--font-body)
}
.chart-filter-option:hover { background: #F5F3EF }
.chart-filter-option.active { color: #0D7377; font-weight: 600 }
[data-theme="dark"] .chart-filter-option:hover { background: var(--color-surface-2) }
[data-theme="dark"] .chart-filter-option.active { color: var(--color-primary) }
/* ===== ENTREPRISES CARD — premium clean list ===== */
.ent-list { display: flex; flex-direction: column; gap: 0 }
.ent-row {
display: flex; align-items: center; gap: 12px;
padding: 12px 0;
border-bottom: 1px solid #F0EFEB;
transition: background 0.15s
}
.ent-row:last-child { border-bottom: none }
.ent-row:hover { background: #FAFAF8; margin: 0 -20px; padding-left: 20px; padding-right: 20px }
[data-theme="dark"] .ent-row { border-bottom-color: var(--color-border) }
[data-theme="dark"] .ent-row:hover { background: var(--color-surface-2) }
.ent-rank {
width: 20px; font-size: 12px; font-weight: 600; color: #9CA3AF;
text-align: center; flex-shrink: 0
}
.ent-avatar {
width: 36px; height: 36px; border-radius: 10px;
background: linear-gradient(135deg, #E8F4F5 0%, #D0EBEC 100%);
display: flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 700; color: #0D7377;
flex-shrink: 0; font-family: var(--font-display)
}
[data-theme="dark"] .ent-avatar { background: rgba(20, 184, 166, 0.12); color: #4FD1C5 }
.ent-info { flex: 1; min-width: 0 }
.ent-name {
font-size: 13px; font-weight: 600; color: #0A1628;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis
}
[data-theme="dark"] .ent-name { color: var(--color-text) }
.ent-meta { font-size: 11px; color: #9CA3AF; margin-top: 2px }
.ent-value { flex-shrink: 0; text-align: right }
.ent-count { font-size: 14px; font-weight: 700; color: #0D7377 }
.ent-count-label { font-size: 11px; font-weight: 400; color: #9CA3AF }
.ent-date { font-size: 12px; color: #5A6578; font-variant-numeric: tabular-nums }
[data-theme="dark"] .ent-date { color: var(--color-text-muted) }
/* ===== LINE CHART HOVER TOOLTIPS ===== */
.lc-hover-group .lc-vline,
.lc-hover-group .lc-hover-dot,
.lc-hover-group .lc-badge,
.lc-hover-group .lc-badge-text { opacity: 0; transition: opacity 0.15s ease }
.lc-hover-group:hover .lc-vline,
.lc-hover-group:hover .lc-hover-dot,
.lc-hover-group:hover .lc-badge,
.lc-hover-group:hover .lc-badge-text { opacity: 1 }
.lc-hover-group:hover ~ .lc-dot { opacity: 0.3 }
.lc-hit { cursor: pointer }
/* ===== LINE CHART DRAW ANIMATION ===== */
.lc-draw {
stroke-dasharray: 1;
stroke-dashoffset: 1;
animation: lcDraw 1.6s cubic-bezier(0.65, 0, 0.35, 1) 0.2s forwards;
filter: drop-shadow(0 1px 2px rgba(13, 115, 119, 0.15));
}
@keyframes lcDraw {
to { stroke-dashoffset: 0 }
}
.lc-area-animate {
opacity: 0;
animation: lcAreaFade 1.4s ease-out 0.6s forwards;
}
@keyframes lcAreaFade {
to { opacity: 1 }
}
.lc-dot-animate {
opacity: 0;
transform-origin: center;
transform-box: fill-box;
animation: lcDotPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes lcDotPop {
0% { opacity: 0; transform: scale(0) }
60% { opacity: 1; transform: scale(1.4) }
100% { opacity: 1; transform: scale(1) }
}
@media (prefers-reduced-motion: reduce) {
.lc-draw, .lc-area-animate, .lc-dot-animate { animation: none; opacity: 1; stroke-dashoffset: 0 }
}
/* ===== DONUT CHART ===== */
.donut-chart {
display: flex; flex-direction: column; align-items: center;
justify-content: center; padding: 24px 20px
}
.donut-chart .chart-title { align-self: flex-start; width: 100%; margin-bottom: 16px }
.donut-chart svg { margin-bottom: 0; flex-shrink: 0 }
.donut-legend {
display: flex; flex-direction: column; gap: 10px; width: 100%;
margin-top: 20px; padding-top: 16px; border-top: 1px solid #E8E6E1
}
[data-theme="dark"] .donut-legend { border-top-color: var(--color-border) }
.donut-legend-item { display: flex; align-items: center; gap: 10px; font-size: 13px }
.donut-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0 }
.donut-legend-label { flex: 1; color: #5A6578 }
[data-theme="dark"] .donut-legend-label { color: var(--color-text-muted) }
.donut-legend-value { font-weight: 600; color: #0A1628; font-variant-numeric: tabular-nums }
[data-theme="dark"] .donut-legend-value { color: var(--color-text) }
/* ===== HIGHLIGHT CARD (teal gradient) ===== */
/* Highlight card — premium dual-tone teal with light effects */
.highlight-card {
background: linear-gradient(150deg, #11898D 0%, #0A5C5F 45%, #073F42 100%);
border-radius: 16px; padding: 24px 24px 16px; color: #fff;
display: flex; flex-direction: column;
box-shadow: var(--shadow-card);
min-height: 100%;
position: relative; overflow: hidden;
transition: box-shadow 0.2s, transform 0.2s
}
/* Top-left glow */
.highlight-card::before {
content: ''; position: absolute; top: -40%; left: -25%;
width: 80%; height: 90%; border-radius: 50%;
background: radial-gradient(ellipse, rgba(255,255,255,0.10) 0%, transparent 65%);
pointer-events: none
}
/* Bottom-right subtle glow */
.highlight-card::after {
content: ''; position: absolute; bottom: -20%; right: -15%;
width: 50%; height: 60%; border-radius: 50%;
background: radial-gradient(ellipse, rgba(74,222,128,0.06) 0%, transparent 70%);
pointer-events: none
}
.highlight-card:hover {
box-shadow: 0 8px 32px rgba(13, 115, 119, 0.4);
transform: translateY(-2px)
}
.highlight-top { position: relative; z-index: 1; flex-shrink: 0 }
.highlight-value {
font-family: var(--font-display); font-size: 38px; font-weight: 700;
color: #FFFFFF; line-height: 1
}
.highlight-suffix { font-size: 22px; font-weight: 400; opacity: 0.6 }
.highlight-label { font-size: 14px; color: rgba(255,255,255,0.6); margin-top: 4px }
.highlight-sub { font-size: 13px; color: rgba(255,255,255,0.4); margin-top: 4px }
.highlight-score { font-weight: 700; color: #4ADE80; font-size: 14px }
/* Sparkline takes all remaining space */
.highlight-sparkline {
flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
position: relative; z-index: 1;
margin: 0 -24px -16px; padding: 0
}
.highlight-sparkline svg {
width: 100%; height: 100%; min-height: 120px; display: block
}
/* Sparkline animated line drawing */
.hl-line {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: hlDraw 1.8s cubic-bezier(0.4, 0, 0.2, 1) forwards 0.3s
}
@keyframes hlDraw { to { stroke-dashoffset: 0 } }
/* Sparkline hover tooltips */
.hl-hover-group .hl-vline,
.hl-hover-group .hl-hover-dot,
.hl-hover-group .hl-badge,
.hl-hover-group .hl-badge-text { opacity: 0; transition: opacity 0.18s ease }
.hl-hover-group:hover .hl-vline,
.hl-hover-group:hover .hl-hover-dot,
.hl-hover-group:hover .hl-badge,
.hl-hover-group:hover .hl-badge-text { opacity: 1 }
.hl-hit { cursor: pointer }
/* X labels pinned at bottom inside the card */
.highlight-sparkline-label {
display: flex; justify-content: space-between;
font-size: 11px; color: rgba(255,255,255,0.25);
padding: 6px 24px 14px;
position: relative; z-index: 1
}
.highlight-sparkline-label .active { color: #FFFFFF; font-weight: 700 }
/* ===== UPCOMING SESSIONS ===== */
.upcoming-list { display: flex; flex-direction: column; gap: var(--space-1) }
.upcoming-item {
display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
transition: background 0.2s var(--ease); text-decoration: none; color: inherit
}
.upcoming-item:hover { background: var(--color-primary-bg) }
.upcoming-item-main { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0 }
.upcoming-item-title { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.upcoming-item-meta { font-size: var(--text-xs); color: var(--color-text-muted) }
/* ===== ACTIVITY FEED ===== */
.activity-feed .card-header { margin-bottom: var(--space-2) }
.activity-list { display: flex; flex-direction: column; gap: var(--space-1) }
.activity-item {
display: flex; align-items: center; gap: var(--space-3);
padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
transition: background 0.2s var(--ease)
}
.activity-item:hover { background: var(--color-surface-2) }
.activity-icon { font-size: var(--text-base); flex-shrink: 0; width: 24px; text-align: center }
.activity-label { flex: 1; font-size: var(--text-sm); color: var(--color-text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.activity-date { font-size: var(--text-xs); color: var(--color-text-muted); flex-shrink: 0; font-variant-numeric: tabular-nums }
.activity-icon-circle {
width: 32px; height: 32px; border-radius: var(--radius-md);
display: flex; align-items: center; justify-content: center; flex-shrink: 0
}
/* ===== ACCUEIL PAGE ===== */
.accueil-page { position: relative; overflow: hidden; padding-bottom: 0 }
.accueil-page::before {
content: ''; display: none
}
[data-theme="dark"] .accueil-page::before {
display: none
}
@keyframes accueil-mesh-drift {
0% { transform: none }
100% { transform: none }
}
/* ===== GLOBAL DASHBOARD ANIMATIONS ===== */
/* Staggered Entrance — works on any page */
@keyframes dash-exit-out {
from { opacity: 1; transform: translateY(0) scale(1) }
to { opacity: 0; transform: translateY(-10px) scale(0.99) }
}
#dashboard-app.dash-exiting {
animation: dash-exit-out 0.18s cubic-bezier(0.4, 0, 1, 1) forwards;
pointer-events: none;
}
@keyframes dash-fade-up {
from { opacity: 0; transform: translateY(16px) }
to { opacity: 1; transform: translateY(0) }
}
@keyframes dash-fade-in {
from { opacity: 0 }
to { opacity: 1 }
}
@keyframes dash-scale-in {
from { opacity: 0; transform: scale(0.95) }
to { opacity: 1; transform: scale(1) }
}
@keyframes dash-slide-right {
from { opacity: 0; transform: translateX(-12px) }
to { opacity: 1; transform: translateX(0) }
}
@keyframes dash-count-pulse {
0% { transform: scale(1) }
50% { transform: scale(1.08) }
100% { transform: scale(1) }
}
@keyframes dash-bar-grow {
from { transform: scaleY(0) }
to { transform: scaleY(1) }
}
@keyframes dash-donut-draw {
from { stroke-dasharray: 0 999 }
}
@keyframes dash-progress-fill {
from { width: 0 }
}
/* Page-level entrance */
#dashboard-app.dash-entering .page-header {
opacity: 0;
animation: dash-slide-right 0.4s cubic-bezier(0.16,1,0.3,1) forwards;
}
/* KPI cards — staggered pop */
#dashboard-app.dash-entering .kpi-card {
opacity: 0;
animation: dash-scale-in 0.4s cubic-bezier(0.16,1,0.3,1) forwards;
}
#dashboard-app.dash-entering .kpi-card:nth-child(1) { animation-delay: 80ms }
#dashboard-app.dash-entering .kpi-card:nth-child(2) { animation-delay: 140ms }
#dashboard-app.dash-entering .kpi-card:nth-child(3) { animation-delay: 200ms }
#dashboard-app.dash-entering .kpi-card:nth-child(4) { animation-delay: 260ms }
/* KPI value counter pulse */
#dashboard-app.dash-entering .kpi-value {
animation: dash-count-pulse 0.5s cubic-bezier(0.16,1,0.3,1) 0.4s;
}
/* Chart containers — fade up staggered */
#dashboard-app.dash-entering .chart-container,
#dashboard-app.dash-entering .highlight-card {
opacity: 0;
animation: dash-fade-up 0.5s cubic-bezier(0.16,1,0.3,1) forwards;
animation-delay: 300ms;
}
#dashboard-app.dash-entering .chart-row-3 > :nth-child(1) .chart-container,
#dashboard-app.dash-entering .chart-row-3 > :nth-child(1) .highlight-card { animation-delay: 280ms }
#dashboard-app.dash-entering .chart-row-3 > :nth-child(2) .chart-container,
#dashboard-app.dash-entering .chart-row-3 > :nth-child(2) .highlight-card { animation-delay: 360ms }
#dashboard-app.dash-entering .chart-row-3 > :nth-child(3) .chart-container,
#dashboard-app.dash-entering .chart-row-3 > :nth-child(3) .highlight-card { animation-delay: 440ms }
/* SVG bar chart bars — grow from bottom */
#dashboard-app.dash-entering .chart-container rect[rx="4"] {
transform-origin: bottom;
animation: dash-bar-grow 0.6s cubic-bezier(0.16,1,0.3,1) forwards;
animation-delay: 500ms;
}
/* SVG donut stroke — draw animation */
#dashboard-app.dash-entering .donut-chart circle[stroke="#0D7377"],
#dashboard-app.dash-entering .donut-chart circle[stroke="#11898D"] {
animation: dash-donut-draw 1s cubic-bezier(0.16,1,0.3,1) forwards;
animation-delay: 500ms;
}
/* Cards — generic fade up */
#dashboard-app.dash-entering .card {
opacity: 0;
animation: dash-fade-up 0.4s cubic-bezier(0.16,1,0.3,1) forwards;
animation-delay: 350ms;
}
/* Stagger multiple cards */
#dashboard-app.dash-entering .card:nth-of-type(1) { animation-delay: 300ms }
#dashboard-app.dash-entering .card:nth-of-type(2) { animation-delay: 380ms }
#dashboard-app.dash-entering .card:nth-of-type(3) { animation-delay: 460ms }
#dashboard-app.dash-entering .card:nth-of-type(4) { animation-delay: 540ms }
/* Grid items (profile, agenda, docs bottom row) */
#dashboard-app.dash-entering > div:last-child > .card:nth-child(1) { animation-delay: 500ms }
#dashboard-app.dash-entering > div:last-child > .card:nth-child(2) { animation-delay: 560ms }
#dashboard-app.dash-entering > div:last-child > .card:nth-child(3) { animation-delay: 620ms }
/* Progress bars fill animation */
#dashboard-app.dash-entering div[style*="background:#0D7377"][style*="border-radius:3px"],
#dashboard-app.dash-entering div[style*="background:#11898D"][style*="border-radius:3px"],
#dashboard-app.dash-entering div[style*="background:linear-gradient(135deg,#0D7377"] {
animation: dash-progress-fill 0.8s cubic-bezier(0.16,1,0.3,1) forwards;
animation-delay: 400ms;
}
/* Drive folders grid */
#dashboard-app.dash-entering .drive-folder {
opacity: 0;
animation: dash-scale-in 0.35s cubic-bezier(0.16,1,0.3,1) forwards;
}
#dashboard-app.dash-entering .drive-folder:nth-child(1) { animation-delay: 100ms }
#dashboard-app.dash-entering .drive-folder:nth-child(2) { animation-delay: 160ms }
#dashboard-app.dash-entering .drive-folder:nth-child(3) { animation-delay: 220ms }
#dashboard-app.dash-entering .drive-folder:nth-child(4) { animation-delay: 280ms }
#dashboard-app.dash-entering .drive-folder:nth-child(5) { animation-delay: 340ms }
#dashboard-app.dash-entering .drive-folder:nth-child(6) { animation-delay: 400ms }
/* Drive files slide in */
#dashboard-app.dash-entering .drive-file {
opacity: 0;
animation: dash-slide-right 0.35s cubic-bezier(0.16,1,0.3,1) forwards;
animation-delay: calc(var(--file-index, 0) * 40ms + 200ms);
}
#dashboard-app.dash-entering .drive-file:nth-child(1) { animation-delay: 200ms }
#dashboard-app.dash-entering .drive-file:nth-child(2) { animation-delay: 240ms }
#dashboard-app.dash-entering .drive-file:nth-child(3) { animation-delay: 280ms }
#dashboard-app.dash-entering .drive-file:nth-child(4) { animation-delay: 320ms }
#dashboard-app.dash-entering .drive-file:nth-child(5) { animation-delay: 360ms }
/* Received docs cards */
#dashboard-app.dash-entering .drive-received-card {
opacity: 0;
animation: dash-fade-up 0.35s cubic-bezier(0.16,1,0.3,1) forwards;
}
#dashboard-app.dash-entering .drive-received-card:nth-child(1) { animation-delay: 100ms }
#dashboard-app.dash-entering .drive-received-card:nth-child(2) { animation-delay: 160ms }
#dashboard-app.dash-entering .drive-received-card:nth-child(3) { animation-delay: 220ms }
#dashboard-app.dash-entering .drive-received-card:nth-child(4) { animation-delay: 280ms }
/* Formateur marketplace cards */
#dashboard-app.dash-entering .fmp-card {
opacity: 0;
animation: dash-scale-in 0.4s cubic-bezier(0.16,1,0.3,1) forwards;
}
#dashboard-app.dash-entering .fmp-card:nth-child(1) { animation-delay: 150ms }
#dashboard-app.dash-entering .fmp-card:nth-child(2) { animation-delay: 220ms }
#dashboard-app.dash-entering .fmp-card:nth-child(3) { animation-delay: 290ms }
#dashboard-app.dash-entering .fmp-card:nth-child(4) { animation-delay: 360ms }
#dashboard-app.dash-entering .fmp-card:nth-child(5) { animation-delay: 430ms }
#dashboard-app.dash-entering .fmp-card:nth-child(6) { animation-delay: 500ms }
/* Table rows slide in */
#dashboard-app.dash-entering tbody tr {
opacity: 0;
animation: dash-fade-up 0.3s cubic-bezier(0.16,1,0.3,1) forwards;
}
#dashboard-app.dash-entering tbody tr:nth-child(1) { animation-delay: 200ms }
#dashboard-app.dash-entering tbody tr:nth-child(2) { animation-delay: 240ms }
#dashboard-app.dash-entering tbody tr:nth-child(3) { animation-delay: 280ms }
#dashboard-app.dash-entering tbody tr:nth-child(4) { animation-delay: 320ms }
#dashboard-app.dash-entering tbody tr:nth-child(5) { animation-delay: 360ms }
#dashboard-app.dash-entering tbody tr:nth-child(6) { animation-delay: 400ms }
#dashboard-app.dash-entering tbody tr:nth-child(7) { animation-delay: 440ms }
#dashboard-app.dash-entering tbody tr:nth-child(8) { animation-delay: 480ms }
#dashboard-app.dash-entering tbody tr:nth-child(n+9) { animation-delay: 500ms }
/* Pending request items */
#dashboard-app.dash-entering [data-pending-id] {
opacity: 0;
animation: dash-slide-right 0.35s cubic-bezier(0.16,1,0.3,1) forwards;
animation-delay: 150ms;
}
/* Page transitions — smooth content swap */
#dashboard-app {
animation: dash-fade-in 0.2s ease;
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
#dashboard-app.dash-entering .page-header,
#dashboard-app.dash-entering .kpi-card,
#dashboard-app.dash-entering .chart-container,
#dashboard-app.dash-entering .highlight-card,
#dashboard-app .card,
#dashboard-app .drive-folder,
#dashboard-app .drive-file,
#dashboard-app .drive-received-card,
#dashboard-app .fmp-card,
#dashboard-app tbody tr,
#dashboard-app.dash-entering [data-pending-id] {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
}
/* Legacy accueil-animate compat */
.accueil-page .accueil-animate {
opacity: 0;
animation: dash-fade-up 0.4s var(--ease) forwards;
animation-delay: calc(var(--stagger-index, 0) * 60ms + 60ms)
}
@media (prefers-reduced-motion: reduce) {
.accueil-page .accueil-animate { animation: none !important; opacity: 1 !important; transform: none !important }
}
/* Clean solid cards (accueil scope) */
.accueil-page .card,
.accueil-page .kpi-card,
.accueil-page .chart-container {
position: relative; z-index: 1;
background: #FFFFFF;
border: none;
border-radius: 16px;
box-shadow: var(--shadow-card);
transition: box-shadow 0.2s, transform 0.2s
}
[data-theme="dark"] .accueil-page .card,
[data-theme="dark"] .accueil-page .kpi-card,
[data-theme="dark"] .accueil-page .chart-container {
background: var(--color-surface);
box-shadow: var(--shadow-sm)
}
/* Welcome Header (accueil scope) */
.accueil-page .welcome-header {
position: relative; z-index: 1;
margin-bottom: var(--space-8); padding-bottom: var(--space-5);
border-bottom: 1px solid #E5E7EB
}
[data-theme="dark"] .accueil-page .welcome-header { border-bottom-color: var(--color-divider) }
.accueil-page .welcome-title {
font-family: var(--font-display);
font-size: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
font-weight: 700; line-height: 1.25; letter-spacing: -0.025em;
color: #0A1628;
background: none; -webkit-background-clip: unset; background-clip: unset;
-webkit-text-fill-color: unset
}
[data-theme="dark"] .accueil-page .welcome-title {
color: var(--color-text);
background: none; -webkit-background-clip: unset; background-clip: unset;
-webkit-text-fill-color: unset
}
.accueil-page .welcome-subtitle {
font-size: var(--text-sm); color: #5A6578; margin-top: var(--space-1)
}
[data-theme="dark"] .accueil-page .welcome-subtitle { color: var(--color-text-muted) }
.welcome-date {
font-size: var(--text-xs); color: #9CA3AF; margin-top: var(--space-2);
text-transform: capitalize; letter-spacing: 0.01em
}
/* KPI Grid (accueil) -- 4 columns H-care style */
.accueil-page .kpi-grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 20px
}
/* KPI Cards (accueil) */
.accueil-page .kpi-card {
display: flex; align-items: center; gap: 16px;
padding: 24px;
border: none;
overflow: hidden; position: relative; border-radius: 16px
}
.accueil-page .kpi-card::after {
content: ''; display: none
}
.accueil-page .kpi-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-hover)
}
[data-theme="dark"] .accueil-page .kpi-card:hover {
box-shadow: var(--shadow-md)
}
.accueil-page .kpi-label {
font-size: 13px; font-weight: 500; color: #9CA3AF;
margin-top: 4px
}
[data-theme="dark"] .accueil-page .kpi-label { color: var(--color-text-muted) }
.accueil-page .kpi-value {
font-family: var(--font-display); font-size: 28px; font-weight: 700;
color: #0A1628; font-variant-numeric: tabular-nums; line-height: 1
}
[data-theme="dark"] .accueil-page .kpi-value { color: var(--color-text) }
/* KPI Icon Circle (accueil scope) */
.accueil-page .kpi-icon-circle {
width: 42px; height: 42px; border-radius: 14px;
background: rgba(13, 115, 119, 0.10);
display: flex; align-items: center; justify-content: center; flex-shrink: 0
}
[data-theme="dark"] .accueil-page .kpi-icon-circle {
background: rgba(20, 184, 166, 0.12)
}
.accueil-page .kpi-icon-circle svg {
width: 22px; height: 22px;
}
[data-theme="dark"] .accueil-page .kpi-icon-circle svg {
color: #2DD4BF
}
.accueil-page .kpi-card:hover .kpi-icon-circle {
transform: scale(1.05)
}
/* Chart Grid (accueil) -- 7fr/3fr H-care layout */
.accueil-page .chart-grid { grid-template-columns: 7fr 3fr; gap: 14px; margin-bottom: 14px }
.accueil-page .chart-container { padding: 20px 24px }
.accueil-page .chart-container.donut-chart { padding: 24px 20px }
.accueil-page .chart-container:hover {
box-shadow: var(--shadow-hover)
}
[data-theme="dark"] .accueil-page .chart-container:hover {
box-shadow: var(--shadow-md)
}
.accueil-page .chart-title {
font-family: var(--font-display); font-size: 16px; font-weight: 600;
color: #0A1628; margin: 0
}
[data-theme="dark"] .accueil-page .chart-title { color: var(--color-text) }
/* Chart animations */
.accueil-page .bar-chart rect[data-bar] {
transform-origin: center bottom; transform: scaleY(0);
transition: transform 0.6s var(--ease)
}
.accueil-page .bar-chart.chart-animated rect[data-bar] { transform: scaleY(1) }
.accueil-page .donut-chart circle[data-segment] {
transition: stroke-dashoffset 1s var(--ease)
}
/* Bottom Grid (accueil) -- H-care style */
.accueil-bottom-grid {
display: grid; grid-template-columns: 4fr 3.5fr 2.5fr; gap: 20px
}
.accueil-page .accueil-bottom-grid .card { padding: 16px 20px }
.accueil-page .accueil-bottom-grid .card-title {
font-family: var(--font-display); font-size: 16px; font-weight: 600;
color: #0A1628
}
[data-theme="dark"] .accueil-page .accueil-bottom-grid .card-title { color: var(--color-text) }
/* Upcoming Sessions (accueil) */
.accueil-page .upcoming-item {
border-left: 3px solid transparent;
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease
}
.accueil-page .upcoming-item:hover {
background: var(--color-primary-bg); border-left-color: var(--color-primary); transform: translateX(4px)
}
/* Activity Feed (accueil) */
.accueil-page .activity-item {
transition: background 0.2s ease, transform 0.2s ease
}
.accueil-page .activity-item:hover {
background: var(--color-surface-2); transform: translateX(2px)
}
/* ===== SESSIONS FILTER BAR ===== */
.filter-bar {
display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: var(--space-3); margin-bottom: var(--space-4); padding: var(--space-4);
background: #fff;
border: none; border-radius: 14px; box-shadow: var(--shadow-sm)
}
[data-theme="dark"] .filter-bar {
background: var(--color-surface);
border-color: var(--color-divider)
}
.filter-bar .form-group { margin-bottom: 0 }
.filter-bar label { font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); margin-bottom: var(--space-1); display: block }
.filter-bar select {
width: 100%; padding: var(--space-2) var(--space-3);
background: var(--color-surface); border: 1px solid var(--color-border);
border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--color-text)
}
/* ===== APPRENANTS MULTI-SELECT ===== */
.apprenants-multiselect {
display: flex; flex-direction: column; gap: var(--space-1); max-height: 220px; overflow-y: auto;
padding: var(--space-3); background: var(--color-surface);
border: 1px solid var(--color-border); border-radius: var(--radius-md)
}
.apprenant-checkbox {
display: flex; align-items: center; gap: var(--space-2);
padding: var(--space-2) var(--space-2); border-radius: var(--radius-sm);
cursor: pointer; font-size: var(--text-sm); transition: background var(--transition-fast)
}
.apprenant-checkbox:hover { background: var(--color-primary-bg) }
.apprenant-checkbox input[type="checkbox"] { accent-color: var(--color-primary); width: 16px; height: 16px; flex-shrink: 0 }
/* ===== ACTIONS CELL ===== */
.actions-cell { display: flex; gap: var(--space-1); align-items: center; flex-wrap: nowrap }
.actions-cell .btn-danger {
background: var(--color-error-bg); color: var(--color-error);
border: 1px solid transparent; padding: var(--space-1) var(--space-3);
font-size: var(--text-xs); font-weight: 600; border-radius: var(--radius-md);
cursor: pointer; transition: all var(--transition-fast)
}
.actions-cell .btn-danger:hover { background: var(--color-error); color: #fff }
/* ===== QR IMAGE WRAPPER ===== */
.qr-image-wrapper {
display: flex; align-items: center; justify-content: center;
padding: var(--space-4)
}
/* ===== RESPONSIVE ===== */
@media (max-width: 1100px) {
.kpi-grid { grid-template-columns: repeat(2, 1fr) }
.accueil-page .kpi-grid { grid-template-columns: repeat(2, 1fr) }
.chart-row { grid-template-columns: 1fr }
.chart-grid { grid-template-columns: 1fr }
.bottom-grid { grid-template-columns: 1fr 1fr }
.accueil-bottom-grid { grid-template-columns: 1fr 1fr }
.quick-access-grid { grid-template-columns: repeat(3, 1fr) }
}
/* ===== TABLET (max 1024px) ===== */
@media (max-width: 1024px) {
.sf-layout { grid-template-columns: 1fr }
.sf-side { padding-top: 0 }
.sf-side-card { max-height: 300px }
.kpi-grid { grid-template-columns: repeat(2, 1fr) }
.accueil-page .kpi-grid { grid-template-columns: repeat(2, 1fr) }
.chart-row-3 { grid-template-columns: 1fr 1fr }
.gcal-months { grid-template-columns: 1fr }
.bottom-grid { grid-template-columns: 1fr 1fr }
.sessions-toolbar { flex-wrap: wrap }
.sf-search { max-width: none; flex: 1 1 100%; order: -1 }
}
/* ===== MOBILE (max 768px) ===== */
@media (max-width: 768px) {
/* Sidebar collapses */
.dashboard-layout { display: block }
.dashboard-main { margin-left: 0 }
.dashboard-mesh { left: 0 }
#sidebar { transform: translateX(-100%); position: fixed }
#sidebar.open { transform: translateX(0) }
.sidebar-toggle { display: block }
.sidebar-close { display: block }
/* Topbar */
.dashboard-topbar { padding: 0 var(--space-3); height: 56px }
.topbar-search { flex: 1 }
.topbar-search-input { font-size: 14px }
.topbar-user-name { display: none }
.topbar-chevron { display: none }
/* Content */
#dashboard-app { padding: 20px var(--space-3) 24px !important }
/* KPIs */
.kpi-grid { grid-template-columns: 1fr 1fr }
.accueil-page .kpi-grid { grid-template-columns: 1fr 1fr }
.sf-kpi-bar { grid-template-columns: 1fr 1fr; display: grid }
/* Charts */
.chart-grid, .chart-row, .chart-row-3 { grid-template-columns: 1fr }
.accueil-page .chart-grid { grid-template-columns: 1fr }
/* Bottom grids */
.bottom-grid { grid-template-columns: 1fr }
.accueil-bottom-grid { grid-template-columns: 1fr }
.sf-bottom-row { grid-template-columns: 1fr }
/* Calendar */
.gcal-months { grid-template-columns: 1fr }
.gcal-week-grid { overflow-x: auto; -webkit-overflow-scrolling: touch; min-width: 0 }
.gcal-week-grid > * { min-width: 0 }
.sf-side { padding-top: 0 }
/* Modals & Popups */
/* modal mobile: see consolidated rule below */
.modal-overlay { padding: var(--space-2) }
.modal-body { padding: var(--space-4) }
.success-popup { max-width: 92vw; padding: 32px 20px 28px; border-radius: 20px }
.success-popup-actions { gap: 8px }
.success-popup-actions .btn-primary { min-width: 180px; font-size: 13px; padding: 11px 20px }
/* Tables — horizontal scroll */
.data-table { font-size: 13px }
.card[style*="overflow-x"] { margin: 0 calc(-1 * var(--space-3)); border-radius: 0 }
.data-table th, .data-table td { padding: 10px 12px; white-space: nowrap }
/* Toasts */
#toast-container { left: var(--space-3); right: var(--space-3); top: var(--space-3) }
.toast { min-width: auto; max-width: none; border-radius: 12px; padding: 12px 16px }
/* Page header */
.page-header { gap: var(--space-2) }
.page-title { font-size: var(--text-lg) }
/* Quick access */
.quick-access-grid { grid-template-columns: repeat(2, 1fr) }
/* Session detail */
.session-detail-grid { grid-template-columns: 1fr !important }
.session-detail-header { flex-direction: column; gap: var(--space-3) }
.session-detail-actions { width: 100% }
/* Filter bar */
.filter-bar { flex-wrap: wrap }
.filter-bar .form-group { flex: 1; min-width: 120px }
/* Toolbar */
.sessions-toolbar { gap: 8px }
.sessions-filters { flex-wrap: wrap; gap: 6px }
.sf-search { max-width: none }
/* Profil */
.profil-layout { grid-template-columns: 1fr !important }
.profil-photo-card { padding: 24px }
.profil-form-card { padding: 20px }
.profil-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch }
.profil-tab { padding: 10px 16px; font-size: 13px; white-space: nowrap }
/* Formateur dashboard grid */
[style*="grid-template-columns: 220px 1fr 1fr"] {
grid-template-columns: 1fr !important; gap: 12px !important
}
[style*="grid-template-columns:220px 1fr 1fr"] {
grid-template-columns: 1fr !important; gap: 12px !important
}
/* Bloc-notes */
.bn-layout { grid-template-columns: 1fr !important; min-height: auto }
.bn-sidebar { max-height: 240px; border-right: none; border-bottom: 1px solid var(--color-divider) }
.bn-editor-header { flex-wrap: wrap; gap: 8px }
.bn-toolbar { flex-wrap: wrap; gap: 2px }
/* Drive */
.drive-folder { min-width: 140px }
.drive-file-actions { gap: 2px }
.drive-file-btn { width: 30px; height: 30px }
/* Mes sessions cards */
.mss-cards-grid { grid-template-columns: 1fr }
.mss-filters { flex-wrap: wrap; gap: 6px }
.mss-filter-btn { flex: 1; min-width: 80px; text-align: center }
/* Search dropdown */
.search-dropdown { left: -12px; right: -12px; max-height: 60vh }
/* Documents admin */
.doc-zone { padding: 16px }
.form-row { grid-template-columns: 1fr }
/* Cards */
.card { border-radius: 14px }
.kpi-card { padding: 14px }
/* Formateurs list */
.fmp-card { min-width: unset }
.fmt-card { flex-direction: column; align-items: center; text-align: center }
}
/* ===== SMALL MOBILE (max 480px) ===== */
@media (max-width: 480px) {
.login-card { padding: var(--space-5); margin: var(--space-2) }
.login-left { display: none }
.kpi-grid { grid-template-columns: 1fr }
.accueil-page .kpi-grid { grid-template-columns: 1fr }
.sf-kpi-bar { grid-template-columns: 1fr }
.quick-access-grid { grid-template-columns: 1fr }
.gcal-wcol-body { height: 200px }
.gcal-mday { min-height: 44px; font-size: 10px }
.gcal-mday-ev { font-size: 7px; padding: 1px 2px }
.gcal-mday-name { font-size: 8px }
.gcal-month-title { font-size: 14px }
.form-row { grid-template-columns: 1fr }
.schedule-slot { flex-wrap: wrap }
.schedule-times { width: 100% }
/* modal: legacy rule disabled, see consolidated rule */
.page-header { flex-direction: column; align-items: flex-start }
.page-title { font-size: 18px }
/* Popups as bottom sheets */
.success-popup { border-radius: 20px 20px 0 0; max-width: 100%; width: 100%; padding: 28px 20px 24px }
/* Tables scroll */
.card { overflow-x: auto }
/* Buttons stack */
.success-popup-actions[style*="flex-direction:row"] { flex-direction: column !important }
.btn-primary, .btn-secondary { width: 100% }
/* Topbar compact */
.dashboard-topbar { gap: 8px }
.topbar-actions { gap: 6px }
.topbar-notif-btn { width: 36px; height: 36px }
.theme-toggle { width: 36px; height: 36px }
.topbar-avatar { width: 32px; height: 32px }
/* KPI cards compact */
.kpi-card { padding: 12px; gap: 10px }
.kpi-icon-circle { width: 36px; height: 36px }
.kpi-value { font-size: 20px }
/* Drive compact */
.drive-file { padding: 10px 12px }
.drive-file-ext { padding: 4px 8px; font-size: 8px; min-width: 34px }
.drive-folder { min-width: 120px; padding: 14px 10px }
}
/* ===== BUG REPORT BUBBLE ===== */
#bug-report-bubble {
position: fixed; bottom: 24px; right: 24px; z-index: 9990;
width: 50px; height: 50px; border-radius: 50%;
background: none; border: none; padding: 0;
display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1)
}
#bug-report-bubble img {
width: 50px; height: 50px; border-radius: 50%; object-fit: cover;
box-shadow: 0 4px 16px rgba(0,0,0,0.15);
transition: box-shadow 0.25s, transform 0.25s
}
#bug-report-bubble::after {
content: ""; position: absolute; inset: 2px; border-radius: 50%;
background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.4) 0%, transparent 50%);
pointer-events: none; transition: opacity 0.25s
}
#bug-report-bubble:hover img {
transform: scale(1.08);
box-shadow: 0 6px 24px rgba(0,0,0,0.2)
}
#bug-report-bubble:hover::after { opacity: 0.8 }
#bug-report-bubble.active img {
transform: scale(0.94);
box-shadow: 0 2px 8px rgba(0,0,0,0.1)
}
/* Panel */
#bug-report-panel {
position: fixed; bottom: 86px; right: 24px; z-index: 9991;
width: 340px; background: #fff; border-radius: 18px;
border: 1px solid #E8E6E1;
box-shadow: 0 20px 60px rgba(0,0,0,0.1);
opacity: 0; transform: translateY(10px) scale(0.96);
pointer-events: none; transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
overflow: hidden
}
#bug-report-panel.open {
opacity: 1; transform: translateY(0) scale(1); pointer-events: auto
}
[data-theme="dark"] #bug-report-panel {
background: var(--color-surface); border-color: var(--color-border);
box-shadow: 0 20px 60px rgba(0,0,0,0.3)
}
.bug-panel-header {
display: flex; align-items: center; justify-content: space-between;
padding: 18px 18px 14px; border-bottom: 1px solid #F0EFEB
}
[data-theme="dark"] .bug-panel-header { border-color: var(--color-border) }
.bug-panel-title {
display: flex; align-items: center; gap: 10px;
font-family: var(--font-display); font-size: 15px; font-weight: 700;
color: var(--color-text)
}
.bug-title-icon {
width: 32px; height: 32px; border-radius: 50%; overflow: hidden; flex-shrink: 0
}
.bug-title-icon img { width: 100%; height: 100%; object-fit: cover }
.bug-panel-close {
width: 28px; height: 28px; border: none; background: none;
border-radius: 8px; display: flex; align-items: center; justify-content: center;
cursor: pointer; color: var(--color-text-faint); transition: all 0.15s
}
.bug-panel-close:hover { background: var(--color-surface-2); color: var(--color-text) }
.bug-panel-body { padding: 14px 18px 18px }
.bug-label {
display: block; font-size: 11px; font-weight: 600; color: var(--color-text-faint);
text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 6px; margin-top: 12px
}
.bug-label:first-child { margin-top: 0 }
.bug-type-grid { display: flex; gap: 6px; margin-bottom: 4px }
.bug-type-btn {
flex: 1; display: flex; align-items: center; justify-content: center;
padding: 10px 8px; font-size: 12px; font-weight: 600;
border: 1.5px solid #E8E6E1; border-radius: 10px;
background: #fff; color: #9CA3AF;
cursor: pointer; transition: all 0.2s
}
[data-theme="dark"] .bug-type-btn { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text-faint) }
.bug-type-btn:hover { border-color: #14B8A6; color: #0D7377 }
.bug-type-btn.active {
background: linear-gradient(135deg, #0D7377, #14B8A6);
border-color: transparent; color: #fff;
box-shadow: 0 3px 12px rgba(13,115,119,0.2)
}
.bug-input, .bug-textarea {
width: 100%; padding: 10px 12px; border: 1.5px solid #E8E6E1;
border-radius: 10px; font-family: var(--font-body); font-size: 13px;
color: var(--color-text); background: #fff; outline: none;
transition: border-color 0.15s, box-shadow 0.15s; resize: none
}
[data-theme="dark"] .bug-input, [data-theme="dark"] .bug-textarea {
background: var(--color-bg); border-color: var(--color-border)
}
.bug-input:focus, .bug-textarea:focus {
border-color: #0D7377; box-shadow: 0 0 0 3px rgba(13,115,119,0.08)
}
.bug-textarea { margin-bottom: 14px; min-height: 80px }
.bug-submit-btn {
width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
padding: 12px; border: none; border-radius: 12px; font-size: 13px; font-weight: 600;
background: linear-gradient(135deg, #0D7377, #14B8A6); color: #fff;
cursor: pointer; box-shadow: 0 4px 14px rgba(13, 115, 119, 0.2);
transition: all 0.2s
}
.bug-submit-btn:hover {
background: linear-gradient(135deg, #0B6264, #0D9E92);
transform: translateY(-1px); box-shadow: 0 6px 20px rgba(13, 115, 119, 0.3)
}
@media (max-width: 480px) {
#bug-report-bubble { bottom: 16px; right: 16px; width: 44px; height: 44px }
#bug-report-bubble img { width: 44px; height: 44px }
#bug-report-panel { bottom: 70px; right: 12px; left: 12px; width: auto }
}
/* ===== ADMIN FEATURES (Agent 2 — adm- prefix) ===== */
/* --- Modalite toggle --- */
.adm-modalite-toggle { display: flex; gap: 8px }
.adm-mod-btn {
flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
padding: 16px; border: 2px solid var(--color-border); border-radius: 12px;
background: var(--color-surface); cursor: pointer; font-size: 14px; font-weight: 600;
color: var(--color-text-muted); transition: all 0.2s var(--ease)
}
.adm-mod-btn:hover { border-color: var(--color-primary); color: var(--color-primary) }
.adm-mod-btn.active {
border-color: var(--color-primary); background: var(--color-primary-bg);
color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary)
}
.adm-mod-btn svg { stroke: currentColor }
[data-theme="dark"] .adm-mod-btn { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text-muted) }
[data-theme="dark"] .adm-mod-btn.active { border-color: #4FD1C5; color: #4FD1C5; background: rgba(79,209,197,0.1) }
/* --- Schedule day (AM/PM) --- */
.adm-schedule-day {
background: var(--color-surface-2); border: 1px solid var(--color-divider);
border-radius: 10px; padding: 12px; margin-bottom: 8px
}
[data-theme="dark"] .adm-schedule-day { background: var(--color-surface-2); border-color: var(--color-border) }
.adm-schedule-day-header {
display: flex; align-items: center; gap: 10px; margin-bottom: 8px
}
.adm-schedule-day-label {
font-size: 12px; font-weight: 700; color: var(--color-primary);
text-transform: uppercase; letter-spacing: 0.05em; min-width: 50px
}
.adm-schedule-day-slots { display: flex; flex-direction: column; gap: 6px }
.adm-schedule-half {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap
}
.adm-schedule-half-label {
font-size: 12px; font-weight: 600; color: var(--color-text-muted); min-width: 70px
}
@media (max-width: 480px) {
.adm-schedule-half { flex-wrap: wrap }
.adm-schedule-day-header { flex-wrap: wrap }
}
/* --- Skip checkbox + badge --- */
.adm-skip-check {
display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
font-size: 13px; color: #0D7377; font-weight: 600; cursor: pointer
}
.adm-skip-check input { accent-color: #0D7377 }
[data-theme="dark"] .adm-skip-check { color: #4FD1C5 }
.adm-skip-badge {
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 600;
background: #FEF3E0; color: #92680A
}
[data-theme="dark"] .adm-skip-badge { background: rgba(251,191,36,0.12); color: #FBBF24 }
/* --- Apprenant counter --- */
.adm-stag-counter {
font-size: 12px; font-weight: 600; color: #9CA3AF;
padding: 2px 10px; border-radius: 999px; background: var(--color-surface-2)
}
/* --- Apprenant actions --- */
.adm-stag-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap }
/* --- Inline form --- */
.adm-inline-form {
background: var(--color-surface-2); border: 1px solid var(--color-divider);
border-radius: 10px; padding: 12px; margin-top: 8px
}
[data-theme="dark"] .adm-inline-form { background: var(--color-surface-2); border-color: var(--color-border) }
/* --- Detail page 5-section cards --- */
.adm-detail-section {
margin-bottom: 16px; border-radius: 16px; overflow: hidden
}
.adm-section-header {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; margin-bottom: 16px; flex-wrap: wrap
}
.adm-section-title {
font-family: var(--font-display); font-size: 16px; font-weight: 700;
color: var(--color-primary); margin: 0
}
/* --- Session detail: Infos générales (redesigned) --- */
.adm-session-info-card { padding: 0 !important; overflow: hidden }
.adm-session-hero {
position: relative;
padding: 28px 28px 24px;
background:
radial-gradient(900px 220px at 100% 0%, rgba(94, 234, 212, 0.18), transparent 60%),
linear-gradient(135deg, #14B8A6 0%, #0D9488 50%, #0D7377 100%);
color: #fff;
display: flex; align-items: flex-start; justify-content: space-between;
gap: 18px; flex-wrap: wrap
}
.adm-session-hero::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
background: rgba(255, 255, 255, 0.08)
}
.adm-session-hero-main { flex: 1; min-width: 0 }
.adm-session-hero-badges {
display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px
}
.adm-hero-chip {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 10px; border-radius: 6px;
font-size: 11px; font-weight: 600; letter-spacing: 0;
text-transform: none;
background: rgba(255, 255, 255, 0.95);
color: #0D7377;
border: none;
line-height: 1.4;
height: 22px;
}
.adm-hero-chip::first-letter { text-transform: uppercase }
.adm-hero-chip--status { color: #0A1628 }
.adm-hero-chip--terminee { background: #D1FAE5; color: #065F46 }
.adm-hero-chip--en-cours, .adm-hero-chip--encours { background: #FEF3C7; color: #92400E }
.adm-hero-chip--annulee { background: #FEE2E2; color: #991B1B }
.adm-hero-chip--mod {
background: rgba(255, 255, 255, 0.18);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.30);
}
.adm-hero-chip--prereq-ok {
background: #D1FAE5;
color: #065F46;
}
.adm-hero-chip--prereq-warn {
background: #FFEDD5;
color: #9A3412;
}
.adm-session-hero-title {
margin: 0 0 6px; font-family: var(--font-display);
font-size: 26px; font-weight: 700; color: #fff; line-height: 1.15;
letter-spacing: -0.2px
}
.adm-session-hero-sub {
font-size: 13px; color: rgba(255, 255, 255, 0.82); font-weight: 500
}
.adm-session-hero-actions {
display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0
}
.adm-session-hero-actions .btn {
background: rgba(255, 255, 255, 0.18); color: #fff;
border: 1px solid rgba(255, 255, 255, 0.3); backdrop-filter: blur(4px)
}
.adm-session-hero-actions .btn:hover { background: rgba(255, 255, 255, 0.28) }
.adm-session-hero-actions .btn-danger {
background: rgba(239, 68, 68, 0.28); border-color: rgba(255, 180, 180, 0.5)
}
.adm-session-hero-actions .btn-danger:hover { background: rgba(239, 68, 68, 0.45) }
.adm-info-tiles {
display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 14px; padding: 22px 24px
}
.adm-info-tile {
display: flex; align-items: center; gap: 12px;
padding: 14px 16px; border-radius: 12px;
background: #F7FAFA; border: 1px solid rgba(13, 115, 119, 0.08);
transition: background 0.15s, border-color 0.15s, transform 0.15s
}
.adm-info-tile:hover {
background: #EEF7F7; border-color: rgba(13, 115, 119, 0.18);
transform: translateY(-1px)
}
.adm-info-tile-icon {
flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px;
background: linear-gradient(135deg, #0D7377, #14A098);
color: #fff; display: flex; align-items: center; justify-content: center
}
.adm-info-tile-icon svg { width: 20px; height: 20px }
.adm-info-tile-body {
display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1
}
.adm-info-tile-label {
font-size: 10px; font-weight: 700; color: #0D7377;
text-transform: uppercase; letter-spacing: 0.6px
}
.adm-info-tile-value {
font-size: 14px; font-weight: 600; color: #0A1628;
line-height: 1.3; word-break: break-word
}
.adm-info-tile-sub { font-size: 12px; font-weight: 500; color: #5A6578 }
.adm-session-notes {
margin: 0 24px 20px; padding: 14px 16px; border-radius: 12px;
background: #FFFBEB; border: 1px solid #FDE68A
}
.adm-session-notes p {
margin: 4px 0 0; font-size: 13px; color: #0A1628; line-height: 1.5
}
.adm-session-info-card .data-table,
.adm-session-info-card > div[style*="margin-top:12px;padding-top:12px"] {
margin: 0 24px 20px !important
}
.adm-session-info-card .data-table:last-child { margin-bottom: 24px !important }
[data-theme="dark"] .adm-info-tile {
background: rgba(79, 209, 197, 0.05);
border-color: rgba(79, 209, 197, 0.15)
}
[data-theme="dark"] .adm-info-tile:hover {
background: rgba(79, 209, 197, 0.1);
border-color: rgba(79, 209, 197, 0.28)
}
[data-theme="dark"] .adm-info-tile-icon {
background: linear-gradient(135deg, #4FD1C5, #2DD4BF)
}
[data-theme="dark"] .adm-info-tile-label { color: #4FD1C5 }
[data-theme="dark"] .adm-info-tile-value { color: var(--color-text) }
[data-theme="dark"] .adm-info-tile-sub { color: var(--color-text-muted) }
[data-theme="dark"] .adm-session-notes {
background: rgba(251, 191, 36, 0.08); border-color: rgba(251, 191, 36, 0.25)
}
[data-theme="dark"] .adm-session-notes p { color: var(--color-text) }
@media (max-width: 640px) {
.adm-session-hero { padding: 22px 20px 20px; flex-direction: column }
.adm-session-hero-title { font-size: 22px }
.adm-info-tiles { grid-template-columns: 1fr; padding: 16px 18px; gap: 10px }
}
/* --- Session detail: formation module details --- */
.adm-formation-detail { padding: 0 !important; overflow: hidden }
.adm-formation-header {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 16px; flex-wrap: wrap;
padding: 22px 26px 18px;
border-bottom: 1px solid rgba(13, 115, 119, 0.08);
background: linear-gradient(180deg, #F7FBFB 0%, #fff 100%)
}
[data-theme="dark"] .adm-formation-header {
background: linear-gradient(180deg, rgba(79, 209, 197, 0.04), transparent);
border-bottom-color: rgba(79, 209, 197, 0.12)
}
.adm-formation-niveau {
display: inline-block; padding: 4px 10px; border-radius: 999px;
background: rgba(13, 115, 119, 0.1); color: #0D7377;
font-size: 10px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.5px; margin-bottom: 8px
}
[data-theme="dark"] .adm-formation-niveau { background: rgba(79, 209, 197, 0.12); color: #4FD1C5 }
.adm-formation-title {
margin: 0; font-family: var(--font-display);
font-size: 20px; font-weight: 700; color: #0A1628; line-height: 1.2
}
[data-theme="dark"] .adm-formation-title { color: var(--color-text) }
.adm-formation-actions { display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0 }
.adm-formation-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
padding: 24px 26px 28px
}
.adm-formation-block {
background: #F9FCFC; border: 1px solid rgba(13, 115, 119, 0.08);
border-radius: 12px; padding: 16px 18px
}
.adm-formation-block--full { grid-column: 1 / -1 }
.adm-formation-block h4 {
margin: 0 0 10px; font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.6px; color: #0D7377;
display: flex; align-items: center; gap: 8px
}
.adm-formation-block h4::before {
content: ""; display: inline-block; width: 14px; height: 2px;
background: #0D7377; border-radius: 2px
}
.adm-formation-block p {
margin: 0; font-size: 13px; color: #0A1628; line-height: 1.55
}
.adm-formation-list {
margin: 0; padding: 0; list-style: none;
display: flex; flex-direction: column; gap: 6px
}
.adm-formation-list li {
position: relative; padding-left: 18px;
font-size: 13px; color: #0A1628; line-height: 1.5
}
.adm-formation-list li::before {
content: ""; position: absolute; left: 2px; top: 8px;
width: 6px; height: 6px; border-radius: 50%;
background: linear-gradient(135deg, #0D7377, #14A098)
}
.adm-formation-empty {
margin: 0; padding: 40px 26px; text-align: center;
color: #9CA3AF; font-size: 13px
}
[data-theme="dark"] .adm-formation-block {
background: rgba(79, 209, 197, 0.04);
border-color: rgba(79, 209, 197, 0.12)
}
[data-theme="dark"] .adm-formation-block h4 { color: #4FD1C5 }
[data-theme="dark"] .adm-formation-block h4::before { background: #4FD1C5 }
[data-theme="dark"] .adm-formation-block p,
[data-theme="dark"] .adm-formation-list li { color: var(--color-text) }
[data-theme="dark"] .adm-formation-list li::before {
background: linear-gradient(135deg, #4FD1C5, #2DD4BF)
}
@media (max-width: 768px) {
.adm-formation-grid { grid-template-columns: 1fr; padding: 18px; gap: 12px }
.adm-formation-header { padding: 18px 18px 14px }
.adm-formation-title { font-size: 17px }
}
/* === Multi-module accordion === */
.adm-module-accordions {
display: flex;
flex-direction: column;
gap: 0;
}
.adm-module-accordion {
border-top: 1px solid var(--color-divider, #E8E6E1);
}
.adm-module-accordion:first-child {
border-top: none;
}
.adm-module-accordion-head {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 24px;
background: transparent;
border: none;
cursor: pointer;
font-family: inherit;
text-align: left;
transition: background 0.15s;
}
.adm-module-accordion-head:hover {
background: rgba(13, 115, 119, 0.03);
}
[data-theme="dark"] .adm-module-accordion-head:hover {
background: rgba(79, 209, 197, 0.04);
}
.adm-module-accordion-left {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
min-width: 0;
}
.adm-module-accordion-title {
font-family: var(--font-display);
font-size: 15px;
font-weight: 600;
color: #0A1628;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
[data-theme="dark"] .adm-module-accordion-title {
color: var(--color-text);
}
.adm-module-accordion-chevron {
color: #9CA3AF;
transition: transform 0.2s ease;
flex-shrink: 0;
}
.adm-module-accordion.is-open .adm-module-accordion-chevron {
transform: rotate(180deg);
color: #0D7377;
}
[data-theme="dark"] .adm-module-accordion.is-open .adm-module-accordion-chevron {
color: #4FD1C5;
}
.adm-module-accordion-body {
display: none;
padding: 0 0 8px;
border-top: 1px solid rgba(13, 115, 119, 0.08);
}
[data-theme="dark"] .adm-module-accordion-body {
border-top-color: rgba(79, 209, 197, 0.08);
}
.adm-module-accordion.is-open .adm-module-accordion-body {
display: block;
animation: adm-module-slide-down 0.25s ease;
}
@keyframes adm-module-slide-down {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.adm-module-accordion .adm-formation-grid {
padding: 20px 24px 24px;
}
/* --- Emargement blocks --- */
.adm-emargement-block {
border: 1px solid var(--color-divider); border-radius: 10px;
padding: 12px; margin-bottom: 12px; transition: opacity 0.2s
}
.adm-emargement-locked { opacity: 0.6; background: var(--color-surface-2) }
.adm-emargement-header {
display: flex; align-items: center; justify-content: space-between;
gap: 8px; margin-bottom: 8px; flex-wrap: wrap
}
.adm-emargement-title {
font-size: 13px; font-weight: 700; color: var(--color-text)
}
.adm-emargement-actions { display: flex; gap: 8px; margin-bottom: 8px }
/* --- Checklist (section 5) --- */
.adm-checklist { display: flex; flex-direction: column; gap: 8px }
.adm-check-item {
display: flex; align-items: center; gap: 10px; padding: 8px 12px;
border-radius: 8px; font-size: 13px; font-weight: 500
}
.adm-check-done { background: var(--color-success-bg); color: var(--color-success) }
.adm-check-pending { background: var(--color-surface-2); color: var(--color-text-muted) }
.adm-check-icon { font-size: 16px; font-weight: 700; width: 20px; text-align: center }
[data-theme="dark"] .adm-check-done { background: rgba(22,163,74,0.12); color: #4ADE80 }
[data-theme="dark"] .adm-check-pending { background: var(--color-surface-2); color: var(--color-text-muted) }
/* --- Calendar level colors (month view) — Niveau 1/2/3 ----- */
.adm-ev-lvl0 { background: rgba(156, 163, 175, 0.14) !important; color: #6B7280 !important }
.adm-ev-lvl1 { background: rgba(79, 209, 197, 0.18) !important; color: #0A5C5F !important }
.adm-ev-lvl2 { background: rgba(13, 115, 119, 0.18) !important; color: #0D7377 !important }
.adm-ev-lvl3 { background: rgba(10, 92, 95, 0.22) !important; color: #074549 !important }
[data-theme="dark"] .adm-ev-lvl1 { background: rgba(79, 209, 197, 0.18) !important; color: #4FD1C5 !important }
[data-theme="dark"] .adm-ev-lvl2 { background: rgba(45, 212, 191, 0.22) !important; color: #2DD4BF !important }
[data-theme="dark"] .adm-ev-lvl3 { background: rgba(20, 184, 166, 0.28) !important; color: #14B8A6 !important }
[data-theme="dark"] .adm-ev-lvl0 { background: rgba(156, 163, 175, 0.14) !important; color: #9CA3AF !important }
/* --- Calendar level colors (week view) — Niveau 1/2/3 ----- */
.adm-wev-lvl0 { background: rgba(156, 163, 175, 0.12) !important; color: #6B7280 !important; border-left-color: #9CA3AF !important }
.adm-wev-lvl1 { background: rgba(79, 209, 197, 0.16) !important; color: #0A5C5F !important; border-left-color: #14A098 !important }
.adm-wev-lvl2 { background: rgba(13, 115, 119, 0.18) !important; color: #074549 !important; border-left-color: #0D7377 !important }
.adm-wev-lvl3 { background: rgba(10, 92, 95, 0.22) !important; color: #053234 !important; border-left-color: #0A5C5F !important }
.adm-wev-mod {
font-size: 8px; font-weight: 700; padding: 1px 4px; border-radius: 4px;
background: rgba(255,255,255,0.5); color: inherit; margin-top: 1px; align-self: flex-start
}
[data-theme="dark"] .adm-wev-lvl1 { background: rgba(79, 209, 197, 0.16) !important; color: #4FD1C5 !important }
[data-theme="dark"] .adm-wev-lvl2 { background: rgba(45, 212, 191, 0.22) !important; color: #2DD4BF !important }
[data-theme="dark"] .adm-wev-lvl3 { background: rgba(20, 184, 166, 0.28) !important; color: #14B8A6 !important }
[data-theme="dark"] .adm-wev-mod { background: rgba(0,0,0,0.3) }
/* --- Google Meet auto badge --- */
.adm-meet-badge {
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 600;
background: rgba(66,133,244,0.1); color: #4285F4
}
.adm-meet-badge svg { stroke: #4285F4; width: 14px; height: 14px }
[data-theme="dark"] .adm-meet-badge { background: rgba(66,133,244,0.15); color: #8AB4F8 }
[data-theme="dark"] .adm-meet-badge svg { stroke: #8AB4F8 }
/* --- New session button (prominent) --- */
.adm-new-session-btn {
font-size: 14px !important; padding: 10px 20px !important;
border-radius: 10px !important; font-weight: 700 !important;
box-shadow: 0 4px 14px rgba(13,115,119,0.2) !important
}
.adm-new-session-btn:hover {
transform: translateY(-1px) !important;
box-shadow: 0 6px 20px rgba(13,115,119,0.3) !important
}
/* --- Admin responsive (768px) --- */
@media (max-width: 768px) {
.adm-detail-section { border-radius: 14px }
.adm-section-header { flex-direction: column; align-items: flex-start; gap: 8px }
.adm-section-header > div { width: 100% }
.adm-section-header > div[style*="flex"] { flex-wrap: wrap }
.adm-emargement-block { padding: 10px }
.adm-emargement-header { flex-direction: column; align-items: flex-start }
.adm-emargement-actions { width: 100%; flex-wrap: wrap }
.adm-emargement-actions .btn { flex: 1; min-width: 0; text-align: center }
.adm-detail-section .data-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch }
.adm-detail-section table { min-width: 400px }
.adm-checklist { gap: 6px }
.adm-check-item { padding: 6px 10px; font-size: 12px }
.adm-modalite-toggle { gap: 6px }
.adm-mod-btn { padding: 12px 8px; font-size: 13px }
.adm-new-session-btn { font-size: 13px !important; padding: 8px 14px !important }
.adm-schedule-day { padding: 10px }
.adm-stag-actions { flex-direction: column }
.adm-stag-actions .btn { width: 100%; text-align: center }
.adm-inline-form { padding: 10px }
.stepper-nav { gap: 8px; flex-wrap: wrap }
.stepper-nav .btn { flex: 1; min-width: 120px; text-align: center }
}
/* --- Admin responsive (480px) --- */
@media (max-width: 480px) {
.adm-modalite-toggle { flex-direction: column }
.adm-mod-btn { flex-direction: row; padding: 10px 14px; gap: 8px }
.adm-mod-btn svg { width: 18px; height: 18px }
.adm-section-title { font-size: 14px }
.adm-detail-section { margin-bottom: 12px }
.adm-emargement-block { margin-bottom: 10px }
.adm-emargement-title { font-size: 12px }
.adm-schedule-day-header { flex-direction: column; align-items: flex-start; gap: 6px }
.adm-schedule-day-header .schedule-date { width: 100% }
.adm-schedule-half { gap: 4px }
.adm-schedule-half .schedule-time { min-width: 0; flex: 1 }
.adm-skip-check { font-size: 12px }
.adm-new-session-btn { width: 100% !important; justify-content: center }
}
/* ===== FORMATEUR FEATURES (Agent 3 — fmt- prefix) ===== */
/* --- Collapsible sections --- */
.fmt-section {
background: #fff; border: 1px solid #F0EFEB; border-radius: 16px;
margin-bottom: 16px; overflow: hidden;
box-shadow: 0 1px 4px rgba(0,0,0,0.04)
}
[data-theme="dark"] .fmt-section { background: var(--color-surface); border-color: var(--color-border) }
.fmt-section-header {
display: flex; align-items: center; justify-content: space-between;
padding: 18px 24px; cursor: pointer; user-select: none;
transition: background 0.12s
}
.fmt-section-header:hover { background: rgba(13,115,119,0.03) }
.fmt-section-header-left { display: flex; align-items: center; gap: 12px }
.fmt-section-icon {
width: 36px; height: 36px; border-radius: 10px;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
background: linear-gradient(135deg, #E8F4F5, #D0EBEC)
}
.fmt-section-icon svg { stroke: #0D7377; width: 18px; height: 18px }
[data-theme="dark"] .fmt-section-icon { background: rgba(79,209,197,0.1) }
[data-theme="dark"] .fmt-section-icon svg { stroke: #4FD1C5 }
.fmt-section-title {
font-family: var(--font-display); font-size: 15px; font-weight: 700;
color: #0A1628; margin: 0
}
[data-theme="dark"] .fmt-section-title { color: var(--color-text) }
.fmt-section-subtitle { font-size: 12px; color: #9CA3AF; margin-top: 2px }
.fmt-section-chevron {
transition: transform 0.25s ease; color: #9CA3AF; flex-shrink: 0
}
.fmt-section-header.fmt-open .fmt-section-chevron { transform: rotate(180deg) }
.fmt-section-body { padding: 0 24px 24px; display: none }
.fmt-section-header.fmt-open + .fmt-section-body { display: block }
/* --- Modalité badges --- */
.fmt-badge-modalite {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600;
letter-spacing: 0.02em
}
.fmt-badge-presentiel { background: rgba(13,115,119,0.1); color: #0D7377 }
.fmt-badge-distanciel { background: rgba(124,58,237,0.1); color: #7C3AED }
.fmt-badge-hybride { background: rgba(245,158,11,0.1); color: #D97706 }
[data-theme="dark"] .fmt-badge-presentiel { background: rgba(79,209,197,0.12); color: #4FD1C5 }
[data-theme="dark"] .fmt-badge-distanciel { background: rgba(167,139,250,0.15); color: #A78BFA }
[data-theme="dark"] .fmt-badge-hybride { background: rgba(251,191,36,0.12); color: #FBBf24 }
/* --- Status badges --- */
.fmt-badge-status {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600
}
.fmt-badge-planifiee { background: rgba(59,130,246,0.1); color: #3B82F6 }
.fmt-badge-en-cours { background: rgba(245,158,11,0.1); color: #F59E0B }
.fmt-badge-terminee { background: rgba(16,185,129,0.1); color: #10B981 }
.fmt-badge-annulee { background: #FDE8E8; color: #9B1C1C; border: 1px solid #F8D0D0 }
/* --- Planning table --- */
.fmt-planning-table {
width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 12px
}
.fmt-planning-table th {
text-align: left; padding: 10px 14px; font-size: 11px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.04em; color: #9CA3AF;
border-bottom: 1px solid #F0EFEB; background: #FAFAF8
}
[data-theme="dark"] .fmt-planning-table th { background: var(--color-surface-2); border-color: var(--color-border); color: var(--color-text-muted) }
.fmt-planning-table td {
padding: 10px 14px; border-bottom: 1px solid #F0EFEB; color: #0A1628
}
[data-theme="dark"] .fmt-planning-table td { border-color: var(--color-border); color: var(--color-text) }
.fmt-planning-table tr:last-child td { border-bottom: none }
.fmt-planning-day { font-weight: 600 }
.fmt-planning-time { color: #5A6578; font-size: 12px }
/* --- Apprenants table --- */
.fmt-stag-table {
width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 12px
}
.fmt-stag-table th {
text-align: left; padding: 10px 14px; font-size: 11px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.04em; color: #9CA3AF;
border-bottom: 1px solid #F0EFEB; background: #FAFAF8
}
[data-theme="dark"] .fmt-stag-table th { background: var(--color-surface-2); border-color: var(--color-border); color: var(--color-text-muted) }
.fmt-stag-table td {
padding: 8px 14px; border-bottom: 1px solid #F0EFEB; color: #0A1628
}
[data-theme="dark"] .fmt-stag-table td { border-color: var(--color-border); color: var(--color-text) }
.fmt-stag-table tr:last-child td { border-bottom: none }
.fmt-stag-avatar {
width: 28px; height: 28px; border-radius: 50%;
background: linear-gradient(135deg, #E8F4F5, #D0EBEC);
display: inline-flex; align-items: center; justify-content: center;
font-size: 10px; font-weight: 700; color: #0D7377; flex-shrink: 0
}
/* --- Info grid --- */
.fmt-info-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 14px; margin-top: 14px
}
.fmt-info-item {}
.fmt-info-label {
font-size: 11px; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.04em; color: #9CA3AF; margin-bottom: 4px
}
.fmt-info-value { font-size: 14px; font-weight: 500; color: #0A1628 }
[data-theme="dark"] .fmt-info-value { color: var(--color-text) }
/* --- Formateur Session Step 1 — redesigned --- */
.fmt-s1-kpis {
display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap
}
.fmt-s1-kpi {
flex: 1; min-width: 120px; display: flex; align-items: center; gap: 12px;
background: rgba(13,115,119,0.04); border: 1px solid rgba(13,115,119,0.15);
border-radius: 14px; padding: 14px 16px;
transition: box-shadow 0.2s, border-color 0.2s
}
.fmt-s1-kpi:hover { border-color: #0D7377; box-shadow: 0 2px 12px rgba(13,115,119,0.1) }
[data-theme="dark"] .fmt-s1-kpi { background: var(--color-surface-2); border-color: var(--color-border) }
.fmt-s1-kpi-icon {
width: 40px; height: 40px; border-radius: 12px; display: flex;
align-items: center; justify-content: center;
background: #0D7377; flex-shrink: 0
}
.fmt-s1-kpi-icon svg { stroke: #fff }
[data-theme="dark"] .fmt-s1-kpi-icon { background: #38B2AC }
[data-theme="dark"] .fmt-s1-kpi-icon svg { stroke: #fff }
.fmt-s1-kpi-info { display: flex; flex-direction: column }
.fmt-s1-kpi-val { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: #0D7377; line-height: 1.1 }
.fmt-s1-kpi-label { font-size: 11px; color: #0A5C5F; font-weight: 600; margin-top: 2px }
[data-theme="dark"] .fmt-s1-kpi-val { color: #4FD1C5 }
[data-theme="dark"] .fmt-s1-kpi-label { color: #5EEAD4 }
.fmt-s1-details {
background: rgba(13,115,119,0.03); border: 1px solid rgba(13,115,119,0.08);
border-radius: 12px; padding: 14px 18px;
margin-bottom: 16px; display: flex; flex-direction: column; gap: 10px
}
[data-theme="dark"] .fmt-s1-details { background: var(--color-surface-2) }
.fmt-s1-detail-row {
display: flex; align-items: center; gap: 10px; font-size: 13px
}
.fmt-s1-detail-row svg { flex-shrink: 0 }
.fmt-s1-detail-label {
font-weight: 600; color: #0D7377; min-width: 80px
}
[data-theme="dark"] .fmt-s1-detail-label { color: #4FD1C5 }
.fmt-s1-detail-val { color: var(--color-text); font-weight: 500 }
.fmt-s1-section-title {
display: flex; align-items: center; gap: 8px; margin: 20px 0 10px;
font-size: 13px; font-weight: 700; color: #0D7377;
padding-bottom: 8px; border-bottom: 2px solid rgba(13,115,119,0.15)
}
[data-theme="dark"] .fmt-s1-section-title { color: #4FD1C5; border-bottom-color: rgba(79,209,197,0.2) }
.fmt-s1-section-title svg { flex-shrink: 0 }
.fmt-s1-table-wrap {
background: var(--color-surface); border: 1px solid rgba(13,115,119,0.1);
border-radius: 10px; overflow: hidden; margin-bottom: 4px
}
[data-theme="dark"] .fmt-s1-table-wrap { background: var(--color-surface); border-color: var(--color-border) }
.fmt-s1-table-wrap .fmt-planning-table,
.fmt-s1-table-wrap .fmt-stag-table { margin: 0; border: none; border-radius: 0 }
@media (max-width: 480px) {
.fmt-s1-kpis { flex-direction: column }
.fmt-s1-kpi { min-width: 0 }
.fmt-s1-detail-row { flex-wrap: wrap }
.fmt-s1-detail-label { min-width: 70px }
}
/* --- Visio link card --- */
.fmt-visio-card {
display: flex; align-items: center; gap: 12px;
padding: 14px 18px; border-radius: 12px;
background: rgba(13,115,119,0.06); border: 1px solid rgba(13,115,119,0.15);
margin-top: 14px
}
.fmt-visio-card a { color: #0D7377; font-size: 13px; font-weight: 600; word-break: break-all }
/* --- Sending animation --- */
@keyframes fmt-send-fly {
0% { transform: translate(0, 0) scale(1); opacity: 1 }
50% { transform: translate(8px, -8px) scale(1.15); opacity: 0.8 }
100% { transform: translate(0, 0) scale(1); opacity: 1 }
}
.fmt-sending-spin { animation: fmt-send-fly 1s ease-in-out infinite }
.fmt-skip-btn {
background: linear-gradient(135deg, #14B8A6, #0D7377) !important;
border: none !important; color: #fff !important;
font-weight: 700 !important; padding: 10px 22px !important;
border-radius: 10px !important; font-size: 13px !important;
box-shadow: 0 4px 14px rgba(13,115,119,0.25) !important;
cursor: pointer; transition: all 0.2s !important
}
.fmt-skip-btn:hover {
background: linear-gradient(135deg, #0A5C5F, #084547) !important;
transform: translateY(-1px) !important;
box-shadow: 0 6px 20px rgba(13,115,119,0.35) !important
}
[data-theme="dark"] .fmt-visio-card { background: rgba(79,209,197,0.08); border-color: rgba(79,209,197,0.15) }
[data-theme="dark"] .fmt-visio-card a { color: #4FD1C5 }
/* --- Émargement enhanced --- */
.fmt-emarg-banner {
display: flex; align-items: center; gap: 10px;
padding: 14px 18px; border-radius: 12px; margin-bottom: 16px;
background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(16,185,129,0.04));
border: 1px solid rgba(16,185,129,0.15)
}
.fmt-emarg-banner svg { stroke: #10B981; flex-shrink: 0 }
.fmt-emarg-banner span { font-size: 13px; font-weight: 600; color: #10B981 }
.fmt-emarg-jour-title {
font-size: 14px; font-weight: 700; color: #0A1628; margin: 0 0 4px;
display: flex; align-items: center; gap: 8px
}
[data-theme="dark"] .fmt-emarg-jour-title { color: var(--color-text) }
/* --- QR fullscreen modal --- */
.fmt-qr-modal {
position: fixed; inset: 0; z-index: 10001;
background: rgba(0,0,0,0.85); display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 24px;
opacity: 0; transition: opacity 0.3s
}
.fmt-qr-modal.fmt-open { opacity: 1 }
.fmt-qr-modal-content {
background: #fff; border-radius: 24px; padding: 40px;
display: flex; flex-direction: column; align-items: center; gap: 20px;
max-width: 420px; width: 90%
}
.fmt-qr-modal-content img, .fmt-qr-modal-content svg { max-width: 280px; height: auto }
.fmt-qr-modal-title {
font-family: var(--font-display); font-size: 18px; font-weight: 700;
color: #0A1628; text-align: center
}
.fmt-qr-modal-sub { font-size: 13px; color: #5A6578; text-align: center }
.fmt-qr-modal-close {
position: absolute; top: 20px; right: 20px;
background: rgba(255,255,255,0.15); border: none; border-radius: 50%;
width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
cursor: pointer; color: #fff; transition: background 0.15s
}
.fmt-qr-modal-close:hover { background: rgba(255,255,255,0.25) }
/* --- Clôture section --- */
.fmt-checklist {
list-style: none; padding: 0; margin: 0 0 16px
}
.fmt-checklist li {
display: flex; align-items: center; gap: 10px;
padding: 10px 0; border-bottom: 1px solid #F0EFEB;
font-size: 13px; color: #0A1628
}
[data-theme="dark"] .fmt-checklist li { border-color: var(--color-border); color: var(--color-text) }
.fmt-checklist li:last-child { border-bottom: none }
.fmt-check-ok { color: #10B981 }
.fmt-check-ko { color: #DC2626 }
.fmt-closed-banner {
display: flex; align-items: center; gap: 12px;
padding: 18px 24px; border-radius: 14px;
background: linear-gradient(135deg, rgba(13,115,119,0.06), rgba(13,115,119,0.02));
border: 1px solid rgba(13,115,119,0.12)
}
/* --- Signature canvas --- */
.fmt-sig-wrap {
border: 2px dashed #ccc; border-radius: 12px; overflow: hidden;
background: #FAFAF8; touch-action: none; margin: 12px 0
}
[data-theme="dark"] .fmt-sig-wrap { border-color: var(--color-border); background: var(--color-surface-2) }
.fmt-sig-canvas { display: block; width: 100%; height: 125px; cursor: crosshair }
/* --- Satisfaction bars --- */
.fmt-sat-bar-row {
display: flex; align-items: center; gap: 12px; margin-bottom: 12px
}
.fmt-sat-bar-label {
font-size: 13px; color: #5A6578; min-width: 140px; font-weight: 500
}
.fmt-sat-bar-track {
flex: 1; height: 10px; background: #E8E6E1; border-radius: 5px; overflow: hidden
}
[data-theme="dark"] .fmt-sat-bar-track { background: var(--color-surface-2) }
.fmt-sat-bar-fill {
height: 100%; border-radius: 5px; transition: width 0.6s ease;
background: linear-gradient(135deg, #14B8A6, #0D9488)
}
.fmt-sat-bar-value {
font-size: 14px; font-weight: 700; color: #0D7377; min-width: 45px; text-align: right
}
[data-theme="dark"] .fmt-sat-bar-value { color: #4FD1C5 }
/* --- Session filter dropdown --- */
.fmt-session-filter {
padding: 8px 14px; border: 1px solid #E8E6E1; border-radius: 10px;
font-size: 13px; color: #0A1628; background: #fff;
outline: none; cursor: pointer; min-width: 200px
}
.fmt-session-filter:focus { border-color: #0D7377; box-shadow: 0 0 0 3px rgba(13,115,119,0.08) }
[data-theme="dark"] .fmt-session-filter { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text) }
/* --- Mini calendar --- */
.fmt-mini-cal {
background: #fff; border: 1px solid #F0EFEB; border-radius: 16px;
padding: 20px; margin-bottom: 16px;
box-shadow: 0 1px 4px rgba(0,0,0,0.04)
}
[data-theme="dark"] .fmt-mini-cal { background: var(--color-surface); border-color: var(--color-border) }
.fmt-mini-cal-header {
display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px
}
.fmt-mini-cal-title {
font-family: var(--font-display); font-size: 14px; font-weight: 700; color: #0A1628
}
[data-theme="dark"] .fmt-mini-cal-title { color: var(--color-text) }
.fmt-mini-cal-nav {
display: flex; gap: 4px
}
.fmt-mini-cal-nav button {
width: 30px; height: 30px; border-radius: 8px; border: 1px solid #E8E6E1;
background: #fff; cursor: pointer; display: flex; align-items: center;
justify-content: center; color: #5A6578; transition: all 0.12s
}
.fmt-mini-cal-nav button:hover { background: #F0EFEB; color: #0A1628 }
[data-theme="dark"] .fmt-mini-cal-nav button { background: var(--color-surface-2); border-color: var(--color-border); color: var(--color-text-muted) }
.fmt-mini-cal-grid {
display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center
}
.fmt-mini-cal-dow {
font-size: 10px; font-weight: 600; text-transform: uppercase;
color: #9CA3AF; padding: 4px 0
}
.fmt-mini-cal-day {
font-size: 12px; padding: 6px 2px; border-radius: 8px;
color: #5A6578; position: relative
}
.fmt-mini-cal-day.fmt-today { font-weight: 700; color: #0A1628 }
[data-theme="dark"] .fmt-mini-cal-day.fmt-today { color: var(--color-text) }
.fmt-mini-cal-day.fmt-has-session {
background: rgba(13,115,119,0.1); color: #0D7377; font-weight: 700; cursor: pointer
}
.fmt-mini-cal-day.fmt-has-session:hover { background: rgba(13,115,119,0.2) }
[data-theme="dark"] .fmt-mini-cal-day.fmt-has-session { background: rgba(79,209,197,0.12); color: #4FD1C5 }
.fmt-mini-cal-day.fmt-other-month { color: #D0D5DD }
/* --- Questionnaire section --- */
.fmt-quest-sent {
display: flex; align-items: center; gap: 8px;
padding: 10px 16px; border-radius: 10px;
background: rgba(16,185,129,0.06); border: 1px solid rgba(16,185,129,0.12);
font-size: 13px; color: #10B981; font-weight: 500; margin-bottom: 12px
}
.fmt-quest-counter {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 14px; border-radius: 20px;
background: rgba(13,115,119,0.06); font-size: 13px; font-weight: 600; color: #0D7377
}
.fmt-quest-alert {
display: flex; align-items: center; gap: 10px;
padding: 12px 18px; border-radius: 12px;
background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.15);
font-size: 13px; color: #D97706; margin-bottom: 12px
}
/* --- Read-only overlay --- */
.fmt-readonly { pointer-events: none; opacity: 0.6; filter: grayscale(0.3) }
.fmt-readonly .btn { display: none }
/* --- Dark mode: status badges --- */
[data-theme="dark"] .fmt-badge-planifiee { background: rgba(59,130,246,0.18); color: #60A5FA }
[data-theme="dark"] .fmt-badge-en-cours { background: rgba(245,158,11,0.18); color: #FBBF24 }
[data-theme="dark"] .fmt-badge-terminee { background: rgba(16,185,129,0.18); color: #34D399 }
[data-theme="dark"] .fmt-badge-annulee { background: rgba(248,113,113,0.12); color: #F87171; border-color: rgba(248,113,113,0.15) }
/* --- Dark mode: planning / stag tables --- */
[data-theme="dark"] .fmt-planning-time { color: var(--color-text-muted) }
[data-theme="dark"] .fmt-planning-day { color: var(--color-text) }
[data-theme="dark"] .fmt-stag-avatar { background: rgba(79,209,197,0.1); color: #4FD1C5 }
/* --- Dark mode: section bits --- */
[data-theme="dark"] .fmt-section-subtitle { color: var(--color-text-faint) }
[data-theme="dark"] .fmt-section-header:hover { background: rgba(79,209,197,0.04) }
/* --- Dark mode: emargement banner --- */
[data-theme="dark"] .fmt-emarg-banner { background: rgba(16,185,129,0.1); border-color: rgba(16,185,129,0.2) }
[data-theme="dark"] .fmt-emarg-banner span { color: #34D399 }
[data-theme="dark"] .fmt-emarg-banner svg { stroke: #34D399 }
[data-theme="dark"] .fmt-emarg-jour-title { color: var(--color-text) }
/* --- Dark mode: QR modal --- */
[data-theme="dark"] .fmt-qr-modal-content { background: var(--color-surface) }
[data-theme="dark"] .fmt-qr-modal-title { color: var(--color-text) }
[data-theme="dark"] .fmt-qr-modal-sub { color: var(--color-text-muted) }
/* --- Dark mode: clôture --- */
[data-theme="dark"] .fmt-closed-banner { background: rgba(79,209,197,0.06); border-color: rgba(79,209,197,0.12) }
[data-theme="dark"] .fmt-checklist li { color: var(--color-text); border-color: var(--color-border) }
[data-theme="dark"] .fmt-check-ok { color: #34D399 }
[data-theme="dark"] .fmt-check-ko { color: #F87171 }
/* --- Dark mode: quest badges --- */
[data-theme="dark"] .fmt-quest-sent { background: rgba(16,185,129,0.1); border-color: rgba(16,185,129,0.2); color: #34D399 }
[data-theme="dark"] .fmt-quest-counter { background: rgba(79,209,197,0.1); color: #4FD1C5 }
[data-theme="dark"] .fmt-quest-alert { background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.18); color: #FBBF24 }
/* --- Dark mode: mini calendar --- */
[data-theme="dark"] .fmt-mini-cal-day { color: var(--color-text-muted) }
[data-theme="dark"] .fmt-mini-cal-day.fmt-other-month { color: var(--color-text-faint) }
[data-theme="dark"] .fmt-mini-cal-nav button:hover { background: var(--color-surface-offset); color: var(--color-text) }
/* --- Dark mode: info items --- */
[data-theme="dark"] .fmt-info-label { color: var(--color-text-faint) }
/* --- Responsive --- */
@media (max-width: 768px) {
.fmt-section { border-radius: 14px; margin-bottom: 12px }
.fmt-section-header { padding: 14px 18px }
.fmt-section-body { padding: 0 18px 18px }
.fmt-section-header-left { gap: 8px }
.fmt-section-icon { width: 32px; height: 32px }
.fmt-section-title { font-size: 14px }
.fmt-info-grid { grid-template-columns: 1fr 1fr }
/* Tables — scroll wrapper */
.fmt-planning-table, .fmt-stag-table { font-size: 12px; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch }
.fmt-planning-table th, .fmt-planning-table td,
.fmt-stag-table th, .fmt-stag-table td { padding: 8px 10px; white-space: nowrap }
/* Emargement table also scrollable */
.emarg-apprenants-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch }
.emarg-slot-actions { flex-wrap: wrap }
.emarg-slot-actions .btn { flex: 1; min-width: 0; text-align: center; font-size: 12px }
/* Score bars */
.fmt-sat-bar-label { min-width: 100px; font-size: 12px }
.fmt-sat-bar-row { gap: 6px }
/* Signature canvas */
.fmt-sig-canvas { height: 100px }
/* QR modal */
.fmt-qr-modal-content { max-width: 90vw; padding: 24px 16px }
.fmt-qr-modal-content img, .fmt-qr-modal-content svg { max-width: 220px }
.fmt-qr-modal-title { font-size: 16px }
/* Emargement */
.fmt-emarg-jour-title { font-size: 13px }
.fmt-emarg-banner { padding: 8px 12px; font-size: 12px }
/* Checklist */
.fmt-checklist li { padding: 8px 10px; font-size: 13px }
/* Mini calendar */
.fmt-mini-cal { padding: 12px }
.fmt-mini-cal-day { font-size: 11px; padding: 4px 2px }
/* Session filter */
.fmt-session-filter { font-size: 12px; padding: 6px 10px; min-width: 0; width: 100% }
/* Closed banner */
.fmt-closed-banner { padding: 12px; font-size: 13px; flex-direction: column; align-items: flex-start; gap: 8px }
/* Quest badges */
.fmt-quest-sent, .fmt-quest-counter, .fmt-quest-alert { font-size: 12px; padding: 6px 10px }
/* Visio card button */
.fmt-visio-card { flex-wrap: wrap }
.fmt-visio-card .btn { width: 100%; margin-top: 8px }
}
@media (max-width: 480px) {
.fmt-info-grid { grid-template-columns: 1fr }
.fmt-visio-card { flex-direction: column; align-items: flex-start }
.fmt-section-header { padding: 12px 14px }
.fmt-section-body { padding: 0 14px 14px }
.fmt-sig-canvas { height: 80px }
.fmt-mini-cal-day { font-size: 10px; padding: 3px 1px }
.fmt-mini-cal-dow { font-size: 9px }
.fmt-mini-cal { padding: 10px }
.fmt-qr-modal-content { padding: 20px 12px }
.fmt-qr-modal-content img, .fmt-qr-modal-content svg { max-width: 180px }
.fmt-section-subtitle { display: none }
/* Sat bars: stack vertically */
.fmt-sat-bar-row { flex-direction: column; gap: 4px; align-items: flex-start }
.fmt-sat-bar-label { min-width: 0; font-size: 12px }
.fmt-sat-bar-track { width: 100% }
.fmt-sat-bar-value { min-width: 0 }
/* Session filter full width */
.fmt-session-filter { width: 100% }
/* Emargement actions stacked */
.emarg-slot-actions { flex-direction: column }
.emarg-slot-actions .btn { width: 100% }
}
/* ===== SATISFACTION PAGE — Charts & Cards ===== */
/* Donut animation */
@keyframes sat-donut-draw {
from { stroke-dasharray: 0 999 }
}
.sat-donut-anim { animation: sat-donut-draw 1s ease-out forwards }
/* Line chart draw animation — triggered by JS IntersectionObserver */
.sat-line-anim {
transition: stroke-dashoffset 1.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.sat-area-anim {
opacity: 0;
animation: sat-area-fade 1s ease-out 0.6s forwards;
}
@keyframes sat-area-fade {
from { opacity: 0 }
to { opacity: 1 }
}
.sat-dot-anim {
opacity: 0;
transition: opacity 0.4s ease-out, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
transform-origin: center; transform-box: fill-box;
transform: scale(0);
}
/* Donut chart — make it pretty with glow */
.donut-chart svg circle[data-segment] {
filter: drop-shadow(0 1px 3px rgba(0,0,0,0.1));
}
.donut-chart .donut-legend { gap: 3px }
.donut-chart .donut-legend-item { padding: 2px 0 }
.donut-chart .donut-legend-dot { width: 8px; height: 8px }
.donut-chart .donut-legend-label { font-size: 11px }
.donut-chart .donut-legend-value { font-size: 11px; font-weight: 700 }
/* Overview grid: donuts left, bars right */
.sat-overview-grid { display: flex; gap: 32px; align-items: center }
.sat-donuts-row { display: flex; gap: 16px; align-items: flex-end; flex-shrink: 0 }
.sat-donut-item { display: flex; flex-direction: column; align-items: center; gap: 6px }
.sat-donut-label { font-size: 11px; font-weight: 600; color: var(--color-text-muted) }
.sat-bars-col { flex: 1; min-width: 0 }
/* Per-session clickable row */
.sat-session-row {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 16px; border-radius: 12px; cursor: pointer;
border: 1px solid var(--color-divider); margin-bottom: 8px;
transition: all 0.2s var(--ease)
}
.sat-session-row:hover { background: rgba(13,115,119,0.03); border-color: rgba(13,115,119,0.2) }
.sat-session-row.sat-row-active { background: rgba(13,115,119,0.05); border-color: #0D7377 }
[data-theme="dark"] .sat-session-row:hover { background: rgba(79,209,197,0.05) }
[data-theme="dark"] .sat-session-row.sat-row-active { background: rgba(79,209,197,0.08); border-color: #4FD1C5 }
.sat-row-left { display: flex; align-items: center; gap: 12px; min-width: 0 }
.sat-row-score {
width: 38px; height: 38px; border-radius: 10px; display: flex;
align-items: center; justify-content: center; flex-shrink: 0;
font-size: 14px; font-weight: 800; color: #fff; font-family: var(--font-display)
}
.sat-row-info { min-width: 0 }
.sat-row-title { font-size: 14px; font-weight: 700; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.sat-row-meta { font-size: 11px; color: var(--color-text-faint); margin-top: 1px }
.sat-row-chevron {
flex-shrink: 0; color: var(--color-text-muted);
transition: transform 0.25s var(--ease)
}
.sat-row-active .sat-row-chevron { transform: rotate(180deg); color: #0D7377 }
/* Expandable detail panel */
.sat-session-expand {
max-height: 0; overflow: hidden; opacity: 0;
transition: max-height 0.35s var(--ease), opacity 0.25s, padding 0.25s;
padding: 0 16px; margin-bottom: 0
}
.sat-session-expand.sat-expand-open {
max-height: 800px; opacity: 1; padding: 16px; margin-bottom: 8px;
background: var(--color-surface); border: 1px solid var(--color-divider);
border-radius: 0 0 14px 14px; margin-top: -9px;
border-top: none
}
[data-theme="dark"] .sat-session-expand.sat-expand-open { background: var(--color-surface); border-color: var(--color-border) }
.sat-expand-charts { display: flex; gap: 24px; align-items: center; margin-bottom: 12px }
.sat-expand-donut { flex-shrink: 0 }
.sat-expand-bars { flex: 1; min-width: 0 }
/* Comments inside session card */
.sat-session-comments {
margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--color-divider)
}
.sat-comments-title {
display: flex; align-items: center; gap: 6px;
font-size: 12px; font-weight: 700; color: #0D7377; margin-bottom: 10px
}
[data-theme="dark"] .sat-comments-title { color: #4FD1C5 }
.sat-comment-card {
display: flex; gap: 10px; padding: 10px 12px;
background: var(--color-surface-2); border-radius: 10px; margin-bottom: 8px
}
[data-theme="dark"] .sat-comment-card { background: var(--color-surface-2) }
.sat-comment-avatar {
width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
background: rgba(13,115,119,0.08); display: flex; align-items: center; justify-content: center
}
[data-theme="dark"] .sat-comment-avatar { background: rgba(79,209,197,0.1) }
.sat-comment-body { flex: 1; min-width: 0 }
.sat-comment-author { font-size: 11px; font-weight: 600; color: var(--color-text-muted) }
.sat-comment-text {
font-size: 13px; color: var(--color-text); line-height: 1.5;
margin: 3px 0 0; font-style: italic
}
@media (max-width: 768px) {
.sat-overview-grid { flex-direction: column; gap: 20px }
.sat-donuts-row { flex-wrap: wrap; justify-content: center }
.sat-session-header { flex-direction: column; align-items: flex-start }
.sat-session-donut { align-self: center }
}
@media (max-width: 480px) {
.sat-donuts-row { gap: 10px }
.sat-donut-item svg { width: 70px; height: 70px }
}
/* ======================================================================
Satisfaction — template shortcut card + dedicated editor page
====================================================================== */
/* Shortcut card on /#satisfaction that links to the editor page */
.tpl-shortcut-card {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 18px !important;
margin-bottom: 14px;
border: 1px solid var(--color-divider, #E8E6E1);
border-radius: 14px;
background: linear-gradient(135deg, rgba(13, 115, 119, 0.04), rgba(13, 115, 119, 0.01));
text-decoration: none;
color: inherit;
transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease, border-color 140ms ease;
cursor: pointer;
}
.tpl-shortcut-card:hover {
transform: translateY(-1px);
border-color: rgba(13, 115, 119, 0.4);
background: linear-gradient(135deg, rgba(13, 115, 119, 0.08), rgba(13, 115, 119, 0.02));
box-shadow: 0 4px 14px rgba(13, 115, 119, 0.1);
}
[data-theme="dark"] .tpl-shortcut-card {
background: linear-gradient(135deg, rgba(79, 209, 197, 0.08), rgba(79, 209, 197, 0.02));
}
.tpl-shortcut-icon {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: 12px;
background: linear-gradient(135deg, #14B8A6, #0D7377);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(13, 115, 119, 0.25);
}
.tpl-shortcut-body { flex: 1; min-width: 0; }
.tpl-shortcut-title {
font-size: 14px;
font-weight: 600;
color: #0A1628;
margin-bottom: 2px;
}
[data-theme="dark"] .tpl-shortcut-title { color: var(--color-text); }
.tpl-shortcut-sub {
font-size: 11.5px;
color: var(--color-text-muted, #6B7280);
line-height: 1.4;
}
.tpl-shortcut-chevron {
flex-shrink: 0;
color: #0D7377;
opacity: 0.7;
transition: transform 140ms ease, opacity 140ms ease;
}
.tpl-shortcut-card:hover .tpl-shortcut-chevron { opacity: 1; transform: translateX(2px); }
/* ──────────────────────────────────────────────────────────────────
Satisfaction — "Voir tous les commentaires" full-screen modal
────────────────────────────────────────────────────────────────── */
.sat-comments-modal-panel {
width: min(760px, 94vw);
height: min(85vh, 720px);
background: var(--color-surface, #fff);
border-radius: 18px;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0 20px 60px rgba(10, 22, 40, 0.25);
}
[data-theme="dark"] .sat-comments-modal-panel { background: var(--color-surface-1); }
.sat-comments-modal-head {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 22px;
border-bottom: 1px solid var(--color-divider, #E8E6E1);
background: linear-gradient(135deg, rgba(13, 115, 119, 0.06), rgba(13, 115, 119, 0.01));
}
.sat-comments-modal-title {
font-family: var(--font-display);
font-size: 17px;
font-weight: 700;
color: #0A1628;
}
[data-theme="dark"] .sat-comments-modal-title { color: var(--color-text); }
.sat-comments-modal-sub {
font-size: 12px;
color: var(--color-text-muted, #6B7280);
margin-top: 2px;
}
.sat-comments-modal-close {
width: 34px; height: 34px;
border-radius: 10px;
border: 1px solid var(--color-divider, #E8E6E1);
background: transparent;
color: var(--color-text-muted);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.sat-comments-modal-close:hover {
background: rgba(220, 38, 38, 0.08);
color: #DC2626;
border-color: rgba(220, 38, 38, 0.3);
}
.sat-comments-modal-body {
flex: 1;
overflow-y: auto;
padding: 20px 22px;
scrollbar-width: thin;
scrollbar-color: rgba(13, 115, 119, 0.35) transparent;
}
.sat-comments-modal-body::-webkit-scrollbar { width: 10px; }
.sat-comments-modal-body::-webkit-scrollbar-track { background: transparent; }
.sat-comments-modal-body::-webkit-scrollbar-thumb {
background: rgba(13, 115, 119, 0.3);
border-radius: 8px;
border: 2px solid var(--color-surface, #fff);
}
.sat-comments-modal-body::-webkit-scrollbar-thumb:hover { background: rgba(13, 115, 119, 0.5); }
.sat-comment-row {
display: flex;
margin-bottom: 12px;
}
.sat-comment-row--left { justify-content: flex-start; }
.sat-comment-row--right { justify-content: flex-end; }
.sat-comment-bubble {
max-width: 85%;
padding: 12px 16px;
position: relative;
}
.sat-comment-bubble--teal {
background: linear-gradient(135deg, #14B8A6, #0D7377);
color: #fff;
border-radius: 4px 14px 14px 14px;
}
.sat-comment-bubble--white {
background: var(--color-surface, #fff);
border: 1px solid var(--color-divider, #E8E6E1);
border-radius: 14px 4px 14px 14px;
}
[data-theme="dark"] .sat-comment-bubble--white { background: var(--color-surface-2); }
.sat-comment-index {
font-size: 10px;
font-weight: 700;
opacity: 0.55;
margin-bottom: 4px;
letter-spacing: 0.04em;
}
.sat-comment-bubble-text {
margin: 0;
font-size: 13px;
line-height: 1.55;
font-style: italic;
}
.sat-comment-bubble--white .sat-comment-bubble-text { color: var(--color-text); }
.sat-comment-bubble-meta {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 8px;
gap: 8px;
font-size: 10px;
}
.sat-comment-bubble--teal .sat-comment-bubble-meta { color: rgba(255, 255, 255, 0.7); }
.sat-comment-bubble--white .sat-comment-bubble-meta { color: var(--color-text-faint, #9CA3AF); }
.sat-comments-modal-foot {
flex-shrink: 0;
padding: 14px 22px;
border-top: 1px solid var(--color-divider, #E8E6E1);
display: flex;
justify-content: flex-end;
background: var(--color-surface-2, #FAFAF7);
}
[data-theme="dark"] .sat-comments-modal-foot { background: var(--color-surface-2); }
/* Satisfaction comments grid (legacy — kept for backward compat) */
.sat-comments-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 10px;
max-height: 420px;
overflow-y: auto;
padding: 2px 4px 4px 0;
}
.sat-comment-card {
background: var(--color-surface, #fff);
border: 1px solid var(--color-divider, #E8E6E1);
border-radius: 12px;
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 8px;
}
[data-theme="dark"] .sat-comment-card { background: var(--color-surface-2); }
.sat-comment-card--teal {
background: linear-gradient(135deg, #14B8A6, #0D7377);
border-color: transparent;
color: #fff;
}
.sat-comment-text {
margin: 0;
font-size: 12px;
line-height: 1.5;
font-style: italic;
color: var(--color-text);
}
.sat-comment-card--teal .sat-comment-text { color: rgba(255, 255, 255, 0.96); }
.sat-comment-meta {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
font-size: 10px;
color: var(--color-text-faint, #9CA3AF);
}
.sat-comment-card--teal .sat-comment-meta { color: rgba(255, 255, 255, 0.55); }
.sat-comment-formation {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sat-comment-date { flex-shrink: 0; }
/* Dedicated editor page — /#satisfaction/template */
.tpl-editor-card {
margin-bottom: 16px;
border: 1px solid var(--color-divider, #E8E6E1);
background: var(--color-surface, #fff);
}
[data-theme="dark"] .tpl-editor-card { background: var(--color-surface-1); }
.tpl-editor-hint {
font-size: 12px;
line-height: 1.55;
color: var(--color-text-muted, #6B7280);
background: rgba(13, 115, 119, 0.05);
border-left: 3px solid #0D7377;
padding: 10px 12px;
border-radius: 0 8px 8px 0;
margin: 0 0 14px;
}
.tpl-editor-hint strong { color: #0A1628; font-weight: 600; }
[data-theme="dark"] .tpl-editor-hint strong { color: var(--color-text); }
.tpl-q-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.tpl-q-row {
display: grid;
grid-template-columns: 28px 1fr auto;
align-items: flex-start;
gap: 10px;
padding: 12px;
border: 1px solid var(--color-divider, #E8E6E1);
border-radius: 10px;
background: var(--color-surface-2, #FAFAF7);
}
[data-theme="dark"] .tpl-q-row { background: var(--color-surface-2, #1F1F23); }
.tpl-q-num {
font-size: 11px;
font-weight: 700;
color: #0D7377;
background: rgba(13, 115, 119, 0.12);
border-radius: 6px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.tpl-q-fields {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.tpl-q-text {
width: 100%;
padding: 8px 10px;
font-size: 13px;
border: 1px solid var(--color-divider, #E8E6E1);
border-radius: 8px;
background: #fff;
color: inherit;
font-family: inherit;
}
[data-theme="dark"] .tpl-q-text { background: var(--color-surface-1); }
.tpl-q-text:focus {
outline: none;
border-color: #0D7377;
box-shadow: 0 0 0 2px rgba(13, 115, 119, 0.15);
}
.tpl-q-meta {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.tpl-q-meta label {
display: flex;
flex-direction: column;
gap: 3px;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--color-text-muted, #9CA3AF);
font-weight: 600;
}
.tpl-q-meta select {
padding: 5px 8px;
font-size: 12px;
border: 1px solid var(--color-divider, #E8E6E1);
border-radius: 6px;
background: #fff;
color: inherit;
font-family: inherit;
min-width: 130px;
}
[data-theme="dark"] .tpl-q-meta select { background: var(--color-surface-1); }
.tpl-q-meta select:disabled { opacity: 0.5; cursor: not-allowed; }
.tpl-q-del {
align-self: flex-start;
padding: 6px 10px !important;
background: transparent !important;
color: #DC2626 !important;
border: 1px solid rgba(220, 38, 38, 0.3) !important;
}
.tpl-q-del:hover {
background: rgba(220, 38, 38, 0.08) !important;
border-color: #DC2626 !important;
}
.tpl-editor-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid var(--color-divider, #E8E6E1);
flex-wrap: wrap;
}
.tpl-add-row {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
@media (max-width: 640px) {
.tpl-q-row { grid-template-columns: 1fr auto; }
.tpl-q-num { grid-column: 1 / -1; width: 28px; }
.tpl-editor-actions { flex-direction: column; align-items: stretch; }
.tpl-editor-actions .btn-primary { width: 100%; }
}
/* Satisfaction loading spinner */
.sat-spinner {
width: 36px; height: 36px; border: 3px solid var(--color-surface-2);
border-top-color: #0D7377; border-radius: 50%;
animation: sat-spin 0.7s linear infinite
}
@keyframes sat-spin { to { transform: rotate(360deg) } }
[data-theme="dark"] .sat-spinner { border-color: var(--color-border); border-top-color: #4FD1C5 }
/* Teal gradient card with white donuts */
.sat-teal-card {
background: linear-gradient(135deg, #14B8A6 0%, #0D9488 40%, #0D7377 100%);
border-radius: 16px; padding: 24px; margin-bottom: 16px;
box-shadow: 0 8px 32px rgba(13,115,119,0.2);
position: relative; overflow: hidden
}
.sat-teal-card::before {
content: ""; position: absolute; top: -40px; right: -40px;
width: 160px; height: 160px; border-radius: 50%;
background: rgba(255,255,255,0.04)
}
.sat-teal-card::after {
content: ""; position: absolute; bottom: -30px; left: -30px;
width: 120px; height: 120px; border-radius: 50%;
background: rgba(255,255,255,0.03)
}
.sat-teal-grid {
display: flex; justify-content: space-around; align-items: center;
gap: 12px; flex-wrap: wrap; position: relative; z-index: 1
}
.sat-teal-donut-item {
display: flex; flex-direction: column; align-items: center; gap: 8px
}
.sat-teal-donut-item span {
font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.85);
text-transform: uppercase; letter-spacing: 0.04em
}
[data-theme="dark"] .sat-teal-card {
background: linear-gradient(135deg, #0A5C5F 0%, #084547 50%, #063335 100%)
}
@media (max-width: 480px) {
.sat-teal-grid { gap: 8px }
.sat-teal-donut-item svg { width: 65px; height: 65px }
.sat-teal-donut-item span { font-size: 10px }
}
/* Comment bubbles modal */
.sat-bubbles-list { display: flex; flex-direction: column; gap: 10px }
.sat-bubble { display: flex; max-width: 85% }
.sat-bubble-left { align-self: flex-start }
.sat-bubble-right { align-self: flex-end }
.sat-bubble-content {
padding: 12px 16px; border-radius: 16px; font-size: 13px;
color: var(--color-text); line-height: 1.5
}
.sat-bubble-left .sat-bubble-content {
background: rgba(13,115,119,0.08); border-bottom-left-radius: 4px
}
.sat-bubble-right .sat-bubble-content {
background: var(--color-surface-2); border-bottom-right-radius: 4px
}
[data-theme="dark"] .sat-bubble-left .sat-bubble-content { background: rgba(79,209,197,0.1) }
[data-theme="dark"] .sat-bubble-right .sat-bubble-content { background: var(--color-surface-2) }
/* Hide formation preview in wizard — selection shown by checkmark only */
.stepper-form-card .formation-preview { display: none !important }
/* ===== Wizard custom entreprise dropdown ===== */
.form-section--ent { position: relative; z-index: 50 }
.form-section--ent.wiz-ent-open-section { z-index: 500 }
.wiz-ent-dropdown { position: relative }
.wiz-ent-trigger {
display: flex; align-items: center; gap: 12px;
padding: 14px 18px; border: 2px solid var(--color-border, #E8E6E1);
border-radius: 14px; cursor: pointer; background: var(--color-surface, #fff);
transition: all 0.2s
}
.wiz-ent-trigger:hover { border-color: var(--color-primary, #0D7377) }
.wiz-ent-trigger.wiz-ent-open { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(13,115,119,0.08) }
.wiz-ent-trigger-icon {
width: 36px; height: 36px; border-radius: 10px;
background: linear-gradient(135deg, #0D7377, #14B8A6);
display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff
}
.wiz-ent-trigger-icon svg { stroke: #fff }
.wiz-ent-trigger-text { flex: 1; font-size: 14px; color: var(--color-text-muted, #9CA3AF); font-weight: 500 }
.wiz-ent-trigger-text.wiz-ent-selected { color: var(--color-text, #0A1628); font-weight: 600 }
.wiz-ent-trigger-chevron { color: var(--color-text-muted, #9CA3AF); transition: transform 0.2s; flex-shrink: 0 }
.wiz-ent-open .wiz-ent-trigger-chevron { transform: rotate(180deg) }
[data-theme="dark"] .wiz-ent-trigger { background: var(--color-surface); border-color: var(--color-border) }
[data-theme="dark"] .wiz-ent-trigger:hover { border-color: #4FD1C5 }
.wiz-ent-panel {
position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 100;
background: var(--color-surface, #fff); border: 1px solid var(--color-border, #E8E6E1);
border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,0.12);
overflow: hidden; animation: wizEntOpen 0.2s ease-out
}
[data-theme="dark"] .wiz-ent-panel { background: var(--color-surface); border-color: var(--color-border); box-shadow: 0 12px 40px rgba(0,0,0,0.3) }
@keyframes wizEntOpen { from { opacity:0; transform: translateY(-6px) } to { opacity:1; transform: translateY(0) } }
.wiz-ent-search-wrap {
display: flex; align-items: center; gap: 8px;
padding: 10px 14px; border-bottom: 1px solid var(--color-divider, #F0EFEB)
}
.wiz-ent-search {
flex: 1; border: none; background: none; outline: none; font-size: 13px;
color: var(--color-text, #0A1628); font-family: inherit
}
.wiz-ent-search::placeholder { color: var(--color-text-faint, #9CA3AF) }
.wiz-ent-list { max-height: 240px; overflow-y: auto; padding: 6px }
.wiz-ent-item {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px; border-radius: 10px; cursor: pointer;
transition: all 0.12s; font-size: 13px; color: var(--color-text, #0A1628)
}
.wiz-ent-item:hover { background: rgba(13,115,119,0.06) }
.wiz-ent-item.wiz-ent-active { background: linear-gradient(135deg, rgba(13,115,119,0.08), rgba(13,115,119,0.03)); font-weight: 600 }
.wiz-ent-item-icon {
width: 28px; height: 28px; border-radius: 8px;
background: var(--color-surface-2, #F0EFEB);
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
font-size: 11px; font-weight: 700; color: var(--color-primary, #0D7377)
}
.wiz-ent-item-new { color: var(--color-primary); font-weight: 600; border-top: 1px solid var(--color-divider, #F0EFEB); margin-top: 4px; padding-top: 10px }
.wiz-ent-item-new .wiz-ent-item-icon { background: linear-gradient(135deg, #0D7377, #14B8A6); color: #fff }
/* Fix dropdown clipping */
.stepper-form-card, .stepper-form-card .modal-body { overflow: visible !important }
/* =====================================================================
SESSION 2 — REFONTE DESIGN FORMATEUR DASHBOARD
Cohérence DA Origin Education : teal #0D7377, DM Sans, Inter, warm white
===================================================================== */
/* --- A1: Unified border-radius --- */
.card, .kpi-card, .stepper, .stepper-form-card, .formation-card,
.fmt-section, .emarg-slot-card, .fmt-mini-cal, .fmt-closed-banner { border-radius: var(--radius-card) !important }
/* --- A2: Unified shadows + elevation system --- */
.card { box-shadow: var(--shadow-card); transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease), border-color 0.25s var(--ease) }
.kpi-card { transition: all 0.3s var(--ease) }
.kpi-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: rgba(13,115,119,0.15) }
/* --- A3: Micro-animations cards --- */
.formation-card { transition: all 0.3s var(--ease) }
.formation-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(13,115,119,0.12); border-color: rgba(13,115,119,0.2) }
[data-theme="dark"] .formation-card:hover { box-shadow: 0 12px 32px rgba(79,209,197,0.08); border-color: rgba(79,209,197,0.15) }
/* --- A4: Fluid typography for page titles --- */
.page-title {
font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem) !important;
font-family: var(--font-display) !important;
font-weight: 700 !important;
color: var(--color-text) !important
}
/* --- A5: Global entrance animation --- */
@keyframes fadeSlideUp {
from { opacity: 0; transform: translateY(16px) }
to { opacity: 1; transform: translateY(0) }
}
.kpi-grid { animation: fadeSlideUp 0.4s var(--ease) both }
.kpi-grid .kpi-card:nth-child(1) { animation: fadeSlideUp 0.4s var(--ease) 0.05s both }
.kpi-grid .kpi-card:nth-child(2) { animation: fadeSlideUp 0.4s var(--ease) 0.1s both }
.kpi-grid .kpi-card:nth-child(3) { animation: fadeSlideUp 0.4s var(--ease) 0.15s both }
.kpi-grid .kpi-card:nth-child(4) { animation: fadeSlideUp 0.4s var(--ease) 0.2s both }
/* ── B: DASHBOARD HOME ── */
/* B1: KPI cards gradient hover + left accent */
.kpi-card { position: relative; overflow: hidden }
.kpi-card::before {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
background: linear-gradient(180deg, #0D7377, #14B8A6);
opacity: 0; transition: opacity 0.3s var(--ease)
}
.kpi-card:hover::before { opacity: 1 }
.kpi-card:hover { background: linear-gradient(135deg, var(--color-surface) 60%, rgba(13,115,119,0.03) 100%) }
[data-theme="dark"] .kpi-card:hover { background: linear-gradient(135deg, var(--color-surface) 60%, rgba(79,209,197,0.04) 100%) }
/* B3: Profile photo glow */
.profil-photo-placeholder { transition: all 0.3s var(--ease) }
.profil-photo-placeholder:hover, .card:hover .profil-photo-placeholder {
box-shadow: 0 0 0 4px rgba(13,115,119,0.15), 0 4px 16px rgba(13,115,119,0.1)
}
/* B4: Session status dots */
.sf-upcoming-item { transition: background 0.15s var(--ease) }
.sf-upcoming-item:hover { background: rgba(13,115,119,0.04) }
.sf-upcoming-date {
position: relative
}
.sf-upcoming-date::after {
content: ""; position: absolute; top: -2px; right: -2px;
width: 8px; height: 8px; border-radius: 50%;
background: #10B981; border: 2px solid var(--color-surface);
display: none
}
/* ── C: MES SESSIONS ── */
/* C1: Skeleton loader */
@keyframes skeletonPulse {
0%, 100% { opacity: 0.06 }
50% { opacity: 0.12 }
}
.skeleton-card {
background: var(--color-surface); border: 1px solid var(--color-divider);
border-radius: var(--radius-card); overflow: hidden; height: 280px
}
.skeleton-card::before {
content: ""; display: block; height: 180px;
background: linear-gradient(135deg, rgba(13,115,119,0.06), rgba(13,115,119,0.03));
animation: skeletonPulse 1.5s ease-in-out infinite
}
.skeleton-card::after {
content: ""; display: block; margin: 20px; height: 16px; width: 60%;
background: var(--color-surface-2); border-radius: 8px;
animation: skeletonPulse 1.5s ease-in-out infinite 0.2s
}
/* C2: Filter pills premium */
.mss-filter-btn {
border-radius: 999px !important; padding: 8px 18px !important;
font-weight: 600 !important; transition: all 0.25s var(--ease) !important;
border: 1.5px solid transparent !important
}
.mss-filter-btn:hover {
background: rgba(13,115,119,0.06) !important; color: #0D7377 !important;
border-color: rgba(13,115,119,0.15) !important
}
.mss-filter-btn.active {
background: linear-gradient(135deg, #0D7377, #14B8A6) !important;
color: #fff !important; border-color: transparent !important;
box-shadow: 0 2px 8px rgba(13,115,119,0.25) !important
}
[data-theme="dark"] .mss-filter-btn:hover { background: rgba(79,209,197,0.08) !important; color: #4FD1C5 !important; border-color: rgba(79,209,197,0.15) !important }
[data-theme="dark"] .mss-filter-btn.active { background: linear-gradient(135deg, #4FD1C5, #38B2AC) !important; box-shadow: 0 2px 8px rgba(79,209,197,0.2) !important }
.mss-filter-count {
background: rgba(255,255,255,0.2) !important; color: inherit !important;
border-radius: 999px !important; padding: 1px 8px !important
}
.mss-filter-btn:not(.active) .mss-filter-count { background: var(--color-surface-2) !important; color: var(--color-text-muted) !important }
/* C3: Next session banner glow */
.nxb-banner { position: relative; overflow: hidden }
.nxb-banner::before {
content: ""; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,0.15) 45%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0.15) 55%, transparent 80%);
animation: bannerShine 4s ease-in-out infinite;
z-index: 1; pointer-events: none;
}
.nxb-banner::after {
content: ""; position: absolute; top: -40%; right: -10%; width: 180px; height: 180px;
background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 65%);
animation: bannerGlow 3s ease-in-out infinite alternate;
pointer-events: none;
}
@keyframes bannerShine {
0% { left: -100% }
50% { left: 120% }
100% { left: 120% }
}
@keyframes bannerGlow {
from { transform: scale(1); opacity: 0.6 }
to { transform: scale(1.3); opacity: 1 }
}
/* C4: Empty state */
.mss-empty-illustration {
width: 120px; height: 120px; border-radius: 50%;
background: linear-gradient(135deg, rgba(13,115,119,0.08), rgba(13,115,119,0.03));
display: flex; align-items: center; justify-content: center; margin: 0 auto 20px
}
/* ── D: DETAIL SESSION ── */
/* D1: Stepper progress bar animated fill */
.stepper-line { transition: background 0.6s var(--ease) !important; height: 3px !important }
/* D2: Tables premium */
.fmt-planning-table thead, .fmt-stag-table thead, .emarg-apprenants-table thead {
background: linear-gradient(135deg, rgba(13,115,119,0.04), rgba(13,115,119,0.02)) !important
}
.fmt-planning-table tbody tr, .fmt-stag-table tbody tr {
transition: background 0.15s ease
}
.fmt-planning-table tbody tr:hover, .fmt-stag-table tbody tr:hover {
background: rgba(13,115,119,0.03)
}
[data-theme="dark"] .fmt-planning-table tbody tr:hover, [data-theme="dark"] .fmt-stag-table tbody tr:hover {
background: rgba(45,212,191,0.04)
}
.fmt-planning-table tbody tr:nth-child(even), .fmt-stag-table tbody tr:nth-child(even) {
background: rgba(13,115,119,0.015)
}
[data-theme="dark"] .fmt-planning-table tbody tr:nth-child(even), [data-theme="dark"] .fmt-stag-table tbody tr:nth-child(even) {
background: rgba(45,212,191,0.02)
}
/* D3: Emargement slot accent borders */
.emarg-slot-card { border-left: 3px solid var(--color-border) !important; transition: all 0.2s var(--ease) }
.emarg-slot-card.emarg-locked { border-left-color: #10B981 !important }
.emarg-slot-card:not(.emarg-locked):hover { border-left-color: #F59E0B }
/* D4: QR modal glassmorphism */
.fmt-qr-modal { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); background: rgba(0,0,0,0.7) !important }
/* D5: Signature canvas animated border */
.fmt-sig-wrap { transition: border-color 0.3s }
.fmt-sig-wrap:hover { border-color: #0D7377 }
@keyframes sigDash { to { stroke-dashoffset: 0 } }
/* D6: Closed session celebration */
@keyframes celebrationPop {
0% { transform: scale(0.5); opacity: 0 }
60% { transform: scale(1.1) }
100% { transform: scale(1); opacity: 1 }
}
.fmt-closed-banner { animation: celebrationPop 0.5s var(--ease) both }
/* ── E: SATISFACTION ── */
/* E1: Score bars animated fill */
.fmt-sat-bar-fill { transition: width 0.8s var(--ease) !important }
/* E2: Comments as chat bubbles */
.fmt-comment-bubble {
position: relative; background: var(--color-surface-2); border-radius: 14px 14px 14px 4px;
padding: 12px 16px; margin-left: 36px; margin-bottom: 10px
}
.fmt-comment-bubble::before {
content: ""; position: absolute; left: -8px; bottom: 8px;
width: 0; height: 0; border-style: solid;
border-width: 0 8px 8px 0; border-color: transparent var(--color-surface-2) transparent transparent
}
/* ── F: DOCUMENTS ── */
/* F1: Folder cards hover */
.drive-folder { transition: all 0.25s var(--ease) !important }
.drive-folder:hover { transform: translateY(-2px); box-shadow: var(--shadow-md) }
/* F2: Upload zone pulse on drag */
.doc-upload-zone { transition: all 0.25s var(--ease) }
.doc-upload-zone.dragover {
border-color: #0D7377 !important; background: rgba(13,115,119,0.06) !important;
transform: scale(1.01); box-shadow: 0 0 0 3px rgba(13,115,119,0.1)
}
@keyframes uploadPulse {
0%, 100% { border-color: rgba(13,115,119,0.25) }
50% { border-color: rgba(13,115,119,0.5) }
}
.doc-upload-zone:hover { animation: uploadPulse 2s ease-in-out infinite }
/* ── G: BLOC-NOTES ── */
/* G1: Session sidebar active highlight */
.bn-session-item.active {
background: linear-gradient(135deg, rgba(13,115,119,0.08), rgba(13,115,119,0.03)) !important;
border-left: 3px solid #0D7377 !important
}
/* G2: Editor warm background */
.bn-editor { background: #FAFAF8 !important; border-radius: var(--radius-card) }
[data-theme="dark"] .bn-editor { background: var(--color-surface-2) !important }
/* G3: Save indicator */
@keyframes saveFlash {
0% { opacity: 1 }
100% { opacity: 0 }
}
.bn-saved-indicator { animation: saveFlash 2s ease-out forwards }
/* ── GLOBAL POLISH ── */
/* Smooth page transitions */
.dash-entering .card, .dash-entering .kpi-card, .dash-entering .fmt-section {
animation: fadeSlideUp 0.35s var(--ease) both
}
.dash-entering .card:nth-child(1) { animation-delay: 0s }
.dash-entering .card:nth-child(2) { animation-delay: 0.06s }
.dash-entering .card:nth-child(3) { animation-delay: 0.12s }
.dash-entering .card:nth-child(4) { animation-delay: 0.18s }
/* Input focus glow */
input:focus, select:focus, textarea:focus {
border-color: #0D7377 !important;
box-shadow: 0 0 0 3px rgba(13,115,119,0.08) !important;
outline: none
}
[data-theme="dark"] input:focus, [data-theme="dark"] select:focus, [data-theme="dark"] textarea:focus {
border-color: #2DD4BF !important;
box-shadow: 0 0 0 3px rgba(45,212,191,0.1) !important
}
/* No glow on pill/icon-prefixed search inputs (unbordered) */
.sf-search-input:focus,
.sflist-search:focus,
.topbar-search-input:focus,
.topbar-search input:focus,
.ap-search-input:focus,
.bn-sidebar-search input:focus,
[data-theme="dark"] .sf-search-input:focus,
[data-theme="dark"] .sflist-search:focus,
[data-theme="dark"] .topbar-search-input:focus,
[data-theme="dark"] .topbar-search input:focus,
[data-theme="dark"] .ap-search-input:focus,
[data-theme="dark"] .bn-sidebar-search input:focus {
border: none !important;
box-shadow: none !important;
outline: none !important
}
/* Scrollbar global */
::-webkit-scrollbar { width: 6px; height: 6px }
::-webkit-scrollbar-track { background: transparent }
::-webkit-scrollbar-thumb { background: rgba(13,115,119,0.15); border-radius: 3px }
::-webkit-scrollbar-thumb:hover { background: rgba(13,115,119,0.3) }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(79,209,197,0.15) }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(79,209,197,0.3) }
/* Link hover underline animation */
.link-primary { position: relative; text-decoration: none }
.link-primary::after {
content: ""; position: absolute; bottom: -1px; left: 0; width: 0; height: 1.5px;
background: currentColor; transition: width 0.25s var(--ease)
}
.link-primary:hover::after { width: 100% }
/* Badge shimmer for "En cours" */
.badge-en-cours, .fmt-badge-en-cours {
position: relative; overflow: hidden
}
.badge-en-cours::after, .fmt-badge-en-cours::after {
content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
animation: shimmer 3s ease-in-out infinite
}
@keyframes shimmer {
0% { left: -100% }
100% { left: 200% }
}
/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important
}
}
/* ===== STEPPER (fmt-step-) ===== */
.fmt-step-container {
position: relative;
display: flex;
flex-direction: column;
gap: 0;
padding: 0;
}
.fmt-step-item {
display: flex;
gap: 0;
position: relative;
}
.fmt-step-rail {
display: flex;
flex-direction: column;
align-items: center;
flex-shrink: 0;
width: 44px;
position: relative;
}
.fmt-step-circle {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 700;
flex-shrink: 0;
z-index: 1;
transition: all var(--transition-base);
}
.fmt-step-circle-completed {
background: #0D7377;
color: #fff;
border: 2px solid #0D7377;
}
.fmt-step-circle-active {
background: #fff;
color: #0D7377;
border: 2.5px solid #0D7377;
}
.fmt-step-circle-locked {
background: #F2F0ED;
color: #9CA3AF;
border: 2px solid #D4D0CB;
}
[data-theme="dark"] .fmt-step-circle-completed { background: #0D7377; color: #fff; border-color: #0D7377 }
[data-theme="dark"] .fmt-step-circle-active { background: var(--color-surface); color: #4FD1C5; border-color: #4FD1C5 }
[data-theme="dark"] .fmt-step-circle-locked { background: var(--color-surface-2); color: var(--color-text-faint); border-color: var(--color-border) }
.fmt-step-line {
flex: 1;
width: 3px;
min-height: 20px;
margin: 4px 0;
}
.fmt-step-line-completed {
background: #0D7377;
}
.fmt-step-line-active {
background: repeating-linear-gradient(
to bottom,
#D4D0CB 0px,
#D4D0CB 5px,
transparent 5px,
transparent 10px
);
}
.fmt-step-line-locked {
background: #E8E5E0;
}
[data-theme="dark"] .fmt-step-line-completed { background: #0D7377 }
[data-theme="dark"] .fmt-step-line-active { background: repeating-linear-gradient(to bottom, var(--color-border) 0px, var(--color-border) 5px, transparent 5px, transparent 10px) }
[data-theme="dark"] .fmt-step-line-locked { background: var(--color-border) }
.fmt-step-content {
flex: 1;
min-width: 0;
padding-bottom: 24px;
}
.fmt-step-header {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
padding: 6px 0 6px 12px;
user-select: none;
min-height: 36px;
}
.fmt-step-title {
font-family: var(--font-display);
font-size: 15px;
font-weight: 700;
color: var(--color-text);
flex: 1;
min-width: 0;
}
.fmt-step-title-locked {
color: #9CA3AF;
}
[data-theme="dark"] .fmt-step-title { color: var(--color-text) }
[data-theme="dark"] .fmt-step-title-locked { color: var(--color-text-faint) }
.fmt-step-summary {
font-size: 12px;
color: #9CA3AF;
margin-left: auto;
white-space: nowrap;
padding-right: 8px;
}
.fmt-step-chevron {
width: 18px;
height: 18px;
color: #9CA3AF;
transition: transform var(--transition-base);
flex-shrink: 0;
}
.fmt-step-header.fmt-step-open .fmt-step-chevron {
transform: rotate(180deg);
}
.fmt-step-card {
margin-left: 12px;
margin-top: 8px;
padding: 20px;
border-radius: var(--radius-xl);
border: 1px solid var(--color-border);
background: var(--color-surface);
display: none;
}
.fmt-step-header.fmt-step-open + .fmt-step-card {
display: block;
}
.fmt-step-card-active {
border-color: rgba(13,115,119,0.25);
box-shadow: 0 2px 12px rgba(13,115,119,0.08);
}
.fmt-step-card-locked {
background: var(--color-surface-2);
border-color: var(--color-surface-offset);
}
[data-theme="dark"] .fmt-step-card { background: var(--color-surface); border-color: var(--color-border) }
[data-theme="dark"] .fmt-step-card-active { border-color: rgba(79,209,197,0.2); box-shadow: 0 2px 12px rgba(79,209,197,0.06) }
[data-theme="dark"] .fmt-step-card-locked { background: var(--color-surface-2); border-color: var(--color-border) }
.fmt-step-locked-msg {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
background: rgba(156,163,175,0.08);
border-radius: var(--radius-md);
font-size: 13px;
color: #9CA3AF;
}
.fmt-step-locked-msg svg {
flex-shrink: 0;
}
[data-theme="dark"] .fmt-step-locked-msg { background: rgba(255,255,255,0.04); color: var(--color-text-faint) }
/* Last step has no line */
.fmt-step-item:last-child .fmt-step-line { display: none }
/* Responsive */
@media (max-width: 640px) {
.fmt-step-rail { width: 36px }
.fmt-step-circle { width: 30px; height: 30px; font-size: 12px }
.fmt-step-card { margin-left: 6px; padding: 14px }
.fmt-step-title { font-size: 13px }
.fmt-step-summary { display: none }
}
@media (max-width: 480px) {
.fmt-step-rail { width: 30px }
.fmt-step-circle { width: 26px; height: 26px; font-size: 11px }
.fmt-step-card { margin-left: 4px; padding: 12px }
.fmt-step-header { padding: 4px 0 4px 8px }
}
/* =============================================================================
SESSION WIZARD — PREMIUM REDESIGN
Premium, polished styling for the session creation/edit stepper wizard.
Uses Origin Education brand teal #0D7377, clean minimal design.
============================================================================= */
/* ---------------------------------------------------------------------------
1. STEPPER — Top navigation bar refinements
--------------------------------------------------------------------------- */
.stepper {
background: linear-gradient(135deg, #FFFFFF 0%, #F8FFFE 50%, #F0FAF9 100%);
border: 1px solid rgba(13,115,119,0.08);
box-shadow: 0 4px 24px rgba(13,115,119,0.06), 0 1px 3px rgba(0,0,0,0.03);
border-radius: 20px;
padding: 22px 32px;
}
.stepper::before {
height: 3px;
background: linear-gradient(90deg, #0D7377 0%, #14B8A6 50%, #2DD4BF 100%);
opacity: 0.7;
}
.stepper-num {
width: 38px; height: 38px;
font-size: 13px; font-weight: 800;
font-family: 'DM Sans', sans-serif;
transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.step-pending .stepper-num {
background: #F5F4F2; color: #B0B5BD;
border: 2px solid #E0DDD9;
}
.step-active .stepper-num {
background: linear-gradient(135deg, #0D7377 0%, #14B8A6 100%);
color: #fff; border: 2px solid transparent;
box-shadow: 0 4px 16px rgba(13,115,119,0.35), 0 0 0 4px rgba(13,115,119,0.08);
}
.step-done .stepper-num {
background: linear-gradient(135deg, #10B981 0%, #059669 100%);
color: #fff; border: 2px solid transparent;
box-shadow: 0 3px 10px rgba(16,185,129,0.25);
}
.stepper-label {
font-size: 12px; font-weight: 600; letter-spacing: 0.01em;
color: #8A919C;
}
.step-active .stepper-label {
color: #0D7377; font-weight: 700; font-size: 13px;
}
.step-done .stepper-label {
color: #10B981; font-weight: 600;
}
.stepper-line {
width: 52px; height: 3px;
background: #E8E6E1; border-radius: 2px;
margin: 0 12px;
transition: all 0.5s ease;
}
.stepper-line.step-done {
background: linear-gradient(90deg, #10B981 0%, #14B8A6 100%);
}
/* ---------------------------------------------------------------------------
2. FORM SECTIONS — Clean card-like containers
--------------------------------------------------------------------------- */
.stepper-form-card .form-section {
background: #FFFFFF;
border: 1px solid #EDEBE7;
border-radius: 16px;
padding: 24px;
margin-bottom: 20px;
border-bottom: none;
box-shadow: 0 1px 4px rgba(0,0,0,0.02);
transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.stepper-form-card .form-section:hover {
box-shadow: 0 2px 12px rgba(13,115,119,0.05);
border-color: rgba(13,115,119,0.12);
}
.stepper-form-card .form-section:last-child {
border-bottom: none; margin-bottom: 0;
}
[data-theme="dark"] .stepper-form-card .form-section {
background: var(--color-surface);
border-color: var(--color-border);
box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
[data-theme="dark"] .stepper-form-card .form-section:hover {
border-color: rgba(45,212,191,0.15);
box-shadow: 0 2px 12px rgba(45,212,191,0.04);
}
/* Section title — uppercase accent with teal left bar */
.stepper-form-card .form-section-title {
font-family: var(--font-display);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #0D7377;
margin-bottom: 16px;
padding-left: 14px;
display: flex;
align-items: center;
gap: 8px;
position: relative;
}
.stepper-form-card .form-section-title::before {
content: "";
position: absolute;
left: 0; top: 50%;
transform: translateY(-50%);
width: 3px; height: 18px;
border-radius: 2px;
background: linear-gradient(180deg, #0D7377 0%, #14B8A6 100%);
flex-shrink: 0;
}
[data-theme="dark"] .stepper-form-card .form-section-title {
color: #2DD4BF;
}
[data-theme="dark"] .stepper-form-card .form-section-title::before {
background: linear-gradient(180deg, #2DD4BF 0%, #14B8A6 100%);
}
/* ---------------------------------------------------------------------------
3. MODALITE TOGGLE — Premium card buttons
--------------------------------------------------------------------------- */
.adm-modalite-toggle {
display: flex; gap: 12px;
}
.adm-mod-btn {
flex: 1;
display: flex; flex-direction: column; align-items: center; gap: 10px;
padding: 20px 24px;
border: 2px solid #E8E6E1;
border-radius: 14px;
background: #FFFFFF;
cursor: pointer;
font-size: 14px; font-weight: 600;
color: #8A919C;
text-align: center;
transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1);
position: relative;
overflow: hidden;
}
.adm-mod-btn::before {
content: "";
position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(13,115,119,0.03), transparent);
opacity: 0;
transition: opacity 0.25s;
}
.adm-mod-btn:hover {
border-color: rgba(13,115,119,0.4);
color: #0D7377;
transform: translateY(-2px);
box-shadow: 0 6px 24px rgba(13,115,119,0.08);
}
.adm-mod-btn:hover::before { opacity: 1 }
.adm-mod-btn.active {
border-color: #0D7377;
background: rgba(13,115,119,0.04);
color: #0D7377;
box-shadow: 0 0 0 1px #0D7377, 0 4px 16px rgba(13,115,119,0.12);
transform: translateY(-1px);
}
.adm-mod-btn.active::before { opacity: 1 }
.adm-mod-btn svg {
display: block;
margin: 0 auto 0;
stroke: currentColor;
transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.adm-mod-btn:hover svg { transform: scale(1.15) }
.adm-mod-btn.active svg { transform: scale(1.1) }
[data-theme="dark"] .adm-mod-btn {
background: var(--color-surface);
border-color: var(--color-border);
color: var(--color-text-muted);
}
[data-theme="dark"] .adm-mod-btn:hover {
border-color: rgba(45,212,191,0.4);
color: #2DD4BF;
box-shadow: 0 6px 24px rgba(45,212,191,0.06);
}
[data-theme="dark"] .adm-mod-btn.active {
border-color: #2DD4BF;
color: #2DD4BF;
background: rgba(45,212,191,0.08);
box-shadow: 0 0 0 1px #2DD4BF, 0 4px 16px rgba(45,212,191,0.1);
}
/* ---------------------------------------------------------------------------
4. FORM INPUTS — Refined within modal/wizard context
--------------------------------------------------------------------------- */
.modal-body input[type="text"],
.modal-body input[type="url"],
.modal-body input[type="email"],
.modal-body input[type="date"],
.modal-body input[type="time"],
.modal-body select,
.modal-body textarea {
border: 1.5px solid #E8E6E1;
border-radius: 10px;
padding: 10px 14px;
font-size: 14px;
font-family: var(--font-body);
background: #FFFFFF;
color: var(--color-text, #0A1628);
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.15s ease;
width: 100%;
box-sizing: border-box;
}
.modal-body input[type="text"]:hover,
.modal-body input[type="url"]:hover,
.modal-body input[type="email"]:hover,
.modal-body input[type="date"]:hover,
.modal-body input[type="time"]:hover,
.modal-body select:hover,
.modal-body textarea:hover {
border-color: #C8C5C0;
}
.modal-body input[type="text"]:focus,
.modal-body input[type="url"]:focus,
.modal-body input[type="email"]:focus,
.modal-body input[type="date"]:focus,
.modal-body input[type="time"]:focus,
.modal-body select:focus,
.modal-body textarea:focus {
outline: none;
border-color: #0D7377;
box-shadow: 0 0 0 3px rgba(13,115,119,0.08), 0 1px 3px rgba(13,115,119,0.06);
background: #FEFEFE;
}
.modal-body input::placeholder,
.modal-body textarea::placeholder {
color: #B0B5BD;
}
[data-theme="dark"] .modal-body input[type="text"],
[data-theme="dark"] .modal-body input[type="url"],
[data-theme="dark"] .modal-body input[type="email"],
[data-theme="dark"] .modal-body input[type="date"],
[data-theme="dark"] .modal-body input[type="time"],
[data-theme="dark"] .modal-body select,
[data-theme="dark"] .modal-body textarea {
background: var(--color-surface-2);
border-color: var(--color-border);
color: var(--color-text);
}
[data-theme="dark"] .modal-body input[type="text"]:focus,
[data-theme="dark"] .modal-body input[type="url"]:focus,
[data-theme="dark"] .modal-body input[type="email"]:focus,
[data-theme="dark"] .modal-body input[type="date"]:focus,
[data-theme="dark"] .modal-body input[type="time"]:focus,
[data-theme="dark"] .modal-body select:focus,
[data-theme="dark"] .modal-body textarea:focus {
border-color: #2DD4BF;
box-shadow: 0 0 0 3px rgba(45,212,191,0.1);
background: var(--color-surface);
}
[data-theme="dark"] .modal-body input::placeholder,
[data-theme="dark"] .modal-body textarea::placeholder {
color: var(--color-text-faint);
}
/* ---------------------------------------------------------------------------
5. FORM NOTICE — Info callout below inputs
--------------------------------------------------------------------------- */
.form-notice {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: #5A6578;
background: rgba(13,115,119,0.04);
padding: 8px 12px;
border-radius: 8px;
margin-top: 6px;
line-height: 1.4;
}
.form-notice svg {
flex-shrink: 0;
color: #0D7377;
margin-top: 0;
}
[data-theme="dark"] .form-notice {
background: rgba(45,212,191,0.06);
color: var(--color-text-muted);
}
[data-theme="dark"] .form-notice svg {
color: #2DD4BF;
}
/* ---------------------------------------------------------------------------
6. SCHEDULE — Planning des journees
--------------------------------------------------------------------------- */
.schedule-list {
display: flex; flex-direction: column; gap: 12px;
margin-bottom: 12px;
}
.adm-schedule-day {
background: #FFFFFF;
border: 1.5px solid #E8E6E1;
border-radius: 14px;
padding: 16px;
margin-bottom: 0;
position: relative;
transition: all 0.2s ease;
box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
.adm-schedule-day:hover {
border-color: rgba(13,115,119,0.25);
box-shadow: 0 2px 8px rgba(13,115,119,0.06);
}
[data-theme="dark"] .adm-schedule-day {
background: var(--color-surface);
border-color: var(--color-border);
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
[data-theme="dark"] .adm-schedule-day:hover {
border-color: rgba(45,212,191,0.2);
box-shadow: 0 2px 8px rgba(45,212,191,0.04);
}
/* Day number badge — teal pill */
.adm-schedule-day-label {
display: inline-flex; align-items: center;
font-size: 10px; font-weight: 700;
color: #FFFFFF;
text-transform: uppercase;
letter-spacing: 0.06em;
min-width: auto;
padding: 4px 12px;
background: linear-gradient(135deg, #0D7377 0%, #14B8A6 100%);
border-radius: 999px;
box-shadow: 0 2px 6px rgba(13,115,119,0.2);
}
[data-theme="dark"] .adm-schedule-day-label {
background: linear-gradient(135deg, #0D7377 0%, #2DD4BF 100%);
box-shadow: 0 2px 6px rgba(45,212,191,0.15);
}
.adm-schedule-day-header {
display: flex; align-items: center; gap: 12px;
margin-bottom: 12px;
}
.adm-schedule-day-slots {
display: flex; flex-direction: column; gap: 10px;
}
.adm-schedule-half {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.adm-schedule-half-label {
font-size: 12px; font-weight: 600;
color: var(--color-text-muted, #5A6578);
min-width: 85px;
}
/* Schedule time inputs — compact and clean */
.adm-schedule-half input[type="time"],
.adm-schedule-half input[type="date"] {
border: 1.5px solid #E8E6E1;
border-radius: 8px;
padding: 7px 10px;
font-size: 13px;
font-family: var(--font-body);
background: #FAFAF8;
color: var(--color-text);
transition: border-color 0.15s, box-shadow 0.15s;
}
.adm-schedule-half input[type="time"]:focus,
.adm-schedule-half input[type="date"]:focus {
outline: none;
border-color: #0D7377;
box-shadow: 0 0 0 2px rgba(13,115,119,0.08);
background: #fff;
}
[data-theme="dark"] .adm-schedule-half input[type="time"],
[data-theme="dark"] .adm-schedule-half input[type="date"] {
background: var(--color-surface-2);
border-color: var(--color-border);
color: var(--color-text);
}
[data-theme="dark"] .adm-schedule-half input[type="time"]:focus,
[data-theme="dark"] .adm-schedule-half input[type="date"]:focus {
border-color: #2DD4BF;
box-shadow: 0 0 0 2px rgba(45,212,191,0.1);
}
/* "Ajouter une journee" link */
.btn-add-slot {
color: #0D7377;
font-weight: 600;
font-size: 13px;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border: 1.5px dashed rgba(13,115,119,0.3);
border-radius: 10px;
background: none;
cursor: pointer;
font-family: var(--font-body);
transition: all 0.2s ease;
}
.btn-add-slot:hover {
background: rgba(13,115,119,0.04);
border-color: #0D7377;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(13,115,119,0.06);
}
.btn-add-slot svg {
transition: transform 0.2s;
}
.btn-add-slot:hover svg {
transform: scale(1.15);
}
[data-theme="dark"] .btn-add-slot {
color: #2DD4BF;
border-color: rgba(45,212,191,0.25);
}
[data-theme="dark"] .btn-add-slot:hover {
background: rgba(45,212,191,0.06);
border-color: #2DD4BF;
}
/* ---------------------------------------------------------------------------
7. SKIP CHECKBOXES & BADGES
--------------------------------------------------------------------------- */
.adm-skip-check {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
font-size: 13px;
color: #5A6578;
font-weight: 500;
cursor: pointer;
padding: 6px 10px;
border-radius: 8px;
transition: background 0.15s;
}
.adm-skip-check:hover {
background: rgba(13,115,119,0.03);
}
.adm-skip-check input {
accent-color: #0D7377;
width: 16px; height: 16px;
}
.adm-skip-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 12px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
background: linear-gradient(135deg, rgba(13,115,119,0.08), rgba(13,115,119,0.04));
color: #0D7377;
border: 1px solid rgba(13,115,119,0.1);
}
[data-theme="dark"] .adm-skip-check:hover {
background: rgba(45,212,191,0.04);
}
[data-theme="dark"] .adm-skip-badge {
background: rgba(45,212,191,0.1);
color: #2DD4BF;
border-color: rgba(45,212,191,0.15);
}
/* ---------------------------------------------------------------------------
8. APPRENANT LIST & CONTROLS
--------------------------------------------------------------------------- */
.stag-checklist {
max-height: 220px;
overflow-y: auto;
border: 1px solid #E8E6E1;
border-radius: 12px;
padding: 6px;
background: #FAFAF8;
scrollbar-width: thin;
scrollbar-color: rgba(13,115,119,0.15) transparent;
}
.stag-checklist::-webkit-scrollbar { width: 5px }
.stag-checklist::-webkit-scrollbar-track { background: transparent }
.stag-checklist::-webkit-scrollbar-thumb {
background: rgba(13,115,119,0.15);
border-radius: 3px;
}
.stag-checklist::-webkit-scrollbar-thumb:hover {
background: rgba(13,115,119,0.25);
}
[data-theme="dark"] .stag-checklist {
background: var(--color-surface-2);
border-color: var(--color-border);
scrollbar-color: rgba(45,212,191,0.15) transparent;
}
.stag-check-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 8px;
cursor: pointer;
font-size: 13px;
transition: all 0.15s ease;
color: var(--color-text, #0A1628);
}
.stag-check-item:hover {
background: rgba(13,115,119,0.04);
}
.stag-check-item input[type="checkbox"] {
accent-color: #0D7377;
width: 16px; height: 16px;
cursor: pointer;
}
[data-theme="dark"] .stag-check-item:hover {
background: rgba(45,212,191,0.05);
}
/* Actions row */
.adm-stag-actions {
display: flex;
gap: 8px;
margin-top: 12px;
flex-wrap: wrap;
}
/* Inline add form */
.adm-inline-form {
background: #F8F6F3;
border: 1px solid #E8E6E1;
border-radius: 14px;
padding: 16px;
margin-top: 12px;
box-shadow: 0 1px 4px rgba(0,0,0,0.02);
}
[data-theme="dark"] .adm-inline-form {
background: var(--color-surface-2);
border-color: var(--color-border);
box-shadow: none;
}
/* Apprenant counter badge */
.adm-stag-counter {
display: inline-flex;
align-items: center;
font-size: 11px;
font-weight: 700;
color: #FFFFFF;
background: linear-gradient(135deg, #0D7377 0%, #14B8A6 100%);
border-radius: 999px;
padding: 3px 12px;
box-shadow: 0 2px 6px rgba(13,115,119,0.2);
letter-spacing: 0.01em;
}
[data-theme="dark"] .adm-stag-counter {
background: linear-gradient(135deg, #0D7377 0%, #2DD4BF 100%);
box-shadow: 0 2px 6px rgba(45,212,191,0.15);
}
/* ---------------------------------------------------------------------------
9. DOCUMENT UPLOAD
--------------------------------------------------------------------------- */
.doc-upload-zone {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 28px 24px;
border: 2px dashed rgba(13,115,119,0.2);
border-radius: 14px;
text-align: center;
cursor: pointer;
background: rgba(13,115,119,0.02);
transition: all 0.25s ease;
}
.doc-upload-zone:hover {
border-color: #0D7377;
background: rgba(13,115,119,0.04);
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(13,115,119,0.06);
}
.doc-upload-zone.dragover {
border-color: #0D7377;
background: rgba(13,115,119,0.06);
box-shadow: 0 0 0 3px rgba(13,115,119,0.08), 0 8px 24px rgba(13,115,119,0.08);
}
.doc-upload-zone svg {
color: #0D7377;
opacity: 0.5;
margin-bottom: 10px;
transition: opacity 0.2s;
}
.doc-upload-zone:hover svg {
opacity: 0.8;
}
.doc-upload-text {
font-size: 13px;
color: #5A6578;
line-height: 1.5;
}
.doc-upload-link {
color: #0D7377;
font-weight: 600;
cursor: pointer;
text-decoration: none;
border-bottom: 1px dashed rgba(13,115,119,0.3);
padding-bottom: 1px;
transition: border-color 0.15s;
}
.doc-upload-link:hover {
border-bottom-color: #0D7377;
}
.doc-upload-formats {
font-size: 11px;
color: #9CA3AF;
margin-top: 6px;
}
[data-theme="dark"] .doc-upload-zone {
border-color: rgba(45,212,191,0.15);
background: rgba(45,212,191,0.02);
}
[data-theme="dark"] .doc-upload-zone:hover {
border-color: #2DD4BF;
background: rgba(45,212,191,0.04);
box-shadow: 0 4px 16px rgba(45,212,191,0.04);
}
[data-theme="dark"] .doc-upload-zone.dragover {
border-color: #2DD4BF;
background: rgba(45,212,191,0.06);
box-shadow: 0 0 0 3px rgba(45,212,191,0.08);
}
[data-theme="dark"] .doc-upload-zone svg {
color: #2DD4BF;
}
[data-theme="dark"] .doc-upload-link {
color: #2DD4BF;
border-bottom-color: rgba(45,212,191,0.3);
}
[data-theme="dark"] .doc-upload-text {
color: var(--color-text-muted);
}
/* Document list */
.doc-list {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 12px;
}
.doc-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border: 1px solid #E8E6E1;
border-radius: 10px;
background: #FFFFFF;
transition: border-color 0.15s, box-shadow 0.15s;
}
.doc-item:hover {
border-color: rgba(13,115,119,0.2);
box-shadow: 0 2px 8px rgba(13,115,119,0.04);
}
[data-theme="dark"] .doc-item {
background: var(--color-surface);
border-color: var(--color-border);
}
[data-theme="dark"] .doc-item:hover {
border-color: rgba(45,212,191,0.15);
}
/* ---------------------------------------------------------------------------
10. MODULE CARDS — Formation selection grid
--------------------------------------------------------------------------- */
.mod-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 12px;
}
.mod-card {
border-radius: 14px;
padding: 16px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: transform 0.15s ease, box-shadow 0.25s ease, border-color 0.2s ease;
border-color: transparent;
}
.mod-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 28px rgba(13,115,119,0.25);
border-color: rgba(255,255,255,0.3);
}
.mod-card.selected {
transform: scale(1.02);
border-color: #fff;
box-shadow: 0 0 0 3px rgba(255,255,255,0.5), 0 8px 28px rgba(13,115,119,0.3);
}
/* Checkmark circle */
.mod-card-check {
position: absolute;
top: 10px; right: 10px;
width: 26px; height: 26px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.2);
color: transparent;
border: none;
transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
z-index: 2;
}
.mod-card.selected .mod-card-check {
background: #FFFFFF;
color: #0D7377;
transform: scale(1.1);
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
/* Card content */
.mod-card-title {
font-weight: 700;
font-size: 14px;
color: #fff;
margin-bottom: 4px;
position: relative;
z-index: 1;
line-height: 1.3;
}
.mod-card-meta {
font-size: 11px;
color: rgba(255,255,255,0.65);
opacity: 0.8;
margin-top: 4px;
position: relative;
z-index: 1;
line-height: 1.4;
}
.mod-card-level {
display: inline-block;
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(255,255,255,0.8);
background: rgba(255,255,255,0.2);
padding: 3px 10px;
border-radius: 999px;
margin-bottom: 10px;
position: relative;
z-index: 1;
}
/* Custom "Sur mesure" card */
.mod-card-custom {
border: 2px dashed rgba(13,115,119,0.35) !important;
background: #FFFFFF !important;
}
.mod-card-custom:hover {
border-color: #0D7377 !important;
background: linear-gradient(135deg, #F0FAF9, #E8F4F5) !important;
box-shadow: 0 6px 20px rgba(13,115,119,0.1);
transform: translateY(-2px);
}
.mod-card-custom.selected {
border-color: #0D7377 !important;
box-shadow: 0 0 0 2px #0D7377, 0 6px 20px rgba(13,115,119,0.12);
transform: scale(1.02);
}
.mod-card-custom .mod-card-title { color: #0D7377 }
.mod-card-custom .mod-card-meta { color: #5A6578; opacity: 1 }
.mod-card-custom .mod-card-level {
color: #0D7377;
background: rgba(13,115,119,0.08);
}
.mod-card-custom .mod-card-check {
background: #F0EFEB; color: transparent;
}
.mod-card-custom.selected .mod-card-check {
background: #0D7377; color: #fff;
}
[data-theme="dark"] .mod-card-custom {
background: var(--color-surface) !important;
border-color: rgba(45,212,191,0.25) !important;
}
[data-theme="dark"] .mod-card-custom:hover {
border-color: #2DD4BF !important;
background: rgba(45,212,191,0.06) !important;
}
[data-theme="dark"] .mod-card-custom.selected {
border-color: #2DD4BF !important;
box-shadow: 0 0 0 2px #2DD4BF, 0 6px 20px rgba(45,212,191,0.1);
}
[data-theme="dark"] .mod-card-custom .mod-card-title { color: #4FD1C5 }
[data-theme="dark"] .mod-card-custom .mod-card-meta { color: var(--color-text-muted) }
[data-theme="dark"] .mod-card-custom .mod-card-level {
color: #2DD4BF; background: rgba(45,212,191,0.1);
}
[data-theme="dark"] .mod-card-custom .mod-card-check {
background: var(--color-surface-2);
}
[data-theme="dark"] .mod-card-custom.selected .mod-card-check {
background: #2DD4BF; color: #0A1628;
}
/* ---------------------------------------------------------------------------
11. STEPPER FORM CARD & RECAP — Premium polish
--------------------------------------------------------------------------- */
.stepper-form-card {
border-radius: 20px;
border: 1px solid rgba(13,115,119,0.06);
box-shadow: 0 2px 16px rgba(0,0,0,0.03), 0 1px 4px rgba(0,0,0,0.02);
overflow: hidden;
}
.stepper-form-card .modal-body {
padding: 28px;
max-height: none;
overflow: visible;
}
[data-theme="dark"] .stepper-form-card {
border-color: var(--color-border);
box-shadow: 0 2px 16px rgba(0,0,0,0.15);
}
/* Stepper nav bar */
.stepper-nav {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 24px;
gap: 12px;
padding-top: 20px;
border-top: 1px solid #EDEBE7;
}
[data-theme="dark"] .stepper-nav {
border-top-color: var(--color-border);
}
/* Recap step */
.stepper-recap {
animation: cardSlideIn 0.4s ease-out;
}
.stepper-recap .session-detail-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
}
/* ---------------------------------------------------------------------------
12. SEARCH INPUTS inside wizard
--------------------------------------------------------------------------- */
.stepper-form-card .search-input {
border: 1.5px solid #E8E6E1;
border-radius: 10px;
padding: 9px 14px 9px 36px;
font-size: 13px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 12px center;
background-size: 14px;
transition: border-color 0.2s, box-shadow 0.2s;
}
.stepper-form-card .search-input:focus {
outline: none;
border-color: #0D7377;
box-shadow: 0 0 0 3px rgba(13,115,119,0.08);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230D7377' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
}
[data-theme="dark"] .stepper-form-card .search-input {
background-color: var(--color-surface-2);
border-color: var(--color-border);
color: var(--color-text);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235A7280' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
}
[data-theme="dark"] .stepper-form-card .search-input:focus {
border-color: #2DD4BF;
box-shadow: 0 0 0 3px rgba(45,212,191,0.1);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232DD4BF' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
}
/* ---------------------------------------------------------------------------
13. NEW ENTREPRISE INLINE FORM
--------------------------------------------------------------------------- */
.new-ent-inline {
background: #FAFAF8;
border: 1.5px solid #E8E6E1;
border-radius: 14px;
padding: 20px;
margin-bottom: 16px;
box-shadow: 0 1px 4px rgba(0,0,0,0.02);
}
[data-theme="dark"] .new-ent-inline {
background: var(--color-surface-2);
border-color: var(--color-border);
box-shadow: none;
}
/* ---------------------------------------------------------------------------
14. FORM HINT — consistent styling
--------------------------------------------------------------------------- */
.form-hint {
font-size: 12px;
color: #8A919C;
margin-top: 4px;
line-height: 1.5;
}
[data-theme="dark"] .form-hint {
color: var(--color-text-faint);
}
/* ---------------------------------------------------------------------------
15. WIZARD RESPONSIVE — refined breakpoints
--------------------------------------------------------------------------- */
@media (max-width: 768px) {
.stepper {
flex-wrap: wrap; gap: 8px;
padding: 16px 18px;
border-radius: 16px;
}
.stepper-label { display: none }
.stepper-line { width: 24px; margin: 0 6px }
.stepper-num { width: 34px; height: 34px; font-size: 12px }
.stepper-form-card .modal-body { padding: 20px 16px }
.stepper-form-card .form-section {
padding: 18px 16px;
border-radius: 14px;
}
.mod-cards-grid {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 10px;
}
.adm-modalite-toggle { flex-direction: column; gap: 8px }
.stepper-nav { flex-wrap: wrap }
.stepper-nav .btn { flex: 1; min-width: 0; text-align: center }
.adm-schedule-half { flex-wrap: wrap }
}
@media (max-width: 480px) {
.stepper {
padding: 12px 14px;
border-radius: 14px;
}
.stepper-num { width: 30px; height: 30px; font-size: 11px }
.stepper-line { width: 18px; margin: 0 4px }
.stepper-form-card .modal-body { padding: 16px 12px }
.stepper-form-card .form-section {
padding: 14px 12px;
border-radius: 12px;
}
.mod-cards-grid { grid-template-columns: 1fr }
.mod-card { padding: 14px }
.adm-mod-btn { padding: 14px 12px; font-size: 13px }
.doc-upload-zone { padding: 20px 16px }
.adm-schedule-day { padding: 12px }
.adm-schedule-day-header { flex-wrap: wrap; gap: 8px }
}
/* ---------------------------------------------------------------------------
16. STEPPER DARK MODE — comprehensive overrides
--------------------------------------------------------------------------- */
[data-theme="dark"] .stepper {
background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-surface-2) 100%);
border-color: var(--color-border);
box-shadow: 0 4px 24px rgba(0,0,0,0.15);
}
[data-theme="dark"] .stepper::before { opacity: 0.35 }
[data-theme="dark"] .step-pending .stepper-num {
background: var(--color-surface-2);
border-color: var(--color-border);
color: var(--color-text-faint);
}
[data-theme="dark"] .step-active .stepper-num {
box-shadow: 0 4px 16px rgba(45,212,191,0.3), 0 0 0 4px rgba(45,212,191,0.06);
}
[data-theme="dark"] .step-done .stepper-num {
box-shadow: 0 3px 10px rgba(74,222,128,0.2);
}
[data-theme="dark"] .stepper-label { color: var(--color-text-faint) }
[data-theme="dark"] .step-active .stepper-label { color: #4FD1C5; font-weight: 700 }
[data-theme="dark"] .step-done .stepper-label { color: #4ADE80 }
[data-theme="dark"] .stepper-line {
background: var(--color-border);
}
[data-theme="dark"] .stepper-line.step-done {
background: linear-gradient(90deg, #4ADE80 0%, #2DD4BF 100%);
}
[data-theme="dark"] .stepper-nav {
border-top-color: var(--color-border);
}
/* ---------------------------------------------------------------------------
17. SCHEDULE SLOT (non-AM/PM variant) refinements
--------------------------------------------------------------------------- */
.schedule-slot {
display: flex; align-items: center; gap: 10px;
padding: 10px 14px;
background: #FFFFFF;
border: 1.5px solid #E8E6E1;
border-radius: 12px;
transition: border-color 0.15s;
}
.schedule-slot:hover {
border-color: rgba(13,115,119,0.2);
}
[data-theme="dark"] .schedule-slot {
background: var(--color-surface);
border-color: var(--color-border);
}
/* Schedule date/time inputs */
.schedule-date {
border: 1.5px solid #E8E6E1;
border-radius: 8px;
padding: 7px 12px;
font-size: 13px;
font-family: var(--font-body);
background: #FAFAF8;
color: var(--color-text);
min-width: 140px;
transition: border-color 0.15s, box-shadow 0.15s;
}
.schedule-date:focus {
outline: none;
border-color: #0D7377;
box-shadow: 0 0 0 2px rgba(13,115,119,0.08);
background: #fff;
}
.schedule-time {
border: 1.5px solid #E8E6E1;
border-radius: 8px;
padding: 7px 10px;
font-size: 13px;
font-family: var(--font-body);
background: #FAFAF8;
color: var(--color-text);
width: 92px;
transition: border-color 0.15s, box-shadow 0.15s;
}
.schedule-time:focus {
outline: none;
border-color: #0D7377;
box-shadow: 0 0 0 2px rgba(13,115,119,0.08);
background: #fff;
}
[data-theme="dark"] .schedule-date,
[data-theme="dark"] .schedule-time {
background: var(--color-surface-2);
border-color: var(--color-border);
color: var(--color-text);
}
[data-theme="dark"] .schedule-date:focus,
[data-theme="dark"] .schedule-time:focus {
border-color: #2DD4BF;
box-shadow: 0 0 0 2px rgba(45,212,191,0.1);
}
.schedule-sep {
font-size: 12px;
color: #B0B5BD;
font-weight: 600;
}
.schedule-remove {
margin-left: auto;
background: none; border: none;
cursor: pointer; color: #B0B5BD;
padding: 6px; border-radius: 6px;
display: flex;
transition: all 0.15s;
}
.schedule-remove:hover {
color: #DC2626;
background: rgba(220,38,38,0.05);
}
/* ---------------------------------------------------------------------------
18. ANIMATIONS — Smooth entrance for wizard elements
--------------------------------------------------------------------------- */
@keyframes adm-wizard-fadeUp {
from { opacity: 0; transform: translateY(8px) }
to { opacity: 1; transform: translateY(0) }
}
.stepper-form-card .form-section {
animation: adm-wizard-fadeUp 0.3s ease-out both;
}
.stepper-form-card .form-section:nth-child(2) { animation-delay: 0.05s }
.stepper-form-card .form-section:nth-child(3) { animation-delay: 0.1s }
.stepper-form-card .form-section:nth-child(4) { animation-delay: 0.15s }
.stepper-form-card .form-section:nth-child(5) { animation-delay: 0.2s }
/* ============================================
DARK MODE — COMPREHENSIVE FIX
Covers all remaining components not yet handled
by the scattered dark-mode rules above.
============================================ */
/* --- Generic inputs / selects / textareas (outside .modal-body) --- */
[data-theme="dark"] #dashboard-app input:not(.login-input):not(.topbar-search-input):not(.bn-sidebar-search input):not(.bn-editor-title-input),
[data-theme="dark"] #dashboard-app select:not(.login-input),
[data-theme="dark"] #dashboard-app textarea:not(.login-input) {
background: var(--color-surface);
color: var(--color-text);
border-color: var(--color-border);
}
/* --- Calendar (gcal week view) — grid borders, day numbers, weekend cols --- */
[data-theme="dark"] .gcal-week-grid td,
[data-theme="dark"] .gcal-week-grid th { border-color: var(--color-border); color: var(--color-text); }
[data-theme="dark"] .gcal-time-slot { color: var(--color-text-muted); border-bottom-color: var(--color-border); }
/* --- Satisfaction page: comment preview cards (inline white backgrounds) --- */
/* The JS generates inline background:#fff for odd comment cards.
We override via attribute selector on the chart-container children. */
[data-theme="dark"] .chart-container > div > div[style*="background:#fff"],
[data-theme="dark"] .chart-container > div > div[style*="background: #fff"] {
background: var(--color-surface-2) !important;
border-color: var(--color-border) !important;
}
/* --- Comments popup modal: white bubble cards --- */
[data-theme="dark"] .success-popup-overlay div[style*="background:#fff"],
[data-theme="dark"] .success-popup-overlay div[style*="background: #fff"] {
background: var(--color-surface-2) !important;
border-color: var(--color-border) !important;
}
/* Text inside non-teal bubbles in popup */
[data-theme="dark"] .success-popup-overlay div[style*="background:#fff"] p,
[data-theme="dark"] .success-popup-overlay div[style*="background: #fff"] p {
color: var(--color-text) !important;
}
/* --- Mes sessions: future card white overlay → dark overlay --- */
[data-theme="dark"] .formation-card > div[style*="background:rgba(255,255,255,0.35)"],
[data-theme="dark"] .mss-fc > div[style*="background:rgba(255,255,255,0.35)"] {
background: rgba(0, 0, 0, 0.35) !important;
}
/* --- Confirm popup (cpop) cancel button — inline #fff background --- */
[data-theme="dark"] #cpop-cancel {
background: var(--color-surface-2) !important;
color: var(--color-text) !important;
border-color: var(--color-border) !important;
}
/* --- Welcome banner (inline #fff bg) --- */
[data-theme="dark"] #welcome-banner-inner {
background: var(--color-surface) !important;
border-color: var(--color-border) !important;
}
[data-theme="dark"] #welcome-banner-inner div[style*="color:#0A1628"] {
color: var(--color-text) !important;
}
[data-theme="dark"] #welcome-banner-inner div[style*="color:#5A6578"] {
color: var(--color-text-muted) !important;
}
[data-theme="dark"] #welcome-banner-inner a[style*="color:#0D7377"] {
color: #2DD4BF !important;
border-color: var(--color-border) !important;
}
/* --- Drive context menu (inline #fff bg) --- */
[data-theme="dark"] .drive-ctx-menu {
background: var(--color-surface) !important;
border-color: var(--color-border) !important;
box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important;
}
[data-theme="dark"] .drive-ctx-item {
color: var(--color-text) !important;
}
[data-theme="dark"] .drive-ctx-item:hover {
background: var(--color-surface-2) !important;
}
[data-theme="dark"] .drive-ctx-item[data-action="delete"] {
color: #F87171 !important;
}
/* --- Drive folder-picker icon button inline #fff ---
(base rule already at ~line 860; skipped to avoid duplicate) */
/* --- Satisfaction page: sat-comment-card text --- */
[data-theme="dark"] .sat-comment-text {
color: var(--color-text);
}
[data-theme="dark"] .sat-comment-author {
color: var(--color-text-muted);
}
/* --- Satisfaction session expand panel --- */
[data-theme="dark"] .sat-session-expand {
background: var(--color-surface);
border-color: var(--color-border);
}
/* --- Satisfaction session row text --- */
[data-theme="dark"] .sat-row-title { color: var(--color-text); }
[data-theme="dark"] .sat-row-meta { color: var(--color-text-faint); }
[data-theme="dark"] .sat-row-meta span[style*="color:#0D7377"] {
color: #2DD4BF !important;
}
[data-theme="dark"] .sat-donut-label { color: var(--color-text-muted); }
/* --- Satisfaction session-detail: overview grid --- */
[data-theme="dark"] .sat-session-row {
border-color: var(--color-border);
}
/* --- Page header / title (catch-all) --- */
[data-theme="dark"] .page-header { color: var(--color-text); }
/* --- Formateur step stepper dark circles --- */
[data-theme="dark"] .fmt-step-circle-pending {
background: var(--color-surface-2);
border-color: var(--color-border);
color: var(--color-text-muted);
}
[data-theme="dark"] .fmt-step-circle-current {
box-shadow: 0 0 0 4px rgba(45,212,191,0.15);
}
[data-theme="dark"] .fmt-step-line {
background: var(--color-border);
}
[data-theme="dark"] .fmt-step-line-done {
background: #2DD4BF;
}
[data-theme="dark"] .fmt-step-label { color: var(--color-text-muted); }
[data-theme="dark"] .fmt-step-label-active { color: var(--color-text); }
[data-theme="dark"] .fmt-step-body {
background: var(--color-surface);
border-color: var(--color-border);
}
/* --- Signature images with inline #fff bg --- */
[data-theme="dark"] img[style*="background:#fff"] {
background: var(--color-surface) !important;
border-color: var(--color-border) !important;
}
/* --- KPI cards — reinforce text visibility --- */
[data-theme="dark"] .kpi-card .kpi-value { color: var(--color-text); }
[data-theme="dark"] .kpi-card .kpi-label { color: var(--color-text-muted); }
/* --- Chart containers — reinforce border visibility --- */
[data-theme="dark"] .chart-container {
border-color: var(--color-border);
}
/* --- Data tables — reinforce header bg --- */
[data-theme="dark"] .data-table th {
background: var(--color-surface-2);
}
/* --- Empty state placeholders --- */
[data-theme="dark"] .drive-empty { color: var(--color-text-muted); }
[data-theme="dark"] .drive-empty-subtitle { color: var(--color-text-faint); }
[data-theme="dark"] .mss-empty-illustration { color: var(--color-text-faint); }
/* --- Satisfaction teal grid donut labels --- */
[data-theme="dark"] .sat-teal-donut-item span {
color: rgba(255,255,255,0.85);
}
/* --- Satisfaction comment cards inside chart-container --- */
[data-theme="dark"] .sat-comment-card {
background: var(--color-surface-2);
border-color: var(--color-border);
}
/* --- Formation card session detail — (base rules already exist ~line 353/359) --- */
/* --- Emargement tables — reinforce readability --- */
[data-theme="dark"] .emarg-apprenants-table { color: var(--color-text); }
/* --- Rating bars on satisfaction --- */
[data-theme="dark"] .rating-bar-label { color: var(--color-text-muted); }
[data-theme="dark"] .rating-bar-value { color: var(--color-text); }
/* --- Donut chart center text --- */
[data-theme="dark"] .donut-center-value { color: var(--color-text); }
[data-theme="dark"] .donut-center-label { color: var(--color-text-muted); }
/* --- Accueil page — bottom grid card internals --- */
[data-theme="dark"] .accueil-page .card-subtitle { color: var(--color-text-muted); }
/* --- Formateur session detail (fmt-) additional items --- */
[data-theme="dark"] .fmt-info-label { color: var(--color-text-muted); }
[data-theme="dark"] .fmt-section-subtitle { color: var(--color-text-muted); }
/* --- Mss done overlay — reduce brightness of grayscale instead of opacity fade --- */
[data-theme="dark"] .mss-fc-done {
opacity: 0.5;
}
[data-theme="dark"] .mss-fc-done:hover {
opacity: 0.85;
}
/* --- Mes sessions KPI row text --- */
[data-theme="dark"] .mss-kpi-txt { color: var(--color-text-muted); }
/* --- Quick access items on accueil --- */
[data-theme="dark"] .quick-access-item .qa-label { color: var(--color-text); }
[data-theme="dark"] .quick-access-item .qa-desc { color: var(--color-text-muted); }
/* --- Inline button that uses #imp-ok / #E8E6E1 border --- */
[data-theme="dark"] #imp-ok {
background: var(--color-surface-2) !important;
color: var(--color-text) !important;
border-color: var(--color-border) !important;
}
/* --- Session detail grid labels / values --- */
[data-theme="dark"] .session-detail-grid .detail-label { color: var(--color-text-muted); }
[data-theme="dark"] .session-detail-grid .detail-value { color: var(--color-text); }
/* --- Stepper form card recap background --- */
[data-theme="dark"] .stepper-recap {
background: var(--color-surface);
border-color: var(--color-border);
}
[data-theme="dark"] .stepper-recap .session-detail-grid {
color: var(--color-text);
}
/* --- Chart filter button --- */
[data-theme="dark"] .chart-filter {
color: var(--color-text-muted);
}
[data-theme="dark"] .chart-filter:hover {
color: var(--color-text);
}
/* --- Format checklist items in formateur session detail --- */
[data-theme="dark"] .fmt-checklist li svg { color: var(--color-text-muted); }
[data-theme="dark"] .fmt-checklist li.done svg { color: #4FD1C5; }
/* --- Placeholder / empty state in pages --- */
[data-theme="dark"] .placeholder-title { color: var(--color-text); }
[data-theme="dark"] .placeholder-text { color: var(--color-text-muted); }
/* --- Calendar event detail popup (cal-preview) text --- */
[data-theme="dark"] .cal-preview-label { color: var(--color-text-muted); }
[data-theme="dark"] .cal-preview-value { color: var(--color-text); }
/* --- Formateur attendance button inline styles --- */
[data-theme="dark"] .emarg-btn-present { background: rgba(16,185,129,0.12); color: #34D399; }
[data-theme="dark"] .emarg-btn-absent { background: rgba(220,38,38,0.1); color: #F87171; }
/* --- Satisfaction page: donut chart SVG text --- */
[data-theme="dark"] .donut-chart text { fill: var(--color-text); }
[data-theme="dark"] .donut-chart .donut-label-text { fill: var(--color-text-muted); }
/* --- Border color for inline #E8E6E1 borders (catch-all for common elements) --- */
[data-theme="dark"] .btn[style*="border:1px solid #E8E6E1"],
[data-theme="dark"] .btn[style*="border: 1px solid #E8E6E1"] {
border-color: var(--color-border) !important;
}
/* --- Inline color:#0A1628 text fix (very common in JS templates) --- */
[data-theme="dark"] [style*="color:#0A1628"] {
color: var(--color-text) !important;
}
[data-theme="dark"] [style*="color:#5A6578"] {
color: var(--color-text-muted) !important;
}
/* --- Tabs with inline border-bottom for formateur session detail --- */
[data-theme="dark"] .btn-ghost[style*="border-bottom:2px solid #0D7377"] {
color: #2DD4BF !important;
border-bottom-color: #2DD4BF !important;
}
[data-theme="dark"] .btn-ghost[style*="border-bottom:2px solid transparent"] {
color: var(--color-text-muted) !important;
}
/* --- MSS empty state --- */
[data-theme="dark"] .mss-empty-title { color: var(--color-text); }
[data-theme="dark"] .mss-empty-text { color: var(--color-text-muted); }
/* --- Misc: new-ent-inline label & input --- */
[data-theme="dark"] .new-ent-inline label { color: var(--color-text-muted); }
[data-theme="dark"] .new-ent-inline input {
background: var(--color-surface);
border-color: var(--color-border);
color: var(--color-text);
}
/* --- Success popup text (base rule already at ~line 211) --- */
/* --- Document zone title --- */
[data-theme="dark"] .doc-zone-icon { color: var(--color-text-muted); }
/* --- Formateur emargement day title + badge --- */
[data-theme="dark"] .fmt-emarg-badge { color: var(--color-text-muted); }
/* --- Ent row badge text --- */
[data-theme="dark"] .ent-badge { color: var(--color-text-muted); }
/* --- Body background (catch-all) --- */
[data-theme="dark"] body {
background: var(--color-bg);
color: var(--color-text);
}
/* --- End of dark mode comprehensive fix --- */
/* ============================================
APPRENANTS — Sales Navigator style
============================================ */
.ap-hero {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: var(--space-6);
padding: var(--space-8);
margin-bottom: var(--space-6);
background:
radial-gradient(circle at top right, var(--color-primary-bg) 0%, transparent 60%),
var(--color-surface);
border: 1px solid var(--color-divider);
border-radius: var(--radius-xl);
position: relative;
overflow: hidden;
}
.ap-hero::before {
content: "";
position: absolute;
top: 0; bottom: 0; left: 0;
width: 3px;
background: linear-gradient(180deg, var(--color-primary), var(--color-primary-light));
}
.ap-hero-content { flex: 1; min-width: 0; }
.ap-eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 4px 12px;
background: var(--color-primary-bg);
color: var(--color-primary);
border-radius: var(--radius-full);
font-size: var(--text-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: var(--space-3);
}
.ap-eyebrow svg { width: 14px; height: 14px; }
.ap-hero-title {
margin: 0;
font-size: var(--text-3xl);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.1;
background: linear-gradient(110deg, #084547 0%, #0A5C5F 45%, #0D7377 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
[data-theme="dark"] .ap-hero-title {
background: linear-gradient(110deg, #2DD4BF 0%, #4FD1C5 50%, #7EDDD3 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
.ap-hero-sub {
margin: var(--space-2) 0 0;
color: var(--color-text-muted);
font-size: var(--text-sm);
}
.ap-hero-actions {
display: flex;
gap: var(--space-3);
flex-shrink: 0;
}
/* Tabs */
.ap-tabs {
display: flex;
gap: var(--space-2);
border-bottom: 1px solid var(--color-divider);
margin-bottom: var(--space-6);
padding: 0 var(--space-2);
}
.ap-tab {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-4) var(--space-5);
background: transparent;
border: none;
border-bottom: 2px solid transparent;
color: var(--color-text-muted);
font-family: inherit;
font-size: var(--text-sm);
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
margin-bottom: -1px;
}
.ap-tab svg { width: 16px; height: 16px; }
.ap-tab:hover { color: var(--color-primary); }
.ap-tab.active {
color: var(--color-primary);
border-bottom-color: var(--color-primary);
}
.ap-tab-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 6px;
background: var(--color-primary-bg);
color: var(--color-primary);
border-radius: var(--radius-full);
font-size: var(--text-xs);
font-weight: 700;
}
.ap-tab.active .ap-tab-count {
background: var(--color-primary);
color: #fff;
}
/* Audience cards grid */
.ap-audiences-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: var(--space-5);
}
.ap-card {
display: flex;
flex-direction: column;
padding: var(--space-6);
background: var(--color-surface);
border: 1px solid var(--color-divider);
border-radius: var(--radius-lg);
cursor: pointer;
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
position: relative;
overflow: hidden;
}
.ap-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
opacity: 0;
transition: opacity 0.25s;
}
.ap-card:hover {
transform: translateY(-3px);
box-shadow: 0 16px 40px -16px rgba(13, 115, 119, 0.3);
border-color: var(--color-primary);
}
.ap-card:hover::before { opacity: 1; }
.ap-card-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-4);
gap: var(--space-3);
}
.ap-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
border-radius: var(--radius-md);
background: var(--color-primary-bg);
color: var(--color-primary);
flex-shrink: 0;
}
.ap-card-icon svg { width: 22px; height: 22px; }
.ap-card-icon--lg { width: 56px; height: 56px; }
.ap-card-icon--lg svg { width: 28px; height: 28px; }
.ap-badge {
display: inline-flex;
align-items: center;
padding: 3px 10px;
background: var(--color-surface-2);
color: var(--color-text-muted);
border: 1px solid var(--color-divider);
border-radius: var(--radius-full);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-right: auto;
}
.ap-badge--primary {
background: var(--color-primary-bg);
color: var(--color-primary);
border-color: transparent;
}
.ap-card-menu {
background: transparent;
border: none;
padding: 6px;
color: var(--color-text-faint);
cursor: pointer;
border-radius: var(--radius-sm);
opacity: 0;
transition: all 0.2s;
}
.ap-card:hover .ap-card-menu { opacity: 1; }
.ap-card-menu:hover {
color: #DC2626;
background: #FEE2E2;
}
.ap-card-body { flex: 1; }
.ap-card-title {
margin: 0 0 var(--space-2);
font-size: var(--text-lg);
font-weight: 600;
color: var(--color-text);
line-height: 1.3;
}
.ap-card-desc {
margin: 0;
font-size: var(--text-sm);
color: var(--color-text-muted);
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ap-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: var(--space-5);
padding-top: var(--space-4);
border-top: 1px solid var(--color-divider);
}
.ap-card-count { display: flex; flex-direction: column; line-height: 1; }
.ap-card-count-value {
font-size: var(--text-2xl);
font-weight: 700;
color: var(--color-primary);
}
.ap-card-count-label {
font-size: var(--text-xs);
color: var(--color-text-muted);
margin-top: 2px;
}
/* Avatar */
.ap-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--radius-full);
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
color: #fff;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.02em;
flex-shrink: 0;
}
.ap-avatars { display: flex; }
.ap-avatar--stack {
width: 32px;
height: 32px;
font-size: 11px;
border: 2px solid var(--color-surface);
margin-left: -8px;
}
.ap-avatar--stack:first-child { margin-left: 0; }
.ap-avatar--more {
background: var(--color-surface-2);
color: var(--color-text-muted);
font-size: 10px;
}
/* Leads list */
.ap-leads-toolbar {
display: flex;
align-items: center;
gap: var(--space-4);
padding: var(--space-4) var(--space-5);
background: var(--color-surface);
border: 1px solid var(--color-divider);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
border-bottom: none;
}
.ap-search-wrap {
position: relative;
flex: 1;
max-width: 440px;
}
.ap-search-wrap svg {
position: absolute;
left: var(--space-4);
top: 50%;
transform: translateY(-50%);
color: var(--color-text-muted);
pointer-events: none;
}
.ap-search-input {
width: 100%;
padding: var(--space-3) var(--space-4) var(--space-3) var(--space-10);
background: var(--color-surface-2);
border: 1px solid var(--color-divider);
border-radius: var(--radius-md);
font-family: inherit;
font-size: var(--text-sm);
color: var(--color-text);
transition: all 0.2s;
}
.ap-search-input:focus {
outline: none;
border-color: var(--color-primary);
background: var(--color-surface);
box-shadow: 0 0 0 3px var(--color-primary-bg);
}
.ap-select-all {
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin-left: auto;
font-size: var(--text-sm);
color: var(--color-text-muted);
cursor: pointer;
}
.ap-select-all input { accent-color: var(--color-primary); width: 16px; height: 16px; }
.ap-bulk-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-3) var(--space-5);
background: var(--color-primary-bg);
border: 1px solid var(--color-primary);
border-top: none;
border-bottom: none;
color: var(--color-primary);
font-size: var(--text-sm);
animation: apBulkIn 0.2s ease;
}
@keyframes apBulkIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.ap-bulk-left { display: inline-flex; align-items: center; gap: var(--space-2); }
.ap-bulk-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--color-primary);
animation: apPulse 1.5s infinite;
}
@keyframes apPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.ap-bulk-actions { display: flex; align-items: center; gap: var(--space-2); }
.ap-bulk-bar[hidden] { display: none !important; }
.ap-bulk-close {
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px;
background: transparent;
border: none;
border-radius: 8px;
color: var(--color-primary);
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.ap-bulk-close:hover {
background: rgba(13, 115, 119, 0.12);
}
[data-theme="dark"] .ap-bulk-close { color: #4FD1C5 }
[data-theme="dark"] .ap-bulk-close:hover { background: rgba(79, 209, 197, 0.15) }
.ap-leads-list {
background: var(--color-surface);
border: 1px solid var(--color-divider);
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
overflow: hidden;
}
.ap-leads-list--modal { border-radius: var(--radius-lg); }
.ap-lead-row {
display: grid;
grid-template-columns: 0 48px 1fr 260px;
align-items: center;
gap: var(--space-4);
padding: var(--space-4) var(--space-5);
border-bottom: 1px solid var(--color-divider);
transition: grid-template-columns 0.25s ease, background 0.15s, gap 0.25s ease;
}
.ap-leads-list.ap-select-mode .ap-lead-row {
grid-template-columns: 40px 48px 1fr 260px;
}
.ap-lead-row:last-child { border-bottom: none; }
.ap-lead-row:hover { background: var(--color-primary-bg); }
.ap-lead-row.is-selected {
background: var(--color-primary-bg);
box-shadow: inset 3px 0 0 var(--color-primary);
}
.ap-lead-row--modal {
display: grid !important;
grid-template-columns: 48px minmax(0, 1fr) auto 36px !important;
gap: var(--space-3) !important;
}
.ap-lead-row--modal .ap-lead-main { min-width: 0 }
.ap-lead-row--modal .ap-lead-name,
.ap-lead-row--modal .ap-lead-email {
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 640px) {
.ap-lead-row--modal {
grid-template-columns: 40px minmax(0, 1fr) 32px !important;
}
.ap-lead-row--modal .ap-lead-col--ent { display: none }
}
.ap-lead-check {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
}
.ap-leads-list.ap-select-mode .ap-lead-check {
opacity: 1;
pointer-events: auto;
}
.ap-lead-check input {
width: 18px;
height: 18px;
accent-color: var(--color-primary);
cursor: pointer;
}
.ap-lead-main { min-width: 0; }
.ap-lead-name {
font-weight: 600;
color: var(--color-text);
font-size: var(--text-sm);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ap-lead-email {
font-size: var(--text-xs);
color: var(--color-text-muted);
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ap-lead-col { font-size: var(--text-sm); color: var(--color-text); min-width: 0; }
.ap-ent-chip {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: 3px 10px;
background: var(--color-primary-bg);
color: var(--color-primary);
border-radius: var(--radius-full);
font-size: var(--text-xs);
font-weight: 500;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ap-ent-chip svg { flex-shrink: 0; }
.ap-ent-chip--none {
background: transparent;
color: var(--color-text-faint);
}
.ap-lead-remove {
background: transparent;
border: none;
padding: 6px;
color: var(--color-text-faint);
cursor: pointer;
border-radius: var(--radius-sm);
transition: all 0.2s;
}
.ap-lead-remove:hover { background: #FEE2E2; color: #DC2626; }
/* Modal large + list picker */
.modal--large { max-width: 760px; }
.ap-modal-head {
display: flex;
align-items: center;
gap: var(--space-4);
}
.ap-modal-sub {
margin: 4px 0 0;
font-size: var(--text-sm);
color: var(--color-text-muted);
}
.ap-list-picker {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.ap-list-picker-item {
display: flex;
align-items: center;
gap: var(--space-4);
padding: var(--space-4);
background: var(--color-surface);
border: 1px solid var(--color-divider);
border-radius: var(--radius-md);
cursor: pointer;
text-align: left;
transition: all 0.2s;
font-family: inherit;
}
.ap-list-picker-item:hover {
border-color: var(--color-primary);
background: var(--color-primary-bg);
}
.ap-list-picker-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--radius-md);
background: var(--color-primary-bg);
color: var(--color-primary);
flex-shrink: 0;
}
.ap-list-picker-info { flex: 1; }
.ap-list-picker-name {
font-weight: 600;
color: var(--color-text);
font-size: var(--text-sm);
}
.ap-list-picker-count {
font-size: var(--text-xs);
color: var(--color-text-muted);
margin-top: 2px;
}
.ap-list-picker-add {
color: var(--color-primary);
opacity: 0;
transition: opacity 0.2s;
}
.ap-list-picker-item:hover .ap-list-picker-add { opacity: 1; }
/* ===== Nouvelle liste modal — picker block ===== */
.ap-picker-block { margin-top: 18px }
.ap-picker-label {
display: flex !important; align-items: center; justify-content: space-between;
gap: 10px; margin-bottom: 10px;
font-size: 13px; font-weight: 600; color: #0A1628;
}
[data-theme="dark"] .ap-picker-label { color: var(--color-text) }
.ap-picker-count {
font-size: 11px; font-weight: 600;
padding: 3px 10px; border-radius: 999px;
background: rgba(13, 115, 119, 0.10);
color: #0D7377;
}
[data-theme="dark"] .ap-picker-count {
background: rgba(79, 209, 197, 0.14);
color: #4FD1C5;
}
/* Tabs — Depuis la liste / Ajouter manuellement */
.ap-picker-tabs {
display: flex; gap: 4px;
padding: 4px;
background: #F4F4F2;
border-radius: 12px;
margin-bottom: 12px;
}
[data-theme="dark"] .ap-picker-tabs { background: var(--color-surface-2) }
.ap-picker-tab {
flex: 1;
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
padding: 9px 12px;
background: transparent; border: none;
font-family: var(--font-body);
font-size: 12px; font-weight: 600;
color: #6B7280; cursor: pointer;
border-radius: 9px;
transition: all 0.2s ease;
}
.ap-picker-tab:hover { color: #0A1628 }
.ap-picker-tab.active {
background: #fff; color: #0D7377;
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
[data-theme="dark"] .ap-picker-tab:hover { color: var(--color-text) }
[data-theme="dark"] .ap-picker-tab.active {
background: var(--color-surface); color: #4FD1C5;
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
/* Search input — override global .modal-body input styles */
.ap-picker-search {
position: relative;
margin-bottom: 10px;
}
.ap-picker-search svg {
position: absolute;
left: 14px; top: 50%;
transform: translateY(-50%);
color: #9CA3AF;
pointer-events: none;
z-index: 2;
}
.modal-body .ap-picker-search input[type="text"] {
width: 100%;
padding: 10px 14px 10px 42px;
border: 1px solid #E5E7EB;
border-radius: 10px;
background: #fff;
font-size: 13px; color: #0A1628;
font-family: var(--font-body);
transition: border-color 0.2s, box-shadow 0.2s;
margin: 0;
}
.modal-body .ap-picker-search input[type="text"]:focus {
outline: none; border-color: #0D7377;
box-shadow: 0 0 0 3px rgba(13, 115, 119, 0.08);
}
[data-theme="dark"] .modal-body .ap-picker-search input[type="text"] {
background: var(--color-surface-2);
border-color: var(--color-border);
color: var(--color-text);
}
[data-theme="dark"] .modal-body .ap-picker-search input[type="text"]:focus {
border-color: #4FD1C5; box-shadow: 0 0 0 3px rgba(79, 209, 197, 0.12);
}
/* Picker list */
.ap-picker-list {
max-height: 320px; overflow-y: auto;
border: 1px solid #EEF0F0;
border-radius: 12px;
background: #fff;
}
[data-theme="dark"] .ap-picker-list {
background: var(--color-surface-2);
border-color: var(--color-border);
}
/* Force flex layout on label.ap-picker-row — override .form-group label { display: block } */
label.ap-picker-row,
.ap-picker-row {
display: flex !important;
align-items: center !important;
gap: 12px;
padding: 10px 14px;
margin: 0 !important;
border-bottom: 1px solid #F4F4F2;
cursor: pointer;
font-weight: 400;
font-size: 13px;
color: inherit;
transition: background 0.15s ease;
}
.ap-picker-row.ap-picker-hidden { display: none !important }
.ap-picker-row:last-child { border-bottom: none }
.ap-picker-row:hover { background: rgba(13, 115, 119, 0.04) }
.ap-picker-row.is-checked { background: rgba(13, 115, 119, 0.07) }
[data-theme="dark"] .ap-picker-row { border-bottom-color: rgba(79, 209, 197, 0.06) }
[data-theme="dark"] .ap-picker-row:hover { background: rgba(79, 209, 197, 0.06) }
[data-theme="dark"] .ap-picker-row.is-checked { background: rgba(79, 209, 197, 0.10) }
.ap-picker-check {
width: 18px; height: 18px;
flex-shrink: 0;
margin: 0;
accent-color: #0D7377; cursor: pointer;
}
[data-theme="dark"] .ap-picker-check { accent-color: #4FD1C5 }
.ap-picker-row .ap-avatar {
width: 34px !important;
height: 34px !important;
flex-shrink: 0;
font-size: 12px;
}
.ap-picker-info { flex: 1; min-width: 0 }
.ap-picker-name {
font-size: 13px; font-weight: 600; color: #0A1628;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
line-height: 1.3;
}
[data-theme="dark"] .ap-picker-name { color: var(--color-text) }
.ap-picker-email {
font-size: 11px; color: #6B7280; font-weight: 400;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
line-height: 1.3;
}
[data-theme="dark"] .ap-picker-email { color: var(--color-text-muted) }
.ap-picker-ent {
flex-shrink: 0;
max-width: 180px;
}
@media (max-width: 640px) {
.ap-picker-ent { display: none }
}
/* Manual add form */
.ap-manual-form {
padding: 14px;
border: 1px dashed #D0EBEC;
border-radius: 12px;
background: linear-gradient(135deg, #F8FCFC, #F0FAF9);
}
[data-theme="dark"] .ap-manual-form {
background: rgba(79, 209, 197, 0.04);
border-color: rgba(79, 209, 197, 0.2);
}
.ap-manual-row {
display: grid; grid-template-columns: 1fr 1fr;
gap: 10px; margin-bottom: 10px;
}
.ap-manual-row:last-of-type { margin-bottom: 8px }
.modal-body .ap-manual-input {
width: 100%;
padding: 10px 14px;
border: 1px solid #E5E7EB;
border-radius: 10px;
background: #fff;
font-size: 13px; color: #0A1628;
font-family: var(--font-body);
transition: border-color 0.2s, box-shadow 0.2s;
margin: 0;
}
.modal-body .ap-manual-input:focus {
outline: none; border-color: #0D7377;
box-shadow: 0 0 0 3px rgba(13, 115, 119, 0.08);
}
[data-theme="dark"] .modal-body .ap-manual-input {
background: var(--color-surface-2);
border-color: var(--color-border);
color: var(--color-text);
}
[data-theme="dark"] .modal-body .ap-manual-input:focus {
border-color: #4FD1C5;
box-shadow: 0 0 0 3px rgba(79, 209, 197, 0.12);
}
.ap-manual-add {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
padding: 10px 18px;
background: linear-gradient(135deg, #0D7377, #14B8A6);
border: none; border-radius: 10px;
color: #fff; cursor: pointer;
font-family: var(--font-body);
font-size: 13px; font-weight: 600;
box-shadow: 0 3px 10px rgba(13, 115, 119, 0.22);
transition: transform 0.2s ease, box-shadow 0.2s ease;
white-space: nowrap;
}
.ap-manual-add:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(13, 115, 119, 0.3);
}
.ap-manual-add:disabled { opacity: 0.6; cursor: not-allowed; transform: none }
[data-theme="dark"] .ap-manual-add {
background: linear-gradient(135deg, #4FD1C5, #38B2AC);
color: #0A1628;
box-shadow: 0 3px 10px rgba(79, 209, 197, 0.3);
}
.ap-manual-hint {
margin: 0;
font-size: 11px; color: #6B7280; font-style: italic;
}
[data-theme="dark"] .ap-manual-hint { color: var(--color-text-muted) }
@media (max-width: 540px) {
.ap-manual-row { grid-template-columns: 1fr }
}
/* Responsive */
@media (max-width: 900px) {
.ap-hero {
flex-direction: column;
align-items: flex-start;
padding: var(--space-6);
}
.ap-hero-actions { width: 100%; }
.ap-lead-row {
grid-template-columns: 32px 40px 1fr;
}
.ap-lead-col--ent { display: none; }
}
/* ===== CERTIFICATION TAB — redesigned ===== */
.cert-hero {
display: flex; align-items: center; justify-content: space-between;
gap: 24px;
padding: 26px 28px;
background: linear-gradient(135deg, #FFFFFF 0%, #F8FCFC 50%, #F0FAF9 100%);
border: 1px solid rgba(13, 115, 119, 0.08);
border-radius: 20px;
margin-bottom: 20px;
position: relative; overflow: hidden;
}
.cert-hero::before {
content: ""; position: absolute;
top: -60px; right: -60px;
width: 220px; height: 220px;
border-radius: 50%;
background: radial-gradient(circle, rgba(13, 115, 119, 0.10) 0%, transparent 70%);
pointer-events: none;
}
[data-theme="dark"] .cert-hero {
background: linear-gradient(135deg, var(--color-surface) 0%, rgba(79, 209, 197, 0.04) 100%);
border-color: rgba(79, 209, 197, 0.12);
}
.cert-hero-left { flex: 1; min-width: 0; position: relative; z-index: 1 }
.cert-hero-title {
font-family: var(--font-display);
font-size: 28px; font-weight: 700;
margin: 0 0 6px;
background: linear-gradient(110deg, #084547 0%, #0A5C5F 50%, #0D7377 100%);
-webkit-background-clip: text; background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
letter-spacing: -0.02em;
}
[data-theme="dark"] .cert-hero-title {
background: linear-gradient(110deg, #2DD4BF 0%, #4FD1C5 50%, #7EDDD3 100%);
-webkit-background-clip: text; background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
.cert-hero-sub {
margin: 0;
font-size: 13px; color: #6B7280;
max-width: 540px;
}
[data-theme="dark"] .cert-hero-sub { color: var(--color-text-muted) }
.cert-hero-stats {
display: flex; gap: 12px;
flex-shrink: 0;
position: relative; z-index: 1;
}
.cert-stat-card {
display: flex; align-items: center; gap: 12px;
padding: 14px 18px;
background: #fff;
border: 1px solid #EEF0F0;
border-radius: 14px;
min-width: 130px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
transition: transform 0.2s, box-shadow 0.2s;
}
.cert-stat-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(13, 115, 119, 0.08) }
[data-theme="dark"] .cert-stat-card {
background: var(--color-surface);
border-color: var(--color-border);
}
.cert-stat-icon {
width: 42px; height: 42px;
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.cert-stat-pending .cert-stat-icon,
.cert-stat-sent .cert-stat-icon,
.cert-stat-pct .cert-stat-icon { background: rgba(13, 115, 119, 0.10); color: #0D7377 }
[data-theme="dark"] .cert-stat-pending .cert-stat-icon,
[data-theme="dark"] .cert-stat-sent .cert-stat-icon,
[data-theme="dark"] .cert-stat-pct .cert-stat-icon { background: rgba(79, 209, 197, 0.14); color: #4FD1C5 }
.cert-stat-content { min-width: 0 }
.cert-stat-value {
font-family: var(--font-display);
font-size: 22px; font-weight: 700;
color: #0A1628;
line-height: 1;
}
[data-theme="dark"] .cert-stat-value { color: var(--color-text) }
.cert-stat-label-sm {
font-size: 11px; font-weight: 600;
color: #6B7280;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-top: 4px;
}
[data-theme="dark"] .cert-stat-label-sm { color: var(--color-text-muted) }
/* Tabs */
.cert-tabs {
display: inline-flex; gap: 4px;
padding: 4px;
background: #F4F4F2;
border-radius: 14px;
margin-bottom: 18px;
}
[data-theme="dark"] .cert-tabs { background: var(--color-surface-2) }
.cert-tab {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 18px;
background: transparent;
border: none;
font-family: var(--font-body);
font-size: 13px; font-weight: 600;
color: #6B7280; cursor: pointer;
border-radius: 10px;
transition: all 0.2s;
}
.cert-tab svg { flex-shrink: 0 }
.cert-tab:hover { color: #0A1628 }
.cert-tab.active {
background: #fff; color: #0D7377;
box-shadow: 0 2px 8px rgba(13, 115, 119, 0.10);
}
[data-theme="dark"] .cert-tab:hover { color: var(--color-text) }
[data-theme="dark"] .cert-tab.active {
background: var(--color-surface);
color: #4FD1C5;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.cert-tab-pill {
display: inline-flex; align-items: center; justify-content: center;
min-width: 22px; height: 20px; padding: 0 7px;
background: rgba(0, 0, 0, 0.06);
border-radius: 999px;
font-size: 11px; font-weight: 700;
color: #6B7280;
}
.cert-tab.active .cert-tab-pill {
background: rgba(13, 115, 119, 0.12);
color: #0D7377;
}
[data-theme="dark"] .cert-tab.active .cert-tab-pill {
background: rgba(79, 209, 197, 0.15);
color: #4FD1C5;
}
/* List of cards */
.cert-list { display: flex; flex-direction: column; gap: 10px }
.cert-card {
display: grid;
grid-template-columns: 56px 1fr 180px 140px;
align-items: center; gap: 16px;
padding: 16px 20px;
background: #fff;
border: 1px solid #EEF0F0;
border-radius: 16px;
text-decoration: none; color: inherit;
transition: all 0.2s ease;
position: relative; overflow: hidden;
}
.cert-card::before {
content: ""; position: absolute;
top: 0; left: 0; bottom: 0; width: 4px;
background: linear-gradient(180deg, #F59E0B, #FBBF24);
border-radius: 16px 0 0 16px;
}
.cert-card--sent::before { background: linear-gradient(180deg, #10B981, #34D399) }
.cert-card:hover {
border-color: #D0EBEC;
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(13, 115, 119, 0.08);
}
[data-theme="dark"] .cert-card {
background: var(--color-surface);
border-color: rgba(79, 209, 197, 0.08);
}
[data-theme="dark"] .cert-card:hover {
border-color: rgba(79, 209, 197, 0.22);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.cert-card-left {
display: flex; align-items: center; gap: 8px;
}
.cert-card-drag {
display: flex; align-items: center; justify-content: center;
width: 16px; height: 32px;
color: #C8C5C0;
cursor: grab;
opacity: 0;
transition: opacity 0.15s ease, color 0.15s ease;
}
.cert-card:hover .cert-card-drag { opacity: 1 }
.cert-card-drag:hover { color: #0D7377 }
.cert-card-drag:active { cursor: grabbing }
[data-theme="dark"] .cert-card-drag { color: rgba(255, 255, 255, 0.25) }
[data-theme="dark"] .cert-card-drag:hover { color: #4FD1C5 }
.cert-card[draggable="true"] { cursor: default }
.cert-card.cert-card-dragging {
opacity: 0.55;
transform: scale(0.98) rotate(-1deg);
box-shadow: 0 12px 32px rgba(13, 115, 119, 0.25);
cursor: grabbing;
}
[data-theme="dark"] .cert-card.cert-card-dragging {
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}
.cert-tab.cert-tab-droptarget {
background: rgba(16, 185, 129, 0.06);
color: #059669;
}
.cert-tab.cert-tab-dragover {
background: linear-gradient(135deg, #10B981, #34D399) !important;
color: #fff !important;
transform: scale(1.05);
box-shadow: 0 6px 18px rgba(16, 185, 129, 0.35);
animation: certPulse 0.6s ease-in-out infinite alternate;
}
.cert-tab.cert-tab-dragover .cert-tab-pill {
background: rgba(255, 255, 255, 0.25) !important;
color: #fff !important;
}
@keyframes certPulse {
from { transform: scale(1.04) }
to { transform: scale(1.08) }
}
/* During drag: disable pointer events on tab children so drag events
always bubble to the .cert-tab button itself (fixes phantom dragleave) */
.cert-tabs-dragging .cert-tab > * { pointer-events: none }
.cert-card-avatar {
width: 48px; height: 48px;
border-radius: 12px;
background: linear-gradient(135deg, #0D7377, #14B8A6);
color: #fff;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display);
font-size: 16px; font-weight: 700;
box-shadow: 0 4px 12px rgba(13, 115, 119, 0.22);
}
[data-theme="dark"] .cert-card-avatar {
background: linear-gradient(135deg, #4FD1C5, #38B2AC);
box-shadow: 0 4px 12px rgba(79, 209, 197, 0.25);
}
.cert-card-main { min-width: 0 }
.cert-card-title {
font-family: var(--font-display);
font-size: 15px; font-weight: 700;
color: #0A1628;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
margin-bottom: 6px;
}
[data-theme="dark"] .cert-card-title { color: var(--color-text) }
.cert-card-meta {
display: flex; gap: 14px; flex-wrap: wrap;
font-size: 12px; color: #6B7280;
}
.cert-meta-item {
display: inline-flex; align-items: center; gap: 5px;
white-space: nowrap;
}
.cert-meta-item svg { color: #9CA3AF; flex-shrink: 0 }
[data-theme="dark"] .cert-card-meta { color: var(--color-text-muted) }
[data-theme="dark"] .cert-meta-item svg { color: var(--color-text-faint) }
.cert-card-stats {
display: flex; flex-direction: column; align-items: center;
padding: 0 12px;
border-left: 1px solid #F0EFEB;
}
[data-theme="dark"] .cert-card-stats { border-left-color: rgba(79, 209, 197, 0.08) }
.cert-stat-num {
font-family: var(--font-display);
display: flex; align-items: baseline; gap: 2px;
margin-bottom: 2px;
}
.cert-stat-num b {
font-size: 22px; font-weight: 700;
color: #0D7377; line-height: 1;
}
.cert-stat-num span {
font-size: 13px; font-weight: 500;
color: #9CA3AF;
}
[data-theme="dark"] .cert-stat-num b { color: #4FD1C5 }
.cert-stat-label {
font-size: 10px; font-weight: 600;
color: #9CA3AF;
text-transform: uppercase; letter-spacing: 0.05em;
margin-bottom: 6px;
}
.cert-progress-bar {
width: 100%; height: 4px;
background: #F0EFEB;
border-radius: 999px;
overflow: hidden;
}
.cert-progress-bar span {
display: block; height: 100%;
background: linear-gradient(90deg, #0D7377, #14B8A6);
border-radius: 999px;
transition: width 0.6s ease;
}
[data-theme="dark"] .cert-progress-bar { background: rgba(79, 209, 197, 0.12) }
[data-theme="dark"] .cert-progress-bar span {
background: linear-gradient(90deg, #4FD1C5, #38B2AC);
}
.cert-card-right {
display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}
.cert-status {
display: inline-flex; align-items: center;
padding: 4px 12px;
border-radius: 999px;
font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.04em;
}
.cert-status-pending { background: rgba(245, 158, 11, 0.12); color: #D97706 }
.cert-status-ready { background: rgba(13, 115, 119, 0.12); color: #0D7377 }
.cert-status-sent { background: rgba(16, 185, 129, 0.12); color: #059669 }
[data-theme="dark"] .cert-status-pending { background: rgba(251, 191, 36, 0.14); color: #FBBF24 }
[data-theme="dark"] .cert-status-ready { background: rgba(79, 209, 197, 0.14); color: #4FD1C5 }
[data-theme="dark"] .cert-status-sent { background: rgba(52, 211, 153, 0.14); color: #34D399 }
.cert-action {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12px; font-weight: 600;
color: #0D7377;
transition: gap 0.2s ease;
}
.cert-card:hover .cert-action { gap: 9px }
[data-theme="dark"] .cert-action { color: #4FD1C5 }
/* Empty state */
.cert-empty {
background: #fff;
border: 1px dashed #D0EBEC;
border-radius: 16px;
padding: 60px 20px;
text-align: center;
}
[data-theme="dark"] .cert-empty {
background: var(--color-surface);
border-color: rgba(79, 209, 197, 0.18);
}
.cert-empty-icon {
width: 72px; height: 72px;
border-radius: 50%;
background: linear-gradient(135deg, #D0EBEC, #E8F4F5);
color: #0D7377;
display: inline-flex; align-items: center; justify-content: center;
margin-bottom: 14px;
}
[data-theme="dark"] .cert-empty-icon {
background: rgba(79, 209, 197, 0.10);
color: #4FD1C5;
}
.cert-empty-title {
font-family: var(--font-display);
font-size: 17px; font-weight: 700;
color: #0A1628;
margin: 0 0 6px;
}
[data-theme="dark"] .cert-empty-title { color: var(--color-text) }
.cert-empty-text {
font-size: 13px; color: #6B7280;
max-width: 420px; margin: 0 auto;
}
[data-theme="dark"] .cert-empty-text { color: var(--color-text-muted) }
@media (max-width: 900px) {
.cert-hero { flex-direction: column; align-items: stretch }
.cert-hero-stats { justify-content: stretch }
.cert-stat-card { flex: 1; min-width: 0 }
.cert-card { grid-template-columns: 56px 1fr; gap: 12px }
.cert-card-stats, .cert-card-right { display: none }
}
/* ====================================================================
FORMATEUR DASHBOARD — RESPONSIVE OVERRIDES (session4)
Tablet (≤1024) → Mobile (≤768) → Small mobile (≤480)
==================================================================== */
/* ===== TABLET ≤ 1024px ===== */
@media (max-width: 1024px) {
/* Formateur home: 3-col grid (profile/onboarding/quick) → 2 cols */
[style*="grid-template-columns: 220px 1fr 1fr"],
[style*="grid-template-columns:220px 1fr 1fr"] {
grid-template-columns: 220px 1fr !important;
}
[style*="grid-template-columns: 220px 1fr 1fr"] > :nth-child(3),
[style*="grid-template-columns:220px 1fr 1fr"] > :nth-child(3) {
grid-column: 1 / -1;
}
/* Formateur session step 1 KPIs */
.fmt-s1-kpis { gap: 10px }
.fmt-s1-kpi { min-width: 140px; padding: 12px 14px }
.fmt-s1-kpi-val { font-size: 18px }
}
/* ===== MOBILE ≤ 768px ===== */
@media (max-width: 768px) {
/* Page header — wrap actions */
.page-header { flex-wrap: wrap; gap: 10px }
.page-header > * { min-width: 0 }
.page-title { font-size: 20px; flex: 1 1 100% }
/* Topbar */
.topbar-search { max-width: 200px }
.topbar-actions { gap: 6px }
/* Formateur home: stack everything vertically */
[style*="grid-template-columns: 220px 1fr 1fr"],
[style*="grid-template-columns:220px 1fr 1fr"] {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
/* Formateur welcome card */
[style*="display:flex;flex-direction:column;align-items:center;text-align:center"] {
padding: 18px !important;
}
/* === Formateur Session (S1) — KPIs stack to 2 cols, then 1 === */
.fmt-s1-kpis {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.fmt-s1-kpi {
min-width: 0; padding: 12px 14px; gap: 10px;
}
.fmt-s1-kpi-icon { width: 36px; height: 36px; border-radius: 10px }
.fmt-s1-kpi-val { font-size: 17px }
.fmt-s1-kpi-label { font-size: 10px }
/* Detail rows */
.fmt-s1-details { padding: 12px 14px; gap: 8px }
.fmt-s1-detail-row { font-size: 12px; flex-wrap: wrap; gap: 6px }
.fmt-s1-detail-label { min-width: 70px; font-size: 12px }
.fmt-s1-detail-val { font-size: 12px; word-break: break-word }
/* Formateur tables — horizontal scroll wrapper */
.fmt-s1-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch }
.fmt-planning-table,
.fmt-stag-table { font-size: 12px; min-width: 460px }
.fmt-planning-table th,
.fmt-stag-table th,
.fmt-planning-table td,
.fmt-stag-table td { padding: 9px 10px }
/* Visio card */
.fmt-visio-card { flex-wrap: wrap; padding: 12px 14px; gap: 8px }
.fmt-visio-card a { font-size: 12px }
/* Section title */
.fmt-s1-section-title { font-size: 12px; margin: 16px 0 8px }
/* Skip button */
.fmt-skip-btn { padding: 9px 18px !important; font-size: 12px !important; width: 100% }
/* Mes sessions cards (formateur sessions list) */
.mss-cards-grid { gap: 10px; grid-template-columns: 1fr }
.mss-filters { flex-wrap: wrap; gap: 6px }
.mss-kpi-row { flex-wrap: wrap; gap: 8px }
/* Profil page (formateur) */
.profil-photo-card { padding: 18px }
.profil-form-card { padding: 16px }
.profil-tabs { padding: 4px; gap: 2px }
.profil-tab { padding: 9px 14px; font-size: 12px }
/* Bloc-notes */
.bn-content { padding: 14px !important }
.bn-toolbar { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap }
.bn-toolbar > * { flex-shrink: 0 }
.bn-tool { padding: 6px 8px !important; font-size: 12px }
/* Drive (formateur) */
.drive-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important }
.drive-folder { padding: 14px 10px }
.drive-folder-name { font-size: 12px }
.drive-file-list { padding: 4px 10px }
.drive-file { padding: 10px 8px; gap: 8px }
.drive-file-info { min-width: 0 }
.drive-file-name { font-size: 12px }
.drive-file-meta { font-size: 10px }
/* Calendar (formateur) */
.gcal-week-grid { font-size: 11px }
.gcal-mday { min-height: 60px; padding: 4px }
.gcal-mday-name { font-size: 11px }
.gcal-mday-ev { font-size: 9px; padding: 2px 4px }
.gcal-view-toggle { width: 100%; justify-content: stretch }
.gcal-view-toggle .gcal-vt-btn { flex: 1 }
}
/* ===== SMALL MOBILE ≤ 480px ===== */
@media (max-width: 480px) {
/* Page padding tighter */
#dashboard-app { padding: 18px 12px 20px !important }
/* Formateur KPIs full width single col */
.fmt-s1-kpis { grid-template-columns: 1fr; gap: 8px }
.fmt-s1-kpi { padding: 11px 13px }
.fmt-s1-kpi-val { font-size: 16px }
/* Detail rows: label + value on separate lines */
.fmt-s1-detail-row {
flex-direction: column; align-items: flex-start; gap: 2px;
padding-bottom: 8px; border-bottom: 1px dashed rgba(13,115,119,0.08);
}
.fmt-s1-detail-row:last-child { border-bottom: none; padding-bottom: 0 }
.fmt-s1-detail-row svg { display: none }
.fmt-s1-detail-label { min-width: 0; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em }
/* Tables font + padding even tighter */
.fmt-planning-table,
.fmt-stag-table { font-size: 11px; min-width: 420px }
/* Visio card stack */
.fmt-visio-card { flex-direction: column; align-items: stretch; text-align: center }
/* Modal full screen */
/* modal: see consolidated rule below */
.modal--large { max-width: 100% }
.modal-body { padding: 16px }
/* Calendar months single col already set via 768; tighter cells */
.gcal-mday { min-height: 48px }
/* Drive folder grid 2 cols */
.drive-grid { grid-template-columns: repeat(2, 1fr) !important }
/* Onboarding empty state */
[style*="grid-template-columns: 220px 1fr 1fr"] > div,
[style*="grid-template-columns:220px 1fr 1fr"] > div {
padding: 16px !important;
}
}
/* ===== Touch targets — make all buttons at least 40px tall on mobile ===== */
@media (max-width: 768px) and (pointer: coarse) {
.btn, button.btn, a.btn { min-height: 40px }
.btn-sm, button.btn-sm, a.btn-sm { min-height: 36px }
}
/* ====================================================================
ADMIN DASHBOARD — RESPONSIVE OVERRIDES (session4)
Tablet (≤1024) → Mobile (≤768) → Small mobile (≤480)
==================================================================== */
/* ===== TABLET ≤ 1024px ===== */
@media (max-width: 1024px) {
/* Center max-width plus généreux */
#dashboard-app { max-width: 100%; padding: 16px 20px 20px }
/* Accueil : bottom-grid 3 cols → 2 cols + 3e en bas */
.accueil-page .bottom-grid { grid-template-columns: 1fr 1fr }
.accueil-page .bottom-grid > :nth-child(3) {
grid-column: 1 / -1;
max-height: 280px;
}
/* Chart row 3 → garder 1+2 sur la même ligne */
.accueil-page .chart-row-3 { grid-template-columns: 1fr 1fr }
.accueil-page .chart-row-3 > :nth-child(3) { grid-column: 1 / -1 }
/* Entreprises grid */
.entc-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) }
/* Entreprises hero stats wrap */
.cert-hero-stats { flex-wrap: wrap }
.cert-stat-card { flex: 1 1 calc(50% - 6px); min-width: 0 }
/* Modal large : moins large */
.modal--large { max-width: 700px }
}
/* ===== MOBILE ≤ 768px ===== */
@media (max-width: 768px) {
/* === Topbar admin === */
.dashboard-topbar { padding: 0 12px; height: 52px }
.topbar-search,
[data-theme="dark"] .topbar-search {
flex: 1; max-width: none;
background: var(--color-surface-2) !important;
border-radius: 10px !important;
padding: 0 12px !important;
height: 36px;
border: 1px solid var(--color-border) !important;
}
.topbar-search-input { font-size: 13px; padding: 8px 0 }
.topbar-actions { gap: 4px }
.topbar-notif-btn,
.theme-toggle { width: 36px; height: 36px }
.topbar-user-name, .topbar-chevron { display: none }
/* === Page header === */
.page-header {
flex-wrap: wrap; gap: 10px;
padding: 14px 0;
}
.page-header > .btn,
.page-header > a.btn { font-size: 12px; padding: 8px 14px }
/* === KPI grid : 2x2 === */
.kpi-grid {
grid-template-columns: 1fr 1fr !important;
gap: 10px;
}
.kpi-card { padding: 14px 16px; gap: 10px }
.kpi-icon-circle { width: 38px; height: 38px }
.kpi-icon-circle svg { width: 18px; height: 18px }
.kpi-value { font-size: 22px }
.kpi-label { font-size: 11px }
/* === Charts === */
.chart-container { padding: 14px 16px }
.chart-title { font-size: 13px }
.chart-row-3 { grid-template-columns: 1fr !important; gap: 12px }
.bottom-grid { grid-template-columns: 1fr !important; gap: 12px }
.bottom-grid > * { max-height: none !important }
/* Bar chart SVG — keep aspect ratio readable */
.sessions-bar-chart svg { font-size: 11px }
.bar-chart-legend { gap: 12px; font-size: 11px }
.bar-legend-item { gap: 4px }
/* Donut charts */
.donut-chart { padding: 18px 14px }
.donut-chart svg { max-width: 160px }
.donut-legend { font-size: 11px; gap: 6px }
/* Line chart */
.accueil-page .chart-container svg { max-height: 220px }
/* Highlight card */
.highlight-card { padding: 20px; min-height: 240px; max-height: none }
.highlight-value { font-size: 36px }
.highlight-label { font-size: 11px }
/* Entreprises card on home */
.ent-row { padding: 10px 14px; gap: 10px }
.ent-rank { display: none }
.ent-name { font-size: 12px }
.ent-meta, .ent-count, .ent-date { font-size: 10px }
/* === Entreprises tab — card grid === */
.entc-grid { grid-template-columns: 1fr; gap: 12px }
.entc-card { gap: 0 }
.entc-header { padding: 18px 16px 14px }
.entc-body { padding: 12px 16px 10px }
.entc-name { font-size: 15px }
.entc-stats { padding: 12px 0; margin: 0 16px }
.entc-stat-value { font-size: 20px }
.entc-footer { padding: 10px 16px 14px }
/* Entreprises KPI bar */
.entc-grid + .entc-toolbar { flex-wrap: wrap }
/* Entreprises list compact (when expanded) */
.entc-row { padding: 12px 14px; gap: 10px }
.entc-row-avatar { width: 34px; height: 34px }
.entc-row-name { font-size: 13px }
.entc-row-meta { font-size: 11px; gap: 8px }
.entc-backbar { flex-wrap: wrap; gap: 10px }
.entc-backbar-title { font-size: 13px }
/* Voir toutes les entreprises btn */
.entc-more-btn { padding: 12px 22px; font-size: 13px }
/* Entreprise detail */
.session-detail-grid { grid-template-columns: 1fr !important }
/* === Apprenants tab === */
.ap-hero { flex-direction: column; align-items: stretch; padding: 20px 18px }
.ap-hero-title { font-size: 22px }
.ap-hero-actions { width: 100%; flex-wrap: wrap }
.ap-hero-actions .btn { flex: 1; min-width: 130px }
.ap-tabs { width: 100% }
.ap-tab { flex: 1; padding: 10px 14px; font-size: 12px }
.ap-audiences-grid { grid-template-columns: 1fr 1fr !important }
.ap-card { padding: 14px 16px }
.ap-card-title { font-size: 13px }
.ap-card-desc { font-size: 11px }
/* Apprenants leads toolbar */
.ap-leads-toolbar { flex-wrap: wrap; gap: 10px; padding: 12px 14px }
.ap-search-wrap { width: 100%; max-width: none }
/* Bulk bar */
.ap-bulk-bar { flex-wrap: wrap; padding: 10px 14px; gap: 8px }
.ap-bulk-actions { width: 100%; justify-content: flex-end }
/* Apprenant lead row */
.ap-lead-row {
grid-template-columns: 32px 36px 1fr;
padding: 12px 14px;
gap: 10px;
}
.ap-lead-col--ent,
.ap-lead-col { display: none }
.ap-lead-name { font-size: 13px }
.ap-lead-email { font-size: 11px }
/* === Sessions tab (ms-card grid) === */
.mss-filters { flex-wrap: wrap; gap: 6px }
.mss-kpi-row { flex-wrap: wrap; gap: 8px }
/* Sessions filters bar */
.sessions-toolbar { flex-wrap: wrap; gap: 10px; padding: 12px 14px }
.sessions-filters { width: 100%; flex-wrap: wrap }
.filter-bar { flex-wrap: wrap; gap: 8px }
/* === Certification === */
.cert-hero {
flex-direction: column; align-items: stretch;
padding: 20px 18px; gap: 14px;
}
.cert-hero-title { font-size: 22px }
.cert-hero-stats { width: 100%; gap: 8px }
.cert-stat-card { padding: 12px 14px; gap: 10px; min-width: 0 }
.cert-stat-icon { width: 36px; height: 36px }
.cert-stat-value { font-size: 18px }
.cert-stat-label-sm { font-size: 10px }
.cert-tabs { width: 100% }
.cert-tab { flex: 1; padding: 10px 14px; font-size: 12px }
.cert-card {
grid-template-columns: 56px 1fr;
gap: 12px;
padding: 14px 16px;
}
.cert-card-stats,
.cert-card-right { display: none }
.cert-card-title { font-size: 14px }
.cert-card-meta { font-size: 11px; gap: 8px }
/* === Session create wizard === */
.stepper-form-card { border-radius: 16px }
.plan-days { gap: 10px }
.plan-day-head { padding: 12px 14px }
.plan-day-body { padding: 14px }
.fa-fmt-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) }
.fa-fmt-card { padding: 10px 12px; gap: 10px }
.fa-fmt-avatar { width: 36px; height: 36px }
.fa-list-card { padding: 12px 14px; gap: 12px }
.fa-list-card-icon { width: 36px; height: 36px }
.fa-stag-list { max-height: 260px }
/* Search wrap inside picker */
.fa-search-wrap input { font-size: 13px }
/* === Logo uploader === */
.ec-logo-uploader { flex-direction: column; align-items: stretch; gap: 12px }
.ec-logo-preview { align-self: center }
.ec-logo-actions { align-items: stretch }
/* === Notifications dropdown === */
.notif-dropdown {
position: fixed; left: 12px !important; right: 12px !important;
width: auto !important; max-width: none;
top: 56px !important;
}
/* === Modals === */
/* modal: see consolidated rule below */
.modal-overlay { padding: 0; align-items: stretch }
.modal-body { max-height: calc(100vh - 140px); padding: 18px }
.modal-footer { padding: 14px 18px; flex-wrap: wrap; gap: 8px }
.modal-footer .btn { flex: 1; min-width: 0 }
/* === Tables generic === */
.data-table { font-size: 12px }
.data-table th, .data-table td { padding: 10px 12px; white-space: nowrap }
.card[style*="overflow-x"] { margin: 0 -12px; border-radius: 0 }
/* === Param tabs === */
.param-tabs { padding: 4px; gap: 2px; overflow-x: auto; -webkit-overflow-scrolling: touch }
.param-tab { padding: 9px 14px; font-size: 12px; flex-shrink: 0; white-space: nowrap }
.param-tab-body { padding: 0 }
.param-card-section { padding: 18px 16px }
}
/* ===== SMALL MOBILE ≤ 480px ===== */
@media (max-width: 480px) {
#dashboard-app { padding: 16px 10px 18px !important }
/* KPIs 1 col */
.kpi-grid { grid-template-columns: 1fr !important }
.kpi-card { padding: 16px 18px }
.kpi-value { font-size: 26px }
/* Charts paddings */
.chart-container { padding: 12px 14px }
.donut-chart svg { max-width: 140px }
/* Highlight card */
.highlight-value { font-size: 32px }
/* Apprenants card grid 1 col */
.ap-audiences-grid { grid-template-columns: 1fr !important }
/* Modules cards in wizard */
.mod-cards-grid { grid-template-columns: 1fr !important }
.mod-card { padding: 14px }
/* Plan day modalité toggle stack */
.plan-modalite { grid-template-columns: 1fr; gap: 6px }
.plan-hours { padding: 12px }
/* Formateur fa-fmt-grid 1 col */
.fa-fmt-grid { grid-template-columns: 1fr }
/* Cert hero stats stack 1 col */
.cert-hero-stats { flex-direction: column }
.cert-stat-card { width: 100% }
/* Param sections */
.param-card-section { padding: 16px 14px }
.param-section-title { font-size: 14px }
/* Sidebar full width when open */
#sidebar { width: min(280px, 85vw) }
}
/* ===== Touch targets ===== */
@media (max-width: 768px) and (pointer: coarse) {
.btn, button.btn, a.btn { min-height: 40px }
.btn-sm, button.btn-sm, a.btn-sm { min-height: 36px }
.nav-item { min-height: 44px }
.topbar-notif-btn,
.theme-toggle { min-width: 40px; min-height: 40px }
}
/* ====================================================================
SESSION 4 — RESPONSIVE FIXES (consolidate + critical issues)
==================================================================== */
/* ===== MODAL — consolidated mobile rule (overrides all previous) ===== */
@media (max-width: 768px) {
.modal {
/* Reset all conflicting positions/sizes */
position: relative !important;
bottom: auto !important; left: auto !important; right: auto !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
border-radius: 16px 16px 0 0 !important;
/* Use dvh (dynamic viewport height) for iOS Safari compatibility,
fallback to vh on older browsers */
max-height: 92vh;
max-height: 92dvh;
height: auto !important;
overflow-y: auto !important;
box-shadow: 0 -8px 32px rgba(0,0,0,0.18);
}
.modal-overlay {
align-items: flex-end !important;
padding: 0 !important;
}
.modal-body {
padding: 18px !important;
max-height: none !important;
}
.modal-header {
padding: 14px 18px !important;
position: sticky;
top: 0;
background: var(--color-surface);
z-index: 2;
border-bottom: 1px solid var(--color-divider);
}
.modal-footer {
padding: 12px 18px !important;
flex-wrap: wrap; gap: 8px;
position: sticky;
bottom: 0;
background: var(--color-surface);
z-index: 2;
border-top: 1px solid var(--color-divider);
}
.modal-footer .btn { flex: 1; min-width: 0 }
.modal--large { max-width: 100% !important }
}
/* Body scroll lock when a modal is open — JS toggles .modal-open on body */
body.modal-open {
overflow: hidden !important;
position: fixed;
width: 100%;
}
/* ===== CERT — touch fallback (drag&drop doesn't work on touch devices) =====
Show explicit "Archive" button on touch devices; keep drag handle hidden */
.cert-card-tap-archive { display: none }
@media (pointer: coarse) {
.cert-card-drag { display: none !important }
.cert-card[draggable="true"] { cursor: pointer }
.cert-card--pending .cert-card-tap-archive {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px;
border-radius: 8px;
background: rgba(16, 185, 129, 0.12);
color: #059669;
border: none;
cursor: pointer;
flex-shrink: 0;
transition: all 0.15s;
}
.cert-card--pending .cert-card-tap-archive:active {
background: rgba(16, 185, 129, 0.25);
transform: scale(0.92);
}
.cert-card--sent .cert-card-tap-archive { display: none }
}
/* ===== BLOC-NOTES — improved mobile layout < 768px ===== */
@media (max-width: 768px) {
.bn-layout {
grid-template-columns: 1fr;
border-radius: 12px;
min-height: auto;
}
.bn-sidebar {
max-height: 200px;
border-right: none;
border-bottom: 1px solid var(--color-divider);
}
.bn-notes-list { max-height: 140px; overflow-y: auto }
.bn-editor-header {
flex-wrap: wrap; gap: 8px;
padding: 10px 14px;
}
.bn-toolbar {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
flex-wrap: nowrap !important;
padding: 6px 10px;
}
.bn-toolbar > * { flex-shrink: 0 }
.bn-content { padding: 14px !important; min-height: 280px }
.bn-editor-title-input { font-size: 18px !important }
}
/* ===== APPRENANTS LISTS PICKER — mobile rules (was missing) ===== */
@media (max-width: 768px) {
.ap-list-picker { gap: 8px }
.ap-list-picker-item { padding: 12px 14px }
.fa-stag-list { max-height: 220px }
.fa-list-card { padding: 12px 14px; gap: 10px }
.fa-list-card-icon { width: 32px; height: 32px }
.fa-list-card-name { font-size: 12px }
.fa-list-card-meta { font-size: 10px }
.fa-manual-form { padding: 14px }
.fa-manual-row { grid-template-columns: 1fr; gap: 8px }
.fa-import-zone { padding: 24px 16px }
.fa-import-title { font-size: 13px }
.fa-import-sub { font-size: 11px }
}
/* ===== CALENDRIER — month grid horizontal scroll wrapper on mobile ===== */
@media (max-width: 768px) {
.gcal-month-card {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.gcal-month-card > .gcal-month-grid {
min-width: 360px;
}
.gcal-mday {
min-height: 50px;
padding: 3px;
font-size: 10px;
}
.gcal-mday-name { font-size: 10px }
.gcal-mday-ev {
font-size: 9px;
padding: 1px 4px;
}
.gcal-week-grid {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.gcal-week-grid > * { min-width: 70px }
}
/* ===== Modules cards in wizard — handle 768 breakpoint too ===== */
@media (max-width: 768px) {
.mod-cards-grid {
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 10px;
}
.mod-card { padding: 12px 14px }
}
/* ===== Photo crop / profil photo upload — mobile ===== */
@media (max-width: 768px) {
.profil-photo-card {
flex-direction: column; align-items: center;
padding: 18px;
text-align: center;
}
.profil-photo-wrap { width: 120px; height: 120px }
}
/* ===== Highlight card 480px tuning ===== */
@media (max-width: 480px) {
.highlight-card { padding: 18px; min-height: 200px }
.highlight-value { font-size: 28px }
.highlight-label { font-size: 10px }
.highlight-spark-svg { max-height: 100px }
}
/* ====================================================================
SESSION 5 — iOS & RESPONSIVE POLISH + FORMATEUR/ADMIN FIXES
==================================================================== */
/* ===== iOS: prevent auto-zoom on input focus (font-size must be >= 16px) ===== */
@media (max-width: 768px) {
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="time"],
select,
textarea {
font-size: 16px !important;
}
}
/* ===== iOS: use dvh (dynamic viewport height) to avoid bottom bar clipping ===== */
@supports (height: 100dvh) {
body { min-height: 100dvh }
#login-screen { min-height: 100dvh }
.login-right { min-height: 100dvh }
.dashboard-layout { min-height: 100dvh }
}
/* ===== Calendar — fix mois coupés & jours manquants ===== */
@media (max-width: 900px) {
/* Force single column for all month cards */
.gcal-months,
.gcal-layout,
[class*="gcal-month"] {
grid-template-columns: 1fr !important;
}
.gcal-month-card {
min-width: 0;
overflow-x: visible !important;
padding: 14px;
}
.gcal-month-grid {
display: grid !important;
grid-template-columns: repeat(7, 1fr) !important;
gap: 2px;
min-width: 0;
}
.gcal-mday,
.gcal-month-day {
min-width: 0;
min-height: 42px;
padding: 3px 2px;
font-size: 10px;
aspect-ratio: 1;
}
.gcal-week-grid {
min-width: 560px; /* keep week readable, allow h-scroll */
}
.gcal-view-toggle {
width: 100%;
display: flex;
}
.gcal-view-toggle > * { flex: 1 }
}
@media (max-width: 480px) {
.gcal-mday,
.gcal-month-day {
font-size: 9px;
min-height: 36px;
}
.gcal-mday-ev {
font-size: 8px;
padding: 1px 3px;
}
}
/* ===== Admin home — bottom-grid et cards tassées ===== */
@media (max-width: 1200px) {
.bottom-grid {
grid-template-columns: 1fr 1fr !important;
gap: 14px;
}
.bottom-grid > :nth-child(3) {
grid-column: 1 / -1;
max-height: 260px;
}
}
@media (max-width: 900px) {
.bottom-grid {
grid-template-columns: 1fr !important;
}
.bottom-grid > * {
max-height: none !important;
}
.chart-row-3 {
grid-template-columns: 1fr 1fr !important;
}
}
@media (max-width: 640px) {
.chart-row-3 { grid-template-columns: 1fr !important }
}
/* ===== Session detail — cards formateur+apprenants tassées ===== */
@media (max-width: 1024px) {
.adm-detail-grid,
[class*="session-detail"] {
grid-template-columns: 1fr !important;
}
.adm-detail-section { padding: 16px 18px }
.adm-app-row { flex-wrap: wrap; gap: 8px }
.adm-stag-bar { flex-wrap: wrap }
}
/* ===== Tables des sessions — statuts coupés ===== */
@media (max-width: 900px) {
/* Give tables wrapping a scroll container */
.card[style*="overflow-x"],
.data-table-wrap {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
}
.data-table {
min-width: 720px;
font-size: 12px;
}
.data-table th,
.data-table td {
padding: 10px 12px;
white-space: nowrap;
}
/* Status badges don't shrink */
.badge { white-space: nowrap }
}
/* ===== Entreprise detail — session cards tassées ===== */
@media (max-width: 900px) {
.entc-backbar { flex-wrap: wrap; gap: 10px }
/* Session cards on entreprise detail */
.card > .session-card,
.card > [class*="session"] {
flex-wrap: wrap;
}
}
/* ===== Apprenant detail — liste apprenants ne s'affichent pas ===== */
/* Bug probable CSS: .ap-lead-row caché en desktop large */
.ap-leads-list .ap-lead-row,
#ap-leads-list .ap-lead-row {
display: grid !important;
}
/* ===== Param tabs — scroll horizontal visible ===== */
@media (max-width: 900px) {
.param-tabs {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
flex-wrap: nowrap !important;
gap: 4px;
padding: 4px 6px;
scrollbar-width: thin;
}
.param-tab {
flex: 0 0 auto !important;
white-space: nowrap;
padding: 9px 14px;
font-size: 12px;
}
}
/* ===== Formateur home — Prochaines sessions / Documents récents tassés ===== */
/* Force les grids à stack plus tôt */
@media (max-width: 1024px) {
[style*="grid-template-columns:1fr 1fr"][style*="gap:14px"],
[style*="grid-template-columns: 1fr 1fr"][style*="gap:14px"] {
grid-template-columns: 1fr !important;
}
}
/* Truncate long titles instead of wrapping into overlap */
.upcoming-item-title,
.sf-doc-name,
.ms-card-title {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.upcoming-item,
.sf-doc-item {
min-width: 0;
}
.upcoming-item > *,
.sf-doc-item > * {
min-width: 0;
}
/* ===== Drive formateur — boutons + nouveau dossier / importer de même taille ===== */
.drive-header .btn,
.drive-header a.btn,
.drive-actions .btn,
.drive-actions a.btn {
height: 38px !important;
padding: 0 18px !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px;
font-size: 13px !important;
min-height: 38px;
}
/* ===== Session/module detail — bouton retour taille normale ===== */
.page-header > .btn-back,
.page-header button[onclick*="history.back"],
a[href="#mes-sessions"].btn,
a[href="#attestations"].btn {
font-size: 13px !important;
padding: 8px 16px !important;
width: auto !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px;
justify-content: flex-start !important;
}
/* ===== Session create wizard — apprenants picker section ===== */
@media (max-width: 900px) {
.fa-sub-card { padding: 14px }
.fa-sub-head { flex-wrap: wrap; gap: 10px }
.fa-sub-body > * { min-width: 0 }
.fa-search-wrap { width: 100%; max-width: none }
.fa-stag-list { max-height: 260px; overflow-y: auto }
.fa-lists-grid { grid-template-columns: 1fr !important }
.fa-list-card { flex-wrap: wrap; gap: 10px }
.fa-skip-row,
#sc-skip-stag-label { flex-wrap: wrap; width: 100% }
}
/* ====================================================================
BLOC-NOTES — REFONTE RESPONSIVE (session5)
Problème : layout 2 col complètement cassé < 900px
==================================================================== */
@media (max-width: 900px) {
.bn-layout {
display: block !important;
grid-template-columns: none !important;
min-height: auto !important;
border-radius: 12px;
overflow: hidden;
}
.bn-sidebar {
max-height: none !important;
width: 100% !important;
border-right: none !important;
border-bottom: 1px solid var(--color-divider);
display: block;
}
.bn-sidebar-top { padding: 14px }
.bn-notes-list {
max-height: 220px;
overflow-y: auto;
}
.bn-editor {
width: 100%;
min-height: 300px;
}
.bn-editor-header {
flex-wrap: wrap;
gap: 8px;
padding: 12px 14px;
}
.bn-editor-title-input {
width: 100%;
font-size: 18px !important;
}
.bn-header-right {
width: 100%;
justify-content: space-between;
flex-wrap: wrap;
gap: 6px;
}
.bn-toolbar {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
flex-wrap: nowrap !important;
padding: 6px 10px;
scrollbar-width: thin;
}
.bn-toolbar > * { flex-shrink: 0 }
.bn-content {
padding: 16px !important;
min-height: 280px;
max-height: 60vh;
overflow-y: auto;
}
.bn-empty-state { padding: 40px 20px }
.bn-empty-icon { width: 56px; height: 56px }
.bn-empty-title { font-size: 15px }
.bn-sidebar-footer { padding: 10px 14px }
.bn-modal { width: 92%; max-width: 420px }
}
@media (max-width: 480px) {
.bn-notes-list { max-height: 180px }
.bn-note-preview { font-size: 11px }
.bn-tool { padding: 6px 10px !important; font-size: 12px }
.bn-tool-label { display: none }
}
/* ====================================================================
SESSIONS CARDS — Prochaines sessions qui se superposent (formateur home)
==================================================================== */
.sf-upcoming-item,
.upcoming-item {
min-width: 0;
}
.sf-upcoming-item > *,
.upcoming-item > * { min-width: 0 }
.sf-upcoming-title,
.upcoming-item-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sf-upcoming-meta,
.upcoming-item-meta {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ====================================================================
FORMATEUR ACCUEIL — prochaines sessions + documents récents
==================================================================== */
@media (max-width: 1100px) {
/* Row "prochaines sessions | docs récents" (inline style grid) */
[style*="grid-template-columns:1fr 1fr"][style*="gap: 14px"],
[style*="grid-template-columns: 1fr 1fr"][style*="gap: 14px"],
[style*="grid-template-columns:1fr 1fr"][style*="gap:14px"],
[style*="grid-template-columns: 1fr 1fr"][style*="gap:14px"] {
grid-template-columns: 1fr !important;
}
}
/* Bar chart hover tooltip */
.bar-hover-group .bar-tooltip-bg,
.bar-hover-group .bar-tooltip-text { transition: opacity 0.15s }
.bar-hover-group:hover .bar-tooltip-bg,
.bar-hover-group:hover .bar-tooltip-text { opacity: 1 !important }
.bar-hover-group:hover .bar-rect { filter: brightness(1.15) }
.bar-hover-group .bar-hit { cursor: pointer }
/* ===== CADRAGE NOTES — V2 ===== */
.cad-page-header {
position: relative;
max-width: 1080px;
margin: 0 auto 22px;
padding: 22px 0 0;
text-align: center;
}
.cad-back-btn {
position: absolute;
left: 0; top: 22px;
}
.cad-hero {
display: flex; flex-direction: column; align-items: center; gap: 8px;
padding: 8px 16px 0;
}
.cad-hero-title {
font-family: var(--font-display, inherit);
font-size: clamp(1.6rem, 2.6vw, 2rem);
font-weight: 700;
letter-spacing: -0.01em;
margin: 0;
color: #0A1628;
}
[data-theme="dark"] .cad-hero-title { color: #fff }
.cad-hero-sub {
margin: 0;
font-size: 14px; color: #5A6578;
max-width: 540px;
line-height: 1.5;
}
[data-theme="dark"] .cad-hero-sub { color: rgba(255,255,255,0.62) }
.cad-form-v2 {
display: flex; flex-direction: column; gap: 16px;
max-width: 1080px; margin: 0 auto;
padding-bottom: 80px; /* room for sticky footer */
}
/* Numbered card sections */
.cad-card {
background: #fff;
border: 1px solid rgba(13,115,119,0.10);
border-radius: 16px;
/* No overflow:hidden — the entreprise dropdown panel must escape vertically */
box-shadow: 0 2px 14px rgba(10,22,40,0.04);
}
[data-theme="dark"] .cad-card {
background: var(--color-surface);
border-color: rgba(79,209,197,0.14);
}
.cad-card-head {
display: flex; align-items: center; gap: 14px;
padding: 18px 22px;
background: linear-gradient(135deg, rgba(13,115,119,0.04), rgba(13,115,119,0.08));
border-bottom: 1px solid rgba(13,115,119,0.08);
border-radius: 16px 16px 0 0;
}
[data-theme="dark"] .cad-card-head {
background: linear-gradient(135deg, rgba(79,209,197,0.06), rgba(79,209,197,0.12));
border-bottom-color: rgba(79,209,197,0.14);
}
.cad-card-num {
flex-shrink: 0;
width: 32px; height: 32px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
background: linear-gradient(135deg, #0D7377, #0A5C5F);
color: #fff;
font-weight: 700; font-size: 14px;
box-shadow: 0 4px 10px rgba(13,115,119,0.30);
}
.cad-card-num--lock {
background: linear-gradient(135deg, #0D7377, #0A5C5F);
box-shadow: 0 4px 10px rgba(13,115,119,0.30);
}
.cad-card-title-wrap { flex: 1; min-width: 0 }
.cad-card-title {
margin: 0; font-size: 16px; font-weight: 700;
color: #0A1628; line-height: 1.2;
}
[data-theme="dark"] .cad-card-title { color: #fff }
.cad-card-sub {
margin: 2px 0 0; font-size: 12px;
color: #5A6578; line-height: 1.3;
}
[data-theme="dark"] .cad-card-sub { color: rgba(255,255,255,0.62) }
.cad-card-body {
padding: 22px;
}
/* "Internal" card (notes formateur) — same teal palette as other cards */
.cad-card--internal { /* keeps default teal/white styling */ }
/* Inputs */
.cad-grid-2 {
display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.cad-field { display: flex; flex-direction: column; gap: 6px }
.cad-field > label {
font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.06em;
color: #0D7377;
}
[data-theme="dark"] .cad-field > label { color: #4FD1C5 }
.cad-input {
padding: 11px 14px;
border: 1px solid rgba(13,115,119,0.18);
border-radius: 10px;
background: rgba(13,115,119,0.02);
font-size: 14px; font-family: inherit;
color: #0A1628;
transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
width: 100%;
}
.cad-input:hover {
border-color: rgba(13,115,119,0.32);
background: rgba(13,115,119,0.04);
}
.cad-input:focus {
outline: none;
border-color: var(--color-primary);
background: #fff;
box-shadow: 0 0 0 3px rgba(13,115,119,0.12);
}
.cad-textarea { resize: vertical; line-height: 1.5; min-height: 90px }
[data-theme="dark"] .cad-input {
background: rgba(255,255,255,0.04);
border-color: rgba(79,209,197,0.20);
color: #fff;
}
/* Native select — custom chevron + clean look */
select.cad-input {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
cursor: pointer;
padding-right: 40px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 14px;
}
select.cad-input:focus {
background-image: url("data:image/svg+xml;utf8,");
}
select.cad-input option {
padding: 10px;
background: #fff;
color: #0A1628;
font-size: 14px;
}
[data-theme="dark"] select.cad-input {
background-image: url("data:image/svg+xml;utf8,");
}
[data-theme="dark"] select.cad-input option {
background: var(--color-surface);
color: #fff;
}
/* Date input — custom calendar icon hint */
input[type="date"].cad-input {
cursor: pointer;
position: relative;
}
input[type="date"].cad-input::-webkit-calendar-picker-indicator {
cursor: pointer;
filter: invert(36%) sepia(31%) saturate(1392%) hue-rotate(140deg) brightness(94%) contrast(101%);
opacity: 0.85;
}
input[type="date"].cad-input::-webkit-calendar-picker-indicator:hover { opacity: 1 }
/* Custom entreprise dropdown */
.cad-ent-dropdown { position: relative; width: 100% }
.cad-ent-trigger {
width: 100%;
display: flex; align-items: center; gap: 10px;
padding: 11px 14px;
border: 1px solid rgba(13,115,119,0.18);
border-radius: 10px;
background: rgba(13,115,119,0.02);
font-family: inherit; font-size: 14px;
color: #0A1628;
cursor: pointer;
transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.cad-ent-trigger:hover {
border-color: rgba(13,115,119,0.32);
background: rgba(13,115,119,0.04);
}
.cad-ent-dropdown.is-open .cad-ent-trigger {
border-color: var(--color-primary);
background: #fff;
box-shadow: 0 0 0 3px rgba(13,115,119,0.12);
}
.cad-ent-trigger-icon {
flex-shrink: 0;
width: 28px; height: 28px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 7px;
background: rgba(13,115,119,0.10);
color: var(--color-primary);
}
.cad-ent-trigger-text {
flex: 1; min-width: 0;
text-align: left;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cad-ent-placeholder { color: #9CA3AF }
.cad-ent-trigger-chevron {
flex-shrink: 0;
color: var(--color-primary);
transition: transform 0.2s;
}
.cad-ent-dropdown.is-open .cad-ent-trigger-chevron { transform: rotate(180deg) }
.cad-ent-panel {
position: absolute; left: 0; right: 0; top: calc(100% + 6px);
z-index: 60;
background: #fff;
border: 1px solid rgba(13,115,119,0.18);
border-radius: 12px;
box-shadow: 0 20px 48px rgba(10,22,40,0.18), 0 6px 16px rgba(10,22,40,0.08);
max-height: 380px;
display: flex; flex-direction: column;
overflow: hidden;
animation: cadEntPanelIn 0.18s ease;
}
.cad-ent-panel[hidden] { display: none }
@keyframes cadEntPanelIn {
from { opacity: 0; transform: translateY(-4px) }
to { opacity: 1; transform: translateY(0) }
}
.cad-ent-search-wrap {
display: flex; align-items: center; gap: 8px;
padding: 10px 12px;
border-bottom: 1px solid rgba(13,115,119,0.10);
background: rgba(13,115,119,0.03);
}
.cad-ent-search {
flex: 1; min-width: 0;
border: none; outline: none;
background: transparent;
font: inherit; font-size: 13px;
color: #0A1628;
}
.cad-ent-search::placeholder { color: #9CA3AF }
.cad-ent-list {
margin: 0; padding: 6px;
list-style: none;
overflow-y: auto;
flex: 1;
}
.cad-ent-option {
display: flex; align-items: center; gap: 10px;
padding: 8px 10px;
border-radius: 8px;
cursor: pointer;
font-size: 13px; color: #0A1628;
transition: background 0.12s;
}
.cad-ent-option:hover { background: rgba(13,115,119,0.08) }
.cad-ent-option.is-selected {
background: rgba(13,115,119,0.12);
color: var(--color-primary);
font-weight: 600;
}
.cad-ent-avatar {
flex-shrink: 0;
width: 26px; height: 26px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 7px;
background: linear-gradient(135deg, #14B8A6, #0D7377);
color: #fff;
font-size: 11px; font-weight: 700;
letter-spacing: 0.02em;
}
.cad-ent-name {
flex: 1; min-width: 0;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-theme="dark"] .cad-ent-trigger {
background: rgba(255,255,255,0.04);
border-color: rgba(79,209,197,0.20);
color: #fff;
}
[data-theme="dark"] .cad-ent-panel {
background: var(--color-surface);
border-color: rgba(79,209,197,0.20);
}
[data-theme="dark"] .cad-ent-search-wrap {
background: rgba(79,209,197,0.06);
border-bottom-color: rgba(79,209,197,0.14);
}
[data-theme="dark"] .cad-ent-search { color: #fff }
[data-theme="dark"] .cad-ent-option { color: #fff }
[data-theme="dark"] .cad-ent-option:hover { background: rgba(79,209,197,0.10) }
[data-theme="dark"] .cad-ent-option.is-selected { background: rgba(79,209,197,0.18); color: #4FD1C5 }
/* Type-of-call cards */
.cad-radio-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.cad-radio-card {
position: relative;
display: flex; align-items: center; gap: 12px;
padding: 14px 16px;
border: 1px solid rgba(13,115,119,0.16);
border-radius: 12px;
background: #fff;
cursor: pointer;
font-size: 13px; color: #0A1628;
transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, transform 0.2s;
}
.cad-radio-card input[type="radio"] {
position: absolute; opacity: 0; pointer-events: none;
}
.cad-radio-card:hover {
border-color: rgba(13,115,119,0.35);
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(13,115,119,0.10);
}
.cad-radio-card:has(input:checked) {
border-color: var(--color-primary);
background: linear-gradient(135deg, rgba(13,115,119,0.10), rgba(13,115,119,0.04));
box-shadow: 0 6px 18px rgba(13,115,119,0.18);
}
.cad-radio-card .cad-radio-icon {
width: 36px; height: 36px;
flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 10px;
background: rgba(13,115,119,0.10);
color: var(--color-primary);
}
.cad-radio-card .cad-radio-icon svg { width: 18px; height: 18px }
.cad-radio-card:has(input:checked) .cad-radio-icon {
background: var(--color-primary); color: #fff;
}
.cad-radio-body { display: flex; flex-direction: column; gap: 1px }
.cad-radio-body strong { font-size: 13px; font-weight: 600; color: #0A1628 }
.cad-radio-body span { font-size: 11px; color: #5A6578 }
[data-theme="dark"] .cad-radio-card { background: var(--color-surface); border-color: rgba(79,209,197,0.18) }
[data-theme="dark"] .cad-radio-body strong { color: #fff }
[data-theme="dark"] .cad-radio-body span { color: rgba(255,255,255,0.55) }
.cad-radio-card .cad-radio-check {
position: absolute; top: 8px; right: 8px;
width: 18px; height: 18px;
border-radius: 50%;
background: var(--color-primary); color: #fff;
display: inline-flex; align-items: center; justify-content: center;
opacity: 0; transform: scale(0.7);
transition: opacity 0.2s, transform 0.2s;
}
.cad-radio-card:has(input:checked) .cad-radio-check { opacity: 1; transform: scale(1) }
/* Niveau technique cards (4 cols + bars) */
.cad-niv-grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
margin-top: 6px;
}
.cad-niv-card {
position: relative;
display: flex; flex-direction: column; gap: 10px;
padding: 14px 16px;
border: 1px solid rgba(13,115,119,0.16);
border-radius: 12px;
background: #fff;
cursor: pointer;
transition: border-color 0.2s, background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.cad-niv-card input[type="radio"] {
position: absolute; opacity: 0; pointer-events: none;
}
.cad-niv-card:hover {
border-color: rgba(13,115,119,0.35);
transform: translateY(-1px);
}
.cad-niv-card:has(input:checked) {
border-color: var(--color-primary);
background: linear-gradient(135deg, rgba(13,115,119,0.08), rgba(232,133,74,0.04));
box-shadow: 0 6px 18px rgba(13,115,119,0.16);
}
.cad-niv-bars {
display: inline-flex; gap: 3px; height: 14px; align-items: end;
}
.cad-niv-bar {
width: 7px;
border-radius: 2px;
background: rgba(13,115,119,0.14);
transition: background 0.2s;
}
.cad-niv-bar:nth-child(1) { height: 30% }
.cad-niv-bar:nth-child(2) { height: 55% }
.cad-niv-bar:nth-child(3) { height: 80% }
.cad-niv-bar:nth-child(4) { height: 100% }
.cad-niv-bar--on {
background: linear-gradient(180deg, #0fb8bd, #0D7377);
}
.cad-niv-card:has(input:checked) .cad-niv-bar--on {
background: linear-gradient(180deg, #14B8A6, #0D7377);
}
.cad-niv-text { display: flex; flex-direction: column; gap: 1px }
.cad-niv-text strong { font-size: 13px; font-weight: 600; color: #0A1628 }
.cad-niv-text span { font-size: 11px; color: #5A6578; line-height: 1.3 }
[data-theme="dark"] .cad-niv-card { background: var(--color-surface); border-color: rgba(79,209,197,0.18) }
[data-theme="dark"] .cad-niv-text strong { color: #fff }
[data-theme="dark"] .cad-niv-text span { color: rgba(255,255,255,0.55) }
.cad-niv-clear-wrap { margin-top: 10px }
.cad-niv-clear {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 10px;
border-radius: 6px;
font-size: 12px; color: #5A6578;
cursor: pointer;
transition: background 0.15s;
}
.cad-niv-clear:hover { background: rgba(13,115,119,0.05) }
.cad-niv-clear input[type="radio"] { accent-color: #0D7377 }
/* Modules — 3 cols by level with distinct accents */
.cad-modules-total {
flex-shrink: 0;
font-size: 12px; font-weight: 600;
color: var(--color-primary);
padding: 4px 10px;
background: rgba(13,115,119,0.10);
border-radius: 999px;
}
.cad-modules-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.cad-modules-col {
background: rgba(13,115,119,0.03);
border: 1px solid rgba(13,115,119,0.10);
border-radius: 12px;
padding: 14px;
position: relative;
}
.cad-modules-col::before {
content: "";
position: absolute; top: 0; left: 14px; right: 14px;
height: 3px;
border-radius: 0 0 4px 4px;
background: linear-gradient(90deg, #0D7377, #0fb8bd);
}
.cad-modules-col-head {
display: flex; align-items: center; gap: 10px;
margin-bottom: 12px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(13,115,119,0.08);
}
.cad-modules-col-num {
width: 28px; height: 28px;
flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
background: linear-gradient(135deg, #0D7377, #0A5C5F);
color: #fff;
font-size: 13px; font-weight: 700;
box-shadow: 0 2px 6px rgba(13,115,119,0.30);
}
.cad-modules-col-titles { flex: 1; min-width: 0 }
.cad-modules-col-titles strong {
display: block; font-size: 11px; font-weight: 700;
letter-spacing: 0.05em; text-transform: uppercase;
color: var(--color-primary);
}
.cad-modules-col-titles span {
display: block; font-size: 13px; font-weight: 600; color: #0A1628;
margin-top: 2px;
}
[data-theme="dark"] .cad-modules-col-titles span { color: #fff }
.cad-modules-col-count {
flex-shrink: 0;
padding: 2px 8px;
border-radius: 999px;
font-size: 11px; font-weight: 600;
background: rgba(13,115,119,0.10);
color: var(--color-primary);
}
.cad-module-row {
display: flex; align-items: center; gap: 10px;
padding: 8px 10px;
border-radius: 7px;
font-size: 13px; color: #0A1628;
cursor: pointer;
transition: background 0.15s;
}
.cad-module-row:hover { background: rgba(13,115,119,0.05) }
.cad-module-row input[type="checkbox"] {
position: absolute; opacity: 0; pointer-events: none;
}
.cad-module-check {
flex-shrink: 0;
width: 18px; height: 18px;
border: 1.5px solid rgba(13,115,119,0.30);
border-radius: 5px;
background: #fff;
display: inline-flex; align-items: center; justify-content: center;
color: transparent;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.cad-module-row:has(input:checked) {
background: rgba(13,115,119,0.08);
}
.cad-module-row:has(input:checked) .cad-module-check {
background: var(--color-primary);
border-color: var(--color-primary);
color: #fff;
}
.cad-module-title { flex: 1; min-width: 0; line-height: 1.35 }
.cad-modules-empty {
margin: 0; padding: 8px 10px;
font-size: 12px; color: #9CA3AF; font-style: italic;
}
[data-theme="dark"] .cad-modules-col {
background: rgba(255,255,255,0.03);
border-color: rgba(79,209,197,0.14);
}
[data-theme="dark"] .cad-modules-col-head { border-bottom-color: rgba(79,209,197,0.10) }
/* ===== Cadrage success popup ===== */
.cad-success-overlay { backdrop-filter: blur(4px) }
.cad-success-popup {
max-width: 460px;
text-align: center;
padding: 32px 28px 24px;
border-radius: 18px;
background: #fff;
box-shadow: 0 24px 64px rgba(10,22,40,0.20), 0 8px 18px rgba(10,22,40,0.10);
animation: cadPopupIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
[data-theme="dark"] .cad-success-popup { background: var(--color-surface) }
@keyframes cadPopupIn {
from { opacity: 0; transform: translateY(20px) scale(0.92) }
to { opacity: 1; transform: translateY(0) scale(1) }
}
.cad-success-icon-wrap {
position: relative;
width: 96px; height: 96px;
margin: 0 auto 20px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
background: radial-gradient(circle at center, rgba(13,115,119,0.14), rgba(13,115,119,0.04) 70%);
}
.cad-success-pulse {
position: absolute; inset: 0;
border-radius: 50%;
background: rgba(13,115,119,0.20);
animation: cadPulse 1.4s ease-out;
pointer-events: none;
}
@keyframes cadPulse {
0% { transform: scale(0.6); opacity: 1 }
100% { transform: scale(1.6); opacity: 0 }
}
.cad-success-check { z-index: 1 }
.cad-success-circle {
stroke-dasharray: 145;
stroke-dashoffset: 145;
animation: cadCircleDraw 0.55s ease-out 0.1s forwards;
}
.cad-success-tick {
stroke-dasharray: 50;
stroke-dashoffset: 50;
animation: cadTickDraw 0.45s ease-out 0.55s forwards;
}
@keyframes cadCircleDraw { to { stroke-dashoffset: 0 } }
@keyframes cadTickDraw { to { stroke-dashoffset: 0 } }
.cad-success-title {
margin: 0 0 8px;
font-family: var(--font-display, inherit);
font-size: 22px; font-weight: 700;
color: #0A1628;
}
[data-theme="dark"] .cad-success-title { color: #fff }
.cad-success-subtitle {
margin: 0 0 16px;
font-size: 14px; color: #5A6578; line-height: 1.5;
}
[data-theme="dark"] .cad-success-subtitle { color: rgba(255,255,255,0.62) }
.cad-success-summary {
margin: 0 auto 22px;
padding: 12px 16px;
border-radius: 10px;
background: linear-gradient(135deg, rgba(13,115,119,0.06), rgba(13,115,119,0.10));
border: 1px solid rgba(13,115,119,0.14);
font-size: 13px; color: #0A1628;
line-height: 1.5;
}
[data-theme="dark"] .cad-success-summary {
background: rgba(79,209,197,0.08);
border-color: rgba(79,209,197,0.18);
color: #fff;
}
.cad-success-summary strong { color: var(--color-primary) }
.cad-success-actions {
display: flex; gap: 10px;
}
.cad-success-actions .btn { padding: 11px 16px; font-size: 13px }
/* ===== Cadrage delete confirmation popup ===== */
.cad-delete-overlay { backdrop-filter: blur(4px) }
.cad-delete-popup {
max-width: 460px;
text-align: center;
padding: 32px 28px 24px;
border-radius: 18px;
background: #fff;
box-shadow: 0 24px 64px rgba(10,22,40,0.20), 0 8px 18px rgba(10,22,40,0.10);
animation: cadPopupIn 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
[data-theme="dark"] .cad-delete-popup { background: var(--color-surface) }
.cad-delete-icon-wrap {
width: 76px; height: 76px;
margin: 0 auto 18px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
background: radial-gradient(circle at center, rgba(220,38,38,0.16), rgba(220,38,38,0.04) 70%);
color: #DC2626;
position: relative;
}
.cad-delete-icon-wrap::after {
content: "";
position: absolute; inset: 0;
border-radius: 50%;
background: rgba(220,38,38,0.20);
animation: cadPulseRed 1.4s ease-out;
pointer-events: none;
}
@keyframes cadPulseRed {
0% { transform: scale(0.7); opacity: 1 }
100% { transform: scale(1.5); opacity: 0 }
}
.cad-delete-title {
margin: 0 0 8px;
font-family: var(--font-display, inherit);
font-size: 20px; font-weight: 700;
color: #0A1628;
}
[data-theme="dark"] .cad-delete-title { color: #fff }
.cad-delete-subtitle {
margin: 0 0 16px;
font-size: 13px; color: #5A6578; line-height: 1.5;
}
.cad-delete-subtitle strong { color: #DC2626 }
[data-theme="dark"] .cad-delete-subtitle { color: rgba(255,255,255,0.62) }
.cad-delete-summary {
margin: 0 0 18px;
padding: 12px 16px;
border-radius: 10px;
background: rgba(13,115,119,0.04);
border: 1px solid rgba(13,115,119,0.10);
text-align: left;
display: flex; flex-direction: column; gap: 6px;
}
[data-theme="dark"] .cad-delete-summary {
background: rgba(255,255,255,0.04);
border-color: rgba(79,209,197,0.16);
}
.cad-delete-summary-row {
display: flex; align-items: baseline; justify-content: space-between;
gap: 12px;
font-size: 12px;
}
.cad-delete-summary-row span {
color: #5A6578;
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 600;
font-size: 11px;
}
.cad-delete-summary-row strong {
color: #0A1628;
font-weight: 600; font-size: 13px;
text-align: right;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
max-width: 60%;
}
[data-theme="dark"] .cad-delete-summary-row strong { color: #fff }
.cad-delete-actions {
display: flex; gap: 10px;
}
.cad-delete-actions .btn { padding: 11px 16px; font-size: 13px }
.cad-delete-confirm-btn {
background: linear-gradient(135deg, #DC2626, #B91C1C);
color: #fff;
border: none;
font-weight: 600;
transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
}
.cad-delete-confirm-btn:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(220,38,38,0.30);
}
.cad-delete-confirm-btn:disabled {
opacity: 0.7; cursor: wait;
}
.cad-delete-spinner {
display: inline-block;
width: 12px; height: 12px;
border: 2px solid rgba(255,255,255,0.40);
border-top-color: #fff;
border-radius: 50%;
animation: cadDelSpin 0.7s linear infinite;
vertical-align: middle;
margin-right: 6px;
}
@keyframes cadDelSpin { to { transform: rotate(360deg) } }
/* Sticky form actions footer */
.cad-form-actions {
display: flex; align-items: center; justify-content: space-between;
margin-top: 18px;
padding: 14px 22px;
border-radius: 14px;
background: #fff;
border: 1px solid rgba(13,115,119,0.10);
box-shadow: 0 4px 18px rgba(10,22,40,0.06);
}
.cad-form-actions--sticky {
position: sticky; bottom: 12px;
z-index: 5;
}
[data-theme="dark"] .cad-form-actions { background: var(--color-surface); border-color: rgba(79,209,197,0.18) }
/* List view header (centered) */
.cad-list-header {
text-align: center;
max-width: 760px;
margin: 12px auto 18px;
padding: 0 16px;
}
.cad-list-title {
margin: 0 0 6px;
font-family: var(--font-display, inherit);
font-size: clamp(1.6rem, 2.6vw, 2rem);
font-weight: 700;
letter-spacing: -0.01em;
color: #0A1628;
}
[data-theme="dark"] .cad-list-title { color: #fff }
.cad-list-sub {
margin: 0;
font-size: 14px; color: #5A6578;
line-height: 1.5;
}
[data-theme="dark"] .cad-list-sub { color: rgba(255,255,255,0.62) }
/* Filters */
.cad-list-filters {
display: flex; align-items: center; gap: 12px;
flex-wrap: wrap;
max-width: 980px; margin: 0 auto 16px;
padding: 0 4px;
}
.cad-search-wrap {
flex: 1; min-width: 240px;
position: relative;
display: flex; align-items: center; gap: 8px;
padding: 10px 14px;
border: 1px solid rgba(13,115,119,0.16);
border-radius: 10px;
background: #fff;
transition: border-color 0.2s, box-shadow 0.2s;
}
.cad-search-wrap:focus-within {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(13,115,119,0.12);
}
.cad-search-wrap svg { flex-shrink: 0; color: #9CA3AF }
.cad-search-input {
flex: 1; min-width: 0;
border: none; outline: none;
background: transparent;
font: inherit; font-size: 13px;
color: #0A1628;
}
.cad-search-input::placeholder { color: #9CA3AF }
[data-theme="dark"] .cad-search-wrap { background: var(--color-surface); border-color: rgba(79,209,197,0.18) }
[data-theme="dark"] .cad-search-input { color: #fff }
.cad-filter-pills {
display: flex; gap: 6px;
flex-shrink: 0;
}
.cad-filter-pill {
padding: 8px 14px;
border: 1px solid rgba(13,115,119,0.16);
border-radius: 8px;
background: #fff;
font-family: inherit; font-size: 12px; font-weight: 600;
color: #5A6578;
cursor: pointer;
transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
}
.cad-filter-pill:hover {
border-color: rgba(13,115,119,0.32);
color: #0A1628;
}
.cad-filter-pill.is-active {
border-color: var(--color-primary);
background: linear-gradient(135deg, var(--color-primary), #0A5C5F);
color: #fff;
box-shadow: 0 4px 10px rgba(13,115,119,0.20);
}
[data-theme="dark"] .cad-filter-pill { background: var(--color-surface); border-color: rgba(79,209,197,0.18); color: rgba(255,255,255,0.62) }
[data-theme="dark"] .cad-filter-pill:hover { color: #fff }
/* List view — grouped by entreprise with timeline thread */
.cad-list {
display: flex; flex-direction: column; gap: 18px;
max-width: 980px; margin: 0 auto;
}
.cad-list-empty {
text-align: center; padding: 32px 16px;
color: #9CA3AF;
}
.cad-list-empty svg { display: block; margin: 0 auto 10px }
.cad-list-empty p { margin: 0; font-size: 14px }
/* Bottom CTA — fixed, centered within the main content area (not viewport) */
.cad-list { padding-bottom: 96px } /* room so last notes aren't covered by fixed CTA */
.cad-list-cta-wrap {
position: fixed;
left: var(--sidebar-width);
right: 0;
bottom: 24px;
display: flex; justify-content: center;
z-index: 50;
pointer-events: none; /* let clicks reach only the button itself */
}
@media (max-width: 768px) {
.cad-list-cta-wrap { left: 0 }
}
.cad-list-cta {
pointer-events: auto;
display: inline-flex; align-items: center; gap: 8px;
padding: 14px 28px !important;
font-size: 14px; font-weight: 600;
border-radius: 999px !important;
background: linear-gradient(135deg, #0fb8bd, #0D7377) !important;
color: #fff !important;
box-shadow: 0 12px 32px rgba(13,115,119,0.30), 0 4px 10px rgba(10,22,40,0.10);
transition: transform 0.2s, box-shadow 0.2s;
}
.cad-list-cta:hover {
transform: translateY(-2px);
box-shadow: 0 16px 40px rgba(13,115,119,0.40), 0 6px 14px rgba(10,22,40,0.14);
}
.cad-list-cta svg { flex-shrink: 0 }
.cad-group {
background: #fff;
border: 1px solid rgba(13,115,119,0.12);
border-radius: 16px;
box-shadow: 0 2px 14px rgba(10,22,40,0.04);
overflow: hidden;
}
[data-theme="dark"] .cad-group { background: var(--color-surface); border-color: rgba(79,209,197,0.16) }
.cad-group-head {
display: flex; align-items: center; justify-content: space-between;
gap: 14px;
padding: 14px 18px;
background: linear-gradient(135deg, rgba(13,115,119,0.05), rgba(13,115,119,0.10));
border-bottom: 1px solid rgba(13,115,119,0.10);
}
[data-theme="dark"] .cad-group-head {
background: linear-gradient(135deg, rgba(79,209,197,0.06), rgba(79,209,197,0.12));
border-bottom-color: rgba(79,209,197,0.14);
}
.cad-group-ent {
display: flex; align-items: center; gap: 12px;
text-decoration: none;
color: inherit;
flex: 1; min-width: 0;
}
.cad-group-avatar {
flex-shrink: 0;
width: 38px; height: 38px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 10px;
background: linear-gradient(135deg, #14B8A6, #0D7377);
color: #fff;
font-weight: 700; font-size: 13px;
letter-spacing: 0.02em;
box-shadow: 0 4px 10px rgba(13,115,119,0.30);
}
.cad-group-titles { display: flex; flex-direction: column; min-width: 0 }
.cad-group-titles strong {
display: block; font-size: 15px; font-weight: 700;
color: #0A1628; line-height: 1.2;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-theme="dark"] .cad-group-titles strong { color: #fff }
.cad-group-titles span {
display: block; font-size: 11px; color: #5A6578;
margin-top: 2px;
}
[data-theme="dark"] .cad-group-titles span { color: rgba(255,255,255,0.55) }
.cad-group-ent:hover .cad-group-titles strong { color: var(--color-primary) }
.cad-group-actions {
display: flex; align-items: center; gap: 8px;
flex-shrink: 0;
}
.cad-group-count {
padding: 3px 9px;
border-radius: 999px;
background: rgba(13,115,119,0.12);
color: var(--color-primary);
font-size: 11px; font-weight: 600;
}
.cad-group-add {
width: 30px; height: 30px;
padding: 0 !important;
display: inline-flex; align-items: center; justify-content: center;
font-size: 16px; font-weight: 600;
line-height: 1;
}
/* Notes thread inside a group — connected with vertical line */
.cad-group-notes {
padding: 10px 18px 14px;
position: relative;
}
.cad-note-card {
position: relative;
display: flex; align-items: center; gap: 14px;
padding: 14px 14px 14px 32px;
text-decoration: none;
color: inherit;
border-radius: 0;
transition: background 0.15s;
}
.cad-note-card + .cad-note-card { /* spacing handled by thread */ }
.cad-note-card:hover { background: rgba(13,115,119,0.04) }
/* Vertical thread line — shown on every note */
.cad-note-thread {
position: absolute;
left: 14px; top: 0; bottom: 0;
width: 2px;
background: linear-gradient(180deg, rgba(13,115,119,0.16), rgba(13,115,119,0.32));
}
.cad-note-card:first-child .cad-note-thread { top: 14px }
.cad-note-card:last-child .cad-note-thread { bottom: calc(100% - 22px) }
/* Single-note groups: no thread visible */
.cad-group-notes .cad-note-card:only-child .cad-note-thread { display: none }
.cad-group-notes .cad-note-card:only-child { padding-left: 14px }
.cad-group-notes .cad-note-card:only-child .cad-note-dot { display: none }
.cad-note-dot {
position: absolute;
left: 9px; top: 22px;
width: 12px; height: 12px;
border-radius: 50%;
background: var(--color-primary);
border: 3px solid #fff;
box-shadow: 0 0 0 1px rgba(13,115,119,0.30);
}
[data-theme="dark"] .cad-note-dot { border-color: var(--color-surface) }
.cad-note-body {
flex: 1; min-width: 0;
display: flex; flex-direction: column; gap: 6px;
}
.cad-note-head {
display: flex; align-items: center; gap: 10px;
flex-wrap: wrap;
}
.cad-note-date {
font-size: 13px; font-weight: 700;
color: #0A1628;
}
[data-theme="dark"] .cad-note-date { color: #fff }
.cad-note-author {
font-size: 11px; color: #5A6578;
}
[data-theme="dark"] .cad-note-author { color: rgba(255,255,255,0.55) }
.cad-note-preview {
margin: 0;
font-size: 13px; color: #4A5568;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
[data-theme="dark"] .cad-note-preview { color: rgba(255,255,255,0.72) }
.cad-note-preview--empty { color: #9CA3AF; font-style: italic }
.cad-note-meta {
display: flex; align-items: center; gap: 12px;
flex-wrap: wrap;
margin-top: 2px;
}
.cad-list-meta-bit {
display: inline-flex; align-items: center; gap: 4px;
font-size: 11px; color: #5A6578;
}
[data-theme="dark"] .cad-list-meta-bit { color: rgba(255,255,255,0.55) }
.cad-list-meta-bit svg { color: var(--color-primary) }
.cad-note-arrow {
flex-shrink: 0;
width: 28px; height: 28px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
background: rgba(13,115,119,0.06);
color: var(--color-primary);
opacity: 0;
transform: translateX(-6px);
transition: opacity 0.2s, transform 0.2s;
}
.cad-note-card:hover .cad-note-arrow {
opacity: 1;
transform: translateX(0);
}
.cadrage-type-pill {
display: inline-flex; align-items: center;
padding: 3px 9px; border-radius: 6px;
font-size: 11px; font-weight: 600;
background: rgba(13,115,119,0.10); color: #0D7377;
}
.cadrage-type-cadrage { background: rgba(13,115,119,0.10); color: #0D7377 }
.cadrage-type-suivi { background: rgba(99,102,241,0.12); color: #4338CA }
.cadrage-type-bilan { background: rgba(234,88,12,0.12); color: #9A3412 }
@media (max-width: 768px) {
.cad-modules-grid { grid-template-columns: 1fr }
.cad-radio-grid { grid-template-columns: 1fr }
.cad-form-actions { flex-direction: column-reverse; gap: 10px; align-items: stretch }
}
/* Section "Notes de cadrage" dans la fiche entreprise */
.ent-cadrage-section {
margin-top: 24px;
}
.ent-cadrage-list {
display: flex; flex-direction: column; gap: 10px;
}
.ent-cadrage-item {
border: 1px solid rgba(13,115,119,0.14);
border-radius: 10px;
background: #fff;
overflow: hidden;
}
.ent-cadrage-head {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; padding: 12px 14px;
cursor: pointer;
user-select: none;
background: rgba(13,115,119,0.03);
transition: background 0.15s;
}
.ent-cadrage-head:hover { background: rgba(13,115,119,0.06) }
.ent-cadrage-head-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0 }
.ent-cadrage-date {
font-size: 13px; font-weight: 700; color: #0A1628;
white-space: nowrap;
}
.ent-cadrage-meta {
font-size: 12px; color: #5A6578;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ent-cadrage-toggle {
width: 24px; height: 24px;
display: inline-flex; align-items: center; justify-content: center;
color: #5A6578;
transition: transform 0.2s;
}
.ent-cadrage-item.is-open .ent-cadrage-toggle { transform: rotate(180deg) }
.ent-cadrage-body {
padding: 14px 16px 16px;
border-top: 1px solid rgba(13,115,119,0.10);
display: none;
}
.ent-cadrage-item.is-open .ent-cadrage-body { display: block }
.ent-cadrage-field { margin-bottom: 12px }
.ent-cadrage-field:last-child { margin-bottom: 0 }
.ent-cadrage-field-label {
display: block;
font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
text-transform: uppercase; color: #0D7377;
margin-bottom: 4px;
}
.ent-cadrage-field-value {
font-size: 13px; color: #0A1628; line-height: 1.5;
white-space: pre-wrap;
}
.ent-cadrage-modules {
display: flex; flex-wrap: wrap; gap: 6px;
}
.ent-cadrage-module-chip {
display: inline-flex; align-items: center;
padding: 3px 9px; border-radius: 6px;
background: rgba(13,115,119,0.08); color: #0D7377;
font-size: 12px; font-weight: 500;
}
[data-theme="dark"] .ent-cadrage-item { background: var(--color-surface); border-color: rgba(79,209,197,0.18) }
[data-theme="dark"] .ent-cadrage-head { background: rgba(79,209,197,0.06) }
[data-theme="dark"] .ent-cadrage-head:hover { background: rgba(79,209,197,0.10) }
[data-theme="dark"] .cad-radio-card,
[data-theme="dark"] .cad-modules-col { background: rgba(79,209,197,0.04); border-color: rgba(79,209,197,0.16) }