*{
margin:0;
padding:0;
box-sizing:border-box;
}


:root{

--primary:#0b2a4a;
--secondary:#0d6efd;
--gold:#c9a227;
--light:#f5f8fc;
--text:#52606d;

}



body{

font-family:'Inter',sans-serif;
color:var(--text);
background:white;
line-height:1.6;

}


img{

max-width:100%;
display:block;

}


a{

text-decoration:none;
color:inherit;

}


.container{

width:90%;
max-width:1200px;
margin:auto;

}





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


.header{

height:90px;
background:white;
box-shadow:0 5px 25px rgba(0,0,0,.08);
position:sticky;
top:0;
z-index:1000;

}


.header-container{

height:100%;
display:flex;
align-items:center;
justify-content:space-between;

}



.logo img{

width:130px;

}



.navigation ul{

display:flex;
align-items:center;
gap:35px;
list-style:none;

}


.navigation a{

font-weight:600;
color:#1e293b;
font-size:15px;

}


.navigation a:hover{

color:var(--secondary);

}



/* dropdown desktop */


.dropdown{

position:relative;

}


.dropdown-menu{

position:absolute;
top:35px;
left:0;
background:white;
width:220px;
padding:15px;
display:none!important;
box-shadow:0 10px 35px rgba(0,0,0,.12);
border-radius:10px;

}


.dropdown:hover .dropdown-menu{

display:block!important;

}


.dropdown-menu li{

padding:10px 0;

}


.header-btn{

background:var(--secondary);
color:white;
padding:14px 25px;
border-radius:6px;
font-weight:700;

}


.header-btn:hover{

background:var(--primary);

}





/* MOBILE BUTTON */


.mobile-menu{

display:none;
background:none;
border:0;
cursor:pointer;

}


.mobile-menu span{

display:block;
width:28px;
height:3px;
background:var(--primary);
margin:6px;

}








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


