.vignette { width:30%; }
     .vignette img { width:100%; }

    #pos_1_sur_3 { left:47%; top:53%; }
    #pos_2_sur_3 { left:72%; top:20%; }
    #pos_3_sur_3 { left:28%; top:55%; }

    #pos_1_sur_4 { left:04%; top:69%; width:15%; } /* horizontale, en bas à gauche entre le texte */
    #pos_2_sur_4 { left:13%; top:33%; width:26%; } /* horizontale, sous le texte  */
    #pos_3_sur_4 { left:44%; top:14%; } /* horizontale, en haut au milieu, entre le texte et le logo */
    #pos_4_sur_4 { left:42%; top:46%; width:19.5%; } /* verticale, au centre */


    #pos_1_sur_6 { left:47%; top:53%; }
    #pos_2_sur_6 { left:72%; top:20%; }
    #pos_3_sur_6 { left:28%; top:55%; }
    #pos_4_sur_6 { left:03%; top:57%; }
    #pos_5_sur_6 { left:16%; top:22%; }
    #pos_6_sur_6 { left:41%; top:08%; }

    #pos_1_sur_7 { left:71%; top:22%; } 
    #pos_2_sur_7 { left:02.5%; top:30%; }
    #pos_3_sur_7 { left:25%; top:34%; }
    #pos_4_sur_7 { left:43%; top:05%; }
    #pos_5_sur_7 { left:01%; top:60%; } /* { left:06%; top:26%; } */
    #pos_6_sur_7 { left:23%; top:67%; } /* { left:45%; top:03%; } */
    #pos_7_sur_7 { left:46.5%; top:50%; }
  //  #pos_1_sur_7:before { content:'1_7 : '; color:red; }
  //  #pos_2_sur_7:before { content:'2_7 : '; color:red; }
  //  #pos_3_sur_7:before { content:'3_7 : '; color:red; }
  //  #pos_4_sur_7:before { content:'4_7 : '; color:red; }
  //  #pos_5_sur_7:before { content:'5_7 : '; color:red; }
  //  #pos_6_sur_7:before { content:'6_7 : '; color:red; }
  //  #pos_7_sur_7:before { content:'7_7 : '; color:red; }

    #pos_1_sur_8 { left:72%; top:20%; }
    #pos_2_sur_8 { left:06%; top:26%; }
    #pos_3_sur_8 { left:28.5%; top:32%; }
    #pos_4_sur_8 { left:45%; top:01%; }
    #pos_5_sur_8 { left:03%; top:59%; }
    #pos_6_sur_8 { left:26%; top:67%; }
    #pos_7_sur_8 { left:50%; top:52%; }
    #pos_8_sur_8 { left:16%; top:53%; }
  //  #pos_1_sur_8:before { content:'1_8 : '; color:red; }
  //  #pos_2_sur_8:before { content:'2_8 : '; color:red; }
  //  #pos_3_sur_8:before { content:'3_8 : '; color:red; }
  //  #pos_4_sur_8:before { content:'4_8 : '; color:red; }
  //  #pos_5_sur_8:before { content:'5_8 : '; color:red; }
  //  #pos_6_sur_8:before { content:'6_8 : '; color:red; }
  //  #pos_7_sur_8:before { content:'7_8 : '; color:red; }
  //  #pos_8_sur_8:before { content:'8_8 : '; color:red; }