/* CSS Document 
@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
*/
/* GENERAL *************************************************/
#site{
	width: 95%;
	margin: auto;
	display: grid;
	grid-template-columns: 2fr 5fr;
	grid-gap: 1em;
	grid-template-areas: 
		"header nav"
		"main main"
		"footer footer";
}
body{
    font-family: "Montserrat", Verdana, sans-serif; 
	margin: 0;
	padding: 0;
}
header{
	grid-area: header;
	background-image: url(../images/fond-gris.jpg);
	background-repeat: repeat;
	display: flex;
}
header div{
	padding: 2em;
	display: flex;
	align-items: center;
}
nav{
	grid-area: nav;
}
main{
	grid-area: main;
}
footer{
	grid-area: footer;
	background-color: #7c7d7f;
}
h1{
    color: #6E4A46;
	font-size: 3em;
	font-weight : 600;
    text-align: center;
}
h2{
	color: white;
	background-color: blue;
	opacity: 0.5 ;
    font-size: 2em;
	font-weight : 500;
	padding : 10px;
}
h3{
	color: #6E4A46;
    font-size: 1.5em;
	font-weight: 700;
	text-decoration: underline;
}
p{
    font-size: 1em;
	font-weight : 400;
}
li{
	MARGIN: 10px 10px 10px 18px;
	PADDING-RIGHT: 0px;
	LIST-STYLE-POSITION: outside;
}
.gauche
{
	text-align:left;
}
.centre
{
	text-align:center;
}
iframe {
    border: none; 
}
.qualiopi a {
	color: white;
	font-size: 0.8em;
	margin: 4px 1px 1px 18px;
}
.qualiopi li {
	color: white;
	font-size: 0.8em;
	font-weight : 400;
	margin: 4px 1px 1px 18px;
}
.lien-qualiopi a {
	color: rgb(4, 11, 148);
	font-size: 0.6em;
	font-weight : 400;
	margin: 0px 0px 0px 10px;
}
.important{
	color: #6E4A46;
	font-weight: 700;
	text-align: left;
	padding-left:2em;
	padding-right:2em;
}
.important-centre{
	color: #6E4A46;
	font-weight: 700;
	text-align: center;
	padding-left:2em;
	padding-right:2em;
}
.rappel
{
   border: 3px black groove;  /*Bordures*/
   border-radius: 10px;       /*coins arrondis*/
   box-shadow: 6px 6px 0px black; /* ombres*/
   padding : 12px;
   margin : 5px;
}
.accessibilite
{
	width: auto;
	color: white;
	font-size: 1.2em;
	padding : 25px;
    margin : 15px;
}
.hidden
{
	height: 1px;
	left: 0;
	overflow: hidden;
	position: absolute;
	top: -10000px;
	width: 1px;
}

/* MENU *************************************************/
#menuMain li, #menuVae li, #menuBilan li, #pageVae li, #pageBilan li {
/* on place les liens du menu horizontalement */
    display: inline-block;
	background: #efefef;
}
.lien
{
	color: #6E4A46;
	font-size: 1em;
    font-weight: 700;
	outline: none;
	text-decoration: none;
	transition: color 1s;
}
.bouton
{
	color: #6E4A46;
	background: #efefef;
	font-size: 1.3em;
    font-weight: 700;
	outline: none;
	text-decoration: none;
	transition: color 1s;
    display: block;	
	padding: 10px;
    margin: 5px;
}
a:focus {
  border-bottom: 1px solid;
  background: #BAE498;
}
a:hover {
  cursor: pointer;
  color: #F00;
  background: #CDFEAA;
}
a:active {
  background: #265301;
  color: #CDFEAA;
}

