@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);
}

/* ---- Accessibilité — Respect des préférences de mouvement ----
 * Réduit toutes les transitions et animations à une durée imperceptible.
 * Les animations infinies (pulsations, rotations) sont stoppées complètement
 * car elles sont les plus susceptibles de causer des vertiges ou crises.
 * Note : 0.01ms plutôt que 0 pour ne pas casser les callbacks JS
 * qui écoutent animationend/transitionend.
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  .pulsation,
  #coverpla-sticky-contact {
    animation: none !important;
  }
}
/* 
version : 1.0
date : 09/11/2023
*/
/* 
┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│	TYPOGRAPHY
└────────────────────────────────────────────────────────────────────────────────────────────────────────┘
*/
/* Ajout local polices Montserrat
///////////////////////////////////////////////////////////////*/
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-display: swap;
  src: url("assets/fonts/Montserrat-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat_Black";
  font-style: normal;
  font-display: swap;
  src: url("assets/fonts/Montserrat-Black.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat_Bold";
  font-style: normal;
  font-display: swap;
  src: url("assets/fonts/Montserrat-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat_SemiBold";
  font-style: normal;
  font-display: swap;
  src: url("assets/fonts/Montserrat-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat_Medium";
  font-style: normal;
  font-display: swap;
  src: url("assets/fonts/Montserrat-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat_Light";
  font-style: normal;
  font-display: swap;
  src: url("assets/fonts/Montserrat-Light.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat_Thin";
  font-style: normal;
  font-display: swap;
  src: url("assets/fonts/Montserrat-Thin.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat_ExtraBold";
  font-style: normal;
  font-display: swap;
  src: url("assets/fonts/Montserrat-ExtraBold.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat_ExtraLight";
  font-style: normal;
  font-display: swap;
  src: url("assets/fonts/Montserrat-ExtraLight.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat_Italic";
  font-style: italic;
  font-display: swap;
  src: url("assets/fonts/Montserrat-Italic.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat_BlackItalic";
  font-style: italic;
  font-display: swap;
  src: url("assets/fonts/Montserrat-BlackItalic.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat_BoldItalic";
  font-style: italic;
  font-display: swap;
  src: url("assets/fonts/Montserrat-BoldItalic.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat_SemiBoldItalic";
  font-style: italic;
  font-display: swap;
  src: url("assets/fonts/Montserrat-SemiBoldItalic.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat_MediumItalic";
  font-style: italic;
  font-display: swap;
  src: url("assets/fonts/Montserrat-MediumItalic.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat_LightItalic";
  font-style: italic;
  font-display: swap;
  src: url("assets/fonts/Montserrat-LightItalic.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat_ExtraLightItalic";
  font-style: italic;
  font-display: swap;
  src: url("assets/fonts/Montserrat-ExtraLightItalic.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat_ThinItalic";
  font-style: italic;
  src: url("assets/fonts/Montserrat-ThinItalic.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat_ExtraBoldItalic";
  font-style: italic;
  src: url("assets/fonts/Montserrat-ExtraBoldItalic.woff2") format("woff2");
}
/* Ajout local polices Akrobat
///////////////////////////////////////////////////////////////*/
@font-face {
  font-family: "Akrobat";
  font-style: normal;
  font-display: swap;
  src: url("assets/fonts/Akrobat-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Akrobat_Thin";
  font-style: normal;
  font-display: swap;
  src: url("assets/fonts/Akrobat-Thin.woff2") format("woff2");
}
@font-face {
  font-family: "Akrobat_ExtraLight";
  font-style: normal;
  font-display: swap;
  src: url("assets/fonts/Akrobat-ExtraLight.woff2") format("woff2");
}
@font-face {
  font-family: "Akrobat_Light";
  font-style: normal;
  font-display: swap;
  src: url("assets/fonts/Akrobat-Light.woff2") format("woff2");
}
@font-face {
  font-family: "Akrobat_SemiBold";
  font-style: normal;
  font-display: swap;
  src: url("assets/fonts/Akrobat-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Akrobat_Bold";
  font-style: normal;
  font-display: swap;
  src: url("assets/fonts/Akrobat-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Akrobat_ExtraBold";
  font-style: normal;
  font-display: swap;
  src: url("assets/fonts/Akrobat-ExtraBold.woff2") format("woff2");
}
@font-face {
  font-family: "Akrobat_Black";
  font-style: normal;
  font-display: swap;
  src: url("assets/fonts/Akrobat-Black.woff2") format("woff2");
}
/* Ajout local polices google material symbols outlined icons
///////////////////////////////////////////////////////////////*/
@font-face {
  font-family: "Material_Symbols_Rounded";
  font-style: normal;
  font-display: swap;
  src: url("assets/fonts/googleMaterialIcons/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2") format("woff2");
}
/* Global text settings 
///////////////////////////////////////////////////////////////*/
strong {
  font-family: var(--fontPrimary_SemiBold);
  font-weight: initial;
}

em {
  font-style: italic;
}

/* Titre de niveau 1 - 6
============================================================= */
h1 {
  font-size: var(--fs-2xl);
  line-height: var(--leading-display);
  margin-bottom: 10px;
}

h2 {
  font-size: var(--fs-xl);
  line-height: var(--leading-display);
  margin-bottom: 10px;
}

h3 {
  font-size: var(--fs-lg);
  line-height: var(--leading-title);
  margin-bottom: 10px;
}

h4 {
  font-size: var(--fs-md);
  line-height: var(--leading-title);
  margin-bottom: 10px;
}

h5 {
  font-size: var(--fs-sm);
  line-height: var(--leading-title);
  margin-bottom: 10px;
}

h6 {
  font-size: var(--fs-xs);
  line-height: var(--leading-body);
  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-primary-ExtraBold {
  font-family: var(--fontPrimary_ExtraBold);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.material-symbols-rounded {
  font-family: "Material_Symbols_Rounded";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
  direction: ltr;
  color: inherit;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

/*////////////////////////////////////////////////////////////
VARIABLES
////////////////////////////////////////////////////////////*/
:root {
  /* couleurs utilisées dans le site */
  --neutralWhite: #fff;
  --canvasColor: var(--neutralWhite);
  --foregroundColor: var(--primaryColor);
  --backgroundColor: var(--neutralWhite);
  /* couleur principale */
  --primaryColor: #222221;
  /* couleur orange doré */
  --secondaryColor:#B99A7D;
  --secondaryColorShade1:#C0A389;
  --secondaryColorShade2:#CDB7A1;
  --secondaryColorShade3:#DACBBB;
  --secondaryColorShade4:#E6D6C8; /* fond icone saumon */
  /* couleur Vert ecoresponsable */
  --accentGreen:#BDD5A0;
  --accentGreenShade1:#C4D9AA;
  --accentGreenShade2:#D2E2BD;
  --accentGreenShade3:#DFEAD1;
  /* couleur Turquoise */
  --accentTurquoise:#6DB1BB;
  --accentTurquoiseShade1:#7EB9C2;
  --accentTurquoiseShade2:#9FC9D0;
  --accentTurquoiseShade3:#BDD9DE;
  /* couleur Bleu */
  --accentBlue:#8DB2CD;
  --accentBlueShade1:#99B9D2;
  --accentBlueShade2:#B1C8DC;
  --accentBlueShade3:#C8D7E6;
  /* couleur Rouge */
  --accentRed:#f44336;
  --accentRedShade1:#ffdde0;
  --accentRedShade2:#ef9a9a;
  --accentRedShade3:#d32f2f;
  /* couleur neutres */
  --neutralGrey: #B7B8BC;
  --neutralGreyShade1: #BFC0C3;
  --neutralGreyShade2: #CDCED1;
  --neutralGreyShade3: #DBDCDE;
  --neutralGreyShade4: #f6f6f6; /* background */
  /* couleur informations */
  /* Messages erreurs */
  --errorColor: #a24545;
  --errorBackgroundColor: #f1c1c1;
  /* Messages info */
  --infoColor: #2d6a8f;
  --infoBackgroundColor: var(--accentBlueShade3);
  /* Messages succes */
  --successColor: #4a6b2e;
  --successBackgroundColor: var(--accentGreenShade3);
  /* Messages warning */
  --warningColor: #6b4a2e;
  --warningBackgroundColor: var(--secondaryColorShade4);
  /* cards background */
  --cardBackground: rgba(255, 255, 255, 0.28);
  /*section default padding — fluide (clamp), plus de saut à 1280px */
  --defaultPadding-v: clamp(3.5rem, 7vw, 6.375rem); /* 56px → 102px fluide */
  --defaultPadding-h: clamp(1.125rem, 3vw, 3.125rem); /* 18px → 50px fluide */
  --defaultPadding: var(--defaultPadding-v) var(--defaultPadding-h);
  /* Distance viewport-edge → début du contenu, utilisée par les sliders full-bleed.
     Formule : offset de centrage du wrapper quand viewport > --hdscreen + padding interne.
     - viewport ≤ var(--hdscreen) : max(0, négatif) = 0  → résultat = var(--defaultPadding-h)
     - viewport > var(--hdscreen) : (100vw - var(--hdscreen)) / 2 + var(--defaultPadding-h) = aligné sur le wrapper */
  --viewport-inline-padding: calc(max(0px, (min(100vw, 2560px) - var(--hdscreen)) / 2) + var(--defaultPadding-h));
  /* Conteneurs & espacements harmonisés */
  --section-padding-v: var(--defaultPadding-v);
  --section-padding-h: var(--defaultPadding-h);
  --section-padding: var(--section-padding-v) var(--defaultPadding-h);
  --card-padding: clamp(30px, 3.125vw, 34px);
  --card-padding-logo: clamp(0.75rem, 2.5vw, 2.125rem); /* 12px → 34px */
  --card-padding-news: clamp(0.75rem, 1.5vw, 1.5625rem); /* 12px → 25px — padding interne cartes actualités */
  --badge-padding-v: clamp(4px, 0.5vw, 6px); /* 4px → 6px — padding vertical badge */
  --badge-padding-h: clamp(8px, 1vw, 12px); /* 8px → 12px — padding horizontal badge */
  /* ============================================================
     STYLE TILES — Tokens RWD (à appliquer lors de la phase RWD finale)
     ============================================================ */
  /* Spacing vertical */
  --space-v-xl: clamp(4rem, 7vw, 6.375rem); /* 64px → 102px — grandes sections    */
  --space-v-lg: clamp(3rem, 5vw, 4.75rem); /* 48px →  76px — sections standard   */
  --space-v-md: clamp(2rem, 3.5vw, 3.25rem); /* 32px →  52px — blocs / composants  */
  --space-v-sm: clamp(1rem, 2vw, 2rem); /* 16px →  32px — gaps internes       */
  /* Spacing sémantique */
  --space-bigtitle-mb: clamp(1.5rem, 2.5vw, 2.625rem); /* 24px →  42px — margin-bottom .bigTitle */
  /* Spacing bidirectionnel (gap, padding shorthand, margin shorthand)
     Valeur identique H et V — pas de distinction d'axe justifiée à cette échelle */
  --space-xs: clamp(10px, 1.2vw, 20px); /* 10px →  20px — petits gaps UI (gap / padding / margin) */
  --space-micro: clamp(6px, 0.8vw, 14px); /*  6px →  14px — micro-spacings UI (gap / padding / margin) */
  --space-nano: clamp(3px, 0.4vw, 6px); /*  3px →   6px — nano-spacings (boutons tiny, dense lists)  */
  /* Spacing horizontal */
  --space-h-xl: clamp(1.5rem, 4vw, 4.25rem); /* 24px →  68px — grandes sections    */
  --space-h-lg: clamp(1.25rem, 3vw, 2.625rem); /* 20px →  42px — sections standard   */
  --space-h-md: clamp(1rem, 2vw, 2.125rem); /* 16px →  34px — blocs / composants  */
  --space-h-sm: clamp(0.5rem, 1vw, 1.25rem); /*  8px →  20px — gaps internes       */
  --faq-padding: clamp(2.5rem, 4vw, 3.75rem); /* 40px →  60px — padding bloc FAQ    */
  --space-attr-row: clamp(0.5rem, 1vw, 0.75rem); /*  8px →  12px — padding vertical lignes tableau attributs */
  --attr-table-padding-v: clamp(0.75rem, 1.5vw, 1rem); /* 12px →  16px */
  --attr-table-padding-h: clamp(1.5rem, 3vw, 3.125rem); /* 24px →  50px */
  --attr-table-radius: var(--borderRadius);
  --attr-table-bg: var(--neutralGreyShade4);
  --fs-stat-number: clamp(4rem, 8vw, 6.75rem); /* 64px → 108px — chiffres clés homepage */
  --fs-chiffres-cles-nombre: clamp(44px, 4vw, 70px); /* 44px →  70px — nombre page chiffres (4col→1col) */
  --fs-chiffres-cles-unite: var(--fs-lg); /* 26px →  30px — unité page chiffres */
  --fs-section-title: clamp(2.5rem, 3.96vw, 4.75rem); /* 40px →  76px — bigTitle    */
  --fs-product-title: clamp(2.5rem, 3.96vw, 4.75rem); /* 40px →  76px — titre single product */
  --fs-2xl: clamp(2.5rem, 4vw, 3.75rem); /* 40px → 60px */
  --fs-xl: clamp(2rem, 3vw, 2.5rem); /* 32px → 40px */
  --fs-lg: clamp(1.625rem, 2.2vw, 1.875rem); /* 26px → 30px */
  --fs-lg-sm: clamp(1.625rem, 2.5vw, 1.875rem); /* 26px → 30px — même plage que lg, taux fluide plus rapide */
  --fs-md: clamp(1.25rem, 1.2vw, 1.375rem); /* 20px → 22px */
  --fs-sm: clamp(1.125rem, 1.2vw, 1.375rem); /* 18px → 22px */
  --fs-xs: var(--fs-body); /* 15px → 17px — alias fs-body */
  --fs-page-title: var(--fs-2xl);
  --fs-block-title: var(--fs-xl);
  --fs-card-title: var(--fs-lg);
  --fs-catalog-card: clamp(1.75rem, 3.2vw, 3rem); /* 28px → 48px  — titre carte catalogue */
  --fs-news-title: clamp(1.25rem, 2vw, 1.625rem); /* 20px → 26px  — titre carte actualité */
  --fs-badge: clamp(11px, 1vw, 14px); /* 11px → 14px  — badge catégorie        */
  --fs-entry-date: clamp(11px, 1vw, 14px); /* 11px → 14px  — date article           */
  --fs-mixmatch-plus: clamp(3rem, 5vw, 5.1rem); /* 48px →  82px — icône + mix&match */
  --fs-subtitle: clamp(1rem, 1.5vw, 1.625rem); /* 16px → 26px  — sous-titres de carte */
  --fs-label: clamp(1rem, 1.2vw, 1.375rem); /* 16px → 22px  — H4–H5       */
  --fs-card-intro: clamp(1.125rem, 1.8vw, 1.6875rem); /* 18px → 27px  — texte intro carte (visite virtuelle, présence internationale) */
  --fs-attr-table: clamp(0.9375rem, 1.1vw, 1.375rem); /* 15px → 18px  — tableau attributs produit */
  --fs-body-lg: clamp(0.9375rem, 1.1vw, 1.1875rem); /* 15px → 19px  — intro       */
  --fs-body: clamp(0.9375rem, 0.95vw, 1.0625rem); /* 15px → 17px — courant      */
  --fs-body-sm: clamp(0.75rem, 0.85vw, 0.9375rem); /* 12px → 15px — secondaire   */
  --leading-display: 1.05;
  --leading-title: 1.15;
  --leading-body: 1.4;
  --tracking-display: -0.04em;
  --tracking-title: -0.02em;
  --input-height: clamp(44px, 7vw, 56px);
  --input-fs: clamp(0.875rem, 1.8vw, 1rem);
  --input-padding-h: clamp(12px, 2.5vw, 18px);
  /* Icône décorative helpContainer */
  --fs-icon-help: clamp(3.5rem, 5.5vw, 4.5rem); /* 56px → 72px fluide */
  --slider-arrow-size: 56px; /* = .button--circle */
  --slider-arrow-icon-size: 20px; /* = --btn-icon-size-normal max */
  --btn-padding-v-normal: clamp(14px, 2vw, 18px);
  --btn-padding-h-normal: clamp(10px, 3.5vw, 40px);
  --btn-padding-v-small: clamp(6px, 1vw, 8px);
  --btn-padding-h-small: clamp(12px, 1.5vw, 16px);
  --btn-padding-v-tiny: clamp(3px, 0.5vw, 4px);
  --btn-padding-h-tiny: clamp(8px, 1vw, 10px);
  --btn-gap: clamp(6px, 1vw, 10px);
  --btn-line-height: 1.2;
  --btn-fs-normal: clamp(13px, 1.8vw, 16px);
  --btn-fs-small: clamp(0.75rem, 1.4vw, 0.875rem);
  --btn-fs-tiny: clamp(10px, 1.2vw, 12px);
  --btn-icon-size-normal: clamp(18px, 2.5vw, 20px);
  --btn-icon-size-small: clamp(14px, 2vw, 16px);
  --btn-icon-size-tiny: clamp(10px, 1.5vw, 12px);
  --hero-titre-size: clamp(2.2rem, 4.5vw, 5.3125rem); /* 35px → 85px */
  --hero-panel-padding: clamp(1.25rem, 2.5vw, 2.5rem); /* 20px → 40px */
  --hero-panel-gap: clamp(1.5rem, 3vw, 2.5rem); /* 24px → 40px */
  --hero-cta-padding-v: clamp(1rem, 1.5vw, 1.375rem); /* 16px → 22px */
  --hero-cta-padding-h: clamp(1.75rem, 2.5vw, 3rem); /* 28px → 48px */
  --hero-cta-fs: clamp(0.9375rem, 1.2vw, 1.125rem); /* 15px → 18px */
  --footer-padding-v: clamp(3.5rem, 7vw, 7.5rem); /* 56px → 120px — padding vertical (= section-padding-v, fluide) */
  --footer-padding-h: clamp(1.5rem, 3vw, 4.375rem); /* 24px → 70px — padding horizontal */
  --footer-logo-width: clamp(150px, 18vw, 253px); /* 150px → 253px — logo footer (Figma: 253px) */
  --footer-logo-margin-bottom: clamp(2rem, 3.5vw, 2.8125rem); /* 32px → 45px — espace logo/"Suivez-nous" */
  --footer-title-font-size: clamp(20px, 2vw, 25px); /* 20px → 25px — titres widgets (Figma: 25px) */
  --footer-title-margin-bottom: clamp(1.5rem, 3vw, 2.5rem); /* 24px → 40px — margin sous titre */
  --footer-title-underline-width: clamp(4rem, 10vw, 6.25rem); /* 64px → 100px — largeur trait doré */
  --footer-title-underline-gap: var(--space-micro); /* 6-14px — espace titre/trait */
  /* Breadcrumb */
  --breadcrumb-padding-v: clamp(1rem, 2.4vw, 2.125rem); /* 16px → 34px — padding vertical */
  --breadcrumb-padding-h: var(--defaultPadding-h); /* aligné sur les marges globales */
  --breadcrumb-fs: clamp(1rem, 2vw, 1.5rem); /* 16px → 24px — séparateurs + liens */
  --breadcrumb-fs-current: clamp(1.5rem, 3vw, 2rem); /* 24px → 32px — page active */
  --breadcrumb-fs-home-icon: clamp(1.5rem, 2.8vw, 2.5rem); /* 24px → 40px — icône maison */
  --breadcrumb-gap: 0.55rem; /* espacement entre items */
  --breadcrumb-tracking: -0.03em; /* letter-spacing page active */
  /* ============================================================ */
  /* Bords arrondis */
  --borderRadius: 24px;
  --borderRadiusSm: 12px;
  --borderRadiusInputs: 1000px;
  /* ombre portée boites*/
  --boxShadow: 0 2px 5px rgba(#333, 0.2);
  --boxShadow-card: 2px 4px 12px #00000014;
  /*Dégradés de couleur*/
  --linear1:linear-gradient(white, var(--neutralGreyShade3) );
  --linear3:linear-gradient(to left, white, var(--neutralGreyShade3));
  --linear4:linear-gradient(to right, white, var(--secondaryColorShade4));
  --linear5:linear-gradient(to top, white, var(--neutralGreyShade3));
  --fontPrimary: 'Montserrat';
  --fontPrimary_Black: 'Montserrat_Black';
  --fontPrimary_Bold: 'Montserrat_Bold';
  --fontPrimary_SemiBold: 'Montserrat_SemiBold';
  --fontPrimary_Medium: 'Montserrat_Medium';
  --fontPrimary_Light: 'Montserrat_Light';
  --fontPrimary_Thin: 'Montserrat_Thin';
  --fontPrimary_ExtraBold: 'Montserrat_ExtraBold';
  --fontPrimary_ExtraLight: 'Montserrat_ExtraLight';
  --fontPrimary_Italic: 'Montserrat_Italic';
  --fontPrimary_BlackItalic: 'Montserrat_BlackItalic';
  --fontPrimary_BoldItalic: 'Montserrat_BoldItalic';
  --fontPrimary_SemiBoldItalic: 'Montserrat_SemiBoldItalic';
  --fontPrimary_MediumItalic: 'Montserrat_MediumItalic';
  --fontPrimary_LightItalic: 'Montserrat_LightItalic';
  --fontPrimary_ExtraLightItalic: 'Montserrat_ExtraLightItalic';
  --fontPrimary_ThinItalic: 'Montserrat_ThinItalic';
  --fontPrimary_ExtraBoldItalic: 'Montserrat_ExtraBoldItalic';
  --fontSecondary: 'Akrobat';
  --fontSecondary_Black: 'Akrobat_Black';
  --fontSecondary_Bold: 'Akrobat_Bold';
  --fontSecondary_ExtraBold: 'Akrobat_ExtraBold';
  --fontSecondary_SemiBold: 'Akrobat_SemiBold';
  --fontSecondary_Light: 'Akrobat_Light';
  --fontSecondary_ExtraLight: 'Akrobat_ExtraLight';
  --fontSecondary_Thin: 'Akrobat_Thin';
  /* 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 (max-width: 1279px) {
  :root {
    --headerHeight: 146px;
  }
}
@media (max-width: 768px) {
  :root {
    --headerHeight: 80px;
  }
}
/* 
┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│	RWD NOM DE LA PAGE
└────────────────────────────────────────────────────────────────────────────────────────────────────────┘
*/
/* 0 html{color:yellow;}
///////////////////////////////////////////////////////////////*/
/* A partir de la largeur minimum de 0 et au delà en partant de 0 
============================================================= */
@media screen and (min-width: 0px) {
  /* debug */
}
/* 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);
*/
html,
body,
.site-content {
  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: var(--header-row-h, 146px); /* logo area — + ~44px mega menu = ~190px total (Figma) */
  margin: 0;
  padding: 0;
  max-width: none;
}

/* Header — bloc unique
////////////////////////////////////////////////////////////*/
header.site-header {
  overflow: visible !important;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100vw, 2560px);
  z-index: 100;
  --header-row-h: 146px;
  background-color: rgb(255, 255, 255);
  border-bottom: 1px solid rgba(34, 34, 33, 0.25);
  padding-top: 0;
  padding-bottom: 0;
  transition: background-color 0.5s ease, border-color 0.5s ease, backdrop-filter 0.5s 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;
  max-width: 300px;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  transition: left 0.4s ease, width 0.4s ease;
}
header.site-header .site-branding .custom-logo-link img {
  max-width: 100%;
  height: auto;
}
header.site-header .site-branding .logo-wrap {
  display: grid;
}
header.site-header .site-branding .logo-full,
header.site-header .site-branding .logo-compact {
  grid-area: 1/1;
  display: block;
  height: auto;
  align-self: center;
  justify-self: center;
  will-change: opacity;
}
header.site-header .site-branding .logo-full {
  max-width: 290px;
  max-height: 90px;
  opacity: 1;
  transition: opacity 0.5s ease-in-out 0.5s, max-width 0.5s ease-in-out 0.5s, max-height 0.5s ease-in-out 0.5s;
}
header.site-header .site-branding .logo-compact {
  width: auto;
  max-width: 48px;
  max-height: 48px;
  opacity: 0;
  transition: opacity 0.5s ease-in-out 0s;
}
header.site-header > .col-full {
  transition: grid-template-rows 0.5s ease;
}
header.site-header.smallHeader {
  --header-row-h: 80px;
  background-color: rgba(255, 255, 255, 0.9);
}
header.site-header.smallHeader .logo-full {
  opacity: 0;
  max-width: 150px;
  max-height: 58px;
  transition: opacity 0.5s ease-in-out 0s, max-width 0.5s ease-in-out 0s, max-height 0.5s ease-in-out 0s;
}
header.site-header.smallHeader .logo-compact {
  opacity: 1;
  transition: opacity 0.5s ease-in-out 0.5s;
}
header.site-header.smallHeader > .col-full {
  grid-template-rows: var(--header-row-h);
}
@media screen and (max-width: 1279px) {
  header.site-header.smallHeader .widget_ywraq_mini_list_quote {
    top: calc(-1 * var(--header-row-h) * 0.84 + 4px);
  }
}

body.home header.site-header {
  background: transparent;
  border-bottom: none;
}
body.home header.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15), transparent);
  z-index: -1;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

body.home .site-header--dark::before {
  opacity: 0;
}

/* =============================================================================
   Tonalité header — classes injectées par nmi_hero_tonality.js
   Scoped homepage uniquement, inactif en état scroll (.stick / .smallHeader)
   ============================================================================= */
body.home .site-header--light:not(.stick):not(.smallHeader):not(:has(.mega-menu-open)), body.home .site-header--light:not(.stick):not(.smallHeader):not(:has(.mega-menu-open)) a, body.home .site-header--light:not(.stick):not(.smallHeader):not(:has(.mega-menu-open)) .site-navigation a,
body.home .site-header--light:not(.stick):not(.smallHeader):not(:has(.mega-menu-open)) .secondary-navigation .menu li > a {
  color: var(--neutralWhite);
}
body.home .site-header--light:not(.stick):not(.smallHeader):not(:has(.mega-menu-open)) .secondary-navigation .menu li > a::before {
  color: var(--neutralWhite);
}
body.home .site-header--light:not(.stick):not(.smallHeader):not(:has(.mega-menu-open)) .secondary-navigation .menu li > a:hover,
body.home .site-header--light:not(.stick):not(.smallHeader):not(:has(.mega-menu-open)) .secondary-navigation .menu li > a:focus {
  color: var(--neutralWhite) !important;
  opacity: 0.75;
}
body.home .site-header--light:not(.stick):not(.smallHeader):not(:has(.mega-menu-open)) .secondary-navigation .menu li > a:hover::before,
body.home .site-header--light:not(.stick):not(.smallHeader):not(:has(.mega-menu-open)) .secondary-navigation .menu li > a:focus::before {
  color: var(--neutralWhite) !important;
}
body.home .site-header--light:not(.stick):not(.smallHeader):not(:has(.mega-menu-open)) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
  color: var(--neutralWhite) !important;
}
body.home .site-header--light:not(.stick):not(.smallHeader):not(:has(.mega-menu-open)) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover,
body.home .site-header--light:not(.stick):not(.smallHeader):not(:has(.mega-menu-open)) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link {
  color: var(--neutralWhite) !important;
  opacity: 0.75;
}
body.home .site-header--light:not(.stick):not(.smallHeader):not(:has(.mega-menu-open)) .logo-full,
body.home .site-header--light:not(.stick):not(.smallHeader):not(:has(.mega-menu-open)) .logo-compact {
  filter: brightness(0) invert(1);
}
body.home .site-header--light:not(.stick):not(.smallHeader):not(:has(.mega-menu-open)) #mega-menu-wrap-primary .mega-menu-toggle {
  color: var(--neutralWhite);
}
body.home .site-header--light:not(.stick):not(.smallHeader):not(:has(.mega-menu-open)) #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-animated-inner,
body.home .site-header--light:not(.stick):not(.smallHeader):not(:has(.mega-menu-open)) #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-animated-inner::before,
body.home .site-header--light:not(.stick):not(.smallHeader):not(:has(.mega-menu-open)) #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-animated-inner::after {
  background-color: var(--neutralWhite) !important;
}
body.home .site-header--light:not(.stick):not(.smallHeader):not(:has(.mega-menu-open)) .site-search--desktop:not(#_) .ywcas-input-field-wrapper {
  border-color: var(--neutralWhite) !important;
}
body.home .site-header--light:not(.stick):not(.smallHeader):not(:has(.mega-menu-open)) .site-search--desktop .ywcas-submit-icon {
  stroke: var(--neutralWhite) !important;
}
body.home .site-header--light:not(.stick):not(.smallHeader):not(:has(.mega-menu-open)) .site-search--mobile .lapilliUI-IconButton__root {
  border-color: var(--neutralWhite) !important;
  color: var(--neutralWhite) !important;
}
body.home .site-header--light:not(.stick):not(.smallHeader):not(:has(.mega-menu-open)) .site-search--mobile .lapilliUI-IconButton__root svg {
  stroke: var(--neutralWhite) !important;
}
body.home .site-header--light:not(.stick):not(.smallHeader):not(:has(.mega-menu-open)) .widget_ywraq_mini_list_quote .raq-info .raq_label::after {
  color: var(--neutralWhite);
}
body.home .site-header--light:not(.stick):not(.smallHeader):not(:has(.mega-menu-open)) .widget_ywraq_mini_list_quote .raq-tip-counter {
  color: var(--neutralWhite);
}
body.home .site-header--light:not(.stick):not(.smallHeader):not(:has(.mega-menu-open)) .widget_ywraq_mini_list_quote .raq_label,
body.home .site-header--light:not(.stick):not(.smallHeader):not(:has(.mega-menu-open)) .widget_ywraq_mini_list_quote .raq-info {
  color: var(--neutralWhite);
}
body.home .site-header--light:not(.stick):not(.smallHeader):not(:has(.mega-menu-open)) .widget_ywraq_mini_list_quote .yith-ywraq-list-content,
body.home .site-header--light:not(.stick):not(.smallHeader):not(:has(.mega-menu-open)) .widget_ywraq_mini_list_quote .yith-ywraq-list-content * {
  color: var(--primaryColor);
}

body.home .site-header--dark:not(.stick):not(.smallHeader), body.home .site-header--dark:not(.stick):not(.smallHeader) a, body.home .site-header--dark:not(.stick):not(.smallHeader) .site-navigation a,
body.home .site-header--dark:not(.stick):not(.smallHeader) .secondary-navigation .menu li > a {
  color: var(--primaryColor);
}
body.home .site-header--dark:not(.stick):not(.smallHeader) .secondary-navigation .menu li > a::before {
  color: var(--primaryColor);
}
body.home .site-header--dark:not(.stick):not(.smallHeader) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
  color: var(--primaryColor) !important;
}
body.home .site-header--dark:not(.stick):not(.smallHeader) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover,
body.home .site-header--dark:not(.stick):not(.smallHeader) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link {
  color: var(--secondaryColor) !important;
  opacity: 1;
}
body.home .site-header--dark:not(.stick):not(.smallHeader) .logo-full,
body.home .site-header--dark:not(.stick):not(.smallHeader) .logo-compact {
  filter: none;
}
body.home .site-header--dark:not(.stick):not(.smallHeader) #mega-menu-wrap-primary .mega-menu-toggle {
  color: var(--primaryColor);
}
body.home .site-header--dark:not(.stick):not(.smallHeader) .site-search--desktop:not(#_) .ywcas-input-field-wrapper {
  border-color: var(--primaryColor) !important;
}
body.home .site-header--dark:not(.stick):not(.smallHeader) .site-search--desktop .ywcas-submit-icon {
  stroke: var(--primaryColor) !important;
}
body.home .site-header--dark:not(.stick):not(.smallHeader) .site-search--mobile .lapilliUI-IconButton__root {
  border-color: var(--primaryColor) !important;
  color: var(--primaryColor) !important;
}
body.home .site-header--dark:not(.stick):not(.smallHeader) .site-search--mobile .lapilliUI-IconButton__root svg {
  stroke: var(--primaryColor) !important;
}
body.home .site-header--dark:not(.stick):not(.smallHeader) .widget_ywraq_mini_list_quote .raq-info .raq_label::after {
  color: var(--primaryColor);
}
body.home .site-header--dark:not(.stick):not(.smallHeader) .widget_ywraq_mini_list_quote .raq-tip-counter {
  color: var(--primaryColor);
}
body.home .site-header--dark:not(.stick):not(.smallHeader) .widget_ywraq_mini_list_quote .raq_label,
body.home .site-header--dark:not(.stick):not(.smallHeader) .widget_ywraq_mini_list_quote .raq-info {
  color: var(--primaryColor);
}

body header.site-header.stick,
body header.site-header.smallHeader {
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid rgba(34, 34, 33, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
body header.site-header.stick::before,
body header.site-header.smallHeader::before {
  display: none;
}

.admin-bar header.site-header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar header.site-header {
    top: 46px;
  }
}
/* 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;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}

.secondary-navigation > div {
  display: contents;
}

.secondary-navigation ul.menu,
.secondary-navigation .menu {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: var(--space-micro);
  height: 100%;
}

.secondary-navigation .menu > li {
  display: flex;
  align-items: center;
  position: relative;
  flex-shrink: 0;
}

.secondary-navigation .menu li > a {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0;
  line-height: 1;
  font-size: 0;
  font-family: var(--fontPrimary);
  color: var(--primaryColor);
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--borderRadius);
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}

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

.secondary-navigation .menu li > a::before {
  font-family: "Material_Symbols_Rounded";
  display: block;
  flex-shrink: 0;
  color: var(--primaryColor);
  font-weight: normal;
  font-style: normal;
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
  direction: ltr;
  font-variation-settings: "FILL" 0, "wght" 100, "GRAD" 0, "opsz" 40;
  line-height: 1;
  transition: color 0.2s ease;
}

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

/* Mon Compte */
.secondary-navigation .menu li:nth-child(1) > a::before {
  font-size: 38px;
  content: "\e853";
}

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

/* Switcher langue WPML — flag + dropdown
============================================================= */
.secondary-navigation .menu li.wpml-ls-menu-item,
.secondary-navigation .menu li:has(> a > img.wpml-ls-flag) {
  margin-right: 30px;
  position: relative !important;
}
.secondary-navigation .menu li.wpml-ls-menu-item::after,
.secondary-navigation .menu li:has(> a > img.wpml-ls-flag)::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 100%;
  height: 8px;
}
.secondary-navigation .menu li.wpml-ls-menu-item > a,
.secondary-navigation .menu li:has(> a > img.wpml-ls-flag) > a {
  font-size: 0 !important;
  padding: 4px 0;
  min-height: 44px;
  min-width: 44px;
  justify-content: center;
}
.secondary-navigation .menu li.wpml-ls-menu-item > a::before,
.secondary-navigation .menu li:has(> a > img.wpml-ls-flag) > a::before {
  display: none !important;
  content: none !important;
}
.secondary-navigation .menu li.wpml-ls-menu-item > a img.wpml-ls-flag,
.secondary-navigation .menu li:has(> a > img.wpml-ls-flag) > a img.wpml-ls-flag {
  display: block;
  width: 32px;
  height: auto;
  border-radius: 3px;
}
.secondary-navigation .menu li.wpml-ls-menu-item > ul.sub-menu,
.secondary-navigation .menu li:has(> a > img.wpml-ls-flag) > ul.sub-menu {
  display: none !important;
  position: absolute !important;
  top: calc(100% - 9px) !important;
  right: 0 !important;
  left: auto !important;
  transform: none !important;
  background: var(--canvasColor) !important;
  border: 1px solid var(--neutralGreyShade3) !important;
  border-radius: 10px !important;
  box-shadow: var(--boxShadow-card) !important;
  padding: 2px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  z-index: 9999 !important;
  list-style: none !important;
  margin: 0 !important;
  float: none !important;
}
.secondary-navigation .menu li.wpml-ls-menu-item > ul.sub-menu > li,
.secondary-navigation .menu li:has(> a > img.wpml-ls-flag) > ul.sub-menu > li {
  display: block !important;
  width: auto !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.secondary-navigation .menu li.wpml-ls-menu-item > ul.sub-menu > li > a,
.secondary-navigation .menu li:has(> a > img.wpml-ls-flag) > ul.sub-menu > li > a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  transition: background 0.15s ease, border-color 0.15s ease !important;
  min-height: auto !important;
  width: auto !important;
  background: none !important;
  font-size: 0 !important;
}
.secondary-navigation .menu li.wpml-ls-menu-item > ul.sub-menu > li > a::before,
.secondary-navigation .menu li:has(> a > img.wpml-ls-flag) > ul.sub-menu > li > a::before {
  display: none !important;
  content: none !important;
}
.secondary-navigation .menu li.wpml-ls-menu-item > ul.sub-menu > li > a img.wpml-ls-flag,
.secondary-navigation .menu li:has(> a > img.wpml-ls-flag) > ul.sub-menu > li > a img.wpml-ls-flag {
  display: block !important;
  width: 28px !important;
  height: auto !important;
  border-radius: 2px !important;
}
.secondary-navigation .menu li.wpml-ls-menu-item > ul.sub-menu > li > a:hover,
.secondary-navigation .menu li:has(> a > img.wpml-ls-flag) > ul.sub-menu > li > a:hover {
  background: var(--secondaryColorShade4) !important;
  border-color: var(--secondaryColor) !important;
}
.secondary-navigation .menu li.wpml-ls-menu-item:hover > ul.sub-menu,
.secondary-navigation .menu li:has(> a > img.wpml-ls-flag):hover > ul.sub-menu {
  display: block !important;
}

/* Recherche ajax
////////////////////////////////////////////////////////////*/
.woocommerce-active .site-header .site-search {
  grid-area: header_search;
  width: 30px;
  float: none;
  margin: 0;
  clear: none;
  position: relative;
  z-index: 1000;
  justify-self: end;
  overflow: visible;
}

/* Bascule desktop ↔ mobile overlay
============================================================= */
.site-search--mobile {
  display: none;
}

.site-search--mobile .lapilliUI-IconButton__root {
  background: none !important;
  background-color: transparent !important;
  border: 1px solid var(--primaryColor) !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--primaryColor) !important;
  cursor: pointer !important;
  transition: border-color 0.2s ease, color 0.2s ease !important;
}
.site-search--mobile .lapilliUI-IconButton__root svg {
  width: 20px !important;
  height: 20px !important;
  stroke-width: 2 !important;
}
.site-search--mobile .lapilliUI-IconButton__root:hover {
  background: none !important;
  background-color: transparent !important;
  border-color: var(--secondaryColor) !important;
  color: var(--secondaryColor) !important;
}

/* ≤ 1279px : bascule mobile — hamburger actif
============================================================= */
@media screen and (max-width: 1279px) {
  .site-header > .col-full {
    grid-template-columns: auto 48px 72px !important;
    grid-template-areas: "header_logo header_search header_second_nav" !important;
  }
  .woocommerce-active .site-header .site-search {
    margin-left: 0;
  }
  .site-search--desktop {
    display: none;
  }
  .site-search--mobile {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .secondary-navigation .menu li:not(.wpml-ls-menu-item):not(:has(> a > img.wpml-ls-flag)) {
    display: none;
  }
  .widget_ywraq_mini_list_quote {
    position: absolute;
    top: calc(-1 * var(--header-row-h, 146px) * 0.84 + 25px);
    right: 138px;
    z-index: 500;
  }
  .widget_ywraq_mini_list_quote .yith-ywraq-list-content {
    right: -138px !important;
    left: auto !important;
    z-index: 9999 !important;
  }
  #mega-menu-wrap-primary .mega-menu-toggle {
    left: 20px;
  }
}
/* ≤ 768px : mobile
============================================================= */
@media screen and (max-width: 768px) {
  .widget_ywraq_mini_list_quote .yith-ywraq-list-wrapper,
  .widget_ywraq_mini_list_quote .yith-ywraq-list-content {
    display: none !important;
  }
  .site-header > .col-full {
    grid-template-columns: auto 32px 60px !important;
    grid-template-areas: "header_logo header_search header_second_nav" !important;
    grid-gap: 0.5rem;
  }
  header.site-header .site-branding .custom-logo-link {
    width: 160px !important;
    left: 87px !important;
    transform: translateY(-50%) !important;
  }
  #mega-menu-wrap-primary .mega-menu-toggle {
    left: 20px;
  }
  header.site-header .site-branding .logo-compact {
    max-width: 64px;
    max-height: 50px;
    justify-self: start;
  }
  .widget_ywraq_mini_list_quote {
    right: 103px !important;
    top: calc(-1 * (var(--header-row-h, 146px) / 2 + 21px)) !important;
  }
  .secondary-navigation .menu li.wpml-ls-menu-item,
  .secondary-navigation .menu li:has(> a > img.wpml-ls-flag) {
    margin-right: 20px;
  }
}
@media screen and (max-width: 480px) {
  .site-header > .col-full {
    grid-template-columns: auto 32px 40px !important;
    grid-template-areas: "header_logo header_search header_second_nav" !important;
    grid-gap: 0.5rem;
  }
  #mega-menu-wrap-primary .mega-menu-toggle {
    left: 0;
  }
  header.site-header .site-branding .custom-logo-link {
    left: 46px !important;
  }
  header.site-header .site-branding .logo-full {
    max-width: 140px;
    max-height: 43px;
  }
  .widget_ywraq_mini_list_quote {
    right: 80px !important;
    top: calc(-1 * (var(--header-row-h, 146px) / 2 + 21px)) !important;
  }
  .secondary-navigation .menu li.wpml-ls-menu-item,
  .secondary-navigation .menu li:has(> a > img.wpml-ls-flag) {
    margin-right: 0;
  }
}
/* ≤ 375px : iPhone SE
============================================================= */
.site-search--desktop {
  color: var(--primaryColor);
}
.site-search--desktop .ywcas-classic-search,
.site-search--desktop .ywcas-block-components-search-field,
.site-search--desktop .lapilliUI-Stack__root {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  width: 100% !important;
}
.site-search--desktop .lapilliUI-Input__endAdornment {
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 30px !important;
  height: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.site-search--desktop .ywcas-submit-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.site-search--desktop .ywcas-submit-wrapper .ywcas-submit-icon {
  transform: translateY(-1px) !important;
}
.site-search--desktop .ywcas-submit-icon {
  width: 20px !important;
  height: 20px !important;
  stroke: var(--primaryColor) !important;
  stroke-width: 2 !important;
  cursor: pointer;
  transition: stroke 0.2s ease !important;
}
.site-search--desktop:hover .ywcas-submit-icon, .site-search--desktop:focus-within .ywcas-submit-icon {
  stroke: var(--secondaryColor) !important;
}
.site-search--desktop:not(#_) .ywcas-input-field-wrapper {
  background-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  border: 1px solid var(--primaryColor) !important;
  border-radius: 9999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease !important;
}
.site-search--desktop:not(#_) .lapilliUI-Input__root, .site-search--desktop:not(#_) .lapilliUI-Input__backdrop {
  background-color: transparent !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.site-search--desktop:not(#_) input.lapilliUI-Input__field {
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  transition: opacity 0.25s ease !important;
}
.site-search--desktop:not(#_):hover .ywcas-input-field-wrapper, .site-search--desktop:not(#_):focus-within .ywcas-input-field-wrapper {
  width: 240px !important;
  background-color: #fff !important;
  border-color: var(--primaryColor) !important;
}
.site-search--desktop:not(#_):hover input.lapilliUI-Input__field, .site-search--desktop:not(#_):focus-within input.lapilliUI-Input__field {
  opacity: 1 !important;
  pointer-events: auto !important;
  width: 180px !important;
  max-width: 180px !important;
  padding: 0 8px 0 12px !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(--neutralGreyShade2);
	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(--neutralGreyShade2);
	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: 200;
}

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

/* positionnement du widget en absolu    
============================================================= */
.widget_ywraq_mini_list_quote {
  position: absolute;
  text-align: center;
  margin: 0;
}

@media screen and (min-width: 1280px) {
  .widget_ywraq_mini_list_quote {
    top: -45px;
    right: 27px;
  }
}
.widget_ywraq_mini_list_quote .raq-info {
  display: block;
  margin: 0;
  padding: 0;
  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(--secondaryColor);
}

/* RAQ label — flex row : texte à gauche (hover) + icône à droite
============================================================= */
.widget_ywraq_mini_list_quote .raq-info .raq_label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  text-decoration: none;
}

.widget_ywraq_mini_list_quote .raq-info .raq_label .handler-label {
  display: none;
}

/* Texte "produits sélectionnés" — masqué, déploiement au survol vers la gauche
============================================================= */
.widget_ywraq_mini_list_quote .raq-info .raq-tip-counter {
  position: static;
  display: block;
  overflow: hidden;
  max-width: 0;
  white-space: nowrap;
  font-size: var(--fs-body-sm);
  color: var(--primaryColor);
  transition: max-width 0.4s ease;
}

@media (min-width: 1024px) {
  .widget_ywraq_mini_list_quote:hover .raq-tip-counter {
    max-width: 240px;
  }
}
.widget_ywraq_mini_list_quote .raq-info .raq-tip-counter::before {
  display: none;
}

/* Icône event_note — toujours visible à droite via ::after sur raq_label
============================================================= */
.widget_ywraq_mini_list_quote .raq-info .raq_label::after {
  font-family: "Material_Symbols_Rounded";
  content: "\e616";
  font-size: 40px;
  display: inline-block;
  color: var(--primaryColor);
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  font-variation-settings: "FILL" 0, "wght" 100, "GRAD" 0, "opsz" 40;
  flex-shrink: 0;
}

/* Badge compteur — absolu, coin top-left de l'icône
============================================================= */
.widget_ywraq_mini_list_quote .raq-info .raq-tip-counter .raq-items-number {
  position: absolute;
  top: -6px;
  right: 30px;
  left: auto;
  background-color: var(--secondaryColor);
  border-radius: 9999px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  color: var(--canvasColor);
  text-align: center;
}

/* mise en forme panel au rollover liste des items mis au devis
============================================================= */
@media (hover: none) {
  .widget_ywraq_mini_list_quote .yith-ywraq-list-wrapper {
    display: none !important;
  }
}
.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: 200;
}

/* 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;
  text-align: left;
}

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

.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(--neutralGreyShade2);
  border-radius: 4px;
  margin: 0 15px;
  overflow: hidden;
  flex-shrink: 0;
}
.yith-ywraq-list-item-info img {
  width: 80px !important;
  height: 80px !important;
  object-fit: contain;
  display: block;
}

ul.yith-ywraq-list a.yith-ywraq-item-remove.remove {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}

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

/* ≤ 1280px : search à gauche du logo (espace insuffisant pour logo centré)
============================================================= */
@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: var(--defaultPadding-h);
  }
}
/* 1280–1366px : logo au centre, colonnes intermédiaires
============================================================= */
@media screen and (min-width: 1280px) and (max-width: 1366px) {
  .site-header > .col-full {
    grid-template-columns: auto auto 190px;
    grid-template-areas: "header_logo header_search header_second_nav";
  }
}
/* ≥ 1366px (laptop) : colonnes standard
============================================================= */
@media screen and (min-width: 1366px) {
  .site-header > .col-full {
    grid-template-columns: auto auto 195px;
    grid-template-areas: "header_logo header_search header_second_nav";
  }
}
/* ≥ 1920px : nav secondaire s'adapte au contenu
============================================================= */
@media screen and (min-width: 1920px) {
  .site-header > .col-full {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "header_logo header_search header_second_nav";
  }
}
/* ≥ 1920px (4K) : colonne nav secondaire élargie + labels texte visibles
============================================================= */
@media screen and (min-width: 1920px) {
  .site-header > .col-full {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "header_logo header_search header_second_nav";
  }
  .secondary-navigation .menu li > a:link,
  .secondary-navigation .menu li > a:visited,
  .secondary-navigation .menu li > a:active {
    font-size: 0.875rem;
    flex-direction: row;
    gap: 6px;
  }
}
/* ============================================================
   YITH Ajax Search — Overlay : thème Coverpla
   ============================================================ */
.ywcas-overlay-wrapper-search {
  /* Panel modal
  ------------------------------------------------------------- */
}
.ywcas-overlay-wrapper-search .lapilliUI-Modal__paper {
  border-radius: var(--borderRadius) !important;
  box-shadow: var(--boxShadow-card) !important;
  background-color: var(--canvasColor) !important;
}
@media screen and (max-width: 768px) {
  .ywcas-overlay-wrapper-search .lapilliUI-Modal__paper {
    margin-top: var(--headerHeight) !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
  }
}
.ywcas-overlay-wrapper-search {
  /* Champ de recherche
  ------------------------------------------------------------- */
}
.ywcas-overlay-wrapper-search .ywcas-simple-input-field-wrapper,
.ywcas-overlay-wrapper-search .ywcas-input-field-wrapper,
.ywcas-overlay-wrapper-search .lapilliUI-Input__root {
  border-radius: 9999px !important;
}
.ywcas-overlay-wrapper-search .lapilliUI-Input__root {
  border-radius: 9999px !important;
  background: var(--neutralWhite) !important;
  outline: none !important;
  min-height: var(--input-height) !important;
}
.ywcas-overlay-wrapper-search .lapilliUI-Input__root.lapilliUI-Input--outlined .lapilliUI-Input__backdrop {
  border-color: var(--neutralGreyShade3) !important;
  border-radius: 9999px !important;
  border-width: 1px !important;
}
.ywcas-overlay-wrapper-search .lapilliUI-Input__root .lapilliUI-Input__backdrop {
  border-radius: 9999px !important;
}
.ywcas-overlay-wrapper-search .lapilliUI-Input__root .lapilliUI-Input__field {
  font-family: var(--fontPrimary_Medium) !important;
  font-size: var(--input-fs) !important;
  color: var(--primaryColor) !important;
  padding: 0 var(--input-padding-h) !important;
  background: transparent !important;
}
.ywcas-overlay-wrapper-search .lapilliUI-Input__root .lapilliUI-Input__field::placeholder {
  color: var(--primaryColor) !important;
  opacity: 0.45 !important;
}
.ywcas-overlay-wrapper-search {
  /* Titre "Popular products"
  ------------------------------------------------------------- */
}
.ywcas-overlay-wrapper-search h2.wp-block-heading {
  font-family: var(--fontPrimary_Medium) !important;
  font-size: clamp(1rem, 2vw, 1.25rem) !important;
  color: var(--primaryColor) !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 1rem !important;
}
.ywcas-overlay-wrapper-search {
  /* Cards produit
  ------------------------------------------------------------- */
}
.ywcas-overlay-wrapper-search .wc-block-grid {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.ywcas-overlay-wrapper-search .wc-block-grid__products {
  column-gap: 8px !important;
}
.ywcas-overlay-wrapper-search .wc-block-grid.has-2-columns .wc-block-grid__product {
  max-width: calc(50% - 4px) !important;
}
.ywcas-overlay-wrapper-search .wc-block-grid.has-3-columns .wc-block-grid__product {
  max-width: calc(33.33% - 6px) !important;
}
.ywcas-overlay-wrapper-search .wc-block-grid.has-4-columns .wc-block-grid__product {
  max-width: calc(25% - 6px) !important;
}
.ywcas-overlay-wrapper-search .wc-block-grid__product {
  border: 1px solid var(--neutralGreyShade3) !important;
  border-radius: var(--borderRadius) !important;
  overflow: hidden !important;
  background: var(--neutralWhite) !important;
  display: flex !important;
  flex-direction: column !important;
  transition: all 350ms ease-out !important;
  padding: 8px !important;
}
.ywcas-overlay-wrapper-search .wc-block-grid__product:hover {
  border-color: var(--secondaryColor) !important;
  box-shadow: 4px 8px 20px rgba(0, 0, 0, 0.1215686275) !important;
  transform: scale(1.03) !important;
}
.ywcas-overlay-wrapper-search .wc-block-grid__product-image {
  border-radius: calc(var(--borderRadius) - 4px) !important;
  overflow: hidden !important;
  margin-bottom: 6px !important;
}
.ywcas-overlay-wrapper-search .wc-block-grid__product-image img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: cover !important;
}
.ywcas-overlay-wrapper-search .wc-block-grid__product-title {
  font-family: var(--fontPrimary_Medium) !important;
  font-size: clamp(0.8rem, 1.5vw, 0.95rem) !important;
  color: var(--primaryColor) !important;
  text-align: center !important;
  margin-bottom: 8px !important;
  flex: 1 !important;
}
.ywcas-overlay-wrapper-search {
  /* Boutons produit
  ------------------------------------------------------------- */
}
.ywcas-overlay-wrapper-search .wp-block-button.wc-block-grid__product-add-to-cart {
  text-align: center !important;
}
.ywcas-overlay-wrapper-search .wp-block-button__link.ajax_add_to_cart {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: var(--primaryColor) !important;
  color: var(--neutralWhite) !important;
  border: 1px solid var(--primaryColor) !important;
  border-radius: 9999px !important;
  font-family: var(--fontPrimary_Medium) !important;
  font-size: clamp(0.7rem, 1.2vw, 0.8rem) !important;
  padding: 8px 16px !important;
  text-decoration: none !important;
  transition: opacity 0.2s ease !important;
}
.ywcas-overlay-wrapper-search .wp-block-button__link.ajax_add_to_cart:hover {
  opacity: 0.82 !important;
  color: var(--neutralWhite) !important;
}
.ywcas-overlay-wrapper-search .wp-block-button__link:not(.ajax_add_to_cart) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: transparent !important;
  color: var(--secondaryColor) !important;
  border: 1px solid var(--secondaryColor) !important;
  border-radius: 9999px !important;
  font-family: var(--fontPrimary_Medium) !important;
  font-size: clamp(0.7rem, 1.2vw, 0.8rem) !important;
  padding: 8px 16px !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
}
.ywcas-overlay-wrapper-search .wp-block-button__link:not(.ajax_add_to_cart):hover {
  background-color: var(--secondaryColor) !important;
  color: var(--neutralWhite) !important;
}
.ywcas-overlay-wrapper-search {
  /* Mobile — force 2 colonnes quel que soit le réglage du bloc
  ------------------------------------------------------------- */
}
@media screen and (max-width: 768px) {
  .ywcas-overlay-wrapper-search .wc-block-grid__products {
    display: flex !important;
    flex-wrap: wrap !important;
  }
  .ywcas-overlay-wrapper-search .wc-block-grid__product,
  .ywcas-overlay-wrapper-search .wc-block-grid.has-1-columns .wc-block-grid__product,
  .ywcas-overlay-wrapper-search .wc-block-grid.has-3-columns .wc-block-grid__product,
  .ywcas-overlay-wrapper-search .wc-block-grid.has-4-columns .wc-block-grid__product,
  .ywcas-overlay-wrapper-search .wc-block-grid.has-5-columns .wc-block-grid__product,
  .ywcas-overlay-wrapper-search .wc-block-grid.has-6-columns .wc-block-grid__product {
    max-width: calc(50% - 4px) !important;
    width: calc(50% - 4px) !important;
  }
}
.ywcas-overlay-wrapper-search {
  /* Bouton fermer
  ------------------------------------------------------------- */
}
.ywcas-overlay-wrapper-search button.lapilliUI-Modal__close {
  background: var(--primaryColor) !important;
  background-color: var(--primaryColor) !important;
  border: 1px solid var(--primaryColor) !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--neutralWhite) !important;
  cursor: pointer !important;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease !important;
}
.ywcas-overlay-wrapper-search button.lapilliUI-Modal__close svg {
  width: 16px !important;
  height: 16px !important;
}
.ywcas-overlay-wrapper-search button.lapilliUI-Modal__close:hover {
  border-color: var(--secondaryColor) !important;
  color: var(--secondaryColor) !important;
}

.ywcas-popover-results:has(.wp-block-yith-empty-block) {
  display: none !important;
}

#masthead .essb-fc-grid .essb-fc-block {
  border-radius: var(--borderRadiusInputs) !important;
  padding: 13px !important;
}
#masthead .essb-fc-grid .essb-fc-block .essb-fc-block-icon i {
  display: block;
  line-height: 0;
}

/* 
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;
}

/************************************************************
  FORMATAGE CSS MENU NORMAL 
************************************************************/
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;
  transition: color 0.2s ease;
}
html:not(.mega-menu-primary-off-canvas-open) #mega-menu-wrap-primary #mega-menu-primary > 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-item.mega-toggle-on > a.mega-menu-link {
  color: var(--secondaryColor) !important;
}
html:not(.mega-menu-primary-off-canvas-open) {
  /* fixer taille par défaut de tous les liens comme spécifié dan le plugin */
}
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) {
  /* Boites panel des sous-menus    
  ////////////////////////////////////////////////////////////*/
}
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) {
  /* bordure du bas du panel */
}
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 var(--secondaryColor);
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.15);
}
html:not(.mega-menu-primary-off-canvas-open) {
  /* forcer les li à 100% des sousmenus  
  ============================================================= */
}
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) {
  /* Etat actif dans le sous-menu
  ============================================================= */
}
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(--secondaryColorShade4) !important;
  border: 1px solid var(--secondaryColor) !important;
}
html:not(.mega-menu-primary-off-canvas-open) {
  /* 
  ┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
  │	NOS PRODUITS - 1er SOUS-MENU PRINCIPAL
  └────────────────────────────────────────────────────────────────────────────────────────────────────────┘
  */
}
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) {
  /* Titres colonnes par default 
  ////////////////////////////////////////////////////////////*/
}
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) {
  /* Trait orange sous titre colonnes par defaut
  ============================================================= */
}
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(--secondaryColor);
  width: 100%;
  bottom: 0;
  left: 0;
}
html:not(.mega-menu-primary-off-canvas-open) {
  /* Nos univers 1ere colonne
  ////////////////////////////////////////////////////////////*/
  /* liens avec imagette
  ============================================================= */
}
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(--neutralGreyShade2);
  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(--secondaryColorShade4) !important;
  border: 1px solid var(--secondaryColor) !important;
}
html:not(.mega-menu-primary-off-canvas-open) {
  /* imagettes
  --------------------------------------------------------------*/
}
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) {
  /* nos produits > parfumerie */
}
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) {
  /* Tous nos produits 2eme colonne
  ////////////////////////////////////////////////////////////*/
  /* bordures grises dans le sous menu 
  ============================================================= */
}
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(--neutralGreyShade2);
  border-right: 1px solid var(--neutralGreyShade2);
}
html:not(.mega-menu-primary-off-canvas-open) {
  /* gestion en 3 cols
  ============================================================= */
}
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) {
  /* Liens flacons / pompes / bouchages — cards image avec zoom 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(.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(--primaryColor);
  font-family: var(--fontPrimary);
  font-size: 1rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking-title);
  text-align: center;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
  margin: 0;
  padding: 0 1rem 0.875rem;
  max-width: 210px;
  min-width: 150px;
  min-height: 200px;
  border: 1px solid var(--neutralGreyShade3);
  border-radius: var(--borderRadius);
  box-shadow: none;
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  overflow: hidden;
  background-color: transparent !important;
  transition: border-color 350ms ease-out;
}
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: transparent !important;
  border-color: var(--secondaryColor) !important;
  border: 1px solid var(--secondaryColor) !important;
  box-shadow: 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(.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: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
  transition: transform 0.7s ease-out;
  backface-visibility: hidden;
}
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::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:hover::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:hover::before {
  transform: scale3d(1.1, 1.1, 1);
}
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 {
  background-image: linear-gradient(to top, rgba(255, 255, 255, 0.85) 0%, transparent 50%), url(assets/images/home-catalogue-flacons.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 {
  background-image: linear-gradient(to top, rgba(255, 255, 255, 0.85) 0%, transparent 50%), url(assets/images/home-catalogue-pompes.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 {
  background-image: linear-gradient(to top, rgba(255, 255, 255, 0.85) 0%, transparent 50%), url(assets/images/home-catalogue-bouchages.webp);
}
html:not(.mega-menu-primary-off-canvas-open) {
  /* Tous nos produits > télécharger le catalogue
  ============================================================= */
}
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%;
}
html:not(.mega-menu-primary-off-canvas-open) {
  /* liens télécharger 
  --------------------------------------------------------------*/
}
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(--neutralGreyShade2);
  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(--secondaryColorShade4) !important;
  border: 1px solid var(--secondaryColor) !important;
}
html:not(.mega-menu-primary-off-canvas-open) {
  /* imagettes télécharger catalogue */
}
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(--neutralGreyShade2);
  background-image: url(assets/images/menu/catalogue-illustration.webp);
  background-size: 100px 100px;
  display: inline-block;
  width: 100px;
  height: 100px;
  content: "";
}
html:not(.mega-menu-primary-off-canvas-open) {
  /* Tous nos produits > Tous les produits
  --------------------------------------------------------------*/
}
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(--neutralGreyShade2);
  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(--secondaryColorShade4) !important;
  border: 1px solid var(--secondaryColor) !important;
}
html:not(.mega-menu-primary-off-canvas-open) {
  /* Tous nos produits Green Attitude 3eme colonne
  ////////////////////////////////////////////////////////////*/
  /* titre colonne avec bordure verte
  ============================================================= */
}
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(--accentGreen);
}
html:not(.mega-menu-primary-off-canvas-open) {
  /* CAPOTS éco-responsables 
  ============================================================= */
  /* boite bouchages éco-responsables
  --------------------------------------------------------------*/
}
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(--neutralGreyShade2);
  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) {
  /* titre green attitudes bouchages éco-responsables
  --------------------------------------------------------------*/
}
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(--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) li.mega-menu-item:is(.greenattitude-caps)::after {
  content: url(assets/images/menu/menu_caps_greenattutude.webp);
  position: absolute;
  bottom: -7px;
  left: 16px;
  width: auto;
  display: block;
}
html:not(.mega-menu-primary-off-canvas-open) {
  /* FLACONS éco-responsables
  ============================================================= */
  /* boite flacons éco-responsables
  --------------------------------------------------------------*/
}
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(--neutralGreyShade2);
  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) {
  /* titre green attitudes flacons éco-responsables
  --------------------------------------------------------------*/
}
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(--primaryColor) !important;
}
html:not(.mega-menu-primary-off-canvas-open) {
  /* image flacon éco-responsable 
  --------------------------------------------------------------*/
}
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) {
  /* logo green attitude
  --------------------------------------------------------------*/
  /* Liens Sous Sous-menu
  --------------------------------------------------------------*/
}
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(--secondaryColorShade4);
  border: 1px solid var(--secondaryColor);
}
html:not(.mega-menu-primary-off-canvas-open) {
  /* 
  ┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
  │	MIX&MATCH - 2eme SOUS-MENU PRINCIPAL
  └────────────────────────────────────────────────────────────────────────────────────────────────────────┘
  */
}
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) {
  /* Titres colonnes    
  ////////////////////////////////////////////////////////////*/
}
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) {
  /* circle plus 
  ============================================================= */
}
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) {
  /* colonne gauche Configurer    
  ////////////////////////////////////////////////////////////*/
}
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(--secondaryColor);
  text-align: right;
  padding: 1.875rem 4.375rem 0.9375rem 0.9375rem;
  position: relative;
}
html:not(.mega-menu-primary-off-canvas-open) {
  /* visuel image configurer
  ============================================================= */
}
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 {
  width: fit-content;
  height: auto;
  max-width: 100%;
  margin-left: auto;
  border: 1px solid var(--neutralGreyShade2);
  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(--secondaryColorShade4) !important;
  border: 1px solid var(--secondaryColor) !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) {
  /* colonne droite Personnaliser    
  ////////////////////////////////////////////////////////////*/
}
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) {
  /* grid dans la colonne droite Personnaliser
  ============================================================= */
}
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) {
  /* visuel image personnaliser
  ============================================================= */
}
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(--neutralGreyShade2);
  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) {
  /* marge entre les li
  ============================================================= */
}
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) {
  /* lien sous menu 1er level
  ////////////////////////////////////////////////////////////*/
}
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(--secondaryColor);
  width: 100%;
  bottom: 0;
  left: 0;
}
html:not(.mega-menu-primary-off-canvas-open) {
  /* lien sous menu 2nd level
  ////////////////////////////////////////////////////////////*/
}
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(--secondaryColorShade4);
  border: 1px solid var(--secondaryColor);
  color: var(--foregroundColor);
}
html:not(.mega-menu-primary-off-canvas-open) {
  /* 
  ┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
  │	COVERPLA - 3eme SOUS-MENU PRINCIPAL
  └────────────────────────────────────────────────────────────────────────────────────────────────────────┘
  */
  /* Grille de 8
  ////////////////////////////////////////////////////////////*/
}
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);
  padding-top: 2.375rem;
  justify-content: center;
  align-content: center;
}
html:not(.mega-menu-primary-off-canvas-open) {
  /* initialisation des li 
  ////////////////////////////////////////////////////////////*/
}
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) {
  /* liens 
  ////////////////////////////////////////////////////////////*/
}
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(--secondaryColorShade4);
  border: 1px solid var(--secondaryColor);
  color: var(--foregroundColor);
}
html:not(.mega-menu-primary-off-canvas-open) {
  /* 
  ┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
  │	ACTUALITES - 4eme SOUS-MENU PRINCIPAL
  └────────────────────────────────────────────────────────────────────────────────────────────────────────┘
  */
  /* Grille de 8
  ////////////////////////////////////////////////////////////*/
}
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);
  padding-top: 2.375rem;
  justify-content: center;
  align-content: center;
}
html:not(.mega-menu-primary-off-canvas-open) {
  /* initialisation des li 
  ////////////////////////////////////////////////////////////*/
}
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) {
  /* liens 
  ////////////////////////////////////////////////////////////*/
}
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(--secondaryColorShade4);
  border: 1px solid var(--secondaryColor);
  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 */
}
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(--secondaryColor);
}
html:is(.mega-menu-primary-off-canvas-open) {
  /*Reset marge des derniers niveaux de ul */
}
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(--neutralGreyShade2);
}
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(--neutralGreyShade4);
  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(--secondaryColorShade4);
}
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(--secondaryColor);
  padding-left: 20px;
}
html:is(.mega-menu-primary-off-canvas-open) {
  /* 
  ┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
  │	NOS PRODUITS - 1er SOUS-MENU MOBILE
  └────────────────────────────────────────────────────────────────────────────────────────────────────────┘
  */
  /* Titres colonnes par default 
  ////////////////////////////////////////////////////////////*/
}
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) {
  /* Trait orange sous titre colonnes par defaut
  ============================================================= */
}
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(--secondaryColor);
  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(--secondaryColor) !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(--secondaryColor) !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) {
  /* 
  ┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
  │	MIX&MATCH - 2eme SOUS-MENU MOBILE
  └────────────────────────────────────────────────────────────────────────────────────────────────────────┘
  */
  /* Titres colonnes par default 
  ////////////////////////////////////////////////////////////*/
}
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) {
  /* Trait orange sous titre colonnes par defaut
  ============================================================= */
}
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(--secondaryColor);
  width: 100%;
  bottom: 0;
  left: 0;
}
html:is(.mega-menu-primary-off-canvas-open) {
  /* Masquer bloc pour le visuel de décors flacon en version mobile*/
}
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) {
  /* 
  ┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
  │	COVERPLA - 3eme SOUS-MENU MOBILE
  └────────────────────────────────────────────────────────────────────────────────────────────────────────┘
  */
  /* Liens
  ////////////////////////////////////////////////////////////*/
}
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) {
  /* 
  ┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
  │	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:is(.mega-submenu-news) > ul.mega-sub-menu > li.mega-menu-item {
  padding: 0 15px;
}

/* FIN FORMATAGE MENU MOBILE */
/* ≤ 1280px : hamburger superposé à la row logo, wrap sans hauteur
============================================================= */
@media only screen and (max-width: 1280px) {
  #mega-menu-wrap-primary {
    height: 0 !important;
    overflow: visible !important;
  }
  #mega-menu-wrap-primary .mega-menu-toggle {
    position: absolute;
    top: calc(-1 * var(--header-row-h, 146px) / 2 - 25px);
    z-index: 1;
    background-color: transparent;
    line-height: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    text-align: left;
    white-space: nowrap;
    outline: none;
    user-select: none;
  }
  html.mega-menu-primary-off-canvas-open #mega-menu-wrap-primary ~ button.mega-close,
  html.mega-menu-primary-off-canvas-open #mega-menu-wrap-primary button.mega-close {
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: 44px !important;
    height: 44px !important;
  }
  html.mega-menu-primary-off-canvas-open #mega-menu-primary {
    padding-top: 44px !important;
  }
  #mega-menu-wrap-primary button.mega-close {
    display: none !important;
  }
  html.mega-menu-primary-off-canvas-open #mega-menu-wrap-primary button.mega-close,
  html.mega-menu-primary-off-canvas-open #mega-menu-wrap-primary ~ button.mega-close {
    display: flex !important;
  }
  #mega-menu-wrap-primary button.mega-close {
    background: transparent;
    border: none;
    padding: 0;
    align-items: center;
    justify-content: center;
  }
  #mega-menu-wrap-primary button.mega-close::before {
    display: none !important;
  }
  #mega-menu-wrap-primary button.mega-close::after {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--foregroundColor);
    font-family: "Material_Symbols_Rounded";
    content: "\e5cd";
    font-size: 18px;
    color: var(--canvasColor);
    font-variation-settings: "wght" 300;
    font-style: normal;
    line-height: 1;
  }
}
/* 
CSS footer 
version : 1.0
date : 09/11/2023
*/
/* 
┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│	FOOTER
└────────────────────────────────────────────────────────────────────────────────────────────────────────┘
*/
footer.site-footer p {
  margin-bottom: 0;
}

