/* ============================================================
   Tikom — Design system pages connectées (Night Studio)
   Étend l'identité de la landing (palette ambrée + dark luxe)
   aux pages utilitaires (login, dashboard, admin, emails).
   Chargé APRÈS bootstrap.min.css dans app.js — donc les overrides
   priment, et les vars :root sont visibles partout.
   ============================================================ */

/* ---- Polices auto-hébergées (alignées sur landing-live.css) ---- */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("../fonts/manrope-aA_waSK.woff2") format('woff2');
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url("../fonts/jetbrains-mono-qI6BF9f.woff2") format('woff2');
}
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("../fonts/space-grotesk-lWJRtzO.ttf") format('truetype');
}

/* ============================================================
   Variables Tikom + overrides Bootstrap
   ============================================================ */
:root {
    /* Backgrounds (atténués vs landing — moins extrêmes pour usage prolongé) */
    --tk-bg: #120a0c;
    --tk-bg-deep: #0a0607;
    --tk-surface: #1a0f10;
    --tk-surface-hover: #20141a;
    --tk-surface-elev: #221520;

    /* Inks */
    --tk-ink: #f5efe8;
    --tk-ink-dim: #b8aaa4;
    --tk-ink-mute: #7d6f6a;

    /* Teinte des remplissages/bordures subtils (crème en sombre, gris chaud en clair) */
    --tk-tint-rgb: 255, 220, 200;

    /* Lignes (subtiles ambrées) */
    --tk-line: rgba(var(--tk-tint-rgb), 0.08);
    --tk-line-strong: rgba(var(--tk-tint-rgb), 0.16);
    --tk-line-accent: rgba(var(--tk-brand-rgb), 0.35);

    /* ★★★ ACCENT — SOURCE UNIQUE de la teinte d'accent de tout le site connecté.
       Pour changer la couleur (liens, boutons, focus, progress, hovers, chips,
       breadcrumb, badges primaires, +/- de la carte…) : éditer UNIQUEMENT ces
       deux lignes (hex + triplet RGB correspondant). Tout le reste en dérive.
       NB : la landing (landing-live.css) est indépendante et n'est PAS affectée.
       Les couleurs sémantiques (warning/success/danger/info) restent autonomes. */
    --tk-brand: #000000;
    --tk-brand-rgb: 0, 0, 0;

    /* Variantes dérivées automatiquement — ne pas éditer.
       (Anciens noms --tk-amber* conservés comme alias : tout le thème les utilise.) */
    --tk-amber: var(--tk-brand);
    --tk-amber-deep: color-mix(in srgb, var(--tk-brand), #000 22%);
    --tk-amber-soft: color-mix(in srgb, var(--tk-brand), #fff 24%);
    --tk-amber-veil: color-mix(in srgb, var(--tk-brand), #fff 60%);
    --tk-amber-rgb: var(--tk-brand-rgb);
    --tk-amber-deep-rgb: var(--tk-brand-rgb);

    --tk-btn-text: #ffffff;

    /* Boutons principaux : noir (léger dégradé gris foncé → noir pour le relief).
       Indépendant de --tk-brand (le bouton a ses 2 teintes dédiées). */
    --tk-btn-top: #2b2b2b;
    --tk-btn-bottom: #000000;
    --tk-btn-gradient: linear-gradient(to bottom, var(--tk-btn-top) 0%, var(--tk-btn-bottom) 100%);
    --tk-grad-1-rgb: 0, 0, 0;   /* halo/ombre au survol */
    --tk-btn-gradient-ink: #ffffff;
    --tk-btn-gradient-shadow: 0 4px 14px rgba(var(--tk-grad-1-rgb), 0.28);

    /* Sémantique conservée mais réintégrée dans la palette */
    --tk-success: #34d399;
    --tk-warning: #fbbf24;
    --tk-danger: #f87171;
    --tk-info: #a78bfa;

    /* Fonts */
    --tk-font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --tk-font-display: var(--tk-font-sans);
    /* Plus de pile monospace système : sans police mono chargée, elle rendait
       du Liberation Mono sous Linux, incohérent avec le reste. On retombe sur
       Plus Jakarta Sans (le style « code/libellé » reste porté par les autres
       propriétés : taille, letter-spacing). */
    --tk-font-mono: var(--tk-font-sans);

    /* Radii */
    --tk-radius-sm: 6px;
    --tk-radius: 10px;
    --tk-radius-lg: 18px;
    --tk-radius-xl: 28px;

    /* Ombres */
    --tk-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --tk-shadow: 0 6px 24px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
    --tk-shadow-glow: 0 0 0 1px rgba(var(--tk-amber-rgb), 0.4), 0 8px 28px rgba(var(--tk-amber-rgb), 0.18);
    --tk-shadow-glow-soft: 0 0 0 1px rgba(var(--tk-amber-rgb), 0.25), 0 4px 18px rgba(var(--tk-amber-rgb), 0.10);

    /* Easings */
    --tk-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

    /* ---- Bootstrap variable overrides ---- */
    --bs-body-bg: var(--tk-bg);
    --bs-body-color: var(--tk-ink);
    --bs-body-font-family: var(--tk-font-sans);
    --bs-body-font-size: 0.95rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.55;

    --bs-primary: var(--tk-amber);
    --bs-primary-rgb: var(--tk-amber-rgb);
    --bs-success: var(--tk-success);
    --bs-warning: var(--tk-warning);
    --bs-danger: var(--tk-danger);
    --bs-info: var(--tk-info);
    --bs-secondary: var(--tk-ink-mute);
    --bs-secondary-rgb: 125, 111, 106;

    --bs-link-color: var(--tk-amber-soft);
    --bs-link-color-rgb: var(--tk-brand-rgb);
    --bs-link-hover-color: var(--tk-amber-veil);

    --bs-border-color: var(--tk-line);
    --bs-border-color-translucent: var(--tk-line);
    --bs-border-radius: var(--tk-radius);
    --bs-border-radius-sm: var(--tk-radius-sm);
    --bs-border-radius-lg: var(--tk-radius-lg);

    --bs-emphasis-color: var(--tk-ink);
    --bs-secondary-color: var(--tk-ink-dim);
    --bs-tertiary-color: var(--tk-ink-mute);
    --bs-secondary-bg: var(--tk-surface);
    --bs-tertiary-bg: var(--tk-surface-hover);
}

/* ============================================================
   Thème CLAIR (back office) — activé via <html data-theme="light">
   Réinverse la palette : les composants référencent les mêmes
   variables --tk-*, donc l'override cascade automatiquement.
   ============================================================ */
:root[data-theme="light"] {
    /* Fiabilise le rendu natif des contrôles (selects, scrollbars) : sans ça,
       un OS en dark mode peut afficher des options clair-sur-clair illisibles. */
    color-scheme: light;
    /* Backgrounds — blanc cassé chaud */
    --tk-bg: #f5f2ee;
    --tk-bg-deep: #ebe6df;
    --tk-surface: #ffffff;
    --tk-surface-hover: #f3efe9;
    --tk-surface-elev: #ffffff;

    /* Inks — brun quasi-noir chaud */
    --tk-ink: #2a201b;
    --tk-ink-dim: #5f534c;
    --tk-ink-mute: #8c7e76;

    /* Teinte des fills/bordures : gris chaud sombre (lisible sur blanc) */
    --tk-tint-rgb: 92, 64, 46;

    --tk-line-accent: rgba(var(--tk-brand-rgb), 0.40);

    /* Accent assombri pour contraste AA sur fond clair (dérive de --tk-brand).
       Les sémantiques (success/warning/danger/info) restent autonomes ci-dessous. */
    --tk-amber-soft: color-mix(in srgb, var(--tk-brand), #000 10%);
    --tk-success: #047857;
    --tk-warning: #b45309;
    --tk-danger: #dc2626;
    --tk-info: #6d28d9;

    /* Ombres douces (le noir lourd jure sur fond clair) */
    --tk-shadow-sm: 0 1px 2px rgba(42, 26, 4, 0.06);
    --tk-shadow: 0 6px 24px rgba(42, 26, 4, 0.10), 0 1px 2px rgba(42, 26, 4, 0.06);
    --tk-shadow-glow: 0 0 0 1px rgba(var(--tk-amber-rgb), 0.35), 0 8px 28px rgba(var(--tk-amber-rgb), 0.14);
    --tk-shadow-glow-soft: 0 0 0 1px rgba(var(--tk-amber-rgb), 0.22), 0 4px 18px rgba(var(--tk-amber-rgb), 0.08);

    /* Liens : accent profond pour rester lisible sur fond clair */
    --bs-link-color: var(--tk-amber-deep);
    --bs-link-color-rgb: var(--tk-brand-rgb);
    --bs-link-hover-color: color-mix(in srgb, var(--tk-brand), #000 30%);
}

/* Bouton de fermeture des alertes : pas d'inversion en clair */
:root[data-theme="light"] .alert .btn-close { filter: none; opacity: 0.5; }
:root[data-theme="light"] .alert .btn-close:hover { filter: none; opacity: 0.9; }

/* ============================================================
   Base
   ============================================================ */
* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }
html { overflow-x: clip; }

body {
    background: var(--tk-bg);
    color: var(--tk-ink);
    font-family: var(--tk-font-sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
    position: relative;
}

::selection {
    background: rgba(var(--tk-amber-rgb), 0.35);
    color: var(--tk-ink);
}

/* Scrollbar discrète sur fond sombre */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(var(--tk-tint-rgb), 0.08);
    border-radius: 10px;
    border: 2px solid var(--tk-bg);
}
::-webkit-scrollbar-thumb:hover { background: rgba(var(--tk-tint-rgb), 0.16); }

/* Conteneur principal au-dessus de l'atmosphère */
main, .tk-fg { position: relative; z-index: 2; }

/* ============================================================
   Typographie
   ============================================================ */
h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
    font-family: var(--tk-font-display);
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--tk-ink);
}
h1, .h1 { font-weight: 700; letter-spacing: -0.025em; }

.tk-eyebrow {
    font-family: var(--tk-font-mono);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tk-amber-soft);
    margin-bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.tk-eyebrow::before {
    content: "";
    width: 18px;
    height: 1px;
    background: var(--tk-amber);
}

.tk-mono { font-family: var(--tk-font-mono); font-size: 0.875em; letter-spacing: 0.01em; }
.tk-muted { color: var(--tk-ink-mute); }
.tk-dim { color: var(--tk-ink-dim); }

/* ============================================================
   Surfaces — Cards
   ============================================================ */
.card {
    --bs-card-bg: var(--tk-surface);
    --bs-card-color: var(--tk-ink);
    --bs-card-border-color: var(--tk-line);
    --bs-card-border-radius: var(--tk-radius-lg);
    --bs-card-inner-border-radius: calc(var(--tk-radius-lg) - 1px);
    --bs-card-cap-bg: rgba(var(--tk-tint-rgb), 0.03);
    box-shadow: var(--tk-shadow-sm);
    transition: transform 220ms var(--tk-ease),
                box-shadow 220ms var(--tk-ease),
                border-color 220ms var(--tk-ease);
}

/* ============================================================
   Boutons
   ============================================================ */
.btn {
    --bs-btn-border-radius: var(--tk-radius-sm);
    font-family: var(--tk-font-sans);
    font-weight: 600;
    letter-spacing: -0.005em;
    transition: transform 150ms var(--tk-ease),
                background 150ms var(--tk-ease),
                box-shadow 200ms var(--tk-ease),
                border-color 150ms var(--tk-ease),
                color 150ms var(--tk-ease);
    border-width: 1px;
}
.btn:active { transform: translateY(0); }

.btn-primary {
    --bs-btn-color: var(--tk-btn-gradient-ink);
    --bs-btn-hover-color: var(--tk-btn-gradient-ink);
    --bs-btn-active-color: var(--tk-btn-gradient-ink);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-border-color: transparent;
    background: var(--tk-btn-gradient);
    border: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30),
                var(--tk-btn-gradient-shadow);
}
.btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    filter: brightness(1.04);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35),
                0 6px 20px rgba(var(--tk-grad-1-rgb), 0.34);
}
.btn-primary:disabled, .btn-primary.disabled {
    background: var(--tk-line-strong);
    color: var(--tk-ink-mute);
    filter: none;
    box-shadow: none;
    opacity: 0.6;
}

