:root{
	--arrondi-modale:16px;
	--surface-fond-modale :rgba(0,0,0,0.5);
}/*overlay*/
.popin-overlay{
	position: fixed; 
    width: 100%;
    height: 100vh;
    top: 0; 
    left: 0;
    background-color: var(--surface-fond-modale);
	z-index: 277;
}
/*popin*/
[data-popin]{
	cursor: pointer;
}
[class*='is-popin']{
	background: white;
	position: fixed;
	z-index: 278;
}
.is-popin{
	display: none;
	width : 90vw;
	overflow-y: auto;
	max-height: 90vh;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	border-radius: var(--arrondi-modale);
}
.desktop .is-popin{
	width: 100%;
	max-width: 630px;
}	
[class*='is-popin--']{
	visibility: hidden;
	height: calc(var(--vh,1vh) * 100);
    overflow: auto;
	width: 100vw;
	top:0;
	right: -100vw;
	transition: 0.3s;
}
html:not(.mobile) .is-popin--side{
	width: 550px;
}
.is-popin.is-active{
	display: block;
}
.is-over9000{
	z-index: 9000;
}
.is-popin--full.is-active{
	right: 0;
	visibility: visible;
}
.is-popin--side.is-active{
	right:0;
	visibility: visible;
}
[class*='is-popin--'][data-order].is-active{
	right: 100vw;
}
/*popin header	*/
.is-popin .popin--header{
	border-radius:var(--arrondi-modale) var(--arrondi-modale) 0 0;
}
.popin--header{
	width: 100%;
	align-items: center;
	background: #fff;
    border-bottom: 	1px solid var(--line-light);
    color: var(--text-black);
	display: flex;
	font-weight: bold;
	height: 50px;
	position: sticky;
    text-align: center;
    top: 0;
	left: 0;
    z-index: 99;
    font-size: 1.6rem;
}
.popin--header-borderless{
	border-bottom: 	none;
}
.popin--header:not([data-header--custom]){
	justify-content: center;
}
.desktop .is-popin--side .popin--header{
	border: none;
	justify-content: flex-start;
    padding: 0 3.2rem;
}
[data-popin-close]{
	cursor: pointer
}
[class*='popin-close']{
	position: absolute;
	height: 40px;
	width: 40px;
	right: 0;
	background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE3Ljg3NjcgNi4xMTkyNkw2LjExNTIzIDE3Ljg4MDciIHN0cm9rZT0iIzFDMUMxRSIgc3Ryb2tlLXdpZHRoPSIxLjUwMjM3IiBzdHJva2UtbWl0ZXJsaW1pdD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTE3Ljg4MTIgMTcuODc5OEw2LjExOTgyIDYuMTE4NDEiIHN0cm9rZT0iIzFDMUMxRSIgc3Ryb2tlLXdpZHRoPSIxLjUwMjM3IiBzdHJva2UtbWl0ZXJsaW1pdD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==');
	background-size: 28px;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 1;
	border: none;
}
.popin-close--right{
	left: unset;
	right: 0;
}
.popin-close--white{
	filter: brightness(0) invert(1);
}
.popin--header .popin-close{
	top: 50%;
	transform: translateY(-50%);
}
.is-popin .popin--content{
	overflow: hidden auto;
	max-height: 80vh;
}
.is-popin--full .popin--content{
	height: 100%;
}
html:not(.mobile) .is-popin--side .popin--content{
	padding:3.2rem;
	text-align: left;
}
html:not(.mobile) .is-popin--side .popin--title{
	font-size: 2rem;
	font-weight: bold;
}
.popin--title{
	@media (max-width:420px){
		flex: 0 0 calc(100% - 70px)
	}
}