#contenu{
	background-color: #01171B;
	padding-bottom: 5%;
}

/* début style navbar */
.navbar{
	background-color: black !important;
	position: fixed !important;
    left:0;
	width: 100% !important;
    height: 4em;
	z-index: 1000;
}

/* Couleur du texte pour les liens de la barre de navigation */
.navbar-nav a.nav-link {
    color: white !important;
    font-size: 1.25em;
    margin-right: 2em;
	background-color: black;
}

/* Couleur du texte au survol des liens de la barre de navigation */
.navbar-nav a.nav-link:hover {
    background-color: lightgrey !important;
	color: black !important;
}

/* Couleur du texte pour les liens du dropdown */
.dropdown-menu a.dropdown-item {
    color: black !important;
    font-size: 1.25em;
}

/* Couleur du texte au survol des liens du dropdown */
.dropdown-menu a.dropdown-item:hover {
    background-color: lightgrey !important;
	color: black !important;
}

/* Couleur du texte pour les liens du dropdown au clic */
.navbar-nav .nav-item.dropdown.show .nav-link {
    color: white !important;
}

/* Style de base pour le lien de la navbar */
.navbar-brand,
.navbar-brand:focus,
.navbar-brand:active {
    color: white; /* Couleur de texte souhaitée */
    text-decoration: none; /* Supprime le soulignement */
    font-size: 1.5em;
    margin-right: 2em;
    margin-left: 0.5em;
}

/* Style lors du survol pour le lien de la navbar */
.navbar-brand:hover {
    color: lightgrey; 
    text-decoration: none;
}

/* Changer la couleur de l'icône */
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Optionnel : Changer la couleur du bouton au survol */
.navbar-toggler {
    border: none; /* Supprimer la bordure par défaut */
    outline: none; /* Supprimer l'outline */
}

.navbar-toggler:focus,
.navbar-toggler:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Ajouter un léger fond au survol */
}

/* Personnalisation des liens de la navbar */
.navbar-nav {
    --bs-nav-link-padding-x: 0.5rem; /* Nouvelle valeur */
}
/* fin style navbar */

/* style page d'accueil */
/* Le conteneur de la vidéo */
body, html {
    margin: 0;
    padding: 0;
    overflow: auto;  /* Autorise le défilement */
    height: 100%;
    width: 100%;
    font-family: Montserrat;
    color: #F5F5F7 ;
	scroll-behavior: smooth; /* défilement fluide */
}

/* Style pour la section d'accueil */
#accueil {
    position: relative;
    height: 100vh; /* Hauteur de la section : toute la hauteur de l'écran */
    overflow: hidden; /* S'assure que rien ne déborde de la section */
}

/* Conteneur centré */
.centered-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%; /* Centre verticalement et horizontalement */
}

/* La vidéo de fond */
.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* S'étend sur toute la largeur */
    height: 100%; /* S'étend sur toute la hauteur */
    object-fit: cover; /* Couvre toute la section sans distorsion */
    z-index: -1; /* Passe en arrière-plan */
}

/* Conteneur de la div centrale */
.centered-div-accueil {
    position: relative;
    background-color: rgba(0, 0, 0, 0.5); /* Couleur noire avec 50% d'opacité */
    padding: 20px 40px;
    border-radius: 10px;
    text-align: center;
    max-width: 80%;
    width: 800px;
    font-family: Poppins;
    color: #f5f5f7;

    /* Animation de fondu */
    opacity: 0;
    animation: fadeIn 2s ease-in-out forwards; /* animation de 2s */
}

/* Animation de fondu */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Style pour le titre */
.centered-div-accueil h1 {
    font-size: 5em;
    margin: 0;
}

/* Style pour la description */
.centered-div-accueil p {
    font-size: 2em;
    margin: 10px 0;
}

/* Barre blanche */
.centered-div-accueil .bar {
    width: 70%;
    height: 2px;
    background-color: white;
    margin: 10px auto;
}
/* fin style accueil */

.title{
	margin-left: 5%;
	padding-top: 10%;
	font-size: 50px;
	font-family: Poppins;
}

.subtitle {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 30px;
}

#presentation_container{
	display: flex;
    flex-direction: row; /* Alignement horizontal par défaut */
    align-items: center;
    flex-wrap: wrap; /* Pour passer en colonne si nécessaire */
    padding: 2%;
}

/* Photo */
#photo_Laurent {
    display: block; /* Assure qu'il s'affiche seul sur une ligne */
    margin: 0 auto; /* Centre horizontalement */
    width: 20%; /* Taille initiale */
    height: auto;
    border-radius: 10%;
}

/* Paragraphe */
#p_presentation {
    width: 50%;
    font-size: 22px;
    background-color: #1F2833;
    color: white; /* Texte en blanc pour le contraste */
    padding: 2%;
    border-radius: 5px;
    margin: 5% auto 0; /* Centre horizontalement et ajoute un espacement en haut */
    text-align: left;
}