.btn-outline-primary {
    --bs-btn-color: var(--tk-amber-soft);
    --bs-btn-border-color: var(--tk-line-accent);
    --bs-btn-bg: transparent;
    --bs-btn-hover-bg: rgba(var(--tk-amber-rgb), 0.10);
    --bs-btn-hover-color: var(--tk-amber-veil);
    --bs-btn-hover-border-color: var(--tk-amber);
    --bs-btn-active-bg: var(--tk-amber);
    --bs-btn-active-color: var(--tk-btn-text);
    --bs-btn-active-border-color: var(--tk-amber-deep);
}

.btn-secondary, .btn-outline-secondary {
    --bs-btn-color: var(--tk-ink-dim);
    --bs-btn-border-color: var(--tk-line-strong);
    --bs-btn-bg: rgba(var(--tk-tint-rgb), 0.04);
    --bs-btn-hover-bg: rgba(var(--tk-tint-rgb), 0.08);
    --bs-btn-hover-color: var(--tk-ink);
    --bs-btn-hover-border-color: var(--tk-line-strong);
}

.btn-link {
    --bs-btn-color: var(--tk-amber-soft);
    --bs-btn-hover-color: var(--tk-amber-veil);
    text-decoration: none;
    padding: 6px 8px;
}
.btn-link:hover { text-decoration: underline; text-underline-offset: 4px; }

