body{
background-color: rgb(225, 255, 0);
cursor:  url(mediasindex/sunfacecursor), pointer; /* ajouter.png après cursor */
}

/* WRAPPER1 */
/* WRAPPER1 */
/* WRAPPER1 */
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 0px;
grid-auto-rows: minmax (50px, auto);
position: sticky;
top: 5px;
z-index: 5;
}

.one {
grid-column: 1 / 3;
grid-row: 1;

}
.one img {
margin-top: 10px;
margin-left: 10px;
margin-bottom: 10px;
width: 105%;
}

.two {
border-color: black;
grid-column: 2;
grid-row: 2;
display: grid;
justify-items: left;
align-items: center;
margin-top: 15px;
}
img.morph2 {
width: 112%;
height: 100px;
-webkit-filter: grayscale(0) blur(0px);
filter: grayscale(0) blur(0px);
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
img.morph2:hover {
width: 50%;
height: 100px;
}
.three {
grid-column: 1;
grid-row: 2;
display: grid;
justify-items: left;
align-items: center;
margin-top: 12px;
margin-left: 30px;
width: 100%;
}
.three img {
width: 400px;
height: 100px;
}


.sunface {
grid-column: 1 / 3;
grid-row: 1;
position: absolute;
z-index: 1;
margin-left: 400px;
}
.sunface img {
width: 70%;
}

/* WRAPPER2 */
/* WRAPPER2 */
/* WRAPPER2 */

.wrapper2 {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 30px;
margin-left: 30px;
}


/* TEXTES ET LIENS */
/* TEXTE  ET LIENS */
/* TEXTE  ET LIENS*/
@font-face {
font-family: ibmplex;
src: url(../typos/ibmplexmonolight.ttf);
}
@font-face {
  font-family: bau;
  src: url(../typos/BauOT.otf);
 }

 @font-face {
  font-family: sunset;
  src: url(../typos/SUNSETBETTINA2-BookHeavy.otf);
 }
 h2 {
  font-family: "ibmplex";
  letter-spacing: 1px;
  font-size: 13px;
  line-height: 1.3;
  margin-top: 0px;
  }
h3 {
font-family: ibmplex;
letter-spacing: 1px;
color: rgb(87, 87, 91);
font-size: 17px;
line-height: 1.3;
margin-top: 10px;
text-align: justify;
}
h4 {
font-family: "ibmplex";
letter-spacing: 1px;
font-size: 17px;
line-height: 1.3;
margin-top: 0px;
text-align: justify;
}
  
h5 {
font-family: sunset;
letter-spacing: 1px;
font-size: 50px;
line-height: 0.5;
margin-bottom: 0px;
}
    /*LIEN*/
    
a:link{
color:black;
margin-top:  0px;
}
a:hover{
color: blue;
margin-top:  0px;
}
a:active{
color: red;
margin-top:  0px;
}
a{
text-decoration:none;
}

/* INFOS GÉNÉRALES SLIDERS*/

.slider-wrapper {
position: relative;
width: 1300px;
height: 900px;
margin-top: 0px;
}
  
.slider {
width: 1300px;
height: 900px;
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
}
.slider::-webkit-scrollbar {
display: none;
}
  
.slider img {
flex: 1 0 100%;
scroll-snap-align: start;
object-fit: cover;
}
  
.slider-nav {
display: flex;
column-gap: 1rem;
position: absolute;
bottom: 2rem;
left: 10%;
transform: translateX(-50%);
z-index: 1;
}
  
.slider-nav a {
width: 0.75rem;
height: 0.75rem;
border-radius: 100%;
background-color:#E6FF00;
opacity: 1;
transition: opacity ease 250ms;
}
  
.slider-nav a:hover {
opacity: 0.5;
background-color:black;
}

/* IMAGES WRAPPER2*/
/* IMAGES WRAPPER2 */
/* IMAGES WRAPPER2 */

/* HOUSEWOOD */
/* HOUSEWOOD */
/* HOUSEWOOD */
.titrehousewood {
grid-column: 1;
grid-row: 1;
}
.housewood {
grid-column: 1;
grid-row: 2;
}
.textehousewood{
grid-column: 1;
grid-row: 3;
width: 125%;
}

/* YEARBOOK */
/* YEARBOOK */
/* YEARBOOK */

.titreyearbook{
grid-column: 1;
grid-row: 4;
}

.yearbook {
grid-column: 1;
grid-row: 5;
}
.texteyearbook{
grid-column: 1;
grid-row: 6;
width: 125%;
}

/* NEDELLEC*/
/* NEDELLEC*/
/* NEDELLEC*/

.titrenedellec{
grid-column: 1;
grid-row: 7;
}
  
.nedellec {
grid-column: 1;
grid-row: 8;
}
.textenedellec{
grid-column: 1;
grid-row: 9;
width: 125%;
}

/* FLUIDE*/
/* FLUIDE*/
/* FLUIDE*/

.titrefluide{
  grid-column: 1;
  grid-row: 10;
  }
  
  .fluide {
  grid-column: 1;
  grid-row: 11;
  }
  .textefluide{
  grid-column: 1;
  grid-row: 12;
  width: 125%;
  }

/* HUGO HUGO*/
/* HUGO HUGO*/
/* HUGO HUGO*/

.titrehugohugo{
  grid-column: 1;
  grid-row: 13;
  }
  
  .hugohugo {
  grid-column: 1;
  grid-row: 14;
  }
  .textehugohugo{
  grid-column: 1;
  grid-row: 15;
  width: 125%;
  }

/* LET IT SNOW*/
/* LET IT SNOW*/
/* LET IT SNOW*/

.titreletitsnow{
  grid-column: 1;
  grid-row: 16;
  }
  
  .letitsnow {
  grid-column: 1;
  grid-row: 17;
  }
  .texteletitsnow{
  grid-column: 1;
  grid-row: 18;
  width: 125%;
  }

/* SEPAND*/
/* SEPAND*/
/* SEPAND*/

.titresepand{
  grid-column: 1;
  grid-row: 19;
  }
  
  .sepand {
  grid-column: 1;
  grid-row: 20;
  }
  .textesepand{
  grid-column: 1;
  grid-row: 21;
  width: 125%;
  }

/* RACHEL*/
/* RACHEL*/
/* RACHEL*/

.titrerachel {
  grid-column: 1;
  grid-row: 22;
  }
  
  .rachel{
  grid-column: 1;
  grid-row: 23;
  }
  .texterachel {
  grid-column: 1;
  grid-row: 24;
  width: 125%;
  }

/* COEUR*/
/* COEUR*/
/* COEUR*/

.titrecoeur {
  grid-column: 1;
  grid-row: 25;
  }
  
  .coeur{
  grid-column: 1;
  grid-row: 26;
  }
  .textecoeur {
  grid-column: 1;
  grid-row: 27;
  width: 125%;
  }

/* OLIVIER KARL*/
/* OLIVIER KARL*/
/* OLIVIER KARL*/

.titreolivierkarl {
  grid-column: 1;
  grid-row: 28;
  }
  
  .olivierkarl{
  grid-column: 1;
  grid-row: 29;
  }
  .texteolivierkarl {
  grid-column: 1;
  grid-row: 30;
  width: 125%;
  }

/* BETTINA*/
/* BETTINA*/
/* BETTINA*/

.titrebettina {
  grid-column: 1;
  grid-row: 31;
  }
  
  .bettina{
  grid-column: 1;
  grid-row: 32;
  }
  .textebettina {
  grid-column: 1;
  grid-row: 33;
  width: 125%;
  }
/*GOUJU*/
/*GOUJU*/
/*GOUJU*/

.titregouju {
  grid-column: 1;
  grid-row: 34;
  }
  
  .gouju{
  grid-column: 1;
  grid-row: 35;
  }
  .textegouju {
  grid-column: 1;
  grid-row: 36;
  width: 125%;
  }

/*HSB*/
/*HSB*/
/*HSB*/

.titrehsb {
  grid-column: 1;
  grid-row: 37;
  }
  
  .hsb{
  grid-column: 1;
  grid-row: 38;
  }
  .textehsb {
  grid-column: 1;
  grid-row: 39;
  width: 125%;
  }

/*LOGO SUNSET FIN*/
/*LOGO SUNSET FIN*/
/*LOGO SUNSET FIN*/

.logosunsetfin {
  grid-column: 1;
  grid-row: 40;
  }

  .logosunsetfin img {
 width:70%;
    }

/* RESPONSIVE WRAPPER*/
/* RESPONSIVE WRAPPER*/
/* RESPONSIVE WRAPPER*/

@media screen and (max-width: 1368px) {
.wrapper{
grid-template-columns: repeat(1, 1fr);
width: 100%;
margin-left: 0px;
}}
@media screen and (max-width: 480px) {
.wrapper{
grid-template-columns: repeat(1, 1fr);
width: 100%;
margin-left: 0px;
}}
  /* --------------------- */            
  @media screen and (max-width: 1368px) {
  .one{
  width: 95%;
  margin-left: 0px;
  margin-bottom: 20px;
  }}
  @media screen and (max-width: 480px) {
  .one{
  width: 95%;
  height: 85px;
  margin-left: 0px;
  margin-bottom: 10px;
  }}
                   
@media screen and (max-width: 1368px) {
.one img{
height: 110%;
width: 102%;
}}
@media screen and (max-width: 480px) {
.one img{
height: 100%;
}}

 /* --------------------- */ 

  @media screen and (max-width: 1368px) {
  .two{
  margin-left: 600px;
  grid-column: 1;
  grid-row: 2;
  width:100%;
  }}

  @media screen and (max-width: 1368px) {
    img.morph2 {
      width: 80%;
      height: 100px;
      -webkit-filter: grayscale(0) blur(0px);
      filter: grayscale(0) blur(0px);
      -webkit-transition: all 0.2s ease;
      transition: all 0.2s ease;
    }}
    @media screen and (max-width: 1368px) {
      img.morph2:hover {
      width: 50%;
      height: 100px;
    }}


  @media screen and (max-width: 480px) {
  .two{
  margin-left: 10px;
  grid-column: 1;
  grid-row: 3;
  width:95%;
  }}

  @media screen and (max-width: 480px) {
    img.morph2 {
      width: 100%;
      height: 100px;
      -webkit-filter: grayscale(0) blur(0px);
      filter: grayscale(0) blur(0px);
      -webkit-transition: all 0.2s ease;
      transition: all 0.2s ease;
    }}
    @media screen and (max-width: 480px) {
      img.morph2:hover {
      width: 50%;
      height: 100px;
    }}

/* --------------------- */


@media screen and (max-width: 1368px) {
.three {
width: 400px;
margin-left: 10px;
grid-column: 1;
grid-row: 2;
}}
@media screen and (max-width: 480px) {
.three {
width: 95%;
margin-left: 10px;
grid-column: 1;
grid-row: 2;
}}


  @media screen and (max-width: 1368px) {
  .three img{
  width: 100%;
  height: 100px;
  margin-left: 0px;
  grid-column: 1;
  grid-row: 2;
  }}
  @media screen and (max-width: 480px) {
  .three img{
  width: 100%;
  height: 100px;
  margin-left: 0px;
  grid-column: 1;
  grid-row: 2;
  }}
  /* --------------------- */ 
  
@media screen and (max-width: 1368px) {
.sunface {
width: 100%;
grid-column: 1;
grid-row: 4;
margin-top: 120px;
margin-left: 0px;
}}
@media screen and (max-width: 480px) {
.sunface {
width: 100%;
grid-column: 1;
grid-row: 4;
margin-top: 120px;
margin-left: 0px;
}}


/* RESPONSIVE WRAPPER2*/
/* RESPONSIVE WRAPPER2*/
/* RESPONSIVE WRAPPER2*/

/* RESPONSIVE INFOS GÉNÉRALES*/
                
@media screen and (max-width: 1368px) {
.wrapper2{
grid-template-columns: repeat(1, 1fr);
width: 94%;
margin-left: 10px;
}}
@media screen and (max-width: 400px) {
  .wrapper2{
  grid-template-columns: repeat(1, 1fr);
  width: 94%;
  margin-left: 10px;
  }}
/* ----------------- */
@media screen and (max-width: 1368px) {
.slider-wrapper{
position: relative;
width: 1100px;
height: 800px;
}}
@media screen and (max-width: 400px) {
  .slider-wrapper{
  position: relative;
  width: 340px;
  height: 240px;
  }}
/* ----------------- */
@media screen and (max-width: 1368px) {
.slider{
width: 1100px;
height: 800px;
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
}}
@media screen and (max-width: 400px) {
  .slider{
    width: 340px;
    height: 240px;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;

  }}
/* ----------------- */
@media screen and (max-width: 1368px) {
.slider-nav  {
bottom: 0.15rem;
}}
@media screen and (max-width: 400px) {
  .slider-nav  {
  bottom: 0.5rem;
  column-gap: 0.5rem;
  left: 17%;
  

  }}
/* ----------------- */
@media screen and (max-width: 1368px) {
.slider-nav a {
width: 0.7rem;
height: 0.7rem;
margin-bottom: 20px;
}}
@media screen and (max-width: 400px) {
  .slider-nav a {
  width: 0.4rem;
  height: 0.4rem;
  margin-bottom: 3px;
  }}



/* RESPONSIVE IMAGES*/
@media screen and (max-width: 1368px) {
.housewood{
width: 1000px;
height: 800px;
margin-top:-20px;
}}
@media screen and (max-width: 400px) {
  .housewood{
  width: 340px;
  height: 240px;
  margin-top:-20px;
  }}
/* ------------ */
@media screen and (max-width: 1368px) {
.yearbook{
  width: 1000px;
  height: 800px;
margin-top:-20px;
}}
@media screen and (max-width: 400px) {
  .yearbook{
    width: 340px;
    height: 240px;
  margin-top:-20px;
  }}
/* ------------ */
@media screen and (max-width: 1368px) {
.nedellec{
  width: 1000px;
  height: 800px;
margin-top:-20px;
}}
@media screen and (max-width: 400px) {
  .nedellec{
    width: 340px;
    height: 240px;
  margin-top:-20px;
  }}

/* ------------ */
@media screen and (max-width: 1368px) {
  .fluide{
    width: 1000px;
    height: 800px;
  margin-top:-20px;
  }}
  @media screen and (max-width: 400px) {
    .fluide{
      width: 340px;
      height: 240px;
    margin-top:-20px;
    }}

  /* ------------ */
  @media screen and (max-width: 1368px) {
    .hugohugo{
      width: 1000px;
      height: 800px;
    margin-top:-20px;
    }}
    @media screen and (max-width: 400px) {
      .hugohugo{
        width: 340px;
        height: 240px;
      margin-top:-20px;
      }}

    /* ------------ */
    @media screen and (max-width: 1368px) {
      .letitsnow{
        width: 1000px;
        height: 800px;
      margin-top:-20px;
      }}
      @media screen and (max-width: 400px) {
        .letitsnow{
          width: 340px;
          height: 240px;
        margin-top:-20px;
        }}

/* ------------ */
@media screen and (max-width:1368px) {
  .sepand{
    width: 1000px;
    height: 800px;
  margin-top:-20px;
  }}
  @media screen and (max-width:400px) {
    .sepand{
      width: 340px;
      height: 240px;
    margin-top:-20px;
    }}

  /* ------------ */
  @media screen and (max-width: 1368px) {
  .rachel {
    width: 1000px;
    height: 800px;
  margin-top:-20px;
  }}
  @media screen and (max-width: 400px) {
    .rachel {
      width: 340px;
      height: 240px;
    margin-top:-20px;
    }}

/* ------------ */
    @media screen and (max-width: 1368px) {
      .coeur {
        width: 1000px;
        height: 800px;
      margin-top:-20px;
      }}
      @media screen and (max-width: 400px) {
        .coeur {
          width: 340px;
          height: 240px;
        margin-top:-20px;
        }}

/* ------------ */
    @media screen and (max-width: 1368px) {
      .olivierkarl {
        width: 1000px;
        height: 800px;
      margin-top:-20px;
      }}
      @media screen and (max-width: 400px) {
        .olivierkarl {
          width: 340px;
          height: 240px;
        margin-top:-20px;
        }}
  

/* ------------ */
    @media screen and (max-width: 1368px) {
      .bettina {
        width: 1000px;
        height: 800px;
      margin-top:-20px;
      }}
      @media screen and (max-width: 400px) {
        .bettina {
          width: 340px;
          height: 240px;
        margin-top:-20px;
        }}
  

/* ------------ */
    @media screen and (max-width: 1368px) {
      .gouju {
        width: 1000px;
        height: 800px;
      margin-top:-20px;
      }}
      @media screen and (max-width: 400px) {
        .gouju {
          width: 340px;
          height: 240px;
        margin-top:-20px;
        }}

/* ------------ */
    @media screen and (max-width: 1368px) {
      .hsb {
        width: 1000px;
        height: 800px;
      margin-top:-20px;
      }}
      @media screen and (max-width: 400px) {
        .hsb {
          width: 340px;
          height: 240px;
        margin-top:-20px;
        }}
    

      /* ------------ */
    @media screen and (max-width: 1368px) {
      .logosunsetfin img {
        width:90%;
      }}
      @media screen and (max-width: 400px) {
        .logosunsetfin img {
          width:100%;
        }}
  



/* RESPONSIVE TEXTES*/
/* RESPONSIVE TEXTES**/
/* RESPONSIVE TEXTES**/
@media screen and (max-width: 1368px) {
h5 {
font-size: 50px;
width: 100%;
margin-top: 30px;
text-align: left;
line-height: 1.1;
}}
@media screen and (max-width: 400px) {
  h5 {
  font-size: 22px;
  width: 100%;
  margin-top: 20px;
  text-align: left;
  line-height: 1.1;
  }}
/* ------------ */
@media screen and (max-width: 1368px) {
  h4 {
  font-size: 16px;
  margin-top: 0px;
  text-align: left;
  width: 80%;
  text-align: left;
  }}
  @media screen and (max-width: 400px) {
    h4 {
    font-size: 14px;
    margin-top: -20px;
    text-align: left;
    width: 80%;
    text-align: left;
    }}
  /* ------------ */
  @media screen and (max-width:1368px) {
    h2 {
      font-family: "ibmplex";
      letter-spacing: 1px;
      font-size: 12px;
      line-height: 1.3;
      margin-top: 0px;
      width: 80%;
    }}

  /* ----GRADIENT-------- */

  #mydiv {
    position: absolute;
    z-index: 15;
    width: 5px;
    height: 5px;
  }
  
  #mydivheader {
    padding: 10px;
    cursor: move;
    z-index: 10;
   width: 250px;
    height: 400px;
    margin-left:470px;
    margin-top: 440px;
    }
    @media screen and (max-width: 1368px) {
      #mydivheader {
        width: 300px;
        height: 2000px;
        margin-left:700px;
        margin-top: 250px;
      }}
      @media screen and (max-width: 480px) {
        #mydivheader {
          width: 150px;
          height: 100px;
          margin-left:15px;
          margin-top: 250px;
        }}