/**
 * Tableaux — le bloc Tableau natif (core/table), façade et canevas.
 *
 * Chargée par inc/leb-tableaux/leb-tableaux.php : en façade avec le bloc
 * (wp_enqueue_block_style), dans l'iframe de l'éditeur pour la fidélité.
 *
 * Tokens à brancher par le thème enfant (sur :root ou plus près) — chacun a
 * un repli sur les presets du socle, puis sur la couleur du texte :
 *   --leb-tableau-filet          filets entre les lignes
 *   --leb-tableau-filet-colonne  filets entre les colonnes (défaut : le
 *                                filet des lignes)
 *   --leb-tableau-filet-fort     filet sous l'en-tête, contour des fiches
 *   --leb-tableau-entete-fond    fond de l'en-tête (laisser transparent-ish :
 *                                l'ombre du défilement doit passer dessous)
 *   --leb-tableau-entete-texte   texte de l'en-tête
 *   --leb-tableau-alternance     fond d'une ligne sur deux (idem)
 *   --leb-tableau-intitule       intitulés des fiches repliées (petits,
 *                                atténués ; défaut : texte à 62 %)
 *   --leb-tableau-legende        texte de la légende
 *   --leb-tableau-fond           fond de la page derrière le tableau
 *   --leb-tableau-ombre          ombre « il reste du contenu »
 *   --leb-tableau-rayon          rayon des fiches repliées
 *   --leb-tableau-repli          largeur sous laquelle le tableau se replie :
 *                                fixée dans la container query (une propriété
 *                                personnalisée n'y est pas lisible), 30rem ;
 *                                sous 24rem, l'intitulé passe au-dessus.
 *
 * Aucune media query : le repli suit la largeur du CONTENEUR du tableau
 * (la colonne texte d'un Texte + image se replie avant la page entière).
 */

/* ------------------------------------------------------------ Le cadre */

.wp-block-table {
    container: leb-tableau / inline-size;
    /* Le repli natif du cœur : jamais la page qui défile de côté. */
    overflow-x: auto;
    max-inline-size: 100%;
    /* Conteneur de taille : sa largeur ne vient plus de son contenu. Dans une
       colonne flex alignée au début (colonne texte d'un Texte + image), il
       s'étire donc explicitement, sinon il tomberait à zéro. */
    align-self: stretch;
}

.wp-block-table table {
    inline-size: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
    line-height: 1.5;
}

/* Le cœur pose un contour plein sur chaque cellule et 3px sous l'en-tête :
   remplacés par des filets horizontaux, plus lisibles. */
.wp-block-table table thead,
.wp-block-table table tfoot {
    border: 0;
}

.wp-block-table table :is(th, td) {
    padding-block: clamp(0.5rem, 0.35rem + 0.6cqi, 0.875rem);
    padding-inline: clamp(0.625rem, 0.4rem + 0.9cqi, 1.125rem);
    border: 0;
    border-block-end: 1px solid var(--leb-tableau-filet, var(--wp--preset--color--gray-300, color-mix(in srgb, currentColor 16%, transparent)));
    text-align: start;
    vertical-align: top;
}

/* Séparateurs de colonnes : un filet vertical léger, pour voir où commence
   la colonne suivante sans avoir à sélectionner le tableau. */
.wp-block-table table tr > :is(th, td) + :is(th, td) {
    border-inline-start: 1px solid var(--leb-tableau-filet-colonne, var(--leb-tableau-filet, var(--wp--preset--color--gray-300, color-mix(in srgb, currentColor 16%, transparent))));
}

.wp-block-table table thead :is(th, td) {
    border-block-end: 2px solid var(--leb-tableau-filet-fort, var(--wp--preset--color--gray-500, color-mix(in srgb, currentColor 45%, transparent)));
    background: var(--leb-tableau-entete-fond, color-mix(in srgb, var(--wp--preset--color--primary, currentColor) 7%, transparent));
    color: var(--leb-tableau-entete-texte, var(--wp--preset--color--dark, currentColor));
    font-weight: 600;
    vertical-align: bottom;
}

