/* =============================================================================
   TELEBIB2 — telebib2-components.css  (version finale)
   Cards · Accordéon · DataTable · Badges · Tri
   Cible : Bootstrap 5.3 + DataTables 1.x — Police DM Sans (déjà chargée)
   ============================================================================= */


/* ── 1. VARIABLES ─────────────────────────────────────────────────────────── */

:root {
    --tb2-primary:        #0047AB;
    --tb2-secondary:      #00B4D8;
    --tb2-accent:         #FF8C5A;
    --tb2-dark:           #1A1D29;
    --tb2-grey:           #6B7280;
    --tb2-light:          #F3F4F6;
    --tb2-border:         #E9EAEC;
    --tb2-white:          #FFFFFF;

    --tb2-mand-bg:        #FEE2E2;
    --tb2-mand-txt:       #991B1B;
    --tb2-opt-bg:         #F3F4F6;
    --tb2-opt-txt:        #4B5563;
    --tb2-modif-bg:       #FFF7ED;
    --tb2-modif-txt:      #9A3412;
    --tb2-modif-row:      #FFFBEB;
    --tb2-success-bg:     #DCFCE7;
    --tb2-success-txt:    #166534;

    --tb2-sort-header-bg: #F0F4FF;
    --tb2-sort-border:    #C7D7F5;
    --tb2-row-hover:      #F8FAFC;

    --tb2-radius:         12px;
    --tb2-radius-sm:      8px;
    --tb2-shadow:         0 2px 12px rgba(0, 0, 0, .08);
}


/* ── 2. CARD — BASE & ACCENTS ─────────────────────────────────────────────── */

.card {
    border-radius: var(--tb2-radius);
    box-shadow: var(--tb2-shadow);
    border: 1px solid var(--tb2-border);
    overflow: hidden;
}

.card-header {
    background: var(--tb2-white);
    border-bottom: 1px solid var(--tb2-border);
    padding: .7rem 1.25rem;
}

.card-header h2,
.card-header .h5 {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--tb2-grey);
    margin-bottom: 0;
}

.tb2-card-accent-left      { border-left:  4px solid var(--tb2-primary)   !important; }
.tb2-card-accent-info      { border-left:  4px solid var(--tb2-secondary)  !important; }
.tb2-card-accent-warn      { border-left:  4px solid var(--tb2-accent)     !important; }
.tb2-card-accent-top       { border-top:   4px solid var(--tb2-primary)    !important; }
.tb2-card-accent-secondary { border-top:   4px solid var(--tb2-secondary)  !important; }


/* ── 3. ACCORDÉON — CHEVRON ANIMÉ ────────────────────────────────────────── */

/*
   Bootstrap 5 ajoute automatiquement "collapsed" sur l'élément
   data-bs-toggle="collapse" quand le contenu est masqué.
   Le chevron pivote via CSS seul, sans JS supplémentaire.
*/

.card-header[data-bs-toggle="collapse"] {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: .6rem;
    transition: background .15s ease;
}

.card-header[data-bs-toggle="collapse"]:hover {
    background: #FAFBFC;
}

/* Rond contenant le chevron SVG */
.tb2-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--tb2-light);
    flex-shrink: 0;
    transition: transform .25s ease, background .2s ease;
}

.tb2-chevron svg {
    width: 12px;
    height: 12px;
    stroke: var(--tb2-grey);
    stroke-width: 2.5;
    fill: none;
    display: block;
}

.card-header[data-bs-toggle="collapse"]:hover .tb2-chevron {
    background: #E5E7EB;
}

/* Pivoter quand Bootstrap ajoute "collapsed" sur le toggle */
.card-header[data-bs-toggle="collapse"].collapsed .tb2-chevron {
    transform: rotate(-90deg);
}

/* Supprimer le +/- textuel hérité */
#mci-added-info-icon,
#compare-icon {
    display: none !important;
}


/* ── 4. BADGES — Bootstrap overrides ──────────────────────────────────────── */

.badge {
    font-size: .73rem;
    padding: .2rem .55rem;
    border-radius: 6px;
    font-weight: 600;
}

.badge.bg-danger {
    background-color: var(--tb2-mand-bg) !important;
    color: var(--tb2-mand-txt) !important;
    font-weight: 700;
}

.badge.bg-secondary {
    background-color: var(--tb2-opt-bg) !important;
    color: var(--tb2-opt-txt) !important;
    font-weight: 500;
}

.badge.bg-warning {
    background-color: var(--tb2-modif-bg) !important;
    color: var(--tb2-modif-txt) !important;
}

.badge.bg-success {
    background-color: var(--tb2-success-bg) !important;
    color: var(--tb2-success-txt) !important;
    font-weight: 700;
}

.badge.bg-info {
    background-color: #EFF4FF !important;
    color: var(--tb2-primary) !important;
}


/* ── 5. TABLE HISTORIQUE DES VERSIONS ─────────────────────────────────────── */

.tb2-ver-active td {
    background-color: #EFF4FF !important;
    font-weight: 600;
}

.tb2-ver-active td:first-child {
    color: var(--tb2-primary);
    font-weight: 700;
}

.table .tb2-ver-active {
    --bs-table-accent-bg: #EFF4FF;
    --bs-table-color: var(--tb2-dark);
}


/* ── 6. DATATABLE — EN-TÊTES DE TRI (DataTables 2.x) ─────────────────────── */

/*
   DataTables 2.x wrap le contenu du <th> dans :
     .dt-column-header > .dt-column-title  (texte + notre .tb2-sort-icon)
                       > .dt-column-order  (▲▼ natifs — à masquer)
   Classes de tri : dt-orderable-asc/desc, dt-ordering-asc/desc
*/

#table-mci-lines thead th {
    background-color: var(--tb2-sort-header-bg);
    color: var(--tb2-primary);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: .6rem .85rem;
    border-bottom: 2px solid var(--tb2-sort-border) !important;
    white-space: nowrap;
    position: relative;
    transition: background .15s ease;
}

#table-mci-lines thead th.dt-orderable-asc:hover,
#table-mci-lines thead th.dt-orderable-desc:hover {
    background-color: #E4ECFF;
    outline: none !important;
}

/* Soulignement bleu sur la colonne active */
#table-mci-lines thead th.dt-ordering-asc::after,
#table-mci-lines thead th.dt-ordering-desc::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: var(--tb2-primary);
}

/* Masquer les icônes ▲▼ natifs de DataTables 2.x */
#table-mci-lines .dt-column-order {
    display: none !important;
}

/* ── Icône double-chevron ▲▼ custom ── */
.tb2-sort-icon {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    margin-left: 5px;
    vertical-align: middle;
    opacity: .3;
    transition: opacity .15s;
}

.tb2-up {
    display: block;
    width: 0; height: 0;
    border-left:  4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 5px solid currentColor;
}

.tb2-dn {
    display: block;
    width: 0; height: 0;
    border-left:  4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
}

/* Colonne triée : icône opaque */
#table-mci-lines thead th.dt-ordering-asc  .tb2-sort-icon,
#table-mci-lines thead th.dt-ordering-desc .tb2-sort-icon { opacity: 1; }

/* Griser la flèche inactive */
#table-mci-lines thead th.dt-ordering-asc  .tb2-dn { opacity: .2; }
#table-mci-lines thead th.dt-ordering-desc .tb2-up { opacity: .2; }

/* Hover */
#table-mci-lines thead th.dt-orderable-asc:hover  .tb2-sort-icon,
#table-mci-lines thead th.dt-orderable-desc:hover .tb2-sort-icon { opacity: .7; }


/* ── 7. DATATABLE — LIGNES & CELLULES ─────────────────────────────────────── */

/* Masquer search/length/pagination natifs (dom:"t" les retire déjà) */
.dt-container .dt-search,
.dt-container .dt-length  { display: none !important; }
.dataTables_wrapper .dataTables_filter { display: none !important; }
.dataTables_wrapper .dataTables_length { display: none !important; }

/* Clickable rows (shared) */
.datatable tbody tr.tb2-clickable-row { cursor: pointer; }

/* Popover info icon — unified style */
i[data-bs-toggle="popover"],
.tb2-popover-icon {
    color: var(--tb2-primary) !important;
    font-size: .85rem;
    cursor: pointer;
    transition: color .15s;
}
i[data-bs-toggle="popover"]:hover,
.tb2-popover-icon:hover {
    color: var(--tb2-secondary) !important;
}

/* Tooltip — white style (match popover look) */
.tooltip-inner {
    background: #fff;
    color: var(--tb2-dark);
    border: 1px solid var(--tb2-border);
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
    font-size: .8rem;
    max-width: 300px;
}
.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before    { border-top-color: var(--tb2-border); }
.bs-tooltip-end .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before  { border-right-color: var(--tb2-border); }
.bs-tooltip-bottom .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before { border-bottom-color: var(--tb2-border); }
.bs-tooltip-start .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before   { border-left-color: var(--tb2-border); }

#table-mci-lines { margin-bottom: 0; font-size: .83rem; }

#table-mci-lines tbody tr {
    border-bottom: 1px solid var(--tb2-light);
    transition: background .15s ease;
}

#table-mci-lines tbody tr:hover         { background: var(--tb2-row-hover) !important; }
#table-mci-lines tbody tr.tb2-row-modif { background-color: var(--tb2-modif-row) !important; }

#table-mci-lines td { padding: .5rem .85rem; vertical-align: middle; }

#table-mci-lines td:nth-child(1) { color: var(--tb2-grey); font-weight: 600; text-align: right; width: 52px; }
#table-mci-lines td:nth-child(2) { width: 80px; text-align: center; }
#table-mci-lines td:nth-child(3) { font-weight: 500; color: var(--tb2-dark); }
#table-mci-lines td:nth-child(4) { width: 88px; text-align: center; color: var(--tb2-grey); }
#table-mci-lines td:nth-child(5) { width: 90px; }
#table-mci-lines td:nth-child(6) { font-size: .78rem; color: var(--tb2-grey); white-space: normal; word-break: break-word; }


/* ── 8. SEARCH CUSTOM CARD-HEADER ─────────────────────────────────────────── */

.tb2-dt-search { width: 220px; }

.tb2-dt-search .input-group-text.tb2-search-icon {
    background: var(--tb2-light);
    border-color: var(--tb2-border);
    color: var(--tb2-grey);
    border-right: none;
    padding: .3rem .6rem;
}

