@font-face {
  font-family: 'gustavolight';
    src: url('font/Gustavo-Light.woff2') format('woff2'),
         url('font/Gustavo-Light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {background-color: #f9f9f9;}

.name {
  display: none;
  position: asolute;
  z-index: -10;
} 

.galerie {
  position: relative;
  width: 50%;
  z-index:1;
}

.artiste {
  position: relative;
  width: 25%;
  z-index:1;
  text-align: right; 
}

.recueil {
  position: relative;
  width: 25%;
  z-index:1;
  text-align: right;
}

header {
  position: fixed;
  width: 100%;
  Height: 70px;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

header ul {
  position: fixed;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center; 
  padding-left: 30px;
  padding-right: 30px;
}

li {
  font-family: 'gustavolight';
  color: #18676c;
  text-decoration: none;
  z-index:1;
}

a {
  text-decoration: none;
  font-family: 'gustavolight';
  font-size: 20px;
  line-height: 23px;
  letter-spacing : 1px;
  color: #18676c;
}

p {
  position: absolute;
  top: 9.2%;
  font-family: 'gustavolight';
  text-justify: center;
}

h1{
  font-family: 'gustavolight';
  font-size: 20px;
  line-height: 23px;
  letter-spacing : 1px;
  text-justify: center;
  color: #18676c;
}

h2{
  position: relative;
  font-family: 'gustavolight';
  font-size: 44px;
  line-height: 47px;
  letter-spacing : 2px;
  color: #18676c;
}

h3{
  font-family: 'gustavolight';
  font-size: 14px;
  line-height: 17px;
  letter-spacing : 0.5px;
  color: #18676c;
}   

section .zone {display: flex;  align-items: flex-end;} /* J'ai fais des section en flex pour gérer les colonnes */
        /* La zone info, donc la boite qui s'ouvre... On lui met une bordure, un fond blanc */
        /* Et surtout on la met en position absolute (par rapport à sa colonne qui est en relative : cf ligne 24), collée en bas (bottom:0) */
        .zone_info {height: 104.5px; right: 0; width: 40%; position: fixed; bottom: 0; display:flex;}

        /* la zone_info est en display flex pour faire 2 colonnes dedans, une avec le contenu et l'autre avec le bouton pour fermer */
        .zone_info .partie_gauche {width:100%; text-align: right; padding-top: 20px; padding-right: 30px;}
        .zone_info .partie_droite {width:33%; text-align: left; padding-top: 20px;}
            
        /* Quelques styles pour faire les espacements et ne pas afficher le contenu ni le bouton de fermeture par défaut */
        .contenu {display: none;}
        .partie_droite {display:none; }
        .zone_info.show .btn {text-align: right; padding-right: 30px; position: fixed;}

        /* Quand on clic sur le bouton, le javascript ajoute la class "show" à "zone_info".... A partir de là, on change les règles d'affichage : on affiche le contenu, on masque le bouton, on affiche le bouton pour fermer...*/
        .zone_info.show {width: 100vw; background-color: #f9f9f9; position: fixed;} /* largeur de la booite ouverte... A voir en fonction de ce que tu veux faire */
        .zone_info.show .contenu {display: block;} /* Quand c'est ouvert, on affiche le contenu de la boite */
        .zone_info.show .btn {display: none;} /* Quand c'est ouvert, on masque le bouton "infos" */
        .zone_info.show .partie_droite {display: block; text-align: right; padding-right: 30px;} /* Quand c'est ouvert, on affiche la partie droite de la boite, contenant le bouton pour la fermer */

.container {
  position: fixed;
  height: 100vh;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  z-index: 2;
}

.contain {
  position: relative;
  height: auto;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.container-index {
  position: relative;
  padding-top: 28%;
  height: auto;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-left: 15px;
  padding-right: 15px;
}

.index {
  position: fixed;
  width: 100vw;
  padding-left: 30px;
  padding-right: 30px;
  height: auto;
  bottom: 30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.homepage {
  position: relative;
  width: 100%;
  height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.homepage img {
  width: 100%;  /* L’image prend toute la largeur */
  height: 100%; /* L’image prend toute la hauteur */
  object-fit: cover; 
}

.block-homepage {
  width: 100%;  /* L’image prend toute la largeur */
  height: 100%; /* L’image prend toute la hauteur */
  object-fit: cover; 
}
.prez {
  position: relative;
  top: 55px;
  width: 25%;
  height: 120px;
}

.imageProjet {
  width: 25%;
  padding-left: 15px;
  padding-right: 15px;
}

.imageProjet img {
  margin-top: 40px;
  max-width: 100%;
  max-height: auto;
}

.vertical {
  position: relative;
  bottom: 20px;
}

.sticky {
  position: sticky;
  top: 30px;
  height: 90vh;
  width: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.imageSticky img {
  max-width: 100%;
  max-height: auto;
}

.containerImage img {width: auto; height: 700px;}

.horizontal {
  width: 61%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.horizontal img {
  width: 100%;  /* L’image prend toute la largeur */
  height: 100%; /* L’image prend toute la hauteur */
  object-fit: cover; 
}

.hoverImage {
  position: fixed;
  top: 0;
  height: 100vh;
  right: 0px;
  z-index: 5;
}

.hoverImage img {
  max-width: 100%;
  max-height: 100%;
}

video {display: block; position: relative; width:100%; padding-left: 30px; padding-right: 30px;}

.texte2 {
  position: fixed;
  left: 0;
  width: 75%;
  height: auto;
  bottom: 0px;
  display: flex;
  flex-wrap: wrap;
  padding: 30px;
}

.qui {
  position: relative;
  width: 100%;
  height: auto;
  padding-left: 30px;
  padding-right: 30px; 
  padding-bottom: 30px;
}

.quoi {
  position: relative;
  top: 0;
  height: 300px;
}

.un {
  position: relative;
  width: 50%;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background-color: red;
}

.un IMG {
  weight: auto;
  height: 100%;
}

.deux {
  position: relative;
  top: 0;
  width: 50%;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background-color: none;
}

.quatre {
  position: relative;
  width: 50%;
  z-index:1;
  margin-bottom: 30px;
}

.cinq {
  position: relative;
  width: 33%;
  padding-bottom: 30px;
  z-index:1;
}

.six {
  position: relative;
  width: 33%;
  height: 50px;
  z-index:1;
  padding-right: 30px;
  text-align: left;
}

.sept {
  position: relative;
}


@media screen and (max-width: 1450px) {

.galerie {width: 50%;}
.artiste {width: 24%; text-align: right;}  
.recueil {width: 26%;}  

.index {width: auto; left: auto;}

.zone_info.show {width: 100%;}

.cinq {width: 50%;}

.six {width: 33%;}

.info {height: auto;}

.partie_droite {bottom: 0;}

.prez {top: 35px; width: 80px; height: 80px;}

.containerImage img {width: 100%; height: auto; padding-left: 30px; padding-right: 30px;}

h2 {font-size: 32px; line-height: 35px; letter-spacing: 1.5px;}

}


@media screen and (max-width: 900px) {

.galerie {width: 33.33%;}
.artiste {width: 33.33%; text-align: right;}  
.recueil {width: 33.33%; text-align: center;}   

.none {display: none;}

.un {width: 50%;}

.deux {display: none;}

.trois {display: none;}

.quatre {width: 100%;}

.cinq {width: 75%;}

.imageProjet {width: 100%; margin-top: 40%; margin-bottom: -40%;}

.horizontal {width: 100%;}

.bis {width: 100%;}

.homepage {flex-wrap: wrap;}

.theme {display: none;}

p {top: 2.2%;}

}


@media screen and (max-width: 600px) {

h2 {font-size: 20px; line-height: 23px; letter-spacing: 1px;}

a {font-size: 20px; line-height: 23px; letter-spacing: 1px;}

p {top: 2.8%;}

.quoi {height: 200px;}

.cinq {width: 100%;}

.prez {width: 40px;}

.bis {padding-right: 0;}

}


@media screen and (max-width: 400px) {

h1 {font-size: 18px; line-height: 21px; letter-spacing: 0.8px;}

h2 {font-size: 18px; line-height: 21px; letter-spacing: 0.8px;}

a {font-size: 18px; line-height: 21px; letter-spacing: 0.8px;}

}