.btn-outline-success {
    --bs-btn-color: var(--tk-success);
    --bs-btn-border-color: rgba(52, 211, 153, 0.4);
    --bs-btn-bg: transparent;
    --bs-btn-hover-bg: rgba(52, 211, 153, 0.10);
    --bs-btn-hover-color: var(--tk-success);
    --bs-btn-hover-border-color: var(--tk-success);
}
.btn-outline-danger {
    --bs-btn-color: var(--tk-danger);
    --bs-btn-border-color: rgba(248, 113, 113, 0.4);
    --bs-btn-bg: transparent;
    --bs-btn-hover-bg: rgba(248, 113, 113, 0.10);
    --bs-btn-hover-color: var(--tk-danger);
    --bs-btn-hover-border-color: var(--tk-danger);
}

/* ============================================================
   Formulaires
   ============================================================ */
.form-control,
.form-select {
    background-color: rgba(var(--tk-tint-rgb), 0.04);
    border: 1px solid var(--tk-line-strong);
    color: var(--tk-ink);
    border-radius: var(--tk-radius-sm);
    padding: 11px 14px;
    font-family: var(--tk-font-sans);
    font-size: 0.95rem;
    transition: border-color 150ms var(--tk-ease),
                background 150ms var(--tk-ease),
                box-shadow 200ms var(--tk-ease);
}
/* Options natives : fond blanc + texte foncé — évite le clair-sur-clair quand l'OS est en dark mode. */
.form-select option,
.form-select optgroup,
.tk-app select option,
.tk-app select optgroup {
    background-color: #ffffff;
    color: #2a201b;
}
.form-control::placeholder { color: var(--tk-ink-mute); }
.form-control:focus,
.form-select:focus {
    background-color: rgba(var(--tk-tint-rgb), 0.07);
    border-color: var(--tk-amber);
    color: var(--tk-ink);
    box-shadow: 0 0 0 3px rgba(var(--tk-amber-rgb), 0.18);
    outline: none;
}
.form-control:disabled, .form-select:disabled {
    opacity: 0.5;
    background-color: rgba(var(--tk-tint-rgb), 0.02);
}
.form-control.is-invalid, .form-select.is-invalid {
    border-color: var(--tk-danger);
    background-image: none;
    padding-right: 14px;
}
.form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.18);
}

