/*==========================================================
        PRÊT MÉDICAL PREMIUM 2026
        BLOC 1 / 3
==========================================================*/

:root{

--medical-primary:#178f67;
--medical-secondary:#21b884;
--medical-dark:#16352c;
--medical-light:#f5fcf9;
--medical-white:#ffffff;
--medical-border:#dcefe7;
--medical-text:#475569;
--medical-title:#17332d;
--medical-shadow:0 18px 60px rgba(15,50,40,.10);
--medical-radius:28px;
--medical-transition:.35s ease;

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

.medical-hero,
.medical-services,
.medical-showcase,
.medical-stats,
.medical-trust,
.medical-process,
.medical-simulator,
.medical-banner,
.medical-faq,
.medical-other-loans,
.medical-final-cta{

padding:110px 7%;
position:relative;
overflow:hidden;

}

.medical-hero{

background:linear-gradient(135deg,#effdf7,#ffffff);
padding-top:140px;

}

.medical-hero-container{

max-width:1450px;
margin:auto;
display:grid;
grid-template-columns:1.1fr .9fr;
gap:70px;
align-items:center;

}

.medical-badge{

display:inline-flex;
align-items:center;
gap:12px;
padding:13px 24px;
background:#dcf8ee;
border-radius:50px;
font-weight:700;
color:var(--medical-primary);
margin-bottom:28px;

}

.medical-badge i{

font-size:18px;

}

.medical-hero h1{

font-size:56px;
line-height:1.1;
font-weight:800;
color:var(--medical-title);
margin-bottom:25px;

}

.medical-hero p{

font-size:18px;
line-height:1.9;
color:var(--medical-text);
margin-bottom:40px;

}

.medical-hero-features{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
margin-bottom:45px;

}

.medical-feature{

background:#fff;
padding:24px;
border-radius:22px;
box-shadow:var(--medical-shadow);
display:flex;
align-items:center;
gap:18px;
transition:var(--medical-transition);

}

.medical-feature:hover{

transform:translateY(-8px);

}

.medical-feature i{

width:65px;
height:65px;
border-radius:50%;
background:#e8faf3;
display:flex;
align-items:center;
justify-content:center;
font-size:24px;
color:var(--medical-primary);
flex-shrink:0;

}

.medical-feature h4{

font-size:17px;
margin-bottom:4px;
color:var(--medical-title);

}

.medical-feature span{

font-size:14px;
color:#64748b;

}

.medical-buttons{

display:flex;
gap:18px;
flex-wrap:wrap;

}

.medical-btn-primary,
.medical-btn-secondary{

text-decoration:none;
padding:18px 34px;
border-radius:60px;
font-weight:700;
display:inline-flex;
align-items:center;
gap:12px;
transition:.35s;

}

.medical-btn-primary{

background:var(--medical-primary);
color:#fff;

}

.medical-btn-primary:hover{

background:#0f7857;
transform:translateY(-4px);

}

.medical-btn-secondary{

background:#fff;
color:var(--medical-primary);
border:2px solid var(--medical-border);

}

.medical-btn-secondary:hover{

background:#effcf7;

}

.medical-image-card{

position:relative;

}

.medical-image-card img{

width:100%;
border-radius:35px;
display:block;
box-shadow:0 30px 70px rgba(0,0,0,.15);

}

.medical-floating-card{

position:absolute;
background:#fff;
border-radius:22px;
padding:18px;
display:flex;
align-items:center;
gap:15px;
box-shadow:var(--medical-shadow);
animation:medicalFloat 4s ease-in-out infinite;

}

.medical-floating-card i{

width:55px;
height:55px;
border-radius:50%;
background:#ebfbf4;
display:flex;
justify-content:center;
align-items:center;
font-size:22px;
color:var(--medical-primary);

}

.card-one{

left:-30px;
top:8%;

}

.card-two{

right:-25px;
top:48%;

}

.card-three{

left:15%;
bottom:-20px;

}

@keyframes medicalFloat{

0%{transform:translateY(0);}
50%{transform:translateY(-10px);}
100%{transform:translateY(0);}

}

.medical-title,
.medical-heading{

max-width:820px;
margin:auto;
text-align:center;
margin-bottom:70px;

}

.medical-title span,
.medical-heading span{

display:inline-block;
background:#dcf8ee;
padding:12px 22px;
border-radius:40px;
font-weight:700;
color:var(--medical-primary);
margin-bottom:20px;

}

.medical-title h2,
.medical-heading h2{

font-size:45px;
color:var(--medical-title);
margin-bottom:20px;

}

.medical-title p,
.medical-heading p{

font-size:18px;
line-height:1.8;
color:var(--medical-text);

}

.medical-services-grid{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;

}

.medical-card{

background:#fff;
padding:38px;
border-radius:28px;
text-align:center;
box-shadow:var(--medical-shadow);
transition:.35s;

}

.medical-card:hover{

transform:translateY(-12px);

}

.medical-icon{

width:90px;
height:90px;
margin:auto;
margin-bottom:25px;
border-radius:50%;
background:#ebfaf5;
display:flex;
align-items:center;
justify-content:center;

}

.medical-icon i{

font-size:34px;
color:var(--medical-primary);

}

.medical-card h3{

font-size:24px;
margin-bottom:15px;
color:var(--medical-title);

}

.medical-card p{

line-height:1.8;
color:var(--medical-text);

}
/*==========================================================
        PRÊT MÉDICAL PREMIUM 2026
        CSS BLOC 2 / 3
        SHOWCASE • STATS • TRUST • PROCESS
        SIMULATEUR • BANNIÈRE
==========================================================*/

.medical-showcase{

background:#ffffff;

}

.medical-showcase-row{

max-width:1400px;
margin:auto;
display:grid;
grid-template-columns:1fr 1fr;
gap:80px;
align-items:center;

}

.medical-showcase-image{

position:relative;

}

.medical-showcase-image img{

width:100%;
display:block;
border-radius:35px;
box-shadow:0 25px 70px rgba(0,0,0,.12);

}

.medical-showcase-content span{

display:inline-block;
padding:12px 24px;
background:#dcf8ee;
color:var(--medical-primary);
font-weight:700;
border-radius:50px;
margin-bottom:22px;

}

.medical-showcase-content h2{

font-size:46px;
line-height:1.2;
margin-bottom:25px;
color:var(--medical-title);

}

.medical-showcase-content p{

font-size:18px;
line-height:1.9;
color:var(--medical-text);
margin-bottom:35px;

}

.medical-showcase-content ul{

list-style:none;

}

.medical-showcase-content li{

display:flex;
align-items:center;
gap:15px;
margin-bottom:18px;
font-size:17px;
color:var(--medical-text);

}

.medical-showcase-content li i{

width:38px;
height:38px;
border-radius:50%;
background:#e9fbf3;
display:flex;
align-items:center;
justify-content:center;
color:var(--medical-primary);
flex-shrink:0;

}

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

.medical-stats{

background:linear-gradient(135deg,#178f67,#24b17d);
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;

}

.medical-stat{

background:rgba(255,255,255,.08);
backdrop-filter:blur(15px);
border:1px solid rgba(255,255,255,.15);
padding:45px 25px;
border-radius:30px;
text-align:center;

}

.medical-stat h2{

font-size:48px;
font-weight:800;
color:#fff;
margin-bottom:12px;

}

.medical-stat span{

font-size:18px;
color:#eefcf8;

}

/*==============================
        TRUST SECTION
==============================*/

.medical-trust{

background:var(--medical-light);

}

.medical-trust-grid{

max-width:1450px;
margin:auto;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:35px;

}

.medical-trust-card{

background:#fff;
padding:45px 35px;
border-radius:30px;
box-shadow:var(--medical-shadow);
transition:.35s;

}

.medical-trust-card:hover{

transform:translateY(-12px);

}

.medical-trust-icon{

width:90px;
height:90px;
border-radius:50%;
background:#e9faf3;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:28px;

}

.medical-trust-icon i{

font-size:34px;
color:var(--medical-primary);

}

.medical-trust-card h3{

font-size:25px;
margin-bottom:18px;
color:var(--medical-title);

}

.medical-trust-card p{

line-height:1.9;
color:var(--medical-text);

}

/*==============================
        PROCESSUS
==============================*/

.medical-process{

background:#fff;

}

.medical-process-grid{

max-width:1400px;
margin:auto;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:28px;

}

.medical-step{

background:#fff;
border:1px solid var(--medical-border);
padding:45px 30px;
border-radius:28px;
text-align:center;
transition:.35s;

}

.medical-step:hover{

background:#178f67;
transform:translateY(-10px);

}

.medical-step:hover h3,
.medical-step:hover p,
.medical-step:hover .medical-step-number{

color:#fff;

}

.medical-step-number{

font-size:46px;
font-weight:800;
margin-bottom:22px;
color:var(--medical-primary);
transition:.35s;

}

.medical-step h3{

font-size:24px;
margin-bottom:16px;
color:var(--medical-title);
transition:.35s;

}

.medical-step p{

line-height:1.8;
color:var(--medical-text);
transition:.35s;

}

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

.medical-simulator{

background:#f7fcfa;
display:grid;
grid-template-columns:.9fr 1.1fr;
gap:70px;
align-items:center;

}

.medical-simulator-left span{

display:inline-block;
padding:12px 24px;
background:#dcf8ee;
border-radius:50px;
font-weight:700;
color:var(--medical-primary);
margin-bottom:22px;

}

.medical-simulator-left h2{

font-size:48px;
margin-bottom:22px;
color:var(--medical-title);

}

.medical-simulator-left p{

font-size:18px;
line-height:1.9;
color:var(--medical-text);

}

.medical-simulator-card{

background:#fff;
padding:45px;
border-radius:35px;
box-shadow:var(--medical-shadow);

}

.medical-input-group{

margin-bottom:24px;

}

.medical-input-group label{

display:block;
margin-bottom:10px;
font-weight:700;
color:var(--medical-title);

}

.medical-input-group input,
.medical-input-group select{

width:100%;
height:64px;
border-radius:18px;
border:1px solid var(--medical-border);
padding:0 20px;
font-size:16px;
outline:none;
transition:.3s;

}

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

border-color:var(--medical-primary);
box-shadow:0 0 0 5px rgba(23,143,103,.12);

}

.medical-simulator-btn{

display:flex;
justify-content:center;
align-items:center;
width:100%;
height:65px;
border-radius:18px;
background:var(--medical-primary);
color:#fff;
font-weight:700;
font-size:17px;
text-decoration:none;
margin-top:15px;
transition:.35s;

}

.medical-simulator-btn:hover{

background:#127555;

}

/*==============================
            BANNIÈRE
==============================*/

.medical-banner{

padding:120px 7%;
background:linear-gradient(135deg,#178f67,#24b17d);

}

.medical-banner-content{

max-width:1000px;
margin:auto;
text-align:center;

}

.medical-banner-content h2{

font-size:52px;
color:#fff;
margin-bottom:25px;

}

.medical-banner-content p{

font-size:20px;
line-height:1.8;
color:#eefcf8;
margin-bottom:40px;

}

.medical-banner-btn{

display:inline-flex;
align-items:center;
justify-content:center;
padding:20px 42px;
border-radius:60px;
background:#fff;
color:var(--medical-primary);
text-decoration:none;
font-weight:700;
font-size:17px;
transition:.35s;

}

.medical-banner-btn:hover{

transform:translateY(-6px);

}


/*==========================================================
        PRÊT MÉDICAL PREMIUM 2026
        CSS BLOC 3 / 3
        FAQ • AUTRES PRÊTS • CTA FINAL
        RESPONSIVE MOBILE PREMIUM
==========================================================*/

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

.medical-faq{

background:#ffffff;

}

.medical-faq-container{

max-width:1000px;
margin:60px auto 0;

}

.medical-faq-item{

background:#fff;
border:1px solid var(--medical-border);
border-radius:22px;
margin-bottom:20px;
overflow:hidden;
box-shadow:0 10px 35px rgba(0,0,0,.05);

}

.medical-faq-question{

width:100%;
padding:26px 30px;
background:#fff;
border:none;
cursor:pointer;
display:flex;
justify-content:space-between;
align-items:center;
font-size:19px;
font-weight:700;
color:var(--medical-title);
transition:.35s;

}

.medical-faq-question:hover{

background:#f7fcfa;

}

.medical-faq-question i{

font-size:18px;
color:var(--medical-primary);
transition:.35s;

}

.medical-faq-answer{

max-height:0;
overflow:hidden;
padding:0 30px;
font-size:16px;
line-height:1.9;
color:var(--medical-text);
transition:all .4s ease;

}

.medical-faq-item.active .medical-faq-answer{

max-height:350px;
padding:0 30px 28px;

}

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

transform:rotate(45deg);

}

/*==============================
        AUTRES PRÊTS
==============================*/

.medical-other-loans{

background:var(--medical-light);

}

.medical-loans-grid{

max-width:1400px;
margin:auto;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:35px;

}

.medical-loan-card{

background:#fff;
border-radius:30px;
overflow:hidden;
box-shadow:var(--medical-shadow);
transition:.35s;

}

.medical-loan-card:hover{

transform:translateY(-12px);

}

.medical-loan-card img{

width:100%;
height:270px;
object-fit:cover;
display:block;

}

.medical-loan-content{

padding:35px;

}

.medical-loan-content h3{

font-size:28px;
margin-bottom:16px;
color:var(--medical-title);

}

.medical-loan-content p{

line-height:1.8;
margin-bottom:28px;
color:var(--medical-text);

}

.medical-loan-content a{

display:inline-flex;
align-items:center;
gap:12px;
text-decoration:none;
font-weight:700;
color:var(--medical-primary);

}

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

.medical-final-cta{

background:linear-gradient(135deg,#0f6b4f,#178f67);

}

.medical-final-box{

max-width:1100px;
margin:auto;
padding:80px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.15);
backdrop-filter:blur(20px);
border-radius:35px;
text-align:center;

}

.medical-final-box span{

display:inline-block;
padding:12px 24px;
border-radius:50px;
background:rgba(255,255,255,.15);
color:#fff;
font-weight:700;
margin-bottom:25px;

}

.medical-final-box h2{

font-size:52px;
line-height:1.2;
color:#fff;
margin-bottom:25px;

}

.medical-final-box p{

font-size:19px;
line-height:1.9;
color:#edfdf8;
max-width:850px;
margin:auto auto 45px;

}

.medical-final-buttons{

display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;

}

.medical-apply-btn,
.medical-contact-btn{

display:inline-flex;
align-items:center;
justify-content:center;
gap:12px;
padding:18px 38px;
border-radius:60px;
font-weight:700;
text-decoration:none;
transition:.35s;

}

.medical-apply-btn{

background:#fff;
color:var(--medical-primary);

}

.medical-contact-btn{

background:transparent;
border:2px solid rgba(255,255,255,.4);
color:#fff;

}

.medical-apply-btn:hover,
.medical-contact-btn:hover{

transform:translateY(-6px);

}

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

@media(max-width:1100px){

.medical-hero-container,
.medical-showcase-row,
.medical-simulator{

grid-template-columns:1fr;

}

.medical-services-grid,
.medical-trust-grid,
.medical-process-grid,
.medical-loans-grid,
.medical-stats{

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

}

.medical-hero{

text-align:center;

}

.medical-buttons{

justify-content:center;

}

.medical-hero-features{

grid-template-columns:1fr;

}

}

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

@media(max-width:768px){

.medical-hero,
.medical-services,
.medical-showcase,
.medical-stats,
.medical-trust,
.medical-process,
.medical-simulator,
.medical-banner,
.medical-faq,
.medical-other-loans,
.medical-final-cta{

padding:70px 20px;

}

.medical-hero h1{

font-size:36px;

}

.medical-title h2,
.medical-heading h2,
.medical-showcase-content h2,
.medical-simulator-left h2,
.medical-banner-content h2,
.medical-final-box h2{

font-size:30px;

}

.medical-services-grid,
.medical-trust-grid,
.medical-process-grid,
.medical-loans-grid,
.medical-stats{

grid-template-columns:1fr;

}

.medical-floating-card{

display:none;

}

.medical-showcase-image img,
.medical-image-card img{

border-radius:24px;

}

.medical-loan-card img{

height:220px;

}

.medical-final-box{

padding:35px 25px;

}

.medical-buttons,
.medical-final-buttons{

flex-direction:column;

}

.medical-btn-primary,
.medical-btn-secondary,
.medical-apply-btn,
.medical-contact-btn,
.medical-banner-btn{

width:100%;
justify-content:center;

}

.medical-feature{

padding:20px;

}

.medical-feature i{

width:55px;
height:55px;
font-size:20px;

}

.medical-stat h2{

font-size:36px;

}

.medical-banner-content p,
.medical-final-box p{

font-size:17px;

}

.medical-input-group input,
.medical-input-group select{

height:58px;
font-size:16px;

}

}

/*==============================
        SMARTPHONE COMPACT
==============================*/

@media(max-width:480px){

.medical-hero h1{

font-size:30px;

}

.medical-title h2,
.medical-heading h2{

font-size:26px;

}

.medical-showcase-content h2{

font-size:27px;

}

.medical-card,
.medical-trust-card,
.medical-step,
.medical-simulator-card{

padding:25px;

}

.medical-faq-question{

padding:22px;
font-size:17px;

}

.medical-faq-answer{

font-size:15px;

}

.medical-loan-content{

padding:25px;

}

.medical-loan-content h3{

font-size:22px;

}

}