/*=========================================================
        CREDOVA BANK
        PRÊT PERSONNEL PREMIUM
        CSS - BLOC 1 / 3

        CORE
        HERO
        AVANTAGES
==========================================================*/



/*=========================================================
        VARIABLES PREMIUM
==========================================================*/

:root{


    --personal-primary:#0b57d0;

    --personal-primary-dark:#063b99;

    --personal-secondary:#00b894;


    --personal-dark:#101828;

    --personal-text:#475467;

    --personal-light:#f8fafc;


    --personal-white:#ffffff;


    --personal-border:#e5e7eb;


    --personal-shadow:
    0 20px 60px rgba(15,23,42,.12);


    --personal-shadow-hover:
    0 30px 80px rgba(11,87,208,.20);


    --personal-radius:24px;


    --personal-transition:
    all .35s ease;



}





/*=========================================================
        RESET
==========================================================*/


.personal-container,
.personal-container *{

    box-sizing:border-box;

}



.personal-container{

    width:100%;

    max-width:1240px;

    margin:auto;

    padding-left:25px;

    padding-right:25px;

}



.personal-hero,
.personal-advantages,
.personal-showcase,
.personal-process,
.personal-simulator,
.personal-services,
.personal-testimonials,
.personal-faq,
.personal-final-cta{

    width:100%;

    overflow:hidden;

}



.personal-title{

    max-width:750px;

    margin:0 auto 70px;

    text-align:center;

}



.personal-title span,
.personal-small-title{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:var(--personal-primary);

    font-size:14px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.8px;

    margin-bottom:18px;

}



.personal-title h2{

    margin:0;

    font-size:42px;

    line-height:1.2;

    color:var(--personal-dark);

    font-weight:800;

}



.personal-title p{

    margin-top:20px;

    color:var(--personal-text);

    font-size:17px;

    line-height:1.7;

}





/*=========================================================
        HERO SECTION
==========================================================*/


.personal-hero{


    padding:100px 0 80px;

    background:
    linear-gradient(
    135deg,
    #ffffff,
    #f3f7ff
    );


}




.personal-hero-grid{


    display:grid;

    grid-template-columns:
    1fr 1fr;

    align-items:center;

    gap:70px;


}





.personal-badge{


    display:inline-flex;

    align-items:center;

    gap:10px;

    background:
    rgba(11,87,208,.08);


    color:var(--personal-primary);


    padding:12px 20px;


    border-radius:50px;


    font-size:14px;


    font-weight:700;


    margin-bottom:25px;


}




.personal-hero-content h1{


    font-size:58px;

    line-height:1.1;

    letter-spacing:-1.5px;

    color:var(--personal-dark);

    font-weight:850;

    margin:0 0 25px;


}



.personal-hero-content h1 span{


    display:block;

    color:var(--personal-primary);


}





.personal-hero-content p{


    font-size:18px;

    line-height:1.8;

    color:var(--personal-text);

    max-width:620px;

    margin-bottom:35px;


}





/*=========================================================
        BUTTONS
==========================================================*/



.personal-hero-buttons{


    display:flex;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;


}





.personal-btn-primary,
.personal-btn-secondary{


    height:58px;

    padding:0 32px;

    border-radius:16px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    text-decoration:none;

    font-weight:700;

    transition:var(--personal-transition);

}



.personal-btn-primary{


    background:
    linear-gradient(
    135deg,
    var(--personal-primary),
    #3284ff
    );


    color:white;


    box-shadow:
    0 15px 35px rgba(11,87,208,.25);


}



.personal-btn-primary:hover{


    transform:translateY(-4px);


    box-shadow:
    0 25px 45px rgba(11,87,208,.35);


}



.personal-btn-secondary{


    background:white;

    border:1px solid var(--personal-border);

    color:var(--personal-dark);


}



.personal-btn-secondary:hover{


    border-color:var(--personal-primary);

    color:var(--personal-primary);


}







/*=========================================================
        STATS
==========================================================*/