/* Labels Bootstrap : style "eyebrow" léger */
.form-label {
    font-family: var(--tk-font-sans);
    font-weight: 500;
    color: var(--tk-ink-dim);
    font-size: 11.5px;
    letter-spacing: 0.10em;
    margin-bottom: 8px;
    text-transform: uppercase;
}
.form-text { color: var(--tk-ink-mute); font-size: 12px; }
.invalid-feedback, .form-error { color: var(--tk-danger); font-size: 13px; font-family: var(--tk-font-sans); }

/* Form switch (toggle dispo) */
.form-check-input {
    background-color: rgba(var(--tk-tint-rgb), 0.08);
    border: 1px solid var(--tk-line-strong);
    cursor: pointer;
}
.form-check-input:focus {
    border-color: var(--tk-amber);
    box-shadow: 0 0 0 3px rgba(var(--tk-amber-rgb), 0.18);
}
.form-check-input:checked {
    background-color: var(--tk-amber);
    border-color: var(--tk-amber-deep);
    box-shadow: 0 0 14px rgba(var(--tk-amber-rgb), 0.40);
}
.form-check-label { color: var(--tk-ink); }

/* ============================================================
   Progress bar (complétion profil)
   ============================================================ */
.progress {
    --bs-progress-bg: rgba(var(--tk-tint-rgb), 0.06);
    --bs-progress-border-radius: 999px;
    --bs-progress-height: 0.5rem;
    overflow: hidden;
    border: 1px solid var(--tk-line);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}
