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="70, 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">
<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 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 -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">
<div class="{{ namespace }}sectionForm__container -prev">
{% render '@snet-section-form--spot-message'%}
</div>
<div class="{{ namespace }}sectionForm__container -isActive">
{% if message %}
{% render '@snet-section-form--message'%}
{% elseif spotMessageShown %}
{% render '@snet-section-form--spot-message-shown'%}
{% elseif spotMessage %}
{% render '@snet-section-form--spot-message'%}
{% elseif agences %}
{% render '@snet-section-form--agences'%}
{% elseif confirmation %}
{% render '@snet-section-form--confirmation'%}
{% elseif recap %}
{% render '@snet-section-form--recap'%}
{% elseif timePicker %}
{% render '@snet-section-form--time-picker'%}
{% else %}
{% render '@snet-section-form--spot-message'%}
{% endif %}
</div>
<div class="{{ namespace }}sectionForm__container -next">
{% render '@snet-section-form--message'%}
</div>
</form>
</div>
</div>
{% endblock %}
export default class DemandeRdv {
constructor() {
this.fireHeadroom();
}
fireHeadroom() {
let stickyHeader = document.querySelector(".sds-header.-headroom");
if (CSS && CSS.supports && CSS.supports("position", "sticky")) {
if(stickyHeader) {
let options = {
// vertical offset in px before element is first unpinned
offset : document.querySelector('.sds-header__nav').clientHeight + document.querySelector('.sds-header__stepper').clientHeight,
// or you can specify offset individually for up/down scroll
// scroll tolerance in px before state changes
tolerance : 0,
// or you can specify tolerance individually for up/down scroll
// css classes to apply
classes : {
// when element is initialised
initial : "-headroom",
// when scrolling up
pinned : "-headroomPinned",
// when scrolling down
unpinned : "-headroomUnpinned",
// when above offset
top : "-headroomTop",
// when below offset
notTop : "-headroomNotTop",
// when at bottom of scroll area
bottom : "-headroomBottom",
// when not at bottom of scroll area
notBottom : "-headroomNotBottom",
// when frozen method has been called
frozen: "-headroomFrozen"
},
// callback when pinned, `this` is headroom object
onPin : function() {
if($(".js-housingSimulator__updateHint").length > 0) {
document.querySelector(".js-housingSimulator__updateHint").classList.remove("-headroomPinned")
}
},
// callback when unpinned, `this` is headroom object
onUnpin : function() {
if($(".js-housingSimulator__updateHint").length > 0) {
document.querySelector(".js-housingSimulator__updateHint").classList.add("-headroomPinned")
}
},
// callback when above offset, `this` is headroom object
onTop : function() {
},
// callback when below offset, `this` is headroom object
onNotTop : function() {},
// callback when at bottom of page, `this` is headroom object
onBottom : function() {},
// callback when moving away from bottom of page, `this` is headroom object
onNotBottom : function() {}
};
let headroom = new Headroom(stickyHeader, options);
headroom.init();
}
} else {
console.log("no position: sticky; support");
}
}
}