@charset "UTF-8";
/*!
Theme Name:   CoverplaV2
Author:       Not Made in
Author URI:   http://www.notmadein.fr
Description:  Child theme Storefront pour le site COVERPLA 
Version:      2.0.0
Template: storefront
*/
/*
======
Note: Do not edit this file. If you wish to add your own CSS, go to Customizer > Additional CSS.
======
*/
/* --------------- Theme customization starts here ----------------- */
/* Feuilles de styles partielles
///////////////////////////////////////////////////////////////*/
/* 
version : 1.0
date : 09/11/2023
*/
/* 
┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│	RESET
└────────────────────────────────────────────────────────────────────────────────────────────────────────┘
*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ol, ul {
  list-style: none;
}

img {
  display: unset;
  max-width: unset;
  height: unset;
  border-radius: unset;
  -webkit-border-radius: unset;
  -moz-border-radius: unset;
  -ms-border-radius: unset;
  -o-border-radius: unset;
}

a:focus, input:focus, textarea:focus, button:focus {
  outline: 2px solid #7f54b3;
  outline-color: rgb(127, 84, 179);
}

/* 
version : 1.0
date : 09/11/2023
*/
/* 
┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│	TYPOGRAPHY
└────────────────────────────────────────────────────────────────────────────────────────────────────────┘
*/
/* Ajout local polices Montserrat
///////////////////////////////////////////////////////////////*/
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  src: url("assets/fonts/Montserrat-Regular.otf") format("openType"), url("assets/fonts/Montserrat-Regular.woff2") format("woff2"), url("assets/fonts/Montserrat-Regular.woff") format("woff"), url("assets/fonts/Montserrat-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Montserrat_Black";
  font-style: normal;
  src: url("assets/fonts/Montserrat-Black.otf") format("openType"), url("assets/fonts/Montserrat-Black.woff2") format("woff2"), url("assets/fonts/Montserrat-Black.woff") format("woff"), url("assets/fonts/Montserrat-Black.ttf") format("truetype");
}
@font-face {
  font-family: "Montserrat_Bold";
  font-style: normal;
  src: url("assets/fonts/Montserrat-Bold.otf") format("openType"), url("assets/fonts/Montserrat-Bold.woff2") format("woff2"), url("assets/fonts/Montserrat-Bold.woff") format("woff"), url("assets/fonts/Montserrat-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Montserrat_SemibBold";
  font-style: normal;
  src: url("assets/fonts/Montserrat-SemiBold.otf") format("openType"), url("assets/fonts/Montserrat-SemiBold.woff2") format("woff2"), url("assets/fonts/Montserrat-SemiBold.woff") format("woff"), url("assets/fonts/Montserrat-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Montserrat_Medium";
  font-style: normal;
  src: url("assets/fonts/Montserrat-Medium.otf") format("openType"), url("assets/fonts/Montserrat-Medium.woff2") format("woff2"), url("assets/fonts/Montserrat-Medium.woff") format("woff"), url("assets/fonts/Montserrat-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Montserrat_Light";
  font-style: normal;
  src: url("assets/fonts/Montserrat-Light.otf") format("openType"), url("assets/fonts/Montserrat-Light.woff2") format("woff2"), url("assets/fonts/Montserrat-Light.woff") format("woff"), url("assets/fonts/Montserrat-Light.ttf") format("truetype");
}
@font-face {
  font-family: "Montserrat_Thin";
  font-style: normal;
  src: url("assets/fonts/Montserrat-Thin.otf") format("openType"), url("assets/fonts/Montserrat-Thin.woff2") format("woff2"), url("assets/fonts/Montserrat-Thin.woff") format("woff"), url("assets/fonts/Montserrat-Thin.ttf") format("truetype");
}
/* Ajout local polices PlayfairDisplay
///////////////////////////////////////////////////////////////*/
@font-face {
  font-family: "Playfair";
  font-style: normal;
  src: url("assets/fonts/PlayfairDisplay-Regular.otf") format("openType"), url("assets/fonts/PlayfairDisplay-Regular.woff2") format("woff2"), url("assets/fonts/PlayfairDisplay-Regular.woff") format("woff"), url("assets/fonts/PlayfairDisplay-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Playfair_Black";
  font-style: normal;
  src: url("assets/fonts/PlayfairDisplay-Black.otf") format("openType"), url("assets/fonts/PlayfairDisplay-Black.woff2") format("woff2"), url("assets/fonts/PlayfairDisplay-Black.woff") format("woff"), url("assets/fonts/PlayfairDisplay-Black.ttf") format("truetype");
}
@font-face {
  font-family: "Playfair_Bold";
  font-style: normal;
  src: url("assets/fonts/PlayfairDisplay-Bold.otf") format("openType"), url("assets/fonts/PlayfairDisplay-Bold.woff2") format("woff2"), url("assets/fonts/PlayfairDisplay-Bold.woff") format("woff"), url("assets/fonts/PlayfairDisplay-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Playfair_Italic";
  font-style: normal;
  src: url("assets/fonts/PlayfairDisplay-Italic.otf") format("openType"), url("assets/fonts/PlayfairDisplay-Italic.woff2") format("woff2"), url("assets/fonts/PlayfairDisplay-Italic.woff") format("woff"), url("assets/fonts/PlayfairDisplay-Italic.ttf") format("truetype");
}
@font-face {
  font-family: "Playfair_Italic_Bold";
  font-style: normal;
  src: url("assets/fonts/PlayfairDisplay-BoldItalic.otf") format("openType"), url("assets/fonts/PlayfairDisplay-BoldItalic.woff2") format("woff2"), url("assets/fonts/PlayfairDisplay-BoldItalic.woff") format("woff"), url("assets/fonts/PlayfairDisplay-BoldItalic.ttf") format("truetype");
}
/* Ajout local polices google material symbols outlined icons
///////////////////////////////////////////////////////////////*/
@font-face {
  font-family: "Material_Symbols_Rounded";
  font-style: normal;
  src: url("assets/fonts/googleMaterialIcons/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2") format("woff2"), url("assets/fonts/googleMaterialIcons/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].ttf") format("truetype");
}
/* Global text settings 
///////////////////////////////////////////////////////////////*/
strong {
  font-family: var(--fontPrimary_SemiBold);
  font-weight: initial;
}

em {
  font-style: italic;
}

/* Titre de niveau 1 - 6
============================================================= */
h1 {
  font-size: 3rem;
  line-height: 3rem;
  margin-bottom: 10px;
}

h2 {
  font-size: 2rem;
  line-height: 2rem;
  margin-bottom: 10px;
}

h3 {
  font-size: 1.5rem;
  line-height: 1.5rem;
  margin-bottom: 10px;
}

h4 {
  font-size: 1.25rem;
  line-height: 1.25rem;
  margin-bottom: 10px;
}

h5 {
  font-size: 1.125rem;
  line-height: 1.125rem;
  margin-bottom: 10px;
}

h6 {
  font-size: 1rem;
  line-height: 1rem;
  margin-bottom: 10px;
}

/* Font-familly
///////////////////////////////////////////////////////////////*/
.font-family-medium > * {
  font-weight: 500;
}

.font-family-light > * {
  font-weight: 300;
}

.font-primary {
  font-family: var(--fontPrimary);
}

.font-primary-Black {
  font-family: var(--fontPrimary_Black);
}

.font-primary-Bold {
  font-family: var(--fontPrimary_Bold);
}

.font-primary-SemiBold {
  font-family: var(--fontPrimary_SemiBold);
}

.font-primary-Medium {
  font-family: var(--fontPrimary_Medium);
}

.font-primary-Light {
  font-family: var(--fontPrimary_Light);
}

.font-primary-Thin {
  font-family: var(--fontPrimary_Thin);
}

.font-secondary {
  font-family: var(--fontSecondary);
}

.font-secondary-Black {
  font-family: var(--fontSecondary_Black);
}

.font-secondary-Bold {
  font-family: var(--fontSecondary_Bold);
}

.font-secondary-Italic {
  font-family: var(--fontSecondary_Italic);
}

.font-secondary-ItalicBold {
  font-family: var(--fontSecondary_IalicBold);
}

.material-symbols-rounded {
  font-family: "Material_Symbols_Rounded";
  font-weight: normal;
  font-style: normal;
  font-size: 28px;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  color: inherit;
  font-variation-settings: "wght" 100;
  vertical-align: bottom;
}

/*////////////////////////////////////////////////////////////
VARIABLES
////////////////////////////////////////////////////////////*/
:root {
  /* couleurs utilisées dans le site */
  --canvasColor: #fff;
  --backgroundColor: #fff;
  --foregroundColor: #111;
  /* couleur principale */
  --primaryColor: #dc9c51;
  --primaryShade1: #f6e7d4;
  --primaryShade2: #dbb48f;
  --primaryShade3: #dba46e;
  --primaryShade4: #cc8d4e;
  --primaryShade5: #bf8449;
  /* couleur principale eco responsable green attitude */
  --secondaryColor: #afd696;
  --secondaryShade1: #d7e2d0;
  --secondaryShade2: #c8e5b5;
  --secondaryShade3: #b2cca2;
  --secondaryShade4: #869979;
  --secondaryShade5: #6f7f65;
  /* couleur accentuation */
  --accentColor: #86878c;
  --accentShade1: #e8e9ea;
  --accentShade2: #c4c7cc;
  --accentShade3: #9fa1a5;
  --accentShade4: #6e6f72;
  --accentShade5: #626466;
  /* couleur accentuation verte */
  --accent2Color: #8bc34a;
  --accent2Shade1: #e7f6d5;
  --accent2Shade2: #c5e1a5;
  --accent2Shade3: #aed581;
  --accent2Shade4: #689f38;
  --accent2Shade5: #558b2f;
  /* couleur accentuation rouge */
  --accent3Color: #f44336;
  --accent3Shade1: #ffdde0;
  --accent3Shade2: #ffcdd2;
  --accent3Shade3: #ef9a9a;
  --accent3Shade4: #d32f2f;
  --accent3Shade5: #b71c1c;
  /* couleur neutres */
  --neutralShade1: #f2f2f2;
  --neutralShade2: #e8e9e9;
  --neutralShade3: #d1d3d4;
  --neutralShade4: #babdbf;
  --neutralShade5: #808488;
  --neutralShade6: #666a6d;
  --neutralShade7: #4d5052;
  --neutralShade8: #212122;
  --grayColor: #999;
  --lightGrayColor: #ddd;
  --infoColor:#059;
  --infoBackgroundColor:#BEF;
  /* cards background */
  --cardBackground: rgba(255, 255, 255, 0.28);
  /*section default padding */
  --defaultPadding:7.5rem 3.125rem;
  /* Bords arrondis */
  --borderRadius: 10px;
  --borderRadiusInputs: 5px;
  /* ombre portée boites*/
  --boxShadow: 0 2px 5px rgba(#333, 0.2);
  /*Dégradés de couleur*/
  --linear1:linear-gradient(white, var(--neutralShade2) );
  --linear2:linear-gradient(white, var(--primaryShade1));
  --linear3:linear-gradient(to left, white, var(--neutralShade2));
  --linear4:linear-gradient(to right, white, var(--primaryShade1));
  --linear5:linear-gradient(to top, white, var(--neutralShade2));
  --linear6:linear-gradient(to top, white, var(--primaryShade1));
  /* Polices de caractère utilisées dans le site */
  --fontPrimary: "Montserrat";
  --fontPrimary_Black: "Montserrat_Black";
  --fontPrimary_Bold: "Montserrat_Bold";
  --fontPrimary_SemiBold: "Montserrat_SemibBold";
  --fontPrimary_Medium: "Montserrat_Medium";
  --fontPrimary_Light: "Montserrat_Light";
  --fontPrimary_Thin: "Montserrat_Thin";
  --fontSecondary: "Playfair";
  --fontSecondary_Black: "Playfair_Black";
  --fontSecondary_Bold: "Playfair_Bold";
  --fontSecondary_Italic: "Playfair_Italic";
  --fontSecondary_IalicBold: "Playfair_Italic_Bold";
  /* fontawesome */
  --fa-font-path: "../../../assets/fonts";
  --handheld:568px;
  --tabletportrait:768px;
  --desktop:1024px;
  --bigscreen:1280px;
  --laptop: 1366px;
  --hdscreen:1920px;
  /*
  Tailles d’écran communes

      Mobile : 360 x 640
      Mobile:  375 x 667
      Mobile : 360 x 720
      iPhone X : 375 x 812
      Pixel 2 : 411 x 731
      Tablette : 768 x 1024
      Ordinateur portable : 1366 x 768
      Ordinateur portable ou de bureau haute résolution : 1920 x 1080

  */
  --container-width:	1024px;
  --headerHeight: 190px;
}
@media screen and (max-width: 1280px) {
  :root {
    --defaultPadding:3.5rem 1.125rem;
  }
}

/* 
┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│	RWD NOM DE LA PAGE
└────────────────────────────────────────────────────────────────────────────────────────────────────────┘
*/
/* 0 html{color:yellow;}
///////////////////////////////////////////////////////////////*/
/* min-width appliquer les styles à partir d'une certaine largeur d'écran et au-delà*/
/* A partir de la largeur minimum de 0 et au delà en partant de 0 
============================================================= */
@media screen and (min-width: 0px) {
  /* debug */
}
/* max-width appliquer les styles jusqu'à une certaine largeur d'écran.*/
/* De 0 jusqu'à largeur maximum de 0
============================================================= */
/* Entre 0px et 568px  
============================================================= */
/* 568 Mobile html{color:green;} 
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 568px et au delà en partant de 0 
============================================================= */
@media screen and (min-width: 568px) {
  /* debug */
}
/* De 0 jusqu'à largeur maximum de 568px
============================================================= */
/* Entre 568px et 768px  
============================================================= */
/* 768 tabletportrait html{color:orange;} 
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 768px et au delà en partant de 0 
============================================================= */
@media screen and (min-width: 768px) {
  /* debug */
}
/* De 0 jusqu'à largeur maximum de 768px
============================================================= */
/* Entre 768px et 1024px 
============================================================= */
/* 1024 tablet html{color:grey;} 
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 1024px et au delà en partant de 0 
============================================================= */
@media screen and (min-width: 1024px) {
  /* debug */
}
/* De 0 jusqu'à largeur maximum de 1024px
============================================================= */
/* Entre 1024px et 1280px  
============================================================= */
/* 1280 grand ecran html{color:cyan;}
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 1280px et au delà en partant de 0 
============================================================= */
@media screen and (min-width: 1280px) {
  /* debug */
}
/* De 0 jusqu'à largeur maximum de 1280px
============================================================= */
/* entre 1280px et 1366px
============================================================= */
/* 1366px Ordinateur portable  html{color:violet;}
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 1366px et au delà en partant de 0 
============================================================= */
@media screen and (min-width: 1366px) {
  /* debug */
}
/* De 0 jusqu'à largeur maximum de 1366px
============================================================= */
/* Entre 1366px et 1920px
============================================================= */
/* 1920 Ordinateur portable ou de bureau haute résolution  html{color:red;}
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 1920px et au delà en partant de 0 
============================================================= */
@media screen and (min-width: 1920px) {
  /* debug */
}
/* De 0 jusqu'à largeur maximum de 1920px
============================================================= */
/*

min-width : 
Cette propriété spécifie la largeur minimale de l'écran à laquelle la règle CSS doit s'appliquer.
Si la largeur de l'écran est égale ou supérieure à la valeur spécifiée avec min-width, les styles à l'intérieur de la media query seront appliqués.
Exemple :

@media only screen and (min-width: 600px) {
    // Styles à appliquer lorsque la largeur de l'écran est supérieure ou égale à 600px 
}

max-width :
Cette propriété spécifie la largeur maximale de l'écran à laquelle la règle CSS doit s'appliquer.
Si la largeur de l'écran est inférieure ou égale à la valeur spécifiée avec max-width, les styles à l'intérieur de la media query seront appliqués.
Exemple :

@media only screen and (max-width: 800px) {
    // Styles à appliquer lorsque la largeur de l'écran est inférieure ou égale à 800px 
}

En résumé, min-width est utilisé lorsque vous souhaitez appliquer des styles à partir d'une certaine largeur d'écran et au-delà, 
max-width est utilisé lorsque vous souhaitez appliquer des styles jusqu'à une certaine largeur d'écran. 
Ces deux propriétés sont souvent combinées dans des media queries pour créer des designs réactifs qui s'ajustent en fonction de la taille de l'écran de l'appareil.

*/
/*
767px
visible!important

*/
/* Layout
============================================================= */
/* 
┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│	HEADER
└────────────────────────────────────────────────────────────────────────────────────────────────────────┘
*/
/* Header 
////////////////////////////////////////////////////////////*/
/*
top: calc(var(--small-value) / 2);
top: calc(50% - attr(height) / 2);
*/
body,
.site,
.site-content {
  overflow-x: clip !important;
}

/* correction positionnement sticky à cause de l'overflow sur tous les elements parents */
.site {
  overflow-x: clip !important;
}

.site-header .col-full::before,
.site-header .col-full::after {
  display: none;
}

.site-header > .col-full {
  display: grid;
  grid-gap: 1.25rem;
  grid-template-areas: "header_logo header_search header_second_nav";
  width: 100%;
  position: relative;
  align-items: center;
  grid-template-rows: 144px;
  margin: 0;
  padding: 0;
  max-width: none;
}

/* correction positionnement sticky à cause de l'overflow sur tous les elements parents */
.site-content {
  overflow-x: clip !important;
}

/* Header sticky
////////////////////////////////////////////////////////////*/
header.site-header {
  background-color: rgb(255, 255, 255);
  border-bottom: 1px solid var(--neutralShade3);
  padding-top: 0;
  padding-bottom: 0;
  width: 100%;
  transition: all 0.8s ease;
  -webkit-transition: all 0.8s ease;
  -moz-transition: all 0.8s ease;
  -ms-transition: all 0.8s ease;
  -o-transition: all 0.8s ease;
}
header.site-header .site-branding {
  grid-area: header_logo;
  width: 100% !important;
  float: none !important;
  margin-right: 0 !important;
}
header.site-header .site-branding .custom-logo-link {
  position: absolute;
  width: 300px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
}
header.site-header .site-branding .custom-logo-link img {
  height: auto;
  max-width: 290px;
  max-height: none;
  margin-top: 14px;
  transition: all 0.8s ease;
  -webkit-transition: all 0.8s ease;
  -moz-transition: all 0.8s ease;
  -ms-transition: all 0.8s ease;
  -o-transition: all 0.8s ease;
}
header.site-header.stick {
  position: sticky;
  top: 0;
  width: 100%;
  transition: all 0.8s ease;
  -webkit-transition: all 0.8s ease;
  -moz-transition: all 0.8s ease;
  -ms-transition: all 0.8s ease;
  -o-transition: all 0.8s ease;
}
header.site-header.smallHeader {
  background-color: rgba(255, 255, 255, 0.9);
  transition: all 0.8s ease;
  -webkit-transition: all 0.8s ease;
  -moz-transition: all 0.8s ease;
  -ms-transition: all 0.8s ease;
  -o-transition: all 0.8s ease;
}
header.site-header.smallHeader .site-branding img {
  max-width: 150px;
  transition: all 0.8s ease;
  -webkit-transition: all 0.8s ease;
  -moz-transition: all 0.8s ease;
  -ms-transition: all 0.8s ease;
  -o-transition: all 0.8s ease;
}
header.site-header.smallHeader > .col-full {
  transition: all 0.8s ease;
  grid-template-rows: 80px;
  -webkit-transition: all 0.8s ease;
  -moz-transition: all 0.8s ease;
  -ms-transition: all 0.8s ease;
  -o-transition: all 0.8s ease;
}

/* Navigation secondaire
////////////////////////////////////////////////////////////*/
.storefront-secondary-navigation.woocommerce-active .site-header .secondary-navigation {
  grid-area: header_second_nav;
  width: auto;
  float: none;
  margin: 0;
  z-index: 1000;
  position: relative;
}

.secondary-navigation .menu > li {
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
}

.secondary-navigation .menu li > a:link,
.secondary-navigation .menu li > a:visited,
.secondary-navigation .menu li > a:active {
  min-width: 40px;
  display: inline-block;
  transition: all 0.2s;
  line-height: 1;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  padding: 0;
}

.secondary-navigation .menu li > a:hover {
  color: var(--primaryColor) !important;
  text-decoration: none;
}

.secondary-navigation .menu li > a::before {
  font-family: "Material_Symbols_Rounded";
  vertical-align: middle;
  display: inline-block;
  transition: opacity 0.2s ease;
  color: var(--accentColor);
  font-weight: normal;
  font-style: normal;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  font-variation-settings: "wght" 100;
  /*left: 8px;
  top: 8px;
  text-align: left;
  position: relative;*/
  line-height: 1;
}

/* mon compte */
.secondary-navigation .menu Li:nth-child(1) > a::before {
  font-size: 42px;
  min-width: 42px;
  content: "\e7fd";
}

/* Contactez-nous */
.secondary-navigation .menu Li:nth-child(2) > a::before {
  font-size: 38px;
  min-width: 42px;
  content: "\e158";
}

.secondary-navigation .menu li > a:hover::before {
  color: var(--primaryColor);
}

/* Flag langue */
.secondary-navigation .menu Li:nth-child(3) {
  margin-right: 15px;
}
.secondary-navigation .menu Li:nth-child(3) img {
  margin: 12px 8px;
  width: 32px;
}

/* Recherche ajax
////////////////////////////////////////////////////////////*/
.woocommerce-active .site-header .site-search {
  grid-area: header_search;
  width: auto;
  float: none;
  margin: 0;
  clear: none;
  position: relative;
  z-index: 1000; /* pour apsser en premier plan devant le logo coverpla*/
}

.woocommerce-active .site-header .site-search .css-a1jvfi .ywcas-input-field-wrapper {
  padding: 3px;
  border-radius: var(--borderRadius);
  border: 1px solid var(--accentShade3) !important;
}

/* champ de recherche ajax*/
/* image svg de la loupe en background */
/*
.yith-ajaxsearchform-container .search-navigation::before {
  font-family: 'Material_Symbols_Rounded';
  content:'\E8B6'; 
  font-weight: normal;
  font-style: normal;
  font-size: 38px;  // Preferred icon size 
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  font-variation-settings: 'OPSZ' 20;
  //background: black;
  color: #85878b;
  font-variation-settings: 'GRAD' -25;
  font-variation-settings: 'wght' 100;
  position:absolute;
  //left:8px; // pb chrome deczllage gauche
  top:8px;
}
*/
/*
.woocommerce-active .site-header .site-search .search-navigation input#yith-s  {
	height: 3.125rem;
	font-size: 1rem;
	border: 1px solid var(--neutralShade3);
	width: 100%;
	padding: .75rem;
	border-radius: var(--borderRadius);
	color: var(--foregroundColor);
	margin-bottom:0;
	padding-left: 3.125rem;
	background-color: unset; //fond transparent pour laisser afficher la loupe sinon remplacée par le spinner de chargement-)
}

.yith-ajaxsearchform-container .search-navigation input.yith-s  {
	height: 50px;
	font-size: 16px;
	border: 1px solid var(--neutralShade3);
	width: 100%;
	padding: 12px;
	font-family: "Montserrat";
	border-radius: var(--borderRadius);
	color: var(--foregroundColor);
	//background-color: unset;
	background-color: var(--canvasColor);
	padding: 2.125rem 2.125rem 2.125rem 3.4375rem;
	font-size: 22px;
	margin:0
}
*/
/* masquer le bouton de rechercheajax*/
/*#yith-searchsubmit {
	display:none;
}
*/
/* panel resultats de recherche ajax*/
/*.autocomplete-suggestion {
	//border:1px solid red;
	font-size: .9375rem;
	overflow: hidden;
}

.autocomplete-suggestion .yith_wcas_result_content .title {
	color: #382e2c;
	font-size: 20px;
	line-height: 24px;
	letter-spacing: inherit;
  }
*/
/* aggrandissement des imagettes*/
/*.autocomplete-suggestion .yith_wcas_result_image {
	overflow: hidden;
}

.autocomplete-suggestion  .ywcas_img.align-left {
	transform: scale(1.5);
  }
 */
/* Raq mini
////////////////////////////////////////////////////////////*/
/* positionnement de la zone de widget crée    
============================================================= */
.header-widget-container {
  position: relative;
  height: 0;
  z-index: 99;
}

.header-widget-container .col-full {
  max-width: none;
}

/* positionnement du widget en absolu    
============================================================= */
.widget_ywraq_mini_list_quote {
  position: absolute;
  top: -86px;
  right: 10px;
  text-align: center;
}

.widget_ywraq_mini_list_quote .raq-info {
  display: block;
  margin: 2px;
  padding: 10px 12px;
  color: var(--foregroundColor);
  font-size: 0.9375rem;
  cursor: pointer;
  border: 0;
}

.widget_ywraq_mini_list_quote .raq_label:link,
.widget_ywraq_mini_list_quote .raq_label:active,
.widget_ywraq_mini_list_quote .raq_label:visited {
  color: var(--foregroundColor);
}

.widget_ywraq_mini_list_quote .raq_label:hover {
  color: var(--primaryColor);
}

/* suppression label "devis"    
============================================================= */
.widget_ywraq_mini_list_quote .raq-info .raq_label .handler-label {
  display: none;
}

/* container raq-tip-counter contiens spans conteuur et liens    
============================================================= */
.widget_ywraq_mini_list_quote .raq-info .raq-tip-counter {
  position: relative;
}

/*conversion du nombre d'article en étiquette au dessus calculatrice   
============================================================= */
.widget_ywraq_mini_list_quote .raq-info .raq-tip-counter .raq-items-number {
  background-color: var(--primaryColor);
  border-radius: 100%;
  -webkit-border-radius: 50px;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  width: auto;
  display: inline-block;
  font-size: 12px;
  color: var(--canvasColor);
  position: absolute;
  padding: 8px;
  line-height: 8px;
  text-align: center;
  top: -26px;
  left: 16px;
}

/* ajout icon calculatrice svg devant le nb d'articles   
============================================================= */
.widget_ywraq_mini_list_quote .raq-info .raq-tip-counter::before {
  content: url(assets/images/icons/calculator.svg);
  position: relative;
  /*position:absolute;
  top: 0px;
  left: -40px;*/
  display: inline-block;
  width: 25px;
  margin-right: 5px;
  vertical-align: middle;
}

/* mise en forme panel au rollover liste des items mis au devis    
============================================================= */
.widget_ywraq_mini_list_quote .yith-ywraq-list-wrapper {
  position: absolute;
  left: auto;
  margin-right: -1px;
  bottom: -12px;
  width: 300px;
  padding-top: 15px;
  right: 0;
}

.widget_ywraq_mini_list_quote .yith-ywraq-list-content {
  position: absolute;
  min-width: 400px;
  box-shadow: 3px 0 15px rgba(0, 0, 0, 0.15);
  right: 70px;
  padding: 15px;
  background-color: var(--canvasColor);
  border-radius: 5px;
  top: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity ease 0.3s;
  font-size: 0.9375rem;
  right: 0;
}

/* positionnement au rollover    
============================================================= */
.widget_ywraq_mini_list_quote:hover .yith-ywraq-list-content {
  top: calc(100% - 13px);
  opacity: 1;
  visibility: visible;
  z-index: 10;
}

/* formatage liste popup    
============================================================= */
.yith-ywraq-list-item-product-info {
  font-family: var(--fontPrimary_Medium);
  font-size: 22px;
  letter-spacing: -1px;
  word-spacing: -0.1875rem;
  line-height: 22px;
}

.yith-ywraq-list-item-product-info .quantity {
  font-family: var(--fontPrimary_Light);
  font-size: 18px;
  color: var(--neutralShade5);
}

.widget_ywraq_mini_list_quote .yith-ywraq-list-content ul li {
  position: relative;
  border-bottom: 1px solid;
  padding: 15px;
  clear: both;
  display: flex !important;
  align-items: flex-start;
}

.yith-ywraq-list-item-info {
  border: 1px solid var(--neutralShade3);
  border-radius: var(--borderRadius);
  -webkit-border-radius: var(--borderRadius);
  -moz-border-radius: var(--borderRadius);
  -ms-border-radius: var(--borderRadius);
  -o-border-radius: var(--borderRadius);
  margin: 0 15px;
}

ul.yith-ywraq-list a.yith-ywraq-item-remove.remove {
  position: absolute;
  top: 24px;
  left: 0;
}

a.remove::before {
  color: var(--primaryColor);
}

/*********** 568 ************/
/* A partir de 568px  */
/* JUSQU'à 568px */
/*********** 768 ************/
/* A partir de 768px */
/* JUSQU'à 768px */
/*********** 1024 ************/
/* A partir de 1024px  */
/* JUSQU'à 1024px */
/*********** 1280 ************/
/* A partir de 1280px */
/* JUSQU'à  1280px */
@media screen and (max-width: 1280px) {
  .site-header > .col-full {
    grid-template-columns: 260px auto 190px;
    grid-template-areas: "header_search header_logo header_second_nav";
  }
  .woocommerce-active .site-header .site-search {
    margin-left: 15px;
  }
}
/**/
@media screen and (min-width: 1280px) and (max-width: 1366px) {
  .site-header > .col-full {
    grid-template-columns: auto 250px 190px;
    grid-template-areas: "header_logo header_search header_second_nav";
  }
}
/*********** 1366px ************/
/* A partir de 1366px */
@media screen and (min-width: 1366px) {
  .site-header > .col-full {
    grid-template-columns: auto 280px 190px;
    grid-template-areas: "header_logo header_search header_second_nav";
  }
}
/* JUSQU'à  1366px */
/*********** 1920 ************/
/* A partir de 1920px */
@media screen and (min-width: 1920px) {
  .site-header > .col-full {
    grid-template-columns: auto 280px 400px;
    grid-template-areas: "header_logo header_search header_second_nav";
  }
}
/* JUSQU'à 1920px */
@media screen and (max-width: 1920px) {
  .secondary-navigation .menu li > a:link,
  .secondary-navigation .menu li > a:visited,
  .secondary-navigation .menu li > a:active {
    font-size: 0;
    border: 1px solid var(--accentShade3);
    border-radius: var(--borderRadius);
    -webkit-border-radius: var(--borderRadius);
    -moz-border-radius: var(--borderRadius);
    -ms-border-radius: var(--borderRadius);
    -o-border-radius: var(--borderRadius);
    margin-right: 5px;
    min-height: 44px;
  }
  .secondary-navigation .menu li > a:hover {
    border: 1px solid var(--primaryColor);
  }
  /* mon compte */
  .secondary-navigation .menu Li:nth-child(1) > a::before {
    font-size: 42px;
    min-width: 42px;
  }
  /* Contactez-nous */
  .secondary-navigation .menu Li:nth-child(2) > a::before {
    margin: 2px 0px;
    position: relative;
    left: 2px;
  }
  /* Flag langue */
  .secondary-navigation .menu Li:nth-child(3) {
    margin-right: 15px;
  }
  .secondary-navigation .menu Li:nth-child(3) img {
    margin: 10px 6px;
    width: 32px;
  }
}
/* 
version : 1.0
date : 18/01/2024
*/
/* 
┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│	MAIN NAVIGATION MEGA MENU
└────────────────────────────────────────────────────────────────────────────────────────────────────────┘
*/
/*mega-toggle-on*/
/* raz positionnement menu */
#mega-menu-wrap-primary {
  width: 100% !important;
  float: none !important;
  clear: none !important;
  border-top: 1px solid var(--neutralShade3);
}

/************************************************************
  FORMATAGE CSS MENU NORMAL 
************************************************************/
html:not(.mega-menu-primary-off-canvas-open) {
  /* formatage liens 1er niveau*/
  /* fixer taille par défaut de tous les liens comme spécifié dan le plugin */
  /* correction probleme ouverture sous menu actualité lorsqu'on est sur la page configurateur */
  /* Boites panel des sous-menus    
  ////////////////////////////////////////////////////////////*/
  /* Forcer le menu à la largeur max de --hdscreen pour les pages qui n'ont pas la classe .wrapper , c à d les templates de pages qui ne sont pas dans notre thême  */
  /* comme le site alterne avec des éléments en full width 100% et largeur max de --hdscreen ,nous ne pouvons pas donner à mega menu un Id, une classe ou une valeur fixe pour les sous menus*/
  /* bordure du bas du panel */
  /* forcer les li à 100% des sousmenus  
  ============================================================= */
  /* Etat actif dans le sous-menu
  ============================================================= */
  /* 
  ┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
  │	NOS PRODUITS - 1er SOUS-MENU PRINCIPAL
  └────────────────────────────────────────────────────────────────────────────────────────────────────────┘
  */
  /* Titres colonnes par default 
  ////////////////////////////////////////////////////////////*/
  /* Trait orange sous titre colonnes par defaut
  ============================================================= */
  /* Nos univers 1ere colonne
  ////////////////////////////////////////////////////////////*/
  /* liens avec imagette
  ============================================================= */
  /* imagettes
  --------------------------------------------------------------*/
  /* nos produits > parfumerie */
  /* nos produits > cosmetiques */
  /* nos produits > aromatherapie */
  /* Tous nos produits 2eme colonne
  ////////////////////////////////////////////////////////////*/
  /* bordures grises dans le sous menu 
  ============================================================= */
  /* gestion en 3 cols
  ============================================================= */
  /* Liens capots flacons pompes avec imagettes au dessus texte
  ============================================================= */
  /* imagettes centrées au dessus
  ============================================================= */
  /* Tous nos produits > flacons */
  /* Tous nos produits > Pompes */
  /* Tous nos produits > capots */
  /* Tous nos produits > télécharger le catalogue
  ============================================================= */
  /* liens télécharger 
  --------------------------------------------------------------*/
  /* imagettes télécharger catalogue */
  /* Tous nos produits > Tous les produits
  --------------------------------------------------------------*/
  /* Tous nos produits Green Attitude 3eme colonne
  ////////////////////////////////////////////////////////////*/
  /* titre colonne avec bordure verte
  ============================================================= */
  /* CAPOTS éco-responsables 
  ============================================================= */
  /* boite bouchages éco-responsables
  --------------------------------------------------------------*/
  /* titre green attitudes bouchages éco-responsables
  --------------------------------------------------------------*/
  /* FLACONS éco-responsables
  ============================================================= */
  /* boite flacons éco-responsables
  --------------------------------------------------------------*/
  /* titre green attitudes flacons éco-responsables
  --------------------------------------------------------------*/
  /* image flacon éco-responsable 
  --------------------------------------------------------------*/
  /* logo green attitude
  --------------------------------------------------------------*/
  /* Liens Sous Sous-menu
  --------------------------------------------------------------*/
  /* 
  ┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
  │	MIX&MATCH - 2eme SOUS-MENU PRINCIPAL
  └────────────────────────────────────────────────────────────────────────────────────────────────────────┘
  */
  /* Titres colonnes    
  ////////////////////////////////////////////////////////////*/
  /* circle plus 
  ============================================================= */
  /* colonne gauche Configurer    
  ////////////////////////////////////////////////////////////*/
  /* visuel image configurer
  ============================================================= */
  /* colonne droite Personnaliser    
  ////////////////////////////////////////////////////////////*/
  /* grid dans la colonne droite Personnaliser
  ============================================================= */
  /* visuel image personnaliser
  ============================================================= */
  /* marge entre les li
  ============================================================= */
  /* lien sous menu 1er level
  ////////////////////////////////////////////////////////////*/
  /* lien sous menu 2nd level
  ////////////////////////////////////////////////////////////*/
  /* 
  ┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
  │	COVERPLA - 3eme SOUS-MENU PRINCIPAL
  └────────────────────────────────────────────────────────────────────────────────────────────────────────┘
  */
  /* Grille de 8
  ////////////////////////////////////////////////////////////*/
  /* initialisation des li 
  ////////////////////////////////////////////////////////////*/
  /* liens 
  ////////////////////////////////////////////////////////////*/
  /* 
  ┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
  │	ACTUALITES - 4eme SOUS-MENU PRINCIPAL
  └────────────────────────────────────────────────────────────────────────────────────────────────────────┘
  */
  /* Grille de 8
  ////////////////////////////////////////////////////////////*/
  /* initialisation des li 
  ////////////////////////////////////////////////////////////*/
  /* liens 
  ////////////////////////////////////////////////////////////*/
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
  text-transform: uppercase !important;
  font-size: 1.0625rem;
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item li.mega-menu-item > a.mega-menu-link {
  font-size: 15px;
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu.mega-menu-item {
  position: static !important;
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu > ul.mega-sub-menu,
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-flyout ul.mega-sub-menu {
  /*opacity: 0;
  transform: translate(0, 10px);
  transition: opacity 200ms ease-in, transform 200ms ease-in, visibility 200ms ease-in;*/
  padding: 0.9375rem calc((100% - var(--laptop)) / 2) !important;
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu {
  border-bottom: 5px solid #dc9c51;
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.15);
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item {
  width: 100%;
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item > ul.mega-sub-menu > li.mega-menu-item:is(.mega-current-menu-item) > a.mega-menu-link {
  background-color: var(--primaryShade1) !important;
  border: 1px solid var(--primaryColor) !important;
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-our-products) > ul.mega-sub-menu {
  display: grid;
  grid-template-columns: 300px auto 300px;
  grid-gap: 0;
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-our-products) > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
  font-family: var(--fontPrimary_Medium);
  font-size: 1.125rem;
  letter-spacing: -1px;
  margin-bottom: 3.125rem;
  padding: 0.5rem 0;
  background: none;
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-our-products) > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link::before {
  position: absolute;
  content: "";
  height: 2px;
  background-color: var(--primaryColor);
  width: 100%;
  bottom: 0;
  left: 0;
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-our-products) > ul.mega-sub-menu > li.mega-menu-item:is(.our-univers) li.mega-menu-item > a.mega-menu-link {
  color: var(--foregroundColor);
  font-family: inherit;
  font-size: 15px;
  line-height: 1rem;
  text-align: center;
  margin-bottom: 60px;
  padding: 1.5625rem 1.5625rem 1.5625rem 6rem;
  border: 1px solid var(--neutralShade3);
  border-radius: var(--borderRadius);
  -webkit-border-radius: var(--borderRadius);
  -moz-border-radius: var(--borderRadius);
  -ms-border-radius: var(--borderRadius);
  -o-border-radius: var(--borderRadius);
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-our-products) > ul.mega-sub-menu > li.mega-menu-item:is(.our-univers) li.mega-menu-item > a.mega-menu-link:hover {
  background-color: var(--primaryShade1) !important;
  border: 1px solid var(--primaryColor) !important;
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-our-products) > ul.mega-sub-menu > li.mega-menu-item:is(.our-univers) li.mega-menu-item > a.mega-menu-link::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0.5rem;
  width: auto;
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-our-products) > ul.mega-sub-menu > li.mega-menu-item:is(.our-univers) li.mega-menu-item:is(.flagrance) > a.mega-menu-link::before {
  content: url(assets/images/menu/menu_flagrance.webp);
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-our-products) > ul.mega-sub-menu > li.mega-menu-item:is(.our-univers) li.mega-menu-item:is(.cosmetics) > a.mega-menu-link::before {
  content: url(assets/images/menu/menu_cosmetic.webp);
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-our-products) > ul.mega-sub-menu > li.mega-menu-item:is(.our-univers) li.mega-menu-item:is(.aromatherapy) > a.mega-menu-link::before {
  content: url(assets/images/menu/menu_aromatherapy.webp);
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item:is(.all-our-products) {
  border-left: 1px solid var(--neutralShade3);
  border-right: 1px solid var(--neutralShade3);
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-our-products) > ul.mega-sub-menu > li.mega-menu-item:is(.all-our-products) > ul.mega-sub-menu {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 5%;
  grid-row-gap: 50px;
  align-items: start;
  padding: 0 25px;
  margin-top: 3.125rem;
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-our-products) > ul.mega-sub-menu > li.mega-menu-item:is(.all-our-products) li.mega-menu-item:is(.bottles) > a.mega-menu-link,
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-our-products) > ul.mega-sub-menu > li.mega-menu-item:is(.all-our-products) li.mega-menu-item:is(.pumps) > a.mega-menu-link,
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-our-products) > ul.mega-sub-menu > li.mega-menu-item:is(.all-our-products) li.mega-menu-item:is(.caps) > a.mega-menu-link {
  color: var(--foregroundColor);
  font-family: inherit;
  font-size: 15px;
  text-align: center;
  margin: 0;
  padding: 8.5rem 1.5625rem 0.5625rem 1.5625rem;
  max-width: 210px;
  min-width: 150px;
  border: 1px solid var(--neutralShade3);
  border-radius: var(--borderRadius);
  -webkit-border-radius: var(--borderRadius);
  -moz-border-radius: var(--borderRadius);
  -ms-border-radius: var(--borderRadius);
  -o-border-radius: var(--borderRadius);
  position: relative;
  display: block;
  min-height: 200px;
  /* animation des boites centrale avec grossissement
  transition: all 350ms ease-out 0s;
  box-shadow: 0 0 5px 0 rgba(0,0,0,.05);*/
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-our-products) > ul.mega-sub-menu > li.mega-menu-item:is(.all-our-products) li.mega-menu-item:is(.bottles) > a.mega-menu-link:hover,
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-our-products) > ul.mega-sub-menu > li.mega-menu-item:is(.all-our-products) li.mega-menu-item:is(.pumps) > a.mega-menu-link:hover,
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-our-products) > ul.mega-sub-menu > li.mega-menu-item:is(.all-our-products) li.mega-menu-item:is(.caps) > a.mega-menu-link:hover {
  background-color: var(--primaryShade1) !important;
  border: 1px solid var(--primaryColor) !important;
  /* animation des boites centrale avec grossissement
  background-color: var(--primaryShade1) !important;
  border: 1px solid var(--primaryColor) !important;
  box-shadow: 0 0 10px 0 rgba(0,0,0,.05);
  color:var(--foregroundColor);
  cursor: pointer;
  transform: scale(1.03);
  -webkit-transform: scale(1.03);
  -moz-transform: scale(1.03);
  -ms-transform: scale(1.03);
  -o-transform: scale(1.03);	
  */
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-our-products) > ul.mega-sub-menu > li.mega-menu-item:is(.all-our-products) li.mega-menu-item:is(.bottles) > a.mega-menu-link::before,
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-our-products) > ul.mega-sub-menu > li.mega-menu-item:is(.all-our-products) li.mega-menu-item:is(.pumps) > a.mega-menu-link::before,
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-our-products) > ul.mega-sub-menu > li.mega-menu-item:is(.all-our-products) li.mega-menu-item:is(.caps) > a.mega-menu-link::before {
  content: "";
  bottom: 0;
  width: auto;
  position: absolute;
  height: 120px;
  display: block;
  top: 0.625rem;
  left: 50%;
  transform: translate(-50%, 0%);
  -webkit-transform: translate(-50%, 0%);
  -moz-transform: translate(-50%, 0%);
  -ms-transform: translate(-50%, 0%);
  -o-transform: translate(-50%, 0%);
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-our-products) > ul.mega-sub-menu > li.mega-menu-item:is(.all-our-products) li.mega-menu-item:is(.bottles) > a.mega-menu-link::before {
  content: url(assets/images/menu/menu_bottles.webp);
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-our-products) > ul.mega-sub-menu > li.mega-menu-item:is(.all-our-products) li.mega-menu-item:is(.pumps) > a.mega-menu-link::before {
  content: url(assets/images/menu/menu_pumps.webp);
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-our-products) > ul.mega-sub-menu > li.mega-menu-item:is(.all-our-products) li.mega-menu-item:is(.caps) > a.mega-menu-link::before {
  content: url(assets/images/menu/menu_caps.webp);
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-our-products) > ul.mega-sub-menu > li.mega-menu-item:is(.all-our-products) li.mega-menu-item:is(.pdf_download) {
  grid-column: 1/span 2;
  width: 100%;
  /*align-self: end;*/
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-our-products) > ul.mega-sub-menu > li.mega-menu-item:is(.all-our-products) li.mega-menu-item:is(.pdf_download) > a.mega-menu-link {
  color: var(--foregroundColor);
  font-family: inherit;
  font-size: 15px;
  text-align: center;
  margin: 0;
  padding: 1.5625rem 1.5625rem 1.5625rem 6.25rem;
  border: 1px solid var(--neutralShade3);
  border-radius: var(--borderRadius);
  -webkit-border-radius: var(--borderRadius);
  -moz-border-radius: var(--borderRadius);
  -ms-border-radius: var(--borderRadius);
  -o-border-radius: var(--borderRadius);
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-our-products) > ul.mega-sub-menu > li.mega-menu-item:is(.all-our-products) li.mega-menu-item:is(.pdf_download) > a.mega-menu-link:hover {
  background-color: var(--primaryShade1) !important;
  border: 1px solid var(--primaryColor) !important;
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-our-products) > ul.mega-sub-menu > li.mega-menu-item:is(.all-our-products) li.mega-menu-item:is(.pdf_download) > a.mega-menu-link::before {
  position: absolute;
  bottom: -1px;
  left: -1px;
  width: auto;
  border: 1px solid var(--neutralShade3);
  background-image: url("/wp-content/uploads/2025/03/catalogue-illustration-154x154.jpg");
  background-size: 100px 100px;
  display: inline-block;
  width: 100px;
  height: 100px;
  content: "";
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-our-products) > ul.mega-sub-menu > li.mega-menu-item:is(.all-our-products) li.mega-menu-item:is(.all_products) > a.mega-menu-link {
  color: var(--foregroundColor);
  font-family: inherit;
  font-size: 15px;
  text-align: center;
  margin: 0;
  padding: 1.5625rem;
  border: 1px solid var(--neutralShade3);
  border-radius: var(--borderRadius);
  -webkit-border-radius: var(--borderRadius);
  -moz-border-radius: var(--borderRadius);
  -ms-border-radius: var(--borderRadius);
  -o-border-radius: var(--borderRadius);
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-our-products) > ul.mega-sub-menu > li.mega-menu-item:is(.all-our-products) li.mega-menu-item:is(.all_products) > a.mega-menu-link:hover {
  background-color: var(--primaryShade1) !important;
  border: 1px solid var(--primaryColor) !important;
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-our-products) > ul.mega-sub-menu > li.mega-menu-item:is(.greenattitude-products) > a.mega-menu-link::before {
  background-color: var(--secondaryColor);
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-our-products) > ul.mega-sub-menu > li.mega-menu-item:is(.greenattitude-products) li.mega-menu-item:is(.greenattitude-caps) {
  color: var(--foregroundColor);
  font-family: inherit;
  font-size: 0.9375rem;
  text-align: center;
  margin: 3.125rem 0 1rem;
  padding: 0.2rem;
  border: 1px solid var(--neutralShade3);
  border-radius: var(--borderRadius);
  -webkit-border-radius: var(--borderRadius);
  -moz-border-radius: var(--borderRadius);
  -ms-border-radius: var(--borderRadius);
  -o-border-radius: var(--borderRadius);
  min-height: 6.875rem;
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-our-products) > ul.mega-sub-menu > li.mega-menu-item:is(.greenattitude-products) li.mega-menu-item:is(.greenattitude-caps) > a.mega-menu-link {
  margin-bottom: 0.25rem;
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--borderRadius);
  -webkit-border-radius: var(--borderRadius);
  -moz-border-radius: var(--borderRadius);
  -ms-border-radius: var(--borderRadius);
  -o-border-radius: var(--borderRadius);
  text-decoration: none !important;
  color: var(--neutralShade5) !important;
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-our-products) > ul.mega-sub-menu > li.mega-menu-item:is(.greenattitude-products) li.mega-menu-item:is(.greenattitude-caps)::after {
  content: url(assets/images/menu/menu_caps_greenattutude.webp);
  position: absolute;
  bottom: 0;
  left: 0;
  width: auto;
  display: block;
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-our-products) > ul.mega-sub-menu > li.mega-menu-item:is(.greenattitude-products) li.mega-menu-item:is(.greenattitude-bottles) {
  color: var(--foregroundColor);
  font-family: inherit;
  font-size: 15px;
  text-align: center;
  margin: 0;
  padding: 0.2rem;
  border: 1px solid var(--neutralShade3);
  border-radius: var(--borderRadius);
  -webkit-border-radius: var(--borderRadius);
  -moz-border-radius: var(--borderRadius);
  -ms-border-radius: var(--borderRadius);
  -o-border-radius: var(--borderRadius);
  min-height: 12.5rem;
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-our-products) > ul.mega-sub-menu > li.mega-menu-item:is(.greenattitude-products) li.mega-menu-item:is(.greenattitude-bottles) > a.mega-menu-link {
  margin-bottom: 0.25rem;
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--borderRadius);
  -webkit-border-radius: var(--borderRadius);
  -moz-border-radius: var(--borderRadius);
  -ms-border-radius: var(--borderRadius);
  -o-border-radius: var(--borderRadius);
  text-decoration: none !important;
  color: var(--neutralShade5) !important;
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-our-products) > ul.mega-sub-menu > li.mega-menu-item:is(.greenattitude-products) li.mega-menu-item:is(.greenattitude-bottles)::after {
  content: url(assets/images/menu/menu_bottles_greenattutude.webp);
  position: absolute;
  bottom: 0;
  left: 1rem;
  width: auto;
  display: block;
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-our-products) > ul.mega-sub-menu > li.mega-menu-item:is(.greenattitude-products) li.mega-menu-item:is(.greenattitude-bottles)::before {
  content: url(assets/images/menu/logo_greenattitude_complet.svg);
  position: absolute;
  bottom: 0;
  right: 1rem;
  width: 120px;
  display: block;
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-our-products) > ul.mega-sub-menu > li.mega-menu-item:is(.greenattitude-products) ul.mega-sub-menu li.mega-menu-item ul.mega-sub-menu {
  margin-left: 7rem;
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-our-products) > ul.mega-sub-menu > li.mega-menu-item:is(.greenattitude-products) ul.mega-sub-menu li.mega-menu-item ul.mega-sub-menu li.mega-menu-item {
  text-align: left;
  margin: 0;
  padding: 0;
  border: none;
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-our-products) > ul.mega-sub-menu > li.mega-menu-item:is(.greenattitude-products) ul.mega-sub-menu li.mega-menu-item ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link:link,
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-our-products) > ul.mega-sub-menu > li.mega-menu-item:is(.greenattitude-products) ul.mega-sub-menu li.mega-menu-item ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link:active,
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-our-products) > ul.mega-sub-menu > li.mega-menu-item:is(.greenattitude-products) ul.mega-sub-menu li.mega-menu-item ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link:visited {
  padding: 0.25rem;
  border: 1px solid transparent;
  border-radius: var(--borderRadius);
  -webkit-border-radius: var(--borderRadius);
  -moz-border-radius: var(--borderRadius);
  -ms-border-radius: var(--borderRadius);
  -o-border-radius: var(--borderRadius);
  display: inline-block;
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-our-products) > ul.mega-sub-menu > li.mega-menu-item:is(.greenattitude-products) ul.mega-sub-menu li.mega-menu-item ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link:hover,
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-our-products) > ul.mega-sub-menu > li.mega-menu-item:is(.greenattitude-products) ul.mega-sub-menu li.mega-menu-item ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link:focus,
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-our-products) > ul.mega-sub-menu > li.mega-menu-item:is(.greenattitude-products) ul.mega-sub-menu li.mega-menu-item ul.mega-sub-menu li.mega-menu-item:is(.mega-current-menu-item) > a.mega-menu-link {
  background-color: var(--primaryShade1);
  border: 1px solid var(--primaryColor);
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-mixandmatch) > ul.mega-sub-menu {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1px;
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-mixandmatch) > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
  font-family: var(--fontPrimary_SemiBold);
  font-size: 28px;
  line-height: 28px;
  letter-spacing: -1px;
  margin-bottom: 1.875rem;
  display: inline-block;
  background-color: var(--backgroundColor);
  color: var(--foregroundColor);
  line-height: 1rem;
  border: 1px solid transparent;
  border-radius: var(--borderRadius);
  -webkit-border-radius: var(--borderRadius);
  -moz-border-radius: var(--borderRadius);
  -ms-border-radius: var(--borderRadius);
  -o-border-radius: var(--borderRadius);
  padding: 0.5rem;
  text-transform: uppercase;
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-mixandmatch) > ul.mega-sub-menu > li.mega-menu-item:is(.configure)::after {
  content: url(assets/images/icons/circle-plus.svg);
  position: absolute;
  top: 0;
  right: -1.5625rem;
  width: 3.125rem;
  display: block;
  background-color: var(--backgroundColor);
  padding: 22px 0;
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-mixandmatch) > ul.mega-sub-menu > li.mega-menu-item:is(.configure) {
  border-right: 1px solid var(--primaryColor);
  text-align: right;
  padding: 1.875rem 4.375rem 0.9375rem 0.9375rem;
  position: relative;
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-mixandmatch) > ul.mega-sub-menu > li.mega-menu-item:is(.configure) > ul.mega-sub-menu > li.mega-menu-item:is(.mega-configure-visu) > a.mega-menu-link {
  /*content: url(assets/images/menu/menu_configure.webp);*/
  width: fit-content;
  height: auto;
  max-width: 100%;
  margin-left: auto;
  border: 1px solid var(--neutralShade3);
  border-radius: var(--borderRadius);
  -webkit-border-radius: var(--borderRadius);
  -moz-border-radius: var(--borderRadius);
  -ms-border-radius: var(--borderRadius);
  -o-border-radius: var(--borderRadius);
  padding: 46px 20px 20px;
  text-align: center;
  font-weight: 600;
  /* animation avec grossissement
  transition: all 350ms ease-out 0s;
  box-shadow: 0 0 5px 0 rgba(0,0,0,.05);*/
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-mixandmatch) > ul.mega-sub-menu > li.mega-menu-item:is(.configure) > ul.mega-sub-menu > li.mega-menu-item:is(.mega-configure-visu) > a.mega-menu-link:hover {
  background-color: var(--primaryShade1) !important;
  border: 1px solid var(--primaryColor) !important;
  color: var(--foregroundColor);
  cursor: pointer;
  /* animation avec grossissement
  box-shadow: 0 0 10px 0 rgba(0,0,0,.05);
  transform: scale(1.03);
  -webkit-transform: scale(1.03);
  -moz-transform: scale(1.03);
  -ms-transform: scale(1.03);
  -o-transform: scale(1.03);	
  */
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-mixandmatch) > ul.mega-sub-menu > li.mega-menu-item:is(.configure) > ul.mega-sub-menu > li.mega-menu-item:is(.mega-configure-visu) > a.mega-menu-link::before {
  content: url(assets/images/menu/menu_configure.webp);
  position: relative;
  display: block !important;
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-mixandmatch) > ul.mega-sub-menu > li.mega-menu-item:is(.customize) {
  padding: 1.875rem 0.9375rem 0.9375rem 4.375rem;
  position: relative;
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-mixandmatch) > ul.mega-sub-menu > li.mega-menu-item:is(.customize) > ul.mega-sub-menu > li.mega-menu-item:is(.customize-visu) {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 5px;
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-mixandmatch) > ul.mega-sub-menu > li.mega-menu-item:is(.customize) > ul.mega-sub-menu > li.mega-menu-item:is(.customize-visu) > a.mega-menu-link {
  content: url(assets/images/menu/menu_customize.webp);
  width: auto;
  height: auto;
  max-width: 100%;
  margin-right: auto;
  border: 1px solid var(--neutralShade3);
  border-radius: var(--borderRadius);
  -webkit-border-radius: var(--borderRadius);
  -moz-border-radius: var(--borderRadius);
  -ms-border-radius: var(--borderRadius);
  -o-border-radius: var(--borderRadius);
  padding: 46px 20px;
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-mixandmatch) > ul.mega-sub-menu > li.mega-menu-item:is(.customize) > ul.mega-sub-menu > li.mega-menu-item:is(.customize-visu) > ul.mega-sub-menu > li.mega-menu-item:is(.customize-bottles) {
  margin-bottom: 10px;
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-mixandmatch) > ul.mega-sub-menu > li.mega-menu-item:is(.customize) > ul.mega-sub-menu > li.mega-menu-item:is(.customize-visu) > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
  font-family: var(--fontPrimary_Medium);
  color: var(--foregroundColor) !important;
  font-size: 1.125rem !important;
  letter-spacing: -1px;
  margin-bottom: 0.625rem;
  padding: 0.5rem 0;
  border: 1px solid transparent;
  border-radius: var(--borderRadius);
  -webkit-border-radius: var(--borderRadius);
  -moz-border-radius: var(--borderRadius);
  -ms-border-radius: var(--borderRadius);
  -o-border-radius: var(--borderRadius);
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-mixandmatch) > ul.mega-sub-menu > li.mega-menu-item:is(.customize) > ul.mega-sub-menu > li.mega-menu-item:is(.customize-visu) > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link::before {
  position: absolute;
  content: "";
  height: 2px;
  background-color: var(--primaryColor);
  width: 100%;
  bottom: 0;
  left: 0;
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-mixandmatch) > ul.mega-sub-menu > li.mega-menu-item:is(.customize) > ul.mega-sub-menu > li.mega-menu-item:is(.customize-visu) > ul.mega-sub-menu > li.mega-menu-item > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:link,
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-mixandmatch) > ul.mega-sub-menu > li.mega-menu-item:is(.customize) > ul.mega-sub-menu > li.mega-menu-item:is(.customize-visu) > ul.mega-sub-menu > li.mega-menu-item > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:active,
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-mixandmatch) > ul.mega-sub-menu > li.mega-menu-item:is(.customize) > ul.mega-sub-menu > li.mega-menu-item:is(.customize-visu) > ul.mega-sub-menu > li.mega-menu-item > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:visited {
  padding: 0.125rem 0.5rem;
  font-family: var(--fontPrimary);
  border: 1px solid transparent;
  border-radius: var(--borderRadius);
  -webkit-border-radius: var(--borderRadius);
  -moz-border-radius: var(--borderRadius);
  -ms-border-radius: var(--borderRadius);
  -o-border-radius: var(--borderRadius);
  display: inline-block;
  color: var(--foregroundColor);
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-mixandmatch) > ul.mega-sub-menu > li.mega-menu-item:is(.customize) > ul.mega-sub-menu > li.mega-menu-item:is(.customize-visu) > ul.mega-sub-menu > li.mega-menu-item > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover,
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-mixandmatch) > ul.mega-sub-menu > li.mega-menu-item:is(.customize) > ul.mega-sub-menu > li.mega-menu-item:is(.customize-visu) > ul.mega-sub-menu > li.mega-menu-item > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:focus,
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-mixandmatch) > ul.mega-sub-menu > li.mega-menu-item:is(.customize) > ul.mega-sub-menu > li.mega-menu-item:is(.customize-visu) > ul.mega-sub-menu > li.mega-menu-item > ul.mega-sub-menu > li.mega-menu-item:is(.mega-current-menu-item) > a.mega-menu-link {
  background-color: var(--primaryShade1);
  border: 1px solid var(--primaryColor);
  color: var(--foregroundColor);
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu_coverpla) > ul.mega-sub-menu {
  display: grid;
  grid-template-columns: repeat(8, auto);
  /*grid-template-rows: auto;*/
  padding-top: 2.375rem;
  justify-content: center;
  align-content: center;
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu_coverpla) > ul.mega-sub-menu > li.mega-menu-item {
  align-self: center;
  justify-self: center;
  text-align: center;
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu_coverpla) > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:link,
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu_coverpla) > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:active,
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu_coverpla) > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:visited {
  padding: 0.125rem 0.5rem;
  font-family: var(--fontPrimary);
  border: 1px solid transparent;
  border-radius: var(--borderRadius);
  -webkit-border-radius: var(--borderRadius);
  -moz-border-radius: var(--borderRadius);
  -ms-border-radius: var(--borderRadius);
  -o-border-radius: var(--borderRadius);
  display: inline-block;
  color: var(--foregroundColor);
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu_coverpla) > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover,
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu_coverpla) > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:focus,
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-mixandmatch) > ul.mega-sub-menu > li.mega-menu-item:is(.customize) > ul.mega-sub-menu > li.mega-menu-item:is(.customize-visu) > ul.mega-sub-menu > li.mega-menu-item > ul.mega-sub-menu > li.mega-menu-item:is(.mega-current-menu-item) > a.mega-menu-link {
  background-color: var(--primaryShade1);
  border: 1px solid var(--primaryColor);
  color: var(--foregroundColor);
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-news) > ul.mega-sub-menu {
  display: grid;
  grid-template-columns: repeat(8, auto);
  /*grid-template-rows: auto;*/
  padding-top: 2.375rem;
  justify-content: center;
  align-content: center;
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-news) > ul.mega-sub-menu > li.mega-menu-item {
  align-self: center;
  justify-self: center;
  text-align: center;
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-news) > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:link,
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-news) > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:active,
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-news) > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:visited {
  padding: 0.125rem 0.5rem;
  font-family: var(--fontPrimary);
  border: 1px solid transparent;
  border-radius: var(--borderRadius);
  -webkit-border-radius: var(--borderRadius);
  -moz-border-radius: var(--borderRadius);
  -ms-border-radius: var(--borderRadius);
  -o-border-radius: var(--borderRadius);
  display: inline-block;
  color: var(--foregroundColor);
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-news) > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:link:hover,
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-news) > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:active:hover,
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-news) > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:visited:hover {
  background-color: var(--primaryShade1);
  border: 1px solid var(--primaryColor);
  color: var(--foregroundColor);
}

