@font-face {
  font-family: "munken";
  src: url("fonts/MunkenSansWeb-Regular.woff") format("woff");}

  @font-face {
    font-family: "munken_medium";
    src: url("fonts/MunkenSansWeb-Medium.woff") format("woff");}


  @font-face {
    font-family: "amatic";
    src: url("fonts/amatic-bold.woff") format("woff");}
  @font-face {
    font-family: "lora";
    src: url("fonts/lora-regular.woff") format("woff");}


*{
    /*  border: 0.2px solid green; */
}

a {
  text-decoration: none;
  color: #ffc718;
}

a:hover {
     color:#ff9318;
     text-decoration:none;
}


body {
  background-color: #F8F6EB;
  margin: 0px;
}


header {
   font-family:"amatic";
   font-size: 45px;
}


h1 {
  line-height: 100%;
    margin-top: 0px;
    margin-bottom:10px;
    font-family:"munken_medium";
    font-size: 30px;
    font-weight : normal;
    text-align: center;
}


h2 {
  line-height: 100%;
    font-family:"amatic";
      font-size: 25px;
    font-weight : normal;
    text-align: center;
}



p {
  font-family:"munken";
  font-size: 25px;
  color: black;
  margin-top: 0px;
}


img {
  width: 100%;
  height: auto;
}

.logo-header {
    width: 450px;
    margin: 30px,30px,0px,30px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}


/* BARRE DE NAVIGATION */

.nav-list {
    list-style-type: none;
    margin-top: 0px;
    margin-bottom: 40px;
    padding: 0;

    display: flex;
    justify-content: center;
}

.nav-item {
    display: inline;
    margin-left: 2%;
    margin-right: 2%;
    color: green;

}

.text
{
  text-align: left;
  margin-bottom: 3px;
}




.temoignage_container
{
  display: inline-block;
  position: relative;
}


.temoignage
{
  background: rgba(255, 199, 24, 0.4);
  z-index: 1;
  position: absolute;
  text-align: center;
  margin: 0 auto;
  padding: 130px 50px 130px 50px;
  left: 0;
  right: 0;
  top: 12%;
  width: 70%;
}


.picto {
  max-width: 60px;
  margin-left: auto;
   margin-right: auto;
}

.numero {
  max-width: 88px;
  margin-left: auto;
   margin-right: auto;
}


/* XXXXXXXXXXXXXXXXXXX   Grille (Responsive mobile first)  XXXXXXXXXXXXXXXXXX */


.full{
    max-width: 1300px;
    margin: auto;
}


.wrapper_mono{


    padding-top: 10px;
    padding-bottom: 10px;

}



/* container général smartphone*/
.wrapper{
    display: grid;
    margin: 20px;

}



.wrapper-item
{
  margin: 20px;
  width: auto;
}

.wrapper-item.marg
{
  margin-top: 40px;
}




/* si l'écran fait plus de 1000 px de large (écran d'ordinateur) alors : */
@media only screen and (min-width: 1000px) {

      h1 {
          font-size: 20px;
      }

      h2 {
          font-size: 30px;
      }

      p {
        font-size: 15px;
      }

        .wrapper{
            display: grid;
            grid-template-columns: 1fr 1fr;
            margin: auto;
        }