@font-face { font-family:'Manrope'; font-style:normal; font-weight:700; font-display:swap;
    src:url('/brand/fonts/manrope-700.woff2') format('woff2'); }
@font-face { font-family:'Manrope'; font-style:normal; font-weight:800; font-display:swap;
    src:url('/brand/fonts/manrope-800.woff2') format('woff2'); }

/* ===== Jetons (design tokens) — source unique de l'apparence ===== */
:root {
    /* Couleurs */
    --esn-accent:#2563eb;
    --esn-accent-strong:#1d4ed8;
    --esn-accent-contrast:#ffffff;
    --esn-bg:#f5f7fa;
    --esn-surface:#ffffff;
    --esn-surface-2:#f1f5f9;
    --esn-fg:#1b1f24;
    --esn-muted:#6b7280;
    --esn-border:#e5e7eb;
    --esn-ok-bg:#ecfdf5;  --esn-ok-fg:#065f46;
    --esn-err-bg:#fef2f2; --esn-err-fg:#991b1b;
    --esn-warn-bg:#fffbeb; --esn-warn-fg:#92400e;
    /* Typographie */
    --esn-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --esn-fs-sm:.825rem; --esn-fs-lg:1.15rem;
    /* Rayons / ombres / espacements */
    --esn-radius:.5rem; --esn-radius-sm:.35rem; --esn-radius-md:.45rem;
    --esn-shadow:0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.1);
    --esn-shadow-lg:0 4px 12px rgba(16,24,40,.12);
    --esn-space-2:.5rem; --esn-space-3:.75rem; --esn-space-4:1rem; --esn-space-6:1.5rem;
    /* Structure */
    --esn-topbar-h:64px; --esn-sidebar-w:232px;
    --esn-font-display:'Manrope', var(--esn-font);
}

* { box-sizing:border-box; }
html, body { height:100%; }
body { margin:0; font-family:var(--esn-font); font-size:15px; color:var(--esn-fg); background:var(--esn-bg); }
a { color:var(--esn-accent); text-decoration:none; }
a:hover { text-decoration:underline; }
h1 { font-family:var(--esn-font-display); font-size:1.6rem; font-weight:800;
     text-transform:uppercase; letter-spacing:.05em; color:var(--esn-fg);
     margin:0 0 var(--esn-space-4); }
h2 { font-size:var(--esn-fs-lg); }

