div .monArticle{
    display: block;
    content: '';
    background-color: aquamarine;
    width: 100%;
    height: 800px;
}
div .monBloc {
    display: block;
    content: '';
    background-color: blue;
    height: 300px;
}
h1, h2 {
    font-size: 2em;
    font-variant: small-caps;
    font-weight: 200;
    margin: 1em 0;
    width: 100%;
    display: inline-block;
  }

  h1 {
    font-size: 2em;
    font-variant: small-caps;
    margin: 1em 0;
    font-weight: 400;
  
  }

  h2 {
    font-size: 1.8em;
    font-weight: 200;
  }

article h1 {
    margin-top: 2em;
}
article h2 {
  margin-bottom: .5em;
  margin-top: 1em;
}
  article p {
    text-align: justify;
    line-height: 1.5em;
  
  }
section {
    padding-top: 150px;
      margin-left: 225px;
    }

article {
      width: 85%;
    }
  
article .monArticle {
  /*    width: 80%;*/
  
     
      margin-bottom: 1em;
     
    }
    article .monArticle  img{ 
  
        width: 20vw;
        height: 20vh;
        max-width: 200px;
        max-height: 150px;
        
    }
    article .illustration img{
      margin: 1em 0 2em 0;
    
      max-width: 100%;
      height: auto;
    }
    #adherent{
      background-color: #bbb;
      padding: 0 20px;
      border-radius: 10px;
      box-shadow: 2px 10px 12px rgba(0, 0, 0, 0.5);

    } 
    #adherent a{
      color: #000;
      font-weight: 400;
    }

    .laDirection {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, auto);
      grid-gap: 1em 20px;
    }

    .carte {
      width: 300px;
      /*height: 350px;*/
      background-color: rgba(107, 106, 106, 0.5);
      border-radius: 10px;
      box-shadow: 2px 10px 12px rgba(0, 0, 0, 0.5);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
     margin: 20px 0;
      padding-top: 20px;
    }
    .modele {
      height: 320px;
      max-height: 100%;
      max-width:  100%;
    }
    .legende {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 300px;
      }
    .legende p {
      margin-top: 20px;
     color: rgba(252, 250, 250, 1);
    text-align: center;
    font-size: 0.8em;
      
    } 
    .legende h4 {
      margin-bottom: 20px;
      font-size: 110%;
      font-weight:400;
    }
    .reglement {
      margin: 2em 0;
    }
    .signature {
      width: 100%;
      margin: 3em 0 2em;
      display: flex;
      flex-basis: auto;
      
    }
    .signataire {
      width: 40%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  
   
    .reglement .regle strong{
      display: inline-block;
      width: 2em;
      height: 1em;

    }
    .reglement p {
      display: block;
      text-indent: -2em;
      margin: 0.5em 0 0 0;
      padding-left: 4em;
    }
    .signataire p{
      text-indent: 0;
      padding-left: 0;

    }
    .signataire p:first-child{
      font-size: 80%;

    }

/******************* la Galerie ********************/


.box-timeline {
  width: 100%;
  height: 1500px;
  /*background: #f1f1f1;*/
  position: relative;
  padding: 80px 0 250px 0;
  margin-bottom: 100px;
}

.ligne {
  height: 1000px;
  width: 6px;
  margin: 0 auto;
  background: #333;
}

.rond {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #333;
  position: absolute;
  border: 1px solid #000;
  left: 50%;
  transform: translate(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
}
/* 1000 - 160 + 80 / 3 =~ 306 */
.r1{top: 80px;}
.r2{top: 386px;}
.r3{top: 692px;}
.r4{top: 1000px;}

.box2 {
  color: #333;
  width: 400px;
  min-height: 250px;
  padding: 20px;
  border-radius: 3px;
  height: auto;
  background-color: #f1f1f1;
  box-shadow: 2px 10px 12px rgba(0, 0, 0, 0.5);
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  border-radius: 10px;
}
.box2 h2 {
  color: aliceblue;
  font-weight: 400;
  font-size: 200%;
  margin-top: 150px;
  padding: 0;
}






.box2 img {
  width: 100%;
}
.picto {
  width: 50px;
  height: 50px;
}

.b1 {
  top: 80px;
  left: calc(50% - 270px);
  background-image: url('../img/galerie/porterBalon_PD2.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.b2 {
  top: 386px;
  left: calc(50% + 270px);
  background-image: url('../img/galerie/doudou_gale_PD2.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.b3 {
  top: 692px;
  left: calc(50% - 270px);
  background-image: url('../img/galerie/retraite_gale_PD2.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.b4 {
  top: 1000px;
  left: calc(50% + 270px);
}

.box2 p {
  line-height: 20px;
  font-size: 18px;
  margin: 10px 0 20px 0;
}
.btn {
  display: block;
  background: midnightblue;
  padding: 10px;
  width: 120px;
  text-align: center;
  color: #f1f1f1;
  text-decoration: none;
  border-radius: 3px;
  margin-top: 10px;
}

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

  .ligne {
      position: relative;
      left: 200px;
  }
  .rond {
      left: calc(50% + 200px);
  }
  .box2 {
      left: calc(50% - 50px)
  }

}
.monArticle2 {
  /*border: 1px solid #000 ;
 border-radius: 10px;*/
 padding: 20px;

}
.adresseReunion{
  margin: 2em 0 0;
    width: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 5em 0;

}
.adresseReunion > .leLieu
{
  
  margin: 0 20px 0 0;
  border-radius: 10px;
  background-color: #f4f4f4;
  width: 220px;
  height: 110px;
  margin: 10px;
  text-align: center; 
  
}
.leLieu p{
  padding-left: 8%;

  
}
.leLieu h4{
  background-color: #bbb; 
  font-weight: 200;
  margin-bottom: .4em;
  padding: 10px 10px;

}
.adresseLieu {
  font-size: 14px;
}
.reunion {
  margin-top: 4em;

}
.reunion1 {
  margin-top: 1em;
  
}
.reunion h3 {
height: auto;
padding: 10px 0 10px 10px;

border-radius: 5px 0 0 0;	
margin-bottom: .8em;
background-color: #c3c0c0;
background-image: linear-gradient(to right, rgba(255,0,0,0), #8e8e8e 50%);
/*border-bottom: 1px solid rgba(0, 0, 0, 0.8);*/
border-left: 0;
border-right: 0;
border-top: 0;

border-bottom: 3px;
border-style: solid;
border-image: linear-gradient(to right, rgb(70, 69, 69), #8e8e8e 50%) 1;



}
.dateHeure {
  font-size: 120%;
  margin-bottom: .2em;
}
.obligatoire{
  font-style: italic;
  font-weight: 400;
  color: rgb(90, 2, 19);
}

.leWeekend {
  display: flex;
  background-color: #c3c0c0;
}