/* Styles généraux */
body, html {
    margin: 0;
    padding: 0;
    font-family: "Teko", sans-serif;
    background-color: #040506;
    color: #FFF;
}

header {
    display: flex;
    justify-content: center;
    padding: 10px 0;
    position: fixed; /* Rend l'en-tête fixe */
    width: 100%; /* Assure que l'en-tête s'étend sur toute la largeur */
    top: 0; /* Fixe l'en-tête en haut de la page */
    z-index: 1000; /* Garantit que l'en-tête reste au-dessus des autres éléments */
    border-bottom: #FFF 1px solid;
    backdrop-filter: blur(2px);
}

main {
    padding-top: 50px; /* Ajoute un espace en haut pour éviter que le contenu soit caché sous l'en-tête */
    background-color: #040506;
}

button {
    padding: 8px 16px;
    margin : 3px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 20px;
    border-color: #FFF;
    color: #FFF;
    background-color: #040506;

}

.boule {
    position: fixed;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(242, 255, 101, 1) 0%, rgba(255,235,0,0.4) 100%);
    box-shadow: 0 0 2000px rgba(242, 255, 101), 0 0 2000px rgba(255, 234, 0, 0.18);
    filter: blur(100px);
    animation: growShrink 20s infinite;
    z-index: 0; /* Assurez-vous que les boules soient derrière l'image */
}

@keyframes growShrink {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.5);
    }
}

#bouleA {
    top: 20px; /* Décalé du bord */
    left: 100px; /* Décalé du bord */
}

#bouleB {
    bottom: 20px; /* Décalé du bord */
    right: 100px; /* Décalé du bord */
}

#bouleA {
    animation: growShrink 20s infinite;
}

#bouleB {
    animation: growShrink 20s infinite;
}

#three-container {
    width: 100%;
    height: 80vh; /* Assurez-vous que la hauteur est correcte pour afficher le canvas */
    background-image: url('gregoryaccueil.png'); /* Remplacez par le chemin de votre image */
    background-size: contain; /* Ajuste l'image pour couvrir tout le conteneur */
    background-position: center; /* Centre l'image dans le conteneur */
    background-repeat: no-repeat; /* Empêche la répétition de l'image */
}


.portfolio-section {
    text-align: center;
    position: relative;
    overflow: hidden;
}

.portfolio-section h1 {
    margin-top: 20px;
    font-size: 48px;
    color: #FFF;
}

.info {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    color: #FFF;
    width: 100%;
}

.name, .year, .Portfolio{
    font-size: 48px;
    margin-top: 20px;
    font-weight: bold;
    color: #FFF;
    flex: 1;
    text-align: center;
}

.name {
    text-align: left;
}

.year {
    text-align: right;
    padding-right: 20px;
    margin-left: -20px;
}

.portfolio {
    text-align: center;
}

.projet-section{
    position: relative;
}

.citation{
    text-align: center;
    font-size: 20px;
}

.projet-h2{
    text-align: center;
    font-size: 40px;
    color: #FFF;
}

.projet-h2 span{
    color: #EBFF00;
}

.card-container {
    z-index: 4;
    backdrop-filter: blur(3px);
}

.contenaire-carte-projet {
    display: flex;         /* Utilise flexbox pour le layout */
    flex-direction: column; /* Organise les enfants en colonne */
    align-items: center;    /* Centre les enfants horizontalement */
    width: 100%;            /* Utilise toute la largeur disponible */
    margin-top: 20px;       /* Ajoute un peu d'espace en haut si nécessaire */
}

.project-container {
    background: rgb(4, 5, 6, 0.5);
    opacity: 50;
    padding: 5% 20px 5% 20px;
    overflow: hidden;
    transition: all 0.6s cubic-bezier(.615,.19,.305,.91);
    width: 60%;
    display: grid;
    grid-template-columns: 5% 42.5% 42.5% 10%;
    margin-bottom: 30px;
    border: solid #A2A2A2 2px;
}

.project-container:hover{
    grid-template-columns: 0% 47.5% 42.5% 10%;
}

.project-container:hover .grid-item:first-child {
    visibility: hidden; /* Rend le premier enfant invisible lors du survol */
  }

.project-number{
    display: flex;
    justify-content: left;
    justify-items: center;
    transition: visibility 0.1s ease;
    color: #FFF;
    margin-top: 20px;
    font-size: 48px;
}


