calée sur la bannière réelle, pas sur --rh-focus-banner-reserve. * En ≥1024px, .rh-focus-banner__inner (grille 1 ligne) a min-height: 3,35rem (border-box) : la réserve * 5,5 rem laissait ~2 rem de vide blanc entre le bas du bandeau bleu et le titre. */ @media (min-width: 1024px) { main.container.rh-main--focus-banner--leave-planning { /* Cible la hauteur de .rh-focus-banner__inner (grid 1 ligne, min 3,35 rem) + bordure, avec peu de marge si le contenu haute la barre. */ --rh-leave-planning-below-banner: calc(3.5rem + 1px); padding-top: var(--rh-leave-planning-below-banner); } main.container.rh-main--focus-banner--leave-planning .rh-focus-page-head { top: var(--rh-leave-planning-below-banner); padding-top: 0; margin-top: 0; } } /* 960px–1023px : bannière sur 2 niveaux, réserve 7,5 rem — resserrage sans hauteur fixe 1 ligne */ @media (min-width: 960px) and (max-width: 1023.98px) { main.container.rh-main--focus-banner--leave-planning { --rh-leave-planning-below-banner: calc(var(--rh-focus-banner-reserve) - 1.25rem); padding-top: var(--rh-leave-planning-below-banner); } main.container.rh-main--focus-banner--leave-planning .rh-focus-page-head { top: var(--rh-leave-planning-below-banner); padding-top: 0; margin-top: 0; } } .rh-focus-banner { --page-head-collab-font: var(--font); --page-head-collab-size: clamp(1.35rem, 2.2vw, 1.85rem); --page-head-collab-weight: 700; --page-head-collab-tracking: -0.02em; --page-head-collab-leading: 1.2; position: fixed; /* Mobile : au-dessus du contenu qui défile, mais sous le tiroir menu (z-index 450) */ z-index: 400; right: 0; font-family: var(--page-head-collab-font); background: #1e40af; border-bottom: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12); box-sizing: border-box; /* Évite le débordement horizontal (liens longs + liste) qui chevauche le viewport */ overflow-x: hidden; } .rh-focus-banner .wikyx-back-to-dashboard { color: #fff; background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.35); } .rh-focus-banner .wikyx-back-to-dashboard:hover { color: #fff; background: rgba(255, 255, 255, 0.24); border-color: rgba(255, 255, 255, 0.5); } .rh-focus-banner .page-head__rh-trio-link { color: #fff; } .rh-focus-banner .page-head__rh-trio-link:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; } .rh-focus-banner .page-head__rh-trio-sep { color: rgba(255, 255, 255, 0.5); } @media (min-width: 640px) { .rh-focus-banner .page-head__rh-trio-nav { border-right-color: rgba(255, 255, 255, 0.28); padding-right: 1.35rem; } } @media (min-width: 960px) { .rh-focus-banner { left: 16.25rem; top: 0; /* Au-dessus du défilement du main ; le menu gauche reste au-dessus (3000) si besoin */ z-index: 2600; } } @media (max-width: 959.98px) { .rh-focus-banner { left: 0; top: var(--rh-focus-mobile-bar-h); } } .rh-focus-banner__inner { width: 100%; max-width: var(--layout-max-width); margin: 0 auto; padding: 0.45rem 1.25rem; box-sizing: border-box; min-height: 3.2rem; /* Par défaut (<1024px) : pile verticale lisible, pas de chevauchement grille / sélecteur */ display: flex; flex-direction: column; align-items: stretch; gap: 0.4rem 0.65rem; } .rh-focus-banner__start { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.4rem 0.65rem; min-width: 0; width: 100%; } .rh-focus-banner__balance { display: none; min-width: 0; } .rh-focus-banner__back.wikyx-back-to-dashboard { min-width: 2.5rem; min-height: 2.5rem; padding: 0.2rem 0.35rem; font-size: 1.6rem; border-radius: 10px; flex-shrink: 0; } .rh-focus-banner .rh-focus-banner__start .page-head__rh-trio-nav { /* Occupe l’espace après la flèche retour ; défile si les libellés sont longs */ flex: 1 1 0%; min-width: 0; justify-content: flex-start; align-self: center; flex-wrap: nowrap; gap: 0.45rem 1.5rem; overflow-x: auto; overflow-y: hidden; max-width: 100%; scrollbar-width: thin; -webkit-overflow-scrolling: touch; } /* Séparation visuelle entre liens (ligne 1) et périmètre salarié (ligne 2) — Documents / Temps / Congés Sous 1024px, le sélecteur est affiché en premier (gauche / haut) : ordre flex + trait sous la liste. */ @media (max-width: 1023.98px) { .rh-focus-banner .page-head__collab-picker { order: -1; border-top: none; padding-top: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.22); padding-bottom: 0.2rem; margin-top: 0; margin-bottom: 0; } .rh-focus-banner .page-head__rh-trio-nav { border-right: none; padding-right: 0; margin-right: 0; } } .rh-focus-banner .page-head__collab-picker { justify-self: stretch; width: 100%; max-width: none; min-width: 0; margin-left: 0; margin-right: 0; border-left: none; padding-left: 0; /* Ne pas hériter de .page-head__collab-picker { flex: 1 1 14rem } — sinon la zone s’allonge en hauteur dans la colonne */ flex: 0 0 auto; align-self: stretch; display: block; padding-top: 0; padding-bottom: 0; line-height: 0; } /* Liste déroulante salarié : même rendu sur Documents, Temps, Congés */ .rh-focus-banner .page-head__collab-picker .rh-focus-banner__collab-form { margin: 0; display: block; width: 100%; min-width: 0; line-height: 0; } .rh-focus-banner .page-head__collab-picker .rh-focus-banner__collab-form select.rh-focus-banner__collab-select { width: 100%; max-width: none; min-width: 0; min-height: 0; padding: 0.35rem 2.25rem 0.35rem 0.85rem; font-family: inherit; font-size: var(--page-head-collab-size); font-weight: var(--page-head-collab-weight); letter-spacing: var(--page-head-collab-tracking); line-height: 1.15; vertical-align: middle; border-radius: var(--radius); border: 1px solid var(--border-strong); background-color: var(--bg-elevated); color: var(--text); box-shadow: var(--shadow); cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.65rem center; background-size: 1rem; } .rh-focus-banner .page-head__collab-picker .rh-focus-banner__collab-form select.rh-focus-banner__collab-select:hover { border-color: var(--accent); } .rh-focus-banner .page-head__collab-picker .rh-focus-banner__collab-form select.rh-focus-banner__collab-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18); } /* Signature : destinataire fixe (pas de liste déroulante dans la bannière) */ .rh-focus-banner .rh-focus-banner__collab-static { margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.1rem; min-width: 0; width: 100%; padding: 0.15rem 0.35rem; box-sizing: border-box; } .rh-focus-banner .rh-focus-banner__collab-static-label { font-size: 0.72rem; font-weight: 500; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.88); } .rh-focus-banner .rh-focus-banner__collab-static-name { font-size: var(--page-head-collab-size); font-weight: var(--page-head-collab-weight); letter-spacing: var(--page-head-collab-tracking); line-height: var(--page-head-collab-leading); color: #fff; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Tablette / mobile : bandeau RH plus bas (trio + liste ne mangent pas l’écran) */ @media (max-width: 1023.98px) { .rh-focus-banner { --page-head-collab-size: clamp(0.8125rem, 2.2vw, 0.9rem); --page-head-collab-leading: 1.12; --page-head-collab-weight: 600; } .rh-focus-banner__inner { gap: 0.22rem 0.45rem; min-height: 0; padding: 0.28rem 0.75rem; } .rh-focus-banner__back.wikyx-back-to-dashboard { min-width: 2.15rem; min-height: 2.15rem; font-size: 1.35rem; } .rh-focus-banner .rh-focus-banner__start .page-head__rh-trio-nav { gap: 0.35rem 1.1rem; } .rh-focus-banner .page-head__rh-trio-link { min-height: 0; padding: 0.2rem 0.5rem; margin: 0; font-size: 0.72rem; font-weight: 600; line-height: 1.2; } .rh-focus-banner .page-head__rh-trio-sep { line-height: 1; } .rh-focus-banner .page-head__collab-picker .rh-focus-banner__collab-form select.rh-focus-banner__collab-select { padding: 0.18rem 1.45rem 0.18rem 0.45rem; line-height: 1.12; font-weight: 600; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06); background-position: right 0.38rem center; background-size: 0.75rem; } .rh-focus-banner .page-head__collab-picker .rh-focus-banner__collab-form select.rh-focus-banner__collab-select:focus { box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2); } .rh-focus-page-head { gap: 0.45rem; margin: 0 0 0.85rem; } .rh-focus-page-head__title.page-head__title-h1, .rh-focus-page-head .rh-focus-page-head__title { font-size: clamp(1.05rem, 4vw, 1.45rem); line-height: 1.15; } } @media (max-width: 767.98px) { .rh-focus-banner { --page-head-collab-size: max(13px, min(0.875rem, 3.4vw)); --page-head-collab-leading: 1.1; } .rh-focus-banner__inner { gap: 0.18rem 0.4rem; padding: 0.22rem 0.65rem; } .rh-focus-banner .page-head__collab-picker { padding-top: 0.15rem; } .rh-focus-banner .page-head__collab-picker .rh-focus-banner__collab-form select.rh-focus-banner__collab-select { padding: 0.14rem 1.35rem 0.14rem 0.42rem; } .rh-focus-banner .page-head__rh-trio-link { font-size: 0.68rem; padding: 0.14rem 0.45rem; } .rh-focus-banner .rh-focus-banner__start .page-head__rh-trio-nav { gap: 0.28rem 0.85rem; } } /* Grand écran : une seule ligne — sélecteur à gauche, trio occupe toute la largeur restante */ @media (min-width: 1024px) { .rh-focus-banner__inner { display: grid; grid-template-columns: minmax(12rem, min(28rem, 34vw)) minmax(0, 1fr); grid-template-areas: 'picker start'; align-items: center; column-gap: 1.25rem; row-gap: 0; padding: 0.5rem 1.5rem; min-height: 3.35rem; } .rh-focus-banner__start { grid-area: start; flex-wrap: nowrap; justify-self: stretch; align-self: center; width: 100%; max-width: none; min-width: 0; } .rh-focus-banner__balance { display: none; } .rh-focus-banner .page-head__collab-picker { grid-area: picker; justify-self: stretch; width: 100%; max-width: 100%; min-width: 0; border-top: none; padding-top: 0; margin-top: 0; line-height: normal; } .rh-focus-banner .rh-focus-banner__start .page-head__rh-trio-nav { width: 100%; min-width: 0; flex: 1 1 auto; max-width: none; justify-content: flex-start; } } /* ——— Espace collaborateur : bannière haute fixe (hauteur propre, sans barre burger RH) ——— */ main.container.rh-main.rh-main--emp-focus-banner { padding-top: var(--emp-focus-banner-reserve); } .emp-focus-banner { position: fixed; z-index: 400; right: 0; font-family: var(--font); background: #ecfdf5; border-bottom: 1px solid #6ee7b7; box-shadow: var(--shadow); box-sizing: border-box; } @media (min-width: 960px) { .emp-focus-banner { left: 0; right: 0; top: 0; z-index: 2600; } } @media (max-width: 959.98px) { .emp-focus-banner { left: 0; top: 0; } } .emp-focus-banner__inner { width: 100%; max-width: var(--layout-max-width); margin: 0 auto; padding: 0.45rem 1.25rem; box-sizing: border-box; min-height: 3.25rem; align-items: center; column-gap: 0.65rem; row-gap: 0.45rem; } /* Grille : logo | (retour) | navigation scrollable | actions — sans chevauchement flex */ .emp-focus-banner__inner:not(:has(.emp-focus-banner__back)) { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; } .emp-focus-banner__inner:has(.emp-focus-banner__back) { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; } .emp-focus-banner__brand-wrap { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; flex-shrink: 0; min-width: 0; margin-right: 0.15rem; gap: 0.1rem; } .emp-focus-banner__brand { display: inline-flex; align-items: center; flex-shrink: 0; text-decoration: none; color: inherit; } .emp-focus-banner__entreprise { margin: 0; padding: 0; max-width: 14rem; font-size: 0.72rem; font-weight: 600; line-height: 1.25; color: #047857; word-break: break-word; } .emp-focus-banner__brand:hover .emp-focus-banner__logo-img { opacity: 0.88; } .emp-focus-banner__logo-img { display: block; width: 28px; height: 28px; object-fit: contain; border-radius: 6px; flex-shrink: 0; } .emp-focus-banner__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.35rem 0.65rem; flex-shrink: 0; margin-left: 0; justify-self: end; } .emp-focus-banner__user-link { font-size: 0.85rem; font-weight: 500; text-decoration: none; max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .emp-focus-banner__user-link:hover { color: var(--text); text-decoration: underline; } .emp-focus-banner__logout { font-size: 0.85rem; padding: 0.35rem 0.65rem; white-space: nowrap; color: var(--danger) !important; border-color: #fecaca !important; } .emp-focus-banner__logout:hover { color: #b91c1c !important; background: var(--danger-soft) !important; border-color: #fca5a5 !important; } .emp-focus-banner__back.wikyx-back-to-dashboard { flex-shrink: 0; min-width: 2.5rem; min-height: 2.5rem; padding: 0.2rem 0.35rem; font-size: 1.6rem; border-radius: 10px; text-decoration: none; color: var(--text); line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .emp-focus-banner__back.wikyx-back-to-dashboard:hover { background: rgba(16, 185, 129, 0.14); } .emp-focus-banner__nav { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.25rem 0.35rem; min-width: 0; justify-self: stretch; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } /* Mobile : menu hamburger + panneau (navigation hors bandeau) */ .emp-focus-banner__menu-toggle { display: none; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; margin: 0; padding: 0; border: 1px solid #6ee7b7; border-radius: 10px; background: rgba(255, 255, 255, 0.65); color: #047857; cursor: pointer; flex-shrink: 0; justify-self: end; transition: background 0.15s ease, border-color 0.15s ease; } .emp-focus-banner__menu-toggle:hover { background: rgba(16, 185, 129, 0.18); border-color: #34d399; } .emp-focus-banner__menu-toggle:focus-visible { outline: 2px solid #047857; outline-offset: 2px; } .emp-focus-banner__menu-bars, .emp-focus-banner__menu-bars::before, .emp-focus-banner__menu-bars::after { display: block; width: 1.15rem; height: 2px; border-radius: 1px; background: currentColor; position: relative; transition: transform 0.2s ease, opacity 0.2s ease; } .emp-focus-banner__menu-bars::before, .emp-focus-banner__menu-bars::after { content: ""; position: absolute; left: 0; } .emp-focus-banner__menu-bars::before { top: -6px; } .emp-focus-banner__menu-bars::after { top: 6px; } .emp-focus-banner--nav-open .emp-focus-banner__menu-bars { background: transparent; } .emp-focus-banner--nav-open .emp-focus-banner__menu-bars::before { top: 0; transform: rotate(45deg); } .emp-focus-banner--nav-open .emp-focus-banner__menu-bars::after { top: 0; transform: rotate(-45deg); } .emp-focus-banner__backdrop { position: fixed; inset: 0; z-index: 1; margin: 0; padding: 0; border: 0; background: rgba(15, 23, 42, 0.35); cursor: pointer; } .emp-focus-banner__backdrop[hidden] { display: none !important; } @media (max-width: 767.98px) { .emp-focus-banner { position: fixed; z-index: 400; } .emp-focus-banner__entreprise { display: none; } .emp-focus-banner__inner { position: relative; z-index: 2; grid-template-columns: minmax(0, 1fr) auto auto !important; grid-template-rows: auto !important; row-gap: 0.35rem; } .emp-focus-banner__inner:not(:has(.emp-focus-banner__back)) .emp-focus-banner__brand-wrap { grid-column: 1; grid-row: 1; min-width: 0; } .emp-focus-banner__inner:not(:has(.emp-focus-banner__back)) .emp-focus-banner__menu-toggle { display: inline-flex; grid-column: 2; grid-row: 1; } .emp-focus-banner__inner:not(:has(.emp-focus-banner__back)) .emp-focus-banner__actions { grid-column: 3; grid-row: 1; } .emp-focus-banner__inner:not(:has(.emp-focus-banner__back)) .emp-focus-banner__nav { display: none; position: absolute; top: calc(100% + 0.35rem); left: 0; right: 0; z-index: 3; flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 0; margin: 0; padding: 0.35rem 0; overflow: visible; background: #ecfdf5; border: 1px solid #6ee7b7; border-radius: 12px; box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12); font-size: 0.95rem; text-transform: none; letter-spacing: normal; } .emp-focus-banner--nav-open .emp-focus-banner__inner:not(:has(.emp-focus-banner__back)) .emp-focus-banner__nav { display: flex; } .emp-focus-banner__inner:has(.emp-focus-banner__back) { grid-template-columns: auto auto auto auto !important; grid-template-rows: auto !important; } .emp-focus-banner__inner:has(.emp-focus-banner__back) .emp-focus-banner__brand-wrap { grid-column: 1; grid-row: 1; max-width: min(12rem, 42vw); } .emp-focus-banner__inner:has(.emp-focus-banner__back) .emp-focus-banner__back { grid-column: 2; grid-row: 1; justify-self: center; } .emp-focus-banner__inner:has(.emp-focus-banner__back) .emp-focus-banner__menu-toggle { display: inline-flex; grid-column: 3; grid-row: 1; } .emp-focus-banner__inner:has(.emp-focus-banner__back) .emp-focus-banner__actions { grid-column: 4; grid-row: 1; min-width: 0; } .emp-focus-banner__inner:has(.emp-focus-banner__back) .emp-focus-banner__nav { display: none; position: absolute; top: calc(100% + 0.35rem); left: 0; right: 0; z-index: 3; flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 0; margin: 0; padding: 0.35rem 0; overflow: visible; background: #ecfdf5; border: 1px solid #6ee7b7; border-radius: 12px; box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12); font-size: 0.95rem; text-transform: none; letter-spacing: normal; } .emp-focus-banner--nav-open .emp-focus-banner__inner:has(.emp-focus-banner__back) .emp-focus-banner__nav { display: flex; } .emp-focus-banner__inner .emp-focus-banner__sep { display: none; } .emp-focus-banner__inner .emp-focus-banner__nav-link { white-space: normal; padding: 0.65rem 1rem; border-radius: 0; font-weight: 600; border-top: 1px solid rgba(110, 231, 183, 0.55); text-align: center; } .emp-focus-banner__inner .emp-focus-banner__nav-link:first-of-type { border-top: none; } body.emp-focus-banner-nav-open { overflow: hidden; } } @media (min-width: 768px) { .emp-focus-banner__backdrop { display: none !important; } .emp-focus-banner__nav { justify-content: center; } } .emp-focus-banner__sep { color: #6ee7b7; flex-shrink: 0; user-select: none; } .emp-focus-banner__nav-link { flex-shrink: 0; text-decoration: none; color: var(--muted); padding: 0.35rem 0.5rem; border-radius: 8px; white-space: nowrap; } .emp-focus-banner__nav-link:hover { color: var(--text); background: rgba(16, 185, 129, 0.14); } .emp-focus-banner__nav-link.is-active { color: #047857; background: rgba(16, 185, 129, 0.15); font-weight: 700; } /* Tuto visible en permanence sur mobile (bandeau), masqué sur grand écran */ .emp-focus-banner__tuto-bar { display: none; flex-shrink: 0; font-size: 0.8rem; font-weight: 700; padding: 0.35rem 0.55rem; border-radius: 8px; white-space: nowrap; } @media (max-width: 767.98px) { .emp-focus-banner__tuto-bar { display: inline-flex; align-items: center; } .emp-focus-banner__backdrop { z-index: 1; } .emp-focus-banner__inner { z-index: 2; } .emp-focus-banner__inner:has(.emp-focus-banner__back) .emp-focus-banner__actions { flex-wrap: nowrap; gap: 0.25rem 0.35rem; } .emp-focus-banner__user-link { max-width: 5.5rem; font-size: 0.78rem; } .emp-focus-banner__logout { font-size: 0.78rem; padding: 0.3rem 0.45rem; } } /* Mon temps de travail : titre + liens d’action sous le bandeau (liens à droite) */ .emp-time-history-head { margin: 0 0 0.75rem; } .emp-time-history-head__row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem 1.25rem; } .emp-time-history-head__text { flex: 1 1 14rem; min-width: 0; } .emp-time-history-head__text h1 { margin: 0; } .emp-time-history-head__text .muted { margin: 0.35rem 0 0; } .emp-time-history-head__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem 0.65rem; flex: 0 1 auto; max-width: 100%; } .emp-time-history-head__actions .btn { text-align: center; line-height: 1.3; white-space: normal; max-width: 100%; } .emp-time-history-head__note { width: 100%; margin: 0.5rem 0 0; font-size: 0.9rem; } @media (min-width: 960px) { main.container.rh-main--emp-focus-banner .page-head { position: sticky; top: var(--emp-focus-banner-reserve); z-index: 2500; background: var(--bg); box-shadow: 0 1px 0 var(--border); padding-top: 0.35rem; padding-bottom: 0.65rem; margin-top: -0.15rem; margin-bottom: 1rem; } } .rh-focus-page-head { display: flex; flex-direction: column; align-items: stretch; gap: 0.75rem; margin: 0 0 1.25rem; } .rh-focus-page-head__title.page-head__title-h1, .rh-focus-page-head .rh-focus-page-head__title { margin: 0; padding: 0; font-size: clamp(1.35rem, 2.2vw, 1.85rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--text); flex: 0 0 auto; } /* Colonne : évite tout chevauchement entre boutons (libellés RH très longs) */ .rh-focus-page-head__actions { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0.75rem; justify-content: flex-start; align-items: stretch; width: 100%; min-width: 0; } /* * Les .btn sont en inline-block : en flex row plusieurs boutons peuvent encore se chevaucher * si la ligne est trop courte. On les « blockifie » en flex + pleine largeur + texte multiligne. */ .rh-focus-page-head__actions > .btn, .rh-focus-page-head__actions > button.btn, main.container.rh-main--focus-banner .rh-focus-page-head__actions > .btn, main.container.rh-main--focus-banner .rh-focus-page-head__actions > button.btn { display: flex; align-items: center; justify-content: center; flex: none; width: 100%; max-width: 100%; min-width: 0; margin: 0; box-sizing: border-box; font-weight: 700 !important; white-space: normal !important; text-align: center; line-height: 1.35; overflow-wrap: anywhere; word-break: normal; hyphens: auto; } /* Planning congés (RH) : titre + bouton « Forcer les C.P. » alignés sur une seule ligne */ .rh-focus-page-head.rh-focus-page-head--inline { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 0.75rem 1rem; } .rh-focus-page-head.rh-focus-page-head--inline .rh-focus-page-head__title { flex: 1 1 auto; min-width: 0; } .rh-focus-page-head.rh-focus-page-head--inline .rh-focus-page-head__actions { flex: 0 0 auto; width: auto; flex-direction: row; align-items: center; justify-content: flex-end; margin-left: auto; } .rh-focus-page-head.rh-focus-page-head--inline .rh-focus-page-head__actions > .btn, main.container.rh-main--focus-banner .rh-focus-page-head.rh-focus-page-head--inline .rh-focus-page-head__actions > .btn { width: auto; flex: 0 0 auto; padding: 0.55rem 1.05rem; white-space: nowrap; } /* Bouton bleu « Forcer les C.P. » : restaure l’accent malgré l’override gris ci-dessus */ .rh-focus-page-head__actions > .btn-primary.leave-planning-force-cp-btn, main.container.rh-main--focus-banner .rh-focus-page-head__actions > .btn-primary.leave-planning-force-cp-btn, .rh-focus-page-head__actions > .btn-primary.employee-leaves-new-request-btn, main.container.rh-main--focus-banner .rh-focus-page-head__actions > .btn-primary.employee-leaves-new-request-btn { background: var(--accent) !important; color: #ffffff !important; border: 1px solid var(--accent) !important; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08); width: auto !important; flex: 0 0 auto !important; margin-left: auto; padding: 0.55rem 1.05rem; white-space: nowrap !important; } .rh-focus-page-head__actions > .btn-primary.leave-planning-force-cp-btn:hover, main.container.rh-main--focus-banner .rh-focus-page-head__actions > .btn-primary.leave-planning-force-cp-btn:hover, .rh-focus-page-head__actions > .btn-primary.employee-leaves-new-request-btn:hover, main.container.rh-main--focus-banner .rh-focus-page-head__actions > .btn-primary.employee-leaves-new-request-btn:hover { background: var(--accent-hover) !important; color: #ffffff !important; border-color: var(--accent-hover) !important; } @media (max-width: 640px) { .rh-focus-page-head.rh-focus-page-head--inline { flex-direction: column; align-items: stretch; } .rh-focus-page-head.rh-focus-page-head--inline .rh-focus-page-head__actions { width: 100%; margin-left: 0; justify-content: stretch; } .rh-focus-page-head.rh-focus-page-head--inline .rh-focus-page-head__actions > .btn { width: 100%; } } /* Grands écrans : plusieurs boutons sur une ligne seulement s’il reste assez de place */ @media (min-width: 75rem) { .rh-focus-page-head__actions { flex-direction: row; flex-wrap: wrap; gap: 0.75rem 1rem; } .rh-focus-page-head__actions > .btn, .rh-focus-page-head__actions > button.btn, main.container.rh-main--focus-banner .rh-focus-page-head__actions > .btn, main.container.rh-main--focus-banner .rh-focus-page-head__actions > button.btn { width: auto; flex: 1 1 16rem; max-width: calc(100% - 0.25rem); min-width: min(100%, 11rem); } } @media (min-width: 960px) { /* Titre + actions : restent visibles sous la bannière bleue au scroll */ main.container.rh-main--focus-banner .rh-focus-page-head { position: sticky; top: var(--rh-focus-banner-reserve); z-index: 2500; background: var(--bg); box-shadow: 0 1px 0 var(--border); padding-top: 0.35rem; padding-bottom: 0.65rem; margin-top: -0.15rem; margin-bottom: 1rem; } } /* Dev local : aperçu des e-mails simulés (MAIL_DEV_POPUP) */ .wikyx-mail-dev-dlg { padding: 0; border: none; border-radius: 12px; max-width: min(42rem, calc(100vw - 1.5rem)); width: 100%; background: var(--bg-elevated, #fff); color: var(--text); box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.35); } .wikyx-mail-dev-dlg--multi { max-width: min(52rem, calc(100vw - 1.5rem)); } .wikyx-mail-dev-dlg::backdrop { background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(2px); } .wikyx-mail-dev-dlg__inner { padding: 1rem 1.15rem 1.1rem; display: flex; flex-direction: column; gap: 0.65rem; max-height: min(90vh, 48rem); min-height: 0; box-sizing: border-box; } .wikyx-mail-dev-dlg__scroll { overflow-y: auto; flex: 1 1 auto; min-height: 0; max-height: min(72vh, 38rem); display: flex; flex-direction: column; gap: 1rem; padding: 0.15rem 0.35rem 0.35rem 0; } .wikyx-mail-dev-dlg__msg { border: 1px solid var(--border, #e2e8f0); border-radius: 10px; padding: 0.75rem 0.85rem; background: var(--bg, #f8fafc); flex-shrink: 0; } .wikyx-mail-dev-dlg__msg-title { margin: 0 0 0.4rem; font-size: 0.95rem; font-weight: 600; color: var(--text, #0f172a); } .wikyx-mail-dev-dlg__details { margin-top: 0.45rem; } .wikyx-mail-dev-dlg__summary { cursor: pointer; font-size: 0.85rem; font-weight: 600; padding: 0.2rem 0; } .wikyx-mail-dev-dlg__pre--msg { max-height: min(28vh, 12rem); margin-top: 0.35rem; } .wikyx-mail-dev-dlg__iframe--msg { margin-top: 0.35rem; max-height: min(32vh, 14rem); min-height: 8rem; } .wikyx-mail-dev-dlg__title { margin: 0; font-size: 1.1rem; font-weight: 600; } .wikyx-mail-dev-dlg__meta { margin: 0; font-size: 0.8rem; } .wikyx-mail-dev-dlg__to, .wikyx-mail-dev-dlg__subj { margin: 0; font-size: 0.9rem; line-height: 1.45; word-break: break-word; } .wikyx-mail-dev-dlg__tabs { display: flex; gap: 0.35rem; flex-wrap: wrap; } .wikyx-mail-dev-dlg__tab { padding: 0.35rem 0.65rem; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--bg); font-size: 0.85rem; cursor: pointer; font-family: inherit; } .wikyx-mail-dev-dlg__tab.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; } .wikyx-mail-dev-dlg__pane { min-height: 12rem; flex: 1; min-width: 0; display: flex; flex-direction: column; } .wikyx-mail-dev-dlg__pane.is-hidden { display: none !important; } .wikyx-mail-dev-dlg__pre { margin: 0; padding: 0.65rem 0.75rem; font-size: 0.78rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word; background: #f1f5f9; border: 1px solid var(--border); border-radius: 8px; overflow: auto; flex: 1; max-height: min(38vh, 16rem); } .wikyx-mail-dev-dlg__iframe { width: 100%; flex: 1; min-height: 14rem; max-height: min(42vh, 18rem); border: 1px solid var(--border); border-radius: 8px; background: #fff; } .wikyx-mail-dev-dlg__foot { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; padding-top: 0.35rem; border-top: 1px solid var(--border); margin-top: 0.15rem; } /* Collaborateur : menu vertical à gauche (même gabarit que RH), palette verte */ .rh-layout--employee .rh-sidebar { background: #ecfdf5; border-right-color: #6ee7b7; } .rh-layout--employee .rh-sidebar-brand-block { border-bottom-color: #6ee7b7; } .rh-layout--employee .rh-sidebar-user { border-top-color: #6ee7b7; } .rh-layout--employee .rh-sidebar-nav > a:hover { color: var(--text); background: rgba(16, 185, 129, 0.14); } .rh-layout--employee .rh-sidebar-nav > a.active { color: #047857; background: rgba(16, 185, 129, 0.15); font-weight: 700; } .rh-layout--employee .rh-mobile-bar--employee { background: #ecfdf5; border-bottom-color: #6ee7b7; } .rh-sidebar-backdrop { display: none; position: fixed; inset: 0; z-index: 150; margin: 0; padding: 0; border: none; background: rgba(15, 23, 42, 0.45); cursor: pointer; -webkit-tap-highlight-color: transparent; } .rh-layout.rh-sidebar-open .rh-sidebar-backdrop { display: block; } .topbar-employee { justify-content: space-between; position: relative; z-index: 3000; } /* Menu hamburger (RH + collaborateur) */ .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; margin-left: auto; padding: 0.35rem 0.5rem; border-radius: 8px; border: 1px solid transparent; background: transparent; cursor: pointer; } .nav-toggle-bar { width: 20px; height: 2px; border-radius: 999px; background: var(--text); } /* Par défaut (mobile d'abord) : nav collaborateur masqué, ouvert via le hamburger */ .topbar-employee .nav-main { display: none; width: 100%; margin-top: 0.5rem; flex-direction: column; } .topbar-employee .nav-main a { width: 100%; } .topbar-employee .nav-main.nav-main-open { display: flex; } .topbar-employee .topbar-user { margin-left: 0; margin-top: 0.5rem; } /* Sur les écrans larges, on revient au menu horizontal classique et on masque le hamburger */ @media (min-width: 960px) { .nav-toggle { display: none; } .topbar-employee { align-items: center; } .topbar-employee .nav-main { display: flex; width: auto; margin-top: 0; flex-direction: row; } .topbar-employee .nav-main a { width: auto; } .topbar-employee .topbar-user { margin-top: 0; margin-left: auto; } } /* RH : drawer sur mobile */ @media (max-width: 959.98px) { .rh-layout .rh-sidebar { position: fixed; left: 0; top: 0; z-index: 450; height: 100%; max-height: 100dvh; transform: translateX(-100%); transition: transform 0.22s ease; } .rh-layout.rh-sidebar-open .rh-sidebar { transform: translateX(0); } .rh-mobile-bar { display: flex; } .rh-layout.rh-sidebar-open .rh-sidebar-backdrop { display: block; } body.rh-sidebar-open-body { overflow: hidden; } } @media (min-width: 960px) { /* Bande gauche sur toute la hauteur du bloc RH (au-delà du viewport) ; le menu reste sticky */ .rh-layout { background: linear-gradient( 90deg, #e0edff 0, #e0edff calc(16.25rem - 1px), #c4d5ff calc(16.25rem - 1px), #c4d5ff 16.25rem, var(--bg) 16.25rem, var(--bg) 100% ); } .rh-layout--employee { background: linear-gradient( 90deg, #ecfdf5 0, #ecfdf5 calc(16.25rem - 1px), #6ee7b7 calc(16.25rem - 1px), #6ee7b7 16.25rem, var(--bg) 16.25rem, var(--bg) 100% ); } .rh-layout .rh-sidebar-backdrop { display: none !important; } .rh-mobile-bar { display: none !important; } /* Menu gauche fixe dans la fenêtre : ne défile pas avec la page (la nav peut défiler en interne si beaucoup de liens) */ .rh-layout .rh-sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 16.25rem; max-height: none; min-height: 100vh; min-height: 100dvh; height: auto; align-self: stretch; transform: none !important; } .rh-layout .rh-main-column { margin-left: 16.25rem; width: auto; flex: 1 1 auto; min-width: 0; } /* Collaborateur : pas de menu latéral — pleine largeur */ .rh-layout--employee-no-sidebar .rh-main-column { margin-left: 0; } } /* Collaborateur — panneau latéral « Nouveau document » (employee_documents) Au-dessus de .emp-focus-banner (z-index 2600 sur grand écran), sinon le formulaire passe sous la bannière. */ .wikyx-emp-doc-upload-backdrop { position: fixed; inset: 0; z-index: 2650; margin: 0; padding: 0; border: 0; background: rgba(15, 23, 42, 0.4); cursor: pointer; } .wikyx-emp-doc-upload-backdrop[hidden] { display: none !important; } .wikyx-emp-doc-upload-panel { position: fixed; top: var(--emp-focus-banner-reserve); right: 0; bottom: 0; z-index: 2700; width: min(100%, 26rem); max-width: 100%; display: flex; flex-direction: column; box-sizing: border-box; background: var(--bg-elevated, #fff); border-left: 1px solid var(--border, #e2e8f0); box-shadow: -6px 0 28px rgba(15, 23, 42, 0.12); overflow: hidden; } .wikyx-emp-doc-upload-panel[hidden] { display: none !important; } .wikyx-emp-doc-upload-panel-head { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.85rem 1rem; border-bottom: 1px solid var(--border, #e2e8f0); background: var(--bg-subtle, #f8fafc); } .wikyx-emp-doc-upload-panel-body { flex: 1; min-height: 0; overflow: auto; padding: 1.25rem 1rem 1.25rem; -webkit-overflow-scrolling: touch; } /* Collaborateur — dépôt de justificatif directement depuis la demande d'arrêt maladie */ .employee-leave-doc-frame { max-width: 42rem; margin: 0 0 1.25rem; padding: 1rem 1.25rem; border: 1px solid #fecdd3; border-radius: var(--radius); background: #fff1f2; box-shadow: var(--shadow); } .employee-leave-doc-frame__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.85rem; } .employee-leave-doc-frame__head h2 { margin: 0; font-size: 1rem; color: #881337; } .employee-leave-doc-frame__head span { flex: 0 0 auto; padding: 0.22rem 0.55rem; border-radius: 999px; background: #ffe4e6; color: #9f1239; font-size: 0.78rem; font-weight: 700; } .employee-leave-doc-frame__form { display: grid; gap: 0.85rem; } .employee-leave-flow-card { max-width: 42rem; margin: 0 0 1.25rem; padding: 1rem 1.25rem; border: 1px solid var(--border, #e2e8f0); border-radius: var(--radius); background: var(--bg-elevated, #fff); box-shadow: var(--shadow); } .employee-leave-flow-card h2 { margin: 0 0 0.85rem; font-size: 1rem; } .employee-leave-flow-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.2rem, 1fr)); gap: 0.75rem; } .employee-leave-chooser { max-width: 42rem; margin: 0 0 1.25rem; padding: 1rem 1.25rem; border: 1px solid var(--border, #e2e8f0); border-radius: var(--radius); background: var(--bg-elevated, #fff); box-shadow: var(--shadow); } .employee-leave-chooser__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(13rem, 18rem); gap: 1rem; align-items: end; margin-bottom: 0.9rem; } .employee-leave-chooser__head h2 { margin: 0; font-size: 1.05rem; } .employee-leave-chooser__select { margin: 0; } .employee-leave-type-card { display: flex; flex-direction: column; gap: 0.35rem; min-height: 7rem; padding: 0.8rem; border: 1px solid var(--border, #e2e8f0); border-radius: 8px; background: var(--bg-subtle, #f8fafc); color: var(--text, #0f172a); text-align: left; cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } .employee-leave-type-card:hover, .employee-leave-type-card--active { transform: translateY(-1px); box-shadow: var(--shadow); } .employee-leave-type-card--active { border-color: var(--accent, #2563eb); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16); } .employee-leave-type-card strong { display: block; font-size: 0.9rem; } .employee-leave-type-card span { color: var(--muted, #64748b); font-size: 0.8rem; line-height: 1.35; } .employee-leave-type-card--paid { background: #eff6ff; } .employee-leave-type-card--unpaid { background: #fff7ed; } .employee-leave-type-card--child { background: #f0fdf4; } .employee-leave-type-card--sick { background: #fff1f2; } .employee-leave-type-card--pregnancy { background: #fdf2f8; } .employee-leave-flow-grid div { padding: 0.75rem; border: 1px solid var(--border, #e2e8f0); border-radius: 8px; background: var(--bg-subtle, #f8fafc); } .employee-leave-flow-grid strong { display: block; margin-bottom: 0.35rem; font-size: 0.88rem; } .employee-leave-flow-grid p { margin: 0; color: var(--muted, #64748b); font-size: 0.82rem; line-height: 1.4; } .employee-leave-workflow-note { padding: 0.75rem 0.9rem; border: 1px solid var(--border, #e2e8f0); border-radius: 8px; background: var(--bg-subtle, #f8fafc); color: var(--text, #0f172a); font-size: 0.9rem; line-height: 1.45; } .employee-leave-workflow-note--pending { border-color: #bfdbfe; background: #eff6ff; } .employee-leave-workflow-note--auto { border-color: #bbf7d0; background: #f0fdf4; } .employee-leave-workflow-note--doc { border-color: #fecdd3; background: #fff1f2; } @media (max-width: 720px) { .employee-leave-flow-grid { grid-template-columns: 1fr; } .employee-leave-chooser__head { grid-template-columns: 1fr; } } /* Accueil collaborateur : pointage Photo / QR */ .employee-pointage-promo { margin-top: 1rem; margin-bottom: 0.5rem; padding: 1.1rem 1.35rem; border-radius: var(--radius); border: 1px solid #6ee7b7; background: linear-gradient(145deg, #ecfdf5 0%, #d1fae5 55%, #a7f3d0 100%); box-shadow: var(--shadow-md); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; } .employee-pointage-promo p { margin: 0; flex: 1; min-width: 14rem; font-size: 1rem; line-height: 1.45; color: var(--text); } .employee-pointage-promo .btn-primary { font-weight: 600; font-size: 1rem; padding: 0.65rem 1.35rem; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35); white-space: nowrap; } /* Accueil collaborateur : pavés d’accès rapide */ .emp-dash-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 14rem)); justify-content: center; gap: 1.15rem 1.25rem; margin: 0 auto 1.35rem; max-width: 100%; width: 100%; } .emp-dash-tile { display: flex; flex-direction: column; gap: 0.3rem; padding: 1.1rem 1rem; border-radius: var(--radius); border: 1px solid #cbd5e1; background: linear-gradient(160deg, #f8fafc 0%, #f1f5f9 100%); text-decoration: none; color: var(--text); box-shadow: var(--shadow); transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease; min-height: 4.75rem; box-sizing: border-box; } .emp-dash-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } /* Pavés : une teinte par tuile */ .emp-dash-tile--documents { border-color: #93c5fd; background: linear-gradient(160deg, #eff6ff 0%, #dbeafe 45%, #bfdbfe 100%); } .emp-dash-tile--documents:hover { border-color: #3b82f6; } .emp-dash-tile--time { border-color: #5eead4; background: linear-gradient(160deg, #f0fdfa 0%, #ccfbf1 45%, #99f6e4 100%); } .emp-dash-tile--time:hover { border-color: #14b8a6; } .emp-dash-tile--leaves { border-color: #86efac; background: linear-gradient(160deg, #f0fdf4 0%, #dcfce7 45%, #bbf7d0 100%); } .emp-dash-tile--leaves:hover { border-color: #22c55e; } /* Pointage : aplats rose / vert (sans dégradé), proches des boutons photo */ .emp-dash-tile--pointage-entree { border-color: #f472b6; background: #f9a8d4; } .emp-dash-tile--pointage-entree:hover { border-color: #db2777; background: #fbcfe8; } .emp-dash-tile--pointage-sortie { border-color: #4ade80; background: #bbf7d0; } .emp-dash-tile--pointage-sortie:hover { border-color: #16a34a; background: #d9f99d; } .emp-dash-tile--pointage-any { border-color: #cbd5e1; background: #f1f5f9; } .emp-dash-tile--pointage-any:hover { border-color: #94a3b8; background: #e2e8f0; } .emp-dash-tile--documents.emp-dash-tile--alert { border-color: #f97316; background: linear-gradient(160deg, #fff7ed 0%, #ffedd5 50%, #fed7aa 100%); } .emp-dash-tile--documents.emp-dash-tile--alert:hover { border-color: #ea580c; } .emp-dash-tile__title { font-weight: 700; font-size: 1.08rem; letter-spacing: -0.02em; } .emp-dash-tile__hint { font-size: 0.82rem; color: var(--muted); line-height: 1.35; } .container { max-width: var(--layout-max-width); margin: 0 auto; padding: 1.5rem; } .footer { text-align: center; padding: 2rem 1rem; color: var(--muted); font-size: 0.875rem; } .muted { color: var(--muted); } h1 { font-size: 1.5rem; font-weight: 600; margin: 0 0 1rem; color: var(--text); letter-spacing: -0.02em; } h2 { font-size: 1.15rem; font-weight: 600; margin: 1.5rem 0 0.75rem; color: var(--text); } .btn { display: inline-block; padding: 0.5rem 1rem; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--bg-elevated); color: var(--text); font-size: 0.9rem; cursor: pointer; font-family: inherit; box-shadow: var(--shadow); } .btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: none; } .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; } .btn-ghost { background: transparent; box-shadow: none; } .btn-ghost:hover { background: var(--accent-soft); } .btn-logout { border-color: #dc2626; background: #dc2626; color: #ffffff; } .btn-logout:hover, .btn-ghost.btn-logout:hover { background: #ef4444; /* rouge légèrement plus clair au survol */ border-color: #ef4444; color: #ffffff; } .btn-icon-only { display: inline-flex; align-items: center; justify-content: center; padding: 0.45rem 0.55rem; line-height: 1; } .btn-icon-only svg { flex-shrink: 0; display: block; } .btn-danger { border-color: #fecaca; color: var(--danger); background: var(--bg-elevated); } .btn-danger:hover { background: var(--danger-soft); border-color: #fca5a5; color: #b91c1c; } /* Tableau de bord : liens TEMPS / ABSENCES / DOCUMENTS (pastels distincts) */ .btn-dashboard-temps { background: #dbeafe; border-color: #93c5fd; color: #1e40af; } .btn-dashboard-temps:hover { background: #bfdbfe; border-color: #60a5fa; color: #1d4ed8; } .btn-dashboard-absences { background: #ede9fe; border-color: #c4b5fd; color: #5b21b6; } .btn-dashboard-absences:hover { background: #ddd6fe; border-color: #a78bfa; color: #4c1d95; } .btn-dashboard-documents { background: #d1fae5; border-color: #6ee7b7; color: #047857; } .btn-dashboard-documents:hover { background: #a7f3d0; border-color: #34d399; color: #065f46; } .form-row { margin-bottom: 1rem; } .form-row label { display: block; font-size: 0.875rem; margin-bottom: 0.35rem; color: var(--text); font-weight: 500; } .wikyx-req-star { color: var(--danger, #dc2626); font-weight: 700; } .form-row input, .form-row select, .form-row textarea { width: 100%; max-width: 420px; padding: 0.55rem 0.75rem; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--bg-elevated); color: var(--text); font-family: inherit; font-size: 1rem; } .form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } .form-row textarea { min-height: 80px; max-width: 100%; } /* Documents RH : liste à valider + formulaire sur toute la largeur du conteneur */ .wikyx-documents-panel { max-width: none; width: 100%; box-sizing: border-box; } .wikyx-documents-panel .form-row input[type="text"], .wikyx-documents-panel .form-row input[type="file"], .wikyx-documents-panel .form-row select { max-width: 100%; } /* Champ mot de passe + bouton œil */ .form-row .password-wrap { position: relative; max-width: 420px; width: 100%; } .form-inscription .form-row .password-wrap, .form-grid-2 .password-wrap { max-width: none; } .password-wrap input { width: 100%; max-width: none; padding-right: 2.75rem; box-sizing: border-box; } .password-toggle { position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border: none; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; font-family: inherit; } .password-toggle:hover { color: var(--accent); background: var(--accent-soft); } .password-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .password-toggle-icon { display: flex; align-items: center; justify-content: center; } .password-wrap:not(.is-revealed) .password-toggle-hide { display: none; } .password-wrap.is-revealed .password-toggle-show { display: none; } .login-wrap { min-height: 70vh; display: flex; align-items: center; justify-content: center; padding: 2rem; } .login-card { width: 100%; max-width: 560px; padding: 2rem; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); } .login-card h1 { margin-top: 0; } .login-portal-title { margin-top: 0; margin-bottom: 0.5rem; font-size: 1.5rem; line-height: 1.25; } .login-portal-lead { margin: 0 0 1.25rem; font-size: 0.95rem; line-height: 1.45; color: var(--muted); } .login-portal-badge { display: inline-block; margin: 0 0 0.65rem; padding: 0.35rem 0.8rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 6px; line-height: 1.2; } .login-portal-badge--rh { background: linear-gradient(135deg, #1d4ed8, #2563eb); color: #fff; box-shadow: 0 2px 10px rgba(37, 99, 235, 0.35); } .login-portal-badge--employee { background: linear-gradient(135deg, #0f766e, #14b8a6); color: #fff; box-shadow: 0 2px 10px rgba(13, 148, 136, 0.35); } .login-wrap--rh, .login-wrap--employee { padding-top: 1.25rem; } .login-card--rh { border: 1px solid #bfdbfe; border-top: 5px solid #2563eb; box-shadow: 0 10px 32px rgba(37, 99, 235, 0.14); } .login-card--rh .login-portal-lead { color: #475569; } .login-card--rh .login-portal-title { color: #1e3a8a; } .login-card--employee { border: 1px solid #99f6e4; border-top: 5px solid #0d9488; box-shadow: 0 10px 32px rgba(13, 148, 136, 0.16); max-width: 480px; } .login-card--employee .login-portal-title { color: #134e4a; } .login-card--employee .login-portal-lead, .login-card--employee .login-portal-lead--employee { color: #115e59; } .login-card--employee a { color: #0f766e; } .login-card--employee a:hover { color: #0d9488; } .login-card--employee .pin-code-boxes .pin-code-digit:focus { border-color: #0d9488; box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.28); } .login-card--employee .password-toggle:hover { color: #0d9488; background: #ccfbf1; } .login-card--employee .password-toggle:focus-visible { outline-color: #0d9488; } .login-card--employee .btn-primary { background: #0d9488; border-color: #0f766e; } .login-card--employee .btn-primary:hover { background: #0f766e; border-color: #115e59; } .login-portal-switch-outbound { margin-top: 1.35rem; padding: 0.95rem 1rem; border-radius: var(--radius); text-align: center; font-size: 0.88rem; line-height: 1.45; } .login-portal-switch-outbound--rh { background: #eff6ff; border: 1px dashed #93c5fd; color: #1e40af; } .login-portal-switch-outbound--employee { background: #f0fdfa; border: 1px dashed #5eead4; color: #115e59; } .login-portal-switch-outbound__label { display: block; margin-bottom: 0.45rem; font-weight: 600; } .login-portal-switch-outbound__cta { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .login-portal-switch-outbound--rh .login-portal-switch-outbound__cta { color: #1d4ed8; } .login-portal-switch-outbound--rh .login-portal-switch-outbound__cta:hover { color: #1e40af; } .login-portal-switch-outbound--employee .login-portal-switch-outbound__cta { color: #0f766e; } .login-portal-switch-outbound--employee .login-portal-switch-outbound__cta:hover { color: #134e4a; } .pin-code-boxes { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 0.35rem; width: 100%; max-width: 420px; } /* Plus spécifique que .form-row input { width:100% } pour garder les 4 cases sur une ligne */ .pin-code-boxes .pin-code-digit { width: 3rem; min-width: 3rem; max-width: none; flex: 0 0 auto; height: 3rem; box-sizing: border-box; text-align: center; font-size: 1.35rem; font-weight: 600; font-variant-numeric: tabular-nums; border: 2px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); padding: 0; line-height: 1; } .pin-code-boxes .pin-code-digit:focus { outline: none; border-color: var(--accent, #2563eb); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2); } .login-card-wide { max-width: 840px; } /* Page pointage photo : caméra + Entrée / Sortie uniquement */ .photo-pointage-minimal { max-width: 720px; margin: 0 auto; } .photo-pointage-video-wrap { position: relative; border-radius: 12px; overflow: hidden; background: #0b1220; } .photo-pointage-minimal video { display: block; width: 100%; max-height: min(58vh, 480px); object-fit: cover; } .photo-pointage-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 1rem; text-align: center; font-size: 0.95rem; color: #e5e7eb; background: rgba(11, 18, 32, 0.88); cursor: pointer; } .photo-pointage-overlay[hidden] { display: none !important; } .photo-pointage-code-block { margin: 0 0 0.75rem; text-align: center; } .photo-pointage-code-label { display: block; font-weight: 600; margin-bottom: 0.35rem; font-size: 0.95rem; } .photo-pointage-qr-code-box { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; justify-content: center; } .photo-pointage-actions { display: flex; gap: 1rem; margin-top: 1rem; flex-wrap: wrap; } .photo-pointage-actions .btn-photo-entree, .photo-pointage-actions .btn-photo-sortie { flex: 1; min-width: 140px; min-height: 56px; padding: 0.75rem 1rem; font-weight: 800; font-size: 1.05rem; border-radius: 12px; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); border: 2px solid; } .btn-photo-entree { border-color: #db2777; background: #f9a8d4; color: #831843; } .btn-photo-sortie { border-color: #16a34a; background: #bbf7d0; color: #14532d; } /* Popup bienvenue (pointage entrée) */ .wikyx-modal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0.65rem; z-index: 99999; box-sizing: border-box; } .wikyx-modal__backdrop { position: absolute; inset: 0; background: rgba(2, 6, 23, 0.55); } .wikyx-modal__card { position: relative; width: min(18rem, calc(100vw - 1.3rem)); max-width: 92vw; box-sizing: border-box; border-radius: 14px; border: 1px solid var(--border); background: var(--bg-elevated); box-shadow: 0 18px 60px rgba(0, 0, 0, 0.25); padding: 0.85rem 0.95rem; touch-action: manipulation; } .wikyx-modal__title { font-weight: 950; font-size: 1.05rem; margin: 0 0 0.6rem; letter-spacing: -0.01em; background: linear-gradient(135deg, #0ea5e9, #8b2fff); -webkit-background-clip: text; background-clip: text; color: transparent; } .wikyx-modal__body { color: var(--text); line-height: 1.45; font-size: 0.98rem; white-space: pre-line; overflow-wrap: anywhere; word-break: break-word; max-height: min(52vh, 16rem); overflow: auto; } .wikyx-modal__actions { display: flex; justify-content: flex-end; margin-top: 0.9rem; } .form-inscription .form-row input, .form-inscription .form-row select, .form-inscription .form-row textarea { max-width: none; } .form-section-title { font-size: 0.95rem; font-weight: 600; color: var(--muted); margin: 1.25rem 0 0.5rem; padding-bottom: 0.35rem; border-bottom: 1px solid var(--border); } .form-section-title:first-of-type { margin-top: 0; } .form-grid-2 { display: grid; grid-template-columns: 1fr; gap: 0 1rem; } /* CAPTCHA saisie manuelle pointage : grille 3×3 */ .manual-pointage-captcha-progress { margin: 0.35rem 0 0.5rem; font-size: 1rem; letter-spacing: 0.08em; } .manual-pointage-captcha-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; max-width: 240px; } .manual-pointage-captcha-cell { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; margin: 0; padding: 0; font-size: 1.35rem; font-weight: 700; line-height: 1; cursor: pointer; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elevated); color: var(--text); box-shadow: var(--shadow); transition: background 0.12s ease, transform 0.08s ease; } .manual-pointage-captcha-cell:hover { background: var(--bg); } .manual-pointage-captcha-cell:active { transform: scale(0.96); } @media (min-width: 520px) { .form-grid-2 { grid-template-columns: 1fr 1fr; } .form-grid-2 .form-row { margin-bottom: 1rem; } } .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 2rem; } .stat-card { padding: 1.25rem; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } .stat-card .num { font-size: 1.75rem; font-weight: 700; color: var(--accent); } .stat-card .lbl { font-size: 0.85rem; color: var(--muted); } .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elevated); box-shadow: var(--shadow); } table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } th, td { padding: 0.65rem 0.85rem; text-align: left; border-bottom: 1px solid var(--border); } th { background: #f8fafc; color: var(--muted); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; } tr:last-child td { border-bottom: none; } tr:hover td { background: var(--accent-soft); } tbody tr.wikyx-row-current td { background: rgba(37, 99, 235, 0.07); } tbody tr.wikyx-row-current:hover td { background: rgba(37, 99, 235, 0.11); } /* Lignes de regroupement par type — page Documents RH : même palette que .rh-sidebar / .rh-focus-banner / .rh-mobile-bar */ .wikyx-doc-type-section td { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text); background: #e0edff; border-top: 1px solid #c4d5ff; border-bottom: 1px solid #c4d5ff; padding: 0.6rem 0.85rem; box-shadow: none; text-shadow: none; } tbody tr.wikyx-doc-type-section:first-child td { border-top: none; } tbody tr.wikyx-doc-type-section:hover td { background: var(--accent-soft); color: var(--text); } /* Même chose — espace collaborateur : palette .rh-layout--employee (.rh-sidebar, .rh-mobile-bar--employee) */ .wikyx-emp-doc-type-section td { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text); background: #ecfdf5; border-top: 1px solid #6ee7b7; border-bottom: 1px solid #6ee7b7; padding: 0.6rem 0.85rem; box-shadow: none; text-shadow: none; } tbody tr.wikyx-emp-doc-type-section:first-child td { border-top: none; } tbody tr.wikyx-emp-doc-type-section:hover td { background: rgba(16, 185, 129, 0.14); color: var(--text); } .actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; } /* Titre centré sur la page, flèche à gauche, actions à droite */ .page-head--balanced { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.75rem 1rem; margin-bottom: 1.25rem; } .page-head__start { justify-self: start; min-width: 0; } .page-head__center { margin: 0; text-align: center; min-width: 0; max-width: 100%; } /* Colonne centrale : titre + liste collaborateur (Documents, Temps, Congés) */ .page-head--balanced .page-head__center--collab { min-width: 0; justify-self: stretch; display: flex; justify-content: center; align-items: center; padding-inline: 0.25rem; } /* Couple titre + liste déroulante : même police, taille et graisse */ .page-head__title-collab { --page-head-collab-font: var(--font); --page-head-collab-size: clamp(1.35rem, 2.2vw, 1.85rem); --page-head-collab-weight: 700; --page-head-collab-tracking: -0.02em; --page-head-collab-leading: 1.2; font-family: var(--page-head-collab-font); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem 0; max-width: 100%; width: min(100%, 52rem); } /* Liens vers les 2 autres écrans RH (Documents / Temps / Congés), à gauche du titre */ .page-head__rh-trio-nav { display: flex; flex-wrap: wrap; align-items: center; align-self: center; gap: 0.25rem 0.4rem; flex-shrink: 0; max-width: 100%; font-size: 0.8125rem; font-weight: 600; line-height: var(--page-head-collab-leading, 1.2); } .page-head__rh-trio-link { color: var(--accent); text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; min-height: 2.35rem; padding: 0.35em 0.55em; margin: -0.35em -0.55em; box-sizing: border-box; } .page-head__rh-trio-link:hover { color: var(--accent-hover); text-decoration: underline; } .page-head__rh-trio-sep { color: var(--border-strong); font-weight: 400; user-select: none; } @media (min-width: 640px) { .page-head__rh-trio-nav { padding-right: 1rem; margin-right: 0.15rem; border-right: 1px solid var(--border-strong); } } .page-head__title-collab .page-head__title-h1 { margin: 0; padding: 0; line-height: var(--page-head-collab-leading); text-align: left; font-family: inherit; font-size: var(--page-head-collab-size); font-weight: var(--page-head-collab-weight); letter-spacing: var(--page-head-collab-tracking); color: var(--text); flex: 0 1 auto; align-self: center; } .page-head__collab-picker { flex: 1 1 14rem; min-width: min(100%, 12rem); max-width: 28rem; text-align: left; display: flex; align-items: center; align-self: center; } .page-head__collab-picker .page-head__collab-form { margin: 0; display: flex; align-items: center; width: 100%; min-width: 0; } @media (min-width: 640px) { .page-head__collab-picker { padding-left: 1.25rem; margin-left: 0.25rem; border-left: 1px solid var(--border-strong); } .page-head__title-collab { gap: 0 1.25rem; justify-content: center; } } .page-head__collab-picker .page-head__collab-form select { width: 100%; max-width: none; min-width: 0; min-height: 0; padding: 0.35rem 2.25rem 0.35rem 0.85rem; font-family: inherit; font-size: var(--page-head-collab-size); font-weight: var(--page-head-collab-weight); letter-spacing: var(--page-head-collab-tracking); line-height: var(--page-head-collab-leading); border-radius: var(--radius); border: 1px solid var(--border-strong); background-color: var(--bg-elevated); color: var(--text); box-shadow: var(--shadow); cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.65rem center; background-size: 1rem; } .page-head__collab-picker .page-head__collab-form select:hover { border-color: var(--accent); } .page-head__collab-picker .page-head__collab-form select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18); } @media (max-width: 639px) { .page-head__title-collab { flex-direction: column; align-items: stretch; width: 100%; } .page-head__rh-trio-nav { justify-content: center; width: 100%; padding-right: 0; margin-right: 0; border-right: none; padding-bottom: 0.5rem; margin-bottom: 0.15rem; border-bottom: 1px solid var(--border); } .page-head__title-collab .page-head__title-h1 { text-align: center; } .page-head__collab-picker { max-width: none; } } .page-head--balanced .page-head__end { justify-self: end; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: flex-end; min-width: 0; } .wikyx-back-to-dashboard { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 3.25rem; min-height: 3.25rem; padding: 0.35rem 0.5rem; font-size: 2.5rem; font-weight: 700; line-height: 1; color: var(--text, #0f172a); text-decoration: none; border-radius: 12px; border: 2px solid var(--border, #e2e8f0); background: var(--bg-elevated, #fff); transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .wikyx-back-to-dashboard:hover { background: var(--accent-soft, #e0e7ff); border-color: var(--accent, #6366f1); color: var(--accent, #6366f1); } /* Tableau de bord : ligne « Tous les salariés » */ .wikyx-dashboard-row-all { background: var(--accent-soft, #eff6ff); } .wikyx-dashboard-row-all td { vertical-align: middle; } /* Dashboard : première colonne (matricule / libellé « tous ») fixe au défilement horizontal */ .table-wrap table.wikyx-dashboard-table { border-collapse: separate; border-spacing: 0; } .wikyx-dashboard-table td:first-child { position: sticky; left: 0; z-index: 2; background: var(--bg-elevated); box-shadow: 6px 0 10px -4px rgba(15, 23, 42, 0.15); } .table-wrap table.wikyx-dashboard-table tbody tr:hover td:first-child { background: var(--accent-soft); } .wikyx-dashboard-table tbody tr.wikyx-dashboard-row-all td:first-child { z-index: 3; background: var(--accent-soft, #eff6ff); box-shadow: 6px 0 10px -4px rgba(15, 23, 42, 0.12); } .table-wrap table.wikyx-dashboard-table tbody tr.wikyx-dashboard-row-all:hover td:first-child { background: var(--accent-soft, #eff6ff); } /* Tableau de bord : liste collaborateurs harmonisée */ .wikyx-dashboard-wrap { border-color: #dbe4f0; box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06); } .table-wrap table.wikyx-dashboard-table { min-width: 960px; border-collapse: separate; border-spacing: 0; } .wikyx-dashboard-table th, .wikyx-dashboard-table td { padding: 0.58rem 0.7rem; vertical-align: middle; border-bottom-color: #e5eaf2; } .wikyx-dashboard-table thead th { position: sticky; top: 0; z-index: 4; background: #f8fafc; box-shadow: 0 1px 0 #e5eaf2; white-space: nowrap; } .wikyx-dashboard-table th:first-child, .wikyx-dashboard-table td:first-child { position: sticky; left: 0; min-width: 9.5rem; background: var(--bg-elevated); box-shadow: 6px 0 10px -6px rgba(15, 23, 42, 0.18); } .wikyx-dashboard-table th:first-child { z-index: 5; } .wikyx-dashboard-table td:first-child { z-index: 3; } .table-wrap table.wikyx-dashboard-table tbody tr:hover td:first-child { background: var(--accent-soft); } .wikyx-dashboard-table td:nth-child(n+3) { text-align: center; } .wikyx-dashboard-table td:nth-child(2) { color: var(--muted); } .wikyx-dashboard-table .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.15rem; padding: 0.42rem 0.68rem; line-height: 1.15; white-space: nowrap; box-sizing: border-box; } .wikyx-dashboard-table .btn-dashboard-temps, .wikyx-dashboard-table .btn-dashboard-absences, .wikyx-dashboard-table .btn-dashboard-documents { min-width: 6.4rem; letter-spacing: 0.02em; } .wikyx-dashboard-table .actions, .wikyx-dashboard-table form { margin: 0; white-space: nowrap; } .wikyx-dashboard-row-all { background: var(--accent-soft, #eff6ff); } .wikyx-dashboard-table tbody tr.wikyx-dashboard-row-all td:first-child { background: var(--accent-soft, #eff6ff); box-shadow: 6px 0 10px -6px rgba(15, 23, 42, 0.14); } .table-wrap table.wikyx-dashboard-table tbody tr.wikyx-dashboard-row-all:hover td:first-child { background: var(--accent-soft, #eff6ff); } .page-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.25rem; } .page-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; } .badge { display: inline-block; padding: 0.2rem 0.55rem; border-radius: 6px; font-size: 0.75rem; font-weight: 600; } .badge-actif { background: var(--success-soft); color: var(--success); border: 1px solid #a7f3d0; } .badge-inactif { background: #f1f5f9; color: var(--muted); border: 1px solid var(--border); } button.badge.wikyx-badge-btn { cursor: pointer; font: inherit; font-size: 0.75rem; font-weight: 600; } button.badge.wikyx-badge-btn:hover { filter: brightness(0.97); } .badge-sorti { background: var(--danger-soft); color: var(--danger); border: 1px solid #fecaca; } .flash { padding: 0.75rem 1rem; border-radius: 8px; margin-bottom: 1rem; } .flash-success { background: var(--success-soft); border: 1px solid #a7f3d0; color: #047857; } .flash-error { background: var(--danger-soft); border: 1px solid #fecaca; color: #b91c1c; } .flash-warning { background: #fef9c3; border: 1px solid #fde047; color: #854d0e; } .error-text { color: var(--danger); font-size: 0.875rem; margin-top: 0.25rem; } /* Ligne label + aide contextuelle (?) */ .form-label-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.35rem; } .form-label-row > label { margin-bottom: 0; } .help-wrap { position: relative; display: inline-flex; align-items: center; } .help-q { width: 1.35rem; height: 1.35rem; padding: 0; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--bg-elevated); color: var(--muted); font-size: 0.75rem; font-weight: 700; line-height: 1; cursor: help; font-family: inherit; } .help-q:hover, .help-q:focus-visible { outline: none; border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } .help-q-bubble { display: none; position: absolute; left: 0; top: calc(100% + 8px); z-index: 100; width: min(300px, calc(100vw - 2rem)); padding: 0.75rem 0.9rem; background: var(--text); color: #f1f5f9; font-size: 0.8125rem; font-weight: 400; line-height: 1.5; border-radius: 8px; box-shadow: var(--shadow-md); } .help-q-bubble strong { color: #fff; } .help-wrap:hover .help-q-bubble, .help-wrap:focus-within .help-q-bubble { display: block; } /* Congés */ .leave-badge { display: inline-block; padding: 0.2rem 0.55rem; border-radius: 6px; font-size: 0.75rem; font-weight: 600; } .leave-badge-pending { background: #fef3c7; color: #b45309; border: 1px solid #fcd34d; } .leave-badge-approved { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; } .leave-badge-rejected { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; } .leave-badge-cancelled { background: #f1f5f9; color: #64748b; border: 1px solid var(--border); } .leave-month-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 1rem; box-shadow: var(--shadow); } .leave-month-title { font-size: 1.05rem; font-weight: 600; margin: 0 0 0.75rem; color: var(--text); } .leave-month-list { list-style: none; margin: 0; padding: 0; } .leave-month-item { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border); font-size: 0.9rem; } .leave-month-item:last-child { border-bottom: none; } .leave-month-item__info { flex: 1 1 auto; min-width: 0; } .leave-month-item__actions { display: inline-flex; align-items: center; gap: 0.4rem; flex: 0 0 auto; margin-left: auto; } .leave-month-item__actions .btn, .leave-month-item__actions .btn-sm { padding: 0.22rem 0.6rem; font-size: 0.82rem; line-height: 1.2; } .leave-month-item__actions form { margin: 0; } .leave-month-item__actions .leave-month-item__delete-form { display: inline; } .leave-month-item__actions .btn-icon-only { padding: 0.32rem 0.38rem; min-width: 2rem; min-height: 2rem; box-sizing: border-box; box-shadow: none; vertical-align: middle; text-decoration: none; } .leave-month-item__actions .btn-icon-only svg { width: 17px; height: 17px; } .leave-month-item__actions .leave-month-item__icon-edit { color: #1d4ed8; border-color: #93c5fd; background: #dbeafe; } .leave-month-item__actions .leave-month-item__icon-edit:hover { background: #bfdbfe; border-color: #60a5fa; color: #1e3a8a; } .leave-month-item__actions .leave-month-item__icon-delete { color: #b91c1c; border-color: #fecaca; background: #fef2f2; } .leave-month-item__actions .leave-month-item__icon-delete:hover { background: #fee2e2; border-color: #fca5a5; color: #991b1b; } @media (max-width: 600px) { .leave-month-item { align-items: flex-start; } .leave-month-item__info { flex: 1 0 100%; min-width: 100%; overflow-wrap: anywhere; } .leave-month-item__actions { width: 100%; margin-left: 0; justify-content: flex-start; flex-wrap: wrap; } .leave-month-item__actions .btn, .leave-month-item__actions .btn-sm, .leave-month-item__actions form { flex: 0 1 auto; } } .leave-planning-filters select { min-width: 220px; } /* Planning congés — sidebar (filtres + récap) en bandeau au-dessus, puis détail + calendrier */ .leave-planning-layout { display: block; width: 100%; max-width: 100%; margin-bottom: 1rem; box-sizing: border-box; } .leave-planning-sidebar { min-width: 0; align-self: start; box-sizing: border-box; background: var(--bg-elevated, #ffffff); border: 1px solid var(--border); border-radius: 12px; padding: 0.85rem 0.95rem; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04); } /* Variante « bandeau du haut » : ses blocs sont disposés en rangée flex */ .leave-planning-sidebar.leave-planning-sidebar--top { position: static; display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.85rem; width: 100%; margin: 0 0 1.1rem; background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none; } .leave-planning-sidebar.leave-planning-sidebar--top .leave-planning-sidebar__block { flex: 1 1 16rem; min-width: 14rem; margin: 0; padding: 0.75rem 0.9rem; background: var(--bg-elevated, #ffffff); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04); box-sizing: border-box; } /* Bloc « semaine type » : plus étroit, ne s’étire pas comme les autres cartes du bandeau */ .leave-planning-sidebar.leave-planning-sidebar--top .leave-planning-workweek { flex: 0 1 auto; width: fit-content; max-width: 8.25rem; min-width: 6.25rem; overflow-wrap: anywhere; } .leave-planning-sidebar.leave-planning-sidebar--top .leave-planning-workweek.leave-planning-sidebar__block { padding: 0.6rem 0.45rem; box-sizing: border-box; } .leave-planning-sidebar.leave-planning-sidebar--top .leave-period-summary.leave-period-summary--planning-sidebar.leave-planning-sidebar__block { margin: 0; } .leave-planning-workweek-body { font-size: 0.9rem; line-height: 1.45; } .leave-planning-workweek-intro { margin: 0; } .leave-planning-workweek-name { margin: 0; font-size: 0.88rem; } .leave-planning-workweek-name + .leave-planning-workweek-days { margin-top: 0.3rem; } .leave-planning-workweek-empty { margin: 0.3rem 0 0; font-size: 0.85rem; } .leave-planning-workweek-days { list-style: none; margin: 0; padding: 0; } .leave-planning-workweek-days li { margin: 0; padding: 0.12rem 0; } .leave-planning-workweek-people { list-style: none; margin: 0; padding: 0; } .leave-planning-workweek-person { margin: 0.55rem 0 0; } .leave-planning-workweek-person:first-child { margin-top: 0; } .leave-planning-workweek-person .leave-planning-workweek-name { margin: 0; } .leave-planning-workweek-person .leave-planning-workweek-days { margin-top: 0.2rem; } .leave-planning-sidebar.leave-planning-sidebar--top .leave-period-summary--planning-sidebar .leave-summary-pills { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; } .leave-planning-sidebar.leave-planning-sidebar--top .leave-period-summary--planning-sidebar .leave-summary-pill { white-space: nowrap; text-align: left; } .leave-planning-sidebar .leave-cal-toolbar.leave-planning-toolbar--sidebar { margin-bottom: 0; padding: 0; } /* Variante bandeau : restaure le rembourrage du formulaire (carte autonome) */ .leave-planning-sidebar.leave-planning-sidebar--top .leave-cal-toolbar.leave-planning-toolbar--sidebar.leave-planning-sidebar__block { padding: 0.75rem 0.9rem; } /* Bandeau filtres collaborateurs : une ligne dédiée au-dessus des blocs récap (semaine type + CP) */ .leave-planning-sidebar.leave-planning-sidebar--top.leave-planning-sidebar--filters-first > .leave-planning-sidebar__block { flex: 1 1 100%; width: 100%; max-width: 100%; } .leave-planning-sidebar.leave-planning-sidebar--top.leave-planning-sidebar--filters-first .leave-planning-field--employees { margin-top: 0; padding-top: 0; border-top: 0; } /* Trois blocs récap (semaine type + CP + détail de la période) côte à côte */ .leave-planning-sidebar.leave-planning-sidebar--top .leave-cal-list-below.leave-planning-sidebar__block { flex: 1 1 22rem; min-width: 18rem; margin: 0; padding: 0.75rem 0.9rem; background: var(--bg-elevated, #ffffff); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04); box-sizing: border-box; align-self: stretch; } .leave-planning-sidebar.leave-planning-sidebar--top .leave-cal-list-below.leave-planning-sidebar__block .leave-cal-list-title { margin: 0 0 0.55rem; font-size: 0.95rem; } .leave-planning-sidebar.leave-planning-sidebar--top .leave-cal-list-below.leave-planning-sidebar__block .leave-month-list { display: flex; flex-direction: column; gap: 0.35rem; margin: 0; padding: 0; list-style: none; } .leave-planning-sidebar.leave-planning-sidebar--top .leave-cal-list-below.leave-planning-sidebar__block .leave-month-item { flex-wrap: nowrap; align-items: center; gap: 0.35rem 0.6rem; padding: 0.4rem 0; border-bottom: 1px dashed var(--border); font-size: 0.85rem; line-height: 1.35; overflow-x: auto; scrollbar-width: thin; } .leave-planning-sidebar.leave-planning-sidebar--top .leave-cal-list-below.leave-planning-sidebar__block .leave-month-item:last-child { border-bottom: 0; } .leave-planning-sidebar.leave-planning-sidebar--top .leave-cal-list-below.leave-planning-sidebar__block .leave-month-item__info { flex: 1 1 auto; min-width: 0; white-space: nowrap; } .leave-planning-sidebar.leave-planning-sidebar--top .leave-cal-list-below.leave-planning-sidebar__block .leave-month-item__actions { margin-left: auto; flex-shrink: 0; display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 0.3rem; } .leave-planning-sidebar, .leave-planning-sidebar .leave-planning-toolbar { box-sizing: border-box; } .leave-planning-primary { display: flex; flex-direction: column; gap: 1rem; min-width: 0; align-self: stretch; } .leave-planning-main { flex: 0 1 auto; min-width: 0; } .leave-planning-sidebar .leave-planning-toolbar-grid { display: flex; flex-direction: column; align-items: stretch; gap: 0.75rem; } .leave-planning-sidebar .leave-planning-field--year, .leave-planning-sidebar .leave-planning-field--motif, .leave-planning-sidebar .leave-planning-field--submit, .leave-planning-sidebar .leave-planning-field--employees { grid-area: unset; width: 100%; } .leave-planning-sidebar .leave-planning-field--submit { display: block; } .leave-planning-sidebar .leave-planning-field--employees { margin-top: 0; padding-top: 0.65rem; border-top: 1px solid var(--border); } .leave-planning-sidebar .leave-planning-motif-select { max-width: none; min-width: 0; } .leave-planning-sidebar .leave-planning-year-input { max-width: none; width: 100%; min-width: 0; box-sizing: border-box; } .leave-planning-sidebar .leave-planning-field--submit .btn-primary { width: 100%; justify-content: center; } .leave-planning-sidebar .leave-planning-employee-row { flex-direction: column; align-items: stretch; gap: 0.5rem; } .leave-planning-sidebar .leave-planning-employee-multiselect { width: 100%; min-height: 6.5rem; } .leave-planning-sidebar .leave-planning-btn-tous { align-self: stretch; width: 100%; justify-content: center; } .leave-planning-sidebar .leave-period-summary.leave-period-summary--planning-sidebar { margin: 0.75rem 0 0; padding: 0.65rem 0.75rem; box-sizing: border-box; } .leave-planning-sidebar .leave-period-summary--planning-sidebar .leave-period-summary-top { margin-bottom: 0.45rem; } .leave-planning-sidebar .leave-period-summary--planning-sidebar .leave-period-summary-title { font-size: 0.78rem; font-weight: 700; line-height: 1.35; } .leave-planning-sidebar .leave-period-summary--planning-sidebar .leave-summary-pills { flex-direction: column; align-items: stretch; gap: 0.4rem; } .leave-planning-sidebar .leave-period-summary--planning-sidebar .leave-summary-pill { white-space: normal; text-align: center; font-size: 0.78rem; font-weight: 700; padding: 0.35rem 0.5rem; } /* Panel droit : détail période + calendrier empilés */ .leave-planning-calendar-aside { flex: 1 1 auto; width: 100%; min-width: 0; align-self: stretch; box-sizing: border-box; background: var(--bg-elevated, #ffffff); border: 1px solid var(--border); border-radius: 12px; padding: 0.85rem 0.95rem; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04); } .leave-planning-calendar-aside .leave-cal-nav.leave-cal-nav--aside { margin: 0 0 0.7rem; gap: 0.4rem; flex-wrap: nowrap; justify-content: center; } .leave-planning-calendar-aside .leave-cal-nav-title { font-size: 0.95rem; font-weight: 700; text-align: center; flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Barre « ← Période X (01/06/X → 31/05/X+1) → » placée en haut, juste sous le titre. Carte centrée et autonome (mêmes codes visuels que les blocs sidebar). */ .leave-cal-nav.leave-cal-nav--top { display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 0.4rem; margin: 0 0 1rem; padding: 0.55rem 0.85rem; background: var(--bg-elevated, #ffffff); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04); box-sizing: border-box; } .leave-cal-nav.leave-cal-nav--top .leave-cal-nav-title { font-size: 0.95rem; font-weight: 700; text-align: center; flex: 0 1 auto; min-width: 0; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .leave-cal-nav.leave-cal-nav--top .leave-planning-calendar-aside__nav-btn { flex: 0 0 auto; padding: 0.3rem 0.55rem; font-size: 1rem; line-height: 1; min-width: 2rem; text-align: center; } .leave-planning-calendar-aside .leave-planning-calendar-aside__nav-btn { flex: 0 0 auto; padding: 0.3rem 0.55rem; font-size: 1rem; line-height: 1; min-width: 2rem; text-align: center; } .leave-planning-calendar-aside .leave-year-grid { margin-bottom: 0; gap: 0.55rem; } @media (max-width: 1200px) { .leave-planning-calendar-aside .leave-cal-nav-title { font-size: 0.85rem; } } @media (max-width: 960px) { .leave-planning-layout { grid-template-columns: minmax(0, 1fr); } .leave-planning-sidebar { position: static; width: 100%; } .leave-planning-primary { width: 100%; } .leave-planning-calendar-aside { width: 100%; } } /* Planning congés — barre filtres (page leave_planning) */ .leave-planning-toolbar { padding: 1.15rem 1.35rem; } .leave-planning-toolbar-grid { display: grid; grid-template-columns: minmax(7.5rem, 9.5rem) minmax(12rem, 1.35fr) auto; grid-template-areas: "year motif submit" "employees employees employees"; gap: 0.85rem 1.25rem; align-items: end; } .leave-planning-field--year { grid-area: year; } .leave-planning-field--motif { grid-area: motif; } .leave-planning-field--submit { grid-area: submit; display: flex; align-items: flex-end; } .leave-planning-field--employees { grid-area: employees; align-self: stretch; margin-top: 0.35rem; padding-top: 1rem; border-top: 1px solid var(--border); } .leave-planning-field label { display: block; font-weight: 600; margin-bottom: 0.4rem; font-size: 0.875rem; color: var(--text, #0f172a); } .leave-planning-toolbar-hint { margin: 0 0 0.55rem; font-size: 0.8rem; line-height: 1.45; color: var(--muted, #64748b); } .leave-planning-kbd { display: inline-block; padding: 0.08rem 0.32rem; margin: 0 0.05rem; font-size: 0.7rem; font-family: ui-monospace, monospace; border: 1px solid var(--border-strong); border-radius: 4px; background: var(--bg, #f1f5f9); color: var(--text); box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06); } .leave-planning-employee-row { display: flex; align-items: stretch; gap: 0.75rem; } .leave-planning-employee-multiselect { flex: 1; min-width: 0; width: 100%; min-height: 8.5rem; padding: 0.4rem 0.55rem; border: 1px solid var(--border-strong); border-radius: 8px; font: inherit; line-height: 1.45; background: var(--bg-elevated); color: var(--text); } .leave-planning-btn-tous { flex-shrink: 0; align-self: center; white-space: nowrap; } .leave-planning-year-input { width: 100%; max-width: 10rem; } .leave-planning-motif-select { width: 100%; min-width: 0; max-width: 28rem; padding: 0.45rem 0.65rem; border: 1px solid var(--border-strong); border-radius: 8px; font: inherit; background: var(--bg-elevated); color: var(--text); } @media (max-width: 720px) { .leave-planning-toolbar-grid { grid-template-columns: 1fr 1fr; grid-template-areas: "year motif" "submit submit" "employees employees"; gap: 0.85rem 1rem; } .leave-planning-field--submit .btn-primary { width: 100%; justify-content: center; } } @media (max-width: 480px) { .leave-planning-toolbar-grid { grid-template-columns: 1fr; grid-template-areas: "year" "motif" "submit" "employees"; } .leave-planning-field--submit .btn-primary { width: 100%; } .leave-planning-motif-select { max-width: none; } } /* Planning congés — calendrier */ .leave-cal-toolbar { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 1rem; box-shadow: var(--shadow); } .leave-cal-toolbar-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; } .leave-cal-month-input { min-width: 11rem; padding: 0.45rem 0.65rem; border: 1px solid var(--border-strong); border-radius: 8px; font: inherit; background: var(--bg-elevated); color: var(--text); } .leave-cal-nav { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; } .leave-cal-nav-title { margin: 0; font-size: 1.25rem; font-weight: 600; } .leave-cal-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.65rem 1rem; margin-bottom: 1rem; font-size: 0.875rem; } .leave-cal-legend-sep { color: var(--border-strong); user-select: none; } .leave-cal-legend-item { display: inline-flex; align-items: center; gap: 0.35rem; } .leave-cal-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; } .leave-cal-dot-pending { border: 2px dashed var(--text); background: transparent; width: 12px; height: 12px; } .leave-cal-dot-approved { background: var(--success); } .leave-cal-wrap { overflow-x: auto; margin-bottom: 1.5rem; } .leave-year-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0.8rem; margin-bottom: 1.25rem; } .leave-year-month { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px; padding: 0.45rem; } .leave-year-month-title { margin: 0 0 0.35rem; font-size: 0.82rem; font-weight: 700; text-align: center; color: var(--text); } .leave-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(92px, 1fr)); gap: 1px; background: var(--border-strong); border: 1px solid var(--border-strong); border-radius: var(--radius); overflow: hidden; min-width: 640px; } .leave-cal-grid--mini { grid-template-columns: repeat(7, minmax(0, 1fr)); min-width: 0; } .leave-cal-head { background: var(--text); color: #f8fafc; font-size: 0.75rem; font-weight: 600; text-align: center; padding: 0.5rem 0.35rem; text-transform: uppercase; letter-spacing: 0.02em; } .leave-cal-grid--mini .leave-cal-head { font-size: 0.58rem; padding: 0.25rem 0; } .leave-cal-cell { background: var(--bg-elevated); min-height: 100px; padding: 0.35rem 0.4rem 0.5rem; display: flex; flex-direction: column; align-items: stretch; gap: 0.25rem; } .leave-cal-cell--mini { min-height: 30px; padding: 0.14rem 0.2rem 0.18rem; gap: 0.05rem; } .leave-cal-cell--empty { background: #f8fafc; min-height: 2.5rem; } .leave-cal-cell--mini.leave-cal-cell--empty { min-height: 30px; } /* Dimanche (colonne) : non travaillé — après .leave-cal-cell* pour ne pas être écrasé */ .leave-cal-head.leave-cal-head--sun { background: #4b5563; color: #f8fafc; } .leave-cal-cell.leave-cal-cell--sun { background: #f1f5f9; } .leave-cal-cell.leave-cal-cell--empty.leave-cal-cell--sun { background: #e8edf3; } .leave-cal-cell--sun.leave-cal-cell--today { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); } .leave-cal-cell--today { box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-soft); } .leave-cal-daynum { font-size: 0.8rem; font-weight: 700; color: var(--muted); line-height: 1.2; } .leave-cal-cell--mini .leave-cal-daynum { font-size: 0.55rem; font-weight: 600; } .leave-cal-cell--today .leave-cal-daynum { color: var(--accent); } .leave-cal-chips { display: flex; flex-direction: column; gap: 3px; flex: 1; min-height: 0; } .leave-cal-chips--mini { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px; } .leave-cal-chip { display: block; font-size: 0.65rem; font-weight: 600; line-height: 1.2; padding: 0.2rem 0.35rem; border-radius: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1px solid transparent; } .leave-cal-dot-chip { width: 12px; height: 12px; border-radius: 999px; border: 0; display: inline-block; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55) inset, 0 2px 4px rgba(0, 0, 0, 0.22), 0 0 10px rgba(0, 0, 0, 0.12); } .leave-cal-dot-chip.leave-cal-status-pending { outline: 2px dashed rgba(255, 255, 255, 0.92); outline-offset: 2px; opacity: 0.95; } .leave-cal-dot-chip.leave-cal-status-approved { outline: 0; } .leave-cal-more { font-size: 0.53rem; color: var(--muted); line-height: 1; } .leave-cal-chip--inline { display: inline-block; vertical-align: middle; margin-right: 0.35rem; max-width: 8rem; } .leave-cal-type-cp { background: #0066ff; color: #ffffff; border-color: #004ecc; } .leave-cal-type-rtt { background: #8b2fff; color: #ffffff; border-color: #6b00e6; } .leave-cal-type-sans_solde { background: #ff5f00; color: #ffffff; border-color: #e05000; } /* Arrêt maladie (code MAL → slug mal) — rose foncé, distinct du rose vif « autre » */ .leave-cal-type-mal { background: #8b1d4e; color: #ffffff; border-color: #6b153c; } .leave-cal-type-autre { background: #ff0a78; color: #ffffff; border-color: #cc0860; } /* Points calendrier : mêmes teintes vives que les types */ .leave-cal-dot-chip.leave-cal-type-cp { background: #0066ff; } .leave-cal-dot-chip.leave-cal-type-rtt { background: #8b2fff; } .leave-cal-dot-chip.leave-cal-type-sans_solde { background: #ff5f00; } .leave-cal-dot-chip.leave-cal-type-mal { background: #8b1d4e; } .leave-cal-dot-chip.leave-cal-type-autre { background: #ff0a78; } /* Page planning RH (leave_planning) : pastilles plus lisibles, couleurs plus vives */ .leave-planning-primary .leave-cal-dot-chip { width: 14px; height: 14px; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.78) inset, 0 3px 10px rgba(0, 0, 0, 0.38), 0 0 16px rgba(0, 0, 0, 0.12); } .leave-planning-primary .leave-cal-dot-chip[style*="background"] { filter: saturate(1.5) brightness(1.08) contrast(1.04); } .leave-planning-primary .leave-cal-dot-chip.leave-cal-type-cp { background: linear-gradient(165deg, #4dadff 0%, #0070f3 45%, #0050d4 100%); } .leave-planning-primary .leave-cal-dot-chip.leave-cal-type-rtt { background: linear-gradient(165deg, #c4a5ff 0%, #9333ea 50%, #6d28d9 100%); } .leave-planning-primary .leave-cal-dot-chip.leave-cal-type-sans_solde { background: linear-gradient(165deg, #ffb04a 0%, #ff7a00 45%, #ea580c 100%); } .leave-planning-primary .leave-cal-dot-chip.leave-cal-type-mal { background: linear-gradient(165deg, #f472b6 0%, #db2777 55%, #9d174d 100%); } .leave-planning-primary .leave-cal-dot-chip.leave-cal-type-autre { background: linear-gradient(165deg, #ff6b9d 0%, #f9196e 50%, #c20054 100%); } .leave-planning-primary .leave-cal-dot-chip.leave-cal-motif-fallback { background: linear-gradient(145deg, #22d3ee, #00b4d8 40%, #0096c7); border: 1px solid rgba(0, 100, 150, 0.45); filter: none; } .leave-planning-primary .leave-cal-chips--mini { gap: 3px; } /* Motifs sans couleur en base (slug hors CP/RTT/…) */ .leave-cal-dot-chip.leave-cal-motif-fallback { background: linear-gradient(145deg, #00e5ff, #00a3ff); border: 1px solid rgba(0, 120, 200, 0.55); } .leave-cal-chip.leave-cal-motif-fallback { background: linear-gradient(145deg, #00d4ff, #0088ff); color: #ffffff; border-color: #0066cc; } .leave-summary-pill.leave-cal-motif-pill:not([style*="background-color"]) { background: linear-gradient(135deg, #0080ff, #7c20ff); border-color: #5b14cc; color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); } /* Comptage planning + détail période (pastilles blanches + texte noir) : ombre des .leave-cal-type-* (prévue pour le texte blanc) ne doit pas s’appliquer — caractère terne / « flou ». */ .leave-summary-pill.leave-cal-motif-pill[style*="background-color:white"], .leave-cal-chip.leave-cal-motif-pill[style*="background-color:white"] { text-shadow: none !important; } .leave-cal-list-below .leave-cal-chip.leave-cal-motif-pill[style*="background-color:white"] { font-weight: 700; } .leave-cal-status-pending.leave-cal-chip { border-style: dashed; border-width: 2px; opacity: 0.92; } .leave-cal-legend-item.leave-cal-status-pending .leave-cal-dot { border: 2px dashed #64748b; background: #e2e8f0; } .leave-cal-legend-item.leave-cal-status-approved .leave-cal-dot { background: #0066ff; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45) inset; } /* Planning congés — période de référence */ .leave-period-summary { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.85rem 1.25rem; box-shadow: var(--shadow); margin-bottom: 1rem; } .leave-period-summary-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.6rem; } .leave-period-summary-title { margin: 0; font-size: 0.9rem; font-weight: 800; } .leave-summary-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; } .leave-summary-pill { border: 1px solid; border-radius: 999px; padding: 0.4rem 0.75rem; font-size: 0.82rem; font-weight: 900; white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(255, 255, 255, 0.18) inset; } /* CP : texte noir sur pastille (lisibilité / demande produit) ; surcouche des styles inline planning */ .leave-summary-pill.leave-cal-type-cp { color: #111111 !important; text-shadow: none !important; } .leave-summary-pill.leave-cal-type-rtt, .leave-summary-pill.leave-cal-type-sans_solde, .leave-summary-pill.leave-cal-type-mal, .leave-summary-pill.leave-cal-type-autre { color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); } .leave-cal-legend-item.leave-cal-type-cp .leave-cal-dot { background: #0066ff; border: 0; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45) inset, 0 1px 3px rgba(0, 80, 255, 0.55); } .leave-cal-legend-item.leave-cal-type-rtt .leave-cal-dot { background: #8b2fff; border: 0; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45) inset, 0 1px 3px rgba(120, 40, 255, 0.55); } .leave-cal-legend-item.leave-cal-type-sans_solde .leave-cal-dot { background: #ff5f00; border: 0; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45) inset, 0 1px 3px rgba(255, 100, 0, 0.5); } .leave-cal-legend-item.leave-cal-type-mal .leave-cal-dot { background: #8b1d4e; border: 0; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45) inset, 0 1px 3px rgba(120, 25, 70, 0.55); } .leave-cal-legend-item.leave-cal-type-autre .leave-cal-dot { background: #ff0a78; border: 0; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45) inset, 0 1px 3px rgba(255, 10, 120, 0.5); } .leave-cal-list-below { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; box-shadow: var(--shadow); } .leave-cal-list-title { margin: 0 0 0.75rem; font-size: 1rem; font-weight: 600; } /* Page signature : une colonne tant que « signature responsable » non choisie ; deux colonnes si cadre latéral affiché */ .wikyx-signature-send-layout { display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: start; } .wikyx-signature-send-layout:has(#wikyx-signature-send-aside:not([hidden])) { grid-template-columns: minmax(0, 1fr) minmax(260px, min(40%, 440px)); } .wikyx-signature-send-main { min-width: 0; } .wikyx-signature-send-side { position: sticky; top: 0.75rem; align-self: start; min-width: 0; } .wikyx-signature-send-side__inner { display: flex; flex-direction: column; min-height: min(72vh, 640px); padding: 0.85rem 1rem; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow, 0 1px 3px rgba(15, 23, 42, 0.06)); } .wikyx-signature-send-side__title { margin: 0 0 0.65rem; font-size: 0.95rem; font-weight: 600; flex-shrink: 0; } .wikyx-signature-send-side__placeholder { margin: 0; font-size: 0.88rem; line-height: 1.5; flex: 1; display: flex; align-items: center; } #wikyx-sig-self-wrap { display: flex; flex-direction: column; flex: 1; min-height: 0; } #wikyx-sig-self-wrap[hidden] { display: none !important; } .wikyx-sig-self-frame { width: 100%; flex: 1; min-height: 420px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-elevated, #fff); } @media (max-width: 960px) { .wikyx-signature-send-layout, .wikyx-signature-send-layout:has(#wikyx-signature-send-aside:not([hidden])) { grid-template-columns: 1fr; } .wikyx-signature-send-side { position: static; } .wikyx-signature-send-side__inner { min-height: 50vh; } } /* Documents — listes déroulantes (tableau + panneau Courrier OpenAI) */ .wikyx-doc-unified-table select.wikyx-doc-select, .wikyx-doc-unified-table select.wikyx-doc-share-select, .wikyx-courrier-openai select.wikyx-doc-select { width: 100%; max-width: 100%; box-sizing: border-box; margin: 0; padding: 0.42rem 2.1rem 0.42rem 0.65rem; font-family: inherit; font-size: 0.875rem; font-weight: 500; line-height: 1.4; color: var(--text, #0f172a); background-color: var(--bg-elevated, #fff); border: 1px solid var(--border-strong, #cbd5e1); border-radius: 8px; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.55rem center; background-size: 1rem; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .wikyx-doc-unified-table select.wikyx-doc-select:hover, .wikyx-doc-unified-table select.wikyx-doc-share-select:hover, .wikyx-courrier-openai select.wikyx-doc-select:hover { border-color: var(--accent, #2563eb); } .wikyx-doc-unified-table select.wikyx-doc-select:focus, .wikyx-doc-unified-table select.wikyx-doc-share-select:focus, .wikyx-courrier-openai select.wikyx-doc-select:focus { outline: none; border-color: var(--accent, #2563eb); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18); } .wikyx-doc-unified-table select.wikyx-doc-select:disabled, .wikyx-doc-unified-table select.wikyx-doc-share-select:disabled, .wikyx-courrier-openai select.wikyx-doc-select:disabled { opacity: 0.6; cursor: not-allowed; } /* Documents (RH + collaborateur) — entêtes d’accordéon : couleurs distinctes (cycle de 6) */ .wikyx-doc-accordion-root > details.wikyx-doc-accordion:nth-of-type(6n + 1) { border-color: #7dd3fc; } .wikyx-doc-accordion-root > details.wikyx-doc-accordion:nth-of-type(6n + 1) > .wikyx-doc-accordion__summary { background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%); } .wikyx-doc-accordion-root > details.wikyx-doc-accordion:nth-of-type(6n + 1)[open] > .wikyx-doc-accordion__summary { background: linear-gradient(135deg, #bae6fd 0%, #7dd3fc 100%); border-bottom-color: #38bdf8; } .wikyx-doc-accordion-root > details.wikyx-doc-accordion:nth-of-type(6n + 2) { border-color: #6ee7b7; } .wikyx-doc-accordion-root > details.wikyx-doc-accordion:nth-of-type(6n + 2) > .wikyx-doc-accordion__summary { background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); } .wikyx-doc-accordion-root > details.wikyx-doc-accordion:nth-of-type(6n + 2)[open] > .wikyx-doc-accordion__summary { background: linear-gradient(135deg, #a7f3d0 0%, #6ee7b7 100%); border-bottom-color: #34d399; } .wikyx-doc-accordion-root > details.wikyx-doc-accordion:nth-of-type(6n + 3) { border-color: #fcd34d; } .wikyx-doc-accordion-root > details.wikyx-doc-accordion:nth-of-type(6n + 3) > .wikyx-doc-accordion__summary { background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); } .wikyx-doc-accordion-root > details.wikyx-doc-accordion:nth-of-type(6n + 3)[open] > .wikyx-doc-accordion__summary { background: linear-gradient(135deg, #fde68a 0%, #fcd34d 100%); border-bottom-color: #f59e0b; } .wikyx-doc-accordion-root > details.wikyx-doc-accordion:nth-of-type(6n + 4) { border-color: #c4b5fd; } .wikyx-doc-accordion-root > details.wikyx-doc-accordion:nth-of-type(6n + 4) > .wikyx-doc-accordion__summary { background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%); } .wikyx-doc-accordion-root > details.wikyx-doc-accordion:nth-of-type(6n + 4)[open] > .wikyx-doc-accordion__summary { background: linear-gradient(135deg, #ddd6fe 0%, #c4b5fd 100%); border-bottom-color: #8b5cf6; } .wikyx-doc-accordion-root > details.wikyx-doc-accordion:nth-of-type(6n + 5) { border-color: #f9a8d4; } .wikyx-doc-accordion-root > details.wikyx-doc-accordion:nth-of-type(6n + 5) > .wikyx-doc-accordion__summary { background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%); } .wikyx-doc-accordion-root > details.wikyx-doc-accordion:nth-of-type(6n + 5)[open] > .wikyx-doc-accordion__summary { background: linear-gradient(135deg, #fbcfe8 0%, #f9a8d4 100%); border-bottom-color: #ec4899; } .wikyx-doc-accordion-root > details.wikyx-doc-accordion:nth-of-type(6n + 6) { border-color: #fdba74; } .wikyx-doc-accordion-root > details.wikyx-doc-accordion:nth-of-type(6n + 6) > .wikyx-doc-accordion__summary { background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%); } .wikyx-doc-accordion-root > details.wikyx-doc-accordion:nth-of-type(6n + 6)[open] > .wikyx-doc-accordion__summary { background: linear-gradient(135deg, #fed7aa 0%, #fdba74 100%); border-bottom-color: #fb923c; } /* ---------------------------------------------------------------- Pavés colorés du tableau de bord collaborateur (page=employee_dashboard) ---------------------------------------------------------------- */ .emp-tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.85rem; margin: 1.25rem 0 0.5rem; } @media (min-width: 880px) { .emp-tile-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } } .emp-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0.55rem; padding: 1.1rem 1.1rem 1.15rem; border-radius: 16px; text-decoration: none; color: #ffffff; background: var(--emp-tile-bg, linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%)); box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12), 0 1px 2px rgba(15, 23, 42, 0.06); border: 1px solid rgba(255, 255, 255, 0.15); min-height: 132px; transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; isolation: isolate; overflow: hidden; } .emp-tile::after { content: ""; position: absolute; inset: auto -30% -60% auto; width: 180px; height: 180px; background: radial-gradient(circle at center, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 70%); z-index: 0; pointer-events: none; } .emp-tile:hover, .emp-tile:focus-visible { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(15, 23, 42, 0.18), 0 2px 4px rgba(15, 23, 42, 0.08); filter: brightness(1.04); outline: none; color: #ffffff; text-decoration: none; } .emp-tile:focus-visible { outline: 3px solid rgba(255, 255, 255, 0.65); outline-offset: 2px; } .emp-tile__icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 12px; background: rgba(255, 255, 255, 0.18); color: #ffffff; z-index: 1; } .emp-tile__icon svg { display: block; } .emp-tile__label { font-size: 1.1rem; font-weight: 700; line-height: 1.2; z-index: 1; } .emp-tile__hint { font-size: 0.85rem; line-height: 1.3; opacity: 0.92; z-index: 1; } .emp-tile__badge { position: absolute; top: 0.55rem; right: 0.55rem; min-width: 1.5rem; height: 1.5rem; padding: 0 0.4rem; border-radius: 999px; background: #dc2626; color: #ffffff; font-size: 0.8rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); z-index: 2; } /* Variantes colorées par type de pavé */ .emp-tile--qr { background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%); } .emp-tile--pointage-entree { background: linear-gradient(135deg, #f9a8d4 0%, #db2777 100%); color: #ffffff; } .emp-tile--pointage-sortie { background: linear-gradient(135deg, #bbf7d0 0%, #16a34a 100%); color: #ffffff; } .emp-tile--time { background: linear-gradient(135deg, #059669 0%, #047857 100%); } .emp-tile--leaves { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); } .emp-tile--docs { background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%); } @media (max-width: 600px) { .emp-tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } .emp-tile { min-height: 120px; padding: 0.9rem 0.85rem 1rem; } .emp-tile__icon { width: 44px; height: 44px; } .emp-tile__icon svg { width: 28px; height: 28px; } .emp-tile__label { font-size: 1rem; } .emp-tile__hint { font-size: 0.8rem; } } /* Pavés Mon espace — aperçu 80px, une ligne (tuto) */ .emp-guide-dashboard-preview { margin: 0 0 1.25rem; padding: 0; border: none; } .emp-tile-grid--guide { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 0.4rem; margin: 0.75rem 0 0; width: fit-content; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .emp-tile-grid--guide .emp-tile { flex: 0 0 80px; width: 80px; height: 80px; min-height: 80px; padding: 0.35rem 0.25rem 0.3rem; gap: 0.15rem; border-radius: 8px; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.1); align-items: center; justify-content: center; text-align: center; pointer-events: none; cursor: default; } .emp-tile-grid--guide .emp-tile:hover, .emp-tile-grid--guide .emp-tile:focus-visible { transform: none; filter: none; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.1); } .emp-tile-grid--guide .emp-tile__hint { display: none; } .emp-tile-grid--guide .emp-tile__icon { width: 26px; height: 26px; border-radius: 6px; margin: 0 auto; } .emp-tile-grid--guide .emp-tile__icon svg { width: 14px; height: 14px; } .emp-tile-grid--guide .emp-tile__label { font-size: 0.62rem; line-height: 1.1; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .emp-tile-grid--guide .emp-tile__badge { top: 0.2rem; right: 0.2rem; min-width: 0.85rem; height: 0.85rem; padding: 0 0.2rem; font-size: 0.55rem; } .emp-tile__badge--guide-demo { opacity: 0.85; } /* Guide collaborateur (page d’aide HTML) */ .emp-guide-public { min-height: 100vh; background: linear-gradient(180deg, #f0f9ff 0%, #f8fafc 40%, #ffffff 100%); } .emp-guide-public__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; max-width: 1100px; margin: 0 auto; padding: 1rem 1.25rem; } .emp-guide-public__brand { display: inline-flex; align-items: center; gap: 0.65rem; font-weight: 700; color: var(--color-text, #0f172a); text-decoration: none; } .emp-guide-public__brand:hover { text-decoration: underline; } .emp-guide-public__actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .emp-guide-public__main { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem 3rem; } .login-guide-link { margin: 0 0 1rem; font-size: 0.92rem; text-align: center; } .login-guide-link a { font-weight: 600; } .emp-dashboard-guide { margin: -0.35rem 0 1.25rem; font-size: 0.92rem; } .emp-guide { color: var(--color-text, #0f172a); line-height: 1.55; } .emp-guide__hero { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid #e2e8f0; } .emp-guide__kicker { margin: 0 0 0.35rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #0369a1; } .emp-guide__title { margin: 0 0 0.75rem; font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.2; } .emp-guide__lead { margin: 0; max-width: 52rem; font-size: 1.05rem; color: #334155; } .emp-guide__cta-row { margin: 1.25rem 0 0; } .emp-guide__layout { display: grid; grid-template-columns: minmax(200px, 240px) minmax(0, 1fr); gap: 2rem; align-items: start; } .emp-guide__toc { position: sticky; top: calc(var(--emp-focus-banner-reserve, 4.75rem) + 0.75rem); padding: 1rem 1.1rem; border-radius: 12px; background: #ffffff; border: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06); } .emp-guide__toc-title { margin: 0 0 0.65rem; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; } .emp-guide__toc-list { margin: 0; padding-left: 1.15rem; font-size: 0.9rem; } .emp-guide__toc-list li { margin: 0.35rem 0; } .emp-guide__toc-list a { color: #0369a1; text-decoration: none; } .emp-guide__toc-list a:hover { text-decoration: underline; } .emp-guide__section { margin-bottom: 2.25rem; scroll-margin-top: calc(var(--emp-focus-banner-reserve, 4.75rem) + 1rem); } .emp-guide__section h2 { margin: 0 0 0.85rem; font-size: 1.35rem; color: #0f172a; border-left: 4px solid #0ea5e9; padding-left: 0.75rem; } .emp-guide__section h3 { margin: 1.25rem 0 0.5rem; font-size: 1.05rem; } .emp-guide__section p, .emp-guide__section ul { margin: 0 0 0.85rem; } .emp-guide__section ul { padding-left: 1.25rem; } .emp-guide__steps { margin: 0 0 1rem; padding-left: 1.35rem; } .emp-guide__steps li { margin: 0.4rem 0; } .emp-guide__table { width: 100%; border-collapse: collapse; margin: 0 0 1rem; font-size: 0.92rem; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; } .emp-guide__table th, .emp-guide__table td { padding: 0.55rem 0.75rem; text-align: left; vertical-align: top; border-bottom: 1px solid #e2e8f0; } .emp-guide__table thead th { background: #f1f5f9; font-weight: 700; } .emp-guide__table tbody tr:last-child td { border-bottom: none; } .emp-guide__table--compact { font-size: 0.88rem; } .emp-guide__note, .emp-guide__tip, .emp-guide__warning { padding: 0.75rem 1rem; border-radius: 8px; margin: 0 0 1rem; font-size: 0.92rem; } .emp-guide__note { background: #f0f9ff; border: 1px solid #bae6fd; } .emp-guide__tip { background: #f0fdf4; border: 1px solid #bbf7d0; } .emp-guide__warning { background: #fffbeb; border: 1px solid #fde68a; } .emp-guide__footer-note { font-size: 0.95rem; color: #475569; } .emp-guide__back-top { margin: 2rem 0 0; font-size: 0.9rem; } @media (max-width: 860px) { .emp-guide__layout { grid-template-columns: 1fr; } .emp-guide__toc { position: static; } } @media (max-width: 600px) { .emp-guide__table { font-size: 0.82rem; } .emp-guide__table th, .emp-guide__table td { padding: 0.45rem 0.5rem; } }