/* Première colonne en en-tête (option de l'éditeur, `th scope="row"`) :
   chaque ligne est nommée par sa première cellule. */
.wp-block-table table :is(tbody, tfoot) th[scope="row"] {
    background: var(--leb-tableau-entete-fond, color-mix(in srgb, var(--wp--preset--color--primary, currentColor) 7%, transparent));
    color: var(--leb-tableau-entete-texte, var(--wp--preset--color--dark, currentColor));
    font-weight: 600;
}

.wp-block-table table tbody tr:nth-child(even) {
    background: var(--leb-tableau-alternance, color-mix(in srgb, currentColor 4%, transparent));
}

.wp-block-table table tfoot :is(th, td) {
    border-block-start: 2px solid var(--leb-tableau-filet-fort, var(--wp--preset--color--gray-500, color-mix(in srgb, currentColor 45%, transparent)));
    border-block-end: 0;
    font-weight: 600;
}

/* Alignements choisis dans l'éditeur (attribut align des cellules). */
.wp-block-table table :is(th, td).has-text-align-center {
    text-align: center;
}

.wp-block-table table :is(th, td).has-text-align-right {
    text-align: end;
}

.wp-block-table :where(figcaption) {
    margin-block-start: 0.75em;
    color: var(--leb-tableau-legende, color-mix(in srgb, currentColor 70%, transparent));
    font-size: var(--wp--preset--font-size--sm, 0.875em);
    text-align: start;
}

/* ------------------------------------------- Repli en fiches (étroit) */

/*
 * Seulement quand les cellules portent leur intitulé (posé au rendu PHP
 * depuis la ligne d'en-tête) : sans en-tête, ou dans l'éditeur, le tableau
 * garde sa grille et défile dans son cadre plutôt que de perdre ses repères.
 */
