:root {
--header-height: 4.5rem;
} .skip-link:focus {
display:none!important;
}  #site-content {
padding-top: var(--header-height);
}
body.home #site-content {
padding-top: 0;
} body.admin-bar #site-header {
top: 46px;
} #site-header.jm-header {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: var(--z-header);
background-color: var(--color-surface);
color: var(--color-text);
box-shadow: var(--shadow-sm); transition: transform var(--duration-slow) var(--ease);
} #site-header.jm-header--hidden {
transform: translateY(-100%);
}
.jm-header__inner {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: var(--space-4);
min-height: var(--header-height);
padding-inline: var(--gutter);
}
#site-header a {
color: inherit;
text-decoration: none;
} .jm-header__brand {
justify-self: center;
}
.jm-logo {
display: inline-flex;
}
.jm-logo svg {
display: block;
width: auto;
height: 1.75rem;
fill: currentColor;
} .jm-menu {
display: flex;
align-items: center;
gap: var(--space-6);
margin: 0;
padding: 0;
list-style: none;
}
.jm-menu a {
display: inline-block;
font-size: var(--fs-sm);
font-weight: var(--font-weight-medium);
letter-spacing: var(--ls-wide);
text-transform: normal;
transition: var(--transition-opacity);
}
.jm-menu a:hover {
opacity: 0.6;
} .jm-icon {
display: block;
width: 1.5rem;
height: 1.5rem;
flex-shrink: 0;
}
.jm-header__aside .jm-header-icon-link,
button.jm-header-audio {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-width: 1.75rem;
min-height: 1.75rem;
line-height: 1;
flex-shrink: 0;
}
.jm-header-icon-link__icon {
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.jm-header-icon-link__label {
display: none;
font-size: var(--fs-sm);
font-weight: var(--font-weight-medium);
letter-spacing: var(--ls-wide);
line-height: 1;
}
.jm-header-icon-link:hover {
opacity: 0.6;
}
.jm-header-cart-count {
position: absolute;
top: -0.2rem;
right: -0.45rem;
min-width: 1.125rem;
height: 1.125rem;
padding-inline: 0.25rem;
font-family: var(--font-base);
font-size: 0.625rem;
font-weight: var(--font-weight-semibold);
font-style: normal;
line-height: 1.125rem;
text-align: center;
color: var(--color-text-inverse);
background-color: var(--color-primary);
border-radius: var(--radius-full, 999px);
pointer-events: none;
} .jm-header__primary {
display: none;
}
.jm-header__aside {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0;
grid-column: 3;
justify-self: end;
}
.jm-header__aside .jm-header__woo .jm-menu {
display: none;
align-items: center;
gap: var(--space-4);
} button.jm-header-audio {
padding: 0;
border: 0;
background: none;
color: inherit;
cursor: pointer;
font: inherit;
appearance: none;
-webkit-appearance: none;
}
.jm-header-audio__icon {
display: flex;
align-items: center;
justify-content: center;
}
.jm-header-audio__icon--pause {
display: none;
}
.jm-header-audio.is-playing .jm-header-audio__icon--play {
display: none;
}
.jm-header-audio.is-playing .jm-header-audio__icon--pause {
display: flex;
}
.jm-global-audio {
display: none;
} .jm-burger {
position: relative;
justify-self: start;
width: 1.75rem;
height: 1.75rem;
padding: 0;
color: inherit;
background-color: transparent;
border: 0;
cursor: pointer;
}
.jm-burger__line {
position: absolute;
right: 15%;
left: 15%;
height: 2px;
background-color: currentColor;
transition:
top var(--duration-base) var(--ease),
transform var(--duration-base) var(--ease);
}
.jm-burger__line:nth-child(1) {
top: 40%;
}
.jm-burger__line:nth-child(2) {
top: 60%;
} .jm-burger[aria-expanded="true"] .jm-burger__line:nth-child(1) {
top: 50%;
transform: translateY(-50%) rotate(45deg);
}
.jm-burger[aria-expanded="true"] .jm-burger__line:nth-child(2) {
top: 50%;
transform: translateY(-50%) rotate(-45deg);
} .jm-header__mobile {
position: absolute;
top: 100%;
right: 0;
left: 0;
display: grid;
gap: var(--space-6);
padding: var(--space-6) var(--gutter) var(--space-8);
background-color: var(--color-surface);
color: var(--color-text);
border-top: var(--border);
box-shadow: var(--shadow-md);
visibility: hidden;
opacity: 0;
transform: translateY(-0.5rem);
pointer-events: none;
transition:
transform var(--duration-base) var(--ease),
opacity var(--duration-base) var(--ease),
visibility var(--duration-base) var(--ease);
}
#site-header.is-menu-open .jm-header__mobile {
visibility: visible;
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.jm-header__mobile .jm-menu {
flex-direction: column;
align-items: flex-start;
gap: var(--space-4);
}
.jm-header__mobile .jm-menu a {
font-size: var(--fs-base);
}
.jm-header__mobile .jm-menu a.jm-header-icon-link {
display: inline-flex;
flex-flow: row nowrap;
align-items: center;
justify-content: flex-start;
gap: var(--space-2);
width: auto;
max-width: 100%;
white-space: nowrap;
}
.jm-header__mobile .jm-menu .jm-header-icon-link__icon {
flex-shrink: 0;
}
.jm-header__mobile .jm-header-icon-link__label {
display: inline;
white-space: nowrap;
}
.jm-header__mobile .jm-header-cart-link::after {
content: "Panier";
display: inline;
white-space: nowrap;
order: 2;
font-size: inherit;
font-weight: inherit;
letter-spacing: inherit;
line-height: inherit;
}
.jm-header__mobile .jm-header-cart-link .jm-header-icon-link__label {
display: none;
}
.jm-header__mobile .jm-header-cart-count {
position: static;
order: 3;
margin-left: var(--space-1);
}  @media (min-width: 782px) {
body.admin-bar #site-header {
top: 32px;
} .jm-header__inner {
grid-template-columns: repeat(3, 1fr);
}
.jm-burger,
.jm-header__mobile {
display: none;
}
.jm-header__primary {
display: flex;
justify-content: flex-start;
}
.jm-header__aside {
grid-column: auto;
justify-self: end;
gap: 2rem;
}
.jm-header__aside .jm-header__woo {
display: flex;
align-items: center;
justify-content: flex-end;
}
.jm-header__aside .jm-header__woo .jm-menu {
display: flex;
align-items: center;
gap: 2rem;
} .jm-header__primary .jm-menu {
gap: 0;
}
.jm-header__aside .jm-header__woo .jm-menu > li {
margin: 0;
display: flex;
align-items: center;
}
.jm-header__primary .jm-menu > li {
margin: 0.5rem 2rem 0 0;
}
.jm-header__primary .jm-menu > li:last-child {
margin-right: 0;
} body.home #site-header.jm-header:not(.jm-header--pinned):not(:hover):not(.is-menu-open) {
background-color: transparent;
color: #fff;
box-shadow: none;
pointer-events: none;
}
body.home #site-header.jm-header:not(.jm-header--pinned):not(:hover):not(.is-menu-open) .jm-header__inner,
body.home #site-header.jm-header:not(.jm-header--pinned):not(:hover):not(.is-menu-open) .jm-header__mobile {
pointer-events: auto;
} body.home #site-header.jm-header--pinned {
background-color: var(--color-surface);
color: var(--color-text);
box-shadow: var(--shadow-sm);
} body.home #site-header.jm-header:hover {
background-color: var(--color-surface);
color: var(--color-text);
box-shadow: var(--shadow-sm);
}
}