footer.site-footer {
  padding: 0;
  text-align: left;
  color: var(--canvasColor);
  background-color: var(--primaryColor);
}

footer.site-footer .col-full,
.site-footer .col-full {
  max-width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

footer.site-footer .footer-widget-2 a:not(.button):not(.components-button):hover,
footer.site-footer .footer-widget-3 a:not(.button):not(.components-button):hover,
footer.site-footer .site-info a:not(.button):not(.components-button):hover {
  color: var(--canvasColor);
  text-decoration: none !important;
  background-size: 100% 1px;
  opacity: 1;
}

.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: var(--footer-title-font-size);
  letter-spacing: 0;
  border-bottom: 2px solid var(--secondaryColor);
  padding-bottom: var(--footer-title-underline-gap);
  margin: 0 0 var(--footer-title-margin-bottom);
  font-weight: 300;
  width: fit-content;
}

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

footer.site-footer .button,
footer.site-footer input[type=submit],
.site-footer .button,
.site-footer input[type=submit] {
  width: 100% !important;
  background-color: var(--secondaryColor) !important;
  border-color: var(--secondaryColor) !important;
  color: var(--neutralWhite) !important;
  display: inline-flex !important;
}

footer.site-footer .button:hover, footer.site-footer .button:focus,
footer.site-footer input[type=submit]:hover, footer.site-footer input[type=submit]:focus,
.site-footer .button:hover, .site-footer .button:focus,
.site-footer input[type=submit]:hover, .site-footer input[type=submit]:focus {
  background-color: var(--secondaryColorShade1) !important;
  border-color: var(--secondaryColorShade1) !important;
  color: var(--neutralWhite) !important;
  opacity: 1 !important;
}

