
	/*-------------------------------Grilles et tableaux-------------------------------------*/
	.container
	{
		display: grid;
		grid-template-columns: repeat(12,1fr);
		grid-template-rows:  auto;
        align-self: center;
	}
	.container_interne
	{
		grid-area: auto / 1 /auto / 13;
		display: grid;
		grid-template-columns: repeat(12,1fr);
		grid-template-rows:  auto;
        align-self: center;
	}
    .cadreCentre   /*ligne simple , sans grille */
	{
		grid-area: auto / 1 /auto / 13;
        align-self: center;  /*centrage vertical*/
        padding-bottom: 170px;
	}

    		
	.ligne   /*ligne simple , sans grille */
	{
		grid-area: auto / 1 /auto / 13;
	}
	.ligneCentreP
	{
		grid-area: auto / 1 /auto / 13;
		display: flex;
	}
	.ligneCentreE
	{
		margin: auto;
	}

    .ligneTitre   /* colonne centrale sur 6 cases */
	{
		grid-area: auto / 1 /auto / 13;
		display: grid;
		grid-template-columns: repeat(12,8.33%);
		grid-template-areas: "col1Tab col1Tab col1Tab col3Tab col3Tab col3Tab col3Tab col3Tab col3Tab col4Tab col4Tab col4Tab";
		align-items: center;

	}
	.lignePiedPage
	{
		grid-area: auto / 1 /auto / 13;
		display: grid;
		grid-template-columns: repeat(12,8.33%);
		grid-template-areas: "col1Tab col1Tab col1Tab col3Tab col3Tab col3Tab col3Tab col3Tab col3Tab col4Tab col4Tab col4Tab";
		align-items: center;
	}

	.ligneTab
	{
		grid-area: auto / 1 /auto / 13;
		display: grid;
		grid-template-columns: repeat(12,8.33%);
		grid-template-areas: "col1Tab col2Tab col3Tab col4Tab col5Tab col6Tab col7Tab col8Tab col9Tab col10Tab col11Tab col12Tab";
		align-items: center;
	}
	
	.ligneTab2Col /*2 cases*/
	{
		grid-area: auto / 1 /auto / 13;
		display: grid;
		grid-template-columns: repeat(2,50%);
		grid-template-areas: "col1Tab col2Tab";
		align-items: center;
	}

	.ligneTab3Col /*3 cases*/
	{
		grid-area: auto / 1 /auto / 13;
		display: grid;
		grid-template-columns: repeat(3,33.33%);
		grid-template-areas: "col1Tab  col2Tab  col3Tab";
		align-items: center;
	}

    .ligneTab4Col /*4 cases de largeur égale */
	{
		grid-area: auto / 1 /auto / 13;
		display: grid;
		grid-template-columns: repeat(4,25%);
		grid-template-areas: "col1Tab col2Tab col3Tab col4Tab";
		align-items: center;
	}

	.ligneTab5Col /*5 cases de largeur égale*/
	{
		grid-area: auto / 1 /auto / 13;
		display: grid;
		grid-template-columns: repeat(5,20%);
		grid-template-areas: "col1Tab col2Tab col3Tab col4Tab col5Tab";
		align-items: center;
	}

	.ligneTab6Col /*6 cases de largeur égale*/
	{
		grid-area: auto / 1 /auto / 13;
		display: grid;
		grid-template-columns: repeat(12,8.33%);
		grid-template-areas: "col1Tab col1Tab col2Tab col2Tab col3Tab col3Tab col4Tab col4Tab col5Tab col5Tab col6Tab col6Tab";
		align-items: center;
	}
	
	
	.ligneTab7Col /*7 cases de largeur égale*/
	{
		grid-area: auto / 1 /auto / 13;
		display: grid;
		grid-template-columns: repeat(7,14.28%);
		grid-template-areas: "col1Tab  col2Tab  col3Tab col4Tab  col5Tab col6Tab col7Tab";
		align-items: center;
	}
	.ligneTab8Col /*8 cases de largeur égale*/
	{
		grid-area: auto / 1 /auto / 13;
		display: grid;
		grid-template-columns: repeat(8,12.5%);
		grid-template-areas: "col1Tab col2Tab col3Tab col4Tab col5Tab col6Tab col7Tab col8Tab";
		align-items: center;
	}
	.ligneTab9Col /*9 cases de largeur égale*/
	{
		grid-area: auto / 1 /auto / 13;
		display: grid;
		grid-template-columns: repeat(9,11.1%);
		grid-template-areas: "col1Tab col2Tab col3Tab col4Tab col5Tab col6Tab col7Tab col8Tab col9Tab";
		align-items: center;
	}
	.ligneTab10Col /*10 cases de largeur égale*/
	{
		grid-area: auto / 1 /auto / 13;
		display: grid;
		grid-template-columns: repeat(10,10%);
		grid-template-areas: "col1Tab col2Tab col3Tab col4Tab col5Tab col6Tab col7Tab col8Tab col9Tab col10Tab";
		align-items: center;
	}
	.ligneTab11Col /*11 cases de largeur égale*/
	{
		grid-area: auto / 1 /auto / 13;
		display: grid;
		grid-template-columns: repeat(11,9.09%);
		grid-template-areas: "col1Tab col2Tab col3Tab col4Tab col5Tab col6Tab col7Tab col8Tab col9Tab col10Tab col11Tab";
		align-items: center;
	}
	.ligneTab12Col /*12 cases de largeur égale*/
	{
		grid-area: auto / 1 /auto / 13;
		display: grid;
		grid-template-columns: repeat(12,8.33%);
		grid-template-areas: "col1Tab col2Tab col3Tab col4Tab col5Tab col6Tab col7Tab col8Tab col9Tab col10Tab col11Tab col12Tab";
		align-items: center;
	}
	.ligneTab13Col
	{
		grid-area: auto / 1 /auto / 13;
		display: grid;
		grid-template-columns: repeat(13,7.69%);
		grid-template-areas: "col1Tab col2Tab col3Tab col4Tab col5Tab col6Tab col7Tab col8Tab col9Tab col10Tab col11Tab col12Tab col13Tab";
		align-items: center;
	}
	.ligneTab14Col
	{
		grid-area: auto / 1 /auto / 14;
		display: grid;
		grid-template-columns: repeat(14,7.14%);
		grid-template-areas: "col1Tab col2Tab col3Tab col4Tab col5Tab col6Tab col7Tab col8Tab col9Tab col10Tab col11Tab col12Tab col13Tab col14Tab";
		align-items: center;
	}

	.ligneTab15Col
	{
		grid-area: auto / 1 /auto / 15;
		display: grid;
		grid-template-columns: repeat(15,6.66%);
		grid-template-areas: "col1Tab col2Tab col3Tab col4Tab col5Tab col6Tab col7Tab col8Tab col9Tab col10Tab col11Tab col12Tab col13Tab col14Tab col15Tab";
		align-items: center;
	}


	.col1Tab
	{
		grid-area : col1Tab;
	}
	.col2Tab
	{
		grid-area : col2Tab;
	}
	.col3Tab
	{
		grid-area : col3Tab;
	}
	.col4Tab
	{
		grid-area : col4Tab;
	}
	.col5Tab
	{
		grid-area : col5Tab;
	}
	.col6Tab
	{
		grid-area : col6Tab;
	}
	.col7Tab
	{
		grid-area : col7Tab;
	}
	.col8Tab
	{
		grid-area : col8Tab;
	}
	.col9Tab
	{
		grid-area : col9Tab;
	}
	.col10Tab
	{
		grid-area : col10Tab;
	}
	.col11Tab
	{
		grid-area : col11Tab;
	}
	.col12Tab
	{
		grid-area : col12Tab;
	}
	.col11Tab
	{
		grid-area : col11Tab;
	}
	.col12Tab
	{
		grid-area : col12Tab;
	}
	.col13Tab
	{
		grid-area : col13Tab;
	}
	

	/*-------------------------------Grilles pour disposition de photos-------------------------------------*/
	/*---------------Grille 2 photos Paysage (L)----------*/
	/*---------------emplilées----------------------------*/
	.grille2L
	{
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		grid-gap: 0.5rem;
		margin: 0 auto;
	}
	
	.photo2L:nth-child(1)
	{
		grid-column: 1;
		
	}
	
	.photo2L:nth-child(2)
	{
		grid-column: 1;
		
	}
	
