/* ---------------------  MISE EN FORME HEADER  ------------------------------- */

header
{
	/*Flexbox*/
	display : flex;
	flex-direction : row; 														/*permet de mettre les blocs en ligne*/
	flex-wrap: wrap;															/*permet de mettre les blocs à la ligne si écran pas suffisamment large)*/
	justify-content : space-between; 											/*permet de centrer et d'espacer les blocs sur l'axe principal (horizontal)*/
	align-items : center;														/*permet de centrer et d'espacer les blocs sur l'axe secondaire (vertical)*/
	/*Divers*/
	width : 100%;																/*largeur du bloc titre*/
	margin-top: -5px ;															/*marge au dessus du header*/
	margin-bottom: 5px ;														/*marge sous le header*/
	margin-left: 0px ;															/*marge à gauche du header*/
	margin-right: 0px ;															/*marge à droite du header*/
	padding : 0px;																/*Mrge intérieure*/
	background-color: rgb(0,152,153);											/*couleur de fond*/
}

header img
{
	border-radius : 20px; 				/*coin de la bordure arrondi*/
	height: auto;						/*hauteur des images adaptée en fonction de la largeur*/
	width : 20vw;						/*largeur adaptée en fonction de la taille de l'écran mais avec limite fixée à 416px*/
	min-width: 20px;					/*limite basse fixée à 20px*/
	max-width : 200px;					/*limite haute fixée à 200px*/
}


#logo								/* Mise en forme du logo uniquement - le # est lié au fait qu'il soit nommé par un "id" et pas un "class"*/
{
 	border-radius : 0px;				/*coin de la bordure arrondi*/
	height: auto;						/*hauteur des images adaptée en fonction de la largeur*/
	width : 30vw;						/*largeur adaptée en fonction de la taille de l'écran mais avec limite fixée à 416px*/
	min-width: 30px;					/*limite basse fixée à 30px*/
	max-width : 318px;					/*limite haute fixée à 318px*/
}

/* ---------------------  MISE EN FORME BANDEAU NAVIGATION  ------------------------------- */

.bandeau_navigation  						/*Mise en forme du bandeau de navigation*/
{
	/*Flexbox*/
	display : flex;
	flex-direction : row; 					/*permet de mettre les blocs en ligne*/
	flex-wrap: wrap;						/*permet de mettre les blocs (menu) à la ligne si écran pas suffisamment large)*/
	justify-content : space-around; 		/*permet de centrer et d'espacer les blocs sur l'axe principal (horizontal)*/
	align-items : baseline;					/*permet de centrer et d'espacer les blocs sur l'axe secondaire (vertical)*/
	/*Divers*/
	margin-top : 30px;						/*marge de 20 pixels en haut du bandeau*/
	margin-bottom : 30px;					/*marge de 20 pixels en bas du bandeau*/
	column-gap : 20px;					/*espace entre les colonnes (donc entre les images) de la flexbox*/
	font-weight : 400;												/*titre écrit en regular*/
}

.bandeau_navigation a, .bandeau_navigation a:visited    /*Mise en forme des liens du bandeau de navigation*/
{
	color: rgb(0,152,153);  							/*couleur du texte : bleu vert */
	font-size : 3em;									/*taille du texte*/
	font-family : ubuntu, calibri, arial; 				/* texte en ubuntu, sinon calibri, sinon arial*/
}

.bandeau_navigation a:hover   								/*Mise en forme des liens du bandeau de navigation lors du survol*/
{
	color: rgb(255,234,151);  								/*couleur du texte : or clair (sable)*/
	background-color: rgb(0,152,153);						/*couleur de fond*/
	font-size : 3em;										/*taille du texte*/
	font-family : ubuntu, calibri, arial, sans-serif; 		/* texte en ubuntu, sinon calibri, sinon arial*/
}

/* ---------------------  MISE EN FORME FOOTER  ------------------------------- */

footer
{
	text-align : right;						/*texte à droite*/
	margin-top: 30px;						/*marge au dessus*/
	/*Flexbox*/
	display : flex;
	flex-direction : column; 				/*permet de mettre les blocs en colonne*/
	justify-content : flex-end; 			/*permet de centrer et d'espacer les blocs sur l'axe principal (horizontal)*/
	align-self : right;						/*permet de centrer et d'espacer les blocs sur l'axe secondaire (vertical)*/
}

/* ---------------------  MISE EN FORME GÉNÉRALE  ------------------------------- */

					/*Mise en forme du corps du site*/

