/* valeurs par défaut modifiables dans les sections suivantes */

/* svp, ne touchez jamais aux valeurs par défaut, merci       */


section.s-overflow /*	div spéciale pour scroller en x ou y */
{
overflow-x: auto;
overflow-y: auto;
}
div.float-left 
{
float: left;
padding: 1rem;
width: 49%;
box-sizing: border-box;
}					
div.float-right
{
float: right;
padding: 1rem;
width: 49%;
box-sizing: border-box;
}
div.float-left img
, div.float-right img
{
width: 100%;
height: auto;
}
div.float-stop
{
clear: both;
}
div.float-fin::after
{
content: '';
clear: both;
}
div.grille-defaut
{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
div.grille-defaut figure
{
margin: 0.5rem;	/*	margin des colonnes, donne donc 1rem MINIMUM (0.5rem + 0.5rem) entre 2 colonnes*/
text-align: center;	/* pour centrer l'image et le texte dans la colonne */
width: 140px;	/* 	la largeur minimum est de 100px mais cela dépend de l'icone ou de l'image,
					du texte à afficher, un titre simple en petit font size, va entrer dans 100px
					on fonctionne en px fixe ici, PAS DE POURCENTAGE*/
/*width: 270px;	/*	la largeur MAXIMUM pour les cellulaires est de 320px en comptant les marges
					ce qui donne donc un grand maximum de 270px par colonne (1rem = +/- 10px)
					car il faut compter les marges des conteneurs de la grille fixée au minimum à 1rem
					il est désagréable de refaire tout le style quand il ne répond pas aux limites...*/
}
div.grille-defaut img	/* 	il n'est d'usage d'utiliser une image plus grande que 270px dans le flex pour
					avoir un responsive convenable, il faut utiliser un autre modèle si nous avons
					des images plus larges que 270px, on fonctionne en px fixe ici, PAS DE POURCENTAGE*/
{

}
div.grille-defaut figcaption	/* 	figcaption hérite de son parent figure. En remettant ici le texte à gauche
						il n'y aura que l'image centrée dans la colonne
						on fonctionne en px fixe ici, PAS DE POURCENTAGE*/
{
text-align: left;
}

table.table-defaut
{
border: 1px solid black;
width: 100%;	
}
table.table-defaut th /* header, titre */
{
border-bottom: 1px solid grey;
text-align: left;
vertical-align: middle;
padding: 8px 15px;
}
table.table-defaut td /* data, cellule */
{
border-bottom: 1px solid grey;
padding: 8px 15px;
}
table.table-defaut td img	/* image dans le cellule */
{
width: 100%;
max-width: 270px;
max-height: 200px;
}
/**************************************************************************************************/

/* Dans cette section, vous avez un canevas css de base, prendre une copie et coller à la fin dans l'ordre des pages et des positions */

/* Toutes les sections de la home de m01 à m99, chaque page du menu a une centaine, le premier est m101, le deuxième est m201 etc...       */

/* nom de la page et ou de la position en tête du css */
/******************************************************/
section.m00
{
padding: 1rem;
}
section.m00 header
{

}
section.m00 header h1
{

}
section.m00 header hr
{
width:50%;
margin: 0 auto;
color: pink;
}
/******************************************************/
div.float00
{
/*border: 2px solid pink;		*/
/*background-color: pink;		*/
}
div.float00 div.float-left 
{
/*padding: 1rem;	*/
/*width: 49%;		*/
}					
div.float00 div.float-right
{
/*padding: 1rem;	*/
/*width: 49%;		*/
}

div.float00 div.float-left img
, div.float00 div.float-right img
{
/*max-width: 100%;		*/
/*max-height: 100%;		*/
}
/******************************************************/
div.grille00
{

}
div.grille00 figure
{
/*margin: 0.5rem;		*/
/*text-align: center;	*/ 
/*width: 140px;			*/ 
}
div.grille00 img
{

}
div.grille00 figcaption	
{
/*text-align: left;		*/
}
/******************************************************/
table.table00
{
/*border: 1px solid black;		*/
/*border-collapse: collapse;	*/
/*border-collapse: separate;	*/
/*border-spacing: 10px 50px;	*/
/*empty-cells: hide;			*/
/*table-layout: fixed;			*/
/*width: 100%;					*/
}
table.table00 tr /*	row, ligne 	*/
{

}
table.table00 tr:nth-child(even) /* OU odd */
{
/*background-color: yellow		*/
}
table.table00 tr:hover
{
/*background-color: green;		*/
}
table.table00 tr.ligne00 /*	si nous avons une ligne particulière que nous désirons styliser */
{
	
}
table.table00 th /* header, titre 	*/
{
/*border-bottom: 1px solid grey;	*/
/*border: 1px solid black;			*/
/*height: 50px;						*/
/*text-align: left;					*/
/*vertical-align: middle;			*/
/*padding: 8px 15px;				*/
/*background-color: blue;			*/
/*color: white;						*/
}
table.table00 td /* data, cellule */
{
/*border-bottom: 1px solid grey;	*/
/*border: 1px solid black;			*/
/*height: 30px;						*/
/*text-align: center;				*/
/*vertical-align: bottom;			*/
/*padding: 8px 15px;				*/
}
table.table00 td img	/* image dans le cellule, on ne dépasse pas 270px pour le responsive */
{
/*width: 100%;				*/
/*max-width: 270px;			*/
/*max-height: 200px;		*/
}
table.table00 td.cell00 /*	si nous avons une cellule particulière que nous désirons styliser */
{
/*padding: 0;				*/
/*width: 270px;				*/
/*max-width: 270px;			*/
}
/******************************************************/

/***********************************  mentions légales - politique de confidentialité - Conditions générales de vente *****************************/
div.legal
{
padding: 1rem;	/*	padding par défaut */
}

/*	la div h00 sert au titre si on a besoin de plusieurs balises dans la partie titre, sinon la h seule*/

div.legal h1
{
font-size: ;
line-height: ;/*	<= font-size + padding */
}
div.legal h2
{

}
div.legal hr
{
width:50%;
margin: 0 auto;
color: pink;
}
/************************************************************************************************************
			V o t r e		c o d e		v a		à	p a r t i r		d ' i c i			
Prenez une copie du modèle00 m00 float00 grille00 table00 etc... et copiez le code ici à la fin
Incrémentez le modèle m01 float01 etc... aux noms de balises de votre copie et codez
/****************************************************************************************************************/
section.m00
{
padding: 1rem;
}