/* =========================================================
Charte Graphique et Design System SNCF Voyageurs
Projet : Plateforme de Montée en Compétences & Suivi d'Équipe
========================================================= */
@font-face {
font-family: 'Avenir';
src: url('./media/avenir-lighter-ZXW5KT7A.woff') format('woff');
font-weight: 100;
font-display: swap;
}
@font-face {
font-family: 'Avenir';
src: url('./media/avenir-book-G2Q26ARO.woff') format('woff');
font-weight: 300;
font-display: swap;
}
@font-face {
font-family: 'Avenir';
src: url('./media/avenir-roman-Z57JVYNO.woff') format('woff');
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: 'Avenir';
src: url('./media/avenir-medium-CK377F4E.woff') format('woff');
font-weight: 500;
font-display: swap;
}
@font-face {
font-family: 'Avenir';
src: url('./media/avenir-black-GIDNHM54.woff') format('woff');
font-weight: 900;
font-display: swap;
}
:root {
/* Polices */
--wcs-font-sans-serif: 'Avenir', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--wcs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
/* Palette officielle SNCF Voyageurs */
--sncf-vert-100: #f7fdf6;
--sncf-vert-200: #e7fce5;
--sncf-vert-300: #d3ffcf;
--sncf-vert-400: #bbffbe;
--sncf-vert-500: #34e88e;
--sncf-vert-600: #00856b;
--sncf-vert-700: #065654; /* Couleur d'ancrage SNCF */
--sncf-vert-800: #043e3d;
--sncf-vert-900: #002b28;
--sncf-bleu-50: #f0f7ff;
--sncf-bleu-100: #eff8ff;
--sncf-bleu-200: #dff2ff;
--sncf-bleu-300: #b0dfff;
--sncf-bleu-400: #3390ff;
--sncf-bleu-500: #00468c;
--sncf-bleu-600: #002346;
--sncf-bleu-700: #003366;
--sncf-bleu-800: #002244;
--sncf-jaune-100: #fffdf5;
--sncf-jaune-200: #fff9dd;
--sncf-jaune-300: #ffefab;
--sncf-jaune-400: #ffd245;
--sncf-orange-100: #fff7ed;
--sncf-orange-300: #ff6833;
--sncf-critical-500: #c80e0e;
--sncf-neutral-0: #ffffff;
--sncf-neutral-50: #f8fafc;
--sncf-neutral-100: #f1f5f9;
--sncf-neutral-200: #e2e8f0;
--sncf-neutral-300: #cbd5e1;
--sncf-neutral-400: #94a3b8;
--sncf-neutral-500: #64748b;
--sncf-neutral-600: #475569;
--sncf-neutral-700: #334155;
--sncf-neutral-800: #1e293b;
--sncf-neutral-900: #0f172a;
/* Dimensions */
--header-height: 64px;
--nav-width: 84px;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: var(--wcs-font-sans-serif);
font-weight: 300;
color: var(--sncf-neutral-800);
background-color: var(--sncf-neutral-50);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
height: 100vh;
overflow: hidden;
}
/* Grille principale */
.app-container {
display: grid;
grid-template-columns: var(--nav-width) 1fr;
grid-template-rows: var(--header-height) 1fr;
grid-template-areas:
"header header"
"nav content";
height: 100vh;
width: 100vw;
overflow: hidden;
}
/* =========================================================
HEADER SNCF
========================================================= */
header.app-header {
grid-area: header;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
height: var(--header-height);
background-color: var(--sncf-neutral-0);
border-bottom: 1px solid var(--sncf-neutral-200);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
z-index: 100;
}
.header-left {
display: flex;
align-items: center;
gap: 16px;
}
.header-logo {
height: 38px;
width: auto;
object-fit: contain;
cursor: pointer;
}
.header-title-group {
display: flex;
align-items: baseline;
gap: 10px;
}
.header-title {
font-size: 1.3rem;
font-weight: 500;
color: var(--sncf-neutral-800);
letter-spacing: -0.01em;
}
.header-subtitle {
font-size: 0.82rem;
color: var(--sncf-neutral-500);
font-weight: 400;
}
.release-version {
font-size: 0.75rem;
font-weight: 500;
background: var(--sncf-vert-100);
color: var(--sncf-vert-700);
border: 1px solid var(--sncf-vert-300);
padding: 2px 8px;
border-radius: 12px;
}
.header-actions {
display: flex;
align-items: center;
gap: 10px;
position: relative;
}
.btn-header {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 40px;
padding: 0 12px;
background: transparent;
border: 1px solid transparent;
border-radius: 6px;
color: var(--sncf-vert-700);
font-family: inherit;
font-size: 0.92rem;
font-weight: 500;
cursor: pointer;
transition: all 0.15s ease-in-out;
}
.btn-header:hover {
background-color: var(--sncf-vert-100);
color: var(--sncf-vert-800);
}
.btn-header.user-logged {
background-color: var(--sncf-vert-100);
border-color: var(--sncf-vert-300);
}
.btn-header .material-icons {
font-size: 22px;
}
.btn-icon-only {
width: 40px;
padding: 0;
border-radius: 50%;
}
/* User Menu Popover */
.user-menu-dropdown {
position: absolute;
top: 52px;
right: 0;
width: 290px;
background: #ffffff;
border-radius: 8px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
border: 1px solid var(--sncf-neutral-200);
padding: 12px 0 6px 0;
display: none;
flex-direction: column;
z-index: 1002;
animation: fadeIn 0.15s ease-out;
}
.user-menu-dropdown.open {
display: flex;
}
.user-menu-info {
padding: 4px 16px 12px 16px;
border-bottom: 1px solid var(--sncf-neutral-200);
margin-bottom: 6px;
}
.user-menu-name {
font-size: 0.95rem;
font-weight: 600;
color: var(--sncf-neutral-800);
}
.user-menu-role {
font-size: 0.8rem;
color: var(--sncf-neutral-500);
margin-top: 2px;
}
.user-menu-cp {
font-size: 0.78rem;
font-weight: 500;
color: var(--sncf-vert-700);
margin-top: 4px;
}
.user-menu-item {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 16px;
font-size: 0.88rem;
color: var(--sncf-neutral-700);
text-decoration: none;
cursor: pointer;
transition: background 0.12s ease;
border: none;
background: transparent;
width: 100%;
text-align: left;
font-family: inherit;
}
.user-menu-item:hover {
background: var(--sncf-neutral-100);
color: var(--sncf-vert-700);
}
.user-menu-item.logout {
color: var(--sncf-critical-500);
border-top: 1px solid var(--sncf-neutral-200);
margin-top: 4px;
padding-top: 10px;
}
.user-menu-item.logout:hover {
background: #fef2f2;
}
/* =========================================================
NOTIFICATION BELL & DROPDOWN POPOVER
========================================================= */
.notifications-wrapper {
position: relative;
display: inline-flex;
}
.notification-badge-pulse {
position: absolute;
top: -2px;
right: -2px;
min-width: 18px;
height: 18px;
padding: 0 4px;
background: #dc2626;
color: #ffffff;
border-radius: 9px;
font-size: 0.70rem;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #ffffff;
box-shadow: 0 2px 4px rgba(220, 38, 38, 0.4);
animation: notif-pulse 2s infinite ease-in-out;
}
@keyframes notif-pulse {
0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.6); }
50% { transform: scale(1.1); box-shadow: 0 0 0 5px rgba(220, 38, 38, 0); }
}
.notifications-dropdown {
position: absolute;
top: 52px;
right: -60px;
width: 360px;
max-width: calc(100vw - 32px);
background: #ffffff;
border-radius: 12px;
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.08);
border: 1px solid var(--sncf-neutral-200);
display: none;
flex-direction: column;
z-index: 1003;
animation: fadeIn 0.18s ease-out;
overflow: hidden;
}
.notifications-dropdown.open {
display: flex;
}
.notifications-header {
padding: 12px 16px;
background: #f8fafc;
border-bottom: 1px solid #e2e8f0;
display: flex;
align-items: center;
justify-content: space-between;
}
.notifications-header-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.92rem;
font-weight: 700;
color: #0f172a;
}
.notifications-count-pill {
font-size: 0.72rem;
padding: 2px 7px;
border-radius: 10px;
background: #e2e8f0;
color: #475569;
font-weight: 700;
}
.notifications-count-pill.has-unread {
background: #fee2e2;
color: #dc2626;
}
.btn-notif-mark-read {
background: transparent;
border: none;
color: var(--sncf-vert-700);
font-size: 0.76rem;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
border-radius: 6px;
transition: all 0.15s ease;
}
.btn-notif-mark-read:hover {
background: rgba(6, 86, 84, 0.08);
}
.notifications-body {
max-height: 380px;
overflow-y: auto;
display: flex;
flex-direction: column;
}
.notification-item {
padding: 12px 16px;
border-bottom: 1px solid #f1f5f9;
display: flex;
gap: 12px;
align-items: flex-start;
transition: background 0.15s ease;
position: relative;
text-decoration: none;
color: inherit;
cursor: pointer;
}
.notification-item:hover {
background: #f8fafc;
}
.notification-item.unread {
background: #f0fdf4;
}
.notification-item.unread::before {
content: '';
position: absolute;
left: 6px;
top: 18px;
width: 6px;
height: 6px;
border-radius: 50%;
background: #16a34a;
}
.notification-icon-wrap {
width: 34px;
height: 34px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 2px;
}
.notification-content {
flex: 1;
min-width: 0;
}
.notification-title {
font-size: 0.84rem;
font-weight: 700;
color: #0f172a;
margin-bottom: 2px;
display: flex;
align-items: center;
justify-content: space-between;
}
.notification-msg {
font-size: 0.78rem;
color: #475569;
line-height: 1.4;
margin-bottom: 4px;
}
.notification-meta {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.70rem;
color: #94a3b8;
}
.notification-action-link {
font-size: 0.72rem;
color: var(--sncf-vert-700);
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 2px;
}
.notification-empty {
padding: 32px 20px;
text-align: center;
color: #94a3b8;
font-size: 0.84rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.notifications-footer {
padding: 8px 16px;
background: #f8fafc;
border-top: 1px solid #e2e8f0;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.75rem;
}
.btn-notif-clear-all {
background: transparent;
border: none;
color: #94a3b8;
font-size: 0.72rem;
cursor: pointer;
padding: 2px 6px;
border-radius: 4px;
}
.btn-notif-clear-all:hover {
color: #ef4444;
}
/* =========================================================
NAVIGATION LATERALE (SIDEBAR)
========================================================= */
nav.app-nav {
grid-area: nav;
width: var(--nav-width);
background-color: var(--sncf-vert-700);
display: flex;
flex-direction: column;
align-items: stretch;
overflow-y: auto;
overflow-x: hidden;
user-select: none;
}
.nav-item {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 80px;
min-height: 80px;
width: 100%;
background: transparent;
color: var(--sncf-neutral-0);
text-decoration: none;
font-size: 11px;
font-weight: 500;
text-align: center;
gap: 6px;
cursor: pointer;
transition: background-color 0.15s ease-in-out;
padding: 0 4px;
border: none;
outline: none;
}
.nav-item .material-icons {
font-size: 24px;
line-height: 1;
}
.nav-item span {
display: block;
max-width: 76px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1.2;
}
.nav-item span.nav-label-multiline {
white-space: normal;
line-height: 1.1;
font-size: 10px;
max-width: 80px;
text-overflow: clip;
}
.nav-item:hover {
background-color: var(--sncf-vert-800);
}
.nav-item:active {
background-color: var(--sncf-vert-900);
}
.nav-item.active {
background-color: var(--sncf-vert-900);
}
.nav-item.active::after {
content: "";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 32px;
background-color: var(--sncf-vert-300);
border-radius: 4px 0 0 4px;
}
/* =========================================================
CONTENU PRINCIPAL
========================================================= */
main.app-main {
grid-area: content;
padding: 24px 32px;
overflow-y: auto;
background-color: var(--sncf-neutral-50);
height: calc(100vh - var(--header-height));
display: flex;
flex-direction: column;
}
/* Calage pleine page pour le module Planning (calage du header sticky) */
main.app-main:has(#view-planning.active-panel) {
padding-top: 0;
}
.view-panel {
display: none;
}
.view-panel.active-panel {
display: block;
}
/* Bannière de Mode (Évaluateur vs Agent) */
.mode-banner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 18px;
border-radius: 8px;
margin-bottom: 20px;
font-size: 0.9rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
.mode-banner.evaluator-mode {
background-color: var(--sncf-vert-100);
border: 1px solid var(--sncf-vert-300);
color: var(--sncf-vert-900);
}
.mode-banner.agent-mode {
background-color: var(--sncf-bleu-50);
border: 1px solid var(--sncf-bleu-300);
color: var(--sncf-bleu-600);
}
/* Boutons d'action standard - Hauteur et proportions rigoureusement unifiées */
.btn-primary-action {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 38px;
min-height: 38px;
line-height: 1;
padding: 0 16px;
box-sizing: border-box;
background-color: var(--sncf-vert-700);
color: #ffffff;
border: 1px solid var(--sncf-vert-700);
border-radius: 6px;
font-family: inherit;
font-size: 0.86rem;
font-weight: 600;
cursor: pointer;
transition: all 0.15s ease-in-out;
box-shadow: 0 1px 3px rgba(6, 86, 84, 0.2);
}
.btn-primary-action:hover {
background-color: var(--sncf-vert-800);
border-color: var(--sncf-vert-800);
transform: translateY(-1px);
}
.btn-secondary-action {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 38px;
min-height: 38px;
line-height: 1;
padding: 0 16px;
box-sizing: border-box;
background-color: #ffffff;
color: var(--sncf-vert-700);
border: 1px solid var(--sncf-neutral-300);
border-radius: 6px;
font-family: inherit;
font-size: 0.86rem;
font-weight: 600;
cursor: pointer;
transition: all 0.15s ease-in-out;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.btn-secondary-action:hover {
background-color: var(--sncf-neutral-100);
border-color: var(--sncf-vert-700);
color: var(--sncf-vert-800);
}
/* En-tête des vues principales avec actions en haut à droite */
.panel-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.panel-actions {
display: flex;
align-items: center;
gap: 10px;
}
.btn-action-top {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 38px;
min-height: 38px;
width: 148px;
min-width: 148px;
box-sizing: border-box;
padding: 0 14px;
background-color: #ffffff;
color: var(--sncf-vert-700);
border: 1px solid var(--sncf-neutral-300);
border-radius: 6px;
font-family: inherit;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: all 0.15s ease-in-out;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.btn-action-top:hover {
background-color: var(--sncf-neutral-100);
border-color: var(--sncf-vert-700);
color: var(--sncf-vert-800);
transform: translateY(-1px);
}
.btn-action-top-primary {
background-color: var(--sncf-vert-700);
color: #ffffff;
border-color: var(--sncf-vert-700);
box-shadow: 0 1px 3px rgba(6, 86, 84, 0.2);
}
.btn-action-top-primary:hover {
background-color: var(--sncf-vert-800);
border-color: var(--sncf-vert-800);
color: #ffffff;
}
/* Barres de filtres */
.filter-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 18px;
flex-wrap: wrap;
}
.search-input-container {
display: flex;
align-items: center;
background: #ffffff;
border: 1px solid var(--sncf-neutral-300);
border-radius: 6px;
padding: 0 14px;
height: 38px;
min-height: 38px;
box-sizing: border-box;
min-width: 380px;
max-width: 480px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.search-input-container:focus-within {
border-color: var(--sncf-vert-700);
box-shadow: 0 0 0 2px rgba(6, 86, 84, 0.15);
}
.search-input-container .material-icons {
font-size: 20px;
color: var(--sncf-neutral-400);
margin-right: 8px;
}
.search-input-container input {
border: none;
outline: none;
font-family: inherit;
font-size: 0.9rem;
width: 100%;
color: var(--sncf-neutral-800);
}
.filter-pills {
display: flex;
gap: 8px;
}
.filter-pill {
padding: 6px 14px;
border-radius: 20px;
border: 1px solid var(--sncf-neutral-300);
background: #ffffff;
color: var(--sncf-neutral-700);
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
transition: all 0.12s ease;
}
.filter-pill:hover {
border-color: var(--sncf-vert-700);
color: var(--sncf-vert-700);
}
.filter-pill.active {
background: var(--sncf-vert-700);
color: #ffffff;
border-color: var(--sncf-vert-700);
}
/* =========================================================
MODULE FICHES NIVEAUX (R2N, RER NG, PREREQUIS)
========================================================= */
.fiches-control-bar {
background: #ffffff;
border: 1px solid var(--sncf-neutral-200);
border-radius: 8px;
padding: 16px 20px;
margin-bottom: 20px;
display: flex;
flex-direction: column;
gap: 14px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}
.fiches-control-row {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
}
.fiches-actions-group {
margin-left: auto;
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.series-tabs {
display: flex;
background: var(--sncf-neutral-100);
padding: 4px;
border-radius: 8px;
gap: 4px;
}
.series-tab {
padding: 8px 16px;
border-radius: 6px;
border: none;
background: transparent;
color: var(--sncf-neutral-600);
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
transition: all 0.15s ease;
font-family: inherit;
display: flex;
align-items: center;
gap: 8px;
}
.series-tab:hover {
color: var(--sncf-vert-700);
}
.series-tab.active {
background: #ffffff;
color: var(--sncf-vert-700);
font-weight: 600;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.levels-tabs {
display: flex;
gap: 8px;
align-items: center;
}
.level-btn {
padding: 6px 14px;
border-radius: 6px;
border: 1px solid var(--sncf-neutral-300);
background: #ffffff;
color: var(--sncf-neutral-700);
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
transition: all 0.15s ease;
font-family: inherit;
display: flex;
align-items: center;
gap: 6px;
}
.level-btn:hover {
border-color: var(--sncf-vert-700);
color: var(--sncf-vert-700);
}
.level-btn.active {
background: var(--sncf-vert-700);
color: #ffffff;
border-color: var(--sncf-vert-700);
}
/* Accordéon / Panneau explicatif du descriptif (1.5, 2.5, 3.5) */
.desc-panel {
background: var(--sncf-bleu-50);
border: 1px solid var(--sncf-bleu-200);
border-radius: 8px;
padding: 16px 20px;
margin-bottom: 20px;
}
.desc-header {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
user-select: none;
}
.desc-title {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.98rem;
font-weight: 600;
color: var(--sncf-bleu-600);
}
.desc-content {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid var(--sncf-bleu-200);
font-size: 0.88rem;
color: var(--sncf-neutral-700);
line-height: 1.6;
}
.desc-list {
list-style: none;
padding-left: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.desc-list li {
position: relative;
padding-left: 20px;
}
.desc-list li::before {
content: "•";
position: absolute;
left: 6px;
color: var(--sncf-vert-600);
font-weight: bold;
}
/* Tableau d'évaluation de la Fiche de Niveau (En-tête fixe au défilement) */
.fiche-table-container {
background: #ffffff;
border: 1px solid var(--sncf-neutral-200);
border-radius: 8px;
max-height: calc(100vh - 290px);
min-height: 420px;
overflow-y: auto;
overflow-x: auto;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
position: relative;
}
table.fiche-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: 0.88rem;
text-align: left;
}
table.fiche-table thead {
position: sticky;
top: 0;
z-index: 25;
}
table.fiche-table th {
background-color: #f1f5f9;
color: var(--sncf-vert-900);
font-weight: 700;
padding: 11px 14px;
border-bottom: 2px solid var(--sncf-vert-700);
position: sticky;
top: 0;
z-index: 25;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
table.fiche-table td {
padding: 8px 14px;
border-bottom: 1px solid var(--sncf-neutral-200);
vertical-align: middle;
background-color: #ffffff;
}
table.fiche-table tr.category-row td {
background-color: #f8fafc;
font-weight: 600;
color: var(--sncf-vert-700);
font-size: 0.92rem;
padding-top: 12px;
padding-bottom: 8px;
border-top: 1px solid var(--sncf-neutral-200);
}
table.fiche-table tr:hover:not(.category-row) td {
background-color: #f1f5f9;
}
/* Inputs dans le tableau pour les évaluateurs */
.input-eval {
height: 32px;
padding: 0 8px;
border: 1px solid var(--sncf-neutral-300);
border-radius: 4px;
font-family: inherit;
font-size: 0.82rem;
width: 100%;
min-width: 110px;
outline: none;
background: #ffffff;
transition: border-color 0.15s ease;
}
.input-eval:focus {
border-color: var(--sncf-vert-700);
box-shadow: 0 0 0 2px rgba(6, 86, 84, 0.15);
}
.input-eval:disabled {
background-color: #f8fafc;
border-color: transparent;
color: var(--sncf-neutral-700);
cursor: default;
}
/* Checkbox validation SNCF */
.checkbox-eval {
width: 20px;
height: 20px;
accent-color: var(--sncf-vert-700);
cursor: pointer;
}
.checkbox-eval:disabled {
cursor: default;
}
/* =========================================================
SUIVI EQUIPE & STATS
========================================================= */
.table-container {
background: #ffffff;
border: 1px solid var(--sncf-neutral-200);
border-radius: 8px;
overflow: auto;
max-height: calc(100vh - 280px);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
table.competences-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: 0.88rem;
text-align: left;
}
/* 1ère ligne d'en-tête (Dépannage Initial, Dépannage Avancé, Agent, CP, Statut) */
table.competences-table thead tr.header-group-row th {
background-color: var(--sncf-vert-100);
color: var(--sncf-vert-900);
font-weight: 700;
padding: 5px 8px;
position: sticky;
top: 0;
z-index: 25;
height: 34px;
box-sizing: border-box;
white-space: nowrap;
border-top: 1px solid #cbd5e1;
border-bottom: 1px solid #cbd5e1;
border-right: 1px solid #cbd5e1;
}
/* Cellules rowspan="2" (Agent, CP, Statut) : dimensions optimisées et compactes */
table.competences-table thead tr.header-group-row th[rowspan="2"] {
position: sticky;
top: 0;
z-index: 30;
height: 78px;
background-color: var(--sncf-vert-100);
border-bottom: 3px solid var(--sncf-vert-700) !important;
border-right: 1px solid #cbd5e1;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
vertical-align: middle;
}
/* Colonnes de gauche : largeur ajustée pour afficher confortablement le nom complet et badges */
table.competences-table th.th-agent-col,
table.competences-table td.cell-agent {
width: 185px !important;
min-width: 175px !important;
max-width: 205px !important;
padding: 6px 10px;
box-sizing: border-box;
}
.agent-name-cell {
font-weight: 700;
font-size: 0.82rem;
color: var(--sncf-neutral-900);
cursor: pointer;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.agent-name-cell:hover {
color: var(--sncf-vert-700);
text-decoration: underline;
}
.agent-docs-sub {
font-size: 0.72rem;
color: var(--sncf-neutral-500);
margin-top: 1px;
}
table.competences-table th.th-cp-col,
table.competences-table td.cell-cp {
display: none !important;
}
table.competences-table th.th-statut-col,
table.competences-table td.cell-statut {
width: 105px !important;
min-width: 100px !important;
max-width: 115px !important;
text-align: center;
padding: 6px 3px;
box-sizing: border-box;
border-right: 3px solid #64748b !important; /* Bordure épaisse marquée après Statut */
}
/* En-têtes de regroupement */
table.competences-table th.th-group-base {
background-color: #f1f5f9;
color: #0f172a;
font-weight: 700;
text-align: center;
border-left: 2px solid #cbd5e1;
border-right: 3px solid #0284c7 !important; /* Bordure épaisse marquée entre Initial et Avancé */
}
table.competences-table th.th-group-avancee {
background-color: #e0f2fe;
color: #0369a1;
font-weight: 700;
text-align: center;
border-right: 3px solid #16a34a !important; /* Bordure épaisse finale */
}
/* 2ème ligne d'en-tête (Fonctions 1 à 10 + Indices) : Hauteur et typographie soignées */
table.competences-table thead tr.header-sub-row th {
background-color: #f8fafc;
color: var(--sncf-neutral-800);
text-align: center;
padding: 4px 2px;
position: sticky;
top: 34px;
z-index: 24;
height: 44px;
box-sizing: border-box;
white-space: nowrap;
border-top: 1px solid #e2e8f0;
border-bottom: 3px solid var(--sncf-vert-700) !important;
border-right: 1px solid #e2e8f0;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
}
.th-fn-title {
display: block;
font-weight: 700;
font-size: 0.78rem;
line-height: 1.15;
color: var(--sncf-neutral-900);
white-space: nowrap;
}
.th-fn-sub {
display: block;
font-weight: 600;
font-size: 0.73rem;
line-height: 1.15;
color: var(--sncf-neutral-600);
margin-top: 1px;
white-space: nowrap;
}
table.competences-table th.th-indice-init {
background-color: #f0f9ff;
border-right: 3px solid #0284c7 !important; /* Bordure séparatrice marquée */
}
table.competences-table th.th-indice-init .th-fn-title {
color: #0369a1;
}
table.competences-table th.th-indice-init .th-fn-sub {
color: #0284c7;
}
table.competences-table td.cell-indice-init {
border-right: 3px solid #0284c7 !important; /* Bordure séparatrice marquée dans les lignes */
}
table.competences-table th.th-indice-adv {
background-color: #f0fdf4;
border-right: 3px solid #16a34a !important; /* Bordure séparatrice finale */
}
table.competences-table th.th-indice-adv .th-fn-title {
color: #15803d;
}
table.competences-table th.th-indice-adv .th-fn-sub {
color: #16a34a;
}
table.competences-table td.cell-indice-adv {
border-right: 3px solid #16a34a !important;
}
/* En-têtes triables interactifs */
.sortable-th {
cursor: pointer;
user-select: none;
transition: background-color 0.15s ease, color 0.15s ease;
}
.sortable-th:hover {
background-color: #e2e8f0 !important;
}
.th-agent-col.sortable-th:hover,
.th-statut-col.sortable-th:hover {
background-color: var(--sncf-vert-200, #c8e6df) !important;
}
.th-sort-inner {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
}
.th-sort-inner-fn {
display: flex;
align-items: center;
justify-content: center;
gap: 2px;
}
.sort-icon {
font-size: 14px;
color: #94a3b8;
opacity: 0.5;
transition: opacity 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.sortable-th:hover .sort-icon {
opacity: 1;
color: var(--sncf-vert-900);
}
.sortable-th.active-sort {
background-color: #e0f2fe !important;
}
.sortable-th.active-sort .sort-icon {
opacity: 1;
color: #0369a1;
font-weight: 800;
}
.agent-name-text {
font-weight: 700;
font-size: 0.83rem;
color: var(--sncf-neutral-900);
}
/* Largeurs strictement identiques pour toutes les 10 fonctions et les 2 indices (86px uniforme !) */
table.competences-table th.th-fn-col,
table.competences-table td.cell-fn {
width: 86px !important;
min-width: 86px !important;
max-width: 86px !important;
text-align: center;
padding: 6px 2px;
box-sizing: border-box;
}
table.competences-table th.th-indice-col,
table.competences-table td.cell-indice {
width: 86px !important;
min-width: 86px !important;
max-width: 86px !important;
text-align: center;
padding: 6px 2px;
box-sizing: border-box;
}
table.competences-table td {
padding: 8px 6px;
border-bottom: 1px solid var(--sncf-neutral-200);
border-right: 1px solid #f1f5f9;
vertical-align: middle;
}
table.competences-table td:first-child {
border-left: 1px solid var(--sncf-neutral-200);
}
table.competences-table tr:hover td {
background-color: #f1f5f9;
}
/* Pastilles de niveau (0 à 4) carrées à bords arrondis conformes au lexique */
.level-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 4px; /* Format carré avec bords arrondis conforme au lexique */
font-weight: 700;
font-size: 0.82rem;
line-height: 1;
}
.level-0 { background: #f3f4f6; color: #9ca3af; border: 1px solid #e5e7eb; }
.level-1 { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.level-2 { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.level-3 { background: #e0f2fe; color: #075985; border: 1px solid #bae6fd; }
.level-4 { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.badge-status {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 3px 8px;
border-radius: 12px;
font-size: 0.76rem;
font-weight: 700;
white-space: nowrap;
letter-spacing: 0.1px;
}
.badge-maitrise,
.badge-referent { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
.badge-autonome { background: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; }
.badge-formation { background: #fef3c7; color: #b45309; border: 1px solid #fde68a; }
.badge-initie { background: #ffedd5; color: #c2410c; border: 1px solid #fed7aa; }
.badge-former { background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; }
.agent-card-cp {
font-size: 0.8rem;
color: var(--sncf-vert-700);
font-weight: 500;
background: var(--sncf-vert-100);
padding: 2px 6px;
border-radius: 4px;
display: inline-block;
}
/* Cartes agents */
.agents-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 16px;
}
.agent-card {
background: #ffffff;
border: 1px solid var(--sncf-neutral-200);
border-radius: 8px;
padding: 18px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
transition: all 0.15s ease;
cursor: pointer;
display: flex;
flex-direction: column;
/* All cards stretch to the same row height via CSS Grid */
}
.agent-card-body {
flex: 1;
display: flex;
flex-direction: column;
}
.agent-card-footer {
margin-top: auto;
padding-top: 14px;
border-top: 1px solid var(--sncf-neutral-100);
}
.agent-card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
border-color: var(--sncf-vert-600);
}
.agent-card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 12px;
}
.agent-card-name {
font-size: 1.05rem;
font-weight: 600;
color: var(--sncf-neutral-800);
/* Prevent long names from distorting card proportions */
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.35;
min-height: 2.7em; /* reserves space for exactly 2 lines */
}
.agent-progress-container {
margin-top: 8px;
}
.progress-label {
display: flex;
justify-content: space-between;
font-size: 0.78rem;
margin-bottom: 4px;
}
.progress-bar-bg {
height: 6px;
background: var(--sncf-neutral-200);
border-radius: 3px;
overflow: hidden;
}
.progress-bar-fill {
height: 100%;
background: var(--sncf-vert-600);
border-radius: 3px;
transition: width 0.3s ease;
}
/* Modales */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 43, 40, 0.4);
backdrop-filter: blur(2px);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s ease;
z-index: 1000;
}
.modal-overlay.open {
opacity: 1;
visibility: visible;
}
.modal-card {
background: #ffffff;
border-radius: 12px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
width: 90%;
max-width: 580px;
max-height: 85vh;
overflow-y: auto;
display: flex;
flex-direction: column;
transform: scale(0.95);
transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal-overlay.open .modal-card {
transform: scale(1);
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px;
border-bottom: 1px solid var(--sncf-neutral-200);
}
.modal-header h3 {
font-size: 1.25rem;
font-weight: 700;
color: var(--sncf-vert-700);
}
.btn-close-modal {
background: transparent;
border: none;
cursor: pointer;
color: var(--sncf-neutral-600);
border-radius: 50%;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.15s ease;
}
.btn-close-modal:hover {
background-color: var(--sncf-neutral-100);
}
.modal-body {
padding: 24px;
}
/* Formulaire login */
.form-group {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 14px;
}
.form-group label {
font-size: 0.88rem;
font-weight: 500;
color: var(--sncf-neutral-700);
}
.form-group input,
.form-group select {
height: 42px;
padding: 0 12px;
border: 1px solid var(--sncf-neutral-300);
border-radius: 6px;
font-family: inherit;
font-size: 0.95rem;
outline: none;
transition: border-color 0.15s ease;
}
.form-group input:focus,
.form-group select:focus {
border-color: var(--sncf-vert-700);
box-shadow: 0 0 0 2px rgba(6, 86, 84, 0.15);
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
/* Responsive */
@media screen and (max-width: 1024px) {
.app-container {
grid-template-columns: 1fr;
grid-template-rows: var(--header-height) 1fr 64px;
grid-template-areas:
"header"
"content"
"nav";
}
nav.app-nav {
width: 100%;
height: 64px;
flex-direction: row;
justify-content: space-around;
}
.nav-item {
height: 64px;
min-height: 64px;
flex: 1;
}
.nav-item.active::after {
top: auto;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 32px;
height: 4px;
border-radius: 4px 4px 0 0;
}
main.app-main {
height: calc(100vh - 128px);
padding: 16px;
}
}
/* =========================================================
Section Documents joints au dossier de l'agent
========================================================= */
.agent-files-section {
margin-top: 24px;
background: #ffffff;
border: 1px solid var(--sncf-neutral-200);
border-radius: 8px;
padding: 16px 20px;
}
.agent-files-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid var(--sncf-neutral-100);
}
.agent-files-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 12px;
}
.agent-file-card {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
background-color: var(--sncf-neutral-50);
border: 1px solid var(--sncf-neutral-200);
border-radius: 6px;
transition: all 0.15s ease;
}
.agent-file-card:hover {
background-color: #ffffff;
border-color: var(--sncf-vert-600);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.agent-file-info {
display: flex;
align-items: center;
gap: 10px;
overflow: hidden;
}
.agent-file-name {
font-size: 0.88rem;
font-weight: 500;
color: var(--sncf-neutral-800);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.btn-open-doc {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
border-radius: 4px;
font-size: 0.78rem;
font-weight: 500;
background: var(--sncf-vert-700);
color: #ffffff;
text-decoration: none;
white-space: nowrap;
transition: background-color 0.15s ease;
}
.btn-open-doc:hover {
background: var(--sncf-vert-800);
}
/* =========================================================
Cartes interactives du Référentiel
========================================================= */
.ref-section-title {
font-size: 1.15rem;
font-weight: 700;
color: var(--sncf-vert-700);
margin-top: 16px;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
}
.ref-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 16px;
margin-bottom: 24px;
}
.ref-function-card {
background: #ffffff;
border: 1px solid var(--sncf-neutral-200);
border-radius: 8px;
padding: 18px 20px;
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
overflow: hidden;
}
.ref-function-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: var(--sncf-neutral-300);
transition: background-color 0.2s ease;
}
.ref-function-card.type-base::before {
background: #0ea5e9;
}
.ref-function-card.type-avancee::before {
background: var(--sncf-vert-600);
}
.ref-function-card:hover {
transform: translateY(-2px);
border-color: var(--sncf-vert-600);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}
.ref-function-card:hover .ref-card-action {
color: var(--sncf-vert-700);
text-decoration: underline;
}
.ref-card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
}
.ref-code-title {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
min-width: 180px;
}
.ref-code-badge {
font-family: var(--wcs-font-monospace);
font-weight: 700;
font-size: 0.82rem;
padding: 3px 8px;
border-radius: 4px;
background: var(--sncf-vert-100);
color: var(--sncf-vert-700);
border: 1px solid var(--sncf-vert-300);
flex-shrink: 0;
}
.ref-title {
font-size: 0.98rem;
font-weight: 700;
color: var(--sncf-neutral-800);
line-height: 1.35;
}
.ref-desc {
font-size: 0.85rem;
color: var(--sncf-neutral-600);
line-height: 1.45;
}
.ref-modules-pills {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 4px;
}
.ref-module-pill {
font-size: 0.74rem;
font-weight: 500;
padding: 2px 6px;
border-radius: 4px;
background: var(--sncf-neutral-100);
color: var(--sncf-neutral-700);
}
.ref-card-action {
font-size: 0.85rem;
font-weight: 600;
color: var(--sncf-vert-600);
display: flex;
align-items: center;
gap: 4px;
padding-top: 8px;
border-top: 1px solid var(--sncf-neutral-100);
}
/* Modale de descriptif de fonction Référentiel */
.ref-modal-levels {
display: flex;
flex-direction: column;
gap: 14px;
margin-top: 16px;
}
.ref-level-box {
border: 1px solid var(--sncf-neutral-200);
border-radius: 8px;
padding: 14px 18px;
background: #ffffff;
}
.ref-level-box-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.ref-level-box-title {
font-size: 0.95rem;
font-weight: 700;
display: flex;
align-items: center;
gap: 8px;
}
.ref-level-box-desc {
font-size: 0.88rem;
color: var(--sncf-neutral-700);
white-space: pre-line;
line-height: 1.5;
}
.ref-level-box-eval {
font-size: 0.8rem;
font-style: italic;
color: var(--sncf-neutral-500);
margin-top: 6px;
}
/* Quick login chips */
.quick-login-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 16px;
}
.quick-login-chip {
padding: 6px 10px;
border-radius: 20px;
border: 1px solid var(--sncf-neutral-300);
background: var(--sncf-neutral-50);
font-size: 0.8rem;
font-weight: 500;
cursor: pointer;
transition: all 0.15s ease;
}
.quick-login-chip:hover {
background: var(--sncf-vert-100);
border-color: var(--sncf-vert-500);
color: var(--sncf-vert-800);
}
.quick-login-chip.active {
background: var(--sncf-vert-700);
border-color: var(--sncf-vert-700);
color: #ffffff;
}
/* =========================================================
STYLE D'IMPRESSION & EXPORT PDF (Officiel SNCF)
========================================================= */
.print-only-header,
.print-only-footer,
.print-val-text {
display: none;
}
@media print {
@page {
size: A4 portrait;
margin: 3.5mm 5mm 3.5mm 5mm;
}
*, *:before, *:after {
box-sizing: border-box !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
html, body {
background: #ffffff !important;
color: #000000 !important;
font-size: 6.4pt !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
}
/* Masquer éléments IHM non nécessaires à l'impression */
.app-header,
nav.app-nav,
.panel-header,
.fiches-control-bar,
.fiches-control-row,
.mode-banner,
.agent-files-section,
.modal-overlay,
.btn-header,
.btn-primary-action,
.btn-secondary-action,
#levels-tabs,
#series-tabs,
#agent-picker-container,
#btn-toggle-desc,
#level-desc-panel,
.filter-bar,
.fiches-edition-banner,
.btn-item-info,
.btn-item-edit,
.btn-item-delete,
.item-drag-grip,
.category-add-inline-btn,
.btn-item-info-empty,
.fiche-comment-section,
.sncf-datepicker-popup {
display: none !important;
}
.app-container {
display: block !important;
height: auto !important;
padding: 0 !important;
margin: 0 !important;
}
main.app-main {
padding: 0 !important;
margin: 0 !important;
height: auto !important;
overflow: visible !important;
}
.view-panel {
display: none !important;
}
body:not(.multi-print-active) #view-fiches-niveaux {
display: block !important;
padding: 0 !important;
margin: 0 !important;
page-break-inside: avoid !important;
page-break-after: avoid !important;
}
body.multi-print-active #view-fiches-niveaux {
display: none !important;
}
body.multi-print-active #multi-fiche-print-container {
display: block !important;
padding: 0 !important;
margin: 0 !important;
}
.print-fiche-page {
display: block !important;
padding: 0 !important;
margin: 0 !important;
page-break-after: always !important;
break-after: page !important;
page-break-inside: avoid !important;
break-inside: avoid !important;
box-sizing: border-box !important;
height: auto !important;
min-height: 0 !important;
}
.print-fiche-page:last-child {
page-break-after: auto !important;
break-after: auto !important;
}
/* En-tête officiel imprimé ultra-compact et prestigieux (Conforme modèle officiel SNCF) */
.print-only-header {
display: block !important;
margin-bottom: 3px !important;
page-break-inside: avoid !important;
}
.print-official-table-header {
border: 1.2pt solid #000000 !important;
margin-bottom: 3px !important;
background: #ffffff !important;
}
.print-header-row-1 {
display: flex !important;
border-bottom: 1pt solid #000000 !important;
}
.print-title-area {
flex: 1 !important;
padding: 3px 8px !important;
text-align: center !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
}
.print-main-title {
margin: 0 !important;
font-size: 9.2pt !important;
font-weight: 800 !important;
color: #000000 !important;
text-decoration: underline !important;
letter-spacing: 0.2px !important;
line-height: 1.15 !important;
}
.print-main-sub {
font-size: 6.6pt !important;
color: #334155 !important;
margin-top: 1px !important;
}
.print-badge-area {
width: 65px !important;
border-left: 1pt solid #000000 !important;
background: #fed7aa !important; /* Couleur par défaut SNCF GÉNÉ */
display: flex !important;
align-items: center !important;
justify-content: center !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
.print-badge-area.badge-prerequis {
background: #fed7aa !important;
color: #7c2d12 !important;
}
.print-badge-area.badge-r2n {
background: #bae6fd !important;
color: #0369a1 !important;
}
.print-badge-area.badge-rerng {
background: #e9d5ff !important;
color: #6d28d9 !important;
}
.print-series-code-box {
font-size: 8.8pt !important;
font-weight: 900 !important;
color: inherit !important;
letter-spacing: 0.5px !important;
}
.print-header-row-2 {
display: grid !important;
grid-template-columns: 1.2fr 1fr 1.2fr !important;
border-bottom: 1pt solid #000000 !important;
font-size: 6.8pt !important;
}
.print-header-row-2 .print-meta-item {
padding: 2px 6px !important;
display: flex !important;
align-items: center !important;
gap: 4px !important;
}
.print-header-row-2 .print-meta-item:not(:last-child) {
border-right: 1pt solid #000000 !important;
}
.print-header-row-3 {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
padding: 2.5px 6px !important;
font-size: 7.2pt !important;
}
.print-agent-area .print-lbl {
font-weight: 800 !important;
margin-right: 4px !important;
}
.print-agent-area strong {
font-size: 7.6pt !important;
font-weight: 800 !important;
}
.print-agent-sub {
font-size: 6.5pt !important;
color: #475569 !important;
margin-left: 4px !important;
}
.print-valideur-area em {
font-size: 7pt !important;
font-style: italic !important;
color: #000000 !important;
}
/* Tableau imprimé optimisé pour occuper parfaitement la page A4 */
.fiche-table-container {
border: 1.2pt solid #000000 !important;
border-radius: 0 !important;
overflow: visible !important;
box-shadow: none !important;
margin: 0 !important;
padding: 0 !important;
max-height: none !important;
min-height: 0 !important;
height: auto !important;
page-break-inside: avoid !important;
}
.fiche-table {
width: 100% !important;
border-collapse: collapse !important;
table-layout: fixed !important;
font-size: 6.4pt !important;
line-height: 1.15 !important;
page-break-inside: avoid !important;
}
.fiche-table thead {
display: table-header-group !important;
}
.fiche-table th {
background-color: #f8fafc !important;
color: #000000 !important;
border: 0.8pt solid #000000 !important;
padding: 2px 3px !important;
font-size: 6.6pt !important;
font-weight: 800 !important;
text-align: center !important;
height: auto !important;
line-height: 1.1 !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
}
.fiche-table th.th-item-competence {
width: 44% !important;
text-align: left !important;
padding-left: 6px !important;
}
.fiche-table th.th-date-formation {
width: 14% !important;
}
.fiche-table th.th-formateur {
width: 14% !important;
}
.fiche-table th.th-date-validation {
width: 14% !important;
}
.fiche-table th.th-validateur {
width: 14% !important;
}
.fiche-table td {
border-left: 1.1pt solid #000000 !important; /* Bordure verticale ÉPAISSE entre colonnes */
border-right: 1.1pt solid #000000 !important; /* Bordure verticale ÉPAISSE entre colonnes */
border-top: 0.35pt solid #000000 !important; /* Bordure fine entre les items */
border-bottom: 0.35pt solid #000000 !important; /* Bordure fine entre les items */
padding: 1.5px 3.5px !important;
font-size: 6.3pt !important;
line-height: 1.15 !important;
color: #000000 !important;
background: transparent !important;
vertical-align: middle !important;
height: auto !important;
}
.category-row td {
background-color: #ffffff !important;
font-weight: 800 !important;
font-size: 6.7pt !important;
color: #000000 !important;
padding: 2.5px 4px !important;
border-left: 1.1pt solid #000000 !important;
border-right: 1.1pt solid #000000 !important;
border-top: 1.1pt solid #000000 !important; /* Bordure ÉPAISSE pour séparer les catégories */
border-bottom: 1.1pt solid #000000 !important; /* Bordure ÉPAISSE pour séparer les catégories */
text-align: center !important;
letter-spacing: 0.2px !important;
}
.item-cell-layout {
display: block !important;
padding: 0 !important;
margin: 0 !important;
}
.item-title-text {
font-size: 6.3pt !important;
font-weight: 600 !important;
color: #000000 !important;
line-height: 1.15 !important;
display: block !important;
word-break: break-word !important;
}
.item-comment-subtext {
font-size: 5.4pt !important;
color: #475569 !important;
line-height: 1.05 !important;
margin-top: 0.5px !important;
}
/* Remplacement parfait des inputs par du texte net et lisible */
.input-eval {
display: none !important;
}
.print-val-text {
display: block !important;
font-size: 6.3pt !important;
color: #000000 !important;
text-align: center !important;
line-height: 1.15 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
min-height: 7px !important;
}
.print-val-text.has-val {
font-weight: 700 !important;
color: #000000 !important;
}
/* Hachures diagonales pour les cellules grisées */
.cell-greyed {
background: repeating-linear-gradient(
-45deg,
#94a3b8,
#94a3b8 1.2px,
#ffffff 1.2px,
#ffffff 4.5px
) !important;
background-clip: padding-box !important;
-webkit-print-color-adjust: exact !important;
print-color-adjust: exact !important;
text-align: center !important;
position: relative !important;
overflow: hidden !important;
}
.input-greyed-placeholder {
display: none !important;
}
/* Pied de page imprimé avec encart Commentaires maîtrisé */
.print-only-footer {
display: block !important;
margin-top: 4px !important;
padding-top: 0 !important;
page-break-inside: avoid !important;
page-break-after: avoid !important;
}
.print-comment-box {
border: 1.2pt solid #000000 !important;
background: #ffffff !important;
padding: 3px 6px !important;
height: 44mm !important;
min-height: 44mm !important;
max-height: 46mm !important;
box-sizing: border-box !important;
}
.print-comment-title {
font-size: 6.8pt !important;
color: #000000 !important;
font-weight: 800 !important;
margin-bottom: 2px !important;
}
.print-comment-text {
font-size: 6.4pt !important;
color: #000000 !important;
line-height: 1.25 !important;
min-height: 25px !important;
white-space: pre-wrap !important;
word-break: break-word !important;
}
}
/* Conteneur de rendu haute fidélité pour génération PDF (html2pdf / jsPDF) */
#pdf-render-export-container {
width: 200mm;
background: #ffffff;
color: #000000;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
padding: 0;
margin: 0;
}
#pdf-render-export-container .print-fiche-page {
padding: 0;
margin-bottom: 25px;
background: #ffffff;
page-break-after: always;
break-after: page;
}
#pdf-render-export-container .cell-greyed {
background-color: #f1f5f9 !important;
background-image: repeating-linear-gradient(
-45deg,
#94a3b8,
#94a3b8 1.5px,
#ffffff 1.5px,
#ffffff 5px
) !important;
}
/* =========================================================
NOUVEAUX STYLES : Suivi Équipe (Lexique & Groupements),
Fiches Niveaux & Référentiel Déroulé Accordion
========================================================= */
/* Indicateurs de Niveaux compacts & non-cliquables (sur la même ligne qu'Effectif) */
.filter-bar-right {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.effectif-pill {
border-color: #cbd5e1;
}
.effectif-badge-icon {
background: #e0f2fe;
color: #0284c7;
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 4px;
}
.suivi-niveaux-chips {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
pointer-events: none; /* Pure information, non-cliquable, aucune surbrillance */
user-select: none;
}
.compact-level-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0 10px;
height: 32px;
box-sizing: border-box;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 6px;
font-size: 0.78rem;
font-weight: 500;
color: var(--sncf-neutral-800);
cursor: default;
}
.compact-level-pill .level-badge {
width: 20px;
height: 20px;
font-size: 0.72rem;
font-weight: 700;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
}
/* Badges d'avancement pour les indices de dépanneur (Largeurs strictement identiques) */
.badge-status-valide {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
width: 72px !important;
min-width: 72px !important;
max-width: 72px !important;
height: 25px;
box-sizing: border-box;
padding: 0 4px;
background-color: #dcfce7;
border: 1px solid #86efac;
border-radius: 4px;
color: #15803d;
font-weight: 700;
font-size: 0.76rem;
line-height: 1;
white-space: nowrap;
}
.badge-status-pct {
display: inline-flex;
align-items: center;
justify-content: center;
width: 72px !important;
min-width: 72px !important;
max-width: 72px !important;
height: 25px;
box-sizing: border-box;
padding: 0 4px;
background-color: #f1f5f9;
border: 1px solid #cbd5e1;
border-radius: 4px;
color: #1e293b;
font-weight: 700;
font-size: 0.76rem;
line-height: 1;
white-space: nowrap;
}
/* =========================================================
SÉLECTEURS DE SÉRIE (RÉGIO2N / RER NG) SUIVI ÉQUIPE & DOSSIER
========================================================= */
.suivi-series-toggle,
.dossier-series-toggle {
display: inline-flex;
align-items: center;
background: #f1f5f9;
padding: 3px;
border-radius: 8px;
border: 1px solid #cbd5e1;
gap: 3px;
flex-shrink: 0;
}
#dossier-series-toggle {
margin-left: auto;
}
.series-toggle-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
border: none;
background: transparent;
color: #64748b;
font-weight: 600;
font-size: 0.82rem;
border-radius: 6px;
cursor: pointer;
transition: all 0.15s ease;
line-height: 1.2;
}
.series-toggle-btn:hover {
color: var(--sncf-vert-800);
background: rgba(255, 255, 255, 0.7);
}
.series-toggle-btn.active {
background: #ffffff;
color: var(--sncf-vert-700);
font-weight: 700;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
border: 1px solid #94a3b8;
}
.series-toggle-btn.active em {
color: var(--sncf-vert-700);
}
.compact-desc {
font-weight: 500;
color: #475569;
}
/* =========================================================
BOUTON "i" & TIROIR EXPLICATIF DES ATTENDUS SUR CHAQUE ITEM
========================================================= */
.item-title-wrapper {
position: relative;
display: inline-flex;
align-items: center;
gap: 6px;
}
.item-title-text {
font-weight: 500;
color: var(--sncf-neutral-900);
}
/* Bouton 'i' explicatif à côté de chaque item */
.btn-item-info {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: #e0f2fe;
color: #0284c7;
border: 1px solid #bae6fd;
cursor: pointer;
padding: 0;
margin-left: 6px;
vertical-align: middle;
transition: all 0.15s ease;
flex-shrink: 0;
box-sizing: border-box;
}
.btn-item-info:hover, .btn-item-info.active {
background: #0284c7;
color: #ffffff;
border-color: #0284c7;
transform: scale(1.1);
box-shadow: 0 2px 6px rgba(2, 132, 199, 0.35);
}
.btn-item-info em {
font-size: 15px;
line-height: 1;
}
/* Tiroir d'attendu sous l'item (ouvert au clic sur le bouton i) */
.item-desc-drawer {
display: none;
margin-top: 6px;
padding: 8px 12px;
background: #f0fdf4;
border: 1px solid #bbf7d0;
border-left: 3.5px solid #16a34a;
border-radius: 5px;
font-size: 0.78rem;
color: #1e293b;
line-height: 1.4;
animation: fadeIn 0.15s ease-out;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.item-desc-drawer.open {
display: flex;
align-items: flex-start;
gap: 8px;
}
.item-desc-drawer-icon {
color: #16a34a;
font-size: 16px;
flex-shrink: 0;
margin-top: 1px;
}
.item-info-icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--sncf-bleu-600);
opacity: 0.65;
transition: opacity 0.15s ease, transform 0.15s ease;
}
.item-title-wrapper:hover .item-info-icon {
opacity: 1;
transform: scale(1.15);
}
/* Bulle d'aide flottante au survol */
.item-title-wrapper[data-tooltip]:hover::after {
content: attr(data-tooltip);
position: absolute;
left: 0;
bottom: calc(100% + 8px);
z-index: 1000;
min-width: 250px;
max-width: 440px;
background: #1e293b;
color: #ffffff;
padding: 8px 12px;
border-radius: 6px;
font-size: 0.78rem;
font-weight: 400;
line-height: 1.4;
white-space: normal;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
pointer-events: none;
animation: tooltipFadeIn 0.15s ease-out;
}
.item-title-wrapper[data-tooltip]:hover::before {
content: '';
position: absolute;
left: 18px;
bottom: calc(100% + 2px);
z-index: 1001;
border-width: 6px 6px 0 6px;
border-style: solid;
border-color: #1e293b transparent transparent transparent;
}
@keyframes tooltipFadeIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
/* =========================================================
ZONES NON SAISISSABLES / GRISÉES (BASE TEMPLATE)
Hachures sobres, modernes et esthétiques (sans cadenas)
========================================================= */
.cell-greyed {
background-color: #f8fafc !important;
background-image: repeating-linear-gradient(
-45deg,
#f8fafc,
#f8fafc 6px,
#edf2f7 6px,
#edf2f7 12px
) !important;
text-align: center !important;
vertical-align: middle !important;
border-left: 1px solid #e2e8f0 !important;
border-right: 1px solid #e2e8f0 !important;
padding: 6px 8px !important;
cursor: not-allowed !important;
user-select: none;
transition: opacity 0.15s ease;
}
.cell-greyed:hover {
background-image: repeating-linear-gradient(
-45deg,
#f1f5f9,
#f1f5f9 6px,
#e2e8f0 6px,
#e2e8f0 12px
) !important;
}
.input-greyed-placeholder {
display: flex;
align-items: center;
justify-content: center;
min-height: 32px;
width: 100%;
}
.greyed-modern-dash {
color: #94a3b8;
font-size: 0.95rem;
font-weight: 500;
line-height: 1;
opacity: 0.6;
}
.cell-greyed.cell-has-val {
background-image: none !important;
background-color: #f8fafc !important;
cursor: default !important;
}
.cell-greyed.cell-has-val .greyed-existing-val {
font-size: 0.78rem;
color: #1e293b;
font-weight: 600;
background: #ffffff;
padding: 3px 8px;
border-radius: 4px;
border: 1px solid #e2e8f0;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
/* En-têtes groupés du tableau Suivi Équipe */
.th-group-base {
background: #e0f2fe !important;
color: #0369a1 !important;
text-align: center !important;
font-weight: 700 !important;
border: 1px solid #bae6fd !important;
padding: 8px 12px !important;
font-size: 0.86rem !important;
letter-spacing: 0.01em;
}
.th-group-avancee {
background: #dcfce7 !important;
color: #15803d !important;
text-align: center !important;
font-weight: 700 !important;
border: 1px solid #bbf7d0 !important;
padding: 8px 12px !important;
font-size: 0.86rem !important;
letter-spacing: 0.01em;
}
.th-fn-col {
font-size: 0.76rem !important;
font-weight: 600 !important;
line-height: 1.25 !important;
text-align: center !important;
white-space: normal !important;
vertical-align: middle !important;
padding: 8px 6px !important;
background: #ffffff !important;
color: var(--sncf-neutral-800) !important;
border-bottom: 2px solid var(--sncf-neutral-300) !important;
}
.th-indice-col {
font-size: 0.78rem !important;
font-weight: 700 !important;
text-align: center !important;
white-space: normal !important;
vertical-align: middle !important;
padding: 8px 6px !important;
}
.th-indice-init {
background: #bae6fd !important;
color: #0369a1 !important;
}
.th-indice-adv {
background: #bbf7d0 !important;
color: #15803d !important;
}
/* Accordion Déroulé Nouvel Arrivant (Référentiel) */
.deroulement-accordion {
background: #ffffff;
border: 1px solid var(--sncf-neutral-200);
border-radius: 10px;
overflow: hidden;
margin-top: 8px;
margin-bottom: 24px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.deroulement-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 20px;
background: #f8fafc;
cursor: pointer;
user-select: none;
border-bottom: 1px solid transparent;
transition: all 0.2s ease;
}
.deroulement-header:hover {
background: #f1f5f9;
}
.accordion-icon-box {
width: 38px;
height: 38px;
border-radius: 8px;
background: var(--sncf-vert-100);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.btn-accordion-toggle {
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--sncf-vert-700);
color: #ffffff;
border: none;
font-size: 1.3rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}
.btn-accordion-toggle:hover {
background: var(--sncf-vert-800);
transform: scale(1.05);
}
.deroulement-body {
padding: 20px;
background: #ffffff;
border-top: 1px solid var(--sncf-neutral-200);
animation: fadeIn 0.2s ease-out;
}
/* =========================================================
CHRONOGRAMME DÉROULÉ NOUVEAU ARRIVANT (MATRICE GANTT & FLÈCHES)
Conforme à la structure officielle media_1790936786433.png
========================================================= */
.deroulement-chronologique-container {
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
}
/* Zone d'affichage et défilement horizontal de la matrice SVG */
.deroulement-scroll-area {
width: 100%;
overflow-x: auto;
overflow-y: hidden;
background: #ffffff;
border: 1px solid var(--sncf-neutral-300);
border-radius: 8px;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
padding: 16px 12px;
-webkit-overflow-scrolling: touch;
}
.deroulement-scroll-area::-webkit-scrollbar {
height: 9px;
}
.deroulement-scroll-area::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 6px;
}
.deroulement-scroll-area::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 6px;
border: 2px solid #f1f5f9;
}
.deroulement-scroll-area::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}
.deroulement-flowchart-svg {
display: block;
width: 100%;
min-width: 980px;
height: auto;
user-select: none;
}
.flow-interactive-bar rect {
transition: all 0.15s ease;
}
.flow-interactive-bar:hover rect {
fill: #9bc2e6;
filter: drop-shadow(0 2px 4px rgba(29, 78, 216, 0.25));
}
.flow-interactive-box rect {
transition: all 0.15s ease;
}
.flow-interactive-box:hover rect {
fill: #f8fafc;
filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.12));
}
/* Cartes de synthèse des 4 jalons opérationnels */
.deroulement-milestone-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 16px;
margin-top: 6px;
}
.milestone-card {
background: #ffffff;
border: 1px solid var(--sncf-neutral-200);
border-radius: 8px;
padding: 16px;
display: flex;
flex-direction: column;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.milestone-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
}
.milestone-card.phase-1 { border-top: 3px solid #0284c7; }
.milestone-card.phase-2 { border-top: 3px solid #3b82f6; }
.milestone-card.phase-3 { border-top: 3px solid #6366f1; }
.milestone-card.phase-4 { border-top: 3px solid #16a34a; }
.milestone-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.milestone-badge {
font-size: 0.72rem;
font-weight: 700;
color: var(--sncf-neutral-700);
background: #f1f5f9;
padding: 2px 8px;
border-radius: 4px;
}
.milestone-status {
font-size: 0.7rem;
font-weight: 600;
color: var(--sncf-neutral-500);
}
.milestone-status.highlight-green {
color: #15803d;
font-weight: 700;
}
.milestone-title {
font-size: 0.92rem;
font-weight: 700;
color: var(--sncf-neutral-900);
margin: 0 0 6px 0;
}
.milestone-desc {
font-size: 0.77rem;
color: var(--sncf-neutral-600);
line-height: 1.4;
margin: 0 0 12px 0;
flex-grow: 1;
}
.milestone-eval-tag {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.73rem;
font-weight: 600;
color: #0369a1;
background: #f0f9ff;
border: 1px solid #bae6fd;
padding: 4px 8px;
border-radius: 4px;
}
.milestone-eval-tag em {
font-size: 14px;
}
.milestone-eval-tag.success {
color: #15803d;
background: #f0fdf4;
border-color: #bbf7d0;
}
/* Barre de bascule série Référentiel */
.ref-series-bar {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 24px;
margin-bottom: 16px;
flex-wrap: wrap;
gap: 12px;
background: #ffffff;
padding: 14px 18px;
border: 1px solid var(--sncf-neutral-200);
border-radius: 8px;
}
/* =========================================================
STATUT AUTOMATIQUE DE VALIDATION DE FICHE (EN HAUT À DROITE)
========================================================= */
.fiche-auto-status {
display: flex;
align-items: center;
}
.status-pill {
display: inline-flex;
align-items: center;
gap: 7px;
height: 36px;
padding: 0 16px;
border-radius: 20px;
font-size: 0.86rem;
font-weight: 700;
letter-spacing: 0.01em;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.status-pill-validated {
background: #dcfce7;
color: #15803d;
border: 1.5px solid #86efac;
}
.status-pill-validated em {
color: #16a34a;
}
.status-pill-pending {
background: #f1f5f9;
color: #475569;
border: 1.5px solid #cbd5e1;
}
.status-pill-pending em {
color: #64748b;
}
/* =========================================================
WIDGET PÉRIODE & DÉLAI INDICATIF (EN HAUT À CÔTÉ DU STATUT)
========================================================= */
.fiche-header-meta-group {
display: inline-flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.fiche-meta-box {
display: inline-flex;
align-items: center;
gap: 6px;
height: 36px;
padding: 0 12px;
background: #ffffff;
border: 1.5px solid var(--sncf-neutral-200);
border-radius: 20px;
font-size: 0.82rem;
color: var(--sncf-neutral-700);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
box-sizing: border-box;
}
.fiche-meta-delai {
background: #f0f9ff;
border-color: #bae6fd;
}
.fiche-meta-lbl {
font-size: 0.72rem;
font-weight: 700;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.fiche-delai-val {
font-size: 0.82rem;
font-weight: 700;
color: #0369a1;
}
.btn-edit-delai-icon {
border: none;
background: transparent;
cursor: pointer;
padding: 2px;
color: #0284c7;
border-radius: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.15s ease;
}
.btn-edit-delai-icon:hover {
background: #e0f2fe;
color: #0369a1;
}
.fiche-date-val {
font-size: 0.82rem;
font-weight: 700;
color: #0f172a;
}
.fiche-meta-dates {
background: #f0fdf4;
border-color: #bbf7d0;
display: inline-flex;
align-items: center;
gap: 6px;
height: 38px;
padding: 0 12px;
}
.fiche-meta-date-picker {
border: 1.5px solid #86efac;
background: #ffffff;
border-radius: 6px;
padding: 1px 6px;
font-size: 0.8rem;
font-weight: 700;
color: #065654;
font-family: inherit;
outline: none;
cursor: pointer;
height: 26px;
box-sizing: border-box;
transition: all 0.15s ease;
}
.fiche-meta-date-picker:hover {
border-color: #10b981;
box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.15);
}
.fiche-meta-date-picker:focus {
border-color: var(--sncf-vert-700);
box-shadow: 0 0 0 2px rgba(6, 86, 84, 0.2);
}
.cell-date-interactive:hover .cell-calendar-hint-icon {
opacity: 1 !important;
color: #059669 !important;
}
/* =========================================================
SECTION COMMENTAIRES EN BAS DE FICHE
========================================================= */
.fiche-comment-section {
background: #ffffff;
border: 1px solid var(--sncf-neutral-200);
border-radius: 8px;
padding: 16px 20px;
margin-top: 18px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}
.fiche-comment-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.fiche-comment-label {
font-size: 0.92rem;
font-weight: 700;
color: var(--sncf-vert-700);
}
.fiche-comment-textarea {
width: 100%;
box-sizing: border-box;
padding: 10px 14px;
border: 1px solid var(--sncf-neutral-300);
border-radius: 6px;
font-family: inherit;
font-size: 0.88rem;
line-height: 1.5;
color: var(--sncf-neutral-800);
resize: vertical;
min-height: 70px;
outline: none;
transition: border-color 0.15s ease;
background: #ffffff;
}
.fiche-comment-textarea:focus {
border-color: var(--sncf-vert-700);
box-shadow: 0 0 0 2px rgba(6, 86, 84, 0.15);
}
.fiche-comment-textarea:disabled {
background: #f8fafc;
color: #475569;
cursor: default;
}
/* =========================================================
MODALE DOSSIER AGENT & BILAN DE COMPÉTENCES
========================================================= */
.dossier-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--sncf-vert-100);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* =========================================================
COCKPIT DE SYNTHÈSE & RADAR (DESIGN MODERNE & INTÉGRÉ)
========================================================= */
/* =========================================================
COCKPIT DE SYNTHÈSE & RADAR (PROPORTIONS ÉQUILIBRÉES & HARMONIEUSES)
========================================================= */
.dossier-top-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 375px;
gap: 16px;
align-items: stretch;
margin-bottom: 18px;
}
@media (max-width: 1024px) {
.dossier-top-grid {
grid-template-columns: 1fr;
}
}
.dossier-top-left-col,
.dossier-top-right-col {
display: flex;
flex-direction: column;
}
/* Carte Radar Carrée & Focus */
.bilan-radar-card {
width: 100%;
height: 100%;
min-height: 310px;
box-sizing: border-box;
background: #ffffff;
border: 1px solid var(--sncf-neutral-200);
border-radius: 12px;
padding: 12px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
display: flex;
align-items: center;
justify-content: center;
position: relative;
transition: all 0.2s ease;
cursor: pointer;
}
.bilan-radar-card:hover {
border-color: var(--sncf-vert-400);
box-shadow: 0 4px 14px rgba(6, 86, 84, 0.08);
}
/* Carte Cockpit de Synthèse (Gauche) */
.bilan-cockpit-card {
width: 100%;
height: 100%;
min-height: 310px;
box-sizing: border-box;
background: #ffffff;
border: 1px solid var(--sncf-neutral-200);
border-radius: 12px;
padding: 16px 20px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 12px;
}
.cockpit-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-bottom: 10px;
border-bottom: 1px solid var(--sncf-neutral-100);
margin-bottom: 0;
}
.cockpit-title-wrap {
display: flex;
align-items: center;
gap: 10px;
}
.cockpit-icon-box {
width: 36px;
height: 36px;
border-radius: 8px;
background: var(--sncf-vert-100);
color: var(--sncf-vert-700);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.cockpit-icon-box .material-icons {
font-size: 20px;
}
.cockpit-title {
margin: 0;
font-size: 0.98rem;
font-weight: 700;
color: var(--sncf-vert-800);
line-height: 1.2;
}
.cockpit-subtitle {
display: block;
font-size: 0.74rem;
color: var(--sncf-neutral-500);
margin-top: 1px;
}
.btn-cockpit-fiches {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--sncf-vert-700);
color: #ffffff;
border: none;
border-radius: 6px;
padding: 6px 12px;
font-family: inherit;
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: 0 2px 5px rgba(6, 86, 84, 0.18);
}
.btn-cockpit-fiches:hover {
background: var(--sncf-vert-800);
transform: translateY(-1px);
box-shadow: 0 3px 8px rgba(6, 86, 84, 0.25);
}
.btn-cockpit-fiches .arrow-icon {
font-size: 15px;
transition: transform 0.15s ease;
}
.btn-cockpit-fiches:hover .arrow-icon {
transform: translateX(3px);
}
/* Grille Métadonnées Agent en 3 colonnes */
.cockpit-meta-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-bottom: 0;
}
@media (max-width: 680px) {
.cockpit-meta-grid {
grid-template-columns: 1fr;
}
}
.cockpit-meta-cell {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 6px;
padding: 6px 10px;
display: flex;
flex-direction: column;
gap: 2px;
}
.meta-label {
font-size: 0.65rem;
font-weight: 700;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.meta-val.agent-name-val {
font-size: 0.86rem;
font-weight: 700;
color: #0f172a;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 1px 0;
}
.meta-input-wrap {
display: flex;
align-items: center;
gap: 6px;
background: #ffffff;
border: 1px solid #cbd5e1;
border-radius: 5px;
padding: 1px 6px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.meta-input-wrap:focus-within {
border-color: var(--sncf-vert-600);
box-shadow: 0 0 0 2px rgba(6, 86, 84, 0.15);
}
.meta-input-icon {
font-size: 15px;
color: #94a3b8;
}
.cockpit-meta-input {
border: none;
outline: none;
background: transparent;
font-family: inherit;
font-size: 0.82rem;
font-weight: 600;
color: #0f172a;
width: 100%;
padding: 1px 0;
}
/* Grille des 3 KPIs */
.cockpit-kpi-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 0;
}
@media (max-width: 680px) {
.cockpit-kpi-grid {
grid-template-columns: 1fr;
}
}
.cockpit-kpi-box {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 5px;
min-height: 98px;
box-sizing: border-box;
transition: all 0.15s ease;
}
.cockpit-kpi-box:hover {
border-color: #cbd5e1;
background: #ffffff;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
.cockpit-kpi-box.box-main {
background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
border-color: #86efac;
}
.cockpit-kpi-box.box-main:hover {
border-color: #4ade80;
box-shadow: 0 3px 8px rgba(22, 163, 74, 0.12);
}
.kpi-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 4px;
}
.kpi-badge-tag {
font-size: 0.64rem;
font-weight: 700;
padding: 2px 5px;
border-radius: 4px;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.kpi-badge-tag.tag-base {
background: #e0f2fe;
color: #0369a1;
}
.kpi-badge-tag.tag-adv {
background: #fef3c7;
color: #92400e;
}
.kpi-badge-tag.tag-main {
background: #bbf7d0;
color: #166534;
}
.kpi-target {
font-size: 0.68rem;
color: #64748b;
font-weight: 500;
}
.kpi-title {
font-size: 0.78rem;
font-weight: 600;
color: #475569;
margin: 0;
}
.kpi-val {
font-size: 1.15rem;
font-weight: 800;
color: #1e293b;
display: flex;
align-items: center;
min-height: 26px;
margin: 0;
}
.kpi-val.val-main {
font-size: 1.25rem;
color: #166534;
}
.kpi-desc {
font-size: 0.68rem;
color: #64748b;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cockpit-footer-hint {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
background: #f8fafc;
border-radius: 6px;
border: 1px solid #f1f5f9;
font-size: 0.72rem;
color: #64748b;
margin-top: 0;
}
.cockpit-footer-hint em {
font-size: 15px;
color: var(--sncf-vert-600);
flex-shrink: 0;
}
/* Carte Cartographie Radar (Droite) */
.bilan-radar-banner-card {
width: 100%;
box-sizing: border-box;
background: #ffffff;
border: 1px solid var(--sncf-neutral-200);
border-radius: 12px;
padding: 14px 18px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
display: flex;
flex-direction: column;
gap: 6px;
}
.radar-card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-bottom: 8px;
border-bottom: 1px solid var(--sncf-neutral-100);
width: 100%;
margin-bottom: 0;
}
.radar-title-wrap {
display: flex;
align-items: center;
gap: 10px;
}
.radar-title-wrap .cockpit-icon-box {
width: 36px;
height: 36px;
border-radius: 8px;
}
.radar-badge-pulse {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.7rem;
font-weight: 700;
color: #0369a1;
background: #e0f2fe;
padding: 2px 8px;
border-radius: 20px;
}
.radar-dot-pulse {
width: 6px;
height: 6px;
border-radius: 50%;
background: #0284c7;
display: inline-block;
}
.bilan-radar-chart-area {
display: flex;
align-items: center;
justify-content: center;
height: 195px;
overflow: visible;
}
.bilan-radar-legend {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
padding-top: 4px;
border-top: 1px solid #f1f5f9;
font-size: 0.72rem;
font-weight: 600;
color: #475569;
}
.dossier-bilan-section {
background: #ffffff;
border: 1px solid var(--sncf-neutral-200);
border-radius: 12px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}
.bilan-group-banner {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
border-radius: 8px;
font-size: 0.92rem;
font-weight: 700;
margin-bottom: 12px;
}
.bilan-group-banner.group-base {
background: linear-gradient(90deg, #f0f9ff 0%, #ffffff 100%);
color: #0369a1;
border-left: 4px solid #0284c7;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}
.bilan-group-banner.group-avancee {
background: linear-gradient(90deg, #f0fdf4 0%, #ffffff 100%);
color: #15803d;
border-left: 4px solid #16a34a;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}
.radar-legend-item {
display: inline-flex;
align-items: center;
gap: 5px;
}
.legend-color {
width: 11px;
height: 11px;
border-radius: 3px;
display: inline-block;
}
.legend-color.lvl-4 { background: #1d4ed8; }
.legend-color.lvl-3 { background: #16a34a; }
.legend-color.lvl-2 { background: #eab308; }
.legend-color.lvl-1 { background: #ea580c; }
/* Fonctions sur TOUTE LA LARGEUR */
.bilan-fullwidth-functions {
width: 100%;
display: flex;
flex-direction: column;
}
.bilan-functions-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
@media (max-width: 860px) {
.bilan-functions-list {
grid-template-columns: 1fr;
}
}
.bilan-fn-card {
display: flex;
flex-direction: column;
padding: 10px 14px;
background: #ffffff;
border: 1px solid var(--sncf-neutral-200);
border-radius: 8px;
gap: 8px;
min-width: 0;
max-width: 100%;
box-sizing: border-box;
overflow: hidden;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}
.bilan-fn-card:hover {
border-color: #94a3b8;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.bilan-fn-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
min-width: 0;
width: 100%;
}
.bilan-fn-info {
display: flex;
align-items: center;
gap: 8px;
flex: 1 1 0%;
min-width: 0;
overflow: hidden;
}
.bilan-fn-code {
font-size: 0.76rem;
font-weight: 800;
padding: 3px 8px;
border-radius: 4px;
background: var(--sncf-neutral-100);
color: var(--sncf-neutral-700);
flex-shrink: 0;
}
.bilan-fn-name {
font-size: 0.85rem;
font-weight: 600;
color: var(--sncf-neutral-800);
line-height: 1.3;
display: block;
min-width: 0;
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bilan-chips-group {
display: flex;
align-items: center;
gap: 4px;
flex: 0 0 auto;
flex-shrink: 0;
}
.bilan-chip {
width: 30px;
height: 30px;
border-radius: 6px;
border: 1.5px solid #cbd5e1;
background: #ffffff;
color: #64748b;
font-size: 0.82rem;
font-weight: 700;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.15s ease;
}
.bilan-chip:hover {
border-color: #0284c7;
color: #0284c7;
transform: scale(1.08);
}
.bilan-chip.active-0 {
background: #64748b;
color: #ffffff;
border-color: #64748b;
box-shadow: 0 1px 4px rgba(100, 116, 139, 0.4);
}
.bilan-chip.active-1 {
background: #ea580c;
color: #ffffff;
border-color: #ea580c;
box-shadow: 0 1px 4px rgba(234, 88, 12, 0.4);
}
.bilan-chip.active-2 {
background: #eab308;
color: #000000;
border-color: #eab308;
box-shadow: 0 1px 4px rgba(234, 179, 8, 0.4);
}
.bilan-chip.active-3 {
background: #16a34a;
color: #ffffff;
border-color: #16a34a;
box-shadow: 0 1px 4px rgba(22, 163, 74, 0.4);
}
.bilan-chip.active-4 {
background: #1d4ed8;
color: #ffffff;
border-color: #1d4ed8;
box-shadow: 0 1px 4px rgba(29, 78, 216, 0.4);
}
.bilan-chip:disabled {
cursor: default;
pointer-events: none;
}
.bilan-comment-row {
display: flex;
align-items: flex-start;
gap: 8px;
background: #f8fafc;
padding: 6px 10px;
border-radius: 6px;
border: 1px solid #e2e8f0;
min-height: 42px;
box-sizing: border-box;
transition: all 0.15s ease;
}
.bilan-comment-row:focus-within {
background: #ffffff;
border-color: #0284c7;
box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.12);
}
.bilan-comment-icon {
font-size: 16px;
color: #94a3b8;
flex-shrink: 0;
margin-top: 1px;
}
.bilan-comment-input {
width: 100%;
border: none;
background: transparent;
font-size: 0.80rem;
color: #1e293b;
outline: none;
font-family: inherit;
resize: none;
min-height: 32px;
height: 32px;
line-height: 1.35;
padding: 0;
margin: 0;
display: block;
}
.bilan-comment-input::placeholder {
color: #94a3b8;
font-style: italic;
}
.bilan-footer-actions {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid var(--sncf-neutral-200);
}
.bilan-save-notification {
font-size: 0.88rem;
font-weight: 600;
color: #15803d;
display: flex;
align-items: center;
gap: 6px;
}
/* =========================================================
ALIGNEMENT DU BOUTON 'i' & MISE EN PAGE CELLULE ITEM
========================================================= */
.cell-item-competence {
width: 36%;
min-width: 270px;
}
.item-cell-layout {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
box-sizing: border-box;
}
.item-text-container {
flex: 1 1 auto;
min-width: 0;
}
.item-title-text {
font-size: 0.86rem;
font-weight: 500;
color: var(--sncf-neutral-900);
line-height: 1.35;
display: block;
}
.item-comment-subtext {
font-size: 0.74rem;
color: #64748b;
margin-top: 2px;
}
.item-info-btn-slot {
flex-shrink: 0;
width: auto;
min-width: 25px;
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 5px;
}
.btn-item-info {
display: inline-flex;
align-items: center;
justify-content: center;
width: 25px;
height: 25px;
padding: 0;
border-radius: 50%;
border: 1.5px solid #cbd5e1;
background: #f8fafc;
color: #0284c7;
cursor: pointer;
outline: none;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
flex-shrink: 0;
}
.btn-item-info em {
font-size: 15px;
}
.btn-item-info:hover {
background: #e0f2fe;
border-color: #0284c7;
color: #0284c7;
box-shadow: 0 1px 4px rgba(2, 132, 199, 0.25);
transform: scale(1.08);
}
.btn-item-info.active {
background: #0284c7;
border-color: #0369a1;
color: #ffffff;
box-shadow: 0 2px 6px rgba(2, 132, 199, 0.35);
}
.btn-item-info-empty {
width: 25px;
height: 25px;
display: inline-block;
flex-shrink: 0;
}
/* =========================================================
CHAMPS FORMATEUR & VALIDATEUR EN MAJUSCULE STRICTE
========================================================= */
.input-eval[data-field="formateur"],
.input-eval[data-field="validateur"] {
text-transform: uppercase;
font-weight: 600;
letter-spacing: 0.4px;
}
/* Indicateur calendrier sur les champs date */
.input-eval[data-field="dateFormation"],
.input-eval[data-field="dateValidation"],
#dossier-maj-date {
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='%2364748b'%3E%3Cpath d='M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V10h14v10zm0-12H5V6h14v2zm-7 5h5v5h-5z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px center;
padding-right: 26px;
}
/* =========================================================
MODAL DESCRIPTIF DES ATTENDUS (AU PREMIER PLAN GARANTI)
========================================================= */
.sncf-desc-modal-backdrop {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(15, 23, 42, 0.45);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
z-index: 100000;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
opacity: 0;
transition: opacity 0.2s ease;
}
.sncf-desc-modal-backdrop.open {
opacity: 1;
}
.sncf-desc-modal-card {
background: #ffffff;
border-radius: 12px;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.08);
width: 100%;
max-width: 620px;
border: 1px solid var(--sncf-neutral-200);
overflow: hidden;
display: flex;
flex-direction: column;
transform: translateY(12px) scale(0.98);
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.sncf-desc-modal-backdrop.open .sncf-desc-modal-card {
transform: translateY(0) scale(1);
}
.sncf-desc-modal-header {
padding: 16px 20px;
background: #f8fafc;
border-bottom: 1px solid var(--sncf-neutral-200);
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
.sncf-desc-modal-header-info {
display: flex;
align-items: flex-start;
gap: 12px;
}
.sncf-desc-badge-icon {
width: 38px;
height: 38px;
border-radius: 8px;
background: #e0f2fe;
color: #0284c7;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.sncf-desc-badge-icon em {
font-size: 22px;
}
.sncf-desc-badge-tag {
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
color: #0284c7;
letter-spacing: 0.5px;
display: block;
margin-bottom: 3px;
}
.sncf-desc-item-title {
margin: 0;
font-size: 1.05rem;
font-weight: 700;
color: #0f172a;
line-height: 1.35;
}
.sncf-desc-modal-close {
background: transparent;
border: none;
color: #64748b;
cursor: pointer;
padding: 4px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s, color 0.15s;
}
.sncf-desc-modal-close:hover {
background: #e2e8f0;
color: #0f172a;
}
.sncf-desc-modal-body {
padding: 22px 24px;
max-height: 60vh;
overflow-y: auto;
font-size: 0.94rem;
line-height: 1.6;
color: #334155;
}
.desc-modal-highlight-box {
background: #f0fdf4;
border: 1px solid #bbf7d0;
border-left: 4px solid #16a34a;
padding: 14px 16px;
border-radius: 8px;
color: #14532d;
display: flex;
gap: 12px;
align-items: flex-start;
font-size: 0.93rem;
line-height: 1.55;
}
.desc-modal-highlight-box em {
color: #16a34a;
font-size: 22px;
flex-shrink: 0;
margin-top: 1px;
}
.desc-modal-p {
margin-bottom: 10px;
}
.sncf-desc-modal-footer {
padding: 12px 20px;
background: #f8fafc;
border-top: 1px solid var(--sncf-neutral-200);
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.sncf-desc-footer-note {
font-size: 0.78rem;
color: #64748b;
display: flex;
align-items: center;
gap: 6px;
}
.sncf-desc-footer-note em {
font-size: 15px;
color: #0284c7;
}
/* =========================================================
CALENDRIER DATEPICKER INTERACTIF GLOBAL
========================================================= */
.sncf-datepicker-popup {
position: fixed;
z-index: 100000;
width: 280px;
background: #ffffff;
border: 1px solid var(--sncf-neutral-300);
border-radius: 10px;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.08);
padding: 12px;
font-family: inherit;
user-select: none;
animation: dpFadeIn 0.15s ease-out;
}
@keyframes dpFadeIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.dp-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.dp-title {
font-weight: 700;
font-size: 0.88rem;
color: #0f172a;
}
.dp-nav-btn {
background: transparent;
border: 1px solid transparent;
border-radius: 6px;
color: #475569;
cursor: pointer;
padding: 2px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s ease;
}
.dp-nav-btn:hover {
background: #f1f5f9;
border-color: #cbd5e1;
color: #0f172a;
}
.dp-weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
text-align: center;
font-size: 0.72rem;
font-weight: 700;
color: #64748b;
margin-bottom: 4px;
}
.dp-weekday {
padding: 4px 0;
}
.dp-days-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
}
.dp-day {
background: transparent;
border: none;
border-radius: 50%;
width: 32px;
height: 32px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
font-weight: 500;
color: #1e293b;
cursor: pointer;
transition: all 0.12s ease;
}
.dp-day:hover {
background: #e0f2fe;
color: #0284c7;
}
.dp-day-muted {
color: #94a3b8;
}
.dp-today {
border: 1px solid #0284c7;
font-weight: 700;
color: #0284c7;
}
.dp-selected {
background: #0284c7 !important;
color: #ffffff !important;
font-weight: 700;
box-shadow: 0 2px 4px rgba(2, 132, 199, 0.3);
}
.dp-footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid var(--sncf-neutral-200);
}
.dp-btn-today, .dp-btn-clear {
background: transparent;
border: none;
font-size: 0.76rem;
font-weight: 600;
cursor: pointer;
padding: 4px 8px;
border-radius: 4px;
transition: all 0.15s ease;
}
.dp-btn-today {
color: #0284c7;
display: flex;
align-items: center;
gap: 4px;
}
.dp-btn-today:hover {
background: #e0f2fe;
}
.dp-btn-clear {
color: #64748b;
}
.dp-btn-clear:hover {
background: #f1f5f9;
color: #ef4444;
}
/* =========================================================
MODE ÉDITION & BAS DE BARRE LATÉRALE (SIDEBAR BAS GAUCHE)
========================================================= */
.sidebar-bottom-group {
margin-top: auto;
width: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebar-bottom-action {
width: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.nav-item-edition {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
min-height: 76px;
background: transparent;
color: var(--sncf-neutral-0);
border: none;
cursor: pointer;
gap: 4px;
padding: 8px 4px;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
outline: none;
font-family: inherit;
}
.nav-item-edition:hover {
background: rgba(255, 255, 255, 0.08);
}
.nav-item-edition.active {
background: linear-gradient(180deg, rgba(245, 158, 11, 0.18) 0%, rgba(217, 119, 6, 0.24) 100%);
border-top: 2px solid rgba(245, 158, 11, 0.6);
box-shadow: inset 0 1px 0 rgba(245, 158, 11, 0.3);
}
.nav-edition-icon-badge {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.nav-item-edition .material-icons {
font-size: 24px;
color: var(--sncf-neutral-0);
transition: transform 0.2s ease, color 0.2s ease;
}
.nav-item-edition:hover .material-icons {
transform: scale(1.08);
}
.nav-item-edition.active .material-icons {
color: #fbbf24;
transform: scale(1.12);
}
.nav-item-edition .edition-label {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.02em;
white-space: nowrap;
}
.edition-mode-pill {
font-size: 0.64rem;
font-weight: 800;
padding: 1.5px 7px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.2);
color: #ffffff;
letter-spacing: 0.04em;
transition: all 0.2s ease;
line-height: 1.3;
}
.nav-item-edition.active .edition-mode-pill {
background: #f59e0b;
color: #0f172a;
box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
}
@media (max-width: 900px) {
.sidebar-bottom-action {
margin-top: 0;
width: auto;
border-top: none;
padding: 0;
flex: 1;
}
.nav-item-edition {
min-height: 64px;
height: 64px;
border-radius: 0;
}
}
/* Bandeau Mode Édition dans les fiches */
.fiches-edition-banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 12px 18px;
background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
border: 1.5px solid #fcd34d;
border-radius: 10px;
margin-bottom: 14px;
box-shadow: 0 3px 10px rgba(245, 158, 11, 0.12);
animation: fadeIn 0.2s ease-out;
}
.edition-banner-content {
display: flex;
align-items: center;
gap: 12px;
}
.edition-banner-icon {
width: 40px;
height: 40px;
border-radius: 8px;
background: #f59e0b;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 2px 6px rgba(245, 158, 11, 0.35);
}
.edition-banner-icon .material-icons {
font-size: 24px;
}
.edition-banner-content strong {
display: block;
font-size: 0.96rem;
color: #92400e;
margin-bottom: 2px;
}
.edition-banner-content p {
margin: 0;
font-size: 0.8rem;
color: #b45309;
line-height: 1.35;
}
.edition-banner-actions {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
#agents-edition-banner {
background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
border-color: #86efac;
box-shadow: 0 3px 10px rgba(16, 185, 129, 0.12);
}
#agents-edition-banner .edition-banner-icon {
background: var(--sncf-vert-700);
box-shadow: 0 2px 6px rgba(16, 185, 129, 0.35);
}
#agents-edition-banner .edition-banner-title {
font-weight: 700;
font-size: 0.96rem;
color: #166534;
}
#agents-edition-banner .edition-banner-desc {
font-size: 0.82rem;
color: #15803d;
}
/* Boutons d'action sur chaque ligne d'item en mode édition */
.item-edition-btn-slot {
display: inline-flex;
align-items: center;
gap: 5px;
flex-shrink: 0;
width: auto;
}
.item-edition-btn-slot .btn-item-info-empty {
display: none;
}
.btn-item-edit,
.btn-item-delete {
background: #ffffff;
border: 1.5px solid #cbd5e1;
border-radius: 6px;
width: 25px;
height: 25px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #64748b;
transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
padding: 0;
flex-shrink: 0;
}
.btn-item-edit:hover {
background: #eff6ff;
border-color: #3b82f6;
color: #2563eb;
box-shadow: 0 1px 3px rgba(37, 99, 235, 0.2);
transform: translateY(-1px);
}
.btn-item-delete:hover {
background: #fef2f2;
border-color: #f87171;
color: #dc2626;
box-shadow: 0 1px 3px rgba(220, 38, 38, 0.2);
transform: translateY(-1px);
}
.btn-item-edit em,
.btn-item-delete em {
font-size: 14px;
}
/* Boutons d'action dans l'en-tête de catégorie en mode édition (Taille uniforme 26px) */
.category-drag-grip {
display: inline-flex;
align-items: center;
justify-content: center;
height: 26px;
width: 22px;
cursor: grab;
color: var(--sncf-neutral-400);
border-radius: 4px;
box-sizing: border-box;
transition: all 0.15s ease;
user-select: none;
}
.category-drag-grip:hover {
color: var(--sncf-vert-700);
background: rgba(255, 255, 255, 0.85);
}
.category-drag-grip:active {
cursor: grabbing;
}
/* Bloc des flèches monter / descendre (hauteur 26px) */
.category-move-actions {
display: inline-flex;
align-items: center;
gap: 2px;
height: 26px;
background: rgba(255, 255, 255, 0.95);
border: 1px solid var(--sncf-neutral-300);
border-radius: 4px;
padding: 1px 2px;
box-sizing: border-box;
margin-left: 6px;
}
.btn-category-move {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
background: transparent;
color: var(--sncf-neutral-700);
border: none;
border-radius: 3px;
cursor: pointer;
padding: 0;
box-sizing: border-box;
transition: all 0.15s ease;
}
.btn-category-move:hover:not(:disabled) {
background: var(--sncf-vert-100);
color: var(--sncf-vert-800);
}
.btn-category-move:disabled {
opacity: 0.25;
cursor: not-allowed;
}
/* Bouton Modifier la catégorie (même hauteur 26px que les flèches) */
.category-edit-inline-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
height: 26px;
padding: 0 10px;
margin-left: 6px;
background: rgba(255, 255, 255, 0.95);
color: var(--sncf-bleu-700);
border: 1px solid var(--sncf-bleu-300);
border-radius: 4px;
font-size: 0.74rem;
font-weight: 600;
cursor: pointer;
box-sizing: border-box;
line-height: 1;
transition: all 0.15s ease;
}
.category-edit-inline-btn:hover {
background: #ffffff;
color: var(--sncf-bleu-800);
border-color: var(--sncf-bleu-600);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
/* Bouton Ajouter un item (même hauteur 26px que les flèches) */
.category-add-inline-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
height: 26px;
padding: 0 10px;
background: rgba(255, 255, 255, 0.95);
color: var(--sncf-vert-800);
border: 1px solid var(--sncf-vert-300);
border-radius: 4px;
font-size: 0.74rem;
font-weight: 600;
cursor: pointer;
box-sizing: border-box;
line-height: 1;
transition: all 0.15s ease;
}
.category-add-inline-btn:hover {
background: #ffffff;
color: var(--sncf-vert-900);
border-color: var(--sncf-vert-600);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
/* =========================================================
PANNEAU ÉDITION INLINE (S'ÉTEND VERS LE HAUT DANS LA SIDEBAR)
========================================================= */
/* Conteneur — slide vers le haut avec max-height */
.edition-flyout-menu {
width: 100%;
overflow: hidden;
max-height: 0;
display: flex;
flex-direction: column;
box-sizing: border-box;
transition: max-height 0.28s cubic-bezier(0.16, 1, 0.3, 1),
opacity 0.2s ease;
opacity: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.edition-flyout-menu.open {
max-height: 280px;
opacity: 1;
}
/* Boutons du panneau édition — copient exactement .nav-item */
.nav-item-edition-tool {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 72px;
min-height: 72px;
width: 100%;
background: transparent;
color: rgba(255, 255, 255, 0.75);
border: none;
font-family: inherit;
font-size: 11px;
font-weight: 500;
text-align: center;
gap: 5px;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
padding: 0 4px;
outline: none;
}
.nav-item-edition-tool .material-icons {
font-size: 22px;
line-height: 1;
}
.nav-item-edition-tool span {
display: block;
max-width: 76px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1.2;
}
.nav-item-edition-tool:hover:not(:disabled) {
background-color: var(--sncf-vert-800);
color: #ffffff;
}
.nav-item-edition-tool:disabled {
opacity: 0.35;
cursor: not-allowed;
pointer-events: none;
}
/* Bouton Enregistrer — petite barre verte à droite comme .nav-item.active */
.nav-item-edition-tool.btn-flyout-save {
color: #ffffff;
background: rgba(52, 232, 142, 0.06);
}
.nav-item-edition-tool.btn-flyout-save::after {
content: "";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 28px;
background-color: var(--sncf-vert-300);
border-radius: 4px 0 0 4px;
}
.nav-item-edition-tool.btn-flyout-save:hover:not(:disabled) {
background-color: rgba(6, 86, 84, 0.45);
color: #ffffff;
}
/* Indicateur subtil et feutré d'état non sauvegardé sur le bouton Enregistrer */
@keyframes softEditionPulse {
0% {
background-color: rgba(52, 232, 142, 0.08);
box-shadow: 0 0 0 0 rgba(52, 232, 142, 0);
}
50% {
background-color: rgba(52, 232, 142, 0.22);
box-shadow: inset 0 0 10px rgba(52, 232, 142, 0.25), 0 0 14px rgba(52, 232, 142, 0.40);
}
100% {
background-color: rgba(52, 232, 142, 0.08);
box-shadow: 0 0 0 0 rgba(52, 232, 142, 0);
}
}
.nav-item-edition-tool.btn-flyout-save.has-unsaved-changes,
#btn-edition-save.has-unsaved-changes {
animation: softEditionPulse 2.4s ease-in-out infinite;
color: #ffffff;
position: relative;
}
.nav-item-edition-tool.btn-flyout-save.has-unsaved-changes em,
#btn-edition-save.has-unsaved-changes em {
color: var(--sncf-vert-300);
}
@media (max-width: 900px) {
.edition-flyout-menu {
flex-direction: row;
border-bottom: none;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.nav-item-edition-tool {
flex: 1;
height: 64px;
min-height: 64px;
}
}
/* =========================================================
GLISSER-DÉPOSER DES ITEMS (DRAG GRIP UNIQUEMENT)
========================================================= */
.item-drag-grip {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 100%;
min-height: 24px;
cursor: grab;
color: #cbd5e1;
border-radius: 3px;
flex-shrink: 0;
transition: color 0.15s ease, background 0.15s ease;
}
.item-drag-grip:hover {
color: #065654;
background: #e6f4f1;
}
.item-drag-grip:active {
cursor: grabbing;
}
.item-drag-grip .material-icons {
font-size: 18px;
}
/* Effets visuels de survol et glisser-déposer */
tr.row-dragging {
opacity: 0.35 !important;
background-color: #fef3c7 !important;
}
tr.row-drag-over-top td {
border-top: 3px solid #065654 !important;
}
tr.row-drag-over-bottom td {
border-bottom: 3px solid #065654 !important;
}
tr.category-row.row-drag-over td {
background-color: #d1fae5 !important;
border: 2px dashed #059669 !important;
}
/* =========================================================
NOTIFICATION TOAST INTERACTIVE (CONFIRMATION ACTIONS)
========================================================= */
.sncf-toast {
position: fixed;
bottom: 24px;
right: 24px;
background: #0f172a;
color: #ffffff;
padding: 12px 18px;
border-radius: 8px;
border: 1px solid #334155;
display: flex;
align-items: center;
gap: 10px;
font-size: 0.86rem;
font-weight: 500;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.28);
z-index: 9999;
transform: translateY(80px);
opacity: 0;
pointer-events: none;
transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}
.sncf-toast.show {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
.sncf-toast .material-icons {
color: #34e88e;
font-size: 20px;
}
/* =========================================================
FILTRES AVANCÉS : CARTES AGENTS (ÉQUIPE)
========================================================= */
.filter-bar-agents {
display: flex;
justify-content: space-between;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.filter-controls-group {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.filter-select-wrapper {
display: flex;
align-items: center;
gap: 6px;
background: #ffffff;
border: 1px solid var(--sncf-neutral-300);
border-radius: 6px;
padding: 0 10px;
height: 38px;
transition: all 0.2s ease;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.filter-select-wrapper:focus-within {
border-color: var(--sncf-vert-600);
box-shadow: 0 0 0 2px rgba(6, 86, 84, 0.15);
}
.filter-select-label {
display: flex;
align-items: center;
gap: 4px;
font-size: 0.82rem;
font-weight: 600;
color: var(--sncf-neutral-700);
white-space: nowrap;
}
.filter-card-select {
border: none;
outline: none;
background: transparent;
font-family: inherit;
font-size: 0.85rem;
font-weight: 500;
color: var(--sncf-neutral-900);
cursor: pointer;
height: 100%;
}
.filter-results-badge {
display: inline-flex;
align-items: center;
background: var(--sncf-neutral-100);
border: 1px solid var(--sncf-neutral-200);
border-radius: 20px;
padding: 4px 12px;
font-size: 0.8rem;
font-weight: 700;
color: var(--sncf-neutral-700);
}
/* Badges d'équipe sur les cartes & dans la matrice */
.badge-team-pill {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 12px;
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.2px;
}
.badge-team-pill.team-fiab {
background: #ecfdf5;
color: #047857;
border: 1px solid #a7f3d0;
}
.badge-team-pill.team-dispo {
background: #eff6ff;
color: #1d4ed8;
border: 1px solid #bfdbfe;
}
.badge-team-pill.team-none {
background: #f8fafc;
color: #64748b;
border: 1px solid #cbd5e1;
}
.badge-team-micro {
font-size: 0.68rem;
font-weight: 700;
padding: 1px 5px;
border-radius: 4px;
margin-left: 4px;
}
.badge-team-micro.fiab {
background: #ecfdf5;
color: #047857;
border: 1px solid #a7f3d0;
}
.badge-team-micro.dispo {
background: #eff6ff;
color: #1d4ed8;
border: 1px solid #bfdbfe;
}
.btn-edit-agent-inline {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 4px;
border: 1px solid var(--sncf-neutral-200);
background: #ffffff;
color: var(--sncf-neutral-500);
cursor: pointer;
transition: all 0.15s ease;
padding: 0;
}
.btn-edit-agent-inline:hover {
background: #e0f2fe;
color: #0284c7;
border-color: #0284c7;
}
.btn-edit-agent-card {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.8rem;
font-weight: 500;
cursor: pointer;
}
/* =========================================================
MODE ÉDITION — RÉFÉRENTIEL DES COMPÉTENCES (R2N & RER NG)
========================================================= */
#ref-edition-banner {
background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
border-color: #86efac;
box-shadow: 0 3px 10px rgba(16, 185, 129, 0.12);
}
#ref-edition-banner .edition-banner-icon {
background: var(--sncf-vert-700);
box-shadow: 0 2px 6px rgba(16, 185, 129, 0.35);
}
#ref-edition-banner .edition-banner-title {
font-weight: 700;
font-size: 0.96rem;
color: #166534;
}
#ref-edition-banner .edition-banner-desc {
font-size: 0.82rem;
color: #15803d;
}
.ref-section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
}
.btn-ref-add-inline {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
background: #ffffff;
color: var(--sncf-vert-700);
border: 1.5px solid var(--sncf-vert-700);
border-radius: 6px;
font-size: 0.84rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-ref-add-inline:hover {
background: var(--sncf-vert-50);
border-color: var(--sncf-vert-800);
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(6, 86, 84, 0.15);
}
.btn-edit-ref-card {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
background: #f0fdf4;
color: var(--sncf-vert-700);
border: 1px solid #86efac;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
transition: all 0.15s ease;
}
.btn-edit-ref-card:hover {
background: var(--sncf-vert-700);
color: #ffffff;
border-color: var(--sncf-vert-700);
transform: translateY(-1px);
}
/* Modale Édition Fonction Référentiel */
.fn-level-tab-btn {
padding: 8px 14px;
border: 1px solid transparent;
background: transparent;
color: var(--sncf-neutral-600);
font-weight: 600;
font-size: 0.83rem;
cursor: pointer;
border-radius: 6px;
display: inline-flex;
align-items: center;
gap: 7px;
transition: all 0.15s ease;
font-family: inherit;
}
.fn-level-tab-btn:hover {
color: var(--sncf-vert-700);
background: #ffffff;
}
.fn-level-tab-btn.active {
color: var(--sncf-vert-800);
background: #ffffff;
border-color: #cbd5e1;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
font-weight: 700;
}
.fn-level-tab-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 50%;
font-size: 0.72rem;
font-weight: 700;
color: #ffffff;
}
.fn-level-badge-0 { background: #64748b; }
.fn-level-badge-1 { background: #3b82f6; }
.fn-level-badge-2 { background: #10b981; }
.fn-level-badge-3 { background: #eab308; }
.fn-level-badge-4 { background: #a855f7; }
/* =========================================================
Vue Déconnectée (Verrouillée sans onglet)
========================================================= */
.disconnected-view {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
min-height: 55vh;
padding: 48px 24px;
background: #ffffff;
border-radius: 12px;
border: 1px solid var(--sncf-neutral-200);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
max-width: 580px;
margin: 60px auto 0 auto;
}
.disconnected-view .disconnected-icon {
font-size: 52px;
color: var(--sncf-vert-700);
margin-bottom: 20px;
background: rgba(6, 86, 84, 0.08);
padding: 18px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
}
.disconnected-view h2 {
font-size: 1.25rem;
color: var(--sncf-neutral-900);
margin-bottom: 10px;
font-weight: 700;
line-height: 1.4;
}
.disconnected-view p {
font-size: 0.95rem;
color: var(--sncf-neutral-600);
margin-bottom: 24px;
line-height: 1.5;
}
/* Custom Profile Management & Mode Édition Password */
.custom-profile-card {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
background: #ffffff;
border: 1px solid var(--sncf-neutral-200);
border-radius: 8px;
transition: all 0.2s ease;
gap: 12px;
}
.custom-profile-card:hover {
border-color: var(--sncf-vert-600);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.custom-profile-info {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
min-width: 0;
}
.custom-profile-avatar {
width: 38px;
height: 38px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
flex-shrink: 0;
}
.custom-profile-avatar.mgt {
background: #eff6ff;
color: #1d4ed8;
border: 1px solid #bfdbfe;
}
.custom-profile-avatar.eval {
background: #fefce8;
color: #a16207;
border: 1px solid #fef08a;
}
.custom-profile-avatar.obs {
background: #f3f4f6;
color: #4b5563;
border: 1px solid #e5e7eb;
}
.custom-profile-details {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.custom-profile-name {
font-size: 0.9rem;
font-weight: 700;
color: var(--sncf-neutral-800);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.custom-profile-meta {
font-size: 0.78rem;
color: var(--sncf-neutral-500);
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.badge-profile-role {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 600;
}
.badge-profile-role.mgt {
background: #dbeafe;
color: #1e40af;
}
.badge-profile-role.eval {
background: #fef9c3;
color: #854d0e;
}
.badge-profile-role.obs {
background: #f1f5f9;
color: #475569;
}
.badge-profile-role.agent {
background: #dcfce7;
color: #166534;
}
.custom-profile-avatar.agent {
background: #f0fdf4;
color: #15803d;
border: 1px solid #bbf7d0;
}
.profile-filter-tabs {
display: flex;
gap: 8px;
margin-bottom: 14px;
flex-wrap: wrap;
}
.profile-filter-tab {
padding: 6px 14px;
font-size: 0.82rem;
font-weight: 600;
color: var(--sncf-neutral-700);
background: #f1f5f9;
border: 1px solid var(--sncf-neutral-300);
border-radius: 20px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
transition: all 0.15s ease;
}
.profile-filter-tab:hover {
background: #e2e8f0;
color: var(--sncf-neutral-900);
}
.profile-filter-tab.active {
background: var(--sncf-vert-700);
color: #ffffff;
border-color: var(--sncf-vert-700);
}
.profile-search-wrapper {
position: relative;
margin-bottom: 12px;
}
.profile-search-wrapper em {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
font-size: 18px;
color: #94a3b8;
pointer-events: none;
}
.profile-search-input {
width: 100%;
height: 38px;
padding: 0 12px 0 38px;
border: 1.5px solid #cbd5e1;
border-radius: 6px;
font-family: inherit;
font-size: 0.88rem;
box-sizing: border-box;
background: #ffffff;
}
.profile-search-input:focus {
outline: none;
border-color: var(--sncf-vert-600);
box-shadow: 0 0 0 3px rgba(6, 86, 84, 0.12);
}
.custom-profile-actions {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.btn-profile-login {
padding: 5px 12px;
font-size: 0.82rem;
font-weight: 600;
background: var(--sncf-vert-700);
color: #ffffff;
border: none;
border-radius: 6px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 4px;
transition: background 0.15s ease;
}
.btn-profile-login:hover {
background: var(--sncf-vert-800);
}
.btn-profile-reset-pwd {
padding: 5px 8px;
font-size: 0.82rem;
background: #ffffff;
color: #d97706;
border: 1px solid #fde68a;
border-radius: 6px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.15s ease;
}
.btn-profile-reset-pwd:hover {
background: #fef3c7;
color: #b45309;
}
.btn-profile-edit {
padding: 5px 10px;
font-size: 0.82rem;
font-weight: 600;
background: #ffffff;
color: #0284c7;
border: 1px solid #bae6fd;
border-radius: 6px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
transition: all 0.15s ease;
}
.btn-profile-edit:hover {
background: #e0f2fe;
}
.btn-profile-delete {
padding: 5px 8px;
font-size: 0.82rem;
background: #ffffff;
color: #dc2626;
border: 1px solid #fecaca;
border-radius: 6px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.15s ease;
}
.btn-profile-delete:hover {
background: #fee2e2;
}
.shake-animation {
animation: sncf-shake 0.35s ease-in-out;
}
@keyframes sncf-shake {
0%, 100% { transform: translateX(0); }
20%, 60% { transform: translateX(-6px); }
40%, 80% { transform: translateX(6px); }
}
/* =========================================================
TABLEAUX DE BORD : STATISTIQUES & TAUX D'HABILITATION
========================================================= */
.stats-kpi-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin-top: 14px;
margin-bottom: 18px;
}
@media (max-width: 1100px) {
.stats-kpi-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.stats-kpi-grid {
grid-template-columns: 1fr;
}
}
.stats-kpi-card {
background: #ffffff;
border: 1px solid var(--sncf-neutral-200);
border-radius: 10px;
padding: 16px 18px;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
position: relative;
overflow: hidden;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.stats-kpi-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.stats-kpi-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--kpi-color, var(--sncf-vert-700));
}
.stats-kpi-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 10px;
}
.stats-kpi-label {
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--sncf-neutral-600);
}
.stats-kpi-icon {
width: 36px;
height: 36px;
border-radius: 8px;
background: var(--kpi-bg, rgba(6, 86, 84, 0.08));
color: var(--kpi-color, var(--sncf-vert-700));
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.stats-kpi-value-row {
display: flex;
align-items: baseline;
gap: 8px;
margin-bottom: 6px;
}
.stats-kpi-value {
font-size: 1.75rem;
font-weight: 800;
color: var(--sncf-neutral-900);
line-height: 1;
}
.stats-kpi-pct {
font-size: 0.95rem;
font-weight: 700;
color: var(--kpi-color, var(--sncf-vert-700));
}
.stats-kpi-sub {
font-size: 0.78rem;
color: var(--sncf-neutral-500);
margin-bottom: 10px;
line-height: 1.3;
}
.stats-kpi-bar-track {
width: 100%;
height: 6px;
background: #f1f5f9;
border-radius: 3px;
overflow: hidden;
}
.stats-kpi-bar-fill {
height: 100%;
background: var(--kpi-color, var(--sncf-vert-700));
border-radius: 3px;
transition: width 0.4s ease;
}
.stats-middle-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
margin-bottom: 18px;
}
@media (max-width: 1024px) {
.stats-middle-grid {
grid-template-columns: 1fr;
}
}
.stats-section-card {
background: #ffffff;
border: 1px solid var(--sncf-neutral-200);
border-radius: 10px;
padding: 20px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
.stats-section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 4px;
}
.stats-section-title {
font-size: 1.02rem;
font-weight: 700;
color: var(--sncf-neutral-900);
margin: 0;
}
.stats-section-sub {
font-size: 0.82rem;
color: var(--sncf-neutral-500);
margin: 0 0 14px 0;
}
/* Pyramide des Niveaux */
.stats-pyramid-container {
display: flex;
flex-direction: column;
gap: 8px;
}
.pyramid-level-row {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 8px;
border-radius: 6px;
background: #f8fafc;
border: 1px solid #f1f5f9;
}
.pyramid-badge-col {
width: 28px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.pyramid-info-col {
width: 140px;
flex-shrink: 0;
}
.pyramid-lvl-title {
font-size: 0.80rem;
font-weight: 700;
color: var(--sncf-neutral-800);
line-height: 1.1;
}
.pyramid-lvl-sub {
font-size: 0.70rem;
color: var(--sncf-neutral-500);
}
.pyramid-bar-col {
flex: 1;
display: flex;
align-items: center;
gap: 8px;
}
.pyramid-bar-track {
flex: 1;
height: 12px;
background: #e2e8f0;
border-radius: 6px;
overflow: hidden;
}
.pyramid-bar-fill {
height: 100%;
border-radius: 6px;
transition: width 0.4s ease;
}
.pyramid-count-badge {
font-size: 0.78rem;
font-weight: 700;
color: var(--sncf-neutral-800);
min-width: 48px;
text-align: right;
}
/* Cartographie des Fonctions Métier */
.stats-functions-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
@media (max-width: 900px) {
.stats-functions-grid {
grid-template-columns: 1fr;
}
}
.filter-select-wrapper {
display: inline-flex;
align-items: center;
gap: 6px;
background: #ffffff;
border: 1.5px solid var(--sncf-neutral-300);
border-radius: 6px;
padding: 0 10px;
height: 38px;
box-sizing: border-box;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.filter-select-wrapper:focus-within {
border-color: var(--sncf-vert-700);
box-shadow: 0 0 0 2px rgba(6, 86, 84, 0.12);
}
.filter-select-label {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.80rem;
font-weight: 700;
color: var(--sncf-neutral-700);
white-space: nowrap;
user-select: none;
}
.filter-card-select {
border: none;
background: transparent;
outline: none;
font-family: inherit;
font-size: 0.84rem;
font-weight: 600;
color: var(--sncf-neutral-900);
cursor: pointer;
padding-right: 4px;
}
.func-stat-card {
background: #ffffff;
border: 1.5px solid var(--sncf-neutral-200);
border-radius: 10px;
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 10px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
transition: all 0.15s ease;
}
.func-stat-card:hover {
border-color: var(--sncf-vert-600);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}
.func-stat-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.func-stat-code-title {
display: flex;
align-items: center;
gap: 8px;
overflow: hidden;
}
.func-stat-code {
font-size: 0.74rem;
font-weight: 800;
padding: 2px 6px;
border-radius: 4px;
background: #e0f2fe;
color: #0369a1;
flex-shrink: 0;
}
.func-stat-title {
font-size: 0.88rem;
font-weight: 700;
color: var(--sncf-neutral-900);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.func-stat-score {
font-size: 0.92rem;
font-weight: 800;
color: var(--sncf-vert-700);
flex-shrink: 0;
}
.func-stat-auto-highlight {
background: #f0fdf4;
border: 1px solid #bbf7d0;
border-radius: 6px;
padding: 8px 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.func-stat-auto-highlight.warn-level {
background: #fffbeb;
border-color: #fde68a;
}
.func-stat-auto-highlight.alert-level {
background: #fef2f2;
border-color: #fecaca;
}
.func-stat-auto-label {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.82rem;
font-weight: 700;
color: var(--sncf-vert-900);
}
.func-stat-auto-highlight.warn-level .func-stat-auto-label {
color: #92400e;
}
.func-stat-auto-highlight.alert-level .func-stat-auto-label {
color: #991b1b;
}
.func-stat-auto-val {
font-size: 0.88rem;
font-weight: 800;
color: var(--sncf-vert-700);
}
.func-stat-auto-highlight.warn-level .func-stat-auto-val {
color: #d97706;
}
.func-stat-auto-highlight.alert-level .func-stat-auto-val {
color: #dc2626;
}
.func-stat-breakdown-row {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.74rem;
color: var(--sncf-neutral-600);
flex-wrap: wrap;
gap: 4px;
}
.func-stat-segments-track {
display: flex;
height: 8px;
background: #e2e8f0;
border-radius: 4px;
overflow: hidden;
gap: 1px;
}
.func-segment {
height: 100%;
transition: width 0.3s ease;
}
.func-stat-footer {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.74rem;
color: var(--sncf-neutral-600);
}
/* =========================================================
COURBE D'ÉVOLUTION TEMPORELLE PAR TRIMESTRE
========================================================= */
.stats-chart-legend {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.chart-legend-item {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.78rem;
font-weight: 700;
color: var(--sncf-neutral-700);
}
.legend-dot {
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
}
.legend-moyenne .legend-dot {
background: var(--sncf-vert-700);
box-shadow: 0 0 0 2px rgba(6, 86, 84, 0.2);
}
.legend-autonome .legend-dot {
background: #0284c7;
box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.2);
}
.legend-initie .legend-dot {
background: #f59e0b;
box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
}
.stats-trend-chart-container {
width: 100%;
min-height: 240px;
margin-top: 14px;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 10px;
box-sizing: border-box;
}
.trend-chart-svg {
width: 100%;
height: auto;
display: block;
}
.trend-point-node {
cursor: pointer;
transition: transform 0.15s ease, r 0.15s ease;
}
.trend-point-node:hover {
r: 7;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25));
}
.stats-quarters-milestones-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 10px;
margin-top: 14px;
}
.quarter-milestone-card {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 6px;
padding: 8px 10px;
display: flex;
flex-direction: column;
gap: 3px;
transition: border-color 0.15s ease;
}
.quarter-milestone-card.active-current {
background: #f0fdf4;
border-color: #86efac;
}
.quarter-milestone-card.future-target {
background: #f0f9ff;
border-color: #bae6fd;
border-style: dashed;
}
.qm-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.qm-quarter-name {
font-size: 0.78rem;
font-weight: 800;
color: var(--sncf-neutral-900);
}
.qm-badge-tag {
font-size: 0.65rem;
font-weight: 700;
padding: 1px 4px;
border-radius: 4px;
background: #e2e8f0;
color: #475569;
}
.active-current .qm-badge-tag {
background: #dcfce7;
color: #15803d;
}
.future-target .qm-badge-tag {
background: #e0f2fe;
color: #0369a1;
}
.qm-kpi-main {
font-size: 0.90rem;
font-weight: 800;
color: var(--sncf-vert-700);
}
.qm-sub-info {
font-size: 0.70rem;
color: var(--sncf-neutral-500);
line-height: 1.2;
}
/* Légende des Niveaux */
.stats-legend-card {
background: #ffffff;
border: 1px solid var(--sncf-neutral-200);
border-radius: 10px;
padding: 18px 20px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
.stats-legend-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 14px;
}
.stats-legend-item {
display: flex;
align-items: flex-start;
gap: 10px;
}
.stats-legend-desc {
font-size: 0.78rem;
color: var(--sncf-neutral-500);
margin-top: 2px;
line-height: 1.3;
}
/* =========================================================
TABLEAU REGISTRE HABILITATIONS & CALENDRIER
========================================================= */
.hab-table {
width: 100%;
border-collapse: collapse;
font-size: 0.84rem;
text-align: left;
}
.hab-table th {
background: #f1f5f9;
color: #475569;
font-weight: 700;
font-size: 0.76rem;
text-transform: uppercase;
letter-spacing: 0.03em;
padding: 10px 14px;
border-bottom: 1.5px solid #cbd5e1;
}
.hab-table td {
padding: 10px 14px;
border-bottom: 1px solid #f1f5f9;
vertical-align: middle;
color: var(--sncf-neutral-800);
}
.hab-table tr:hover td {
background: #f8fafc;
}
.hab-badge-ok {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 12px;
background: #dcfce7;
color: #15803d;
font-size: 0.76rem;
font-weight: 700;
border: 1px solid #bbf7d0;
}
/* =========================================================
BANNIÈRE SSO / DÉTECTION SESSION WINDOWS ACTIVE
========================================================= */
.sso-auto-banner {
background: #f0fdf4;
border: 1.5px solid #86efac;
border-radius: 10px;
padding: 16px 22px;
margin: 22px auto 14px auto;
max-width: 620px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
box-shadow: 0 3px 8px rgba(22, 101, 52, 0.08);
box-sizing: border-box;
}
.sso-banner-left {
display: flex;
align-items: center;
gap: 12px;
text-align: left;
}
.sso-banner-icon {
font-size: 32px;
color: var(--sncf-vert-700);
}
.sso-banner-title {
font-size: 0.82rem;
font-weight: 700;
color: var(--sncf-vert-800);
text-transform: uppercase;
letter-spacing: 0.4px;
}
.sso-banner-agent {
font-size: 0.98rem;
font-weight: 800;
color: var(--sncf-neutral-900);
margin-top: 2px;
}
.hab-badge-warn {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 12px;
background: #fef9c3;
color: #a16207;
font-size: 0.76rem;
font-weight: 700;
border: 1px solid #fef08a;
}
.hab-calendar-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-top: 10px;
}
@media (max-width: 900px) {
.hab-calendar-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 500px) {
.hab-calendar-grid {
grid-template-columns: 1fr;
}
}
.hab-quarter-card {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 14px;
display: flex;
flex-direction: column;
gap: 8px;
}
.hab-quarter-header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 6px;
border-bottom: 1px solid #e2e8f0;
}
.hab-quarter-title {
font-size: 0.88rem;
font-weight: 700;
color: var(--sncf-neutral-900);
}
.hab-quarter-count {
font-size: 0.75rem;
font-weight: 700;
padding: 2px 6px;
border-radius: 10px;
background: #ffffff;
color: #0369a1;
border: 1px solid #bae6fd;
}
.hab-session-item {
font-size: 0.78rem;
color: var(--sncf-neutral-700);
background: #ffffff;
padding: 6px 8px;
border-radius: 4px;
border: 1px solid #f1f5f9;
display: flex;
flex-direction: column;
gap: 2px;
}
.hab-session-title {
font-weight: 700;
color: var(--sncf-neutral-900);
}
.hab-session-date {
font-size: 0.72rem;
color: var(--sncf-neutral-500);
}
/* =========================================================
DEMANDES D'INSCRIPTION & ACCÈS (NOTIFICATIONS & CARDS)
========================================================= */
#pending-registrations-box {
transition: all 0.25s ease-in-out;
}
.pending-reg-card {
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pending-reg-card:hover {
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
}
.pending-reg-badge {
font-size: 0.72rem;
font-weight: 700;
padding: 2px 7px;
border-radius: 9999px;
background: #f59e0b;
color: #ffffff;
box-shadow: 0 1px 3px rgba(245, 158, 11, 0.4);
}
/* =========================================================
MODALE CONFIGURATION & PARAMÈTRES (MULTI-ONGLETS)
========================================================= */
.config-modal-tabs {
display: flex;
align-items: stretch;
gap: 8px;
padding: 0 24px;
background: #f8fafc;
border-bottom: 1.5px solid #e2e8f0;
overflow-x: auto;
scrollbar-width: none;
}
.config-modal-tabs::-webkit-scrollbar {
display: none;
}
.config-modal-tab {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
font-size: 0.88rem;
font-weight: 600;
color: #64748b;
background: transparent;
border: none;
border-bottom: 3px solid transparent;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
}
.config-modal-tab:hover {
color: var(--sncf-vert-800);
background: rgba(6, 86, 84, 0.04);
}
.config-modal-tab.active {
color: var(--sncf-vert-800);
border-bottom-color: var(--sncf-vert-600);
font-weight: 700;
background: #ffffff;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.config-modal-tab .material-icons {
font-size: 19px;
}
.config-tab-pane {
display: none;
animation: configPaneFadeIn 0.2s ease-out;
}
.config-tab-pane.active {
display: block;
}
@keyframes configPaneFadeIn {
from {
opacity: 0;
transform: translateY(4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Cartes de paramètres (Onglet Options & Préférences) */
.config-setting-card {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 16px 18px;
margin-bottom: 14px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
transition: border-color 0.2s, box-shadow 0.2s;
}
.config-setting-card:hover {
border-color: #cbd5e1;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
}
.config-setting-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
.config-setting-header .material-icons {
color: var(--sncf-vert-700);
font-size: 22px;
}
.config-setting-title {
margin: 0;
font-size: 0.95rem;
font-weight: 700;
color: #1e293b;
}
.config-setting-subtitle {
font-size: 0.78rem;
color: #64748b;
margin-top: 2px;
}
.config-setting-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0;
border-top: 1px solid #f1f5f9;
gap: 16px;
}
.config-setting-label {
font-size: 0.85rem;
font-weight: 600;
color: #334155;
}
.config-setting-desc {
font-size: 0.76rem;
color: #64748b;
margin-top: 2px;
}
.config-setting-control {
flex-shrink: 0;
}
/* Cartes d'éléments de configuration (Équipes, Séries d'engins, Niveaux) */
.config-item-card {
display: flex;
align-items: center;
justify-content: space-between;
background: #ffffff;
border: 1.5px solid #e2e8f0;
border-radius: 8px;
padding: 12px 16px;
margin-bottom: 10px;
gap: 12px;
transition: all 0.2s ease;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.config-item-card:hover {
border-color: #cbd5e1;
transform: translateY(-1px);
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
}
.config-item-info {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
}
.config-item-icon-box {
width: 38px;
height: 38px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 18px;
}
.config-item-details {
display: flex;
flex-direction: column;
gap: 2px;
}
.config-item-name {
font-size: 0.92rem;
font-weight: 700;
color: #1e293b;
display: flex;
align-items: center;
gap: 8px;
}
.config-item-meta {
font-size: 0.78rem;
color: #64748b;
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.config-item-actions {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.config-status-chip {
font-size: 0.70rem;
font-weight: 700;
padding: 2px 7px;
border-radius: 9999px;
text-transform: uppercase;
}
.config-status-chip.active {
background: #dcfce7;
color: #15803d;
}
.config-status-chip.inactive {
background: #f1f5f9;
color: #64748b;
}
/* Lignes de configuration des niveaux */
.config-level-row {
display: grid;
grid-template-columns: 80px 1.2fr 2fr 50px;
align-items: center;
gap: 12px;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 10px 14px;
margin-bottom: 8px;
}
@media (max-width: 768px) {
.config-level-row {
grid-template-columns: 1fr;
gap: 8px;
}
}
/* =========================================================
BANNIÈRE & MODALE MODE VUE AGENT (SUPERVISEUR / RÉFÉRENT)
========================================================= */
/* Carte d'agent dans la modale de sélection Vue Agent */
.agent-view-card {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
background: #ffffff;
border: 1.5px solid #e2e8f0;
border-radius: 8px;
cursor: pointer;
transition: all 0.18s ease;
}
.agent-view-card:hover {
border-color: #00856b;
background: #f0fdf4;
transform: translateX(3px);
box-shadow: 0 2px 6px rgba(0, 133, 107, 0.12);
}
.agent-view-card-left {
display: flex;
align-items: center;
gap: 12px;
}
.agent-view-avatar {
width: 38px;
height: 38px;
border-radius: 50%;
background: #e0f2fe;
color: #0369a1;
font-weight: 700;
font-size: 0.85rem;
display: flex;
align-items: center;
justify-content: center;
border: 1.5px solid #bae6fd;
flex-shrink: 0;
}
.agent-view-card-name {
font-size: 0.90rem;
font-weight: 700;
color: #1e293b;
display: flex;
align-items: center;
gap: 8px;
}
.agent-view-card-meta {
font-size: 0.78rem;
color: #64748b;
display: flex;
align-items: center;
gap: 8px;
margin-top: 2px;
}
.agent-view-card-btn {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 12px;
border-radius: 6px;
background: #f1f5f9;
color: #065654;
font-size: 0.82rem;
font-weight: 700;
border: 1px solid #cbd5e1;
transition: all 0.15s ease;
}
.agent-view-card:hover .agent-view-card-btn {
background: #065654;
color: #ffffff;
border-color: #065654;
}
/* =========================================================
PORTAIL DES OUTILS MÉTIERS (ACCUEIL & HUB TECHNICENTRE)
========================================================= */
.portal-container {
max-width: 1200px;
margin: 0 auto;
padding: 16px 8px 48px 8px;
}
/* En-tête Hero */
.portal-hero {
position: relative;
background: linear-gradient(135deg, #065654 0%, #043e3d 55%, #022b28 100%);
border-radius: 14px;
padding: 32px 36px;
color: #ffffff;
margin-bottom: 28px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
box-shadow: 0 10px 25px -5px rgba(6, 86, 84, 0.28), 0 8px 10px -6px rgba(6, 86, 84, 0.18);
overflow: hidden;
}
.portal-hero::before {
content: '';
position: absolute;
top: -50%;
right: -10%;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(52, 232, 142, 0.12) 0%, rgba(255, 255, 255, 0) 70%);
pointer-events: none;
}
.portal-hero-content {
position: relative;
z-index: 1;
max-width: 760px;
}
.portal-hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.22);
backdrop-filter: blur(8px);
padding: 4px 12px;
border-radius: 20px;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.02em;
color: rgba(255, 255, 255, 0.95);
margin-bottom: 12px;
}
.portal-status-pulse {
width: 8px;
height: 8px;
background-color: #34e88e;
border-radius: 50%;
box-shadow: 0 0 0 0 rgba(52, 232, 142, 0.7);
animation: portalPulse 2s infinite;
}
@keyframes portalPulse {
0% {
box-shadow: 0 0 0 0 rgba(52, 232, 142, 0.7);
}
70% {
box-shadow: 0 0 0 8px rgba(52, 232, 142, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(52, 232, 142, 0);
}
}
.portal-hero-title {
font-size: 1.85rem;
font-weight: 800;
margin: 0 0 8px 0;
letter-spacing: -0.02em;
color: #ffffff;
}
.portal-hero-subtitle {
font-size: 0.94rem;
line-height: 1.55;
color: rgba(255, 255, 255, 0.88);
margin: 0 0 18px 0;
}
.portal-hero-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.portal-meta-tag {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.78rem;
font-weight: 600;
background: rgba(0, 0, 0, 0.22);
border: 1px solid rgba(255, 255, 255, 0.15);
padding: 4px 10px;
border-radius: 6px;
color: rgba(255, 255, 255, 0.92);
}
.portal-hero-decoration {
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
}
.portal-hero-icon-card {
width: 86px;
height: 86px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.08);
border: 1.5px solid rgba(255, 255, 255, 0.2);
display: flex;
align-items: center;
justify-content: center;
color: #34e88e;
box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.05);
}
.portal-hero-icon-card em {
font-size: 46px;
}
/* Sections du Portail */
.portal-section {
margin-bottom: 28px;
}
.portal-section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
}
.portal-section-title-wrap {
display: flex;
align-items: center;
gap: 8px;
}
.portal-section-title {
font-size: 1.15rem;
font-weight: 700;
color: #0f172a;
margin: 0;
}
.portal-section-badge {
font-size: 0.74rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 3px 10px;
border-radius: 20px;
background: #e0f2fe;
color: #0369a1;
}
.portal-section-badge-upcoming {
background: #ffedd5;
color: #c2410c;
}
/* Carte Vedette (Montée en Compétences) */
.portal-featured-card {
background: #ffffff;
border-radius: 12px;
border: 1.5px solid #cbd5e1;
padding: 24px;
box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
transition: all 0.2s ease;
position: relative;
}
.portal-featured-card:hover {
border-color: var(--sncf-vert-600);
box-shadow: 0 8px 24px rgba(6, 86, 84, 0.12);
}
.featured-card-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
.featured-card-identity {
display: flex;
align-items: flex-start;
gap: 16px;
}
.featured-card-icon {
width: 52px;
height: 52px;
border-radius: 12px;
background: linear-gradient(135deg, #e6f4f2 0%, #cce9e6 100%);
border: 1px solid #99d5cf;
display: flex;
align-items: center;
justify-content: center;
color: var(--sncf-vert-700);
flex-shrink: 0;
}
.featured-card-icon em {
font-size: 28px;
}
.featured-card-tags {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 6px;
}
.badge-featured-main {
background: #065654;
color: #ffffff;
font-size: 0.7rem;
font-weight: 700;
padding: 2px 8px;
border-radius: 4px;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.badge-status-online {
background: #dcfce7;
color: #15803d;
font-size: 0.72rem;
font-weight: 700;
padding: 2px 8px;
border-radius: 20px;
display: inline-flex;
align-items: center;
gap: 5px;
}
.pulse-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #22c55e;
}
.badge-version-pill {
background: #f1f5f9;
color: #475569;
font-size: 0.72rem;
font-weight: 600;
padding: 2px 8px;
border-radius: 4px;
}
.featured-card-title {
font-size: 1.25rem;
font-weight: 700;
color: #0f172a;
margin: 0 0 3px 0;
}
.featured-card-sub {
font-size: 0.85rem;
color: #64748b;
margin: 0;
}
.featured-card-description {
font-size: 0.88rem;
color: #334155;
line-height: 1.55;
margin: 16px 0 20px 0;
}
.featured-metrics-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 12px;
background: #f8fafc;
border-radius: 8px;
padding: 14px 18px;
margin-bottom: 22px;
border: 1px solid #e2e8f0;
}
.featured-metric-item {
display: flex;
flex-direction: column;
}
.metric-num {
font-size: 1.25rem;
font-weight: 800;
color: var(--sncf-vert-700);
}
.metric-lbl {
font-size: 0.74rem;
color: #64748b;
font-weight: 600;
}
.featured-card-footer {
display: flex;
flex-direction: column;
gap: 14px;
}
.btn-portal-launch {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
background: var(--sncf-vert-700);
color: #ffffff;
font-weight: 700;
font-size: 0.95rem;
height: 44px;
padding: 0 22px;
border-radius: 8px;
border: none;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 2px 6px rgba(6, 86, 84, 0.25);
align-self: flex-start;
}
.btn-portal-launch:hover {
background: #043e3d;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(6, 86, 84, 0.35);
}
.featured-shortcuts-group {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
padding-top: 14px;
border-top: 1px solid #e2e8f0;
}
.shortcuts-intro {
font-size: 0.78rem;
font-weight: 700;
color: #64748b;
}
.shortcuts-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.btn-shortcut-chip {
display: inline-flex;
align-items: center;
gap: 6px;
background: #f1f5f9;
border: 1px solid #cbd5e1;
border-radius: 6px;
padding: 6px 12px;
font-size: 0.8rem;
font-weight: 600;
color: #1e293b;
cursor: pointer;
transition: all 0.15s ease;
}
.btn-shortcut-chip:hover {
background: #e6f4f2;
border-color: var(--sncf-vert-600);
color: var(--sncf-vert-700);
}
/* Grille des modules à venir */
.portal-modules-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
gap: 16px;
}
.portal-module-card {
background: #ffffff;
border-radius: 10px;
border: 1px solid #e2e8f0;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: all 0.2s ease;
}
.portal-module-card:hover {
border-color: #cbd5e1;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
transform: translateY(-2px);
}
.module-card-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.module-icon-wrap {
width: 40px;
height: 40px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
}
.module-icon-wrap em {
font-size: 22px;
}
.module-theme-orange {
background: #fff7ed;
color: #ea580c;
}
.module-theme-blue {
background: #eff6ff;
color: #0284c7;
}
.module-theme-emerald {
background: #f0fdf4;
color: #16a34a;
}
.module-theme-rose {
background: #fff1f2;
color: #e11d48;
}
.module-theme-purple {
background: #f5f3ff;
color: #7c3aed;
}
.badge-wip {
background: #ffedd5;
color: #c2410c;
font-size: 0.72rem;
font-weight: 700;
padding: 2px 8px;
border-radius: 12px;
}
.badge-study {
background: #e0f2fe;
color: #0369a1;
font-size: 0.72rem;
font-weight: 700;
padding: 2px 8px;
border-radius: 12px;
}
.badge-idea {
background: #f3e8ff;
color: #7e22ce;
font-size: 0.72rem;
font-weight: 700;
padding: 2px 8px;
border-radius: 12px;
}
.module-card-title {
font-size: 1.02rem;
font-weight: 700;
color: #0f172a;
margin: 0 0 8px 0;
}
.module-card-desc {
font-size: 0.83rem;
color: #475569;
line-height: 1.5;
margin: 0 0 14px 0;
flex-grow: 1;
}
.module-card-features {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 16px;
}
.feature-tag {
font-size: 0.72rem;
background: #f8fafc;
border: 1px solid #e2e8f0;
padding: 2px 7px;
border-radius: 4px;
color: #64748b;
font-weight: 600;
}
.btn-module-preview, .btn-module-suggest {
width: 100%;
height: 34px;
border: 1px solid #cbd5e1;
background: #f8fafc;
border-radius: 6px;
color: #334155;
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
transition: all 0.15s ease;
}
.btn-module-preview:hover, .btn-module-suggest:hover {
background: #f1f5f9;
border-color: #94a3b8;
color: #0f172a;
}
.portal-suggest-card {
border: 1.5px dashed #cbd5e1;
background: #fcfcfc;
}
/* Bandeau Retour Portail dans les outils */
.portal-tool-banner {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 16px;
background: #f1f5f9;
border: 1px solid #e2e8f0;
border-radius: 8px;
margin-bottom: 18px;
font-size: 0.84rem;
}
.btn-return-portal {
display: inline-flex;
align-items: center;
gap: 6px;
background: #ffffff;
border: 1.5px solid #cbd5e1;
border-radius: 6px;
padding: 4px 10px;
font-size: 0.82rem;
font-weight: 600;
color: var(--sncf-vert-700);
cursor: pointer;
transition: all 0.15s ease;
}
.btn-return-portal:hover {
background: #e6f4f2;
border-color: var(--sncf-vert-600);
}
.portal-tool-divider {
color: #94a3b8;
font-weight: 300;
}
.portal-tool-tag {
display: inline-flex;
align-items: center;
gap: 6px;
}
/* Séparateur de section dans la barre latérale */
.nav-section-divider {
display: block;
width: 100%;
height: 0;
margin: 6px 0;
padding: 0;
border-top: 1px solid rgba(255, 255, 255, 0.15);
border-bottom: none;
border-left: none;
border-right: none;
background: transparent;
box-shadow: none;
flex-shrink: 0;
}
/* =====================================================================
MODULE CARDS — ACTIVE (OPÉRATIONNEL) VARIANT
===================================================================== */
.portal-module-card--active {
border: 1.5px solid var(--sncf-vert-600);
background: linear-gradient(160deg, #f0fdf4 0%, #ffffff 60%);
box-shadow: 0 4px 16px rgba(6, 86, 84, 0.09);
}
.portal-module-card--active:hover {
border-color: var(--sncf-vert-700);
box-shadow: 0 8px 24px rgba(6, 86, 84, 0.18);
transform: translateY(-3px);
}
.badge-online {
background: #dcfce7;
color: #15803d;
font-size: 0.72rem;
font-weight: 700;
padding: 2px 8px;
border-radius: 20px;
display: inline-flex;
align-items: center;
gap: 5px;
}
.badge-online .pulse-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #22c55e;
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
animation: portalPulse 2s infinite;
}
/* Launch button for active modules (base) */
.btn-module-launch {
width: 100%;
height: 38px;
background: var(--sncf-vert-700);
border: none;
border-radius: 6px;
color: #ffffff;
font-size: 0.84rem;
font-weight: 700;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: all 0.2s ease;
box-shadow: 0 2px 6px rgba(6, 86, 84, 0.22);
}
.btn-module-launch:hover {
background: #043e3d;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(6, 86, 84, 0.32);
}
/* Couleurs personnalisées pour les boutons "Ouvrir le module" */
.btn-module-launch.btn-theme-emerald {
background: var(--sncf-vert-700);
box-shadow: 0 2px 8px rgba(6, 86, 84, 0.28);
}
.btn-module-launch.btn-theme-emerald:hover {
background: #043e3d;
box-shadow: 0 4px 14px rgba(6, 86, 84, 0.4);
}
.btn-module-launch.btn-theme-blue {
background: #0284c7;
box-shadow: 0 2px 8px rgba(2, 132, 199, 0.28);
}
.btn-module-launch.btn-theme-blue:hover {
background: #0369a1;
box-shadow: 0 4px 14px rgba(2, 132, 199, 0.4);
}
.btn-module-launch.btn-theme-orange {
background: #ea580c;
box-shadow: 0 2px 8px rgba(234, 88, 12, 0.28);
}
.btn-module-launch.btn-theme-orange:hover {
background: #c2410c;
box-shadow: 0 4px 14px rgba(234, 88, 12, 0.4);
}
.btn-module-launch.btn-theme-indigo {
background: #4f46e5;
box-shadow: 0 2px 8px rgba(79, 70, 229, 0.28);
}
.btn-module-launch.btn-theme-indigo:hover {
background: #4338ca;
box-shadow: 0 4px 14px rgba(79, 70, 229, 0.4);
}
.btn-module-launch.btn-theme-teal {
background: #0d9488;
box-shadow: 0 2px 8px rgba(13, 148, 136, 0.28);
}
.btn-module-launch.btn-theme-teal:hover {
background: #0f766e;
box-shadow: 0 4px 14px rgba(13, 148, 136, 0.4);
}
.btn-module-launch.btn-theme-rose {
background: #e11d48;
box-shadow: 0 2px 8px rgba(225, 29, 72, 0.28);
}
.btn-module-launch.btn-theme-rose:hover {
background: #be123c;
box-shadow: 0 4px 14px rgba(225, 29, 72, 0.4);
}
.btn-module-launch.btn-theme-purple {
background: #7c3aed;
box-shadow: 0 2px 8px rgba(124, 58, 237, 0.28);
}
.btn-module-launch.btn-theme-purple:hover {
background: #6d28d9;
box-shadow: 0 4px 14px rgba(124, 58, 237, 0.4);
}
.btn-module-launch.btn-theme-amber {
background: #d97706;
box-shadow: 0 2px 8px rgba(217, 119, 6, 0.28);
}
.btn-module-launch.btn-theme-amber:hover {
background: #b45309;
box-shadow: 0 4px 14px rgba(217, 119, 6, 0.4);
}
/* Bordure et reflets des cartes actives selon le thème */
.portal-module-card--active.theme-blue {
border-color: #0284c7;
background: linear-gradient(160deg, #f0f9ff 0%, #ffffff 60%);
box-shadow: 0 4px 16px rgba(2, 132, 199, 0.12);
}
.portal-module-card--active.theme-blue:hover {
border-color: #0369a1;
box-shadow: 0 8px 24px rgba(2, 132, 199, 0.22);
}
.portal-module-card--active.theme-orange {
border-color: #ea580c;
background: linear-gradient(160deg, #fff7ed 0%, #ffffff 60%);
box-shadow: 0 4px 16px rgba(234, 88, 12, 0.12);
}
.portal-module-card--active.theme-orange:hover {
border-color: #c2410c;
box-shadow: 0 8px 24px rgba(234, 88, 12, 0.22);
}
.portal-module-card--active.theme-indigo {
border-color: #4f46e5;
background: linear-gradient(160deg, #eef2ff 0%, #ffffff 60%);
box-shadow: 0 4px 16px rgba(79, 70, 229, 0.12);
}
.portal-module-card--active.theme-indigo:hover {
border-color: #4338ca;
box-shadow: 0 8px 24px rgba(79, 70, 229, 0.22);
}
.portal-module-card--active.theme-teal {
border-color: #0d9488;
background: linear-gradient(160deg, #f0fdfa 0%, #ffffff 60%);
box-shadow: 0 4px 16px rgba(13, 148, 136, 0.12);
}
.portal-module-card--active.theme-teal:hover {
border-color: #0f766e;
box-shadow: 0 8px 24px rgba(13, 148, 136, 0.22);
}
.portal-module-card--active.theme-rose {
border-color: #e11d48;
background: linear-gradient(160deg, #fff1f2 0%, #ffffff 60%);
box-shadow: 0 4px 16px rgba(225, 29, 72, 0.12);
}
.portal-module-card--active.theme-rose:hover {
border-color: #be123c;
box-shadow: 0 8px 24px rgba(225, 29, 72, 0.22);
}
.portal-module-card--active.theme-purple,
.portal-module-card--active.theme-green {
border-color: #065654;
background: linear-gradient(160deg, #f0fdf4 0%, #ffffff 60%);
box-shadow: 0 4px 16px rgba(6, 86, 84, 0.12);
}
.portal-module-card--active.theme-purple:hover,
.portal-module-card--active.theme-green:hover {
border-color: #043f3d;
box-shadow: 0 8px 24px rgba(6, 86, 84, 0.22);
}
/* Additional theme colors */
.module-theme-indigo {
background: #eff6ff;
color: #1d4ed8;
}
.module-theme-teal {
background: #f0fdfa;
color: #0d9488;
}
/* Adjust portal modules grid to 3-column base */
.portal-modules-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
gap: 16px;
}
/* Nav section label style for dynamic module context */
#nav-section-tools-divider span {
transition: opacity 0.2s ease;
}
/* =====================================================================
THÈMES PAR MODULE (body[data-module]) — la barre latérale, le bandeau
et les accents changent selon le module ouvert.
===================================================================== */
nav.app-nav,
.nav-item,
.portal-tool-banner,
header.app-header {
transition: background-color 0.25s ease, border-color 0.25s ease;
}
/* Module Habilitations & Formations : thème bleu */
body[data-module="habilitation"] nav.app-nav {
background-color: #0b3d63;
}
body[data-module="habilitation"] .nav-item:hover {
background-color: #082e4b;
}
body[data-module="habilitation"] .nav-item.active,
body[data-module="habilitation"] .nav-item:active {
background-color: #052238;
}
body[data-module="habilitation"] .nav-item.active::after {
background-color: #b0dfff;
}
body[data-module="habilitation"] header.app-header {
border-bottom: 3px solid #0284c7;
}
body[data-module="habilitation"] .portal-tool-banner {
background: #eff6ff;
border-color: #bfdbfe;
}
body[data-module="habilitation"] .portal-tool-banner .btn-return-portal {
color: #0369a1;
}
body[data-module="habilitation"] .portal-tool-banner .btn-return-portal:hover {
background: #e0f2fe;
border-color: #0284c7;
}
body[data-module="habilitation"] .portal-tool-tag .material-icons {
color: #0284c7 !important;
}
/* Module Montée en Compétences : thème vert SNCF */
body[data-module="montee"] header.app-header {
border-bottom: 3px solid var(--sncf-vert-600);
}
body[data-module="montee"] .portal-tool-banner {
background: #f0fdf4;
border-color: #bbf7d0;
}
/* =====================================================================
MODE ÉDITION — PORTAIL D'ACCUEIL & MODULES MÉTIERS
===================================================================== */
/* Barre d'outils d'édition sur chaque carte de module */
.portal-card-edit-toolbar {
position: absolute;
top: 10px;
right: 10px;
display: flex;
align-items: center;
gap: 4px;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(4px);
padding: 3px 6px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
border: 1px solid #e2e8f0;
z-index: 5;
animation: fadeIn 0.15s ease-out;
}
.btn-card-edit-tool {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #e2e8f0;
background: #ffffff;
color: #475569;
border-radius: 6px;
cursor: pointer;
transition: all 0.15s ease;
padding: 0;
}
.btn-card-edit-tool .material-icons {
font-size: 16px;
}
.btn-card-edit-tool:hover {
background: #f1f5f9;
color: #0f172a;
border-color: #cbd5e1;
transform: translateY(-1px);
}
.btn-card-edit-tool[data-action="edit"]:hover {
background: #e0f2fe;
color: #0284c7;
border-color: #7dd3fc;
}
.btn-card-edit-tool.btn-card-tool-danger:hover {
background: #fee2e2;
color: #dc2626;
border-color: #fca5a5;
}
/* Carte "+ Ajouter un module" dans la grille */
.portal-module-card.portal-add-card {
border: 2px dashed #86efac;
background: linear-gradient(145deg, #f0fdf4 0%, #ffffff 100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 32px 20px;
cursor: pointer;
transition: all 0.2s ease;
min-height: 240px;
}
.portal-module-card.portal-add-card:hover {
border-color: var(--sncf-vert-600);
background: #f0fdf4;
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(6, 86, 84, 0.12);
}
.portal-add-card-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.portal-add-card-inner .material-icons {
font-size: 38px;
color: var(--sncf-vert-600);
transition: transform 0.2s ease;
}
.portal-module-card.portal-add-card:hover .portal-add-card-inner .material-icons {
transform: scale(1.12);
}
.portal-add-card-inner h4 {
margin: 4px 0 0 0;
font-size: 1.05rem;
color: var(--sncf-vert-800);
font-weight: 700;
}
.portal-add-card-inner p {
margin: 0;
font-size: 0.82rem;
color: #475569;
max-width: 220px;
}
.btn-add-portal-module-cta {
margin-top: 8px;
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--sncf-vert-700);
color: #ffffff;
border: none;
padding: 6px 14px;
border-radius: 6px;
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
transition: background 0.15s ease;
}
.btn-add-portal-module-cta:hover {
background: var(--sncf-vert-800);
}
/* Bouton d'édition rapide sur le Hero du portail */
.btn-hero-quick-edit {
position: absolute;
top: 12px;
right: 12px;
width: 32px;
height: 32px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.9);
border: 1px solid #cbd5e1;
color: var(--sncf-vert-700);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.15s ease;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.btn-hero-quick-edit:hover {
background: #ffffff;
border-color: var(--sncf-vert-600);
transform: scale(1.05);
}
.btn-hero-quick-edit .material-icons {
font-size: 18px;
}
/* Position relative sur les cartes pour le toolbar */
.portal-module-card {
position: relative;
}
.portal-hero {
position: relative;
}
/* =====================================================================
CLOISONNEMENT STRICT DU MENU DE NAVIGATION LATERALE
===================================================================== */
/* 1. Sur la page d'accueil : STRICTEMENT aucun bouton d'outil métier ne s'affiche à gauche.
Seul le bouton Accueil reste en haut, et le bouton Mode Édition tout en bas. */
body[data-module="accueil"] #sidebar-nav .nav-section-divider,
body[data-module="accueil"] #sidebar-nav .nav-item:not(#nav-accueil) {
display: none !important;
}
/* 2. Dans le module Habilitations & Formations : masquer les boutons du module compétences */
body[data-module="habilitation"] #sidebar-nav #nav-mon-profil,
body[data-module="habilitation"] #sidebar-nav #nav-fiches-niveaux,
body[data-module="habilitation"] #sidebar-nav #nav-suivi-equipe,
body[data-module="habilitation"] #sidebar-nav #nav-fiches-agents,
body[data-module="habilitation"] #sidebar-nav #nav-statistiques,
body[data-module="habilitation"] #sidebar-nav #nav-referentiel,
body[data-module="habilitation"] #sidebar-nav #nav-evaluation {
display: none !important;
}
/* 3. Dans le module Montée en Compétences : masquer le bouton du module Habilitation */
body[data-module="montee"] #sidebar-nav #nav-habilitation-formation {
display: none !important;
}
/* =====================================================================
MODULE 1 : COMPTE-RENDU ET INTERVENTION (SMART TEST) - PLEIN ÉCRAN
===================================================================== */
/* Suppression stricte de toutes les marges et bordures blanches */
body[data-module="compte-rendu"] main.app-main {
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
height: calc(100vh - var(--header-height)) !important;
max-height: calc(100vh - var(--header-height)) !important;
overflow: hidden !important;
background-color: #0b132b !important;
}
#view-compte-rendu {
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
height: 100% !important;
overflow: hidden !important;
display: none;
background: #0b132b;
}
#view-compte-rendu.active-panel {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
height: 100% !important;
}
.smart-tool-wrapper {
width: 100% !important;
height: 100% !important;
flex: 1 !important;
position: relative !important;
overflow: hidden !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
}
.smart-tool-iframe {
width: 100% !important;
height: 100% !important;
border: none !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
background: #0b132b !important;
}
/* Thème du header et de la sidebar pour Compte-rendu et intervention */
body[data-module="compte-rendu"] header.app-header {
border-bottom: 3px solid #4f46e5;
}
body[data-module="compte-rendu"] nav.app-nav {
background-color: #0b132b;
}
body[data-module="compte-rendu"] .nav-item:hover {
background-color: #162238;
}
body[data-module="compte-rendu"] .nav-item.active {
background-color: #1e293b;
border-left: 4px solid #6366f1;
}
/* Cloisonnement : Dans le module Compte-rendu, masquer les outils des autres modules */
body[data-module="compte-rendu"] #sidebar-nav #nav-mon-profil,
body[data-module="compte-rendu"] #sidebar-nav #nav-fiches-niveaux,
body[data-module="compte-rendu"] #sidebar-nav #nav-suivi-equipe,
body[data-module="compte-rendu"] #sidebar-nav #nav-fiches-agents,
body[data-module="compte-rendu"] #sidebar-nav #nav-statistiques,
body[data-module="compte-rendu"] #sidebar-nav #nav-referentiel,
body[data-module="compte-rendu"] #sidebar-nav #nav-evaluation,
body[data-module="compte-rendu"] #sidebar-nav #nav-habilitation-formation {
display: none !important;
}
/* Masquer les boutons Compte-rendu & OSMOSE dans les autres modules */
body[data-module="accueil"] #sidebar-nav #nav-compte-rendu,
body[data-module="accueil"] #sidebar-nav #nav-cr-depannage,
body[data-module="accueil"] #sidebar-nav #nav-cr-osmose,
body[data-module="accueil"] #sidebar-nav #nav-cr-reengagement,
body[data-module="accueil"] #sidebar-nav #nav-cr-restriction,
body[data-module="montee"] #sidebar-nav #nav-compte-rendu,
body[data-module="montee"] #sidebar-nav #nav-cr-depannage,
body[data-module="montee"] #sidebar-nav #nav-cr-osmose,
body[data-module="montee"] #sidebar-nav #nav-cr-reengagement,
body[data-module="montee"] #sidebar-nav #nav-cr-restriction,
body[data-module="habilitation"] #sidebar-nav #nav-compte-rendu,
body[data-module="habilitation"] #sidebar-nav #nav-cr-depannage,
body[data-module="habilitation"] #sidebar-nav #nav-cr-osmose,
body[data-module="habilitation"] #sidebar-nav #nav-cr-reengagement,
body[data-module="habilitation"] #sidebar-nav #nav-cr-restriction {
display: none !important;
}
/* =====================================================================
MODULE 3 : PLANNING & ROULEMENTS D'ÉQUIPE (STYLE COMBO)
===================================================================== */
/* 1. Isolation stricte de la barre latérale pour le module Planning */
body:not([data-module="planning"]) #sidebar-nav #nav-planning {
display: none !important;
}
body[data-module="planning"] #sidebar-nav #nav-mon-profil,
body[data-module="planning"] #sidebar-nav #nav-fiches-niveaux,
body[data-module="planning"] #sidebar-nav #nav-suivi-equipe,
body[data-module="planning"] #sidebar-nav #nav-fiches-agents,
body[data-module="planning"] #sidebar-nav #nav-statistiques,
body[data-module="planning"] #sidebar-nav #nav-referentiel,
body[data-module="planning"] #sidebar-nav #nav-evaluation,
body[data-module="planning"] #sidebar-nav #nav-habilitation-formation,
body[data-module="planning"] #sidebar-nav #nav-compte-rendu,
body[data-module="planning"] #sidebar-nav #nav-cr-depannage,
body[data-module="planning"] #sidebar-nav #nav-cr-osmose,
body[data-module="planning"] #sidebar-nav #nav-cr-reengagement,
body[data-module="planning"] #sidebar-nav #nav-cr-restriction,
body[data-module="planning"] #sidebar-nav #nav-guide-utilisation {
display: none !important;
}
/* Thème du header et de la barre latérale pour Planning & Roulements (Harmonisation bouton orange .btn-theme-orange) */
body[data-module="planning"] header.app-header {
border-bottom: 3px solid #ea580c;
}
body[data-module="planning"] nav.app-nav {
background-color: #1c1917;
}
body[data-module="planning"] .nav-item:hover {
background-color: #292524;
}
body[data-module="planning"] .nav-item:hover .material-icons {
color: #fb923c;
}
body[data-module="planning"] .nav-item.active,
body[data-module="planning"] .nav-item:active {
background: linear-gradient(90deg, rgba(234, 88, 12, 0.22) 0%, rgba(234, 88, 12, 0.06) 100%), #292524;
border-left: 4px solid #ea580c;
box-shadow: inset 4px 0 14px rgba(234, 88, 12, 0.25);
}
body[data-module="planning"] .nav-item.active::after {
background-color: #ea580c;
}
body[data-module="planning"] .nav-item.active .material-icons {
color: #ea580c;
filter: drop-shadow(0 2px 6px rgba(234, 88, 12, 0.45));
}
body[data-module="planning"] .nav-item.active span {
color: #fff7ed;
font-weight: 700;
}
/* Accentuation de l'onglet Planning dans le menu latéral */
#sidebar-nav #nav-planning.active,
#sidebar-nav #nav-mon-planning.active {
background: linear-gradient(90deg, rgba(234, 88, 12, 0.22) 0%, rgba(234, 88, 12, 0.06) 100%), #292524 !important;
border-left: 4px solid #ea580c !important;
box-shadow: inset 4px 0 14px rgba(234, 88, 12, 0.25) !important;
}
#sidebar-nav #nav-planning.active::after,
#sidebar-nav #nav-mon-planning.active::after {
background-color: #ea580c !important;
}
#sidebar-nav #nav-planning.active .material-icons,
#sidebar-nav #nav-mon-planning.active .material-icons {
color: #ea580c !important;
filter: drop-shadow(0 2px 6px rgba(234, 88, 12, 0.45)) !important;
}
#sidebar-nav #nav-planning.active span,
#sidebar-nav #nav-mon-planning.active span {
color: #fff7ed !important;
font-weight: 700 !important;
}
/* 2. Page & Toolbar Planning */
.planning-page-wrapper {
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
}
.planning-toolbar {
position: sticky;
top: 0;
z-index: 30;
background-color: #ffffff;
border: 1px solid #e2e8f0;
border-bottom: none !important;
border-radius: 10px 10px 0 0;
padding: 4px 16px;
min-height: var(--planning-toolbar-h, 38px);
height: var(--planning-toolbar-h, 38px);
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
box-shadow: none !important;
margin-bottom: 0 !important;
transition: border-radius 0.15s ease;
}
.planning-toolbar.is-stuck,
.planning-toolbar[data-stuck="true"] {
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
box-shadow: none !important;
}
#view-planning .planning-toolbar {
margin-top: 12px;
margin-bottom: 0 !important;
}
#view-planning .planning-toolbar .btn-planning-team-filter,
#view-planning .planning-toolbar .btn-planning-agent-filter,
#view-planning .planning-toolbar .planning-view-toggle,
#view-planning .planning-toolbar .btn-planning-nav-arrow,
#view-planning .planning-toolbar .planning-date-pill,
#view-planning .planning-toolbar .btn-planning-today,
#view-planning .planning-toolbar .btn-planning-action {
height: 30px !important;
min-height: 30px !important;
font-size: 0.80rem !important;
}
#view-planning .planning-toolbar .btn-planning-nav-arrow {
width: 30px !important;
height: 30px !important;
}
#view-planning .planning-toolbar .planning-view-toggle .series-toggle-btn {
height: 26px !important;
padding: 0 10px !important;
font-size: 0.78rem !important;
}
#view-planning .planning-toolbar .planning-date-pill {
padding: 0 10px !important;
}
.planning-toolbar-left {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.planning-toolbar-right {
display: flex;
align-items: center;
gap: 8px !important;
flex-wrap: wrap;
}
.planning-select-wrapper {
position: relative;
display: inline-block;
box-sizing: border-box;
}
.btn-planning-team-filter,
.btn-planning-agent-filter {
display: inline-flex;
align-items: center;
gap: 8px;
background: #ffffff;
border: 1.5px solid #cbd5e1;
border-radius: 8px;
padding: 6px 12px;
font-size: 0.82rem;
font-weight: 600;
color: #1e293b;
cursor: pointer;
height: 38px;
width: 100%;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
transition: all 0.15s ease;
user-select: none;
box-sizing: border-box;
}
.btn-planning-team-filter *,
.btn-planning-agent-filter * {
pointer-events: none;
}
.btn-planning-team-filter:hover,
.btn-planning-agent-filter:hover {
border-color: #0284c7;
background: #f8fafc;
}
.btn-planning-team-filter.active-filter,
.btn-planning-agent-filter.active-filter {
border-color: #0284c7;
background: #f0f9ff;
color: #0369a1;
}
.planning-team-filter-popover {
position: absolute;
top: calc(100% + 6px);
left: 0;
z-index: 120;
background: #ffffff;
border: 1px solid #cbd5e1;
border-radius: 8px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
width: 250px;
display: flex;
flex-direction: column;
overflow: hidden;
}
.filter-team-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
font-size: 0.82rem;
font-weight: 600;
color: #334155;
cursor: pointer;
transition: background 0.15s ease;
}
.filter-team-item:hover {
background: #f1f5f9;
}
.filter-team-item input[type="checkbox"],
.filter-agent-item input[type="checkbox"] {
cursor: pointer;
accent-color: #0284c7;
width: 15px;
height: 15px;
margin: 0;
}
.planning-view-toggle {
height: 38px;
box-sizing: border-box;
}
.planning-view-toggle .series-toggle-btn {
height: 30px;
font-size: 0.82rem;
}
.planning-date-pill-wrap {
position: relative;
display: inline-flex;
}
.planning-date-picker-popover {
position: absolute;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
z-index: 1050;
background: #ffffff;
border: 1px solid #cbd5e1;
border-radius: 12px;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.08);
padding: 14px 16px;
width: 350px;
max-width: 92vw;
box-sizing: border-box;
animation: popoverFadeIn 0.15s ease-out;
}
@keyframes popoverFadeIn {
from {
opacity: 0;
transform: translate(-50%, -6px);
}
to {
opacity: 1;
transform: translate(-50%, 0);
}
}
.planning-nav-center {
display: flex;
align-items: center;
gap: 8px;
}
.btn-planning-nav-arrow {
width: 34px;
height: 34px;
border-radius: 50%;
border: 1px solid #cbd5e1;
background: #ffffff;
color: #334155;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.15s ease;
}
.btn-planning-nav-arrow:hover {
background: #f1f5f9;
border-color: #94a3b8;
}
.planning-date-pill {
width: 310px;
min-width: 310px;
max-width: 310px;
height: 38px;
padding: 0 12px;
border-radius: 20px;
border: 1.5px solid #cbd5e1;
background: #ffffff;
font-weight: 700;
font-size: 0.88rem;
color: #0f172a;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
gap: 8px;
cursor: pointer;
user-select: none;
position: relative;
transition: all 0.15s ease;
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
box-sizing: border-box;
white-space: nowrap;
}
.planning-date-pill span {
white-space: nowrap;
}
.planning-date-pill:hover {
border-color: #0284c7;
background: #f8fafc;
}
.btn-planning-today {
height: 36px;
padding: 0 14px;
border-radius: 6px;
border: 1.5px solid #cbd5e1;
background: #ffffff;
color: #334155;
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.15s ease;
}
.btn-planning-today:hover {
background: #f8fafc;
color: #0f172a;
border-color: #94a3b8;
}
.btn-planning-action {
height: 36px;
padding: 0 14px;
border-radius: 6px;
border: 1.5px solid #cbd5e1;
background: #ffffff;
color: #334155;
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
transition: all 0.15s ease;
}
.btn-planning-action:hover {
background: #f8fafc;
border-color: #94a3b8;
}
.btn-planning-action.primary {
background: var(--sncf-bleu-700);
color: #ffffff;
border-color: var(--sncf-bleu-700);
box-shadow: 0 1px 3px rgba(2, 132, 199, 0.25);
}
.btn-planning-action.primary:hover {
background: #0369a1;
border-color: #0369a1;
}
/* 3. Grille du Planning (Board & Table) */
.planning-board-card {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 12px;
overflow: visible !important;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}
.planning-board-container {
overflow-x: auto;
position: relative;
max-width: 100%;
}
.planning-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
table-layout: fixed;
min-width: 1100px;
}
.planning-th-agent {
position: sticky;
left: 0;
z-index: 5;
background: #f8fafc;
padding: 12px 16px;
width: 240px;
border-bottom: 1.5px solid #cbd5e1;
border-right: 1.5px solid #e2e8f0;
text-align: left;
}
.planning-th-day {
background: #f8fafc;
border-bottom: 1.5px solid #cbd5e1;
border-left: 1px solid #e2e8f0;
padding: 10px 8px;
text-align: center;
width: calc((100% - 240px) / 7);
}
.planning-th-day.is-today {
background: #eff6ff;
border-bottom: 2px solid #2563eb;
}
.planning-day-name {
font-size: 0.82rem;
font-weight: 800;
color: #1e293b;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.planning-th-day.is-today .planning-day-name {
color: #1d4ed8;
}
.planning-day-date {
font-size: 0.74rem;
font-weight: 600;
color: #64748b;
margin-top: 2px;
}
/* Bandeau Section Équipe */
.planning-team-row {
background: #f8fafc;
border-top: 1.5px solid #cbd5e1;
border-bottom: 1px solid #e2e8f0;
}
.planning-team-header-cell {
position: sticky;
left: 0;
z-index: 4;
background: #f8fafc;
padding: 10px 16px;
}
.planning-team-title-wrap {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 8px;
}
.planning-team-title {
font-size: 0.94rem;
font-weight: 800;
color: #0f172a;
}
.planning-team-count {
font-size: 0.74rem;
font-weight: 700;
background: #e2e8f0;
color: #475569;
padding: 2px 8px;
border-radius: 9999px;
display: inline-flex;
align-items: center;
white-space: nowrap;
}
.planning-team-action-cell {
background: #f8fafc;
padding: 8px 12px;
border-left: 1px solid #e2e8f0;
font-size: 0.76rem;
color: #64748b;
vertical-align: middle;
}
.planning-team-quick-icons {
display: flex;
align-items: center;
gap: 12px;
}
.planning-quick-icon-item {
display: inline-flex;
align-items: center;
gap: 4px;
color: #64748b;
font-size: 0.76rem;
font-weight: 600;
}
/* Ligne d'un agent */
.planning-agent-row {
border-bottom: 1px solid #e2e8f0;
transition: background 0.12s ease;
}
.planning-agent-row:hover {
background: #fafbfc;
}
.planning-agent-cell {
position: sticky;
left: 0;
z-index: 3;
background: #ffffff;
border-right: 1.5px solid #e2e8f0;
border-bottom: 1px solid #e2e8f0;
padding: 12px 14px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
min-height: 90px;
}
.planning-agent-row:hover .planning-agent-cell {
background: #fbfcfe;
}
.planning-agent-info {
display: flex;
align-items: center;
gap: 10px;
}
.planning-agent-avatar {
width: 34px;
height: 34px;
border-radius: 50%;
background: #e0f2fe;
color: #0369a1;
font-weight: 800;
font-size: 0.80rem;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border: 1.5px solid #bae6fd;
}
.planning-agent-name {
font-size: 0.86rem;
font-weight: 700;
color: #0f172a;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.planning-agent-role {
font-size: 0.72rem;
color: #64748b;
margin-top: 1px;
}
/* Métriques d'heures sous l'agent (Combo style) */
.planning-agent-metrics {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.72rem;
padding-left: 44px;
flex-wrap: wrap;
}
.metric-base-hours {
font-weight: 700;
color: #475569;
}
.metric-variance-zero {
color: #94a3b8;
font-weight: 600;
}
.metric-variance-pos {
color: #16a34a;
font-weight: 700;
}
.metric-variance-neg {
background: #ffedd5;
color: #ea580c;
padding: 1px 6px;
border-radius: 10px;
font-weight: 800;
}
.metric-rcr-pill {
background: #dcfce7;
color: #15803d;
padding: 1px 7px;
border-radius: 10px;
font-weight: 800;
}
/* Cellules de jour */
.planning-day-cell {
border-left: 1px solid #f1f5f9;
border-bottom: 1px solid #e2e8f0;
padding: 6px;
vertical-align: top;
height: 100%;
cursor: pointer;
transition: background 0.12s ease;
}
.planning-day-cell:hover {
background: #f1f5f9;
}
/* Cartes de Shifts (Combo reproduction) */
.shift-card {
border-radius: 6px;
padding: 7px 9px;
height: 100%;
min-height: 68px;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
transition: all 0.15s ease;
position: relative;
user-select: none;
}
.shift-card:hover {
transform: translateY(-1px);
box-shadow: 0 3px 8px rgba(0,0,0,0.09);
}
.shift-card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 4px;
}
.shift-card-title {
font-size: 0.78rem;
font-weight: 700;
line-height: 1.25;
}
.shift-card-hours {
font-size: 0.70rem;
font-weight: 500;
opacity: 0.92;
margin-top: 3px;
}
.shift-card-footer {
display: flex;
align-items: center;
justify-content: flex-end;
margin-top: 4px;
}
.shift-card-status-square {
display: none !important;
}
/* Thèmes spécifiques pour chaque type de shift */
.shift-card.shift-m {
background: #dbeafe;
color: #1e40af;
border-left: 3.5px solid #2563eb;
}
.shift-card.shift-s {
background: #ede9fe;
color: #5b21b6;
border-left: 3.5px solid #7c3aed;
}
.shift-card.shift-n {
background: #e0e7ff;
color: #3730a3;
border-left: 3.5px solid #4f46e5;
}
.shift-card.shift-j {
background: #fef3c7;
color: #92400e;
border-left: 3.5px solid #d97706;
}
.shift-card.shift-form {
background: #cffafe;
color: #0e7490;
border-left: 3.5px solid #0891b2;
}
.shift-card.shift-ast {
background: #ffe4e6;
color: #9f1239;
border-left: 3.5px solid #e11d48;
}
.shift-card.shift-mal,
.shift-card.shift-ma {
background: #fee2e2;
color: #991b1b;
border-left: 3.5px solid #dc2626;
}
.shift-card.shift-rcr {
background: #dcfce7;
color: #166534;
border-left: 3.5px solid #16a34a;
}
/* Repos RP */
.shift-card.shift-rp,
.shift-card.shift-rh {
background: #f1f5f9;
color: #475569;
font-size: 0.74rem;
font-weight: 600;
border: 1px solid #cbd5e1;
text-align: center;
justify-content: center;
align-items: center;
min-height: 48px;
}
/* Repos supplémentaires RU */
.shift-card.shift-ru {
background: #e0f2fe;
color: #0369a1;
border-left: 3.5px solid #0284c7;
}
/* Repos compensateur de nuit RN */
.shift-card.shift-rn {
background: #ede9fe;
color: #5b21b6;
border-left: 3.5px solid #7c3aed;
}
/* Repos fériés RF */
.shift-card.shift-rf {
background: #fef3c7;
color: #92400e;
border-left: 3.5px solid #d97706;
}
/* Journée fériée JF */
.shift-card.shift-jf {
background: #fffbeb;
color: #b45309;
border-left: 3.5px solid #f59e0b;
}
/* Formation FO */
.shift-card.shift-fo,
.shift-card.shift-form {
background: #cffafe;
color: #0e7490;
border-left: 3.5px solid #0891b2;
}
/* Champ libre / Custom */
.shift-card.shift-custom {
background: #f8fafc;
color: #1e293b;
border: 1.5px dashed #94a3b8;
font-weight: 600;
}
/* Pas disponible */
.shift-card.shift-dispo {
background: #f8fafc;
color: #94a3b8;
font-size: 0.74rem;
font-weight: 500;
border: 1px dashed #cbd5e1;
text-align: center;
justify-content: center;
align-items: center;
min-height: 48px;
}
/* Congés payés (Bandeau vert foncé continu Combo) */
.shift-card.shift-cp {
background: #064e3b;
color: #ecfdf5;
font-size: 0.76rem;
font-weight: 700;
text-align: center;
justify-content: center;
align-items: center;
min-height: 48px;
box-shadow: 0 1px 3px rgba(6, 78, 59, 0.3);
}
/* Tables dans la modale d'édition */
.planning-trame-editor-table td,
.planning-affectations-editor-table td {
padding: 8px 10px;
border-bottom: 1px solid #e2e8f0;
vertical-align: middle;
}
.planning-trame-editor-table tr:hover,
.planning-affectations-editor-table tr:hover {
background: #f8fafc;
}
/* Filtre multi-sélection des Agents */
.planning-agent-filter-wrap {
position: relative;
}
.btn-planning-agent-filter {
display: inline-flex;
align-items: center;
gap: 8px;
background: #ffffff;
border: 1.5px solid #cbd5e1;
border-radius: 8px;
padding: 6px 12px;
font-size: 0.82rem;
font-weight: 600;
color: #1e293b;
cursor: pointer;
height: 38px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
transition: all 0.15s ease;
}
.btn-planning-agent-filter:hover {
border-color: #0284c7;
background: #f8fafc;
}
.btn-planning-agent-filter.active-filter {
border-color: #0284c7;
background: #f0f9ff;
color: #0369a1;
}
.planning-agent-filter-popover {
position: absolute;
top: calc(100% + 6px);
left: 0;
z-index: 120;
background: #ffffff;
border: 1px solid #cbd5e1;
border-radius: 8px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
width: 290px;
max-height: 380px;
display: flex;
flex-direction: column;
overflow: hidden;
}
.filter-popover-header {
padding: 8px 10px;
border-bottom: 1px solid #e2e8f0;
background: #f8fafc;
}
.filter-popover-actions {
display: flex;
justify-content: space-between;
padding: 6px 10px;
background: #ffffff;
border-bottom: 1px solid #f1f5f9;
}
.btn-filter-quick {
background: none;
border: none;
font-size: 0.74rem;
color: #0284c7;
cursor: pointer;
font-weight: 600;
padding: 2px 4px;
}
.btn-filter-quick:hover {
text-decoration: underline;
}
.filter-popover-list {
padding: 6px 0;
overflow-y: auto;
max-height: 240px;
}
.filter-agent-item {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
font-size: 0.80rem;
font-weight: 600;
color: #334155;
cursor: pointer;
transition: background 0.1s ease;
}
.filter-agent-item:hover {
background: #f1f5f9;
}
.filter-agent-item input[type="checkbox"] {
width: 15px;
height: 15px;
accent-color: #0284c7;
cursor: pointer;
}
/* Fixation de l'en-tête, des titres et boutons d'actions - ascenseur sur liste uniquement */
#planning-settings-modal .modal-card {
max-width: 1100px !important;
width: 96% !important;
height: 800px;
max-height: 92vh !important;
display: flex;
flex-direction: column;
}
#planning-settings-modal .modal-body {
overflow: hidden !important;
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
padding: 16px 24px;
}
#planning-settings-modal .config-tab-pane {
display: none;
flex-direction: column;
flex: 1;
min-height: 0;
height: 100%;
}
#planning-settings-modal .config-tab-pane.active {
display: flex !important;
}
.planning-settings-tab-fixed-header {
flex-shrink: 0;
margin-bottom: 12px;
}
.planning-table-scroll-container {
flex: 1;
min-height: 0;
overflow-y: auto;
overflow-x: auto;
border: 1px solid #e2e8f0;
border-radius: 8px;
background: #ffffff;
max-height: calc(88vh - 310px);
}
.planning-trame-editor-table thead,
.planning-affectations-editor-table thead,
.planning-codes-editor-table thead {
position: sticky;
top: 0;
z-index: 10;
background: #f1f5f9;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
/* Tableau de la trame hebdomadaire : largeurs strictement identiques */
.planning-trame-editor-table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
.planning-trame-editor-table th,
.planning-trame-editor-table td {
box-sizing: border-box;
}
.planning-trame-editor-table th:first-child,
.planning-trame-editor-table td:first-child {
width: 90px;
max-width: 90px;
text-align: left;
padding: 8px 10px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.planning-trame-editor-table th:nth-child(n+2):nth-child(-n+8),
.planning-trame-editor-table td:nth-child(n+2):nth-child(-n+8) {
width: calc((100% - 134px) / 7);
max-width: calc((100% - 134px) / 7);
padding: 4px 3px;
text-align: center;
box-sizing: border-box;
}
.planning-trame-editor-table th:last-child,
.planning-trame-editor-table td:last-child {
width: 44px;
max-width: 44px;
padding: 4px 2px;
text-align: center;
}
/* Bandeau & Sélecteur sobre du Lundi Pivot */
.planning-pivot-inline-box {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 8px 16px;
margin-bottom: 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
height: auto;
position: relative;
}
.planning-pivot-trigger-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: #ffffff;
border: 1.5px solid #0284c7;
border-radius: 6px;
padding: 5px 12px;
font-size: 0.82rem;
font-weight: 700;
color: #0369a1;
cursor: pointer;
transition: all 0.15s ease;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.planning-pivot-trigger-btn:hover {
background: #f0f9ff;
border-color: #0369a1;
box-shadow: 0 2px 4px rgba(2, 132, 199, 0.15);
}
.planning-pivot-popover {
position: absolute;
top: calc(100% + 6px);
left: 16px;
z-index: 1050;
background: #ffffff;
border: 1.5px solid #cbd5e1;
border-radius: 8px;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
padding: 12px;
width: 300px;
box-sizing: border-box;
}
.planning-pivot-popover .period-picker-nav-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.planning-pivot-popover .period-picker-nav-title {
font-size: 0.90rem;
font-weight: 800;
color: #0f172a;
}
.planning-pivot-popover .period-picker-week-table {
width: 100%;
border-collapse: collapse;
text-align: center;
}
.planning-pivot-popover .period-picker-week-table th {
padding: 4px 2px;
font-size: 0.72rem;
font-weight: 800;
color: #64748b;
border-bottom: 1px solid #e2e8f0;
}
.planning-pivot-popover .period-picker-week-table th:first-child {
color: #0284c7;
}
.planning-pivot-popover .pivot-monday-cell {
padding: 7px 2px;
font-size: 0.82rem;
font-weight: 700;
color: #0284c7;
cursor: pointer;
border-radius: 5px;
transition: all 0.12s ease;
}
.planning-pivot-popover .pivot-monday-cell:hover {
background: #e0f2fe;
color: #0369a1;
transform: scale(1.08);
}
.planning-pivot-popover .pivot-monday-cell.is-selected {
background: #0284c7 !important;
color: #ffffff !important;
font-weight: 800;
box-shadow: 0 1px 3px rgba(2, 132, 199, 0.4);
}
.planning-pivot-popover .pivot-disabled-cell {
padding: 7px 2px;
font-size: 0.80rem;
color: #cbd5e1;
opacity: 0.35;
cursor: not-allowed;
pointer-events: none;
user-select: none;
}
.planning-pivot-popover .pivot-popover-footer {
margin-top: 10px;
padding-top: 8px;
border-top: 1px solid #f1f5f9;
font-size: 0.72rem;
color: #475569;
display: flex;
align-items: center;
gap: 5px;
line-height: 1.3;
}
/* Mise en évidence visuelle des colonnes de jours fériés réglementaires */
th.is-holiday,
th.planning-col-holiday {
background-color: #faf5ff !important;
border-bottom: 2px solid #8b5cf6 !important;
}
th.is-holiday .planning-day-name,
th.planning-col-holiday .planning-day-name,
th.is-holiday .planning-month-day-name,
th.planning-col-holiday .planning-month-day-name {
color: #6b21a8 !important;
font-weight: 800 !important;
}
th.is-holiday .planning-day-date,
th.planning-col-holiday .planning-day-date,
th.is-holiday .planning-month-day-num,
th.planning-col-holiday .planning-month-day-num {
color: #7c3aed !important;
font-weight: 900 !important;
}
td.is-holiday,
td.planning-col-holiday {
background-color: rgba(243, 232, 255, 0.32) !important;
border-left: 1px dashed rgba(168, 85, 247, 0.35) !important;
border-right: 1px dashed rgba(168, 85, 247, 0.35) !important;
}
tr:hover td.is-holiday,
tr:hover td.planning-col-holiday {
background-color: rgba(243, 232, 255, 0.48) !important;
}
.planning-holiday-tag {
display: inline-block;
font-size: 0.65rem;
font-weight: 800;
color: #6b21a8;
background: #ede9fe;
border: 1px solid #c4b5fd;
padding: 1px 6px;
border-radius: 9999px;
margin-top: 2px;
white-space: nowrap;
letter-spacing: 0.2px;
text-transform: uppercase;
}
.shift-ferie {
background: rgba(124, 58, 237, 0.14) !important;
color: #6d28d9 !important;
border: 1.5px solid rgba(124, 58, 237, 0.45) !important;
}
.shift-jf {
background: rgba(180, 83, 9, 0.14) !important;
color: #b45309 !important;
border: 1.5px solid rgba(180, 83, 9, 0.45) !important;
}
/* Badges SNCF & Popover Picker dans la Trame du Roulement */
.trame-day-badge-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 32px;
padding: 4px 6px;
border-radius: 6px;
font-weight: 800;
font-size: 0.82rem;
cursor: pointer;
transition: all 0.15s ease;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
font-family: inherit;
outline: none;
}
.trame-day-badge-btn:hover {
filter: brightness(0.95);
transform: translateY(-1px);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
}
.trame-day-badge-btn:focus-visible {
box-shadow: 0 0 0 2px #0284c7;
}
.trame-picker-popover {
box-sizing: border-box;
}
.trame-picker-item {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 8px;
border-radius: 6px;
cursor: pointer;
transition: background 0.12s ease;
}
.trame-picker-item:hover {
background: #f1f5f9;
}
.trame-picker-item.is-active {
background: #e0f2fe;
}
/* Sélecteur d'icônes vectorielles monochromes (Rôles & Profils) */
.role-icon-picker-btn {
width: 100%;
height: 38px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 8px;
background: #ffffff;
border: 1.5px solid #cbd5e1;
border-radius: 6px;
cursor: pointer;
transition: all 0.15s ease;
outline: none;
}
.role-icon-picker-btn:hover {
border-color: #0284c7;
background: #f8fafc;
}
.role-icon-preview-box {
width: 28px;
height: 28px;
border-radius: 5px;
background: #f1f5f9;
display: flex;
align-items: center;
justify-content: center;
}
.role-icon-preview-box em {
font-size: 18px;
color: #0f172a;
}
.role-icon-picker-popover {
position: absolute;
top: calc(100% + 4px);
left: 0;
z-index: 1200;
background: #ffffff;
border: 1.5px solid #cbd5e1;
border-radius: 8px;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.18);
padding: 8px;
width: 290px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
}
.role-icon-choice-btn {
height: 44px;
border-radius: 6px;
border: 1.5px solid #e2e8f0;
background: #f8fafc;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.15s ease;
padding: 4px;
}
.role-icon-choice-btn:hover,
.role-icon-choice-btn.is-selected {
background: #e0f2fe;
border-color: #0284c7;
}
.role-icon-choice-btn em {
font-size: 20px;
color: #0f172a;
}
/* ========================================================= */
/* Écran d'attente / Placeholder (Agent sans ligne de roulement) */
/* ========================================================= */
.planning-unassigned-placeholder-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
min-height: 400px;
background: #ffffff;
border: 1.5px solid #e2e8f0;
border-radius: 12px;
padding: 48px 32px;
margin: 32px auto;
max-width: 620px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}
.unassigned-placeholder-icon-wrap {
width: 76px;
height: 76px;
border-radius: 50%;
background: #f1f5f9;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 22px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
/* ========================================================= */
/* Module Planning - Onglet 2 : Affectations Drag & Drop */
/* ========================================================= */
.planning-affectations-dnd-container {
display: grid;
grid-template-columns: 340px 1fr;
gap: 16px;
flex: 1;
min-height: 0;
height: 100%;
overflow: hidden;
}
@media (max-width: 900px) {
.planning-affectations-dnd-container {
grid-template-columns: 1fr;
overflow-y: auto;
}
}
.affectations-dnd-left-pane {
display: flex;
flex-direction: column;
gap: 10px;
background: #f8fafc;
border: 1.5px solid #e2e8f0;
border-radius: 10px;
padding: 12px;
overflow-y: auto;
min-height: 0;
height: 100%;
}
.affectations-dnd-right-pane {
display: flex;
flex-direction: column;
background: #ffffff;
border: 1.5px solid #e2e8f0;
border-radius: 10px;
padding: 12px 14px;
overflow: hidden;
min-height: 0;
height: 100%;
}
.dnd-pool-subzone {
display: flex;
flex-direction: column;
min-height: 0;
flex: 1 1 auto;
}
.dnd-pool-subzone + .dnd-pool-subzone {
margin-top: 6px;
padding-top: 6px;
border-top: 1px solid #e2e8f0;
}
.dnd-pool-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 5px;
flex-shrink: 0;
}
.dnd-pool-title {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.80rem;
font-weight: 700;
color: #1e293b;
text-transform: uppercase;
letter-spacing: 0.4px;
}
.dnd-drop-zone {
min-height: 80px;
max-height: 190px;
border-radius: 8px;
padding: 6px;
transition: all 0.18s ease;
display: flex;
flex-direction: column;
gap: 6px;
overflow-y: auto;
}
.dnd-drop-zone.zone-available {
background: #ffffff;
border: 1.5px dashed #cbd5e1;
}
.dnd-drop-zone.zone-hr {
background: #fffdf5;
border: 1.5px dashed #f59e0b;
}
.dnd-drop-zone.drag-over {
border-color: #0284c7 !important;
background: #f0f9ff !important;
outline: 2px dashed #0284c7;
outline-offset: -2px;
}
.dnd-agent-card {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 10px;
background: #ffffff;
border: 1px solid #cbd5e1;
border-radius: 6px;
cursor: grab;
user-select: none;
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.dnd-agent-card:hover {
transform: translateY(-1px);
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
border-color: #0284c7;
}
.dnd-agent-card.is-dragging {
opacity: 0.4;
cursor: grabbing;
border-style: dashed;
border-color: #0284c7;
}
.dnd-agent-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
background: #0284c7;
color: #ffffff;
font-weight: 700;
font-size: 0.74rem;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
letter-spacing: -0.5px;
}
.dnd-agent-info {
display: flex;
flex-direction: column;
min-width: 0;
flex: 1;
}
.dnd-agent-name {
font-size: 0.82rem;
font-weight: 700;
color: #0f172a;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dnd-agent-cp {
font-size: 0.72rem;
font-family: monospace;
color: #64748b;
}
.dnd-zone-empty-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
min-height: 80px;
color: #94a3b8;
font-size: 0.78rem;
text-align: center;
font-style: italic;
padding: 12px;
pointer-events: none;
}
/* Right pane lines list */
.affectations-dnd-lines-list {
flex: 1;
min-height: 0;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 8px;
padding-right: 4px;
}
.affectations-dnd-line-row {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 12px;
background: #f8fafc;
border: 1.5px solid #e2e8f0;
border-radius: 8px;
transition: all 0.15s ease;
}
.affectations-dnd-line-row.is-occupied {
background: #ffffff;
border-color: #cbd5e1;
}
.line-info-col {
width: 210px;
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.line-title-badge {
font-size: 0.82rem;
font-weight: 700;
color: #1e293b;
display: flex;
align-items: center;
gap: 6px;
}
.line-vacations-preview {
display: flex;
align-items: center;
gap: 3px;
flex-wrap: nowrap;
}
.line-vacation-pill {
font-size: 0.68rem;
font-weight: 700;
padding: 1px 5px;
border-radius: 3px;
font-family: monospace;
}
.line-drop-zone {
flex: 1;
min-height: 44px;
border-radius: 6px;
display: flex;
align-items: center;
padding: 4px 8px;
transition: all 0.18s ease;
}
.line-drop-zone.vacant {
border: 1.5px dashed #cbd5e1;
background: #f8fafc;
justify-content: center;
cursor: pointer;
}
.line-drop-zone.vacant:hover {
border-color: #94a3b8;
background: #f1f5f9;
}
.line-drop-zone.occupied {
border: 1px solid transparent;
background: transparent;
justify-content: space-between;
}
.line-drop-zone.drag-over {
border-color: #0284c7 !important;
background: #f0f9ff !important;
outline: 2px dashed #0284c7;
outline-offset: -2px;
}
.line-vacant-text {
font-size: 0.78rem;
color: #94a3b8;
display: flex;
align-items: center;
gap: 6px;
font-style: italic;
pointer-events: none;
}
.btn-remove-asgn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 50%;
border: 1px solid #fecaca;
background: #fef2f2;
color: #dc2626;
cursor: pointer;
transition: all 0.15s ease;
margin-left: 8px;
padding: 0;
flex-shrink: 0;
}
.btn-remove-asgn:hover {
background: #dc2626;
color: #ffffff;
border-color: #dc2626;
transform: scale(1.08);
}
/* Dimensions aérées et rendu visuel d'un poste fractionné / modifié */
.planning-table {
min-width: 1260px;
}
.planning-agent-row {
height: 98px !important;
max-height: 98px !important;
min-height: 98px !important;
}
.planning-agent-cell {
height: 98px !important;
max-height: 98px !important;
min-height: 98px !important;
box-sizing: border-box !important;
}
.planning-day-cell {
height: 98px !important;
max-height: 98px !important;
min-height: 98px !important;
min-width: 142px;
padding: 5px 6px !important;
vertical-align: middle !important;
box-sizing: border-box !important;
position: relative;
}
.shift-card {
height: 90px !important;
max-height: 90px !important;
min-height: 90px !important;
box-sizing: border-box !important;
position: relative !important;
border-radius: 8px !important;
padding: 7px 9px !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
transition: all 0.15s ease;
}
.shift-card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
width: 100%;
flex-shrink: 0;
}
.shift-card-title {
font-size: 0.84rem;
font-weight: 800;
line-height: 1.25;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: flex;
align-items: center;
gap: 3px;
}
.shift-card-body {
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: center;
gap: 2px;
width: 100%;
overflow: hidden;
margin: 1px 0;
}
/* Surbrillance nette et élégante pour poste modifié manuellement (remplace l'étoile *) */
.shift-card.is-shift-modified {
box-shadow: 0 0 0 1.5px currentColor, 0 3px 10px rgba(0, 0, 0, 0.08) !important;
}
.shift-split-block.is-shift-modified {
box-shadow: 0 0 0 1.5px currentColor, 0 2px 6px rgba(0, 0, 0, 0.06) !important;
}
.shift-month-card.is-shift-modified {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
font-weight: 600 !important;
}
/* Tooltip propre au survol d'une cellule avec motif de modification */
.planning-day-cell[data-has-note="true"],
.planning-month-table td[data-has-note="true"] {
position: relative;
}
.planning-day-cell[data-has-note="true"]:hover::after,
.planning-month-table td[data-has-note="true"]:hover::after {
content: "📝 Motif : " attr(data-note);
position: absolute;
bottom: calc(100% + 5px);
left: 50%;
transform: translateX(-50%);
background: #0f172a;
color: #ffffff;
font-size: 0.76rem;
font-weight: 600;
padding: 6px 12px;
border-radius: 7px;
white-space: pre-wrap;
min-width: 150px;
max-width: 280px;
width: max-content;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
z-index: 99999;
pointer-events: none;
line-height: 1.35;
text-align: left;
border: 1px solid rgba(255, 255, 255, 0.15);
animation: planningTooltipFadeIn 0.15s ease;
}
.planning-day-cell[data-has-note="true"]:hover::before,
.planning-month-table td[data-has-note="true"]:hover::before {
content: "";
position: absolute;
bottom: calc(100% + 0px);
left: 50%;
transform: translateX(-50%);
border-width: 5px 5px 0 5px;
border-style: solid;
border-color: #0f172a transparent transparent transparent;
z-index: 99999;
pointer-events: none;
}
@keyframes planningTooltipFadeIn {
from { opacity: 0; transform: translate(-50%, 4px); }
to { opacity: 1; transform: translate(-50%, 0); }
}
.shift-card-hours {
margin-top: auto !important; /* Calé tout en bas au même niveau que sur toutes les autres cellules */
flex-shrink: 0;
font-size: 0.74rem;
font-weight: 600;
font-family: monospace;
opacity: 0.92;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
}
/* Rendu visuel d'un poste fractionné : AUCUN cadre englobant extérieur, uniquement les 2 sous-blocs */
.shift-card.shift-card-split {
padding: 0 !important;
margin: 0 !important;
justify-content: space-between !important;
background: transparent !important;
border: none !important;
border-left: none !important;
border-right: none !important;
border-top: none !important;
border-bottom: none !important;
gap: 5px !important;
box-shadow: none !important;
height: 90px !important;
max-height: 90px !important;
min-height: 90px !important;
}
.shift-split-block {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 2px;
height: 42px;
width: 100%;
border-radius: 6px;
padding: 4px 8px;
box-sizing: border-box;
transition: all 0.15s ease;
position: relative;
overflow: hidden;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
text-align: left;
}
.shift-split-block:hover {
filter: brightness(0.97);
}
.shift-split-block-top {
padding-right: 8px;
}
.shift-split-code {
font-size: 0.77rem;
font-weight: 800;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #0f172a;
line-height: 1.2;
text-align: left;
display: flex;
align-items: center;
gap: 2px;
width: 100%;
}
.shift-split-time {
font-size: 0.69rem;
font-weight: 600;
font-family: monospace;
opacity: 0.95;
white-space: nowrap;
color: #334155;
line-height: 1.2;
text-align: left;
display: block;
width: 100%;
}
.shift-split-divider {
display: none;
}
/* Suppression définitive des cases à cocher : remplacées par le Drag-to-Select */
.shift-card-cb {
display: none !important;
}
/* Sélection de cellules (Semaine & Mois) - Halo & Accentuation */
.shift-card.is-selected {
outline: 2.5px solid #0284c7 !important;
box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.32), 0 4px 12px rgba(2, 132, 199, 0.20) !important;
z-index: 10 !important;
transform: translateY(-1px);
}
.shift-month-card.is-selected {
outline: 2.5px solid #0284c7 !important;
box-shadow: 0 0 0 3.5px rgba(2, 132, 199, 0.38), 0 3px 10px rgba(2, 132, 199, 0.22) !important;
transform: scale(1.14);
z-index: 10 !important;
}
td.is-cell-selected {
background-color: rgba(2, 132, 199, 0.09) !important;
}
.planning-drag-selecting,
.planning-drag-selecting * {
user-select: none !important;
-webkit-user-select: none !important;
cursor: crosshair !important;
}
/* ========================================================= */
/* VUE MOIS SYNTHÉTIQUE (MANAGEMENT) */
/* ========================================================= */
.planning-month-grid-wrapper {
background: transparent;
border: none;
border-radius: 0;
overflow: visible !important;
box-shadow: none;
display: flex;
flex-direction: column;
margin-top: 0;
}
.planning-month-table-container {
overflow: visible !important;
max-height: none !important;
}
.planning-month-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-family: inherit;
font-size: 0.80rem;
}
.planning-month-table thead th {
position: sticky;
top: calc(var(--planning-toolbar-h, 48px) + var(--planning-timeline-h, 38px)) !important;
background-color: #ffffff !important;
z-index: 20 !important;
border-bottom: 2px solid #cbd5e1;
padding: 8px 3px;
text-align: center;
font-size: 0.74rem;
font-weight: 700;
color: #475569;
border-right: 1px solid #e2e8f0;
min-width: 36px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.planning-month-table thead th.th-agent {
position: sticky;
left: 0;
top: calc(var(--planning-toolbar-h, 48px) + var(--planning-timeline-h, 38px)) !important;
z-index: 24 !important;
background-color: #ffffff !important;
min-width: 190px;
max-width: 230px;
text-align: left;
padding: 8px 14px;
border-right: 2px solid #cbd5e1;
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.04);
}
.planning-month-table th.is-weekend,
.planning-month-table td.is-weekend {
background-color: #f8fafc;
}
/* Mise en avant subtile et elegante de la colonne Aujourd'hui en Vue Mois */
.planning-month-table th.is-today,
.planning-month-table th.planning-col-today {
background-color: #f0f9ff !important;
border-left: 1.5px solid rgba(2, 132, 199, 0.35) !important;
border-right: 1.5px solid rgba(2, 132, 199, 0.35) !important;
border-bottom: 2px solid #0284c7 !important;
}
.planning-month-table th.is-today .planning-month-day-name,
.planning-month-table th.is-today .planning-month-day-num {
color: #0284c7 !important;
font-weight: 700 !important;
}
tbody td.planning-col-today,
.planning-month-table td.is-today,
.planning-month-table td.planning-col-today {
background-color: rgba(2, 132, 199, 0.04) !important;
border-left: 1.5px solid rgba(2, 132, 199, 0.25) !important;
border-right: 1.5px solid rgba(2, 132, 199, 0.25) !important;
}
.planning-month-day-name {
font-size: 0.67rem;
font-weight: 600;
color: #64748b;
text-transform: uppercase;
}
.planning-month-table td {
padding: 4px 2px;
border-bottom: 1px solid #e2e8f0;
border-right: 1px solid #e2e8f0;
text-align: center;
vertical-align: middle;
}
.planning-month-table td.td-agent {
position: sticky;
left: 0;
z-index: 10;
background: #ffffff;
border-right: 2px solid #cbd5e1;
padding: 6px 12px;
text-align: left;
white-space: nowrap;
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.04);
}
.planning-month-table tr:hover td.td-agent {
background: #f8fafc;
}
.planning-month-table tr:hover td {
background-color: rgba(2, 132, 199, 0.04);
}
.planning-month-team-header {
background: #f1f5f9;
font-weight: 800;
font-size: 0.80rem;
color: #334155;
padding: 8px 14px;
text-align: left;
border-bottom: 1.5px solid #cbd5e1;
}
/* Carré synthétique de poste en vue mois */
.shift-month-card {
min-width: 30px;
width: 32px;
height: 27px;
margin: 0 auto;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 0.77rem;
letter-spacing: -0.2px;
cursor: pointer;
user-select: none;
transition: transform 0.12s ease, box-shadow 0.12s ease;
position: relative;
box-sizing: border-box;
}
.shift-month-card:hover {
transform: scale(1.14);
z-index: 5;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.16);
}
.shift-month-card.is-selected {
outline: 2.5px solid #0284c7 !important;
box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.35) !important;
transform: scale(1.12);
z-index: 6;
}
.shift-month-code {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.shift-month-star {
color: #dc2626;
font-weight: 900;
font-size: 0.85rem;
line-height: 1;
margin-left: 2px;
display: inline-block;
vertical-align: baseline;
user-select: none;
}
.shift-star-badge {
color: #dc2626 !important;
font-weight: 900 !important;
font-size: 0.88rem !important;
line-height: 1 !important;
margin-left: 2px !important;
display: inline-block !important;
vertical-align: baseline !important;
user-select: none;
}
/* Pastilles de couleurs prédéfinies */
.color-preset-btn {
width: 22px;
height: 22px;
border-radius: 50%;
border: 1.5px solid #ffffff;
box-shadow: 0 0 0 1px #cbd5e1;
cursor: pointer;
padding: 0;
transition: transform 0.12s ease;
}
.color-preset-btn:hover {
transform: scale(1.18);
}
/* ========================================================================== */
/* BARRES D'ACTIONS FLOTTANTES PLANNING (ANTI-CHEVAUCHEMENT & SÉLECTION) */
/* ========================================================================== */
#planning-floating-container,
.planning-floating-container {
position: fixed;
bottom: 24px;
left: 50%;
transform: translate(-50%, 20px);
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
z-index: 1000;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
max-width: 95vw;
width: max-content;
}
#planning-floating-container.visible,
.planning-floating-container.visible {
opacity: 1;
transform: translate(-50%, 0);
pointer-events: auto;
}
.planning-floating-container > * {
pointer-events: auto;
}
/* Base commune rigoureusement harmonisée pour les barres flottantes */
.planning-floating-bar,
.planning-bulk-bar,
.planning-pending-bar {
background: #ffffff;
border: 1.5px solid #bae6fd;
border-radius: 40px;
padding: 8px 18px;
box-shadow: 0 10px 30px rgba(0, 51, 102, 0.22), 0 2px 8px rgba(0, 0, 0, 0.08);
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
width: auto;
max-width: 90vw;
box-sizing: border-box;
}
/* Comportement flexbox dans le conteneur anti-chevauchement */
.planning-floating-container .planning-floating-bar {
position: relative;
bottom: auto;
left: auto;
transform: none;
z-index: auto;
animation: none !important;
}
/* Fallback si hors conteneur */
body > .planning-bulk-bar,
body > .planning-pending-bar {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
z-index: 1000;
}
.planning-pending-bar {
border-color: #fde68a;
box-shadow: 0 10px 30px rgba(180, 83, 9, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08);
}
.bulk-pill-badge.pending-badge {
background: #fef3c7;
color: #b45309;
border: 1px solid #fde68a;
}
@keyframes floatUpBulk {
from { opacity: 0; transform: translate(-50%, 20px); }
to { opacity: 1; transform: translate(-50%, 0); }
}
.bulk-pill-badge {
background: #e0f2fe;
color: #0369a1;
font-weight: 800;
font-size: 0.82rem;
padding: 4px 12px;
border-radius: 20px;
display: inline-flex;
align-items: center;
gap: 6px;
border: 1px solid #bae6fd;
white-space: nowrap;
}
.bulk-bar-actions {
display: flex;
align-items: center;
gap: 8px;
}
.btn-bulk-action {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border-radius: 20px;
font-size: 0.80rem;
font-weight: 700;
cursor: pointer;
transition: all 0.15s ease;
border: 1px solid transparent;
white-space: nowrap;
}
.btn-bulk-action .material-icons {
font-size: 16px;
}
.btn-bulk-action.primary {
background: var(--sncf-bleu-700, #003366);
color: #ffffff;
}
.btn-bulk-action.primary:hover {
background: var(--sncf-bleu-800, #002244);
box-shadow: 0 2px 6px rgba(0, 51, 153, 0.25);
}
.btn-bulk-action.danger {
background: #fff1f2;
color: #e11d48;
border-color: #fecdd3;
}
.btn-bulk-action.danger:hover {
background: #ffe4e6;
border-color: #fda4af;
}
.btn-bulk-action.neutral {
background: #f8fafc;
color: #64748b;
border-color: #cbd5e1;
}
.btn-bulk-action.neutral:hover {
background: #f1f5f9;
color: #334155;
}
.btn-bulk-action.orion-btn {
background: #047857;
color: #ffffff;
border-color: #059669;
}
.btn-bulk-action.orion-btn:hover {
background: #065f46;
border-color: #047857;
box-shadow: 0 2px 6px rgba(4, 120, 87, 0.30);
}
.shift-hash-badge {
color: #9a3412 !important;
background: #fef3c7 !important;
border: 1px solid #f59e0b !important;
font-weight: 800 !important;
font-size: 0.72rem !important;
padding: 0 4px !important;
border-radius: 4px !important;
margin-left: 3px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1.2 !important;
box-shadow: 0 1px 2px rgba(217, 119, 6, 0.20) !important;
vertical-align: middle !important;
letter-spacing: 0.3px;
}
.shift-month-card-split {
padding: 0 2px !important;
min-width: 34px !important;
width: 36px !important;
}
.shift-month-code-split {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 0.69rem !important;
letter-spacing: -0.3px !important;
}
.shift-card-dec-details {
display: flex;
flex-wrap: wrap;
gap: 3px;
margin-top: 4px;
}
.shift-dec-tag {
display: inline-flex;
align-items: center;
font-size: 0.65rem;
font-weight: 700;
padding: 1px 5px;
border-radius: 3px;
line-height: 1.25;
}
.shift-dec-tag.tag-hs {
background: #fef3c7;
color: #92400e;
border: 1px solid #fde68a;
}
.shift-dec-tag.tag-jmob {
background: #e0f2fe;
color: #0369a1;
border: 1px solid #bae6fd;
}
.shift-dec-tag.tag-gprod {
background: #f3e8ff;
color: #7e22ce;
border: 1px solid #e9d5ff;
}
.shift-card-motif-text {
margin-top: 3px;
font-size: 0.68rem;
font-style: italic;
color: #475569;
display: flex;
align-items: center;
gap: 3px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.shift-search-dropdown-list {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
max-height: 190px;
overflow-y: auto;
background: #ffffff;
border: 1.5px solid #cbd5e1;
border-radius: 8px;
box-shadow: 0 10px 25px -5px rgba(0,0,0,0.15), 0 8px 10px -6px rgba(0,0,0,0.1);
z-index: 100;
}
.shift-search-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 7px 12px;
cursor: pointer;
border-bottom: 1px solid #f1f5f9;
transition: background 0.12s ease;
}
.shift-search-item:last-child {
border-bottom: none;
}
.shift-search-item:hover, .shift-search-item.is-selected {
background: #f0fdf4;
}
.shift-search-item-badge {
display: inline-block;
padding: 2px 7px;
border-radius: 4px;
font-size: 0.76rem;
font-weight: 700;
min-width: 32px;
text-align: center;
}
#shift-modal-select-trigger:hover {
border-color: #0284c7 !important;
background-color: #f8fafc !important;
}
#shift-modal-select-trigger.is-open {
border-color: #0284c7 !important;
box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
}
#shift-modal-select-trigger.is-open #shift-modal-select-chevron {
transform: rotate(180deg);
}
/* Nouveaux sélecteurs d'horaires Heures & Minutes (steppers) sans coupure de chiffres */
.time-stepper-box {
background: #f8fafc;
border: 1.5px solid #e2e8f0;
border-radius: 8px;
padding: 8px 12px;
}
.time-stepper-label {
display: block;
font-size: 0.78rem;
font-weight: 700;
color: #475569;
margin-bottom: 6px;
}
.time-stepper-inputs {
display: flex;
align-items: center;
gap: 6px;
}
.time-spin-group {
display: flex;
align-items: center;
background: #ffffff;
border: 1.5px solid #cbd5e1;
border-radius: 6px;
padding: 2px 6px;
transition: border-color 0.15s ease;
}
.time-spin-group:focus-within {
border-color: var(--sncf-bleu-700, #003366);
box-shadow: 0 0 0 2px rgba(0, 51, 153, 0.12);
}
.time-spin-input::-webkit-outer-spin-button,
.time-spin-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
display: none;
}
.time-spin-input {
width: 44px;
border: none;
background: transparent;
font-size: 0.95rem;
font-weight: 800;
font-family: monospace;
color: #0f172a;
text-align: center;
padding: 4px 0;
outline: none;
-moz-appearance: textfield;
appearance: textfield;
box-sizing: border-box;
}
.time-spin-unit {
font-size: 0.76rem;
font-weight: 700;
color: #94a3b8;
margin-left: 2px;
}
.time-spin-sep {
font-size: 1.1rem;
font-weight: 800;
color: #64748b;
}
/* Boutons d'actions standardisés pour un contraste parfait */
.btn-primary-action {
background: var(--sncf-bleu-700, #003366) !important;
color: #ffffff !important;
border: 1.5px solid var(--sncf-bleu-700, #003366);
border-radius: 6px;
padding: 8px 18px;
font-size: 0.84rem;
font-weight: 700;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
transition: all 0.15s ease;
box-shadow: 0 1px 3px rgba(0, 51, 102, 0.25);
}
.btn-primary-action:hover {
background: var(--sncf-bleu-800, #002244) !important;
border-color: var(--sncf-bleu-800, #002244);
}
.btn-secondary-action {
background: #ffffff;
color: #475569;
border: 1.5px solid #cbd5e1;
border-radius: 6px;
padding: 8px 16px;
font-size: 0.84rem;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
transition: all 0.15s ease;
}
.btn-secondary-action:hover {
background: #f8fafc;
color: #0f172a;
border-color: #94a3b8;
}
/* ========================================================================== */
/* VUE PERSONNELLE AGENT (CALENDRIER MENSUEL & DECLARATIONS D'ACTIVITES/HS) */
/* ========================================================================== */
.planning-agent-personal-badge {
display: none !important;
}
.agent-badge-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background: #16a34a;
color: #ffffff;
font-weight: 700;
font-size: 0.85rem;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.agent-badge-info {
display: flex;
flex-direction: column;
}
.agent-badge-name {
font-weight: 700;
font-size: 0.88rem;
color: #0f172a;
}
.agent-badge-sub {
font-size: 0.72rem;
font-weight: 600;
color: #15803d;
}
/* Conteneur principal calendrier mensuel */
.agent-monthly-calendar-wrapper {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
animation: fadeIn 0.2s ease-in-out;
}
/* Barre de statistiques mensuelles */
.agent-monthly-stats-bar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
background: #ffffff;
border: 1.5px solid #e2e8f0;
border-radius: 12px;
padding: 10px 18px;
box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}
.agent-stats-group {
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
}
.agent-stat-chip {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.82rem;
color: #475569;
}
.agent-stat-chip em {
font-size: 18px;
}
.agent-stat-value {
font-weight: 800;
font-size: 0.95rem;
color: #0f172a;
}
/* En-tête des jours de la semaine (LUN -> DIM) */
.agent-cal-weekdays-row {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 8px;
padding: 0 2px;
}
.agent-cal-weekday-col {
text-align: center;
font-weight: 800;
font-size: 0.78rem;
letter-spacing: 0.6px;
color: #475569;
padding: 10px 6px;
background: #f8fafc;
border: 1.5px solid #e2e8f0;
border-radius: 10px;
text-transform: uppercase;
}
.agent-cal-weekday-col.is-weekend {
color: #64748b;
background: #f1f5f9;
}
/* Grille du calendrier mensuel */
.agent-cal-grid {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 8px;
padding: 0 2px;
}
/* Case d'une journée du calendrier */
.agent-cal-day-cell {
background: #ffffff;
border: 1.5px solid #e2e8f0;
border-radius: 12px;
padding: 10px 10px 8px 10px;
min-height: 125px;
display: flex;
flex-direction: column;
gap: 6px;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
position: relative;
cursor: pointer;
user-select: none;
box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
.agent-cal-day-cell:hover {
border-color: #0284c7;
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(2, 132, 199, 0.12);
z-index: 2;
}
.agent-cal-day-cell.is-today {
border: 2px solid #0284c7;
background: #f0f9ff;
box-shadow: 0 0 0 1px rgba(2, 132, 199, 0.2);
}
.agent-cal-day-cell.is-other-month {
background: #f8fafc;
opacity: 0.55;
border-style: dashed;
}
.agent-cal-day-cell.is-weekend {
background: #fafaf9;
}
.agent-cal-day-cell.is-other-month.is-weekend {
background: #f1f5f9;
}
/* En-tête de la case jour */
.agent-cal-day-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 2px;
}
.agent-cal-day-num {
font-size: 0.96rem;
font-weight: 800;
color: #1e293b;
line-height: 1;
}
.agent-cal-day-cell.is-today .agent-cal-day-num {
color: #0284c7;
}
.agent-cal-today-tag {
font-size: 0.65rem;
font-weight: 700;
background: #0284c7;
color: #ffffff;
padding: 2px 6px;
border-radius: 6px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Pastille de vacation principale */
.agent-cal-shift-pill {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
padding: 6px 8px;
border-radius: 8px;
font-size: 0.80rem;
font-weight: 700;
color: #ffffff;
box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.agent-cal-shift-pill .shift-code-tag {
font-size: 0.82rem;
font-weight: 800;
letter-spacing: 0.4px;
}
.agent-cal-shift-pill .shift-hours-tag {
font-size: 0.70rem;
font-weight: 600;
opacity: 0.95;
}
/* Liste des déclarations sous la vacation */
.agent-cal-dec-list {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: auto;
padding-top: 4px;
}
.agent-dec-pill {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.72rem;
font-weight: 700;
padding: 3px 7px;
border-radius: 6px;
width: fit-content;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.dec-pill-hs {
background: #fef3c7;
color: #b45309;
border: 1px solid #fde68a;
}
.dec-pill-jmob {
background: #e0f2fe;
color: #0369a1;
border: 1px solid #bae6fd;
}
.dec-pill-gprod {
background: #ede9fe;
color: #6d28d9;
border: 1px solid #ddd6fe;
}
/* Hover prompt sur la case */
.agent-cal-day-hint {
font-size: 0.68rem;
color: #94a3b8;
display: flex;
align-items: center;
gap: 4px;
opacity: 0;
transition: opacity 0.15s ease;
}
.agent-cal-day-cell:hover .agent-cal-day-hint {
opacity: 1;
}
/* Modale de déclaration agent */
.dec-card-section {
background: #ffffff;
border: 1.5px solid #e2e8f0;
border-radius: 12px;
padding: 14px 16px;
transition: all 0.2s ease;
}
.dec-card-section.active-declared {
border-color: #0284c7;
background: #f8fafc;
box-shadow: 0 2px 8px rgba(2, 132, 199, 0.08);
}
.dec-card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.dec-card-title-wrap {
display: flex;
align-items: center;
gap: 12px;
}
.dec-card-icon {
width: 38px;
height: 38px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
flex-shrink: 0;
}
.dec-card-icon.hs-icon {
background: #fef3c7;
color: #d97706;
}
.dec-card-icon.jmob-icon {
background: #e0f2fe;
color: #0284c7;
}
.dec-card-icon.gprod-icon {
background: #ede9fe;
color: #7c3aed;
}
.dec-card-title {
margin: 0;
font-size: 0.95rem;
font-weight: 700;
color: #0f172a;
}
.dec-card-subtitle {
font-size: 0.75rem;
color: #64748b;
display: block;
}
.dec-card-content {
margin-top: 14px;
padding-top: 14px;
border-top: 1px dashed #cbd5e1;
}
/* Switch toggle moderne */
.switch-toggle {
position: relative;
display: inline-block;
width: 44px;
height: 24px;
flex-shrink: 0;
}
.switch-toggle input {
opacity: 0;
width: 0;
height: 0;
}
.switch-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #cbd5e1;
transition: 0.22s ease;
border-radius: 24px;
}
.switch-slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background-color: #ffffff;
transition: 0.22s ease;
border-radius: 50%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.switch-toggle input:checked + .switch-slider {
background-color: #0284c7;
}
.switch-toggle input:checked + .switch-slider:before {
transform: translateX(20px);
}
/* Boutons rapides HS */
.quick-hs-btn {
padding: 4px 8px;
font-size: 0.76rem;
font-weight: 700;
border: 1px solid #cbd5e1;
background: #ffffff;
color: #475569;
border-radius: 6px;
cursor: pointer;
transition: all 0.15s ease;
}
.quick-hs-btn:hover {
background: #fef3c7;
border-color: #fde68a;
color: #b45309;
}
/* Resume vacation dans la modale */
.dec-shift-summary-box {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 14px;
background: #f1f5f9;
border-radius: 10px;
border: 1px solid #e2e8f0;
}
/* Media print pour export propre calendrier */
@media print {
body.print-agent-calendar .app-header,
body.print-agent-calendar .app-sidebar,
body.print-agent-calendar .planning-toolbar,
body.print-agent-calendar .planning-bulk-bar,
body.print-agent-calendar .modal-overlay {
display: none !important;
}
body.print-agent-calendar .app-container {
padding: 0 !important;
margin: 0 !important;
}
body.print-agent-calendar .agent-monthly-calendar-wrapper {
width: 100% !important;
}
body.print-agent-calendar .agent-cal-day-cell {
min-height: 90px !important;
box-shadow: none !important;
border: 1px solid #94a3b8 !important;
page-break-inside: avoid;
}
}
.btn-quick-hs {
padding: 3px 8px;
font-size: 0.74rem;
font-weight: 700;
border: 1px solid #cbd5e1;
background: #ffffff;
color: #475569;
border-radius: 6px;
cursor: pointer;
transition: all 0.15s ease;
}
.btn-quick-hs:hover {
background: #fef3c7;
border-color: #fde68a;
color: #b45309;
}
/* COMPTEURS QUOTIDIENS D'EFFECTIFS PAR ÉQUIPE (JOUR / NUIT) & LIGNE D'EN-TÊTE FUSIONNÉE */
.planning-team-totals-row,
.planning-team-row.planning-team-totals-row {
background: #f8fafc !important;
border-top: 2px solid #cbd5e1 !important;
border-bottom: 1.5px solid #cbd5e1 !important;
}
.planning-team-header-cell.planning-team-totals-cell-label,
.planning-team-totals-cell-label {
padding: 8px 14px !important;
background: #f8fafc !important;
border-right: 1.5px solid #cbd5e1 !important;
border-bottom: 1.5px solid #cbd5e1 !important;
vertical-align: middle !important;
position: sticky !important;
left: 0 !important;
z-index: 4 !important;
}
.planning-team-fused-wrap {
display: flex !important;
flex-direction: column !important;
gap: 3px !important;
}
.planning-team-name-line {
display: flex !important;
align-items: center !important;
gap: 8px !important;
}
.planning-team-name-line .planning-team-title {
font-size: 0.94rem !important;
font-weight: 800 !important;
white-space: nowrap !important;
}
.planning-team-name-line .planning-team-count {
font-size: 0.72rem !important;
font-weight: 700 !important;
background: #e2e8f0 !important;
color: #475569 !important;
padding: 2px 8px !important;
border-radius: 9999px !important;
display: inline-flex !important;
align-items: center !important;
white-space: nowrap !important;
}
.team-totals-wrap {
display: flex !important;
flex-direction: column !important;
gap: 1px !important;
}
.team-totals-title {
font-size: 0.70rem !important;
font-weight: 700 !important;
color: #64748b !important;
text-transform: uppercase !important;
letter-spacing: 0.35px !important;
display: block !important;
}
.team-totals-sub {
font-size: 0.69rem !important;
color: #64748b !important;
font-weight: 600 !important;
}
.planning-team-totals-cell-day {
padding: 6px 4px !important;
text-align: center !important;
vertical-align: middle !important;
border-right: 1px solid #e2e8f0 !important;
border-bottom: 1.5px solid #cbd5e1 !important;
background: #f8fafc !important;
}
.planning-daily-counts-box {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: center !important;
gap: 3px !important;
padding: 2px 0 !important;
}
.recap-pill {
display: inline-flex !important;
align-items: center !important;
gap: 3px !important;
font-size: 0.69rem !important;
font-weight: 600 !important;
padding: 1.5px 5px !important;
border-radius: 4px !important;
white-space: nowrap !important;
line-height: 1.2 !important;
letter-spacing: -0.2px !important;
}
.recap-pill b {
font-weight: 800 !important;
font-size: 0.72rem !important;
}
.pill-dot {
width: 5px !important;
height: 5px !important;
border-radius: 50% !important;
display: inline-block !important;
flex-shrink: 0 !important;
}
/* Matin : bleu clair pastel */
.pill-matin {
background: #eff6ff !important;
border: 1px solid #bfdbfe !important;
color: #1d4ed8 !important;
}
.dot-matin {
background: #3b82f6 !important;
}
/* Jour : beige / orange doux pastel */
.pill-jour {
background: #fefce8 !important;
border: 1px solid #fef08a !important;
color: #b45309 !important;
}
.dot-jour {
background: #f59e0b !important;
}
/* Soir : violet clair pastel */
.pill-soir {
background: #faf5ff !important;
border: 1px solid #e9d5ff !important;
color: #7e22ce !important;
}
.dot-soir {
background: #a855f7 !important;
}
/* Nuit : bleu nuit / indigo pastel */
.pill-nuit {
background: #eef2ff !important;
border: 1px solid #c7d2fe !important;
color: #3730a3 !important;
}
.dot-nuit {
background: #4f46e5 !important;
}
/* =========================================================
HIÉRARCHIE & ENCADREMENT DU PÔLE DÉPANNAGE (PLANNING)
========================================================= */
.planning-hierarchy-header-row td {
background: linear-gradient(90deg, #fff7ed 0%, #ffedd5 100%) !important;
border-top: 2px solid #fed7aa !important;
border-bottom: 1.5px solid #fed7aa !important;
border-left: 4px solid var(--pole-color, #ea580c) !important;
padding: 8px 14px !important;
}
.planning-hierarchy-fused-wrap {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
}
.planning-hierarchy-title {
font-size: 0.82rem !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
color: #9a3412 !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
}
.planning-hierarchy-badge {
font-size: 0.68rem !important;
font-weight: 700 !important;
padding: 2px 8px !important;
border-radius: 9999px !important;
background: #ffedd5 !important;
color: #ea580c !important;
border: 1px solid #fed7aa !important;
}
.planning-team-management-header-row td {
background: #f8fafc !important;
border-top: 1.5px solid #e2e8f0 !important;
border-bottom: 1px solid #e2e8f0 !important;
padding: 6px 14px !important;
}
.planning-team-management-title {
font-size: 0.74rem !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 0.4px !important;
color: #475569 !important;
display: inline-flex !important;
align-items: center !important;
gap: 5px !important;
}
.planning-manager-row {
background: #ffffff !important;
}
.planning-manager-row:hover {
background: #f8fafc !important;
}
.planning-manager-cell-agent {
padding: 6px 14px !important;
border-right: 1px solid #e2e8f0 !important;
background: #ffffff !important;
}
.planning-manager-avatar {
width: 28px !important;
height: 28px !important;
border-radius: 6px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
font-size: 14px !important;
background: #f1f5f9 !important;
border: 1px solid #cbd5e1 !important;
}
.planning-manager-badge {
font-size: 0.64rem !important;
font-weight: 700 !important;
padding: 1px 6px !important;
border-radius: 4px !important;
white-space: nowrap !important;
display: inline-block !important;
}
.badge-mgt-gold {
background: #fef3c7 !important;
color: #92400e !important;
border: 1px solid #fde68a !important;
}
.badge-mgt-purple {
background: #faf5ff !important;
color: #6b21a8 !important;
border: 1px solid #e9d5ff !important;
}
.badge-mgt-blue {
background: #e0f2fe !important;
color: #0369a1 !important;
border: 1px solid #bae6fd !important;
}
.badge-mgt-teal {
background: #ccfbf1 !important;
color: #0f766e !important;
border: 1px solid #99f6e4 !important;
}
/* ========================================================================== */
/* COMPOSANT AVATAR (PASTILLE D'INITIALES ÉPURÉE SANS SOUS-LIBELLÉ) */
/* ========================================================================== */
.planning-avatar-block {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
flex-shrink: 0;
}
.planning-avatar-block .planning-agent-avatar {
width: 30px;
height: 30px;
border-radius: 50%;
background: rgba(2, 132, 199, 0.12);
color: #0284c7;
font-weight: 800;
font-size: 0.74rem;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
border: 1px solid rgba(2, 132, 199, 0.22);
}
.planning-avatar-block .planning-agent-avatar.mgt-avatar {
background: #f1f5f9;
border: 1.5px solid #cbd5e1;
color: #334155;
}
.planning-avatar-role-text {
display: none !important;
}
/* Badge neutre pastel sobre pour la direction et l'encadrement */
.planning-manager-badge-neutral {
display: inline-flex;
align-items: center;
font-size: 0.66rem !important;
font-weight: 700 !important;
padding: 1.5px 6px !important;
border-radius: 4px !important;
background: #f1f5f9 !important;
border: 1px solid #cbd5e1 !important;
color: #475569 !important;
letter-spacing: 0.02em;
white-space: nowrap !important;
}
.planning-management-separator-row td,
td.planning-management-separator-cell {
padding: 0 !important;
margin: 0 !important;
height: 6px !important;
background: #f8fafc !important;
border-top: none !important;
border-bottom: 1.5px solid #e2e8f0 !important;
}
.planning-management-separator-cell {
position: relative;
}
.planning-management-separator-line {
height: 1px;
background: transparent;
width: 100%;
}
.agent-role-badge {
font-size: 0.72rem !important;
font-weight: 700 !important;
text-transform: uppercase !important;
margin-top: 2px !important;
line-height: 1.15 !important;
letter-spacing: 0.3px !important;
color: var(--team-color, #0284c7);
}
.planning-hierarchy-header-row.planning-transverse-header-row td {
background: linear-gradient(90deg, #f0fdfa 0%, #ccfbf1 100%) !important;
border-top: 2px solid #99f6e4 !important;
border-bottom: 1.5px solid #99f6e4 !important;
border-left: 4px solid var(--transverse-color, #0d9488) !important;
padding: 8px 14px !important;
}
.planning-transverse-header-row .planning-hierarchy-title {
color: #0f766e !important;
}
.planning-transverse-header-row .planning-hierarchy-badge {
background: #ccfbf1 !important;
color: #0f766e !important;
border: 1px solid #99f6e4 !important;
}
/* ========================================================================== */
/* VUE MOIS : EN-TÊTES DE COLONNES (2 LETTRES + NUMÉRO) & CELLULES COMPACTES */
/* ========================================================================== */
.planning-month-th-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
padding: 2px 0;
}
.planning-month-day-name {
font-size: 0.68rem;
font-weight: 800;
color: #64748b;
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 1;
}
.planning-month-day-num {
font-size: 0.82rem;
font-weight: 700;
color: #0f172a;
line-height: 1;
}
.planning-month-table th.is-weekend .planning-month-day-name {
color: #94a3b8;
}
.planning-month-table th.is-today .planning-month-day-name,
.planning-month-table th.is-today .planning-month-day-num {
color: #0284c7;
font-weight: 800;
}
/* ========================================================================== */
/* MODALE SÉLECTEUR DE PÉRIODE (SEMAINE ENTIÈRE / GRILLE 12 MOIS) */
/* ========================================================================== */
.period-picker-nav-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
padding: 4px 6px;
background: #f8fafc;
border-radius: 8px;
border: 1px solid #e2e8f0;
}
.period-picker-nav-title {
font-size: 0.95rem;
font-weight: 800;
color: #0f172a;
text-transform: capitalize;
}
.period-picker-nav-btn {
width: 32px;
height: 32px;
border-radius: 6px;
border: 1px solid #cbd5e1;
background: #ffffff;
color: #334155;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.15s ease;
}
.period-picker-nav-btn:hover {
background: #f1f5f9;
border-color: #0284c7;
color: #0284c7;
}
/* Grille 12 mois directe */
.period-picker-months-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.btn-period-month-cell {
padding: 12px 6px;
border-radius: 8px;
border: 1.5px solid #e2e8f0;
background: #ffffff;
font-weight: 700;
font-size: 0.85rem;
color: #334155;
cursor: pointer;
transition: all 0.15s ease;
text-align: center;
}
.btn-period-month-cell:hover {
border-color: #0284c7;
background: #f0f9ff;
color: #0284c7;
transform: translateY(-1px);
}
.btn-period-month-cell.is-active-period-month {
border-color: #0284c7;
background: #0284c7;
color: #ffffff;
box-shadow: 0 2px 6px rgba(2, 132, 199, 0.25);
}
/* Sélecteur de semaine entière */
.period-picker-week-table {
width: 100%;
border-collapse: separate;
border-spacing: 0 4px;
}
.period-picker-week-table th {
font-size: 0.72rem;
font-weight: 800;
color: #64748b;
padding: 6px 4px;
text-align: center;
}
.period-picker-week-tr {
cursor: pointer;
border-radius: 6px;
transition: all 0.15s ease;
}
.period-picker-week-tr td {
padding: 8px 4px;
text-align: center;
font-size: 0.82rem;
font-weight: 600;
color: #334155;
background: #f8fafc;
transition: all 0.15s ease;
}
.period-picker-week-tr td:first-child {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.period-picker-week-tr td:last-child {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.period-picker-week-tr:hover td {
background: #e0f2fe !important;
color: #0284c7 !important;
font-weight: 700 !important;
}
.period-picker-week-tr.is-current-selected-week td {
background: #0284c7 !important;
color: #ffffff !important;
font-weight: 800 !important;
}
.period-picker-week-tr.is-current-selected-week:hover td {
background: #0369a1 !important;
}
.period-picker-week-tr td.is-other-month {
color: #94a3b8;
opacity: 0.6;
}
/* ========================================================================== */
/* PLANNING : EN-TÊTES COLLANTS & DÉFILEMENT PLEINE PAGE (SEMAINE + MOIS) */
/* ========================================================================== */
:root {
--planning-toolbar-h: 38px;
--planning-timeline-h: 38px;
--planning-toolbar-height: var(--planning-toolbar-h, 38px);
--planning-timeline-height: var(--planning-timeline-h, 38px);
--planning-top-offset: calc(var(--planning-toolbar-h, 38px) + var(--planning-timeline-h, 38px));
}
#view-planning .planning-page-wrapper {
gap: 0 !important;
}
#view-planning .planning-board-card {
margin-top: 14px !important;
}
/* 1. Barre d'outils supérieure (Filtres équipes, boutons vues, etc.) si sticky */
.planning-toolbar {
position: sticky;
top: 0;
z-index: 30;
background-color: #ffffff;
}
/* 2. Frise / Timeline Minimap des mois et des semaines (Bloc fusionné sous la toolbar) */
#planningTimelineNavigator,
.planning-timeline-navigator {
position: sticky;
top: var(--planning-toolbar-h, 38px) !important;
z-index: 25 !important;
background-color: #ffffff !important;
height: var(--planning-timeline-h, 38px);
margin: 0 !important;
margin-top: 0 !important;
border-left: 1px solid #e2e8f0;
border-right: 1px solid #e2e8f0;
border-top: none !important;
border-bottom: 1px solid #cbd5e1 !important;
border-radius: 0 0 10px 10px !important;
box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.08) !important;
}
/* 3. Ligne d'en-tête des jours (thead / th du tableau) */
#planning-board-table thead th,
.planning-table thead tr th,
.planning-table thead th,
.planning-month-table thead th,
.planning-grid-header {
position: sticky;
top: calc(var(--planning-toolbar-h, 38px) + var(--planning-timeline-h, 38px)) !important;
z-index: 20 !important;
background-color: #ffffff !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* Ligne nette de séparation */
}
/* Colonne AGENT : sticky vertical ET horizontal avec fond opaque */
#planning-board-table thead th.planning-th-agent,
.planning-table thead th.planning-th-agent,
.planning-month-table thead th.th-agent {
position: sticky;
left: 0;
top: calc(var(--planning-toolbar-h, 48px) + var(--planning-timeline-h, 38px)) !important;
z-index: 24 !important;
background-color: #ffffff !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
/* thead et tr sans positionnement conflictuel */
#planning-board-table thead,
#planning-board-table thead > tr,
.planning-table thead,
.planning-table thead > tr,
.planning-month-table thead,
.planning-month-table thead > tr {
position: static;
top: auto;
box-shadow: none;
}
/* Conserver les arrondis extérieurs sans créer de conteneur de scroll interne */
.planning-board-card {
overflow: visible !important;
}
/* Nettoyage du conteneur englobant en vue mois (suppression du conteneur fantôme et marges) */
#planning-board-container > .planning-month-grid-wrapper,
.planning-month-grid-wrapper {
background: transparent;
border: none;
box-shadow: none;
border-radius: 0;
margin: 0;
padding: 0;
overflow: visible !important;
}
#planning-board-container > .planning-month-grid-wrapper > .planning-month-table-container,
.planning-month-table-container {
overflow: visible !important;
max-height: none !important;
margin: 0;
padding: 0;
}
#planning-board-container,
.planning-board-container {
overflow: visible !important;
max-height: none !important;
}
/* Positionnement naturel du titre de section sans écrasement */
.planning-month-team-row {
position: static;
}
.planning-month-team-header {
position: static;
}
/* Cellule mensuelle fractionnée : badge centré, hauteur de ligne préservée */
.shift-month-card.shift-month-card-split,
.shift-month-card:has(.shift-month-code-split) {
width: auto;
min-width: 46px;
height: 27px;
padding: 0 4px;
white-space: nowrap;
}
/* --- HARMONISATION VISUELLE VUE MOIS & SUPPRESSION DES ÉTOILES PARASITES --- */
.shift-month-card {
font-weight: 600 !important;
color: #0f172a !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}
.shift-month-code,
.shift-month-code-split,
.shift-month-card span:not(.shift-hash-badge) {
color: #0f172a !important;
font-weight: 600 !important;
}
/* Suppression définitive des étoiles parasites sur postes en vue mois */
.shift-month-star {
display: none !important;
}
/* --- BADGES GPROD / H SUP / GMOB : STATUTS DE VALIDATION UNIFIÉS --- */
.shift-dec-tag,
.agent-dec-pill {
font-weight: 700 !important;
border-radius: 4px !important;
box-sizing: border-box !important;
transition: all 0.15s ease !important;
}
/* Statut En attente (Jaune / Orange) */
.shift-dec-tag.status-pending,
.agent-dec-pill.status-pending,
.shift-dec-tag.dec-status-pending,
.agent-dec-pill.dec-status-pending {
background: #FEF3C7 !important;
color: #92400E !important;
border: 1px solid #F59E0B !important;
}
/* Statut Accepté / Validé (Vert) */
.shift-dec-tag.status-accepted,
.agent-dec-pill.status-accepted,
.shift-dec-tag.dec-status-accepted,
.agent-dec-pill.dec-status-accepted {
background: #D1FAE5 !important;
color: #065F46 !important;
border: 1px solid #10B981 !important;
}
/* Statut Refusé (Rouge) */
.shift-dec-tag.status-refused,
.agent-dec-pill.status-refused,
.shift-dec-tag.dec-status-refused,
.agent-dec-pill.dec-status-refused {
background: #FEE2E2 !important;
color: #991B1B !important;
border: 1px solid #EF4444 !important;
}
/* ==========================================================================
TIMELINE MINIMAP NAVIGATOR & BANDEAU TEMPOREL COULISSANT (.planning-timeline-slider)
========================================================================== */
#planningTimelineNavigator,
.planning-timeline-navigator,
.planning-timeline-slider {
display: flex;
align-items: center;
height: var(--planning-timeline-h, 38px);
background-color: #ffffff !important;
border-left: 1px solid #E2E8F0;
border-right: 1px solid #E2E8F0;
border-top: none !important;
border-bottom: 1px solid #CBD5E1 !important;
border-radius: 0 0 10px 10px !important;
padding: 0 8px;
gap: 8px;
box-sizing: border-box !important;
user-select: none;
position: sticky;
top: var(--planning-toolbar-h, 38px) !important;
z-index: 25 !important;
width: 100% !important;
max-width: 100% !important;
box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.08) !important;
}
.planning-week-strip,
.timeline-track-container {
flex: 1 1 100% !important;
width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
/* Sélecteur de bascule de granularité : Semaine / Mois */
.timeline-granularity-toggle {
display: inline-flex;
align-items: center;
background: #f1f5f9;
border: 1px solid #cbd5e1;
border-radius: 6px;
padding: 2px;
gap: 2px;
flex-shrink: 0;
}
.timeline-toggle-btn {
display: inline-flex;
align-items: center;
gap: 4px;
background: transparent;
border: none;
border-radius: 4px;
padding: 3px 8px;
font-size: 0.74rem;
font-weight: 600;
color: #64748b;
cursor: pointer;
transition: all 0.15s ease;
line-height: 1;
}
.timeline-toggle-btn:hover {
color: #0f172a;
}
.timeline-toggle-btn.active {
background: #ffffff;
color: #0284c7;
font-weight: 700;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.btn-timeline-today {
display: inline-flex;
align-items: center;
gap: 4px;
background: #f8fafc;
border: 1px solid #cbd5e1;
border-radius: 6px;
padding: 3px 10px;
height: 28px;
font-size: 0.75rem;
font-weight: 600;
color: #0369a1;
cursor: pointer;
transition: all 0.15s ease;
flex-shrink: 0;
box-sizing: border-box;
}
.btn-timeline-today:hover {
background: #e0f2fe;
border-color: #7dd3fc;
color: #0284c7;
}
.timeline-week-block.is-active-week {
background-color: #f0f9ff;
}
.timeline-week-block.is-active-week .timeline-week-title {
color: #0284c7;
font-weight: 800;
}
.timeline-month-block.is-active-month {
background-color: #f0f9ff;
color: #0284c7;
font-weight: 700;
}
.planning-badge-hr {
background: #fef3c7 !important;
color: #92400e !important;
border: 1px solid #f59e0b !important;
padding: 1px 5px !important;
border-radius: 4px !important;
font-size: 0.64rem !important;
font-weight: 800 !important;
letter-spacing: 0.3px !important;
text-transform: uppercase !important;
display: inline-block !important;
vertical-align: middle !important;
}
/* Alignement strict à gauche des barres d'équipes en vue mois */
.planning-month-team-header,
#planning-board-container table tbody tr.planning-month-team-row td,
#planning-board-container table tbody tr td.planning-month-team-header {
text-align: left !important;
padding-left: 16px !important;
}
.btn-timeline-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
background: transparent;
border: 1px solid transparent;
border-radius: 4px;
color: #64748B;
cursor: pointer;
padding: 0;
transition: all 0.15s ease;
flex-shrink: 0;
}
.btn-timeline-arrow:hover {
background: #E2E8F0;
color: #0F172A;
border-color: #CBD5E1;
}
.btn-timeline-arrow em {
font-size: 18px;
line-height: 1;
}
.timeline-track-container {
flex: 1;
height: 28px;
position: relative;
background: #FFFFFF;
border: 1px solid #CBD5E1;
border-radius: 6px;
overflow: hidden;
cursor: pointer;
}
.timeline-months-ribbon {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
pointer-events: auto;
}
.timeline-month-block {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.2px;
color: #475569;
text-transform: none;
box-sizing: border-box;
border-left: 1px solid #E2E8F0;
cursor: pointer;
pointer-events: auto;
user-select: none;
transition: background-color 0.15s ease, color 0.15s ease;
}
.timeline-month-block:first-child {
border-left: none;
}
.timeline-month-block:hover {
background-color: #F1F5F9;
color: #0284C7;
}
.timeline-month-block.is-current-month {
color: #0284C7;
font-weight: 700;
}
.timeline-month-marker {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 2px;
background: #94A3B8;
opacity: 0.7;
}
/* Fenêtre glissante / Pilule sobre et lisible (fond blanc uni) */
.timeline-viewport-window {
position: absolute;
top: 2px;
bottom: 2px;
background: #ffffff !important;
border: 1.5px solid #0284c7 !important;
border-radius: 6px !important;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
cursor: grab;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
z-index: 15;
transition: border-color 0.12s ease, box-shadow 0.12s ease;
min-width: 80px;
}
.timeline-viewport-window:hover {
border-color: #0369a1 !important;
box-shadow: 0 2px 6px rgba(2, 132, 199, 0.2) !important;
}
.timeline-viewport-window.is-dragging {
cursor: grabbing !important;
background: #f8fafc !important;
box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3) !important;
}
.timeline-handle-left,
.timeline-handle-right {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 2px;
height: 12px;
background: #0284c7;
border-radius: 1px;
opacity: 0.7;
pointer-events: none;
}
.timeline-handle-left {
left: 4px;
}
.timeline-handle-right {
right: 4px;
}
/* Texte plein sombre et net dans la pilule */
.timeline-window-label {
background: transparent !important;
color: #0f172a !important; /* Texte sombre net */
font-size: 11px !important;
font-weight: 600 !important;
white-space: nowrap !important;
pointer-events: none;
user-select: none;
padding: 0 8px;
border: none !important;
box-shadow: none !important;
letter-spacing: -0.1px;
}
/* Démarcation de nouveau mois dans la grille mensuelle (Vue Glissante) */
.planning-month-table th.is-new-month {
border-left: 2px solid #0284C7 !important;
background: #F0F9FF !important;
}
.planning-month-table td.is-new-month {
border-left: 2px solid rgba(2, 132, 199, 0.35) !important;
}
.planning-month-header-tag {
display: block;
font-size: 8px;
font-weight: 800;
text-transform: uppercase;
color: #0284C7;
letter-spacing: 0.3px;
line-height: 1;
margin-top: 2px;
}
/* Masquage complet de l'ancien bloc de navigation central (remplacé par la Timeline Minimap harmonisée) */
#view-planning:not([data-planning-view="agent_personal"]) #planning-nav-center {
display: none !important;
}
#view-planning[data-planning-view="agent_personal"] .planning-toolbar {
position: sticky;
top: 0;
}
#view-planning[data-planning-view="agent_personal"] #planning-nav-center {
display: flex !important;
align-items: center;
justify-content: center;
gap: 8px;
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 10;
}
#view-planning[data-personal-status="unassigned"] #planning-nav-center,
#view-planning.is-unassigned #planning-nav-center,
#view-planning.is-unassigned #btn-planning-today-btn,
#view-planning.is-unassigned #btn-planning-print {
display: none !important;
}
#view-planning[data-planning-view="agent_personal"] #planning-nav-center .planning-date-pill {
width: auto !important;
min-width: 175px !important;
max-width: 260px !important;
padding: 0 16px !important;
justify-content: center;
text-align: center;
gap: 0;
cursor: default;
}
#view-planning[data-planning-view="agent_personal"] #planning-nav-center .planning-date-pill span {
font-weight: 700;
font-size: 0.92rem;
color: #0f172a;
letter-spacing: 0.2px;
text-align: center;
}
#view-planning[data-planning-view="agent_personal"] #planning-nav-center .planning-date-pill .material-icons {
display: none !important;
}
#view-planning[data-planning-view="agent_personal"][data-personal-period="year"] #planning-nav-center .planning-date-pill {
min-width: 110px !important;
padding: 0 16px !important;
}
/* Blocs hebdomadaires de la Timeline en Vue Semaine (6 semaines glissantes S1 à S52) */
.timeline-week-block {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
box-sizing: border-box;
border-left: 1px solid #E2E8F0;
cursor: pointer;
pointer-events: auto;
user-select: none;
transition: background-color 0.15s ease, color 0.15s ease;
line-height: 1.15;
padding: 0 4px;
}
.timeline-week-block:first-child {
border-left: none;
}
.timeline-week-block:hover {
background-color: #F1F5F9;
}
.timeline-week-block:hover .timeline-week-title {
color: #0284C7;
}
.timeline-week-title {
font-size: 11px;
font-weight: 700;
color: #0f172a;
letter-spacing: -0.1px;
display: block;
}
.timeline-week-dates {
font-size: 8.8px;
font-weight: 500;
color: #64748b;
margin-top: 1px;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 96%;
}
.timeline-week-block.is-current-week .timeline-week-title {
color: #0284C7;
}
.timeline-week-block.is-current-week .timeline-week-dates {
color: #0284C7;
font-weight: 600;
}
/* Fixation au scroll (position: sticky) sans transparence */
.planning-timeline-navigator.is-stuck {
border-radius: 0 0 10px 10px !important;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.10) !important;
background-color: #ffffff !important;
}
/* Mise en valeur subtile et nette de la colonne Aujourd'hui en Vue Semaine */
/* Fond opaque obligatoire sur le th en position sticky */
th.planning-th-day.is-today,
th.planning-th-day.planning-col-today,
th.planning-col-today {
background-color: #f0f9ff !important; /* Teinte pleine 100% opaque, aucun canal alpha rgba */
opacity: 1 !important;
z-index: 25 !important; /* Toujours au-dessus des td qui défilent */
border-left: 1.5px solid rgba(2, 132, 199, 0.4) !important;
border-right: 1.5px solid rgba(2, 132, 199, 0.4) !important;
}
/* Neutraliser toute transparence héritée sur les div internes */
th.planning-th-day.is-today .planning-day-name,
th.planning-th-day.is-today .planning-day-date {
background: transparent !important;
}
.planning-th-day.is-today .planning-day-name,
.planning-th-day.planning-col-today .planning-day-name {
color: #0284c7 !important;
font-weight: 800 !important;
}
/* S'assurer que seul le corps (les cellules du tableau sous le thead) garde la transparence */
tbody td.planning-col-today,
.planning-day-cell.is-today,
.planning-day-cell.planning-col-today {
background-color: rgba(2, 132, 199, 0.04) !important;
border-left: 1.5px solid rgba(2, 132, 199, 0.25) !important;
border-right: 1.5px solid rgba(2, 132, 199, 0.25) !important;
}
/* ==========================================================================
AUTHENTICATION GUARD (VERROUILLAGE ÉLÉGANT & SÉCURISÉ DE L'APPLICATION)
========================================================================== */
/* Lorsque l'utilisateur est déconnecté : la barre latérale gauche reste présente mais complètement vierge */
body.user-disconnected .app-nav .nav-item,
body.user-disconnected .app-nav .nav-section-divider,
body.user-disconnected .app-nav .sidebar-bottom-group,
body.user-disconnected .app-nav .sidebar-bottom-action {
display: none !important;
}
/* Carte d'accueil déconnectée élégante intégrée au centre */
.disconnected-card-container {
max-width: 680px;
margin: 30px auto;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 36px 40px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
.disconnected-hero-icon {
width: 52px;
height: 52px;
border-radius: 12px;
background: rgba(6, 86, 84, 0.08);
color: #065654;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 18px;
}
.disconnected-title {
font-size: 1.35rem;
font-weight: 800;
color: #0f172a;
margin: 0 0 10px 0;
line-height: 1.3;
}
.disconnected-desc {
color: #475569;
font-size: 0.92rem;
line-height: 1.6;
margin: 0 0 24px 0;
}
.disconnected-actions-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin-bottom: 22px;
}
.disconnected-demo-box {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 14px 16px;
}
/* --- ALIGNEMENT VERTICAL STRICT FEUILLE JOURNALIÈRE --- */
td.cell-crt,
td.cell-crt.cell-merged {
vertical-align: middle !important;
padding: 10px 14px !important; /* Même padding exact que cell-signalement */
text-align: center !important;
height: auto !important;
}
/* Élargissement de la fenêtre d'intervention */
#modalAjoutIntervention .modal-card,
#fjInterventionModal .modal-card,
.modal-intervention-card {
max-width: 960px !important; /* Passe de 840px à 960px */
width: 95% !important;
}
/* Remplacer le flexbox complexe par un bloc simple respectant l'alignement naturel */
td.cell-crt > .crt-clean-text,
.cell-crt .crt-clean-text,
.crt-clean-text {
display: block !important;
margin: 0 auto !important;
padding: 0 !important;
text-align: center !important;
line-height: 1.45 !important;
white-space: pre-line !important;
word-break: break-word !important;
}
/* Désactiver tout background au survol sur l'élément interne du CRT */
.cell-crt:hover .crt-clean-text,
.crt-clean-text:hover,
.crt-clean-text {
background: transparent !important;
background-color: transparent !important;
}
/* Empêcher tout paragraphe, div ou br initial de créer de la hauteur */
.crt-clean-text > *:first-child:empty,
.crt-clean-text > br:first-child,
.crt-clean-text > p:first-child:empty {
display: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* Espacement net entre les paragraphes s'ils sont enregistrés sous forme de balises ou
*/
.cell-crt .crt-clean-text p,
.cell-crt .crt-clean-text div,
.crt-clean-text p,
.crt-clean-text div {
margin-top: 0 !important;
margin-bottom: 6px !important;
padding: 0 !important;
line-height: 1.4 !important;
}
.cell-crt .crt-clean-text p:last-child,
.cell-crt .crt-clean-text div:last-child,
.crt-clean-text p:last-child,
.crt-clean-text div:last-child {
margin-bottom: 0 !important;
}
/* Modale intervention : Apparition fluide des boutons de copie discrets au survol */
.fj-detail-di-item,
.fj-detail-card-di,
.fj-detail-card-label {
position: relative;
}
.fj-detail-di-item .btn-copy-di-compact,
.fj-detail-card-di .btn-copy-di-compact,
.fj-detail-card-label .btn-copy-di-compact,
.card-crt-container .btn-copy-di-compact,
.restriction-card-container .btn-copy-di-compact {
opacity: 0.6;
}
.fj-detail-di-item:hover .btn-copy-di-compact,
.fj-detail-card-di:hover .btn-copy-di-compact,
.fj-detail-card-label:hover .btn-copy-di-compact,
.card-crt-container:hover .btn-copy-di-compact,
.restriction-card-container:hover .btn-copy-di-compact {
opacity: 1;
color: #0284c7;
background-color: #ffffff;
border-color: #cbd5e1;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.fj-detail-di-item .btn-copy-di-compact:hover,
.fj-detail-card-di .btn-copy-di-compact:hover,
.fj-detail-card-label .btn-copy-di-compact:hover,
.card-crt-container .btn-copy-di-compact:hover,
.restriction-card-container .btn-copy-di-compact:hover {
color: #0369a1;
border-color: #93c5fd;
background-color: #eff6ff;
}
.fj-detail-di-item .btn-copy-di-compact.copied,
.fj-detail-card-di .btn-copy-di-compact.copied,
.fj-detail-card-label .btn-copy-di-compact.copied,
.card-crt-container .btn-copy-di-compact.copied,
.restriction-card-container .btn-copy-di-compact.copied {
color: #16a34a !important;
background-color: #dcfce7 !important;
border-color: #86efac !important;
opacity: 1 !important;
}
/* Statut de DI Modifiée & En cours */
.pill-statut.modifiee {
background-color: #fff7ed !important;
color: #c2410c !important;
border: 1px solid #fdba74 !important;
}
.pill-statut.encours,
.pill-statut.en-cours {
background-color: #e0f2fe !important;
color: #0369a1 !important;
border: 1px solid #bae6fd !important;
}
/* 1. Surbrillance par défaut pour toute ligne survolée (y compris les lignes simples sans JS) */
.fj-table tbody tr:not(.fj-section-header-row):hover td,
.fj-table tbody tr.is-row-hovered td {
background-color: #f1f5f9 !important;
cursor: pointer;
}
/* 2. Neutraliser le fond sur les éléments internes pour éviter les carrés sombres */
.fj-table tbody tr td .crt-clean-text,
.fj-table tbody tr td .crt-clean-text:hover {
background: transparent !important;
background-color: transparent !important;
}
/* ========================================================================== */
/* MATRICE RBAC (PERMISSIONS & RÔLES DYNAMIQUES) */
/* ========================================================================== */
.rbac-permissions-section {
background: #f8fafc;
border: 1.5px solid #cbd5e1;
border-radius: 8px;
padding: 12px 14px;
margin-top: 12px;
margin-bottom: 12px;
}
.rbac-modules-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 12px;
margin-top: 8px;
}
.rbac-module-card {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 6px;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 6px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.rbac-module-title {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.3px;
margin-bottom: 4px;
padding-bottom: 4px;
border-bottom: 1px dashed #e2e8f0;
}
.rbac-module-title em {
font-size: 16px;
}
.rbac-cb-label {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 0.80rem;
color: #334155;
cursor: pointer;
line-height: 1.35;
padding: 2px 0;
transition: color 0.15s ease;
}
.rbac-cb-label:hover {
color: #0f172a;
}
.rbac-cb-label input[type="checkbox"] {
width: 15px;
height: 15px;
margin-top: 2px;
accent-color: #065654;
cursor: pointer;
flex-shrink: 0;
}
.btn-manage-roles-trigger {
display: inline-flex;
align-items: center;
gap: 5px;
height: 38px;
padding: 0 12px;
background: #f1f5f9;
border: 1.5px solid #cbd5e1;
border-radius: 6px;
color: #1e293b;
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: all 0.15s ease;
flex-shrink: 0;
}
.btn-manage-roles-trigger:hover {
background: #e2e8f0;
color: #0f172a;
border-color: #94a3b8;
}
/* Modale de gestion des rôles */
.roles-manager-list {
display: flex;
flex-direction: column;
gap: 8px;
max-height: 360px;
overflow-y: auto;
margin-top: 12px;
}
.roles-manager-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 6px;
gap: 12px;
transition: all 0.15s ease;
}
.roles-manager-item:hover {
border-color: #cbd5e1;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.role-tag-system {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.70rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.4px;
padding: 2px 7px;
border-radius: 4px;
background: #f1f5f9;
color: #475569;
border: 1px solid #cbd5e1;
}
.role-tag-custom {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.70rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.4px;
padding: 2px 7px;
border-radius: 4px;
background: #eff6ff;
color: #1d4ed8;
border: 1px solid #bfdbfe;
}
/* Neutralisation définitive des étoiles et halos en Vue Mois */
.shift-month-star {
display: none !important;
}
.shift-month-card.is-shift-modified {
box-shadow: none !important;
}
/* ==========================================================================
HARMONISATION DYNAMIQUE COULEUR & THÈME DE LA SIDEBAR GAUCHE PAR MODULE
========================================================================== */
body[data-sidebar-theme] header.app-header {
border-bottom: 3px solid var(--sidebar-theme-border, #059669) !important;
}
body[data-sidebar-theme] nav.app-nav,
body[data-sidebar-theme] .sidebar,
body[data-sidebar-theme] #sidebar-nav {
background-color: var(--sidebar-theme-bg, #065654) !important;
}
body[data-sidebar-theme] #sidebar-nav .nav-item:hover {
background-color: var(--sidebar-theme-hover, #054442) !important;
}
body[data-sidebar-theme] #sidebar-nav .nav-item:hover .material-icons,
body[data-sidebar-theme] #sidebar-nav .nav-item:hover em {
color: var(--sidebar-theme-light, #ffffff) !important;
}
body[data-sidebar-theme] #sidebar-nav .nav-item.active,
body[data-sidebar-theme] #sidebar-nav .nav-item:active,
body[data-sidebar-theme] #sidebar-nav #nav-planning.active,
body[data-sidebar-theme] #sidebar-nav #nav-mon-planning.active,
body[data-sidebar-theme] #sidebar-nav #nav-outillage.active,
body[data-sidebar-theme] #sidebar-nav #nav-dotation.active {
background: var(--sidebar-theme-active, #043533) !important;
background-color: var(--sidebar-theme-active, #043533) !important;
border-left: 4px solid var(--sidebar-theme-accent, #10b981) !important;
box-shadow: inset 4px 0 14px rgba(0, 0, 0, 0.22) !important;
}
body[data-sidebar-theme] #sidebar-nav .nav-item.active::after {
background-color: var(--sidebar-theme-accent, #10b981) !important;
}
body[data-sidebar-theme] #sidebar-nav .nav-item.active .material-icons,
body[data-sidebar-theme] #sidebar-nav .nav-item.active em {
color: var(--sidebar-theme-light, #ffffff) !important;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}
body[data-sidebar-theme] #sidebar-nav .nav-item.active span {
color: #ffffff !important;
font-weight: 700 !important;
}
/* =========================================================================
VUE ANNUELLE PERSONNELLE (12 MOIS CONDENSÉS) & MODE LECTURE SEULE ÉQUIPE
========================================================================= */
.agent-annual-calendar-wrapper {
padding: 16px;
background: #f8fafc;
border-radius: 12px;
}
.agent-annual-months-grid {
display: grid;
grid-template-columns: repeat(4, minmax(220px, 1fr));
gap: 14px;
}
@media (max-width: 1400px) {
.agent-annual-months-grid {
grid-template-columns: repeat(3, minmax(210px, 1fr));
}
}
@media (max-width: 1024px) {
.agent-annual-months-grid {
grid-template-columns: repeat(2, minmax(200px, 1fr));
}
}
@media (max-width: 640px) {
.agent-annual-months-grid {
grid-template-columns: 1fr;
}
}
.agent-annual-month-card {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 10px;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
display: flex;
flex-direction: column;
gap: 6px;
}
.agent-annual-month-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 8px;
background: #f1f5f9;
border-radius: 6px;
font-size: 0.78rem;
font-weight: 800;
color: #0f172a;
letter-spacing: 0.04em;
}
.agent-annual-month-year {
font-size: 0.72rem;
font-weight: 700;
color: #64748b;
}
.agent-annual-weekdays-row {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 3px;
text-align: center;
}
.agent-annual-weekday {
font-size: 0.65rem;
font-weight: 800;
color: #64748b;
padding: 2px 0;
}
.agent-annual-weekday.is-weekend {
color: #94a3b8;
}
.agent-annual-days-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 3px;
}
.agent-annual-day-cell {
min-height: 34px;
border-radius: 5px;
border: 1px solid #e2e8f0;
padding: 2px 3px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
cursor: pointer;
transition: transform 0.12s ease, box-shadow 0.12s ease;
user-select: none;
}
.agent-annual-day-cell:hover:not(.is-empty) {
transform: translateY(-1px);
box-shadow: 0 3px 6px rgba(15, 23, 42, 0.12);
z-index: 2;
}
.agent-annual-day-cell.is-empty {
background: transparent !important;
border-color: transparent !important;
cursor: default;
}
.agent-annual-day-cell.is-today {
box-shadow: 0 0 0 2px #0284c7;
}
.agent-annual-day-num {
font-size: 0.58rem;
font-weight: 700;
color: #475569;
line-height: 1;
align-self: flex-start;
}
.agent-annual-day-code {
font-size: 0.68rem;
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.02em;
text-align: center;
}
/* Mode consultation strict du Planning Équipe côté Agent */
#view-planning.is-team-readonly .planning-day-cell,
#view-planning.is-team-readonly .shift-card,
#view-planning.is-team-readonly .shift-month-card,
#view-planning.is-team-readonly .planning-month-table td[data-date],
#view-planning.is-team-readonly .shift-split-block {
cursor: default !important;
}