body
{
	background-color: rgb(255,234,151);								/*couleur de fond : or clair (sable)*/
}

					/* Mise en forme des sections*/

section
{
	margin-top : 0px;			/*marge de 12 pixel en haut du bandeau*/
	margin-bottom : 0px;		/*prévoit une marge extérieure en bas du block "section"*/
}


					/*Mise en forme des titres h1*/

h1 								
{
	font-family : ubuntu,calibri, arial, sans-serif; 				/* titre en ubuntu, sinon calibri, sinon arial*/
	color: rgb(0,152,153);  										/*couleur du titre : bleu vert*/
	font-weight : 400;												/*titre écrit en regular*/
	font-size : 3em;												/*taille du titre*/
	text-align : center;											/*aligement du titre*/
/*	border : 3px rgb(0,152,153) solid;								/*encadrement du titre*/
/*	border-radius: 10px;											/*angle du cadre arrondi*/
/*	width : 50%;													/*largeur du bloc titre*/
	margin : auto;													/*bloc centré (marge auto)*/
	margin-top : 50px;												/*Marge au-dessu des titres h1*/
	margin-bottom : 50px;											/*Marge sous les titres h1*/
}

					/*Mise en forme des titres h2*/

h2
{
	font-family : ubuntu,calibri, arial, sans-serif; 				/* titre en ubuntu, sinon calibri, sinon arial*/
	color: rgb(0,152,153);  										/*couleur du titre : bleu vert*/
	font-weight : 400;												/*titre écrit en regular*/
	font-size : 2.5em;												/*taille du titre*/
	text-align : center;											/*aligement du titre*/
	width : 50%;													/*largeur du bloc titre*/
	margin : auto;													/*bloc centré (marge auto)*/
	margin-top : 25px;												/*Marge au-dessus des titres h2*/
	margin-bottom : 25px;											/*Marge sous les titres h2*/
	font-weight : normal;											/*titre écrit en normal*/
}


					/*Mise en forme des paragraphes et des puces*/

p, ul, p a
{
	font-family : ubuntu,calibri, arial, sans-serif; 				/* texte en ubuntu, sinon calibri, sinon arial*/
	color: rgb(0,152,153);  										/*couleur du texte : bleu vert*/
	font-weight : 300;												/*titre écrit en light*/
	font-size : 2em;												/*taille du texte*/
	text-align : justify;											/*aligement du texte*/
	width : 80%;													/*largeur du bloc paragraphe*/
	margin : auto;													/*bloc centré (marge auto)*/
}

.liens-accueil li a
{
	font-style : normal;											/*suppression italique*/
	text-decoration: underlinne;									/*soulignage des liens*/
}

.liens-accueil li a:visited
{
	font-style : normal;											/*suppression italique*/
	text-decoration: underlinne;									/*soulignage des liens*/
	color: rgb(0,152,153);  										/*couleur du texte : bleu vert*/
}

strong
{
	font-weight : 500;												/*"ici" de la page d'acceuil écrit en normal*/
}


/* -------------------------  MISE EN FORME SPÉCIFIQUE 01_accueil.PHP  ----------------------------*/

.photo_pauline					/*Mise en forme photo de Pauline*/
{
	display : block;				/*convertit la photo en block*/
	margin-left: 50px;				/*place une marge entre la photo et le texte*/
	margin-bottom: 50px;			/*place une marge sous la photo*/
	float : right;					/*place la photo à droite du texte*/
	height: auto;					/*auteur des images adaptée en fonction de la largeur*/
	width : 10vw;					/*largeur adaptée en fonction de la taille de l'écran mais avec limite fixée à 416px*/
	min-width : 68px;				/*largeur min de l'image*/
	min-height : 67px;				/*hauteur min de l'image*/	
	max-width : 341px;				/*largeur de l'image*/
	max-height : 334px;				/*hauteur de l'image*/
	border-radius : 300px;			/*coin de la bordure arrondi*/
}


.coquillage_1, .coquillage_3
{
	float : left;
	height: auto;			/*hauteur des images adaptée en fonction de la largeur*/
	width : 10vw;			/*largeur adaptée en fonction de la taille de l'écran mais avec limite fixée à 416px*/
	max-width : 100px;		/*largeur de l'image*/
	max-height : 100px;		/*hauteur de l'image*/
}

