/* ==========================================================================
   ElongoPay UI — design system partagé (admin + pages publiques)
   Tokens, composants Bootstrap harmonisés, layout, animations.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
    --ep-font: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ep-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Charte du logo ElongoPay : cyan → indigo → violet */
    --ep-cyan: #14B1F8;
    --ep-indigo: #4F57E3;
    --ep-purple: #9B30E0;

    --ep-brand-950: #0D0B30;
    --ep-brand-900: #16134A;
    --ep-brand-850: #1A1754;
    --ep-brand-800: #1E1B5E;
    --ep-brand-700: #3337A8;
    --ep-brand-600: #3F45CC;
    --ep-brand-500: #4F57E3;
    --ep-brand-400: #7780EE;
    --ep-brand-300: #A2A8F6;
    --ep-brand-200: #C9CDFB;
    --ep-brand-100: #E4E6FD;
    --ep-brand-50:  #F2F3FE;

    --ep-primary: var(--ep-brand-500);
    --ep-primary-hover: var(--ep-brand-600);
    --ep-primary-soft: var(--ep-brand-100);
    --ep-primary-rgb: 79, 87, 227;
    --ep-gradient: linear-gradient(135deg, #14B1F8 0%, #4F57E3 52%, #9B30E0 100%);
    --ep-gradient-soft: linear-gradient(135deg, rgba(20, 177, 248, .12) 0%, rgba(79, 87, 227, .12) 50%, rgba(155, 48, 224, .12) 100%);
    --ep-gradient-dark: linear-gradient(160deg, #1E1B5E 0%, #16134A 55%, #0D0B30 100%);
    --ep-gradient-text: linear-gradient(100deg, #14B1F8 0%, #4F57E3 45%, #9B30E0 100%);

    --ep-bg: #F5F6FA;
    --ep-surface: #FFFFFF;
    --ep-surface-2: #F8F9FC;
    --ep-border: #E6E8F0;
    --ep-border-strong: #D4D8E5;
    --ep-text: #101228;
    --ep-text-2: #3A3F5C;
    --ep-muted: #6A7090;
    --ep-faint: #9A9FB8;

    --ep-success: #12A05C;  --ep-success-bg: #E3F6EC; --ep-success-fg: #0B6B3D;
    --ep-warning: #F59E0B;  --ep-warning-bg: #FEF3DC; --ep-warning-fg: #92580A;
    --ep-danger:  #E5484D;  --ep-danger-bg:  #FDECEC; --ep-danger-fg:  #B42318;
    --ep-info:    #0EA5E9;  --ep-info-bg:    #E0F4FD; --ep-info-fg:    #0369A1;
    --ep-violet:  #9B30E0;  --ep-violet-bg:  #F4E8FC; --ep-violet-fg:  #7A1FB5;
    --ep-orange:  #F97316;  --ep-orange-bg:  #FFEDDD; --ep-orange-fg:  #B4500E;

    --ep-r-xs: 6px;
    --ep-r-sm: 8px;
    --ep-r: 12px;
    --ep-r-lg: 16px;
    --ep-r-xl: 22px;
    --ep-r-pill: 999px;

    --ep-shadow-xs: 0 1px 2px rgba(16, 18, 40, .05);
    --ep-shadow-sm: 0 1px 3px rgba(16, 18, 40, .06), 0 1px 2px rgba(16, 18, 40, .04);
    --ep-shadow-md: 0 10px 28px -8px rgba(22, 19, 74, .14), 0 2px 6px rgba(16, 18, 40, .04);
    --ep-shadow-lg: 0 28px 56px -16px rgba(22, 19, 74, .22);
    --ep-shadow-glow: 0 10px 30px -6px rgba(var(--ep-primary-rgb), .45);
    --ep-ring: 0 0 0 4px rgba(var(--ep-primary-rgb), .16);

    --ep-ease: cubic-bezier(.22, 1, .36, 1);
    --ep-ease-spring: cubic-bezier(.34, 1.56, .64, 1);

    --ep-sidebar-w: 264px;
    --ep-topbar-h: 68px;

    /* Bootstrap 5.3 */
    --bs-primary: #4F57E3;
    --bs-primary-rgb: 79, 87, 227;
    --bs-success: #12A05C;
    --bs-success-rgb: 18, 160, 92;
    --bs-info: #0EA5E9;
    --bs-info-rgb: 14, 165, 233;
    --bs-warning: #F59E0B;
    --bs-warning-rgb: 245, 158, 11;
    --bs-danger: #E5484D;
    --bs-danger-rgb: 229, 72, 77;
    --bs-link-color: #3F45CC;
    --bs-link-color-rgb: 63, 69, 204;
    --bs-link-hover-color: #3337A8;
    --bs-link-hover-color-rgb: 51, 55, 168;
    --bs-body-font-family: var(--ep-font);
    --bs-body-color: #101228;
    --bs-body-bg: #F5F6FA;
    --bs-border-color: #E6E8F0;
    --bs-border-radius: 10px;
    --bs-border-radius-sm: 8px;
    --bs-border-radius-lg: 14px;
    --bs-primary-bg-subtle: #E4E6FD;
    --bs-primary-text-emphasis: #3337A8;
    --bs-success-bg-subtle: #E3F6EC;
    --bs-success-text-emphasis: #0B6B3D;
    --bs-focus-ring-color: rgba(79, 87, 227, .2);
}

/* ---------- 2. Base ---------- */
html { -webkit-text-size-adjust: 100%; }
body.ep-app,
body.ep-public {
    font-family: var(--ep-font);
    font-size: 14px;
    line-height: 1.55;
    color: var(--ep-text);
    background: var(--ep-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'cv11', 'ss01';
    overflow-x: hidden;
}
.ep-app h1, .ep-app h2, .ep-app h3, .ep-app h4, .ep-app h5, .ep-app h6,
.ep-public h1, .ep-public h2, .ep-public h3, .ep-public h4, .ep-public h5, .ep-public h6 {
    font-family: var(--ep-font);
    color: var(--ep-text);
    letter-spacing: -.015em;
}
.ep-app a { color: var(--bs-link-color); text-decoration: none; transition: color .2s; }
.ep-app a:hover { color: var(--bs-link-hover-color); }
.ep-app ::selection, .ep-public ::selection { background: var(--ep-brand-200); color: var(--ep-brand-900); }
.ep-app :focus-visible { outline: none; box-shadow: var(--ep-ring); }
.ep-app .table, .ep-app .ep-num, .ep-num { font-variant-numeric: tabular-nums; }

.ep-app *::-webkit-scrollbar { width: 8px; height: 8px; }
.ep-app *::-webkit-scrollbar-track { background: transparent; }
.ep-app *::-webkit-scrollbar-thumb { background: #CBD0DE; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
.ep-app *::-webkit-scrollbar-thumb:hover { background: #AAB0C6; background-clip: content-box; }

/* ---------- 3. Layout (shell) ---------- */
.ep-main {
    margin-left: var(--ep-sidebar-w);
    padding-top: var(--ep-topbar-h);
    min-height: 100vh;
    transition: margin-left .35s var(--ep-ease);
}
.ep-main .page-wrapper { margin: 0 !important; padding: 0 !important; min-height: 0 !important; left: 0; background: transparent; }
.ep-main .page-wrapper > .content,
.ep-main .page-wrapper .content.container-fluid { padding: 28px 32px 56px; max-width: 1760px; margin: 0 auto; }
.ep-main > .container-fluid { padding: 28px 32px 56px; max-width: 1760px; }

@media (max-width: 1199.98px) {
    .ep-main .page-wrapper > .content,
    .ep-main .page-wrapper .content.container-fluid,
    .ep-main > .container-fluid { padding: 24px 20px 48px; }
}
@media (max-width: 991.98px) {
    .ep-main { margin-left: 0; }
}
@media (max-width: 575.98px) {
    .ep-main .page-wrapper > .content,
    .ep-main .page-wrapper .content.container-fluid,
    .ep-main > .container-fluid { padding: 18px 14px 40px; }
}

/* Entrée de page douce */
.ep-js .ep-main .page-wrapper > .content > *,
.ep-js .ep-main > .container-fluid > * {
    animation: ep-page-in .55s var(--ep-ease) both;
}
.ep-js .ep-main .page-wrapper > .content > *:nth-child(2) { animation-delay: .04s; }
.ep-js .ep-main .page-wrapper > .content > *:nth-child(3) { animation-delay: .08s; }
.ep-js .ep-main .page-wrapper > .content > *:nth-child(4) { animation-delay: .12s; }
.ep-js .ep-main .page-wrapper > .content > *:nth-child(n+5) { animation-delay: .16s; }
@keyframes ep-page-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- 4. Sidebar ---------- */
.ep-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--ep-sidebar-w);
    background: var(--ep-gradient-dark);
    color: rgba(255, 255, 255, .72);
    display: flex;
    flex-direction: column;
    z-index: 1040;
    transition: transform .4s var(--ep-ease);
    isolation: isolate;
}
.ep-sidebar::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(600px 300px at -20% -10%, rgba(20, 177, 248, .20), transparent 60%),
        radial-gradient(420px 280px at 120% 110%, rgba(155, 48, 224, .22), transparent 60%);
    pointer-events: none;
    z-index: -1;
}
.ep-sidebar__brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    height: var(--ep-topbar-h);
    padding: 0 20px;
    flex-shrink: 0;
}
.ep-sidebar__brand a { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.ep-sidebar__brand a:hover { color: #fff; }
.ep-brand-name { font-weight: 800; font-size: 19px; letter-spacing: -.02em; color: inherit; }
.ep-sidebar__close {
    display: none;
    width: 34px; height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .06);
    color: #fff;
    align-items: center;
    justify-content: center;
}
.ep-sidebar__scroll { flex: 1; overflow-y: auto; padding: 6px 14px 16px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.14) transparent; }
.ep-sidebar__scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); background-clip: content-box; }