.personal-stats{


    display:flex;

    gap:20px;

    margin-top:55px;

    flex-wrap:wrap;


}



.personal-stat{


    background:white;

    padding:22px 28px;

    border-radius:20px;

    box-shadow:
    0 10px 30px rgba(15,23,42,.06);


    min-width:150px;


}



.personal-stat h3{


    margin:0 0 8px;

    font-size:28px;

    color:var(--personal-dark);


}



.personal-stat span{


    color:var(--personal-text);

    font-size:14px;


}







/*=========================================================
        HERO IMAGE
==========================================================*/



.personal-hero-image{


    position:relative;


}



.personal-hero-image img{


    width:100%;

    height:620px;

    object-fit:cover;


    border-radius:35px;


    box-shadow:
    var(--personal-shadow);


}






.personal-floating-card{


    position:absolute;


    bottom:35px;

    left:-35px;


    display:flex;

    align-items:center;

    gap:18px;


    background:white;


    padding:22px;


    border-radius:22px;


    box-shadow:
    var(--personal-shadow);


}



.personal-floating-card i{


    font-size:35px;

    color:#16a34a;


}



.personal-floating-card strong{


    display:block;

    color:var(--personal-dark);


}



.personal-floating-card p{


    margin:5px 0 0;

    color:var(--personal-text);

    font-size:14px;


}






/*=========================================================
        AVANTAGES
==========================================================*/


.personal-advantages{


    padding:100px 0;


    background:white;


}




.personal-grid{


    display:grid;


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


    gap:28px;


}





.personal-card{


    padding:35px 30px;


    background:white;


    border-radius:var(--personal-radius);


    border:1px solid var(--personal-border);


    transition:var(--personal-transition);


}




.personal-card:hover{


    transform:translateY(-10px);


    box-shadow:
    var(--personal-shadow-hover);


    border-color:transparent;


}





.personal-icon{


    width:65px;

    height:65px;


    border-radius:20px;


    display:flex;


    align-items:center;


    justify-content:center;


    background:
    rgba(11,87,208,.1);


    color:var(--personal-primary);


    font-size:26px;


    margin-bottom:25px;


}



.personal-card h3{


    margin:0 0 15px;


    font-size:21px;


    color:var(--personal-dark);


}



.personal-card p{


    color:var(--personal-text);


    line-height:1.7;


    margin:0;


}






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


@media(max-width:1100px){


.personal-hero-grid{


    grid-template-columns:1fr;

}


.personal-hero-content{


    text-align:center;

}



.personal-hero-content p{


    margin-left:auto;

    margin-right:auto;


}



.personal-hero-buttons,
.personal-stats{


    justify-content:center;


}



.personal-grid{


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

}



.personal-hero-image{


    max-width:650px;

    margin:auto;


}



.personal-title h2{


    font-size:36px;


}



}







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


@media(max-width:600px){



.personal-container{


    padding-left:18px;

    padding-right:18px;


}




.personal-hero{


    padding:60px 0;


}



.personal-hero-content h1{


    font-size:38px;


}



.personal-hero-content p{


    font-size:16px;


}



.personal-btn-primary,
.personal-btn-secondary{


    width:100%;


}



.personal-stats{


    flex-direction:column;


}



.personal-stat{


    width:100%;

    text-align:center;


}




.personal-hero-image img{


    height:400px;


    border-radius:25px;


}



.personal-floating-card{


    left:10px;

    right:10px;

    bottom:20px;


    padding:16px;


}



.personal-grid{


    grid-template-columns:1fr;


}



.personal-title{


    margin-bottom:45px;


}



.personal-title h2{


    font-size:30px;


}



.personal-title p{


    font-size:15px;


}



}
/*=========================================================
        CREDOVA BANK
        PRÊT PERSONNEL PREMIUM
        CSS - BLOC 2 / 3

        PROCESS
        SIMULATEUR
        SERVICES PREMIUM
==========================================================*/






/*=========================================================
        PROCESSUS 3 ÉTAPES
==========================================================*/


.personal-process{


    padding:100px 0;


    background:
    #f8fafc;


}