/* FIN FORMATAGE MENU NORMAL */
/************************************************************
  FORMATAGE CSS MENU MOBILE 
************************************************************/
html:is(.mega-menu-primary-off-canvas-open) {
  /* 
  ┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
  │	GLOBAL - SOUS-MENU MOBILE
  └────────────────────────────────────────────────────────────────────────────────────────────────────────┘
  */
  /* liens en général
  ////////////////////////////////////////////////////////////*/
  /* raz rollover des liens par defaut */
  /*Reset marge des derniers niveaux de ul */
  /* LI de 1er niveau du menu en aff/masque */
  /* A de 1er niveau en aff/masque */
  /* A affiché ouvert de 1er niveau */
  /* 
  ┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
  │	NOS PRODUITS - 1er SOUS-MENU MOBILE
  └────────────────────────────────────────────────────────────────────────────────────────────────────────┘
  */
  /* Titres colonnes par default 
  ////////////////////////////////////////////////////////////*/
  /* Trait orange sous titre colonnes par defaut
  ============================================================= */
  /* 
  ┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
  │	MIX&MATCH - 2eme SOUS-MENU MOBILE
  └────────────────────────────────────────────────────────────────────────────────────────────────────────┘
  */
  /* Titres colonnes par default 
  ////////////////////////////////////////////////////////////*/
  /* Trait orange sous titre colonnes par defaut
  ============================================================= */
  /* Masquer bloc pour le visuel de décors flacon en version mobile*/
  /* 
  ┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
  │	COVERPLA - 3eme SOUS-MENU MOBILE
  └────────────────────────────────────────────────────────────────────────────────────────────────────────┘
  */
  /* Liens
  ////////////////////////////////////////////////////////////*/
  /* 
  ┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
  │	ACTUALITES - 4eme SOUS-MENU MOBILE
  └────────────────────────────────────────────────────────────────────────────────────────────────────────┘
  */
  /* Liens
  ////////////////////////////////////////////////////////////*/
}
html:is(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover,
html:is(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:focus,
html:is(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover,
html:is(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:focus {
  color: var(--primaryColor);
}
html:is(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item ul.mega-sub-menu li.mega-menu-item ul.mega-sub-menu {
  margin: 0;
}
html:is(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item {
  border-top: 1px solid var(--neutralShade3);
}
html:is(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
  color: var(--foregroundColor);
  font-weight: 600;
  background: var(--neutralShade1);
  padding-left: 20px;
}
html:is(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover {
  background-color: var(--primaryShade1);
}
html:is(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link {
  color: var(--canvasColor);
  background: var(--primaryColor);
  padding-left: 20px;
}
html:is(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-our-products) > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
  font-family: var(--fontPrimary_Medium);
  font-size: 1.25rem;
  letter-spacing: -1px;
  padding: 0.5rem 0;
  background: none;
}
html:is(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-our-products) > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link::before {
  position: absolute;
  content: "";
  height: 2px;
  background-color: var(--primaryColor);
  width: 100%;
  bottom: 0;
  left: 0;
}
html:is(.mega-menu-primary-off-canvas-open) .mega-greenattitude-caps > a.mega-menu-link,
html:is(.mega-menu-primary-off-canvas-open) .mega-greenattitude-bottles > a.mega-menu-link,
html:is(.mega-menu-primary-off-canvas-open) .mega-customize-bottles > a.mega-menu-link,
html:is(.mega-menu-primary-off-canvas-open) .mega-customize-caps > a.mega-menu-link {
  color: var(--neutralShade4) !important;
  text-decoration: none !important;
  font-weight: 600;
}
html:is(.mega-menu-primary-off-canvas-open) .mega-greenattitude-caps > a.mega-menu-link + ul.mega-sub-menu,
html:is(.mega-menu-primary-off-canvas-open) .mega-greenattitude-bottles > a.mega-menu-link + ul.mega-sub-menu,
html:is(.mega-menu-primary-off-canvas-open) .mega-customize-bottles > a.mega-menu-link + ul.mega-sub-menu,
html:is(.mega-menu-primary-off-canvas-open) .mega-customize-caps > a.mega-menu-link + ul.mega-sub-menu {
  border: 1px solid var(--neutralShade4) !important;
  border-radius: var(--borderRadius) !important;
  -webkit-border-radius: var(--borderRadius) !important;
  -moz-border-radius: var(--borderRadius) !important;
  -ms-border-radius: var(--borderRadius) !important;
  -o-border-radius: var(--borderRadius) !important;
  padding: 0.3125rem !important;
  margin-bottom: 0.9375rem !important;
}
html:is(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-mixandmatch) > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
  font-family: var(--fontPrimary_Medium);
  font-size: 1.125rem;
  letter-spacing: -1px;
  padding: 0.5rem 0;
  background: none;
}
html:is(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.submenu-mixandmatch) > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link::before {
  position: absolute;
  content: "";
  height: 2px;
  background-color: var(--primaryColor);
  width: 100%;
  bottom: 0;
  left: 0;
}
html:is(.mega-menu-primary-off-canvas-open) .customize-visu > a.mega-menu-link {
  display: none !important;
}
html:is(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.mega-submenu_coverpla) > ul.mega-sub-menu > li.mega-menu-item {
  padding: 0 15px;
}
html:is(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.mega-submenu_coverpla) > ul.mega-sub-menu > li.mega-menu-item.mega-menu-item-type-widget {
  display: none;
}
html:is(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:is(.mega-submenu-news) > ul.mega-sub-menu > li.mega-menu-item {
  padding: 0 15px;
}

/* FIN FORMATAGE MENU MOBILE */
/* 
CSS footer 
version : 1.0
date : 09/11/2023
*/
/* 
┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│	FOOTER
└────────────────────────────────────────────────────────────────────────────────────────────────────────┘
*/
footer.site-footer {
  padding: 5rem 4.375rem 0 3.125rem;
  text-align: left;
  color: var(--canvasColor);
  background: linear-gradient(rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.95) 45%, rgb(0, 0, 0) 85%, rgb(0, 0, 0) 100%), url(assets/images/pattern_coverpla_breadcrumb.webp);
}

footer.site-footer .site-info,
.site-footer .site-info {
  display: flex;
  justify-content: space-around;
}

footer.site-footer .col-full,
.site-footer .col-full {
  max-width: var(--hdscreen);
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  box-sizing: content-box;
}

footer.site-footer .block:not(.footer-widget-4, .footer-widget-3) a:not(.button):not(.components-button) {
  color: var(--primaryColor);
  display: block;
  width: fit-content;
  font-family: var(--fontPrimary);
  font-weight: unset;
  text-decoration: none;
  -webkit-transition: background-size 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition: background-size 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
  background-image: -webkit-gradient(linear, left top, left bottom, from(currentColor), color-stop(98%, currentColor));
  background-image: linear-gradient(to bottom, currentColor 0%, currentColor 98%);
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: left 100%;
  overflow: visible !important;
}

footer.site-footer .block:not(.footer-widget-4, .footer-widget-3) a:not(.button):not(.components-button):hover,
.site-footer .block:not(.footer-widget-4, .footer-widget-3) a:not(.button):not(.components-button):hover {
  color: var(--canvasColor);
  text-decoration: none;
  background-size: 100% 1px;
  padding-bottom: 0;
  -webkit-transition: background-size 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition: background-size 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
  background-image: -webkit-gradient(linear, left top, left bottom, from(currentColor), color-stop(98%, currentColor));
  background-image: linear-gradient(to bottom, currentColor 0%, currentColor 98%);
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: left 100%;
  overflow: visible !important;
  text-decoration: none !important;
  background-size: 100% 1px;
}

.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6,
.site-footer .widget .widget-title,
.site-footer .widget .widgettitle {
  color: var(--canvasColor);
  font-size: 1.41575em;
  letter-spacing: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  padding: 0;
  margin-bottom: 40px;
  font-weight: 300;
  position: relative;
}

.site-footer .widget .widget-title::after,
.site-footer .widget .widgettitle::after {
  position: absolute;
  content: "";
  height: 2px;
  background-color: var(--primaryColor);
  width: 6.25rem;
  bottom: -1.25rem;
  left: 0;
}

footer.site-footer img,
.site-footer img {
  width: 100%;
  height: auto;
  max-width: 100%;
}

footer.site-footer .button {
  width: 100%;
}

/* lien nmi */
.site-footer a:not(.button):not(.components-button) {
  color: var(--primaryColor);
  text-decoration: none;
}
.site-footer a:not(.button):not(.components-button):hover {
  color: var(--canvasColor);
  text-decoration: underline;
}

/* Global et commun
============================================================= */
/* 
version : 1.0
date : 09/11/2023
*/
/* 
┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│	FORMS - LINKS 
└────────────────────────────────────────────────────────────────────────────────────────────────────────┘
*/
::selection {
  color: var(--canvasColor);
  background-color: var(--primaryColor);
}

input:disabled ~ * {
  opacity: 0.3;
  user-select: none;
  pointer-events: none;
}

/*
Styles pour Select2.js select remplacement installé par défaut
////////////////////////////////////////////////////////////*/
.select2-container--default .select2-selection--single {
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.125);
  height: 50px;
  font-size: 16px;
  border: 1px solid var(--neutralShade3);
  width: 100%;
  padding: 12px;
  font-family: "Montserrat";
  border-radius: var(--borderRadius);
  color: var(--foregroundColor);
  background: var(--backgroundColor);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 50px;
}

.select2-container--default .select2-results__option--highlighted[data-selected],
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--primaryColor);
  color: var(--canvasColor);
}

/* checkboxes & radio buttons
///////////////////////////////////////////////////////////////*/
/* Si le navigateur prend en charge au moins l'une des propriétés */
@supports (-webkit-appearance: none) or (-moz-appearance: none) {
  input[type=checkbox],
  input[type=radio] {
    --active: var(--primaryColor);
    --active-inner: var(--canvasColor);
    --focus: var(--primaryColor);
    --border: var(--primaryShade2);
    --border-hover: var(--primaryColor);
    --background: var(--canvasColor);
    --disabled:var(--accentShade1);
    --disabled-inner: var(--accentShade3);
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 20px;
    outline: none;
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin: 0;
    cursor: pointer;
    border: 1px solid var(--bc, var(--border));
    background: var(--b, var(--background));
    transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
  }
  input[type=checkbox]:after,
  input[type=radio]:after {
    content: "";
    display: block;
    left: 0;
    top: 0;
    position: absolute;
    transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
  }
  input[type=checkbox]:checked,
  input[type=radio]:checked {
    --b: var(--active);
    --bc: var(--active);
    --d-o: .3s;
    --d-t: .6s;
    --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
  }
  input[type=checkbox]:disabled,
  input[type=radio]:disabled {
    --b: var(--disabled);
    cursor: not-allowed;
    opacity: 0.9;
  }
  input[type=checkbox]:disabled:checked,
  input[type=radio]:disabled:checked {
    --b: var(--disabled-inner);
    --bc: var(--border);
  }
  input[type=checkbox]:disabled + label,
  input[type=radio]:disabled + label {
    cursor: not-allowed;
  }
  input[type=checkbox]:hover:not(:checked):not(:disabled),
  input[type=radio]:hover:not(:checked):not(:disabled) {
    --bc: var(--border-hover);
  }
  input[type=checkbox]:focus,
  input[type=radio]:focus {
    box-shadow: 0 0 0 var(--focus);
  }
  input[type=checkbox]:not(.switch),
  input[type=radio]:not(.switch) {
    width: 21px;
  }
  input[type=checkbox]:not(.switch):after,
  input[type=radio]:not(.switch):after {
    opacity: var(--o, 0);
  }
  input[type=checkbox]:not(.switch):checked,
  input[type=radio]:not(.switch):checked {
    --o: 1;
  }
  input[type=checkbox] + label,
  input[type=radio] + label {
    /*font-size: 14px;*/
    line-height: 20px;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    margin-left: 4px;
  }
  input[type=checkbox]:not(.switch) {
    border-radius: 7px;
  }
  input[type=checkbox]:not(.switch):after {
    width: 5px;
    height: 9px;
    border: 3px solid var(--active-inner);
    border-top: 0;
    border-left: 0;
    left: 6px;
    top: 2px;
    transform: rotate(var(--r, 20deg));
  }
  input[type=checkbox]:not(.switch):checked {
    --r: 43deg;
  }
  input[type=checkbox].switch {
    width: 38px;
    border-radius: 11px;
  }
  input[type=checkbox].switch:after {
    left: 2px;
    top: 2px;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    background: var(--ab, var(--border));
    transform: translateX(var(--x, 0));
  }
  input[type=checkbox].switch:checked {
    --ab: var(--active-inner);
    --x: 17px;
  }
  input[type=checkbox].switch:disabled:not(:checked):after {
    opacity: 0.6;
  }
  input[type=radio] {
    border-radius: 50%;
  }
  input[type=radio]:after {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--active-inner);
    opacity: 0;
    transform: scale(var(--s, 0.7));
    -webkit-transform: scale(var(--s, 0.7));
    -moz-transform: scale(var(--s, 0.7));
    -ms-transform: scale(var(--s, 0.7));
    -o-transform: scale(var(--s, 0.7));
  }
  input[type=radio]:checked {
    --s: .5;
  }
}
/* Buttons & links
///////////////////////////////////////////////////////////////*/
a {
  cursor: pointer;
  color: var(--primaryColor);
  transition: 0.2s ease;
}
a:hover, a.hover {
  color: var(--primaryShade5);
  transition: 0.2s ease;
  text-decoration: underline;
}
a.primary {
  color: var(--primaryColor);
}
a.primary:hover, a.primary.hover {
  color: var(--primaryShade5);
}
a.secondary {
  color: var(--secondaryColor);
}
a.secondary:hover, a.secondary.hover {
  color: var(--secondaryShade5);
}

.animatedLink {
  text-decoration: none;
  background-image: linear-gradient(to right, currentColor 50%, hsla(var(--primaryColor), var(--accent2Color), var(--secondaryColor), 0.2) 50%);
  background-size: 200% 1px;
  background-repeat: no-repeat;
  background-position: 100% 100%;
  transition: background-position 0.2s;
}

.animatedLink:hover {
  background-position: 0% 100%;
  text-decoration: none;
}

button,
input[type=button],
input[type=reset],
input[type=submit],
.button,
.wc-block-grid__products .wc-block-grid__product .wp-block-button__link,
.added_to_cart {
  border: 1px solid var(--primaryColor);
  border-radius: var(--borderRadius);
  -webkit-border-radius: var(--borderRadius);
  -moz-border-radius: var(--borderRadius);
  -ms-border-radius: var(--borderRadius);
  -o-border-radius: var(--borderRadius);
  outline: none;
  background: var(--primaryColor);
  color: var(--backgroundColor);
  cursor: pointer;
  padding: 1.25rem;
  text-decoration: none;
  text-transform: uppercase;
  width: auto;
  position: relative;
  text-shadow: none;
  display: inline-block;
  text-align: center;
  display: inline-block;
  transition: 0.2s ease;
  font-weight: 600;
}

button:hover, input[type=button]:hover,
input[type=reset]:hover,
input[type=submit]:hover,
.button:hover,
.widget a.button:hover {
  background-color: var(--primaryShade1);
  border-color: var(--primaryColor);
  color: var(--foregroundColor);
  text-decoration: none;
}

a.button,
input.button,
button {
  outline: none;
  width: auto;
  text-align: center;
  text-transform: uppercase;
  display: inline-block;
  padding: 20px;
  cursor: pointer !important;
  border-radius: var(--borderRadius);
  background: var(--primaryColor);
  border: 1px solid transparent;
  color: var(--backgroundColor);
  position: relative;
  top: 0;
  transition: 0.2s ease;
  text-decoration: none;
  font-weight: 600;
}
a.button.fw,
input.button.fw,
button.fw {
  width: 100%;
}
a.button:hover, a.button.hover,
input.button:hover,
input.button.hover,
button:hover,
button.hover {
  background-color: var(--primaryShade1);
  border-color: var(--primaryColor);
  color: var(--foregroundColor);
  text-decoration: none;
}
a.button:active, a.button.active,
input.button:active,
input.button.active,
button:active,
button.active {
  background-color: var(--primaryShade1);
  border-color: var(--primaryColor);
  color: var(--foregroundColor);
}
a.button.disabled,
input.button.disabled,
button.disabled {
  opacity: 0.4;
  user-select: none;
  pointer-events: none;
}
a.button.medium,
input.button.medium,
button.medium {
  padding: 15px 18px;
  width: auto;
  margin-right: 20px;
  margin-bottom: 20px;
}
a.button.small,
input.button.small,
button.small {
  padding: 10px 12px;
  width: auto;
  font-size: 14px;
  font-weight: 500;
}
a.button.secondary,
input.button.secondary,
button.secondary {
  background: var(--secondaryColor);
}
a.button.secondary:hover, a.button.secondary:active, a.button.secondary:focus, a.button.secondary.active,
input.button.secondary:hover,
input.button.secondary:active,
input.button.secondary:focus,
input.button.secondary.active,
button.secondary:hover,
button.secondary:active,
button.secondary:focus,
button.secondary.active {
  background-color: var(--secondaryShade1);
  border-color: var(--secondaryColor);
  color: var(--foregroundColor);
}
a.button.accent,
input.button.accent,
button.accent {
  background: var(--accentColor);
}
a.button.accent:hover, a.button.accent:active, a.button.accent:focus, a.button.accent.active,
input.button.accent:hover,
input.button.accent:active,
input.button.accent:focus,
input.button.accent.active,
button.accent:hover,
button.accent:active,
button.accent:focus,
button.accent.active {
  color: var(--foregroundColor) !important;
  background: var(--accentShade1) !important;
}
a.button.accent2,
input.button.accent2,
button.accent2 {
  background: var(--accent2Color);
}
a.button.accent2:hover, a.button.accent2:active, a.button.accent2:focus, a.button.accent2.active,
input.button.accent2:hover,
input.button.accent2:active,
input.button.accent2:focus,
input.button.accent2.active,
button.accent2:hover,
button.accent2:active,
button.accent2:focus,
button.accent2.active {
  color: var(--canvasColor) !important;
  background: var(--accent2Shade4) !important;
}
a.button.accent3,
input.button.accent3,
button.accent3 {
  background: var(--accent3Color);
}
a.button.accent3:hover, a.button.accent3:active, a.button.accent3:focus, a.button.accent3.active,
input.button.accent3:hover,
input.button.accent3:active,
input.button.accent3:focus,
input.button.accent3.active,
button.accent3:hover,
button.accent3:active,
button.accent3:focus,
button.accent3.active {
  color: var(--canvasColor) !important;
  background: var(--accent3Shade4) !important;
}

/* boutons dans les widgets
============================================================= */
.widget a.button {
  background: var(--primaryColor) !important;
  border: 1px solid transparent !important;
  color: var(--canvasColor) !important;
}
.widget a.button:hover, .widget a.button.hover {
  background-color: var(--primaryShade1) !important;
  border-color: var(--primaryColor) !important;
  color: var(--foregroundColor) !important;
}

/* animation bouton
============================================================= */
.pulsation {
  animation: pulsation_bouton 2s ease-out infinite forwards;
}

.pulsation:hover {
  animation: pulsation_bouton 0;
  -webkit-animation: pulsation_bouton 0;
}

@keyframes pulsation_bouton {
  from {
    box-shadow: 0 0 0 -3px transparent, 0 0 0 0 var(--primaryColor);
  }
  to {
    box-shadow: 0 0 0 8px transparent, 0 0 0 8px transparent;
  }
}
/*inputs
///////////////////////////////////////////////////////////////*/
.input__wrapper {
  margin-bottom: 30px;
}

.label-form {
  font-weight: 500;
  display: block;
  margin-bottom: 5px;
}

input[type=text],
input[type=number],
input[type=email],
input[type=tel],
input[type=url],
input[type=password],
input[type=search],
textarea,
.input-text {
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.125);
  height: 50px;
  font-size: 16px;
  border: 1px solid var(--neutralShade3);
  width: 100%;
  padding: 12px;
  font-family: "Montserrat";
  border-radius: var(--borderRadius);
  color: var(--foregroundColor);
  background: var(--backgroundColor);
}
input[type=text]:focus, input[type=text].active,
input[type=number]:focus,
input[type=number].active,
input[type=email]:focus,
input[type=email].active,
input[type=tel]:focus,
input[type=tel].active,
input[type=url]:focus,
input[type=url].active,
input[type=password]:focus,
input[type=password].active,
input[type=search]:focus,
input[type=search].active,
textarea:focus,
textarea.active,
.input-text:focus,
.input-text.active {
  outline: none;
  border-color: var(--primaryColor);
  background: var(--backgroundColor);
}
input[type=text]:disabled,
input[type=number]:disabled,
input[type=email]:disabled,
input[type=tel]:disabled,
input[type=url]:disabled,
input[type=password]:disabled,
input[type=search]:disabled,
textarea:disabled,
.input-text:disabled {
  cursor: not-allowed;
  background: var(--neutralShade1);
  opacity: 0.6;
}

textarea {
  resize: vertical;
  min-height: 117px;
}

select {
  height: 45px;
  padding: 8px 12px;
  cursor: pointer;
}
select option {
  font-weight: 300;
}

.input__validator {
  position: relative;
}
.input__validator__status {
  position: absolute;
  border-radius: 50%;
  background: purple;
  width: 30px;
  height: 30px;
  right: 10px;
  top: 10px;
}
.input__validator__status::before, .input__validator__status::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 18px;
  border-radius: 40px;
  background: var(--backgroundColor);
}

