@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
 /*/GENERALE////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

	body {
        font-family: 'Montserrat', sans-serif;
		margin: 0;
        padding: 10px;
        background-color: #ffffff;
		display: flex;
		justify-content: center;  /* Centre horizontalement le contenu */
		/*align-items: center;*/      /* Centre verticalement le contenu */
	}
	.container {
		position: relative;
		display: flex;
		width: 100%;              /* Prend toute la largeur disponible */
		max-width: 1290px;          /* Limite la largeur maximale à 800px */
		padding: 15px;             /* Ajoute un peu de marge intérieure (facultatif) */
		box-sizing: border-box;    /* Inclut le padding dans la largeur totale */
		background-color: #f4f4f4; /* Fond pour mieux visualiser la zone (facultatif) */
		justify-content: center;  /* Centre horizontalement le contenu */
        border-radius: 10px;
		flex-direction: column;	
	}
	h1 {
        text-align: left;
		font-size: 1.6em;
        margin: 0 0 0px 0;
    }
    h2 {
        text-align: left;
		font-size: 1.3em;
		color: #041e75;
        margin: 0 0 8px 0;
    }
    h3 {
        text-align: left;
		font-size: 1.1em;
		color: #a30d00;
        margin: 10px 0 5px 0;
	}
    h4 {
        text-align: left;
		font-size: 1em;
		color: #a30d00;
        margin: 10px 0 5px 0;
	}
	.no-underline {
		text-decoration: none;
	}
	form {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
	}
	label {
        font-weight: bold;
        margin-top: 10px;
        display: block;
    }
    input[type="text"] {
        width: 96%;
		font-size: 1.2em;
		height: 20px;
        padding: 10px;
        margin: 5px 0px;
        border-radius: 5px;
        border: 1px solid #ccc;
    }
	select {
		width: auto;
        padding: 10px;
        margin: 5px 0px;
        border-radius: 5px;
        border: 1px solid #ccc;
		box-sizing: border-box; /* Optionnel */
	}
    input[type="submit"], button {
		background-color: #28a745;
        color: white;
        padding: 8px 10px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 0.9em;
        display: block;
        width: 100%;
		margin: 5px 0px;
    }
	.BoutonLien {
		text-decoration: none;		
	}
	#printButton {
		width: auto;
		position: absolute; /* Le bouton reste en place même quand on fait défiler la page */
		top: 11px; /* Distance par rapport au haut de la page */
		right: 20px; /* Distance par rapport à la droite de la page */
		padding: 8px 8px; /* Un peu de padding pour rendre le bouton plus visible */
		background-color: #4CAF50; /* Couleur du bouton */
		color: white; /* Couleur du texte du bouton */
		border: none; /* Enlever les bordures */
		border-radius: 5px; /* Bordures arrondies */
		cursor: pointer; /* Changer le curseur en pointeur pour indiquer qu'il est cliquable */
		font-size: 0.8em; /* Taille du texte */
		z-index: 1000; /* Le bouton sera au-dessus du reste du contenu de la page */
	}
	input::placeholder {
		color: #d7d7d7; /* Remplace #999 par la couleur que tu souhaites */
		opacity: 1;  /* Assure que l'opacité est à 100% si nécessaire */
	}
	
    .radio-group {
        display: flex;
        margin: 0px 0px 20px 0px;
    }
    .radio-group input[type="radio"] {
        margin-top: 10px;
		margin-right: 5px; /* Espace entre le bouton et le libellé */
        margin-left: 20px; /* Pas d'espace à gauche */
    }
    .radio-group label {
        font-weight: normal; /* Enlève le gras */
    }
	table {
		width: 100%;
		border-collapse: collapse;
	}
	th, td {
		padding: 2px 5px;
		text-align: left;
		border: 0px solid #ccc;
		font-size: 0.9em;
	}
	th {
		background-color: #f2f2f2;
	}
	tr:nth-child(even) {
		background-color: #ffffff;
	}
	ul {
		margin: 0;
	}
	li {
		padding: 2px;
		font-size: 0.9em;
	}
	
	
	@media print {
		@page {
          /*size: A4 landscape; /* Format A4 en paysage */
          margin: 10px; /* Marges à 0 pour plus de contrôle */
        }

        body {
			margin: 0 0 0 10mm;
			padding: 0;
			display: flex;
			justify-content: flex-start; /* Positionne le contenu à gauche */
			align-items: flex-start;
			height: 100vh; /* Occupe toute la hauteur de la page */
        }

        /* Zone de contenu limitée à la moitié gauche de la page */
        .left-half {
			width: 50%; /* 50% de la largeur de la page */
			height: 100%; /* Prend toute la hauteur */
			box-sizing: border-box; /* Inclure les bordures/padding dans la largeur/hauteur */
			padding: 20px; /* Ajoute un peu de marge interne */
			border-right: 1px solid #000; /* Optionnel : ligne de séparation à droite */
        }
		/* Masquer certains élément pendant l'impression */
		.noPrint {
			display: none !important;
		}
	}
	
	
	.lien_recette {
		margin-top: 30px;
	}
    .message-confirmation {
		font-weight: normal;
		background-color: #003480;
		opacity: 0.7;
		color: white;
		text-align: center;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 60%;
		padding: 10px;
		border-radius: 5px;
		font-size: 16px;
		z-index: 9999; /* Assure que le message est au-dessus des autres éléments */
		display: none; /* Cacher par défaut */
    }

	/* Styles de la modale */
	.modal {
		display: none; /* Caché par défaut */
		position: fixed; /* Reste en place */
		z-index: 1; /* Au-dessus des autres éléments */
		left: 0;
		top: 0;
		width: 100%; /* Pleine largeur */
		height: 100%; /* Pleine hauteur */
		overflow: auto; /* Scroll si nécessaire */
		background-color: rgb(0,50,0); /* Couleur de fond */
		background-color: rgba(0,0,0,0.4); /* Couleur de fond avec opacité */
	}
	.modal-content {
		background-color: #fefefe;
		margin: 15% auto; /* 15% de haut et centré */
		padding: 20px;
		border-radius: 8px;
		border: 1px solid #888;
		width: 85%; /* Largeur */
	}
	.close {
		color: #aaa;
		z-index: 1; /* Au-dessus des autres éléments */
		float: right;
		font-size: 32px;
		font-weight: bold;
	}
	.close:hover,
	.close:focus {
		color: black;
		text-decoration: none;
		cursor: pointer;
	}

	.notification {
		display: none;
		position: absolute; /* Permet de positionner l'élément en superposition */
		top: 50%;
		left: 50%;
		width: max-content;
		max-width : 90%;
		transform: translate(-50%, -50%);
		padding: 15px;
		text-align: center;
		background-color: #1e578d;
		color: white;
		opacity: 0.7;
		border-radius: 5px;
	}

