templates/base.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  6.         {% if app.request.host == 'catalogue.lelorrain.fr' %}
  7.             <title>Produits - LeLorrain</title>
  8.         {% else %}
  9.             <title>LE LORRAIN SELECT</title>
  10.         {% endif %}
  12.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  15.         <link rel="icon" href="https://lelorrain.zootic.fr/wp-content/uploads/2024/01/cropped-Profile-32x32.png" sizes="32x32">
  16.         <link rel="icon" href="https://lelorrain.zootic.fr/wp-content/uploads/2024/01/cropped-Profile-192x192.png" sizes="192x192">
  17.         <link rel="apple-touch-icon" href="https://lelorrain.zootic.fr/wp-content/uploads/2024/01/cropped-Profile-180x180.png">
  18.         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
  20.         <link rel="preconnect" href="https://fonts.googleapis.com">
  21.         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  22.         <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
  23.         <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
  25.         <link rel="preconnect" href="https://fonts.googleapis.com">
  26.         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  27.         <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
  28.         <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
  30.         <style>
  31.             body {
  32.                 background-color:#0d3b79 !important;
  33.                 font-family: "Montserrat", sans-serif;
  34.                 font-size: 15px;
  35.                 background-image: url("{{ asset('assets/images/general-background.jpg') }}");
  36.                 background-repeat: no-repeat;
  37.                 background-position: top center;
  38.                 background-size: 100%;
  39.             }
  41.             .headerTop {
  42.                 color:#FFF;
  43.                 width:100%;
  44.                 height:34px;
  45.                 background-color:#161d3f;
  46.                 font-family: "Montserrat", sans-serif;
  47.             }
  48.             .headerTopContent {
  49.                 width:100%;
  50.                 margin-left:auto;
  51.                 margin-right:auto;
  52.                 padding-left:100px;
  53.                 padding-right:100px;
  54.             }
  55.             .headerTopContent DIV {
  56.                 padding-top:5px;
  57.                 float:left;
  58.             }
  59.             .headerTopContent IMG {
  60.                 margin-top:-3px;
  61.             }
  62.             .headerBottom {
  63.                 color:#FFF;
  64.                 width:100%;
  65.                 height:98px;
  66.                 font-size: 15px !important;
  67.                 background-color: rgba(0, 60, 140, 0.6); /* Fond transparent */
  68.             }
  69.             .headerBottomContent {
  70.                 padding-top:10px;
  71.                 width:100%;
  72.                 margin-left:auto;
  73.                 margin-right:auto;
  74.                 padding-left:100px;
  75.                 padding-right:100px;
  76.                 font-family: "Lato", sans-serif;
  77.                 text-transform: uppercase;
  78.             }
  80.             a {
  81.                 text-decoration: none !important;
  82.             }
  84.             #footer-copyright {
  85.                 color: #003c8c !important;
  86.             }
  87.             main {
  88.                 min-height: 80vh !important;
  89.             }
  90.             footer {
  91.                 background: #ecf0f1;
  92.                 padding-bottom: 2em;
  93.                 padding-top: 2em;
  94.                 display:block;
  95.             }
  97.             .contentPage {
  98.                 margin-top:75px;
  99.                 background-color:transparent;
  100.                 color: #0d3b79;
  101.                 width:98%;
  102.                 margin-left:auto;
  103.                 margin-right:auto;
  104.             }
  106.             .nav-item a {
  107.                 color:#78c8e6 !important;
  108.             }
  110.             .texteBleu A {
  111.                 color:#78c8e6 !important;
  112.             }
  113.             .texteBlanc A {
  114.                 color:#FFFFFF !important;
  115.             }
  117.             .souligne-title::after {
  118.                 content: "";
  119.                 position: relative;
  120.                 bottom: 0px;
  121.                 left: 0px;
  122.                 width: 80px; /* Longueur de la barre bleue */
  123.                 height: 6px; /* Épaisseur de la barre bleue */
  124.                 background-color: #006ec8; /* Couleur de la barre bleue */
  125.                 display: block;
  126.             }
  128.             .souligne::after {
  129.                 content: "";
  130.                 position: relative;
  131.                 top: 32px;
  132.                 width: 70px; /* Longueur de la barre bleue */
  133.                 height: 4px; /* Épaisseur de la barre bleue */
  134.                 background-color: #006ec8; /* Couleur de la barre bleue */
  135.                 display: block;
  136.             }
  137.             .souligne, .souligne-tile {
  138.                 margin-bottom:10px;
  139.             }
  143.             label {
  144.                 color:#0d3b79;
  145.             }
  147.             .carousel-item {
  148.                 padding:15px;
  149.             }
  151.             .carousel-control-prev-icon, .carousel-control-next-icon {
  152.                 visibility: hidden;
  153.             }
  155.             .carousel-control-prev {
  156.                 top:35% !important;
  157.                 width:30px;
  158.                 height:30px;
  159.                 background-image: url("{{ asset('assets/images/carousel-prev.png') }}") !important;
  160.                 background-repeat: no-repeat !important;
  161.             }
  163.             .carousel-control-next {
  164.                 top:35% !important;
  165.                 width:30px;
  166.                 height:30px;
  167.                 background-image: url("{{ asset('assets/images/carousel-next.png') }}") !important;
  168.                 background-repeat: no-repeat !important;
  169.                 margin-right:-25px;
  170.             }
  172.             .body-container {
  173.                 flex: 1;
  174.                 min-height: 600px;
  175.             }
  177.             .container-min {
  178.                 margin-left: auto;
  179.                 margin-right: auto;
  180.                 padding-left: 15px;
  181.                 padding-right: 15px;
  182.             }
  184.             .contact-container {
  185.                 color:#FFF;
  186.                 background-color:#153065;
  187.                 padding-top:15px;
  188.             }
  189.             .contact-container label {
  190.                 color:#003c8c !important;
  191.             }
  192.             .info-sav {
  193.                 font-family: "Montserrat", sans-serif;
  194.                 font-size:22pt;
  195.                 color:#FFF;
  196.             }
  197.             .blocForm {
  198.                 padding:35px;
  199.                 width:100%;
  200.                 max-width:1024px;
  201.                 margin-left:auto;
  202.                 margin-right:auto;
  203.                 background-color:#193b73;
  204.             }
  205.             .blocForm input, .blocForm textarea {
  206.                 /* background-color:#496492 !important; */
  207.                 background-color:#FFF !important;
  208.                 border-radius: 30px !important;
  209.                 border:0px !important;
  210.                 /* color:#FFF !important; */
  211.                 color:#496492 !important;
  212.             }
  213.             .blocContact {
  214.                 padding:10px;
  215.                 background-color:#FFF;
  216.                 color:#0c2352;
  217.             }
  218.             .blocContact input {
  219.                 background-color:#FFF; !important;
  220.                 border-radius: 0px !important;
  221.                 border:solid 1px #e5e5e5 !important;
  222.             }
  223.             .blocContact label {
  224.                 font-weight: normal;
  225.             }
  227.             .blocFormHeader {
  228.                 text-align:left !important;
  229.                 padding-left:40px;
  230.                 padding-right:40px;
  231.             }
  232.             .logo-reseaux {
  233.                 margin-left:15px;
  234.             }
  235.             .btnContact, .btnFormBlue {
  236.                 margin-top:10px;
  237.                 background-color:#006ec8 !important;
  238.                 border-radius: 30px !important;
  239.                 border:0px !important;
  240.                 margin:5px;
  241.             }
  243.             .navbar-default {
  244.                 margin-top: 55px;
  245.                 background-color: transparent;
  246.                 border-color: transparent;
  247.             }
  249.             .page {
  250.                 margin-top:175px;
  251.                 background-color: rgba(239, 239, 239, 0.5);
  252.                 padding:15px;
  253.                 width:80%;
  254.             }
  256.             .center {
  257.                 text-align:center;
  258.                 margin-left:auto;
  259.                 margin-right:auto;
  260.             }
  262.             /* Style the tab */
  263.             .tab {
  264.                 overflow: hidden;
  265.                 border: 0px;
  266.             }
  268.             /* Style the buttons that are used to open the tab content */
  269.             .tab button {
  270.                 background-color: #FFF;
  271.                 color:#666666;
  272.                 float: left;
  273.                 border: none;
  274.                 outline: none;
  275.                 cursor: pointer;
  276.                 padding: 14px 16px;
  277.                 transition: 0.3s;
  278.             }
  280.             /* Change background color of buttons on hover */
  281.             .tab button:hover {
  282.                 background-color: #ddd;
  283.                 border-radius: 255px;
  284.             }
  286.             /* Create an active/current tablink class */
  287.             .tab button.active {
  288.                 background-color: #003c8c;
  289.                 color:#FFF;
  290.                 border-radius: 25px;
  291.             }
  293.             /* Style the tab content */
  294.             .tabcontent {
  295.                 display: none;
  296.                 padding: 6px 12px;
  297.                 border: 0px;
  298.                 border-top: none;
  299.                 animation: fadeEffect 1s; /* Fading effect takes 1 second */
  300.             }
  302.             /* Go from zero to full opacity */
  303.             @keyframes fadeEffect {
  304.                 from {opacity: 0;}
  305.                 to {opacity: 1;}
  306.             }
  308.             /*
  310.             #sticky-buttons-container {
  311.                 position: sticky;
  312.                 right: 0;
  313.                 width: fit-content;
  314.                 left: 100%;
  315.                 display: flex;
  316.                 flex-direction: column;
  317.                 gap: 6px;
  318.                 background-color: rgba(120, 200, 230, .3);
  319.                 padding-right: 20px;
  320.                 z-index: 10;
  321.             }
  322.             */
  323.             #sticky-buttons-container {
  324.                 position: fixed !important;
  325.                 top: calc(-482px + 100vh) !important;
  326.                 right: 0 !important;
  327.                 left: initial !important;
  328.             }
  331.             .padding-header {
  332.                 background-color: #FFF;
  333.             }
  335.         </style>
  337.         <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
  338.         <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.fr.min.js"></script>
  340.         <!-- Feuilles de styles -->
  341.         <link rel="stylesheet" href="{{ asset('assets/css/bootstrap.min.css') }}">
  342.         {% block stylesheets %}{% endblock %}
  343.         <link rel="stylesheet" href="{{ asset('assets/css/styles.css') }}">
  345.         <!-- Include Select2 CSS -->
  346.         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" />
  348.         <!-- Fichiers JS -->
  349.         <!-- Include jQuery -->
  350.         <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
  352.         <!-- Include Select2 JavaScript -->
  353.         <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
  355.         <script src="{{ asset('assets/js/bootstrap.bundle.min.js') }}" defer></script>
  356.         {% block javascripts %}{% endblock %}
  357.         <script src="{{ asset('assets/js/scripts.js') }}" defer></script>
  360.         <link rel="stylesheet" href="https://lelorrain.zootic.fr/wp-content/themes/lelorrain/assets/styles/themeStyle.css?ver=6.4.3" />
  361.         <style>
  362.             .padding-header {
  363.                 margin-top: 50px !important;
  364.                 padding-top: 5px !important;
  365.             }
  366.             .padding-content {
  367.                 padding-top: 150px !important;
  368.             }
  369.             h1:after, h2:after, h3:after {
  370.                 height:0px;
  371.             }
  372.             header .first-stage {
  373.                 padding: 2px 80px;
  374.                 background-color: #161d3f;
  375.                 display: flex;
  376.                 align-items: center;
  377.                 height:28px;
  378.             }
  379.             header p, header li {
  380.                 line-height: 1.8;
  381.                 font-weight: 500;
  382.             }
  383.             header .first-stage .color-white {
  384.                 margin-top: 15px;
  385.             }
  386.             header .menu-translate-container {
  387.                 margin-top: 15px;
  388.             }
  390.             .responsiveImage {
  391.                 display: none;
  392.             }
  393.             .notResponsiveImage {
  394.                 display: block;
  395.             }
  397.             @media screen and (max-width: 905px) {
  398.                 header .first-stage {
  399.                     display: none !important;
  400.                 }
  401.                 .responsiveImage {
  402.                     display: block !important;
  403.                 }
  404.                 .notResponsiveImage {
  405.                     display: none !important;
  406.                 }
  407.                 .container {
  408.                     padding-right: 5px !important;
  409.                     padding-left: 5px !important;
  410.                 }
  411.                 .contact-container {
  412.                     display: none !important;
  413.                 }
  414.             }
  416.             .sf-toolbar {
  417.                 display: none !important;
  418.             }
  420.             /*
  421.             #sticky-buttons-container {
  422.                 position: sticky;
  423.                 right: 0;
  424.                 width: fit-content;
  425.                 left: 100%;
  426.                 display: flex;
  427.                 flex-direction: column;
  428.                 gap: 6px;
  429.                 background-color: rgba(120, 200, 230, .3);
  430.                 padding-right: 20px;
  431.                 z-index: 50;
  432.             }*/
  433.         </style>
  434.     </head>
  435.     <body>
  437.     {% block header %}
  438.         <header id="masthead" class="site-header no-print" role="banner">
  439.             <div class="first-stage d-flex justify-space-between">
  440.                 <div class="d-flex g-4">
  441.                     <div class="d-flex g-1">
  442.                         <img src="https://lelorrain.zootic.fr/wp-content/themes/lelorrain/assets/icones/pinSecondaire.svg" alt="">
  443.                         <p class="color-white">23 All. des Grands Pâquis | 54180 Heillecourt | France</p>
  444.                     </div>
  445.                     <div class="d-flex g-1">
  446.                         <img src="https://lelorrain.zootic.fr/wp-content/themes/lelorrain/assets/icones/mobile.svg" alt="">
  447.                         <p class="color-white">+33 (0) 3 83 35 47 98</p>
  448.                     </div>
  449.                 </div>
  451.                 <div>
  452.                     <div class="menu-translate-container"><ul id="menu-translate" class="translate-menu"><li id="menu-item-91" class="pll-parent-menu-item menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-91"><a href="#pll_switcher">Français</a>
  453.                                 <ul class="sub-menu">
  454.                                     <li id="menu-item-91-en" class="lang-item lang-item-5 lang-item-en lang-item-first menu-item menu-item-type-custom menu-item-object-custom menu-item-91-en"><a href="https://lelorrain.zootic.fr/en/products/" hreflang="en-GB" lang="en-GB">English</a></li>
  455.                                 </ul>
  456.                             </li>
  457.                         </ul></div>        </div>
  458.             </div>
  459.             <div class="second-stage filled">
  460.                 <div class="left-section">
  461.                     <div id="navigation-global">
  462.                         <div class="logo-container">
  463.                             <a href="https://lelorrain.zootic.fr/" rel="home">
  464.                                 <img src="https://lelorrain.zootic.fr/wp-content/themes/lelorrain/assets/images/logoBleu.png" id="lelorrainLogo" alt="logo">
  465.                             </a>
  466.                         </div>
  468.                         <div id="CloseMenu">
  469.                             <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
  470.                                 <path d="M6 6L42 42" stroke="white" stroke-width="3" stroke-linecap="round"></path>
  471.                                 <path d="M6 42L42 6" stroke="white" stroke-width="3" stroke-linecap="round"></path>
  472.                             </svg>
  473.                         </div>
  475.                         <nav id="site-navigation" class="main-navigation" role="navigation">
  476.                             <div class="menu-navbar-container">
  477.                                 <div class="menu-navbar-fr-container"><ul id="primary-menu" class="menu"><li id="menu-item-80" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-80"><a href="https://lelorrain.zootic.fr/">Accueil</a></li>
  478.                                         <li id="menu-item-148" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-148"><a href="https://lelorrain.zootic.fr/la-societe/">La société</a></li>
  479.                                         <li id="menu-item-153" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-149 current_page_item menu-item-has-children menu-item-153">
  480.                                             <a href="https://lelorrain.zootic.fr/produits/" aria-current="page">Produits</a>
  481.                                             <ul class="sub-menu">
  482.                                                 <li id="menu-item-224" class="menu-item menu-item-type-taxonomy menu-item-object-type-produit menu-item-has-children menu-item-224"><a href="https://lelorrain.zootic.fr/type-produit/chalumeaux-fr/">Chalumeaux</a>
  483.                                                     <ul class="sub-menu">
  484.                                                         <li id="menu-item-980" class="menu-item menu-item-type-post_type menu-item-object-produit menu-item-980"><a href="https://lelorrain.zootic.fr/produit/chalumeaux-soudeurs-chauffeurs/">Chalumeaux SOUDEURS / CHAUFFEURS</a></li>
  485.                                                         <li id="menu-item-978" class="menu-item menu-item-type-post_type menu-item-object-produit menu-item-978"><a href="https://lelorrain.zootic.fr/produit/chalumeaux-chauffeurs/">Chalumeaux CHAUFFEURS</a></li>
  486.                                                         <li id="menu-item-977" class="menu-item menu-item-type-post_type menu-item-object-produit menu-item-977"><a href="https://lelorrain.zootic.fr/produit/chalumeaux-soudeurs-coupeurs-basse-pression/">Chalumeaux  SOUDEURS  / COUPEURS BASSE PRESSION</a></li>
  487.                                                         <li id="menu-item-979" class="menu-item menu-item-type-post_type menu-item-object-produit menu-item-979"><a href="https://lelorrain.zootic.fr/produit/chalumeaux-coupeurs/">Chalumeaux COUPEURS</a></li>
  488.                                                     </ul>
  489.                                                 </li>
  490.                                                 <li id="menu-item-618" class="menu-item menu-item-type-taxonomy menu-item-object-type-produit menu-item-has-children menu-item-618"><a href="https://lelorrain.zootic.fr/type-produit/detendeurs-fr/">Détendeurs</a>
  491.                                                     <ul class="sub-menu">
  492.                                                         <li id="menu-item-986" class="menu-item menu-item-type-post_type menu-item-object-produit menu-item-986"><a href="https://lelorrain.zootic.fr/produit/detendeurs-pre-regles/">Détendeurs Pré-Réglés</a></li>
  493.                                                         <li id="menu-item-988" class="menu-item menu-item-type-post_type menu-item-object-produit menu-item-988"><a href="https://lelorrain.zootic.fr/produit/detendeurs-standards/">Détendeurs Standards</a></li>
  494.                                                         <li id="menu-item-983" class="menu-item menu-item-type-post_type menu-item-object-produit menu-item-983"><a href="https://lelorrain.zootic.fr/produit/detendeurs-blindes/">Détendeurs Blindés</a></li>
  495.                                                         <li id="menu-item-987" class="menu-item menu-item-type-post_type menu-item-object-produit menu-item-987"><a href="https://lelorrain.zootic.fr/produit/detendeurs-speciaux/">Détendeurs Spéciaux</a></li>
  496.                                                         <li id="menu-item-985" class="menu-item menu-item-type-post_type menu-item-object-produit menu-item-985"><a href="https://lelorrain.zootic.fr/produit/detendeurs-economiseurs/">Détendeurs économiseurs</a></li>
  497.                                                         <li id="menu-item-981" class="menu-item menu-item-type-post_type menu-item-object-produit menu-item-981"><a href="https://lelorrain.zootic.fr/produit/detendeurs-a-colonne/">Détendeurs à Colonne</a></li>
  498.                                                         <li id="menu-item-984" class="menu-item menu-item-type-post_type menu-item-object-produit menu-item-984"><a href="https://lelorrain.zootic.fr/produit/detendeurs-double-etage/">Détendeurs Double étage</a></li>
  499.                                                         <li id="menu-item-982" class="menu-item menu-item-type-post_type menu-item-object-produit menu-item-982"><a href="https://lelorrain.zootic.fr/produit/detendeurs-avec-rechauffeurs-integres/">Détendeurs à Réchauffeurs Intégrés</a></li>
  500.                                                         <li id="menu-item-989" class="menu-item menu-item-type-post_type menu-item-object-produit menu-item-989"><a href="https://lelorrain.zootic.fr/produit/froid-et-climatisation/">Froid et climatisation</a></li>
  501.                                                         <li id="menu-item-991" class="menu-item menu-item-type-post_type menu-item-object-produit menu-item-991"><a href="https://lelorrain.zootic.fr/produit/seconde-detente/">Seconde détente</a></li>
  502.                                                         <li id="menu-item-993" class="menu-item menu-item-type-post_type menu-item-object-produit menu-item-993"><a href="https://lelorrain.zootic.fr/produit/centrales-de-detente/">Centrale de détente</a></li>
  503.                                                         <li id="menu-item-992" class="menu-item menu-item-type-post_type menu-item-object-produit menu-item-992"><a href="https://lelorrain.zootic.fr/produit/accessoires-de-centrale/">Accessoires de centrales</a></li>
  504.                                                         <li id="menu-item-990" class="menu-item menu-item-type-post_type menu-item-object-produit menu-item-990"><a href="https://lelorrain.zootic.fr/produit/modeles-dinstallation-de-premiere-detente/">Modèles d’installation de première détente</a></li>
  505.                                                     </ul>
  506.                                                 </li>
  507.                                                 <li id="menu-item-757" class="menu-item menu-item-type-taxonomy menu-item-object-type-produit menu-item-has-children menu-item-757"><a href="https://lelorrain.zootic.fr/type-produit/equipements-fr/">Équipements</a>
  508.                                                     <ul class="sub-menu">
  509.                                                         <li id="menu-item-995" class="menu-item menu-item-type-post_type menu-item-object-produit menu-item-995"><a href="https://lelorrain.zootic.fr/produit/coffres-de-chantier-2/">Equipements pour postes autonomes portables</a></li>
  510.                                                         <li id="menu-item-996" class="menu-item menu-item-type-post_type menu-item-object-produit menu-item-996"><a href="https://lelorrain.zootic.fr/produit/postes-autonomes-portables/">Postes autonomes portables</a></li>
  511.                                                         <li id="menu-item-994" class="menu-item menu-item-type-post_type menu-item-object-produit menu-item-994"><a href="https://lelorrain.zootic.fr/produit/coffres-de-chantier/">Coffres de chantier</a></li>
  512.                                                     </ul>
  513.                                                 </li>
  514.                                                 <li id="menu-item-758" class="menu-item menu-item-type-taxonomy menu-item-object-type-produit menu-item-has-children menu-item-758"><a href="https://lelorrain.zootic.fr/type-produit/raccords-et-clapets/">Raccords et clapets</a>
  515.                                                     <ul class="sub-menu">
  516.                                                         <li id="menu-item-999" class="menu-item menu-item-type-post_type menu-item-object-produit menu-item-999"><a href="https://lelorrain.zootic.fr/produit/sorties-bouteilles-a-detente-integree/">Sortie bouteilles à détente intégrée</a></li>
  517.                                                         <li id="menu-item-998" class="menu-item menu-item-type-post_type menu-item-object-produit menu-item-998"><a href="https://lelorrain.zootic.fr/produit/raccords-rapides-isocouple/">Raccords rapides ISOCOUPLE</a></li>
  518.                                                         <li id="menu-item-997" class="menu-item menu-item-type-post_type menu-item-object-produit menu-item-997"><a href="https://lelorrain.zootic.fr/produit/capets-anti-retour-pare-flamme/">Clapets anti-retour pare-flamme</a></li>
  519.                                                     </ul>
  520.                                                 </li>
  521.                                                 <li id="menu-item-756" class="menu-item menu-item-type-taxonomy menu-item-object-type-produit menu-item-has-children menu-item-756"><a href="https://lelorrain.zootic.fr/type-produit/accessoires/">Accessoires</a>
  522.                                                     <ul class="sub-menu">
  523.                                                         <li id="menu-item-1002" class="menu-item menu-item-type-post_type menu-item-object-produit menu-item-1002"><a href="https://lelorrain.zootic.fr/produit/accessoires-detendeurs/">Accessoires détendeurs</a></li>
  524.                                                         <li id="menu-item-1001" class="menu-item menu-item-type-post_type menu-item-object-produit menu-item-1001"><a href="https://lelorrain.zootic.fr/produit/accessoires-divers/">Accessoires divers</a></li>
  525.                                                         <li id="menu-item-1000" class="menu-item menu-item-type-post_type menu-item-object-produit menu-item-1000"><a href="https://lelorrain.zootic.fr/produit/accessoires-chalumeau/">Accessoires chalumeau</a></li>
  526.                                                         <li id="menu-item-1003" class="menu-item menu-item-type-post_type menu-item-object-produit menu-item-1003"><a href="https://lelorrain.zootic.fr/produit/tuyaux/">Tuyaux</a></li>
  527.                                                     </ul>
  528.                                                 </li>
  529.                                                 <li id="menu-item-853" class="menu-item menu-item-type-taxonomy menu-item-object-type-produit menu-item-has-children menu-item-853"><a href="https://lelorrain.zootic.fr/type-produit/conseils-et-garanties-en-fr/">Conseils et Garanties</a>
  530.                                                     <ul class="sub-menu">
  531.                                                         <li id="menu-item-1049" class="menu-item menu-item-type-post_type menu-item-object-produit menu-item-1049"><a href="https://lelorrain.zootic.fr/produit/conseils-dutilisation-2/">Conseils d’utilisation</a></li>
  532.                                                         <li id="menu-item-1050" class="menu-item menu-item-type-post_type menu-item-object-produit menu-item-1050"><a href="https://lelorrain.zootic.fr/produit/conseils-dutilisation-3/">Conditions de garantie</a></li>
  533.                                                     </ul>
  534.                                                 </li>
  535.                                             </ul>
  536.                                         </li>
  537.                                         <li id="menu-item-173" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-173"><a href="https://lelorrain.zootic.fr/services/">Services</a>
  538.                                             <ul class="sub-menu">
  539.                                                 <li id="menu-item-703" class="menu-item menu-item-type-post_type menu-item-object-service menu-item-703"><a href="https://lelorrain.zootic.fr/service/bureau-detudes-le-lorrain/">Bureau d’études</a></li>
  540.                                                 <li id="menu-item-698" class="menu-item menu-item-type-post_type menu-item-object-service menu-item-698"><a href="https://lelorrain.zootic.fr/service/visites-preventives/">Visites préventives</a></li>
  541.                                                 <li id="menu-item-702" class="menu-item menu-item-type-post_type menu-item-object-service menu-item-702"><a href="https://lelorrain.zootic.fr/service/assistance-technique-le-lorrain/">Assistance technique&nbsp;</a></li>
  542.                                                 <li id="menu-item-701" class="menu-item menu-item-type-post_type menu-item-object-service menu-item-701"><a href="https://lelorrain.zootic.fr/service/assistance-technique-specifique-aux-reseaux-gaz-le-lorrain/">Assistance Technique Spécifique aux Réseaux Gaz</a></li>
  543.                                                 <li id="menu-item-700" class="menu-item menu-item-type-post_type menu-item-object-service menu-item-700"><a href="https://lelorrain.zootic.fr/service/banc-detalonnage-le-lorrain/">Banc d’étalonnage LE LORRAIN</a></li>
  544.                                                 <li id="menu-item-699" class="menu-item menu-item-type-post_type menu-item-object-service menu-item-699"><a href="https://lelorrain.zootic.fr/service/service-apres-vente-le-lorrain/">Service Après-vente</a></li>
  545.                                                 <li id="menu-item-704" class="menu-item menu-item-type-post_type menu-item-object-service menu-item-704"><a href="https://lelorrain.zootic.fr/service/formations/">Formations</a></li>
  546.                                             </ul>
  547.                                         </li>
  548.                                         <li id="menu-item-197" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-197"><a href="https://lelorrain.zootic.fr/actualites/">Actualités</a></li>
  549.                                         <li id="menu-item-203" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-203"><a href="https://lelorrain.zootic.fr/conseils-de-pro/">Conseils de pro</a></li>
  550.                                         <li id="menu-item-84" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-84"><a href="https://lelorrain.zootic.fr/academie-le-lorrain/">Académie</a></li>
  551.                                     </ul></div>                    </div>
  552.                         </nav>
  554.                         <div class="stickyButtons">
  555.                             <div class="webapp dansBurgerMenu menu-item menu-item-type-custom menu-item-object-custom"><a href="/"><img src="https://lelorrain.zootic.fr/wp-content/themes/lelorrain/assets/icones/webapp.svg" alt=""><p>Select</p></a></div>
  556.                             <div class="espace fixeSurMobile menu-item menu-item-type-custom menu-item-object-custom"><a href="/"><img src="https://lelorrain.zootic.fr/wp-content/themes/lelorrain/assets/icones/espacePro.svg" alt=""><p>Espace pro</p></a></div>
  557.                             <div class="rappel menu-item menu-item-type-post_type menu-item-object-page"><a href="https://lelorrain.zootic.fr/contact/"><img src="https://lelorrain.zootic.fr/wp-content/themes/lelorrain/assets/icones/telephone.svg" alt=""><p>Être rappelé</p></a></div>
  558.                             <div class="catalogue dansBurgerMenu menu-item menu-item-type-custom menu-item-object-custom"><a href="/https://lelorrain.zootic.fr/wp-content/uploads/2024/03/CATALOGUE-19-LE-LORRAIN-FRANCAIS-Vreduite.pdf"><img src="https://lelorrain.zootic.fr/wp-content/themes/lelorrain/assets/icones/Catalogue.svg" alt=""><p>catalogue</p></a></div>
  559.                             <div class="rdv dansBurgerMenu menu-item menu-item-type-custom menu-item-object-custom"><a href="https://meetings.hubspot.com/victor-dasilva"><img src="https://lelorrain.zootic.fr/wp-content/themes/lelorrain/assets/icones/Mail.svg" alt=""><p>Prendre rdv</p></a></div>
  560.                         </div>
  561.                     </div>
  562.                 </div>
  563.                 <div class="right-section">
  564.                     <div id="Recherche">
  565.                         <a href="" class="squareButton">
  566.                             <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  567.                                 <path d="M11.3221 14.6441C14.8136 14.6441 17.6441 11.8136 17.6441 8.32206C17.6441 4.83048 14.8136 2 11.3221 2C7.83048 2 5 4.83048 5 8.32206C5 11.8136 7.83048 14.6441 11.3221 14.6441Z" stroke="black" stroke-width="1.33" stroke-linecap="round"></path>
  568.                                 <path d="M15.7319 16.1445L19.1629 22" stroke="black" stroke-width="2" stroke-linecap="round"></path>
  569.                             </svg>
  570.                             <p>Rechercher</p>
  571.                         </a>
  572.                     </div>
  573.                     <div id="Espace">
  574.                         <a href="http://sav.lelorrain.fr/fr/bon/sav/new" class="squareButton">
  575.                             <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  576.                                 <path d="M1.49999 21.5C1.33332 20.3333 1.69999 17.7 4.49999 16.5" stroke="black" stroke-linecap="round"></path>
  577.                                 <path d="M4.99994 7.5V11.5C4.99994 11.5 3.96186 11.8674 3.76182 11.3392C3.23571 9.94997 3.21896 8.95273 4.11815 8.22454C4.76756 7.69863 4.99994 7.5 4.99994 7.5ZM4.99994 7.5C5.16661 5.5 6.69994 1.5 11.4999 1.5C16.2999 1.5 18.2894 5.61393 18.6227 7.61393V7.9281M18.1661 15.8722C18.5273 14.9845 18.6227 13.9592 18.6227 13.1108V11.7048M18.1661 15.8722C19.4776 16.3628 22.5523 17.7071 22.5523 22.0003M18.1661 15.8722C17.5578 17.3673 16.0807 18.8326 13.7577 19.3897M18.1661 15.8722C17.4859 15.6365 16.1879 15.1817 15.9414 15.1719M18.6227 7.9281C18.6227 7.9281 19.2537 8.21481 19.6504 8.5454C20.3309 9.11253 20.1969 10.2261 19.7122 11.2367C19.4642 11.7539 18.6227 11.7048 18.6227 11.7048M18.6227 7.9281V11.7048M13.7577 19.3897C12.7932 19.621 11.8568 19.5715 10.4999 19.5C10.4891 20.0091 10.8759 20.8794 12.011 21.0165C13.146 21.1536 13.5368 20.0998 13.7577 19.3897ZM15.9414 15.1719C16.2656 14.5547 17.0753 13.3893 16.5163 9.71308C15.4365 9.07275 13.2205 7.51335 12.9945 6.39842C11.8852 7.40914 9.09311 9.21965 6.87364 9.27992C6.69159 11.5525 6.64916 15.0449 8.90815 16.65C10.0507 17.4618 11.4672 17.8229 13.3385 17.2741C14.0527 17.0443 15.1953 16.3242 15.9414 15.1719Z" stroke="black" stroke-linecap="round" stroke-linejoin="round"></path>
  578.                             </svg>
  579.                             SAV                    </a>
  580.                     </div>
  581.                     <div id="responsiveBurger">
  582.                         <svg width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  583.                             <rect width="48" height="4" fill="#003C8C"></rect>
  584.                             <rect y="10" width="48" height="4" fill="#003C8C"></rect>
  585.                             <rect y="20" width="48" height="4" fill="#003C8C"></rect>
  586.                         </svg>
  587.                     </div>
  588.                 </div>
  589.             </div>
  590.             <!--<div id="navbar-underline" style="position: fixed; height: 3px; bottom: 0px; width: 68.625px; left: 954.375px;"></div></div>-->
  591.             <!--<div id="breadcrumbs"><span><span><a href="https://lelorrain.zootic.fr/">Accueil</a></span> / <span class="breadcrumb_last" aria-current="page">Produits</span></span></div>-->
  592.         </header>
  596.     {% endblock %}
  598.         {% if app.user and app.user.isVerified == false %}
  599.             <div class="alert alert-warning alert-dismissible" role="alert">
  600.                 <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
  601.                 <div class="alert-message">
  602.                     <strong>Votre compte n'est pas activé</strong>, <a href="{{ path('resend_verif') }}">renvoyer le lien d'activation</a>
  603.                 </div>
  604.             </div>
  605.         {% endif %}
  607.         {% include "_partials/_flash.html.twig" %}
  609.         <div class="contentPage">
  610.         {% block body %}{% endblock %}
  611.         </div>
  613.     <div class="body-container contact-container" style="margin-top:35px;max-width:100%;">
  615.         <div class="container">
  616.         <div style="float:left;width:40%;text-align:center;">
  617.             <div><img src="{{ asset('assets/images/logo-lelorrain-transparent.png') }}"></div>
  618.             <div style="padding:30px;">
  619.                 <div style="padding:10px;"><img src="{{ asset('assets/images/icone-adresse-transparent.png') }}"><span style="margin-left:15px;">23 All. des Grands Pâquis <br> 54180 Heillecourt | France  |  France</span></div>
  620.                 <div style="padding:10px;"><img src="{{ asset('assets/images/icone-telephone-transparent.png') }}"><span style="margin-left:15px;">+33 (0) 3 83 35 47 98</span></div>
  621.             </div>
  622.         </div>
  623.         <div style="float:left;width:60%;color:#003c8c !important;" class="blocContact">
  624.             <div class="container-min">
  626.                 <h2>Contactez-nous</h2>
  628.                 <div id="hubspot-form"></div>
  630.                 <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
  631.                 <script>
  632.                 hbspt.forms.create({
  633.                     portalId: "8673532",
  634.                     formId: "ea89c93a-9d5d-431f-8718-d93f6d198357",
  635.                     target: '#hubspot-form'
  636.                 });
  637.                 </script>
  638.     
  639.             </div>
  640.         </div>
  641.         </div>
  643.     </div>
  645.     {% block footer %}
  647.         {% if not is_granted('ROLE_ADMIN') %}
  648.         <div id="sticky-buttons-container" class="no-print">
  649.             <!--<div class="webapp dansBurgerMenu menu-item menu-item-type-custom menu-item-object-custom"><a href="https://webapp.lelorrain.fr/" target="_blank"><img src="https://lelorrain.zootic.fr/wp-content/themes/lelorrain/assets/icones/webapp.svg" alt=""><p>Select</p></a></div>-->
  650.             <div class="espace fixeSurMobile menu-item menu-item-type-custom menu-item-object-custom"><a href="https://sav.lelorrain.fr/fr/bon/sav/new" target="_blank"><img src="https://lelorrain.zootic.fr/wp-content/themes/lelorrain/assets/icones/espacePro.svg" alt=""><p>SAV</p></a></div>
  651.             <div class="rappel menu-item menu-item-type-post_type menu-item-object-page"><a href="https://lelorrain.fr/contact/"><img src="https://lelorrain.zootic.fr/wp-content/themes/lelorrain/assets/icones/telephone.svg" alt=""><p>Être rappelé</p></a></div>
  652.             <div class="catalogue dansBurgerMenu menu-item menu-item-type-custom menu-item-object-custom"><a href="/https://lelorrain.fr/wp-content/uploads/2024/03/CATALOGUE-19-LE-LORRAIN-FRANCAIS-Vreduite.pdf"><img src="https://lelorrain.zootic.fr/wp-content/themes/lelorrain/assets/icones/Catalogue.svg" alt=""><p>catalogue</p></a></div>
  653.             <div class="rdv dansBurgerMenu menu-item menu-item-type-custom menu-item-object-custom"><a href="https://meetings.hubspot.com/victor-dasilva"><img src="https://lelorrain.zootic.fr/wp-content/themes/lelorrain/assets/icones/Mail.svg" alt=""><p>Prendre rdv</p></a></div>
  654.         </div>
  655.         {% endif %}
  657.         <footer>
  658.             <div class="container">
  659.                 <div class="row">
  660.                     <div id="footer-copyright" class="col-md-6">
  661.                         <p>Copyright ©LE LORRAIN      -      Mentions légales      -      Politique de confidentialité</p>
  662.                         <!--<p>&copy; {{ 'now'|date('Y') }} - https://www.lelorrain.fr/fr/</p>-->
  663.                     </div>
  664.                     <div id="footer-resources" class="col-md-6">
  665.                         <p>
  666.                             <span style="color:#003c8c;font-family:'Montserrat',sans-serif;font-size:18pt;">Suivez LE LORRAIN</span>
  668.                             <a href="https://twitter.com/LeLorrain_Hpx" title="Hampiaux le Lorrain" class="logo-reseaux">
  669.                                 <img src="{{ asset('assets/images/logo-facebook.png') }}">
  670.                             </a>
  672.                             <a href="https://twitter.com/LeLorrain_Hpx" title="Hampiaux le Lorrain" class="logo-reseaux">
  673.                                 <img src="{{ asset('assets/images/logo-linkedin.png') }}">
  674.                             </a>
  676.                             <a href="https://twitter.com/LeLorrain_Hpx" title="Hampiaux le Lorrain" class="logo-reseaux">
  677.                                 <img src="{{ asset('assets/images/logo-youtube.png') }}">
  678.                             </a>
  680.                         </p>
  681.                     </div>
  682.                 </div>
  683.             </div>
  684.         </footer>
  685.     {% endblock %}
  687.         <script>
  688.             var coll = document.getElementsByClassName("collapsible");
  689.             var i;
  691.             for (i = 0; i < coll.length; i++) {
  692.                 coll[i].addEventListener("click", function() {
  693.                     this.classList.toggle("activeCollapsible");
  694.                     var content = this.nextElementSibling;
  695.                     if (content.style.maxHeight){
  696.                         content.style.maxHeight = null;
  697.                     } else {
  698.                         content.style.maxHeight = content.scrollHeight + "px";
  699.                     }
  700.                 });
  701.             }
  703.             function openTab(evt, tabName) {
  704.                 // Declare all variables
  705.                 var i, tabcontent, tablinks;
  707.                 // Get all elements with class="tabcontent" and hide them
  708.                 tabcontent = document.getElementsByClassName("tabcontent");
  709.                 for (i = 0; i < tabcontent.length; i++) {
  710.                     tabcontent[i].style.display = "none";
  711.                 }
  713.                 // Get all elements with class="tablinks" and remove the class "active"
  714.                 tablinks = document.getElementsByClassName("tablinks");
  715.                 for (i = 0; i < tablinks.length; i++) {
  716.                     tablinks[i].className = tablinks[i].className.replace(" active", "");
  717.                 }
  719.                 // Show the current tab, and add an "active" class to the button that opened the tab
  720.                 document.getElementById(tabName).style.display = "block";
  721.                 evt.currentTarget.className += " active";
  722.             }
  724.             // Get the element with id="defaultOpen" and click on it
  725.             document.getElementById("defaultOpen").click();
  726.         </script>
  727.     <script>
  728.         document.addEventListener("DOMContentLoaded", function () {
  729.             const navbarToggle = document.querySelector('#responsiveBurger');
  730.             const navbarCollapse = document.querySelector('#navigation-global');
  732.             navbarToggle.addEventListener('click', function () {
  733.                 navbarCollapse.classList.toggle('opened');
  734.             });
  735.         });
  736.         document.addEventListener("DOMContentLoaded", function () {
  737.             const navbarToggle = document.querySelector('#CloseMenu');
  738.             const navbarCollapse = document.querySelector('#navigation-global');
  740.             navbarToggle.addEventListener('click', function () {
  741.                 navbarCollapse.classList.toggle('opened');
  742.             });
  743.         });
  745.         const toggleBtn = document.getElementById('toggle-sidebar');
  746.             const sidebar = document.getElementById('sidebar');
  747.             const main = document.getElementById('main-content');
  749.             toggleBtn.addEventListener('click', () => {
  750.             sidebar.classList.toggle('d-none'); // masque/affiche le sidebar
  751.             if(sidebar.classList.contains('d-none')) {
  752.             main.classList.remove('col-9');
  753.             main.classList.add('col-12'); // prend toute la largeur
  754.         } else {
  755.             main.classList.remove('col-12');
  756.             main.classList.add('col-9'); // revient à sa taille normale
  757.         }
  758.         });
  759.     </script>
  762.     </body>
  763. </html>