.ep-nav { list-style: none; margin: 0; padding: 0; }
.ep-nav__label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .38);
    padding: 18px 12px 8px;
}
.ep-nav__label:first-child { padding-top: 6px; }
.ep-nav__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    margin: 1px 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: rgba(255, 255, 255, .74);
    font-size: 13.5px;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    transition: background .2s, color .2s, transform .2s var(--ep-ease);
    cursor: pointer;
}
.ep-app .ep-nav__link { color: rgba(255, 255, 255, .74); }
.ep-nav__link > i:first-child { width: 20px; text-align: center; font-size: 15px; opacity: .85; transition: transform .25s var(--ep-ease-spring); }
.ep-app .ep-nav__link:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.ep-nav__link:hover > i:first-child { transform: scale(1.12); }
.ep-app .ep-nav__link.is-active {
    background: linear-gradient(135deg, rgba(20, 177, 248, .95), rgba(79, 87, 227, .95));
    color: #fff;
    font-weight: 600;
    box-shadow: 0 8px 20px -8px rgba(79, 87, 227, .7), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.ep-nav__link.is-active > i:first-child { opacity: 1; }
.ep-nav__link.is-soon { cursor: default; opacity: .55; }
.ep-app .ep-nav__link.is-soon:hover { background: transparent; color: rgba(255, 255, 255, .74); }
.ep-nav__text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep-nav__badge {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ep-nav__badge--hot { background: #F59E0B; color: #3A2400; }
.ep-nav__soon {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .2);
    color: rgba(255, 255, 255, .6);
}
.ep-nav__chev { font-size: 11px; opacity: .6; transition: transform .3s var(--ep-ease); }
.ep-nav__item.is-open > .ep-nav__link .ep-nav__chev { transform: rotate(90deg); }
.ep-nav__item.is-open > .ep-nav__link { color: #fff; }

.ep-subnav {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .35s var(--ep-ease), opacity .3s;
    opacity: 0;
}
.ep-nav__item.is-open > .ep-subnav { grid-template-rows: 1fr; opacity: 1; }
.ep-subnav > ul { overflow: hidden; list-style: none; margin: 0; padding: 0 0 0 22px; position: relative; }
.ep-subnav > ul::before { content: ''; position: absolute; left: 21px; top: 4px; bottom: 8px; width: 1px; background: rgba(255, 255, 255, .12); }
.ep-subnav a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 8px 20px;
    margin: 1px 0;
    border-radius: 8px;
    font-size: 13px;
    position: relative;
    transition: background .2s, color .2s, padding .25s var(--ep-ease);
}
.ep-app .ep-subnav a { color: rgba(255, 255, 255, .6); }
.ep-app .ep-subnav a:hover { color: #fff; background: rgba(255, 255, 255, .05); padding-left: 24px; }
.ep-app .ep-subnav a.is-active { color: #fff; font-weight: 600; }
.ep-subnav a.is-active::before { content: ''; position: absolute; left: -2px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--ep-brand-400); box-shadow: 0 0 0 3px rgba(20, 177, 248, .25); }
.ep-subnav .badge { margin-left: auto; }

.ep-sidebar__footer { padding: 14px; border-top: 1px solid rgba(255, 255, 255, .08); flex-shrink: 0; }
.ep-account {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .08);
    color: #fff;
    text-decoration: none;
    transition: background .2s;
}
.ep-app .ep-account, .ep-app .ep-account:hover { color: #fff; }
.ep-account:hover { background: rgba(255, 255, 255, .1); }
.ep-account img { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; }
.ep-account__name { font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep-account__role { font-size: 11.5px; color: rgba(255, 255, 255, .55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ep-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 8, 40, .45);
    backdrop-filter: blur(3px);
    z-index: 1035;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility .3s;
}

@media (max-width: 991.98px) {
    .ep-sidebar { transform: translateX(-100%); box-shadow: none; width: min(300px, 86vw); }
    .ep-sidebar__close { display: inline-flex; }
    body.ep-sidebar-open .ep-sidebar { transform: none; box-shadow: 20px 0 60px rgba(0, 0, 0, .25); }
    body.ep-sidebar-open .ep-backdrop { opacity: 1; visibility: visible; }
    body.ep-sidebar-open { overflow: hidden; }
}

/* ---------- 5. Topbar ---------- */
.ep-topbar {
    position: fixed;
    top: 0;
    right: 0;
    left: var(--ep-sidebar-w);
    height: var(--ep-topbar-h);
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 28px;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: saturate(1.6) blur(14px);
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color .25s, box-shadow .25s, left .35s var(--ep-ease);
}
.ep-topbar.is-scrolled { border-bottom-color: var(--ep-border); box-shadow: 0 6px 24px -12px rgba(16, 18, 40, .12); }
.ep-topbar__burger {
    display: none;
    width: 40px; height: 40px;
    border-radius: 11px;
    border: 1px solid var(--ep-border);
    background: #fff;
    color: var(--ep-text);
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
.ep-topbar__brand { display: none; }
.ep-search {
    position: relative;
    flex: 1;
    max-width: 440px;
}
.ep-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ep-faint); font-size: 14px; pointer-events: none; }
.ep-search input {
    width: 100%;
    height: 42px;
    padding: 0 64px 0 40px;
    border: 1px solid var(--ep-border);
    border-radius: 12px;
    background: var(--ep-surface-2);
    font-size: 13.5px;
    color: var(--ep-text);
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.ep-search input::placeholder { color: var(--ep-faint); }
.ep-search input:focus { outline: none; background: #fff; border-color: var(--ep-brand-400); box-shadow: var(--ep-ring); }
.ep-search kbd {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    font-family: var(--ep-font); font-size: 11px; font-weight: 600;
    padding: 3px 7px; border-radius: 6px;
    background: #fff; color: var(--ep-muted); border: 1px solid var(--ep-border); box-shadow: none;
}
.ep-topbar__actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.ep-icon-btn {
    position: relative;
    height: 40px;
    min-width: 40px;
    padding: 0 10px;
    border-radius: 11px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--ep-text-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 16px;
    font-weight: 600;
    transition: background .2s, color .2s, border-color .2s;
}
.ep-icon-btn:hover, .ep-icon-btn[aria-expanded="true"] { background: var(--ep-surface-2); border-color: var(--ep-border); color: var(--ep-text); }
.ep-icon-btn .ep-icon-btn__txt { font-size: 12.5px; }
.ep-dot-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--ep-danger);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    animation: ep-badge-pop .5s var(--ep-ease-spring);
}
@keyframes ep-badge-pop { from { transform: scale(0); } to { transform: scale(1); } }
.ep-topbar__sep { width: 1px; height: 28px; background: var(--ep-border); margin: 0 6px; }
.ep-env {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--ep-success-bg);
    color: var(--ep-success-fg);
    font-size: 12px;
    font-weight: 700;
}
.ep-pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ep-success); position: relative; }
.ep-pulse-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: ep-ping 1.8s var(--ep-ease) infinite; }
@keyframes ep-ping { 0% { transform: scale(1); opacity: .7; } 80%, 100% { transform: scale(2.6); opacity: 0; } }

