@media not all and (max-width: 600px) and (orientation: portrait) {

	body {
		max-width: 100%;
		font-size: 1em;
		background-color: lightgrey;
	}


	.grid {
		display : grid;
		margin: 5px;
		width: calc(100% - 10px);
  		grid-gap: 10px;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto 50px 450px auto auto;
		grid-template-areas: "titre titre"
				     "menuu menuu"
				     "liste recherche"
				     "avert avert"
				     "footer footer";
	}

	#titre {
		grid-area: titre;
		background-color: white;
		vertical-align: middle;
		padding: 10px;
	}

	#menu {
		display: flex; /* Utilisation de Flexbox pour aligner les boutons */
    		justify-content: space-between; /* Espacement entre les boutons */
		padding: 0 0 0 0;
		grid-area: menuu;
		background-color: white;
		font-weight: bold;		
		display: grid;
    		grid-template-columns: repeat(4, 1fr);
    		gap: 0px;
		vertical-align: middle;
	}



	#liste {
		grid-area: liste;
		overflow: scroll;
		background-color: white;
	}

	#recherche {
		padding-bottom: 20px;
		background-color: white;
		grid-area: recherche;
	}
	
	#avert {
		grid-area: avert;
		background-color: white;
		padding: 10px;
	}

	#footer {
		background-color: lightgrey;
		grid-area: footer;
	}

	#grid_upload {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}
	
	#grid_upload th, td {
		width: 120px;
		text-align: center;
	}
	
	#grid_upload h4 {
		margin-bottom: 5px;
	}

	#exemple_rbsr {
		text-align: center;
	}
	
	#exemple_rbsr table {
		margin: 0 auto;
	}

	#exemple_upb {
		text-align: center;
	}

	#exemple_upb table {
		margin: 0 auto;
	}

	#exemple_smnd {
		text-align: center;
	}

	#exemple_smnd table {
		margin: 0 auto;
	}
    	.boutup {
		width: 150px;
		margin-top: 20px;
	}
	
	h1 {
		margin:0 0 0 0;
		vertical-align: middle;
	}

	div, footer {
		padding: 5px 5px 5px 5px;
		margin: 0 0 0 0;
	}

	.center {
		text-align: center;
	}

        form {
            max-width: 400px;
            margin: 0 auto;
        }

        .form-group {
            display: flex;
            flex-direction: column;
            margin-bottom: 25px;
        }

        label {
            margin-bottom: 5px;
        }

        input[type="text"], select {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
	}
	
	.tdliste {
		width: 180px;
		text-align: left;
	}


	button {
		font-weight: bold;
    		padding: 5px 20px;
    		background-color: blue;
		color: white;
    		border: none;
    		cursor: pointer;
    		margin-top: 0px; /* Espacement au-dessus du bouton */
	}

	/* Changement de couleur au survol */
	button:hover {
    		background-color: #45a049;
	}
	
	.datbout {
		border: none;
		outline: none;
		background: none;
		cursor: pointer;
		color: #0000EE;
		padding: 0;
		font-family: inherit;
		font-size: inherit;
    		text-decoration: none;
	}
	
	/* Suppression du changement de couleur au survol pour les boutons .datbout */
	.datbout:hover {
    		background-color: transparent; /* Assurez-vous que la couleur de fond reste inchangée */
	}
	
	#boutsearch {

		margin-top: 40px;
	}
	
	#menu button {
		font-weight: bold;
		flex: 1; /* Chaque bouton prend une part égale de l'espace disponible */
		box-sizing: border-box;
    		width: 100%; /* Chaque bouton occupe toute la largeur de sa colonne */
    		height: 100%;
		padding: 0 0 0 0;
    		background-color: blue;
		color: white;
    		cursor: pointer;
    		text-align: center;
		margin: 0 0 0 0;
	}


	#menu form {
		flex: 1; /* Chaque bouton prend une part égale de l'espace disponible */
		box-sizing: border-box;
    		width: 100%; /* Chaque bouton occupe toute la largeur de sa colonne */
    		height: 100%;
		padding: 5px;
    		text-align: center;
		margin: 0 0 0 0;
	}


}






