/* ============================================================
   topstrat-compat.css
   Compatibilité BS3/AdminLTE2 → BS5/AdminLTE4.
   Permet aux WUC encore en markup ancien d'afficher un rendu
   cohérent sous le nouveau master AdminLTE 4 + Bootstrap 5.
   À retirer une fois TOUS les WUC migrés.
   ============================================================ */

/* ============================================================
   THÈME TOPSTRAT — couleurs centralisées.
   Pour rebrander : ajuster UNIQUEMENT ce bloc :root
   (couleurs reprises du logo TopStrat — magenta/fuchsia).
   Chargé par les 3 masters → variables dispo partout.
   ============================================================ */
:root {
    --ts-sidebar-w: 260px;

    /* Accent de marque TopStrat (magenta/fuchsia du logo) */
    --ts-accent: #cc00cc;            /* couleur principale */
    --ts-accent-dark: #99008f;       /* variante foncée (dégradés, hover) */
    --ts-accent-light: #e060d8;      /* variante claire */

    /* Sidebar */
    --ts-sidebar-bg-top: #a3009b;
    --ts-sidebar-bg-bottom: #6e006e;
    --ts-sidebar-text: #f6daf2;
    --ts-sidebar-text-muted: #e2a0da;

    /* Encre / titres */
    --ts-ink: #37475a;
}

