/* ===== Design tokens ===== */
:root{
    --tbl-bg: #ffffff;
    --tbl-text: #1f2a37;
    --tbl-muted: #6b7280;
    --tbl-border: #e5e7eb;
    --tbl-stripe: #f8fafc;
    --tbl-hover: #f1f5f9;
    --tbl-head-bg: #0f172a;
    --tbl-head-text: #ffffff;
    --tbl-accent: #336056; /* ton vert primaire si tu veux lier à ta charte */
    --radius: 12px;
    --shadow: 0 10px 30px rgba(2, 6, 23, 0.08);
}



/* ===== Wrapper pour la responsivité (horizontal scroll) ===== */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: linear-gradient(90deg, transparent, transparent 95%, rgba(0,0,0,.04) 95%)
    var(--tbl-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--tbl-border);
}

/* ===== Style de table ===== */
.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--tbl-bg);
    color: var(--tbl-text);
    min-width: 720px; /* évite la casse des colonnes trop serrées */
    font: 500 14px/1.4 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
}

/* Coins arrondis */
.table thead th:first-child { border-top-left-radius: calc(var(--radius) - 2px); }
.table thead th:last-child  { border-top-right-radius: calc(var(--radius) - 2px); }
.table tbody tr:last-child td:first-child { border-bottom-left-radius: calc(var(--radius) - 2px); }
.table tbody tr:last-child td:last-child  { border-bottom-right-radius: calc(var(--radius) - 2px); }

/* Head sticky pour longues listes */
.table thead th{
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--tbl-head-bg);
    color: var(--tbl-head-text);
    text-align: left;
    font-weight: 700;
    letter-spacing: .02em;
    border-bottom: 1px solid var(--tbl-border);
    padding: 14px 16px;
    white-space: nowrap;
}

/* Cellules */
.table td{
    padding: 14px 16px;
    border-bottom: 1px solid var(--tbl-border);
    vertical-align: middle;
}

/* Bordures externes si tu utilises .table-bordered */
.table.table-bordered td,
.table.table-bordered th{
    border-right: 1px solid var(--tbl-border);
}
.table.table-bordered tr > *:last-child{
    border-right: none;
}

/* Zébrage si tu utilises .table-striped */
.table.table-striped tbody tr:nth-child(odd){
    background: var(--tbl-stripe);
}

/* Hover doux */
.table tbody tr:hover{
    background: var(--tbl-hover);
}

/* Alignements utiles (optionnels) */
.table td:nth-child(3),
.table td:nth-child(4){
    text-align: right; /* Poids / Taille alignés */
}

/* Petites badges pour “Sexe” (optionnel) */
.table td:nth-child(2){
    font-weight: 600;
    color: var(--tbl-accent);
}

/* Texte tronqué propre si très long */
.table td,
.table th{
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Focus visible pour accessibilité */
.table-responsive:focus-within .table tbody tr:hover,
.table-responsive:focus-within .table td:focus{
    outline: 2px solid color-mix(in oklab, var(--tbl-accent) 60%, white);
    outline-offset: -2px;
}

/* ===== Breakpoints ===== */
/* Padding un peu plus compact en < 640px */
@media (max-width: 640px){
    .table thead th,
    .table td{ padding: 12px 14px; }
    .table { min-width: 640px; }
}

/* Ultra compact (très petits écrans) */
@media (max-width: 390px){
    .table thead th,
    .table td{ padding: 10px 12px; }
}