.progress-bar {
    background: linear-gradient(90deg, var(--tk-amber-deep) 0%, var(--tk-amber) 50%, var(--tk-amber-soft) 100%) !important;
    box-shadow: 0 0 14px rgba(var(--tk-amber-rgb), 0.35);
    transition: width 600ms var(--tk-ease);
}

/* ============================================================
   Badges
   ============================================================ */
.badge {
    font-family: var(--tk-font-mono);
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    padding: 5px 9px;
    border-radius: 4px;
    border: 1px solid transparent;
}
.badge.bg-primary {
    background: linear-gradient(180deg, rgba(var(--tk-amber-rgb), 0.18), rgba(var(--tk-amber-rgb), 0.10)) !important;
    color: var(--tk-amber-soft) !important;
    border-color: rgba(var(--tk-amber-rgb), 0.45);
}
.badge.bg-warning {
    background: linear-gradient(180deg, rgba(251, 191, 36, 0.20), rgba(217, 119, 6, 0.10)) !important;
    color: var(--tk-warning) !important;
    border-color: rgba(251, 191, 36, 0.40);
}
.badge.bg-success {
    background: linear-gradient(180deg, rgba(52, 211, 153, 0.20), rgba(16, 185, 129, 0.10)) !important;
    color: var(--tk-success) !important;
    border-color: rgba(52, 211, 153, 0.40);
    box-shadow: 0 0 10px rgba(52, 211, 153, 0.20);
}
.badge.bg-secondary {
    background: rgba(var(--tk-tint-rgb), 0.06) !important;
    color: var(--tk-ink-mute) !important;
    border-color: var(--tk-line-strong);
}
.badge.bg-danger {
    background: linear-gradient(180deg, rgba(248, 113, 113, 0.18), rgba(220, 38, 38, 0.10)) !important;
    color: var(--tk-danger) !important;
    border-color: rgba(248, 113, 113, 0.40);
}

/* ============================================================
   Alerts
   ============================================================ */
.alert {
    background: var(--tk-surface);
    border: 1px solid var(--tk-line-strong);
    border-left: 3px solid var(--tk-amber);
    color: var(--tk-ink);
    border-radius: var(--tk-radius);
    padding: 14px 18px;
    font-size: 14px;
}
.alert-primary { border-left-color: var(--tk-amber); }
.alert-warning {
    border-left-color: var(--tk-warning);
    background: linear-gradient(180deg, rgba(251,191,36,0.06), var(--tk-surface));
}
.alert-success {
    border-left-color: var(--tk-success);
    background: linear-gradient(180deg, rgba(52,211,153,0.06), var(--tk-surface));
}
.alert-danger {
    border-left-color: var(--tk-danger);
    background: linear-gradient(180deg, rgba(248,113,113,0.06), var(--tk-surface));
}
.alert-info {
    border-left-color: var(--tk-info);
    background: linear-gradient(180deg, rgba(167,139,250,0.06), var(--tk-surface));
}
.alert .btn-close { filter: invert(1) opacity(0.5); }
.alert .btn-close:hover { filter: invert(1) opacity(0.9); }

