/*==================================================
PROCESS PREVIEW
==================================================*/

.process-preview{

    padding:110px 0;

    background:#ffffff;

    position:relative;

    overflow:hidden;

}

.process-preview .container{

    max-width:1280px;

    margin:auto;

    padding:0 20px;

}

/*==================================================
SECTION HEADER
==================================================*/

.process-preview .section-heading{

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

}

.process-preview .section-tag{

    display:inline-block;

    padding:8px 22px;

    border-radius:40px;

    background:#f3efff;

    color:#6d28d9;

    font-size:.95rem;

    font-weight:700;

    margin-bottom:22px;

}

.process-preview h2{

    font-size:2.7rem;

    color:#241c44;

    line-height:1.2;

    margin-bottom:22px;

}

.process-preview .section-heading p{

    color:#666;

    font-size:1.08rem;

    line-height:1.9;

}

/*==================================================
GRID
==================================================*/

.process-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

    position:relative;

    z-index:2;

}

/*==================================================
CARD
==================================================*/

.process-card{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    padding:45px 30px;

    background:#fff;

    border-radius:28px;

    border:1px solid rgba(109,40,217,.08);

    box-shadow:0 12px 35px rgba(0,0,0,.05);

    transition:
        transform .35s ease,
        box-shadow .35s ease;

    overflow:hidden;

}

.process-card:hover{

    transform:translateY(-10px);

    box-shadow:0 28px 60px rgba(0,0,0,.10);

}

.process-card h3{

    font-size:1.35rem;

    color:#241c44;

    margin:22px 0 18px;

}

.process-card p{

    color:#666;

    line-height:1.85;

    font-size:1rem;

    margin:0;

}

/*==================================================
PROCESS NUMBER
==================================================*/

.process-number{

    position:absolute;

    top:18px;

    right:24px;

    font-size:4.8rem;

    font-weight:800;

    line-height:1;

    color:#f3efff;

    opacity:.9;

    user-select:none;

    transition:.35s ease;

}

.process-card:hover .process-number{

    transform:scale(1.05);

    color:#e7dcff;

}

/*==================================================
PROCESS ICON
==================================================*/

.process-icon{

    width:88px;

    height:88px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    font-size:2.3rem;

    position:relative;

    z-index:2;

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.process-card:hover .process-icon{

    transform:translateY(-5px) scale(1.08);

}

/*==================================================
ICON COLORS
==================================================*/

/* WhatsApp */

.process-card:nth-child(1) .process-icon{

    background:#e8fff2;

    box-shadow:0 15px 35px rgba(37,211,102,.15);

}

/* Calendar */

.process-card:nth-child(2) .process-icon{

    background:#fff8e5;

    box-shadow:0 15px 35px rgba(246,184,0,.18);

}

/* Crystal Ball */

.process-card:nth-child(3) .process-icon{

    background:#f3efff;

    box-shadow:0 15px 35px rgba(109,40,217,.16);

}

/* Sparkles */

.process-card:nth-child(4) .process-icon{

    background:#eef4ff;

    box-shadow:0 15px 35px rgba(79,70,229,.18);

}

/*==================================================
PREMIUM HALO
==================================================*/

.process-card::before{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    top:-120px;

    right:-120px;

    border-radius:50%;

    filter:blur(70px);

    opacity:.18;

    transition:
        opacity .35s ease,
        transform .35s ease;

}

/* Étape 1 */

.process-card:nth-child(1)::before{

    background:#25d366;

}

/* Étape 2 */

.process-card:nth-child(2)::before{

    background:#f6b800;

}

/* Étape 3 */

.process-card:nth-child(3)::before{

    background:#8b5cf6;

}

/* Étape 4 */

.process-card:nth-child(4)::before{

    background:#4f46e5;

}

.process-card:hover::before{

    opacity:.30;

    transform:scale(1.15);

}

/*==================================================
PROCESS TIMELINE
==================================================*/

.process-grid{

    position:relative;

}

/* Ligne reliant les 4 étapes */

.process-grid::before{

    content:"";

    position:absolute;

    top:44px;

    left:12%;

    width:76%;

    height:2px;

    background:linear-gradient(
        to right,
        #25d366,
        #f6b800,
        #8b5cf6,
        #4f46e5
    );

    opacity:.18;

    z-index:0;

}

/*==================================================
CARD PREMIUM EFFECT
==================================================*/

.process-card{

    z-index:2;

}

.process-card::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:28px;

    border:1px solid transparent;

    transition:.35s ease;

    pointer-events:none;

}