/* ===== Coquille applicative : barre haute + menu latéral ===== */
.esn-shell { min-height:100vh; display:flex; flex-direction:column; }
.esn-topbar { position:sticky; top:0; z-index:20; height:var(--esn-topbar-h); display:flex; align-items:center; gap:var(--esn-space-4); padding:0 var(--esn-space-4); background:var(--esn-surface); border-bottom:1px solid var(--esn-border); }
.esn-brand-client { display:flex; align-items:center; gap:.5rem; font-weight:600; }
.esn-brand-client img { max-height:44px; max-width:200px; display:block; }
.esn-topbar .esn-spacer { flex:1; }
.esn-topbar nav { display:flex; align-items:center; gap:var(--esn-space-3); }
.esn-usermenu { position:relative; }
.esn-usermenu-trigger { width:36px; height:36px; border-radius:50%; border:1px solid var(--esn-border);
    background:var(--esn-accent); color:#fff; font-weight:700; font-size:13px; cursor:pointer; }
.esn-usermenu-trigger:hover { filter:brightness(1.05); }
.esn-usermenu-panel { position:absolute; right:0; top:calc(100% + 6px); min-width:240px; z-index:40;
    background:var(--esn-surface); border:1px solid var(--esn-border); border-radius:var(--esn-radius-md);
    box-shadow:var(--esn-shadow-lg); padding:6px 0; }
.esn-usermenu-head { padding:10px 14px; border-bottom:1px solid var(--esn-border); display:flex; flex-direction:column; }
.esn-usermenu-sub { font-size:12px; color:var(--esn-muted); }
.esn-usermenu-section { display:flex; align-items:center; gap:8px; padding:8px 14px; }
.esn-usermenu-label { font-size:12px; color:var(--esn-muted); margin-right:auto; }
.esn-usermenu-item { display:block; width:100%; text-align:left; padding:9px 14px; background:none;
    border:none; color:var(--esn-fg); font:inherit; cursor:pointer; }
.esn-usermenu-item:hover { background:var(--esn-surface-2); }
.esn-usermenu-item.disabled { color:var(--esn-muted); cursor:default; }
.esn-usermenu-item.danger { color:#c0392b; border-top:1px solid var(--esn-border); }
.esn-usermenu-soon { font-size:11px; color:var(--esn-muted); }
.esn-lang { padding:2px 6px; border-radius:var(--esn-radius-sm); color:var(--esn-fg); }
.esn-lang.active { background:color-mix(in srgb, var(--esn-accent) 14%, transparent); color:var(--esn-accent); font-weight:600; }
.esn-usermenu-logout { margin:0; }
.esn-body { flex:1; display:flex; align-items:stretch; }
.esn-sidebar { width:var(--esn-sidebar-w); flex:0 0 var(--esn-sidebar-w); background:var(--esn-surface); border-right:1px solid var(--esn-border); display:flex; flex-direction:column; padding:var(--esn-space-4) var(--esn-space-2); }
.esn-sidebar nav { display:flex; flex-direction:column; gap:.15rem; }
.esn-sidebar nav a { display:block; padding:.5rem .75rem; border-radius:var(--esn-radius-sm); color:var(--esn-fg); }
.esn-sidebar nav a:hover { background:var(--esn-surface-2); text-decoration:none; }
.esn-sidebar nav a.active { background:color-mix(in srgb, var(--esn-accent) 12%, transparent); color:var(--esn-accent); font-weight:600; }
/* Entrées listées sous une rubrique (Mon Espace, Administration, …) : décalées + filet de rattachement. */
.esn-sidebar nav details > a { padding-left:1.9rem; border-left:2px solid var(--esn-border); margin-left:.4rem; border-radius:0 var(--esn-radius-sm) var(--esn-radius-sm) 0; }
.esn-sidebar nav details > a.active { border-left-color:var(--esn-accent); }
.esn-sidebar .esn-spacer { flex:1; }
/* Catégories de navigation repliables (B5) */
.esn-nav-group { display:flex; flex-direction:column; gap:.15rem; }
.esn-nav-group + .esn-nav-group { margin-top:var(--esn-space-2); }
.esn-nav-group > summary { list-style:none; cursor:pointer; user-select:none; padding:.4rem .75rem; font-size:var(--esn-fs-sm); font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--esn-muted); border-radius:var(--esn-radius-sm); display:flex; align-items:center; justify-content:space-between; }
.esn-nav-group > summary::-webkit-details-marker { display:none; }
.esn-nav-group > summary::after { content:"\25B8"; font-size:.7em; opacity:.6; transition:transform .15s ease; }
.esn-nav-group[open] > summary::after { transform:rotate(90deg); }
.esn-nav-group > summary:hover { background:var(--esn-surface-2); color:var(--esn-fg); }
.esn-nav-group > a { padding-left:1.25rem; }
/* Sous-catégories (un niveau d'imbrication, ex. RH > CRA/Notes de frais/Congés) */
.esn-nav-subgroup { display:flex; flex-direction:column; gap:.15rem; }
.esn-nav-subgroup > summary { list-style:none; cursor:pointer; user-select:none; padding:.35rem .75rem .35rem 1.25rem; font-size:var(--esn-fs-sm); font-weight:600; color:var(--esn-muted); border-radius:var(--esn-radius-sm); display:flex; align-items:center; justify-content:space-between; }
.esn-nav-subgroup > summary::-webkit-details-marker { display:none; }
.esn-nav-subgroup > summary::after { content:"\25B8"; font-size:.7em; opacity:.6; transition:transform .15s ease; }
.esn-nav-subgroup[open] > summary::after { transform:rotate(90deg); }
.esn-nav-subgroup > summary:hover { background:var(--esn-surface-2); color:var(--esn-fg); }
.esn-nav-subgroup > a { padding-left:2rem; }
.esn-brand-product { padding:.5rem .75rem; font-size:var(--esn-fs-sm); color:var(--esn-muted); letter-spacing:.02em; }
.esn-brand-product strong { font-weight:700; }
.esn-brand-product img { display:block; width:auto; height:26px; opacity:.9; }
.esn-content { flex:1; min-width:0; padding:var(--esn-space-6); max-width:1100px; }

/* Repli responsive du menu (CSS pur, sans JS) */
.esn-nav-toggle { display:none; }
.esn-nav-burger { display:none; cursor:pointer; font-size:1.25rem; line-height:1; padding:.25rem .5rem; border:1px solid var(--esn-border); border-radius:var(--esn-radius-sm); background:var(--esn-surface); }
@media (max-width:760px) {
    .esn-nav-burger { display:inline-flex; }
    .esn-sidebar { position:fixed; top:var(--esn-topbar-h); bottom:0; left:0; transform:translateX(-100%); transition:transform .2s ease; z-index:15; box-shadow:var(--esn-shadow-lg); }
    .esn-nav-toggle:checked ~ .esn-body .esn-sidebar { transform:translateX(0); }
    .esn-content { padding:var(--esn-space-4); }
}

/* ===== Composants ===== */
.esn-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:var(--esn-space-4); }
.esn-section { margin:var(--esn-space-4) 0 var(--esn-space-2); font-family:var(--esn-font-display);
    font-size:var(--esn-fs-sm); font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--esn-muted); }