.tb2-dt-search .form-control {
    font-size: .82rem;
    border-color: var(--tb2-border);
    border-left: none;
    background: var(--tb2-light);
    color: var(--tb2-dark);
    padding: .3rem .65rem;
    border-radius: 0 var(--tb2-radius-sm) var(--tb2-radius-sm) 0;
    transition: border-color .2s, background .2s;
}

.tb2-dt-search .form-control:focus                      { border-color: var(--tb2-primary); background: var(--tb2-white); box-shadow: none; }
.tb2-dt-search:focus-within .tb2-search-icon           { border-color: var(--tb2-primary); background: var(--tb2-white); }


/* ── 9. FORMULAIRE COMPARAISON ────────────────────────────────────────────── */

.card .btn-primary {
    background-color: var(--tb2-accent);
    border-color: var(--tb2-accent);
    color: #fff;
    font-weight: 600;
    border-radius: var(--tb2-radius-sm);
    transition: background .2s;
}

.card .btn-primary:hover,
.card .btn-primary:focus {
    background-color: #e07040;
    border-color: #e07040;
    box-shadow: none;
}

.card .form-select-sm { border-color: var(--tb2-border); border-radius: var(--tb2-radius-sm); font-size: .85rem; }
.card .form-select-sm:focus { border-color: var(--tb2-primary); box-shadow: none; }

.card .table-warning {
    background-color: var(--tb2-modif-row) !important;
    --bs2-table-accent-bg: var(--tb2-modif-row);
    color: var(--tb2-modif-txt);
}


/* ── 10. TABLE DESCRIPTION ────────────────────────────────────────────────── */

.card-body .table-sm th {
    font-size: .73rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--tb2-grey);
    white-space: nowrap;
    padding: .35rem .5rem;
    border-bottom: 1px solid var(--tb2-light);
    vertical-align: top;
}

.card-body .table-sm td {
    font-size: .85rem;
    color: var(--tb2-dark);
    padding: .35rem .5rem;
    border-bottom: 1px solid var(--tb2-light);
}

.card-body .table-borderless tr:last-child th,
.card-body .table-borderless tr:last-child td { border-bottom: none; }


/* ── 11. HINT TRI ─────────────────────────────────────────────────────────── */

.tb2-sort-hint {
    font-size: .72rem;
    color: #9CA3AF;
    display: flex;
    align-items: center;
    gap: .3rem;
}


/* ── 12. HERO TABS (release view) ─────────────────────────────────────────── */

.tb2-category-header.has-hero-tabs .tb2-header-container {
    padding-bottom: 1.25rem;
}

.tb2-hero-tabs {
    display: flex;
    gap: .5rem;
    margin-top: 1.5rem;
    overflow-x: auto;
    overflow-y: visible;
    padding: 2px 0;
    scrollbar-width: none;
}

.tb2-hero-tabs::-webkit-scrollbar { display: none; }

.tb2-hero-tab {
    padding: .6rem 1.25rem;
    font-size: .95rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .75);
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 8px;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
    white-space: nowrap;
    outline: none;
}

.tb2-hero-tab:hover {
    background: rgba(255, 255, 255, .18);
    color: #fff;
    border-color: rgba(255, 255, 255, .4);
}

.tb2-hero-tab.active,
.tb2-hero-tab[aria-selected="true"] {
    background: #fff;
    color: var(--tb2-primary);
    border-color: #fff;
}

/* Tab count badge */
.tb2-hero-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    margin-left: .4rem;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1;
    border-radius: 11px;
    background: rgba(255, 255, 255, .2);
    color: inherit;
}

.tb2-hero-tab.active .tb2-hero-tab-badge,
.tb2-hero-tab[aria-selected="true"] .tb2-hero-tab-badge {
    background: var(--tb2-primary);
    color: #fff;
}


/* ── 13. RELEASE MCIs — TOOLBAR ───────────────────────────────────────────── */

.tb2-mci-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    gap: .75rem;
}

.tb2-mci-toolbar-left {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

.tb2-mci-toolbar-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--tb2-dark);
}

.tb2-mci-count {
    background: var(--tb2-sort-header-bg);
    color: var(--tb2-primary);
    font-size: .75rem;
    font-weight: 700;
    padding: .2rem .65rem;
    border-radius: 20px;
    border: 1px solid var(--tb2-sort-border);
}

.tb2-mci-toolbar-right {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

.tb2-mci-filter-group {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.tb2-mci-filter-label {
    font-size: .78rem;
    color: var(--tb2-grey);
    font-weight: 600;
    white-space: nowrap;
    margin-bottom: 0;
}

.tb2-mci-filter-select {
    padding: .35rem .75rem;
    border: 1.5px solid var(--tb2-border);
    border-radius: var(--tb2-radius-sm);
    font-family: inherit;
    font-size: .83rem;
    color: var(--tb2-dark);
    background: #fff;
    cursor: pointer;
    transition: border-color .2s;
}

.tb2-mci-filter-select:focus {
    outline: none;
    border-color: var(--tb2-primary);
}

.tb2-mci-search {
    display: flex;
    align-items: center;
    gap: .4rem;
    background: #fff;
    border: 1.5px solid var(--tb2-border);
    border-radius: var(--tb2-radius-sm);
    padding: .35rem .7rem;
    transition: border-color .2s;
}

.tb2-mci-search:focus-within { border-color: var(--tb2-primary); }

.tb2-mci-search svg { opacity: .4; flex-shrink: 0; }

.tb2-mci-search input {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    font-family: inherit;
    font-size: .83rem;
    color: var(--tb2-dark);
    width: 180px;
    outline: none;
    padding: 0 !important;
}


/* ── 14. RELEASE MCIs — TABLE CARD ───────────────────────────────────────── */

.tb2-mci-table-card {
    background: #fff;
    border-radius: var(--tb2-radius);
    box-shadow: var(--tb2-shadow);
    border: 1px solid var(--tb2-border);
    overflow: hidden;
}

.tb2-mci-release-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .82rem;
}

/* En-têtes */
.tb2-mci-release-table thead th {
    background: var(--tb2-sort-header-bg);
    color: var(--tb2-primary);
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: .6rem .85rem;
    text-align: left;
    border-bottom: 2px solid var(--tb2-sort-border);
    white-space: nowrap;
    cursor: pointer;
    position: relative;
    transition: background .15s;
    user-select: none;
}

.tb2-mci-release-table thead th:hover { background: #E4ECFF; }

/* Soulignement colonne active */
.tb2-mci-release-table thead th.tb2-sort-asc::after,
.tb2-mci-release-table thead th.tb2-sort-desc::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: var(--tb2-primary);
}

/* Icône tri — opacité */
.tb2-mci-release-table thead th .tb2-sort-icon { opacity: .3; }
.tb2-mci-release-table thead th:hover .tb2-sort-icon { opacity: .6; }
.tb2-mci-release-table thead th.tb2-sort-asc  .tb2-sort-icon,
.tb2-mci-release-table thead th.tb2-sort-desc .tb2-sort-icon { opacity: 1; }
.tb2-mci-release-table thead th.tb2-sort-asc  .tb2-dn { opacity: .2; }
.tb2-mci-release-table thead th.tb2-sort-desc .tb2-up { opacity: .2; }

/* Lignes */
.tb2-mci-release-table tbody tr {
    border-bottom: 1px solid #F3F4F6;
    transition: background .12s;
}

.tb2-mci-release-table tbody tr:hover { background: var(--tb2-row-hover); }
.tb2-mci-release-table tbody tr.tb2-clickable-row { cursor: pointer; }

/* Cellules */
.tb2-mci-release-table td {
    padding: .55rem .85rem;
    vertical-align: middle;
}

.tb2-mci-td-id   { color: var(--tb2-grey); font-size: .78rem; text-align: right; white-space: nowrap; }
.tb2-mci-td-mci a { color: var(--tb2-primary); font-weight: 700; font-size: .83rem; transition: color .15s; text-decoration: none; }
.tb2-mci-td-mci a:hover { color: var(--tb2-secondary); text-decoration: underline; }
.tb2-mci-td-v    { color: var(--tb2-grey); text-align: center; font-weight: 600; font-size: .8rem; white-space: nowrap; }
.tb2-mci-td-emit,
.tb2-mci-td-dest { color: var(--tb2-grey); font-size: .8rem; white-space: nowrap; }
.tb2-mci-td-comm { font-size: .8rem; color: var(--tb2-dark); white-space: normal; word-break: break-word; overflow-wrap: break-word; }
.tb2-mci-td-obs  { font-size: .78rem; color: var(--tb2-grey); white-space: nowrap; }

/* Séparateurs de groupe */
.tb2-mci-release-table tr.tb2-mci-group-sep td {
    background: #F3F7FF;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--tb2-primary);
    padding: .4rem .85rem;
    border-bottom: 1px solid var(--tb2-sort-border);
    border-top: 2px solid var(--tb2-sort-border);
    cursor: default;
}

/* Pied de table */
.tb2-mci-table-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .6rem 1.25rem;
    background: var(--tb2-light);
    border-top: 1px solid var(--tb2-border);
    font-size: .78rem;
    color: var(--tb2-grey);
}


/* ── 16. RELEASE CHANGES — PILLS TOOLBAR ──────────────────────────────────── */

.tb2-chg-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    gap: .75rem;
}

.tb2-chg-toolbar-left {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

.tb2-chg-toolbar-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--tb2-dark);
}

