*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


body{
    background:black;
    color:white;
    font-family:Arial, Helvetica, sans-serif;
}




/* HEADER */
header{
    background: rgba(255, 255, 255, 0.25);
    display:flex;
    justify-content:space-between;
    
    

    align-items: center;    
    padding: 0 10%;           
    height: 60px;             

    position: sticky;
    top: 0;
    z-index: 100;
}

.contact{
    font-size:2rem;
    font-weight:400;


}

.logo img{
    width:70px;
    height:40px;
    object-fit:cover;
    display:block;
}


/* CONTENEUR PRINCIPAL */
.container{
    width:80%;
    max-width:1300px;
    margin:auto;
    padding-top: 25px;
    padding-bottom:25px;
}



/* GRILLE DE PROJETS*/
.grid-projets{
    padding-top: 10px;
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    grid-gap:35px 25px;
}


/* ARTICLE DES PROJETS */
.projet{
    display:flex;
    flex-direction:column;
}

section{
    padding-top: 50px;
    width: 80%;
    max-width:1300px;
    margin:auto;
    padding-bottom: 10px;

    margin: 40px auto;
}

section h3{
    font-size: 2.5rem;
}

.projet img{
    width:100%;
    aspect-ratio:1 / 1;
    object-fit:cover;
    display:block;

}

.projet h2{
    margin-top:10px;
    font-size:1rem;
    font-weight:400;
    line-height:1;
}

/* Pour retirer le soulignement du lien et garde la couleur blanche */
a {
    text-decoration: none;
    color: white;
}


.projet img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    transition: filter 1s ease;   
    border-radius: 10px;

}

/* Flou au survol */
.projet a:hover img {
    filter: blur(120px);

}


/* IMAGE CACHÉE EN HOVER */
.projet a {
    position: relative;
    display: block;

}

.hover-img {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.85);  /* centrage + scale combinés */
    width: 70% !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 10px;
    opacity: 0;
    filter: blur(120px);
    
}

.projet a:hover .hover-img {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);  /* garde le centrage au hover */
    filter: blur(0px);
    transition: opacity 0.7s ease, transform 1s ease;
}











/* PRESENTATION DES PROJETS */

.grid-presentation{
    padding-top: 50px;
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    grid-gap:35px 25px;
    
}
.presentation{
    grid-column: span 2;
    grid-row: span 2;
}

.grid-presentation aside{
    grid-column: span 2;
    grid-row: span 2;
    
}

.grid-presentation img{
    width:100%;
    object-fit:cover;
    display: block;

}


.presentation h2{
    margin-top:10px;
    font-size:1rem;
    font-weight:400;
    line-height:1;
}

figcaption{
    font-size:0.75rem;
    margin-top: 10px;
    line-height: 1.2;
}




/* TEXTE DE PRESENTATION */
.grid-presentation aside {
    display: flex;
    flex-direction: column;
}



.aside-titre {
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    
}

h4 {
    font-size: 1.7rem;
    font-weight: 700;
    
}

.annee {
    font-size: 1rem;
    font-weight: 200;
    padding-bottom: 70px;
}

.domaine, .mots-cles {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.75);

}


.aside-texte {
    grid-column: span 2;
    font-size: 0.85rem;
    line-height: 1.2;
    flex: 1;
}