.personal-steps{


    display:grid;


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


    gap:35px;


}





.personal-step{


    background:white;


    padding:45px 35px;


    border-radius:28px;


    text-align:center;


    position:relative;


    border:1px solid var(--personal-border);


    transition:
    var(--personal-transition);


}



.personal-step:hover{


    transform:translateY(-10px);


    box-shadow:
    var(--personal-shadow-hover);


    border-color:transparent;


}





.personal-step-number{


    width:85px;


    height:85px;


    margin:0 auto 25px;


    border-radius:50%;


    display:flex;


    justify-content:center;


    align-items:center;


    font-size:28px;


    font-weight:800;


    color:white;


    background:


    linear-gradient(

    135deg,

    var(--personal-primary),

    #3284ff

    );


    box-shadow:


    0 15px 35px rgba(11,87,208,.25);


}



.personal-step h3{


    margin:0 0 15px;


    color:var(--personal-dark);


    font-size:23px;


}



.personal-step p{


    margin:0;


    color:var(--personal-text);


    line-height:1.7;


}







/*=========================================================
        SIMULATEUR PREMIUM
==========================================================*/



.personal-simulator{


    padding:100px 0;


    background:white;


}




.personal-simulator-card{


    display:grid;


    grid-template-columns:
    .9fr 1.1fr;


    gap:60px;


    padding:60px;


    border-radius:35px;


    background:


    linear-gradient(

    135deg,

    #f4f8ff,

    #ffffff

    );


    box-shadow:


    var(--personal-shadow);


}





.personal-simulator-left h2{


    font-size:42px;


    line-height:1.2;


    color:var(--personal-dark);


    margin:0 0 20px;


}




.personal-simulator-left p{


    color:var(--personal-text);


    font-size:17px;


    line-height:1.7;


}







/*=========================================================
        FORMULAIRE SIMULATEUR
==========================================================*/


.personal-simulator-right{


    display:grid;


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


    gap:25px;


}





.personal-input-group{


    display:flex;


    flex-direction:column;


    gap:10px;


}



.personal-input-group label{


    font-size:14px;


    font-weight:700;


    color:var(--personal-dark);


}




.personal-input-group input,
.personal-input-group select{


    width:100%;


    height:58px;


    border-radius:15px;


    border:1px solid var(--personal-border);


    background:white;


    padding:0 18px;


    font-size:16px;


    color:var(--personal-dark);


    outline:none;


    transition:.3s;


}





.personal-input-group input:focus,
.personal-input-group select:focus{


    border-color:var(--personal-primary);


    box-shadow:

    0 0 0 4px rgba(11,87,208,.1);


}





.personal-simulator-btn{


    grid-column:

    1 / -1;


    height:60px;


    border-radius:18px;


    display:flex;


    justify-content:center;


    align-items:center;


    gap:12px;


    background:


    linear-gradient(

    135deg,

    var(--personal-primary),

    #3284ff

    );


    color:white;


    text-decoration:none;


    font-weight:700;


    font-size:16px;


    transition:.35s;


}




.personal-simulator-btn:hover{


    transform:translateY(-4px);


    box-shadow:


    0 20px 40px rgba(11,87,208,.3);


}








/*=========================================================
        SERVICES PREMIUM
==========================================================*/


.personal-services{


    padding:100px 0;


    background:


    #f8fafc;


}





.personal-services-grid{


    display:grid;


    grid-template-columns:


    repeat(3,1fr);


    gap:30px;


}





.personal-service{


    background:white;


    padding:35px;


    border-radius:26px;


    border:1px solid var(--personal-border);


    transition:


    var(--personal-transition);


}



.personal-service:hover{


    transform:translateY(-8px);


    box-shadow:


    var(--personal-shadow-hover);


    border-color:transparent;


}





.personal-service i{


    width:65px;


    height:65px;


    border-radius:18px;


    display:flex;


    justify-content:center;


    align-items:center;


    background:


    rgba(11,87,208,.1);


    color:


    var(--personal-primary);


    font-size:26px;


    margin-bottom:25px;


}





