/**
 * Step Process Module - Styles
 */

/* ================================================
   BASE
   ================================================ */

.cj-steps {
    position: relative;
    display: grid;
    gap: 0;
}

/* ================================================
   COLONNES
   ================================================ */

.cj-steps--cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.cj-steps--cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.cj-steps--cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* ================================================
   THÈMES DE COULEUR
   ================================================ */

/* Sombre */
.cj-steps--dark {
    background-color: #0b0a09;
}

.cj-steps--dark.cj-steps--has-bg {
    background:
        linear-gradient(90deg, rgba(11, 10, 9, 0.95), rgba(11, 10, 9, 0.82)),
        var(--cj-steps-bg) center center / cover no-repeat,
        #0b0a09;
}

.cj-steps--dark .cj-steps__item {
    border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.cj-steps--dark .cj-steps__title {
    color: #f5f2ec;
}

.cj-steps--dark .cj-steps__desc {
    color: #d4cdc3;
}

/* Clair */
.cj-steps--light {
    background-color: #f5f2ec;
}

.cj-steps--light.cj-steps--has-bg {
    background:
        linear-gradient(90deg, rgba(245, 242, 236, 0.95), rgba(245, 242, 236, 0.82)),
        var(--cj-steps-bg) center center / cover no-repeat,
        #f5f2ec;
}

.cj-steps--light .cj-steps__item {
    border-right: 1px solid rgba(21, 19, 15, 0.14);
}

.cj-steps--light .cj-steps__title {
    color: #15130f;
}

.cj-steps--light .cj-steps__desc {
    color: #4d4840;
}

/* ================================================
   ITEM
   ================================================ */

.cj-steps__item {
    min-height: 340px;
    padding: 38px 30px 42px;
}

.cj-steps__item:last-child {
    border-right: none !important;
}

/* ================================================
   NUMÉRO
   ================================================ */

.cj-steps__number {
    display: block;
    margin-bottom: 22px;
    font-family: "Saira Condensed", sans-serif;
    font-size: 46px;
    font-weight: 900;
    line-height: 0.9;
    color: #eb5d0f;
}

/* ================================================
   TITRE
   ================================================ */

.cj-steps__title {
    margin: 0 0 12px;
    font-family: "Saira Condensed", sans-serif;
    font-size: clamp(28px, 2.8vw, 42px);
    font-weight: 900;
    line-height: 0.92;
    text-transform: uppercase;
}

/* ================================================
   DESCRIPTION
   ================================================ */

.cj-steps__desc {
    margin: 0;
    font-size: 17px;
    line-height: 1.55;
}

/* ================================================
   CTA BUTTON - Base
   ================================================ */

.cj-steps__cta {
    display: inline-flex;
    align-items: center;
    gap: 0;
    margin-top: 20px;
    font-family: "Saira", sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.cj-steps__cta:hover {
    transform: translateX(4px);
}

.cj-steps__cta.cj-button {
    align-items: stretch;
    gap: 0;
    font-family: var(--cj-font-display);
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.cj-steps__cta.cj-button span:first-child {
    padding: 0 16px;
}

.cj-steps__cta.cj-button span:last-child {
    width: 46px;
    min-width: 46px;
    padding: 0;
    font-size: 16px;
}

/* ================================================
   CTA STYLE - Split (défaut)
   ================================================ */

.cj-steps--cta-split .cj-steps__cta span:first-child {
    padding: 10px 16px;
    background: #eb5d0f;
    color: #0b0a09;
}

.cj-steps--cta-split .cj-steps__cta span:last-child {
    padding: 10px 12px;
    background: #f5f2ec;
    color: #0b0a09;
    font-size: 16px;
}

.cj-steps--light.cj-steps--cta-split .cj-steps__cta span:last-child {
    background: #0b0a09;
    color: #f5f2ec;
}

/* ================================================
   CTA STYLE - Split Outline
   ================================================ */

.cj-steps--cta-split-outline .cj-steps__cta {
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.cj-steps--cta-split-outline .cj-steps__cta span:first-child {
    padding: 10px 16px;
    background: #eb5d0f;
    color: #0b0a09;
}

.cj-steps--cta-split-outline .cj-steps__cta span:last-child {
    padding: 10px 12px;
    color: #f5f2ec;
    font-size: 16px;
    border-left: 1px solid rgba(255, 255, 255, 0.4);
}

.cj-steps--cta-split-outline .cj-steps__cta:hover {
    border-color: #eb5d0f;
}

.cj-steps--cta-split-outline .cj-steps__cta:hover span:last-child {
    border-left-color: #eb5d0f;
    color: #eb5d0f;
}

/* Split Outline sur fond clair */
.cj-steps--light.cj-steps--cta-split-outline .cj-steps__cta {
    border-color: rgba(21, 19, 15, 0.3);
}

.cj-steps--light.cj-steps--cta-split-outline .cj-steps__cta span:last-child {
    color: #15130f;
    border-left-color: rgba(21, 19, 15, 0.3);
}

.cj-steps--light.cj-steps--cta-split-outline .cj-steps__cta:hover {
    border-color: #eb5d0f;
}

.cj-steps--light.cj-steps--cta-split-outline .cj-steps__cta:hover span:last-child {
    border-left-color: #eb5d0f;
    color: #eb5d0f;
}

/* ================================================
   CTA STYLE - Outline
   ================================================ */

.cj-steps--cta-outline .cj-steps__cta {
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #f5f2ec;
}

.cj-steps--cta-outline .cj-steps__cta span:first-child {
    padding: 10px 16px;
}

.cj-steps--cta-outline .cj-steps__cta span:last-child {
    padding: 10px 12px;
    border-left: 1px solid rgba(255, 255, 255, 0.4);
    font-size: 16px;
}

.cj-steps--cta-outline .cj-steps__cta:hover {
    border-color: #eb5d0f;
    color: #eb5d0f;
}

.cj-steps--cta-outline .cj-steps__cta:hover span:last-child {
    border-left-color: #eb5d0f;
}

/* Outline sur fond clair */
.cj-steps--light.cj-steps--cta-outline .cj-steps__cta {
    border-color: rgba(21, 19, 15, 0.3);
    color: #15130f;
}

.cj-steps--light.cj-steps--cta-outline .cj-steps__cta span:last-child {
    border-left-color: rgba(21, 19, 15, 0.3);
}

.cj-steps--light.cj-steps--cta-outline .cj-steps__cta:hover {
    border-color: #eb5d0f;
    color: #eb5d0f;
}

/* ================================================
   CTA STYLE - Solid
   ================================================ */

.cj-steps--cta-solid .cj-steps__cta {
    background: #eb5d0f;
    color: #0b0a09;
}

.cj-steps--cta-solid .cj-steps__cta span:first-child {
    padding: 10px 16px;
}

.cj-steps--cta-solid .cj-steps__cta span:last-child {
    padding: 10px 12px;
    font-size: 16px;
}

.cj-steps--cta-solid .cj-steps__cta:hover {
    background: #ff6a1a;
}

/* ================================================
   CTA STYLE - Text
   ================================================ */

.cj-steps--cta-text .cj-steps__cta {
    gap: 8px;
    color: #eb5d0f;
}

.cj-steps--cta-text .cj-steps__cta span:first-child {
    padding: 0;
}

.cj-steps--cta-text .cj-steps__cta span:last-child {
    padding: 0;
    font-size: 16px;
}

.cj-steps--cta-text .cj-steps__cta:hover {
    text-decoration: underline;
}

/* ================================================
   RESPONSIVE
   ================================================ */

@media (max-width: 1100px) {
    .cj-steps--cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .cj-steps--cols-4 .cj-steps__item:nth-child(2) {
        border-right: none;
    }

    .cj-steps--cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Shared button cascade guard */
.cj-steps .cj-steps__cta.cj-button {
    min-height: 46px;
    height: 46px;
    align-items: stretch;
    gap: 0;
    font-family: var(--cj-font-display);
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1;
    border: 0;
}

.cj-steps .cj-steps__cta.cj-button span:first-child {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 0 16px;
}

.cj-steps .cj-steps__cta.cj-button span:last-child {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    min-width: 46px;
    min-height: 46px;
    padding: 0;
    font-size: 16px;
    border-left: 0;
}

.cj-steps--cta-split .cj-steps__cta.cj-button span:first-child,
.cj-steps--cta-solid .cj-steps__cta.cj-button span:first-child {
    color: var(--cj-color-black);
    background: var(--cj-color-orange);
}

.cj-steps--cta-split .cj-steps__cta.cj-button span:last-child,
.cj-steps--cta-solid .cj-steps__cta.cj-button span:last-child {
    color: var(--cj-color-black);
    background: var(--cj-color-white);
}

@media (max-width: 700px) {
    .cj-steps--cols-2,
    .cj-steps--cols-3,
    .cj-steps--cols-4 {
        grid-template-columns: 1fr;
    }

    .cj-steps__item {
        min-height: 0;
        padding: 28px 22px 32px;
        border-right: none !important;
    }

    .cj-steps--dark .cj-steps__item {
        border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    }

    .cj-steps--light .cj-steps__item {
        border-bottom: 1px solid rgba(21, 19, 15, 0.14);
    }

    .cj-steps__item:last-child {
        border-bottom: none !important;
    }

    .cj-steps__number {
        margin-bottom: 16px;
        font-size: 38px;
    }

    .cj-steps .cj-steps__cta.cj-button {
        min-height: 46px;
        height: 46px;
    }

    .cj-steps .cj-steps__cta.cj-button span:last-child {
        width: 46px;
        min-width: 46px;
        padding: 0;
    }
}