section.nuancier{width:100vw;padding:0 var(--paddingside);text-align:center;margin-bottom:calc(var(--marginbottom) + var(--marginbottom));margin-top:calc(40px - var(--marginbottom) - var(--marginbottom));display:grid;grid-template-columns:repeat(12,1fr);grid-column-gap:var(--columngap)}section.nuancier .nuancier__nav{grid-column:2/-2;grid-row:1;display:flex;column-gap:18px;justify-content:center;align-items:center}section.nuancier .nuancier__nav .nuancier__nav__item{cursor:pointer}section.nuancier .nuancier__nav .nuancier__nav__item .exp{font-size:8px;font-style:normal;font-weight:400;line-height:9px;letter-spacing:.4px;position:relative;top:-5px;text-transform:uppercase}section.nuancier .nuancier__nav .nuancier__nav__item .title{display:inline-block;text-transform:uppercase}section.nuancier .nuancier__sticky{grid-column:-2/-1;grid-row:span 2;display:block;position:sticky;top:calc(50vh - 150px);background-color:#ff7e00;padding:10px 10px 0;width:100%;max-height:300px}section.nuancier .nuancier__sticky .img,section.nuancier .nuancier__sticky .text{display:block;width:100%}section.nuancier .nuancier__sticky .img{aspect-ratio:1;background-repeat:no-repeat;background-position:center;background-size:cover;border:5px solid white}section.nuancier .nuancier__sticky .text{text-align:center;max-height:200px;margin:10px 0;transform:rotate(180deg);transform-origin:center;display:flex;justify-content:center;align-items:center}section.nuancier .nuancier__sticky .text p{writing-mode:vertical-rl;font-style:normal;font-weight:700;font-size:18px;line-height:23px;text-transform:uppercase}section.nuancier .nuancier__groupes{grid-column:2/-2!important;width:100%!important;padding:0!important;display:grid;grid-template-columns:repeat(10,1fr);grid-column-gap:var(--columngap)}section.nuancier .nuancier__groupes .groupe-container{grid-row:2;grid-column:1/-1}section.nuancier .nuancier__groupes .couleur{cursor:pointer}section.nuancier div.nuancier__groupes:last-of-type{margin-bottom:0!important}section.nuancier .modal__couleur{width:100vw;height:100vh;position:fixed;top:0;left:0;z-index:22222;background-color:#dfc9ba;overflow:hidden}section.nuancier .modal__couleur .modal__couleur--container{display:flex;justify-content:center;align-items:center;width:100%;height:100%}section.nuancier .modal__couleur .bg{position:absolute;width:100%;height:100%;background-position:center;background-repeat:no-repeat;background-size:cover}section.nuancier .modal__couleur .closeModal{width:55px;height:55px;background-color:#00000080;cursor:pointer;display:flex;justify-content:center;align-items:center}section.nuancier .modal__couleur .closeModal svg{width:18px;height:18px}section.nuancier .modal__couleur .modal__couleur__nom{position:absolute;bottom:45px;right:45px;text-transform:uppercase;color:#fff}section.nuancier .modal__couleur.is-active{transform:none;transition-property:transform;transition-timing-function:cubic-bezier(.94,.22,.42,.83);transition-duration:.9s}section.nuancier .modal__couleur.is-active .modal__couleur--container{transform:none;transition-property:transform;transition-timing-function:cubic-bezier(.94,.22,.42,.83);transition-duration:.9s}section.nuancier .modal__couleur.is-reset{transform:translateY(100%)}section.nuancier .modal__couleur.is-reset .modal__couleur--container{transform:translateY(-100%)}@media screen and (max-width: 1025px){section.nuancier{width:100vw;padding:0 10px;text-align:center;margin-bottom:calc(var(--marginbottom) + var(--marginbottom));margin-top:calc(40px - var(--marginbottom) - var(--marginbottom));display:grid;grid-template-columns:repeat(12,1fr);grid-column-gap:10px}section.nuancier .nuancier__nav{grid-column:1/-1;grid-row:1;display:flex;column-gap:18px;justify-content:center;align-items:center}section.nuancier .nuancier__sticky{display:none}section.nuancier .nuancier__groupes{grid-column:1/-1!important;width:100%!important;padding:0!important;display:grid;grid-template-columns:repeat(10,1fr);grid-column-gap:10px}section.nuancier .nuancier__groupes .groupe-container{grid-row:2;grid-column:1/-1}section.nuancier .nuancier__groupes .couleur{cursor:pointer}section.nuancier div.nuancier__groupes:last-of-type{margin-bottom:0!important}}
/*# sourceMappingURL=/cdn/shop/t/8/assets/section-nuancier.css.map */