*{
	margin:0;
	padding:0;
}

.body{
	font-family:'Poppins', sans-serif;
 }

 .slider{
 	width:100%;
 	min-height:70vh;
 	aspect-ratio:16/9;
 	background:#000;
 	position:relative ;
     padding: 25px 36px;


 	
 }

 .slider-background{
 	width: 100%;
 	height: 114%;
 	object-fit: cover;
 	filter:brightness(60%) ;
 	border-radius: 50%;
    
 	

}
.slider-content{
    position:absolute;
    top:50%;
    left:50%;
    text-align:center;
    transform:translate(-50%,-50%)
    
}

h1{
    color:hsl(234, 100%, 66%);
    font-size:4rem;
}

.slider-content p{
    color:hsl(234, 100%, 66%);
    font-size:1.8rem ;

}

/* Style de base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
 }
 
 body {
    font-family: 'Arial', sans-serif;
    padding-top: 10px; /* Ajuste l'espace sous la navbar */
    line-height: 1.6;
 }
 
 h2 {
    text-align: center;
    padding: 30px 0;
    font-size: 2.5rem;
    color:hsl(234, 100%, 66%);
    font-weight: bold;
 }

 h3{
    font-size: 1.3rem;
	line-height: 2rem;
    color:white;
    text-align: center;
    padding-left: 75px;
    padding-right: 75px;
    font-weight: normal;

 }

 h4{
    font-size: 1.5rem;
    text-align: center;
    color: rgb(255, 255, 255);
   
 }
 h5{
    font-size: 1rem;
    color: white;
    text-align: center;
    font-weight: normal;
    font-family: Silkscreen;
 }

 p{
	font-size: 1.8rem;
	line-height: 1.7rem;
    color:hsl(234, 100%, 66%);
    text-align: center;
    font-weight: normal;
    font-family: Silkscreen;
    
   
    

}

body {
    font-family: 'Poppins', sans-serif; 
}

h1, h2, h3, h4 {
    font-family: 'Montserrat', sans-serif; /* Montserrat pour les titres */
}
 
 /* Style de la barre de navigation */
 .navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    transform: translateX(); /* Permet de centrer la navbar */
    background-color: black;
    z-index: 1000;
    padding: 10px 0;
    display: flex; /* Flexbox pour centrer le contenu */
   justify-content: center; /* Centrer horizontalement */
   align-items: center; /* Centrer verticalement */
 }
 
 .navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
    display: flex; /* Aligner les éléments horizontalement */
}
 
 
 .navbar li {
    display: inline-block;
    margin-right: 20px;
 }
 
 .navbar a {
    color: rgb(255, 255, 255);
    text-decoration: none;
    font-size: 1.2rem;
    padding: 10px 20px;
    display: inline-block;
    transition: background-color 0.3s ease;
    font-family: 'Poppins', sans-serif
    
 }
 
 .navbar a:hover {
    background-color: hsl(234, 100%, 66%);
    filter: opacity(60%);
 }
 
 /* Espacement des sections */
 section {
    padding: 40px 20px;
    background-color: #000000;
 }
 
 section#menu {
    background-color: black;
 }
 
 section#a-propos {
    background-color: #000000;
 }
 
 section#projets {
    background-color: #000000;
 }

 .video-container {
    display: flex; /* Utiliser flexbox */
    justify-content: center; /* Centrer horizontalement */
    align-items: center; /* Centrer verticalement */
   
}

video {
    max-width: 100%; /* S'assurer que la vidéo est responsive */
    height: auto; /* Conserver les proportions de la vidéo */
    margin-top: 25px;
}
 
 section#cv {
    background-color: #000000;
 }

 .mon-bouton {
    background-color:  hsl(218, 30%, 20%); /* Vert */
    color: white; /* Texte blanc */
    border: none; /* Pas de bordure */
    padding: 10px 76px; /* Espacement interne */
    text-align: center; /* Centrer le texte */
    text-decoration: none; /* Pas de souligné */
    display: inline-block; /* Disposition en ligne */
    font-size: 17px; /* Taille de la police */
    cursor: pointer; /* Curseur en forme de main */
    border-radius: 8px; /* Coins arrondis */
    transition: background-color 0.3s ease; /* Effet de transition */
    margin-top: 70px;
    margin-left: 200px;

}

