:root {
    --tb-brand-25: #ECFDF5;
    --tb-brand-100: #D1FAE5;
    --tb-brand-300: #6EE7B7;
    --tb-brand-500: #1BB765;
    --tb-brand-600: #16A34A;
    --tb-brand-700: #0E8A3E;
    --tb-gray-900: #111827;
    --tb-gray-800: #1F2937;
    --tb-gray-700: #374151;
    --tb-gray-600: #4B5563;
    --tb-gray-500: #6B7280;
    --tb-gray-400: #9CA3AF;
    --tb-gray-300: #D1D5DB;
    --tb-gray-200: #E5E7EB;
    --tb-surface: #FFFFFF;
    --tb-bg: #F8FAFC;
    --tb-font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", sans-serif;
    --tb-font-display: Poppins, Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", sans-serif;
    --tb-radius-card: 16px;
    --tb-radius-card-lg: 20px;
    --tb-radius-pill: 999px;
    --tb-shadow-soft: 0 14px 50px rgba(16, 24, 40, .08);
    --tb-border: var(--tb-gray-200);
    --tb-text: var(--tb-gray-700);
    --tb-muted: var(--tb-gray-500);
    --tb-red: #800000;
    /*réinitialiser*/
}

@media (prefers-color-scheme: dark) {
    :root {
        --tb-brand-25: #052e16;
        --tb-brand-100: #064E3B;
        --tb-brand-300: #34D399;
        --tb-brand-500: #10B981;
        --tb-brand-600: #059669;
        --tb-brand-700: #047857;
        --tb-gray-900: #0B0F16;
        --tb-gray-800: #121826;
        --tb-gray-700: #D1D5DB;
        --tb-gray-600: #9CA3AF;
        --tb-gray-500: #9CA3AF;
        --tb-gray-400: #94A3B8;
        --tb-gray-300: #1E293B;
        --tb-gray-200: #253248;
        --tb-surface: #0F1623;
        --tb-bg: #0B111B;
        --tb-shadow-soft: 0 14px 50px rgba(0, 0, 0, .45);
        --tb-border: var(--tb-gray-300);
        --tb-text: var(--tb-gray-700);
        --tb-muted: var(--tb-gray-500);
    }
}

html,
body {
    font-family: var(--tb-font-family);
    color: var(--tb-text);
    background: var(--tb-bg);
}

.display-1,
.display-2,
.display-3,
h1,
h2,
h3 {
    font-family: var(--tb-font-display)
}

.shadow-soft {
    box-shadow: var(--tb-shadow-soft);
}

.text-muted-700 {
    color: var(--tb-muted) !important
}

.badge-chip {
    background: var(--tb-brand-25);
    color: var(--tb-brand-500);
    border: 1px solid color-mix(in srgb, var(--tb-brand-600) 20%, transparent);
    padding: .5rem .75rem;
    border-radius: var(--tb-radius-pill);
    font-weight: 600;
}

.filter-pill {
    border: 1px solid var(--tb-border);
    border-radius: var(--tb-radius-pill);
    padding: .6rem .9rem;
    background: var(--tb-surface);
    display: flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    color: var(--tb-text);
}

.filter-pill i {
    color: var(--tb-brand-600)
}

.search-wrap {
    background: var(--tb-surface);
    border: 1px solid var(--tb-border);
    border-radius: var(--tb-radius-pill);
    padding: .25rem;
    gap: .5rem;
}

.search-input {
    border: none !important;
    background: transparent !important;
    color: var(--tb-text);
}

.search-input::placeholder {
    color: color-mix(in srgb, var(--tb-muted) 70%, transparent)
}

.company-card {
    border: 1px solid var(--tb-border);
    background: var(--tb-surface);
    border-radius: 16px
}

.company-card .cover {
    width: 200px;
    height: 120px;
    object-fit: cover;
    border-radius: 12px
}

.company-grid .cover {
    width: 100%;
    height: 160px;
    object-fit: cover
}

.company-desc {
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.aside-card {
    border: 1px solid var(--tb-border);
    border-radius: 14px;
    background: var(--tb-surface)
}

.aside-card .thumb {
    width: 100%;
    height: 90px;
    object-fit: cover;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px
}

.map-wrap {
    border: 1px solid var(--tb-border);
    border-radius: 20px;
    overflow: hidden;
    background: var(--tb-surface)
}

#map {
    min-height: 520px
}

.map-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 401;
    padding: 1rem;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, color-mix(in srgb, var(--tb-surface) 55%, transparent) 24%, var(--tb-surface) 100%)
}

.nav-icon-btn {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px
}

.badge-chip-red {
    background: var(--tb-red);
    color: var(--tb-surface);
    border: 1px solid color-mix(in srgb, var(--tb-surface) 20%, transparent);
    padding: .5rem .75rem;
    border-radius: var(--tb-radius-pill);
    font-weight: 600;
}

/* === Backoffice entrepreneur === */
.tb-aside {
    position: sticky;
    /*top: 88px;
    border: 0;*/
}

.tb-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #0f766e;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.tb-nav-side .nav-link {
    color: #34495e;
    border-radius: .5rem;
    padding: .5rem .75rem;
}

.tb-nav-side .nav-link:hover {
    background: #f3f4f6;
}

.tb-nav-side .nav-link.active {
    background: #e8f6f4;
    color: #0b5e58;
    font-weight: 600;
}

