/* ============================================================
   Services en ligne - slider
   ============================================================ */

.services-en-ligne-slider {
    width: 100%;
    margin: 0 auto;

    /* --- Customize the button here --- */
    --sel-btn-bg: #0b5fff;
    --sel-btn-bg-hover: #0743bd;
    --sel-btn-color: #ffffff;
    --sel-btn-radius: 8px;
    --sel-btn-font-size: 13px;
    --sel-btn-padding: 7px 12px;
    --sel-btn-offset: 10px;   /* distance from the bottom edge of the image */
    --sel-btn-inset: 10px;    /* gap between the button and the image sides */
    --sel-img-size: 160px;
}

.services-en-ligne-item {
    padding: 10px;
    text-align: center;
    box-sizing: border-box;
}

.services-en-ligne-item__link {
    display: block;
    text-decoration: none;
    outline: none;
}

/* Positioning context = the image box itself (shrink-wraps the <img>),
   so the button centers on the image, not on the wider padded cell. */
.services-en-ligne-item__media {
    position: relative;
    display: inline-block;
    max-width: 100%;
    line-height: 0;               /* removes the inline-image gap */
}

.services-en-ligne-item img {
    width: 100%;
    max-width: var(--sel-img-size);
    height: auto;
    margin: 0 auto;
    display: block;
    border-radius: 8px;
}

/* ---------- Button: bottom + centered ON the image ---------- */
.services-en-ligne-item__button {
    position: absolute;
    bottom: var(--sel-btn-offset);
    /* Span the image width (inset from both sides) instead of shrink-wrapping,
       so longer titles get the full width before they need to wrap. */
    left: var(--sel-btn-inset);
    right: var(--sel-btn-inset);

    display: block;
    box-sizing: border-box;

    padding: 5px;
    background-color: #de1f19a6;
    color: var(--sel-btn-color);
    font-size: var(--sel-btn-font-size);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .2px;
    text-align: center;
    text-decoration: none;
    border-radius: var(--sel-btn-radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
    transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease;
    min-height: 46.8px
}

/* Inner label does the clamping, so the button's own vertical padding is
   never eaten by the overflow clipping. Long titles wrap to max 2 lines,
   which stops the button growing upward and covering the image. */
.services-en-ligne-item__label {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    white-space: normal;
    overflow-wrap: break-word;
}

.services-en-ligne-item__link:hover .services-en-ligne-item__button,
.services-en-ligne-item__link:focus .services-en-ligne-item__button {
    background-color: #de1f19;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
}

.services-en-ligne-item__link:focus-visible .services-en-ligne-item__button {
    outline: 2px solid var(--sel-btn-bg);
    outline-offset: 2px;
}

/* Optional variant: compact pill that shrink-wraps the title instead of
   spanning the image width. Add class "sel--pill". Best for short titles. */
.services-en-ligne-slider.sel--pill .services-en-ligne-item__button {
    left: 50%;
    right: auto;
    width: max-content;
    max-width: calc(100% - 16px);
    transform: translateX(-50%);
    border-radius: 999px;
}

.services-en-ligne-slider.sel--pill .services-en-ligne-item__link:hover .services-en-ligne-item__button,
.services-en-ligne-slider.sel--pill .services-en-ligne-item__link:focus .services-en-ligne-item__button {
    transform: translateX(-50%) translateY(-2px);
}

/* Optional variant: button hanging just BELOW the image.
   Add class "sel--below" on .services-en-ligne-slider */
.services-en-ligne-slider.sel--below .services-en-ligne-item__media {
    padding-bottom: 22px;
}

.services-en-ligne-slider.sel--below .services-en-ligne-item__button {
    bottom: 0;
}

/* ---------- Slick fixes ---------- */
.services-en-ligne-slider .slick-slide {
    padding: 5px;
}

.services-en-ligne-slider .slick-track {
    display: flex;
    align-items: center;
}

.services-en-ligne-slider .slick-slide > div {
    height: 100%;
}

@media (max-width: 767px) {
    .services-en-ligne-slider {
        --sel-btn-font-size: 12px;
        --sel-btn-padding: 7px 12px;
        --sel-img-size: 130px;
    }
}