body {
    background-image: url(image/fond8\ -\ flou.png);
    background-repeat:no-repeat;
    background-size:cover;
    background-position-x:center;
    background-attachment: fixed;
    margin:0;
    padding: -10px;
}

@font-face {
 font-family: 'gensco';
 font-weight: 400; /* Graisse : regular */
 src: url('/font/webfontkit-20261021-061604/gensco-webfont.woff2') format('woff2');
}
header .credits {
  position: fixed;
  right: 1vw;
  top: 1vh;
  font-family: 'consolas';
  font-size: min(7px, 1.5vw);
  color: aliceblue;
  text-align: left;
}

h1{
  font-family: 'gensco';
  font-size: 30px;
  position: absolute;
  display: flex;
  top: -10px;
  left: 1%; 
  color: aliceblue;
}

h2{
  font-family: 'gensco';
  font-size: 45px;
  position: absolute;
  display: flex;
  align-content: flex-start;
  top: -20px;
  left: 1.5%; 
  color: aliceblue;
}

header a:hover h1, header a:hover h2 {
  filter: blur(1px);

}

footer ul {
  position: absolute;
  display:flex;
  justify-content: space-between;
  
  width: 93%;
  margin-left: 30px;
  padding: 0%;
  list-style: none;
  top: 93%;
}

footer li {
  margin-top: 10px;
  position: relative;
  overflow: hidden;  
  font-family: 'gensco';
  color: aliceblue;
  text-align: justify;
  text-justify: initial;
       
}

footer a {
  display: inline-block;
  position: relative;
  font-size: 16px;
  text-decoration: none;
   color: aliceblue ;
  transition: filter 0.3s ease, color 0.3s ease;
}

footer a:hover {
  filter: blur(1px);
  color: rgb(171, 189, 204);

}

footer a em {
  filter: blur(1px);

}

footer a em:hover {
  filter: blur(1px);
  color: aliceblue 
}


footer img{
  width: 3%;
  
  aspect-ratio: 4/3;
  object-fit: cover;
  border: 1px solid aliceblue;
}

.showimage1 nav{
  position: fixed;
  top: 10%;   /* Distance par rapport au haut de l'écran */
  left: 1%;  /* Distance par rapport à la gauche de l'écran */
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, filter 0.3s, left 0.3s ease, visibility 0.3s ease;
  pointer-events: none; /* Empêche l'image de bloquer la souris */
  
}

.showimage2 nav{
  position: fixed;
  bottom: 5%;   /* Distance par rapport au haut de l'écran */
  left: -100px;  /* Distance par rapport à la gauche de l'écran */
  opacity: 0.05;
  visibility: visible;
 transition: opacity 0.3s ease, filter 0.3s, left 0.3s ease, visibility 0.3s ease;
  pointer-events: none; /* Empêche l'image de bloquer la souris */
  filter: blur(1px);
}

.showimage3 nav{
  position: fixed;
  bottom: 10%;   /* Distance par rapport au haut de l'écran */
  left: -100px;  /* Distance par rapport à la gauche de l'écran */
  opacity: 0.05;
  visibility: visible;
transition: opacity 0.3s ease, filter 0.3s, left 0.3s ease, visibility 0.3s ease;
  pointer-events: none; /* Empêche l'image de bloquer la souris */
  filter: blur(1px);
}

.showimage4 nav{
  position: fixed;
  bottom: 15%;   /* Distance par rapport au haut de l'écran */
  left: -100px;  /* Distance par rapport à la gauche de l'écran */
  opacity: 0.05;
  visibility: visible;
transition: opacity 0.3s ease, filter 0.3s, left 0.3s ease, visibility 0.3s ease;
  pointer-events: none; /* Empêche l'image de bloquer la souris */
  filter: blur(1px);
}

.showimage1:hover nav{
  opacity: 0.7;
  left: 1%;
  visibility: visible;
  transition: opacity 0.3s ease, filter 0.3s, left 0.3s ease, visibility 0.3s ease;
}


.showimage2:hover nav{
  opacity: 0.7;
  left: 1%;
  visibility: visible;
  transition: opacity 0.3s ease, filter 0.3s, left 0.3s ease, visibility 0.3s ease;
}