/* début style parcours */
/* Timeline Container */
.parcours_container{
	margin-top: 6%;
	text-align: center;
}

.timeline {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    position: relative;
	align-items: center; 
}

/* Event Block */
.event {
    display: flex;
    align-items: center;
	position: relative; 
    gap: 20px;
	flex-wrap: wrap; /* Permet d'ajuster la flexibilité */
}

.logo {
    width: 275px;
    height: auto;
	background-color: white;
	padding: 2%;
	transition: transform 400ms ease;
}

.logo:hover {
    transform: scale(1.15);
}

.details {
	width: 600px;
	font-size: 20px;
	text-align: left;
}

h2 {
    font-size: 1.2rem;
    color: #FFFFFF;
    margin: 0;
}

h3{
	font-size: 1.5rem;
}

.date {
    color: #23A5B0;
    font-weight: bold;
    margin: 5px 0;
}

/* Ligne verticale au centre */
.event-line {
    width: 2px;
	top: 20px;
    background-color: white;
    height: 210px;
    position: relative;
}

.event-line::before {
    content: '';
    position: absolute;
    top: 0;
    left: -9px;
    width: 20px;
    height: 20px;
    background-color: #23A5B0;
    border: 2px solid white;
    border-radius: 50%;
}
/* fin style parcours */

/* début style compétences */
/* début techniques */
.card-title{
    font-weight: bold;
}

.row{
    margin-top: 10px;
}
.col {
    display: flex;
    flex-wrap: wrap; /* Permet de passer à la ligne si nécessaire */
    justify-content: center; /* Centre les sections horizontalement */
    gap: 20px; /* Espacement entre les sections */
  }

.card{
    width: 80%; /* Réduit la largeur de la carte */
}

.card img {
    height: 200px;
    width: 100%;  /* S'assurer que l'image prend toute la largeur du conteneur */
    object-fit: contain;  /* L'image s'ajuste sans être coupée */
}


/* fin techniques */
/* début outil */
#skills_container {
    display: flex;
    flex-wrap: wrap; /* Permet de passer à la ligne si nécessaire */
    justify-content: center; /* Centre les sections horizontalement */
    gap: 20px; /* Espacement entre les sections */
  }
  

.skills {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap; /* Passe les icônes à la ligne si nécessaire */
    padding: 2rem;
  }
  
  .skill {
    text-align: center;
    transition: transform 0.3s ease;
  }
  
  .skill img, .skill svg{
    width: 60px;
    height: 60px;
    object-fit: contain;
    transition: transform 0.3s ease, filter 0.3s ease;
  }
  
  .skill:hover img, .skill:hover svg {
    transform: scale(1.2);
    filter: brightness(1.2);
  }

  .skill i {
    font-size: 60px;
  }

  .section_skills {
    margin: 20px 0;
    text-align: center; /* Centre le contenu textuellement */
    background-color: #1F2833;
    border-radius: 5%;
}
.section_skills h2 {
    font-size: 1.5em;
    margin: 10px;
}
/* fin outil */
/* fin style compétences */

/* début style projets */
.modal{
    color: black;
    font-size: large;
}

/* Cache la modale par défaut */
.modale {
    display: none;
    position: fixed;
    z-index: 10000; /* Z-index élevé pour superposition */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
}

/* Style de l'image agrandie */
.modale-content {
    max-width: 100%;
    max-height: 100%;
    z-index: 10001; /* Contenu de la modale au-dessus */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    animation: zoom 0.3s ease;
}

/* Effet zoom */
@keyframes zoom {
    from {
        transform: scale(0.5);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Style du conteneur */
.image-container {
    position: relative;
    display: block;
    width: 70%; /* Largeur de l'image */
    height: auto;
    overflow: hidden;
    border-radius: 8px; /* Arrondi des bords */
    cursor: pointer;
    margin: 0 auto; /* Centre horizontalement */
}

/* effet avec l'oeil */
/* Style de l'image */
.image-container img {
    width: 100%;
    height: auto;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.3s ease;
}

/* Style de l'effet d'overlay */
.image-container .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); /* Fond grisé transparent */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0; /* Caché par défaut */
    transition: opacity 0.3s ease;
    z-index: 1;
}

/* Style de l'icône */
.image-container .icon-eye {
    color: #fff;
    font-size: 1.5rem;
    font-weight: bold;
}

/* Effet au survol */
.image-container:hover img {
    transform: scale(1.1); /* Zoom sur l'image */
}

.image-container:hover .overlay {
    opacity: 1; /* Affiche l'overlay */
}

.overlay .fa-eye{
    color: #23A5B0;
    
    
}

