:root {
    /* Palette EKI (alignée sur D:\pipeline_doc\themes\eki.css) */
    --eki-red:       #CB2821;
    --eki-red-dark:  #9F1D1A;
    --eki-red-light: #E94B3F;
    --eki-black:     #1a1a1a;
    --eki-gray-900:  #2a2a2a;
    --eki-gray-700:  #555555;
    --eki-gray-500:  #888888;
    --eki-gray-300:  #cccccc;
    --eki-gray-200:  #e2e2e2;
    --eki-gray-100:  #f5f5f5;
    --eki-bg:        #FAFAF9;

    --eki-radius: 8px;

    /* Typo : on reste sur les polices système (Inter / Archivo ne sont pas
       chargées pour éviter d'ouvrir la CSP vers fonts.googleapis.com). */
    --font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter",
                    Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", "Archivo",
                    "Inter", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--eki-bg);
    color: var(--eki-gray-900);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    font-size: 16px;
    line-height: 1.55;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--eki-black);
    letter-spacing: -0.015em;
    font-weight: 700;
}

a { color: var(--eki-red); text-decoration: none; }
a:hover { text-decoration: underline; }

.eki-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
}

/* Header */
.eki-header {
    background: #fff;
    border-bottom: 1px solid var(--eki-gray-200);
}
.eki-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
}
.eki-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--eki-black);
}
.eki-brand:hover { text-decoration: none; }
.eki-brand-logo {
    height: 32px;
    width: auto;
    display: block;
}
.eki-brand-sub {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--eki-gray-700);
    font-size: 18px;
    letter-spacing: 0.01em;
    border-left: 1px solid var(--eki-gray-300);
    padding-left: 12px;
}
.eki-nav { display: flex; gap: 24px; }
.eki-nav-link {
    color: var(--eki-gray-700);
    font-weight: 500;
    font-size: 15px;
}
.eki-nav-link:hover { color: var(--eki-red); text-decoration: none; }

/* Main */
.eki-main {
    flex: 1;
    padding: 80px 24px 64px;
}

/* Hero */
.eki-hero {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}
.eki-hero-title {
    font-size: 42px;
    line-height: 1.12;
    margin: 0 0 20px;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.eki-hero-sub {
    font-size: 17px;
    color: var(--eki-gray-700);
    line-height: 1.55;
    margin: 0 0 36px;
}
.eki-hero-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 36px;
}
.eki-hero-note {
    font-size: 13px;
    color: var(--eki-gray-700);
    background: #fff;
    border: 1px solid var(--eki-gray-200);
    border-left: 3px solid var(--eki-red);
    border-radius: var(--eki-radius);
    padding: 12px 16px;
    margin: 0;
    text-align: left;
}

/* Buttons */
.eki-btn {
    display: inline-block;
    padding: 12px 22px;
    border-radius: var(--eki-radius);
    border: 1px solid transparent;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    cursor: pointer;
    line-height: 1.4;
    font-family: var(--font-body);
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.05s;
}
.eki-btn:active { transform: translateY(1px); }
.eki-btn-primary {
    background: var(--eki-red);
    color: #fff;
}
.eki-btn-primary:hover {
    background: var(--eki-red-dark);
    color: #fff;
    text-decoration: none;
}
.eki-btn-ghost {
    background: #fff;
    color: var(--eki-black);
    border-color: var(--eki-gray-300);
}
.eki-btn-ghost:hover {
    border-color: var(--eki-red);
    color: var(--eki-red);
    text-decoration: none;
}

/* Footer */
.eki-footer {
    background: #fff;
    border-top: 1px solid var(--eki-gray-200);
    padding: 24px 0;
    color: var(--eki-gray-700);
    font-size: 14px;
}
.eki-footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 0 24px;
}
.eki-footer-nav { display: flex; gap: 20px; flex-wrap: wrap; }
.eki-footer-link {
    color: var(--eki-gray-700);
    text-decoration: none;
}
.eki-footer-link:hover { color: var(--eki-red); text-decoration: none; }

@media (max-width: 600px) {
    .eki-hero-title { font-size: 30px; }
    .eki-main { padding: 40px 16px; }
    .eki-header-inner { padding: 14px 16px; }
    .eki-footer-inner { flex-direction: column; align-items: flex-start; padding: 0 16px; }
    .eki-brand-sub { font-size: 16px; }
    .eki-brand-logo { height: 28px; }
}

/* ============================================================
   ADMIN — layout, nav, tables, forms
   ============================================================ */

