/*************************
 * .layout
 *************************/

.Layout {
	padding-top: 15px;
	padding-left: 10px;
	padding-right: 10px;
	margin: auto;
    max-width: 1200px;
}


.HomeLayout {
	padding-top: 15px;
	padding-left: 10px;
	padding-right: 10px;
	margin: auto;
    max-width: 1400px;
}

.ScrutariLayout {
	padding-top: 15px;
	padding-left: 10px;
	padding-right: 10px;
	margin: auto;
    max-width: 1400px;
}

#homelayout {
	display: grid;
	grid-template-areas: 
		"content aside"
		;
	grid-template-columns: 1fr 350px;
	grid-column-gap: 60px;
	grid-row-gap: 0;
}

@media (min-width: 1000px) and (max-width: 1101px) {
	
	#homelayout {
		grid-column-gap: 20px;
		grid-template-columns: 1fr 335px;
	}
}


/*************************
 * #textlayout
 * 
 * Disposition simple avec limitation sur la largeur du texte
 *************************/

#textlayout {
	display: grid;
	grid-template-areas: 
		"title title"
		"text aside";
	grid-template-columns: 1fr 300px;
	grid-template-rows: minmax(120px, max-content) auto;
	grid-column-gap: 50px;
	grid-row-gap: 0;
}


/*************************
 * #indexationlayout
 * 
 * Disposition pour les listes d'indexation, le contenu de « aside » est destiné principalement
 * à des liens internes à la page
 * La différence avec axelayout, c'est l'introduction d'un quatrième larron « content » qui n'a pas de largeur
 * limité et qui, dans le flux 
 * Dans le flux normal, aside peut être placé entre description et content
 * suivant le choix d'affichage pour les petits écrans
 *************************/

#indexationlayout {
	display: grid;
	grid-template-areas: 
		"title title"
		"text aside"
		"content aside";
	grid-template-columns: 1fr 300px;
	grid-template-rows: minmax(120px, max-content) auto auto;
	grid-column-gap: 50px;
	grid-row-gap: 0;
	
}


/*************************
 * #yearlayout
 *************************/

#yearlayout {
	display: grid;
	grid-template-areas: 
		"title title"
		"content aside";
	grid-template-columns: 1fr 120px;
	grid-column-gap: 50px;
	grid-row-gap: 25px;
}


/*************************
 * #layout_
 *************************/

#layout_aside {
	grid-area: aside;
}

#layout_content {
	grid-area: content;	
}

#layout_text {
	grid-area: text;
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
}

#layout_title {
	grid-area: title;
	align-self: center;
}



/*************************
 * @media
 *************************/

@media (max-width: 999px) {

	#homelayout {
		display: block;
	}
	
	#indexationlayout {
		display: block;
	}
	
	#textlayout {
		display: block;
	}

}