/* =============================================================================
   KnowMap Design System — tokens, Bootstrap overrides, composants de base
   ============================================================================= */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/inter/Inter-latin-400-normal-poxsSdI.woff2") format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/inter/Inter-latin-500-normal-Uwgfwtt.woff2") format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/inter/Inter-latin-600-normal-keCwlca.woff2") format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/inter/Inter-latin-700-normal-_eucScQ.woff2") format('woff2');
}

:root {
    /* ── Marque (alias legacy conservés) ── */
    --km-primary: #1E3A5F;
    --km-primary-dark: #162d4e;
    --km-primary-light: #2d5a8f;
    --km-secondary: #E07B39;
    --km-secondary-hover: #c96b2f;
    --km-secondary-light: #fff7ed;
    /* CTA plein texte blanc : AA ≥ 4,5:1 (luminance relative WCAG).
       #b2612d vs #fff = 4,53:1 ; hover #a05728 vs #fff = 5,40:1.
       Badges / accents gardent --km-secondary. */
    --km-secondary-cta: #b2612d;
    --km-secondary-cta-hover: #a05728;
    --km-navy: var(--km-primary);
    --km-navy-dark: var(--km-primary-dark);
    --km-orange: var(--km-secondary);
    --km-green: #2D7D46;

    /* ── Sémantiques (criticité savoirs / statuts) ── */
    --km-success: #2D7D46;
    --km-success-light: #f0fdf4;
    --km-success-dark: #15803d;
    --km-warning: #f97316;
    --km-warning-light: #fffbeb;
    --km-warning-bg: #fef3c7;
    --km-danger: #ef4444;
    --km-danger-light: #fef2f2;
    --km-info: #2563eb;
    --km-info-light: #eff6ff;

    /* ── Criticité (pastels référence + dots) ── */
    --km-crit-critical-bg: #fee2e2;
    --km-crit-critical-text: #b91c1c;
    --km-crit-critical-border: #fecaca;
    --km-crit-critical-dot: #ef4444;
    --km-crit-high-bg: #ffedd5;
    /* Texte assombri (~4,94:1) — marge AA vs #c2410c à 4,52:1 */
    --km-crit-high-text: #b83d0b;
    --km-crit-high-border: #fed7aa;
    --km-crit-high-dot: #f97316;
    --km-crit-medium-bg: #fef9c3;
    /* Texte assombri (~5,01:1) — marge AA vs #a16207 à 4,58:1 */
    --km-crit-medium-text: #985d06;
    --km-crit-medium-border: #fde68a;
    --km-crit-medium-dot: #eab308;
    --km-crit-low-bg: #dcfce7;
    /* Texte assombri (~5,00:1) — marge AA vs #15803d à 4,57:1 */
    --km-crit-low-text: #137939;
    --km-crit-low-border: #bbf7d0;
    --km-crit-low-dot: #22c55e;

    /* Mastery / dependency-map edges (Phase 1F / 1G tokens) */
    --km-mastery-sole: var(--km-danger);
    --km-mastery-expert: var(--km-warning);
    --km-mastery-autonomous: var(--km-info);
    --km-mastery-other: #9ca3af;

    /* ── Neutres ── */
    --km-gray-50: #f9fafb;
    --km-gray-100: #f3f4f6;
    --km-gray-200: #e5e7eb;
    --km-gray-300: #d1d5db;
    --km-gray-400: #9ca3af;
    --km-gray-500: #6b7280;
    --km-gray-600: #4b5563;
    --km-gray-700: #374151;
    --km-gray-800: #1f2937;
    --km-gray-900: #111827;

    /* ── Surfaces ── */
    --km-bg-app: #f0f4f8;
    --km-bg-card: #ffffff;
    --km-bg-sidebar: var(--km-primary);
    --km-sidebar-text: #8ba8c8;
    --km-sidebar-text-hover: #ffffff;
    --km-sidebar-width-collapsed: 4rem;

    /* ── Typographie ── */
    --km-font-family: 'Inter', system-ui, -apple-system, sans-serif;
    --km-fs-xs: 0.75rem;
    --km-fs-sm: 0.875rem;
    --km-fs-base: 1rem;
    --km-fs-lg: 1.125rem;
    --km-fs-xl: 1.25rem;
    --km-fs-2xl: 1.5rem;
    --km-fs-3xl: 2rem;
    --km-lh-tight: 1.25;
    --km-lh-normal: 1.5;
    --km-lh-relaxed: 1.625;
    --km-fw-normal: 400;
    --km-fw-medium: 500;
    --km-fw-semibold: 600;
    --km-fw-bold: 700;
    --km-fw-extrabold: 800;

    /* ── Espacements (complément Bootstrap) ── */
    --km-sidebar-width: 224px;
    --km-content-max-width: 1280px;

    /* ── Rayons ── */
    --km-radius-sm: 0.375rem;
    --km-radius-md: 0.5rem;
    --km-radius-lg: 0.75rem;
    --km-radius-xl: 1rem;
    --km-radius: 1rem;
    --km-radius-pill: 999px;

    /* ── Ombres ── */
    --km-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --km-shadow-md: 0 4px 12px rgba(30, 58, 95, 0.1);
    --km-shadow-lg: 0 10px 25px rgba(30, 58, 95, 0.15);

    /* ── Transitions ── */
    --km-transition-fast: 150ms ease;
    --km-transition-normal: 200ms ease;

    /* ── Focus ── */
    --km-focus-ring: 0 0 0 0.2rem rgba(30, 58, 95, 0.25);

    /* ── Bootstrap 5 mapping ── */
    --bs-primary: var(--km-primary);
    --bs-primary-rgb: 30, 58, 95;
    --bs-secondary: var(--km-gray-500);
    --bs-secondary-rgb: 107, 114, 128;
    --bs-success: var(--km-success);
    --bs-success-rgb: 45, 125, 70;
    --bs-info: var(--km-info);
    --bs-info-rgb: 37, 99, 235;
    --bs-warning: var(--km-warning);
    --bs-warning-rgb: 249, 115, 22;
    --bs-danger: var(--km-danger);
    --bs-danger-rgb: 239, 68, 68;
    --bs-body-font-family: var(--km-font-family);
    --bs-body-color: var(--km-gray-800);
    --bs-body-bg: var(--km-bg-app);
    --bs-border-color: var(--km-gray-200);
    --bs-border-radius: var(--km-radius-md);
    --bs-border-radius-sm: var(--km-radius-sm);
    --bs-border-radius-lg: var(--km-radius-lg);
    --bs-link-color: var(--km-primary);
    --bs-link-hover-color: var(--km-primary-light);
}

