/* ============================================
   Web Studios - Content Steps Slider v1.8.1
   ============================================ */

.css-steps-slider-wrapper {
    position: relative; width: 100%; font-family: inherit; box-sizing: border-box;
}
.css-steps-slider-wrapper *, .css-steps-slider-wrapper *::before, .css-steps-slider-wrapper *::after {
    box-sizing: border-box;
}

/* ---- Navigation Wrapper ----
   DESKTOP: flex row → [Prev] [Progress Track] [Next]
   Les boutons sont de chaque côté de la barre, centrés verticalement
*/
.css-navigation-wrapper {
    display: flex;
    flex-direction: row;   /* ← ROW obligatoire sur desktop */
    align-items: center;   /* centrage vertical des boutons sur la barre */
    gap: 12px;
    margin-bottom: 32px;
}
.css-nav-bottom .css-navigation-wrapper { margin-bottom: 0; margin-top: 32px; }

/* Progress Track — prend tout l'espace entre les deux boutons */
.css-progress-track { flex: 1; position: relative; min-width: 0; }

/* Steps Nav — grid égal */
.css-steps-nav {
    display: grid;
    grid-template-columns: repeat(var(--steps-count, 4), 1fr);
    position: relative; z-index: 2;
}

/* Step Item */
.css-step-item {
    display: flex; flex-direction: column; align-items: center;
    gap: 6px; cursor: pointer; outline: none;
    -webkit-tap-highlight-color: transparent;
}

