To move the devices around on mobile, target the sds-snetGuide__tabDeviceInner elements and move them either horizontally or vertically through the transform: translateX/Y property, depending on which part is hidden.
<a href="#main" class="sds-skipNavigation sds-box -insetMd sds-scaleInteraction text-underline">
Skip navigation
</a>
<div class="sds-pageLayout">
<div class="sds-pageLayout__header" data-headroom-nav>
<header class="sds-header">
<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__stickyFooterContent -staticMd">
<button type="button" class="sds-btn -btnPrimary">
<span class="sds-btn__text">Espace S-Net</span>
</button>
</div>
<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>
<main class="sds-pageLayout__main" id="main">
<div class="container-fluid">
<nav class="sds-breadcrumbs sds-textHelperSmall" aria-label="breadcrumbs">
<ol class="breadcrumb list-unstyled">
<li class="breadcrumb-item">
<a href="#">Particuliers</a>
</li>
<li class="breadcrumb-item">
<a href="#">Gérer le quotidien</a>
</li>
<li class="breadcrumb-item active" aria-current="location">
Zebra
</li>
</ol>
</nav>
</div>
<div class="sds-pageLayout__mainTop">
</div>
<div class="sds-pageLayout__mainCenter">
<section class="sds-section">
<div class="sds-section__innerWrapper">
<div class="sds-section__inner">
<div class="container-fluid">
<div class="sds-pageCover">
<div class="row align-items-center">
<div class="col-12 col-md-7 col-lg-6 d-flex">
<div class="sds-pageCover__textContainer sds-stackXl container-half-xl">
<div class="sds-pageCover__text sds-stackMd">
<h1 class="h-pageCover sds-pageCover__title">S-Net Guide</h1>
<p class="h1 sds-headingLight sds-pageCover__subTitle">Bonjour, comment pouvons-nous vous aider ?</p>
</div>
<div class="sds-exceptionStackXxl">
<button type="button" class="sds-btn -btnSecondary -btnLg -btnBlock justify-content-start" data-toggle="modal" data-target="#searchModal">
<span class="sds-icon sds-icon-search"></span>
<span class="sds-btn__text">Rechercher un article</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="sds-section">
<div class="sds-section__innerWrapper">
<div class="sds-section__inner">
<div class="container">
<div class="sds-stackXxl">
<h2 class="h2">Compte & informations personnelles</h2>
<div class="row">
<div class="col-12 col-md-6">
<div class="sds-linksIconBox">
<div class="sds-linksIconBox__header">
<div class="sds-linksIconBox__icon sds-brandIconWrapper">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M34.4431 7.38786C33.7562 6.42917 32.5247 5.90539 31.268 6.22159L8.26798 12.0087C6.93463 12.3442 6 13.5431 6 14.918V14.9994C6.83566 14.3717 7.87439 13.9998 9 13.9998H35V9.30902L25.2631 11.9645L24.7368 10.035L34.4431 7.38786ZM4 14.918V18.9998V35.9998C4 38.7612 6.23858 40.9998 9 40.9998H37C39.7614 40.9998 42 38.7612 42 35.9998V34.9998H40V35.9998C40 37.6566 38.6569 38.9998 37 38.9998H9C7.34315 38.9998 6 37.6566 6 35.9998V18.9998C6 17.3429 7.34315 15.9998 9 15.9998H37C38.6569 15.9998 40 17.3429 40 18.9998V19.9998H42V18.9998C42 16.2384 39.7614 13.9998 37 13.9998V9.13091C37 5.87492 33.9375 3.48755 30.78 4.28204L7.77996 10.0691C5.55772 10.6283 4 12.6265 4 14.918Z" fill="#003060" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M41.5 24H36V22H41.5C44.5376 22 47 24.4624 47 27.5C47 30.5376 44.5376 33 41.5 33H36V31H41.5C43.433 31 45 29.433 45 27.5C45 25.567 43.433 24 41.5 24Z" fill="#DE0000" />
</svg>
</div>
<div class="sds-linksIconBox__headerText">
<h4 class="h4">Virements</h4>
<p class="sds-linksIconBox__description">Transactions "Eurotransfert" illimitées et sans frais</p>
</div>
</div>
<div class="sds-linksIconBox__body">
<ul class="list-unstyled">
<li class="sds-linksIconBox__bodyItem">
<a href="" class="sds-linksIconBox__listItem">
<span class="sds-btn -iconBtn -btnSecondary -btnInverse -btnSmall sds-linksIconBox__listIcon " aria-hidden="true">
<span class="sds-icon sds-icon-arrownext"></span>
</span>
Comment devenir client Spuerkeess et ouvir un compte ?
</a>
</li>
<li class="sds-linksIconBox__bodyItem">
<a href="" class="sds-linksIconBox__listItem">
<span class="sds-btn -iconBtn -btnSecondary -btnInverse -btnSmall sds-linksIconBox__listIcon " aria-hidden="true">
<span class="sds-icon sds-icon-arrownext"></span>
</span>
Qu’est-ce que le relevé d’identité bancaire (RIB), et comment l’obtenir ?
</a>
</li>
</ul>
</div>
<div class="sds-linksIconBox__footer">
<a href="" class="sds-btn -btnSecondary">
<span class="sds-btn__text">Tous les articles</span>
</a>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="sds-linksIconBox">
<div class="sds-linksIconBox__header">
<div class="sds-linksIconBox__icon sds-brandIconWrapper">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M34.4431 7.38786C33.7562 6.42917 32.5247 5.90539 31.268 6.22159L8.26798 12.0087C6.93463 12.3442 6 13.5431 6 14.918V14.9994C6.83566 14.3717 7.87439 13.9998 9 13.9998H35V9.30902L25.2631 11.9645L24.7368 10.035L34.4431 7.38786ZM4 14.918V18.9998V35.9998C4 38.7612 6.23858 40.9998 9 40.9998H37C39.7614 40.9998 42 38.7612 42 35.9998V34.9998H40V35.9998C40 37.6566 38.6569 38.9998 37 38.9998H9C7.34315 38.9998 6 37.6566 6 35.9998V18.9998C6 17.3429 7.34315 15.9998 9 15.9998H37C38.6569 15.9998 40 17.3429 40 18.9998V19.9998H42V18.9998C42 16.2384 39.7614 13.9998 37 13.9998V9.13091C37 5.87492 33.9375 3.48755 30.78 4.28204L7.77996 10.0691C5.55772 10.6283 4 12.6265 4 14.918Z" fill="#003060" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M41.5 24H36V22H41.5C44.5376 22 47 24.4624 47 27.5C47 30.5376 44.5376 33 41.5 33H36V31H41.5C43.433 31 45 29.433 45 27.5C45 25.567 43.433 24 41.5 24Z" fill="#DE0000" />
</svg>
</div>
<div class="sds-linksIconBox__headerText">
<h4 class="h4">Virements</h4>
<p class="sds-linksIconBox__description">Transactions "Eurotransfert" illimitées et sans frais</p>
</div>
</div>
<div class="sds-linksIconBox__body">
<ul class="list-unstyled">
<li class="sds-linksIconBox__bodyItem">
<a href="" class="sds-linksIconBox__listItem">
<span class="sds-btn -iconBtn -btnSecondary -btnInverse -btnSmall sds-linksIconBox__listIcon " aria-hidden="true">
<span class="sds-icon sds-icon-arrownext"></span>
</span>
Comment devenir client Spuerkeess et ouvir un compte ?
</a>
</li>
<li class="sds-linksIconBox__bodyItem">
<a href="" class="sds-linksIconBox__listItem">
<span class="sds-btn -iconBtn -btnSecondary -btnInverse -btnSmall sds-linksIconBox__listIcon " aria-hidden="true">
<span class="sds-icon sds-icon-arrownext"></span>
</span>
Qu’est-ce que le relevé d’identité bancaire (RIB), et comment l’obtenir ?
</a>
</li>
</ul>
</div>
<div class="sds-linksIconBox__footer">
<a href="" class="sds-btn -btnSecondary">
<span class="sds-btn__text">Tous les articles</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="sds-section">
<div class="sds-section__innerWrapper">
<div class="sds-section__inner">
<div class="container">
<div class="sds-stackXxl">
<h2 class="h2">Préférences, sécurité & confidentialité</h2>
<div class="row">
<div class="col-12 col-md-6">
<div class="sds-linksIconBox">
<div class="sds-linksIconBox__header">
<div class="sds-linksIconBox__icon sds-brandIconWrapper">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M34.4431 7.38786C33.7562 6.42917 32.5247 5.90539 31.268 6.22159L8.26798 12.0087C6.93463 12.3442 6 13.5431 6 14.918V14.9994C6.83566 14.3717 7.87439 13.9998 9 13.9998H35V9.30902L25.2631 11.9645L24.7368 10.035L34.4431 7.38786ZM4 14.918V18.9998V35.9998C4 38.7612 6.23858 40.9998 9 40.9998H37C39.7614 40.9998 42 38.7612 42 35.9998V34.9998H40V35.9998C40 37.6566 38.6569 38.9998 37 38.9998H9C7.34315 38.9998 6 37.6566 6 35.9998V18.9998C6 17.3429 7.34315 15.9998 9 15.9998H37C38.6569 15.9998 40 17.3429 40 18.9998V19.9998H42V18.9998C42 16.2384 39.7614 13.9998 37 13.9998V9.13091C37 5.87492 33.9375 3.48755 30.78 4.28204L7.77996 10.0691C5.55772 10.6283 4 12.6265 4 14.918Z" fill="#003060" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M41.5 24H36V22H41.5C44.5376 22 47 24.4624 47 27.5C47 30.5376 44.5376 33 41.5 33H36V31H41.5C43.433 31 45 29.433 45 27.5C45 25.567 43.433 24 41.5 24Z" fill="#DE0000" />
</svg>
</div>
<div class="sds-linksIconBox__headerText">
<h4 class="h4">Virements</h4>
<p class="sds-linksIconBox__description">Transactions "Eurotransfert" illimitées et sans frais</p>
</div>
</div>
<div class="sds-linksIconBox__body">
<ul class="list-unstyled">
<li class="sds-linksIconBox__bodyItem">
<a href="" class="sds-linksIconBox__listItem">
<span class="sds-btn -iconBtn -btnSecondary -btnInverse -btnSmall sds-linksIconBox__listIcon " aria-hidden="true">
<span class="sds-icon sds-icon-arrownext"></span>
</span>
Comment devenir client Spuerkeess et ouvir un compte ?
</a>
</li>
<li class="sds-linksIconBox__bodyItem">
<a href="" class="sds-linksIconBox__listItem">
<span class="sds-btn -iconBtn -btnSecondary -btnInverse -btnSmall sds-linksIconBox__listIcon " aria-hidden="true">
<span class="sds-icon sds-icon-arrownext"></span>
</span>
Qu’est-ce que le relevé d’identité bancaire (RIB), et comment l’obtenir ?
</a>
</li>
</ul>
</div>
<div class="sds-linksIconBox__footer">
<a href="" class="sds-btn -btnSecondary">
<span class="sds-btn__text">Tous les articles</span>
</a>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="sds-linksIconBox">
<div class="sds-linksIconBox__header">
<div class="sds-linksIconBox__icon sds-brandIconWrapper">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M34.4431 7.38786C33.7562 6.42917 32.5247 5.90539 31.268 6.22159L8.26798 12.0087C6.93463 12.3442 6 13.5431 6 14.918V14.9994C6.83566 14.3717 7.87439 13.9998 9 13.9998H35V9.30902L25.2631 11.9645L24.7368 10.035L34.4431 7.38786ZM4 14.918V18.9998V35.9998C4 38.7612 6.23858 40.9998 9 40.9998H37C39.7614 40.9998 42 38.7612 42 35.9998V34.9998H40V35.9998C40 37.6566 38.6569 38.9998 37 38.9998H9C7.34315 38.9998 6 37.6566 6 35.9998V18.9998C6 17.3429 7.34315 15.9998 9 15.9998H37C38.6569 15.9998 40 17.3429 40 18.9998V19.9998H42V18.9998C42 16.2384 39.7614 13.9998 37 13.9998V9.13091C37 5.87492 33.9375 3.48755 30.78 4.28204L7.77996 10.0691C5.55772 10.6283 4 12.6265 4 14.918Z" fill="#003060" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M41.5 24H36V22H41.5C44.5376 22 47 24.4624 47 27.5C47 30.5376 44.5376 33 41.5 33H36V31H41.5C43.433 31 45 29.433 45 27.5C45 25.567 43.433 24 41.5 24Z" fill="#DE0000" />
</svg>
</div>
<div class="sds-linksIconBox__headerText">
<h4 class="h4">Virements</h4>
<p class="sds-linksIconBox__description">Transactions "Eurotransfert" illimitées et sans frais</p>
</div>
</div>
<div class="sds-linksIconBox__body">
<ul class="list-unstyled">
<li class="sds-linksIconBox__bodyItem">
<a href="" class="sds-linksIconBox__listItem">
<span class="sds-btn -iconBtn -btnSecondary -btnInverse -btnSmall sds-linksIconBox__listIcon " aria-hidden="true">
<span class="sds-icon sds-icon-arrownext"></span>
</span>
Comment devenir client Spuerkeess et ouvir un compte ?
</a>
</li>
<li class="sds-linksIconBox__bodyItem">
<a href="" class="sds-linksIconBox__listItem">
<span class="sds-btn -iconBtn -btnSecondary -btnInverse -btnSmall sds-linksIconBox__listIcon " aria-hidden="true">
<span class="sds-icon sds-icon-arrownext"></span>
</span>
Qu’est-ce que le relevé d’identité bancaire (RIB), et comment l’obtenir ?
</a>
</li>
</ul>
</div>
<div class="sds-linksIconBox__footer">
<a href="" class="sds-btn -btnSecondary">
<span class="sds-btn__text">Tous les articles</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<div class="sds-pageLayout__mainBottom">
</div>
</main>
<footer class="sds-pageLayout__footer">
<div class="sds-footer ">
<div class="container">
<div class="row justify-content-between">
<div class="col-12 col-md-auto">
<div class="sds-footer__social sds-stackSm">
<p class="sds-textHelperSmall">Suivez-nous</p>
<ul class="sds-footer__socialIconsGroup sds-btnGroup list-unstyled">
<li>
<a href="" class="d-flex">
<span class="sds-iconCircle -secondary60 sds-footer__socialIcon" aria-hidden="true">
<span class="sds-icon sds-icon-socialfacebook"></span>
</span>
</a>
</li>
<li>
<a href="" class="d-flex">
<span class="sds-iconCircle -secondary60 sds-footer__socialIcon" aria-hidden="true">
<span class="sds-icon sds-icon-socialinstagram"></span>
</span>
</a>
</li>
<li>
<a href="" class="d-flex">
<span class="sds-iconCircle -secondary60 sds-footer__socialIcon" aria-hidden="true">
<span class="sds-icon sds-icon-sociallinkedin"></span>
</span>
</a>
</li>
<li>
<a href="" class="d-flex">
<span class="sds-iconCircle -secondary60 sds-footer__socialIcon" aria-hidden="true">
<span class="sds-icon sds-icon-socialyoutube"></span>
</span>
</a>
</li>
</ul>
<div class="sds-footer__logo sds-exceptionStackXxl">
<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>
</div>
<div class="sds-stackXxl col-12 col-md-auto">
<div class="sds-footer__links sds-stackLg sds-textHelperSmall">
<ul class="sds-stackXs list-unstyled">
<li>
<a href="">Notices légales</a>
</li>
<li>
<a href="">Réclamations</a>
</li>
<li>
<a href="">Tarification</a>
</li>
<li>
<a href="">Gérer mes cookies</a>
</li>
</ul>
<ul class="sds-stackXs list-unstyled">
<li>
<a href="">Copyright Spuerkeess</a>
</li>
<li>
<a href="">made by Apart</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</footer>
</div>
{% extends "@spk-page-layout" %}
{% block header %}
{% render "@spk-header--landing" %}
{% endblock %}
{% block breadcrumbs %}
<div class="container-fluid">
{% render "@spk-breadcrumbs" %}
</div>
{% endblock %}
{% block main %}
<section class="{{ namespace }}section">
<div class="{{ namespace }}section__innerWrapper">
<div class="{{ namespace }}section__inner">
<div class="container-fluid">
<div class="{{ namespace }}pageCover{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<div class="row align-items-center">
<div class="col-12 col-md-7 col-lg-6 d-flex">
<div class="{{ namespace }}pageCover__textContainer {{ namespace }}stackXl container-half-xl">
<div class="{{ namespace }}pageCover__text {{ namespace }}stackMd">
<h1 class="h-pageCover {{ namespace }}pageCover__title">S-Net Guide</h1>
<p class="h1 {{ namespace }}headingLight {{ namespace }}pageCover__subTitle">Bonjour, comment pouvons-nous vous aider ?</p>
</div>
<div class="{{ namespace }}exceptionStackXxl">
{% render "@btn-secondary--icon-left",{
classes: ["-btnLg","-btnBlock", "justify-content-start"],
text: "Rechercher un article",
icon: "icon-search",
attrs: {
"data-toggle": "modal",
"data-target": "#searchModal"
}
},true %}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="{{ namespace }}section">
<div class="{{ namespace }}section__innerWrapper">
<div class="{{ namespace }}section__inner">
<div class="container">
<div class="{{ namespace }}stackXxl">
<h2 class="h2">Compte & informations personnelles</h2>
<div class="row">
<div class="col-12 col-md-6">
{% render "@spk-links-icon-box" %}
</div>
<div class="col-12 col-md-6">
{% render "@spk-links-icon-box" %}
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="{{ namespace }}section">
<div class="{{ namespace }}section__innerWrapper">
<div class="{{ namespace }}section__inner">
<div class="container">
<div class="{{ namespace }}stackXxl">
<h2 class="h2">Préférences, sécurité & confidentialité</h2>
<div class="row">
<div class="col-12 col-md-6">
{% render "@spk-links-icon-box" %}
</div>
<div class="col-12 col-md-6">
{% render "@spk-links-icon-box" %}
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{% endblock %}
{% block footer %}
{% render "@footer" %}
{% endblock %}
export default class SnetGuide {
constructor() {
this.initTour()
}
initTour() {
const devices = document.querySelectorAll('.sds-snetGuide__tab');
const popperOptions = function (position) {
return {
placement: position,
modifiers: [
{
name: 'offset',
options: {
offset: [0, 32]
}
}
]
}
}
function moveIndicator(indicator) {
indicator.style.top = Math.floor(Math.random() * 100) + 1 + '%';
indicator.style.left = Math.floor(Math.random() * 100) + 1 + '%';
}
devices.forEach(function (element, index) {
const popovers = element.querySelectorAll('.sds-popover');
const indicator = element.querySelector('.sds-snetGuide__indicator');
const img = element.querySelector('.sds-snetGuide__deviceImg img');
const step1 = element.querySelector('.sds-popover[data-step="step1"]');
const popperInstance = Popper.createPopper(indicator, step1, popperOptions(step1.dataset.placement));
$('button[data-toggle="tab"]').on('shown.bs.tab', function (event) {
popperInstance.update();
})
popovers.forEach(function (popover, index) {
popover.querySelector("[data-guide-popover-next]")?.addEventListener("click", (e) => {
moveIndicator(indicator);
let target = element.querySelector("[data-step="+ e.currentTarget.dataset.guidePopoverNext +"]");
if(popover.nextElementSibling.dataset.imgSrc) {
img.src = popover.nextElementSibling.dataset.imgSrc;
}
popover.classList.remove("show");
indicator.addEventListener("transitionend", (e) => {
popover.classList.remove("show");
target.classList.add("show");
Popper.createPopper(indicator, target, popperOptions(popover.nextElementSibling.dataset.placement));
})
})
popover.querySelector("[data-guide-popover-previous]")?.addEventListener("click", (e) => {
moveIndicator(indicator);
if(popover.previousElementSibling.dataset.imgSrc) {
img.src = popover.previousElementSibling.dataset.imgSrc;
}
let target = element.querySelector("[data-step="+ e.currentTarget.dataset.guidePopoverPrevious +"]");
popover.classList.remove("show");
indicator.addEventListener("transitionend", (e) => {
popover.classList.remove("show");
target.classList.add("show");
Popper.createPopper(indicator, target, popperOptions(popover.previousElementSibling.dataset.placement));
})
})
popover.querySelector("[data-reset]")?.addEventListener("click", (e) => {
img.src = element.querySelector("[data-step='step1']").dataset.imgSrc;
});
});
});
}
}
/* variables specific to current element */
$snet-guide-device-img-max-height: 60vh;
$snet-guide-device-desktop-header-desktop-height: map-deep-get($token-sizes-unit-map, "40");
$snet-guide-device-desktop-header-mobile-height: $snet-guide-device-desktop-header-desktop-height * 0.5;
$snet-guide-device-border-width: $device-border-width-global;
.#{$namespace}snetGuide {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
overflow: hidden;
position: relative;
z-index: z("zero");
@include media-breakpoint-up(xl) {
overflow: visible;
}
/* 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 */
&__navigation {
@include spacer-component-inline("md");
margin-bottom: map-deep-get($token-spacer-stack-min-map, "3xl");
@include media-breakpoint-up(xl) {
@include spacer-component-inline("xl");
margin-bottom: 0;
}
}
// snetGuide__tab
&__tab {
// follows same logic as parent
justify-content: flex-end;
position: relative;
&.-mobile {
@include media-breakpoint-up(xl){
width: max-content;
margin: auto;
}
#{$self}__slider {
right: 100%;
}
}
}
&__tabContent {
margin-bottom: map-deep-get($token-spacer-stack-max-map, "lg");
@include media-breakpoint-up(xl){
margin-bottom: map-deep-get($token-spacer-stack-max-map, "xl");
}
}
&__tabDevice {
height: 400px;
overflow: hidden;
&.-mobile {
display: flex;
justify-content: center;
margin-left: -($grid-gutter-width*0.5);
margin-right: -($grid-gutter-width*0.5);
padding-left: $grid-gutter-width*0.5;
padding-right: $grid-gutter-width*0.5;
@include media-breakpoint-up(xl){
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
IMG {
@include media-breakpoint-up(xl) {
max-height: calc(#{$snet-guide-device-img-max-height} - (#{$snet-guide-device-border-width*2})); // multiply by to because of border top and bottom
}
}
}
&.-desktop {
display: flex;
align-items: flex-end;
width: 500px;
margin: auto;
@include media-breakpoint-up(xl) {
width: auto;
max-width: 100%;
}
IMG {
max-height: calc(#{$snet-guide-device-img-max-height} - #{$snet-guide-device-desktop-header-mobile-height} - (#{$snet-guide-device-border-width*2})); // multiply by to because of border top and bottom
@include media-breakpoint-up("md") {
max-height: calc(#{$snet-guide-device-img-max-height} - #{$snet-guide-device-desktop-header-desktop-height} - (#{$snet-guide-device-border-width*2})); // multiply by to because of border top and bottom
}
}
}
@include media-breakpoint-up(xl) {
height: calc(#{$snet-guide-device-img-max-height});
overflow: visible;
display: flex;
align-items: flex-end;
> * {
max-height: 100%;
margin-left: auto;
margin-right: auto;
}
}
}
&__tabDeviceInner {
display: flex;
justify-content: center;
max-width: 100%;
position: relative;
transition: top 0.15s ease-in-out;
}
&__device {
$device: &;
width: max-content;
&.-mobile {
max-width: 328px;
}
&.-desktop {
#{$device}Header {
border-top-left-radius: map-deep-get($token-radius-map, "16");
border-top-right-radius: map-deep-get($token-radius-map, "16");
@include custom-prop-fallback("background-color", "sys-color-background-neutral-black");
height: $snet-guide-device-desktop-header-mobile-height;
display: flex;
align-items: center;
@include spacer-component-inline("sm");
padding-left: map-deep-get($token-spacer-inset-map, "md");
@include media-breakpoint-up("md") {
height: $snet-guide-device-desktop-header-desktop-height;
border-top-left-radius: map-deep-get($token-radius-map, "24");
border-top-right-radius: map-deep-get($token-radius-map, "24");
}
+ #{$device}Img {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-top-width: 0;
}
SPAN {
width: map-deep-get($token-sizes-unit-map, "8")*0.75;
height: map-deep-get($token-sizes-unit-map, "8")*0.75;
@include custom-prop-fallback("background-color", "sys-color-background-primary-100");
border-radius: map-deep-get($token-radius-map, "circle");
@include media-breakpoint-up("md") {
width: map-deep-get($token-sizes-unit-map, "16")*0.75;
height: map-deep-get($token-sizes-unit-map, "16")*0.75;
}
}
}
#{$device}Img {
border-radius: map-deep-get($token-radius-map, "16");
@include media-breakpoint-up("md") {
border-radius: map-deep-get($token-radius-map, "24");
}
}
}
@include media-breakpoint-up(xl) {
display: inline-flex;
flex-direction: column;
}
}
&__deviceImg {
position: relative;
overflow: hidden;
border: $border-width*4 solid;
@include custom-prop-fallback("border-color", "sys-color-background-neutral-black");
border-radius: map-deep-get($token-radius-map, "32");
}
&__slider {
display: flex;
align-items: flex-start;
margin-top: -$popover-body-padding-y;
padding-left: $grid-gutter-width*0.5;
padding-right: $grid-gutter-width*0.5;
min-height: 156px;
@include media-breakpoint-up(xl) {
position: absolute;
top: 0;
bottom: 0;
margin-top: 0;
min-height: 0;
}
> * {
min-width: 0;
width: 320px;
max-width: 100%;
@include media-breakpoint-up(xl) {
position: absolute !important;
max-width: none;
}
}
}
&__popover {
display: none;
@include media-breakpoint-between(xs,lg){
transform: none !important;
position: static !important;
margin-left: auto !important;
margin-right: auto !important;
}
@include media-breakpoint-up(xl){
display: block;
visibility: hidden;
}
&.show {
display: block;
@include media-breakpoint-up(xl){
visibility: visible;
}
}
.arrow {
margin: 0;
display: none;
@include media-breakpoint-up(xl){
display: block;
}
}
}
&__indicator {
width: map-deep-get($token-sizes-unit-map, "12");
height: map-deep-get($token-sizes-unit-map, "12");
border-radius: map-deep-get($token-radius-map, "circle");
@include custom-prop-fallback("background-color", "sys-color-background-secondary-100");
position: absolute;
z-index: z("low");
transition: top 0.5s linear, left 0.5s linear;
@at-root {
@keyframes ripple {
0%{transform: translate(-50%,-50%) scale(.1);opacity: 0;}
50%{ opacity: 0.2;}
100%{transform: translate(-50%,-50%) scale(1); opacity: 0;}
}
}
&::before,
&::after {
content: "";
opacity: 0.2;
background-color: inherit;
border-radius: inherit;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: map-deep-get($token-sizes-unit-map, "48");
height: map-deep-get($token-sizes-unit-map, "48");
}
&::before {
z-index: z("medium");
animation: ripple 2s infinite 0.3s;
}
&::after {
z-index: z("high");
animation: ripple 2s infinite 0.6s;
}
}
&__indicator SPAN {
width: map-deep-get($token-sizes-unit-map, "48");
height: map-deep-get($token-sizes-unit-map, "48");
border-radius: inherit;
background-color: inherit;
opacity: 0.2;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: z("low");
animation: ripple 2s infinite;
}
/* modifiers */
// snetGuide -altStyle
&.-altStyle {
// follows same logic as base element
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}