.input-error input,
.input-error select,
.input-error textarea {
  border-color: var(--accent3Color);
}
.input-error .feedback-form {
  color: var(--accent3Shade3);
}
.input-error .input__validator__status {
  background: var(--accent3Color);
}
.input-error .input__validator__status::before {
  transform: rotate(45deg) translateY(-5.5px) translateX(13.5px);
}
.input-error .input__validator__status::after {
  transform: rotate(-45deg) translateY(13.5px) translateX(5.5px);
}

.input-success input,
.input-success select,
.input-success textarea {
  border-color: var(--accent2Color);
}
.input-success .feedback-form {
  color: var(--accent2Shade4);
}
.input-success .input__validator__status {
  background: var(--accent2Color);
}
.input-success .input__validator__status::before {
  transform: rotate(45deg) translateY(-6px) translateX(16px);
}
.input-success .input__validator__status::after {
  height: 7px;
  transform: rotate(-45deg) translateY(16px) translateX(-5px);
}

.feedback-form {
  margin-top: 5px;
  color: var(--neutralShade6);
}

/* suppression outline au focus
============================================================= */
a:focus, input:focus, textarea:focus, button:focus {
  outline: none;
  outline-color: unset;
}

/* badges
///////////////////////////////////////////////////////////////*/
.badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 50px;
  font-weight: 500;
  text-transform: uppercase;
  margin: 5px 10px 5px 0;
  line-height: 1;
}

.alert {
  margin-bottom: 15px;
  display: block;
  padding: 10px 15px;
  border-radius: var(--borderRadius);
  font-weight: 500;
  position: relative;
  cursor: pointer;
}
.alert:before, .alert:after {
  content: "";
  position: absolute;
  width: 4px;
  height: 16px;
  border-radius: 40px;
  right: 30px;
  top: 8px;
}
.alert:before {
  transform: rotate(45deg) translateY(-5.5px) translateX(13.5px);
}
.alert:after {
  transform: rotate(-45deg) translateY(13.5px) translateX(5.5px);
}

.status-primary {
  background: var(--primaryShade1);
  color: var(--primaryShade4);
}
.status-primary:before, .status-primary:after {
  background: var(--primaryShade4);
}

.status-secondary {
  background: var(--secondaryShade1);
  color: var(--secondaryShade5);
}
.status-secondary:before, .status-secondary:after {
  background: var(--secondaryShade4);
}

.status-info {
  background: var(--accentShade1);
  color: var(--accentShade4);
}
.status-info:before, .status-info:after {
  background: var(--accentShade4);
}

.status-success {
  background: var(--accent2Shade1);
  color: var(--accent2Shade4);
}
.status-success:before, .status-success:after {
  background: var(--accent2Shade4);
}

.status-error {
  background: var(--accent3Shade1);
  color: var(--accent3Shade4);
}
.status-error:before, .status-error:after {
  background: var(--accent3Shade4);
}

/* tooltips
///////////////////////////////////////////////////////////////*/
.tooltip {
  cursor: pointer;
  position: relative;
  display: block;
  width: 100%;
  text-align: center;
  z-index: 10;
}
.tooltip span {
  border-bottom: 1px dotted;
}
.tooltip:after {
  content: attr(data-tooltip);
  background: var(--neutralShade2);
  max-width: 90%;
  width: auto;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  opacity: 0;
  height: auto;
  font-size: 14px;
  padding: 10px;
  border-radius: var(--borderRadius);
  color: var(--foregroundColor);
  text-align: center;
}
.tooltip.dark:after {
  background: var(--neutralShade7);
  color: var(--backgroundColor);
}
.tooltip.top:after {
  bottom: 80%;
  transition: opacity 0.3s ease 0.3s, bottom 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;
}
.tooltip.top:hover:after, .tooltip.top.hovered:after {
  bottom: 130%;
  opacity: 1;
}
.tooltip.bottom:after {
  top: 80%;
  transition: opacity 0.3s ease 0.3s, top 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;
}
.tooltip.bottom:hover:after, .tooltip.bottom.hovered:after {
  top: 130%;
  opacity: 1;
}

/*spinner
///////////////////////////////////////////////////////////////*/
.spinner + label {
  font-size: 14px;
  font-weight: 500;
  margin-top: 8px;
  display: inline-block;
  text-transform: uppercase;
  color: var(--primaryShade4);
}

.spinner-1 .spinner {
  max-width: 50px;
  margin: auto;
  height: 20px;
  position: relative;
}
.spinner-1 .spinner:after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  left: -10%;
  background: var(--primaryColor);
  animation: spinnerLeftRight 0.6s infinite;
}
.spinner-1 .spinner:before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  left: -10%;
  background: var(--primaryShade2);
  opacity: 1;
  animation: spinnerLeftRight 0.6s infinite 0.06s;
}

.spinner-2 .spinner {
  width: 90%;
  margin: auto;
  height: 10px;
  background: var(--neutralShade2);
  border-radius: 40px;
  position: relative;
}
.spinner-2 .spinner:before {
  content: "";
  border-radius: inherit;
  position: absolute;
  width: 10%;
  height: 100%;
  left: 0;
  background: var(--primaryColor);
  opacity: 1;
  animation: spinnerFill 5s infinite;
}

@keyframes spinnerLeftRight {
  0% {
    left: 85%;
  }
  50% {
    left: -10%;
  }
  100% {
    left: 85%;
  }
}
@keyframes spinnerFill {
  0% {
    width: 2%;
  }
  50%, 100% {
    width: 100%;
  }
}
@media (max-width: 992px) {
  main.styletile {
    grid: repeat(9, fit-content(300px))/100%;
    grid-template-areas: "colors" "typography" "buttons" "links" "inputs" "badges" "tooltips" "alerts" "loading";
  }
  main.styletile > section:not(:last-child) {
    border: 1px solid var(--accentColor);
    border-width: 0 0 1px;
  }
  main.styletile > section:last-child {
    border-width: 0;
  }
  .typography,
  .buttons-wrapper {
    padding-bottom: 40px;
  }
  .tooltips {
    padding-bottom: 60px;
  }
  .inputs-selects .inputs,
  .inputs-selects .textarea-select {
    grid-column: span 6;
  }
  .inputs-selects .toggle-buttons,
  .inputs-selects .checkboxes,
  .inputs-selects .radio-buttons {
    grid-column: span 3;
  }
}
/* Liens tags
///////////////////////////////////////////////////////////////*/
.tag_link:active,
.tag_link:visited,
.tag_link:link {
  color: var(--accentColor);
  border: 1px solid var(--accentColor);
  border-radius: var(--borderRadius);
  -webkit-border-radius: var(--borderRadius);
  -moz-border-radius: var(--borderRadius);
  -ms-border-radius: var(--borderRadius);
  -o-border-radius: var(--borderRadius);
  display: inline-block;
  padding: 4px 12px;
  font-size: 1rem;
  font-weight: 400;
}

.tag_link:hover {
  border: 1px solid var(--primaryColor);
  background-color: var(--primaryShade1);
  color: var(--foregroundColor) !important;
  text-decoration: none;
}

/* 
version : 1.0
date : 09/11/2023
*/
/* 
┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│	MAIN LAYOUT COMMON
└────────────────────────────────────────────────────────────────────────────────────────────────────────┘
*/
body {
  background: var(--canvasColor);
  color: var(--foregroundColor);
  font-family: var(--fontPrimary);
  font-weight: 300;
  /* S'il n'y a pas d'unité, cela
     représente un facteur multiplicateur
     de la taille de la police appliquée à
     l'élément ou 150% */
  line-height: 1.5;
  font-size: 1.125rem;
  text-align: center;
  transition: all 0.3s ease;
}

.site-main {
  margin: 0 !important;
  padding: 0 !important;
}

.hidden {
  display: none;
}

/* TEMPLATE DES PAGES PAR DEFAUT (max-width)
///////////////////////////////////////////////////////////////*/
/* pour avoir un formatage uniforme des pages par default sauf pour les pages services */
body:not(.pages-services, .page-nos-realisations, .page-our-accomplishments) .page-template {
  max-width: var(--hdscreen);
  margin-left: auto;
  margin-right: auto;
  padding: var(--defaultPadding);
  text-align: left;
}

.content-area, .widget-area {
  margin-bottom: 0;
}

/* FULLWIDTH Forcer les pages en pleine largeur
///////////////////////////////////////////////////////////////*/
.col-full {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  box-sizing: content-box;
}

/* WRAPPER
///////////////////////////////////////////////////////////////*/
.wrapper {
  max-width: var(--hdscreen);
  margin-left: auto;
  margin-right: auto;
}

/* WOOCOMMERCE MESSAGES
///////////////////////////////////////////////////////////////*/
.woocommerce-info {
  color: var(--infoColor);
  background-color: var(--infoBackgroundColor);
  border-radius: var(--borderRadius);
}
.woocommerce-info::before {
  color: var(--infoColor);
}

/* Grands titres de pages
///////////////////////////////////////////////////////////////*/
.bigTitle {
  font-family: var(--fontPrimary_SemiBold);
  font-size: 5.625rem;
  line-height: 5.875rem;
  letter-spacing: -0.25rem;
  /*word-spacing: -0.5rem;*/
  position: relative;
  margin-bottom: 4.375rem;
  text-align: left;
}

.bigTitle > span,
.title {
  font-family: var(--fontPrimary_Light);
  font-size: 2.8125rem;
  display: block;
  line-height: 3rem;
  letter-spacing: -0.1875rem;
  /*word-spacing: -0.1875rem;*/
}

.bigTitle::after {
  position: absolute;
  content: "";
  height: 2px;
  background-color: var(--primaryColor);
  width: 6.25rem;
  bottom: -1.25rem;
  left: 0;
}

.introText {
  text-align: left;
  margin-bottom: 4.375rem;
}

/* IMAGES 
///////////////////////////////////////////////////////////////*/
img {
  display: inline;
}

/* Forcer les images à 100% pour être responsives */
.responsive {
  max-width: 100%;
  width: 100%;
  height: auto;
}

/* VIDEO RESPONSIVE
////////////////////////////////////////////////////////////*/
/* Le parent */
.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}

/* L'enfant */
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* BOITES GENERIQUES (CARDS)
///////////////////////////////////////////////////////////////*/
.card {
  border: 1px solid var(--neutralShade3);
  background-color: var(--cardBackground);
  position: relative;
  border-radius: var(--borderRadius);
  -webkit-border-radius: var(--borderRadius);
  -moz-border-radius: var(--borderRadius);
  -ms-border-radius: var(--borderRadius);
  -o-border-radius: var(--borderRadius);
  transition: all 350ms ease-out 0s;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.05);
}

.card:hover {
  background-color: var(--canvasColor);
  border-color: var(--primaryColor);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transform: scale(1.03);
  -webkit-transform: scale(1.03);
  -moz-transform: scale(1.03);
  -ms-transform: scale(1.03);
  -o-transform: scale(1.03);
}

.cardTitle {
  font-size: 2.25rem;
  line-height: 1.2;
  text-transform: uppercase;
  margin: 3.125rem;
  overflow: hidden;
}

/* BADGE NEW - GREEN ATTITUDE - ESTAL
///////////////////////////////////////////////////////////////*/
LI.product,
.woocommerce-product-gallery__image {
  position: relative;
}

/* Badge green attitude 
============================================================= */
LI.product:is(.green-attitude)::after {
  content: url(assets/images/label_logo_greeattitude.svg);
  position: absolute;
  top: 0.75rem;
  right: 1.125rem;
  width: 3.125rem;
  z-index: 10;
}

.single-product .product:is(.green-attitude) .woocommerce-product-gallery__image::after {
  content: url(assets/images/label_logo_greeattitude.svg);
  position: absolute;
  top: 0.75rem;
  right: 1.125rem;
  width: 3.125rem;
  z-index: 10;
}

/* Badge new 
============================================================= */
LI.product:is(.product_tag-nouveau)::before,
LI.product:is(.product_tag-new)::before {
  content: url(assets/images/badge_new_orange.svg);
  position: absolute;
  top: 0.75rem;
  left: 1.125rem;
  width: 3.125rem;
  z-index: 10;
}

.single-product .product:is(.product_tag-nouveau) .woocommerce-product-gallery__image::before,
.single-product .product:is(.product_tag-new) .woocommerce-product-gallery__image::before {
  content: url(assets/images/badge_new_orange.svg);
  position: absolute;
  top: 0.75rem;
  left: 1.125rem;
  width: 3.125rem;
  z-index: 10;
}

/* Badge Estal 
============================================================= */
LI.product:is(.product_tag-estal)::before {
  content: url(assets/images/label_logo_estal.svg);
  position: absolute;
  bottom: 3.75rem;
  left: 1.125rem;
  width: 5.125rem;
  z-index: 10;
}

.single-product .product:is(.product_tag-estal) .woocommerce-product-gallery__image::before {
  content: url(assets/images/label_logo_estal.svg);
  position: absolute;
  bottom: 1.75rem;
  right: 2.125rem;
  top: unset;
  left: unset;
  width: 9.125rem;
  z-index: 10;
}

/* BREADCRUMB
///////////////////////////////////////////////////////////////*/
#breadcrumbs {
  padding: 2.125rem 1.125rem;
  background: rgba(0, 0, 0, 0.9) url(assets/images/pattern_coverpla_breadcrumb.webp) repeat top left;
  text-align: left;
  color: var(--canvasColor);
}

/* les "/" de séparation */
#breadcrumbs > span {
  max-width: var(--hdscreen);
  margin-left: auto;
  margin-right: auto;
  display: flex;
  font-size: 1.75rem;
  font-family: var(--fontPrimary);
  flex-direction: row;
  align-items: center; /* ou align-self: center; sur chaque elem enfant */
}

/* lienscliquables breadcrumb */
#breadcrumbs > span span {
  display: inline-block;
  margin: 0 0.55rem;
  color: var(--canvasColor);
  word-spacing: -1px;
  line-height: 1.2;
}

#breadcrumbs > span span a:link,
#breadcrumbs > span span a:active,
#breadcrumbs > span span a:visited {
  color: var(--canvasColor);
}

#breadcrumbs > span span a:hover {
  color: var(--primaryColor);
}

#breadcrumbs > span span:first-child a {
  display: inline-block;
  width: 2.375rem;
  height: 3.125rem;
  overflow: hidden;
  position: relative;
  top: 11px;
}

#breadcrumbs > span span:first-child a::before {
  font-family: "Material_Symbols_Rounded";
  content: "\e88a";
  color: var(--canvasColor);
  text-align: center;
  display: inline-block;
  font-size: 2.5rem;
  line-height: 2.125rem;
}

#breadcrumbs > span span:first-child a:hover::before {
  color: var(--primaryColor);
}

#breadcrumbs > span span:last-child {
  font-family: var(--fontPrimary_SemiBold);
  font-size: 2.75rem;
  letter-spacing: -1px;
  /*word-spacing: -6px;	*/
}

/* 
┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│	LIENS RESEAUX SOCIAUX
└────────────────────────────────────────────────────────────────────────────────────────────────────────┘
*/
/* ajout border radius*/
.essb-fc-grid.essb-fc-profile-size-xlarge .essb-fc-block,
.essb-fc-grid.essb-fc-profile-size-xxlarge .essb-fc-block {
  border-radius: var(--borderRadius);
}

.essb_links.essb_template_grey-blocks-retina li a {
  border-radius: var(--borderRadius);
}

/* 
┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│	MASQUER LES TITRES DE CERTANES PAGES
└────────────────────────────────────────────────────────────────────────────────────────────────────────┘
*/
/* Titre page catalogue 
///////////////////////////////////////////////////////////////*/
.archive .woocommerce-products-header {
  display: none;
}

/* Pages mon compte, contactez-nous, demande de devis */
.woocommerce-account .entry-title,
.page-mon-compte .entry-title,
.page-my-account .entry-title,
.page-contactez-nous .entry-title,
.page-contact-us .entry-title,
.yith-request-a-quote-page .entry-title,
.page-nos-realisations .entry-title,
.page-our-accomplishments .entry-title {
  display: none;
}