.ep-user-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 10px 4px 4px;
    border-radius: 12px;
    border: 1px solid transparent;
    background: transparent;
    transition: background .2s, border-color .2s;
}
.ep-user-btn:hover, .ep-user-btn[aria-expanded="true"] { background: var(--ep-surface-2); border-color: var(--ep-border); }
.ep-user-btn img { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; }
.ep-user-btn__name { display: block; font-size: 13px; font-weight: 700; color: var(--ep-text); line-height: 1.2; text-align: left; }
.ep-user-btn__role { display: block; font-size: 11.5px; color: var(--ep-muted); line-height: 1.2; text-align: left; }
.ep-user-btn .fa-chevron-down { font-size: 10px; color: var(--ep-faint); }

/* Menus déroulants de la topbar */
.ep-topbar .dropdown-menu { width: 360px; max-width: calc(100vw - 24px); padding: 0; overflow: hidden; }
.ep-dd-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--ep-border); }
.ep-dd-head h6 { margin: 0; font-size: 14px; font-weight: 700; }
.ep-dd-head a { font-size: 12.5px; font-weight: 600; }
.ep-dd-body { max-height: 380px; overflow-y: auto; }
.ep-dd-list { list-style: none; margin: 0; padding: 6px; }
.ep-dd-list > li > a {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px;
    border-radius: 10px;
    color: var(--ep-text);
    text-decoration: none;
    transition: background .15s;
}
.ep-dd-list > li > a:hover { background: var(--ep-surface-2); color: var(--ep-text); }
.ep-dd-list img { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.ep-dd-ico { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--ep-success-bg); color: var(--ep-success-fg); }
.ep-dd-title { display: block; font-size: 13px; font-weight: 700; line-height: 1.3; }
.ep-dd-text { display: block; font-size: 12.5px; color: var(--ep-muted); line-height: 1.4; }
.ep-dd-time { display: block; font-size: 11px; color: var(--ep-faint); margin-top: 3px; }
.ep-dd-empty { padding: 32px 16px; text-align: center; color: var(--ep-muted); font-size: 13px; }
.ep-dd-empty i { display: block; font-size: 26px; color: var(--ep-border-strong); margin-bottom: 8px; }

.ep-currency-search { position: relative; padding: 10px 12px 6px; }
.ep-currency-search i { position: absolute; left: 24px; top: 50%; margin-top: 2px; transform: translateY(-50%); color: var(--ep-faint); font-size: 13px; }
.ep-currency-search input { padding-left: 34px; height: 38px; font-size: 13px; }
.currency-list { list-style: none; margin: 0; padding: 6px; max-height: 300px; overflow-y: auto; }
.currency-list .currency-link {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 10px; border-radius: 10px;
    color: var(--ep-text); text-decoration: none; position: relative;
    transition: background .15s;
}
.currency-list .currency-link:hover { background: var(--ep-surface-2); color: var(--ep-text); }
.currency-list .currency-item.active .currency-link { background: var(--ep-brand-50); }
.currency-list .currency-symbol { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--ep-brand-100); color: var(--ep-brand-700); font-weight: 800; font-size: 14px; }
.currency-list .currency-info { flex: 1; min-width: 0; }
.currency-list .currency-code { display: block; font-size: 13px; font-weight: 700; }
.currency-list .currency-name { display: block; font-size: 11.5px; color: var(--ep-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.currency-list .currency-rate { text-align: right; padding-right: 22px; }
.currency-list .currency-rate small { display: block; font-size: 10.5px; color: var(--ep-faint); }
.currency-list .currency-rate strong { display: block; font-size: 12px; color: var(--ep-text-2); }
.currency-list .currency-check { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--ep-success); font-size: 13px; }

.ep-user-card { display: flex; gap: 12px; align-items: center; padding: 16px; background: linear-gradient(135deg, var(--ep-brand-50), #fff); border-bottom: 1px solid var(--ep-border); }
.ep-user-card img { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; }
.ep-user-card h6 { margin: 0; font-size: 14px; font-weight: 700; }
.ep-user-card p { margin: 0; font-size: 12.5px; color: var(--ep-muted); }
.ep-topbar .dropdown-menu.ep-dd-sm { width: 240px; padding: 6px; }

@media (max-width: 991.98px) {
    .ep-topbar { left: 0; padding: 0 14px; gap: 10px; }
    .ep-topbar__burger { display: inline-flex; }
    .ep-topbar__brand { display: flex; align-items: center; gap: 8px; color: var(--ep-text); font-weight: 800; }
    .ep-search { display: none; }
}
@media (max-width: 767.98px) {
    .ep-user-btn__meta, .ep-user-btn .fa-chevron-down, .ep-env, .ep-topbar__sep, .ep-icon-btn .ep-icon-btn__txt { display: none !important; }
    .ep-topbar__actions { gap: 2px; }
}
@media (max-width: 420px) {
    .ep-topbar__brand .ep-brand-name { display: none; }
}

/* ---------- 6. Page header ---------- */
.ep-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}
.ep-page-head__title { font-size: 24px; font-weight: 800; letter-spacing: -.025em; margin: 0; line-height: 1.2; }
.ep-page-head__sub { margin: 4px 0 0; color: var(--ep-muted); font-size: 14px; }
.ep-page-head__actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
@media (max-width: 575.98px) {
    .ep-page-head { align-items: stretch; }
    .ep-page-head__title { font-size: 21px; }
    .ep-page-head__actions { width: 100%; }
    .ep-page-head__actions > .ep-btn, .ep-page-head__actions > .btn { flex: 1 1 auto; }
}
.ep-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--ep-brand-600); text-transform: uppercase; letter-spacing: .08em; }