/* === Thème primaire (Bootstrap 5 override) === */
:root {
    --bs-primary: #0f766e;
    /* teal ToutBénin */
    --bs-primary-rgb: 15, 118, 110;
    --bs-primary-text-emphasis: #0b5e58;
    --bs-primary-bg-subtle: #e8f6f4;
    --bs-primary-border-subtle: #b9e5e1;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: #0c5e58;
    --bs-btn-hover-border-color: #0b5853;
    --bs-btn-active-bg: #0a514d;
    --bs-btn-active-border-color: #094b47;
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-active-bg: #0a514d;
    --bs-btn-active-border-color: #0a514d;
}

.link-primary {
    color: var(--bs-primary) !important;
}

.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.form-control:focus,
.form-select:focus {
    border-color: rgba(var(--bs-primary-rgb), .5);
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25);
}

/* === Tabs (profil) === */
#profilTabs.nav-tabs {
    gap: .25rem;
    border-bottom: 1px solid var(--bs-border-color);
    margin-bottom: 0;
}

#profilTabs .nav-link {
    border: 1px solid transparent;
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
    color: #495057;
}

#profilTabs .nav-link:hover {
    background-color: #f8f9fa;
}

#profilTabs .nav-link.active {
    background-color: #fff;
    border-color: var(--bs-border-color) var(--bs-border-color) transparent;
    color: var(--bs-primary);
    font-weight: 600;
}

/* Conteneur du contenu d'onglet (utilise la structure existante) */
.tab-content {
    border-bottom-left-radius: .5rem;
    border-bottom-right-radius: .5rem;
}

.tab-content.border-start.border-end.border-bottom {
    border-color: var(--bs-border-color) !important;
}

.tab-content.p-3 {
    padding: 1rem !important;
}

@media (min-width: 992px) {
    .tab-content.p-3 {
        padding: 1.25rem !important;
    }
}

/* === Dropzone (Espace Entrepreneur) === */
.tb-dropzone {
    border: 2px dashed var(--bs-primary-border-subtle);
    background: var(--bs-primary-bg-subtle);
    border-radius: .75rem;
    padding: 2rem;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: .2s ease-in-out;
    cursor: pointer;
}

.tb-dropzone i {
    font-size: 2rem;
    color: var(--bs-primary);
    opacity: .8;
}

.tb-dropzone.dz-drag-hover,
.tb-dropzone:hover {
    background: #fff;
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .15);
}

.tb-dz-item {
    width: 160px;
    height: 120px;
    border-radius: .5rem;
    overflow: hidden;
    background: #f8f9fa;
}

.tb-dz-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tb-dz-remove {
    position: absolute;
    top: 6px;
    right: 6px;
}

.tb-dz-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    width: 100%;
    background: rgba(0, 0, 0, .05);
}

.tb-dz-progress .dz-upload {
    display: block;
    height: 100%;
    background: var(--bs-primary);
    width: 0;
    transition: width .2s;
}

/* Hero doux en dégradé */
.tb-hero {
    background: linear-gradient(180deg, #ffffff 0%, #f7fbfa 100%);
    border-radius: 1rem;
    margin-bottom: 1.5rem;
}

/* Tuiles cliquables */
.tb-tile {
    border-radius: 1rem;
    transition: transform .15s ease, box-shadow .15s ease;
}

.tb-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .08);
}

/* Icônes rondes */
.tb-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
    font-size: 1.75rem;
}

/* frontoffice.css */
#dz-area.dz-hover {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .15);
}

#tb-onboarding .border {
    border-color: var(--bs-border-color) !important;
}

#tb-onboarding .progress {
    background: var(--bs-secondary-bg);
}

#tb-onboarding .progress-bar {
    background: var(--bs-primary);
}

/* ===== Pagination ToutBénin (Bootstrap 5) ===== */
.tb-pagination .pagination {
    gap: .25rem;
}

.tb-pagination .page-link {
    --tb-br: 999px;
    color: var(--bs-primary);
    background: #fff;
    border-color: rgba(var(--bs-primary-rgb), .25);
    border-radius: var(--tb-br);
    padding: .5rem .75rem;
    min-width: 2.5rem;
    text-align: center;
    line-height: 1.1;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.tb-pagination .page-link:hover {
    color: #fff;
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    box-shadow: 0 .25rem .75rem rgba(var(--bs-primary-rgb), .15);
}

.tb-pagination .page-link:focus {
    color: var(--bs-primary);
    background: #fff;
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25);
}

.tb-pagination .page-item.active .page-link {
    color: #fff;
    background: var(--bs-primary);
    border-color: var(--bs-primary);
}

.tb-pagination .page-item.disabled .page-link {
    color: var(--bs-secondary-color);
    background: var(--bs-secondary-bg);
    border-color: var(--bs-border-color);
    opacity: .7;
    cursor: not-allowed;
}

/* Précédent/Suivant un peu plus larges */
.tb-pagination .page-item:first-child .page-link,
.tb-pagination .page-item:last-child .page-link {
    padding-inline: .9rem;
}

/* Responsive: aéré et centrage mobile */
@media (max-width: 575.98px) {
    .tb-pagination .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }

    .tb-pagination .page-link {
        padding: .5rem .6rem;
        min-width: 2.25rem;
    }
}

/* Mode sombre (hérite de Bootstrap variables) */
@media (prefers-color-scheme: dark) {
    .tb-pagination .page-link {
        background: var(--bs-body-bg);
        border-color: rgba(var(--bs-primary-rgb), .35);
    }

    .tb-pagination .page-item.disabled .page-link {
        background: color-mix(in oklab, var(--bs-body-bg) 88%, #000);
    }
}

/* Variante compacte (optionnelle) */
.tb-pagination--compact .page-link {
    padding: .35rem .6rem;
    min-width: 2.1rem;
}