/*==================================================
HOVER BORDER
==================================================*/

.process-card:nth-child(1):hover::after{

    border-color:rgba(37,211,102,.25);

}

.process-card:nth-child(2):hover::after{

    border-color:rgba(246,184,0,.30);

}

.process-card:nth-child(3):hover::after{

    border-color:rgba(139,92,246,.28);

}

.process-card:nth-child(4):hover::after{

    border-color:rgba(79,70,229,.28);

}

/*==================================================
TEXT ANIMATION
==================================================*/

.process-card h3{

    transition:.35s ease;

}

.process-card:hover h3{

    color:#6d28d9;

}

.process-card p{

    transition:.35s ease;

}

.process-card:hover p{

    color:#444;

}

/*==================================================
ICON ANIMATION
==================================================*/

.process-card:hover .process-icon{

    transform:translateY(-6px) scale(1.08) rotate(5deg);

}

/*==================================================
NUMBER ANIMATION
==================================================*/

.process-card:hover .process-number{

    transform:scale(1.08);

    opacity:1;

}

/*==================================================
SOFT SHADOW
==================================================*/

.process-card:hover{

    box-shadow:
        0 18px 50px rgba(0,0,0,.08),
        0 0 35px rgba(109,40,217,.08);

}

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

@media(max-width:1100px){

.process-grid{

    grid-template-columns:repeat(2,1fr);

    gap:30px;

}

.process-grid::before{

    display:none;

}

}

@media(max-width:768px){

.process-preview{

    padding:80px 0;

}

.process-preview .section-heading{

    margin-bottom:45px;

}

.process-preview h2{

    font-size:2rem;

}

.process-preview .section-heading p{

    font-size:1rem;

}

.process-grid{

    grid-template-columns:1fr;

    gap:24px;

}

.process-card{

    padding:36px 28px;

}

.process-number{

    font-size:3.8rem;

}

.process-icon{

    width:74px;

    height:74px;

    font-size:2rem;

}

.process-card h3{

    font-size:1.25rem;

}

}

@media(max-width:480px){

.process-preview{

    padding:70px 0;

}

.process-preview h2{

    font-size:1.75rem;

}

.process-card{

    padding:30px 22px;

}

.process-number{

    font-size:3.2rem;

}

.process-icon{

    width:66px;

    height:66px;

    font-size:1.8rem;

}

.process-card p{

    font-size:.96rem;

}

}

/*==================================================
ACCESSIBILITY
==================================================*/

.process-preview a:focus-visible{

    outline:2px solid #6d28d9;

    outline-offset:4px;

    border-radius:8px;

}

/*==================================================
REDUCED MOTION
==================================================*/

@media(prefers-reduced-motion:reduce){

.process-card,

.process-icon,

.process-number,

.process-card::before,

.process-card::after{

    transition:none !important;

    animation:none !important;

}

}

/*==================================================
PERFORMANCE
==================================================*/

.process-card,

.process-icon,

.process-number{

    will-change:transform;

}

/*==================================================
PROCESS DISPLAY FIX
==================================================*/

.process-preview .process-grid{

    display:grid;

    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:30px;

    position:relative;

    width:100%;

    height:auto;

    min-height:1px;

    opacity:1;

    visibility:visible;

}

.process-preview .process-card{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    width:100%;

    height:auto;

    min-height:360px;

    padding:45px 30px;

    background:#ffffff;

    opacity:1 !important;

    visibility:visible !important;

    transform:none;

    z-index:3;

}

.process-preview .process-card:hover{

    transform:translateY(-10px);

}

@media(max-width:1100px){

    .process-preview .process-grid{

        grid-template-columns:repeat(2,minmax(0,1fr));

    }

}

@media(max-width:768px){

    .process-preview .process-grid{

        grid-template-columns:1fr;

    }

}