.coquillage_2, .coquillage_4
{
	float : right;
	height: auto;				/*hauteur des images adaptée en fonction de la largeur*/
	width : 10vw;				/*largeur adaptée en fonction de la taille de l'écran mais avec limite fixée à 416px*/
	max-width : 100px;			/*largeur de l'image*/
	max-height : 100px;			/*hauteur de l'image*/
}

.liens-accueil
{

	width : 75%;					/*largeur du bloc puce*/
}



/* -------------------------  MISE EN FORME SPÉCIFIQUE 02_PORTFOLIO.PHP  ----------------------------*/

.portfolio								/*Mise en forme des portfolios objets et dessins via flexbox*/
{
	/*Flexbox*/
	display: flex;
    flex-direction: row;				/*direction ligne*/
	flex-wrap: wrap;					/*si page trop étroite il y a un passage à la ligne*/
	justify-content: center;			/*le dessin est centré sur l'axe principal (horizontal)*/
	align-content: space-around;		/*les lignes de dessisn sont espacées entre elles sur l'axe secondaire (vertical)*/
	align-items: center;				/*les dessins sont centrés verticalement sur chaque ligne*/
	row-gap: 5px;						/*espace entre les lignes de la flexbox*/
	column-gap : 5px;					/*espace entre les colonnes (donc entre les images) de la flexbox*/
	margin: 0px 15px;					/*marge par rapport aux bord gauche et droit de l'écran*/
}

.objets								/*portfolio "objets" uniquement*/
{

}

.dessins							/*portfolio "dessins" uniquement*/
{
	
}

.portfolio div img						/*Mise en forme des images*/
{
	border: 2px black solid;			/*bordure sur dessins*/
	height: auto;						/*hauteur des images adaptée en fonction de la largeur*/
	width : 30vw;						/*largeur adaptée en fonction de la taille de l'écran mais avec limite fixée à 416px*/
	min-width: 168px;					/*limite basse fixée à 150px*/
	max-width : 206px;					/*limite haute fixée à 416px*/
	
}

.portfolio .marque-page img						/*Mise en forme des images "marque page" très haute et peu large*/
{
	height: auto;						/*hauteur des images adaptée en fonction de la largeur*/
	width : 30vw;						/*largeur adaptée en fonction de la taille de l'écran mais avec limite fixée à 416px*/
	min-width: 28px;					/*limite basse fixée à 28px*/
	max-width : 110px;					/*limite haute fixée à 110px*/
	
}

/*----------------------------  MISE EN FORME SPÉCIFIQUE 03_FAIRE-PART.PHP  ----------------------------*/

.faire-part
{
	display: flex;						/*mise en page via flexbox*/
    flex-direction: row;				/*direction ligne*/
	flex-wrap: wrap;					/*si page trop étroite il y a un passage à la ligne*/
	justify-content: center;		/*les dessins espacés sur l'axe principal (horizontal)*/
	align-content: space-around;		/*les lignes de dessisn sont espacées entre elles sur l'axe secondaire (vertical)*/
	align-items: center;			/*les dessins sont centrés verticalement sur chaque ligne*/
	margin-bottom: 20px;				/*marge sous la flexbox*/
	column-gap : 10vw;					/*espace entre les colonnes (donc entre les images) de la flexbox*/
}
	
.faire-part div img					/* Mise en forme des images situées dans les balises figure des balise calendrier_menu*/
{
	border: 2px black solid;			/*bordure sur dessins*/
	height: auto;						/*hauteur des images adaptée en fonction de la largeur*/
	width : 30vw;						/*largeur adaptée en fonction de la taille de l'écran mais avec avec au moins 10% de la largeur de l'image et max largeur de l'image*/
	min-width: 105px;					/*limite basse fixée à 150px*/
	max-width : 316px;					/*limite haute fixée à 416px*/
}


/*----------------------------  MISE EN FORME SPÉCIFIQUE 04_PROJET PERSONNALISÉS.PHP  ----------------------------*/

.projets-personnalises img
{
	 display: block;					/*transforme la photo en block*/
	margin: 0 auto;						/*centre la photo*/
	border-radius : 20px; 				/*coin de la bordure arrondi*/
	height: auto;						/*hauteur des images adaptée en fonction de la largeur*/
	width : 20vw;						/*largeur adaptée en fonction de la taille de l'écran mais avec limite fixée à 416px*/
	min-width: 20px;					/*limite basse fixée à 20px*/
	max-width : 200px;					/*limite haute fixée à 200px*/
	float: center;
}