No notes defined.
<!-- Default -->
<div class="sds-leaseOfferSimulator row align-items-center">
<div class="col-12 col-md-6">
<div class="sds-stackXxl sds-leaseOfferSimulator__actions">
<h2 class="h2">
Configurez votre leasing tout compris
<span class="sds-headingLight">Simulez votre loyer mensuel et demandez une offre personnalisée</span>
</h2>
<fieldset>
<div class="form-group-xl">
<label for="kilometrage-select" class="sds-label -labelForm -large">
Kilométrage annuel
</label>
<div class="sds-select">
<select id="kilometrage-select" class="sds-select form-control">
<option value="opt-0">10.000km</option>
<option value="opt-1">15.000km</option>
<option value="opt-2">20.000km</option>
</select>
<span class="sds-select__arrow sds-icon sds-icon-chevrondown" aria-hidden="true"></span>
</div>
</div>
<div class="form-group-xl">
<label for="taux-rateRange" class="sds-label -labelForm -large">
Durée du leasing
</label>
<div class="sds-range -hasIndicator">
<div class="sds-range__body">
<input type="range" class="custom-range" id="taux-rateRange" value="44" min="36" max="60">
<div class="sds-range__indicator">
<span>44</span>mois
</div>
</div>
<div class="sds-range__footer">
<span class="sds-range__min">
<span>36</span>
</span>
<span class="sds-range__max">
<span>60</span>
</span>
</div>
</div>
</div>
<div class="form-group-xl">
<fieldset>
<legend>
<div class="sds-label -labelForm -large">
Choisir une couleur
<button type="button" class="sds-infoDot -small sds-label__infoDot -small" data-toggle="modal" data-target="#lease-offer-detail-test-modal">
<span class="sds-icon sds-icon-infocircleborder"></span>
<span class="sr-only">Show more info</span>
</button>
</div>
</legend>
<div class="sds-captcha -wrap -itemsAlignedBlockStart -blockDisplay">
<div class="sds-captcha__innerWrapper">
<ul class="list-unstyled sds-captcha__inner btn-group-toggle" data-toggle="radios">
<li>
<label class="sds-captcha__item" for="captcha-1">
<input id="captcha-1" name="captcha" class="sr-only" type="radio">
<span class="sds-badgeSelector sds-captcha__selectorShape -colorOption">
<span class="sds-colorOption" style="background-color: #000000"></span>
<span class="sds-badgeSelector__text">Noir</span>
</span>
</label>
</li>
<li>
<label class="sds-captcha__item" for="captcha-2">
<input id="captcha-2" name="captcha" class="sr-only" type="radio">
<span class="sds-badgeSelector sds-captcha__selectorShape -colorOption">
<span class="sds-colorOption" style="background-color: #E9DB5C"></span>
<span class="sds-badgeSelector__text">Jaune</span>
</span>
</label>
</li>
<li>
<label class="sds-captcha__item" for="captcha-3">
<input id="captcha-3" name="captcha" class="sr-only" type="radio">
<span class="sds-badgeSelector sds-captcha__selectorShape -colorOption">
<span class="sds-colorOption" style="background-color: #4D6E90"></span>
<span class="sds-badgeSelector__text">Bleu</span>
</span>
</label>
</li>
<li>
<label class="sds-captcha__item" for="captcha-4">
<input id="captcha-4" name="captcha" class="sr-only" type="radio">
<span class="sds-badgeSelector sds-captcha__selectorShape -colorOption">
<span class="sds-colorOption" style="background-color: #22AA77"></span>
<span class="sds-badgeSelector__text">Vert</span>
</span>
</label>
</li>
</ul>
<div class="sds-captcha__error invalid-feedback">
captcha error message
</div>
</div>
</div>
</fieldset>
</div>
<div class="form-group-xl">
<div class="sds-label -labelForm -large">
Choisir une voiture
<button type="button" class="sds-infoDot -small sds-label__infoDot -small" data-toggle="modal" data-target="#lease-offer-detail-test-modal">
<span class="sds-icon sds-icon-infocircleborder"></span>
<span class="sr-only">Show more info</span>
</button>
</div>
<div class="sds-advancedSelect">
<div class="dropdown">
<button type="button" class="sds-advancedSelectItem" data-toggle="dropdown" data-offset="0,8" data-display="static">
<span class="sds-advancedSelectItem__img">
<img src="https://cdn.imagin.studio/getImage?&=&customer=spuerkeess&make=opel&modelFamily=mokka-e&modelRange=mokka-e&modelVariant=od&modelYear=2021&powerTrain=fossil&transmission=0&bodySize=5&trim=0&paintId=pspc0068&angle=23&width=120&zoomType=fullscreen" alt="">
</span>
<div class="sds-advancedSelectItem__content">
<p>Jeep</p>
<p class="sds-advancedSelectItem__meta sds-textHelper">Cooper SE</p>
</div>
<span class="sds-advancedSelectItem__icon sds-icon sds-icon-chevrondown" aria-hidden="true"></span>
</button>
<div class="w-100 dropdown-menu dropdown-menu-inset-md dropdown-scroll-height-md">
<ul class="list-unstyled sds-stackSm -stackBorder">
<li>
<div class="sds-outOfBounds">
<button type="button" class="sds-advancedSelectItem">
<span class="sds-advancedSelectItem__img">
<img src="https://cdn.imagin.studio/getImage?&=&customer=spuerkeess&make=opel&modelFamily=mokka-e&modelRange=mokka-e&modelVariant=od&modelYear=2021&powerTrain=fossil&transmission=0&bodySize=5&trim=0&paintId=pspc0068&angle=23&width=120&zoomType=fullscreen" alt="">
</span>
<div class="sds-advancedSelectItem__content">
<p>Jeep</p>
<p class="sds-advancedSelectItem__meta sds-textHelper">Cooper SE</p>
</div>
</button>
</div>
</li>
<li>
<div class="sds-outOfBounds">
<button type="button" class="sds-advancedSelectItem" disabled="true">
<span class="sds-advancedSelectItem__img">
<img src="https://cdn.imagin.studio/getImage?&=&customer=spuerkeess&make=opel&modelFamily=mokka-e&modelRange=mokka-e&modelVariant=od&modelYear=2021&powerTrain=fossil&transmission=0&bodySize=5&trim=0&paintId=pspc0068&angle=23&width=120&zoomType=fullscreen" alt="">
</span>
<div class="sds-advancedSelectItem__content">
<p>Jeep</p>
<p class="sds-advancedSelectItem__meta sds-textHelper">Cooper SE</p>
</div>
</button>
</div>
</li>
<li>
<div class="sds-outOfBounds">
<button type="button" class="sds-advancedSelectItem">
<span class="sds-advancedSelectItem__img">
<img src="https://cdn.imagin.studio/getImage?&=&customer=spuerkeess&make=opel&modelFamily=mokka-e&modelRange=mokka-e&modelVariant=od&modelYear=2021&powerTrain=fossil&transmission=0&bodySize=5&trim=0&paintId=pspc0068&angle=23&width=120&zoomType=fullscreen" alt="">
</span>
<div class="sds-advancedSelectItem__content">
<p>Jeep</p>
<p class="sds-advancedSelectItem__meta sds-textHelper">Cooper SE</p>
</div>
</button>
</div>
</li>
<li>
<div class="sds-outOfBounds">
<button type="button" class="sds-advancedSelectItem">
<span class="sds-advancedSelectItem__img">
<img src="https://cdn.imagin.studio/getImage?&=&customer=spuerkeess&make=opel&modelFamily=mokka-e&modelRange=mokka-e&modelVariant=od&modelYear=2021&powerTrain=fossil&transmission=0&bodySize=5&trim=0&paintId=pspc0068&angle=23&width=120&zoomType=fullscreen" alt="">
</span>
<div class="sds-advancedSelectItem__content">
<p>Jeep</p>
<p class="sds-advancedSelectItem__meta sds-textHelper">Cooper SE</p>
</div>
</button>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</fieldset>
</div>
</div>
<div class="col-12 col-md-6 offset-lg-1 col-lg-5 sds-stackSm">
<div class="sds-box -insetLg -boxSunken">
<div class="sds-stackMd">
<h2 class="h2">
Jeep
<span class="sds-headingLight">Avenger Longitude BEV</span>
</h2>
<div class="sds-stackMd -stackBorder">
<img class="img-fluid d-block mx-auto" src="https://cdn.imagin.studio/getImage?&=&customer=spuerkeess&make=opel&modelFamily=mokka-e&modelRange=mokka-e&modelVariant=od&modelYear=2021&powerTrain=fossil&transmission=0&bodySize=5&trim=0&paintId=pspc0068&angle=23&width=800&zoomType=fullscreen" alt="">
<div>
<table class="sds-infoTable table -hasTotal">
<tbody>
<tr>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-label">
Kilométrage annuel
</div>
</div>
</td>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-textSemiBold">
10.000km/an
</div>
</div>
</td>
</tr>
<tr>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-label">
Durée du leasing
</div>
</div>
</td>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-textSemiBold">
60 mois
</div>
</div>
</td>
</tr>
<tr>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-label">
mensuellement TTC
</div>
</div>
</td>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-textSemiBold">
535,00€
</div>
</div>
</td>
</tr>
<tr>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-label">
Services inclus
</div>
</div>
</td>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-textSemiBold">
Tout compris
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="sds-message sds-stackMd -light">
<div class="sds-message__header">
<span class="sds-icon sds-icon-infocirclefill"></span>
<div class="sds-message__iconAlign">
<p>Simulation sans déduction d'un éventuel apport personnel. Possibilité d'obtenir une offre personnalisée avec déduction d'acompte lors d'un conseil en agence.</p>
</div>
</div>
</div>
<div class="sds-leaseOfferSimulator__cta text-center">
<a href="" class="sds-btn -btnPrimary">
<span class="sds-btn__text">Je désire une offre</span>
<span class="sds-icon sds-icon-arrownext"></span>
</a>
</div>
</div>
</div>
<p class="sds-formDisclaimer -small -insetHorizLg">
La présente simulation est uniquement fournie à titre indicatif et n'engage nullement la Spuerkeess. Pour une proposition concrète, nous vous prions de vous adresser à une de nos agences, respectivement de présenter une demande en ligne.
</p>
</div>
</div>
<!-- Nopic -->
<div class="sds-leaseOfferSimulator row align-items-center">
<div class="col-12 col-md-6">
<div class="sds-stackXxl sds-leaseOfferSimulator__actions">
<h2 class="h2">
Configurez votre leasing tout compris
<span class="sds-headingLight">Simulez votre loyer mensuel et demandez une offre personnalisée</span>
</h2>
<fieldset>
<div class="form-group-xl">
<label for="kilometrage-select" class="sds-label -labelForm -large">
Kilométrage annuel
</label>
<div class="sds-select">
<select id="kilometrage-select" class="sds-select form-control">
<option value="opt-0">10.000km</option>
<option value="opt-1">15.000km</option>
<option value="opt-2">20.000km</option>
</select>
<span class="sds-select__arrow sds-icon sds-icon-chevrondown" aria-hidden="true"></span>
</div>
</div>
<div class="form-group-xl">
<label for="taux-rateRange" class="sds-label -labelForm -large">
Durée du leasing
</label>
<div class="sds-range -hasIndicator">
<div class="sds-range__body">
<input type="range" class="custom-range" id="taux-rateRange" value="44" min="36" max="60">
<div class="sds-range__indicator">
<span>44</span>mois
</div>
</div>
<div class="sds-range__footer">
<span class="sds-range__min">
<span>36</span>
</span>
<span class="sds-range__max">
<span>60</span>
</span>
</div>
</div>
</div>
<div class="form-group-xl">
<fieldset>
<legend>
<div class="sds-label -labelForm -large">
Choisir une couleur
<button type="button" class="sds-infoDot -small sds-label__infoDot -small" data-toggle="modal" data-target="#lease-offer-detail-test-modal">
<span class="sds-icon sds-icon-infocircleborder"></span>
<span class="sr-only">Show more info</span>
</button>
</div>
</legend>
<div class="sds-captcha -wrap -itemsAlignedBlockStart -blockDisplay">
<div class="sds-captcha__innerWrapper">
<ul class="list-unstyled sds-captcha__inner btn-group-toggle" data-toggle="radios">
<li>
<label class="sds-captcha__item" for="captcha-1">
<input id="captcha-1" name="captcha" class="sr-only" type="radio">
<span class="sds-badgeSelector sds-captcha__selectorShape -colorOption">
<span class="sds-colorOption" style="background-color: #000000"></span>
<span class="sds-badgeSelector__text">Noir</span>
</span>
</label>
</li>
<li>
<label class="sds-captcha__item" for="captcha-2">
<input id="captcha-2" name="captcha" class="sr-only" type="radio">
<span class="sds-badgeSelector sds-captcha__selectorShape -colorOption">
<span class="sds-colorOption" style="background-color: #E9DB5C"></span>
<span class="sds-badgeSelector__text">Jaune</span>
</span>
</label>
</li>
<li>
<label class="sds-captcha__item" for="captcha-3">
<input id="captcha-3" name="captcha" class="sr-only" type="radio">
<span class="sds-badgeSelector sds-captcha__selectorShape -colorOption">
<span class="sds-colorOption" style="background-color: #4D6E90"></span>
<span class="sds-badgeSelector__text">Bleu</span>
</span>
</label>
</li>
<li>
<label class="sds-captcha__item" for="captcha-4">
<input id="captcha-4" name="captcha" class="sr-only" type="radio">
<span class="sds-badgeSelector sds-captcha__selectorShape -colorOption">
<span class="sds-colorOption" style="background-color: #22AA77"></span>
<span class="sds-badgeSelector__text">Vert</span>
</span>
</label>
</li>
</ul>
<div class="sds-captcha__error invalid-feedback">
captcha error message
</div>
</div>
</div>
</fieldset>
</div>
<div class="form-group-xl">
<div class="sds-label -labelForm -large">
Choisir une voiture
<button type="button" class="sds-infoDot -small sds-label__infoDot -small" data-toggle="modal" data-target="#lease-offer-detail-test-modal">
<span class="sds-icon sds-icon-infocircleborder"></span>
<span class="sr-only">Show more info</span>
</button>
</div>
<div class="sds-advancedSelect">
<div class="dropdown">
<button type="button" class="sds-advancedSelectItem" data-toggle="dropdown" data-offset="0,8" data-display="static">
<span class="sds-advancedSelectItem__img">
<img src="https://cdn.imagin.studio/getImage?&=&customer=spuerkeess&make=opel&modelFamily=mokka-e&modelRange=mokka-e&modelVariant=od&modelYear=2021&powerTrain=fossil&transmission=0&bodySize=5&trim=0&paintId=pspc0068&angle=23&width=120&zoomType=fullscreen" alt="">
</span>
<div class="sds-advancedSelectItem__content">
<p>Jeep</p>
<p class="sds-advancedSelectItem__meta sds-textHelper">Cooper SE</p>
</div>
<span class="sds-advancedSelectItem__icon sds-icon sds-icon-chevrondown" aria-hidden="true"></span>
</button>
<div class="w-100 dropdown-menu dropdown-menu-inset-md dropdown-scroll-height-md">
<ul class="list-unstyled sds-stackSm -stackBorder">
<li>
<div class="sds-outOfBounds">
<button type="button" class="sds-advancedSelectItem">
<span class="sds-advancedSelectItem__img">
<img src="https://cdn.imagin.studio/getImage?&=&customer=spuerkeess&make=opel&modelFamily=mokka-e&modelRange=mokka-e&modelVariant=od&modelYear=2021&powerTrain=fossil&transmission=0&bodySize=5&trim=0&paintId=pspc0068&angle=23&width=120&zoomType=fullscreen" alt="">
</span>
<div class="sds-advancedSelectItem__content">
<p>Jeep</p>
<p class="sds-advancedSelectItem__meta sds-textHelper">Cooper SE</p>
</div>
</button>
</div>
</li>
<li>
<div class="sds-outOfBounds">
<button type="button" class="sds-advancedSelectItem" disabled="true">
<span class="sds-advancedSelectItem__img">
<img src="https://cdn.imagin.studio/getImage?&=&customer=spuerkeess&make=opel&modelFamily=mokka-e&modelRange=mokka-e&modelVariant=od&modelYear=2021&powerTrain=fossil&transmission=0&bodySize=5&trim=0&paintId=pspc0068&angle=23&width=120&zoomType=fullscreen" alt="">
</span>
<div class="sds-advancedSelectItem__content">
<p>Jeep</p>
<p class="sds-advancedSelectItem__meta sds-textHelper">Cooper SE</p>
</div>
</button>
</div>
</li>
<li>
<div class="sds-outOfBounds">
<button type="button" class="sds-advancedSelectItem">
<span class="sds-advancedSelectItem__img">
<img src="https://cdn.imagin.studio/getImage?&=&customer=spuerkeess&make=opel&modelFamily=mokka-e&modelRange=mokka-e&modelVariant=od&modelYear=2021&powerTrain=fossil&transmission=0&bodySize=5&trim=0&paintId=pspc0068&angle=23&width=120&zoomType=fullscreen" alt="">
</span>
<div class="sds-advancedSelectItem__content">
<p>Jeep</p>
<p class="sds-advancedSelectItem__meta sds-textHelper">Cooper SE</p>
</div>
</button>
</div>
</li>
<li>
<div class="sds-outOfBounds">
<button type="button" class="sds-advancedSelectItem">
<span class="sds-advancedSelectItem__img">
<img src="https://cdn.imagin.studio/getImage?&=&customer=spuerkeess&make=opel&modelFamily=mokka-e&modelRange=mokka-e&modelVariant=od&modelYear=2021&powerTrain=fossil&transmission=0&bodySize=5&trim=0&paintId=pspc0068&angle=23&width=120&zoomType=fullscreen" alt="">
</span>
<div class="sds-advancedSelectItem__content">
<p>Jeep</p>
<p class="sds-advancedSelectItem__meta sds-textHelper">Cooper SE</p>
</div>
</button>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</fieldset>
</div>
</div>
<div class="col-12 col-md-6 offset-lg-1 col-lg-5 sds-stackSm">
<div class="sds-box -insetLg -boxSunken">
<div class="sds-stackMd">
<h2 class="h2">
Jeep
<span class="sds-headingLight">Avenger Longitude BEV</span>
</h2>
<div class="sds-stackMd -stackBorder">
<div class="sds-noPic -aspect16by9">
<svg width="630" height="630" viewBox="0 0 630 630" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="630" height="630" transform="translate(0 0.304688)" fill="#F0F6FF" />
<g opacity="0.32">
<path fill-rule="evenodd" clip-rule="evenodd" d="M382.488 393.045C382.488 396.418 379.757 399.15 376.393 399.15C373.03 399.15 370.298 396.418 370.298 393.045V391.972H382.488V393.045ZM257.043 393.045C257.043 396.418 254.302 399.15 250.938 399.15C247.574 399.15 244.843 396.418 244.843 393.045V391.972H257.043V393.045ZM228.753 325.138C230.554 323.048 234.464 319.273 238.873 315.305H391.133C395.541 319.273 399.451 323.048 401.253 325.138V372.805H305.419H228.753V325.138ZM264.92 238.638H305.419H365.085L379.987 296.138H250.028L264.92 238.638ZM400.189 297.71L381.779 226.65C380.687 222.423 376.873 219.472 372.503 219.472H305.419H257.503C253.133 219.472 249.318 222.423 248.226 226.65L229.816 297.71C209.586 315.104 209.586 319.09 209.586 322.627V382.388C209.586 387.678 213.879 391.972 219.169 391.972H225.676V393.045C225.676 406.979 237.004 418.316 250.938 418.316C264.872 418.316 276.209 406.979 276.209 393.045V391.972H305.419H351.132V393.045C351.132 406.979 362.459 418.316 376.393 418.316C390.318 418.316 401.655 406.979 401.655 393.045V391.972H410.836C416.136 391.972 420.419 387.678 420.419 382.388V322.627C420.419 319.09 420.419 315.104 400.189 297.71ZM258.78 333.372C251.813 333.372 246.149 339.035 246.149 346.002C246.149 352.96 251.813 358.633 258.78 358.633C265.747 358.633 271.411 352.96 271.411 346.002C271.411 339.035 265.747 333.372 258.78 333.372ZM381.184 345.995C381.184 352.962 375.52 358.635 368.553 358.635C361.586 358.635 355.922 352.962 355.922 345.995C355.922 339.037 361.586 333.373 368.553 333.373C375.52 333.373 381.184 339.037 381.184 345.995Z" fill="#4D6E90" />
</g>
</svg>
</div>
<div>
<table class="sds-infoTable table -hasTotal">
<tbody>
<tr>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-label">
Kilométrage annuel
</div>
</div>
</td>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-textSemiBold">
10.000km/an
</div>
</div>
</td>
</tr>
<tr>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-label">
Durée du leasing
</div>
</div>
</td>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-textSemiBold">
60 mois
</div>
</div>
</td>
</tr>
<tr>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-label">
mensuellement TTC
</div>
</div>
</td>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-textSemiBold">
535,00€
</div>
</div>
</td>
</tr>
<tr>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-label">
Services inclus
</div>
</div>
</td>
<td class="">
<div class="sds-infoTable__cellContent">
<div class="sds-textSemiBold">
Tout compris
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="sds-message sds-stackMd -light">
<div class="sds-message__header">
<span class="sds-icon sds-icon-infocirclefill"></span>
<div class="sds-message__iconAlign">
<p>Simulation sans déduction d'un éventuel apport personnel. Possibilité d'obtenir une offre personnalisée avec déduction d'acompte lors d'un conseil en agence.</p>
</div>
</div>
</div>
<div class="sds-leaseOfferSimulator__cta text-center">
<a href="" class="sds-btn -btnPrimary">
<span class="sds-btn__text">Je désire une offre</span>
<span class="sds-icon sds-icon-arrownext"></span>
</a>
</div>
</div>
</div>
<p class="sds-formDisclaimer -small -insetHorizLg">
La présente simulation est uniquement fournie à titre indicatif et n'engage nullement la Spuerkeess. Pour une proposition concrète, nous vous prions de vous adresser à une de nos agences, respectivement de présenter une demande en ligne.
</p>
</div>
</div>
<div class="{{ namespace }}leaseOfferSimulator row align-items-center{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<div class="col-12 col-md-6">
<div class="{{ namespace }}stackXxl {{ namespace }}leaseOfferSimulator__actions">
{% render "@heading--h2-subtext",{
text: "Configurez votre leasing tout compris",
subText: "Simulez votre loyer mensuel et demandez une offre personnalisée"
},true %}
<fieldset>
<div class="form-group-xl">
{% render "@label--form",{
classes: ["-large"],
text: "Kilométrage annuel",
labelFor: "kilometrage-select"
},true %}
{% render "@select",{
options: selectOptions,
id: "kilometrage-select"
},true %}
</div>
<div class="form-group-xl">
{% render "@label--form",{
classes: ["-large"],
text: "Durée du leasing",
labelFor: "taux-rateRange"
},true %}
{% render "@range--has-indicator",{
footer: true,
minValue: "36",
minValueText: "36",
maxValue: "60",
maxValueText: "60",
currentValue: "44",
indicatorValueType: "mois",
id: "taux-rateRange"
},true %}
</div>
<div class="form-group-xl">
<fieldset>
<legend>
{% render "@label--info-dot-modal",{
eltType: "div",
classes: ["-large"],
text: "Choisir une couleur",
infoDotTarget: "lease-offer-detail-test-modal"
},true %}
</legend>
{% render "@captcha",captchaOptions,true %}
</fieldset>
</div>
<div class="form-group-xl">
{% render "@label--info-dot-modal",{
eltType: "div",
classes: ["-large"],
text: "Choisir une voiture",
infoDotTarget: "lease-offer-detail-test-modal"
},true %}
{% render "@spk-advanced-select" %}
</div>
</fieldset>
</div>
</div>
<div class="col-12 col-md-6 offset-lg-1 col-lg-5 {{ namespace }}stackSm">
<div class="{{ namespace }}box -insetLg -boxSunken">
<div class="{{ namespace }}stackMd">
{% render "@heading--h2-subtext",{
text: "Jeep",
subText: "Avenger Longitude BEV"
},true %}
<div class="{{ namespace }}stackMd -stackBorder">
{% if nopic %}
{% render "@nopic-car",{classes: ["-aspect16by9"]},true %}
{% else %}
<img class="img-fluid d-block mx-auto" src="https://cdn.imagin.studio/getImage?&=&customer=spuerkeess&make=opel&modelFamily=mokka-e&modelRange=mokka-e&modelVariant=od&modelYear=2021&powerTrain=fossil&transmission=0&bodySize=5&trim=0&paintId=pspc0068&angle=23&width=800&zoomType=fullscreen" alt="">
{% endif %}
<div>
{% render '@snet-info-table',{
classes: ["-hasTotal"],
tableItems: tableItems
}, true %}
</div>
</div>
{% render "@message--light",{
text: "Simulation sans déduction d'un éventuel apport personnel. Possibilité d'obtenir une offre personnalisée avec déduction d'acompte lors d'un conseil en agence."
},true %}
<div class="{{ namespace }}leaseOfferSimulator__cta text-center">
{% render '@btn-primary--icon-right',{
eltType: "a",
icon: "icon-arrownext",
text: "Je désire une offre"
}, true %}
</div>
</div>
</div>
{% render '@form-disclaimer--small',{
modifiers: ["-small", "-insetHorizLg"]
}, true %}
</div>
</div>
/* variables specific to current element */
$element-specific-variables: "";
.#{$namespace}leaseOfferSimulator {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
position: relative; /* because of postiion sticky of range slider part */
z-index: z("low");
/* 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 */
// leaseOfferSimulator__actions
&__actions {
// follows same logic as parent
padding-bottom: map-deep-get($token-spacer-inset-map, "lg");
z-index: z("low");
@include media-breakpoint-up("md") {
padding-bottom: 0;
}
}
&__cta {
margin-top: map-deep-get($token-spacer-stack-max-map, "md") !important;
}
/* modifiers */
// leaseOfferSimulator -altStyle
&.-altStyle {
// follows same logic as base element
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}