.tb2-chg-pills {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.tb2-chg-pill {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .28rem .8rem;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .18s;
    border: 1.5px solid var(--tb2-border);
    background: var(--tb2-white);
    color: var(--tb2-grey);
    user-select: none;
}

.tb2-chg-pill:hover {
    border-color: var(--tb2-primary);
    color: var(--tb2-primary);
}

.tb2-chg-pill.active {
    background: var(--tb2-primary);
    color: var(--tb2-white);
    border-color: var(--tb2-primary);
}

.tb2-chg-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.tb2-chg-pill[data-filter="add"] .tb2-chg-dot { background: var(--tb2-success-txt); }
.tb2-chg-pill[data-filter="mod"] .tb2-chg-dot { background: var(--tb2-modif-txt); }
.tb2-chg-pill[data-filter="del"] .tb2-chg-dot { background: var(--tb2-mand-txt); }
.tb2-chg-pill.active .tb2-chg-dot             { background: var(--tb2-white); }

.tb2-chg-pill-count {
    font-size: .8rem;
    font-weight: 700;
    opacity: .8;
}

/* ── Nav-pills (default override to match tb2-chg-pill style) ──────────── */
.nav-pills {
    gap: .5rem;
    align-items: center;
    margin: 0;
    padding: 0;
}
.nav-pills .nav-item {
    margin: 0;
    padding: 0;
}
.nav-pills .nav-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .28rem .8rem;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 600;
    border: 1.5px solid var(--tb2-border);
    background: var(--tb2-white);
    color: var(--tb2-grey);
    transition: background .18s, color .18s, border-color .18s;
    box-sizing: border-box;
    line-height: 1.4;
    transform: none !important;
}
.nav-pills .nav-link:hover {
    border-color: var(--tb2-primary);
    color: var(--tb2-primary);
}
.nav-pills .nav-link:focus {
    box-shadow: none;
}
.nav-pills .nav-link.active {
    background: var(--tb2-primary);
    color: var(--tb2-white);
    border-color: var(--tb2-primary);
}
.nav-pills .nav-link .badge {
    font-size: .7rem;
    font-weight: 700;
    opacity: .85;
}
.nav-pills .nav-link.active .badge {
    background: rgba(255,255,255,.25) !important;
    color: var(--tb2-white) !important;
}

.tb2-chg-search {
    display: flex;
    align-items: center;
    gap: .4rem;
    background: var(--tb2-white);
    border: 1.5px solid var(--tb2-border);
    border-radius: var(--tb2-radius-sm);
    padding: .35rem .7rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
    transition: border-color .2s;
}

.tb2-chg-search:focus-within { border-color: var(--tb2-primary); }

.tb2-chg-search svg { opacity: .4; flex-shrink: 0; }

.tb2-chg-search input {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    font-family: inherit;
    font-size: .83rem;
    color: var(--tb2-dark);
    width: 220px;
    outline: none;
    padding: 0 !important;
}


/* ── 17. RELEASE CHANGES — TABLE CARD ─────────────────────────────────────── */

.tb2-chg-table-card {
    background: var(--tb2-white);
    border-radius: var(--tb2-radius);
    box-shadow: var(--tb2-shadow);
    border: 1px solid var(--tb2-border);
    overflow: hidden;
}

.tb2-chg-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .82rem;
    table-layout: fixed;
}

/* Colgroup widths */
.tb2-chg-c-type  { width: 96px; }
.tb2-chg-c-mci   { width: 108px; }
.tb2-chg-c-v     { width: 42px; }
.tb2-chg-c-elem  { width: 20%; }
.tb2-chg-c-pres  { width: 82px; }
.tb2-chg-c-cond  { width: 22%; }
.tb2-chg-c-codes { width: 90px; }
.tb2-chg-c-tb2   { width: 13%; }

/* En-têtes */
.tb2-chg-table thead th {
    background: var(--tb2-sort-header-bg);
    color: var(--tb2-primary);
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: .6rem .85rem;
    text-align: left;
    border-bottom: 2px solid var(--tb2-sort-border);
    white-space: nowrap;
    cursor: pointer;
    position: relative;
    transition: background .15s;
    user-select: none;
}

.tb2-chg-table thead th:hover { background: #E4ECFF; }

/* Soulignement colonne triée */
.tb2-chg-table thead th.tb2-sort-asc::after,
.tb2-chg-table thead th.tb2-sort-desc::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: var(--tb2-primary);
}

/* Icône tri — opacité */
.tb2-chg-table thead th .tb2-sort-icon              { opacity: .3; }
.tb2-chg-table thead th:hover .tb2-sort-icon         { opacity: .6; }
.tb2-chg-table thead th.tb2-sort-asc  .tb2-sort-icon,
.tb2-chg-table thead th.tb2-sort-desc .tb2-sort-icon { opacity: 1; }
.tb2-chg-table thead th.tb2-sort-asc  .tb2-dn        { opacity: .2; }
.tb2-chg-table thead th.tb2-sort-desc .tb2-up        { opacity: .2; }

/* Lignes */
.tb2-chg-table tbody tr {
    border-bottom: 1px solid #F3F4F6;
    transition: background .12s;

}

.tb2-chg-table tbody tr:hover { background: var(--tb2-row-hover); }
.tb2-chg-table tbody tr.tb2-clickable-row { cursor: pointer; }

/* Séparateurs de groupe */
.tb2-chg-table tr.tb2-chg-group-sep td {
    background: #F3F7FF;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--tb2-primary);
    padding: .45rem .85rem;
    border-bottom: 1px solid var(--tb2-sort-border);
    border-top: 2px solid var(--tb2-sort-border);
    cursor: default;
}

/* Cellules */
.tb2-chg-table td {
    padding: .55rem .85rem;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tb2-chg-td-mci a {
    color: var(--tb2-primary);
    font-weight: 700;
    font-size: .83rem;
    transition: color .15s;
    text-decoration: none;
}

.tb2-chg-td-mci a:hover {
    color: var(--tb2-secondary);
    text-decoration: underline;
}

.tb2-chg-td-v {
    color: var(--tb2-grey);
    text-align: center;
    font-weight: 600;
    font-size: .8rem;
}

.tb2-chg-td-elem {
    font-weight: 500;
    color: var(--tb2-dark);
    white-space: normal;
    word-break: break-word;
}

.tb2-chg-td-cond {
    font-size: .78rem;
    color: var(--tb2-grey);
    white-space: normal;
    word-break: break-word;
}

.tb2-chg-td-codes {
    font-size: .78rem;
    color: var(--tb2-grey);
    text-align: center;
}

.tb2-chg-td-tb2 {
    font-size: .75rem;
    color: var(--tb2-grey);
    font-family: monospace;
    white-space: normal;
    word-break: break-word;
}

/* Pied de table */
.tb2-chg-table-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .6rem 1.25rem;
    background: var(--tb2-light);
    border-top: 1px solid var(--tb2-border);
    font-size: .78rem;
    color: var(--tb2-grey);
    flex-wrap: wrap;
    gap: .5rem;
}

/* Pagination */
.tb2-pag {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.tb2-pag-per {
    padding: .2rem .5rem;
    border: 1.5px solid var(--tb2-border);
    border-radius: var(--tb2-radius-sm);
    font-family: inherit;
    font-size: .75rem;
    color: var(--tb2-dark);
    background: #fff;
    cursor: pointer;
}

.tb2-pag-per:focus {
    outline: none;
    border-color: var(--tb2-primary);
}

.tb2-pag-nav {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* Override template.css native button reset */
button.tb2-pag-btn,
button.tb2-pag-btn:hover,
button.tb2-pag-btn:disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 .35rem;
    border: 1px solid var(--tb2-border);
    border-radius: 6px;
    background: var(--tb2-sort-header-bg);
    color: var(--tb2-grey);
    font-family: inherit;
    font-size: .72rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    transform: none;
    line-height: 1;
    text-decoration: none;
    gap: 0;
}

button.tb2-pag-btn:hover:not(:disabled):not(.active) {
    border-color: var(--tb2-primary);
    color: var(--tb2-primary);
    background: #E4ECFF;
    transform: none;
}

button.tb2-pag-btn.active,
button.tb2-pag-btn.active:hover {
    background: var(--tb2-primary);
    color: #fff;
    border-color: var(--tb2-primary);
    transform: none;
}

button.tb2-pag-btn:disabled {
    opacity: .35;
    cursor: default;
    background: var(--tb2-sort-header-bg);
    color: var(--tb2-grey);
}

.tb2-pag-dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    font-size: .75rem;
    color: var(--tb2-grey);
}

/* Card border-top variants */
.tb2-chg-card-primary   { border-top-color: var(--tb2-primary); }
.tb2-chg-card-secondary { border-top-color: var(--tb2-secondary); }

/* Shared cell types (qualifiers, code-lists) */
.tb2-chg-td-code {
    font-family: 'Calibri', 'Segoe UI', Tahoma, monospace;
    font-weight: 600;
    font-size: .83rem;
    color: var(--tb2-primary);
    white-space: nowrap;
}

.tb2-chg-td-date {
    font-size: .78rem;
    color: var(--tb2-grey);
    white-space: nowrap;
}


/* ── 19. MCIs INDEX — GROUPED TABLE ───────────────────────────────────────── */

/* Override: table headers non-clickable on index page */
.tb2-idx-table thead th {
    cursor: default;
}
.tb2-idx-table thead th:hover {
    background: var(--tb2-sort-header-bg);
}
.tb2-idx-table thead th .tb2-sort-icon { display: none; }

/* Group header row */
.tb2-idx-group td {
    background: #F3F7FF;
    padding: .55rem .85rem;
    border-bottom: 1px solid var(--tb2-sort-border);
    border-top: 2px solid var(--tb2-sort-border);
    cursor: default;
}

.tb2-idx-group-id {
    font-family: 'Calibri', 'Segoe UI', Tahoma, monospace;
    font-weight: 700;
    font-size: .88rem;
    color: var(--tb2-primary);
    text-decoration: none;
    transition: color .15s;
}

.tb2-idx-group-id:hover {
    color: var(--tb2-secondary);
    text-decoration: underline;
}

.tb2-idx-group-meta {
    font-size: .75rem;
    color: var(--tb2-grey);
    font-weight: 500;
}

.tb2-idx-group-hidden {
    font-size: .72rem;
    font-style: italic;
    color: var(--tb2-grey);
}

/* Version rows — full row clickable */
.tb2-idx-version[data-href] {
    cursor: pointer;
    transition: background .15s ease;
}

.tb2-idx-version[data-href]:hover {
    background: var(--tb2-row-hover);
}

.tb2-idx-obsolete {
    opacity: .55;
}

/* Cells */
.tb2-idx-td-v {
    text-align: center;
    white-space: nowrap;
}

.tb2-idx-td-desc {
    font-size: .82rem;
    color: var(--tb2-dark);
}

.tb2-idx-td-flow {
    font-size: .8rem;
    color: var(--tb2-grey);
    white-space: nowrap;
}

.tb2-idx-flow-arrow {
    margin: 0 .35rem;
    opacity: .45;
    font-size: .6rem;
}

.tb2-idx-flow-sender,
.tb2-idx-flow-recipient {
    font-size: .78rem;
}

.tb2-idx-td-release {
    font-size: .8rem;
    color: var(--tb2-grey);
    white-space: nowrap;
}

