/*   CSS pour la UNE    

transform: rotateX(150deg);
transform: rotateY(150deg);
transform: rotateZ(90deg);
Allow long words to be able to be broken and wrap onto the next line:
p {
  word-wrap: break-word;
}
--- Écrire verticalement: ---
writing-mode: vertical-rl;

--- transition sur valeur disponible dans le css ---
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}
div:hover {
  width: 300px;
}
--- Text shadow ---
h1 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

*/

* {
	-webkit-text-size-adjust:100%
}
a:link {
	text-decoration: none;
  }
a:visited {
	text-decoration: none;
  }
.pSansPic{
	margin-top: 10px;
}
.spanGras{
	color: #1D3555;
	text-shadow: 1px 1px 1px #165799;
}
#contact a{
	display: block;
	color: white;
	text-decoration: underline;
}
#medias a{
	display: block;
	color: white;
	text-decoration: underline;
}
.titrePub{
	color: white;
}
.textePub{
	color: white;
}

/* E.T. Telephone Maison (600px et moins) */
@media only screen and (max-width: 600px){
	* {
		margin: 0;
		padding: 0;
	}

	/* CSS Grid qui contient les CSS grids de la UNE */
	#container {
		background-color: white;
		max-width: 360px;
		margin: auto;
		display: grid;
		grid-template-columns: 360px;
		grid-template-rows: 140px auto 120px;
		grid-template-areas:
			"tete"
			"corps"
			"pied";
	}

	/* CSS Grid qui contient la tête: nom, IPAQ et MENU */
	#tete {
		grid-area: tete;
		z-index: 1;
		position: fixed;
		background-color: black;
		font-family: Verdana, Geneva, Tahoma, sans-serif;
		width: 360px;
		margin: auto;
		border-bottom-left-radius: 16px;
		border-bottom-right-radius: 16px;
		display: grid;
		grid-template-columns: 360px;
		grid-template-rows: 87px 15px 38px;
		grid-template-areas:
			"nom"
			"ipaq"
			"menuJournal";
	}
	#nom {
		grid-area: nom;
		margin: auto;
	}
	/*  Image: */
	#nomJournal {
		height: 100px;
		width: 245px;
	}
	#ipaq {
		grid-area: ipaq;
		margin: auto;
		font-size: 9px;
		color: white;
	}
	#menu {
		grid-area: menuJournal;
		margin: auto;
		font-size: 13px;
	}
	#menu span {
		margin: 0px 21px;
		padding: 3px 8px;
		color: white;
	}
	#menu span:hover {
		margin: 0px 17px;
		padding: 3px 8px;
		border: #165799 solid 4px;
		border-radius: 10px;
	}

	/* CSS Grid qui contient le corps, qui lui contient les articles de la UNE */
	#corps {
		grid-area: corps;
		display: grid;
		grid-template-columns: 360px;
		grid-template-rows: auto auto auto auto auto auto auto auto;
		margin: 0 auto;
		grid-template-areas:
			"titres"
			"article1"
			"article01"
			"article2"
			"article3"
			"article7"
			"article4"
			"article5";
	}
	.articles {
		background-color: #F5F2E8;
		color: black;
		font-family: "Verlag", Arial, "Helvetica Neue", Helvetica, sans-serif;
		padding: 12px;
		border: #165799 solid 4px;
		border-radius: 16px;
  		outline: #1D3555 solid 1px;
	}
	.preTitre {
		color: #1D3555;
		font-size: 18px;
	}
	.titre {
		font-size: 21px;
	}
	.articles p {
		font-size: 17px;
		text-align: justify;
	}
	#titres {
		grid-area: titres;
		width: 326px;
		height: fit-content;
		margin: 3px 0 2px 0;
	}
	.divImageTitres {
		width: 326px;
		height: 326px;
		text-align: center;
		margin: 15px 0px;	
	}
	.imageTitres {
		width: 308px;
		height: 308px;
		border: 3px solid #165799;
  		outline: #1D3555 solid 6px;
	}
	#article01 {
		grid-area: article01;
		width: 326px;
		height: fit-content;
		/* margin + border*2 + padding*2 (dans la classe .articles)  */
		margin: 2px 0 2px 0;
		position: relative;
	}
	#article01Complet{
		display: block;
		/* width du div articleX - 10px */
		width: 316px;
		height: 25px;
		margin: 10px 0px 10px 0px;
		background-color: #165799;
		color: #F5F2E8;;
		border: #1D3555 solid 5px;
		border-radius: 16px;
		position: absolute;
  		bottom: 1px;
	}
	#article01Complet p{
		text-align: center;
		font-size: 20px;
	}
	#article1 {
		grid-area: article1;
		width: 326px;
		height: fit-content;
		/* margin + border*2 + padding*2 (dans la classe .articles)  */
		margin: 2px 0 2px 0;
		position: relative;
	}
	#article1Complet{
		display: block;
		/* width du div articleX - 10px */
		width: 316px;
		height: 25px;
		margin: 10px 0px 10px 0px;
		background-color: #165799;
		color: #F5F2E8;;
		border: #1D3555 solid 5px;
		border-radius: 16px;
		position: absolute;
  		bottom: 1px;
	}
	#article1Complet p{
		text-align: center;
		font-size: 20px;
	}
	#article2 {
		grid-area: article2;
		width: 326px;
		height: fit-content;
		/* margin + border*2 + padding*2 (dans la classe .articles) */
		margin: 2px 0 2px 0;
		position: relative;
	}
	#article2Complet{
		display: block;
		/* width du div articleX - 10px */
		width: 316px;
		height: 25px;
		margin: 10px 0px 10px 0px;
		background-color: #165799;
		color: #F5F2E8;;
		border: #1D3555 solid 5px;
		border-radius: 16px;
		position: absolute;
  		bottom: 1px;
	}
	#article2Complet p{
		text-align: center;
		font-size: 20px;
	}
	#article3 {
		grid-area: article3;
		width: 350px;
		height: fit-content;
		margin: 2px 0 2px 0;
		padding: 0px;
	}
	#divImageArt3 {
		width: 350px;
		height: 469px;
		background-image: url(/images/welcomeToMtl.png);
        background-size: cover; 
		background-position: center;
		position: relative;
	}
	#divImageArt3 p {
		writing-mode: vertical-rl;
		color: aliceblue;
		font-size: 36px;
		text-shadow: 4px 4px 7px black;
		text-align: center;

		position: absolute;
		right: 140px;
		top: 70px;

		padding-top: 20px;
		padding-bottom: 20px;
		transition: color 5s;
	}
	#divImageArt3 p:active {
		writing-mode: vertical-rl;
		color: black;
		text-shadow: 4px 4px 7px aliceblue;
	}
	/*
	#divImageArt3 p:hover {
		writing-mode: vertical-rl;
		color: rgb(240, 51, 17);
		text-decoration: underline;
		text-shadow: 4px 4px 7px black;
	}*/
	#article4 {
		grid-area: article4;
		width: 326px;
		height: fit-content;
		/* margin + border*2 + padding/outline*2 (dans la classe .articles) */
		margin: 2px 0 2px 0;
	}
	.divImageArt4 {
		width: 326px;
		height: 326px;
		text-align: center;
		margin: 15px 0px;	
	}
	.imageArt4 {
		width: 308px;
		height: 308px;
		border: 3px solid #165799;
  		outline: #1D3555 solid 6px;
	}
	#article5 {
		grid-area: article5;
		width: 326px;
		height: fit-content;
		/* margin + border*2 + padding*2 (dans la classe .articles) */
		margin: 2px 0 3px 0;
	}
	#divImageArt5 {
		width: 326px;
		height: 326px;
		text-align: center;
		margin: 15px 0px;
	}
	#imageArt5 {
		width: 308px;
		height: 308px;
		border: 3px solid #165799;
  		outline: #1D3555 solid 6px;
	}
	.pubs {
		background-color: #165799;
		text-align: center;
		border: #165799 solid 1px;
		border-radius: 16px;
	}
	#article7 {
		grid-area: article7;
		width: 338px;
		height: fit-content;
		padding: 41px 10px;
		margin: 2px 0 3px 0;
	}

	/* CSS Grid qui contient le pied (bien oui un unijambiste!), qui lui
	 contient CONTACT, MÉDIAS ASOCIAUX et Droits réservés  */
	#pied {
		background-color: black;
		color: white;
		padding: 0px;
		font-family: Verdana, Geneva, Tahoma, sans-serif;
		font-size: 12px;
		border-top-left-radius: 16px;
		border-top-right-radius: 16px;
		grid-area: pied;
		display: grid;
		grid-template-columns: 190px 190px;
		grid-template-rows: 75px 45px;
		grid-template-areas:
			"contact medias"
			"droits droits";
	}
	#contact {
		grid-area: contact;
		padding: 15px;	
	}
	#medias {
		grid-area: medias;
		padding: 15px;
	}
	#droits {
		grid-area: droits;
		padding: 15px;
	}
}