footer.site-footer .footer-widget-3 .button,
footer.site-footer .footer-widget-3 input[type=submit] {
  width: 100% !important;
}

.site-footer .widget a:not(.button):not(.components-button),
.site-footer .textwidget a:not(.button):not(.components-button) {
  font-family: var(--fontPrimary);
  font-size: var(--fs-body);
  font-weight: 400;
}

.site-footer .footer-widget-4 img {
  display: block;
  margin-bottom: clamp(1.25rem, 2vw, 1.875rem); /* 20px → 30px */
  border-radius: var(--borderRadius);
}

.site-footer .footer-widget-4 .widget-title,
.site-footer .footer-widget-4 .widgettitle {
  font-family: var(--fontPrimary_Light);
}

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

footer.site-footer .site-info,
.site-footer .site-info {
  font-family: var(--fontPrimary_Light);
  font-size: var(--fs-body);
  font-weight: 300;
  color: var(--neutralWhite);
  background-color: rgba(0, 0, 0, 0.2);
  padding: clamp(1rem, 2vw, 1.5rem) 0;
  /* Flex sur le wrapper interne */
}
footer.site-footer .site-info .footer--fullwidth-inner-wrapper,
.site-footer .site-info .footer--fullwidth-inner-wrapper {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--space-h-md);
}
footer.site-footer .site-info .footer--fullwidth-inner-wrapper > span,
.site-footer .site-info .footer--fullwidth-inner-wrapper > span {
  display: block;
  flex: 1;
  text-align: center;
  white-space: nowrap;
}
footer.site-footer .site-info .footer--fullwidth-inner-wrapper > span a,
.site-footer .site-info .footer--fullwidth-inner-wrapper > span a {
  display: inline !important;
  width: auto !important;
}

.footer-widget-1 .essb-profiles {
  display: flex;
  gap: 15px;
  align-items: center;
  margin-top: var(--space-micro);
}

.footer-widget-1 .essb-fc-block {
  width: 48px;
  height: 48px;
  border-radius: 9999px !important;
  background-color: var(--neutralWhite) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity 0.2s ease;
  position: relative;
}
.footer-widget-1 .essb-fc-block:hover {
  opacity: 0.8;
}
.footer-widget-1 .essb-fc-block a {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
}

.footer-widget-1 .essb-fc-block-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.footer-widget-1 .essb-fc-block-icon i {
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-widget-1 .essb-fc-block-icon svg {
  width: 18px !important;
  height: 18px !important;
  fill: var(--secondaryColor) !important;
  color: var(--secondaryColor) !important;
}

.footer-widget-1 .essb-fc-tiny-block {
  min-width: unset;
  min-height: unset;
}

/* ================================================================
   GRID 4 COLONNES — Figma node 217-30650
   ================================================================ */
.footer--fullwidth-inner-wrapper {
  max-width: var(--hdscreen);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--footer-padding-h);
  padding-right: var(--footer-padding-h);
}

.site-footer .site-info .footer--fullwidth-inner-wrapper {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--space-h-md);
  width: 100%;
}

/* Override Storefront float-based layout
   .footer-widgets joue le rôle de .footer--fullwidth-inner-wrapper (pas de filtre Storefront) */
.site-footer .footer-widgets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-h-lg);
  max-width: var(--hdscreen);
  margin-left: auto;
  margin-right: auto;
  padding: var(--footer-padding-v) var(--footer-padding-h);
  /* Reset Storefront floats */
}
.site-footer .footer-widgets::before, .site-footer .footer-widgets::after {
  display: none;
}
.site-footer .footer-widgets .block {
  float: none;
  width: auto;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-h-lg); /* clamp(20px → 50px) — Figma: 50px entre groupes */
  /* Supprime les marges bottom des widgets individuels */
}
.site-footer .footer-widgets .block .widget {
  margin-bottom: 0 !important;
}

.site-footer .footer-widget-1 .gamma {
  font-family: var(--fontPrimary);
  font-size: var(--fs-body);
  font-weight: 400;
  font-style: normal;
  line-height: 1.2;
  color: var(--neutralWhite);
  display: block;
  margin-bottom: 0;
}

