.contenuSupperpose { position : relative; }
.supperposerEnBas { position : absolute; bottom : 0px; left : 0px; right : 0px; z-index:3;}

.colonnesX { display: grid; grid-auto-flow: column; }

.colonnes1auto { display : grid; grid-template-columns: auto; }
.colonnes2auto { display : grid; grid-template-columns: auto auto; }
.colonnes3auto { display : grid; grid-template-columns: auto auto auto; }
.colonnes4auto { display : grid; grid-template-columns: auto auto auto auto; }
.colonnes5auto { display : grid; grid-template-columns: auto auto auto auto auto; }
.colonnes6auto { display : grid; grid-template-columns: auto auto auto auto auto auto; }
.colonnes1 { display : grid; grid-template-columns: 1fr; }
.colonnes2 { display : grid; grid-template-columns: 1fr 1fr; }
.colonnes3 { display : grid; grid-template-columns: 1fr 1fr 1fr; }
.colonnes4 { display : grid; grid-template-columns: 1fr 1fr 1fr 1fr; }
.colonnes5 { display : grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
.colonnes6 { display : grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; }
.colonnes12 { display : grid; grid-template-columns: 1fr 2fr; }
.colonnes13 { display : grid; grid-template-columns: 1fr 3fr; }
.colonnes14 { display : grid; grid-template-columns: 1fr 4fr; }
.colonnes41 { display : grid; grid-template-columns: 4fr 1fr; }
.colonnes31 { display : grid; grid-template-columns: 3fr 1fr; }
.colonnes21 { display : grid; grid-template-columns: 2fr 1fr; }
.colonnes32 { display : grid; grid-template-columns: 3fr 2fr; }
.colonnes23 { display : grid; grid-template-columns: 2fr 3fr; }
.colonnes122 { display : grid; grid-template-columns: 1fr 2fr 2fr; }
.colonnes212 { display : grid; grid-template-columns: 2fr 1fr 2fr; }
.colonnes221 { display : grid; grid-template-columns: 2fr 2fr 1fr; }
.colonnes211 { display : grid; grid-template-columns: 2fr 1fr 1fr; }
.colonnes121 { display : grid; grid-template-columns: 1fr 2fr 1fr; }
.colonnes112 { display : grid; grid-template-columns: 1fr 1fr 2fr; }
.colonnes311 { display : grid; grid-template-columns: 3fr 1fr 1fr; }
.colonnes131 { display : grid; grid-template-columns: 1fr 3fr 1fr; }
.colonnes113 { display : grid; grid-template-columns: 1fr 1fr 3fr; }
.colonnes2111 { display : grid; grid-template-columns: 2fr 1fr 1fr 1fr; }
.colonnes1211 { display : grid; grid-template-columns: 1fr 2fr 1fr 1fr; }
.colonnes1121 { display : grid; grid-template-columns: 1fr 1fr 2fr 1fr; }
.colonnes1112 { display : grid; grid-template-columns: 1fr 1fr 1fr 2fr; }

@media screen and (max-width: 768px) 
{
	.colonnesFormulaire
	{
		display:grid;
		grid-template-columns: 1fr;
	}
	.spanTitreFormulaire
	{
		grid-column: 1 / span 1;
	}
	
	.largeurContenu
	{
		width : 100%;
	}
	
	.positionLabelFormulaire
	{
		align-self: center;
		justify-self: start;
	}
	
	.positionLabelImgFormulaire
	{
		margin-top:5px;
		align-self: center;
		justify-self: start;
		align-items: center;
		justify-items: start;
	}
	
	.colonnesBoutonsActions
	{
		display : grid;
		grid-template-columns: 1fr;
	}
	
	.colonnesGrilleArticles
	{
		display:grid; 
		grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
		justify-content: center;
	}
	
	.colonnesGrilleBoutons
	{
		display : grid; 
		grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
	}
}
@media screen and (min-width: 769px) 
{
	.colonnesFormulaire
	{
		display:grid;
		grid-template-columns: 1fr 3fr;
	}
	.spanTitreFormulaire
	{
		grid-column: 1 / span 2;
	}
		
	.largeurContenu
	{
		width : 80%;
	}
	
	.positionLabelFormulaire
	{
		align-self: center;
		justify-self: end;
	}
	
	.positionLabelImgFormulaire
	{
		align-self: center;
		justify-self: end;
		align-items: center;
		justify-items: end;
	}
	
	.colonnesBoutonsActions
	{
		display : grid;
		grid-template-columns: 1fr 1fr;
	}
	
	.colonnesGrilleArticles
	{
		display:grid; 
		grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
		justify-content: center;
	}
	
	.colonnesGrilleBoutons
	{
		display : grid; 
		grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
	}
}

.surLigne1 { grid-row-start : 1; }
.surLigne2 { grid-row-start : 2; }
.surLigne3 { grid-row-start : 3; }
.surLigne4 { grid-row-start : 4; }
.surLigne5 { grid-row-start : 5; }

.surColonne1 { grid-column-start : 1; }
.surColonne2 { grid-column-start : 2; }
.surColonne3 { grid-column-start : 3; }
.surColonne4 { grid-column-start : 4; }
.surColonne5 { grid-column-start : 5; }

.prend1lignes { grid-row: span 1; }
.prend2lignes { grid-row: span 2; }
.prend3lignes { grid-row: span 3; }
.prend4lignes { grid-row: span 4; }
.prend5lignes { grid-row: span 5; }

.prend1colonnes { grid-column: 1 / span 1; }
.prend2colonnes { grid-column: 1 / span 2; }
.prend3colonnes { grid-column: 1 / span 3; }
.prend4colonnes { grid-column: 1 / span 4; }
.prend5colonnes { grid-column: 1 / span 5; }

.selfVerticalStretch { align-self: stretch; }
.selfVerticalCenter { align-self: center; }
.selfVerticalStart { align-self: start; }
.selfVerticalEnd { align-self: end; }

.selfHorizontalStretch { justify-self: stretch; }
.selfHorizontalCenter { justify-self: center; }
.selfHorizontalStart { justify-self: start; }
.selfHorizontalEnd { justify-self: end; }

.itemsHorizontalStretch { justify-items: stretch; }
.itemsHorizontalCenter { justify-items: center; }
.itemsHorizontalStart { justify-items: start; }
.itemsHorizontalEnd { justify-items: end; }

.itemsVerticalStretch { align-items: stretch; }
.itemsVerticalCenter { align-items: center; }
.itemsVerticalStart { align-items: start; }
.itemsVerticalEnd { align-items: end; }

.contentsVerticalStretch { align-content: stretch; }
.contentsVerticalCenter { align-content: center; }
.contentsVerticalStart { align-content: start; }
.contentsVerticalEnd { align-content: end; }
.contentsVerticalSpaceBetween { align-content: space-between; }
.contentsVerticalSpaceAround { align-content: space-around; }
.contentsVerticalSpaceEvenly { align-content: space-evenly; }

.contentsHorizontalStart { justify-content : start; }
.contentsHorizontalEnd { justify-content : end; }
.contentsHorizontalStretch { justify-content : stretch; }
.contentsHorizontalCenter { justify-content : center; }
.contentsHorizontalSpaceBetween { justify-content : space-between; }
.contentsHorizontalSpaceAround { justify-content : space-around; }
.contentsHorizontalSpaceEvenly { justify-content : space-evenly; }

.espacement5 { padding:5px; gap:5px; }
.espacement10 { padding:10px; gap:10px; }
.espacement20 { padding:20px; gap:20px; }
.espacement30 { padding:30px; gap:30px; }
.espacement40 { padding:40px; gap:40px; }
.espacement50 { padding:50px; gap:50px; }

.espacementVertical5 { padding-top:5px; padding-bottom:10px; gap:5px; }
.espacementVertical10 { padding-top:10px; padding-bottom:10px; gap:10px; }
.espacementVertical20 { padding-top:20px; padding-bottom:20px; gap:20px; }
.espacementVertical30 { padding-top:30px; padding-bottom:30px; gap:30px; }
.espacementVertical40 { padding-top:40px; padding-bottom:40px; gap:40px; }
.espacementVertical50 { padding-top:50px; padding-bottom:50px; gap:50px; }

.contenuCentrer
{
	display:grid;
	justify-items:center;
	align-items:center;
	text-align:center;
}

.textAlignDroite
{
	text-align:right;
}
.textAlignGauche
{
	text-align:left;
}
.textAlignCentre
{
	text-align:center;
}
.textAlignJustify
{
	text-align:justify;
}