/* Template (SmartHR) : .page-header / .breadcrumb harmonisés */
.ep-app .page-wrapper .content .page-header { margin-bottom: 24px; }
.ep-app .page-wrapper .content .page-header .page-title,
.ep-app .page-header .page-title { font-size: 24px; font-weight: 800; letter-spacing: -.025em; color: var(--ep-text); margin-bottom: 4px; }
.ep-app .breadcrumb { background: transparent; padding: 0; margin: 0; font-size: 13px; }
.ep-app .breadcrumb-item, .ep-app .breadcrumb-item a { color: var(--ep-muted); }
.ep-app .breadcrumb-item a:hover { color: var(--ep-brand-600); }
.ep-app .breadcrumb-item.active { color: var(--ep-text-2); font-weight: 600; }
.ep-app .breadcrumb-item + .breadcrumb-item::before { color: var(--ep-faint); }

/* ---------- 7. Cards ---------- */
.ep-app .card,
.ep-card {
    background: var(--ep-surface);
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-r-lg);
    box-shadow: var(--ep-shadow-xs);
    transition: box-shadow .3s var(--ep-ease), transform .3s var(--ep-ease), border-color .3s;
    margin-bottom: 0;
}
.ep-app .card:hover { transform: none; }
.ep-app .card-header {
    background: transparent;
    border-bottom: 1px solid var(--ep-border);
    padding: 16px 20px;
    font-weight: 700;
}
.ep-app .card-header:first-child { border-radius: var(--ep-r-lg) var(--ep-r-lg) 0 0; }
.ep-app .card-body { padding: 20px; }
.ep-app .card-footer { background: transparent; border-top: 1px solid var(--ep-border); padding: 14px 20px; }
.ep-app .card-title { font-size: 15px; font-weight: 700; color: var(--ep-text); letter-spacing: -.01em; }

