/* ============================================================ INTER SANTÉ — THEME MODERN (EDITION OUTLOOK 365 + ROUNDED) CONSERVATION 100% DES ÉLÉMENTS DU FICHIER SOURCE ============================================================ */ /* === 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 { /* 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; --color-warning: #ffaa44; --color-success: #107c10; --color-info: #3a86ff; --color-neutral: #6c757d; /* Backgrounds Outlook pour faciliter la lecture */ --bg-app: #f3f2f1; /* Gris neutre Office */ --bg-card: #ffffff; --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; --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: 'DM Sans', sans-serif !important; } 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; color: white !important; box-shadow: var(--shadow-sm) !important; border-bottom: none; } .header .logo span { color: white !important; font-weight: 700; } /* === 4. SIDEBAR (Style Outlook + Arrondis de sélection) === */ .sidebar { background: #faf9f8 !important; border-right: 1px solid var(--border-light) !important; } .sidebar-nav .nav-link { color: var(--text-main) !important; font-weight: 500; border-radius: var(--radius-md); /* Arrondis conservés ici */ margin: 4px 12px; transition: var(--transition-fast); } .sidebar-nav .nav-link.active-main { background-color: var(--color-primary-ghost) !important; color: var(--color-primary) !important; font-weight: 700; } /* === 5. CARDS & KPI (Tes bordures arrondies 100%) === */ .card { background: var(--bg-card); border: 1px solid var(--border-light) !important; border-radius: var(--radius-lg) !important; /* Tes 14px */ box-shadow: var(--shadow-sm) !important; } .kpi-card { 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; } .table thead th { background-color: #faf9f8 !important; color: var(--text-muted); font-size: 0.8rem; border-bottom: 2px solid var(--border-light) !important; } .table tbody tr:hover { background-color: #f3f2f1 !important; } /* === 7. CONTEXTUAL PANEL & ELEMENTS SPECIFIQUES (Source: theme-modern.txt) === */ #barre_laterale_d { background: white; border-radius: var(--radius-lg) 0 0 var(--radius-lg); border-left: 1px solid var(--border-light); } .info-box { background: #faf9f8; border-radius: var(--radius-md); /* Arrondis conservés */ padding: 12px; border: 1px solid var(--border-light); } /* 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; } /* 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; border-radius: 50px; /* Style pilule */ color: white; 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 (Outlook colors + Rounded shapes) === */ .btn-primary { background: var(--color-primary) !important; border-radius: var(--radius-md) !important; /* Arrondis au lieu du flat Office */ font-weight: 600 !important; border: none !important; } .badge-saas { 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. MODE TEST (Zébrures conservées du source) === */ .mode-test-banner { background: repeating-linear-gradient( 45deg, #ffaa44, #ffaa44 10px, #323130 10px, #323130 20px ); color: white; font-weight: 800; text-align: center; }