/* Responsive Navigation styles begin here */
nav > input,
nav > label {
	display: none; /* hidden on large screens */
}

/* Old Android bugfix */
body {  -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix {  from {padding:0;}  to {padding:0;} }

/***************************/
/* Menu smartphone */
/***************************/
@media (max-width: 767px) {	
	html {
		font-size: 62.5%;
		background: lightgrey;
	}
	/* Theming opened nav */	
	nav ul {
		/* translate with hardware acceleration */
		-webkit-transform: translateZ(0); 
		-ms-transform: translateZ(0);
		        transform: translateZ(0);
		-webkit-transition: max-height .4s;
		        transition: max-height .4s;
		will-change: max-height;
		

		/* global styles */
		margin: 0;
		padding: 0;
		list-style: none;
	}
	nav a {
		display: block;
		padding: 1.2rem;
		color: #fff;
		background: grey;
		text-decoration: none;
		margin-bottom: 2px;
	}
	nav a:hover, 
	nav a:focus,
	nav a:active
	{
		background: #900;
	}
	
	/* handling clic with CSS3 checked */
	/* Theming closed nav */	
	nav > input:not(:checked) ~ ul {
		max-height: 0;
		overflow: hidden;
	}
	/* Theming opened nav */
	nav > input:checked ~ ul {
		max-height: 25em;
	}
	

	/* Global styling nav button */	
	nav > label {
		display: block;
		position: absolute;
			top: 1rem; right: 1rem;
			z-index: 1;
		height: 4.5rem; width: 4.5rem;
		background: rgba(204,51,51,0);
		border: 0;
		border-radius: 50%;
		text-align: center;
		font-size: 10px;
		line-height: 1.6;
		color: #fff;
		-webkit-tap-highlight-color:rgba(0,0,0,0);
		-webkit-transition: .2s webkit-transform cubic-bezier(0, 1.8, 1, 1.2);
		        transition: .2s transform cubic-bezier(0, 1.8, 1, 1.2);
	}
	nav > label:before {
		content: "";
		display: block;	
		z-index: 1;
		height: 1.6rem; width: 2rem;
		background-color: transparent;
		background-image: -webkit-gradient(linear, left top, right top, from(#fff), to(#fff)), -webkit-gradient(linear, left top, right top, from(#fff), to(#fff)), -webkit-gradient(linear, left top, right top, from(#fff), to(#fff));
		background-image: -webkit-linear-gradient(left, #fff, #fff), -webkit-linear-gradient(left, #fff, #fff), -webkit-linear-gradient(left, #fff, #fff);
		background-image: linear-gradient(to right, #fff, #fff),
			linear-gradient(to right, #fff, #fff),
			linear-gradient(to right, #fff, #fff);
		background-position: center top, center, center bottom;
		background-repeat: no-repeat;
		-webkit-background-size: 2rem .3rem;
		        background-size: 2rem .3rem;
		margin: .8em auto 0;
		padding: 0;
		outline: 0;
		border: 0;
		cursor: pointer;
		-webkit-tap-highlight-color:rgba(0,0,0,0);
		-webkit-transition: .2s cubic-bezier(0, 1.8, 1, 1.2);
		        transition: .2s cubic-bezier(0, 1.8, 1, 1.2);
		transition-property: background;
	}
	div#colonne1 #sr-en-cours a{
	text-decoration: none;
	font-weight: bold;
	}
	div#colonne1 #ssr-en-cours a{
	text-decoration: none;
	font-weight: bold;
	color: black;
	}
	
	/* Theming opened nav button */	
	nav > input:checked + label {
		-webkit-transform: scale(.8);
		transform: scale(.8);
	}
	nav > input:checked + label::before {
		background-position: center, center, center;
	}
	

	/* Hide alternate text except from screen readers */
	.visually-hidden {
		position: absolute !important;
		clip: rect(1px, 1px, 1px, 1px);
		overflow: hidden;
		height: 1px;
		width: 1px;
	}
	.visually-true {display: block}
	img{
		max-width:100%;
	}
}

/*************************/
/* Mise en page générale */
/*************************/
html {
		font-size: 70%;
		background: lightgrey;
	}
body {
	max-width:1024px;
	margin: auto;
	background: white;
	color: black;
	font-family: helvetica, arial, sans-serif;
	font-size: 1.3em;
	line-height: 1.5;
}
a img {border: none;}
header img {
	max-width:100%
}
section {
	position: relative;
	margin-top: 1rem;
	margin-left: 1rem; margin-right: 1rem;
	padding: 1rem;
	/*background: #fff;*/
}
h1, h2 {
 margin-top: 0; margin-bottom: 1rem;
 text-shadow: 1px 1px 1px #fff;
}
h1 {font-size: 2.4rem;}
h2 {margin-top: 2rem;}
ul {padding-left: 1em; list-style-position: inside}
section li {list-style: none;}

/*FOOTER*/
footer{
    width:100%;
	margin:auto;
	margin-top:0px;
	padding-bottom: 5px;
	padding-top: 0px;
	text-align: center;
}
footer a{
	font-weight: bold;
	color: #CC3333;
}
footer a:hover{
	color: rgb(102,102,102);
}
footer a.googleplus{
	display: inline-block;
	width: 32px; height: 32px;
	border: 0px;
	text-decoration: none;
	background-image: url("Images/ico_ggplus2.png");
	background-size: 32px 64px;
	background-position:top;
	vertical-align: middle;
}
footer a.googleplus:hover{background-position: bottom;}

footer a.facebook{
	display: inline-block;
	width: 32px; height: 32px;
	border: 0px;
	text-decoration: none;
	background-image: url("Images/ico_facebook2.png");
	background-size: 32px 64px;
	background-position:top;
	vertical-align: middle;
}
footer a.facebook:hover{
	/*background-image: url("Images/ico_facebook_gris.png");*/
	background-position:bottom;
	
	}

footer img{
 min-width:32px;
 max-width:32px;
 vertical-align:middle;
}
footer p{
	min-width: 100%;
	margin: auto;
	text-align: center;
}

/***********************/
/* Menu bureau */
/***********************/
@media (min-width: 768px) {	
nav {
	/*position: relative;*/
	list-style-type: none ;
	margin: 0 ;
	padding: 0 ;
	overflow: hidden ;	/* Création du contexte de formatage */
	/*border: 1px solid blue;*/
	/*fond origine : background-color: rgba(204,51,51, 0.95);*/
	background-image: url("Images/fontmenu2.png");
    background-repeat: repeat-x; /* Le fond ne sera pas répété */
	background-position: bottom;
	/*#CC3333 ;*/
	margin-top:-6px;
	z-index: 1;
	line-height: 1.0;
	}
nav li {
	float: left ;
	width: 140px ;
	margin-right: 4px ;
	/*color: #fff ;*/
	color: white ;
	background-color: rgba(204,51,51, 0); /*#CC3333 rouge ;*/
	}
nav li a {
	display: block ;
	/*background: #fff ;*/
	background: grey ;
	/*color: #CC3333;*/
	color: white;
	font: 1em "Trebuchet MS",Arial,sans-serif ;
	line-height: 1.4em ;
	padding: 7px 0 ;
	text-align: center ;
	text-decoration: none ;
	/*border-radius: 10px 10px 0px 0px;*/
	/*-moz-border-radius: 10px 10px 0px 0px;*/
    /*-webkit-border-radius: 10px 10px 0px 0px;*/
	}
nav li a:hover, nav li a:focus, nav li a:active {
	background: #900 ;
	color: white;
	text-decoration: underline ;
	/*border-radius: 10px 10px 0px 0px;
	-moz-border-radius: 10px 10px 0px 0px;
    -webkit-border-radius: 10px 10px 0px 0px;*/
	}
nav ul{
    list-style-type: none;
	margin-top:5px;
	padding-left: 30px;
	}
#en-cours a{
	text-decoration: none;
	color: #CC3333;
	background: white;
	font-weight: bold;
	}
div#colonne1 #sr-en-cours a{
	text-decoration: none;
	font-weight: bold;
	}
div#colonne1 #ssr-en-cours a{
	text-decoration: none;
	font-weight: bold;
	color: black;
	}
.visually-true {display: none}
}