.personal-service h3{


    margin:0 0 15px;


    font-size:22px;


    color:var(--personal-dark);


}




.personal-service p{


    margin:0;


    color:var(--personal-text);


    line-height:1.7;


}









/*=========================================================
        ANIMATIONS PREMIUM
==========================================================*/


.personal-card,
.personal-step,
.personal-service,
.personal-simulator-card{


    animation:

    personalFade .7s ease both;


}




@keyframes personalFade{


from{


    opacity:0;


    transform:

    translateY(30px);


}



to{


    opacity:1;


    transform:

    translateY(0);


}


}










/*=========================================================
        TABLET
==========================================================*/


@media(max-width:1000px){



.personal-steps{


    grid-template-columns:1fr;


}



.personal-simulator-card{


    grid-template-columns:1fr;


    padding:40px;


}



.personal-services-grid{


    grid-template-columns:

    repeat(2,1fr);


}



.personal-simulator-left{


    text-align:center;


}



}








/*=========================================================
        MOBILE SMARTPHONE
        IPHONE SAMSUNG XIAOMI
==========================================================*/


@media(max-width:600px){



.personal-process,
.personal-simulator,
.personal-services{


    padding:65px 0;


}




.personal-step{


    padding:35px 22px;


}



.personal-step h3{


    font-size:20px;


}




.personal-simulator-card{


    padding:25px 18px;


    border-radius:25px;


}



.personal-simulator-left h2{


    font-size:30px;


}



.personal-simulator-right{


    grid-template-columns:1fr;


}



.personal-input-group input,
.personal-input-group select{


    height:55px;


    font-size:15px;


}



.personal-simulator-btn{


    height:56px;


}



.personal-services-grid{


    grid-template-columns:1fr;


}



.personal-service{


    padding:28px 22px;


}




}

/*=========================================================
        CREDOVA BANK
        PRÊT PERSONNEL PREMIUM
        CSS - BLOC 3 / 3

        TESTIMONIALS
        FAQ
        CTA FINAL
==========================================================*/







/*=========================================================
        TÉMOIGNAGES CLIENTS
==========================================================*/


.personal-testimonials{


    padding:100px 0;


    background:white;


}




.personal-testimonials-grid{


    display:grid;


    grid-template-columns:


    repeat(3,1fr);


    gap:30px;


}





.personal-testimonial-card{


    background:white;


    border-radius:28px;


    padding:35px;


    border:1px solid var(--personal-border);


    transition:var(--personal-transition);


}




.personal-testimonial-card:hover{


    transform:translateY(-10px);


    box-shadow:var(--personal-shadow-hover);


    border-color:transparent;


}





.testimonial-user{


    display:flex;


    align-items:center;


    gap:18px;


    margin-bottom:20px;


}





.testimonial-avatar{


    width:60px;


    height:60px;


    border-radius:50%;


    display:flex;


    justify-content:center;


    align-items:center;


    background:


    linear-gradient(

    135deg,

    var(--personal-primary),

    #3284ff

    );


    color:white;


    font-size:22px;


}




.testimonial-user h3{


    margin:0 0 5px;


    color:var(--personal-dark);


    font-size:18px;


}



.testimonial-user span{


    color:var(--personal-text);


    font-size:14px;


}




.testimonial-stars{


    display:flex;


    gap:5px;


    color:#fbbf24;


    margin-bottom:20px;


}





.personal-testimonial-card p{


    color:var(--personal-text);


    line-height:1.8;


    font-size:16px;


    margin:0;


}









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


.personal-faq{


    padding:100px 0;


    background:


    #f8fafc;


}




.faq-wrapper{


    max-width:900px;


    margin:auto;


    display:flex;


    flex-direction:column;


    gap:18px;


}





.faq-item{


    background:white;


    border-radius:22px;


    overflow:hidden;


    border:1px solid var(--personal-border);


    transition:.3s;


}




.faq-item:hover{


    box-shadow:


    0 15px 40px rgba(15,23,42,.08);


}





