/**
 * WS Booster - Bandeau Services Defilant
 *
 * Structure :
 *   .ws-sm                       (wrapper, overflow hidden, fade mask)
 *     .ws-sm__track              (flex, anime translateX -50%)
 *       .ws-sm__card             (carte individuelle)
 *         .ws-sm__image          (image hero, full-width carte, optionnelle)
 *         .ws-sm__card-body      (padding interne)
 *           .ws-sm__icon-wrap    (alignement icone)
 *             .ws-sm__icon       (icone + son fond/padding)
 *           .ws-sm__title
 *           .ws-sm__desc
 *           .ws-sm__arrow        (si lien)
 */

.ws-sm {
    --ws-sm-speed: 40s;
    --ws-sm-fade-w: 8%;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.ws-sm__track {
    display: flex;
    gap: 16px;
    animation: ws-sm-scroll var(--ws-sm-speed) linear infinite;
    will-change: transform;
}

.ws-sm--right .ws-sm__track {
    animation-direction: reverse;
}

.ws-sm--pause:hover .ws-sm__track {
    animation-play-state: paused;
}

@keyframes ws-sm-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Fondu sur les bords (largeur paramétrable via --ws-sm-fade-w) */
.ws-sm-fade-yes.ws-sm {
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 var(--ws-sm-fade-w),
        #000 calc(100% - var(--ws-sm-fade-w)),
        transparent 100%
    );
            mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 var(--ws-sm-fade-w),
        #000 calc(100% - var(--ws-sm-fade-w)),
        transparent 100%
    );
}

/* ===== CARTE ===== */
.ws-sm__card {
    flex: 0 0 320px;
    background: #ffffff;
    color: #0f172a;
    border-radius: 16px;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden; /* garantit que image hero respecte le radius */
}

.ws-sm__card:hover {
    transform: translateY(-6px);
}

/* ===== IMAGE HERO (mode quand item.image est fournie) ===== */
.ws-sm__image {
    width: 100%;
    height: 180px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    background-color: #f1f5f9; /* fallback si image foireuse */
}

/* !important obligatoire pour override theme WP (bible 9.13).
   Sinon theme applique img { max-width:100%; height:auto } et l'image
   garde son ratio naturel au lieu de remplir la zone. */
.ws-sm__image img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center;
    display: block;
}

/* ===== CARD BODY (padding interne) ===== */
.ws-sm__card-body {
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1; /* permet body de remplir le reste apres image */
}

/* ===== ICONE (uniquement si pas d'image) ===== */
.ws-sm__icon-wrap {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 4px;
}

/* Wrapper de l'icone : taille (min-width/height) posee par le controle PHP.
   display: inline-flex pour centrer le glyphe + flex-shrink: 0 pour ne pas
   se faire ecraser par le titre/desc qui suit. */
.ws-sm__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #6366f1;
    box-sizing: content-box;
    flex-shrink: 0;
    line-height: 0;
}

/* SVG : dimensions posees par le controle PHP (width/height = icon_size).
   !important pour override theme WP img{} (bible 9.13). */
.ws-sm__icon svg {
    width: 48px;
    height: 48px;
    max-width: none !important;
    max-height: none !important;
    display: block;
}

/* Font icons (FA, etc) : font-size pose par le controle PHP. */
.ws-sm__icon i {
    font-size: 48px;
    line-height: 1;
    display: inline-block;
}

/* Image dans icone (rare, fallback) */
.ws-sm__icon img {
    width: 48px !important;
    height: 48px !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    display: block;
}

/* ===== TITRE / DESCRIPTION ===== */
.ws-sm__title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
}

.ws-sm__desc {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

/* ===== FLECHE (si lien) ===== */
.ws-sm__arrow {
    position: absolute;
    top: 28px;
    right: 28px;
    font-size: 20px;
    opacity: 0.4;
    transition: transform 0.2s ease, opacity 0.2s ease;
    z-index: 2;
}

.ws-sm__card--has-image .ws-sm__arrow {
    top: 16px;
    right: 16px;
    background: rgba(255, 255, 255, 0.9);
    color: #0f172a;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
}

.ws-sm__card:hover .ws-sm__arrow {
    opacity: 1;
    transform: translateX(4px);
}

/* ===== EDITEUR : pas d'animation pour ne pas troubler l'edition ===== */
.elementor-editor-active .ws-sm__track {
    animation-play-state: running;
}

/* ===== A11Y ===== */
@media (prefers-reduced-motion: reduce) {
    .ws-sm__track {
        animation: none;
    }
}