/* Tablette en portrait et téléphones larges (600px et plus) */
@media only screen and (min-width: 600px) {
	* {
		margin: 0;
		padding: 0;
	}

	/* CSS Grid qui contient les CSS grids de la UNE */
	#container {
		background-color: white;
		max-width: 572px;
		margin: auto;
		display: grid;
		grid-template-columns: 572px;
		grid-template-rows: 165px auto 135px;
		grid-template-areas:
			"tete"
			"corps"
			"pied";
	}

	/* CSS Grid qui contient la tête: nom, IPAQ et MENU */
	#tete {
		position: fixed;
		z-index: 1;
		background-color: black;
		font-family: Verdana, Geneva, Tahoma, sans-serif;
		width: 572px;
		margin: auto;
		border-bottom-left-radius: 16px;
		border-bottom-right-radius: 16px;
		grid-area: tete;
		display: grid;
		grid-template-columns: 572px;
		grid-template-rows: 105px 14px 46px;
		grid-template-areas:
			"nom"
			"ipaq"
			"menuJournal";
	}
	#nom {
		grid-area: nom;
		margin: auto;
	}
	#nomJournal {
		height: 120px;
		width: 315px;
	}
	#ipaq {
		grid-area: ipaq;
		margin: auto;
		font-size: 10px;
		color: white;
	}
	#menu {
		grid-area: menuJournal;
		margin: auto;
		font-size: 16px;
	}
	#menu span {
		margin: 0px 26px;
		padding: 4px 16px;
		color: white;
	}
	#menu span:hover {
		padding: 4px 12px;
		border: #165799 solid 4px;
		border-radius: 12px;
	}

	/* CSS Grid qui contient le corps, qui lui contient les articles de la UNE */
	#corps {
		grid-area: corps;
		display: grid;
		grid-template-columns: 143px 143px 143px 143px;
		grid-template-rows: auto auto auto auto auto auto;
		margin: 0 auto;
		grid-template-areas:
			"titres titres titres titres"
			"article1 article1 article3 article3"
			"article2 article2 article3 article3"
			"article01 article01 article01 article01"
			"article7 article7 article7 article7"
			"article4 article4 article5 article5"
			;
	}
	.articles {
		background-color: #F5F2E8;
		color: black;
		font-family: "Verlag", Arial, "Helvetica Neue", Helvetica, sans-serif;
		padding: 12px;
		border: #165799 solid 4px;
		border-radius: 16px;
		outline: #1D3555 solid 1px;
	}
	.preTitre {
		color: #1D3555;
		font-size: 18px;
	}
	.titre {
		font-size: 23px;
	}
	.articles p {
		font-size: 16px;
		text-align: justify;
	}
	#titres {
		grid-area: titres;
		width: 538px;
		height: fit-content;
		margin: 3px 0 2px 0;
	}
	.divImageTitres {
		width: 326px;
		height: 326px;
		text-align: center;
		margin: 15px 0px;	
	}
	.imageTitres {
		width: 308px;
		height: 308px;
		border: 3px solid #165799;
  		outline: #1D3555 solid 6px;
	}
	#article01 {
		grid-area: article01;
		width: 538px;
		height: fit-content;
		margin: 2px 0 2px 0;
		position: relative;
	}
	#article01Complet{
		display: block;
		/* width du div articleX - 10px */
		width: 528px;
		height: 25px;
		margin: 10px 0px 10px 0px;
		background-color: #165799;
		color: #F5F2E8;;
		border: #1D3555 solid 5px;
		border-radius: 16px;
		position: absolute;
  		bottom: 1px;
	}
	#article01Complet p{
		text-align: center;
		font-size: 20px;
	}
	#article1 {
		grid-area: article1;
		width: 248px;
		height: fit-content;
		margin: 2px 2px 2px 0;
		position: relative;
	}
	#article1Complet{
		display: block;
		/* width du div articleX - 10px */
		width: 238px;
		height: 25px;
		margin: 10px 0px 10px 0px;
		background-color: #165799;
		color: #F5F2E8;;
		border: #1D3555 solid 5px;
		border-radius: 16px;
		position: absolute;
  		bottom: 1px;
	}
	#article1Complet p{
		text-align: center;
		font-size: 20px;
	}
	#article2 {
		grid-area: article2;
		width: 248px;
		height: fit-content;
		margin: 2px 0 2px 0;
		position: relative;
	}
	#article2Complet{
		display: block;
		/* width du div articleX - 10px */
		width: 238px;
		height: 25px;
		margin: 10px 0px 10px 0px;
		background-color: #165799;
		color: #F5F2E8;;
		border: #1D3555 solid 5px;
		border-radius: 16px;
		position: absolute;
  		bottom: 1px;
	}
	#article2Complet p{
		text-align: center;
		font-size: 20px;
	}
	#article3 {
		grid-area: article3;
		width: 274px;
		height: fit-content;
		margin: 2px 0 2px 2px;
		padding: 0px;
	}
	#divImageArt3 {
		width: 274px;
		height: 482px;
		background-image: url(/images/welcomeToMtl.png);
        background-size: cover; 
		background-position: center;
		position: relative;
	}
	#divImageArt3 p {
		writing-mode: vertical-rl;
		color: aliceblue;
		font-size: 36px;
		text-shadow: 4px 4px 7px black;
		text-align: center;

		position: absolute;
		right: 140px;
		top: 70px;

		padding-top: 20px;
		padding-bottom: 20px;
		transition: color 5s;
	}
	#divImageArt3 p:active {
		writing-mode: vertical-rl;
		color: black;
		text-shadow: 4px 4px 7px aliceblue;
	}
	#article4 {
		grid-area: article4;
		width: 249px;
		height: fit-content;
		margin: 2px 2px 3px 0;
	}
	.divImageArt4 {
		width: 249px;
		height: 249px;
		text-align: center;
		margin: 15px 0px;	
	}
	.imageArt4 {
		width: 231px;
		height: 231px;
		border: 3px solid #165799;
  		outline: #1D3555 solid 6px;
		margin: 8px 0;
	}
	#article5 {
		grid-area: article5;
		width: 249px;
		height: fit-content;
		margin: 2px 0 3px 2px;
	}
	#divImageArt5 {
		width: 249px;
		height: 249px;
		text-align: center;
		margin: 15px 0px;
	}
	#imageArt5 {
		width: 231px;
		height: 231px;
		border: 3px solid #165799;
  		outline: #1D3555 solid 6px;
	}

	.pubs {
		background-color: #165799;
		text-align: center;
		border: #165799 solid 1px;
		border-radius: 16px;
	}
	#article7 {
		grid-area: article7;
		width: 550px;
		height: fit-content;
		padding: 48px 10px;
		margin: 2px 0 2px 0;
	}

	/* CSS Grid qui contient le pied (bien oui un unijambiste!), 
	qui lui contient CONTACT, MÉDIAS ASOCIAUX et Droits réservés  */
	#pied {
		background-color: black;
		color: white;
		padding: 0px;
		font-family: Verdana, Geneva, Tahoma, sans-serif;
		font-size: 13px;
		border-top-left-radius: 16px;
		border-top-right-radius: 16px;
		grid-area: pied;
		display: grid;
		grid-template-columns: 285px 285px;
		grid-template-rows: 99px 36px;
		grid-template-areas:
			"contact medias"
			"droits droits";
	}
	#contact {
		grid-area: contact;
		padding: 15px;
	}
	#medias {
		grid-area: medias;
		padding: 15px;
	}
	#droits {
		grid-area: droits;
		padding: 15px;
	}
}

