/*   CSS pour page d accueil de la sous-section Montréal    */

* {
	-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 sous-section Montréal */
	#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, MENU et SOUS-MENU */
	#tete {
		position: fixed;
		z-index: 1;
		background-color: black;
		font-family: Verdana, Geneva, Tahoma, sans-serif;
		width: 360px;
		margin: auto;
		border-bottom-left-radius: 16px;
		border-bottom-right-radius: 16px;
		grid-area: tete;
		display: grid;
		grid-template-columns: 240px 120px;
		grid-template-rows: 102px 38px;
		grid-template-areas:
			"nom menuJournal"
			"sousMenu sousMenu";
	}
	#nom {
		grid-area: nom;
		margin: auto;
	}
	#nomJournal {
		height: 100px;
		width: 245px;
	}
	#menu {
		grid-area: menuJournal;
		text-align: center;
		font-size: 13px;
	}
	#menuCulture {
		display: block;
		margin: 10px 20px 4px 20px;
		padding: 7px 8px;
		color: white;
	}
    #menuSociete {
		display: block;
		margin: 0px 20px 4px 20px;
		padding: 3px 8px;
		border: #165799 solid 4px;
		border-radius: 10px;
		color: white;
	}
    #menuSports {
		display: block;
		margin: 0px 20px 0px 20px;
		padding: 7px 8px;
		color: white;
	}
    #menuCulture:hover {
		padding: 3px 8px;
		border: #165799 solid 4px;
		border-radius: 10px;
	}
    #menuSports:hover {
		padding: 3px 8px;
		border: #165799 solid 4px;
		border-radius: 10px;
	}

	#sousMenu {
		grid-area: sousMenu;
		margin: auto;
		font-size: 12px;
	}
	#sousMenu span {
		margin: 0px 2px;
		padding: 1px 4px;
		color: white;
	}
	#sousMenu span:hover {
		border-bottom: white solid 3px;
	}
	#menuMtl{
		border-bottom: white solid 3px;
	}

	/* CSS Grid qui contient le corps, qui lui contient les 
	articles de la sous-section Montréal */
	#corps {
		grid-area: corps;
		display: grid;
		grid-template-columns: 360px;
		grid-template-rows: auto auto auto;
		margin: 0 auto;
		grid-template-areas:
			"article1"
			"article2"
			"article7";
	}
	.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: 16px;
	}
	.titre {
		font-size: 21px;
	}
	.articles p {
		font-size: 18px;
		text-align: justify;
	}
	#article1 {
		grid-area: article1;
		width: 326px;
		height: fit-content;
		/* margin + border*2 + padding*2  */
		margin: 3px 0 2px 0;
	}
	.divImageArt1 {
		width: 326px;
		height: 1296px;
		text-align: center;
		margin: 15px 0px 7px 0px;
	}
	.imageArt1 {
		width: 300px;
		height: 400px;
		margin: 7px 0;
		border: 3px solid #165799;
  		outline: #1D3555 solid 6px;
	}
	#article2 {
		grid-area: article2;
		width: 326px;
		height: fit-content;
		/* margin + border*2 + padding*2  */
		margin: 2px 0px;
	}
	
	.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 sous-section Montréal */
	#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, MENU et SOUS-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: 381px 191px;
		grid-template-rows: 119px 46px;
		grid-template-areas:
			"nom menuJournal"
			"sousMenu sousMenu";
	}
	#nom {
		grid-area: nom;
		margin: auto;
	}
	#nomJournal {
		height: 120px;
		width: 315px;
	}
	#menu {
		grid-area: menuJournal;
		text-align: center;
		font-size: 16px;
	}
    #menuCulture {
		display: block;
		margin: 10px 45px 4px 45px;
		padding: 7px 8px;
		color: white;
	}
    #menuSociete {
		display: block;
		margin: 0px 45px 4px 45px;
		padding: 3px 9px;
		border: #165799 solid 4px;
		border-radius: 10px;
		color: white;
	}
    #menuSports {
		display: block;
		margin: 0px 45px 4px 45px;
		padding: 7px 9px;
		color: white;
	}
	#menuCulture:hover {
		padding: 3px 8px;
		border: #165799 solid 4px;
		border-radius: 10px;
	}
    #menuSports:hover {
		padding: 3px 8px;
		border: #165799 solid 4px;
		border-radius: 10px;
	}

	#sousMenu {
		grid-area: sousMenu;
		margin: auto;
		font-size: 14px;
		-webkit-text-size-adjust:100%
	}
	#sousMenu span {
		margin: 0px 8px;
		padding: 1px 12px;
		color: white;
	}
	#sousMenu span:hover {
		border-bottom: white solid 4px;
	}
	#menuMtl{
		border-bottom: white solid 4px;
	}

	/* CSS Grid qui contient le corps, qui lui contient les 
	articles de la sous-section Montréal */
	#corps {
		grid-area: corps;
		display: grid;
		grid-template-columns: 143px 143px 143px 143px;
		grid-template-rows: auto auto auto;
		margin: 0 auto;
		grid-template-areas:
			"article1 article1 article1 article1"
			"article2 article2 article2 article2"
			"article7 article7 article7 article7";
	}
	.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: 16px;
	}
	.titre {
		font-size: 22px;
	}
	.articles p {
		font-size: 16px;
		text-align: justify;
	}
	#article1 {
		grid-area: article1;
		width: 538px;
		height: fit-content;
		margin: 5px 0 3px 0;
	}
	.divImageArt1 {
		width: 538px;
		height: 682px;
		text-align: center;
		margin: 15px 0px 7px 0px;
	}
	.imageArt1 {
		width: 230px;
		height: 306px;
		margin: 10px 10px;
		border: 3px solid #165799;
  		outline: #1D3555 solid 6px;
	}
	#article2 {
		grid-area: article2;
		width: 538px;
		height: fit-content;
		margin: 3px 0 3px 0;
	}
	
	.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: 3px 0 5px 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 sous-section Montréal */
	#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, MENU et SOUS-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: 480px 240px;
		grid-template-rows: 155px 60px;
		grid-template-areas:
			"nom menuJournal"
			"sousMenu sousMenu";
	}
	#nom {
		grid-area: nom;
		margin: auto;
	}
	#nomJournal {
		height: 160px;
		width: 390px;
	}
	#menu {
		grid-area: menuJournal;
		text-align: center;
		font-size: 19px;
	}
    #menuCulture {
		display: block;
		margin: 30px 65px 4px 65px;
		padding: 7px 9px;
		color: white;
	}
    #menuSociete {
		display: block;
		margin: 0px 65px 4px 65px;
		padding: 3px 9px;
		border: #165799 solid 4px;
		border-radius: 10px;
		color: white;
	}
    #menuSports {
		display: block;
		margin: 0px 65px 4px 65px;
		padding: 7px 9px;
		color: white;
	}
	#menuCulture:hover {
		padding: 3px 8px;
		border: #165799 solid 4px;
		border-radius: 10px;
	}
    #menuSports:hover {
		padding: 3px 8px;
		border: #165799 solid 4px;
		border-radius: 10px;
	}

	#sousMenu {
		grid-area: sousMenu;
		margin: auto;
		font-size: 16px;
	}
	#sousMenu span {
		margin: 0px 10px;
		padding: 1px 18px;
		color: white;
	}
	#sousMenu span:hover {
		border-bottom: white solid 5px;
	}
	#menuMtl{
		border-bottom: white solid 5px;
	}

	/* CSS Grid qui contient le corps, qui lui contient les 
	articles de la sous-section Montréal */
	#corps {
		grid-area: corps;
		display: grid;
		grid-template-columns: 144px 144px 144px 144px 144px;
		grid-template-rows: auto auto auto;
		margin: 0 auto;
		grid-template-areas:
			"article1 article1 article1 article1 article1"
			"article2 article2 article2 article2 article2"
			"article7 article7 article7 article7 article7";
	}
	.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: 16px;
	}
	.titre {
		font-size: 22px;
	}
	.articles p {
		font-size: 16px;
		text-align: justify;
	}
	#article1 {
		grid-area: article1;
		width: 686px;
		height: fit-content;
		margin: 6px 0 3px 0;
	}
	.divImageArt1 {
		width: 686px;
		height: 876px;
		text-align: center;
		margin: 15px 0px 7px 0px;
	}
	.imageArt1 {
		width: 300px;
		height: 400px;
		margin: 10px 10px;
		border: 3px solid #165799;
  		outline: #1D3555 solid 6px;
	}
	#article2 {
		grid-area: article2;
		width: 686px;
		height: fit-content;
		margin: 3px 0 3px 0;
	}
	
	.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: 3px 0 6px 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 sous-section Montréal */
	#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, MENU et SOUS-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: 640px 320px;
		grid-template-rows: 165px 60px;
		grid-template-areas:
			"nom menuJournal"
			"sousMenu sousMenu";
	}
	#nom {
		grid-area: nom;
		margin: auto;
	}
	#nomJournal {
		height: 165px;
		width: 400px;
	}
	#menu {
		grid-area: menuJournal;
		text-align: center;
		font-size: 22px;
	}
    #menuCulture {
		display: block;
		margin: 30px 65px 4px 65px;
		padding: 8px 9px;
		color: white;
	}
    #menuSociete {
		display: block;
		margin: 0px 65px 4px 65px;
		padding: 3px 9px;
		border: #165799 solid 5px;
		border-radius: 10px;
		color: white;
	}
    #menuSports {
		display: block;
		margin: 0px 65px 4px 65px;
		padding: 8px 9px;
		color: white;
	}
	#menuCulture:hover {
		padding: 3px 8px;
		border: #165799 solid 5px;
		border-radius: 10px;
	}
    #menuSports:hover {
		padding: 3px 8px;
		border: #165799 solid 5px;
		border-radius: 10px;
	}

	#sousMenu {
		grid-area: sousMenu;
		margin: auto;
		font-size: 18px;
	}
	#sousMenu span {
		margin: 0px 12px;
		padding: 1px 30px;
		color: white;
	}
	#sousMenu span:hover {
		border-bottom: white solid 6px;
	}
	#menuMtl{
		border-bottom: white solid 6px;
	}

	/* CSS Grid qui contient le corps, qui lui contient les 
	articles de la sous-section Montréal */
	#corps {
		grid-area: corps;
		display: grid;
		grid-template-columns: 192px 192px 192px 192px 192px;
		grid-template-rows: auto auto auto;
		margin: 0 auto;
		grid-template-areas:
			"article1 article1 article1 article1 article1"
			"article2 article2 article2 article2 article2"
			"article7 article7 article7 article7 article7";
	}
	.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: 16px;
	}
	.titre {
		font-size: 22px;
	}
	.articles p {
		font-size: 16px;
		text-align: justify;
	}	
	#article1 {
		grid-area: article1;
		width: 926px;
		height: fit-content;
		margin: 6px 0 3px 0;
	}
	.divImageArt1 {
		width: 926px;
		height: 338px;
		text-align: center;
		margin: 15px 0px 7px 0px;
	}
	.imageArt1 {
		width: 240px;
		height: 320px;
		margin: 0 20px;
		border: 3px solid #165799;
  		outline: #1D3555 solid 6px;
	}
	#article2 {
		grid-area: article2;
		width: 926px;
		height: fit-content;
		margin: 3px 0 3px 0;
	}
	
	.pubs {
		background-color: #165799;
		text-align: center;
		border: #165799 solid 1px;
		border-radius: 16px;
	}
	#article7 {
		grid-area: article7;
		width: 938px;
		height: fit-content;
		padding: 62px 10px;
		margin: 3px 0 6px 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;
		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;
	}
}