@charset "UTF-8";
/* CSS Document */
       /* Custom styles */
@font-face {
    font-family: 'gt_planarbold';
    src: url("Fonts/gt-planar-bold-webfont.woff") format('woff2'),
         url("Fonts/gt-planar-bold-webfont.woff2") format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'neue_haas_grotesk_disp55roman';
    src: url("Fonts/nhaasgroteskdspro-55rg-webfont.woff2") format('woff2'),
         url("Fonts/nhaasgroteskdspro-55rg-webfont.woff")format('woff');
    font-weight: normal;
    font-style: normal;

}
			body{
			margin: 0;
			padding: 0;
			background-color: black;
			font-family: 'neue_haas_grotesk_disp55roman';
		
					}	
.navbar {
    padding-top: 20px; /* Marge au-dessus de la barre de navigation */
    padding-bottom: 20px; /* Marge en dessous de la barre de navigation */
	padding-left: 85px;
	padding-right: 65px;
}

  @media (max-width: 768px) {
            .navbar {
               padding-top: 20px; /* Marge au-dessus de la barre de navigation */
    padding-bottom: 20px; /* Marge en dessous de la barre de navigation */
	padding-left: 35px;
	padding-right: 20px;
            }
        }
	

.navbar-nav, a{
	font-size: 20px;
	
}

.navbar, a{
	text-decoration: none;
	
}

.navbar a:hover{
	text-decoration: underline;
}

 /* Changer la couleur de l'icône burger en blanc */
    .navbar-toggler-icon {
        background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"%3E%3Cpath stroke="%23ffffff" stroke-width="3" d="M5 7h20M5 15h20M5 23h20" /%3E%3C/svg%3E');
    }


    
    /* Assurer que la couleur du fond est transparente */
    .navbar-toggler {
        background: transparent; /* Enlève le fond */
        border: none; /* Enlève la bordure */
		 box-shadow: none;
		 border: none !important; /* Supprime complètement la bordure */
    box-shadow: none !important; /* Supprime tout effet d'ombre */
    outline: none !important;/* Supprime les contours de mise au point */
		padding-left: 40px;
	
		
    }


        header {
            position: relative;
            height: 100vh;
            overflow: hidden;
        }
        header video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        #header-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0); /* Semi-transparent overlay */
        }

       .videodeux{
	    margin-bottom: -200px;!important 
        }

.content-overlay{
	margin-top: -200px;
}

.btn:hover{
	color:white;
	text-decoration: underline;
}

        .filter-section {
            margin-top: -400px;
	
        }

        .filter-btns {
            display: flex;
            justify-content: space-around;
            gap: 20px;
            margin-bottom: 20px;
			margin-left: 20px;
			margin-right: 20px;
			
        }
@media (min-width: 576px) {
               .filter-btns{
        
        
            gap: 20px;
            margin-bottom: 20px;
			margin-left: 20px;
			margin-right: 20px;
            }
        }



        .filter-btns button {
            cursor: pointer;
			font-size: 21px;
        }



        .grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
			padding-left: 50px;
			padding-right: 50px;
			
        }
        @media (max-width: 768px) {
            .grid {
                grid-template-columns: 1fr;
				padding-left: 0px;
			padding-right: 0px;
            }
        }


/* Conteneur d'image pour l'effet au survol */
    .image-container {
        position: relative;
        width: 100%;
        overflow: hidden; /* Pour bien contenir l'overlay */
    }

.image-container img.img-fluid {
        width: 200%; /* Taille agrandie de l'image */
        height: auto; /* Maintient le ratio d'aspect */
    }

    /* Images */
    .image-container img {
        width: 100px;
        height: 100px;
        display: block;
    }

    /* Overlay caché par défaut */
    .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0); /* Fond semi-transparent */
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0; /* Caché au départ */
        transition: opacity 0.3s ease; /* Transition douce au survol */
    }


@media (max-width: 768px) {
  .overlay  {
	  width: 20px;
        height: 20%; /* Taille pour les tablettes */
    }
}

    /* Image SVG au centre de l'overlay */
    .overlay img.overlay-icon {
        width: 60px; /* Ajuste la taille de l'icône SVG */
        height: 60px;
    }

    /* Affichage de l'image SVG au survol */
    .image-container:hover .overlay {
        opacity: 1;
    }

    /* Grille d'images pour le desktop */
    .grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2 colonnes */
        gap: 20px; /* Espace entre les images */
    }

    /* Grille pour mobile */
    @media (max-width: 768px) {
        .grid {
            grid-template-columns: 1fr; /* 1 colonne sur mobile */
        }
    }

