/**
 * Tuile « puce » neutre (gris / noir) — style générique réutilisable dans le thème.
 *
 * Usage :
 *   <button type="button" class="me5rine-lab-tile-chip">Libellé</button>
 *   <a href="…" class="me5rine-lab-tile-chip">…</a>
 * Modificateurs :
 *   .me5rine-lab-tile-chip--has-media   — réserve à droite pour une illustration
 *   .is-active                           — état sélectionné (onglet, filtre, etc.)
 * Enfants optionnels :
 *   .me5rine-lab-tile-chip__label       — texte tronqué
 *   .me5rine-lab-tile-chip__media       — déco absolue à droite (fond image)
 *
 * Les boutons barre collection (.pokehub-collection-fixed-tile-btn) partagent les mêmes
 * règles — pas besoin d’ajouter la classe côté plugin.
 */

:root {
    --me5rine-lab-tile-chip-radius: 0.75rem;
    --me5rine-lab-tile-chip-pad-x: 0.85rem;
    --me5rine-lab-tile-chip-pad-y: 0.5rem;
    --me5rine-lab-tile-chip-min-h: 2.85rem;
    --me5rine-lab-tile-chip-font-size: 0.7rem;
    --me5rine-lab-tile-chip-letter-spacing: 0.07em;
    --me5rine-lab-tile-chip-media-w: 3.35rem;
    --me5rine-lab-tile-chip-media-h: 2.75rem;
}