/* ── Base ── */
html {
    scroll-behavior: smooth;
}

.km-app,
.km-landing-body {
    font-family: var(--km-font-family);
}

/* Focus visible global (WCAG AA) — navy, référence React */
:focus-visible {
    outline: 2px solid var(--km-primary);
    outline-offset: 2px;
}

/* ── Boutons ── */
.btn {
    font-weight: var(--km-fw-semibold);
    border-radius: var(--km-radius-lg);
    transition: background-color var(--km-transition-fast), border-color var(--km-transition-fast), color var(--km-transition-fast);
}

.btn:focus-visible {
    box-shadow: var(--km-focus-ring);
}

/*
 * CTA : conversion (paiement, upgrade, action principale de page) = orange `.km-btn-orange`.
 * Actions secondaires de liste (créer une ligne, pagination, toggle) = navy `.btn-primary` / `.km-btn-navy`.
 */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--km-primary);
    --bs-btn-border-color: var(--km-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--km-primary-dark);
    --bs-btn-hover-border-color: var(--km-primary-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--km-primary-dark);
    --bs-btn-active-border-color: var(--km-primary-dark);
}

.btn.km-btn-orange,
a.btn.km-btn-orange {
    background-color: var(--km-secondary-cta) !important;
    border-color: var(--km-secondary-cta) !important;
    color: #fff !important;
}

.btn.km-btn-orange:hover,
a.btn.km-btn-orange:hover {
    background-color: var(--km-secondary-cta-hover) !important;
    border-color: var(--km-secondary-cta-hover) !important;
    color: #fff !important;
}

.btn.km-btn-navy,
a.btn.km-btn-navy,
.btn.km-btn-primary,
a.btn.km-btn-primary {
    background-color: var(--km-primary) !important;
    border-color: var(--km-primary) !important;
    color: #fff !important;
}

