.vi02-1
{
  width:23vw;
  height:23vw;
  background:url(../images/vignettes/02-1.jpg) top center no-repeat;
  background-size: 100% auto;
  position:absolute;
  top:1vw;
  left: 1vw;
  z-index:10;
  pointer-events:none;
}

.te02-1
{
  width:17vw;
  height:4vw;
  background-color: #FFF;
  position:absolute;
  top:1vw;
  left: 1vw;
  z-index:10;
  pointer-events:none;
  border: 5px black solid;
  padding-left: 5px;
  padding-right: 5px;
  overflow: hidden;
  line-height: 2vw; /* hauteur de ligne (identique) */
  z-index:100;
}

.vi02-2
{
  width:23vw;
  height:23vw;
  background:url(../images/vignettes/02-2.jpg) top center no-repeat;
  background-size: 100% auto;
  position:absolute;
  top: 1vw;
  left: 25vw;
  z-index:10;
  pointer-events:none;
}

.te02-2
{
  width:31vw;
  height:2vw;
  background-color: #FFF;
  position:absolute;
  top:20vw;
  left: 15vw;
  z-index:10;
  pointer-events:none;
  border: 5px black solid;
  padding-left: 5px;
  padding-right: 5px;
  overflow: hidden;
  line-height: 2vw; /* hauteur de ligne (identique) */
  z-index:100;
  transition: width 1s;
}

@media (max-width:1700px){
  .te02-2
  {
    width:35vw;
    height:2vw;
    background-color: #FFF;
    position:absolute;
    top:20vw;
    left: 15vw;
    z-index:10;
    pointer-events:none;
    border: 5px black solid;
    padding-left: 5px;
    padding-right: 5px;
    overflow: hidden;
    line-height: 2vw; /* hauteur de ligne (identique) */
    z-index:100;
    transition: width 1s;
  }
}

.vi02-3
{
  width:22vw;
  height:6vw;
  background:url(../images/vignettes/02-3.jpg) top center no-repeat;
  background-size: 100% auto;
  position:absolute;
  top: 11vw;
  left: 30vw;
  z-index:100;
  pointer-events:none;
  border : 5px solid white;
}

.te02-3
{
  width:20vw;
  height:3vw;
  color: #FFF;
  font-size: 2.5vw;
  position:absolute;
  top: 14vw;
  left: 31vw;
  z-index:10;
  pointer-events:none;
  padding-left: 5px;
  padding-right: 5px;
  overflow: hidden;
  line-height: 3vw; /* hauteur de ligne (identique) */
  z-index:1000;
}

.vi02-4
{
  width:30vw;
  height:30vw;
  background:url(../images/vignettes/02-4.jpg) top center no-repeat;
  background-size: 100% auto;
  position:absolute;
  top: -2vw;
  left: 50vw;
  z-index:10;
  pointer-events:none;
  border : 5px solid white;
}

.te02-4
{
  width:15vw;
  height:6vw;
  background-color: #FFF;
  position:absolute;
  top: -1vw;
  left: 51vw;
  z-index:10;
  pointer-events:none;
  border: 5px black solid;
  padding-left: 5px;
  padding-right: 5px;
  overflow: hidden;
  line-height: 2vw; /* hauteur de ligne (identique) */
  z-index:10000;
}

.end02
{
  width:20%;
  height:5vw;
  position:absolute;
  top: 38vw;
  left: 72vw;
  font-family: 'Lakki Reddy', cursive;
  font-size: 5vw;
  text-align: right;
  color: #FFF;
  text-shadow:0 0 10px #000;
  z-index: 1000;
}