.tb2-idx-td-link {
    text-align: center;
}

.tb2-idx-td-link a {
    color: var(--tb2-primary);
    transition: color .15s;
}

.tb2-idx-td-link a:hover {
    color: var(--tb2-secondary);
}

/* Colgroup widths */
.tb2-idx-c-v       { width: 72px; }
.tb2-idx-c-flow    { width: 200px; }
.tb2-idx-c-release { width: 100px; }
.tb2-idx-c-action  { width: 48px; }


/* ── 20. CODE LISTS INDEX — TABLE ─────────────────────────────────────────── */

/* Code link in code cell */
.tb2-chg-td-code a {
    color: var(--tb2-primary);
    font-weight: 700;
    text-decoration: none;
    transition: color .15s;
}

.tb2-chg-td-code a:hover {
    color: var(--tb2-secondary);
    text-decoration: underline;
}

/* Label cell */
.tb2-cl-td-label {
    font-size: .82rem;
    color: var(--tb2-dark);
}

/* Technical tag cell */
.tb2-cl-td-tech {
    font-family: 'Calibri', 'Segoe UI', Tahoma, monospace;
    font-size: .78rem;
    color: var(--tb2-grey);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Version badges cell */
.tb2-cl-td-versions {
    white-space: nowrap;
}

.tb2-cl-td-versions .badge {
    margin-right: .25rem;
    margin-bottom: .15rem;
    font-size: .7rem;
}

/* Colgroup widths */
.tb2-cl-c-code     { width: 110px; }
.tb2-cl-c-tech     { width: 240px; }
.tb2-cl-c-versions { width: 190px; }
.tb2-cl-c-action   { width: 48px; }


/* ── 22. DIRECTORY LISTING TABLES (DataTables inside .card) ───────────────── */

/* Card container — remove shadow, clean border */
.card:has(.datatable) {
    box-shadow: none;
    border: 1px solid #E5E7EB;
    border-radius: var(--tb2-radius);
    overflow: hidden;
}

/* Card header — toolbar style */
.card:has(.datatable) > .card-header {
    background: #fff;
    border-bottom: 1px solid #E5E7EB;
    padding: .85rem 1.25rem;
}

.card:has(.datatable) > .card-header .fw-semibold {
    font-size: 1rem;
    font-weight: 700;
    color: var(--tb2-dark);
    text-transform: none;
    letter-spacing: normal;
}

.card:has(.datatable) > .card-header .badge.bg-secondary {
    background: #EBF0FA !important;
    color: var(--tb2-primary);
    font-weight: 600;
    font-size: .75rem;
    padding: .25rem .6rem;
    border-radius: 20px;
}

/* Thead — match redesigned tables */
.card:has(.datatable) .datatable thead th {
    background: var(--tb2-sort-header-bg) !important;
    color: var(--tb2-dark);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .65rem .85rem;
    border-bottom: 1px solid var(--tb2-sort-border);
    white-space: nowrap;
}

/* Sort icon color override */
.card:has(.datatable) .datatable thead th.dt-orderable-asc::after,
.card:has(.datatable) .datatable thead th.dt-orderable-desc::before {
    opacity: .35;
}

.card:has(.datatable) .datatable thead th.dt-ordering-asc::after,
.card:has(.datatable) .datatable thead th.dt-ordering-desc::before {
    opacity: 1;
    color: var(--tb2-primary);
}

/* Body rows */
.card:has(.datatable) .datatable tbody td {
    padding: .6rem .85rem;
    font-size: .85rem;
    vertical-align: middle;
    border-bottom: 1px solid #F3F4F6;
}

.card:has(.datatable) .datatable tbody tr:last-child td {
    border-bottom: none;
}

/* Row hover — unified grey */
.card:has(.datatable) .datatable tbody tr:hover td {
    background-color: var(--tb2-row-hover) !important;
    --bs-table-hover-bg: var(--tb2-row-hover);
    --bs-table-accent-bg: var(--tb2-row-hover);
}

/* Code link in first column */
.card:has(.datatable) .datatable tbody td a:not(.btn) {
    color: var(--tb2-primary);
    font-weight: 700;
    text-decoration: none;
    transition: color .15s;
}

.card:has(.datatable) .datatable tbody td a:not(.btn):hover {
    color: var(--tb2-secondary);
    text-decoration: underline;
}

/* "Détail" button — restyle to subtle arrow link */
.card:has(.datatable) .datatable tbody .btn.btn-sm.btn-outline-secondary {
    border: none;
    background: none;
    padding: .25rem .5rem;
    color: var(--tb2-primary);
    font-size: 0;
    line-height: 1;
    transition: color .15s, background .15s;
    border-radius: 6px;
}

.card:has(.datatable) .datatable tbody .btn.btn-sm.btn-outline-secondary::after {
    content: '→';
    font-size: .9rem;
    font-weight: 600;
}

.card:has(.datatable) .datatable tbody .btn.btn-sm.btn-outline-secondary:hover {
    background: #EBF0FA;
    color: var(--tb2-secondary);
}

/* DataTables (dt-bootstrap5) — kill all mt-2 gaps inside card */
.card:has(.datatable) .dt-container > .row {
    margin-top: 0 !important;
}

/* Kill Bootstrap column padding inside card-body rows (except footer row) */
.card-body .row:not(:has(.dt-info)):not(:has(.dt-paging)) > * {
    padding-left: 0;
    padding-right: 0;
}

/* Hide top bar row (length + search) */
.card:has(.datatable) .dt-container > .row:first-child {
    display: none !important;
}

/* Table row — no extra spacing */
.card:has(.datatable) .dt-container > .row.dt-layout-table {
    margin: 0;
}

/* Bottom bar — match tb2-*-table-foot pattern */
.card:has(.datatable) .dt-container > .row:has(.dt-info),
.card:has(.datatable) .dt-container > .row:has(.dt-paging) {
    border-top: 1px solid var(--tb2-border);
    background: var(--tb2-light) !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0!important;
    margin: 0;
}

/* Info text */
.card:has(.datatable) .dt-container .dt-info {
    font-size: .78rem;
    color: var(--tb2-grey);
    padding: 0;
}

/* Pagination — restyle Bootstrap 5 .page-item/.page-link to match tb2-pag-btn */
.card:has(.datatable) .dt-container .dt-paging .pagination {
    gap: 2px;
    margin: 0;
}

.card:has(.datatable) .dt-container .dt-paging .page-link {
    min-width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 .35rem;
    border: 1px solid var(--tb2-border);
    border-radius: 6px !important;
    background: var(--tb2-sort-header-bg);
    color: var(--tb2-grey);
    font-family: inherit;
    font-size: .72rem;
    font-weight: 600;
    transition: background .15s, border-color .15s, color .15s;
    line-height: 1;
    text-decoration: none;
}

.card:has(.datatable) .dt-container .dt-paging .page-item.active .page-link,
.card:has(.datatable) .dt-container .dt-paging .page-item.active .page-link:hover {
    background: var(--tb2-primary);
    border-color: var(--tb2-primary);
    color: #fff;
}

.card:has(.datatable) .dt-container .dt-paging .page-item:not(.active):not(.disabled) .page-link:hover {
    background: #E4ECFF;
    border-color: var(--tb2-primary);
    color: var(--tb2-primary);
}

.card:has(.datatable) .dt-container .dt-paging .page-item.disabled .page-link {
    opacity: .35;
    cursor: default;
    background: var(--tb2-sort-header-bg);
    color: var(--tb2-grey);
    border-color: var(--tb2-border);
}

/* Legacy dataTables_wrapper fallback (older DT versions) */
.card:has(.datatable) .dataTables_wrapper > .row:first-child {
    display: none !important;
}

.card:has(.datatable) .dataTables_wrapper > .row:last-child {
    border-top: 1px solid var(--tb2-border);
    background: var(--tb2-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .6rem 1.25rem;
    margin: 0;
}


/* ── 23. CODELIST / MCI DETAIL — CARDS & TABLES ──────────────────────────── */

/*
 * Cible les pages détail (codelist, mci, etc.) qui utilisent des
 * .card Bootstrap standard avec .table-sm / .table-hover / .list-group.
 * Aucun changement PHP — CSS pur.
 */

/* --- Version selector (list-group inside card) --- */
.card:has(.list-group-flush) {
    box-shadow: none;
    border: 1px solid var(--tb2-border);
}

.card:has(.list-group-flush) > .card-header {
    background: var(--tb2-sort-header-bg);
    border-bottom: 1px solid var(--tb2-border);
    font-size: .73rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--tb2-primary);
}

.card:has(.list-group-flush) .list-group-item {
    font-size: .85rem;
    padding: .6rem 1rem;
    border-color: var(--tb2-border);
    transition: background .15s, color .15s;
}

.card:has(.list-group-flush) .list-group-item:hover:not(.active) {
    background: var(--tb2-row-hover);
}

.card:has(.list-group-flush) .list-group-item.active {
    background: var(--tb2-primary);
    border-color: var(--tb2-primary);
    color: #fff;
}

.card:has(.list-group-flush) .list-group-item.active small {
    color: rgba(255, 255, 255, .7) !important;
}

/* --- Properties card (table-borderless inside card) --- */
.card:has(.table-borderless) {
    box-shadow: none;
    border: 1px solid var(--tb2-border);
}

/* --- Values / MCIs tables (table-hover inside card) --- */
.card:has(.table-hover) {
    box-shadow: none;
    border: 1px solid var(--tb2-border);
}

.card:has(.table-hover) > .card-header {
    background: #fff;
    border-bottom: 1px solid var(--tb2-border);
    padding: .75rem 1.25rem;
}

.card:has(.table-hover) > .card-header h2,
.card:has(.table-hover) > .card-header .h4 {
    font-size: .95rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: var(--tb2-dark);
    margin-bottom: 0;
}

.card:has(.table-hover) > .card-header .badge.bg-secondary {
    background: var(--tb2-sort-header-bg) !important;
    color: var(--tb2-primary) !important;
    font-size: .72rem;
    font-weight: 700;
    border-radius: 10px;
    padding: .2rem .6rem;
}

/* Thead — light blue header */
.card:has(.table-hover) .table-hover > thead > tr > th {
    background: var(--tb2-sort-header-bg);
    color: var(--tb2-primary);
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: .55rem .75rem;
    border-bottom: 2px solid var(--tb2-sort-border);
    white-space: nowrap;
}

/* Rows */
.card:has(.table-hover) .table-hover > tbody > tr > td {
    padding: .5rem .75rem;
    font-size: .84rem;
    vertical-align: middle;
    border-bottom: 1px solid #F3F4F6;
}

.card:has(.table-hover) .table-hover > tbody > tr:last-child > td {
    border-bottom: none;
}

/* Row hover */
.card:has(.table-hover) .table-hover > tbody > tr:hover > td {
    background-color: var(--tb2-row-hover) !important;
    --bs-table-hover-bg: var(--tb2-row-hover);
    --bs-table-accent-bg: var(--tb2-row-hover);
}

/* Code cells — monospace */
.card:has(.table-hover) .table-hover .font-monospace {
    color: var(--tb2-primary);
    font-size: .82rem;
}

/* Tech label code */
.card:has(.table-hover) .table-hover code {
    background: var(--tb2-sort-header-bg);
    color: var(--tb2-primary);
    padding: .15rem .4rem;
    border-radius: 4px;
    font-size: .78rem;
}

/* Version badges — primary */
.card:has(.table-hover) .table-hover .badge.bg-primary {
    background: var(--tb2-primary) !important;
    font-size: .7rem;
    font-weight: 600;
    padding: .2rem .5rem;
    border-radius: 10px;
}

/* Version badges — secondary (obsolete) */
.card:has(.table-hover) .table-hover .badge.bg-secondary {
    background: #E5E7EB !important;
    color: var(--tb2-grey) !important;
    font-size: .7rem;
    font-weight: 600;
    padding: .2rem .5rem;
    border-radius: 10px;
}

/* Obsolete (date) badge in values table */
.card:has(.table-hover) .table-hover .text-muted td {
    opacity: .6;
}

/* "No MCIs" / "No values" empty state */
.card:has(.table-hover) .card-body > p.text-muted {
    font-size: .85rem;
    padding: 1rem 1.25rem !important;
}

/* --- Responsive — codelist detail --- */
@media (max-width: 768px) {
    .card:has(.list-group-flush) .list-group-item {
        font-size: .82rem;
        padding: .5rem .75rem;
    }

    .card:has(.table-hover) .table-hover > thead > tr > th {
        font-size: .65rem;
        padding: .4rem .5rem;
    }

    .card:has(.table-hover) .table-hover > tbody > tr > td {
        font-size: .8rem;
        padding: .4rem .5rem;
    }
}


/* ── 24. RELEASE NOTES — LAYOUT, SIDEBAR & ARTICLE STYLING ───────────────── */

/* --- Page body grid (content + sidebar) --- */
.rn-page-body {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2.5rem;
    align-items: start;
    padding-top: .5rem;
}

/* Full-width variant (no sidebar) */
.rn-page-body--full {
    grid-template-columns: 1fr;
    max-width: 900px;
    padding-top: 0;
}

/* Article content card wrapper */
.rn-page-body--full .rn-content {
    background: var(--tb2-white, #fff);
    border: 1px solid var(--tb2-border, #E5E7EB);
    border-radius: var(--tb2-radius, 12px);
    padding: 2rem 2.5rem;
}

/* --- Main content --- */
.rn-content {
    min-width: 0;
}

/* Intro chapeau (article) */
.rn-intro {
    font-size: .92rem;
    color: var(--tb2-grey);
    border-left: 3px solid var(--tb2-secondary);
    padding: .6rem 1rem;
    background: #F0FBFF;
    border-radius: 0 8px 8px 0;
    margin-bottom: 2rem;
}

/* Section titles h2 (article) */
.rn-content h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--tb2-dark);
    margin: 2rem 0 .6rem;
    padding-bottom: .4rem;
    border-bottom: 2px solid var(--tb2-light);
    display: flex;
    align-items: center;
    gap: .6rem;
}

/* Section icon — ::before with SVG background, keyed by h2[id] */
.rn-content h2[id]::before {
    content: '';
    width: 28px;
    height: 28px;
    border-radius: 8px;
    flex-shrink: 0;
    background-size: 14px 14px;
    background-repeat: no-repeat;
    background-position: center;
}

/* overview — info circle (blue) */
.rn-content h2#overview::before {
    background-color: #EFF4FF;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230047AB' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4m0-4h.01'/%3E%3C/svg%3E");
}

