@import url('https://fonts.googleapis.com/css2?family=Poiret+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poiret+One&display=swap');


@font-face {
    font-family: 'Le Murmure_Regular';
    src:    url('fonts/Le_Murmure-Regular_web.eot');
    src:    url('fonts/Le_Murmure-Regular_web.eot?#iefix') format('embedded-opentype'),
            url('fonts/Le_Murmure-Regular_web.woff') format('woff'),
            url('fonts/Le_Murmure-Regular_web.woff2') format('woff2'),
            url('fonts/Le_Murmure-Regular_web.ttf') format('truetype'),
            url('fonts/Le_Murmure-Regular_web.svg#svgFontName') format('svg');
    font-weight: normal;
    font-style: normal;
}


body{
  background-color: black;
  color: white;
}

.bloc_intro{
  margin: 0 5% 5% 5%;
}

h1{
  text-align: center;
  font-family: 'Le Murmure_Regular';
  font-size: 8em;
  margin-bottom: 0;

}

h2{
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 2em;
}

.texte_intro{
  column-count: 4;
  font-family : 'Poiret One', cursive;
  /*color: grey;*/
}

.bloc_article{
  margin: 0 5% 0 5%;
  padding-top: 5%;
  display: flex;
  border-top-style: solid;
  border-color: white;
  border-width: thin;
}

img{
  width: 100%;
}

.image_espace_zoom{
  display: none;
}

.image_espace_zoom2{
  display: none;
}

.article{
  column-count: 2;
  position: absolute;
  padding-top: 0;
  margin: 0 5% 0 45%;
}

h3{

  font-family: 'Montserrat', sans-serif;
}

.texte{

  font-family : 'Poiret One', cursive;
}

.source_texte a{
  font-size: 12px;
  font-family: 'Montserrat', sans-serif;
  text-decoration: none;
  color: white;
}

.source_texte :hover{
  color: black;
  background-color: white;
  border-radius: 20px;

}

footer{
  background-color: white;
  margin-top: 5%;
}

.bloc_menu{
  display: flex;
  justify-content: space-around;
}

.menu{
  font-family: 'Poiret One', cursive;
  font-size: 2vh;
  width: 30%;
  text-align: center;
  align-items: center;
  color: black;
  margin: auto;
}

.menu a{
  text-decoration: none;
  color: black;
  padding: 3%;
  border-radius: 20px;
}

.menu a:hover{
  background-color: black;
  color: white;
}

.logo{
  width: 70%;
  margin-left: calc(50% - 35%);
}

/*FORMAT PETIT ECRAN ORDI*/

@media (min-width:700px) and (max-width:1099px){

  h2{
    font-size: 1.5em;
  }

  .bloc_article{
    display: block;
  }

  .texte_intro{
    column-count: 2;
  }

  .image_espace{
    text-align: center;
    display: none;
  }

  .image_espace_zoom{
    display: block;
  }

  img{
    width: 100%;
    text-align: center;
    position: relative;
    /*border-style: solid;*/
  }

  .article{
    position:relative;
    margin: 0 5% 5% 5%;
  }

  .logo{
    margin-top: calc(50% - 35%)
  }
}

/*FORMAT TELEPHONE*/

@media (min-width:0px) and (max-width:699px){

  h2{
    font-size: 1em;
  }

  .texte_intro{
    column-count: 1;
    text-align: justify;
  }

  .bloc_article{
    display: block;
  }

  .image_espace{
    display: none;
  }

  .image_espace_zoom{
    display: none;
  }

  .image_espace_zoom2{
    display: block;
    overflow:hidden;
    width: 117%;
    margin: 5% -10% 5% -10%;
  }

  .image_espace_zoom2 img{
    width: 120%;
    overflow:hidden;
  }

  img{
    width: 100%;
    text-align: center;
    position: relative;
    /*border-style: solid;*/
  }

  .article{
    position:relative;
    margin: 0 5% 5% 5%;
    column-count: 1;
    text-align: center;
  }

  .bloc_menu{
    display: block;
    padding: 0.5% 0 4% 0;
  }

  .menu{
    margin-left: auto;
    width: 100%;
    margin-top: 5%;
    font-size: 3vh;
  }

  .div_logo{
    width: 15%;
    margin-left: calc(50% - 7.5%);
    margin-top: 5%;
  }
}