.txt_sur_img{padding-top:0;padding-right: 0;padding-left: 0;position: relative;
  --sizeBlocText:56%;
  --retrait: calc( var(--sizeBlocText) /4 ) ;
}
.txt_sur_img>.backgroundWrapper{padding-bottom:70%;
 margin-left: var(--retrait);width:calc(100% - var(--retrait));}
.txt_sur_img>.bloc1{padding:5%; padding-left:10%; padding-right:10%; width:var(--sizeBlocText); margin:0;
position:absolute; top:0; left:0;z-index:3;}
.txt_sur_img>.bloc1 *{color:currentColor; text-align:left;}


.txt_sur_img.shapeChange[data-shape="1"]>.bloc1{top:50%; transform: translateY(-50%);}

.txt_sur_img.shapeChange[data-shape="2"]>.bloc1{top:auto; bottom:0;}

.txt_sur_img.shapeChange[data-shape="3"]>.bloc1{left:auto; right:0;}
.txt_sur_img.shapeChange[data-shape="3"]>.backgroundWrapper{margin-left: 0; margin-right:var(--retrait);}

.txt_sur_img.shapeChange[data-shape="4"]>.bloc1{left:auto; right:0; top:50%; transform: translateY(-50%);}
.txt_sur_img.shapeChange[data-shape="4"]>.backgroundWrapper{margin-left: 0; margin-right:var(--retrait);}

.txt_sur_img.shapeChange[data-shape="5"]>.bloc1{left:auto; right:0; top:auto; bottom:0;}
.txt_sur_img.shapeChange[data-shape="5"]>.backgroundWrapper{margin-left: 0; margin-right:var(--retrait);}

.editableZone .txt_sur_img>i{z-index: 4}
/*.editableZone .txt_sur_img:hover>.bloc1{transform: translateY(30px);}*/

@media screen and (max-width:800px) {
	.txt_sur_img>.bloc1{width:100%; position: relative; left:auto; right: auto; top: auto; bottom: auto; transform: none;}
	.txt_sur_img>.backgroundWrapper{transform: scale(1.32) translateY(11%);margin-bottom: 12%; margin-left: 0; margin-right: 0}
}