/* ARTIMUS elements — Table
   Empilement responsive (mobile-first) : sur petit écran, chaque ligne
   devient une carte et chaque cellule porte son en-tête en label.
   Pattern CSS standard (data-label + ::before) — aucun JavaScript. */

.artimus-table--stacked table {
    width: 100%;
}

/* Alignement par colonne (cellules icône) — desktop. */
td.artimus-al-center { text-align: center; }
td.artimus-al-right  { text-align: right; }
td.artimus-al-left   { text-align: left; }

@media (max-width: 639px) {

    /* En-têtes masqués visuellement, conservés pour les lecteurs d'écran. */
    .artimus-table--stacked thead {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        border: 0;
    }

    .artimus-table--stacked table,
    .artimus-table--stacked tbody,
    .artimus-table--stacked tr,
    .artimus-table--stacked td {
        display: block;
        width: 100%;
    }

    /* Chaque ligne = une carte. */
    .artimus-table--stacked tr {
        margin: 0 0 1rem;
        padding: 0.5rem 0.75rem;
        border: 1px solid rgba(0, 0, 0, 0.12);
        border-radius: 6px;
    }

    /* Chaque cellule = label (en-tête) + valeur. */
    .artimus-table--stacked td {
        border: none !important;
        padding: 0.35rem 0;
        display: flex;
        gap: 0.75rem;
        align-items: baseline;
    }

    .artimus-table--stacked td::before {
        content: attr(data-label);
        flex: 0 0 38%;
        font-weight: 500;
        opacity: 0.7;
    }

    /* Cellule sans en-tête : pas de label. */
    .artimus-table--stacked td[data-label=""]::before {
        content: none;
    }

    /* Alignement icône inversé G↔D en mode carte (le label occupe la gauche).
       Desktop Gauche → carte Droite ; Desktop Droite → carte Gauche ; Centre = centre. */
    .artimus-table--stacked td.artimus-al-left > *   { margin-left: auto; }
    .artimus-table--stacked td.artimus-al-center > * { margin-left: auto; margin-right: auto; }
    .artimus-table--stacked td.artimus-al-right > *  { margin-right: auto; }
}