.mon-bouton:hover {
    background-color:  hsl(234, 100%, 66%); /* Couleur au survol */
    filter: opacity(60%);
}

.mon-bouton:active {
    background-color:  hsl(234, 100%, 66%); /* Couleur lorsque le bouton est pressé */
}


 /* Section CV en 2 colonnes */
#cv .row {
    display: flex;
    flex-wrap: wrap; /* S'assure que les colonnes sont responsives */
}

#cv .col-md-6 {
    margin-bottom: 30px; /* Ajout d'un espacement entre les colonnes sur mobile */
}

/* Appliquez à l'ensemble de la section */
.text-centers {
    text-align: center; /* Centre le texte à l'intérieur des éléments */
    display: flex;      /* Utilisation de Flexbox pour centrer les éléments */
    justify-content: center; /* Centrer horizontalement */
    align-items: center; /* Centrer verticalement */
    height: 0px; /* Ajustez la hauteur selon vos besoins */
    margin-top: 114px;
    padding-right: 100px;
}

/* Pour centrer le contenu à l'intérieur des colonnes */
.container {
    display: flex;
    justify-content: space-around; /* Répartir les éléments avec un espacement égale entre eux */
    align-items: center; /* Centrer verticalement */
  
    
}

/* Assurez-vous que les images sont bien au centre et de la même taille */
img {
    max-width: 100%; /* S'assurer que les images ne débordent pas de leurs conteneurs */
    height: auto; /* Garder les proportions des images */
}

 
 /* Variables pour personnaliser facilement les couleurs */
:root {
    --card-bg-color: hsl(218, 30%, 20%); /* Couleur de fond de la carte */
    --progress-bg-color: hsl(218, 30%, 20%); /* Couleur de fond des barres */
    --progress-html-color: #e34f26; /* Couleur de la barre HTML */
    --progress-css-color: #1572b6; /* Couleur de la barre CSS */
    --progress-python-color: #306998; /* Couleur de la barre Python */
    --progress-php-color: #777bb3; /* Couleur de la barre PHP */
    --progress-chatgpt-color: #4f9a94; /* Couleur de la barre ChatGPT */
    --progress-js-color: #f7df1e; /* Couleur de la barre JS */
    --logo-size: 45px; /* Taille des logos */
    --progress-bar-height: 22px; /* Hauteur fixe des barres de progression */
 }
 
 /* Carte de compétences */
 .competences-card {
    background-color: var(--card-bg-color);
    border-radius: 10px;
    padding: 10px;
    width: 100%;
    max-width: 450px;
    margin: 60px;
    box-shadow: 0 1px 2px hsl(234, 100%, 66%);
    color: hsl(218, 30%, 20%);
    text-align: center;
    max-height: 530px;
 }
 
 .competences-card h3 {
    font-size: 1.8rem;
    margin-bottom: 5px;
    font-family: Silkscreen;
    color:hsl(234, 100%, 66%)
 }
 
 /* Style des compétences */
 .competence {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    justify-content: flex-start; /* Aligner les éléments à gauche */
 }
 
 .competence label {
    font-size: 1rem;
    display: block;
    margin-left: 5px;
    flex-grow: 1;
    font-family: Silkscreen;
    
 }
 
 /* Logo de chaque compétence */
 .competence-logo {
    width: var(--logo-size);
    height: var(--logo-size);
    margin-right: 10px;
 }
 
 /* Style des barres de progression */
 .progress-bar-container {
    width: 100%; /* Largeur constante */
    background-color: var(--progress-bg-color);
    border-radius: 10px;
    height: var(--progress-bar-height); /* Hauteur fixe */
    position: relative;
    margin: 8px 0; /* Espacement entre les barres */
    padding: 1px; /* Assurer que les barres commencent du bord */
    
 }
 
 /* La barre de progression elle-même */
 .progress {
    height: 100%; /* Hauteur fixe */
    transition: width 0.3s ease; /* Animation au changement de pourcentage */
    position: relative;
    
 }
 
 /* Pourcentage dans la barre de progression */
 .percentage {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: hsl(218, 30%, 70%);
    font-size: 1rem;
    font-weight: bold
 }
 
 
 section#contact {
    background-color: #000000;
 }
 
 /* Défilement fluide */
 html {
    scroll-behavior: smooth;
 }


 /* Section Contact */
