/* Fichier: eduplatform/css/style.css - Version modernisée, alignée sur le design EduFormation */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700;800&display=swap'); /* ============================================================ SYSTÈME DE THÈMES Les noms de variables (--violet-900, --gold, etc.) restent identiques quel que soit le thème actif, pour qu'aucune des autres règles de ce fichier n'ait besoin d'être modifiée — seule leur VALEUR change selon [data-theme] / [data-mode] sur la balise . Un thème = une palette d'accent + une teinte dorée assortie ; le mode sombre ajuste ink/paper/line/muted et assombrit légèrement les teintes d'accent trop vives. ============================================================ */ /* --- Violet (par défaut) --- */ :root, [data-theme="violet"] { --violet-900: #2E1B45; --violet-800: #4A2C71; --violet-600: #6B3FA0; --violet-500: #8A5FC2; --violet-300: #B79AE0; --violet-100: #F1EAFA; --violet-050: #F8F5FC; --gold: #C49A3C; --gold-light: #E8D4A0; } /* --- Bleu océan --- */ [data-theme="bleu"] { --violet-900: #0F2A4A; --violet-800: #1A4A7A; --violet-600: #2166B5; --violet-500: #4A8FD6; --violet-300: #8FBEEA; --violet-100: #E4F0FB; --violet-050: #F4F9FE; --gold: #2CA6A4; --gold-light: #A9DEDD; } /* --- Émeraude --- */ [data-theme="emeraude"] { --violet-900: #0F3D2E; --violet-800: #166847; --violet-600: #1E9160; --violet-500: #3DB57F; --violet-300: #8ED9B3; --violet-100: #E3F6EC; --violet-050: #F3FBF6; --gold: #C9A227; --gold-light: #E9D583; } /* --- Corail --- */ [data-theme="corail"] { --violet-900: #5C1A1A; --violet-800: #8C2C2C; --violet-600: #C0392B; --violet-500: #DD6B55; --violet-300: #F0A898; --violet-100: #FCE9E4; --violet-050: #FEF6F4; --gold: #3A7D7A; --gold-light: #A8D4D2; } /* --- Ardoise --- */ [data-theme="ardoise"] { --violet-900: #1E2530; --violet-800: #2E3A4C; --violet-600: #475569; --violet-500: #64748B; --violet-300: #B0BAC7; --violet-100: #EBEEF2; --violet-050: #F7F8FA; --gold: #D4A24C; --gold-light: #EED6A8; } /* --- Tokens communs à tous les thèmes, en mode clair --- */ :root { --ink: #15101B; --ink-soft: #241A30; --paper: #FBF9FC; --line: #E6DEF0; --muted: #7A7086; --success: #2F7A4D; --success-bg: #E6F2EB; --error: #B8402F; --error-bg: #FBEAE7; --warning: #B8842A; --warning-bg: #FBF1E1; --card-bg: #FFFFFF; --card-shadow: rgba(46, 27, 69, 0.06); } /* --- Mode sombre : mêmes accents de thème, tokens de base inversés --- Un peu plus clairs/saturés que leur équivalent clair pour rester lisibles sur fond sombre (--violet-500/300 servent de repère visuel principal à la place de --violet-900/800 dans beaucoup de contextes). */ [data-mode="dark"] { --ink: #F1EEF5; --ink-soft: #E4DEEC; --paper: #17131D; --line: #362C44; --muted: #A79DB4; --success: #5FCB8C; --success-bg: #163524; --error: #E8776A; --error-bg: #3A1B18; --warning: #E0B15C; --warning-bg: #3A2E14; --card-bg: #221C2C; --card-shadow: rgba(0, 0, 0, 0.35); } /* violet-050/100 servent de "fonds teintés clairs" dans beaucoup d'endroits (survol de menu, badges, bandeaux) — en mode sombre ils doivent devenir des teintes sombres de la couleur du thème plutôt que rester clairs, sous peine de bandeaux blancs incongrus sur fond sombre (menu latéral notamment). Une variante par thème, pour rester dans sa teinte propre. */ [data-theme="violet"][data-mode="dark"] { --violet-050: #241C30; --violet-100: #2E2440; } [data-theme="bleu"][data-mode="dark"] { --violet-050: #16232F; --violet-100: #1C3040; } [data-theme="emeraude"][data-mode="dark"] { --violet-050: #152A20; --violet-100: #1B3828; } [data-theme="corail"][data-mode="dark"] { --violet-050: #2C1815; --violet-100: #3A201C; } [data-theme="ardoise"][data-mode="dark"] { --violet-050: #232A35; --violet-100: #2C3542; } a { text-decoration: none; } /* --- 0. RESET ET BASE --- */ html { height: 100%; } body { font-family: 'Inter', Arial, sans-serif; line-height: 1.6; margin: 0; padding: 0; color: var(--ink); background-color: var(--paper); background-image: radial-gradient(circle at 8% 8%, rgba(107, 63, 160, 0.09) 0%, transparent 45%), radial-gradient(circle at 95% 15%, rgba(196, 154, 60, 0.08) 0%, transparent 40%), radial-gradient(circle at 50% 100%, rgba(107, 63, 160, 0.07) 0%, transparent 50%), radial-gradient(circle at 25% 60%, rgba(196, 154, 60, 0.04) 0%, transparent 35%); background-attachment: fixed; min-height: 100vh; } h1, h2, h3, h4 { font-family: 'Fraunces', serif; color: var(--violet-900); } /* --- 1. AUTHENTIFICATION (Login/Register) --- */ .auth-body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, var(--violet-600) 0%, var(--violet-900) 100%); } .auth-card { background-color: var(--card-bg); padding: 40px; border-radius: 20px; box-shadow: 0 10px 30px rgba(46, 27, 69, 0.15), 0 0 0 1px rgba(46, 27, 69, 0.05); width: 100%; max-width: 400px; text-align: center; margin: 20px; } .auth-card .auth-logo { max-width: 150px; height: auto; display: block; margin: 0 auto 20px auto; } .auth-card .auth-app-name { text-align: center; margin: -12px 0 20px; font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.1em; color: var(--violet-600); letter-spacing: 0.02em; } /* --- 2. STRUCTURE APPLICATION --- */ .app-body { display: block; } .app-main-container { display: flex; min-height: calc(100vh - 60px); margin: 0 auto; max-width: 1400px; } /* --- 3. HEADER --- */ header { display: flex; justify-content: space-between; align-items: center; padding: 10px 30px; background: linear-gradient(135deg, #ffffff 0%, var(--violet-050) 100%); color: var(--ink); box-shadow: 0 2px 12px rgba(107, 63, 160, 0.08); border-bottom: 1px solid var(--line); position: relative; } header::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--violet-600) 0%, var(--gold) 50%, var(--violet-600) 100%); opacity: 0.65; } .logo-container { display: flex; align-items: center; } .site-logo { height: 40px; width: auto; margin-right: 15px; cursor: pointer; } header h1 { font-size: 1.6em; margin: 0; font-weight: 600; } nav { margin-top: 0; } nav a { color: var(--ink-soft); text-decoration: none; margin-left: 15px; font-weight: 600; padding: 8px 12px; border-radius: 8px; transition: background-color 0.3s; } nav a:hover { background-color: var(--violet-050); color: var(--violet-600); } /* --- 4. SIDEBAR --- */ /* Fond blanc (au lieu de noir) : même esprit que la sidebar d'EduFormation. */ .sidebar-menu { width: 250px; background: linear-gradient(180deg, var(--card-bg) 0%, var(--violet-050) 100%); padding: 20px 0; box-shadow: 2px 0 12px rgba(107, 63, 160, 0.06); border-right: 1px solid var(--line); flex-shrink: 0; position: relative; } .sidebar-menu nav { width: 100%; } .menu-group-title { font-size: 0.72rem; font-weight: 700; color: var(--muted); padding: 15px 20px 5px 20px; margin: 0; text-transform: uppercase; letter-spacing: 0.05em; } .menu-item { display: flex; align-items: center; text-decoration: none; color: var(--ink-soft); padding: 11px 20px; margin: 2px 10px; border-radius: 8px; width: calc(100% - 20px); box-sizing: border-box; font-size: 0.95em; font-weight: 500; transition: background-color 0.2s, color 0.2s; } .menu-item .icon { margin-right: 14px; font-size: 1.1em; line-height: 0; } .menu-item:hover { background-color: var(--violet-050); color: var(--violet-600); } .menu-item.active { background-color: var(--violet-100); color: var(--violet-600); border-right: 3px solid var(--violet-600); font-weight: 600; } .menu-item.sub-item { padding-left: 55px; font-size: 0.95em; font-weight: normal; } .menu-item.active-link { background-color: var(--violet-100); color: var(--violet-600); border-right: 3px solid var(--violet-600); font-weight: 600; } .menu-item.logout { color: var(--error); margin-top: 10px; } /* ===== ESPACEMENT SIDEBAR ===== */ .sidebar { display: flex !important; flex-direction: column !important; min-height: 100vh !important; } .sidebar nav, .sidebar > ul { flex: 1 !important; } .sidebar .user-profile, .sidebar .profile-section, .sidebar > div:last-child { padding-top: 30px !important; border-top: 1px solid var(--line) !important; } .sidebar nav a, .sidebar ul a { display: flex; align-items: center; gap: 12px; padding: 11px 15px !important; margin: 3px 10px !important; border-radius: 8px; color: var(--ink-soft); } .sidebar nav a:hover, .sidebar ul a:hover { background: var(--violet-050); color: var(--violet-600); } /* Profil sidebar — en haut de la sidebar (flux normal, plus de position absolute qui le fixait en bas), séparé de la nav par une bordure basse. */ .sidebar-profile { width: 100%; padding: 18px 20px; background: linear-gradient(135deg, var(--violet-100) 0%, var(--violet-050) 100%); border-bottom: 1px solid var(--line); box-sizing: border-box; flex-shrink: 0; } .sidebar-profile .user-info { display: flex; align-items: center; margin-bottom: 10px; } .sidebar-profile .avatar { width: 42px; height: 42px; background: linear-gradient(135deg, var(--violet-600) 0%, var(--violet-900) 100%); color: white; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-weight: 700; font-size: 0.95em; margin-right: 13px; border: none; box-shadow: 0 3px 8px rgba(107, 63, 160, 0.35); flex-shrink: 0; } .sidebar-profile .details p { margin: 0; line-height: 1.3; font-size: 0.9em; } .sidebar-profile .details .name { font-weight: 700; color: var(--ink); } .sidebar-profile .details .role-points { color: var(--muted); } /* --- 5. CONTENU PRINCIPAL --- */ .main-content { flex-grow: 1; padding: 30px; background-color: transparent; min-height: calc(100vh - 60px); } .main-card { background: linear-gradient(160deg, #ffffff 0%, var(--violet-050) 130%); padding: 40px; border-radius: 20px; box-shadow: 0 10px 30px rgba(46, 27, 69, 0.08), 0 0 0 1px rgba(46, 27, 69, 0.04); width: 90%; text-align: center; margin: 20px auto; } /* --- 6. FORMULAIRES --- */ label { display: block; text-align: left; margin-bottom: 5px; margin-top: 15px; font-weight: 600; color: var(--ink-soft); font-size: 0.9em; } input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="date"], input[type="color"], textarea, select { width: 100%; padding: 11px 13px; background-color: #ffffff; border: 1px solid var(--line); border-radius: 8px; box-sizing: border-box; font-size: 1em; font-family: 'Inter', sans-serif; box-shadow: none; transition: border-color 0.3s, box-shadow 0.3s; } input:focus, textarea:focus, select:focus { border-color: var(--violet-500); outline: none; box-shadow: 0 0 0 3px var(--violet-100); } .form-row { display: flex; align-items: center; gap: 20px; margin-bottom: 10px; } .form-row > div { flex: 1; min-width: 0; } fieldset { border: 1px solid var(--line); padding: 20px; margin-bottom: 25px; border-radius: 10px; } legend { font-weight: 700; font-size: 1.15em; color: var(--violet-600); font-family: 'Fraunces', serif; padding: 0 10px; margin-left: -10px; } /* --- 7. BOUTONS --- */ button[type="submit"], .primary-action-btn { width: 90%; padding: 14px; margin-top: 30px; border: none; border-radius: 10px; cursor: pointer; font-size: 1.05em; font-weight: 700; color: white; font-family: 'Inter', sans-serif; background: linear-gradient(135deg, var(--violet-600) 0%, var(--violet-900) 100%); box-shadow: 0 6px 18px rgba(107, 63, 160, 0.3); transition: transform 0.2s, box-shadow 0.2s; } button[type="submit"]:hover, .primary-action-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(107, 63, 160, 0.4); } .view-button { display: block; width: 100%; padding: 12px 20px; border-radius: 10px; text-align: center; text-decoration: none; font-weight: 700; font-size: 1em; background: linear-gradient(135deg, var(--violet-600) 0%, var(--violet-900) 100%); color: white; border: none; box-shadow: 0 4px 12px rgba(107, 63, 160, 0.25); transition: all 0.3s ease; margin: 0; } .view-button:hover { opacity: 0.92; transform: translateY(-2px); } .action-btn { padding: 10px 16px; text-align: center; color: white; text-decoration: none; border-radius: 8px; font-weight: 600; font-size: 0.9em; transition: all 0.2s ease; border: none; cursor: pointer; background-color: var(--error); } .action-btn:hover { opacity: 0.9; transform: translateY(-2px); } .btn-enrolled { background: linear-gradient(135deg, var(--success) 0%, #4a9c6a 100%) !important; color: white !important; padding: 15px; text-align: center; border-radius: 10px; font-weight: bold; display: block; margin-top: 20px; cursor: default; box-shadow: 0 2px 8px rgba(47, 122, 77, 0.3); } /* Actions rapides dashboard */ .quick-actions-grid { display: flex; gap: 15px; margin-top: 20px; margin-bottom: 40px; } .action-btn-quick { display: flex; align-items: center; justify-content: center; flex-grow: 1; padding: 15px 20px; border-radius: 12px; text-decoration: none; font-weight: 700; font-size: 1em; color: white; box-shadow: 0 4px 12px rgba(46, 27, 69, 0.12); transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s; } .action-btn-quick:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(46, 27, 69, 0.18); opacity: 0.95; } .action-btn-quick .action-icon { font-size: 1.3em; margin-right: 10px; line-height: 1; } .action-btn-quick.primary-action { background: linear-gradient(135deg, var(--violet-600), var(--violet-900)); } .action-btn-quick.secondary-action { background: linear-gradient(135deg, var(--success), #4a9c6a); } .action-btn-quick.tertiary-action { background: linear-gradient(135deg, var(--warning), #d4a850); } /* --- 8. MESSAGES --- */ .message-error { color: var(--error); background-color: var(--error-bg); border: 1px solid var(--error); padding: 12px 15px; border-radius: 8px; margin-bottom: 15px; font-weight: 500; } .message-success { background-color: var(--success-bg); color: var(--success); border: 1px solid var(--success); padding: 12px; border-radius: 8px; margin-bottom: 20px; text-align: center; font-weight: bold; } .message-info { background-color: var(--violet-050); color: var(--violet-800); border: 1px solid var(--violet-300); padding: 15px; border-radius: 8px; } /* --- 9. GRILLES ET CARTES --- */ .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 40px; } .stat-card { flex-direction: column; align-items: flex-start; padding: 24px; background: linear-gradient(155deg, #ffffff 0%, var(--violet-050) 120%); border-radius: 16px; box-shadow: 0 4px 18px rgba(107, 63, 160, 0.1), 0 1px 3px rgba(46, 27, 69, 0.06); text-decoration: none; color: var(--ink); transition: transform 0.2s, box-shadow 0.2s; border: 1px solid var(--violet-100); border-left: 4px solid var(--violet-500); position: relative; overflow: hidden; } .stat-card::after { content: ''; position: absolute; top: -30px; right: -30px; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, rgba(196, 154, 60, 0.12) 0%, transparent 70%); } .stat-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(107, 63, 160, 0.16), 0 2px 6px rgba(46, 27, 69, 0.08); } .stat-icon { font-size: 1.4em; margin-bottom: 12px; line-height: 1; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: linear-gradient(135deg, var(--violet-100) 0%, var(--violet-050) 100%); position: relative; z-index: 1; } .stat-value { font-size: 2.3em; font-weight: 700; font-family: 'Fraunces', serif; color: var(--violet-900); margin-bottom: 5px; position: relative; z-index: 1; } .stat-label { font-size: 0.85em; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; font-weight: 600; position: relative; z-index: 1; } .stat-card.formation-stat { border-left-color: var(--violet-600); } .stat-card.course-stat { border-left-color: var(--success); } .stat-card.user-stat { border-left-color: var(--warning); } /* Grille des formations */ .teacher-formations-grid, .catalogue-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 30px; padding-top: 20px; } /* CARTES DE FORMATION - AVEC IMAGE ET OVERLAY */ .formation-block-card, .catalogue-card { position: relative; overflow: hidden; background: var(--card-bg); border-radius: 16px; box-shadow: 0 4px 16px rgba(46, 27, 69, 0.09); border: 1px solid var(--violet-100); transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; padding: 0; min-height: 420px; } .formation-block-card:hover, .catalogue-card:hover { transform: translateY(-5px); box-shadow: 0 10px 24px rgba(46, 27, 69, 0.16); } .formation-block-card:hover .formation-image { filter: brightness(0.6); } /* Badge catégorie sur l'image */ .category-tag { position: absolute; top: 15px; left: 15px; z-index: 10; padding: 6px 14px; border-radius: 20px; font-size: 0.75em; font-weight: 600; color: white; text-transform: uppercase; background-color: var(--violet-600); backdrop-filter: blur(5px); text-shadow: 0 1px 2px rgba(0,0,0,0.2); } /* Image de formation */ .formation-image { width: 100%; height: 220px; object-fit: cover; border-radius: 14px 14px 0 0; transition: filter 0.3s ease; display: block; } /* Contenu de la carte sous l'image */ .formation-content { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; } .formation-content h4, .catalogue-card h3 { font-size: 1.25em; margin: 0 0 15px 0; color: var(--violet-900); line-height: 1.3; font-family: 'Fraunces', serif; /* Réserve toujours la hauteur de 2 lignes, qu'il en occupe une ou deux réellement — évite que les cartes n'aient des hauteurs différentes selon la longueur du titre. */ min-height: 2.6em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .formation-content p, .catalogue-card > div > p { color: var(--muted); font-size: 0.95em; margin: 10px 0; line-height: 1.5; } /* Métadonnées de la formation */ .formation-meta { display: flex; align-items: center; gap: 8px; padding: 12px; background-color: var(--violet-050); border-radius: 8px; margin-bottom: 15px; font-size: 0.9em; } .formation-meta strong { color: var(--violet-600); } .formation-meta-info { font-size: 0.85em; color: var(--muted); margin-top: 10px; border-top: 1px solid var(--line); padding-top: 10px; } .formation-meta-info p { margin: 5px 0; display: flex; align-items: center; gap: 5px; } /* OVERLAY DES BOUTONS (pour manage_formations, manage_courses, dashboard) */ .action-buttons-overlay { position: absolute; top: 55px; right: 12px; display: flex; flex-direction: column; align-items: stretch; gap: 6px; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; z-index: 5; width: 130px; } .formation-block-card:hover .action-buttons-overlay { opacity: 1; pointer-events: auto; } .action-buttons-overlay .action-btn { padding: 8px 14px; text-align: center; color: white; text-decoration: none; border-radius: 20px; font-weight: 600; font-size: 0.8em; transition: all 0.2s ease; border: none; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); display: flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; width: 100%; min-width: 0; box-sizing: border-box; background-color: var(--error); } .action-buttons-overlay .action-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3); } /* 1er bouton (Modifier) */ .action-buttons-overlay .action-btn:nth-child(1) { background: linear-gradient(135deg, var(--violet-600) 0%, var(--violet-900) 100%); } .action-buttons-overlay .action-btn:nth-child(1):hover { background: linear-gradient(135deg, var(--violet-800) 0%, var(--violet-900) 100%); } /* 2e bouton (ex : Cours) */ .action-buttons-overlay .action-btn:nth-child(2) { background-color: var(--success); } .action-buttons-overlay .action-btn:nth-child(2):hover { background-color: var(--success); opacity: 0.9; } /* 3e bouton (Supprimer) */ .action-buttons-overlay .action-btn:nth-child(3) { background-color: var(--error); } .action-buttons-overlay .action-btn:nth-child(3):hover { background-color: var(--error); opacity: 0.9; } /* Prix */ .price-display { font-size: 1.8em; font-weight: 700; font-family: 'Fraunces', serif; color: var(--success); margin-bottom: 15px; text-align: center; } /* --- 10. TABLEAUX --- */ .data-table { width: 100%; border-collapse: collapse; margin-top: 20px; background-color: var(--card-bg); box-shadow: 0 3px 10px rgba(46, 27, 69, 0.06); border-radius: 10px; overflow: hidden; } .data-table th, .data-table td { padding: 12px 15px; text-align: left; border-bottom: 1px solid var(--line); } .data-table th { background: linear-gradient(135deg, var(--violet-600) 0%, var(--violet-800) 100%); font-weight: bold; color: white; text-transform: uppercase; font-size: 0.85em; letter-spacing: 0.03em; } .data-table tbody tr { transition: background-color 0.15s; } .data-table tbody tr:hover { background-color: var(--violet-050); } .data-table tbody tr:hover { background-color: var(--violet-050); } .actions-cell { white-space: nowrap; text-align: right; } .status-badge { display: inline-block; padding: 5px 12px; border-radius: 20px; font-size: 0.85em; font-weight: bold; color: white; text-align: center; } .status-badge.teacher { background-color: var(--violet-600); } .status-badge.student { background-color: var(--success); } .status-badge.completed { background-color: var(--success); } .status-badge.pending { background-color: var(--warning); } /* --- 11. LIENS --- */ .alt-link { display: block; margin-top: 20px; font-size: 0.9em; } .alt-link a, .auth-card p a { color: var(--violet-600); text-decoration: none; font-weight: 600; } .back-link { display: inline-block; margin: 20px; color: var(--violet-600); text-decoration: none; font-weight: bold; } .back-link:hover { text-decoration: underline; } /* --- 12. FOOTER --- */ footer { width: 100%; color: var(--muted); padding: 20px 0; text-align: center; font-size: 0.9em; background-color: var(--card-bg); box-shadow: 0 -2px 8px rgba(46, 27, 69, 0.05); margin-top: 40px; } footer p { margin: 0; } /* --- 13. ANIMATIONS --- */ @keyframes fadeIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .catalogue-card { animation: fadeInUp 0.5s ease-out; } .catalogue-card:nth-child(1) { animation-delay: 0.1s; } .catalogue-card:nth-child(2) { animation-delay: 0.2s; } .catalogue-card:nth-child(3) { animation-delay: 0.3s; } .catalogue-card:nth-child(4) { animation-delay: 0.4s; } .catalogue-card:nth-child(5) { animation-delay: 0.5s; } .catalogue-card:nth-child(6) { animation-delay: 0.6s; } /* --- 14. RECHERCHE ET FILTRES --- */ .search-filter-container { background: var(--card-bg); padding: 25px; border-radius: 14px; box-shadow: 0 3px 10px rgba(46, 27, 69, 0.06); margin-bottom: 30px; transition: box-shadow 0.3s ease; } .search-filter-container:hover { box-shadow: 0 4px 14px rgba(46, 27, 69, 0.1); } .search-filter-container input[type="text"] { width: 100%; padding: 12px 15px; border: 1px solid var(--line); border-radius: 8px; font-size: 1em; transition: border-color 0.3s ease; } .search-filter-container input[type="text"]:focus { outline: none; border-color: var(--violet-500); box-shadow: 0 0 0 3px var(--violet-100); } .search-filter-container button[type="submit"] { padding: 14px 40px; min-width: 160px; text-align: center; margin-top: 0; background: linear-gradient(135deg, var(--violet-600), var(--violet-900)); color: white; border: none; border-radius: 8px; font-weight: bold; font-size: 1em; cursor: pointer; white-space: nowrap; transition: opacity 0.3s ease, transform 0.1s ease; } .search-filter-container button[type="submit"]:hover { opacity: 0.92; transform: translateY(-1px); } .search-filter-container select { width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background-color: var(--card-bg); cursor: pointer; transition: border-color 0.3s ease; } .search-filter-container select:focus { outline: none; border-color: var(--violet-500); box-shadow: 0 0 0 3px var(--violet-100); } .search-filter-container label { display: block; margin-bottom: 5px; font-weight: bold; color: var(--ink-soft); font-size: 0.9em; } .filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 15px; } /* --- 15. NOTIFICATION MESSAGES NON LUS --- */ .unread-badge { display: inline-block; min-width: 20px; padding: 2px 6px; margin-left: 10px; background-color: var(--error); color: white; border-radius: 10px; font-size: 0.85em; font-weight: bold; text-align: center; line-height: 1.2; vertical-align: top; } /* --- 16. RESPONSIVE --- */ @media (max-width: 768px) { .app-main-container { flex-direction: column; } .sidebar-menu { width: 100%; position: relative; } .sidebar-profile { position: relative; width: 100%; } .stats-grid { grid-template-columns: 1fr; } .teacher-formations-grid, .catalogue-grid { grid-template-columns: 1fr; } .search-filter-container { padding: 15px; } .quick-actions-grid { flex-direction: column; } } /* Scroll de la sidebar */ .sidebar-menu nav::-webkit-scrollbar { width: 6px; } .sidebar-menu nav::-webkit-scrollbar-track { background: var(--violet-050); border-radius: 3px; } .sidebar-menu nav::-webkit-scrollbar-thumb { background: var(--violet-300); border-radius: 3px; } .sidebar-menu nav::-webkit-scrollbar-thumb:hover { background: var(--violet-500); } .sidebar-profile { flex-shrink: 0; } /* Force une icône emoji (ex : 🗑️) à s'afficher en blanc, quelle que soit sa couleur native — les emoji ne suivent pas la propriété CSS `color`, donc on passe par un filtre : brightness(0) rend tout noir, invert(1) inverse en blanc. À utiliser sur un élément ne contenant QUE l'icône (un span dédié, ou un bouton dont c'est tout le contenu), jamais sur un conteneur avec un fond coloré : le filtre s'appliquerait aussi au fond. */ .icon-white { filter: brightness(0) invert(1); display: inline-block; } /* --- ÉDITEUR DE TEXTE ENRICHI (générique, réutilisable sur toute page) --- */ .rte-toolbar { display: flex; gap: 4px; flex-wrap: wrap; padding: 8px; background: var(--violet-050); border: 1px solid var(--line); border-bottom: none; border-radius: 8px 8px 0 0; } .rte-toolbar button { width: auto; margin: 0; padding: 7px 12px; font-size: 0.9em; font-weight: 700; background: var(--card-bg); color: var(--violet-800); border: 1px solid var(--line); border-radius: 6px; cursor: pointer; box-shadow: none; } .rte-toolbar button:hover { background: var(--violet-100); } .rte-toolbar button.active { background: var(--violet-600); color: white; border-color: var(--violet-600); } .rte-editor { min-height: 110px; border: 1px solid var(--line); border-top: none; border-radius: 0 0 8px 8px; padding: 14px 16px; font-family: 'Inter', sans-serif; font-size: 1em; line-height: 1.5; background: var(--card-bg); } .rte-editor:focus { outline: none; border-color: var(--violet-500); } .rte-editor.rte-empty::before { content: attr(data-placeholder); color: var(--muted); pointer-events: none; } .rte-editor ul, .rte-editor ol { margin: 8px 0; padding-left: 24px; } .rte-editor.rte-small { min-height: 60px; } /* --- GÉNÉRATEUR D'IMAGE IA (générique, réutilisable partout) --- */ .ia-image-panel { margin-top: 10px; } .ia-image-toggle { width: auto; margin: 0; padding: 8px 16px; background: linear-gradient(135deg, var(--gold) 0%, #A67F2E 100%); color: white; border: none; border-radius: 8px; font-size: 0.85em; font-weight: 700; cursor: pointer; box-shadow: none; } .ia-image-body { margin-top: 12px; padding: 16px 18px; background: var(--violet-050); border-radius: 10px; border: 1px dashed var(--violet-300); } .ia-image-note { margin: 0 0 12px; padding: 10px 14px; background: var(--warning-bg); color: var(--warning); border-radius: 8px; font-size: 0.82em; line-height: 1.5; } .ia-image-generer { width: auto; margin-top: 10px; padding: 9px 20px; font-size: 0.9em; } .ia-image-statut { margin-top: 8px; font-size: 0.85em; color: var(--muted); } .ia-image-statut.erreur { color: var(--error); } .ia-image-statut.succes { color: var(--success); font-weight: 600; } .ia-image-utiliser { width: auto; margin: 0; padding: 9px 18px; font-size: 0.85em; background: var(--success); } .ia-image-regenerer { width: auto; margin: 0; padding: 9px 18px; font-size: 0.85em; background: var(--card-bg); color: var(--violet-800); border: 1px solid var(--violet-200); box-shadow: none; } /* --- Sélecteur de thème (page Mon profil) --- */ .theme-swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; margin-top: 8px; } .theme-swatch { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; border-radius: 12px; border: 2px solid var(--line); cursor: pointer; transition: border-color 0.15s, transform 0.15s; } .theme-swatch:hover { transform: translateY(-2px); } .theme-swatch.selected { border-color: var(--violet-600); background: var(--violet-050); } .theme-swatch input[type="radio"] { display: none; } .swatch-preview { width: 42px; height: 42px; border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,0.15); } .swatch-label { font-size: 0.8em; font-weight: 600; color: var(--ink-soft); text-align: center; } /* Petite note d'aide sous un champ (limites, astuces...) — générique */ .nl-hint { font-size: 0.82em; color: var(--muted); margin-top: 4px; }