label                                         { display: block; margin-bottom: 10px; }
button.link                                   { border: none;}
.montant .sous_titre                          { color: var(--mainColor1);}

.simulateur .onglet .wrap_grid                { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;}
@media (max-width:1200px) {
.simulateur .onglet .wrap_grid                { grid-template-columns: 1fr ; gap: 20px;}
}
@media (max-width:1000px) {
.simulateur .onglet .wrap_grid                { gap: 30px;}
}


/***** Simulateur *****/
.simulateur                                   { display: grid; margin: 30px 0 0 0; grid-template-columns: 1fr; gap: 50px; -moz-border-radius:30px; -webkit-border-radius: 30px; border-radius: 30px; padding: 30px; background: #fff; border: 1px solid #eee;}

#page .simulateur { margin-top: 40px;}

.simulateur .hide                             { display:none; }

.cont_simulateur                              { position: relative; z-index: 10; }

#home .colonne_simulateur                     { display: grid; grid-template-columns: 210px 1fr; gap: 60px;}
#home .colonne_simulateur .left               { display:block; }

#page .colonne_simulateur                     { display: block;}
#page .colonne_simulateur .left               { display: none;}

.colonne_simulateur .link_simulateur          { display: grid; grid-template-columns: 30px 1fr; gap: 15px; margin: 0 0 10px 0; border-radius:8px; padding: 12px 20px; background: #EAF0F4; font: 500 14px/20px "Poppins"; align-items: center; letter-spacing: 0.4px;}   
.colonne_simulateur .link_simulateur .img_link { width: 28px; height: 28px; object-fit: contain; position:relative; opacity: 0.1; filter: brightness(1) invert(0); transition: all 200ms ease-in-out;}
.colonne_simulateur .link_simulateur.active   { background: #197194; color:#fff;} 
.colonne_simulateur .link_simulateur.active .img_link { opacity: 1; filter: brightness(0) invert(1); }

.colonne_simulateur input[type="text"],
.colonne_simulateur input[type="email"]		  { width:100%; border:1px solid #dfdfdf; padding:0 30px; height:60px; font:500 14px/30px "Poppins"; border-radius:8px; color:#0c2938; margin-bottom: 10px; letter-spacing: 0.4px; display:block;}
.colonne_simulateur input::placeholder        { color:#b3b3b3; }
.colonne_simulateur select                    { width:100%; border:1px solid #dfdfdf; padding:0 70px 0 10px; height:60px; font:500 14px/30px "Poppins"; border-radius:8px; appearance: none; background: url(../images/arrow_sub.svg) calc(100% - 15px) 50% no-repeat #fff; color:#0c2938; margin-bottom: 10px; letter-spacing: 0.4px; display:block;}


.colonne_simulateur .details                        { display: block; margin-bottom: 30px;}
.colonne_simulateur .details .colonne               { display: grid; margin: 0; grid-template-columns: 2fr 1fr; gap: 5px; position:relative;}
.colonne_simulateur .details .separation            { display: block; width: 100%; height: 1px; content: "";  position: relative; background: #dfdfdf; margin: 15px 0;}
.colonne_simulateur .details .colonne .gauche       { text-align: left; font:500 14px/30px "Poppins"; color:#0c2938; letter-spacing: 0.4px; }
.colonne_simulateur .details .colonne .droite       { text-align: right; font:400 14px/30px "Poppins"; color:#0c2938; letter-spacing: 0.4px; }
.colonne_simulateur .link                           { width:100%; border-radius: 8px; border: none; text-align:center; height:70px; line-height: 70px;}
.colonne_simulateur p                               { margin-bottom: 30px; color: var(--mainColor3); }
.colonne_simulateur .sous_titre                     { margin-bottom: 20px; color: var(--mainColor1); font-size: 16px; font-weight: 500;}

.colonne_simulateur .range-wrap                 { position: relative;  margin: 80px auto 0px; width:60%; }
.colonne_simulateur .range                      { width: 100%; background:#f6f6f6; border-radius:50px; height:10px;}
.colonne_simulateur .bubble                     {  color: #fff;  padding: 20px 60px 20px 25px;  position: absolute;  border-radius: 8px;  transform: translateY(-100%) translateX(-50%); font:500 16px/21px "Poppins"; margin-top:-15px; background: url(../images/pen.svg) right 20px center no-repeat #197194; cursor:pointer;}
.colonne_simulateur .bubble::after              { width: 10px; height: 10px; position: absolute; left: 50%; bottom: -4px; margin: 0 0 0 -5px; transform: rotate(45deg); background: #197194; content: ""; }

@media (max-width:1200px) {
.colonne_simulateur select { background-size: 30px 30px;}
}

@media (max-width:1000px) {
.colonne_simulateur .link.btn_demande { position: fixed; bottom: 0; left: 0; border-radius: 0;} 
}

/***** Range input *****/
.colonne_simulateur .range-wrap                 { padding: 20px 0; } 
.ui-widget-content                              { background: #f6f6f6; }
.ui-slider-horizontal                           { top: 10px; height: 8px; margin: 2px; } 
.ui-slider                                      { position: relative; }
.ui-slider .ui-slider-handle                    { position: absolute; height: 20px; width: 20px; border-radius: 50px; background:var(--mainColor2); cursor: pointer; -webkit-appearance: none; margin-top: -6px; } 
:focus-visible                                  { outline: unset; }

/***** Range input buttons *****/
.colonne_simulateur .range-wrap .plus    {position: absolute; right: -80px; top: -5px; height: 40px; width: 40px; border-radius: 50px; border: none;  background: url(../images/plus.svg) center no-repeat #f6f6f6; cursor: pointer; }
.colonne_simulateur .range-wrap .moins   {position: absolute; left: -80px; top: -5px; height: 40px; width: 40px; border-radius: 50px; border: none;  background: url(../images/moins.svg) center no-repeat #f6f6f6; cursor: pointer;}


.apercu                               { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 2px; border-radius:8px; align-items: center; /*height: 90px;*/ margin-top:50px;}
.apercu .link_apercu                  { text-align: center; font: 600 16px/28px "Poppins"; border-radius:8px; align-items: center; background: #e8eff3; padding: 10px; cursor:pointer; border: none;} 
.apercu .link_apercu strong           { font:500 12px/18px "Poppins"; display: block;}  
.apercu .link_apercu.active           { background: #197194; color:#fff;} 

.apercu .link_simulateur .img_link    { height: 22px; width: auto; position: relative; opacity: 0.1; transition: all 200ms ease-in-out;}
.apercu .link_simulateur.active .img_link { opacity: 1; filter: invert(100%); }

.simulateur .exemple                 { color:#b3b3b3; font:500 12px/22px "Poppins"; letter-spacing: 0.4px; margin-top:80px;}

.simulateur .emprunter                 { margin-top: 15px; }
.simulateur .emprunter p               { margin: 0; color: #CF0D31; font-size: 16px; font-weight: 600; text-transform: uppercase;}

.simulateur .onglet                    { display:none; }


#pret_perso .wrap_grid                  { grid-template-columns: 1fr auto 1fr; align-items: start;}
#pret_perso .wrap_grid img              { max-width: 100%; width: 100%; height: auto; border-radius: 10px;}
#pret_regroupement .wrap_grid           { grid-template-columns: 1fr auto 1fr; align-items: start;}
#pret_regroupement .wrap_grid img       { max-width: 100%; width: 100%; height: auto; border-radius: 10px;}
#pret_auto .wrap_grid                   { grid-template-columns: 1fr auto 1fr; align-items: start;}
#pret_auto .wrap_grid img               { max-width: 100%; width: 100%; height: auto; border-radius: 10px;}
#pret_renovation .wrap_grid             { grid-template-columns: 1fr auto 1fr; align-items: start;}
#pret_renovation .wrap_grid img         { max-width: 100%; width: 100%; height: auto; border-radius: 10px;}
#pret_energie .wrap_grid                { grid-template-columns: 1fr auto 1fr; align-items: start;}
#pret_energie .wrap_grid img            { max-width: 100%; width: 100%; height: auto; border-radius: 10px;}
#credit_hypo .wrap_grid                 { grid-template-columns: 1fr auto 1fr; align-items: start; margin-top: 40px;}
#credit_hypo .wrap_grid img             { max-width: 100%; width: 100%; height: auto; border-radius: 10px;}

@media (min-width:1201px) {
.colonne_simulateur .link_simulateur:hover { background: #197194; color:#fff; }  
.colonne_simulateur .link_simulateur:hover .img_link { opacity: 1; filter: brightness(0) invert(100%); transition: all 200ms ease-in-out; }
.apercu .link_apercu:hover            { background: #197194; color:#fff;} 
}

@media (max-width:1500px) {
.apercu                               { grid-template-columns: 1fr 1fr 1fr;}
}

@media (max-width:1366px) {
#home .wrap_grid                            { grid-template-columns: 1fr 1fr; }
#home .wrap_grid_item:nth-child(3)          { display: none;}
}

@media (max-width:1200px) {
.apercu                               { grid-template-columns: 1fr 1fr 1fr; }
.simulateur                           { margin: 40px 0 0 0; }
.colonne_simulateur .range-wrap       { width:50%; }
.page_content_formulaire .top_page    { padding: 80px 0 150px;}

#pret_perso .wrap_grid,
#pret_regroupement .wrap_grid,
#pret_auto .wrap_grid,
#pret_renovation .wrap_grid,
#pret_energie .wrap_grid                  { grid-template-columns: 1fr 1fr 300px; grid-gap: 30px;}

#pret_perso .wrap_grid .apercu,
#pret_regroupement .wrap_grid .apercu,
#pret_auto .wrap_grid .apercu,
#pret_renovation .wrap_grid .apercu,
#pret_energie .wrap_grid .apercu         { grid-template-columns: 1fr 1fr; }

#home .colonne_simulateur                   { grid-gap: 40px;}
#home .wrap_grid                            { grid-template-columns: 1fr 1fr; }

}
@media (max-width:1000px) {

.colonne_simulateur                   { grid-template-columns: 1fr; gap:0; box-shadow: none; border-radius:0; padding:0px; margin-bottom:0px;}
.colonne_simulateur .left             { margin-bottom:30px; }
.colonne_simulateur .details          { margin: 30px 0 30px 0; grid-template-columns: 1fr; gap:0px;}

#credit_hypo .wrap_grid,
#pret_perso .wrap_grid,
#pret_regroupement .wrap_grid,
#pret_auto .wrap_grid,
#pret_renovation .wrap_grid,
#pret_energie .wrap_grid                                      { grid-template-columns: 1fr 1fr; }

#credit_hypo .wrap_grid .wrap_grid_item:nth-child(3),
#pret_perso .wrap_grid .wrap_grid_item:nth-child(3),
#pret_regroupement .wrap_grid .wrap_grid_item:nth-child(3),
#pret_auto .wrap_grid .wrap_grid_item:nth-child(3),
#pret_renovation .wrap_grid .wrap_grid_item:nth-child(3),
#pret_energie .wrap_grid .wrap_grid_item:nth-child(3)         { display: none;}

#credit_hypo .wrap_grid .wrap_grid_item .details            { margin: 0;}

#home .wrap_grid                            { grid-template-columns: 1fr; }

}

@media (max-width:700px) {
#home .colonne_simulateur       { grid-template-columns: 1fr; grid-gap: 0; } 
}

@media (max-width:600px) {
.apercu                               { grid-template-columns: 1fr 1fr; }
.simulateur                           { padding:30px;}
.colonne_simulateur .range-wrap       { width:60%; }
.page_content_formulaire .top_page    { padding: 50px 0 110px;}
.colonne_simulateur .link             { width:100%; border-radius: 8px; text-align:center; height:auto; line-height: 20px; padding:25px; }

#credit_hypo .wrap_grid,
#pret_perso .wrap_grid,
#pret_regroupement .wrap_grid,
#pret_auto .wrap_grid,
#pret_renovation .wrap_grid,
#pret_energie .wrap_grid                             { grid-template-columns: 1fr; grid-gap: 0; margin-top: 0; }

#credit_hypo .wrap_grid .wrap_grid_item .details,
#pret_perso .wrap_grid .wrap_grid_item .details,
#pret_regroupement .wrap_grid .wrap_grid_item .details,
#pret_auto .wrap_grid .wrap_grid_item .details,
#pret_renovation .wrap_grid .wrap_grid_item .details,
#pret_energie .wrap_grid .wrap_grid_item .details  { padding: 0 10px;}

}


/***** Montant à emprunter *****/
.montant							{ position:fixed; top:0; right:0; bottom:0; left:0; z-index:999; display:none;}
.montant:target 					{ opacity:1; pointer-events:auto;}
.montant .bg	 					{ background:rgba(0,0,0,0.8); position:fixed; width:100%; height:100%; top:0; z-index:2;}
.montant .row						{ position:relative; max-width:400px; min-height:100vh; margin:0 auto; box-sizing:border-box; padding:5vw 0; display:grid; align-items:center; z-index:5;}
.montant .row .close				{ width:50px; height:50px; position:absolute; right:20px; top:-25px; transform:rotate(45deg);}
.montant .row .close:after		    { width:4px; height:100%; background:#197194; position:absolute; right:50%; top:0; margin:0 -2px 0 0; content:"";}
.montant .row .close:before		    { width:100%; height:4px; background:#197194; position:absolute; right:0; top:50%; margin:-2px 0 0 0; content:"";}
.montant .content					{ background:#fff; box-sizing:border-box; display:block; position:relative; text-align:center; padding:50px; border-radius:10px;}
.montant .content input[type="text"]		{ width:100%; border:1px solid #dfdfdf; padding:0 30px; height:60px; font:500 14px/30px "Poppins"; border-radius:8px; color:#0c2938; margin-bottom: 30px; letter-spacing: 0.4px; display:block;}

@media (min-width:1201px) { 
.montant .row .close:hover		    { transform:rotate(45deg) scale(0.9);}
}
@media (max-width:1000px) { 
.montant .row						{ padding:5vw;}
}
@media (max-width:600px) { 
.montant							{ position:fixed;}
.montant .row						{ padding:8vw 7.5vw;}
.montant .row .close				{ width:40px; height:40px; top:-20px;}
.montant .content					{ font-size:16px; line-height:28px; padding:9vw 7.5vw;}


}


/***** Envoyer demander simulateur *****/
.demandeform							{ position:fixed; top:0; right:0; bottom:0; left:0; z-index:999; display:none;}
.demandeform:target 					{ opacity:1; pointer-events:auto;}
.demandeform .bg	 					{ background:rgba(0,0,0,0.8); position:fixed; width:100%; height:100%; top:0; z-index:2;}
.demandeform .row						{ position:relative; max-width:1000px; min-height:100vh; margin:0 auto; box-sizing:border-box; padding:5vw 0; display:grid; align-items:center; z-index:5;}
.demandeform .row .close				{ width:50px; height:50px; position:absolute; right:20px; top:-25px; transform:rotate(45deg);}
.demandeform .row .close:after		    { width:4px; height:100%; background:#197194; position:absolute; right:50%; top:0; margin:0 -2px 0 0; content:"";}
.demandeform .row .close:before		    { width:100%; height:4px; background:#197194; position:absolute; right:0; top:50%; margin:-2px 0 0 0; content:"";}
.demandeform .content					{ background:#fff; box-sizing:border-box; display:block; position:relative; text-align:center; padding:50px; border-radius:10px;}
.demandeform .content input[type="text"],		
.demandeform .content input[type="email"]		{ width:100%; border:1px solid #dfdfdf; padding:0 30px; height:60px; font:500 14px/30px "Poppins"; border-radius:8px; color:#0c2938; margin-bottom: 10px; letter-spacing: 0.4px; display:block;}

.demandeform p.sous_titre { margin-bottom: 20px; color: var(--mainColor2); font-size: 18px; font-weight: 600;}

@media (min-width:1201px) { 
.demandeform .row .close:hover		{ transform:rotate(45deg) scale(0.9);}
}
@media (max-width:1000px) { 
.demandeform .row						{ padding:5vw;}
}
@media (max-width:600px) { 
.demandeform							{ position:fixed; overflow-y: scroll;}
.demandeform .row						{ padding:8vw 7.5vw;}
.demandeform .row .close				{ width:40px; height:40px; top:-20px;}
.demandeform .content					{ font-size:16px; line-height:28px; padding:9vw 7.5vw;}
}

/***** formulaire de contact *****/ 
.contact_form  						{ width:100%; margin:0 auto; letter-spacing:0.2px;}
.contact_form .link					{ cursor:pointer; margin-top: 20px; border:0px; }
.contact_form label					{ margin:20px 0 5px 0; display: block;}
.requis_txt							{ font-size:14px; line-height:35px; letter-spacing:0.4px; color:#0c2938;}
.contact_form input[type="text"], 
.contact_form input[type="email"],
.contact_form textarea				{ width:100%; border: 1px solid #dfdfdf; padding:0 20px; height:60px; padding-bottom:2px; font: 400 14px/30px "Poppins"; border-radius:8px;}
.contact_form select                { width:100%; border: 1px solid #dfdfdf; padding:0 20px; height:60px; padding-bottom:2px; font: 400 14px/30px "Poppins"; border-radius:8px; appearance: none; background: url(../images/arrow_sub.svg) calc(100% - 15px) 50% no-repeat #fff;}
.contact_form textarea				{ height:auto; min-height:160px; padding:20px;}
.contact_form .grid					{ display:grid; grid-template-columns:1fr 1fr; align-items:end; grid-gap:20px;}

@media (max-width:600px) { 
.contact_form .grid					{ display:grid; grid-template-columns:1fr; align-items:end; grid-gap:0px;}
}

/* formulaire : joindre un fichier ss*/
.js .input_file_container 			{ display:inline-block; position:relative;}  
.js .input_file 					{ width:100%; height:100%; position:absolute; top:0; left:0; opacity:0; cursor:pointer;}  
.js .input_file_trigger 			{ width:100%; cursor:pointer; margin:0; padding:0 20px; color:#555; border: 1px solid #dfdfdf; font-size:14px; line-height:58px; background:#fff; }
.js .input_file:hover + .input_file_trigger,  
.js .input_file:focus + .input_file_trigger,  
.js .input_file_trigger:hover,  
.js .input_file_trigger:focus 		{ background-color:#ddd; color: #222;}  
.file_return 						{ margin:0;}  
.file_return:not(:empty) 			{ margin:10px 0 20px 0;}  
.js .file_return 					{ font:400 16px/20px "Poppins";}  
.js .file_return:not(:empty):before { content:"Fichier sélectionné : "; font-style:normal; font-weight:normal; font-family:"Poppins";}  
.input_file_trigger.error 			{ background:#f12626;}




/***** confirmation formulaire *****/
.confirmation_form			 		{ padding:40px; background:#fff; border: 1px solid #dfdfdf; border-radius:5px; text-align:center;}
.confirmation_form p			 	{ margin:5px 0 20px 0;}

@media (max-width:600px) {
.confirmation_form			 		{ padding:30px 20px;}
}


/***** RGPD *****/
#rgpdForm 							{ padding:20px; border: 1px solid #dfdfdf; font: 500 14px/30px "Poppins"; letter-spacing:0.4px; margin:20px 0; border-radius:5px;}
#rgpdForm input[type=checkbox]		{ width:18px; height:18px; display:block; float:left; padding:0; margin:5px 0 0 0; -webkit-appearance:checkbox; -ms-appearance:checkbox; appearance:checkbox; -moz-appearance:checkbox; -o-appearance:checkbox;}
#rgpdForm label						{ display:block; margin:0; padding: 0 0 0 30px; float:none; font: normal 10px/24px "Poppins"; letter-spacing:0.4px; text-align: left;}
#rgpdForm a							{ position:relative; color:#00bcd4; padding-bottom:2px;}
#rgpdFormAcceptError				{ padding:5px 0 0 30px; color:#de0808;}



@media (max-width:700px) {
.simulateur								{ border-radius: 20px;}
}
@media (max-width:400px) {
.simulateur								{ border-radius: 15px; padding: 20px;}
}