@charset "utf-8";
/* CSS Document */
@font-face {
    font-family: 'gapsansblack-webfont';
    src: url('GapSans-master/gapsansblack-webfont.woff2') format('woff2'), /* Spécifiez le chemin vers le fichier de police */
         url('GapSans-master/gapsansblack-webfont.woff') format('woff'); /* Ajoutez les différentes versions de la police pour la compatibilité avec les navigateurs */
    font-weight: normal; /* Poids de la police (normal, bold, etc.) */
    font-style: normal; /* Style de la police (normal, italic, etc.) */
}

.titre {
	font-family: "gapsansblack-webfont";
	font-size: 48px;
	color:white;
	}
.titresouspage {
	font-family: "gapsansblack-webfont";
	color: white;
	}
.accrochesouspage {
	font-family: 'gapsansblack-webfont';
	color: white;
	font-size: 48px;
	text-align: center;
	font-weight: 600;
	}
.descriptionsouspage {
	font-family: 'gapsansblack-webfont';
	color: white;
	font-size: 36px;
	text-align: center;
	}
.reseaux {
    font-family: "gapsansblack-webfont";
    font-size: 24px;
	color:white;
	}
.reseauxsouspage {
    font-family: "gapsansblack-webfont";
    font-size: 24px;
	color: white;
	}
.textenormal {
    font-family: "gapsansblack-webfont";
}
.lien {
	font-family: 'gapsansblack-webfont';
	color: black;
	text-decoration: none;
	}
.lien:hover {
	text-decoration: underline;
}
.lieninsta {
	text-decoration: none;
	color:#FFFFFF;
}
.lieninsta:hover {
	text-decoration: underline;
}
.imageauto {
    align-content: center;
    max-width: 100%;
    height: auto;
    width: auto;
    text-align: center;
    align-items: center;
}
.liendecale {
	font-family: "gapsansblack-webfont";
	color: white;
	text-decoration: none;
	font-size: 48px;
	
	}
.liendecale:hover {
	text-decoration: underline;
}
.lienblanc {
    font-family: "gapsansblack-webfont";
	color: white;
	text-decoration: none;
	font-size: 24px;
	}
.lienblanc:hover {
	text-decoration: underline;
}

img.opacity {
	opacity: 1;
	-webkit-transition: .3s ease-in-out;
	filter: alpha(opacity=100);
	transition: .3s ease-in-out;
}
img.opacity:hover {
	opacity: .5;
	filter: alpha(opacity=50);
}

/* bloc haut droite */

.top-right-links {
	position: absolute;
	top: 10px;
	right: 10px;
	text-align: left;
  }
  
  .link {
	text-decoration: none;
	text-transform: uppercase;
    font-family: "gapsansblack-webfont";
	color: white;
	display: block;
	margin-bottom: 5px;
  }
  
  .link:hover {
	color: white;
	text-decoration: underline;
  }
  
  .image-container {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 9999;
  }
  
  .hover-image {
	max-width: 800px;
	max-height: 600px;
  }



  .link-bord {
	text-decoration: none;
	text-transform: uppercase;
    font-family: "gapsansblack-webfont";
	color: white;
	display: inline-block;
	border-radius: 50px;
	border-width:1px;
	border-color: #FFFFFF;
	border-style: solid;
	padding:4px 24px;
	font-size: 40px;
	margin-top: 10px;
	margin-right: 20px;
	transition: padding 0.3s;
  }
  
  .link-bord:hover {
	color: white;
	text-decoration: none;
	padding: 8px 28px;
	background-color: rgba(10, 10, 10, 0.1);
  }
  
    .link-bord2 {
	text-decoration: none;
	text-transform: uppercase;
    font-family: "gapsansblack-webfont";
	color: black;
	display: inline-block;
	border-radius: 50px;
	border-width:1px;
	border-color: #FFFFFF;
	border-style: solid;
	padding:4px 24px;
	font-size: 40px;
	margin-top: 10px;
	margin-right: 20px;
	transition: padding 0.3s;
  }
  
  .link-bord2:hover {
	color: white;
	text-decoration: none;
	padding: 8px 28px;
	background-color: rgba(40, 40, 40, 0.9);
  }
  

  .fondgris {
	background-color: lightgray;
	margin: 0;
    padding: 0;
}

/* Galerie de WORK */

.center-container {
    display: flex;
    align-items: center;
    justify-content: center;  
    margin: 0;
	padding:0;
	margin-top: 50px;
	z-index: 999;
}

.gallery {
    column-count: 5; /* Ajustez le nombre de colonnes selon vos préférences */
    column-gap: 16px; /* Ajout d'un espacement entre les colonnes */
    max-width: 95%; /* Ajustez la largeur maximale selon vos besoins */
}

.thumbnail {
    width: 100%;
    height: auto;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s;
    margin-bottom: 16px; /* Ajout d'un espacement entre les images */
}

.thumbnail:hover {
    transform: scale(1.05);
}
  
  .popup {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8);
	justify-content: center;
	align-items: center;
  }
  
  .popup-img {
	max-width: 80%;
	max-height: 80%;
	border-radius: 15px;
  }
  
  .close-btn {
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: 30px;
	color: white;
	cursor: pointer;
  }