.bloomers-directory {
    --bloomers-blue: #305cea;
    --bloomers-pink: #fface7;
    --bloomers-text: #76767f;
    --bloomers-background: #fff;
    --bloomers-gap: 32px;
    --bloomers-radius: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--bloomers-gap);
    font: inherit;
    scroll-margin-top: 100px;
}
.bloomers-directory .bloomer-card { width: 370px; overflow: hidden; border-radius: var(--bloomers-radius); background: var(--bloomers-background); }
.bloomers-directory .bloomer-card__portrait { aspect-ratio: 4 / 3; background: #eeeaff; overflow: hidden; }
.bloomers-directory .bloomer-card__photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.bloomers-directory .bloomer-card__placeholder { display: grid; place-items: center; height: 100%; font-size: 5rem; color: var(--bloomers-blue); }
.bloomers-directory .bloomer-card__content { padding: 28px; }
.bloomers-directory .bloomer-card__name { margin: 0 0 12px; color: var(--bloomers-blue); font-size: 1.5rem; line-height: 1.25; }
.bloomers-directory .bloomer-card__role { margin: 0 0 6px; }
.bloomers-directory .bloomer-card__company { margin: 0 0 20px; font-weight: 600; color: var(--bloomers-blue); }
.bloomers-directory .bloomer-card__contact,
.bloomers-directory .bloomer-card__socials { list-style: none; padding: 0; margin: 20px 0 0; }
.bloomers-directory .bloomer-card__contact li { margin: 6px 0; }
.bloomers-directory .bloomer-card__socials { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: .875rem; }
.bloomers-directory .bloomer-card__socials:empty { display: none; }
.bloomers-directory a { color: var(--bloomers-text); overflow-wrap: anywhere; text-underline-offset: 4px; }
.bloomers-directory a:hover { color: var(--bloomers-blue); }
.bloomers-directory a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.bloomers-directory .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.bloomers-status { margin: 28px 0 16px; text-align: center; font-size: .875rem; }
.bloomers-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.bloomers-pagination[hidden] { display: none; }
.bloomers-pagination button { padding: 10px 14px; border: 1px solid #305cea; border-radius: 8px; background: white; color: #305cea; font: inherit; cursor: pointer; }
.bloomers-pagination button[aria-current="page"] { background: #305cea; color: white; }
.bloomers-pagination button:disabled { opacity: .4; cursor: default; }
.bloomers-pagination button:focus-visible { outline: 2px solid #305cea; outline-offset: 3px; }

.bloomers-directory .bloomer-card__socials {
    gap: 10px;
}

.bloomers-directory .bloomer-card__socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--bloomers-blue);
    background: white;
    text-decoration: none;
    transition: background 180ms ease, color 180ms ease;
}

.bloomers-directory .bloomer-card__socials a:hover {
    color: #fff;
    background: var(--bloomers-pink);
}

.bloomers-directory .bloomer-card__socials svg {
    display: block;
    flex-shrink: 0;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .bloomers-directory .bloomer-card {
        position: relative;
        isolation: isolate;
        transform:
                perspective(900px)
                rotateX(0deg)
                rotateY(0deg)
                scale(1);
        transition:
                transform 350ms ease,
                box-shadow 350ms ease;
    }

    .bloomers-directory .bloomer-card.is-tilting {
        z-index: 2;
        transform:
                perspective(900px)
                rotateX(var(--tilt-x, 0deg))
                rotateY(var(--tilt-y, 0deg))
                scale(1.04);
        box-shadow: 0 22px 45px -18px rgb(48 92 234 / 35%);
        transition:
                transform 100ms ease-out,
                box-shadow 250ms ease;
    }

    /* Reflet au-dessus du contenu, sans bloquer les liens. */
    .bloomers-directory .bloomer-card::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 3;
        pointer-events: none;
        border-radius: inherit;
        background: radial-gradient(
                circle at var(--shine-x, 50%) var(--shine-y, 50%),
                rgb(255 255 255 / 45%) 0%,
                rgb(255 255 255 / 0.18) 25%,
                transparent 65%
        );
        opacity: 0;
        transition: opacity 250ms ease;
    }

    .bloomers-directory .bloomer-card.is-tilting::after {
        opacity: 1;
    }
}