.grid .item {
    transition: transform 0.3s ease; /* Transition douce pour le zoom */
}

 /* Style du footer */
    .footer {
        padding: 20px 0; /* Marge intérieure pour le footer */
        background-color: #000; /* Fond noir */
		margin-top: 120px;
		display: flex;
		justify-content: space-between;
    
}

    /* Style des textes du footer */
    .footer-text {
        text-align: center; /* Centrer le texte */
        margin: 10px 0; /* Marge autour des textes */
    }

    /* Responsivité : alignement du texte sur les écrans plus petits */
    @media (max-width: 768px) { 
        .footer-text {
            font-size: 14px; /* Ajuste la taille du texte pour les petits écrans si nécessaire */
        }
    }

.image-container {
        position: relative;
        overflow: hidden; /* Pour contenir l'image au survol */
    }

    /* Images */
    .image-container img {
        width: 100%;
        height: auto;
        transition: transform 0.3s ease; /* Transition pour un effet doux */
    }

    /* Effet de survol : l'image prend 100% de la largeur du conteneur */
    .image-container:hover img {
        transform: scale(1.1); /* Agrandir l'image à 110% de sa taille originale */
    }

    /* Overlay caché par défaut */
    .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0); /* Fond semi-transparent */
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0; /* Caché au départ */
        transition: opacity 0.3s ease; /* Transition douce au survol */
    }

    /* Affichage de l'overlay au survol */
    .image-container:hover .overlay {
        opacity: 1;
    }

    /* Image SVG au centre de l'overlay */
    .overlay img.overlay-icon {
        width: 200px; /* Ajuster la taille de l'icône SVG */
        height: 200px;
    }

    /* Grille d'images pour le desktop */
    .grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2 colonnes */
        gap: 20px; /* Espace entre les images */
    }

    /* Grille pour mobile */
    @media (max-width: 768px) {
        .grid {
            grid-template-columns: 1fr; /* 1 colonne sur mobile */
        }
    }

.videodeux{
	opacity: 0.5;
}

/* Style général des boutons */
.btn {
    font-size: 1.2em;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    background-color: transparent;
    color: white;
    position: relative;
    overflow: hidden; /* Nécessaire pour cacher le dégradé en dehors du bouton */
}

/* Le pseudo-élément qui va contenir le dégradé en dessous des lettres */




/* Responsive : Réduction de la taille des boutons pour les petits écrans */
@media (max-width: 768px) {
    .btn {
        font-size: 1em; /* Réduit la taille de la police sur les tablettes */
        padding: 8px 16px; /* Réduit l'espacement interne */
        min-width: 100px;
    }
}

@media (max-width: 480px) {
    .btn {
        font-size: 0.9em; /* Réduit encore la taille de la police sur les téléphones */
        padding: 6px 12px; /* Réduit encore l'espacement interne */
        min-width: 100%; /* Fait que les boutons prennent toute la largeur */
    }

    .filter-btns {
        flex-direction: column; /* Aligne les boutons en colonne */
        align-items: center; /* Centre les boutons */
        gap: 10px; /* Espacement entre les boutons */
    }
}

/*lab ------------------------------------------------------------- */

.container_1 {
 width: 90%;
 display:grid;
 justify-content: center;
 position: relative;
 padding-top: -100px;	
 
}


	
.item {
  position: absolute;
  text-align: center;
  font-size: 2em;
  font-weight: white;
  color: white;
  line-height: 1.5em;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0);
  background-image: linear-gradient( 135deg, #F761A1 10%, #AC46C8 100%);
  overflow: hidden;
}

.graphics{
	padding-top: 200px;
	color: white;
	font-size: 30px;
	padding-left: 99px;
	padding-bottom: 40px;
	margin-top: -200px;
	
}

@media (max-width: 768px) {
.graphics {
     	padding-top: 260px;
	color: white;
	font-size: 30px;

	padding-bottom: 0px;
	margin-top: -200px;
    }

    .video-square {
        width: 45%; /* Taille des vidéos pour un affichage côte à côte */
    }
}


.musics{
	padding-top: 260px;
	color: white;
	font-size: 30px;
	padding-left: 99px;
	padding-bottom: 0px;
	margin-top: -200px;
	
}


.container_2 {
 width: 89%;
 
 justify-content:space-between;
 position: relative;
 padding-top: 20px;

}



.labtitre{

    display: flex;
	justify-content: center;
	padding-top: 120px;
	padding-bottom: 90px;	
}


.video-container {
    display: flex;
    flex-wrap: wrap;
    justify-content:space-between;
    gap: 20px; /* Espace entre les vidéos */
}

.video-square {
    width: 100%;
	margin: auto;
    max-width: 770px; /* Taille maximale pour chaque vidéo */
    aspect-ratio: 1 / 1; /* Rend la vidéo carrée */
	padding-top: 50px;
}

