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

mono

Browse Source
This commit is contained in:
KONE SOREL 2026-02-25 14:39:14 +00:00
parent befee4a374
commit ff7fb62090
1 changed files with 132 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,44 +1,44 @@
/* ============================= /* =============================
INTER SANTÉ — THEME NEUTRAL PRO INTER SANTÉ — THEME MONOCHROME
SaaS Minimal UI v2025 SaaS Minimal UI v2025
Palette : Charcoal · Gris · Blanc Palette : 100% Niveaux de gris
============================= */ ============================= */
/* === 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 — Niveaux de gris exclusivement === */
:root { :root {
/* Brand Colors — Charcoal / Gris neutre (zéro vert) */ /* Primaires */
--color-primary: #2e3440; /* charcoal foncé */ --color-primary: #1c1c1c; /* quasi-noir */
--color-primary-light: #4c566a; /* slate moyen */ --color-primary-light: #474747; /* gris sombre */
--color-primary-dark: #1a1d24; /* quasi-noir */ --color-primary-dark: #0a0a0a; /* noir profond */
--color-primary-ghost: rgba(46, 52, 64, 0.07); --color-primary-ghost: rgba(0, 0, 0, 0.055);
/* Accent / Status — conservés pour lisibilité fonctionnelle */ /* Accent / Status → tous en niveaux de gris */
--color-accent: #5e6e82; /* gris-bleu neutre */ --color-accent: #5a5a5a; /* gris moyen */
--color-urgent: #c0392b; --color-urgent: #222222; /* très sombre */
--color-warning: #e67e22; --color-warning: #555555; /* gris intermédiaire */
--color-success: #27ae60; --color-success: #737373; /* gris standard */
--color-info: #2980b9; --color-info: #909090; /* gris clair */
--color-neutral: #7f8c8d; --color-neutral: #b0b0b0; /* gris pâle */
/* Backgrounds */ /* Backgrounds */
--bg-base: #f2f3f5; --bg-base: #f0f0f0;
--bg-surface: #ffffff; --bg-surface: #ffffff;
--bg-surface-2: #f8f9fa; --bg-surface-2: #f7f7f7;
--bg-sidebar: #1e2228; /* charcoal très sombre */ --bg-sidebar: #181818; /* noir charbon */
--bg-header: #ffffff; --bg-header: #ffffff;
/* Text — contraste maximal */ /* Text — contraste soigné */
--text-primary: #1a1d24; --text-primary: #111111;
--text-secondary: #4c566a; --text-secondary: #484848;
--text-muted: #7b8a99; --text-muted: #888888;
--text-inverse: #ffffff; --text-inverse: #ffffff;
/* Borders */ /* Borders */
--border-light: #e3e6ea; --border-light: #e2e2e2;
--border-medium: #c8cdd4; --border-medium: #c8c8c8;
/* Spacing & Radius */ /* Spacing & Radius */
--radius-sm: 6px; --radius-sm: 6px;
@ -47,13 +47,13 @@
--radius-xl: 24px; --radius-xl: 24px;
--radius-full: 9999px; --radius-full: 9999px;
/* Shadows — neutres, sans teinte colorée */ /* Shadows — monochrome neutre */
--shadow-xs: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04); --shadow-xs: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
--shadow-sm: 0 2px 8px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.05); --shadow-sm: 0 2px 8px rgba(0,0,0,.09), 0 1px 3px rgba(0,0,0,.06);
--shadow-md: 0 4px 16px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06); --shadow-md: 0 4px 16px rgba(0,0,0,.11), 0 2px 6px rgba(0,0,0,.07);
--shadow-lg: 0 8px 32px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.07); --shadow-lg: 0 8px 32px rgba(0,0,0,.13), 0 4px 12px rgba(0,0,0,.08);
--shadow-xl: 0 16px 48px rgba(0,0,0,.14), 0 8px 24px rgba(0,0,0,.08); --shadow-xl: 0 16px 48px rgba(0,0,0,.16), 0 8px 24px rgba(0,0,0,.09);
--shadow-primary: 0 4px 20px rgba(30,34,40,.20); --shadow-primary: 0 4px 20px rgba(0,0,0,.22);
/* Transitions */ /* Transitions */
--transition-fast: 0.15s ease; --transition-fast: 0.15s ease;
@ -105,7 +105,7 @@ h1, h2, h3, h4, h5, h6,
} }
#header.mode-test { #header.mode-test {
background: linear-gradient(90deg, #5d0000, #c0392b); background: linear-gradient(90deg, #222222, #555555);
} }
#header .logo { #header .logo {
@ -118,6 +118,7 @@ h1, h2, h3, h4, h5, h6,
height: 34px; height: 34px;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
object-fit: contain; object-fit: contain;
filter: grayscale(100%);
} }
#header .logo span { #header .logo span {
@ -172,10 +173,12 @@ h1, h2, h3, h4, h5, h6,
background: var(--color-primary-ghost); background: var(--color-primary-ghost);
} }
/* Badge notification — gris sombre */
.badge-number { .badge-number {
position: absolute; position: absolute;
top: 2px; right: 4px; top: 2px; right: 4px;
background: var(--color-urgent) !important; background: var(--color-urgent) !important;
color: white !important;
font-size: 0.6rem; font-size: 0.6rem;
min-width: 16px; min-width: 16px;
height: 16px; height: 16px;
@ -205,7 +208,11 @@ h1, h2, h3, h4, h5, h6,
border-color: var(--color-primary-light); border-color: var(--color-primary-light);
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
} }
.company-logo-area img { height: 32px; width: auto; object-fit: contain; } .company-logo-area img {
height: 32px; width: auto;
object-fit: contain;
filter: grayscale(100%);
}
.company-logo-area .company-name { .company-logo-area .company-name {
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 600; font-weight: 600;
@ -215,12 +222,12 @@ h1, h2, h3, h4, h5, h6,
text-overflow: ellipsis; text-overflow: ellipsis;
} }
/* User Initials Badge */ /* User Initials Badge — dégradé gris */
.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, #1c1c1c, #474747);
color: white; color: white;
font-family: 'Syne', sans-serif; font-family: 'Syne', sans-serif;
font-weight: 700; font-weight: 700;
@ -258,7 +265,10 @@ h1, h2, h3, h4, h5, h6,
.dropdown-item i { width: 16px; color: var(--text-muted); } .dropdown-item i { width: 16px; color: var(--text-muted); }
/* Language flag */ /* Language flag */
.lang-selector img { border-radius: 3px; } .lang-selector img {
border-radius: 3px;
filter: grayscale(100%);
}
/* ============================== /* ==============================
SIDEBAR SIDEBAR
@ -277,13 +287,13 @@ h1, h2, h3, h4, h5, h6,
padding: 12px 8px; padding: 12px 8px;
} }
/* Liseré supérieur discret — gris clair */ /* Liseré supérieur — blanc discret */
#sidebar::before { #sidebar::before {
content: ''; content: '';
position: absolute; position: absolute;
top: 0; left: 0; right: 0; top: 0; left: 0; right: 0;
height: 2px; height: 2px;
background: linear-gradient(90deg, #4c566a, #7b8a99); background: linear-gradient(90deg, #555555, #aaaaaa);
} }
/* Sidebar Nav */ /* Sidebar Nav */
@ -302,7 +312,7 @@ h1, h2, h3, h4, h5, h6,
gap: 10px; gap: 10px;
padding: 9px 10px; padding: 9px 10px;
border-radius: var(--radius-md); border-radius: var(--radius-md);
color: rgba(255,255,255,0.72); color: rgba(255,255,255,0.68);
font-size: 0.82rem; font-size: 0.82rem;
font-weight: 500; font-weight: 500;
text-decoration: none; text-decoration: none;
@ -313,7 +323,7 @@ h1, h2, h3, h4, h5, h6,
.sidebar-nav > .nav-item > .nav-link:hover, .sidebar-nav > .nav-item > .nav-link:hover,
.sidebar-nav > .nav-item > .nav-link.active { .sidebar-nav > .nav-item > .nav-link.active {
background: rgba(255,255,255,0.10); background: rgba(255,255,255,0.10);
color: white; color: #ffffff;
} }
.sidebar-nav > .nav-item > .nav-link i:first-child { .sidebar-nav > .nav-item > .nav-link i:first-child {
@ -321,7 +331,7 @@ h1, h2, h3, h4, h5, h6,
width: 22px; width: 22px;
text-align: center; text-align: center;
flex-shrink: 0; flex-shrink: 0;
opacity: 0.85; opacity: 0.80;
} }
.sidebar-nav > .nav-item > .nav-link span { .sidebar-nav > .nav-item > .nav-link span {
@ -335,7 +345,7 @@ h1, h2, h3, h4, h5, h6,
white-space: nowrap; white-space: nowrap;
} }
/* Active item : blanc brillant */ /* Item actif : blanc pur */
.sidebar-nav > .nav-item > .nav-link span.active-main { .sidebar-nav > .nav-item > .nav-link span.active-main {
color: #ffffff; color: #ffffff;
font-weight: 700; font-weight: 700;
@ -343,7 +353,7 @@ h1, h2, h3, h4, h5, h6,
.sidebar-nav > .nav-item > .nav-link .bi-chevron-down { .sidebar-nav > .nav-item > .nav-link .bi-chevron-down {
font-size: 0.65rem; font-size: 0.65rem;
opacity: 0.6; opacity: 0.55;
transition: transform var(--transition-base); transition: transform var(--transition-base);
flex-shrink: 0; flex-shrink: 0;
} }
@ -358,7 +368,7 @@ h1, h2, h3, h4, h5, h6,
list-style: none; list-style: none;
padding: 4px 0 4px 32px; padding: 4px 0 4px 32px;
margin: 0; margin: 0;
background: rgba(0,0,0,0.18); background: rgba(0,0,0,0.20);
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
margin-bottom: 2px; margin-bottom: 2px;
} }
@ -369,7 +379,7 @@ h1, h2, h3, h4, h5, h6,
display: block; display: block;
padding: 7px 10px; padding: 7px 10px;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
color: rgba(255,255,255,0.55); color: rgba(255,255,255,0.48);
font-size: 0.78rem; font-size: 0.78rem;
text-decoration: none; text-decoration: none;
transition: all var(--transition-fast); transition: all var(--transition-fast);
@ -378,16 +388,16 @@ h1, h2, h3, h4, h5, h6,
} }
.sidebar-nav .nav-content li a:hover { .sidebar-nav .nav-content li a:hover {
color: white; color: rgba(255,255,255,0.85);
background: rgba(255,255,255,0.07); background: rgba(255,255,255,0.07);
border-left-color: rgba(255,255,255,0.5); border-left-color: rgba(255,255,255,0.45);
padding-left: 14px; padding-left: 14px;
} }
/* Sous-menu actif : fond blanc translucide + bordure blanche */ /* Sous-menu actif — blanc pur */
.sidebar-nav .nav-content li a.active-submenu { .sidebar-nav .nav-content li a.active-submenu {
color: #ffffff; color: #ffffff;
background: rgba(255,255,255,0.12); background: rgba(255,255,255,0.13);
border-left-color: #ffffff; border-left-color: #ffffff;
font-weight: 600; font-weight: 600;
padding-left: 14px; padding-left: 14px;
@ -402,7 +412,7 @@ h1, h2, h3, h4, h5, h6,
width: 5px; width: 5px;
height: 5px; height: 5px;
border-radius: 50%; border-radius: 50%;
background: rgba(255,255,255,0.8); background: rgba(255,255,255,0.75);
} }
/* Separator label */ /* Separator label */
@ -412,7 +422,7 @@ h1, h2, h3, h4, h5, h6,
font-weight: 700; font-weight: 700;
letter-spacing: 0.1em; letter-spacing: 0.1em;
text-transform: uppercase; text-transform: uppercase;
color: rgba(255,255,255,0.28); color: rgba(255,255,255,0.25);
padding: 12px 10px 4px; padding: 12px 10px 4px;
margin-top: 4px; margin-top: 4px;
} }
@ -464,7 +474,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(46,52,64,0.15); border-color: rgba(0,0,0,0.12);
} }
.scrollmenu a.active { .scrollmenu a.active {
@ -474,11 +484,8 @@ h1, h2, h3, h4, h5, h6,
} }
/* Page content wrapper */ /* Page content wrapper */
.page-content { .page-content { padding: 0 16px; }
padding: 0 16px;
}
/* Fixed header within main */
.fixed-div { .fixed-div {
position: sticky; position: sticky;
top: var(--header-height); top: var(--header-height);
@ -493,7 +500,7 @@ h1, h2, h3, h4, h5, h6,
CONTEXT DRAWER (Barre Latérale D) CONTEXT DRAWER (Barre Latérale D)
============================== */ ============================== */
/* Trigger button — gris charcoal */ /* Trigger button — noir charbon */
.btn-info-context { .btn-info-context {
position: fixed; position: fixed;
right: 0; right: 0;
@ -537,9 +544,7 @@ h1, h2, h3, h4, h5, h6,
transition: transform var(--transition-slow); transition: transform var(--transition-slow);
} }
#barre_laterale_d .drawer-inner { #barre_laterale_d .drawer-inner { padding: 16px; }
padding: 16px;
}
/* Drawer Close Button */ /* Drawer Close Button */
.btn-cacher-contexte { .btn-cacher-contexte {
@ -585,7 +590,6 @@ h1, h2, h3, h4, h5, h6,
align-items: center; align-items: center;
gap: 6px; gap: 6px;
} }
/* Icône label — gris moyen */
.context-card-label i { color: var(--color-primary-light); } .context-card-label i { color: var(--color-primary-light); }
.context-card-label a { .context-card-label a {
@ -694,7 +698,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(46,52,64,0.18); border-color: rgba(0,0,0,0.15);
padding-left: 14px; padding-left: 14px;
} }
@ -710,6 +714,7 @@ h1, h2, h3, h4, h5, h6,
border-radius: var(--radius-md); border-radius: var(--radius-md);
box-shadow: var(--shadow-md); box-shadow: var(--shadow-md);
border: 3px solid white; border: 3px solid white;
filter: grayscale(100%);
transition: transform var(--transition-base); transition: transform var(--transition-base);
cursor: pointer; cursor: pointer;
} }
@ -735,11 +740,14 @@ h1, h2, h3, h4, h5, h6,
border-color: var(--color-primary-light); border-color: var(--color-primary-light);
color: var(--color-primary); color: var(--color-primary);
} }
.change-pwd-link img { width: 22px; } .change-pwd-link img {
width: 22px;
filter: grayscale(100%);
}
/* Devis mode banner */ /* Devis mode banner */
.mode-devis-banner { .mode-devis-banner {
background: linear-gradient(135deg, #3a3a4a, #55556a); background: linear-gradient(135deg, #2a2a2a, #545454);
color: white; color: white;
text-align: center; text-align: center;
font-family: 'Syne', sans-serif; font-family: 'Syne', sans-serif;
@ -774,7 +782,7 @@ h1, h2, h3, h4, h5, h6,
--bs-table-striped-color: var(--text-primary) !important; --bs-table-striped-color: var(--text-primary) !important;
} }
/* En-tête : charcoal sombre */ /* En-tête : noir charbon — texte blanc */
.table thead tr { .table thead tr {
background: var(--color-primary) !important; background: var(--color-primary) !important;
color: white !important; color: white !important;
@ -809,19 +817,20 @@ h1, h2, h3, h4, h5, h6,
.table tr:last-child td { border-bottom: none !important; } .table tr:last-child td { border-bottom: none !important; }
.table tbody tr { .table tbody tr { transition: all var(--transition-fast); }
transition: all var(--transition-fast);
}
.table tbody tr:hover { .table tbody tr:hover {
background: var(--color-primary-ghost) !important; background: var(--color-primary-ghost) !important;
font-style: normal !important; font-style: normal !important;
} }
/* Bordure gauche gris moyen au survol */
.table tbody tr:hover td:first-child { .table tbody tr:hover td:first-child {
border-left: 3px solid var(--color-primary-light); border-left: 3px solid var(--color-primary-light);
} }
/* Status Badges */ /* ==============================
STATUS BADGES — niveaux de gris
Hiérarchie visuelle par luminosité
============================== */
.badge-status { .badge-status {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@ -840,11 +849,17 @@ h1, h2, h3, h4, h5, h6,
border-radius: 50%; border-radius: 50%;
background: currentColor; background: currentColor;
} }
.badge-valide { background: rgba(39,174,96,0.10); color: #1e8449; }
.badge-urgent { background: rgba(192,57,43,0.10); color: var(--color-urgent); } /* Valide → gris très sombre + fond très clair */
.badge-attente { background: rgba(230,126,34,0.10); color: #b9720a; } .badge-valide { background: #ebebeb; color: #1c1c1c; border: 1px solid #d0d0d0; }
.badge-info { background: rgba(41,128,185,0.10); color: #1a6898; } /* Urgent → fond blanc, contour noir, texte noir */
.badge-inactive { background: rgba(127,140,141,0.10); color: var(--color-neutral); } .badge-urgent { background: #ffffff; color: #111111; border: 1px solid #111111; }
/* Attente → fond gris clair, texte gris moyen */
.badge-attente { background: #e8e8e8; color: #454545; border: 1px solid #c0c0c0; }
/* Info → fond gris pâle, texte gris moyen-clair*/
.badge-info { background: #f0f0f0; color: #606060; border: 1px solid #d0d0d0; }
/* Inactive → fond blanc cassé, texte gris pâle */
.badge-inactive { background: #f5f5f5; color: #999999; border: 1px solid #e0e0e0; }
/* ============================== /* ==============================
CARDS CARDS
@ -865,6 +880,7 @@ h1, h2, h3, h4, h5, h6,
font-family: 'Syne', sans-serif; font-family: 'Syne', sans-serif;
font-weight: 700; font-weight: 700;
font-size: 0.88rem; font-size: 0.88rem;
color: var(--text-primary);
} }
/* ============================== /* ==============================
@ -883,32 +899,35 @@ h1, h2, h3, h4, h5, h6,
gap: 6px; gap: 6px;
} }
/* Bouton primaire : charcoal */ /* Primaire : noir + hover gris sombre */
.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(30,34,40,.22); box-shadow: 0 2px 8px rgba(0,0,0,.25);
} }
.btn-primary:hover { .btn-primary:hover {
background: var(--color-primary-light) !important; background: var(--color-primary-light) !important;
box-shadow: 0 4px 16px rgba(30,34,40,.30); box-shadow: 0 4px 16px rgba(0,0,0,.30);
transform: translateY(-1px); transform: translateY(-1px);
} }
/* Info : gris moyen */
.btn-info { .btn-info {
background: var(--color-info) !important; background: #606060 !important;
color: white !important; color: white !important;
} }
.btn-info:hover { .btn-info:hover {
background: #1f6fa0 !important; background: #404040 !important;
transform: translateY(-1px); transform: translateY(-1px);
} }
/* Warning/Danger : gris sombre */
.btn-warning { .btn-warning {
background: var(--color-urgent) !important; background: #3a3a3a !important;
color: white !important; color: white !important;
} }
/* Default / outline */
.btn-default, .btn-outline-secondary { .btn-default, .btn-outline-secondary {
background: white; background: white;
border: 1px solid var(--border-medium) !important; border: 1px solid var(--border-medium) !important;
@ -935,13 +954,13 @@ 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(46,52,64,0.10); box-shadow: 0 0 0 3px rgba(0,0,0,0.08);
outline: none; outline: none;
} }
td input[readonly], td select[readonly], td input[readonly], td select[readonly],
td input[disabled], td select[disabled] { td input[disabled], td select[disabled] {
background: #f1f4f6 !important; background: #f3f3f3 !important;
font-weight: 600; font-weight: 600;
color: var(--text-secondary); color: var(--text-secondary);
} }
@ -951,7 +970,7 @@ td input[disabled], td select[disabled] {
============================== */ ============================== */
legend, #chemin, legend, #chemin,
fieldset legend, form legend { fieldset legend, form legend {
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light)) !important; background: linear-gradient(135deg, #1c1c1c, #474747) !important;
color: white; color: white;
font-family: 'Syne', sans-serif; font-family: 'Syne', sans-serif;
font-size: 0.78rem; font-size: 0.78rem;
@ -972,7 +991,7 @@ fieldset legend, form legend {
overflow: hidden; overflow: hidden;
} }
/* Header modal : charcoal */ /* Header modal : noir */
.modal-header { .modal-header {
background: var(--color-primary) !important; background: var(--color-primary) !important;
color: white !important; color: white !important;
@ -987,16 +1006,16 @@ fieldset legend, form legend {
} }
.modal-header .close, .modal-header .btn-close { .modal-header .close, .modal-header .btn-close {
background: rgba(255,255,255,0.18) !important; background: rgba(255,255,255,0.16) !important;
color: white !important; color: white !important;
border: 1px solid rgba(255,255,255,0.28) !important; border: 1px solid rgba(255,255,255,0.26) !important;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
opacity: 1; opacity: 1;
transition: background var(--transition-fast); transition: background var(--transition-fast);
font-size: 0.75rem; font-size: 0.75rem;
padding: 4px 10px; padding: 4px 10px;
} }
.modal-header .close:hover { background: rgba(255,255,255,0.32) !important; } .modal-header .close:hover { background: rgba(255,255,255,0.30) !important; }
.modal-body { padding: 20px; } .modal-body { padding: 20px; }
@ -1040,7 +1059,7 @@ fieldset legend, form legend {
color: var(--color-primary); color: var(--color-primary);
background: var(--color-primary-ghost); background: var(--color-primary-ghost);
} }
/* Onglet actif : charcoal */ /* Onglet actif : noir */
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active { .nav-tabs .nav-link.active {
background: var(--color-primary) !important; background: var(--color-primary) !important;
@ -1051,23 +1070,32 @@ fieldset legend, form legend {
} }
/* ============================== /* ==============================
ALERTS & TOASTS ALERTS — tous en gris
============================== */ ============================== */
.alert { .alert {
border: none; border: none;
border-radius: var(--radius-md); border-radius: var(--radius-md);
font-size: 0.82rem; font-size: 0.82rem;
border-left: 4px solid; border-left: 4px solid;
color: var(--text-primary);
} }
.alert-success { border-color: var(--color-success); background: rgba(39,174,96,0.08); } /* Succès → gris clair + bordure sombre */
.alert-danger { border-color: var(--color-urgent); background: rgba(192,57,43,0.08); } .alert-success { border-color: #3a3a3a; background: #efefef; }
.alert-warning { border-color: var(--color-warning); background: rgba(230,126,34,0.08); } /* Danger → fond très clair + bordure noire */
.alert-info { border-color: var(--color-info); background: rgba(41,128,185,0.08); } .alert-danger { border-color: #111111; background: #e8e8e8; }
/* Warning → fond gris neutre */
.alert-warning { border-color: #555555; background: #f2f2f2; }
/* Info → fond blanc cassé */
.alert-info { border-color: #888888; background: #f7f7f7; }
/* ============================== /* ==============================
FOOTER FOOTER
============================== */ ============================== */
footer { background: transparent !important; color: var(--text-muted) !important; font-size: 0.7rem; } footer {
background: transparent !important;
color: var(--text-muted) !important;
font-size: 0.7rem;
}
/* ============================== /* ==============================
MICRO-INTERACTIONS & UTILS MICRO-INTERACTIONS & UTILS
@ -1086,7 +1114,7 @@ footer { background: transparent !important; color: var(--text-muted) !important
.transition { transition: all var(--transition-base); } .transition { transition: all var(--transition-base); }
/* Skeleton Loader */ /* Skeleton Loader — gris */
.skeleton { .skeleton {
background: linear-gradient(90deg, #ebebeb 25%, #dcdcdc 50%, #ebebeb 75%); background: linear-gradient(90deg, #ebebeb 25%, #dcdcdc 50%, #ebebeb 75%);
background-size: 200% 100%; background-size: 200% 100%;
@ -1116,20 +1144,20 @@ footer { background: transparent !important; color: var(--text-muted) !important
z-index: 10; z-index: 10;
} }
/* Pulse animation for notifications */ /* Pulse animation — gris sombre */
@keyframes pulse-badge { @keyframes pulse-badge {
0%, 100% { box-shadow: 0 0 0 0 rgba(192,57,43,0.4); } 0%, 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0.35); }
50% { box-shadow: 0 0 0 5px rgba(192,57,43,0); } 50% { box-shadow: 0 0 0 5px rgba(0,0,0,0); }
} }
.badge-number { animation: pulse-badge 2s infinite; } .badge-number { animation: pulse-badge 2s infinite; }
/* Mode Test Banner */ /* Mode Test Banner — rayures grises */
.mode-test-active #header { .mode-test-active #header {
background: linear-gradient(90deg, #5d0000, #c0392b) !important; background: linear-gradient(90deg, #222222, #555555) !important;
} }
.mode-test-banner { .mode-test-banner {
background: repeating-linear-gradient( background: repeating-linear-gradient(
45deg, #cccccc, #cccccc 10px, #333333 10px, #333333 20px 45deg, #cccccc, #cccccc 10px, #1c1c1c 10px, #1c1c1c 20px
); );
color: white; color: white;
text-align: center; text-align: center;
@ -1141,7 +1169,7 @@ footer { background: transparent !important; color: var(--text-muted) !important
/* Filter option */ /* Filter option */
.filter-option-inner-inner { .filter-option-inner-inner {
background-color: #f1f4f6 !important; background-color: #f3f3f3 !important;
} }
/* h6 links in context */ /* h6 links in context */
@ -1167,6 +1195,7 @@ h6 a:hover {
border: 1px solid var(--border-medium); border: 1px solid var(--border-medium);
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
padding: 8px; padding: 8px;
color: var(--text-primary);
} }
/* .sr-only */ /* .sr-only */
@ -1180,10 +1209,6 @@ h6 a:hover {
border-width: 0; border-width: 0;
} }
/* ==============================
SCROLLBAR hover — gris neutre */
::-webkit-scrollbar-thumb:hover { background: var(--color-primary-light); }
/* ============================== /* ==============================
RESPONSIVE RESPONSIVE
============================== */ ============================== */