.container
{
	box-sizing : border-box;
	display: grid;
	grid-gap: 10px;
}

.compact{	grid-gap: 0px;	}
.large	{	grid-gap: 20px;	}

.c6{	grid-template-columns: repeat(6, 1fr);	}
.c5{	grid-template-columns: repeat(5, 1fr);	}
.c4{	grid-template-columns: repeat(4, 1fr);	}
.c3{	grid-template-columns: repeat(3, 1fr);	}
.c2{	grid-template-columns: repeat(2, 1fr);	}

.w1{	grid-column-end: span 1;	}
.w2{	grid-column-end: span 2;	}
.w3{	grid-column-end: span 3;	}
.w4{	grid-column-end: span 4;	}
.w5{	grid-column-end: span 5;	}
.w6{	grid-column-end: span 6;	}

.h1{	grid-row-end: span 1;	}
.h2{	grid-row-end: span 2;	}
.h3{	grid-row-end: span 3;	}
.h4{	grid-row-end: span 4;	}
.h5{	grid-row-end: span 5;	}
.h6{	grid-row-end: span 6;	}

.box
{
	box-sizing : border-box;
	padding : 10px;
}

.thinbox
{
	box-sizing : border-box;
	padding : 5px;
}

.rounded		{	border-radius : 5px;	}

.container img	{	width : 100%;	}

.center	{	text-align : center;	}
.right	{	text-align : right;		}
.left	{	text-align : left;		}
.high	{	height : 100px; align-content: center;}

.entete
{
	width : 100%;
	margin-top : -10px;
}

.page
{
	border-radius : 5px;
}

.page h3
{
	box-sizing : border-box;
	width : 100%;
	margin : 0px;
	margin-bottom : 10px;
	text-align : center;
	font-size : 16px;
	padding : 5px;
	border-top-right-radius : 5px;
	border-top-left-radius : 5px;
}

img
{
	display: block;
}

.button
{
	position : relative;
	box-sizing : border-box;
	display : block;
	border-radius : 5px;
	padding : 5px;
	cursor : pointer;
	box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

.button.icon_right
{
	padding-left : 30px;
}

.button.icon_right::before {
	position : absolute;
	left : 5px;
	font-size : 14px;
	content:"⏵";
	display : block;
	width : 20px;
	height : 20px;
	line-height : 20px;
	text-align : center;
}

input[type="checkbox"]{
	display : none;
}
input[type="checkbox"] ~ label {
	position : relative;
	border-radius : 5px;
	padding-left : 30px;
	box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
input[type="checkbox"]:checked ~ label {
	border-bottom-right-radius : 0px;
	border-bottom-left-radius : 0px;
}
input[type="checkbox"] ~ label::before {
	position : absolute;
	left : 5px;
	font-size : 14px;
	content:"⏵";
	display : block;
	border-radius : 50%;
	width : 20px;
	height : 20px;
	line-height : 20px;
	text-align : center;
	rotate : 90deg;
}
input[type="checkbox"]:checked ~ label::before {
	rotate : 270deg;
}
.hidden{
	display : none;
}
input[type="checkbox"]:checked ~ .hidden {
	display : block;
	border : solid 1px #262626;
	border-bottom-right-radius : 5px;
	border-bottom-left-radius : 5px;
}