No notes defined.
<div class="sds-snetFrame -step">
<a href="#frameMain" class="sds-skipNavLink">
Skip to content
</a>
<header class="sds-header -headroom">
<div class="sds-header__nav">
<nav class="sds-nav">
<div class="sds-nav__inner">
<a href="#back" class="sds-nav__back flex-shrink-0">
<span class="sds-iconCircle sds-nav__backIcon" aria-hidden="true">
<span class="sds-icon sds-icon-chevronleft"></span>
</span>
<span class="sds-nav__backText sds-textHelper">Retour</span>
</a>
<div class="sds-nav__adaptiveLogo flex-shrink-0">
<svg width="214" height="40" viewBox="0 0 214 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1029_767)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M192.88 12.12C193.4 12.56 193.72 13.04 193.92 13.56L196.76 11.92C196.28 10.96 195.6 10.16 195 9.59998C194.28 8.95998 192.84 8.03998 190.36 8.03998C186 8.03998 183.6 11 183.6 14.12C183.6 17.6 186.4 19.16 188.4 20L190.6 20.92C192.16 21.52 193.96 22.56 193.96 24.88C193.96 27.2 192.24 28.76 190.12 28.76C188.68 28.76 187.72 28.24 187.08 27.4C186.52 26.64 186.12 25.56 186.12 24.44L182.6 25.2C182.72 26.8 183.28 28.36 184.52 29.72C185.68 31.04 187.28 32.04 189.96 32.04C194.28 32.04 197.4 29.04 197.4 24.64C197.4 22 196.24 19.56 191.96 17.84L189.64 16.92C187.36 15.96 187.12 14.76 187.12 14.08C187.12 12.56 188.28 11.28 190.4 11.28C191.4 11.28 192.16 11.52 192.88 12.12ZM145.72 8.39999L136.76 17.64V8.39999H133.24V31.52H136.76V21.96L137.44 21.24L145.72 31.52H150.44L139.92 18.88L150.36 8.39999H145.72ZM155.64 11.72H164.88V8.39999H152.08V31.52H164.88V28.2H155.64V20.92H164.6V17.6H155.64V11.72ZM180.76 11.72H171.52V17.6H180.52V20.92H171.52V28.2H180.76V31.52H168.04V8.39999H180.76V11.72ZM210 13.56C209.8 13.04 209.48 12.56 208.96 12.12C208.24 11.52 207.48 11.28 206.44 11.28C204.32 11.28 203.16 12.56 203.16 14.08C203.16 14.76 203.4 15.96 205.68 16.92L208 17.84C212.28 19.56 213.44 22 213.44 24.64C213.44 29.04 210.32 32.04 206 32.04C203.32 32.04 201.72 31.04 200.56 29.72C199.32 28.36 198.76 26.8 198.64 25.2L202.16 24.44C202.16 25.56 202.56 26.64 203.12 27.4C203.76 28.24 204.72 28.76 206.16 28.76C208.28 28.76 210 27.2 210 24.88C210 22.56 208.2 21.52 206.64 20.92L204.44 20C202.56 19.2 199.72 17.64 199.72 14.16C199.72 11.04 202.12 8.07997 206.48 8.07997C209 8.07997 210.4 8.99997 211.12 9.63997C211.72 10.2 212.4 11 212.88 11.96L210 13.56ZM57.56 12.12C58.08 12.56 58.4 13.04 58.6 13.56L61.48 11.96C61 11 60.32 10.2 59.72 9.63997C59 8.99997 57.56 8.07997 55.08 8.07997C50.72 8.07997 48.32 11.04 48.32 14.16C48.32 17.64 51.16 19.2 53.04 20L55.24 20.92C56.8 21.52 58.6 22.56 58.6 24.88C58.6 27.2 56.88 28.76 54.76 28.76C53.32 28.76 52.36 28.24 51.72 27.4C51.16 26.64 50.76 25.56 50.76 24.44L47.24 25.2C47.36 26.8 47.92 28.36 49.16 29.72C50.32 31.04 51.92 32.04 54.6 32.04C58.92 32.04 62.04 29.04 62.04 24.64C62.04 22 60.88 19.56 56.6 17.84L54.28 16.92C52.04 15.96 51.8 14.76 51.8 14.08C51.8 12.56 52.96 11.28 55.08 11.28C56.08 11.28 56.84 11.52 57.56 12.12ZM68.2 18.88H69.8C72.88 18.88 74.32 17.4 74.32 15.24C74.32 13.96 73.8 11.64 69.76 11.64H68.2V18.88ZM69.76 8.39999C71.16 8.39999 73.16 8.51999 74.84 9.63999C76.76 10.92 77.72 13.16 77.72 15.24C77.72 16.6 77.36 18.68 75.48 20.32C73.64 21.88 71.52 22.12 69.84 22.12H68.24V31.52H64.68V8.39999H69.76ZM83.4 22.36V8.39999H80V23.28C80 25.12 80.36 27.36 82.12 29.28C83.32 30.64 85.36 32 88.52 32C91.64 32 93.72 30.6 94.92 29.28C96.68 27.36 97.04 25.12 97.04 23.28V8.39999H93.48V22.36C93.48 23.6 93.44 25.16 92.76 26.36C92.08 27.52 90.48 28.72 88.44 28.72C86.36 28.72 84.8 27.52 84.12 26.36C83.44 25.16 83.4 23.6 83.4 22.36ZM113.24 11.72H104V17.6H112.96V20.92H104V28.2H113.24V31.52H100.44V8.39999H113.24V11.72ZM121.08 19.04H119.96V11.64H121.16C122.88 11.64 126 11.96 126 15.24C126 18.92 122.04 19.04 121.08 19.04ZM126.68 9.75999C125.16 8.75999 123.4 8.39999 120.56 8.39999H116.48V31.52H120.04V22.04H120.64L127.24 31.52H131.52L124.32 21.64C127.4 20.96 129.44 18.56 129.44 15.2C129.44 14.2 129.24 11.44 126.68 9.75999Z" fill="#003060" />
<path d="M40 0H0V40H40V0Z" fill="#DE0000" />
<path d="M27.28 15.84V9.95999L24.32 4.07999L21.36 9.95999V15.84H22.88V10.32L24.32 7.35999L25.8 10.32V15.84H27.28Z" fill="white" />
<path d="M32.04 17.72H8.03999V19.28H32.04V17.72Z" fill="white" />
<path d="M31.96 22.36C29.36 22.36 27.28 24.44 27.28 27.04V36.36C26.8 35.64 26.28 34.88 25.72 34.2V27.04C25.72 23.6 28.48 20.8 31.96 20.8V22.36Z" fill="white" />
<path d="M23.16 23.92C23.16 22.2 21.76 20.8 20 20.8C18.24 20.8 16.88 22.2 16.88 23.92V27.2C17.4 27.4 17.92 27.64 18.44 27.92V23.92C18.44 23.08 19.12 22.36 20 22.36C20.84 22.36 21.56 23.04 21.56 23.92V29.8L23.12 31L23.16 23.92Z" fill="white" />
<path d="M11.12 20.8C12.88 20.8 14.28 22.2 14.28 23.92H14.24V26.6C13.72 26.44 13.2 26.28 12.68 26.16V23.92C12.68 23.04 11.96 22.36 11.12 22.36C10.24 22.36 9.56 23.08 9.56 23.92V25.6L8 25.48V23.92C8 22.2 9.36 20.8 11.12 20.8Z" fill="white" />
</g>
<defs>
<clipPath id="clip0_1029_767">
<rect width="214" height="40" fill="white" />
</clipPath>
</defs>
</svg>
</div>
<div class="sds-nav__centeredContent text-truncate sds-textHelper sds-textSemiBold mx-auto flex-grow-1 text-center">
Rendez-vous en ligne
</div>
<div class="sds-nav__alignEnd flex-shrink-0">
<div class="sds-nav__languageSwitcher">
<div class="sds-languageSwitcher dropdown">
<button class="sds-languageSwitcher__trigger sds-textHelper sds-textSemiBold dropdown-toggle" type="button" data-toggle="dropdown" data-display="static" aria-expanded="false">
Fr
<span class="sds-iconCircle sds-languageSwitcher__icon" aria-hidden="true">
<span class="sds-icon sds-icon-chevrondown"></span>
</span>
</button>
<div class="sds-languageSwitcher__menu sds-actionMenu dropdown-menu dropdown-menu-right">
<a class="sds-actionMenu__item dropdown-item" href="#">
De
</a>
<a class="sds-actionMenu__item dropdown-item" href="#">
En
</a>
</div>
</div>
</div>
</div>
</div>
</nav>
</div>
<div class="sds-header__stepper">
<nav class="sds-mobileStepper">
<ul class="sds-mobileStepper__inner list-unstyled">
<li class="sds-mobileStepper__item">
<div class="sds-progress progress -stepper -small sds-mobileStepper__progressBar">
<div class="progress-bar sds-progress__bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</li>
<li class="sds-mobileStepper__item">
<div class="sds-progress progress -stepper -small sds-mobileStepper__progressBar">
<div class="progress-bar sds-progress__bar" role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" aria-current="true"></div>
</div>
</li>
<li class="sds-mobileStepper__item">
<div class="sds-progress progress -stepper -small sds-mobileStepper__progressBar">
<div class="progress-bar sds-progress__bar" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</li>
<li class="sds-mobileStepper__item">
<div class="sds-progress progress -stepper -small sds-mobileStepper__progressBar">
<div class="progress-bar sds-progress__bar" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</li>
</ul>
</nav>
</div>
</header>
<div class="sds-snetFrame__inner">
<div class="sds-snetFrame__fader" aria-hidden="true"></div>
<div class="sds-snetFrame__menuContainer">
<nav class="sds-snetFrame__menu">
<div class="sds-snetFrame__menuList">
<img class="img-fluid" src="../../media/illustrative-icons/sdsillu-plugcable.svg" alt="">
<ul class="sds-snetFrame__menuListInner list-unstyled">
<li class="sds-snetFrame__menuItem -isChecked">
<a href="" class="sds-snetFrame__menuLink">
<span class="sds-snetFrame__menuItemStep" data-toggle="tooltip" data-title="Nature de votre besoin" data-placement="right" data-boundary="window">
<span class="sds-checkboxDot -isActive sds-snetFrame__menuItemCheckbox" aria-hidden="true"></span>
1
</span>
<span class="sds-snetFrame__menuItemText">Nature de votre besoin</span>
</a>
</li>
<li class="sds-snetFrame__menuItem -isChecked">
<a href="" class="sds-snetFrame__menuLink">
<span class="sds-snetFrame__menuItemStep" data-toggle="tooltip" data-title="Votre rendez-vous" data-placement="right" data-boundary="window">
<span class="sds-checkboxDot -isActive sds-snetFrame__menuItemCheckbox" aria-hidden="true"></span>
2
</span>
<span class="sds-snetFrame__menuItemText">Votre rendez-vous</span>
</a>
</li>
<li class="sds-snetFrame__menuItem -isChecked">
<a href="" class="sds-snetFrame__menuLink">
<span class="sds-snetFrame__menuItemStep" data-toggle="tooltip" data-title="Vos informations" data-placement="right" data-boundary="window">
<span class="sds-checkboxDot -isActive sds-snetFrame__menuItemCheckbox" aria-hidden="true"></span>
3
</span>
<span class="sds-snetFrame__menuItemText">Vos informations</span>
</a>
</li>
<li class="sds-snetFrame__menuItem -isActive">
<a href="" class="sds-snetFrame__menuLink">
<span class="sds-snetFrame__menuItemStep" data-toggle="tooltip" data-title="Confirmation" data-placement="right" data-boundary="window">
<div class="sds-snetFrame__menuItemProgress">
<div class="sds-circularProgress">
<svg viewBox="0 0 36 36" class="">
<path class="sds-circularProgress__shape" stroke-dasharray="50, 100" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
</svg>
</div>
</div>
4
</span>
<span class="sds-snetFrame__menuItemText">Confirmation</span>
</a>
</li>
</ul>
<ul class="sds-snetFrame__settings list-unstyled">
<li class="sds-snetFrame__settingsItem sds-snetFrame__settingsOpenMenu">
<button type="button" class="sds-snetFrame__settingsButton">
<span class="sds-snetFrame__settingsButtonIcon sds-icon sds-icon-chevronrightdouble" data-toggle="tooltip" data-title="Toggle Menu" data-placement="right" data-boundary="window"></span>
<span class="sr-only">Déployer le menu</span>
</button>
</li>
</ul>
</div>
</nav>
</div>
<main class="sds-snetFrame__main" id="frameMain">
<!-- panel header content start -->
<!-- panel header content end -->
<div class="sds-snetFrame__mainContent">
<!-- main content start -->
<div class="row h-100 justify-content-center no-bottom-gutter">
<div class="col-12 col-lg-10">
<form class="sds-sectionForm sds-housingSimulator">
<div class="sds-sectionForm__container -prev">
<div class="sds-sectionForm__item sds-box -insetLg sds-stackMd">
<div class="sds-sectionForm__itemHeading sds-stackXs">
<h2 class="h3">Pour quel motif souhaitez-vous prendre un rendez-vous ? </h2>
<p>Sélectionnez la catégorie correspondant à votre besoin.</p>
</div>
<div class="sds-sectionForm__itemBody sds-stackMd">
<div class="sds-spotSelectList">
<div class="sds-spotSelect sds-showCustomIndicatorHover ">
<input type="radio" id="spotRadio-1" class="sds-spotSelect__radioInput sr-only" value="" name="radio-name">
<div data-scope-wrapper="box" data-scope="flat" class="sds-spotSelect__body">
<div class="sds-spotSelect__content">
<span class="sds-radioDot sds-spotSelect__checkItem" aria-hidden="true"></span>
<img src="../../media/illustrative-icons/sdsillu-differentcardsb.svg" alt="">
<div class="sds-spotSelect__inner sds-stackMd">
<div class="sds-spotSelect__text">
<div class="sds-spotSelect__title">
<div class="sds-textSemiBold">
<label class="sds-spotSelect__checkItemLabel" for="spotRadio-1">Gérer le quotidien</label>
</div>
</div>
<p><label class="sds-spotSelect__checkItemLabel" for="spotRadio-1">Ouvrir un compte courant et epargne ou obtenir une nouvelle carte bancaire.</label></p>
</div>
</div>
</div>
<div class="sds-spotSelect__hiddenContent">
<div class="sds-spotSelect__hiddenContentInner">
<div class="sds-message sds-stackMd">
<div class="sds-message__header">
<div class="sds-message__iconAlign">
<p>Veuillez noter, le prêt logement n’est élligible que pour l’un des types de projet suivant :</p>
</div>
</div>
<ul class="sds-message__bulletOptions sds-stackMd list-unstyled">
<li class="sds-message__option">
Soit l’achat d’un bien immobilier,
</li>
<li class="sds-message__option">
La construction d’un bien immobilier,
</li>
<li class="sds-message__option">
Ou bien, la construction d’un terrain.
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="sds-spotSelect sds-showCustomIndicatorHover ">
<input type="radio" id="spotRadio-2" class="sds-spotSelect__radioInput sr-only" checked value="" name="radio-name">
<div data-scope-wrapper="box" data-scope="flat" class="sds-spotSelect__body">
<div class="sds-spotSelect__content">
<span class="sds-radioDot sds-spotSelect__checkItem" aria-hidden="true"></span>
<img src="../../media/illustrative-icons/sdsillu-financecalculator.svg" alt="">
<div class="sds-spotSelect__inner sds-stackMd">
<div class="sds-spotSelect__text">
<div class="sds-spotSelect__title">
<div class="sds-textSemiBold">
<label class="sds-spotSelect__checkItemLabel" for="spotRadio-2">Financer un projet</label>
</div>
</div>
<p><label class="sds-spotSelect__checkItemLabel" for="spotRadio-2">Souscrire un prêt logement, un prêt pour ses études ou bien un prêt à la consommation.</label></p>
</div>
</div>
</div>
</div>
</div>
<div class="sds-spotSelect sds-showCustomIndicatorHover ">
<input type="radio" id="spotRadio-3" class="sds-spotSelect__radioInput sr-only" value="" name="radio-name">
<div data-scope-wrapper="box" data-scope="flat" class="sds-spotSelect__body">
<div class="sds-spotSelect__content">
<span class="sds-radioDot sds-spotSelect__checkItem" aria-hidden="true"></span>
<img src="../../media/illustrative-icons/sdsillu-boxlightgear.svg" alt="">
<div class="sds-spotSelect__inner sds-stackMd">
<div class="sds-spotSelect__text">
<div class="sds-spotSelect__title">
<div class="sds-textSemiBold">
<label class="sds-spotSelect__checkItemLabel" for="spotRadio-3">Investir</label>
</div>
</div>
<p><label class="sds-spotSelect__checkItemLabel" for="spotRadio-3">Ouvrir un produit d’investissement comme Speedinvest.</label></p>
</div>
</div>
</div>
</div>
</div>
<div class="sds-spotSelect sds-showCustomIndicatorHover ">
<input type="radio" id="spotRadio-3" class="sds-spotSelect__radioInput sr-only" value="" name="radio-name">
<div data-scope-wrapper="box" data-scope="flat" class="sds-spotSelect__body">
<div class="sds-spotSelect__content">
<span class="sds-radioDot sds-spotSelect__checkItem" aria-hidden="true"></span>
<img src="../../media/illustrative-icons/sdsillu-differentcardsb.svg" alt="">
<div class="sds-spotSelect__inner sds-stackMd">
<div class="sds-spotSelect__text">
<div class="sds-spotSelect__title">
<div class="sds-textSemiBold">
<label class="sds-spotSelect__checkItemLabel" for="spotRadio-3">Gérer le quotidien</label>
</div>
</div>
<p><label class="sds-spotSelect__checkItemLabel" for="spotRadio-3">Ouvrir un compte courant et epargne ou obtenir une nouvelle carte bancaire.</label></p>
</div>
</div>
</div>
</div>
</div>
<div class="sds-spotSelect sds-showCustomIndicatorHover ">
<input type="radio" id="spotRadio-3" class="sds-spotSelect__radioInput sr-only" value="" name="radio-name">
<div data-scope-wrapper="box" data-scope="flat" class="sds-spotSelect__body">
<div class="sds-spotSelect__content">
<span class="sds-radioDot sds-spotSelect__checkItem" aria-hidden="true"></span>
<img src="../../media/illustrative-icons/sdsillu-differentcardsb.svg" alt="">
<div class="sds-spotSelect__inner sds-stackMd">
<div class="sds-spotSelect__text">
<div class="sds-spotSelect__title">
<div class="sds-textSemiBold">
<label class="sds-spotSelect__checkItemLabel" for="spotRadio-3">Gérer le quotidien</label>
</div>
</div>
<p><label class="sds-spotSelect__checkItemLabel" for="spotRadio-3">Ouvrir un compte courant et epargne ou obtenir une nouvelle carte bancaire.</label></p>
</div>
</div>
</div>
</div>
</div>
<div class="sds-spotSelect sds-showCustomIndicatorHover ">
<input type="radio" id="spotRadio-3" class="sds-spotSelect__radioInput sr-only" value="" name="radio-name">
<div data-scope-wrapper="box" data-scope="flat" class="sds-spotSelect__body">
<div class="sds-spotSelect__content">
<span class="sds-radioDot sds-spotSelect__checkItem" aria-hidden="true"></span>
<img src="../../media/illustrative-icons/sdsillu-differentcardsb.svg" alt="">
<div class="sds-spotSelect__inner sds-stackMd">
<div class="sds-spotSelect__text">
<div class="sds-spotSelect__title">
<div class="sds-textSemiBold">
<label class="sds-spotSelect__checkItemLabel" for="spotRadio-3">Gérer le quotidien</label>
</div>
</div>
<p><label class="sds-spotSelect__checkItemLabel" for="spotRadio-3">Ouvrir un compte courant et epargne ou obtenir une nouvelle carte bancaire.</label></p>
</div>
</div>
</div>
</div>
</div>
<div class="sds-spotSelect sds-showCustomIndicatorHover ">
<input type="radio" id="spotRadio-3" class="sds-spotSelect__radioInput sr-only" value="" name="radio-name">
<div data-scope-wrapper="box" data-scope="flat" class="sds-spotSelect__body">
<div class="sds-spotSelect__content">
<span class="sds-radioDot sds-spotSelect__checkItem" aria-hidden="true"></span>
<img src="../../media/illustrative-icons/sdsillu-differentcardsb.svg" alt="">
<div class="sds-spotSelect__inner sds-stackMd">
<div class="sds-spotSelect__text">
<div class="sds-spotSelect__title">
<div class="sds-textSemiBold">
<label class="sds-spotSelect__checkItemLabel" for="spotRadio-3">Gérer le quotidien</label>
</div>
</div>
<p><label class="sds-spotSelect__checkItemLabel" for="spotRadio-3">Ouvrir un compte courant et epargne ou obtenir une nouvelle carte bancaire.</label></p>
</div>
</div>
</div>
</div>
</div>
<div class="sds-spotSelect sds-showCustomIndicatorHover ">
<input type="radio" id="spotRadio-3" class="sds-spotSelect__radioInput sr-only" value="" name="radio-name">
<div data-scope-wrapper="box" data-scope="flat" class="sds-spotSelect__body">
<div class="sds-spotSelect__content">
<span class="sds-radioDot sds-spotSelect__checkItem" aria-hidden="true"></span>
<img src="../../media/illustrative-icons/sdsillu-differentcardsb.svg" alt="">
<div class="sds-spotSelect__inner sds-stackMd">
<div class="sds-spotSelect__text">
<div class="sds-spotSelect__title">
<div class="sds-textSemiBold">
<label class="sds-spotSelect__checkItemLabel" for="spotRadio-3">Gérer le quotidien</label>
</div>
</div>
<p><label class="sds-spotSelect__checkItemLabel" for="spotRadio-3">Ouvrir un compte courant et epargne ou obtenir une nouvelle carte bancaire.</label></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sds-sectionForm__itemFooter">
<div class="sds-btnGroup">
<button type="button" class="sds-btn -btnSecondary -btnInverse">
<span class="sds-btn__text">Retour</span>
</button>
<button type="button" class="sds-btn -btnPrimary">
<span class="sds-btn__text">Continuer</span>
</button>
</div>
</div>
</div>
</div>
<div class="sds-sectionForm__container -isActive">
<div class="sds-sectionForm__item -hasStickyMobileBtn sds-box -insetLg sds-stackMd">
<div class="sds-sectionForm__itemBody sds-stackMd">
<div class="row row-sm align-items-center">
<div class="col-md-5">
<img class="img-fluid d-block mx-auto" src="https://design.spuerkeess.lu/media/illustrations/svg750x560/hero/sdsillu-simugood.svg" alt="">
</div>
<div class="col-md-7">
<div class="h2">
Super, votre projet semble réalisable.
</div>
</div>
</div>
<div class="row row-sm flex-md-row-reverse">
<div class="col-md-6">
<div class="sds-stackMd sticky-top" id="housingSimulatorResults">
<div class="h4">Exemples de mensualités du prêt*</div>
<div class="sds-stackMd">
<div class="sds-simulatorResultCard sds-box -boxSunken">
<div class="sds-simulatorResultCard__header">
<div class="sds-textSemiBold sds-textHelper">
Taux variable (1,8%)
</div>
<div class="sds-amount -positive -amountXl">
<span class="sds-amount__value">{+#.###,##}</span>
<span class="sds-amount__currency">€</span>
<span class="sds-amount__frequency">
/ mois
</span>
</div>
</div>
<p class="sds-textHelper">Soit 3.990 € / mois avec vos charges mensuelles existantes</p>
<p class="sds-textHelper">TAEG: 3.76%</p>
</div>
<div class="sds-simulatorResultCard sds-box -boxSunken">
<div class="sds-simulatorResultCard__header">
<div class="sds-textSemiBold sds-textHelper">
Taux variable (1,8%)
</div>
<div class="sds-amount -positive -amountXl">
<span class="sds-amount__value">{+#.###,##}</span>
<span class="sds-amount__currency">€</span>
<span class="sds-amount__frequency">
/ mois
</span>
</div>
</div>
<p class="sds-textHelper">Soit 3.990 € / mois avec vos charges mensuelles existantes</p>
<p class="sds-textHelper">TAEG: 3.76%</p>
</div>
</div>
<div class="text-center">
<button type="button" class="sds-btn -btnSecondary -btnSmall -collapseTrigger">
<span class="sds-icon sds-icon-paperplane"></span>
<span class="sds-btn__text">Envoyer données</span>
</button>
</div>
<p class="sds-formDisclaimer">
(*) mensualités indicatives calculées sur base des données saisies.<br>(**) Vous pouvez ajouter une assurance solde restant dû (ASRD) pour vous protéger. Simulation indicative pour 60% de montant total assuré. <a href=''>Rendez-vous sur lalux</a>
</p>
</div>
</div>
<div class="col-md-6">
<div class="sds-stackMd">
<div class="h4">Résultat simulation</div>
<div>
<div class="form-group">
<div class="sds-label">
Montant
</div>
<div class="sds-amount -amountXl -secondary100">
<span class="sds-amount__value">335,30</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
<div class="form-group">
<label for="" class="sds-label -labelForm">
Apport personnel
</label>
<div class="sds-input -hasShadow">
<input id="" class="sds-input form-control" type="number" placeholder="0" value="4000">
<div class="sds-input__shadowInput form-control" aria-hidden="true">
<div class="sds-input__shadowValue">
4000
</div>
<div class="sds-input__shadowCurrency">
€
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="" class="sds-label -labelForm">
Durée du prêt
</label>
<div class="sds-input -hasShadow">
<input id="" class="sds-input form-control" type="number" placeholder="0" value="30">
<div class="sds-input__shadowInput form-control" aria-hidden="true">
<div class="sds-input__shadowValue">
30
</div>
<div class="sds-input__shadowCurrency">
ans
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="collapse" id="simulationDetail">
<div class="sds-inputRecap">
<div class="row row-xs">
<div class="col-12">
<label for="" class="sds-label -labelForm">
Montant du bien immobilier
</label>
<div class="sds-input -hasShadow">
<input id="" class="sds-input form-control" type="number" placeholder="0" value="4000">
<div class="sds-input__shadowInput form-control" aria-hidden="true">
<div class="sds-input__shadowValue">
4000
</div>
<div class="sds-input__shadowCurrency">
€
</div>
</div>
</div>
</div>
<div class="col-12">
<label for="" class="sds-label -labelForm">
Montant des travaux
</label>
<div class="sds-input -hasShadow">
<input id="" class="sds-input form-control" type="number" placeholder="0" value="4000">
<div class="sds-input__shadowInput form-control" aria-hidden="true">
<div class="sds-input__shadowValue">
4000
</div>
<div class="sds-input__shadowCurrency">
€
</div>
</div>
</div>
</div>
<div class="col-12">
<label for="" class="sds-label -labelForm">
Apport personnel
</label>
<div class="sds-input -hasShadow">
<input id="" class="sds-input form-control" type="number" placeholder="0" value="4000">
<div class="sds-input__shadowInput form-control" aria-hidden="true">
<div class="sds-input__shadowValue">
4000
</div>
<div class="sds-input__shadowCurrency">
€
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="row align-items-stretch">
<div class="col-5 d-flex flex-column">
<label for="test" class="sds-label -labelForm flex-grow-1">
Frais d'enrgeistrement
<button type="button" class="sds-infoDot sds-label__infoDot -small" data-trigger="focus" data-container="body" data-placement="left" data-toggle="popover" title="Popover title" data-content="Le détail de la / des transactions (bénéficiaire et communication) sera masqué dans les mouvements des transactions (sur S-Net Pro et dans les extraits de compte)">
<span class="sds-icon sds-icon-infocirclefill"></span>
<span class="sr-only">Show more info</span>
</button>
</label>
<div class="sds-input -hasShadow">
<input id="" class="sds-input form-control" type="number" placeholder="0" value="4000" readonly>
<div class="sds-input__shadowInput form-control" aria-hidden="true">
<div class="sds-input__shadowValue">
4000
</div>
<div class="sds-input__shadowCurrency">
€
</div>
</div>
</div>
</div>
<div class="col align-self-end">
<div class="sds-inputRecap__operation">
-
</div>
</div>
<div class="col-5 d-flex flex-column">
<label for="test" class="sds-label -labelForm flex-grow-1">
Crédit d'impôt
<button type="button" class="sds-infoDot sds-label__infoDot -small" data-trigger="focus" data-container="body" data-placement="left" data-toggle="popover" title="Popover title" data-content="Le détail de la / des transactions (bénéficiaire et communication) sera masqué dans les mouvements des transactions (sur S-Net Pro et dans les extraits de compte)">
<span class="sds-icon sds-icon-infocirclefill"></span>
<span class="sr-only">Show more info</span>
</button>
</label>
<div class="sds-input -hasShadow">
<input id="test" class="sds-input form-control" type="number" placeholder="0" value="4000">
<div class="sds-input__shadowInput form-control" aria-hidden="true">
<div class="sds-input__shadowValue">
4000
</div>
<div class="sds-input__shadowCurrency">
€
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12">
<label for="test" class="sds-label -labelForm">
Autres frais lirés au projet
<button type="button" class="sds-infoDot sds-label__infoDot -small" data-trigger="focus" data-container="body" data-placement="left" data-toggle="popover" title="Popover title" data-content="Le détail de la / des transactions (bénéficiaire et communication) sera masqué dans les mouvements des transactions (sur S-Net Pro et dans les extraits de compte)">
<span class="sds-icon sds-icon-infocirclefill"></span>
<span class="sr-only">Show more info</span>
</button>
</label>
<div class="sds-input -hasShadow">
<input id="" class="sds-input form-control" type="number" placeholder="0" value="4000" readonly>
<div class="sds-input__shadowInput form-control" aria-hidden="true">
<div class="sds-input__shadowValue">
4000
</div>
<div class="sds-input__shadowCurrency">
€
</div>
</div>
</div>
</div>
</div>
<div class="sds-inputRecap__total">
<div class="sds-label">
Coût du projet
</div>
<div class="sds-amount -amountLg">
<span class="sds-amount__value">335,30</span>
<span class="sds-amount__currency">€</span>
</div>
</div>
</div>
</div>
<div class="sds-housingSimulator__updateHint -shown js-housingSimulator__updateHint">
<a href="#housingSimulatorResults" class="sds-btn -btnCta -btnCtaHighlight">
<span class="sds-icon sds-icon-arrowtop"></span>
<span class="sds-btn__text">Nouvelles mensualités</span>
</a>
</div>
</div>
<div class="form-group text-center">
<button type="button" class="sds-btn -btnSecondary -btnSmall -collapseTrigger -collapseTrigger" data-toggle="collapse" data-target="#simulationDetail">
<span class="sds-icon sds-icon-plus"></span>
<span class="sds-btn__text">Afficher les détails du calcul</span>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="row row-sm sds-exceptionStackXxl">
<div class="col-12">
<p class="sds-formDisclaimer">
La présente simulation est uniquement fournie à titre indicatif et n'engage nullement Spuerkeess. Pour une proposition concrète, nous vous prions de vous adresser à une de nos agences, respectivement de faire une demande en ligne.
</p>
</div>
</div>
</div>
<div class="sds-sectionForm__itemFooter">
<div class="sds-btnGroup">
<button type="button" class="sds-btn -btnSecondary -btnInverse">
<span class="sds-btn__text">Retour</span>
</button>
<div class="sds-sectionForm__stickyFooterBtn -shown">
<div class="d-md-none">
<button type="button" class="sds-btn -btnSecondary">
<span class="sds-btn__text">Débuter ma demande de projet</span>
</button>
</div>
<div class="d-none d-md-block">
<button type="button" class="sds-btn -btnSecondary -btnInverse">
<span class="sds-btn__text">Débuter ma demande de projet</span>
</button>
</div>
</div>
<button type="button" class="sds-btn -btnPrimary">
<span class="sds-btn__text">Débuter ma demande de prêt</span>
</button>
</div>
</div>
</div>
</div>
<div class="sds-sectionForm__container -next">
<div class="sds-sectionForm__item sds-box -insetLg sds-stackMd">
<div class="sds-sectionForm__itemHeading sds-stackXs">
<h2 class="h3">Pour quel motif souhaitez-vous prendre un rendez-vous ? </h2>
<p>Sélectionnez la catégorie correspondant à votre besoin.</p>
</div>
<div class="sds-sectionForm__itemBody sds-stackMd">
<div class="sds-spotSelectList">
<div class="sds-spotSelect sds-showCustomIndicatorHover ">
<input type="radio" id="1" class="sds-spotSelect__radioInput sr-only" value="" name="radio-name">
<div data-scope-wrapper="box" data-scope="flat" class="sds-spotSelect__body">
<div class="sds-spotSelect__content">
<span class="sds-radioDot sds-spotSelect__checkItem" aria-hidden="true"></span>
<img src="../../media/illustrative-icons/sdsillu-differentcardsb.svg" alt="">
<div class="sds-spotSelect__inner sds-stackMd">
<div class="sds-spotSelect__text">
<div class="sds-spotSelect__title">
<div class="sds-textSemiBold">
<label class="sds-spotSelect__checkItemLabel" for="1">Gérer le quotidien</label>
</div>
</div>
<p><label class="sds-spotSelect__checkItemLabel" for="1">Ouvrir un compte courant et epargne ou obtenir une nouvelle carte bancaire.</label></p>
</div>
</div>
</div>
</div>
</div>
<div class="sds-spotSelect sds-showCustomIndicatorHover ">
<input type="radio" id="2" class="sds-spotSelect__radioInput sr-only" checked value="" name="radio-name">
<div data-scope-wrapper="box" data-scope="flat" class="sds-spotSelect__body">
<div class="sds-spotSelect__content">
<span class="sds-radioDot sds-spotSelect__checkItem" aria-hidden="true"></span>
<img src="../../media/illustrative-icons/sdsillu-financecalculator.svg" alt="">
<div class="sds-spotSelect__inner sds-stackMd">
<div class="sds-spotSelect__text">
<div class="sds-spotSelect__title">
<div class="sds-textSemiBold">
<label class="sds-spotSelect__checkItemLabel" for="2">Financer un projet</label>
</div>
</div>
<p><label class="sds-spotSelect__checkItemLabel" for="2">Souscrire un prêt logement, un prêt pour ses études ou bien un prêt à la consommation.</label></p>
</div>
</div>
</div>
</div>
</div>
<div class="sds-spotSelect sds-showCustomIndicatorHover ">
<input type="radio" id="3" class="sds-spotSelect__radioInput sr-only" value="" name="radio-name">
<div data-scope-wrapper="box" data-scope="flat" class="sds-spotSelect__body">
<div class="sds-spotSelect__content">
<span class="sds-radioDot sds-spotSelect__checkItem" aria-hidden="true"></span>
<img src="../../media/illustrative-icons/sdsillu-boxlightgear.svg" alt="">
<div class="sds-spotSelect__inner sds-stackMd">
<div class="sds-spotSelect__text">
<div class="sds-spotSelect__title">
<div class="sds-textSemiBold">
<label class="sds-spotSelect__checkItemLabel" for="3">Investir</label>
</div>
</div>
<p><label class="sds-spotSelect__checkItemLabel" for="3">Ouvrir un produit d’investissement comme Speedinvest.</label></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sds-message sds-stackMd">
<div class="sds-message__header">
<span class="sds-icon sds-icon-infocirclefill"></span>
<div class="sds-message__iconAlign">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque culpa cumque debitis dicta ducimus fugiat fugit maiores modi molestiae officiis provident quis, quos ratione sapiente sunt tempora temporibus unde veniam!</p>
</div>
</div>
</div>
</div>
<div class="sds-sectionForm__itemFooter">
<div class="sds-btnGroup">
<button type="button" class="sds-btn -btnSecondary -btnInverse">
<span class="sds-btn__text">Retour</span>
</button>
<button type="button" class="sds-btn -btnPrimary">
<span class="sds-btn__text">Continuer</span>
</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<!-- main content end -->
</div>
</main>
</div>
</div>
<!-- content such as modals, tooltips, popovers etc should be included here -->
{% extends "@snet-page-frame--step" %}
{% block panelMainContent %}
<div class="row h-100 justify-content-center no-bottom-gutter">
<div class="col-12 col-lg-10">
<form class="{{ namespace }}sectionForm {{ namespace }}housingSimulator">
<div class="{{ namespace }}sectionForm__container -prev">
{% render '@snet-section-form--spot-message'%}
</div>
<div class="{{ namespace }}sectionForm__container -isActive">
{% render "@spk-logement-simulator" %}
</div>
<div class="{{ namespace }}sectionForm__container -next">
{% render '@snet-section-form--message'%}
</div>
</form>
</div>
</div>
{% endblock %}
/* variables specific to current element */
$element-specific-variables: "";
.#{$namespace}housingSimulator {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
/* Pseudo Elements */
&::before {
}
&::after {
}
/*
Include elements that are linked to the current element but have to reside at the root level of the stylesheet
(e.g: keyframes)
*/
@at-root {
}
/* children - write selector in full in comments in order to facilitate search */
// housingSimulator__childElement
&__updateHint {
// follows same logic as parent
opacity: 0;
visibility: hidden;
text-align: center;
position: fixed;
z-index: z("fixed");
top: $nav-topbar-height-mobile-global + $mobile-stepper-height-global + map-deep-get($token-spacer-unit-map, "8");
left: 0;
right: 0;
transition: transform 0.15s linear;
transform: translateY(-($nav-topbar-height-mobile-global + $mobile-stepper-height-global + map-deep-get($token-spacer-unit-map, "8")));
&.-shown {
transform: translateY(0);
opacity: 1;
visibility: visible;
&.-headroomPinned {
transform: translateY(-$nav-topbar-height-mobile-global);
}
}
@include media-breakpoint-up(md) {
display: none;
}
}
/* modifiers */
// housingSimulator -altStyle
&.-altStyle {
// follows same logic as base element
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}