/* 
┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│	PAGES DU FOOTER
└────────────────────────────────────────────────────────────────────────────────────────────────────────┘
*/
.page-fournisseur-de-packaging-cosmetiques main .entry-title,
.page-fournisseur-de-flacons-de-parfum main .entry-title,
.page-politique-de-cookies main .entry-title,
.page-mentions-legales main .entry-title,
.page-politique-de-confidentialite main .entry-title,
.page-cosmetics-packaging-supplier main .entry-title,
.page-perfume-bottle-supplier main .entry-title,
.page-cookies-policy main .entry-title,
.page-legal-notice main .entry-title,
.page-confidentialy-policy main .entry-title {
  font-family: var(--fontPrimary_SemiBold);
  font-size: 5.625rem;
  line-height: 5.875rem;
  letter-spacing: -0.25rem;
  word-spacing: -0.5rem;
  position: relative;
  margin-bottom: 4.375rem;
  text-align: left;
}
.page-fournisseur-de-packaging-cosmetiques main .entry-title:after,
.page-fournisseur-de-flacons-de-parfum main .entry-title:after,
.page-politique-de-cookies main .entry-title:after,
.page-mentions-legales main .entry-title:after,
.page-politique-de-confidentialite main .entry-title:after,
.page-cosmetics-packaging-supplier main .entry-title:after,
.page-perfume-bottle-supplier main .entry-title:after,
.page-cookies-policy main .entry-title:after,
.page-legal-notice main .entry-title:after,
.page-confidentialy-policy main .entry-title:after {
  position: absolute;
  content: "";
  height: 2px;
  background-color: var(--primaryColor);
  width: 6.25rem;
  bottom: -1.25rem;
  left: 0;
}

/* 
┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│	Resultat de recherche
└────────────────────────────────────────────────────────────────────────────────────────────────────────┘
*/
.search-results .site-content {
  text-align: left;
  background: var(--linear1);
}
.search-results .site-content .col-full {
  max-width: var(--hdscreen);
  margin-left: auto;
  margin-right: auto;
  padding: var(--defaultPadding);
}
.search-results .page-header h1 {
  font-family: var(--fontPrimary_SemiBold);
  font-size: 5.625rem;
  line-height: 5.875rem;
  letter-spacing: -0.25rem;
  word-spacing: -0.5rem;
  position: relative;
  margin-bottom: 4.375rem;
  text-align: left;
}
.search-results .page-header h1 span {
  color: var(--primaryColor);
}
.search-results .grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1.5rem;
}
.search-results article:is(.type-product) .entry-meta {
  display: none;
}
.search-results article:is(.type-post).hentry {
  margin-bottom: 0;
}

.search-results article a:link IMG,
.search-results article a:active IMG,
.search-results article a:visited IMG {
  border-radius: var(--borderRadius);
  -webkit-border-radius: var(--borderRadius);
  -moz-border-radius: var(--borderRadius);
  -ms-border-radius: var(--borderRadius);
  -o-border-radius: var(--borderRadius);
}
.search-results article a:link .entry-category,
.search-results article a:active .entry-category,
.search-results article a:visited .entry-category {
  display: inline-block;
  line-height: 1;
  color: var(--canvasColor);
  background-color: var(--primaryColor);
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  padding: 6px 12px;
  font-weight: 600;
  font-size: 12px;
  border-radius: 20px;
  margin-right: 9px;
}
.search-results article a:link .entry-date,
.search-results article a:active .entry-date,
.search-results article a:visited .entry-date {
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--accentColor);
}
.search-results article a:link .entry-title,
.search-results article a:active .entry-title,
.search-results article a:visited .entry-title {
  font-size: 2rem;
  letter-spacing: -1px;
  color: var(--foregroundColor);
  font-family: var(--fontPrimary_SemiBold);
  padding: 0;
  margin: 1rem 0;
  width: fit-content;
  -webkit-transition: background-size 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition: background-size 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
  background-image: -webkit-gradient(linear, left top, left bottom, from(currentColor), color-stop(98%, currentColor));
  background-image: linear-gradient(to bottom, currentColor 0%, currentColor 98%);
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: left 100%;
  overflow: visible !important;
  color: var(--foregroundColor);
}
.search-results article a:link .post-content,
.search-results article a:active .post-content,
.search-results article a:visited .post-content {
  padding: 1rem 1.5625rem 1.5625rem;
  color: var(--foregroundColor);
  text-align: justify;
}

.search-results article a:hover {
  color: var(--foregroundColor);
  text-decoration: none;
}
.search-results article a:hover .entry-title {
  color: var(--primaryColor);
  text-decoration: none;
  background-size: 100% 1px;
  -webkit-transition: background-size 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition: background-size 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
  background-image: -webkit-gradient(linear, left top, left bottom, from(currentColor), color-stop(98%, currentColor));
  background-image: linear-gradient(to bottom, currentColor 0%, currentColor 98%);
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: left 100%;
  overflow: visible !important;
  text-decoration: none;
  background-size: 100% 1px;
}

/* 
┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│	RGPD
└────────────────────────────────────────────────────────────────────────────────────────────────────────┘
*/
/* Bouton de réglage des cookies flotant
///////////////////////////////////////////////////////////////*/
#moove_gdpr_save_popup_settings_button {
  background-color: #373737;
  color: #fff;
  bottom: 5px;
  top: unset;
  left: 5px !important;
  background-color: var(--primaryColor);
  position: fixed;
}

/* 
┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│	RWD MAIN LAYOUT COMMON
└────────────────────────────────────────────────────────────────────────────────────────────────────────┘
*/
/* min-width appliquer les styles à partir d'une certaine largeur d'écran et au-delà*/
/* max-width appliquer les styles jusqu'à une certaine largeur d'écran.*/
/* 0 html{color:yellow;}
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 0px et au delà en partant de 0 
============================================================= */
@media screen and (min-width: 0px) {
  .storefront-handheld-footer-bar {
    display: none;
  }
}
/* De 0 jusqu'à largeur maximum de 0
============================================================= */
/* Entre 0px et 568px  
============================================================= */
/* 568 Mobile html{color:green;} 
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 568px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 568px
============================================================= */
/* Entre 568px et 768px  
============================================================= */
/* 768 tabletportrait html{color:orange;} 
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 768px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 768px
============================================================= */
/* Entre 768px et 1024px 
============================================================= */
/* 1024 tablet html{color:grey;} 
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 1024px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 1024px
============================================================= */
/* Entre 1024px et 1280px  
============================================================= */
/* 1280 grand ecran html{color:cyan;}
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 1280px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 1280px
============================================================= */
@media screen and (max-width: 1280px) {
  body {
    font-size: 0.9375rem;
  }
  .bigTitle {
    font-size: 4rem;
    line-height: 4rem;
    letter-spacing: -0.25rem;
    /*word-spacing: -0.05rem;*/
  }
  /* les "/" de séparation */
  #breadcrumbs > span {
    font-size: 1.25rem;
  }
  #breadcrumbs > span span:first-child a {
    width: 1.875rem;
    height: 2rem;
  }
  #breadcrumbs > span span:first-child a::before {
    font-size: 2rem;
    line-height: 1.625rem;
  }
  #breadcrumbs > span span:last-child {
    font-size: 2.125rem;
    letter-spacing: -1px;
    word-spacing: -1px;
  }
  .page-fournisseur-de-packaging-cosmetiques main .entry-title,
  .page-fournisseur-de-flacons-de-parfum main .entry-title,
  .page-politique-de-cookies main .entry-title,
  .page-mentions-legales main .entry-title,
  .page-politique-de-confidentialite main .entry-title,
  .page-cosmetics-packaging-supplier main .entry-title,
  .page-perfume-bottle-supplier main .entry-title,
  .page-cookies-policy main .entry-title,
  .page-legal-notice main .entry-title,
  .page-confidentialy-policy main .entry-title {
    font-size: 4rem;
  }
}
/* entre 1280px et 1366px
============================================================= */
/* 1366px Ordinateur portable  html{color:violet;}
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 1366px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 1366px
============================================================= */
/* Entre 1366px et 1920px
============================================================= */
/* 1920 Ordinateur portable ou de bureau haute résolution  html{color:red;}
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 1920px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 1920px
============================================================= */
/* Pages du site 
============================================================= */
/* 
version : 1.0
date : 09/11/2023
*/
/* 
┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│	HOME (ACCUEIL)
└────────────────────────────────────────────────────────────────────────────────────────────────────────┘
*/
/* SECTION NOTRE CATALOGUE
///////////////////////////////////////////////////////////////*/
.home_catalog {
  background: var(--linear1);
  padding: 3.125rem 3.125rem 7.5rem;
}

.home_catalog .grid {
  display: grid;
  grid-gap: 3.125rem;
  grid-template-columns: repeat(3, 1fr);
}

.home_catalog .grid-item a {
  text-align: center;
  display: block;
}

.home_catalog .grid-item a:hover {
  text-decoration: none;
}

.home_catalog .grid-item IMG {
  transition: opacity 0.7s, transform 0.7s;
  backface-visibility: hidden;
  text-align: center;
  display: block;
}

.home_catalog .grid-item:hover IMG {
  transform: scale3d(1.1, 1.1, 1);
}

.home_catalog .catalog_search {
  grid-column-start: 1;
  grid-column-end: 3;
}

/* champ de recherche catalogue*/
.home_catalog .catalog_search .css-a1jvfi .ywcas-input-field-wrapper {
  border-radius: var(--borderRadius) !important;
  -webkit-border-radius: var(--borderRadius) !important;
  -moz-border-radius: var(--borderRadius) !important;
  -ms-border-radius: var(--borderRadius) !important;
  -o-border-radius: var(--borderRadius) !important;
}

.home_catalog .catalog_search .wp-block-yith-search-block .ywcas-classic-search.ywcas-small input {
  padding: 1.4rem 0 1.4rem 15px !important;
}

/*
.home_catalog .catalog_search .input-form {
    padding: 2.250rem;
    font-size:22px;
} 
*/
/*
.home_catalog #yith-ajaxsearchform .search-navigation {
	display: block;
	position: relative;
}

.home_catalog .yith-ajaxsearchform-container .search-navigation::before {
	font-family: "Material_Symbols_Rounded";
	content: "\e8b6";
	font-weight: normal;
	font-style: normal;
	font-size: 38px;
	display: inline-block;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	word-wrap: normal;
	white-space: nowrap;
	direction: ltr;
	font-variation-settings: "OPSZ" 20;
	color: #85878b;
	font-variation-settings: "GRAD" -25;
	font-variation-settings: "wght" 100;
	position: absolute;
	left: 8px;
	top: 16px;
  }

*/
.home_catalog .marquee_container {
  color: var(--primaryColor);
  background-color: var(--canvasColor);
  border-radius: var(--borderRadius);
  display: flex;
  align-items: center;
  padding: 1.5rem;
  text-align: left;
  margin-bottom: 3rem;
  border: 1px solid var(--primaryShade1);
}
.home_catalog .marquee_container .material-symbols-rounded {
  font-size: 40px;
  margin-right: 0.5rem;
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 200, "opsz" 48;
}

.home_catalog .marquee {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}

.home_catalog .marquee_inner {
  display: inline-block;
  animation: marquee 30s linear infinite;
  -webkit-animation: marquee 30s linear infinite;
  animation-play-state: running;
}

@keyframes marquee {
  0% {
    transform: translateX(100vw);
  }
  100% {
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
  }
}
.home_catalog .marquee:hover .marquee_inner {
  animation-play-state: paused;
}

/* SECTION MIX & MATCH
///////////////////////////////////////////////////////////////*/
/*redeffinition marges par défaut sections
============================================================= */
.home_mixmatch {
  padding: var(--defaultPadding);
  padding-bottom: 0;
}

.home_mixmatch .grid {
  display: grid;
  grid-gap: 0.0625rem;
  grid-template-columns: repeat(2, 1fr);
  position: relative;
}

/* ajour fond transparent sous les titres pour estomper dégradés des colonnes
============================================================= */
.home_mixmatch .bigTitle {
  padding-left: 4.625rem;
  margin-left: -4.625rem;
  padding-right: 4.625rem;
  margin-right: -4.625rem;
  background-image: linear-gradient(var(--canvasColor), rgba(255, 255, 255, 0.05));
}

/* texte intro*/
.home_mixmatch p {
  padding: 0.75rem inherit;
}

.home_mixmatch .col_left,
.home_mixmatch .col_right {
  padding: 0 4.625rem 7.5rem;
}

.home_mixmatch .col_left {
  background: var(--linear4);
  text-align: right;
}

.home_mixmatch .col_left .bigTitle {
  text-align: right;
}

.home_mixmatch .col_left .bigTitle > span {
  color: var(--primaryColor);
  font-family: var(--fontPrimary_SemiBold);
  font-size: unset;
  display: inline-block;
}

.home_mixmatch .col_left .bigTitle::after {
  left: auto;
  right: 4.625rem;
}

.home_mixmatch .col_right {
  background: var(--linear3);
  text-align: left;
}

.home_mixmatch .col_right .bigTitle::after {
  right: auto;
  left: 4.625rem;
}

.home_mixmatch .gridTitle {
  grid-column: 1/3; /* grid-column-start: 1; grid-column-end: 3;  */
  background-image: linear-gradient(var(--canvasColor), rgba(255, 255, 255, 0.05));
  position: relative;
  background-color: var(--canvasColor);
  text-align: center;
}

/* LE PLUS "+" */
.home_mixmatch .gridTitle::after {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 50;
  content: "\e147";
  font-family: "Material_Symbols_Rounded";
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
  color: var(--foregroundColor);
  font-size: 6.25rem;
  bottom: -7.5rem;
}

.home_mixmatch .fa-lg.plus_icon {
  font-size: 3rem;
}

.home_mixmatch .col_right_subgrid {
  display: grid;
  justify-items: center;
  grid-gap: 0.0625rem;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto;
  grid-auto-rows: minmax(100px, 1000px);
  max-height: 1500px;
}

.home_mixmatch .col_right_subgrid h3 {
  text-align: left;
  letter-spacing: -0.125rem;
  font-family: var(--fontPrimary_Medium);
  font-size: 1.625rem;
  border-bottom: 0.125rem solid var(--primaryColor);
  margin: 0 0 0 20px;
  padding-bottom: 0.5rem;
}

.home_mixmatch .col_right_subgrid .grid-item ul {
  padding: 1.25rem 0 1.25rem 1.25rem;
  margin: 0;
}

.home_mixmatch .col_right_subgrid .grid-item li {
  padding: 7px 0;
  font-size: 22px;
  list-style: none;
}

.home_mixmatch .col_right_subgrid .grid-item img {
  width: auto;
  height: auto;
  max-width: 100%;
  min-width: 9.375rem;
}

/* SECTION GREEN ATTITUDE
///////////////////////////////////////////////////////////////*/
.home_greenAttitude {
  background-image: url("assets/images/home_greenattitude_background.webp");
  color: var(--canvasColor);
  height: 610px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative; /* initialisation d'une position pour pouvoir mettre des éléments en position "absolute" comme les textes par dessus les images */
  z-index: 1;
  width: 100%;
  height: auto;
  border: 2px solid;
  resize: both;
  padding: var(--defaultPadding);
}

.home_greenAttitude .grid {
  display: grid;
  grid-gap: 3.125rem;
  grid-template-columns: repeat(2, 1fr);
  text-align: left;
}

.home_greenAttitude .bigTitle {
  color: var(--canvasColor);
}

.home_greenAttitude .bigTitle::after {
  background-color: var(--canvasColor);
}

.home_greenAttitude .bigTitle::before {
  content: url(assets/images/logo_greeattitude.svg);
  position: absolute;
  top: -1.5rem;
  left: 25.625rem;
  width: 179px;
  height: 179px;
}

.home_greenAttitude .col_left .overlay {
  padding: 3rem;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(5px);
  border-radius: var(--borderRadius);
  -webkit-border-radius: var(--borderRadius);
  -moz-border-radius: var(--borderRadius);
  -ms-border-radius: var(--borderRadius);
  -o-border-radius: var(--borderRadius);
}

.home_greenAttitude .col_left P {
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.home_greenAttitude .col_left .overlay > p:first-child {
  font-size: 2rem;
}

.home_greenAttitude .col_left .button.secondary {
  margin-top: 1.25rem;
}

.home_greenAttitude .col_right {
  padding-left: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* SECTION ACTUALITES
///////////////////////////////////////////////////////////////*/
/* HOME ANNONCES
============================================================= */
.home_annonces img,
.home_annonces a {
  width: 100%;
  min-width: unset;
  display: block;
  overflow: hidden;
  border-radius: var(--borderRadius);
  -webkit-border-radius: var(--borderRadius);
  -moz-border-radius: var(--borderRadius);
  -ms-border-radius: var(--borderRadius);
  -o-border-radius: var(--borderRadius);
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.05);
  border: 1px solid var(--neutralShade3);
}

.home_annonces picture {
  display: block;
  width: 100%;
  max-width: unset;
  margin-bottom: 4.375rem;
}

/* ACTUALITES
============================================================= */
.home_actualites {
  background: var(--linear1);
  text-align: left;
  padding: var(--defaultPadding);
}

.home_actualites .grid {
  display: grid;
  grid-gap: 1.5rem;
  grid-template-columns: repeat(3, 1fr);
}

.home_actualites article.grid-item a:link IMG,
.home_actualites article.grid-item a:active IMG,
.home_actualites article.grid-item a:visited IMG {
  border-radius: var(--borderRadius);
  -webkit-border-radius: var(--borderRadius);
  -moz-border-radius: var(--borderRadius);
  -ms-border-radius: var(--borderRadius);
  -o-border-radius: var(--borderRadius);
}
.home_actualites article.grid-item a:link .entry-category,
.home_actualites article.grid-item a:active .entry-category,
.home_actualites article.grid-item a:visited .entry-category {
  display: inline-block;
  line-height: 1;
  color: var(--canvasColor);
  background-color: var(--primaryColor);
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  padding: 6px 12px;
  font-weight: 600;
  font-size: 12px;
  border-radius: 20px;
  margin-right: 9px;
}
.home_actualites article.grid-item a:link .entry-date,
.home_actualites article.grid-item a:active .entry-date,
.home_actualites article.grid-item a:visited .entry-date {
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--accentColor);
}
.home_actualites article.grid-item a:link .entry-title,
.home_actualites article.grid-item a:active .entry-title,
.home_actualites article.grid-item a:visited .entry-title {
  text-align: left;
  font-size: 2rem;
  letter-spacing: -1px;
  color: var(--foregroundColor);
  font-family: var(--fontPrimary_SemiBold);
  padding: 0;
  margin: 1rem 0;
  width: fit-content;
  -webkit-transition: background-size 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition: background-size 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
  background-image: -webkit-gradient(linear, left top, left bottom, from(currentColor), color-stop(98%, currentColor));
  background-image: linear-gradient(to bottom, currentColor 0%, currentColor 98%);
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: left 100%;
  overflow: visible !important;
  color: var(--foregroundColor);
}
.home_actualites article.grid-item a:link .post-content,
.home_actualites article.grid-item a:active .post-content,
.home_actualites article.grid-item a:visited .post-content {
  padding: 1rem 1.5625rem 1.5625rem;
  color: var(--foregroundColor);
  text-align: justify;
}

.home_actualites article.grid-item a:hover {
  color: var(--foregroundColor);
  text-decoration: none;
}
.home_actualites article.grid-item a:hover .entry-title {
  color: var(--primaryColor);
  text-decoration: none;
  background-size: 100% 1px;
  -webkit-transition: background-size 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition: background-size 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
  background-image: -webkit-gradient(linear, left top, left bottom, from(currentColor), color-stop(98%, currentColor));
  background-image: linear-gradient(to bottom, currentColor 0%, currentColor 98%);
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: left 100%;
  overflow: visible !important;
  text-decoration: none;
  background-size: 100% 1px;
}

/* SECTION RESEAUX SOCIAUX
///////////////////////////////////////////////////////////////*/
.home_social_networks {
  background-color: var(--linear4);
  text-align: center;
  background-image: url(assets/images/pattern_coverpla_star.webp), linear-gradient(to right, var(--primaryColor), var(--canvasColor));
  background-repeat: repeat, no-repeat;
  background-position: top left, right;
  padding: var(--defaultPadding);
}

.home_social_networks .bigTitle {
  text-align: center;
}

.home_social_networks .grid {
  display: grid;
  grid-gap: 1.5rem;
  grid-template-columns: repeat(3, 1fr);
}

.home_social_networks .grid-item IMG {
  max-width: 11.5rem;
  margin: 0 auto;
  transition: all 350ms ease-out 0s;
}

.home_social_networks .bigTitle::after {
  display: none;
}

.home_social_networks .grid-item IMG:hover {
  transform: scale(1.15);
  -webkit-transform: scale(1.15);
  -moz-transform: scale(1.15);
  -ms-transform: scale(1.15);
  -o-transform: scale(1.15);
}

/* SECTION REALISATIONS 
///////////////////////////////////////////////////////////////*/
/* Les styles sont les mêmes que pour la page realisations" */
.home_realisations {
  background-image: linear-gradient(rgb(255, 255, 255), rgba(255, 255, 255, 0.05)), url(assets/images/pattern_coverpla_a.webp);
  background-repeat: no-repeat, repeat;
  background-position: top, top left;
  padding: var(--defaultPadding);
  overflow: hidden;
}

.home_realisations > a {
  margin-top: 3.75rem;
  outline: none;
  width: auto;
  text-align: center;
  text-transform: uppercase;
  display: inline-block;
  padding: 20px;
  cursor: pointer !important;
  border-radius: var(--borderRadius);
  background: var(--primaryColor);
  border: 1px solid transparent;
  color: var(--backgroundColor);
  position: relative;
  top: 0;
  transition: 0.2s ease;
  text-decoration: none;
  font-weight: 600;
}

.home_realisations > a {
  margin-top: 3.75rem;
  outline: none;
  width: auto;
  text-align: center;
  text-transform: uppercase;
  display: inline-block;
  padding: 20px;
  cursor: pointer !important;
  border-radius: var(--borderRadius);
  background: var(--primaryColor);
  border: 1px solid transparent;
  color: var(--backgroundColor);
  position: relative;
  top: 0;
  transition: 0.2s ease;
  text-decoration: none;
  font-weight: 600;
}
.home_realisations > a:hover {
  background-color: var(--primaryShade1);
  border-color: var(--primaryColor);
  color: var(--foregroundColor);
  text-decoration: none;
}

/* SECTION SAVOIR-FAIRE
///////////////////////////////////////////////////////////////*/
.home_savoir_faire {
  padding: 0;
  text-align: left;
}

.home_savoir_faire IMG {
  border-radius: var(--borderRadius);
  -webkit-border-radius: var(--borderRadius);
  -moz-border-radius: var(--borderRadius);
  -ms-border-radius: var(--borderRadius);
  -o-border-radius: var(--borderRadius);
}

.home_savoir_faire .grid {
  display: grid;
  grid-gap: 0;
  grid-template-columns: repeat(2, 1fr);
}

.home_savoir_faire .grid-item {
  padding: 7.5rem 3.125rem;
}

.home_savoir_faire p {
  text-align: justify;
}

.home_savoir_faire H1 {
  font-size: 2.1875rem;
  margin: 1.5625rem 0;
}

.illust_logo_coverpla {
  margin-bottom: 3.125rem;
}

.home_savoir_faire .col_right {
  background: var(--linear5);
}

.home_savoir_faire .col_right .tagsLinks {
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  align-content: center;
  width: 100%;
  margin-left: 0;
  padding: 1.125rem 0;
}

.home_savoir_faire .col_right .tagsLinks > li {
  margin-bottom: 1.125rem;
}

.home_savoir_faire .col_right .tagsLinks .tag_link {
  text-transform: uppercase;
  font-size: 0.75rem;
}

/* 
┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│	RWD HOME (ACCUEIL)
└────────────────────────────────────────────────────────────────────────────────────────────────────────┘
*/
/* min-width appliquer les styles à partir d'une certaine largeur d'écran et au-delà*/
/* max-width appliquer les styles jusqu'à une certaine largeur d'écran.*/
/* 0 html{color:yellow;}
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 0px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 0
============================================================= */
/* Entre 0px et 568px  
============================================================= */
/* 568 Mobile html{color:green;} 
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 568px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 568px
============================================================= */
/* Entre 568px et 768px  
============================================================= */
/* 768 tabletportrait html{color:orange;} 
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 768px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 768px
============================================================= */
@media screen and (max-width: 768px) {
  .home_savoir_faire .grid {
    grid-template-columns: repeat(1, 1fr);
  }
  .home_savoir_faire .grid-item {
    padding: 3.5rem 1.125rem;
  }
  .home_savoir_faire .col_right .tagsLinks {
    flex-direction: column;
  }
}
/* Entre 768px et 1024px 
============================================================= */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .home_savoir_faire .grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .home_savoir_faire .grid-item {
    padding: 3.5rem 1.125rem;
  }
  .home_savoir_faire .col_right .tagsLinks {
    flex-direction: column;
  }
}
/* 1024 tablet html{color:grey;} 
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 1024px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 1024px
============================================================= */
@media screen and (max-width: 1024px) {
  .home_catalog .cardTitle {
    font-size: 2.5rem;
    margin: 2rem 1rem;
    line-height: 1;
  }
  .home_catalog {
    padding: 3.125rem 1.125rem 7.5rem;
  }
  .home_catalog .grid {
    grid-template-columns: 1fr;
  }
  .home_catalog .catalog_search {
    grid-column-start: 1;
    grid-column-end: 2;
  }
  .home_mixmatch {
    padding: 3.5rem 0 0;
  }
  .home_mixmatch .grid {
    grid-template-columns: 1fr;
  }
  .home_mixmatch .gridTitle {
    grid-column-start: 1;
    grid-column-end: 1;
  }
  .home_mixmatch p {
    padding: 0.75rem 1rem;
  }
  .home_mixmatch .col_left {
    padding: 0 1.125rem 7.5rem;
    text-align: left;
  }
  .home_mixmatch .col_left .bigTitle {
    text-align: left;
    margin-bottom: 2rem;
  }
  .home_mixmatch .col_left .bigTitle::after {
    left: 4.625rem;
  }
  .home_mixmatch .col_right {
    padding: 0 1.125rem 3.5rem;
  }
  .home_mixmatch .col_right .bigTitle {
    text-align: left;
    margin-bottom: 2rem;
    padding-top: 3rem;
  }
  .home_mixmatch .col_right_subgrid {
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto;
  }
  .home_mixmatch .col_right_subgrid h3 {
    font-size: 1.425rem;
  }
  .home_mixmatch .col_right_subgrid .grid-item li {
    padding: 3px 0;
  }
  .home_mixmatch .gridTitle::after {
    display: none;
  }
  .home_actualites .grid {
    grid-template-columns: 1fr;
  }
}
/* Entre 1024px et 1280px  
============================================================= */
@media screen and (min-width: 1024px) and (max-width: 1280px) {
  .home_catalog .grid {
    grid-column-gap: 0.5rem;
  }
  .home_catalog .grid-item IMG {
    min-height: 320px;
  }
  .home_catalog .cardTitle {
    font-size: 1.625rem;
    margin: 2rem 1rem;
    line-height: 1;
  }
  .home_mixmatch .col_left,
  .home_mixmatch .col_right {
    padding: 0 1.625rem 3.5rem;
  }
  .home_mixmatch .bigTitle {
    font-size: 3rem;
    word-spacing: 0;
  }
  .home_mixmatch .col_left .bigTitle {
    padding-right: 6.25rem;
  }
  .home_mixmatch .col_right .bigTitle {
    padding-left: 6.25rem;
  }
  .home_mixmatch .col_left .bigTitle::after {
    right: 6.25rem;
  }
  .home_mixmatch .col_right .bigTitle::after {
    left: 6.25rem;
  }
  .home_mixmatch .gridTitle::after {
    font-size: 74px;
    bottom: -90px;
  }
  .home_actualites .grid {
    grid-template-columns: 1fr 1fr;
  }
  .home_savoir_faire .grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .home_savoir_faire .grid-item {
    padding: 3.5rem 1.125rem;
  }
  .home_savoir_faire .col_right .tagsLinks {
    flex-direction: column;
  }
}
/* 1280 grand ecran html{color:cyan;}
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 1280px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 1280px
============================================================= */
@media screen and (max-width: 1280px) {
  .home_greenAttitude {
    padding: 3.5rem 1.125rem 3.5rem;
  }
  .home_greenAttitude .bigTitle::before {
    top: 0.5rem;
    left: 17.625rem;
    width: 100px;
    height: 100px;
  }
  .home_greenAttitude .grid {
    grid-template-columns: 1fr;
  }
  .home_greenAttitude .col_left P {
    font-size: 0.9375rem;
  }
  .home_greenAttitude .col_right {
    padding-left: 0;
  }
  .illust_logo_coverpla {
    max-width: 25rem;
    margin: 3.125rem auto;
    display: block;
  }
}
/* entre 1280px et 1366px
============================================================= */
@media screen and (min-width: 1280px) and (max-width: 1366px) {
  .home_mixmatch .bigTitle {
    font-size: 3.3rem;
    line-height: 3.3rem;
    word-spacing: -0.2rem;
  }
  .home_mixmatch .gridTitle::after {
    font-size: 84px;
    bottom: -94px;
  }
  .home_savoir_faire .col_right .tagsLinks {
    flex-direction: column;
  }
}
/* 1366px Ordinateur portable  html{color:violet;}
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 1366px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 1366px
============================================================= */
/* Entre 1366px et 1920px
============================================================= */
@media screen and (min-width: 1366px) and (max-width: 1920px) {
  .home_mixmatch .bigTitle {
    font-size: 3.625rem;
    line-height: 3.625rem;
    word-spacing: -0.2rem;
  }
  .home_savoir_faire .col_right .tagsLinks {
    flex-direction: column;
  }
}
/* 1920 Ordinateur portable ou de bureau haute résolution  html{color:red;}
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 1920px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 1920px
============================================================= */
/* 
version : 1.0
date : 09/11/2023
*/
/* 
┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│	HOME HERO SLIDER
└────────────────────────────────────────────────────────────────────────────────────────────────────────┘
*/
/* Slider 
////////////////////////////////////////////////////////////*/
.hero {
  position: relative;
}

.hero .hidden {
  display: none;
}

.hero img,
.hero video {
  max-width: 100%;
}

.hero_slider {
  position: relative;
  height: 735px;
  width: 100%;
  overflow: hidden;
  border: 12px;
  margin: 0;
}

.hero_slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Force Hardware Acceleration */
  -webkit-transform: translateZ(0px);
  transform: translateZ(0px);
  will-change: transform;
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.hero_slide.hero_slide_selected {
  /* this is the visible slide */
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}

.hero_slide.hero_slide_move-left {
  /* slide hidden on the left */
  -webkit-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
}

.hero_slide.hero_slide_is-moving,
.hero_slide.hero_slide_selected {
  /* the hero_slide_is-moving class is assigned to the slide which is moving outside the viewport */
  -webkit-transition: -webkit-transform 0.5s;
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
}

