@font-face {
    font-family: 'Montserrat';
    src: url('Montserrat/Montserrat-Medium.ttf');
}

body {
	margin: 0px;
	padding: 0px;
	font-family: Montserrat;
	overflow-x: hidden;
}

a, a:hover { /* Aucun déco sur l'ensemble des liens */
	text-decoration: none;
	color: #000000;
}

	header {
		display: flex;
		width: 100%;
		flex-direction: column;
		align-items: center;
		background-color: #dbedfa;
	}

		#headerhome {
			display: flex;
			justify-content: center;
			width: 100%;
		}

			#titre_gauche { /* Ne contient rien, juste pour équilibrer et centre le titre qui est sur titre_centre */
				flex: 1; /* Se redimensionne si besoin contrairement à titre_centre qui doit rester bien au milieu et à sa taille */
			}

			#titre_centre {
				width: 300px;
				text-align: center;
			}

				#titre_centre img {
					height: 100px;
					margin-top:10px;
				}

			#titre_droite {
				flex: 1;
				text-align: right;
			}

				#titre_droite ul {
					list-style-type: none;
					margin-top: 10px;
					margin-right: 50px;
				}

					#titre_droite ul li {
						display: inline;
						padding: 4px;
					}

						#titre_droite img {
							height: 15px;
						}

		#banniere {
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
			#marine {
				/* Inutile mais pour repérage */
			}
			
				#marine img {
					height: 300px;
					margin-left: -60px;
					margin-top: 20px;
					margin-bottom: 40px;
				}
		

	nav {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		padding-top: 10px;
		padding-bottom: 10px;
		background: rgba(255,255,255,0.85); /* Code RGB + opacité */
	}
	
		#logo {
			flex: 1;
		}
		
			#logo img {
				width: 60px;
				margin-left: 50px;
			}
		
		#menu {
			text-transform: uppercase;
			text-align: center;
		}
		
			#menu ul {
				list-style-type: none;
			}

				#menu ul li {
					display: inline;
					padding: 20px;
				}
				
					.onair {
						background-image: url("images/cliconglet.png");
						background-size: contain;
						background-repeat: no-repeat;
						background-position: center;
					}
		
		#rs {
			flex: 1;
			text-align: right;
		}
			#rs ul {
				list-style-type: none;
				margin-right: 50px;
			}

				#rs ul li {
					display: inline;
					padding: 4px;
				}

					#rs img {
						height: 15px;
					}
			
	footer {
		text-align: center;
		font-size: 12px;
		background: rgba(255,255,255,1);
		padding: 10px;
	}
		
		footer img {
			width: 100px;
			vertical-align:middle;
		}
	
		footer ul {
			list-style-type: none;
		}

		footer ul li {
			display: inline;
			padding: 25px;
		}
	
	#content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
	}
	
		#CV img {
			width: 800px;
			max-width: 100%; /* Pour responsive */
		}
		
		#portfolio img {
			max-width: 1200px;
		}
		
		#references {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 100%;
		}
		
		.art_ref {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			padding-top: 50px;
			padding-bottom: 50px;
		}
				
			.texte_ref {
				width: 400px;
				max-width: 50%;
				font-size: 11px;
				z-index: 2;
			}
			
				.t_d, .t_g {
					background: rgba(255,255,255,1);
					padding: 10px;
					width: 100%;
					line-height: 20px;
				}
				
				.t_d {
					margin-left: -40px; /* Texte à droite, on demande de chevaucher vers la gauche */
				}
				
				.t_g {
					margin-left: 20px; /* Texte à gauche, on demande de chevaucher vers la droite. Besoin de 2 fois moins dans ce cas là, aucune idée pourquoi... */
				}
			
			.image_ref {
				width: 700px;
				max-width: 50%;
				z-index: 1;
			}
			
				.image_ref img {
					width: 100%;
				}

		#blog {
				text-align: center;
				width: 100%;
				height: 650px;
		}
				
	/* Tout ce qu'il y a en dessous sert pour la page Portfolio et l'affichage de la galerie avec apparition des titres au passage du curseur */
	
	ul.img-list {
	  list-style-type: none;
	  margin: 0;
	  padding: 0;
	  text-align: center;
	}
	 
		ul.img-list li {
		  display: inline-block;
		  height: 150px;
		  margin: 25px 0px 0px 25px;
		  position: relative;
		  width: 360px;
		}
		
			span.text-content {
			  background: rgba(134,160,240,0.6);
			  color: white;
			  text-transform: uppercase;
			  font-size: 12px;
			  line-height: 30px;
			  cursor: pointer;
			  display: table;
			  height: 245px;
			  left: 0;
			  position: absolute;
			  top: 0;
			  width: 360px;
			  opacity: 0;
			  -webkit-transition: opacity 500ms;
			  -moz-transition: opacity 500ms;
			  -o-transition: opacity 500ms;
			  transition: opacity 500ms;
			}
			 
				span.text-content span {
				  display: table-cell;
				  text-align: center;
				  vertical-align: middle;
				  padding: 50px;
				}
			
			ul.img-list li:hover span.text-content {
			  opacity: 1;
			}
			
			ul.img-list li img {
				width: 360px;
				height: 245px;
			}