button.me5rine-lab-tile-chip,
a.me5rine-lab-tile-chip,
button.pokehub-collection-fixed-tile-btn,
[role='tab'].me5rine-lab-tile-chip {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: var(--me5rine-lab-tile-chip-pad-y) var(--me5rine-lab-tile-chip-pad-x);
    min-height: var(--me5rine-lab-tile-chip-min-h);
    border: 1px solid color-mix(in srgb, var(--me5rine-lab-text, #11161e) 12%, var(--me5rine-lab-border, #c9cfd6));
    border-radius: var(--me5rine-lab-tile-chip-radius);
    font-family: inherit;
    font-size: var(--me5rine-lab-tile-chip-font-size);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: var(--me5rine-lab-tile-chip-letter-spacing);
    text-transform: uppercase;
    text-align: left;
    text-decoration: none;
    color: color-mix(in srgb, var(--me5rine-lab-text, #11161e) 92%, #000);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    background: linear-gradient(
        165deg,
        color-mix(in srgb, var(--me5rine-lab-text, #11161e) 7%, var(--me5rine-lab-bg-secondary, #eceef2)) 0%,
        color-mix(in srgb, var(--me5rine-lab-bg, #fff) 88%, var(--me5rine-lab-bg-secondary, #dfe3e8)) 100%
    );
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--me5rine-lab-bg, #fff) 60%, transparent),
        0 2px 8px color-mix(in srgb, var(--me5rine-lab-text, #11161e) 07%, transparent);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

/* Tuiles onglets barre fixe (scroll) : un peu plus hautes que les puces génériques. */
button.pokehub-collection-fixed-tile-btn {
    --me5rine-lab-tile-chip-min-h: 3.35rem;
    min-height: 3.35rem;
}

a.me5rine-lab-tile-chip:hover {
    text-decoration: none;
    color: color-mix(in srgb, var(--me5rine-lab-text, #11161e) 92%, #000);
}

button.me5rine-lab-tile-chip--has-media,
a.me5rine-lab-tile-chip--has-media {
    padding-right: 3rem;
}

/* Barre collection fixe : image pleine tuile (même URL que panneau flux / data-toolbar-decoration-url). */
button.pokehub-collection-fixed-tile-btn--has-media {
    --pokehub-fixed-tile-bg: none;
    padding-right: var(--me5rine-lab-tile-chip-pad-x, 0.85rem);
    background-image:
        linear-gradient(
            135deg,
            rgba(8, 16, 28, 0.68) 0%,
            rgba(8, 16, 28, 0.22) 46%,
            rgba(8, 16, 28, 0.42) 100%
        ),
        var(--pokehub-fixed-tile-bg);
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

button.pokehub-collection-fixed-tile-btn--has-media:hover,
button.pokehub-collection-fixed-tile-btn--has-media:focus-visible {
    filter: brightness(0.94);
    color: #fff;
}

button.pokehub-collection-fixed-tile-btn--has-media.is-active {
    background-image:
        linear-gradient(
            135deg,
            rgba(8, 16, 28, 0.52) 0%,
            rgba(8, 16, 28, 0.14) 50%,
            rgba(8, 16, 28, 0.38) 100%
        ),
        var(--pokehub-fixed-tile-bg);
    background-size: cover, cover;
    background-position: center, center;
    color: #fff;
}

.pokehub-collection-fixed-tile-btn--has-media .pokehub-collection-fixed-tile-btn-media {
    display: none;
}

.pokehub-collection-fixed-tile-btn-label,
.me5rine-lab-tile-chip__label {
    position: relative;
    z-index: 1;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pokehub-collection-fixed-tile-btn-media,
.me5rine-lab-tile-chip__media {
    position: absolute;
    right: -0.1rem;
    bottom: -0.1rem;
    width: var(--me5rine-lab-tile-chip-media-w);
    height: var(--me5rine-lab-tile-chip-media-h);
    z-index: 0;
    background-size: auto 118%;
    background-position: right 8% bottom 0;
    background-repeat: no-repeat;
    pointer-events: none;
    opacity: 0.94;
    filter: drop-shadow(-1px 0 10px rgba(255, 255, 255, 0.2)) drop-shadow(0 2px 5px rgba(12, 18, 28, 0.15));
}

.pokehub-collection-fixed-tile-btn-media {
    background-image: var(--pokehub-fixed-tile-bg, none);
}

button.me5rine-lab-tile-chip.is-active .me5rine-lab-tile-chip__media,
button.pokehub-collection-fixed-tile-btn.is-active .pokehub-collection-fixed-tile-btn-media {
    opacity: 1;
}

button.me5rine-lab-tile-chip:hover,
button.me5rine-lab-tile-chip:focus-visible,
a.me5rine-lab-tile-chip:hover,
a.me5rine-lab-tile-chip:focus-visible,
button.pokehub-collection-fixed-tile-btn:hover:not(.pokehub-collection-fixed-tile-btn--has-media),
button.pokehub-collection-fixed-tile-btn:focus-visible:not(.pokehub-collection-fixed-tile-btn--has-media) {
    border-color: color-mix(in srgb, var(--me5rine-lab-text, #11161e) 22%, var(--me5rine-lab-border, #c9cfd6));
    outline: none;
    filter: brightness(0.98);
    /* Évite les globaux thème (.button:hover → texte blanc) : garder le gris foncé des variables Poké HUB */
    color: color-mix(in srgb, var(--me5rine-lab-text, #11161e) 92%, #000);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--me5rine-lab-bg, #fff) 50%, transparent),
        0 3px 12px color-mix(in srgb, var(--me5rine-lab-text, #000) 09%, transparent);
}

button.me5rine-lab-tile-chip.is-active,
a.me5rine-lab-tile-chip.is-active,
button.pokehub-collection-fixed-tile-btn.is-active:not(.pokehub-collection-fixed-tile-btn--has-media) {
    border-color: color-mix(in srgb, var(--me5rine-lab-text, #11161e) 38%, var(--me5rine-lab-border));
    background: linear-gradient(
        165deg,
        color-mix(in srgb, var(--me5rine-lab-text, #11161e) 14%, var(--me5rine-lab-bg-secondary, #e2e5ea)) 0%,
        color-mix(in srgb, var(--me5rine-lab-bg-secondary, #d5d9df) 55%, var(--me5rine-lab-bg, #fff)) 100%
    );
    font-weight: 800;
    color: color-mix(in srgb, var(--me5rine-lab-text, #11161e) 92%, #000);
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--me5rine-lab-text, #11161e) 08%, transparent),
        0 2px 10px color-mix(in srgb, var(--me5rine-lab-text, #000) 10%, transparent);
}

button.pokehub-collection-fixed-tile-btn--has-media.is-active {
    font-weight: 800;
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--me5rine-lab-secondary, #0485c8) 35%, transparent),
        0 2px 10px color-mix(in srgb, var(--me5rine-lab-text, #000) 12%, transparent);
}