/* Slide style 
////////////////////////////////////////////////////////////*/
.hero_slide {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.hero_slide.gradient_radial {
  background: #E0CBAC;
  background: radial-gradient(circle farthest-corner at top left, #E0CBAC 0%, #E0CBAC 30%, #F5EDDD 55%, #F0EDE8 75%, #f9f8f0 100%);
}

.hero_slide.gradient_linear {
  background: #E0CBAC;
  background: linear-gradient(to bottom, #E0CBAC 0%, #F5EDDD 42%, #F9F8F0 90%, #FFFFFF 90%);
}

.hero_slide.full_img_1 {
  background-image: url(assets/images/slider/slide1-sanstxt.webp);
}

.hero_slide.full_img_2 {
  background-image: url(assets/images/slider/slide1.webp);
}

/*
.image_seule img {
	object-fit: cover;
}
.hero_slider .gradient_linear {
	background: #E0CBAC;
	background: linear-gradient(to bottom, #E0CBAC 0%, #F5EDDD 42%, #F9F8F0 85%, #FFFFFF 85%);
}
*/
.hero_content {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  /* this padding is used to align the text */
  /* Force Hardware Acceleration */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
}

.hero_slider .slideTitle,
.hero_slider p,
.hero_button,
.hero_content_img img {
  /* Force Hardware Acceleration */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
}

.hero_content_bg-video {
  /* hide video on mobile device */
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.hero_content_bg-video video {
  /* you won't see this element in the html, but it will be injected using javascript */
  display: block;
  min-height: 100%;
  min-width: 100%;
  max-width: none;
  height: auto;
  width: auto;
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.hero_slider .slideTitle {
  font-family: var(--fontPrimary);
  font-size: 5.3125rem;
  line-height: 1;
  letter-spacing: -0.25rem;
  word-spacing: -0.25rem;
  position: relative;
  margin-bottom: 1.5625rem;
  text-align: center;
  color: var(--foregroundColor);
  padding: 1rem 3.125rem 0;
}

.hero_slider .slideTitle strong {
  font-family: var(--fontPrimary_SemiBold);
}

.hero_slider p {
  letter-spacing: unset;
  font-size: 1.5625rem;
  line-height: 1.2;
  color: var(--foregroundColor);
  max-width: unset;
  text-align: center;
  margin-bottom: 1rem;
  padding: 0 3.125rem 0;
}

.hero_slider p strong {
  font-family: var(--fontPrimary_SemiBold);
}

.hero_slider .white_txt .slideTitle {
  color: var(--canvasColor) !important;
}

.hero_slider .white_txt p {
  color: var(--canvasColor) !important;
}

.hero_button {
  display: inline-block;
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  outline: none;
  width: auto;
  padding: 20px;
  cursor: pointer !important;
  border-radius: var(--borderRadius);
  background: var(--primaryColor);
  border: 1px solid transparent;
  color: var(--backgroundColor);
  position: relative;
  transition: 0.2s ease;
  text-transform: uppercase;
  margin-top: 1rem;
  font-weight: 600;
  font-size: 1.125rem;
}

.hero_button:nth-of-type(2) {
  margin-left: 1em;
}

.hero_button:hover {
  background-color: var(--primaryShade1);
  border-color: var(--primaryColor);
  color: var(--foregroundColor);
  text-decoration: none;
}

/* Single slide animation */
@media only screen and (min-width: 768px) {
  .hero_content {
    opacity: 0;
    -webkit-transform: translateX(40px);
    -ms-transform: translateX(40px);
    transform: translateX(40px);
  }
  .hero_slide_move-left .hero_content {
    -webkit-transform: translateX(-40px);
    -ms-transform: translateX(-40px);
    transform: translateX(-40px);
  }
  .hero_slide_selected .hero_content {
    /* this is the visible slide */
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  .hero_slide_is-moving .hero_content {
    /* this is the slide moving outside the viewport 
    wait for the end of the transition on the <li> parent before set opacity to 0 and translate to 40px/-40px */
    -webkit-transition: opacity 0s 0.5s, -webkit-transform 0s 0.5s;
    transition: opacity 0s 0.5s, -webkit-transform 0s 0.5s;
    transition: opacity 0s 0.5s, transform 0s 0.5s;
    transition: opacity 0s 0.5s, transform 0s 0.5s, -webkit-transform 0s 0.5s;
  }
  .hero_slide_from-left.hero_slide_selected .hero_content:nth-of-type(2),
  .hero_slide_from-right.hero_slide_selected .hero_content:first-of-type {
    /* this is the selected slide - different animation if it's entering from left or right */
    -webkit-transition: opacity 0.4s 0.2s, -webkit-transform 0.5s 0.2s;
    transition: opacity 0.4s 0.2s, -webkit-transform 0.5s 0.2s;
    transition: opacity 0.4s 0.2s, transform 0.5s 0.2s;
    transition: opacity 0.4s 0.2s, transform 0.5s 0.2s, -webkit-transform 0.5s 0.2s;
  }
  .hero_slide_from-left.hero_slide_selected .hero_content:first-of-type,
  .hero_slide_from-right.hero_slide_selected .hero_content:nth-of-type(2) {
    /* this is the selected slide - different animation if it's entering from left or right */
    -webkit-transition: opacity 0.4s 0.4s, -webkit-transform 0.5s 0.4s;
    transition: opacity 0.4s 0.4s, -webkit-transform 0.5s 0.4s;
    transition: opacity 0.4s 0.4s, transform 0.5s 0.4s;
    transition: opacity 0.4s 0.4s, transform 0.5s 0.4s, -webkit-transform 0.5s 0.4s;
  }
  .hero_content .slideTitle,
  .hero_content p,
  .hero_content .hero_button {
    -webkit-transform: translateX(100px);
    -ms-transform: translateX(100px);
    transform: translateX(100px);
  }
  .hero_slide_move-left .hero_content .slideTitle,
  .hero_slide_move-left .hero_content p,
  .hero_slide_move-left .hero_content .hero_button {
    -webkit-transform: translateX(-100px);
    -ms-transform: translateX(-100px);
    transform: translateX(-100px);
  }
  .hero_slide_selected .hero_content .slideTitle,
  .hero_slide_selected .hero_content p,
  .hero_slide_selected .hero_content .hero_button {
    /* this is the visible slide */
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  .hero_slide_is-moving .hero_content .slideTitle,
  .hero_slide_is-moving .hero_content p,
  .hero_slide_is-moving .hero_content .hero_button {
    /* this is the slide moving outside the viewport 
    wait for the end of the transition on the li parent before set translate to 100px/-100px */
    -webkit-transition: -webkit-transform 0s 0.5s;
    transition: -webkit-transform 0s 0.5s;
    transition: transform 0s 0.5s;
    transition: transform 0s 0.5s, -webkit-transform 0s 0.5s;
  }
  .hero_slide_selected .slideTitle {
    -webkit-transition: -webkit-transform 0.5s 0.2s;
    transition: -webkit-transform 0.5s 0.2s;
    transition: transform 0.5s 0.2s;
    transition: transform 0.5s 0.2s, -webkit-transform 0.5s 0.2s;
  }
  .hero_slide_selected p {
    -webkit-transition: -webkit-transform 0.5s 0.3s;
    transition: -webkit-transform 0.5s 0.3s;
    transition: transform 0.5s 0.3s;
    transition: transform 0.5s 0.3s, -webkit-transform 0.5s 0.3s;
  }
  .hero_slide_selected .hero_button {
    -webkit-transition: background-color 0.2s 0s, -webkit-transform 0.5s 0.4s;
    transition: background-color 0.2s 0s, -webkit-transform 0.5s 0.4s;
    transition: transform 0.5s 0.4s, background-color 0.2s 0s;
    transition: transform 0.5s 0.4s, background-color 0.2s 0s, -webkit-transform 0.5s 0.4s;
  }
}
/* Slider navigation 
////////////////////////////////////////////////////////////*/
.hero_nav {
  display: none;
  position: absolute;
  width: 100%;
  bottom: -50px;
  bottom: 0;
  z-index: 2;
  text-align: center;
  height: auto;
}

.hero_nav nav, .hero_nav ul, .hero_nav li, .hero_nav a {
  height: 100%;
  margin: 0;
}

.hero_nav nav {
  display: inline-block;
  position: relative;
}

.hero_marker {
  display: none;
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 24px;
  height: 24px;
  color: var(--primaryColor);
  background-color: var(--canvasColor);
  border: 1px solid var(--primaryColor);
  border-radius: 50%;
  transition: transform 0.2s, box-shadow 0.2s;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

.hero_marker.hero_marker_item-2 {
  transform: translateX(100%);
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
}

.hero_marker.hero_marker_item-3 {
  transform: translateX(200%);
  -webkit-transform: translateX(200%);
  -moz-transform: translateX(200%);
  -ms-transform: translateX(200%);
  -o-transform: translateX(200%);
}

.hero_marker.hero_marker_item-4 {
  transform: translateX(300%);
  -webkit-transform: translateX(300%);
  -moz-transform: translateX(300%);
  -ms-transform: translateX(300%);
  -o-transform: translateX(300%);
}

.hero_marker.hero_marker_item-5 {
  transform: translateX(400%);
  -webkit-transform: translateX(400%);
  -moz-transform: translateX(400%);
  -ms-transform: translateX(400%);
  -o-transform: translateX(400%);
}

.hero_marker.hero_marker_item-6 {
  -webkit-transform: translateX(500%);
  -ms-transform: translateX(500%);
  transform: translateX(500%);
  -moz-transform: translateX(500%);
  -o-transform: translateX(500%);
}

.hero_marker.hero_marker_item-7 {
  -webkit-transform: translateX(600%);
  -ms-transform: translateX(600%);
  transform: translateX(600%);
  -moz-transform: translateX(600%);
  -o-transform: translateX(600%);
}

.hero_marker.hero_marker_item-8 {
  -webkit-transform: translateX(700%);
  -ms-transform: translateX(700%);
  transform: translateX(700%);
  -moz-transform: translateX(700%);
  -o-transform: translateX(700%);
}

.hero_marker.hero_marker_item-9 {
  -webkit-transform: translateX(800%);
  -ms-transform: translateX(800%);
  transform: translateX(800%);
  -moz-transform: translateX(800%);
  -o-transform: translateX(800%);
}

.hero_marker.hero_marker_item-10 {
  -webkit-transform: translateX(9%);
  -ms-transform: translateX(9%);
  transform: translateX(9%);
  -moz-transform: translateX(9%);
  -o-transform: translateX(9%);
}

.hero_nav ul::after {
  clear: both;
  content: "";
  display: table;
}

.hero_nav li {
  display: block;
  width: 14px;
  height: 14px;
  margin: 0 14px;
  float: left;
  cursor: pointer;
}

.hero_nav a {
  display: block;
  position: relative;
  font-size: 1rem;
  font-weight: 700;
  color: transparent;
  border: 1px solid var(--neutralShade2);
  background-color: var(--neutralShade1);
  border-radius: 50%;
  width: 100%;
  line-height: 1;
  text-indent: -5000px;
  height: 100%;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.hero_nav a:hover {
  border: 1px solid var(--neutralShade3);
  background-color: var(--neutralShade2);
  transform: scale(1.5);
  -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -ms-transform: scale(1.5);
  -o-transform: scale(1.5);
  text-decoration: none;
}

.hero_nav .item_nav_selected a {
  background-color: var(--primaryColor);
  border: 1px solid var(--primaryColor);
  transform: scale(1.5);
  -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -ms-transform: scale(1.5);
  -o-transform: scale(1.5);
}

.hero_nav .item_nav_selected a:hover {
  background-color: var(--primaryColor);
  text-decoration: none;
}

@media only screen and (min-width: 768px) {
  /*.hero_nav {
    height: 80px;
  }
  .hero_marker,
  .hero_nav li {
    width: 95px;
  }
  .hero_nav a {
    padding-top: 48px;
    font-size: 1.1rem;
    text-transform: uppercase;
  }
  .hero_nav a::before {
    top: 18px;
  }*/
}
/* Javascript disabled
////////////////////////////////////////////////////////////*/
.no-js .hero_slide {
  display: none;
}

.no-js .hero_slide.hero_slide_selected {
  display: block;
}

.no-js .hero_nav {
  display: none;
}

/* Arrangements NMI
////////////////////////////////////////////////////////////*/
.hero_slide .center_content {
  position: relative;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: var(--hdscreen);
  margin-left: 50%;
  margin-right: 50%;
  width: 100%;
  height: auto;
  z-index: 10;
}

.hero_slide .grid {
  display: grid;
  max-width: var(--hdscreen);
  margin-left: auto;
  margin-right: auto;
  height: 100%;
}

.hero_slide .grid.col_1 {
  grid-template-columns: 1fr;
}

.hero_slide .grid.col_2-1 {
  grid-template-columns: 2fr 1fr;
}

.hero_slide .grid.col_1-2 {
  grid-template-columns: 1fr 2fr;
}

.hero_slide .grid .grid-item {
  align-self: center !important;
  width: auto;
  height: auto;
}

/* 
┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│	RWD HOME HERO SLIDER
└────────────────────────────────────────────────────────────────────────────────────────────────────────┘
*/
/* min-width appliquer les styles à partir d'une certaine largeur d'écran et au-delà*/
/* max-width appliquer les styles jusqu'à une certaine largeur d'écran.*/
/* 0 html{color:yellow;}
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 0px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 0
============================================================= */
/* Entre 0px et 568px  
============================================================= */
@media screen and (min-width: 0) and (max-width: 568px) {
  .hero_slider {
    height: 800px;
  }
  .hero_slider .slideTitle {
    font-size: 2.2rem;
    letter-spacing: -0.2rem;
  }
  .hero_slider p {
    font-size: 1rem;
  }
}
/* 568 Mobile html{color:green;} 
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 568px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 568px
============================================================= */
/* Entre 568px et 768px  
============================================================= */
@media screen and (min-width: 568px) and (max-width: 768px) {
  .hero_slider {
    height: 800px;
  }
  .hero_slider .slideTitle {
    font-size: 3rem;
  }
  .hero_slider p {
    font-size: 1.2rem;
  }
}
/* 768 tabletportrait html{color:orange;} 
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 768px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 768px
============================================================= */
/* Entre 768px et 1024px 
============================================================= */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .hero_slider {
    height: 800px;
  }
  .hero_slider .slideTitle {
    font-size: 3.4rem;
  }
  .hero_slider p {
    font-size: 1.3rem;
  }
}
/* 1024 tablet html{color:grey;} 
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 1024px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 1024px
============================================================= */
/* Entre 1024px et 1280px  
============================================================= */
@media screen and (min-width: 1024px) and (max-width: 1280px) {
  .hero_slider {
    height: 800px;
  }
  .hero_slider .slideTitle {
    font-size: 3.8rem;
  }
  .hero_slider p {
    font-size: 1.325rem;
  }
}
/* 1280 grand ecran html{color:cyan;}
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 1280px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 1280px
============================================================= */
/* entre 1280px et 1366px
============================================================= */
@media screen and (min-width: 1280px) and (max-width: 1366px) {
  .hero_slider .slideTitle {
    font-size: 4rem;
  }
  .hero_slider p {
    font-size: 1.4625rem;
  }
}
/* 1366px Ordinateur portable  html{color:violet;}
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 1366px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 1366px
============================================================= */
/* Entre 1366px et 1920px
============================================================= */
@media screen and (min-width: 1366px) and (max-width: 1920px) {
  .hero_slider .slideTitle {
    font-size: 4.5rem;
  }
  .hero_slider p {
    font-size: 1.5rem;
  }
}
/* 1920 Ordinateur portable ou de bureau haute résolution  html{color:red;}
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 1920px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 1920px
============================================================= */
/* 
┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│	CONFIGURATEUR - MIX&MATCH
└────────────────────────────────────────────────────────────────────────────────────────────────────────┘
*/
/* Masquer le titre */
.creez-votre-flacon .entry-header,
.create-your-bottle .entry-header {
  display: none;
}

/* grid en 2 colonnes */
.grid-configurator {
  display: grid;
  grid-template-columns: 1fr auto; /* auto permet d'ajuster dans la largeur du visu au besoin*/
  grid-gap: 1px;
  /* comportement sticky de la seconde colonne avec une grid 
  Pour rendre la barre latérale sticky, nous devons remplacer le comportement d'étirement par défaut et rendre la hauteur latérale égale au contenu. 
  Nous pouvons soit utiliser align-self sur la colonne qui doit être sticky "#secondary-configurator" : apart { align-self: start; } 
  Ou pour utiliser align-items sur le parent (la grid), ce qui affectera tous les éléments enfants.*/
  align-items: start;
  /* attention remove or unset overflow-x: hidden; from every ancestor of the element you want to have position: sticky;.  Setting the overflow-x property to value clip helped me achieve position sticky and prevent scrolling.*/
}

#secondary-configurator {
  top: 8rem; /*(hauteur du header environ */
  position: sticky;
  top: 144px;
  margin-top: 50px;
}

/* Blocs de filtres 
=================================================================================================================================     
*/
#container-flacons,
#container-pompes,
#container-capots {
  border: 1px solid var(--neutralShade3);
  border-radius: 5px;
  margin: 20px 0;
  padding: 20px;
  background: linear-gradient(to left, white, var(--neutralShade1));
  border-radius: var(--borderRadius);
  -webkit-border-radius: var(--borderRadius);
  -moz-border-radius: var(--borderRadius);
  -ms-border-radius: var(--borderRadius);
  -o-border-radius: var(--borderRadius);
  transition: all 350ms ease-out 0s;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.05);
}

.grid-wrapper {
  border: 1px solid var(--neutralShade2);
  overflow: auto;
  background-color: var(--canvasColor);
  position: relative;
}

#container-flacons .grid-wrapper {
  height: 256px !important;
}

#container-pompes .grid-wrapper {
  height: 132px !important;
}

#container-capots .grid-wrapper {
  height: 256px !important;
}

/* Isotope
=================================================================================================================================     
*/
.filter-count-container {
  margin-bottom: 8px;
  font-size: 13px;
  text-align: right;
  color: var(--accentColor);
}

.filter-count-container SPAN {
  color: var(--primaryColor);
}

/* clear fix */
.creez-votre-flacon .grid:after,
.create-your-bottle .grid:after {
  content: "";
  display: block;
  clear: both;
}

/* ---- .element-item liens imagettes ---- */
.creez-votre-flacon .element-item,
.create-your-bottle .element-item {
  background: var(--canvasColor) none repeat scroll 0 0;
  color: var(--primaryColor);
  float: left;
  height: 110px;
  margin: 10px 10px 5px;
  padding: 0 0 16px;
  text-align: center;
  width: 90px;
  border-radius: 4px;
  border: 2px solid var(--neutralShade2);
  position: relative;
  transition: all 0.4s ease;
}

/* suppression cse à cocher vides pour nouvelle version avec croix comme filtres catalogue*/
.creez-votre-flacon .element-item:before,
.create-your-bottle .element-item:before {
  /*transition: all 0.4s ease; 
    opacity: 0.5;
  font-family: 'Font Awesome 5 Free regular';		
  color:var(--neutralShade3);
  content: "\f0c8";
  position:absolute;
  top:-4px;
  right:3px;
  font-size:18px;  */
}

.creez-votre-flacon .element-item:hover,
.create-your-bottle .element-item:hover {
  border: 2px solid var(--primaryColor);
}

.creez-votre-flacon .element-item:hover:before,
.create-your-bottle .element-item:hover:before {
  color: var(--primaryColor);
}

.creez-votre-flacon .element-item:hover A:hover,
.create-your-bottle .element-item:hover A:hover {
  text-decoration: none;
}

.creez-votre-flacon .element-item:hover A > SPAN,
.create-your-bottle .element-item:hover A > SPAN {
  color: var(--canvasColor);
  background-color: var(--primaryColor);
}

/* etat cliqué */
.creez-votre-flacon .element-item.is-clicked,
.create-your-bottle .element-item.is-clicked {
  color: var(--primaryColor);
  border: 2px solid var(--primaryColor);
  overflow: unset;
}

.creez-votre-flacon .element-item.is-clicked:before,
.create-your-bottle .element-item.is-clicked:before {
  /* anciennes cases à cocher*/
  /*color: var(--primaryColor);
    opacity: 1;
  font-family: 'Font Awesome 5 Free';
  content: "\f14a";
  position:absolute;
  top:-4px;
  right:3px;
  font-size: 18px;*/
  color: var(--primaryColor);
  opacity: 1;
  font-family: "Font Awesome 5 Free";
  content: "\f057";
  position: absolute;
  top: -5px;
  right: -7px;
  font-size: 18px;
  z-index: 10;
  background-color: var(--canvasColor);
  line-height: 18px;
}

.creez-votre-flacon .element-item.is-clicked:hover,
.create-your-bottle .element-item.is-clicked:hover {
  border: 2px solid var(--primaryColor);
}

.creez-votre-flacon .element-item H5,
.create-your-bottle .element-item H5 {
  display: none;
}

.creez-votre-flacon .element-item > *,
.create-your-bottle .element-item > * {
  margin: 0;
  padding: 0;
}

.creez-votre-flacon .element-item A > SPAN,
.create-your-bottle .element-item A > SPAN {
  background-color: var(--neutralShade2);
  color: var(--foregroundColor);
  display: block;
  width: 100%;
  font-size: 11px;
  line-height: 12px;
  position: absolute;
  bottom: 0;
  padding: 3px 0;
}

.creez-votre-flacon .element-item.is-clicked A > SPAN,
.create-your-bottle .element-item.is-clicked A > SPAN {
  background-color: var(--primaryColor);
  color: var(--canvasColor);
}

.creez-votre-flacon .element-item P,
.create-your-bottle .element-item P {
  display: none;
}

/* ---- H2...H3 ---- */
#primary-configurator H2 {
  font-family: var(--fontPrimary_SemiBold);
  font-size: 2.1875rem;
  line-height: 2.1875rem;
  font-weight: lighter;
  display: block;
  margin-bottom: 10px;
  text-align: left;
  letter-spacing: -0.125rem;
  word-spacing: -0.125rem;
}
#primary-configurator H3 {
  font-size: 16px;
  text-align: left;
}
#primary-configurator P {
  font-size: 14px;
  line-height: 18px;
  text-align: left;
}

/* bouton "add to quote"
=================================================================================================================================     
*/
#secondary-configurator .addToQuoteButtonWrapper {
  overflow: hidden;
  position: absolute;
  bottom: 40px;
  left: 40px;
  width: 320px;
  /*height: 45px;*/
  border-radius: var(--borderRadius);
  -webkit-border-radius: var(--borderRadius);
  -moz-border-radius: var(--borderRadius);
  -ms-border-radius: var(--borderRadius);
  -o-border-radius: var(--borderRadius);
  z-index: 850;
  /*Seuleslacouleurdutexteetlesdimensionsdenosparagraphesaurontunetransition.*/
  transition-property: width;
  /*Latransitiondureratroissecondes.*/
  transition-duration: 0.6s;
  left: 0 !important;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}
#secondary-configurator .addToQuoteButtonWrapper A#addToQuoteButton {
  /*height: 50px;*/
  width: 320px;
  display: none;
  z-index: 850;
  text-align: left;
  overflow: hidden;
  margin: auto;
  position: relative;
  border-radius: var(--borderRadius);
  -webkit-border-radius: var(--borderRadius);
  -moz-border-radius: var(--borderRadius);
  -ms-border-radius: var(--borderRadius);
  -o-border-radius: var(--borderRadius);
  line-height: 22px;
  vertical-align: middle;
  border: 1px solid var(--primaryColor);
  color: var(--canvasColor);
  text-align: center;
}
#secondary-configurator .addToQuoteButtonWrapper A#addToQuoteButton I {
  margin-left: -8px;
  margin-right: 10px;
  position: relative;
  z-index: 10;
}

#secondary-configurator .addToQuoteButtonWrapper A#addToQuoteButton:hover {
  color: var(--foregroundColor);
  border: 1px solid var(--primaryColor);
  text-decoration: none;
}

/*
#secondary-configurator .addToQuoteButtonWrapper.hover {

 width: 245px;//calc(100% - 40px);

  A#addToQuoteButton {
    SPAN {
      display: inline-block;
    }
  }
}
*/
#secondary-configurator .addToQuoteButtonWrapper.loading A#addToQuoteButton {
  background-color: var(--primaryShade5) !important;
  color: var(--canvasColor);
}

/* animation bouton add to quote
=================================================================================================================================     
*/
.pulsation {
  animation: pulsation_bouton 2s ease-out infinite forwards;
}

.pulsation:hover {
  animation: pulsation_bouton 0;
  -webkit-animation: pulsation_bouton 0;
}

@keyframes pulsation_bouton {
  from {
    box-shadow: 0 0 0 -3px transparent, 0 0 0 0 var(--primaryColor);
  }
  to {
    box-shadow: 0 0 0 8px transparent, 0 0 0 8px transparent;
  }
}
/* personnalisation boutons configurateur
=================================================================================================================================     
*/
#primary-configurator #filterWrapper .button {
  font-family: var(--fontPrimary_Light);
  transition: all 0.4s ease;
  padding: 4px 6px 2px 6px;
  margin-bottom: 10px;
  background: var(--neutralShade3);
  border: none;
  color: var(--foregroundColor);
  font-size: 14px;
  text-shadow: none;
  cursor: pointer;
  position: relative;
  line-height: 16px;
}

#primary-configurator #filterWrapper .big {
  padding: 10px;
  margin-bottom: 10px;
  font-size: 14px;
}

#primary-configurator #filterWrapper .colored {
  background-color: var(--primaryColor);
  color: var(--canvasColor);
  text-shadow: 0 1px black;
}

#primary-configurator #filterWrapper .button:hover {
  background-color: var(--primaryColor);
  text-shadow: none;
  color: var(--canvasColor);
}

#primary-configurator #filterWrapper .button:active,
#primary-configurator #filterWrapper .button.is-checked {
  background-color: var(--primaryColor);
  padding-left: 22px;
}
#primary-configurator #filterWrapper .button:active:before,
#primary-configurator #filterWrapper .button.is-checked:before {
  font-family: "Font Awesome 5 Free";
  content: "\f14a";
  position: absolute;
  top: 3px;
  left: 4px;
  font-size: 14px;
  color: var(--canvasColor);
}

#primary-configurator #filterWrapper .button.is-checked {
  color: white;
}

/* ---- button-group ---- */
#primary-configurator #filterWrapper .button-group:after {
  content: "";
  display: block;
  clear: both;
}

#primary-configurator #filterWrapper .button-group .button {
  float: left;
  border-radius: 0;
  margin-left: 0;
  margin-right: 1px;
}

#primary-configurator #filterWrapper .button-group .button:first-child {
  border-radius: 0.5em 0 0 0.5em;
}

#primary-configurator #filterWrapper .button-group .button:last-child {
  border-radius: 0 0.5em 0.5em 0;
}

#primary-configurator #filterWrapper .col-left.button-group .button:first-child {
  border-radius: 0px !important;
}

#primary-configurator #filterWrapper .col-left.button-group .button:last-child {
  border-radius: 0px !important;
}

/* Gestion couleurs filtres Configurateur
  =================================================================================================================================  
*/
#primary-configurator #filterWrapper .button-group[data-filter-group=couleur] .button:not([data-filter=""]) {
  width: 40px;
  height: 22px;
  background: no-repeat url(assets/images/attributs-colors.webp);
  background-position: 300px 300px;
  text-indent: -3000px;
  border: 1px solid var(--neutralShade2);
}
#primary-configurator #filterWrapper .button-group[data-filter-group=couleur] .button:not([data-filter=""]):active, #primary-configurator #filterWrapper .button-group[data-filter-group=couleur] .button:not([data-filter=""]).is-checked {
  border: 1px solid var(--primaryColor);
  padding-left: 22px;
}
#primary-configurator #filterWrapper .button-group[data-filter-group=couleur] .button:not([data-filter=""]):active:before, #primary-configurator #filterWrapper .button-group[data-filter-group=couleur] .button:not([data-filter=""]).is-checked:before {
  font-family: "Font Awesome 5 Free";
  content: "\f14a";
  color: var(--canvasColor);
  position: absolute;
  top: 2px;
  left: 2px;
  font-size: 15px;
  text-indent: 0;
  background-color: var(--primaryColor);
  width: 10px;
  height: 10px;
}
#primary-configurator #filterWrapper .button-group[data-filter-group=couleur] .button[data-filter$=argent-brillant],
#primary-configurator #filterWrapper .button-group[data-filter-group=couleur] .button[data-filter$=shiny-silver] {
  background-position: -8px -116px !important;
}
#primary-configurator #filterWrapper .button-group[data-filter-group=couleur] .button[data-filter$=argent-mat],
#primary-configurator #filterWrapper .button-group[data-filter-group=couleur] .button[data-filter$=matte-silver] {
  background-position: -8px -154px;
}
#primary-configurator #filterWrapper .button-group[data-filter-group=couleur] .button[data-filter$=blanc],
#primary-configurator #filterWrapper .button-group[data-filter-group=couleur] .button[data-filter$=white] {
  background-position: -8px -262px;
}
#primary-configurator #filterWrapper .button-group[data-filter-group=couleur] .button[data-filter$=canon-de-fusil],
#primary-configurator #filterWrapper .button-group[data-filter-group=couleur] .button[data-filter$=gunmetal] {
  background-position: -8px -7px;
}
#primary-configurator #filterWrapper .button-group[data-filter-group=couleur] .button[data-filter$=cristal],
#primary-configurator #filterWrapper .button-group[data-filter-group=couleur] .button[data-filter$=crystal] {
  background-position: -8px -188px;
}
#primary-configurator #filterWrapper .button-group[data-filter-group=couleur] .button[data-filter$=gris],
#primary-configurator #filterWrapper .button-group[data-filter-group=couleur] .button[data-filter$=grey] {
  background-position: -8px -224px;
}
#primary-configurator #filterWrapper .button-group[data-filter-group=couleur] .button[data-filter$=noir-brillant],
#primary-configurator #filterWrapper .button-group[data-filter-group=couleur] .button[data-filter$=shiny-black] {
  background-position: -8px -406px;
}
#primary-configurator #filterWrapper .button-group[data-filter-group=couleur] .button[data-filter$=noir-mat],
#primary-configurator #filterWrapper .button-group[data-filter-group=couleur] .button[data-filter$=matte-black] {
  background-position: -8px -442px;
}
#primary-configurator #filterWrapper .button-group[data-filter-group=couleur] .button[data-filter$=or-brillant],
#primary-configurator #filterWrapper .button-group[data-filter-group=couleur] .button[data-filter$=shiny-gold] {
  background-position: -8px -43px;
}
#primary-configurator #filterWrapper .button-group[data-filter-group=couleur] .button[data-filter$=or-mat],
#primary-configurator #filterWrapper .button-group[data-filter-group=couleur] .button[data-filter$=matte-gold] {
  background-position: -8px -79px;
}
#primary-configurator #filterWrapper .button-group[data-filter-group=couleur] .button[data-filter$=wenge],
#primary-configurator #filterWrapper .button-group[data-filter-group=couleur] .button[data-filter$=wenge-color] {
  background-position: -8px -333px;
}
#primary-configurator #filterWrapper .button-group[data-filter-group=couleur] .button[data-filter$=tabac],
#primary-configurator #filterWrapper .button-group[data-filter-group=couleur] .button[data-filter$=tobacco] {
  background-position: -8px -297px;
}
#primary-configurator #filterWrapper .button-group[data-filter-group=couleur] .button[data-filter$=naturel],
#primary-configurator #filterWrapper .button-group[data-filter-group=couleur] .button[data-filter$=natural] {
  background-position: -8px -370px;
}
#primary-configurator #filterWrapper .button-group[data-filter-group=couleur] .button[data-filter$=depoli],
#primary-configurator #filterWrapper .button-group[data-filter-group=couleur] .button[data-filter$=frosted] {
  background-position: -8px -479px;
}

/* Gestion des tooltips pour filtres couleur
  =================================================================================================================================  
*/
#primary-configurator #filterWrapper .button-group[data-filter-group=couleur] .button .tooltip-color {
  transition: all 300ms;
  position: absolute;
  font-size: 12px;
  line-height: 14px;
  text-align: center;
  box-sizing: border-box;
  opacity: 0;
  width: 100px;
  margin-left: -50px;
  z-index: 99;
  left: 50%;
  pointer-events: none;
  top: 85%;
  padding-top: 10px;
  opacity: 0;
  transform: translateY(-20%);
  text-indent: 0;
}
#primary-configurator #filterWrapper .button-group[data-filter-group=couleur] .button .tooltip-color > span {
  background: var(--primaryColor);
  color: var(--canvasColor);
  display: inline-block;
  position: relative;
  height: auto;
  width: auto;
  max-width: 100%;
  border-radius: 3px;
  padding: 3px 6px;
}
#primary-configurator #filterWrapper .button-group[data-filter-group=couleur] .button .tooltip-color > span:after {
  top: -11px;
  color: var(--primaryColor);
  font-family: "Font Awesome 5 Free";
  content: "\f0de";
  border: 5px solid transparent;
  border-bottom-color: transparent;
  width: 1px;
  height: 1px;
  position: absolute;
  left: 50%;
  margin-left: -10px;
}
#primary-configurator #filterWrapper .button-group[data-filter-group=couleur] .button:hover .tooltip-color {
  transform: translateY(0);
  opacity: 1;
}

/* Gestion visualisation flacon
=================================================================================================================================     
*/
#secondary-configurator .visu {
  width: 502px;
  height: 760px;
  overflow: hidden;
  width: 502px;
  height: 760px;
  overflow: hidden;
}
#secondary-configurator .visu-flacons {
  position: absolute;
  z-index: 600;
  width: 502px;
  height: 644px;
  top: 116px;
}
#secondary-configurator .visu-pompes {
  position: absolute;
  z-index: 700;
  width: 502px;
  height: 80px;
  top: 65px;
}
#secondary-configurator .visu-capots {
  position: absolute;
  z-index: 800;
  width: 502px;
  height: 145px;
  top: 0px;
}

/* Masquer Titre page H1 
  =================================================================================================================================  
*/
.page-id-32 .woocommerce-info, .page-id-32 .woocommerce-message,
.creez-votre-flacon .woocommerce-info,
.creez-votre-flacon .woocommerce-message,
.create-your-bottle .woocommerce-info,
.create-your-bottle .woocommerce-message {
  display: none;
}

/* Loadings chargement du configurateur
  =================================================================================================================================  
*/
#container-flacons,
#container-pompes,
#container-capots {
  position: relative;
  overflow: hidden;
}

#flacons, #capots, #pompes, .visu-flacons, visu-capots, visu-pompes {
  visibility: hidden;
}

