body {
    	font-family: 'Papyrus';
	background-color:     #fefaef  ;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin: 0;
	padding: 0;
}

/************************************************/
/******************styles généraux **************/
/************************************************/
main {
	min-height: 100vh;
	flex: 1;
	padding: 0;
	border: solid  #ded1b1 ;
}

table {
	margin: auto;
	font-size: large;
    text-align: center;
    font-weight: bold;
}
table tr td {
    font-size: large;
}
table ul li {
   	    list-style-type: none;
   	    font-size: large;
   	    font-weight: bold;
 
}

h1 , h2,table{
	text-align: center;
}

.article_2col {
	display: flex;
	justify-content: center;
}
article {
	min-height: 150px;
    width: 95%;
    margin: 10px auto;
    /*font-family: 'Comic Sans Ms';*/
    font-size: large;
    border: 10px solid;
    border-image: linear-gradient(to bottom,#eedaab , #fefaef ) 1; /* Dégradé de couleur vertical */
    border-image-slice: 10; /* Épaisseur du dégradé */
    font-weight: bold;
}
.texte_article {
	width: 80%;
	margin: auto;
}

div img {
	max-width: 100%;
}

@media(max-width: 768px) {
	article {
		width: 100%;
		margin: 0px ;
	}
}



/* il me semble que c'est pour les 3 étiquettes "pommes"*************/
.image-container {
        display: flex; /* Utilisation de flexbox pour aligner les images */
       justify-content: center; /* Centre horizontalement les images */
       height: 200px;
}

.image-container img {
      margin: 0 10px; /* Espacement entre les images */
      max-width: 90%; /* Ajuste la largeur des images au conteneur */
}
/*  fin des pommes *********************************************/

@font-face  {
    font-family: 'Aller';
    src: url('../polices/Aller/Aller_Lt.ttf');
}
@font-face {
	font-family: 'Papyrus';
	src: url('../polices/Papyrus/papyrus.ttf');
}

/**********************************************/
/***************** header**********************/
/**********************************************/
header {

}
   #header_container {
            position: relative;
            width: 100%; /* Ajuste la largeur selon tes besoins */
	    height: 250px;
        }

   #header_image {
            width: 95%;
	    margin: auto;
	    height: 250px;
            display: block;
        }
 #header_text {
            position: absolute;
            bottom: 0;
            width: 100%;
	    margin:auto;
            padding: 5px;
            text-align: center;
            box-sizing: border-box;
    font-family: 'Papyrus';
    font-size: 30pt;
    text-align: center;
    font-style: oblique;
    font-weight: bold;
    letter-spacing: 30px;
    background-color: rgba(255, 255, 250, 0.5); /* Rouge avec 50% d'opacité */
}

@media(max-width: 768px) {
	#header_text {
		font-size: 18pt;
	}
	#header_container {
		height: 200px;
	}
	#header_image{
		width: 100%;
		height: 200px;
	}
}
#header_menu {
}
#header_menu ul {
    width: 90%;
    font-family: 'Comic Sans Ms';
    text-align: center;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
}
@media(max-width: 768px) {
	#header_menu {
		font-size: small;
	}
}
#header_menu li {
    margin: auto;
    list-style-type: none;
    text-align: center;
    font-style: italic;
    font-weight: bold;
    /*
    width: 30%;
     */
}

/************************************************/
/***************** fin du header ***************/


/**********diaporama***************/
* Styles précédents et suivants */
.prev, .next {
    cursor: pointer;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 100px;
    transition: 0.6s ease;
    border-radius: 0 30px 30px 0;

}

.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* Autres styles restent les mêmes que précédemment */
.slideshow-container {
    max-width: 800px; /* Ajuste la largeur du diaporama */
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media(max-width: 768px) {
	.slideshow-container {
		max-width: 90%;
	}
}

.slide {
    display: none;
}

img {
    max-width: 100%;
    margin: auto;
    height: auto;
}

.fade {
    animation-name: fade;
    animation-duration: 2s; /* Durée de la transition */
}

@keyframes fade {
    from {
        opacity: 0.4;
    }
    to {
        opacity: 1;
    }
}

/*********fin du diaporama *************/
/**************************************/
/************formulaire****************/
.form_container {
	background-color:  #feeec8 ;
	border: 1px solid blue;
	padding: 20px;
	max-width: 800px;
	margin: 0 auto;
	font-size: normal;
}

form {
	text-align: center;
}

form div {
		display: flex;
    		flex-direction: column;
	}
form div label {
	margin: 5px;
}

@media(max-width: 768px) {
	form {
		/*font-size: small;*/
	}
	

}

#adresse_rue {
	float: right;
	min-width: 50%;
	margin-right: 0;
}
#code_postal {
	margin-right:0;
	float: right;
	align: right;
}
#ville {
	text-align: right;
	float: right;
}
#commentaire_commande {
	width: 80%;
	height: 50px;
}
/**********************************************************/
/**********fin du formulaire*******************************/
/************footer***************************************/
footer {
	/*position: absolute;*/
	background-color: #f2f2f2;
	padding: 10px 0;		
	/*bottom: 0;
	right: 0;
	width: 100%;*/
}
#coordonnees {
	text-align: center;
	font-size: x-small;
}