/* ============================================================
   ÉLÉMENT AVIA « TABLEAU » (onglet Tris)
   Monogramme | nom, rôle, remplaçant, liens | contenu libre.
   Couleurs et rayons : uniquement via les tokens du thème (style.css → Enfold).
============================================================ */

.tris-tableau {
    --tris-tableau-accent: var(--enfold-alternate-color-primary, var(--component-color-primary));
    --tris-tableau-accent-soft: color-mix(in srgb, var(--tris-tableau-accent) 9%, var(--component-color-bg));
    --tris-tableau-heading: var(--component-color-dark);
    --tris-tableau-text: var(--component-color-text);
    --tris-tableau-subtle: color-mix(in srgb, var(--component-color-text) 78%, var(--component-color-bg));
    --tris-tableau-border: var(--component-color-border);
    --tris-tableau-surface: var(--component-color-bg2);
    --tris-tableau-hover: color-mix(in srgb, var(--component-color-text) 3%, var(--component-color-bg2));
    --tris-tableau-radius: var(--component-radius-lg, 16px);
    --tris-tableau-avatar: 44px;

    margin: 0 0 24px;
}

.tris-tableau,
.tris-tableau * {
    box-sizing: border-box;
}

#top .tris-tableau .tris-tableau__title {
    margin: 0 0 14px;
    padding: 0;
}

/* Carte */

#top .tris-tableau .tris-tableau__list {
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--tris-tableau-border);
    border-radius: var(--tris-tableau-radius);
    background: var(--tris-tableau-surface);
    list-style: none;
    line-height: 1.5;
}

/* Ligne : monogramme | personne | attributions | contact (à droite) */

#top .tris-tableau .tris-tableau__row {
    display: grid;
    grid-template-columns: var(--tris-tableau-avatar) minmax(0, 240px) minmax(0, 1fr) auto;
    grid-template-areas: "avatar person content links";
    align-items: start;
    column-gap: 16px;
    margin: 0;
    padding: 20px 28px;
    border-bottom: 1px solid var(--tris-tableau-border);
    list-style: none;
    transition: background-color var(--component-transition, 0.25s ease);
}

#top .tris-tableau .tris-tableau__row:last-child {
    border-bottom: 0;
}

#top .tris-tableau .tris-tableau__row:hover {
    background-color: var(--tris-tableau-hover);
}

#top .tris-tableau .tris-tableau__avatar {
    grid-area: avatar;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tris-tableau-avatar);
    height: var(--tris-tableau-avatar);
    border-radius: 50%;
    background: var(--tris-tableau-accent-soft);
    color: var(--tris-tableau-accent);
    font-size: 0.95em;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
}

#top .tris-tableau .tris-tableau__person {
    grid-area: person;
    min-width: 0;
    padding-right: 16px;
}

#top .tris-tableau .tris-tableau__name,
#top .tris-tableau .tris-tableau__role,
#top .tris-tableau .tris-tableau__substitute {
    margin: 0;
    padding: 0;
}

#top .tris-tableau .tris-tableau__name {
    color: var(--tris-tableau-heading);
    font-size: 1.05em;
    font-weight: 700;
    line-height: 1.35;
}

/* Rôle : badge discret dans la couleur d'accent. */
#top .tris-tableau .tris-tableau__role {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--tris-tableau-accent-soft);
    color: var(--tris-tableau-accent);
    font-size: 0.8em;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.6;
}

/* Remplaçant : petit, au-dessus des liens. */
#top .tris-tableau .tris-tableau__substitute {
    margin-top: 6px;
    color: var(--tris-tableau-subtle);
    font-size: 0.8em;
    line-height: 1.4;
}

#top .tris-tableau .tris-tableau__substitute span {
    color: var(--tris-tableau-text);
    font-weight: 600;
}

/* Téléphone et e-mail côte à côte, sous forme de boutons « pilule » alignés à droite. */
#top .tris-tableau .tris-tableau__links {
    grid-area: links;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    align-self: center;
}

#top .tris-tableau .tris-tableau__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--tris-tableau-border);
    border-radius: 999px;
    background: var(--component-color-bg);
    color: var(--tris-tableau-text);
    font-size: 0.9em;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--component-transition, 0.25s ease), border-color var(--component-transition, 0.25s ease);
}

#top .tris-tableau a.tris-tableau__link:hover,
#top .tris-tableau a.tris-tableau__link:focus-visible {
    border-color: var(--tris-tableau-accent);
}

#top .tris-tableau .tris-tableau__icon {
    flex: none;
    width: 15px;
    height: 15px;
    color: var(--tris-tableau-accent);
}

#top .tris-tableau a.tris-tableau__link:hover,
#top .tris-tableau a.tris-tableau__link:focus-visible {
    color: var(--tris-tableau-accent);
}

#top .tris-tableau a.tris-tableau__link:hover span:not(.tris-tableau__arrow),
#top .tris-tableau a.tris-tableau__link:focus-visible span:not(.tris-tableau__arrow) {
    text-decoration: underline;
    text-underline-offset: 3px;
}

#top .tris-tableau .tris-tableau__arrow {
    display: inline-block;
    color: var(--tris-tableau-accent);
    transition: transform var(--component-transition, 0.25s ease);
}

#top .tris-tableau .tris-tableau__email:hover .tris-tableau__arrow,
#top .tris-tableau .tris-tableau__email:focus-visible .tris-tableau__arrow {
    transform: translateX(3px);
}

/* Attributions */

#top .tris-tableau .tris-tableau__content {
    grid-area: content;
    align-self: center;
    min-width: 0;
    color: var(--tris-tableau-text);
    line-height: 1.6;
}

#top .tris-tableau .tris-tableau__content > :first-child {
    margin-top: 0;
}

#top .tris-tableau .tris-tableau__content > :last-child {
    margin-bottom: 0;
}

/* Tablette : les liens passent sous la personne et les attributions, sur toute la largeur
   (une adresse e-mail complète ne tient pas dans la colonne « personne »). */
@media only screen and (max-width: 989px) {
    #top .tris-tableau .tris-tableau__row {
        grid-template-columns: var(--tris-tableau-avatar) minmax(0, 220px) minmax(0, 1fr);
        grid-template-areas:
            "avatar person content"
            ".      links  links";
    }

    #top .tris-tableau .tris-tableau__links {
        justify-content: flex-start;
        align-self: start;
        margin-top: 12px;
    }
}

/* Mobile : les attributions passent sous la personne, alignées sur le nom. */
@media only screen and (max-width: 767px) {
    .tris-tableau {
        --tris-tableau-avatar: 40px;
    }

    #top .tris-tableau .tris-tableau__row {
        grid-template-columns: var(--tris-tableau-avatar) minmax(0, 1fr);
        grid-template-areas:
            "avatar person"
            ".      links"
            ".      content";
        column-gap: 14px;
        padding: 18px 18px;
    }

    #top .tris-tableau .tris-tableau__person {
        padding-right: 0;
    }

    /* Adresse e-mail longue : retour à la ligne plutôt que débordement. */
    #top .tris-tableau .tris-tableau__email {
        max-width: 100%;
        white-space: normal;
    }

    #top .tris-tableau .tris-tableau__email-address {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    #top .tris-tableau .tris-tableau__content {
        align-self: start;
        margin-top: 10px;
    }
}