.loader-wrapper {
  background-color: rgba(255, 255, 255, 0.92);
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  z-index: 900;
  text-align: center;
  left: 0;
}
.loader-wrapper .loader,
.loader-wrapper .loader:after {
  border-radius: 50%;
  width: 5em;
  height: 5em;
}
.loader-wrapper .loader {
  margin: 0 auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 0.6em solid rgba(0, 0, 0, 0.2);
  border-right: 0.6em solid rgba(0, 0, 0, 0.2);
  border-bottom: 0.6em solid rgba(0, 0, 0, 0.2);
  border-left: 0.6em solid var(--primaryColor);
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
  z-index: 905;
  top: 36%;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* Texte information en bas du configurateur
  =================================================================================================================================  
*/
.visu-textinfo {
  color: var(--accentColor);
  font-size: 10px;
  text-align: center;
  position: absolute;
  bottom: 0;
  z-index: 850;
  width: 100%;
}

/* Progression processusus demande de devis fond du bouton 
  =================================================================================================================================  
*/
.progress-button {
  position: relative;
  display: inline-block;
  overflow: hidden;
}
.progress-button i {
  z-index: 10;
}

.progress-button .progress-text {
  position: relative;
  display: inline-block;
  z-index: 10;
}

.progress-button .progress-inner {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  transition: width 0.3s, opacity 0.3s;
  background: var(--primaryColor);
  z-index: 5;
}

/* Services affichés par le configurateur une fois mise en demande de devis effectué
  =================================================================================================================================  
*/
#primary-configurator .services-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 15px;
}
#primary-configurator .services-gallery div .service_title {
  letter-spacing: -1px;
  text-transform: uppercase;
  font-size: 22px;
  line-height: 30px;
  text-align: center;
  margin: 0;
  padding: 30px 15px 15px;
  color: var(--foregroundColor);
  display: block;
}

/* bloc présent avec les filtres du configurateur avant envoi devis */
/* premier p de présentation */
#filterWrapper > p {
  padding: 20px 20px 0;
  font-family: var(--fontPrimary_Medium);
}

/* bloc qui remplace le configurateur présentant les services après envoi devis masqué par défaut */
#servicesBloc {
  display: none;
  position: relative;
  min-height: 760px;
}
#servicesBloc .button-area {
  padding: 50px 20px;
}
/* 
=================================================================================================================================     
Affichage services de parachèvement
=================================================================================================================================     
*/
#servicesBloc .button-area {
  border: 1px solid var(--neutralShade3);
  border-radius: 5px;
  margin: 3rem 0;
  padding: 3rem;
  background: linear-gradient(to left, white, var(--neutralShade1));
  border-radius: var(--borderRadius);
  -webkit-border-radius: var(--borderRadius);
  -moz-border-radius: var(--borderRadius);
  -ms-border-radius: var(--borderRadius);
  -o-border-radius: var(--borderRadius);
  transition: all 350ms ease-out 0s;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.05);
  text-align: center;
  font-size: 18px;
  font-family: var(--fontPrimary_Medium);
}
#servicesBloc .button-area p {
  text-align: center;
  font-size: 1.25rem;
  line-height: 1.2;
}

#servicesBloc .servicesList .gridServices {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 2rem;
  margin-top: 3rem;
}
#servicesBloc .servicesList .gridServices .grid-item {
  overflow: hidden;
}
#servicesBloc .servicesList .gridServices .grid-item a:hover {
  text-decoration: none;
}
#servicesBloc .servicesList .gridServices .grid-item img {
  transition: opacity 0.7s, transform 0.7s;
  backface-visibility: hidden;
  text-align: center;
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
}
#servicesBloc .servicesList .gridServices .grid-item .cardTitle {
  margin: 1rem;
  font-size: 1.125rem;
  text-align: center;
  letter-spacing: normal;
}
#servicesBloc .servicesList .gridServices .grid-item:hover img {
  transform: scale3d(1.1, 1.1, 1);
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item {
  /*margin: 0 0px 0 0;
  display: inline-block;
  height: auto;*/
  vertical-align: initial;
}

/* 
┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│	RWD CONFIGURATEUR - MIX&MATCH
└────────────────────────────────────────────────────────────────────────────────────────────────────────┘
*/
/* min-width appliquer les styles à partir d'une certaine largeur d'écran et au-delà*/
/* max-width appliquer les styles jusqu'à une certaine largeur d'écran.*/
/* 0 html{color:yellow;}
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 0px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 0
============================================================= */
/* Entre 0px et 568px  
============================================================= */
/* 568 Mobile html{color:green;} 
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 568px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 568px
============================================================= */
/* Entre 568px et 768px  
============================================================= */
/* 768 tabletportrait html{color:orange;} 
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 768px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 768px
============================================================= */
@media screen and (max-width: 768px) {
  #servicesBloc .servicesList .gridServices {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* Entre 768px et 1024px 
============================================================= */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  #servicesBloc .servicesList .gridServices {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* 1024 tablet html{color:grey;} 
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 1024px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 1024px
============================================================= */
@media screen and (max-width: 1024px) {
  .grid-configurator {
    grid-template-columns: 1fr;
  }
  #secondary-configurator {
    position: relative;
    top: 0;
    margin-top: 20px;
  }
  .visu-textinfo {
    color: var(--accentColor);
    left: 0;
  }
  #secondary-configurator .visu {
    width: 400px;
    margin: auto;
  }
  #secondary-configurator .visu-capots,
  #secondary-configurator .visu-pompes,
  #secondary-configurator .visu-flacons {
    width: 400px;
  }
  #secondary-configurator .visu-capots img,
  #secondary-configurator .visu-pompes img,
  #secondary-configurator .visu-flacons img {
    width: 400px;
  }
  #secondary-configurator .visu-pompes {
    top: 50px;
  }
  #secondary-configurator .visu-flacons {
    top: 92px;
  }
  #servicesBloc button.button-reset {
    margin-top: 1rem;
  }
}
/* Entre 1024px et 1280px  
============================================================= */
@media screen and (min-width: 1024px) and (max-width: 1280px) {
  #servicesBloc .servicesList .gridServices {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* 1280 grand ecran html{color:cyan;}
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 1280px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 1280px
============================================================= */
/* entre 1280px et 1366px
============================================================= */
@media screen and (min-width: 1280px) and (max-width: 1366px) {
  #servicesBloc .servicesList .gridServices {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* 1366px Ordinateur portable  html{color:violet;}
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 1366px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 1366px
============================================================= */
/* Entre 1366px et 1920px
============================================================= */
/* 1920 Ordinateur portable ou de bureau haute résolution  html{color:red;}
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 1920px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 1920px
============================================================= */
.popup {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

.popup-content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.popup-content button {
  padding: 1.25rem;
}

.notification {
  visibility: hidden;
  min-width: 250px;
  margin-left: -125px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 2px;
  padding: 16px;
  position: fixed;
  z-index: 1;
  left: 50%;
  bottom: 30px;
  font-size: 17px;
  opacity: 1;
  transition: opacity 0.5s, visibility 0.5s;
  border: 1px solid red;
  position: sticky;
  top: 200px;
  width: 100%;
}

.notification.show {
  visibility: visible;
  opacity: 1;
}

:root {
  --dark: #34495E;
  --light: #ffffff;
  --success: #0ABF30;
  --error: #E24D4C;
  --warning: #E9BD0C;
  --info: #3498DB;
}

.notifications {
  position: fixed;
  top: 200px;
  right: 20px;
  z-index: 5000;
}

.notifications :where(.toast, .column) {
  display: flex;
  align-items: center;
}

.notifications .toast {
  width: 400px;
  position: sticky;
  overflow: hidden;
  list-style: none;
  border-radius: 4px;
  padding: 16px 17px;
  margin-bottom: 10px;
  background: var(--light);
  justify-content: space-between;
  animation: show_toast 0.3s ease forwards;
}

@keyframes show_toast {
  0% {
    transform: translateX(100%);
  }
  40% {
    transform: translateX(-5%);
  }
  80% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-10px);
  }
}
.notifications .toast.hide {
  animation: hide_toast 0.3s ease forwards;
}

@keyframes hide_toast {
  0% {
    transform: translateX(-10px);
  }
  40% {
    transform: translateX(0%);
  }
  80% {
    transform: translateX(-5%);
  }
  100% {
    transform: translateX(calc(100% + 20px));
  }
}
.toast::before {
  position: absolute;
  content: "";
  height: 3px;
  width: 100%;
  bottom: 0px;
  left: 0px;
  animation: progress 5s linear forwards;
}

@keyframes progress {
  100% {
    width: 0%;
  }
}
.toast.success::before, .btn#success {
  background: var(--success);
}

.toast.error::before, .btn#error {
  background: var(--error);
}

.toast.warning::before, .btn#warning {
  background: var(--warning);
}

.toast.info::before, .btn#info {
  background: var(--info);
}

.toast .column i {
  font-size: 1.75rem;
}

.toast.success .column i {
  color: var(--success);
}

.toast.error .column i {
  color: var(--error);
}

.toast.warning .column i {
  color: var(--warning);
}

.toast.info .column i {
  color: var(--info);
}

.toast .column span {
  font-size: 1.07rem;
  margin-left: 12px;
}

.toast i:last-child {
  color: #aeb0d7;
  cursor: pointer;
}

.toast i:last-child:hover {
  color: var(--dark);
}

.buttons .btn {
  border: none;
  outline: none;
  cursor: pointer;
  margin: 0 5px;
  color: var(--light);
  font-size: 1.2rem;
  padding: 10px 20px;
  border-radius: 4px;
}

@media screen and (max-width: 530px) {
  .notifications {
    width: 95%;
  }
  .notifications .toast {
    width: 100%;
    font-size: 1rem;
    margin-left: 20px;
  }
  .buttons .btn {
    margin: 0 1px;
    font-size: 1.1rem;
    padding: 8px 15px;
  }
}
/* 
version : 1.0
date : 09/11/2023
*/
/* 
┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│	PAGE DETAIL SERVICES
└────────────────────────────────────────────────────────────────────────────────────────────────────────┘
*/
/* SECTION  service_header
///////////////////////////////////////////////////////////////*/
.service_header {
  padding: 0;
  text-align: left;
}

.service_header .grid {
  display: grid;
  grid-gap: 0;
  grid-template-columns: repeat(2, 1fr);
}

.service_header .col_left img {
  display: block;
}

.service_header .col_right {
  background: var(--linear3);
  padding: 3.5vw;
  position: relative;
}

.service_header .introTextService {
  font-size: 1.75rem;
  line-height: 2.25rem;
  text-align: left;
}

.service_header .introTextService + UL {
  font-size: 1.75rem;
  line-height: 1.5;
  text-align: left;
  list-style-type: symbols;
  margin-left: 1.625rem;
}

.service_header .introTextService + UL LI {
  font-size: 1.5rem;
  line-height: 1.3;
  text-align: left;
  padding-bottom: 1rem;
}

.service_header .introTextService + UL LI:last-child {
  padding-bottom: 0;
}

.service_header .helpContainer {
  border: 1px solid var(--neutralShade3);
  background-color: var(--cardBackground);
  position: relative;
  border-radius: 3.125rem;
  -webkit-border-radius: 3.125rem;
  -moz-border-radius: 3.125rem;
  -ms-border-radius: 3.125rem;
  -o-border-radius: 3.125rem;
  transition: all 350ms ease-out 0s;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.05);
  align-items: center;
  padding: 0.125rem;
  width: 470px;
  margin: 3.75rem 0;
}

.service_header .helpContainer .fas {
  font-size: 6.25rem;
}

.service_header .helpContainer p {
  position: absolute;
  top: 26px;
  left: 120px;
}

.service_header .helpContainer a {
  position: absolute;
  bottom: 26px;
  left: 120px;
}

/* social links 
============================================================= */
.service_header .essb_links {
  position: absolute;
  bottom: 0;
  left: auto;
}

@media (max-width: 768px) {
  .service_header .grid {
    grid-template-columns: 1fr;
  }
}
/* SECTION  service_main
///////////////////////////////////////////////////////////////*/
.service_main {
  background: var(--linear1);
  text-align: center;
  padding: var(--defaultPadding);
}

/*specifique service laquage
============================================================= */
.service_main .service_process {
  position: relative;
  bottom: -1px;
  display: grid;
  grid-gap: 0;
  grid-template-areas: "titleLaqInt titleLaqExt" "visuLaqInt visuLaqExt";
  justify-items: stretch;
  align-items: center;
}

.service_process .titleLaqInt {
  grid-area: titleLaqInt;
}

.service_process .titleLaqExt {
  grid-area: titleLaqExt;
}

.service_process .visuLaqInt {
  grid-area: visuLaqInt;
}

.service_process .visuLaqExt {
  grid-area: visuLaqExt;
}

.service_process .serviceTitle {
  margin: 3rem 0;
  position: relative;
  display: inline-block;
  font-size: 1.875rem;
  line-height: 1.875rem;
  letter-spacing: -0.0625rem;
  /*word-spacing: -0.1875rem;*/
}

.service_process .titleLaqInt .serviceTitle:after {
  position: absolute;
  content: "";
  height: 1px;
  background-color: var(--neutralShade4);
  width: 100%;
  bottom: -3rem;
  left: 0;
}

.service_process .visuLaqExt {
  background-color: var(--canvasColor);
  border-color: var(--neutralShade3);
  border-width: 1px 1px 0 1px;
  border-style: solid;
  border-top-right-radius: var(--borderRadius);
  -webkit-border-top-right-radius: var(--borderRadius);
  -moz-border-top-right-radius: var(--borderRadius);
  -ms-border-top-right-radius: var(--borderRadius);
  -o-border-top-right-radius: var(--borderRadius);
  border-top-left-radius: var(--borderRadius);
  -webkit-border-top-left-radius: var(--borderRadius);
  -moz-border-top-left-radius: var(--borderRadius);
  -ms-border-top-left-radius: var(--borderRadius);
  -o-border-top-left-radius: var(--borderRadius);
  border-bottom: 1px solid var(--canvasColor);
}

.service_process .visuLaqInt,
.service_process .visuLaqExt {
  position: relative;
  padding-top: 5rem;
}

/* seconde partie de la page options de laquage ext 
============================================================= */
.service_main .service_process_options {
  display: grid;
  grid-gap: 0;
  grid-template-columns: repeat(4, 1fr);
  justify-items: stretch;
  align-items: center;
  border: 1px solid var(--neutralShade3);
  background-color: var(--canvasColor);
  border-radius: var(--borderRadius);
  -webkit-border-radius: var(--borderRadius);
  -moz-border-radius: var(--borderRadius);
  -ms-border-radius: var(--borderRadius);
  -o-border-radius: var(--borderRadius);
  border-top-right-radius: 0;
  -webkit-border-top-right-radius: 0;
  -moz-border-top-right-radius: 0;
  -ms-border-top-right-radius: 0;
  -o-border-top-right-radius: 0;
}

.service_process_options .title {
  text-align: left;
  margin-bottom: 7.5rem;
}

.service_process_options .serviceTitle {
  font-size: 1.875rem;
  line-height: 1.875rem;
  letter-spacing: -0.0625rem;
  /*word-spacing: -0.1875rem;*/
  margin: 5rem 0;
}

.service_process_options .serviceTitle > strong {
  font-family: var(--fontPrimary_SemiBold);
}

.service_process_options .headerGrid {
  text-align: center;
  grid-column-start: 1;
  grid-column-end: 5;
}

.service_process_options .headerGrid .title {
  text-align: center;
  margin: 7.5rem auto;
  position: relative;
  display: inline-block;
  width: calc(100% - 10rem);
}

.service_process_options .headerGrid .title:after {
  position: absolute;
  content: "";
  height: 1px;
  background-color: var(--neutralShade4);
  width: 100%;
  bottom: -3rem;
  left: 0;
}

@media (max-width: 768px) {
  .service_process_options .grid {
    grid-template-columns: 1fr;
  }
  .service_process_options .headerGrid {
    grid-column-start: 1;
    grid-column-end: 2;
  }
}
/* SECTION  service_faq
///////////////////////////////////////////////////////////////*/
.service_faq {
  background: var(--linear1);
  padding: 4.375rem 4.375rem 0;
  margin: 7.5rem 16% 0;
  border-radius: var(--borderRadius);
  -webkit-border-radius: var(--borderRadius);
  -moz-border-radius: var(--borderRadius);
  -ms-border-radius: var(--borderRadius);
  -o-border-radius: var(--borderRadius);
}

.service_faq .title {
  text-align: center;
  margin-bottom: 4.375rem;
}

.service_faq .grid.faq_list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 3.125rem;
  grid-row-gap: 1.5rem;
  justify-items: stretch;
  align-items: start;
  margin: 0;
}

.service_faq .grid-item {
  text-align: left;
}

.service_faq .grid-item h2 {
  font-family: var(--fontPrimary_Bold);
  font-size: 1.25rem;
}

.service_faq .faq_answer {
  margin-bottom: 0;
}

/* SECTION  Services réalisations
///////////////////////////////////////////////////////////////*/
.service_realisations {
  background-image: linear-gradient(rgb(255, 255, 255), rgba(255, 255, 255, 0.05)), url(assets/images/pattern_coverpla_a.webp);
  background-repeat: no-repeat, repeat;
  background-position: top, top left;
  padding: var(--defaultPadding);
  overflow: hidden;
}

/* SECTION  Services associés
///////////////////////////////////////////////////////////////*/
.service_associated {
  padding: var(--defaultPadding);
}

.service_associated .grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 2rem;
}

.service_associated .service-item {
  overflow: hidden;
}

.service_associated .service-item A:hover {
  text-decoration: none;
}

.service_associated .grid-item IMG {
  transition: opacity 0.7s, transform 0.7s;
  backface-visibility: hidden;
  text-align: center;
  display: block;
}

.service_associated .grid-item:hover IMG {
  transform: scale3d(1.1, 1.1, 1);
}

/* 
┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│	RWD PAGE DETAIL SERVICES
└────────────────────────────────────────────────────────────────────────────────────────────────────────┘
*/
/* min-width appliquer les styles à partir d'une certaine largeur d'écran et au-delà*/
/* max-width appliquer les styles jusqu'à une certaine largeur d'écran.*/
/* 0 html{color:yellow;}
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 0px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 0
============================================================= */
/* Entre 0px et 568px  
============================================================= */
/* 568 Mobile html{color:green;} 
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 568px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 568px
============================================================= */
/* Entre 568px et 768px  
============================================================= */
/* 768 tabletportrait html{color:orange;} 
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 768px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 768px
============================================================= */
@media screen and (max-width: 768px) {
  .service_faq .grid.faq_list {
    grid-template-columns: 1fr;
  }
  .service_associated .grid {
    grid-template-columns: 1fr;
  }
  .page-laquage-flacons .service_main .service_process,
  .page-lacquering-bottles .service_main .service_process {
    grid-template-areas: "titleLaqInt" "visuLaqInt" "titleLaqExt" "visuLaqExt";
  }
  .page-laquage-flacons .service_main .service_process_options,
  .page-lacquering-bottles .service_main .service_process_options {
    grid-template-columns: repeat(1, 1fr);
  }
  .page-laquage-flacons .service_process_options .headerGrid,
  .page-lacquering-bottles .service_process_options .headerGrid {
    grid-column-start: 1;
    grid-column-end: 2;
  }
  .page-laquage-flacons .service_process_options .headerGrid .title,
  .page-lacquering-bottles .service_process_options .headerGrid .title {
    width: calc(100% - 3rem);
  }
}
/* Entre 768px et 990px 
============================================================= */
@media screen and (min-width: 768px) and (max-width: 990px) {
  .service_associated .grid {
    grid-template-columns: 1fr 1fr;
  }
  .page-laquage-flacons .service_main .service_process,
  .page-lacquering-bottles .service_main .service_process {
    grid-template-areas: "titleLaqInt" "visuLaqInt" "titleLaqExt" "visuLaqExt";
  }
  .page-laquage-flacons .service_main .service_process_options,
  .page-lacquering-bottles .service_main .service_process_options {
    grid-template-columns: repeat(2, 1fr);
  }
  .page-laquage-flacons .service_process_options .headerGrid,
  .page-lacquering-bottles .service_process_options .headerGrid {
    grid-column-start: 1;
    grid-column-end: 3;
  }
  .page-laquage-flacons .service_process_options .headerGrid .title,
  .page-lacquering-bottles .service_process_options .headerGrid .title {
    width: calc(100% - 3rem);
  }
}
/* 990 appartion colonne de filtre à gauche html{color:brown;} 
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 990px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 990px
============================================================= */
/* Entre 990px et 1024px  
============================================================= */
@media screen and (min-width: 990px) and (max-width: 1024px) {
  .service_associated .grid {
    grid-template-columns: 1fr 1fr;
  }
  .page-laquage-flacons .service_main .service_process,
  .page-lacquering-bottles .service_main .service_process {
    grid-template-areas: "titleLaqInt" "visuLaqInt" "titleLaqExt" "visuLaqExt";
  }
  .page-laquage-flacons .service_main .service_process_options,
  .page-lacquering-bottles .service_main .service_process_options {
    grid-template-columns: repeat(2, 1fr);
  }
  .page-laquage-flacons .service_process_options .headerGrid,
  .page-lacquering-bottles .service_process_options .headerGrid {
    grid-column-start: 1;
    grid-column-end: 3;
  }
  .page-laquage-flacons .service_process_options .headerGrid .title,
  .page-lacquering-bottles .service_process_options .headerGrid .title {
    width: calc(100% - 3rem);
  }
}
/* 1024 tablet html{color:grey;} 
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 1024px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 1024px
============================================================= */
/* Entre 1024px et 1280px  
============================================================= */
@media screen and (min-width: 1024px) and (max-width: 1280px) {
  .service_associated .grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
/* 1280 grand ecran html{color:cyan;}
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 1280px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 1280px
============================================================= */
@media screen and (max-width: 1280px) {
  .service_header .grid {
    grid-template-columns: repeat(1, 1fr);
  }
  .service_header .introTextService {
    font-size: 1.25rem;
    line-height: 1.2;
  }
  .service_faq {
    margin: 0;
  }
  .bigTitle {
    font-size: 3rem;
    line-height: 3rem;
    /* letter-spacing: -0.25rem;  */
  }
}
/* entre 1280px et 1366px
============================================================= */
@media screen and (min-width: 1280px) and (max-width: 1366px) {
  .bigTitle {
    font-size: 3rem;
    line-height: 3rem;
    /*letter-spacing: -0.25rem;*/
  }
  .service_header .introTextService {
    font-size: 1.25rem;
    line-height: 1.2;
  }
}
/* 1366px Ordinateur portable  html{color:violet;}
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 1366px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 1366px
============================================================= */
/* Entre 1366px et 1920px
============================================================= */
@media screen and (min-width: 1366px) and (max-width: 1920px) {
  .bigTitle {
    font-size: 3.5rem;
    line-height: 3.5rem;
    /*letter-spacing: -0.25rem;*/
  }
  .service_header .introTextService {
    font-size: 1.4rem;
    line-height: 1.1;
  }
}
/* 1920 Ordinateur portable ou de bureau haute résolution  html{color:red;}
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 1920px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 1920px
============================================================= */
/* RWD page laquage specifiquement */
/*
.page-laquage-flacons,
.page-lacquering-bottles {
    .service_main .service_process {
        grid-template-areas:
            "titleLaqInt"
            "visuLaqInt"
            "titleLaqExt"
            "visuLaqExt";
    } 
    .service_main .service_process_options {
        grid-template-columns: repeat(1, 1fr);
    }
    .service_process_options .headerGrid {
        grid-column-start: 1;
        grid-column-end: 2;
    }
}


*/
/* RWD page laquage specifiquement */
/*
.page-laquage-flacons,
.page-lacquering-bottles {
    .service_main .service_process {
        grid-template-areas:
            "titleLaqInt"
            "visuLaqInt"
            "titleLaqExt"
            "visuLaqExt";
    } 
    .service_main .service_process_options {
        grid-template-columns: repeat(2, 1fr);
    }
    .service_process_options .headerGrid {
        grid-column-start: 1;
        grid-column-end: 3;
    }
}
*/
/* 
version : 1.0
date : 09/11/2023
*/
/* 
┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│	PAGE REALISATIONS
└────────────────────────────────────────────────────────────────────────────────────────────────────────┘
*/
.page-nos-realisations,
.page-our-accomplishments {
  background: var(--linear1);
}

.realisations_main {
  padding: 0 3.125rem 3.125rem;
}

.grid-masonnery {
  position: relative;
}

/* clear fix */
.grid-masonnery:after {
  content: "";
  display: block;
  clear: both;
}

/* ---- .grid-item
///////////////////////////////////////////////////////////////*/
/* fluid 4 columns */
.grid-masonnery .grid-sizer,
.grid-masonnery .grid-item {
  width: 25%;
}

/* 2 columns wide */
.grid-masonnery .grid-item--width2 {
  width: 50%;
}

/*.gutter-sizer { width:0.5%; }*/
@media screen and (max-width: 768px) {
  /* fluid 2 columns */
  .grid-masonnery .grid-sizer,
  .grid-masonnery .grid-item {
    width: 50%;
  }
  /* 2 columns wide */
  .grid-masonnery .grid-item--width2 {
    width: 100%;
  }
}
.grid-masonnery .grid-item {
  float: left;
}

.grid-masonnery .grid-item img {
  display: block;
  /*max-width: 100%;*/
  width: 100%;
  height: auto;
}

/* remplacement fonctionnement gutter d'origine qui ne marche pas avec template fluide 
///////////////////////////////////////////////////////////////*/
.grid-masonnery .grid-item-inner {
  margin: 5px;
  position: relative;
  cursor: default;
  transition: all 0.2s ease-out;
  overflow: hidden;
  border-radius: 10px;
}

.grid-masonnery .grid-item-inner :hover {
  transition: all 0.2s ease-out;
  cursor: pointer;
}

.grid-masonnery figcaption {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
  opacity: 0;
  transition: all 0.3s ease-out;
  color: #fff;
}

.grid-masonnery figcaption:hover {
  opacity: 1;
  transition: all 0.3s ease-out;
  background-image: radial-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.525)), linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.444), rgb(0, 0, 0));
}

.grid-masonnery .grid-item-text {
  position: absolute;
  width: 80%;
  height: 60px;
  margin: 0 auto;
  left: 25px;
  bottom: 0;
  z-index: 10;
  color: var(--canvasColor);
  font-family: var(--fontSecondary);
  text-align: left;
}

/* button-group
///////////////////////////////////////////////////////////////*/
.filters-button-group {
  background: var(--linear3);
  padding: 1.5625rem;
  text-align: left;
  border-radius: var(--borderRadius);
  margin: 2.5rem 0;
  -webkit-border-radius: var(--borderRadius);
  -moz-border-radius: var(--borderRadius);
  -ms-border-radius: var(--borderRadius);
  -o-border-radius: var(--borderRadius);
}

/**/
.page-nos-realisations .filters-button-group .button.is-checked,
.page-our-accomplishments .filters-button-group .button.is-checked {
  color: var(--foregroundColor);
  text-shadow: none;
}

/* button
///////////////////////////////////////////////////////////////*/
.page-nos-realisations .filters-button-group .button,
.page-our-accomplishments .filters-button-group .button {
  display: inline-block;
  margin: 0 0.3125rem;
  padding: 0.625rem;
  border-radius: var(--borderRadius);
  -webkit-border-radius: var(--borderRadius);
  -moz-border-radius: var(--borderRadius);
  -ms-border-radius: var(--borderRadius);
  -o-border-radius: var(--borderRadius);
  color: var(--foregroundColor);
  border: 2px solid var(--neutralShade3);
  background-color: var(--canvasColor);
  font-size: 16px;
  cursor: pointer;
  position: relative;
  text-align: center;
}
.page-nos-realisations .filters-button-group .button:hover,
.page-our-accomplishments .filters-button-group .button:hover {
  border-color: var(--primaryColor);
  color: var(--foregroundColor);
}
.page-nos-realisations .filters-button-group .button:active, .page-nos-realisations .filters-button-group .button.is-checked,
.page-our-accomplishments .filters-button-group .button:active,
.page-our-accomplishments .filters-button-group .button.is-checked {
  border-color: var(--primaryColor);
  color: var(--foregroundColor);
}
.page-nos-realisations .filters-button-group .button:active::before, .page-nos-realisations .filters-button-group .button.is-checked::before,
.page-our-accomplishments .filters-button-group .button:active::before,
.page-our-accomplishments .filters-button-group .button.is-checked::before {
  background-color: var(--primaryColor);
  background-image: url("assets/images/icons/check.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 60%;
  border-radius: 100%;
  color: #fff;
  content: "";
  font-size: 16px;
  height: 15px;
  line-height: 15px;
  position: absolute;
  right: -5px;
  text-align: center;
  text-decoration: none;
  top: -5px;
  width: 15px;
  right: -8px;
  top: -8px;
}

/* 
┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│	PAGE CATALOG
└────────────────────────────────────────────────────────────────────────────────────────────────────────┘
*/
.archive .site-content .col-full {
  max-width: var(--hdscreen);
}

/* :not(.category) pour isoler les pages dossier de presse)
archive woocommerce woocommerce-page (page catalogue)
archive category category-dossiers-de-presse (page dossier de presse)
*/
.archive:not(.category) #content {
  background: var(--linear1);
  padding: var(--defaultPadding);
}

/* Pagination
///////////////////////////////////////////////////////////////*/
.archive .woocommerce-pagination .page-numbers li .page-numbers.current {
  background-color: var(--primaryColor);
  color: var(--canvasColor);
}

/* conteneur boites produits transformé en grid css 
///////////////////////////////////////////////////////////////*/
.archive ul.products {
  margin-left: 0;
  margin-bottom: 0;
  clear: both;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 50px;
  justify-content: center;
  justify-items: center;
}

/* suppression pseudos elements de storefront qui interviennent comme des produits dans le css grid*/
.archive ul.products::before,
.archive ul.products::after {
  content: "";
  display: none;
}

/* boites produits 
///////////////////////////////////////////////////////////////*/
.archive LI.product {
  border: 1px solid var(--neutralShade3);
  background-color: var(--canvasColor);
  position: relative;
  border-radius: var(--borderRadius);
  -webkit-border-radius: var(--borderRadius);
  -moz-border-radius: var(--borderRadius);
  -ms-border-radius: var(--borderRadius);
  -o-border-radius: var(--borderRadius);
  transition: all 350ms ease-out 0s;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.archive LI.product:hover {
  border-color: var(--primaryColor);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05);
  transform: scale(1.05);
}

.archive .site-main ul.products.columns-3 li.product {
  width: 100%;
  max-width: 430px;
  float: none;
  margin-right: unset;
}

.archive LI.product A:link,
.archive LI.product A:hover,
.archive LI.product A:visited {
  text-decoration: none;
}

.archive LI.product IMG {
  transition: opacity 0.7s, transform 0.7s;
  backface-visibility: hidden;
  margin-bottom: 60px !important;
  max-width: 100%;
  width: 100%;
  height: auto;
}

.archive LI.product:hover IMG {
  transform: scale3d(1.1, 1.1, 1);
}

.archive LI.product h2,
.archive LI.product h3,
.archive LI.product .woocommerce-loop-product__title {
  color: var(--foregroundColor);
  font-size: 1.875rem !important;
  margin-bottom: 0 !important;
  line-height: 2.25rem;
  text-transform: uppercase;
  text-align: left;
  position: absolute;
  bottom: 20px;
  width: 100%;
  transition: all 350ms ease-out 0s;
  border-bottom: 2px solid var(--primaryColor);
  width: auto;
  margin: 0 15px;
  letter-spacing: -2px;
}

.archive LI.product:hover .woocommerce-loop-product__title {
  font-family: var(--fontPrimary_SemiBold);
}

/* comportement spécifique green attitude
///////////////////////////////////////////////////////////////*/
.archive LI.product:is(.green-attitude) .woocommerce-loop-product__title {
  border-color: var(--secondaryColor);
}

.archive LI.product:is(.green-attitude):hover {
  border-color: var(--secondaryColor);
}

/* Sidebar 
///////////////////////////////////////////////////////////////*/
/* Boîtes filtres Ajax Filter for WooCommerce  
============================================================= */
.archive #secondary .yith-wcan-filter {
  text-align: left;
}

/* Bouton reset filters  
============================================================= */
.archive #secondary .filters-container .reset-filters {
  margin-bottom: 2rem;
}

/* boîtes Titre  
============================================================= */
.archive #secondary .yith-wcan-filter .filter-title {
  text-align: left;
  letter-spacing: -0.125rem;
  font-family: var(--fontPrimary_Medium);
  font-size: 1.625rem;
  border-bottom: 0.125rem solid var(--primaryColor);
  padding-bottom: 0.5rem;
  margin-bottom: 1.25rem;
}

.archive .yith-wcan-filters .yith-wcan-filter .filter-items .filter-item.label .term-label {
  display: block;
  font-size: 0.8rem;
  line-height: 1rem;
  font-family: var(--fontPrimary_Light);
}

/* SPECIFICITES DES FILTRES   
============================================================= */
/* filtre type de produits 
------------------------------------------------------------- */
/* hauteur des imagettes par defaut plus hautes*/
.archive div[data-taxonomy=product_cat] .filter-item.filter-has-3-column {
  min-height: 10rem;
}

/* filtre autres produits (attention même div[data-taxonomy="product_cat"] que les filtres type de produits )
------------------------------------------------------------- */
/* hauteur des imagettes par defaut plus hautes*/
.archive div[data-taxonomy=product_cat] .filter-item.filter-has-2-column {
  min-height: 10rem;
  /* temporaire changer imagettes 
  img {
  	width:auto;
  	max-height: 107px;
  }
  */
}

