html, body {
	max-width: 100vw;
	margin: 0;
	padding: 0;
}

html.sr .container {
  visibility: hidden;
}

body {
	background: #4096ee; /* Old browsers */
	background: -moz-linear-gradient(top, #4096ee 0%, #39ced6 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #4096ee 0%,#C2539A 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #4096ee 0%,#C2539A 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4096ee', endColorstr='#39ced6',GradientType=0 ); /* IE6-9 */
	background-repeat: no-repeat;

	text-align: center;
	font: 16px/1.6 'Raleway', Arial, Helvetica, sans-serif;
	color: #fff;
}
nav, .logo {
	background-color: rgba(250,250,250,0.8);
}
nav{
	z-index: 100;
	font-size: 2em;
	position: sticky;
	top: 0px;
	left: 4.5%;
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}
nav ul {
	margin: 0;
	padding: 0;
	justify-content: space-around;
	list-style: none;
	display: flex;
	flex-direction: row;
}
nav ul a {
	color: #222222;
	transition-property: color;
	transition-duration: 0.5s;
	text-decoration: none;
}
nav ul a:hover {
	color: #AC4995;
	text-decoration: none
}
nav ul li {
	margin-left: 50px;
	margin-right: 50px;
}
footer {
	border-top: 1px solid white;
	padding: 1%;
}

a {
	color: #fff;
	text-decoration: none;
}
a:hover {
	color: #fff;
	text-decoration: underline;
}

.container {
	background-color: rgba(250,250,250,0.25);
	border-radius: 10px;
}

.grid-container-psthcnews img {
	max-width: 100%;
	position: relative;
}
.grid-container-test img {
	max-width: 100%;
	position: relative;
}
.grid-container-fr3l img {
	max-width: 100%;
	position: relative;
}

.grid-container-mental-health img {
  max-width: 100%;
  position: relative;
}

/*===========================
NEWS PSTHC
=============================*/

.grid-container-psthcnews {
	margin-bottom: 2%;
	width: 100%;
  	display: grid;
  	grid-template-columns: repeat(4, 1fr);
  	grid-template-rows: repeat(10, 1fr);
  	gap: 20px 10px;
  	grid-template-areas:
    	"article1a article1b article1c article1d"
    	"article2a article2b article2c article2d"
    	"article3a article3b article3c article3d"
    	"article4a article4b article4c article4d"
    	"article5a article5b article5c article5d"
    	"article6a article6b article6c article6d"
    	"article7a article7b article7c article7d"
    	"article8a article8b article8c article8d"
      "article9a article9b article9c article9d"
      "article10a article10b . .";
}

/*------Ligne 1--------*/
.article1a { grid-area: article1a; }

.article1b { grid-area: article1b; }

.article1c { grid-area: article1c; }

.article1d { grid-area: article1d; }

/*------Ligne 2--------*/

.article2a { grid-area: article2a; }

.article2b { grid-area: article2b; }

.article2c { grid-area: article2c; }

.article2d { grid-area: article2d; }

/*------Ligne 3--------*/

.article3a { grid-area: article3a; }

.article3b { grid-area: article3b; }

.article3c { grid-area: article3c; }

.article3d { grid-area: article3d; }

/*------Ligne 4--------*/

.article4a { grid-area: article4a; }

.article4b { grid-area: article4b; }

.article4c { grid-area: article4c; }

.article4d { grid-area: article4d; }

/*------Ligne 5--------*/

.article5a { grid-area: article5a; }

.article5b { grid-area: article5b; }

.article5c { grid-area: article5c; }

.article5d { grid-area: article5d; }

/*------Ligne 6--------*/

.article6a { grid-area: article6a; }

.article6b { grid-area: article6b; }

.article6c { grid-area: article6c; }

.article6d { grid-area: article6d; }

/*------Ligne 7--------*/

.article7a { grid-area: article7a; }

.article7b { grid-area: article7b; }

.article7c { grid-area: article7c; }

.article7d { grid-area: article7d; }

/*------Ligne 8--------*/

.article8a { grid-area: article8a; }
.article8b { grid-area: article8b; }
.article8c { grid-area: article8c; }
.article8d { grid-area: article8d; }

/*------Ligne 9--------*/

.article9a { grid-area: article9a; }
.article9b { grid-area: article9b; }
.article9c { grid-area: article9c; }
.article9d { grid-area: article9d; }

/*------Ligne 10--------*/

.article10a { grid-area: article10a; }
.article10b { grid-area: article10b; }


/*===========================
TESTS PSTHC
=============================*/

.grid-container-test {
	margin-bottom: 2%;
	width: 100%;
  	display: grid;
  	grid-template-columns: repeat(2, 1fr);
  	grid-template-rows: repeat(1, 1fr);
  	gap: 20px 10px;
  	grid-template-areas:
    	"test1a test1b";
}

.test1a { grid-area: test1a; }
.test1b { grid-area: test1b; }


/*===========================
ARTICLES FRANCE 3 LORRAINE
=============================*/

.grid-container-fr3l {
	margin-bottom: 2%;
	width: 100%;
  	display: grid;
  	grid-template-columns: repeat(3, 1fr);
  	grid-template-rows: repeat(1, 1fr);
  	gap: 20px 10px;
  	grid-template-areas:
    	"fr3l1a fr3l1b fr3l1c";
}

.fr3l1a { grid-area: fr3l1a; }
.fr3l1b { grid-area: fr3l1b; }
.fr3l1c { grid-area: fr3l1c; }


/*===========================
AFFICHES MALADIES MENTALES
=============================*/

.grid-container-mental-health {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 20px 10px;
  grid-template-areas:
    "anorexie alzheimer depression"
    "anorexie alzheimer depression";
}

.anorexie { grid-area: anorexie; }

.alzheimer { grid-area: alzheimer; }

.depression { grid-area: depression; }



/*===========================
AFFICHES CYBERVIOLENCE
=============================*/

.grid-container-cyberviolence {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 20px 10px;
  grid-template-areas:
    "violence01 violence02";
}

.violence01 { grid-area: violence01; }

.violence02 { grid-area: violence02; }



/*===========================
RESPONSIVE
=============================*/

@media screen and (max-width: 767px)
{

  /*-------Articles-----------*/

  .grid-container-psthcnews
  {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(18, 1fr);
    grid-template-areas:  "article1a article1b"
                          "article1c article1d"
                          "article2a article2b"
                          "article2c article2d"
                          "article3a article3b"
                          "article3c article3d"
                          "article4a article4b"
                          "article4c article4d"
                          "article5a article5b"
                          "article5c article5d"
                          "article6a article6b"
                          "article6c article6d"
                          "article7a article7b"
                          "article7c article7d"
                          "article8a article8b"
                          "article8c article8d"
                          "article9a article9b"
                          "article9c article9d"
                          "article10a article10b";
  }
  .grid-container-test
  {
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-template-areas:  "test1a"
                          "test1b";
  }
  .grid-container-fr3l
  {
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-template-areas:  "fr3l1a"
                          "fr3l1b"
                          "fr3l1c";
  }

  /*-------Cyberviolence-----------*/

  .grid-container-cyberviolence
  {
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-template-areas:  "violence01"
                          "violence02";
  }

  /*-------Maladies mentales-----------*/

  .grid-container-mental-health
  {
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-template-areas:  "anorexie"
                          "alzheimer"
                          "depression";
  }


  nav ul {
  	flex-direction: column;
  	font-size: 20px;
  }
  h1 {
  	margin-top: 40px;
  }
}