@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* ================================================================
   TILKI DESIGN TOKENS
   ================================================================ */
:root {
    /* Brand */
    --tk-blue:          #0F47F5;
    --tk-blue-dark:     #0C39D4;
    --tk-blue-light:    #EEF2FE;
    --tk-blue-rgb:      15, 71, 245;

    /* Bootstrap primary → TILKI blue */
    --bs-primary:           #0F47F5;
    --bs-primary-rgb:       15, 71, 245;
    --bs-link-color:        #0F47F5;
    --bs-link-color-rgb:    15, 71, 245;
    --bs-link-hover-color:  #0C39D4;

    /* Backgrounds */
    --tk-bg-page:    #F5F5F7;
    --tk-bg-surface: #FFFFFF;

    /* Neutrals — cool-grey Apple-grade */
    --tk-neutral-0:   #FFFFFF;
    --tk-neutral-50:  #F9F9F9;
    --tk-neutral-100: #F2F2F4;
    --tk-neutral-200: #E5E5E8;
    --tk-neutral-300: #D1D1D6;
    --tk-neutral-400: #AEAEB2;
    --tk-neutral-500: #8E8E93;
    --tk-neutral-600: #636366;
    --tk-neutral-700: #48484A;
    --tk-neutral-800: #3A3A3C;
    --tk-neutral-900: #1C1C1E;

    /* Typography */
    --tk-font-sans: 'Manrope', system-ui, -apple-system, sans-serif;
    --tk-font-mono: 'JetBrains Mono', 'Courier New', monospace;

    /* Layout */
    --tk-sidebar-w: 240px;
    --tk-topbar-h:  56px;

    /* Radius */
    --tk-radius-sm: .375rem;
    --tk-radius:    .75rem;
    --tk-radius-lg: 1rem;

    /* Shadows */
    --tk-shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --tk-shadow:    0 4px 12px rgba(0,0,0,.08);
}

/* ================================================================
   BOOTSTRAP — override primary
   ================================================================ */
.btn-primary {
    --bs-btn-bg:               #0F47F5;
    --bs-btn-border-color:     #0F47F5;
    --bs-btn-hover-bg:         #0C39D4;
    --bs-btn-hover-border-color: #0C39D4;
    --bs-btn-active-bg:        #0A2DAA;
    --bs-btn-active-border-color: #0A2DAA;
    --bs-btn-disabled-bg:      #0F47F5;
    --bs-btn-disabled-border-color: #0F47F5;
}
.btn-outline-primary {
    --bs-btn-color:              #0F47F5;
    --bs-btn-border-color:       #0F47F5;
    --bs-btn-hover-bg:           #0F47F5;
    --bs-btn-hover-border-color: #0F47F5;
    --bs-btn-active-bg:          #0F47F5;
    --bs-btn-active-border-color:#0F47F5;
}
.bg-primary    { background-color: #0F47F5 !important; }
.text-primary  { color: #0F47F5 !important; }
.border-primary{ border-color: #0F47F5 !important; }

/* ================================================================
   BASE
   ================================================================ */
body {
    font-family: var(--tk-font-sans);
    color: var(--tk-neutral-800);
    background-color: var(--tk-bg-page);
}

code, pre, kbd, .font-mono {
    font-family: var(--tk-font-mono);
}

/* ================================================================
   SHARED COMPONENTS
   ================================================================ */

.card {
    border-radius: var(--tk-radius);
    border: 1px solid var(--tk-neutral-200);
    box-shadow: var(--tk-shadow-sm);
}

.card-header {
    border-bottom: 1px solid var(--tk-neutral-200);
    background: var(--tk-bg-surface);
    border-radius: var(--tk-radius) var(--tk-radius) 0 0 !important;
    padding: .85rem 1.25rem;
}

.table th {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--tk-neutral-500);
    border-bottom-width: 1px;
}

.badge { font-weight: 500; }

/* Dashboard stat icon */
.stat-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--tk-radius);
    font-size: 1.5rem;
}

/* Clickable table rows */
.tbl-row-link:hover td { background-color: var(--bs-table-hover-bg); }
.tbl-row-link:focus-within td { outline: 2px solid var(--tk-blue); outline-offset: -2px; }