/* filtre nouveautés pour masquer le titre
------------------------------------------------------------- */
.archive div[data-taxonomy=product_tag] .filter-title {
  display: none;
}

/* filtre univers 
------------------------------------------------------------- */
/* hauteur des imagettes par defaut plus hautes*/
.archive div[data-taxonomy=univers] .filter-item.filter-has-3-column {
  min-height: 10rem;
}

/*div[data-taxonomy="product_cat"]*/
/* filtre et badge green attitude 
------------------------------------------------------------- */
.archive div[data-taxonomy=green_attitude] .filter-title {
  border-color: var(--secondaryColor) !important;
  position: relative;
}

.archive div[data-taxonomy=green_attitude] .filter-title::before {
  content: url(assets/images/label_logo_greeattitude.svg);
  position: absolute;
  top: -0.8125rem;
  left: 13.75rem;
  width: 1.875rem;
}

/* filtre SILHOUETTES
------------------------------------------------------------- */
/* hauteur des imagettes par defaut plus hautes*/
.archive div[data-taxonomy=filter_silhouette] .filter-item.filter-has-3-column {
  min-height: 10rem;
}

/* filtre BASES
------------------------------------------------------------- */
/* hauteur des imagettes par defaut plus hautes*/
.archive div[data-taxonomy=filter_base] .filter-item.filter-has-3-column {
  min-height: 8rem;
}

/* filtre DISPONIBILITES et MATIERES
------------------------------------------------------------- */
.yith-wcan-filters .yith-wcan-filter .filter-items .filter-item.label:not(.with-image):not(.disabled):hover {
  background-color: var(--canvasColor);
  color: var(--foregroundColor);
}

.yith-wcan-filters .yith-wcan-filter .filter-items .filter-item.label:not(.with-image):not(.disabled):hover .term-label,
.yith-wcan-filters .yith-wcan-filter .filter-items .filter-item.label:not(.with-image):not(.disabled):hover .item-count {
  color: var(--foregroundColor);
}

.yith-wcan-filters .yith-wcan-filter .filter-items .filter-item.label.active:not(.with-image) {
  background-color: var(--canvasColor);
  position: relative;
}

.yith-wcan-filters .yith-wcan-filter .filter-items .filter-item.label.active:not(.with-image) .term-label,
.yith-wcan-filters .yith-wcan-filter .filter-items .filter-item.label.active:not(.with-image) .item-count {
  color: var(--foregroundColor);
}

.yith-wcan-filters .yith-wcan-filter .filter-items .filter-item.label.active:not(.with-image):after {
  background-color: var(--primaryColor);
  background-image: url("assets/images/close.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 60%;
  border-radius: 100%;
  color: #fff;
  content: "";
  font-size: 16px;
  height: 15px;
  line-height: 15px;
  position: absolute;
  right: -5px;
  text-align: center;
  text-decoration: none;
  top: -5px;
  width: 15px;
  right: -8px;
  top: -8px;
}

.yith-wcan-filters-opener {
  outline: none;
  width: auto;
  text-align: center;
  text-transform: uppercase;
  padding: 20px;
  cursor: pointer !important;
  border-radius: var(--borderRadius);
  background: var(--primaryColor);
  border: 1px solid transparent;
  color: var(--backgroundColor);
  position: relative;
  top: 0;
  transition: 0.2s ease;
  text-decoration: none;
  font-weight: 600;
  margin-bottom: 25px;
}

.yith-wcan-filters-opener:hover {
  background-color: var(--primaryShade1);
  border-color: var(--primaryColor);
  color: var(--foregroundColor);
  text-decoration: none;
}

/* Modale menu filtre ouvert*/
/*couleur de fond fenêtre filtres yith modal ouverte */
.yith-wcan-filters.filters-modal.open {
  background-color: white;
  /* garder premier filtre nouveauté ouvert , les filtres sont réduits par défaut en mobilité */
  /* sinon autre façon*/
  /*
  .yith-wcan-filter:first-child .filter-title.collapsable.collapsable.closed + .filter-content {
  	display: block !important;
  }
  */
  /* positionnement bouton de validation des filtres séléctionés */
}
.yith-wcan-filters.filters-modal.open h3.mobile-only {
  background-color: var(--primaryColor);
  color: var(--canvasColor);
}
.yith-wcan-filters.filters-modal.open div[data-taxonomy=product_tag] .filter-content {
  display: block !important;
}
.yith-wcan-filters.filters-modal.open .main-modal-button {
  display: block; /* display none n'est pas remplacée par le script du menu au click */
  position: relative; /* la position fixed ne marche pas */
  outline: none;
  text-transform: uppercase;
  cursor: pointer !important;
  background: var(--primaryColor);
  border: 1px solid transparent;
  color: var(--backgroundColor);
  position: relative;
  top: 0;
  transition: 0.2s ease;
  text-decoration: none;
  font-weight: 600;
}
.yith-wcan-filters.filters-modal.open .main-modal-button:hover {
  background-color: var(--primaryShade1);
  border-color: var(--primaryColor);
  color: var(--foregroundColor);
  text-decoration: none;
}

/* 
┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│	RWD PAGE CATALOG
└────────────────────────────────────────────────────────────────────────────────────────────────────────┘
*/
/******* ATTENTION CAS PARTICULIER 

à partir de 990px disparition du bouton filtre 
qui ne représente aucun des beakpoints de la feuille de style

*/
/* min-width appliquer les styles à partir d'une certaine largeur d'écran et au-delà*/
/* max-width appliquer les styles jusqu'à une certaine largeur d'écran.*/
/* 0 html{color:yellow;}
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 0px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 0
============================================================= */
/* Entre 0px et 568px  
============================================================= */
/* 568 Mobile html{color:green;} 
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 568px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 568px
============================================================= */
/* Entre 568px et 768px  
============================================================= */
/* 768 tabletportrait html{color:orange;} 
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 768px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 768px
============================================================= */
@media screen and (max-width: 768px) {
  .archive ul.products {
    grid-template-columns: repeat(1, 1fr);
  }
}
/* Entre 768px et 990px 
============================================================= */
@media screen and (min-width: 768px) and (max-width: 990px) {
  .archive ul.products {
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
  }
}
/* 990 appartion colonne de filtre à gauche html{color:brown;} 
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 990px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 990px
============================================================= */
@media screen and (max-width: 990px) {
  .archive.left-sidebar .content-area {
    width: 100%;
    float: none;
    margin-right: 0;
  }
  .archive.left-sidebar .widget-area {
    width: 0;
    float: none;
    margin-right: 0;
  }
  .archive .pagination, .archive .woocommerce-pagination {
    padding: 1em 0;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-width: 1px 0;
    text-align: center;
    clear: both;
    float: none;
  }
  .archive .woocommerce-result-count {
    margin: 0 0 1.41575em;
    width: 100%;
  }
}
/* Entre 990px et 1024px  
============================================================= */
@media screen and (min-width: 990px) and (max-width: 1024px) {
  .archive ul.products {
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
  }
  .archive.left-sidebar .widget-area {
    width: 35%;
    margin-right: 5%;
  }
  .archive.left-sidebar .content-area {
    width: 60%;
  }
}
/* 1024 tablet html{color:grey;} 
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 1024px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 1024px
============================================================= */
/* Entre 1024px et 1280px  
============================================================= */
@media screen and (min-width: 1024px) and (max-width: 1280px) {
  .archive ul.products {
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
  }
  .archive.left-sidebar .widget-area {
    width: 35%;
    margin-right: 5%;
  }
  .archive.left-sidebar .content-area {
    width: 60%;
  }
}
/* 1280 grand ecran html{color:cyan;}
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 1280px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 1280px
============================================================= */
/* entre 1280px et 1366px
============================================================= */
@media screen and (min-width: 1280px) and (max-width: 1366px) {
  .archive ul.products {
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
  }
  .archive.left-sidebar .widget-area {
    width: 35%;
    margin-right: 5%;
  }
  .archive.left-sidebar .content-area {
    width: 60%;
  }
}
/* 1366px Ordinateur portable  html{color:violet;}
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 1366px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 1366px
============================================================= */
/* Entre 1366px et 1920px
============================================================= */
@media screen and (min-width: 1366px) and (max-width: 1920px) {
  .archive ul.products {
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
  }
  .archive.left-sidebar .widget-area {
    width: 25%;
    margin-right: 5%;
  }
  .archive.left-sidebar .content-area {
    width: 70%;
  }
}
/* 1920 Ordinateur portable ou de bureau haute résolution  html{color:red;}
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 1920px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 1920px
============================================================= */
/* 
version : 1.0
date : 09/11/2023
*/
/* 
┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│	PAGE SINGLE PRODUCT
└────────────────────────────────────────────────────────────────────────────────────────────────────────┘
*/
.single-product .site-content .col-full {
  max-width: var(--hdscreen);
}

.single-product #content {
  background: var(--linear1);
  padding: var(--defaultPadding);
  text-align: left;
}

.single-product.left-sidebar .content-area {
  width: 100% !important;
  max-width: var(--hdscreen);
  float: left;
  margin-left: 0;
  margin-right: 0;
}

.woocommerce-product-gallery__image {
  /* comme la colonne de la single est en % la bordure droite grise autour de l'image ne s'affiche pas */
  padding-right: 1px;
}

.woocommerce-product-gallery__image a img {
  border: 1px solid var(--neutralShade3);
  background-color: var(--canvasColor);
  position: relative;
  border-radius: var(--borderRadius);
  -webkit-border-radius: var(--borderRadius);
  -moz-border-radius: var(--borderRadius);
  -ms-border-radius: var(--borderRadius);
  -o-border-radius: var(--borderRadius);
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.05);
  /*responsive*/
  width: 100%;
  height: auto;
}

/* Colonne de droite
///////////////////////////////////////////////////////////////*/
.single-product .summary .product_title {
  font-size: 5.625rem;
  color: var(--foregroundColor);
  line-height: 5.625rem;
  font-family: var(--fontPrimary_SemiBold);
  text-align: left;
  letter-spacing: -0.1875rem;
  word-spacing: -0.1875rem;
  text-transform: uppercase;
  border-bottom: 1px solid var(--neutralShade3);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

.single-product div.product p.price {
  font-size: 0;
  margin: 0;
  display: none;
}

.single-product .summary .woocommerce-product-details__short-description {
  margin-bottom: 1.5rem;
}

.single-product .summary .woocommerce-product-details__short-description p {
  margin-bottom: 0;
}

/* a verif Titre h2 description*/
.single-product .summary h2 {
  display: none;
}

.single-product div.product table.variations th {
  padding-bottom: 0.9375rem;
}

/*label variations */
.single-product .summary LABEL,
.single-product .summary h3 {
  font-size: 1.3125rem;
  color: var(--foregroundColor);
  line-height: 1.5;
  font-family: var(--fontPrimary_SemiBold);
  border-top: none;
}

.single-product .select_box_image .select_option_image,
.single-product .select_option_label {
  border-radius: 0.25rem;
  -webkit-border-radius: 0.25rem;
  -moz-border-radius: 0.25rem;
  -ms-border-radius: 0.25rem;
  -o-border-radius: 0.25rem;
}

/* imagettes */
.single-product .select_box_image .select_option_image .yith_wccl_value,
.single-product .select_option_label .yith_wccl_value {
  border-radius: 0.25rem;
  -webkit-border-radius: 0.25rem;
  -moz-border-radius: 0.25rem;
  -ms-border-radius: 0.25rem;
  -o-border-radius: 0.25rem;
  margin: 0 auto;
}

.single-product .select_option {
  border: 1px solid var(--neutralShade3);
  margin-right: 0.75rem;
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
}

.single-product .select_option:hover {
  border-color: var(--primaryColor) !important;
}

.single-product .select_option.selected {
  border-color: var(--primaryColor);
}

.single-product .select_option.selected:hover {
  border-color: var(--primaryColor) !important;
}

.single-product .select_option.selected::before {
  background-color: var(--primaryColor);
  background-image: url("assets/images/close.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 60%;
  border-radius: 100%;
  color: var(--canvasColor);
  content: "";
  font-size: 16px;
  line-height: 15px;
  position: absolute;
  text-align: center;
  text-decoration: none;
  height: 15px;
  width: 15px;
  right: -8px;
  top: -8px;
}

/* tooltip*/
.single-product .select_option .yith_wccl_tooltip > span {
  background: var(--primaryColor);
  color: var(--canvasColor);
  box-shadow: 2px 2px 5px #999;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

.single-product .select_option .yith_wccl_tooltip.bottom span::after {
  border-bottom-color: var(--primaryColor);
}

/* select volumes avec imagettes */
.single-product .select_box_image.attribute_pa_volume .select_option_image img {
  width: 74px;
  height: 110px;
}

/* select disponibilités avec imagettes */
.single-product .select_box_image.attribute_pa_disponibilite .select_option_image img {
  width: 128px;
  height: 110px;
}

/* affichage des data-label sous les imagettes */
.single-product .select_box_image .select_option_image::after {
  content: attr(data-label);
  text-align: center;
  display: block;
  font-size: 0.8rem;
  line-height: 1rem;
  font-family: var(--fontPrimary_Light);
  padding: 2px;
}

.reset_variations {
  background-color: transparent;
  border-radius: 4px;
  font-size: 13px;
  line-height: 33px;
  margin: 40px 0 20px;
  padding: 0 8px 0 8px;
  text-align: center;
  width: auto;
  border: 1px solid var(--accent3Color);
  transition: all 0.4s ease;
  text-transform: uppercase;
  color: var(--accent3Color);
  display: inline-block;
}
.reset_variations:hover {
  background-color: var(--accent3Color);
  color: var(--canvasColor);
  text-decoration: none;
}
.reset_variations:hover::before {
  color: var(--canvasColor);
}

/* contrer marge woocommerce*/
a.reset_variations {
  margin-left: 0 !important;
}

/* temporaire */
/* forcer images galerie petite*/
.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li {
  width: 140px;
  margin-right: 40px;
  height: auto;
  border: 1px solid var(--neutralShade3);
  background-color: var(--canvasColor);
  position: relative;
  border-radius: var(--borderRadius);
  -webkit-border-radius: var(--borderRadius);
  -moz-border-radius: var(--borderRadius);
  -ms-border-radius: var(--borderRadius);
  -o-border-radius: var(--borderRadius);
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li:hover {
  border-color: var(--primaryColor);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05);
}

.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img {
  width: 100%;
  height: auto;
  display: block;
}

.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li:hover img {
  transform: scale3d(1.1, 1.1, 1);
}

/* temporaire */
/* forcer images produits similaires */
.single-product .related .products li img {
  width: 100%;
  max-width: 324px !important;
}

/* Produits similaires */
.single-product ul.products {
  margin-left: 0;
  margin-bottom: 0;
  clear: both;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 50px;
  justify-content: center;
  justify-items: center;
}

/* suppression pseudos elements de storefront qui interviennent comme des produits dans le css grid*/
.single-product ul.products::before,
.single-product ul.products::after {
  content: "";
  display: none;
}

.single-product LI.product {
  border: 1px solid var(--neutralShade3);
  background-color: var(--canvasColor);
  position: relative;
  border-radius: var(--borderRadius);
  -webkit-border-radius: var(--borderRadius);
  -moz-border-radius: var(--borderRadius);
  -ms-border-radius: var(--borderRadius);
  -o-border-radius: var(--borderRadius);
  transition: all 350ms ease-out 0s;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.single-product LI.product:hover {
  border-color: var(--primaryColor);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05);
  transform: scale(1.05);
}

/* Input quantités */
.single-product .quantity input[type=number].qty {
  text-align: center;
  width: 180px;
  background-color: var(--canvasColor);
}

/* Bouton */
.single-product .yith-ywraq-add-button {
  margin: 0.9375rem 0;
}

.single-product .yith-ywraq-add-button .add-request-quote-button.button,
.single-product .yith-ywraq-add-button .add-request-quote-button-addons.button {
  background-color: var(--primaryColor) !important;
  color: var(--canvasColor);
  border: 1px solid var(--primaryColor) !important;
}

.single-product .yith-ywraq-add-button .add-request-quote-button.button:hover,
.single-product .yith-ywraq-add-button .add-request-quote-button-addons.button:hover {
  background-color: var(--primaryShade1) !important;
  color: var(--foregroundColor) !important;
}

/* Dimensions
///////////////////////////////////////////////////////////////*/
/* Masquer initialement le poids et les dimensions pour le script de gestion affichage quantité et dimensions */
.single-product .grid-attrtibutes .dimension-item,
.single-product .grid-attrtibutes .product_weight {
  display: none;
}

/* imagettes des dimensions n css pour éviter pb affichage imagette pour le poids */
.single-product .grid-attrtibutes .dimension-weight::before {
  content: url(assets/images/attributs/ico-poids.png);
  display: block;
}

.single-product .grid-attrtibutes .dimension-diameter::before {
  content: url(assets/images/attributs/ico-diametre.png);
  display: block;
}

.single-product .grid-attrtibutes .dimension-length::before {
  content: url(assets/images/attributs/ico-longueur.png);
  display: block;
}

.single-product .grid-attrtibutes .dimension-width::before {
  content: url(assets/images/attributs/ico-largeur.png);
  display: block;
}

.single-product .grid-attrtibutes .dimension-height::before {
  content: url(assets/images/attributs/ico-hauteur.png);
  display: block;
}

.single-product .icons-info-container {
  background: var(--linear3);
  padding: 1.125rem;
  margin: 2rem 0;
  border-radius: var(--borderRadius);
  -webkit-border-radius: var(--borderRadius);
  -moz-border-radius: var(--borderRadius);
  -ms-border-radius: var(--borderRadius);
  -o-border-radius: var(--borderRadius);
}

.single-product .grid.grid-attrtibutes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1.875rem;
  justify-content: center;
  align-content: center;
  width: fit-content;
  margin: 0 auto;
}

.single-product .sku_wrapper {
  display: block;
  text-align: center;
  font-size: 1.25rem;
  padding: 1.125rem;
}

.single-product .sku_wrapper SPAN.sku {
  color: var(--primaryColor);
}

.single-product .grid-item {
  display: inline-block;
  color: var(--accentColor);
  padding: 12px;
  text-align: center;
  font-size: 12px;
}

.grid-item .dimension-label {
  text-align: center;
  display: none;
}

.grid-item .dimension-value {
  text-align: center;
  display: block;
}

.single-product .summary h4.product-info-title {
  text-align: left;
  color: var(--foregroundColor);
  letter-spacing: -0.125rem;
  font-family: var(--fontPrimary_Medium);
  font-size: 1.625rem;
  border-bottom: 0.125rem solid var(--primaryColor);
  padding-bottom: 0.5rem;
  margin-bottom: 1.25rem;
  margin-top: 2rem;
}

/* infos produit complémentaires (fiche technique) */
.single-product .product-infos-container {
  border: 1px solid var(--neutralShade3);
  background: rgba(255, 255, 255, 0.2);
  position: relative;
  border-radius: var(--borderRadius);
  -webkit-border-radius: var(--borderRadius);
  -moz-border-radius: var(--borderRadius);
  -ms-border-radius: var(--borderRadius);
  -o-border-radius: var(--borderRadius);
  /*box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.05);*/
  padding: 1.125rem;
}

.single-product .site-main ul.products.columns-3 li.product {
  width: 100%;
  float: none;
  margin-right: 0;
  max-width: 400px;
}

.single-product .site-main ul.products.columns-3 li.product img {
  max-width: 100%;
  width: 100%;
  height: auto;
}

.single-product LI.product h2,
.single-product LI.product .woocommerce-loop-product__title {
  color: var(--foregroundColor);
  font-size: 1.875rem !important;
  margin-bottom: 0 !important;
  line-height: 2.25rem;
  text-transform: uppercase;
  text-align: left;
  position: absolute;
  bottom: 20px;
  width: 100%;
  transition: all 350ms ease-out 0s;
  border-bottom: 2px solid var(--primaryColor);
  width: auto;
  margin: 0 15px;
  letter-spacing: -2px;
}

.single-product LI.product:hover h2,
.single-product LI.product:hover .woocommerce-loop-product__title {
  font-family: var(--fontPrimary_SemiBold);
}

/* imput number quantité
///////////////////////////////////////////////////////////////*/
.single-product div.product .quantity {
  position: relative;
  float: none !important;
  margin: 0 !important;
  display: flex;
}

.single-product div.product .quantity input.qty {
  text-align: center;
  height: 3.125rem;
  background-color: var(--canvasColor);
  padding: 0;
  margin: 0 0.75rem;
  border: 1px solid var(--primaryColor) !important;
  border-radius: 0.25rem;
  -webkit-border-radius: 0.25rem;
  -moz-border-radius: 0.25rem;
  -ms-border-radius: 0.25rem;
  -o-border-radius: 0.25rem;
  min-width: 120px;
  font-family: var(--fontPrimary);
  font-size: 1.125rem;
  color: var(--primaryColor);
  float: none;
}

.single-product div.product .quantity input.minus,
.single-product div.product .quantity input.plus {
  border-radius: 0.25rem;
  -webkit-border-radius: 0.25rem;
  -moz-border-radius: 0.25rem;
  -ms-border-radius: 0.25rem;
  -o-border-radius: 0.25rem;
  width: 3.125rem;
  height: 3.125rem;
  background-color: var(--primaryColor) !important;
  color: var(--canvasColor);
  border: 1px solid var(--primaryColor) !important;
  font-family: var(--fontPrimary);
  font-size: 1.875rem;
  position: relative;
  display: inline-block;
}

.single-product div.product .quantity input.minus:hover,
.single-product div.product .quantity input.plus:hover {
  background-color: var(--primaryShade1) !important;
  color: var(--foregroundColor) !important;
}

/* 
┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│	RWD PAGE SINGLE PRODUCT
└────────────────────────────────────────────────────────────────────────────────────────────────────────┘
*/
/* min-width appliquer les styles à partir d'une certaine largeur d'écran et au-delà*/
/* max-width appliquer les styles jusqu'à une certaine largeur d'écran.*/
/* 0 html{color:yellow;}
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 0px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 0
============================================================= */
/* Entre 0px et 568px  
============================================================= */
/* 568 Mobile html{color:green;} 
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 568px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 568px
============================================================= */
/* Entre 568px et 768px  
============================================================= */
/* 768 tabletportrait html{color:orange;} 
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 768px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 768px
============================================================= */
@media screen and (max-width: 768px) {
  .single-product .summary .product_title {
    font-size: 3rem;
    line-height: 1;
  }
  .single-product .summary h4.product-info-title {
    margin-top: 2rem;
  }
}
/* Entre 768px et 1024px 
============================================================= */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .single-product .summary .product_title {
    font-size: 3rem;
    line-height: 1;
  }
  .single-product .summary h4.product-info-title {
    margin-top: 2rem;
  }
}
/* 1024 tablet html{color:grey;} 
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 1024px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 1024px
============================================================= */
@media screen and (max-width: 1024px) {
  .single-product ul.products {
    grid-template-columns: 1fr;
  }
}
/* Entre 1024px et 1280px  
============================================================= */
@media screen and (min-width: 1024px) and (max-width: 1280px) {
  .single-product .summary .product_title {
    font-size: 3rem;
    line-height: 1;
  }
  .single-product .summary h4.product-info-title {
    margin-top: 2rem;
  }
}
/* 1280 grand ecran html{color:cyan;}
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 1280px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 1280px
============================================================= */
/* entre 1280px et 1366px
============================================================= */
/* 1366px Ordinateur portable  html{color:violet;}
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 1366px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 1366px
============================================================= */
/* Entre 1366px et 1920px
============================================================= */
/* 1920 Ordinateur portable ou de bureau haute résolution  html{color:red;}
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 1920px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 1920px
============================================================= */
/* 
version : 1.0
date : 09/11/2023
*/
/* 
┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│	PAGES COVERPLA
└────────────────────────────────────────────────────────────────────────────────────────────────────────┘
*/
.page-coverpla .site-content {
  text-align: left;
  background: var(--linear1);
}

.page-coverpla .entry-title {
  font-family: var(--fontPrimary_SemiBold);
  font-size: 5.625rem;
  line-height: 5.875rem;
  letter-spacing: -0.25rem;
  word-spacing: -0.5rem;
  position: relative;
  margin-bottom: 4.375rem;
  text-align: left;
}

.page-coverpla .entry-title::after {
  position: absolute;
  content: "";
  height: 2px;
  background-color: var(--primaryColor);
  width: 6.25rem;
  bottom: -1.25rem;
  left: 0;
}

/* affichage images en grid */
.page-coverpla .grid-col {
  display: grid;
  grid-gap: 15px;
  margin: 3rem 0;
}

/* affichage sur 2 colonnes */
.page-coverpla .grid-col.grid-col-2 {
  grid-template-columns: 1fr 1fr;
}

/* affichage sur 4 colonnes */
.page-coverpla .grid-col.grid-col-4 {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

/* cas particulier légende en 100% width dessous 4 imagettes pour page nos moyens */
.page-coverpla:is(.page-moyens) .grid-col.grid-col-4 div.textcaption:last-child,
.page-coverpla:is(.page-facilities) .grid-col.grid-col-4 div.textcaption:last-child {
  grid-column: span 5;
}

.page-coverpla figure figcaption,
.page-coverpla .textcaption {
  font-size: 1.125rem;
  text-align: center;
  padding: 0.5rem 0.25rem;
  border: 0;
}

.page-coverpla figure img {
  border: 1px solid var(--neutralShade3);
  border-radius: var(--borderRadius);
  -webkit-border-radius: var(--borderRadius);
  -moz-border-radius: var(--borderRadius);
  -ms-border-radius: var(--borderRadius);
  -o-border-radius: var(--borderRadius);
}

.page-coverpla H2 {
  padding: 3rem 0 1rem;
  font-family: var(--fontPrimary_SemiBold);
}

/* page histoire engagements */
.histoire_catalogues {
  padding: 7.5rem 0;
}

/* page engagements */
.engagement_logos {
  padding: 7.5rem 0;
}

.engagement_logos .grid-masonnery .grid-sizer, .engagement_logos .grid-masonnery .grid-item {
  width: 10%;
}

.engagement_logos .bigTitle,
.histoire_catalogues .bigTitle {
  font-size: 3.5rem;
  line-height: 3.5rem;
}

/* 
=================================================================================================================================     
Page agents et filiales
=================================================================================================================================    
*/
/* MASQUE titre page nos agents */
.pages-coverpla.page-agents-et-filiales .entry-header .entry-title,
.pages-coverpla.page-subsidiaries-and-agents .entry-header .entry-title {
  display: none;
}

.agents-et-filiales, .subsidiaries-and-agents {
  /* Styles pour rendre le conteneur de la carte responsive */
}
.agents-et-filiales #filiales, .subsidiaries-and-agents #filiales {
  padding: 0 0 7.5rem 0;
}
.agents-et-filiales #agents, .subsidiaries-and-agents #agents {
  padding: 0;
}
.agents-et-filiales #social-lins, .subsidiaries-and-agents #social-lins {
  margin-top: 3rem;
}
.agents-et-filiales #map-container, .subsidiaries-and-agents #map-container {
  position: relative;
  width: 100%;
  padding-bottom: 45%; /* 60% pour Ratio paysage de 1:1.6666666666666667 */
  /* supression des deux marges du wrapper lattérales */
  max-width: calc(var(--hdscreen) - 3.125rem - 3.125rem);
  border: 1px solid var(--neutralShade3);
  border-radius: var(--borderRadius);
  -webkit-border-radius: var(--borderRadius);
  -moz-border-radius: var(--borderRadius);
  -ms-border-radius: var(--borderRadius);
  -o-border-radius: var(--borderRadius);
  transition: all 350ms ease-out 0s;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.05);
}
.agents-et-filiales #map, .subsidiaries-and-agents #map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.agents-et-filiales #reset-button, .subsidiaries-and-agents #reset-button {
  margin: 3rem 0;
}
.agents-et-filiales #address-list, .subsidiaries-and-agents #address-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 2rem;
  margin: 0;
}
.agents-et-filiales #subsidiarie-list, .subsidiaries-and-agents #subsidiarie-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 2rem;
  margin: 0;
}
.agents-et-filiales .address-link.card.active, .subsidiaries-and-agents .address-link.card.active {
  background-color: var(--canvasColor);
  border-color: var(--primaryColor);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transform: scale(1.03);
  -webkit-transform: scale(1.03);
  -moz-transform: scale(1.03);
  -ms-transform: scale(1.03);
  -o-transform: scale(1.03);
}
.agents-et-filiales .address-link.card.active address::before, .subsidiaries-and-agents .address-link.card.active address::before {
  font-family: "Font Awesome 5 Free";
  content: "\f058";
  position: absolute;
  top: -12px;
  right: -4px;
  font-size: 25px;
  color: #dc9c51;
}
.agents-et-filiales .address-link.card address,
.agents-et-filiales .subsidiarie-link.card address, .subsidiaries-and-agents .address-link.card address,
.subsidiaries-and-agents .subsidiarie-link.card address {
  transition: all 0.4s ease;
  text-align: center;
  padding: 0.9375rem;
  position: relative;
  display: block;
  font-style: normal;
}
.agents-et-filiales .address-link.card address h2,
.agents-et-filiales .subsidiarie-link.card address h2, .subsidiaries-and-agents .address-link.card address h2,
.subsidiaries-and-agents .subsidiarie-link.card address h2 {
  font-size: 1.375rem;
  line-height: 1.2;
  padding: 0 0 1rem;
  font-family: var(--fontPrimary_SemiBold);
}
.agents-et-filiales .address-link.card address P,
.agents-et-filiales .subsidiarie-link.card address P, .subsidiaries-and-agents .address-link.card address P,
.subsidiaries-and-agents .subsidiarie-link.card address P {
  font-weight: normal;
}
.agents-et-filiales .address-link.card address .agent-email,
.agents-et-filiales .subsidiarie-link.card address .agent-email, .subsidiaries-and-agents .address-link.card address .agent-email,
.subsidiaries-and-agents .subsidiarie-link.card address .agent-email {
  font-weight: normal;
  margin-top: 1rem;
}