.btn.km-btn-navy:hover,
a.btn.km-btn-navy:hover,
.btn.km-btn-primary:hover,
a.btn.km-btn-primary:hover {
    background-color: var(--km-primary-dark) !important;
    border-color: var(--km-primary-dark) !important;
    color: #fff !important;
}

.btn.km-btn-ghost,
.btn.km-btn-outline {
    background: transparent;
    border: 1px solid var(--km-gray-300);
    color: var(--km-primary);
}

.btn.km-btn-ghost:hover {
    background: var(--km-gray-50);
    border-color: var(--km-gray-400);
    color: var(--km-primary);
}

.btn.btn-lg.km-btn-orange {
    box-shadow: var(--km-shadow-lg);
}

/* ── Cartes ── */
.km-card {
    background: var(--km-bg-card);
    border: 1px solid var(--km-gray-200);
    border-radius: var(--km-radius-xl);
    box-shadow: var(--km-shadow-sm);
}

.km-card--kpi {
    padding: 1.25rem;
}

.km-card--action .km-card__footer {
    border-top: 1px solid var(--km-gray-200);
    padding: 1rem 1.25rem;
    background: var(--km-gray-50);
    border-radius: 0 0 var(--km-radius-xl) var(--km-radius-xl);
}

.card {
    border-color: var(--km-gray-200);
    border-radius: var(--km-radius-xl);
    box-shadow: var(--km-shadow-sm);
}

.card-header {
    background: var(--km-gray-50);
    border-bottom-color: var(--km-gray-200);
    font-weight: var(--km-fw-semibold);
    color: var(--km-primary);
}

/* ── KPI ── */
.km-kpi {
    background: var(--km-bg-card);
    border-radius: var(--km-radius-xl);
    padding: 1.25rem;
    box-shadow: var(--km-shadow-sm);
    border: 1px solid var(--km-gray-200);
}

.km-kpi-value {
    font-size: var(--km-fs-3xl);
    font-weight: var(--km-fw-bold);
    color: var(--km-primary);
    line-height: var(--km-lh-tight);
}

.km-kpi-label {
    color: var(--km-gray-700);
    font-size: var(--km-fs-sm);
}

.km-kpi-subtitle {
    color: var(--km-gray-600);
    font-size: var(--km-fs-xs);
    margin-top: 0.25rem;
}

.km-kpi--with-icon {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.km-kpi-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    border-radius: var(--km-radius-lg);
    background: var(--km-gray-100);
    color: var(--km-primary);
}