/* ============================================================
   List group
   ============================================================ */
.list-group {
    --bs-list-group-bg: var(--tk-surface);
    --bs-list-group-color: var(--tk-ink);
    --bs-list-group-border-color: var(--tk-line);
    --bs-list-group-border-radius: var(--tk-radius);
}
.list-group-item {
    background: var(--tk-surface);
    border-color: var(--tk-line);
    color: var(--tk-ink);
    padding: 16px 18px;
    transition: background 150ms var(--tk-ease);
}
.list-group-item:hover { background: var(--tk-surface-hover); }

/* ============================================================
   Tables
   ============================================================ */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--tk-ink);
    --bs-table-border-color: var(--tk-line);
    --bs-table-striped-bg: rgba(var(--tk-tint-rgb), 0.02);
    --bs-table-hover-bg: rgba(var(--tk-amber-rgb), 0.06);
    --bs-table-hover-color: var(--tk-ink);
    color: var(--tk-ink);
    border-color: var(--tk-line);
}
.table > thead { background: rgba(var(--tk-tint-rgb), 0.03); }
.table > thead > tr > th {
    font-family: var(--tk-font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--tk-ink-mute);
    border-bottom: 1px solid var(--tk-line-strong);
    padding: 12px 14px;
}
.table > tbody > tr > td {
    padding: 14px;
    vertical-align: middle;
    border-color: var(--tk-line);
    color: var(--tk-ink);
}
.table > tbody > tr > td a { color: var(--tk-amber-soft); }
.table > tbody > tr > td a:hover { color: var(--tk-amber-veil); }
.table-hover > tbody > tr:hover > * {
    background: rgba(var(--tk-amber-rgb), 0.05) !important;
    color: var(--tk-ink) !important;
}

/* ============================================================
   Btn group / chips (filtres statut)
   ============================================================ */
.btn-group label.btn,
.btn-group .btn.btn-outline-primary,
.btn-group .btn.btn-primary {
    border-radius: 999px !important;
    padding: 6px 14px;
    font-family: var(--tk-font-mono);
    font-size: 11.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-right: 6px;
}

/* ============================================================
   Pagination
   ============================================================ */
.pagination {
    --bs-pagination-bg: var(--tk-surface);
    --bs-pagination-color: var(--tk-ink-dim);
    --bs-pagination-border-color: var(--tk-line);
    --bs-pagination-hover-bg: var(--tk-surface-hover);
    --bs-pagination-hover-color: var(--tk-ink);
    --bs-pagination-active-bg: var(--tk-amber);
    --bs-pagination-active-color: var(--tk-btn-text);
    --bs-pagination-active-border-color: var(--tk-amber-deep);
    --bs-pagination-focus-box-shadow: 0 0 0 3px rgba(var(--tk-amber-rgb), 0.18);
    --bs-pagination-border-radius: var(--tk-radius-sm);
    gap: 4px;
}

/* ============================================================
   Accessibilité — Focus visible
   ============================================================ */
*:focus-visible {
    outline: 2px solid var(--tk-amber);
    outline-offset: 2px;
}
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible {
    outline: none;
}

/* ============================================================
   Animations — page load staggered (CSS only)
   ============================================================ */
