@charset "UTF-8";
/* CSS Document */

body{margin: 0px;
padding: 0px;
    overflow-x: hidden !important;
font-family:'Satoshi-Medium';
background-color: black;
 -moz-osx-font-smoothing: grayscale; /* Lissage des polices pour macOS sur Firefox */
  -webkit-font-smoothing: antialiased; /* Lissage des polices pour macOS sur WebKit (Safari et Chrome) */

} 

html {
  scroll-behavior: smooth;
}    

@font-face {
    font-family: 'Satoshi-Medium';
    src: url('font/Satoshi-Medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Satoshi-Medium';
    src: url('font/Satoshi-Medium.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* Rendre les trois barres du menu burger blanches */


.navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");

}

/* Supprimer le contour gris autour du bouton */
.navbar-toggler {
    border: none; /* Supprime la bordure */
    box-shadow: none !important; /* Supprime toute ombre éventuelle */
    outline: none !important; /* Supprime le contour au focus */
}

.nav-link{
font-size:40px;
}
 .navbar-brand{
font-size:25px;

}
.navbar{
font-size:25px;

}

.navbar {
    background-color: black !important;
}

.navbar a {
    color: white !important;
}

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


@media (min-width: 992px) {

    .titrehome {
   font-size:100px !important; 
    }
    
.work{
padding-top: 250px !important;
}
.worktite h3{
font-size:150px !important;

}
    
.nav-link{
font-size:25px;
}
    
/* Taille et design du bouton */
.custom-toggler .menu-icon {
    width: 40px; /* Ajuste la taille selon ton image */
    height: auto;
}

/* Supprime le contour gris */
.navbar-toggler {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

    
    
}
.worktite h3{
font-size: 50px;
color:white;
}

.minature h2{
font-size: 20px !important;
}



.imagehome img{
border-radius: 30px;
}



.imagehome {
    position: relative;  /* Ajoute cette ligne pour que la position absolue fonctionne correctement */
}

.titrehome {
    font-size:85px;
    color: white;
    mix-blend-mode: exclusion;
    text-shadow: 4px 4px 20px rgba(0, 0, 0, 0.7);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centre le texte */
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.5);
}

.work img {
border-radius: 30px;
}

.title-overlay {
    padding: 0px 20px;
  font-size: 25px;
}

.navbar-nav .nav-link:focus, .navbar-nav .nav-link:active {
    outline: none !important;
    box-shadow: none !important;
}


.navbar {
    border: none;
}

.work .col-12 img {
    margin-bottom: 0;
}


img.img-fluid {
    width: 100%;
    height: auto;
}

.workgrand img{
border-radius: 30px;
}

/* Assure-toi que le conteneur de l'image est bien positionné */
.image-container {
    position: relative;
    overflow: hidden;  /* Cache les parties de l'image qui dépassent */
    border-radius: 30px; /* Coins arrondis, à ajuster ou enlever selon le style voulu */
}

/* Image par défaut */
.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;  /* S'assure que l'image couvre tout le conteneur sans déformation */
    transition: transform 0.9s ease, filter 0.9s ease; /* Transition fluide */
}

/* Effet de zoom lors du survol */
.image-container:hover img {
    transform: scale(1.1); /* Agrandissement de 10% */
    filter: brightness(0.8); /* Assombrir légèrement l'image */
    object-position: center;  /* Centrer l'image pendant le zoom */
}


/* Titre par-dessus l'image */
.title-overlay {
    padding: 0px 20px;
    font-size: 25px;
    font-weight: bold;
    color: white;
    position: absolute;
    bottom: 10px;
    left: 10px;
}


video{
border-radius: 30px;
}



footer{
color: white;
font-size:20px;
}


footer a{
color:white;
text-decoration: none;
}


footer a:hover{
  text-decoration: underline;
color:white;
}


.img-fluid{
border-radius: 30px; 
}


.abouttexte a{
color:white;
text-decoration: none;
font-size: 20px;
}

.abouttexte a:hover{
color:white;
text-decoration: underline;

}





h4{
font-size:40px;
color:white;
}


p{
font-size:20px;
color:white;
}


  .video-container iframe {
            width: 100%;
            height: 100%;
            border-radius: 30px; /* Applique aussi à l'iframe */
        }



.video-text {
    font-size: 16px;      /* Taille de texte */
    line-height: 1.6;     /* Espacement entre les lignes */
    text-align: left;     /* Aligner à gauche */
    margin-top: 20px;  
    color:white;/* Marge en haut */
    font-style: italic; 
}

/* Classe pour les éléments normaux */
.normal {
    font-weight: bold;    /* Texte en gras */
          /* Couleur du texte */
    font-style: normal; 
}

.flitre a{
color: white !important;
text-decoration: none;
font-size: 20px;
}


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