/*Portfolio Lily*/
.dNone { /* + display flex du welcome a decommenter */
    display:none;
}




.maintenance {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

h1, p {    
    text-align: center;
}


.maintenance img {
    width:30%;
    padding: 3% 0;
}

/*navigateur*/

/*Nav général*/
#navbar {
    position: fixed;    
    width:100%;
    display: flex; 
    justify-content: space-between;
    z-index: 2;
}

nav {
    background-color:#24445C;
    color:white;
}

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

nav a:hover {
    text-decoration: underline;
}

/*Nav button (left)*/
.lang_button {
    width: 30%;
    display: flex; 
    justify-content: flex-end;
    width: 10%;
}

nav p {
    padding-right: 5%;
    padding-left: 5%;
}

.back_button {
    height: 10%;
    width: 6%;
    background-color: white;
    border-radius: 40%;
    align-self: center;
    position:relative;
    display: flex;
    justify-content: flex-start;
}

button {
    position:absolute;
    height: 10px;
    width: 10px;
    border-radius: 50%;
}

.button_en {
    left:0;
    top: 50%;
    transform: translateY(-50%);
}

.button_fr {
    right:0;
    top: 50%;
    transform: translateY(-50%);
}

/*Nav (right)*/

ul {
    list-style: none;
    display: flex;    
    justify-content: flex-end;  
    width: 70%; 
}

li {
    text-transform: uppercase;
    text-align: center;
    width: 20%;
}

/*Burger*/
.burger-btn {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.line {
    width: 25px;
    height: 3px;
    background-color: white;
    margin: 3px 0;
}

/*Section welcome*/

#welcome {
    position:relative; 
    z-index: 1;
    background-color:#24445C;    
    color:white; 
    height: 520px;
    /* display:flex; */
    justify-content: space-evenly;
    align-items: center;
}

#welcome img {
    width: auto;
    height: 500px;
    align-self:flex-end
}

.aside {
    width: 20%;
    border-radius: 5% 35% 5% 35%;
    border-style: solid;
    border-color: rgb(56, 88, 112);
    padding: 1% 3% 2% 2%;   
}

.aside p {
    margin: 0;
}

/*section projects*/

.block_projects {
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 20em);
    grid-row-gap: 25px;
    grid-column-gap: 8%;
    justify-content: center;
    padding: 0 20%;     
}

.block_projects img {    
    object-fit: cover;
    width: 100%;
    height: 100%;
    border: 3px solid #24445C;
    padding: 1%;    
    box-sizing: border-box;    
}

.lien_hover {
    position:relative;
}

.txt_hover {
    position:absolute;
    top:0; right:0; left:0; bottom:0;    
    color:white;
    font-size: 100%;
    background: rgba(0, 0, 0, 0.7);
    display:none;   
    text-align: center;
    padding: 5% 6%;
}

.lien_hover:hover .txt_hover{
    display:block;        
}

.lien_hover:hover .txt_hover h3{
    padding-bottom: 10%;
}

.origin_work {
    padding-top: 15%;
    opacity: 0; /* Rend le texte initialement invisible */
    transition: opacity 0.3s ease; /* Ajoute une transition de l'opacité pour un effet en douceur */
}

.lien_hover:hover .origin_work {
    opacity: 1; /* Rend le texte visible quand survolé */
    transition-delay: 1s; /* Ajoute un délai d'une seconde avant que le texte ne devienne visible */
    animation: blink 1s ease-in-out forwards; /* Lance l'animation blink après le délai */
}

@keyframes blink {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/*section skills*/

.full_tech {
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-template-rows: auto auto auto auto;
    gap: 10px;
    border: 3px solid #24445C;
    margin: 0 auto;
    max-width: 30%;
}

.header_tech {
    padding: 10px 10px 0 10px;
    text-align: center;
    grid-column: 1 / span 4; 
}

.header_tech h4 {
    border-bottom: 3px solid #24445C;
    color: #24445C;
    margin-top:0;
    padding-bottom: 5%;
}

.logo, .name {
    padding: 0 10px 10px 10px ;
    text-align: center;
}

.logo img {
    width: 60px;
    height:auto;
}
   
.name {
    display: none;
    color: #24445C;
}

.logo:hover ~ .name {
    display: block;
}

/*Section contact*/

.links {
    display:grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    gap: 10px;   
    justify-content: center;
    align-items: center;
}

.logo_rzo:nth-child(3) {
    grid-column: span 2;
}

.link {
    text-decoration: underline;
    color: black;
}

.logo_rzo {
    padding: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.link:hover {
    text-decoration:none;
}

.link_img {
    text-decoration:none; 
}

.logos {
    max-width: 10%;    
    margin-bottom: 5px;
}