html, body {
	height: 100%;
	margin: 0;
	padding: 0;
}

#page {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	display: flex;
	flex-direction: column;
}
@media screen and (orientation: landscape) {
	#bloc_principal {
		height: 100%;
		display: flex;
		flex-direction: row;
	}

	#bloc_gauche {
		height: 100%;
		width: 15%;
		background-color: #f4f2dd;
		display: flex;
  		flex-direction: column;
 	 	align-items: center;
  		justify-content: center;
  		gap: 10%;
	}

	.bouton-lien {
  		background-color: #A3DD86;
  		border-radius: 50%;
  		border: 0.5vh double #53A64E;
  		color: #000;
 		text-align: center;
  		font-size: 1.8vh;
  		font-weight: bold;
  		text-decoration: none;
 		padding: 3%;
 		width: 70%;
 	 	cursor: pointer;
}
	.bouton-lien:hover {
		background-color: #53A64E;
		border: 0.5vh double #C80000;
		transform: translate(0.2vw, 0.2vh);
}

	#bloc_droit {
		height: 100%;
		width: 85%;
		background-color: #fefceb;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	#img_accueil {
		height: 95%;
		max-width: 100%;
	}

	#bas_page {
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #9b9a99 ;
		z-index: 1;
	}

	#page_footer {
		display: flex;
		flex-direction: column;
}

	.credit {
	font-size: 0.5vh;
	color :  #fefce8;
	}
	
}

@media screen and (orientation: portrait) {
	#bloc_principal {
  		height: 100%;
		display: flex;
		flex-direction: column;
	}

	#bloc_gauche {
		height: 10%;
		width: 100%;
		background-color: #f4f2dd;
		display: flex;
  		flex-direction: row;
  		align-items: center;
  		justify-content: center;
 	 	gap: 10%;
	}

	#bloc_gauche .bouton-lien {
  		width: 25%;
 		height: 25%;
  		background-color: #A3DD86;
  		border: 0.5vh double #53A64E;
  		color: #000;
 		text-align: center;
  		font-size: 2vh;
  		font-weight: bold;
  		text-decoration: none;
  		cursor: pointer;
}
	#bloc_gauche .bouton-lien:hover {
		background-color: #53A64E;
		border: 0.5vh double #C80000;
		transform: translate(0.2vw, 0.2vh);
	}

	#bloc_droit {
		height: 90%;
		width: 100%;
		background-color: #fefceb;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center; 
	}
	#img_accueil {
		max-width: 100%;
	}
	#bas_page {
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #9b9a99 ;
		z-index: 1;
	}

	#page_footer {
		display: flex;
		flex-direction: column;
	}

	.credit {
		font-size: 0.5vh;
		color :  #fefce8;
	}
}