No notes defined.
<div class="sds-snetFrame -step">
<a href="#frameMain" class="sds-skipNavLink">
Skip to content
</a>
<header class="sds-header">
<div class="sds-header__nav">
<nav class="sds-nav -cobranding">
<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>
<a class="sds-nav__logoCoBranding" href="#">
<img src="../../media/logos/logo-immotop-squared.svg" class="img-fluid" alt="">
<img src="../../media/logos/logo-immotop.svg" class="img-fluid" alt="">
</a>
<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>
</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-buyinghousestep1.svg" alt="">
<ul class="sds-snetFrame__menuListInner list-unstyled">
<li class="sds-snetFrame__menuItem -isChecked -isStatic">
<span href="" class="sds-snetFrame__menuLink">
<span class="sds-snetFrame__menuItemStep" data-toggle="tooltip" data-title="Objet du financement" 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">Objet du financement</span>
</span>
</li>
<li class="sds-snetFrame__menuItem -isChecked -isStatic">
<span href="" class="sds-snetFrame__menuLink">
<span class="sds-snetFrame__menuItemStep" data-toggle="tooltip" data-title="Données personnelles" 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">Données personnelles</span>
</span>
</li>
<li class="sds-snetFrame__menuItem -isChecked -isStatic">
<span href="" class="sds-snetFrame__menuLink">
<span class="sds-snetFrame__menuItemStep" data-toggle="tooltip" data-title="Plan de financement" 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">Plan de financement</span>
</span>
</li>
<li class="sds-snetFrame__menuItem -isActive">
<a href="" class="sds-snetFrame__menuLink">
<span class="sds-snetFrame__menuItemStep" data-toggle="tooltip" data-title="Revenus et charges" 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">Revenus et charges</span>
</a>
</li>
<li class="sds-snetFrame__menuItem -isStatic">
<span href="" class="sds-snetFrame__menuLink">
<span class="sds-snetFrame__menuItemStep" data-toggle="tooltip" data-title="Confirmation & envoi" data-placement="right" data-boundary="window">
5
</span>
<span class="sds-snetFrame__menuItemText">Confirmation & envoi</span>
</span>
</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">
<form class="col-12 col-lg-10">
<div class="sds-sectionForm">
<!-- Step 1-->
<div class="sds-sectionForm__container -isActive">
<div class="sds-box -insetLg sds-sectionForm__item sds-stackXl">
<div class="sds-sectionForm__itemHeading h3">
Revenus et charges
</div>
<div class="sds-sectionForm__itemBody sds-stackXl">
<div class="sds-stackLg d-flex flex-column flex-grow-1">
<div class="row row-sm row-cols-md-2">
<div class="sds-stackLg col-12">
<div class="h4">Revenus mensuels</div>
<div class="form-group">
<label for="salaireNet" class="sds-label -labelForm">
Salaire net
</label>
<div class="sds-input -hasShadow">
<input id="salaireNet" class="sds-input form-control" type="number" placeholder="0" value="0">
<div class="sds-input__shadowInput form-control" aria-hidden="true">
<div class="sds-input__shadowValue">
0
</div>
<div class="sds-input__shadowCurrency">
€
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="allocs" class="sds-label -labelForm">
Allocations familiales
</label>
<div class="sds-input -hasShadow">
<input id="allocs" class="sds-input form-control -hasIcon -hasIconRight" 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 class="sds-input__iconRight -isButton">
<button type="button" class="sds-btn -iconBtn -btnSecondary -ghost">
<span class="sds-icon sds-icon-trash"></span>
</button>
</div>
</div>
</div>
<button type="button" class="sds-btn -btnSecondary -btnSmall">
<span class="sds-icon sds-icon-plus"></span>
<span class="sds-btn__text">Revenu</span>
</button>
<div class="sds-exceptionStackMd">
<p class="sds-disclaimer">
Loyer(s), allorcations familiales, pension, ...
</p>
</div>
</div>
<div class="col-12">
<div class="sds-stackLg">
<div class="h4">Charges mensuelles</div>
<div class="form-group">
<label for="loyerActuel" class="sds-label -labelForm">
Loyer payé actuellement
</label>
<div class="sds-input -hasShadow">
<input id="loyerActuel" class="sds-input form-control" type="number" placeholder="0" value="0">
<div class="sds-input__shadowInput form-control" aria-hidden="true">
<div class="sds-input__shadowValue">
0
</div>
<div class="sds-input__shadowCurrency">
€
</div>
</div>
</div>
</div>
<button type="button" class="sds-btn -btnSecondary -btnSmall">
<span class="sds-icon sds-icon-plus"></span>
<span class="sds-btn__text">Charge</span>
</button>
<div class="sds-exceptionStackMd">
<p class="sds-disclaimer">
Loyer(s), crèche, pension alimentaire, ...
</p>
</div>
</div>
</div>
</div>
<div class="row row-sm row-cols-2 no-bottom-gutter flex-grow-1 align-items-end">
<div class="col">
<div class="form-group">
<label for="" class="sds-label -labelForm">
Total revenus
</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="col">
<div class="form-group">
<label for="" class="sds-label -labelForm">
Total charges
</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>
</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">Confirmation</span>
</button>
</div>
</div>
</div>
</div>
<div class="sds-sectionForm__container -next">
</div>
</div>
</form>
</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">
<form class="col-12 col-lg-10">
<div class="{{ namespace }}sectionForm">
<!-- Step 1-->
<div class="{{ namespace }}sectionForm__container -isActive">
<div class="{{ namespace }}box -insetLg {{ namespace }}sectionForm__item {{ namespace }}stackXl">
<div class="{{ namespace }}sectionForm__itemHeading h3">
Revenus et charges
</div>
<div class="{{ namespace }}sectionForm__itemBody {{ namespace }}stackXl">
<div class="{{ namespace }}stackLg d-flex flex-column flex-grow-1">
<div class="row row-sm row-cols-md-2">
<div class="{{ namespace }}stackLg col-12">
<div class="h4">Revenus mensuels</div>
<div class="form-group">
{% render "@label--form",{
labelFor: "salaireNet",
text: "Salaire net"
},true %}
{% render '@input--shadow',{
id: "salaireNet",
value: "0"
}, true %}
</div>
{% if options %}
<ul class="list-unstyled">
{% for key, item in listOptions %}
<li class="form-group">
{% render '@radio',{
text: item.text,
id: item.id
}, true %}
</li>
{% endfor %}
</ul>
{% else %}
<div class="form-group">
{% render "@label--form",{
text: "Allocations familiales",
labelFor: "allocs"
},true %}
{% render "@input--shadow-icon",{
id: "allocs"
},true %}
</div>
{% render '@btn-secondary--small-icon-left',{
text: "Revenu",
icon: "icon-plus"
}, true %}
<div class="{{ namespace }}exceptionStackMd">
{% render "@disclaimer",{
text: "Loyer(s), allorcations familiales, pension, ..."
},true %}
</div>
{% endif %}
</div>
<div class="col-12">
<div class="{{ namespace }}stackLg">
<div class="h4">Charges mensuelles</div>
<div class="form-group">
{% render "@label--form",{
labelFor: "loyerActuel",
text: "Loyer payé actuellement"
},true %}
{% render '@input--shadow',{
id: "loyerActuel",
value: '0'
}, true %}
</div>
{% render '@btn-secondary--small-icon-left',{
text: "Charge",
icon: "icon-plus"
}, true %}
<div class="{{ namespace }}exceptionStackMd">
{% render "@disclaimer",{
text: "Loyer(s), crèche, pension alimentaire, ..."
},true %}
</div>
</div>
</div>
</div>
<div class="row row-sm row-cols-2 no-bottom-gutter flex-grow-1 align-items-end">
<div class="col">
<div class="form-group">
{% render "@label--form",{text: "Total revenus"},true %}
{% render '@input--shadow',{
readonly: true
}, true %}
</div>
</div>
<div class="col">
<div class="form-group">
{% render "@label--form",{text: "Total charges"},true %}
{% render '@input--shadow',{
readonly: true
}, true %}
</div>
</div>
</div>
</div>
</div>
<div class="{{ namespace }}sectionForm__itemFooter">
<div class="{{ namespace }}btnGroup">
{% render '@btn-secondary-inverse',{text: "Retour"}, true %}
{% render '@btn-primary',{text: "Confirmation"}, true %}
</div>
</div>
</div>
</div>
<div class="{{ namespace }}sectionForm__container -next">
</div>
</div>
</form>
</div>
{% endblock %}