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;
}

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

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

.two {
  border-color: black;
  grid-column: 2;
  grid-row: 2;
  display: grid;
  justify-items: left;
  align-items: center;
  margin-top: 15px;
  }


img.morph2 {
width: 100%;
height: 110px;
-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.5%;
height: 110px;
}


.three {
grid-column: 1;
grid-row: 2;
display: grid;
justify-items: left;
align-items: center;
margin-top: 20px;
margin-left: 30px;
width: 100%;
}
.three img {
height: 100%;
}

img.morph {
width: 97%;
height: 110px;
-webkit-filter: grayscale(0) blur(0px);
filter: grayscale(0) blur(0px);
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
       
img.morph:hover {
width: 50%; /* on affiche l'image au carré */
height: 110px;
}

.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;
}

@font-face {
font-family: ibmplex;
src: url(typos/ibmplexmonolight.ttf);
}
@font-face {
  font-family: helvetica;
  src: url(./typos/NeueHaasGrotesk-Roman.otf)
 }

 
h1 {
font-family: ibmplex;
letter-spacing: 1px;
font-size: 17px;
line-height: 1.3;
margin-top: 0px;
text-align: justify;

}

h2 {
font-family: ibmplex;
letter-spacing: 1px;
font-size: 13px;
line-height: 1.3;
margin-top: 0px;
}
h3 {
font-family: ibmplex;
letter-spacing: 1px;
font-size: 17px;
line-height: 1.3;
margin-top: 10px;
text-align: justify;
}
h4 {
font-family: ibmplex;
letter-spacing: 1px;
font-size: 60px;
line-height: 1.3;
margin-top: 10px;
text-align: left;
}

/* TEXTE ET IMAGES */
/* TEXTE ET IMAGES */
/* TEXTE ET IMAGES */


.btn {
  grid-column: 1 / 3;
  grid-row: 1;
  margin-top: 30px;
  height: 70%;
  }

.btn img{
width:100%;
height: 100%;
}


/* slider*/

.slider {
width: 500px;
height:300px;
}

.slider-wrapper {
	width: 100%;
	height: 100%;
	position: relative;
  margin-top: 0px;
}

.slide {
	float: left;
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: 0.01s linear;
}

.slider-wrapper > .slide:first-child {
opacity: 1;
}

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


.i0 {
margin-top: -60px;
grid-column: 1 / 3;
grid-row: 2;
column-count: 1;
width: 125%;
}

    
.i01 {
grid-column: 1 / 2;
grid-row: 3;
column-count: 2;
column-gap: 20px;
margin-bottom: 0px;
width:150%;
}
.i001 {
grid-column: 1 / 3;
grid-row: 4;
display: grid;
column-count: 1;
column-gap: 20px;
}
.i001 img {
width: 40%;
}
.sun {
grid-column: 1 / 3;
grid-row: 5;
}
.test{
 margin-left: 200px;
 grid-column: 1;
grid-row: 6;
    }
.test img{
width: 100%;
margin-left: 200px;
  }
.img-load {
  grid-column: 2 / 3;
grid-row: 2;
}
/* -------- */

#mydiv {
  position: absolute;
  z-index: 16;
  width: 5px;
  height: 5px;
  }
  #mydivheader {
  cursor: move;
  z-index: 10;
  margin-left: 800px;
  margin-top: 575px;
  width: 1100px;
  }


  #mydiv2 {
    position: absolute;
    z-index: 16;
    width: 5px;
    height: 5px;
    }
    #mydivheader2 {
    cursor: move;
    z-index: 10;
    margin-left: 0px;
    margin-top: 420px;
    }



