This commit is contained in:
KONE SOREL 2026-04-03 08:37:33 +00:00
parent 02953bf6fa
commit 039d8dee6f

View File

@ -888,106 +888,119 @@ h1, h2, h3, h4, h5, h6, .fw-bold, .fw-semibold {
}
/* Status Badges */
.badge-status {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
border-radius: var(--radius-full);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.badge-status::before {
content: '';
width: 5px;
height: 5px;
border-radius: 50%;
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); }
.badge-attente { background: rgba(230,126,34,0.10); color: #b9720a; }
.badge-info { background: rgba(41,128,185,0.10); color: #1a6898; }
.badge-inactive { background: rgba(127,140,141,0.10); color: var(--color-neutral); }
/* ============================================================
INTER SANTÉ THEME NEUTRAL PRO v2026
Section 5 : Badges, Cards & Buttons (Rigueur & Précision)
============================================================ */
/* ==============================
CARDS
============================== */
.card {
background: var(--bg-surface);
border: 1px solid var(--border-light);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xs);
transition: box-shadow var(--transition-base);
/* --- STATUS BADGES (Version Rectangulaire Pro) --- */
.badge-status {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 8px;
border-radius: var(--radius-sm); /* Coins moins arrondis */
font-size: 10px;
font-weight: 800;
letter-spacing: 0.5px;
text-transform: uppercase;
font-family: 'Syne', sans-serif;
border: 1px solid transparent;
}
/* Le point indicateur devient un carré de 4px pour plus de rigueur */
.badge-status::before {
content: '';
width: 4px;
height: 4px;
background: currentColor;
border-radius: 1px;
}
.badge-valide { background: rgba(39,174,96,0.08); color: #1E8449; border-color: rgba(39,174,96,0.2); }
.badge-urgent { background: rgba(192,57,43,0.08); color: var(--color-urgent); border-color: rgba(192,57,43,0.2); }
.badge-attente { background: rgba(230,126,34,0.08); color: #B9720A; border-color: rgba(230,126,34,0.2); }
.badge-info { background: var(--color-primary-ghost); color: var(--color-primary); border-color: var(--border-light); }
.badge-inactive { background: var(--bg-surface-2); color: var(--text-muted); border-color: var(--border-light); }
/* --- CARDS (Stabilité ERP) --- */
.card {
background: var(--bg-surface);
border: 1px solid var(--border-light);
border-radius: var(--radius-sm); /* Finies les grosses rondeurs */
box-shadow: none; /* Pas d'ombre par défaut pour plus de clarté */
margin-bottom: 1.5rem;
transition: border-color var(--transition-fast);
}
.card:hover {
border-color: var(--border-medium); /* On souligne juste la bordure au survol */
}
.card:hover { box-shadow: var(--shadow-md); }
.card-header {
background: transparent;
border-bottom: 1px solid var(--border-light);
padding: 14px 18px;
font-family: 'Syne', sans-serif;
font-weight: 700;
font-size: 0.88rem;
background: var(--bg-surface-2); /* Léger fond gris pour l'en-tête */
border-bottom: 1px solid var(--border-light);
padding: 10px 16px;
font-family: 'Syne', sans-serif;
font-weight: 700;
font-size: 13px;
color: var(--color-primary);
}
/* ==============================
BUTTONS
============================== */
/* --- BUTTONS (Blocs Techniques) --- */
.btn {
border-radius: var(--radius-sm) !important;
font-size: 0.8rem;
font-weight: 600;
font-family: 'DM Sans', sans-serif;
padding: 7px 16px;
transition: all var(--transition-fast);
border: none;
display: inline-flex;
align-items: center;
gap: 6px;
border-radius: var(--radius-sm) !important;
font-size: 12px;
font-weight: 600;
padding: 6px 14px;
transition: all var(--transition-fast);
border: 1px solid transparent;
display: inline-flex;
align-items: center;
gap: 8px;
box-shadow: none !important; /* On supprime les ombres de boutons */
}
/* Bouton primaire : charcoal */
/* Bouton Primaire : Charcoal pur */
.btn-primary {
background: var(--color-primary) !important;
color: white !important;
box-shadow: 0 2px 8px rgba(30,34,40,.22);
background: var(--color-primary) !important;
color: white !important;
}
.btn-primary:hover {
background: var(--color-primary-light) !important;
box-shadow: 0 4px 16px rgba(30,34,40,.30);
transform: translateY(-1px);
background: var(--color-primary-dark) !important;
}
/* Bouton Info/Action : Slate Grey */
.btn-info {
background: var(--color-info) !important;
color: white !important;
background: var(--color-primary-light) !important;
color: white !important;
}
.btn-info:hover {
background: #1f6fa0 !important;
transform: translateY(-1px);
background: var(--color-primary) !important;
}
/* Bouton Warning/Urgent : Rouge plat */
.btn-warning {
background: var(--color-urgent) !important;
color: white !important;
background: var(--color-urgent) !important;
color: white !important;
}
/* Bouton Secondaire / Outline */
.btn-default, .btn-outline-secondary {
background: white;
border: 1px solid var(--border-medium) !important;
color: var(--text-secondary) !important;
}
.btn-default:hover, .btn-outline-secondary:hover {
border-color: var(--color-primary-light) !important;
color: var(--color-primary) !important;
background: var(--color-primary-ghost);
background: white !important;
border: 1px solid var(--border-medium) !important;
color: var(--text-secondary) !important;
}
.btn-sm { padding: 5px 12px; font-size: 0.75rem; }
.btn-default:hover, .btn-outline-secondary:hover {
border-color: var(--color-primary) !important;
color: var(--color-primary) !important;
background: var(--bg-surface-2) !important;
}
.btn-sm { padding: 4px 10px; font-size: 11px; }
/* ==============================
FORM ELEMENTS