.showimage3:hover nav{
  opacity: 0.7;
  left: 1%;
  visibility: visible;
  transition: opacity 0.3s ease, filter 0.3s, left 0.3s ease, visibility 0.3s ease;
}

.showimage4:hover nav{
  opacity: 0.7;
  left: 1%;
  visibility: visible;
  transition: opacity 0.3s ease, filter 0.3s, left 0.3s ease, visibility 0.3s ease;
}

/* Divise l'écran en 2 colonnes distinctes */
.layout-principal {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 50% pour la galerie, 50% pour le texte */
    min-height: 80vh;
    padding: 40px;
    gap: 40px;
}

/* La galerie reste à gauche, avec son propre scroll si elle dépasse */
.galerie-centre-gauche {
    max-height: 75vh;
    overflow-y: auto;
    padding-right: 10px;
}

/* Le texte a sa propre place à droite et ne sera plus jamais touché par la galerie */
.contenu-droite {
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Pour garder le texte vers le bas si tu veux */
}

/* Conteneur fixé en bas à gauche */
.bottom-right {
    position: absolute; /* Ancre le bloc par rapport à la fenêtre */
    bottom: 6%;  
    right: 2%;
    text-align: justify;
    max-width: 22%;             /* Largeur du bloc */
    max-height: 45vh;         /* Hauteur maximale */
    padding: 15px;
    font-family: consolas;
    color: aliceblue;
    font-size: min(13px, 2vw);
    overflow-y: auto;         /* Permet le défilement vertical si plus d'images */
    scrollbar-width: none;
  }




.upper-right{
    position: fixed; /* Ancre le bloc par rapport à la fenêtre */
    top:2%;    /* 20px depuis le bas */
    right:2%;      /* 20px depuis la gauche */
    justify-items: right;
    
    max-width: 20%;
    padding: 15px;
    font-family: Gensco;
    color: aliceblue;
    font-size: min(15px, 2vw);
    text-align: right;
  }

.title{
    font-size: min(50px, 5vw);
    text-align: right;

  }


/* 1. Positionnement fixe au centre-gauche de l'écran */
.galerie-centre-gauche {
    position: absolute;
    top: 50%;                 /* Place le haut du bloc au milieu de la hauteur */
    left: 10%;               /* Marge depuis la gauche */
    transform: translateY(-50%); /* Ajuste pour centrer verticalement parfaitement */
    
    width: max(60%, 1vw);             /* Largeur du bloc de la grille */
    max-height: 90vh;         /* Hauteur maximale 
    
    overflow-y: auto;         /* Permet le défilement vertical si plus d'images */
    scrollbar-width: none;  /* Firefox */
}

/* 2. Style de la barre de défilement (Scrollbar) */
.galerie-centre-gauche::-webkit-scrollbar {
    display: none;
}


/* 3. La grille CSS (2 colonnes) */
.grille-images {
 column-count: 2;        /* Nombre de colonnes souhaité */
    column-gap: max(12px, 1vw);       /* Espace entre les images */
}

/* Wrapper de chaque image */
.item-image {
    position: relative;
    margin-bottom: max(12px, 1vw);
    break-inside: avoid; /* Empêche de couper l'image en deux */
    cursor: pointer;
}

/* L'image miniature dans la grille */
.item-image img {
    width: 100%;
    height: auto; /* Conserve le format d'origine */
    display: block;
    
}


video {
    width: 100%;
    max-width: 100%;
    height: auto; /* Conserve le format d'origine */
    display: block;
    object-fit: cover; /* Ajuste le contenu pour remplir le conteneur */
    overflow: hidden; /* Masque tout débordement */ 
    
}


video::-webkit-media-controls-enclosure {
  display: none;

}

.section {
    display: flex;
    flex-direction:column;    /* Force l'alignement horizontal */  
    gap: 5px;
    
    position: absolute;
    top: 9%;
    left: 1%;
}

/* On applique la taille directement sur l'image à l'intérieur du lien */
.section a img {
    width: max(40px, 1vw);            
    height: auto;
    object-fit: cover;
    opacity: 0.8;
    border: 1px solid aliceblue;
    
}

.section a img:hover {
    
    filter: blur(1px);
}