#contact {
    background-color: #100c0c;
    padding: 50px 0;
    text-align: center;
}

#contact h2 {
    font-size: 2.5rem;
    color: hsl(234, 100%, 66%); /* Couleur du titre */
    margin-bottom: 30px;
}

/* Formulaire */
form {
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
    border-radius: 10px;
    background-color: hsl(0, 0%, 0%); /* Fond du formulaire */
    box-shadow: 0 4px 8px hsl(218, 43%, 50%); /* Ombre pour le formulaire */
}

/* Style des labels */
label {
    display: block;
    font-size: 1.4rem;
    color: hsl(234, 100%, 66%);
    margin-bottom: 8px;
}

/* Champs de saisie (input, textarea) */
form .form-group input[type="text"],
form .form-group input[type="email"],
form .form-group textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 20px;
    border: 2px solid hsl(218, 30%, 20%); /* Bordure initiale */
    border-radius: 6px;
    font-size: 1rem;
    background-color: hsl(218, 30%, 20%); /* Fond plus clair */
    color: hsl(218, 30%, 70%); /* Texte plus visible (pas blanc) */
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

/* Styles au focus des champs */
form .form-group input[type="text"]:focus,
form .form-group input[type="email"]:focus,
form .form-group textarea:focus {
    border-color: hsl(218, 30%, 70%); /* Bordure bleue au focus */
    background-color: hsl(234, 100%, 66%); /* Fond plus clair au focus */
    outline: none;
}

/* Ajouter un style particulier au textarea */
form .form-group textarea {
    resize: vertical; /* Optionnel: permet de redimensionner le textarea */
}

/* Style du bouton envoyer */
button[type="submit"] {
    background-color: hsl(234, 100%, 66%); /* Couleur de fond bleu clair */
    color: hsl(218, 30%, 20%); /* Texte blanc */
    font-size: 1.2rem;
    padding: 12px 30px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* Effet au survol du bouton */
button[type="submit"]:hover {
    background-color: hsl(234, 100%, 66%); /* Couleur plus foncée au survol */
}

/* Effet au clic sur le bouton */
button[type="submit"]:active {
    background-color:hsl(234, 100%, 66%); /* Couleur encore plus foncée au clic */
}



/* Cache initialement le texte de contact */
.contact-info {
    display: none;
    font-size: 1rem;
    color: white;
    text-align: center;
    
}

.col-md-4:hover .contact-info {
    display: block;
    position: absolute;
    margin-top: 5px;
    font-size: 0.5rem;
    text-align: center;
    
}
.tel:hover{
    transform: scale(1.2);
    filter:brightness(60%)
    
}
.mail:hover{
    transform: scale(1.2);
    filter:brightness(60%)
}
.linkedin:hover{
    transform: scale(1.2);
    filter:brightness(60%)
}


footer {
    background-color: hsl(0, 0%, 0%);
    color: #fff;
    padding: 0px 50px;
    text-align: center;
    position: relative;
    bottom: 0;
    width: 100%;
  }
  
  
  .footer-container {
    max-width: 1200px;
    margin: 0 auto; 
    display: flex; /* Afficher les éléments en ligne */
    justify-content: center; /* Centrer les éléments horizontalement */
    gap: 30px; /* Espacement entre les éléments */
    flex-wrap: wrap; /* Pour gérer l'adaptation sur les petits écrans */
    padding: 25px;
    
  }
  
  
  .footer-text {
    font-size: 14px;
    cursor: pointer; 
    transition: color 0.3s; 
    margin-top: 50px;
  }
  
  
  .footer-text:hover {
    color: #f0a500; 
  }
  
  
  .footer-info {
    font-size: 12px;
    color: #ffffff;
    text-align: center;
    width: 100%;
   
  }
  
  
  .col-md-3 p{
    color: #8c8c8c;
    margin-top: 10px;
    font-size: 1rem;
    font-family: 'Times New Roman', Times, serif;
  }