.hero-auto{

background:
linear-gradient(120deg,#071d35,#123e69);

padding:100px 0;
color:white;

}



.hero-container{

display:grid;
grid-template-columns:1fr 400px;
gap:60px;
align-items:center;

}


.hero-content h1{

font-size:52px;
line-height:1.2;
font-weight:800;

}



.hero-content p{

font-size:18px;
margin:30px 0;
max-width:600px;
color:#dce6f2;

}



.hero-buttons{

display:flex;
gap:20px;

}



.btn-primary,
.btn-secondary{

padding:15px 30px;
border-radius:6px;
font-weight:700;
display:inline-block;

}



.btn-primary{

background:var(--secondary);
color:white;

}


.btn-secondary{

border:1px solid white;
color:white;

}



.hero-card{

background:white;
padding:40px;
border-radius:20px;
color:#172b4d;
box-shadow:0 20px 50px rgba(0,0,0,.25);

}


.hero-card i{

font-size:45px;
color:var(--secondary);

}


.rate{

margin-top:25px;
background:#f1f5f9;
padding:20px;
border-radius:10px;

}


.rate strong{

display:block;
font-size:40px;
color:var(--secondary);

}





/* ===========================
 TITRES
=========================== */


.section-title{

text-align:center;
max-width:800px;
margin:0 auto 60px;

}


.section-title h2{

font-size:38px;
color:var(--primary);
margin-bottom:20px;

}


.section-title p{

font-size:18px;

}





/* ===========================
 INTRO
=========================== */


.intro-section{

padding:100px 0;

}


.advantages{

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

}


.advantage-box{

padding:35px;
text-align:center;
background:white;
box-shadow:0 10px 30px rgba(0,0,0,.07);
border-radius:15px;

}


.advantage-box i{

font-size:40px;
color:var(--secondary);
margin-bottom:20px;

}


.advantage-box h3{

color:var(--primary);
margin-bottom:15px;

}







/* ===========================
 FINANCEMENT
=========================== */


.finance-section{

padding:100px 0;
background:var(--light);

}


.finance-container{

display:grid;
grid-template-columns:1fr 1fr;
gap:70px;
align-items:center;

}


.finance-image img{

border-radius:20px;

}


.finance-text h2{

font-size:40px;
color:var(--primary);

}


.finance-text li{

list-style:none;
margin:18px 0;
font-weight:600;

}


.finance-text li i{

color:#16a34a;
margin-right:10px;

}







/* ===========================
 ETAPES
=========================== */


.steps-section{

padding:100px 0;

}


.steps-grid{

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

}



.step-box{

text-align:center;
padding:40px;
background:white;
box-shadow:0 10px 30px rgba(0,0,0,.08);
border-radius:15px;

}


.number{

width:60px;
height:60px;
background:var(--secondary);
color:white;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:25px;
font-weight:bold;
margin:auto auto 20px;

}






/* ===========================
 CONDITIONS
=========================== */


.conditions-section{

padding:80px 0;
background:#f8fafc;

}


.conditions-grid{

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

}


.conditions-grid div{

background:white;
padding:35px;
text-align:center;
border-radius:15px;

}


.conditions-grid i{

font-size:35px;
color:var(--secondary);

}







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


.faq-section{

padding:100px 0;

}



.faq-container{

max-width:850px;
margin:auto;

}


.faq-item{

border-bottom:1px solid #ddd;

}



.faq-question{

width:100%;
padding:25px;
background:white;
border:0;
display:flex;
justify-content:space-between;
font-size:17px;
font-weight:700;
cursor:pointer;

}



.faq-answer{

display:none;
padding:0 25px 25px;

}


.faq-item.active .faq-answer{

display:block;

}







/* ===========================
 AUTRES CREDITS
=========================== */


.other-loans{

padding:100px 0;
background:var(--light);

}


.loan-grid{

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

}


.loan-card{

background:white;
padding:40px;
text-align:center;
border-radius:15px;

}


.loan-icon i{

font-size:45px;
color:var(--secondary);

}


.loan-card a{

color:var(--secondary);
font-weight:bold;

}







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


.cta-section{

padding:80px 0;

}


.cta-box{

background:var(--primary);
color:white;
padding:60px;
text-align:center;
border-radius:20px;

}


.cta-box a{

display:inline-block;
margin-top:25px;
background:var(--secondary);
padding:15px 35px;
border-radius:5px;

}







/* ===========================
 FOOTER
=========================== */


.footer{

background:#071d35;
color:white;
padding:80px 0 20px;

}


.footer-grid{

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

}


.footer-logo{

width:140px;
margin-bottom:20px;

}


.footer h3{

margin-bottom:20px;

}


.footer ul{

list-style:none;

}


.footer li{

margin:10px 0;

}


.social a{

font-size:25px;
margin-right:15px;

}


.copyright{

text-align:center;
margin-top:50px;

}







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


@media(max-width:1000px){


.navigation{

display:none;

}


.mobile-menu{

display:block;

}


.header-btn{

display:none;

}


.hero-container,
.finance-container{

grid-template-columns:1fr;

}


.hero-content{

text-align:center;

}


.hero-buttons{

justify-content:center;

}


.advantages{

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

}


.steps-grid,
.conditions-grid,
.loan-grid{

grid-template-columns:1fr;

}


.footer-grid{

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

}


}








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


@media(max-width:600px){



.container{

width:92%;

}



.hero-auto{

padding:60px 0;

}



.hero-content h1{

font-size:32px;

}



.hero-content p{

font-size:16px;

}



.hero-buttons{

flex-direction:column;

}


.hero-card{

margin-top:30px;

}



.section-title h2,
.finance-text h2{

font-size:28px;

}



.advantages{

grid-template-columns:1fr;

}


.footer-grid{

grid-template-columns:1fr;

}



.cta-box{

padding:35px 20px;

}


}







/* PETITS TELEPHONES 320px */


@media(max-width:360px){


.hero-content h1{

font-size:28px;

}


.btn-primary,
.btn-secondary{

padding:12px;

font-size:14px;

}


}