/*/maj_ingredients_ajout.php////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

	.url_ajout {
		display: flex;
		align-items: center; 
		justify-content: space-between; 
		margin-bottom: 0px;
		width:100%;
	}
	.url_ajout button {
		width:30%;
		margin-left: 10px;
    }

/*/maj_plat.php////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
    
    .ingredient-container {
        width:100%;
		margin-top: 15px;
    }
	
	/*Bouton d'ajout des ingrédents*/
	.add-ingredient {
        padding: 8px 20px;
		width: auto;
        background-color: #007bff;
        color: white;
        cursor: pointer;
        border-radius: 5px;
        font-weight: bold;
        border: none;
		margin-right: 12px;
    }
/*   .ingredient-item {
        display: flex; /* Affiche le champ et le bouton en ligne *
        align-items: center; /* Aligne verticalement au centre *
        margin-bottom: 0px; /* Espace entre les éléments *
    }
/*    .ingredient-item input[type="text"] {
		flex: 1; /* Permet au champ d'ingrédient de prendre l'espace restant *
        margin-right: 0px; /* Espace entre le champ et le bouton *
    }*/
	.ingredient-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .ingredient-header h2 {
        font-size: 1.2em;
		margin: 0;
    }
    .ingredient-header button {
        margin-left: auto; /* Aligner le bouton "+" à droite */
    }

