.bloc-simulateur { background: #ffffff; box-shadow: 0px 0px 30px 0px rgba(3, 50, 99, 0.1); position: relative; border-radius: 10px; padding: 60px; z-index: 10;} .form-simulateur { display: grid; grid-template-columns:repeat(2,1fr); align-items: center; position: relative; margin: 20px 0 0 0; grid-gap: 40px 80px;} .form-simulateur .item:nth-child(2) p { position: relative; margin-bottom: 10px;} .form-simulateur .item:nth-child(2) p span { position: absolute; right: 20px; font-weight: 600;} .form-simulateur .item:nth-child(2) p.total { font: 700 1.8rem/1.5 var(--fontBody);color: #000000; text-transform: uppercase; margin-top: 40px;} .form-simulateur .item:nth-child(2) p.total span { color: #03989e; font-weight: 700; font-size: 2rem; } .form-simulateur .item:nth-child(3) { grid-column: span 2;} .form-simulateur .item:nth-child(3) .link.demande { width: 100%; justify-content: center;} .bloc-simulateur p.exemple { font: 400 11px/22px var(--fontBody); color: #b0b0b0;} .symboleEuro { background: url(../images/svg_euro.svg) Calc(100% - 30px) 25px no-repeat #fff;} .link-demande { display: block; width: 100%; color: #ffffff; background: #03989e; padding: 30px 10px; margin: 40px auto; text-align: center; text-transform: uppercase; font-size: 1.4rem; font-weight: 600; border-radius: 5px; cursor: pointer;} .link-demande::after { content: ''; position: absolute; right: 40px; top: 50%; transform: translate(0, -50%); width: 40px; height: 15px; background-repeat: no-repeat; background-image: url("data:image/svg+xml;utf8,");} .bloc-simulateur p.exemple { font: 400 14px/24px var(--fontBody); color: #323232;} .bloc-simulateur h3.sous_titre { font-size: 2rem; text-transform: uppercase; color: #03989e;} .bloc-simulateur h6.sous_titre { text-transform: uppercase; color: #e50000; font-size: 1.6rem; font-weight: 600; margin-bottom: 20px;} .bloc-simulateur .link_simulateur { display: flex; justify-content: space-between; padding: 40px 0;} .bloc-simulateur .link_simulateur a { text-transform: uppercase; font-size: 13px; line-height: 60px; height: 60px; color: #000000; background: #eeeeee; font-weight: 600; border-radius: 5px; padding: 0 30px; position: relative;} .bloc-simulateur .link_simulateur a.active { color:#ffffff; background: #051d40;} .bloc-simulateur .link_simulateur a:after { content: ''; position: absolute; width: 16px; height: 16px; background: #ffffff; left: 50%; bottom: -8px; transform: translate(-50%, 0) rotate(45deg); z-index: -1; } .bloc-simulateur .link_simulateur a.active:after { background: #051d40;} .bloc-simulateur .simulateur .onglet { display: none;} @media (min-width:1201px) { .link-demande:hover { background: #051d40; color: #ffffff; } .bloc-simulateur .link_simulateur a:hover { background: #051d40; color: #ffffff;} .bloc-simulateur .link_simulateur a:hover:after { background: #051d40;} } @media (max-width:1366px) { .bloc-simulateur { padding: 40px; width: 85vw; margin-right: auto; margin-left: auto;} .bloc-simulateur .link_simulateur a { padding: 0 15px; letter-spacing: .2px;} } @media (max-width:1200px) { .bloc-simulateur { width: 90vw; padding: 40px 20px; margin-top: -200px;} } @media (max-width:1000px) { .bloc-simulateur .link_simulateur { justify-content: center; padding: 20px 0 40px 0; flex-wrap: wrap;} .bloc-simulateur .link_simulateur a { padding: 0 25px; letter-spacing: .4px; margin: 10px;} .form-simulateur { grid-template-columns:1fr; grid-gap: 40px 0;} .form-simulateur .item:nth-child(3) { grid-column: span 1;} } @media (max-width:700px) { .wrapper.full.simulateur-banner { width: 100vw;} .bloc-simulateur { margin-top: 0;} .wrapper.simulateur-bckgrd { padding-bottom: 60px;} .wrapper.simulateur-bckgrd:before { position: absolute; background: #051d40; left: -50vw; top: 0; height: 100%; width: 200vw; content: ""; z-index: -1;} } @media (max-width:500px) { .bloc-simulateur .link_simulateur a { width: 100%;} .bloc-simulateur .link_simulateur a:after { content: none;} .link-demande::after { content: none;} } /***** Simulateur *****/ .simulateur input[type="text"] { width:100%; border:1px solid #dfdfdf; padding:0 30px; height:60px; font:500 14px/30px var(--fontBody); border-radius:8px; color:#0c2938; margin-bottom: 10px; letter-spacing: 0.4px; display:block;} .simulateur input::placeholder { color:#b3b3b3; } .simulateur select { width:100%; border:1px solid #dfdfdf; padding:0 70px 0 30px; height:60px; font:500 14px/30px var(--fontBody); 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; cursor: pointer; background-size: 40px;} input[type=checkbox] { -webkit-appearance: checkbox; -ms-appearance: checkbox; appearance: checkbox; -moz-appearance: checkbox; -o-appearance: checkbox; width: 20px; height: 20px; display: block; float: left; padding: 0; margin: 0;} #simBtn.disabled { cursor: default; opacity: 0.5; background-position: 0 0; } .form-item.radio input[type="radio"] { appearance: radio; } .simulateur .details { display: grid; margin: 50px 0 50px 0; grid-template-columns: 1fr 1fr; gap: 100px;} .simulateur .details .colonne { display: grid; margin: 0; grid-template-columns: 2fr 1fr; gap: 5px; position:relative;} .simulateur .details .separation:after { width: 1px; height: 100%; content: ""; position: absolute; right: -50px; top: 0px; background: #dfdfdf;} .simulateur .details .colonne .gauche { text-align: left; font:500 14px/30px var(--fontBody); color:#0c2938; letter-spacing: 0.4px; } .simulateur .details .colonne .droite { text-align: right; font:400 14px/30px var(--fontBody); color:#0c2938; letter-spacing: 0.4px; } .simulateur .link { width:100%; border-radius: 8px; text-align:center; height:70px; line-height: 70px; } .simulateur p { margin-bottom: 30px; } .simulateur .sous_titre { margin-bottom: 20px; } .simulateur .range-wrap { position: relative; margin: 120px auto 0px; width:75%; } .simulateur .range { width: 100%; background:#f6f6f6; border-radius:50px; height:10px;} .simulateur .bubble { color: #fff; padding: 20px 60px 20px 25px; position: absolute; border-radius: 8px; transform: translateY(-100%) translateX(-50%); font:500 16px/21px var(--fontBody); margin-top:-15px; background: url(../images/pen.svg) right 20px center no-repeat #051d40; cursor:pointer;} .simulateur .bubble::after { width: 10px; height: 10px; position: absolute; left: 50%; bottom: -4px; margin: 0 0 0 -5px; transform: rotate(45deg); background: #051d40; content: ""; } @media (max-width:600px) { .simulateur .details {grid-template-columns: 1fr; gap: 0;} } /***** Range input *****/ .simulateur .range-wrap { padding-bottom: 20px; } .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:#03989e; cursor: pointer; -webkit-appearance: none; margin-top: -6px; } :focus-visible { outline: unset; } /***** Range input buttons *****/ .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; } .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: 0px; background:#f6f6f6; border-radius:8px; align-items: center; margin-top:50px;} .apercu .link_apercu { text-align: center; font:500 18px/28px var(--fontBody); border-radius:8px; align-items: center; padding:22px 0; cursor:pointer;} .apercu .link_apercu strong { font:500 12px/18px var(--fontBody); display: block;} .apercu .link_apercu.active { background: #051d40; 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 11px/21px var(--fontBody); letter-spacing: 0.4px; margin-top:30px;} .simulateur .exemple strong { font:700 14px/21px var(--fontBody); text-transform: uppercase;} .simulateur .onglet { display:none; } @media (max-width:600px) { .apercu { grid-template-columns: 1fr 1fr 1fr; } } @media (max-width:400px) { .apercu { grid-template-columns: 1fr 1fr; } } /***** 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:#03989e; position:absolute; right:50%; top:0; margin:0 -2px 0 0; content:"";} .montant .row .close:before { width:100%; height:4px; background:#03989e; 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 var(--fontBody); border-radius:8px; color:#0c2938; margin-top: 20px; margin-bottom: 20px; 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.9); 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:#03989e; position:absolute; right:50%; top:0; margin:0 -2px 0 0; content:"";} .demandeform .row .close:before { width:100%; height:4px; background:#03989e; 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 .sous_titre { margin-bottom: 40px;} .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 var(--fontBody); border-radius:8px; color:#0c2938; margin-bottom: 10px; letter-spacing: 0.4px; display:block;} @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 var(--fontBody); border-radius:8px;} .contact_form select { width:100%; border: 1px solid #dfdfdf; padding:0 20px; height:60px; padding-bottom:2px; font: 400 14px/30px var(--fontBody); 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 var(--fontBody);} .js .file_return:not(:empty):before { content:"Fichier sélectionné : "; font-style:normal; font-weight:normal; font-family: var(--fontBody);} .input_file_trigger.error { background:#f12626;} /***** confirmation formulaire *****/ .confirmation_form { padding:40px; 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 var(--fontBody); 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 var(--fontBody); letter-spacing:0.4px; text-align: left;} #rgpdForm a { position:relative; color:#00bcd4; padding-bottom:2px;} #rgpdFormAcceptError { padding:5px 0 0 30px; color:#de0808;} fieldset { border: none; padding: 0;} fieldset .info { margin: var(--marginBloc);} fieldset .info .autre { background: #dfe4ef; position: relative; padding: 40px; border-radius: 10px;} fieldset #form-loan { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 40px; margin: 20px auto 80px auto;} .form-required-legend, .help-block { color: #f82020; font-size: 11px; } .help-block { position: relative; top: -15px;} .ui-datepicker-month, .ui-datepicker-year { } .wrap { margin:30px 0; } .wrap.btn-center { margin:80px auto; display: flex; justify-content: space-between; max-width: 800px;} .wrap.btn-center a .link { background: #abafb7;} .form-item.radio div label { display: inline; margin-left: 20px;} .grid .form-item.full { grid-column: span 2;} #form-option-employer, #form-option-employer-partner { margin-top: 30px; background: #dfe4ef; position: relative; padding: 40px; border-radius: 10px;} .loan-detail-header { font-size: 2rem; margin-bottom: 20px; margin-top: 40px;} .loan-detail-header strong { font-weight: 600;} @media (min-width:1201px) { .wrap.btn-center a .link:hover { background: #051d40;} } @media (max-width:1200px) { fieldset #form-loan { grid-gap: 20px;} } @media (max-width:1000px) { fieldset #form-loan { grid-template-columns: 1fr; grid-gap: 20px;} } .step { width:100%; line-height:0; font-size:0;color:#ffffff; display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 0 2px;} .step a { color: #fff; } .step>div { display:inline-block; font:500 2rem/1 var(--fontBody); background: #051d40; padding:20px 0; text-align:center; position:relative; text-transform: uppercase; border-radius:5px; } .step .active { background:#03989e; color:#fff;} .step .active:after { background:#03989e; border-color:#fff;} .check-cibilite { display: flex; justify-content: space-evenly; padding-bottom: 80px;} .check-cibilite div { display: flex; align-items: center;} .form-info { padding: 40px; border-radius: 10px; background: #f0f3f9;} .validationDemande table { width:70%; } .validationDemande table tr { width:100%; padding:10px 0 10px 0;} .validationDemande table td { width:100%; padding:0;} @media (max-width:800px) { .step>div { font:500 1.6rem/1 var(--fontBody);} } /***** Data picker *****/ .ui-datepicker .ui-datepicker-title { margin: 0;} .ui-datepicker-prev, .ui-datepicker-next { display:none;} .ui-datepicker-title { display: flex; justify-content: space-between;} .ui-datepicker-month, .ui-datepicker-year { padding: 0 0 0 20px; font-size: 14px;} .ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year { width: 100%;} /***** Récapitulatif *****/ .grid-recap { display: grid; grid-template-columns:repeat(2,1fr); position: relative; margin: 40px auto; grid-gap: 10px 20px; max-width: 800px;} .grid-recap .item-full { grid-column: span 2;} .grid-recap-titre { font-weight: 600;} .grid-recap-valeur { } .grid-recap-valeur.big { font-weight: 700;font-size: 2.5rem; color: #03989e; line-height: 1;} .separate-line { margin: 0 auto; max-width: 800px; width: 100%; height: 1px; background: #e6e6e6;}