@keyframes tk-fade-in-up {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes tk-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.tk-reveal { opacity: 0; animation: tk-fade-in-up 600ms var(--tk-ease) forwards; }
.tk-reveal-1 { animation-delay: 40ms; }
.tk-reveal-2 { animation-delay: 100ms; }
.tk-reveal-3 { animation-delay: 160ms; }
.tk-reveal-4 { animation-delay: 220ms; }
.tk-reveal-5 { animation-delay: 280ms; }
.tk-reveal-6 { animation-delay: 340ms; }

@media (prefers-reduced-motion: reduce) {
    .tk-reveal { opacity: 1; animation: none; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ============================================================
   Layout helpers
   ============================================================ */
.tk-container { max-width: none; margin: 0; padding: 24px 40px; }
.tk-container-narrow { max-width: 540px; margin: 0 auto; padding: 48px 24px; }
.tk-section { padding: 32px 0; }

/* Auth pages (login, set-password, forgot) */
.tk-auth {
    min-height: calc(100vh - 200px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
}
.tk-auth-card {
    width: 100%;
    max-width: 460px;
    background: var(--tk-surface);
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-radius-xl);
    padding: 40px 36px;
    box-shadow: var(--tk-shadow);
    position: relative;
    overflow: hidden;
}
.tk-auth-card::before {
    /* Spot lumineux à l'intérieur de la carte */
    content: "";
    position: absolute;
    top: -50%; left: -25%; right: -25%;
    height: 200px;
    background: radial-gradient(50% 100% at 50% 0%, rgba(var(--tk-amber-rgb), 0.12) 0%, transparent 60%);
    pointer-events: none;
}
.tk-auth-card > * { position: relative; }
.tk-auth-aside {
    text-align: center;
    margin-top: 24px;
    color: var(--tk-ink-mute);
    font-size: 13px;
}
.tk-auth-aside a { color: var(--tk-amber-soft); text-decoration: none; }
.tk-auth-aside a:hover { color: var(--tk-amber-veil); text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   Dashboard host
   ============================================================ */
.tk-greeting {
    font-family: var(--tk-font-display);
    font-weight: 700;
    font-size: clamp(1.75rem, 4vw, 2.4rem);
    letter-spacing: -0.025em;
    margin-bottom: 4px;
}
.tk-greeting-sub {
    color: var(--tk-ink-mute);
    font-family: var(--tk-font-mono);
    font-size: 12.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 28px;
}

.tk-status-card {
    background: var(--tk-surface);
    border: 1px solid var(--tk-line);
    border-left: 3px solid var(--tk-amber);
    border-radius: var(--tk-radius-lg);
    padding: 20px 24px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}
.tk-status-card::before {
    content: "";
    position: absolute;
    top: 0; right: 0;
    width: 180px; height: 180px;
    background: radial-gradient(50% 50% at 100% 0%, rgba(var(--tk-amber-rgb), 0.16) 0%, transparent 70%);
    pointer-events: none;
}
.tk-status-card > * { position: relative; }
.tk-status-card-eyebrow {
    font-family: var(--tk-font-mono);
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tk-amber-soft);
    margin-bottom: 6px;
}
.tk-status-card-title {
    font-family: var(--tk-font-display);
    font-weight: 600;
    font-size: 1.1rem;
    margin: 0 0 6px;
    color: var(--tk-ink);
}
.tk-status-card-text { color: var(--tk-ink-dim); font-size: 14px; margin: 0; }

/* Variantes statut */
.tk-status-card.is-selected { border-left-color: var(--tk-success); }
.tk-status-card.is-selected::before {
    background: radial-gradient(50% 50% at 100% 0%, rgba(52, 211, 153, 0.18) 0%, transparent 70%);
}
.tk-status-card.is-selected .tk-status-card-eyebrow { color: var(--tk-success); }


/* Progress section dashboard */
.tk-progress-section {
    background: var(--tk-surface);
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-radius-lg);
    padding: 24px;
    margin-bottom: 24px;
}
.tk-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 14px;
}
.tk-progress-label {
    color: var(--tk-ink-dim);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    font-weight: 500;
    font-family: var(--tk-font-sans);
}
.tk-progress-value {
    font-family: var(--tk-font-display);
    font-weight: 700;
    font-size: 2rem;
    color: var(--tk-amber-soft);
    letter-spacing: -0.02em;
    line-height: 1;
}
.tk-progress-value .tk-progress-percent {
    color: var(--tk-ink-mute);
    font-size: 1.1rem;
    font-weight: 400;
    margin-left: 2px;
}

/* Steps list */
.tk-steps {
    list-style: none;
    padding: 0;
    margin: 0;
}
.tk-step {
    background: var(--tk-surface);
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-radius);
    padding: 16px 18px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    transition: background 150ms var(--tk-ease), border-color 150ms var(--tk-ease);
}
.tk-step:hover { background: var(--tk-surface-hover); border-color: var(--tk-line-strong); }
.tk-step-icon {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
}
.tk-step.is-done .tk-step-icon {
    background: rgba(52, 211, 153, 0.15);
    color: var(--tk-success);
    border: 1px solid rgba(52, 211, 153, 0.3);
}
.tk-step.is-todo .tk-step-icon {
    background: rgba(var(--tk-tint-rgb), 0.04);
    color: var(--tk-ink-mute);
    border: 1px solid var(--tk-line-strong);
}
.tk-step-body { flex: 1; min-width: 0; }
.tk-step-label {
    font-weight: 500;
    color: var(--tk-ink);
    margin: 0;
    font-size: 14.5px;
}
.tk-step.is-done .tk-step-label {
    color: var(--tk-ink-dim);
}
.tk-step-help {
    color: var(--tk-ink-mute);
    font-size: 12.5px;
    margin: 2px 0 0;
}

