@media (max-width: 1023px)
{
	:root
	{
		--maincol-width: 78%;
		--left-sidebar-width: 20%;
		--right-sidebar-width: 2%;
	}
}

@media screen and (max-width: 767px) 
{
	:root 
	{
		--app-font-size: .85rem;

		--area-vertical-margin: 1rem;
		--container-vertical-margin: 1rem;

		--module-padding: 1em;
	}

	#home
	{
		align-items: flex-start;
		flex-direction: column;
	}

	#home img 
	{
		width: 200px;
	}

	#logocontainer
	{
		display: none;
	}
	
	#presentation .toc 
	{
		grid-template-columns: auto;
	}

	#modules .source
	{
		grid-row-start: auto;
	}

	#legendecol
	{
		grid-column-start: auto;
	}

	#legende
	{
		margin: 1.5rem 0 0 0;
		position: relative;
		width: auto;
	}
	
	#toolbar .button-text  
	{
		display: none;
	}
	
	#toolbar .button-img 
	{
		width: auto;
	}
}

@media screen and (min-width: 568px) and (max-width: 767px) 
{
	#modules 
	{
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(2, min-content);
	}
}

@media screen and (min-width: 568px) 
{
	#toolbarcol
	{
		grid-column-start: toolbar;
		padding-top: var(--toolbar-padding-top);
	}
	
	#maincol
	{
		grid-column-start: main;
	}
	
	#adscol
	{
		grid-column-start: ads;
	}

	#toolbar
	{
		position: sticky;
		top: var(--container-vertical-margin);	
	}

	.onlymobile
	{
		display: none;
	}
}

@media screen and (max-width: 567px) 
{
	:root 
	{
		--app-font-size: .9rem;

		--app-horizontal-margin: 1rem;

		--left-sidebar-width: calc(100% - 1rem);
		--right-sidebar-width: 0;
		--gap-size: 1em;

		/* --picker-table-border-filtered: var(--light-line-width) solid rgba(102, 102, 102, .2); */
		--picker-table-border: var(--light-line-width) solid rgb(102, 102, 102);	
		--picker-table-border-horizontal: var(--light-line-width) dashed rgb(36, 36, 36);	
	}

	#toolbarcol
	{
		margin-bottom: var(--container-vertical-margin);
		z-index: 1;
	}

	#scroll 
	{
		grid-template-columns: auto;
		margin-left: auto;
		margin-right: auto;
		width: calc(100% - var(--app-horizontal-margin) * 2);
	}

	#toolbar
	{
		display: flex;
		gap: 1rem;
		position: relative;
	}

	body:not(.hastoolbar) #maintimer
	{
		box-shadow: var(--boxshadow-medium);
		position: fixed;
		top: -15% !important;
		transition: top .3s ease !important;
	}

	body:not(.hastoolbar) #maintimer.show
	{
		top: 2% !important;
	}

	#scenario 
	{
		background-color: white;
		border-bottom: var(--thin-line-width) solid var(--dossier-2-color);
		border-radius: var(--small-border-radius);
		border-top: var(--thin-line-width) solid var(--dossier-2-color);
		box-shadow: var(--boxshadow-medium);
		padding-bottom: 1em;
		padding-top: 2em;
		position: absolute;
		right: 0;
		top: calc(100% + .2rem);
		z-index: 1;
	}

	#scenario .titre 
	{
		margin-bottom: .8em;
		padding-bottom: .2em;
		padding-top: .2em;
	}

	#scenario .time 
	{
		padding-bottom: .3em;
		padding-top: .3em;
	}
	
	#modules 
	{
		display: block;
	}

	#toolbar .timer
	{
		min-width: 100px;
		max-width: 130px;
	}

	body:not(.unit) #toolbar .buttons,
	body:not(.unit) #toolbar .timer
	{
		display: none;
	}
	
	body.unit #toolbar .buttons 
	{
		flex: 1 1 auto;
		flex-flow: row nowrap;
		justify-content: stretch;
	}
	
	body.unit #toolbar .buttons .button
	{
		flex-flow: row nowrap;
	}

	#toolbar .icon-container i:is(.fa-regular, .fa-solid)
	{
		font-size: 1.8em;
	}

	#scroll .dossiers .dossier 
	{
		padding: .5em .6em;
	}
	
	.overlay:not(.autoclose) .buttonbar
	{
		flex-direction: column;
		gap: 1rem;
		width: 100%;
		justify-content: stretch;
	}

	.mobilehidden
	{
		display: none;
	}
}