.site-footer .footer-widget-1 {
  gap: var(--space-v-lg);
}
.site-footer .footer-widget-1::before {
  content: "";
  display: block;
  width: var(--footer-logo-width);
  height: auto;
  aspect-ratio: 253/82;
  background-image: url("assets/images/logo_coverpla.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left;
}

/* ================================================================
   RWD FOOTER
   ================================================================ */
@media (max-width: 1024px) {
  .site-footer .footer-widgets {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .site-footer .footer-widgets {
    grid-template-columns: 1fr;
  }
}
/* Global et commun
============================================================= */
/* 
version : 1.0
date : 09/11/2023
*/
/* 
┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│	FORMS - LINKS 
└────────────────────────────────────────────────────────────────────────────────────────────────────────┘
*/
::selection {
  color: var(--canvasColor);
  background-color: var(--secondaryColor);
}

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

/* checkboxes & radio buttons
///////////////////////////////////////////////////////////////*/
@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(--neutralGrey
    );
    --border-hover: var(--primaryColor);
    --background: var(--canvasColor);
    --disabled:var(--neutralGreyShade3
    );
    --disabled-inner: var(--neutralGrey
    );
    -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 {
    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;
  }
}
/* Liens
///////////////////////////////////////////////////////////////*/
a {
  cursor: pointer;
  color: var(--primaryColor);
}

/* Fade uniquement sur les liens texte simples */
.entry-content a,
.widget a,
footer a,
.post-content a,
.post-body a {
  transition: opacity 0.2s ease;
}
.entry-content a:hover,
.widget a:hover,
footer a:hover,
.post-content a:hover,
.post-body a:hover {
  opacity: 0.7;
  text-decoration: underline;
}

.animatedLink {
  text-decoration: none;
  background-image: linear-gradient(to right, currentColor 50%, transparent 50%);
  background-size: 200% 1px;
  background-repeat: no-repeat;
  background-position: 100% 100%;
  transition: background-position 0.3s ease;
}
.animatedLink:hover {
  background-position: 0% 100%;
  text-decoration: none;
  opacity: 1;
}

/* ================================================================
   Boutons — mixin de base
   Style pill : fond noir, bordure pill, texte blanc uppercase
   ================================================================ */
/* ---- Sélecteurs génériques ----
 * Scope : :where(#page) — exclut admin bar, GDPR, wp-core-ui
 * :where() = spécificité 0 → les modificateurs (.button--secondary etc.) peuvent toujours l'emporter
 * Exclusions restantes : boutons UI internes au thème avec leur propre style
 */
:where(#page) button:not(.slider__arrow):not(.slider__dot):not(.vv-controls__btn):not(.yith-wcan-filters-opener):not(.single_add_to_cart_button):not(.mega-toggle-animated):not(.mega-close):not(#coverpla-sticky-contact):not(#yith-searchsubmit):not([data-filter]):not(.button-reset):not(.lapilliUI-IconButton__root):not(.plus):not(.minus):not(.show-password-input),
:where(#page) input[type=button]:not(.plus):not(.minus),
:where(#page) input[type=reset],
:where(#page) input[type=submit]:not(#yith-searchsubmit):not([name=add-to-cart]),
:where(#page) .button:not(.single_add_to_cart_button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  background-color: var(--primaryColor);
  color: var(--neutralWhite);
  font-family: var(--fontPrimary_SemiBold);
  font-weight: normal;
  font-size: var(--btn-fs-normal);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--btn-padding-v-normal) var(--btn-padding-h-normal);
  border-radius: 9999px;
  border: 2px solid var(--primaryColor);
  white-space: nowrap;
  cursor: pointer;
  outline: none;
  transition: opacity 0.2s ease;
  line-height: var(--btn-line-height);
}
:where(#page) button:not(.slider__arrow):not(.slider__dot):not(.vv-controls__btn):not(.yith-wcan-filters-opener):not(.single_add_to_cart_button):not(.mega-toggle-animated):not(.mega-close):not(#coverpla-sticky-contact):not(#yith-searchsubmit):not([data-filter]):not(.button-reset):not(.lapilliUI-IconButton__root):not(.plus):not(.minus):not(.show-password-input):hover, :where(#page) button:not(.slider__arrow):not(.slider__dot):not(.vv-controls__btn):not(.yith-wcan-filters-opener):not(.single_add_to_cart_button):not(.mega-toggle-animated):not(.mega-close):not(#coverpla-sticky-contact):not(#yith-searchsubmit):not([data-filter]):not(.button-reset):not(.lapilliUI-IconButton__root):not(.plus):not(.minus):not(.show-password-input):focus,
:where(#page) input[type=button]:not(.plus):not(.minus):hover,
:where(#page) input[type=button]:not(.plus):not(.minus):focus,
:where(#page) input[type=reset]:hover,
:where(#page) input[type=reset]:focus,
:where(#page) input[type=submit]:not(#yith-searchsubmit):not([name=add-to-cart]):hover,
:where(#page) input[type=submit]:not(#yith-searchsubmit):not([name=add-to-cart]):focus,
:where(#page) .button:not(.single_add_to_cart_button):hover,
:where(#page) .button:not(.single_add_to_cart_button):focus {
  opacity: 0.82;
  color: var(--neutralWhite);
  text-decoration: none;
}
:where(#page) button:not(.slider__arrow):not(.slider__dot):not(.vv-controls__btn):not(.yith-wcan-filters-opener):not(.single_add_to_cart_button):not(.mega-toggle-animated):not(.mega-close):not(#coverpla-sticky-contact):not(#yith-searchsubmit):not([data-filter]):not(.button-reset):not(.lapilliUI-IconButton__root):not(.plus):not(.minus):not(.show-password-input):active,
:where(#page) input[type=button]:not(.plus):not(.minus):active,
:where(#page) input[type=reset]:active,
:where(#page) input[type=submit]:not(#yith-searchsubmit):not([name=add-to-cart]):active,
:where(#page) .button:not(.single_add_to_cart_button):active {
  opacity: 0.7;
}
:where(#page) button:not(.slider__arrow):not(.slider__dot):not(.vv-controls__btn):not(.yith-wcan-filters-opener):not(.single_add_to_cart_button):not(.mega-toggle-animated):not(.mega-close):not(#coverpla-sticky-contact):not(#yith-searchsubmit):not([data-filter]):not(.button-reset):not(.lapilliUI-IconButton__root):not(.plus):not(.minus):not(.show-password-input),
:where(#page) input[type=button]:not(.plus):not(.minus),
:where(#page) input[type=reset],
:where(#page) input[type=submit]:not(#yith-searchsubmit):not([name=add-to-cart]),
:where(#page) .button:not(.single_add_to_cart_button) {
  /* Pleine largeur */
}
:where(#page) button:not(.slider__arrow):not(.slider__dot):not(.vv-controls__btn):not(.yith-wcan-filters-opener):not(.single_add_to_cart_button):not(.mega-toggle-animated):not(.mega-close):not(#coverpla-sticky-contact):not(#yith-searchsubmit):not([data-filter]):not(.button-reset):not(.lapilliUI-IconButton__root):not(.plus):not(.minus):not(.show-password-input).fw,
:where(#page) input[type=button]:not(.plus):not(.minus).fw,
:where(#page) input[type=reset].fw,
:where(#page) input[type=submit]:not(#yith-searchsubmit):not([name=add-to-cart]).fw,
:where(#page) .button:not(.single_add_to_cart_button).fw {
  width: 100%;
  justify-content: center;
}
:where(#page) button:not(.slider__arrow):not(.slider__dot):not(.vv-controls__btn):not(.yith-wcan-filters-opener):not(.single_add_to_cart_button):not(.mega-toggle-animated):not(.mega-close):not(#coverpla-sticky-contact):not(#yith-searchsubmit):not([data-filter]):not(.button-reset):not(.lapilliUI-IconButton__root):not(.plus):not(.minus):not(.show-password-input),
:where(#page) input[type=button]:not(.plus):not(.minus),
:where(#page) input[type=reset],
:where(#page) input[type=submit]:not(#yith-searchsubmit):not([name=add-to-cart]),
:where(#page) .button:not(.single_add_to_cart_button) {
  /* Désactivé */
}
:where(#page) button:not(.slider__arrow):not(.slider__dot):not(.vv-controls__btn):not(.yith-wcan-filters-opener):not(.single_add_to_cart_button):not(.mega-toggle-animated):not(.mega-close):not(#coverpla-sticky-contact):not(#yith-searchsubmit):not([data-filter]):not(.button-reset):not(.lapilliUI-IconButton__root):not(.plus):not(.minus):not(.show-password-input).disabled, :where(#page) button:not(.slider__arrow):not(.slider__dot):not(.vv-controls__btn):not(.yith-wcan-filters-opener):not(.single_add_to_cart_button):not(.mega-toggle-animated):not(.mega-close):not(#coverpla-sticky-contact):not(#yith-searchsubmit):not([data-filter]):not(.button-reset):not(.lapilliUI-IconButton__root):not(.plus):not(.minus):not(.show-password-input)[aria-disabled=true], :where(#page) button:not(.slider__arrow):not(.slider__dot):not(.vv-controls__btn):not(.yith-wcan-filters-opener):not(.single_add_to_cart_button):not(.mega-toggle-animated):not(.mega-close):not(#coverpla-sticky-contact):not(#yith-searchsubmit):not([data-filter]):not(.button-reset):not(.lapilliUI-IconButton__root):not(.plus):not(.minus):not(.show-password-input):disabled,
:where(#page) input[type=button]:not(.plus):not(.minus).disabled,
:where(#page) input[type=button]:not(.plus):not(.minus)[aria-disabled=true],
:where(#page) input[type=button]:not(.plus):not(.minus):disabled,
:where(#page) input[type=reset].disabled,
:where(#page) input[type=reset][aria-disabled=true],
:where(#page) input[type=reset]:disabled,
:where(#page) input[type=submit]:not(#yith-searchsubmit):not([name=add-to-cart]).disabled,
:where(#page) input[type=submit]:not(#yith-searchsubmit):not([name=add-to-cart])[aria-disabled=true],
:where(#page) input[type=submit]:not(#yith-searchsubmit):not([name=add-to-cart]):disabled,
:where(#page) .button:not(.single_add_to_cart_button).disabled,
:where(#page) .button:not(.single_add_to_cart_button)[aria-disabled=true],
:where(#page) .button:not(.single_add_to_cart_button):disabled {
  opacity: 0.4;
  pointer-events: none;
  user-select: none;
  cursor: not-allowed;
}
:where(#page) button:not(.slider__arrow):not(.slider__dot):not(.vv-controls__btn):not(.yith-wcan-filters-opener):not(.single_add_to_cart_button):not(.mega-toggle-animated):not(.mega-close):not(#coverpla-sticky-contact):not(#yith-searchsubmit):not([data-filter]):not(.button-reset):not(.lapilliUI-IconButton__root):not(.plus):not(.minus):not(.show-password-input),
:where(#page) input[type=button]:not(.plus):not(.minus),
:where(#page) input[type=reset],
:where(#page) input[type=submit]:not(#yith-searchsubmit):not([name=add-to-cart]),
:where(#page) .button:not(.single_add_to_cart_button) {
  /*
   * Storefront style.css ET son Customizer inline écrasent certaines propriétés.
   * !important nécessaire pour les propriétés visuelles critiques.
   */
  display: inline-flex !important;
  background-color: var(--primaryColor) !important;
  border-color: var(--primaryColor) !important;
  color: var(--neutralWhite) !important;
  border-radius: 9999px !important;
  font-size: var(--btn-fs-normal) !important;
  padding: var(--btn-padding-v-normal) var(--btn-padding-h-normal) !important;
}

:where(#page) button.show-password-input {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  background-color: var(--primaryColor);
  color: var(--neutralWhite);
  font-family: var(--fontPrimary_SemiBold);
  font-weight: normal;
  font-size: var(--btn-fs-normal);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--btn-padding-v-normal) var(--btn-padding-h-normal);
  border-radius: 9999px;
  border: 2px solid var(--primaryColor);
  white-space: nowrap;
  cursor: pointer;
  outline: none;
  transition: opacity 0.2s ease;
  line-height: var(--btn-line-height);
}
:where(#page) button.show-password-input:hover, :where(#page) button.show-password-input:focus {
  opacity: 0.82;
  color: var(--neutralWhite);
  text-decoration: none;
}
:where(#page) button.show-password-input:active {
  opacity: 0.7;
}
:where(#page) button.show-password-input {
  /* Pleine largeur */
}
:where(#page) button.show-password-input.fw {
  width: 100%;
  justify-content: center;
}
:where(#page) button.show-password-input {
  /* Désactivé */
}
:where(#page) button.show-password-input.disabled, :where(#page) button.show-password-input[aria-disabled=true], :where(#page) button.show-password-input:disabled {
  opacity: 0.4;
  pointer-events: none;
  user-select: none;
  cursor: not-allowed;
}
:where(#page) button.show-password-input {
  display: inline-flex !important;
  background-color: var(--primaryColor) !important;
  border-color: var(--primaryColor) !important;
  color: var(--neutralWhite) !important;
  border-radius: 9999px !important;
  font-size: var(--btn-fs-normal) !important;
  padding: var(--btn-padding-v-normal) var(--btn-padding-h-small) !important;
}

/* ---- Icône dans les boutons ---- */
.button__icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.button__icon svg {
  width: var(--btn-icon-size-normal);
  height: var(--btn-icon-size-normal);
}
.button__icon.material-symbols-rounded {
  font-size: var(--btn-icon-size-normal);
}

.button--small .button__icon svg {
  width: var(--btn-icon-size-small);
  height: var(--btn-icon-size-small);
}
.button--small .button__icon.material-symbols-rounded {
  font-size: var(--btn-icon-size-small);
}

.button--tiny .button__icon svg {
  width: var(--btn-icon-size-tiny);
  height: var(--btn-icon-size-tiny);
}
.button--tiny .button__icon.material-symbols-rounded {
  font-size: var(--btn-icon-size-tiny);
}

/* ---- Variantes position d'icône ---- */
.button--icon-right { /* défaut — pas de surcharge nécessaire */ }

.button--icon-left {
  flex-direction: row-reverse;
}

/* ---- Modificateur secondaire (doré) ---- */
.button--secondary:not(.button-primary):not(.wp-core-ui):not(.adminbar-button):not(.button-placeholder):not(.single_add_to_cart_button) {
  background-color: var(--secondaryColor) !important;
  border-color: var(--secondaryColor) !important;
  color: var(--neutralWhite) !important;
}

.button--secondary:not(.button-primary):not(.wp-core-ui):not(.adminbar-button):not(.button-placeholder):not(.single_add_to_cart_button):hover,
.button--secondary:not(.button-primary):not(.wp-core-ui):not(.adminbar-button):not(.button-placeholder):not(.single_add_to_cart_button):focus {
  background-color: var(--secondaryColorShade1) !important;
  border-color: var(--secondaryColorShade1) !important;
  color: var(--neutralWhite) !important;
  opacity: 1;
}

/* ---- Modificateur outline ---- */
.button--outline:not(.button-primary):not(.wp-core-ui):not(.adminbar-button):not(.button-placeholder):not(.single_add_to_cart_button) {
  background-color: transparent !important;
  color: var(--primaryColor) !important;
  border-color: var(--primaryColor) !important;
}

.button--outline:not(.button-primary):not(.wp-core-ui):not(.adminbar-button):not(.button-placeholder):not(.single_add_to_cart_button):hover,
.button--outline:not(.button-primary):not(.wp-core-ui):not(.adminbar-button):not(.button-placeholder):not(.single_add_to_cart_button):focus {
  background-color: var(--primaryColor) !important;
  color: var(--neutralWhite) !important;
  opacity: 1;
}

/* ---- Modificateur white — fond blanc, texte + icône noirs ---- */
.button--white:not(.button-primary):not(.wp-core-ui):not(.adminbar-button):not(.button-placeholder):not(.single_add_to_cart_button) {
  background-color: var(--neutralWhite) !important;
  border-color: var(--neutralWhite) !important;
  color: var(--primaryColor) !important;
}

.button--white:not(.button-primary):not(.wp-core-ui):not(.adminbar-button):not(.button-placeholder):not(.single_add_to_cart_button):hover,
.button--white:not(.button-primary):not(.wp-core-ui):not(.adminbar-button):not(.button-placeholder):not(.single_add_to_cart_button):focus {
  background-color: var(--neutralWhite) !important;
  border-color: var(--neutralWhite) !important;
  color: var(--primaryColor) !important;
  opacity: 0.85;
}

/* ---- Icône seule — cercle ---- */
.button--circle {
  width: 56px;
  height: 56px;
  gap: 0;
  line-height: 1;
  border-radius: 9999px;
  flex-shrink: 0;
}
.button--circle svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.button--circle:hover, .button--circle:focus {
  opacity: 0.82;
  color: var(--neutralWhite);
  text-decoration: none;
}
.button--circle:active {
  opacity: 0.7;
}

/* ---- Padding circle — spécificité 0-7-0 : .button + .button--circle + 5 :not() ---- */
.button.button--circle:not(.button-primary):not(.button-secondary):not(.wp-core-ui):not(.adminbar-button):not(.button-placeholder) {
  padding: 16px !important;
}

/* ---- Padding circle small — spécificité 0-8-0 ---- */
.button.button--small.button--circle:not(.button-primary):not(.button-secondary):not(.wp-core-ui):not(.adminbar-button):not(.button-placeholder) {
  padding: 7px !important;
}

/* ---- Taille small ---- */
.button--small:not(.button-primary):not(.wp-core-ui):not(.adminbar-button):not(.button-placeholder):not(.single_add_to_cart_button) {
  font-size: var(--btn-fs-small) !important;
  padding: var(--btn-padding-v-small) var(--btn-padding-h-small) !important;
  gap: var(--btn-gap);
  line-height: var(--btn-line-height) !important;
}

.button--small.button--circle {
  width: 30px;
  height: 30px;
}
.button--small.button--circle svg {
  width: 16px;
  height: 16px;
}

/* ---- Taille tiny ---- */
.button--tiny:not(.button-primary):not(.wp-core-ui):not(.adminbar-button):not(.button-placeholder):not(.single_add_to_cart_button) {
  font-size: var(--btn-fs-tiny) !important;
  padding: var(--btn-padding-v-tiny) var(--btn-padding-h-tiny) !important;
  gap: var(--btn-gap);
  line-height: var(--btn-line-height) !important;
  border-width: 1px !important;
}

/* ---- Padding circle tiny — spécificité 0-8-0 ---- */
.button.button--tiny.button--circle:not(.button-primary):not(.button-secondary):not(.wp-core-ui):not(.adminbar-button):not(.button-placeholder) {
  padding: 5px !important;
}

.button--tiny.button--circle {
  width: 24px;
  height: 24px;
}
.button--tiny.button--circle svg {
  width: 12px;
  height: 12px;
}

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

.pulsation:hover {
  animation: none;
}

@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,
select,
.input-text {
  height: var(--input-height);
  font-size: var(--input-fs);
  font-family: var(--fontPrimary);
  border: 1.5px solid var(--neutralGrey);
  border-radius: var(--borderRadiusInputs);
  width: 100%;
  padding: 0 var(--input-padding-h);
  color: var(--primaryColor);
  background: var(--neutralWhite);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  appearance: none;
}
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,
select:focus,
select.active,
.input-text:focus,
.input-text.active {
  border-color: var(--primaryColor);
  box-shadow: 0 0 0 3px rgba(34, 34, 33, 0.08);
  background: var(--neutralWhite);
}
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,
select:disabled,
.input-text:disabled {
  background: var(--neutralGreyShade4);
  border-color: var(--neutralGreyShade3);
  color: var(--neutralGrey);
  cursor: not-allowed;
  opacity: 0.7;
}

textarea {
  height: auto;
  min-height: 120px;
  padding: var(--input-padding-h) var(--input-padding-h);
  border-radius: 20px;
  resize: vertical;
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23B7B8BC' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--input-padding-h) center;
  padding-right: calc(var(--input-padding-h) * 2.5);
  cursor: pointer;
}

.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,
.ft-field.input-error input,
.ft-field.input-error select,
.ft-field.input-error textarea {
  border-color: var(--accentRed);
  background: var(--accentRedShade1);
}
.input-error .feedback-form,
.ft-field.input-error .feedback-form {
  color: var(--accentRedShade3);
}
.input-error .input__validator__status,
.ft-field.input-error .input__validator__status {
  background: var(--accentRed);
}
.input-error .input__validator__status::before,
.ft-field.input-error .input__validator__status::before {
  transform: rotate(45deg) translateY(-5.5px) translateX(13.5px);
}
.input-error .input__validator__status::after,
.ft-field.input-error .input__validator__status::after {
  transform: rotate(-45deg) translateY(13.5px) translateX(5.5px);
}

.input-success input,
.input-success select,
.input-success textarea,
.ft-field.input-success input,
.ft-field.input-success select,
.ft-field.input-success textarea {
  border-color: var(--accentGreen);
}
.input-success .feedback-form,
.ft-field.input-success .feedback-form {
  color: var(--accentGreenShade3);
}

.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(--secondaryColorShade4);
  color: var(--secondaryColorShade2);
}
.status-primary:before, .status-primary:after {
  background: var(--secondaryColorShade2);
}

.status-secondary {
  background: var(--accentGreenShade2);
  color: var(--accentGreenShade1);
}
.status-secondary:before, .status-secondary:after {
  background: var(--accentGreenShade1);
}

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

.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(--secondaryColorShade2);
}

.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(--secondaryColor);
  animation: spinnerLeftRight 0.6s infinite;
}
.spinner-1 .spinner:before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  left: -10%;
  background: var(--secondaryColorShade2);
  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(--secondaryColor);
  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(--neutralGrey);
    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(--neutralGrey);
  border: 1px solid var(--neutralGrey);
  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(--secondaryColor);
  background-color: var(--secondaryColorShade4);
  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: var(--fs-body);
  text-align: center;
  transition: background-color 0.3s ease, color 0.3s ease;
  max-width: 2560px;
  margin-left: auto;
  margin-right: auto;
}

.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-le-nostre-realizzazioni) .page-template {
  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;
  padding: 0 var(--section-padding-h);
}

/* CONTENEURS DE SECTIONS — Harmonisation des espacements
///////////////////////////////////////////////////////////////*/
.section--default {
  padding: var(--space-v-xl) 0;
}

.section--fullwidth {
  width: min(100vw, 2560px);
  margin-left: calc(-1 * (min(100vw, 2560px) - 100%) / 2);
  box-sizing: border-box;
}

.section--fullwidth-inner-wrapper {
  max-width: var(--hdscreen);
  margin-left: auto;
  margin-right: auto;
  padding: var(--section-padding);
}

.section--slider {
  padding-top: var(--section-padding-v);
  padding-bottom: var(--section-padding-v);
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}

.section--slider .slider__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 var(--section-padding-h);
  margin-left: auto;
  margin-right: auto;
  max-width: var(--hdscreen);
}

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

.woocommerce-error {
  color: var(--errorColor);
  background-color: var(--errorBackgroundColor);
  border-radius: var(--borderRadius);
}
.woocommerce-error::before {
  color: var(--errorColor);
}

.woocommerce-message {
  color: var(--successColor);
  background-color: var(--successBackgroundColor);
  border-radius: var(--borderRadius);
}
.woocommerce-message::before {
  color: var(--successColor);
}

/* Grands titres de pages
///////////////////////////////////////////////////////////////*/
.title--lg {
  font-family: var(--fontSecondary_SemiBold);
  font-size: var(--fs-page-title);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--primaryColor);
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 769px) {
  .title--lg {
    white-space: nowrap;
  }
}

.bigTitle {
  font-family: var(--fontPrimary_SemiBold);
  font-size: var(--fs-section-title);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  position: relative;
  margin-bottom: var(--space-bigtitle-mb);
  text-align: left;
}

/* Surtitre de .bigTitle — 0.55em = ratio constant avec le titre principal (3rem/5.625rem).
   ⚠️ Ne pas remplacer par un token px/rem : l'em garantit la proportionnalité à tous les viewports. */
.bigTitle > span:first-child, .title {
  font-family: var(--fontPrimary_Light);
  font-size: 0.55em;
  display: block;
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-display);
}

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

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

.responsive {
  max-width: 100%;
  width: 100%;
  height: auto;
}

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

.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* BOITES GENERIQUES (CARDS)
///////////////////////////////////////////////////////////////*/
.card {
  border: 1px solid var(--neutralGreyShade3);
  background-color: var(--cardBackground);
  position: relative;
  border-radius: var(--borderRadius);
  transition: all 350ms ease-out 0s;
  box-shadow: var(--boxShadow-card);
}

.card:hover {
  background-color: var(--canvasColor);
  border-color: var(--secondaryColor);
  box-shadow: 4px 8px 20px rgba(0, 0, 0, 0.1215686275);
  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: var(--fs-card-title);
  line-height: var(--leading-title);
  text-transform: uppercase;
  margin: var(--space-h-xl);
  overflow: hidden;
}

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

/* Badge new 
============================================================= */
LI.product:is(.product_tag-nouveau)::before,
LI.product:is(.product_tag-new)::before,
LI.product:is(.product_tag-nuovo)::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,
.single-product .product:is(.product_tag-nuovo) .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: var(--breadcrumb-padding-v) var(--viewport-inline-padding);
  background-color: var(--primaryColor);
  text-align: left;
  color: var(--canvasColor);
}

#breadcrumbs > span {
  max-width: var(--hdscreen);
  margin-left: auto;
  margin-right: auto;
  display: flex;
  font-size: var(--breadcrumb-fs);
  font-family: var(--fontPrimary);
  flex-direction: row;
  align-items: center;
}

/* liens cliquables breadcrumb */
#breadcrumbs > span span {
  display: inline-block;
  margin: 0 var(--breadcrumb-gap);
  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(--secondaryColor);
}

#breadcrumbs > span span:first-child a {
  display: inline-flex;
  align-items: center;
  font-size: 0;
}

#breadcrumbs > span span:first-child a::before {
  font-family: "Material_Symbols_Rounded";
  content: "\e88a";
  color: var(--canvasColor);
  display: inline-block;
  font-size: var(--breadcrumb-fs-home-icon);
  line-height: 1;
}

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

#breadcrumbs > span span:last-child {
  font-family: var(--fontPrimary_SemiBold);
  font-size: var(--breadcrumb-fs-current);
  letter-spacing: var(--breadcrumb-tracking);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 
┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│	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;
}

.woocommerce-account .entry-title,
.page-mon-compte .entry-title,
.page-my-account .entry-title,
.page-contactez-nous .entry-title,
.page-contact-us .entry-title,
.page-contattaci .entry-title,
.yith-request-a-quote-page .entry-title,
.page-nos-realisations .entry-title,
.page-our-accomplishments .entry-title,
.page-le-nostre-realizzazioni .entry-title {
  display: none;
}

/*
┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│	Resultat de recherche
└────────────────────────────────────────────────────────────────────────────────────────────────────────┘
*/
.search-results .site-content {
  text-align: left;
  background: var(--backgroundColor);
}
.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(--secondaryColor);
}
.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(--secondaryColor);
  -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(--neutralGrey);
}
.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;
}
.search-results article a:link .entry-title span,
.search-results article a:active .entry-title span,
.search-results article a:visited .entry-title span {
  display: inline;
  overflow: visible !important;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: 0% 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.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(--secondaryColor);
}
.search-results article a:hover .entry-title span {
  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(--secondaryColor);
  position: fixed;
}

/* 
┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│	RWD MAIN LAYOUT COMMON
└────────────────────────────────────────────────────────────────────────────────────────────────────────┘
*/
/* 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) {
  #breadcrumbs {
    visibility: hidden;
  }
}
/* FORMATAGE GLOBAL — max-width et padding sur toutes les pages (homepage incluse)
///////////////////////////////////////////////////////////////*/
body .site-content {
  max-width: var(--hdscreen);
  margin-left: auto;
  margin-right: auto;
  padding: var(--section-padding);
  overflow-x: visible !important;
}

@media screen and (max-width: 1920px) {
  body .site-content,
  .wrapper,
  .section--slider .slider__header,
  .section--fullwidth-inner-wrapper {
    max-width: 1440px;
  }
  :root {
    --viewport-inline-padding: calc(max(0px, (min(100vw, 2560px) - 1440px) / 2) + var(--defaultPadding-h));
  }
}
@media screen and (max-width: 1280px) {
  body .site-content,
  .wrapper,
  .section--slider .slider__header,
  .section--fullwidth-inner-wrapper {
    max-width: 1024px;
  }
  :root {
    --viewport-inline-padding: calc(max(0px, (min(100vw, 2560px) - 1024px) / 2) + var(--defaultPadding-h));
  }
}
body:not(.home):not(.page-template-template-homepage-php) {
  padding-top: var(--headerHeight);
}

body.home .site-content,
body.page-template-template-homepage-php .site-content {
  padding-top: 0;
  padding-bottom: 0;
}

/* Sections fullwidth — s'échappent du padding/max-width de .site-content (toutes pages) */
.section--slider {
  width: min(100vw, 2560px);
  margin-left: calc(-1 * (min(100vw, 2560px) - 100%) / 2);
  box-sizing: border-box;
}

/* 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;
  }
  #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;
  }
}
/* 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 MIX & MATCH
///////////////////////////////////////////////////////////////*/
.home_mixmatch {
  position: relative;
}

.home_mixmatch .grid {
  display: grid;
  gap: var(--space-h-lg);
  grid-template-columns: repeat(2, 1fr);
}

/* Cards */
.home_mixmatch .col_left,
.home_mixmatch .col_right {
  display: flex;
  flex-direction: column;
  gap: var(--space-v-md);
  padding: var(--card-padding);
  border-radius: var(--borderRadius);
  background-color: var(--neutralGreyShade4);
  container-type: inline-size;
}

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

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

.home_mixmatch .col_right {
  text-align: left;
}

/* Annuler le surtitre hérité de .bigTitle > span:first-child (_main.scss)
   pour que le span hérite directement de .bigTitle */
.home_mixmatch .col_left .bigTitle > span,
.home_mixmatch .col_right .bigTitle > span {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  display: inline-block !important;
}

.home_mixmatch .bigTitle {
  margin-bottom: 0;
  font-size: clamp(2.375rem, 5.3125vw - 2.875rem, 4.9rem); /* 38px min · 56px@1920px · max 78.4px */
  word-spacing: -0.05em;
}

.home_mixmatch .col_left,
.home_mixmatch .col_right {
  padding-left: clamp(20px, 2.5vw, 30px);
  padding-right: clamp(20px, 2.5vw, 30px);
}

/* Texte intro */
.home_mixmatch p {
  font-family: var(--fontPrimary);
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  color: var(--primaryColor);
  margin: 0;
}

/* Image Mix&Match */
.home_mixmatch .col_left img.responsive {
  width: 100%;
  height: auto;
  display: block;
}

.home_mixmatch .col_left button.button {
  border: none;
  cursor: pointer;
}

.home_mixmatch::before {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 50;
  pointer-events: none;
  content: "\e147";
  font-family: "Material_Symbols_Rounded";
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
  color: var(--foregroundColor);
  font-size: var(--fs-mixmatch-plus);
  top: calc(var(--space-v-xl) + var(--card-padding));
  line-height: 1;
}

.home_mixmatch .col_right_subgrid {
  display: flex;
  align-items: center;
  gap: var(--space-h-md);
  overflow: visible;
}

.home_mixmatch .col_right_subgrid > .grid-item:first-child {
  flex: 0 0 calc(50% - var(--space-h-md) / 2);
  min-width: 0;
  overflow: hidden;
  align-self: stretch;
  position: relative;
}

.home_mixmatch .col_right_subgrid > .grid-item:last-child {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-micro);
}

.home_mixmatch .col_right_subgrid > .grid-item:last-child > .home-mixmatch__group-title:not(:first-child) {
  margin-top: var(--space-v-sm);
}

.home_mixmatch .col_right_subgrid .grid-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  display: block;
}

.home-mixmatch__group-title {
  font-family: var(--fontPrimary_Medium);
  font-size: var(--fs-subtitle);
  line-height: 1;
  letter-spacing: -0.08em;
  color: var(--primaryColor);
  border-bottom: 4px solid var(--secondaryColor);
  padding-bottom: var(--space-micro);
  margin: 0;
  text-align: left;
  width: fit-content;
}

/* Liste de tags */
.home_mixmatch .col_right_subgrid .grid-item ul {
  padding: 0;
  margin: var(--space-nano) 0 var(--space-xs) 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-micro);
}

@container (max-width: 800px) {
  .home_mixmatch .col_right_subgrid .button {
    --btn-fs-small: var(--btn-fs-tiny);
    --btn-padding-v-small: var(--btn-padding-v-tiny);
    --btn-padding-h-small: var(--btn-padding-h-tiny);
    --btn-icon-size-small: var(--btn-icon-size-tiny);
  }
  .home_mixmatch .col_right_subgrid .grid-item ul {
    gap: var(--space-nano);
  }
}
.home_mixmatch .col_right_subgrid .grid-item li {
  padding: 0;
  list-style: none;
}

/* Tag pill */
/* SECTION GREEN ATTITUDE
///////////////////////////////////////////////////////////////*/
.home_greenAttitude .section--fullwidth-inner-wrapper {
  padding: 0 var(--section-padding-h);
}

.home_greenAttitude {
  padding: var(--section-padding-v) 0;
  background-image: url("assets/images/home_demarche_durable_background.webp");
  background-position: right 30% bottom 0%;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--canvasColor);
  position: relative;
  height: auto;
  overflow: hidden;
}
.home_greenAttitude::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.1);
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.home_greenAttitude__inner {
  max-width: 66.6666666667%;
  display: flex;
  flex-direction: column;
  gap: var(--space-v-md);
}

.home_greenAttitude .bigTitle {
  margin-left: 0;
  text-align: left;
}

/* Carte citation */
.home_greenAttitude .overlay {
  max-width: 66.6666666667%;
  display: flex;
  flex-direction: row;
  gap: var(--space-h-md);
  align-items: flex-start;
  background: rgba(0, 24, 48, 0.5);
  border-radius: var(--borderRadius);
  padding: var(--card-padding);
}

.overlay__portrait {
  flex-shrink: 0;
  width: clamp(180px, 35%, 390px);
  height: auto;
}

.overlay__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-v-sm);
  align-items: flex-start;
}

.overlay__portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: var(--borderRadius);
}

/* Citation */
.overlay__quote {
  margin: 0;
  padding: 0;
}

.overlay__guillemet {
  display: block;
  width: clamp(20px, 2.5vw, 30px);
  height: auto;
}
.overlay__guillemet--close {
  transform: rotate(180deg);
  margin-left: auto;
}

.overlay__quote-text {
  font-family: var(--fontPrimary_Italic);
  font-size: var(--fs-body-lg);
  line-height: var(--leading-title);
  color: var(--neutralWhite);
  text-align: justify;
  padding: var(--space-micro) 0;
}
.overlay__quote-text p {
  margin-bottom: 1em;
}
.overlay__quote-text p:last-child {
  margin-bottom: 0;
}

/* Signature */
.overlay__author {
  font-family: var(--fontPrimary_SemiBold);
  font-size: var(--fs-label);
  font-style: italic;
  letter-spacing: var(--tracking-title);
  color: var(--neutralWhite);
  align-self: flex-end;
  margin: 0;
}

/* Responsive */
@media (max-width: 1280px) {
  .home_greenAttitude__inner {
    max-width: 100%;
  }
  .home_greenAttitude .overlay {
    max-width: 100%;
  }
}
@media (max-width: 768px) {
  .home_greenAttitude .overlay {
    flex-direction: column;
  }
  .overlay__portrait {
    width: 100%;
  }
  .overlay__portrait img {
    max-width: 100%;
    width: auto;
    margin: 0 auto;
  }
  .overlay__content {
    width: 100%;
  }
  .overlay__content .button {
    width: 100%;
    justify-content: center;
  }
  .overlay__content .button .button__icon {
    display: none;
  }
  .overlay__quote-text {
    text-align: left;
  }
  .overlay__author {
    text-align: left;
    align-self: flex-start;
  }
}
/* SECTION ACTUALITES
///////////////////////////////////////////////////////////////*/
/* ACTUALITES
============================================================= */
.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(--secondaryColor);
  transition: all 0.5s ease-in-out;
  padding: var(--badge-padding-v) var(--badge-padding-h);
  font-weight: 600;
  font-size: var(--fs-badge);
  border-radius: var(--borderRadiusInputs);
}
.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: var(--fs-entry-date);
  letter-spacing: 0.08em;
  color: var(--neutralGrey);
}
.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: var(--fs-news-title);
  line-height: 1.07;
  letter-spacing: var(--tracking-title);
  color: var(--foregroundColor);
  font-family: var(--fontPrimary_SemiBold);
  margin: 0;
}
.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: var(--space-v-sm) var(--card-padding-news);
  color: var(--foregroundColor);
  text-align: justify;
  font-size: var(--fs-body);
  line-height: var(--leading-body);
}

.home_actualites article.grid-item a:hover {
  color: var(--foregroundColor);
  text-decoration: none;
}
.home_actualites article.grid-item a:hover .entry-title {
  color: var(--secondaryColor);
  text-decoration: none;
}

.home_actualites .card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--borderRadius);
}

.home_actualites .post-image figure {
  margin: 0;
  border-radius: var(--borderRadius);
  border: 1px solid var(--neutralGreyShade3);
  overflow: hidden;
}
.home_actualites .post-image figure img {
  width: 100%;
  display: block;
  border-radius: 0;
}

.home_actualites .post-content {
  display: flex;
  flex-direction: column;
  gap: var(--card-padding-news);
}
.home_actualites .post-content header {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

/* COMPOSANT PARTAGÉ — CARTE 2 COLONNES (visite virtuelle + présence internationale)
///////////////////////////////////////////////////////////////*/
/* SECTION VISITE VIRTUELLE
///////////////////////////////////////////////////////////////*/
.home_visite_virtuelle {
  padding-bottom: 0;
}

/* SECTION PRÉSENCE INTERNATIONALE
///////////////////////////////////////////////////////////////*/
.home_presence_internationale {
  padding-top: 0;
  padding-bottom: var(--section-padding-v);
}

.home-carte {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--neutralGreyShade3);
  border-radius: var(--borderRadius);
  overflow: hidden;
}
.home-carte__visual {
  aspect-ratio: 1/1;
  overflow: hidden;
}
.home-carte__img {
  width: 100%;
  height: auto;
  display: block;
}
.home-carte__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-h-lg);
  padding: 0 var(--space-h-lg) 0 var(--space-h-xl);
  text-align: left;
}
.home-carte__text p {
  font-family: var(--fontPrimary);
  font-size: var(--fs-card-intro);
  line-height: var(--leading-title);
  color: var(--primaryColor);
  margin: 0;
}
.home-carte__titre {
  font-family: var(--fontSecondary_SemiBold);
  font-size: var(--fs-section-title);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--primaryColor);
  margin: 0;
}

/* SECTION VISITE VIRTUELLE 360°
///////////////////////////////////////////////////////////////*/
/* → Styles isolés dans assets/css/visite-virtuelle.css
      chargé via coverpla_enqueue_visite_virtuelle_script() */
/*
┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│	RWD HOME (ACCUEIL)
└────────────────────────────────────────────────────────────────────────────────────────────────────────┘
*/
/* 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_mixmatch .col_right_subgrid > .grid-item:first-child {
    max-width: 100%;
  }
}
/* Entre 768px et 1024px
============================================================= */
/* SECTION ACTUALITÉS
///////////////////////////////////////////////////////////////*/
.home_actualites {
  gap: 0;
}

.home_actualites .grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-h-md);
}

/* 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_mixmatch .grid {
    grid-template-columns: 1fr;
  }
  .home_mixmatch::before {
    display: none;
  }
  .home_mixmatch .col_left,
  .home_mixmatch .col_left .bigTitle {
    text-align: left;
  }
  .home-mixmatch__group-title {
    font-size: var(--fs-subtitle);
    letter-spacing: -0.06em;
  }
  .home_actualites .grid {
    grid-template-columns: 1fr;
  }
  .home-carte {
    grid-template-columns: 1fr;
  }
  .home-carte__visual {
    aspect-ratio: auto;
    order: -1;
  }
  .home-carte__text {
    gap: var(--space-v-md);
    padding: var(--space-v-md) var(--space-h-lg);
    text-align: left;
    align-items: flex-start;
  }
  .home-carte__titre {
    font-size: var(--fs-block-title);
  }
  .home_visite_virtuelle {
    padding-top: var(--space-v-lg);
  }
  .home_presence_internationale {
    padding-top: var(--section-padding-v);
    padding-bottom: var(--space-v-lg);
  }
  .home_presence_internationale .button,
  .home_visite_virtuelle .button {
    width: 100%;
    justify-content: center;
  }
}
/* Entre 1024px et 1280px
============================================================= */
@media screen and (min-width: 1024px) and (max-width: 1280px) {
  .home_actualites .grid {
    grid-template-columns: 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
============================================================= */
/* 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
============================================================= */
/*
 * SECTION STATS — Homepage
 * Template part : stats/stats-homepage.php
 *
 * @package Coverpla-2.0
 */
.home_stats {
  background: var(--canvasColor);
  padding: var(--space-v-md) 0;
}
.home_stats .stats_grid {
  background: var(--canvasColor);
  border-radius: var(--borderRadius);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-h-xl);
}
.home_stats .stat_item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  gap: var(--space-xs);
}
.home_stats .stat_number {
  --stat-fs: var(--fs-stat-number);
  font-family: var(--fontPrimary_SemiBold);
  font-size: var(--stat-fs);
  line-height: 1;
  letter-spacing: -0.1875rem;
  color: var(--secondaryColor);
  font-variant-numeric: tabular-nums;
}
.home_stats .stat_label {
  font-family: var(--fontPrimary_SemiBold);
  font-size: var(--fs-card-title);
  line-height: normal;
  color: var(--foregroundColor);
}
.home_stats .stat_description {
  font-family: var(--fontPrimary);
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  color: var(--foregroundColor);
  margin-bottom: 0;
}

@media screen and (max-width: 768px) {
  .home_stats .stats_grid {
    grid-template-columns: 1fr;
  }
}
/*
 * SECTION CATALOGUE — Homepage
 * Template part : catalogue/catalogue-homepage.php
 *
 * @package Coverpla-2.0
 */
.catalog__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-h-lg);
  margin-bottom: var(--space-v-sm);
}

.catalog__card {
  container-type: inline-size;
}
.catalog__card a {
  aspect-ratio: 3/4;
  display: block;
  position: relative;
  text-decoration: none;
  border-radius: var(--borderRadius);
  border: 1px solid var(--neutralGreyShade3);
  box-shadow: var(--boxShadow-card);
  overflow: hidden;
  height: 100%;
  width: 100%;
  transition: transform 350ms ease-out, border-color 350ms ease-out, box-shadow 350ms ease-out;
}
.catalog__card a:hover {
  text-decoration: none;
  transform: scale(1.03);
  border-color: var(--secondaryColor);
  box-shadow: 4px 8px 20px rgba(0, 0, 0, 0.1215686275);
}
.catalog__card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: opacity 0.7s, transform 0.7s;
  backface-visibility: hidden;
}
.catalog__card:hover img {
  transform: scale3d(1.1, 1.1, 1);
}
.catalog__card .cardTitle {
  position: absolute;
  top: 15%;
  left: 0;
  right: 0;
  font-family: var(--fontPrimary);
  font-size: clamp(1.75rem, 9.5cqw, 3.5rem);
  font-weight: 400;
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-title);
  text-transform: uppercase;
  text-align: center;
  color: var(--primaryColor);
  margin: 0;
  padding: 0 var(--space-h-md);
  word-break: normal;
  overflow-wrap: normal;
}

.catalog__toolbar {
  display: grid;
  grid-template-columns: calc((200% - var(--space-h-lg)) / 3) minmax(min-content, 1fr);
  gap: var(--space-h-lg);
  align-items: center;
}
.catalog__toolbar .catalog__search .ywcas-input-field-wrapper {
  border-radius: 9999px !important;
}
.catalog__toolbar .catalog__search .lapilliUI-Input__field {
  height: var(--input-height) !important;
  padding: var(--input-padding-h) calc(var(--input-padding-h) * 2.5) !important;
}
.catalog__toolbar .catalog__cta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

@media (max-width: 1280px) {
  .catalog__toolbar {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 768px) {
  .catalog__grid {
    grid-template-columns: 1fr;
  }
  .catalog__toolbar {
    grid-template-columns: 1fr;
  }
  .catalog__toolbar .catalog__search {
    display: none;
  }
  .catalog__toolbar .catalog__cta {
    grid-column: 1/2;
    justify-content: flex-start;
  }
}
/* SECTION RÉALISATIONS — Homepage
///////////////////////////////////////////////////////////////*/
/* Approche --viewport-inline-padding : aligne le premier slide avec le bigTitle
   à toutes les largeurs, y compris > --hdscreen où .wrapper se centre automatiquement. */
.home_realisations .slider__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--space-bigtitle-mb);
}
.home_realisations .slider__header .bigTitle {
  margin-bottom: 0;
}

.home_realisations .slider__track-wrapper {
  width: 100%;
  margin-left: 0;
}

.home_realisations .slider__track {
  margin-left: 0;
  padding-left: var(--viewport-inline-padding);
  padding-inline-end: max(12px, var(--viewport-inline-padding));
  scroll-padding-left: var(--viewport-inline-padding);
}

.home_realisations .slider__slide .grid-item-inner {
  width: 100%;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--borderRadius);
  border: 1px solid var(--neutralGreyShade3);
  overflow: hidden;
  box-shadow: var(--boxShadow-card);
}
.home_realisations .slider__slide .grid-item-inner img {
  width: 100%;
  height: auto;
  max-height: 590px;
  display: block;
}

.home_realisations .realisations__cta-wrapper {
  display: flex;
  justify-content: center;
  margin-top: var(--space-v-md);
}

/* Clients
///////////////////////////////////////////////////////////////*/
.home_clients {
  display: flex;
  flex-direction: column;
  gap: var(--space-v-md);
  padding-top: 0;
}

.clients__titre {
  font-family: var(--fontPrimary_Light);
  font-size: var(--fs-block-title);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--primaryColor);
  text-align: center;
  width: 100%;
  margin: 0;
}

.clients-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: var(--space-h-lg);
  padding: 0;
  list-style: none;
  margin: 0;
  width: 100%;
}
.clients-list__item {
  display: flex;
  align-items: stretch;
  justify-content: center;
  aspect-ratio: 1;
  background-color: var(--neutralWhite);
  border: 1px solid var(--neutralGreyShade3);
  border-radius: var(--borderRadius);
  overflow: hidden;
  box-shadow: var(--boxShadow-card);
  transition: all 350ms ease-out;
}
.clients-list__item a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--card-padding-logo);
  text-decoration: none;
}
.clients-list__item:hover {
  box-shadow: 4px 8px 20px rgba(0, 0, 0, 0.1215686275);
  border-color: var(--secondaryColor);
  transform: scale(1.03);
  cursor: pointer;
}
.clients-list__item:hover .clients-list__logo {
  transform: scale3d(1.1, 1.1, 1);
}
.clients-list__logo {
  width: 100%;
  height: 100%;
  max-width: 262px;
  max-height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  display: block;
  transition: transform 0.7s;
  backface-visibility: hidden;
}
.clients-list__name {
  display: none;
}

/* Responsive
///////////////////////////////////////////////////////////////*/
@media (max-width: 1280px) {
  .clients-list {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-h-md);
  }
}
@media (max-width: 768px) {
  .clients-list {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-h-sm);
  }
  .clients-list__item {
    padding: var(--space-h-sm);
  }
}
@media (max-width: 568px) {
  .clients-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* =============================================================================
   Page Histoire — Coverpla-2.0
   ============================================================================= */
/* =============================================================================
   Section timeline — conteneur
   ============================================================================= */
/* =============================================================================
   En-tête de page
   ============================================================================= */
/* =============================================================================
   Section timeline — conteneur
   ============================================================================= */
/* =============================================================================
   Grille 3 colonnes : gauche | ligne | droite
   Chaque paire (entrée + segment) occupe une row explicite.
   Ordre DOM : entry, segment, entry, segment… (12 enfants, 6 rows)
   ============================================================================= */
.timeline__entries {
  display: grid;
  grid-template-columns: 1fr 7px 1fr;
  padding: 3.125rem 0;
  position: relative;
}
.timeline__entries > :nth-child(1),
.timeline__entries > :nth-child(2) {
  grid-row: 1;
}
.timeline__entries > :nth-child(3),
.timeline__entries > :nth-child(4) {
  grid-row: 2;
}
.timeline__entries > :nth-child(5),
.timeline__entries > :nth-child(6) {
  grid-row: 3;
}
.timeline__entries > :nth-child(7),
.timeline__entries > :nth-child(8) {
  grid-row: 4;
}
.timeline__entries > :nth-child(9),
.timeline__entries > :nth-child(10) {
  grid-row: 5;
}
.timeline__entries > :nth-child(11),
.timeline__entries > :nth-child(12) {
  grid-row: 6;
}

/* =============================================================================
   Segments de ligne verticale
   ============================================================================= */
.timeline__segment {
  grid-column: 2;
  align-self: stretch;
  width: 7px;
  position: relative;
  overflow: hidden;
  background-color: var(--neutralGreyShade3);
  /* Overlay doré animé au scroll */
}
.timeline__segment::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--secondaryColor);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.6s linear;
}
.timeline__segment.is-visible::after {
  transform: scaleY(1);
}
.timeline__segment.from-bottom::after {
  transform-origin: bottom center;
}
.timeline__segment--last {
  background-color: transparent;
}
.timeline__segment--last::after {
  background: linear-gradient(to bottom, var(--secondaryColor), rgba(255, 255, 255, 0));
}

/* =============================================================================
   Entrées timeline
   ============================================================================= */