.ep-card { padding: 20px; }
.ep-card--flush { padding: 0; }
.ep-card--hover:hover, .ep-lift:hover { box-shadow: var(--ep-shadow-md); transform: translateY(-3px); border-color: var(--ep-border-strong); }
.ep-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.ep-card--flush .ep-card-head { padding: 18px 20px 0; }
.ep-card-title { font-size: 15px; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.ep-card-sub { font-size: 12.5px; color: var(--ep-muted); margin: 2px 0 0; }

.ep-grid { display: grid; gap: 20px; }
.ep-grid-kpi { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ep-grid-2-1 { display: grid; gap: 20px; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.ep-grid-1-1 { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ep-grid-3 { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1199.98px) { .ep-grid-2-1, .ep-grid-3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767.98px) { .ep-grid-1-1 { grid-template-columns: minmax(0, 1fr); } }
.ep-section { margin-top: 28px; }

/* ---------- 8. KPI ---------- */
.ep-kpi {
    position: relative;
    background: var(--ep-surface);
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-r-lg);
    padding: 18px 20px;
    box-shadow: var(--ep-shadow-xs);
    overflow: hidden;
    transition: box-shadow .3s var(--ep-ease), transform .3s var(--ep-ease);
}
.ep-kpi:hover { box-shadow: var(--ep-shadow-md); transform: translateY(-2px); }
.ep-kpi__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.ep-kpi__label { font-size: 12.5px; font-weight: 600; color: var(--ep-muted); }
.ep-kpi__value { font-size: 24px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; color: var(--ep-text); font-variant-numeric: tabular-nums; word-break: break-word; }
.ep-kpi__value small { font-size: 13px; font-weight: 700; color: var(--ep-muted); letter-spacing: 0; margin-left: 2px; }
.ep-kpi__foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--ep-muted); flex-wrap: wrap; }
.ep-kpi__icon {
    width: 38px; height: 38px;
    border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 15px;
    background: var(--ep-brand-100);
    color: var(--ep-brand-700);
    flex-shrink: 0;
}
.ep-kpi--hero {
    background: var(--ep-gradient-dark);
    border-color: transparent;
    color: #fff;
}
.ep-kpi--hero::after {
    content: '';
    position: absolute;
    width: 240px; height: 240px;
    right: -80px; top: -110px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(155, 48, 224, .5), transparent 65%);
    pointer-events: none;
}
.ep-kpi--hero .ep-kpi__label { color: rgba(255, 255, 255, .7); }
.ep-kpi--hero .ep-kpi__value { color: #fff; }
.ep-kpi--hero .ep-kpi__value small { color: rgba(255, 255, 255, .7); }
.ep-kpi--hero .ep-kpi__foot { color: rgba(255, 255, 255, .7); }
.ep-kpi--hero .ep-kpi__icon { background: rgba(255, 255, 255, .12); color: #fff; }

.ep-delta { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.ep-delta--up { background: var(--ep-success-bg); color: var(--ep-success-fg); }
.ep-delta--down { background: var(--ep-danger-bg); color: var(--ep-danger-fg); }

/* Couleurs d'icônes */
.ep-tone-green  { background: var(--ep-success-bg) !important; color: var(--ep-success-fg) !important; }
.ep-tone-amber  { background: var(--ep-warning-bg) !important; color: var(--ep-warning-fg) !important; }
.ep-tone-red    { background: var(--ep-danger-bg) !important;  color: var(--ep-danger-fg) !important; }
.ep-tone-blue   { background: var(--ep-info-bg) !important;    color: var(--ep-info-fg) !important; }
.ep-tone-violet { background: var(--ep-violet-bg) !important;  color: var(--ep-violet-fg) !important; }
.ep-tone-orange { background: var(--ep-orange-bg) !important;  color: var(--ep-orange-fg) !important; }
.ep-tone-gray   { background: #EEF0F6 !important; color: var(--ep-text-2) !important; }

/* ---------- 9. Buttons ---------- */
.ep-app .btn {
    --bs-btn-font-weight: 600;
    --bs-btn-font-size: 13.5px;
    --bs-btn-padding-x: 16px;
    --bs-btn-padding-y: 9px;
    --bs-btn-border-radius: 10px;
    --bs-btn-focus-box-shadow: var(--ep-ring);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: background-color .2s, border-color .2s, color .2s, box-shadow .25s var(--ep-ease), transform .2s var(--ep-ease);
}
.ep-app .btn:active { transform: scale(.98); }
.ep-app .btn-sm { --bs-btn-padding-x: 11px; --bs-btn-padding-y: 6px; --bs-btn-font-size: 12.5px; --bs-btn-border-radius: 8px; }
.ep-app .btn-lg { --bs-btn-padding-x: 22px; --bs-btn-padding-y: 12px; --bs-btn-font-size: 15px; --bs-btn-border-radius: 12px; }
.ep-app .btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #4F57E3;
    --bs-btn-border-color: #4F57E3;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #3F45CC;
    --bs-btn-hover-border-color: #3F45CC;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #3337A8;
    --bs-btn-active-border-color: #3337A8;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #A2A8F6;
    --bs-btn-disabled-border-color: #A2A8F6;
    box-shadow: 0 1px 2px rgba(16, 18, 40, .08), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.ep-app .btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: #4F57E3;
    --bs-btn-border-color: #4F57E3;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #3F45CC;
    --bs-btn-hover-border-color: #3F45CC;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0B6B3D;
    --bs-btn-active-border-color: #0B6B3D;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #A2A8F6;
    --bs-btn-disabled-border-color: #A2A8F6;
}
.ep-app .btn-primary:hover { box-shadow: var(--ep-shadow-glow); }

/* Le thème d'origine (assets/css/style.css) fixe des couleurs en dur (orange) sur les variantes
   Bootstrap : on réapplique les variables ci-dessus avec une spécificité supérieure. */
.ep-app :is(.btn-primary, .btn-success, .btn-light, .btn-white, .btn-secondary, .btn-danger, .btn-warning, .btn-info,
            .btn-outline-primary, .btn-outline-success, .btn-outline-secondary, .btn-outline-danger, .btn-outline-info, .btn-outline-warning) {
    background-color: var(--bs-btn-bg);
    border: var(--bs-btn-border-width, 1px) solid var(--bs-btn-border-color);
    color: var(--bs-btn-color) !important;
}
.ep-app :is(.btn-primary, .btn-success, .btn-light, .btn-white, .btn-secondary, .btn-danger, .btn-warning, .btn-info,
            .btn-outline-primary, .btn-outline-success, .btn-outline-secondary, .btn-outline-danger, .btn-outline-info, .btn-outline-warning):is(:hover, :focus-visible) {
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
    color: var(--bs-btn-hover-color) !important;
}
.ep-app :is(.btn-primary, .btn-success, .btn-light, .btn-white, .btn-secondary, .btn-danger, .btn-warning, .btn-info,
            .btn-outline-primary, .btn-outline-success, .btn-outline-secondary, .btn-outline-danger, .btn-outline-info, .btn-outline-warning):is(:active, .active):not(:disabled):not(.disabled) {
    background-color: var(--bs-btn-active-bg, var(--bs-btn-hover-bg));
    border-color: var(--bs-btn-active-border-color, var(--bs-btn-hover-border-color));
}
.ep-app :is(.btn-primary, .btn-success, .btn-danger, .btn-info):is(:disabled, .disabled) {
    background-color: var(--bs-btn-disabled-bg);
    border-color: var(--bs-btn-disabled-border-color);
}
.ep-app .btn-outline-primary {
    --bs-btn-color: #3F45CC;
    --bs-btn-border-color: #C9CDFB;
    --bs-btn-hover-color: #3337A8;
    --bs-btn-hover-bg: #F2F3FE;
    --bs-btn-hover-border-color: #A2A8F6;
    --bs-btn-active-color: #3337A8;
    --bs-btn-active-bg: #E4E6FD;
    --bs-btn-active-border-color: #A2A8F6;
    background: #fff;
}
.ep-app .btn-outline-success {
    --bs-btn-color: #0B6B3D;
    --bs-btn-border-color: #C9CDFB;
    --bs-btn-hover-color: #0B6B3D;
    --bs-btn-hover-bg: #F2F3FE;
    --bs-btn-hover-border-color: #A2A8F6;
    background: #fff;
}
.ep-app .btn-light,
.ep-app .btn-white,
.ep-app .btn-secondary,
.ep-app .btn-outline-secondary {
    --bs-btn-color: #101228;
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #E6E8F0;
    --bs-btn-hover-color: #101228;
    --bs-btn-hover-bg: #F5F6FA;
    --bs-btn-hover-border-color: #D4D8E5;
    --bs-btn-active-color: #101228;
    --bs-btn-active-bg: #EEF0F6;
    --bs-btn-active-border-color: #D4D8E5;
    box-shadow: var(--ep-shadow-xs);
}
.ep-app .btn-danger {
    --bs-btn-bg: #E5484D; --bs-btn-border-color: #E5484D;
    --bs-btn-hover-bg: #CC3338; --bs-btn-hover-border-color: #CC3338;
    --bs-btn-active-bg: #B42318; --bs-btn-active-border-color: #B42318;
}
.ep-app .btn-outline-danger {
    --bs-btn-color: #B42318; --bs-btn-border-color: #F6C6C7;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #E5484D; --bs-btn-hover-border-color: #E5484D;
    background: #fff;
}
.ep-app .btn-warning {
    --bs-btn-color: #3A2400; --bs-btn-bg: #FDBA3B; --bs-btn-border-color: #FDBA3B;
    --bs-btn-hover-color: #3A2400; --bs-btn-hover-bg: #F59E0B; --bs-btn-hover-border-color: #F59E0B;
}
.ep-app .btn-info {
    --bs-btn-color: #fff; --bs-btn-bg: #2E7CF6; --bs-btn-border-color: #2E7CF6;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #1D5BC4; --bs-btn-hover-border-color: #1D5BC4;
}
.ep-app .btn-outline-info { --bs-btn-color: #1D5BC4; --bs-btn-border-color: #BFD6FB; --bs-btn-hover-bg: #E8F1FE; --bs-btn-hover-color: #1D5BC4; --bs-btn-hover-border-color: #9DC0F8; background: #fff; }
.ep-app .btn-outline-warning { --bs-btn-color: #92580A; --bs-btn-border-color: #F8D99A; --bs-btn-hover-bg: #FEF3DC; --bs-btn-hover-color: #92580A; --bs-btn-hover-border-color: #F5C25B; background: #fff; }
.ep-app .btn-link { --bs-btn-color: #3F45CC; --bs-btn-hover-color: #3337A8; }

.ep-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 42px; padding: 0 18px;
    border-radius: 11px;
    border: 1px solid transparent;
    font-family: var(--ep-font);
    font-size: 14px; font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s, border-color .2s, color .2s, box-shadow .3s var(--ep-ease), transform .2s var(--ep-ease);
}
.ep-btn:active { transform: scale(.98); }
.ep-btn--sm { height: 34px; padding: 0 12px; font-size: 12.5px; border-radius: 9px; gap: 6px; }
.ep-btn--lg { height: 50px; padding: 0 24px; font-size: 15px; border-radius: 13px; }
.ep-btn--primary, a.ep-btn--primary { background: var(--ep-primary); color: #fff; box-shadow: 0 1px 2px rgba(16, 18, 40, .1), inset 0 1px 0 rgba(255, 255, 255, .15); }
.ep-btn--primary:hover, a.ep-btn--primary:hover { background: var(--ep-primary-hover); color: #fff; box-shadow: var(--ep-shadow-glow); }
.ep-btn--dark, a.ep-btn--dark { background: var(--ep-brand-900); color: #fff; }
.ep-btn--dark:hover, a.ep-btn--dark:hover { background: var(--ep-brand-800); color: #fff; }
.ep-btn--ghost, a.ep-btn--ghost { background: #fff; color: var(--ep-text); border-color: var(--ep-border); box-shadow: var(--ep-shadow-xs); }
.ep-btn--ghost:hover, a.ep-btn--ghost:hover { background: var(--ep-surface-2); border-color: var(--ep-border-strong); color: var(--ep-text); }
.ep-btn--soft, a.ep-btn--soft { background: var(--ep-brand-100); color: var(--ep-brand-700); }
.ep-btn--soft:hover, a.ep-btn--soft:hover { background: var(--ep-brand-200); color: var(--ep-brand-800); }
.ep-btn--white, a.ep-btn--white { background: #fff; color: var(--ep-brand-800); }
.ep-btn--white:hover, a.ep-btn--white:hover { color: var(--ep-brand-900); box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .35); transform: translateY(-1px); }
.ep-btn .ep-arrow, .ep-link-arrow .ep-arrow { transition: transform .25s var(--ep-ease); }
.ep-btn:hover .ep-arrow, .ep-link-arrow:hover .ep-arrow { transform: translateX(4px); }
.ep-link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; }

/* ---------- 10. Badges ---------- */
.ep-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px; font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
    background: #EEF0F6; color: var(--ep-text-2);
}
.ep-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.ep-badge--plain::before { display: none; }
.ep-badge--success, .ep-badge--completed, .ep-badge--succes, .ep-badge--paid, .ep-badge--approved, .ep-badge--active { background: var(--ep-success-bg); color: var(--ep-success-fg); }
.ep-badge--warning, .ep-badge--pending, .ep-badge--processing, .ep-badge--en_attente { background: var(--ep-warning-bg); color: var(--ep-warning-fg); }
.ep-badge--danger, .ep-badge--failed, .ep-badge--cancelled, .ep-badge--canceled, .ep-badge--rejected, .ep-badge--echec, .ep-badge--expired { background: var(--ep-danger-bg); color: var(--ep-danger-fg); }
.ep-badge--info, .ep-badge--refunded { background: var(--ep-info-bg); color: var(--ep-info-fg); }
.ep-badge--violet { background: var(--ep-violet-bg); color: var(--ep-violet-fg); }
.ep-badge--brand { background: var(--ep-brand-100); color: var(--ep-brand-700); }
.ep-gradient-text { background: var(--ep-gradient-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--ep-brand-500); }
.ep-badge--orange { background: var(--ep-orange-bg); color: var(--ep-orange-fg); }

/* Badges Bootstrap en version "soft" */
.ep-app .badge { font-weight: 700; font-size: 11.5px; padding: .38em .75em; border-radius: 999px; letter-spacing: 0; }
.ep-app .badge.bg-success, .ep-app .badge.badge-success { background: var(--ep-success-bg) !important; color: var(--ep-success-fg) !important; }
.ep-app .badge.bg-primary, .ep-app .badge.badge-primary { background: var(--ep-brand-100) !important; color: var(--ep-brand-700) !important; }
.ep-app .badge.bg-warning, .ep-app .badge.badge-warning { background: var(--ep-warning-bg) !important; color: var(--ep-warning-fg) !important; }
.ep-app .badge.bg-danger, .ep-app .badge.badge-danger { background: var(--ep-danger-bg) !important; color: var(--ep-danger-fg) !important; }
.ep-app .badge.bg-info, .ep-app .badge.badge-info { background: var(--ep-info-bg) !important; color: var(--ep-info-fg) !important; }
.ep-app .badge.bg-secondary, .ep-app .badge.badge-secondary, .ep-app .badge.bg-light { background: #EEF0F6 !important; color: var(--ep-text-2) !important; }
.ep-app .badge.bg-dark { background: var(--ep-brand-900) !important; color: #fff !important; }
.ep-app .ep-sidebar .badge { background: rgba(255, 255, 255, .14) !important; color: #fff !important; }
.ep-app .ep-sidebar .badge.bg-warning { background: #F59E0B !important; color: #3A2400 !important; }

/* ---------- 11. Tables ---------- */
.ep-app .table {
    --bs-table-bg: transparent;
    --bs-table-hover-bg: #F8F9FC;
    --bs-table-striped-bg: #FAFBFD;
    --bs-table-border-color: #EEF0F5;
    margin-bottom: 0;
    font-size: 13.5px;
    color: var(--ep-text);
    vertical-align: middle;
}
.ep-app .table > thead > tr > th,
.ep-app .table > thead th {
    background: var(--ep-surface-2);
    color: var(--ep-muted);
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 12px 16px;
    border-bottom: 1px solid var(--ep-border);
    white-space: nowrap;
}
.ep-app .table > tbody > tr > td { padding: 13px 16px; border-bottom-color: #EEF0F5; }
.ep-app .table > tbody > tr { transition: background .15s; }
.ep-app .table-hover > tbody > tr:hover > * { --bs-table-bg-state: #F8F9FC; }
.ep-app .table-responsive { border-radius: inherit; }
.ep-app .card > .table-responsive:last-child .table > tbody > tr:last-child > td,
.ep-app .card > .card-body.p-0 .table > tbody > tr:last-child > td { border-bottom: 0; }

.ep-table-wrap { background: var(--ep-surface); border: 1px solid var(--ep-border); border-radius: var(--ep-r-lg); box-shadow: var(--ep-shadow-xs); overflow: hidden; }
.ep-table-scroll { overflow-x: auto; }
.ep-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.ep-table thead th {
    position: sticky; top: 0; z-index: 1;
    background: var(--ep-surface-2);
    color: var(--ep-muted);
    font-size: 11.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    text-align: left;
    padding: 12px 18px;
    border-bottom: 1px solid var(--ep-border);
    white-space: nowrap;
}
.ep-table tbody td { padding: 13px 18px; border-bottom: 1px solid #EEF0F5; vertical-align: middle; }
.ep-table tbody tr:last-child td { border-bottom: 0; }
.ep-table tbody tr { transition: background .15s; }
.ep-table tbody tr:hover td { background: #F8F9FC; }
.ep-table .text-end, .ep-table .ep-right { text-align: right; }
.ep-table-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--ep-border); }
.ep-table-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 18px; border-top: 1px solid var(--ep-border); font-size: 12.5px; color: var(--ep-muted); }

.ep-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ep-toolbar .ep-grow { flex: 1 1 220px; }
.ep-input, .ep-select {
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--ep-border-strong);
    border-radius: 10px;
    background: #fff;
    font-family: var(--ep-font);
    font-size: 13px;
    color: var(--ep-text);
    transition: border-color .2s, box-shadow .2s;
}
.ep-select { padding-right: 30px; appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236A7090' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center; }
.ep-input:focus, .ep-select:focus { outline: none; border-color: var(--ep-brand-400); box-shadow: var(--ep-ring); }
.ep-input-icon { position: relative; }
.ep-input-icon > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ep-faint); font-size: 13px; pointer-events: none; }
.ep-input-icon > .ep-input { padding-left: 34px; width: 100%; }
.ep-pages { display: flex; gap: 4px; flex-wrap: wrap; }
.ep-page {
    min-width: 32px; height: 32px; padding: 0 8px;
    border-radius: 8px;
    border: 1px solid var(--ep-border);
    background: #fff;
    color: var(--ep-text-2);
    font-size: 12.5px; font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s, border-color .15s, color .15s;
}
.ep-page:hover:not(:disabled):not(.ep-page--gap) { background: var(--ep-surface-2); border-color: var(--ep-border-strong); }
.ep-page.is-active { background: var(--ep-primary); border-color: var(--ep-primary); color: #fff; }
.ep-page:disabled { opacity: .4; cursor: not-allowed; }
.ep-page--gap { border-color: transparent; background: transparent; }
.ep-page i { font-size: 10px; }
tr[hidden] { display: none !important; }

.ep-id { font-family: var(--ep-font-mono); font-size: 12.5px; color: var(--ep-text-2); font-weight: 500; }
.ep-party { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ep-party__name { font-weight: 600; font-size: 13.5px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep-party__sub { font-size: 12px; color: var(--ep-muted); line-height: 1.25; }
.ep-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
    background: var(--ep-brand-100); color: var(--ep-brand-700);
    object-fit: cover;
}
.ep-avatar--sm { width: 28px; height: 28px; font-size: 11px; }
.ep-avatar--lg { width: 48px; height: 48px; font-size: 16px; }
.ep-method { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.ep-method__ico { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; background: #EEF0F6; color: var(--ep-text-2); flex-shrink: 0; }
.ep-amount { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ep-amount small { font-weight: 600; color: var(--ep-muted); font-size: 11.5px; margin-left: 2px; }
.ep-amount--in { color: var(--ep-success-fg); }
.ep-amount--out { color: var(--ep-danger-fg); }

.ep-empty { text-align: center; padding: 48px 20px; color: var(--ep-muted); }
.ep-empty__ico { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 22px; background: var(--ep-surface-2); color: var(--ep-faint); border: 1px dashed var(--ep-border-strong); }
.ep-empty h6 { font-size: 14px; font-weight: 700; margin: 0 0 4px; color: var(--ep-text); }
.ep-empty p { margin: 0; font-size: 13px; }

/* ---------- 12. Forms ---------- */
.ep-app .form-control,
.ep-app .form-select {
    min-height: 42px;
    padding: 9px 13px;
    font-size: 14px;
    color: var(--ep-text);
    background-color: #fff;
    border: 1px solid var(--ep-border-strong);
    border-radius: 10px;
    box-shadow: var(--ep-shadow-xs);
    transition: border-color .2s, box-shadow .2s;
}
.ep-app .form-select { padding-right: 36px; }
.ep-app textarea.form-control { min-height: 96px; }
.ep-app .form-control-sm, .ep-app .form-select-sm { min-height: 34px; padding: 5px 10px; font-size: 13px; border-radius: 8px; }
.ep-app .form-control-lg, .ep-app .form-select-lg { min-height: 50px; font-size: 15px; border-radius: 12px; }
.ep-app .form-control::placeholder { color: var(--ep-faint); }
.ep-app .form-control:focus,
.ep-app .form-select:focus { border-color: var(--ep-brand-400); box-shadow: var(--ep-ring); }
.ep-app .form-control:disabled, .ep-app .form-control[readonly] { background-color: var(--ep-surface-2); }
.ep-app .form-control.is-invalid, .ep-app .form-select.is-invalid { border-color: var(--ep-danger); }
.ep-app .form-control.is-invalid:focus { box-shadow: 0 0 0 4px rgba(229, 72, 77, .14); }
.ep-app .form-label, .ep-app label.col-form-label { font-size: 13px; font-weight: 600; color: var(--ep-text-2); margin-bottom: 6px; }
.ep-app .form-text { font-size: 12px; color: var(--ep-muted); }
.ep-app .invalid-feedback { font-size: 12.5px; }
.ep-app .input-group-text { background: var(--ep-surface-2); border-color: var(--ep-border-strong); color: var(--ep-muted); border-radius: 10px; font-size: 13.5px; }
.ep-app .form-check-input { width: 1.1em; height: 1.1em; border-color: var(--ep-border-strong); }
.ep-app .form-check-input:checked { background-color: var(--ep-primary); border-color: var(--ep-primary); }
.ep-app .form-check-input:focus { box-shadow: var(--ep-ring); border-color: var(--ep-brand-400); }
.ep-app .form-switch .form-check-input { width: 2.3em; height: 1.25em; }

/* ---------- 13. Tabs / segmented ---------- */
.ep-tabs {
    display: inline-flex;
    gap: 2px;
    padding: 4px;
    border-radius: 12px;
    background: #EEF0F6;
    flex-wrap: wrap;
}
.ep-tabs a, .ep-tabs button {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px;
    border-radius: 9px;
    border: 0;
    background: transparent;
    color: var(--ep-muted);
    font-size: 13px; font-weight: 600;
    text-decoration: none;
    transition: background .2s, color .2s, box-shadow .2s;
    white-space: nowrap;
}
.ep-tabs a:hover, .ep-tabs button:hover { color: var(--ep-text); }
.ep-tabs .is-active, .ep-tabs .active { background: #fff; color: var(--ep-text); box-shadow: var(--ep-shadow-sm); }
.ep-tabs .ep-tabs__count { font-size: 11px; padding: 0 6px; border-radius: 999px; background: rgba(16, 18, 40, .07); }
.ep-tabs .is-active .ep-tabs__count { background: var(--ep-brand-100); color: var(--ep-brand-700); }

.ep-app .nav-tabs { border-bottom: 1px solid var(--ep-border); gap: 4px; }
.ep-app .nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; color: var(--ep-muted); font-weight: 600; font-size: 13.5px; padding: 10px 14px; border-radius: 0; background: transparent; }
.ep-app .nav-tabs .nav-link:hover { color: var(--ep-text); border-bottom-color: var(--ep-border-strong); }
.ep-app .nav-tabs .nav-link.active { color: var(--ep-brand-700); border-bottom-color: var(--ep-primary); background: transparent; }
.ep-app .nav-pills .nav-link { border-radius: 10px; color: var(--ep-muted); font-weight: 600; font-size: 13.5px; }
.ep-app .nav-pills .nav-link.active { background: var(--ep-primary); color: #fff; }

/* ---------- 14. Pagination ---------- */
.ep-app .pagination { gap: 4px; margin: 0; flex-wrap: wrap; }
.ep-app .page-link {
    border-radius: 9px !important;
    border: 1px solid var(--ep-border);
    color: var(--ep-text-2);
    font-size: 13px; font-weight: 600;
    min-width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 10px;
    box-shadow: none;
}
.ep-app .page-link:hover { background: var(--ep-surface-2); color: var(--ep-text); border-color: var(--ep-border-strong); }
.ep-app .page-item.active .page-link { background: var(--ep-primary); border-color: var(--ep-primary); color: #fff; }
.ep-app .page-item.disabled .page-link { color: var(--ep-faint); background: #fff; }

/* ---------- 15. Alerts ---------- */
.ep-app .alert {
    border-radius: 12px;
    border: 1px solid transparent;
    padding: 12px 16px;
    font-size: 13.5px;
    display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap;
}
.ep-app .alert-success { background: var(--ep-success-bg); color: var(--ep-success-fg); border-color: #BDE9D1; }
.ep-app .alert-warning { background: var(--ep-warning-bg); color: var(--ep-warning-fg); border-color: #F8DDA6; }
.ep-app .alert-danger { background: var(--ep-danger-bg); color: var(--ep-danger-fg); border-color: #F6C6C7; }
.ep-app .alert-info, .ep-app .alert-primary { background: var(--ep-info-bg); color: var(--ep-info-fg); border-color: #C6DBFC; }
.ep-app .alert .btn-close { margin-left: auto; }
.ep-app .alert-dismissible { padding-right: 16px; }
.ep-app .alert-dismissible .btn-close { position: static; padding: 4px; }

/* ---------- 16. Modals / dropdowns ---------- */
.ep-app .modal-content { border: 0; border-radius: 18px; box-shadow: var(--ep-shadow-lg); overflow: hidden; }
.ep-app .modal-header { padding: 18px 22px; border-bottom: 1px solid var(--ep-border); }
.ep-app .modal-title { font-size: 16px; font-weight: 700; }
/* Le bootstrap.min.css du projet positionne .btn-close en absolu : on rétablit le bouton standard */
.ep-app .modal .btn-close,
.ep-public .modal .btn-close {
    position: static;
    box-sizing: content-box;
    width: 1em; height: 1em;
    padding: 8px;
    margin: -4px -4px -4px auto;
    border: 0; border-radius: 10px;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236A7090'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center / .8em auto no-repeat;
    opacity: 1;
    transition: background-color .2s;
}
.ep-app .modal .btn-close:hover, .ep-public .modal .btn-close:hover { background-color: var(--ep-surface-2); }
.ep-app .modal-body { padding: 22px; }
.ep-app .modal-footer { padding: 14px 22px; border-top: 1px solid var(--ep-border); background: var(--ep-surface-2); }
.ep-app .modal-backdrop.show { opacity: .45; }
.ep-app .modal.fade .modal-dialog { transform: translateY(16px) scale(.98); transition: transform .35s var(--ep-ease); }
.ep-app .modal.show .modal-dialog { transform: none; }

.ep-app .dropdown-menu {
    border: 1px solid var(--ep-border);
    border-radius: 14px;
    box-shadow: var(--ep-shadow-lg);
    padding: 6px;
    font-size: 13.5px;
}
.ep-app .dropdown-menu.show { animation: ep-dd-in .22s var(--ep-ease); }
@keyframes ep-dd-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.ep-app .dropdown-item {
    display: flex; align-items: center; gap: 10px;
    border-radius: 9px;
    padding: 8px 10px;
    color: var(--ep-text);
    font-weight: 500;
}
.ep-app .dropdown-item i { width: 16px; text-align: center; color: var(--ep-muted); }
.ep-app .dropdown-item:hover, .ep-app .dropdown-item:focus { background: var(--ep-surface-2); color: var(--ep-text); }
.ep-app .dropdown-item.active, .ep-app .dropdown-item:active { background: var(--ep-brand-50); color: var(--ep-brand-700); }
.ep-app .dropdown-item.text-danger i, .ep-app .dropdown-item.ep-danger i { color: var(--ep-danger); }
.ep-app .dropdown-item.ep-danger { color: var(--ep-danger-fg); }
.ep-app .dropdown-item.ep-danger:hover { background: var(--ep-danger-bg); }
.ep-app .dropdown-divider { margin: 6px 0; border-color: var(--ep-border); }

/* ---------- 17. Divers (progress, list-group, SweetAlert) ---------- */
.ep-app .progress { height: 8px; border-radius: 999px; background: #EEF0F6; }
.ep-app .progress-bar { background: var(--ep-gradient); border-radius: 999px; }
.ep-progress { height: 8px; border-radius: 999px; background: #EEF0F6; overflow: hidden; }
.ep-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--ep-gradient); transform-origin: left; }
.ep-js .ep-progress > span[data-reveal-bar] { transform: scaleX(0); transition: transform 1.1s var(--ep-ease) .15s; }
.ep-js .is-revealed .ep-progress > span[data-reveal-bar], .ep-js .ep-progress.is-revealed > span[data-reveal-bar] { transform: scaleX(1); }

.ep-app .list-group-item { border-color: var(--ep-border); padding: 12px 16px; }
.ep-app .list-group-item.active { background: var(--ep-brand-50); color: var(--ep-brand-700); border-color: var(--ep-border); }

.swal2-popup { border-radius: 18px !important; font-family: var(--ep-font) !important; }
/* Le thème d'origine agrandit fortement les toasts SweetAlert : on les garde compacts */
.swal2-container.swal2-top-end > .swal2-popup.swal2-toast,
.swal2-popup.swal2-toast {
    width: auto !important;
    max-width: min(380px, calc(100vw - 24px)) !important;
    padding: 10px 14px !important;
    font-size: 13.5px !important;
    border-radius: 12px !important;
    box-shadow: var(--ep-shadow-lg) !important;
}
.swal2-popup.swal2-toast .swal2-title { font-size: 13.5px !important; margin: 0 8px !important; }
.swal2-popup.swal2-toast .swal2-icon { transform: scale(.7); margin: 0 !important; }
.swal2-styled.swal2-confirm { background: #4F57E3 !important; border-radius: 10px !important; box-shadow: none !important; }
.swal2-styled.swal2-cancel { border-radius: 10px !important; }
.swal2-icon.swal2-success [class^=swal2-success-line] { background-color: #12A05C !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(18, 160, 92, .3) !important; }
.swal2-timer-progress-bar { background: rgba(79, 87, 227, .6) !important; }

.ep-divider { height: 1px; background: var(--ep-border); margin: 16px 0; border: 0; }
.ep-muted { color: var(--ep-muted) !important; }
.ep-faint { color: var(--ep-faint) !important; }
.ep-text-in { color: var(--ep-success-fg) !important; }
.ep-text-out { color: var(--ep-danger-fg) !important; }
.ep-app .text-primary { color: var(--ep-brand-600) !important; }
.ep-app .text-success { color: var(--ep-success-fg) !important; }
.ep-app .text-muted { color: var(--ep-muted) !important; }
.ep-app .bg-primary { background-color: var(--ep-primary) !important; }
.ep-app .border-primary { border-color: var(--ep-brand-300) !important; }

.ep-legend { display: flex; flex-direction: column; gap: 10px; }
.ep-legend__row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.ep-legend__dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.ep-legend__label { flex: 1; color: var(--ep-text-2); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep-legend__val { font-weight: 700; font-variant-numeric: tabular-nums; }

.ep-chart { position: relative; height: 280px; }
.ep-chart--sm { height: 220px; }
.ep-donut { position: relative; width: 180px; height: 180px; flex-shrink: 0; }
.ep-donut__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.ep-donut__center strong { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.ep-donut__center span { font-size: 11.5px; color: var(--ep-muted); }

.ep-copy { border: 0; background: transparent; color: inherit; opacity: .7; padding: 2px 4px; cursor: pointer; transition: opacity .2s; }
.ep-copy:hover { opacity: 1; }

/* ---------- 18. Animations (inspirées de leekpay.me) ---------- */
.ep-js [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition: opacity .75s var(--ep-ease), transform .75s var(--ep-ease);
    transition-delay: var(--ep-delay, 0ms);
    will-change: opacity, transform;
}
.ep-js [data-reveal="down"]  { transform: translate3d(0, -32px, 0); }
.ep-js [data-reveal="left"]  { transform: translate3d(-64px, 0, 0); }
.ep-js [data-reveal="right"] { transform: translate3d(64px, 0, 0) scale(.98); }
.ep-js [data-reveal="zoom"]  { transform: scale(.94); }
.ep-js [data-reveal="fade"]  { transform: none; }
.ep-js [data-reveal].is-revealed { opacity: 1; transform: none; }

.ep-underline { position: relative; display: inline-block; }
.ep-underline::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -6px;
    height: 4px;
    border-radius: 4px;
    background: var(--ep-gradient);
    transform-origin: left;
    transform: scaleX(1);
    transition: transform .9s var(--ep-ease) .25s;
}
.ep-js .ep-underline::after { transform: scaleX(0); }
.ep-js .is-revealed .ep-underline::after, .ep-js .ep-underline.is-revealed::after { transform: scaleX(1); }

@keyframes ep-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes ep-float-rot-l { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-10px) rotate(-4deg); } }
@keyframes ep-float-rot-r { 0%, 100% { transform: translateY(0) rotate(6deg); } 50% { transform: translateY(-10px) rotate(4deg); } }
.ep-float { animation: ep-float 6s ease-in-out infinite; }
.ep-float--slow { animation-duration: 8s; }
.ep-float--delay { animation-delay: -3s; }
.ep-tilt-l { animation: ep-float-rot-l 7s ease-in-out infinite; }
.ep-tilt-r { animation: ep-float-rot-r 7s ease-in-out infinite; animation-delay: -2s; }

@keyframes ep-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ep-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.ep-marquee__track { display: flex; width: max-content; animation: ep-marquee 32s linear infinite; }
.ep-marquee:hover .ep-marquee__track { animation-play-state: paused; }

@keyframes ep-shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } }
.ep-shimmer-text {
    background: linear-gradient(90deg, var(--ep-brand-600) 0%, var(--ep-brand-400) 25%, var(--ep-brand-600) 50%, var(--ep-brand-400) 75%, var(--ep-brand-600) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: ep-shimmer 6s linear infinite;
}

@keyframes ep-draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
    .ep-js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
    .ep-float, .ep-tilt-l, .ep-tilt-r, .ep-marquee__track, .ep-shimmer-text, .ep-pulse-dot::after { animation: none !important; }
    .ep-js .ep-main .page-wrapper > .content > * { animation: none !important; }
    .ep-js .ep-underline::after { transform: scaleX(1); }
}