body {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #DEDEDE;
  color: black;
}
h1 {
    font-size: 15px;
    color: white;
    text-align: center;
    position: absolute;
    width: 100%;
}
h2 {
    font-size: 15px;
    color: white;
    position: absolute;
    text-align: right;
    width: 100%;
    bottom: 0%;
}

#affiche {
  overflow: hidden;
  position: relative;
  width: 64vh;
  height: 90vh;
  background: #D25220;
}
#terrain_1 {
  stroke-dasharray:2000;
  transition: stroke-dasharray 10s;
  stroke-dashoffset:2000;
}

#affiche:hover #terrain_1 {
  stroke-dasharray:1000;
}

#terrain_2 {
  stroke-dasharray:2000;
  transition: stroke-dasharray 10s;
  stroke-dashoffset:2000;
}

#affiche:hover #terrain_2 {
  stroke-dasharray:1000;
}
#ligne_verticale_1{
  stroke-dasharray:1000;
  transition: stroke-dasharray 10s;
  stroke-dashoffset:1000;
}
#affiche:hover #ligne_verticale_1{
  stroke-dasharray:1650;
}

#ligne_verticale_2{
  stroke-dasharray:1000;
  transition: stroke-dasharray 10s;
  stroke-dashoffset:1000;
}
#affiche:hover #ligne_verticale_2{
  stroke-dasharray:1650;
}

#ligne_horizontale_1{
  stroke-dasharray:500;
  transition: stroke-dasharray 10s;
  stroke-dashoffset:500;
}
#affiche:hover #ligne_horizontale_1{
  stroke-dasharray:1000;
}

#ligne_horizontale_2{
  stroke-dasharray:500;
  transition: stroke-dasharray 10s;
  stroke-dashoffset:500;
}
#affiche:hover #ligne_horizontale_2{
  stroke-dasharray:1000;
}

#ligne_centrale{
  stroke-dasharray:500;
  transition: stroke-dasharray 10s;
  stroke-dashoffset:500;
}
#affiche:hover #ligne_centrale{
  stroke-dasharray:1000;
}

#filet{
  stroke-dasharray:500;
  transition: stroke-dasharray 10s;
  stroke-dashoffset:500;
}
#affiche:hover #filet{
  stroke-dasharray:1000;
}

#texte {
    opacity: 0;
}

#affiche:hover #texte{
    transition: all 3s;
    opacity: 1;
}