/*
	Auteur: Valentin Dubois
	Date: 07.12.22
	Description: première page HTML avec les balises principales
*/

/*
	mise en page du body
*/


body{
	margin: 0px;
	color: rgb(196, 136, 63);

	
}


/*
	permet d'avoir les liens des pages en ligne
*/
	nav {
		display: flex;
		
		justify-content: space-around;
		background-color: lightskyblue;    
		margin-left: 50px;
		margin-right: 50px;
		margin-top: 30px;
		margin-bottom: 50px;
		padding-top: 30px;
		padding-bottom: 30px;
		font-size: 15pt;
		

	}

nav > div > a{
	text-decoration: none;
}
/*
	Met un fond autour des liens
*/
nav > div:hover{
	background-color:rgb(37, 91, 207);
}

nav > div >a:active{
	background-color:rgb(0, 0, 0);
}

/*
	Mise en page des h1 à h3
*/
h1{
	text-align: center;
	font-size: 40pt;
	padding: 10%;
}

h2{
	text-align: center;
	font-size: 35pt;
	margin: 100px;
}

h3{
	font-size: 20pt;
	margin-left:10px;
}

/*
	Nise en page de des images
*/
img {
	width: 500px;
	
}

/*
	Mise en page de des vidéos
*/
iframe{
	
	width: 70%;
	height: 600px;
	margin-left: 10%;
	margin-right: 10%;
	
}

/*
	permet de créer une ligne 
*/
.ligne {

	padding: 5px;
	background-color: black;
	color: black;
	
	
}


/*
	mise en forme du robot chien
*/
#chien{
	width:400px;
	
}

/*
	met le texte à droite
*/
.droite{
	text-align: right;
}

/*
	sert à mettre un espace
*/
.espace{
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left: 20px;
	margin-right: 3%;
}

/*
	sert à mettre un grand espace
*/
#grandEspace{
	margin-bottom: 30px;
}

/*
	sert à mettre le texte 
*/
.texte{
	font-size: 17pt;
	text-align: justify;
}

/*
	Mise en page de la classe programmation
*/
.programmation{
	width: 300px;
	margin-bottom: 20px;
}

/*
	Mise en page du pied de page
*/
footer{
	background-color: black;
	color: white;
	text-align: justify;
	padding-top: 20px;
	padding-bottom: 20px;
	font-size: 12pt;

}

/*
	mise en page d'une vidéo
*/
#video{
	color: rgb(0, 140, 255);
}



/*
	easteregg
*/
#easteregg{
	color: rgb(53, 52, 52);
}

/*
	mise en page de la classe vidéo
*/


/*
	permet de mettre une image à côté d'une
	image ou d'un texte
*/
.apres{
	display: flex;
	flex-direction: row;
	margin-left: 20px;
}

/*
	permet de mettre le texte à côté de l'image 
	et au centre
*/
.texteApres{
	font-size: 17pt;
	margin-left: 20px;
	margin-top:auto;
	margin-bottom: auto;
}

/*
	sert à mettre image au centre
*/
.imgCentre{
	
	text-align: center;
}

/*
	sert à mettre texte au centre
*/
.texteCentre{
	font-size: 17pt;
	text-align: center;
}

/*
	mise en page de l'id heure
*/
#heure{
	background-color:darkgrey;
	padding: 20px;
	margin: 20px;
	color: black;
	font-size: 40px;
	text-align: center;
	font-weight: bolder;
}

/*
	mise en pages des photos des plateaux
*/
.plateau{
	width: 500px;
	height: 300px;
	margin-left: auto;
	margin-right: auto;
	
}


@media screen and (max-width: 600px){
	nav{
		flex-direction: column;
		text-align: center;
	}

	iframe{
		height: 250px;
	}

	.video{
		height: 250px;
	}

	.apres{
		flex-direction: column-reverse;
	}

	.texte{
		font-size: 15pt;
	}

	#heure{
		font-size: 25px;
	}

	.imgCentre{
		text-align: center;
	}

	img {
		width: 300px;
		text-align: center;
	}

	.txtImg{
		text-align: center;
	}

	#chien{
		width:300px;
		
	}

	.plateau{
		width: 100%;
	
		margin-left: auto;
		margin-right: auto;
		
	}

	#txtImgG{
		
		text-align: center;
		
	}

	
}