This Joomla 4 override allows you to display a realistic supermarket receipt simply using the Joomla's mod_articles_category module. At the bottom of this article, you can download the files of the override.

Joomla 4 frontend rendering

PhP markup

<?php
/**
 * @package     Joomla.Site
 * @subpackage  mod_articles_category
 * @author		web-eau.net
 * @copyright   (C) 2010 Open Source Matters, Inc. <https://www.joomla.org>
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

use Joomla\CMS\Helper\ModuleHelper;
use Joomla\CMS\Language\Text;

if (!$list)
{
	return;
}

$model = JModelLegacy::getInstance('Articles', 'ContentModel', array( 'ignore_request' => true )); 
$params = JFactory::getApplication()->getParams();
$model->setState('params', $params);
$model->setState('filter.category_id', 17); // xxxx category ID 
$num_articles = $model->getTotal();
?>

<div class="container-ticket">
	<div class="ticket">
		<div class="head-ticket">
			<p class="x-bold">E.Leclerc</p>
			<p class="bold">29800 LANDERNEAU</p>
			<p class="bold">Tél: 02 98 21 47 11</p>
			<br>
			<p class="bold">VOUS REMERCIE DE VOTRE CONFIANCE</p>
			<p>Caisse 015-2019 15 avril 2019 18:24</p>
			<p>Ticket 15/04/170 0QRM 02050</p>
			<div class="code-barre">
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</div>
		</div>
		<div class="body-ticket">
			<div class="produits">				
				<?php foreach ($list as $item) : ?>
				<div class="col2">
					<?php if ($params->get('link_titles') == 1) : ?>
					<p><a class="mod-articles-category-title <?php echo $item->active; ?>" href="<?php echo $item->link; ?>"><?php echo JHTML::_('string.truncate', $item->title, 30, false, false) ; ?></a></p>
					<?php else : ?>
					<p><?php echo JHTML::_('string.truncate', $item->title, 30, false, false) ; ?></p>
					<?php endif; ?>			
					<?php if ($item->displayDate) : ?>
					<p class="prix">
						<?php echo $item->displayDate; ?> <!-- use the format 'd.m' in module parameters -->
					</p>
					<?php endif; ?>
				</div>						
				<?php endforeach; ?>
				<div class="hr-sm"></div>
				<div class="col2 pt-2">
					<p>Total <?php echo $num_articles; ?> articles</p>
					<p class="prix">1.63</p>
				</div>
				<p>Soit en franc : 10.69</p>
				<p>(1 euro = 6,55957 francs)</p>
				<br>
				<div class="col2">
					<p>Bon achat carte</p>
					<p class="prix">1.63</p>
				</div>
				<div class="col2">
					<p>Rendu</p>
					<p class="prix">0.00</p>
				</div>
			</div>
			<div class="hr-lg"></div>
			<div class="carte">
				<p class="title-carte">Avec la carte E.Leclerc</p>
				<br>
				<div class="col2">
					<p>CUMUL DISPONIBLE AU 15/04/19 :</p>
					<p class="prix">42.65€</p>
				</div>
				<br>
				<p>Ce CUMUL DISPONIBLE est à valoir sur vos prochains achats dans tous les magasins E.LECLERC participant à l'opération et sur présentation de votre carte E.LECLERC.</p>
				<br>
				<p>Modalités, durée de validité à l'accueil</p>
			</div>
			<div class="hr-lg"></div>
		</div>
		<div class="footer-ticket">
			<p class="title-footer">Merci de votre<br>visite et à bientôt</p>
		</div>
	</div>
</div>

CSS

.serif{
	font-family: serif;
}
.sans-serif{
	font-family: 'sans-serif';
}
.bold{
	font-weight: 700;
}
.x-bold{
	font-weight: 900;
	text-shadow: 0px 0px 1px #000;
}
.hr{
	border-bottom: 1.5px dashed #333;
	margin: 10px 0;
}
.hr-sm{
	/*@extend .hr;*/
	width: 30%;
	float: right;
}
.hr-lg{
	@extend .hr;
	width: 100%;
}
.col2{
	display: flex;
	width: 100%;
	justify-content: space-between;
}
.container-ticket {
  background: #e6e6e6;
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 50px 0;
  box-sizing: border-box;
  font-size: 12px;
  font-family: 'courier';
}
.container-ticket .ticket {
  cursor: default;
  position: relative;
  width: 350px;
  padding: 10px 20px;
  background: #fff url(https://static.licdn.com/scds/common/u/images/apps/payments/textures/texture_paper_304x128_v1.png);
  box-shadow: 0px 5px 10px rgba(0, 0, 0, .1);
}
.container-ticket .ticket .head-ticket {
  text-align: center;
  padding: 0px 17px;
}
.container-ticket .ticket .head-ticket p {
  font-size: 14px;
}
.container-ticket .ticket .head-ticket p:nth-child(1) {
  font-size: 18px;
}
.container-ticket .ticket .head-ticket p:nth-child(6), .container-ticket .ticket .head-ticket p:nth-child(7) {
  font-size: 12px;
  text-align: left;
}
.container-ticket .ticket .head-ticket .code-barre {
  height: 50px;
  display: flex;
  justify-content: space-between;
  margin-left: -17px;
  margin-right: -17px;
  margin-top: 5px;
}
.container-ticket .ticket .head-ticket .code-barre span {
  height: 100%;
  width: 10px;
  display: inline-block;
  background: #333;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(1) {
  width: 3px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(2) {
  width: 5px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(3) {
  width: 3px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(4) {
  width: 6px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(5) {
  width: 1px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(6) {
  width: 5px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(7) {
  width: 6px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(8) {
  width: 2px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(9) {
  width: 7px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(10) {
  width: 3px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(11) {
  width: 5px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(12) {
  width: 4px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(13) {
  width: 3px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(14) {
  width: 4px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(15) {
  width: 6px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(16) {
  width: 7px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(17) {
  width: 1px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(18) {
  width: 2px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(19) {
  width: 6px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(20) {
  width: 2px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(21) {
  width: 1px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(22) {
  width: 7px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(23) {
  width: 7px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(24) {
  width: 6px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(25) {
  width: 7px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(26) {
  width: 7px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(27) {
  width: 7px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(28) {
  width: 2px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(29) {
  width: 7px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(30) {
  width: 3px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(31) {
  width: 7px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(32) {
  width: 5px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(33) {
  width: 5px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(34) {
  width: 4px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(35) {
  width: 4px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(36) {
  width: 2px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(37) {
  width: 5px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(38) {
  width: 2px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(39) {
  width: 2px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(40) {
  width: 4px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(41) {
  width: 5px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(42) {
  width: 1px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(43) {
  width: 2px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(44) {
  width: 1px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(45) {
  width: 3px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(46) {
  width: 6px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(47) {
  width: 4px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(48) {
  width: 5px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(49) {
  width: 7px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(50) {
  width: 4px;
  margin-right: 1px;
}
.container-ticket .ticket .body-ticket {
  padding: 0px 17px;
}
.container-ticket .ticket .body-ticket .produits {
  margin: 30px 0;
}
.container-ticket .ticket .body-ticket .carte {
  text-align: justify;
  text-align-last: center;
}
.container-ticket .ticket .body-ticket .carte .title-carte {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -2px;
}
.container-ticket .ticket .footer-ticket {
  padding: 0px 17px;
}
.container-ticket .ticket .footer-ticket .title-footer {
  font-size: 16px;
  font-weight: 900;
  text-shadow: 0px 1px 0px rgba(0, 0, 0, .5);
  text-align: center;
  letter-spacing: 2px;
}

This Joomla 3 override allows you to display a realistic supermarket receipt simply using the Joomla's mod_articles_category module. At the bottom of this article, you can download the files of the override.

Joomla 3 frontend rendering

PhP markup

<?php
	/**
		* @package     Joomla.Site
		* @subpackage  mod_articles_category
		* @Author	   web-eau.net
		* @copyright   Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
		* @license     GNU General Public License version 2 or later; see LICENSE.txt
	*/
	
	defined('_JEXEC') or die;
	
$model = JModelLegacy::getInstance('Articles', 'ContentModel', array( 'ignore_request' => true )); 
$params = JFactory::getApplication()->getParams();
$model->setState('params', $params);
$model->setState('filter.category_id', xxxx); // xxxx category ID 
$num_articles = $model->getTotal();
?>
  
  
<div class="container-ticket">
	<div class="ticket">
		<div class="head-ticket">
			<p class="x-bold">E.Leclerc</p>
			<p class="bold">29800 LANDERNEAU</p>
			<p class="bold">Tél: 02 98 21 47 11</p>
			<br>
			<p class="bold">VOUS REMERCIE DE VOTRE CONFIANCE</p>
			<p>Caisse 015-2019 15 avril 2019 18:24</p>
			<p>Ticket 15/04/170 0QRM 02050</p>
			<div class="code-barre">
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</div>
		</div>
		<div class="body-ticket">
			<div class="produits">				
				<?php foreach ($list as $item) : ?>
				<div class="col2">
					<?php if ($params->get('link_titles') == 1) : ?>
					<p><a class="mod-articles-category-title <?php echo $item->active; ?>" href="<?php echo $item->link; ?>"><?php echo JHTML::_('string.truncate', $item->title, 30, false, false) ; ?></a></p>
					<?php else : ?>
					<p><?php echo JHTML::_('string.truncate', $item->title, 30, false, false) ; ?></p>
					<?php endif; ?>			
					<?php if ($item->displayDate) : ?>
					<p class="prix">
						<?php echo $item->displayDate; ?> <!-- use the format 'd.m' in module parameters -->
					</p>
					<?php endif; ?>
				</div>						
				<?php endforeach; ?>
				
				<div class="hr-sm"></div>
				<div class="col2 pt-2">
					<p>Total <?php echo $num_articles; ?> articles</p>
					<p class="prix">1.63</p>
				</div>
				<p>Soit en franc : 10.69</p>
				<p>(1 euro = 6,55957 francs)</p>
				<br>
				<div class="col2">
					<p>Bon achat carte</p>
					<p class="prix">1.63</p>
				</div>
				<div class="col2">
					<p>Rendu</p>
					<p class="prix">0.00</p>
				</div>
			</div>
			<div class="hr-lg"></div>
			<div class="carte">
				<p class="title-carte">Avec la carte E.Leclerc</p>
				<br>
				<div class="col2">
					<p>CUMUL DISPONIBLE AU 15/04/19 :</p>
					<p class="prix">42.65€</p>
				</div>
				<br>
				<p>Ce CUMUL DISPONIBLE est à valoir sur vos prochains achats dans tous les magasins E.LECLERC participant à l'opération et sur présentation de votre carte E.LECLERC.</p>
				<br>
				<p>Modalités, durée de validité à l'accueil</p>
			</div>
			<div class="hr-lg"></div>
		</div>
		<div class="footer-ticket">
			<p class="title-footer">Merci de votre<br>visite et à bientôt</p>
		</div>
	</div>
</div>

CSS

.serif{
	font-family: serif;
}
.sans-serif{
	font-family: 'sans-serif';
}
.bold{
	font-weight: 700;
}
.x-bold{
	font-weight: 900;
	text-shadow: 0px 0px 1px #000;
}
.hr{
	border-bottom: 1.5px dashed #333;
	margin: 10px 0;
}
.hr-sm{
	/*@extend .hr;*/
	width: 30%;
	float: right;
}
.hr-lg{
	@extend .hr;
	width: 100%;
}
.col2{
	display: flex;
	width: 100%;
	justify-content: space-between;
}
.container-ticket {
  background: #e6e6e6;
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 50px 0;
  box-sizing: border-box;
  font-size: 12px;
  font-family: 'courier';
}
.container-ticket .ticket {
  cursor: default;
  position: relative;
  width: 350px;
  padding: 10px 20px;
  background: #fff url(https://static.licdn.com/scds/common/u/images/apps/payments/textures/texture_paper_304x128_v1.png);
  box-shadow: 0px 5px 10px rgba(0, 0, 0, .1);
}
.container-ticket .ticket .head-ticket {
  text-align: center;
  padding: 0px 17px;
}
.container-ticket .ticket .head-ticket p {
  font-size: 14px;
}
.container-ticket .ticket .head-ticket p:nth-child(1) {
  font-size: 18px;
}
.container-ticket .ticket .head-ticket p:nth-child(6), .container-ticket .ticket .head-ticket p:nth-child(7) {
  font-size: 12px;
  text-align: left;
}
.container-ticket .ticket .head-ticket .code-barre {
  height: 50px;
  display: flex;
  justify-content: space-between;
  margin-left: -17px;
  margin-right: -17px;
  margin-top: 5px;
}
.container-ticket .ticket .head-ticket .code-barre span {
  height: 100%;
  width: 10px;
  display: inline-block;
  background: #333;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(1) {
  width: 3px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(2) {
  width: 5px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(3) {
  width: 3px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(4) {
  width: 6px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(5) {
  width: 1px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(6) {
  width: 5px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(7) {
  width: 6px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(8) {
  width: 2px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(9) {
  width: 7px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(10) {
  width: 3px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(11) {
  width: 5px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(12) {
  width: 4px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(13) {
  width: 3px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(14) {
  width: 4px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(15) {
  width: 6px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(16) {
  width: 7px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(17) {
  width: 1px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(18) {
  width: 2px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(19) {
  width: 6px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(20) {
  width: 2px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(21) {
  width: 1px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(22) {
  width: 7px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(23) {
  width: 7px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(24) {
  width: 6px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(25) {
  width: 7px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(26) {
  width: 7px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(27) {
  width: 7px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(28) {
  width: 2px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(29) {
  width: 7px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(30) {
  width: 3px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(31) {
  width: 7px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(32) {
  width: 5px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(33) {
  width: 5px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(34) {
  width: 4px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(35) {
  width: 4px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(36) {
  width: 2px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(37) {
  width: 5px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(38) {
  width: 2px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(39) {
  width: 2px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(40) {
  width: 4px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(41) {
  width: 5px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(42) {
  width: 1px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(43) {
  width: 2px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(44) {
  width: 1px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(45) {
  width: 3px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(46) {
  width: 6px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(47) {
  width: 4px;
  margin-right: 2px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(48) {
  width: 5px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(49) {
  width: 7px;
  margin-right: 1px;
}
.container-ticket .ticket .head-ticket .code-barre span:nth-child(50) {
  width: 4px;
  margin-right: 1px;
}
.container-ticket .ticket .body-ticket {
  padding: 0px 17px;
}
.container-ticket .ticket .body-ticket .produits {
  margin: 30px 0;
}
.container-ticket .ticket .body-ticket .carte {
  text-align: justify;
  text-align-last: center;
}
.container-ticket .ticket .body-ticket .carte .title-carte {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -2px;
}
.container-ticket .ticket .footer-ticket {
  padding: 0px 17px;
}
.container-ticket .ticket .footer-ticket .title-footer {
  font-size: 16px;
  font-weight: 900;
  text-shadow: 0px 1px 0px rgba(0, 0, 0, .5);
  text-align: center;
  letter-spacing: 2px;
}

web-eau.net

France - 29800 Landerneau

+33 674 502 799

daniel@web-eau.net