.km-kpi--blue {
    background: var(--km-info-light);
    border-color: #fff;
}
.km-kpi--blue .km-kpi-icon { background: #dbeafe; color: var(--km-info); }

.km-kpi--red {
    background: var(--km-danger-light);
    border-color: #fff;
}
.km-kpi--red .km-kpi-icon { background: #fee2e2; color: var(--km-danger); }
.km-kpi--red .km-kpi-value { color: #b91c1c; }

.km-kpi--orange {
    background: var(--km-secondary-light);
    border-color: #fff;
}
.km-kpi--orange .km-kpi-icon { background: #ffedd5; color: var(--km-secondary-cta-hover); }
.km-kpi--orange .km-kpi-value { color: #c2410c; }

.km-kpi--green {
    background: var(--km-success-light);
    border-color: #fff;
}
.km-kpi--green .km-kpi-icon { background: #dcfce7; color: var(--km-success); }
.km-kpi--green .km-kpi-value { color: var(--km-success-dark); }

/* ── Formulaires ── */
.form-label {
    font-weight: var(--km-fw-semibold);
    color: var(--km-primary);
    font-size: var(--km-fs-sm);
}

.form-control,
.form-select {
    border-color: var(--km-gray-300);
    border-radius: var(--km-radius-md);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--km-secondary);
    box-shadow: var(--km-focus-ring);
}

/*
 * Tom Select (UX Autocomplete) — overlay tokens Phase 1A.
 * Base : thème bootstrap5 (controllers.json). Hover OS du <select> natif
 * n’est pas stylable ; .ts-dropdown .active l’est.
 * tom-select.bootstrap5.css est chargé APRÈS knowmap-base : spécificité
 * `body > .ts-dropdown` / `.option.active` pour gagner le cascade
 * (z-index 1100 > overlay wizard 1048, dropdownParent: body).
 */
.ts-wrapper .ts-control,
.ts-control {
    border-color: var(--km-gray-300);
    border-radius: var(--km-radius-md);
    color: var(--km-gray-800);
    background-color: #fff;
}

.ts-wrapper.focus .ts-control,
.ts-wrapper.single.input-active .ts-control,
.focus .ts-control {
    border-color: var(--km-secondary);
    outline: 0;
    box-shadow: var(--km-focus-ring);
}

body > .ts-dropdown,
body > .ts-dropdown.form-control,
body > .ts-dropdown.form-select,
.ts-dropdown,
.ts-dropdown.form-control,
.ts-dropdown.form-select {
    z-index: 1100;
    border-color: var(--km-gray-300);
    border-radius: var(--km-radius-md);
    background: #fff;
    color: var(--km-gray-800);
    box-shadow: var(--km-shadow-md);
}

.ts-dropdown .option.active,
.ts-dropdown .active {
    background-color: var(--km-secondary-light);
    color: var(--km-primary);
}

.ts-dropdown .option.selected,
.ts-dropdown .selected {
    background-color: var(--km-primary);
    color: #fff;
}

.ts-dropdown .option.selected.active,
.ts-dropdown .selected.active {
    background-color: var(--km-primary);
    color: #fff;
}

.plugin-dropdown_input.focus .ts-dropdown .dropdown-input {
    border-color: var(--km-secondary);
    outline: 0;
    box-shadow: var(--km-focus-ring);
}

/* Select sans image de fond Bootstrap : axe → incomplete color-contrast (bgImage). */
.km-select {
    color: var(--km-gray-800) !important;
    background-color: #fff !important;
    background-image: none !important;
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.25rem;
}

.km-select-wrap {
    position: relative;
    display: block;
}

.km-select-wrap::after {
    content: '';
    position: absolute;
    right: 0.9rem;
    top: 50%;
    width: 0.45rem;
    height: 0.45rem;
    border-right: 2px solid var(--km-gray-700);
    border-bottom: 2px solid var(--km-gray-700);
    transform: translateY(-60%) rotate(45deg);
    pointer-events: none;
}

/* Filter bar : wraps flex (évite width:100% Bootstrap qui empile les <select> natifs) */
.km-filter-bar .km-select-wrap {
    flex: 0 1 auto;
    min-width: 0;
    width: auto;
}

.km-filter-bar .km-select-wrap .km-select {
    width: 100%;
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
    border-color: var(--km-danger);
}

.form-control.is-valid,
.was-validated .form-control:valid {
    border-color: var(--km-success);
}

.invalid-feedback,
.form-error-message {
    color: var(--km-danger);
    font-size: var(--km-fs-sm);
}

.km-form-row {
    margin-bottom: 1rem;
}

.km-form-row__help {
    font-size: var(--km-fs-xs);
    color: var(--km-gray-500);
    margin-top: 0.25rem;
}

/* ── Tableaux ── */
.km-table-wrapper {
    overflow-x: auto;
}

.table {
    --bs-table-hover-bg: var(--km-gray-50);
}

.table thead th {
    font-size: var(--km-fs-sm);
    font-weight: var(--km-fw-semibold);
    color: var(--km-gray-600);
    border-bottom-width: 1px;
    white-space: nowrap;
}

.table.km-table--compact {
    font-size: var(--km-fs-sm);
}

/*
 * Actions de ligne (modifier / supprimer).
 * Bootstrap 5 : `.table { vertical-align: top; }` — les boutons collaient
 * au haut de la cellule dès qu’une ligne dépasse 1 ligne (sous-titre, chips, Sole).
 * On ne pose pas `display: flex` sur le `td` (casse le table layout).
 * Le groupe remplit la hauteur de cellule (astuce `height: 1px` desktop) puis
 * centre via flex `align-items: center`.
 */
.km-table-actions__group {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: nowrap;
}

@media (min-width: 768px) {
    .table td.km-table-actions {
        height: 1px;
    }

    .km-table-actions__group {
        height: 100%;
    }
}

/* Mobile : cartes empilées */
@media (max-width: 767.98px) {
    .km-table-responsive-cards thead {
        display: none;
    }

    .km-table-responsive-cards tbody tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid var(--km-gray-200);
        border-radius: var(--km-radius-lg);
        padding: 0.75rem;
        background: var(--km-bg-card);
    }

    .km-table-responsive-cards tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.35rem 0;
        border: none;
    }

    .km-table-responsive-cards tbody td::before {
        content: attr(data-label);
        font-weight: var(--km-fw-semibold);
        color: var(--km-gray-500);
        font-size: var(--km-fs-xs);
        margin-right: 1rem;
    }

    .km-table-responsive-cards tbody td.km-table-actions {
        justify-content: flex-end;
        padding-top: 0.5rem;
        border-top: 1px solid var(--km-gray-100);
        margin-top: 0.25rem;
    }

    .km-table-responsive-cards tbody td.km-table-actions::before {
        display: none;
    }

    /* Zone tactile ≥ 44px (même seuil que le chrome header, Phase 2 QA device) */
    .km-table-actions__group .btn {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }
}

/* ── Badges ── */
.badge {
    font-weight: var(--km-fw-semibold);
    border-radius: var(--km-radius-pill);
}

.km-badge--critical,
.km-badge--high,
.km-badge--medium,
.km-badge--low {
    display: inline-flex !important;
    align-items: center;
    gap: 0.35em;
    border: 1px solid transparent;
    font-weight: var(--km-fw-semibold);
}

.km-badge--critical::before,
.km-badge--high::before,
.km-badge--medium::before,
.km-badge--low::before {
    content: "";
    width: 0.45em;
    height: 0.45em;
    border-radius: 50%;
    flex-shrink: 0;
}

.km-badge--critical {
    background: var(--km-crit-critical-bg) !important;
    color: var(--km-crit-critical-text) !important;
    border-color: var(--km-crit-critical-border);
}
.km-badge--critical::before { background: var(--km-crit-critical-dot); }

.km-badge--high {
    background: var(--km-crit-high-bg) !important;
    color: var(--km-crit-high-text) !important;
    border-color: var(--km-crit-high-border);
}
.km-badge--high::before { background: var(--km-crit-high-dot); }

.km-badge--medium {
    background: var(--km-crit-medium-bg) !important;
    color: var(--km-crit-medium-text) !important;
    border-color: var(--km-crit-medium-border);
}
.km-badge--medium::before { background: var(--km-crit-medium-dot); }

.km-badge--low {
    background: var(--km-crit-low-bg) !important;
    color: var(--km-crit-low-text) !important;
    border-color: var(--km-crit-low-border);
}
.km-badge--low::before { background: var(--km-crit-low-dot); }

/* ── Alertes ── */
.alert {
    border-radius: var(--km-radius-lg);
    border: none;
}

.alert-success { background: var(--km-success-light); color: var(--km-success-dark); }
.alert-warning { background: var(--km-warning-light); color: var(--km-warning); }
.alert-danger { background: var(--km-danger-light); color: var(--km-danger); }
.alert-info { background: var(--km-info-light); color: var(--km-info); }

/* ── Consent banner (public + /app settings panel) ── */
.km-consent-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1040;
    background: #fff;
    border-top: 3px solid var(--km-primary);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12);
}

.km-consent-banner .btn.flex-fill { min-width: 0; }

/* ── Toast / Flash ── */
.km-toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: min(24rem, calc(100vw - 2rem));
    width: 100%;
    pointer-events: none;
}

