/*######################## 
GLOBAL 
########################*/
:root
{
	--hauteur-bandeau:7vw;
	--hauteur-titre:calc(2vw + 20px);
	--hauteur-navigation:2.5vw;
	--couleur-fondBleu:rgb(200, 225, 255);
	--hauteur-centrageVertical:40vh;
	--couleur-Blanc:rgb(255, 255, 255);
    --couleur-Noir:rgb(0, 0, 0);
	--couleur-BleuFonce:rgb(44, 44, 70);
	--couleur-BleuMoyen:rgb(20, 20, 65);
	--couleur-BleuClaire:rgb(40, 40, 124);
	--couleur-fondJaune:rgb(255, 217, 60);
	--couleur-fondOrange:rgb(255, 164, 18);
	/*--couleur-fondBleuFlash:rgb(0, 0, 255);
	--largeur-corps:96vw;
	--largeur-ligne:2px;*/
}

body{
	font-family:Tahoma;
	background-color:var(--couleur-fondBleu);
}

#superieur{
	position:static;
	width:100vw;
	background-color:white;
	height:var(--hauteur-centrageVertical);
}

#bandeau{
	height:var(--hauteur-bandeau);
	color:black;
	position:static;
	width:100vw;
	background-color:white;
	cursor:pointer;
	z-index:10;
}

#logoBandeau{
	float:left;
	margin:0 1vw;
	height:var(--hauteur-bandeau);
}

#titre{
	float:left;
	width:80vw;
	text-align:center;
	margin:auto;
}

h1{
	font-weight:normal;
	font-size:calc(var(--hauteur-titre)*0.75);
	line-height:calc(var(--hauteur-bandeau)*0.75);
}

#sousTitre{
	font-size:calc(var(--hauteur-titre)*0.25);
	font-style:italic;
	line-height:calc(var(--hauteur-bandeau)*0.25);
}

#english
{
	float:left;
	color:black;
	display:none;
    font-family:Courier New;
	font-size:calc(var(--hauteur-bandeau)/7);
	margin-top:calc(var(--hauteur-bandeau)*0.4);
	cursor:pointer;
}

#navigation{
	display:none;
	position:fixed;
	width:100vw;
	background-color:black;
	top:var(--hauteur-bandeau);
	height:var(--hauteur-navigation);
	z-index:10;
}

#onglets li{
    position: relative;
    float: left;
    list-style: none;
    cursor: pointer;
    color: white;
	line-height:var(--hauteur-navigation);
	margin-right:var(--hauteur-navigation);
}

[name = 'Accueil']{
	margin-left:var(--hauteur-navigation);
}

#onglets li:hover;{
  
}

#onglets .actif{
  
}

#contenu{
	display:none;
	position:static;
	width:100vw;
	text-align:center;
	padding-top:calc(var(--hauteur-bandeau) + var(--hauteur-navigation));
	min-height:calc(100vh - calc(var(--hauteur-bandeau) + 
	                             var(--hauteur-navigation)));
}

#inferieur{
	position:fixed;
	bottom:0px;
	width:100vw;
	background-color:white;
	height:calc(100vh - calc(var(--hauteur-bandeau) + 
	                         var(--hauteur-centrageVertical)));
}

#premier{
	display:none;
}

.Accueil{
	padding-top:10vh;
	width:80%;
	margin:auto;
	font-size:calc(0.5*var(--hauteur-titre));
	text-align:justify;
}

#deuxieme{
	display:none;
}

/*######################## 
Les tags 
########################*/

[name = 'Tout'], [name = 'All']{
	background-color:var(--couleur-Noir);
	color:var(--couleur-Blanc);
	display:inline-block;
	padding : 2px;
	margin : 2px;
    cursor : pointer;
	border-radius: 0 calc(0.2*var(--hauteur-titre));
}

.Codes, [name = 'Codes']{
	background-color:var(--couleur-BleuFonce);
	color:var(--couleur-Blanc);
	display:inline-block;
	padding : 2px;
	margin : 2px;
    cursor : pointer;
	border-radius: 0 calc(0.2*var(--hauteur-titre));
}

.Outils, [name = 'Outils'], [name = 'Tools']{
	background-color:var(--couleur-BleuMoyen);
	color:var(--couleur-Blanc);
	display:inline-block;
	padding : 2px;
	margin : 2px;
    cursor : pointer;
	border-radius: 0 calc(0.2*var(--hauteur-titre));
}

.Disciplines, [name = 'Disciplines']{
	background-color:var(--couleur-BleuClaire);
	color:var(--couleur-Blanc);
	display:inline-block;
	padding : 2px;
	margin : 2px;
    cursor : pointer;
	border-radius: 0 calc(0.2*var(--hauteur-titre));
}

.entreprise{
	display:inline-block;
	padding : 2px;
	margin : 2px;
    cursor : pointer;
}

