html,body{width: 100%; height: 100%; overflow: hidden; margin:0;overflow-y: scroll;}
	.conteneur{width: 100%; height: 100%;}
	.balises{background-color: white; }
	img{transform: scale(0.7);}
	img.panier{transform: scale(0.6);}
	.scroller{height: 100%;overflow-y: scroll; scrollbar-color: blue lightblue; scrollbar-width: auto;}
	table.cours td{
    padding: 1px;
    text-align: center;
    vertical-align: middle;
    color: #003399;
	}
	h4{color : blue;}
	/* Extra small devices (phones, 600px and down) */
	@media only screen and (max-width: 600px) {
		body{font-size: 0.75em;}
		.titre{font-size: 0.9em;}
		a{font-size: 0.75em;}
		.conteneur{display: grid;
			grid-template-columns: 100%;
			grid-template-rows: repeat(4, 1fr);
			grid-template-areas:
			"zone1" 
			"zone2"
			"zone3"
			"zone4";
			width: 100%;
		}
		
	}

	/* Small devices (portrait tablets and large phones, 600px and up) */
	@media only screen and (min-width: 600px) {
		body{font-size: 0.8em;}
		.titre{font-size: 1em;}
		a{font-size: 0.8em;}
		.conteneur{display: grid;
			grid-template-columns: 100%;
			grid-template-rows: repeat(4, 1fr);
			grid-template-areas:
			"zone1" 
			"zone2"
			"zone3"
			"zone4";
			width: 100%;
		}
		
	}

	/* Medium devices (landscape tablets, 768px and up) */
	@media only screen and (min-width: 768px) {
		body{font-size: 0.85em;}
		.titre{font-size: 1.15em;}
		a{font-size: 0.9em;}
		.conteneur{display: grid;
			grid-template-columns: 50% 50%;
			grid-template-rows: repeat(2, 1fr);
			grid-template-areas:
			"zone1 zone3"
			"zone2 zone4";
			
			width: 100%;
		}
	}
		



	
	/* Large devices (laptops/desktops, 992px and up) */
	@media only screen and (min-width: 992px) {
		body{font-size: 0.95em;}
		a{font-size: 0.95em;}
		.titre {font-size: 1.2em;}
		.conteneur{display: grid;
			grid-template-columns: 33.33% 33.33% 33.33%;
			grid-template-rows: repeat(2, 1fr);
			grid-template-areas:
			"zone1 zone2 zone3"
			"zone1 zone4  .   ";
			width: 100%;
		}
		
	} 

	/* Extra large devices (large laptops and desktops, 1200px and up) */
	@media only screen and (min-width: 1200px) {
		body{font-size: 1.05em;}
		a{font-size: 1em;}
		.titre {font-size: 1.3em;}
		.conteneur{display: grid;
			grid-template-columns: 33.33% 33.33% 33.33%;
			grid-template-rows: repeat(2, 1fr);
			grid-template-areas:
			"zone1 zone2 zone3"
			"zone1 zone4   . ";
			width: 100%;
		}
		
	}
	
	.conteneur1{display: grid;
			grid-template-columns: 50% 50%;
			grid-template-rows: repeat(1, 1fr);
			grid-template-areas:
			"gauche droite";
			width: 100%;
		}
	
	.gauche{grid-area: gauche;}
	.droite{grid-area: droite;}
	
	#contenu{grid-area: zone4; width: 100%;}
	#terminale{grid-area: zone1; top: 10px; left: 10%; width: 100%; text-align: center;}
	#seconde{grid-area: zone2;  top: 10px;  width: 100%;  text-align: center;}
	#snt{grid-area: zone3 ; top: 10px;  width: 100%; text-align: center;}
	
	#background-container{
			position: absolute;
			width: 100%;
			height: 100%;
			display: bock;
			z-index: 0;
			background-position: center center;
			background-repeat: no-repeat;
	}
	
	
	@keyframes 'tourneY' { 
						0%{transform: rotateY(0deg);}
						10%{transform: rotateY(36deg);}
						20%{transform: rotateY(72deg);}
						30%{transform: rotateY(108deg);}
						40%{transform: rotateY(144deg);}
						50%{transform: rotateY(180deg);}
						60%{transform: rotateY(216deg);}
						70%{transform: rotateY(252deg);}
						80%{transform: rotateY(288deg);}
						90%{transform: rotateY(324deg);}
						100%{transform: rotateY(360deg);}
						}