.faq-question{


    width:100%;


    min-height:75px;


    padding:0 30px;


    background:white;


    border:none;


    display:flex;


    align-items:center;


    justify-content:space-between;


    cursor:pointer;


    font-size:17px;


    font-weight:700;


    color:var(--personal-dark);


    text-align:left;


}





.faq-question i{


    width:35px;


    height:35px;


    border-radius:50%;


    display:flex;


    justify-content:center;


    align-items:center;


    background:


    rgba(11,87,208,.1);


    color:var(--personal-primary);


    transition:.35s;


}





.faq-item.active .faq-question i{


    transform:rotate(45deg);


    background:


    var(--personal-primary);


    color:white;


}





.faq-answer{


    max-height:0;


    overflow:hidden;


    transition:


    max-height .4s ease;


}





.faq-answer p{


    padding:

    0 30px 30px;


    margin:0;


    color:var(--personal-text);


    line-height:1.8;


}









/*=========================================================
        CTA FINAL PREMIUM
==========================================================*/


.personal-final-cta{


    padding:100px 0;


    background:white;


}





.personal-cta-box{


    border-radius:35px;


    padding:60px;


    display:flex;


    align-items:center;


    justify-content:space-between;


    gap:40px;


    background:


    linear-gradient(

    135deg,

    #0b57d0,

    #063b99

    );


    color:white;


    box-shadow:


    0 30px 80px rgba(11,87,208,.25);


}




.personal-cta-box span{


    font-size:14px;


    text-transform:uppercase;


    letter-spacing:1px;


    opacity:.8;


    font-weight:700;


}





.personal-cta-box h2{


    margin:15px 0;


    font-size:42px;


    line-height:1.2;


    color:white;


}




.personal-cta-box p{


    margin:0;


    font-size:17px;


    opacity:.9;


}





.personal-cta-box .personal-btn-primary{


    background:white;


    color:var(--personal-primary);


    flex-shrink:0;


}





.personal-cta-box .personal-btn-primary:hover{


    transform:translateY(-5px);


    box-shadow:


    0 20px 45px rgba(0,0,0,.2);


}









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


@media(max-width:1000px){



.personal-testimonials-grid{


    grid-template-columns:


    repeat(2,1fr);


}



.personal-cta-box{


    flex-direction:column;


    text-align:center;


}




.personal-cta-box h2{


    font-size:36px;


}



}









/*=========================================================
        RESPONSIVE SMARTPHONE
        IPHONE / SAMSUNG
==========================================================*/


@media(max-width:600px){



.personal-testimonials,
.personal-faq,
.personal-final-cta{


    padding:65px 0;


}





.personal-testimonials-grid{


    grid-template-columns:1fr;


}




.personal-testimonial-card{


    padding:25px 20px;


}




.faq-wrapper{


    gap:12px;


}



.faq-question{


    min-height:70px;


    padding:0 18px;


    font-size:15px;


    gap:15px;


}



.faq-question i{


    flex-shrink:0;


}



.faq-answer p{


    padding:

    0 18px 25px;


    font-size:15px;


}




.personal-cta-box{


    padding:35px 22px;


    border-radius:25px;


}




.personal-cta-box h2{


    font-size:30px;


}




.personal-cta-box p{


    font-size:15px;


}



.personal-cta-box .personal-btn-primary{


    width:100%;


}



}




/*=========================================================
        PETITS SMARTPHONES
==========================================================*/


@media(max-width:380px){



.personal-title h2{


    font-size:27px;


}



.personal-cta-box h2{


    font-size:26px;


}



.faq-question{


    font-size:14px;


}



}

/*=========================================================
        PERSONAL SHOWCASE
        SECTION ACCOMPAGNEMENT PREMIUM
==========================================================*/


.personal-showcase{


    padding:110px 0;


    background:#ffffff;


    position:relative;


    overflow:hidden;


}




.personal-showcase-grid{


    display:grid;


    grid-template-columns:


    1fr 1fr;


    align-items:center;


    gap:80px;


}