/* changes — pencil (orange/brown) */
.rn-content h2#changes::before {
    background-color: #FFF7ED;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239A3412' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z'/%3E%3C/svg%3E");
}

/* dates — calendar (green) */
.rn-content h2#dates::before {
    background-color: #DCFCE7;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23166534' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
}

/* docs — document (grey) */
.rn-content h2#docs::before {
    background-color: #F3F4F6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E");
}

/* support — chat bubble (cyan) */
.rn-content h2#support::before {
    background-color: #E0F7FC;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23006080' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}

/* Sub-titles h3 (article) */
.rn-content h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--tb2-primary);
    margin: 1.25rem 0 .4rem;
}

/* Body text (article) */
.rn-content p {
    font-size: .9rem;
    color: var(--tb2-grey);
    line-height: 1.75;
    margin-bottom: .75rem;
}

.rn-content strong {
    color: var(--tb2-dark);
    font-weight: 600;
}

/* Note/info box (article) */
.rn-note {
    display: flex;
    gap: .6rem;
    background: #FFFBEB;
    border: 1px solid #FED7AA;
    border-radius: 8px;
    padding: .75rem 1rem;
    font-size: .85rem;
    color: #92400E;
    margin: .75rem 0 1rem;
    line-height: 1.6;
}

.rn-note svg {
    flex-shrink: 0;
    margin-top: 2px;
    width: 16px;
    height: 16px;
    stroke: #F59E0B;
    fill: none;
    stroke-width: 2;
}

/* Key dates (article) */
.rn-dates {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin: .75rem 0 1rem;
}

.rn-date-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .88rem;
}

.rn-date-label {
    color: var(--tb2-grey);
    min-width: 160px;
    flex-shrink: 0;
}

.rn-date-value {
    font-weight: 600;
    color: var(--tb2-dark);
    background: var(--tb2-light);
    padding: .2rem .65rem;
    border-radius: 6px;
    font-size: .83rem;
}

.rn-date-value.highlight {
    background: #EFF4FF;
    color: var(--tb2-primary);
}

/* Lists (article) */
.rn-content ul {
    list-style: none;
    margin: .5rem 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.rn-content ul li {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: .6rem;
    row-gap: 0;
    font-size: .88rem;
    color: var(--tb2-grey);
    line-height: 1.6;
}

.rn-content ul li::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tb2-secondary);
    flex-shrink: 0;
    margin-top: .55rem;
}

.rn-content ul li a {
    color: var(--tb2-primary);
    font-weight: 500;
}

.rn-content ul li a:hover {
    text-decoration: underline;
}

.rn-content ul ul {
    flex-basis: 100%;
    padding-left: .8rem;
    margin: .2rem 0 .1rem;
    gap: .25rem;
}

.rn-content ul ul li::before {
    width: 4px;
    height: 4px;
    background: var(--tb2-primary);
    margin-top: .65rem;
}

/* Contact box (article) */
.rn-contact {
    background: var(--tb2-light);
    border-radius: 8px;
    padding: .85rem 1.1rem;
    font-size: .88rem;
    color: var(--tb2-grey);
    margin-top: .75rem;
}

.rn-contact a {
    color: var(--tb2-primary);
    font-weight: 600;
}

/* --- Sidebar --- */
.rn-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: sticky;
    top: 80px;
}

.rn-card {
    background: var(--tb2-white);
    border-radius: var(--tb2-radius);
    border: 1px solid var(--tb2-border);
    overflow: hidden;
}

.rn-card--primary   { border-top: 4px solid var(--tb2-primary); }
.rn-card--secondary { border-top: 4px solid var(--tb2-secondary); }
.rn-card--accent    { border-top: 4px solid var(--tb2-accent); }

.rn-card-header {
    padding: .65rem 1rem;
    border-bottom: 1px solid var(--tb2-border);
    font-size: .73rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--tb2-grey);
    background: #FAFBFC;
}

.rn-card-body {
    padding: .85rem 1rem;
}

/* TOC */
.rn-toc {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.rn-toc a {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .82rem;
    color: var(--tb2-grey);
    padding: .35rem .5rem;
    border-radius: 6px;
    transition: all .15s;
    text-decoration: none;
}

.rn-toc a:hover {
    background: var(--tb2-light);
    color: var(--tb2-primary);
}

.rn-toc a .toc-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tb2-border);
    flex-shrink: 0;
    transition: background .15s;
}

.rn-toc a:hover .toc-dot {
    background: var(--tb2-primary);
}

/* Info rows */
.rn-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .45rem 0;
    border-bottom: 1px solid #F3F4F6;
    font-size: .82rem;
}

.rn-info-row:last-child {
    border-bottom: none;
}

.rn-info-label {
    color: var(--tb2-grey);
}

.rn-info-value {
    font-weight: 600;
    color: var(--tb2-dark);
}

/* Quick links */
.rn-quick-links {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.rn-quick-link {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .82rem;
    color: var(--tb2-primary);
    padding: .4rem .5rem;
    border-radius: 6px;
    border: 1px solid var(--tb2-border);
    transition: all .15s;
    background: var(--tb2-white);
    text-decoration: none;
}

.rn-quick-link:hover {
    background: var(--tb2-sort-header-bg);
    border-color: var(--tb2-primary);
    color: var(--tb2-primary);
}

.rn-quick-link svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    flex-shrink: 0;
}

/* Responsive — release notes */
@media (max-width: 992px) {
    .rn-page-body {
        grid-template-columns: 1fr;
    }
    .rn-sidebar {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .rn-card {
        flex: 1;
        min-width: 220px;
    }
}

@media (max-width: 600px) {
    .rn-sidebar {
        flex-direction: column;
    }
    .rn-card {
        min-width: 0;
    }
    .rn-date-row {
        flex-direction: column;
        align-items: flex-start;
        gap: .25rem;
    }
    .rn-date-label {
        min-width: 0;
    }
}

/* ── Edit link (discret, top-right) ── */
.tb2-edit-link {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.25rem;
}
.tb2-edit-link a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    color: #9CA3AF;
    transition: color 0.2s, background 0.2s;
}
.tb2-edit-link a:hover {
    color: var(--tb2-primary);
    background: #F3F4F6;
}


