@charset "UTF-8";

@font-face { font-family: "abc" ; src: url("font/abcsyntvariable-trial-webfont.woff2");}

@font-face { font-family: "circular" ; src: url("font/circularpro-book-webfont.woff2");}

html {
  scroll-behavior: smooth;
}

h1 , h3 , .nav-link{
	font-family: "abc";
}

p {
	font-family: "circular";
}

body {
	
}

.scale-on-hover {
      transition: transform 0.3s ease-in-out;
}
    
.scale-on-hover:hover {
      transform: scale(1.05); 
}

.custom-cursor {
        position: fixed;
        width: 20px;
        height: 20px;
        border-radius: 50%;
		border: solid white 4px;
        background-color: #000;
        pointer-events: none;
        z-index: 9999;
}

* {
        cursor: none;
}

/* Style du curseur pour la version mobile */
@media only screen and (max-width: 768px) {
    .custom-cursor {
        position: fixed;
        width: 0px;
        height: 00px;
        border-radius: none;
		border:0px;
        background-color: #000;
        pointer-events: none;
        z-index: 9999;
    }
    /* Restaurez le curseur par défaut pour tous les autres éléments */
    * {
        cursor: auto !important;
    }
}


@media (max-width: 576px) {
	.intro-home{
	z-index: 300;
	width: 100%;
	margin-top: 500px;
	background-color: #FFFFFF;
	}
}

@media (min-width: 576px) { 
	h1 {
		font-size: 80px;
		font-weight: bold;
	}
	h3 {
		font-size: 55px;
	}
	p {
		font-size: 20px;
	}
	.intro-home{
	z-index: 300;
	width: 100%; 
	margin-top: 670px;
	background-color: #FFFFFF;
	}
}

@media (min-width: 768px) {
	h1 {
		font-size: 100px;
		font-weight: bold;
	}
	h3 {
		font-size: 55px;
	}
	p {
		font-size: 20px;
	}
	.intro-home{
	z-index: 300;
	width: 100%;
	margin-top: 680px;
	background-color: #FFFFFF;
	}

	.scale-on-hover-nav {
      transition: transform 0.3s ease-in-out;
	}
    
	.scale-on-hover-nav:hover {
      transform: scale(1.2); 
	}
}

@media (min-width: 992px){
	h1 {
		font-size: 140px;
		font-weight: bold;
	}
	h3 {
		font-size: 40px;
	}
	p {
		font-size: 20px;
	}
	.intro-home{
	z-index: 300;
	width: 100%;
	margin-top: 500px;
	background-color: #FFFFFF;
	}
}

@media (max-width: 1199.98px) {
	.intro-home{
		z-index: 300;
		width: 100%;
		margin-top: 550px;
		background-color: #FFFFFF;
		}
 }

@media (min-width: 1200px) {
	.intro-home{
	z-index: 300;
	width: 100%;
	margin-top: 630px;
	background-color: #FFFFFF;
	}
}

.home-video {
	z-index: -1;
	margin-top: 80px;
	background-color: #000;
}

.bordure {
	height: 10px;
	border-top: 1.5px solid black;
	margin-top : -15px;
	margin-bottom: -8px;
}

.bordurebuche {
	height: 10px;
	border-top: 2px solid white;
}

.bxl {
	background-color: #FFBEDE;
}

.tatoo {
	background-color:  #3cf9f6;
}

.jour {
	background-color: #D5FFD0;
}

.eaa {
	background-color: #F8D0FF;
}

.buche {
	background-color: black;
}

.nb {
	background-color: #DBDBDB;
}

.zigo {
	background-color: #63a1d0;
}

.genre {
    background-color: #d0d0d0;
}

.diplome {
	background-color:white ;
}

.prince {
	background-color: #1C75BC;
}

.navprojets {
	color: black;
	text-decoration: none;
	font-size: 70px;
}

.navprojets:hover {
	text-decoration: none;
	font-weight: 700;
	font-size: 70px;
	color: black;
}

.image span {
    visibility: hidden;
}
 
.image img:hover + span {
    visibility: visible;
}

.overlay-image {
  position: relative; /* Important pour positionner le contenu par dessus, relatif à l'élément */
  display: inline-block; /* Prendra la forme de son contenu *
}

.overlay-image img {
  vertical-align: middle; /* Ou display: block, pour enlever l'espace blanc */
}

.overlay-image .hover-image {
  /* Positionnement du contenu hover */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  
  /* Effets de transition */
  opacity: 0; /* On cache l'élément via son opacité */
  transition: opacity 0.25s ease-in-out; /* Effet de transition sur le hover */
  
  /* Style du contenu hover */
  background-color: rgba(255,255,255,1); /* Couleur par défaut */
  color: black;
  
  /* Centrer le contenu */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

.overlay-image:hover .hover-image {
  opacity: 0.8; /* Lors du hover, on remet l'opacité à 1 */
}

footer {
	padding-bottom: 30px;
	text-align: center;
}

footer a{
	color: black;	
}

footer a:hover {
	color: black;
}

.lien a {
	color:white;
}

.lien a:hover {
	color: white;
}

.lientexte {
	color:black;
}

.lientexte:hover {
	color: black;
}

.nav-link {
    color: rgb(255, 255, 255);
    font-size: 20px;
}

.nav-link:hover {
    color: #c9c9c9;
    font-size: 20px;
}

.nav-link .home {
    color: rgb(255, 255, 255);
    font-size: 20px;
}

.nav-link .home:hover {
    color: #3cf9f6;
    font-size: 20px;
}

buton {
	color: white;
	border : 0px white solid;
}

.troisimagesparligne{
	margin-bottom: -12px;
}

.produit {
	mix-blend-mode: multiply;
}

.navbar-toggler {
    padding: 0px;
    background-color: transparent;
    border: 0px solid transparent;
	border-radius: 0px;
}

.navbar {
	background-color: black;
	color: #FFFFFF;
}

.navbar-toggler-icon {
	background-image: url("images/nav.png");
	height: 20px;
}

button , button:hover , button:active, button:focus {
	border: none;
}

.english {
    opacity: 80%;
}

.bg-dark {
    background-color: #000 !important;
}

.bdfil {
	color: #0033ff !important;
	font-family: "circular", sans-serif !important;
  }