.timeline__entry {
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.7s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
}
.timeline__entry--left {
  grid-column: 1;
  transform: translateX(-60px);
  padding-left: 12.5rem; /* indent depuis le bord gauche */
  padding-right: 3.125rem; /* gap entre la carte et la ligne */
  justify-content: flex-end;
}
.timeline__entry--right {
  grid-column: 3;
  transform: translateX(60px);
  padding-left: 3.125rem; /* gap entre la ligne et la carte */
  padding-right: 12.5rem; /* indent depuis le bord droit */
  justify-content: flex-start;
}
.timeline__entry.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* =============================================================================
   Dot connecteur (centré sur la ligne de 11px)
   ============================================================================= */
.timeline__dot {
  position: absolute;
  top: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--neutralWhite);
  border: 1px solid var(--neutralGreyShade3);
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 2px 4px 8px rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
  z-index: 1;
}
.timeline__entry--left .timeline__dot {
  right: -17.5px; /* (28px / 2) + (7px / 2) centré sur la barre de 7px */
}
.timeline__entry--right .timeline__dot {
  left: -17.5px;
}

/* =============================================================================
   Carte
   ============================================================================= */
.timeline__card {
  background: var(--neutralWhite);
  border: 1px solid var(--neutralGreyShade3);
  border-radius: var(--borderRadius);
  padding: 3.125rem;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 2px 4px 8px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
}
.timeline__entry--left .timeline__card {
  text-align: right;
}
.timeline__entry--right .timeline__card {
  text-align: left;
}

/* =============================================================================
   Année
   ============================================================================= */
.timeline__year {
  font-family: var(--fontPrimary_Bold);
  font-size: var(--fs-2xl);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-display);
  color: var(--primaryColor);
  margin: 0;
}

/* =============================================================================
   Texte
   ============================================================================= */
.timeline__text {
  font-family: var(--fontPrimary);
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  color: var(--primaryColor);
  margin: 0;
}
.timeline__text p {
  margin: 0;
}
.timeline__text p + p {
  margin-top: 0.75em;
}
.timeline__text strong {
  font-family: var(--fontPrimary_SemiBold);
  font-weight: normal;
}

/* =============================================================================
   Section histoire en photos
   ============================================================================= */
.histoire-photos {
  padding-top: var(--defaultPadding-v);
  padding-bottom: var(--defaultPadding-v);
}

/* Spécificité 0,3,0 — bat .slider--history-photos .slider__header (0,2,0) de slider.css.
   Le header a .wrapper (centering auto) → padding simple = var(--defaultPadding-h).
   Le track (pleine largeur) utilise --viewport-inline-padding qui intègre l'offset du wrapper. */
.histoire-photos.slider--history-photos .slider__header {
  padding: 0 var(--defaultPadding-h);
}

.histoire-photos.slider--history-photos .slider__track-wrapper {
  width: 100%;
  margin-left: 0;
}

.histoire-photos.slider--history-photos .slider__track {
  margin-left: 0;
  padding-left: var(--viewport-inline-padding);
  padding-inline-end: max(12px, var(--viewport-inline-padding));
  scroll-padding-left: var(--viewport-inline-padding);
  align-items: flex-start;
}

.histoire-photos .slider__slide,
.histoire-catalogues .slider__slide {
  flex: 0 0 auto;
}

@media screen and (max-width: 768px) {
  .histoire-photos .slider__slide,
  .histoire-catalogues .slider__slide {
    flex: 0 0 calc((100% - 0.1 * var(--slider-gap, 1.5rem)) / 1.1);
  }
}
@media screen and (max-width: 568px) {
  .histoire-photos .slider__slide,
  .histoire-catalogues .slider__slide {
    flex: 0 0 calc(100% - var(--slider-gap, 1.5rem));
  }
}
/* Image de chaque slide */
.histoire-photo {
  margin: 0;
}
.histoire-photo img {
  width: auto;
  max-width: 100%;
  height: auto;
  min-height: 250px;
  max-height: 590px;
  border-radius: var(--borderRadius);
  border: 1px solid var(--neutralGreyShade3);
  box-shadow: var(--boxShadow-card);
  display: block;
}
.histoire-photo figcaption {
  font-family: var(--fontPrimary);
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  color: var(--primaryColor);
  text-align: center;
  margin-top: var(--space-v-sm);
  padding: 0;
}

/* =============================================================================
   Section évolutions des catalogues
   ============================================================================= */
.histoire-catalogues {
  padding-top: var(--defaultPadding-v);
  padding-bottom: var(--defaultPadding-v);
}

/* Spécificité 0,3,0 — bat .slider--history-catalogs .slider__header (0,2,0) de slider.css.
   Même logique que histoire-photos : header avec .wrapper → var(--defaultPadding-h). */
.histoire-catalogues.slider--history-catalogs .slider__header {
  padding: 0 var(--defaultPadding-h);
}

.histoire-catalogues.slider--history-catalogs .slider__track-wrapper {
  width: 100%;
  margin-left: 0;
}

.histoire-catalogues.slider--history-catalogs .slider__track {
  margin-left: 0;
  padding-left: var(--viewport-inline-padding);
  padding-inline-end: max(12px, var(--viewport-inline-padding));
  scroll-padding-left: var(--viewport-inline-padding);
}

.catalogue-card {
  margin: 0;
  height: 100%;
}
.catalogue-card img {
  width: auto;
  max-width: 100%;
  height: auto;
  min-height: 350px;
  max-height: 590px;
  border-radius: var(--borderRadius);
  border: 1px solid var(--neutralGreyShade3);
  box-shadow: var(--boxShadow-card);
  display: block;
}
.catalogue-card figcaption {
  font-family: var(--fontPrimary);
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  color: var(--primaryColor);
  text-align: center;
  margin-top: var(--space-v-sm);
  padding: 0;
}

/* =============================================================================
   Responsive
   ============================================================================= */
@media (max-width: 1920px) {
  .timeline__entry--left {
    padding-left: 4rem;
  }
  .timeline__entry--right {
    padding-right: 4rem;
  }
}
@media (max-width: 1280px) {
  .timeline__entry--left {
    padding-left: 2rem;
  }
  .timeline__entry--right {
    padding-right: 2rem;
  }
}
@media (max-width: 1024px) {
  .timeline__entry--left {
    padding-left: 1rem;
  }
  .timeline__entry--right {
    padding-right: 1rem;
  }
  .timeline__card {
    padding: 2rem;
  }
  .timeline__year {
    font-size: 2.5rem;
  }
}
@media (max-width: 768px) {
  .timeline__entries {
    grid-template-columns: 7px 1fr;
  }
  .timeline__entry--left,
  .timeline__entry--right {
    grid-column: 2;
    padding-left: 2rem;
    padding-right: 1rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    transform: translateX(30px);
    justify-content: flex-start;
  }
  .timeline__entry--left .timeline__card,
  .timeline__entry--right .timeline__card {
    text-align: left;
  }
  .timeline__dot {
    left: -17.5px; /* (28px / 2) + (7px / 2) */
    right: auto;
    top: 1.5rem; /* aligne sur le début de la carte (= padding-top de l'entry) */
  }
  .timeline__segment {
    grid-column: 1;
  }
}
@media (max-width: 568px) {
  .timeline__entries {
    padding: 1.5rem 0;
  }
  .timeline__card {
    padding: 1.25rem;
  }
  .timeline__year {
    font-size: 2rem;
  }
  .timeline__text {
    font-size: 1rem;
  }
}
/* =============================================================
   Page Chiffres Clés
   Tokens extraits Figma node 505-11660 (base 2560px)
   ============================================================= */
:root {
  --chiffres-row-gap: var(--space-v-md);
  --chiffres-col-pad: var(--space-v-sm);
  --chiffres-wrap-pad-v: var(--section-padding-v);
  --chiffres-nombre-size: var(--fs-chiffres-cles-nombre);
}

/* ---- Section ---- */
/* ---- Grille ---- */
.chiffres-cles__grille {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: var(--chiffres-row-gap);
  column-gap: 0;
  background-color: var(--neutralWhite);
  border-radius: var(--borderRadius);
  padding: var(--chiffres-wrap-pad-v) var(--chiffres-col-pad);
}

/* ---- Item ---- */
.chiffres-cles__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(4px, 0.39vw, 10px);
  padding: 0 var(--chiffres-col-pad);
  border-right: 2px solid var(--neutralGreyShade3);
}
.chiffres-cles__item:nth-child(4n+1) {
  padding-left: 0;
}
.chiffres-cles__item:nth-child(4n), .chiffres-cles__item:last-child {
  border-right: none;
  padding-right: 0;
}
.chiffres-cles__item--empty {
  border-right: none;
  padding: 0;
}

/* ---- Typographie ---- */
.chiffres-cles__nombre {
  display: block;
  font-family: var(--fontPrimary_Bold);
  font-weight: normal;
  font-size: var(--chiffres-nombre-size);
  line-height: var(--leading-title);
  color: var(--primaryColor);
  letter-spacing: var(--tracking-display);
}

.chiffres-cles__unite {
  display: block;
  font-family: var(--fontPrimary_Bold);
  font-weight: normal;
  font-size: var(--fs-chiffres-cles-unite);
  line-height: 1.1;
  color: var(--primaryColor);
}

.chiffres-cles__desc {
  font-family: var(--fontPrimary);
  font-weight: normal;
  font-size: var(--fs-body-lg);
  line-height: 1.2;
  color: var(--primaryColor);
  margin: 0;
}

/* ---- Responsive ---- */
@media screen and (max-width: 1024px) {
  .chiffres-cles__grille {
    grid-template-columns: repeat(2, 1fr);
  }
  .chiffres-cles__item {
    border-right: 2px solid var(--neutralGreyShade3);
    padding: 0 var(--chiffres-col-pad);
  }
  .chiffres-cles__item:nth-child(4n+1) {
    padding-left: 0;
  }
  .chiffres-cles__item:nth-child(4n) {
    border-right: 2px solid var(--neutralGreyShade3);
    padding-right: var(--chiffres-col-pad);
  }
  .chiffres-cles__item:nth-child(2n) {
    border-right: none;
    padding-right: 0;
  }
  .chiffres-cles__item:nth-child(2n+1) {
    padding-left: 0;
  }
  .chiffres-cles__item:last-child {
    border-right: none;
    padding-right: 0;
  }
  .chiffres-cles__item--empty {
    display: none;
  }
}
@media screen and (max-width: 568px) {
  .chiffres-cles__grille {
    grid-template-columns: 1fr;
    padding: var(--chiffres-wrap-pad-v) 0;
  }
  .chiffres-cles__item {
    border-right: none;
    border-bottom: 4px solid var(--neutralGreyShade3);
    padding: clamp(20px, 4vw, 40px) 0;
  }
  .chiffres-cles__item:nth-child(4n+1), .chiffres-cles__item:nth-child(2n+1) {
    padding-left: 0;
  }
  .chiffres-cles__item:nth-child(4n), .chiffres-cles__item:nth-child(2n), .chiffres-cles__item:last-child {
    border-right: none;
    padding-right: 0;
  }
  .chiffres-cles__item:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
  .chiffres-cles__item--empty {
    display: none;
  }
}
/* =============================================================
   Page Savoir-faire
   ============================================================= */
/* ---- Section conteneur ---- */
.savoir-faire-sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-v-xl);
}

/* ---- Carte ---- */
.savoir-faire-carte {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-h-xl);
  align-items: center;
}
.savoir-faire-carte--texte-gauche .savoir-faire-carte__texte {
  text-align: right;
}
.savoir-faire-carte--texte-gauche .button {
  align-self: flex-end;
}
.savoir-faire-carte--image-gauche .savoir-faire-carte__texte {
  text-align: left;
}
.savoir-faire-carte--image-gauche .button {
  align-self: flex-start;
}

/* ---- Colonne texte ---- */
.savoir-faire-carte__texte {
  display: flex;
  flex-direction: column;
  gap: var(--space-v-md);
}

/* ---- Titre ---- */
.savoir-faire-carte__titre {
  font-family: var(--fontSecondary_SemiBold);
  font-weight: normal;
  font-size: var(--fs-section-title);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--primaryColor);
  margin: 0;
}

/* ---- Corps de texte ---- */
.savoir-faire-carte__desc {
  font-family: var(--fontPrimary);
  font-weight: normal;
  font-size: var(--fs-body-lg);
  line-height: var(--leading-title);
  color: var(--primaryColor);
  text-align: justify;
  margin: 0;
}
.savoir-faire-carte__desc strong {
  font-family: var(--fontPrimary_SemiBold);
  font-weight: normal;
}

/* ---- Image ---- */
.savoir-faire-carte__image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--borderRadius);
}

/* ---- Responsive ---- */
@media screen and (max-width: 1024px) {
  .savoir-faire-sections {
    gap: calc(var(--section-padding-v) * 1.5);
  }
  .savoir-faire-carte:not(:last-child) {
    border-bottom: 1px solid var(--neutralGreyShade3);
    padding-bottom: calc(var(--section-padding-v) * 1.5);
  }
  .savoir-faire-carte {
    grid-template-columns: 1fr;
    gap: var(--space-v-sm);
  }
  .savoir-faire-carte .button {
    width: 100%;
    justify-content: center;
  }
  .savoir-faire-carte--texte-gauche .savoir-faire-carte__texte {
    text-align: left;
  }
  .savoir-faire-carte--texte-gauche .savoir-faire-carte__image {
    order: -1;
  }
  .savoir-faire-carte--image-gauche .savoir-faire-carte__image {
    order: -1;
  }
}
@media screen and (max-width: 568px) {
  .savoir-faire-sections {
    padding: var(--section-padding-v) 0;
  }
}
/* =============================================================
   Page Engagement
   Tokens extraits Figma node 509-16592 (base 2560px)
   ============================================================= */
:root {
  --eng-titre-size: clamp(32px, 4.69vw, 90px);
  --eng-body-size: clamp(14px, 1.25vw, 24px);
  --eng-pilier-num: clamp(24px, 3.65vw, 70px);
  --eng-cercle-label: clamp(16px, 3.13vw, 60px);
  --eng-section-gap: clamp(40px, 5.2vw, 100px);
  --eng-card-pad: clamp(12px, 1.56vw, 20px);
  --eng-card-gap: clamp(6px, 0.52vw, 10px);
  --eng-dot-size: clamp(14px, 1.97vw, 38px);
}

/* ---- Conteneur principal ---- */
.engagement-sections {
  display: flex;
  flex-direction: column;
  gap: var(--eng-section-gap);
  margin-bottom: var(--section-padding-v);
}

/* ---- Bloc texte générique ---- */
.engagement-bloc {
  display: flex;
  flex-direction: column;
  gap: var(--space-v-md);
}

/* ---- Titre de section ---- */
.engagement-titre {
  font-family: var(--fontSecondary_SemiBold);
  font-weight: normal;
  font-size: var(--fs-section-title);
  line-height: var(--leading-display);
  color: var(--primaryColor);
  margin: 0;
}

/* ---- Corps de texte ---- */
.engagement-corps {
  font-family: var(--fontPrimary);
  font-weight: normal;
  font-size: var(--fs-body-lg);
  line-height: var(--leading-body);
  color: var(--primaryColor);
  text-align: justify;
  margin: 0;
}
.engagement-corps strong {
  font-family: var(--fontPrimary_SemiBold);
  font-weight: normal;
}
.engagement-corps a {
  color: var(--primaryColor);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.engagement-corps a:hover {
  opacity: 0.7;
}

/* ================================================================
   Section 5 piliers RSE
   Positionnement absolu proportionnel — ratio déduit du Figma
   (conteneur 1690px × 1560px @ 1920px viewport)
   ================================================================ */
.engagement-piliers-section {
  background-color: var(--neutralWhite);
  overflow: visible;
  padding-bottom: 12%;
}

.engagement-piliers {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  aspect-ratio: 1690/1580;
  overflow: visible;
  /* ---- Cercle central ---- */
}
.engagement-piliers .engagement-cercle {
  position: absolute;
  left: 20.5%;
  top: 20%;
  width: 59.2%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--neutralGrey);
  /* ---- Image de flacons : plus petite (882/1000 = 88.2%), centrée ---- */
}
.engagement-piliers .engagement-cercle__photo-wrap {
  position: absolute;
  width: 88.2%;
  aspect-ratio: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
}
.engagement-piliers .engagement-cercle__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.engagement-piliers .engagement-cercle {
  /* ---- Label "1 mission / 5 piliers" — centré sur l'image ---- */
}
.engagement-piliers .engagement-cercle__label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-family: var(--fontSecondary_SemiBold);
  font-size: var(--eng-cercle-label);
  line-height: 1;
  color: var(--primaryColor);
  white-space: nowrap;
  gap: 0.15em;
}
.engagement-piliers .engagement-cercle__num {
  font-family: var(--fontSecondary_Black);
}
.engagement-piliers {
  /* ---- Dots connecteurs ---- */
}
.engagement-piliers .engagement-dot {
  position: absolute;
  width: var(--eng-dot-size);
  height: var(--eng-dot-size);
  border-radius: 50%;
  background-color: var(--primaryColor);
  transform: translate(-50%, -50%);
  /*
   * Positions calculées mathématiquement :
   * centre cercle (846px, 816px), rayon 500px, container 1690×1580px
   * dot_x = centre_x + rayon × cos(angle_vers_carte)
   * dot_y = centre_y + rayon × sin(angle_vers_carte)
   */
}
.engagement-piliers .engagement-dot--01 {
  left: 50.7%;
  top: 20%;
}
.engagement-piliers .engagement-dot { /* angle −89° → carte 01 (haut) */ }
.engagement-piliers .engagement-dot--02 {
  left: 76.3%;
  top: 36.8%;
}
.engagement-piliers .engagement-dot { /* angle −28° → carte 02 (droite haute) */ }
.engagement-piliers .engagement-dot--03 {
  left: 68.8%;
  top: 76.2%;
}
.engagement-piliers .engagement-dot { /* angle +51° → carte 03 (droite basse) */ }
.engagement-piliers .engagement-dot--04 {
  left: 31.6%;
  top: 76.3%;
}
.engagement-piliers .engagement-dot { /* angle +129° → carte 04 (gauche basse) */ }
.engagement-piliers .engagement-dot--05 {
  left: 24%;
  top: 37%;
}
.engagement-piliers .engagement-dot { /* angle −152° → carte 05 (gauche haute) */ }
.engagement-piliers {
  /* ---- Cartes piliers ---- */
}
.engagement-piliers .engagement-pilier {
  position: absolute;
  z-index: 2;
  width: 17.7%;
  background-color: var(--neutralWhite);
  border: 1px solid var(--neutralGrey);
  border-radius: var(--borderRadius);
  padding: var(--eng-card-pad);
  display: flex;
  flex-direction: column;
  gap: var(--eng-card-gap);
  opacity: 0;
  transform: scale(0.4) translateY(30px);
  transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  /*
   * Positions :
   * card --01 utilise la propriété CSS `translate` (indépendante de `transform`)
   * pour gérer le décalage horizontal — évite le conflit avec l'animation scale.
   */
}
.engagement-piliers .engagement-pilier--01 {
  left: 50.7%;
  top: -3%;
  translate: -50% 0;
}
.engagement-piliers .engagement-pilier--02 {
  left: 82.3%;
  top: 28%;
}
.engagement-piliers .engagement-pilier--03 {
  left: 71%;
  top: 79%;
}
.engagement-piliers .engagement-pilier--04 {
  left: 11%;
  top: 79%;
}
.engagement-piliers .engagement-pilier--05 {
  left: 0%;
  top: 28%;
}
.engagement-piliers .engagement-pilier__num {
  display: block;
  font-family: var(--fontPrimary_Bold);
  font-size: var(--fs-2xl);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-display);
  color: var(--primaryColor);
  transform: scale(0.4);
  opacity: 0;
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
  transition-delay: calc(var(--i) * 0.18s + 0.15s);
}
.engagement-piliers .engagement-pilier__desc {
  font-family: var(--fontPrimary);
  font-weight: normal;
  font-size: var(--fs-body-sm);
  line-height: var(--leading-body);
  color: var(--primaryColor);
  margin: 0;
}
.engagement-piliers .engagement-pilier__desc strong {
  font-family: var(--fontPrimary_SemiBold);
  font-weight: normal;
}
.engagement-piliers {
  /* ---- Déclenchement animation par IntersectionObserver ---- */
}
.engagement-piliers .engagement-pilier.is-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}
.engagement-piliers .engagement-pilier.is-visible .engagement-pilier__num {
  transform: scale(1);
  opacity: 1;
}

/* ---- Éco-conception ---- */
.engagement-eco__grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 3.91vw, 100px);
  align-items: start;
}

.engagement-eco__image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--borderRadius);
}
.engagement-eco__image--placeholder {
  aspect-ratio: 935/629;
  background-color: var(--neutralGreyShade4);
  border-radius: var(--borderRadius);
  border: 2px dashed var(--neutralGrey);
}

.engagement-eco__texte {
  display: flex;
  flex-direction: column;
  gap: var(--space-v-md);
}
.engagement-eco__texte .button {
  align-self: flex-start;
}

/* ---- Prefers-reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
  .engagement-pilier {
    transition: none !important;
  }
}
/* ================================================================
   Responsive
   ================================================================ */
@media screen and (max-width: 1280px) {
  .engagement-pilier.is-visible {
    transform: scale(0.85) translateY(0);
  }
}
@media screen and (max-width: 1024px) {
  .engagement-sections {
    gap: calc(var(--section-padding-v) * 1.5);
  }
  .engagement-sections > *:not(:last-child) {
    border-bottom: 1px solid var(--neutralGreyShade3);
    padding-bottom: calc(var(--section-padding-v) * 1.5);
  }
  /* Section piliers : layout linéaire (cercle + liste cartes) */
  .engagement-piliers {
    aspect-ratio: auto;
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(20px, 3vw, 40px);
    padding: clamp(20px, 3.9vw, 60px) clamp(16px, 2vw, 40px);
  }
  .engagement-piliers .engagement-cercle {
    /* position: relative conserve le contexte de positionnement
       pour les enfants absolus (photo-wrap, label) */
    position: relative;
    left: auto;
    top: auto;
    width: clamp(200px, 50vw, 380px);
    flex-shrink: 0;
  }
  .engagement-piliers .engagement-pilier {
    position: static;
    width: 100%;
    translate: none;
    opacity: 1;
    transform: none !important;
    transition: none;
  }
  .engagement-piliers .engagement-pilier__num {
    transform: scale(1);
    opacity: 1;
    transition: none;
  }
  .engagement-piliers .engagement-dot {
    display: none;
  }
  .engagement-eco__grille {
    grid-template-columns: 1fr;
  }
  .engagement-eco__texte .button {
    width: 100%;
    justify-content: center;
  }
}
@media screen and (max-width: 568px) {
  .engagement-piliers .engagement-cercle {
    width: clamp(160px, 70vw, 260px);
  }
}
/* ================================================================
   Section logos
   ================================================================ */
.engagement_logos {
  padding: var(--section-padding-v) var(--section-padding-h);
  background-color: var(--neutralGreyShade4);
  border-radius: var(--borderRadius);
}
.engagement_logos .logos-titre {
  margin-bottom: var(--space-v-md);
  padding: 0;
  font-family: var(--fontSecondary_SemiBold);
  font-size: var(--fs-2xl);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  font-weight: normal;
  color: var(--primaryColor);
}

.engagement_logos .grid-masonnery {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: clamp(12px, 1.5vw, 24px);
}
.engagement_logos .grid-masonnery .grid-sizer {
  display: none;
}
.engagement_logos .grid-masonnery .grid-item {
  flex: 0 0 clamp(100px, 8vw, 150px);
}
.engagement_logos .grid-masonnery .grid-item-inner {
  border-radius: var(--borderRadius);
  display: flex;
  align-items: center;
  justify-content: center;
}
.engagement_logos .grid-masonnery .grid-item-inner img {
  display: block;
  width: 100%;
  height: auto;
}
@media screen and (max-width: 1024px) {
  .engagement_logos .grid-masonnery .grid-item {
    width: calc(25% - clamp(12px, 1.5vw, 24px));
  }
}
@media screen and (max-width: 568px) {
  .engagement_logos .grid-masonnery .grid-item {
    width: calc(33.333% - clamp(12px, 1.5vw, 24px));
  }
}

/* 
┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│	CONFIGURATEUR - MIX&MATCH
└────────────────────────────────────────────────────────────────────────────────────────────────────────┘
*/
/* Masquer le titre */
.creez-votre-flacon .entry-header,
.create-your-bottle .entry-header,
.crea-il-tuo-flacone .entry-header {
  display: none;
}

.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;
}

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

body.page-creez-votre-flacon #page.site,
body.page-create-your-bottle #page.site,
body.page-crea-il-tuo-flacone #page.site {
  overflow-x: clip !important;
}

/* Blocs de filtres 
=================================================================================================================================     
*/
#container-flacons,
#container-pompes,
#container-capots {
  border: 1px solid var(--neutralGreyShade2);
  border-radius: 5px;
  margin: 20px 0;
  padding: 20px;
  background: var(--neutralGreyShade4);
  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(--neutralGreyShade3);
  overflow: auto;
  background-color: var(--canvasColor);
  position: relative;
  border-radius: var(--borderRadius);
}

#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(--neutralGrey);
}

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

.filter-count {
  display: none;
}

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

/* ---- .element-item liens imagettes ---- */
.creez-votre-flacon .element-item,
.create-your-bottle .element-item,
.crea-il-tuo-flacone .element-item {
  background: var(--canvasColor) none repeat scroll 0 0;
  color: var(--secondaryColor);
  float: left;
  height: 110px;
  margin: 10px 10px 5px;
  padding: 0 0 16px;
  text-align: center;
  width: 90px;
  border-radius: 4px;
  border: 2px solid var(--neutralGreyShade3);
  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,
.crea-il-tuo-flacone .element-item:before {
  /*transition: all 0.4s ease; 
    opacity: 0.5;
  font-family: 'Font Awesome 5 Free regular';		
  color:var(--neutralGreyShade2);
  content: "\f0c8";
  position:absolute;
  top:-4px;
  right:3px;
  font-size:18px;  */
}

.creez-votre-flacon .element-item:hover,
.create-your-bottle .element-item:hover,
.crea-il-tuo-flacone .element-item:hover {
  border: 2px solid var(--primaryColor);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

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

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

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

/* etat cliqué */
.creez-votre-flacon .element-item.is-clicked,
.create-your-bottle .element-item.is-clicked,
.crea-il-tuo-flacone .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,
.crea-il-tuo-flacone .element-item.is-clicked:before {
  /* anciennes cases à cocher*/
  /*color: var(--secondaryColor);
    opacity: 1;
  font-family: 'Font Awesome 5 Free';
  content: "\f14a";
  position:absolute;
  top:-4px;
  right:3px;
  font-size: 18px;*/
  color: var(--secondaryColor);
  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,
.crea-il-tuo-flacone .element-item.is-clicked:hover {
  border: 2px solid var(--primaryColor);
}

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

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

.creez-votre-flacon .element-item A > SPAN,
.create-your-bottle .element-item A > SPAN,
.crea-il-tuo-flacone .element-item A > SPAN {
  background-color: var(--neutralGreyShade4);
  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,
.crea-il-tuo-flacone .element-item.is-clicked A > SPAN {
  background-color: var(--primaryColor);
  color: var(--neutralWhite);
}

.creez-votre-flacon .element-item P,
.create-your-bottle .element-item P,
.crea-il-tuo-flacone .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;
}

/* bouton "add to quote"
=================================================================================================================================     
*/
#secondary-configurator .addToQuoteButtonWrapper {
  overflow: hidden;
  position: absolute;
  bottom: 40px;
  left: 40px;
  width: 320px;
  border-radius: 9999px;
  -webkit-border-radius: 9999px;
  -moz-border-radius: 9999px;
  -ms-border-radius: 9999px;
  -o-border-radius: 9999px;
  z-index: 850;
  transition-property: width;
  transition-duration: 0.6s;
  left: 0 !important;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}
#secondary-configurator .addToQuoteButtonWrapper A#addToQuoteButton {
  width: 320px;
  position: relative;
  margin: auto;
  z-index: 850;
  border-radius: 9999px;
  -webkit-border-radius: 9999px;
  -moz-border-radius: 9999px;
  -ms-border-radius: 9999px;
  -o-border-radius: 9999px;
}
#secondary-configurator .addToQuoteButtonWrapper A#addToQuoteButton .button__icon {
  flex-shrink: 0;
}

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

/* ---- Classe pour masquer le bouton ---- */
#secondary-configurator .addToQuoteButtonWrapper A#addToQuoteButton.hidden {
  display: none !important;
}

/*
#secondary-configurator .addToQuoteButtonWrapper.hover {

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

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

/* 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(--secondaryColor);
  }
  to {
    box-shadow: 0 0 0 8px transparent, 0 0 0 8px transparent;
  }
}
.filter-count-container {
  margin-bottom: 8px;
  font-size: 13px;
  text-align: right;
  color: var(--foregroundColor);
}

#primary-configurator H2 {
  font-family: var(--fontPrimary_SemiBold);
  font-size: var(--fs-block-title);
  line-height: var(--leading-display);
  font-weight: lighter;
  display: block;
  margin-bottom: 1.2rem;
  text-align: left;
  letter-spacing: var(--tracking-display);
  word-spacing: var(--tracking-display);
}

/* boutons filtres Isotope — système .button--small .button--outline
=================================================================================================================================
*/
#primary-configurator #filterWrapper .button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

#primary-configurator #filterWrapper .button.button--small,
#primary-configurator #filterWrapper .button.button--tiny {
  margin: 0;
  border: 1px solid var(--neutralGreyShade2);
  position: relative;
  font-size: 0.75rem !important;
  padding: 4px 10px !important;
}
#primary-configurator #filterWrapper .button.button--small:hover,
#primary-configurator #filterWrapper .button.button--tiny:hover {
  border-color: var(--secondaryColor);
}
#primary-configurator #filterWrapper .button.button--small:active, #primary-configurator #filterWrapper .button.button--small.is-checked, #primary-configurator #filterWrapper .button.button--small.button--outline.is-checked,
#primary-configurator #filterWrapper .button.button--tiny:active,
#primary-configurator #filterWrapper .button.button--tiny.is-checked,
#primary-configurator #filterWrapper .button.button--tiny.button--outline.is-checked {
  background-color: var(--primaryColor) !important;
  border-color: var(--primaryColor) !important;
  color: var(--neutralWhite) !important;
}
#primary-configurator #filterWrapper .button.button--small:active::before, #primary-configurator #filterWrapper .button.button--small.is-checked::before,
#primary-configurator #filterWrapper .button.button--tiny:active::before,
#primary-configurator #filterWrapper .button.button--tiny.is-checked::before {
  background-color: var(--secondaryColor);
  background-image: url("assets/images/icons/check.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 60%;
  border-radius: 100%;
  content: "";
  height: 15px;
  width: 15px;
  position: absolute;
  right: -5px;
  top: -5px;
}

/* Gestion couleurs filtres Configurateur — swatches YITH WCCL
  =================================================================================================================================
*/
#primary-configurator #filterWrapper .button-group[data-filter-group=couleur] .button:not([data-filter=""]) {
  width: 56px;
  height: 22px;
  border: 1px solid var(--neutralGreyShade2);
  padding: 0 !important;
  position: relative;
}
#primary-configurator #filterWrapper .button-group[data-filter-group=couleur] .button:not([data-filter=""]) img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  border-radius: inherit;
}
#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: 2px solid var(--secondaryColor);
}
#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 {
  background-color: var(--secondaryColor);
  background-image: url("assets/images/icons/check.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 60%;
  border-radius: 100%;
  content: "";
  height: 15px;
  width: 15px;
  position: absolute;
  right: -8px;
  top: -8px;
  z-index: 2;
}

