html {
--text-color: #000;
--entete-color: #74FEDB;
--section-color: #E6FFF8;
--field-color: #75ffd9;
--pied-color : #ADD1FF;
--menutexte-color: #FFDDA6;
--titre_rub_color:#0b2686;
--background-bouton: linear-gradient(to bottom, #57b, #148);
box-sizing: border-box;
color: var(--text-color);
}
@import url('https://fonts.googleapis.com/css2?family=Diplomata+SC&display=swap');
body{
	width:98%;
	margin : auto;
	background : var(--section-color);
}
a{text-decoration:none;}
.header_article{
	display:flex;
	flex-direction:row ;
	justify-content: center;
  align-items: center;
	padding:2em 0 2em 0;
	font-family: 'Diplomata SC', cursive;
	width:95%;
	margin:auto;
	border-top-right-radius : 1em;
	border-top-left-radius : 1em;
	background : var(--pied-color);
	border-top: 2px solid var(--pied-color);
	border-left: 2px solid var(--pied-color);
	border-right:8px solid var(--pied-color);
}
section{
	background : var(--section-color);
	width:95%;
	margin:auto;
	border-left: 2px solid var(--pied-color);
	border-right:8px solid var(--pied-color);	
}
footer{
	background : var(--pied-color) ;
	text-align:center;
	width:95%;
	margin:auto;
	margin-bottom: 4em;
	border-bottom-right-radius : 1em;
	border-bottom-left-radius : 1em;	
	border-bottom: 2px solid var(--pied-color);
	border-left: 2px solid var(--pied-color);
	border-right:8px solid var(--pied-color);
}

.logo_site {font-size:200%;margin: 0 1em 0 1em}
.logo_site {width:40%;margin: 0 .1em 0 .1em;min-width:10rem;}
.logo_marque {width:30%;margin: 0 .1em 0 .1em;min-width:5rem}
img.marque_article{width:50%}
.nom_article{font-size:1.2rem;margin: 0 .1em 0 .1em}


/*
aside.article_pf{
	display:flex;
	flex-direction: column;
	width:20%;
}
.photo_article{
	display: flex;
	flex-direction: row;
}
aside.article_pf img{width:80%;margin:auto}

.photo_principale{width:80%;}

.photo_principale img{
	width:530px;
}
.photo_principale figure {
    border: thin #c0c0c0 solid;
    display: flex;
    flex-flow: column;
    padding: 5px;
    max-width: 530px;
    margin: auto;
}
.photo_principale figcaption {

    font: sans-serif;
    padding: 3px;
    text-align: center;
    max-width: 530px;
}






.photo_principale img{
	max-width :530px;
	width:80%;
	margin:auto;
	display:block;
	border: 6px double var(--pied-color)}
	
*/	
	
.photo_article{display:flex;width:80%;margin:auto;flex-direction:row;}
aside{display:flex;flex-direction:column}
.article_pf img{width:160px;}	
article.description_article{width:80%;margin:auto}	
.photo_principale{margin:auto}	
.pf{margin:.2rem}	
	
	
	
	
section.description_article{width:95%;margin:auto;}
.article_texte{text-align :center;}
/*tab_article*/
.bouton_art{display: flex;justify-content: center;}
.bouton_art .bouton {
	border: 0;
	font-size: 1rem;
	border-radius: 0.5em;
	background-image:var(--background-bouton );
	box-shadow: 0.1em 0.1em 0.5em #124;
	padding:.4em;
	margin:.2em;
	color : var(--menutexte-color);
}
.avertissement{text-align:center;margin:1rem 1rem 1rem 1rem;}
/*petit ecran*/
.btn1000{margin:.5rem;padding:.4rem;}
.nom1000{margin-right:.5rem;}
/*table grand ecran*/

table.table_grand_ecran{
	border:1px solid var(--text-color);border-collapse: collapse;margin:auto;
}
table.table_grand_ecran th,table.table_grand_ecran td{
	border:1px solid var(--text-color);
}
/*table_petit ecran*/
.table_petit_ecran{display:none;width:90%;margin:auto;text-align:centerpadding:1em;border :1px solid #000;text-align:center;}
}

/*footer
.container_footer
{
	display:flex;
	justify-content:center;
	flex-wrap: wrap;
}
.container_footer > div,.plan_site
{
	border: 0;
	font-size: 1rem;
	border-radius: 0.5em;
	background-image:var(--background-bouton );
	box-shadow: 0.1em 0.1em 0.5em #124;
	padding:.4em;
	margin:.2em;
}
.liste_sites >*,.plan_site>*{color : var(--menutexte-color);}
.plan_site{width : 10em;margin:auto;}
*/
.clear{
	clear:both;
}

input[type ="submit"]{
	border: 0;
	font-size: 1rem;
	border-radius: 0.5em;
	background-image:var(--background-bouton );
	box-shadow: 0.1em 0.1em 0.5em #124;
	padding:.4em;
	margin:.2em;
	color : var(--menutexte-color);	
}
.btn_cde_art{display:flex;flex-direction:row; justify-content:center;display:none;}
.form_en_ligne{text-align:center}
.bouton_art{
	/*display:none;*/
}
.ligne_cde,.ref_art{width:80%;margin:auto;text-align:center}


@media only screen and (max-width: 60em) {
	.photo_article{display:flex;width:98%;margin:auto;flex-direction:column;}
	aside{
		flex-direction:row;
	}
	.article_pf img{width:140px}
	/*.logo_site a{font-size:150%}
	.logo_marque a{font-size:100%}
		.table_grand_ecran{
		display:none;
	}
		.table_petit_ecran{
		display:block;
	}*/
	
}

@media only screen and (max-width: 50em) {
	article.description_article{width:100%}
	.description_article{
		width:95%;
	}
	.logo_site a{font-size:150%}
	.logo_marque a{font-size:100%}
		.table_grand_ecran{
		display:none;
	}
		.table_petit_ecran{
		display:block;
	}
	
}	


@media only screen and (max-width: 40em) {

	.photo_principale img{width:90%}
	.article_pf img{width:120px}
	.logo_site a{font-size:120%}
	.logo_marque a{font-size:80%}
	.nom_article{font-size:100%}
	figure{width:90%}
}