.vignette { width:30%; }
     .vignette img { width:100%; }
     
    #avatar {
background-size: 240%;
background-position: 50% 88%;
background-image: url(/_imgs/photos/2021-01/nous/IMG_4954.jpeg);
display: block;
width: 80pt;
height: 80pt;
border: none;
-moz-border-radius: 75px;
-webkit-border-radius: 75px;
border-radius: 75px;
position: absolute;
top: 0.5%;
left:0.5%;
    }

    #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:70%; width:15%; } /* horizontale, en bas à gauche entre le texte */
    #pos_2_sur_4 { left:09%; top:30%; width:30%; } /* horizontale, sous le texte  */
    #pos_3_sur_4 { left:46%; top:12%; width:22%; } /* horizontale, en haut au milieu, entre le texte et le logo */
    #pos_4_sur_4 { left:42%; top:44%; width:20%; } /* 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 { right:02%; top:24%; width:26%; } 
    #pos_2_sur_8 { left:03%; bottom:34%; width:25%; } /* horizontale, sous le texte à gauche */
    #pos_3_sur_8 { left:48%; top:06%; width:20%; }
    #pos_4_sur_8 { left:54%; bottom:08%; width:14%; } /* verticale au centre */
    #pos_5_sur_8 { left:03%; bottom:08%; width:14%; } /* horizontale, en bas (1 sur 3) à gauche */
    #pos_6_sur_8 { left:20%; bottom:08%; width:14%; } /* horizontale, en bas (2 sur 3) à gauche */
    #pos_7_sur_8 { left:37%; bottom:08%; width:14%; } /* horizontale, en bas (3 sur 3) à gauche */
    #pos_8_sur_8 { left:31%; bottom:34%; width:20%; } /* horizontale, sous le texte plus centré */
    
    #devant { 
  width: 190px;  bottom: 40%; right: 29%; 
  /* Rotation du div */
  transform:rotate(08deg);
  -ms-transform:rotate(08deg); /* Internet Explorer */
  -moz-transform:rotate(08deg); /* Firefox */
  -webkit-transform:rotate(08deg); /* Safari et Chrome */
  -o-transform:rotate(08deg); /* Opera */
    }
    #resume { 
bottom:11%; right:1.5%; 
    }
  //  #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; }