.km-toast {
    /* Neutre + icône accent : carte blanche, bordure grise 4 côtés, pastels criticité */
    --km-toast-duration: 6000ms;
    --km-toast-icon-size: 2rem;
    --km-toast-accent: var(--km-primary);
    --km-toast-icon-bg: var(--km-gray-100);
    --km-toast-icon-fg: var(--km-primary);
    position: relative;
    overflow: hidden;
    background: var(--km-bg-card);
    border: 1px solid var(--km-gray-200);
    border-radius: var(--km-radius-xl);
    padding: 0;
    box-shadow: var(--km-shadow-md);
    pointer-events: auto;
    animation: km-toast-in 0.25s ease;
}

.km-toast.is-leaving {
    animation: km-toast-out 0.25s ease forwards;
}

.km-toast__inner {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem 0.625rem;
}

.km-toast__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--km-toast-icon-size);
    height: var(--km-toast-icon-size);
    border-radius: 50%;
    background: var(--km-toast-icon-bg);
    color: var(--km-toast-icon-fg);
    line-height: 0;
}

.km-toast__icon svg {
    width: 1.05rem;
    height: 1.05rem;
}

.km-toast__message {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.9375rem;
    font-weight: var(--km-fw-medium);
    line-height: 1.4;
    color: var(--km-primary);
}