.eki-admin-body { background: #fff; }

/* Les pages admin ont plus de tableaux denses → on élargit le wrap mais on
   conserve les paddings latéraux par défaut pour éviter le bord trop coupant. */
.eki-admin-body .eki-wrap { max-width: 1500px; }

.eki-admin-header {
    background: var(--eki-black);
    color: #fff;
}
.eki-admin-header .eki-brand,
.eki-admin-header .eki-brand-sub { color: #fff; }
.eki-admin-header .eki-brand-sub { border-left-color: rgba(255,255,255,0.3); }
.eki-admin-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    gap: 24px;
    flex-wrap: wrap;
}
.eki-admin-header .eki-brand-logo {
    filter: brightness(0) invert(1);
    opacity: 0.95;
    height: 28px;
}

.eki-admin-nav { display: flex; gap: 18px; flex-wrap: wrap; }
.eki-admin-nav-link {
    color: rgba(255,255,255,0.78);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    padding: 6px 10px;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}
.eki-admin-nav-link:hover { color: #fff; background: rgba(255,255,255,0.08); text-decoration: none; }
.eki-admin-nav-link.is-active {
    color: #fff;
    background: var(--eki-red);
}
.eki-admin-nav-link--muted { color: rgba(255,255,255,0.55); margin-left: 12px; }

.eki-admin-main {
    padding: 36px 24px;
    flex: 1;
}

.eki-admin-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.eki-admin-page-title {
    margin: 0;
    font-size: 26px;
    letter-spacing: -0.02em;
}

.eki-admin-empty {
    color: var(--eki-gray-700);
    background: var(--eki-gray-100);
    border: 1px dashed var(--eki-gray-300);
    border-radius: var(--eki-radius);
    padding: 24px;
    text-align: center;
}

.eki-admin-flash {
    background: #f6ffed;
    border: 1px solid #b7eb8f;
    border-left: 3px solid #52c41a;
    color: #135200;
    border-radius: var(--eki-radius);
    padding: 12px 16px;
    margin-bottom: 20px;
}

/* Tables */
.eki-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--eki-gray-200);
    border-radius: var(--eki-radius);
    background: #fff;
}
.eki-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.eki-table th,
.eki-table td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--eki-gray-200);
}
.eki-table th {
    background: var(--eki-gray-100);
    font-weight: 600;
    color: var(--eki-gray-900);
    border-bottom: 2px solid var(--eki-gray-200);
    white-space: nowrap;
}
.eki-table tbody tr:last-child td { border-bottom: none; }
.eki-table tbody tr:hover { background: #fff9f9; }
.eki-table-muted { color: var(--eki-gray-500); font-weight: 400; }

/* Forms */
.eki-form {
    background: #fff;
    border: 1px solid var(--eki-gray-200);
    border-radius: var(--eki-radius);
    padding: 24px;
    max-width: 880px;
}
.eki-form-row {
    display: flex;
    gap: 18px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.eki-form-group {
    display: flex;
    flex-direction: column;
    flex: 1 1 200px;
    min-width: 200px;
}
.eki-form-group--wide { flex: 2 1 320px; }
.eki-form-check { flex-direction: row; align-items: center; gap: 8px; }
.eki-form-check .eki-label { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }

.eki-label {
    display: block;
    font-weight: 600;
    font-size: 13px;
    color: var(--eki-gray-900);
    margin-bottom: 6px;
}

.eki-input {
    width: 100%;
    border: 1px solid var(--eki-gray-300);
    border-radius: 6px;
    padding: 9px 12px;
    font-size: 15px;
    font-family: inherit;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.eki-input:focus {
    outline: none;
    border-color: var(--eki-red);
    box-shadow: 0 0 0 3px rgba(203, 40, 33, 0.15);
}
textarea.eki-input { resize: vertical; min-height: 64px; }

.eki-validation {
    display: block;
    color: var(--eki-red-dark);
    font-size: 12px;
    margin-top: 4px;
    min-height: 14px;
}
/* ASP.NET Core ajoute validation-summary-valid si pas d'erreur, -errors sinon.
   On masque par défaut et on n'affiche que la variante errors. */
.eki-validation-summary,
.eki-validation-summary.validation-summary-valid { display: none; }
.eki-validation-summary.validation-summary-errors {
    display: block;
    background: #fff5f4;
    border-left: 3px solid var(--eki-red);
    padding: 10px 14px;
    margin-bottom: 18px;
    color: var(--eki-red-dark);
    border-radius: var(--eki-radius);
}
.eki-validation-summary ul { margin: 0; padding-left: 18px; }

.eki-form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 8px;
}

.eki-inline-list {
    margin: 0;
    padding-left: 16px;
    font-size: 13px;
    line-height: 1.5;
}
.eki-inline-list li { margin: 1px 0; }

.eki-checkbox-line {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    padding: 4px 0;
    cursor: pointer;
}
.eki-checkbox-line input[type="checkbox"] { margin: 0; }

.eki-btn-mini {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 5px;
    border: 1px solid var(--eki-gray-300);
    background: #fff;
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    color: var(--eki-gray-900);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.eki-btn-mini:hover { background: var(--eki-gray-100); }
.eki-btn-mini-warn { color: var(--eki-red-dark); border-color: var(--eki-red); }
.eki-btn-mini-warn:hover { background: var(--eki-red); color: #fff; }
.eki-btn-mini-ok { color: #135200; border-color: #52c41a; }
.eki-btn-mini-ok:hover { background: #52c41a; color: #fff; }

.eki-row-inactive td { color: var(--eki-gray-500); }
.eki-row-inactive td strong { color: var(--eki-gray-700); }

.eki-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 5px;
    border: 1px solid var(--eki-gray-300);
    background: #fff;
    color: var(--eki-gray-700);
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.eki-btn-icon:hover {
    border-color: var(--eki-red);
    color: var(--eki-red);
    background: #fff5f4;
    text-decoration: none;
}

.eki-link-muted {
    color: var(--eki-gray-700);
    text-decoration: none;
    font-size: 13px;
}
.eki-link-muted:hover { color: var(--eki-red); text-decoration: underline; }

.eki-input:disabled {
    background: var(--eki-gray-100);
    color: var(--eki-gray-500);
    cursor: not-allowed;
}
.eki-group-disabled .eki-label {
    color: var(--eki-gray-500);
}

.eki-table-link { color: var(--eki-fg, var(--eki-gray-900)); text-decoration: none; }
.eki-table-link:hover { color: var(--eki-red); text-decoration: underline; }

.eki-details-block {
    background: #fff;
    border: 1px solid var(--eki-gray-200);
    border-radius: var(--eki-radius);
    padding: 16px 20px;
    margin-bottom: 16px;
}
.eki-details-title {
    margin: 0 0 12px 0;
    font-size: 16px;
    color: var(--eki-gray-900);
}
.eki-dl {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 6px 16px;
    margin: 0;
    font-size: 14px;
}
.eki-dl dt {
    color: var(--eki-gray-700);
    font-weight: 500;
}
.eki-dl dd { margin: 0; color: var(--eki-gray-900); }

.eki-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
}
.eki-badge-ok { background: #f6ffed; color: #135200; border: 1px solid #b7eb8f; }
.eki-badge-pending { background: #fffbe6; color: #874d00; border: 1px solid #ffe58f; }
.eki-badge-muted { background: var(--eki-gray-100); color: var(--eki-gray-500); border: 1px solid var(--eki-gray-200); }

.eki-register-fallback {
    max-width: 800px;
    margin: 20px 0 28px;
    padding: 16px 18px;
    background: #fffbe6;
    border: 1px solid #ffe58f;
    border-left: 3px solid var(--eki-red);
    border-radius: var(--eki-radius);
    font-size: 14px;
    color: var(--eki-gray-900);
}
.eki-register-fallback p {
    margin: 8px 0 0;
    line-height: 1.55;
    color: var(--eki-gray-700);
}
.eki-register-fallback a { color: var(--eki-red-dark); font-weight: 600; }

.eki-row-main td { border-bottom: none; }
.eki-row-suboptions td {
    background: #fafafa;
    font-size: 13px;
    padding: 6px 14px 12px;
    border-bottom: 1px solid var(--eki-gray-200);
}
.eki-row-suboptions:last-child td { border-bottom: none; }
.eki-table tbody tr.eki-row-suboptions:hover { background: #fafafa; }
.eki-suboptions-label {
    font-weight: 600;
    color: var(--eki-gray-700);
    margin-right: 8px;
}
.eki-suboptions-list {
    display: inline;
    margin: 0;
    padding: 0;
    list-style: none;
}
.eki-suboptions-list li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 6px 4px 0;
    padding: 2px 8px;
    background: #fff;
    border: 1px solid var(--eki-gray-200);
    border-radius: 4px;
}
.eki-suboptions-edit {
    display: inline-flex;
    align-items: center;
    color: var(--eki-gray-500);
    text-decoration: none;
    border-radius: 3px;
    padding: 1px 2px;
}
.eki-suboptions-edit:hover {
    color: var(--eki-red);
    background: var(--eki-gray-100);
    text-decoration: none;
}