Symfony Profiler

{# Backoffice : masque les éléments du site vitrine (boutons flottants, bloc contact) #}
{% set is_admin_area = app.request.pathinfo starts with '/admin' %}
{# Boutons flottants : masqués sur la page de connexion et dans l'espace client,
où ils recouvrent les formulaires (ils sont en position: fixed à droite). #}
{% set hide_sticky_buttons = is_admin_area
or app.request.attributes.get('_route') == 'app_login'
or app.request.pathinfo starts with '/profil'
or app.request.pathinfo starts with '/inscription' %}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
{% if app.request.host == 'catalogue.lelorrain.fr' %}
<title>Produits - LeLorrain</title>
{% else %}
<title>LE LORRAIN SELECT</title>
{% endif %}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{# iOS Safari transforme tout numéro de téléphone détecté dans le texte en
lien `tel:` qu'il colore lui-même en bleu système. Sur le fond bleu nuit
du bloc contact, le numéro devenait invisible. On désactive la détection
automatique et on pose les liens `tel:` explicitement, avec leur couleur. #}
<meta name="format-detection" content="telephone=no">
<link rel="icon" href="https://lelorrain.fr/wp-content/uploads/2024/01/cropped-Profile-32x32.png" sizes="32x32">
<link rel="icon" href="https://lelorrain.fr/wp-content/uploads/2024/01/cropped-Profile-192x192.png" sizes="192x192">
<link rel="apple-touch-icon" href="https://lelorrain.fr/wp-content/uploads/2024/01/cropped-Profile-180x180.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Montserrat:ital,wght@0,300;0,500;0,600;0,700;1,300;1,500&display=swap" rel="stylesheet">
<style>
body {
background-color:#0d3b79 !important;
font-family: "Montserrat", sans-serif;
font-size: 16px;
background-image: url("{{ asset('assets/images/general-background.jpg') }}");
background-repeat: no-repeat;
background-position: top center;
background-size: 100%;
}
.headerTop {
color:#FFF;
width:100%;
height:34px;
background-color:#161d3f;
font-family: "Montserrat", sans-serif;
}
.headerTopContent {
width:100%;
margin-left:auto;
margin-right:auto;
padding-left:100px;
padding-right:100px;
}
.headerTopContent DIV {
padding-top:5px;
float:left;
}
.headerTopContent IMG {
margin-top:-3px;
}
.headerBottom {
color:#FFF;
width:100%;
height:98px;
font-size: 15px !important;
background-color: rgba(0, 60, 140, 0.6); /* Fond transparent */
}
.headerBottomContent {
padding-top:10px;
width:100%;
margin-left:auto;
margin-right:auto;
padding-left:100px;
padding-right:100px;
font-family: "Lato", sans-serif;
text-transform: uppercase;
}
html {
background-color: #fff;
}
a {
text-decoration: none !important;
}
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
main {
min-height: 0 !important;
margin-top: 0 !important;
}
.contentPage {
flex: 1;
margin-top:75px;
background-color:transparent;
color: #0d3b79;
width:98%;
margin-left:auto;
margin-right:auto;
}
.nav-item a {
color:#78c8e6 !important;
}
.texteBleu A {
color:#78c8e6 !important;
}
.texteBlanc A {
color:#FFFFFF !important;
}
.souligne-title::after {
content: "";
position: relative;
bottom: 0px;
left: 0px;
width: 80px; /* Longueur de la barre bleue */
height: 6px; /* Épaisseur de la barre bleue */
background-color: #006ec8; /* Couleur de la barre bleue */
display: block;
}
.souligne::after {
content: "";
position: relative;
top: 32px;
width: 70px; /* Longueur de la barre bleue */
height: 4px; /* Épaisseur de la barre bleue */
background-color: #006ec8; /* Couleur de la barre bleue */
display: block;
}
.souligne, .souligne-tile {
margin-bottom:10px;
}
label {
color:#0d3b79;
}
.carousel-item {
padding:15px;
}
.carousel-control-prev-icon, .carousel-control-next-icon {
visibility: hidden;
}
.carousel-control-prev {
top:35% !important;
width:30px;
height:30px;
background-image: url("{{ asset('assets/images/carousel-prev.png') }}") !important;
background-repeat: no-repeat !important;
}
.carousel-control-next {
top:35% !important;
width:30px;
height:30px;
background-image: url("{{ asset('assets/images/carousel-next.png') }}") !important;
background-repeat: no-repeat !important;
margin-right:-25px;
}
.body-container {
flex: 1;
min-height: 600px;
}
.contact-container {
flex: 0 0 auto !important;
min-height: 0 !important;
}
.container-min {
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}
.contact-container {
color:#FFF;
background-color:#161d3f;
padding-top:15px;
}
.contact-container label {
color:#003c8c !important;
}
/* `templates/products/details.html.twig` pose un `.container { background-color: #FFF }`
global, qui s'applique aussi au conteneur du bloc contact : le texte,
blanc, devenait invisible sur fond blanc. Le sélecteur descendant a une
spécificité supérieure et l'emporte quel que soit l'ordre de chargement. */
.contact-container > .container {
background-color: transparent;
}
/* Filet de sécurité : sur fond bleu nuit, un lien qui prendrait la
couleur par défaut du navigateur — cas des numéros détectés
automatiquement par iOS — serait illisible. */
.contact-container > .container a {
color: #fff;
}
.contact-container .blocContact a {
color: #003c8c;
}
.info-sav {
font-family: "Montserrat", sans-serif;
font-size:22pt;
color:#FFF;
}
.blocForm {
padding:35px;
width:100%;
max-width:1024px;
margin-left:auto;
margin-right:auto;
background-color:#193b73;
}
.blocForm input, .blocForm textarea {
/* background-color:#496492 !important; */
background-color:#FFF !important;
border-radius: 30px !important;
border:0px !important;
/* color:#FFF !important; */
color:#496492 !important;
}
.blocContact {
padding:10px;
background-color:#FFF;
color:#0c2352;
}
.blocContact input {
background-color:#FFF; !important;
border-radius: 0px !important;
border:solid 1px #e5e5e5 !important;
}
.blocContact label {
font-weight: normal;
}
.blocFormHeader {
text-align:left !important;
padding-left:40px;
padding-right:40px;
}
.btnContact, .btnFormBlue {
margin-top:10px;
background-color:#006ec8 !important;
border-radius: 30px !important;
border:0px !important;
margin:5px;
}
.navbar-default {
margin-top: 55px;
background-color: transparent;
border-color: transparent;
}
.page {
margin-top:175px;
background-color: rgba(239, 239, 239, 0.5);
padding:15px;
width:80%;
}
.center {
text-align:center;
margin-left:auto;
margin-right:auto;
}
/* Style the tab */
.tab {
overflow: hidden;
border: 0px;
}
/* Style the buttons that are used to open the tab content */
.tab button {
background-color: #FFF;
color:#666666;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
border-radius: 255px;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #003c8c;
color:#FFF;
border-radius: 25px;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 0px;
border-top: none;
animation: fadeEffect 1s; /* Fading effect takes 1 second */
}
/* Go from zero to full opacity */
@keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}
#sticky-buttons-container {
position: fixed;
bottom: 80px;
right: 20px;
display: flex;
flex-direction: column;
gap: 6px;
background-color: transparent !important;
background: none !important;
padding: 0 !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
z-index: 10;
}
#sticky-buttons-container > div {
display: flex;
flex-direction: column;
background-color: #003c8c;
align-items: center;
justify-content: center;
height: 96px;
width: 96px;
}
#sticky-buttons-container > div > a {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
#sticky-buttons-container > div > a > img {
height: 40px;
width: 40px;
filter: invert(100%);
}
#sticky-buttons-container > div > a > p {
color: #fff;
text-align: center;
font-size: 0.75rem;
font-weight: 600;
line-height: 1.1;
margin: 0;
}
footer {
background-color: #fff;
padding: 16px 80px 32px;
}
footer .content {
display: flex !important;
justify-content: space-between;
align-items: center;
}
footer .reseaux {
display: flex !important;
align-items: center;
gap: 16px;
}
footer .reseaux p {
white-space: nowrap;
color: #003c8c;
font-weight: 600;
}
footer .reseaux img {
height: 24px;
width: auto;
}
footer .links {
display: flex;
gap: 0;
list-style: none;
padding: 0;
margin: 0;
align-items: center;
}
footer ul li::before,
footer ul li:not(:first-child)::before {
display: none !important;
content: none !important;
background-image: none !important;
}
footer .links li:not(:first-child)::before {
content: " — ";
display: inline !important;
position: static !important;
background-image: none !important;
width: auto !important;
height: auto !important;
color: #003c8c;
}
footer .links a {
font-size: 0.813rem;
color: #003c8c;
}
footer .tag {
text-align: center;
margin-top: 12px;
opacity: 0.8;
font-size: 12px;
}
footer .tag a {
color: #006ec8;
text-decoration: underline !important;
}
.padding-header {
background-color: #FFF;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.fr.min.js"></script>

<link rel="stylesheet" href="{{ asset('assets/css/bootstrap.min.css') }}">
{% block stylesheets %}{% endblock %}
<link rel="stylesheet" href="{{ asset('assets/css/styles.css') }}">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" />


<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="{{ asset('assets/js/bootstrap.bundle.min.js') }}" defer></script>
{% block javascripts %}{% endblock %}
<script src="{{ asset('assets/js/scripts.js') }}" defer></script>
<link rel="stylesheet" href="https://lelorrain.fr/wp-content/themes/lelorrain/assets/styles/themeStyle.css?ver=6.4.3" />
<style>
.padding-header {
margin-top: 50px !important;
padding-top: 5px !important;
}
.padding-content {
padding-top: 150px !important;
}
/* Boutons flottants : le thème les met en `position: sticky`, donc dans
le flux. Comme ils sont déclarés entre le bloc contact et le pied de
page, ils y réservaient 402px — 4 boutons de 96px et 3 gouttières de
6px — d'où la bande bleue du fond de page entre les deux.
La règle `position: fixed` existe plus haut dans ce fichier, mais elle
est écrite avant le chargement du thème : elle perdait. Elle est donc
redéclarée ici, après. */
#sticky-buttons-container {
position: fixed !important;
bottom: 80px;
right: 20px;
left: auto !important;
width: auto !important;
background-color: transparent !important;
padding-right: 0 !important;
}
/* Le formulaire HubSpot arrivait à 10px du bas de sa section bleu nuit. */
.contact-container {
padding-bottom: 40px;
}
h1:after, h2:after, h3:after {
height:0px;
}
/* Force font-size et font-weight (identique à lelorrain.fr) */
body {
font-size: 17px !important;
font-weight: 500 !important;
}
/* Bootstrap reset font-weight:400 - on force 500 (Medium) partout */
header .second-stage .main-navigation a {
font-weight: 500 !important;
font-size: 17px !important;
}
/* Neutralise le * { margin-top:8px; padding:0 24px } du thème sur le header */
header * {
margin-top: 0 !important;
}
/* Supprime le padding * inutile du thème sur les éléments structurants */
header .second-stage .right-section .squareButton {
box-sizing: content-box !important;
}
header .second-stage .right-section .squareButton svg {
width: 52px !important;
height: 52px !important;
padding: 0 !important;
margin-bottom: 8px !important;
}
header .second-stage .right-section .squareButton p {
padding: 0 !important;
margin: 0 !important;
}
header .second-stage .left-section .logo-container {
box-sizing: content-box !important;
}
header .second-stage .left-section .logo-container a,
header .second-stage .left-section .logo-container img {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Containers structurels second-stage : padding=0 pour eviter cumul */
header .second-stage .left-section,
header .second-stage .right-section,
header #navigation-global,
header .stickyButtons {
padding-left: 0 !important;
padding-right: 0 !important;
}
header .menu-translate-container,
header .translate-menu li,
header .translate-menu a {
padding-left: 0 !important;
padding-right: 0 !important;
}
header .first-stage p,
header .first-stage li,
header .first-stage img {
line-height: 1;
font-weight: 500;
margin: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Divs internes first-stage : reset padding pour ne pas cumuler avec padding du parent */
header .first-stage > div,
header .first-stage .d-flex {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Espace gauche/droite first-stage (override media query 2%) */
header .first-stage {
padding-left: 5% !important;
padding-right: 5% !important;
}
.responsiveImage {
display: none;
}
.notResponsiveImage {
display: block;
}
@media screen and (max-width: 905px) {
header .first-stage {
display: none !important;
}
.responsiveImage {
display: block !important;
}
.notResponsiveImage {
display: none !important;
}
.container {
padding-right: 5px !important;
padding-left: 5px !important;
}
}
/* ─── Mobile et tablette ────────────────────────────────────────────
Seuil 1184px : c'est celui du thème, là où le menu bascule en
hamburger et où la mise en page passe en mode mobile. */
@media screen and (max-width: 1184px) {
/* Boutons flottants : en position fixe à droite, ils recouvrent
les formulaires sur un écran étroit — dont celui de l'accès
bêta. Masqués partout en mobile. */
#sticky-buttons-container {
display: none !important;
}
/* Le bloc contact était purement et simplement masqué sous 905px.
Or c'est le seul moyen de joindre LE LORRAIN indiqué par les
messages d'erreur de l'accès bêta : on l'affiche, empilé. */
.contact-container > .container > div {
float: none !important;
width: 100% !important;
}
.contact-container .container-min {
padding-left: 10px;
padding-right: 10px;
}
.contact-container img {
max-width: 100%;
height: auto;
}
.blocContact {
box-sizing: border-box;
}
/* Pied de page : deux blocs côte à côte sans repli, plus 160px de
padding horizontal — la principale cause de scroll horizontal. */
footer {
padding-left: 16px !important;
padding-right: 16px !important;
}
footer > div:first-child {
flex-wrap: wrap;
justify-content: center !important;
gap: 10px;
text-align: center;
}
footer ul {
flex-wrap: wrap;
justify-content: center;
}
/* Le bloc « Suivez LE LORRAIN » et sa rangée d'icônes mesurent à eux
seuls plus de 460px : sans repli interne, ils débordent des deux
côtés puisque le parent les centre. */
footer > div:first-child > div,
footer > div:first-child > div > div {
flex-wrap: wrap;
justify-content: center;
max-width: 100%;
}
footer img {
max-width: 100%;
}
/* Le questionnaire SELECT : 35px de padding de chaque côté sur un
écran de 375px ne laissent presque rien au contenu.
`box-sizing` est indispensable : en content-box, `width: 100%`
plus le padding dépasse la largeur du parent. */
.blocForm {
padding: 16px !important;
box-sizing: border-box;
}
/* ── Espace au-dessus des titres ──
Ne pas toucher à `.contentPage` ni à la marge de
`.padding-header` : l'écart entre le bas de l'en-tête fixe et le
début du bloc blanc laisse voir le bandeau photo de fond. Le
supprimer ferait disparaître le bandeau. Seul le rembourrage
interne, purement blanc, est réductible. */
.spacerTop {
margin-top: 6px !important;
}
/* 42px sur 390px de large font tenir « Bienvenue dans le LORRAIN
SELECT » sur trois lignes et occupent la moitié de l'écran. */
h1 {
font-size: 1.75rem !important;
line-height: 1.25;
}
h2 {
font-size: 1.35rem !important;
line-height: 1.3;
}
/* Garde-fou : aucun débordement latéral ne doit produire de barre
de défilement horizontale. Les causes connues sont traitées
au-dessus ; ceci couvre le contenu tiers (formulaire HubSpot,
images distantes) sur lequel on n'a pas la main. */
html, body {
overflow-x: hidden;
max-width: 100%;
}
}
.sf-toolbar {
display: none !important;
}
/*
#sticky-buttons-container {
position: sticky;
right: 0;
width: fit-content;
left: 100%;
display: flex;
flex-direction: column;
gap: 6px;
background-color: rgba(120, 200, 230, .3);
padding-right: 20px;
z-index: 50;
}*/
</style>
</head>
<body>
{% block header %}
<header id="masthead" class="site-header no-print" role="banner">
<div class="first-stage d-flex justify-space-between">
<div class="d-flex g-4">
<div class="d-flex g-1">
<img src="https://lelorrain.fr/wp-content/themes/lelorrain/assets/icones/pinSecondaire.svg" alt="">
<p class="color-white">23 allée des grands Pâquis – 54180 HEILLECOURT - France</p>
</div>
<div class="d-flex g-1">
<img src="https://lelorrain.fr/wp-content/themes/lelorrain/assets/icones/mobile.svg" alt="">
<p class="color-white"><a href="tel:+33383354798" style="color:inherit;text-decoration:none;">+33(0)383354798</a></p>
</div>
</div>
<div>
<div class="menu-translate-container">
<ul id="menu-translate" class="translate-menu">
<li class="pll-parent-menu-item menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children"><a href="#pll_switcher">Français</a>
<ul class="sub-menu">
<li class="lang-item lang-item-5 lang-item-en lang-item-first menu-item"><a href="https://lelorrain.fr/en/home-page/" lang="en-GB" hreflang="en-GB">English</a></li>
<li class="lang-item lang-item-69 lang-item-es menu-item"><a href="https://lelorrain.fr/es/inicio/" lang="es-ES" hreflang="es-ES">Español</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="second-stage">
<div class="left-section">
<div id="navigation-global">
<div class="logo-container">
<a href="https://lelorrain.fr/" rel="home">
<img src="https://lelorrain.fr/wp-content/themes/lelorrain/assets/images/logoBlanc.png" id="lelorrainLogo" alt="logo">
</a>
</div>
<div id="CloseMenu">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 6L42 42" stroke="white" stroke-width="3" stroke-linecap="round"/>
<path d="M6 42L42 6" stroke="white" stroke-width="3" stroke-linecap="round"/>
</svg>
</div>
<nav id="site-navigation" class="main-navigation" role="navigation">
<div class="menu-navbar-container">
<div class="menu-navbar-fr-container">
<ul id="primary-menu" class="menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home"><a href="https://lelorrain.fr/">Accueil</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://lelorrain.fr/le-lorrain-fabricant-francais-de-chalumeaux-et-detendeurs/">Notre société</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children"><a href="https://lelorrain.fr/produits-le-lorrain-chalumeaux-detendeurs-et-accessoires-de-soudage/">Produits</a>
<ul class="sub-menu">
<li class="menu-item menu-item-type-taxonomy menu-item-object-type-produit menu-item-has-children"><a href="https://lelorrain.fr/type-produit/chalumeaux-fr/">Chalumeaux</a>
<ul class="sub-menu">
<li class="menu-item"><a href="https://lelorrain.fr/produit/chalumeaux-soudeurs-chauffeurs/">Chalumeaux SOUDEURS / CHAUFFEURS</a></li>
<li class="menu-item"><a href="https://lelorrain.fr/produit/chalumeaux-chauffeurs/">Chalumeaux CHAUFFEURS</a></li>
<li class="menu-item"><a href="https://lelorrain.fr/produit/chalumeaux-soudeurs-coupeurs-basse-pression/">Chalumeaux SOUDEURS / COUPEURS BASSE PRESSION</a></li>
<li class="menu-item"><a href="https://lelorrain.fr/produit/chalumeaux-coupeurs-professionnels/">Chalumeaux COUPEURS</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-type-produit menu-item-has-children"><a href="https://lelorrain.fr/type-produit/detendeurs-fr/">Détendeurs</a>
<ul class="sub-menu">
<li class="menu-item"><a href="https://lelorrain.fr/produit/detendeurs-pre-regles/">Détendeurs Pré-Réglés</a></li>
<li class="menu-item"><a href="https://lelorrain.fr/produit/detendeurs-standards/">Détendeurs Standards</a></li>
<li class="menu-item"><a href="https://lelorrain.fr/produit/detendeurs-blindes/">Détendeurs Blindés</a></li>
<li class="menu-item"><a href="https://lelorrain.fr/produit/detendeurs-speciaux/">Détendeurs Spéciaux</a></li>
<li class="menu-item"><a href="https://lelorrain.fr/produit/detendeurs-economiseurs/">Détendeurs économiseurs</a></li>
<li class="menu-item"><a href="https://lelorrain.fr/produit/detendeurs-a-colonne-2/">Détendeurs à colonne</a></li>
<li class="menu-item"><a href="https://lelorrain.fr/produit/detendeurs-double-etage/">Détendeurs Double étage</a></li>
<li class="menu-item"><a href="https://lelorrain.fr/produit/detendeurs-avec-rechauffeurs-integres/">Détendeurs à Réchauffeurs Intégrés</a></li>
<li class="menu-item"><a href="https://lelorrain.fr/produit/froid-et-climatisation/">Froid et climatisation</a></li>
<li class="menu-item"><a href="https://lelorrain.fr/produit/seconde-detente/">Seconde détente</a></li>
<li class="menu-item"><a href="https://lelorrain.fr/produit/centrales-de-detente/">Centrales de détente</a></li>
<li class="menu-item"><a href="https://lelorrain.fr/produit/accessoires-de-centrale/">Accessoires de centrales</a></li>
<li class="menu-item"><a href="https://lelorrain.fr/produit/modeles-dinstallation-de-premiere-detente/">Modèles d’installation de première détente</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-type-produit menu-item-has-children"><a href="https://lelorrain.fr/type-produit/equipements-fr/">Équipements</a>
<ul class="sub-menu">
<li class="menu-item"><a href="https://lelorrain.fr/produit/coffres-de-chantier-2/">Equipements pour postes autonomes portables</a></li>
<li class="menu-item"><a href="https://lelorrain.fr/produit/postes-autonomes-portables/">Postes autonomes portables</a></li>
<li class="menu-item"><a href="https://lelorrain.fr/produit/coffres-de-chantier/">Coffres de chantier</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-type-produit menu-item-has-children"><a href="https://lelorrain.fr/type-produit/raccords-et-clapets/">Raccords et clapets</a>
<ul class="sub-menu">
<li class="menu-item"><a href="https://lelorrain.fr/produit/sorties-bouteilles-a-detente-integree/">Sortie bouteilles à détente intégrée</a></li>
<li class="menu-item"><a href="https://lelorrain.fr/produit/raccords-rapides-isocouple/">Raccords rapides ISOCOUPLE</a></li>
<li class="menu-item"><a href="https://lelorrain.fr/produit/clapets-anti-retour-pare-flamme/">Clapets anti-retour pare-flamme</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-type-produit menu-item-has-children"><a href="https://lelorrain.fr/type-produit/accessoires/">Accessoires</a>
<ul class="sub-menu">
<li class="menu-item"><a href="https://lelorrain.fr/produit/accessoires-detendeurs/">Accessoires détendeurs</a></li>
<li class="menu-item"><a href="https://lelorrain.fr/produit/accessoires-divers/">Accessoires divers</a></li>
<li class="menu-item"><a href="https://lelorrain.fr/produit/accessoires-chalumeau/">Accessoires chalumeau</a></li>
<li class="menu-item"><a href="https://lelorrain.fr/produit/tuyaux/">Tuyaux</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-type-produit menu-item-has-children"><a href="https://lelorrain.fr/type-produit/conseils-et-garanties-en-fr/">Conseils et Garanties</a>
<ul class="sub-menu">
<li class="menu-item"><a href="https://lelorrain.fr/produit/conseils-dutilisation-2/">Conseils d’utilisation</a></li>
<li class="menu-item"><a href="https://lelorrain.fr/produit/conditions-de-garantie/">Conditions de garantie</a></li>
</ul>
</li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children"><a href="https://lelorrain.fr/services-innovation-offres-personnalisees-conception-produit-sur-mesure-installation-formation/">Services</a>
<ul class="sub-menu">
<li class="menu-item"><a href="https://lelorrain.fr/service/certifications-qualite/">Certifications</a></li>
<li class="menu-item"><a href="https://lelorrain.fr/service/bureau-detudes-le-lorrain/">Bureau d’études</a></li>
<li class="menu-item"><a href="https://lelorrain.fr/service/visites-preventives/">Visites préventives</a></li>
<li class="menu-item"><a href="https://lelorrain.fr/service/assistance-technique-le-lorrain/">Assistance technique</a></li>
<li class="menu-item"><a href="https://lelorrain.fr/service/assistance-technique-specifique-aux-reseaux-gaz-le-lorrain/">Assistance Technique Spécifique aux Réseaux Gaz</a></li>
<li class="menu-item"><a href="https://lelorrain.fr/service/etalonnage-soudage-controle-equipement-gaz-securite-soudage-tracabilite-expertise-le-lorrain-conformite-securite-operateur-calibration-metrologie/">Étalonnage en laboratoire & contrôles sur site</a></li>
<li class="menu-item"><a href="https://lelorrain.fr/service/service-apres-vente-le-lorrain/">Service Après-vente</a></li>
<li class="menu-item"><a href="https://lelorrain.fr/service/formation/">Formation</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://lelorrain.fr/actualites-lelorrain-hampiaux/">Actualités</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://lelorrain.fr/conseils-de-pro-lelorrain-astuces-besoins-specifiques/">Conseils de pro</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="https://lelorrain.fr/academie-qualiopi-formation-equipe-accompagnement-expertise-technique/">Académie</a></li>
</ul>
</div>
</div>
</nav>
{% if not is_admin_area %}
<div class="stickyButtons">
<div class="certif menu-item menu-item-type-custom menu-item-object-custom"><a href="https://lelorrain.fr/authentification-des-constats-de-verification/"><img src="https://lelorrain.fr/wp-content/themes/lelorrain/assets/icones/picto_certif.svg" alt=""><p>Vérifier certificat</p></a></div>
<div class="espace 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.fr/wp-content/themes/lelorrain/assets/icones/espacePro.svg" alt=""><p>SAV</p></a></div>
<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" target="_blank"><img src="https://lelorrain.fr/wp-content/themes/lelorrain/assets/icones/Catalogue.svg" alt=""><p>Catalogue</p></a></div>
<div class="rappel fixeSurMobile menu-item menu-item-type-post_type menu-item-object-page"><a href="https://lelorrain.fr/contact-numero-adresse-telephone-lelorrain/"><img src="https://lelorrain.fr/wp-content/themes/lelorrain/assets/icones/telephone.svg" alt=""><p>Être rappelé</p></a></div>
<div class="rdv dansBurgerMenu menu-item menu-item-type-custom menu-item-object-custom"><a href="https://meetings.hubspot.com/victor-dasilva" target="_blank"><img src="https://lelorrain.fr/wp-content/themes/lelorrain/assets/icones/Mail.svg" alt=""><p>Prendre rdv</p></a></div>
</div>
{% endif %}
</div>
</div>
<div class="right-section">
<div id="Recherche">
<a href="" class="squareButton">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<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 d="M15.7319 16.1445L19.1629 22" stroke="black" stroke-width="2" stroke-linecap="round"/>
</svg>
<p>Rechercher</p>
</a>
</div>
<div id="Espace">
<a href="https://lelorrain.fr/contact-numero-adresse-telephone-lelorrain/" class="squareButton" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M2.25 6.75C2.25 15.034 8.966 21.75 17.25 21.75H19.5C20.0967 21.75 20.669 21.5129 21.091 21.091C21.5129 20.669 21.75 20.0967 21.75 19.5V18.128C21.75 17.612 21.399 17.162 20.898 17.037L16.475 15.931C16.035 15.821 15.573 15.986 15.302 16.348L14.332 17.641C14.05 18.017 13.563 18.183 13.122 18.021C11.4849 17.4191 9.99815 16.4686 8.76478 15.2352C7.53141 14.0018 6.58087 12.5151 5.979 10.878C5.817 10.437 5.983 9.95 6.359 9.668L7.652 8.698C8.015 8.427 8.179 7.964 8.069 7.525L6.963 3.102C6.90214 2.85869 6.76172 2.6427 6.56405 2.48834C6.36638 2.33397 6.1228 2.25008 5.872 2.25H4.5C3.90326 2.25 3.33097 2.48705 2.90901 2.90901C2.48705 3.33097 2.25 3.90326 2.25 4.5V6.75Z" stroke="black" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p>Être rappelé</p>
</a>
</div>
<div id="responsiveBurger">
<svg width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="48" height="4" fill="#003C8C"/>
<rect y="10" width="48" height="4" fill="#003C8C"/>
<rect y="20" width="48" height="4" fill="#003C8C"/>
</svg>
</div>
</div>
</div>
</header>
{% endblock %}
{% if app.user and app.user.isVerified == false %}
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
<div class="alert-message">
<strong>Votre compte n'est pas activé</strong>, <a href="{{ path('resend_verif') }}">renvoyer le lien d'activation</a>
</div>
</div>
{% endif %}
{# Les messages flash sont rendus ici, avant `{% block body %}` — donc tout en
haut du document. Dans le backoffice, ils atterrissaient derrière l'en-tête
fixe et restaient invisibles ; pire, `app.flashes` vide le sac, ce qui
empêchait les pages admin de les réafficher elles-mêmes. Elles incluent
désormais le partiel dans leur `<main>`, où le bandeau est visible. #}
{% if not is_admin_area %}
{% include "_partials/_flash.html.twig" %}
{% endif %}
<div class="contentPage">
{% block body %}{% endblock %}
</div>
{# Bloc contact : masqué dans le backoffice #}
{% if not is_admin_area %}
<div class="body-container contact-container" style="margin-top:35px;max-width:100%;overflow:hidden;background-color:#161d3f;">
<div class="container">
<div style="float:left;width:40%;text-align:center;">
<div><img src="{{ asset('assets/images/logo-lelorrain-transparent.png') }}"></div>
<div style="padding:30px;">
<div style="padding:10px;display:flex;align-items:center;justify-content:center;gap:12px;"><img src="https://lelorrain.fr/wp-content/themes/lelorrain/assets/icones/pinSecondaire.svg" alt="" style="width:20px;height:auto;flex-shrink:0;"><span style="text-align:left;">23 All. des Grands Pâquis<br>54180 Heillecourt | France</span></div>
<div style="padding:10px;display:flex;align-items:center;justify-content:center;gap:12px;"><img src="https://lelorrain.fr/wp-content/themes/lelorrain/assets/icones/mobile.svg" alt="" style="width:20px;height:auto;flex-shrink:0;"><a href="tel:+33383354798" style="color:#fff;text-decoration:none;">+33 (0) 3 83 35 47 98</a></div>
</div>
</div>
<div style="float:left;width:60%;color:#003c8c !important;" class="blocContact">
<div class="container-min">
<h2>Contactez-nous</h2>
<div id="hubspot-form"></div>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
<script>
hbspt.forms.create({
portalId: "8673532",
formId: "ea89c93a-9d5d-431f-8718-d93f6d198357",
target: '#hubspot-form'
});
</script>
</div>
</div>
</div>
</div>
{% endif %}
{% block footer %}
{% if not hide_sticky_buttons %}
<div id="sticky-buttons-container" class="no-print">
<div><a href="https://lelorrain.fr/authentification-des-constats-de-verification/"><img src="https://lelorrain.fr/wp-content/themes/lelorrain/assets/icones/picto_certif.svg" alt=""><p>Vérifier certificat</p></a></div>
<div><a href="https://sav.lelorrain.fr/fr/bon/sav/new" target="_blank"><img src="https://lelorrain.fr/wp-content/themes/lelorrain/assets/icones/espacePro.svg" alt=""><p>SAV</p></a></div>
<div><a href="https://lelorrain.fr/wp-content/uploads/2024/03/CATALOGUE-19-LE-LORRAIN-FRANCAIS-Vreduite.pdf" target="_blank"><img src="https://lelorrain.fr/wp-content/themes/lelorrain/assets/icones/Catalogue.svg" alt=""><p>Catalogue</p></a></div>
<div><a href="https://meetings.hubspot.com/victor-dasilva" target="_blank"><img src="https://lelorrain.fr/wp-content/themes/lelorrain/assets/icones/Mail.svg" alt=""><p>Prendre rdv</p></a></div>
</div>
{% endif %}
<footer class="no-print" style="background-color:#fff;padding:12px 80px 16px;z-index:20;position:relative;">
<div style="display:flex;justify-content:space-between;align-items:center;">
<ul style="display:flex;align-items:center;gap:0;list-style:none;padding:0;margin:0;">
<li style="position:static;"><a href="#" style="font-size:0.813rem;color:#003c8c;text-decoration:none;">Copyright LE LORRAIN</a></li>
<li style="position:static;"><span style="margin:0 8px;color:#003c8c;font-size:0.813rem;">—</span><a href="https://lelorrain.fr/politique-de-confidentialite/" style="font-size:0.813rem;color:#003c8c;text-decoration:none;">Politique de confidentialité</a></li>
<li style="position:static;"><span style="margin:0 8px;color:#003c8c;font-size:0.813rem;">—</span><a href="https://lelorrain.fr/mentions-legales/" style="font-size:0.813rem;color:#003c8c;text-decoration:none;">Mentions légales</a></li>
</ul>
<div style="display:flex;align-items:center;gap:16px;">
<p style="color:#003c8c;font-weight:600;margin:0;white-space:nowrap;">Suivez LE LORRAIN</p>
<div style="display:flex;align-items:center;gap:8px;">
<a href="https://www.facebook.com/profile.php?id=100063448278996"><img src="https://lelorrain.fr/wp-content/themes/lelorrain/assets/images/RS/Facebook.svg" style="height:24px;width:auto;" alt="Facebook"></a>
<a href="https://www.linkedin.com/company/le-lorrain-hampiaux-sas/"><img src="https://lelorrain.fr/wp-content/themes/lelorrain/assets/images/RS/Linkedin.svg" style="height:24px;width:auto;" alt="LinkedIn"></a>
<a href="https://www.youtube.com/channel/UCqskbiK2aDq0SAzDdNsmLeA"><img src="https://lelorrain.fr/wp-content/themes/lelorrain/assets/images/RS/Youtube.svg" style="height:24px;width:auto;" alt="YouTube"></a>
<a href="https://www.instagram.com/lelorrainbrand/?hl=fr"><img src="https://lelorrain.fr/wp-content/uploads/2024/02/Instagram.svg" style="height:24px;width:auto;" alt="Instagram"></a>
<a href="https://x.com/LeLorrain_Hpx?mx=2"><img src="https://lelorrain.fr/wp-content/uploads/2024/02/X.svg" style="height:24px;width:auto;" alt="X"></a>
</div>
</div>
</div>
<p style="text-align:center;margin-top:12px;opacity:0.8;font-size:12px;margin-bottom:0;">Site développé par <a href="https://calderastudio.fr/accueil" target="_blank" style="color:#006ec8;text-decoration:underline;">Caldera studio</a></p>
</footer>
{% endblock %}
<script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("activeCollapsible");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
function openTab(evt, tabName) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
<script>
document.addEventListener("DOMContentLoaded", function () {
const navbarToggle = document.querySelector('#responsiveBurger');
const navbarCollapse = document.querySelector('#navigation-global');
if (navbarToggle && navbarCollapse) {
navbarToggle.addEventListener('click', function () {
navbarCollapse.classList.toggle('opened');
});
}
const menuCloser = document.querySelector('#CloseMenu');
if (menuCloser && navbarCollapse) {
menuCloser.addEventListener('click', function () {
navbarCollapse.classList.toggle('opened');
});
}
const secondStage = document.querySelector('.second-stage');
const logo = document.querySelector('#lelorrainLogo');
const LOGO_BLUE = 'https://lelorrain.fr/wp-content/themes/lelorrain/assets/images/logoBleu.png';
const LOGO_WHITE = 'https://lelorrain.fr/wp-content/themes/lelorrain/assets/images/logoBlanc.png';
function updateHeader() {
const isMobile = window.innerWidth <= 1184;
const filled = window.location.pathname !== '/' || window.scrollY >= 160 || isMobile;
if (secondStage) {
secondStage.classList.toggle('filled', filled);
}
if (logo) {
logo.src = filled ? LOGO_BLUE : LOGO_WHITE;
}
}
window.addEventListener('scroll', updateHeader, { passive: true });
window.addEventListener('resize', updateHeader, { passive: true });
updateHeader();
const toggleBtn = document.getElementById('toggle-sidebar');
const sidebar = document.getElementById('sidebar');
const mainContent = document.getElementById('main-content');
if (toggleBtn && sidebar && mainContent) {
toggleBtn.addEventListener('click', () => {
sidebar.classList.toggle('d-none');
if (sidebar.classList.contains('d-none')) {
mainContent.classList.remove('col-9');
mainContent.classList.add('col-12');
} else {
mainContent.classList.remove('col-12');
mainContent.classList.add('col-9');
}
});
}
});
</script>
</body>
</html>

templates/base.html.twig line 1