/* ============================================================
   Définition list (fiche admin) — réutilise dl/dt/dd standard
   ============================================================ */
.tk-dl { margin: 0; }
.tk-dl > div {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--tk-line);
}
.tk-dl > div:last-child { border-bottom: none; }
.tk-dl dt {
    color: var(--tk-ink-mute);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
    margin: 0;
}
.tk-dl dd {
    color: var(--tk-ink);
    margin: 0;
    font-size: 14px;
    min-width: 0;             /* autorise la colonne 1fr à rétrécir sous la largeur du contenu */
    overflow-wrap: anywhere;  /* casse les emails/URL trop longs au lieu de déborder du cadre */
}
.tk-dl dd a { color: var(--tk-amber-soft); text-decoration: none; }
.tk-dl dd a:hover { color: var(--tk-amber-veil); text-decoration: underline; text-underline-offset: 3px; }
.tk-dl .tk-mono { font-family: var(--tk-font-mono); font-size: 13px; }

/* ============================================================
   Helpers texte
   ============================================================ */
.tk-page-eyebrow {
    font-family: var(--tk-font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tk-amber-soft);
    margin-bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.tk-page-eyebrow::before {
    content: "";
    width: 22px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--tk-amber));
}

.tk-page-title {
    font-family: var(--tk-font-display);
    font-weight: 700;
    letter-spacing: -0.025em;
    font-size: clamp(1.75rem, 3.2vw, 2.4rem);
    margin: 0 0 8px;
    color: var(--tk-ink);
}
.tk-page-subtitle {
    color: var(--tk-ink-dim);
    font-size: 1rem;
    margin: 0 0 28px;
    max-width: 60ch;
}

.tk-back-link {
    color: var(--tk-ink-mute);
    text-decoration: none;
    font-size: 12.5px;
    font-family: var(--tk-font-mono);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    transition: color 150ms var(--tk-ease);
}
.tk-back-link:hover { color: var(--tk-amber-soft); }

.tk-stat {
    font-family: var(--tk-font-display);
    font-weight: 700;
    color: var(--tk-amber-soft);
    font-size: 1.2rem;
    letter-spacing: -0.01em;
}

/* Catalogue : autocomplétion « autour de … ».
   Ancrée juste sous le champ (top:100%) et pleine largeur de la boîte, sinon
   la liste se place mal dans l'overlay flex de la carte. */
.tk-autocomplete-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    width: auto;
    z-index: 50;
    list-style: none;
    margin: 0;
    padding: 4px;
    background: var(--tk-surface, #16100f);
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-radius);
    max-height: 240px;
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
}
.tk-autocomplete-item {
    padding: 6px 10px;
    cursor: pointer;
    border-radius: 6px;
    font-size: 13px;
}
.tk-autocomplete-item:hover {
    background: color-mix(in srgb, var(--tk-amber-soft) 14%, transparent);
}