.project-name{
    color: #EBFF00;
    font-size: 56px;
}

.project-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 5px; /* Ajustez cette valeur selon vos besoins */
}

.tools{
    background-color: #FFF;
    border-radius: 8px;
    color: #040506;
    border: solid 2px #EBFF00;
    padding: 2px 10px;
    font-size: 22px;
    margin-bottom: 10px;
}

.image-projet-1 img {
    position: absolute;
    transition: opacity 0.6s cubic-bezier(.615,.19,.305,.91), transform 0.6s cubic-bezier(.615,.19,.305,.91); /* Gère la transition avec un délai pour visibility */
    width: 23%;
    width: 23%;
    opacity: 0;
    margin-top: -5%;
    border-radius: 5px;
    border: #FFF solid 2px;
    z-index: 20;
    transform: scale(1); /* État initial avec échelle normale */
}

.project-container:hover .image-projet-1 img {
    transform: scale(1.2); /* Agrandit l'image lors du survol */
    opacity: 100;
  }

.project-container .grid-item:nth-child(3):hover .image-projet-1 img {
    transform: scale(1.2) rotate(-6deg); /* Agrandit et tourne l'image lors du survol */
}

.image-projet-2 img {
    position: absolute;
    transition: opacity 0.6s cubic-bezier(.615,.19,.305,.91), transform 0.6s cubic-bezier(.615,.19,.305,.91); /* Gère la transition avec un délai pour visibility */
    width: 23%;
    width: 23%;
    opacity: 0;
    margin-top: -5%;
    border-radius: 5px;
    border: #FFF solid 2px;
    z-index: 19;
    transform: scale(1); /* État initial avec échelle normale */
}

.project-container:hover .image-projet-2 img {
    transform: scale(1.2); /* Agrandit l'image lors du survol */
    opacity: 80;
  }

.project-container .grid-item:nth-child(3):hover .image-projet-2 img {
    transform: scale(1.2) rotate(-5deg); /* Agrandit et tourne l'image lors du survol */
}

.image-projet-3 img {
    position: absolute;
    transition: opacity 0.6s cubic-bezier(.615,.19,.305,.91), transform 0.6s cubic-bezier(.615,.19,.305,.91); /* Gère la transition avec un délai pour visibility */
    width: 23%;
    width: 23%;
    opacity: 0;
    margin-top: -5%;
    border-radius: 5px;
    border: #FFF solid 2px;
    z-index: 18;
    transform: scale(1); /* État initial avec échelle normale */
}

.project-container:hover .image-projet-3 img {
    transform: scale(1.2); /* Agrandit l'image lors du survol */
    opacity: 70;
  }

.project-container .grid-item:nth-child(3):hover .image-projet-3 img {
    transform: scale(1.2) rotate(-4deg); /* Agrandit et tourne l'image lors du survol */
}

.image-projet-4 img {
    position: absolute;
    transition: opacity 0.6s cubic-bezier(.615,.19,.305,.91), transform 0.6s cubic-bezier(.615,.19,.305,.91); /* Gère la transition avec un délai pour visibility */
    width: 23%;
    width: 23%;
    opacity: 0;
    margin-top: -5%;
    border-radius: 5px;
    border: #FFF solid 2px;
    z-index: 17;
    transform: scale(1); /* État initial avec échelle normale */
}

.project-container:hover .image-projet-4 img {
    transform: scale(1.2); /* Agrandit l'image lors du survol */
    opacity: 60;
  }

.project-container .grid-item:nth-child(3):hover .image-projet-4 img {
    transform: scale(1.2) rotate(-3deg); /* Agrandit et tourne l'image lors du survol */
}

.image-projet-5 img {
    position: absolute;
    transition: opacity 0.6s cubic-bezier(.615,.19,.305,.91), transform 0.6s cubic-bezier(.615,.19,.305,.91); /* Gère la transition avec un délai pour visibility */
    width: 23%;
    width: 23%;
    opacity: 0;
    margin-top: -5%;
    border-radius: 5px;
    border: #FFF solid 2px;
    z-index: 16;
    transform: scale(1); /* État initial avec échelle normale */
}

.project-container:hover .image-projet-5 img {
    transform: scale(1.2); /* Agrandit l'image lors du survol */
    opacity: 50;
  }

