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

fg

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