/* Balises textes */


p /* Personnalisation des paragraphes */
{
	color: #2a2a2a; /* Couleur des paragraphes personnalisées */
	font-size: 1.1em; /* Taille relative des paragraphes */ 
	font-family: inherit; /* Police personnalisée */
	text-align: center; /* Texte alligné au centre */
}

h1 /* Style des textes type h1 */
{
	font-size: 1.1em; /* Taille relative du titre #1 */
	text-align: center; /* Allignement de h1 */
	font-style: italic; /* Style particulier de h1 */
}

h2 /* Personnalisation des h2 */
{
	font-size: 1.5em; /* Taille relative des titres #2 */
	text-align: center;
}

em
{
	font-size: 0.8em;
}



/* Balises boites  */


a
{
	text-decoration: none;
	color: #2a2a2a;
}

em
{
	font-style: italic;
}

body /* Spécificités du corps "body" */
{
	background-color: #fbfffe; /* Couleur de fond de la page */

}

header /* Particularités de l'en-tête "header" */
{
	display: flex; /* L'en-tête de page est une boite également, elle devient flex */
	flex-direction: column; /* Les boites sont empilées en colomne */
	justify-content : center; /* Les éléments s'allignes au centre de la page à l'horizontal */
	align-items: center; /* Les éléments s'allignent au cezntre de la page dans le deuxième plan (vertical) */
}

main /* Gestion du block main */
{
	max-width: 80%;
	margin: auto;
	border-top: 2px #ccefee groove;
}

div
{
	display: flex;
	flex-direction: column;
	align-items: center;
}

section /* Style des section */
{
	display: flex; /* Mise en page avec fexbox, les blocks "section" deviennent flexible */
	flex-direction: column; /* Chaque section est organisé en colomne */
	align-items: center;
	border-bottom: 2px #ccefee groove;
	padding-bottom: 10px;
	max-width: 800px;
}



/* Balises sur mesures id */


#image_logo /* Particularités de l'id image_logo */
{
	max-height: 100px; /* Hauteur maximum de image_logo */
	max-width: 100%;

}

#vivre_slogan:hover /* Animation au survolement de la souris pour l'id */
{
	font-weight: normal; /* Animation sur le mot "Vivre" */
}

#lien_instagram_marc_alby_text:hover
{
	opacity: 50%;
}

#gif_une_vie_bocalship
{
	max-height: 300px;
	max-width: 100%;
}

#gif_une_vie_bocalship:hover
{
	border-left: 2px #ccefee groove;
}

#logo_profil_podcast
{
	max-height: 400px;
	max-width: 100%;
	margin-top: 20px;
	box-shadow: 0px 0px 9px #b6b6b6;
	border-radius: 30px;
}

#logo_profil_podcast:hover
{
	box-shadow: 0px 0px 9px #52c9c5;
}

#video_youtube_bocalship
{
	width: 560px;
	height: 315px;
	border-radius: 5px;
}

#bouton_stage
{
	font-family: Gill Sans;
	display: block;
	max-width: 200px;
	text-align: center;
	background-color: #d36e73;
	padding: 10px 10px;
	margin: auto;
	margin-top: 15px;
	margin-bottom: 15px;
	text-decoration: none;
	color: #f6f6f6;
	border-radius: 10px;
	box-shadow: 0px 0px 9px rgba(150, 150, 150, 0.5);
}

#fiche_event
{
	max-width: 80%;
}

#bloc_reseaux_sociaux
{
	display: flex;
	flex-direction: row;
	width: 80%;
	justify-content: center;
}




#adresse_mail:hover
{
	text-decoration: underline;
	opacity: 0.75;
}

#signature
{
	font-size: 0.8em;
	color: #2a2a2a;
}


/* Balises sur mesure class */


.sfo_slogan:hover /* Animation au survolement de la class sfo_slogan */
{
	text-decoration: underline; /* Animation sur les mots "simple", "fluide" et "organique" */
}

.reseaux
{
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 250px;
	margin: 15px;
}


.logos_reseaux_sociaux
{
	max-width: 50px;
	border-radius: 7px;
}

.logos_reseaux_sociaux:hover
{
	opacity: 50%;
}

.personne
{
	text-decoration: underline;
}






@media screen and (max-width: 700px) /* Mise en place d'un "media query" : @media pour l'annoncer et les régles concernent l'écran (screen) 
lorsque sa taille est en dessous de 700px (max-width) */
{
	#video_youtube_bocalship
	{
		width: 100%;
		height: 100%;
	}

	.text_descriptif_reseaux
	{
		display: none;
	}
}