.esn-card { display:block; padding:var(--esn-space-4); background:var(--esn-surface); border:1px solid var(--esn-border); border-radius:var(--esn-radius); box-shadow:var(--esn-shadow); color:inherit; text-decoration:none; transition:border-color .15s, box-shadow .15s; }
.esn-card:hover { border-color:var(--esn-accent); box-shadow:var(--esn-shadow-lg); text-decoration:none; }
.esn-card h2 { margin:.1rem 0 .25rem; font-size:1.05rem; }
.esn-card p { margin:0; color:var(--esn-muted); font-size:var(--esn-fs-sm); }

table.esn-table { width:100%; border-collapse:collapse; background:var(--esn-surface); border:1px solid var(--esn-border); border-radius:var(--esn-radius); }
.esn-table th, .esn-table td { text-align:left; padding:.6rem .8rem; border-bottom:1px solid var(--esn-border); }
.esn-table thead th { background:var(--esn-surface-2); font-size:var(--esn-fs-sm); text-transform:uppercase; letter-spacing:.03em; color:var(--esn-muted); }
.esn-table tbody tr:hover { background:var(--esn-surface-2); }
.esn-table tbody tr:last-child td { border-bottom:none; }
.esn-cell-center { text-align:center; }
/* ===== État vide ===== */
.esn-empty { text-align:center; padding:2rem 1rem; background:var(--esn-surface); border:1px dashed var(--esn-border); border-radius:var(--esn-radius); color:var(--esn-muted); }
.esn-empty-icon { font-size:1.8rem; opacity:.5; }
.esn-empty-msg { margin:.5rem 0; }
.esn-empty-action { margin-top:.5rem; }
.esn-pager { display:flex; gap:.5rem; align-items:center; margin-top:var(--esn-space-4); }

.esn-badge { display:inline-block; font-size:.7rem; font-weight:600; padding:.1rem .45rem; margin-left:.35rem; border-radius:999px; background:var(--esn-surface-2); color:var(--esn-muted); vertical-align:middle; }
.esn-badge.ok { background:var(--esn-ok-bg); color:var(--esn-ok-fg); }
.esn-badge.err { background:var(--esn-err-bg); color:var(--esn-err-fg); }
.esn-badge.warn { background:var(--esn-warn-bg); color:var(--esn-warn-fg); }
.esn-badge.alert { background:var(--esn-err-bg); color:var(--esn-err-fg); }
.esn-readonly { display:inline-block; padding:.5rem .6rem; color:var(--esn-muted); background:transparent; border:1px solid transparent; font:inherit; }

.reporting-toolbar { margin-bottom:var(--esn-space-4); }
.reporting-toolbar select { margin-left:var(--esn-space-2); padding:.4rem .5rem; border:1px solid var(--esn-border); border-radius:var(--esn-radius-sm); font:inherit; }
.kpi-list { list-style:none; margin:.25rem 0 0; padding:0; display:flex; flex-direction:column; gap:.3rem; font-size:var(--esn-fs-sm); }
.kpi-list strong { color:var(--esn-fg); }
.esn-doc-group-title { margin-top:var(--esn-space-6) !important; }

.esn-form { background:var(--esn-surface); border:1px solid var(--esn-border); border-radius:var(--esn-radius); padding:var(--esn-space-6); box-shadow:var(--esn-shadow); max-width:640px; }
.esn-form label { display:block; margin:.6rem 0 .2rem; font-size:var(--esn-fs-sm); font-weight:600; color:var(--esn-fg); }
.esn-form input, .esn-form select, .esn-form textarea { width:100%; max-width:420px; padding:.5rem .6rem; border:1px solid var(--esn-border); border-radius:var(--esn-radius-sm); font:inherit; background:var(--esn-surface); }
.esn-form input:focus, .esn-form select:focus, .esn-form textarea:focus { outline:2px solid color-mix(in srgb, var(--esn-accent) 40%, transparent); outline-offset:1px; border-color:var(--esn-accent); }

