/***** Typographie - Début *****/
@font-face {
    font-family: Arsenal-Regular;
    src: url(../fonts/Arsenal/Arsenal-Regular.ttf);
}
@font-face {
    font-family: Arsenal-Bold;
    src: url(../fonts/Arsenal/Arsenal-Bold.ttf);
}
@font-face {
    font-family: Arsenal-Italic;
    src: url(../fonts/Arsenal/Arsenal-Italic.ttf);
}
@font-face {
    font-family: Arsenal-BoldItalic;
    src: url(../fonts/Arsenal/Arsenal-BoldItalic.ttf);
}
/***** Typographie - Fin *****/

/***** CSS global - Début *****/

html, body{
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}

body{ /* Style sur balise : "xxx" */
    font-family: Arsenal-Regular;
    font-size: 1.2em;
    background-color: rgb(255, 250, 245);
}

header{
    display: flex ;
    padding: 1.4em;
    justify-content: space-between;
}

/***** Nav - Début *****/
.navButton{ /* Style sur classe : ".xxx" */
    text-transform: uppercase;
    text-decoration: none;
    font-size: 1.4em;
    padding: 8px;
    transition-duration: 0.2s;
}
.navButton:hover{
    font-size: 1.6em;
    font-family: Arsenal-Bold;
}
#currentPage{
    font-size: 1.6em;
    font-family: Arsenal-bold;
}
#lbButton{ /* Style sur id/identifiant : "#xxx" */
    font-size: 1.8em;
    padding-top: 0;
}
/***** Nav - Fin *****/

main{
    flex-grow: 1;
}

footer{
    display: flex;
    justify-content: space-around;
    padding-top: 1.2em ;
    padding-bottom: 0.5em;
}

a{
    color: black;
}

/***** CSS global - Fin *****/

/***** CSS spécifique - Début *****/

#imgVerre1{
    width: 100vw;
    height: 65vh;
    object-fit: cover; /* Remplit le cadre en recadrant */
    object-position: center; /* Centre l'image (par défaut) */
}

.Exposition {
    margin-left: 1.2em;
    text-align: left;
    display: inline-block ;

}

/***** CSS spécifique - Fin *****/

.descriptionApropos {
    margin-top: 2em;
    margin-left: 2em;
    display: flex;
    gap: 0em;
    white-space: nowrap ;
}

.descriptionAproposItem {
    margin-left: 4em;
    white-space: normal;
    flex: 2em;
}

#imgPortrait {
    margin-left: 7em;
    width: auto;
    height: 55vh;
    border-radius: 0.5em ;
}

/***** CSS galerie par thème - Début *****/

.galleryTheme {
    margin-top: 1em;
    margin-left: 0.5em;
    display: flex;
    gap: 1.4em; /* IA */
    overflow-x: auto;
    padding: 1em;
    scroll-snap-type: x mandatory; /* IA */ 
    scrollbar-width: none;   
}

.galleryThemeItem{ 
    display: block;/* IA */
    flex: 0 0 auto; /* IA */
    scroll-snap-align: center; /* IA */
    text-decoration: none;
}

.galleryThemeItem img{
    width: auto;
    height: 55vh;
    border-radius: 0.5em;
    display: block; /* IA */
    transition: transform 0.2s;
}

.galleryThemeItem:hover img{
    transform: scale(1.05);
    opacity: 0.6;
    position:relative;
    z-index: 1;
}



.overlay {
    top: -50%;
    text-align: center;
    font-size: 1em;
    color:white;
    transform: auto;
    position: relative;
    z-index: 2;
}

.overlay:hover img {
  transform: opacity (1);
  
}


/***** CSS galerie par thème - Fin *****/

/***** CSS galerie par projet - Début *****/

.galleryProject{
    margin-top: 1em;
    display: flex;
    flex-wrap: wrap;
    gap: 1.4em; /* IA */
    padding: 1em;
    justify-content: center;
}

.galleryProjectItem{
    /* Un truc à mettre, peut-être, un jour..? */
}

.galleryProjectItem img{
    width: auto;
    height: 35vh;
    border-radius: 0.5em;
}

.descriptionProject{
    text-align: center;
}

/***** CSS galerie par projet - Fin *****/