@font-face {
	font-family: 'Ubuntu Condensed';
	font-style: normal;
	font-weight: 400;
	src: local(''),
		 url('./fonts/ubuntu-condensed-v15-latin-ext_latin-regular.ttf') format('truetype'),
		 url('./fonts/ubuntu-condensed-v15-latin-ext_latin-regular.woff2') format('woff2'),
		 url('./fonts/ubuntu-condensed-v15-latin-ext_latin-regular.eot'),
		 url('./fonts/ubuntu-condensed-v15-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'),
		 url('./fonts/ubuntu-condensed-v15-latin-ext_latin-regular.woff') format('woff'),
		 url('./fonts/ubuntu-condensed-v15-latin-ext_latin-regular.svg#UbuntuCondensed') format('svg');
}

:root {
	--fond: #FFF7D9;
	--gris-clair: rgba(0,0,0,0.1);
	--gris-fonce: rgba(0,0,0,0.3);
	--orange: #FF944D;
	--orange-clair: #FFE2B0;
	--orange-fonce: #E06B00;
}

body {
	font-family: 'Ubuntu Condensed';
	background-color: var(--fond);
	text-align: center;
	margin: 0;
	padding: 0;
	font-size: 16px;
}

fieldset {
	width: 40%;
	max-width: 400px;
	margin: auto;
	border: 1px solid var(--orange-fonce);
	border-radius: 5px;
}

button {
	background-color: var(--orange-clair);
	border: 1px solid var(--orange-fonce);
	border-radius: 5px;
	color: black;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	padding: 5px;
	margin: 0px 5px;
	font-family: 'Ubuntu Condensed';
}

button:hover {
	background-color: var(--orange);
	cursor: pointer;
}

input[type=text],
input[type=date],
input[type=password] {
	background-color: var(--orange-clair);
	border: 1px solid var(--orange-fonce);
	border-radius: 5px;
	color: black;
	text-align: left;
	text-decoration: none;
	display: inline-block;
	padding: 5px;
	margin: 0px 5px;
	font-family: 'Ubuntu Condensed';
}

input[type=text]:hover,
input[type=date]:hover,
input[type=password]:hover {
	background-color: var(--orange);
	cursor: pointer;
}

input[type=text]:focus,
input[type=date]:focus,
input[type=password]:focus {
	background-color: var(--orange);
	outline: none;
}

select {
	width: 300px;
	padding: 5px;
	border: 1px solid var(--orange-fonce);
	border-radius: 5px;
	background-color: var(--orange-clair);
	font-family: 'Ubuntu Condensed';
}

select:hover {
	background-color: var(--orange);
	cursor: pointer;
}

select:focus {
	background-color: var(--orange);
}

small {
	font-size: 60%;
}

.INCS {
	border-collapse: collapse;
	width: 100%;
}

.INCS td, .INCS th {
	border: 1px solid var(--gris-fonce);
	padding: 8px;
	text-align: left;
}

.INCS tr {
	height: 45px;
}

.INCS tr:nth-child(even) {
	background-color: var(--gris-clair);
}

.INCS tr:hover {
	background-color: var(--gris-fonce);
}

.INCS th {
	padding-top: 12px;
	padding-bottom: 12px;
	background-color: var(--orange);
}

.eleve {
	display: inline-block;
	margin: 0.5%;
	width: 31%;
	line-height: 6em;
	border: 1px solid var(--orange-fonce);
	background-color: var(--orange-clair);
	border-radius: 5px;
	cursor: pointer;
}

.eleve:hover {
	background-color: var(--orange);
	font-weight: bold;
}

.eleve > * {
	vertical-align: middle;
	line-height: normal;
}

.eleve span {
	display:inline-block;
	font-size: 1.5em;
}

.motif {
	display: inline-block;
	border: 1px solid var(--orange-fonce);
	background-color: var(--orange-clair);
	border-radius: 5px;
	line-height: 4em;
	margin: 0.5%;
	width: 31%;
	cursor: pointer;
}

.motif:hover {
	background-color: var(--orange);
	font-weight: bold;
}

.motif > * {
	vertical-align: middle;
	line-height: normal;
}

.motif span {
	display:inline-block;
	font-size: 1.5em;
}

@media only screen and (max-width: 1220px) {
	body {
		font-size: 12px;
	}

	fieldset {
		width: 60%;
		margin: auto;
	}

	.eleve {
		width: 29%;
	}
}