.esn-input { padding:.4rem .6rem; border:1px solid var(--esn-border); border-radius:var(--esn-radius-sm); font-size:var(--esn-fs-sm); min-width:0; }

.esn-btn { display:inline-flex; align-items:center; gap:.4rem; padding:.5rem .9rem; border:1px solid var(--esn-accent); background:var(--esn-accent); color:var(--esn-accent-contrast); border-radius:var(--esn-radius-sm); cursor:pointer; font:inherit; font-weight:600; transition:background .15s, border-color .15s; }
.esn-btn:hover { background:var(--esn-accent-strong); border-color:var(--esn-accent-strong); text-decoration:none; }
.esn-btn.secondary { background:var(--esn-surface); color:var(--esn-accent); }
.esn-btn.secondary:hover { background:var(--esn-surface-2); }
.esn-btn.danger { background:var(--esn-err-fg); border-color:var(--esn-err-fg); color:#fff; }
.esn-btn.danger:hover { background:#7f1414; border-color:#7f1414; }
.esn-btn.info { background:#2563eb; border-color:#2563eb; color:#fff; }
.esn-btn.info:hover { background:#1d4ed8; border-color:#1d4ed8; }
.esn-btn.warn { background:#ea580c; border-color:#ea580c; color:#fff; }
.esn-btn.warn:hover { background:#c2410c; border-color:#c2410c; }
.esn-btn.sm { padding:.3rem .6rem; font-size:var(--esn-fs-sm); font-weight:500; }
.esn-btn:disabled { opacity:.5; cursor:not-allowed; }

/* Lien stylisé sans décoration par défaut, avec couleur accentuée */
.esn-link { background:none; border:none; padding:0; margin:0; font:inherit; color:var(--esn-accent); cursor:pointer; text-decoration:none; }
.esn-link:hover { text-decoration:underline; }

/* Texte d'erreur en couleur d'erreur */
.esn-err-text { color:var(--esn-err-fg); }

/* C6 : en-têtes de colonnes cliquables pour le tri */
.esn-sort { background:none; border:none; padding:0; margin:0; font:inherit; font-weight:inherit; color:inherit; cursor:pointer; }
.esn-sort:hover { color:var(--esn-accent); }

/* C9 : menu d'actions « kebab » (3 points verticaux) */
.esn-actions-cell { position:relative; white-space:nowrap; }
.esn-kebab { position:relative; display:inline-block; }
.esn-kebab-btn { background:none; border:1px solid transparent; border-radius:var(--esn-radius-sm); cursor:pointer; font-size:1.2rem; line-height:1; padding:.2rem .5rem; color:var(--esn-fg); }
.esn-kebab-btn:hover { background:var(--esn-surface-2); border-color:var(--esn-border); }
.esn-kebab-menu { position:absolute; right:0; top:100%; z-index:30; min-width:160px; background:var(--esn-surface); border:1px solid var(--esn-border); border-radius:var(--esn-radius-sm); box-shadow:var(--esn-shadow-lg); padding:.25rem; display:flex; flex-direction:column; }
.esn-kebab-item { display:block; width:100%; text-align:left; background:none; border:none; padding:.45rem .6rem; border-radius:var(--esn-radius-sm); cursor:pointer; font:inherit; color:var(--esn-fg); }
.esn-kebab-item:hover { background:var(--esn-surface-2); }
.esn-kebab-item.danger { color:var(--esn-err-fg); }

/* C8 : la ligne entière d'un collaborateur désactivé est grisée */
.esn-table tbody tr.esn-row-disabled td { color:var(--esn-muted); background:var(--esn-surface-2); }
.esn-table tbody tr.esn-row-disabled:hover td { background:#e9eef4; }

/* Filtre de la liste collaborateurs */
.esn-filter label { display:inline-flex; align-items:center; gap:.4rem; font-size:var(--esn-fs-sm); color:var(--esn-fg); cursor:pointer; }

/* Lien du site sous le logo produit Esnalia (un cran plus petit, ne dépasse pas le logo) */
.esn-brand-product { display:inline-block; }
.esn-brand-site { display:block; margin-top:.15rem; font-size:.6rem; line-height:1.1; color:var(--esn-muted); white-space:nowrap; }

.esn-msg { padding:.6rem .8rem; border-radius:var(--esn-radius-sm); margin:.6rem 0; font-size:.92rem; }
.esn-msg.ok { background:var(--esn-ok-bg); color:var(--esn-ok-fg); }
.esn-msg.err { background:var(--esn-err-bg); color:var(--esn-err-fg); }
.esn-msg.warn { background:#fff7ed; color:#9a3412; }

.esn-codes { font-family:ui-monospace, "SFMono-Regular", Menlo, monospace; background:var(--esn-surface-2); border:1px solid var(--esn-border); padding:var(--esn-space-3); border-radius:var(--esn-radius-sm); white-space:pre; }

/* ===== Coquille d'authentification (carte centrée, sans menu) ===== */
.esn-auth { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:var(--esn-space-6); background:var(--esn-bg); }
.esn-auth-card { width:100%; max-width:400px; background:var(--esn-surface); border:1px solid var(--esn-border); border-radius:var(--esn-radius); box-shadow:var(--esn-shadow-lg); padding:var(--esn-space-6); }
.esn-auth-brand { text-align:center; margin-bottom:var(--esn-space-4); }
.esn-auth-brand img { display:block; width:auto; height:40px; margin:0 auto; }
.esn-auth-card h1 { font-size:1.2rem; text-align:center; text-transform:none; }
.esn-auth-card form { display:flex; flex-direction:column; gap:.5rem; }
.esn-auth-card label { display:flex; flex-direction:column; gap:.2rem; font-size:var(--esn-fs-sm); font-weight:600; }
.esn-auth-card input { padding:.55rem .6rem; border:1px solid var(--esn-border); border-radius:var(--esn-radius-sm); font:inherit; }
.esn-auth-card button { margin-top:var(--esn-space-2); }
.esn-auth-lang { margin-top:var(--esn-space-4); text-align:center; font-size:var(--esn-fs-sm); }
.esn-auth-lang a { margin:0 .25rem; color:var(--esn-muted); }

/* ===== Affordances d'erreur Blazor (conservées du template) ===== */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }
.blazor-error-boundary { background: #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; }
.blazor-error-boundary::after { content: "An error has occurred." }

/* CRA : accordéon par année */
.esn-cra-yeargroup > summary { font-family:var(--esn-font-display); font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--esn-accent); cursor:pointer; padding:.5rem 0; }
.esn-cra-monthrow { display:flex; align-items:center; gap:14px; width:100%; text-align:left; background:var(--esn-surface); border:1px solid var(--esn-border); border-radius:var(--esn-radius-md); padding:11px 14px; margin-bottom:8px; cursor:pointer; font:inherit; }
.esn-cra-monthrow:hover { border-color:color-mix(in srgb, var(--esn-accent) 40%, var(--esn-border)); }
.esn-cra-monthlabel { font-weight:700; min-width:130px; }
.esn-cra-monthstats { flex:1; font-size:13px; color:var(--esn-muted); }
.esn-cra-monthstats b { color:var(--esn-fg); }
.esn-badge { padding: .1rem .5rem; border-radius: .75rem; font-size: .8rem; }
.esn-badge-tofill { background: #eee; color: #555; }
.esn-badge-draft { background: #fff3cd; color: #8a6d3b; }
.esn-badge-submitted { background: #cfe2ff; color: #084298; }
.esn-badge-approved { background: #d1e7dd; color: #0f5132; }
.esn-badge-rejected { background: #f8d7da; color: #842029; }

/* CRA : calendrier */
.esn-cra-scroll { overflow-x: auto; }
.esn-cra-dayhead { text-align: center; white-space: nowrap; }
.esn-cra-dayhead .esn-cra-daydate, .esn-cra-dayhead .esn-cra-dayname { display: block; line-height: 1.1; }
.esn-cra-dayhead .esn-cra-dayname { font-size: .75rem; color: #666; }
.esn-offday { background: #f2f2f2; }
.esn-total-ok { background: #d1e7dd; }
.esn-total-under { background: #fff3cd; }
.esn-total-over { background: #f8d7da; }
.esn-cra-summary { margin: .75rem 0; }
.esn-cra-statusbar { margin: .25rem 0 .75rem; font-style: italic; }
.esn-hint { color: #666; font-size: .9rem; }

/* ===== Fil d'Ariane ===== */
.esn-breadcrumb ol { list-style:none; display:flex; flex-wrap:wrap; gap:.35rem; padding:0; margin:0 0 .35rem; font-size:var(--esn-fs-sm); color:var(--esn-muted); }
.esn-breadcrumb li { display:flex; align-items:center; gap:.35rem; }
.esn-breadcrumb .sep { color:var(--esn-border); }
.esn-breadcrumb [aria-current="page"] { color:var(--esn-fg); font-weight:600; }

/* ===== Barre d'outils de liste ===== */
.esn-toolbar { display:flex; align-items:center; gap:var(--esn-space-3); flex-wrap:wrap; background:var(--esn-surface); border:1px solid var(--esn-border); border-radius:var(--esn-radius); padding:.6rem .75rem; margin-bottom:var(--esn-space-4); }
.esn-toolbar-filters { display:flex; align-items:center; gap:var(--esn-space-2); flex:1; flex-wrap:wrap; min-width:0; }
.esn-toolbar-actions { display:flex; align-items:center; gap:var(--esn-space-2); }
@media (max-width:640px) { .esn-toolbar { align-items:stretch; } .esn-toolbar-filters, .esn-toolbar-actions { width:100%; } }

/* ===== En-tête de page ===== */
.esn-pagehead { margin-bottom:var(--esn-space-4); }
.esn-pagehead-row { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--esn-space-4); flex-wrap:wrap; }
.esn-pagehead-sub { margin:.15rem 0 0; color:var(--esn-muted); font-size:var(--esn-fs-sm); }
.esn-pagehead-actions { display:flex; align-items:center; gap:var(--esn-space-2); flex-wrap:wrap; }

/* ===== Gabarit de page ===== */
.esn-page { display:block; }
.esn-page > .esn-page-body { display:block; }
.esn-page h1:focus { outline:none; }
.esn-page h1:focus-visible { outline:2px solid var(--esn-accent); outline-offset:3px; border-radius:var(--esn-radius-sm); }

/* ===== Toasts (retours d'action) ===== */
.esn-toast-host { position:fixed; top:calc(var(--esn-topbar-h) + .5rem); right:1rem; z-index:60; display:flex; flex-direction:column; gap:.5rem; max-width:min(360px, calc(100vw - 2rem)); }
.esn-toast { display:flex; align-items:center; gap:.5rem; justify-content:space-between; padding:.6rem .8rem; border-radius:var(--esn-radius); box-shadow:var(--esn-shadow-lg); background:var(--esn-surface); border-left:4px solid var(--esn-muted); font-size:var(--esn-fs-sm); }
.esn-toast.ok { border-left-color:var(--esn-ok-fg); background:var(--esn-ok-bg); color:var(--esn-ok-fg); }
.esn-toast.err { border-left-color:var(--esn-err-fg); background:var(--esn-err-bg); color:var(--esn-err-fg); }
.esn-toast.info { border-left-color:var(--esn-accent); }
.esn-toast button { background:none; border:none; cursor:pointer; font-size:.9rem; color:inherit; opacity:.7; }

/* ===== Squelette de chargement ===== */
.esn-skeleton { display:flex; flex-direction:column; gap:.6rem; }
.esn-skeleton-row { height:1.1rem; border-radius:var(--esn-radius-sm); background:linear-gradient(90deg, var(--esn-surface-2) 25%, var(--esn-border) 37%, var(--esn-surface-2) 63%); background-size:400% 100%; animation:esn-shimmer 1.4s ease infinite; }
.esn-skeleton--cards .esn-skeleton-row { height:5rem; }
.esn-skeleton--form .esn-skeleton-row { height:2.2rem; max-width:420px; }
@keyframes esn-shimmer { 0% { background-position:100% 0; } 100% { background-position:0 0; } }
@media (prefers-reduced-motion: reduce) { .esn-skeleton-row { animation:none; } }
.esn-toast button:hover { opacity:1; }

/* ===== Modale de confirmation ===== */
.esn-dialog-overlay { position:fixed; inset:0; z-index:70; background:rgba(16,24,40,.45); display:flex; align-items:center; justify-content:center; padding:1rem; }
.esn-dialog { background:var(--esn-surface); border-radius:var(--esn-radius); box-shadow:var(--esn-shadow-lg); padding:1.25rem; max-width:min(420px, 100%); }
.esn-dialog h2 { margin:0 0 .5rem; }
.esn-dialog-actions { display:flex; justify-content:flex-end; gap:.5rem; margin-top:1rem; }

/* ===== Saut rapide global ===== */
.esn-qs-trigger { display:inline-flex; align-items:center; gap:.4rem; background:var(--esn-surface-2); border:1px solid var(--esn-border); border-radius:var(--esn-radius-sm); padding:.3rem .55rem; cursor:pointer; color:var(--esn-muted); font-size:var(--esn-fs-sm); }
.esn-qs-trigger kbd { font-size:.65rem; background:var(--esn-surface); border:1px solid var(--esn-border); border-radius:3px; padding:0 .25rem; }
.esn-qs-overlay { position:fixed; inset:0; z-index:80; background:rgba(16,24,40,.4); display:flex; align-items:flex-start; justify-content:center; padding-top:12vh; }
.esn-qs-panel { width:min(560px, calc(100vw - 2rem)); background:var(--esn-surface); border-radius:var(--esn-radius); box-shadow:var(--esn-shadow-lg); overflow:hidden; }
.esn-qs-input { width:100%; border:none; border-bottom:1px solid var(--esn-border); padding:.9rem 1rem; font-size:1rem; outline:none; }
.esn-qs-results { list-style:none; margin:0; padding:.25rem; max-height:50vh; overflow:auto; }
.esn-qs-item { display:flex; align-items:center; justify-content:space-between; gap:1rem; width:100%; text-align:left; background:none; border:none; padding:.55rem .75rem; border-radius:var(--esn-radius-sm); cursor:pointer; color:var(--esn-fg); }
.esn-qs-item:hover, .esn-qs-item:focus-visible { background:var(--esn-surface-2); }
.esn-qs-cat { color:var(--esn-muted); font-size:var(--esn-fs-sm); }
.esn-qs-empty { padding:.75rem; color:var(--esn-muted); text-align:center; }
@media (max-width:640px) { .esn-qs-trigger kbd { display:none; } }

/* ===== Tuiles « à traiter » ===== */
.esn-card--todo { border-left:4px solid var(--esn-accent); }
.esn-card-count { font-size:1.6rem; font-weight:700; color:var(--esn-accent); margin:.25rem 0 0; }

/* ===== Table responsive en cartes (<=640px) ===== */
@media (max-width:640px) {
    .esn-table--cards thead { position:absolute; left:-9999px; }
    .esn-table--cards tr { display:block; margin-bottom:.75rem; border:1px solid var(--esn-border); border-radius:var(--esn-radius); background:var(--esn-surface); }
    .esn-table--cards td { display:flex; justify-content:space-between; gap:1rem; border:none; border-bottom:1px solid var(--esn-border); padding:.5rem .75rem; }
    .esn-table--cards td:last-child { border-bottom:none; }
    .esn-table--cards td::before { content:attr(data-label); font-weight:600; color:var(--esn-muted); }
}

/* ===== CRA : matrice groupée demi-journée (Task 7) ===== */
.esn-cra-head { display:flex; align-items:center; gap:12px; margin:8px 0 4px; }
.esn-cra-back { width:34px; height:34px; border-radius:8px; border:1px solid var(--esn-border); background:var(--esn-surface); cursor:pointer; color:var(--esn-muted); font-size:16px; }
.esn-cra-title { font-family:var(--esn-font-display); font-weight:800; text-transform:uppercase; letter-spacing:.04em; font-size:18px; margin:0; }
.esn-cra-grid td, .esn-cra-grid th { padding:2px 4px; font-size:12px; }
.esn-cra-cell { cursor:pointer; text-align:center; min-width:22px; }
.esn-cra-cell.half { background:linear-gradient(135deg, color-mix(in srgb, var(--esn-accent) 22%, #fff) 50%, #fff 50%); font-weight:700; }
.esn-cra-cell.full { background:var(--esn-accent); color:#fff; font-weight:700; }
.esn-cra-cell.offworked { box-shadow:inset 0 0 0 2px #e67e22; }
.esn-cra-rowtot { background:var(--esn-surface-2); font-weight:700; text-align:center; }
.esn-cra-grpband { writing-mode:vertical-rl; transform:rotate(180deg); font-family:var(--esn-font-display); font-weight:800; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:#fff; text-align:center; }
.esn-grp-billable { background:#0f4c81; } .esn-grp-absence { background:#b8860b; } .esn-grp-nonbillable { background:#6b7280; }
.esn-total-orange { background:#fdf0e3; color:#d35400; font-weight:700; }
.esn-cra-grptoggle { border:none; background:none; color:inherit; font-size:10px; padding:0 2px; cursor:pointer; line-height:1; }

/* ===== CRA : synthèse, alertes, PJ/commentaire, soumission (Task 8) ===== */
.esn-cra-actions { display:flex; gap:8px; align-items:center; margin:12px 0; }
.esn-cra-panels { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:22px; }
.esn-cra-panels .esn-card h3 { font-family:var(--esn-font-display); font-weight:800; text-transform:uppercase; letter-spacing:.05em; font-size:12px; color:var(--esn-muted); margin:0 0 10px; }
.esn-srow { display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px dashed var(--esn-border); font-size:13px; }
.esn-srow-tot { border-bottom:none; border-top:2px solid var(--esn-border); font-weight:700; }
.esn-cra-blocked { margin-top:8px; color:#c0392b; font-weight:600; font-size:12px; }
.esn-cra-alert { font-size:12.5px; padding:7px 0; border-bottom:1px dashed var(--esn-border); }
.esn-alert-info { color:#d35400; } .esn-alert-blocking { color:#c0392b; }
.esn-cra-drop { border:2px dashed var(--esn-border); border-radius:8px; padding:14px; text-align:center; margin-top:8px; }
.esn-cra-submitbar { margin-top:22px; text-align:right; }
.esn-cra-submithint { color:#c0392b; font-size:12px; margin-right:12px; }
.esn-cra-submit { font-family:var(--esn-font-display); font-weight:800; font-size:15px; padding:13px 30px; }
.esn-cra-submit[disabled] { opacity:.55; cursor:not-allowed; }

/* ===== Accessibilité : lien d'évitement ===== */
.esn-skip { position:absolute; left:-9999px; top:0; z-index:100; background:var(--esn-accent); color:var(--esn-accent-contrast); padding:.5rem .9rem; border-radius:0 0 var(--esn-radius-sm) 0; }
.esn-skip:focus { left:0; }
main#esn-main:focus { outline:none; }


/* ===== Mes frais : historique + note dédiée (Task 1) ===== */
.esn-frais-row { display:flex; align-items:center; gap:14px; width:100%; text-align:left; background:var(--esn-surface); border:1px solid var(--esn-border); border-radius:var(--esn-radius-md); padding:11px 14px; margin-bottom:8px; cursor:pointer; font:inherit; }
.esn-frais-row:hover { border-color:color-mix(in srgb, var(--esn-accent) 40%, var(--esn-border)); }
.esn-frais-tofill { border-style:dashed; }
.esn-frais-mo { font-family:var(--esn-font-display); font-weight:700; min-width:130px; }
.esn-frais-meta { flex:1; font-size:13px; color:var(--esn-muted); }
.esn-badge-tofill { background:var(--esn-surface-2); color:var(--esn-muted); }
.esn-frais-other { display:flex; align-items:center; gap:8px; margin-top:12px; font-size:13px; color:var(--esn-muted); }
.esn-frais-yr { width:70px; } .esn-frais-mth { width:56px; }
.esn-frais-head { display:flex; align-items:center; gap:12px; margin:8px 0 4px; }
.esn-frais-back { width:34px; height:34px; border-radius:8px; border:1px solid var(--esn-border); background:var(--esn-surface); cursor:pointer; color:var(--esn-muted); font-size:16px; }
.esn-frais-title { font-family:var(--esn-font-display); font-weight:800; text-transform:uppercase; letter-spacing:.04em; font-size:18px; margin:0; }
.esn-frais-entry { display:grid; grid-template-columns:130px 1fr 130px 110px; gap:10px 12px; align-items:end; background:var(--esn-surface-2); border:1px dashed var(--esn-border); border-radius:10px; padding:14px; margin:12px 0; }
.esn-frais-entry .esn-fld { display:flex; flex-direction:column; gap:4px; } .esn-frais-entry .esn-fld-wide { grid-column:span 2; }
.esn-frais-entry label { font-size:11px; color:var(--esn-muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.esn-frais-entry input, .esn-frais-entry select { border:1px solid var(--esn-border); border-radius:7px; padding:7px 9px; font:inherit; font-size:13px; }
.esn-frais-drop { grid-column:span 2; border:1px dashed var(--esn-border); border-radius:8px; padding:10px; background:var(--esn-surface); }
.esn-frais-add { grid-column:span 2; justify-self:end; }
.esn-frais-lines .esn-num { text-align:right; font-variant-numeric:tabular-nums; }
.esn-frais-total { display:flex; justify-content:flex-end; gap:16px; align-items:baseline; margin-top:10px; }
.esn-frais-total b { font-family:var(--esn-font-display); font-weight:800; font-size:18px; }
.esn-frais-submitbar { margin-top:16px; text-align:right; }
.esn-frais-submit { font-family:var(--esn-font-display); font-weight:800; font-size:15px; padding:12px 28px; }