.header-modeles{
width: 100%;
border-right: 20px solid #fff;
background: var(--color-blanc);
padding:40px 0 0 0;
}
.header-modeles__inner{
width: 100%;
background: var(--color-blanc);
}
.header-modeles__container{
max-width: var(--layout-wide-size);
margin: 0 auto;
padding: 0 30px;
} .header-modeles__top{
display: flex;
flex-direction: column;
gap: 6px;
}
.header-modeles__title{
margin: 0;
text-transform: uppercase;
font-size: var(--font-size-xxl);
font-weight: 500;
line-height: 1;
letter-spacing: -0.02em;
color: var(--page-accent);
}
.header-modeles__title img{
height:30px;
}
.header-modeles__back{
width: fit-content;
display: inline-flex;
align-items: baseline;
gap: 6px;
text-decoration: none;
color: var(--color-noir);
font-weight: 500;
font-size: var(--font-size-xs, 12px);
transition: color .22s ease;
}
.header-modeles__back-arrow{
color: var(--page-accent);
font-weight: 500;
line-height: 1;
}
.header-modeles__back:hover{
color: var(--page-accent);
} .header-modeles__bottom{
margin-top: 25px;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 18px;
} .header-modeles__tabs{
display: inline-flex;
align-items: flex-end;
gap: 0; max-width: 100%;
overflow-x: auto;
overflow-y: visible;
-webkit-overflow-scrolling: touch;
scrollbar-width: none; }
.header-modeles__tabs::-webkit-scrollbar{
display: none; } .header-modeles__tab{
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
white-space: nowrap; padding: 10px 12px 9px 18px;
text-decoration: none;
text-transform: uppercase;
letter-spacing: .02em;
font-size: 11px;
font-weight: 600;
line-height: 1;
color: var(--color-noir);
background: var(--color-blanc-fonce);
border-bottom: 0; z-index: 1;
transition:
color .22s ease,
background-color .22s ease,
border-color .22s ease;
} .header-modeles__tab::after{
content: "";
position: absolute;
top: 0px;
right: 0px;
width: 22px;
height: 100%;
background: inherit;
transform: skewX(35deg);
transform-origin: right top;
pointer-events: none;
} .header-modeles__tab + .header-modeles__tab{
margin-left: 0px;
} .header-modeles__tab.is-active{
background: #fff;
z-index: 3;
} .header-modeles__tab:nth-child(2){
padding-left: 30px;
}
.header-modeles__tab:first-child{
z-index: 3;
}
.header-modeles__tab + .header-modeles__tab{
z-index: 2;
} .header-modeles__tab:hover{
color: var(--page-accent);
} .header-modeles__breadcrumb{
min-width: 0;
display: flex;
align-items: flex-end;
justify-content: flex-end;
padding-bottom: 8px; }
.header-modeles__breadcrumb .breadcrumb{
font-size: 11px;
font-weight: 400;
color: var(--color-noir);
white-space: nowrap;
} .header-modeles__breadcrumb .breadcrumb .breadcrumb_last,
.header-modeles__breadcrumb .breadcrumb span.breadcrumb_last{
color: var(--page-accent);
} @keyframes headerModelesReveal {
from {
opacity: 0;
transform: translateY(16px);
}
to {
opacity: 1;
transform: translateY(0);
}
} .header-modeles__title,
.header-modeles__back,
.header-modeles__tab,
.header-modeles__breadcrumb {
opacity: 0;
transform: translateY(16px);
} .header-modeles__title {
animation: headerModelesReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
animation-delay: 0.08s;
}
.header-modeles__back {
animation: headerModelesReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
animation-delay: 0.18s;
} .header-modeles__tab:nth-child(1) {
animation: headerModelesReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
animation-delay: 0.28s;
}
.header-modeles__tab:nth-child(2) {
animation: headerModelesReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
animation-delay: 0.36s;
} .header-modeles__breadcrumb {
animation: headerModelesReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
animation-delay: 0.44s;
} @media (prefers-reduced-motion: reduce) {
.header-modeles__title,
.header-modeles__back,
.header-modeles__tab,
.header-modeles__breadcrumb {
opacity: 1;
transform: none;
animation: none;
}
} @media (max-width: 860px){
.header-modeles{
border-right: 15px solid #fff;
}
.header-modeles__container{
padding: 18px 20px 0 20px;
}
.header-modeles__bottom{
flex-direction: column-reverse;
align-items: flex-start;
gap: 10px;
}
.header-modeles__breadcrumb{
padding-bottom: 10px;
width: 100%;
justify-content: flex-start;
white-space: normal;
} .header-modeles__tab{
padding: 10px 12px 9px 16px; }
.header-modeles__tab:nth-child(2){
padding-left: 26px; }
}.menu-modeles{
width: 100%;
position: relative; padding: 0; box-sizing: border-box;
} .menu-modeles__inner{
width: 100%;
box-sizing: border-box;
padding: 22px;   } .menu-modeles__head{
margin-bottom: 14px;
}
.menu-modeles__title{
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 6px;
font-size: var(--font-size-m);
font-weight: 500;
line-height: 1.15;
color: var(--color-noir);
}
.menu-modeles__title-em{
font-style: italic;
font-weight: 500;
} .menu-modeles__body{
display: flex;
flex-direction: column;
gap: 20px;
margin-top: 10px;
} .menu-modeles__groups{
display: flex;
flex-direction: column;
gap: 12px;
}
.menu-modeles__group{
padding: 0;
margin: 10px 0 0;
border: 0;
} .menu-modeles__group > summary{
list-style: none;
}
.menu-modeles__group > summary::-webkit-details-marker{
display: none;
}
.menu-modeles__group-summary{
display: inline-flex;
align-items: baseline;
gap: 10px;
cursor: pointer;
user-select: none;
font-size: var(--font-size-s);
font-weight: 500;
color: var(--color-noir);
transition: color .22s ease;
} .menu-modeles__group-arrow{
display: inline-block;
color: var(--page-accent);
font-weight: 500;
line-height: 1;
transform: rotate(180deg);
transform-origin: center;
transition: transform .28s ease;
}
.menu-modeles__group[open] .menu-modeles__group-arrow{
transform: rotate(0deg);
} .menu-modeles__group:hover .menu-modeles__group-summary{
color: var(--page-accent);
} .menu-modeles__group-panel{
padding: 5px 0 0 25px; } .menu-modeles__group-panel.is-animating{
overflow: hidden;
} .menu-modeles__group-panel-inner{
opacity: 0;
transform: translateY(-2px);
transition: opacity .22s ease, transform .22s ease;
}
.menu-modeles__group[open] .menu-modeles__group-panel-inner{
opacity: 1;
transform: translateY(0);
} .menu-modeles__items{
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 9px;
}
.menu-modeles__item{
margin: 0;
padding: 0;
} .menu-modeles__link{
display: inline;
text-decoration: none;
font-size: var(--font-size-s);
font-weight: 400;
color: var(--color-noir);
transition: color .22s ease;
} .menu-modeles__link-label{
display: inline;
} .menu-modeles__link-label::after{
content: "→";
display: inline-block;
margin-left: 8px;
color: var(--page-accent);
opacity: .9;
transition: transform .22s ease, opacity .22s ease;
} .menu-modeles__link-arrow{
display: none;
}
.menu-modeles__link:hover{
color: var(--page-accent);
}
.menu-modeles__link:hover .menu-modeles__link-label::after{
transform: translateX(2px);
opacity: 1;
} .menu-modeles__footer{
padding-top: 10px;
}
.menu-modeles__plateformes{
display: inline-block;
text-decoration: none;
font-size: var(--font-size-s);
font-weight: 500;
color: var(--color-noir);
transition: color .22s ease;
}
.menu-modeles__plateformes:hover{
color: var(--page-accent);
} .menu-modeles__inner.is-fixed{
position: fixed;
top: 0;
left: var(--menu-modeles-fixed-left, 0px);
width: var(--menu-modeles-fixed-width, auto);
z-index: 20;
}
.menu-modeles__inner.is-stopped{
position: absolute;
top: var(--menu-modeles-stop-top, 0px);
left: 0;
right: 0;
} @media (min-width: 782px){
.menu-modeles__inner.is-fixed{
max-height: calc(100vh - 24px);
overflow: auto;
}
}