/* =============================================
   Deeployer – Offre Métiers : Carousel styles
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@700&display=swap');

.dom-carousel-wrap {
    --dom-gap:      16px;
    --dom-radius:   14px;
    --dom-duration: 40s;

    width: 100%;
    overflow: hidden;
    position: relative;
    user-select: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}

/* ── Track (rangée) ── */
.dom-track {
    display: flex;
    width: 100%;
    overflow: hidden;
    padding: 12px 0;
}

.dom-track--rev .dom-track__inner {
    animation-direction: reverse;
}

.dom-track__inner {
    display: flex;
    gap: var(--dom-gap);
    will-change: transform;
    animation: dom-scroll var(--dom-duration) linear infinite;
}


@keyframes dom-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(var(--dom-scroll-width)); }
}

/* ── Carte ── */
.dom-card {
    display: block;
    flex-shrink: 0;
    flex-grow: 0;
    border-radius: var(--dom-radius);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: #ffffff;
    box-shadow: 0 4px 18px rgba(110, 40, 200, 0.10);
    text-decoration: none;
    color: inherit;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    border: 1.5px solid rgba(124, 58, 237, 0.10);
}


/* ── Variante pill (show_img=false) ── */
.dom-card--pill {
    aspect-ratio: unset;
    border-radius: 50px;
    height: 52px;
}

/* Label — occupe toute la carte, texte centré */
.dom-card__label {
    height: 100%;
    padding: 10px 14px 12px;
    font-family: 'Lexend', 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 700 !important;
    font-style: italic;
    text-transform: uppercase;
    color: black;
    text-align: center;
    line-height: 1.3;
    background: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ── 2ème rangée légèrement décalée ── */
.dom-track--rev {
    margin-top: -4px;
}

/* ── Variante pill (3ème rangée) ── */
.dom-card--pill {
    aspect-ratio: unset;
    border-radius: 50px;
    height: 52px;
}

/* ── Responsive ── */
@media (max-width: 640px) {
    .dom-carousel-wrap {
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
                mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
    }
}