
/* Lepin v1.3.3.2 — lisibilité, densité KPI, rôles et micro-interactions premium */
:root{
  --tx:#101828;
  --tx2:#344054;
  --tx3:#667085;
  --tx4:#7A8496;
}
body{color:var(--tx);-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}.ps,.panel-sub,.emp-section-sub,.timeline-sub,.sdelta,.abs-muted{color:var(--tx2)!important}.dl,.flbl,.pro-label,.emp-kpi-label{color:var(--tx2)!important}.dv,.emp-detail-value,.timeline-title,.panel-title{color:var(--tx)!important}.badge{font-weight:900}.btn{transition:transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .16s,border-color .16s,background .16s}.btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(15,23,42,.09)}.btn:active{transform:scale(.985)}
.dashboard-pro{background:radial-gradient(circle at 10% 0%,rgba(91,45,201,.22),transparent 30%),radial-gradient(circle at 94% 10%,rgba(12,175,109,.18),transparent 26%),radial-gradient(circle at 58% 112%,rgba(47,123,240,.13),transparent 34%),linear-gradient(180deg,#F7F3FF 0%,#EEF0FF 100%)!important}.dashboard-pro:before{opacity:.68!important;background:repeating-linear-gradient(118deg,rgba(91,45,201,.075) 0 1px,transparent 1px 24px),repeating-linear-gradient(28deg,rgba(12,175,109,.048) 0 1px,transparent 1px 34px),repeating-radial-gradient(circle at 20% 16%,rgba(91,45,201,.06) 0 1px,transparent 1px 5px)!important}.dash-pro-hero{box-shadow:0 26px 70px rgba(44,24,120,.22)!important}.dash-pro-sub{color:rgba(255,255,255,.86)!important}.dash-card-grid{gap:13px!important}.dashboard-pro .dash-card-grid .pro-card{min-height:118px!important;padding:14px 15px!important;border-radius:20px!important}.dashboard-pro .dash-card-grid .pro-card:hover{transform:translateY(-4px) scale(1.01)!important;box-shadow:0 30px 76px rgba(30,20,80,.24),inset 0 1px 0 rgba(255,255,255,.30)!important}.dashboard-pro .dash-card-grid .pro-card .pro-card-top{margin-bottom:7px!important}.dashboard-pro .dash-card-grid .pro-card .pro-icon{width:38px!important;height:38px!important;border-radius:14px!important}.dashboard-pro .dash-card-grid .pro-card .pro-value{font-size:32px!important;line-height:.95!important;margin-top:5px!important}.dashboard-pro .dash-card-grid .pro-card .pro-label{font-size:10.2px!important;line-height:1.25!important}.dashboard-pro .dash-card-grid .pro-card .pro-sub{font-size:11.4px!important;line-height:1.25!important;margin-top:4px!important}.dashboard-pro .dash-card-grid .pro-card .pro-sub:after{height:16px!important;margin-top:8px!important;opacity:.82!important}.dashboard-pro .pro-panel{transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s,border-color .18s}.dashboard-pro .pro-panel:hover{transform:translateY(-2px);border-color:rgba(91,45,201,.24)!important;box-shadow:0 28px 70px rgba(42,30,92,.14)!important}.dashboard-pro .panel-title{font-weight:950!important}.dashboard-pro .panel-sub{font-weight:750!important}.timeline-item,.rh-calendar-row,.deadline-row,.status-pill,.legend-item,.emp-activity-row{transition:transform .16s,box-shadow .16s,background .16s}.timeline-item:hover,.rh-calendar-row:hover,.deadline-row:hover,.status-pill:hover,.legend-item:hover,.emp-activity-row:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(15,23,42,.06)}.timeline-sub{max-width:440px!important;color:var(--tx2)!important}.deadline-row .deadline-month{color:var(--tx)!important}.deadline-row div{color:var(--tx2)!important}.live-toast{background:linear-gradient(135deg,#FFFFFF,#F6F2FF)!important;border:1.5px solid rgba(91,45,201,.18)!important;border-left:5px solid var(--violet)!important;box-shadow:0 22px 56px rgba(42,30,92,.18)!important;animation:toastIn .22s cubic-bezier(.2,.8,.2,1)!important}.live-toast:hover{transform:translateY(-2px)}@keyframes toastIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.employee-premium .emp-kpi,.employee-premium .emp-action{transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s!important}.employee-premium .emp-kpi:hover,.employee-premium .emp-action:hover{transform:translateY(-3px) scale(1.01)!important;box-shadow:0 26px 60px rgba(30,20,80,.22),inset 0 1px 0 rgba(255,255,255,.30)!important}.employee-premium .emp-kpi{min-height:118px!important;padding:13px!important}.employee-premium .emp-kpi-value{font-size:29px!important}.employee-premium .emp-kpi-label{font-size:10.5px!important;color:rgba(255,255,255,.90)!important;line-height:1.25}.employee-premium .emp-section{transition:transform .18s,box-shadow .18s}.employee-premium .emp-section:hover{transform:translateY(-1px);box-shadow:0 18px 42px rgba(42,30,92,.10)}.employee-premium .emp-section-sub,.employee-premium .emp-activity-sub{color:var(--tx2)!important}.emp-detail-label{color:var(--tx2)!important}.emp-detail-value{color:var(--tx)!important}.abs-native-page .abs-kpi,.abs-filter-card,.abs-table-card{transition:transform .18s,box-shadow .18s}.abs-native-page .abs-kpi:hover,.abs-filter-card:hover,.abs-table-card:hover{transform:translateY(-2px);box-shadow:0 24px 60px rgba(42,30,92,.13)}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.btn:hover,.pro-card:hover,.pro-panel:hover,.emp-kpi:hover,.emp-action:hover{transform:none!important}}
@media(max-width:760px){.dashboard-pro .dash-card-grid .pro-card{min-height:112px!important}.timeline-sub{max-width:220px!important}}

/* Phase 8C P8C-18..20 — Notification Center & Push preferences */
.notification-popover{width:min(390px,calc(100vw - 24px));right:0;top:calc(100% + 10px);overflow:hidden}
.notification-popover-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--b1)}
.notification-popover-title{font-size:13.5px;font-weight:900;color:var(--tx)}
.notification-popover-sub{margin-top:2px;font-size:12px;color:var(--tx3)}
.notification-popover-list{max-height:390px;overflow:auto}
.notification-popover-foot{padding:10px 12px;border-top:1px solid var(--b1)}
.notification-popover-foot .btn{width:100%;justify-content:center}
.notification-row{appearance:none;width:100%;border:0;border-bottom:1px solid var(--b1);background:transparent;color:var(--tx);display:flex;align-items:flex-start;gap:11px;padding:12px 14px;text-align:left;cursor:pointer;transition:background .16s ease}
.notification-row:hover,.notification-row:focus-visible{background:rgba(10,82,56,.045);outline:none}
.notification-row.is-unread{background:rgba(10,82,56,.055)}
.notification-row-copy{display:flex;flex:1;min-width:0;flex-direction:column;gap:3px}
.notification-row-title{font-size:13px;font-weight:800;line-height:1.25}
.notification-row-body{font-size:12.4px;color:var(--tx2);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.notification-row-meta{font-size:11.6px;color:var(--tx3)}
.notification-type-mark{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;flex:0 0 28px;font-size:13px;font-weight:900}
.notification-type-mark.info{background:#edf4ff;color:#1e5aa7}
.notification-type-mark.action{background:#fff5df;color:#8a5900}
.notification-type-mark.security{background:#eaf7f0;color:#0a5238}
.notification-unread-dot{width:8px;height:8px;border-radius:50%;background:var(--violet);flex:0 0 8px;margin-top:7px}
.notif-count-badge{position:absolute;top:-6px;right:-7px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#c0392b;color:#fff;border:2px solid var(--surf);display:inline-flex;align-items:center;justify-content:center;font-size:9.5px;font-weight:900;line-height:1;box-sizing:border-box}
.emp-icon-btn .notif-count-badge{top:-5px;right:-5px;border-color:#fff}
.notification-empty{padding:24px 18px;text-align:center;color:var(--tx3);font-size:12.8px;display:flex;align-items:center;justify-content:center;gap:8px}
.notification-empty.large{min-height:240px;flex-direction:column;gap:8px}
.notification-empty.large strong{color:var(--tx);font-size:14px}
.notification-page,.notification-settings-page{max-width:1180px;margin:0 auto}
.notification-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:18px}
.notification-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.notification-tabs{display:flex;gap:6px;overflow:auto;max-width:100%;padding-bottom:2px}
.notification-tab,.notification-unread-filter{appearance:none;border:1px solid var(--b2);background:var(--surf);color:var(--tx2);border-radius:999px;padding:8px 12px;font:inherit;font-size:12.2px;font-weight:750;cursor:pointer;white-space:nowrap}
.notification-tab.active,.notification-unread-filter.active{border-color:rgba(10,82,56,.28);background:rgba(10,82,56,.08);color:#0a5238}
.notification-list-card{background:var(--surf);border:1px solid var(--b1);border-radius:18px;overflow:hidden;box-shadow:0 10px 34px rgba(18,31,28,.045)}
.notification-list-item{display:flex;align-items:center;gap:12px;padding:0 14px;border-bottom:1px solid var(--b1);background:transparent}
.notification-list-item:last-child{border-bottom:0}
.notification-list-item.is-unread{background:linear-gradient(90deg,rgba(10,82,56,.065),rgba(10,82,56,.015))}
.notification-list-main{appearance:none;border:0;background:transparent;color:var(--tx);display:flex;align-items:flex-start;gap:12px;flex:1;min-width:0;text-align:left;padding:15px 0;cursor:pointer}
.notification-list-main:focus-visible{outline:2px solid rgba(10,82,56,.35);outline-offset:3px;border-radius:10px}
.notification-list-copy{display:flex;flex-direction:column;gap:4px;min-width:0}
.notification-list-title{font-size:13.5px;font-weight:850;line-height:1.3}
.notification-list-body{font-size:12.7px;color:var(--tx2);line-height:1.45}
.notification-list-meta{font-size:11.7px;color:var(--tx3)}
.notification-load-more{padding:14px;display:flex;justify-content:center;border-top:1px solid var(--b1)}
.notification-settings-card{background:var(--surf);border:1px solid var(--b1);border-radius:18px;padding:18px;margin-bottom:14px;box-shadow:0 10px 34px rgba(18,31,28,.04)}
.notification-settings-card-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}
.notification-settings-card-head h2{margin:0;font-size:16px;color:var(--tx)}
.notification-settings-card-head p{margin:4px 0 0;color:var(--tx3);font-size:12.6px;line-height:1.45}
.notification-settings-icon{width:38px;height:38px;border-radius:12px;background:rgba(10,82,56,.08);color:#0a5238;display:flex;align-items:center;justify-content:center;flex:0 0 38px}
.notification-device-status{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:750;margin-bottom:12px}
.notification-status-dot{width:9px;height:9px;border-radius:50%;background:#a3a8ad;box-shadow:0 0 0 4px rgba(163,168,173,.12)}
.notification-status-dot.active{background:#16835b;box-shadow:0 0 0 4px rgba(22,131,91,.12)}
.notification-device-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.notification-help{font-size:12.4px;line-height:1.45;color:var(--tx2);padding:10px 12px;border-radius:10px;background:rgba(255,185,0,.08);border:1px solid rgba(187,129,0,.14)}
.notification-preference-list{display:flex;flex-direction:column}
.notification-preference-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 0;border-top:1px solid var(--b1)}
.notification-preference-row:first-child{border-top:0;padding-top:0}
.notification-preference-row:last-child{padding-bottom:0}
.notification-preference-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.notification-preference-copy strong{font-size:13.2px;color:var(--tx)}
.notification-preference-copy span{font-size:12.2px;color:var(--tx3);line-height:1.4}
.notification-switch{width:46px;height:27px;border:0;border-radius:999px;padding:3px;background:#c8cdd1;cursor:pointer;transition:background .18s ease;flex:0 0 46px}
.notification-switch.is-on{background:#0a5238}
.notification-switch.is-locked{opacity:.72;cursor:not-allowed}
.notification-switch-thumb{display:block;width:21px;height:21px;border-radius:50%;background:#fff;box-shadow:0 2px 7px rgba(0,0,0,.18);transform:translateX(0);transition:transform .18s ease}
.notification-switch.is-on .notification-switch-thumb{transform:translateX(19px)}
.notification-privacy-note{display:flex;align-items:flex-start;gap:9px;color:var(--tx2);font-size:12.3px;line-height:1.45;padding:12px 14px;border-radius:12px;background:rgba(10,82,56,.055);border:1px solid rgba(10,82,56,.1)}
.notification-privacy-note svg{flex:0 0 auto;color:#0a5238;margin-top:1px}
@media (max-width:720px){
  .notification-page-head{flex-direction:column;align-items:stretch}
  .notification-page-head>.btn{align-self:flex-start}
  .notification-toolbar{align-items:stretch}
  .notification-unread-filter{width:100%}
  .notification-list-item{align-items:flex-start;flex-wrap:wrap;padding-bottom:12px}
  .notification-list-main{width:100%;flex-basis:100%;padding-bottom:4px}
  .notification-list-item>.btn{margin-left:40px}
  .notification-preference-row{align-items:flex-start}
}

/* Phase 8C — P8C-21..23 : CTA explicites et états de permission non ambigus */
.notification-list-cta{display:inline-flex;align-items:center;width:max-content;margin-top:3px;color:#0a5238;font-size:12px;font-weight:850}
.notification-permission-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:2px 0 12px}
.notification-permission-state{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:11px 12px;border:1px solid var(--b1);border-radius:12px;background:rgba(245,247,246,.72)}
.notification-permission-label{font-size:12.2px;color:var(--tx2);font-weight:750;line-height:1.35}
.notification-state-badge{display:inline-flex;align-items:center;justify-content:center;max-width:58%;padding:5px 8px;border-radius:999px;font-size:11.2px;font-weight:850;line-height:1.25;text-align:center;background:#eef0f1;color:#596066}
.notification-state-badge.success{background:#eaf7f0;color:#0a5238}
.notification-state-badge.pending{background:#fff5df;color:#795000}
.notification-state-badge.danger{background:#fff0ef;color:#9f2f26}
.notification-state-badge.muted{background:#eef0f1;color:#596066}
.notification-ios-onboarding{margin:10px 0 0;padding:12px 14px;border-radius:12px;background:#f4f7fb;border:1px solid #dce5f0;color:var(--tx2);font-size:12.4px;line-height:1.5}
.notification-ios-onboarding strong{display:block;color:var(--tx);margin-bottom:5px;font-size:12.8px}
.notification-ios-onboarding ol{margin:0;padding-left:20px}
.notification-ios-onboarding li+li{margin-top:3px}
@media (max-width:720px){
  .notification-permission-grid{grid-template-columns:1fr}
  .notification-permission-state{align-items:center}
  .notification-state-badge{max-width:62%}
}