.project-container .grid-item:nth-child(3):hover .image-projet-5 img {
    transform: scale(1.2) rotate(-2deg); /* Agrandit et tourne l'image lors du survol */
}

.image-projet-6 img {
    position: absolute;
    transition: opacity 0.6s cubic-bezier(.615,.19,.305,.91), transform 0.6s cubic-bezier(.615,.19,.305,.91); /* Gère la transition avec un délai pour visibility */
    width: 23%;
    width: 23%;
    opacity: 0;
    margin-top: -5%;
    border-radius: 5px;
    border: #FFF solid 2px;
    z-index: 15;
    transform: scale(1); /* État initial avec échelle normale */
}

.project-container:hover .image-projet-6 img {
    transform: scale(1.2); /* Agrandit l'image lors du survol */
    opacity: 40;
  }

.project-container .grid-item:nth-child(3):hover .image-projet-6 img {
    transform: scale(1.2) rotate(-1deg); /* Agrandit et tourne l'image lors du survol */
}

.fenetre-bouge {
    width: 100vw;
    height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.container-fen {
    width: 100%;
    height: 100%;
    position: relative;
}

.draggable {
    color: white;
    cursor: move;
    user-select: none;
    position: absolute;
    top: 0;
    left: 0;
    border: #A2A2A2 1px solid;
    background-color: rgba(162, 162, 162, 0.2);
}

#div1 {
    left: 5vh;
    top: 0vh;
}

#div2 {
    left: 70vh;
    top: 40vh;
}

#div3 {
    left: 110vh;
    top: 3vh;
}

#div4 {
    left: 10vh;
    top: 48vh;
}

#div5 {
    left: 130vh;
    top: 50vh;
}


.no-transition {
    transition: none !important;
}

.lien-contact {
    display: block; /* Or use display: inline-block; if you prefer */
    margin-bottom: 5px; /* Adds space between links */
    color: white; /* Ensure the text is visible on the background */
    text-decoration: none; /* Optional: remove underline from links */
    font-size: 20px;
    transition: color 0.3s, transform 0.3s; /* Ajoute une transition douce */
}

.lien-contact:hover {
    color: #EBFF00; /* Change la couleur du texte au survol */
    transform: scale(1.1); /* Agrandit légèrement l'icône au survol */
}


.lien-contact-div{
    display: inline-block;
}


.barre-haut{
    display: flex;
    padding: 5px;
    background-color: #040506;
    border-bottom: solid 1px #A2A2A2;
}

.titre-fenetre{
    padding: 0;
    margin: 0 150px 0 0;
    font-weight: 500;
    font-size: 20px;
}

.fa-minus{
    margin-right: 10px;
    font-size: 13px;
}

.fa-square{
    margin-right: 10px;
    font-size: 13px;
}

.fa-x{
    font-size: 13px;
}

.reste-fenetre{
    padding: 20px;
    font-size: 16px;
}

.hobbies{
    font-size: 20px;
    margin: 0px;
    margin-top: 4px;
}

.emoji-hobbies{
    font-size: 13px;
    margin-right: 3px;
}

.chiffre-hobbies{
    margin-right: 5px;
    color: #A2A2A2;
}