/*---------------Grille 3 photos Paysage (L)----------*/
/*---------------1 grande et 2 petites----------------*/
.grille3L
{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    margin: 0 auto;
}

.photo3L:nth-child(1)
{
    grid-column: span 4;
    grid-row: span 2;
}

.photo3L:nth-child(2),
.photo3L:nth-child(3)
{
    grid-column: span 2;
}

/*---------------Grille 3 photos 1 Paysage (L) 2 Portrait----------*/
/*---------------1 grande et 2 petites-----------------------------*/
.grille3LP
{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 0.5rem;
    margin: 0 auto;
}

.photo3LP:nth-child(1)
{
    grid-column: span 6;
    grid-row: 1 ;
}

.photo3LP:nth-child(2),
.photo3LP:nth-child(3)
{
    grid-column: span 3;
}

/*---------------Grille 4 photos Paysage (L)----------*/
/*---------------4 petites sur 1 ligne---------------*/
.grille4L
{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 0.5rem;
    margin: 0.5rem;
	height: 100%;
}

.photo4L:nth-child(1),
.photo4L:nth-child(2),
.photo4L:nth-child(3),
.photo4L:nth-child(4)
{
    grid-column: 1 2 3 4 ;
}

/*---------------Grille 4 photos Paysage (L)----------*/
/*---------------2 petites sur 2 ligne---------------*/
.grille4LP2
{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 0.5rem;
    margin: 0 auto;
}

.photo4LP2:nth-child(1)
{
    grid-column: 1 ;
}
.photo4LP2:nth-child(2)
{
    grid-column: 2 ;
}
.photo4LP2:nth-child(3)
{
    grid-column: 1 ;
}
.photo4LP2:nth-child(4)
{
    grid-column: 2 ;
}