/*==================================================
EMERGENCY PROCESS VISIBILITY FIX
==================================================*/

html body .process-preview .process-grid .process-card{

    display:flex !important;

    opacity:1 !important;

    visibility:visible !important;

    transform:none !important;

    animation:none !important;

    transition:none !important;

}

/*==================================================
PROCESS MOBILE VISIBILITY FIX
==================================================*/

@media(max-width:768px){

    html body .process-preview{

        display:block !important;

        height:auto !important;

        min-height:auto !important;

        overflow:visible !important;

    }

    html body .process-preview .process-grid{

        display:grid !important;

        grid-template-columns:1fr !important;

        width:100% !important;

        height:auto !important;

        opacity:1 !important;

        visibility:visible !important;

        overflow:visible !important;

    }

    html body .process-preview .process-grid .process-card{

        display:flex !important;

        position:relative !important;

        width:100% !important;

        height:auto !important;

        min-height:320px !important;

        opacity:1 !important;

        visibility:visible !important;

        transform:none !important;

        animation:none !important;

        transition:none !important;

        z-index:3 !important;

    }

    html body .process-preview .process-card::before,
    html body .process-preview .process-card::after{

        visibility:visible !important;

    }

}

/*==================================================
FAQ PREMIUM FINISH
==================================================*/

.faq-question span:first-child{

    position:relative;

    z-index:2;

    transition:
        color .35s ease,
        transform .35s ease;

}

.faq-item:hover .faq-question span:first-child{

    color:#6d28d9;

}

.faq-item.active .faq-question span:first-child{

    color:#6d28d9;

}

/*==================================================
ACTIVE GLOW
==================================================*/

.faq-item::before{

    content:"";

    position:absolute;

    top:-100px;

    right:-100px;

    width:220px;

    height:220px;

    border-radius:50%;

    background:#b48cff;

    filter:blur(75px);

    opacity:0;

    pointer-events:none;

    transition:
        opacity .4s ease,
        transform .4s ease;

}

.faq-item.active::before{

    opacity:.16;

    transform:scale(1.15);

}

/*==================================================
BUTTON
==================================================*/

.faq-preview .section-button{

    text-align:center;

    margin-top:50px;

}

.faq-preview .section-button .btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:15px 36px;

    border-radius:40px;

    text-decoration:none;

    font-weight:700;

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.faq-preview .section-button .btn:hover{

    transform:translateY(-3px);

    box-shadow:0 15px 35px rgba(0,0,0,.12);

}

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

@media(max-width:768px){

    .faq-preview{

        padding:75px 0;

    }

    .faq-preview .section-heading{

        margin-bottom:40px;

    }

    .faq-preview h2{

        font-size:2rem;

    }

    .faq-preview .section-heading p{

        font-size:1rem;

    }

    .faq-preview-list{

        gap:12px;

    }

    .faq-question{

        padding:21px 20px;

        gap:15px;

        font-size:1rem;

    }

    .faq-icon{

        flex:0 0 38px;

        width:38px;

        height:38px;

        font-size:1.35rem;

    }

    .faq-answer-content{

        padding:0 20px 22px;

    }

}

/*==================================================
SMALL MOBILE
==================================================*/

@media(max-width:480px){

    .faq-preview{

        padding:65px 0;

    }

    .faq-preview h2{

        font-size:1.75rem;

    }

    .faq-question{

        padding:19px 17px;

        font-size:.96rem;

    }

    .faq-icon{

        flex:0 0 35px;

        width:35px;

        height:35px;

    }

    .faq-answer-content{

        padding:0 17px 20px;

    }

    .faq-answer-content p{

        font-size:.95rem;

        line-height:1.75;

    }

    .faq-preview .section-button{

        margin-top:40px;

    }

}

/*==================================================
ACCESSIBILITY
==================================================*/

.faq-question:focus-visible{

    outline:2px solid #6d28d9;

    outline-offset:-4px;

}

/*==================================================
REDUCED MOTION
==================================================*/

@media(prefers-reduced-motion:reduce){

    .faq-item,
    .faq-icon,
    .faq-answer,
    .faq-item::before,
    .faq-question span{

        transition:none !important;

    }

}