{literal}
<meta charset="UTF-8"> 
<script type="text/javascript">
	// get header height (without border)
	var getHeaderHeight = $('.headerContainerWrapper').outerHeight();

	// border height value (make sure to be the same as in your css)
	var borderAmount = 2;

	// shadow radius number (make sure to be the same as in your css)
	var shadowAmount = 30;

	// init variable for last scroll position
	var lastScrollPosition = 0;

	// set negative top position to create the animated header effect
	$('.headerContainerWrapper').css('top', '-0px');

	$(window).scroll(function() {
		var currentScrollPosition = $(window).scrollTop();

		if ($(window).scrollTop() > 2 * (getHeaderHeight + shadowAmount + borderAmount) ) {

			$('body').addClass('scrollActive').css('padding-top', getHeaderHeight);
			$('.headerContainerWrapper').css('top', 0);

			if (currentScrollPosition < lastScrollPosition) {
				$('.headerContainerWrapper').css('top', '-0px');
			}
			lastScrollPosition = currentScrollPosition;

		} else {
			$('body').removeClass('scrollActive').css('padding-top', 0);
		}
	});
</script>
<style>
    div.products_value1 {
        font-size: 11px;
    width: 26px;
    margin: auto;
    background: red;
    color: white;
    border: 1px solid #e82323;
    border-radius: 3px;
    /* height: 19px; */
    margin-top: -2px;
   
    margin-bottom: -7px;
     -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    animation-name: example;
    animation-duration: 4s;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
    from {background-color: red;}
    to {background-color: tomato;}
}

/* Standard syntax */
@keyframes example {
    from {background-color: red;}
    to {background-color: tomato;}
}
    p.j-shop {
   background: #05bae5;
    padding: 14px;
    width: 548px;
    margin: auto;
    font-size: 18px;
    margin-bottom: 31px;
      color: white;
}

@media (max-width: 570px) {
      #tbpanie { 
        width: 400px !important;
    
    }  
    
    .link_order{
            position: relative;
    left: 109px !important;
    }
}


@media (max-width: 570px) {
      #tbpanie { 
        width: 350px !important;
    
    }  
    
    .submit1{
            position: relative;
    left: 245px !important;
    }
    
    
    p.j-shop {
   
    position: relative;
    left: -76px;
}

}
 .submit1:hover{
  
    background: rgba(5, 186, 229, 0.75);
 
}

 .submit1 a{
     color: white;
     text-decoration: none
 }
 .submit1{
 -webkit-appearance: button;
    cursor: pointer;
    background: #05bae5;  
    font-size: 15px;
    width: 92px;
    padding: 4px;
    border: 1px solid;
    border-radius: 4px;
        position: relative;
    left: 432px;
    color: white;
}
    #tbpanie {
            margin-top: -19px;
        font-family: Arial, Helvetica, sans-serif;
    color: #666;
    font-size: 13px;
    font-weight: bold;
    text-shadow: 1px 1px 0px #fff;
    background: #eaebec;
    border: #3777a3 1px solid;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: 0 1px 2px #3777a3;
    -webkit-box-shadow: 0 1px 2px #3777a3;
    box-shadow: 0 1px 2px #3777a3;
        width: 546px;
    margin: auto;
    z-index: 99999;
    position: relative;
    margin-bottom: 18px;
    margin-top:-7px;
    }  

