*
{
  margin: 0;
  padding: 0;
}

h1
{
  text-align: center;
  font-size: 40px;
  font-weight: bold;
  margin: 40px;
}

section
{
  background-image: url("../img/vitraux/Lagny/Plan lagny.jpg");
  width: 745px;
  height: 457px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-bottom: 40px;
}

#centreTop, #unTop, #deuxTop, #troisTop, #quatreTop, #photoGauche, #photoDroite, #unMid, #deuxMid, #troisMid, #centreMid, #quatreMid, #cinqMid, #sixMid, #unBot, #deuxBot, #troisBot, #bigBot
{
  position: absolute;
}

#photoGauche
{
  top: 4%;
  left: 7%;
}

#photoDroite
{
  top: 4%;
  right: 5%;
}

#unTop
{
  bottom: 67%;
  left: 34.5%;
}

#deuxTop
{
  bottom: 73.5%;
  left: 41.5%;
}

#centreTop
{
  bottom: 78%;
  left: 54.5%;
}

#troisTop
{
  bottom: 73.5%;
  left: 60.5%;
}

#quatreTop
{
  bottom: 67%;
  left: 64%;
}

#unMid
{
  bottom: 36%;
  left: 22%;
}

#deuxMid
{
  bottom: 45%;
  left: 29%;
}

#troisMid
{
  bottom: 46%;
  left: 42%;
}

#centreMid
{
  bottom: 50%;
  left: 50.5%;
}

#quatreMid
{
  bottom: 46%;
  left: 67%;
}

#cinqMid
{
  bottom: 42%;
  left: 72%;
}

#sixMid
{
  bottom: 36%;
  left: 76%;
}

#unBot
{
  bottom: 32%;
  left: 16%;
}

#deuxBot
{
  bottom: 24.3%;
  left: 5.5%;
}

#troisBot
{
  bottom: 4.5%;
  left: 6%;
}

#bigBot
{
  bottom: 12.5%;
  left: 22%;
}

@media screen and (max-width: 700px)
{
  section
  {
    background-image: none;
    display: flex;
    flex-direction: column;
    width: auto;
    height: auto;
  }

  h1
  {
    margin-top: 4%;
  }

  #centreTop, #unTop, #deuxTop, #troisTop, #quatreTop, #photoGauche, #photoDroite, #unMid, #deuxMid, #troisMid, #centreMid, #quatreMid, #cinqMid, #sixMid, #unBot, #deuxBot, #troisBot, #bigBot
  {
    position: static;
  }

  section img
  {
    margin: 50px;
  }

  #unTop
  {
    transform: rotateZ(80deg);
  }

  #deuxTop
  {
    transform: rotateZ(40deg);
  }

  #troisTop
  {
    transform: rotateZ(-40deg);
  }

  #quatreTop
  {
    transform: rotateZ(-80deg);
  }

  #unMid
  {
    transform: rotateZ(70deg);
  }

  #deuxMid
  {
    transform: rotateZ(34deg);
  }

  #cinqMid
  {
    transform: rotateZ(-35deg);
  }

  #sixMid
  {
    transform: rotateZ(-70deg);
  }

  #unBot
  {
    transform: rotateZ(20deg);
  }

  #deuxBot
  {
    transform: rotateZ(70deg);
  }

  #troisBot
  {
    transform: rotateZ(120deg);
  }

}