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

ga

Browse Source
This commit is contained in:
KONE SOREL 2026-02-25 10:12:10 +00:00
parent c159dccd60
commit accbdd1cfd
1 changed files with 117 additions and 74 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,65 +1,75 @@
/* ============================= /* =============================
INTER SANTÉ — THEME MODERN INTER SANTÉ — THEME MODERN
SaaS Premium UI v2025 Portail Gestionnaire — 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 === */ /* === CSS VARIABLES — PORTAIL GESTIONNAIRE ===
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 Colors */ /* ── Brand bleu Inter Santé Gestionnaire ── */
--color-primary: #1a6b4a; --color-primary: #0082c8;
--color-primary-light: #25a06e; --color-primary-light: #1a9ee0;
--color-primary-dark: #114532; --color-primary-dark: #00557a;
--color-primary-ghost: rgba(26, 107, 74, 0.08); --color-primary-ghost: rgba(0, 130, 200, 0.08);
/* Accent / Status */ /* ── Accent cyan — croix + du logo ── */
--color-accent: #0abf7c; --color-accent: #4bb9f5;
--color-accent-soft: #d0f8f8;
/* ── Status ── */
--color-urgent: #e63946; --color-urgent: #e63946;
--color-warning: #f4a261; --color-warning: #f4a261;
--color-success: #2ec4b6; --color-success: #00b894;
--color-info: #3a86ff; --color-info: #0082c8;
--color-neutral: #6c757d; --color-neutral: #6c757d;
/* Backgrounds */ /* ── Backgrounds — teinté bleu Inter Santé ── */
--bg-base: #f4f6f9; --bg-base: #f0f6fb;
--bg-surface: #ffffff; --bg-surface: #ffffff;
--bg-surface-2: #f8fafc; --bg-surface-2: #f5f9fd;
--bg-sidebar: #0f2d20; --bg-sidebar: #00294a;
--bg-header: #ffffff; --bg-header: #ffffff;
/* Text */ /* ── Text ── */
--text-primary: #1a2332; --text-primary: #0d2136;
--text-secondary: #6b7280; --text-secondary: #4a6680;
--text-muted: #9ca3af; --text-muted: #8aa5bb;
--text-inverse: #ffffff; --text-inverse: #ffffff;
/* Borders */ /* ── Borders teinté bleu ── */
--border-light: #e8ecf0; --border-light: #daeaf5;
--border-medium: #d1d5db; --border-medium: #b8d4e8;
/* Spacing & Radius */ /* ── 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 */ /* ── Shadows teintées bleu ── */
--shadow-xs: 0 1px 3px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.04); --shadow-xs: 0 1px 3px rgba(0,82,130,.06), 0 1px 2px rgba(0,82,130,.04);
--shadow-sm: 0 2px 8px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.05); --shadow-sm: 0 2px 8px rgba(0,82,130,.09), 0 1px 3px rgba(0,82,130,.05);
--shadow-md: 0 4px 16px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.05); --shadow-md: 0 4px 16px rgba(0,82,130,.11), 0 2px 6px rgba(0,82,130,.06);
--shadow-lg: 0 8px 32px rgba(0,0,0,.10), 0 4px 12px rgba(0,0,0,.06); --shadow-lg: 0 8px 32px rgba(0,82,130,.13), 0 4px 12px rgba(0,82,130,.07);
--shadow-xl: 0 16px 48px rgba(0,0,0,.12), 0 8px 24px rgba(0,0,0,.07); --shadow-xl: 0 16px 48px rgba(0,82,130,.16), 0 8px 24px rgba(0,82,130,.09);
--shadow-primary: 0 4px 20px rgba(26,107,74,.25); --shadow-primary: 0 4px 20px rgba(0, 130, 200, 0.35);
/* 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;
@ -95,12 +105,34 @@ h1, h2, h3, h4, h5, h6,
============================== */ ============================== */
#header { #header {
height: var(--header-height); height: var(--header-height);
background: var(--bg-header); /* Gradient bleu Inter Santé — du bleu logo vers bleu nuit */
border-bottom: 1px solid var(--border-light); background: linear-gradient(135deg, #0082c8 0%, #005fa3 55%, #00294a 100%);
box-shadow: var(--shadow-xs); border-bottom: none;
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 {
@ -113,24 +145,26 @@ h1, h2, h3, h4, h5, h6,
} }
#header .logo img { #header .logo img {
width: 34px; width: 38px;
height: 34px; height: 38px;
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: var(--color-primary); color: #ffffff;
letter-spacing: -0.02em; letter-spacing: 0.04em;
text-shadow: 0 1px 3px rgba(0,0,0,0.2);
} }
/* Toggle sidebar button */ /* Toggle sidebar button — sur fond bleu */
.toggle-sidebar-btn { .toggle-sidebar-btn {
font-size: 1.4rem; font-size: 1.4rem;
color: var(--text-secondary); color: rgba(255,255,255,0.75);
cursor: pointer; cursor: pointer;
padding: 4px 8px; padding: 4px 8px;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
@ -138,11 +172,11 @@ h1, h2, h3, h4, h5, h6,
margin-left: 12px; margin-left: 12px;
} }
.toggle-sidebar-btn:hover { .toggle-sidebar-btn:hover {
color: var(--color-primary); color: #ffffff;
background: var(--color-primary-ghost); background: rgba(255,255,255,0.15);
} }
/* Breadcrumb */ /* Breadcrumb — sur fond bleu */
.breadcrumb { .breadcrumb {
background: transparent !important; background: transparent !important;
padding: 0 !important; padding: 0 !important;
@ -150,25 +184,31 @@ h1, h2, h3, h4, h5, h6,
font-size: 0.8rem; font-size: 0.8rem;
} }
.breadcrumb-item a { .breadcrumb-item a {
color: var(--text-muted); color: rgba(255,255,255,0.65);
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: var(--color-primary); } .breadcrumb-item a:hover { color: #ffffff; }
.breadcrumb-item.active { color: var(--color-primary); font-weight: 600; } .breadcrumb-item.active {
.breadcrumb-item + .breadcrumb-item::before { color: var(--border-medium); } color: var(--color-accent-soft, #d0f8f8);
font-weight: 600;
}
.breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,0.35); }
/* Header Nav Icons */ /* Header Nav Icons — sur fond bleu */
#header .header-nav .nav-link { #header .header-nav .nav-link {
color: var(--text-secondary); color: rgba(255,255,255,0.80);
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: var(--color-primary); color: #ffffff;
background: var(--color-primary-ghost); background: rgba(255,255,255,0.15);
} }
.badge-number { .badge-number {
@ -183,51 +223,54 @@ 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 white; border: 2px solid rgba(0,82,130,0.6);
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 */ /* Company logo area — verre dépoli sur fond bleu */
.company-logo-area { .company-logo-area {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
padding: 4px 10px; padding: 5px 10px;
border-radius: var(--radius-md); border-radius: var(--radius-md);
border: 1px solid var(--border-light); border: 1px solid rgba(255,255,255,0.25);
background: var(--bg-surface-2); background: rgba(255,255,255,0.12);
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 {
border-color: var(--color-primary-light); background: rgba(255,255,255,0.22);
box-shadow: var(--shadow-sm); border-color: rgba(255,255,255,0.45);
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: var(--text-primary); color: #ffffff;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
/* User Initials Badge */ /* User Initials Badge — cyan vif sur fond bleu */
.initials { .initials {
width: 32px; width: 32px;
height: 32px; height: 32px;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light)); background: linear-gradient(135deg, #4bb9f5, #d0f8f8);
color: white; color: #00294a;
font-family: 'Syne', sans-serif; font-family: 'Syne', sans-serif;
font-weight: 700; font-weight: 800;
font-size: 0.75rem; font-size: 0.72rem;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
box-shadow: var(--shadow-primary); box-shadow: 0 2px 8px rgba(0,0,0,0.2);
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); }
@ -280,8 +323,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: 2px; height: 3px;
background: linear-gradient(90deg, var(--color-accent), var(--color-primary-light)); background: linear-gradient(90deg, #4bb9f5 0%, #d0f8f8 50%, #4bb9f5 100%);
} }
/* Sidebar Nav */ /* Sidebar Nav */
@ -462,7 +505,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(26,107,74,0.2); border-color: rgba(0,130,200,0.25);
} }
.scrollmenu a.active { .scrollmenu a.active {
@ -692,7 +735,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(26,107,74,0.2); border-color: rgba(0,130,200,0.25);
padding-left: 14px; padding-left: 14px;
} }
@ -882,11 +925,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(26,107,74,0.3); box-shadow: 0 2px 8px rgba(0,130,200,0.35);
} }
.btn-primary:hover { .btn-primary:hover {
background: var(--color-primary-light) !important; background: var(--color-primary-light) !important;
box-shadow: 0 4px 16px rgba(26,107,74,0.4); box-shadow: 0 4px 16px rgba(0,130,200,0.45);
transform: translateY(-1px); transform: translateY(-1px);
} }
@ -930,7 +973,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(26,107,74,0.1); box-shadow: 0 0 0 3px rgba(0,130,200,0.12);
outline: none; outline: none;
} }