/*Exercice 5###############################################*/
body
{
	font-family : Arial, Helvetica, Verdana, sans-serif ;
}
p
{
	text-align : justify ;
}
.aligne_a_droite
{
	text-align : right ;
}
#main h1, #news h1
{
	font-size : x-large ;
}
#news h2
{
	font-size : large ;
}
.slogan
{
    font-size : 0.9em;
    color : rgba(107,158,46,0.4);
}
#menu_top a
{
	text-decoration : none ;
	color : black ;
}
#bouton_decouvrir_thes a
{
	text-decoration : none ;
	color : white ;
}
h1
{
	text-shadow : 1px 1px 1px gray ;
}
/*Exercice 6##############################################*/
#menu_top, #main, #footer_site
{
	background-color : rgba(107,158,46,0.4) ;
}
#bouton_decouvrir_thes
{

    background-color : rgba(48,48,48,0.6) ;
}
body
{
	background : url(images/bg_header.jpg) center top no-repeat, url(images/bg_body.jpg) repeat ;
}
aside
{
	background:url(images/bg_news.jpg) ;
	background-size : cover ;
}
#PotDeThes
{
    text-align : center;
}
footer img
{
    width : 40px;
}
/*Exercice 7#############################################*/
.bord_arrondi_ombre
{
	border-radius : 5px ;
	box-shadow : 2px 2px 2px black ;
}
#bouton_decouvrir_thes
{
    border : 4px black outset ;
}
/*Exercice 8#############################################*/
#bouton_decouvrir_thes
{
    grid-area : bouton;
    justify-self: end;
}
#menu_top
{
    grid-area : menu;
}
#header_top
{
    grid-area : enTete;
}
#main
{
    grid-area : principal;
}
#news
{
    grid-area : actualites;
}
#home_bas
{
    grid-area : espacesThes;
}
#footer_site
{
    grid-area : piedDePage;
    display : flex;
    justify-content : space-around;
}
#boutons
{
  grid-area: boutons;
}
#patterns
{
  grid-area: patterns;
}

body
{
    display : grid;
    grid-template-columns: 10% 1fr 10%;
    grid-template-areas : "menu menu menu"
                          ". enTete ."
                          ". bouton ."
                          ". boutons ."
                          ". patterns ."
                          ". principal ."
                          ". actualites ."
                          ". espacesThes ."
                          ". piedDePage .";
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}
/*Exercice 9#############################################*/
p, h1, h2
{
    padding-left : 5%;
    padding-right : 5%;
}
#bouton_decouvrir_thes
{
    padding : 5px;
}
#menu_top ul
{
    display : inline-block;
    margin : 0px;
}
/*Exercice 10############################################*/

#menu_top ul li:hover
{
    background-color : rgba(107,158,46,0.8) ;
}
#menu_top ul li:hover a
{
    color : white ;
}
/*###########################################################*/
#menu_top ul li
{
    list-style-type : none;
    padding : 5px;
}
/*###########################################################*/
.button {
  background-color:rgba(255,255,255,0.5);
  border:rgba(0,0,0,0.2);
  box-shadow:0 1px 1px rgba(0,0,0,0.2);
  padding:8px 14px;
  display:inline-block;
  text-decoration:none;
  border-radius:20px;
  color:#356188;
  text-shadow:none;
  font-weight:bold;
}
.button:hover{
  background-color:rgba(255,255,255,0.8);
}
.clickable{
	cursor:pointer;
}

#menu_top ul ul{
  display: none;
  position:absolute;
  box-shadow:2px 2px 2px #000;
  border-radius:5px;
  background:rgba(255,255,255,0.8);
  padding:0;
}

#news article p{
  display: none;
}

#news article h2 a{
  text-decoration: none;
  color: black;
}

.selection_news{
  background-color: rgba(107,158,46,0.7);
}
#patterns{
  display: flex;
}
.bloc{
  width: 30px;
  height: 20px;
  border: solid 1px black;
  margin-left: 3px;
}
#bloc1 { background-image:url(images/texture1.png); }
#bloc2 { background-image:url(images/texture2.png); }
#bloc3 { background-image:url(images/texture3.png); }
#bloc4 { background-image:url(images/texture4.png); }
#bloc5 { background-image:url(images/texture5.png); }
#bloc6 { background-image:url(images/bg_news.jpg); }

#espaces_thes div img {
  position: relative;
  top: -68px;
  width: 300px;
  height: 150px;
}
#espaces_thes
{
  display: flex;
  flex-wrap: wrap;
  text-align: center;
}
#espaces_thes div {
  width: 300px;
  height: 150px;
  background: black;
  overflow: hidden;
  margin: 10px;
}

/*###########################################################*/
@media (min-width: 500px)
{
    body
    {
        display : grid;
        grid-template-columns: 10% 1fr 1fr 10%;
        grid-template-areas : "menu menu menu menu"
                              ". enTete enTete ."
                              ". . bouton ."
                              ". boutons patterns ."
                              ". principal actualites ."
                              ". espacesThes espacesThes ."
                              ". piedDePage piedDePage .";
    }
    .slogan
    {
        font-size : 1.2em;
    }
}
@media (min-width: 1000px)
{
    #menu_top ul
    {
        display : flex;
        justify-content : flex-end;
    }
    #menu_top ul li
    {
        margin-left : 10px;
        margin-right : 10px;
    }
    body
    {
        grid-template-columns: 10% 2fr 1fr 10%;
        grid-template-areas : "menu menu menu menu"
                              ". enTete enTete ."
                              ". . bouton ."
                              ". boutons patterns ."
                              ". principal principal ."
                              ". actualites espacesThes ."
                              ". piedDePage piedDePage .";
    }
    #main
    {
        display : flex;
    }
    .slogan
    {
        font-size : 2em;
    }
}