@media (min-width: 768px) {
    .video-container {
        flex-direction: row; /* Affichage côte à côte */
    }

    .video-square {
        width: 45%; /* Taille des vidéos pour un affichage côte à côte */
    }
}


	
	
	
	/*About ------------------------------------------------------ */
.contenuabout{
	 padding-top: 100px;
	padding-left: 30px;
	padding-right: 30px;
	
	
}

.contenuabout, h4{
	   color: white;
	@font-face {
    font-family: 'neue_haas_grotesk_disp55roman';
    src: url("Fonts/nhaasgroteskdspro-55rg-webfont.woff2") format('woff2'),
         url("Fonts/nhaasgroteskdspro-55rg-webfont.woff")format('woff');
    font-weight: normal;
    font-style: normal;
		


}
	   
}

	
   .image-text-container {
      display: flex;
      justify-content: space-around;
	  margin-top: 200px;
	   
	
	   
    }
    .image-text-container img {
      max-width: 100%;
      height: auto;
    }

.btn-cv {
    display: inline-block;
    padding: 10px 20px;
	margin-top: 20px;
    font-size: 1.2rem;
    font-weight: bold;
    color: #ffffff;
    background-color: #bdc5d8;
    text-decoration: none;
    transition: transform 0.2s ease-in-out,  0.2s ease-in-out;
    text-align: center;
}

/* Effet de zoom au survol */
.btn-cv:hover {
    transform: scale(1.1);
    background-color: #aab1c3;
}

/* Responsive - ajustement du bouton sur petits écrans */
@media (max-width: 768px) {
    .btn-cv {
        padding: 8px 16px;
        font-size: 1rem;
    }
}

@media (max-width: 576px) {
    .btn-cv {
        padding: 6px 12px;
        font-size: 0.9rem;
    }
}

/*CyberounkCity ------------------------------------------------------ */

.background-section {
      position: relative;
      height: 50vh; /* Ajuster selon vos besoins */
      background-image: url("images/bande_cyberpunk.jpg"); /* Remplacer par le chemin de votre image */
      background-size: cover;
      background-position: center;
      background-attachment: fixed; /* Garde l'image fixe pour l'effet de parallaxe */
    }

    /* Conteneur du titre avec fond noir */
    .title-section {
      background-color: #000;
      color: #fff;
      padding: 50px 20px;
		
     
    }

    /* Style du titre principal */
    .title-section h1 {
      font-size: 3rem;
      font-weight: bold;
      margin: auto;
      text-transform: uppercase;
      font-family: 'Arial Black', sans-serif;
	  justify-content: center;
      align-items: center;	
		
    }


	

    /* Style du sous-titre */
    .title-section p {
      font-size: 22px;
      margin-top: 20px;
      width: 600px;
		margin:  auto;
	  display: flex;
	 justify-content: center;
     text-align: center;
      line-height: 1.5;
		
    }





	
	.titrecyberpunkdetail{
		display: flex;
		justify-content: center;
	}
	
	
	

    /* Ligne sous le titre */
    .title-section hr {
      margin: 20px auto;
      width: 80%;
      border-color: #666;
    }




	
	.content {
      position: relative;
      z-index: 1;
      color: white;
      text-align: center;
      font-family: Arial, sans-serif;
      padding: 20px;
    }

.titrecyberpunkdetail, p{
	margin-bottom: 50px;
	 
}

.titrecyberpunkdetail{
	text-align: center;
}



.vignettebladecyberpunk, .vignetteclemcyberpunk{
	width: 30%;
	margin-left: 50px;
	margin-right: 50px;
	margin-top: 70px;
}


.projetbascyberpunk{
	display: flex;
	justify-content: space-between;
}



@media (max-width: 768px) {
    .videocyberpunk{
        position: absolute;
		top: 10%;
    	}
	
	@media (max-width: 768px) {
  
.videocyberpunkprocess{
        position: absolute;
		top: -87%;
    }
		
		        .video-container2 {
            position: relative;
            width: 100%;
            padding-top: 100%; /* Aspect Ratio 1:1 */
        }
        .video-container2 video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
   
	@media (max-width: 768px) {
  
.vignettebladecyberpunk, .vignetteclemcyberpunk{
    width: 600%;!important 
	height: 200%;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: -30px;
    }
		
		
			@media (max-width: 768px) {
  
.footerdeux{
   padding: 20px 0; /* Marge intérieure pour le footer */
		padding-top: 1000px;
		padding-top: 1000px;
        background-color: #000; /* Fond noir */
		margin-top: 120px;				}

}

/*BladeRunner ------------------------------------------------------ */	
		

/*clem ------------------------------------------------------ */