/* Traitement de la structuration en blocs ****/
.conteneur{
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
	align-content : stretch;
	width: auto;
    justify-content: space-around;
    flex: 1 1 auto;
}
.boite-1{
	width: 100%;
}
.boite-2{
	width: 11%;
}
.boite-3{
	width: 49%;
}
.boite-4{
	width: auto;
	flex-direction: column;
}
.boite-5{
	width: 88%;
}
.boite-6{
	width: 30%;
}
/* SECTION "ACCUEIL" *********************************************/
.accueil-vae{
    border: solid;
	border-color:#4c6bb2;
}
.accueil-bilan{
    border: solid;
	border-color:#6E4A46;
}
.accueil-formations{
    border: solid;
	border-color:#306e1d;
}
/* SECTION "VALIDATION DES ACQUIS DE L'EXPERIENCE" ***************/
.vae{
	background-color: #4c6bb2;
}
.vae table {
	border:3px solid #6495ed;
	border-collapse:collapse;
	width:90%;
	margin:auto;
}
.vae thead, 
.vae tfoot {
	background-color:#EFF6FF;
	border:1px solid #6495ed;
}
.vae tbody {
	background-color:#FFFFFF;
	border:1px solid #6495ed;
}
.vae th {
	border: 1px dashed lightgray;
	padding:5px;
	background-color:#EFF6FF;
	width:25%;
}
.vae td {
	border:1px dashed lightgray;
	padding:5px;
	/* text-align:center; */
}
.vae caption {
	background-color:#EFF6FF;
}
/* SECTION "BILAN DE COMPETENCES" ********************************/
.bilan{
	background-color: #6E4A46;
}
.bilan table {
	border: solid;
	border-color:#6E4A46;
	border-collapse:collapse;
	width:90%;
	margin:auto;
}
.bilan thead, 
.bilan tfoot {
	background-color:#E6DFDF;
	border:1px solid #6E4A46;
}
.bilan tbody {
	background-color:#FFFFFF;
	border:1px solid #6E4A46;
}
.bilan th {
	border: 1px dashed lightgray;
	padding:5px;
	background-color:#E6DFDF;
	width:25%;
}
.bilan td {
	border:1px dashed #E6DFDF;
	padding:5px;
	/* text-align:center; */
}
.bilan caption {
	background-color:#E6DFDF;
}
/* SECTION "FORMATIONS" ********************************/
.formations{
	background-color: #306e1d;
}
.formations table {
	border:3px solid green;
	border-collapse:collapse;
	width:90%;
	margin:auto;
}
.formations thead, tfoot {
	background-color:#709677;
	border:1px solid green;
}
.formations tbody {
	background-color:#709677;
	border:1px solid green;
}
.formations th {
	border:1px dotted green;
	padding:5px;
	background-color:#709677;
	width:25%;
}
.formations td {
	border:1px solid green;
	padding:5px;
	text-align:center;
}
.formations caption {
	background-color:#709677;
}
/* SECTION "NOTRE LOCALISATION" **********************************/
#localisation
{
    width: 100%;
    min-width: 400px;
	padding: 1em;
    border: solid;
}
.image
{
    max-width : 100%;
    max-height : 100%;
}
/* SECTION "MENTIONS" ********************************************/
/* SECTION "RESSOURCES" ******************************************/
/* PETITS ECRANS ET SMARTPHONES ******************************/
@media all and (max-width: 1024px)
{
	#site{
		width: 95%;
		margin: auto;
		display: grid;
		grid-template-columns: 1fr;
		grid-gap: 1em;
		grid-template-areas: 
			"header"
			"nav"
			"main"
			"footer";
	}
	#localisation
    {
        display: block;
        width: auto;
		margin : 10px
    }
	section{
		display:none;
	}
	#menuMain li, #menuVae li, #menuBilan li, .presentation, .conteneur, .boite-1, .boite-2, .boite-3, .boite-4, .boite-6{
		display: flex;
		flex-direction: column;
        width: auto;
		margin : 10px
	}
    .imageflottante
    {
        height: 1px;
		left: 0;
		overflow: hidden;
		position: absolute;
		top: -10000px;
		width: 1px;
		display: none;
    }

}