/* 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;
  width: max-content;
  max-width: 160px;
  left: 50%;
  transform: translateX(-50%) translateY(-20%);
  z-index: 99;
  pointer-events: none;
  top: 100%;
  padding-top: 6px;
  opacity: 0;
  text-indent: 0;
}
#primary-configurator #filterWrapper .button-group[data-filter-group=couleur] .button .tooltip-color > span {
  background: var(--primaryColor);
  color: var(--neutralWhite);
  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: translateX(-50%) 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,
.crea-il-tuo-flacone .woocommerce-info,
.crea-il-tuo-flacone .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(--secondaryColor);
  -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(--neutralGrey);
  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;
}

.addToQuoteButtonWrapper.loading #addToQuoteButton .button__icon .material-symbols-rounded {
  animation: spin 1s linear infinite;
  display: inline-block;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.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(--secondaryColor);
  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);
}

#servicesBloc {
  display: none;
  position: relative;
  min-height: 760px;
}
#servicesBloc .button-area {
  padding: 50px 20px;
}
#servicesBloc button.quoteLink {
  animation: shake_quotelink 5s ease-in-out infinite;
}
#servicesBloc button.quoteLink:hover {
  animation: none;
}
@keyframes shake_quotelink {
  0%, 75%, 100% {
    transform: translateX(0) rotate(0deg);
  }
  77% {
    transform: translateX(-5px) rotate(-2deg);
  }
  79% {
    transform: translateX(5px) rotate(2deg);
  }
  81% {
    transform: translateX(-4px) rotate(-1deg);
  }
  83% {
    transform: translateX(4px) rotate(1deg);
  }
  85% {
    transform: translateX(0) rotate(0deg);
  }
}
/* 
=================================================================================================================================     
Affichage services de parachèvement
=================================================================================================================================     
*/
#servicesBloc .button-area {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-v-sm);
  border: 1px solid var(--neutralGreyShade3);
  border-radius: var(--borderRadius);
  margin-bottom: var(--space-v-sm);
  padding: var(--card-padding);
  background: var(--neutralGreyShade4);
  transition: all 350ms ease-out 0s;
  box-shadow: var(--boxShadow-card);
  text-align: center;
  font-size: var(--fs-sm);
  font-family: var(--fontPrimary_Medium);
}
#servicesBloc .button-area .button-area__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-xs);
}
#servicesBloc .button-area .button-area__actions .button {
  box-sizing: border-box !important;
  line-height: var(--btn-line-height) !important;
}
#servicesBloc .button-area p {
  text-align: center;
  font-size: var(--fs-body-lg);
  line-height: 1.2;
}

#servicesBloc .servicesList h1 {
  margin-bottom: var(--space-v-sm);
  padding: 0;
  font-family: var(--fontSecondary_SemiBold);
  font-size: var(--fs-2xl);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  font-weight: normal;
  color: var(--primaryColor);
}

#servicesBloc .servicesList .gridServices {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-v-sm);
  margin-top: var(--section-padding-v);
}
#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: var(--space-xs);
  font-size: var(--fs-sm);
  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
└────────────────────────────────────────────────────────────────────────────────────────────────────────┘
*/
/* 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;
    min-width: 0;
  }
  .visu-textinfo {
    color: var(--neutralGrey);
    left: 0;
  }
  #secondary-configurator .visu {
    position: relative;
    width: min(400px, 100%);
    aspect-ratio: 502/760;
    height: auto;
    margin-inline: auto;
  }
  #secondary-configurator .visu-capots,
  #secondary-configurator .visu-pompes,
  #secondary-configurator .visu-flacons {
    width: 100%;
    height: auto;
  }
  #secondary-configurator .visu-capots img,
  #secondary-configurator .visu-pompes img,
  #secondary-configurator .visu-flacons img {
    width: 100%;
    height: auto;
  }
  #secondary-configurator .visu-capots {
    top: 0;
  }
  #secondary-configurator .visu-pompes {
    top: 8.553%;
  }
  #secondary-configurator .visu-flacons {
    top: 15.263%;
  }
  #secondary-configurator .addToQuoteButtonWrapper {
    max-width: 100%;
  }
  #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: var(--primaryColor);
  color: var(--neutralWhite);
  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 var(--neutralGreyShade3);
  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 : 2.0
date : 09/06/2026
*/
/*
┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│	PAGE DETAIL SERVICES
└────────────────────────────────────────────────────────────────────────────────────────────────────────┘
*/
/* SECTION  service_header
///////////////////////////////////////////////////////////////*/
body:has(.service_header) .site-content {
  padding-top: 0;
  padding-bottom: 0;
}

.service_header {
  padding: 0;
  text-align: left;
  border-radius: 0 0 var(--borderRadius) var(--borderRadius);
  overflow: hidden;
}

.service_header > .grid {
  display: grid;
  grid-gap: 0;
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: var(--section-padding-v);
}

.service_header .col_left {
  border-radius: 0 0 0 var(--borderRadius);
  overflow: hidden;
}

.service_header .col_left img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service_header .col_right {
  background: var(--neutralGreyShade4);
  padding: var(--section-padding);
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  border-radius: 0 0 var(--borderRadius) 0;
}

.service_header .introTextService {
  font-family: var(--fontPrimary);
  font-size: clamp(1rem, 2.5cqi, var(--fs-card-intro));
  line-height: var(--leading-title);
  color: var(--primaryColor);
  text-align: left;
}

.service_header .introTextService + UL {
  font-size: var(--fs-lg);
  line-height: var(--leading-body);
  text-align: left;
  list-style-type: symbols;
  margin-left: 1.625rem;
}

.service_header .introTextService + UL LI {
  font-size: var(--fs-md);
  line-height: var(--leading-body);
  text-align: left;
  padding-bottom: 1rem;
}

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

.service_header .helpContainer {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: var(--space-xs);
  border: 1px solid var(--neutralGreyShade3);
  background-color: var(--cardBackground);
  border-radius: 3.125rem;
  box-shadow: var(--boxShadow-card);
  padding: 5px;
  width: 100%;
  max-width: 470px;
  margin: var(--space-v-md) 0;
  container-type: inline-size;
}

.service_header .helpContainer .fas {
  grid-column: 1;
  grid-row: 1/3;
  font-size: clamp(2rem, 18cqi, 6.25rem);
}

.service_header .helpContainer .helpContainer__icon {
  grid-column: 1;
  grid-row: 1/3;
  font-size: var(--fs-icon-help); /* clamp(3.5rem, 5.5vw, 5.25rem) — 56px → 84px */
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 48;
  color: var(--primaryColor);
  flex-shrink: 0;
  line-height: 1;
}

.service_header .helpContainer p {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-size: clamp(0.75rem, 4cqi, var(--fs-sm));
  font-family: var(--fontPrimary_SemiBold);
  line-height: 1.1;
}

.service_header .helpContainer a {
  grid-column: 2;
  grid-row: 2;
  font-size: clamp(0.625rem, 3.5cqi, var(--fs-xs));
  color: var(--primaryColor);
  line-height: 1;
}

/* social links — order: 10 pour placer après le contenu malgré l'ordre DOM
   (rs-partage.php est le 1er enfant de col_right mais doit apparaître en dernier) */
.service_header .essb_links {
  order: 10;
  margin-top: auto;
}

section.service_main {
  padding: var(--section-padding-v) 0;
}

.service_main .title {
  font-family: unset;
  font-size: var(--fs-xl); /* 32px → 48px — cran au-dessus de --fs-lg */
  display: unset;
  line-height: unset;
  letter-spacing: unset;
}

/* 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: var(--space-v-md) 0;
  position: relative;
  display: inline-block;
  font-size: var(--fs-lg-sm); /* 26px → 30px — proche de l'ancien 1.875rem fixe */
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-title);
}

.service_process .titleLaqInt .serviceTitle:after {
  position: absolute;
  content: "";
  height: 1px;
  background-color: var(--neutralGreyShade1);
  width: 100%;
  bottom: calc(-1 * var(--space-v-md));
  left: 0;
}

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

.service_process .visuLaqInt,
.service_process .visuLaqExt {
  position: relative;
  padding-top: var(--space-v-lg);
}

/* 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(--neutralGreyShade2);
  background-color: var(--canvasColor);
  border-radius: var(--borderRadius);
  border-top-right-radius: 0;
}

.service_process_options .title {
  text-align: left;
  margin-bottom: var(--space-v-xl);
}

.service_process_options .serviceTitle {
  font-size: var(--fs-md); /* 20px → 22px — palier sous --fs-lg (26px → 36px) */
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-title);
  margin: var(--space-v-lg) 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: var(--space-v-xl) auto;
  position: relative;
  display: inline-block;
  width: calc(100% - 10rem);
}

.service_process_options .headerGrid .title:after {
  position: absolute;
  content: "";
  height: 1px;
  background-color: var(--neutralGreyShade1);
  width: 100%;
  bottom: calc(-1 * var(--space-v-md));
  left: 0;
}

/* SECTION  service_faq
///////////////////////////////////////////////////////////////*/
.service_faq {
  background: var(--neutralGreyShade4);
  padding: var(--faq-padding);
  margin: 0 auto;
  border-radius: var(--borderRadius);
  max-width: 75%;
}

.service_faq .title {
  text-align: center;
  padding: var(--section-padding-v) 0;
  font-family: var(--fontSecondary_SemiBold);
  font-size: var(--fs-2xl);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-title);
  display: block;
}

.service_faq .grid.faq_list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-h-lg);
  row-gap: var(--space-v-sm);
  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: var(--fs-md);
}

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

/* SECTION  Réalisations
///////////////////////////////////////////////////////////////*/
.service_realisations {
  padding: var(--section-padding-v) 0;
}

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

.service_associated .cardTitle {
  font-size: var(--fs-md);
  margin: var(--space-v-sm) var(--space-h-md);
  position: relative;
  z-index: 1;
}

.service_associated > .grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: var(--space-v-sm);
}

.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;
  display: block;
  width: 100%;
  overflow: hidden;
}

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

/*
┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│	RWD PAGE DETAIL SERVICES
└────────────────────────────────────────────────────────────────────────────────────────────────────────┘
*/
@media (max-width: 768px) {
  .service_header .grid {
    grid-template-columns: 1fr;
  }
  .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);
  }
}
@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);
  }
}
@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);
  }
}
@media screen and (min-width: 1024px) and (max-width: 1280px) {
  .service_associated .grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media (max-width: 1280px) {
  .service_faq {
    max-width: 100%;
  }
}
@media (max-width: 768px) {
  .service_header .grid {
    grid-template-columns: 1fr;
  }
  .service_header .col_left {
    border-radius: 0;
  }
  .service_header .col_right {
    border-radius: 0 0 var(--borderRadius) var(--borderRadius);
  }
}
/* 
version : 1.0
date : 09/11/2023
*/
/* 
┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│	PAGE REALISATIONS
└────────────────────────────────────────────────────────────────────────────────────────────────────────┘
*/
.page-nos-realisations,
.page-our-accomplishments,
.page-le-nostre-realizzazioni {
  background: var(--backgroundColor);
}

.grid-masonnery {
  position: relative;
}

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

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

.grid-masonnery .grid-item--width2 {
  width: 50%;
}

@media screen and (max-width: 768px) {
  .grid-masonnery .grid-sizer,
  .grid-masonnery .grid-item {
    width: 50%;
  }
  .grid-masonnery .grid-item--width2 {
    width: 100%;
  }
}
.grid-masonnery .grid-item {
  float: left;
}

.grid-masonnery .grid-item img {
  display: block;
  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: var(--borderRadius);
}

.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
///////////////////////////////////////////////////////////////*/
.page-nos-realisations .filters-button-group,
.page-our-accomplishments .filters-button-group,
.page-le-nostre-realizzazioni .filters-button-group {
  background: var(--neutralGreyShade4);
  padding: 0.75rem 1.5625rem;
  text-align: left;
  border-radius: 0;
  margin-bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.page-nos-realisations .filters-button-group > span,
.page-our-accomplishments .filters-button-group > span,
.page-le-nostre-realizzazioni .filters-button-group > span {
  font-family: var(--fontPrimary_SemiBold);
  font-weight: normal;
}

.page-nos-realisations .filters-button-group:first-child,
.page-our-accomplishments .filters-button-group:first-child,
.page-le-nostre-realizzazioni .filters-button-group:first-child {
  border-radius: var(--borderRadius) var(--borderRadius) 0 0;
  padding-bottom: 0.25rem;
}

.page-nos-realisations .filters-button-group + .filters-button-group,
.page-our-accomplishments .filters-button-group + .filters-button-group,
.page-le-nostre-realizzazioni .filters-button-group + .filters-button-group {
  border-radius: 0 0 var(--borderRadius) var(--borderRadius);
  padding-top: 0.25rem;
  margin-bottom: 1rem;
}

/* button — small buttons with filter states
///////////////////////////////////////////////////////////////*/
.page-nos-realisations .filters-button-group .button.button--small,
.page-nos-realisations .filters-button-group .button.button--tiny,
.page-our-accomplishments .filters-button-group .button.button--small,
.page-our-accomplishments .filters-button-group .button.button--tiny,
.page-le-nostre-realizzazioni .filters-button-group .button.button--small,
.page-le-nostre-realizzazioni .filters-button-group .button.button--tiny {
  margin: 0;
  border: 1px solid var(--neutralGreyShade3);
  position: relative;
  font-size: 0.75rem !important;
  padding: 4px 10px !important;
}
.page-nos-realisations .filters-button-group .button.button--small:hover,
.page-nos-realisations .filters-button-group .button.button--tiny:hover,
.page-our-accomplishments .filters-button-group .button.button--small:hover,
.page-our-accomplishments .filters-button-group .button.button--tiny:hover,
.page-le-nostre-realizzazioni .filters-button-group .button.button--small:hover,
.page-le-nostre-realizzazioni .filters-button-group .button.button--tiny:hover {
  border-color: var(--secondaryColor);
}
.page-nos-realisations .filters-button-group .button.button--small:active, .page-nos-realisations .filters-button-group .button.button--small.is-checked, .page-nos-realisations .filters-button-group .button.button--small.button--outline.is-checked,
.page-nos-realisations .filters-button-group .button.button--tiny:active,
.page-nos-realisations .filters-button-group .button.button--tiny.is-checked,
.page-nos-realisations .filters-button-group .button.button--tiny.button--outline.is-checked,
.page-our-accomplishments .filters-button-group .button.button--small:active,
.page-our-accomplishments .filters-button-group .button.button--small.is-checked,
.page-our-accomplishments .filters-button-group .button.button--small.button--outline.is-checked,
.page-our-accomplishments .filters-button-group .button.button--tiny:active,
.page-our-accomplishments .filters-button-group .button.button--tiny.is-checked,
.page-our-accomplishments .filters-button-group .button.button--tiny.button--outline.is-checked,
.page-le-nostre-realizzazioni .filters-button-group .button.button--small:active,
.page-le-nostre-realizzazioni .filters-button-group .button.button--small.is-checked,
.page-le-nostre-realizzazioni .filters-button-group .button.button--small.button--outline.is-checked,
.page-le-nostre-realizzazioni .filters-button-group .button.button--tiny:active,
.page-le-nostre-realizzazioni .filters-button-group .button.button--tiny.is-checked,
.page-le-nostre-realizzazioni .filters-button-group .button.button--tiny.button--outline.is-checked {
  background-color: var(--primaryColor) !important;
  border-color: var(--primaryColor) !important;
  color: var(--neutralWhite) !important;
}
.page-nos-realisations .filters-button-group .button.button--small:active::before, .page-nos-realisations .filters-button-group .button.button--small.is-checked::before,
.page-nos-realisations .filters-button-group .button.button--tiny:active::before,
.page-nos-realisations .filters-button-group .button.button--tiny.is-checked::before,
.page-our-accomplishments .filters-button-group .button.button--small:active::before,
.page-our-accomplishments .filters-button-group .button.button--small.is-checked::before,
.page-our-accomplishments .filters-button-group .button.button--tiny:active::before,
.page-our-accomplishments .filters-button-group .button.button--tiny.is-checked::before,
.page-le-nostre-realizzazioni .filters-button-group .button.button--small:active::before,
.page-le-nostre-realizzazioni .filters-button-group .button.button--small.is-checked::before,
.page-le-nostre-realizzazioni .filters-button-group .button.button--tiny:active::before,
.page-le-nostre-realizzazioni .filters-button-group .button.button--tiny.is-checked::before {
  background-color: var(--secondaryColor);
  background-image: url("assets/images/icons/check.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 60%;
  border-radius: 100%;
  content: "";
  height: 15px;
  width: 15px;
  position: absolute;
  right: -5px;
  top: -5px;
}

/*
┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│	SINGLE REALISATION
└────────────────────────────────────────────────────────────────────────────────────────────────────────┘
*/
.realisation-single {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--section-padding-v);
}
.realisation-single__back {
  align-self: flex-start;
}
.realisation-single__media {
  margin: 0;
  width: 100%;
  max-width: 1100px;
  display: flex;
  justify-content: center;
  border: 1px solid var(--neutralGreyShade3);
  border-radius: var(--borderRadius);
  overflow: hidden;
  background: var(--neutralWhite);
}
.realisation-single__img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: contain;
}
.realisation-single__head {
  width: 100%;
  max-width: 1100px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.realisation-single__title {
  margin: 0;
}
.realisation-single__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1.5rem;
}
.realisation-single__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.9rem;
  border-radius: var(--borderRadiusInputs);
  background: var(--secondaryColor);
  color: var(--neutralWhite);
  font-family: var(--fontPrimary_SemiBold);
  font-size: 0.8125rem;
  line-height: 1.2;
}
.realisation-single__client {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.realisation-single__client-label {
  font-family: var(--fontPrimary_SemiBold);
}
.realisation-single__client-label::after {
  content: " :";
}
.realisation-single__client-logo {
  max-height: 40px;
  width: auto;
}

/* 
┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│	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 {
  padding: var(--defaultPadding);
}

/* Pagination
///////////////////////////////////////////////////////////////*/
.archive .woocommerce-pagination .page-numbers li .page-numbers.current {
  background-color: var(--secondaryColor);
  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(--neutralGreyShade2);
  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(--secondaryColor);
  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(--secondaryColor);
  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(--accentGreen);
}

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

/* 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(--secondaryColor);
  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;
}

.archive div[data-taxonomy=product_cat] .filter-item.filter-has-3-column.with-image {
  padding: 0 !important;
}
.archive div[data-taxonomy=product_cat] .filter-item.filter-has-3-column.with-image > a {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 4px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: center !important;
  min-height: 10rem !important;
  padding: 0 0.25rem 0.625rem !important;
  transition: border-color 350ms ease-out;
}
.archive div[data-taxonomy=product_cat] .filter-item.filter-has-3-column.with-image > a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.95) 15%, transparent 51%);
  pointer-events: none;
  z-index: 0;
}
.archive div[data-taxonomy=product_cat] .filter-item.filter-has-3-column.with-image > a:hover {
  border-color: var(--secondaryColor) !important;
}
.archive div[data-taxonomy=product_cat] .filter-item.filter-has-3-column.with-image .term-image {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: none !important;
}
.archive div[data-taxonomy=product_cat] .filter-item.filter-has-3-column.with-image .term-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
  border-radius: 0 !important;
  transition: transform 0.7s ease-out;
  backface-visibility: hidden;
}
.archive div[data-taxonomy=product_cat] .filter-item.filter-has-3-column.with-image:hover .term-image img {
  transform: scale3d(1.1, 1.1, 1);
}
.archive div[data-taxonomy=product_cat] .filter-item.filter-has-3-column.with-image .term-label {
  position: relative;
  z-index: 1;
  font-family: var(--fontPrimary) !important;
  text-transform: none !important;
  letter-spacing: var(--tracking-title);
  text-align: center;
  color: var(--primaryColor);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
  width: 100%;
}

/* 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;
}

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

/* 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.active.with-image,
.yith-wcan-filters .yith-wcan-filter .filter-items .filter-item.label:not(.disabled):hover {
  box-shadow: 0 0 0 2px var(--foregroundColor) !important;
  color: var(--foregroundColor) !important;
}

.yith-wcan-filters .yith-wcan-filter .filter-items .filter-item > a:hover,
.yith-wcan-filters .yith-wcan-filter .filter-items .filter-item > label > a:hover {
  color: var(--secondaryColor) !important;
  opacity: 1 !important;
}

.yith-wcan-filters .yith-wcan-filter .yith-wcan-tooltip {
  background-color: #000 !important;
  color: #fff !important;
  opacity: 1 !important;
  z-index: 9999;
}

.yith-wcan-filters .yith-wcan-filter .yith-wcan-tooltip:before {
  border-right-color: var(--foregroundColor);
}

.yith-wcan-filters .yith-wcan-filter .filter-color .with-tooltip .yith-wcan-tooltip:before,
.yith-wcan-filters .yith-wcan-filter .filter-label .with-tooltip .yith-wcan-tooltip:before {
  border-top-color: var(--foregroundColor);
  border-right-color: transparent;
  border-left-color: transparent;
}

.yith-wcan-filters .yith-wcan-filter .filter-items .filter-item.active > a,
.yith-wcan-filters .yith-wcan-filter .filter-items .filter-item.active > label > a {
  color: var(--secondaryColor);
}

.yith-wcan-filters .yith-wcan-filter .filter-items .filter-item .checkboxbutton.checked:before,
.yith-wcan-filters.custom-style span.checkboxbutton.checked:before {
  background-color: var(--secondaryColor);
  border-color: var(--secondaryColor);
}

.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);
  box-shadow: 0 0 0 2px var(--secondaryColor);
  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(--secondaryColor);
  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 .yith-wcan-filter .filter-items .filter-item.label.active.with-image:not(.label-right) > a:after {
  background-color: var(--secondaryColor);
}

.yith-wcan-filters-opener {
  display: none; /* caché par défaut — affiché uniquement sous 990px via media query */
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-color: var(--primaryColor);
  color: var(--neutralWhite);
  font-family: var(--fontPrimary_SemiBold);
  font-weight: normal;
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 18px 40px;
  border-radius: 9999px;
  border: 2px solid var(--primaryColor);
  white-space: nowrap;
  cursor: pointer;
  outline: none;
  transition: opacity 0.2s ease;
  margin-bottom: 25px;
}

.yith-wcan-filters-opener .filter-icon,
.yith-wcan-filters-opener .filter-icon::before,
.yith-wcan-filters-opener .filter-icon::after,
.yith-wcan-filters-opener:hover .filter-icon,
.yith-wcan-filters-opener:hover .filter-icon::before,
.yith-wcan-filters-opener:hover .filter-icon::after,
.yith-wcan-filters-opener:focus .filter-icon,
.yith-wcan-filters-opener:focus .filter-icon::before,
.yith-wcan-filters-opener:focus .filter-icon::after {
  filter: brightness(0) invert(1);
}

.yith-wcan-filters-opener:hover,
.yith-wcan-filters-opener:focus {
  opacity: 0.82 !important;
  background-color: var(--primaryColor) !important;
  border-color: var(--primaryColor) !important;
  color: var(--neutralWhite) !important;
  text-decoration: none !important;
}

/* Modale menu filtre ouvert*/
/*couleur de fond fenêtre filtres yith modal ouverte */
.yith-wcan-filters.filters-modal.open {
  background-color: white;
}
.yith-wcan-filters.filters-modal.open h3.mobile-only {
  background-color: var(--secondaryColor);
  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 {
  /*
  .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 .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(--secondaryColor);
  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(--secondaryColorShade4);
  border-color: var(--secondaryColor);
  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

*/
/* 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) {
  .yith-wcan-filters-opener {
    display: inline-flex;
  }
  .woocommerce.archive.left-sidebar .content-area {
    width: 100%;
    float: none;
    margin-right: 0;
  }
  .woocommerce.woocommerce.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;
  }
  .woocommerce.archive.left-sidebar .widget-area {
    width: 35%;
    margin-right: 5%;
  }
  .woocommerce.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;
  }
  .woocommerce.archive.left-sidebar .widget-area {
    width: 35%;
    margin-right: 5%;
  }
  .woocommerce.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;
  }
  .woocommerce.archive.left-sidebar .widget-area {
    width: 35%;
    margin-right: 5%;
  }
  .woocommerce.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;
  }
  .woocommerce.archive.left-sidebar .widget-area {
    width: 25%;
    margin-right: 5%;
  }
  .woocommerce.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 {
  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 {
  padding-right: 1px;
  overflow: hidden;
}

.woocommerce-product-gallery .flex-viewport {
  overflow: hidden !important;
}

.woocommerce-product-gallery__image a img {
  border: 1px solid var(--neutralGreyShade2);
  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: var(--fs-product-title);
  color: var(--foregroundColor);
  line-height: 1;
  font-family: var(--fontPrimary_SemiBold);
  text-align: left;
  letter-spacing: -0.1875rem;
  word-spacing: -0.1875rem;
  text-transform: uppercase;
  border-bottom: 1px solid var(--neutralGreyShade2);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

.single-product div.product .product_meta {
  border-top: none;
}

.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;
}

.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(--neutralGreyShade2);
  margin-right: 0.75rem;
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
}

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

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

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

.single-product .select_option.selected::before {
  background-color: var(--secondaryColor);
  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(--secondaryColor);
  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(--secondaryColor);
}

/* 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(--accentRed);
  transition: all 0.4s ease;
  text-transform: uppercase;
  color: var(--accentRed);
  display: inline-block;
}
.reset_variations:hover {
  background-color: var(--accentRed);
  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(--neutralGreyShade2);
  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(--secondaryColor);
  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;
  padding: 12px;
  overflow: visible;
}

/* 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(--neutralGreyShade2);
  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(--secondaryColor);
  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(--neutralWhite) !important;
  border: 2px 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 {
  opacity: 0.82;
}

/* Dimensions + Tableau informations produit — Figma node 398-39669
///////////////////////////////////////////////////////////////*/
/*
 * Masquage initial du poids et des dimensions — JS-critique : ne pas supprimer.
 *
 * Ces règles sont requises au chargement pour que les lignes soient cachées
 * avant que nmi_single_product.js les affiche via .css('display', 'grid').
 *
 * Logique d'affichage (gérée par dimensionsDisplay() dans nmi_single_product.js) :
 *   - Produit simple  : toutes les lignes sont affichées au chargement.
 *   - Produit variable : seules les lignes dont [data-variation-id] correspond
 *     à la variation sélectionnée sont affichées — dimensions ET poids.
 *
 * ⚠  Classe ".coverpla-weight" (et non ".product_weight") :
 * WooCommerce cible nativement ".product_weight" dans wc-add-to-cart-variation.js
 * et écrase le innerHTML (stocke les <td> dans data-o_content puis les supprime)
 * lors de chaque changement de variation — ce qui détruit la grille CSS.
 * Le préfixe "coverpla-" évite toute collision avec le JS core WooCommerce.
 *
 * Règle générale : ne jamais utiliser les classes natives WooCommerce sur des
 * éléments custom : .product_weight, .product_dimensions, .sku, .price, .stock,
 * .woocommerce-variation-* → préfixer avec coverpla-.
 */
.single-product .grid-attrtibutes .dimension-item,
.single-product .grid-attrtibutes .coverpla-weight {
  display: none;
}

/* ---- Conteneur carte ---- */
.single-product .product-attributes-table {
  display: block;
  background: var(--attr-table-bg);
  border-radius: var(--attr-table-radius);
  padding: var(--attr-table-padding-v) var(--attr-table-padding-h);
  width: 100%;
  box-sizing: border-box;
}
.single-product .product-attributes-table tbody {
  display: flex;
  flex-direction: column;
}
.single-product .product-attributes-table tr {
  display: grid;
  grid-template-columns: 52px 1fr 1fr;
  gap: 1.0625rem; /* 17px Figma */
  align-items: center;
  min-height: 60px;
  padding-top: var(--space-attr-row);
  padding-bottom: var(--space-attr-row);
  border-bottom: 2px solid var(--neutralWhite);
}
.single-product .product-attributes-table tr:last-child {
  border-bottom: none;
}
.single-product .product-attributes-table td {
  display: flex;
  align-items: center;
}
.single-product .product-attributes-table {
  /* Colonne icône */
}
.single-product .product-attributes-table td.attr-icon {
  width: 52px;
  height: 60px;
  justify-content: center;
  align-items: center;
}
.single-product .product-attributes-table td.attr-icon::before {
  display: block;
  line-height: 0;
}
.single-product .product-attributes-table {
  /* Colonne label */
}
.single-product .product-attributes-table td.attr-label {
  font-family: var(--fontPrimary);
  font-size: var(--fs-attr-table);
  text-transform: uppercase;
  color: var(--primaryColor);
  line-height: 1.2;
}
.single-product .product-attributes-table {
  /* Colonne valeur */
}
.single-product .product-attributes-table td.attr-value {
  font-family: var(--fontPrimary_SemiBold);
  font-size: var(--fs-attr-table);
  color: var(--primaryColor);
  line-height: 1.2;
}
.single-product .product-attributes-table tbody tr:nth-child(2n) td,
.single-product .product-attributes-table tbody tr td {
  background-color: transparent;
}
.single-product .product-attributes-table tr.attr-reference td.attr-label {
  color: var(--secondaryColor);
}
.single-product .product-attributes-table tr.attr-reference td.attr-value {
  color: var(--secondaryColor);
  font-family: var(--fontPrimary_SemiBold);
}

/* ---- Icônes SVG via ::before sur td.attr-icon ---- */
/*
 * Chaque règle doit inclure BOTH "content" et "display: block" dans la même déclaration.
 * Chemins relatifs à style.css (racine du thème) → assets/images/attributs/*.svg
 */
.single-product .grid-attrtibutes .coverpla-weight td.attr-icon::before {
  content: url(assets/images/attributs/ico-poids.svg);
  display: block;
}

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

.single-product .grid-attrtibutes .dimension-length td.attr-icon::before {
  content: url(assets/images/attributs/ico-profondeur.svg);
  display: block;
}

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

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

/* Attributs taxonomiques */
.single-product .grid-attrtibutes .attribute-pa_type_cp td.attr-icon::before {
  content: url(assets/images/attributs/ico-cp.svg);
  display: block;
}

.single-product .grid-attrtibutes .attribute-pa_volume td.attr-icon::before {
  content: url(assets/images/attributs/ico-capacite.svg);
  display: block;
}

.single-product .grid-attrtibutes .attribute-pa_bague td.attr-icon::before {
  content: url(assets/images/attributs/ico-bague.svg);
  display: block;
}

.single-product .grid-attrtibutes .attribute-pa_couleur td.attr-icon::before {
  content: url(assets/images/attributs/ico-couleur.svg);
  display: block;
}

.single-product .grid-attrtibutes .attribute-pa_matiere td.attr-icon::before {
  content: url(assets/images/attributs/ico-matiere.svg);
  display: block;
}

.single-product .grid-attrtibutes .attribute-pa_disponibilite td.attr-icon::before {
  content: url(assets/images/attributs/ico-stockage.svg);
  display: block;
}

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

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .single-product .product-attributes-table {
    padding: var(--attr-table-padding-v);
  }
  .single-product .product-attributes-table tr {
    grid-template-columns: 40px 1fr 1fr;
    gap: 0.625rem;
    min-height: 48px;
  }
  .single-product .product-attributes-table td.attr-icon {
    width: 40px;
    height: 48px;
  }
  .single-product .product-attributes-table td.attr-label,
  .single-product .product-attributes-table td.attr-value {
    font-size: 1rem;
  }
}
@media (max-width: 480px) {
  .single-product .product-attributes-table tr {
    grid-template-columns: 36px minmax(80px, 0.8fr) 1fr;
    gap: 0.5rem;
    min-height: 44px;
  }
  .single-product .product-attributes-table td.attr-icon {
    width: 36px;
    height: 36px;
  }
  .single-product .product-attributes-table td.attr-label {
    font-size: 0.75rem;
  }
  .single-product .product-attributes-table td.attr-value {
    font-size: 0.875rem;
    justify-content: flex-start;
  }
}
.single-product .product-infos-container {
  border: 1px solid var(--neutralGreyShade2);
  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);
  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;
  transition: opacity 0.7s, transform 0.7s;
  backface-visibility: hidden;
  margin-bottom: 60px !important;
}

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

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

