@media (max-width: 767px){
	#page{
		padding-bottom: 4rem;
	}
	main:has(.toolbar__container){
		padding-top: 0;
	}
	#content{
		order: 1;
	}
	header{
		position: fixed;
		order: 2;
		background: #fff;
		top: initial;
		bottom: 0;
		width: 100%;
		transition: transform 0.2s;
	}

	header nav{
		--padding: 0.7rem;
		background: none;
		box-shadow: 0 5px 10px #0000004a;
		min-height: 57px;
	}
	header nav .tab{
		color: var(--tab-color);
	}
	header nav .tab span{
		font-size: 0.6rem;
		font-weight: 300;
		text-align: center;
	}
	header nav .tab.my-account{
		font-size: 1.4rem;
	}
	header nav .tab.search span,
	header nav .tab.my-account span{
		display: none;
	}
	header nav .tab:hover,
	header nav .active .tab{
		background: none;
		color: var(--secondary);		
	}
	header nav .tabs__container,
	header nav .tabs__container > li:not(:last-child){
		flex: 1;
	}
	header nav .tabs__container .tab{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-inline: .8rem;
		flex: 1;
	}

	header nav .tabs__container .tab{
	}
	nav .tab svg{
		font-size: 1.2rem;
	}

	nav.toolbar__container{
		--_padding-right: 2rem;
		background: #fff;
		padding-bottom: 0;
		height: 40px;
		display: flex;
		align-items: center;
		position: relative;
	}
	nav.toolbar__container:not(.open){
		box-shadow: 0 0 0 100vmax #fff;
		clip-path: inset(0 -100vmax);		
	}
	nav.toolbar__container .tabs__container{
		--_gap: 0.8rem;
		height: 27px;
		gap: 10px;
		width: 100%;
		align-items: center;
	}
	nav.toolbar__container .tabs__container li{
		flex: 1;
		height: 27px;
		flex-basis: calc( (100% / 3) - (2 * var(--_gap)));
	}
	nav.toolbar__container .tabs__container a{
		font-size: 0.8rem;
		font-weight: 600;
		display: block;
		width: 100%;
		text-align: center;
	}
	nav.toolbar__container .tabs__container :where(a:hover){
		color: #939393;
	}

	.toolbar__container.open{
		--_top: 40px;
		--_bottom: 58px;
		height: initial;
		position: absolute;
		top: var(--_top);
		right: -20px;
		width: 250px;
		padding: 1rem 2rem;
		height: calc(100vh - ( var(--_top) + var(--_bottom) ));
		align-items: flex-start;
		border-left: 1px solid #efefef
	}
	.toolbar__container.open .tabs__container{
		flex-direction: column;
		align-items: flex-start;
		height: initial;
		padding-block: 0.5rem;
	}
	nav.toolbar__container.open .tabs__container a{
		font-size: 0.9rem;
	}

	header .nav__container a.logout{
		display: none;
	}

	div.toolbar__trigger{
		position: absolute;
		top: 10px;
		right: -12px;
		padding: 0 1rem;
		font-size: 1rem;
	}
	.toolbar__container.open .toolbar__trigger{
		color: var(--secondary);
		right: 8px;
	}
	nav.toolbar__container:not(.open) ul:has(li:nth-child(4)){
	  	padding-right: var(--_padding-right);
	}
	nav.toolbar__container ul:has(li:nth-child(4)) + div.toolbar__trigger {
	  display: block;
	}

	/* RESPONSIVE TOP / BOTTOM HEADER */
	.header-top__wrapper{
		padding-top: 57px;
		transition: transform 0.2s;
		margin-bottom: 1rem;
		z-index: 9;
	}
	.header-top__wrapper.main{
		position: sticky;
		top: 0;
		padding: 0;
	}
	.header-top__wrapper.main:not(:has(>.toolbar__container.open)){
/*		box-shadow: 0 0 0 100vmax #fff;*/
/*		clip-path: inset(0 -100vmax);*/
	}

	.logo-wrapper{
		display: grid;
		place-items: center;
		width: 100%;
		padding-block: 5px;
		background: var(--secondary);
		box-shadow: 0 0 0 100vmax var(--secondary);
		clip-path: inset(0 -100vmax);
	}
	.logo-wrapper svg{
		height: 30px;
	}
	div:not(.main) > h1 svg,
	div:not(.main) > .logo-wrapper{
		display: none;
	}

	.page-title{
		position: fixed;
		top: 0;
		left: 0;
		z-index: 2;
		width: 100%;
		display: flex;
		gap: 1rem;
		align-items: center;
		padding: 1rem;
		border-bottom: 1px solid #efefef;
		background: #fff;

	}
	.main .page-title{
		display: none;
		position: initial;
		padding-block: 0.3rem;
		text-align: center;
	}
	.page-title h1{
		overflow: hidden;
		white-space: nowrap;
	}
	.page-title img{
		display: none;
	}

	.page-title a.page-back{
		display: block;
		font-size: 1rem;
		color: currentColor;
		translate: 0 2px;
	}

	.header-top__wrapper.main.move-up{
		transform: translate(0, -120px);
	}
	.header-top__wrapper.main.main.move-up{
		transform: translate(0, -90px);
	}
	.header-top__wrapper.main.move-down{
		transform: translate(0, 0);
	}
	header.move-up{
		transform: translate(0, 0);
	}
	header.move-down{
		transform: translate(0, 60px);
	}




	#page .user-account__summary{
		flex-direction: column;
		align-items: flex-start;
	}
	.user-account__summary img{
		margin: 0 auto;
	}
	#page .user-account__editable{
		flex-direction: column;
		gap: 0;
	}

	h1{
		font-size: 1rem;
	}

	dl dt{
		margin-block-start: 0.5rem;
	}
	dl .hidden{
		display: none;
	}

	span.slash-separator::before{
		content: '';
		display: block;
	}

	.card .participants{
		display: grid;
		grid-template-columns: 1fr;
	}
	.card dd.opponents .pull-right{
		position: static;
		translate: initial;
	}

	select{
		width: 100%;
	}

	.modal-fullscreen{
		inset: 78px 0 55px;
		padding-block: 1.5rem;
		padding-inline: 1rem;
	}
	#page:has(header.move-down) + .modal-fullscreen,
	.page__container:has(#page > header.move-down) .modal-fullscreen{
		inset: 0;
	}
	.modal-dialog{
		width: 100%;
	}

	table thead{
		font-size: 0.6rem;
	}
	table{
		font-size: 0.7rem;
	}


	.btn, button[type="button"], button[type="submit"]{
		font-size: 0.7em;
		align-items: center;
		padding: 0.5rem 1.1rem;
	}


	p[style*="float"]{
		float: none !important;
	}

	ul#alphaMember{
		margin-bottom: 1rem;
	}

	.float-register-btn{
		right: .5rem;
		bottom: 4.5rem;
		transition: translate 0.2s;
	}
	header.move-down + #content .float-register-btn{
		transform: translate(0, 60px);
	}

	footer .footer-partners{
		--img-height: 25px;
	}
}