.icon-container{
    background-color: rgba(0, 0, 0, 0.7); /* Fond grisé transparent */
    border-radius: 15%;
    padding: 5%;
}

/* fin style projets */

/* Style du footer */
footer {
    background-color: #000000;
    color: white;
    text-align: center;
    padding: 20px 10px;
    position: relative;
    bottom: 0;
    width: 100%;
    min-height: 100px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

/* Style des liens dans le footer */
.lienFooter {
    color: white;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.lienFooter:hover {
    transform: scale(1.1);
}

/* Style des images dans le footer */
.logoFooter {
    width: 42px;
    height: 42px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

/* Style spécifique pour l'icône GitHub */
.lienFooter .fa-github {
    font-size: 42px; /* Taille similaire aux autres icônes */
    color: white;
    vertical-align: middle;
}

.lienFooter:hover .fa-github {
    color: #6e5494; /* Couleur GitHub au survol */
}

/* Style du bouton CV */
.btnCv {
    padding: 8px 16px;
    border-radius: 5px;
    font-weight: bold;
    transition: all 0.3s ease;
}

.btnCv:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}


/* On stylise la balise form */
#formulaire{
	width: 60%;
	padding: 10px;
	background-color: #1F2833 ;
}

/* On stylise les champs de saisie */
#formulaire input[type=email],#formulaire textarea[id=message],#formulaire input[type=text] /* virgule = et aussi */{
	width: 100%;
	padding: 15px;
	margin: 5px 0 22px 0;
	border: none;
	background-color:white;
}

#formulaire input[type=email]:focus,#formulaire textarea[id=message]:focus,#formulaire input[type=text]:focus{
	background-color: lightblue;
	outline: none;
}

#myForm{
	margin: 2% 0 0 30%;
}


.btn{
	transition: transform 400ms ease;
}

.btn:hover {
    transform: scale(1.15);
}

.btn-primary{
    background-color: #23A5B0;
}


/* Styles spécifiques pour les écrans mobiles */
@media (max-width: 768px) {
    footer {
        padding: 15px 5px;
        gap: 10px;
    }
    
    .logoFooter {
        width: 36px;
        height: 36px;
    }
    
    .lienFooter .fa-github {
        font-size: 36px;
    }
    
    .btnCv {
        font-size: 14px;
        padding: 6px 12px;
    }
}

/* Réinitialisation des styles en double */
footer {
    background-color: black;
    width: 100%;
}

.lienFooter {
    text-decoration: none;
    color: white;
    margin: 0 10px;
}

.content {
    display: flex;
    margin-bottom: 20px;
}

.content img {
    max-width: 210px;
    margin: 20px 20px 0 150px;
}

.content p {
    flex: 1;
	width: 10%;
	margin: 4% 0 0 3%;
	font-size: 25px;
}

.lien{
	color: #23A5B0 ;
	text-decoration: none;
}

.lien:hover {
    opacity: 0.7;
}


/* Media Queries */
/* Responsive : Écrans moyens */
@media screen and (max-width: 1024px) {
	.title{
		font-size: 45px;
	}

    #photo_Laurent {
        width: 30%;
    }
    #p_presentation {
        width: 60%;
        font-size: 20px;
    }

	.details {
		width: 430px;
	}

	#formulaire{
		width: 90%;
	}
	#myForm{
		margin: 2% 0 0 10%;
	}
	.logoFooter{
		width: 55px;
	}
	.btnCv{
		font-size: 18px;
	}
}

/*  Cette règle s'applique aux tablettes ou petits ordinateurs */
@media screen and (max-width: 768px) {
    #presentation_container {
        flex-direction: column; /* Passer en colonne */
    }
    #photo_Laurent {
        width: 50%;
    }
    #p_presentation {
        width: 80%;
        margin-top: 5%;
    }


    .event {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px; /* Moins d'espacement */
    }

    .logo {
        width: 200px; /* Réduction de la taille des logos */
    }

    .details {
        max-width: 100%; /* Occupe toute la largeur disponible */
        font-size: 18px;
    }

	.event-line {
		display: none;
    }
	.logoFooter{
		width: 50px;
	}
	.btnCv{
		font-size: 16px;
	}


}
/* Pour les mobiles*/
@media screen and (max-width: 480px) {
	.title{
		font-size: 40px;
	}

	#photo_Laurent {
        width: 70%;
    }
    #p_presentation {
        width: 90%;
    }

    .details {
		width: 300px;
	}

    h2 {
        font-size: 1rem;
    }

    h3 {
        font-size: 1.2rem;
    }
	.event-line {
        display: none;
    }

	#formulaire{
		width: 90%;
	}
	#myForm{
		margin: 2% 0 0 10%;
	}
	.logoFooter{
		width: 45px;
	}
	.btnCv{
		font-size: 14px;
	}

}