/* Contient toutes les modifications qui ne s'appliquent qu'à la page d'accueil */

/* PARTIE PAGE ACCUEIL */
main.Accueil{
    width: 90%;
    display: flex;
    /*background-color: #0d1117; */
    padding-top: 5%;
    overflow: hidden;
    flex-direction: column;
    align-items: center;
}

#Accueil-HautPage{
    display : flex;    
    justify-content: center;  
    width: 100%;
    flex-direction: column;
    margin-bottom: 1vh;
}

#Accueil-HautPage>p {    /*Elements communs à l'affichage nom et recherche stage*/
    overflow: hidden;
    max-width: 100%; /* Empêche l'élargissement excessif en largeur */
    max-height: fit-content; /* S'adapte au contenu en hauteur */
    flex-shrink: 0; /* Empêche le rétrécissement */
    flex-grow: 0; /* Empêche l'expansion */
}

#Accueil-HautPage>p:first-child {    /*Affecte l'affichage de mon nom prénom */
    margin-left: 0%;
    padding-right: 8%;
    margin-bottom: 2%;
    display : block;
    
}
#Accueil-HautPage  p , #Accueil-HautPage img{
    animation:  apparition 0.8s ease forwards;
}

#Accueil-BasPage{
    box-sizing: border-box;     
    flex-wrap: wrap;  
       
}

div.Accueil{
    display:flex;
    flex-direction: row;
    justify-content: space-evenly;
    width: 100%;
}

div>p.TitreMenu {    
    color: #BED3C3;
    font-family: 'Times New Roman', Times, serif;
    font-weight: 20;
    font-size: 3.3rem;
    text-shadow: 2.2px 2.2px 0 #000, -0.8px -0.8px 0 #000, 0.8px -0.8px 0 #000, -0.8px 0.8px 0 #000, 0.8px 0.8px 0 #000;
     
   
}

#Accueil-imgTitre{
    display: flex;
    align-items: center;
    
}

.tete{
    width: 13.6vw;
    height: auto;
    margin-left: 1.7vw;
    border-radius: 500px;
    border: #fff solid 1px;
}
.TitreMenu{
    margin: auto 10% 0 auto;
    text-align: start;
    width: 60%;
    margin-bottom: auto;
}

/*Animation lorsque l'on survole un des 3 menus disponibles */
.Menu>a {
    transition: all 180ms;
}

.Menu>a:hover {
    color: transparent;
    -webkit-text-stroke-width: 0.05em;
    -webkit-text-stroke-color: white;
}

.LangageCadre{
    width: 80%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding-top: 6%;
}

.LangageCadre>div{
    display: flex;
    flex-direction: wrap;
    box-sizing: border-box;
}
.container {
    
    display: flex;
    flex-wrap: wrap; /* Permet de passer à une nouvelle ligne si nécessaire */
    gap: 2em; /* Espacement entre les éléments */
    justify-content: space-between; /* Espacement équilibré entre les colonnes */
    
}

.LangageCadre3{
    width: 80%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding-top: 8%;
}

.container3 {
    
    display: flex;
    flex-wrap: wrap; 
    gap: 5em; /* Espacement entre les éléments */
    justify-content: space-around; /* Espacement équilibré entre les colonnes */
    width: 70%;
}
.hidden{
    display : none;
}

.encadreLangage{
    display: flex;
    height: 9em;
    justify-content:space-around;
    align-items: center;
    padding-top: 0.3em;
    padding-bottom: 0.3em;
    flex: 4 0 calc(33% - 3em); /* Chaque div occupe 50% de la largeur moins l'espace */
    box-sizing: border-box; /* Inclut le padding dans le calcul de la largeur */
    margin-bottom: 1em;
}

#projets {
    gap: 2em;
}

#projets > .encadreLangage > img {
    width: 40%;
    height: 100%;
    border-radius: 12px 0px 0px 12px;
    margin-left: 10px;
}

#projets > .encadreLangage > .sousEncadreLangage {
    margin-bottom: 8px;
}
#projets > .encadreLangage > .sousEncadreLangage > a {
    text-align: end;
}

#projets > .encadreLangage > .sousEncadreLangage > p{
    margin-bottom: 5px;
}
.container .encadreLangage > img,.container3 .encadreLangage > img{
    width: 6em;
    height: 6em; 
    object-fit:contain; /*Evite que l'image déborde*/
    flex-grow: 3;
    padding-left: 8px;
}



.sousEncadreLangage > h4{
    color : white;
    
    text-shadow:
    0 0 0.3em rgba(202,228,225,0.92),
    0 0 1.9em rgba(202,228,225,0.34),
    0 0 0.7em rgba(30,132,242,0.52),
    0 0 1.4em var(--dark-blue-color),
    0 0 2.1em rgba(30,132,242,0.78),
    0 0 3.7em var(--dark-blue-color);
}

.sousEncadreLangage {
    flex-grow: 4;
    text-align: start; 
}

.sousEncadreLangage > p{
    color : white;
    text-shadow:
    0 0 6px rgba(202,228,225,0.92),
    0 0 30px rgba(202,228,225,0.34),
    0 0 12px rgba(30,132,242,0.52),
    0 0 21px var(--dark-blue-color), 
    0 0 34px rgba(30,132,242,0.78),
    0 0 54px ;
    padding-left: 1em;
}

.LangageCadre>h2{
    color : white;
}
.LangageCadre3>h2{
    color : white;
}
/* https://blog.dorianguilmain.com/comment-creer-un-effet-neon-en-css/ */
.encadreLangage {
    border-radius: 12px;
    /*box-shadow:
      0 0 0.5em #fff,
      inset 0 0 0.5em #fff,
      0 0 1em #37f713,
      inset 0 0 1em #37f713,
      0 0 2em #37f713,
      inset 0 0 2em #37f713; */
      animation: flashing 9s infinite alternate; 
      box-shadow:
        0 0 0.2em #fff,
        inset 0 0 0.1em #fff,
        0 0 1em var(--light-blue-color),
        inset 0.1em 0 0.2em var(--light-blue-color),
        0 0 0.2em var(--light-blue-color),
        inset 0 0 0.2em white;

  }

 @media (max-width : 1000px) {
    main.Accueil {
        overflow-x: hidden; /* Hide horizontal scrollbar */
        overflow-y: scroll; /* Add vertical scrollbar */
    }
    .container3 {
        width: auto;
    }
 }
 /*
@keyframes flashing {
    from {
        box-shadow:
        0 0 0.5em #fff,
        inset 0 0 0.5em #fff,
        0 0 1em var(--light-blue-color),
        inset 0 0 1em var(--light-blue-color),
        0 0 2em var(--light-blue-color),
        inset 0 0 2em var(--light-blue-color); 
      }
    
      to {
        box-shadow:
        0 0 0.5em #fff,
        inset 0 0 0.5em #fff,
        0 0 1em #37f713,
        inset 0 0 1em #37f713,
        0 0 2em #37f713,
        inset 0 0 2em #37f713; 
      } 
}
*/