/**
* S-Cloud — Skin Slate & Indigo (refonte design Session 1)
*
* Fichier de SURCHARGE chargé EN DERNIER pour repeindre l'app
* en palette Slate & Indigo monochromatique sans toucher au reste.
*
* Couvre :
* 1. Background app + zones
* 2. Topbar
* 3. Rail (sidebar)
* 4. Cards + headers (suppression sc-card-head)
* 5. Icônes monochromes (menu mobile + flyouts)
* 6. Buttons Bootstrap primary/outline-primary repeints
*
* Pour revenir au design précédent : commenter le link dans layout.php.
*/
/* ───────────────────────────────────────────────────────────────
* 1. Background app
* ─────────────────────────────────────────────────────────────── */
body.app-layout {
background: var(--c-bg-app) !important;
}
.app-content, .app-content-inner, .container-fluid {
background: transparent !important;
}
/* ───────────────────────────────────────────────────────────────
* 2. Topbar — unifié sidebar (#D8E0EA), 48px, ombre légère
* ─────────────────────────────────────────────────────────────── */
.app-topbar {
min-height: 48px !important;
height: 48px !important;
background: #D9DDE5 !important; /* v2.2.97 — blanc uniforme */
border-bottom: 1px solid var(--c-border-soft) !important;
box-shadow: 0 2px 10px rgba(15, 23, 42, .07) !important;
backdrop-filter: none;
}
.sc-topbar {
min-height: 48px !important;
background: #D9DDE5 !important; /* v2.2.97 — blanc uniforme */
border-bottom: none !important;
padding: 0 1.25rem !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
}
/* Logo : 40px centré */
.sc-topbar-brand img {
width: 40px !important;
height: 40px !important;
border-radius: 10px !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
box-shadow: none;
}
/* Recherche — 390px, fond légèrement teinté */
.sc-search-wrap form {
width: 100%;
max-width: 390px;
}
.sc-search-input {
background: rgba(255,255,255,0.65) !important;
border: 1px solid rgba(0,0,0,.08) !important;
border-radius: var(--r) !important;
color: var(--c-text) !important;
font-size: var(--t-base);
padding: 10px 16px 10px 40px !important;
height: 40px !important;
transition: background var(--tr), border-color var(--tr);
}
.sc-search-input::placeholder { color: var(--c-text-subtle); }
.sc-search-input:hover { background: rgba(255,255,255,0.85) !important; }
.sc-search-input:focus {
background: var(--c-bg-surface) !important;
border-color: var(--c-brand-500) !important;
box-shadow: var(--sh-focus);
outline: none !important;
}
.sc-search-icon svg { color: var(--c-text-subtle); }
/* Icon buttons topbar (cloche notif) */
.sc-topbar-icon-btn {
background: transparent !important;
border: 1px solid transparent !important;
border-radius: var(--r) !important;
width: 40px !important;
height: 40px !important;
color: var(--c-text-muted) !important;
transition: background var(--tr), color var(--tr);
}
.sc-topbar-icon-btn:hover {
background: var(--c-bg-subtle) !important;
color: var(--c-text) !important;
}
.sc-topbar-badge {
background: var(--c-brand-500) !important;
box-shadow: 0 0 0 2px var(--c-bg-surface);
}
/* Avatar button */
.sc-avatar-btn {
background: transparent !important;
border: 1px solid var(--c-border-soft) !important;
border-radius: var(--r-pill) !important;
padding: 4px 10px 4px 4px !important;
height: 40px !important;
max-height: 40px !important;
transition: background var(--tr);
}
.sc-avatar-btn:hover { background: var(--c-bg-subtle) !important; }
.sc-avatar-btn::after { display: none !important; }
.sc-avatar {
width: 32px !important;
height: 32px !important;
background: var(--c-brand-500) !important;
color: #fff !important;
font-size: var(--t-xs) !important;
font-weight: var(--fw-semibold);
}
.sc-avatar-lg { width: 48px !important; height: 48px !important; }
.sc-avatar-name { color: var(--c-text); font-size: var(--t-sm); font-weight: var(--fw-semibold); }
.sc-avatar-role { color: var(--c-text-muted); font-size: var(--t-xs); }
/* Sélecteur tenant (super-admin) */
.sc-tenant-selector {
background: var(--c-bg-subtle) !important;
border: 1px solid transparent !important;
border-radius: var(--r) !important;
height: 40px;
padding: 0 12px;
}
.sc-tenant-selector.is-supervising {
background: var(--c-brand-50) !important;
border-color: var(--c-brand-100) !important;
color: var(--c-brand-700) !important;
}
.sc-tenant-select {
background: transparent !important;
border: none !important;
color: inherit !important;
font-size: var(--t-sm);
font-weight: var(--fw-medium);
}
/* Dropdown menu (avatar) */
.sc-user-dropdown {
border: 1px solid var(--c-border-soft) !important;
border-radius: var(--r-lg) !important;
box-shadow: var(--sh-lg) !important;
padding: 8px !important;
min-width: 280px;
}
.sc-user-dd-header {
padding: 12px !important;
display: flex;
gap: 12px;
align-items: center;
margin-bottom: 4px;
}
.sc-user-dd-section {
font-size: var(--t-xs);
color: var(--c-text-subtle);
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
padding: 8px 12px 4px;
font-weight: var(--fw-semibold);
}
.dropdown-item {
border-radius: var(--r-sm);
padding: 8px 12px;
font-size: var(--t-sm);
color: var(--c-text);
}
.dropdown-item:hover { background: var(--c-bg-subtle); color: var(--c-text); }
/* ───────────────────────────────────────────────────────────────
* 3. Rail (sidebar verticale desktop)
* ─────────────────────────────────────────────────────────────── */
.sc-rail {
width: 48px !important;
background: var(--c-chrome-bg, #D8E0EA) !important; /* var globale chrome */
border-right: 1px solid var(--c-chrome-border, rgba(0,0,0,.09)) !important;
box-shadow: 1px 0 3px rgb(15 23 42 / .05);
top: 48px !important;
}
.app-main {
margin-left: 48px !important;
padding-top: 48px !important;
}
.sc-rail-link {
width: 40px !important;
height: 40px !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
border-radius: var(--r) !important;
color: var(--c-text-muted) !important;
margin: 2px auto !important;
transition: background var(--tr-fast), color var(--tr-fast);
}
.sc-rail-link svg {
width: 20px !important;
height: 20px !important;
stroke-width: 1.75 !important;
color: inherit !important;
}
.sc-rail-link:hover {
background: var(--c-bg-subtle) !important;
color: var(--c-text) !important;
transform: none !important;
box-shadow: none !important;
}
.sc-rail-link.is-active {
background: var(--c-brand-50) !important;
color: var(--c-brand-600) !important;
box-shadow: none !important;
}
.sc-rail-link.is-active::before {
content: '';
position: absolute;
left: -8px;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 20px;
background: var(--c-brand-500);
border-radius: 0 3px 3px 0;
}
.sc-rail-link.is-active svg { stroke-width: 2 !important; }
/* Neutralise les ks-icon-* couleurs : tout passe en text-muted */
.sc-rail-icon[class*="ks-icon-"],
.sc-rail-icon {
color: inherit !important;
}
.sc-rail-icon svg { color: inherit !important; }
/* Rail footer — lien avatar (photo ou initiales) */
.sc-rail-link--avatar {
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
}
.sc-rail-link--avatar img.sc-avatar,
.sc-rail-link--avatar div.sc-avatar {
border-radius: 50% !important;
border: 2px solid transparent !important;
transition: border-color var(--tr-fast);
}
.sc-rail-link--avatar:hover img.sc-avatar,
.sc-rail-link--avatar:hover div.sc-avatar {
border-color: var(--c-brand-400) !important;
}
.sc-rail-link--avatar.is-active img.sc-avatar,
.sc-rail-link--avatar.is-active div.sc-avatar {
border-color: var(--c-brand-500) !important;
}
/* Divider rail */
.sc-rail-divider {
margin: 8px 14px !important;
border-top: 1px solid var(--c-border-soft) !important;
}
/* Badge approbations */
.sc-rail-badge {
background: var(--c-brand-500) !important;
color: #fff;
font-size: 10px;
font-weight: var(--fw-semibold);
min-width: 16px;
height: 16px;
border-radius: var(--r-pill);
padding: 0 5px;
box-shadow: 0 0 0 2px #D9DDE5; /* anneau = fond rail */
}
/* Flyouts du rail (panneaux pop-out) */
.sc-flyout {
left: 64px !important;
top: 48px !important;
border: 1.5px solid var(--c-border-soft) !important;
border-radius: var(--r-lg) !important;
box-shadow: var(--sh-lg) !important;
background: var(--c-bg-surface) !important;
}
.sc-flyout-title {
font-size: var(--t-xs);
color: var(--c-text-subtle);
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
font-weight: var(--fw-semibold);
padding: 12px 16px 8px;
}
.sc-flyout-item {
color: var(--c-text);
font-size: var(--t-sm);
padding: 8px 12px;
border-radius: var(--r-sm);
transition: background var(--tr-fast);
}
.sc-flyout-item:hover { background: var(--c-bg-subtle); color: var(--c-text); }
.sc-flyout-item.sc-flyout-cta {
background: var(--c-brand-50);
color: var(--c-brand-700);
margin: 4px 8px;
}
.sc-flyout-cta:hover { background: var(--c-brand-100); }
.sc-flyout-divider {
border-top: 1px solid var(--c-border-soft);
margin: 4px 0;
}
/* ───────────────────────────────────────────────────────────────
* 4. Cards & headers (suppression sc-card-head)
* ─────────────────────────────────────────────────────────────── */
.card {
background: var(--c-bg-surface);
border: 1.5px solid var(--c-border-soft) !important;
border-radius: var(--r) !important;
box-shadow: 0 1px 4px rgb(15 23 42 / .06) !important;
}
.card-header {
background: transparent !important;
border-bottom: 1px solid var(--c-border-soft) !important;
padding: 14px 16px !important;
color: var(--c-text) !important;
font-weight: var(--fw-semibold);
}
.sc-card-head {
background: transparent !important;
color: var(--c-text) !important;
border-bottom: 1px solid var(--c-border-soft) !important;
}
.sc-card-head .fw-bold,
.sc-card-head span,
.sc-card-head h5 {
color: var(--c-text) !important;
font-weight: var(--fw-semibold) !important;
}
/* Quand un header avait du texte blanc sur fond purple (modals) on remet noir */
.modal-header.sc-card-head { background: var(--c-bg-subtle) !important; }
.modal-header.sc-card-head .modal-title,
.modal-header.sc-card-head .btn-close-white {
color: var(--c-text) !important;
filter: none !important;
}
.modal-header.sc-card-head .btn-close { filter: none; }
.modal-content {
border: 1.5px solid var(--c-border-soft);
border-radius: var(--r-lg);
box-shadow: var(--sh-lg);
}
.card-body { padding: var(--s-4) var(--s-5); }
.card-footer {
background: transparent !important;
border-top: 1px solid var(--c-border-soft) !important;
padding: 12px 16px !important;
}
/* ───────────────────────────────────────────────────────────────
* 5. Boutons (palette indigo cohérente)
* ─────────────────────────────────────────────────────────────── */
.btn {
border-radius: var(--r) !important;
font-weight: var(--fw-medium);
font-size: var(--t-sm);
padding: 8px 16px;
transition: background var(--tr-fast), border-color var(--tr-fast), color var(--tr-fast);
border-width: 1px;
}
.btn-sm { padding: 6px 12px; font-size: var(--t-xs); border-radius: var(--r-sm) !important; }
.btn-lg { padding: 12px 20px; font-size: var(--t-md); }
.btn-primary {
background: var(--c-brand-500) !important;
border-color: var(--c-brand-500) !important;
color: #fff !important;
box-shadow: none !important;
}
.btn-primary:hover, .btn-primary:focus {
background: var(--c-brand-600) !important;
border-color: var(--c-brand-600) !important;
}
.btn-primary:active { background: var(--c-brand-700) !important; }
.btn-outline-primary {
background: var(--c-bg-surface) !important;
border-color: var(--c-border) !important;
color: var(--c-text) !important;
}
.btn-outline-primary:hover {
background: var(--c-bg-subtle) !important;
border-color: var(--c-border) !important;
color: var(--c-text) !important;
}
.btn-outline-secondary {
background: var(--c-bg-surface) !important;
border-color: var(--c-border) !important;
color: var(--c-text-muted) !important;
}
.btn-outline-secondary:hover {
background: var(--c-bg-subtle) !important;
color: var(--c-text) !important;
}
.btn-success { background: var(--c-success) !important; border-color: var(--c-success) !important; }
.btn-warning { background: var(--c-warning) !important; border-color: var(--c-warning) !important; color: #fff !important; }
.btn-danger { background: var(--c-danger) !important; border-color: var(--c-danger) !important; }
/* ───────────────────────────────────────────────────────────────
* 6. Badges KS_B → tags sobres
* ─────────────────────────────────────────────────────────────── */
.ks-b {
background: var(--c-bg-subtle);
color: var(--c-text-muted);
border-radius: var(--r-sm);
padding: 2px 8px;
font-size: var(--t-xs);
font-weight: var(--fw-semibold);
line-height: 18px;
display: inline-flex;
align-items: center;
gap: 4px;
border: 1px solid transparent;
}
.ks-b--success { background: var(--c-success-bg); color: var(--c-success); }
.ks-b--warn { background: var(--c-warning-bg); color: var(--c-warning); }
.ks-b--danger { background: var(--c-danger-bg); color: var(--c-danger); }
.ks-b--info { background: var(--c-info-bg); color: var(--c-info); }
.ks-b--muted { background: var(--c-bg-subtle); color: var(--c-text-muted); }
/* ───────────────────────────────────────────────────────────────
* 7. Sélecteur de langue / lang switcher
* ─────────────────────────────────────────────────────────────── */
.sc-lang-choice {
border-color: var(--c-border-soft) !important;
background: var(--c-bg-surface);
border-radius: var(--r) !important;
}
.sc-lang-choice:has(input:checked),
.sc-lang-choice.is-active {
border-color: var(--c-brand-500) !important;
background: var(--c-brand-50) !important;
box-shadow: none !important;
}
/* ───────────────────────────────────────────────────────────────
* 8. Bottom-nav mobile (rééquilibrée)
* ─────────────────────────────────────────────────────────────── */
.sc-mobile-nav {
border-top: 1px solid var(--c-border-soft) !important;
box-shadow: none !important;
}
.sc-mnav-item { color: var(--c-text-muted); }
.sc-mnav-item.is-active { color: var(--c-brand-500) !important; }
.sc-mnav-dot { background: var(--c-brand-500) !important; }
.sc-mnav-badge {
background: var(--c-brand-500) !important;
box-shadow: 0 0 0 2px var(--c-bg-surface);
}
.sc-mnav-menu-btn { color: var(--c-brand-500) !important; }
/* FAB mono indigo (plus de gradient) */
.sc-mnav-fab {
background: var(--c-brand-500) !important;
box-shadow: 0 4px 14px rgb(79 70 229 / .35), 0 2px 4px rgb(79 70 229 / .15) !important;
width: 52px !important;
height: 52px !important;
margin: -16px 4px 0 !important;
}
.sc-mnav-fab:hover { background: var(--c-brand-600) !important; }
/* ───────────────────────────────────────────────────────────────
* 9. Menu modal mobile (icônes monochromes indigo)
* ─────────────────────────────────────────────────────────────── */
.sc-app-menu-overlay { background: rgb(15 23 42 / .50); }
.sc-app-menu-dialog {
border-radius: var(--r-lg) !important;
box-shadow: var(--sh-lg) !important;
}
.sc-app-menu-header {
background: var(--c-brand-50) !important;
color: var(--c-text) !important;
border-bottom: 1px solid var(--c-border-soft);
}
.sc-app-menu-user-name { color: var(--c-text) !important; }
.sc-app-menu-user-role { color: var(--c-text-muted) !important; }
.sc-app-menu-avatar {
background: var(--c-brand-500) !important;
color: #fff !important;
font-size: var(--t-base);
}
.sc-app-menu-close {
background: rgb(0 0 0 / .06) !important;
color: var(--c-text) !important;
}
.sc-app-menu-close:hover { background: rgb(0 0 0 / .12) !important; }
.sc-app-menu-close svg { color: var(--c-text); }
/* Items grille : icônes mono indigo, fonds neutres */
.sc-app-menu-item {
background: var(--c-bg-app) !important;
color: var(--c-text) !important;
border-radius: var(--r) !important;
font-size: var(--t-xs);
font-weight: var(--fw-medium);
}
.sc-app-menu-item:hover {
background: var(--c-brand-50) !important;
color: var(--c-brand-700) !important;
transform: none !important;
box-shadow: none !important;
}
.sc-app-menu-item-admin { background: var(--c-danger-bg) !important; }
.sc-app-menu-item-admin:hover { background: var(--c-danger-bg) !important; color: var(--c-danger) !important; }
/* Icône item : overrides les gradient inline avec brand-50 + icône indigo */
.sc-app-menu-icon {
background: var(--c-brand-50) !important;
background-image: none !important; /* tue les linear-gradient inline */
color: var(--c-brand-500) !important;
box-shadow: none !important;
border: 1px solid var(--c-brand-100);
}
.sc-app-menu-icon svg { color: var(--c-brand-500) !important; }
/* Items admin : icône en danger */
.sc-app-menu-item-admin .sc-app-menu-icon {
background: var(--c-danger-bg) !important;
background-image: none !important;
border-color: var(--c-danger-border);
color: var(--c-danger) !important;
}
.sc-app-menu-item-admin .sc-app-menu-icon svg { color: var(--c-danger) !important; }
.sc-app-menu-logout {
background: transparent !important;
color: var(--c-danger) !important;
border-top: 1px solid var(--c-border-soft) !important;
}
.sc-app-menu-logout:hover { background: var(--c-danger-bg) !important; }
/* FAB sheet : actions monochromes */
.sc-fab-sheet-content {
border-radius: var(--r-lg) !important;
box-shadow: var(--sh-lg) !important;
}
.sc-fab-action {
color: var(--c-text);
border-radius: var(--r);
font-size: var(--t-xs);
}
.sc-fab-action:hover, .sc-fab-action:active {
background: var(--c-brand-50) !important;
color: var(--c-brand-700) !important;
}
.sc-fab-action-icon {
background: var(--c-brand-50) !important;
background-image: none !important;
color: var(--c-brand-500) !important;
border: 1px solid var(--c-brand-100);
box-shadow: none !important;
}
.sc-fab-action-icon svg { color: var(--c-brand-500) !important; }
/* ───────────────────────────────────────────────────────────────
* 10. Critique inline override (CSS critique de layout.php)
* ─────────────────────────────────────────────────────────────── */
/* Le CSS critique inline force 78px ; on rééquilibre à 48px ici */
@media (min-width: 992px) {
.app-topbar,
.sc-topbar { min-height: 48px !important; height: 48px !important; }
.app-main { padding-top: 48px !important; }
.sc-rail { top: 48px !important; }
.sc-flyout { top: 48px !important; }
}
/* ───────────────────────────────────────────────────────────────
* 11. Misc — alerts, tables, empty states
* ─────────────────────────────────────────────────────────────── */
.alert {
border-radius: var(--r);
border: 1.5px solid transparent;
padding: 12px 16px;
font-size: var(--t-sm);
}
.alert-success { background: var(--c-success-bg); color: var(--c-success); border-color: var(--c-success-border); }
.alert-warning { background: var(--c-warning-bg); color: var(--c-warning); border-color: var(--c-warning-border); }
.alert-danger { background: var(--c-danger-bg); color: var(--c-danger); border-color: var(--c-danger-border); }
.alert-info { background: var(--c-info-bg); color: var(--c-info); border-color: var(--c-info-border); }
.sc-table { border-collapse: separate; border-spacing: 0; border: 1.5px solid var(--c-border-soft); border-radius: var(--r); overflow: hidden; }
.sc-table thead th {
background: var(--c-bg-subtle);
color: var(--c-text-muted);
font-size: var(--t-xs);
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
font-weight: var(--fw-semibold);
border-bottom: 1.5px solid var(--c-border-soft);
padding: 10px 12px;
}
.sc-table tbody td {
border-bottom: 1px solid var(--c-border-soft);
padding: 12px;
font-size: var(--t-sm);
vertical-align: middle;
}
.sc-table tbody tr:last-child td { border-bottom: none; }
.sc-table tbody tr:hover td { background: var(--c-bg-subtle); }
.ks-empty {
padding: var(--s-12) var(--s-6);
text-align: center;
border: 1.5px dashed var(--c-border-soft);
border-radius: var(--r);
background: var(--c-bg-surface);
}
.ks-empty__icon {
width: 64px; height: 64px;
margin: 0 auto var(--s-3);
display: flex; align-items: center; justify-content: center;
background: var(--c-bg-subtle);
color: var(--c-text-subtle);
border-radius: var(--r-pill);
}
.ks-empty__title { font-size: var(--t-md); font-weight: var(--fw-semibold); color: var(--c-text); }
.ks-empty__hint { font-size: var(--t-sm); color: var(--c-text-muted); margin-top: var(--s-1); }
.ks-empty__cta {
display: inline-flex; align-items: center; gap: 6px;
margin-top: var(--s-3);
padding: 8px 14px;
background: var(--c-brand-500); color: #fff;
border-radius: var(--r);
font-size: var(--t-sm); font-weight: var(--fw-medium);
text-decoration: none;
}
.ks-empty__cta:hover { background: var(--c-brand-600); color: #fff; text-decoration: none; }
/* ───────────────────────────────────────────────────────────────
* 12. Forms (inputs sobres)
* ─────────────────────────────────────────────────────────────── */
.form-control, .form-select {
border: 1.5px solid var(--c-border-soft) !important;
border-radius: var(--r) !important;
font-size: var(--t-sm);
padding: 8px 12px;
background: var(--c-bg-surface);
color: var(--c-text);
transition: border-color var(--tr-fast), box-shadow var(--tr-fast);
}
.form-control:focus, .form-select:focus {
border-color: var(--c-brand-500) !important;
box-shadow: var(--sh-focus) !important;
}
.form-label {
font-size: var(--t-xs);
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
color: var(--c-text-muted);
font-weight: var(--fw-semibold);
margin-bottom: 4px;
}
.form-text {
font-size: var(--t-xs);
color: var(--c-text-subtle);
}
/* ───────────────────────────────────────────────────────────────
* 13. Login (rééquilibrage avec nouvelle palette)
* ─────────────────────────────────────────────────────────────── */
.sc-login-page {
background: var(--c-bg-app) !important;
}
.sc-login-card {
border: 1px solid var(--c-border-soft) !important;
border-radius: var(--r-lg) !important;
box-shadow: var(--sh-lg) !important;
overflow: hidden;
}
.sc-login-logo { background: var(--c-bg-surface) !important; }
.ks-btn-login {
background: var(--c-brand-500) !important;
border-color: var(--c-brand-500) !important;
color: #fff !important;
box-shadow: none !important;
border-radius: var(--r) !important;
}
.ks-btn-login:hover { background: var(--c-brand-600) !important; }
/* ═══════════════════════════════════════════════════════════════════
* SESSION 2 — Système .tag + boutons cohérents + mobile fine-tune
* ═══════════════════════════════════════════════════════════════════ */
/* ─── 14. Système .tag (pastille statut moderne) ───────────────────
* Utilisation :
* Texte
* Approuvé
* Indigo
* Forcé fond plein
* Avec puce
* Hauteur 22px, padding 2px 8px, font 11px semibold, radius pill.
* ─────────────────────────────────────────────────────────────────── */
.tag {
display: inline-flex;
align-items: center;
gap: 6px;
height: 22px;
padding: 0 8px;
border-radius: var(--r-pill);
background: var(--c-bg-subtle);
color: var(--c-text-muted);
font-size: 11px;
font-weight: var(--fw-semibold);
line-height: 1;
border: 1px solid transparent;
white-space: nowrap;
letter-spacing: 0.01em;
}
.tag svg { width: 12px; height: 12px; }
.tag--brand { background: var(--c-brand-50); color: var(--c-brand-600); }
.tag--success { background: var(--c-success-bg); color: var(--c-success); }
.tag--warning { background: var(--c-warning-bg); color: var(--c-warning); }
.tag--danger { background: var(--c-danger-bg); color: var(--c-danger); }
.tag--info { background: var(--c-info-bg); color: var(--c-info); }
.tag--muted { background: var(--c-bg-subtle); color: var(--c-text-muted); }
.tag--outline { background: transparent; border-color: var(--c-border); color: var(--c-text-muted); }
/* Variante "solid" = fond plein (réservée aux highlights forts) */
.tag--solid.tag--brand { background: var(--c-brand-500); color: #fff; }
.tag--solid.tag--success { background: var(--c-success); color: #fff; }
.tag--solid.tag--warning { background: var(--c-warning); color: #fff; }
.tag--solid.tag--danger { background: var(--c-danger); color: #fff; }
/* Variante "dot" : pastille colorée + texte */
.tag--dot::before {
content: '';
width: 6px; height: 6px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}
/* Tailles */
.tag--sm { height: 18px; font-size: 10px; padding: 0 6px; }
.tag--lg { height: 26px; font-size: 12px; padding: 0 10px; }
/* ─── 15. Boutons — 5 styles + variantes ───────────────────────────
* btn-primary : indigo plein, action principale (1 par page max)
* btn-secondary: blanc + border, action secondaire
* btn-ghost : transparent, text-muted, action tertiaire / icon
* btn-danger : terracotta, destruction définitive (avec confirm)
* btn-link : lien-like, padding minimal
* ───────────────────────────────────────────────────────────────── */
/* Nouveau : btn-secondary (cohérent — pas un Bootstrap natif) */
.btn-secondary {
background: var(--c-bg-surface) !important;
border-color: var(--c-border) !important;
color: var(--c-text) !important;
font-weight: var(--fw-medium);
}
.btn-secondary:hover {
background: var(--c-bg-subtle) !important;
color: var(--c-text) !important;
border-color: var(--c-border) !important;
}
/* Nouveau : btn-ghost (transparent, idéal pour actions discrètes) */
.btn-ghost,
.btn.btn-ghost {
background: transparent !important;
border-color: transparent !important;
color: var(--c-text-muted) !important;
font-weight: var(--fw-medium);
}
.btn-ghost:hover {
background: var(--c-bg-subtle) !important;
color: var(--c-text) !important;
border-color: transparent !important;
}
/* btn-icon : carré pour actions icon-only (refresh, expand, etc.) */
.btn-icon {
width: 36px; height: 36px;
padding: 0 !important;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.btn-icon-sm { width: 30px; height: 30px; }
.btn-icon-lg { width: 44px; height: 44px; }
/* Refonte btn-link pour cohérence */
.btn-link {
color: var(--c-brand-500) !important;
text-decoration: none;
padding: 4px 8px;
font-weight: var(--fw-medium);
}
.btn-link:hover {
color: var(--c-brand-600) !important;
background: var(--c-brand-50) !important;
text-decoration: none;
}
/* Disabled states cohérents */
.btn:disabled, .btn.disabled {
opacity: .5;
cursor: not-allowed;
pointer-events: none;
}
/* Btn group : séparateurs propres */
.btn-group .btn {
border-radius: 0 !important;
}
.btn-group .btn:first-child { border-top-left-radius: var(--r) !important; border-bottom-left-radius: var(--r) !important; }
.btn-group .btn:last-child { border-top-right-radius: var(--r) !important; border-bottom-right-radius: var(--r) !important; }
/* ─── 16. Mobile bottom-nav fine-tune ─────────────────────────────── */
.sc-mobile-nav {
height: 64px !important;
}
.sc-mnav-item {
font-size: 10px !important;
font-weight: var(--fw-medium) !important;
}
.sc-mnav-item svg {
width: 22px; height: 22px;
stroke-width: 1.75;
}
.sc-mnav-item.is-active svg { stroke-width: 2; }
.sc-mnav-fab {
width: 50px !important;
height: 50px !important;
margin-top: -14px !important;
}
.sc-mnav-fab svg { width: 24px; height: 24px; }
/* Indicateur actif : barre horizontale fine en haut (au lieu du point) */
.sc-mnav-item.is-active::after {
content: '';
position: absolute;
top: 0;
left: 30%;
right: 30%;
height: 2px;
background: var(--c-brand-500);
border-radius: 0 0 2px 2px;
}
.sc-mnav-dot { display: none; } /* on remplace par la barre */
/* ─── 17. Dropdowns Bootstrap — cohérence indigo ─────────────────── */
.dropdown-menu {
border: 1.5px solid var(--c-border-soft);
border-radius: var(--r-lg);
box-shadow: var(--sh-lg);
padding: 6px;
font-size: var(--t-sm);
}
.dropdown-item.active,
.dropdown-item:active {
background: var(--c-brand-500);
color: #fff;
}
/* ─── 18. Pagination ──────────────────────────────────────────────── */
.pagination .page-link {
border: 1px solid var(--c-border-soft);
color: var(--c-text);
border-radius: var(--r-sm);
margin: 0 2px;
padding: 6px 12px;
font-size: var(--t-sm);
font-weight: var(--fw-medium);
}
.pagination .page-link:hover {
background: var(--c-bg-subtle);
border-color: var(--c-border);
color: var(--c-text);
}
.pagination .page-item.active .page-link {
background: var(--c-brand-500);
border-color: var(--c-brand-500);
color: #fff;
}
/* ─── 19. Switches (form-check-input) ─────────────────────────────── */
.form-check-input {
border: 1px solid var(--c-border-strong);
}
.form-check-input:checked {
background-color: var(--c-brand-500);
border-color: var(--c-brand-500);
}
.form-check-input:focus {
border-color: var(--c-brand-500);
box-shadow: var(--sh-focus);
}
/* ─── 20. Breadcrumb (.sc-breadcrumb) ─────────────────────────────── */
.sc-breadcrumb {
padding: var(--s-2) 0;
font-size: var(--t-sm);
color: var(--c-text-muted);
}
.sc-bc-link {
color: var(--c-text-muted);
text-decoration: none;
padding: 4px 8px;
border-radius: var(--r-sm);
transition: background var(--tr-fast), color var(--tr-fast);
display: inline-flex;
align-items: center;
gap: 4px;
}
.sc-bc-link:hover {
background: var(--c-bg-subtle);
color: var(--c-text);
}
.sc-bc-link.active {
color: var(--c-text);
font-weight: var(--fw-semibold);
}
.sc-bc-sep { color: var(--c-text-subtle); margin: 0 2px; }
/* ═══════════════════════════════════════════════════════════════════
* SESSION 3 — Dashboard sobre + Space tiles
* ═══════════════════════════════════════════════════════════════════ */
/* ─── 21. Space tile (carte d'espace sobre) ──────────────────────── */
.sc-space-tile {
background: var(--c-bg-surface);
border: 1px solid var(--c-border-soft);
border-radius: var(--r);
padding: var(--s-4) var(--s-4) var(--s-3);
height: 100%;
display: flex;
flex-direction: column;
gap: var(--s-2);
transition: border-color var(--tr-fast), box-shadow var(--tr-fast), transform var(--tr-fast);
}
a:hover .sc-space-tile,
.sc-space-tile:hover {
border-color: var(--c-brand-200);
box-shadow: var(--sh-sm);
transform: translateY(-1px);
}
.sc-space-tile-head {
display: flex;
align-items: center;
gap: var(--s-3);
min-height: 40px;
}
.sc-space-tile-logo {
width: 32px;
height: 32px;
border-radius: var(--r-sm);
object-fit: contain;
background: var(--c-bg-subtle);
padding: 2px;
flex-shrink: 0;
}
.sc-space-tile-dot {
width: 12px;
height: 12px;
border-radius: 50%;
flex-shrink: 0;
box-shadow: 0 0 0 3px rgba(0,0,0,.03);
}
.sc-space-tile-title {
margin: 0;
font-size: var(--t-md);
font-weight: var(--fw-semibold);
color: var(--c-text);
line-height: 1.3;
flex: 1;
min-width: 0;
word-break: break-word;
}
.sc-space-tile-desc {
margin: 0;
font-size: var(--t-sm);
color: var(--c-text-muted);
line-height: 1.45;
flex: 1;
min-height: 36px;
}
.sc-space-tile-meta {
display: flex;
justify-content: space-between;
align-items: center;
font-size: var(--t-xs);
color: var(--c-text-subtle);
padding-top: var(--s-2);
border-top: 1px solid var(--c-border-soft);
}
.sc-space-tile-stats {
display: inline-flex;
align-items: center;
gap: 4px;
}
.sc-space-tile-stats svg {
width: 13px;
height: 13px;
color: var(--c-text-subtle);
}
.sc-space-tile-sep { color: var(--c-border); margin: 0 4px; }
.sc-space-tile-time { font-variant-numeric: tabular-nums; }
/* ─── 22. Dashboard — typographie + alignements 8pt ──────────────── */
/* Salutation : 30px / 600 / tight tracking */
.app-content h2,
.app-content .h2 {
font-size: var(--t-3xl) !important;
line-height: var(--lh-3xl) !important;
font-weight: var(--fw-semibold) !important;
letter-spacing: var(--tracking-tight);
color: var(--c-text);
}
/* Sous-titres de section : caps + tracking */
.app-content h5.text-uppercase {
font-size: var(--t-xs) !important;
color: var(--c-text-muted) !important;
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
font-weight: var(--fw-semibold) !important;
margin-bottom: var(--s-3);
}
/* ─── 23. App-content-inner : retire la bordure inutile ───────────
* (le composant a un wrapper "card" qui doublonne avec les cards
* internes — on l'aplatit pour respirer)
* ───────────────────────────────────────────────────────────────── */
.app-content-inner.card {
background: transparent;
border: none !important;
box-shadow: none !important;
}
.app-content-inner.card > .card-body {
padding: var(--s-6) var(--s-5);
}
/* ─── 24. KPI cards (Tenant index, etc.) ─────────────────────────── */
.app-content .card .card-body .text-uppercase.small {
font-size: var(--t-xs) !important;
color: var(--c-text-subtle) !important;
letter-spacing: var(--tracking-caps);
font-weight: var(--fw-semibold);
}
/* ─── 25. Nav-bell + notifications panel ─────────────────────────── */
.sc-notif-panel {
border: 1px solid var(--c-border-soft);
border-radius: var(--r-lg);
box-shadow: var(--sh-lg);
}
.sc-notif-item {
border-bottom: 1px solid var(--c-border-soft);
padding: var(--s-3) var(--s-4);
}
.sc-notif-item.is-unread { background: var(--c-brand-50); }
/* ─── 26. Modale (Bootstrap .modal) ───────────────────────────────── */
.modal-backdrop.show { opacity: 0.4; background: var(--c-text); }
.modal-content { border-radius: var(--r-lg) !important; }
.modal-header {
padding: var(--s-4) var(--s-5) !important;
border-bottom: 1px solid var(--c-border-soft);
}
.modal-body { padding: var(--s-5); }
.modal-footer {
padding: var(--s-3) var(--s-5) !important;
border-top: 1px solid var(--c-border-soft);
gap: var(--s-2);
}
/* ─── 27. Container fluid : padding cohérent 8pt ─────────────────── */
.container-fluid {
padding-left: var(--s-5) !important;
padding-right: var(--s-5) !important;
}
@media (max-width: 575.98px) {
.container-fluid {
padding-left: var(--s-3) !important;
padding-right: var(--s-3) !important;
}
}
/* ─── 28. Scroll smooth + scroll bar discrète ────────────────────── */
html { scroll-behavior: smooth; }
* {
scrollbar-width: thin;
scrollbar-color: var(--c-border) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
background: var(--c-border);
border-radius: 4px;
}
*::-webkit-scrollbar-thumb:hover { background: var(--c-border-strong); }
/* ─── 29. Topbar : ajustements 8pt + alignement vertical propre ──── */
.sc-topbar { padding: 0 var(--s-5) !important; }
.sc-topbar > div { gap: var(--s-3); }
/* ─── 30b. Modal profil utilisateur — fiche RH + photo taille réelle ── */
.sc-profile-modal .modal-content {
border-radius: var(--r-lg) !important;
border: none !important;
box-shadow: 0 16px 48px rgba(0,0,0,.18) !important;
overflow: hidden;
}
.sc-profile-modal .modal-header { padding: .75rem 1.25rem .25rem; }
.sc-profile-modal .modal-body { padding: 1rem 1.5rem; }
.sc-profile-modal .modal-footer { padding: .5rem 1.25rem 1rem; justify-content: flex-end; }
/* Photo profil — TAILLE RÉELLE (largeur intrinsèque de l'image) */
.sc-profile-photo-wrap {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: var(--c-bg-subtle);
border-radius: var(--r-lg);
padding: 1rem;
min-height: 240px;
}
img.sc-profile-photo {
max-width: 100%;
max-height: 360px;
height: auto;
width: auto;
border-radius: var(--r-lg);
object-fit: contain;
box-shadow: 0 4px 16px rgba(0,0,0,.12);
background: #fff;
}
/* Fallback initiales : disque coloré */
.sc-profile-photo--initials {
border-radius: 50% !important;
box-shadow: 0 4px 16px rgba(0,0,0,.12);
}
/* Grille d'infos RH (colonne droite) */
.sc-profile-info-grid {
display: flex;
flex-direction: column;
gap: .5rem;
}
.sc-profile-info-row {
display: flex;
align-items: flex-start;
gap: .75rem;
padding: .6rem .85rem;
background: var(--c-bg-subtle);
border-radius: var(--r);
transition: background var(--tr-fast);
}
.sc-profile-info-row:hover { background: var(--c-bg-hover, #eef2f7); }
.sc-profile-info-icon {
color: var(--c-brand-500);
flex-shrink: 0;
margin-top: 2px;
}
.sc-profile-info-content {
flex: 1;
min-width: 0;
overflow: hidden;
}
.sc-profile-info-label {
font-size: .68rem;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--c-text-subtle);
font-weight: 600;
margin-bottom: 2px;
}
.sc-profile-info-value {
color: var(--c-text);
font-size: .9rem;
text-decoration: none;
word-break: break-word;
display: block;
}
a.sc-profile-info-value:hover { color: var(--c-brand-600); text-decoration: underline; }
/* Mobile : photo + grille empilés */
@media (max-width: 767.98px) {
.sc-profile-photo-wrap { min-height: 200px; padding: .75rem; }
img.sc-profile-photo { max-height: 280px; }
}
/* ─── Hiérarchie : manager + subordonnés ──────────────────────────────── */
.sc-profile-hierarchy {
border-top: 1px solid var(--c-border-soft);
}
.sc-profile-person-card {
display: flex;
align-items: center;
gap: .65rem;
padding: .55rem .75rem;
background: var(--c-bg-subtle);
border-radius: var(--r);
transition: background var(--tr-fast);
}
.sc-profile-person-card:hover {
background: var(--c-bg-hover, #eef2f7);
}
.sc-profile-person-avatar { flex-shrink: 0; }
.sc-profile-person-info { min-width: 0; }
.sc-profile-person-name {
font-weight: 600;
color: var(--c-text);
font-size: .88rem;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sc-profile-person-sub {
font-size: .72rem;
color: var(--c-text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Grille de subordonnés (2-3 colonnes selon largeur) */
.sc-profile-subs-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: .5rem;
}
.sc-profile-sub-card { cursor: pointer; }
.sc-profile-sub-card .sc-profile-person-name { font-size: .82rem; }
.sc-profile-sub-card .sc-profile-person-sub { font-size: .68rem; }
/* L'avatar dans une person-card est cliquable mais on garde le hover doux */
.sc-profile-trigger:hover { opacity: .85; }
/* ─── 30. Sidebar admin sub-nav (admin_subnav.php) ───────────────── */
.admin-subnav {
display: flex;
gap: var(--s-1);
padding: var(--s-2) 0 var(--s-4);
margin-bottom: var(--s-4);
border-bottom: 1px solid var(--c-border-soft);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.admin-subnav a {
padding: 6px 12px;
border-radius: var(--r-sm);
color: var(--c-text-muted);
font-size: var(--t-sm);
font-weight: var(--fw-medium);
text-decoration: none;
white-space: nowrap;
transition: background var(--tr-fast), color var(--tr-fast);
}
.admin-subnav a:hover {
background: var(--c-bg-subtle);
color: var(--c-text);
text-decoration: none;
}
.admin-subnav a.is-active {
background: var(--c-brand-50);
color: var(--c-brand-700);
}
/* ═══════════════════════════════════════════════════════════════════
* SESSION 4 — Polish final : neutralisation styles inline legacy
* ═══════════════════════════════════════════════════════════════════ */
/* ─── 31. Neutralisation : styles inline purple/dark/800 hérités ────
* Les vues hardcodent souvent style="color:#7A4183" ou font-weight:800
* dans h1/h2/h3/h4/h5. On les sur-spécifie pour respecter le système.
* ─────────────────────────────────────────────────────────────────── */
h1[style*="font-weight:800"],
h2[style*="font-weight:800"],
h3[style*="font-weight:800"],
h4[style*="font-weight:800"],
h5[style*="font-weight:800"],
h6[style*="font-weight:800"] {
font-weight: var(--fw-semibold) !important;
letter-spacing: var(--tracking-tight);
}
/* Couleurs inline purple → indigo / text */
[style*="color:#7A4183"], [style*="color: #7A4183"] {
color: var(--c-brand-500) !important;
}
[style*="color:#5c2f61"], [style*="color: #5c2f61"] {
color: var(--c-brand-700) !important;
}
[style*="color:#1a1a1a"], [style*="color: #1a1a1a"] {
color: var(--c-text) !important;
}
/* Backgrounds inline */
[style*="background:#7A4183"], [style*="background: #7A4183"],
[style*="background-color:#7A4183"] {
background: var(--c-brand-500) !important;
}
/* Gradients purple inline (très répandus dans les KPI cards) */
[style*="linear-gradient(135deg,#7A4183"],
[style*="linear-gradient(135deg, #7A4183"] {
background: var(--c-brand-500) !important;
background-image: none !important;
}
/* ─── 32. KPI cards (statistiques compactes) ─────────────────────────
* Pattern utilisé dans Tenant index, Account, etc.
*
* ─────────────────────────────────────────────────────────────────── */
.app-content .card-body div[style*="font-size:1.6rem"],
.app-content .card-body div[style*="font-size:1.8rem"] {
font-size: var(--t-3xl) !important;
line-height: var(--lh-3xl) !important;
font-weight: var(--fw-semibold) !important;
color: var(--c-text) !important;
letter-spacing: var(--tracking-tight);
}
/* ─── 33. Page-title pattern : ──────────
* On le réajuste pour qu'il ressemble à un vrai title de page (24px).
* ─────────────────────────────────────────────────────────────────── */
.app-content h3.mb-1,
.app-content h4.mb-1 {
font-size: var(--t-2xl);
line-height: var(--lh-2xl);
font-weight: var(--fw-semibold);
color: var(--c-text);
letter-spacing: var(--tracking-tight);
}
/* ─── 34. Tables avec hover trop fort → calmer ─────────────────────── */
.table-hover tbody tr:hover,
.sc-table tbody tr:hover {
--bs-table-hover-bg: var(--c-bg-subtle);
background-color: var(--c-bg-subtle) !important;
}
.table-hover tbody tr:hover td,
.sc-table tbody tr:hover td {
background-color: transparent; /* la ligne suffit */
}
/* ─── 35. Inputs : alignement vertical des labels Bootstrap ─────────
* Les form-text passent en text-subtle de notre token, pas Bootstrap.
* ─────────────────────────────────────────────────────────────────── */
.form-text { color: var(--c-text-subtle) !important; }
/* ─── 36. Code & pre (zones techniques : Admin, migrations) ──────── */
code {
background: var(--c-bg-subtle);
color: var(--c-brand-700);
padding: 2px 6px;
border-radius: var(--r-sm);
font-size: 0.9em;
font-family: 'SF Mono', Menlo, Consolas, monospace;
}
pre {
background: var(--c-bg-subtle);
border: 1px solid var(--c-border-soft);
border-radius: var(--r);
padding: var(--s-3) var(--s-4);
font-size: var(--t-sm);
color: var(--c-text);
overflow-x: auto;
}
pre code {
background: transparent;
color: inherit;
padding: 0;
}
/* ─── 37. HR (séparateurs) ────────────────────────────────────────── */
hr {
border: 0;
border-top: 1px solid var(--c-border-soft);
margin: var(--s-4) 0;
opacity: 1;
}
/* ─── 38. sc-card-head dans MODALE — un cran plus sobre ──────── */
.modal-header.sc-card-head,
.modal .sc-card-head {
background: var(--c-bg-subtle) !important;
border-bottom: 1px solid var(--c-border-soft) !important;
}
.modal-header.sc-card-head h5,
.modal-header.sc-card-head .modal-title,
.modal-header.sc-card-head .fw-bold {
color: var(--c-text) !important;
font-weight: var(--fw-semibold) !important;
}
.modal-header.sc-card-head .btn-close.btn-close-white {
filter: none !important;
}
/* ─── 39. ks-icon-* (icônes colorées par module) → neutralisées ──── */
.ks-icon-purple, .ks-icon-orange, .ks-icon-emerald, .ks-icon-red,
.ks-icon-amber, .ks-icon-gold, .ks-icon-blue, .ks-icon-sky,
.ks-icon-coral, .ks-icon-violet, .ks-icon-teal, .ks-icon-pink {
color: inherit !important;
}
.ks-icon-purple svg, .ks-icon-orange svg, .ks-icon-emerald svg,
.ks-icon-red svg, .ks-icon-amber svg, .ks-icon-gold svg,
.ks-icon-blue svg, .ks-icon-sky svg, .ks-icon-coral svg,
.ks-icon-violet svg, .ks-icon-teal svg, .ks-icon-pink svg {
color: inherit !important;
}
/* ─── 40. Alert : variant gradient inline (Dashboard supervision) ── */
.alert[style*="linear-gradient(135deg,rgba(74,144,226"],
.alert[style*="linear-gradient(135deg, rgba(74,144,226"] {
background: var(--c-brand-50) !important;
background-image: none !important;
border: 1px solid var(--c-brand-100) !important;
}
.alert[style*="linear-gradient(135deg,rgba(74,144,226"] *[style*="color:#1e40af"] {
color: var(--c-brand-700) !important;
}
/* ─── 41. Filter pills + chips utilitaires ───────────────────────── */
.chip {
display: inline-flex;
align-items: center;
gap: 6px;
height: 28px;
padding: 0 12px;
border-radius: var(--r-pill);
background: var(--c-bg-subtle);
color: var(--c-text);
font-size: var(--t-sm);
font-weight: var(--fw-medium);
border: 1px solid var(--c-border-soft);
transition: background var(--tr-fast), border-color var(--tr-fast);
cursor: pointer;
text-decoration: none;
}
.chip:hover {
background: var(--c-bg-surface);
border-color: var(--c-border);
color: var(--c-text);
text-decoration: none;
}
.chip.is-active {
background: var(--c-brand-50);
border-color: var(--c-brand-200);
color: var(--c-brand-700);
}
/* ─── 42. Banners (alerts amples avec icône + titre) ─────────────────
* Usage :
* ─────────────────────────────────────────────────────────────────── */
.sc-banner {
display: flex;
align-items: flex-start;
gap: var(--s-3);
padding: var(--s-4);
border-radius: var(--r);
border: 1px solid transparent;
background: var(--c-bg-subtle);
}
.sc-banner-icon {
width: 36px; height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--r-sm);
flex-shrink: 0;
background: var(--c-bg-surface);
color: var(--c-text-muted);
border: 1px solid var(--c-border-soft);
}
.sc-banner-icon svg { color: inherit; }
.sc-banner-body { flex: 1; min-width: 0; }
.sc-banner-title {
font-size: var(--t-md);
font-weight: var(--fw-semibold);
color: var(--c-text);
margin-bottom: 2px;
}
.sc-banner-text {
font-size: var(--t-sm);
color: var(--c-text-muted);
line-height: 1.5;
}
.sc-banner-text a { color: inherit; text-decoration: underline; }
.sc-banner--brand {
background: var(--c-brand-50);
border-color: var(--c-brand-100);
}
.sc-banner--brand .sc-banner-icon { background: #fff; border-color: var(--c-brand-200); color: var(--c-brand-600); }
.sc-banner--brand .sc-banner-title { color: var(--c-brand-700); }
.sc-banner--success {
background: var(--c-success-bg);
border-color: var(--c-success-border);
}
.sc-banner--success .sc-banner-icon { background: #fff; border-color: var(--c-success-border); color: var(--c-success); }
.sc-banner--success .sc-banner-title { color: var(--c-success); }
.sc-banner--warning {
background: var(--c-warning-bg);
border-color: var(--c-warning-border);
}
.sc-banner--warning .sc-banner-icon { background: #fff; border-color: var(--c-warning-border); color: var(--c-warning); }
.sc-banner--warning .sc-banner-title { color: var(--c-warning); }
.sc-banner--danger {
background: var(--c-danger-bg);
border-color: var(--c-danger-border);
}
.sc-banner--danger .sc-banner-icon { background: #fff; border-color: var(--c-danger-border); color: var(--c-danger); }
.sc-banner--danger .sc-banner-title { color: var(--c-danger); }
/* ─── 43. Page title pattern unifié ──────────────────────────────────
*
*
Titre
*
Sous-titre / contexte
*
.
* Sur mobile, chaque devient une "card" stack + clic = modal.
* Les colonnes secondaires doivent avoir .sc-col-secondary pour être
* masquées (resteront visibles dans la modale détail).
* ─────────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
/* Masquer les colonnes secondaires */
.sc-table-responsive .sc-col-secondary { display: none !important; }
.sc-table-responsive .sc-col-mobile-hide { display: none !important; }
/* Tables → cards stack */
.sc-table-responsive thead { display: none; }
.sc-table-responsive tbody tr {
display: flex;
flex-direction: column;
background: var(--c-bg-surface);
border: 1px solid var(--c-border-soft);
border-radius: var(--r);
margin-bottom: var(--s-2);
padding: var(--s-3);
gap: 6px;
}
.sc-table-responsive tbody td {
display: flex;
align-items: center;
gap: var(--s-2);
border: none !important;
padding: 2px 0 !important;
font-size: var(--t-sm);
background: transparent !important;
}
.sc-table-responsive tbody td[data-label]::before {
content: attr(data-label);
color: var(--c-text-subtle);
font-size: var(--t-xs);
font-weight: var(--fw-semibold);
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
min-width: 80px;
}
}
/* Container table responsive scroll-x avec ombre indicative */
.table-responsive {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
@media (max-width: 767.98px) {
.table-responsive {
margin: 0 calc(-1 * var(--s-3));
padding: 0 var(--s-3);
}
}
/* ─── 47. Respect des bords mobile (anti-débordement) ───────────────── */
@media (max-width: 575.98px) {
/* App content : padding latéral plus serré */
.app-content { padding-left: 0; padding-right: 0; }
.app-content > .container-fluid { padding-left: var(--s-3) !important; padding-right: var(--s-3) !important; }
.app-content-inner.card > .card-body { padding: var(--s-3) !important; }
/* Cards : retirer les bordures latérales pour effet "full bleed" */
.card { border-radius: var(--r); }
/* Titres de page : moins gros sur mobile */
.app-content h2, .app-content .h2 {
font-size: var(--t-2xl) !important;
line-height: var(--lh-2xl) !important;
}
.app-content h3, .app-content .h3 { font-size: var(--t-xl) !important; line-height: var(--lh-xl) !important; }
/* Pages avec d-flex justify-content-between en header : empilement vertical */
.sc-page-header {
flex-direction: column;
align-items: flex-start !important;
gap: var(--s-3) !important;
}
.sc-page-header .sc-toolbar { width: 100%; justify-content: flex-end; }
/* Forms full-width par défaut */
.form-control, .form-select { width: 100%; }
/* Btn-group : empiler verticalement si nécessaire */
.btn-group-vertical-mobile {
flex-direction: column;
width: 100%;
}
.btn-group-vertical-mobile .btn { width: 100%; }
/* Modal : fullscreen sur mobile */
.modal-dialog {
margin: 0;
max-width: 100%;
height: 100%;
min-height: 100vh;
}
.modal-content {
height: 100vh;
border-radius: 0;
border: none;
}
.modal-body {
max-height: calc(100vh - 130px);
overflow-y: auto;
}
/* Dropdowns : full width */
.dropdown-menu { width: calc(100vw - var(--s-6)); max-width: 400px; }
/* Évite tout dépassement horizontal de body */
body { overflow-x: hidden; }
/* Tables : forcer scroll-x */
table { width: 100% !important; }
.table { font-size: var(--t-sm); }
}
/* ─── 48. Empty states mobile ──────────────────────────────────────── */
@media (max-width: 575.98px) {
.ks-empty { padding: var(--s-8) var(--s-3) !important; }
.ks-empty__icon { width: 56px !important; height: 56px !important; }
.ks-empty__title { font-size: var(--t-base) !important; }
.ks-empty__hint { font-size: var(--t-xs) !important; }
}
/* ─── 49. KPI cards : empiler 2 par ligne sur mobile ────────────────── */
@media (max-width: 575.98px) {
.row.g-3 > [class*="col-md-3"] { width: 50%; }
.app-content .card-body div[style*="font-size:1.6rem"],
.app-content .card-body div[style*="font-size:1.8rem"] {
font-size: var(--t-xl) !important;
line-height: var(--lh-xl) !important;
}
}
/* ═══════════════════════════════════════════════════════════════════
* SESSION 6 — Mobile-first GLOBAL : règles catch-all sans toucher
* aux vues. Application automatique partout dans l'app.
* ═══════════════════════════════════════════════════════════════════ */
/* ─── 50. Admin subnav refondu indigo + scroll mobile propre ────────── */
.sc-admin-subnav {
margin: calc(-1 * var(--s-3)) calc(-1 * var(--s-5)) var(--s-4) calc(-1 * var(--s-5));
background: var(--c-bg-surface);
border-bottom: 1px solid var(--c-border-soft);
padding: 0 var(--s-5);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.sc-admin-subnav::-webkit-scrollbar { display: none; }
.sc-adm-link {
color: var(--c-text-muted) !important;
font-weight: var(--fw-medium);
font-size: var(--t-sm);
padding: var(--s-3) var(--s-3) calc(var(--s-3) - 2px);
transition: color var(--tr-fast), border-color var(--tr-fast), background var(--tr-fast);
display: inline-flex;
align-items: center;
gap: 6px;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
text-decoration: none !important;
white-space: nowrap;
background: transparent;
}
.sc-adm-link:hover {
color: var(--c-text) !important;
background: transparent !important;
border-bottom-color: transparent !important;
}
.sc-adm-link.active {
color: var(--c-brand-600) !important;
background: transparent !important;
border-bottom-color: var(--c-brand-500) !important;
font-weight: var(--fw-semibold);
}
.sc-adm-link svg { color: inherit; flex-shrink: 0; }
@media (max-width: 575.98px) {
.sc-admin-subnav {
margin: calc(-1 * var(--s-3)) calc(-1 * var(--s-3)) var(--s-3) calc(-1 * var(--s-3));
padding: 0 var(--s-3);
}
.sc-adm-link {
font-size: var(--t-xs);
padding: var(--s-2) var(--s-2);
}
.sc-adm-link svg { width: 16px; height: 16px; }
}
/* ─── 51. AUTO-MOBILE : toutes les tables sc-table deviennent
* responsive (cards mode) sur mobile, sans qu'on ait à ajouter de classe.
* Pour conserver le tableau classique : ajouter `.sc-table-keep-classic`.
* ─────────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
table.sc-table:not(.sc-table-keep-classic),
table.sc-table-responsive {
display: block;
width: 100%;
}
table.sc-table:not(.sc-table-keep-classic) thead,
table.sc-table-responsive thead {
display: none;
}
table.sc-table:not(.sc-table-keep-classic) tbody,
table.sc-table-responsive tbody {
display: block;
width: 100%;
}
table.sc-table:not(.sc-table-keep-classic) tbody tr,
table.sc-table-responsive tbody tr {
display: flex;
flex-direction: column;
background: var(--c-bg-surface);
border: 1px solid var(--c-border-soft);
border-radius: var(--r);
margin-bottom: var(--s-2);
padding: var(--s-3);
gap: 8px;
}
table.sc-table:not(.sc-table-keep-classic) tbody td,
table.sc-table-responsive tbody td {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-3);
border: none !important;
padding: 2px 0 !important;
font-size: var(--t-sm);
background: transparent !important;
text-align: left !important;
min-height: 24px;
}
/* Label CAPS issue de data-label OU du header correspondant */
table.sc-table:not(.sc-table-keep-classic) tbody td[data-label]::before,
table.sc-table-responsive tbody td[data-label]::before {
content: attr(data-label);
color: var(--c-text-subtle);
font-size: var(--t-xs);
font-weight: var(--fw-semibold);
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
flex-shrink: 0;
min-width: 80px;
}
/* Si pas de data-label : on cache silencieusement les td vides
et on aligne le contenu à gauche */
table.sc-table:not(.sc-table-keep-classic) tbody td:not([data-label]),
table.sc-table-responsive tbody td:not([data-label]) {
justify-content: flex-start;
}
/* Cellule contenant uniquement un ![]()
sans data-label = icône/avatar
en haut de la card stack */
table.sc-table:not(.sc-table-keep-classic) tbody td:has(> img:only-child),
table.sc-table-responsive tbody td:has(> img:only-child) {
justify-content: center;
padding-bottom: var(--s-2) !important;
}
/* Colonnes marquées sc-col-secondary : masquées */
.sc-col-secondary { display: none !important; }
}
/* ─── 52. AUTO-MOBILE : Headers de page (d-flex justify-content-between
* + mb-3/mb-4 + flex-wrap) → stack vertical + sc-toolbar wrap.
* ─────────────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
.app-content .d-flex.justify-content-between.flex-wrap.mb-3,
.app-content .d-flex.justify-content-between.flex-wrap.mb-4,
.app-content .d-flex.justify-content-between.mb-3.flex-wrap,
.app-content .d-flex.justify-content-between.mb-4.flex-wrap {
flex-direction: column !important;
align-items: stretch !important;
gap: var(--s-3) !important;
}
/* La 2e colonne (actions) se retrouve en bas, alignée droite */
.app-content .d-flex.justify-content-between.flex-wrap > div:last-child,
.app-content .d-flex.justify-content-between.mb-3.flex-wrap > div:last-child,
.app-content .d-flex.justify-content-between.mb-4.flex-wrap > div:last-child {
align-self: stretch;
justify-content: flex-end;
display: flex;
flex-wrap: wrap;
gap: var(--s-2);
}
}
/* ─── 53. AUTO-MOBILE : boutons dans toolbar trop longs sur mobile
* → réduit en compact (icône + 1 mot court ou icône seule via aria-label).
* Opt-in : ajouter classe `.sc-toolbar` sur le wrapper.
* ─────────────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
.sc-toolbar { gap: var(--s-2); flex-wrap: wrap; }
/* Si btn n'a pas .sc-btn-r mais a un SVG et du texte : réduit taille */
.sc-toolbar > .btn:not(.sc-btn-r) {
padding: 8px 12px !important;
font-size: var(--t-xs) !important;
}
}
/* ─── 54. Forms responsive auto ──────────────────────────────────── */
@media (max-width: 575.98px) {
/* Les row g-3 dans forms restent OK, mais les col-md-* deviennent
col-12 par défaut Bootstrap. On force le form layout. */
.card-body form .row > [class*="col-md-"]:not([class*="col-12"]) {
width: 100%;
}
/* Card-footer avec d-flex justify-content-between → stack */
.card-footer.d-flex.justify-content-between {
flex-direction: column-reverse;
gap: var(--s-2);
}
.card-footer.d-flex.justify-content-between > * {
width: 100%;
}
.card-footer.d-flex.justify-content-between .btn {
width: 100%;
}
}
/* ─── 55. Listes (ul, .list-group) sobres ────────────────────────── */
.list-group {
border-radius: var(--r);
}
.list-group-item {
border-color: var(--c-border-soft);
color: var(--c-text);
font-size: var(--t-sm);
padding: var(--s-3) var(--s-4);
}
.list-group-item:hover { background: var(--c-bg-subtle); }
/* ─── 56. Inline forms (filtres en haut de listes) ───────────────── */
@media (max-width: 767.98px) {
.app-content form.row,
.app-content form .row.g-2,
.app-content form .row.g-3 {
margin: 0 0 var(--s-3);
}
.app-content form .row > [class*="col-"] {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
margin-bottom: var(--s-2);
}
}
/* ─── 57. Cards d'index (espaces, etc.) → bordure douce mobile ────── */
@media (max-width: 575.98px) {
.card { border-radius: var(--r); }
.card-body { padding: var(--s-3) !important; }
.card-header { padding: var(--s-3) !important; }
.card-footer { padding: var(--s-3) !important; }
}
/* ─── 58. Workflow view (timeline étapes) responsive ───────────────── */
@media (max-width: 575.98px) {
.sc-wf-step-num { width: 28px !important; height: 28px !important; font-size: var(--t-xs) !important; }
.sc-wf-step-current, .sc-wf-step-current * { font-size: var(--t-sm); }
ol.sc-chain-mini, ol.sc-chain-preview { font-size: var(--t-sm); }
ol.sc-chain-preview .sc-chain-badge { width: 24px !important; height: 24px !important; }
}
/* ─── 59. Tabs Bootstrap → modernisé ──────────────────────────────── */
.nav-tabs {
border-bottom: 1px solid var(--c-border-soft);
gap: var(--s-1);
}
.nav-tabs .nav-link {
color: var(--c-text-muted);
border: none;
border-bottom: 2px solid transparent;
border-radius: 0;
padding: var(--s-3) var(--s-3);
font-size: var(--t-sm);
font-weight: var(--fw-medium);
background: transparent;
}
.nav-tabs .nav-link:hover {
color: var(--c-text);
background: transparent;
border-bottom-color: transparent;
}
.nav-tabs .nav-link.active {
color: var(--c-brand-600);
background: transparent;
border-bottom-color: var(--c-brand-500);
font-weight: var(--fw-semibold);
}
/* ─── 60. Breadcrumbs : truncate long labels mobile ──────────────── */
@media (max-width: 575.98px) {
.sc-breadcrumb {
font-size: var(--t-xs);
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.sc-breadcrumb::-webkit-scrollbar { display: none; }
.sc-bc-link { padding: 2px 6px; }
.sc-bc-link span { max-width: 120px; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: bottom; }
}
/* ═══════════════════════════════════════════════════════════════════
* SESSION 7 — Pattern .sc-folder UNIFIÉ pour toute l'app
* Espaces · Bibliothèques · Dossiers · Sous-dossiers · Fichiers
* ═══════════════════════════════════════════════════════════════════ */
/* ─── 61. Variante "+ Nouveau" : bordure dashed, fond subtil ──────── */
.sc-folder--new .sc-folder-icon,
.sc-folder-icon--new {
background: var(--c-bg-subtle) !important;
border: 2px dashed var(--c-border) !important;
border-radius: 10px;
color: var(--c-text-muted);
}
.sc-folder--new .sc-folder-icon::before,
.sc-folder--new .sc-folder-icon::after,
.sc-folder-icon--new::before,
.sc-folder-icon--new::after {
display: none !important;
}
.sc-folder--new .sc-folder-icon svg,
.sc-folder-icon--new svg {
color: var(--c-text-muted);
z-index: auto;
}
.sc-folder--new:hover .sc-folder-icon {
background: var(--c-brand-50) !important;
border-color: var(--c-brand-200) !important;
}
.sc-folder--new:hover .sc-folder-icon svg {
color: var(--c-brand-500);
}
/* ─── 62. Variante "fichier" : icône doc carrée (pas dossier coloré) ── */
.sc-folder--file .sc-folder-icon {
background: var(--c-bg-subtle);
border: 1px solid var(--c-border-soft);
border-radius: 10px;
color: var(--c-text-muted);
}
.sc-folder--file .sc-folder-icon::before,
.sc-folder--file .sc-folder-icon::after {
display: none !important;
}
.sc-folder--file .sc-folder-icon svg {
color: var(--c-text-muted);
width: 24px;
height: 24px;
z-index: auto;
}
/* ─── 63. Couleur d'icône par extension de fichier ────────────────── */
.sc-folder--file[data-ext="pdf"] .sc-folder-icon svg { color: #DC2626; }
.sc-folder--file[data-ext="docx"] .sc-folder-icon svg,
.sc-folder--file[data-ext="doc"] .sc-folder-icon svg,
.sc-folder--file[data-ext="odt"] .sc-folder-icon svg { color: #2563EB; }
.sc-folder--file[data-ext="xlsx"] .sc-folder-icon svg,
.sc-folder--file[data-ext="xls"] .sc-folder-icon svg,
.sc-folder--file[data-ext="csv"] .sc-folder-icon svg,
.sc-folder--file[data-ext="ods"] .sc-folder-icon svg { color: #15803D; }
.sc-folder--file[data-ext="pptx"] .sc-folder-icon svg,
.sc-folder--file[data-ext="ppt"] .sc-folder-icon svg,
.sc-folder--file[data-ext="odp"] .sc-folder-icon svg { color: #EA580C; }
.sc-folder--file[data-ext="jpg"] .sc-folder-icon svg,
.sc-folder--file[data-ext="jpeg"] .sc-folder-icon svg,
.sc-folder--file[data-ext="png"] .sc-folder-icon svg,
.sc-folder--file[data-ext="gif"] .sc-folder-icon svg,
.sc-folder--file[data-ext="webp"] .sc-folder-icon svg,
.sc-folder--file[data-ext="svg"] .sc-folder-icon svg { color: #7C3AED; }
.sc-folder--file[data-ext="mp4"] .sc-folder-icon svg,
.sc-folder--file[data-ext="mov"] .sc-folder-icon svg,
.sc-folder--file[data-ext="webm"] .sc-folder-icon svg { color: #EC4899; }
.sc-folder--file[data-ext="mp3"] .sc-folder-icon svg,
.sc-folder--file[data-ext="wav"] .sc-folder-icon svg,
.sc-folder--file[data-ext="ogg"] .sc-folder-icon svg { color: #0891B2; }
.sc-folder--file[data-ext="zip"] .sc-folder-icon svg,
.sc-folder--file[data-ext="rar"] .sc-folder-icon svg,
.sc-folder--file[data-ext="7z"] .sc-folder-icon svg,
.sc-folder--file[data-ext="tar"] .sc-folder-icon svg { color: #B45309; }
.sc-folder--file[data-ext="txt"] .sc-folder-icon svg,
.sc-folder--file[data-ext="md"] .sc-folder-icon svg { color: var(--c-text-muted); }
/* ─── 64. Meta sous le nom (taille fichier, date) ─────────────────── */
.sc-folder-meta {
font-size: 10px;
color: var(--c-text-subtle);
line-height: 1.2;
margin-top: 2px;
width: 100%;
text-align: center;
}
/* ─── 65. Mode "list" : items en ligne (dense, file browser style) ─ */
.sc-folder-list {
display: flex;
flex-direction: column;
gap: 0;
border-radius: var(--r);
overflow: hidden;
background: var(--c-bg-surface);
border: 1px solid var(--c-border-soft);
}
.sc-folder-list .sc-folder {
flex-direction: row;
align-items: center;
text-align: left;
padding: var(--s-2) var(--s-3);
gap: var(--s-3);
border-radius: 0;
border-bottom: 1px solid var(--c-border-soft);
}
.sc-folder-list .sc-folder:last-child { border-bottom: none; }
.sc-folder-list .sc-folder:hover { background: var(--c-bg-subtle); }
.sc-folder-list .sc-folder-icon {
width: 36px;
height: 30px;
flex-shrink: 0;
}
.sc-folder-list .sc-folder-icon svg {
width: 16px; height: 16px;
}
.sc-folder-list .sc-folder-name {
-webkit-line-clamp: 1;
text-align: left;
flex: 1;
font-size: var(--t-sm);
word-break: normal;
}
.sc-folder-list .sc-folder-meta {
text-align: right;
width: auto;
margin-top: 0;
flex-shrink: 0;
}
/* ═══════════════════════════════════════════════════════════════════
* SESSION 9 — Override legacy purple --purple → indigo
* Les fichiers app.css, dashboard.css, layout-theme.css définissent
* encore --purple: #7A4183. On le redirige vers indigo brand-500.
* ═══════════════════════════════════════════════════════════════════ */
:root {
--purple: var(--c-brand-500) !important;
--ks-purple: var(--c-brand-500) !important;
--ks-purple-horizon: var(--c-brand-500) !important;
--primary: var(--c-brand-500) !important;
--primary-light: var(--c-brand-100) !important;
--primary-dark: var(--c-brand-700) !important;
--primary-50: var(--c-brand-50) !important;
--accent: var(--c-brand-500) !important;
--accent-light: var(--c-brand-100) !important;
--accent-dark: var(--c-brand-700) !important;
}
/* Catch-all : éléments avec background:#7A4183 hérités */
.bg-purple, .text-purple {
background: var(--c-brand-500) !important;
color: #fff !important;
}
.text-keller-primary, .text-purple-horizon {
color: var(--c-brand-500) !important;
}
/* ═══════════════════════════════════════════════════════════════════
* SESSION 10 — Fix mobile : rail caché vraiment + ajustements topbar
* ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
.sc-rail { display: none !important; visibility: hidden !important; }
.app-main {
margin-left: 0 !important;
padding-bottom: calc(76px + env(safe-area-inset-bottom)) !important;
}
.sc-flyout { display: none !important; }
}
@media (max-width: 575.98px) {
/* Logo topbar : compact net sans pavé blanc qui dépasse */
.sc-topbar-brand img {
width: 36px !important;
height: 36px !important;
border-radius: 8px !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
box-shadow: none !important;
}
/* Topbar mobile : compactée à 56px */
.app-topbar, .sc-topbar {
min-height: 56px !important;
height: 56px !important;
}
.app-main { padding-top: 56px !important; }
/* Search : pleine largeur restante */
.sc-search-wrap { flex: 1; min-width: 0; }
.sc-search-input {
padding: 8px 12px 8px 36px !important;
height: 36px !important;
font-size: var(--t-sm) !important;
}
.sc-topbar-icon-btn {
width: 36px !important;
height: 36px !important;
}
}
/* ═══════════════════════════════════════════════════════════════════
* SESSION 11 — Override agressif des background:#7A4183 inline + var
* Pour empêcher tout violet résiduel.
* ═══════════════════════════════════════════════════════════════════ */
.btn-primary,
.btn.btn-primary,
button.btn-primary {
background-color: var(--c-brand-500) !important;
border-color: var(--c-brand-500) !important;
color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus {
background-color: var(--c-brand-600) !important;
border-color: var(--c-brand-600) !important;
}
/* Banner supervision : assurer indigo */
.sc-banner--brand .sc-banner-title { color: var(--c-brand-700) !important; }
[style*="color:#1e40af"] { color: var(--c-brand-700) !important; }
* Remplace la barre horizontale 13 items par un bouton trigger sobre
* qui ouvre un modal centré avec grille d'items.
* ═══════════════════════════════════════════════════════════════════ */
/* Masque l'ancienne barre (au cas où elle réapparaisse via cache) */
.sc-admin-subnav { display: none !important; }
/* Bouton trigger : 1 ligne, élégant */
.sc-admin-trigger-wrap {
display: flex;
justify-content: flex-start;
margin: calc(-1 * var(--s-2)) 0 var(--s-4);
}
.sc-admin-trigger {
display: inline-flex;
align-items: center;
gap: var(--s-3);
padding: var(--s-2) var(--s-4);
background: var(--c-bg-surface);
border: 1px solid var(--c-border-soft);
border-radius: var(--r);
color: var(--c-text);
font-family: inherit;
cursor: pointer;
transition: background var(--tr-fast), border-color var(--tr-fast), box-shadow var(--tr-fast);
min-width: 240px;
text-align: left;
}
.sc-admin-trigger:hover {
background: var(--c-bg-subtle);
border-color: var(--c-border);
}
.sc-admin-trigger[aria-expanded="true"] {
background: var(--c-brand-50);
border-color: var(--c-brand-200);
}
.sc-admin-trigger-icon {
width: 36px;
height: 36px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--r-sm);
background: var(--c-brand-50);
color: var(--c-brand-500);
}
.sc-admin-trigger-icon svg { color: inherit; }
.sc-admin-trigger-label {
flex: 1;
display: flex;
flex-direction: column;
line-height: 1.2;
min-width: 0;
}
.sc-admin-trigger-section {
font-size: var(--t-sm);
font-weight: var(--fw-semibold);
color: var(--c-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sc-admin-trigger-hint {
font-size: 11px;
color: var(--c-text-subtle);
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
font-weight: var(--fw-medium);
margin-top: 2px;
}
.sc-admin-trigger-chevron {
color: var(--c-text-muted);
transition: transform var(--tr-fast);
}
.sc-admin-trigger[aria-expanded="true"] .sc-admin-trigger-chevron {
transform: rotate(180deg);
}
@media (max-width: 575.98px) {
.sc-admin-trigger { min-width: 0; width: 100%; }
}
/* Modal overlay + dialog (style identique à sc-app-menu) */
.sc-admin-menu-overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, .55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: var(--z-modal);
display: flex;
align-items: center;
justify-content: center;
padding: var(--s-4);
opacity: 0;
pointer-events: none;
transition: opacity 180ms ease;
}
.sc-admin-menu-overlay.is-open {
opacity: 1;
pointer-events: auto;
}
.sc-admin-menu-dialog {
background: var(--c-bg-surface);
border-radius: var(--r-lg);
width: 100%;
max-width: 640px;
max-height: 90vh;
display: flex;
flex-direction: column;
box-shadow: var(--sh-lg);
transform: translateY(20px) scale(.96);
transition: transform 220ms cubic-bezier(.34,1.56,.64,1);
overflow: hidden;
}
.sc-admin-menu-overlay.is-open .sc-admin-menu-dialog {
transform: translateY(0) scale(1);
}
.sc-admin-menu-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--s-3);
padding: var(--s-4) var(--s-5);
border-bottom: 1px solid var(--c-border-soft);
}
.sc-admin-menu-title {
font-size: var(--t-lg);
font-weight: var(--fw-semibold);
color: var(--c-text);
}
.sc-admin-menu-sub {
font-size: var(--t-sm);
color: var(--c-text-muted);
margin-top: 2px;
}
.sc-admin-menu-close {
background: var(--c-bg-subtle);
border: none;
width: 32px;
height: 32px;
border-radius: 50%;
color: var(--c-text-muted);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
-webkit-tap-highlight-color: transparent;
}
.sc-admin-menu-close:hover { background: var(--c-border-soft); color: var(--c-text); }
.sc-admin-menu-close svg { color: inherit; }
.sc-admin-menu-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-2);
padding: var(--s-4) var(--s-5) var(--s-5);
overflow-y: auto;
flex: 1;
}
@media (max-width: 575.98px) {
.sc-admin-menu-grid { grid-template-columns: repeat(2, 1fr); }
}
.sc-admin-menu-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: var(--s-2);
padding: var(--s-3) var(--s-2);
background: var(--c-bg-app);
border: 1px solid transparent;
border-radius: var(--r);
color: var(--c-text);
text-decoration: none;
font-size: var(--t-sm);
font-weight: var(--fw-medium);
transition: background var(--tr-fast), border-color var(--tr-fast), transform var(--tr-fast);
min-height: 96px;
}
.sc-admin-menu-item:hover {
background: var(--c-brand-50);
border-color: var(--c-brand-100);
color: var(--c-brand-700);
transform: translateY(-1px);
text-decoration: none;
}
.sc-admin-menu-item.is-active {
background: var(--c-brand-500);
border-color: var(--c-brand-500);
color: #fff;
}
.sc-admin-menu-item.is-active:hover {
background: var(--c-brand-600);
border-color: var(--c-brand-600);
color: #fff;
}
.sc-admin-menu-ic {
width: 40px;
height: 40px;
border-radius: var(--r-sm);
background: var(--c-brand-50);
color: var(--c-brand-500);
display: flex;
align-items: center;
justify-content: center;
}
.sc-admin-menu-item.is-active .sc-admin-menu-ic {
background: rgba(255,255,255,.18);
color: #fff;
}
.sc-admin-menu-ic svg { color: inherit; }
.sc-admin-menu-lbl {
line-height: 1.25;
font-size: var(--t-xs);
font-weight: var(--fw-medium);
}
/* ─────────────────────────────────────────────────────────────────────
* Modale "Téléverser : fichier ou dossier ?"
* Cartes de choix grandes et cliquables.
* ──────────────────────────────────────────────────────────────────── */
.sc-upload-choice {
flex: 1 1 0;
background: #fff;
border: 2px solid var(--c-border-soft);
border-radius: 12px;
padding: 1.5rem 1rem;
display: flex;
flex-direction: column;
align-items: center;
gap: .5rem;
cursor: pointer;
transition: border-color .15s, background .15s, transform .12s, box-shadow .15s;
text-align: center;
color: var(--c-text);
min-height: 170px;
font-family: inherit;
}
.sc-upload-choice:hover {
border-color: var(--c-brand-500);
background: var(--c-brand-50);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(15, 23, 42, .08);
}
.sc-upload-choice:focus-visible {
outline: none;
border-color: var(--c-brand-500);
box-shadow: 0 0 0 3px var(--c-brand-100);
}
.sc-upload-choice-icon {
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--c-brand-50);
color: var(--c-brand-500);
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: .25rem;
}
.sc-upload-choice-icon svg { color: inherit; }
.sc-upload-choice-title {
font-weight: 700;
font-size: 1.05rem;
color: var(--c-text);
}
.sc-upload-choice-hint {
font-size: .85rem;
color: var(--c-text-muted);
line-height: 1.35;
}
@media (max-width: 575.98px) {
.sc-upload-choice { min-height: 130px; padding: 1.1rem .75rem; }
.sc-upload-choice-icon { width: 48px; height: 48px; }
.sc-upload-choice-title { font-size: 1rem; }
.sc-upload-choice-hint { font-size: .8rem; }
}
/* ═══════════════════════════════════════════════════════════════════
* SESSION 12 — Harmonisation chrome : topbar + sidebar + footer
*
* Les trois zones de chrome (topbar, rail, footer) partagent la même
* couleur #D8E0EA pour un rendu cohérent style SharePoint Modern.
* Le contenu central reste sur fond blanc.
* ═══════════════════════════════════════════════════════════════════ */
/* Footer — variable globale chrome */
.app-footer {
background: var(--c-chrome-bg, #D8E0EA) !important;
border-top: 1px solid var(--c-chrome-border, rgba(0,0,0,.09)) !important;
color: var(--c-chrome-text-muted, #5A5A5A) !important;
}
.app-footer .sc-footer-brand strong {
color: var(--c-brand-700) !important;
}
.app-footer a { color: var(--c-chrome-text-muted, #5A5A5A) !important; }
.app-footer a:hover { color: var(--c-brand-600) !important; }
/* Topbar — s'assurer que le badge notification est visible sur #D8E0EA */
.sc-topbar-badge {
box-shadow: 0 0 0 2px #D9DDE5 !important;
}
/* Rail sidebar — border-right cohérente avec topbar border-bottom */
.sc-rail {
border-right: 1px solid rgba(0,0,0,.09) !important;
}
/* Topbar — border-bottom cohérente avec rail border-right */
.app-topbar {
border-bottom: 1px solid rgba(0,0,0,.09) !important;
}
/* Mobile footer : même couleur */
@media (max-width: 991.98px) {
.app-footer { background: #D9DDE5 !important; }
.sc-mobile-nav {
background: #D9DDE5 !important;
border-top: 1px solid rgba(0,0,0,.09) !important;
}
}