.km-toast__close {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0.15rem -0.1rem 0 0;
    padding: 0;
    opacity: 0.45;
    color: var(--km-gray-500);
    background-size: 0.7em;
}

.km-toast__close:hover,
.km-toast__close:focus {
    opacity: 0.75;
    box-shadow: none;
}

.km-toast__progress {
    /* Sous le texte uniquement (pas pleine largeur) : aligne sous le message */
    height: 2px;
    margin: 0 calc(1rem + 1.25rem) 0.75rem calc(1rem + var(--km-toast-icon-size) + 0.75rem);
    border-radius: var(--km-radius-pill);
    background: var(--km-gray-100);
    overflow: hidden;
}

.km-toast__progress-bar {
    height: 100%;
    width: 100%;
    transform-origin: left center;
    background: var(--km-toast-accent);
    animation: km-toast-progress var(--km-toast-duration) linear forwards;
}

.km-toast.is-paused .km-toast__progress-bar {
    animation-play-state: paused;
}

/* Variantes : pastels Phase 1A (criticité) + info token existant */
.km-toast--success {
    --km-toast-icon-bg: var(--km-crit-low-bg);
    --km-toast-icon-fg: var(--km-crit-low-text);
    --km-toast-accent: var(--km-crit-low-text);
}

.km-toast--warning {
    --km-toast-icon-bg: var(--km-crit-high-bg);
    --km-toast-icon-fg: var(--km-crit-high-text);
    --km-toast-accent: var(--km-crit-high-text);
}

.km-toast--danger {
    --km-toast-icon-bg: var(--km-crit-critical-bg);
    --km-toast-icon-fg: var(--km-crit-critical-text);
    --km-toast-accent: var(--km-crit-critical-text);
}

.km-toast--info {
    --km-toast-icon-bg: var(--km-info-light);
    --km-toast-icon-fg: var(--km-info);
    --km-toast-accent: var(--km-info);
}

@keyframes km-toast-in {
    from { opacity: 0; transform: translateX(1rem); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes km-toast-out {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(1rem); }
}

@keyframes km-toast-progress {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .km-toast {
        animation: km-toast-fade-in 0.2s ease;
    }

    .km-toast.is-leaving {
        animation: km-toast-fade-out 0.18s ease forwards;
    }

    .km-toast__progress {
        display: none;
    }

    .km-toast__progress-bar {
        animation: none;
    }

    @keyframes km-toast-fade-in {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    @keyframes km-toast-fade-out {
        from { opacity: 1; }
        to { opacity: 0; }
    }
}

/* ── Empty state ── */
.km-empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--km-gray-700);
}

.km-empty-state__icon {
    width: 3rem;
    height: 3rem;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--km-gray-100);
    color: var(--km-gray-400);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.km-empty-state__title {
    font-weight: var(--km-fw-semibold);
    color: var(--km-primary);
    margin-bottom: 0.5rem;
}

.km-empty-state__message {
    color: var(--km-gray-700);
    font-size: var(--km-fs-sm);
}

/* Page-level empty (gate dashed / vide réel framed) — cadre centré, min-height ~60vh */
.km-empty-state-frame {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 1.5rem 1rem;
}

.km-empty-state--dashed,
.km-empty-state--framed {
    width: 100%;
    max-width: 28rem;
    margin: 0;
    padding: 2.5rem 2rem;
    background: var(--km-bg-card);
    border-radius: var(--km-radius-xl);
}

.km-empty-state--dashed {
    border: 2px dashed var(--km-gray-200);
}

