body{
    font-family: Roboto,Helvetica,Arial,sans-serif;
	margin:0;
}

h1 {
	font-size: 120%;
	font-weight: bold;
	color: #3c6382;
}

div.unique {
	/* affichage au centre de l'écran */
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	border-style: solid;
	border-color:#3c6382;
	border-radius:10px;
	background-color: #ffffff;
	color: #000000;
	max-width: 600px; 
	padding:10px;
}
div.contenu {
	position: absolute;
	padding-top:50px;
	padding-bottom:50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	width:95%;
}

div.msgErreur {
	color : #FF0000;
}

div.header {
	display:flex;
	align-items: stretch;	
	justify-content: space-between;
	padding:10px;
    width:100%;
	vertical-align:middle;
}
div.debut {
	display:flex;
	align-items: stretch;	
	justify-content: space-between;
	padding:2px;
    width:100%;
	vertical-align:middle;
}
div.fin {
	display:flex;
	align-items: stretch;	
	justify-content: space-between;
	padding:2px;
    width:100%;
	vertical-align:middle;
}
div.navLeft{
	font-size:100%;
	align-self: center start;
	vertical-align:middle;
}
div.left{
	font-size: 100%;
	font-weight: bold;
	color: #3c6382;
	align-self: center start;
	vertical-align:middle;
}
div.navRight{
	font-size:90%;
	align-self: center end;
	vertical-align:middle;
}
div.right{
	font-size: 100%;
	font-weight: bold;
	color: #3c6382;
	align-items: center end;
	vertical-align:middle;
}


div.tuiles {
	  display: grid;
	  grid-template-columns: repeat(4, 23%);
	  grid-gap: 2%;
	  grid-auto-rows: minmax(300px, auto);
}
div.colTuile1 {
	grid-column: 1;
	border-style: solid;
	border-color:#3c6382;
	border-radius:10px;
	padding: 5px;
	margin:3px;
}
div.colTuile2 {
	grid-column: 2;
	border-style: solid;
	border-color:#3c6382;
	border-radius:10px;
	padding: 5px;
	margin:3px;
}
div.colTuile3 {
	grid-column: 3;
	border-style: solid;
	border-color:#3c6382;
	border-radius:10px;
	padding: 5px;
	margin:3px;
}
div.colTuile4 {
	grid-column: 4;
	border-style: solid;
	border-color:#3c6382;
	border-radius:10px;
	padding: 5px;
	margin:3px;	
}
h1.tuile {
	font-size:110%;
	vertical-align:middle;
}
p.tuile{
	font-size:80%;
	max-height:150px;
	height:150px;
	overflow: hidden;
	text-overflow: "...";
	vertical-align:middle;
}
img.tuile {
	width:30px;
	vertical-align:middle;
}
img.infoTuile {
	width:24px;
	vertical-align:middle;
}
img.logo{
	width:48px;
	vertical-align:middle;
}
img.avatar {
	clip-path:circle(50%);
	width:48px;
	vertical-align:middle;
}
div.footer {
	position: fixed;
	bottom:0;
	padding:0px;
	margin:3px;
	width:100%;
	text-align: center;
	vertical-align:middle;
	font-size:80%;
	color : #ffffff;
	background-color: #3c6382;
}

input[type="submit"].cmdBox,
.cmdBox {
	margin:5px;
	padding:10px;
	background-color: #3c6382;
	color: #ffffff;
	border-radius:10px;
	text-align:center;
	text-decoration:none;
	vertical-align:middle;
	border: none;
	width:400px;
}


input[type="submit"].navBtn + label, .navBtn {
	margin:5px;
	padding:10px;
	color: #3c6382;
	background-color: #ffffff;
	text-align:center;
	vertical-align:middle;
	text-decoration:none;
	border: none;
	cursor:pointer;
}
label.navBtn {
	vertical-align:middle;
	margin-top:5px;
	margin-bottom:5px;
	margin-left:0px;
	margin-right:0px;
	padding-top:10px;
	padding-bottom:10px;
	padding-left:0px;
	padding-right:0px;
}

input[type="submit"].navBtn:hover + label {
	color: #ffffff;
	background-color: #3c6382;
	vertical-align:middle;
	cursor:pointer;
}

input[type="radio"].user  {
	display: none;
}

input[type="radio"].user + label {
	margin-left: 50px;	
	padding:3px;
	vertical-align:middle;
}

input[type="radio"].user:checked + label {
	font-weight:bold;
	color: #3c6382;
	vertical-align:middle;
}

input[type="radio"].user:hover + label {
	font-weight:bold;
	background-color: #3c6382;
	vertical-align:middle;
	color:#ffffff;
}

label.user {
	font-size:100%;
	vertical-align:middle;
}