.reste-fenetre-img {
    width: 100%; /* ou toute autre largeur désirée */
    height: 250px; /* ou toute autre hauteur désirée */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.image-portrait {
    width: 100%;
    height: 100%;
    object-fit: cover; /* adapte l'image pour remplir la div en gardant les proportions */
}

.mon-profil {
    text-align: center;
    font-size: 48px;
    color: #FFF;
}

.gras-apm{
    color:#EBFF00;
}

.reste-fenetre-apm{
    padding: 20px;
    font-size: 20px;
    width: 65vh;
}

.titre-fenetre-apm{
    padding: 0;
    margin: 0 50vh 0 0;
    font-weight: 500;
    font-size: 20px;
}

.reste-fenetre-pp{
    padding: 20px;
    font-size: 16px;
    width: 31vh;
}

.reste-fenetre i{
    font-size: 15px;
    margin-left: 5px;
    transition: color 0.3s, transform 0.3s; /* Ajoute une transition douce */
}

.lien-contact:hover i {
    color: #EBFF00; /* Change la couleur de l'icône au survol */
    transform: scale(1.1); /* Agrandit légèrement l'icône au survol */
}

/* Styles pour la classe annee-projet */
.annee-projet {
    display: flex;
    align-items: center;
    color: #EBFF00;
    font-size: 48px;
    margin-top: 20px;
    transition: color 0.3s, transform 0.3s; /* Ajoute une transition douce */
}

/* Styles pour la classe project-year */
.project-year {
    position: relative;
    transition: transform 0.3s; /* Ajoute une transition douce */
    margin-left: 20px;
}

/* Styles pour les icônes à l'intérieur de project-year */
.project-year i {
    opacity: 0;
    margin-left: 10px;
    transition: opacity 0.3s, transform 0.3s, color 0.3s;
    transform: scale(0.1);
}

/* Styles de survol pour project-container */
.project-container:hover .annee-projet {
    transform: scale(0.9);
}

/* Styles de survol pour project-year */
.project-container:hover .project-year i {
    opacity: 1;
    transform: scale(0.5);
}

.project-year i:hover{
    color: #FFF;
}

.alignement-centre{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    margin-top: 15%;
    margin-bottom: 2%;
}

.nom-projet h3{
    font-size: 6rem;
    margin: 0;
}

.nom-projet h2{
    color: #EBFF00;
}

.photo-pres {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 5%;
    box-sizing: border-box;
    border: none;
    z-index: 9;
}

.photo-presentation{
    max-width: 90%;
    max-height: 100%;
    object-fit: contain;
    border: none;
    z-index: 9;
}

.informations-projet {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}


.tableau-projet {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto auto 1fr;
    gap: 10px;
    width: 80%;
    padding: 3px;
    margin-bottom: 60px;
}

.case-tableau-projet {
    padding: 10px;
}

.case-tableau-projet .tools{
    margin-bottom: 10px;
}


.titre-case {
    font-size: 18px;
    color: #FFF;
    margin: 0;
}

.texte-case {
    font-size: 20px;
    margin: 0;
}

h4#compet{
    margin-bottom: 20px;
}

.visiter-le-site {
    background-color: #EBFF00;
    color: #040506;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 8px;
    font-size: 18px;
    text-align: center;
    display: block;
    width: 100%;
}

a:-webkit-any-link {
    cursor: pointer;
    text-decoration: none;
}

.project-container {
    /* Ajoutez vos styles ici */
    cursor: pointer; /* Pour indiquer que c'est cliquable */
}

.carousel-container {
    position: relative;
    width: 100%;
}

.counter {
    position: fixed;
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
    font-size: 40px;
    font-weight: bold;
    padding: 10px;
    border-radius: 5px;
    z-index: 10;
    opacity: 0;
    color: #FFF;
    transition: opacity 0.5s ease-in-out; /* Ajout de la transition pour l'apparition/disparition */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.counter .current {
    font-size: 40px;
    margin-bottom: 20px;
}

.counter .bar {
    width: 50px;
    height: 5px;
    background-color: #FFF;
    margin: 5px 0;
}

.counter .total {
    font-size: 40px;
    margin-top: 20px;
}

.carousel {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.carousel-item {
    width: 80%;
    margin: 20px 0;
    transition: transform 0.5s ease, filter 0.5s ease;
}

.carousel-item img {
    width: 100%;
    height: auto;
    display: block;
    margin-left: 100px;
}

.carousel-item.small {
    transform: scale(0.8);
    filter: brightness(50%);
}

.carousel-item.active {
    transform: scale(1);
    filter: brightness(100%);
}

.test{
    height: 100vh;
}

.aligner{
    text-align: center;
}

.resultat{
    font-size: 50px;
    color: #FFF;
}

.competences-dev {
    font-size: 50PX;
}

.competences-dev span{
    color: #EBFF00;
}

.aligner p{
    margin-left: 100px;
    margin-right: 100px;
    font-size: 20px;
}

.alignement-centre p{
    margin-left: 30%;
    margin-right: 30%;
    font-size: 20px;
    text-align: center;
}

.alignement-centre .warning-clic{
    margin-left: 30%;
    margin-right: 30%;
    font-size: 20px;
    text-align: center;
    color: #EBFF00;
}

.titre-projet {
    text-align: center;
}

.alignement-centre a{
    margin-right: 5px;
    margin-left: 5px;
    color: #EBFF00;
    font-size: 30px;
}