/* Tablette en paysage (768px et plus) */
@media only screen and (min-width: 768px) {

	* {
		margin: 0;
		padding: 0;
	}

	/* CSS Grid qui contient les CSS grids de la UNE */
	#container {
		background-color: white;
		max-width: 720px;
		margin: auto;
		display: grid;
		grid-template-columns: 720px;
		grid-template-rows: 215px auto 170px;
		grid-template-areas:
			"tete"
			"corps"
			"pied";
	}

	/* CSS Grid qui contient la tête: nom, IPAQ et MENU */
	#tete {
		position: fixed;
		z-index: 1;
		background-color: black;
		font-family: Verdana, Geneva, Tahoma, sans-serif;
		width: 720px;
		margin: auto;
		border-bottom-left-radius: 16px;
		border-bottom-right-radius: 16px;
		grid-area: tete;
		display: grid;
		grid-template-columns: 720px;
		grid-template-rows: 140px 15px 60px;
		grid-template-areas:
			"nom"
			"ipaq"
			"menuJournal";
	}
	#nom {
		grid-area: nom;
		margin: auto;
	}
	#nomJournal {
		height: 160px;
		width: 390px;
	}
	#ipaq {
		grid-area: ipaq;
		margin: auto;
		font-size: 12px;
		color: white;
	}
	#menu {
		grid-area: menuJournal;
		margin: auto;
		font-size: 18px;
	}
	#menu span {
		margin: 0px 31px;
		padding: 5px 20px;
		color: white;
	}
	#menu span:hover {
		padding: 5px 15px;
		border: #165799 solid 5px;
		border-radius: 16px;
	}

	/* CSS Grid qui contient le corps, qui lui contient les articles de la UNE */
	#corps {
		grid-area: corps;
		display: grid;
		grid-template-columns: 144px 144px 144px 144px 144px;
		grid-template-rows: auto auto auto auto auto auto;
		margin: 0 auto;
		grid-template-areas:
			"titres titres titres titres titres"
			"article1 article1 article1 article3 article3"
			"article2 article2 article2 article3 article3"
			"article01 article01 article01 article01 article01"
			"article7 article7 article7 article7 article7"
			"article4 article4 article4 article5 article5";
	}
	.articles {
		background-color: #F5F2E8;
		color: black;
		font-family: "Verlag", Arial, "Helvetica Neue", Helvetica, sans-serif;
		padding: 12px;
		border: #165799 solid 4px;
		border-radius: 16px;
		outline: #1D3555 solid 1px;
	}
	.preTitre {
		color: #1D3555;
		font-size: 18px;
	}
	.titre {
		font-size: 23px;
	}
	.articles p {
		font-size: 16px;
		text-align: justify;
	}
	#titres {
		grid-area: titres;
		width: 686px;
		height: fit-content;
		margin: 3px 0 2px 0;
	}
	.divImageTitres {
		width: 326px;
		height: 326px;
		text-align: center;
		margin: 15px 0px;	
	}
	.imageTitres {
		width: 308px;
		height: 308px;
		border: 3px solid #165799;
  		outline: #1D3555 solid 6px;
	}
	#article01 {
		grid-area: article01;
		width: 686px;
		height: fit-content;
		margin: 2px 0 2px 0;
		position: relative;
	}
	#article01Complet{
		display: block;
		/* width du div articleX - 10px */
		width: 676px;
		height: 25px;
		margin: 10px 0px 10px 0px;
		background-color: #165799;
		color: #F5F2E8;;
		border: #1D3555 solid 5px;
		border-radius: 16px;
		position: absolute;
  		bottom: 1px;
	}
	#article01Complet p{
		text-align: center;
		font-size: 20px;
	}
	#article1 {
		grid-area: article1;
		width: 394px;
		height: fit-content;
		margin: 2px 2px 2px 0;
		position: relative;
	}
	#article1Complet{
		display: block;
		/* width du div articleX - 10px */
		width: 384px;
		height: 25px;
		margin: 10px 0px 10px 0px;
		background-color: #165799;
		color: #F5F2E8;;
		border: #1D3555 solid 5px;
		border-radius: 16px;
		position: absolute;
  		bottom: 1px;
	}
	#article1Complet p{
		text-align: center;
		font-size: 20px;
	}
	#article2 {
		grid-area: article2;
		width: 394px;
		height: fit-content;
		margin: 2px 0 2px 0;
		position: relative;
	}
	#article2Complet{
		display: block;
		/* width du div articleX - 10px */
		width: 384px;
		height: 25px;
		margin: 10px 0px 10px 0px;
		background-color: #165799;
		color: #F5F2E8;;
		border: #1D3555 solid 5px;
		border-radius: 16px;
		position: absolute;
  		bottom: 1px;
	}
	#article2Complet p{
		text-align: center;
		font-size: 20px;
	}
	#article3 {
		grid-area: article3;
		width: 276px;
		height: fit-content;
		margin: 2px 0 2px 2px;
		padding: 0px;
	}
	#divImageArt3 {
		width: 276px;
		height: 425px;
		background-image: url(/images/welcomeToMtl.png);
        background-size: cover; 
		background-position: center;
		position: relative;
	}
	#divImageArt3 p {
		writing-mode: vertical-rl;
		color: aliceblue;
		font-size: 36px;
		text-shadow: 4px 4px 7px black;
		text-align: center;

		position: absolute;
		right: 140px;
		top: 70px;

		padding-top: 20px;
		padding-bottom: 20px;
		transition: color 5s;
	}
	#divImageArt3 p:active {
		writing-mode: vertical-rl;
		color: black;
		text-shadow: 4px 4px 7px aliceblue;
	}
	#article4 {
		grid-area: article4;
		width: 395px;
		height: fit-content;
		margin: 2px 2px 4px 0;
	}
	.divImageArt4 {
		width: 395px;
		height: 325px;
		text-align: center;
		margin: 15px 0px;	
	}
	.imageArt4 {
		width: 307px;
		height: 307px;
		border: 3px solid #165799;
  		outline: #1D3555 solid 6px;
		margin: 8px 0;
	}
	#article5 {
		grid-area: article5;
		width: 250px;
		height: fit-content;
		margin: 2px 0 4px 2px;
	}
	#divImageArt5 {
		width: 250px;
		height: 250px;
		text-align: center;
		margin: 15px 0px 12px 0px;
	}
	#imageArt5 {
		width: 232px;
		height: 232px;
		border: 3px solid #165799;
  		outline: #1D3555 solid 6px;
	}

	.pubs {
		background-color: #165799;
		text-align: center;
		border: #165799 solid 1px;
		border-radius: 16px;
	}
	#article7 {
		grid-area: article7;
		width: 698px;
		height: fit-content;
		padding: 48px 10px;
		margin: 2px 0 2px 0;
	}

	/* CSS Grid qui contient le pied (bien oui un unijambiste!), 
	qui lui contient CONTACT, MÉDIAS ASOCIAUX et Droits réservés  */
	#pied {
		background-color: black;
		color: white;
		padding: 0px;
		font-family: Verdana, Geneva, Tahoma, sans-serif;
		font-size: 15px;
		border-top-left-radius: 16px;
		border-top-right-radius: 16px;
		grid-area: pied;
		display: grid;
		grid-template-columns: 360px 360px;
		grid-template-rows: 120px 50px;
		grid-template-areas:
			"contact medias"
			"droits droits";
	}
	#contact {
		grid-area: contact;
		padding: 15px;
	}
	#medias {
		grid-area: medias;
		padding: 15px;
	}
	#droits {
		grid-area: droits;
		padding: 15px;
	}
}