/* ── 20bis. RELEASE MIGs ──────────────────────────────────────────────────── */

.tb2-release-migs-category {
    margin-bottom: 1.5rem;
}

.tb2-release-migs-accordion {
    border-radius: var(--tb2-radius-sm);
    overflow: hidden;
    border: 1px solid var(--tb2-border);
}

/* Reset generic accordion styles inside MIGs */
.tb2-release-migs-accordion.accordion {
    gap: 0;
}

.tb2-release-migs-accordion .tb2-release-migs-subcategory.accordion-item {
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 1px solid var(--tb2-border) !important;
    box-shadow: none !important;
    margin: 0;
}

.tb2-release-migs-accordion .tb2-release-migs-subcategory.accordion-item:last-child {
    border-bottom: none !important;
}

.tb2-release-migs-subcategory .accordion-button {
    background: var(--tb2-white);
    color: var(--tb2-dark);
    font-weight: 600;
    font-size: .95rem;
    padding: .65rem 1rem;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}

.tb2-release-migs-subcategory .accordion-button:hover {
    background: var(--tb2-sort-header-bg, #f3f4f6);
    transform: none !important;
}

.tb2-release-migs-subcategory .accordion-button:not(.collapsed) {
    background: var(--tb2-sort-header-bg, #f3f4f6);
    color: var(--tb2-primary);
}

.tb2-release-migs-subcategory-title {
    flex: 1;
}

.tb2-release-migs-subcategory-meta {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-right: .75rem;
}

.tb2-release-migs-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--tb2-white);
}

.tb2-release-migs-table tbody tr + tr {
    border-top: 1px solid var(--tb2-border);
}

.tb2-release-migs-table td {
    padding: .55rem .85rem;
    font-size: .85rem;
    vertical-align: middle;
}

.tb2-release-migs-td-name {
    width: 220px;
    white-space: nowrap;
    font-family: var(--tb2-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}

.tb2-release-migs-td-status {
    width: 110px;
    white-space: nowrap;
}

.tb2-release-migs-td-desc {
    color: var(--tb2-grey);
}


/* ── 20ter. MIG DETAIL — TOPBAR + SIDEBAR ─────────────────────────────────── */

.tb2-mig-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    background: var(--tb2-white);
    border: 1px solid var(--tb2-border);
    border-radius: var(--tb2-radius-sm);
    padding: .75rem 1rem;
    margin-bottom: 1.25rem;
}