.letter-spacing { letter-spacing: .04em; }

/* Bootstrap 5.3 subtle helpers */
.bg-success-subtle    { background-color: #d1e7dd; }
.border-success-subtle{ border-color: #a3cfbb !important; }

/* ================================================================
   LOGIN PAGE — split layout
   ================================================================ */
body.login-page {
    /* Charte : fond clair uni (pas de dégradé sur le contenu) — cf. canevas /reset */
    background: var(--tk-bg-page);
}

body.login-page-admin {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}

.login-card {
    border-radius: var(--tk-radius-lg);
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
}

/* Split login */
body.tk-login-split {
    display: flex;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background: var(--tk-bg-surface);
}

.tk-login-left {
    flex: 0 0 42%;
    background: var(--tk-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 2.5rem;
}

.tk-login-left-inner {
    max-width: 340px;
}

.tk-login-tagline {
    font-size: 2.5rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
    letter-spacing: -.022em;
    margin-bottom: .75rem;
}

.tk-login-sub {
    font-size: 1rem;
    color: rgba(255,255,255,.75);
    line-height: 1.55;
    margin: 0;
}

.tk-login-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.tk-login-form-wrap {
    width: 100%;
    max-width: 380px;
}

@media (max-width: 767.98px) {
    body.tk-login-split { display: block; }
    .tk-login-left { display: none; }
    .tk-login-right { min-height: 100vh; padding: 2rem 1.25rem; }
}

/* ================================================================
   KPI CARDS — tableau de bord client
   ================================================================ */
.tk-kpi-card {
    padding: 1.125rem 1.25rem;
    border-radius: var(--tk-radius);
    background: var(--tk-bg-surface);
    border: 1px solid var(--tk-neutral-200);
    box-shadow: var(--tk-shadow-sm);
}

.tk-kpi-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--tk-neutral-500);
    margin-bottom: .375rem;
}

.tk-kpi-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--tk-neutral-900);
    line-height: 1.1;
}

.tk-kpi-sub {
    font-size: .72rem;
    color: var(--tk-neutral-500);
    margin-top: .125rem;
}

