/*
.article1_page1{
	display:grid;
	grid-template-columns: [photo] 20fr [centre] 1fr [article] 4fr [end] 1fr [marge];
}
.im_page1{
	grid-column: photo ;
	margin-top:2rem;
}
.im_page1 img {
	width:90%;
	margin-left:5%
}
.dessus{
	width:90%;
	margin:auto;
	color:#000;
	background: var(--entete-color);
	text-align:center;
	position:relative;
	top:-2em;
	mix-blend-mode:hard-light;
}
.articles_pour_page1{
	grid-column: article;
	text-align:center;
}
.articles_pour_page1 img{
	width:100%;
}
.img_atelier{
	width:100%;
}
.texte_page1{
	display:flex;
}
*/

.articles_pour_page1{
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:center;
	align-content:center;
	gap:1rem 1rem;
	justify-content:space-around
}
.titre_art{
	flex-basis:18%;
	text-align:center;
	border:1px solid #888;
	border-radius:1rem;
	box-shadow: 10px 5px 5px #aaa;
}
.titre_art img{width:95%}
.photo_gene{
	display:flex;
	flex-direction:column;
	width:70%;margin:.4rem;
	float:left;min-width: 200px;
}
.dessus{
	width:98%;
	color:#000;
	background: var(--pied-color);
	text-align:center;
	position:relative;
	top:-1rem;
	mix-blend-mode: normal;
}
.img_atelier{
	width:98%;}
}

.liste_sites >*,.plan_site>*{
	color : var(--menutexte-color);
}
.plan_site
{
	width : 10em;
	margin:auto;
}
.image_article img{
	margin:1em;float:left
}
.barre{text-decoration:line-through;}
.form_en_ligne input{border:1px solid #d7d2d2;background:var(--setion-color)}
.form_en_ligne .sub1{border:1px solid #d7d2d2;background:var(--background-bouton)}
.form_field,.date_resa{display: inline-block;background :var(--field-color);font-weight:bold;margin:1em;padding:1em;}
.choix_date .hasDatepicker{
	background:white;
}
table.tableau_resa,.tableau_resa th,.tableau_resa td{border-collapse:collapse;border:1px solid #aaa}
table.tableau_commande,.tableau_commande th,.tableau_commande td{border-collapse:collapse;border:1px solid #aaa;}
table.tableau_resa,table.tableau_commande{margin : 1em; border-collapse: collapse;}

.titre_art{position:relative}
.over {
 color: #f00;
 font-size: 30px;
 line-height: 1.5em;
 text-shadow: 2px 2px 2px #000;
 text-align: center;
 position: absolute;
 top: 50%;
 left: 0%;
 transform: translate(-50%, -50%);
 width: 100%;
	transform: rotate(25deg);
}
@media only screen and (max-width: 60em) {
	.titre_art{flex-basis:22%;}
	.photo_gene{width:60%;}
}
@media only screen and (max-width: 50em) {
	.titre_art{flex-basis:30%;}
	.photo_gene{width:50%;}
}
@media only screen and (max-width: 40em) {
	.titre_art{flex-basis:48%;}
}