.xin-site-header {
position: relative;
z-index: 50;
}
.xin-header__logo {
display: block;
width: max-content;
max-width: 100%;
margin-inline: auto;
}
.xin-header__logo img,
.xin-logo {
display: block;
max-width: 100%;
height: auto;
margin-inline: auto;
}
.xin-logo--text {
color: var(--xin-noir);
font-size: 36px;
}
.xin-navbar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
}
.xin-navbar__head {
display: flex;
justify-content: flex-end;
} .xin-menu-toggle {
display: flex;
flex-direction: column;
gap: 4px;
margin: 8px 0;
padding: 9px 10px;
border: 1px solid #dddddd;
border-radius: var(--xin-radius-s);
background: transparent;
cursor: pointer;
}
.xin-menu-toggle:hover,
.xin-menu-toggle:focus,
.xin-menu-toggle[aria-expanded="true"] {
background-color: #dddddd;
}
.xin-menu-toggle__bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
background: #888888;
} .xin-header__nav {
display: none;
}
.xin-mega {
margin: 0;
padding: 0;
list-style: none;
}
.xin-mega__link,
.xin-panel__link {
display: block;
color: var(--xin-gris);
line-height: 20px;
text-transform: uppercase;
}
.xin-mega__item.is-active > .xin-mega__link,
.xin-mega__link:hover,
.xin-mega__link:focus,
.xin-panel__list a[aria-current],
.xin-panel__list .is-active > a,
.xin-panel__link:hover {
background: transparent;
color: var(--xin-rose);
} .xin-menu-mobile {
margin-inline: calc(-1 * var(--xin-gutter));
padding-inline: var(--xin-gutter);
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.1);
}
.xin-panels,
.xin-panel {
position: static;
}
.xin-panel__list {
margin: 7.5px calc(-1 * var(--xin-gutter));
padding: 0;
list-style: none;
}
.xin-panel__list a,
.xin-panel__link {
display: block;
padding: 10px 15px;
color: var(--xin-gris);
line-height: 20px;
text-transform: uppercase;
}
.xin-panel__link {
width: 100%;
border: 0;
background: none;
font: inherit;
text-align: left;
cursor: pointer;
}
.xin-panel__back {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 10px 0;
border: 0;
background: none;
color: var(--xin-noir);
font: inherit;
cursor: pointer;
}
@media (min-width: 768px) {
.xin-navbar__head,
.xin-menu-mobile {
display: none !important;
}
.xin-header__nav {
display: block;
text-align: center;
}
.xin-mega {
display: inline-block;
}
.xin-mega__item {
position: relative;
float: left;
}
.xin-mega__link {
padding: 10px 40px;
}
.xin-mega::after {
content: "";
display: table;
clear: both;
} .xin-mega__panel {
position: absolute;
top: 100%;
left: 50%;
z-index: 60;
min-width: 220px;
padding: 10px 0;
background: #ffffff;
box-shadow: 0 6px 12px rgb(0 0 0 / 0.175);
text-align: left;
transform: translateX(-50%);
}
.xin-mega__panel ul {
margin: 0;
padding: 0;
list-style: none;
}
.xin-mega__panel a {
display: block;
padding: 5px 20px;
color: var(--xin-gris);
}
.xin-mega__panel a:hover {
color: var(--xin-rose);
}
.xin-mega__item > button.xin-mega__link {
border: 0;
background: none;
font: inherit;
text-transform: uppercase;
cursor: pointer;
}
.xin-mega__item > button .xin-icon {
display: none;
}
} .xin-site-footer {
margin-top: 50px;
}
.xin-footer {
text-align: center;
}
.xin-footer__reseaux a {
margin: 0 10px;
color: var(--xin-gris);
}
.xin-footer__reseaux a:hover {
color: var(--xin-rose);
}
.xin-footer__reseaux .xin-icon {
width: auto;
height: 14px;
vertical-align: -1px;
}
.xin-footer__coordonnees {
text-transform: uppercase;
}
.xin-footer__coordonnees span {
margin: 0 5px;
}
.xin-footer__coordonnees a {
color: inherit;
}
.xin-footer__coordonnees a:hover {
color: var(--xin-rose);
}
.xin-footer__mentions {
margin-bottom: 20px;
}
.xin-footer__logo .xin-logo {
width: auto;
max-height: 60px;
}
.xin-footer__slogan {
color: var(--xin-rose);
text-transform: uppercase;
}