/*!
 * Baltimar - style.css
 * Decoupage : 2026-10-01 (source : maquette web Baltimar)
 * Libs chargees a part : css/libs/materialize.css, fontawesome.css, lity.css
 */

/* =====================================================================
   SOMMAIRE (un bloc = une section, dans l'ordre de la page)
   01. Variables
   02. Base / reset
   03. Utilitaires
   04. Titres, eyebrow & boutons
   05. Header
   06. Menu mobile
   07. Hero
   08. About
   09. KPIs
   10. Products
   11. Applications
   12. Process
   13. Quality
   14. Certifications
   15. Sustainability
   16. Timeline
   17. FAQ
   18. Contact + formulaire
   19. Modales produits
   95. Footer + copyRight
   99. Back to top + loader
   Les media queries sont en BAS DE CHAQUE BLOC (desktop first, max-width).
   ===================================================================== */


/* =====================================================================
   01. Variables
   ===================================================================== */
:root {
   --olive: #1f6b2e;
   --olive-deep: #0e3a1a;
   --olive-soft: #2e8b3d;
   --gold: #e0a82e;
   --gold-soft: #f0c24e;
   --gold-dark: #c8902a;
   --cream: #faf7f0;
   --cream-2: #f3eee1;
   --muted: #f0eadc;
   --border: #e0d9c8;
   --text: #1a1f17;
   --grey: #56624a;
   --white: #fff;
   --black: #000;
   --font: "Inter", system-ui, sans-serif;
   --font-title: "Fraunces", Georgia, serif;
   --container: 1280px;
   --radius: 12px;
   --shadow: 0 1px 2px rgba(28, 28, 24, 0.04), 0 8px 24px -8px rgba(28, 28, 24, 0.1);
   --shadow-lg: 0 2px 4px rgba(28, 28, 24, 0.04), 0 24px 48px -16px rgba(28, 28, 24, 0.18);
   --gradient-olive: linear-gradient(135deg, #0e3a1a 0%, #1f6b2e 55%, #2e8b3d 100%);
   --gradient-cream: linear-gradient(180deg, #faf7f0 0%, #f3eee1 100%);
   --gradient-gold: linear-gradient(135deg, #e0a82e 0%, #f0c24e 50%, #c8902a 100%);
   --header: 80px;
}


/* =====================================================================
   02. Base / reset
   ===================================================================== */
* {
   -webkit-tap-highlight-color: transparent;
}

*, *:before, *:after {
   box-sizing: border-box;
}

html {
   scroll-padding-top: var(--header);
}

body {
   margin: 0;
   padding: 0;
   font-size: 16px;
   line-height: 1.5;
   font-family: var(--font);
   font-weight: 400;
   color: var(--text);
   background: var(--cream);
   text-rendering: optimizeLegibility;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
}

body.noScroll_ {
   overflow: hidden;
}

a, img, input, form, p, div {
   margin: 0;
   padding: 0;
   border: none;
   outline: none;
}

a {
   color: inherit;
   text-decoration: none;
}

img {
   max-width: 100%;
   vertical-align: top;
}

ul, ol {
   margin: 0;
   padding: 0;
   list-style: none;
}

button {
   font-family: var(--font);
}

::placeholder {
   color: #8a927f;
}

:focus-visible {
   outline: 2px solid var(--gold);
   outline-offset: 2px;
}

section {
   position: relative;
   width: 100%;
   color: var(--text);
}

section .container,
header .container,
footer .container {
   max-width: var(--container);
   width: 100%;
   margin: 0 auto;
   padding: 7rem 32px;
   position: relative;
}

@media screen and (max-width: 1024px) {
   section .container { padding: 5rem 24px; }
   header .container,
   footer .container { padding-left: 24px; padding-right: 24px; }
}

@media screen and (max-width: 550px) {
   section .container { padding: 4rem 16px; }
   header .container,
   footer .container { padding-left: 16px; padding-right: 16px; }
}


/* =====================================================================
   03. Utilitaires
   ===================================================================== */
.spacer-10 { height: 10px; width: 100%; display: block; }
.spacer-20 { height: 20px; width: 100%; display: block; }
.spacer-30 { height: 30px; width: 100%; display: block; }
.spacer-40 { height: 40px; width: 100%; display: block; }

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

.skipLink {
   position: absolute;
   top: -100px;
   left: 15px;
   z-index: 1000;
   background: var(--olive);
   color: var(--white);
   padding: 10px 20px;
   border-radius: 8px;
}

.skipLink:focus { top: 10px; }

/* Fleche diagonale (icone "external") */
.rot45_ {
   display: inline-block;
   transform: rotate(-45deg);
}

/* Etiquettes */
.chips_ {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
}

.chips_ li {
   padding: 3px 10px;
   border-radius: 30px;
   background: var(--muted);
   color: var(--grey);
   font-size: 12px;
   line-height: 18px;
}

.chips_.outline_ li {
   background: transparent;
   border: 1px solid var(--border);
}

/* Listes a puces */
.checkList_ li,
.arrowList_ li,
.dotList_ li {
   position: relative;
   padding: 0 0 8px 24px;
   font-size: 14px;
   line-height: 20px;
   color: var(--grey);
}

.checkList_ li:before,
.arrowList_ li:before,
.dotList_ li:before {
   position: absolute;
   top: 1px;
   left: 0;
   font-family: "Font Awesome 5 Pro";
   font-weight: 300;
   font-size: 13px;
}

.checkList_ li:before { content: "\f00c"; color: var(--olive); }
.checkList_.gold_ li:before { color: var(--gold); }
.arrowList_ li:before { content: "\f061"; color: var(--grey); }
.dotList_ li:before { content: "\f0da"; font-weight: 900; color: var(--gold); top: 0; }

/* Apparition au scroll (classe ajoutee en JS) */
.revealIt .elem_ { will-change: transform, opacity; }


/* =====================================================================
   04. Titres, eyebrow & boutons
   ===================================================================== */
section h1,
section h2 {
   margin: 0;
   padding: 0 0 20px 0;
   font-family: var(--font-title);
   font-weight: 600;
   font-size: 48px;
   line-height: 1.15;
   letter-spacing: -0.025em;
   color: var(--text);
}

section h1 em,
section h2 em {
   font-style: italic;
   color: var(--olive);
}

section h3 {
   margin: 0;
   padding: 0;
   font-family: var(--font-title);
   font-size: 18px;
   font-weight: 600;
   line-height: 1.25;
   letter-spacing: -0.02em;
   color: var(--text);
}

.eyebrow_ {
   display: flex;
   align-items: center;
   gap: 12px;
   padding-bottom: 16px;
   font-size: 11.5px;
   font-weight: 700;
   line-height: 17px;
   letter-spacing: 0.18em;
   text-transform: uppercase;
   color: var(--olive);
}

.eyebrow_:before {
   content: '';
   width: 32px;
   height: 1px;
   background: var(--gold);
}

.eyebrow_.centred { justify-content: center; }

.lead_ {
   font-size: 18px;
   line-height: 1.625;
   color: var(--grey);
}

.inBlockHeading {
   max-width: 720px;
   margin: 0 auto;
   padding-bottom: 3.5rem;
   text-align: center;
}

.inBlockHeading.left_ {
   margin: 0;
   text-align: left;
}

/* Bouton de reference : .contBtns > .btnDefault_ > a|button */
.contBtns {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
}

.contBtns .btnDefault_ a,
.contBtns .btnDefault_ button {
   margin: 0;
   padding: 12px 20px;
   min-height: 44px;
   color: var(--cream);
   background: var(--olive);
   border: 1px solid transparent;
   border-radius: 8px;
   cursor: pointer;
   font-family: var(--font);
   font-size: 14px;
   line-height: 20px;
   font-weight: 500;
   display: inline-flex;
   justify-content: center;
   align-items: center;
   gap: 10px;
   position: relative;
   z-index: 0;
   overflow: hidden;
   transition: all 0.25s ease;
}

.contBtns .btnDefault_ a:before,
.contBtns .btnDefault_ button:before {
   content: '';
   height: 100%;
   width: 100%;
   display: block;
   position: absolute;
   top: 100%;
   left: 0;
   z-index: -1;
   background: var(--olive-deep);
   transition: all 0.25s ease;
}

.contBtns .btnDefault_ a:hover:before,
.contBtns .btnDefault_ button:hover:before {
   top: 0;
}

.contBtns .btnDefault_ a i,
.contBtns .btnDefault_ button i {
   font-size: 13px;
}

/* Variantes */
.contBtns .btnDefault_.gold_ a,
.contBtns .btnDefault_.gold_ button {
   color: var(--olive-deep);
   background: var(--gradient-gold);
   box-shadow: 0 8px 20px -8px rgba(224, 168, 46, 0.6);
}

.contBtns .btnDefault_.gold_ a:hover,
.contBtns .btnDefault_.gold_ button:hover { color: var(--cream); }

.contBtns .btnDefault_.glass_ a {
   color: var(--cream);
   background: rgba(250, 247, 240, 0.08);
   border-color: rgba(250, 247, 240, 0.3);
   -webkit-backdrop-filter: blur(6px);
   backdrop-filter: blur(6px);
}

.contBtns .btnDefault_.glass_ a:before { background: var(--cream); }
.contBtns .btnDefault_.glass_ a:hover { color: var(--olive-deep); }

.contBtns .btnDefault_.outline_ a {
   color: var(--olive);
   background: var(--white);
   border-color: var(--border);
}

.contBtns .btnDefault_.outline_ a:before { background: var(--olive); }
.contBtns .btnDefault_.outline_ a:hover { color: var(--cream); }

@media screen and (max-width: 1024px) {
   section h1,
   section h2 { font-size: 40px; }
}

@media screen and (max-width: 550px) {
   section h1,
   section h2 { font-size: 32px; }
   .lead_ { font-size: 16px; }
   .inBlockHeading { padding-bottom: 2.5rem; }
}


/* =====================================================================
   05. Header
   ===================================================================== */
header.header {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 99;
   background: transparent;
   transition: all 0.4s ease;
}

header.header.scrolled_,
header.header.menuOpen_ {
   background: rgba(250, 247, 240, 0.92);
   -webkit-backdrop-filter: blur(12px);
   backdrop-filter: blur(12px);
   box-shadow: 0 1px 0 var(--border), 0 8px 24px -12px rgba(28, 28, 24, 0.15);
}

header.header .container {
   padding-top: 0;
   padding-bottom: 0;
}

header.header .container .headerContainer {
   height: var(--header);
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
}

header.header .container .headerContainer .logo { width: 130px; }
header.header .container .headerContainer .logo a { display: block; }
header.header .container .headerContainer .logo img { width: 100%; height: auto; }

header.header .container .headerContainer .mainMenu > ul {
   display: flex;
   align-items: center;
   gap: 4px;
}

header.header .container .headerContainer .mainMenu > ul > li {
   position: relative;
}

header.header .container .headerContainer .mainMenu > ul > li > a {
   display: flex;
   align-items: center;
   gap: 6px;
   padding: 8px 14px;
   border-radius: 8px;
   font-size: 14px;
   font-weight: 500;
   color: var(--cream);
   transition: all 0.2s ease;
}

header.header .container .headerContainer .mainMenu > ul > li > a i { font-size: 12px; }

header.header .container .headerContainer .mainMenu > ul > li:hover > a,
header.header .container .headerContainer .mainMenu > ul > li > a.active {
   background: rgba(250, 247, 240, 0.12);
}

header.header.scrolled_ .container .headerContainer .mainMenu > ul > li > a { color: var(--text); }

header.header.scrolled_ .container .headerContainer .mainMenu > ul > li:hover > a,
header.header.scrolled_ .container .headerContainer .mainMenu > ul > li > a.active {
   background: var(--muted);
   color: var(--olive);
}

/* Sous-menu */
header.header .container .headerContainer .mainMenu > ul > li > ul {
   position: absolute;
   top: 100%;
   left: 0;
   min-width: 220px;
   margin-top: 8px;
   padding: 8px;
   background: var(--white);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   box-shadow: var(--shadow-lg);
   opacity: 0;
   visibility: hidden;
   transform: translateY(6px);
   transition: all 0.2s ease;
}

header.header .container .headerContainer .mainMenu > ul > li > ul:before {
   content: '';
   position: absolute;
   top: -12px;
   left: 0;
   width: 100%;
   height: 12px;
}

header.header .container .headerContainer .mainMenu > ul > li > ul > li a {
   display: block;
   padding: 10px 12px;
   border-radius: 8px;
   font-size: 14px;
   font-weight: 500;
   color: var(--text);
   transition: all 0.2s ease;
}

header.header .container .headerContainer .mainMenu > ul > li > ul > li a:hover {
   background: var(--muted);
   color: var(--olive);
}

header.header .container .headerContainer .mainMenu > ul > li:hover > ul,
header.header .container .headerContainer .mainMenu > ul > li:focus-within > ul {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
}

/* Burger */
.hamburgerBTN {
   display: none;
   position: relative;
   height: 44px;
   width: 44px;
   padding: 0;
   border: 1px solid rgba(250, 247, 240, 0.3);
   border-radius: 8px;
   background: transparent;
   cursor: pointer;
}

.hamburgerBTN .bars_,
.hamburgerBTN .bars_:before,
.hamburgerBTN .bars_:after {
   position: absolute;
   left: 50%;
   width: 18px;
   height: 2px;
   margin-left: -9px;
   border-radius: 2px;
   background: var(--cream);
   transition: all 0.25s ease;
}

.hamburgerBTN .bars_ { top: 50%; margin-top: -1px; }
.hamburgerBTN .bars_:before,
.hamburgerBTN .bars_:after { content: ''; left: 0; margin-left: 0; }
.hamburgerBTN .bars_:before { top: -6px; }
.hamburgerBTN .bars_:after { top: 6px; }

header.header.scrolled_ .hamburgerBTN,
header.header.menuOpen_ .hamburgerBTN { border-color: var(--border); }

header.header.scrolled_ .hamburgerBTN .bars_,
header.header.scrolled_ .hamburgerBTN .bars_:before,
header.header.scrolled_ .hamburgerBTN .bars_:after,
header.header.menuOpen_ .hamburgerBTN .bars_:before,
header.header.menuOpen_ .hamburgerBTN .bars_:after { background: var(--text); }

.hamburgerBTN.open .bars_ { background: transparent !important; }
.hamburgerBTN.open .bars_:before { top: 0; transform: rotate(45deg); }
.hamburgerBTN.open .bars_:after { top: 0; transform: rotate(-45deg); }

@media screen and (max-width: 1100px) {
   header.header .container .headerContainer .mainMenu { display: none; }
   header.header .container .headerContainer .logo { margin-right: auto; }
   .hamburgerBTN { display: block; }
}

@media screen and (max-width: 550px) {
   :root { --header: 68px; }
   header.header .container .headerContainer .headerWidgets { display: none; }
   header.header .container .headerContainer .logo { width: 110px; }
}


/* =====================================================================
   06. Menu mobile (rempli en JS a partir de .mainMenu)
   ===================================================================== */
section.mobileMenu {
   display: none;
   position: fixed;
   top: var(--header);
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 98;
   overflow-y: auto;
   background: var(--cream);
   border-top: 1px solid var(--border);
}

section.mobileMenu .container {
   padding-top: 16px;
   padding-bottom: 32px;
}

section.mobileMenu .container ul li { border-bottom: 1px solid var(--border); }

section.mobileMenu .container ul li a {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 16px 0;
   font-family: var(--font-title);
   font-size: 22px;
   font-weight: 600;
   color: var(--text);
}

section.mobileMenu .container ul li a[aria-expanded="true"] i { transform: rotate(180deg); }

section.mobileMenu .container ul li ul { display: none; padding: 0 0 12px 16px; }
section.mobileMenu .container ul li ul li { border: none; }
section.mobileMenu .container ul li ul li a { padding: 8px 0; font-family: var(--font); font-size: 16px; font-weight: 500; color: var(--grey); }

section.mobileMenu .container .ctaBox { padding-top: 24px; }
section.mobileMenu .container .ctaBox .contBtns .btnDefault_,
section.mobileMenu .container .ctaBox .contBtns .btnDefault_ a { width: 100%; }

@media screen and (min-width: 1101px) {
   section.mobileMenu { display: none !important; }
}


/* =====================================================================
   07. Hero
   ===================================================================== */
section.heroHome {
   min-height: 100vh;
   min-height: 100svh;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   overflow: hidden;
   background: var(--olive-deep);
   color: var(--cream);
}

section.heroHome .cover_ {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

section.heroHome .cover_ img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

section.heroHome .cover_:before,
section.heroHome .cover_:after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

section.heroHome .cover_:before { background: linear-gradient(to top, rgba(14, 58, 26, 0.95) 0%, rgba(14, 58, 26, 0.4) 50%, rgba(14, 58, 26, 0.7) 100%); }
section.heroHome .cover_:after { background: linear-gradient(to right, rgba(14, 58, 26, 0.7) 0%, transparent 50%); }

section.heroHome .container {
   z-index: 2;
   padding-top: calc(var(--header) + 4rem);
   padding-bottom: 7rem;
}

section.heroHome .container .content_ { max-width: 720px; }

section.heroHome .container .content_ .badge_ {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   margin-bottom: 24px;
   padding: 6px 14px;
   border: 1px solid rgba(224, 168, 46, 0.35);
   border-radius: 30px;
   background: rgba(14, 58, 26, 0.5);
   font-size: 12px;
   font-weight: 500;
   color: var(--cream);
}

section.heroHome .container .content_ .badge_ .dot_ {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--gold);
   box-shadow: 0 0 0 4px rgba(224, 168, 46, 0.2);
}

section.heroHome .container .content_ h1 {
   padding-bottom: 24px;
   font-size: 72px;
   line-height: 1.08;
   color: var(--cream);
}

section.heroHome .container .content_ h1 em {
   background: var(--gradient-gold);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
}

section.heroHome .container .content_ .text_ {
   max-width: 620px;
   padding-bottom: 32px;
   font-size: 18px;
   line-height: 1.625;
   color: rgba(250, 247, 240, 0.8);
}

section.heroHome .certifiedBar_ {
   position: relative;
   z-index: 2;
   border-top: 1px solid rgba(250, 247, 240, 0.12);
   background: rgba(14, 58, 26, 0.4);
}

/* Bandeau "Certified by" (hero + footer) */
.certifiedBar_ .container {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
   gap: 16px 40px;
   padding-top: 22px !important;
   padding-bottom: 22px !important;
}

.certifiedBar_ .label_ {
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.2em;
   text-transform: uppercase;
   color: rgba(250, 247, 240, 0.55);
}

.certifiedBar_ ul {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 12px 28px;
}

.certifiedBar_ ul li {
   font-size: 14px;
   font-weight: 600;
   color: rgba(250, 247, 240, 0.85);
}

@media screen and (max-width: 1024px) {
   section.heroHome .container .content_ h1 { font-size: 56px; }
}

@media screen and (max-width: 550px) {
   section.heroHome .container { padding-bottom: 4rem; }
   section.heroHome .container .content_ h1 { font-size: 40px; }
   section.heroHome .container .content_ h1 br { display: none; }
   section.heroHome .container .content_ .text_ { font-size: 16px; }
   section.heroHome .container .content_ .contBtns .btnDefault_,
   section.heroHome .container .content_ .contBtns .btnDefault_ a { width: 100%; }
   .certifiedBar_ .container { gap: 10px 20px; }
   .certifiedBar_ ul { gap: 8px 18px; }
   .certifiedBar_ ul li { font-size: 13px; }
}


/* =====================================================================
   08. About
   ===================================================================== */
section.aboutSection { background: var(--cream); }

section.aboutSection .container .wrapper_ {
   display: grid;
   grid-template-columns: 5fr 7fr;
   align-items: center;
   gap: 64px;
}

section.aboutSection .container .wrapper_ .media { position: relative; }

section.aboutSection .container .wrapper_ .media .cover {
   aspect-ratio: 4 / 5;
   border-radius: 20px;
   overflow: hidden;
   box-shadow: var(--shadow-lg);
}

section.aboutSection .container .wrapper_ .media .cover img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

/* Carte flottante (about + quality) */
.floatCard_ {
   position: absolute;
   right: -24px;
   bottom: -24px;
   max-width: 220px;
   padding: 20px 24px;
   border-radius: var(--radius);
   background: var(--white);
   box-shadow: var(--shadow-lg);
   font-size: 13px;
   line-height: 1.4;
   color: var(--grey);
}

.floatCard_ .number_ {
   padding-bottom: 4px;
   font-family: var(--font-title);
   font-size: 40px;
   font-weight: 600;
   line-height: 1;
   color: var(--olive);
}

section.aboutSection .container .wrapper_ .content .lead_ { padding-bottom: 16px; }

section.aboutSection .container .wrapper_ .content > p:not(.eyebrow_):not(.lead_) {
   font-size: 15px;
   line-height: 1.65;
   color: var(--grey);
}

/* Liste d'arguments avec icone (about + quality) */
.featuresList_ {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 24px 32px;
   padding-top: 32px;
}

.featuresList_.oneCol_ {
   grid-template-columns: 1fr;
   gap: 18px;
   padding-top: 24px;
}

.featuresList_ .elem {
   display: flex;
   align-items: flex-start;
   gap: 16px;
}

.featuresList_ .elem .icon_ {
   flex: 0 0 40px;
   height: 40px;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 10px;
   background: var(--muted);
   color: var(--olive);
   font-size: 17px;
}

.featuresList_ .elem h3 {
   padding-bottom: 4px;
   font-family: var(--font);
   font-size: 15px;
   letter-spacing: 0;
}

.featuresList_ .elem p {
   font-size: 13.5px;
   line-height: 1.55;
   color: var(--grey);
}

@media screen and (max-width: 1024px) {
   section.aboutSection .container .wrapper_ { grid-template-columns: 1fr; gap: 56px; }
   section.aboutSection .container .wrapper_ .media { max-width: 520px; }
   section.aboutSection .container .wrapper_ .media .cover { aspect-ratio: 4 / 3; }
}

@media screen and (max-width: 550px) {
   .featuresList_ { grid-template-columns: 1fr; }
   .floatCard_ { right: 12px; bottom: -20px; }
}


/* =====================================================================
   09. KPIs
   ===================================================================== */
section.kpisBand {
   background: var(--gradient-olive);
   color: var(--cream);
   overflow: hidden;
}

section.kpisBand .container {
   padding-top: 5rem;
   padding-bottom: 5rem;
}

section.kpisBand .container .wrapper_ {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 32px;
}

section.kpisBand .container .wrapper_ .elem .number_ {
   padding-bottom: 8px;
   font-family: var(--font-title);
   font-size: 56px;
   font-weight: 600;
   line-height: 1;
   letter-spacing: -0.02em;
}

section.kpisBand .container .wrapper_ .elem .label_ {
   font-size: 15px;
   color: rgba(250, 247, 240, 0.75);
}

@media screen and (max-width: 768px) {
   section.kpisBand .container .wrapper_ { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
   section.kpisBand .container .wrapper_ .elem .number_ { font-size: 44px; }
}


/* =====================================================================
   10. Products
   ===================================================================== */
section.productsSection { background: var(--gradient-cream); }

section.productsSection .container .filtersProducts_,
section.faqSection .container .filtersFaq_ {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   padding-bottom: 40px;
}

section.productsSection .container .filtersProducts_ button,
section.faqSection .container .filtersFaq_ button {
   min-height: 40px;
   padding: 8px 18px;
   border: 1px solid var(--border);
   border-radius: 30px;
   background: var(--white);
   cursor: pointer;
   font-size: 14px;
   font-weight: 500;
   color: var(--text);
   transition: all 0.2s ease;
}

section.productsSection .container .filtersProducts_ button:hover,
section.faqSection .container .filtersFaq_ button:hover { border-color: var(--olive); color: var(--olive); }

section.productsSection .container .filtersProducts_ button.active,
section.faqSection .container .filtersFaq_ button.active {
   background: var(--olive);
   border-color: var(--olive);
   color: var(--cream);
}

section.productsSection .container .wrapper_ {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
}

section.productsSection .container .wrapper_ .elemProduct {
   display: flex;
   flex-direction: column;
   border: 1px solid var(--border);
   border-radius: 16px;
   overflow: hidden;
   background: var(--white);
   box-shadow: var(--shadow);
   transition: all 0.3s ease;
}

section.productsSection .container .wrapper_ .elemProduct.hidden_ { display: none; }

section.productsSection .container .wrapper_ .elemProduct:hover {
   transform: translateY(-4px);
   box-shadow: var(--shadow-lg);
}

section.productsSection .container .wrapper_ .elemProduct .cover {
   position: relative;
   aspect-ratio: 16 / 10;
   overflow: hidden;
}

section.productsSection .container .wrapper_ .elemProduct .cover img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: all 0.5s ease;
}

section.productsSection .container .wrapper_ .elemProduct:hover .cover img { transform: scale(1.1); }

section.productsSection .container .wrapper_ .elemProduct .cover .badge_,
section.productModal .headModal_ .badge_,
.productModal .headModal_ .badge_ {
   position: absolute;
   top: 12px;
   left: 12px;
   padding: 3px 10px;
   border-radius: 30px;
   background: rgba(250, 247, 240, 0.92);
   font-size: 11px;
   font-weight: 600;
   color: var(--olive-deep);
}

section.productsSection .container .wrapper_ .elemProduct .infos {
   flex: 1;
   display: flex;
   flex-direction: column;
   gap: 10px;
   padding: 22px 22px 24px 22px;
}

section.productsSection .container .wrapper_ .elemProduct .infos .productName { font-size: 19px; }

section.productsSection .container .wrapper_ .elemProduct .infos .description {
   font-size: 14px;
   line-height: 1.5;
   color: var(--grey);
}

section.productsSection .container .wrapper_ .elemProduct .infos .tags_ {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   padding-bottom: 6px;
}

section.productsSection .container .wrapper_ .elemProduct .infos .tags_ li {
   padding: 2px 9px;
   border-radius: 30px;
   background: var(--muted);
   font-size: 11.5px;
   line-height: 18px;
   color: var(--grey);
}

section.productsSection .container .wrapper_ .elemProduct .infos .tags_ li.more_ { background: transparent; }

section.productsSection .container .wrapper_ .elemProduct .infos .detailsLink_ {
   margin-top: auto;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 14px;
   font-weight: 600;
   color: var(--olive);
}

section.productsSection .container .wrapper_ .elemProduct .infos .detailsLink_ i { transition: all 0.2s ease; }
section.productsSection .container .wrapper_ .elemProduct .infos .detailsLink_:hover { text-decoration: underline; }
section.productsSection .container .wrapper_ .elemProduct .infos .detailsLink_:hover i { transform: rotate(-45deg) translateX(3px); }

/* CTA blend sur mesure */
section.productsSection .container .ctaBlend_ {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 32px;
   margin-top: 56px;
   padding: 40px 48px 40px 200px;
   border-radius: 20px;
   background: var(--gradient-olive);
   color: var(--cream);
}

section.productsSection .container .ctaBlend_ .content h3 {
   padding-bottom: 8px;
   font-size: 26px;
   color: var(--cream);
}

section.productsSection .container .ctaBlend_ .content p {
   max-width: 560px;
   font-size: 15px;
   line-height: 1.6;
   color: rgba(250, 247, 240, 0.8);
}

@media screen and (max-width: 1024px) {
   section.productsSection .container .wrapper_ { grid-template-columns: repeat(2, 1fr); }
   section.productsSection .container .ctaBlend_ { padding: 40px; }
}

@media screen and (max-width: 768px) {
   section.productsSection .container .ctaBlend_ { flex-direction: column; align-items: flex-start; }
}

@media screen and (max-width: 600px) {
   section.productsSection .container .wrapper_ { grid-template-columns: 1fr; }
   section.productsSection .container .ctaBlend_ { padding: 32px 24px; }
}


/* =====================================================================
   11. Applications (onglets verticaux)
   ===================================================================== */
section.applicationsSection { background: var(--cream); }

section.applicationsSection .container .tabsUI_ {
   display: grid;
   grid-template-columns: 4fr 8fr;
   align-items: start;
   gap: 32px;
}

section.applicationsSection .container .tabsUI_ .tabsNav_ {
   display: flex;
   flex-direction: column;
   gap: 10px;
}

section.applicationsSection .container .tabsUI_ .tabsNav_ button {
   display: flex;
   align-items: center;
   gap: 14px;
   width: 100%;
   padding: 14px 16px;
   border: 1px solid var(--border);
   border-radius: var(--radius);
   background: var(--white);
   cursor: pointer;
   text-align: left;
   transition: all 0.2s ease;
}

section.applicationsSection .container .tabsUI_ .tabsNav_ button .icon_ {
   flex: 0 0 36px;
   height: 36px;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 8px;
   background: var(--muted);
   color: var(--olive);
   font-size: 15px;
}

section.applicationsSection .container .tabsUI_ .tabsNav_ button .txt_ {
   font-size: 12px;
   line-height: 1.4;
   color: var(--grey);
}

section.applicationsSection .container .tabsUI_ .tabsNav_ button .txt_ strong {
   display: block;
   font-size: 14px;
   font-weight: 600;
   color: var(--text);
}

section.applicationsSection .container .tabsUI_ .tabsNav_ button:hover { border-color: var(--olive); }

section.applicationsSection .container .tabsUI_ .tabsNav_ button.active {
   background: var(--olive);
   border-color: var(--olive);
   box-shadow: var(--shadow);
}

section.applicationsSection .container .tabsUI_ .tabsNav_ button.active .icon_ { background: rgba(250, 247, 240, 0.15); color: var(--cream); }
section.applicationsSection .container .tabsUI_ .tabsNav_ button.active .txt_,
section.applicationsSection .container .tabsUI_ .tabsNav_ button.active .txt_ strong { color: var(--cream); }

/* Panneau */
section.applicationsSection .container .tabsUI_ .tabContent_ {
   position: relative;
   padding: 32px;
   border: 1px solid var(--border);
   border-radius: 20px;
   background: var(--white);
   box-shadow: var(--shadow);
   overflow: hidden;
}

section.applicationsSection .container .tabsUI_ .tabContent_:before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 4px;
   background: var(--gradient-gold);
}

section.applicationsSection .container .tabsUI_ .tabContent_ .headPanel_ {
   display: flex;
   align-items: center;
   gap: 16px;
   padding-bottom: 20px;
}

section.applicationsSection .container .tabsUI_ .tabContent_ .headPanel_ .icon_ {
   flex: 0 0 52px;
   height: 52px;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: var(--radius);
   background: var(--muted);
   color: var(--gold-dark);
   font-size: 22px;
}

section.applicationsSection .container .tabsUI_ .tabContent_ .headPanel_ h3 { font-size: 26px; }
section.applicationsSection .container .tabsUI_ .tabContent_ .headPanel_ .subTitle { font-size: 14px; color: var(--grey); }

section.applicationsSection .container .tabsUI_ .tabContent_ .text_ {
   padding-bottom: 28px;
   font-size: 15.5px;
   line-height: 1.65;
   color: var(--grey);
}

section.applicationsSection .container .tabsUI_ .tabContent_ .label_ {
   padding-bottom: 12px;
   font-family: var(--font-title);
   font-size: 12px;
   font-weight: 600;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: var(--grey);
}

section.applicationsSection .container .tabsUI_ .tabContent_ .twoCols_ {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 24px;
   padding-bottom: 20px;
}

section.applicationsSection .container .tabsUI_ .tabContent_ .recoProducts_ {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   padding-bottom: 24px;
}

section.applicationsSection .container .tabsUI_ .tabContent_ .recoProducts_ a {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 8px 14px;
   border: 1px solid var(--border);
   border-radius: 8px;
   background: var(--cream);
   font-size: 14px;
   font-weight: 500;
   transition: all 0.2s ease;
}

section.applicationsSection .container .tabsUI_ .tabContent_ .recoProducts_ a .dot_ {
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: var(--olive-soft);
}

section.applicationsSection .container .tabsUI_ .tabContent_ .recoProducts_ li:nth-child(2) a .dot_ { background: #e07a2e; }
section.applicationsSection .container .tabsUI_ .tabContent_ .recoProducts_ a i { font-size: 12px; color: var(--grey); }
section.applicationsSection .container .tabsUI_ .tabContent_ .recoProducts_ a:hover { border-color: var(--olive); color: var(--olive); }

section.applicationsSection .container .tabsUI_ .tabContent_ .infoBoxs_ {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 12px;
   padding-bottom: 24px;
}

section.applicationsSection .container .tabsUI_ .tabContent_ .infoBoxs_ .elem {
   padding: 16px;
   border-radius: var(--radius);
   background: var(--cream-2);
   font-size: 13px;
   line-height: 1.5;
   color: var(--grey);
}

section.applicationsSection .container .tabsUI_ .tabContent_ .infoBoxs_ .elem .title_ {
   padding-bottom: 10px;
   font-size: 14px;
   font-weight: 600;
   color: var(--text);
}

section.applicationsSection .container .tabsUI_ .tabContent_ .infoBoxs_ .elem .dotList_ li { font-size: 13px; padding-left: 16px; }
section.applicationsSection .container .tabsUI_ .tabContent_ .infoBoxs_ .elem .chips_ li { background: var(--white); }

section.applicationsSection .container .tabsUI_ .tabContent_ .bottomPanel_ {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   gap: 20px;
   padding-top: 20px;
   border-top: 1px solid var(--border);
}

@media screen and (max-width: 1024px) {
   section.applicationsSection .container .tabsUI_ { grid-template-columns: 1fr; }
   section.applicationsSection .container .tabsUI_ .tabsNav_ {
      flex-direction: row;
      overflow-x: auto;
      padding-bottom: 6px;
      -webkit-overflow-scrolling: touch;
   }
   section.applicationsSection .container .tabsUI_ .tabsNav_ button { flex: 0 0 auto; width: auto; }
   section.applicationsSection .container .tabsUI_ .tabsNav_ button .txt_ { font-size: 0; }
   section.applicationsSection .container .tabsUI_ .tabsNav_ button .txt_ strong { font-size: 14px; white-space: nowrap; }
}

@media screen and (max-width: 768px) {
   section.applicationsSection .container .tabsUI_ .tabContent_ .infoBoxs_ { grid-template-columns: 1fr; }
   section.applicationsSection .container .tabsUI_ .tabContent_ .bottomPanel_ { flex-direction: column; align-items: flex-start; }
}

@media screen and (max-width: 550px) {
   section.applicationsSection .container .tabsUI_ .tabContent_ { padding: 24px 20px; }
   section.applicationsSection .container .tabsUI_ .tabContent_ .twoCols_ { grid-template-columns: 1fr; }
   section.applicationsSection .container .tabsUI_ .tabContent_ .headPanel_ h3 { font-size: 22px; }
}


/* =====================================================================
   12. Process
   ===================================================================== */
section.processSection { background: var(--gradient-cream); }

section.processSection .container .wrapper_ {
   display: grid;
   grid-template-columns: 5fr 7fr;
   align-items: start;
   gap: 64px;
}

/* Colonne collante (process + faq) */
.stickyCol_ {
   position: sticky;
   top: calc(var(--header) + 32px);
}

section.processSection .container .wrapper_ .stickyCol_ .lead_ { padding-bottom: 32px; font-size: 16px; }

section.processSection .container .wrapper_ .stickyCol_ .cover {
   aspect-ratio: 16 / 11;
   border-radius: 20px;
   overflow: hidden;
   box-shadow: var(--shadow-lg);
}

section.processSection .container .wrapper_ .stickyCol_ .cover img { width: 100%; height: 100%; object-fit: cover; }

section.processSection .container .wrapper_ .stepsList_ { position: relative; }

section.processSection .container .wrapper_ .stepsList_:before {
   content: '';
   position: absolute;
   top: 20px;
   bottom: 20px;
   left: 21px;
   width: 1px;
   background: var(--border);
}

section.processSection .container .wrapper_ .stepsList_ .elem {
   position: relative;
   display: flex;
   gap: 24px;
   padding-bottom: 40px;
}

section.processSection .container .wrapper_ .stepsList_ .elem:last-child { padding-bottom: 0; }

section.processSection .container .wrapper_ .stepsList_ .elem .icon_ {
   position: relative;
   flex: 0 0 44px;
   height: 44px;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 50%;
   background: var(--olive);
   box-shadow: 0 0 0 6px var(--cream);
   color: var(--cream);
   font-size: 16px;
}

section.processSection .container .wrapper_ .stepsList_ .elem h3 {
   display: flex;
   align-items: baseline;
   gap: 10px;
   padding: 8px 0 10px 0;
   font-size: 21px;
}

section.processSection .container .wrapper_ .stepsList_ .elem h3 .num_ {
   font-family: var(--font);
   font-size: 13px;
   font-weight: 600;
   color: var(--gold);
}

section.processSection .container .wrapper_ .stepsList_ .elem p {
   font-size: 15px;
   line-height: 1.65;
   color: var(--grey);
}

@media screen and (max-width: 1024px) {
   section.processSection .container .wrapper_ { grid-template-columns: 1fr; gap: 48px; }
   .stickyCol_ { position: relative; top: 0; }
   section.processSection .container .wrapper_ .stickyCol_ .cover { max-width: 560px; }
}


/* =====================================================================
   13. Quality
   ===================================================================== */
section.qualitySection { background: var(--cream); }

section.qualitySection .container .wrapper_ {
   display: grid;
   grid-template-columns: 7fr 5fr;
   align-items: center;
   gap: 64px;
}

section.qualitySection .container .wrapper_ .content .lead_ { font-size: 16px; }

section.qualitySection .container .wrapper_ .content .certifiedTo_ {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 20px;
   margin-top: 32px;
   padding: 18px 22px;
   border: 1px solid var(--border);
   border-radius: var(--radius);
   background: var(--white);
}

section.qualitySection .container .wrapper_ .content .certifiedTo_ .list_ {
   display: flex;
   flex-wrap: wrap;
   gap: 6px 14px;
   font-size: 13px;
   font-weight: 500;
}

section.qualitySection .container .wrapper_ .content .certifiedTo_ .list_ .label_ {
   font-size: 11px;
   letter-spacing: 0.16em;
   text-transform: uppercase;
   color: var(--grey);
}

section.qualitySection .container .wrapper_ .content .certifiedTo_ .link_ {
   flex: 0 0 auto;
   font-size: 14px;
   font-weight: 600;
   color: var(--olive);
}

section.qualitySection .container .wrapper_ .content .certifiedTo_ .link_:hover { text-decoration: underline; }

section.qualitySection .container .wrapper_ .media { position: relative; }

section.qualitySection .container .wrapper_ .media .cover {
   aspect-ratio: 9 / 10;
   border-radius: 20px;
   overflow: hidden;
   box-shadow: var(--shadow-lg);
}

section.qualitySection .container .wrapper_ .media .cover img { width: 100%; height: 100%; object-fit: cover; }

section.qualitySection .container .wrapper_ .media .floatCard_ {
   right: auto;
   left: 0;
   bottom: -28px;
   display: flex;
   align-items: center;
   gap: 14px;
}

section.qualitySection .container .wrapper_ .media .floatCard_ .icon_ {
   flex: 0 0 38px;
   height: 38px;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 8px;
   background: var(--olive);
   color: var(--cream);
}

section.qualitySection .container .wrapper_ .media .floatCard_ strong {
   display: block;
   font-family: var(--font-title);
   font-size: 20px;
   color: var(--text);
}

@media screen and (max-width: 1024px) {
   section.qualitySection .container .wrapper_ { grid-template-columns: 1fr; gap: 56px; }
   section.qualitySection .container .wrapper_ .media { max-width: 520px; }
   section.qualitySection .container .wrapper_ .media .cover { aspect-ratio: 4 / 3; }
}

@media screen and (max-width: 550px) {
   section.qualitySection .container .wrapper_ .content .certifiedTo_ { flex-direction: column; align-items: flex-start; }
   section.qualitySection .container .wrapper_ .media .floatCard_ { left: 12px; }
}


/* =====================================================================
   14. Certifications
   ===================================================================== */
section.certificationsSection { background: var(--gradient-cream); overflow: hidden; }

section.certificationsSection .container .statsBar_ {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   margin-bottom: 32px;
   border: 1px solid var(--border);
   border-radius: 16px;
   background: var(--white);
}

section.certificationsSection .container .statsBar_ li {
   padding: 26px 16px;
   text-align: center;
   font-size: 13px;
   color: var(--grey);
}

section.certificationsSection .container .statsBar_ li + li { border-left: 1px solid var(--border); }

section.certificationsSection .container .statsBar_ li .number_ {
   padding-bottom: 4px;
   font-family: var(--font-title);
   font-size: 30px;
   font-weight: 600;
   color: var(--olive);
}

section.certificationsSection .container .wrapper_ {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
}

section.certificationsSection .container .wrapper_ .elemCertif {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 32px 20px 22px 20px;
   border: 1px solid var(--border);
   border-radius: 16px;
   background: var(--white);
   text-align: center;
   box-shadow: var(--shadow);
   transition: all 0.3s ease;
}

section.certificationsSection .container .wrapper_ .elemCertif:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

section.certificationsSection .container .wrapper_ .elemCertif .code_ {
   position: absolute;
   top: 12px;
   right: 12px;
   padding: 2px 7px;
   border-radius: 4px;
   background: var(--muted);
   font-size: 10px;
   font-weight: 700;
   letter-spacing: 0.08em;
   color: var(--grey);
}

section.certificationsSection .container .wrapper_ .elemCertif .seal_ {
   width: 96px;
   height: 96px;
   margin-bottom: 18px;
   padding: 6px;
   border: 1px solid var(--border);
   border-radius: var(--radius);
   background: var(--white);
}

section.certificationsSection .container .wrapper_ .elemCertif .seal_ img { width: 100%; height: 100%; object-fit: contain; }

section.certificationsSection .container .wrapper_ .elemCertif h3 { padding-bottom: 8px; font-size: 19px; }

section.certificationsSection .container .wrapper_ .elemCertif p {
   padding-bottom: 18px;
   font-size: 13.5px;
   line-height: 1.5;
   color: var(--grey);
}

section.certificationsSection .container .wrapper_ .elemCertif .status_ {
   margin-top: auto;
   padding: 0;
   font-size: 12px;
   font-weight: 500;
   color: var(--olive);
}

section.certificationsSection .container .wrapper_ .elemCertif .status_:before {
   content: '';
   display: inline-block;
   width: 6px;
   height: 6px;
   margin-right: 6px;
   border-radius: 50%;
   background: var(--olive-soft);
   vertical-align: middle;
}

section.certificationsSection .container .complianceBox_ {
   display: flex;
   align-items: center;
   gap: 24px;
   margin-top: 40px;
   padding: 32px;
   border: 1px solid var(--border);
   border-radius: 20px;
   background: var(--white);
   box-shadow: var(--shadow);
}

section.certificationsSection .container .complianceBox_ .icon_ {
   flex: 0 0 52px;
   height: 52px;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: var(--radius);
   background: var(--muted);
   color: var(--olive);
   font-size: 20px;
}

section.certificationsSection .container .complianceBox_ .content { flex: 1; }
section.certificationsSection .container .complianceBox_ .content h3 { padding-bottom: 6px; font-size: 20px; }
section.certificationsSection .container .complianceBox_ .content p { font-size: 14px; line-height: 1.6; color: var(--grey); }

@media screen and (max-width: 1024px) {
   section.certificationsSection .container .wrapper_ { grid-template-columns: repeat(2, 1fr); }
   section.certificationsSection .container .complianceBox_ { flex-wrap: wrap; }
}

@media screen and (max-width: 768px) {
   section.certificationsSection .container .statsBar_ { grid-template-columns: repeat(2, 1fr); }
   section.certificationsSection .container .statsBar_ li:nth-child(3) { border-left: none; }
   section.certificationsSection .container .statsBar_ li:nth-child(n+3) { border-top: 1px solid var(--border); }
}

@media screen and (max-width: 428px) {
   section.certificationsSection .container .wrapper_ { gap: 12px; }
   section.certificationsSection .container .wrapper_ .elemCertif { padding: 28px 12px 18px 12px; }
   section.certificationsSection .container .wrapper_ .elemCertif .seal_ { width: 72px; height: 72px; }
   section.certificationsSection .container .complianceBox_ { padding: 24px 20px; }
}


/* =====================================================================
   15. Sustainability
   ===================================================================== */
section.sustainabilitySection {
   background: var(--gradient-olive);
   color: var(--cream);
   overflow: hidden;
}

section.sustainabilitySection .cover_ {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   opacity: 0.07;
   mix-blend-mode: luminosity;
}

section.sustainabilitySection .cover_ img { width: 100%; height: 100%; object-fit: cover; }

section.sustainabilitySection h2 { color: var(--cream); }

section.sustainabilitySection h2 em {
   background: var(--gradient-gold);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
}

section.sustainabilitySection .eyebrow_ { color: var(--gold-soft); }
section.sustainabilitySection .lead_ { color: rgba(250, 247, 240, 0.8); }

section.sustainabilitySection .container .wrapper_ {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
}

section.sustainabilitySection .container .wrapper_ .elem {
   padding: 24px;
   border: 1px solid rgba(250, 247, 240, 0.14);
   border-radius: 16px;
   background: rgba(250, 247, 240, 0.06);
   -webkit-backdrop-filter: blur(4px);
   backdrop-filter: blur(4px);
   transition: all 0.3s ease;
}

section.sustainabilitySection .container .wrapper_ .elem:hover { background: rgba(250, 247, 240, 0.1); }

section.sustainabilitySection .container .wrapper_ .elem .top_ {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 10px;
   padding-bottom: 24px;
}

section.sustainabilitySection .container .wrapper_ .elem .top_ .icon_ {
   flex: 0 0 40px;
   height: 40px;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 10px;
   background: rgba(250, 247, 240, 0.1);
   color: var(--gold-soft);
}

section.sustainabilitySection .container .wrapper_ .elem .top_ .kpi_ {
   font-family: var(--font-title);
   font-size: 19px;
   font-weight: 600;
   color: var(--gold-soft);
   text-align: right;
}

section.sustainabilitySection .container .wrapper_ .elem h3 { padding-bottom: 10px; color: var(--cream); }

section.sustainabilitySection .container .wrapper_ .elem p {
   font-size: 14px;
   line-height: 1.6;
   color: rgba(250, 247, 240, 0.75);
}

section.sustainabilitySection .container .bottomCta_ {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 16px 24px;
   padding-top: 48px;
   font-size: 14px;
   color: rgba(250, 247, 240, 0.7);
}

@media screen and (max-width: 1024px) {
   section.sustainabilitySection .container .wrapper_ { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 550px) {
   section.sustainabilitySection .container .wrapper_ { grid-template-columns: 1fr; }
}


/* =====================================================================
   16. Timeline
   ===================================================================== */
section.timelineSection { background: var(--gradient-cream); }

section.timelineSection .container .wrapper_ {
   position: relative;
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   gap: 16px;
}

section.timelineSection .container .wrapper_:before {
   content: '';
   position: absolute;
   top: 7px;
   left: 0;
   right: 0;
   height: 1px;
   background: linear-gradient(90deg, transparent, var(--gold) 10%, var(--gold) 90%, transparent);
   opacity: 0.5;
}

section.timelineSection .container .wrapper_ .elem {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 18px;
}

section.timelineSection .container .wrapper_ .elem .dot_ {
   position: relative;
   width: 15px;
   height: 15px;
   border-radius: 50%;
   background: var(--gold);
   box-shadow: 0 0 0 5px var(--cream);
}

section.timelineSection .container .wrapper_ .elem .card_ {
   flex: 1;
   width: 100%;
   padding: 20px 18px;
   border: 1px solid var(--border);
   border-radius: 16px;
   background: var(--white);
   box-shadow: var(--shadow);
}

section.timelineSection .container .wrapper_ .elem .card_ .year_ {
   padding-bottom: 12px;
   font-family: var(--font-title);
   font-size: 26px;
   font-weight: 600;
   line-height: 1;
   color: var(--olive);
}

section.timelineSection .container .wrapper_ .elem .card_ h3 { padding-bottom: 8px; font-size: 16px; }

section.timelineSection .container .wrapper_ .elem .card_ p:not(.year_) {
   font-size: 13.5px;
   line-height: 1.6;
   color: var(--grey);
}

@media screen and (max-width: 1024px) {
   section.timelineSection .container .wrapper_ { grid-template-columns: repeat(3, 1fr); row-gap: 32px; }
   section.timelineSection .container .wrapper_:before { display: none; }
}

@media screen and (max-width: 600px) {
   section.timelineSection .container .wrapper_ { grid-template-columns: 1fr; gap: 0; padding-left: 28px; }
   section.timelineSection .container .wrapper_:before {
      display: block;
      top: 0;
      bottom: 0;
      left: 7px;
      right: auto;
      width: 1px;
      height: auto;
      background: var(--gold);
   }
   section.timelineSection .container .wrapper_ .elem { position: relative; align-items: stretch; padding-bottom: 16px; }
   section.timelineSection .container .wrapper_ .elem .dot_ { position: absolute; top: 22px; left: -28px; }
}


/* =====================================================================
   17. FAQ
   ===================================================================== */
section.faqSection { background: var(--cream); }

section.faqSection .container .wrapper_ {
   display: grid;
   grid-template-columns: 4fr 8fr;
   align-items: start;
   gap: 64px;
}

section.faqSection .container .wrapper_ .stickyCol_ h2 { font-size: 38px; }
section.faqSection .container .wrapper_ .stickyCol_ .lead_ { padding-bottom: 28px; font-size: 16px; }

section.faqSection .container .wrapper_ .stickyCol_ .helpBox_ {
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 20px;
   border: 1px solid var(--border);
   border-radius: var(--radius);
   background: var(--muted);
}

section.faqSection .container .wrapper_ .stickyCol_ .helpBox_ .icon_ { font-size: 28px; color: var(--olive); }
section.faqSection .container .wrapper_ .stickyCol_ .helpBox_ .title_ { font-size: 14px; font-weight: 600; }
section.faqSection .container .wrapper_ .stickyCol_ .helpBox_ a { font-size: 14px; font-weight: 500; color: var(--gold-dark); }
section.faqSection .container .wrapper_ .stickyCol_ .helpBox_ a:hover { text-decoration: underline; }

section.faqSection .container .filtersFaq_ { padding-bottom: 24px; }
section.faqSection .container .filtersFaq_ button { min-height: 34px; padding: 6px 14px; font-size: 13px; }

section.faqSection .container .faqElems ul {
   display: flex;
   flex-direction: column;
   gap: 12px;
}

section.faqSection .container .faqElems ul li {
   border: 1px solid var(--border);
   border-radius: var(--radius);
   background: var(--white);
   box-shadow: var(--shadow);
   transition: all 0.2s ease;
}

section.faqSection .container .faqElems ul li.hidden_ { display: none; }

section.faqSection .container .faqElems ul li .faqTitle_ {
   display: flex;
   align-items: center;
   gap: 14px;
   width: 100%;
   padding: 20px 22px;
   border: none;
   background: none;
   cursor: pointer;
   text-align: left;
   font-family: var(--font-title);
   font-size: 16px;
   font-weight: 600;
   line-height: 1.35;
   color: var(--text);
}

section.faqSection .container .faqElems ul li .faqTitle_:before {
   content: "\f067";
   flex: 0 0 auto;
   font-family: "Font Awesome 5 Pro";
   font-weight: 300;
   font-size: 15px;
   color: var(--gold);
   transition: all 0.2s ease;
}

section.faqSection .container .faqElems ul li .faqTitle_:after {
   content: "\f107";
   margin-left: auto;
   font-family: "Font Awesome 5 Pro";
   font-weight: 300;
   font-size: 16px;
   color: var(--grey);
   transition: all 0.2s ease;
}

section.faqSection .container .faqElems ul li .faqTitle_.active { color: var(--olive); }
section.faqSection .container .faqElems ul li .faqTitle_.active:before { transform: rotate(45deg); }
section.faqSection .container .faqElems ul li .faqTitle_.active:after { transform: rotate(180deg); }

section.faqSection .container .faqElems ul li .contentFAQ {
   display: none;
   padding: 0 22px 20px 51px;
   font-size: 15px;
   line-height: 1.65;
   color: var(--grey);
}

@media screen and (max-width: 1024px) {
   section.faqSection .container .wrapper_ { grid-template-columns: 1fr; gap: 40px; }
}

@media screen and (max-width: 550px) {
   section.faqSection .container .wrapper_ .stickyCol_ h2 { font-size: 30px; }
   section.faqSection .container .faqElems ul li .faqTitle_ { padding: 16px; font-size: 15px; }
   section.faqSection .container .faqElems ul li .contentFAQ { padding: 0 16px 16px 16px; }
}


/* =====================================================================
   18. Contact + formulaire
   ===================================================================== */
section.contactSection { background: var(--gradient-cream); }

section.contactSection .container .wrapper_ {
   display: grid;
   grid-template-columns: 5fr 7fr;
   align-items: start;
   gap: 56px;
}

section.contactSection .container .wrapper_ .content .lead_ { padding-bottom: 28px; font-size: 16px; }

section.contactSection .container .wrapper_ .contactBoxs_ {
   display: flex;
   flex-direction: column;
   gap: 12px;
}

section.contactSection .container .wrapper_ .contactBoxs_ li {
   display: flex;
   align-items: center;
   gap: 16px;
   padding: 16px 18px;
   border: 1px solid var(--border);
   border-radius: var(--radius);
   background: var(--white);
   font-size: 15px;
   font-weight: 500;
}

section.contactSection .container .wrapper_ .contactBoxs_ li .icon_ {
   flex: 0 0 40px;
   height: 40px;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 10px;
   background: var(--muted);
   color: var(--olive);
}

section.contactSection .container .wrapper_ .contactBoxs_ li .label_ {
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: var(--grey);
}

section.contactSection .container .wrapper_ .contactBoxs_ li .small_ { font-size: 13px; font-weight: 400; color: var(--grey); }
section.contactSection .container .wrapper_ .contactBoxs_ li a:hover { color: var(--olive); }

section.contactSection .container .wrapper_ .contFormulaire {
   padding: 32px;
   border: 1px solid var(--border);
   border-radius: 20px;
   background: var(--white);
   box-shadow: var(--shadow-lg);
}

.contFormulaire .msg_ {
   display: none;
   margin: 0 0 20px 0;
   padding: 12px 16px;
   border-radius: 8px;
   font-size: 14px;
   color: var(--olive-deep);
   background: #e3f1e2;
}

.contFormulaire .msg_.error_send { color: #721c24; background: #f8d7da; }

.generic_form .form {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 18px 16px;
}

.generic_form .champsMe { position: relative; }
.generic_form .champsMe.full,
.generic_form .subCont_form { grid-column: 1 / -1; }

.generic_form .champsMe .labelForm {
   display: block;
   padding-bottom: 6px;
   font-size: 13px;
   font-weight: 500;
   color: var(--text);
}

.generic_form .champsMe .labelForm span { color: #d0342c; }

.generic_form .champsMe .inputDefault,
.generic_form .champsMe select.inputDefault {
   width: 100%;
   height: 44px;
   margin: 0;
   padding: 0 14px;
   box-sizing: border-box !important;
   border: 1px solid var(--border) !important;
   border-radius: 8px;
   background: var(--white);
   box-shadow: none !important;
   font-family: var(--font);
   font-size: 14px;
   color: var(--text);
   transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.generic_form .champsMe select.inputDefault {
   appearance: none;
   -webkit-appearance: none;
   padding-right: 36px;
   background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2356624a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
}

.generic_form .champsMe textarea.inputDefault {
   height: auto;
   min-height: 110px;
   padding: 12px 14px;
   resize: vertical;
}

.generic_form .champsMe .inputDefault:focus {
   border-color: var(--olive) !important;
   box-shadow: 0 0 0 3px rgba(31, 107, 46, 0.12) !important;
}

.generic_form .champsMe .inputDefault.error { border-color: #d0342c !important; }

.generic_form .champsMe .error,
.generic_form .champsMe label.error {
   display: block;
   margin-top: 4px;
   font-size: 12.5px;
   color: #d0342c;
}

.generic_form .champsMe .consent_ span { font-size: 13px; line-height: 1.55; color: var(--grey); }

.generic_form [type="checkbox"].filled-in:checked + span:not(.lever):after {
   border: 2px solid var(--olive);
   background-color: var(--olive);
}

@media screen and (max-width: 1024px) {
   section.contactSection .container .wrapper_ { grid-template-columns: 1fr; }
}

@media screen and (max-width: 550px) {
   section.contactSection .container .wrapper_ .contFormulaire { padding: 24px 18px; }
   .generic_form .form { grid-template-columns: 1fr; }
   .generic_form .subCont_form .contBtns .btnDefault_,
   .generic_form .subCont_form .contBtns .btnDefault_ button { width: 100%; }
}


/* =====================================================================
   19. Modales produits (lity inline)
   ===================================================================== */
.lity { background: rgba(14, 58, 26, 0.75); }
.lity-container { max-width: 100%; }
.lity-inline .lity-container { padding: 24px 0; }

.productModal {
   position: relative;
   width: 640px;
   max-width: calc(100vw - 32px);
   max-height: calc(100vh - 48px);
   overflow-y: auto;
   border-radius: 20px;
   background: var(--cream);
   box-shadow: var(--shadow-lg);
   color: var(--text);
}

.lity-close,
.lity-close:hover,
.lity-close:focus,
.lity-close:active {
   top: 20px;
   right: 20px;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: rgba(250, 247, 240, 0.92);
   color: var(--text);
   font-size: 26px;
   line-height: 40px;
   text-shadow: none;
}

.productModal .headModal_ {
   position: relative;
   height: 220px;
}

.productModal .headModal_ img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.productModal .headModal_:after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(to top, rgba(14, 58, 26, 0.9) 0%, rgba(14, 58, 26, 0.2) 70%);
}

.productModal .headModal_ .content_ {
   position: absolute;
   left: 0;
   bottom: 0;
   z-index: 2;
   width: 100%;
   padding: 24px 28px;
   color: var(--cream);
}

.productModal .headModal_ .content_ .badge_ { position: static; display: inline-block; margin-bottom: 10px; }

.productModal .headModal_ .content_ h2 {
   margin: 0;
   padding: 0 0 4px 0;
   font-family: var(--font-title);
   font-size: 30px;
   font-weight: 600;
   line-height: 1.15;
   color: var(--cream);
}

.productModal .headModal_ .content_ p { font-size: 15px; color: rgba(250, 247, 240, 0.85); }

.productModal .bodyModal_ { padding: 28px; }

.productModal .bodyModal_ .intro_ {
   padding-bottom: 20px;
   font-size: 15px;
   line-height: 1.7;
   color: var(--grey);
}

.productModal .bodyModal_ h3 {
   display: flex;
   align-items: center;
   gap: 10px;
   margin: 0;
   padding: 28px 0 14px 0;
   font-family: var(--font-title);
   font-size: 19px;
   font-weight: 600;
}

.productModal .bodyModal_ h3:before {
   content: '';
   width: 3px;
   height: 18px;
   border-radius: 2px;
   background: var(--gold);
}

.productModal .bodyModal_ > p:not(.intro_):not(.note_) { font-size: 14px; line-height: 1.6; color: var(--grey); }

.productModal .bodyModal_ .label_ {
   padding: 4px 0 10px 0;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: var(--grey);
}

.productModal .bodyModal_ .twoCols_ {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 0 28px;
}

.productModal .bodyModal_ .specsTable_ {
   width: 100%;
   border-collapse: collapse;
   border: 1px solid var(--border);
   border-radius: var(--radius);
   overflow: hidden;
   background: var(--white);
   font-size: 13.5px;
}

.productModal .bodyModal_ .specsTable_ tr:nth-child(even) { background: var(--cream); }

.productModal .bodyModal_ .specsTable_ th,
.productModal .bodyModal_ .specsTable_ td {
   padding: 10px 14px;
   border-radius: 0;
   text-align: left;
   vertical-align: top;
}

.productModal .bodyModal_ .specsTable_ th { font-weight: 400; color: var(--grey); }
.productModal .bodyModal_ .specsTable_ td { font-weight: 600; text-align: right; }

.productModal .bodyModal_ .note_ { padding-top: 8px; font-size: 12px; font-style: italic; color: var(--grey); }

.productModal .bodyModal_ .downloads_ {
   display: flex;
   flex-direction: column;
   gap: 8px;
}

.productModal .bodyModal_ .downloads_ a {
   display: flex;
   align-items: center;
   gap: 14px;
   padding: 12px 16px;
   border: 1px solid var(--border);
   border-radius: 10px;
   background: var(--white);
   font-size: 14px;
   font-weight: 500;
   transition: all 0.2s ease;
}

.productModal .bodyModal_ .downloads_ a span { flex: 1; }
.productModal .bodyModal_ .downloads_ a small { display: block; font-size: 12px; font-weight: 400; color: var(--grey); }
.productModal .bodyModal_ .downloads_ a i { color: var(--olive); }
.productModal .bodyModal_ .downloads_ a:hover { border-color: var(--olive); }

.productModal .bodyModal_ .relatedProducts_ {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 10px;
}

.productModal .bodyModal_ .relatedProducts_ a {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 10px;
   border: 1px solid var(--border);
   border-radius: 10px;
   background: var(--white);
   font-size: 12px;
   line-height: 1.35;
   color: var(--grey);
   transition: all 0.2s ease;
}

.productModal .bodyModal_ .relatedProducts_ a img { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 8px; object-fit: cover; }
.productModal .bodyModal_ .relatedProducts_ a strong { display: block; font-size: 13px; color: var(--text); }
.productModal .bodyModal_ .relatedProducts_ a:hover { border-color: var(--olive); }

@media screen and (max-width: 600px) {
   .productModal .headModal_ { height: 180px; }
   .productModal .headModal_ .content_ h2 { font-size: 24px; }
   .productModal .bodyModal_ { padding: 22px 18px; }
   .productModal .bodyModal_ .twoCols_,
   .productModal .bodyModal_ .relatedProducts_ { grid-template-columns: 1fr; }
}


/* =====================================================================
   95. Footer + copyRight
   ===================================================================== */
footer.footer {
   background: var(--olive-deep);
   color: rgba(250, 247, 240, 0.75);
   overflow: hidden;
}

footer.footer .certifiedBar_ { border-bottom: 1px solid rgba(250, 247, 240, 0.1); }

footer.footer > .container {
   padding-top: 4rem;
   padding-bottom: 3rem;
}

footer.footer > .container .wrapper_ {
   display: grid;
   grid-template-columns: 4fr 3fr 2fr 3fr;
   gap: 40px;
}

footer.footer > .container .wrapper_ .brandingBox .logoFooter { width: 200px; padding-bottom: 20px; }
footer.footer > .container .wrapper_ .brandingBox .logoFooter img { width: 100%; height: auto; }

footer.footer > .container .wrapper_ .brandingBox .text {
   max-width: 340px;
   padding-bottom: 24px;
   font-size: 14px;
   line-height: 1.65;
}

footer.footer > .container .wrapper_ .brandingBox .elemSM { display: flex; gap: 8px; }

footer.footer > .container .wrapper_ .brandingBox .elemSM .rs_ a {
   height: 38px;
   width: 38px;
   display: flex;
   justify-content: center;
   align-items: center;
   border: 1px solid rgba(250, 247, 240, 0.2);
   border-radius: 8px;
   color: var(--cream);
   transition: all 0.2s ease;
}

footer.footer > .container .wrapper_ .brandingBox .elemSM .rs_ a:hover { background: var(--gold); border-color: var(--gold); color: var(--olive-deep); }

footer.footer > .container .wrapper_ .elem .title {
   margin: 0;
   padding: 0 0 20px 0;
   font-family: var(--font-title);
   font-size: 12px;
   font-weight: 500;
   letter-spacing: 0.18em;
   text-transform: uppercase;
   color: rgba(250, 247, 240, 0.55);
}

footer.footer > .container .wrapper_ .elem ul li { padding-bottom: 12px; font-size: 14px; }
footer.footer > .container .wrapper_ .elem ul li a { color: var(--cream); transition: all 0.2s ease; }
footer.footer > .container .wrapper_ .elem ul li a:hover { color: var(--gold-soft); }
footer.footer > .container .wrapper_ .elem ul li.address_ { line-height: 1.6; }

footer.footer .copyRight .container {
   display: flex;
   align-items: center;
   gap: 24px;
   padding-top: 22px;
   padding-bottom: 22px;
   border-top: 1px solid rgba(250, 247, 240, 0.1);
   font-size: 12px;
   color: rgba(250, 247, 240, 0.6);
}

footer.footer .copyRight .container > p { flex: 1; }

footer.footer .copyRight .container .legal_ { display: flex; gap: 20px; }
footer.footer .copyRight .container .legal_ a:hover { color: var(--cream); }

@media screen and (max-width: 1024px) {
   footer.footer > .container .wrapper_ { grid-template-columns: repeat(3, 1fr); }
   footer.footer > .container .wrapper_ .elem.x2_ { grid-column: 1 / -1; }
}

@media screen and (max-width: 600px) {
   footer.footer > .container .wrapper_ { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
   footer.footer > .container .wrapper_ .elem:last-child { grid-column: 1 / -1; }
   footer.footer .copyRight .container { flex-wrap: wrap; }
   footer.footer .copyRight .container > p { flex: 1 1 100%; }
}


/* =====================================================================
   99. Back to top + loader
   ===================================================================== */
#backtoTop {
   flex: 0 0 auto;
   width: 40px;
   height: 40px;
   border: 1px solid rgba(250, 247, 240, 0.2);
   border-radius: 50%;
   background: transparent;
   cursor: pointer;
   transition: all 0.2s ease;
}

#backtoTop:after {
   content: "\f062";
   font-family: "Font Awesome 5 Pro";
   font-weight: 300;
   font-size: 15px;
   color: var(--cream);
}

#backtoTop:hover { background: var(--gold); border-color: var(--gold); }
#backtoTop:hover:after { color: var(--olive-deep); }

#loaderLayer {
   position: fixed;
   top: 0;
   left: 0;
   z-index: 999999;
   height: 100vh;
   width: 100vw;
   background: rgba(14, 58, 26, 0.9);
}

#loaderLayer .loader {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

@media (prefers-reduced-motion: reduce) {
   *, *:before, *:after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
   }
}