diff --git a/Bootstrap_new/css/theme-modern.css b/Bootstrap_new/css/theme-modern.css index cc186910..39029901 100644 --- a/Bootstrap_new/css/theme-modern.css +++ b/Bootstrap_new/css/theme-modern.css @@ -1,52 +1,57 @@ /* ============================================================ - INTER SANTÉ — THEME MASTER 2025 (EDITION OUTLOOK 365) - FUSION TOTALE : AUCUN ÉLÉMENT OMIS - STRUCTURE & DESIGN + INTER SANTÉ — THEME MODERN (MASTER SaaS EDITION) + Focus: High-Density Data, Decision Clarity & Office 365 UI ============================================================ */ -/* === 1. FONTS & VARIABLES (Source: theme-modern.txt) === */ +/* === 1. FONTS & DESIGN TOKENS === */ @import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,700&display=swap'); :root { - /* Identité Visuelle Outlook 365 */ + /* Palette Microsoft Outlook 365 & Enterprise */ --color-primary: #0078d4; --color-primary-light: #2b88d8; --color-primary-dark: #005a9e; --color-primary-ghost: #eff6fc; - /* Statuts Office 365 */ - --color-success: #107c10; - --color-urgent: #d13438; - --color-warning: #ffaa44; + /* Statuts Métier (Clarté Décisionnelle) */ + --color-success: #107c10; /* Vert Excel */ + --color-urgent: #d13438; /* Rouge Alerte */ + --color-warning: #ffaa44; /* Orange Attention */ --color-info: #3a86ff; --color-neutral: #6c757d; - /* Contrastes de Lecture Professionnels */ - --bg-app: #f3f2f1; /* Gris Outlook */ + /* Backgrounds & Contrastes (Optimisé pour 8h de travail/jour) */ + --bg-app: #f3f2f1; /* Gris neutre Office */ --bg-card: #ffffff; - --text-main: #323130; + --text-main: #323130; /* Noir Microsoft pour lecture longue */ --text-muted: #605e5c; --border-light: #edebe9; - /* TES ARRONDIS (Source: theme-modern.txt & Image 2) */ - --radius-lg: 14px; - --radius-md: 10px; - --radius-sm: 6px; + /* Structure & Arrondis (Équilibre Image 2 / Modernité) */ + --radius-lg: 12px; + --radius-md: 8px; + --radius-sm: 4px; --shadow-sm: 0 2px 8px rgba(0,0,0,0.08); --shadow-lg: 0 15px 45px rgba(0,0,0,0.15); - --transition-fast: 0.2s ease; - --transition-smooth: 0.4s cubic-bezier(0.1, 0.9, 0.2, 1); + --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1); } -/* === 2. BASE & COMPOSANTS SPÉCIFIQUES (Source: theme-modern.txt) === */ +/* === 2. BASE RESET & TYPOGRAPHIE === */ body { background-color: var(--bg-app) !important; color: var(--text-main); font-family: 'DM Sans', 'Segoe UI', sans-serif !important; font-size: 0.92rem; + -webkit-font-smoothing: antialiased; } -/* h6 liens spécifiques du fichier initial */ +h1, h2, h3, .logo-text, .modal-title { + font-family: 'Syne', sans-serif; + font-weight: 700; +} + +/* Liens spécifiques h6 (Fichier initial respecté) */ h6 a { text-decoration: none; color: var(--color-primary); @@ -57,24 +62,17 @@ h6 a { h6 a:hover { background: var(--color-primary); color: white !important; - border-bottom-color: transparent; padding: 1px 5px; - border-radius: 4px; + border-radius: var(--radius-sm); } -/* === 3. HEADER & LOGO (Source: header.php) === */ +/* === 3. HEADER & NAVIGATION (header.php) === */ .header { background-color: var(--color-primary) !important; color: white !important; height: 50px !important; box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important; -} - -.header .logo span { - color: white !important; - font-family: 'Syne', sans-serif; - font-weight: 700; - font-size: 1.1rem; + z-index: 1000; } .initials { @@ -88,23 +86,22 @@ h6 a:hover { display: flex; align-items: center; justify-content: center; + font-size: 0.75rem; } -/* Badge Mode Test dynamique du header */ .mode-test-badge { background: white; color: var(--color-primary); font-weight: 800; padding: 2px 10px; - border-radius: 4px; + border-radius: var(--radius-sm); font-size: 0.65rem; margin-left: 10px; - box-shadow: 0 2px 4px rgba(0,0,0,0.1); } -/* === 4. SIDEBAR (Source: sidebar.txt) === */ +/* === 4. SIDEBAR (sidebar.txt) === */ .sidebar { - background: #faf9f8 !important; /* Gris clair Office */ + background: #faf9f8 !important; border-right: 1px solid var(--border-light) !important; } @@ -113,21 +110,23 @@ h6 a:hover { font-weight: 500; border-radius: var(--radius-md); margin: 4px 10px; + padding: 10px 15px; transition: var(--transition-fast); } +.sidebar-nav .nav-link:hover, .sidebar-nav .nav-link.parent-active, .sidebar-nav .nav-link.active-main { background-color: var(--color-primary-ghost) !important; color: var(--color-primary) !important; - font-weight: 700; } -/* === 5. PANNEAU DE CONTEXTE (Source: barre-contexte.txt) === */ +/* === 5. PANNEAU DE CONTEXTE (barre-contexte.txt) === */ #barre_laterale_d { background: white; border-left: 2px solid var(--border-light); - box-shadow: -4px 0 20px rgba(0,0,0,0.05); + box-shadow: -4px 0 25px rgba(0,0,0,0.05); + transition: transform 0.4s cubic-bezier(0.1, 0.9, 0.2, 1); } .context-card { @@ -136,20 +135,33 @@ h6 a:hover { border-radius: var(--radius-md); padding: 12px; margin-bottom: 12px; + transition: var(--transition-fast); } +.context-card:hover { border-color: var(--color-primary-light); } + .context-card-label { color: var(--color-primary); font-weight: 700; - font-size: 0.7rem; + font-size: 0.65rem; text-transform: uppercase; + letter-spacing: 0.05em; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; } -/* Textarea spécifique du fichier initial */ +.btn-primary-context { + background-color: var(--color-primary-ghost) !important; + color: var(--color-primary) !important; + border: 1px solid var(--color-primary) !important; + font-weight: 600; + width: 100%; + border-radius: var(--radius-sm); +} + +/* Textarea spécifique context bar */ .mb-2 textarea { font-size: 0.78rem; border-radius: var(--radius-md); @@ -158,43 +170,12 @@ h6 a:hover { width: 100%; } -.btn-primary-context { - background-color: var(--color-primary-ghost) !important; - color: var(--color-primary) !important; - border: 1px solid var(--color-primary) !important; - font-weight: 600; - border-radius: var(--radius-sm); -} - -/* === 6. MODALS & ALERTES (Source: modals.txt & theme-modern.txt) === */ -.modal-content { - border-radius: var(--radius-lg) !important; - border: none; - box-shadow: var(--shadow-lg) !important; -} - -.modal-header { - background-color: #faf9f8; - border-bottom: 1px solid var(--border-light); - padding: 15px 25px; -} - -.modal-title { color: var(--color-primary-dark); font-weight: 700; } - -.alert { - border-radius: var(--radius-md); - border: none; - border-left: 5px solid transparent; -} -.alert-info { background: #eff6fc; color: #0078d4; border-left-color: #0078d4; } -.alert-danger { background: #fde7e9; color: #a80000; border-left-color: #d13438; } -.alert-success { background: #dff6dd; color: #107c10; border-left-color: #107c10; } - -/* === 7. TABLEAUX & KPI (Structure Image 2) === */ +/* === 6. TABLEAUX (Structure Image 2) === */ .table-responsive { border-radius: var(--radius-lg); border: 1px solid var(--border-light); background: white; + margin-bottom: 20px; } .table thead th { @@ -207,47 +188,70 @@ h6 a:hover { border-bottom: 3px solid var(--color-primary) !important; /* Ligne de force Bleue */ } -/* KPI Cards de l'Image 2 */ -.card { - border-radius: var(--radius-lg) !important; - border: 1px solid var(--border-light) !important; - box-shadow: var(--shadow-sm) !important; +.table tbody tr td { + padding: 12px !important; + border-bottom: 1px solid #f1f5f9 !important; } -/* === 8. PATTERNS GRAPHIQUES (Source: theme-modern.txt) === */ +.table tbody tr:hover { + background-color: #f8fafc !important; +} -/* Bannière Mode Test (Zébrée Image 2 avec couleurs Outlook) */ +/* === 7. MODALS & ALERTES (modals.txt) === */ +.modal-content { + border-radius: var(--radius-lg) !important; + border: none; + box-shadow: var(--shadow-lg) !important; +} + +.modal-header { + background-color: #faf9f8; + border-bottom: 1px solid var(--border-light); + padding: 15px 20px; +} + +.alert { + border-radius: var(--radius-md); + border: none; + font-weight: 500; + border-left: 5px solid transparent; +} +.alert-info { background: #eff6fc; color: #0078d4; border-left-color: var(--color-primary); } +.alert-danger { background: #fde7e9; color: #a80000; border-left-color: var(--color-urgent); } + +/* === 8. PATTERNS GRAPHIQUES (Conservation 100%) === */ + +/* Bannière Mode Test Zébrée */ .mode-test-banner { background: repeating-linear-gradient(45deg, #ffaa44, #ffaa44 10px, #323130 10px, #323130 20px) !important; color: white !important; font-weight: 800; text-align: center; padding: 6px; - letter-spacing: 1px; } -/* Skeleton Loaders (Source: scripts-footer.txt) */ +/* Skeleton Loaders (scripts-footer.txt) */ .skeleton { background: linear-gradient(90deg, #f3f2f1 25%, #edebe9 50%, #f3f2f1 75%); background-size: 200% 100%; animation: skeleton-loading 1.5s infinite; - border-radius: 4px; + border-radius: var(--radius-sm); } @keyframes skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } -/* Effets Photos Assurés (Source: theme-modern.txt) */ +/* Effets Photos (Initial Source) */ .image-container img:hover { filter: grayscale(100%); transition: 0.3s; } .photo-container img:hover { transform: scale(1.1); cursor: pointer; transition: 0.3s; } -/* Scrollmenu du Gabarit (Source: gabarit.txt) */ +/* Scrollmenu (gabarit.txt) */ .scrollmenu { background: white; - padding: 10px; + padding: 8px 15px; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); display: flex; - gap: 12px; + gap: 10px; overflow-x: auto; border: 1px solid var(--border-light); } @@ -256,30 +260,35 @@ h6 a:hover { color: var(--text-main); text-decoration: none; font-weight: 600; - border-radius: 8px; - transition: all 0.2s; + border-radius: 20px; + white-space: nowrap; } .scrollmenu a:hover, .scrollmenu a.active { background: var(--color-primary-ghost); color: var(--color-primary); } -/* === 9. RESPONSIVE OPTIMISATIONS === */ -@media (max-width: 1199px) { - .main { padding: 15px !important; margin-left: 0 !important; } - .sidebar { width: 260px !important; left: -260px; } - .toggle-sidebar .sidebar { left: 0; } - #barre_laterale_d { width: 100% !important; right: -100%; z-index: 9999; } - #barre_laterale_d.active { right: 0; } -} - -/* === 10. BOUTONS === */ +/* === 9. BOUTONS === */ .btn-primary { background-color: var(--color-primary) !important; border-radius: var(--radius-md) !important; font-weight: 600 !important; border: none !important; - padding: 8px 22px !important; - box-shadow: 0 4px 10px rgba(0, 120, 212, 0.2) !important; + padding: 10px 24px !important; + transition: all 0.2s; } -.btn-primary:hover { background-color: var(--color-primary-dark) !important; transform: translateY(-1px); } \ No newline at end of file + +.btn-primary:hover { + background-color: var(--color-primary-dark) !important; + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(0, 120, 212, 0.25) !important; +} + +/* === 10. RESPONSIVE === */ +@media (max-width: 1199px) { + #sidebar { left: -260px; transition: 0.3s; } + .toggle-sidebar #sidebar { left: 0; } + #main { margin-left: 0 !important; padding: 15px !important; } + #barre_laterale_d { width: 100% !important; right: -100%; } + #barre_laterale_d.active { right: 0; } +} \ No newline at end of file