/*---------------Grille 4 photos Paysage et Portrait en quinquonce----------*/
.grille4Type1
{
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-gap: 0.5rem;
    margin: 0 auto;
}
.photo4Type1:nth-child(1)
{
    grid-column: span 6 ;
}
.photo4Type1:nth-child(2)
{
    grid-column: span 3 ;
}
.photo4Type1:nth-child(3)
{
    grid-column: span 3 ;
}
.photo4Type1:nth-child(4)
{
    grid-column: span 6;
}

/*---------------Grille 4 photos Paysage et Portrait en quinquonce en miroir Type1----------*/
.grille4Type2
{
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-gap: 0.5rem;
    margin: 0 auto;
}
.photo4Type2:nth-child(1)
{
    grid-column: span 3 ;
}
.photo4Type2:nth-child(2)
{
    grid-column: span 6 ;
}
.photo4Type2:nth-child(3)
{
    grid-column: span 6 ;
}
.photo4Type2:nth-child(4)
{
    grid-column: span 3;
}



/*---------------Grille 5 photos Paysage (L)----------*/
/*---------------5 petites sur 1 ligne---------------*/
.grille5L
{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 1rem;
    margin: 0 auto;
}

.photo5L:nth-child(1),
.photo5L:nth-child(2),
.photo5L:nth-child(3),
.photo5L:nth-child(4),
.photo5L:nth-child(5)
{
    grid-column: 1 2 3 4 5;
}

/*---------------Grille 8 photos Paysage (L)----------*/
/*---------------4 petites sur 1 ligne---------------*/
/*---------------4 petites sur 1 autre en décalé ----*/
.grille8L
{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 250px [Line1] 250px [Line2] ;
    grid-gap: 0.5rem;
    margin: 0 auto;
}

.photo8L:nth-child(1)
{
    grid-column: 1 ;
    grid-row: 1 / 2; 
}
.photo8L:nth-child(2)
{
    grid-column: 2 ;
    grid-row: 1 / 2; 
}
.photo8L:nth-child(3)
{
    grid-column: 3 ;
    grid-row: 1 / 2; 
}
.photo8L:nth-child(4)
{
    grid-column: 4 ;
    grid-row: 1 / 2; 
}
.photo8L:nth-child(5)
{
    grid-column: 1 ;
    grid-row: 2 / 3; 
}
.photo8L:nth-child(6)
{
    grid-column: 2;
    grid-row: 2 / 3; 
}
.photo8L:nth-child(7)
{
    grid-column: 3 ;
    grid-row: 2 / 3; 
}
.photo8L:nth-child(8)
{
    grid-column: 4 ;
    grid-row: 2 / 3; 
}

/*---------------Grille 6 photos Paysage et Portrait en quinconce----------*/
.grille6Type1
{
    display: grid;
    grid-template-columns: repeat(15, 1fr);
    grid-gap: 0.5rem;
    margin: 0 auto;
}
.photo6Type1:nth-child(1)
{
    grid-column: span 6 ;
}
.photo6Type1:nth-child(2)
{
    grid-column: span 3 ;
}
.photo6Type1:nth-child(3)
{
    grid-column: span 6 ;
}
.photo6Type1:nth-child(4)
{
    grid-column: span 6;
}
.photo6Type1:nth-child(5)
{
    grid-column: span 3 ;
}
.photo6Type1:nth-child(6)
{
    grid-column: span 6 ;
}

/****************Tableaux responsive ****************************/
.table_responsive thead 
{
	display: none;
}
.table_responsive tr , .table_responsive td , .table_responsive th 
{
	display: inline-block;
	text-align: center;
}
.table_responsive td
{
	width: 100%;
}

.table_responsive td:before 
{
	content: attr(data-label);
	float: left;
	font-weight: bold;
	width: 50%;
}

.cadre_responsive
{
    display: block;
    width: 100%;
}

@media only screen and (min-width: 1024px)
{
	/****************Tableaux responsive***********************************/
	.table_responsive thead 
	{
		display: block;

	}

	.table_responsive td:before 
	{
		display: none;
	}

	.table_responsive .ligneTab3Col, 
	.table_responsive .ligneTab4Col, 
	.table_responsive .ligneTab5Col, 
	.table_responsive .ligneTab6Col,
	.table_responsive .ligneTab7Col,
	.table_responsive .ligneTab8Col,
	.table_responsive .ligneTab9Col,
	.table_responsive .ligneTab10Col, 
	.table_responsive .ligneTab11Col, 
	.table_responsive .ligneTab12Col, 
	.table_responsive .ligneTab13Col, 
	.table_responsive .ligneTab14Col,
	.table_responsive .ligneTab15Col
	{
		grid-area: auto / 1 /auto / 13;
		display: grid;
		width: 100%;
	}

	.cadre_responsive
	{
		display: grid;
	}

	/****************Fin Tableaux responsive********************************/
     
}