/* Label */
.css-step-label {
    display: inline-block;
    padding: 6px 16px;
    border: 1px solid #4cb8d4; border-radius: 999px;
    font-size: 13px; font-weight: 500; color: #4cb8d4;
    white-space: normal; word-break: break-word; line-height: 1.3;
    text-align: center; pointer-events: none; user-select: none;
    background: #fff; max-width: 100%;
    transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.css-step-item.active .css-step-label { background: #4cb8d4; color: #fff; font-weight: 700; }
.css-step-item.passed .css-step-label { opacity: 0.55; }

/* Connecteur vertical label → pin */
.css-step-connector {
    width: 1px; height: 10px;
    background-color: #4cb8d4; opacity: 0.35;
    flex-shrink: 0; pointer-events: none; display: block;
}
.css-step-item.active .css-step-connector,
.css-step-item.passed .css-step-connector { opacity: 0.8; }

/* Pin */
.css-step-pin {
    width: 28px; height: 28px; border-radius: 50%;
    background-color: #e8f7fb;
    display: flex; align-items: center; justify-content: center;
    position: relative; z-index: 3; flex-shrink: 0;
    transition: background-color 0.3s, transform 0.3s;
    overflow: hidden;
}
.css-step-item.active .css-step-pin { background-color: #4cb8d4; transform: scale(1.15); }
.css-step-item.passed .css-step-pin { background-color: #4cb8d4; }

/* Numéro */
.css-pin-number {
    font-size: 11px; font-weight: 700; color: #fff;
    line-height: 1; display: block; user-select: none;
    position: relative; z-index: 1;
}

/* Icônes */
.css-pin-icon {
    display: flex; align-items: center; justify-content: center;
    position: absolute; inset: 0; z-index: 1;
    transition: opacity 0.2s;
}
.css-pin-icon i   { font-size: 13px !important; color: #fff !important; line-height: 1; }
.css-pin-icon svg { width: 13px !important; height: 13px !important; fill: #fff !important; color: #fff !important; }
.css-pin-icon-normal { opacity: 1; }
.css-pin-icon-active { opacity: 0; }
.css-step-item.active .css-pin-icon-normal,
.css-step-item.passed .css-pin-icon-normal { opacity: 0; }
.css-step-item.active .css-pin-icon-active,
.css-step-item.passed .css-pin-icon-active { opacity: 1; }

/* Progress Line
   Pin 28px → bottom = 14px (centre du pin)
   left/right = 100% / (N*2) = centre 1ère/dernière colonne
*/
.css-progress-line {
    position: absolute;
    bottom: 14px;
    left:  calc(100% / (var(--steps-count, 4) * 2));
    right: calc(100% / (var(--steps-count, 4) * 2));
    height: 2px;
    background-color: #d6eef4; border-radius: 99px;
    z-index: 1; overflow: hidden; pointer-events: none;
}
.css-progress-line-fill {
    position: absolute; top: 0; left: 0;
    width: 0%; height: 100%;
    background-color: #4cb8d4; border-radius: 99px;
    transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Boutons nav */
.css-nav-button {
    width: 38px; height: 38px; min-width: 38px; border-radius: 50%;
    background-color: #4cb8d4; color: #fff; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: filter 0.2s, transform 0.2s, opacity 0.2s;
    outline: none; padding: 0;
}
.css-nav-button svg { width: 16px; height: 16px; display: block; pointer-events: none; }
.css-nav-button:hover:not([disabled]) { filter: brightness(1.1); transform: scale(1.08); }
.css-nav-button[disabled], .css-nav-button:disabled {
    opacity: 0.35; cursor: default;
    transform: none !important; filter: none !important; pointer-events: none;
}

/* Content Area */
.css-step-content-area { position: relative; background: #fff; border-radius: 8px; overflow: hidden; }
.css-step-content { display: none; width: 100%; }
.css-step-content.active { display: block; }
.css-step-content.anim-fadeIn    { animation: cssStepFadeIn    0.4s ease forwards; }
.css-step-content.anim-slideUp   { animation: cssStepSlideUp   0.4s ease forwards; }
.css-step-content.anim-slideDown { animation: cssStepSlideDown 0.4s ease forwards; }
@keyframes cssStepFadeIn    { from{opacity:0} to{opacity:1} }
@keyframes cssStepSlideUp   { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
@keyframes cssStepSlideDown { from{opacity:0;transform:translateY(-16px)} to{opacity:1;transform:translateY(0)} }
.css-step-content-inner { padding: 30px; }

/* Nav mobile — masquée sur desktop/tablette */
.css-mobile-nav-row { display: none; }

/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
    .css-step-label { font-size: 12px; padding: 5px 12px; }
    .css-step-content-inner { padding: 22px; }
}

/* ============================================================
   MOBILE ≤ 767px
   - Barre de progression masquée
   - Boutons PC (nav-wrapper > .css-nav-button) masqués
   - Stepper vertical
   - Nav mobile (prev / indicateur / next) visible sous la liste
   ============================================================ */
@media (max-width: 767px) {

    /* Réinitialiser le wrapper nav en colonne */
    .css-navigation-wrapper {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        margin-bottom: 16px;
    }
    .css-nav-bottom .css-navigation-wrapper { margin-bottom: 0; margin-top: 16px; }

    /* Masquer boutons PC */
    .css-navigation-wrapper > .css-nav-button { display: none !important; }

    /* Masquer barre de progression */
    .css-progress-line { display: none !important; }

    /* Steps nav : colonne */
    .css-steps-nav {
        display: flex !important; flex-direction: column !important; gap: 2px;
    }

    /* Step item : row (pin | label) */
    .css-step-item {
        flex-direction: row !important; align-items: center !important;
        gap: 12px; padding: 8px 10px; border-radius: 10px;
        background: transparent; transition: background 0.2s; width: 100%;
    }
    .css-step-item.active { background: rgba(76, 184, 212, 0.08); }
    .css-step-pin { width: 26px !important; height: 26px !important; flex-shrink: 0; transform: none !important; }
    .css-step-item.active .css-step-pin { transform: none !important; }
    .css-step-connector { display: none !important; }
    .css-step-label {
        text-align: left !important; white-space: normal !important;
        max-width: none !important; font-size: 13px !important;
        flex: 1; border-radius: 8px !important;
    }

    /* Nav mobile : toujours visible, sous la liste */
    .css-mobile-nav-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-top: 12px;
        padding: 4px 0;
    }
    .css-mobile-nav-row .css-nav-button {
        display: flex !important;
        width: 40px !important; height: 40px !important; flex-shrink: 0;
    }
    .css-mobile-indicator {
        flex: 1; text-align: center;
        font-size: 13px; font-weight: 600; color: #555; user-select: none;
    }

    .css-step-content-inner { padding: 16px; }
}

/* Elementor Editor */
.elementor-editor-active .css-step-content { display: block; opacity: 0.35; pointer-events: none; }
.elementor-editor-active .css-step-content.active { opacity: 1; pointer-events: auto; }