/* Laptops/desktops (992px et plus) */
@media only screen and (min-width: 992px) {
	* {
		margin: 0;
		padding: 0;
	}

	/* CSS Grid qui contient les CSS grids de la UNE */
	#container {
		background-color: white;
		max-width: 960px;
		margin: auto;
		display: grid;
		grid-template-columns: 960px;
		grid-template-rows: 225px auto 175px;
		grid-template-areas:
			"tete"
			"corps"
			"pied";
	}

	/* CSS Grid qui contient la tête: nom, IPAQ et MENU */
	#tete {
		position: fixed;
		z-index: 1;
		background-color: black;
		font-family: Verdana, Geneva, Tahoma, sans-serif;
		width: 960px;
		margin: auto;
		border-bottom-left-radius: 16px;
		border-bottom-right-radius: 16px;
		grid-area: tete;
		display: grid;
		grid-template-columns: 960px;
		grid-template-rows: 150px 15px 60px;
		grid-template-areas:
			"nom"
			"ipaq"
			"menuJournal";
	}
	#nom {
		grid-area: nom;
		margin: auto;
	}
	#nomJournal {
		height: 165px;
		width: 400px;
	}
	#ipaq {
		grid-area: ipaq;
		margin: auto;
		font-size: 13px;
		color: white;
	}
	#menu {
		grid-area: menuJournal;
		margin: auto;
		font-size: 20px;
	}
	#menu span {
		margin: 0px 35px;
		padding: 5px 20px;
		color: white;
	}
	#menu span:hover {
		padding: 5px 15px;
		border: #165799 solid 5px;
		border-radius: 16px;
	}

	/* CSS Grid qui contient le corps, qui lui contient les articles de la UNE */
	#corps {
		grid-area: corps;
		max-width: 960px;
		display: grid;
		grid-template-columns: 192px 192px 192px 192px 192px;
		grid-template-rows: auto auto auto auto auto auto;
		margin: 0 auto;
		grid-template-areas:
			"titres titres titres titres titres"
			"article1 article1 article1 article3 article3"
			"article01 article01 article01 article3 article3"
			"article2 article2 article2 article2 article2"
			"article7 article7 article7 article7 article7"
			"article4 article4 article4 article5 article5";
	}
	.articles {
		background-color: #F5F2E8;
		color: black;
		font-family: "Verlag", Arial, "Helvetica Neue", Helvetica, sans-serif;
		padding: 12px;
		border: #165799 solid 4px;
		border-radius: 16px;
		outline: #1D3555 solid 1px;
	}
	.preTitre {
		color: #1D3555;
		font-size: 20px;
	}
	#titreEditorial{
		font-size: 24px;
	}
	.titre {
		font-size: 26px;
	}
	.articles p {
		font-size: 16px;
		text-align: justify;
	}
	#titres {
		grid-area: titres;
		width: 926px;
		height: fit-content;
		margin: 3px 0 2px 0;
	}
	.divImageTitres {
		width: 326px;
		height: 326px;
		text-align: center;
		margin: 15px 0px;	
	}
	.imageTitres {
		width: 308px;
		height: 308px;
		border: 3px solid #165799;
  		outline: #1D3555 solid 6px;
	}
	#article01 {
		grid-area: article01;
		width: 540px;
		height: fit-content;
		margin: 2px 2px 2px 0;
		position: relative;
	}
	#article01Complet{
		display: block;
		/* width du div articleX - 10px */
		width: 530px;
		height: 25px;
		margin: 10px 0px 10px 0px;
		background-color: #165799;
		color: #F5F2E8;;
		border: #1D3555 solid 5px;
		border-radius: 16px;
		position: absolute;
  		bottom: 1px;
	}
	#article01Complet p{
		text-align: center;
		font-size: 20px;
	}	
	#article1 {
		grid-area: article1;
		width: 540px;
		height: fit-content;
		margin: 2px 2px 2px 0;
		position: relative;
	}
	#article1Complet{
		display: block;
		/* width du div articleX - 10px */
		width: 530px;
		height: 25px;
		margin: 10px 0px 10px 0px;
		background-color: #165799;
		color: #F5F2E8;;
		border: #1D3555 solid 5px;
		border-radius: 16px;
		position: absolute;
  		bottom: 1px;
	}
	#article1Complet p{
		text-align: center;
		font-size: 20px;
	}
	#article2 {
		grid-area: article2;
		width: 926px;
		height: fit-content;
		margin: 2px 2px 2px 0;
		position: relative;
	}
	#article2Complet{
		display: block;
		/* width du div articleX - 10px */
		width: 916px;
		height: 25px;
		margin: 10px 0px 10px 0px;
		background-color: #165799;
		color: #F5F2E8;;
		border: #1D3555 solid 5px;
		border-radius: 16px;
		position: absolute;
  		bottom: 1px;
	}
	#article2Complet p{
		text-align: center;
		font-size: 20px;
	}
	#article3 {
		grid-area: article3;
		width: 372px;
		height: fit-content;
		margin: 2px 0 2px 2px;
		padding: 0px;
	}
	#divImageArt3 {
		width: 372px;
		height: 572px;
		background-image: url(/images/welcomeToMtl.png);
        background-size: cover; 
		background-position: center;
		position: relative;
	}
	#divImageArt3 p {
		writing-mode: vertical-rl;
		color: aliceblue;
		font-size: 36px;
		text-shadow: 4px 4px 7px black;
		text-align: center;

		position: absolute;
		right: 140px;
		top: 70px;

		padding-top: 20px;
		padding-bottom: 20px;
		transition: color 5s;
	}
	#divImageArt3 p:hover {
		writing-mode: vertical-rl;
		color: black;
		text-shadow: 4px 4px 7px aliceblue;
	}

	.pubs {
		background-color: #165799;
		text-align: center;
		border: #165799 solid 1px;
		border-radius: 16px;
	}
	#article7 {
		grid-area: article7;
		width: 938px;
		height: fit-content;
		padding: 65px 10px;
		margin: 3px 0 6px 0;
	}

	#article4 {
		grid-area: article4;
		width: 540px;
		height: fit-content;
		margin: 2px 2px 3px 0;
	}
	.divImageArt4 {
		width: 540px;
		height: 278px;
		text-align: center;
		margin: 15px 0px;	
	}
	.imageArt4 {
		width: 260px;
		height: 260px;
		border: 3px solid #165799;
  		outline: #1D3555 solid 6px;
		margin: 0 8px;
	}
	
	#article5 {
		grid-area: article5;
		width: 348px;
		height: fit-content;
		margin: 2px 0 3px 2px;
	}
	#divImageArt5 {
		width: 347px;
		height: 268px;
		text-align: center;
		margin: 15px 0px;
	}
	#imageArt5 {
		width: 250px;
		height: 250px;
		border: 3px solid #165799;
  		outline: #1D3555 solid 6px;
	}

	/* CSS Grid qui contient le pied (bien oui un unijambiste!), 
	qui lui contient CONTACT, MÉDIAS ASOCIAUX et Droits réservés  */
	#pied {
		background-color: black;
		color: white;
		font-family: Verdana, Geneva, Tahoma, sans-serif;
		font-size: 16px;
		border-top-left-radius: 16px;
		border-top-right-radius: 16px;
		padding: 0px;
		grid-area: pied;
		display: grid;
		grid-template-columns: 480px 480px;
		grid-template-rows: 125px 50px;
		grid-template-areas:
			"contact medias"
			"droits droits";
	}
	#contact {
		grid-area: contact;
		padding: 15px;
	}
	#medias {
		grid-area: medias;
		padding: 15px;
	}
	#droits {
		grid-area: droits;
		padding: 15px;
	}
}