ebene/newdesigngestionnaire
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fe

Browse Source
This commit is contained in:
KONE SOREL 2026-02-25 10:17:52 +00:00
parent accbdd1cfd
commit 5c0794e3ad
1 changed files with 74 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

191
Bootstrap_new/css/theme-modern.css
View File

@ -1,75 +1,65 @@
/* ============================= /* =============================
INTER SANTÉ — THEME MODERN INTER SANTÉ — THEME MODERN
Portail Gestionnaire — v2025 SaaS Premium UI v2025
Palette extraite du logo officiel
============================= */ ============================= */
/* === FONTS === */ /* === FONTS === */
@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'); @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');
/* === CSS VARIABLES — PORTAIL GESTIONNAIRE === /* === CSS VARIABLES === */
Couleurs extraites pixel par pixel du logo Inter Santé :
#0082c8 → bleu principal (fond du carré logo)
#00294a → bleu nuit (sidebar, profondeur)
#4bb9f5 → cyan vif (croix + du logo, accents)
#d0f8f8 → cyan pâle (reflet lumineux du +)
*/
:root { :root {
/* ── Brand bleu Inter Santé Gestionnaire ── */ /* Brand Colors */
--color-primary: #0082c8; --color-primary: #1a6b4a;
--color-primary-light: #1a9ee0; --color-primary-light: #25a06e;
--color-primary-dark: #00557a; --color-primary-dark: #114532;
--color-primary-ghost: rgba(0, 130, 200, 0.08); --color-primary-ghost: rgba(26, 107, 74, 0.08);
/* ── Accent cyan — croix + du logo ── */ /* Accent / Status */
--color-accent: #4bb9f5; --color-accent: #0abf7c;
--color-accent-soft: #d0f8f8;
/* ── Status ── */
--color-urgent: #e63946; --color-urgent: #e63946;
--color-warning: #f4a261; --color-warning: #f4a261;
--color-success: #00b894; --color-success: #2ec4b6;
--color-info: #0082c8; --color-info: #3a86ff;
--color-neutral: #6c757d; --color-neutral: #6c757d;
/* ── Backgrounds — teinté bleu Inter Santé ── */ /* Backgrounds */
--bg-base: #f0f6fb; --bg-base: #f4f6f9;
--bg-surface: #ffffff; --bg-surface: #ffffff;
--bg-surface-2: #f5f9fd; --bg-surface-2: #f8fafc;
--bg-sidebar: #00294a; --bg-sidebar: #0f2d20;
--bg-header: #ffffff; --bg-header: #ffffff;
/* ── Text ── */ /* Text */
--text-primary: #0d2136; --text-primary: #1a2332;
--text-secondary: #4a6680; --text-secondary: #6b7280;
--text-muted: #8aa5bb; --text-muted: #9ca3af;
--text-inverse: #ffffff; --text-inverse: #ffffff;
/* ── Borders teinté bleu ── */ /* Borders */
--border-light: #daeaf5; --border-light: #e8ecf0;
--border-medium: #b8d4e8; --border-medium: #d1d5db;
/* ── Radius ── */ /* Spacing & Radius */
--radius-sm: 6px; --radius-sm: 6px;
--radius-md: 12px; --radius-md: 12px;
--radius-lg: 16px; --radius-lg: 16px;
--radius-xl: 24px; --radius-xl: 24px;
--radius-full: 9999px; --radius-full: 9999px;
/* ── Shadows teintées bleu ── */ /* Shadows */
--shadow-xs: 0 1px 3px rgba(0,82,130,.06), 0 1px 2px rgba(0,82,130,.04); --shadow-xs: 0 1px 3px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.04);
--shadow-sm: 0 2px 8px rgba(0,82,130,.09), 0 1px 3px rgba(0,82,130,.05); --shadow-sm: 0 2px 8px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.05);
--shadow-md: 0 4px 16px rgba(0,82,130,.11), 0 2px 6px rgba(0,82,130,.06); --shadow-md: 0 4px 16px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.05);
--shadow-lg: 0 8px 32px rgba(0,82,130,.13), 0 4px 12px rgba(0,82,130,.07); --shadow-lg: 0 8px 32px rgba(0,0,0,.10), 0 4px 12px rgba(0,0,0,.06);
--shadow-xl: 0 16px 48px rgba(0,82,130,.16), 0 8px 24px rgba(0,82,130,.09); --shadow-xl: 0 16px 48px rgba(0,0,0,.12), 0 8px 24px rgba(0,0,0,.07);
--shadow-primary: 0 4px 20px rgba(0, 130, 200, 0.35); --shadow-primary: 0 4px 20px rgba(26,107,74,.25);
/* ── Transitions ── */ /* Transitions */
--transition-fast: 0.15s ease; --transition-fast: 0.15s ease;
--transition-base: 0.25s ease; --transition-base: 0.25s ease;
--transition-slow: 0.4s cubic-bezier(.4,0,.2,1); --transition-slow: 0.4s cubic-bezier(.4,0,.2,1);
/* ── Layout ── */ /* Layout */
--sidebar-width: 240px; --sidebar-width: 240px;
--sidebar-collapsed: 68px; --sidebar-collapsed: 68px;
--header-height: 64px; --header-height: 64px;
@ -105,34 +95,12 @@ h1, h2, h3, h4, h5, h6,
============================== */ ============================== */
#header { #header {
height: var(--header-height); height: var(--header-height);
/* Gradient bleu Inter Santé — du bleu logo vers bleu nuit */ background: var(--bg-header);
background: linear-gradient(135deg, #0082c8 0%, #005fa3 55%, #00294a 100%); border-bottom: 1px solid var(--border-light);
border-bottom: none; box-shadow: var(--shadow-xs);
box-shadow: 0 2px 16px rgba(0, 41, 74, 0.35);
padding: 0 1.25rem; padding: 0 1.25rem;
z-index: 1000; z-index: 1000;
transition: background var(--transition-base); transition: background var(--transition-base);
position: relative;
overflow: hidden;
}
/* Reflet lumineux cyan (évoque la croix + du logo) */
#header::before {
content: '';
position: absolute;
top: -40px; right: 120px;
width: 200px; height: 140px;
background: radial-gradient(ellipse, rgba(75,185,245,0.22) 0%, transparent 70%);
pointer-events: none;
}
/* Ligne cyan fine en bas du header */
#header::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent 0%, #4bb9f5 40%, #d0f8f8 60%, transparent 100%);
opacity: 0.7;
} }
#header.mode-test { #header.mode-test {
@ -145,26 +113,24 @@ h1, h2, h3, h4, h5, h6,
} }
#header .logo img { #header .logo img {
width: 38px; width: 34px;
height: 38px; height: 34px;
border-radius: var(--radius-sm);
object-fit: contain; object-fit: contain;
/* Légère ombre pour faire ressortir le logo sur le fond bleu */
filter: drop-shadow(0 1px 4px rgba(0,0,0,0.25));
} }
#header .logo span { #header .logo span {
font-family: 'Syne', sans-serif; font-family: 'Syne', sans-serif;
font-weight: 800; font-weight: 800;
font-size: 1.05rem; font-size: 1.05rem;
color: #ffffff; color: var(--color-primary);
letter-spacing: 0.04em; letter-spacing: -0.02em;
text-shadow: 0 1px 3px rgba(0,0,0,0.2);
} }
/* Toggle sidebar button — sur fond bleu */ /* Toggle sidebar button */
.toggle-sidebar-btn { .toggle-sidebar-btn {
font-size: 1.4rem; font-size: 1.4rem;
color: rgba(255,255,255,0.75); color: var(--text-secondary);
cursor: pointer; cursor: pointer;
padding: 4px 8px; padding: 4px 8px;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
@ -172,11 +138,11 @@ h1, h2, h3, h4, h5, h6,
margin-left: 12px; margin-left: 12px;
} }
.toggle-sidebar-btn:hover { .toggle-sidebar-btn:hover {
color: #ffffff; color: var(--color-primary);
background: rgba(255,255,255,0.15); background: var(--color-primary-ghost);
} }
/* Breadcrumb — sur fond bleu */ /* Breadcrumb */
.breadcrumb { .breadcrumb {
background: transparent !important; background: transparent !important;
padding: 0 !important; padding: 0 !important;
@ -184,31 +150,25 @@ h1, h2, h3, h4, h5, h6,
font-size: 0.8rem; font-size: 0.8rem;
} }
.breadcrumb-item a { .breadcrumb-item a {
color: rgba(255,255,255,0.65); color: var(--text-muted);
text-decoration: none; text-decoration: none;
display: flex;
align-items: center;
gap: 4px;
transition: color var(--transition-fast); transition: color var(--transition-fast);
} }
.breadcrumb-item a:hover { color: #ffffff; } .breadcrumb-item a:hover { color: var(--color-primary); }
.breadcrumb-item.active { .breadcrumb-item.active { color: var(--color-primary); font-weight: 600; }
color: var(--color-accent-soft, #d0f8f8); .breadcrumb-item + .breadcrumb-item::before { color: var(--border-medium); }
font-weight: 600;
}
.breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,0.35); }
/* Header Nav Icons — sur fond bleu */ /* Header Nav Icons */
#header .header-nav .nav-link { #header .header-nav .nav-link {
color: rgba(255,255,255,0.80); color: var(--text-secondary);
padding: 6px 10px; padding: 6px 10px;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
transition: all var(--transition-fast); transition: all var(--transition-fast);
position: relative; position: relative;
} }
#header .header-nav .nav-link:hover { #header .header-nav .nav-link:hover {
color: #ffffff; color: var(--color-primary);
background: rgba(255,255,255,0.15); background: var(--color-primary-ghost);
} }
.badge-number { .badge-number {
@ -223,54 +183,51 @@ h1, h2, h3, h4, h5, h6,
align-items: center; align-items: center;
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
border: 2px solid rgba(0,82,130,0.6); border: 2px solid white;
transition: transform var(--transition-fast); transition: transform var(--transition-fast);
} }
.badge-number:hover { transform: scale(1.2); } .badge-number:hover { transform: scale(1.2); }
/* Company logo area — verre dépoli sur fond bleu */ /* Company logo area */
.company-logo-area { .company-logo-area {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
padding: 5px 10px; padding: 4px 10px;
border-radius: var(--radius-md); border-radius: var(--radius-md);
border: 1px solid rgba(255,255,255,0.25); border: 1px solid var(--border-light);
background: rgba(255,255,255,0.12); background: var(--bg-surface-2);
backdrop-filter: blur(6px);
transition: all var(--transition-fast); transition: all var(--transition-fast);
max-width: 180px; max-width: 180px;
text-decoration: none;
} }
.company-logo-area:hover { .company-logo-area:hover {
background: rgba(255,255,255,0.22); border-color: var(--color-primary-light);
border-color: rgba(255,255,255,0.45); box-shadow: var(--shadow-sm);
box-shadow: 0 2px 10px rgba(0,0,0,0.15);
} }
.company-logo-area img { height: 32px; width: auto; object-fit: contain; } .company-logo-area img { height: 32px; width: auto; object-fit: contain; }
.company-logo-area .company-name { .company-logo-area .company-name {
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 600; font-weight: 600;
color: #ffffff; color: var(--text-primary);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
/* User Initials Badge — cyan vif sur fond bleu */ /* User Initials Badge */
.initials { .initials {
width: 32px; width: 32px;
height: 32px; height: 32px;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
background: linear-gradient(135deg, #4bb9f5, #d0f8f8); background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
color: #00294a; color: white;
font-family: 'Syne', sans-serif; font-family: 'Syne', sans-serif;
font-weight: 800; font-weight: 700;
font-size: 0.72rem; font-size: 0.75rem;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
box-shadow: 0 2px 8px rgba(0,0,0,0.2); box-shadow: var(--shadow-primary);
transition: transform var(--transition-fast); transition: transform var(--transition-fast);
} }
.nav-link:hover .initials { transform: scale(1.08); } .nav-link:hover .initials { transform: scale(1.08); }
@ -323,8 +280,8 @@ h1, h2, h3, h4, h5, h6,
content: ''; content: '';
position: absolute; position: absolute;
top: 0; left: 0; right: 0; top: 0; left: 0; right: 0;
height: 3px; height: 2px;
background: linear-gradient(90deg, #4bb9f5 0%, #d0f8f8 50%, #4bb9f5 100%); background: linear-gradient(90deg, var(--color-accent), var(--color-primary-light));
} }
/* Sidebar Nav */ /* Sidebar Nav */
@ -505,7 +462,7 @@ h1, h2, h3, h4, h5, h6,
.scrollmenu a:hover { .scrollmenu a:hover {
background: var(--color-primary-ghost); background: var(--color-primary-ghost);
color: var(--color-primary); color: var(--color-primary);
border-color: rgba(0,130,200,0.25); border-color: rgba(26,107,74,0.2);
} }
.scrollmenu a.active { .scrollmenu a.active {
@ -735,7 +692,7 @@ h1, h2, h3, h4, h5, h6,
.policy-item:hover { .policy-item:hover {
background: var(--color-primary-ghost); background: var(--color-primary-ghost);
color: var(--color-primary); color: var(--color-primary);
border-color: rgba(0,130,200,0.25); border-color: rgba(26,107,74,0.2);
padding-left: 14px; padding-left: 14px;
} }
@ -925,11 +882,11 @@ h1, h2, h3, h4, h5, h6,
.btn-primary { .btn-primary {
background: var(--color-primary) !important; background: var(--color-primary) !important;
color: white !important; color: white !important;
box-shadow: 0 2px 8px rgba(0,130,200,0.35); box-shadow: 0 2px 8px rgba(26,107,74,0.3);
} }
.btn-primary:hover { .btn-primary:hover {
background: var(--color-primary-light) !important; background: var(--color-primary-light) !important;
box-shadow: 0 4px 16px rgba(0,130,200,0.45); box-shadow: 0 4px 16px rgba(26,107,74,0.4);
transform: translateY(-1px); transform: translateY(-1px);
} }
@ -973,7 +930,7 @@ h1, h2, h3, h4, h5, h6,
} }
.form-control:focus, .form-select:focus { .form-control:focus, .form-select:focus {
border-color: var(--color-primary-light); border-color: var(--color-primary-light);
box-shadow: 0 0 0 3px rgba(0,130,200,0.12); box-shadow: 0 0 0 3px rgba(26,107,74,0.1);
outline: none; outline: none;
} }