/*/menus.php////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

	.menu_actions {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center; 
		justify-content: space-between; 
		margin-bottom: 10px;
		width:100%;
	}
    .date_inputs {
        display: flex;
        gap: 0px;
		align-items: center;
		margin: 10px 0 0 0;
    }
	.menu_actions-button {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center; 
		margin-bottom: 10px;
		width:100%;
	}
	.menu_actions-button button {
		width: max-content;
		margin-left: 10px;
		padding: 15px 15px;
		font-size: 0.9em;
    }
	.menu_actions-button a {
		text-decoration: none;
	}
	.lib_date {
		font-size: 0.8em;
		margin : 0 5px 0 10px;
	}
	.choix_date {
		padding: 3px;
		margin : 0 5px 0 0;
	}
	
	.suppr {
		background-color: #FF0000;
        width: 45px;
		margin-left: 5px;
		padding: 12px 15px;
	}
	.update {
		background-color: #28a745;
        width: 45px;
		margin-left: 5px;
		padding: 12px 15px;
	}

	tr.repas {
		display: flex;
	    position: relative; /* Permet de positionner la boîte de suggestions relativement à ce conteneur */
		align-items: center; 
		width: 100%;
	}		
	td.repas-container {
		display: flex;
	    position: relative; /* Permet de positionner la boîte de suggestions relativement à ce conteneur */
		align-items: center; 
		width: 100%;
	}
	td.date-container {
		display: flex;
		align-items: center; 
		width: 30%;
	}
	.suggestions {
		border: 1px solid #ccc;
		position: absolute; /* Positionne la boîte de suggestions par rapport au parent avec "position: relative" */
		background-color: white;
		z-index: 100;
		max-height: 200px;
		overflow-y: auto;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
		display: none; /* Caché par défaut */
		top: 80%; /* Aligne le bas de la boîte de suggestions avec le bas du champ d'entrée */
		left: 0;
		width: 90%; /* Faire correspondre la largeur de la boîte de suggestions avec le champ d'entrée */
	}
	.suggestions div {
		padding: 10px;
		cursor: pointer;
	}
	.suggestions div:hover {
		background-color: #f0f0f0;
	}

/*/liste-plats.php////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

	.ingredient-list {
		margin-left: 20px; /* Décale les ingrédients sous le plat */
	}
	.filter-container {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center; 
		justify-content: space-between;
		margin-bottom: 0px;
		width:100%;
		margin-bottom: 20px;
	}
	.filter-group label {
		font-size: 0.8em;
		margin-left: 4px;
	}
	.filter-group select {
		padding: 3px 10px;
	}
	.filter-group input {
		padding: 3px 10px;
	}

/*/menus_print.php////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

	.table-menu {

	}

	.date-title {
		font-weight: bold;
		font-size: 0.8em;
		text-align: center;
		width: 13%;
		border: 1px solid #000000;
	}
	.case-menu {
		font-weight: normal;
		font-size: 0.8em;
		text-align: center;
		height: 90px;
		background-color: white;
		border: 1px solid #000000;
	}
	.case-jour {
		background-color: #f2f2f2;
		width: 9%;		
		border: 1px solid #000000;		
	}
	.menu-actions {
		margin-bottom: 20px;
	}
	.liste-courses {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
	}
	.col-liste {
		width: 50%;
		height:100%;
	}
	.liste-vide {
		margin: 0px 30px 0 0;
		width: 90%;
		height: 100%;
		background-color: #ffffff;
	}
	.liste-vide td {
		border-bottom: 1px solid #ccc;
	}

	@media print {
		.col-liste {
			width: 50%;
			height:65vh;
		}
		.liste-vide {
			margin: -20px 30px 0 0;
			width: 90%;
			height: 100%;
			background-color: #ffffff;
		}
		.liste-vide td {
			border-bottom: 1px solid #ccc;
		}
	}

/*////////////////////////////////////////////////////////////////////////////////////////////////liste-ingredients.php///*/
	.header-liste_ingredients {
        display: flex;
        justify-content: space-between;
        align-items: center;
		margin: 0 0 20px 0;
	}
	.header-liste_ingredients h1 {
		white-space: nowrap;
		margin: 0 50px 0 0;
	}
	.new-ingredient {
		padding: 10px;
		background-color: #d7d7d77d;
		display: flex;
		flex-direction: column;
		gap: 2px; /* Espace entre les éléments */
		margin : 0 0 20px 0;
	}

	.new-ingredient label {
		display: block;
		margin: 0; /* Espace sous le label */
	}
	.new-ingredient button {
		width: auto;
		padding: 0 20px 0 20px;
		display: inline-block;

	}
	.col_index {
		font-size: 0.5em;
	}
	.ingredient-rayon {
		display: flex;
		gap: 2px; /* Espace entre le champ "nouvel ingrédient" et "new_rayon" */
		margin: 0;
	}

	.url-submit {
		display: flex;
		gap: 10px; /* Espace entre le champ URL et le bouton */
	}
	#url_liste {
		font-size:0.75em;
	}


//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/*    @media (max-width: 768px) {
        .container {
            margin: 10px 20px 5px 20px;
        }
    }
*/