html
	{

		font-size: 16px;
	}

	header
	{
		width: 70%;
		border: 1px red dashed;
		border-top: 1px solid black;
		border-bottom: 1px solid black;

		/*un flex pour mettre sur une seule ligne  nom et menu de navigation*/
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	body
	{
		font-family: "Helvetica", Helvetica;
		/*background: #BB8AB8;*/
		border-right: 20px rgba(255, 0, 0, .2) dashed;
		/*border: 1px red dashed;*/
		/*un flex pour le body de la page pour pouvoir le centrer. */
		display: flex;
		flex-flow: column nowrap;
		/*justify-content: center;*/
		align-items: center;
		/*line-height: 1;*/

	}
	/*pour grille d'images*/
	.galerie
	{
		/*flex pour grille d'images*/
		display: flex;
		border: 1px red dashed;
		flex-wrap: wrap;
		flex-direction: row;
		/*sinon image stretchée sous chrome*/
		align-items: flex-start;
	}

	.galerie
	{
		width: 70%;
		height: 100%;
		border: 1px red dashed;
		background: rgba(255, 0, 0, .2);
	}

	/*image version occupe 25%*/
	.pict25
	{

		margin: 0.25rem;
		/*calule la largeur max d'une photo en portrait en lui donnant une largeur max de 25% de la taille du conteneur (défini à 70% précédemment
		dans .galerie) et on soustrait les marges)*/
		max-width: calc(25% - 0.5rem);
		
	}
	/*image version occupe 50%*/
	.pict50
	{

		margin: 0.25rem;
		/*calcule la largeur max d'une photo en portrait en lui donnant une largeur max de 50% de la taille du conteneur (défini à 70% précédemment
		dans .galerie) et on soustrait les marges)*/
		max-width: calc(50% - 0.5rem);
	}
	/*image en full, occupe l'intégralité du conteneur .galerie*/
	.pict100
	{
		margin: 0.25rem;
	}

	
	.titre
	{
		width: 70%;
		border: 1px black dashed;
	}
	
	p.fr
	{
		max-width: calc(50% - 0.5rem);
		/*border: 1px black dashed;*/
	}

	p.en
	{
		font-weight: bold;
		max-width: calc(50% - 0.5rem);
	}


	.expl
	{
		border: 1px black dashed;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		width: 70%;
		/*height: 550px;*/
		/*height: 35rem;*/
	}

	em
	{
		/*font-weight: normal;*/
		font-style: normal;
	}
	
	/*titre oeuvre et matériaux*/
	p, h2, h3
	{
		/*marge pour les paragraphes et les titres*/
		margin: 0.25rem;
		/*enleve les marges de dessus dessous pour limiter les espaces entre titre d'oeuvre et paragraphe*/
		margin-top:0px;
		margin-bottom:0px;
		/*largeur maximum pour les paragraphes et les titres en prenant en compte leur marge donc 
		100% de la largeur - les deux marges de chaque côté gauche droite. p et h2 sont dans le bloc div appelé "texte",
		pour rappel c'est 100% de width 70% hérité du style du container .texte */
		max-width: calc(100% - 0.5rem);
	}
	/*h1 est réservé pour nom/prénom */
	h1
	{
		/*marge pour les paragraphes et les titres*/
		margin: 0.25rem;
		/*on vire les marges de dessus dessous pour limiter les espaces entre titre et paragraphe*/
		margin-top: 0px;
		margin-bottom: 0px;
		/*line-height: 80%;*/
		/*largeur maximum pour les paragraphes et les titres en prenant en compte leur marge donc 
		100% de la largeur - les deux marges de chaque côté gauche droite. p et h2 sont dans le bloc header,
		pour rappel c'est 100% de width 70% hérité du style du container .header */
		max-width: calc(50% - 0.5rem);
		font-size: 19px;
		border: 1px black dashed;
	}
	/*titre pièce*/
	h2
	{
		font-weight: bold;
		/*color: red;*/
		color: rgba(255, 0, 0, .8);

		font-size: 14px;
		text-decoration: underline;
	}
	/*description matérielle*/
	h3
	{
		font-weight: normal;
		font-size: 11px;
	}

	p
	{
		text-align: justify;
		/*text-justify: distribute;*/
		font-size: 13px;
	}


	ul
	{
		/*enlève les particules devant la liste*/
		list-style-type: none;
		/*enleve le padding et margin par défaut de <ul> car sinon espace en trop
		dans les blocs*/
		margin: 0; 
		padding: 0; 
	}
	
	/*liste pour cv*/
	.cv ul
	{
		/*font-size: 13px;*/
		margin: 0.25rem;
		font-size: 13px;
		border: 1px red dashed;

	}


	/*liste qui stocke les elements du menu*/
	nav ul
	{
		margin-right: 0.25rem;
		/*un flex pour mettre à la suite les éléments de menus*/
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: space-around;
		border-top: 1px black dashed;
		border-bottom: 1px black dashed;
		border-right: 1px black dashed;
		/*width: 360px;*/
		/*width: 50%;*/
		/*border: 1px olive dashed;*/

	}
	/*element du menu*/
	nav li
	{
		display: flex;    
		width: 100px;       
		/*
		margin-right: 57px;
		padding-top: 6px;
		*/
		font-size: 10px;
		border-left: 1px black dashed;
		/*border-right: 1px black dashed;*/

		justify-content: center;      /* center text horizontally */
		align-items: center;  

	}

	/*les liens en général*/
	a
	{
		color: #181818;
		text-decoration: none;
	}

	nav a:hover
	{

		/*color: #760001;*/
		text-decoration: overline;
		/*border-bottom: 3px solid #760001;*/

	}

	/*pour internet explorer car sinon il étire démesurément les images sur l'axe horizontal*/
	img, .mediaEmbed 
	{
		/*largeur maximale pour images en prenant en compte leur marge*/
		max-width: calc(100% - 0.5rem);
		/*mis à zéro pour éviter étirement*/
		flex-shrink: 0;
		/*border: 1px olive dashed;*/
	}

	
	.videoWrapper {
		position: relative;
		padding-bottom: 56.25%; 
		/*padding-top: 25px;*/
		height: 0;
		/*border: 1px green dashed;*/
	}
	.videoWrapper iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		/*border: 1px olive dashed;*/
	}
	.mediaEmbed
	{
		/* border: 1px blue dashed;*/
		width: 100%;
		margin: 0.25rem;
	}
	/*les images liens*/
	a img {
		width:100%;
	}