#premier .entreprise{
	background-color:var(--couleur-fondOrange);
	display:inline-block;
	padding : 2px;
	margin : 2px;
    cursor : pointer;
}

.tagActif{
	background-color:var(--couleur-fondJaune);
	color:var(--couleur-Noir);
}

.catActif{
	background-color:var(--couleur-fondJaune);
	color:var(--couleur-Noir);
}

[name = 'conteneurComp']{
	width:100%;
	margin:auto;
	height:calc(5*var(--hauteur-titre));
	font-size:calc(0.5*var(--hauteur-titre));
	padding-top:5vh;
}

[name = 'conteneurCat']{
	width:20%;
	margin:auto;
	display:inline-block;
	vertical-align:top;
}

[name = 'conteneurTag']{
	width:80%;
	margin:auto;
	display:inline-block;
}

/*######################## 
Table experience
########################*/
table
{
	table-layout: auto;
	width: 60%;
	border-collapse: collapse;
	color:var(--couleur-Noir);
	margin:5vh auto;
}

th
{
	background-color:var(--couleur-fondBleuMoyen);
	width:15%;
	height:var(--hauteur-titre);
	border-width: var(--largeur-ligne);
	border-color: white;
	border-style: solid;
	font-size:calc(var(--hauteur-titre)*0.45);
}

.thTitre
{
	background-color:var(--couleur-fondJaune);
	color:var(--couleur-Noir);
	font-size:calc(var(--hauteur-titre)*0.4);
	text-decoration:underline;
}

td
{
	background-color:var(--couleur-fondBleuClaire);
	width:65%;
	padding:2% 5%;
	border-width: var(--largeur-ligne);
	border-color: white;
	border-style: solid;
	font-size:calc(var(--hauteur-titre)*0.3);
	text-align:left;
}
.tdTag
{
	background-color:var(--couleur-fondBleuFonce);
	width:20%;
	text-align:center;
	padding:0 1%;
	border-width: var(--largeur-ligne);
	border-color: white;
	border-style: solid;
	font-size:calc(var(--hauteur-titre)*0.35);
}

.commentaire
{
	padding:10% 0 0 0;
	text-align: justify;
	font-style : italic;
}

/*######################## 
Offre
########################*/

#solution{
	width:60%;
	text-align:justify;
	margin:auto;
	font-size:calc(0.3*var(--hauteur-titre));
}

/*######################## 
Methodologie
########################*/

#methodologie{
	width:60%;
	text-align:justify;
	margin:auto;
	font-size:calc(0.3*var(--hauteur-titre));
}

.titreMethode{
	text-align:center;
	font-size:calc(0.6*var(--hauteur-titre));
	margin:calc(1*var(--hauteur-titre)) 0;
}

.listeMethodo>li{
	padding-left:calc(1*var(--hauteur-titre));
	margin:calc(0.8*var(--hauteur-titre)) 0 calc(0.5*var(--hauteur-titre)) 0;
	font-weight:bold;
	color:white;
	border-radius: 0 calc(0.2*var(--hauteur-titre));
	font-size:calc(0.5*var(--hauteur-titre));
    list-style: none;
	font-weight:normal;
}
#methodo1{
	background-color:var(--couleur-BleuFonce);
}

#methodo2{
	background-color:var(--couleur-BleuMoyen);
}

#methodo3{
	background-color:var(--couleur-BleuClaire);
}


/*######################## 
Clients
########################*/

[name = 'conteneurClients']>img{
	display:inline-block;
	vertical-align:center;
	margin:calc(0.5*var(--hauteur-titre));
	width:calc(2.5*var(--hauteur-titre));
	cursor:pointer;
	transition-duration:0.3s;
}

[name = 'conteneurClients']>img:hover{
	border-width: calc(0.2*var(--hauteur-titre));
	border-color: var(--couleur-fondJaune);
	border-style: solid;
}

[name = 'conteneurClients']{
	height:calc(4*var(--hauteur-titre));
}


.clientActif{
	border-width: calc(0.2*var(--hauteur-titre));
	border-color: var(--couleur-fondJaune);
	border-style: solid;
}

.titreClient{
	text-align:center;
	font-size:calc(0.4*var(--hauteur-titre));
	margin:calc(0.2*var(--hauteur-titre)) 0;
	text-decoration: underline;
}

.presentationClient{
	width:60%;
	text-align:justify;
	margin:auto;
	font-size:calc(0.3*var(--hauteur-titre));
	bottom-border:solid;
}

/*######################## 
FAQ
########################*/

.questionFAQ{
	font-size:calc(0.5*var(--hauteur-titre));
	margin:0 0 calc(0.3*var(--hauteur-titre)) 0;
}

.reponseFAQ{
	font-size:calc(0.4*var(--hauteur-titre));
	margin:0 0 calc(1*var(--hauteur-titre)) 0;
}

.FAQ{
	padding-top:10vh;
	width:80%;
	margin:auto;
}