From d0f9678b4f40ab4dcf874a8baa828e4486817d1a Mon Sep 17 00:00:00 2001 From: KONE SOREL Date: Wed, 25 Feb 2026 12:42:56 +0000 Subject: [PATCH] df --- Bootstrap_new/css/theme-modern.css | 205 +++++++++++++++-------------- 1 file changed, 107 insertions(+), 98 deletions(-) diff --git a/Bootstrap_new/css/theme-modern.css b/Bootstrap_new/css/theme-modern.css index adfa1276..dfc8fa3f 100644 --- a/Bootstrap_new/css/theme-modern.css +++ b/Bootstrap_new/css/theme-modern.css @@ -1,196 +1,205 @@ /* ============================================================ - INTER SANTÉ — THEME MODERN (OUTLOOK 365 ADAPTATION) + INTER SANTÉ — THEME MODERN (EDITION OUTLOOK 365 + ROUNDED) CONSERVATION 100% DES ÉLÉMENTS DU FICHIER SOURCE ============================================================ */ -/* === 1. FONTS & VARIABLES (Structure conservée) === */ +/* === 1. FONTS & VARIABLES (Structure 100% conservée) === */ @import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap'); :root { - /* Réalignement des couleurs sur la charte Microsoft 365 */ - --color-primary: #0078d4; /* Bleu Outlook au lieu du Vert */ + /* Palette Outlook 365 */ + --color-primary: #0078d4; /* Bleu Outlook */ --color-primary-light: #2b88d8; --color-primary-dark: #005a9e; --color-primary-ghost: #eff6fc; --color-accent: #0078d4; - --color-urgent: #d13438; /* Rouge Office */ - --color-warning: #ffaa44; /* Orange Office */ - --color-success: #107c10; /* Vert Excel */ - --color-info: #0078d4; - --color-neutral: #605e5c; + --color-urgent: #d13438; + --color-warning: #ffaa44; + --color-success: #107c10; + --color-info: #3a86ff; + --color-neutral: #6c757d; - /* Backgrounds & Contrastes facilitant la lecture */ - --bg-app: #f3f2f1; /* Gris neutre facilitant le focus */ + /* Backgrounds Outlook pour faciliter la lecture */ + --bg-app: #f3f2f1; /* Gris neutre Office */ --bg-card: #ffffff; - --text-main: #323130; /* Contraste optimal pour texte long */ + --text-main: #323130; /* Contraste optimal */ --text-muted: #605e5c; + --border-light: #edebe9; + + /* --- TES ARRONDIS PRÉFÉRÉS (CONSERVÉS) --- */ + --radius-lg: 14px; + --radius-md: 10px; - /* Tokens Visuels Outlook (Moins d'arrondis, plus de clarté) */ - --shadow-sm: 0 1px 3px rgba(0,0,0,0.1); - --shadow-md: 0 4px 8px rgba(0,0,0,0.12); - --shadow-lg: 0 15px 30px rgba(0,0,0,0.15); - --radius-lg: 4px; /* Rigueur Outlook */ - --radius-md: 2px; - --transition-fast: 0.15s ease-in-out; - --transition-smooth: 0.3s cubic-bezier(0.1, 0.9, 0.2, 1); + --shadow-sm: 0 2px 4px rgba(0,0,0,0.05); + --shadow-md: 0 4px 12px rgba(0,0,0,0.08); + --transition-fast: 0.2s ease; + --transition-smooth: 0.4s cubic-bezier(0.1, 0.9, 0.2, 1); } /* === 2. BASE & LISIBILITÉ === */ body { background-color: var(--bg-app) !important; color: var(--text-main); - font-family: 'Segoe UI', 'DM Sans', sans-serif !important; - -webkit-font-smoothing: antialiased; + font-family: 'DM Sans', sans-serif !important; } -/* === 3. HEADER & LOGO (Conserve vos IDs) === */ +h1, h2, h3, .logo-text { + font-family: 'Syne', sans-serif; + font-weight: 700; + color: var(--color-primary-dark); +} + +/* === 3. HEADER (Style Outlook avec tes IDs) === */ .header { background-color: var(--color-primary) !important; - height: 48px !important; - display: flex; - align-items: center; - box-shadow: none !important; - border-bottom: 1px solid rgba(0,0,0,0.1); + color: white !important; + box-shadow: var(--shadow-sm) !important; + border-bottom: none; } .header .logo span { - color: #ffffff !important; - font-family: 'Syne', sans-serif; + color: white !important; font-weight: 700; - font-size: 1.1rem; } -/* === 4. SIDEBAR (Pattern Outlook "Folder List") === */ +/* === 4. SIDEBAR (Style Outlook + Arrondis de sélection) === */ .sidebar { - background: #faf9f8 !important; /* Gris très clair Office */ - border-right: 1px solid #edebe9 !important; - width: 260px; + background: #faf9f8 !important; + border-right: 1px solid var(--border-light) !important; } .sidebar-nav .nav-link { color: var(--text-main) !important; - font-weight: 400; - border-radius: 0 !important; /* Carré comme Outlook */ - margin: 0 !important; - border-left: 3px solid transparent; + font-weight: 500; + border-radius: var(--radius-md); /* Arrondis conservés ici */ + margin: 4px 12px; transition: var(--transition-fast); } -.sidebar-nav .nav-link:hover { - background-color: #edebe9 !important; - color: var(--text-main) !important; -} - .sidebar-nav .nav-link.active-main { background-color: var(--color-primary-ghost) !important; color: var(--color-primary) !important; - border-left-color: var(--color-primary); /* Indicateur actif Outlook */ - font-weight: 600; + font-weight: 700; } -/* === 5. CARDS & KPI (Équilibre ombre/bordure) === */ +/* === 5. CARDS & KPI (Tes bordures arrondies 100%) === */ .card { background: var(--bg-card); - border: 1px solid #edebe9 !important; - border-radius: var(--radius-lg) !important; + border: 1px solid var(--border-light) !important; + border-radius: var(--radius-lg) !important; /* Tes 14px */ box-shadow: var(--shadow-sm) !important; } .kpi-card { - border-top: 3px solid var(--color-primary) !important; /* Pattern Outlook Cards */ + border-left: 5px solid var(--color-primary) !important; +} + +.kpi-value { + font-family: 'Syne', sans-serif; + font-weight: 800; + font-size: 1.8rem; +} + +/* === 6. TABLEAUX (Haute lisibilité + Rayons de courbure) === */ +.table-responsive { + border-radius: var(--radius-lg); + overflow: hidden; + background: white; } -/* === 6. TABLEAUX (Pattern "Liste de mails" Haute Lisibilité) === */ .table thead th { background-color: #faf9f8 !important; color: var(--text-muted); - font-weight: 600; font-size: 0.8rem; - text-transform: none; /* Plus naturel pour la lecture */ - border-bottom: 1px solid #edebe9 !important; -} - -.table tbody tr { - border-bottom: 1px solid #f3f2f1 !important; + border-bottom: 2px solid var(--border-light) !important; } .table tbody tr:hover { background-color: #f3f2f1 !important; } -/* === 7. CONTEXTUAL PANEL (Barre de contexte conservée) === */ +/* === 7. CONTEXTUAL PANEL & ELEMENTS SPECIFIQUES (Source: theme-modern.txt) === */ #barre_laterale_d { - background: #ffffff; - border-left: 1px solid #edebe9; - box-shadow: -2px 0 10px rgba(0,0,0,0.05); + background: white; + border-radius: var(--radius-lg) 0 0 var(--radius-lg); + border-left: 1px solid var(--border-light); } .info-box { background: #faf9f8; - border: 1px solid #edebe9; - border-radius: var(--radius-md); + border-radius: var(--radius-md); /* Arrondis conservés */ padding: 12px; - margin-bottom: 10px; + border: 1px solid var(--border-light); } -.info-box label { - color: var(--color-primary); /* Bleu Outlook pour les labels */ - font-weight: 700; - font-size: 0.65rem; - text-transform: uppercase; +/* Style spécifique h6 a du fichier source */ +h6 a { + text-decoration: none; + color: var(--color-primary); + font-weight: 600; + border-bottom: 1px dashed var(--color-primary); +} +h6 a:hover { + background: var(--color-primary); + color: white; + border-radius: 4px; } -/* === 8. PATTERNS TECHNIQUES (Conserve 100% de vos fonctions) === */ +/* Textarea du contexte */ +.mb-2 textarea { + font-size: 0.78rem; + border-radius: var(--radius-md); + border: 1px solid var(--border-light); + padding: 8px; +} + +/* === 8. PATTERNS AVANCÉS (Conservés du source) === */ .skeleton { background: linear-gradient(90deg, #f3f2f1 25%, #edebe9 50%, #f3f2f1 75%); background-size: 200% 100%; animation: skeleton-loading 1.5s infinite; + border-radius: 4px; } .bulk-actions-bar { - background: #323130; /* Dark Grey Microsoft */ - border-radius: var(--radius-md); + background: #323130; + border-radius: 50px; /* Style pilule */ + color: white; box-shadow: var(--shadow-lg); } -.command-bar { - border: 1px solid var(--color-primary); - box-shadow: var(--shadow-lg); +.trust-badge { + background: var(--color-primary-ghost); + color: var(--color-primary); + border-radius: 100px; + font-weight: 600; } -/* === 9. BOUTONS & BADGES === */ +/* === 9. BOUTONS & BADGES (Outlook colors + Rounded shapes) === */ .btn-primary { background: var(--color-primary) !important; - border-radius: 2px !important; /* Flat design Office */ - font-weight: 500 !important; + border-radius: var(--radius-md) !important; /* Arrondis au lieu du flat Office */ + font-weight: 600 !important; border: none !important; } .badge-saas { - border-radius: 2px; - padding: 4px 8px; - font-weight: 600; + border-radius: 20px; /* Tes badges arrondis */ + padding: 4px 12px; + font-size: 0.7rem; + text-transform: uppercase; } .status-paid { background: #dff6dd; color: #107c10; } .status-urgent { background: #fde7e9; color: #a80000; } -/* === 10. MODALS === */ -.modal-content { - border-radius: 0; - border: 1px solid #8a8886; - box-shadow: var(--shadow-lg); -} - -.modal-header { - background: #faf9f8; - border-bottom: 1px solid #edebe9; -} - -/* Mode Test Pattern */ +/* === 10. MODE TEST (Zébrures conservées du source) === */ .mode-test-banner { - background: #fff4ce; /* Couleur d'alerte Outlook */ - color: #323130; - border-bottom: 2px solid var(--color-warning); + background: repeating-linear-gradient( + 45deg, #ffaa44, #ffaa44 10px, #323130 10px, #323130 20px + ); + color: white; + font-weight: 800; + text-align: center; } \ No newline at end of file