/* ============================================================
   RTA – Fixed Proportional Columns  |  rta-fixed.css
   ============================================================ */

/* ---------- Règles communes (toutes tailles) ---------- */
table.rta-fixed {
    width: 100%;
    table-layout: fixed;   /* clé : force le respect des largeurs */
    border-collapse: collapse;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

table.rta-fixed th,
table.rta-fixed td {
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;          /* césure automatique si disponible */
    vertical-align: top;
}

/* ============================================================
   Répartition automatique selon le nombre de colonnes
   détecté en JS (attribut data-cols).
   On couvre les cas 2, 3, 4 et 5+ colonnes.
   ============================================================ */

/* 2 colonnes : 38 % label / 62 % valeur — idéal pour votre tableau */
table.rta-fixed[data-cols="2"] th:first-child,
table.rta-fixed[data-cols="2"] td:first-child { width: 38%; }

table.rta-fixed[data-cols="2"] th:last-child,
table.rta-fixed[data-cols="2"] td:last-child  { width: 62%; }

/* 3 colonnes : répartition équilibrée légèrement pondérée */
table.rta-fixed[data-cols="3"] th:nth-child(1),
table.rta-fixed[data-cols="3"] td:nth-child(1) { width: 30%; }

table.rta-fixed[data-cols="3"] th:nth-child(2),
table.rta-fixed[data-cols="3"] td:nth-child(2) { width: 35%; }

table.rta-fixed[data-cols="3"] th:nth-child(3),
table.rta-fixed[data-cols="3"] td:nth-child(3) { width: 35%; }

/* 4 colonnes : 25 % chacune */
table.rta-fixed[data-cols="4"] th,
table.rta-fixed[data-cols="4"] td { width: 25%; }

/* 5 colonnes et plus : 20 % chacune (le navigateur ajuste) */
table.rta-fixed[data-cols="5"] th,
table.rta-fixed[data-cols="5"] td { width: 20%; }


/* ============================================================
   MOBILE  ≤ 768 px
   On réduit la typographie pour maximiser l'espace disponible.
   La structure reste intacte.
   ============================================================ */
@media (max-width: 768px) {

    table.rta-fixed {
        font-size: 0.82em;  /* légèrement plus petit pour gagner de la place */
        line-height: 1.45;
    }

    table.rta-fixed th,
    table.rta-fixed td {
        padding: 6px 8px;   /* padding réduit vs desktop */
    }
}

/* ============================================================
   TRÈS PETIT MOBILE  ≤ 400 px
   On serre encore un peu plus.
   ============================================================ */
@media (max-width: 400px) {

    table.rta-fixed {
        font-size: 0.76em;
    }

    table.rta-fixed th,
    table.rta-fixed td {
        padding: 5px 6px;
    }
}