#tbpanie tr td {
    border-top: 1px solid #3777a3;
    border-bottom: 1px solid #3777a3;
    border-left: 1px solid #3777a3;
    background: #613413;
    background: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#fff));
    background: -moz-linear-gradient(top, #fefefe, #ffffff);
        padding: 5px;
}
.headerContainerWrapper { 
   background: rgba(5, 186, 229, 0.38);
    text-align: center;
	position: static;
	top: 0;
	left: 0;
	width: 100%; 
	-webkit-transition: top 500ms ease;
	-moz-transition: top 500ms ease;
	-o-transition: top 500ms ease;
	transition: top 500ms ease;

	/* enable hardware acceleration to fix laggy transitions */
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	-o-transform: translateZ(0);
	transform: translateZ(0);
}
.headerContainerShadow {
	background: rgba(255, 255, 255, 0.48);
	border-bottom: 2px solid #eee;
	box-shadow: 0 0 30px 0 rgba(0,0,0, 0.3);
	position: relative;
	z-index: 999999;     /* to place the header above all elements */
}
.scrollActive .headerContainerWrapper {
    z-index: 99999;
	position: fixed;
}
</style>
{/literal}
<div id="notempty-{$_module.idmodule}-{$_module.idlinker}"{if $_vars.empty == 'true'} class="notempty" style="display:none;"{/if}></div>
<!--<img src="modules/catalogue_etendu_17/views/cart/customs/default/pan.png" style="width: 50px;position: absolute;left: -17px;top: -25px;"/>
-->
<div class="headerContainerWrapper">
	<div class="headerContainerShadow">
		<div class="headerContainer">
                    
                    <p class="j-shop">	                    L'article a été ajouté au panier.	                </p>
<table width="400px" id="tbpanie">
    <tr>
        <td colspan="2"> 
        {if $_vars.products !==""} <div class="products_value1" id="products-{$_module.idmodule}-{$_module.idlinker}">{$_vars.products}</div>{/if}<img src="modules/catalogue_etendu_18/views/cart/customs/default/icon_card_plus.png" width="70px" style="position: relative;"></td>
    </tr>
  <!--  <tr>
        <td>
            <div class="products">{$_config.text_products_nb}</div>
        </td>
        <td align="right">
            <div class="products_value" id="products-{$_module.idmodule}-{$_module.idlinker}">{$_vars.products}</div>
        </td>
    </tr>-->
    <tr>
        <td>
            <div class="pdistinct">Produits distincts</div>
        </td>
        <td align="right">
            <div class="pdistinct_value" id="pdistinct-{$_module.idmodule}-{$_module.idlinker}">{$_vars.pdistinct}</div>
        </td>
    </tr>
    <tr>
        <td>
            <div class="amount">{$_config.text_amount}</div>
        </td>
        <td align="right">
            <div class="amount_value"><span id="total-{$_module.idmodule}-{$_module.idlinker}">{$_vars.total}</span> &euro;</div>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <div class="submit1"><a href="panier-17.html" style="color:black">Paiement</a></div>
        </td>
    </tr>
</table>
                    </div>
	</div>
</div>
</div>

<div id="empty-{$_module.idmodule}-{$_module.idlinker}"{if $_vars.empty == 'false'} style="display:none;"{/if}>
	<div class="cart_empty">
	    
    </div>
</div>

<script language="javascript" type="text/javascript">
	function cartrefresh_{$_module.idmodule}()
	{literal}
	{
		var jsonRequest = new Request.JSON({
			{/literal}url: "{$_module.path}controller-ajax.php?v={$_module.idmodule}-{$_module.idlinker}"{literal},
			onSuccess: function(json, text){
				if(text == 'empty') {
					{/literal}
					$('#empty-{$_module.idmodule}-{$_module.idlinker}').css("display","")
					$('#notempty-{$_module.idmodule}-{$_module.idlinker}').css("display","none")
				 
					{literal}
					
				} else {
					{/literal}

					$('#empty-{$_module.idmodule}-{$_module.idlinker}').css("display","none")
					$('#notempty-{$_module.idmodule}-{$_module.idlinker}').css("display","")
				 
					$('#products-{$_module.idmodule}-{$_module.idlinker}').html(json.products);
					$('#pdistinct-{$_module.idmodule}-{$_module.idlinker}').html(json.pdistinct);
					$('#total-{$_module.idmodule}-{$_module.idlinker}').html(json.total);
					{literal}
				}
			},
			onFailure: function(){
				alert("Une erreur est survenue");
			}
		}).send();
	}
	{/literal}
	
</script>