/*=========================================================
        IMAGE PREMIUM
==========================================================*/


.personal-showcase-image{


    position:relative;


}



.personal-showcase-image::before{


    content:"";


    position:absolute;


    width:180px;


    height:180px;


    background:


    rgba(11,87,208,.12);


    border-radius:50%;


    top:-50px;


    left:-50px;


    z-index:0;


}



.personal-showcase-image img{


    position:relative;


    z-index:1;


    width:100%;


    height:560px;


    object-fit:cover;


    border-radius:35px;


    box-shadow:


    0 25px 70px rgba(15,23,42,.15);


    transition:.45s ease;


}




.personal-showcase-image:hover img{


    transform:


    translateY(-8px);


    box-shadow:


    0 35px 90px rgba(11,87,208,.25);


}






/*=========================================================
        CONTENT
==========================================================*/


.personal-showcase-content{


    max-width:600px;


}




.personal-small-title{


    display:inline-flex;


    align-items:center;


    gap:10px;


    color:


    var(--personal-primary);


    font-size:14px;


    font-weight:800;


    text-transform:uppercase;


    letter-spacing:1px;


    margin-bottom:18px;


}





.personal-small-title::before{


    content:"";


    width:35px;


    height:3px;


    border-radius:20px;


    background:


    var(--personal-primary);


}







.personal-showcase-content h2{


    margin:0 0 25px;


    font-size:42px;


    line-height:1.2;


    letter-spacing:-.8px;


    color:


    var(--personal-dark);


    font-weight:850;


}





.personal-showcase-content p{


    margin:0 0 35px;


    color:


    var(--personal-text);


    font-size:17px;


    line-height:1.8;


}






/*=========================================================
        LISTE AVANTAGES
==========================================================*/


.personal-list{


    list-style:none;


    padding:0;


    margin:0;


    display:flex;


    flex-direction:column;


    gap:18px;


}





.personal-list li{


    display:flex;


    align-items:center;


    gap:15px;


    color:


    var(--personal-dark);


    font-size:16px;


    font-weight:600;


}





.personal-list li i{


    width:32px;


    height:32px;


    border-radius:50%;


    display:flex;


    justify-content:center;


    align-items:center;


    flex-shrink:0;


    background:


    rgba(11,87,208,.1);


    color:


    var(--personal-primary);


    font-size:14px;


    transition:.3s;


}





.personal-list li:hover i{


    background:


    var(--personal-primary);


    color:white;


    transform:


    rotate(360deg);


}







.personal-list li:hover{


    color:


    var(--personal-primary);


}








/*=========================================================
        TABLET
==========================================================*/


@media(max-width:1000px){



.personal-showcase{


    padding:80px 0;


}



.personal-showcase-grid{


    grid-template-columns:1fr;


    gap:50px;


}



.personal-showcase-image{


    max-width:650px;


    margin:auto;


}




.personal-showcase-content{


    text-align:center;


    margin:auto;


}



.personal-small-title{


    justify-content:center;


}



.personal-showcase-content h2{


    font-size:36px;


}



.personal-list{


    text-align:left;


}



}








/*=========================================================
        MOBILE SMARTPHONE
        IPHONE / SAMSUNG
==========================================================*/


@media(max-width:600px){



.personal-showcase{


    padding:60px 0;


}



.personal-showcase-image img{


    height:360px;


    border-radius:25px;


}



.personal-showcase-image::before{


    width:100px;


    height:100px;


}



.personal-showcase-content h2{


    font-size:30px;


    line-height:1.25;


}



.personal-showcase-content p{


    font-size:15px;


    line-height:1.7;


}



.personal-list{


    gap:15px;


}



.personal-list li{


    font-size:14px;


    align-items:flex-start;


}



.personal-list li i{


    width:28px;


    height:28px;


}



}







/*=========================================================
        PETITS SMARTPHONES
==========================================================*/


@media(max-width:380px){



.personal-showcase-content h2{


    font-size:26px;


}



.personal-list li{


    font-size:13px;


}



}