body{
		font-family:liberation serif;
	}

       /*barre et menu deroulant*/
     ul { list-style-type: none; margin: 0; padding: 0;        /*pourrait provoquer un bug au niveau des ul*/
          }

     #barre { display: block;                    
	   position: fixed;
	   z-index: 10000;
	   top:0%;
	   left:0%;
		width:100%; 		
          }
		  
	  #barre a{ display: block;
          width: 100%;
          height: 100%;
          text-decoration: none;
          color: black;
          }
     #barre a:hover { color: blue; }
	 
	 
	 
    .menu { display: inline-block;              /*les differents menus de la barre*/
          width: 15%; height: 43px;
          background-color: whitesmoke;         
          text-align: center;
          line-height: 43px;
          overflow: hidden;
          vertical-align: top;
          transition: 0.5s ease-in-out 0s;
          }
		  
	#logo{width:25%}
	 #menuprincipal { cursor: pointer; }
     #menuprincipal:hover { height: 140px; }    
	#menucouleur{ 
	cursor: pointer; 
	width:25%;
	}
	 #menucouleur:hover { height: 350px; }   
	#logo{
	padding-left:1%;
		  }
		  
	#reste{                                  /*menu fantome pour combler l'espace non occupe par les menus*/
		width:19%; 
		  }
	 
	 .rectangle{                              /*les rectangles de couleur*/
      float:left;
      margin-top:10px;
	  margin-left:5px;
	 }




#conteneur{                       /*rectangles de la page d'accueil du numéro 1*/
display:flex;
flex-wrap:wrap;
}

#conteneur2{                       /*rectangles de la page d'accueil du numéro 2*/
display:flex;
flex-wrap:wrap;
}

.titre_numero{
    background:url('tétractys.png') no-repeat 15% 50%,
    url('pentagramme.png') no-repeat 85% 50%,
    #C0C0C0;
}


.titre_numero2{
    background:url('Image les 4 arts.png') no-repeat 83% 50%,
    url('image tétractys inversée.png') no-repeat 0% 50%,
    #C0C0C0;
}

.vert{
	background-color:#CCCC2E;
}
.jaune{
	background-color:#FFFF56;
}
.rouge{
	background-color:#FF6161;
}
.violet{
	background-color:#CAA5FE;
}
.bleu{
	background-color:#66B1FD;
}
.orange{
	background-color:#FE854C;
}
	
.element{
border:1px solid black;
height:200px;
}
#conteneur > a:nth-child(1){
width:45%;
}
#conteneur > a:nth-child(2){
width:54%;
}
#conteneur > a:nth-child(3){
width:99%;
}
#conteneur > a:nth-child(4){
width:54%;
}
#conteneur > a:nth-child(5){
width:45%;
}
#conteneur > a:nth-child(6){
width:99%;
}
#conteneur > a:nth-child(7){
width:45%;
}
#conteneur > a:nth-child(8){
width:54%;
}
#conteneur > a:nth-child(9){
width:54%;
}
#conteneur > a:nth-child(10){
width:45%;
}
#conteneur > a:nth-child(11){
width:99%;
}
#conteneur > a:nth-child(12){
width:45%;
}
#conteneur > a:nth-child(13){
width:54%;
}
#conteneur > a:nth-child(14){
width:99%;
}

#conteneur2 > a:nth-child(1){
width:45%;
}

#conteneur2 > a:nth-child(2){
width:54%;
}

#conteneur2 > a:nth-child(2) h1{
padding-right: 3px;  
}

#conteneur2 > a:nth-child(3){
width:54%;
}

#conteneur2 > a:nth-child(4){
width:45%;
}

#conteneur2 > a:nth-child(5){
width:99%;
}

#conteneur2 > a:nth-child(6){
width:99%;
}
#conteneur2 > a:nth-child(7){
width:45%;
}

#conteneur2 > a:nth-child(8){
width:54%;
}
#conteneur2 > a:nth-child(9){
width:54%;
}

#conteneur2 > a:nth-child(10){
width:45%;
}
#conteneur2 > a:nth-child(11){
width:45%;
}

#conteneur2 > a:nth-child(12){
width:54%;
}
#conteneur2 > a:nth-child(13){
width:99%;
}
#conteneur2 > a:nth-child(14){
width:54%;
}

#conteneur2 > a:nth-child(15){
width:45%;
}


.element h1{
font-size:2em;
color:black;
}
.element h2{
font-size:1.5em;
margin-block-start:0;
color:black;
}
/*.element a{
height: 100%;
width:100%;
display:block;
text-decoration:none;
color:black;
}*/


a:link                                   /*empeche soulignement liens*/
{ 
 text-decoration:none; 
} 



aside h1{               /*bandeau du titre et du numero de la page d'accueil*/
font-size:2.5em;
margin-bottom:0em;
}

aside{
border-bottom: 2px solid black;
border-top: 2px solid black;
}





section                   /*contient bandeau et rectangles de la page d'accueil et commentaires articles*/
{
width:100%;
position:absolute;
top:43px;
text-align:center;
}

.com{                    /*section commentaires*/
display:block;
background-color:whitesmoke;
margin-top:20px;
margin-bottom:20px;
}
.com h1{
display:block;
background-color:grey;
text-align:center;
font-size:2.5em;
}

.com form{
margin-left:20%
}


h3                      /*indique l'annee dans le bandeau de la page d'accueil*/
{font-size:1.5em;
margin-block-start: 2em;
}





header h1{                      /*bandeau indiquant titre article et nom auteur*/
font-size:3em;
text-align:center;
}

header h2{
font-size:2em;
text-align:center;
}

header{
display:block;
padding-top:60px;
padding-bottom:15px;
margin-bottom:15px;
width:100%;
}




article{                      /*mise en forme des articles*/
margin-left:20%;
margin-right:8%;
width:60%;
text-align:center;
}

article p{
text-align:justify;
font-size:15pt;
}

body{
margin-bottom: 50px;
}

footer{
height:200px;
text-align:center;
width:100%;
font-size:25px;
}

                               /*mise en forme des commentaires*/
.com{
    padding-left:12%;
    padding-right:12%;
}