/**
 * Composant — Tableau de données (nouveau design validé le 23/09/2026).
 * Documentation : COMPOSANTS.md § « Tableau ».
 *
 * S'applique à tout tableau Markdown d'une page PHP : le moteur
 * (verdon_pages_php_enrichir_html, _moteur/contenu-md.php) l'enveloppe dans
 * <div class="pphp-tableau" role="region" tabindex="0">.
 *
 * Langage visuel commun (DESIGNS.md) :
 *   - en-tête teal #1F5C56, texte blanc DM Sans 600 ;
 *   - lignes alternées sur le fond clair des cartes du Bloc 2 (#F4F7F7) ;
 *   - 1re colonne en teal (comme les titres), rayon 3px, ombre douce teal.
 * Sur mobile, le tableau défile horizontalement et sa 1re colonne reste
 * visible (position: sticky).
 *
 * Les règles historiques du thème parent (.contenu table / th / td :
 * padding 2rem, capitales, fonds teal transparents) sont neutralisées ici.
 */

.pphp-tableau {
    --pphp-teal: #1F5C56;
    --pphp-teal-rgb: 31, 92, 86;
    --pphp-fond: #F4F7F7;
    --pphp-texte: #0F2E2A;

    position: relative;
    margin: 1.5rem 0 1rem;
    overflow-x: auto;
    border: 1px solid rgba(var(--pphp-teal-rgb), 0.15);
    border-radius: 3px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(var(--pphp-teal-rgb), 0.08);
    -webkit-overflow-scrolling: touch;
}

.pphp-tableau:focus-visible {
    outline: 2px solid #3A9C92;
    outline-offset: 3px;
}

.pphp-tableau table {
    width: 100%;
    min-width: 560px;
    margin: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0;
    background: #fff;
    font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

.pphp-tableau th,
.pphp-tableau td {
    padding: 12px 14px !important;
    border: 0 !important;
    font-size: 15px;
    line-height: 1.35 !important;
    text-align: center !important;
    white-space: nowrap;
}

.pphp-tableau thead th {
    white-space: normal;
    background: var(--pphp-teal) !important;
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
}

.pphp-tableau tbody td {
    background: #fff !important;
    color: var(--pphp-texte) !important;
    border-top: 1px solid rgba(var(--pphp-teal-rgb), 0.08) !important;
}

.pphp-tableau tbody tr:nth-child(even) td {
    background: var(--pphp-fond) !important;
}

.pphp-tableau tbody tr:hover td {
    background: rgba(var(--pphp-teal-rgb), 0.07) !important;
}

/* 1re colonne : libellé de ligne, aligné à gauche, figé au défilement */
.pphp-tableau th:first-child,
.pphp-tableau td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    text-align: left !important;
}

.pphp-tableau tbody td:first-child {
    font-weight: 600;
    color: var(--pphp-teal) !important;
    box-shadow: 1px 0 0 rgba(var(--pphp-teal-rgb), 0.12);
}

@media (max-width: 700px) {
    .pphp-tableau {
        margin-left: -4px;
        margin-right: -4px;
    }

    .pphp-tableau th,
    .pphp-tableau td {
        padding: 10px 12px !important;
        font-size: 14px;
    }
}