.tk-kpi-danger { color: #dc2626 !important; }
.tk-kpi-warning { color: #d97706 !important; }
.tk-kpi-ok { color: #16a34a !important; }

/* ================================================================
   ALERTES DASHBOARD
   ================================================================ */
.tk-alert-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: var(--tk-radius);
    border-left: 4px solid transparent;
    background: var(--tk-bg-surface);
    box-shadow: var(--tk-shadow-sm);
}

.tk-alert-warning {
    border-left-color: #f59e0b;
    background: #fffbeb;
}

.tk-alert-info {
    border-left-color: var(--tk-blue);
    background: var(--tk-blue-light);
}

.tk-alert-label {
    font-size: .78rem;
    font-weight: 600;
    color: var(--tk-neutral-700);
}

.tk-alert-sub {
    font-size: .72rem;
    color: var(--tk-neutral-500);
    margin-top: .1rem;
}

.tk-alert-amount {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--tk-neutral-900);
    margin-top: .2rem;
}

/* ================================================================
   LIST ROWS — lignes cliquables style design
   ================================================================ */
.tk-list-row {
    transition: background .12s;
}
.tk-list-row:hover {
    background: var(--tk-neutral-50) !important;
}

/* ================================================================
   BADGES STATUTS
   ================================================================ */
.tk-badge-actif    { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
.tk-badge-expiré   { background: var(--tk-neutral-100); color: var(--tk-neutral-600); border: 1px solid var(--tk-neutral-300); }
.tk-badge-en_attente { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.tk-badge-ouvert   { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.tk-badge-résilié  { background: var(--tk-neutral-100); color: var(--tk-neutral-500); border: 1px solid var(--tk-neutral-300); }

/* Badges documents */
.tk-doc-fourni  { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; font-weight: 500; }
.tk-doc-requis  { background: var(--tk-neutral-100); color: var(--tk-neutral-500); border: 1px solid var(--tk-neutral-300); font-weight: 500; }
.tk-doc-attente { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; font-weight: 500; }

/* ================================================================
   CONFIRMATION RÈGLEMENT
   ================================================================ */
.tk-confirm-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .5rem 0;
    border-bottom: 1px solid var(--tk-neutral-100);
}

/* ================================================================
   BADGES BRANCHES — référentiel assureurs
   ================================================================ */
.tk-branch-badge {
    background: var(--tk-blue-light);
    color: var(--tk-blue);
    border: 1px solid rgba(15,71,245,.18);
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .02em;
    padding: .2em .55em;
}

/* ================================================================
   SINISTRE — Timeline verticale
   ================================================================ */
.claim-timeline { position: relative; }
.ct-item {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    position: relative;
    padding-bottom: 1.35rem;
}
.ct-item:last-child { padding-bottom: 0; }
.ct-item::before {
    content: '';
    position: absolute;
    left: 1.125rem;
    top: 2.35rem;
    bottom: 0;
    width: 2px;
    background: var(--tk-neutral-200);
}
.ct-item:last-child::before { display: none; }
.ct-item.ct-done::before { background: #16a34a; }
.ct-dot {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    font-weight: 700;
    position: relative;
    z-index: 1;
}
.ct-done .ct-dot    { background: #16a34a; color: #fff; font-size: 1rem; }
.ct-pending .ct-dot { background: var(--tk-neutral-100); border: 2px solid var(--tk-neutral-300); color: var(--tk-neutral-400); }
.ct-content         { padding-top: .3rem; }
.ct-label           { font-size: .875rem; font-weight: 500; }
.ct-done .ct-label    { color: var(--tk-neutral-900); }
.ct-pending .ct-label { color: var(--tk-neutral-400); }
.ct-date            { font-size: .75rem; color: #16a34a; margin-top: .1rem; }

/* ================================================================
   DEVIS — Cartes de branches
   ================================================================ */
.branch-card {
    border: 2px solid var(--tk-neutral-200);
    border-radius: var(--tk-radius);
    transition: border-color .15s, box-shadow .15s, transform .1s;
}
.branch-card:hover {
    border-color: var(--tk-blue);
    box-shadow: 0 4px 16px rgba(15, 71, 245, .12) !important;
    transform: translateY(-2px);
}
.branch-icon {
    width: 3rem;
    height: 3rem;
    border-radius: .625rem;
    background: var(--tk-blue-light);
    color: var(--tk-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
}
.branch-icon--disabled { background: var(--tk-neutral-100); color: var(--tk-neutral-400); }

/* ================================================================
   ADMIN LAYOUT — Sidebar fixe gauche
   ================================================================ */

body.tk-admin {
    background: var(--tk-bg-page);
    overflow-x: hidden;
}

.tk-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--tk-sidebar-w);
    background: var(--tk-blue);
    display: flex;
    flex-direction: column;
    z-index: 1030;
    transition: transform .25s cubic-bezier(.4,0,.2,1);
}

.tk-sidebar-brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 1.125rem 1.25rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.12);
    text-decoration: none;
}

.tk-sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: .625rem 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.2) transparent;
}

.tk-sidebar-link {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .6rem 1.25rem;
    color: rgba(255,255,255,.72);
    text-decoration: none;
    font-size: .875rem;
    font-weight: 500;
    transition: background .13s, color .13s;
    white-space: nowrap;
    border: none;
    background: none;
    width: 100%;
    cursor: pointer;
    text-align: left;
}

.tk-sidebar-link i {
    font-size: 1rem;
    flex-shrink: 0;
    width: 1.25rem;
    text-align: center;
}

.tk-sidebar-link:hover { background: rgba(255,255,255,.12); color: #fff; }
.tk-sidebar-link.active { background: rgba(255,255,255,.18); color: #fff; font-weight: 600; }

.tk-sidebar-section {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: rgba(255,255,255,.4);
    padding: 1rem 1.25rem .375rem;
}

.tk-sidebar-footer {
    border-top: 1px solid rgba(255,255,255,.12);
    padding: .5rem 0 0;
}

.tk-sidebar-user {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .5rem 1.25rem .625rem;
    color: rgba(255,255,255,.8);
    min-width: 0;
}

.tk-sidebar-user-name {
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tk-sidebar-user-role {
    font-size: .68rem;
    color: rgba(255,255,255,.5);
    text-transform: capitalize;
}

.tk-sidebar-link.tk-logout:hover {
    background: rgba(239,68,68,.2) !important;
    color: #fca5a5 !important;
}

/* Main content area */
.tk-main {
    margin-left: var(--tk-sidebar-w);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Slim topbar inside main */
.tk-topbar {
    height: var(--tk-topbar-h);
    background: var(--tk-bg-surface);
    border-bottom: 1px solid var(--tk-neutral-200);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1.5rem;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--tk-shadow-sm);
}

.tk-topbar-toggle {
    display: none;
    background: none;
    border: none;
    padding: .375rem;
    color: var(--tk-neutral-600);
    cursor: pointer;
    border-radius: var(--tk-radius-sm);
    line-height: 1;
    align-items: center;
}
.tk-topbar-toggle:hover { background: var(--tk-neutral-100); }

.tk-topbar-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--tk-neutral-900);
    margin: 0;
    flex: 1;
}

.tk-content {
    flex: 1;
    padding: 1.5rem;
}

/* Mobile overlay */
.tk-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 1029;
}

/* ================================================================
   CLIENT LAYOUT — Barre supérieure + onglets
   ================================================================ */

.tk-topnav {
    background: var(--tk-blue) !important;
    box-shadow: none;
    padding: .5rem 0;
}

.tk-topnav .nav-link,
.tk-topnav .dropdown-toggle {
    color: rgba(255,255,255,.85) !important;
    font-size: .875rem;
    font-weight: 500;
}
.tk-topnav .nav-link:hover,
.tk-topnav .dropdown-toggle:hover { color: #fff !important; }

.tk-topnav .navbar-toggler { border-color: rgba(255,255,255,.3); }

.tk-tabnav {
    background: var(--tk-bg-surface);
    border-bottom: 1px solid var(--tk-neutral-200);
    box-shadow: var(--tk-shadow-sm);
}

.tk-tabs {
    border: none;
    margin: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}
.tk-tabs::-webkit-scrollbar { display: none; }

.tk-tabs .nav-link {
    display: flex;
    align-items: center;
    gap: .375rem;
    color: var(--tk-neutral-600);
    font-size: .875rem;
    font-weight: 500;
    padding: .75rem 1.125rem;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    transition: color .13s, border-color .13s;
    white-space: nowrap;
}
.tk-tabs .nav-link:hover  { color: var(--tk-blue); border-bottom-color: var(--tk-neutral-300); background: none; }
.tk-tabs .nav-link.active { color: var(--tk-blue); background: none; border-bottom: 2px solid var(--tk-blue); font-weight: 600; }

/* ================================================================
   UTILITY CLASSES
   ================================================================ */
.fs-3x   { font-size: 3rem !important; }
.fs-badge { font-size: .65rem !important; }
.fs-xs   { font-size: .75rem !important; }
.fs-xxs  { font-size: .72rem !important; }
.fs-2xs  { font-size: .7rem !important; }
.fs-sm7  { font-size: .78rem !important; }
.x-small { font-size: .72rem; }
.ls-wide { letter-spacing: .08em; }

/* Constrained-width wrappers */
.mw-form    { max-width: 680px; }
.alert-narrow { max-width: 380px; }

/* Verify modal sizing */
.verify-modal-body { min-height: 320px; }
.verify-preview-area { min-height: 240px; }

/* form inline dans table */
.d-contents { display: contents; }

/* Badges mode de paiement */
.badge-method-cheque      { background: #e0e7ff; color: #3730a3; }
.badge-method-virement    { background: #dcfce7; color: #166534; }
.badge-method-caisse      { background: #fef9c3; color: #854d0e; }
.badge-method-mobile      { background: #fce7f3; color: #9d174d; }

/* ================================================================
   ALIGNEMENT CHARTE — TILKI Portail (design appliqué)
   Rapproche l'espace client du canevas « TILKI Portail.dc.html » :
   boutons pilule, cartes 20px, badges de statut, montants JetBrains Mono,
   tuiles d'icône bleutées. Portée : espace client + accès (pas l'admin).
   ================================================================ */

/* Tokens charte (valeurs exactes du canevas) */
:root {
    --tk-radius-card: 20px;
    --tk-blue-soft:   #EEF3FF;       /* fond des tuiles d'icône */
    --tk-shadow-card: 0 1px 2px rgba(16,24,40,.04), 0 10px 28px rgba(16,24,40,.05);
    --tk-shadow-flat: 0 1px 2px rgba(16,24,40,.04);
}

/* Boutons pilule — la forme signature (client + accès, pas l'admin) */
body:not(.tk-admin) .btn {
    border-radius: 999px;
    font-weight: 600;
    transition: background .14s cubic-bezier(.4,0,.2,1),
                border-color .14s cubic-bezier(.4,0,.2,1),
                transform .14s cubic-bezier(.4,0,.2,1);
}
body:not(.tk-admin) .btn:active { transform: scale(.97); }
/* Le bouton de fermeture d'alerte reste circulaire natif */
body:not(.tk-admin) .btn-close { border-radius: 50%; }

/* Cartes — grand rayon, filet fin, ombre douce */
body:not(.tk-admin) .card {
    border-radius: var(--tk-radius-card);
    border: 1px solid var(--tk-neutral-200);
    box-shadow: var(--tk-shadow-card);
}
body:not(.tk-admin) .card-header {
    border-radius: var(--tk-radius-card) var(--tk-radius-card) 0 0 !important;
}

/* Carte interactive — se soulève de 2px au survol */
.tk-card-int {
    transition: transform .18s cubic-bezier(.4,0,.2,1),
                box-shadow .18s cubic-bezier(.4,0,.2,1);
}
.tk-card-int:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 36px rgba(16,24,40,.10), 0 2px 8px rgba(16,24,40,.05);
}

/* Tuile d'icône — carré bleuté à coins doux, icône bleue */
.tk-icon-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--tk-blue-soft);
    color: var(--tk-blue);
    flex-shrink: 0;
    font-size: 1.15rem;
}
.tk-icon-tile-sm { width: 34px; height: 34px; border-radius: 10px; font-size: 1rem; }
.tk-icon-tile-lg { width: 54px; height: 54px; border-radius: 15px; font-size: 1.6rem; }

/* Montants & références en mono tabulaire */
.tk-mono, .tk-amount { font-family: var(--tk-font-mono); font-feature-settings: "tnum"; }
.tk-kpi-value { font-family: var(--tk-font-mono); letter-spacing: -.01em; }

/* Badges de statut — pastilles pleines, couleurs exactes du canevas */
.tk-badge-actif,
.tk-badge-valide,
.tk-badge-validé,
.tk-badge-clos,
.tk-doc-fourni      { background: #E9F7EF; color: #128040; border-color: transparent; }
.tk-badge-en_attente,
.tk-badge-suspendu,
.tk-doc-attente     { background: #FEF5E7; color: #C2780A; border-color: transparent; }
.tk-badge-ouvert    { background: #EEF3FF; color: #0A39D6; border-color: transparent; }
.tk-badge-rejeté,
.tk-badge-rejete    { background: #FDECEC; color: #C32921; border-color: transparent; }
.tk-badge-expiré,
.tk-badge-expire,
.tk-badge-résilié,
.tk-badge-resilie,
.tk-doc-requis      { background: #EDEDF0; color: #48484A; border-color: transparent; }

/* Forme pastille commune pour les badges de statut/document */
[class*="tk-badge-"],
[class*="tk-doc-"] {
    display: inline-flex;
    align-items: center;
    gap: .3em;
    border-radius: 999px;
    font-weight: 600;
    padding: .28em .7em;
}

/* Alertes tableau de bord — ambre chaud, filet complet */
.tk-alert-card { border-radius: 16px; border-left: none; }
.tk-alert-warning {
    background: #FEF5E7;
    border: 1px solid #F6DCAE;
}
.tk-alert-info {
    background: var(--tk-bg-surface);
    border: 1px solid var(--tk-neutral-200);
}

/* KPI — carte charte + valeur mono */
body:not(.tk-admin) .tk-kpi-card { border-radius: var(--tk-radius-card); }

/* Cartes de branches (devis) — filet fin 1px, coins 16px */
.branch-card { border-width: 1px; border-radius: 16px; }
.branch-icon { border-radius: 11px; }

/* Carte d'identité de marque — panneau bleu plein (/account) */
.tk-id-card {
    position: relative;
    overflow: hidden;
    background: var(--tk-blue);
    color: #fff;
    border-radius: 18px;
    padding: 22px 24px;
}
.tk-id-card::before {
    content: "";
    position: absolute;
    width: 200px; height: 200px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    right: -70px; top: -80px;
    pointer-events: none;
}
.tk-id-card > * { position: relative; }
.tk-id-label { font-size: .72rem; color: rgba(255,255,255,.72); }
.tk-id-value { font-family: var(--tk-font-mono); font-weight: 600; letter-spacing: .06em; }
.tk-id-pill  {
    font-size: .68rem; font-weight: 700;
    background: rgba(255,255,255,.18);
    padding: .2rem .6rem; border-radius: 999px;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */

/* Admin: sidebar collapse sur mobile */
@media (max-width: 991.98px) {
    .tk-sidebar { transform: translateX(-100%); }
    .tk-sidebar.is-open { transform: translateX(0); }
    .tk-sidebar-overlay.is-open { display: block; }
    .tk-main { margin-left: 0; }
    .tk-topbar-toggle { display: flex; }
    .tk-content { padding: 1rem .875rem; }
}

/* Tableaux → cartes empilées sur mobile (< 768 px) */
@media (max-width: 767.98px) {
    .tbl-card-mobile { border: none !important; background: transparent !important; }
    .tbl-card-mobile thead { display: none; }
    .tbl-card-mobile tbody,
    .tbl-card-mobile tbody tr { display: block; }
    .tbl-card-mobile tbody tr {
        border: 1px solid var(--tk-neutral-200) !important;
        border-radius: var(--tk-radius);
        margin-bottom: .625rem;
        padding: .5rem .875rem;
        background: var(--tk-bg-surface);
        box-shadow: var(--tk-shadow-sm);
    }
    .tbl-card-mobile tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: .35rem 0;
        border: none !important;
        font-size: .875rem;
        border-bottom: 1px solid var(--tk-neutral-100) !important;
    }
    .tbl-card-mobile tbody tr td:last-child { border-bottom: none !important; padding-top: .5rem; }
    .tbl-card-mobile tbody td::before {
        content: attr(data-label);
        font-size: .7rem;
        font-weight: 700;
        color: var(--tk-neutral-500);
        text-transform: uppercase;
        letter-spacing: .05em;
        flex-shrink: 0;
        margin-right: .75rem;
        min-width: 6rem;
    }
    .tbl-card-mobile tbody td[data-label=""]::before { display: none; }
    .tbl-card-mobile tbody td[data-label=""] { justify-content: flex-end; }

    .form-control,
    .form-select,
    .form-control-sm,
    .form-select-sm { font-size: 1rem !important; }

    .btn     { min-height: 2.5rem; }
    .btn-sm  { min-height: 2.1rem; }

    .alert.alert-narrow { max-width: 100% !important; }

    .d-flex.gap-2.flex-wrap.align-items-end {
        flex-direction: column;
        align-items: stretch !important;
    }
}

/* Ajustements petits mobiles (< 576 px) */
@media (max-width: 575.98px) {
    main.container,
    main.container-fluid,
    .tk-content {
        padding-left: .875rem;
        padding-right: .875rem;
        padding-top: 1rem;
    }
    .card-body { padding: .875rem; }
    h2.h4, h2.h5 { font-size: 1.05rem; }
    .navbar-brand img { max-height: 30px; }
    .row.g-4 { --bs-gutter-y: .75rem; }
}