From 9200ec9b4abecca62dcbbb592e4ab04a8d754238 Mon Sep 17 00:00:00 2001 From: KONE SOREL Date: Mon, 6 Apr 2026 12:40:25 +0000 Subject: [PATCH] der --- Bootstrap_new/css/style-portail.css | 337 +++++++++++----------------- 1 file changed, 128 insertions(+), 209 deletions(-) diff --git a/Bootstrap_new/css/style-portail.css b/Bootstrap_new/css/style-portail.css index 906c6060..91b149cb 100644 --- a/Bootstrap_new/css/style-portail.css +++ b/Bootstrap_new/css/style-portail.css @@ -1,253 +1,172 @@ /* ============================================================ - INTER SANTÉ — LOGIN UI v2026 - Style exclusif à la page de connexion (Gabarit Carrousel) + INTER SANTÉ — THEME MASTER (OFFICE 365 BLUE + ROUNDED) + RECONSTRUCTION BASÉE SUR LA STRUCTURE DE L'IMAGE 1 ============================================================ */ +/* === 1. VARIABLES & COLORIMÉTRIE OUTLOOK === */ :root { - --login-primary: #0088cf; - --login-bg-light: #f3f2f1; - --login-text-dark: #323130; - --login-radius: 12px; - --login-transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1); + /* Bleu Microsoft Outlook 365 Officiel */ + --color-primary: #0078d4; + --color-primary-light: #2b88d8; + --color-primary-dark: #005a9e; + --color-primary-ghost: #eff6fc; + + --color-success: #107c10; /* Vert Excel pour validations */ + --color-urgent: #d13438; /* Rouge Outlook */ + --color-warning: #ffaa44; + + /* Backgrounds Outlook (Haute Lisibilité) */ + --bg-app: #f3f2f1; /* Gris neutre Image 1 */ + --bg-card: #ffffff; + --text-main: #323130; /* Noir Microsoft pour lecture longue */ + --text-muted: #605e5c; + --border-light: #edebe9; + + /* Conservation de vos arrondis Image 1 */ + --radius-lg: 12px; + --radius-md: 8px; + --shadow-sm: 0 2px 8px rgba(0,0,0,0.05); } -/* --- STRUCTURE PRINCIPALE (NO-SCROLL) --- */ -html, body { - height: 100%; - margin: 0; - overflow: hidden; /* Verrouille le scroll sur toute la page */ - font-family: 'DM Sans', 'Poppins', sans-serif; +/* === 2. BASE & LISIBILITÉ (DM Sans conservé) === */ +body { + background-color: var(--bg-app) !important; + color: var(--text-main); + font-family: 'DM Sans', 'Segoe UI', sans-serif !important; + font-size: 0.92rem; /* Taille idéale pour données denses */ } -.login-wrapper { - display: flex; - height: 100vh; - width: 100vw; +/* === 3. HEADER (L'esprit Outlook 365) === */ +#header { + background-color: var(--color-primary) !important; /* Bleu Uni Outlook */ + height: 50px !important; + box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; + border-bottom: none !important; } -/* --- SECTION GAUCHE : CARROUSEL --- */ -.slide-container { - width: 40vw; - height: 100vh; - position: relative; - background-color: #000; +#header .logo span { + color: #ffffff !important; + font-family: 'Syne', sans-serif; + font-weight: 700; + letter-spacing: 0.5px; } -.slides { - width: 100%; - height: 100%; - position: relative; - overflow: hidden; +/* === 4. SIDEBAR (Navigation Pro) === */ +#sidebar { + background: #faf9f8 !important; /* Gris très clair Office */ + border-right: 1px solid var(--border-light) !important; } -.slides img { - width: 100%; - height: 100%; - position: absolute; - object-fit: cover; - opacity: 0; - transition: opacity 1s ease-in-out; - z-index: 1; +.sidebar-nav .nav-link { + color: var(--text-main) !important; + font-weight: 500; + margin: 4px 10px; + border-radius: var(--radius-md); + transition: all 0.2s ease; } -.slides img.active { - opacity: 1; - z-index: 2; +.sidebar-nav .nav-link:hover, +.sidebar-nav .nav-link.active-main { + background-color: var(--color-primary-ghost) !important; + color: var(--color-primary) !important; } -/* Navigation Carrousel */ -.nav-btn { - position: absolute; - top: 50%; - transform: translateY(-50%); - padding: 15px; - color: white; - font-size: 20px; - cursor: pointer; - z-index: 10; - background: rgba(0, 136, 207, 0.2); - border-radius: 50%; - transition: var(--login-transition); - display: flex; - align-items: center; - justify-content: center; - width: 50px; - height: 50px; - border: none; +/* === 5. TABLEAUX (RECONSTRUCTION DE L'IMAGE 1) === */ +/* C'est ici que l'on retrouve la force de votre ancienne version */ +.table-responsive { + background: #ffffff; + border-radius: var(--radius-lg); + border: 1px solid var(--border-light); + overflow: hidden; } -.nav-btn:hover { - background: var(--login-primary); - transform: translateY(-50%) scale(1.1); +.table thead th { + background-color: #faf9f8 !important; /* Entête grise comme Image 1 */ + color: var(--text-muted); + font-weight: 700; + text-transform: uppercase; + font-size: 0.75rem; + border-bottom: 2px solid var(--color-primary) !important; /* Ligne d'accentuation Bleue */ + padding: 12px !important; } -.prev { left: 20px; } -.next { right: 20px; } - -/* Indicateurs (Dots) */ -.dotsContainer { - position: absolute; - bottom: 20px; - left: 50%; - transform: translateX(-50%); - z-index: 10; - display: flex; - gap: 8px; +.table tbody tr td { + padding: 10px 12px !important; + border-bottom: 1px solid #f3f2f1 !important; + vertical-align: middle; } -.dot { - width: 10px; - height: 10px; - border-radius: 50%; - background: rgba(255, 255, 255, 0.3); - cursor: pointer; - transition: var(--login-transition); - border: 1px solid rgba(255, 255, 255, 0.5); +.table tbody tr:hover { + background-color: #f9f9f9 !important; + cursor: pointer; } -.dot.active { - background: var(--login-primary); - width: 25px; /* Effet pilule moderne */ - border-radius: 10px; +/* === 6. CARDS & KPI (Style Card Image 1) === */ +.card { + border: 1px solid var(--border-light) !important; + border-radius: var(--radius-lg) !important; + box-shadow: var(--shadow-sm) !important; } -/* --- SECTION DROITE : FORMULAIRE --- */ -.form-side { - flex: 1; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - background: #ffffff; - padding: 2rem; - position: relative; +.kpi-card { + border-top: 4px solid var(--color-primary) !important; /* Barre bleue supérieure */ } -.logo-container { - margin-bottom: 2.5rem; - text-align: center; +/* === 7. CONTEXTE & ÉLÉMENTS SPÉCIFIQUES (100% Source) === */ +#barre_laterale_d { + background: #ffffff; + border-left: 2px solid var(--border-light); } -.logo-container img { - width: 130px; - height: auto; - filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1)); +.context-card { + background: #faf9f8; + border: 1px solid var(--border-light); + border-radius: var(--radius-md); + padding: 10px; } -/* Card de connexion */ -.login-card { - width: 100%; - max-width: 380px; +/* Les liens h6 que vous aviez dans l'Image 1 */ +h6 a { + color: var(--color-primary); + font-weight: 600; + text-decoration: underline; +} +h6 a:hover { + background-color: var(--color-primary); + color: white; + text-decoration: none; + padding: 2px 5px; + border-radius: 4px; } -/* Groupes d'entrée personnalisés */ -.form-group-custom { - margin-bottom: 1.25rem; - text-align: left; +/* === 8. PATTERNS TECHNIQUES (Skeleton, Bulk, etc.) === */ +.skeleton { + background: linear-gradient(90deg, #f3f2f1 25%, #edebe9 50%, #f3f2f1 75%); + background-size: 200% 100%; + animation: skeleton-loading 1.5s infinite; } -.form-group-custom label { - display: block; - font-weight: 600; - font-size: 0.85rem; - color: var(--login-text-dark); - margin-bottom: 6px; - text-transform: uppercase; - letter-spacing: 0.03em; +/* Bannière de test zébrée (Noir et Jaune Outlook Style) */ +.mode-test-banner { + background: repeating-linear-gradient(45deg, #ffaa44, #ffaa44 10px, #323130 10px, #323130 20px); + color: white; + font-weight: 800; + padding: 5px; } -.input-wrapper { - position: relative; +/* === 9. BOUTONS & BADGES === */ +.btn-primary { + background-color: var(--color-primary) !important; + border-radius: var(--radius-md) !important; + font-weight: 600 !important; } -.input-wrapper i { - position: absolute; - left: 15px; - top: 50%; - transform: translateY(-50%); - color: #adb5bd; - font-size: 1rem; - transition: color 0.3s ease; +.badge-saas { + border-radius: 4px; + padding: 4px 10px; + font-weight: 700; + font-size: 0.7rem; } -.input-custom { - width: 100% !important; - padding: 12px 15px 12px 45px !important; - border: 2px solid #edf2f7 !important; - border-radius: var(--login-radius) !important; - font-size: 1rem !important; - color: var(--login-text-dark) !important; - background-color: #f8fafc !important; - transition: all 0.3s ease !important; -} - -.input-custom:focus { - border-color: var(--login-primary) !important; - background-color: #fff !important; - box-shadow: 0 0 0 4px rgba(0, 136, 207, 0.1) !important; - outline: none !important; -} - -.input-custom:focus + i { - color: var(--login-primary); -} - -/* Bouton Connexion */ -.login-btn-premium { - width: 100%; - padding: 14px !important; - background: var(--login-primary) !important; - color: white !important; - border: none !important; - border-radius: var(--login-radius) !important; - font-weight: 700 !important; - font-size: 1.05rem !important; - cursor: pointer !important; - transition: all 0.3s ease !important; - margin-top: 1rem; - display: flex; - align-items: center; - justify-content: center; - gap: 10px; - box-shadow: 0 4px 12px rgba(0, 136, 207, 0.2); -} - -.login-btn-premium:hover { - background: #0077b5 !important; - transform: translateY(-2px); - box-shadow: 0 6px 18px rgba(0, 136, 207, 0.3); -} - -/* Alertes de maintenance / erreur */ -.alert-login { - border-radius: var(--login-radius); - font-size: 0.85rem; - border: none; - background-color: #fff5f5; - color: #c53030; - padding: 12px; - border-left: 4px solid #c53030; - margin-bottom: 1.5rem; -} - -/* Footer de version */ -.login-footer { - position: absolute; - bottom: 25px; - font-size: 0.75rem; - color: #94a3b8; - font-weight: 500; - letter-spacing: 0.05em; -} - -/* --- RESPONSIVE --- */ -@media (max-width: 992px) { - .slide-container { display: none; } - .form-side { width: 100vw; padding: 20px; } -} - -/* --- UTILS --- */ -.sr-only { - position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; - overflow: hidden; clip: rect(0,0,0,0); border: 0; -} \ No newline at end of file +.status-paid { background: #dff6dd; color: #107c10; } +.status-urgent { background: #fde7e9; color: #a80000; } \ No newline at end of file