/* 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: 1368px) {
.one{
width: 100%;
margin-left: 0px;
margin-bottom: 20px;
height: 92%;
}}
@media screen and (max-width: 480px) {
  .one{
    width: 100%;
    height: 105%;
    margin-bottom: 30px;
  }}


@media screen and (max-width: 1368px) {
.one img{
height: 110%;
width: 95%;
}}
@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.5%;
    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: 100%;
margin-left: 10px;
grid-column: 1;
grid-row: 2;
}}

@media screen and (max-width: 1368px) {
.three img{
height: 100px;
}}
@media screen and (max-width: 1368px) {
img.morph {
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: 1368px) {
img.morph:hover {
width: 50.5%;
height: 100px;
}}


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

  @media screen and (max-width: 480px) {
    .three img{
      height: 100px;
    }}
    @media screen and (max-width: 480px) {
      img.morph {
        width: 98%;
        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.morph:hover {
        width: 50.5%;
        height: 100px;
      }}
        

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


/* RESPONSIVE WRAPPER2*/
/* RESPONSIVE WRAPPER2*/
/* RESPONSIVE WRAPPER2*/
               
@media screen and (max-width: 1368px) {
.wrapper2{
grid-template-columns: repeat(1, 1fr);
width: 100%;
margin-left: 10px;
}}
 /*------------*/  
 
 @media screen and (max-width: 1368px) {
.btn img{
width:96%;
height: 100%;
margin-left: 5px;
}}

@media screen and (max-width: 480px) {
  .btn {
margin-top: 20px;
  }}

@media screen and (max-width: 480px) {
.btn img{
width:92%;
height: 135%;
margin-left: 10px;
margin-bottom: 30px;
}}
  /*------------*/ 
@media screen and (max-width: 480px) {
.i0{
margin-top: 20px;
margin-top: 300px;
}}

  /*------------*/ 
@media screen and (max-width: 1368px) {
.i01{
column-count: 2;
width: 100%;
}}
@media screen and (max-width: 480px) {
  .i01{
  column-count: 1;
  }}
/*------------*/ 
@media screen and (max-width: 1368px) {
.i001 img{
width: 45%;
margin-left: 10px;
margin-bottom: 10px;
margin-top: 20px;
}}
@media screen and (max-width: 480px) {
  .i001 img{
  width: 85%;
  margin-left: 10px;
  margin-bottom: 10px;
  margin-top: 20px;
  }}

/* RESPONSIVE TEXTES*/
/* RESPONSIVE TEXTES**/
/* RESPONSIVE TEXTES**/
                  
@media screen and (max-width: 1368px) {
.i0 h1 {
font-size: 15px;
text-align: left;
width: 75%;
margin-left: 10px;
text-align: justify;
}}

@media screen and (max-width: 480px) {
  .i0 h1 {
  font-size: 15px;
  width: 75%;
  margin-left: 10px;
  text-align: left;
  }}
/*------------*/ 
@media screen and (max-width: 1368px) {
.i01 h2 {
font-size: 12px;
margin-left: 10px;
width: 95%;
}}
@media screen and (max-width: 480px) {
  .i01 h2 {
  font-size: 12px;
  margin-left: 10px;
  width: 95%;
  text-align: left;
  
  }}
 /*------------*/                        
@media screen and (max-width: 1368px) {
.i0 h3 {
font-size: 15px;
margin-top: 10px;
text-align: left;
width: 75%;
margin-left: 10px;
text-align: justify;
}}
@media screen and (max-width: 480px) {
  .i0 h3 {
  font-size: 15px;
  margin-top: 10px;
  text-align: left;
  width: 75%;
  margin-left: 10px;
  text-align: left;
  }}
 /*------------*/  
 @media screen and (max-width: 1368px) {
  .slider {
    width: 400px;
    height:250px;
  }}

  @media screen and (max-width: 480px) {
    .slider {
      width: 340px;
      height:230px;
    }}


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

 @media screen and (max-width: 1368px) {
#mydivheader  {
margin-left: 420px;
margin-top: 350px;
width: 800px;
}}

@media screen and (max-width: 480px) {
  #mydivheader  {
  margin-left: -200px;
  margin-top: 1000px;
  width: 750px;
  transform : rotate(-90deg);
  }}

  @media screen and (max-width: 1368px) {
    #mydivheader2  {
    margin-left: 0px;
    margin-top: 250px;
    }}
    
    @media screen and (max-width: 480px) {
      #mydivheader2  {
      margin-left: 0px;
      margin-top: 200px;
      width: 390px;
 
      }}

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