.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(--secondaryColor);
  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);
}

.single-product input[type=submit][name=add-to-cart] {
  display: none !important;
}

/* Bouton "Ajouter au panier" — exclu du sélecteur global pour laisser YITH le masquer si besoin
   Stylé ici comme un .button standard + pleine largeur */
.single-product .single_add_to_cart_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  background-color: var(--primaryColor);
  color: var(--neutralWhite);
  font-family: var(--fontPrimary_SemiBold);
  font-weight: normal;
  font-size: var(--btn-fs-normal);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--btn-padding-v-normal) var(--btn-padding-h-normal);
  border-radius: 9999px;
  border: 2px solid var(--primaryColor);
  white-space: nowrap;
  cursor: pointer;
  outline: none;
  transition: opacity 0.2s ease;
}
.single-product .single_add_to_cart_button:hover, .single-product .single_add_to_cart_button:focus {
  opacity: 0.82;
  color: var(--neutralWhite);
  text-decoration: none;
}
.single-product .single_add_to_cart_button:disabled, .single-product .single_add_to_cart_button.disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
}

/* imput number quantité
///////////////////////////////////////////////////////////////*/
.single-product div.product .quantity {
  position: relative;
  float: none !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: visible !important;
}

.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(--secondaryColor) !important;
  border-radius: var(--borderRadiusInputs);
  -webkit-border-radius: var(--borderRadiusInputs);
  -moz-border-radius: var(--borderRadiusInputs);
  -ms-border-radius: var(--borderRadiusInputs);
  -o-border-radius: var(--borderRadiusInputs);
  min-width: 120px;
  font-family: var(--fontPrimary);
  font-size: 1.125rem;
  color: var(--secondaryColor);
  float: none;
}

.single-product div.product .quantity input.minus,
.single-product div.product .quantity input.plus {
  position: static !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0 !important;
  background-color: var(--primaryColor) !important;
  color: var(--neutralWhite) !important;
  border: 2px solid var(--primaryColor) !important;
  border-radius: 9999px !important;
  font-family: var(--fontPrimary_SemiBold);
  font-size: 1.875rem;
  line-height: 0;
  cursor: pointer;
  transition: opacity 0.2s ease;
  flex-shrink: 0;
}

.single-product div.product .quantity input.minus:hover,
.single-product div.product .quantity input.plus:hover {
  opacity: 0.82 !important;
  background-color: var(--primaryColor) !important;
  color: var(--neutralWhite) !important;
}

/* 
┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│	RWD PAGE SINGLE PRODUCT
└────────────────────────────────────────────────────────────────────────────────────────────────────────┘
*/
/* 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 h4.product-info-title {
    margin-top: 2rem;
  }
}
/* Entre 768px et 1024px
============================================================= */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .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 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
============================================================= */
/* MESSAGE DE VALIDATION QUANTITÉ
///////////////////////////////////////////////////////////////*/
.single-product .quantity.qty-invalid input.qty {
  border-color: var(--accentRed);
  background: var(--accentRedShade1);
}
.single-product .qty-feedback {
  display: none;
  margin-top: 8px;
  color: var(--accentRedShade3);
  font-size: var(--input-fs);
}
.single-product .qty-feedback strong {
  font-weight: 700;
}
.single-product .qty-feedback.is-visible {
  display: block;
}

/* 
version : 1.0
date : 09/11/2023
*/
/* 
┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│	PAGES COVERPLA
└────────────────────────────────────────────────────────────────────────────────────────────────────────┘
*/
.page-coverpla .site-content {
  text-align: left;
  background: var(--backgroundColor);
}

.page-coverpla .entry-title,
.page-fournisseur-de-packaging-cosmetiques .entry-title,
.page-fournisseur-de-flacons-de-parfum .entry-title,
.page-politique-de-cookies .entry-title,
.page-mentions-legales .entry-title,
.page-politique-de-confidentialite .entry-title,
.page-cosmetics-packaging-supplier .entry-title,
.page-perfume-bottle-supplier .entry-title,
.page-cookies-policy .entry-title,
.page-legal-notice .entry-title,
.page-confidentialy-policy .entry-title {
  font-family: var(--fontPrimary_SemiBold);
  font-size: var(--fs-section-title); /* clamp(2.5rem, 4vw, 5.625rem) — 40→90px responsive */
  line-height: var(--leading-display); /* 1.05 unitless */
  letter-spacing: var(--tracking-display); /* -0.04em — proportionnel */
  word-spacing: -0.5rem; /* valeur optique propre à ce titre */
  display: inline-block; /* permet à ::after width:100% = largeur du texte */
  margin-bottom: 4.375rem; /* valeur optique propre à ce titre */
  text-align: left;
}

.page-coverpla .entry-title::after,
.page-fournisseur-de-packaging-cosmetiques .entry-title::after,
.page-fournisseur-de-flacons-de-parfum .entry-title::after,
.page-politique-de-cookies .entry-title::after,
.page-mentions-legales .entry-title::after,
.page-politique-de-confidentialite .entry-title::after,
.page-cosmetics-packaging-supplier .entry-title::after,
.page-perfume-bottle-supplier .entry-title::after,
.page-cookies-policy .entry-title::after,
.page-legal-notice .entry-title::after,
.page-confidentialy-policy .entry-title::after {
  content: "";
  display: block;
  width: 100%;
  height: 4px;
  background-color: var(--secondaryColor);
  margin-top: clamp(6px, 0.5vw, 12px);
}

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

.page-coverpla .grid-col.grid-col-2 {
  grid-template-columns: 1fr 1fr;
}

.page-coverpla .grid-col.grid-col-4 {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.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 :not(.slider__slide) > figure figcaption,
.page-coverpla .textcaption {
  font-size: var(--fs-body-sm);
  text-align: center;
  padding: 0.5rem 0.25rem;
  border: 0;
}

.page-coverpla figure img {
  border: 1px solid var(--neutralGreyShade3);
  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:not(.title--lg):not(.logos-titre):not(.engagement-titre) {
  padding: 3rem 0 1rem;
  font-family: var(--fontSecondary_SemiBold);
}

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

/* page engagements */
.histoire_catalogues .bigTitle {
  font-size: 3.5rem;
  line-height: 3.5rem;
}

@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;
  }
}
/* 
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;
}

/* ---- Grid listing 2 colonnes ---- */
.page-actualites .site-main,
.category .site-main,
.blog .site-main {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-v-sm);
}
.page-actualites .site-main .navigation.pagination,
.category .site-main .navigation.pagination,
.blog .site-main .navigation.pagination {
  grid-column: 1/-1;
}

@media screen and (max-width: 1024px) {
  .page-actualites .site-main,
  .category .site-main,
  .blog .site-main {
    grid-template-columns: 1fr;
  }
}
/* ---- Carte article ---- */
.page-actualites .card,
.category .card,
.blog .card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--borderRadius);
  background: var(--neutralWhite);
  transition: all 350ms ease-out;
}
.page-actualites .card:hover,
.category .card:hover,
.blog .card:hover {
  transform: scale(1.02);
  cursor: pointer;
}

.page-actualites article > a,
.category article > a,
.blog article > a {
  display: flex;
  flex-direction: column;
  color: var(--foregroundColor);
  text-decoration: none;
  height: 100%;
}

.page-actualites .post-image,
.category .post-image,
.blog .post-image {
  overflow: hidden;
}
.page-actualites .post-image figure,
.category .post-image figure,
.blog .post-image figure {
  margin: 0;
  border-radius: var(--borderRadius) var(--borderRadius) 0 0;
  border: 1px solid var(--neutralGreyShade3);
  overflow: hidden;
}
.page-actualites .post-image figure img,
.category .post-image figure img,
.blog .post-image figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
  transition: transform 0.6s ease;
}
.page-actualites .post-image:empty,
.category .post-image:empty,
.blog .post-image:empty {
  display: none;
}

.page-actualites article > a:hover .post-image figure img,
.category article > a:hover .post-image figure img,
.blog article > a:hover .post-image figure img {
  transform: scale(1.04);
}

.page-actualites .post-content,
.category .post-content,
.blog .post-content,
.single-post .post-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-micro);
  padding: var(--space-v-sm) var(--card-padding-news);
  align-self: stretch;
}
.page-actualites .post-content header,
.category .post-content header,
.blog .post-content header,
.single-post .post-content header {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
}
.page-actualites .post-content .entry-category,
.category .post-content .entry-category,
.blog .post-content .entry-category,
.single-post .post-content .entry-category {
  display: inline-block;
  line-height: 1;
  color: var(--canvasColor);
  background-color: var(--secondaryColor);
  transition: all 0.5s ease-in-out;
  padding: var(--badge-padding-v) var(--badge-padding-h);
  font-weight: 600;
  font-size: var(--fs-badge);
  border-radius: var(--borderRadiusInputs);
}
.page-actualites .post-content .entry-date,
.category .post-content .entry-date,
.blog .post-content .entry-date,
.single-post .post-content .entry-date {
  text-transform: uppercase;
  font-size: var(--fs-entry-date);
  letter-spacing: 0.08em;
  color: var(--neutralGrey);
}
.page-actualites .post-content .entry-title,
.category .post-content .entry-title,
.blog .post-content .entry-title,
.single-post .post-content .entry-title {
  font-size: var(--fs-news-title);
  line-height: 1.07;
  letter-spacing: var(--tracking-title);
  color: var(--foregroundColor);
  font-family: var(--fontPrimary_SemiBold);
  margin: 0;
  padding: 0;
}
.page-actualites .post-content .post-text,
.category .post-content .post-text,
.blog .post-content .post-text,
.single-post .post-content .post-text {
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  color: var(--foregroundColor);
}
.page-actualites .post-content .post-text p:last-child,
.category .post-content .post-text p:last-child,
.blog .post-content .post-text p:last-child,
.single-post .post-content .post-text p:last-child {
  margin-bottom: 0;
}

.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(--secondaryColor);
}

.read-more-link {
  color: var(--secondaryColor);
  text-decoration: none;
}

.read-more-link:hover {
  color: var(--secondaryColor);
  text-decoration: underline;
}

/* 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(--secondaryColor);
  color: var(--canvasColor);
}

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

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

.single-post .post-image img,
.single-post .post-body img {
  max-width: 100%;
  width: 100%;
  height: auto;
  border-radius: var(--borderRadius);
}

.single-post .post-body img {
  margin-bottom: var(--space-v-sm);
}

.single-post .post-body h2,
.page-actualites .post-body h2,
.category .post-body h2,
.blog .post-body h2 {
  font-family: var(--fontPrimary_SemiBold);
  font-size: var(--fs-card-title);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-title);
  margin-bottom: var(--space-micro);
}

.single-post .post-body h3,
.page-actualites .post-body h3,
.category .post-body h3,
.blog .post-body h3 {
  font-family: var(--fontPrimary_SemiBold);
  font-size: var(--fs-md);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-title);
  margin-bottom: var(--space-micro);
}

.single-post .post-body h4,
.page-actualites .post-body h4,
.category .post-body h4,
.blog .post-body h4 {
  font-family: var(--fontPrimary_SemiBold);
  font-size: var(--fs-sm);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-title);
  margin-bottom: var(--space-micro);
}

.single-post .post-body h5,
.single-post .post-body h6,
.page-actualites .post-body h5,
.page-actualites .post-body h6,
.category .post-body h5,
.category .post-body h6,
.blog .post-body h5,
.blog .post-body h6 {
  font-family: var(--fontPrimary_SemiBold);
  font-size: var(--fs-xs);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-title);
  margin-bottom: var(--space-micro);
}

.single-post .post-content header {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
  margin-bottom: var(--space-v-sm);
}

.single-post .entry-category {
  display: inline-block;
  line-height: 1;
  color: var(--canvasColor);
  background-color: var(--secondaryColor);
  transition: all 0.5s ease-in-out;
  padding: var(--badge-padding-v) var(--badge-padding-h);
  font-weight: 600;
  font-size: var(--fs-badge);
  border-radius: var(--borderRadiusInputs);
}

.single-post .entry-date {
  text-transform: uppercase;
  font-size: var(--fs-entry-date);
  letter-spacing: 0.08em;
  color: var(--neutralGrey);
}

.single-post .entry-title {
  font-size: var(--fs-page-title);
  letter-spacing: var(--tracking-display);
  color: var(--foregroundColor);
  font-family: var(--fontPrimary_SemiBold);
  padding: 0 0 var(--space-v-sm);
  margin-bottom: 0;
  line-height: var(--leading-title);
}

.single-post .post-image {
  margin-bottom: var(--space-v-sm);
}

.single-post .post-body p + h2, .single-post .post-body p + h3, .single-post .post-body p + h4,
.single-post .post-body ul + h2, .single-post .post-body ul + h3, .single-post .post-body ul + h4,
.single-post .post-body ol + h2, .single-post .post-body ol + h3, .single-post .post-body ol + h4,
.single-post .post-body table + h2, .single-post .post-body table + h3, .single-post .post-body table + h4,
.single-post .post-body blockquote + h2, .single-post .post-body blockquote + h3, .single-post .post-body blockquote + h4,
.single-post .post-body form + h2, .single-post .post-body form + h3, .single-post .post-body form + h4,
.page-actualites .post-body p + h2,
.page-actualites .post-body p + h3,
.page-actualites .post-body p + h4,
.page-actualites .post-body ul + h2,
.page-actualites .post-body ul + h3,
.page-actualites .post-body ul + h4,
.page-actualites .post-body ol + h2,
.page-actualites .post-body ol + h3,
.page-actualites .post-body ol + h4,
.page-actualites .post-body table + h2,
.page-actualites .post-body table + h3,
.page-actualites .post-body table + h4,
.page-actualites .post-body blockquote + h2,
.page-actualites .post-body blockquote + h3,
.page-actualites .post-body blockquote + h4,
.page-actualites .post-body form + h2,
.page-actualites .post-body form + h3,
.page-actualites .post-body form + h4,
.category .post-body p + h2,
.category .post-body p + h3,
.category .post-body p + h4,
.category .post-body ul + h2,
.category .post-body ul + h3,
.category .post-body ul + h4,
.category .post-body ol + h2,
.category .post-body ol + h3,
.category .post-body ol + h4,
.category .post-body table + h2,
.category .post-body table + h3,
.category .post-body table + h4,
.category .post-body blockquote + h2,
.category .post-body blockquote + h3,
.category .post-body blockquote + h4,
.category .post-body form + h2,
.category .post-body form + h3,
.category .post-body form + h4,
.blog .post-body p + h2,
.blog .post-body p + h3,
.blog .post-body p + h4,
.blog .post-body ul + h2,
.blog .post-body ul + h3,
.blog .post-body ul + h4,
.blog .post-body ol + h2,
.blog .post-body ol + h3,
.blog .post-body ol + h4,
.blog .post-body table + h2,
.blog .post-body table + h3,
.blog .post-body table + h4,
.blog .post-body blockquote + h2,
.blog .post-body blockquote + h3,
.blog .post-body blockquote + h4,
.blog .post-body form + h2,
.blog .post-body form + h3,
.blog .post-body form + h4 {
  margin-top: var(--space-v-md);
}

.single-post .essb_displayed_bottom {
  margin-top: var(--space-v-md);
  padding-top: var(--space-v-sm);
  border-top: 1px solid var(--neutralGreyShade3);
}

/* newsLink — Espace Presse / Actualités — rendu button--small button--outline
////////////////////////////////////////////////////////////*/
.widget-area .widget .newsLink {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-micro);
}
.widget-area .widget .newsLink a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--btn-fs-small);
  line-height: var(--btn-line-height);
  padding: var(--btn-padding-v-small) var(--btn-padding-h-small);
  border-radius: var(--borderRadius);
  border: 1px solid var(--primaryColor);
  color: var(--primaryColor) !important;
  background: transparent !important;
  background-image: none !important;
  font-family: var(--fontPrimary_SemiBold);
  text-decoration: none;
  transition: all 0.2s ease;
}
.widget-area .widget .newsLink a:hover {
  background: var(--primaryColor) !important;
  background-image: none !important;
  color: var(--canvasColor) !important;
  text-decoration: none;
}

.page-actualites .wp-block-button__link,
.category .wp-block-button__link,
.single-post .wp-block-button__link {
  display: inline-flex !important;
  align-items: center !important;
  font-size: var(--btn-fs-normal) !important;
  padding: var(--btn-padding-v-normal) var(--btn-padding-h-normal) !important;
  border-radius: 9999px !important;
  background-color: var(--primaryColor) !important;
  border-color: var(--primaryColor) !important;
  color: var(--neutralWhite) !important;
  font-weight: 600;
  text-decoration: none;
  transition: 0.2s ease;
}
.page-actualites .wp-block-button__link:hover,
.category .wp-block-button__link:hover,
.single-post .wp-block-button__link:hover {
  background-color: var(--primaryColorShade4, var(--primaryColor)) !important;
  color: var(--neutralWhite) !important;
  text-decoration: none;
  opacity: 0.85;
}

/* Side Bar
////////////////////////////////////////////////////////////*/
.page-actualites aside .widget .widget-title,
.category aside .widget .widget-title,
.single-post aside .widget .widget-title {
  font-family: var(--fontPrimary_Medium);
  font-size: 26px;
  line-height: 26px;
  letter-spacing: -2px;
  color: var(--primaryColor);
  border-bottom: 4px solid var(--secondaryColor);
  padding-bottom: 0.5rem;
  margin: 0 0 1.25rem;
  text-align: left;
  width: fit-content;
}

.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,
.single-post .widget-area .widget_categories ul li,
.page-actualites .widget-area .widget_recent_entries ul li,
.category .widget-area .widget_recent_entries ul li,
.single-post .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;
  overflow: visible !important;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: 0% 100%;
  transition: background-size 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.page-actualites .widget-area .widget a:hover,
.category .widget-area .widget a:hover,
.single-post aside .widget-area .widget a:hover {
  color: var(--secondaryColor);
  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(--secondaryColor);
}

aside > div:first-child .textwidget a {
  color: var(--neutralGrey);
  border: 1px solid var(--neutralGrey);
  border-radius: var(--borderRadius);
  display: inline-block;
  padding: 4px 12px !important;
  font-size: var(--fs-body);
  font-weight: 400;
  margin-bottom: 0.3125rem;
}
aside > div:first-child .textwidget a:hover {
  border: 1px solid var(--secondaryColor);
  background-color: var(--secondaryColorShade4);
  color: var(--foregroundColor) !important;
  text-decoration: none;
  color: var(--secondaryColor);
  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
└────────────────────────────────────────────────────────────────────────────────────────────────────────┘
*/
/* 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
============================================================= */
/* 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(--backgroundColor);
}
.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,
.woocommerce-account .site-content,
.page-contactez-nous .site-content,
.page-contact-us .site-content {
  --ywcmap-items-text-color-hover: var(--secondaryColor);
  --ywcmap-logout-background-color: var(--primaryColor);
  --ywcmap-logout-background-color-hover: var(--primaryColor);
  --ywcmap-logout-text-color: var(--backgroundColor);
  --ywcmap-logout-text-color-hover: var(--backgroundColor);
}
.mon-compte .site-content .yith-wcmap li.active > a,
.mon-compte .site-content .yith-wcmap li.active > a *,
.woocommerce-account .site-content .yith-wcmap li.active > a,
.woocommerce-account .site-content .yith-wcmap li.active > a *,
.page-contactez-nous .site-content .yith-wcmap li.active > a,
.page-contactez-nous .site-content .yith-wcmap li.active > a *,
.page-contact-us .site-content .yith-wcmap li.active > a,
.page-contact-us .site-content .yith-wcmap li.active > a * {
  color: var(--secondaryColor) !important;
}
.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 {
  display: inline-block;
  font-size: var(--btn-fs-normal) !important;
  padding: var(--btn-padding-v-normal) var(--btn-padding-h-normal) !important;
  border-radius: var(--borderRadiusInputs) !important;
  background: var(--primaryColor);
  border: 1px solid transparent;
  color: var(--backgroundColor) !important;
  font-family: var(--fontPrimary_SemiBold) !important;
  font-weight: normal !important;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.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 {
  opacity: 0.82;
  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(--secondaryColor);
  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(--neutralGreyShade2);
  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: clamp(1rem, 5vw, 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(--primaryColor);
  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:hover,
.panel-login .panel-heading a#login-form-link:hover {
  background-color: var(--secondaryColorShade4);
  border-color: var(--secondaryColor);
  color: var(--foregroundColor);
}

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

.panel-login a:not(#register-form-link):not(#login-form-link),
body:not(.pages-services, .page-nos-realisations, .page-our-accomplishments, .page-le-nostre-realizzazioni, .page-business-partners-et-filiales, .page-subsidiaries-and-business-partners, .page-business-partners-e-filiali) .page-template a:not(.button) {
  color: var(--secondaryColor);
  text-decoration: underline;
}

.form-privacy-note {
  margin-top: 1rem;
}
.form-privacy-note a {
  color: var(--secondaryColor);
  text-decoration: underline;
}
.form-privacy-note a:hover {
  opacity: 0.82;
}

[id^=rgpd-][id$=_field],
#user-ip-rgpd_field {
  display: none !important;
}

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

.woocommerce-Address-title a.edit {
  display: inline-flex !important;
  align-items: center;
  gap: var(--btn-gap);
  width: fit-content !important;
  height: auto !important;
  text-indent: 0 !important;
  overflow: visible !important;
  font-size: var(--btn-fs-tiny) !important;
  padding: var(--btn-padding-v-tiny) var(--btn-padding-h-tiny) !important;
  border-radius: var(--borderRadiusInputs) !important;
  background: var(--primaryColor) !important;
  border: 1px solid transparent !important;
  color: var(--neutralWhite) !important;
  font-family: var(--fontPrimary_SemiBold) !important;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: opacity 0.2s ease;
}
.woocommerce-Address-title a.edit > *, .woocommerce-Address-title a.edit::before, .woocommerce-Address-title a.edit::after {
  display: none !important;
}
.woocommerce-Address-title a.edit:hover {
  opacity: 0.82;
  text-decoration: none !important;
}

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

#customer_login button.woocommerce-form-login__submit {
  margin-top: 1rem;
}

/* 
┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│	RWD MY ACCONT - REGISTER / LOGIN - CONTACT
└────────────────────────────────────────────────────────────────────────────────────────────────────────┘
*/
/* 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;
  }
}
@media screen and (max-width: 480px) {
  .panel-login .panel-heading a#register-form-link,
  .panel-login .panel-heading a#login-form-link {
    min-height: 0;
    padding: 14px 10px;
    font-size: clamp(0.7rem, 3.5vw, 0.875rem);
    white-space: nowrap;
  }
}
/* 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 .site-content {
  text-align: left;
  background: var(--backgroundColor);
}
.yith-request-a-quote-page #yith-ywraq-form table {
  border: 1px solid var(--neutralGreyShade2);
  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-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  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 td.product-remove {
  vertical-align: middle !important;
}
.yith-request-a-quote-page table.cart .product-thumbnail img {
  border: 1px solid var(--neutralGreyShade2);
  border-radius: var(--borderRadiusSm);
  -webkit-border-radius: var(--borderRadiusSm);
  -moz-border-radius: var(--borderRadiusSm);
  -ms-border-radius: var(--borderRadiusSm);
  -o-border-radius: var(--borderRadiusSm);
}
.yith-request-a-quote-page .wpcf7-subscribers-only {
  color: var(--infoColor);
  background-color: var(--infoBackgroundColor);
  border-radius: var(--borderRadius);
  padding: 1em 1.5em 1em 3.5em;
  margin-bottom: 1.5rem;
  display: block;
  position: relative;
}
.yith-request-a-quote-page .wpcf7-subscribers-only::before {
  font-family: "Material_Symbols_Rounded";
  content: "\e88e";
  font-style: normal;
  font-weight: 400;
  font-size: 2.75rem;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
  color: var(--infoColor);
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
}
.yith-request-a-quote-page .product-quantity .quantity {
  position: static;
  float: none !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  overflow: visible !important;
}
.yith-request-a-quote-page .product-quantity .quantity input.qty {
  text-align: center;
  height: 3.125rem;
  background-color: var(--canvasColor);
  padding: 0;
  margin: 0;
  border: 1px solid var(--secondaryColor) !important;
  border-radius: var(--borderRadiusInputs);
  min-width: 120px;
  font-family: var(--fontPrimary);
  font-size: 1.125rem;
  color: var(--secondaryColor);
  float: none;
  -moz-appearance: textfield;
}
.yith-request-a-quote-page .product-quantity .quantity input.qty::-webkit-inner-spin-button, .yith-request-a-quote-page .product-quantity .quantity input.qty::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.yith-request-a-quote-page .product-quantity .quantity input.minus,
.yith-request-a-quote-page .product-quantity .quantity input.plus {
  position: static !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0 !important;
  background-color: var(--primaryColor) !important;
  color: var(--neutralWhite) !important;
  border: 2px solid var(--primaryColor) !important;
  border-radius: 9999px !important;
  font-family: var(--fontPrimary_SemiBold);
  font-size: 1.875rem;
  line-height: 0;
  cursor: pointer;
  transition: opacity 0.2s ease;
  flex-shrink: 0;
}
.yith-request-a-quote-page .product-quantity .quantity input.minus:hover,
.yith-request-a-quote-page .product-quantity .quantity input.plus:hover {
  opacity: 0.82 !important;
  background-color: var(--primaryColor) !important;
  color: var(--neutralWhite) !important;
}
.yith-request-a-quote-page .product-quantity .quantity.qty-invalid input.qty {
  border-color: var(--accentRed) !important;
  background: var(--accentRedShade1);
}
.yith-request-a-quote-page .product-quantity .qty-feedback {
  display: none;
  margin-top: 8px;
  color: var(--accentRedShade3);
  font-size: var(--input-fs);
  text-align: right;
}
.yith-request-a-quote-page .product-quantity .qty-feedback strong {
  font-weight: 700;
}
.yith-request-a-quote-page .product-quantity .qty-feedback.is-visible {
  display: block;
}
.yith-request-a-quote-page .wpcf7-submit[aria-disabled=true] {
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
}

/* non identifié sur le site */
.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(--neutralGreyShade2);
  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,
.yith-request-a-quote-page .lwa-form input[type=text],
.yith-request-a-quote-page .lwa-form input[type=number],
.yith-request-a-quote-page .lwa-form input[type=email],
.yith-request-a-quote-page .lwa-form input[type=tel],
.yith-request-a-quote-page .lwa-form input[type=url],
.yith-request-a-quote-page .lwa-form input[type=password],
.yith-request-a-quote-page .lwa-form input[type=search],
.yith-request-a-quote-page .lwa-form textarea,
.yith-request-a-quote-page .lwa-form .input-text {
  height: var(--input-height) !important;
  font-size: var(--input-fs) !important;
  font-family: var(--fontPrimary) !important;
  border: 1.5px solid var(--neutralGrey) !important;
  border-radius: var(--borderRadiusInputs) !important;
  width: 100% !important;
  padding: 0 var(--input-padding-h) !important;
  color: var(--primaryColor) !important;
  background: var(--neutralWhite) !important;
  box-shadow: none !important;
  outline: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.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,
.yith-request-a-quote-page .lwa-form input[type=text]:focus,
.yith-request-a-quote-page .lwa-form input[type=text].active,
.yith-request-a-quote-page .lwa-form input[type=number]:focus,
.yith-request-a-quote-page .lwa-form input[type=number].active,
.yith-request-a-quote-page .lwa-form input[type=email]:focus,
.yith-request-a-quote-page .lwa-form input[type=email].active,
.yith-request-a-quote-page .lwa-form input[type=tel]:focus,
.yith-request-a-quote-page .lwa-form input[type=tel].active,
.yith-request-a-quote-page .lwa-form input[type=url]:focus,
.yith-request-a-quote-page .lwa-form input[type=url].active,
.yith-request-a-quote-page .lwa-form input[type=password]:focus,
.yith-request-a-quote-page .lwa-form input[type=password].active,
.yith-request-a-quote-page .lwa-form input[type=search]:focus,
.yith-request-a-quote-page .lwa-form input[type=search].active,
.yith-request-a-quote-page .lwa-form textarea:focus,
.yith-request-a-quote-page .lwa-form textarea.active,
.yith-request-a-quote-page .lwa-form .input-text:focus,
.yith-request-a-quote-page .lwa-form .input-text.active {
  border-color: var(--primaryColor) !important;
  box-shadow: 0 0 0 3px rgba(34, 34, 33, 0.08) !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,
.yith-request-a-quote-page .lwa-form input[type=text]:disabled,
.yith-request-a-quote-page .lwa-form input[type=number]:disabled,
.yith-request-a-quote-page .lwa-form input[type=email]:disabled,
.yith-request-a-quote-page .lwa-form input[type=tel]:disabled,
.yith-request-a-quote-page .lwa-form input[type=url]:disabled,
.yith-request-a-quote-page .lwa-form input[type=password]:disabled,
.yith-request-a-quote-page .lwa-form input[type=search]:disabled,
.yith-request-a-quote-page .lwa-form textarea:disabled,
.yith-request-a-quote-page .lwa-form .input-text:disabled {
  background: var(--neutralGreyShade4) !important;
  border-color: var(--neutralGreyShade3) !important;
  color: var(--neutralGrey) !important;
  cursor: not-allowed !important;
  opacity: 0.7 !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(--secondaryColor) !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(--secondaryColorShade4) !important;
  border-color: var(--secondaryColor) !important;
  color: var(--foregroundColor) !important;
  text-decoration: none;
}
.yith-request-a-quote-page .lwa-bones .pixelbones a {
  color: var(--secondaryColor) !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(--secondaryColor) !important;
}
.yith-request-a-quote-page .lwa-bones .pixelbones input[type=checkbox]:checked {
  border-color: var(--secondaryColor) !important;
}

/* 
┌────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│	RWD MY ACCONT - REGISTER / LOGIN - CONTACT
└────────────────────────────────────────────────────────────────────────────────────────────────────────┘
*/
/* 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 768px — layout block mobile (quantité à la ligne)
============================================================= */
@media screen and (min-width: 0) and (max-width: 768px) {
  .yith-request-a-quote-page #yith-ywraq-form table {
    border-radius: var(--borderRadiusSm);
    margin-top: 1.5rem;
  }
  .yith-request-a-quote-page .update-list-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem;
    align-items: stretch;
  }
  .yith-request-a-quote-page .update-list-wrapper .after-table-right,
  .yith-request-a-quote-page .update-list-wrapper input[name=update_raq] {
    width: 100%;
  }
  .yith-request-a-quote-page .update-list-wrapper button, .yith-request-a-quote-page .update-list-wrapper input[type=submit] {
    width: 100%;
  }
  .yith-request-a-quote-page #yith-ywraq-form table.cart thead {
    display: none;
  }
  .yith-request-a-quote-page #yith-ywraq-form table,
  .yith-request-a-quote-page #yith-ywraq-form table tbody {
    display: block;
    width: 100%;
  }
  .yith-request-a-quote-page #yith-ywraq-form table.cart tbody tr.cart_item {
    display: block;
    position: relative;
    padding: 1rem 1rem 1rem 1rem;
    border-bottom: 1px solid var(--neutralGreyShade3);
    overflow: hidden;
  }
  .yith-request-a-quote-page #yith-ywraq-form table.cart tbody tr.cart_item:last-child {
    border-bottom: none;
  }
  .yith-request-a-quote-page table.cart td {
    display: block;
    border: none !important;
    padding: 0;
    height: auto !important;
  }
  .yith-request-a-quote-page table.cart td.product-remove {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
  }
  .yith-request-a-quote-page table.cart td.product-thumbnail {
    float: left;
    width: 72px;
    margin-right: 0.75rem;
    margin-bottom: 0.75rem;
  }
  .yith-request-a-quote-page table.cart td.product-thumbnail img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    border-radius: var(--borderRadiusSm);
  }
  .yith-request-a-quote-page table.cart td.product-name {
    overflow: hidden;
    padding-right: 2rem;
    word-break: break-word;
    margin-bottom: 0.75rem;
  }
  .yith-request-a-quote-page table.cart td.product-quantity {
    overflow: hidden;
    clear: both;
    padding: 0 !important;
    margin: 0 !important;
  }
  .yith-request-a-quote-page table.cart td.product-quantity .quantity {
    justify-content: flex-start;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .yith-request-a-quote-page table.cart td.product-quantity input.qty {
    min-width: 80px;
  }
  .yith-request-a-quote-page table.cart td.product-quantity input.minus,
  .yith-request-a-quote-page table.cart td.product-quantity input.plus {
    width: 44px;
    height: 44px;
    font-size: 1.5rem;
  }
}
/* 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
============================================================= */
.pages-coverpla.page-business-partners-et-filiales .entry-header .entry-title,
.pages-coverpla.page-subsidiaries-and-business-partners .entry-header .entry-title,
.pages-coverpla.page-business-partners-e-filiali .entry-header .entry-title {
  display: none;
}