.km-empty-state--framed {
    border: 1px solid var(--km-gray-200);
    box-shadow: var(--km-shadow-sm);
}

.km-empty-state--dashed .km-empty-state__icon,
.km-empty-state--framed .km-empty-state__icon {
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 1rem;
    border-radius: var(--km-radius-xl);
    font-size: 1.5rem;
}

.km-empty-state--dashed .km-empty-state__title,
.km-empty-state--framed .km-empty-state__title {
    font-size: var(--km-fs-lg);
    font-weight: var(--km-fw-bold);
    color: var(--km-primary);
    margin-bottom: 0.5rem;
}

.km-empty-state--dashed .km-empty-state__message,
.km-empty-state--framed .km-empty-state__message {
    font-size: var(--km-fs-sm);
    color: var(--km-gray-700);
}

/* ── Page header ── */
.km-page-header {
    margin-bottom: 1.5rem;
}

.km-page-header__breadcrumb {
    font-size: var(--km-fs-xs);
    color: var(--km-gray-700);
    margin-bottom: 0.25rem;
}

.km-page-header__breadcrumb a {
    color: var(--km-gray-700);
    text-decoration: none;
}

.km-page-header__breadcrumb a:hover {
    color: var(--km-primary);
}

.km-page-header__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.km-page-header__title {
    font-size: var(--km-fs-xl);
    font-weight: var(--km-fw-bold);
    color: var(--km-primary);
    margin: 0;
}

/* ── Maturity gauge (SVG arc, circonférence réelle) ── */
.km-maturity-gauge {
    --km-maturity-pct: 0;
    --km-maturity-c: 326.7256;
    --km-maturity-offset: 326.7256;
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-weight: var(--km-fw-bold);
    color: var(--km-primary);
}

.km-maturity-gauge__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    pointer-events: none;
}

.km-maturity-gauge__track {
    stroke: var(--km-gray-200);
}

.km-maturity-gauge__progress {
    stroke: currentColor;
    stroke-linecap: round;
    stroke-dasharray: var(--km-maturity-c);
    stroke-dashoffset: var(--km-maturity-c);
    transition: stroke-dashoffset 0.7s ease-out;
}

.km-maturity-gauge.is-ready .km-maturity-gauge__progress {
    stroke-dashoffset: var(--km-maturity-offset);
}

@media (prefers-reduced-motion: reduce) {
    .km-maturity-gauge__progress,
    .km-maturity-gauge.is-ready .km-maturity-gauge__progress {
        transition: none;
        stroke-dashoffset: var(--km-maturity-offset);
    }
}

.km-maturity-gauge__label {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}

.km-maturity-gauge__score {
    font-size: var(--km-fs-2xl);
    line-height: 1;
    color: inherit;
}

.km-maturity-gauge__max {
    color: var(--km-gray-500);
    font-size: var(--km-fs-xs);
}

.km-maturity-gauge--high { color: var(--km-success); }
.km-maturity-gauge--medium { color: var(--km-secondary); }
.km-maturity-gauge--low { color: var(--km-danger); }


/* =============================================================================
   Utilitaires texte / couleur
   ============================================================================= */
.text-km-navy { color: var(--km-primary) !important; }
.text-km-orange { color: var(--km-secondary-cta-hover) !important; }
.text-km-primary { color: var(--km-primary) !important; }
.text-km-secondary { color: var(--km-secondary) !important; }
.text-km-green { color: var(--km-success) !important; }
.km-bg-light { background: #f0f4f8; }

/* =============================================================================
   Pages publiques / auth
   ============================================================================= */
/* Skip link — premier focus clavier */
.km-skip-link {
    position: absolute;
    left: 0.75rem;
    top: 0.75rem;
    z-index: 1100;
    padding: 0.5rem 1rem;
    border-radius: var(--km-radius-md);
    background: var(--km-primary);
    color: #fff;
    font-size: 0.875rem;
    font-weight: var(--km-fw-semibold);
    text-decoration: none;
    transform: translateY(-150%);
    transition: transform 0.15s ease;
}

.km-skip-link:focus,
.km-skip-link:focus-visible {
    transform: translateY(0);
    outline: 2px solid #fff;
    outline-offset: 2px;
    color: #fff;
}