.tb2-mig-topbar-id {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.tb2-mig-topbar-name {
    font-family: var(--tb2-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-weight: 700;
    color: var(--tb2-primary);
    font-size: 1rem;
}

.tb2-mig-topbar-version {
    background: var(--tb2-sort-header-bg, #f3f4f6);
    color: var(--tb2-primary);
    font-size: .75rem;
    font-weight: 700;
    padding: .15rem .55rem;
    border-radius: 20px;
    border: 1px solid var(--tb2-border);
}

.tb2-mig-topbar-desc {
    color: var(--tb2-grey);
    font-size: .9rem;
}

.tb2-mig-topbar-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.tb2-mig-topbar-item {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .82rem;
}

.tb2-mig-topbar-label {
    color: var(--tb2-grey);
    font-weight: 600;
}

.tb2-mig-topbar-value {
    color: var(--tb2-dark);
    font-weight: 600;
}

a.tb2-mig-topbar-value {
    color: var(--tb2-primary);
    text-decoration: none;
}

a.tb2-mig-topbar-value:hover {
    text-decoration: underline;
}

/* — Layout 2 colonnes — */

.tb2-mig-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.tb2-mig-sidebar {
    position: sticky;
    top: calc(var(--tb2-header-offset, 100px) + 1rem);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-height: calc(100vh - var(--tb2-header-offset, 100px) - 2rem);
    overflow-y: auto;
}

.tb2-mig-sidebar-section {
    background: var(--tb2-white);
    border: 1px solid var(--tb2-border);
    border-radius: var(--tb2-radius-sm);
    padding: .9rem 1rem;
}

.tb2-mig-sidebar-title {
    margin: 0 0 .65rem;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--tb2-grey);
    font-weight: 700;
}

.tb2-mig-sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    cursor: pointer;
    user-select: none;
}

.tb2-mig-sidebar-toggle.collapsed {
    margin-bottom: 0;
}

.tb2-mig-sidebar-chevron {
    font-size: .7rem;
    color: var(--tb2-grey);
    transition: transform .2s ease;
}

.tb2-mig-sidebar-toggle.collapsed .tb2-mig-sidebar-chevron {
    transform: rotate(-90deg);
}

.tb2-mig-sidebar-list,
.tb2-mig-sidebar-actions {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.tb2-mig-sidebar-list {
    gap: 0;
}

.tb2-mig-sidebar-actions {
    gap: .1rem;
}

.tb2-mig-sidebar-link,
.tb2-mig-sidebar-action {
    display: flex;
    align-items: center;
    gap: .55rem;
    border: 0;
    background: transparent;
    color: var(--tb2-dark);
    text-align: left;
    padding: .2rem .5rem;
    border-radius: var(--tb2-radius-sm);
    font-size: .82rem;
    line-height: 1.35;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.tb2-mig-sidebar-action {
    padding: .3rem .5rem;
    font-size: .85rem;
}

.tb2-mig-sidebar-link--lvl1 { padding-left: 1.2rem; }
.tb2-mig-sidebar-link--lvl2 { padding-left: 1.9rem; }
.tb2-mig-sidebar-link--lvl3 { padding-left: 2.6rem; }
.tb2-mig-sidebar-link--lvl4 { padding-left: 3.3rem; }

.tb2-mig-sidebar-link--lvl1,
.tb2-mig-sidebar-link--lvl2,
.tb2-mig-sidebar-link--lvl3,
.tb2-mig-sidebar-link--lvl4 {
    font-size: .78rem;
    color: var(--tb2-grey);
    border-left: 1px solid var(--tb2-border);
    margin-left: .35rem;
}

/* — MIG comments — */

.tb2-mig-comments {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.tb2-mig-comment {
    display: flex;
    gap: .85rem;
    align-items: flex-start;
    padding: 1rem 1.15rem;
    border: 1px solid var(--tb2-border);
    border-left: 4px solid var(--tb2-warning, #f0ad4e);
    border-radius: var(--tb2-radius-sm);
    background: linear-gradient(135deg, #fffaf0 0%, #f3f7ff 100%);
    color: var(--tb2-dark);
    font-size: .9rem;
    line-height: 1.5;
}

.tb2-mig-comment-icon {
    font-size: 1.1rem;
    line-height: 1.4;
    flex-shrink: 0;
}

.tb2-mig-comment-body {
    flex: 1;
    min-width: 0;
}

/* — Diff vs previous version (sidebar) — */

.tb2-mig-diff-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.tb2-mig-diff-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.tb2-mig-diff-code {
    font-family: var(--tb2-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: .82rem;
    color: var(--tb2-dark);
}

.tb2-mig-diff-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 22px;
    border-radius: 999px;
    font-weight: 700;
    font-size: .85rem;
    line-height: 1;
    flex-shrink: 0;
}

.tb2-mig-diff-badge--add {
    background: #d1fae5;
    color: #047857;
}

.tb2-mig-diff-badge--update {
    background: #fef3c7;
    color: #92400e;
}

.tb2-mig-diff-badge--remove {
    background: #fee2e2;
    color: #b91c1c;
}

.tb2-mig-sidebar-link:hover,
.tb2-mig-sidebar-action:not(:disabled):hover {
    background: var(--tb2-sort-header-bg, #f3f4f6);
    color: var(--tb2-primary);
}

.tb2-mig-sidebar-action:disabled {
    color: var(--tb2-grey);
    opacity: .55;
    cursor: not-allowed;
}

.tb2-mig-sidebar-action i {
    width: 1rem;
    text-align: center;
    flex-shrink: 0;
}

@media (max-width: 991.98px) {
    .tb2-mig-layout {
        grid-template-columns: 1fr;
    }
    .tb2-mig-sidebar {
        position: static;
        max-height: none;
    }
    .tb2-mig-topbar-meta {
        gap: .75rem;
    }
    .tb2-mci-layout {
        grid-template-columns: 1fr;
    }
    .tb2-mci-sidebar {
        position: static;
        max-height: none;
    }
    .tb2-mci-topbar {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* ── 20quater. AUTOSUGGEST ────────────────────────────────────────────────── */

.tb2-autosuggest-wrap {
    position: relative;
    display: block;
    width: 100%;
}

.tb2-autosuggest-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    min-width: 720px;
    max-width: 90vw;
    background: var(--tb2-white);
    border: 1px solid var(--tb2-border);
    border-radius: var(--tb2-radius-sm);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
    z-index: 1200;
    overflow: hidden;
    font-size: .85rem;
}

/* Variante "floating" : panneau attaché au <body> pour échapper aux
   overflow:hidden / sticky parents (notamment depuis le header). */
.tb2-autosuggest-panel--floating {
    position: absolute;
    top: 0;
    left: 0;
    right: auto;
    width: max-content;
    max-width: 90vw;
    z-index: 1500;
}

.tb2-autosuggest-empty {
    padding: 1rem 1.25rem;
    color: var(--tb2-grey);
    font-style: italic;
}

.tb2-autosuggest-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .55rem .9rem;
    background: var(--tb2-sort-header-bg, #f3f4f6);
    border-bottom: 1px solid var(--tb2-border);
    font-size: .7rem;
    color: var(--tb2-grey);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
}

.tb2-autosuggest-header strong {
    color: var(--tb2-dark);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
}

.tb2-autosuggest-header-count {
    color: var(--tb2-grey);
}

.tb2-autosuggest-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0;
}

.tb2-autosuggest-col {
    padding: .65rem 0;
    border-right: 1px solid var(--tb2-border);
}

.tb2-autosuggest-col:last-child {
    border-right: 0;
}

.tb2-autosuggest-col-title {
    padding: 0 .85rem .4rem;
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--tb2-grey);
    font-weight: 700;
}

.tb2-autosuggest-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .35rem .85rem;
    color: var(--tb2-dark);
    text-decoration: none;
    line-height: 1.3;
    cursor: pointer;
    border-left: 3px solid transparent;
}

/* Bloc texte (code + label) à gauche, extensible ; badges alignés à droite. */
.tb2-autosuggest-text {
    flex: 1 1 auto;
    min-width: 0;
}

.tb2-autosuggest-badges {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .3rem;
}

.tb2-autosuggest-item:hover,
.tb2-autosuggest-item.is-active {
    background: var(--tb2-sort-header-bg, #f3f4f6);
    border-left-color: var(--tb2-primary);
    color: var(--tb2-dark);
    text-decoration: none;
}

.tb2-autosuggest-code {
    display: block;
    font-family: var(--tb2-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    color: var(--tb2-primary);
    font-weight: 700;
    font-size: .82rem;
}

.tb2-autosuggest-label {
    display: block;
    font-size: .76rem;
    color: var(--tb2-grey);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.tb2-autosuggest-meta {
    display: flex;
    align-items: center;
    gap: .3rem;
    margin-top: .2rem;
}

.tb2-autosuggest-release {
    display: inline-block;
    padding: .02rem .35rem;
    font-family: var(--tb2-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: .68rem;
    color: var(--tb2-grey);
    background: var(--tb2-sort-header-bg, #f3f4f6);
    border: 1px solid var(--tb2-border, #e5e7eb);
    border-radius: 3px;
}

/* Badge du MIG associé à un résultat qualifier (ex. M0101_202601). */
.tb2-autosuggest-mig {
    display: inline-block;
    padding: .02rem .35rem;
    font-family: var(--tb2-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: .68rem;
    color: var(--tb2-primary, #2a5caa);
    background: #eef3fb;
    border: 1px solid #d3e0f2;
    border-radius: 3px;
    vertical-align: middle;
}
/* Badge format d'un MIG : JSON ou EDI (mêmes proportions que le badge statut). */
.tb2-autosuggest-format {
    display: inline-block;
    padding: .02rem .4rem;
    font-size: .64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    border-radius: 3px;
    border: 1px solid transparent;
}
.tb2-autosuggest-format--json { background: #ede9fe; color: #5b21b6; border-color: #ddd6fe; }
.tb2-autosuggest-format--edi  { background: #e2e8f0; color: #334155; border-color: #cbd5e1; }
.tb2-autosuggest-status {
    display: inline-block;
    padding: .02rem .4rem;
    font-size: .64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    border-radius: 3px;
    border: 1px solid transparent;
}
.tb2-autosuggest-status--active    { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.tb2-autosuggest-status--frozen    { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.tb2-autosuggest-status--supported { background: #fef9c3; color: #854d0e; border-color: #fde68a; }
.tb2-autosuggest-status--archive   { background: #f3f4f6; color: #6b7280; border-color: #e5e7eb; }

.tb2-autosuggest-item mark {
    background: transparent;
    color: inherit;
    font-weight: 800;
    padding: 0;
}

.tb2-autosuggest-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .5rem .9rem;
    background: var(--tb2-sort-header-bg, #f3f4f6);
    border-top: 1px solid var(--tb2-border);
    font-size: .7rem;
    color: var(--tb2-grey);
}

.tb2-autosuggest-keys kbd {
    background: var(--tb2-white);
    color: var(--tb2-dark);
    border: 1px solid var(--tb2-border);
    border-radius: 3px;
    padding: 1px 5px;
    font-size: .68rem;
    font-family: var(--tb2-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    box-shadow: 0 1px 0 var(--tb2-border);
    margin: 0 .15rem;
}

.tb2-autosuggest-see-all {
    color: var(--tb2-primary);
    font-weight: 600;
    text-decoration: none;
}

.tb2-autosuggest-see-all:hover { text-decoration: underline; }

@media (max-width: 767.98px) {
    .tb2-autosuggest-panel {
        min-width: 100%;
        max-width: 95vw;
    }
    .tb2-autosuggest-cols {
        grid-template-columns: 1fr;
    }
    .tb2-autosuggest-col {
        border-right: 0;
        border-bottom: 1px solid var(--tb2-border);
    }
    .tb2-autosuggest-col:last-child { border-bottom: 0; }
}


/* ── 25. MCI DETAIL — TOPBAR, SIDEBAR & LAYOUT ───────────────────────────── */

/* Topbar */
.tb2-mci-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    background: var(--tb2-white);
    border: 1px solid var(--tb2-border);
    border-radius: var(--tb2-radius-sm);
    padding: .75rem 1rem;
    margin-bottom: 1.25rem;
}

.tb2-mci-topbar-left {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.tb2-mci-topbar-code {
    font-family: var(--tb2-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-weight: 700;
    color: var(--tb2-primary);
    font-size: 1rem;
}

.tb2-mci-topbar-desc {
    color: var(--tb2-grey);
    font-size: .9rem;
}

.tb2-mci-topbar-right {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
    font-size: .82rem;
}

.tb2-mci-topbar-label {
    color: var(--tb2-grey);
    font-weight: 600;
}

.tb2-mci-version-select {
    width: auto;
    min-width: 180px;
    font-size: .82rem;
    padding: .25rem .6rem;
}

/* Layout 2 colonnes */
.tb2-mci-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

/* Sidebar */
.tb2-mci-sidebar {
    position: sticky;
    top: calc(var(--tb2-header-offset, 100px) + 1rem);
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: calc(100vh - var(--tb2-header-offset, 100px) - 2rem);
    overflow-y: auto;
}

.tb2-mci-sidebar-section {
    padding: .65rem 0;
    border-bottom: 1px solid var(--tb2-border);
}

.tb2-mci-sidebar-section:first-child {
    padding-top: 0;
}

.tb2-mci-sidebar-section:last-child {
    border-bottom: none;
}

.tb2-mci-sidebar-title {
    margin: 0 0 .25rem;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--tb2-grey);
    font-weight: 700;
}

.tb2-mci-sidebar-text {
    margin: 0;
    font-size: .85rem;
    color: var(--tb2-dark);
    line-height: 1.4;
}

.tb2-mci-sidebar-text a {
    color: var(--tb2-primary);
    text-decoration: none;
}

.tb2-mci-sidebar-text a:hover {
    text-decoration: underline;
}

.tb2-mci-sidebar-implementations {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.tb2-mci-sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    cursor: pointer;
    user-select: none;
}

.tb2-mci-sidebar-toggle.collapsed {
    margin-bottom: 0;
}

.tb2-mci-sidebar-chevron {
    color: var(--tb2-grey);
    transition: transform .2s ease;
}

.tb2-mci-sidebar-toggle.collapsed .tb2-mci-sidebar-chevron {
    transform: rotate(-90deg);
}

/* Main content area */
.tb2-mci-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}


/* ── 21. RESPONSIVE ───────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .tb2-dt-search { width: 160px; }

    #table-mci-lines td:nth-child(6),
    #table-mci-lines th:nth-child(6) { display: none; }

    .tb2-mci-release-table colgroup col:nth-child(7) { width: 150px; }
    .tb2-mci-td-comm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    .tb2-mci-toolbar { flex-direction: column; align-items: flex-start; }
    .tb2-mci-search input { width: 140px; }

    /* Changes toolbar */
    .tb2-chg-toolbar { flex-direction: column; align-items: flex-start; }
    .tb2-chg-search input { width: 160px; }
    .tb2-chg-pills { gap: .35rem; }

    /* MCIs index */
    .tb2-idx-c-flow { width: 140px; }
    .tb2-idx-td-desc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }

    /* Code lists index */
    .tb2-cl-c-tech { width: 160px; }
    .tb2-cl-c-versions { width: 120px; }
    .tb2-cl-td-tech { max-width: 160px; }

    /* Pagination */
    .tb2-chg-table-foot { flex-direction: column; align-items: flex-start; gap: .75rem; }
    .tb2-pag { flex-wrap: wrap; }
    button.tb2-pag-btn, button.tb2-pag-btn:hover { min-width: 26px; height: 26px; font-size: .68rem; }
}

.tb2-cl-c-tags     { width: 110px; }
.tb2-cl-c-mcis     { width: 70px; }
.tb2-cl-c-values   { width: 70px; }
.tb2-cl-c-help     { width: 36px; }
.tb2-cl-c-versions { width: 190px; }
.tb2-cl-c-action   { width: 48px; }

.tb2-cl-td-help    { text-align: center; }
.tb2-cl-td-mcis    { text-align: right; font-variant-numeric: tabular-nums; color: var(--tb2-grey); }
.tb2-cl-td-values  { text-align: right; font-variant-numeric: tabular-nums; color: var(--tb2-grey); }
.tb2-cl-td-tags    { display: flex; flex-wrap: wrap; gap: .2rem; padding-top: .5rem; padding-bottom: .5rem; }
.tb2-cl-td-tags .badge { font-family: var(--tb2-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); }



/* ── 20quinquies. DOCS — FILTERS ──────────────────────────────────────────── */

.tb2-doc-filters {
    background: var(--tb2-white, #fff);
    border: 1px solid var(--tb2-border, #E5E7EB);
    border-radius: var(--tb2-radius, 12px);
    padding: 1.75rem 2rem;
    margin: 1.75rem 0 1.5rem;
    width: 66.6667%;
}

.tb2-doc-filters form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1.25rem 1.5rem;
}

.tb2-doc-filter-step {
    margin-bottom: 0;
    flex: 0 0 auto;
    min-width: 0;
}

.tb2-doc-filter-step--domain {
    flex: 1 1 auto;
}

.tb2-doc-filter-label {
    display: block;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6b7280;
    margin-bottom: .5rem;
}

/* Segmented control type */
.tb2-doc-type-group {
    display: inline-flex;
    border: 1px solid var(--tb2-border, #E5E7EB);
    border-radius: 8px;
    overflow: hidden;
    background: #f8fafc;
}

.tb2-doc-type-group .btn-check {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
}

.tb2-doc-type-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .6rem 1.4rem;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    background: transparent;
    color: #6b7280;
    margin: 0;
    line-height: 1.2;
    transition: background .15s, color .15s;
}

.tb2-doc-type-group .tb2-doc-type-btn:not(:first-of-type) {
    border-left: 1px solid var(--tb2-border, #E5E7EB);
}

.tb2-doc-type-btn:hover {
    color: var(--tb2-dark);
}

.btn-check:checked + .tb2-doc-type-btn {
    background: var(--tb2-white, #fff);
}

.btn-check:checked + .tb2-doc-type-btn--production {
    color: var(--tb2-primary);
    box-shadow: inset 0 -2px 0 var(--tb2-primary);
}

.btn-check:checked + .tb2-doc-type-btn--claim {
    color: #DC2626;
    box-shadow: inset 0 -2px 0 #DC2626;
}

/* Domain select */
.tb2-doc-domain-select {
    width: 100%;
    height: 42px;
    border: 1px solid var(--tb2-border, #E5E7EB);
    border-radius: 8px;
    padding: 0 .9rem;
    font-size: .9rem;
}

.tb2-doc-domain-select:focus {
    border-color: var(--tb2-primary);
    box-shadow: 0 0 0 3px rgba(0, 71, 171, .12);
    outline: none;
}

/* Footer row : checkbox + bouton, pleine largeur */
.tb2-doc-filter-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-basis: 100%;
    padding-top: 1.1rem;
    border-top: 1px solid var(--tb2-border, #E5E7EB);
    margin-top: .25rem;
}

/* Checkbox custom */
.tb2-doc-check {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    margin: 0;
    font-size: .88rem;
    color: var(--tb2-dark);
    user-select: none;
}

.tb2-doc-check__input {
    width: 16px;
    height: 16px;
    accent-color: var(--tb2-primary);
    cursor: pointer;
}

/* Bouton recherche : AUCUN mouvement, aucune transition de transform */
.tb2-doc-search-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1.5rem;
    height: 42px;
    font-size: .9rem;
    font-weight: 600;
    color: #fff;
    background: var(--tb2-accent, #FF8C5A);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    line-height: 1;
    transition: background .15s ease;
}

.tb2-doc-search-btn:hover,
.tb2-doc-search-btn:focus,
.tb2-doc-search-btn:active {
    background: #FF6B35;
    color: #fff;
    transform: none !important;
    box-shadow: none !important;
    outline: none;
}


/* ── 20quinquies-a. DOCS — RESULTS TABLE ──────────────────────────────────── */

/* Bloc gris de description du domaine : min 20px sous le bloc filtres */
.tb2-doc-filters ~ .alert {
    margin-top: 20px;
    margin-bottom: 1.5rem;
}

.tb2-doc-filters ~ .card {
    width: 100%;
    margin: 1.5rem 0 0;
    border: 1px solid var(--tb2-border, #E5E7EB);
    border-radius: var(--tb2-radius, 12px);
    box-shadow: none;
    overflow: hidden;
}

.tb2-doc-filters ~ .card .card-header {
    background: #f8fafc;
    border-bottom: 1px solid var(--tb2-border, #E5E7EB);
    padding: .9rem 1.25rem;
}

.tb2-doc-filters ~ .card .card-header h2 {
    font-size: 1rem;
}

.tb2-doc-filters ~ .card .table {
    font-size: .88rem;
    margin: 0;
}

.tb2-doc-filters ~ .card .table > :not(caption) > * > * {
    border-bottom-width: 1px;
}

.tb2-doc-filters ~ .card .table thead th {
    background: #f8fafc;
    font-weight: 700;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6b7280;
    padding: .55rem 1rem;
    border-bottom: 2px solid var(--tb2-border, #E5E7EB);
    white-space: nowrap;
}

.tb2-doc-filters ~ .card .table tbody td {
    padding: .6rem 1rem;
    vertical-align: top;
    border-bottom: 1px solid #f3f4f6;
    line-height: 1.45;
}

.tb2-doc-filters ~ .card .table tbody td.font-monospace {
    white-space: nowrap;
    color: var(--tb2-primary);
    font-weight: 600;
}

.tb2-doc-filters ~ .card .table tbody tr:last-child td {
    border-bottom: none;
}

.tb2-doc-filters ~ .card .table tbody tr:hover {
    background: #f9fafb;
}

.tb2-doc-filters ~ .card .table tbody tr.table-light:hover {
    background: #f1f5f9;
}

/* Texte "sélectionnez les deux filtres" centré */
.tb2-doc-filters ~ p.text-muted {
    text-align: center;
    margin-top: 1.5rem;
}


/* ── 20quinquies-b. DOCS CATALOGUE (sections numérotées + cards) ──────────── */

.tb2-doc-section {
    background: var(--tb2-white, #fff);
    border: 1px solid var(--tb2-border, #e5e7eb);
    border-radius: 12px;
    padding: 1.5rem 1.75rem;
    margin: 1.5rem 0;
    box-shadow: none;
}

.tb2-doc-section--soon {
    background: var(--tb2-sort-header-bg, #f8fafc);
    border-style: dashed;
}

.tb2-doc-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--tb2-border, #e5e7eb);
    margin-bottom: 1.25rem;
}

.tb2-doc-section-head-left {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex: 1;
    min-width: 0;
}

.tb2-doc-section-number {
   width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    font-family: "JetBrains Mono", monospace;
    background: rgb(231, 236, 251);
    color: var(--navy);
}

.tb2-doc-section-title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--tb2-dark, #111827);
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}

.tb2-doc-section-pill {
    display: inline-block;
    background: var(--tb2-sort-header-bg, #f3f4f6);
    color: var(--tb2-grey, #6b7280);
    font-size: .7rem;
    font-weight: 600;
    padding: .2rem .55rem;
    border-radius: 999px;
    border: 1px solid var(--tb2-border, #e5e7eb);
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.2;
}

.tb2-doc-section-subtitle {
    margin: .35rem 0 0;
    color: var(--tb2-grey, #6b7280);
    font-size: .9rem;
    line-height: 1.4;
}

.tb2-doc-status {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .65rem;
    border-radius: 20px;
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
    line-height: 1;
}

.tb2-doc-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.tb2-doc-status--ok {
    background: #d1fae5;
    color: #047857;
}
.tb2-doc-status--ok .tb2-doc-status-dot { background: #10b981; }

.tb2-doc-status--wip {
    background: #fef3c7;
    color: #92400e;
}
.tb2-doc-status--wip .tb2-doc-status-dot { background: #f59e0b; }

.tb2-doc-status--soon {
    background: #fee2e2;
    color: #b91c1c;
}
.tb2-doc-status--soon .tb2-doc-status-dot { background: #f87171; }

.tb2-doc-status--inline {
    text-transform: none;
    letter-spacing: 0;
    padding: .15rem .55rem;
    font-size: .68rem;
}

/* — Section grid — */

.tb2-doc-section-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

/* — Card — */

.tb2-doc-card {
    display: flex;
    flex-direction: column;
    padding: 1rem 1.1rem;
    border: 1px solid var(--tb2-border, #e5e7eb);
    border-radius: 8px;
    background: var(--tb2-white, #fff);
    transition: border-color .15s, box-shadow .15s;
}

.tb2-doc-card:not(.tb2-doc-card--soon):hover {
    border-color: var(--tb2-primary, #2563eb);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
}

.tb2-doc-card--soon {
    background: transparent;
    border-style: dashed;
    opacity: .6;
}

.tb2-doc-card-head {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    margin-bottom: .35rem;
}

.tb2-doc-card-code {
    font-family: var(--tb2-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: .72rem;
    color: var(--tb2-grey, #6b7280);
    font-weight: 600;
}

.tb2-doc-card-tag {
    font-size: .65rem;
    color: var(--tb2-grey, #6b7280);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
}

.tb2-doc-card-title {
    margin: 0 0 .35rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--tb2-dark, #111827);
    line-height: 1.2;
}

.tb2-doc-card-desc {
    margin: 0 0 .9rem;
    font-size: .82rem;
    color: var(--tb2-grey, #6b7280);
    line-height: 1.45;
    flex: 1;
}

.tb2-doc-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: auto;
}

.tb2-doc-card-open {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: var(--tb2-primary, #2563eb);
    font-weight: 600;
    font-size: .82rem;
    text-decoration: none;
    margin-left: auto;
}

.tb2-doc-card-open:hover {
    text-decoration: underline;
}

/* Quand la carte est elle-même un <a> (.tb2-doc-card--link),
   neutraliser le soulignement hérité sur tout le contenu. */
a.tb2-doc-card,
a.tb2-doc-card:hover,
a.tb2-doc-card:focus,
a.tb2-doc-card * {
    text-decoration: none;
}
a.tb2-doc-card:hover .tb2-doc-card-open {
    text-decoration: underline;
}

.tb2-doc-card-soon {
    color: var(--tb2-grey, #6b7280);
    font-size: .78rem;
    font-style: italic;
}

@media (max-width: 575.98px) {
    .tb2-doc-section-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .tb2-doc-section {
        padding: 1.1rem 1rem;
    }
}


/* ── 20sexies. ALPHA INDEX (code lists et autres listes) ──────────────────── */

.tb2-alpha-index {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    align-items: center;
    padding: .75rem .9rem;
    margin: 0 0 1rem;
    background: var(--tb2-white, #fff);
    border: 1px solid var(--tb2-border, #e5e7eb);
    border-radius: var(--tb2-radius-sm);
}

.tb2-alpha-index .tb2-chg-pill {
    min-width: 28px;
    text-align: center;
    justify-content: center;
    padding: .22rem .55rem;
    font-size: .78rem;
}

.tb2-alpha-letter {
    font-family: var(--tb2-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-weight: 700;
}

.tb2-alpha-letter--empty {
    opacity: .35;
    cursor: not-allowed !important;
    color: var(--tb2-grey, #6b7280) !important;
    border-color: var(--tb2-border, #e5e7eb) !important;
    background: transparent !important;
}

.tb2-alpha-letter--empty:hover {
    border-color: var(--tb2-border, #e5e7eb) !important;
    color: var(--tb2-grey, #6b7280) !important;
}

/* Icône "?" / "i" d'info pour les listes de codes (popover Bootstrap) */
.tb2-cl-help {
    display: inline-block;
    color: var(--tb2-grey, #6b7280);
    cursor: help;
    font-size: .95rem;
    line-height: 1;
    vertical-align: middle;
    transition: color .15s;
}

.tb2-cl-help:hover,
.tb2-cl-help:focus {
    color: var(--tb2-primary, #0047AB);
    outline: none;
}

/* Popover : largeur lisible pour une définition complète */
.popover { max-width: 360px; }
.popover-body { font-size: .82rem; line-height: 1.4; }

@media (max-width: 575.98px) {
    .tb2-alpha-index { padding: .5rem .6rem; gap: .2rem; }
    .tb2-alpha-index .tb2-chg-pill { min-width: 24px; padding: .15rem .45rem; font-size: .72rem; }
}