@media all and (max-width: 600px) {

	body {
		font-size: 0.7em;
		background-color: lightgrey;
		width: 100%;
	}


	.grid {
		display : grid;
  		grid-gap: 10px;
		grid-template-columns: 96%;
		grid-template-rows: auto 100px auto 400px auto;
		grid-template-areas: "titre"
				     "menuu"
				     "liste"
				     "recherche"
				     "avert"
				     "footer";
	}

	#avert {
		grid-area: avert;
		background-color: white;
		padding: 10px;
	}
	
	#titre {
		grid-area: titre;
		background-color: white;
		vertical-align: middle;
	}


	#menu {
		display: flex; /* Utilisation de Flexbox pour aligner les boutons */
    		justify-content: space-between; /* Espacement entre les boutons */
		padding: 0 0 0 0;
		grid-area: menuu;
		background-color: white;
		
		display: grid;
		grid-template-columns: repeat(2, 1fr); /* Crée 2 colonnes de taille égale */
    		grid-template-rows: repeat(2, 1fr);
    		gap: 0px;
		vertical-align: middle;
	}

	#liste {
		max-height: 450px;
		grid-area: liste;
		overflow: scroll;
		background-color: white;
	}

	#recherche {
		padding-bottom: 20px;
		background-color: white;
		grid-area: recherche;
	}

	#footer {
		background-color: lightgrey;
		grid-area: footer;
	}

	#grid_upload {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}
	
	#grid_upload th, td {
		width: 120px;
		text-align: center;
	}

	#grid_upload h4 {
		margin-bottom: 5px;
	}
	
	#exemple_rbsr {
		text-align: center;
	}
	
	#exemple_rbsr table {
		margin: 0 auto;

	}

	#exemple_upb {
		text-align: center;
	}

	#exemple_upb table {
		margin: 0 auto;
	}

	#exemple_smnd {
		text-align: center;
	}
	
	#exemple_smnd table {
		margin: 0 auto;
	}

    	.boutup {
		font-size: 0.7em;
		width: 110px;
		margin-top: 10px;
	}

	h1 {
		margin-top: 0px;
	}
	
	div, footer {
		padding: 5px 5px 5px 5px;
		margin: 0 0 0 0;
	}

	.center {
		text-align: center;
	}

        form {
            max-width: 400px;
            margin: 0 auto;
        }

        .form-group {
            display: flex;
            flex-direction: column;
            margin-bottom: 25px;
        }

        label {
            margin-bottom: 5px;
        }

        input[type="text"], select {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
	}
	
	.tdliste {
		width: 150px;
		text-align: left;
	}

	button {
		font-weight: bold;
    		padding: 5px 20px;
    		background-color: blue;
		color: white;
    		border: none;
    		cursor: pointer;
    		margin-top: 0px; /* Espacement au-dessus du bouton */
	}

	/* Changement de couleur au survol */
	button:hover {
    		background-color: #45a049;
	}
	
	#boutsearch {

		margin-top: 40px;
	}
	
	.datbout {
		border: none;
		outline: none;
		background: none;
		cursor: pointer;
		color: #0000EE;
		padding: 0;
		font-family: inherit;
		font-size: inherit;
    		text-decoration: none;
	}
	
	/* Suppression du changement de couleur au survol pour les boutons .datbout */
	.datbout:hover {
    		background-color: transparent; /* Assurez-vous que la couleur de fond reste inchangée */
	}

	#menu button {
		font-weight: bold;
		flex: 1; /* Chaque bouton prend une part égale de l'espace disponible */
		box-sizing: border-box;
    		width: 100%; /* Chaque bouton occupe toute la largeur de sa colonne */
    		height: 100%;
    		background-color: blue;
		color: white;
		padding: 0 0 0 0;
    		cursor: pointer;
    		text-align: center;
		margin: 0 0 0 0;
	}	

	#menu form {
		font-weight: bold;
		flex: 1; /* Chaque bouton prend une part égale de l'espace disponible */
		box-sizing: border-box;
    		width: 100%; /* Chaque bouton occupe toute la largeur de sa colonne */
    		height: 100%;
		padding: 4px;
    		text-align: center;
		margin: 0 0 0 0;
	}

}


#menu select {
    	background-color: blue;
	color: white;
}

#menu select.boutmenu {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    font-weight: bold;
    flex: 1;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    cursor: pointer;
    text-align: center;
    margin: 0;
    background-color: blue;
    color: white;
    border: none;
    border-radius: 0;
    text-decoration: none;
}

#menu select.boutmenu:focus {
    outline: none;
}

#menu select.boutmenu option {
    text-align: center;
}

#menu select option {
	display:inline-block;
}