@container leb-tableau (inline-size < 30rem) {
    .wp-block-table:not(.is-style-defilement) table:has([data-colonne]) {
        display: block;
    }

    .wp-block-table:not(.is-style-defilement) table:has([data-colonne]) thead {
        /* Masqué à l'œil, lu par les lecteurs d'écran. */
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .wp-block-table:not(.is-style-defilement) table:has([data-colonne]) :is(tbody, tfoot) {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .wp-block-table:not(.is-style-defilement) table:has([data-colonne]) tfoot {
        margin-block-start: 0.75rem;
    }

    .wp-block-table:not(.is-style-defilement) table:has([data-colonne]) tr {
        display: block;
        padding-block: 0.25rem;
        border: 1px solid var(--leb-tableau-filet, var(--wp--preset--color--gray-300, color-mix(in srgb, currentColor 16%, transparent)));
        border-radius: var(--leb-tableau-rayon, 0.5rem);
        background: transparent;
    }

    .wp-block-table:not(.is-style-defilement) table:has([data-colonne]) :is(th, td) {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
        gap: 0.75rem;
        padding-block: 0.5rem;
        padding-inline: 0.875rem;
        border: 0;
        text-align: start;
    }

    .wp-block-table:not(.is-style-defilement) table:has([data-colonne]) tr > :is(th, td) + :is(th, td) {
        border-block-start: 1px solid var(--leb-tableau-filet, var(--wp--preset--color--gray-300, color-mix(in srgb, currentColor 16%, transparent)));
    }

    /* L'intitulé : petit, discret, à gauche de la valeur (au-dessus sous
       24rem) — la valeur reste ce qu'on lit en premier. */
    .wp-block-table:not(.is-style-defilement) table:has([data-colonne]) :is(th, td)::before {
        content: attr(data-colonne);
        align-self: baseline;
        color: var(--leb-tableau-intitule, color-mix(in srgb, currentColor 62%, transparent));
        font-size: var(--wp--preset--font-size--sm, 0.875em);
        font-weight: 500;
        line-height: 1.4;
    }

    /* Une valeur vide n'a rien à dire : pas de rangée « intitulé + rien ». */
    .wp-block-table:not(.is-style-defilement) table:has([data-colonne]) td:empty {
        display: none;
    }

    /* Une cellule sans intitulé (colonne d'en-tête vide) prend toute la largeur. */
    .wp-block-table:not(.is-style-defilement) table:has([data-colonne]) :is(th, td):not([data-colonne]) {
        grid-template-columns: minmax(0, 1fr);
        font-weight: 600;
    }

    .wp-block-table:not(.is-style-defilement) table:has([data-colonne]) :is(th, td):not([data-colonne])::before {
        content: none;
    }

    /* Première colonne en en-tête : la cellule devient le titre de la fiche. */
    .wp-block-table:not(.is-style-defilement) table:has([data-colonne]) th[scope="row"] {
        grid-template-columns: minmax(0, 1fr);
        margin-block-start: -0.25rem;
        padding-block: 0.625rem;
        border-start-start-radius: inherit;
        border-start-end-radius: inherit;
    }

    .wp-block-table:not(.is-style-defilement) table:has([data-colonne]) th[scope="row"]::before {
        content: none;
    }

    /* … et disparaît si elle est vide : rien à lire, pas de filet orphelin. */
    .wp-block-table:not(.is-style-defilement) table:has([data-colonne]) :is(th, td):not([data-colonne]):empty {
        display: none;
    }
}

/* Fiches étroites (téléphone) : l'intitulé passe AU-DESSUS de la valeur,
   petit et atténué — la valeur garde toute la largeur de la fiche. Entre
   les deux seuils (fiches larges), il reste à gauche. */
@container leb-tableau (inline-size < 24rem) {
    .wp-block-table:not(.is-style-defilement) table:has([data-colonne]) :is(th, td) {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.125rem;
    }

    .wp-block-table:not(.is-style-defilement) table:has([data-colonne]) :is(th, td)::before {
        font-size: var(--wp--preset--font-size--xs, 0.8125em);
        line-height: 1.3;
    }
}

/* ---------------------------------------------- Défilement horizontal */

/*
 * Style « Défilement horizontal », ou tableau sans en-tête (repli de
 * secours, inc/leb-tableaux : `.is-sans-entete`).
 * Le cadre (posé au rendu PHP) défile ; la figure et la légende restent en
 * place. Ombres « il reste du contenu » : la technique des fonds local /
 * scroll — les caches suivent le contenu, les ombres restent aux bords, et
 * chaque ombre disparaît quand le bord correspondant est atteint. Les fonds
 * des cellules sont translucides, l'ombre passe dessous.
 */
.wp-block-table:is(.is-style-defilement, .is-sans-entete) {
    overflow: visible;
}

.wp-block-table .leb-tableau__defilement {
    --leb-tableau-defilement-fond: var(--leb-tableau-fond, var(--wp--preset--color--white, Canvas));
    --leb-tableau-defilement-ombre: var(--leb-tableau-ombre, color-mix(in srgb, currentColor 22%, transparent));
    max-inline-size: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    background:
        linear-gradient(to right, var(--leb-tableau-defilement-fond) 30%, transparent) left / 2.5rem 100% no-repeat local,
        linear-gradient(to left, var(--leb-tableau-defilement-fond) 30%, transparent) right / 2.5rem 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, var(--leb-tableau-defilement-ombre), transparent) left / 0.875rem 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, var(--leb-tableau-defilement-ombre), transparent) right / 0.875rem 100% no-repeat scroll;
    background-color: var(--leb-tableau-defilement-fond);
}

.wp-block-table .leb-tableau__defilement:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Chaque colonne garde une largeur lisible : au-delà du cadre, on défile. */
.wp-block-table.is-sans-entete {
    /* Sans en-tête (repli de secours, pas un choix) : colonnes plus serrées
       avant de défiler — horaires, listes courtes tiennent sur un téléphone. */
    --leb-tableau-colonne-min: 6rem;
}

.wp-block-table .leb-tableau__defilement table {
    /* En mode « collapse », la moitié du dernier filet déborde du tableau et
       le cadre qui défile la rogne : des bordures séparées (sans espacement,
       chaque cellule ne porte que son filet bas et gauche) restent dedans. */
    border-collapse: separate;
    border-spacing: 0;
    min-inline-size: calc(var(--leb-tableau-colonnes, 4) * var(--leb-tableau-colonne-min, 8rem));
}