/* ----------- Mapping AdminLTE 2 (.box*) → AdminLTE 4 (.card*) ----------- */
.box {
    background:#fff;
    border-radius:.5rem;
    box-shadow:0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.075);
    margin-bottom:1rem;
    border-top:3px solid #d2d6de;
    position:relative;
}
.box.box-default { border-top-color:#d2d6de; }
.box.box-primary { border-top-color:#0d6efd; }
.box.box-info    { border-top-color:#0dcaf0; }
.box.box-success { border-top-color:#198754; }
.box.box-warning { border-top-color:#ffc107; }
.box.box-danger  { border-top-color:var(--ts-accent); }

.box-header {
    padding:.5rem 1rem;
    border-bottom:1px solid #f4f4f4;
    display:flex;
    align-items:center;
    gap:.5rem;
}
.box-header > .box-title,
.box-header > h3.box-title {
    font-size:1rem;
    font-weight:700;
    color:var(--ts-ink);
    margin:0;
    flex:1 1 auto;
}
.box-header .box-tools { margin-left:auto; }
.box-body  { padding:.75rem 1rem; }
.box-footer{ padding:.5rem 1rem; border-top:1px solid #f4f4f4; }

/* ----------- Mapping flottants BS3 → BS5 (sans réécrire le markup) ----------- */
.pull-left  { float:left  !important; }
.pull-right { float:right !important; }

/* ----------- Anciennes classes utilitaires BS3 conservées ----------- */
.text-muted { color:var(--bs-secondary-color, #6c757d) !important; }

/* AdminLTE 2 : .text-bold (supprimée en BS5/AdminLTE4 → équivalent de .fw-bold) */
.text-bold,
.text-bold.table td,
.text-bold.table th { font-weight:700; }

/* AdminLTE 2 — petites classes héritées qu'on a vues dans le projet */
.GrisGras { color:#6c757d; font-weight:600; }

/* ----------- Sections / titres maison (page-header) ----------- */
.page-header {
    margin:0 0 1rem;
    padding-bottom:.5rem;
    border-bottom:1px solid #dee2e6;
    font-weight:700;
}
.page-header > small { color:var(--bs-secondary-color); font-weight:400; }

/* ============================================================
   Bandeau d'en-tête (inspiré du mockup AdminLTE 4)
   ============================================================ */
.topstrat-banner {
    background: linear-gradient(135deg, var(--ts-accent-dark) 0%, var(--ts-accent) 65%, var(--ts-accent-light) 100%);
    color: #fff;
    border-radius: .5rem;
}
.topstrat-banner .fb-meta {
    color: #f7d6f2;
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.topstrat-banner .fb-title {
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
}
.topstrat-banner .fb-sub {
    font-size: .85rem;
    color: rgba(255,255,255,.85);
}
.topstrat-banner .fb-cycle {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
}
.topstrat-banner .fb-team {
    font-size: 1.05rem;
    font-weight: 600;
    color: #fff;
}
.topstrat-banner .fb-divider {
    width: 1px;
    align-self: stretch;
    background: rgba(255,255,255,.3);
}
.topstrat-banner .form-select { background-color: rgba(255,255,255,.95); }

/* ============================================================
   Carte de décision (style TerStrat) — produit + entreprise
   En-tête en dégradé magenta + vignette ronde, corps compact.
   ============================================================ */
.ts-deccard {
    border: 0;
    border-radius: .6rem;
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease;
}
.ts-deccard:hover {
    transform: translateY(-3px);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.12) !important;
}
.ts-dechead {
    background: linear-gradient(135deg, var(--ts-accent-dark) 0%, var(--ts-accent) 100%);
    position: relative;
}
.ts-dechead .ts-dechead-ic {
    width: 38px; height: 38px; border-radius: 50%;
    background: #fff; color: var(--ts-accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; flex: 0 0 auto; border: 2px solid #fff;
}
/* Corps compact : libellés discrets, lignes de cadrage à droite */
/* Panneaux asp:Panel qui regroupent des colonnes Bootstrap : display:contents
   les rend transparents au layout pour que les .col-* redeviennent enfants
   directs de la .row (sinon colonnes tassées à gauche, largeur non occupée). */
.d-contents { display: contents; }
/* La gouttière BS5 (.row > *) cible le panel display:contents (sans boîte) et non
   la .col imbriquée -> on reporte le padding de gouttière sur la vraie colonne. */
.d-contents > [class*="col-"] {
    padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
    padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5);
    margin-top: var(--bs-gutter-y, 0);
}

.ts-deccard .card-body { padding: .6rem .7rem; }
.ts-deccard .col-form-label { color: #5a5a63; }
.ts-cad { font-size: .8rem; color: #9a9aa2; line-height: 1.2; min-height: 0; }
.ts-cad kbd { font-size: .72rem; }
/* En mode résultats, EchellePrix est masqué : le <kbd> reste vide et s'affiche
   comme un pavé noir. On le cache quand il n'a aucun contenu. */
.ts-cad kbd:empty { display: none; }
/* Ligne de cadrage entièrement vide : on la replie. */
.ts-cad:empty { display: none; }
/* Valeur de résultat affichée dans la colonne de droite, alignée sur le titre.
   Masquée (donc sans espace) quand vide, c.-à-d. en mode décision. */
.ts-val { display: block; font-size: .9rem; font-weight: 600; color: var(--ts-ink); line-height: 1.25; }
.ts-val:empty { display: none; }

/* ============================================================
   Carte de décision Produit (wuc_decision_produit) — relook
   ============================================================ */
.ts-prod-card .card-body { padding: 1rem 1.1rem; }
.ts-prod-head {
    display: flex; align-items: center; gap: .8rem;
    padding-bottom: .7rem; margin-bottom: .5rem;
    border-bottom: 1px solid #eee;
}
.ts-prod-img {
    width: 64px; height: 64px; border-radius: 14px;
    object-fit: cover; flex: 0 0 auto; background: #f3eef3;
    box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.ts-prod-name { font-size: 1.1rem; font-weight: 700; color: var(--ts-ink); line-height: 1.15; margin: 0; }
.ts-prod-name .sub { display:block; font-size:.72rem; font-weight:400; color:#9a9aa2; text-transform:uppercase; letter-spacing:.05em; }

.ts-prod-table { width: 100%; margin: 0; }
.ts-prod-table td { padding: .32rem .3rem; vertical-align: middle; border-bottom: 1px solid #f4f4f6; }
.ts-prod-table tr:last-child td { border-bottom: 0; }
.ts-prod-table .h {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
    color: #9a9aa2; font-weight: 600; padding-bottom: .25rem;
}
.ts-prod-table .lbl { color: #4f4f57; font-size: .86rem; white-space: nowrap; }
.ts-prod-table .cad { color: #9a9aa2; font-size: .74rem; text-align: end; white-space: nowrap; line-height: 1.1; }
.ts-prod-table .numericbox, .ts-prod-table .form-select { max-width: 120px; margin: 0 auto; }
.ts-prod-table .lab-msg { display:block; font-size:.72rem; color:#dc3545; }
.ts-prod-rd td { background: #faf2fb; }
.ts-prod-rd-title td {
    color: var(--ts-accent-dark); font-weight: 700; font-size: .8rem;
    text-transform: uppercase; letter-spacing: .04em;
    border-bottom: 0 !important; padding-top: .6rem;
}

/* ============================================================
   Titres de section (Décisions, Activité commerciale, Stocks, …)
   Style "marquant" inspiré du mockup
   ============================================================ */
.topstrat-section-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 1.25rem 0 .75rem;
    padding-bottom: .25rem;
    border-bottom: 2px solid var(--ts-accent);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ts-ink);
}
.topstrat-section-title > i { color: var(--ts-accent); font-size: 1.25rem; }

/* ============================================================
   Cartes AdminLTE 4 — variantes de bordure supérieure colorée
   .card-outline.card-{color}  →  bordure top épaisse colorée
   ============================================================ */
.card-outline.card-danger  { border-top:3px solid var(--ts-accent); }
.card-outline.card-primary { border-top:3px solid #0d6efd; }
.card-outline.card-info    { border-top:3px solid #0dcaf0; }
.card-outline.card-success { border-top:3px solid #198754; }
.card-outline.card-warning { border-top:3px solid #ffc107; }
.card-outline.card-secondary { border-top:3px solid #6c757d; }
.card-outline .card-title { color:var(--ts-ink); font-weight:700; font-size:1rem; }
.card-outline .card-header { background:#fff; border-bottom:2px solid #f1f3f6; }

/* ----------- Skins rouges AdminLTE 2 — neutralisés en BS5 ----------- */
.skin-red, .skin-red-light { /* no-op : on n'utilise plus de skin global */ }

/* ----------- Hidden/visible BS3 → équivalents d-* BS5 (au cas où) ----------- */
.hidden-xs { /* BS5 utilise d-* mais on garde un mapping basique */ }
@media (max-width:575.98px) { .hidden-xs { display:none !important; } }
@media (min-width:576px) and (max-width:767.98px) { .hidden-sm { display:none !important; } }
@media (min-width:768px) and (max-width:991.98px) { .hidden-md { display:none !important; } }
@media (min-width:992px) { .hidden-lg { display:none !important; } }

/* ============================================================
   Tableau "Produit" (dossier mensuel)
   Masquage d'une colonne produit non autorisée — table unique
   .hide-p1 → masque la colonne produit 1 (cellules .cp1)
   .hide-p2 → masque la colonne produit 2 (cellules .cp2)
   ============================================================ */
.topstrat-prod-table.hide-p1 .cp1 { display:none; }
.topstrat-prod-table.hide-p2 .cp2 { display:none; }

/* ============================================================
   Bandeau KPI (small-box) — inspiré du mockup AdminLTE 4
   ============================================================ */
.small-box {
    border-radius:.5rem;
    overflow:hidden;
    padding:1rem 1.1rem;
    color:#fff;
    position:relative;
}
.small-box .ico {
    position:absolute;
    right:.7rem;
    top:.5rem;
    font-size:3.5rem;
    opacity:.25;
}
.small-box .v { font-size:1.8rem; font-weight:700; line-height:1; }
.small-box .l { font-size:.85rem; opacity:.9; margin-top:.25rem; }
.small-box .more {
    background:rgba(0,0,0,.18);
    color:#fff;
    padding:.25rem .6rem;
    font-size:.8rem;
    display:inline-block;
    margin-top:.5rem;
    border-radius:999px;
}
.num { font-variant-numeric:tabular-nums; }
.text-money::after { content:" €"; opacity:.7; }

/* Variantes de couleur des KPI (small-box) */
.small-box.sb-treso { background:#0d6efd; }
.small-box.sb-rex   { background:#198754; }
.small-box.sb-pdm   { background:var(--ts-accent); }
.small-box.sb-rank  { background:#6f42c1; }
.small-box.sb-neg   { background:#dc3545; }   /* résultat négatif */

/* ============================================================
   Dossier de résultats — léger espacement vertical entre cartes.
   En BS5 .card n'a pas de marge par défaut : les cartes empilées
   se collent. On ajoute une petite marge basse, scopée au dossier.
   ============================================================ */
.ts-dossier .card { margin-bottom: 1rem; }

/* ============================================================
   Études de marché souscrites (dossier mensuel) — switches BS5
   de base (AdminLTE). Affichage en lecture seule : on évite
   l'attribut "disabled" (qui grise les deux états et les rend
   indiscernables) et on neutralise simplement l'interaction.
   Le switch garde son rendu natif : vert si commandée, gris sinon.
   ============================================================ */
.topstrat-em-readonly {
    pointer-events:none;        /* lecture seule : pas de clic */
    cursor:default;
}

/* ============================================================
   Tuiles de sélection des études de marché (page décisions)
   ============================================================ */
.em-tile {
    position:relative; cursor:pointer;
    border:2px solid #e9ecef; border-radius:.6rem;
    padding:.85rem .5rem .7rem; text-align:center;
    height:100%; background:#fff;
    transition:border-color .15s, background .15s;
}
.em-tile:hover { border-color:#ffd35a; }
.em-tile.selected { border-color:#ffc107; background:#fff9e6; }
.em-tile.em-tile-disabled { cursor:not-allowed; opacity:.6; }
.em-tile-cb { display:none; }
.em-tile-ico { font-size:1.6rem; color:#9aa4b2; }
.em-tile.selected .em-tile-ico { color:#e0a800; }
.em-tile-name { font-weight:600; color:var(--ts-ink); font-size:.85rem; margin-top:.3rem; line-height:1.2; }
.em-check {
    position:absolute; top:.35rem; right:.35rem;
    width:1.3rem; height:1.3rem; border-radius:50%;
    background:#ffc107; color:#fff; display:none;
    align-items:center; justify-content:center; font-size:.8rem;
}
.em-tile.selected .em-check { display:flex; }

/* ============================================================
   wuc_options — matrice "Paramètres des équipes"
   Tableau de tables juxtaposées : 1re colonne = libellés (figée),
   colonnes suivantes = 1 équipe chacune.
   ============================================================ */
.ts-options { padding-bottom:.25rem; }
.ts-options-table { border-collapse:separate; border-spacing:0; }
.ts-options-table > tbody > tr > td { padding:0; vertical-align:top; }

/* Colonne de libellés figée au défilement horizontal */
.ts-options-label {
    position:sticky; left:0; z-index:2;
    min-width:215px; max-width:215px;
    background:#fff; box-shadow:3px 0 6px rgba(0,0,0,.07);
}

/* Tables internes (libellés + équipes) : hauteurs de lignes alignées */
.ts-options .opt-inner td {
    height:34px; padding:2px 8px;
    font-size:.82rem; line-height:1.1; vertical-align:middle;
}
.ts-options .opt-inner a { color:var(--ts-ink); text-decoration:none; }
.ts-options .opt-inner a:hover { color:var(--ts-accent); text-decoration:underline; }

/* Lignes d'en-tête (# / Raison sociale) */
.ts-options tr.opt-head td {
    background:var(--ts-ink); color:#fff; font-weight:700; text-align:center;
}
.ts-options tr.opt-head a { color:#fff; }

/* Bandeaux de catégorie (Accès / Affichage / Décisions) */
.ts-options tr.opt-cat td {
    background:#f1d6d9; color:var(--ts-accent-dark);
    font-weight:700; text-transform:uppercase;
    font-size:.68rem; letter-spacing:.04em;
}

/* Cases à cocher plus lisibles */
.ts-options input[type=checkbox] {
    width:1.05rem; height:1.05rem;
    accent-color:#198754; cursor:pointer;
}

/* Surbrillance de la colonne équipe survolée */
.ts-options-team:hover { background:#fff7e6; }

/* ============================================================
   Projections — tables juxtaposées (libellés + colonnes produit)
   Le bloc juxtapose une table de libellés et N tables produit
   côte à côte ; sans hauteur de ligne fixe les lignes dérivent
   d'une colonne à l'autre. On fige la hauteur de ligne pour
   aligner libellés et valeurs (modèle FirStrat .opt-inner).
   ============================================================ */
.ts-proj-juxta { width:100%; }
.ts-proj-juxta > tbody > tr > td { vertical-align:top; }
.ts-proj-juxta .table { margin-bottom:0; }
.ts-proj-juxta .table > tbody > tr > td {
    height:1.85rem; line-height:1.1; vertical-align:middle;
}

/* ============================================================
   Tableaux larges "équipes" — wuc_view_decisions
   1re colonne (EQUIPE) figée, en-têtes sombres, survol de ligne.
   ============================================================ */
.ts-team-table { border-collapse:separate; border-spacing:0; }
.ts-team-table thead th,
.ts-team-table thead td {
    background:var(--ts-ink); color:#fff; font-weight:700;
    text-align:center; vertical-align:middle;
    border-color:#2c3a4a; white-space:nowrap;
}
.ts-team-table thead a { color:#fff; text-decoration:none; }
.ts-team-table thead a:hover { color:#f7d6f2; text-decoration:underline; }
.ts-team-table tbody td { vertical-align:middle; white-space:nowrap; }

/* Colonne EQUIPE figée au défilement horizontal */
.ts-team-table th:first-child,
.ts-team-table td:first-child {
    position:sticky; left:0; z-index:1;
    background:#fff; text-align:start; font-weight:600;
    box-shadow:3px 0 6px rgba(0,0,0,.07);
}
.ts-team-table thead th:first-child,
.ts-team-table thead td:first-child { background:var(--ts-ink); z-index:3; }

/* Survol de ligne (y compris la colonne figée) */
.ts-team-table tbody tr:hover td,
.ts-team-table tbody tr:hover td:first-child { background:#fff7e6; }

/* Cases à cocher plus lisibles */
.ts-team-table input[type=checkbox] {
    width:1.05rem; height:1.05rem;
    accent-color:#198754; cursor:pointer;
}

/* ============================================================
   wuc_tab_results — accès aux dossiers de résultats (route TAR)
   Liens de cycle présentés en tuiles cliquables.
   ============================================================ */
.ts-results-table > tbody > tr > td { padding:.3rem; }
.ts-results-table .shield { font-size:1.4rem; }

.lienResult a {
    display:inline-flex; flex-direction:column;
    align-items:center; justify-content:center; gap:.2rem;
    min-width:84px; padding:.5rem .6rem;
    border:1px solid #dee2e6; border-radius:.55rem;
    background:#fff; color:var(--ts-ink);
    font-size:.82rem; font-weight:600; text-decoration:none;
    transition:border-color .12s, color .12s, box-shadow .12s, transform .12s;
}
.lienResult a:hover {
    border-color:var(--ts-accent); color:var(--ts-accent);
    box-shadow:0 3px 8px rgba(0,0,0,.1); transform:translateY(-1px);
}
.lienResult a i { font-size:1.25rem; color:var(--ts-accent); }
.lienResult br { display:none; }

/* col-xs-* (BS3) → équivalent col-* BS5 */
[class*="col-xs-1"]  { width:8.333333%; float:left; padding:0 .75rem; }
[class*="col-xs-2"]  { width:16.666667%; float:left; padding:0 .75rem; }
[class*="col-xs-3"]  { width:25%; float:left; padding:0 .75rem; }
[class*="col-xs-4"]  { width:33.333333%; float:left; padding:0 .75rem; }
[class*="col-xs-6"]  { width:50%; float:left; padding:0 .75rem; }
[class*="col-xs-8"]  { width:66.666667%; float:left; padding:0 .75rem; }
[class*="col-xs-12"] { width:100%; float:left; padding:0 .75rem; }

/* Aide de jeu — accordéon natif <details> du volet #tsAideOffcanvas (thème TopStrat) */
.ts-aide-btn { line-height: 1; }
.ts-aide-item { border: 1px solid #e8b3e0; border-radius: 8px; margin-bottom: 8px; overflow: hidden; }
.ts-aide-item > summary { cursor: pointer; padding: 10px 12px; font-weight: 500; color: var(--ts-accent-dark); background: #fbf0fb; display: flex; align-items: center; gap: 8px; list-style: none; }
.ts-aide-item > summary::-webkit-details-marker { display: none; }
.ts-aide-item > summary > span { flex: 1 1 auto; }
.ts-aide-chevron { transition: transform .2s; }
.ts-aide-item[open] > summary .ts-aide-chevron { transform: rotate(180deg); }
.ts-aide-item > .ts-aide-corps { padding: 10px 12px; }

/* ============================================================
   Délai de paiement (wuc_decision_produit) — button group BS5.
   Reproduit le composant natif "btn-group + btn-check + btn-outline"
   d'AdminLTE 4 : asp:RadioButtonList RepeatLayout="Flow" rend une
   suite <input type=radio><label for=..>. On masque l'input (comme
   .btn-check) et on stylise le label exactement comme un .btn .btn-sm
   .btn-outline-primary, jointifs façon .btn-group.
   ============================================================ */
/* Le cadre (bordure + coins arrondis) est porté par le CONTENEUR, et
   overflow:hidden « rogne » les coins des boutons d'extrémité. Comme
   chaque asp:ListItem porte un title=, ASP.NET emballe chaque couple
   <input><label> dans un <span> : on ne peut donc pas se reposer sur
   l'ordre des <label>. Le conteneur gère l'arrondi, les boutons ne
   portent qu'un simple séparateur à gauche → coins internes parfaitement
   droits, quel que soit l'emballage. */
.ts-dp-seg {
    display: inline-flex; flex-wrap: wrap; vertical-align: middle;
    border: 1px solid var(--ts-accent);
    border-radius: .25rem;
    overflow: hidden;
}
.ts-dp-seg input[type=radio] {
    position: absolute; clip: rect(0, 0, 0, 0);
    pointer-events: none; width: 1px; height: 1px; opacity: 0;
}
.ts-dp-seg label {
    margin: 0; cursor: pointer;
    padding: .25rem .6rem;             /* .btn-sm */
    font-size: .875rem; font-weight: 400; line-height: 1.5;
    color: var(--ts-accent-dark); background-color: transparent;
    border: 0; border-left: 1px solid var(--ts-accent); border-radius: 0;
    transition: color .15s ease-in-out, background-color .15s ease-in-out;
}
/* Pas de séparateur devant le premier bouton (emballé ou non dans un span). */
.ts-dp-seg > span:first-child label,
.ts-dp-seg > label:first-child { border-left: 0; }
.ts-dp-seg label:hover { color: #fff; background-color: var(--ts-accent); }
.ts-dp-seg input[type=radio]:checked + label { color: #fff; background-color: var(--ts-accent); }
.ts-dp-seg input[type=radio]:focus-visible + label {
    box-shadow: inset 0 0 0 2px rgba(204, 0, 204, .45);
}

/* ============================================================
   form-range au thème TopStrat — curseur (thumb) magenta.
   Classe .ts-range posée sur l'input ; accent-color recolore le
   thumb + la piste sur navigateurs modernes, et on force aussi
   les pseudo-éléments vendor pour le thumb (priorité sur BS5).
   ============================================================ */
.ts-range { accent-color: var(--ts-accent); }
.ts-range::-webkit-slider-thumb { background-color: var(--ts-accent); }
.ts-range::-moz-range-thumb { background-color: var(--ts-accent); border-color: var(--ts-accent); }
.ts-range::-webkit-slider-thumb:active { background-color: var(--ts-accent-light); }
.ts-range::-moz-range-thumb:active { background-color: var(--ts-accent-light); }
.ts-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 1px #fff, 0 0 0 .25rem rgba(204, 0, 204, .25); }
.ts-range:focus::-moz-range-thumb { box-shadow: 0 0 0 1px #fff, 0 0 0 .25rem rgba(204, 0, 204, .25); }

/* ============================================================
   wuc_view_all_decisions — tableaux de synthèse des décisions.
   En-têtes lisibles, nombres alignés à droite (chiffres tabulaires),
   survol de ligne, en-têtes de groupe sombres.
   ============================================================ */
.ts-vad { margin-bottom: 0; }
.ts-vad thead th {
    background: #f7eef7; color: var(--ts-accent-dark);
    font-size: .72rem; text-transform: uppercase; letter-spacing: .03em;
    font-weight: 700; white-space: nowrap; vertical-align: middle;
    border-bottom: 2px solid var(--ts-accent);
}
.ts-vad thead th.vad-grp {
    background: var(--ts-ink); color: #fff; text-align: center;
    border-bottom: 1px solid #2c3a4a; letter-spacing: .04em;
}
.ts-vad thead th a { color: inherit; text-decoration: none; }
.ts-vad thead th a:hover { color: var(--ts-accent); text-decoration: underline; }
.ts-vad td { vertical-align: middle; }
.ts-vad td.text-end, .ts-vad th.text-end { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ts-vad .vad-eq { font-weight: 600; color: var(--ts-ink); white-space: nowrap; }
.ts-vad tbody tr:hover > td { background: #fbf4fb; }
.ts-vad .vad-check { color: #198754; font-size: 1rem; }
.ts-vad .vad-empty { color: #ced4da; }

/* ============================================================
   Synthèses de l'Agent IA (HTML généré : <h4>/<ul>/<li>/<p>)
   Rendu partagé étudiant (wuc_ia_etudiant) + animateur (wuc_ia_admin).
   Reprend la mise en page validée sur le mockup : titres de section
   en magenta soulignés, listes aérées, texte lisible.
   ============================================================ */
.ia-audit { color: var(--ts-ink); line-height: 1.55; }
.ia-audit > :first-child { margin-top: 0; }
.ia-audit > :last-child { margin-bottom: 0; }
.ia-audit h4 {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--ts-accent);
    margin: 1.15rem 0 .55rem;
    padding-bottom: .28rem;
    border-bottom: 1px solid #f0e0ef;
}
.ia-audit h4 > i { color: var(--ts-accent); margin-right: .35rem; }
.ia-audit ul { margin: 0 0 .7rem; padding-left: 1.25rem; }
.ia-audit li { margin-bottom: .35rem; }
.ia-audit p  { margin: .35rem 0 .7rem; }
.ia-audit strong { color: var(--ts-ink); }
/* Pastilles de gravité dans la synthèse animateur : espacement propre autour du badge */
.ia-audit .badge { vertical-align: baseline; margin: 0 .35rem; font-weight: 600; }
.ia-audit li > .badge:first-child { margin-left: 0; }