No notes defined.
<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>
<header class="{{ namespace }}header{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<div class="{{ namespace }}header__nav">
{% render "@spk-nav--landing",{
navLabel: navLabel,
ctaText: ctaText,
hasStickyFooterContent: hasStickyFooterContent
},true %}
</div>
</header>
/* variables specific to current element */
$element-specific-variables: "";
.#{$namespace}header {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
position: sticky;
z-index: z("fixed");
top: 0;
transition: transform 0.15s linear;
/* 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 */
&__nav {
position: relative;
z-index: z("low");
}
// header__subNav
&__subNav {
// follows same logic as parent
@include custom-prop-fallback("background-color","sys-color-elevation-surface-flat");
min-height: $nav-sub-nav-height-mobile-global;
display: flex;
align-items: center;
@include containerPaddingInline();
//@supports (backdrop-filter: blur(1px)) and (mask-image: inherit) {
//
// @include custom-prop-fallback("background-color","comp-subheader-background-color");
// backdrop-filter: blur(map-deep-get($design-tokens,"comp-subheader-blur") * 1px);
//
//}
@include media-breakpoint-up(lg){
min-height: $nav-sub-nav-height-desktop-global;
}
}
&__subNavContainer {
@include contentSectionDimensions();
width: 100%;
@media (orientation: landscape) {
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-left);
}
}
//@supports (backdrop-filter: blur(1px)) and (mask-image: inherit) {
//
// [data-#{$namespace}gradient-overflow-h] {
//
// --color-stop-inline-start: 0%;
// --color-stop-inline-center: 90%;
// --color-stop-inline-end: 100%;
//
//
// &.-hasShadowLeft,
// &.-hasShadowRight {
// mask-image: linear-gradient(to right, rgba(255,255,255,0) var(--color-stop-inline-start), rgba(255,255,255,1) var(--color-stop-inline-center), rgba(255,255,255,0) var(--color-stop-inline-end));
// }
//
// &:not(.-hasShadowLeft) {
// --color-stop-inline-start: -1000%;
// }
//
// &:not(.-hasShadowRight) {
// --color-stop-inline-end: 150%;
// }
//
// &::before,
// &::after {
//
// content: none;
//
// }
//
// }
//
//}
&__stepper {
@include media-breakpoint-up(lg) {
display: none;
}
}
/* modifiers */
// header -headroomUnpinned
&.-headroomUnpinned {
// follows same logic as base element
transform: translateY(-#{map-deep-get($token-sizes-component-map, "topbar-height-mobile")});
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}