.liste-modeles{
width: 100%;
padding: 0;
}
.liste-modeles__inner{
width: 100%;
} .liste-modeles__section{
padding: 0;
margin: 0 0 60px 0;
}
.liste-modeles__section-head{
margin-bottom: 18px; }
.liste-modeles__section-badge{
width: 100px;
height: 50px;
border-radius: 999px;
overflow: hidden;
margin-bottom: 14px;
}
.liste-modeles__section-badge-img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
} .liste-modeles__section-title{
margin: 0 0 10px 0;
font-size: var(--font-size-xxl);
font-weight: 400;
line-height: 1.05;
color: var(--color-noir);
} .liste-modeles__section-desc{
margin: 0;
font-size: var(--font-size-m);
font-weight: 400;
line-height: 1.6;
color: var(--color-noir);
max-width: 850px;
} .liste-modeles__sub-title{
margin: 26px 0 10px 0;
font-size: var(--font-size-xl);
font-weight: 500;
line-height: 1.2;
color: var(--color-noir);
} .liste-modeles__accordions{
display: flex;
flex-direction: column;
gap: 5px;
} .liste-modeles__acc{
border: 0;
margin: 0;
padding: 0;
} .liste-modeles__acc > summary{
list-style: none;
}
.liste-modeles__acc > summary::-webkit-details-marker{
display: none;
} .liste-modeles__acc-summary{
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
user-select: none;
padding: 14px 16px;
background: var(--color-blanc);
color: #000;
border-radius: 0;
transition: background-color .22s ease, color .22s ease;
} .liste-modeles__acc-arrow{
display: inline-block;
transform: rotate(0deg);
transform-origin: center;
transition: transform .28s ease;
color: var(--page-accent);
line-height: 1;
} .liste-modeles__acc:not(.is-disabled)[open] .liste-modeles__acc-arrow{
transform: rotate(180deg);
} .liste-modeles__acc-title{
font-size: var(--font-size-s);
font-weight: 500;
line-height: 1.2;
} .liste-modeles__acc.is-disabled .liste-modeles__acc-summary{
cursor: default;
}
.liste-modeles__acc.is-disabled .liste-modeles__acc-arrow{
display: none;
} .liste-modeles__acc:not(.is-disabled) .liste-modeles__acc-summary:hover,
.liste-modeles__acc:not(.is-disabled)[open] .liste-modeles__acc-summary{
background: var(--page-accent);
color: #fff;
}
.liste-modeles__acc:not(.is-disabled) .liste-modeles__acc-summary:hover .liste-modeles__acc-arrow,
.liste-modeles__acc:not(.is-disabled)[open] .liste-modeles__acc-arrow{
color: #fff;
} .liste-modeles__acc-panel{
border-left: 1px solid var(--page-accent);
padding-left: 0;
margin-left: 0;
} .liste-modeles__acc-panel.is-animating{
overflow: hidden;
} .liste-modeles__acc-panel-inner{
opacity: 0;
transform: translateY(-2px);
transition: opacity .22s ease, transform .22s ease;
}
.liste-modeles__acc[open] .liste-modeles__acc-panel-inner{
opacity: 1;
transform: translateY(0);
}
.liste-modeles__acc-grid{
display: grid;
grid-template-columns: 1fr 320px;
gap: 24px;
padding: 18px 0 6px 16px;
}
.liste-modeles__acc-grid.is-full{
grid-template-columns: 1fr;
} .liste-modeles__acc-text{
font-size: var(--font-size-s);
font-weight: 400;
line-height: 1.7;
color: var(--color-noir);
}
.liste-modeles__acc-text p{
margin: 0 0 12px 0;
}
.liste-modeles__acc-text p:last-child{
margin-bottom: 0;
} .liste-modeles__links{
margin: 14px 0 0 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 8px;
}
.liste-modeles__link{
display: inline-flex;
align-items: baseline;
gap: 8px;
text-decoration: none;
font-size: var(--font-size-s);
font-weight: 500;
color: var(--color-noir);
transition: color .22s ease;
}
.liste-modeles__link-arrow{
color: var(--page-accent);
transition: transform .22s ease, opacity .22s ease, color .22s ease;
opacity: .95;
}
.liste-modeles__link:hover{
color: var(--page-accent);
}
.liste-modeles__link:hover .liste-modeles__link-arrow{
transform: translateX(2px);
opacity: 1;
} .liste-modeles__btnwrap{
margin-top: 14px;
} .liste-modeles__acc-media{
display: flex;
justify-content: flex-end;
} .liste-modeles__acc-img{
width: 300px;
height: 300px;
display: block;
border-radius: 50%;
object-fit: cover;
}
html{
scroll-behavior: smooth;
} .liste-modeles__section-title,
.liste-modeles__sub-title,
.liste-modeles__acc{
scroll-margin-top: 10px;
} @media (max-width: 900px){
.liste-modeles__acc-grid{
grid-template-columns: 1fr;
padding-left: 14px;
}
.liste-modeles__acc-img{
width: 260px;
height: 260px;
}
.liste-modeles__section-badge{
width: 50px;
height: 30px;
flex: 0 0 50px;
}
.liste-modeles__section-badge-img{
width: 100%;
height: 100%;
object-fit: cover;
}
.liste-modeles__section-headtop{
display:flex;
gap:20px;
}
}