.business-partners-et-filiales #filiales,
.subsidiaries-and-business-partners #filiales,
.business-partners-e-filiali #filiales {
  padding: 0 0 7.5rem 0;
}

.business-partners-et-filiales #agents,
.subsidiaries-and-business-partners #agents,
.business-partners-e-filiali #agents {
  padding: 0;
}

.business-partners-et-filiales #social-lins,
.subsidiaries-and-business-partners #social-lins,
.business-partners-e-filiali #social-lins {
  margin-top: var(--space-v-lg);
}

.business-partners-et-filiales #map-container,
.subsidiaries-and-business-partners #map-container,
.business-partners-e-filiali #map-container {
  position: relative;
  isolation: isolate; /* confine les z-index Leaflet — évite le passage au-dessus du header */
  width: 100% !important; /* override le style inline injecté par Leaflet à l'init */
  padding-bottom: 45%;
  max-width: calc(var(--hdscreen) - 3.125rem - 3.125rem);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 18px;
  overflow: hidden;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--secondaryColor) 8%, transparent), transparent 30%), radial-gradient(circle at bottom left, rgba(0, 0, 0, 0.03), transparent 35%), var(--neutralWhite);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08), 0 8px 20px rgba(0, 0, 0, 0.04);
  transition: all 350ms ease-out;
}

.business-partners-et-filiales #map,
.subsidiaries-and-business-partners #map,
.business-partners-e-filiali #map,
.business-partners-et-filiales #map .leaflet-container,
.subsidiaries-and-business-partners #map .leaflet-container,
.business-partners-e-filiali #map .leaflet-container,
.business-partners-et-filiales #map .leaflet-pane,
.subsidiaries-and-business-partners #map .leaflet-pane,
.business-partners-e-filiali #map .leaflet-pane {
  background: #ffffff !important;
}

.business-partners-et-filiales #map,
.subsidiaries-and-business-partners #map,
.business-partners-e-filiali #map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.business-partners-et-filiales #map .leaflet-tile-pane,
.subsidiaries-and-business-partners #map .leaflet-tile-pane,
.business-partners-e-filiali #map .leaflet-tile-pane {
  opacity: 0.4;
}

.business-partners-et-filiales #map::after,
.subsidiaries-and-business-partners #map::after,
.business-partners-e-filiali #map::after {
  content: none;
}

.business-partners-et-filiales #reset-button,
.subsidiaries-and-business-partners #reset-button,
.business-partners-e-filiali #reset-button {
  margin: var(--space-v-md) 0 var(--space-v-lg);
}

.business-partners-et-filiales #address-list,
.subsidiaries-and-business-partners #address-list,
.business-partners-e-filiali #address-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: var(--space-h-md);
  margin: 0;
}

.business-partners-et-filiales #subsidiarie-list,
.subsidiaries-and-business-partners #subsidiarie-list,
.business-partners-e-filiali #subsidiarie-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(auto, 360px));
  justify-content: start;
  grid-gap: var(--space-h-md);
  margin: 0;
}

.business-partners-et-filiales .address-link.card,
.business-partners-et-filiales .subsidiarie-link.card,
.subsidiaries-and-business-partners .address-link.card,
.subsidiaries-and-business-partners .subsidiarie-link.card,
.business-partners-e-filiali .address-link.card,
.business-partners-e-filiali .subsidiarie-link.card {
  border: 1px solid var(--neutralGreyShade3);
  border-radius: 16px;
  background: var(--neutralWhite);
  box-shadow: var(--boxShadow-card);
  transition: all 350ms ease-out;
  cursor: pointer;
  overflow: hidden;
}

.business-partners-et-filiales .address-link.card:hover,
.business-partners-et-filiales .subsidiarie-link.card:hover,
.subsidiaries-and-business-partners .address-link.card:hover,
.subsidiaries-and-business-partners .subsidiarie-link.card:hover,
.business-partners-e-filiali .address-link.card:hover,
.business-partners-e-filiali .subsidiarie-link.card:hover {
  border-color: var(--secondaryColor);
  box-shadow: 4px 8px 20px rgba(0, 0, 0, 0.1215686275);
  transform: scale(1.03);
}

.business-partners-et-filiales .address-link.card.active,
.subsidiaries-and-business-partners .address-link.card.active,
.business-partners-e-filiali .address-link.card.active {
  border-color: var(--secondaryColor);
  box-shadow: 4px 8px 20px rgba(0, 0, 0, 0.1215686275);
  cursor: pointer;
  transform: scale(1.03);
}

.business-partners-et-filiales .address-link.card.active address::before,
.subsidiaries-and-business-partners .address-link.card.active address::before,
.business-partners-e-filiali .address-link.card.active address::before {
  font-family: "Font Awesome 5 Free";
  content: "\f058";
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 18px;
  font-weight: 900;
  color: var(--secondaryColor);
}

.business-partners-et-filiales .address-link.card address,
.business-partners-et-filiales .subsidiarie-link.card address,
.subsidiaries-and-business-partners .address-link.card address,
.subsidiaries-and-business-partners .subsidiarie-link.card address,
.business-partners-e-filiali .address-link.card address,
.business-partners-e-filiali .subsidiarie-link.card address {
  transition: all 0.4s ease;
  text-align: left;
  padding: var(--space-xs);
  position: relative;
  display: block;
  font-style: normal;
}

.business-partners-et-filiales .address-link.card address h2,
.business-partners-et-filiales .subsidiarie-link.card address h2,
.subsidiaries-and-business-partners .address-link.card address h2,
.subsidiaries-and-business-partners .subsidiarie-link.card address h2,
.business-partners-e-filiali .address-link.card address h2,
.business-partners-e-filiali .subsidiarie-link.card address h2 {
  font-size: var(--fs-md); /* clamp(1.25rem, 1.3vw, 1.375rem) — 20→22px */
  line-height: 1.25;
  padding: 0 0 0.75rem;
  margin: 0;
  margin-top: -0.25rem; /* neutralise le margin-top navigateur du h2 */
  font-family: var(--fontPrimary_SemiBold);
  color: var(--primaryColor);
}

.business-partners-et-filiales .address-link.card address p,
.business-partners-et-filiales .subsidiarie-link.card address p,
.subsidiaries-and-business-partners .address-link.card address p,
.subsidiaries-and-business-partners .subsidiarie-link.card address p,
.business-partners-e-filiali .address-link.card address p,
.business-partners-e-filiali .subsidiarie-link.card address p {
  margin: 0;
  line-height: 1.55;
  color: rgba(0, 0, 0, 0.72);
  font-weight: normal;
  font-size: 0.95rem;
  padding-left: 2.75rem; /* aligne avec le texte du titre (après drapeau + gap) */
}

.business-partners-et-filiales .address-link.card address .agent-email,
.business-partners-et-filiales .subsidiarie-link.card address .agent-email,
.subsidiaries-and-business-partners .address-link.card address .agent-email,
.subsidiaries-and-business-partners .subsidiarie-link.card address .agent-email,
.business-partners-e-filiali .address-link.card address .agent-email,
.business-partners-e-filiali .subsidiarie-link.card address .agent-email {
  font-weight: normal;
  margin-top: 0.85rem;
  font-size: 0.9rem;
  color: var(--secondaryColor);
  word-break: break-word;
}

.business-partners-et-filiales .leaflet-popup-content-wrapper,
.subsidiaries-and-business-partners .leaflet-popup-content-wrapper,
.business-partners-e-filiali .leaflet-popup-content-wrapper {
  border-radius: 22px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.14);
  padding: 0;
  background: rgba(255, 255, 255, 0.96);
  overflow: hidden;
}

.business-partners-et-filiales .leaflet-popup-content,
.subsidiaries-and-business-partners .leaflet-popup-content,
.business-partners-e-filiali .leaflet-popup-content {
  margin: 0;
  min-width: 240px;
  max-width: 320px;
  padding: 28px 28px 24px;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.74);
}

.business-partners-et-filiales .leaflet-popup-content address,
.subsidiaries-and-business-partners .leaflet-popup-content address,
.business-partners-e-filiali .leaflet-popup-content address {
  margin: 0;
  padding: 0;
  text-align: left;
  font-style: normal;
}

.business-partners-et-filiales .leaflet-popup-content h2,
.business-partners-et-filiales .leaflet-popup-content h3,
.subsidiaries-and-business-partners .leaflet-popup-content h2,
.subsidiaries-and-business-partners .leaflet-popup-content h3,
.business-partners-e-filiali .leaflet-popup-content h3 {
  margin: 0 0 18px;
  padding: 0;
  font-size: var(--fs-body-lg);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-family: var(--fontPrimary_SemiBold);
  color: var(--primaryColor);
  border: 0;
  text-transform: none;
}

.business-partners-et-filiales .leaflet-popup-content p,
.subsidiaries-and-business-partners .leaflet-popup-content p,
.business-partners-e-filiali .leaflet-popup-content p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.72);
}

.business-partners-et-filiales .leaflet-popup-content p br,
.subsidiaries-and-business-partners .leaflet-popup-content p br,
.business-partners-e-filiali .leaflet-popup-content p br {
  content: "";
}

.business-partners-et-filiales .leaflet-popup-tip,
.subsidiaries-and-business-partners .leaflet-popup-tip,
.business-partners-e-filiali .leaflet-popup-tip {
  box-shadow: none;
  background: rgba(255, 255, 255, 0.96);
}

.business-partners-et-filiales .leaflet-container a.leaflet-popup-close-button,
.subsidiaries-and-business-partners .leaflet-container a.leaflet-popup-close-button,
.business-partners-e-filiali .leaflet-container a.leaflet-popup-close-button {
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  color: rgba(0, 0, 0, 0.26);
  font-size: 24px;
  line-height: 28px;
  text-align: center;
  transition: all 0.2s ease;
}

.business-partners-et-filiales .leaflet-container a.leaflet-popup-close-button:hover,
.subsidiaries-and-business-partners .leaflet-container a.leaflet-popup-close-button:hover,
.business-partners-e-filiali .leaflet-container a.leaflet-popup-close-button:hover {
  color: rgba(0, 0, 0, 0.55);
  background: rgba(0, 0, 0, 0.05);
}

.business-partners-et-filiales .leaflet-marker-icon.marker-active,
.subsidiaries-and-business-partners .leaflet-marker-icon.marker-active,
.business-partners-e-filiali .leaflet-marker-icon.marker-active {
  filter: brightness(1.06) saturate(1.12) drop-shadow(0 0 16px var(--secondaryColor)) drop-shadow(0 0 6px var(--secondaryColor));
  z-index: 999 !important;
  transition: filter 0.25s ease, opacity 0.25s ease;
}

.business-partners-et-filiales .agent-pulse-icon,
.subsidiaries-and-business-partners .agent-pulse-icon,
.business-partners-e-filiali .agent-pulse-icon {
  background: transparent;
  border: 0;
}

.business-partners-et-filiales .agent-pulse-ring,
.subsidiaries-and-business-partners .agent-pulse-ring,
.business-partners-e-filiali .agent-pulse-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 90px;
  height: 90px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--secondaryColor);
  border: 2px solid var(--secondaryColor);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--secondaryColor) 28%, transparent), 0 0 24px color-mix(in srgb, var(--secondaryColor) 12%, transparent);
  animation: agentPulse 2.2s ease-out infinite;
  pointer-events: none;
}

@keyframes agentPulse {
  0% {
    transform: translate(-50%, -50%) scale(0.75);
    opacity: 0.95;
  }
  70% {
    transform: translate(-50%, -50%) scale(1.35);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.35);
    opacity: 0;
  }
}
.business-partners-et-filiales .agent-pulse-ring-delay,
.subsidiaries-and-business-partners .agent-pulse-ring-delay,
.business-partners-e-filiali .agent-pulse-ring-delay {
  animation-delay: 0.9s;
}

.business-partners-et-filiales .address-link.card address h2.agent-card-title,
.business-partners-et-filiales .subsidiarie-link.card address h2.agent-card-title,
.subsidiaries-and-business-partners .address-link.card address h2.agent-card-title,
.subsidiaries-and-business-partners .subsidiarie-link.card address h2.agent-card-title,
.business-partners-e-filiali .address-link.card address h2.agent-card-title,
.business-partners-e-filiali .address-link.card address h2.agent-card-title,
.business-partners-e-filiali .subsidiarie-link.card address h2.agent-card-title {
  display: block;
  padding-left: 2.75rem; /* indentation = drapeau + gap */
}

.business-partners-et-filiales .agent-card-flag,
.subsidiaries-and-business-partners .agent-card-flag,
.business-partners-e-filiali .agent-card-flag {
  position: absolute;
  top: var(--space-xs); /* aligné avec le padding de l'address */
  left: var(--space-xs);
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  object-fit: cover;
}

.business-partners-et-filiales .agent-marker-icon,
.business-partners-et-filiales .subsidiary-marker-icon,
.business-partners-et-filiales .headquarters-marker-icon,
.subsidiaries-and-business-partners .agent-marker-icon,
.subsidiaries-and-business-partners .subsidiary-marker-icon,
.subsidiaries-and-business-partners .headquarters-marker-icon,
.business-partners-e-filiali .headquarters-marker-icon {
  background: transparent;
  border: 0;
}

.business-partners-et-filiales .map-marker,
.subsidiaries-and-business-partners .map-marker,
.business-partners-e-filiali .map-marker {
  position: relative;
  width: 260px;
  height: 110px;
}

.business-partners-et-filiales .map-marker-dot,
.subsidiaries-and-business-partners .map-marker-dot,
.business-partners-e-filiali .map-marker-dot {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.business-partners-et-filiales .map-marker-dot-agent,
.subsidiaries-and-business-partners .map-marker-dot-agent,
.business-partners-e-filiali .map-marker-dot-agent {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--secondaryColor);
  border: 2px solid #fff;
}

.business-partners-et-filiales .map-marker-dot-subsidiary,
.subsidiaries-and-business-partners .map-marker-dot-subsidiary,
.business-partners-e-filiali .map-marker-dot-subsidiary {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: var(--primaryColor);
  border: 2px solid #fff;
}

.business-partners-et-filiales .map-marker-dot-headquarters,
.subsidiaries-and-business-partners .map-marker-dot-headquarters,
.business-partners-e-filiali .map-marker-dot-headquarters {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--secondaryColor);
}

.business-partners-et-filiales .map-marker-logo,
.subsidiaries-and-business-partners .map-marker-logo,
.business-partners-e-filiali .map-marker-logo {
  width: 17px;
  height: auto;
  display: block;
}

.business-partners-et-filiales .map-marker-line,
.subsidiaries-and-business-partners .map-marker-line,
.business-partners-e-filiali .map-marker-line {
  position: absolute;
  left: 8px;
  top: 8px;
  height: 1px;
  background: rgba(90, 90, 90, 0.42);
  transform-origin: 0 0;
  z-index: 1;
}

.business-partners-et-filiales .map-marker-line-headquarters,
.subsidiaries-and-business-partners .map-marker-line-headquarters,
.business-partners-e-filiali .map-marker-line-headquarters {
  left: 15px;
  top: 15px;
  background: color-mix(in srgb, var(--secondaryColor) 55%, transparent);
}

.business-partners-et-filiales .map-marker-label,
.subsidiaries-and-business-partners .map-marker-label,
.business-partners-e-filiali .map-marker-label {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.business-partners-et-filiales .map-marker-label-agent,
.subsidiaries-and-business-partners .map-marker-label-agent,
.business-partners-e-filiali .map-marker-label-agent {
  background: #fff;
  color: var(--primaryColor);
  border: 1px solid rgba(0, 0, 0, 0.12);
}

.business-partners-et-filiales .map-marker-label-subsidiary,
.subsidiaries-and-business-partners .map-marker-label-subsidiary,
.business-partners-e-filiali .map-marker-label-subsidiary {
  background: var(--secondaryColor);
  color: var(--neutralWhite);
  border: 1px solid color-mix(in srgb, var(--secondaryColor) 35%, transparent);
}

.business-partners-et-filiales .map-marker-label-headquarters,
.subsidiaries-and-business-partners .map-marker-label-headquarters,
.business-partners-e-filiali .map-marker-label-headquarters {
  background: var(--primaryColor);
  color: var(--neutralWhite);
  border: 1px solid rgba(0, 0, 0, 0.15);
}

.business-partners-et-filiales .map-marker-flag,
.subsidiaries-and-business-partners .map-marker-flag,
.business-partners-e-filiali .map-marker-flag {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 17px;
}

.business-partners-et-filiales .map-marker-text,
.subsidiaries-and-business-partners .map-marker-text,
.business-partners-e-filiali .map-marker-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.business-partners-et-filiales .map-marker-text strong,
.subsidiaries-and-business-partners .map-marker-text strong,
.business-partners-e-filiali .map-marker-text strong {
  font-size: 12px;
  font-weight: 700;
}

.business-partners-et-filiales .map-marker-text small,
.subsidiaries-and-business-partners .map-marker-text small,
.business-partners-e-filiali .map-marker-text small {
  font-size: 9px;
  opacity: 0.7;
  margin-top: 2px;
}

.business-partners-et-filiales .headquarters-marker-text small,
.subsidiaries-and-business-partners .headquarters-marker-text small,
.business-partners-e-filiali .headquarters-marker-text small {
  font-size: 10px;
  opacity: 0.72;
  margin-top: 2px;
}

.business-partners-et-filiales .agent-marker-text,
.subsidiaries-and-business-partners .agent-marker-text,
.business-partners-et-filiales .subsidiary-marker-text,
.subsidiaries-and-business-partners .subsidiary-marker-text,
.business-partners-e-filiali .subsidiary-marker-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.business-partners-et-filiales .agent-marker-text strong,
.subsidiaries-and-business-partners .agent-marker-text strong,
.business-partners-et-filiales .subsidiary-marker-text strong,
.subsidiaries-and-business-partners .subsidiary-marker-text strong,
.business-partners-e-filiali .subsidiary-marker-text strong {
  font-size: 12px;
  font-weight: 700;
}

.business-partners-et-filiales .agent-marker-text small,
.subsidiaries-and-business-partners .agent-marker-text small,
.business-partners-et-filiales .subsidiary-marker-text small,
.subsidiaries-and-business-partners .subsidiary-marker-text small,
.business-partners-e-filiali .subsidiary-marker-text small {
  font-size: 9px;
  opacity: 0.65;
  margin-top: 2px;
}

@media screen and (max-width: 568px) {
  .business-partners-et-filiales #address-list,
  .subsidiaries-and-business-partners #address-list,
  .business-partners-e-filiali #address-list {
    grid-template-columns: repeat(1, 1fr);
  }
  .business-partners-et-filiales #subsidiarie-list,
  .subsidiaries-and-business-partners #subsidiarie-list,
  .business-partners-e-filiali #subsidiarie-list {
    grid-template-columns: repeat(1, 1fr);
  }
}
@media screen and (min-width: 568px) and (max-width: 768px) {
  .business-partners-et-filiales #address-list,
  .subsidiaries-and-business-partners #address-list,
  .business-partners-e-filiali #address-list {
    grid-template-columns: repeat(1, 1fr);
  }
  .business-partners-et-filiales #subsidiarie-list,
  .subsidiaries-and-business-partners #subsidiarie-list,
  .business-partners-e-filiali #subsidiarie-list {
    grid-template-columns: repeat(1, 1fr);
  }
}
@media screen and (max-width: 768px) {
  .business-partners-et-filiales #map-container,
  .subsidiaries-and-business-partners #map-container,
  .business-partners-e-filiali #map-container {
    padding-bottom: 0;
    height: 380px;
  }
  .business-partners-et-filiales #subsidiarie-list,
  .subsidiaries-and-business-partners #subsidiarie-list,
  .business-partners-e-filiali #subsidiarie-list {
    grid-template-columns: repeat(1, 1fr);
  }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .business-partners-et-filiales #address-list,
  .subsidiaries-and-business-partners #address-list,
  .business-partners-e-filiali #address-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 1024px) {
  .business-partners-et-filiales .map-marker-label,
  .subsidiaries-and-business-partners .map-marker-label,
  .business-partners-e-filiali .map-marker-label,
  .business-partners-et-filiales .map-marker-line,
  .subsidiaries-and-business-partners .map-marker-line,
  .business-partners-e-filiali .map-marker-line {
    display: none !important;
  }
  .business-partners-et-filiales .map-marker,
  .subsidiaries-and-business-partners .map-marker,
  .business-partners-e-filiali .map-marker {
    width: 40px !important;
    height: 40px !important;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1280px) {
  .business-partners-et-filiales #address-list,
  .subsidiaries-and-business-partners #address-list,
  .business-partners-e-filiali #address-list {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (min-width: 1280px) and (max-width: 1366px) {
  .business-partners-et-filiales #address-list,
  .subsidiaries-and-business-partners #address-list,
  .business-partners-e-filiali #address-list {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (min-width: 1366px) and (max-width: 1920px) {
  .business-partners-et-filiales #address-list,
  .subsidiaries-and-business-partners #address-list,
  .business-partners-e-filiali #address-list {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* Composants globaux
============================================================= */
/* Global et commun
============================================================= */
/* =============================================================
   Sticky Contact Button + Drawer
   ============================================================= */
#coverpla-sticky-contact {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  top: auto !important;
  left: auto !important;
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  height: 56px;
  min-width: 56px;
  border: none;
  border-radius: 56px;
  cursor: pointer;
  justify-content: center;
  transition: opacity 0.3s ease, transform 0.3s ease;
  background-color: var(--primaryColor);
}
#coverpla-sticky-contact:hover {
  padding: 0 16px;
  gap: 10px;
}
#coverpla-sticky-contact {
  color: var(--neutralWhite);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
#coverpla-sticky-contact.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
#coverpla-sticky-contact .sticky-contact__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#coverpla-sticky-contact .sticky-contact__icon svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}
#coverpla-sticky-contact .sticky-contact__label {
  font-family: var(--fontPrimary_Medium);
  font-size: 14px;
  white-space: nowrap;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width 0.4s ease, opacity 0.3s ease;
}
#coverpla-sticky-contact:hover .sticky-contact__label {
  max-width: 200px;
  opacity: 1;
}
#coverpla-sticky-contact.is-visible {
  background-color: var(--primaryColor);
  animation: sticky-contact-shake 14s ease-in-out infinite;
}
#coverpla-sticky-contact.is-visible .sticky-contact__icon {
  animation: sticky-contact-icon-pivot 14s ease-in-out infinite;
}
#coverpla-sticky-contact.is-visible:hover, #coverpla-sticky-contact.is-visible:hover .sticky-contact__icon {
  animation: none;
  background-color: var(--secondaryColor);
}

@keyframes sticky-contact-pulse {
  0%, 70%, 100% {
    box-shadow: 0 0 0 0 rgba(185, 154, 125, 0.5); /* doré */
  }
  80% {
    box-shadow: 0 0 0 12px rgba(185, 154, 125, 0);
  }
}
@keyframes sticky-contact-sweep {
  0%, 30%, 100% {
    background-position: 0% center;
  }
  40% {
    background-position: 100% center;
  }
  42%, 99% {
    background-position: 0% center;
  }
}
@keyframes sticky-contact-shake {
  0%, 30%, 100% {
    transform: none;
  }
  32% {
    transform: translateX(-4px) rotate(-2deg);
  }
  34% {
    transform: translateX(4px) rotate(2deg);
  }
  36% {
    transform: translateX(-3px) rotate(-1deg);
  }
  38% {
    transform: translateX(3px) rotate(1deg);
  }
  40% {
    transform: none;
  }
}
@keyframes sticky-contact-pulse {
  0%, 30%, 100% {
    box-shadow: 0 0 0 0 rgba(185, 154, 125, 0);
  }
  36% {
    box-shadow: 0 0 0 12px rgba(185, 154, 125, 0);
  }
  32% {
    box-shadow: 0 0 0 0 rgba(185, 154, 125, 0.5);
  }
}
@keyframes sticky-contact-icon-pivot {
  0%, 30%, 100% {
    transform: none;
  }
  33% {
    transform: rotate(-20deg) scale(1.15);
  }
  36% {
    transform: rotate(20deg) scale(1.15);
  }
  38% {
    transform: rotate(-10deg) scale(1.1);
  }
  40% {
    transform: none;
  }
}
#coverpla-contact-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10001;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
#coverpla-contact-overlay.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#coverpla-contact-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 420px;
  max-width: 100vw;
  z-index: 10002;
  background: var(--neutralWhite);
  box-shadow: none;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
#coverpla-contact-drawer.is-open {
  transform: translateX(0);
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
}
#coverpla-contact-drawer .contact-drawer__close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: var(--primaryColor);
  line-height: 1;
}
#coverpla-contact-drawer .contact-drawer__close svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
  display: block;
}
#coverpla-contact-drawer .contact-drawer__close:hover {
  color: var(--secondaryColor);
}
#coverpla-contact-drawer .contact-drawer__body {
  padding: 52px 20px 20px;
}
#coverpla-contact-drawer .contact-drawer__body .wpcf7-form p {
  margin: 0 0 8px;
}
#coverpla-contact-drawer .contact-drawer__body .wpcf7-form label {
  font-size: 0.75rem;
  font-family: var(--fontPrimary_Medium);
  display: block;
  margin-bottom: 2px;
  text-align: left;
}
#coverpla-contact-drawer .contact-drawer__body .wpcf7-form input[type=text],
#coverpla-contact-drawer .contact-drawer__body .wpcf7-form input[type=email],
#coverpla-contact-drawer .contact-drawer__body .wpcf7-form input[type=tel],
#coverpla-contact-drawer .contact-drawer__body .wpcf7-form select {
  height: 36px !important;
  font-size: 0.8125rem !important;
  padding: 0 10px !important;
}
#coverpla-contact-drawer .contact-drawer__body .wpcf7-form textarea {
  height: 64px !important;
  font-size: 0.8125rem !important;
  padding: 8px 10px !important;
  resize: none;
}
#coverpla-contact-drawer .contact-drawer__body .wpcf7-form p:has(> br:only-child),
#coverpla-contact-drawer .contact-drawer__body .wpcf7-form p:not(:has(label)):not(:has(input)):not(:has(textarea)):not(:has(select)):not(:has(span.wpcf7)) {
  font-size: 0.6875rem;
  color: var(--primaryColor);
  margin-top: 4px;
}
#coverpla-contact-drawer .contact-drawer__body .wpcf7-form input[type=submit] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  background-color: var(--primaryColor);
  color: var(--neutralWhite);
  font-family: var(--fontPrimary_SemiBold);
  font-weight: normal;
  font-size: var(--btn-fs-normal);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--btn-padding-v-normal) var(--btn-padding-h-normal);
  border-radius: 9999px;
  border: 2px solid var(--primaryColor);
  white-space: nowrap;
  cursor: pointer;
  outline: none;
  transition: opacity 0.2s ease;
  line-height: var(--btn-line-height);
}
#coverpla-contact-drawer .contact-drawer__body .wpcf7-form input[type=submit]:hover, #coverpla-contact-drawer .contact-drawer__body .wpcf7-form input[type=submit]:focus {
  opacity: 0.82;
  color: var(--neutralWhite);
  text-decoration: none;
}
#coverpla-contact-drawer .contact-drawer__body .wpcf7-form input[type=submit]:active {
  opacity: 0.7;
}
#coverpla-contact-drawer .contact-drawer__body .wpcf7-form input[type=submit] {
  /* Pleine largeur */
}
#coverpla-contact-drawer .contact-drawer__body .wpcf7-form input[type=submit].fw {
  width: 100%;
  justify-content: center;
}
#coverpla-contact-drawer .contact-drawer__body .wpcf7-form input[type=submit] {
  /* Désactivé */
}
#coverpla-contact-drawer .contact-drawer__body .wpcf7-form input[type=submit].disabled, #coverpla-contact-drawer .contact-drawer__body .wpcf7-form input[type=submit][aria-disabled=true], #coverpla-contact-drawer .contact-drawer__body .wpcf7-form input[type=submit]:disabled {
  opacity: 0.4;
  pointer-events: none;
  user-select: none;
  cursor: not-allowed;
}
#coverpla-contact-drawer .contact-drawer__body .wpcf7-form input[type=submit] {
  display: inline-flex !important;
  background-color: var(--primaryColor) !important;
  border-color: var(--primaryColor) !important;
  color: var(--neutralWhite) !important;
  border-radius: 9999px !important;
  margin-top: 8px;
  width: 100%;
  font-size: var(--btn-fs-small) !important;
  padding: var(--btn-padding-v-small) var(--btn-padding-h-small) !important;
}
#coverpla-contact-drawer .contact-drawer__body .wpcf7-form .wpcf7-response-output {
  margin: 8px 0 0 !important;
  padding: 6px 10px !important;
  font-size: 0.75rem;
}

@media (max-width: 767px) {
  #coverpla-sticky-contact,
  #coverpla-contact-overlay,
  #coverpla-contact-drawer {
    display: none;
  }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  #coverpla-sticky-contact,
  #coverpla-contact-overlay,
  #coverpla-contact-drawer {
    transition: none;
  }
  #coverpla-sticky-contact .sticky-contact__label {
    transition: none;
  }
}