/* 
┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│	RWD PAGES COVERPLA
└────────────────────────────────────────────────────────────────────────────────────────────────────────┘
*/
/* min-width appliquer les styles à partir d'une certaine largeur d'écran et au-delà*/
/* max-width appliquer les styles jusqu'à une certaine largeur d'écran.*/
/* 0 html{color:yellow;}
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 0px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 0
============================================================= */
/* Entre 0px et 568px  
============================================================= */
/* 568 Mobile html{color:green;} 
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 568px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 568px
============================================================= */
@media screen and (max-width: 568px) {
  .agents-et-filiales #address-list, .subsidiaries-and-agents #address-list {
    grid-template-columns: repeat(1, 1fr);
  }
}
/* Entre 568px et 768px  
============================================================= */
@media screen and (min-width: 568px) and (max-width: 768px) {
  .agents-et-filiales #address-list, .subsidiaries-and-agents #address-list {
    grid-template-columns: repeat(1, 1fr);
  }
}
/* 768 tabletportrait html{color:orange;} 
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 768px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 768px
============================================================= */
@media screen and (max-width: 768px) {
  .page-coverpla .grid-col.grid-col-2 {
    grid-template-columns: 1fr;
  }
  .page-coverpla .grid-col.grid-col-4 {
    grid-template-columns: 1fr;
  }
  .agents-et-filiales #subsidiarie-list, .subsidiaries-and-agents #subsidiarie-list {
    grid-template-columns: repeat(1, 1fr);
  }
}
/* Entre 768px et 1024px 
============================================================= */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .agents-et-filiales #address-list, .subsidiaries-and-agents #address-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* 1024 tablet html{color:grey;} 
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 1024px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 1024px
============================================================= */
/* Entre 1024px et 1280px  
============================================================= */
@media screen and (min-width: 1024px) and (max-width: 1280px) {
  .agents-et-filiales #address-list, .subsidiaries-and-agents #address-list {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* 1280 grand ecran html{color:cyan;}
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 1280px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 1280px
============================================================= */
@media screen and (max-width: 1280px) {
  .page-coverpla .entry-title {
    font-size: 4rem;
    line-height: 4rem;
    letter-spacing: -0.25rem;
  }
}
/* entre 1280px et 1366px
============================================================= */
@media screen and (min-width: 1280px) and (max-width: 1366px) {
  .agents-et-filiales #address-list, .subsidiaries-and-agents #address-list {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* 1366px Ordinateur portable  html{color:violet;}
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 1366px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 1366px
============================================================= */
/* Entre 1366px et 1920px
============================================================= */
@media screen and (min-width: 1366px) and (max-width: 1920px) {
  .agents-et-filiales #address-list, .subsidiaries-and-agents #address-list {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* 1920 Ordinateur portable ou de bureau haute résolution  html{color:red;}
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 1920px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 1920px
============================================================= */
/* 
version : 1.0
date : 09/11/2023
*/
/* 
┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│	PAGE BLOG/ NEWS AND DETAIL
└────────────────────────────────────────────────────────────────────────────────────────────────────────┘
*/
/* reset */
.hentry .entry-header {
  margin: unset;
  border: unset;
}

.hentry .wp-post-image {
  margin: unset;
  display: block;
}

.page-actualites .site-content,
.category .site-content,
.blog .site-content {
  text-align: left;
  background: var(--linear1);
}

.page-actualites .site-content .col-full,
.category .site-content .col-full,
.blog .site-content .col-full {
  max-width: var(--hdscreen);
  margin-left: auto;
  margin-right: auto;
  padding: var(--defaultPadding);
}

.page-actualites .post-content,
.category .post-content,
.blog .post-content {
  align-self: center !important;
  padding: 1.5625rem;
}

.page-actualites article > a:active,
.page-actualites article > a:visited,
.page-actualites article > a:link,
.category article > a:link,
.category article > a:active,
.category article > a:visited,
.blog article > a:link,
.blog article > a:active,
.blog article > a:visited {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1.5625rem;
  color: var(--foregroundColor);
}
.page-actualites article > a:active IMG,
.page-actualites article > a:visited IMG,
.page-actualites article > a:link IMG,
.category article > a:link IMG,
.category article > a:active IMG,
.category article > a:visited IMG,
.blog article > a:link IMG,
.blog article > a:active IMG,
.blog article > a:visited IMG {
  border-radius: var(--borderRadius);
  -webkit-border-radius: var(--borderRadius);
  -moz-border-radius: var(--borderRadius);
  -ms-border-radius: var(--borderRadius);
  -o-border-radius: var(--borderRadius);
  display: block;
  height: unset;
}
.page-actualites article > a:active .entry-category,
.page-actualites article > a:visited .entry-category,
.page-actualites article > a:link .entry-category,
.category article > a:link .entry-category,
.category article > a:active .entry-category,
.category article > a:visited .entry-category,
.blog article > a:link .entry-category,
.blog article > a:active .entry-category,
.blog article > a:visited .entry-category {
  display: inline-block;
  line-height: 1;
  color: var(--canvasColor);
  background-color: var(--primaryColor);
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  padding: 6px 12px;
  font-weight: 600;
  font-size: 12px;
  border-radius: 20px;
  margin-right: 9px;
}
.page-actualites article > a:active .entry-date,
.page-actualites article > a:visited .entry-date,
.page-actualites article > a:link .entry-date,
.category article > a:link .entry-date,
.category article > a:active .entry-date,
.category article > a:visited .entry-date,
.blog article > a:link .entry-date,
.blog article > a:active .entry-date,
.blog article > a:visited .entry-date {
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--accentColor);
}
.page-actualites article > a:active .entry-title,
.page-actualites article > a:visited .entry-title,
.page-actualites article > a:link .entry-title,
.category article > a:link .entry-title,
.category article > a:active .entry-title,
.category article > a:visited .entry-title,
.blog article > a:link .entry-title,
.blog article > a:active .entry-title,
.blog article > a:visited .entry-title {
  font-size: 2rem;
  letter-spacing: -1px;
  color: var(--foregroundColor);
  font-family: var(--fontPrimary_SemiBold);
  padding: 0;
  margin: 1rem 0;
  /* lien anime */
  width: fit-content;
  -webkit-transition: background-size 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition: background-size 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
  background-image: -webkit-gradient(linear, left top, left bottom, from(currentColor), color-stop(98%, currentColor));
  background-image: linear-gradient(to bottom, currentColor 0%, currentColor 98%);
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: left 100%;
  overflow: visible !important;
  color: var(--foregroundColor);
}

.page-actualites article > a:hover,
.category article > a:hover,
.blog article > a:hover {
  color: var(--foregroundColor);
  text-decoration: none;
}
.page-actualites article > a:hover .entry-title,
.category article > a:hover .entry-title,
.blog article > a:hover .entry-title {
  color: var(--primaryColor);
  text-decoration: none;
  background-size: 100% 1px;
  -webkit-transition: background-size 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition: background-size 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
  background-image: -webkit-gradient(linear, left top, left bottom, from(currentColor), color-stop(98%, currentColor));
  background-image: linear-gradient(to bottom, currentColor 0%, currentColor 98%);
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: left 100%;
  overflow: visible !important;
  text-decoration: none;
  background-size: 100% 1px;
}

.read-more-link {
  -webkit-transition: background-size 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition: background-size 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
  background-image: -webkit-gradient(linear, left top, left bottom, from(currentColor), color-stop(98%, currentColor));
  background-image: linear-gradient(to bottom, currentColor 0%, currentColor 98%);
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: left 100%;
  overflow: visible !important;
  color: var(--primaryColor);
}

.read-more-link:hover {
  color: var(--primaryColor);
  text-decoration: none;
  background-size: 100% 1px;
  display: inline;
  padding-bottom: 0;
  -webkit-transition: background-size 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition: background-size 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
  background-image: -webkit-gradient(linear, left top, left bottom, from(currentColor), color-stop(98%, currentColor));
  background-image: linear-gradient(to bottom, currentColor 0%, currentColor 98%);
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: left 100%;
  overflow: visible !important;
  text-decoration: none;
  background-size: 100% 1px;
}

/* Pagination blog
///////////////////////////////////////////////////////////////*/
.pagination .page-numbers li a.page-numbers:hover,
.blog .page-numbers li a.page-numbers:hover,
.woocommerce-pagination .page-numbers li a.page-numbers:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.pagination .page-numbers li .page-numbers.current,
.blog .page-numbers li .page-numbers.current {
  background-color: var(--primaryColor);
  color: var(--canvasColor);
}

/* 
=================================================================================================================================     
Détail Actualités Archives
=================================================================================================================================    
*/
.single-post {
  text-align: left;
}

.single-post .site-content {
  text-align: left;
  background: var(--linear1);
}

.single-post .site-content .col-full {
  max-width: var(--hdscreen);
  margin-left: auto;
  margin-right: auto;
  padding: var(--defaultPadding);
}

/* Forcer les images à 100% pour être responsives */
.single-post img {
  max-width: 100%;
  width: 100%;
  height: auto;
  border-radius: var(--borderRadius);
  -webkit-border-radius: var(--borderRadius);
  -moz-border-radius: var(--borderRadius);
  -ms-border-radius: var(--borderRadius);
  -o-border-radius: var(--borderRadius);
}

.single-post .entry-category {
  display: inline-block;
  line-height: 1;
  color: var(--canvasColor);
  background-color: var(--primaryColor);
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  padding: 6px 12px;
  font-weight: 600;
  font-size: 12px;
  border-radius: 20px;
  margin-right: 9px;
}

.single-post .entry-date {
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--accentColor);
}

.single-post .entry-title {
  font-size: 3rem;
  letter-spacing: -2px;
  color: var(--foregroundColor);
  font-family: var(--fontPrimary_SemiBold);
  padding: 0 0 2rem;
  margin-bottom: 0;
  line-height: 1.2;
}

.single-post .post-content {
  margin-top: 2rem;
}

/* bouton lien téléchargement dossier de presse */
a.button,
input.button,
button {
  outline: none;
  width: auto;
  text-align: center;
  text-transform: uppercase;
  display: inline-block;
  padding: 20px;
  cursor: pointer !important;
  border-radius: var(--borderRadius);
  background: var(--primaryColor);
  border: 1px solid transparent;
  color: var(--backgroundColor);
  position: relative;
  top: 0;
  transition: 0.2s ease;
  text-decoration: none;
  font-weight: 600;
}
a.button:hover,
input.button:hover,
button:hover {
  background-color: var(--primaryShade1);
  border-color: var(--primaryColor);
  color: var(--foregroundColor);
  text-decoration: none;
}

.wp-block-button__link {
  outline: none;
  width: auto;
  text-align: center;
  text-transform: uppercase;
  display: inline-block;
  padding: 20px;
  cursor: pointer !important;
  border-radius: var(--borderRadius);
  background-color: var(--primaryColor) !important;
  border: 1px solid transparent;
  color: var(--backgroundColor) !important;
  position: relative;
  top: 0;
  transition: 0.2s ease;
  text-decoration: none;
  font-weight: 600;
  font-size: unset;
}
.wp-block-button__link:hover {
  background-color: var(--primaryShade1) !important;
  border-color: var(--primaryColor) !important;
  color: var(--foregroundColor) !important;
  text-decoration: none;
}

/* Side Bar 
////////////////////////////////////////////////////////////*/
.page-actualites aside .widget .widget-title,
.category aside .widget .widget-title,
.single-post aside .widget .widget-title {
  text-align: left;
  letter-spacing: -0.125rem;
  font-family: var(--fontPrimary_Medium);
  font-size: 1.625rem;
  border-bottom: 0.125rem solid var(--primaryColor);
  padding-bottom: 0.5rem;
  margin-bottom: 1.25rem;
}

.page-actualites .widget_categories ul li,
.page-actualites .widget_recent_entries ul li,
.category .widget_categories ul li,
.category .widget_recent_entries ul li,
.single-post aside .widget_categories ul li,
.single-post aside .widget_recent_entries ul li {
  padding-left: 0;
}

.page-actualites .widget_categories ul li::before,
.page-actualites .widget_recent_entries ul li::before,
.category .widget_categories ul li::before,
.category .widget_recent_entries ul li::before,
.single-post aside .widget_categories ul li::before,
.single-post aside .widget_recent_entries ul li::before {
  display: none;
  margin: 0;
  float: none;
  margin-left: 0;
  width: 0;
}

/*
liens catégories et posts récents colonne de gauche
////////////////////////////////////////////////////////////*/
.page-actualites .widget-area .widget_categories ul li,
.category .widget-area .widget_categories ul li,
.page-actualites .widget-area .widget_recent_entries ul li,
.category .widget-area .widget_recent_entries ul li {
  margin-bottom: 0.5em;
}

.page-actualites .widget-area .widget a,
.category .widget-area .widget a,
.single-post .widget-area .widget a {
  font-family: var(--fontPrimary);
  font-weight: unset;
  color: var(--foregroundColor);
  text-decoration: none;
  -webkit-transition: background-size 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition: background-size 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
  background-image: -webkit-gradient(linear, left top, left bottom, from(currentColor), color-stop(98%, currentColor));
  background-image: linear-gradient(to bottom, currentColor 0%, currentColor 98%);
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: left 100%;
  overflow: visible !important;
}

.page-actualites .widget-area .widget a:hover,
.category .widget-area .widget a:hover,
.single-post aside .widget-area .widget a:hover {
  color: var(--primaryColor);
  text-decoration: none;
  background-size: 100% 1px;
  display: inline;
  padding-bottom: 0;
  -webkit-transition: background-size 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition: background-size 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
  background-image: -webkit-gradient(linear, left top, left bottom, from(currentColor), color-stop(98%, currentColor));
  background-image: linear-gradient(to bottom, currentColor 0%, currentColor 98%);
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: left 100%;
  overflow: visible !important;
  text-decoration: none;
  background-size: 100% 1px;
}

.page-actualites .widget-area .widget .essb-social-followers-variables a:hover {
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: left 100%;
  overflow: visible !important;
  text-decoration: none;
}

.page-actualites li.cat-item.current-cat a,
.category li.cat-item.current-cat a,
.single-post aside li.cat-item.current-cat a {
  color: var(--primaryColor);
}

aside > div:first-child .textwidget a {
  color: var(--accentColor);
  border: 1px solid var(--accentColor);
  border-radius: var(--borderRadius);
  -webkit-border-radius: var(--borderRadius);
  -moz-border-radius: var(--borderRadius);
  -ms-border-radius: var(--borderRadius);
  -o-border-radius: var(--borderRadius);
  display: inline-block;
  padding: 4px 12px !important;
  font-size: 1rem;
  font-weight: 400;
  margin-bottom: 0.3125rem;
}
aside > div:first-child .textwidget a:hover {
  border: 1px solid var(--primaryColor);
  background-color: var(--primaryShade1);
  color: var(--foregroundColor) !important;
  text-decoration: none;
  color: var(--primaryColor);
  transition: none !important;
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
  background-image: none !important;
  background-size: unset !important;
  background-repeat: unset !important;
  background-position: unset !important;
  overflow: unset !important;
  display: inline-block !important;
  padding: 4px 12px !important;
}

/* 
┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│	RWD BLOG/ NEWS AND DETAIL
└────────────────────────────────────────────────────────────────────────────────────────────────────────┘
*/
/* min-width appliquer les styles à partir d'une certaine largeur d'écran et au-delà*/
/* max-width appliquer les styles jusqu'à une certaine largeur d'écran.*/
/* 0 html{color:yellow;}
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 0px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 0
============================================================= */
/* Entre 0px et 568px  
============================================================= */
/* 568 Mobile html{color:green;} 
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 568px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 568px
============================================================= */
/* Entre 568px et 768px  
============================================================= */
/* 768 tabletportrait html{color:orange;} 
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 768px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 768px
============================================================= */
@media screen and (max-width: 768px) {
  .single-post .entry-title {
    font-size: 2.4rem;
    line-height: 1.2;
  }
}
/* Entre 768px et 1024px 
============================================================= */
/* 1024 tablet html{color:grey;} 
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 1024px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 1024px
============================================================= */
/* Entre 1024px et 1280px  
============================================================= */
/* 1280 grand ecran html{color:cyan;}
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 1280px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 1280px
============================================================= */
@media screen and (max-width: 1280px) {
  .page-actualites article > a:active,
  .page-actualites article > a:visited,
  .page-actualites article > a:link,
  .category article > a:link,
  .category article > a:active,
  .category article > a:visited,
  .blog article > a:link,
  .blog article > a:active,
  .blog article > a:visited {
    grid-template-columns: 1fr;
  }
}
/* entre 1280px et 1366px
============================================================= */
/* 1366px Ordinateur portable  html{color:violet;}
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 1366px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 1366px
============================================================= */
/* Entre 1366px et 1920px
============================================================= */
/* 1920 Ordinateur portable ou de bureau haute résolution  html{color:red;}
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 1920px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 1920px
============================================================= */
/* 
version : 1.0
date : 09/11/2023
*/
/* 
┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│	MY ACCONT - REGISTER / LOGIN - CONTACT
└────────────────────────────────────────────────────────────────────────────────────────────────────────┘
*/
.mon-compte .site-content,
.woocommerce-account .site-content,
.page-contactez-nous .site-content,
.page-contact-us .site-content {
  text-align: left;
  background: var(--linear1);
}
.mon-compte .site-content .yith-wcmap .user-profile .user-info .username,
.woocommerce-account .site-content .yith-wcmap .user-profile .user-info .username,
.page-contactez-nous .site-content .yith-wcmap .user-profile .user-info .username,
.page-contact-us .site-content .yith-wcmap .user-profile .user-info .username {
  font-weight: 600;
  font-size: 28px;
}
.mon-compte .site-content .yith-wcmap .user-profile .user-info .logout a,
.woocommerce-account .site-content .yith-wcmap .user-profile .user-info .logout a,
.page-contactez-nous .site-content .yith-wcmap .user-profile .user-info .logout a,
.page-contact-us .site-content .yith-wcmap .user-profile .user-info .logout a {
  outline: none;
  width: auto;
  text-align: center;
  text-transform: uppercase;
  display: inline-block;
  padding: 20px;
  cursor: pointer !important;
  border-radius: var(--borderRadius);
  background: var(--primaryColor);
  border: 1px solid transparent;
  color: var(--backgroundColor);
  position: relative;
  top: 0;
  transition: 0.2s ease;
  text-decoration: none;
  font-weight: 600;
}
.mon-compte .site-content .yith-wcmap .user-profile .user-info .logout a:hover,
.woocommerce-account .site-content .yith-wcmap .user-profile .user-info .logout a:hover,
.page-contactez-nous .site-content .yith-wcmap .user-profile .user-info .logout a:hover,
.page-contact-us .site-content .yith-wcmap .user-profile .user-info .logout a:hover {
  background-color: var(--primaryShade1);
  border-color: var(--primaryColor);
  color: var(--foregroundColor);
  text-decoration: none;
}
.mon-compte .site-content .entry-title,
.woocommerce-account .site-content .entry-title,
.page-contactez-nous .site-content .entry-title,
.page-contact-us .site-content .entry-title {
  font-family: var(--fontPrimary_SemiBold);
  font-size: 5.625rem;
  line-height: 5.875rem;
  letter-spacing: -0.25rem;
  word-spacing: -0.5rem;
  position: relative;
  margin-bottom: 4.375rem;
  text-align: left;
}
.mon-compte .site-content .entry-title::after,
.woocommerce-account .site-content .entry-title::after,
.page-contactez-nous .site-content .entry-title::after,
.page-contact-us .site-content .entry-title::after {
  position: absolute;
  content: "";
  height: 2px;
  background-color: var(--primaryColor);
  width: 6.25rem;
  bottom: -1.25rem;
  left: 0;
}
.mon-compte .site-content .content-area .entry-content,
.woocommerce-account .site-content .content-area .entry-content,
.page-contactez-nous .site-content .content-area .entry-content,
.page-contact-us .site-content .content-area .entry-content {
  background-color: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--neutralShade3);
  background-color: var(--cardBackground);
  position: relative;
  border-radius: var(--borderRadius);
  -webkit-border-radius: var(--borderRadius);
  -moz-border-radius: var(--borderRadius);
  -ms-border-radius: var(--borderRadius);
  -o-border-radius: var(--borderRadius);
  transition: all 350ms ease-out 0s;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.05);
  padding: 3.125rem;
}

/* entoure tous les formulaires */
.panel-login {
  border: 0px solid rgba(133, 135, 139, 0.15);
  margin-bottom: 50px;
}

.panel-login .panel-heading {
  overflow: hidden;
  text-align: center;
  margin-bottom: 3rem;
}

.panel-login .panel-heading a#register-form-link {
  border-radius: 10px 0 0 10px;
  -webkit-border-radius: 10px 0 0 10px;
  -moz-border-radius: 10px 0 0 10px;
  -ms-border-radius: 10px 0 0 10px;
  -o-border-radius: 10px 0 0 10px;
  float: left;
}

.panel-login .panel-heading a#login-form-link {
  border-radius: 0 10px 10px 0;
  -webkit-border-radius: 0 10px 10px 0;
  -moz-border-radius: 0 10px 10px 0;
  -ms-border-radius: 0 10px 10px 0;
  -o-border-radius: 0 10px 10px 0;
  float: right;
}

.panel-login .panel-heading a#register-form-link,
.panel-login .panel-heading a#login-form-link {
  padding: 20px 30px;
  display: block;
  text-align: center;
  width: 50%;
  color: var(--neutralShade5);
  font-size: 16px;
  text-decoration: none;
  background-color: #f3f3f3;
  box-shadow: 2px 2px 15px 0px #d3d4d6 inset;
  border: 1px solid rgba(133, 135, 139, 0.15);
  border-bottom-color: rgba(133, 135, 139, 0.15);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  transition: 0.2s ease;
  text-transform: uppercase;
}

.panel-login .panel-heading a#register-form-link.active,
.panel-login .panel-heading a#login-form-link.active {
  background-color: var(--primaryColor);
  color: var(--canvasColor);
  font-family: var(--fontPrimary_SemiBold);
  box-shadow: none;
  text-decoration: none;
}

.panel-login .panel-heading a#register-form-link:hover,
.panel-login .panel-heading a#login-form-link:hover {
  background-color: var(--primaryShade1);
  border-color: var(--primaryColor);
  color: var(--foregroundColor);
}

/* spécifique onglet Modifier mes adresses */
.woocommerce-edit-address .addresses header.title h3 {
  font-weight: 800;
  letter-spacing: normal;
}

/* correction titres woocommerces trop grands */
.woocommerce-MyAccount-content h2 {
  font-size: 2rem;
  font-weight: 600;
}

/* spécifique tab login de la page inscription / identification */
#customer_login button.woocommerce-form-login__submit {
  margin-top: 1rem;
}

/* 
┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│	RWD MY ACCONT - REGISTER / LOGIN - CONTACT
└────────────────────────────────────────────────────────────────────────────────────────────────────────┘
*/
/* min-width appliquer les styles à partir d'une certaine largeur d'écran et au-delà*/
/* max-width appliquer les styles jusqu'à une certaine largeur d'écran.*/
/* 0 html{color:yellow;}
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 0px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 0
============================================================= */
/* Entre 0px et 568px  
============================================================= */
/* 568 Mobile html{color:green;} 
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 568px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 568px
============================================================= */
/* Entre 568px et 768px  
============================================================= */
/* 768 tabletportrait html{color:orange;} 
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 768px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 768px
============================================================= */
@media screen and (max-width: 768px) {
  .panel-login .panel-heading a {
    min-height: 100px;
  }
}
/* Entre 768px et 1024px 
============================================================= */
/* 1024 tablet html{color:grey;} 
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 1024px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 1024px
============================================================= */
/* Entre 1024px et 1280px  
============================================================= */
/* 1280 grand ecran html{color:cyan;}
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 1280px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 1280px
============================================================= */
/* entre 1280px et 1366px
============================================================= */
/* 1366px Ordinateur portable  html{color:violet;}
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 1366px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 1366px
============================================================= */
/* Entre 1366px et 1920px
============================================================= */
/* 1920 Ordinateur portable ou de bureau haute résolution  html{color:red;}
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 1920px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 1920px
============================================================= */
/* 
version : 1.0
date : 09/11/2023
*/
/* 
┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│	REQUEST A QUOTE (demande de devis)
└────────────────────────────────────────────────────────────────────────────────────────────────────────┘
*/
/* identifié sur le site */
.yith-request-a-quote-page {
  /* imput number quantité */
}
.yith-request-a-quote-page .site-content {
  text-align: left;
  background: var(--linear1);
}
.yith-request-a-quote-page #yith-ywraq-form table {
  border: 1px solid var(--neutralShade3);
  border-radius: var(--borderRadius);
  -webkit-border-radius: var(--borderRadius);
  -moz-border-radius: var(--borderRadius);
  -ms-border-radius: var(--borderRadius);
  -o-border-radius: var(--borderRadius);
  margin-top: 3rem;
}
.yith-request-a-quote-page .ywraq-wrapper.ywraq-with-form {
  margin-top: 3rem;
}
.yith-request-a-quote-page table.cart td {
  border-top-color: var(--canvasColor);
  vertical-align: middle;
}
.yith-request-a-quote-page table.cart .product-thumbnail img {
  border: 1px solid var(--neutralShade3);
  border-radius: var(--borderRadius);
  -webkit-border-radius: var(--borderRadius);
  -moz-border-radius: var(--borderRadius);
  -ms-border-radius: var(--borderRadius);
  -o-border-radius: var(--borderRadius);
}
.yith-request-a-quote-page .product-quantity .quantity {
  position: relative;
  float: none !important;
  margin: 0 !important;
  display: flex;
  justify-content: flex-end;
}
.yith-request-a-quote-page .product-quantity .quantity input.qty {
  text-align: center;
  height: 3.125rem;
  background-color: var(--canvasColor);
  padding: 0;
  margin: 0 0.75rem;
  border: 1px solid var(--primaryColor) !important;
  border-radius: 0.25rem;
  -webkit-border-radius: 0.25rem;
  -moz-border-radius: 0.25rem;
  -ms-border-radius: 0.25rem;
  -o-border-radius: 0.25rem;
  min-width: 120px;
  font-family: var(--fontPrimary);
  font-size: 1.125rem;
  color: var(--primaryColor);
  float: none;
}
.yith-request-a-quote-page .product-quantity .quantity input.minus,
.yith-request-a-quote-page .product-quantity .quantity input.plus {
  border-radius: 0.25rem;
  -webkit-border-radius: 0.25rem;
  -moz-border-radius: 0.25rem;
  -ms-border-radius: 0.25rem;
  -o-border-radius: 0.25rem;
  width: 3.125rem;
  height: 3.125rem;
  background-color: var(--primaryColor) !important;
  color: var(--canvasColor);
  border: 1px solid var(--primaryColor) !important;
  font-family: var(--fontPrimary);
  font-size: 1.875rem;
  position: relative;
  display: inline-block;
}
.yith-request-a-quote-page .product-quantity .quantity input.minus:hover,
.yith-request-a-quote-page .product-quantity .quantity input.plus:hover {
  background-color: var(--primaryShade1) !important;
  color: var(--foregroundColor) !important;
}

/* non identifié sur le site */
.yith-request-a-quote-page {
  /* ecrasement formatage ajaxlogin*/
}
.yith-request-a-quote-page .panel-login-raq {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 3rem;
}
.yith-request-a-quote-page .panel-login-raq #login-form-raq,
.yith-request-a-quote-page .panel-login-raq #register-form-raq {
  background-color: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--neutralShade3);
  background-color: var(--cardBackground);
  position: relative;
  border-radius: var(--borderRadius);
  -webkit-border-radius: var(--borderRadius);
  -moz-border-radius: var(--borderRadius);
  -ms-border-radius: var(--borderRadius);
  -o-border-radius: var(--borderRadius);
  transition: all 350ms ease-out 0s;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.05);
  padding: 3.125rem;
  margin-bottom: 3rem;
}
.yith-request-a-quote-page .title-raq {
  font-size: 1.3125rem;
  color: var(--foregroundColor);
  line-height: 1.5;
  font-family: var(--fontPrimary_SemiBold);
  text-transform: uppercase;
  padding-bottom: 1.5rem;
}
.yith-request-a-quote-page #register-form-raq button {
  display: block;
  margin-top: 3rem;
}
.yith-request-a-quote-page .ywraq-wrapper.ywraq-empty {
  margin-top: 1.5rem;
}
.yith-request-a-quote-page .lwa-bones .pixelbones input[type=text],
.yith-request-a-quote-page .lwa-bones .pixelbones input[type=number],
.yith-request-a-quote-page .lwa-bones .pixelbones input[type=email],
.yith-request-a-quote-page .lwa-bones .pixelbones input[type=tel],
.yith-request-a-quote-page .lwa-bones .pixelbones input[type=url],
.yith-request-a-quote-page .lwa-bones .pixelbones input[type=password],
.yith-request-a-quote-page .lwa-bones .pixelbones input[type=search],
.yith-request-a-quote-page .lwa-bones .pixelbones textarea,
.yith-request-a-quote-page .lwa-bones .pixelbones .input-text {
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.125) !important;
  height: 50px !important;
  font-size: 16px !important;
  border: 1px solid var(--neutralShade3) !important;
  width: 100% !important;
  padding: 12px !important;
  font-family: "Montserrat" !important;
  border-radius: var(--borderRadius);
  color: var(--foregroundColor);
  background: var(--backgroundColor) !important;
}
.yith-request-a-quote-page .lwa-bones .pixelbones input[type=text]:focus, .yith-request-a-quote-page .lwa-bones .pixelbones input[type=text].active,
.yith-request-a-quote-page .lwa-bones .pixelbones input[type=number]:focus,
.yith-request-a-quote-page .lwa-bones .pixelbones input[type=number].active,
.yith-request-a-quote-page .lwa-bones .pixelbones input[type=email]:focus,
.yith-request-a-quote-page .lwa-bones .pixelbones input[type=email].active,
.yith-request-a-quote-page .lwa-bones .pixelbones input[type=tel]:focus,
.yith-request-a-quote-page .lwa-bones .pixelbones input[type=tel].active,
.yith-request-a-quote-page .lwa-bones .pixelbones input[type=url]:focus,
.yith-request-a-quote-page .lwa-bones .pixelbones input[type=url].active,
.yith-request-a-quote-page .lwa-bones .pixelbones input[type=password]:focus,
.yith-request-a-quote-page .lwa-bones .pixelbones input[type=password].active,
.yith-request-a-quote-page .lwa-bones .pixelbones input[type=search]:focus,
.yith-request-a-quote-page .lwa-bones .pixelbones input[type=search].active,
.yith-request-a-quote-page .lwa-bones .pixelbones textarea:focus,
.yith-request-a-quote-page .lwa-bones .pixelbones textarea.active,
.yith-request-a-quote-page .lwa-bones .pixelbones .input-text:focus,
.yith-request-a-quote-page .lwa-bones .pixelbones .input-text.active {
  outline: none !important;
  border-color: var(--primaryColor) !important;
  background: var(--backgroundColor) !important;
}
.yith-request-a-quote-page .lwa-bones .pixelbones input[type=text]:disabled,
.yith-request-a-quote-page .lwa-bones .pixelbones input[type=number]:disabled,
.yith-request-a-quote-page .lwa-bones .pixelbones input[type=email]:disabled,
.yith-request-a-quote-page .lwa-bones .pixelbones input[type=tel]:disabled,
.yith-request-a-quote-page .lwa-bones .pixelbones input[type=url]:disabled,
.yith-request-a-quote-page .lwa-bones .pixelbones input[type=password]:disabled,
.yith-request-a-quote-page .lwa-bones .pixelbones input[type=search]:disabled,
.yith-request-a-quote-page .lwa-bones .pixelbones textarea:disabled,
.yith-request-a-quote-page .lwa-bones .pixelbones .input-text:disabled {
  cursor: not-allowed !important;
  background: var(--neutralShade1) !important;
  opacity: 0.6 !important;
}
.yith-request-a-quote-page .lwa-bones .pixelbones .button.button-primary,
.yith-request-a-quote-page .lwa-bones .pixelbones button.button-primary,
.yith-request-a-quote-page .lwa-bones .pixelbones input[type=button].button-primary,
.yith-request-a-quote-page .lwa-bones .pixelbones input[type=reset].button-primary,
.yith-request-a-quote-page .lwa-bones .pixelbones input[type=submit].button-primary {
  height: unset !important;
  padding: 20px !important;
  color: var(--backgroundColor) !important;
  font-size: unset !important;
  font-weight: 600 !important;
  line-height: unset !important;
  letter-spacing: unset !important;
  outline: none !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  background-color: var(--primaryColor) !important;
  width: auto;
  text-align: center;
  display: inline-block !important;
  cursor: pointer !important;
  border-radius: var(--borderRadius);
  -webkit-border-radius: var(--borderRadius) !important;
  -moz-border-radius: var(--borderRadius) !important;
  -ms-border-radius: var(--borderRadius) !important;
  -o-border-radius: var(--borderRadius) !important;
  border: 1px solid transparent !important;
  position: relative;
  top: 0;
  transition: 0.2s ease;
  text-decoration: none;
}
.yith-request-a-quote-page .lwa-bones .pixelbones .button.button-primary:hover,
.yith-request-a-quote-page .lwa-bones .pixelbones button.button-primary:hover,
.yith-request-a-quote-page .lwa-bones .pixelbones input[type=button].button-primary:hover,
.yith-request-a-quote-page .lwa-bones .pixelbones input[type=reset].button-primary:hover,
.yith-request-a-quote-page .lwa-bones .pixelbones input[type=submit].button-primary:hover {
  background-color: var(--primaryShade1) !important;
  border-color: var(--primaryColor) !important;
  color: var(--foregroundColor) !important;
  text-decoration: none;
}
.yith-request-a-quote-page .lwa-bones .pixelbones a {
  color: var(--primaryColor) !important;
  background-color: transparent !important;
}
.yith-request-a-quote-page .lwa-bones .pixelbones a:hover {
  text-decoration: underline;
}
.yith-request-a-quote-page .lwa-bones .pixelbones input[type=checkbox] {
  width: 20px !important;
  height: 20px !important;
}
.yith-request-a-quote-page .lwa-bones .pixelbones input[type=checkbox]:after {
  width: 7px !important;
  height: 11px !important;
  border-color: var(--primaryColor) !important;
}
.yith-request-a-quote-page .lwa-bones .pixelbones input[type=checkbox]:checked {
  border-color: var(--primaryColor) !important;
}

/* 
┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│	RWD MY ACCONT - REGISTER / LOGIN - CONTACT
└────────────────────────────────────────────────────────────────────────────────────────────────────────┘
*/
/* min-width appliquer les styles à partir d'une certaine largeur d'écran et au-delà*/
/* max-width appliquer les styles jusqu'à une certaine largeur d'écran.*/
/* 0 html{color:yellow;}
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 0px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 0
============================================================= */
/* Entre 0px et 568px  
============================================================= */
/* 568 Mobile html{color:green;} 
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 568px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 568px
============================================================= */
/* Entre 568px et 768px  
============================================================= */
/* 768 tabletportrait html{color:orange;} 
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 768px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 768px
============================================================= */
/* Entre 768px et 1024px 
============================================================= */
/* 1024 tablet html{color:grey;} 
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 1024px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 1024px
============================================================= */
@media screen and (max-width: 1024px) {
  .yith-request-a-quote-page .panel-login-raq {
    grid-template-columns: 1fr;
  }
}
/* Entre 1024px et 1280px  
============================================================= */
/* 1280 grand ecran html{color:cyan;}
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 1280px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 1280px
============================================================= */
/* entre 1280px et 1366px
============================================================= */
/* 1366px Ordinateur portable  html{color:violet;}
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 1366px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 1366px
============================================================= */
/* Entre 1366px et 1920px
============================================================= */
/* 1920 Ordinateur portable ou de bureau haute résolution  html{color:red;}
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 1920px et au delà en partant de 0 
============================================================= */
/* De 0 jusqu'à largeur maximum de 1920px
============================================================= */